/* NEW AEM COMPONENTS **********/
@font-face {
    font-family: Glyphicons Halflings;
    font-style: normal;
    font-weight: 400;
    src: url(/misc/fonts/glyphicons-halflings-regular.woff);
}
/* NEW VIDEO PLAYER OVERRIDES **********/

.video-container.embed-container iframe {
	border: 0 none !important;
}

/* OLD VIDEO PLAYER OVERRIDES **********/

.kh-video-container {
	position: relative;
}

/* TABLES ********************/

/* KidsHealth Table - common */
.khTable, .kh_art_tabs_2 table {
    border: 4px;
    width: 100%;
    table-layout: fixed;
    margin-bottom: 2rem;
}

.khTable caption {
    text-align: left;
    font-weight: bold;
    font-size: 1em;
}

.khTable td, .khTable th, .kh_art_tabs_2 table td, .kh_art_tabs_2 table th {
    padding: 5px;
    border: 1px solid #000 !important;
    font-weight: normal;;
}

/* Table cell alignment (added to td or tr) */
.khTable td.khtd-left, .khTable th.khtd-left, .khTable tr.khtr-left td, .khTable tr.khtr-left th {
	text-align: left;
}
.khTable td.khtd-right, .khTable th.khtd-right, .khTable tr.khtr-right td, .khTable tr.khtr-right th {
	text-align: right;
}
.khTable td.khtd-center, .khTable th.khtd-center, .khTable tr.khtr-center td, .khTable tr.khtr-center th {
	text-align: center;
}
.khTable td.khtd-top, .khTable th.khtd-top, .khTable tr.khtr-top td, .khTable tr.khtr-top th {
	vertical-align: top;
}
.khTable td.khtd-middle, .khTable th.khtd-middle, .khTable tr.khtr-middle td, .khTable tr.khtr-middle th {
	vertical-align: middle;
}
.khTable td.khtd-bottom, .khTable th.khtd-bottom, .khTable tr.khtr-bottom td, .khTable tr.khtr-bottom th {
	vertical-align: bottom;
}
/* Table cell alignment (added to whole table) */
.khTable.kht-left tr td, .khTable.kht-left tr th {
	text-align: left;
}
.khTable.kht-right tr td, .khTable.kht-right tr th {
	text-align: right;
}
.khTable.kht-center tr td, .khTable.kht-center tr th {
	text-align: center;
}

/* Table Themes */
/* common */

.khTable tr th.cq-RichText-hiddenHeader--editing {
    border: 0 none !important;
    background: white !important;
}

.khTable tr td, .khTable tr th, .kh_art_tabs_2 table tr td, .kh_art_tabs_2 table tr th {
	border: 1px solid #fff !important;
}
.khTable tr th, .kh_art_tabs_2 table tr th {
	color: #fff !important;
}
/* Ocean and Grey */
.khTable.kht-khOceanBlue-Gray tr th {
	background-color: #3f70b1 !important;
}

/* background color for old tables... I've added some styles to old tables but 
want to be able to differentiate old from new */
.kh_art_tabs_2 table tr th {
	background-color: #789;
}

.khTable.kht-khOceanBlue-Gray.kht-highlightOdd tbody tr:nth-child(odd) {
    background: #f3f3f4 !important;
}

/* Navy and Blue */
.khTable.kht-khNavyBlue-Blue tr th {
	background-color: #036 !important;
}

.khTable.kht-khNavyBlue-Blue.kht-highlightOdd tbody tr:nth-child(odd) {
    background: #f0f6fa !important;
}

/* Ocean and Blue */
.khTable.kht-khOceanBlue-Blue tr th {
	background-color: #3f70b1 !important;
}

.khTable.kht-khOceanBlue-Blue.kht-highlightOdd tbody tr:nth-child(odd) {
    background: #f0f6fa !important;
}

/* Navy and Grey */
.khTable.kht-khNavyBlue-Gray tr th {
	background-color: #036 !important;
}

.khTable.kht-khNavyBlue-Gray.kht-highlightOdd tbody tr:nth-child(odd) {
    background: #f3f3f4 !important;
}

/* end table themes */

.khTable tr td span.strikethrough {
      text-decoration:line-through;
  }

th.cq-RichText-hiddenHeader--editing{
    border: 0 none !important;
    background: transparent !important;
    color:white !important;
    font-size: 0;
}

.valign-middle{
  vertical-align:middle;
}

.valign-bottom{
  vertical-align:bottom;
}

.valign-top{
  vertical-align:top;	
}

.khTable tr td{
	word-break: break-word;
}

table.khTable a {
    background: transparent !important;
}

/* end tables */

/* buttons */
#khcontent a.kh-button {
	display: block;
	width: 200px;
	padding: 9pt;
	box-sizing: border-box;
	box-shadow: 1px 1px 5px 0 rgba(0,0,0,.32);
	text-decoration: none;
	font-weight: 400;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	font-size: 18px;
	position: relative;
	text-align: center!important;
}

