@import url('./theme.css');

.server-select-root {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-image: linear-gradient(0deg,#3e300f,#807136 30%,#c2b25d 50%,#807136 80%,#3e300f),linear-gradient(0deg,#ddb137,#000);
  background-blend-mode: normal,normal
}

.server-select-root .form {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center
}

.server-select-root .form .language {
  position: absolute;
  right: var(--pc40);
  top: var(--pc40);
  font-size: var(--pc15);
  color: var(--white)
}

.server-select-root .form .logo {
  width: calc(var(--pc1)*127);
  height: calc(var(--pc1)*90);
  background: url(/static/skins/gold/i/logo.ebb867df.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--pc1)*127) calc(var(--pc1)*90);
  margin-top: var(--pc59);
  -webkit-mask-image: url(/static/skins/gold/i/logo.ebb867df.png);
  mask-image: url(/static/skins/gold/i/logo.ebb867df.png);
  -webkit-mask-size: calc(var(--pc1)*127) calc(var(--pc1)*90);
  mask-size: calc(var(--pc1)*127) calc(var(--pc1)*90);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  overflow: hidden;
  position: relative;
  border-radius: 50%;
}

.server-select-root .form .logo:before {
  content: "";
  position: absolute;
  top: 0;
  left: -55%;
  width: 50%;
  height: 100%;
  transform: skewX(-30deg);
  background: linear-gradient(90deg,hsla(0,0%,100%,.0392157),hsla(0,0%,100%,.698039),hsla(0,0%,100%,.745098));
  background-repeat: no-repeat;
  -webkit-animation: shimmer 3s infinite;
  animation: shimmer 3s infinite
}

.server-select-root .form .form-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid var(--pc1) #f9e683;
  background-image: linear-gradient(90deg,#3e300f,#807136 20%,#c2b25d 50%,#807136 80%,#3e300f),linear-gradient(90deg,#3e300f,#c2b25d 45%,#3e300f);
  margin-top: var(--pc20);
  min-width: calc(var(--pc1)*500);
  border-radius: var(--pc9);
  border-radius: 9px
}

.server-select-root .form .form-wrap .form-title {
  margin: var(--pc16);
  color: var(--white);
  font-size: var(--pc15)
}

.server-select-root .form .form-wrap .form-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(var(--pc1)*420)
}

.server-select-root .form .form-wrap .form-info .p1 {
  margin: var(--pc5);
  display: block
}

.server-select-root .form .form-wrap .form-info .p1 .icon-check {
  width: var(--pc11);
  height: var(--pc8);
  margin-left: var(--pc5);
  margin-right: var(--pc5)
}

.server-select-root .form .form-wrap .form-info .p1 .icon-x {
  width: var(--pc8);
  height: var(--pc8);
  margin-left: var(--pc5);
  margin-right: var(--pc5)
}

.server-select-root .form .form-wrap .form-info .p2 {
  margin: 0 0 0 0
}

.server-select-root .form .form-wrap .form-info .p1,.server-select-root .form .form-wrap .form-info .p2 {
  color: var(--white);
  font-size: var(--pc10);
  text-align: center;
  line-height: var(--pc20)
}

.server-select-root .form .form-wrap .form-group {
  width: var(--pc366);
  margin-top: var(--pc30);
  margin-bottom: var(--pc34);
  display: flex;
  flex-direction: column;
  align-items: center
}

.server-select-root .form .form-wrap .form-group .btn-group {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center
}

.server-select-root .form .form-wrap .form-group .btn-group .btn {
  width: var(--pc88);
  height: var(--pc25);
  margin-left: var(--pc25);
  font-size: var(--pc10);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #000;
  color: var(--white);
  border-radius: var(--pc5)
}

.server-select-root .form .form-wrap .form-group .btn-group .btn .btn-label {
  flex-grow: 1;
  width: 0;
  margin-left: var(--pc15)
}

.server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon {
  width: var(--pc19);
  height: var(--pc19);
  border-radius: var(--pc19);
  margin-right: var(--pc10);
  font-size: var(--pc16);
  display: flex;
  align-items: center;
  justify-content: center
}

