.recent-post {
	border: 1px solid #eee;
}

.recent-post th {
	height: 30px;
	padding-left: 10px;
}
.recent-post img {
	width: 75px;
	height: 75px;
	overflow: hidden;
	padding: 5px;
	border: 1px dashed #ccc;
	margin-left: 5px;
	margin-right: 8px;
	margin-top: 5px;
	float: left;
}

.recent-post a{
	color: black;
}
.recent-post h1 {
	font-size: 16px;
	margin-top: 8px;
	font-weight: bold;
	margin-bottom: 0;
	height: 22px;
	overflow: hidden;
}

.recent-post p {
	font-size: 13px;
	height: 42px;
	overflow: hidden;
}


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

.detailberita h1{
	font-size: 40px;
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 30px;
	margin-bottom: 0;
	/*color: #636363;*/
}

.detailberita img{
	margin-bottom: 10px;
}

/*awal css komen*/

.komen-lawan {
	width: 100%;
	border: 1px solid #eee;
	height: 97px;
	margin-bottom: 	5px;
}

.komentar .col-8 {
	padding: 0;
}

.komen-lawan img{
	width: 60px;
	height: 60px;
	border-radius: 120px;
	float: left;
	margin: 10px 10px 10px 10px;
}

.komen-lawan h1{
	margin-top: 10px;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 0;
	text-transform: uppercase;
}
.komen-lawan p{
	height: 70px;
	overflow:  hidden;
	padding-right: 10px;
}

.komen-lawan textarea {
	margin-top: 15px;
	width: 70%;
	resize: none;
  	height: 40px;
}

/*komenlawan v2*/
.komen-lawan2 {
  width: 100%;
  border: 1px solid #eee;
  height: 83px;
  margin-bottom:  5px;
}



.komen-lawan2 img{
  width: 60px;
  height: 60px;
  border-radius: 120px;
  float: left;
  margin: 10px 10px 10px 10px;
}

.komen-lawan2 h1{
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  text-transform: uppercase;
}
.komen-lawan2 p{
  height: 70px;
  overflow:  hidden;
  padding-right: 10px;
}

.komen-lawan2 textarea {
  margin-top: 15px;
  width: 70%;
  resize: none;
  height: 40px;
}

/*Akhir CSS Komen*/
.spoiler_chat {
	max-height: 28px;
	width: auto;
	overflow: hidden;
}



.bungkus-notif {
	height: 400px;
	overflow-x: hidden;
	overflow-y: scroll;
}

.bungkus-notif::-webkit-scrollbar {
	width: 10px;
}

.bungkus-notif::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: rgba(0,0,0,.1);
}

a:hover {
	text-decoration: none;	
}

.kategori {
	text-align: center;
}

.gambar-bulat {
	width: 200px;
	height: 200px;
	border-radius: 	120px;
}

.img_notif {
	width: 80px;
	height: 80px;
	border-radius: 120px;
	margin-left: 17px;
}
.putih {
	color: #fff;
}


/*PRIMARY WARNA KONSULDOC*/
.hijau {
	background-color: #13BFB1;
}

.text-hijau {
	color: #13BFB1;
}
/* Navbar */
.navbar {
	position: relative;
	z-index: 1;

}
.navbar-brand {
	font-family: viga;
	font-size: 32px;
}

/*Workingspace*/
.workingspace {
	margin-top: 80px;
	text-align : center;
}

.workingspace img {
	border-radius: 12px;
	width: 536px;
	height: 371px;
}

.workingspace h3 {
	font-size: 52px;
	font-weight: 200;
	text-transform: uppercase;
	margin-top: 30px;
	color: #636363;
}

.workingspace h3 span {
	font-weight: 500;
}

.workingspace p {
	font-size: 18px;
	color: #ACACAC;
	font-weight: 200;
	height: 60px;
	margin: 30px 0 ;
	overflow: hidden;
}

/*Testimonial*/
.testimonial {
	margin-top: 100px;
}

.testimonial h5 {
	text-align: center;
	font-weight: 200;
	font-size: 24px;
	font-style: italic;

}

.testimonial figure img {
	width: 60px;
	margin: 20px 10px 10px;
	height: auto;
	opacity: 0,6;
}

.testimonial figure img.utama {
	width: 90px;
	height: auto;
	opacity: 1;
	margin-top: 5px;
}

.testimonial figure h5 {
	font-size: 16px;
	font-weight: bold;
	font-style: normal;
	color: #1C2C5D;
}

.testimonial figure p {
	font-size: 12px;
	color: #ACACAC;
	margin-top: -5px;
	text-align: center;

}

