body {
    font-family: 'gt-eesti', sans-serif !important;
    line-height: 1.15 !important;
}

.desktoptools {
    display: none !important;
}

.menu_section, .mobiletools {
    display: none !important;
}

.sidebar__wrapper {
    display: none !important;
}

.inner_content,
.inner_content p {
    font-size: 16px !important;
    font-family: 'gt-eesti', sans-serif !important;
}

.btn-primary {
    background-color: #007AC9;
}

.btn-primary:disabled {
    cursor: not-allowed;
    background-color: #dcdcdc;
    color: grey;
}

fieldset .error {
    border-left: 5px solid #b10e1e;
    padding-left: 15px;
}

fieldset .error .error-message {
    color: #b10e1e;
    display: block;
    margin-bottom: 5px;
}

fieldset .error .form-control {
    border: 4px solid #b10e1e;
}

fieldset .error-blank .error-message-blank {
    color: #b10e1e;
    display: block;
    margin-bottom: 5px;
}

fieldset .error-invalid .error-message-invalid {
    color: #b10e1e;
    display: block;
    margin-bottom: 5px;
}

fieldset .error-message {
    display: none;
}

fieldset .error-message-blank {
    display: none;
}

fieldset .error-message-invalid {
    display: none;
}

fieldset input {
    margin-bottom: 0 !important;
}

.map-address-hint {
    font-size: 19px;
    margin-bottom: 20px;
}

#loader-wrapper {
    display: flex;
    position: absolute;
    background-color: #000000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    opacity: 0.8;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

#loader-wrapper span {
    color: #ffffff;
}

#map-list-wrapper {
    overflow: hidden;
    border-radius: 5px;
}

#map-wrapper {
    display: flex;
}

#list-view {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 600px;
    background-color: #dedbd2;
    overflow: hidden;
}

#search-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #003C69;
    padding: 10px;
}

#existing-faults-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    margin-bottom: 10px;
}

#search-container > button {
    font-size: 19px;
}

#search-container > span {
    color: white;
}

#search-box.esri-search {
    width: auto !important;
    background-color: inherit !important;
}

#search-box.esri-search input.esri-input.esri-search__input {
    border-radius: 5px 0 0 5px !important;
}

#search-box.esri-search .esri-search__container [class*=esri-icon] {
    font-size: 22px;
    font-weight: bolder;
}

#search-box.esri-search .esri-search__submit-button.esri-widget--button {
    border-radius: 0 5px 5px 0 !important;
} 

#search-box .esri-input[type="text"],
#search-box .esri-input[type="number"] {
    background-size: 15px;
    font-size: 15px;
    font-family: 'gt-eesti-regular', sans-serif !important;
    color: black !important;
    height: 40px;
}

#search-box .esri-widget--button {
    color: #007ac9;
    background-color: #fff;
    border-radius: 0px !important;
    height: 40px;
    width: 40px;
}

#search-box .esri-icon-close:before {
    color: #007ac9;
    font-weight: bolder;
    background-color: #fff;
}

#search-box .esri-search__warning-menu {
    border-radius: 5px;
}

#search-box .esri-search__suggestions-list {
    padding-left: 0px;
}

#search-box .esri-search__warning-body div:not(.search-result) {
    display: none;
}

#list-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#list-radius {
    display: flex;
    height: 40px;
    align-items: center;
}

#list-radius span {
    font-size: 16px;
    font-weight: bold;
    margin: 0 10px;
    display: block;
}

#list-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    overflow-y: auto;
    padding: 0 10px 10px 10px;
}

#map-view {
    display: flex;
    flex: 1;
    height: 600px;
    position: relative;
    overflow: hidden;
}

#map-view-touch-warning {
    display: flex;
    position: absolute;
    background-color: #000000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    opacity: 0.8;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

#map-view-touch-warning span {
    color: #ffffff;
}

#legend-wrapper {
    display: flex;
    flex-direction: row;
    background-color: #dedbd2;
    font-size: 16px;
}

#legend-wrapper span {
    background-color: #003c69;
    color: white;
    font-weight: bold;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

#legend-wrapper ul {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

#legend-wrapper ul li {
    display: flex;
    align-items: center;
}

#legend-wrapper ul li div {
    width: 40px;
    display: flex;
    justify-content: center;
}

#legend-wrapper ul li div img {
    height: 40px;
}

#map-list-wrapper .card,
#existing-faults-list .card {
    border: 0 !important;
}

