body {
  background-color: #F3F8FE;
  font-family: "Inter", sans-serif;
}
main{
  max-width: 480px;
  margin: 0 auto;
  margin-bottom: 96px;
}
.g-0 {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0
}

.g-0 .col,
.g-0>[class^=col] {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0
}

.gy-0 .col,
.gy-0>[class^=col] {
  padding-bottom: 0
}

.gx-0 {
  margin-left: 0;
  margin-right: 0
}

.gx-0 .col,
.gx-0>[class^=col] {
  padding-left: 0;
  padding-right: 0
}

.g-1 {
  margin-left: -.25rem;
  margin-right: -.25rem;
  margin-bottom: -.5rem
}

.g-1 .col,
.g-1>[class^=col] {
  padding-left: .25rem;
  padding-right: .25rem;
  padding-bottom: .5rem
}

.gy-1 {
  margin-bottom: -.5rem
}

.gy-1 .col,
.gy-1>[class^=col] {
  padding-bottom: .5rem
}

.gx-1 {
  margin-left: -.25rem;
  margin-right: -.25rem
}

.gx-1 .col,
.gx-1>[class^=col] {
  padding-left: .25rem;
  padding-right: .25rem
}

.g-2 {
  margin-left: -.5rem;
  margin-right: -.5rem;
  margin-bottom: -1rem
}

.g-2 .col,
.g-2>[class^=col] {
  padding-left: .5rem;
  padding-right: .5rem;
  padding-bottom: 1rem
}

.gy-2 {
  margin-bottom: -1rem
}

.gy-2 .col,
.gy-2>[class^=col] {
  padding-bottom: 1rem
}

.gx-2 {
  margin-left: -.5rem;
  margin-right: -.5rem
}

.gx-2 .col,
.gx-2>[class^=col] {
  padding-left: .5rem;
  padding-right: .5rem
}

.g-3 {
  margin-left: -.75rem;
  margin-right: -.75rem;
  margin-bottom: -1.5rem
}

.g-3 .col,
.g-3>[class^=col] {
  padding-left: .75rem;
  padding-right: .75rem;
  padding-bottom: 1.5rem
}

.gy-3 {
  margin-bottom: -1.5rem
}

.gy-3 .col,
.gy-3>[class^=col] {
  padding-bottom: 1.5rem
}

.gx-3 {
  margin-left: -.75rem;
  margin-right: -.75rem
}

.gx-3 .col,
.gx-3>[class^=col] {
  padding-left: .75rem;
  padding-right: .75rem
}

.g-4 {
  margin-left: -1rem;
  margin-right: -1rem;
  margin-bottom: -2rem
}

.g-4 .col,
.g-4>[class^=col] {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2rem
}

.gy-4 {
  margin-bottom: -2rem
}

.gy-4 .col,
.gy-4>[class^=col] {
  padding-bottom: 2rem
}


.gx-4 {
  margin-left: -1rem;
  margin-right: -1rem
}

.gx-4 .col,
.gx-4>[class^=col] {
  padding-left: 1rem;
  padding-right: 1rem
}

.g-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  margin-bottom: -2.5rem
}

.g-5 .col,
.g-5>[class^=col] {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 2.5rem
}


.gy-5 {
  margin-bottom: -2.5rem
}

.gy-5 .col,
.gy-5>[class^=col] {
  padding-bottom: 2.5rem
}


.gx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem
}

.gx-5 .col,
.gx-5>[class^=col] {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.g-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  margin-bottom: -3rem
}

.g-6 .col,
.g-6>[class^=col] {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 3rem
}


.gy-6 {
  margin-bottom: -3rem
}

.gy-6 .col,
.gy-6>[class^=col] {
  padding-bottom: 3rem
}


.gx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem
}

