@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0366d6;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 22px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 22px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/* Report Controls */
.btn-pdf {
    color: #a30900;
    background-color: transparent;
    border-color: #a30900;
}

    .btn-pdf:hover {
        color: #fff;
        background-color: #c90b00;
        border-color: #a30900;
    }

    .btn-pdf:not(:disabled):not(.disabled):active {
        color: #fff;
        background-color: #a30900;
        border-color: #700701;
    }

.btn-csv {
    color: #006100;
    background-color: transparent;
    border-color: #006100;
}

    .btn-csv:hover {
        color: #fff;
        background-color: #008000;
        border-color: #006100;
    }

    .btn-csv:not(:disabled):not(.disabled):active {
        color: #fff;
        background-color: #006100;
        border-color: #014201;
    }

.input-group-text.inverted-colors {
    color: #e9ecef;
    background-color: #495057;
}


/* 
    The standard zblazor css has some weirdly overagressive rules for every single div under it.
    This ensures that the divs under the selected item in the list are styled with the appropriate highlight.
*/
.zb-quick-autocomplete-items-scrollable div.zb-quick-autocomplete-active div,
.zb-quick-autocomplete-items-scrollable div.zb-quick-autocomplete-active.zb-quick-autocomplete-active:hover div {
    background-color: #5791F5;
    color: #ffffff;
}

.zb-quick-autocomplete-items-scrollable div.zb-quick-autocomplete-item:hover div {
    background-color: #e9e9e9;
}

/* Since Sharon likes that sidebar color so much */
.purple-gradient {
    background-image: linear-gradient(to right, rgb(5, 39, 103) 0%, #3a0647 70%);
}

/* 
    prevent mat dialogs from cutting off autocomplete dropdowns
    (because the attribute options aren't robust enough to do it that way)
*/
.mdc-dialog__surface, .mdc-dialog__content {
    overflow: unset !important;
}

/* set minimum pixel width */
.mw-500px {
    min-width: 500px;
}

.mw-100px {
    min-width: 100px;
}



.modal-xxl {
    max-width: calc(100vw - 50px);
}
.modal-xxl-200 {
    max-width: calc(100vw - 200px);
}

.modal {
    overflow-y: auto;
}

.btn-isactive {
    width: 2rem;
    height: 2rem;
}

.btn-edit {
    width: 2rem;
    height: 2rem;
}

.btn-120{
    min-width: 120px;
}

.exam-header {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #333333;
}

.exam-title {
    font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
    font-weight: 700;
    text-align:left;
}

.exam-instructions, .exam-instructions p {
    font-family: "ArialMT", "Arial", sans-serif;
    font-size: 13px;
    text-align: justify;
}

    .exam-instructions input[type="checkbox"] {
        vertical-align:middle;
    }

    .terms {
        border: 1px solid #797979;
        max-height: 210px;
        overflow: scroll;
    }

.exam-domain-title {
    padding-right: 10px; /* Adjust as needed */
}

    .exam-domain-title div {
        font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
    }

    .exam-domain-title pre * {
        margin: 0px;
        padding: 0;
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    .domainlist-button {
        display: flex;
        align-items: center;
        width: 150px;
    }

.btn-start-domain {
    height: auto;
    width: 100%;
}

.exam-domain-list {
    margin-right: 15px;
}

.exam-domain-list > div {
    border-top: 1px solid black;
}


    .exam-domain-list > div:last-child {
        border-bottom: 1px solid black;
    }

.exam-timer {
    float: right;
    width: 165px;
    height: 75px;
    border: 1px solid black;
    padding: 9px;
    text-align: center;
    font-family: " Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
    font-weight: 700;
    font-size: 30px;
}

.exam-timer .title{
    font-size:13px;
}

    .exam-timer .timer {
        line-height: normal;
    }

#question div p {
    padding: 0;
}

.exam-result-title {
    border-bottom: 1px solid black;
}

.exam-result-title b, .exam-score {
    font-family: "ArialMT", "Arial", sans-serif;
}


/* styling per brand guide */
/* primary brand colors */
.wlexam-primary-blue {
    color: #008ab0;
}
.wlexam-primary-gray {
    color: #5e6e66;
}
/* tier one colors "to use in a dominant visual position" */
.wlexam-tier1-green {
    color: #84c98b;
}
.wlexam-tier1-tomato {
    color: #c05644;
}
.wlexam-tier1-bright {
    color: #c9c943;
}
.wlexam-tier1-orange {
    color: #f7943e;
}
.wlexam-tier1-aubergine {
    color: #914657;
}
/* tier two colors - "neutrals to use as backgrounds and boxes" */
.wlexam-tier2-tan {
    color: #c4c6ad;
}
.wlexam-tier2-gray {
    color: #adb9ba;
}
.wlexam-tier2-gray-green {
    color: #b4cecb;
}

/* Override certain bootstrap and telerik elements with brand colors and styling */
.btn-primary {
    background-color: #008ab0 !important;
    border-color: #008ab0 !important;
}
    .btn-primary:hover:enabled {
        background-color: #007aa0 !important;
        border-color: #007aa0 !important;
    }
.btn-secondary {
    background-color: #5e6e66 !important;
    border-color: #5e6e66 !important;
}
    .btn-secondary:hover:enabled {
        background-color: #4e5e56 !important;
        border-color: #4e5e56 !important;
    }
.k-button-solid-danger {
    color: white;
    background-color: #c05644;
    border-color: #c05644;
}
    .k-button-solid-danger:hover {
        background-color: #b04634;
        border-color: #b04634;
    }
.k-button-solid-secondary {
    color: white !important;
    background-color: #adb9ba !important;
}
    .k-button-solid-secondary:hover {
        background-color: #9da9aa !important;
    }
.k-dialog-danger {
    min-width: 50vw;
}
.k-dialog-danger .k-dialog-content {
    font-size: 125%;
}
.k-dialog-danger .k-dialog-titlebar {
    background-color: #c05644 !important;
}
.k-dialog-danger .k-dialog-title {
    color: white !important;
}