/* -------------- adjusting for right bar -------------- */
.it-page-cont-0 {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 250px auto 0 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-page-overview h5 {
    text-align: center;
}

/* -------------- 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: 50% 50%;
    --aac-grid-rows-ana-page: 10em ;
    --aac-grid-cols-ana-names: 'example-container example-container'
                                'aac-part-adj-shape aac-part-adj-border'
                                'aac-part-adj-col aac-part-adj-font'
                                'code-container code-container';
}
@media all and (min-width: 768px) {
    :root {
        --height-card-img: calc(var(--height-page) - 4 * var(--padd-stand) - 20em);
        --aac-grid-cols-ana-page: 25% 25% 25% 25%; /* 4 columns */
        --aac-grid-rows-ana-page: var(--height-card-img) 20em; /* shades - combos */
        --aac-grid-cols-ana-names: 'example-container example-container code-container code-container'
                                    'aac-part-adj-shape aac-part-adj-border aac-part-adj-col aac-part-adj-font';
    }
    @media all and (orientation: portrait) {
        :root {
            --aac-grid-rows-ana-page: 40vh 20em;
        }
    }
}

.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: 1.5em auto;
    padding: 0.5em;
    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 > * {
    margin-top: 0;
}

/* button */
.example-container {
    grid-area: example-container;
}

/* code snippet */
.code-container {
    grid-area: code-container;
}

/* chape controls */
.aac-part-adj-shape {
    grid-area: aac-part-adj-shape;
}
/* border controls */
.aac-part-adj-border {
    grid-area: aac-part-adj-border;
}
/* color controls */
.aac-part-adj-col {
    grid-area: aac-part-adj-col;
}
/* font controls */
.aac-part-adj-font {
    grid-area: aac-part-adj-font;
}


/* ---------- adjustement to previous ------------ */
.css-overview-cotrols {
    width: 100%;
    
}
.ctrl-title {
    margin-top: 1em;
}
@media all and (max-width: 768px) {
    .slider {
        width: 35vw; 
    }
}


/* --------- Button Example ---------- */
.example-container {
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-direction: column;  
}
.button {
    cursor: pointer;
}


/* ------------- Code container -------------- */
.code-container {
    background: rgb(18, 18, 32);
}
@media all and (max-width: 768px) {
    .code-container {
        margin-top: 1em;
    }
}
.code-container p {
    color: white;
}


/* -------------- color picker and cover -------------- */
.it-color-picker-cont {
    position: relative;
    height: 1.3em;
    width: 3em;
}

.it-color-picker { 
    top: 50%; 
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


/* ----------------- Examples ------------------ */
.it-css-templates-cont {
    display: grid;
    width: 100%;
    grid-template-rows: repeat(4, 25%);
    grid-template-columns: 100%;
}
@media all and (min-width: 768px) {
    .it-css-templates-cont {
        grid-template-rows: 100%;
        grid-template-columns: repeat(4, 25%);
    }
}

.css-tempale-ex {
    width: 90%;
    height: 90%;
}

.container-example {
    display: flex;
    width: 100%;
    height: 10em;
    justify-content: center;
    align-items: center;
}

#button_ex1 {
    padding: 0.2em 1em;
    border-radius: 1.05em 1.05em 1.05em 1.05em;
    border: 3px solid #FFFFFF;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2), 8px 8px 8px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.7), 0px 0px 4px rgba(0,0,0,0.1), 0px 0px 8px rgba(0,0,0,0.2), -4px 4px 4px rgba(0,0,0,0.1), -8px 8px 8px rgba(0,0,0,0.15), 1px -1px 1px rgba(255,255,255,0.7), 0px 0px 4px rgba(0,0,0,0.1), 0px 0px 8px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2), 8px 8px 8px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.7), 0px 0px 4px rgba(0,0,0,0.1), 0px 0px 8px rgba(0,0,0,0.2), -4px 4px 4px rgba(0,0,0,0.1), -8px 8px 8px rgba(0,0,0,0.15), 1px -1px 1px rgba(255,255,255,0.7), 0px 0px 4px rgba(0,0,0,0.1), 0px 0px 8px rgba(0,0,0,0.2);
    background: #11246E;
    color: #FFFFFF;
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: 2.4;
    font-family: "Montserrat";
    cursor: pointer;
}
@media all and (min-width: 768px) {
    #button_ex1 {
        font-size: 0.9em;
    }
}
#button_ex1:hover {
    background: #0027C2;
}
#container_ex1 {
    background: #94D9E5;
}

#button_ex2 {
    padding: 0.3em 0.75em;
    border-radius: 0.45em 0.45em 0.45em 0.45em;
    border: 4px double #11246E;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: #F6F6F6;
    color: #1C302C;
    font-size: 1.1em;
    font-weight: 900;
    letter-spacing: 3.5;
    font-family: "Montserrat";
    cursor: pointer;
}
@media all and (min-width: 768px) {
    #button_ex2 {
        font-size: 0.9em;
    }
}
#button_ex2:hover {
    background: #FFFFFF;
}
#container_ex2 {
    background: #B3D6CB;
}

#button_ex3 {
    padding: 0.2em 1.5em;
    border-radius: 0.9em 0em 0.9em 0em;
    border: 0px solid #000485;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2), 8px 8px 8px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.7), 0px 0px 4px rgba(0,0,0,0.1), 0px 0px 8px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.1), -2px 2px 2px rgba(0,0,0,0.15), 1px -1px 1px rgba(255,255,255,0.7), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 2px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2), 8px 8px 8px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.7), 0px 0px 4px rgba(0,0,0,0.1), 0px 0px 8px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.1), -2px 2px 2px rgba(0,0,0,0.15), 1px -1px 1px rgba(255,255,255,0.7), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 2px rgba(0,0,0,0.2);
    background: #D1FFA3;
    color: #000485;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 3;
    font-family: "Montserrat";
    cursor: pointer;
}
@media all and (min-width: 768px) {
    #button_ex3 {
        font-size: 0.9em;
    }
}
#button_ex3:hover {
    background: #BCFF70;
}
#container_ex3 {
    background: #E0E8FF;
}

#button_ex4 {
    padding: 0.4em 1.25em;
    border-radius: 1.05em 1.05em 1.05em 1.05em;
    border: 0px solid #290099;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2), 2px 2px 2px rgba(0,0,0,0.1), -1px -1px 1px rgba(255,255,255,0.7), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 2px rgba(0,0,0,0.2), -1px 1px 1px rgba(0,0,0,0.1), -2px 2px 2px rgba(0,0,0,0.15), 1px -1px 1px rgba(255,255,255,0.7), 0px 0px 1px rgba(0,0,0,0.1), 0px 0px 2px rgba(0,0,0,0.2);
    background: linear-gradient(113deg, #8FFFD4, #8ACCFF);
    color: #290099;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 1.5;
    font-family: "Montserrat";
    cursor: pointer;
}
@media all and (min-width: 768px) {
    #button_ex4 {
        font-size: 0.9em;
    }
}
#button_ex4:hover {
    background: #8FFFE9;
}
#container_ex4 {
    background: #EEEEEE;
}