/* Unitlity */
.tombol {
	text-transform: uppercase;
	border-radius: 40px; 
	font-weight: bold;
}
.tombolpost {
	margin-top: 5px;
	text-transform: uppercase;
	border-radius: 40px; 
	font-weight: bold;
	font-size: 10px;
	float: right;
	margin-right: 10px;
}
.tombol2 {
	margin-top: 10px;
	text-transform: uppercase;
	border-radius: 40px; 
	font-weight: bold;
	margin-right: 20px;
	width: 200px;
}



.btn-secondary {
	background-color: #13BFB1;
	border-color:#13BFB1;
}

.btn-outline-light:hover {
	color: #13BFB1;
}

.info-panel {
	box-shadow: 0 3px 20px rgba(0,0,0,0.16);
	border-radius:12px; 
	width: 250px;
	height: 250px;
	background-color: white;
	padding: 30px;
	z-index: 1;
	text-align: center;
}
.info-panel img {
	width: 80px;
	height: 80px;
	margin-top: 20px; /*Tambahan Henry*/
	margin-bottom: 20px;
}

.info-panel h4 {
	margin-top: 10px; /*Tambahan Henry*/
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	color: #13BFB1;

}

.ashiapp a{
	text-decoration: none;
}

.info-panel p {
	font-size: 14px;
	color: #ACACAC;
	font-weight: 200;
}
/* Jumbotron */
.jumbotron {
	background-image: url(img/bg.jpg);
	background-size: cover; 
	height: 400px;
	text-align:center;
	/*background-position: 0px -40px;*/
	background-repeat: no-repeat;
	z-index: -1;
	position: relative;

}

.jumbotron .container {
	z-index: 1;
	position: relative;
}



.jumbotron .display-4 {
	color: white;
	margin-bottom: 30px;
	margin-top: 60px;
	font-weight: 200;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	font-size: 35px;


}
.jumbotron .display-4 span {
	font-weight: 500;
}

.jumbotron::after {
	content: '';
	display: block;
	width: 80%;
	height: 100%;
	background-image: linear-gradient(to left, rgba(0,0,0,0), rgba(19,191,177,0.4));
	position: absolute;
	bottom: 0;
}

/*footer*/
.footer {
	margin-top: 100px;
}
.footer p {
	color: #ACACAC;
	font-size: 18px;
}

/*gambar dokter*/

.doctor img{
	margin-top: 70px;
	width: 360px;

}

.maelee {
	margin-top: 15px;
}

.berita img {
	margin-right: 15px;
	width: 133px;
	height: 133px;
}

.berita h3 {
	color: #636363;
	font-weight: 600;
}

.berita p {
	color: #ACACAC;
	font-size: 14px;
	height: 46px;
	overflow: hidden;
}

.titleberita {
	margin-top: 50px;
	margin-left: 0px;
	border-left: 3px solid #13BFB1;
}
.titleberita h1 {
	text-transform: uppercase;
	font-size: 24px;
	color: #13BFB1;
}



.titlepanel {
	margin-top: 50px;
	margin-left: 0px;
	border-left: 3px solid #636363;
	margin-bottom: 15px;
}
.titlepanel h1 {
	text-transform: uppercase;
	font-size: 28px;
	color: #636363;
}


.ourdoctor {
	
}

.ourdoctor h4{
	margin-top: 8px;
	color: #636363;
	text-align: center;
	font-size: 18px;
}

.ourdoctor p{
	margin-top: -5px;
	color: #13BFB1;
	text-align: center;
	font-size: 15px;
	/*background-color: yellow;*/
	width: 253px;
	height: 25px;
	overflow: hidden;
}

.ourdoctor::after {
	content: '';
	display: block;
	border-bottom: 4px solid #13BFB1; 
	width:100%;
	margin-top: -10px;
	}
.ourdoctortempat {
	width: 255px;
	height: 270px;
	overflow-y: hidden ! important;
    overflow-x: hidden ! important;
}
.ourdoctor img {
	width: 255px; /*ukuran 2x lipat dari tempat*/
	height: 100%;
}
.nextdoc {
	width: 25px;
	height: 25px;
	margin-left: 5px;
	margin-top: 12px;
}

/* HALAMAN PILIH DOKTER */
.ourdoctor2 {
	
}

.ourdoctor2 h4{
	margin-top: 10px;
	color: #333;
	text-align: center;
	font-size: 20px;
	font-weight: 590;
}

.ourdoctor2 p{
	color: #13BFB1;
	text-align: center;
	font-size: 18px;
	margin-top: -3px;
}

.ourdoctor2 button{
	margin-top: -5px;
}

.ourdoctortempat2 {
	width: 255px;
	height: 270px;
	overflow-y: hidden ! important;
    overflow-x: hidden ! important;
}
.ourdoctor2 img {
	width: 255px; /*ukuran 2x lipat dari tempat*/
	height: 100%;
}

