.carPageContainer {
    min-height: 480px;
    margin: 2px;
    background-color: #F0F0F0;
    /*width: 98vw;*/
}

.carPageChecksheetOpen {
    width: 95vw;
    min-width: 95vw;
    max-width: 95vw;
}


.carDisplay .saveButton {
    /*width: 3vw;*/
    background-color: #7986CB;
}

.existingCarDisplaycarDisplay .displayInfo .title {
    margin: 0 auto 0 auto;
    font-size: 3.5vh;
    font-weight: 600;
    color: black;
}

.carDisplay .displayInfo > div, span {
    margin-right: 0.5vw;
    margin-left: 10px;
    /*margin-bottom: 2vh;*/
}

.carDisplay .displayInfo > .extendedInput {
    display: inline-flex;
}

.carDisplay .displayInfo input {
    margin-right: 2vw;
}

.carDisplay .displayInfo .largerInput {
    width: 80%;
}

.carCommentField {
    width: 75%;
}

.carDisplay .floatingButton {
    position: fixed;
    bottom: 5vh;
    right: 2vw;
    font-size: 3.7vh;
    padding-top: 1vh;
    z-index: 2000;
}

.carStageContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

    .carStageContainer .carStageReport {
        margin-top: 3vh;
        border-top: 2px solid black;
        width: 100%;
    }

.stagePendingApproval {
    background-color: #4fb3bf;
    color: black;
}

.stageClosed {
    background-color: #00c853;
    color: black;
}

.stageCanceled {
    background-color: #b0bec5;
    color: black;
}

.stageRejected {
    background-color: #e53935;
    color: white;
}

.carStageAttachContainer {
    width: 25vw;
    max-width: 25vw;
}

.carStageFileAttachDiv {
    border-style: dashed;
    border-radius: 1vw 1vw;
    width: 20vw;
    height: 15vh;
    justify-content: center;
    text-align: center;
}

.carDisplay {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    /*font-size: 2vh;*/
    max-width: 95vw;
}

    .carDisplay .section {
        margin: 1vw;
        width: 90vw;
    }

    .carDisplay .subsection {
        margin: 0.5vh 3vw 0.3vh 3vw;
        width: 85vw;
    }

        .carDisplay .subsection .fullRow {
            flex-basis: 85vw;
        }

    .carDisplay .response {
        width: 80vw;
        min-height: 4vh;
    }

    .carDisplay .responseMedium {
        width: 60vw;
        min-height: 4vh;
    }

    .carDisplay .responseSmall {
        width: 40vw;
        height: 10vh;
    }

    .carDisplay .responseHistory {
        width: 55vw;
        max-height: 40vh;
        overflow-x: auto;
        font-size: 1vw;
    }

        .carDisplay .responseHistory .gridTableLight {
            width: 55vw;
        }

        .carDisplay .responseHistory .gridHeaderCellLight {
            border-bottom: solid 2px black;
            flex: 1 1 5vw;
            margin: 5px;
        }

        .carDisplay .responseHistory .gridCellLight {
            flex: 1 1 5vw;
            margin: 5px;
        }

    .carDisplay .attachmentHistory {
        width: 27vw;
        max-height: 40vh;
        overflow-y: auto;
        font-size: 1vw;
    }

        .carDisplay .attachmentHistory .gridTableLight {
            width: 25vw;
        }

        .carDisplay .attachmentHistory .gridHeaderCellLight {
            border-bottom: solid 2px black;
            flex: 1 1 4vw;
            margin: 3px;
        }

        .carDisplay .attachmentHistory .gridCellLight {
            flex: 1 1 4vw;
            margin: 3px;
        }

    .carDisplay .active {
        background-color: #CCFFFF;
    }

    .carDisplay .displayInfo {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0.3vh 0 0.3vh 1vw;
        font-size: 1.3vw;
    }

        .carDisplay .displayInfo .title {
            font-weight: 600;
            font-size: 3vh;
        }

    .carDisplay .verticleFlex {
        display: flex;
        flex-direction: column;
    }

.submittedResponse {
    font-size: 2.5vh;
}

.carDisplay .card {
    padding: 1em;
    background-color: white;
    box-shadow: 1px 2px 1px grey;
    max-width: 95vw;
    flex-basis: 31vw;
    flex-grow: 4;
    font-size: 1.3vw;
}

.carDisplay .fullRow {
    flex-basis: 95vw;
}

.carDisplay .history {
    width: 40%;
}

.carDisplay .buttonContainer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

    .carDisplay .buttonContainer > div {
        margin-left: 0.5vw;
    }

