@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --col1: #30BAD9;
    --col2: #06aeca;
  }

  a:hover{
      text-decoration: none;
  }

.color-sc1{
   background-color: var(--col1);
   color:white;
}

.color-sc2{
    background-color:var(--col2);
    color:white;
 }
 
body{
   font-family:"Roboto";
}

.bg-light{
    background-color: #f9f9f9 !important;
    border-bottom: 1px solid #eee;
}

.navbar {
    padding:0;
}
.navbar-expand-lg .navbar-nav .nav-link{
    padding:8px 1px;
    margin-left:10px;
    margin-right:24px;
    border-top: 3px solid #F9F9F9;
}

a.nav-link{
    font-size:19px;
}

.navbar-expand-lg .navbar-nav .active .nav-link{
    border-top: 3px solid var(--col1);
}

.user-avatar{
    padding:1px 1px 0 1px;
    border-radius:50%;
    background-color: var(--col2);
    border:1px solid #aaa; 
    margin-right: 5px;
 }

 .user-menu{
     color:#444;
 }
.warning-area{
    margin-top: 80px; 
}

section{
   padding-top: 90px;    
}

.page-container{
    margin:auto;
    padding:0px 30px;
    width:100%;
    margin-top: 30px;
}

.header-section{
    float:left;
}

.btn-semua{
    float:right;
    text-align: right;
}

.nav-tabs {
    border-bottom-color:#aaa;
    background-color: #fff;
}

.nav-tabs .nav-tabs{
    border-color: #aaa;
}
.nav-tabs .nav-item{
    background-color: #f1f1f1;
}

.nav-tabs .nav-link{
    background-color: #e6e6e6;
    border-color: #999;
    border-radius:10px 10px 0 0;
    color:#aaa;
}

.nav-tabs .nav-link.active{
    border-color: #999;
    border-bottom-color: var(--col1);
    color:#fff;
    background-color:var(--col1); 
}

.select2-container--default .select2-selection--single {
    border: 1px solid #cdcdcd !important;
}

.select2-container .select2-selection--single {
    height: 38px !important;
    padding: 4px;
}
#beranda{
    background-color:var(--col1);
    background-image:linear-gradient(145deg, rgb(0,183,198) 5%, rgb(255,255,255) 100%);
    color:white;
}

#beranda h3{
    font-weight: 700;
}
.btn-download img{
    margin-bottom:5px;
    margin-right:10px;
}
.btn-download img:hover{
    -webkit-filter: drop-shadow(7px 7px 7px #888);
    filter:         drop-shadow(7px 7px 7px #888);
}

#solusi{
   padding:20px; 
   background-color: var(--col1);
   background-image: linear-gradient(0deg, var(--col1) 0%, #ffffff 25%);
}

#solusi .judul{
   margin-left: 110px;
}
#solusi h2{
    font-weight: 700;
    color:var(--col1);
    font-size:30px ;
}

#solusi p{
    font-size: 18px;
}

#solusi .container-btn{
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

#solusi .container-btn a{
    color:#333;
    text-decoration: none;
}

#solusi .container-btn a:hover{
    -webkit-filter: drop-shadow(5px 5px 7px var(--col1));
    filter:         drop-shadow(5px 5px 7px var(--col1));
}

#solusi .btn-solusi{
    background-color:#CEF6FF ;
    width:150px;
    height: 214px;
    text-align: center;
    margin:8px 14px;
    border:1px solid #f5f5f5;
    border-radius:15px;
    -webkit-box-shadow: 7px 7px 9px -3px #CEF6FF; 
    box-shadow: 7px 7px 9px -3px #CEF6FF;
    padding-top:20px;
    position: relative;
}

#solusi .btn-solusi .badge{
   position:absolute;
   top:5px;
   right:-10px;
   padding:4px 8px;
   color:#fff;
   background-color: #e40c0c;
   border-radius: 6px;
   font-size: 16px;
}
#solusi .btn-solusi img{
    width:90%;
}

#solusi .btn-solusi p{
   margin-top: 14px; 
   padding:3px 8px;
   line-height:19px;
   background-color: var(--col1);
   color:#fff; 
   font-family: tahoma;
   font-weight:600;
   font-size:15px;
   border-radius:0 0 10px 10px;
}

#layanan h3{
    font-size:24px;
    padding-bottom: 10px;
}

#layanan .container-spesialis{
    display: flex;
    /*justify-content: center;*/
    flex-wrap: wrap;
   /* border-radius:6px;
    border:2px solid #D2E2FF;*/
 }

 #layanan .container-spesialis a{
    color:#333;
    text-decoration: none;
}

#layanan .container-spesialis a:hover > .thumb-spesialis > img,
#layanan .container-spesialis a:hover{
    color:var(--col1);
    -webkit-filter: drop-shadow(0px 0px 6px var(--col1));
    filter:         drop-shadow(0px 0px 6px var(--col1));
}

 #layanan .thumb-spesialis{
    width:120px;
    text-align:center;
    margin:10px 1px;
    height:120px;
 }    

 #layanan .thumb-spesialis p{
     font-size: 12px;
     padding-top: 5px;
 }    

 #layanan .container-obat{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
   /* border:2px solid #D2E2FF;
      border-radius:6px;*/
 }

 #layanan .thumb-obat{
    width:145px;
    padding:3px 5px;
    margin:6px;
    border-radius: 10px;
    background-color: #FEFBFB;
}    

#layanan .thumb-obat div{
    font-size: 12px;
    text-align: center;
}

#layanan .thumb-obat .img{
   border-radius:10px;
}

