/*------------------------------------------------------------------------- CORE COLOURS
*/
:root {
    --wsscMidGrey: #baa6b1;
    --wsscGrey: #717d86;
    --wsscLightGrey: #b8c2c7;
    --wsscPink: #ff3dc0;
    --wsscDarkBlue: #1f1976;
    --wsscBlue: #6292c0;
    --wsscPurple: #817192;
}


/*------------------------------------------------------------------------- REPORT GENERAL STYLES
*/

.panel {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    background: #f9f9f9;
    margin: 20px auto;
    position: relative;
    box-shadow: 0px 0px 0px 2px #e3e3e3, 0px 0px 0px 3px rgba(0, 0, 0, 0.3), 0px 15px 8px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    padding: 0;
}

.panelHeader {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    min-height: 50px;
    padding: 10px;
    background-color: var(--wsscPurple);
    color: #fff;
    line-height: 1.2em;
}

.screenshot {
    display: block;
    width: 100%;
    height: 100%;
    background: #c2ccd2 url(/images/report-placeholder-image.svg) left top no-repeat;
    background-size: auto 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 2px #e3e3e3, 0px 0px 0px 3px rgba(0, 0, 0, 0.3), 0px 15px 8px -12px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

    .screenshot img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

        .screenshot img[src=""] {
            display: none;
        }

@media (max-width: 767px) {
    .panelHeader {
        flex-flow: column nowrap;
        align-items: flex-start;
        padding: 10px;
    }
}

@media (max-width: 400px) {
    .paneleHeader strong {
        display: block;
    }
}

/*------------------------------------------------------------------------- REPORT OVERVIEW
*/
.pageInformation {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
}

.PageOverview.panel {
    margin: 0;
    flex: 1;
    min-width: 60%;
}

.PageOverview.preview {
    flex: 1;
    min-width: 240px;
    min-height: 230px;
    align-self: stretch;
}

.PageOverview .row {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    margin: 0;
    padding:0; 
}

    .PageOverview .row .column {
        flex: 1 1 auto;
        overflow: hidden;
        padding: 10px;
        border-bottom: 1px solid #fff;
        display: flex;
        align-items: center;
    }

        .PageOverview .row .column.columnLabel {
            background-color: rgb(98,146,192,0.1);
            flex: 0 0 170px;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            letter-spacing: -0.05em;
            color: #333;
        }

.PageOverview.panel a {
    word-break: break-all;
    color: var(--wsscBlue);
    text-decoration: none;
    transition: color 0.25s ease;
}

    .PageOverview.panel a:hover {
        color: #111;
    }

@media (max-width: 767px) {
    .pageInformation {
        flex-direction: column-reverse;
    }

    .PageOverview.preview .screenshot {
        height: 240px;
    }
}

@media (max-width: 480px) {
    .PageOverview .row {
        flex-direction: column;
    }

        .PageOverview .row .column.columnLabel {
            flex: 1;
        }
}

/*------------------------------------------------------------------------- REPORT PAGE BUTTONS (FOR MANAGEMENT CONSOLE)
*/
/*
.pageButtons {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
}
.pageButtons .button {
	max-width: 240px;
	height: 40px;
	line-height: 36px;
}
.pageButtons .button::before {
	top: 8px;
	border-radius: 10px;
}
.pageButtons .button.addScanToReport::before {
	background-image: url(/images/tick-green.svg);
}
.pageButtons .button.addToBasket::before {
	background-image: url(/images/basket.svg);
}
*/
/*------------------------------------------------------------------------- REPORT PAGE
*/
.reportStatusIcons {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin: 0 0 0 auto;
    font-weight: bold;
    flex: 0 0 260px;
}

    .reportStatusIcons::before {
        content: 'instances count:'
    }

    .reportStatusIcons > .icon {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 5px;
    }

.reportPage .icon::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background: center center / 100% no-repeat;
}

.reportPage .errorVisible::before {
    background-image: url(/images/visible.svg);
}

.reportPage .errorNotVisible::before {
    background-image: url(/images/not-visible.svg);
}