.server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon svg {
  width: var(--pc11)
}

.server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon svg._90 {
  width: var(--pc9)!important
}

.server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon,.server-select-root .form .form-wrap .form-group .btn-group .btn .btn-label {
  z-index: 1;
  pointer-events: none
}

.server-select-root .form .form-wrap .form-group .btn-group .btn.disabled {
  background-color: rgba(0,0,0,.5);
  cursor: not-allowed!important
}

.server-select-root .form .form-wrap .form-group .btn-group .btn:first-child {
  margin-left: 0
}

.server-select-root .form .form-wrap .form-group .btn-group .btn:after {
  position: absolute;
  content: " ";
  top: var(--pc2);
  left: var(--pc2);
  right: var(--pc2);
  height: 46%;
  width: calc(100% - var(--pc4));
  border-radius: var(--pc3);
  background-image: linear-gradient(0deg,#535353,#818181 60%,#afafaf),linear-gradient(#000,#000);
  background-blend-mode: normal,normal;
  z-index: 0;
  pointer-events: none
}

.server-select-root .form .form-wrap .form-group .input-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: var(--pc30);
  width: calc(var(--pc1)*313);
  height: var(--pc25)
}

.server-select-root .form .form-wrap .form-group .input-group .btn {
  width: var(--pc88);
  height: var(--pc29);
  margin-left: var(--pc10);
  font-size: var(--pc10);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #000;
  color: var(--white);
  border-radius: var(--pc5)
}

.server-select-root .form .form-wrap .form-group .input-group .btn .btn-label {
  flex-grow: 1;
  width: 0;
  text-align: center
}

.server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon {
  width: var(--pc19);
  height: var(--pc19);
  border-radius: var(--pc19);
  margin-right: var(--pc10);
  font-size: var(--pc16);
  display: flex;
  align-items: center;
  justify-content: center
}

.server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon svg {
  width: var(--pc11)
}

.server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon svg._90 {
  width: var(--pc9)!important
}

.server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon,.server-select-root .form .form-wrap .form-group .input-group .btn .btn-label {
  z-index: 1;
  pointer-events: none
}

.server-select-root .form .form-wrap .form-group .input-group .btn.disabled {
  background-color: rgba(0,0,0,.5);
  cursor: not-allowed!important
}

.server-select-root .form .form-wrap .form-group .input-group .btn:first-child {
  margin-left: 0
}