/*.singlePageHeader .headerShowHide {
    display: none;
}

    .singlePageHeader .headerShowHide > img {
        width: 4vh;
        height: 4vh;
    }

.singlePageHeader .tab {
    cursor: pointer;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-right: 0px;
}

    .singlePageHeader .tab span {
        margin: 0;
        z-index: 100;
    }

.selectionBorderStyle {
    width: 99%;
    height: 100%;
    margin-left: 0px;
}

.singlePageHeader .tab .arrowClassLeft {
    border-style: solid;
    border-width: 2vh 2vh 2vh 2vh;
    height: 0;
    width: 0;
    bottom: 0px;
    z-index: 100;
    margin: 0;
    background-color: transparent;
}

.singlePageHeader .tab .arrowClassRight {
    border-style: solid;
    border-width: 2vh 2vh 2vh 2vh;
    height: 0;
    width: 0;
    bottom: 0px;
    background-color: transparent;
    position: relative;
    z-index: 100;
    margin: 0;
}


.singlePageHeader .yellow .arrowClassRight {
    border-color: transparent transparent #CDDC39 #CDDC39;
}

.singlePageHeader .green .arrowClassRight {
    border-color: transparent transparent #81C784 #81C784;
}

.singlePageHeader .brown .arrowClassRight {
    border-color: transparent transparent #BCAAA4 #BCAAA4;
}

.singlePageHeader .yellow .arrowClassLeft {
    border-color: transparent #CDDC39 #CDDC39 transparent;
}

.singlePageHeader .green .arrowClassLeft {
    border-color: transparent #81C784 #81C784 transparent;
}

.singlePageHeader .brown .arrowClassLeft {
    border-color: transparent #BCAAA4 #BCAAA4 transparent;
}

.singlePageHeader .yellow > span, .singlePageHeader .yellow > div {
    background-color: #CDDC39;
}

.singlePageHeader .green > span, .singlePageHeader .green > div {
    background-color: #81C784;
}

.singlePageHeader .brown > span, .singlePageHeader .brown > div {
    background-color: #BCAAA4;
}

.singlePageHeader .selectionBorder {
    width: 100%;
    margin-top: 0px;
    height: 5px;
}*/

.associatePopup {
    width: 80vw;
    height: 80vh;
    max-width: 80vw;
    max-height: 80vh;
    position: fixed;
    top: 10vh;
    left: 10vw;
    background-color: white;
    z-index: 500;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
}

    .associatePopup .titleBar {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
    }

    .associatePopup .title {
        width: 73vw;
        text-align: center;
        align-content: center;
        font-size: 3.5vh;
        font-weight: 600;
    }

    .associatePopup .closeIcon {
        width: 5vw;
    }

    .associatePopup .secondaryTitle {
        width: 78vw;
        text-align: center;
        align-content: center;
        font-size: 2.5vh;
        font-weight: 500;
        display: flex;
        justify-content: space-around
    }

    .associatePopup .searchPart {
        flex: 1 0 20vw;
        text-align: center;
        align-content: center;
        font-size: 2.5vh;
        font-weight: 500;
    }

    .associatePopup .results {
        text-align: center;
        width: 78vw;
        max-height: 50vh;
        height: 50vh;
        overflow-x: auto;
    }

    .associatePopup .saveButton {
        /*width: 3vw;*/
        background-color: #7986CB;
        min-width: 2vh;
        max-width: 20vw;
        text-align: center;
    }

    .associatePopup .darkButton {
        background-color: black;
        font-size: 2.5vh;
        font-weight: 600;
    }

.advancedHistoryContent td {
    text-align: left;
}

