.inputGroup {
  background-color: #000;
  display: inline-block;
  margin: 10px 0;
  position: relative;
  width: 100%;
  border-radius: 15px;
  
}
.inputGroup label {
  padding: 12px 30px;
  width: 100%;
  display: block;
  text-align: left;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
  overflow: hidden;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
}
.inputGroup label:before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  content: "";
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale3d(1, 1, 1);
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: -1;
  
}
.inputGroup label:after {
  width: 32px;
  height: 32px;
  content: "";
  border: 2px solid #D1D7DC;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-position: 2px 3px;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
  color: #000;
  border-radius: 15px;
}
.inputGroup input:checked ~ label:before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}
.inputGroup input:checked ~ label:after {
  background-color: #d20000;
  border-color: #d20000;
}
.inputGroup input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}



*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

code {
  background-color: #9AA3AC;
  padding: 0 8px;
}
/* HeNy007 */
  #ExternalsponserContainer{width:80%;max-width:1074px;position:fixed;bottom:0;z-index:9999999;right:0;left:0;margin-right:auto;margin-left:auto}
  #ExternalsponserContainer1{width:80%;max-width:1074px;position:fixed;bottom:0;z-index:9999999;right:0;left:0;margin-right:auto;margin-left:0;display:none}
  #closeBtn {
  background-color: RGB(51,51,51);
  width: auto;
  color: rgb(255,255,255);
  font-size: 13px;
  text-align: center;
  line-height: 30px;
  z-index: 99999999;
  cursor: pointer;
  margin: 0;
  padding: 5px 12px;
  float: left;
  height: 37px;
  font-family: 'Droid Arabic Kufi';
  font-weight: 700;
  }
  .submenu-button-left {
  height: 0;
  border-bottom: 36px solid #333333;
  border-right: 36px solid transparent;
  left: 160px;
  top: 0px;
  }
  #alert_content{background:#8B0000;color:#fff;padding:10px;width:100%;display:block;float:right;font-size:14px;font-family:tahoma;}
  .button.medium{font-size:14px;padding:8px 18px}
  .orange{background:RGB(243,156,18)}
  .button{border-radius:2px;background:RGB(204,0,0);padding:10px 20px;margin:5px;color:rgb(255,255,255);text-align:center;border:0;cursor:pointer;display:inline-block;text-decoration:none;font-weight:400;color:rgb(255,255,255);-webkit-box-shadow:0 4px 4px -2px rgba(0,0,0,0.1);box-shadow:0 4px 4px -2px rgba(0,0,0,0.1)}
  .grey{background:rgb(189,195,199);color:#333}
   

/* Search By HeNy007
 ****************************/
p {
 text-align: center;
 color: #fff;
 font-size: 14px;
 }
 h4 {
 color: #fff;
 text-align: center;
 letter-spacing: 0.5px;
 transform: scale(0);
 transition: all 0.3s;
 position: relative;
 top: -25px;
 margin: 0;
 font-weight: normal;
 }
 h4.show {
 animation: alert 0.18s ease-in-out;
 animation-fill-mode: forwards;
 }
 @keyframes alert {
 0%{
 transform: scale(0);
 }
 80% {
 transform: scale(1.2);
 }
 100% {
 transform: scale(1);
 }
 }
 form {
 transition: all 0.15s;
 }
 form.explode {
 transform: scale(1.4);
 opacity: 0;
 }
 
 form {
 width: 30px;
 height: 30px;
 top: 6px;
 margin: 0 auto;
 display: block;
 box-sizing: border-box;
 position: relative;
 }
 input[type="submit"]{
 display: none !important;
 }
 input {
 width: 100%;
 }
 input {
 background: none;
 border: 3px solid #fff;
 border-radius: 26px;
 box-sizing: border-box;
 padding: 5px 15px 7px;
 font-size: 14px;
 color: #fff;
 z-index: 2;
 position: relative;
 }
 input:focus {
 outline: none;
 }
 .after {
 width: 36px;
 height: 36px;
 position: absolute;
 top: 1px;
 right: 0;
 z-index: 1;
 }
 form.open .after {
 cursor: pointer;
 }
 .after:before,
 .after:after {
 content: '';
 width: 13px;
 height: 3px;
 background-color: #fff;
 border-radius: 3px;
 position: absolute;
 transform-origin: 100% 100%;
 }
 .after:after{
 bottom: -3px;
 right: -3px;
 transform: rotate(45deg);
 }
 .after:before {
 top: -3px;
 right: -3px;
 transform: rotate(-45deg);
 opacity: 0;
 }
 form,
 form .after,
 form .after:before,
 form .after:after {
 animation-duration: 1.1s;
 animation-fill-mode: forwards;
 }
 form.in {
 animation-name: expand;
 }
 form.in .after:before {
 animation-name: beforemagic;
 }
 form.in .after:after {
 animation-name: aftermagic;
 }
 
 form.close,
 form.close .after,
 form.close .after:before,
 form.close .after:after {
 animation-direction: reverse;
 }
 form.close {
 animation-name: expand;
 }
 form.close .after:before {
 animation-name: beforemagic;
 }
 form.close .after:after {
 animation-name: aftermagic;
 }
 
 /* Hold final focused state
 ****************************/
 form.open {
 width: 250px;
 color: #fff;
 }
 form.open .after {
 z-index: 3;
 }
 form.open .after:before {
 width: 20px;
 top: 9px;
 right: 13px;
 opacity: 1;
 }
 form.open .after:after {
 width: 20px;
 bottom: 10px;
 right: 15px;
 }
 
 @keyframes aftermagic {
 0%   {}
 10% {
 width: 24px;
 bottom: -10px;
 right: -10px;
 }
 15%{
 opacity: 1;
 }
 35% {
 width: 13px;
 bottom: -3px;
 right: -3px;
 opacity: 0;
 
 }
 25% {
 opacity: 0;
 }
 64% {
 opacity: 0;
 }
 65% {
 opacity: 1;
 width: 13px;
 bottom: -2px;
 right: -3px;
 }
 75% {
 width: 30px;
 bottom: 4px;
 right: 10px;
 }
 90% {
 width: 20px;
 bottom: 10px;
 right: 15px;
 }
 100% {
 width: 20px;
 bottom: 10px;
 right: 15px;
 }
 }
 @keyframes beforemagic {
 0%   {}
 50% {
 opacity: 0;
 }
 55% {
 opacity: 1;
 width: 13px;
 top: -4px;
 right: -3px;
 }
 65% {
 width: 30px;
 top: 6px;
 right: 10px;
 }
 80% {
 width: 20px;
 top: 9px;
 right: 13px;
 }
 100% {
 width: 20px;
 top: 9px;
 right: 13px;
 opacity: 1;
 }
 }
 @keyframes expand {
 0%   {
 color: transparent;
 }
 20% {
 width: 36px;
 }
 45% {
 width: 250px;
 }
 99% {
 color: transparent;
 }
 100% {
 width: 250px;
 color: #fff;
 }
 }



/* ====== Adblock ====== */
/* arabic */
@font-face {
  font-family: 'Harmattan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/harmattan/v11/goksH6L2DkFvVvRp9XpjSUqisv5Io53K.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}
/* latin-ext */
@font-face {
  font-family: 'Harmattan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/harmattan/v11/goksH6L2DkFvVvRp9XpjQkqisv5Io53K.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Harmattan';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/harmattan/v11/goksH6L2DkFvVvRp9XpjTEqisv5Iow.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

#ignielAdBlock { background:rgba(0,0,0,0.85);padding:0;position:fixed;bottom:0;right:0;top:-100px;left:0;z-index:1000;opacity:1;visibility:visible;height:auto;}
#ignielAdBlock svg {width:100px; height:100px}
#ignielAdBlock svg path {fill:#fff}
#ignielAdBlock a{color:#ffe88b;} #ignielAdBlock a:hover{color:#ffe88b;text-decoration:underline}
#ignielAdBlock .isiAds{background:#e74c3c;color:#fff;position:absolute;text-align:center;padding:0 30px 30px 30px;margin:auto;top:30%;right:0;left:0;font-size:1.5rem;font-weight:400;line-height:1.5em;font-family: 'Harmattan', sans-serif;;max-width:800px;box-shadow:0 20px 10px -10px rgba(0,0,0,0.15);border:15px solid rgba(0,0,0,.07); overflow:hidden; transition:all .6s cubic-bezier(.25,.8,.25,1); -webkit-transform:translateZ(0); transform:translateZ(0); backface-visibility:visible; transition:all .2s ease-in-out,visibility 0s; transform-origin:bottom center; pointer-events:auto; transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1); opacity:1; animation:ignielWobble .5s; -moz-animation: ignielWobble .5s; -webkit-animation:ignielWobble .5s; -o-animation:ignielWobble .5s}
#ignielAdBlock .isiAds:hover{box-shadow:0 20px 10px -10px rgba(0,0,0,0.2);}
#ignielAdBlock .isiAds h4, #ignielAdBlock .isiAds .judul{display:inline-block;background:rgba(0,0,0,.07);padding:5px 25px 15px 25px;font-size:2.2rem;font-weight:600;margin-bottom:20px}
#ignielAdBlock .tutupAds{visibility:hidden;opacity:0;color:#ffe88b;text-align:center;position:absolute;bottom:10px;left:10px;font-size:42px;cursor:pointer;width:30px;height:30px;line-height:30px;border-radius:100%;transition:all .6s cubic-bezier(.25,.8,.25,1);transform:translate(0,50px);}
#ignielAdBlock .tutupAds:hover{color:#fff;transform:scale(1.0);}
#ignielAdBlock .isiAds:hover .tutupAds{visibility:hidden;opacity:0;color:#ffe88b;transform:translate(0,0)}





.wmBox_overlay{
  position:fixed;
  width:100%;
  height:100%;
  display:none;
  top:0;
  left:0;
  background:rgba(0,0,0,0.5);
  }
  .wmBox_centerWrap{
  display:table;
  position:absolute;
  width:100%;
  height:100%;
  }
  .wmBox_centerer{
  display:table-cell;
  vertical-align:middle;
  }
  .wmBox_centerer iframe{
  width:95%;
  display:table;
  margin:0 auto;
  position:relative;
  }
  .wmBox_contentWrap{
  width:90%;
  margin:0 auto;
  position:relative;
  }
  .wmBox_scaleWrap{
  position:relative;
  height:0;
  padding-top:20px;
  padding-bottom: 19%;
  width:100%;
  }
  .wmBox_centerer iframe{
  position:absolute;
  top:0;
  border:0;
  outline:0;
  box-shadow:0px 0px 10px rgba(0,0,0,0.5);
  left:0;
  width:100%;
  height:100%;
  }
  .wmBox_closeBtn{
  z-index:2;
  position:relative;
  margin-top:-40px;
  }
  .wmBox_closeBtn p{
  line-height:0;
  margin:0;
  padding:0.5em 0 0.75em;
  color:#FFF;
  background:red;
  width:1.3em;
  font-size:25px;
  border-radius:100%;
  text-align:center;
  font-family:Verdana, serif;
  position:relative;
  bottom:-0.5em;
  right:-0.5em;
  cursor:pointer;
  float:right;
  box-shadow:0px 0px 10px rgba(0,0,0,0.5);
  transition:color 0.2s ease-out, background 0.2s ease-out;
  }
  .wmBox_closeBtn p:hover{
  background:#FFF;
  color:#000;
  }


*{
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  }
  
  .container{
  width: 100%;
  height: 200px;  
  
  display: flex;
  margin: auto;
  padding: 10px;
  justify-content: center;
  box-shadow: 0px 3px 15px
  }
  
/* DARKMODE */
  .darkmode--activated p, .darkmode--activated li {
  color: #000;
  }
  
  .button {
  isolation: isolate;
  }
  
  .darkmode--activated .logo {
  mix-blend-mode: difference;
  }
  .darkmode-layer, .darkmode-toggle {
  z-index: 500;
  }