@layer worktour_base {

    .action-plan-wrapper {
        padding: 20px;
        position: relative;
        /* max-width: calc(max(7.5in, 730px)); */
        min-width: 200px;
        min-height: calc(max(200px, 100vh - (var(--end-user-header-height) +
                                             var(--end-user-footer-height))));
    }

    /* i.e. for mobile devices */
    @media (hover: none) {

        .dpr-1 {
            max-width: 100vw !important;
            transform: scale(1, 1);
            transform-origin: left top;
        }

        .dpr-1-5 {
            max-width: calc(min(730px, 65vw)) !important;
            transform: scale(1.5, 1.5);
            transform-origin: left top;
        }

        .dpr-2 {
            max-width: calc(min(730px, 48vw)) !important;
            transform: scale(2.0, 2.0);
            transform-origin: left top;
        }

        .dpr-3 {
            max-width: calc(min(730px, 32vw)) !important;;
            transform: scale(3.0, 3.0);
            transform-origin: left top;
        }

    }

    .action-plan-wrapper h1 {
        font-weight: bold;
        font-size: 1.6rem;
        padding-top: 45px;
    }

    .action-plan-wrapper a {
        color: var(--corporate-main-color-dark);
        text-decoration: underline;
    }

    .action-plan-print-button {
        position: absolute;
        left: var(--action-plan-wrapper-margin);
        top: var(--action-plan-wrapper-margin);
        cursor: pointer;
        color: var(--corporate-main-color-dark);
        text-decoration: underline;
    }

    .action-plan-close-button {
        position: absolute;
        right: var(--action-plan-wrapper-margin);
        top: var(--action-plan-wrapper-margin);
        color: black !important;
        font-weight: bold;
        font-size: 1.6rem;
        text-decoration: none !important;
        cursor: pointer;
    }

    .action-plan-sub-head {
        margin-top: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .action-plan-block {
    }

    .action-plan-block-after-first {
        border-top: dotted 2px var(--corporate-main-color-dark);
    }

    .action-plan-block-row {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .action-plan-sub-head h1 {
        border-top: solid var(--corporate-main-color-dark) 3px;
        font-weight: bold;
        font-size: 1.6rem;
        padding-top: 25px !important;
        margin-bottom: 0;
        padding-bottom: 0;
        width: 100%;
    }

    .action-plan-sub-head h2 {
        border-top: solid var(--corporate-main-color-dark) 3px;
        font-weight: bold;
        font-size: 1.6rem;
        padding-top: 30px;
        margin-bottom: 0;
        padding-bottom: 0;
        width: 100%;
    }

    .action-plan-completeness-strip {
        background-color: #ebebeb;
        width: 190px;
        border-left: dashed 2px var(--corporate-secondary-color-blue);
        border-right: dashed 2px var(--corporate-secondary-color-blue);
        text-align: center;
        color: var(--corporate-secondary-color-blue);
        font-weight: bold;
        font-size: 0.9rem;
        display: flex;
        line-height: 18px;
        padding-top: 25px;
        position: relative;
        min-height: 50px;
    }

    .action-plan-wrapper h1 {
        font-weight: bold;
        font-size: 1.6rem;
        padding-top: 45px;
    }

    .action-plan-wrapper h2 {
        font-weight: bold;
        font-size: 1.2rem;
        padding-top: 25px;
        width: 100%;
    }

    .action-plan-completeness-left {
        width: 95px
    }

    .action-plan-checkbox {
        background-color: white;
        color: var(--corporate-secondary-color-blue);
        padding: 2px;
        border: solid #555 1px;
        width: 25px;
        height: 25px;
        display: block;
        font-size: 2.0rem;
        position: absolute;
        left: 40px;
        top: 12px;
    }

    .action-plan-completeness-right {
        width: 95px
    }

    .action-plan-career-points-complete {
        background-color: var(--corporate-secondary-color-blue);
    }

    .action-plan-career-points-incomplete {
        background-color: #c1c1c1;
    }

    .action-plan-career-points {
        color: white;
        padding: 10px;
        border-radius: 50%;
        position: absolute;
        top: 8px;
        left: 120px;
        text-align: center;
        font-size: 125%;
    }

    .action-plan-completed-checkbox {
        position: absolute;
        top: 14px;
        left: 40px;
        height: 25px;
        width: 25px;
    }

    .action-plan-block-para {
        width: 100%;
        padding-right: 10px;
    }

    .action-plan-coming-soon {
        background-color: var(--corporate-secondary-color-blue);
        color: white;
        font-style: italic;
        position: absolute;
        width: 120px;
        top: -15px;
        left: 35px;
        padding: 5px 5px 8px;
    }

    .action-plan-dial-gauge-block {
        width: 100%;
        height: 160px;
        border: dashed 2px var(--corporate-secondary-color-blue);
        color: var(--corporate-secondary-color-blue);
        background-color: #ebebeb;
        display: flex;
        position: relative;;
    }

    .action-plan-dial-gauge {
        width: 160px;
        height: 160px;
    }

    #extraP {
        overflow-y: hidden;
        margin-right: 110px;
    }

    .show-more-button {
        position: absolute;
        right: 0;
        bottom: 2px;
        padding: 3px;
        border-radius: 8px;
        cursor: ns-resize;
        border: solid white 1px;
        height: var(--show-more-less-buton-height);
        box-sizing: initial;
    }

    .show-less-button {
        position: absolute;
        right: 15px;
        padding: 3px;
        border-radius: 8px;
        cursor: ns-resize;
        border: solid white 1px;
        height: var(--show-more-less-buton-height);
        bottom: -8px;
        box-sizing: initial;
    }

    .popup-wrapper {
        /*
        margin: 2px;
        border: solid black 1px;
        */
        border-radius: var(--popup-border-radius);
        max-width: var(--nominal-popup-width);
        max-height: 100%;
        width: 100%;
        background-color: white;
        overflow: hidden;

        position: relative;
        z-index: 100;

    }

    .popup-banner {
        width: 100%;
        display: block;
        position: sticky;
        color: white;
        padding: 5px 15px 10px;
        background-color: var(--corporate-main-color-dark);
    }

    .popup-banner-buttons {
        z-index: 1200;
        position: absolute;
        right: 10px;
        top: 0;
        color: white;
    }

    .popup-button {
        background-color: var(--corporate-main-color-dark);
        padding-left: 3px;
        padding-bottom: 5px;
    }

    .popup-extra-print-mode {
        padding-left: 20px;
        padding-right: 20px;
    }

    .popup-banner-title-extra {
        height: calc(var(--game-popup-banner-height) -
                     var(--game-popup-banner-heading-height) - 12px);
        line-height: 20px;
        position: relative;
        overflow-y: hidden;
    }

    .popup-banner-text {
    }

    h1.popup-banner-zoomed {
        height: calc(2 * var(--game-popup-banner-heading-height)) !important;
    }

    .popup-banner-zoomed {
        font-size: 200% !important;
        line-height: 120%;
    }

    .popup-banner-zoomed h1 {
        font-size: 200% !important;
        line-height: 120%;
    }

    .popup-banner-title-extra p {
        height: calc(var(--game-popup-banner-height) - var(--game-popup-banner-heading-height) - 7px);
        margin-bottom: 0;
        /* overflow-y: hidden; */
        max-width: calc(90% - 90px);
    }

    .popup-banner-full-screen {
        position: absolute !important;
        z-index: 1000 !important;;
        height: 100% !important;;
        font-size: 125% !important;;
    }

    .popup-banner-overlay-wrapper {
        max-height: 90vh;
        height: 0;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10;
        transition: height 0.5s;
    }

    .popup-banner-overlay {
        background-color: inherit;
        border-radius: var(--popup-border-radius);
        z-index: 1000;
        position: absolute;
        padding: 5px 15px 10px;
        /* width: calc(min(90vw, 1024px) - 30px); */
        width: inherit;
    }

    #popup-banner-overlay.text-and-image-info-popup {
        height: calc(100% - (20px + var(--show-more-less-buton-height)));
    }

    #popup-banner-overlay.text-and-image-info-popup #popup-banner-overlay-text {
        max-height: calc(100% - (20px + var(--show-more-less-buton-height)));
    }

    #popup-banner-overlay.text-and-image-info-popup #popup-banner-overlay-text.popup-banner-zoomed {
        max-height: calc(100% - (70px + var(--game-popup-banner-heading-height)));
    }

    .popup-banner-overlay h1 {
        font-size: 1.50rem;
        width: calc(min(90vw, 1024px) - 60px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: var(--game-popup-banner-heading-height);
        margin-bottom: 0.3rem;
    }

    .popup-banner-overlay-title-extra {
        overflow-y: auto;
        max-height: calc(100% - (var(--show-more-less-buton-height) + 20px));
        /*
        max-height: 90vh;
        max-height: 0;
        -webkit-transition: max-height 1s;
        -moz-transition: max-height 1s;
        -o-transition: max-height 1s;
        transition: max-height 1s;
        */
    }

    .popup-banner-overlay-title-extra-exposed {
        max-height: 60vh;
    }

    /* For server-side popups, override the bg colour supplied by the theme. */
    .server-side-popup-body {
        color: black;
        background-color: white;
    }

    .popup-body {
        min-height: 45px;
        margin-bottom: var(--career-popup-footer-height);
    }

    .popup-body h1 {
        color: var(--corporate-main-color-dark);
        font-size: 1.50rem;
        font-weight: bold;
    }

    .popup-body-block {
        border-top: dotted 2px var(--corporate-main-color-dark);
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 5px 20px;
    }

    .popup-body-block-lock-item {
        padding: 3px 20px 3px 70px;
        font-size: 1.1rem;
    }

    .popup-body-block h2 {
        color: black;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .popup-footer {
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        color: white;
        height: var(--career-popup-footer-height);
        padding: 5px 15px 10px;
        background-color: var(--corporate-main-color-dark);
    }

    .popup-banner-buttons .popup-banner-close {
        position: absolute;
        top: 5px;
        padding-right: 10px;
        right: 0;
        font-size: 125%;
        cursor: pointer;
    }

    .popup-banner-buttons .popup-banner-close:hover {
        font-size: 150%;
    }

    .popup-banner-buttons .popup-print {
        position: absolute;
        top: 5px;
        padding-right: 12px;
        right: 31px;
        font-size: 125%;
        cursor: pointer;
    }

    .popup-banner-buttons .popup-print:hover {
        font-size: 150%;
    }

    .popup-banner-buttons .popup-search {
        position: absolute;
        top: 5px;
        padding-right: 10px;
        right: 30px;
        font-size: 125%;
        cursor: pointer;
    }

    .popup-banner-buttons .popup-search:hover {
        font-size: 150%;
    }

    .popup-banner h1 {
        font-size: 1.50rem;
        width: calc(min(90vw, 1024px) - 60px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: var(--game-popup-banner-heading-height);
        margin-bottom: 0.3rem;
    }

    .add-scrolling {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .body-header {
        /*
        margin: 10px 70px;
        width: 80%;
        */
        font-weight: 500;
        display: inline-flex;
        flex-direction: row;
        border: solid white 3px;
        width: 100%;
        justify-content: center;
    }

    .login-required {
        position: absolute;
        right: 1rem;
        background-color: black;
        color: white;
        padding: 0.3rem;
        display: inline;
    }

    @media (max-width: 530px) {
        .body-header {
            margin-left: 3px;
            margin-right: 3px;
        }

        .popup-body-block-lock-item {
            padding-left: 10px;
            padding-right: 5px;
        }

        .login-required {
            font-size: 70%;
        }
    }

    #favorite-this-career-icon{
        max-height: 70px;
        padding-right: 20px;
    }

    /* https://www.w3schools.in/css3/css-marquee/ */

    .marquee-vertical {
        overflow: hidden;
        position: relative;
        height: 50px;
    }

    .marquee-vertical p {
        position: absolute;
        width: 100%;
        height: 100%;
        margin: 0;
           -moz-transform: translateY(100%);
        -webkit-transform: translateY(100%);
                transform: translateY(100%);
           -moz-animation: scroll-up 8s linear infinite;
        -webkit-animation: scroll-up 8s linear infinite;
                animation: scroll-up 8s linear infinite;
    }

    @-moz-keyframes scroll-up {
        0% {
            -moz-transform: translateY(100%);
        }
        100% {
            -moz-transform: translateY(-100%);
        }
    }

    @-webkit-keyframes scroll-up {
        0% {
            -webkit-transform: translateY(100%);
        }
        100% {
            -webkit-transform: translateY(-100%);
        }
    }

    @keyframes scroll-up {
        0% {
               -moz-transform: translateY(100%);
            -webkit-transform: translateY(100%);
                    transform: translateY(100%);
        }
        100% {
               -moz-transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
                    transform: translateY(-100%);
        }
    }

} /* end of layer */