@import url('bootstrap-4.3.1.min.css') layer(bootstrap);
@import url('selectize.bootstrap3.css') layer(selectize);


/* ----------------- Start New login stuff ------------------- */

@layer mobile_override {

    @media /* Portrait mobile */
           (hover: none) and (max-width: 1139px) and (max-aspect-ratio: 1 / 1) and (-webkit-min-device-pixel-ratio: 2),
           (hover: none) and (max-width: 1139px) and (max-aspect-ratio: 1 / 1) and (min-resolution: 2dppx) {

        body:not(.transparent-iframe-body) .login-box-header {
            border-left: solid black 0.3rem;
            border-top: solid black 0.3rem;
            border-right: solid black 0.3rem;
            border-top-left-radius: 3rem;
            border-top-right-radius: 3rem;
            font-size: 4rem;
            height: 7rem;
            padding-left: 4rem;
            padding-right: 4rem;
        }

        body:not(.transparent-iframe-body) .login-box-cancel {
            right: 1rem;
        }

        body:not(.transparent-iframe-body) .login-box-body {
            border-left:  solid black 0.3rem;
            border-right: solid black 0.3rem;
            padding: 2rem;
        }

        body:not(.transparent-iframe-body) .login-box-body img {
            height: 10rem;
        }

        body:not(.transparent-iframe-body) .login-box-body div {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        body:not(.transparent-iframe-body) .login-box-body a {
            font-size: 2rem;
        }

        body:not(.transparent-iframe-body) .login-box-body h2 {
            font-size: 3.6rem;
        }

        body:not(.transparent-iframe-body) .login-box-body h3 {
            font-size: 3.0rem;
        }

        body:not(.transparent-iframe-body) .login-box-create-account-button {
            border: solid 0.6rem var(--corporate-main-color-dark);
            border-radius: 3rem;
            font-size: 3rem;
            padding-left: 6rem;
            padding-right: 6rem;
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        body:not(.transparent-iframe-body) .login-box-footer {
            border-left: solid black 0.3rem;
            border-bottom: solid black 0.3rem;
            border-right: solid black 0.3rem;
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
            height: 7rem;
        }
    }

    @media /* Any mobile */
           (hover: none) {

        .mfa-type-button {
            text-align: center;
        }

        .send-code-button {
            text-align: center;
        }

        #mfa-options .row:not(:last-child) {
            margin-bottom: 10px;
            border-bottom: solid var(--corporate-secondary-color-medium-gray) 3px;
            padding-bottom: 10px;
        }
    }
} /* End of layer */

@layer worktour_base {

    .simple-elliptify {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* For sales leads and orders */
    #qualified-leads-table {
        overflow: auto;
        max-height: min(720px, 50vh);
        margin-bottom: 5px;
        border: solid black 1px;
    }

    #qualified-leads-table th {
        min-width: 7rem;
    }

    #qualified-leads-table .action-col {
        text-align: center;
        padding-top: 5px;
    }

    #qualified-leads-table td, #qualified-leads-table th {
        vertical-align: top;
    }

    #orders-table .deal-size {
        text-align: right;
    }


    /* For schools and districts */
    .school-or-district-modal .instructions {
        padding: 10px;
        font-size: 75%;
        border-bottom: solid black 3px;
        max-height: 15vh;
        overflow-y: auto;
    }

    .school-or-district-modal .modal-dialog {
        margin-top: 150px;
    }

    .school-or-district-modal .modal-body {
        max-height: 50vh;
        min-height: 370px;
    }


    /* For sortable tables */
    .dashboard-table {
        width: 100%;
    }

    .dashboard-table th, .dashboard-table td {
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
    }

    .padded-table.dashboard-table th,
    .padded-table.sortable-table th,
    .dashboard-table.sortable-table th{
        padding-right: 33px;
    }

    .dashboard-table th:has(em[data-sort-field]),
    .sortable-table th:has(em[data-sort-field]),
    .dashboard-table.sortable-table th:has(em[data-sort-field]){
        cursor: ns-resize;
    }

    .dashboard-table .header-row {
        background-color: var(--corporate-secondary-color-medium-gray);
        color: black;
    }

    .dashboard-table .header-row th {
        padding-right: 2rem;
        vertical-align: bottom;
    }

    .dashboard-table th, .sortable-table th {
        position: relative;
    }

    .dashboard-table .sort-arrow, .sortable-table .sort-arrow {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        position: absolute;
        right: 3px;
    }

    .dashboard-table .sort-arrow,
    .sortable-table .sort-arrow {
        cursor: ns-resize;
    }

    .curate-btn {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .career-favorite-section {
        position: relative;
        width: 100%;
    }

    .career-favorite-section-body {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .career-favorite-section-body .body-header:hover {
        border: dotted var(--corporate-main-color-dark) 3px;
        cursor: pointer;
    }

    .career-favorite-section-body h1 {
        padding-top: unset !important;
    }

    /* For Bingo cards */

    .DEFAULT-style-sheet {
        --Main-color: var(--corporate-main-color-dark);
        --Secondary-color: var(--corporate-secondary-color-blue);
        /* --Secondary-color: var(--corporate-main-color-medium); */
        --Contrast-color: white;
        --Contrast-color-2: black;
    }

    .BLUE-style-sheet {
        --Main-color: var(--corporate-secondary-color-blue);
        --Secondary-color: var(--corporate-main-color-dark);
        --Contrast-color: white;
        --Contrast-color-2: black;
    }

    .GREEN-style-sheet {
        --Main-color: var(--corporate-secondary-color-green);
        --Secondary-color: var(--corporate-secondary-color-blue);
        /* --Secondary-color: var(--corporate-secondary-color-blue); */
        --Contrast-color: white;
        --Contrast-color-2: black;
    }

    .GRAY-style-sheet {
        --Main-color: var(--corporate-secondary-color-gray);
        --Secondary-color: var(--corporate-secondary-color-blue);
        --Contrast-color: white;
        --Contrast-color-2: black;
    }

    #bingo-card {
        border: solid var(--corporate-secondary-color-medium-gray) 0.75rem;
        padding: 1rem;
        margin: 1rem;
    }

    #bingo-card-header {
        color: var(--Main-color);
        border: solid var(--Main-color) 0.5rem;
        border-radius: 1rem;
        padding-left: 5rem;
        padding-right: 5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
    }

    #bingo-card-header img {
        width: 100%;
    }

    .bingo-card-sub-header {
        text-align: left;
        color: black;
        max-height: 3.5rem;
        margin-bottom: 1rem;
    }

    #bingo-card-body {
        display: flex;
        flex-direction: row;
        row-gap: 1rem;
        column-gap: 1rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .bingo-card-cell {
        background-color: var(--Main-color);
        border: solid var(--Main-color) 0.5rem;
        color: var(--Contrast-color);
        padding: 0.5rem;
        border-radius: 0.5rem;
        width: calc((var(--cell-scale-factor) *
                     var(--baseline-cell-width)) -
                    (0.5rem / var(--cell-scale-factor)));
        cursor: pointer;
    }

    @media (max-width: 1000px) {
        .bingo-card-cell {
            width: calc((var(--cell-scale-factor) *
                         var(--baseline-cell-width)) -
                        (0.6rem / var(--cell-scale-factor)));
        }
    }

    @media (max-width: 500px) {
        .bingo-card-cell {
            width: calc((var(--cell-scale-factor) *
                         var(--baseline-cell-width)) -
                        (0.7rem / var(--cell-scale-factor)));
        }
    }

    .bingo-card-cell.highlight {
        border-color: var(--Secondary-color);
        background-color: var(--Contrast-color);
        color: var(--Main-color);
        /* background-color: var(--Secondary-color);
        color: var(--Contrast-color); */
    }

    .bingo-card-cell-header {
        height: 60%;
    }

    .bingo-card-cell-body {
        height: 40%;
        background-color: var(--Contrast-color);
        color: var(--Contrast-color-2);
        padding: 0.5rem;
        border-radius: 0.5rem;
        position: relative;
        overflow: hidden;
    }

    .bingo-card-cell-body-text-wrapper {
        position: relative;
        height: 100%;
    }

    #bingo-modal-dialog {
        max-width: 95vw;
    }

    .precis-full-frame {
        position: relative;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        max-height: 100%;
    }

    .precis-full-frame.flash
     {
        color: red;
    }


    .student-response {
        color: var(--student-response-color);
    }

    .student-response .not-selected {
        color: black;
    }

    .student-response .selectize-input {
        opacity: 1.0;
    }

    .student-response .selectize-input .item {
        color: var(--student-response-color);
    }

    .student-response .selectize-input.items div {
        color: var(--student-response-color);
    }

    .student-response input[type='text'] {
        color: var(--student-response-color);
        background-color: initial;
    }

    .student-response input[type='number'] {
        color: var(--student-response-color);
        background-color: initial;
    }

    .student-response input[type='date'] {
        color: var(--student-response-color);
        background-color: initial;
    }

    .student-response textarea {
        color: var(--student-response-color);
        background-color: initial;
    }


    .imgBuffer {
        width: 320px;
        height: 240px;
    }

    .wedge-description {
        z-index: 10;
        position: relative;
        text-align: center;
    }

    .wof-wrapper.kiosk {

    }

    .wof-wrapper .canvas-outer {
        position: relative;
        width:  calc(min(100%, 95vw) + (2 * 0.75rem));
        height: calc(min(100%, 95vw) + (2 * 0.75rem));
        border: solid var(--corporate-secondary-color-medium-gray) 0.75rem;
    }

    .wof-wrapper.kiosk .canvas-outer {
        transform: translate(-50%, 0);
        left: 50%;
    }

    .wof-wrapper.kiosk .wedge-description {
        font-size: 2.5rem;
    }

} /* End of layer */