.server-select-root .form .form-wrap .form-group .input-group .btn:after {
  position: absolute;
  content: " ";
  top: var(--pc2);
  left: var(--pc2);
  right: var(--pc2);
  height: 46%;
  width: calc(100% - var(--pc4));
  border-radius: var(--pc3);
  background-image: linear-gradient(0deg,#535353,#818181 60%,#afafaf),linear-gradient(#000,#000);
  background-blend-mode: normal,normal;
  z-index: 0;
  pointer-events: none
}

.server-select-root .form .form-wrap .form-group .input-group .input {
  all: unset;
  border-radius: var(--pc2);
  flex-grow: 1;
  width: 0;
  height: var(--pc29);
  font-size: var(--pc10);
  padding: var(--pc15);
  box-sizing: border-box;
  color: var(--black);
  background-color: #f2dcab;
  border: solid var(--pc1) #000
}

.server-select-root .form .form-wrap .form-group .input-group .input::-moz-placeholder {
  color: rgba(0,0,0,.5)
}

.server-select-root .form .form-wrap .form-group .input-group .input:-ms-input-placeholder {
  color: rgba(0,0,0,.5)
}

.server-select-root .form .form-wrap .form-group .input-group .input::placeholder {
  color: rgba(0,0,0,.5)
}

.server-select-root .customer-service {
  position: absolute;
  top: auto;
  right: var(--pc22);
  bottom: var(--pc16);
  font-size: var(--pc11);
  display: flex;
  flex-direction: column;
  color: var(--white);
  align-items: center;
  cursor: pointer;
  z-index: 1
}

.server-select-root .customer-service>svg {
  width: var(--pc25);
  height: var(--pc25);
  margin-bottom: var(--pc3)
}

.server-select-root .footer {
  position: absolute;
  top: auto;
  bottom: var(--pc10);
  left: 0;
  right: 0;
  margin: auto;
  font-size: var(--pc9);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #f1d99a;
  font-family: simkai;
  z-index: 0
}

.server-select-root .footer .image-wrap {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: var(--pc10)
}

.server-select-root .footer .image-wrap .fc {
  background: url(/static/skins/gold/i/visa-img1@2x.e726cf60.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: var(--pc147) var(--pc28);
  width: var(--pc147);
  height: var(--pc28)
}

.server-select-root .footer .image-wrap .ceza {
  background: url(/static/skins/gold/i/visa-img2@2x.fb3feb7e.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  width: var(--pc100);
  height: var(--pc34);
  margin-left: var(--pc8);
  background-size: var(--pc100) var(--pc34)
}

@media (orientation: portrait) {
  .mobile .server-select-root .form .language {
      font-size:var(--mp12);
      top: var(--mp20);
      right: var(--mp20)
  }

  .mobile .server-select-root .form .logo {
      width: calc(var(--mp1)*127);
      height: calc(var(--mp1)*90);
      background: url(/static/skins/gold/i/logo.ebb867df.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: calc(var(--mp1)*127) calc(var(--mp1)*90);
      margin-top: var(--mp59);
      -webkit-mask-image: url(/static/skins/gold/i/logo.ebb867df.png);
      mask-image: url(/static/skins/gold/i/logo.ebb867df.png);
      -webkit-mask-size: calc(var(--mp1)*127) calc(var(--mp1)*90);
      mask-size: calc(var(--mp1)*127) calc(var(--mp1)*90);
      -webkit-mask-position: 0 0;
      mask-position: 0 0;
      overflow: hidden;
      position: relative;
      border-radius: 50%;
  }

  .mobile .server-select-root .form .form-wrap .form-title {
      font-size: var(--mp16)
  }

  .mobile .server-select-root .form .form-wrap .form-info {
      max-width: calc(var(--mp1)*355)
  }

  .mobile .server-select-root .form .form-wrap .form-info .p1 {
      margin: var(--mp5);
      display: block
  }

  .mobile .server-select-root .form .form-wrap .form-info .p1 .icon-check {
      width: var(--mp11);
      height: var(--mp8);
      margin-left: var(--mp5);
      margin-right: var(--mp5)
  }

  .mobile .server-select-root .form .form-wrap .form-info .p1 .icon-x {
      width: var(--mp8);
      height: var(--mp8);
      margin-left: var(--mp5);
      margin-right: var(--mp5)
  }

  .mobile .server-select-root .form .form-wrap .form-info .p2 {
      margin: 0 0 0 0
  }

  .mobile .server-select-root .form .form-wrap .form-info .p1,.mobile .server-select-root .form .form-wrap .form-info .p2 {
      color: var(--white);
      font-size: var(--mp10);
      text-align: center;
      line-height: var(--mp20)
  }

  .mobile .server-select-root .form .form-wrap .form-group {
      width: var(--mp355);
      margin-top: var(--mp30);
      margin-bottom: var(--mp34);
      display: flex;
      flex-direction: column;
      align-items: center
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: center
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn {
      width: var(--mp88);
      height: var(--mp25);
      margin-left: var(--mp25);
      font-size: var(--mp10);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-color: #000;
      color: var(--white);
      border-radius: var(--mp5)
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn .btn-label {
      flex-grow: 1;
      width: 0;
      margin-left: var(--mp15)
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon {
      width: var(--mp19);
      height: var(--mp19);
      border-radius: var(--mp19);
      margin-right: var(--mp10);
      font-size: var(--mp16);
      display: flex;
      align-items: center;
      justify-content: center
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon svg {
      width: var(--mp11)
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon svg._90 {
      width: var(--mp9)!important
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn .btn-icon,.mobile .server-select-root .form .form-wrap .form-group .btn-group .btn .btn-label {
      z-index: 1;
      pointer-events: none
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn.disabled {
      background-color: rgba(0,0,0,.5);
      cursor: not-allowed!important
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn:first-child {
      margin-left: 0
  }

  .mobile .server-select-root .form .form-wrap .form-group .btn-group .btn:after {
      position: absolute;
      content: " ";
      top: var(--mp2);
      left: var(--mp2);
      right: var(--mp2);
      height: 46%;
      width: calc(100% - var(--mp4));
      border-radius: var(--mp3);
      background-image: linear-gradient(0deg,#535353,#818181 60%,#afafaf),linear-gradient(#000,#000);
      background-blend-mode: normal,normal;
      z-index: 0;
      pointer-events: none
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: var(--mp30);
      width: calc(var(--mp1)*313);
      height: var(--mp25)
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn {
      width: var(--mp88);
      height: var(--mp29);
      margin-left: var(--mp10);
      font-size: var(--mp10);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background-color: #000;
      color: var(--white);
      border-radius: var(--mp5)
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn .btn-label {
      flex-grow: 1;
      width: 0;
      text-align: center
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon {
      width: var(--mp19);
      height: var(--mp19);
      border-radius: var(--mp19);
      margin-right: var(--mp10);
      font-size: var(--mp16);
      display: flex;
      align-items: center;
      justify-content: center
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon svg {
      width: var(--mp11)
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon svg._90 {
      width: var(--mp9)!important
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn .btn-icon,.mobile .server-select-root .form .form-wrap .form-group .input-group .btn .btn-label {
      z-index: 1;
      pointer-events: none
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn.disabled {
      background-color: rgba(0,0,0,.5);
      cursor: not-allowed!important
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn:first-child {
      margin-left: 0
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .btn:after {
      position: absolute;
      content: " ";
      top: var(--mp2);
      left: var(--mp2);
      right: var(--mp2);
      height: 46%;
      width: calc(100% - var(--mp4));
      border-radius: var(--mp3);
      background-image: linear-gradient(0deg,#535353,#818181 60%,#afafaf),linear-gradient(#000,#000);
      background-blend-mode: normal,normal;
      z-index: 0;
      pointer-events: none
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .input {
      all: unset;
      border-radius: var(--mp2);
      flex-grow: 1;
      width: 0;
      height: var(--mp9);
      font-size: var(--mp10);
      padding: var(--mp15);
      box-sizing: border-box;
      color: var(--black);
      background-color: #f2dcab;
      border: solid var(--mp1) #000
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .input::-moz-placeholder {
      color: rgba(0,0,0,.5)
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .input:-ms-input-placeholder {
      color: rgba(0,0,0,.5)
  }

  .mobile .server-select-root .form .form-wrap .form-group .input-group .input::placeholder {
      color: rgba(0,0,0,.5)
  }

  .mobile .server-select-root .form .customer-service {
      right: var(--mp22);
      bottom: var(--mp95);
      font-size: var(--mp11)
  }

  .mobile .server-select-root .form .customer-service>svg {
      width: var(--mp25);
      height: var(--mp25);
      margin-bottom: var(--mp3)
  }

  .mobile .server-select-root .footer {
      position: absolute;
      top: auto;
      bottom: var(--mp10);
      left: 0;
      right: 0;
      margin: auto;
      font-size: var(--mp9);
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #f1d99a;
      font-family: simkai
  }

  .mobile .server-select-root .footer .image-wrap {
      display: flex;
      align-items: center;
      flex-direction: row;
      margin-bottom: var(--mp10)
  }

  .mobile .server-select-root .footer .image-wrap .fc {
      background: url(/static/skins/gold/i/visa-img1@2x.e726cf60.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: var(--mp147) var(--mp28);
      width: var(--mp147);
      height: var(--mp28)
  }

  .mobile .server-select-root .footer .image-wrap .ceza {
      background: url(/static/skins/gold/i/visa-img2@2x.fb3feb7e.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      width: var(--mp100);
      height: var(--mp34);
      margin-left: var(--mp8);
      background-size: var(--mp100) var(--mp34)
  }

  .mobile .server-select-root .footer .footer-text {
      max-width: calc(var(--mp1)*340);
      text-align: center
  }
}