/* ------------ Applying DMHC styles -------------*/
/*------------------------------------------------*/

body {font-family: "Source Sans Pro", sans-serif;} 
h1, h2, h3, h4 {font-family: inherit; font-weight: bold !important;}
body, form {font-size: 1rem;}
p, li {line-height:1.5}

/* Headings for Applications - uncomment and use for Dashboard and PRR */
/*---------------------------------------------------------------------*/
/*h1 {font-size: 1.54rem; color: #008131; margin-top: 1.3em;}
  h2 {text-align: left; font-size: 1.4rem; color: #0061a0;}
  h3 {font-size: 1.1rem;}*/
/* End of Headings for Applications */

/* Fields Styles for Applications - uncomment and use for Dashboard and PRR */
/*select, input, textarea, .btn-default, .chosen-select .k-dropdown-wrap, .form-control, .search-bar {border: 1px solid #0061a0 !important;}*/
/* End of Fields Styles for Applications */

/* .branding, .main-navigation, .mobile-controls and .container width fixes */
/*--------------------------------------------------------------------------*/

@media (min-width: 1280px) {
	.oceanside .container, .oceanside .branding, .oceanside .main-navigation,
	.oceanside .mobile-controls, .oceanside .main-content > .section,
	.oceanside .two-column .main-content > .section {max-width: 1280px !important;}
}

@media (max-width: 1280px) {
	.oceanside .container, .oceanside .branding, .oceanside .main-navigation,
	.oceanside .mobile-controls, .oceanside .main-content > .section,
	.oceanside .two-column .main-content > .section {max-width: 100% !important;}
}

/* .section removed padding */
.oceanside .main-content > .section, .oceanside .two-column .main-content > .section {padding:0}