#khcontent a.kh-button.khb-center {
	text-align: center;
}

#khcontent a.kh-button.khb-rounded {
	border-radius: 12px;
}

#khcontent a.kh-button.white {
	background-color: #fff;
	color: #3f70b1;
}



/* button themes */
#khcontent .khb-right {
    float: right;
    margin-left: 9pt;
    margin-top: 4px;
}
#khcontent .khb-left {
    float: left;
    margin-right: 9pt;
    margin-top: 4px;
}
#khcontent .khb-center {
    margin: 10px auto;
}
#khcontent .kh-btn-general .wfbb {
    background: #fff !important;
    color: #3f70b1 !important;
    border: 1px solid;
}
#khcontent .kh-btn-general .obf {
    background: #3f70b1 !important;
    color: #fff !important;
    border: 0;
}
#khcontent .kh-btn-general .nbf {
    background: #036 !important;
    color: #fff !important;
    border: 0;
}
#khcontent .kh-btn-general .gf {
    background: #03816e !important;
    color: #fff !important;
    border: 0;
}
#khcontent .kh-btn-general .tf {
    background: #07808d !important;
    color: #fff !important;
    border: 0;
}
#khcontent .kh-btn-general .pff {
    background: #9e1f63 !important;
    color: #fff !important;
    border: 0;
}
#khcontent .kh-btn-general .wfgb {
    background: #fff !important;
    color: #03816e !important;
    border: 1px solid;
}
#khcontent .kh-btn-general .wftb {
    background: #fff !important;
    color: #07808d !important;
    border: 1px solid;
}
#khcontent .kh-btn-general .wfpfb {
    background: #fff !important;
    color: #9e1f63 !important;
    border: 1px solid;
}
#khcontent .kh-btn-general .white {
    background: #fff !important;
    color: #3f70b1 !important;
    border: 0 none;
}

/* button icons */
#khcontent .kh-srtext {
	position: absolute;
	clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.khglyphy {
    font-family: 'Glyphicons Halflings';
    margin-left: 10px;
    width: 30px;
    height: 30px;
    font-size: 0.8em;
}

.newwindowiconforform:before, .rightarrowiconforform:before, .leftarrowiconforform:before, .newphonearrowiconforform:before, .educationiconforform:before {
	font-family: 'Glyphicons Halflings';
} 

.newwindowiconforform:before {
    content: "\E164\FE0E";
    
}
.rightarrowiconforform:before {
    content: "\e250\FE0E";
}
.leftarrowiconforform:before {
    content: "\e251\FE0E";
}
.newphonearrowiconforform:before {
    content: "\e145\FE0E";
}
.educationiconforform:before {
    content: "\e233\FE0E";
}

/* pregnancy calendar specific, added 7/13/21 */

#khcontent .kh-pregnancy-calendar {
	width: 100% !important;
	max-width: 600px !important;
	margin: 16px auto 20px auto !important;
	clear: both !important;
}

#khcontent .kh-pregnancy-calendar-topbar, #khcontent .kh-pregnancy-calendar-topbar strong {
	color: #fff !important;
}

#khcontent .kh-pregnancy-calendar ul {
	width: 100% !important;
	min-width: 100% !important;
	margin: 0 auto !important;
	padding: 10px 0 10px 0!important;
}

#khcontent .kh-pregnancy-calendar ul li {
	margin-left: 15px !important;
	background: transparent;
}

#khcontent .kh-pregnancy-calendar ul li a {
	text-decoration: none !important;
	font-family: helvetica, arial, sans-serif !important;
	line-height: 2 !important;
	font-size: 16px !important;
	text-align: center !important;
	border: 0;
}

#khcontent .kh-pregnancy-calendar ul li.kh-pregnancy-calendar-days-t1 a {
	color: #bd5b27 !important;
}

#khcontent .kh-pregnancy-calendar ul li.kh-pregnancy-calendar-days-t2 a {
	color: #777778 !important;
}

#khcontent .kh-pregnancy-calendar ul li.kh-pregnancy-calendar-days-t3 a {
	color: #0e829f !important;
}

#khcontent .kh-pregnancy-calendar ul li a.kh-pregnancy-calendar-days-active {
	color: #fff !important;
}

#khcontent .kh-pregnancy-calendar ul li a:hover, #khcontent .kh-pregnancy-calendar ul li a:focus {
	background-color: #eee !important;
	border: 1px solid #999 !important;
}

#khcontent .kh-pregnancy-calendar-trimesters ul {
	margin-bottom: 0 !important;
}

#khcontent .kh-pregnancy-calendar-trimesters ul li {
	
	font-size: 12px !important;
	font-family: helvetica, arial, sans-serif !important;
	height: initial !important;
	padding: initial !important;
	padding-left: 17px !important;
}

@media screen and (max-width: 692px) {
	#khcontent .kh-pregnancy-calendar {
		max-width: 546px !important;
	}
}

@media screen and (max-width: 628px) {
	#khcontent .kh-pregnancy-calendar {
		max-width: 480px !important;
	}
}

