@import url("/WOMENSHEALTH/assets/formation/formation-scoped-ts.css") all;

@import url('/WOMENSHEALTH/styles/va-product-catalog.css') all;

/*
                File            : /[sitename]/styles/site-styles.css
                Description     : Styles available for use across the web site.
*/
<style type="text/css" media="screen,print">
body{background:#C0C0C0;}

<style type="text/css" media="screen,print">
<!--
-->
</style><style type="text/css" media="screen,print">
<!--
-->
</style><style type="text/css" media="screen,print">
<!--
-->
</style><style type="text/css" media="screen">
<!--
#prBanner
                {display:none}
-->
</style><style type="text/css" media="print">
<!--
#prBanner
                {padding:0px;
                margin:0px;
                border:0px;
                position:relative}
#content-area-template-C-1
                {width:976px;
                margin:0}
#content-area-template-C-2
                {display:none}
#content-area-template-D-1
                {width:976px}
#content-area-template-D-2
                {display:none}
#content-area-template-D-3
                {width:976px}
#slideshow-wrapper
                {width:976px;
                text-align:center}
.slide
                {width:976px}
.slideImage-container
                {width:580px;
                margin:22px 198px 0px 198px;
                padding:0px}
#slideNavBar
                {display:none}
-->
</style>

#rightcol{
float:right;
}

#text2011{
float:left;
width:480px;
margin:auto;
padding:0;
background:#fff;
}

#textcontent{
width:480px;
padding:0;
margin-right:10px;
float:left;
font-family:helvetica, arial sans-serif;
color:#6D6E71;
line-height:20pt;
}

#textcontent a {
text-decoration:underline;
color:#0b6cb2;
}

#smalltextleft{
font-size:110%;
color:#6D6E71;
width:480px;
float:left;
line-height:20pt;
}

#textcontent ul{
font-size:90%;
}

#fontadjust{
color:#6D6E71;
font-size:110%;
width:100%;
}

.hr{
margin:3px 0 3px 0;
padding:0;
}

.medianav{
padding-left:14px;
margin:auto;
float:right;
}


.titletext{
font-size:130%;
color:#0b6cb2;
}

</style>



/* -- INTERIM SITE REVISION DECLARATIONS BELOW (2021-10-26) -- */

/* CONTACT INFO BLOCK */

p.poc {
	margin-bottom: 2em;
	padding-bottom: 0px;
	padding-left: 1em !important;
	border-left: 2px solid #efefef !important;
}
p.poc:last-of-type {
	margin-bottom: 2em;
}

p.poc > span.poc-name,
p.poc > span.poc-honorifics {font-weight: bold;}



/* SCALING VIDEO CONTAINER
-- Creates a video player container that scales per display size.
-- Uses vw as the reference measurement. Then divides it by 16 or 9 depending on the dimension.
-- Then either multiplies or divides (depending on the dimension) by the quotient of 9/16 (or 0.5625).
-- This preserves the 16:9 ratio at all display sizes and lets the video player scale
   w/o exeeding the boundaries of the pagecontent container.
-- Assumes max width and height defined by template container, but lets it scale down as needed
*/
/*
iframe.three-col[src*="youtube.com"] {
  width: calc((720vw / 16) / 0.5625);
  height: calc((720vw / 9) * 0.5625);
  max-width: 490px;
  max-height: 275px;
  margin-top: 10px;
  margin-bottom: 12px;
}


iframe.two-col[src*="youtube.com"] {
  width: calc((720vw / 16) / 0.5625);
  height: calc((720vw / 9) * 0.5625);
  max-width: 660px;
  max-height: 372px;
  margin-top: 10px;
  margin-bottom: 12px;
}


@media only screen and (max-width: 950px) {

	#homeinnerContent iframe[src*="youtube.com"] {
	  max-width: 900px;
	  max-height: 506px;
	  width: calc((800vw / 16) / 0.5625);
	  height: calc((800vw / 9) * 0.5625);
	}

}
*/

/* END SCALING VIDEO CONTAINER */

