/*Global style*/
header,
body {
    cursor: default;
}

html,
body {
    font-size: 16px;
    height: 100%;
    line-height: 1.375;
}

body {
    overflow-y: scroll;
    min-height: 100%;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;
}

:root {
    --button-font-size: 14px;
}

[class^="col-"], [class*=" col-"] {
    padding: 5px;
}

.pac-container {
    z-index: 99999 !important;
}

a {
    cursor: pointer;
    text-decoration: none;
}

    a:focus,
    a:hover {
        text-decoration: underline;
        background-color: transparent;
    }

li{
    font-size: 1rem;
}

.btn {
    font-size: 0.85rem;
}

.form-control {
    font-size: 0.875rem;
}

/* Subscription and Profile Management Styles */
.subscription-table-body .switch {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.65rem;
}

.subscription-checkbox {
    text-align: center;
}

.profile-container,
.subscription-container {
    max-width: 1200px;
}

.container {
    width: 90%
}

@media (min-width: 1400px) {
    .container {
        max-width: none;
    }
}

#empty-content-page {
    width: 100%;
}

/*Global style end*/

/*header*/
#header-1 {
    padding: 0;
}

#header-1-content {
    min-height: clamp(80px, 15vw, 120px);
}

#logo-img {
    height: clamp(56px, 10vw, 120px);
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

#header-2-content {
    text-align: center;
}

    #header-2-content .navbar {
        min-height: 40px;
        border: 0px !important;
        border-radius: 0;
        margin-bottom: 0px !important;
    }

    #header-2-content #menu-items {
        width: 100%;
        float: left;
        padding: 0px;
    }

/* Google Translate bar */
#header-google-translate-bar {
    display: flex;
    justify-content: center;
    padding: 4px 16px;
    background: transparent;
}

#header-google-translate {
    width: auto;
}

@media (min-width: 768px) {
    #header-1 {
        position: relative;
    }

    #header-google-translate-bar {
        position: absolute;
        right: 5px;
        top: 5px;
        justify-content: flex-end;
        padding: 0;
        z-index: 10;
    }
}

/*header end*/

/*body*/
.main-wrapper {
    width: 100%;
    box-sizing: border-box;
    background-size: cover; /* Standard property */
    -webkit-background-size: cover;
}

.banner-container {
    position: relative;
    margin-left: 0;
    margin-right: 0;
}

#banner-image {
    padding-left: 0;
    padding-right: 0;
}

table {
    text-align: left;
}

table,
th,
td {
    border: 1px solid #e1e1e1;
}

table th {
    padding: 5px;
    text-align: center;
}

table td {
    padding: 5px;
    text-align: left;
}

table tbody tr:nth-child(even) {
    background: #ccc;
}