#layanan .container-obat a{
    color:#333;
    text-decoration: none;
}

#layanan .container-obat a:hover > .thumb-obat{
    color:var(--col1);
    background-color:#d0e5ff;
    border-color: #a2b4d4;
}

#berita h3{
    font-size:24px;
    padding-bottom: 10px;
}

.container-btn{
    margin:5px 0px;
}

.carousel-caption{
    background-color:rgba(255, 146, 4, 0.6);
    padding:5px 20px;
    width: 100%;
    bottom: 0;
    max-height: 120px;
    text-align: left;
    left:0px;
}

.carousel-caption h4{
    margin-bottom: 0px;
    line-height:30px;
}

.carousel-caption p{
    line-height:21px;
}

.caption-artikel{
    font-size:12px;
    background-color: rgb(240, 240, 240);
    padding:6px;
    border-radius: 8px;
    color: #444;
    height:46px;
    overflow-y: hidden;
}
.link-kategori{
    font-size:13px;
    font-weight: 700;
    color: red;
}

#daftar-mitra a{
    color:#333;
    text-decoration: none;
}

#daftar-mitra .btn-daftar-mitra{
    padding:3px 6px;
    border-radius:8px;
    display:flex;
    margin:3px;
    background-color: var(--col1);
    color: #fff;
}

#daftar-mitra .btn-daftar-mitra img{
    height:60px;
}

#daftar-mitra .btn-daftar-mitra .btn-label{
    padding-top:5px;
    font-size: 18px;
}

#daftar-mitra a:hover{
    filter: opacity(90%);
}
#daftar-mitra a:hover > .btn-daftar-mitra > .btn-label{
   color:#ddf0fc;
}

#daftar-mitra a:hover > .btn-daftar-mitra{
--webkit-box-shadow: 0px 0px 5px var(--col1); 
}

#manfaat h5{
    color:#9AA5B0;
    font-size:16px;
    font-weight:700;
}

#manfaat p{
    color:#9AA5B0;
    font-size:14px;
}

#hubungi-kami h5{
    margin-top:10px;
    margin-bottom:2px;
} 

#hubungi-kami{
    padding:30px;
    border-top:3px solid #aaa;
}
#hubungi-kami .btn{
    width: 100%;
    margin:3px;
}
#hubungi-kami a{
    color:#fff;
    text-decoration: none;
}

#hubungi-kami li a:hover{
    color:rgb(248, 252, 252);
}

#hubungi-kami .btn-utama{
    background-color:#e4e4e4;
    border: 1px solid #bbb;    
    border-radius: 6px;
}

#hubungi-kami .btn-utama:hover{
    background: rgba(0, 0, 0, 0.2);
}

#hubungi-kami .btn-fb{
    padding:2px 10px;
    text-align:left;
    width: 100%;
    color:white;
    background-color:#4B69B0;    
}

#hubungi-kami .btn-tw{
    padding:2px 10px;
    text-align:left;
    width: 100%;
    color:white;
    background-color:#36ADDC;    
}

#hubungi-kami .btn-ig{
    padding:2px 10px;
    text-align:left;
    width: 100%;
    color:white;
    background-color:#AB15A5;    
}
#hubungi-kami .btn-yt{
    padding:2px 10px;
    text-align:left;
    width: 100%;
    color:white;
    background-color:#E83F3A;    
}

#hubungi-kami .btn-wa{
    padding:2px 10px;
    text-align:left;
    width: 100%;
    color:white;
    background-color:#299C37;    
}

#hubungi-kami .btn-fb i
{
    border:2px solid white;
    padding: 3px 8px;
    border-radius:50%;
    margin-right: 10px;
} 
#hubungi-kami .btn-tw i
{
    border:2px solid white;
    padding: 3px 4px;
    border-radius:50%;
    margin-right: 10px;
} 
#hubungi-kami .btn-ig i
{
    border:2px solid white;
    padding: 3px 5px;
    border-radius:50%;
    margin-right: 10px;
} 
#hubungi-kami .btn-yt i
{
    border:2px solid white;
    padding: 3px 3px;
    border-radius:50%;
    margin-right: 10px;
} 

#hubungi-kami .btn-wa i
{
    border:2px solid white;
    padding: 3px 3px;
    border-radius:50%;
    margin-right: 10px;
} 

#hubungi-kami .btn-fb:hover,
#hubungi-kami .btn-tw:hover,
#hubungi-kami .btn-ig:hover,
#hubungi-kami .btn-yt:hover,
#hubungi-kami .btn-wa:hover{
    filter: opacity(70%);
}

footer{
    background-color: var(--col1);
    color: white;
    padding:10px;
    font-size: 18px;
    font-weight: bold;
}

.modal-body .judul{
    width:100%;
    text-align:center;
    position: relative;
}

.modal-body .pertama{
    width:100%;
    float:left;
}

.modal-body .pertama h5{
    font-size: 26px;
    margin:auto;
    margin-bottom:5px;
}

.modal-body .judul button{
    float:right;
    width:40px;
}

.modal-body p{
    clear: both;
    font-size: 12px;
    text-align: center;
}

.modal-body hr{
    border-color: #aaa;
}

.input-login .input-group-prepend .input-group-text{
    background-color: var(--col1);
    color:white;
    width:40px;
}

.input-login .input-group-prepend .input-group-text i{
   font-size:20px; 
}

.btn-login{
    width: 30%;
}

button.close2 {
    padding: 0;
    background-color: transparent;
    border: 0;
}

