/* ---------- overwrite .nac-overview-cont in style_name_color4.css ---------- */
:root {
    --grid-tab-overview-cols: 100%;
    --grid-tab-overview-rows: auto auto;
    --grid-tab-overview-names:  'cpg_ex_cont' 'cpg_col_pal_cont_all';
}
@media all and (min-width: 768px) {
    :root {
        --grid-tab-overview-cols: 55% 45%;
        --grid-tab-overview-rows: calc(var(--height-page) - 4 * var(--padd-stand));
        --grid-tab-overview-names: 'cpg_ex_cont cpg_col_pal_cont_all';
    }
    @media all and (orientation: portrait) {
        :root {
            --grid-tab-overview-cols: 100%;
            --grid-tab-overview-rows: auto auto;
            --grid-tab-overview-names: 'cpg_ex_cont' 'cpg_col_pal_cont_all';
        }
    }
}


/* ---------- main containers ---------- */
#cpg_ex_cont {
    grid-area: cpg_ex_cont;    

    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 100%;
    
    grid-template-rows: 5em auto 1.5em 4.5em;
}
@media all and (min-width: 768px) {
    #cpg_ex_cont {
        /* 3.5em and paddings already subtracted */
        grid-template-rows: 3.5em calc(var(--height-card-img) - 5.5em) 1.5em 4em;
    }
}

#cpg_ex_cont > * {
    display: flex;
    margin: auto;
}

#cpg_col_pal_cont_all {
    grid-area: cpg_col_pal_cont_all;
    display: flex;
    width: 100%;
    height: 100%;
}

#cpg_col_pal_cont {
    grid-area: cpg_col_pal_cont;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
@media all and (min-width: 768px) and (orientation: portrait) {
    #cpg_col_pal_cont {
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: 100%;
    }
}


/* ---------- search box ----------- */
@media all and (min-width: 768px) {
    .it-search-box {
        margin-left: 0;
    }
}

#it_my_col_1_picker {
    opacity: 0;
}


/* ---------- color palette ---------- */
.cpg-sw-cont {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 1em;
    padding-right: 3em;
}

.cpg-swatch-cont {
    display: grid;
    grid-template-columns: calc(100% - 3em) 3em;
    grid-template-rows: 100%;
}

.cpg-swatch {
    height: 100%;
    width: 100%;
    display: flex;
    margin: auto;
    border-radius: 0;
    justify-content: center;
    align-items: center;
}
@media all and (min-width: 768px) and (orientation: portrait) {
    .cpg-swatch {
        padding: 0.2em;
    }
}

.cpg-sw-text {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
}
.cpg-sw-text-name {
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.cpg-sw-action-cont {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 0.5em;
    bottom: 0.5em;
}
.cpg-sw-action {
    width: 1em;
    height: auto;
    margin: 0.5em;
}
@media all and (min-width: 768px) and (orientation: portrait) {
    .cpg-sw-action {
        width: 0.85em;
        cursor: pointer;
    }
}

.cpg-sw-cont .it-color-picker {
    opacity: 0!important;
}


/* ------- theme switch ------ */
/* 
#cpg_theme_switch {
    visibility: visible;
    margin: auto 0 0 0;
}
*/

/* --------- example --------- */
#cpg_ex {
    display: flex;
    width: 100%;
    height: 30vh;
    background: #1EEBC9;
    object-fit: contain;
    justify-content: center;
}
@media all and (min-width: 768px) {
    #cpg_ex {
        height: 100%;
        max-width: 95%;
    }
    @media all and (orientation: portrait) {
        #cpg_ex {
            max-width: calc(0.7 * 100vw);
        }
    }
}

/* -------- usage ---------- */
#ss_cpi_user_usage_count_text {
    width: auto;
    margin: auto;
}

/* ------- color swatch ------ */

/* ------ generate button ------ */
#cpg_generate {
    margin: auto!important;
}