@media (max-width: 5000px) { 
    pre.default-grid {
        color: yellowgreen;
    }
}

/* when A/B Test Overview (400) AND A/B Test Edit (600) are open */
@media (max-width: 2065px) { 
    .ss-600-400-visible .columns-0-1-1 {
        grid-template-columns: 1000px 55px .6fr .6fr;
    }
    .ss-600-400-visible .columns-0-1-1.preview-visible.assets-visible .box-5 pre {
        color: yellowgreen;
    }
    .ss-600-400-visible .columns-0-1-1.preview-visible.assets-visible pre.default-grid,
    .ss-600-400-visible .columns-0-1-1.preview-visible.assets-visible .box-1 pre,
    .ss-600-400-visible .columns-0-1-1.preview-visible.assets-visible .box-2 pre,
    .ss-600-400-visible .columns-0-1-1.preview-visible.assets-visible .box-3 pre,
    .ss-600-400-visible .columns-0-1-1.preview-visible.assets-visible .box-4 pre {
        color:#AAA;
    }
}

/* when Assets AND Preview are open > set the columns width to 400px */
@media (max-width: 1670px) { 
    .columns-0-1-1 {
        grid-template-columns: 1fr 55px 400px 400px;
    }
    .columns-0-1-1 .box-4 pre {
        color: yellowgreen;
    }
    .columns-0-1-1 pre.default-grid,
    .columns-0-1-1 pre.box-1prepre,
    .columns-0-1-1 pre.box-2 pre,
    .columns-0-1-1 pre.box-3 pre,
    .columns-0-1-1 pre.box-5 pre {
        color:#AAA;
    }
}

/* when A/B Test Overview (400) AND A/B Test Edit (600) are open*/
@media (max-width: 1535px) { 
    .ss-600-400-visible .columns-0-0-1 {
        grid-template-columns: 1000px 55px 0 1fr;
    }
    .ss-600-400-visible .columns-0-1-0 {
        grid-template-columns: 1000px 55px 1fr 0;
    }
    .ss-600-400-visible .columns-0-0-1.preview-visible .box-3 pre,
    .ss-600-400-visible .columns-0-1-0.assets-visible .box-3 pre {
        color: yellowgreen;
    }
    .ss-600-400-visible .columns-0-0-1.preview-visible pre.default-grid,
    .ss-600-400-visible .columns-0-0-1.preview-visible .box-1 pre,
    .ss-600-400-visible .columns-0-0-1.preview-visible .box-2 pre,
    .ss-600-400-visible .columns-0-0-1.preview-visible .box-4 pre,
    .ss-600-400-visible .columns-0-0-1.preview-visible .box-5 pre,
    .ss-600-400-visible .columns-0-1-0.assets-visible pre.default-grid,
    .ss-600-400-visible .columns-0-1-0.assets-visible .box-1 pre,
    .ss-600-400-visible .columns-0-1-0.assets-visible .box-2 pre,
    .ss-600-400-visible .columns-0-1-0.assets-visible .box-4 pre,
    .ss-600-400-visible .columns-0-1-0.assets-visible .box-5 pre {
        color:#AAA;
    }
}

/* when A/B Test Edit (600) is open > hide Assets if both Assets AND Preview are opened */
@media (max-width: 1525px) { 
    .ss-600-visible .columns-0-1-1 {
        grid-template-columns: 600px 55px .6fr .6fr;
    }
    .ss-600-visible .columns-0-1-1.preview-visible.assets-visible .box-2 pre {
        color: yellowgreen;
    }
    .ss-600-visible .columns-0-1-1.preview-visible.assets-visible pre.default-grid,
    .ss-600-visible .columns-0-1-1.preview-visible.assets-visible .box-1 pre,
    .ss-600-visible .columns-0-1-1.preview-visible.assets-visible .box-3 pre,
    .ss-600-visible .columns-0-1-1.preview-visible.assets-visible .box-4 pre,
    .ss-600-visible .columns-0-1-1.preview-visible.assets-visible .box-5 pre {
        color:#AAA;
    }
}

/* when Assets OR Preview are open > set the column width to 400px */
@media (max-width: 1499px) { 
    .columns-0-0-1 {
        grid-template-columns: 1fr 55px 0 400px;
    }
    .columns-0-1-0 {
        grid-template-columns: 1fr 55px 400px 0;
    }
    .columns-0-0-1 .box-1 pre,
    .columns-0-1-0 .box-1 pre {
        color: yellowgreen;
    }
    .columns-0-0-1 pre.default-grid,
    .columns-0-0-1 .box-2 pre,
    .columns-0-0-1 .box-3 pre,
    .columns-0-0-1 .box-4 pre,
    .columns-0-0-1 .box-5 pre,
    .columns-0-1-0 pre.default-grid,
    .columns-0-1-0 .box-2 pre,
    .columns-0-1-0 .box-3 pre,
    .columns-0-1-0 .box-4 pre,
    .columns-0-1-0 .box-5 pre {
        color: #AAA;
    }
}

@container teaser-container (width < 841px) {
    .top-position {
        width: 100%;
    }
    .secured-position {
        display: none;
    }
    .content1-2 {
        display: block;
    }
    pre.c-box-2 {
        color: yellowgreen;
    }
}
@container teaser-container (width > 841px) {
    pre.c-box-1 {
        color: yellowgreen;
    }
}




/*********************************************************************************/





@media (max-width: 1439px) { 
    h1 span {
        color: #fecfcf;
    }
    .not-supported {
        display: inline !important;
    } 
}
@media (max-width: 1470px) { 
    h1 b.w1470 {
        text-decoration: underline;
        color: #cffefa;
    }
}
@media (max-width: 1710px) { 
    h1 b.w1710 {
        text-decoration: underline;
        color: #cffefa;
    }
}
@media (max-width: 1512px) { 
    h1 b.w1512 {
        text-decoration: underline;
        color: #cffefa;
    }
}
@media (max-width: 1728px) { 
    h1 b.w1728 {
        text-decoration: underline;
        color: #cffefa;
    }
}
@media (max-width: 1920px) { 
    h1 b.w1920 {
        text-decoration: underline;
        color: #cffefa;
    }
}
@media (max-width: 5000px) { 
    h1 b.w2560 {
        text-decoration: underline;
        color: #cffefa;
    }
}