/*===========================================

  MEDIA QUERIES

============================================*/

@media (max-width: 1920px) {

    .downloadables-img-top {
        height: 220px;
    }

}







@media (max-width: 1600px) {

    #login-header,

    #reset-instructions {

        padding: 0 20rem;

    }

    .z-image>img {

        left: 46rem;

    }

    .downloadables-img-top {

        height: 200px;

    }

    .downloadables-card {

        width: 100%;



    }

    .pdf-icon>img {

        /*top: 12%;*/

    }

    p.userguide-links>a {

        left: 21%;

    }

    span.dates {

        left: auto;
    }

    svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-video,

    svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-cal {

        left: 8.3rem;

    }

    svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-video,

    svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-cal {

        right: 8.3rem;

    }



}





@media (max-width: 1440px) {



    /*=======================

      Navigation

    =========================*/

    #mobile-nav {

        display: none;

    }



    p.userguide-links>a {

        left: 8%;

    }

    .button-slanted {

        width: 13rem;

        font-size: 15px;

    }

    /*=======================

      Index Page

    =========================*/

    .hero-image>img {

        height: 400px;

    }

    .header-text {

        /* top: 80%;*/

    }

    h1.header {

        font-size: 2.2rem;

    }

    /* video */

    .zimmer-video {

        width: 100%;

        height: 26.5rem;

    }

    .video-cal {

        max-width: 100%;

        /* padding: 0 6rem 5rem 8rem;*/

    }

    .video>video {

        height: 21.4em;

        max-width: 100%;

    }

    /* calendar */

    span.dates {

        position: relative;

        bottom: 0;

        left: auto;

    }

    svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-video,

    svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-cal {

        left: 6.3rem;

    }

    svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-video,

    svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-cal {

        right: 6.3rem;

    }

    /* downloadables */

    .downloadables-container {

        max-width: 100%;

    }

    #carouselDownloadables>div>div>div.row.container {

        padding: 0;

    }

    #carouselDownloadables>div>div {

        /*padding: 0 4rem 0 4.5rem;*/

    }

    .downloadables-card {

        width: 100%;

    }

    .downloadables-img-top {

        height: 185px;

    }

    .downloadable-col-text>p {

        font-size: 18px;



    }

    .pdf-icon>img {

        /*top: 12%;*/

    }

    /* footer */





    img.footer-buttons {

         width: 14rem;

    }

    /*=======================

      Login Page

    =========================*/

    #login-header,

    #reset-instructions {

        padding: 0 15rem;

    }

    .brand-text>h6 {

        padding: 0 0 0 2rem;

    }

    .z-image>img {

        left: 41rem;

    }

}



@media (max-width: 1366px) {



    /* header  */

    .left-brand>a>img.zb-fff {

        left: 10%;

    }

    p.userguide-links>a {

        left: 3%;

    }

    .button-slanted {

        width: 15rem;

    }

    .button-slanted-content {

        font-size: 15px;

    }

    /* mobile nav */

    #mobile-nav {

        display: none;

    }

    /* downloadables */

    .video-cal {

        max-width: 100%;

        padding: 0 7rem 0 6.5rem;

    }

    .zimmer-video {

        height: 23.5em;

        width: 100%;

    }

    #calendar-table>tbody>tr>td.current-month {

        height: 4.2rem;

    }

    span.dates {

        left: auto;

    }

    #carouselDownloadables>div>div {

        /* padding: 0 2rem 0 3rem;*/

    }

    /*downloadables */

    .downloadables-card {

        /* width: 16rem;*/

    }

    .downloadables-img-top {

        height: 174px;

    }

    .downloadable-col-text>p {

        font-size: 16px;

    }

    /* footer */

    #footer {

        /*padding: 1rem 0 1rem 4rem;*/

    }



    img.footer-buttons {

         width: 12rem;

    }

    /*=======================

      Login

    =========================*/

    .z-image>img {

        left: 39rem;

    }

}







