html, body {
    font-family: Poppins, Arial, sans-serif !important;
}

.tooltip {
    font-family: Poppins, Arial, sans-serif !important;
    color: cornflowerblue;
}

.popover {
    font-family: Poppins, Arial, sans-serif !important;
}

.daterangepicker {
    font-family: Poppins, Arial, sans-serif !important;
}

.kt-footer .kt-footer__bottom .kt-footer__menu a, .kt-footer .kt-footer__top .kt-footer__nav li a, .kt-footer .kt-footer__top .kt-footer__about, .kt-footer .kt-footer__bottom .kt-footer__copyright a, .kt-footer .kt-footer__bottom .kt-footer__copyright {
    color: #87879F !important;
}

.kt-header__brand .kt-header__brand-title {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    border-left: 1px solid white !important;
    color: white !important;
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    margin: 0.25rem 0 0 2.25rem !important;
    padding: 1rem 0 1rem 2rem !important;
}

.kt-header-mobile {
    background-color: #000 !important;
}

.required {
    font-weight: bold;
    color: red;
    padding-left: 3px;
}

tr.deleted {
    color: red;
    text-decoration: line-through;
}

tr.read {
    font-style: italic;
}

    tr.read td {
        color: #505050 !important;
    }

.completedIndicator {
    color: green !important;
}

.submittedIndicator {
    color: blue !important;
}

.draftIndicator {
    color: lightgray !important;
}

.noAccessIndicator {
    color: lightgray !important;
    content: "\f023" !important;
}

.kt-wizard-v3 .kt-form .kt-wizard-v3__content {
    width: 100% !important;
}

.kt-wizard-v3 .kt-wizard-v3__nav {
    padding: 2em !important;
}

.kt-portlet__body--fit .dataTables_length {
    padding: 10px 0 0 10px;
}

.kt-portlet__body--fit .dataTables_info {
    padding: 0 0 10px 10px;
}

.kt-portlet__body--fit .dataTables_paginate {
    padding: 0 10px 10px 0;
}

.datePicker {
    width: 130px !important;
    display: inline-block !important;
}

.dateTimePicker {
    width: 180px !important;
    display: inline-block !important;
}

.overdue {
    color: red;
    font-weight: bold;
}

textarea.safe {
    border: solid 1px #ced4da;
}

textarea.over {
    border: solid 1px #dc3545;
    font-weight: bold;
}

small.safe {
    color: #505050 !important;
}

small.over {
    color: #dc3545 !important;
    font-weight: bold;
}

.headerLabel {
    font-size: 1.3em;
}

.bootstrap-touchspin-injected {
    width: 100px !important;
}

[data-toggle="tooltip"] {
    cursor: help;
    color: dodgerblue;
}

.fa-question-circle, .flaticon-questions-circular-button {
    cursor: help;
    color: dodgerblue;
}

.btn-note {
    color: #313131 !important;
    background-color: #FFFFE0 !important;
    border-color: #313131 !important;
}

    .btn-note:hover {
        color: #1B1B1B;
        background-color: #E3E3C8;
        border-color: #1B1B1B;
    }

    .btn-note:focus, .btn-note.focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 162, 35, 0.5);
        box-shadow: 0 0 0 0.2rem rgba(222, 162, 35, 0.5);
    }

    .btn-note.disabled, .btn-note:disabled {
        color: #212529;
        background-color: #ffb822;
        border-color: #ffb822;
    }

    .btn-note:not(:disabled):not(.disabled):active, .btn-note:not(:disabled):not(.disabled).active,
    .show > .btn-note.dropdown-toggle {
        color: #212529;
        background-color: #eea200;
        border-color: #e19900;
    }

        .btn-note:not(:disabled):not(.disabled):active:focus, .btn-note:not(:disabled):not(.disabled).active:focus,
        .show > .btn-note.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 162, 35, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(222, 162, 35, 0.5);
        }

.kt-portlet__head--notes {
    color: #313131 !important;
    background-color: #FFFFE0 !important;
}

.kt-badge.kt-badge--notes {
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
}

#history_DataTable .badge {
    white-space: pre-wrap !important;
    text-align: left;
}

#history_DataTable td {
    vertical-align: top;
}

ol[class^="module"] {
    list-style: none;
    margin-left: 1em;
    padding-left: 0;
}

    ol[class^="module"] li {
        position: relative;
        display: block;
        margin-bottom: .5em;
        margin-left: 2em;
    }

        ol[class^="module"] li::before {
            position: absolute;
            top: 0;
            display: inline-block;
            width: 3em;
            margin-left: -3em;
        }

        ol[class^="module"] li .form-group {
            display: inline-block;
        }

ol.module1 {
    counter-reset: module1-counter;
}

    ol.module1 li::before {
        content: "1." counter(module1-counter) ". ";
        counter-increment: module1-counter;
    }

ol.module2 {
    counter-reset: module2-counter;
}

    ol.module2 li::before {
        content: "2." counter(module2-counter) ". ";
        counter-increment: module2-counter;
    }

ol.module3 {
    counter-reset: module3-counter;
}

    ol.module3 li::before {
        content: "3." counter(module3-counter) ". ";
        counter-increment: module3-counter;
    }

ol.module4 {
    counter-reset: module4-counter;
}

    ol.module4 li::before {
        content: "4." counter(module4-counter) ". ";
        counter-increment: module4-counter;
    }

