/* when A/B Test Overview (400) AND A/B Test Edit (600) AND Prep are open > hide Assets if both Assets AND Preview are opened */
@media (max-width: 2544px) { 
    .ss-600-400-visible.prep-400-visible .columns-0-1-1 {
        grid-template-columns: 0 1fr 55px 0 25%;
    }
    .ss-600-400-visible.prep-400-visible .columns-0-1-1 .assets {
        display: none !important;
    } 
    .ss-600-400-visible.prep-400-visible  #assets-close {
        display: none !important;
    }
    .ss-600-400-visible.prep-400-visible #assets-open {
        display: inline-block !important;
    }
}

/* when A/B Test Overview (400) AND A/B Test Edit (600) are open > hide Assets if both Assets AND Preview are opened */
/* when A/B Test Edit (600) AND Prep are open > hide Assets if both Assets AND Preview are opened */
@media (max-width: 2010px) { 
    .ss-600-400-visible .columns-0-1-1,
    .ss-600-visible.prep-400-visible .columns-0-1-1,
    .ss-600-400-visible.prep-400-visible .columns-0-1-1 {
        grid-template-columns: 0 1fr 55px 0 400px;
    }
    .ss-600-400-visible .columns-0-1-1 .assets,
    .ss-600-visible.prep-400-visible .assets {
        display: none !important;
    } 
    .ss-600-400-visible .columns-0-1-1 #assets-close,
    .ss-600-visible.prep-400-visible #assets-close {
        display: none !important;
    }
    .ss-600-400-visible .columns-0-1-1 #assets-open,
    .ss-600-visible.prep-400-visible #assets-open {
        display: inline-block !important;
    }
}

/* when Assets AND Preview are open > set the columns width to 400px */
@media (max-width: 1670px) { 
    .columns-0-1-1 {
        grid-template-columns: 0 1fr 55px 400px 400px;
    }
    .columns-0-1-1 .assets .card {
        _height: 115px;
        _min-height: auto;
    }
}

/* when A/B Test Overview (400) AND A/B Test Edit (600) are open > hide Assets OR Preview if opened */
@media (max-width: 1535px) { 
    .ss-600-400-visible .columns-0-0-1 {
        grid-template-columns: 0 1fr 55px 0 0;
    }
    .ss-600-400-visible .columns-0-1-0 {
        grid-template-columns: 0 1fr 55px 0 0;
    }


}

/* 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: 0 1fr 55px 0 400px;
    }
    .ss-600-visible .columns-0-1-1 .assets {
        _display: none !important;
    } 
    .ss-600-visible #assets-close {
        display: none !important;
    }
    .ss-600-visible #assets-open {
        display: inline-block !important;
    }
}

/* when Assets OR Preview are open > set the column width to 400px */
@media (max-width: 1499px) { 
    .columns-0-0-1 {
        grid-template-columns: 0 1fr 55px 0 400px;
    }
    .columns-0-1-0 {
        grid-template-columns: 0 1fr 55px 400px 0;
    }
    .columns-0-1-0 .assets .card {
        _height: 115px;
        _min-height: auto;
    }
}

/* when Side Sheet (400) is open > hide Assets if both Assets AND Preview are opened */
@media (max-width: 1325px) { 
    .ss-400-visible .columns-0-1-1 {
        grid-template-columns: 0 1fr 55px 0 400px;
    }
    .ss-400-visible .columns-0-1-1 .assets {
        display: none !important;
    } 
    .ss-400-visible .columns-0-1-1 #assets-close {
        display: none !important;
    }
    .ss-400-visible .columns-0-1-1 #assets-open {
        display: inline-block !important;
    }


}

@media (max-width: 1280px) { /* hide the global menu */
    h1, .buttons, .canvas {
        margin: 0;
    }
}

@media (max-width: 1280px) {
    .columns-0-0-0 {
        grid-template-columns: 0 1fr 55px 0 0;
    }
    .columns-0-1-0 {
        grid-template-columns: 0 1fr 55px 400px 0;
    }
    .columns-0-0-1 {
        grid-template-columns: 0 1fr 55px 0 400px;
    }
    h1, .buttons, .canvas {
        margin: 0;
    }
}

@container teaser-column (width < 841px) {
    .top-position {
        width: 100%;
    }
    .secured-position {
        display: none;
    }
    .content1-2 {
        display: block;
    }
    .content1, .content1-2 {
        padding: 16px 24px 16px 24px;
    }
}

@container teaser-card-asset (width < 352px) {
    .card-text-column {
        padding: 8px;
    }
    .card-title {
        _font-size: 14px;
    }
}

@container teaser-card (width < 639px) {
    .card-kicker,
    .card-kicker {
        _font-size: 13px !important; 
    }
    .card-title,
    .card-title {
        _font-size: 16px !important;
    }
    .card-deck,
    .card-deck
     {
        _font-size: 13px !important;
    }
}

@container teaser-card (width < 420px) {
    .card-kicker {
        _font-size: 12px !important;
        -webkit-line-clamp: 2 !important;
    }
    .card-title {
        _font-size: 14px !important;
        -webkit-line-clamp: 3 !important;
    }
    .card-deck
     {
        _font-size: 12px !important;
        -webkit-line-clamp: 2 !important;
    }
    .card-text-column {
        padding: 8px;
    }
}

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




@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;
    }
}