/* Global Links Styles */
/*---------------------*/ 
a:hover, a:focus {color: #008131; text-decoration: underline; background-image:none;}
a, a:visited {color: #0061A0;}

.main-content a:hover {color: #008131;}
.main-content a:not(.btn):visited {background-image: linear-gradient(to right, #0061a0 50%, transparent 50%);}
.main-content a:not(.btn) {background-image: linear-gradient(to right, #0061a0 50%, transparent 50%);}
.main-content a:not(.btn):hover {background-image: none; text-decoration: underline !important;}
.main-content a:not(.btn):focus {outline: 2px solid black; text-decoration: none}
.footer-links a {background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);}
.section-bottom-links a:hover {color: inherit; background-image:none !important; text-decoration:underline}
/* End of global Links */

/* Alert Banner */
/*--------------*/
.alert-warning {background-color: #FED477; border-color: #5d6666;}
.alert-banner .close {right:0; font-size:2.5rem; text-shadow: none; padding:5px 2px}
.alert-banner .close:hover {outline:2px solid #000; text-shadow: none; opacity:1}
.alert-banner .close:focus {outline:2px solid #000; opacity:1}
.alert-text, .alert-warning {color:#214c62} /* Olena - changed colors for the text to dark blue */
/* End of Alert Banner */


/* Skip-to-Content Button  */
/*-------------------------*/
#skip-to-content a {color:#0061A0; left:10% !important; background-color: #f5f5f5 !important; text-decoration: underline; position: absolute;}
#skip-to-content {position: absolute; left:50% !important; background-color: #f5f5f5 !important}
#skip-to-content a:focus {width: 220px; height: 40px; font-size: 1.1rem; outline:2px solid #000; border:0}
#skip-to-content a:hover {color: #008131; font-size: 1.1rem}
a.sr-nav-skip {z-index:1000; position: absolute; left: -1000px; top: -1000px; width: 1px; height: 1px; text-align: left; overflow: hidden;border-bottom-left-radius:7px; border-bottom-right-radius:7px;}
a.sr-nav-skip:focus {position: relative; left:0; top: 0; width: auto; height: auto; overflow: visible; background-color: #F5f5f5; padding: 5px 20px; border: 2px solid #000; font-size: 1.3em; font-weight: bold;}

/* High Contrast Links and Buttons */
/*---------------------------------*/
html.high-contrast #skip-to-content a {color: #000 !important;}
html.high-contrast a:focus {outline:2px solid white}
html.high-contrast .main-content a:not(.btn) {text-decoration: underline !important;} /* added underline to the links */
html.high-contrast .main-content a:not(.btn):focus {outline:2px solid white;} /* added white border on focus */
html.high-contrast .main-content .btn-outline-primary:focus {outline: 2px solid #fff; background:none !important;} /* styles for buttons */
html.high-contrast .main-content .btn-outline-primary:hover {color:#000; background-color:#ffd600 !important;}
html.high-contrast .main-content .btn-outline-primary span:hover {color:#000 !important; background:none !important;}
html.high-contrast .main-content .btn-outline-primary span {color:#000; background:none !important;}
/* End of High Contrast Skip-to-content link */


/* -------------- Header Custom Style -------------- */


/* Utility Header */
/*----------------*/
.utility-header {min-height: 40px !important;}
.header-cagov-logo img {height: 32px;}
.branding .header-organization-banner {line-height: 86px;}
.branding .header-organization-banner img {max-height: 50px; max-width: 100%; margin-top: 3px;}
.header-organization-banner a:focus {outline:2px solid #000;}
.utility-header {background: #0061A0; color: #fff;}
.utility-header a:hover {text-decoration: underline}
.utility-header a:focus {outline: solid 2px #fff !important;}
.utility-header a {color: #fff !important; margin: 8px !important;}
.utility-header .btn:focus {outline: solid 2px #fff;}
.utility-header .flex-row .settings-links button {padding: 3px 6px !important; margin-right:5px; border-radius:0;}
.head-search a:hover {text-decoration: none}
.searchInputContainer {width: auto}

@media (min-width: 768px) {
	.fixed.compact .main-navigation {margin-top: -57px;}
	.fixed.compact .top-level-nav .first-level-link {padding-bottom:15px;}
	.fixed.compact .header-organization-banner {line-height:45px;}
	.utility-header .flex-row {display: flex; flex-wrap: nowrap;}	
}

/* made top blue bar more compact for smaller screens */
@media (max-width: 576px) {
    .utility-header .flex-row { display: flex; flex-wrap: wrap; }
    .utility-header .flex-row .settings-links { justify-content: center; margin: 0 auto; }
    .utility-header .flex-row .settings-links button { align-items: center; display: inline-flex; }
    .head-search { flex: 1 1 auto; order: 99; padding: 0 15px; }
    .head-search > span { align-items: center; display: flex; }
    .head-search > span > a { flex: 1 1 auto; }
    .head-search > span .searchInputContainer { flex: 1 1 100%; }
    .head-search > span .searchInputContainer input { width: 100%; }
}
/* End of Utility Header */

/* Settings */
/*----------*/
.btn-primary {color: #fff; background-color: #0061a0; border-color: #0061a0;}
.btn-primary:focus, .btn-primary.focus {box-shadow: none;}

.section-standout .btn-standout {color: #fff; background-color: #0061a0; border-color: #fff;}
.section-standout .btn-standout:hover {color: #fff; background-color: #232930; border-color: #fff; outline: none; border:1px solid #fff; box-shadow:none;}
.site-settings button.close {color:#fff; opacity:1;}
.site-settings .close:focus,
.site-settings .close:hover {outline:2px solid #fff;}
.site-settings button.close span {top:0;}
/* End of Settings */

/* DNN Search */
/*------------*/
#dnn_utilityheaderControl_ctl00_cmdSearch:focus {outline:2px solid #fff;}
/* End of Search */

/* Google Translate */
/*------------------*/ 
.language-settings #google_translate_element,
.language-settings #google_translate_element select {flex: 1;}
.language-settings #google_translate_element > div {display: flex; align-items: center;}
.language-settings #google_translate_element > div > div {display: flex !important; flex: 1;}
.language-settings button.close {color: #000;}
.language-settings button.close:hover, .language-settings button.close:focus {outline:2px solid #000;}
/* End of Google Translate */

/* Top Navigation */
/*----------------*/
.link-text, .first-level-link {font-family: "Source Sans Pro", sans-serif;} 
.link-text a:focus {color: #008131;}
.second-level-link {color: #0061A0;}
.top-level-nav {min-height: 85px;}
.nav-item a:focus {outline:2px solid #000;}
.mobile-controls .toggle-menu:focus {outline:2px solid #000;}

/*  Changes to Top Nav Dropdowns - from Menu.css  */
/*-----------------------------------------------*/
/* Allow the Menu text to wrap */
.dropdown.dmhc-nav:not(.collapse):not(.collapsing) .nav-item .first-level-link .link-text { white-space: normal; }

/* Hide the caret icon */
.dropdown.dmhc-nav .nav-item .first-level-link.has-sub .carrot { display: none; }

/* All menus will be centered */
.dropdown.dmhc-nav:not(.collapse):not(.collapsing) .sub-nav {
    left: 50%;
	max-width:330px;
	min-width: 330px;
	margin-left: -165px;
	margin-top: 3px;
	border-left: 1px solid #d6d6d6;
	border-right: 1px solid #d6d6d6;
}
.dropdown.dmhc-nav .second-level-nav li a:hover {color: #008131;}
.dropdown.dmhc-nav .second-level-nav li a {margin: 2px;}
.dropdown.dmhc-nav .second-level-nav li {border-bottom: 1px solid #d6d6d6;}
.dropdown.dmhc-nav:not(.collapse):not(.collapsing) .nav-item .first-level-link .link-text {padding-right: 0 !important;}
.dropdown.dmhc-nav:not(.collapse):not(.collapsing) .nav-item .first-level-link {
	display: block;
	align-content: space-between;
	align-items: end;
	height: 100%;
	justify-content: center;
}

@media (min-width: 768px) {
    .dropdown.dmhc-nav .nav-item a.open {
        /* Keep open menu's background color. */
        background-color: #F5F9FB;
        box-shadow: inset 1px 0px #d6d6d6, inset -1px 0px #d6d6d6;
    }

	/* Menu text/icon DMHC green color when hover/focus/open */
	.dropdown.dmhc-nav .nav-item > a:focus,
    .dropdown.dmhc-nav .nav-item > a:hover,
    .dropdown.dmhc-nav .nav-item > a.open,
    .dropdown.dmhc-nav .nav-item a:focus > span[class^="ca-gov-icon"],
    .dropdown.dmhc-nav .nav-item a:hover > span[class^="ca-gov-icon"],
    .dropdown.dmhc-nav .nav-item a.open > span[class^="ca-gov-icon"]
	{ color: #008131; }
    .dropdown.dmhc-nav .nav-item a:not(.open):focus > span[class^="ca-gov-icon"],
    .dropdown.dmhc-nav .nav-item a:not(.open):hover > span[class^="ca-gov-icon"]
	{ opacity: 0.5; }

	/* green box under hover top navigation */
    .dropdown.dmhc-nav .nav-item  { position: relative; }
    .dropdown.dmhc-nav .nav-item > a::after {
        background-color: transparent;
        bottom: -3px; /* Negative of the .navigation-search border width */
        content: '';
        display: block;
        height: 3px; /* Match .navigation-search border width */
        left: 0;
        position: absolute;
        width: 100%;
    }
    .dropdown.dmhc-nav .nav-item > a:focus::after,
    .dropdown.dmhc-nav .nav-item > a:hover::after,
    .dropdown.dmhc-nav .nav-item > a.open::after { background-color: #008131; }

	.unit-li a:focus, .nav-item:hover, .nav-item:focus {background-color: #fff;}

	#navigation .rootMenu > li > a,
	#navigation .rootMenu > li > a:hover {padding: 15px 0; white-space: nowrap;}
	#navigation .rootMenu > li > a:focus {outline:2px solid black !important;}
	.first-level-link a:focus {outline:2px solid black !important;}
	a.second-level-link:hover {text-decoration: underline !important;}
	a.second-level-link {font-size: 0.9rem; padding: 3px !important;}
}

@media (max-width: 767px) {
	a.second-level-link {padding:0 2px !important}

	#navigation .rootMenu > li > a {border-bottom: 1px solid #E1F2F7; padding: 12px 5px;}
	#navigation .rootMenu > li > a:focus {outline:2px solid black !important;}
	.main-navigation {max-width: 100%}

    /* Fix for Kendo UI drop down control height */
    /* Fix for Kendo animated container on small screens */
    .k-animation-container {
        width: 100% !important;
        min-height: 40vh;
    }
    .k-animation-container .k-list-container { min-height: 40vh; width: 100% !important; }
    .k-animation-container .k-list-container .k-list-scroller {
        /* Calculation is based on:
            .k-textbox height (2px + .75rem + 1.5em)
            .k-textbox top/bottom padding (0.375rem) * 2
            .k-list-filter top/bottom padding (1em) * 2
        */
        min-height: calc(40vh - (2px + 1.5rem + 3.5em));
    }
}

@media (max-width: 1500px) {
    /* Move the last sub-menu so that it is right aligned so it does not run off the screen. */
    .dropdown.dmhc-nav .nav-item:last-child .sub-nav {
        left: initial;
        margin-left: 0;
		right: 0;
    }
}

@media (max-width: 1200px) {
        /* Move second to last sub-menu to the left a bit so it does not run off the screen. */
    .dropdown.dmhc-nav:not(.collapse):not(.collapsing) .nav-item:nth-last-child(2) .sub-nav {
        margin-left: -190px;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
	#navigation .rootMenu > li > a {font-size: 0.7em;}
	.main-navigation {padding-left: 200px; }
	a.second-level-link {font-size: 0.8rem; padding: 3px !important;}
}
/* End of Changes to Top Navigation */

/* gold line under Top Navigation */
.navigation-search {border-bottom: 3px solid #FDB81E; position: relative;}

/* --------- End of Header Custom Style -----------*/

/* ---------------- Page Content ------------------*/
.oceanside .section {padding-top: 0px;}

/* buttons */
/*---------*/
.btn-outline-primary {border-color: #0061a0 !important; color: #0061a0 !important;}
.btn-outline-primary:focus {outline:2px solid #000; background-image:none !important; color: #fff !important; background-color: #0061a0 !important;}
.btn-outline-primary:hover {background-color: #0061a0 !important; color:#fff !important;}
/* end of buttons */

/* rate counter */
/*--------------*/
.money-counter {text-align: center; margin: 0 auto; background: none;}
.stat-counter {font-family: "Source Sans Pro", sans-serif;}
.rate-comment {color: #0061A0; font-size: 1.2em; padding-top:10px;}
.rate-comment a:hover {background-image: none;}
.rate-comment a {background-image: linear-gradient(to right, #0061a0 50%, transparent 50%) !important;}
.section-standout a:not(.btn), .card-standout a:not(.btn) {color: #0061a0;}
.section-standout a:not(.btn):hover, .card-standout a:not(.btn):hover {color: #008131; background-image: none !important; text-decoration: underline !important;}
.number-counter {color: #0061A0;}
.dollars:before { content:'$';}
.border-button {border:1px solid #0061A0; width:100%; padding: 10px 0; margin:10px auto; flex: 0 0 60%;max-width: 100%;}
.section-standout a:not(.btn):focus, .card-standout a:not(.btn):focus {color: #008131; background-image: none !important;}

@media (max-width: 767px) {
	.money-counter {width:100%; padding:0 30px}
}

/* Grey Shadow Box - Internal Links */
/*----------------------------------*/
.shadow {-webkit-box-shadow: 0 2px 5px #eee; -moz-box-box-shadow: 0 2px 5px #eee; box-shadow: 0 2px 5px #eee !important;}
.goto-link {margin-top: 0px}
.goto-link span {height: fit-content; width: auto; visibility:hidden; float:left} /* Olena: changed on 6-22-23 */
.goto-link:hover span {visibility:visible; color:#008131; text-decoration: none !important; background-image: none !important;}
.goto-link:visited span {text-decoration: none !important; background-image: none !important;}
.teaser1 {height: auto; width: 47%; float: left; padding: 7px 0 7px 7px; margin: 5px; background-color: #f5f5f591;}
.teaser1 h4 {font-size:1.1rem !important;}
.teaser1 a {background-image: none !important;}
@media (max-width: 767px){.teaser1 {width:98% !important; height:35px}} /* Olena: added on 6-22-23 */
@media (min-width: 768px) and (max-width:900px) {.teaser1 {height:fit-content;}} /* Olena: added on 6-22-23 */
.box-border {width:100%;}
/* --------- End of Page Content -----------*/


/* ---------- Footer Custom Style ----------*/

.section-bottom-links h2 {color: #fff;}

/* footer links */
/*--------------*/
footer {background-color: #0061a0;}
.global-footer {padding-top: 1px;}
.section-bottom-links a, .section-bottom-links a:visited, .footer-links a, .footer-links a:visited {background-image: linear-gradient(to right, #ffffff 50%, transparent 50%) !important; background-size: 2px 1px; background-repeat: repeat-x; background-position: center bottom 4%; background-origin: padding-box;}
.footer-links a:hover {background-image:none !important; border-bottom: 0;}
.footer-links a:focus, .socialsharer-container a:focus {outline:2px solid white !important; background-image:none !important;}

.ca-gov-icon-online-help:before {content: "\ea1e";} /* blue footer icon for 'Need Help' - change icon in Dashboard and PRR */
.section-bottom-links a:focus {outline:2px solid white !important; text-decoration: none !important; background-image: none !important;}
/* end of footer links */


@media (max-height: 600px) {
    /* Prevent a fixed header */
    .global-header.fixed { position: relative; }
    /* Remove padding from the main-content element */
    .global-header.fixed ~ .main-content { padding-top: 0 !important; }
    /* Set the background position for .parallax-bg-home (homepage banner)  */
    .global-header.fixed ~ .main-content .parallax-bg-home { background-position: 0; }
    /* Prevent alert banner from auto hiding itself. It can still be closed by the user. */
    .global-header.fixed.compact .alert-banner { height: auto; opacity: 1; position: relative; }
    /*
        The following styles will fix issues with the page "jumping" when scrolling the page down/up.
        Set the styles for the "compact" menu items so that they match their original non-compact dimensions.
    */
    /* Set menu height to match original non-compact styles */
    .global-header.fixed.compact .main-navigation,
    /* Set .top-level-nav (menu UL element) to match original size */
    .global-header.fixed.compact .top-level-nav { min-height: 85px; margin-top: -82px; }
    /* Set .first-level-link (menu link element) to match original padding values */
    .global-header.fixed.compact .top-level-nav .first-level-link { padding: 5px 5px 12px 5px; }
    /* Keep menu icons visible so the menu height does not change */
    .global-header.fixed.compact .top-level-nav .first-level-link [class^="ca-gov-icon-"] { display: block; }
    /*
        Set the branding and header-organization-banner styles so that they match their original height.
        Turn off banner transitions so that the menu does not "jump" when the height changes.
    */
    .global-header.fixed.compact .branding { height: 82px !important; transition: none !important; }
    .global-header.fixed.compact .header-organization-banner { line-height: 86px; }
    /* Keep menu carrot (arrow) icon hidden. */
    .global-header.fixed.compact .nav-item .first-level-link.has-sub .carrot { display: none; }
}

/* fix bullet to round */
.oceanside ul{
	list-style-type: disc;
}
/* ---------------End of Footer Custom Style --------------*/

@media (min-width: 575px) and (max-width: 767px) {
    /* Fix for visible-xs and hidden-xs classes on very small screens */
    .visible-xs { display: block !important; }
    .hidden-xs { display: none !important; }
}

/* Fix dotted lines on footer links */
.oceanside .global-footer ul a { display: inline; }
/* Fixed Home dotted underline in breadcrumbs */
.breadcrumbMain > a.breadcrumbHome {height:auto !important; line-height: 20px;} /* Olena - changed it to 20px from 24px */
/*fixed keyboard active round corner*/
.oceanside .breadcrumb {border-radius: 0; display: unset;} /* Olena - added display: unset; to fix the position of the dotted line for the link */


/* Change Twitter/X bird logo to the new X variant */
.ca-gov-icon-twitter:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cpath fill='%23ffffff' d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z'/%3E%3C/svg%3E");
padding-left:3px;
}

/* High contrast styles for X logo */
html.high-contrast .ca-gov-icon-twitter:before,
html.high-contrast .socialsharer-container a:hover > .ca-gov-icon-twitter:before,
html.high-contrast .socialsharer-container a:focus > .ca-gov-icon-twitter:before {
    filter: invert(25%) sepia(96%) saturate(800%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* DMHC Logo High Contrast */
html.high-contrast .branding .header-organization-banner img {
    filter: saturate(0) brightness(6) contrast(1) grayscale(1);
}

/* Additional High Contrast */
html.high-contrast .utility-header a {color: #ffd600 !important;}
html.high-contrast .need-help-bg h2 {color: #ffd600 !important;}
html.high-contrast .white-service a {color: #ffd600 !important; background-image: none !important}
html.high-contrast .white-service a:visited {color: #ffd600 !important; background-image: none !important}
html.high-contrast .k-dropdown-wrap {border:1px solid #ffd600 !important}

/* Header styles for X logo */
.social-media-links .ca-gov-icon-twitter:hover:before {
    box-shadow: inset 0 -1px 0 0 #fff;
}
/* Footer styles for X logo */
.socialsharer-container a:hover > .ca-gov-icon-twitter:before,
.socialsharer-container a:focus > .ca-gov-icon-twitter:before {
    filter: invert(25%) sepia(72%) saturate(933%) hue-rotate(342deg) brightness(101%) contrast(98%);
}