.gx-6 .col,
.gx-6>[class^=col] {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.g-7 {
  margin-left: -1.75rem;
  margin-right: -1.75rem;
  margin-bottom: -3.5rem
}

.g-7 .col,
.g-7>[class^=col] {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
  padding-bottom: 3.5rem
}


.gy-7 {
  margin-bottom: -3.5rem
}

.gy-7 .col,
.gy-7>[class^=col] {
  padding-bottom: 3.5rem
}


.gx-7 {
  margin-left: -1.75rem;
  margin-right: -1.75rem
}

.gx-7 .col,
.gx-7>[class^=col] {
  padding-left: 1.75rem;
  padding-right: 1.75rem
}

.g-8 {
  margin-left: -2rem;
  margin-right: -2rem;
  margin-bottom: -4rem
}

.g-8 .col,
.g-8>[class^=col] {
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 4rem
}


.gy-8 {
  margin-bottom: -4rem
}

.gy-8 .col,
.gy-8>[class^=col] {
  padding-bottom: 4rem
}


.gx-8 {
  margin-left: -2rem;
  margin-right: -2rem
}

.gx-8 .col,
.gx-8>[class^=col] {
  padding-left: 2rem;
  padding-right: 2rem
}

.g-9 {
  margin-left: -2.25rem;
  margin-right: -2.25rem;
  margin-bottom: -4.5rem
}

.g-9 .col,
.g-9>[class^=col] {
  padding-left: 2.25rem;
  padding-right: 2.25rem;
  padding-bottom: 4.5rem
}


.gy-9 {
  margin-bottom: -4.5rem
}

.gy-9 .col,
.gy-9>[class^=col] {
  padding-bottom: 4.5rem
}


.gx-9 {
  margin-left: -2.25rem;
  margin-right: -2.25rem
}

.gx-9 .col,
.gx-9>[class^=col] {
  padding-left: 2.25rem;
  padding-right: 2.25rem
}

.g-10 {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  margin-bottom: -5rem
}

.g-10 .col,
.g-10>[class^=col] {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 5rem
}


.gy-10 {
  margin-bottom: -5rem
}

.gy-10 .col,
.gy-10>[class^=col] {
  padding-bottom: 5rem
}


.gx-10 {
  margin-left: -2.5rem;
  margin-right: -2.5rem
}

.gx-10 .col,
.gx-10>[class^=col] {
  padding-left: 2.5rem;
  padding-right: 2.5rem
}

.g-11 {
  margin-left: -2.75rem;
  margin-right: -2.75rem;
  margin-bottom: -5.5rem
}

.g-11 .col,
.g-11>[class^=col] {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
  padding-bottom: 5.5rem
}


.gy-11 {
  margin-bottom: -5.5rem
}

.gy-11 .col,
.gy-11>[class^=col] {
  padding-bottom: 5.5rem
}


.gx-11 {
  margin-left: -2.75rem;
  margin-right: -2.75rem
}

.gx-11 .col,
.gx-11>[class^=col] {
  padding-left: 2.75rem;
  padding-right: 2.75rem
}

.g-12 {
  margin-left: -3rem;
  margin-right: -3rem;
  margin-bottom: -6rem
}

.g-12 .col,
.g-12>[class^=col] {
  padding-left: 3rem;
  padding-right: 3rem;
  padding-bottom: 6rem
}


.gy-12 {
  margin-bottom: -6rem
}

.gy-12 .col,
.gy-12>[class^=col] {
  padding-bottom: 6rem
}


.gx-12 {
  margin-left: -3rem;
  margin-right: -3rem
}

.gx-12 .col,
.gx-12>[class^=col] {
  padding-left: 3rem;
  padding-right: 3rem
}
.logo_top{
  position: relative;
  text-align: center;
}

.menu_side{
  position: absolute;
  left:15px;
  width: 40px;
  z-index: 1;
  height: 40px;
  line-height: 40px;
}

.menu_side i{
  font-size: 30px;
  line-height: normal;
  color:#fff;
}


.sidenav {
  height: 100vh;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.logo_top img{
  width: 150px;
  
}

.wrap_intro {
  position: relative;
  margin-bottom: 24px;
  text-align: center;
  padding-top: 40px;
}

.wrap_intro h2 {
  padding: 0;
  color: #fff;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrap_intro h2 span{
  font-weight: normal;
  font-size: 14px;
  text-transform: none;
}

.wrap_intro p {
  padding: 0;
  color: #fff;
  margin: 0;
  font-size: 16px;
}


.wrap_heading {
  max-width: 700px;
  margin: 0px auto;
  position: relative;
  text-align: center;
  margin-bottom: 35px;
}

.wrap_heading h2 {
  padding: 0 0 10px 0;
  color: #fff;
  margin: 0;
  font-weight: 700;
  font-size: 22px;
}

.wrap_heading p {
  padding: 0;
  color: #fff;
  margin: 0;
  font-size: 16px;
}

.wrap_heading img {
  width: 160px;
  margin:0px;
  margin-bottom: 30px;
}

.form-control:focus {
  box-shadow: none;
}

.card_profile{
  position: relative;
  background-color: #fff;
  border: 1px solid #eee;
  text-align: center;
  cursor:pointer;
  padding: 12px;
  border-radius: 10px;
  height: 100%;
  display: block;
}

.card_profile .ic_profile{
  display: block;
  width: 100px;
  height: 100px;
  margin: 0px auto;
  border-radius: 100%;
  margin-bottom: 20px;
  background-color: #ccc;
  padding: 5px;

}

.card_profile .ic_profile i {
  font-size: 60px;
  color: #9f9f9f;
}

.card_profile h2{
  padding: 0;
  color: #000;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
}

.card_profile h3{
  padding: 10px 0 0 0;
  color: #000;
  margin: 0;
  font-weight: 700;
  text-align: center;
  font-size: 20px;
}


.card_profile p{
  padding: 10px 0 0 0;
  color: #000;
  margin: 0;
  text-align: center;
  font-size: 14px;
}

a.nav-link{
  color: #777 !important;
}
.nav-link.active {
  color: #000 !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #fff;
  background-color: #5aa399;
}
.nav-pills .nav-link.active {
  color: #fff !important;
}

.card_option{
  position: relative;
  background-color: #fff;
  border: 1px solid #eee;
  text-align: center;
  cursor:pointer;
  padding: 12px;
  border-radius: 10px;
  height: 100%;
  display: block;
}


.card_option .ic_shape {
  width: 48px;
  margin: 0px auto;
  height: 48px;
  text-align: center;
  margin-bottom: 12px;
  border-radius: 100%;
  display: inline-block;
}


.card_option .ic_shape i {
  font-size: 32px;
  color:#fff;
}


.card_option h4{
  padding: 0;
  color: #000;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}

.card_option p{
  padding: 10px 0 0 0;
  color: #000;
  margin: 0;
  text-align: center;
  font-size: 14px;
}



.card_menu{
  position: relative;
  text-align: center;
  cursor:pointer;
  border-radius: 10px;
  height: 100%;
  display: block;
}


.card_menu .ic_shape {
  width: 48px;
  margin: 0px auto;
  height: 48px;
  text-align: center;
  margin-bottom: 12px;
  border-radius: 100%;
  display: inline-block;
}


.card_menu .ic_shape i {
  font-size: 32px;
  color:#fff;
}


.card_menu h4{
  padding: 0;
  color: #000;
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
}

.card_menu p{
  padding: 10px 0 0 0;
  color: #000;
  margin: 0;
  text-align: center;
  font-size: 14px;
}

.bg_1{
  background-color: #da6b64;
}

.bg_2{
  background-color: #5aa399;
}

.bg_3{
  background-color: #7E679B;
}

.bg_4{
  background-color: #5d7aa8;
}



.btn_cta_sm {
  padding: 5px 7px;
  border:1px solid #262261;
  color:#000;
  margin-right: 5px;
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
}

.btn_cta_sm:hover {text-decoration: none;}
.btn_cta_sm i {
  font-size: 18px;
  margin-right: 3px;
  vertical-align: middle;
}


.btn_cta {
  margin-top: 20px;
  padding:10px 10px;
  border:1px solid #262261;
  color:#000;
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
}

.btn_cta:hover {text-decoration: none;}

.btn_primary {
  padding: 10px 20px;
  border: 1px solid #242856 ;
  color: #fff;
  background-color: #242856 ;
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
}

.btn_primary:hover {text-decoration: none;  color: #fff;  border: 1px solid #262261;}
.btn_primary:focus {text-decoration: none; color: #fff;  outline: none; border: 1px solid #262261;}

.btn_border {
  padding: 10px 20px;
  border: 1px solid #242856 ;
  color: #242856;
  background-color: rgb(0 123 255 / 7%) ;
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
}

.btn_border:hover {text-decoration: none;  color: 242856#fff;  border: 1px solid #262261;}
.btn_border:focus {text-decoration: none; color: #242856;  outline: none; border: 1px solid #262261;}


.btn_sm_line {
  padding: 5px 10px;
  border: 1px solid #242856 ;
  color: #242856;
  background-color: rgb(0 123 255 / 7%) ;
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
}

.btn_sm_line:hover {text-decoration: none;  color: 242856#fff;  border: 1px solid #262261;}
.btn_sm_line:focus {text-decoration: none; color: #242856;  outline: none; border: 1px solid #262261;}

.btn_block {width: 100%; display:block;}

.cat-option-radio{
  display: block;
  position: relative;
}
.cat-option-radio + .cat-option-radio{ margin-top: 1rem; }
.cat-option-radio label {
  display: flex;
  text-align: center;
  min-height: 80px;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  transition: all .25s;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
}

.cat-option-radio img{
  margin-bottom: 16px;
  width: 70px !important;
}

.cat-option-radio input{ display: none; }
.cat-option-radio input:checked + label {
  background-color: #ebf7ff;
  border-color: #0194f3;
  color: #242856;
}
.cat-option-radio label .btn_primary{
  opacity: 0;
  visibility: hidden;
  position: absolute;
  /* transition: opacity .25s, visibility .25s; */
}
.cat-option-radio input:checked + label .btn_primary{
  opacity: 1;
  visibility: visible;
  position: static;
}
.radio-crumb{ display: inline-block;margin-bottom: 4px; }
.radio-crumb label{
  display: block;
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  transition: all .25s;
  padding: 8px 12px;
  cursor: pointer;
}

.radio-crumb input{ display: none; }
.radio-crumb input:checked + label{
  background-color: #ebf7ff;
  border-color: #0194f3;
  font-weight: bold;
  color: #0194f3;
}

.term_condition_wrap {
  position: relative;
  padding:10px 30px;
}

.term_condition_wrap ol {
  margin:0;
  padding: 0;
}

.term_condition_wrap ol li {
  padding-bottom: 7px;
  color: #000;
  margin: 0;
  font-size: 16px;
}

.text-mandatory{
  font-size: 14px;
  color:#EE4036;
}

.wizard .content {
  min-height: 300px;
}

.wizard .content .form-control{
  max-width: 100%;
}

.ss-main {
  min-height: 50px;
  padding-left: 15px;
  border:1px solid #ababab;
}

.ss-main:focus {
  box-shadow: none !important;
}

.ss-main .ss-values{line-height: normal !important;}

.wizard .actions {
  padding: 20px;
  background-color: rgba(153, 155, 163, 0.1);
}

.wizard .actions>ul {
  margin:0;
  padding:0;
}

.wrap_line_heading {
  border:1px solid #242856;
  padding:30px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.wrap_line_heading h3{
  padding:0 0 30px 0;
  margin:0;
  color:#000;
  font-size: 20px;
  font-weight: 700;
}


.wrap_line_heading h4{
  padding:0 0 5px 0;
  margin:0;
  color:#000;
  font-size: 18px;
  font-weight: 700;
}


.wrap_line_heading ul{
  padding:0 0 0 20px;
  margin:0;
}

.wrap_line_heading ul li{
  padding:0 0 5px 0;
  margin:0;
  color:#000;
  font-size: 16px;
}


.wrap_line_heading ul li ol{
 padding:10px 0 0 ;
 margin:0;
 padding-left: 30px;
}
.wizard .steps>ul li .bd-wizard-step-subtitle {
  margin-top: 5px !important;
}

.wrap_form{
  position: relative;
  background-color: #fff;
  padding:16px;
  border-radius: 10px;
  border:1px solid #eee;
}

.wrap_bg_back {
  position: absolute;
  height: 320px;
  background-color: #242856;
  top:0;
  z-index: -1;
  left: 50%;
  width: 100%;
  border-radius: 0 0 40px 40px;
  max-width: 480px;
  transform: translateX(-50%);
}

.wizard .steps>ul li.current .bd-wizard-step-icon {
  background-color: #28a745 !important;
  color: #fff;
}


.wizard .steps>ul li .bd-wizard-step-title{
  color: #fff;
  }

.wizard .steps>ul li.current .bd-wizard-step-title {
  color: #000;
  display: block;
  margin-left: 8px;
}

.wizard .steps>ul li .bd-wizard-step-title {
  color: #fff;
}

.wizard .steps>ul li.current .bd-wizard-step-icon, .wizard .steps>ul li.done .bd-wizard-step-icon {
  background-color: #0062cc;
  color: #fff;
}

.form-control {
  padding: 16px 15px;
  min-height: 50px;
  max-width: 550px;
  border-radius: 4px;
  border: solid 1px #ababab;
}

.wrap_form h3{
  padding: 0 0 15px 0;
  margin: 0;
  color: #000;
  font-size: 22px;
  font-weight: 700;
}

.wrap_form img{
  margin:0px auto;
  text-align: center;
  display: block;
  margin-bottom: 15px;
  width: 100px;
}

.wrap_form p{
  padding: 0 0 20px 0;
  margin: 0;
  color: #000;
  font-size: 16px;
}

.ss-content .ss-search input:focus {
  box-shadow: none;
}

.wrap_preview_data {
  position: relative;
}

.wrap_preview_data h3 {
  padding: 0px 0 0 0;
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: normal;
}

.wrap_preview_data p {
  padding: 0px 0 0 0;
  margin: 0;
  line-height: normal;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.wrap_preview_data p a{
text-decoration: underline;
margin-left: 5px;
}

.data_prev_cont{
  position: relative;
  margin-bottom: 15px;
}

.bor_line {
  border:1px solid #eee;
}

  .heading_sect {
  position: relative;
  background-color: #eee;
  padding: 10px;
  margin-bottom: 15px;
  }

  .heading_sect h3 {
  padding: 0px 0 0 0;
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 700;
  }

  .ss-main .ss-values .ss-single {
    display: block !important;
  }

  .ss-content .ss-list .ss-option {
    display: block ;
  }

  .upload_wrapper_pict {
    position: relative;
    width: 100%;
    text-align: center;
  }

  .upload_wrapper_pict small {
    color: #777;
    display: block;
  }
  
  .file-upload_pict {
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 83.45px;
    border-radius: 5px;
    border: 1.5px dashed #242856;
    cursor: pointer;
  }
  
  .file-upload_pict label, .file-upload_pict a {
    display: block;
    padding: 8px;
    cursor: pointer;
    height: 100%;
  }
  
  .file-upload_pict i {
    font-size: 40px;
    color: #0062cc;
    vertical-align: bottom;
  }
  
  .file-upload__input_pict {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 14px;
    width: 0;
    height: 100%;
    opacity: 0;
  }

  .wrap_barcode {
    position: relative;
    text-align: center;
  }

  .wrap_barcode img{
    width: 60%;
    border:1px solid #ccc;
  }
  
  .wrap_barcode p{
    padding: 0px;
    margin: 0;
    font-size: 18px;
    color: #333;
    font-weight: 700;
  }
  
  .wrap_barcode h4{
    padding: 10px 0 10px 0;
    margin: 0;
    letter-spacing: 2px;
    font-size: 22px;
    color: #333;
    font-weight: 700;
  }

  .wrap_barcode h2{
    padding: 0px 0px 0px 0;
    margin: 0;
    letter-spacing: 2px;
    font-size: 44px !important;
    color: #3f437a;
    font-weight: 800 !important;
    margin-bottom: 0 !important;
  }
  
  
  .bd-wizard-step-icon i {
    font-size: 16px;
    line-height: 1;
  }

  .ic_print {
    position: absolute;
    width: 50px;
    display: inline-block;
    height: 50px;
    border-radius: 100%;
    padding: 10px;
    text-align: center;
    right: 15px;
    top: 15px;
    z-index: 1;
    background-color: #007bff;
  }

  .ic_print i{
   font-size: 20px;
   color:#fff;
  }

  .p-r { position: relative;}
  .badge {font-size: 16px;}
  .content_inside {
    position: relative;
    padding: 0px 15px 15px;
  }
  .mt-30 {
    margin-top: 32px !important;
  }

  .wrap_dokter {
    position: relative;
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid #eee;
  }

  .wrap_dokter  .table thead th {
    vertical-align: middle;
    text-align: center;
}

  .heading_name {
    position: relative;
    padding: 10px;
    background-color: #44ac6f40;
  }
  
  .heading_name h2{
    padding:0;
    margin:0;
    font-size: 16px;
    font-weight: 600;
    color:#000;
  }

  .heading_name p{
    padding:0;
    margin:0;
    font-size: 16px;
    color:#333;
  }

  .wrap_ic_doc {
    width: 40px;
    border-radius: 100%;
    height: 40px;
    padding:3px;
    text-align: center;
    display: inline-block;
    background-color: #28a745;
  }

  .wrap_ic_doc i {
    text-align: center;
    color: #fff;
    font-size: 25px;
  }

  .wrap_ic_success {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 100%;
    background-color: #28a745;
  }
  
  .wrap_ic_danger {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 100%;
    background-color: #E6707B;
  }

.thankyou-content {
    text-align: center;
    margin: 16px 0;
}

.thankyou-content .wrap_ic_success {
    margin-bottom: 16px;
}

.thankyou-content h3 {
    font-weight: bold;
}

.thankyou-content p {color: #555;}

  .wrap_ic_success i{
    text-align: center;
    color: #fff;
    font-size: 55px;
    line-height: 1.7;
  }
  
  .wrap_ic_danger i{
    text-align: center;
    color: #fff;
    font-size: 55px;
    line-height: 1.7;
  }

.wizard .steps>ul li {
  width: 100%;
  max-width: 100%;
}

.wrap_agreement {
  margin-top: 10px;
  padding-left: 20px;
  position: relative;
}

.wrap_agreement .question{
  margin-bottom: 10px;
  border-bottom:1px solid #c4dbf3;
}


.suggest_otp {
  position: relative;
  text-align: center;
  margin-top: 15px;
}

.suggest_otp h4 {
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: normal;
}

.suggest_otp h4 a {
  border-bottom: 1px solid #262261;
  padding: 0;
  margin: 0;
  color: #262261;
  font-weight: 600;
  font-size: 16px;
}

.suggest_otp h4 a:hover {
  border-bottom: 1px solid #262261;
text-decoration: none;
}

.resend_otp {
  position: relative;
  text-align: center;
  margin-top: 20px;
  border: 1px solid #ccc;
  max-width: 250px;
  margin: 0px auto;
  padding: 5px;
  border-radius: 20px;
  margin-top: 20px;
}

.resend_otp h4 {
  padding: 0;
  margin: 0;
  color: #777;
  font-size: 16px;
  font-weight: normal;
}

.resend_otp h4 a {
  padding: 0;
  margin: 0;
  color: #262261;
  font-size: 16px;
}

.resend_otp h4 a.disable {
  padding: 0;
  margin: 0;
  color: #777 !important;
  font-size: 16px;
}

/* New Mobile UI CSS */
#header{
  background-color: #fff;
  padding: 1rem 0;
  position: fixed;
  top: 0;
  border-bottom: 1px solid #fff;
  /* left: 0;
  max-width: 480px; */
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}

#header .container{
  max-width: 480px;
  margin: 0 auto;
  /* position: relative; */
}
.custom-wizard .steps{/* transition: all .5s; */}
.custom-wizard .steps ul{ background-color: #f7f7f7; }
.custom-wizard .steps>ul li{ flex: 1;order: 1; }
.custom-wizard .steps>ul li.current{
  flex: 1 100%;
  order: 0;
}
.custom-wizard .steps>ul li.current a{ background-color: transparent; }
.custom-wizard .steps>ul li a{ background-color: transparent; }
.custom-wizard.fixed-steps .steps{
  position: fixed;
  top: 70px;
  left: 50%;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  max-width: 480px;
  transform: translateX(-50%);
}
.custom-wizard .steps>ul li .bd-wizard-step-icon{
  width: 30px;
  height: 30px;
}
.wizard.custom-wizard .actions ul li:not(:first-child){
  margin-left: auto;
}
.wizard.custom-wizard .actions{
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 100%;
  z-index: 99;
  background-color: #f5f5f5;
  max-width: 480px;
  transform: translateX(-50%);
}
#header + .scrolled-offset{
  margin-top: 70px;
}

.wrap_line_heading {border: 1px solid transparent;  padding: 0px;}
.wrap_heading h2 {font-size: 22px;}
.card_option.co_identity {
  padding: 24px 16px;
  text-align: left;
  background-image: url("../../images/id_card_bg_blue.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.card_option.co_identity .btn_download{
  position: absolute;
  right: 10px;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  background-color: #242856;
  text-align: center;
  padding:3px;
  top:10px;
}


.card_option.co_identity .btn_download i {
  color:#fff;
  font-size: 18px;
}
.co_identity .co_identity_head {
  margin-top: auto;
}

.co_identity .co_identity_title {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #242856;
    max-width: 100%;
    margin: 0;
}

.co_identity .co_identity_age {
  font-size: 14px;
  color: #333;
}

.co_identity .co_identity_head h3 {text-align: left;font-size: 20px;font-weight: 900;margin-top: 4px;margin-bottom: 4px;}

.co_identity .co_identity_head span {
  color: #777;
  font-size: 14px;
}
.card_option p {font-size: 16px;}
.ic_print {position: fixed; right: 15px; bottom: 15px; top:auto; }
.custom-wizard .steps>ul li a .media{
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-wizard .steps>ul li.current .bd-wizard-step-title{
  display: inline-block;
  margin-left: 4px;
  font-size: 16px;
}
.app-section{
  margin-top: 32px;
}
.app-section h2{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
}
.history_card{
  background-color: #fff;
  border-radius: 10px;
  display: block;
}
.history_card + .history_card{ margin-top: 10px; }
.history_card .history_card_body{
  padding: 16px;
}
.history_card .history_card_body + .history_card_body{
  border-top: 2px dashed #eee;
}
.history_info h3{
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 2px;
  color: #777;
}

.history_info h2{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
  color: #242856;
}

.history_info span{
  font-size: 15px;
  margin-bottom: 0;
  font-weight: 600;
  line-height: normal;
  color: #222;
}

.history_info span.badge {
  color: #fff;
}

.history_info {
  word-wrap: break-word !important;
}

.bg_statement {
  border: 1px solid #eee;
  padding: 15px;
  background: rgb(0 123 255 / 16%);
}

.wrap_queue {
  position: relative;
  border: 1px solid #0056b3;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 10px;
}

.wrap_queue h3 {
  padding: 0;
  margin: 0;
  color: #777;
  font-size: 14px;
  font-weight: normal;
}
.wrap_queue h2 {
  padding: 0;
  margin: 0;
  color: #28a745;
  font-weight: 700;
  font-size: 22px;
}

.wrap_queue p {
  padding: 0;
  margin: 0;
  color: #000;
  font-size: 14px;
  font-weight: 600;
}

.bullet_point_green {
	width: 10px;
	margin-right: 5px;
	height: 10px;
	display: inline-block;
	background-color: #0db504af;
}

.mobile-navigation{
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  border-top: 1px solid #f3f3f3;
}

.mobile-navigation ul{
  max-width: 480px;
  margin: 0 auto;
}

.mobile-navigation ul li{
  flex: 1;
  text-align: center;
}

.mobile-navigation .nav-link {
  padding: 0.5rem 0;
  color: #555;
  border-bottom: 2px solid transparent;
}

.mobile-navigation .nav-link.active {
  color: #242856;
  font-weight: bold;
  background-color: rgba(36, 40, 86, .125);
  border-color: #242856;
}

.mobile-navigation .nav-link span{ font-size: 12px; }
.mobile-navigation .nav-link svg{
  width: 20px;
  height: 20px;
}

.modal-loading{
  max-width: 180px;
  margin: 0 auto;
}

.loading-modal-content{
  text-align: center;
}

.loading-modal-content h5{
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
}

.loading-modal-content svg{
  animation: loadRotate .25s infinite linear;
  color: #0062cc;
}

.f_26{
  font-size: 32px !important;
  font-weight:  700 !important;
  color:#262261 !important;
}

.mt_6{
  margin-top: 100px !important;
}

@keyframes loadRotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(44deg); }
}

.cus_pad {
  padding: 8px !important;
  border-bottom: 1px solid #c1c6ff !important;
}



label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 14px !important;
}
.schedule-tab{
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.alert{
  font-size: 14px;
}

.link_download {
  color: #262261;
  font-size: 14px;
  padding: 10px;
  border: 1px solid #262261;
  margin-bottom: 10px;
  text-decoration: underline;
  border-radius: 4px;
  font-weight: 700;

}


.link_download i {
  color:#262261;
  font-size: 16px;
  padding:0;  
  margin-right: 5px;
}

.wrap_img_docter{
position: relative;
width: 60px;
height: 60px;
border-radius: 100%;
display: inline-block;
background-color: #eee;
}


.wrap_img_docter img{
width: 60px;
height: 60px;
border-radius: 100%;
}

.wrap_info {
  position: relative;
  border: 1px solid #ccc;
  padding: 15px;
  /* background-color: #daf4ff; */
  border-radius: 5px;
}

.wrap_info p{
 padding:0;
 margin:0;
 font-size: 14px;
}

.alert { margin-bottom: 0.8rem; padding: 8px;}
.custom-select {  background-color: #fff !important;}

.nav-tabs .nav-link {
  height: 65px;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg_cancel {
  background-color:#e20d22 ;
  border: 1px solid #e20d22;
}

.txt_inp_border {
  max-width: 100%;
  background-color: transparent !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid #333 !important;
  font-size: 12px;
  border-radius: 0 !important;
}

.info_destroy{
margin-top:0px;
position: relative;
padding:10px;
border:1px solid #ccc;
}
.info_destroy p{
color:#333 !important;
font-size:14px !important;
padding:0;
margin:0;
}
.info_destroy p a{
color:#333 !important;
text-decoration:underline;
font-weight:600;
}

.modal-title {
margin-bottom: 0;
  line-height: normal;
font-size: 20px;
}

#custom_form .wrap_form {
  background-color: #242856;
  border:2px solid #fff;
}
#custom_form label {
  color:#fff;
}
#custom_form .btn_primary{
  background-color: #fff;
  color:#242856;
}
#custom_form .btn_primary:hover{
  background-color: #eee;
  color:#242856;
}
#custom_form hr{
  border:1px solid #5D6197;
}
#custom_form .px-4{
  color:#fff;
}
#custom_form .btn_border{
  border:1px solid #fff;
  color:#fff;
}
#custom_form .btn_border:hover{
  border:1px solid #fff;
  color:#fff;
}
.menu_side i {
  color: #262261;
}
.alert h3 {
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.alert p {
    padding: 10px 0 0 0;
    margin: 0;
    font-size: 14px;
    font-weight: normal;
}