.close2 {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

.close2 span{
    border:1px solid #555;
    padding:2px 8px;
    border-radius: 50%;
    right:0;
    top:0;
    position:absolute;
}

.btn-login{
    margin:4px ;
}

.nav-kategori .nav-link{
    padding:4px 8px;
    border:1px solid #06aeca;
    margin-right: 5px;
}

.nav-kategori a{
    font-family: Roboto;
    font-size: 15px;
}

.tab-content{
    margin-top:10px;
}

.tab-pane{
    padding: 0;
}

#header-artikel{
    background: radial-gradient(circle at top left, rgba(0,183,198,.08), transparent 28%), linear-gradient(180deg,#F8FEFF 0%,#FFFFFF 45%,#F7FCFD 100%) !important;
    overflow: auto;
    padding-top: 90px;
 }
 
 .cari-dokter{
     padding:10px;
     background: var(--col1);
     color:#fff;
     width:300px;
     float:left;
 }
 
 .cari-dokter p{
     font-size: 14px;
 }
 
 .cari-dokter .cari{
     width:100%;
     padding:10px 8px;
     border-radius: 10px;
     font-size: 12px;
 }
 
 .cari-dokter .panel-tombol{
     margin-top: 6px;
     width:100%;
     text-align: center;
 }
 
 .cari-dokter a{
     color:#fff;
     font-weight: 700;
 }
 
 #header-artikel .judul{
     margin-left:290px;
     padding:10px 20px;
 }
 
 #header-artikel .judul .btn{
     margin-left: 20px;
     color:#fff;
 }
 
 #header-artikel .judul .reviwer{
     float:right;
     margin:2px;
 }
 
 #header-artikel .judul h2{
     color:#fff;
     margin-top:50px;
 }
 
 #body-header{
     padding: 3px;
 }
 
 #body-header .publikasi{
     margin-top:8px;
     margin-bottom:8px;
     padding:5px 10px;
     float:left; 
 }
 
 #body-header .dibaca{
     margin-top:8px;
     margin-bottom:8px;
     padding:5px 10px;
     float:right;
     background-color:#CEF6FF;
     border:1px solid #3eb8d3; 
     border-radius: 15px;
  }
  
 #body-header a{
     color:#333;
 }

 #body-header .keyword{
    padding:4px 8px;
    margin:3px;
    background:#fff;
    display:inline-block;
    border:2px solid #ccc;
    color:#aaa;
    border-radius:8px
 }

 #artikel-semua .garis-judul{
    border-top:10px double #06AECA;
 }

 #artikel-semua .garis-judul .judul-populer{
    background:#fff; 
    width:350px;
    margin-top:-20px
 }

 #artikel-semua .garis-judul .judul-baru{
    background:#fff;
    width:200px;margin-top:-18px;
    margin-left:auto;
    margin-right:auto;
    text-align:center
}

#artikel-semua .garis-judul .judul-data-covid{
    background:#fff;
    width:320px;
    margin-top:-18px;
    margin-left:auto;
    margin-right:auto;
    text-align:center
}

#artikel-semua .garis-judul .judul-headline{
    background:#fff;
    width:120px;
    margin-top:-18px;
    margin-left:auto;
    margin-right:auto;
    text-align:center
}

#artikel-semua .space-iklan{
    width:100%;height:250px;border:1px solid #444;border-radius:30px
}

#artikel-semua .blok-baru a img{
    width:100%;
}

#artikel-lainnya .blok-artikel a img{
    width:100%;
}

#dashboard-member .panel{
    border:1px solid #30BAD9;
    border-radius:20px;
    -webkit-box-shadow: 14px 17px 15px -7px rgba(8,113,154,0.94); 
    box-shadow: 14px 17px 15px -7px rgba(8,113,154,0.94);
}

#dashboard-member .panel-avatar{
    background-color: var(--col1);
    border-radius:20px 20px 0 0;
    text-align: center;
    padding:20px;
    color:#fff;
    font-size:30px;
}

#dashboard-member .panel-profile{
    padding:25px;
    font-size:24px;
}
#dashboard-member .panel-profile table td{
    padding:1px;
} 

#dashboard-member .panel-profile{
    padding:25px;
    font-size:24px;
}
#dashboard-member .panel-profile table td{
    padding:1px;
}    

#dashboard-member .jadwal{
    padding:5px 10px;
}    

#dashboard-member .jadwal .item{
    border-radius:10px;
    display: inline-block;
    margin-bottom:6px;
    width:100%
}    

#dashboard-member .jadwal .belum{
    border:1px solid #1e90ff;
    background: #1e90ff ;
}

#dashboard-member .jadwal .sudah{
    border:1px solid #777;
    background: #777 ;
}

#dashboard-member .jadwal .sedang{
    border:1px solid #12a142;
    background: #12a142 ;
}

#dashboard-member .jadwal .batal{
    border:1px solid #ff1e1e;
    background: #ff1e1e ;
}

#dashboard-member .jadwal .item .body{
    border-radius:10px 10px 0 0;
    background: #fff;
}    

#dashboard-member .jadwal .item .nama{
    width:220px;
    float:left;
}    

#dashboard-member .jadwal .item .nama .spesialis{
    font-size:12px;
}    

#dashboard-member .jadwal .item .nama .kode{
    font-size:14px;
}

#dashboard-member .jadwal .item .nama .waktu{
    font-weight: 600;
    color: #1e90ff;
}    

#dashboard-member .jadwal .item .foto{
   width:82px;
   float:left;
}    
#dashboard-member .jadwal .item .footer{
    font-size: 12px;
    color:#fff;
    padding:0 10px;
    text-align: right;
    font-weight: 500;
}    


