:root {
    --header-background-primary: #cadc46;
    --header-text-primary: #272528;
    --footer-background-primary: #272528;
    --footer-text-primary: #ffffff;
    --background-primary: #f7f8f9;
    --text-primary: #444444;
    --map-modal-header-bg: #cadc46;
    --map-modal-header-text: #000;
    --menu-background: #272528;
    --element-background: #cadc46;
    --element-text: #000000;
    --button-primary: #62701e;
    --button-text-primary: #ffffff;
    --button-hover-primary: #83c545;
    --button-hover-primary-text: #000000;
    --button-secondary: #272528;
    --button-text-secondary: #ffffff;
    --button-hover-secondary: #62701e;
    --button-hover-secondary-text: #ffffff;
    --button-third: #cadc46;
    --button-text-third: #000;
    --button-hover-third: #83c545;
    --button-hover-third-text: #000000;
    --link-text: #62701e;
    --link-hover: #000;
    --nav-background: #62701e;
    --nav-hover-background: #cadc46;
    --nav-color: #fff;
    --nav-hover-color: #000;
    --alert-info-background: #d4e48e;
    --alert-info-text: #000;
}

html,
body {
    background-color: var(--background-primary);
    color: var(--text-primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-style: normal;
}

a {
    color: var(--link-text);
}

a:focus,
a:hover {
    color: var(--link-hover);
}

#header-1 {
    background-color: var(--background-primary);
}

    #header-1 span {
        color: var(--header-text-primary);
    }

.bg-green {
    background-color: var(--header-background-primary);
    color: var(--header-text-primary);
}

#header-2,
#header-2-content,
#menu-items {
    background: var(--menu-background);
    color: var(--element-text);
}

    #header-2-content #template-menu > li {
        background: var(--menu-background);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-top: 5px solid rgba(255, 255, 255, 0.25);
    }

        #header-2-content #template-menu > li .nav-link {
            color: var(--button-text-primary);
        }

        #header-2-content #template-menu > li:hover {
            background: var(--button-hover-primary);
            color: var(--button-text-primary);
        }

    #header-2 .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

.nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--nav-background);
    color: var(--nav-color);
}
.nav-item .nav-link {
    color: var(--nav-background);
}

#side-nav-tab-links .nav-link {
    cursor: pointer;
    border: none;
    text-align: left;
    width: 100%;
    transition: background 0.3s ease;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    background-color: var(--nav-hover-background);
    color: var(--nav-hover-color);
}

.nav-pills .nav-link.active {
    background-color: var(--nav-hover-background);
    color: var(--nav-hover-color);
}

.top-menu-list.highlighted {
    border-top: 5px solid #d5e035 !important;
    background: rgba(255,255,255,0.03);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--button-text-primary);
}


.btn-primary {
    background-color: var(--button-primary);
    border-color: var(--button-primary);
    color: var(--button-text-primary);
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: var(--button-hover-primary);
        border-color: var(--button-hover-primary);
        color: var(--button-text-primary);
    }

.btn-secondary {
    background-color: var(--button-secondary);
    border-color: var(--button-secondary);
    color: var(--button-text-secondary);
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--button-hover-secondary);
        border-color: var(--button-hover-secondary);
        color: var(--button-hover-secondary-text);
    }

.btn-third {
    background-color: var(--button-third);
    border-color: var(--button-third);
    color: var(--button-text-third);
}

    .btn-third:hover,
    .btn-third:focus {
        background-color: var(--button-hover-third);
        border-color: var(--button-hover-third);
        color: var(--button-hover-third-text);
    }

.modal-header {
    background-color: var(--element-background);
    color: var(--element-text);
}

    .modal-header .bootbox-close-button {
        display: none;
    }

.map-heading {
    background-color: #414042;
    color: #ffffff;
}

    .map-heading #map-disclaimer-btn {
        background-color: var(--button-primary);
        color: var(--button-text-primary);
    }

.leaflet-container {
    font-size: 0.875rem;
    font-family: 'Montserrat', sans-serif;
}

.goog-te-gadget .goog-te-combo {
    background-color: var(--element-background);
    color: var(--element-text);
    font-family: 'Montserrat', sans-serif;
}

.select-language__element {
    color: var(--element-text);
}

#road-condition-modal .modal-dialog,
#road-condition-for-rc-modal .modal-dialog {
    max-width: 90%;
}

#warning-modal .modal-header,
#optin-modal .modal-header,
#verify-phone-modal .modal-header,
#video-modal .modal-header,
#dashboard-modal .disclaimer-modal .modal-header {
    background-color: var(--element-background);
    color: var(--element-text);
}

.social-media__nav .nav-link.active {
    background-color: var(--button-secondary);
    color: var(--button-text-secondary);
}

.social-media__nav .nav-link:not(.active):hover,
.social-media__nav .nav-link:not(.active):focus {
    background-color: var(--button-hover-secondary);
    color: var(--button-hover-secondary-text);
}

