/*© Copyright 1997-2021 AIMS, Co. All Rights Reserved*/

.repairPageContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 95vw;
    max-width: 95vw;
}

/*.repairPageHeader {
    display: flex;
    flex-direction: row;
}*/

/*.repairPageHeader > span,input,select {
        margin: auto 1vw 1vh auto;
    }

    .repairPageHeader > img {
        margin: auto 1vw 1vh auto;
        width: 2vw;
        height: 2vw;
        cursor: pointer;
    }*/

.repairGroup {
    width: 95vw;
    font-weight: 700;
    padding-bottom: 10px;
    padding-top: 25px;
    background-color: #bfd8ea;
    color: #5c8eb0;
    box-shadow: 1px 2px 1px grey;
    font-size: 3vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-left: 1vw;
}

.repairControl {
    flex: 1 0 60vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;
    margin: 1vh 1vh 1vh 0;
    box-shadow: 1px 2px 1px grey;
    min-height: 15vh;
    justify-content: space-between;
    padding-bottom: 1vh;
    padding-left: 1vw;
}

/*.repairControl .thumbnail {
        width: 15vw;
        height: 15vw;
        cursor: pointer;
    }*/

/*.repairControl .title {
        flex: 1 0 20vw;
        font-size: 2.4vh;
        font-weight: 600;
    }*/

