/* -------------- layout -------------- */
#nac_page_overview {
    display: flex;
    flex-direction: column;
}
@media all and (min-width: 768px) {
    #nac_page_overview {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 4em auto;
        grid-template-areas: 'acc_col_bar_1 acc_col_bar_2'
                            'nac_overview_cont nac_overview_cont';
    }
}

#acc_col_bar_1 {
    grid-area: acc_col_bar_1;
}
#acc_col_bar_2 {
    grid-area: acc_col_bar_2;    
}
#nac_overview_cont {
    grid-area: nac_overview_cont;    
}

.nac-overview-cont > * {
    height: auto;
}

#acc_col_bar_1, #acc_col_bar_2 {
    padding: 0 var(--padd-stand);
    margin: var(--padd-stand) 0;
}
@media all and (min-width: 768px) {
    #acc_col_bar_1, #acc_col_bar_2 {
        margin: 0 0 var(--padd-stand) 0;
    }
}

/* main layout */
:root {
    --grid-tab-overview-cols: 100%;
    --grid-tab-overview-rows: auto ;
    --grid-tab-overview-names: 'acc_col_cont';

    /* reduced height for titile */
    --height-title-cont0: 2.5em;
}
@media all and (min-width: 768px) {
    :root {        
        --height-card-img: calc(var(--height-page) - 4em - 5 * 0.5em); /* from grid-template-rows */
        --grid-tab-overview-cols: 100%;
        --grid-tab-overview-names: 'acc_col_cont';
    }
    @media all and (orientation: portrait) {
        :root {        
            --height-card-img: 60vh;
        }
    }
    :root {        
        --grid-tab-overview-rows: var(--height-card-img);
    }
}

#acc_col_cont {
    grid-area: acc_col_cont;
    background: rgba(255, 255, 255, 0.5);
}

/* -------------- search box -------------- */
@media all and (min-width: 768px) {
    #acc_col_bar_1 > * {
        margin-right: var(--padd-stand);
    }
    #acc_col_bar_2 > * {
        margin-left: var(--padd-stand);
    }
}

#it_my_col_1_picker, #it_my_col_2_picker {
    opacity: 0;
}

/* -------------- title -------------- */
#nac_adv_col_acc_text {
    text-align: center;
    padding: var(--padd-stand);
    font-weight: 800;
}

/* -------------- color card -------------- */
.nac-group-orig-col > * {
    padding: 0.3em;
}

#nac_card_my_color_1, #nac_img_card_1 {
    background: -webkit-linear-gradient(0deg, #A6F2D4 70%, #8134DF 70%);
    background: -moz-linear-gradient(0deg, #A6F2D4 70%, #8134DF 70%);
    background: -o-linear-gradient(90deg, #A6F2D4 70%, #8134DF 70%);
    background: linear-gradient(90deg, #A6F2D4 70%, #8134DF 70%);
}
#acc_text_title_1, #acc_text_text_1 {
    color: #8134DF;
}

#nac_card_my_color_1 {    
    height: auto;
    min-height: 30vh;
    max-height: 50vh;
    width: 90vw;
    max-width: 90vw;
}
@media all and (min-width: 768px) {
    #nac_card_my_color_1 {    
        height: calc(var(--height-card-img) - 10 * 0.5em - 8.5em);
        min-height: auto;
        width: 60vw;
        max-width: calc(0.7 * var(--width-max-page)); 
    }
}

/* -------------- contrast elements on color card -------------- */
#acc_contrast_cont {
    width: 85vw;
    margin-top: 1em;
    padding-top: 1em;
}
@media all and (min-width: 768px) {
    #acc_contrast_cont {
        width: auto;
        margin-top: 0;
        padding-top: 0;
    }
}


/* -------------- color names -------------- */
#acc_result1_cont_2 {
    margin: var(--padd-stand);
}
@media all and (min-width: 768px) {
    #acc_result1_cont_2 :nth-child(1) {
        margin: auto auto auto 0;
    }
    #acc_result1_cont_2 :nth-child(2) {
        margin: auto 0 auto auto;
    }
}

/* -------------- buttons -------------- */
#acc_adj_cont {
    padding-top: calc(2 * var(--padd-stand));
}
@media all and (min-width: 768px) {
    #acc_adj_cont {
        flex-direction: row;      
        padding-top: var(--padd-stand); 
    }
    #acc_adj_cont > * {
        padding: var(--padd-stand) calc(2 * var(--padd-stand));
    }
}

#acc_adj_cont .flex-box-row > * {
    margin: var(--padd-stand);
    text-align: center;
}

@media all and (min-width: 768px) {
    #acc_adj_cont_AAA {
        order: 2;
    }
    #acc_adj_cont_AA {
        order: 3;
    }
    #acc_adj_cont_reset {
        order: 1;
    }
}