/* --- APPOINTMENTS GRID --- */

.appointmentGrid > span {
    padding: 8px 4px;
}

/* Small screen layout */
@media screen and (max-width:580px) {

    .appointmentGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid lightgrey;
        margin-left: 30px;
    }

        .appointmentGrid .appointmentHeader {
            grid-column: span 2;
            display: none;
        }

        .appointmentGrid .appointmentDate {
            border-top: 1px solid lightgrey;
            grid-column: span 2;
        }

        .appointmentGrid .appointmentDuration {
            display: none;
        }

        .appointmentGrid .appointmentAdjuster::before {
            content: "Adjuster: ";
        }

        .appointmentGrid .appointmentInstructionId {
            font-weight: bold;
        }

        .appointmentGrid .appointmentInsured {
            grid-column: span 2;
        }

        .appointmentGrid .appointmentPolicyHolder::before {
            content: "Insured: ";
        }

        .appointmentGrid .appointmentAddress {
            grid-column: span 2;
        }

        .appointmentGrid .appointmentContactDetails {
            grid-column: span 2;
        }

        .appointmentGrid .appointmentComments {
            grid-column: span 2;
        }

        .appointmentGrid .appointmentStatus::before {
            content: "Status: ";
        }

        .appointmentGrid .appointmentBtnAssess {
            margin-bottom: 5px;
        }
}

/* Medium screen layout */
@media screen and (min-width: 581px) and (max-width:1599px) {

    .appointmentGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        border-bottom: 1px solid lightgrey;
        margin-left: 30px;
    }

        .appointmentGrid .appointmentHeader {
            display: none;
        }

        .appointmentGrid .appointmentDate, .appointmentStart, .appointmentEnd, .appointmentDuration {
            border-top: 1px solid lightgrey;
        }

        .appointmentGrid .appointmentAdjuster::before {
            content: "Adjuster: ";
        }

        .appointmentGrid .appointmentInstructionId {
            font-weight: bold;
            grid-column: span 3;
        }

        .appointmentGrid .appointmentPolicyHolder {
            grid-column: span 4;
        }

            .appointmentGrid .appointmentPolicyHolder::before {
                content: "Insured: ";
            }

        .appointmentGrid .appointmentAddress {
            grid-column: span 2;
        }

        .appointmentGrid .appointmentContactDetails {
            grid-column: span 2;
        }

        .appointmentGrid .appointmentComments {
            grid-column: span 4;
        }

            .appointmentGrid .appointmentComments::before {
                content: "Comments: ";
            }

        .appointmentGrid .appointmentStatus {
            grid-column: span 3;
        }

        .appointmentGrid .appointmentStatus::before {
            content: "Status: ";
        }

        .appointmentGrid .appointmentBtnAssess {
            margin-bottom: 5px;
        }
}

/* Large screen layout */
@media screen and (min-width: 1600px) {

    .appointmentGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 2fr 2fr 2fr 3fr 3fr 3fr 2fr 2fr;
        grid-auto-rows: min-content;
        border-top: 1px solid lightgrey;
        margin-left: 30px;
    }

        .appointmentGrid > span {
            border-bottom: 1px solid lightgrey;
        }
}


/* --- INSTRUCTIONS GRID --- */

.instructionGrid > span {
    padding: 8px 4px;
}

/* Small screen layout */
@media screen and (max-width:580px) {

    .instructionGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-bottom: 1px solid lightgrey;
    }

        .instructionGrid .instructionHeader, .filterBtnAssess, .filterBtnTime {
            display: none;
        }

        .instructionGrid .filterInstructionId::before {
            font-weight: bold;
            content: "Filters:";
        }

        .instructionGrid .instructionFilter {
            grid-column: span 2;
        }

        .instructionGrid .instructionId {
            border-top: 1px solid lightgrey;
            font-weight: bold;
            grid-column: span 2;
        }

        .instructionGrid .instructionClient {
            grid-column: span 2;
        }

        .instructionGrid .instructionInsured {
            grid-column: span 2;
        }

        .instructionGrid .instructionAddress {
            grid-column: span 2;
        }

        .instructionGrid .instructionContact {
            grid-column: span 2;
        }

        .instructionGrid .instructionBtnTime, .instructionBtnAssess, .instructionBtnDetail {
            margin-bottom: 5px;
        }
}

