@font-face {

    font-family: SFPRO;

    src: url("font/SFPRODISPLAYREGULAR.OTF") format("opentype");

}



@font-face {

    font-family: SFPROBOLD;

    font-weight: bold;

    src: url("font/SFPRODISPLAYBOLD.OTF") format("opentype");

}



body { background: #EEE; font-family: 'SFPRO', sans-serif; color: #4E4F57; }



a { text-decoration: none; }



.content { background: #F8FAFB; padding: 0 1em 1em 1em; }
.content2 { position: relative; background: #F8FAFB; padding: 0; overflow: hidden; }

.toplogo { padding: 1em 0; background: #F8FAFB; }

.toplogo img { width: 100%; max-width: 200px; height: auto; }

.content hr { height: 5px; color: #0195FC; opacity: 1; }



.mainarea { position: relative; padding: 1em 0; color: #777; }

.mainarea h2 { font-size: 1.5em; font-weight: bold; color: #4E4F57; margin: 0 0 1em 0; }

.mainarea input,

.mainarea select { border-color: #9A9B9C; border-radius: 50px; }

.mainarea button.btn-custom { border-radius: 50px; }

.mainarea hr { border-bottom: 1px dashed #CCC; height: 0; color: transparent; opacity: 1; }



.text-agree { color: #AAA; margin: 3em 0 0 0; }



.back { margin: 0 0 2em 0; }



.radio_container {

    display: flex;

    justify-content: space-around;

    align-items: center;

    width: 100%;

	border: 1px solid #9A9B9C;

	border-radius: 50px;

	background: #FFF;

	overflow: hidden;

}



.radio_container input[type="radio"] {

    appearance: none;

    display: none;

}



.radio_container label {

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: inherit;

    width: 50%;

    height: 38px;

    text-align: center;

    overflow: hidden;

    transition: linear 0.3s;

    color: #6e6e6edd;

}

.radio_container label.pria { border-radius: 50px 0 0 50px; }

.radio_container label.wanita { border-radius: 0 50px 50px 0; }



.radio_container input[type="radio"]:checked + label {

    background-color: #0D6EFD;

    color: #FFF;

    transition: 0.3s;

}



.checkbox-group {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  width: 100%;

  margin-left: auto;

  margin-right: auto;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

.checkbox-group > * {

  margin: 0.5rem 0.5rem;

}



.checkbox-group-legend {

  font-size: 1.1rem;

  color: #9c9c9c;

  text-align: center;

  margin-bottom: 1.25rem;

}



.checkbox-input {

  clip: rect(0 0 0 0);

  -webkit-clip-path: inset(100%);

          clip-path: inset(100%);

  height: 1px;

  overflow: hidden;

  position: absolute;

  white-space: nowrap;

  width: 1px;

}

.checkbox-input:checked + .checkbox-tile {

  border-color: #0D6EFD;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

  color: #FFF;

  background: #0D6EFD;

}

.checkbox-input:checked + .checkbox-tile:before {

  transform: scale(1);

  opacity: 1;

  background-color: #0D6EFD;

  border-color: #0D6EFD;

}

.checkbox-input:checked + .checkbox-tile .checkbox-icon, .checkbox-input:checked + .checkbox-tile .checkbox-label {

  color: #FFF;

}

.checkbox-input:focus + .checkbox-tile {

  border-color: #0D6EFD;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;

}

.checkbox-input:focus + .checkbox-tile:before {

  transform: scale(1);

  opacity: 1;

}



.checkbox-tile {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 220px;

  height: 100px;

  border-radius: 0.5rem;

  padding: 10px;

  border: 1px solid #FFF;

  background-color: #FFF;

  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

  transition: 0.15s ease;

  cursor: pointer;

  position: relative;

}

/*

.checkbox-tile:before {

  content: "";

  position: absolute;

  display: block;

  width: 1.25rem;

  height: 1.25rem;

  border: 2px solid #FFF;

  background-color: #0D6EFD;

  border-radius: 50%;

  top: 0.25rem;

  left: 0.25rem;

  opacity: 0;

  transform: scale(0);

  transition: 0.25s ease;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");

  background-size: 12px;

  background-repeat: no-repeat;

  background-position: 50% 50%;

}

*/

.checkbox-tile:hover {

  border-color: #0D6EFD;

}

.checkbox-tile:hover:before {

  transform: scale(1);

  opacity: 1;

}



.checkbox-icon {

  transition: 0.375s ease;

  color: #494949;

}

.checkbox-icon i {

	font-size: 2em;

}



.checkbox-label {

  color: #707070;

  transition: 0.375s ease;

  text-align: center;

}



.fitur {}

.fitur-box { position: relative; width: 100%; height: 0; padding-bottom: 100%; background: #FFF; margin: 0 0 1.5em 0; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }

.fitur-box-content { padding: 1em; }

.fitur-box h3 { font-size: 1em; font-weight: bold; }

.fitur-box i { font-size: 2em; margin: 0 0 .5em 0; color: #0195FC; }

.fitur-box small { font-size: .7em; position: absolute; bottom: 1em; left: auto; padding: .1em .5em; border: 1px solid #0195FC; border-radius: 20px; color: #0195FC; }

.fitur a { color: #777;}

.unavailable { background: #DDD; color: #999 }

.unavailable i { color: #999; }

.unavailable small { border: 1px solid #999; color: #999; }



.timerarea { position: relative; z-index: 2; width: 100%; background: #FFF; padding: 1em; margin: 0; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; }

.timerarea h3 { font-size: 1em; font-weight: bold; }



.chatarea { position: relative; z-index: 1; height: 80vh; background: #FFF; border-radius: 5px; }
.chatarea iframe { position: relative; height: 80vh; padding-top: 10px; margin: 0 !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; width: 100%; }

.inputchatarea { background: #FFF; border-radius: 5px; padding: 1em; margin: 0 0 .5em 0; }

.inputchatarea i { font-size: 1.4em; color: #0099FE; }



.prechatarea { padding: 8em 0 2em 0; text-align: center; font-size: 1em; }

.prechatarea img { width: 80%; max-width: 200px; margin: 0 0 2em 0; }

.prechatarea h3 { font-size: 1.5em; font-weight: bold; margin: 0 0 1em 0; }


@media (min-aspect-ratio: 16/9) {



}



@media (max-aspect-ratio: 16/9) {



}



@media (max-width: 767px) {

body { background: #F8FAFB; }

.toplogo img { width: 100%; max-width: 150px; height: auto; }

.checkbox-tile { width: 80vw; height: 60px; }

}