/*noinspection CssRedundantUnit*/
@media all {

    /* ========================== */
    /* Fix the margins & padding: */
    /* ========================== */

    html, body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: auto;
        overflow-x: hidden;
        font-weight: 400;
    }

    img {
        border-style: none;
        margin: 0px;
        padding: 0px;
    }

    tr, td {
        margin: 0px;
        padding: 0px;
    }

    /* ================== */
    /* Fix bold & italic: */
    /* ================== */

    b, strong{
        font-weight: 700;
        font-variation-settings: "wght" 700;
    }

    i, em{
        font-style: italic;
    }

    /* ======================= */
    /* Fix non-breaking space: */
    /* ======================= */

    .nobr {
        white-space: nowrap;
    }
    nobr {
        white-space: nowrap;
    }

    /* ============= */
    /* Add Clearfix: */
    /* ============= */

    .clearfix {
        overflow: auto;
    }

    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }


}


/*noinspection CssRedundantUnit, CssUnresolvedCustomProperty*/
@media all {

    html{
        /*
        background: #FFFFFF;
        background-image: linear-gradient(to bottom, #4FC3F7, #FFFFFF);
        */

        /*
        background: linear-gradient(to bottom, #4FC3F7 0%, #FFFFFF 100%);
        overflow: auto;
        */

        background-image: linear-gradient(to bottom, #4FC3F7 0%, #FFFFFF 100%);
        background-repeat: no-repeat;
        overflow-y: auto;
        min-height: 100vh;
    }


    body {
        /* Make the background look like the sky */
        /*
            #B3E5FC = MD Light Blue 100
            #4FC3F7 = MD Light Blue 300
        */
        background-image: radial-gradient(at 80% 40px, #FFF, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), #FFF),
        radial-gradient(#B3E5FC, #B3E5FC, #4FC3F7);

        overflow: auto;
        font-family:'IBM Plex Sans',Frutiger,'Segoe UI','Frutiger Linotype','Dejavu Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    }

    #layout-plate{
        margin: 1em 2em 4em 2em;
        background: rgba(255,255,255,0.3);

        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
        border-bottom-left-radius: 2em;
        border-bottom-right-radius: 2em;

        /* Form Shadow */
        /*
            #f0f4f4 = IBM-1 Cool White 4
        */
        box-shadow:
            0px 0px 0px  2px rgba(200,200,200, 0.6),
            0px 4px 15px 0px rgba(0,0,0,0.3);
    }

    #layout-plate-banner{
        position: relative;
        padding: 2ex 2em;

        /*
        background: linear-gradient(to right, var(--ox-color-md-gray-900), #000000, #000000, var(--ox-color-md-gray-900));
        background: linear-gradient(to right, var(--ox-color-md-gray-900), #000000, #000000, var(--ox-color-md-gray-900));
        background: linear-gradient(to right, var(--ox-color-tw-blue-900), var(--ox-color-tw-blue-700), var(--ox-color-tw-blue-700), var(--ox-color-tw-blue-900));
        background: linear-gradient(to right, #cec3b0, #d4c9b6, #e3d8c5, #e3d8c5, #d4c9b6, #cec3b0);
        */

        /*color: var(--ox-color-ibm1-warm-white-4);*/
        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
        text-align: left;

        /*
        background: linear-gradient(100deg, var(--ox-color-ibm2-cyan-40), var(--ox-color-ibm2-cyan-70));
        */

        /*
        background: linear-gradient(to right, #7e68d4, #35297f);
        box-shadow: inset 0px 0px 6px -3px rgba(0,0,0,0.3);
        */

        background: #cec3b0 url('/resources/app/features/theme/green-banner-01.png') no-repeat;
        background-size: 110% 156%;
    }

    #layout-plate-banner a:link,
    #layout-plate-banner a:visited,
    #layout-plate-banner a:hover,
    #layout-plate-banner a:active {
        color: #0000ff;
        text-decoration: none;

        transition-property: all;
        transition-duration: 0.6s;

        cursor: pointer;
        user-select: none;
    }
    #layout-plate-banner a:hover {
        color: #0088ff;
    }

    #layout-plate-banner [data-layout-area-item="banner-nav-links"]{
        position: absolute;
        text-align: right;
        bottom: 1em;
        right: 1em;

        user-select: none;

        background-color: #fff;
        padding: 4px;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        border-bottom-left-radius: 11px;
        border-bottom-right-radius: 11px;

        background: rgba(255,255,255,0.2);
    }

    #layout-plate-banner [data-layout-area-item="banner-account-links"]{
        position: absolute;
        text-align: right;
        top: 1em;
        right: 1em;

        background-color: #fff;
        padding: 4px;
        border-top-left-radius: 11px;
        border-top-right-radius: 11px;
        border-bottom-left-radius: 11px;
        border-bottom-right-radius: 11px;

        background: rgba(255,255,255,0.2);
    }

    #layout-plate-middle {
        padding: 2ex 2em;
        background: var(--ox-color-ibm1-warm-white-4);
        background: #fff5e2;
    }

    #layout-plate-columns {
        display: flex;
    }

    #side-column {
        min-width: 1em;
        padding: 0 4px 0 4px;
    }

    #layout-plate-footer{
        position: relative;
        padding: 2ex 2em;
        background: linear-gradient(to right, var(--ox-color-md-gray-900), #000000, #000000, var(--ox-color-md-gray-900));
        color: var(--ox-color-ibm1-warm-white-4);
        border-bottom-left-radius: 2em;
        border-bottom-right-radius: 2em;
        text-align: center;
        background: linear-gradient(to right, var(--ox-color-tw-blue-900), var(--ox-color-tw-blue-700), var(--ox-color-tw-blue-700), var(--ox-color-tw-blue-900));
    }

    #layout-plate-ribbon{
        position: relative;
        color: var(--ox-color-ibm1-warm-white-4);
        text-align: center;
        background: linear-gradient(to right, var(--ox-color-tw-blue-900), var(--ox-color-tw-blue-700), var(--ox-color-tw-blue-700), var(--ox-color-tw-blue-900));
        min-height: 10px;
    }

}