@media (max-width: 1280px) {



    /*=======================

      Navigation

    =========================*/



    #mobile-nav {

        display: none;

    }

    .left-brand>a>img.zb-fff {

        left: 17%;

    }

    p.userguide-links>a {

        left: 0;

    }



    .button-slanted {

        width: 10em;

    }



    .button-slanted-content {

        font-size: 14px;

    }



    .button-not-slanted.show {

        width: 10em;

    }



    .dropdown-item {

        padding: .25rem .5rem;

    }

    .left-brand,

    .middle-brand,

    .right-login {

        width: 33.33%;

    }



    /*=======================

      Index Page

    =========================*/

    /* video */

    .video-cal {

        padding: 0 7rem 1rem 5rem;

    }

    .zimmer-video {

        /*width: 90%;*/

        /* height: 88%; */

    }

    /* calendar */



    #calendar-table>tbody>tr>td {

        height: 4rem;

    }

  /*   img.growth {

        top: 15%;

        left: 54%;

    } 

    img.social {

        left: 22%;

    }

    img.population {

        left: 69%;

    }

    img.mobile {

        left: 54%;

    }
*/
    /* downloadables */

    .downloadables-card {

        /*width: 16rem;*/

    }

    .downloadables-img-top {

        height: 140px;

    }

    .downloadable-col-text>p {

        font-size: 16px;

    }

    /* footer */

    #footer {

        /*padding: 1rem 2rem 1rem 3.5rem;*/

    }



    .current-month>p {

        /* display: none; */

    }

    span.dates {

        left: auto;

    }

    img.growth,

    img.social,

    img.population,

    img.mobile {

        /* display: none; */

    }



    .pdf-icon {

        width: 40%;

    }

    .downloadable-col-text {

        width: 60%;

    }

    .downloadables-container>div {

        margin-bottom: 2rem;

    }





    img.footer-buttons {

         width: 18rem;       

    }

    /*=======================

      Login Page

    =========================*/

    #login-header,

    #reset-instructions {

        padding: 0 10rem;

    }

    .z-image>img {

        left: 36rem;

    }

}



/* 

  ##Device = Tablets, Ipads (portrait)

  ##Screen = B/w 768px to 1024px

*/



@media (max-width: 990px) {

    .button-slanted-content {
        font-size: 12px;
    }



    /*=======================

      Navigation

    =========================*/

    #mobile-nav {

        display: none;

    }



    #homepage {

        height: 60px;

    }



    #homepage>div {

        width: 100%;

    }



    .left-brand img {

        width: 17em;

    }



    .left-brand>a>img.zb-fff {

        left: 3rem;

        bottom: 4.5em;

        width: 9em;

    }



    .right-login img {

        width: 13em;

    }



    a>p.userguide-links {

        font-size: .7em;

        bottom: 5em;

    }



    p.logout {

        font-size: .7em;

        bottom: 9rem;

        left: 12rem;

        width: 8rem;

    }



    .middle-brand img {

        width: 28%;

    }



    .left-brand,

    .middle-brand,

    .right-login {

        width: 33.333%;

    }







    /*=======================

      Index Page

    =========================*/

    .button-slanted {

        width: 8rem;

    }

    .hero-image {

        padding: 5em 0 4em;

    }

    #video-calendar>div.video-cal {

        display: block;

    }

    .video-cal {

        padding: 0;

    }

    .calendar {

        /* padding: 0 3rem 0 5rem;*/

    }

    .video,

    .calendar {

        max-width: 100%;

    }

    span.dates {

        left: auto;

    }

    .calendar>p {

        margin-bottom: 0;

        padding-bottom: 3em;

    }

    .downloadables-img-top {

        height: 14rem;

    }

    .downloadables-card {

        width: 18em;

        margin-bottom: 1em;

    }

    .downloadables-card>div>div {

        padding: .9em 0;

    }

    .pdf-icon {

        width: 40%;

        top: 0;

        right: -1em;

    }

    .pdf-icon>img {

        width: 5em;

    }

    .downloadable-col-text {

        width: 60%;

    }

    #footer {

        /* padding: 1rem 7rem 1rem 7rem;*/
       
    }



    img.footer-buttons {

        width: 8rem;

    }

    .zimmer-video {

        height: 23em;

    }

    /*=======================

      Login Page

    =========================*/

    .brand-text>h6 {

        padding: 0 0 0 1rem;

    }

    #login-header,

    #reset-instructions {

        padding: 0 3rem;

    }

    #login-page>div {

        width: 100%;

    }

    .z-image>img {

        top: 15rem;

        left: 27rem;

    }



    #carouselDownloadables .carousel-control-prev {
        left: 0px !important;
    }

    #carouselDownloadables .carousel-control-next {
        right: 0px !important;
    }



   /* img.growth,

    img.mobile {
        width: 20px;
    }

    img.social {
        width: 35px;
    }

    img.population {
        width: 30px;
    }
    */
}