/* FAQ CUSTOM STYLES */
/*
#faq {}

#faq ul.faq-toc {
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
	margin: 0 0 2em 1em;
	padding: 0;
}

#faq ul.faq-toc li {
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
	padding-bottom: 1em;
}

#faq ul.faq-toc li a {
	font-weight: bold;
}

#faq .faq-q {
	margin-top: 0;
	padding-top: 2em;
	border-top: 1px solid #ccc;
}

#faq .faq-q:before {
	display: inline-block;
	content: "Q:";
	color: #999;
	padding-right: 0.25em;
	font-weight: bold;
}

a.return-link {
	display: inline-block;
	width: auto;
	margin: 1em 0 0 0;
}
a.return-link:before {
	content: '\25B2 ';
  display: inline-block;
  padding: 0 0.5em 0 0;
	font-size: 0.75em;
}
*/

/* FOOTNOTE/DISCLAIMER */
/* Element used in pages where external links are present */
/*.footnote > * {margin: 0;padding: 0;font-size: 1em;color: #888;}*/


/* NESTED LIST CONTROLS */
ul li ul {margin-top:1em;}
ul li ul li {list-style: circle!important; font-size:inherit!important;}
ul li ul li ul li {list-style: square!important; font-size:inherit!important;}
ul li ul li ul li ul li {list-style: disc!important; font-size:inherit!important;}

/* -- END: INTERIM SITE REVISION DECLARATIONS -- */



* **************************************************
   NEW SITE STYLES (2022)
 ************************************************** */

/* FOOTNOTE/DISCLAIMER */
/* Element used in pages where external links are present */
[id$="innerContent"] .vads-c-footnote *,
[id$="innerContent"] .vads-c-footnote p,
[id$="innerContent"] .vads-c-footnote li,
[id$="innerContent"] #footnote p, 
[id$="innerContent"] #footnote li, 
[id$="innerContent"] #footnote p > *{
	margin: 0; 
	padding: 0; 
	font-size: 0.95em !important;
	color: #888;
}


[id$="innerContent"] {
	margin-top: 1rem !important;
}


[id$="innerContent"] .vads-c-module {
	/*padding: 1rem;
	background-color: #ededed;*/
	margin: 2rem 0 !important;
	padding: 1rem 1.2rem !important;
	border-top: 1px solid #f2f2f2;
	border-bottom: 1px solid #f2f2f2;
}

[id$="innerContent"] .vads-c-module + .vads-c-module {
	margin-top: -1rem !important;
	border-top: 0px;
}

[id$="innerContent"] p + .vads-c-module {
	margin-top: 0px !important;
}

[id$="innerContent"] .vads-u-product-feature {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

[id$="innerContent"] #i-belong.vads-u-product-feature h3 {
	flex-basis: 100%;
	order: 1;
	margin: 0 0 0.5rem 0;
	padding: 0;
	text-align: center;
}

[id$="innerContent"] #i-belong.vads-u-product-feature > a {
	flex-basis: 100%;
	order: 2;
}

[id$="innerContent"] #i-belong.vads-u-product-feature a img {
	width: 100%;
	height: auto;
}

[id$="innerContent"] #i-belong.vads-u-product-feature p {
	flex-basis: 100%;
	order: 3;
	margin: 0.5rem 0 0 0;
	padding: 0;
	font-weight: bold;
}


[id$="innerContent"] .vads-c-products {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	margin-bottom: 2rem;
}

[id$="innerContent"] [class^="vads-u-product"] {
	flex-basis: 48%;
	text-align: center;
}
[id$="innerContent"] [class^="vads-u-product"]:only-of-type {
	flex-basis: 100%;
}

[id$="innerContent"] [class^="vads-u-product"] a {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: 100%;
	padding: 8px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
}
[id$="innerContent"] [class^="vads-u-product"]:only-of-type a {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 100%;
	padding: 8px;
}

[id$="innerContent"] [class^="vads-u-product"] a span {
	width: 210px;
	height: 130px; /* calc(240px * (9 / 16)); */
	overflow: hidden;
	margin-bottom: 8px;
	margin-right: 0;
}

[id$="innerContent"] [class^="vads-u-product"] a span img {
	width: 110%;
	height: auto;
}

[id$="innerContent"] ol,
[id$="innerContent"] ol > li {
	list-style-type: decimal !important;
}


