/*
  ========================================
  Color Name Finder
  ========================================
*/
/* -------------- adjusting for right bar -------------- */
.it-page-cont-0 {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 250px auto auto auto;
    grid-template-areas: 'it_cont_ad_1'
                        'it-page-title' 
                        'it-page-search'                        
                        'it-page-overview';
}
@media all and (min-width: 768px) { 
    .it-page-cont-0 {
        display: grid;
        grid-template-columns: calc(min(var(--width-max-page), 100vw) - 6vw - 250px) 250px;
        grid-template-rows: 0 auto auto;
        grid-template-areas: 'it-page-title it_cont_ad_1'
                            'it-page-search it_cont_ad_1' 
                            'it-page-overview it_cont_ad_1';
    }
    @media all and (orientation: portrait) {
        .it-page-cont-0 {
            grid-template-columns: 100%;
            grid-template-rows: 18vh 0 auto auto;
            grid-template-areas: 'it_cont_ad_1'
                                'it-page-title' 
                                'it-page-search'
                                'it-page-overview';
        }
    }
}
.it-page-title {
    grid-area: it-page-title;  
}
.it-page-search {
    grid-area: it-page-search;  
}
.it-page-overview {
    grid-area: it-page-overview;
    /*border: 1px solid red;*/
}
@media all and (min-width: 768px) { 
    .it-page-overview {
        padding: var(--padd-stand);
    }
}
#it_cont_ad_1 {
    grid-area: it_cont_ad_1;
}

/* -------------- whole table with cards -------------- */
:root {
    --grid-tab-overview-cols: 100%;
    --grid-tab-overview-rows: 5.5em 40vh auto auto auto auto;
    --grid-tab-overview-names:  'nac-img-desc'
                                'nac-img-cont'                          
                                'nac-swatch-cont'
                                'nac-adv-cont';

    --padd-card-col: 10px;
}
@media all and (min-width: 768px) { 
    :root {
        --height-card-img: calc(var(--height-page) - 3.5em - 4 * var(--padd-stand));
        --grid-tab-overview-cols: 50% 25% 25%;
        --grid-tab-overview-rows: 3.5em calc(0.5 * var(--height-card-img)) calc(0.5 * var(--height-card-img));
        --grid-tab-overview-names: 'nac-img-desc empty empty'
                                    'nac-img-cont nac-swatch-cont nac-swatch-cont'
                                    'nac-img-cont nac-adv-cont nac-adv-cont';

        --padd-card-col: 20px;
    }
    @media all and (orientation: portrait) {
        :root {
            --height-card-img: 40vh;
            --grid-tab-overview-cols: 60% 40%;
            --grid-tab-overview-rows: 3.5em var(--height-card-img) auto;
            --grid-tab-overview-names: 'nac-img-desc empty'
                                        'nac-img-cont nac-swatch-cont'
                                        'nac-adv-cont nac-adv-cont';
        }
    }
}

.nac-overview-cont {
    display: grid;
    grid-template-columns: var(--grid-tab-overview-cols);
    grid-template-rows: var(--grid-tab-overview-rows);
    grid-template-areas: var(--grid-tab-overview-names);
}
.nac-overview-cont > * {
    height: 100%;
}
.nac-swatch-cont {
    grid-area: nac-swatch-cont;
}
.nac-adv-cont {
    grid-area: nac-adv-cont;
    position: relative;
}
.nac-img-cont{
    grid-area: nac-img-cont;
}
.nac-img-desc {
    grid-area: nac-img-desc;
}

.nac-col-name {
    margin: 0;
    padding: 0;
}

/* -------------- Image Icon -----------------*/
.it-upload-icon {
    padding: 0.5em!important;
}

/* -------------- Image / Photo Card -------------- */
.nac-img {
    padding: calc(0.5 * var(--padd-card-col));
    position: relative;
    cursor: crosshair;
}

#nac_img_card {
    background: #15BE7B;
}

/* magnifying glass */
#nac_mouse_pos {
    width: 7em;
    height: 7em;

    position: absolute; 
    left: 0%; 
    top: 0%;
    z-index: 3;
    
    border-radius: 0.5em;
    border: 2px dotted white;
}

/* -------------- Text above and under photo -------------- */
@media all and (min-width: 768px) {
    .nac-img-desc {
        padding-bottom: 1em;
    }
}

.nac-img-cont {
    position: relative;
    overflow: visible!important;
}


/* -------------- Color Cards - Layout -------------- */
/* 3 containers: name, 2 color cards; 2 contaoners: similar names, hue */
.nac-swatch-cont, .nac-adv-cont {
    width: 100%;
    margin: 0 auto;
    padding: calc(2 * var(--padd-stand));
    /*border: 1px solid red;*/
}

@media all and (min-width: 768px) {
    .nac-swatch-cont, .nac-adv-cont {
        display: grid;        
        align-items: start;        
        padding: 1em;
    }
    .nac-swatch-cont {
        grid-template-columns: 50% 50%;
        grid-template-rows: 100%;
    }
    .nac-adv-cont {
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-template-rows: 100%;
    }

    @media all and (orientation: portrait) {
        .nac-swatch-cont, .nac-adv-cont {
            align-items: center;
        }
        .nac-swatch-cont {
            grid-template-columns: 100%;
            grid-template-rows: 35% 65%;   
        }
    }
}

/* each of the 5 containers */
.nac-swatch-cont > *, .nac-adv-cont > * {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0.5em;
    background: rgba(255, 255, 255, 0.5);
    /*border: 1px solid blue;*/
}
@media all and (min-width: 768px) {
    .nac-swatch-cont > *, .nac-adv-cont > * {
        height: auto;
        background: none;        
        justify-content: flex-start;
    }
}

/* -- Each Color Card -- */
.nac-col-card {
    width: 75vw;
    height: 3.5em;
}
@media all and (min-width: 768px) {
    .nac-col-card {        
        width: 7vw;
        height: 7vw;
        max-width: 10em;
        max-height: 10em;
    }
    @media all and (orientation: portrait) {
        .nac-col-card {
            width: 20vw;
            height: 7vh;
        }
    }
}

#nac_card_my_color {
    margin: 0.2em;
    background: #15BE7B;
}

#card_artyclick_color {
    margin: 0.2em;
    background: #20C073;
}

/* -- Color Card Descriptions -- */
.nac-col-name-card {
    height: auto;
    width: auto;
    margin: 0.2em;
    color: white;
    background-color: var(--col-accent2-ddd);
}
/* color name */
#nac_arty_col_name {    
    padding: 0.3em 0.5em;    
    width: auto;
    font-weight: 500;
    text-align: center;
}

/* -- Percentage Match -- */
#nac_perc_match {
    margin-top: 0.2em;
}

/* --------------- color hue --------------- */
#nac_adv_col_hue, #nac_adv_contrast, #nac_adv_col_name {
    height: auto;
    margin: 0;
}
.nac-adv-cont-1 > * {
    text-align: center;
}
#nac_adv_col_hue_text {
    padding: 0.3em 0.5em;
    margin-bottom: calc(2 * var(--padd-stand));
}

/* */
.it-cont-ad-2-m-n-d {
    height: 500px;
    width: 100%;
    background-color: rgba(255,255,255,0.7);
}