table.dataTable {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info,
.dt-paging,
.dt-info {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_filter input,
.dt-search input {
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_length select,
.dt-length select {
    font-size: 0.875rem;
}

.modal-header {
    justify-content: center;
    position: relative;
}

    .modal-header .modal-title {
        text-align: center; 
        width: 100%; 
    }

    .modal-header .btn-close {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

.modal-body {
    padding: 15px;
    max-height: 500px;
    overflow-y: auto;
    width: 100%;
    font-size: 1rem;
}

    .modal-body .btn-close {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

.modal-body table {
    width: 100%;
}

.modal-footer {
    padding: 0 0.75rem;
}

.modal-footer .acknowledgement {
    font-size: 0.85rem;
    font-style: italic;
    text-align: left;
}

.modal-dialog.modal-wide {
    width: auto;
    max-width: 900px;
}

@media (max-width: 991.98px) {
    .modal-dialog.modal-wide {
        max-width: 720px;
    }
}

@media (max-width: 575.98px) {
    .modal-dialog.modal-wide {
        max-width: calc(100% - 2rem);
        margin: 1rem auto;
    }
}

.content-item {
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0.28em;
    margin: 5px;
    padding: 10px;
}

.content-title {
    font-weight: bold;
}

.content-title a {
    text-decoration: none;
    background-color: transparent;
}

.content-title a:focus,
.content-title a:hover {
    text-decoration: underline;
}

.content-update-time {
    color: #666;
    font-style: italic;
    font-size: 0.85rem;
}

.container-fluid > .navbar-collapse,
.container > .navbar-collapse {
    margin: 0px;
}
/*widget general end*/

/*widget top-tab*/
.top-tab {
    display: flex;
    flex-grow: 1;
    padding: 0px;
    flex-wrap: wrap;
}

    .top-tab > div {
        cursor: pointer;
    }

@media (min-width: 769px) {
    .tab-div {
        padding: 5px;
        min-width: 25%;
        width: auto;
        flex: 1 0 25%;
    }
}

@media (max-width: 768px) {
    .tab-div {
        padding: 5px;
        min-width: 50%;
        width: auto;
        flex: 1 0 50%;
    }
}

@media (max-width: 480px) {
    .tab-div {
        padding: 5px;
        min-width: 100%;
        width: auto;
        flex: 1 0 100%;
    }
}


.top-tab .top-tab-style {
    width: 100%;
    height: 100%;
    display: grid;
    border-radius: 0.3571em;
    float: left;
    padding-top: 1rem;
    padding-bottom: 1rem;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    align-items: center;
}

.top-tab .top-tab-icon {
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: center;
}

    .top-tab .top-tab-icon img {
        height: 4rem;
    }

    .top-tab .top-tab-icon .fa {
        font-size: 3.5rem;
    }

.top-tab .top-tab-event-count {
    width: 100%;
    float: left;
    grid-row: 2;
    grid-column: 1;
    box-sizing: border-box;
    font-weight: bolder;
    font-size: clamp(2rem, 4vw, 3.5rem);
    text-align: center;
    padding: 0 5px;
    line-height: 1;
}

.top-tab .tab-info-div {
    grid-row: 2;
    grid-column: 2;
    text-align: center;
}

    .top-tab .tab-info-div .tab-info-inner-div {
        text-align: left;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        text-align: left;
    }

    .top-tab .tab-info-div .tab-update-time {
        clear: left;
        font-size: 0.8rem;
        font-style: italic;
    }

    .top-tab .tab-info-div .link-tab-info-inner-div {
        text-align: center;
    }

.top-tab .top-tab-external-link a,
.top-tab .optin__tab .optin__content {
    display: block;
    text-decoration: none;
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.top-tab #current-temperature-div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-tab #temperature-container {
    display: grid;
    grid-column-gap: 0.5rem;
}

    .top-tab #temperature-container #temperature-image {
        text-align: center;
        grid-row: 1;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .top-tab #temperature-container #temperature-now {
        grid-row: 2;
    }

    .top-tab #temperature-container #temperature-Feel {
        grid-row: 2;
        float: right;
    }

    .top-tab #temperature-container .temperature {
        font-size: 2rem;
    }


@media (max-width: 767px) {
    .top-tab .top-tab-icon {
        display: none;
    }

    .top-tab .top-tab-event-count {
        display: flex;
        align-items: center;
        justify-content: left;
        margin-left: 20px;
    }
}

.top-tab-with-video img{
    max-width: 70%
}

/*widget top-tab end*/
/*widget small-tab*/
.small-tab {
    display: flex;
    padding: 0px;
    flex-wrap: wrap;
    align-items: stretch;
}

    .small-tab > div {
        cursor: pointer;
    }

    .small-tab > [class^="col-"],
    .small-tab > [class*=" col-"] {
        display: flex;
    }

.small-tab i,
.small-tab img {
    margin-right: 0.3em;
}

    .small-tab .small-tab-style {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 100%;
        font-size: 1.1rem;
        border-radius: 5px;
        padding: 12px;
    }

.small-tab-style .tab-info-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.small-tab-style .tab-info-div .small-tab-item-count {
    margin-right: 10px;
    font-weight: 600;
}

.small-tab-style a {
    text-decoration: none;
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

#dashboard-modal .modal-body:has(#flooding-widget-container) {
    max-height: none;
}

#flooding-widget-container table {
    width: 80%;
    margin-left: 5%;
    table-layout: fixed;
}

#flooding-widget-container table,
#flooding-widget-container th,
#flooding-widget-container td {
    border: none;
    background-color: #ffffff;
}

/*widget small-tab end*/