/* -- Home page icon list -- */
.va-icon-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

.va-icon-list > li {
  list-style: none;
  list-style-position: outside;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
  /* padding: 8pt; */
  border-bottom: 1px solid #f2f2f2;
}

.va-icon-list.two-col, .va-icon-list.three-col, .va-icon-list.four-col {
  flex-direction: row;
  flex-wrap: wrap;
}

.va-icon-list.two-col > li {flex-basis: 49%;}
.va-icon-list.three-col > li {flex-basis: 31%;}
.va-icon-list.four-col > li {flex-basis: 22%;}

.va-icon-list > li {
  list-style: none;
  list-style-position: outside;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
  /* padding: 8pt; */  /*-@-*/
  border-bottom: 1px solid #f2f2f2;
}

.va-icon-list.two-col, .va-icon-list.three-col, .va-icon-list.four-col {
  flex-direction: row;
  flex-wrap: wrap;
}

.va-icon-list.two-col > li {flex-basis: 49%;}
.va-icon-list.three-col > li {flex-basis: 31%;}
.va-icon-list.four-col > li {flex-basis: 22%;}

.va-icon-list > li > * {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: 8pt; /*-@-*/
}

.va-icon-list > li > * > *:first-child {
  flex-basis: 10%;  /*-@- from 22%*/
  border-radius: 50% 50%;
  align-self: flex-start;
}
.va-icon-list > li > * > *:last-child {
  flex-basis: 87%;  /*-@- from 75%*/
  font-size: 1em!important;
  font-weight: 800;
}

.va-icon-list > li > * > img:first-child {
  width: 10%;
  height: 10%;
}

/* graphic downloads layout design */
#innerContent .va-graphic-downloads-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

#innerContent .va-graphic-downloads-container .graphic-download-item {
	width: 230px;
	height: auto;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

#innerContent .va-graphic-downloads-container .graphic-download-item img {
	width: 100%;
	height: auto;
}
/* end */

@media screen and (max-width:950px) {
	.va-icon-list > li > * > *:last-child {font-size: 1.3em!important;}
}

@media screen and (max-width:768px) {

  .va-icon-list.two-col, .va-icon-list.three-col, .va-icon-list.four-col {flex-direction: column; flex-wrap: nowrap;}

  .va-icon-list.two-col > li, .va-icon-list.three-col > li, .va-icon-list.four-col > li {flex-basis:100%;}
  .va-icon-list > li > * > *:first-child {flex-basis: 12%;align-self:center;}
  .va-icon-list > li > * > *:last-child {flex-basis: 84%;}
  .va-icon-list > li > * > *:last-child {font-size: 1.2em!important;}
  #innerContent .va-graphic-downloads-container .graphic-download-item {width: 47%;}
}



a[class*="vads-c-action-link"] {background-image: none !important; padding-right:0!important;}


#innerContent h2:first-of-type {
	/*margin-top: 1rem;*/
}

#innerContent dl.va-on-this-page,
#innerContent va-on-this-page nav dl {
	width: 100%; /*40ch;*/
	border-bottom: 0px !important;
	margin-bottom: 1.5rem !important;
}

#innerContent dl.va-on-this-page dt,
#innerContent va-on-this-page nav dl dt {
	font-family:Bitter,Georgia,Cambria,Times New Roman,Times,serif;
	font-size: 1.5rem;
	font-weight: 800;
	line-height:1.3;
	margin-bottom: 0.5rem !important;
}

#innerContent dl.va-on-this-page dd a,
#innerContent va-on-this-page nav dl dd a {
	display: block;
	padding: 0.5rem 0.25rem;
	text-decoration: none;
}

#innerContent a>i.fa,
#innerContent a>i.fas {font-size: 0.75em !important;}

#homeinnerContent {padding-left: 0 !important; padding-right: 0 !important;}

[id$="innerContent"] .vads-c-headline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
}

[id$="innerContent"] .vads-c-headline > a {
	flex-basis: 100%;
	padding: 0.5rem 0;
	font-size: 1rem !important;
	font-weight: bold;
}

/* articles and blogs style */
[id$="innerContent"] .vads-c-content {
	border-bottom: 1px solid #666;
}