#map-list-wrapper .card .card {
    border-radius: 0;
}

#map-list-wrapper .card .card:not(:first-child) {
    border-top: 1px solid rgba(0,0,0,.125) !important;
}

#map-list-wrapper .card > button,
#existing-faults-list .card > button {
    outline: none !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

#map-list-wrapper .card-header,
#existing-faults-list .card-header {
    padding: 10px 5px !important;
    border: 0 !important;
}

#map-list-wrapper .card > button[aria-expanded="false"] > .card-header,
#existing-faults-list .card > button[aria-expanded="false"] > .card-header {
    border: 0;
}

#map-list-wrapper .card > button[aria-expanded="true"]:focus-visible > .card-header:not(.card .card > button[aria-expanded="true"] > .card-header),
#existing-faults-list .card > button[aria-expanded="true"]:focus-visible > .card-header {
    box-shadow: inset 0px 0px 0px 2px #ffffff;
}

#map-list-wrapper .card > button[aria-expanded="false"]:focus-visible > .card-header.water-outage,
#existing-faults-list .card > button[aria-expanded="false"]:focus-visible > .card-header.water-outage {
    box-shadow: inset 0px 0px 0px 2px #d96645;
}

#map-list-wrapper .card > button[aria-expanded="false"]:focus-visible > .card-header.reported-fault,
#existing-faults-list .card > button[aria-expanded="false"]:focus-visible > .card-header.reported-fault {
    box-shadow: inset 0px 0px 0px 2px #833f23;
}

#map-list-wrapper .card > button[aria-expanded="false"]:focus-visible > .card-header.planned-outage,
#existing-faults-list .card > button[aria-expanded="false"]:focus-visible > .card-header.planned-outage {
    box-shadow: inset 0px 0px 0px 2px #003c69;
}

#map-list-wrapper .card > button[aria-expanded="false"]:focus-visible > .card-header.recently-resolved-outage,
#existing-faults-list .card > button[aria-expanded="false"]:focus-visible > .card-header.recently-resolved-outage {
    box-shadow: inset 0px 0px 0px 2px #027d57;
}

#map-list-wrapper .card > button[aria-expanded="true"] > .card-header.water-outage:not(.card .card > button[aria-expanded="true"] > .card-header.water-outage),
#existing-faults-list .card > button[aria-expanded="true"] > .card-header.water-outage {
    background-color: #d96645;
    color: #ffffff !important;
}

#map-list-wrapper .card > button[aria-expanded="true"] > .card-header.reported-fault:not(.card .card > button[aria-expanded="true"] > .card-header.reported-fault),
#existing-faults-list .card > button[aria-expanded="true"] > .card-header.reported-fault {
    background-color: #833f23;
    color: #ffffff !important;
}

#map-list-wrapper .card > button[aria-expanded="true"] > .card-header.planned-outage:not(.card .card > button[aria-expanded="true"] > .card-header.planned-outage),
#existing-faults-list .card > button[aria-expanded="true"] > .card-header.planned-outage {
    background-color: #003c69;
    color: #ffffff !important;
}

#map-list-wrapper .card > button[aria-expanded="true"] > .card-header.recently-resolved-outage:not(.card .card > button[aria-expanded="true"] > .card-header.recently-resolved-outage),
#existing-faults-list .card > button[aria-expanded="true"] > .card-header.recently-resolved-outage {
    background-color: #027d57;
    color: #ffffff !important;
}

#map-list-wrapper .card .card .card-body {
    border-top: 1px solid rgba(0,0,0,.125);
}

#map-list-wrapper .card-event,
#existing-faults-list .card-event {
    display: flex;
}

#map-list-wrapper .card-event > .card-event-icon,
#existing-faults-list .card-event > .card-event-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 50px;
}

#map-list-wrapper .card-event > .card-event-icon img.icon,
#existing-faults-list .card-event > .card-event-icon img.icon {
    height: 20px;
    margin-top: -10px;
}

#map-list-wrapper .card-event-icon img.pin-icon,
#existing-faults-list .card-event-icon img.pin-icon {
    height: 50px;
}

#map-list-wrapper .card button[aria-expanded="true"] .card-event-icon img.icon:not(.card .card .card-event-icon img.icon),
#existing-faults-list .card button[aria-expanded="true"] .card-event-icon img.icon {
    display: block;
}