/* Medium screen layout */
@media screen and (min-width: 581px) and (max-width:1199px) {

    .instructionGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        border-bottom: 1px solid lightgrey;
    }

        .instructionGrid .headerAddress, .headerContact, .headerBtnTime, .headerBtnAssess, .headerBtnDetail, .filterBtnAssess, .filterBtnTime {
            display: none;
        }

        .instructionGrid .instructionId {
            font-weight: bold;
            border-top: 1px solid lightgrey;
        }

        .instructionGrid .instructionClient, .instructionInsured {
            border-top: 1px solid lightgrey;
        }

        .instructionGrid .instructionAddress {
            grid-column: span 3;
        }

        .instructionGrid .instructionAddress::before {
            content: "Address: ";
        }

        .instructionGrid .instructionContact {
            grid-column: span 3;
        }

            .instructionGrid .instructionContact::before {
                content: "Contact details: ";
            }

        .instructionGrid .instructionBtnTime, .instructionBtnAssess, .instructionBtnDetail {
            margin-bottom: 5px;
        }
}

/* Large screen layout */
@media screen and (min-width: 1200px) {

    .instructionGrid {
        display: grid;
        grid-template-columns: 1fr 2fr 2fr 3fr 2fr 1fr 1fr 1fr;
        grid-auto-rows: min-content;
        border-top: 1px solid lightgrey;
    }

    .instructionGrid > span {
        border-bottom: 1px solid lightgrey;
    }

}

/* ----------------- */

/* --- FORMS GRID --- */

.formsGrid > span {
    padding: 8px 4px;
}

/* Small & Medium screen layout */
@media screen and (max-width:1399px) {

    .formsGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid lightgrey;
        padding:10px;
        margin-top:15px;
    }

        .formsGrid:has(> .formsHeader) {
            display: none;
        }

    .formsGrid .formTemplateName {
        grid-column: span 2;
    }

    .formsGrid .formInsured {
        grid-column: span 2;
    }

    .formsGrid .formAddress {
        grid-column: span 2;
    }

    .formsGrid .formContactDetails {
        grid-column: span 2;
    }



}

/* Large screen layout */
@media screen and (min-width: 1400px) {

    .formsGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 2fr 2fr 3fr 1fr 1fr;
        grid-auto-rows: min-content;
        border-top: 1px solid lightgrey;
    }

        .formsGrid > span {
            border-bottom: 1px solid lightgrey;
        }
}

/* ----------------- */

/* --- TIME GRID --- */

.timeGrid > span {
    padding: 8px 4px;
}

.timeGrid > div {
    padding: 8px 4px;
}

/* Small screen layout */
@media screen and (max-width:580px) {

    .timeGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid lightgrey;
    }

    .timeGrid .timeHeader {
        display: none;
    }

    .timeGrid .timeRef {
        font-weight: bold;
    }

    .timeGrid .timeInsured {
        grid-column: span 2;
    }

    .timeGrid .timeNarrative {
        grid-column: span 2;
        border-bottom: 1px solid lightgrey;
    }

}

/* Medium screen layout */
@media screen and (min-width: 581px) and (max-width:936px) {

    .timeGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 2fr 0.5fr;
        grid-template-rows: 1fr 1fr;
        border-top: 1px solid lightgrey;
    }

        .timeGrid > span {
            border-bottom: 1px solid lightgrey;
        }

        .timeGrid > div {
            border-bottom: 1px solid lightgrey;
        }

        .timeGrid .headerNarrative {
            display: none;
        }

        .timeGrid .timeNarrative {
            grid-column: span 5;
        }

        .timeGrid .timeNarrative::before {
            content: "Narrative: ";
        }    
}

/* Large screen layout */
@media screen and (min-width: 937px) {

    .timeGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 2fr 0.5fr 4fr;
        border-top: 1px solid lightgrey;
    }

        .timeGrid > span {
            border-bottom: 1px solid lightgrey;
        }

        .timeGrid > div {
            border-bottom: 1px solid lightgrey;
        }

}

/* ----------------- */

/* --- STATUS GRID --- */

.statusGrid > span {
    padding: 8px 4px;
}

.statusEntries {
    cursor: pointer;
}