/*widget map*/
.map-heading {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    border-bottom: none;
    border-radius: 5px;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    min-height: 40px;
    font-size: 1.1rem;
    padding-right: 3.5rem;
}

    .map-heading .map-title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap; /* prevent wrapping which would shift center */
        width: auto;
        text-align: center;
    }

    .map-heading .disclaimer-btn {
        text-transform: uppercase;
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
        /* if you prefer the button to participate in flow instead, remove position:absolute and use margin-left:auto */
    }

.map {
    min-height: 600px;
}

.map #legend-icon {
    width: 20px;
    height: 20px;
}

.map .search-box {
    padding: 8px;
    padding-left: 48px;
    width: 273px;
    border: 1px solid #f5f5f5;
    color: gray;
    outline: 0;
    font-size: 0.938rem;
    border-radius: 3px;
}

.leaflet-bar button {
    padding: 0;
}

#map-legend table,
#map-legend th,
#map-legend td {
    background-color: #ffffff;
    border: 0;
}

#map-legend h3 {
    font-weight: 700;
}

#map-legend th {
    padding: 1px;
}

#map-legend th img {
    width: 30px;
    height: 30px;
}

#map-legend td {
    font-size: 1rem;
}

#dashboard-modal #dashboard-modal-label img {
    margin: 0px 10px;
    padding-bottom: 4px;
}

#dashboard-modal .modal-body th {
    text-align: left;
}

#dashboard-modal .modal-body img {
    max-height: 400px;
}

#dashboard-modal .carousel-inner > .item > a > img,
.carousel-inner > .item > img {
    margin: 0 auto;
}

.carousel-inner > .item > a > img,
.carousel-inner > .item > img {
    display: block;
    width: 80%;
    height: auto;
    max-height: 500px;
}

.accordion-container {
    max-width: 350px;
    min-height: 100px;
    margin: 1rem auto;
    text-align: left;
    overflow-y: auto;
    overflow-x: hidden;
}

.accordion-container button.menu {
    margin: 0;
    padding: 2px 7px;
    font-weight: 500;
    font-size: 1.1rem;
    border: none;
    background-color: transparent;
    border-radius: 5px;
}

.accordion-container button.menu:hover {
    padding: 1px 5px;
    background-color: rgba(60, 64, 67, 0.04);
    border: 1px solid #3c4043;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.accordion-container button.menu[aria-expanded='false']::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E%0A");
    position: relative;
    left: -2px;
}

.accordion-container button.menu[aria-expanded='true']::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E ");
    position: relative;
    left: -4px;
    top: 2px;
}

.accordion-container article {
    background: rgba(255, 255, 255, 0.5);
    margin-left: 1.25rem;
    z-index: 10;
}

.accordion-container label {
    font-weight: 400;
}

.accordion-container label input[type='checkbox'],
.accordion-container label input[type='radio'] {
    margin-right: 0.5rem;
}

.accordion-container label .pin-count {
    width: 20px;
    height: 20px;
    color: white;
    background-color: #517900;
    border-radius: 50%;
    text-align: center;
    margin-left: auto;
    float: right;
}

.accordion-container input[type='checkbox']:disabled + span {
    color: #ccc;
    cursor: not-allowed;
}

/* Ensure layer-control item labels align the pin-count to the right */
#accordion-container .layers-container label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0; /* optional spacing */
}

#accordion-container .layers-container label > span:not(.pin-count) {
    /* make the name/span take remaining space so the pin-count can be pushed to the right */
    flex: 1 1 auto;
    min-width: 0; /* allow truncation if needed */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#accordion-container .layers-container label .pin-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto; /* push to the right */
    float: none; /* remove old float behaviour */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .leaflet-control-layers-toggle {
        display: none !important;
    }
}

.layer-panel-toggle {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 14px;
    cursor: pointer;
}

@media (min-width: 769px) {
    .layer-panel-toggle {
        display: none;
    }
}


/*widget map end*/

/*widget social media*/
.social-media__nav .nav-link.active {
    text-decoration: none;
    background-color: transparent;
}

.social-media__nav .nav-link:focus,
.social-media__nav .nav-link:hover {
    text-decoration: underline;
}

.social-media__tabs {
    justify-content: center;
    display: flex;
    overflow-x: hidden;
}

.social-media__tab-pane {
    height: 600px;
    overflow-y: hidden;
}

.social-media__frame--desktop {
    display: block;
}