#header-layanan{
    background-color:var(--col1);
    color:white;
    padding-top: 120px;
    padding-bottom: 20px;
}

#layanan .konsultasi-dokter{
   padding:8px 10px;
   background-color: var(--col2);
   color: #fff;
   border-radius: 6px;
}

 #layanan .thumb-daftar-dokter{
    width:153px;
    height:330px;
    text-align:center;
    margin:10px 0px;
    border:1px solid #ddd;
    border-radius: 10px;
    float:left;
    margin:8px;
    padding:5px 4px;
    box-shadow: 11px 12px 5px -4px rgba(98,104,107,0.5);
    -webkit-box-shadow: 11px 12px 5px -4px rgba(98,104,107,0.5);
    -moz-box-shadow: 11px 12px 5px -4px rgba(98,104,107,0.5);
 }   

 #layanan .thumb-daftar-dokter .bintang{
    float:left;
    width:40px;
    font-size:14px;
}    

 #layanan .thumb-daftar-dokter .bintang i{
     color:var(--col2);
 }    

 #layanan .thumb-daftar-dokter .online{
    float:right;
    width:80px;
    text-align: right;
}   

#layanan .thumb-daftar-dokter .on i{
    color:#15CC1C;
    font-size: 22px;
}  

#layanan .thumb-daftar-dokter .busy i{
    color:#f15006;
    font-size: 22px;
}  

#layanan .thumb-daftar-dokter .off i{
    color:#a8aca8;
    font-size: 22px;
}  

#layanan .thumb-daftar-dokter img{
    float:center;
    border:1px solid rgb(148, 177, 255);
    border-radius:50%;
    width:90px;
    height:90px;
    margin:auto;
}
#layanan .thumb-daftar-dokter .nama{
    font-size:14px;
    font-weight: bold;
}
#layanan .thumb-daftar-dokter .pengalaman{
    color:#fff;
    font-weight:300;
    background: var(--col2);
}
#layanan .thumb-daftar-dokter .kategori{
    font-size:14px;
    font-style: italic;
    padding-top:5px;
}
#layanan .thumb-daftar-dokter .biaya{
    font-size:18px;
    font-weight:bold;
    margin:5px 0;
}
#layanan .thumb-daftar-dokter .link,
#layanan .thumb-daftar-dokter .link-off{
    margin:2px 0;;
    padding:5px 8px;
    border-radius:10px;
}
#layanan .thumb-daftar-dokter .link a{
    font-size:13px;
    background: var(--col1);
    color: #fff;
}
#layanan .thumb-daftar-dokter .link-off a{
    font-size:13px;
    background: #bbb;
    color: #fff;
}

#layanan .ket{
    border:2px solid #777;
    border-radius: 10px;
    padding:10px;
}

#layanan .display-dokter img{
    border:1px solid rgb(148, 177, 255);
    border-radius:50%;
}

#layanan .display-dokter .nama{
    font-size: 22px;
    font-weight:500;
    float:left;
}
#layanan .display-dokter .kategori{
    font-style: italic;
    margin-bottom:20px;
}

#layanan .display-dokter .bintang{
    font-size:17px;
    float:right;
    width:50px;
    text-align: right;
}

#layanan .display-dokter .bintang i{
    color: var(--col2);
}

#layanan .display-dokter .waktu{
    margin-top:7px;
    padding: 6px 10px;
    background-color: #F4EB16;
    border-radius:4px;
}

#layanan .display-dokter .total{
    margin-top: 20px;
    color:#777;
    padding:0px 10px;
    margin-bottom: 20px;
}

#layanan .display-dokter .input-group input{
    border-radius: 14px 0px 0px 14px;
}

#layanan .display-dokter .input-group .btn{
    border-radius: 0px 14px 14px 0px;
}

#layanan .panel-bingkai{
    border:1px solid #ccc;
    padding:20px;
    margin:15px 10px;
    border-radius: 10px;
    box-shadow: 11px 12px 5px -4px rgba(98,104,107,0.5);
    -webkit-box-shadow: 11px 12px 5px -4px rgba(98,104,107,0.5);
    -moz-box-shadow: 11px 12px 5px -4px rgba(98,104,107,0.5);
}

#layanan .catatan{
    margin-top:20px;
    padding-top:10px ;
    border-top:1px solid #ccc;
    font-size:15px;
    color:var(--col1);
}

#layanan .panel-bingkai .info{
   background: #e4e4e4;
   border-radius: 20px;
   border:2px solid #aaa;
}

#layanan .panel-bingkai .info .header{
    background: #111;
    color:#fff;
    padding: 10px;
    font-weight: 700;
    border-radius: 20px;
 }
 #layanan .panel-bingkai .info .body{
    color:#111;
    padding: 15px 20px;
 }
 #layanan .panel-bingkai .info .body table td{
    padding:5px 8px;
 }

#ModalProfile .view-profile{
    padding: 5px 1px;
    color:#111;
}

#ModalProfile .view-profile .pengalaman-lbl{
    color:#7C7C7D;font-size:14px;font-weight:800
}

#ModalProfile .view-profile .pengalaman{
    background:#00b7c6;color:#fff;padding:3px 18px;border-radius: 10px;
}

#ModalProfile .view-profile .sub-judul{
    font-size: 18px;
    font-weight: 800;
    color:#fff;
    background:#06aeca;
    padding:5px;
    margin-top:10px;
}

#ModalProfile .view-profile .isi{
    font-size: 18px;
    padding:10px;
}

.baris-bingkai{
    border:1px solid #aaa;
    padding:5px 6px;
    margin:6px;
    border-radius: 10px;
}