@layer mobile_override {

    @media /* Portrait mobile */
           (hover: none) and (-webkit-min-device-pixel-ratio: 2),
           (hover: none) and (min-resolution: 2dppx) {
        .bingo-card-cell {
            width: calc((var(--cell-scale-factor) *
                         var(--baseline-cell-width)) -
                        (0.6rem / var(--cell-scale-factor)));
        }
    }
} /* End of layer */



@layer mobile_override {

    @media /* Portrait mobile */
           (hover: none) and (max-width: 1139px) and (max-aspect-ratio: 1 / 1) and (-webkit-min-device-pixel-ratio: 2),
           (hover: none) and (max-width: 1139px) and (max-aspect-ratio: 1 / 1) and (min-resolution: 2dppx) {

        .end-user-template .content-and-footer .content {
            height: initial;
            overflow-y: initial;
            overflow-x: auto;
        }

        .container {
            font-size: 3rem;
        }

        h1 {
            font-size: 4.5rem;
        }

        h2 {
            font-size: 3.7rem;
        }

        h3 {
            font-size: 3.5rem;
        }

        h4 {
            font-size: 3.3rem;
        }

        h5 {
            font-size: 3.2rem;
        }

        h3, .profile-body h3 {
            font-size: 3.5rem;
        }

        .btn {
            font-size: 3rem;
            margin-top: 0.3rem;
            margin-bottom: 0.3rem;
        }

        .profile-body dt {
            font-size: 3rem;
        }

        .param-label {
            overflow-x: hidden;
        }

        header {
            height: calc(150% * var(--end-user-header-height));
        }

        .content-and-footer {
            position: relative;
            top: calc((1.5 * var(--end-user-header-height)) + 80px);
            height: calc(100vh - ((1.5 * var(--end-user-header-height)) + 80px));
            overflow: unset;
        }

        .content-and-footer .content {
            overflow: auto;
            min-height: calc(100vh - ((1.5 * var(--end-user-header-height)) +
                                      80px + var(--end-user-footer-height)));
            margin-bottom: 0;
        }

        .content-and-footer .container {
            overflow-x :initial;
        }

        .favorite-careers {
            font-size: 3rem;
        }

        #favorite-careers-heart {
            max-width:  50px;
            max-height: 50px;
        }

        #last-tour {
            width: 40%;
        }

        header h1 {
            font-size: 3.75rem;
            left: 12rem;
            max-width: 55%;
        }

        .logo-img {
            max-height: 75px;
            left: 5rem;
            top: 1.5rem;
        }

        .hamburger-menu button {
          font-size: 4.5rem;
        }

        .header-user {
            top: 0.6rem;
            font-size: 1.5rem;
        }

        .header-avatar {
            width: 90px;
            height: 90px;
        }

        .hamburger-menu .dropdown-menu {
            max-height: 92vh;
            font-size: 3rem;
            width: 100%;
        }

        .in-app-notification-list {
            width: min(300px, 45vw);
            top: 60px;
        }

        .account-settings-button {
            width: 450px;
        }

        .form-control {
            font-size: 3rem;
            border: 3px solid #ced4da;
        }

        .selectize-dropdown, .selectize-input, .selectize-input input {
            line-height: 3rem;
        }

        #breadcrumbs-wrapper {
            font-size: 2.5rem;
            height: 80px;
            top: calc(1.5 * var(--end-user-header-height));
        }

        .modal-dialog {
            max-width: 90vw;
            font-size: 3rem;
        }

        .modal-subtitle {
            font-size: 2.0rem;
            line-height: 2.1rem;
        }

        .email-edit {
            font-size: 3rem;
        }

        .email-edit .address {
            font-size: 2.7rem;
        }

        .end-user-modal label {
            font-size: 3rem;
        }

        .check-email-warning {
            font-size: 2.0rem;
        }

        .g-recaptcha{
            transform:scale(1.8);
            -webkit-transform:scale(1.8);
            transform-origin:0 0;
            -webkit-transform-origin:0 0;
            margin-bottom: 80px;
        }

        .end-user-modal .password-check-block {
            font-size: 2.0rem;
        }

        .password-reveal {
            max-width: 50px;
        }

        .custom-control-label::before, .custom-control-label::after {
            width: 5rem;
            height: 5rem;
            top: -0.1rem;
        }

        .multiple-choice-radio-group .row,
        .multiple-choice-checkbox-group .row,
        .checkbox-singleton .row {
            margin-bottom: 20px;
            margin-left: 5px;
        }

        .custom-control-label::before {
            border: #adb5bd solid 3px;
        }

        select optgroup {
            font-size: 1rem;
            line-height: 1rem;
        }

        .analytics-assignment-rendering {
            border: solid black 3px;
        }

        .analytics-dashboard {
            font-size: 2rem;
        }

        .analytics-dashboard th {
        }

        .analytics-table td {
            border: solid white 3px;
        }

        .analytics-mode-buttons {
            padding-bottom: 60px;
        }

        .analytics-mode-button-text {
            padding-left: 60px;
        }

        #analytics-question-rendering {
            border: solid black 3px;
        }

        #analytics-aggregation-rendering {
            border: solid black 3px;
        }

        #WorktourConfirm {
            font-size: 3rem;
            min-width: 700px;
        }

        #WorktourConfirmHeader {
            min-height: 80px;
        }

        #WorktourConfirmButton {
            font-size: 3.2rem;
        }

        #WorktourConfirmCancelButton {
            font-size: 3.2rem;
        }

        .classes-table {
            font-size: 2rem;
        }

        .classes-table tr {
            border: solid var(--corporate-main-color-dark) 3px;
        }

        .classes-table td {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .classes-table button {
            margin-left: 10px;
            margin-right: 10px;
        }

        .email-label-offset {
            margin-left: 60px;
        }

        .modal-header .close {
            font-size: 4rem;
        }

        #sortable-assignments {
            font-size: 2rem;
        }

        .bootstrap-datetimepicker-widget .timepicker-hour,
        .bootstrap-datetimepicker-widget .timepicker-minute,
        .bootstrap-datetimepicker-widget .timepicker-second {
             width: 54px;
             font-size: 2.2rem;
        }


        .bootstrap-datetimepicker-widget table td.cw {
             font-size: 1.8rem;
             height: 20px;
             line-height: 20px;
        }

        .bootstrap-datetimepicker-widget  {
             font-size: 2rem;
             line-height: 30px;
             background-color: white;
             border: solid black 3px;
             z-index: 1200;
        }

        #assignment_due_date {
            font-size: 2.2rem;
        }

        .popover {
            max-width: 500px;
        }

    } /* End of media */

} /* End of mobile_override */

/* ----------------- End New login stuff ------------------- */