.social-media__frame--tablet,
.social-media__frame--mobile {
    display: none;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .social-media__frame--tablet {
        display: block;
    }

    .social-media__frame--desktop,
    .social-media__frame--mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    .social-media__frame--mobile {
        display: block;
    }

    .social-media__frame--desktop,
    .social-media__frame--tablet {
        display: none;
    }
}
/*widget social media end*/

/*widget radio station*/
.radio-station__table {
    width: 100%;
}

.radio-station__table th {
    text-align: center;
    padding: 0.5em 1em;
}

.radio-station__cell {
    text-align: left;
}
/*widget radio station end*/

/*widget neighborhood list */
.neighbouring-council__toggle {
    text-align: center;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1rem;
}

.neighbouring-council__toggle:not(.collapsed) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.neighbouring-council__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 5px;
}

.neighbouring-council__item {
    text-align: center;
    padding: 5px 10px;
    border-bottom-style: inset;
    border-bottom-width: thin;
}

.neighbouring-council__item:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.neighbouring-council__link {
    font-size: 1.1rem;
    font-weight: bold;
    display: block;
    text-align: center;
}
/*widget neighborhood list end*/
/*accessibility start*/
.left-floaters {
    position: fixed;
    z-index: 999999;
    top: 30%;
    right: 0;
}

    .left-floaters li {
        list-style: none;
    }

.left-tool-list {
    border: solid 1px #fff;
    background-color: #272528;
    color: #ffffff;
    padding-left: 0;
}

.btn-accesibility-toggle {
    background-color: #272528;
    color: #ffffff;
}

#accessibility-icon {
    font-size: 2rem;
    color: #fff;
}

#accessibility-main {
    background-color: #62701e;
    width: 60px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #fff;
}

.left-tool-list-items span {
    font-size: 1rem;
}
/****high contrast start****/

.high-contrast *:not(.map *):not(#recovery-detail-pdf *):not(.carousel-container *) {
    background-color: black !important;
    color: white !important;
    border-color: white !important;
}

.high-contrast .map *,
.high-contrast .flipMenulist {
    color: black;
}

.high-contrast .map,
.high-contrast img,
.high-contrast iframe,
.high-contrast #recovery-detail-pdf {
    filter: grayscale(1);
}

.high-contrast button,
.high-contrast input,
.high-contrast textarea,
.high-contrast select {
    background-color: black !important;
    color: white !important;
    border-color: white !important;
}

.high-contrast .top-tab-style,
.high-contrast .carousel-container img,
.high-contrast .small-tab-style,
.high-contrast #google_translate_element,
.high-contrast .recovery-buttons,
.high-contrast .neighbour-council-header-text,
.high-contrast .neighbour-council-dropdown-list li,
.high-contrast footer,
.high-contrast header,
.high-contrast .header-nav,
.high-contrast .top-menu-list,
.high-contrast .topmenulist,
.high-contrast .operation__card {
    border: solid 1px white !important;
}

.high-contrast .preview {
    background-color: unset !important;
}

.high-contrast .easy-button-button,
.high-contrast #searchbox-map {
    background-color: white !important;
}

.high-contrast button.menu,
.high-contrast .left-floaters,
.high-contrast .crt-play,
.high-contrast .arrow,
.high-contrast .arrow:after {
    background-color: transparent !important;
    color: black !important;
}

.high-contrast .btn-accesibility-toggle {
    border: unset !important;
}

.high-contrast .highlighted {
    background-color: #fff !important;
    color: black !important;
}

.high-contrast .slider {
    background-color: gray !important;
}

.high-contrast .footer-social-media-bg {
    fill: black;
}

.high-contrast .footer-social-media {
    fill: white;
}
/****high contrast end****/
/****Light Background start****/

.light-contrast *:not(.map):not(.map *):not(.top-tab-icon img):not(.carousel-container *):not(.crt-play):not(.slider):not(#recovery-detail-pdf *):not(#racqLogo):not(#logo-img) {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}

.light-contrast .top-tab-icon img:not(.black-icon) {
    filter: grayscale(1) invert(1);
}
.light-contrast .map *,
.light-contrast .flipMenulist {
    color: black;
}

.light-contrast .map,
.light-contrast img:not(.top-tab-icon img),
.light-contrast iframe,
.light-contrast #recovery-detail-pdf {
    filter: grayscale(1);
}

