/* -------------- adjusting for right bar -------------- */
.it-page-cont-0 {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 250px auto 4.5em 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: auto auto;
        grid-template-areas: '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 auto auto;
            grid-template-areas: 'it_cont_ad_1'
                                'it-page-search' 
                                'it-page-overview';
        }
    }
}
.it-page-title {
    grid-area: it-page-title;  
}
.it-page-search {
    grid-area: it-page-search;  
    flex-wrap: nowrap;
}
.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;
}

.it-cont-ad-1 {
    display: flex;
    background: rgba(255, 255, 255, 0.5);
}

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

.it-title-inline {
    width: auto;
}

/* -------------- whole table -------------- */
:root {
    --aac-grid-cols-ana-page: 100%;
    --aac-grid-rows-ana-page: auto auto auto auto auto auto auto;
    --aac-grid-cols-ana-names: 'aac-main-col-cont'
                                'aac-part-adj'
                                'aac-part4'
                                'aac-part3'
                                'aac-part2'
                                'aac-part6'
                                'aac-part7';
}
@media all and (min-width: 768px) {
    :root {
        --aac-grid-cols-ana-page: 25% 25% 25% 25%; /* 4 columns */
        --aac-grid-rows-ana-page: auto auto auto auto; /* shades - combos */
        --aac-grid-cols-ana-names: 'aac-main-col-cont aac-part-adj aac-part3 aac-part4'
                                    'aac-part2 aac-part2 aac-part2 aac-part2'
                                    'aac-part6 aac-part6 aac-part6 aac-part6'
                                    'aac-part7 aac-part7 aac-part7 aac-part7';
    }
}

.aac-overview-cont {
    height: auto;
    display: grid;
    grid-template-columns: var(--aac-grid-cols-ana-page);
    grid-template-rows: var(--aac-grid-rows-ana-page);
    grid-template-areas: var(--aac-grid-cols-ana-names);
}
.aac-overview-cont-1 {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 2em auto;
    padding: 1em;
    margin: 0;
    background: rgba(255, 255, 255, 0.5);
    
    /*border: 1px solid blue;*/
}
@media all and (min-width: 768px) {
    .aac-overview-cont-1 {
        background: transparent;        
    }
}
.aac-overview-cont-1 > * {
    /*border: 1px solid red;*/
}

/* swatch */
.aac-main-col-cont {
    grid-area: aac-main-col-cont;
}
/* combos */
.aac-part2 {
    grid-area: aac-part2;
}
/* tints */
.aac-part3 {
    grid-area: aac-part3;
}
/* shades */
.aac-part4 {
    grid-area: aac-part4;
}
.aac-part-adj {
    grid-area: aac-part-adj;
    height: var(--ctrl-whole-height);
}
.aac-part6 {    
    grid-area: aac-part6;
}
.aac-part7 {    
    grid-area: aac-part7;  
    grid-template-rows: 2em auto auto;
    /*border: 1px solid red; */
}

/* -------------- hex, name & swatch -------------- */
/* All */
.aac-main-col-cont {
    background: rgba(255, 255, 255, 0.5);
}
@media all and (min-width: 768px) {
    .aac-main-col-cont {
        background: transparent;
    }
}

.aac-main-col-cont > * {
    margin: var(--padd-stand) auto;
    /*border: 1px solid black;*/
}

/* Hue row */
.aac-hue {
    display: none;
}
@media all and (min-width: 768px) {
    .aac-hue {
        display: flex;
    }
}
.aac-hue > * {
    margin: auto var(--padd-stand);
}

/* title */
#aac-artyclick-name, #aac-perc-match {
    line-height: auto;
    padding: 0;
    text-align: center;
}

/* swatch */
.aac-swatch-sub {
    height: 12vh;
    width: 70vw;
    max-height: 280px;
    max-width: 280px;
    border-radius: calc(1 * var(--padd-stand));
}
@media all and (min-width: 768px) {
    .aac-swatch-sub {
        height: 18vw;
        width: 18vw;
        border-radius: 50%;
    }
}

/* hue swatch */
.aac-hue-swatch {
    height: 2.5em;
    width: 2.5em;
    border-radius: 50%;
}

/* -------------- controls ---------------- */
.aac-overview-shades-cotrols {
    height: 23em;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(3, auto 2em auto) auto;
    grid-template-areas: 'ctrl-val-title ctrl-val-title'
                         'ctrl-val ctrl-val'
                         'ctrl-val-l ctrl-val-d'
                         'ctrl-sat-title ctrl-sat-title'
                         'ctrl-sat ctrl-sat'
                         'ctrl-sat-l ctrl-sat-d'
                         'ctrl-hue-title ctrl-hue-title'
                         'ctrl-hue ctrl-hue'
                         'ctrl-hue-l ctrl-hue-d'
                         'ctrl-button-cont ctrl-button-cont';
}
@media all and (min-width: 768px) {
    .aac-overview-shades-cotrols {
        height: 30em;
    }
}
.ctrl-val {
    grid-area: ctrl-val;
}
.ctrl-sat {
    grid-area: ctrl-sat;
}
.ctrl-hue {
    grid-area: ctrl-hue;
}
.ctrl-val-title {
    grid-area: ctrl-val-title;
}
.ctrl-sat-title {
    grid-area: ctrl-sat-title;
}
.ctrl-hue-title {
    grid-area: ctrl-hue-title;
}
.ctrl-val-l {
    grid-area: ctrl-val-l;
}
.ctrl-sat-l {
    grid-area: ctrl-sat-l;
}
.ctrl-hue-l {
    grid-area: ctrl-hue-l;
}
.ctrl-val-d {
    grid-area: ctrl-val-d;
}
.ctrl-sat-d {
    grid-area: ctrl-sat-d;
}
.ctrl-hue-d {
    grid-area: ctrl-hue-d;
}
.ctrl-button-cont {
    grid-area: ctrl-button-cont;
}