.buat-janji .input-hidden {
    position: absolute;
    left: -9999px;
  }

.buat-janji  input[type=radio]:checked + label>.cal-icon {
    border:3px solid #30BAD9;
    box-shadow: 0 0 2px 2px rgb(202, 204, 202);
}

.buat-janji  input[type=radio]:checked + label>.cal-icon {
    background:#D4F1F8;
}

.buat-janji .cal-icon{
      border:3px solid #30BAD9;
      border-radius:15px;
      margin:5px;
}

.buat-janji .cal-icon .atas{
    color:#30BAD9;
    padding:2px 15px;
    border-radius:10px 10px 0 0;
    font-weight:bold;
}
.buat-janji .cal-icon .bawah{
    color:#fff;
    background-color:#30BAD9;
    padding:2px 15px;
    border-radius:10px;
}

#chat .header-sesi-berjalan{
    background: #00A008;
    color:#fff;
    font-weight: 600;
    padding:10px;
    text-align: center;
} 

#chat .header-sesi-selesai{
    background: #B42F25;
    color:#fff;
    font-weight: 600;
    padding:10px;
    text-align: center;
} 

#chat .sesi-berjalan{
    background:#fff;
    min-height: 100px;
    padding:10px;
}

#chat .sesi-selesai{
    background:#fff;
    min-height: 100px;
    padding:10px;
}
#chat .dokter{
    width:100%;
}
#chat .dokter .foto{
    float:left;
    width:55px;
}
#chat .dokter .nama{
    float:left;
}

#chat .dokter .str{
    font-size:12px;
}    

#chat .dokter .kode{
    font-size:14px;
}    

#chat .countdown{
    background: yellow;
    padding:4px 20px;
    border-radius:20px 0 0 20px;
    margin-left:-20px;
    text-align: left;
}

#chat .chat-panel{
    background:#ECECEC;
    padding:20px 25px;
    height: 67vh;
    overflow-y: scroll;
    font-size: 16px;
    line-height: 20px;
}

#chat .chat-left{
    float:left;
    padding:8px 14px 2px 14px;
    background: #6CCEE4;
    margin-bottom: 8px;
    max-width:60%;
    border-radius:0 16px 16px 16px;
}


#chat .chat-right{
    float:right;
    padding:8px 14px 2px 14px;
    background: #caecf3;
    margin-bottom: 8px;
    max-width:60%;
    border-radius:16px 0px 16px 16px;
}

#chat  .chat-send{
   background: #3EC5F4;
}

#chat  .chat-send input{
    border-radius:30px;
    margin:0 10px;
 }
 
 #chat .header-rating{
    width:100%;
    background:#ff3;
    text-align:center;
    padding:6px 8px;
    font-size:20px;
 }

 #chat .header-rating .selesai{
    color:red;
    font-weight:600;
 }

 #chat .body-rating{
    width:100%;
    background:var(--col1);
    text-align:center;
    padding:20px 28px;
 }

 #chat .body-rating .panel{
     background-color: white;
     padding:20px 35px;
 }

 #chat .body-rating .panel .ket1{
     font-size:26px;
     font-weight:600;
     line-height:30px;
 }    

 #chat .body-rating .panel .ket2{
    font-size:28px;
    font-weight:600;
}

 #chat .body-rating .panel .ket2 .kode{
    color:#67c;
    font-weight:800; 
}  

#chat .body-rating .panel .ket2 .selesai{
    color:#6C7;
    font-weight:800; 
}  

#chat .body-rating .panel .ket3{
    font-size:26px;
    font-weight:300;
    line-height: 28px;
}

#chat .body-rating .panel .ket4{
    margin-top:20px;
    font-size:23px;
    font-weight:600;
}

#chat .body-rating .panel .bintang a{
    font-size:60px;
    color: #444;
}

#chat .body-rating .dokter-penulis-resep{
    background:#999999;
    color:#fff;
    padding:5px;
    margin-top: 20px;
    border-radius: 20px;
}
#chat .body-rating .dokter-penulis-resep .pnl{
    background:#fff;
    padding:10px 30px;
    border-radius: 20px;
}

#chat .body-rating .dokter-penulis-resep .pnl table td{
    font-size:28px;
}

#chat .body-rating .btn-full{
    width:100%;
    margin:5px;
    font-size:35px;
    font-weight:bold;
}

#header-shop .head1{
    padding-top:110px;
   border-bottom:1px solid #ccc;
   height: 145px;
}
#shop {
    padding-top:10px
}

#shop .box{
background: white;
    width: 100%;
   border:1px solid #888; 
   border-radius: 10px;
   padding:10px 20px;
   margin-bottom: 20px;
   box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
    -webkit-box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
    -moz-box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
}


#shop h4{
    color:var(--col1);
    padding-left:15px;
}

#shop .sub-judul{
    color:var(--col1);
    font-weight: 700;
    padding-bottom: 7px;   
    width:100%; 
}

#shop .thumb-gol{
    float:left;
    width:120px;
}

#shop .thumb-kategori{
    float:left;
    width:120px;
    height:110px;
    color:#333;
}

#shop .spesial{
    border-radius: 20px;
    border:1px solid #999;
    box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
    -webkit-box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
    -moz-box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
    background-color: #FFFED9;
    padding:5px;
    vertical-align: middle;
    font-size: 12px;
    margin-left:10px;
    margin-top:35px;
    padding-top:60px;
    height: 85%;
}

#shop .spesial a{
    color:#777;
}    