#map-list-wrapper .card button[aria-expanded="true"] .card-event-icon img.pin-icon:not(.card .card .card-event-icon img.pin-icon),
#existing-faults-list .card button[aria-expanded="true"] .card-event-icon img.pin-icon {
    display: none;
}

#map-list-wrapper .card button[aria-expanded="false"] .card-event-icon img.icon:not(.card .card .card-event-icon img.icon),
#existing-faults-list .card button[aria-expanded="false"] .card-event-icon img.icon {
    display: none;
}

#map-list-wrapper .card button[aria-expanded="false"] .card-event-icon img.pin-icon:not(.card .card .card-event-icon img.pin-icon),
#existing-faults-list .card button[aria-expanded="false"] .card-event-icon img.pin-icon {
    display: block;
}

#map-list-wrapper .card-event > .card-event-title,
#existing-faults-list .card-event > .card-event-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    flex: 1;
}

#map-list-wrapper .card-event > .card-event-title span,
#existing-faults-list .card-event > .card-event-title span {
    font-weight: normal;
}

#map-list-wrapper .card-event > .card-event-title span:first-child,
#existing-faults-list .card-event > .card-event-title span:first-child {
    font-weight: bold;
}

#map-list-wrapper .card-event > .card-event-toggle,
#existing-faults-list .card-event > .card-event-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
}

#map-list-wrapper .card > button[aria-expanded="false"] > .card-header > .card-event > .card-event-toggle::before,
#existing-faults-list .card > button[aria-expanded="false"] > .card-header > .card-event > .card-event-toggle::before {
    font-family: FontAwesome;
    content: "\f078";
}

#map-list-wrapper .card > button[aria-expanded="true"] > .card-header > .card-event > .card-event-toggle::before,
#existing-faults-list .card > button[aria-expanded="true"] > .card-header > .card-event > .card-event-toggle::before {
    font-family: FontAwesome;
    content: "\f077";
}

/* start pop up */
#map-view .esri-popup {
    border-radius: 5px;
}

#map-view .esri-popup__content {
    padding: 15px !important;
    margin: 0 !important;
}

#map-view .esri-popup__footer {
    display: none;
}

#map-view .esri-popup .esri-feature__last-edited-info {
    display: none;
}

#map-view .esri-popup__main-container.esri-widget {
    overflow: hidden;
    border-radius: 5px;
}

#map-view .esri-popup__main-container.esri-widget .esri-feature__main-container p,
#map-view .esri-popup__main-container.esri-widget .esri-feature__main-container label,
#map-view .esri-popup__main-container.esri-widget .esri-feature__main-container span {
    font-family: 'gt-eesti', sans-serif !important;
    font-size: 16px;
}

#map-view .esri-popup__main-container.esri-widget .esri-popup__header-title {
    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: none !important;
    white-space: unset !important;
    word-break: unset !important;
    word-wrap: unset !important;
}

#map-view .esri-popup__main-container.esri-widget .esri-popup__header-title:hover,
#map-view .esri-popup__main-container.esri-widget .esri-popup__header-buttons > .esri-popup__button:hover{
    background-color: inherit !important;
    color: #ffffff !important;
}

#map-view .esri-popup__main-container.water-outage > .esri-popup__header {
    background-color: #d96645 !important;
    color: #ffffff !important;
}

#map-view .esri-popup__main-container.reported-fault > .esri-popup__header {
    background-color: #833f23 !important;
    color: #ffffff !important;
}

#map-view .esri-popup__main-container.planned-outage > .esri-popup__header {
    background-color: #003c69 !important;
    color: #ffffff !important;
}

#map-view .esri-popup__main-container.recently-resolved-outage > .esri-popup__header {
    background-color: #027d57 !important;
    color: #ffffff !important;
}

#map-view .esri-popup__main-container > .esri-popup__header {
    gap: 15px;
    height: 60px;
    align-items: center;
    padding: 0 15px;
}

#map-view .esri-popup__main-container.esri-widget .esri-popup__header-buttons {
    padding: 0 !important;
    margin: 0 !important;
}

#map-view .esri-popup__main-container > .esri-popup__header .popup-title {
    display: flex;
    gap: 15px;
    align-items: center;
}

#map-view .esri-popup__main-container > .esri-popup__header .popup-title > .popup-title-icon {
    display: flex;
    height: 25px;
}

#map-view .esri-popup__main-container > .esri-popup__header .popup-title > .popup-title-icon > img {
    height: 25px;
}