.edit_profile {
	box-shadow: 0 3px 20px rgba(0,0,0,0.16);
	border-radius:10px; 
	background-color: white;
	text-align: center;
	padding: 30px;
}



.edit_profile_image {

	width: 260px;
	height: 260px;
	border-radius: 140px; 	
}


.edit_profile p {
	margin-top: -5px;
}

.label_profile {
	background-color: #13BFB1;
	text-transform: lowercase;
	text-align: center;	
	font-size: 	16px;
	margin-top: 10px;
}

.nama_profile {
	margin-bottom: 	20px;
	font-size: 32px;
}

.tombol_edit_profile {
	margin-top: 8px;
}

.icon_kue {
	width: 	25px;
	height: 25px;
}

.p_class {
	display: inline-block;
	margin-left: 5px;	
}

.table_privacy {
	margin-top: 30px;
}

.barThead {
	background-color: #13BFB1;
	color: #fff;
	text-align: center;
}
.table_spesialis {
	margin-top: 12px;
}

.admin_panel {
	text-align: center;
	margin-top: 10px; 
	height: 200px;
	border-radius: 12px; 
	padding: 30px;
	box-shadow: 0 3px 20px rgba(0,0,0,0.16);
}

.admin_panel h1{
	margin-top: 20px;
	font-size: 50px;
}

.admin_panel p{
	margin-top: -10px;
	font-size: 22px;
	color: #13BFB1;
}

.admin_panel p{
	margin-top: -10px;
	font-size: 22px;
	color: #13BFB1;
}
.admin_panel img{
	margin-left: 10px;
}