.repairControl .sampleDetails {
    flex: 0 0 100%;
    font-size: calc(0.8em * var(--font-size, 1));
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.repairControl .sampleDetails span {
    font-size: 1.5em;
}

/*.repairControl .controlBtns {
        width: 5vw;
        height: 5vw;
        margin: 1vh;
        cursor: pointer;
    }*/

/*.repairControl .gridTableLight {
        flex: 1 0 20vw;
    }
    
    .repairControl .gridHeaderCellLight {
        flex: 1 0 4vw;
        font-weight: 600;
        font-size: 2vh;
    }

    .repairControl .gridCellLight {
        flex: 1 0 4vw;
        font-size: 1.6vh;
    }

        .repairControl .gridCellLight select,input {
            width: 90%;
            max-width: 90%;
        }*/

/*.repairControl .commentDetails {
        flex: 1 0 40vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin: 1vw;
        justify-content: space-around;
    }*/

.repairControl .commentDetails .commentContainer {
    flex: 1 0 40vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.repairControl .commentDetails .commentContainer>.newCommentButtonDiv {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 2vh;
}

.repairControl .commentDetails .editButton {
    flex: 0 0 15vw;
    background-color: #7986CB;
    color: white;
    /*margin-right: 3vw;*/
    font-size: 1.5vh;
    margin-bottom: 1vh;
}

.repairControl .commentDetails .gridTableLight {
    flex: 1 0 40vw;
    width: 20vw;
    margin-top: 1vh;
    /*width: 20vw;*/
}

.repairControl .commentDetails .gridRowLight {
    margin-top: 1vh;
}

.repairControl .commentDetails .gridHeaderCellLight {
    flex: 1 0 6vw;
    font-weight: 600;
    font-size: 2.1vh;
}

.repairControl .commentDetails .gridCellLight {
    flex: 1 0 6vw;
    font-size: 2vh;
}

.repairControl .comments {
    flex: 1 1 40vw;
}

/*.repairControl .attachmentArea {
        padding: 1vh;
        border: dashed grey 2px;
        border-radius: 6px;
        width: 15vw;
        height: 20vh;
    }*/

.repairControl .attachmentArea .gridTableLight {
    /*flex: 1 0 35vw;*/
    width: 15vw;
    /*width: 20vw;*/
    max-height: 15vh;
    overflow-y: auto;
}

.repairControl .attachmentArea .attachmentTitle {
    font-size: 1.8vh;
    font-weight: 600;
    flex: 0 0 15vw;
    height: 2vh;
    text-align: center;
    justify-content: center;
    margin-bottom: 1vh;
}

.repairControl .attachmentArea img {
    width: 2vw;
    height: 2vw;
    cursor: pointer;
}

.repairControl .defectDetailsDisplay {
    flex: 1 1 60vw;
}

.pendingQso {
    background-color: #FFFF6F;
}

.pendingRepair {
    background-color: White;
}

.rejectedQso {
    background-color: #FF8D8A;
}

.repaired {
    background-color: #8BFE91;
}

.renderedLoadingIndicator {
    position: fixed;
    right: 1vw;
    top: 40vh;
    z-index: 1000;
}

.repairPageContainer .iqMapReport {
    position: fixed;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    z-index: 500;
    background-color: white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.repairPageContainer .iqMapReport .canvas {
    width: 85vw;
    height: 85vh;
}

.repairPageContainer .iqMapReport .closeHeader {
    width: 99vw;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.repairPageContainer .iqMapReport .closeBtn {
    background-color: white;
    color: red;
    border-color: red;
    border-style: solid;
    font-size: 1.5vh;
    font-weight: 600;
    width: 1vw;
    align-self: flex-end;
    padding: 0;
}

.repairPageContainer .dropshadow {
    width: 100vw;
    height: 100vh;
    background-color: black;
    opacity: 0.3;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 400;
}

.repairControl .icon-landscape {
    display: none;
}

@media only screen and (min-device-width: 300px) and (max-device-width: 700px) {
    .repairControl .thumbnail {
        width: 60vw;
        height: 20vh;
        cursor: pointer;
    }
    .repairControl .title {
        flex: 1 0 40vw;
        font-size: 3vh;
        font-weight: 600;
    }
    .repairControl .controlBtns {
        width: 15vw;
        height: 15vw;
        margin: 1vh;
        cursor: pointer;
    }
    .repairControl .commentDetails {
        flex: 1 0 60vw;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        margin: 1vw;
        justify-content: space-around;
    }
    .repairControl .attachmentArea {
        padding: 1vh;
        border: dashed grey 2px;
        border-radius: 6px;
        width: 80vw;
        height: 15vh;
        max-height: 15vh;
        overflow-y: auto;
    }
    .repairControl .canvasMini {
        width: 60vw;
        height: 20vh;
    }
    .repairPageHeader {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .repairPageHeader>span {
        /*margin: auto 1vw 1vh auto;*/
        margin-right: 1vw;
        font-size: 2vh;
        height: 2vh;
    }
    .repairPageHeader>input {
        /*margin: auto 1vw 1vh auto;*/
        margin-right: 4vh;
        font-size: 2vh;
        height: 2vh;
        width: 2vh;
    }
    .repairPageHeader>select {
        /*margin: auto 1vw 1vh auto;*/
        margin-right: 1vw;
        font-size: 1vh;
        width: 60vw;
    }
    .repairPageHeader>img {
        margin: auto 1vw 1vh auto;
        width: 8vw;
        height: 8vw;
        cursor: pointer;
    }
    .repairPageHeader .fontIcon {
        font-size: 2vh;
    }
    .repairControl .gridTableLight {
        flex: 0 0 95vw;
        max-width: 95vw;
        overflow-x: auto;
    }
    .repairControl .gridHeaderCellLight {
        flex: 1 0 18vw;
        font-weight: 600;
        font-size: 1.5vh;
    }
    .repairControl .gridCellLight {
        flex: 1 0 18vw;
        font-size: 1.2vh;
    }
    .repairControl .gridCellLight select {
        width: 90%;
        max-width: 90%;
        font-size: 1.2vh;
    }
    .repairControl .gridCellLight input {
        width: 90%;
        max-width: 90%;
        font-size: 1.2vh;
    }
    .repairControl .icon-landscape {
        display: block;
        font-size: 2vh;
    }
    .repairControl .landscape {
        display: none;
    }
    .repairControl .sampleDetails {
        flex: 0 0 100%;
        font-size: calc(2vh * var(--font-size, 1));
    }
    .repairControl .repairBtn {
        font-size: 4vh;
    }
    .repairControl .rejectBtn {
        font-size: 4vh;
    }
    .repairControl .qsoBtn {
        font-size: 4vh;
    }
}

@media only screen and (min-device-width: 700px) {
    .repairControl .thumbnail {
        width: 15vw;
        height: 15vw;
        cursor: pointer;
    }
    .repairControl .title {
        flex: 1 0 20vw;
        font-size: calc(2.4vh * var(--font-size, 1));
        font-weight: 600;
    }
    .repairControl .repairControlContainer {
        display: flex;
    }
    .repairControl .controlBtns {
        width: 5vw;
        height: 5vw;
        margin: 1vh;
        cursor: pointer;
    }
    .repairControl .repairBtn {
        font-size: 4vw;
        width: 5vw;
        height: 5vw;
        /* border */
        margin: 1vh;
        cursor: pointer;
    }
    .repairControl .qsoBtn {
        font-size: 4vw;
        width: 5vw;
        height: 5vw;
        margin: 1vh;
        cursor: pointer;
    }
    .repairControl .rejectBtn {
        font-size: 4vw;
        width: 5vw;
        height: 5vw;
        margin: 1vh;
        cursor: pointer;
    }
    .repairControl .commentDetails {
        flex: 1 0 40vw;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin: 1vw;
        justify-content: space-around;
    }
    .repairControl .attachmentArea {
        padding: 1vh;
        border: dashed grey 2px;
        border-radius: 6px;
        /*flex: 1 1 10vw;*/
        width: 15vw;
        height: 20vh;
        /*display: flex; 
        flex-direction: row;
        flex-wrap: wrap;*/
    }
    .repairControl .canvasMini {
        width: 15vw;
        height: 20vh;
    }
    .repairPageHeader {
        display: flex;
        flex-direction: row;
        font-size: 2vh;
        width: 98%;
        justify-content: flex-start;
    }
    .repairPageHeader>span {
        margin: 1vw;
    }
    .repairPageHeader>input {
        margin: 1vw;
    }
    .repairPageHeader>select {
        margin: 1vw;
        max-width: 20vw;
    }
    .repairPageHeader>img {
        margin: auto 1vw 1vh auto;
        /*width: 2vw;*/
        height: 2vw;
        cursor: pointer;
    }
    .repairPageHeader .fontIcon {
        margin-top: 2vh;
        cursor: pointer;
    }
    .repairControl .gridTableLight {
        flex: 1 0 20vw;
    }
    .repairControl .gridHeaderCellLight {
        flex: 1 0 4vw;
        font-weight: 600;
        font-size: calc(2vh * var(--font-size, 1));
    }
    .repairControl .gridCellLight {
        flex: 1 0 4vw;
        font-size: calc(1.6vh * var(--font-size, 1));
    }
    .repairControl .gridCellLight select {
        width: 90%;
        max-width: 90%;
    }
    .repairControl .gridCellLight input {
        width: 90%;
        max-width: 90%;
    }
}