.light-contrast button,
.light-contrast input,
.light-contrast textarea,
.light-contrast select {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}

.light-contrast .top-tab-style,
.light-contrast .carousel-container img,
.light-contrast .small-tab-style,
.light-contrast #google_translate_element,
.light-contrast .recovery-buttons,
.light-contrast .neighbour-council-header-text,
.light-contrast .neighbour-council-dropdown-list li,
.light-contrast footer, .light-contrast header,
.light-contrast .header-nav,
.light-contrast .top-menu-list,
.light-contrast .map-heading,
.light-contrast .topmenulist,
.light-contrast .operation__card {
    border: solid 1px black !important;
}

.light-contrast .easy-button-button,
.light-contrast #searchbox-map,
.light-contrast .map-heading {
    background-color: white !important;
}

.light-contrast button.menu,
.light-contrast .left-floaters,
.light-contrast .arrow,
.light-contrast .arrow:after {
    background-color: transparent !important;
    color: black !important;
}

.light-contrast .btn-accesibility-toggle {
    border: unset !important;
}

.light-contrast .highlighted {
    background-color: black !important;
    color: white !important;
}

.light-contrast .slider {
    background-color: gray !important;
}

.light-contrast .footer-social-media-bg {
    fill: white;
}

.light-contrast .footer-social-media {
    fill: black;
}
.light-contrast #logo-img, .light-contrast #racqLogo {
    background-color: transparent !important;
    filter: grayscale(1) invert(1);
}
/****Light Background end****/
/****Link Underline start****/
.link-underline {
    text-decoration: underline !important;
}
/****Link Underline end****/
/*accessibility end*/
/*widget optin*/
#capcha {
    display: inline-block;
    margin-top: 20px;
}

.optin__tab {
    width: 100%;
}

.optin__icon-image {
    height: 26px;
}

#optin-modal .tab-content {
    margin-top: 10px;
    height: auto;
    overflow-x: auto;
    overflow-y: auto;
}

#optin-modal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

#verify-phone-modal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
}

.mobile-verification-text {
    font-size: 0.75rem;
    color: #6c757d;
}

/* Form field validation styles */
.form-field.has-error .form-control {
    border-color: #dc3545;
}

.form-field.has-success .form-control {
    border-color: #198754;
}

.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback,
.error-block {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.87em;
    color: #dc3545;
}

.valid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #198754;
}

.forgot-password-form {
    max-width: 600px;
    margin: 0 auto;
}

#error-message-container {
    min-height: 0;
    margin-bottom: 1rem;
}

#error-message-container:empty {
    display: none;
}

.form-submit-btn {
    width: 40%;
    min-width: 150px;
}

.col-form-label {
    text-align: right;
    padding-right: 1rem;
}

@media (max-width: 576px) {
    .form-submit-btn {
        width: 60%;
    }
    
    .col-form-label {
        text-align: left;
        padding-right: 0.5rem;
    }
}

.logout-button {
    cursor: pointer;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    background: var(--button-primary, #000000);
    color: var(--button-text-primary, #ffffff);
    display: flex;
    width: max-content;
    align-items: center;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all 0.15s ease-in-out;
}

.logout-button:hover,
.logout-button:focus {
    background: var(--button-hover-primary, #000000);
    color: var(--button-text-primary, #ffffff);
    opacity: 0.9;
}

#logout-button {
    position: relative;
    float: inline-end;
    top: 5px;
}

#logout-button-small-screen {
    float: inline-start;
}

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

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

/*widget optin end*/

/*widget warning widget*/
.warning-widget {
    display: flex;
}

.warning-widget-div {
    border: 2px solid #e3e3e3;
    border-radius: 5px;
    padding: 12px;
    background: #ffffff;
    height: 100%;
    width: 100%;
}

.warning-widget-div .warning-content-div {
    float: left;
    width: 100%;
    padding: 20px 5px;
}

.warning-view-more,
#bushfire-view-more {
    cursor: pointer;
    background-color: #337ab7;
    color: #ffffff;
    float: right;
    clear: left;
    padding: 5px 20px;
    border-radius: 3px;
}

.bushfire-content-item {
    border: 1px solid #e3e3e3;
    border-radius: 0.28em;
    margin: 5px;
    display: flex;
}

.bushfire-content-item .bushfire-incident-image {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.bushfire-content-item .bushfire-warning-image img {
    max-width: 50px;
}

.bushfire-content-item .busfire-warning-text-container {
    padding: 5px;
    width: 100%;
}

.bushfire-content-item .view-bushfire-detail {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 60px;
    cursor: pointer;
    padding: 0px;
    font-size: 0.85rem;
    font-weight: 500;
    background-color: #21353e;
    color: #fff;
    border: 1px solid #21353e;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.bushfire-content-item .bushfire-warning-level {
    font-weight: 500;
    color: #ff0000;
}

.bushfire-content-detail > span {
    font-weight: 500;
    color: #ff0000;
}

#fdr-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px;
}

#fdr-container > div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#fdr-container #fdr-image {
    width: 100%;
    max-width: 418px;
}

