/*================================*/
/*=== for Google Search widget ===*/
/*================================*/

#searchCustom {width: 100%;}

#search-btn {
  cursor: pointer;
  font-size: 20px;
  display: inline-block;
  color: var(--mcg-primary);
  position: absolute;
  right: 10px;
  top: 6px;
}

#btnSearchBox {
    width: 35px !important;
    height: 34px !important;
    border-color: transparent;
    background-color: var(--mcg-primary);
    border-radius:0 !important;
    /*
    @media (min-width: 1200px) {
        #btnSearchBox {border-color: transparent;} 
    */
}

 #txtSearchbox {
    color: var(--mcg-text-body);
    font-weight: normal;
    font-size:1rem;
}

/*============================================================*/
/*=== UPDATED VERSION OF mcg-header-footer-bootstrap-5.css ===*/
/*============================================================*/

.mcg-official-site {
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
}

.mcg-official-site__mc311 {
        display: flex;
        align-items: center;
}
@media (min-width: 768px) {
    .mcg-official-site__mc311 {
        display: block;
        width: 88px; 
        text-align:right;
    }
}

.mcg-header-elements {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    min-height:80px;
}

.mcg-header-branding {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.mcg-header-branding__logo img {
    width: 50px;

}
@media (min-width: 992px) {
        .mcg-header-branding__logo img {width: 90px;}
}
.mcg-header-branding__text {
    margin-left: .5rem;
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 700;
}
@media (min-width: 992px) {
    .mcg-header-branding__text {font-size:1.8rem;}
}

.mcg-header-utilities {
     min-width: 80px; 
     display: flex; 
     align-items: center;
 
}
@media (min-width: 992px) {
    .mcg-header-utilities {
        position: relative; align-items: flex-start;width:380px;
    }    
}
.mcg-header-branding__text a {color: var(--mcg-text-body)!important; text-decoration: none!important;}
.mcg-header-branding__text a:focus,
.mcg-header-branding__text a:hover,
.mcg-header-branding__text a:active {text-decoration: underline!important;}

/*=================================*/
/*=== GOOGLE TRANSLATION WIDGET ===*/
/*=================================*/

.mcg-header-translation-widget {margin-left: 10px;}
@media (min-width: 992px) {
    .mcg-header-translation-widget {
        margin-left: 0;
        /* width: 380px; */
        width: 210px; /* adjusted July 9, 2024 to avoid horizontal scrolling */
        height: 0;
        position: relative;
        top: -68px;
        left: 752px;
    }
    .mcg-header-translation-widget label {
        position: absolute;
        top: 6px;
        left: -84px;
    }
}
@media (min-width: 1200px) {
    /* .mcg-header-translation-widget {left: 952px;} */
    .mcg-header-translation-widget {left: 906px;} /* adjusted August 26, 2024 to adjust right margin display */
}

.goog-te-gadget .goog-te-combo {
    position: absolute;
    padding: 4px 8px;
    border: 2px solid var(--mcg-primary);
    background-color: var(--mcg-white);
    color: var(--mcg-text-body);
    /* border-radius: 8px; */
    font-size: 1.2rem;
}

.goog-te-gadget .goog-te-combo:focus,
.goog-te-gadget .goog-te-combo:active,
.goog-te-gadget .goog-te-combo:hover { 
    background-color: var(--mcg-primary);
    color: var(--mcg-white)!important;
    border: 2px solid var(--mcg-white);
}

@media (min-width: 992px) {
    .goog-te-gadget .goog-te-combo {
        margin-left: -6px;
        font-size: 1rem;
    }
    .goog-te-gadget .goog-te-combo:focus,
    .goog-te-gadget .goog-te-combo:active,
    .goog-te-gadget .goog-te-combo:hover {border: 2px solid var(--mcg-primary);}
}

.goog-te-combo, .goog-te-combo option {font-family: "Open Sans", sans-serif; font-size: 1rem;}

.goog-te-gadget .goog-te-combo:focus option,
.goog-te-gadget .goog-te-combo:active option,
.goog-te-gadget .goog-te-combo:hover option { 
    background-color: var(--mcg-white);
    color: var(--mcg-text-body);
    border: 2px solid var(--mcg-white);
}

/* Adjust the link and logo */

.goog-te-gadget{color: transparent !important;}

.goog-logo-link,
.goog-te-gadget span,
div#goog-gt-{display:none!important;}



/*=====================================================*/
/*=== Styles for mobile display and slide-out panel ===*/
/*=====================================================*/

button.mcg-mobile-header-icon {
  font-size: 1.5rem;
  color: var(--mcg-text-link);
  background-color: transparent;
  padding: 10px;
  border: none;
}

#mcg-site-nav--links {margin: 0;padding: 0; list-style: none;}

#mcg-site-nav--links li {display: inline;}
#mcg-site-nav--links li > a:hover,
#mcg-site-nav--links li > a:focus,
#mcg-site-nav--links li > a:active {
    color: var(--mcg-primary);
    background-color: var(--mcg-white);
}