@media (max-width: 768px) {

    p.logout {

        left: 7rem;

    }

    p.userguide-links>a {

        left: -15%;

    }

    .button-slanted {

        width: 7rem;

    }

    li.nav-item.button-slanted>.nav-link {

        padding: 0.2rem;

    }

    .video-cal {

        padding: 0 1rem 0 3rem;

    }

    .zimmer-video {

        /*width: 95%;*/

    }

    .video,

    .calendar {

        padding: 0;

    }

    #carouselDownloadables>div>div>div.row.container {

        padding: 0;

    }

    .pdf-icon>img {

        top: -2%;

    }

    #footer>div {

        /*padding: 1rem 2rem 1rem 3rem;*/
        
    }

    img.footer-buttons {

        width: 12rem;

    }

    .z-image > img {
        left: 20.5rem;
    }



    .button-slanted.yellow:hover div.dropdown-menu.button-not-slanted.yellow-not-slanted,

    .button-slanted.purple:hover div.dropdown-menu.button-not-slanted.purple-not-slanted {
        width: auto;
    }



    img.social {
        top: 57% !important;
    }

    section#hero-index {
        padding-top: 15px !important;
    }
}



@media (max-width: 480px) {

    #homepage {

        height: 88px;

    }

    nav#navigation,

    .left-brand,

    .right-login {

            display: flexbox;

        background-color: darkgray;
        padding: 10px 0;
    }

    .middle-brand {

        width: 100%;

    }

    nav#mobile-nav {

        display: block;

        background-color:darkgray;

    }



    #navbarDropdown.nav-link.dropdown-toggle,

    li.nav-item>a.nav-link.mobile-nav-link,

    li.nav-item.active>a.nav-link.mobile-nav-link {

        padding: .5rem;

        color: #FFF;

    }

    .website-userguide>a.nav-link.mobile-nav-link,

    .logout>a.nav-link.mobile-nav-link {

        background-color: #123C4D;

    }

    .hero-image {

        padding: 1rem 0 2rem;

    }

    .button-slanted-content {

        font-size: .8rem;

    }

    .zimmer-video {

        height: 18rem;

    }

    .video-cal {

        padding: 0 0 0 2rem;

    }



    span.dates {

        left: auto;

    }



    img.footer-buttons {

        /*width: 13rem;*/

    }

    /*login*/

    .brand-text {

        padding: 0 0 0 1rem;

    }

    #login-page>div {

        width: 100%;

    }

    .z-image>img {

        left: 11.6rem;

        top: 15rem !important;

    }

    .login-wrapper {

        margin: 5rem auto 0;

    }



    .footer-buttons-Links li {
        width: 16%;
        margin-bottom: 10px;
    }



    .dropdown.orange .dropdown-menu.show {
        background: #eaa64b;
        border: none;
        border-radius: 0;
    }

    .dropdown.purple .dropdown-menu.show {
        background: #DFE1ED;
        border: none;
        border-radius: 0;
    }

    .dropdown.yellow .dropdown-menu.show {
        background: #9b6a06;
        border: none;
        border-radius: 0;
    }
    .dropdown.turqoise .dropdown-menu.show {
        background: #0ea899;
        border: none;
        border-radius: 0;
    }

    .dropdown-menu .dropdown-item {
        background-color: transparent;
        color: #212529;
    }

    
    .card.mobile-card {
        background-color: transparent;
        border: 0px;
    }

    .card.mobile-card .card-header {
        padding: 0px;
        border: 0px;
    }

    .card.mobile-card .card-header .mobile-btn {
        width: 100%;
        background-color: transparent;
        text-align: left;
        padding-left: 0.5rem;
        color: #212529;
    }

    .card-body ul {
        padding-left: 25px;
    }

        .card-body ul li {
        }

    .card-body ul li a {
        color: #212529;
    }


/* 
    img.population {
        width: 20px;
    }

    img.social {
        width: 25px;
    }

   img.growth,

    img.mobile {
        width: 16px;
    }



*/

}

