/* Health Check Website Styles */

ol li{
	margin-bottom: 1em;
}

.p1{
    line-height: 1.5;
}

p{
	max-width: 700px;
}

.download-buttons a {
    display: inline-block;
    width: 183px;
    height: 55px;
}

.banner-content{
	width: 85%;
	float: left;
}

.banner-close{
	width:10%;
	float:left;
}

/* Fixes path for search icon on Global Header */
#header-top input[type='search'] {
	background: url(../node_modules/@asu-design-system/bootstrap4-theme/src/img/font-awesome-svg/search-gray-6.svg) no-repeat 10px 50%;
	background-size: 16px;
}

#header-top input[type='search']:focus {
	background-image: url(../node_modules/@asu-design-system/bootstrap4-theme/src/img/font-awesome-svg/search-gray-5.svg);
}

/* Overwrites image path temporarily for pattern divider on home page */
.bg.topo-white {
    background-image: url(../node_modules/@asu-design-system/bootstrap4-theme/src/img/background-patterns/TopoPatternBlack.png);
}

/* Styles phone number on Header */
a.phone-number{
    font-family: Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, sans-serif;
    text-decoration: none !important;
}

/* Overwrittes padding on card header */
.card-foldable .card-header h4 a, 
.card-foldable .card-header h5 a {
    padding: 0.5rem 1rem;
}

/* Changing border color on accordion */
.bl-success{
    border-left: 0.5rem solid var(--success);
}

.bl-warning{
	border-left: 0.5rem solid var(--warning);
}

.bl-info{
	border-left: 0.5rem solid var(--info);
}


/* Health Icons in Preferences page */
.health-icon{
    display: inline;
    float: left;
    margin: 10px 0 0 0;
}

/* Toggle Button */
input[type=checkbox]{
	height: 0;
	width: 0;
    visibility: hidden;
}

#page-wrapper label {
	cursor: pointer;
	text-indent: -9999px;
	width: 46px;
	height: 25px;
	background: var(--gray-4);
	display: block;
	border-radius: 21px;
    position: relative;
}

input:checked + label {
	background: var(--gold);
}

input:checked + label:after {
	left: calc(100% - 3px);
	transform: translateX(-100%);
}

label:active:after {
	width: 50px;
}

/* Hides chevron container on preferences page */
#wellCheckContainer .fa-chevron-down { display: none; } 

.video-wrapper {
	position: relative; 
	/*padding-bottom: 36.25%;*/ 
	height: 100%; 
	overflow: hidden; 
	max-width: 100%;
  }
  
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 85%;
}

/* Temporary adjust margins to header buttons */
@media (min-width: 992px){
	.navbar-site-buttons a {
		margin-right: 8px;
	}

	.btn{
		padding: .75rem 1rem;
	}

}

/* Temporarily centers elements on the page */
@media (min-width: 1920px) {
	.uds-hero{
		margin: auto;
	}

	.container-max{
		width: 1920px;
		margin: auto;
	}
}

/* Smaller devices */
@media only screen and (max-width: 667px) {
  /* Fix positioning of close button for modals */
  div[role="dialog"] div div:first-of-type {
    top: 1.5em;
  }
}
@media only screen and (max-width: 360px) {
  /* fix positioning of close button for modals */
  div[role="dialog"] div div:first-of-type {
    top: 2em;
  }
}
@media only screen and (max-height: 667px) {
  /* Scale down to fix and fit positioning of close button for modals */
  div[role="dialog"] > div {
    -ms-zoom: 0.85;
    -moz-transform: scale(0.85);
    -moz-transform-origin: 50% 50%;
    -o-transform: scale(0.85);
    -o-transform-origin: 50% 50%;
    -webkit-transform: scale(0.85);
    -webkit-transform-origin: 50% 50%;
  }
}

/* Quicklinks FAQs page*/
.anchor-section{
	margin: 0;
	scroll-margin-top: 7em;
}

