@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: #777;
    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;
    }
}