ol.module5 {
    counter-reset: module5-counter;
}

    ol.module5 li::before {
        content: "5." counter(module5-counter) ". ";
        counter-increment: module5-counter;
    }

ol.module6 {
    counter-reset: module6-counter;
}

    ol.module6 li::before {
        content: "6." counter(module6-counter) ". ";
        counter-increment: module6-counter;
    }

ol.module7 {
    counter-reset: module7-counter;
}

    ol.module7 li::before {
        content: "7." counter(module7-counter) ". ";
        counter-increment: module7-counter;
    }

ol.module8 {
    counter-reset: module8-counter;
}

    ol.module8 li::before {
        content: "8." counter(module8-counter) ". ";
        counter-increment: module8-counter;
    }

ol.module9 {
    counter-reset: module9-counter;
}

    ol.module9 li::before {
        content: "9." counter(module9-counter) ". ";
        counter-increment: module9-counter;
    }

ol.module10 {
    counter-reset: module10-counter;
}

    ol.module10 li::before {
        content: "10." counter(module10-counter) ". ";
        counter-increment: module10-counter;
    }

ol.module11 {
    counter-reset: module11-counter;
}

    ol.module11 li::before {
        content: "11." counter(module11-counter) ". ";
        counter-increment: module11-counter;
    }

ol.module12 {
    counter-reset: module12-counter;
}

    ol.module12 li::before {
        content: "12." counter(module12-counter) ". ";
        counter-increment: module12-counter;
    }

ol.module13 {
    counter-reset: module13-counter;
}

    ol.module13 li::before {
        content: "13." counter(module13-counter) ". ";
        counter-increment: module13-counter;
    }

ol.module13 {
    counter-reset: module13-counter;
}

    ol.module13 li::before {
        content: "13." counter(module13-counter) ". ";
        counter-increment: module13-counter;
    }

ol.module14 {
    counter-reset: module14-counter;
}

    ol.module14 li::before {
        content: "14." counter(module14-counter) ". ";
        counter-increment: module14-counter;
    }

ol.module15 {
    counter-reset: module15-counter;
}

    ol.module15 li::before {
        content: "15." counter(module15-counter) ". ";
        counter-increment: module15-counter;
    }

ol.module16 {
    counter-reset: module16-counter;
}

    ol.module16 li::before {
        content: "16." counter(module16-counter) ". ";
        counter-increment: module16-counter;
    }


ol.module17 {
    counter-reset: module17-counter;
}

    ol.module17 li::before {
        content: "1." counter(module17-counter) ". ";
        counter-increment: module17-counter;
    }


ol.module18 {
    counter-reset: module18-counter;
}

    ol.module18 li::before {
        content: "2." counter(module18-counter) ". ";
        counter-increment: module18-counter;
    }


ol.module19 {
    counter-reset: module19-counter;
}

    ol.module19 li::before {
        content: "3." counter(module19-counter) ". ";
        counter-increment: module19-counter;
    }


ol.module20 {
    counter-reset: module20-counter;
}

    ol.module20 li::before {
        content: "4." counter(module20-counter) ". ";
        counter-increment: module20-counter;
    }


ol.module21 {
    counter-reset: module21-counter;
}

    ol.module21 li::before {
        content: "5." counter(module21-counter) ". ";
        counter-increment: module21-counter;
    }


ol.module22 {
    counter-reset: module22-counter;
}

    ol.module22 li::before {
        content: "6." counter(module22-counter) ". ";
        counter-increment: module22-counter;
    }


ol.module23 {
    counter-reset: module23-counter;
}

    ol.module23 li::before {
        content: "7." counter(module23-counter) ". ";
        counter-increment: module23-counter;
    }


ol.module24 {
    counter-reset: module24-counter;
}

    ol.module24 li::before {
        content: "8." counter(module24-counter) ". ";
        counter-increment: module24-counter;
    }


ol.module25 {
    counter-reset: module25-counter;
}

    ol.module25 li::before {
        content: "9." counter(module25-counter) ". ";
        counter-increment: module25-counter;
    }


ol.module26 {
    counter-reset: module26-counter;
}

    ol.module26 li::before {
        content: "10." counter(module26-counter) ". ";
        counter-increment: module26-counter;
    }


ol.module27 {
    counter-reset: module27-counter;
}

    ol.module27 li::before {
        content: "11." counter(module27-counter) ". ";
        counter-increment: module27-counter;
    }


ol.module28 {
    counter-reset: module28-counter;
}

    ol.module28 li::before {
        content: "12." counter(module28-counter) ". ";
        counter-increment: module28-counter;
    }


ol.module29 {
    counter-reset: module29-counter;
}

    ol.module29 li::before {
        content: "13." counter(module29-counter) ". ";
        counter-increment: module29-counter;
    }


ol.module30 {
    counter-reset: module30-counter;
}

    ol.module30 li::before {
        content: "14." counter(module30-counter) ". ";
        counter-increment: module30-counter;
    }


ol.module31 {
    counter-reset: module31-counter;
}

    ol.module31 li::before {
        content: "15." counter(module31-counter) ". ";
        counter-increment: module31-counter;
    }


ol.module32 {
    counter-reset: module32-counter;
}

    ol.module32 li::before {
        content: "16." counter(module32-counter) ". ";
        counter-increment: module32-counter;
    }


