html.dev,
html.reprod,
html.dev body,
html.reprod body {
    background-position : 0 30px, bottom;

    &.layout_v4{
        background-position : 0 1.875rem, bottom;
    }
}

html.dev.deprecatedWarning body {
    background-position : 0 130px, bottom;

    &.layout_v4{
        background-position : 0 8.125rem, bottom;
    }
}

html.reprod.deprecatedWarning body {
    background-position : 0 130px, bottom;

    &.layout_v4{
        background-position : 0 8.125rem, bottom;
    }
}

.dev .developerHead,
.reprod .developerHead {
    line-height : 30px;
    font-size   : 18px;
    height      : 30px;
    background  : black;
    color       : white;
    text-align  : center;
    font-weight : bold;
}

.reprod .developerHead {
    background : blue;
}

html.layout_v1.test .innercontent,
html.layout_v2.test .layout,
html.test :not(.page-startpage) main {
    background-image : url('../images/bg_test.png');
}


html.layout_v4.test.page-startpage main {
    background : url('../images/bg_test.png'),
    var(--startpage-pattern);
}


html.layout_v1.demo .innercontent,
html.layout_v2.demo .layout,
html.demo main {
    background-image : url('../images/bg_demo.png');
}

html.layout_v4.demo.page-startpage main {
    background : url('../images/bg_demo.png'),
    var(--startpage-pattern);
}

html.layout_v1.reprod .innercontent,
html.layout_v2.reprod .layout,
html.reprod main {
    background-image : url('../images/bg_reprod.png');
}

html.hide-background .innercontent,
html.hide-background .layout,
html.hide-background main {
    background-image : none;
}

.smsBox, .layout_v3 .timeMachineOpen, .layout_v2 .timeMachineOpen, .layout_v1 .timeMachineOpen {
    position      : fixed;
    top           : 50px;
    left          : 50px;
    padding       : 10px;
    border        : 1px solid #979797;
    border-radius : 7px;
    box-shadow    : 5px 5px 5px #ccc;
    z-index       : 2;
    background    : #fafafa;
    background    : linear-gradient(to bottom, #fafafa, #c7c7c7);
    color         : black;
}

.layout_v4 .timeMachineClosed {
    position   : static;
    background : none;
    opacity    : 1;
    padding    : 0;
    margin     : 0;
}

.layout_v4 .timeMachine {
    position     : relative;
}

.layout_v4 .layout > nav .timeMachine {
    cursor : pointer;
}

.layout_v3 .timeMachineOpen,
.layout_v2 .timeMachineOpen,
.layout_v1 .timeMachineOpen {
    left          : 10px;
    z-index       : 100;
    font-size     : 11px;
    min-width     : 140px;
    border        : 1px solid #000;
    border-radius : 3px;
}

.layout_v4 .timeMachineOpen {
    position      : absolute;
    left          : auto;
    top           : auto;
    right         : 0;
    bottom        : 0;
    transform     : translateY(calc(100%));
    background    : var(--navbar-bg-color);
    border        : 0;
    border-radius : 7px;
    padding       : 10px;
    box-shadow    : none;
    color         : var(--light-text-color);
    font-size     : 1rem;
    min-width     : 400px;
}

.layout_v4 .timeMachine a {
    color : var(--light-text-color);
}

.layout_v4 .timeMachineOpen table {
    width      : 100%;
}

.layout_v4 .timeMachineOpen table td {
    padding : 4px;
}

.layout_v4 .layout > nav .timeMachine{
    align-content   : center;
    border-radius   : 2rem;
    cursor          : pointer;
    display         : none;
    height          : 3rem;
    justify-content : center;
    transition      : background-color 300ms ease;
    width           : 3rem;
    
    &:hover {
        background : rgba(255, 255, 255, 0.1);
    }
}

.layout_v4 .layout > nav .timeMachine {
    display  : grid;
    position : relative;
}


.timeMachineMonthBox {
    margin-bottom : 2rem;
}

.layout_v4 .timeMachineMonthBox {
    position : sticky;
    top      : 80px;
    left     : 0;
}

.timeMachineClosed {
    position      : fixed;
    z-index       : 1;
    top           : 50px;
    left          : 10px;
    width         : 1.5rem;
    height        : 1.5rem;
    background    : #fafafa;
    padding       : 0.3125rem;
    opacity       : 0.5;
    cursor        : pointer;
    background    : linear-gradient(to bottom, #fafafa, #c7c7c7);
}

.timeMachineClosed:hover {
    opacity : 1;
}


header .layout-switcher,
nav div.layout-switcher {
    cursor      : pointer;
    display     : block;
    width       : 1.5rem;
    height      : 1.5rem;
}

.layout_v3 header span.layout-switcher {
    float  : right;
    margin : 60px 30px 0 0;
}

.smsBox {
    left       : auto;
    right      : 10px;
    box-shadow : 5px 5px 5px #cdd8f4;
    background : #d9e7f9;
    background : linear-gradient(to bottom, #d9e7f9, #95b5e2);
    z-index    : 1200;
}

.layout_v3 .timeMachineOpen,
.layout_v3 .timeMachineClosed,
.layout_v3 .smsBox {
    box-shadow    : 5px 5px 5px #303030;
    border-radius : 0;
}

.smsBox .smsBoxClose, .layout_v3 .timeMachineOpen .timeMachineClose {
    color           : black;
    font-weight     : bold;
    text-decoration : none;
    float           : right;
}

.smsBox ul {
    padding         : 0;
    margin          : 10px 0;
    list-style-type : none;
}

.smsBox ul li {
    display       : block;
    border-bottom : 1px dotted #000;
    margin-bottom : 5px;
    line-height   : 20px;
    margin-left   : 0;
}

.xdebug-error, .xe-warning {
    color     : black;
    font-size : 14px !important;
}

.layout_v3.dev main,
.layout_v3.reprod main {
    min-height : calc(100vh - 466px);
}

.developer-toolbar.layout_v3 main,
.developer-toolbar.layout_v3 main {
    min-height : calc(100vh - 468px);
}

.developer-toolbar.layout_v3.dev main,
.developer-toolbar.layout_v3.reprod main {
    min-height : calc(100vh - 498px);
}


.transactionListContainer .sticky {
    bottom : 30px;
}


.timeMachineOpen.mobile {
    display                 : none;
    border-top-left-radius  : 0;
    border-top-right-radius : 0;
    min-width               : unset;
}

nav.context {
    --spacerY                 : 40px;
}

@media (max-width : 1000px) {
    .layout_v4 .page-daily_tasks .gridContainer.onethird {
        grid-template-columns : 1fr;
    }
}

@media (max-width : 650px) {
    .layout_v4 header .layout-switcher {
        margin-right : 1rem;
    }
}

@media (max-width : 600px) {

    .timeMachineOpen:not(.mobile) {
        display : none;
    }

    .timeMachineOpen.mobile {
        display : unset;
    }

    .layout_v4 .timeMachineOpen {
        width : 100%;
    }
}