.reportPageBody {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 2fr) 220px;
    gap: 10px;
    padding: 10px;
    height: 200px;
}

    .reportPageBody .problemSuggestions {
        padding: 0 0 0 10px;
        height: 100%;
        max-height: 180px;
        overflow: hidden;

        flex-direction: column;
        gap: 15px;
        display: flex;
    }

        .reportPageBody .problemSuggestions .mCSB_container {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .reportPageBody .problemSuggestions.mCS_no_scrollbar {
            padding: 0 20px 0 10px;
        }

.problemSuggestions .mCSB_inside > .mCSB_container {
    margin-right: 20px;
}

.problemSuggestions span {
    font-size: 14px;
}

.reportPageBody a.screenshot {
    width: 100%;
    height: 180px;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .reportStatusIcons {
        flex: 1;
        justify-content: flex-start;
        margin: 5px 0 0;
    }

    .reportPageBody {
        display: flex;
        flex-direction: column;
        height: auto;
    }

        .reportPageBody .problemSuggestions {
            padding: 0 !important;
        }

        .reportPageBody .problemSuggestions {
            max-height: none;
        }
}

@media (max-width: 400px) {
    .reportStatusIcons::before {
        width: 100%;
    }

    .reportStatusIcons {
        flex-flow: row wrap;
    }

    .reportProblem {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 320px) {
    .reportPageBody .column.problemInstances {
        height: 210px;
    }
}

/*------------------------------------------------------------------------- REPORT PAGE INSTANCES PANEL
*/
.problemInstancesPanel {
    border: 2px solid var(--wsscLightGrey);
    border-radius: 4px;
    display: block;
    font-size: 15px;
    height: 180px;
    overflow: hidden;
}

.instanceRow {
    display: grid;
    grid-template-columns: repeat(3, minmax(60px, 1fr)); /* this needs to be set to three columns for the front end */
    /*grid-template-columns: repeat(4, minmax(60px, 1fr)); */ /* this needs to be four columns for the back end */
    width: 100%;
    border-bottom: 1px solid var(--wsscLightGrey);
    padding: 5px;
    transition: all 0.25s ease;
}

    .instanceRow:hover {
        cursor: pointer;
        background-color: rgba(98,146,192,0.1);
    }

.instanceColumn {
    display: grid;
    align-content: center;
    justify-content: center;
}

    .instanceColumn input[type="checkbox"] {
        height: auto;
    }

.instanceRow.header {
    background-color: var(--wsscLightGrey);
    color: #fff;
    font-weight: bold;
    height: 30px;
}

.instanceRow .icon::before {
    width: 16px;
    height: 16px;
}

.problemInstancesPanel:has(.mCustomScrollbar) .instanceRow.header {
    /* if scrollbar is in use, pad header to re-align columns */
    border-right: 10px solid transparent;
}

.problemInstancesList {
    height: calc(100% - 30px);
    overflow-y: scroll;
}

    .problemInstancesList .mCSB_inside > .mCSB_container {
        margin-right: 10px;
    }

/*------------------------------------------------------------------------- REPORT PAGE INSTANCES BUTTONS
*/
.instancesButtons {
    margin-top: 10px;
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
}

.button.includeAll::before {
    background-image: url(/images/thumbs-up.svg);
}

.button.excludeAll::before {
    background-image: url(/images/thumbs-down-red.svg);
}

@media (max-width: 320px) {
    .instancesButtons {
        flex-direction: column;
    }
}

/*------------------------------------------------------------------------- MODALS
*/
.modal-content {
    border-radius: 10px !important;
    border: 1px solid #e3e3e3 !important;
    background: #fff;
    padding: 20px !important;
    box-shadow: 0px 0px 0px 2px #e3e3e3, 0px 0px 0px 3px rgba(0, 0, 0, 0.3), 0px 15px 8px -12px rgba(0, 0, 0, 0.4);
}

.modal-header {
    padding: 0 !important;
    border: 0 !important;
}

    .modal-header h5 {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: 10px;
        color: var(--wsscDarkBlue);
        font-weight: 900;
        letter-spacing: -2px;
        font-size: 32px;
    }

        .modal-header h5::before {
            content: '';
            display: block;
            width: 48px;
            height: 48px;
            background: center center / 100% no-repeat;
        }

#passcodeLabel::before {
    background-image: url(/images/password.svg);
}

#expiredLabel::before {
    background-image: url(/images/clock.svg);
}

.modal-header .btn-close {
    background: url(/images/cross.svg) center center / 80% no-repeat;
}

.modal-body {
    padding: 20px 0 !important;
    border: 0 !important;
}

.modal-footer {
    padding: 0 !important;
    border: 0 !important;
    gap: 10px;
}

.modal-content .button {
    height: 40px;
    margin: 0;
    font-size: 20px;
}

    .modal-content .button.backToHome {
        line-height: 35px;
        padding-left: 40px;
    }

    .modal-content .button::before {
        top: 10px;
    }

    .modal-content .button.cancel::before {
        background-image: url(/images/cross.svg);
    }

    .modal-content .button.unlock::before {
        background-image: url(/images/tick-green.svg);
    }

    .modal-content .button.backToHome::before {
        background-image: url(/images/arrow-left.svg);
    }
/*------------------------------------------------------------------------- IMAGE MODAL
*/
#imageModal .modal-body,
#imageModal .modal-content {
    padding: 0 !important;
}

#imageModal .modal-header {
    padding: 20px !important;
    position: absolute;
    z-index: 10;
    width: 100%;
}

    #imageModal .modal-header .btn-close {
        opacity: 1;
    }

#imageModal .modal-dialog {
    max-width: calc(100% - 40px);
}

#imageModal #imageLabel {
    font-size: 20px;
}

#imageLabel::before {
    background-image: url(/images/screenshot.svg);
}

#imageModal img {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
}

@media (max-width: 575px) {
    #imageModal .modal-dialog {
        max-width: 100%;
    }
}