#shop .card .card-header{
    background: #30BAD9;
    color:#fff;
    font-weight:bold;
    font-size:20px;
}

#shop .card .card-body{
    background:#CEF6FF;
}

#shop .thumb-produk{
   background-color: #fff;
   margin-bottom: 15px;
   border-radius: 10px;
   border:1px solid #1e90ff;
   padding:5px;
   box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
   -webkit-box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
   -moz-box-shadow: 3px 2px 8px 0px rgba(0,0,0,0.81);
}

#shop .thumb-produk .nama{
    padding-top:5px;
    font-size:14px;
    height:65px;
    line-height: 20px;
}

#shop .thumb-produk .bintang i{
    color:#FEA726
}

#shop .thumb-produk .harga{
    color:#1e90ff;
    font-size: 25px;
    font-weight: bold;
}

#corona-care{
    background-color:#DAF1F5 ;
} 

#corona-care .card {
    text-align: center;
    border-radius: 10px;
    height:275px;
    border:1px solid  #30BAD9;
}

#corona-care .card img{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

#corona-care .card .card-footer{
    background: #30BAD9;
    color:#fff;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

#paket-corona{
    background-color:#DAF1F5 ;
} 

#paket-corona .card{
   color:#222;
   border:1px solid  #30BAD9;
   border-radius: 10px;
   height:300px;
}

#paket-corona .card .card-header{
    background: #30BAD9;
    color:#fff;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

#paket-corona .card .card-body{
    padding:0px;
} 

#beli-paket-corona{
    background-color:#DAF1F5 ;
} 

#beli-paket-corona .card{
   color:#222;
   border:1px solid  #30BAD9;
   border-radius: 10px;
   height:475px;
}

#beli-paket-corona .card .card-header{
    background: #30BAD9;
    color:#fff;
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

#beli-paket-corona .card .card-body{
    padding:0px;
} 

#paket-corona .card span{
    font-size: 27px;
    font-weight: 700;
}

#paket-corona .card .ganjil{
   padding:5px 20px
}

#paket-corona .card .genap{
    background: #C7F5FF; 
    padding:5px 20px
}

#paket-corona .harga{
   background: #07A9CD;
   color:#fff;
   font-size: 32px;
   text-align:center;
   font-weight: 600;
   padding:10px 20px;
   margin-top: -5px;
   border-radius: 0 0 10px 10px;
}

#ModalDetail .detail-judul{
    background-color: #00b7c6;
    color:#fff;
    font-size: 22px;
    padding:10px 16px;
}

#ModalDetail .detail-judul span{
    font-size: 28px;
    font-weight: 700;
}

#ModalDetail .detail-ket{
    background-color: #fff;
    color:#222;
    font-size: 18px;
    padding:10px 16px;
}

#kategori-test {
   padding-top:95px;
   background-image: url("../images/background_test.png");
   background-size:cover;
}

#kategori-test .panel-kiri{
     color:#2C4282;
}

#kategori-test .panel-kiri h5{
    font-size: 26px;
}

#kategori-test .panel-kiri h6{
    font-size:20px;
}

#kategori-test .panel-kiri .cari{
    background:rgba(96, 200, 228, 0.7);
    border-radius:30px;
    padding:20px 26px;
    text-align: left;
}
#kategori-test .panel-kiri .cari select, button{
    padding:10px;
    width:100%;
    background-color: #fff;
} 

#kategori-test .panel-kiri .cari .select::after {
    background-color: #ddd;
}

#kategori-test .panel-kiri .cari .select2-container, .panel-kiri .cari .select2-selection--single{
    height:40px;
}
#kategori-test .panel-kiri .cari .select2-selection--single .select2-selection__rendered{
    height:30px;
}

#kategori-test .panel-kanan .btn-kategori{
    background:rgba(96, 200, 228, 0.7);
    border:6px solid #fff;
    border-radius: 20px;
    padding:25px;
    font-size: 22px;
    font-weight: 700;
}
#kategori-test .panel-kanan h5{
   color: #2C4282;
}

#kategori-test .panel-kanan .btn-kategori img{
    width:20%; float: left;
}

#kategori-test .panel-kanan .btn-kategori .label-btn{
    width:80%; float: left;
    margin-top: 20px;
    color:#fff;
}

#kategori-test .header-detail{
    background-color: rgba(0,212,255,1);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,212,255,1) 100%);
    padding:4px 12px;
}

.link-judul-filter {
    color: #222;
}

.link-judul-filter:after {
    content: "\f078";
    font-family: 'FontAwesome';
    font-weight: 400;
    float: right;
    color: #222;
}

.link-judul-filter.collapsed:after {
    content: "\f054";
    font-family: 'FontAwesome';
}
/* ------------------ responsive --------------------- */

@media only screen and (max-width: 600px) {
    .page-container{
        padding:3px 10px;
    } 
    .header-section h3{
        font-size:16px !important;
        line-height: 30px;
    }
    
    .btn-semua a span{
        display: none;
    }

    #beranda h3{
        padding-top:10px;
        font-size:20px;
    }

    #beranda .button-label{
        display: none;
    }

    .btn-download img{
        width:125px;
    }

    #solusi h2{
        font-size:24px;
    }
    
    #solusi p{
        font-size:16px;
    }
    

    #daftar-mitra .btn-daftar-mitra .btn-label{
        font-size:18px;
    }

    #header-artikel .cari-dokter{
        display:none;
    }

    #header-artikel .judul{
        margin-left: 0px;
    }

    #chat .body-rating .panel .ket1{
        font-size:23px;
    }   

    #chat .body-rating .panel .ket2{
        font-size:25px;
        font-weight:600;
    }

    #chat .body-rating .panel .ket3{
        font-size:18px;
    }

    #chat .body-rating .panel .ket4{
        font-size:19px;
    }

    #chat .body-rating .panel .bintang a{
        font-size:50px;
    }
    #chat #panel_kiri{
        display:none;
    }

    #chat .body-rating .dokter-penulis-resep .pnl table td{
        font-size:18px;
    }

    #chat .body-rating .btn-full{
        font-size: 25px;
    }

    #shop .spesial{
        padding-top: 1px;
    }
}

