@import "inc/bootstrap";
.proctoring-scope {
    h1 {
        font-family: $headingFont;
        @include font-size(22);
        font-weight: normal;
    }
    h2 {
        font-family: $headingFont;
        @include font-size(18);
        margin: 30px 0 10px;
    }

    .breadcrumbs{
        overflow: visible;
        font-size : 14px;
        padding-bottom: 2px;
        a {
            color : white;
        }
        li.breadcrumb{
            bottom : 2px;
            background : inherit;
            ul {
                background : inherit;
                padding-top : 2px;
                border : none;
            }
        }
    }

    table.datatable {
        white-space: nowrap;
        [class^="icon-"] {
            padding: 0;
        }

        td {
            font-size: 90%;
            font-weight: normal;
        }

        .progress {
            .state:not(:first-child):before {
                content: ' - ';
            }
            .item-time:before {
                content: ' (';
            }
            .item-time .total:before {
                content: ' / ';
            }
            .item-time:after {
                content: ')';
            }
        }
    }

    .content {
        margin: auto;
    }

    .testcenters-index, .testcenters-testcenter, .delivery-index {
        .content {
            width: 500px;
        }
    }

    .delivery-testtakers, .delivery-manager {
        .content {
            width: 800px;
        }
    }

    .session-history {
        .tool-show-brief-report, .tool-show-detailed-report {
            float: right;
        }
    }

    .diagnostic-index, .diagnostic-runner, .reporting-index, .session-history, .delivery-monitoring {
        .content {
            width: 100%;
            padding: 0 20px;
        }
    }

    .diagnostic-index, .diagnostic-runner, .reporting-index, .session-history, .delivery-testtakers, .delivery-manager {
        .message {
            padding: 8px;
            text-align: center;
        }
    }

    .panel {
        @include flex-container();
        .back-button, .daterange {
            margin: 10px 4px;
        }
        .daterange {
            @include simple-flex-box();
            label {
                padding : 0;
            }
            input {
                margin: 0 10px;
            }
        }
        .action-bar {
            background: whiten($info, .1);
            padding: 3px;
            overflow: hidden;
            color: whiten($info, .9);
            margin: 40px 0 10px 0;

            .btn-info {
                overflow: hidden;
                background: transparent;
                border: 1px white(.3) solid;
            }
        }
    }

    .diagnostics-main-area {
        margin-top: 0px;
        max-width: 800px;
    }

    .delivery-testtakers, .delivery-manager {
        .list{
            margin-top : 20px;
            @include simple-border();
            background-color: whiten($canvas, .6);
            padding : 15px;
        }
    }

    .delivery-testtakers .list{
        background-color: whiten($canvas, .1);
    }

    .testcenters-index {
        .header{
            position:relative
        }
        .admin-link{
            position: absolute;
            right: 26px;
            top: 5px;
            color: white;
            opacity : .9;
            span{
                margin-right:8px;
            }
            &:hover{
                opacity : 1;
            }
        }
    }

    .delivery-index{
        .list-box {
            .dark {
                .box {
                    background: blacken($uiClickableDefaultBg, .15);
                    h3, [class^="icon-"], [class*=" icon-"] {
                        text-shadow: none;
                        font-weight: bold;
                    }
                    .listbox-actions{
                        color: $info;
                        .action{
                            &:hover, &:hover [class^="icon-"], [class*=" icon-"]{
                                color : $uiClickableHoverBg
                            }
                        }
                    }
                }
            }
            .has-properties-displayed{
                .box {
                    h3{
                        margin-top: 5px;
                    }
                    .listbox-properties{
                        margin-bottom : 3px;
                        li label{
                            margin-bottom : -1px;
                            min-width : 30px;
                            padding-right: 0;
                        }
                    }
                }
            }
        }
        .listbox-stats {
            padding : 0 1px;
            [class^="icon-"], [class*=" icon-"]{
                color: whiten($textColor, .2);
                font-size: 11px;
            }
            .icon-lock{
                font-size: 12px;
            }
            .number {
                margin : 0 12px 0 6px;
                top: -1px;
                position: relative;
            }
        }
        .listbox-actions{
            position: absolute;
            right: -1px;
            bottom: -1px;
            color: $uiClickableHoverBg;
            outline: 0;
            .action{
                display: inline-block;
                padding: 20px;
                border-bottom: 3px solid !important;
                height: 62px;
                margin-left: -3px;
                span {
                    margin-right:10px;
                }
                &:hover {
                    color: $info;
                }
            }
        }
    }

    .proctorManager-index {
        .panel {
            padding: 10px 20px 10px 0;
        }

        .proctor-form{
            h2{
                margin : 0 0 35px;
            }
        }

        .proctor-default {
            display: table;
            text-align: center;
            width: 100%;
            height: 100%;
            //background: $canvas;

            .message {
                color: whiten($textColor, .5);
                @include font-size(20);
                display: table-cell;
                vertical-align: middle;
            }
        }
    }

    .delivery-monitoring {
        aside.filter:first-child {
            display: none;
        }
    }

    .icon-authorize:before {
        @include icon-result-ok();
    }
    .icon-revoke:before {
        @include icon-result-nok();
    }
    .icon-history:before {
        @include icon-screen();
    }
    #start_time_filter{
      width: 180px;
      font-size: 12px;
    }

    .change-time-controls-container {
        font-size: 0;

        .change-time-control-container {
            margin: 0;
            padding: 0;
            position: relative;

            .change-time-control--add,
            .change-time-control--sub {
                background-color: white;
                border: 1px solid $websiteBorder;
                color: $textColor;
                cursor: pointer;
                display: inline-block;
                font-size: 18px;
                height: 24px;
                line-height: 22px;
                position: relative;
                text-align: center;
                top: 2px;
                user-select: none;
                width: 24px;
            }

            .change-time-control--sub {
                font-size: 16px;
                line-height: 19px;
                top: 0;
            }

            .change-time-control__input {
                cursor: pointer;
                opacity: 0;
                position: absolute;
            }

            input:checked ~ .change-time-control--add,
            input:checked ~ .change-time-control--sub {
                background-color: $info;
                color: white;
            }
        }
    }
}