@media (max-width: 991.99px){    
    header {
        padding-bottom: 40px!important;
        border-bottom: 1px solid var(--mcg-primary);
    }
    #searchCustom {
        position: absolute;
        top: 92px;
        left: 0;
        padding: 0 15px;
    }

    .slide-content {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1000;
        top: 0;
        color: var(--mcg-white);
        background-color: var(--mcg-primary);
        font-size: 1.4rem;
        overflow-x: hidden;
        transition: width 0.5s;
        padding: 80px 10px 0 10px;
        visibility: hidden;
    }
    .slide-content--left {left: 0;}
    .slide-content--right {right: 0;}
    .slide-content a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        color: var(--mcg-white)!important;
        display: block;
    }
    .slide-content a:hover,
    .slide-content a:focus {
      text-decoration: underline;
    }

    .slide-content .close-btn {
        position: absolute;
        top: 20px;
        right: 25px;
        background-color: transparent;
        border: none;
        font-size: 36px;
        margin-left: 50px;
    }

    #mcg-site-nav--links {margin-top: 60px!important;} 

    .slide-content.visible {visibility: visible;}

    .slide-content.active {width: 90%;}

}

#mcg-site-nav--links a {
    text-decoration: none;
    color: var(--mcg-white); 
    font-family: "Lato";
    list-style: none;
    padding: 15px 10px;
    font-weight: 700;}

@media (min-width: 992px) {  
    .slide-content .close-btn {display: none;}

    #mcg-site-nav {
        background-color: var(--mcg-primary);
        padding: 10px 0;}
}


/*==========================================*/
/*=== styles for dropdown top navigation ===*/
/*==========================================*/

#mcg-site-nav--links .dropdown > a:after {content: "";}

#mcg-site-nav--links .dropdown-menu {
    background-color: var(--mcg-white);
    border-radius: 0;
    font-size: inherit;
  }

#mcg-site-nav--links .dropdown-menu {
    border-radius: 0;
    font-size: inherit;
  }

#mcg-site-nav--links .dropdown-menu li a {font-size: inherit;}

#mcg-site-nav--links .dropdown-menu > li > a {color: var(--mcg-primary);}
#mcg-site-nav--links .dropdown-menu > li > a:focus,
#mcg-site-nav--links .dropdown-menu > li > a:hover,
#mcg-site-nav--links .dropdown-menu > li > a:active {color: var(--mcg-white)!important;}

@media (max-width: 991.99px) {

    /* remove outline on nav items  */
    li > a:focus {
        outline: none !important;
    }
    
    /* override style-mcg.css */
    .dropdown.open > a, 
    .dropdown.open > a:focus, 
    .dropdown.open > a:active {border-bottom: none}
    
    .slide-content a:hover,
    .slide-content a:focus,
    .slide-content a:active {text-decoration: underline!important; background-color: var(--mcg-primary)!important;}
    
    .slide-content .dropdown-menu {
        position: relative;
        width: 90%;
        margin: 4px 0 15px 20px;
        padding: 0;
    }
    
    .slide-content .dropdown > a {border-bottom: none;}

    .slide-content .dropdown-menu > li > a {color: var(--mcg-primary)!important; white-space: break-spaces;}
    .slide-content .dropdown-menu > li > a:focus,
    .slide-content .dropdown-menu > li > a:hover,
    .slide-content .dropdown-menu > li > a:active {background-color: var(--mcg-primary);}
    
}

@media (min-width: 992px) {
    #mcg-site-nav--links .dropdown-menu {
    margin-top: 16px !important;
    background-color: var(--mcg-white);
    } 
}


/*=================================*/
/*=== OVERRIDE OTHER MCG STYLES ===*/
/*=================================*/

/* from mcgmain.css */

@media (max-width: 768px) {
    #_google_searchbox1 .input-group {margin: 0;}
}
@media (min-width: 992px) {
    #_google_searchbox1 .input-group {margin: 0 15px;}
}