@layer bootstrap, font_awesome, selectize, bootstrap_override,
       selectize_override, worktour_base, mobile_override, print_override,
       skin_override;

:root {
    --corporate-main-color-light:  #fcba63; /* = RGB: 252 186 99 */
    --corporate-main-color-medium: #f58220; /* = RGB: 245 130 32 */
    --corporate-main-color-dark:   #f15a29; /* = RGB: 241  90 41 */

    --corporate-secondary-color-blue:  #4978bc; /* = RGB: 7 9 120 188 */
    --corporate-secondary-color-green: #74a472; /* = RGB: 116 164 114 */
    --corporate-secondary-color-gray:  #413f3d; /* = RGB:  65  63  61 */

    /* Not a brand book colour */
    --corporate-secondary-color-medium-gray: #bbb; /* = RGB: 187 187 187 */
    --corporate-secondary-color-light-gray:  #f1f2f2; /* = RGB: 242 242 242 */

    --corporate-main-font-family: Arial, Helvetica, sans-serif;
    --corporate-heading-font-family: Franklin Gothic Medium, Helvetica, sans-serif;

    --bottom-button-background-color: #a6a39f;

    --login-page-body-padding: 30px;

    --action-plan-wrapper-margin: 10px;

    --popup-border-radius: 10px;
    --game-popup-banner-height: 80px; /* Includes 15px of padding */
    --game-popup-banner-heading-height: 29px;
    --game-popup-banner-heading-bottom-margin: 0.3rem;
    --game-popup-top-bottom-padding: 15px;
    --career-popup-footer-height: 50px; /* Includes 15px of padding */
    --nominal-popup-width: 560px;
    --nominal-popup-height: 560px;

    --end-user-header-height: 90px;
    --end-user-breadcrumbs-height: 45px;
    --end-user-footer-height: 70px;

    --end-user-body-height: calc(100vh - (var(--end-user-footer-height) + var(--end-user-header-height)));
    --end-user-body-height-mobile: calc(100vh - var(--end-user-header-height));

    --show-more-less-buton-height: 20px;

    --link-color-blue: #007bff;

    --student-response-color: blue;
    --warning-color: red;

    --infographic-default-body-font-size: 5vmin;
    --infographic-description-font-size: 3vmin;
    --infographic-body-font-size: 3vmin;
    --infographic-header-max-height: 15vh;
    --infographic-header-max-height-slide-zero: 27vh;
    --infographic-header-padding: 2vh;
    --infographic-footer-padding: 1vh;
    --infographic-slide-heading-font-size: 3vmin;
    --infographic-description-max-height: calc(3.5 * var(--infographic-description-font-size));
    /* --infographic-description-max-height: max(160px, 10vh); */
    --infographic-footer-max-height: 7vh;
    --infographic-body-height:
        calc(95vh -
             (var(--infographic-header-max-height) +
              (var(--infographic-header-padding) * 2) +
              var(--infographic-footer-max-height) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-body-height-with-description:
        calc(95vh -
             (var(--infographic-header-max-height) +
              (var(--infographic-header-padding) * 2) +
              var(--infographic-description-max-height) +
              var(--infographic-footer-max-height) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-body-height-slide-zero:
        calc(95vh -
             (var(--infographic-header-max-height-slide-zero) +
              (var(--infographic-header-padding) * 2) +
              var(--infographic-footer-max-height) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-body-height-with-description-slide-zero:
        calc(95vh -
             (var(--infographic-header-max-height-slide-zero) +
              (var(--infographic-header-padding) * 2) +
              var(--infographic-description-max-height) +
              var(--infographic-footer-max-height) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-body-height-one-slide-show:
        calc(95vh -
             (var(--infographic-header-max-height) +
              (var(--infographic-header-padding) * 2) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-body-height-with-description-one-slide-show:
        calc(95vh -
             (var(--infographic-header-max-height) +
              (var(--infographic-header-padding) * 2) +
              var(--infographic-description-max-height) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-body-height-slide-zero-one-slide-show:
        calc(95vh -
             (var(--infographic-header-max-height-slide-zero) +
              (var(--infographic-header-padding) * 2) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-body-height-with-description-slide-zero-one-slide-show:
        calc(95vh -
             (var(--infographic-header-max-height-slide-zero) +
              (var(--infographic-header-padding) * 2) +
              var(--infographic-description-max-height) +
              (var(--infographic-footer-padding) * 2)
             ));
    --infographic-default-body-padding: 2vmax;

}

/* ---------------- Confirm popup --------------------- */

@layer worktour_base {

    .WorktourConfirmWrapper {
        z-index: 50000;
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
    }

    .WorktourConfirm {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        min-width: 300px;
        min-height: 300px;
        max-width: 90vw;
        max-height: 80vh;
        /*noinspection CssNoGenericFontName*/
        font-family: var(--corporate-main-font-family);
        font-size: 2rem;
    }

    .WorktourConfirmHeader {
        position: relative;
        min-height: 40px;
        background-color: var(--corporate-main-color-dark);
        color: white;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .WorktourConfirmHeader h1 {
        margin-bottom: 0;
        padding:15px;
        font-size: 1.5rem;
    }

    .WorktourConfirmClose {
        position: absolute;
        right: 10px;
        top: 5px;
        cursor: pointer;
    }

    .WorktourConfirmFooter {
        position: relative;
        min-height: 30px;
        background-color: var(--corporate-main-color-dark);
        color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .WorktourConfirmBody {
        position: relative;
        min-height: 100px;
        min-width: calc(300px - 20%);
        background-color: white;
        color: black;
        text-align: center;
        padding: 5% 10%;
        display: inline-flex;
        flex-direction: column;
        max-height: calc(90vh - (100px + 30vh));
        overflow-y: auto;
        max-width: calc(90vw - 20%);
        border-left: solid black 1px;
        border-right: solid black 1px;
    }

    .WorktourConfirmBody h1 {
        font-size: 3.0rem;
    }

    .WorktourConfirmBody h1 {
        font-size: 2.75rem;
    }

    .WorktourConfirmBody h3 {
        font-size: 2.50rem;
    }

    .WorktourConfirmBody h4 {
        font-size: 2.25rem;
    }

    .WorktourConfirmButton {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        font-weight: bold;
        /*noinspection CssNoGenericFontName*/
        font-family: var(--corporate-heading-font-family);
        font-size: 2rem;
        border: solid var(--corporate-main-color-dark) 2px;
        border-radius: 4px;
    }

    .WorktourConfirmCancelButton {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        font-weight: bold;
        /*noinspection CssNoGenericFontName*/
        font-family: var(--corporate-heading-font-family);
        font-size: 2rem;
        border: solid var(--corporate-main-color-dark) 2px;
        border-radius: 4px;
    }

    .WorktourConfirmBackdrop {
        background-image: url("https://tours.worktour.com/assets/icons/half-tone-tile.png") !important;
        background-repeat: repeat, repeat;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* ---------------- Notification popup --------------------- */

    #WorktourNotification {
        display: block;
        z-index: 50000;
        position: fixed;
        right: min(-300px, -40vw);
        top: 2vh;
        min-width: min(40vw, 300px);
        max-width: 40vw;
        max-height: 80vh;
        /*noinspection CssNoGenericFontName*/
        font-family: var(--corporate-main-font-family);
        font-size: 2rem;
        transition: right 5s;
        border: solid black 1px;
        background-color: white;
    }

    #WorktourNotification.slide-in-from-right {
        right: 2vw;
    }

    #WorktourNotification.slide-in-from-right-immediate {
        transition: right 0.5s;
    }

    #WorktourNotificationHeader {
        position: relative;
        min-height: 40px;
        background-color: var(--corporate-main-color-dark);
        color: white;
    }

    #WorktourNotificationFooter {
        position: relative;
        min-height: 30px;
        background-color: var(--corporate-main-color-dark);
        color: white;
    }

    #WorktourNotificationBody {
        position: relative;
        min-height: 100px;
        background-color: white;
        color: black;
        text-align: center;
        padding: 5% 10%;
        display: inline-flex;
        flex-direction: column;
        overflow-x: hidden;
        max-width: calc(min(100%, 40vw) - 20%);
        transform: translate(-50%, 0);
        left: 50%;
    }

    @media(max-width: 768px) {
        #WorktourNotification {
            font-size: 1.2rem;
        }

        #WorktourNotificationBody {
            padding-left: 5%;
            padding-right: 5%;
            max-width: calc(min(100%, 40vw) - 10%);
        }
    }

} /* End @layer */

.show-size {
    font-size: 3rem;
    line-height: 3rem;
    padding-bottom: 30px;
}

.size-check {
    display: none;
}

.size-es {
    display: none;
}

.size-sm {
    display: none;
}

.size-med {
    display: none;
}

.size-lg {
    display: none;
}

.size-xl {
    display: none;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

.dpr1 {
    display: block;
}

.dpr2 {
    display: none;
}

@media (max-width: 576px) {

    .size-es {
        display: block;
    }

    .size-sm {
        display: none;
    }

    .size-med {
        display: none;
    }

    .size-lg {
        display: none;
    }

    .size-xl {
        display: none;
    }

}

@media (min-width: 577px) and (max-width: 767px) {

    .size-es {
        display: none;
    }

    .size-sm {
        display: block;
    }

    .size-med {
        display: none;
    }

    .size-lg {
        display: none;
    }

    .size-xl {
        display: none;
    }

}

@media (min-width: 768px) and (max-width: 959px) {

    .size-es {
        display: none;
    }

    .size-sm {
        display: none;
    }

    .size-med {
        display: block;
    }

    .size-lg {
        display: none;
    }

    .size-xl {
        display: none;
    }

}

@media (min-width: 960px) and (max-width: 1139px) {

    .size-es {
        display: none;
    }

    .size-sm {
        display: none;
    }

    .size-med {
        display: none;
    }

    .size-lg {
        display: block;
    }

    .size-xl {
        display: none;
    }

}

@media (min-width: 1140px) {

    .size-es {
        display: none;
    }

    .size-sm {
        display: none;
    }

    .size-med {
        display: none;
    }

    .size-lg {
        display: none;
    }

    .size-xl {
        display: block;
    }

}

@media (hover: none) {

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {

    .dpr1 {
        display: none;
    }

    .dpr2 {
        display: block;
    }
}