[id$="innerContent"] .vads-c-content > span {
	color: #666;
	padding: .1rem;
	margin: .1rem 0;
	display: inline-block;
}

[id$="innerContent"] .vads-c-content > h4 > a:before {content: '"';}
[id$="innerContent"] .vads-c-content > h4 > a::after {content: '"';}
/* end */

[id$="innerContent"] a.btn-download {
    display: table-cell !important;
    vertical-align: middle !important;
    width: 100%;
    margin: 2pt 0 !important;
    padding: 2pt 0 !important;
    background: none !important;
    border: none !important;
    padding: 4px !important;
    color: #0071bb;
    font-size: inherit !important;
    font-weight: bold !important;
    text-align: center !important;
    text-decoration: none !important;
}

[id$="innerContent"] .placeholder {
    color: #9c9c9c;
	font-weight: bold;
}

[id$="innerContent"] .usa-checklist  ul, [id$="innerContent"] li.usa-checklist > ol {

}

[id$="innerContent"] .usa-checklist  ul > li, [id$="innerContent"] li.usa-checklist > ol > li {
	margin-bottom: 1em;
	padding-left: 0.5em !important;
	list-style: disc !important;
	list-style-image: disc !important;
}



/* Video Player/IFRAME Display (Scaling)
-- Creates a video player container that scales per display size.
-- Uses vw as the reference measurement. Then divides it by 16 or 9 depending on the dimension.
-- Then either multiplies or divides (depending on the dimension) by the quotient of 9/16 (or 0.5625).
-- This preserves the 16:9 ratio at all display sizes and lets the video player scale
   w/o exeeding the boundaries of the pagecontent container.
-- Assumes max width and height defined by template container, but lets it scale down as needed
*/


[id$="innerContent"] .video-feature iframe {
	width: 100%;
	height: calc(480px * (9 / 16));
	margin-left: auto;
	margin-right: auto;
}

/* END SCALING VIDEO CONTAINER */


/* **************************************************
   SITE STYLES (2023)
 ************************************************** */

[id$="innerContent"] h3 > span.heading-short { font-size: inherit !important; }


/* To hide the required-but-non-essential element in the right column HTML widget */
.widget > div + span {display:none;}

/* ************************************************ */

@media screen and  (max-width:480px) {
	[id$="innerContent"] .she-wears-the-boots-headcontent {
		display: block !important;
		align-items: left;
	}

	[id$="innerContent"] .she-wears-the-boots-headcontent img {
		width: 100%;
	}
  	
  	#innerContent .va-graphic-downloads-container .graphic-download-item {
		width: 100% !important;
	}
}


@media only screen and (max-width: 950px) {

	[id$="innerContent"] .video-feature iframe {
		width: 100%;
		height: calc(100vw * (9 / 16));
		margin-left: auto;
		margin-right: auto;
	}
  
    [id$="innerContent"] #i-belong.vads-u-product-feature h3 {
		flex-basis: 100%;
		order: 1;
		margin: 0 0 0.5rem 0;
	}

	[id$="innerContent"] #i-belong.vads-u-product-feature > a {
		order: 2
	}

	[id$="innerContent"] #i-belong.vads-u-product-feature p {
		flex-basis: 100%;
		text-align: center;
	}

	[id$="innerContent"] .vads-c-products {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: space-between;
	}

	[id$="innerContent"] [class^="vads-u-product"] {
		flex-basis: auto;
		flex-shrink: 1;
	}

	[id$="innerContent"] [class^="vads-u-product"] a span {
		width: 180px;
		height: 110px; /* calc(180px * (9 / 16)); */
		overflow: hidden;
		margin-bottom: 8px;
	}

}


@media only screen and (max-width: 824px) {

	[id$="innerContent"] .vads-c-products {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: space-between;
	}

	[id$="innerContent"] [class^="vads-u-product"] {
		width: 100;
	}

	[id$="innerContent"] [class^="vads-u-product"] a {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 8px;
		text-align: left;
	}

	[id$="innerContent"] [class^="vads-u-product"] a span {
		width: 180px;
		height: 110px; /* calc(180px * (9 / 16)); */
		overflow: hidden;
		margin-right: 16px;
		margin-bottom: 0px;
	}
}