body {
    background-repeat: no-repeat;
    background-size: 100vw;
    background-color: #f2f2f2;
}

.body-content {
    color: white;
    margin: 0px;
    width: 100%;
    max-width: 100%;
    padding: 0px
}

.overallrotate {
    display: none;
    position: absolute;
    z-index: 45;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%;
    background: white;
    padding: 60px;
}

.overall {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    padding: 10px;
    min-height: 67vh;
}

@media (orientation: portrait) {
    .overall {
        display: none;
    }

    .overallrotate {
        display: block
    }
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    outline: none !important;
    border: 2px solid #9A9A9A !important;
}

.clickable-row:hover {
    cursor: pointer;
}

.buttonname {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    padding: 8px 14px;
    border: 1.5px solid #0B3A5F;
    box-sizing: border-box;
    color: #0B3A5F;
    text-align: center;
    font-size: 15px;
    float: left;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    font-weight: 600;
}

.primary-button {
    background-color: #0E769D;
    padding: 7px 14px;
    color: white;
    text-align: center;
    font-size: 15px;
    float: left;
    border-radius: 10px;
    border: 2px solid #0E769D;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 600;
    box-sizing: border-box
}

.primary-button:hover:not(:disabled) {
    cursor: pointer;
    background-color: #0a5774;
    border: 2px solid #0a5774;
}

.primary-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.primary-button.destructive {
    background-color: #cc0000;
    border-color: #cc0000;
}

.primary-button.destructive:hover:not(:disabled) {
    cursor: pointer;
    background-color: #aa0000;
    border: 2px solid #aa0000;
}

.primary-button-contrast {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    padding: 7px 14px;
    color: #0E769D;
    text-align: center;
    font-size: 15px;
    float: left;
    border-radius: 10px;
    border: 2px solid #0E769D;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 600;
    box-sizing: border-box
}

.primary-button-contrast:hover {
    cursor: pointer;
    color: #0a5774;
    border: 2px solid #0a5774;
}

.secondary-button {
    background-color: #0f3f64;
    padding: 7px 14px;
    color: white;
    text-align: center;
    font-size: 15px;
    border-radius: 10px;
    border: 2px solid #0f3f64;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 600;
    box-sizing: border-box;
    float: left;
}

.secondary-button.inline-action {
    float: none;
}

.secondary-button:hover:not(:disabled) {
    cursor: pointer;
    background-color: #0a2c46;
    border: 2px solid #0a2c46;
}

.secondary-button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.secondary-button-contrast {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    padding: 7px 14px;
    color: #0f3f64;
    text-align: center;
    font-size: 15px;
    float: left;
    border-radius: 10px;
    border: 2px solid #0f3f64;
    cursor: pointer;
    margin-left: 10px;
    font-weight: 600;
    box-sizing: border-box
}

.secondary-button-contrast:hover {
    cursor: pointer;
    color: #0a2c46;
    border: 2px solid #0a2c46;
}

.btn-sitenote-add {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    border: 2px solid #2e844a;
    padding: 7px 14px;
    color: #2e844a;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 10px;
    box-sizing: border-box;
    float: left
}

.btn-sitenote-add:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    border: 2px solid #2a7843;
    color: #2a7843;
    cursor: pointer;
}

.confirm-enter-btn {
    background-color: #2e844a;
    border: 2px solid #2e844a;
    padding: 7px 14px;
    color: white;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 10px;
    box-sizing: border-box;
    float: left
}

.confirm-enter-btn:hover {
    background-color: #2a7843;
    border: 2px solid #2a7843;
    cursor: pointer;
}

.btn-not-inspected {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    border: 2px solid #ba0517;
    padding: 7px 14px;
    color: #ba0517;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 10px;
    box-sizing: border-box;
    float: left
}

.btn-not-inspected:hover {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    border: 2px solid #a80515;
    color: #a80515;
    cursor: pointer;
}

.report-submit-btn {
    cursor: not-allowed;
    background-color: #F2F2F2;
    border: 2px solid #BFBFBF;
    padding: 7px 14px;
    color: #6e6e6e;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    margin-left: 10px;
    box-sizing: border-box
}

.report-submit-active {
    background-color: #2e844a;
    border: 2px solid #2e844a;
    color: white;
    cursor: pointer;
}

.collective-buttons {
    float: right;
    width: 77px
}

.buttonvalue, .buttonvaluedate {
    background-color: #F2F2F2;
    padding: 8px 14px;
    color: #0B3A5F;
    text-align: center;
    font-size: 15px;
    float: left;
    font-style: italic;
    border-bottom-right-radius: 10px !important;
    border-top-right-radius: 10px !important;
    width: fit-content;
    min-width: fit-content;
    max-width: fit-content;
    border: 1.5px solid #747474;
    box-sizing: border-box;
    border-left: none;
    text-align: left;
    pointer-events: none;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.no-pointer-events {
    pointer-events: none;
}

.buttonedit {
    background-color: #12759c;
    padding: 9px 14px;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    float: left;
    border-radius: 10px;
    margin-left: 1%;
    border: 0px
}

.buttonvalue {
    padding-right: 12px !important
}

.buttondefault {
    background-color: #12759c;
    padding: 9px 14px;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    border: 0px;
}

.buttonedit1 {
    background-color: #12759c;
    padding: 9px 14px;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    float: left;
    border-radius: 10px;
    margin-left: 1%;
    border: 0px;
}

.buttonedit2 {
    background-color: #12759c;
    padding: 9px 14px;
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    float: left;
    border-radius: 10px;
    margin-left: 0.5%;
    border: 0px;
    width: 11.5%;
}




.home .buttonnav {
    background-color: #D8F7FC;
    border: 2px solid #a0d8e0;
    padding: 8px 2px;
    color: #072741;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    float: left;
    border-radius: 10px;
    margin-right: 1%;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
    width: 16.5%;
    cursor: pointer
}

.form1 .buttonnav {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    padding: 8px 2px;
    color: #00213d;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    float: left;
    border-radius: 10px;
    margin-right: 1%;
    border: 2px solid #12759c;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
    width: 13.5%;
    overflow: hidden;
}

.roofsatest .buttonnav {
    padding: 8px 2px;
    width: 13.6%;
    margin-top: 8px;
    margin-bottom: 8px
}

.roofsctest .buttonnav {
    padding: 8px 2px;
    width: 13.6%;
    margin-top: 8px;
    margin-bottom: 8px
}

.roofsctest {
    display: none
}

.textareabutton {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    border: 2px solid #0E769D !important;
    padding: 7px 14px;
    color: #0E769D;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
    float: left;
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 0px !important;
}

.textareanotes {
    clear: both;
    width: 100%;
    height: 10em;
    display: block;
    max-width: 100% !important;
    padding: 8px 12px;
    font-size: 16px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border: none;
    outline: none;
    color: #00213d
}

    .textareanotes:focus {
        border: 2px solid #12759c;
    }


.textareabutton.active {
    background-color: #0E769D;
    color: white;
    transform-origin: left;
    z-index: 1;
}

.textareabutton:nth-child(2).active {
    background-color: #12759c;
    color: white;
    transform-origin: right;
    z-index: 1;
}

.textareabutton.inactive {
    background-color: #ccc;
}

.confirm-undo-btn, .confirm-enter-btn  {
    margin-bottom: 10px;
}

.btnGenerated {
    transition: 0.15s ease-in
}

.btn-generate-active {
    background: #12759c !important;
    color: white !important;
}

.row1 .btn-generate-active[id*="Other"], .row1 .btn-generate-active[id*="NotKnown"] {
    background-color: #12759c !important;
    border: 2px solid #12759c !important;
    color: white !important
}

button[id*="IsARisk"]:not(.blur-button) {
    border: 2px solid #ba0517 !important;
}

button[id*="CanBeARisk"]:not(.blur-button) {
    border: 2px solid #dd7a01 !important;
}

button[id*="NoRisk"]:not(.blur-button) {
    border: 2px solid #00A300 !important;
}

.row1 .btn-generate-active[id*="IsARisk"], .row1 .btn-generate-active[id*="CanBeARisk"], .row1 .btn-generate-active[id*="NoRisk"] {
    background-color: #12759c !important;
    border: 2px solid #12759c !important;
    color: white !important
}

.row1 .btn-generate-active[id*="IsARisk"] {
    background-color: #12759c !important;
    border: 2px solid #12759c !important;
    color: white !important
}


.row1 .btn-generate-active[data-row-name="ConditionRating"] ~ .row1 .btnGenerated {
    color: grey !important
}

.home .row1 {
    margin-top: 10px
}

.home .top-container {
    margin-bottom: 2px
}

.top-container {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    border-radius: 10px;
    display: inline-block;
    width: 100%;
    padding: 5px;
    padding: 10px;
    margin-bottom: 5px;
    box-shadow: 0 14px 22px -16px rgba(0, 0, 0, .25)
}

.top-container-home {
    padding: 15px;
    padding-bottom: 0px;
}

.top-container-row1, .top-container-row2 {
    width: 100%;
    min-height: 40px;
}

.top-container-row2 {
    margin-top: 10px;
}

.top-container-home .top-container-row2 {
    clear: both
}

#report-survo-btn, #save-db, .first-in-row {
    margin-left: 0px !important
}