/* OVERLAY UP TO DOWN */
.kotaku {
  position: relative;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color:rgba(9,188,201,0.4);
  opacity: 5;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.kotaku:hover .overlay {
  bottom: 0;
  height: 100%;
}
.kotaku image {
  display: block;
  width: 100%;
  height: auto;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.notification-box .tombol {
	margin-top: 3px;
	font-size: 10px;
}


/* DESKTOP VERSION */
@media (min-width: 992px) {
	.navbar-brand, .nav-link {
		color: white !important;
		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
	}
	.nav-link {
		text-transform: uppercase;
		margin-right: 30px; 
		font-weight: bold;

	}

	.nav-link:hover::after {
		content: '';
		display: block;
		border-bottom: 3px solid #13BFB1; 
		width:50%;
		margin: auto;
		padding-bottom: 5px;
		margin-bottom: -8px;
	}

	.jumbotron {
		margin-top: -75px;
		height: 641px;
	}
	.jumbotron .display-4 {
		font-size: 40px;
		margin-top: 220px;
		font-weight: 500;
	}

	.workingspace {
		text-align: left;
		
	}

	.kategori {
		text-align: left;
	}

	.info-panel {
		box-shadow: 0 3px 20px rgba(0,0,0,0.16);
		border-radius:12px; 
		width: 220px;
		height: 220px;
		margin-top: -110px;
		background-color: white;
		padding: 30px;
		z-index: 1;
	}

	.testimonial h5 {
		font-size: 32px;

	}

	.doctor img{
	margin-top: 209px;
	width: 389px;
	}

	.tombol2 {
	margin-top: 10px;
	text-transform: uppercase;
	border-radius: 40px; 
	font-weight: bold;
	width: 200px;
	}

	.edit_profile {
	text-align: left;
	}

	/*awal css komen*/

.komen-lawan {
	width: 100%;
	border: 1px solid #eee;
	height:auto !important;        /* for IE as it does not support min-height */

}

.komentar .col-8 {
	padding: 0;
}

.komen-lawan img{
	width: 60px;
	height: 60px;
	border-radius: 120px;
	float: left;
	margin: 10px 10px 10px 10px;
}

.komen-lawan h1{
	margin-top: 10px;
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 0;
	text-transform: uppercase;
}
.komen-lawan p{
	height: 70px;
	overflow: hidden;
}

.komen-lawan textarea {
	margin-top: 15px;
	width: 85%;
	resize: none;
  	height: 40px;
}


/*Akhir CSS Komen*/

.info-panel h4 {
	margin-top: 0; /*Tambahan Henry*/
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	color: #13BFB1;

}

.info-panel img {
    width: 80px;
    height: 80px;
    margin-top: 20px;
    margin-bottom: 10px;

}
}

/* DESKTOP VERSION FULL HD*/
@media (min-width: 1200px) {
	.komen-lawan textarea {
	margin-top: 15px;
	width: 88%;
	resize: none;
  	height: 40px;
	}


	.info-panel {
	box-shadow: 0 3px 20px rgba(0,0,0,0.16);
	border-radius:12px; 
	width: 250px;
	height: 250px;
	margin-top: -100px;
	background-color: white;
	padding: 30px;
	z-index: 1;
	}

	.doctor img{
	margin-top: 133px;
	width: 389px;
	}


}


@media (max-width: 575.98px) and (max-width: 767.98px) { 
	.doctor img{
	display: none;
	}



 }

 @media (max-width: 767.98px) and (max-width: 867.98px) { 
	.doctor img{
	display: none;
	}


}

 



.dropdown-menu{
  top: 60px;
  right: 0px;
  left: unset;
  width: 460px;
  box-shadow: 0px 5px 7px -1px #c1c1c1;
  padding-bottom: 0px;
  padding: 0px;
  z-index: 3;
  position: relative;
}
.dropdown-menu:before{
  content: "";
  position: absolute;
  top: -20px;
  right: 12px;
  border:10px solid #13BFB1;
  border-color: transparent transparent #13BFB1 transparent;

}
.head{
  padding:5px 15px;
  border-radius: 3px 3px 0px 0px;

}
.footer{
  padding:5px 15px;
  border-radius: 0px 0px 3px 3px; 
}
.notification-box:nth-of-type(odd){
  padding: 10px 0px; 
  background: white;
}

.notification-box:nth-of-type(even){
  padding: 10px 0px; 
  background: #f1f1f1;
}


.count-text {
	margin-top: -1px;
}
.bg-gray{
  background-color: #eee;
}
@media (max-width: 640px) {
    .dropdown-menu{
      top: 50px;
      left: -16px;  
      width: 290px;
    } 
    .nav{
      display: block;
    }
    .nav .nav-item,.nav .nav-item a{
      padding-left: 0px;
    }
    .message{
      font-size: 13px;
    }
}






.bell:hover {
  -webkit-animation: ring 4s .7s ease-in-out infinite;
  -webkit-transform-origin: 50% 4px;
  -moz-animation: ring 4s .7s ease-in-out infinite;
  -moz-transform-origin: 50% 4px;
  animation: ring 4s .7s ease-in-out infinite;
  transform-origin: 50% 4px;
}

@-webkit-keyframes ring {
  0% { -webkit-transform: rotateZ(0); }
  1% { -webkit-transform: rotateZ(30deg); }
  3% { -webkit-transform: rotateZ(-28deg); }
  5% { -webkit-transform: rotateZ(34deg); }
  7% { -webkit-transform: rotateZ(-32deg); }
  9% { -webkit-transform: rotateZ(30deg); }
  11% { -webkit-transform: rotateZ(-28deg); }
  13% { -webkit-transform: rotateZ(26deg); }
  15% { -webkit-transform: rotateZ(-24deg); }
  17% { -webkit-transform: rotateZ(22deg); }
  19% { -webkit-transform: rotateZ(-20deg); }
  21% { -webkit-transform: rotateZ(18deg); }
  23% { -webkit-transform: rotateZ(-16deg); }
  25% { -webkit-transform: rotateZ(14deg); }
  27% { -webkit-transform: rotateZ(-12deg); }
  29% { -webkit-transform: rotateZ(10deg); }
  31% { -webkit-transform: rotateZ(-8deg); }
  33% { -webkit-transform: rotateZ(6deg); }
  35% { -webkit-transform: rotateZ(-4deg); }
  37% { -webkit-transform: rotateZ(2deg); }
  39% { -webkit-transform: rotateZ(-1deg); }
  41% { -webkit-transform: rotateZ(1deg); }

  43% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
  0% { -moz-transform: rotate(0); }
  1% { -moz-transform: rotate(30deg); }
  3% { -moz-transform: rotate(-28deg); }
  5% { -moz-transform: rotate(34deg); }
  7% { -moz-transform: rotate(-32deg); }
  9% { -moz-transform: rotate(30deg); }
  11% { -moz-transform: rotate(-28deg); }
  13% { -moz-transform: rotate(26deg); }
  15% { -moz-transform: rotate(-24deg); }
  17% { -moz-transform: rotate(22deg); }
  19% { -moz-transform: rotate(-20deg); }
  21% { -moz-transform: rotate(18deg); }
  23% { -moz-transform: rotate(-16deg); }
  25% { -moz-transform: rotate(14deg); }
  27% { -moz-transform: rotate(-12deg); }
  29% { -moz-transform: rotate(10deg); }
  31% { -moz-transform: rotate(-8deg); }
  33% { -moz-transform: rotate(6deg); }
  35% { -moz-transform: rotate(-4deg); }
  37% { -moz-transform: rotate(2deg); }
  39% { -moz-transform: rotate(-1deg); }
  41% { -moz-transform: rotate(1deg); }

  43% { -moz-transform: rotate(0); }
  100% { -moz-transform: rotate(0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }

  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}