#map-view .esri-popup__main-container > .esri-popup__header .popup-title > .popup-title-outage {
    font-family: 'gt-eesti', sans-serif;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#map-view .esri-popup__main-container > .esri-popup__header .popup-title > .popup-title-outage > span {
    margin: 0;
    font-weight: bold;
    font-size: 19px !important;
}

#map-view .esri-popup__main-container > .esri-popup__header .popup-title > .popup-title-outage > .popup-title-suburb {
    font-size: 14px !important;
}

#map-view .esri-popup .esri-popup__main-container {
    width: 500px;
}

#map-view .esri-popup .esri-icon-close:before {
    color: #ffffff;
    font-weight: bolder
}

@media only screen and (max-width: 500px) {
    #map-view .esri-popup__main-container {
        width: inherit !important;
        margin: 0 10px 20px 10px !important;
    }
}

.esri-ui {
    z-index: unset;
}
.esri-view-width-xsmall .esri-popup--is-docked-top-center .esri-popup__main-container,
.esri-view-width-xsmall .esri-popup--is-docked-bottom-center .esri-popup__main-container {
    padding: 0 !important;
}
/* end pop up */

/* start common */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}
/* end common */

/* start report fault */
.action-box {
    margin-top: 20px;
    background-color: #dedbd2;
    padding: 10px;
    border-radius: 5px;
    height: auto !important;
    width: auto !important;
}

.action-box p[role="heading"] {
    font-size: 19px;
    font-weight: bold;
}

.subscribe-form * {
    font-family: 'gt-eesti', sans-serif !important;
}

.subscribe-form label, span {
    font-size: 16px !important;
}

form .fault-options.btn-group {
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

form .fault-options.btn-group .btn {
    background-color: #ffffff !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px !important;
    width: 130px;
    height: 130px;
    flex: none !important;
}

form .fault-options.btn-group .btn.active {
    background-color: #007ac9 !important;
    color: #fff !important;
    text-decoration: underline;
}

form .pictures-holder {
    border: 1px dashed grey;
    border-radius: 5px;
    padding: 10px;
    background-color: #ffffff;
}

form .pictures-holder .error {
    border: 2px dashed #b10e1e;
}

form .pictures-holder .fa-camera {
    font-size: 45px;
    color: grey;
}

form .images-thumbnails {
    margin-top: 20px;
}

form .images-thumbnails .row {
    min-height: 70px;
}

form .images-thumbnails .row:not(:last-child) {
    margin-bottom: 10px;
}

form .images-thumbnails .fault-img-thumbnail {
    height: 60px;
    width: 60px;
    margin: 5px 0;
    object-fit: contain;
}

form .images-thumbnails .thumbnail-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gaop: 10px;
}

form .images-thumbnails .thumbnail-info button {
    min-width: fit-content;
}

#confirm-address-label {
    font-weight: bold;
}

#fault-pics-attach {
    width: auto !important;
    height: auto !important;
}

#fault-pics-attach #validation-errors,
#fault-pics-attach #validation-errors p {
    color: #b10e1e !important;
    margin-bottom: 5px;
}

#phone-call,
#req-new-connection {
    padding: 10px;
    background-color: #003C69;
    border-radius: 5px;
}

#req-new-connection h2 {
  color: #ffffff !important;
}

#phone-call p,
#req-new-connection p {
    color: #ffffff !important;
    font-size: 16px;
}

#phone-call a,
#req-new-connection a {
    color: #ffffff !important;
    font-size: 16px;
    width: 300px;
}

#phone-call a:hover,
#req-new-connection a:hover {
    text-decoration: none !important;
}
/* end report fault */

@media only screen and (max-width: 1024px) {
    #map-wrapper {
        flex-direction: column-reverse;
    }
    
    #list-view {
        width: auto;
        height: auto;
    }
    
    #map-view {
        flex: none;
    }
    
    #legend-wrapper {
        flex-direction: column;
    }

    #legend-wrapper ul {
        padding: 10px;
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

        form .radio-group {
        flex-direction: column;
        gap: 10px;
    }
    
    form .radio-group .radio-option label {
        flex: 1;
        padding: 10px;
        max-width: none;
    }

    form .radio-group {
        flex-direction: column;
        gap: 10px;
    }
    
    form .radio-group .radio-option label {
        flex: 1;
        padding: 10px;
        max-width: none;
    }
}