/* =========================================================
   OKEKLINIK / FARMAMEDIS CLEAN UI OVERRIDES
   Safe drop-in: keeps legacy selectors, fixes spacing, color,
   sidebar/table/modal/form chaos without removing old features.
   ========================================================= */
:root{
  --ok-primary:#00B7C6;
  --ok-primary-dark:#078896;
  --ok-primary-soft:#E9FBFD;
  --ok-secondary:#31D0DA;
  --ok-accent:#0EA5B7;
  --ok-success:#22A06B;
  --ok-danger:#E5484D;
  --ok-warning:#F59E0B;
  --ok-text:#12383D;
  --ok-muted:#6B7B80;
  --ok-border:#D8EEF0;
  --ok-bg:#F7FCFD;
  --ok-card:#FFFFFF;
  --ok-shadow:0 14px 34px rgba(9,96,107,.10);
  --ok-shadow-soft:0 8px 20px rgba(9,96,107,.08);
  --ok-radius:18px;
  --ok-radius-sm:12px;
  --col1:var(--ok-primary);
  --col2:var(--ok-secondary);
}

html{scroll-behavior:smooth;}
body{
  font-family:'Roboto','Inter','Nunito',Arial,sans-serif !important;
  color:var(--ok-text);
  background:
    radial-gradient(circle at top left, rgba(0,183,198,.08), transparent 28%),
    linear-gradient(180deg,#F8FEFF 0%,#FFFFFF 45%,#F7FCFD 100%) !important;
}
a{color:var(--ok-primary-dark);transition:.2s ease;}
a:hover{color:var(--ok-primary);text-decoration:none !important;}

.color-sc1,.bg-primary,.btn-primary{background:linear-gradient(135deg,var(--ok-primary),var(--ok-secondary)) !important;color:#fff !important;border-color:var(--ok-primary) !important;}
.color-sc2,.btn-info{background:linear-gradient(135deg,#0895A4,var(--ok-primary)) !important;color:#fff !important;border-color:var(--ok-primary) !important;}
.btn{border-radius:999px !important;font-weight:700;box-shadow:none;transition:.2s ease;}
.btn:hover{transform:translateY(-1px);box-shadow:var(--ok-shadow-soft);}
.btn-outline-primary,.btn-outline-info{color:var(--ok-primary-dark) !important;border-color:var(--ok-primary) !important;background:#fff !important;}
.btn-outline-primary:hover,.btn-outline-info:hover{background:linear-gradient(135deg,var(--ok-primary),var(--ok-secondary)) !important;color:#fff !important;}
.btn-danger{background:linear-gradient(135deg,#E5484D,#F87171) !important;border-color:#E5484D !important;color:#fff !important;}
.btn-success{background:linear-gradient(135deg,#22A06B,#48C78E) !important;border-color:#22A06B !important;color:#fff !important;}
.btn-warning{background:linear-gradient(135deg,#F59E0B,#FBBF24) !important;border-color:#F59E0B !important;color:#1f2937 !important;}

.navbar,.bg-light{
  background:rgba(255,255,255,.94) !important;
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--ok-border) !important;
  box-shadow:0 10px 28px rgba(9,96,107,.06);
}
.navbar-brand{color:var(--ok-primary-dark) !important;font-weight:900;}
.navbar .nav-link{color:#24474D !important;font-weight:700;}
.navbar .nav-link:hover,.navbar .active>.nav-link{color:var(--ok-primary-dark) !important;border-color:var(--ok-primary) !important;}

.page-container{width:100%;max-width:1280px;margin:0 auto;padding:0 20px;}
.page-content{margin-top:70px;margin-left:240px;padding:22px;min-height:calc(100vh - 70px);}
.main-content,.card,.panel,.table-responsive{
  background:var(--ok-card);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius);
  box-shadow:var(--ok-shadow-soft);
}
.main-content{padding:20px;}
.card{overflow:hidden;}

.side-bar{
  position:fixed;top:60px;left:0;width:230px;height:calc(100vh - 60px);
  background:linear-gradient(180deg,#F0FCFD 0%,#FFFFFF 100%) !important;
  border-right:1px solid var(--ok-border) !important;
  box-shadow:12px 0 28px rgba(9,96,107,.06);
  overflow-y:auto;scrollbar-width:thin;z-index:1020;
}
.side-bar::-webkit-scrollbar{width:6px}.side-bar::-webkit-scrollbar-thumb{background:rgba(0,183,198,.35);border-radius:999px}
.side-bar ul{padding:10px 8px !important;margin:0 !important;}
.side-bar ul li{border:0 !important;list-style:none;margin:4px 0;border-radius:14px;overflow:hidden;}
.side-bar ul li a,.side-bar .list-group-item{
  display:flex;align-items:center;gap:9px;padding:10px 12px !important;
  border:0 !important;border-radius:14px !important;background:transparent !important;
  color:#31575C !important;font-size:14px !important;font-weight:700;text-decoration:none !important;
}
.side-bar ul li a i{width:20px;text-align:center;color:var(--ok-primary-dark);}
.side-bar ul li a:hover,.side-bar .list-group-item:hover{background:#E9FBFD !important;color:var(--ok-primary-dark) !important;transform:translateX(2px);}
.side-bar ul li.active>a,.side-bar .active>.list-group-item{
  background:linear-gradient(135deg,var(--ok-primary),var(--ok-secondary)) !important;
  color:#fff !important;box-shadow:0 10px 22px rgba(0,183,198,.22);border-right:0 !important;
}
.side-bar ul li.active>a i{color:#fff;}
.sidebar-grup,.menu-label{
  color:#0B7883 !important;background:transparent !important;font-size:12px !important;font-weight:900 !important;
  text-transform:uppercase;letter-spacing:.4px;padding:12px 12px 6px !important;
}

.breadcrumb{background:#E9FBFD !important;border:1px solid var(--ok-border);border-radius:999px;padding:10px 16px;}
.breadcrumb,.breadcrumb a{color:#0B7883 !important;font-weight:700;}

.table{background:#fff;border-radius:16px;overflow:hidden;}
.table thead th,table .thead-dark th{
  background:linear-gradient(135deg,#E9FBFD,#FFFFFF) !important;
  color:#12383D !important;border-color:var(--ok-border) !important;font-weight:900;vertical-align:middle;
}
.table td,.table th,#grid td{vertical-align:middle !important;border-color:#EDF5F6 !important;}
.table tbody tr:hover{background:#F5FCFD;}
.dataTables_wrapper .row{align-items:center;}
.dataTables_filter input,.form-control,.custom-select,select,textarea{
  border:1px solid var(--ok-border) !important;border-radius:12px !important;color:var(--ok-text);
  background:#fff;box-shadow:none !important;
}
.form-control:focus,.custom-select:focus,select:focus,textarea:focus{
  border-color:var(--ok-primary) !important;box-shadow:0 0 0 3px rgba(0,183,198,.12) !important;outline:none;
}
.col-form-label,label{font-weight:800;color:#31575C;}
.input-group-text{background:#E9FBFD !important;border-color:var(--ok-border) !important;color:var(--ok-primary-dark) !important;font-weight:900;}
.select2-container--default .select2-selection--single,.select2-container .select2-selection--single{
  min-height:38px;border:1px solid var(--ok-border) !important;border-radius:12px !important;display:flex;align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:36px;color:var(--ok-text);}

.nav-tabs{border-bottom:1px solid var(--ok-border) !important;gap:8px;display:flex;flex-wrap:wrap;}
.nav-tabs .nav-link{border:1px solid var(--ok-border) !important;border-radius:999px !important;color:#31575C !important;background:#fff;font-weight:800;margin-bottom:8px;}
.nav-tabs .nav-link.active{background:linear-gradient(135deg,var(--ok-primary),var(--ok-secondary)) !important;color:#fff !important;border-color:var(--ok-primary) !important;box-shadow:0 8px 18px rgba(0,183,198,.16);}
.tab-content{background:#fff;border:1px solid var(--ok-border);border-radius:var(--ok-radius);padding:16px;box-shadow:var(--ok-shadow-soft);}

.modal{z-index:20050 !important;}
.modal-dialog{z-index:20060 !important;}
.modal-backdrop{z-index:20000 !important;}
.modal-content{border:0 !important;border-radius:24px !important;box-shadow:0 24px 80px rgba(9,96,107,.22) !important;overflow:hidden;}
.modal-body{padding:22px !important;}
.modal-body .judul{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ok-border);padding-bottom:12px;margin-bottom:16px;}
.modal-body .pertama h5,.modal-title{margin:0;color:var(--ok-text);font-weight:900;}
button.close2,.close2{background:rgba(0,183,198,.10) !important;color:var(--ok-primary-dark) !important;border:0 !important;border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;}

.alert{border-radius:16px !important;border:1px solid var(--ok-border) !important;box-shadow:var(--ok-shadow-soft);}
.alert-success{background:#ECFDF5 !important;color:#166534 !important;border-color:#BBF7D0 !important;}
.alert-danger{background:#FEF2F2 !important;color:#991B1B !important;border-color:#FECACA !important;}
.alert-info{background:#E9FBFD !important;color:#0B7883 !important;border-color:var(--ok-border) !important;}

.user-avatar{border-radius:50%;background:#fff;border:3px solid #E9FBFD;box-shadow:0 8px 18px rgba(9,96,107,.12);object-fit:cover;}
.badge-active,.badge-success{background:#DCFCE7 !important;color:#166534 !important;border-radius:999px;padding:5px 9px;}
.badge-inactive,.badge-danger{background:#FEE2E2 !important;color:#991B1B !important;border-radius:999px;padding:5px 9px;}

#dashboard-member .panel{border-radius:24px !important;border:1px solid var(--ok-border) !important;background:#fff !important;box-shadow:var(--ok-shadow) !important;overflow:hidden;}
#dashboard-member .panel-avatar{background:linear-gradient(135deg,#E9FBFD,#FFFFFF) !important;padding:20px;text-align:center;}
#dashboard-member .panel-profile{padding:18px !important;color:var(--ok-text);}

@media(max-width:991px){
  .side-bar{position:relative;top:auto;width:100%;height:auto;max-height:none;}
  .page-content{margin-left:0;margin-top:10px;padding:14px;}
  .page-container{padding:0 12px;}
  .main-content{padding:14px;}
}
@media(max-width:767px){
  .btn{white-space:normal;}
  .table-responsive{border-radius:14px;}
  .modal-body{padding:16px !important;}
}