#anchor-menu a{
	color: #191919;
	text-decoration: none;
	display: block;
	border-bottom: 1px solid var(--gray);
	padding: 1rem;
	font-weight: bold;
}

#anchor-menu a:hover,
#anchor-menu a:focus{
	border-bottom: 0.5rem solid var(--gold);
	text-decoration: underline;
}

@media (min-width: 992px) {
	.anchor-section{
		margin: 0;
		scroll-margin-top: 7em;
	}

	#anchor-menu{
		border-bottom: 1px solid var(--gray);
	}

	#anchor-menu,
	#anchor-menu h3{
		text-align: center;
	}

	#anchor-menu a{
		color: #191919;
		text-decoration: none;
		display: inline-block;
		border-bottom: none;
		padding: 1rem;
	}
}

/* Quick Links Menu*/

#quick-links {
	border: 1px solid #d0d0d0;
	margin-bottom: 48px;
}

#quick-links.card {
	border: none;
}

#quick-links.card-foldable {
	border-left: none;
}

#quick-links.card-foldable .card-header {
	padding: 0;
}

#quick-links.card-foldable .card-header:hover{
	background-color: transparent !important;
}

#quick-links h4 {
	text-align: center;
	border-bottom: 1px solid #d0d0d0;
}

#quick-links h4 a {
	margin-left: 32px;
	margin-right: 32px;
}

#quick-links .card-body {
	border: 1px solid #d0d0d0;
	padding-bottom: 0;
}

#quick-links a {
	display: block;
	border-bottom: 1px solid #d0d0d0;
	padding: 1rem;
	color: #191919;
	text-decoration: none;
	font-weight: bold;
}

#quick-links a:last-child {
	border-bottom: none;
}

#quick-links a:hover,
#quick-links a:active {
	border: 1px solid #191919;
}

#quick-links h4 a:link,
#quick-links h4 a:hover,
#quick-links h4 a:active {
	border:none;
	border-bottom: 0.5rem solid var(--gold);
}

#quick-links svg {
	margin-right: 8px;
}


@media (min-width: 992px) {

	#quick-links,
	#quick-links h4 {
		text-align: center;
		border-bottom: none;
	}
	
	#quick-links h4 a {
		border-bottom: none;
	}

	#quick-links h4 a:link,
	#quick-links h4 a:hover,
	#quick-links h4 a:active {
		text-decoration: none;
		border: none;
	}
	

	#quick-links .card-body {
		border: none;
		padding-bottom: 0;
		border-bottom: 1px solid #d0d0d0

	}

	#quick-links a {
		display: inline-block;
		border-bottom: none;
		color: #191919;
		text-decoration: none;
		font-weight: bold;
	}

	#quick-links a:hover,
	#quick-links a:active {
		border: none;
		border-bottom: 0.5rem solid var(--gold);
		text-decoration: underline;
	}	

}

/*--------------------------------------------------------------
Global Header - Scrolled, Desktop (Altered Media Query)
--------------------------------------------------------------*/
@media (min-width: 992px) {
	#asu-header.scrolled .navbar-container.no-links {
	  margin-top: 2rem;
	}
	#asu-header.scrolled .navbar-nav .nav-link,
	#asu-header.scrolled .navbar-nav .dropdown .nav-link {
	  padding-top: 0;
	}
	#asu-header.scrolled #header-main .title {
	  padding-bottom: 0;
	}
	#asu-header.scrolled #header-main .title.subdomain-name {
	  font-size: 1.5rem;
	}
  }

/*--------------------------------------------------------------
Global Header - Main Menu, Mobile Only (Altered Media Query)
--------------------------------------------------------------*/
/* Overrides a rule in the header that is normally not even activated */

#wrapper-header-main div.container-lg {
	padding-right: 12px;
	padding-left: 12px;
}