ol.module33 {
    counter-reset: module33-counter;
}

    ol.module33 li::before {
        content: "17." counter(module33-counter) ". ";
        counter-increment: module33-counter;
    }


ol.module34 {
    counter-reset: module34-counter;
}

    ol.module34 li::before {
        content: "18." counter(module34-counter) ". ";
        counter-increment: module34-counter;
    }


ol.module35 {
    counter-reset: module35-counter;
}

    ol.module35 li::before {
        content: "19." counter(module35-counter) ". ";
        counter-increment: module35-counter;
    }


ol.module36 {
    counter-reset: module36-counter;
}

    ol.module36 li::before {
        content: "20." counter(module36-counter) ". ";
        counter-increment: module36-counter;
    }


ol.module37 {
    counter-reset: module37-counter;
}

    ol.module37 li::before {
        content: "21." counter(module37-counter) ". ";
        counter-increment: module37-counter;
    }


ol.module38 {
    counter-reset: module38-counter;
}

    ol.module38 li::before {
        content: "22." counter(module38-counter) ". ";
        counter-increment: module38-counter;
    }


ol.module39 {
    counter-reset: module39-counter;
}

    ol.module39 li::before {
        content: "23." counter(module39-counter) ". ";
        counter-increment: module39-counter;
    }


ol.module40 {
    counter-reset: module40-counter;
}

    ol.module40 li::before {
        content: "24." counter(module40-counter) ". ";
        counter-increment: module40-counter;
    }


ol.module41 {
    counter-reset: module41-counter;
}

    ol.module41 li::before {
        content: "25." counter(module41-counter) ". ";
        counter-increment: module41-counter;
    }

.kt-header__brand-logo-default {
    width: 361px;
}

table.table tbody td {
    vertical-align: top;
}

.form-group label {
    font-weight: 500 !important;
    color: #33374e !important;
}

.kt-header div.ce-name .kt-container {
    align-items: center;
}

.ce-name-header {
    width: 100%;
    padding: 1rem 30px;
    color: #464457;
    background-color: #fff;
    font-family: Poppins, Arial, sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    border-radius: 4px;
}

.ce-name-text {
    font-weight: bold;
}

/* Compliance Questions */

#moduleForm .form-control {
    border: 1px solid #767676;
}

    #moduleForm .form-control:focus {
        border: 1px solid #4d5cf2;
        color: #4d5cf2;
    }

div.form-group-question label {
    font-size: 1.1rem;
}

/* Question Panel */
.question-panel {
    margin: auto;
}

/* Container for the three options */
.options-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap; /* Ensures responsiveness */
}

/* Option Box */
.option-box {
    flex: 1;
    min-width: 200px; /* Ensures proper layout on small screens */
    background-color: #f0f0f0;
    border: 1px solid #767676; /*#495057;ebedf2*/
    color: #33374e;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
}

    /* When no option is selected, all options remain clickable */
    .option-box:hover {
        background-color: #ddd;
    }

    /* Selected box styling */
    .option-box.selected {
        background-color: #4D5CF2; /*#0056b3;*/
        color: #fff;
        border-color: #0056b3; /*#004a99;*/
    }

    .option-box.selected .option-content label {
        color: #fff !important;
    }

    .option-box label {
        cursor: pointer;
    }

    .option-box input[type="checkbox"] {
        cursor: pointer;
    }

        .option-box input[type="checkbox"]:disabled {
            cursor: not-allowed;
            margin-top: 2px;
        }