@media (max-width: 410px) {

    .button-slanted-content {
        font-size: 14px;
    }

    #login-header,

    #reset-instructions {

        padding: 0;

    }

    .brand-text {

        padding: 1rem 0 0 0;

    }

    #login-page {

        padding: 0 1rem;

    }

    .z-image>img {

        left: 10rem;

        top: 13rem !important;

    }



    svg.svg-inline--fa.fa-angle-right.fa-w-6.custom-next-icon-cal,

    svg.svg-inline--fa.fa-angle-left.fa-w-6.custom-prev-icon-cal {
        top: 11.2rem !important;
    }

}
@media (max-width: 480px) {
.calendar img{
    width: 16px !important;
    margin-left: -8px;
    margin-top: -8px;
}
.calendar img.social{
    width: 20px !important;
    margin-left: -10px;
    margin-top: -10px;
}
.calendar img.population{
    width: 20px !important;
    margin-left: -10px;
    margin-top: -10px;
}
}

@media (max-width: 360px) {

    #login-header>div {

        padding: 1rem 0;

    }

    #login-page {

        padding: 0 1rem;

    }

    #login-header,

    #reset-instructions {

        padding: 0 1rem;

    }

    .brand-text {

        padding: 1rem 0 0;

    }

    #navbarSupportedContent.navbar-collapse {

        padding-top: 1rem;

    }

    #video-calendar>div.video-cal {

        padding: 0;

        margin: 0;

    }

    #calendar-table>tbody>tr>td.current-month {

        height: 3rem;

    }

    #carouselDownloadables>div>div {

        padding: 0;

    }

    .z-image>img {

        left: 7.6rem;

        top: 15rem !important;

    }
    .login-wrapper>h6{
        padding-left: 30px;
        padding-right: 30px;
    }
        .login-wrapper > h6 br {
            display: none;
        }
}

@media (max-width: 314px) {

    .z-image>img {

        left: 6.6rem;

        top: 15rem;

    }

}
@media only screen and (max-width:400px) {
    #navbar {
        float: none;
        width: 400px;
    }
}
@media (max-width:736px){
    button.navbar-toggler {
        display: block;
        border: 1px solid #ccc;
    }
    
    button.navbar-toggler span {
        display: block;
        height: 2px;
        margin: 6px;
        background: #777;
        padding: 0px 12px;
        width: 10px;
    }

  
    .orange-dropdown-toggle:after,  
    .purple-dropdown-toggle:after,
    .blue-dropdown-toggle:after,
    .yellow-dropdown-toggle:after,
    .turquoise-dropdown-toggle:after {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: .285em;
        vertical-align: .255em;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
    }

    #navigation {
        background-image :none;
    }

    #navigation li {
        z-index: 1000;
        width: 100%;
    }

    .navbar-toggler:not(:disabled):not(.disabled) {
        display: block;
        padding: 3px 4px;
        margin: 0 20px;
    }

    .collapse, #ctl00_Div1 {
        display:none;   
    }

    .navbar-light .navbar-toggler {
        color: rgba(0,0,0,.5);
        border-color: rgba(0,0,0,.1);
    }

    body {
        min-width: #26b5c7!important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .nav-link {
        display: block;
        padding: .5rem 0rem;
    }
}

@media (min-width: 991px) and (max-width: 1024px) {
    .nav-link {
        display: block;
        padding: .5rem .8rem;
    }
}