/*--------------------------------------------------------------
Global Header - Main Menu, Desktop (Altered Media Query)
--------------------------------------------------------------*/
/* Breakpoint at which the mobile menu is triggered */
@media (min-width: 992px) {
	#wrapper-header-top {
	  display: block;
	}
	#header-main .navbar {
	  padding: 0;
	  -webkit-box-align: start;
		  -ms-flex-align: start;
			  align-items: flex-start;
	}
	#header-main .navbar-brand .vert {
	  display: block;
	  height: 72px;
	  width: auto;
	  margin: 1.5rem 1rem 1.5rem 0;
	}
	#header-main .navbar-brand .horiz {
	  display: none;
	}
	#header-main .navbar-container.no-links {
	  -webkit-box-orient: horizontal;
	  -webkit-box-direction: normal;
		  -ms-flex-direction: row;
			  flex-direction: row;
	  -webkit-box-pack: justify;
		  -ms-flex-pack: justify;
			  justify-content: space-between;
	  -webkit-box-align: center;
		  -ms-flex-align: center;
			  align-items: center;
	  margin-top: 2.5rem;
	}
	#header-main .navbar-container.no-links .title {
	  width: 100%;
	  margin: 0;
	}
	#header-main .navbar-container.no-links .navbar-collapse {
	  -webkit-box-pack: end !important;
		  -ms-flex-pack: end !important;
			  justify-content: flex-end !important;
	}
	#header-main .title {
	  line-height: 1;
	  margin: 1rem 0;
	  font-weight: 700;
	  padding: 0;
	}
	#header-main .title .unit-name {
	  font-size: 1rem;
	  margin-bottom: 0.5rem;
	  display: block;
	}
	#header-main .title .subdomain-name {
	  font-size: 1.5rem;
	  margin-bottom: 0;
	}
	#header-main .title.subdomain-name {
	  font-size: 2rem;
	  margin: 1.5rem 0 1rem 0;
	  font-weight: 700;
	}
	#header-main .navbar-site-buttons {
	  padding: 0;
	  border: 0;
	}
	#header-main .navbar-site-buttons .btn {
	  margin-bottom: 0;
	}
	#header-main .navbar-site-buttons .btn + .btn {
	  margin-left: 1rem;
	}
	#header-main #menubar {
	  overflow: initial;
	}
	#header-main .navbar-nav > .nav-link {
	  border: 0;
	  font-size: 1rem;
	  color: #191919;
	  padding: 0.5rem 0.75rem;
	  /* Magic number */
	  margin-right: 0.5rem;
	}
	#header-main .navbar-nav > .nav-link:after {
	  -webkit-transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
	  -o-transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
	  transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
	  content: '';
	  display: block;
	  height: 0.5rem;
	  background-color: #ffc627;
	  position: relative;
	  top: inherit;
	  bottom: 0;
	  width: 0;
	  margin-left: 0;
	  bottom: -8px;
	  left: -8px;
	}
	#header-main .navbar-nav > .nav-link:hover:after {
	  width: 100%;
	  margin-left: 0;
	  width: calc(100% + 16px);
	}
	#header-main .navbar-nav > .nav-link.active:after {
	  width: 100%;
	  margin-left: 0;
	  width: calc(100% + 16px);
	}
	#header-main .navbar-nav > .nav-link-home {
	  padding-bottom: 7px;
	  /* Magic number */
	}
	#header-main .navbar-nav > .nav-link-home svg.fa-home {
	  display: inline-block;
	  font-size: 16px;
	}
	#header-main .navbar-nav .nav-item .nav-link {
	  padding: 0.5rem 0.75rem 0 0.75rem;
	  /* Magic number */
	}
	#header-main .dropdown {
	  position: relative;
	  padding: 0;
	  border: 0;
	  margin-right: 0.5rem;
	}
	#header-main .dropdown:after {
	  -webkit-transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
	  -o-transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
	  transition: 0.5s cubic-bezier(0.19, 1, 0.19, 1);
	  content: '';
	  display: block;
	  height: 0.5rem;
	  background-color: #ffc627;
	  position: relative;
	  top: inherit;
	  bottom: 0;
	  width: 0;
	  margin-left: 0;
	}
	#header-main .dropdown:hover:after {
	  width: 100%;
	  margin-left: 0;
	}
	#header-main .dropdown.active:after {
	  width: 100%;
	  margin-left: 0;
	}
	#header-main .dropdown.dropdown.show:after {
	  width: 100%;
	  margin-left: 0;
	}
	#header-main .dropdown.dropdown.megamenu.show:after {
	  width: 100%;
	  margin-left: 0;
	}
	#header-main .dropdown svg.fa-chevron-down {
	  float: none;
	  display: inline-block;
	  font-size: 0.75rem;
	  margin-left: 0.5rem;
	}
	#header-main .dropdown-menu {
	  margin: -1px 0 0 0;
	  border: 1px solid #d0d0d0;
	  border-top: 1px solid #ffffff;
	  padding: 2rem;
	}
	#header-main .dropdown-menu div[class^='col-'] {
	  margin-bottom: 0;
	}
	#header-main .dropdown-menu.dropdown-columns.show {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	}
	#header-main .dropdown-col {
	  width: 16rem;
	  padding: 0 1.5rem 0 0;
	  border-right: 1px solid #bfbfbf;
	  margin-right: 1.5rem;
	}
	#header-main .dropdown-col:last-of-type {
	  margin-right: 0;
	  padding-right: 0;
	  border-right: 0;
	}
	#header-main .dropdown-col h3 {
	  margin-top: 0;
	}
	#header-main .dropdown-item {
	  padding: 0.5rem 0;
	  white-space: normal;
	}
	#header-main .dropdown-item:visited {
	  color: #191919;
	}
	#header-main .dropdown-item:hover {
	  color: #8c1d40;
	  text-decoration: underline;
	}
	#header-main .dropdown-item + .dropdown-item {
	  border-top: 0;
	}
	#header-main .megamenu {
	  position: static;
	}
	#header-main .megamenu .dropdown-menu {
	  background-color: #ffffff;
	  border-bottom: 1px solid #bfbfbf;
	  width: 100vw;
	  margin-left: calc(-50vw + 50%);
	  margin-top: 0;
	  padding: 0;
	}
	#header-main .megamenu .row {
	  width: 100%;
	  padding: 2rem 0;
	}
	#header-main .megamenu .row.with-buttons {
	  padding: 1rem 0;
	}
	#header-main .megamenu .row.with-buttons:before {
	  content: '';
	  height: 1px;
	  width: 100vw;
	  margin-left: calc(-50vw + 50%);
	  margin-right: calc(-50vw + 50%);
	  background-color: #bfbfbf;
	  position: relative;
	  top: -1rem;
	}
	#header-main .megamenu .row.with-buttons div[class^='col-'] {
	  padding-bottom: 0;
	}
	#header-main .megamenu div[class^='col-'] {
	  border-right: 1px solid #bfbfbf;
	  padding: 0 1.5rem 2.5rem 1.5rem;
	  position: relative;
	}
	#header-main .megamenu div[class^='col-']:last-of-type {
	  border-right: 0;
	}
	#header-main .megamenu div[class^='col-'] h3 {
	  margin-top: 0;
	}
	#header-main .megamenu div[class^='col-'] .dropdown-item {
	  white-space: normal;
	}
	#header-main .megamenu div[class^='col-'] .dropdown-item + .dropdown-item {
	  border-top: 0;
	}
	#header-main .megamenu div[class^='col-'] .dropdown-item + .btn {
	  position: absolute;
	  bottom: 0;
	  margin: 0;
	}
	#header-main .megamenu div[class^='col-'] .btn + .btn {
	  margin-left: 1.5rem;
	}
	#header-main .navbar-mobile-footer {
	  display: none;
	}
  }