/* Header inside each option */
.option-header {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.option-max-reasons {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Checkbox styling */
.option-content {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    div.option-content label {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .option-content .text-danger.field-validation-error {
        margin-bottom: 0.5rem;
    }

.options-errors {
    margin-top: 1rem;
}

button.question-option-unselect {
    background-color: #fff;
    color: #4D5CF2;
    margin-top: 1rem;
}

    button.question-option-unselect:hover, button.question-option-unselect:focus {
        border: 2px solid #000;
        color: #4D5CF2;
        background-color: #f0f0f0;
    }


ol[class^="module"] li .cq-form-panel .form-group, ol[class^="module"] li .qoex-form-panel .form-group {
    display: block;
}

.qo-form-explanation {
    margin-top: 1rem;
}

.qoex-form-panel {
    margin-bottom: 1rem;
}

.cqrs-additional-info-form, .cqrs-risk-managed-form {
    margin-bottom: 1rem;
}

.cqrs-additional-info-form, .cqrs-risk-managed-form, .qo-explanation-form {
    background-color: #f8f8f8;
    border: 1px solid #767676;
    border-radius: 4px;
}

div.cqrs-additional-info-form > .form-group, div.qo-explanation-form > .form-group {
    margin-bottom: 0.5rem;
}

.cqrs-rmf-header {
    color: #33374e;
    display: flex;
    font-size: 1.1rem;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cqrs-rmf-title {
    flex: 1;
    font-weight: bold;
}

.cqrs-rmf-toggle {
    flex: 0;
}

    .cqrs-rmf-toggle .toggle-form {
        align-items: center;
        background-color: transparent;
        border: 0;
        color: #5867dd;
        cursor: pointer;
        display: flex;
        gap: 1rem;
    }

        .cqrs-rmf-toggle .toggle-form:hover {
            color: #2739c1;
        }

        .cqrs-rmf-toggle .toggle-form:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(222, 162, 35, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(222, 162, 35, 0.5);
        }

div.cqrs-risk-managed-form .form-control:not(:last-child) {
    margin-bottom: 1rem;
}

div.cqrs-risk-managed-form .form-control:last-child {
    margin-bottom: 0.5rem;
}

div.cqrs-risk-managed-form .form-group {
    margin-bottom: 0;
}
.btn-add-mitigation {
    margin-bottom: 1rem;
}

    .btn-add-mitigation:focus {
        border: 2px solid #000;
    }

button.btn-remove-mitigation:hover, button.btn-remove-mitigation:focus {
    color: #C70014;
    background-color: #FFE2E0;
}

button.btn-remove-mitigation:focus {
    border: 2px solid #000;
}

.mitigation-treatment {
    border: 1px solid #767676;
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 1.25rem;
}

.view-module-question-header {
    font-weight: 400;
    text-decoration: underline;
}

.view-module-question-mitigation {
    white-space: pre-line;
}

    .view-module-question-mitigation span {
        font-weight: 400;
    }

.view-multiline {
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.view-module-mitigations {
    padding-left: 1rem;
}

.view-no-option {
    font-style: italic;
}

/* cc = center center - to center the contents of a cell. */
div.view-cq-response, div.view-cq-score, div.cc {
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
}

div.view-cq-score, div.cc {
    justify-content: center;
}

div.view-cq-score p {
    font-weight: bold;
    font-size: 150%;
}

p.fully-implemented, p.risk-managed, p.not-yet-implemented, p.dd-yes, p.dd-no {
    max-width: 100%;
}

p.fully-implemented span, p.risk-managed span, p.not-yet-implemented span, p.dd-yes span, p.dd-no span {
    border-radius: 6px;
    display: inline-block;
    font-size: 150%;
    font-weight: bold;
    max-width:100%;
    overflow-wrap: anywhere;
    padding: 1rem;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
}

div.effective-rating, p.fully-implemented span, p.dd-yes span {
    color: #007F4F;
    background-color: #DFF6EC;
}

div.moderate-rating {
    color: #CC8400;
    background-color: #FFF3DC;
}

p.risk-managed span {
    color: #007F4F;
    background-color: #DFF6EC;
}

div.low-rating, p.not-yet-implemented span, p.dd-no span {
    color: #C70014;
    background-color: #FFE2E0;
}

.view-cq-section {
    margin: 1rem 0;
    padding: 1rem 0 0 0;
}

.view-question {
    width: 100%;
}

.cell {
    padding: 12px;
    background-color: white;
    font-weight: 500;
}

.header {
    font-weight: bold;
    background-color: #f5f5f5;
}

.highlight {
    background-color: #4d5cf2;
    color: #fff;
}


/* Base styles for display of Risk-Managed compliance question responses. */
.grid-table-compliance {
    display: grid;
    gap: 1px;
    background-color: #ddd;
    border: 1px solid #ddd;
}

/* Desktop layout (12 columns) */
.grid-table-compliance {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
        "gtc-h1 gtc-h1 gtc-h2 gtc-h2 gtc-h2 gtc-h2 gtc-h2 gtc-h2 gtc-h2 gtc-h2 gtc-h3 gtc-h3"
        "gtc-d1 gtc-d1 gtc-d2 gtc-d2 gtc-d2 gtc-d2 gtc-d2 gtc-d2 gtc-d2 gtc-d2 gtc-d3 gtc-d3"
        "gtc-h4 gtc-h4 gtc-h4 gtc-h4 gtc-h5 gtc-h5 gtc-h5 gtc-h5 gtc-h6 gtc-h6 gtc-h7 gtc-h7"
        "gtc-d4 gtc-d4 gtc-d4 gtc-d4 gtc-d5 gtc-d5 gtc-d5 gtc-d5 gtc-d6 gtc-d6 gtc-d7 gtc-d7"
        "gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8 gtc-h8"
        "gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8"
        "gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8 gtc-d8";
}

/* Assign desktop areas */
.gtc-h1 {
    grid-area: gtc-h1;
}

.gtc-h2 {
    grid-area: gtc-h2;
}

.gtc-h3 {
    grid-area: gtc-h3;
}

.gtc-d1 {
    grid-area: gtc-d1;
}

.gtc-d2 {
    grid-area: gtc-d2;
}

.gtc-d3 {
    grid-area: gtc-d3;
}

.gtc-h4 {
    grid-area: gtc-h4;
}

.gtc-h5 {
    grid-area: gtc-h5;
}

.gtc-h6 {
    grid-area: gtc-h6;
}

.gtc-h7 {
    grid-area: gtc-h7;
}

.gtc-d4 {
    grid-area: gtc-d4;
}

.gtc-d5 {
    grid-area: gtc-d5;
}

.gtc-d6 {
    grid-area: gtc-d6;
}

.gtc-d7 {
    grid-area: gtc-d7;
}

.gtc-h8 {
    grid-area: gtc-h8;
}

.gtc-d8 {
    grid-area: gtc-d8;
}

.grid-table-compliance p {
    margin-bottom: 0;
}

/* Mobile layout (2 columns) */
@media (max-width: 1024px) {
    .grid-table-compliance {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "gtc-h1 gtc-h3"
            "gtc-d1 gtc-d3"
            "gtc-h2 gtc-h2"
            "gtc-d2 gtc-d2"
            "gtc-h4 gtc-h4"
            "gtc-d4 gtc-d4"
            "gtc-h5 gtc-h5"
            "gtc-d5 gtc-d5"
            "gtc-h6 gtc-h6"
            "gtc-d6 gtc-d6"
            "gtc-h7 gtc-h7"
            "gtc-d7 gtc-d7"
            "gtc-h8 gtc-h8"
            "gtc-d8 gtc-d8";
    }
}

/* Base styles for display of the Overall Performance score in the Assessment Summary screen. */
.grid-table-overall-score {
    display: grid;
    gap: 1px;
    background-color: #ddd;
    border: 1px solid #ddd;
}

.grid-table-overall-score .cell, .grid-table-calc-guide .cell {
    font-weight: 600;
}

.grid-table-overall-score .header {
    background-color: #4d5cf2;
    font-weight: bold;
}

/* Desktop layout (12 columns) */
.grid-table-overall-score {
    grid-template-columns: repeat(6, 2fr);
    grid-template-areas:
        "gtos-h1 gtos-h2 gtos-h3 gtos-h4 gtos-h5 gtos-h6"
        "gtos-d1 gtos-d2 gtos-d3-1 gtos-d4-1 gtos-d5-1 gtos-d6-1"
        "gtos-d1 gtos-d2 gtos-d3-2 gtos-d4-2 gtos-d5-2 gtos-d6-2"
        "gtos-d1 gtos-d2 gtos-d3-3 gtos-d4-3 gtos-d5-3 gtos-d6-3"
        "gtos-d1 gtos-d2 gtos-d3-4 gtos-d4-4 gtos-d5-4 gtos-d6-4"
        "gtos-d1 gtos-d2 gtos-d3-5 gtos-d4-5 gtos-d5-5 gtos-d6-5"
        "gtos-d1 gtos-d2 gtos-d3-6 gtos-d4-6 gtos-d5-6 gtos-d6-6"
}

div.gtos-h1 {
    grid-area: gtos-h1;
}

div.gtos-h2 {
    grid-area: gtos-h2;
}

div.gtos-h3 {
    grid-area: gtos-h3;
}

div.gtos-h4 {
    grid-area: gtos-h4;
}

div.gtos-h5 {
    grid-area: gtos-h5;
}

div.gtos-h6 {
    grid-area: gtos-h6;
}

div.gtos-h7 {
    grid-area: gtos-h7;
    display: none;
}

div.gtos-d1 {
    grid-area: gtos-d1;
    font-size: 1.5rem;
}

div.gtos-d2 {
    grid-area: gtos-d2;
    font-size: 1.5rem;
}

div.gtos-d3-1 {
    grid-area: gtos-d3-1;
}

div.gtos-d4-1 {
    grid-area: gtos-d4-1;
}

div.gtos-d5-1 {
    grid-area: gtos-d5-1;
}

div.gtos-d6-1 {
    grid-area: gtos-d6-1;
}

div.gtos-d7-1 {
    grid-area: gtos-d7-1;
    display: none;
}

div.gtos-d3-2 {
    grid-area: gtos-d3-2;
}

div.gtos-d4-2 {
    grid-area: gtos-d4-2;
}

div.gtos-d5-2 {
    grid-area: gtos-d5-2;
}

div.gtos-d6-2 {
    grid-area: gtos-d6-2;
}

div.gtos-d7-2 {
    grid-area: gtos-d7-2;
    display: none;
}

div.gtos-d3-3 {
    grid-area: gtos-d3-3;
}

div.gtos-d4-3 {
    grid-area: gtos-d4-3;
}

div.gtos-d5-3 {
    grid-area: gtos-d5-3;
}

div.gtos-d6-3 {
    grid-area: gtos-d6-3;
}

div.gtos-d7-3 {
    grid-area: gtos-d7-3;
    display: none;
}

div.gtos-d3-4 {
    grid-area: gtos-d3-4;
}

div.gtos-d4-4 {
    grid-area: gtos-d4-4;
}

div.gtos-d5-4 {
    grid-area: gtos-d5-4;
}

div.gtos-d6-4 {
    grid-area: gtos-d6-4;
}

div.gtos-d7-4 {
    grid-area: gtos-d7-4;
    display: none;
}

div.gtos-d3-5 {
    grid-area: gtos-d3-5;
}

div.gtos-d4-5 {
    grid-area: gtos-d4-5;
}

div.gtos-d5-5 {
    grid-area: gtos-d5-5;
}

div.gtos-d6-5 {
    grid-area: gtos-d6-5;
}

div.gtos-d7-5 {
    grid-area: gtos-d7-5;
    display: none;
}

div.gtos-d3-6 {
    grid-area: gtos-d3-6;
}

div.gtos-d4-6 {
    grid-area: gtos-d4-6;
}

div.gtos-d5-6 {
    grid-area: gtos-d5-6;
}

div.gtos-d6-6 {
    grid-area: gtos-d6-6;
}

div.gtos-d7-6 {
    grid-area: gtos-d7-6;
    display: none;
}

div.gtos-h4-1 {
    grid-area: gtos-h4-1;
    display: none;
}

div.gtos-h4-2 {
    grid-area: gtos-h4-2;
    display: none;
}

div.gtos-h4-3 {
    grid-area: gtos-h4-3;
    display: none;
}

div.gtos-h4-4 {
    grid-area: gtos-h4-4;
    display: none;
}

div.gtos-h4-5 {
    grid-area: gtos-h4-5;
    display: none;
}

div.gtos-h4-6 {
    grid-area: gtos-h4-6;
    display: none;
}

div.gtos-h5-1 {
    grid-area: gtos-h5-1;
    display: none;
}

div.gtos-h5-2 {
    grid-area: gtos-h5-2;
    display: none;
}

div.gtos-h5-3 {
    grid-area: gtos-h5-3;
    display: none;
}

div.gtos-h5-4 {
    grid-area: gtos-h5-4;
    display: none;
}

div.gtos-h5-5 {
    grid-area: gtos-h5-5;
    display: none;
}

div.gtos-h5-6 {
    grid-area: gtos-h5-6;
    display: none;
}

div.gtos-h6-1 {
    grid-area: gtos-h6-1;
    display: none;
}

div.gtos-h6-2 {
    grid-area: gtos-h6-2;
    display: none;
}

div.gtos-h6-3 {
    grid-area: gtos-h6-3;
    display: none;
}

div.gtos-h6-4 {
    grid-area: gtos-h6-4;
    display: none;
}

div.gtos-h6-5 {
    grid-area: gtos-h6-5;
    display: none;
}

div.gtos-h6-6 {
    grid-area: gtos-h6-6;
    display: none;
}

div.gtos-h7-1 {
    grid-area: gtos-h7-1;
    display: none;
}

div.gtos-h7-2 {
    grid-area: gtos-h7-2;
    display: none;
}

div.gtos-h7-3 {
    grid-area: gtos-h7-3;
    display: none;
}

div.gtos-h7-4 {
    grid-area: gtos-h7-4;
    display: none;
}

div.gtos-h7-5 {
    grid-area: gtos-h7-5;
    display: none;
}

div.gtos-h7-6 {
    grid-area: gtos-h7-6;
    display: none;
}

/* Mobile layout (2 columns) */
@media (max-width: 1024px) {
    .grid-table-overall-score {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "gtos-h1 gtos-h2"
            "gtos-d1 gtos-d2"
            "gtos-d3-1 gtos-d3-1"
            "gtos-h4-1 gtos-h5-1"
            "gtos-d4-1 gtos-d5-1"            
            "gtos-d6-1 gtos-d6-1"
            "gtos-d3-2 gtos-d3-2"
            "gtos-h4-2 gtos-h5-2"
            "gtos-d4-2 gtos-d5-2"            
            "gtos-d6-2 gtos-d6-2"
            "gtos-d3-3 gtos-d3-3"
            "gtos-h4-3 gtos-h5-3"
            "gtos-d4-3 gtos-d5-3"
            "gtos-d6-3 gtos-d6-3"
            "gtos-d3-4 gtos-d3-4"
            "gtos-h4-4 gtos-h5-4"
            "gtos-d4-4 gtos-d5-4"
            "gtos-d6-4 gtos-d6-4"
            "gtos-d3-5 gtos-d3-5"
            "gtos-h4-5 gtos-h5-5"
            "gtos-d4-5 gtos-d5-5"
            "gtos-d6-5 gtos-d6-5"
            "gtos-d3-6 gtos-d3-6"
            "gtos-h4-6 gtos-h5-6"
            "gtos-d4-6 gtos-d5-6"
            "gtos-d6-6 gtos-d6-6";
    }

    div.gtos-h3, div.gtos-h4, div.gtos-h5, div.gtos-h6, div.gtos-h7 {
        display: none;
    }

    div.gtos-d3-1, div.gtos-d3-2, div.gtos-d3-3, div.gtos-d3-4, div.gtos-d3-5, div.gtos-d3-6 {
        background-color: #2a2a3a;
        color: #fff;
        text-align: center;
    }

    div.gtos-h4-1, div.gtos-h4-2, div.gtos-h4-3, div.gtos-h4-4, div.gtos-h4-5, div.gtos-h4-6, div.gtos-h5-1, div.gtos-h5-2, div.gtos-h5-3, div.gtos-h5-4, div.gtos-h5-5, div.gtos-h5-6 {
        display: flex;
    }

    div .gtos-d1, div.gtos-d2, div.gtos-d4-1, div.gtos-d4-2, div.gtos-d4-3, div.gtos-d4-4, div.gtos-d4-5, div.gtos-d4-6, div.gtos-d5-1, div.gtos-d5-2, div.gtos-d5-3, div.gtos-d5-4, div.gtos-d5-5, div.gtos-d5-6 {
        height: 42px;
    }
}

/* Base styles for of table with four columns and two rows to display question responses that require a 4x2 table. */
.grid-table-4x2 {
    display: grid;
    gap: 1px;
    background-color: #ddd;
    border: 1px solid #ddd;
}

.grid-table-4x2 {
    grid-template-columns: 2fr 2fr 6fr 2fr;
    grid-template-areas:
        "gt-4x2-h1 gt-4x2-h2 gt-4x2-h3 gt-4x2-h4"
        "gt-4x2-d1 gt-4x2-d2 gt-4x2-d3 gt-4x2-d4";
}

/* Assign desktop areas */
.gt-4x2-h1 {
    grid-area: gt-4x2-h1;
}

.gt-4x2-h2 {
    grid-area: gt-4x2-h2;
}

.gt-4x2-h3 {
    grid-area: gt-4x2-h3;
}

.gt-4x2-h4 {
    grid-area: gt-4x2-h4;
}

.gt-4x2-d1 {
    grid-area: gt-4x2-d1;
}

.gt-4x2-d2 {
    grid-area: gt-4x2-d2;
}

.gt-4x2-d3 {
    grid-area: gt-4x2-d3;
}

.gt-4x2-d4 {
    grid-area: gt-4x2-d4;
}

.grid-table-4x2 p {
    margin-bottom: 0;
}

/* Mobile layout (2 columns) */
@media (max-width: 1024px) {
    .grid-table-4x2 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "gt-4x2-h1 gt-4x2-h4"
            "gt-4x2-d1 gt-4x2-d4"
            "gt-4x2-h2 gt-4x2-h2"
            "gt-4x2-d2 gt-4x2-d2"
            "gt-4x2-h3 gt-4x2-h3"
            "gt-4x2-d3 gt-4x2-d3";
    }
}

/* Base styles for of table with four columns and two rows to display question responses that require a 3x2 table. */
.grid-table-3x2 {
    display: grid;
    gap: 1px;
    background-color: #ddd;
    border: 1px solid #ddd;
}

.grid-table-3x2 {
    grid-template-columns: 2fr 8fr 2fr;
    grid-template-areas:
        "gt-3x2-h1 gt-3x2-h2 gt-3x2-h3"
        "gt-3x2-d1 gt-3x2-d2 gt-3x2-d3";
}

/* Assign desktop areas */
.gt-3x2-h1 {
    grid-area: gt-3x2-h1;
}

.gt-3x2-h2 {
    grid-area: gt-3x2-h2;
}

.gt-3x2-h3 {
    grid-area: gt-3x2-h3;
}

.gt-3x2-d1 {
    grid-area: gt-3x2-d1;
}

.gt-3x2-d2 {
    grid-area: gt-3x2-d2;
}

.gt-3x2-d3 {
    grid-area: gt-3x2-d3;
}

.grid-table-3x2 p {
    margin-bottom: 0;
}

/* Mobile layout (2 columns) */
@media (max-width: 1024px) {
    .grid-table-3x2 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "gt-3x2-h1 gt-3x2-h3"
            "gt-3x2-d1 gt-3x2-d4"
            "gt-3x2-h2 gt-3x2-h2"
            "gt-3x2-d2 gt-3x2-d2";
    }
}

/* Base styles for of table with two columns and two rows to display question responses that require a 2x2 table, with ratio of 5fr, 1fr. */
.grid-table-2x2-5-1 {
    display: grid;
    gap: 1px;
    background-color: #ddd;
    border: 1px solid #ddd;
}

.grid-table-2x2-5-1 {
    grid-template-columns: 5fr 1fr;
    grid-template-areas:
        "gt-2x2-5-1-h1 gt-2x2-5-1-h2"
        "gt-2x2-5-1-d1 gt-2x2-5-1-d2"
}

/* Assign desktop areas */
.gt-2x2-5-1-h1 {
    grid-area: gt-2x2-5-1-h1;
}

.gt-2x2-5-1-h2 {
    grid-area: gt-2x2-5-1-h2;
}

.gt-2x2-5-1-d1 {
    grid-area: gt-2x2-5-1-d1;
}

.gt-2x2-5-1-d2 {
    grid-area: gt-2x2-5-1-d2;
}

.grid-table-2x2-5-1 p {
    margin-bottom: 0;
}

/* Mobile layout (2 columns) */
@media (max-width: 1024px) {
    .grid-table-2x2-5-1 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "gt-2x2-5-1-h1 gt-2x2-5-1-h2"
            "gt-2x2-5-1-d1 gt-2x2-5-1-d2";
    }
}

/* Base styles for a table to display guide on how overall assessment scores and domain level scores are calculated.
   This "table" has two "sub-tables" within ("left" and "right"), with there being a visual gap between the left and right tables in large screen mode
   The right table will stack underneath the left table when the screen is resized to a smaller form factor, with the gap between the tables maintained.
*/

.grid-table-calc-guide {
    display: grid;
    grid-template-columns: 1fr 1fr 1rem 1fr 1fr;
    align-items: start;
    margin-bottom: 20px;
}

.table-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: #ddd;
    border: 1px solid #ddd;
}

.table-block.left {
    grid-column: 1 / 3;
}

.table-block.right {
    grid-column: 4 / 6;
}

.gap-spacer {
    grid-column: 3 / 4;
}

@media (max-width: 1279px) {
    .grid-table-calc-guide {
        grid-template-columns: 1fr 1fr;
    }

    .table-block.left,
    .table-block.right {
        grid-column: span 2;
    }

    .gap-spacer {
        height: 1rem;
        grid-column: span 2;
    }
}

/* 2 column flex table, with 80%, 20% sizing */
.flex-table-2c-80-20 {
    width: 100%;
    border: 1px solid #ddd;
}

.flex-row-2c-80-20 {
    display: flex;
    border-bottom: 1px solid #eee;
}

.flex-col-2c-80 {
    flex: 0 0 80%;
    padding: 10px;
    border-right: 1px solid #ddd;
}

.flex-col-2c-20 {
    flex: 0 0 20%;
    padding: 10px;
}

.flex-table-2c-80-20 p {
    margin-bottom: 0;
}

/* Calculations table */
.table-calculations {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}

.tc-data-row.totals {
    font-weight: 600;
}

/* Large screen layout (11 columns) */
@media (min-width: 1280px) {
    .table-calculations {
        display: grid;
        grid-template-columns: repeat(11, 1fr);
        border: 1px solid #ddd;
        gap: 1px;
        background-color: #ddd;
    }

    .tc-header-row, .tc-category-row, .tc-data-row {
        display: contents;
    }

    /*.cell {
        padding: 12px 8px;
        border-bottom: 1px solid #ddd;
        border-right: 1px solid #ddd;
        display: flex;
        align-items: center;
    }*/

    .tc-header-row .cell {
        font-weight: bold;
        background-color: #f2f2f2;
    }

    .tc-category-row .cell {
        display: flex;
        font-weight: bold;
        background-color: #e6e6e6;
        grid-column: 1 / -1;
        text-align: center;
    }

    /* Hide small screen headers */
    .tc-category-row .cell::before {
        display: none;
    }

    /* Ensure data cells span properly */
    .tc-data-row .cell:first-child {
        font-weight: bold;
    }

    .tc-data-row .cell:last-child {
        border-right: none;
    }
}

/* Small screen layout (3 columns) */
@media (max-width: 1279px) {
    .table-calculations {
        display: block;
        border: 1px solid #ddd;
    }

    .tc-header-row.large-screen {
        display: none;
    }

    .tc-category-row .cell {
        display: block;
        padding: 12px 8px;
        font-weight: bold;
        background-color: #e6e6e6;
        text-align: center;
        border-bottom: 1px solid #ddd;
    }

    .tc-data-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-bottom: 1px solid #ddd;
        gap: 1px;
        background-color: #ddd;
    }

    .table-calculations .cell {
        padding: 8px;
        display: flex;
        flex-direction: column;
    }

    /* Sub-category spans all columns */
    .tc-data-row .cell:first-child {
        grid-column: 1 / -1;
        font-weight: bold;
        background-color: #f5f5f5;
        padding: 10px 8px;
        border-bottom: 1px solid #eee;
    }

    /* Header 11 spans all columns */
    .tc-data-row .cell:last-child {
        grid-column: 1 / -1;
        padding: 10px 8px;
        display: none;
    }

    .tc-data-row.totals .cell:last-child {
        display: flex;
    }

    /* Show headers before each value */
    .table-calculations .cell:not(:first-child):not(:last-child)::before {
        content: attr(data-header);
        font-weight: bold;
        font-size: 0.85em;
        color: #666;
        margin-bottom: 4px;
    }

    /* Group headers and data in blocks */
    .table-calculations .cell:nth-child(2)::before,
    .table-calculations .cell:nth-child(3)::before,
    .table-calculations .cell:nth-child(4)::before {
        display: block;
    }

    .table-calculations .cell:nth-child(5)::before,
    .table-calculations .cell:nth-child(6)::before,
    .table-calculations .cell:nth-child(7)::before {
        display: block;
    }

    .table-calculations .cell:nth-child(8)::before,
    .table-calculations .cell:nth-child(9)::before,
    .table-calculations .cell:nth-child(10)::before {
        display: block;
    }
}

/* Assessment Summary - Declaration Form */
.table-approval-declaration {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: 1rem;
}

.table-approval-declaration .kt-heading {
    margin: 0;
}

.table-approval-declaration label.approval-declaration-col-30, .table-approval-declaration label.kt-checkbox, .form-group label.kt-radio {
    font-weight: normal !important;
}

.table-approval-declaration .form-group .headerLabel {
    font-weight: 600;
}

.approval-declaration-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.approval-declaration-col-30 {
    flex: 0 0 30%;
    box-sizing: border-box;
    margin-right: 5px;
}

.approval-declaration-col-70 {
    flex: 0 0 70%;
    box-sizing: border-box;
    max-width: 350px;
}

.approval-declaration-checkbox label {
    display: flex;
}

@media (max-width: 600px) {
    .table-approval-declaration {
        width: 100%;
    }

    .approval-declaration-row {
        display: block;
        align-items: center;
        margin-bottom: 5px;
    }

    .approval-declaration-col-30, .approval-declaration-col-70 {
        flex: 1 1 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
}


.file-upload {
    margin: 1rem 0;
}

.drop-zone {
    border: 2px dashed #aaa;
    border-radius: 4px;
    margin-bottom: 1rem;
    padding: 1rem;
    text-align: center;
    color: #777;
    background-color: #f9f9f9;
    transition: background-color 0.2s, border-color 0.2s;
}

.drop-zone:hover {
    cursor: pointer;
}

.drop-zone.dragover, .drop-zone:hover {
    background-color: #eef6ff;
    border-color: #4285f4;
    color: #333;
}

.existing-list {
    cursor: default;
    list-style: none;
    padding-left: 0;
}

.existing-list li {
    margin-bottom: 0.5rem;
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
}

.progress-wrapper {
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 1rem;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #4285f4;
    transition: width 0.3s ease;
}

.file-upload-add-file i {
    font-size: 2rem;
    margin-top: 1rem;
}

.uploaded-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.file-info {
    margin-top: 0.5rem;
}