.radio-station__table th {
    font-weight: 500;
    background-color: var(--element-background);
    color: var(--element-text);
}

.radio-station__table tr {
    font-weight: 500;
}

.operation__card h4 {
    color: var(--text-primary);
}

.neighbouring-council__toggle {
    background-color: var(--element-background);
    color: var(--element-text);
}

.neighbouring-council__item {
    background-color: var(--element-background);
}

.neighbouring-council__link {
    color: var(--element-text);
}

.neighbouring-council__link:focus,
.neighbouring-council__link:hover {
    background-color: var(--button-hover-primary);
    color: var(--element-text);
}

.school-social-media td a {
    word-break: break-all;
}

.radio-station__table th {
    font-weight: 500;
    background-color: var(--element-background);
    color: var(--element-text);
}

.radio-station__table tr {
    font-weight: 500;
}

.neighbouring-council__toggle {
    background-color: var(--element-background);
    color: var(--element-text);
}

.neighbouring-council__item {
    background-color: var(--element-background);
}

.neighbouring-council__link {
    color: var(--element-text);
}

.neighbouring-council__link:hover,
.neighbouring-council__link:focus {
    background-color: var(--button-hover-primary);
    color: var(--element-text);
}

#cameras-page-header,
#book-page-header,
#risk-page-header {
    background-color: var( --menu-background);
    color: var(--header-text-primary)
}

#cameras-back-button,
#book-back-button,
#risk-back-button {
    background-color: var(--button-secondary);
    border-color: var(--button-secondary);
    color: var(--button-text-secondary);
}

    #cameras-back-button:hover,
    #cameras-back-button:focus,
    #book-back-button:hover,
    #book-back-button:focus,
    #risk-back-button:hover,
    #risk-back-button:focus {
        background-color: var(--button-hover-secondary);
        border-color: var(--button-hover-secondary);
        color: var(--button-hover-secondary-text);
    }

/*footer*/
footer {
    background: var(--footer-background-primary);
    color: var(--footer-text-primary);
    font-size: 0.75rem;
}

    footer a,
    footer a:hover,
    footer a:focus {
        color: var(--footer-text-primary);
    }

    footer #getready-link {
        float: inline-end;
    }

    footer #contact-information {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10em;
    }

@media (max-width: 768px) {
    footer #contact-information {
        justify-content: flex-start;
        height: 4em;
    }
}

/*footer end*/

.top-tab .top-tab-style.top-tab-with-video {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 1rem;
}

.top-tab-with-video {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .top-tab-with-video .tab-video-player-corner {
        position: absolute;
        top: 0.4rem;
        right: 0.4rem;
        z-index: 1;
        line-height: 1;
        cursor: pointer;
    }

    .top-tab-with-video .top-tab-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .top-tab-with-video .top-tab-icon img {
        height: 4rem;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    .top-tab-with-video .tab-info-div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 0.5rem;
        text-align: center;
    }

.rural-connect-tabs .nav-link.active,
#question-topics-tabs-list .nav-link.active {
    background-color: var(--button-secondary);
    color: var(--button-text-secondary);
}

.rural-connect-tabs .nav-link:not(.active):hover,
.rural-connect-tabs .nav-link:not(.active):focus,
#question-topics-tabs-list .nav-link:not(.active):hover, 
#question-topics-tabs-list .nav-link:not(.active):focus {
    background-color: var(--button-hover-secondary);
    color: var(--button-hover-secondary-text);
}

#tab-roadwork.active,
#tab-traffic-alert.active {
    background-color: var(--nav-background);
    color: var(--nav-color);
}

.alert {
    border-radius: 0.375rem;
}

    .alert i {
        margin-right: 0.5rem;
    }

.alert-info i {
    flex-shrink: 0;
}

.alert .btn-close {
    opacity: 0.5;
}

.alert .btn-close:hover {
    opacity: 1;
}

.logout-button {
    background-color: var(--button-third);
    border-color: var(--button-third);
    color: var(--button-text-third);
    white-space: nowrap;
}

.logout-button:hover,
.logout-button:focus {
    background-color: var(--button-hover-third);
    border-color: var(--button-hover-third);
    color: var(--button-text-third);
}

.logout-button i {
    font-size: 1rem;
}

@media (max-width: 767px) {
    #logout-button {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #logout-button-small-screen {
        display: none !important;
    }
}

.tab-pane {
    display: none;
}

.tab-pane.active,
.tab-pane.show {
    display: block;
}


/* Opt-in Management Styles */
#optin-manage-container {
    padding: 1rem 0;
}

#optin-manage-tab-content {
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 0.25rem;
}

.side-nav {
    position: sticky;
    top: 1rem;
}

.alert-info {
    background-color: var(--alert-info-background);
    border-color: var(--alert-info-background);
    color: var(--alert-info-text);
}