#fdr-container h3 {
    color: #333;
}

#fdr-table {
    width: 100%;
}

.warning-widget-div {
    position: relative; 
    padding-bottom: 36px; 
}

.bom-attribution-common, .QFD-info {
    position: absolute;
    bottom: 10px;
    left: 20px;
}

.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.warning-widget-div .warning-heading-div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#temperature-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    grid-column-gap: 0.5rem;
    grid-row-gap: 0px;
}

    #temperature-container #temperature-image {
        grid-area: 1 / 1 / 2 / 3;
        justify-self: center;
    }

        #temperature-container #temperature-image img {
            width: 50px;
        }

    #temperature-container #temperature-now {
        grid-area: 2 / 1 / 3 / 2;
        text-align: center;
    }

    #temperature-container #temperature-feel {
        grid-area: 2 / 2 / 3 / 3;
        text-align: center;
    }

/*widget warning widget end*/
/*select language Start*/

.select-language__element,
#google_translate_element {
    width: 100%;
    border: none;
    font-size: 0.8rem;
    border-radius: 5px;
    border-style: none;
}

.select-language__container > div > div > div {
    margin-top: -0.4em;
}


.goog-te-gadget .goog-te-combo {
    margin: -5px 0 !important;
    width: 100%;
    padding: 5px 7px;
    font-size: 1rem;
    border-radius: 5px;
    border-style: none;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
    height: 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.goog-te-gadget > div > select {
    color: black;
}

.goog-te-gadget > span > a {
    display: none;
}
/*select language End*/

/*select Radio Start*/
#radiostation-table {
    width: 100%;
}

    #radiostation-table th {
        width: 50%;
        background: #1c2d6d;
        color: #fff;
        text-align: center;
        padding: 0.75em 1em;
    }
/*select Radio End*/

/*Neighbouring Council Start*/
.neighbour-council-tab {
    padding: 0;
}

.neighbour-council-header{
    padding: 5px;
}
.neighbour-council-header-text {
    text-align: center;
    padding: 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.neighbour-council-dropdown-list li {
    text-align: center;
    list-style-type: none;
    padding: 0.5em;
    border-bottom-style: inset;
    border-bottom-width: thin;
}

    .neighbour-council-dropdown-list li:last-child {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .neighbour-council-dropdown-list li a {
        font-size: 1rem;
        font-weight: bold;
    }
/*Neighbouring Council End*/

/*operation start*/
.operation__camera-img {
    height: 51px;
    width: 98px;
}

.operation__camera-container {
    cursor: pointer;
    border: 1px solid #000000;
    margin-top: -2%;
    border-radius: 5px;
    font-size: 1.1rem;
    padding-top: 1%;
    text-align: center;
}

    .operation__camera-container p {
        text-align: center;
    }

.operation__card {
    box-shadow: 0 0 5px #17150c;
    margin-bottom: 1%;
    border-radius: 9px;
    padding: 13px;
}

/*operation end*/

.social-media__container,
.radio-station,
.notice-container,
.social-media__curator {
    border: 2px solid #e3e3e3;
    border-radius: 5px;
    padding: 12px;
    width: 100%;
    height: 100%;
}

/*body end*/
@media (max-width: 767px) {
    html,
    body {
        font-size: 14px;
    }

    .top-tab > div,
    .small-tab > div {
        padding: 3px;
    }
}

@media (max-width: 575px) {
    html,
    body {
        font-size: 12px;
    }

    .leaflet-right {
        width: 70%;
    }

    .map .search-box {
        width: 100%;
    }
}