@media (min-width: 375px) and (max-width: 736px) {

    ul.nav.nav-pills ul ul ul.rmVertical.rmGroup.rmLevel2 li a span {
        font-size: 15px;
        padding-left: 20px;
    }

    #navigation li .rmItem.rmFirst, #navigation li .rmItem {
        width: 100%;
    }

    .button-slanted {
        -ms-transform: none;
        -webkit-transform: none;
        transform: none;
        width: 13rem;
        text-align: center;
        font-size: 16px;
    }

    .button-slanted:hover {
        box-shadow: inset 0 0 10px #000000;
    }

    .button-not-slanted.show {
        transform: none;
        text-align: center;
        border: none;
        border-radius: 0;
        padding: 0;
    }

    .button-slanted-content {
        color: #FFF;
        -ms-transform: none;
        -webkit-transform: none;
        transform: none;
        display: inline-block;
    }

    .RadMenu .rmLink {
        width: auto;
        padding: 0 0 0 12px;
        outline: 0;
        float: none!important;
        display:table;  
    }

   /* #ctl00_RadMenu1 {
        padding:0 15px;
    }

   */

    .left-brand,  .right-login {
       display:none;
    }

    .middle-brand {
        text-align:center;
    }

    .nav-link {
        display: block;
        padding: .5rem 0rem;
    }

    .rmItem .rmSlide {
        position: initial!important;
    }

    .rmSlide, .rmSlide ul, .rmSlide ul li, .rmSlide ul li a.rmLink {
        width: 100%!important;
        transition:none;
        display:table;
    }

    .rmSlide ul {
        margin-top: -2px!important;
    }

    .RadMenu .rmVertical .rmItem .rmText {
        padding: 0 10px;
    }

    .collapse.show {
        display: block;
        margin-top: 10px;
    }
    .RadMenu .rmSlide, .rmSlide { height:auto!important ; display:table;}
    .RadMenu .rmVertical .rmLink, .RadMenu .rmHorizontal .rmVertical .rmLink {
        background-color: transparent!important;
        display:table;
    }


    ul.nav-pills ul li:nth-child(2) ul {
        background-color: orange !important;
    }

    
    ul.nav-pills ul li:nth-child(5) ul {
        background-color: #add8e6 !important;
    }

    
    ul.nav-pills ul li:nth-child(6) ul {
        background-color: #F2BB00 !important;
    }


    
    ul.nav-pills ul li:nth-child(7) ul {
        background-color: #0EA899 !important;
    }
    .RadMenu .rmVertical .rmItem .rmText {
        padding:0;
        margin:0;
    }
}
@media (min-width: 767px) {
    .collapse {
        display: block;
    }

    .navbar-toggler:not(:disabled):not(.disabled) {
        display: none;
    }

    #navbarSupportedContent ul.nav {
        justify-content: center;
    }
}

 .carousel-inner .carousel-item img {
        width: 100%!important;
    }

ul.nav.nav-pills {
    background-color: #26b5c7;
}

/* Submenu hover - text color only, no background change */
.submenu-item:hover {
    background-color: #26b5c7 !important;
}

/* Target the rmLink element specifically to prevent background color on hover */
.rmLink:hover {
    background-color: #26b5c7 !important;
}

    .rmLink:hover .rmText {
        color: white !important;
        background-color: #26b5c7 !important;
    }

        .rmLink:hover .rmText span {
            color: white !important;
            background-color: #26b5c7 !important;
        }

    .rmLink:hover .dropdown-item {
        color: white !important;
        background-color: #26b5c7 !important;
    }

    /* Ensure no background changes on any child elements of rmLink */
    .rmLink:hover * {
        background-color: #26b5c7 !important;
    }

/* Override any existing RadMenu hover styles */
.RadMenu .rmLink:hover {
    background-color: #26b5c7 !important;
}

/* RadGrid Header Styling Override - Applied Globally */
html body .RadGrid_MetroTouch .rgHeader,
html body .RadGrid_MetroTouch .rgHeaderDiv th {
    background: #26b5c7 !important;
    background-image: none !important;
    color: white !important;
    font-weight: bold !important;
    text-align: center !important;
    border-color: #4ab3c2 !important;
}

/* Filter row styling */
html body .RadGrid_MetroTouch .rgFilterRow th {
    background: #4ab3c2 !important;
    background-image: none !important;
    border-color: #3a9eab !important;
}

/* Optional: Header text styling for better consistency */
html body .RadGrid_MetroTouch .rgHeader a,
html body .RadGrid_MetroTouch .rgHeaderDiv th a {
    color: white !important;
    text-decoration: none !important;
}
/* Hide RadGrid Group Panel completely - Global Solution */
html body .RadGrid_MetroTouch .rgGroupPanel,
html body .RadGrid .rgGroupPanel {
    display: none !important;
}

/* Set all RadGrid header text to 11px globally */
html body .RadGrid_MetroTouch .rgHeader,
html body .RadGrid_MetroTouch .rgHeader th,
html body .RadGrid_MetroTouch .rgHeaderDiv th,
html body .RadGrid_MetroTouch .rgHeader a,
html body .RadGrid_MetroTouch .rgHeaderDiv th a,
html body .RadGrid_MetroTouch .rgHeader span,
html body .RadGrid_MetroTouch .rgHeaderDiv th span {
    font-size: 11px !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    color: white !important;
}