.ctrl-title {
    height: 100%;
    /*position: relative;*/
}
.ctrl-title h5 {
    /*position: absolute;*/
    bottom: 0.5em;
}

.ctrl-l, .ctrl-h {
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
}
.ctrl-l p {
    position: absolute;
    top: 0.3em;
    left: 0.5em;
}
.ctrl-h p {
    position: absolute;
    top: 0.3em;
    right: 0.5em;
}
  
/* whole slider container */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
}
.slidecontainer {
    width: 100%;
    margin: auto 0;
}
.slider {
    width: 65vw; 
    height: 2.2em;
    background: none;
    outline: none; 
}
@media all and (min-width: 768px) {
    .slider {
        width: 90%;
        height: 1.5em;
    }
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 2.2em; 
    height: 2.2em;
    border-radius: 50%;
    border: none;
    background: var(--col-accent3);
    cursor: pointer;
-webkit-box-shadow: var(--shadow-card-lev1);
    -o-box-shadow: var(--shadow-card-lev1);
       box-shadow: var(--shadow-card-lev1);
}
.slider::-moz-range-thumb {
    width: 2.2em; 
    height: 2.2em;
    border-radius: 50%;
    border: none;
    background: var(--col-accent3);
    cursor: pointer;
  -moz-box-shadow: var(--shadow-card-lev1);
       box-shadow: var(--shadow-card-lev1);
}
@media all and (min-width: 768px) {
    .slider::-webkit-slider-thumb {
        width: 1.5em; 
        height: 1.5em;
    }
    .slider::-moz-range-thumb {
        width: 1.5em; 
        height: 1.5em;
    }
} 

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 1em;
    border: none;
    background: var(--col-body-bg);

 -webkit-box-shadow: var(--shadow-card-inset-lev1);
      -o-box-shadow: var(--shadow-card-inset-lev1);
         box-shadow: var(--shadow-card-inset-lev1);
}
input[type=range]::-moz-range-track {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 1em;
    border: none;
    background: var(--col-body-bg);

    -moz-box-shadow: var(--shadow-card-inset-lev1);
      -o-box-shadow: var(--shadow-card-inset-lev1);
         box-shadow: var(--shadow-card-inset-lev1);
}


/* "Adjust" & "Reset" bottons */
#aac_button_cont {
    padding: var(--padd-stand);
    margin-top: 1.5em;
}
@media all and (min-width: 768px) {
    #aac_button_cont {
        margin-top: auto;
    }
    @media all and (orientation: portrait) {
        #aac_button_cont {
            flex-direction: column;
        }
    }
}

#aac_button_cont > * {
    margin: var(--padd-stand);
}

/* -------------- shades group - class -------------- */
.aac-overview-shades {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: repeat(10, 10%);
}

/* each card */
.aac-card-shade {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 5em auto;
    grid-template-rows: 3em;
}

/* card names */
.aac-card-shade-name {
    align-items: center;
    margin: auto;
    margin-right: 0;
}
.aac-card-shade-name p {
    margin: auto;
}

/* card swatches */
.aac-card-shade-swatch {
    height: 85%;
    width: 85%;
    margin: auto;
}
.aac-card-shade-swatch:hover {
    cursor: pointer;
}

/* -------------- composition -------------- */
.aac-part6 {
    /*border: 1px solid red;*/
}
.aac-compo-table {
    border-collapse: collapse;
}
.aac-compo-table td, .aac-compo-table th {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--col-accent2);
}
.aac-compo-table th h5 {
    font-weight: 600;
}
.aac-compo-table p {
    padding: 0.3em var(--padd-stand);
}

.aac-compo-table tr:hover {
    background: var(--col-accent1-ll);
}

/* --------------- combos -------------- */
.aac-part2 {
    width: 100%;
}
.aac-part2 > * {
    width: 100%;
}
.aac-part2-1 {
    width: 100%;
}
@media all and (min-width: 768px) {
    .aac-part2-0 {
        flex-wrap: nowrap;
    }
}

.aac-part2-1 .aac-card-shade {
    grid-template-rows: 4.5em;
}

.aac-part2 h5 {
    margin-top: var(--padd-stand);
}

/* ------------- color palettes -------------- */
.aac-col-pal-cont {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(4, 25%);
}
@media all and (min-width: 768px) {
    .aac-col-pal-cont {
        display: grid;
        grid-template-columns: repeat(4, 25%);
        grid-template-rows: 100%;
    }
}

.aac-overview-col-pal {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 3em repeat(5, auto);
    /*border: 1px solid red;*/
}

/* -------------- description -------------- */
.it-desc-columnista {
    /*column-count: 1;*/
}

.aac-desc-img-cont {
    display: flex;
    justify-content: center;
}

.aac-desc-img {
    width: 100%;
    height: auto;
    max-width: 500px;
    max-height: 10vh;
}
.aac-desc-img-non-stretch {
    width: 18em;
    height: auto;
    object-fit: contain;
}
@media all and (min-width: 768px) {
    .aac-desc-img-non-stretch {
        max-width: 40vw;
    }
}
#aac_desc_img_2 {
    width: 15em;
}

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