/* Small & Medium screen layout */
@media screen and (max-width:1199px) {

    .statusGrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px solid lightgrey;
        margin-left:30px;
    }

        .statusGrid .statusHeader {
            border-bottom: 1px solid lightgrey;
        }

        .statusGrid .personHeader {
            grid-column: span 2;
        }

        .statusGrid .personContent {
            grid-column: span 2;
        }

        .statusGrid .busynessCol {
            display: none;
        }

        .statusGrid .curStatusHeader {
            display: none;
        }

        .statusGrid .returningHeader {
            display: none;
        }

        .statusGrid .commentsHeader {
            display: none;
        }

        .statusGrid .commentsContent {
            grid-column: span 2;
        }

            .statusGrid .commentsContent::before {
                content: "Comments: ";
            }

        .statusGrid .officeDaysCol {
            display: none;
        }

        .statusGrid .phoneHeader {
            display: none;
        }

        .statusGrid .phoneContent {
            grid-column: span 2;
        }

        .statusGrid .phoneContent {
            border-bottom: 1px solid lightgrey;
        }

}

/* Large screen layout */
@media screen and (min-width: 1200px) {

    .statusGrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 3fr 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr 1.5fr;
        border-top: 1px solid lightgrey;
        margin-left: 30px;
    }

        .statusGrid > span {
            border-bottom: 1px solid lightgrey;
        }
}

/* ----------------- */


/* --- TIME EDITOR GRID --- */

/* Small screen layout */
@media screen and (max-width:799px) {

    .timeEditorGrid {
        display: grid;
        grid-template-columns: 1fr;
        width: 80vw;
        max-height: 70vh;
    }

}

/* Large screen layout */
@media screen and (min-width: 800px) {

    .timeEditorGrid {
        display: grid;
        grid-template-columns: 1fr 3fr;
        width: 80vw;
        max-width:1000px;
    }
}

/* ----------------- */

/* --- HISTORY EVENT GRID --- */

/* Small screen layout */
@media screen and (max-width:799px) {

    .historyEditorGrid {
        display: grid;
        grid-template-columns: 1fr;
        width: 80vw;
        max-height: 70vh;
    }
}

/* Large screen layout */
@media screen and (min-width: 800px) {

    .historyEditorGrid {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        width: 80vw;
        max-width: 600px;
    }

        .historyEditorGrid .narrativeContent {
            grid-column: span 2;
        }

        .historyEditorGrid .occurredContent {
            grid-column: span 2;
        }

        .historyEditorGrid .submitSection {
            grid-column: span 3;
        }
}

/* ----------------- */

/* --- PHONE EVENT GRID --- */

/* Small screen layout */
@media screen and (max-width:799px) {

    .phoneEditorGrid {
        display: grid;
        grid-template-columns: 1fr;
        width: 80vw;
        max-height: 70vh;
    }

    .phoneEditorConversationGrid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .phoneEditorPrivacyGrid {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Medium screen layout */
@media screen and (min-width: 800px) and (max-width:1199px) {
    .phoneEditorGrid {
        display: grid;
        grid-template-columns: 1fr;
        width: 80vw;
        max-height: 70vh;
    }

    .phoneEditorConversationGrid {
        display: grid;
        width: 95%;
        grid-template-columns: 1fr 3fr;
    }

        .phoneEditorConversationGrid .gridSpan2 {
            grid-column: span 2;
        }

    .phoneEditorPrivacyGrid {
        display: grid;
        grid-template-columns: 2fr 3fr;
    }

        .phoneEditorPrivacyGrid .gridSpan2 {
            grid-column: span 2;
        }
}


/* Large screen layout */
@media screen and (min-width: 1200px) {

    .phoneEditorGrid {
        display: grid;
        grid-template-columns: 3fr 2fr;
        width: 80vw;
        max-width: 1200px;
    }

    .phoneEditorConversationGrid {
        display: grid;
        width: 95%;
        grid-template-columns: 1fr 3fr;
    }

        .phoneEditorConversationGrid .gridSpan2{
            grid-column: span 2;
        }

    .phoneEditorPrivacyGrid {
        display: grid;
        grid-template-columns: 2fr 3fr;
    }

        .phoneEditorPrivacyGrid .gridSpan2 {
            grid-column: span 2;
        }

    .phoneEditorGrid .submitSection {
        grid-column: span 2;
    }
}

/* ----------------- */