/* -------------- 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;
    text-align: center;
}
.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);
}

.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: 100%;
    --aac-grid-rows-ana-page: 20em ;
    --aac-grid-cols-ana-names: 'example-container'
                                'aac-part-adj-color'
                                'aac-part-adj-pos'
                                'aac-part-adj-ani'
                                'code-container';
}
@media all and (min-width: 768px) {
    :root {
        --height-card-img: calc(var(--height-page) - 4 * var(--padd-stand) - 16em);
        --aac-grid-cols-ana-page: 33.3% 33.3% 33.3%; /* 3 columns */
        --aac-grid-rows-ana-page: var(--height-card-img) 16em; /* shades - combos */
        --aac-grid-cols-ana-names: 'example-container example-container code-container'
                                    'aac-part-adj-color aac-part-adj-pos aac-part-adj-ani';
    }
    @media all and (orientation: portrait) {
        :root {
            --aac-grid-rows-ana-page: 40vh 16em;
        }
    }
}

.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-color {
    grid-area: aac-part-adj-color;
}
/* border controls */
.aac-part-adj-pos {
    grid-area: aac-part-adj-pos;
}
/* color controls */
.aac-part-adj-ani {
    grid-area: aac-part-adj-ani;
}


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


/* --------- Example Container ---------- */
@keyframes ani_gradient {
	0% {
		background-position: 0% 0%;
	}
	50% {
		background-position: 100% 100%;
	}
	100% {
		background-position: 0% 0%;
	}
}


/* ------------- 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%);
}


/* -------------- suggestions -------------- */
.aac-hue-swatch {
    margin: 0.3em;
}
/* mobile */
@media all and (max-width: 768px) {
    #grad_bg_sug_cont > :nth-child(1), #grad_bg_sug_cont > :nth-child(2) {
        display: none;
    }
}


/* --------------- range slider ---------------- */
/* Overlays */
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	cursor: pointer;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-state-default, .ui-widget-content {
    border: none;    
    cursor: pointer;
    background: var(--col-accent3)!important;
}
#slider_pos_dual {
    height: 1.5em;
    width: 90%;
    margin: 0.2em auto;
    border-radius: 1em;
    border: none;
    background: var(--col-body-bg)!important;    
    -webkit-box-shadow: var(--shadow-card-inset-lev1);
    -o-box-shadow: var(--shadow-card-inset-lev1);
       box-shadow: var(--shadow-card-inset-lev1);
}
.ui-corner-all {
    border-radius: 1em;
}
.ui-slider-horizontal .ui-slider-handle {
    width: 1.8em;
    height: 1.8em;
    top: -0.2em;
    margin-left: -.9em;
}
@media all and (min-width: 768px) {
    .ui-slider-horizontal .ui-slider-handle {
        width: 1.3em;
        height: 1.3em;
        top: -0.15em;
        margin-left: -.65em;
    }
    #slider_pos_dual {
        height: 1.1em;  
    }
}


/* ----------------- 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: auto auto;
        grid-template-columns: repeat(2, 50%);
    }
}

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

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

#container_ex1 {
    background: linear-gradient(150deg, #66ffc4 30%, #42FFFF 55%, #0565ff 100%);
    background-size: 200% 200%;
    animation: ani_gradient 5.8s ease infinite; 
}

#container_ex2 {
    background: linear-gradient(30deg, #FFF261 0%, #FF6161 75%, #FF6190 100%);
    background-size: 200% 200%;
    animation: ani_gradient 5.8s ease infinite; 
}

#container_ex3 {
    background: linear-gradient(60deg, #6AE2E0 30%, #C8E854 70%);
    background-size: 200% 200%;
    animation: ani_gradient 5.8s ease infinite; 
}

#container_ex4 {
    background: linear-gradient(-60deg, #FF6BAB 0%, #FF52FF 24%, #2626FF 65%, #00D5FF 100%);
    background-size: 200% 200%;
    animation: ani_gradient 5.8s ease infinite; 
}