@media (min-width: 320px) and (max-width: 1023px) {

    .carPageContainer {
        min-height: 480px;
        margin: 2px;
        background-color: #F0F0F0;
        /*width: 98vw;*/
    }

    .carPageChecksheetOpen {
        width: 95vw;
        min-width: 95vw;
        max-width: 95vw;
    }


    .carDisplay .saveButton {
        /*width: 3vw;*/
        background-color: #7986CB;
    }

    .existingCarDisplaycarDisplay .displayInfo .title {
        margin: 0 auto 0 auto;
        font-size: 3.5vh;
        font-weight: 600;
        color: black;
    }

    .carDisplay .displayInfo > div, span {
        margin-right: 2vw;
        margin-bottom: 2vh;
        margin-left: 10px;
    }

    .carDisplay .displayInfo > .extendedInput {
        display: inline-flex;
    }

    .carDisplay .displayInfo input {
        margin-right: 2vw;
    }

    .carDisplay .displayInfo .largerInput {
        width: 80%;
    }

    .carCommentField {
        width: 75%;
    }

    .carDisplay .floatingButton {
        position: fixed;
        bottom: 5vh;
        right: 2vw;
        font-size: 3.7vh;
        padding-top: 1vh;
        z-index: 2000;
    }

    .carStageContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

        .carStageContainer .carStageReport {
            margin-top: 3vh;
            border-top: 2px solid black;
            width: 100%;
        }

    .stagePendingApproval {
        background-color: #4fb3bf;
        color: black;
    }

    .stageClosed {
        background-color: #00c853;
        color: black;
    }

    .stageCanceled {
        background-color: #b0bec5;
        color: black;
    }

    .stageRejected {
        background-color: #e53935;
        color: white;
    }

    .carStageAttachContainer {
        width: 25vw;
        max-width: 25vw;
    }

    .carStageFileAttachDiv {
        border-style: dashed;
        border-radius: 1vw 1vw;
        width: 20vw;
        height: 15vh;
        justify-content: center;
        text-align: center;
    }

    .carDisplay {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-around;
        /*font-size: 2vh;*/
        max-width: 95vw;
    }

        .carDisplay .section {
            margin: 1vw;
            width: 90vw;
        }

        .carDisplay .subsection {
            margin: 0.5vh 3vw 0.3vh 3vw;
            width: 85vw;
        }

            .carDisplay .subsection .fullRow {
                flex-basis: 85vw;
            }

        .carDisplay .response {
            width: 80vw;
            min-height: 4vh;
        }

        .carDisplay .responseMedium {
            width: 60vw;
            min-height: 4vh;
        }

        .carDisplay .responseSmall {
            width: 40vw;
            height: 10vh;
        }

        .carDisplay .responseHistory {
            width: 55vw;
            max-height: 40vh;
            overflow-x: auto;
            font-size: 1vw;
        }

            .carDisplay .responseHistory .gridTableLight {
                width: 55vw;
            }

            .carDisplay .responseHistory .gridHeaderCellLight {
                border-bottom: solid 2px black;
                flex: 1 1 5vw;
                margin: 5px;
            }

            .carDisplay .responseHistory .gridCellLight {
                flex: 1 1 5vw;
                margin: 5px;
            }

        .carDisplay .attachmentHistory {
            width: 27vw;
            max-height: 40vh;
            overflow-y: auto;
            font-size: 1vw;
        }

            .carDisplay .attachmentHistory .gridTableLight {
                width: 25vw;
            }

            .carDisplay .attachmentHistory .gridHeaderCellLight {
                border-bottom: solid 2px black;
                flex: 1 1 4vw;
                margin: 3px;
            }

            .carDisplay .attachmentHistory .gridCellLight {
                flex: 1 1 4vw;
                margin: 3px;
            }

        .carDisplay .active {
            background-color: #CCFFFF;
        }

        .carDisplay .displayInfo {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0.3vh 0 0.3vh 1vw;
            font-size: 1.3vw;
        }

            .carDisplay .displayInfo .title {
                font-weight: 600;
                font-size: 3vh;
            }

        .carDisplay .verticleFlex {
            display: flex;
            flex-direction: column;
        }

    .submittedResponse {
        font-size: 2.5vh;
    }

    .carDisplay .card {
        padding: 1em;
        background-color: white;
        box-shadow: 1px 2px 1px grey;
        max-width: 95vw;
        flex-basis: 31vw;
        flex-grow: 4;
        font-size: 1.3vw;
    }

    .carDisplay .fullRow {
        flex-basis: 95vw;
    }

    .carDisplay .history {
        width: 40%;
    }

    .carDisplay .buttonContainer {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }

        .carDisplay .buttonContainer > div {
            margin-left: 0.5vw;
        }

    .selectionBorderStyle {
        width: 99%;
        height: 100%;
        margin-left: 0px;
    }


    .associatePopup {
        width: 80vw;
        height: 80vh;
        max-width: 80vw;
        max-height: 80vh;
        position: fixed;
        top: 10vh;
        left: 10vw;
        background-color: white;
        z-index: 500;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: auto;
    }

        .associatePopup .titleBar {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            width: 100%;
        }

        .associatePopup .title {
            width: 73vw;
            text-align: center;
            align-content: center;
            font-size: 3.5vh;
            font-weight: 600;
        }

        .associatePopup .closeIcon {
            width: 5vw;
        }

        .associatePopup .secondaryTitle {
            width: 78vw;
            text-align: center;
            align-content: center;
            font-size: 2.5vh;
            font-weight: 500;
            display: flex;
            justify-content: space-around
        }

        .associatePopup .searchPart {
            flex: 1 0 20vw;
            text-align: center;
            align-content: center;
            font-size: 2.5vh;
            font-weight: 500;
        }

        .associatePopup .results {
            text-align: center;
            width: 78vw;
            max-height: 50vh;
            height: 50vh;
            overflow-x: auto;
        }

        .associatePopup .saveButton {
            /*width: 3vw;*/
            background-color: #7986CB;
            min-width: 2vh;
            max-width: 20vw;
            text-align: center;
        }

        .associatePopup .darkButton {
            background-color: black;
            font-size: 2.5vh;
            font-weight: 600;
        }

    .advancedHistoryContent td {
        text-align: left;
    }
}