#case-survey-date {
    margin-right: 10px;
}

.last-saved {
    display: inline-block;
    margin-bottom: 0px !important
}

.top-container-home .top-container-row1 div, .top-container-home .top-container-row2 div {
    margin-bottom: 10px;
}

    @media all and (max-width: 1080px) {
        .top-container-home .top-container-row1 div, .top-container-home .top-container-row2 div {
            margin-left: 7px;
            padding-left: 5px !important;
            padding-right: 5px !important;
        }

        #case-survey-date {
            margin-right: 7px;
        }

        .top-container-home .top-container-row2 .last-saved {
            margin-left: 0px !important;
            padding-left: 0px !important;
            padding-right: 0px !important
        }

            .last-saved .buttonname {
                margin-left: 0px !important;
            }
    }
@media all and (max-width: 1300px) {
    .last-saved {
        clear: both;
        display: block;
    }

}

    .top-container-left {
        width: calc(100% - 170px);
        float: left
    }

    .top-container-right {
        width: 170px;
        float: right;
    }

    .top-container-home .buttonname {
        margin-left: 10px;
    }

    .last-saved .buttonname {
        margin-left: 0px;
    }

    .page-sub-section-validation {
        background: #fff;
        border: 2px solid #ba0517;
        width: fit-content;
        display: block;
        padding: 8px 16px;
        border-radius: 10px;
        color: #ba0517 !important;
        font-size: 15px;
        font-weight: 600;
        margin-top: 10px;
        margin-bottom: 5px;
        box-shadow: 0 14px 22px -16px rgba(0, 0, 0, .25);
        position: relative;
        align-items:center;
    }

    .validation-message {
        float: right
    }

    .page-sub-section-validation .fa {
        color: #ba0517 !important;
        margin-right: 7px;
        font-size: 16px;
    }

    .row1.is-not-valid {
        border-left: 5px solid #ba0517;
        padding-left: 0;
        border-right: 5px solid #ba0517;
        padding-right: 0;
    }

    .notes {
        position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
        background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
        clear: both;
        display: inline-block;
        width: 100%;
        padding: 10px;
        margin-top: 12px;
        box-shadow: 0 0 22px 16px rgba(0, 0, 0, .25);
    }

    .spacer {
        height: 10px;
        clear: both
    }

    .row1 {
        clear: both;
        background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
        border-radius: 10px;
        width: 100%;
        padding: 5px;
        border: 1.5px solid #BFBFBF;
        box-shadow: 0 14px 22px -16px rgba(0, 0, 0, .25);
        display: table;
    }

    .home .section {
        color: #0B3A5F;
        font-size: 17px;
        font-weight: 600;
        float: left;
        margin-top: 10px;
        padding-left: 12.5px;
        padding-right: 5px;
        width: 11.5vw;
        padding-top: 3.5px;
    }

    .form1 .section {
        color: #0B3A5F;
        font-size: 17px;
        font-weight: 600;
        width: 11.5vw;
        padding-top: 12.5px;
        padding-left: 12.5px;
        padding-right: 5px;
        display: table-cell;
        vertical-align: top;
    }

    .btnGenerated {
        transition: 0.15s ease-in;
    }

    .btn-generate-active {
        background: #12759c;
        color: white;
    }

    .changeview {
        cursor: pointer
    }

    .bsec .section, .csec .section, .dsec .section {
        margin-bottom: 3vh
    }

    .slideshow-container {
        position: relative;
        background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
        border: 2px solid #0E769D;
        padding: 7px 14px;
        color: #00213d;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        float: left;
        border-radius: 12px;
        margin-left: 1%;
    }

    .mySlides {
        display: none;
        padding-left: 50px;
        padding-right: 50px;
        text-align: center;
        min-width: 54vw;
        color: #00213d;
    }

    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -19px;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 7px;
        padding-bottom: 7px;
        color: #00213d;
        font-weight: bold;
        font-size: 16px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        background-color: #D8F7FC
    }

    .btn-select-na {
        margin-top: 1px
    }

    .switch-disabled.prev, .switch-disabled.next {
        background-color: #f2f2f2;
        color: #BFBFBF
    }

        .switch-disabled.prev:hover, .switch-disabled.next:hover {
            background-color: #f2f2f2;
            color: #BFBFBF;
            cursor: default
        }

    .next {
        position: absolute;
        right: 0;
        border-radius: 0px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .prev {
        position: absolute;
        left: 0;
        border-radius: 0px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }


        .prev:hover, .next:hover {
            background-color: #afeff9;
            color: #00213d;
        }

    a, a:hover, a:active, a:visited, a:focus {
        text-decoration: none;
    }

    .roofsb, .roofsc, .roofsd, .roofse, .roofsf {
        display: none;
    }



    .note-preview-text {
        background: #F2F2F2;
        border: 1.5px solid #BFBFBF;
        margin-bottom: 10px;
        font-style: italic;
        color: #6e6e6e
    }

    .note-text-style {
        border-radius: 10px;
        padding: 10px;
        overflow-wrap: break-word
    }

    .notes:has(.notesbutton.active) .note-added-text {
        background: #12759c;
        margin-bottom: 10px;
        animation: note-enter-transition .6s ease-in forwards;
    }

    .notes:has(.reportbutton.active) .note-added-text {
        background: #0f3f64;
        margin-bottom: 10px;
        animation: report-enter-transition .6s ease-in forwards;
    }

    .btn-expand-collapse {
        position: absolute;
        right: 17px;
        font-size: 19px;
        transition: 0.3s ease-in;
        cursor: pointer;
        z-index: 1;
        top: 66px;
    }

    .notes:has(.notesbutton.active) .btn-expand-collapse {
        color: #12759c
    }

    .notes:has(.reportbutton.active) .btn-expand-collapse {
        color: #0f3f64
    }

    .note-added-text.div-drag-active {
        margin: 14px 10px;
        animation: none;
        background: #c3c3c3;
        color: black;
    }

    .notes-div-block {
        position: relative;
        clear: both;
        width: 100%;
        height: 10em;
        display: block;
        max-width: 100% !important;
        padding: 8px 12px;
        font-size: 16px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        border: none;
        outline: none;
        color: #00213d;
        overflow-y: scroll;
        background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
        padding-top: 15px;
        border: 1.5px solid #878787;
        border-radius: 10px;
        border-top-left-radius: 0px;
    }

        .notes-div-block:focus {
            border: 2px solid #12759c;
        }

        .notes-div-block::-webkit-scrollbar {
            width: 18px;
        }

        .notes-div-block::-webkit-scrollbar-thumb {
            background: #888888;
            background-clip: content-box;
            border: 5px solid transparent;
            border-top: 30px solid transparent;
            border-radius: 10px;
        }

            .notes-div-block::-webkit-scrollbar-thumb:hover {
                background: #6d6d6d;
                background-clip: content-box;
                border: 5px solid transparent;
                border-top: 30px solid transparent;
                border-radius: 10px;
            }

    .notes-div-block-expanded {
        height: 85vh;
    }

    .note-preview-text {
        color: black;
    }

    .overview-btn-option {
        cursor: pointer;
    }

    .fsec .buttonnav {
        background-color: #f7d8f7;
        border: 2px solid #d8a0d8
    }

    .hsec .buttonnav {
        background-color: #d8d8f7;
        border: 2px solid #a0a0d8
    }

    .esec .buttonnav {
        background-color: #f7d8d8;
        border: 2px solid #d8a0a0
    }

    .dsec .buttonnav {
        background-color: #f7d8b0;
        border: 2px solid #c9a87c;
    }

    .csec .buttonnav {
        background-color: #f7f7d8;
        border: 2px solid #d8d8a0
    }

    .gsec .buttonnav {
        background-color: #EABBFA;
    }

    .bsec .buttonnav {
        background-color: #d8f7d8;
        border: 2px solid #a0d8a0
    }

    .isec .buttonnav {
        background-color: #D8F7F7;
        border: 2px solid #a0d8d8
    }

    .hsec {
        margin-bottom: 5px
    }

    [data-type-display="DateOfInspection"] {
        color: #0B3A5F;
        font-style: italic;
        float: left;
        margin-right: 1%;
        margin-top: 5px;
        background-color: #f2f2f2;
        padding: 8px 14px;
        border-radius: 10px;
        border: 1.5px solid #747474;
    }

    @keyframes note-enter-transition {
        0% {
            /*background: #c3c3c3;*/
            background-image: linear-gradient(to right, #c3c3c3 50%, #12759c 50%);
            background-size: 300% 300%;
        }

        50% {
            font-size: 17px;
        }

        70% {
            color: ghostwhite;
        }

        100% {
            color: ghostwhite;
            opacity: 1;
            font-size: 16px;
            background-position: -100% 0;
        }
    }

    @keyframes report-enter-transition {
        0% {
            /*background: #c3c3c3;*/
            background-image: linear-gradient(to right, #c3c3c3 50%, #0f3f64 50%);
            background-size: 300% 300%;
        }

        50% {
            font-size: 17px;
        }

        70% {
            color: ghostwhite;
        }

        100% {
            color: ghostwhite;
            opacity: 1;
            font-size: 16px;
            background-position: -100% 0;
        }
    }

    .note-div-seperator {
        margin: 10px 0px;
    }

    div.roofse-dynamicAdviceOption.row1 > p {
        margin-bottom: 10vh
    }

    /*[id="D2.2OK"] {
    background-color: #00A300 !important
}*/

    /*[id="D2.2Maintain"] {
    background-color: #77e077 !important
}
*/

    /*[id="D2.2Repair"] {
    background-color: #FFBF00 !important
}*/

    /*[id="D2.2UrgentRepair"] {
    background-color: #FF8A8A !important
}*/

    /*[id="D2.2ReportRequired"] {
    background-color: #FF0000 !important
}*/

    /*Ok*/
    [data-rating-val="1"]:first-of-type {
        border: 2px solid #2e844a !important;
    }

    /*maintain*/
    [data-rating-val="1"] {
        border: 2px solid #4caf50 !important;
    }

    /*repair*/
    [data-rating-val="2"] {
        border: 2px solid #dd7a01 !important;
    }

    /*urgent repair*/
    [data-rating-val="3"] {
        border: 2px solid #f44336 !important;
    }

    .row1 .btn-generate-active[data-rating-val="1"], .row1 .btn-generate-active[data-rating-val="2"], .row1 .btn-generate-active[data-rating-val="3"] {
        background-color: #12759c !important;
        border: 2px solid #12759c !important;
        color: white !important;
    }

    /*report req*/
    [data-rating-val="3"]:last-of-type {
        border: 2px solid #ba0517 !important;
    }


    div.roofsd-dynamicAdviceOption.row1 > p {
        height: 20vh
    }

    .titlemodal {
        font-size: 20px;
        font-weight: bold;
        color: white;
    }


    .assesmentmodal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        top: 0;
        left: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    }



    .assesmentmodal-content {
        background: linear-gradient(#0a5b82 40%,#12759c 100%);
        margin: auto;
        padding: 20px;
        border-top-right-radius: 50px;
        width: 40%;
        height: 80%;
        color: white;
        -webkit-box-shadow: 0 8px 6px -6px black;
        -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;
    }


    .notesmodal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        top: 0;
        left: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    }

    .notesmodal-content {
        background: linear-gradient(#0a5b82 40%,#12759c 100%);
        margin: auto;
        padding: 25px;
        border-radius: 20px;
        width: 40%;
        height: 80%;
        color: white;
        -webkit-box-shadow: 0 8px 6px -6px black;
        -moz-box-shadow: 0 8px 6px -6px black;
        box-shadow: 0 8px 6px -6px black;
    }

    .module-popup-backrop {
        position: fixed;
        background: #000000ad;
        height: 100vh;
        width: 100vw;
        top: 0%;
        left: 0%;
        z-index: -1;
        opacity: 0;
        transition: 0.3s ease-in;
    }

    .module-backrop-active {
        z-index: 2;
        opacity: 1;
    }


    .module-input-popup {
        position: fixed;
        height: 40%;
        width: 55%;
        background: white;
        left: 25%;
        top: 0%;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

    .module-input-header {
        height: 20%;
        align-items: center;
        padding: 20px;
        background: white;
        text-align: center;
        color: #0f3f64;
        font-size: 20px;
        font-weight: 600;
    }

    .module-input-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
        font-size: large;
        color: #0B3A5F;
        background: white;
        padding: 20px;
    }

    .module-input-actions {
        display: flex;
        align-items: center;
        padding: 0px 20px;
        padding-bottom: 15px;
        justify-content: flex-end;
        background: white;
        color: white;
        height: 20%;
    }



    .module-prompt-popup {
        position: fixed;
        height: 40%;
        width: 50%;
        background: white;
        left: 25%;
        top: 0%;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

    .enlarge-image {
        position: absolute;
        height: 80%;
        width: fit-content;
        transform: translate(-50%);
        background: white;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

        .enlarge-image .module-popup-content {
            height: 82%;
            padding-bottom: 0px;
        }

        .enlarge-image .module-popup-actions {
            padding: 0px;
            padding-right: 20px;
            margin-top: 30px;
        }

    .enlarge-image-holder {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        width: 100%;
        height: 100%;
    }

        .enlarge-image-holder img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

    .module-popup-edit-info {
        width: 75%;
        left: 12.5%;
        height: 80%;
        overflow: auto !important;
    }

    .height-auto {
        height: auto !important;
    }

    .module-prompt-popup-condition {
        position: fixed;
        height: 40%;
        width: 92% !important;
        background: white;
        left: 25%;
        top: 0%;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

    .module-prompt-popup-condition-report {
        width: 80% !important
    }

    .module-prompt-open {
        opacity: 1;
        z-index: 3;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
    }

    .module-popup-header {
        height: fit-content;
        align-items: center;
        padding: 20px;
        background: white;
        text-align: center;
        color: #0f3f64;
        font-size: 26px;
        font-weight: 600;
        padding-bottom: 0px;
    }

    .module-popup-header-info {
        height: 60%;
        align-items: center;
        padding: 20px;
        background: white;
        text-align: center;
        color: #0f3f64;
        font-size: 28px;
        font-weight: 600;
    }

    .module-popup-text {
        outline: none;
        padding: 10px 20px;
        font-size: 15px;
        resize: none;
        width: 100%;
        max-width: 100%;
        height: 95%;
        border: 1.5px solid #878787;
        border-radius: 10px;
        color: #0f3f64;
        font-size: 16px;
    }

    .module-popup-content {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: #0B3A5F;
        background: white;
        padding: 20px;
        height: fit-content;
    }

    .module-popup-content-info {
        justify-content: center;
        align-items: center;
        color: #0B3A5F;
        background: white;
        padding: 20px;
        padding-top: 0px;
    }

        .module-popup-content-info .module-popup-actions {
            padding: 0px;
        }

    #modal-photo-box img {
        margin-left: 15px;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Fills the box while maintaining aspect ratio */
    }

    .copy-move-modal-radio-group {
        display: flex;
    }

    .copy-move-modal-radio-label {
        display: inline-flex;
        align-items: center;
    }

        .copy-move-modal-radio-label span {
            width: 80px;
        }

    .copy-move-modal-radio {
        margin-left: 0px;
    }

    .copy-move-modal-image-container {
        margin-left: 10%;
        width: 30%;
        padding-right: 10px;
        box-sizing: border-box
    }

    .module-popup-content-move-copy {
        justify-content: center;
        align-items: center;
        height: 60%;
        font-size: large;
        color: #0f3f64;
        background: white;
        width: 60%;
        margin-right: 10%;
        margin-left: 10%;
        margin-top: -5px;
        margin-bottom: 20px
    }

        .module-popup-content-move-copy input, .module-popup-content-move-copy select {
            padding: 8px 14px;
            color: #0B3A5F;
            background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
            text-align: left;
            font-size: 15px;
            border-radius: 10px;
            border: 1.5px solid #747474;
            box-sizing: border-box;
            margin-bottom: 15px;
            min-width: 100%
        }

            .module-popup-content-move-copy input[type="radio"] {
                margin-bottom: 0px;
                max-width: 20px;
                min-width: 20px;
                accent-color: #0B3A5F;
                margin-right: 10px;
                height: 15px;
            }

    #copy-move-modal-sections-dropdown {
        margin-top: 15px
    }

    #modal-image-count {
        margin-left: 10px;
        font-size: 16px;
        color: #0f3f64;
        text-align: center
    }

    .copy-move-modal-main {
        display: flex;
        align-items: flex-start;
        background: white;
    }

    .module-popup-actions {
        display: flex;
        align-items: center;
        padding: 0px 20px;
        padding-bottom: 15px;
        justify-content: flex-end;
        background: white;
        color: white;
        height: fit-content;
    }

    .module-popup-actions-condition {
        display: flex;
        align-items: center;
        padding: 0px 20px;
        padding-bottom: 15px;
        justify-content: flex-end;
        background: white;
        color: white;
        height: fit-content;
    }

    .module-btn-action {
        cursor: pointer;
        padding: 8px 25px;
        border-radius: 14px !important;
        font-size: 16px;
        border-radius: 5px;
        margin-left: 10px;
        font-weight: 600;
    }

    .module-popup-confirm {
        background: #0f3f64;
        border: 2px solid #0f3f64;
        color: white;
        transition: 0.3s ease-in;
    }

        .module-popup-confirm:hover {
            border: 2px solid #0a2c46;
            background: #0a2c46;
        }

    .module-popup-cancel {
        background: white;
        border: 2px solid #0f3f64;
        color: #0f3f64;
        transition: 0.3s ease-in;
    }

    .module-popup-copy-clipboard {
        background: #0E769D;
        padding: 7px 14px;
        color: white;
        margin-top: 20px;
        text-align: center;
        font-size: 15px;
        float: left;
        border-radius: 10px;
        border: 2px solid #0E769D;
        cursor: pointer;
        margin-left: 10px;
        font-weight: 600;
        box-sizing: border-box;
        margin-bottom: 15px;
        min-width: 50%;
        margin-left: 25%
    }

    .module-popup-copy-clipboard:hover {
        cursor: pointer;
        background-color: #0a5774;
        border: 2px solid #0a5774;
    }

    .module-popup-send-email {
        background: #0f3f64;
        padding: 7px 14px;
        color: white;
        text-align: center;
        font-size: 15px;
        float: left;
        border-radius: 10px;
        border: 2px solid #0f3f64;
        cursor: pointer;
        margin-left: 10px;
        font-weight: 600;
        box-sizing: border-box;
        margin-bottom: 15px;
        min-width: 50%;
        margin-left: 25%
    }

        .module-popup-send-email:hover {
            cursor: pointer;
            background-color: #0a2c46;
            border: 2px solid #0a2c46;
        }

    .copy-data-popup .module-popup-actions {
        min-width: 100%
    }

    .module-popup-remove {
        background: white;
        border: 2px solid #0f3f64;
        color: #0f3f64;
        transition: 0.3s ease-in;
    }

    .module-popup-cancel:hover {
        border: 2px solid #0a2c46;
        color: #0a2c46;
    }

    .module-popup-remove:hover {
        border: 2px solid #0a2c46;
        color: #0a2c46;
    }

    .module-popup-copy-site-to-report {
        background: #12759c;
        transition: 0.3s ease-in;
        margin-left: 13.5px;
        margin-right: 13.5px;
        border: 2px solid #12759c;
        color: white
    }

    .module-popup-copy-report-to-site {
        background: #12759c;
        transition: 0.3s ease-in;
        border: 2px solid #12759c;
        color: white;
        margin-left: 13.5px;
        margin-right: 13.5px;
    }

    .module-input-content input, .edit_address_popup input, .module-input-content textarea {
        outline: none;
        padding: 10px 20px;
        font-size: 15px;
        resize: none;
        width: 90%;
        max-width: 100%;
        border: 1.5px solid #878787;
        border-radius: 10px;
        color: #0f3f64;
        font-size: 16px
    }

    .module-popup-textarea {
        outline: none;
        padding: 10px 20px;
        font-size: 15px;
        resize: none;
        width: 100%;
        max-width: 100%;
        height: 95%;
        border: 1.5px solid #878787;
        border-radius: 10px;
        color: #0f3f64;
        font-size: 16px
    }

    .edit-popup-textarea {
        outline: none;
        border: none;
        padding: 5px 8px;
        font-size: 15px;
        margin: 0px;
        resize: none;
        width: 100%;
        max-width: 100%;
        border: 1px solid #b1b1b1;
    }

    .edit-photo-comment {
        position: absolute;
        top: 7px;
        left: 7px;
        color: #0f3f64;
        font-size: 18px;
    }

        .edit-photo-comment:hover {
            cursor: pointer;
            color: s
        }

    .output-tab-switch .module-popup-textarea2 {
        outline: none;
        border: 1.5px solid #878787;
        border-radius: 10px;
        padding: 10px 20px;
        font-size: 16px;
        margin: 5px;
        resize: none;
        width: 100%;
        max-width: 100%;
        height: 77%;
        color: #0f3f64
    }

    .module-popup-textareareport {
        outline: none;
        padding: 10px 20px;
        font-size: 15px;
        resize: none;
        width: 100%;
        max-width: 100%;
        height: 95%;
        border: 1.5px solid #878787;
        border-radius: 10px;
        color: #0f3f64;
        font-size: 16px;
    }

    .module-popup-content-edit {
        height: fit-content
    }

    .edit_address_popup {
        height: fit-content;
        width: 60%;
    }

        .edit_address_popup label, .edit_address_popup input {
            float: left
        }

        .edit_address_popup label {
            width: 28%;
            margin-right: 2%;
            margin-top: 7px;
            color: #0f3f64
        }

        .edit_address_popup input {
            width: 70%;
            margin-bottom: 10px;
            max-width: 65%
        }

    .edit_address_form {
        max-width: 90%
    }

    .output-tab-switch .module-popup-textareareport2 {
        outline: none;
        padding: 10px 20px;
        font-size: 15px;
        resize: none;
        width: 100%;
        max-width: 100%;
        height: 95%;
        border: 1.5px solid #878787;
        border-radius: 10px;
        color: #0f3f64;
        font-size: 16px;
    }

    .output-tab-switch p {
        margin-bottom: 0px
    }

    .notesbutton, .reportbutton {
        position: absolute;
        top: 22px;
        left: 10px;
    }

    .reportbutton {
        left: 80px;
    }

.multi_row_output {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 75vh;
}

    .module_button_holder {
        text-align: center;
        margin-top: 18px;
    }

    .popup-default-open {
        opacity: 1;
        top: 25%;
        z-index: 3;
    }

    .na-prompt-popup {
        position: fixed;
        height: 30%;
        width: 50%;
        background: #193d61;
        left: 25%;
        top: 0%;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

    .na-prompt-open {
        opacity: 1;
        top: 25%;
        z-index: 3;
    }

    .na-popup-header {
        height: 20%;
        align-items: center;
        padding: 20px;
        background: white;
        text-align: center;
        color: #0f3f64;
        font-size: 20px;
        font-weight: 600;
    }


    .na-popup-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
        font-size: large;
        color: #0B3A5F;
        background: white;
        padding: 20px;
    }

    .na-popup-actions {
        display: flex;
        align-items: center;
        padding: 0px 20px;
        padding-bottom: 15px;
        justify-content: flex-end;
        background: white;
        color: white;
        height: 20%;
    }

    .generic-confirm-cancel-prompt-popup {
        position: fixed;
        height: fit-content;
        width: 50%;
        background: #193d61;
        left: 25%;
        top: 0%;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

    .generic-confirm-cancel-prompt-open {
        opacity: 1;
        top: 25%;
        z-index: 3;
    }

    .generic-confirm-cancel-popup-header {
        display: flex;
        min-height: fit-content;
        align-items: center;
        padding: 10px 20px;
        font-size: 20px;
        background: white;
        color: #0c4b72;
        font-weight: 600
    }


    .generic-confirm-cancel-popup-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: fit-content;
        font-size: 16px;
        padding: 10px 20px;
        color: #0c4b72;
        background: white;
    }

    .generic-confirm-cancel-popup-content h3 {
        font-size: 18px;
        font-weight: 400;
    }

    .generic-confirm-cancel-popup-actions {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        justify-content: flex-end;
        background: white;
        color: white;
        min-height: fit-content;
    }

    .inspection-prompt-popup {
        position: fixed;
        height: 40%;
        width: 50%;
        background: white;
        left: 25%;
        top: 0%;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

    .inspection-prompt-open {
        opacity: 1;
        top: 20%;
        z-index: 3;
    }

    .inspection-popup-header {
        height: 20%;
        align-items: center;
        padding: 20px;
        background: white;
        text-align: center;
        color: #0f3f64;
        font-size: 20px;
        font-weight: 600;
    }

    .inspection-popup-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
        font-size: large;
        color: #0B3A5F;
        background: white;
        padding: 20px;
    }

    .inspection-popup-actions {
        display: flex;
        align-items: center;
        padding: 0px 20px;
        padding-bottom: 15px;
        justify-content: flex-end;
        background: white;
        color: white;
        height: 20%;
    }

    .sitenote-prompt-popup {
        position: fixed;
        height: 40%;
        width: 50%;
        background: white;
        left: 25%;
        top: 0%;
        opacity: 0;
        border-radius: 10px;
        overflow: hidden;
        transition: 0.3s ease-in;
    }

    .sitenote-prompt-open {
        opacity: 1;
        top: 20%;
        z-index: 3;
    }

    .sitenote-popup-header {
        height: 20%;
        align-items: center;
        padding: 20px;
        background: white;
        text-align: center;
        color: #0f3f64;
        font-size: 20px;
        font-weight: 600;
    }

    .sitenote-popup-content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60%;
        font-size: large;
        color: #0f3f64;
        background: white;
        padding: 20px
    }

    .sitenote-popup-actions {
        display: flex;
        align-items: center;
        padding: 0px 20px;
        padding-bottom: 15px;
        justify-content: flex-end;
        background: white;
        color: white;
        height: 20%;
    }

.condition_holder, .report_condition_holder {
    width: 48%
}

    .module-prompt-edit {
        height: 70%;
    }

    .module-prompt-popup-condition {
        height: fit-content !important
    }

    .module-prompt-edit-condition {
        height: 55%
    }

    .module-popup-edit {
        width: 75%;
        height: fit-content;
    }

    .move-copy-popup {
        min-height: fit-content;
        width: 60%;
    }

    .module_body_text {
        font-weight: 600;
        font-size: 20px;
    }

    .module_title_edit {
        margin-left: 10px;
        font-weight: 600;
    }

    .module_title_edit_sub {
        margin-left: 10px;
        font-size: 17px
    }

    .module-prompt-edit .module-popup-header {
        height: fit-content;
    }

    .module-prompt-edit .module-popup-actions {
        height: 15%;
    }

    .module-content-edit {
        display: flex;
        flex-direction: column;
        height: 70%;
        font-size: 16px;
        color: #0B3A5F;
        background: white;
        padding: 15px 20px;
        overflow: auto;
    }

    .edit-popup-subsection {
        height: 50%;
        width: 100%;
    }

        .edit-popup-subsection hr {
            margin: 4px;
            color: black;
        }

    .edit-subsection-tag {
        position: relative;
        background: blue;
        color: white;
        font-weight: bold;
        float: left;
        background-color: #12759c;
        padding: 4px 6px;
    }

    button[id*="Other"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    button[id*="NotKnown"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    button[id*="N/A"]:not(.blur-button), button[data-report-val="n/a"]:not(.blur-button), button[data-report-val="N/A"]:not(.blur-button), button[id*="DateOfInspectionEdit"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    button[id*="Visibility"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    button[id*="OtherFeature"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    button[id*="Describe"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    .row1 .btn-generate-active[id*="Describe"], .row1 .btn-generate-active[id*="N/A"], .row1 .btn-generate-active[data-report-val="n/a"], .row1 .btn-generate-active[data-report-val="N/A"], .row1 .btn-generate-active[id*="Visibility"], .row1 .btn-generate-active[id*="OtherFeature"], .row1 .btn-generate-active[id*="EPCrating"], .row1 .btn-generate-active[id*="DateOfInspectionEdit"] {
        background-color: #12759c !important;
        border: 2px solid #12759c !important;
        color: white !important;
    }

    button[id*=EPCratingA]:not(.blur-button) {
        border: 2px solid #00C781 !important
    }

    button[id*=EPCratingB]:not(.blur-button) {
        border: 2px solid #19b459 !important
    }

    button[id*=EPCratingC]:not(.blur-button) {
        border: 2px solid #8dce46 !important
    }

    button[id*=EPCratingD]:not(.blur-button) {
        border: 2px solid #ffd500 !important
    }

    button[id*=EPCratingE]:not(.blur-button) {
        border: 2px solid #fcaa65 !important
    }

    button[id*=EPCratingF]:not(.blur-button) {
        border: 2px solid #ef8023 !important
    }

    button[id*=EPCratingG]:not(.blur-button) {
        border: 2px solid #e9153b !important
    }

    button[id*=EPCratingExempt]:not(.blur-button) {
        border: 2px solid #12759c !important
    }

    .tab-report-hide {
        display: none !important;
    }

    .btn-report-icon {
        transform: scale(1.3)
    }

    .btn-report-popup {
        cursor: pointer;
    }

    .break-line-spacer {
        height: 25px;
    }



    .time-popup {
        width: 40% !important
    }

    .sitenote-btn-block, .submission-btn-block {
        pointer-events: all
    }


    @media all and (max-width: 1400px) {
        .break-line-spacer {
            height: 15px;
        }
    }

    @media all and (max-width: 1200px) {

        .module-input-content input[type="time"] {
            font-size: 24px;
        }

        .mandatory-photo {
            padding-left: 22.5px !important;
            padding-right: 22.5px !important;
            font-size: 15px !important;
        }

        .edit-photo-comment {
            font-size: 16px !important
        }

        .image-not-taken-div button {
            font-size: 15px !important;
        }

        .image-not-taken-text {
            margin-top: 7.5px !important
        }

        .form1 .buttonnav {
            width: 16.5%;
        }

        .buttonname {
            padding: 8px !important;
        }

        .primary-button, .primary-button-contrast, .secondary-button, .secondary-button-contrast, .confirm-enter-btn, .top-container .collective-buttons {
            padding: 7px !important;
        }

        .buttonvalue, .buttonvaluedate {
            padding: 8px !important
        }

        .photo-gallery-menu-item {
            padding: 7px !important
        }

        select.photo-gallery-menu-item {
            padding-left: 4px !important
        }

        .circle {
            right: 3px !important
        }

        div.walls-e3_1Room.row1 > p {
            margin-bottom: 180px !important;
        }

        div.other-g2_1WallMaterial.row1 > p {
            margin-bottom: 65px !important;
        }

        div.floor-e4_1aLocation.row1 > p {
            margin-bottom: 100px !important;
        }

        div.floor-e4_1bFinish.row1 > p {
            margin-bottom: 165px !important;
        }

        div.ceilings-e2_1Room.row1 > p {
            margin-bottom: 180px !important;
        }

        div.wall-d4_1Finish.row1 > p {
            margin-bottom: 65px !important;
        }

        div.wall-d4_1System .section {
            margin-bottom: 165px !important;
        }

        div.wall-d4_3.notesspacer > div > p {
            margin-bottom: 70px !important;
        }

        .wall-d4_2DampIdentifiedCause p.section, .walls-e3_2DampIdentifiedCause p.section, .walls-e3_2DampIdentifiedCause p.section, .roof-e1_2DampIdentifiedCause p.section, .floor-e4_2DampIdentifiedCause p.section, .bathroomfittings-e8_2DampIdentifiedCause p.section, .garage-e2_2DampIdentifiedCause p.section {
            margin-bottom: 65px !important;
        }

        div.roofsa-dynamicForm.row1.blur > p {
            margin-bottom: 65px !important;
        }
    }

    @media all and (max-width: 1100px) {
        .form1 .buttonnav {
            font-size: 14px;
        }
    }

    @media screen and (max-width: 1250px) {
        .buttonedit {
            margin-left: 0.8% !important;
            padding: 7px 12px !important
        }
    }

    .notesspacer {
        min-height: 45.5vh;
    }

    .report-map-image {
        padding: 10px;
        width: 100%;
    }

    .roofsa-dynamicMaterial.row1 > p {
        margin-bottom: 75px;
    }

    .risks-b1_1RiskConfirm > p.section {
        margin-bottom: 75px;
    }

    button[id*="NotOriginal"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    .row1 .btn-generate-active[id*="NotOriginal"] {
        background-color: #12759c !important;
        border: 2px solid #12759c !important;
        color: white !important;
    }

    [data-custom-class="indepentBtnToggle"] {
        background-color: coral !important
    }


    button[id*="OtherFeature"]:not(.blur-button) {
        background: #D8F7FC !important;
        border: 2px solid #12759c !important;
    }

    .overview-table-container {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 80px 160px;
    }

    .cardholder tbody:nth-child(odd) {
        background-color: white
    }

    .cardholder tbody:nth-child(even) {
        background-color: #e6f2fc;
        color: black
    }

    .module-loader-prompt {
        display: flex;
        padding-top: 40px;
        justify-content: center;
        align-items: center;
        position: fixed;
        width: 50%;
        z-index: 3;
        background: white;
        left: 25%;
        top: 32%;
        opacity: 0;
        border-radius: 10px;
        transition: 0.3s ease-in;
    }

    @media (max-width: 1200px) {
        .module-loader-prompt {
            width: 80%;
            left: 10%;
        }
    }

    .popup-info-multi-group {
        height: fit-content !important
    }

    .loader-prompt-active {
        opacity: 0.98;
        overflow: hidden;
    }

    .module-loader-spinner,
    .module-loader-complete {
        width: 100%;
        text-align: center;
        font-size: 1.3rem;
    }

    .lds-default {
        display: inline-block;
        position: relative;
        margin-top: 10px;
        margin-bottom: 10px;      
        width: 80px;
        height: 80px;
        transform: scale(1.8);
    }

    .lds-default div {
        position: absolute;
        width: 6px;
        height: 6px;
        background: #0e769d;
        border-radius: 50%;
        animation: lds-default 1.2s linear infinite;
    }

    .loading_text {
        color: #0e769d;
        margin-top: 22px;
        font-weight: 600;
    }

    .lds-default div:nth-child(1) {
        animation-delay: 0s;
        top: 37px;
        left: 66px;
    }

    .lds-default div:nth-child(2) {
        animation-delay: -0.1s;
        top: 22px;
        left: 62px;
    }

    .lds-default div:nth-child(3) {
        animation-delay: -0.2s;
        top: 11px;
        left: 52px;
    }

    .lds-default div:nth-child(4) {
        animation-delay: -0.3s;
        top: 7px;
        left: 37px;
    }

    .lds-default div:nth-child(5) {
        animation-delay: -0.4s;
        top: 11px;
        left: 22px;
    }

    .lds-default div:nth-child(6) {
        animation-delay: -0.5s;
        top: 22px;
        left: 11px;
    }

    .lds-default div:nth-child(7) {
        animation-delay: -0.6s;
        top: 37px;
        left: 7px;
    }

    .lds-default div:nth-child(8) {
        animation-delay: -0.7s;
        top: 52px;
        left: 11px;
    }

    .lds-default div:nth-child(9) {
        animation-delay: -0.8s;
        top: 62px;
        left: 22px;
    }

    .lds-default div:nth-child(10) {
        animation-delay: -0.9s;
        top: 66px;
        left: 37px;
    }

    .lds-default div:nth-child(11) {
        animation-delay: -1s;
        top: 62px;
        left: 52px;
    }

    .lds-default div:nth-child(12) {
        animation-delay: -1.1s;
        top: 52px;
        left: 62px;
    }

    @keyframes lds-default {
        0%, 20%, 80%, 100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.5);
            background-color: #1299CC
        }
    }

    .module-loader-prompt .fa {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 80px;
        text-align: center;
        width: 80px;
        height: 80px;
        transform: scale(1.8);
    }

    .module-loader-prompt .module-loader-complete .fa-check-circle {
        color: #2e844a;
    }

    .module-loader-prompt .module-loader-complete .fa-exclamation-circle {
        color: #ba0517;
    }

    .db-sync-btn {
        cursor: pointer;
        color: #00213d !important;
        font-size: 20px;
        font-weight: 600;
        margin-right: 7.5px;
        margin-top: 7.5px
    }

    .tabs {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        padding: 0;
        margin: 0;
    }

    .tab {
        border: 1.5px solid #BFBFBF;
        border-left: 1px solid #BFBFBF;
        border-right: 1px solid #BFBFBF;
        border-bottom: 3px solid #0e769d;
        font-size: 16px;
        padding: 8px 12px;
        transition: border-bottom-color 0.3s;
        color: #0f3f64;
        border-radius: 14px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-weight: 600;
        background: #fff;
        width: 100%;
        float: left;
        cursor: pointer;
        position: relative;
    }

        .tab[data-section="B1.1"], .tab[data-section="B2.1"], .tab[data-section="D0.1"], .tab[data-section="E0.1"], .tab[data-section="F0.1"], .tab[data-section="G0.1"], .tab[data-section="H1.1"], .tab[data-section="H2.1"], .tab[data-section="H3.1"], .tab[data-section="B0.0"] {
            max-width: 25%;
            background-color: #0E769D !important;
            cursor: default !important;
            transform: scale(1.0) !important
        }

        .tab:hover {
            background: #eaf9fc;
        }

    .tab-selected {
        background-color: #0E769D;
        color: white;
        border: 1.5px solid #0e769d;
        border-left: 1px solid #0e769d;
        border-right: 1px solid #0e769d;
        border-bottom: 3px solid #0e769d;
    }

        .tab-selected:hover {
            background-color: #0E769D;
            cursor: default
        }

    .tab .tab-validation-indicator {
        position: absolute;
        top: -6px;
        right: -6px;
        font-weight: bold;
        font-size: 18px;
        background-color: white;
        border-radius: 10px;
        padding: 1px;
        height: 19px;
        width: 19px;
        pointer-events: none;
        z-index: 1;
    }

        .tab .tab-validation-indicator,
        .tab .tab-validation-indicator .fa-check-circle,
        .tab .tab-validation-indicator .fa-times-circle {
            display: none;
        }

            .tab .tab-validation-indicator.is-valid,
            .tab .tab-validation-indicator.is-not-valid {
                display: initial;
            }

            .tab .tab-validation-indicator.is-valid {
                color: #2e844a;
            }

            .tab .tab-validation-indicator.is-not-valid {
                color: #ba0517;
            }

    .div-switch-inactive {
        display: none;
    }

    .div-switch-active {
        display: block;
    }

    .div-switch-header {
        padding-left: 50px;
        padding-right: 50px;
        text-align: center;
        min-width: 40.7vw;
    }

    div.floor-e4_1bFinish.row1 > p {
        margin-bottom: 75px;
    }

    div.ceilings-e2_1Room.row1 > p {
        margin-bottom: 125px;
    }

    div.roof-e1_4Issue.row1 > p {
        margin-bottom: 75px;
    }


    div.walls-e3_1Room.row1 > p {
        margin-bottom: 125px;
    }

    #sitenote-preview {
        cursor: pointer
    }

    .preview-hide-element {
        display:none;
    }

    .buttonnav {
        position: relative;
    }

    .prog-tracker {
        position: absolute;
        right: -3px;
        font-weight: bold;
        font-size: 18px;
        color: #97adc0;
        top: -6px;
        transition: .4s ease-in;
    }

    .prog-tracker-gallery {
        position: absolute;
        right: -4px;
        font-weight: bold;
        font-size: 18px;
        color: #97adc0;
        top: -7px;
        transition: .4s ease-in;
    }

    #report-photo-gallery {
        position: relative
    }

    .prog-tracker::before {
        display: inline-block;
        width: 0.7em;
        height: 0.7em;
        background-color: white;
        border-radius: 50%;
        position: relative;
    }

    .prog-tracker-complete {
        color: #2e844a;
    }


    #result {
        display: flex;
        gap: 10px;
        padding: 10px 0;
    }

    .thumbnail {
        height: 200px;
    }

    .photo-import-hidden {
        display: none !important;
        /*width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;*/
    }

    .photo-import-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30px;
    }

    #report-overview-preview {
        cursor: pointer;
    }

    .ni-btn-hide {
        display: none
    }

    .fa-align-left, .changeview {
        display: none
    }

    .reportbutton.active {
        background: #0f3f64 !important;
        border: 2px solid #0f3f64 !important;
        border-bottom: none;
    }

    .reportbutton {
        border: 2px solid #0f3f64 !important;
        color: #0f3f64;
        border-bottom: none;
    }

    .notesbutton.active {
        background: #0E769D !important
    }

    .cardholder {
        width: 90%;
        text-align: center;
        background: white;
        border-radius: 25px;
        top: 70px;
        margin: auto;
        padding-top: 15px;
        position: absolute;
        left: 0;
        right: 0;
        display: table-cell;
        vertical-align: middle;
        min-height: 100vh;
        margin-bottom: 25px;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    .accommodation-table-cases {
        width: 100%;
    }

        .accommodation-table-cases .accommodation-table-headers th, .accommodation-table-name td, .accomodation-floor-row .prop-row-header1 {
            color: white !important;
            background-color: #12759c !important;
            font-size: 15px !important;
            letter-spacing: 0em !important;
            padding: 5px !important;
            text-align: center;
            font-weight: 600 !important;
            height: 56px !important
        }

    .accommodation-table-headers th {
        border-right: 1px solid #e0e0e0;
    }

    .accomodation-floor-row th {
        border-bottom: 1px solid #e0e0e0;
    }

    .accommodation-table-cases td {
        padding: 12px !important;
        color: #00213d !important;
        font-size: 20px !important;
        text-align: center !important;
        border: 0.75px solid #e0e0e0 !important;
        font-weight: 600
    }

    .accommodation-table-cases .accomodation-floor-row:hover {
        background-color: #dbdbdb !important;
        cursor: pointer !important
    }

    .accommodation-table-cases td:nth-child(1) {
        border-left: none !important;
    }

    .accomodation-empty-cell {
        border-left: none !important;
        border-top: none !important;
        border: none !important;
        background-color: white !important
    }

    tr.accommodation-table-headers > th:nth-child(10) {
        border-right: none
    }

    div.dynamic-block-identifier.div-switch-inactive.custom-accomodation-block.div-switch-active > table > tbody > tr:nth-child(8) > th {
        border-bottom: none
    }

    .custom-accomodation-block-page {
        padding: 25px;
        padding-top: 0;
    }

    .blur-button {
        background-color: #F2F2F2 !important;
        pointer-events: none;
    }

    .form1 .blur-button {
        background: #F2F2F2 !important;
        border: 2px solid #BFBFBF !important;
        font-style: italic;
        font-weight: 400;
        color: #6e6e6e;
        pointer-events: none;
    }

    .form1 .confirm-enter-btn.blur-button {
        background-color: #F2F2F2;
        border: 2px solid #BFBFBF;
        color: #6e6e6e;
        font-style: normal;
        font-weight: 600;
        pointer-events: none;
    }

    .hide-on-blur.blur {
        display: none;
    }

    .wall-d4_1System .section {
        margin-bottom: 120px;
    }

    div.regulations-h1_1.notesspacer > div > p.section {
        margin-bottom: 180px;
    }

    div.guarantees-h2_1General.General.row1 > p.section {
        margin-bottom: 120px;
    }

    .comparable textarea {
        height: 20em;
        width: 78% !important;
        border-radius: 10px;
        border: 1.5px solid #0B3A5F;
        color: #0B3A5F;
        padding: 10px
    }

        .comparable textarea ~ input[type="text"] {
            height: 38px !important;
        }

    .admin-portal-div {
        width: 100%;
        height: fit-content;
        text-align: left;
        color: #0f3f64 !important
    }

        .admin-portal-div label {
            width: 200px;
        }

    .admin-portal-user {
        padding: 15px;
        color: #00213d;
        text-align: left;
        margin-bottom: 10px
    }

    .adminportal-button {
        background: white !important;
        position: absolute !important;
        right: 20px !important;
        top: 26px !important;
        color: #0f3f64;
    }

    .adminportal-back-button {
        background: white !important;
        color: #0f3f64;
    }

    .adminportal-button:hover {
        cursor: pointer;
        background-color: #BDECF6 !important
    }

    .adminportal-back-button:hover {
        cursor: pointer;
        background-color: #BDECF6 !important
    }

    .admin-portal-user input[type="checkbox"] {
        width: 25px;
        height: 25px;
        margin-left: 17px;
        accent-color: #0E769D
    }

    .admin-portal-user label {
        font-size: 1.2rem;
        margin-left: 1rem;
    }

    .admin-portal .tableHolder {
        margin-top: 0;
        margin-left: 0;
    }

    .edit-user {
        float: left
    }

    .mini-text {
        font-size: 20px;
        text-align: center;
        color: white;
        position: absolute;
        top: 30px;
        left: 50px;
    }

    .admin-portal-div h3 {
        font-weight: 600;
        font-size: 24px;
        margin-bottom: 25px;
        margin-left: 0.8rem
    }

    .user-form .user-form-field {
        margin-bottom: 1.5rem;
    }

    .user-form .user-form-field label {
        margin-left: 15px;
    }

    .user-form .user-form-field.inline {
        display: inline-block;
        margin-left: 10px;
        margin-bottom: 1.2rem;
    }

    .user-form .user-form-field.full-width {
        display: block;
        margin-left: 10px;
        margin-right: 10px;
    }

    .user-form .user-form-field.inline label,
    .user-form .user-form-field.full-width label {
        margin-left: 0;
    }

    .user-form .user-form-field .statusItem.as-field {
        margin-right: 1.6rem;
        width: 400px;
        display:block;
        padding: 10px 20px;
    }

    .user-form input,
    .user-form select,
    .user-form-field pre {
        outline: none;
        padding: 10px 20px;
        resize: none;
        width: 100%;
        border: 1.5px solid #878787;
        border-radius: 10px;
        color: #0f3f64;
        font-size: 16px;
    }

    .user-form input,
    .user-form select {
        max-width: 400px;
    }

    .user-form-field pre {
        background-color: #eeeeee;
    }

    .user-form input:focus,
    .user-form select:focus {
        border-color: #007bff;
        box-shadow: 0 0 5px #007bff;
    }

    .user-form input[readonly],
    .user-form select[disabled] {
        background-color: #eeeeee;
        opacity: 1;
    }

    .user-form-actions {
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .user-form .input-validation-error {
        border-color: #ba0517;
    }

    .user-form .field-validation-error {
        display: block;
        margin-left: 215px;
        color: #ba0517 !important;
        font-size: 15px;
        font-weight: 600;
        text-align: left;
    }

    .user-form .field-validation-error.block {
        margin-left: 0;
    }

    .user-form .sectionMessage {
        padding: 10px;
        width: 100%;
        background-color: #e6f8fc;
        color: #00213d;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }

    form {
        width: 90vw;
        max-width: 100%;
    }

    .admin-portal form {
        max-width: 100%;
        width: 100%
    }

    .admin-portal-user form {
        max-width: 100%;
        width: 100%
    }

    .admin-portal {
        text-align: left;
        width: 98%;
        margin-left: 5%;
    }

    input {
        border: 1px solid;
        padding: 0.3em;
        width: 100%;
    }

    form label {
        display: inline-block !important;
        font-size: 1.2rem;
        margin-left: 1rem;
    }

    .enter-blur-btns-div {
        margin-top: -210px;
    }

    #getLatestVersionButton {
        display: none;
        top: -102px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        color: white;
        background-color: #474747;
        padding: 12px 20px;
        border-radius: 10px;
        position: absolute;
        z-index: 50;
        text-align: center;
        font-size: 15px;
        font-weight: 600;
        box-shadow: 0 14px 22px -16px rgba(0, 0, 0, .25);
        animation: shake 0.5s ease-in-out;
    }

    .latest-version-icon {
        margin-right: 10px;
        font-size: 20px;
        vertical-align: middle
    }

    @keyframes shake {
        0% {
            transform: translateX(-50%) rotate(0deg);
        }

        20% {
            transform: translateX(-50%) rotate(1deg);
        }

        40% {
            transform: translateX(-50%) rotate(-1deg);
        }

        60% {
            transform: translateX(-50%) rotate(1deg);
        }

        80% {
            transform: translateX(-50%) rotate(-1deg);
        }

        100% {
            transform: translateX(-50%) rotate(1deg);
        }
    }


    #getLatestVersionButton:hover {
        background-color: #3f3f3f;
        cursor: pointer
    }

    .save-conflict-modal {
        height: fit-content;
    }

    .save-conflict-modal-p {
        color: #0B3A5F;
        padding: 10px;
    }

    .version-number {
        color: #0B3A5F;
        text-align: center;
        font-weight: 600;
        font-size: 14px;
        margin-top: 5px;
    }

    .cases-selected {
        background-color: blue
    }

    .tab-container {
        display: flow-root;
        margin-top: 125px;
        margin-left: 5%;
    }

    .tab-btn {
        border: 1.5px solid #BFBFBF;
        border-left: 1px solid #BFBFBF;
        border-right: 1px solid #BFBFBF;
        border-bottom: 3px solid #0e769d;
        font-size: 16px;
        padding: 10px 12px;
        transition: border-bottom-color 0.3s;
        color: #0f3f64;
        border-radius: 14px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        font-weight: 600;
        background: #fff;
        width: 18.2%;
        float: left;
        cursor: pointer
    }

        .tab-btn:hover {
            background: #eaf9fc;
            transform: scale(1.01);
        }

        .tab-btn.tab-active {
            color: #fff;
            background: #0e769d;
            border: 1.5px solid #0e769d;
            border-left: 1px solid #0e769d;
            border-right: 1px solid #0e769d;
            border-bottom: 3px solid #0e769d;
        }

        .tab-btn.active:hover {
            background: #0e769d;
        }

    [data-tab-content-id].tab-inactive {
        display: none !important;
    }

    .previous-sct-module .module_box_edit {
        width: 75%;
        text-align: center
    }

    .previous-sct-module input[type="text"] {
        float: left;
        padding: 8px 14px;
        color: #0B3A5F;
        background: #fff;
        text-align: left;
        font-size: 15px;
        border-radius: 10px;
        border: 1px solid #747474;
        font-weight: 600;
        box-sizing: border-box;
        margin-left: 15px;
        margin-top: -4px
    }

    .previous-sct-module input[type="radio"] {
        float: left;
        width: 30px;
        margin-top: 6px;
        height: 15px;
        accent-color: #0f3f64
    }

    .previous-sct-module .radio-heading {
        float: left
    }

    .banner-install-progress-popup {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: 100px;
        font-size: 16px;
        padding: 10px 24px 14px 24px;
        color: #0c4b72;
        background: white;
        font-weight: bold;
    }


    #banner-progress-container {
        position: relative;
        width: 100%;
        background-color: #bfbfbf;
        height: 26px;
        border-radius: 10px;
        overflow: hidden;
    }

    .banner-progress-complete {
        background-color: #0786b8 !important;
    }

    #banner-progress-bar {
        height: 100%;
        width: 0%;
        background-color: #0786b8;
        transition: width 0.3s ease;
        border-radius: 10px 0 0 10px;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    }

    #banner-progress-count {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
        font-family: sans-serif;
        text-align: center;
        line-height: 26px;
        color: white;
    }

    .banner-install-error {
        background: red !important;
        cursor: pointer;
    }

    .banner-install-error #banner-progress-bar {
        background: red;
    }

.topBarActions > * {
    margin-right: 10px;
}

button.userAvatar {
    border: none;
    background-color: transparent;
}

button.userAvatar:hover .userAvatarInner {
    cursor: pointer;
    background-color: #BDECF6 !important
}

.userAvatar .userAvatarInner {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: #fff;
    color: #0f3f64;
    height: 50px;
    width: 50px;
    font-size: 1.25rem;
    line-height: 1;
    border-radius: 50%;
}