@media screen and (max-width: 564px) {
	#khcontent .kh-pregnancy-calendar {
		max-width: 430px !important;
	}
}

@media screen and (max-width: 502px) {
	#khcontent .kh-pregnancy-calendar {
		max-width: 366px !important;
		padding-bottom: 0 !important;
	}

	#khcontent .kh-pregnancy-calendar-trimesters ul {
		margin-bottom: 0 !important;
	}

	#khcontent .kh-pregnancy-calendar-trimesters ul li {
		display: block !important;
		margin-left: 20px !important;
		padding: 8px 0 0 0px !important;
	}

}

@media screen and (max-width: 440px) {
	#khcontent .kh-pregnancy-calendar {
		max-width: 320px !important;
		min-width: 200px !important;
	}
}

@media screen and (max-width: 376px) {
	#khcontent .kh-pregnancy-calendar {
		max-width: 260px !important;
	}
}

@media screen and (max-width: 374px) {
	
}
/* end preganancy calendar specific */

/* last minute fixes */

p.right img {
	float: right;
}

p.center_this {
	text-align: center;
}

a.right {
	float: right;
	margin-left: 2rem;
	margin-bottom: 2rem;
}

/* expert reviewers */
#kh_experts_nav {
	position: absolute;
	right: 0;
}


#kh_experts_nav ul {
	list-style-type: none !important;
	
}

#kh_experts_nav ul li {
	text-align: center;
	margin-bottom: .25rem;
}

#khcontent #kh_experts_nav ul li a {
	text-decoration: none;
	display: block;
	background: #06c !important;
	color: #fff !important;
	border-radius: 3px;
	width: 2.5rem;
	border: 1px solid;
}

#khcontent #kh_experts_nav ul li a:hover, #khcontent #kh_experts_nav ul li a:focus {
	background: #def !important;
	color: #06c !important;
}

.kh_experts_top a {
	width: 100%;
	text-align: center;
	display: block;
	margin: 2rem 0;
}

.kh_experts_center_all { /* unused class added to SOME reviewers, used here to prevent experts_nav from overlapping content */
	padding-right: 3rem;
}

.kh_right_letter_nav {
	padding-right:  3rem;
}

/* new slide show, feb 2023 */
/* ############################################################ */
/* ##################### START SLIDESHOWS ##################### */

.kh-slideshow-container {
	position: relative;
	margin-bottom: 3rem;
}

.kh-slide:not(.active-slide) {
	display: none;
}

.kh-slideshow-slide-image {
	border: 0 none !important;
}

.kh-slideshow-slide-image img {
	border-radius: 10px;
	width: 100%;
}

.kh-slideshow-slide-info {
	border: 1px solid #cbcdd1;
	border-radius: 10px;
	padding: 0rem;
	margin-top: 1rem;
}

h2.kh-slideshow-slide-title {
	background: #f3f6f9;
	padding: 1.6rem;
	border-radius: 10px 10px 0 0;
	font-size: 2rem;
	font-weight: 700;
}

.kh-slideshow-slide-info p {
	padding: 1.6rem 1.6rem .6rem 1.6rem;
	font-size: 1.8rem;
}

.kh-slideshow-slide-info p:last-child {
	margin-bottom: 1.5rem !important;
}

.kh-slideshow-count {
	position: absolute;
	top: 0;
	right: 0;
	background: rgba(13,63,107,1);
	color: #fff;
	min-width: 4rem;
	height: 4rem;
	border-radius: 0 10px 0 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 500;
	padding: 0 .75rem;
}

#slidenumber {
	margin-right: 2px;
	font-size: 2.125rem;
	font-weight: 600;
}

#totalcount {
	margin-left: 3px;
}

.kh-slideshow-buttons {
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	visibility:  hidden;
}

.kh-slideshow-buttons button {
	width: 4rem;
	height: 5rem;
	background-color: rgba(13,63,107,1);
	border-style: solid;
	border-color: rgba(255,255,255,1);
	background-size: 1.2rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

.kh-slideshow-buttons button:hover,
.kh-slideshow-buttons button:focus {
	background-size: 1.4rem
}

button#kh-slideshow-prev {
	background-image: url(/images/n00/icons/carat-left-white.svg);
	background-position: 40% 50%;
	border-width: 1px 1px 1px 0;
	border-radius: 0 10px 10px 0;
}

button#kh-slideshow-next {
	background-image: url(/images/n00/icons/carat-white.svg);
	background-position: 60% 50%;
	border-width: 1px 0 1px 1px;
	border-radius: 10px 0 0 10px;
}

.kh-slideshow-footer {
	font-size: 1.4rem;
	text-align: right;
}

@media screen and (max-width: 600px) {
	.kh-slideshow-slide-info h2 {
		margin-bottom: 1.4rem
	}
	.kh-slideshow-slide-info p {
		font-size: 1.6rem;
	}
}

/* ####################### END SLIDESHOWS ##################### */
/* ############################################################ */