/*
  ========================================
  Quiz - Color Names
  ========================================
*/
/* -------------- 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: 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;
    display: none;
}
@media all and (min-width: 768px) { 
    #it_cont_ad_1 {
        display: block;
        background: rgba(255, 255, 255, 0.5);
    }
}

.it-title-inline {
    text-align: center;
}

/* -------------- whole table with cards -------------- */
:root {
    --grid-tab-overview-cols: repeat(3, 33.33%);
    --grid-tab-overview-rows: auto 6em auto 0 auto;
    --grid-tab-overview-names:  'qnc-qnum qnc-sett qnc-sco'
                                'qnc-cname qnc-cname qnc-cname'                       
                                'qnc-csw qnc-csw qnc-csw'
                                'qnc-csw-names qnc-csw-names qnc-csw-names'                                
                                'qnc-button qnc-button qnc-button';

    --padd-card-col: 10px;
}
@media all and (min-width: 768px) { 
    :root {
        --height-card-img: calc(var(--height-page) - 4.5em - 2em - 6.5em - 4 * var(--padd-stand));
        --grid-tab-overview-cols: repeat(3, 33.33%);
        --grid-tab-overview-rows: 4.5em calc(0.5 * var(--height-card-img)) calc(0.5 * var(--height-card-img)) 2em 6.5em;
        --grid-tab-overview-names: 'qnc-qnum qnc-sett qnc-sco'
                                    'qnc-cname qnc-cname qnc-cname'
                                    'qnc-csw qnc-csw qnc-csw'
                                    'qnc-csw-names qnc-csw-names qnc-csw-names'
                                    'qnc-button qnc-button qnc-button';

        --padd-card-col: 20px;
    }
    @media all and (orientation: portrait) {
        :root {
            --grid-tab-overview-cols: repeat(3, 33.33%);
            --grid-tab-overview-rows: 4.5em 8em 12em 3.5em 6.5em;
            --grid-tab-overview-names: 'qnc-qnum qnc-sett qnc-sco'
                                        'qnc-cname qnc-cname qnc-cname'
                                        'qnc-csw qnc-csw qnc-csw'
                                        'qnc-csw-names qnc-csw-names qnc-csw-names'
                                        'qnc-button qnc-button qnc-button';
    
            --padd-card-col: 20px;
        }
    }
}

.nac-overview-cont {
    position: relative;
    display: grid;
    padding: 1.5em;
    grid-template-columns: var(--grid-tab-overview-cols);
    grid-template-rows: var(--grid-tab-overview-rows);
    grid-template-areas: var(--grid-tab-overview-names);
    background-color: white;
    background-image: url('/images/quiz/coloful_drops.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
@media all and (min-width: 768px) {
    .nac-overview-cont {
        padding: 1em;
    }
}
.nac-overview-cont > * {
    height: 100%;
    width: 100%;
    z-index: 1;
}
.qnc-qnum {
    grid-area: qnc-qnum;
}
.qnc-sett {
    grid-area: qnc-sett;
}
.qnc-sco{
    grid-area: qnc-sco;
}
.qnc-cname {
    grid-area: qnc-cname;
    width: auto;
}
.qnc-csw {
    grid-area: qnc-csw;
    padding: 0.5em;
}
.qnc-csw-names {
    grid-area: qnc-csw-names;
}
.qnc-button {
    grid-area: qnc-button;
}

/* ---------- Score ---------- */ 
.qnc-qnum, .qnc-sett, .qnc-sco {
    padding: 0.5em;
}
@media all and (min-width: 768px) {
    .qnc-qnum, .qnc-sett, .qnc-sco {
        padding: 0;
    }
}

.qnc-qnum, .qnc-sett, .qnc-sco {
    display: none;
}

.qnc-qnum-cont {
    text-align: center;
}

/* ---------- Difficulty Level ---------- */ 
#qnc_lvl {
    padding: 0.5em;
    background-color: #FFFFFFCC;
}

#qnc_lvl h4 {
    text-align: center;
    color: var(--col-text);
}

#leveltype {
    font-size: 0.95em;
    font-family: "Montserrat";
    font-weight: 600;
    text-align: center;
    width: 12em;
    padding: 0.3em;
    margin-top: 0.2em;
    border-radius: 0.3em;
    border: 2px solid var(--col-accent2-dark);
}

/* ---------- Color Names ---------- */ 
.qnc-csw-names {
    display: none;
}
@media all and (min-width: 768px) {
    .qnc-csw-names {
        display: flex;
    }
}

.qnc-cname {
    justify-content: flex-end;
}
#qnc_cname {
    font-size: 1.3em;
    line-height: 1.5;
    background-color: #FFFFFFAA;
}

.qnc-csw-cont {
    width: auto;
    padding: 0.5em;
    text-align: center;
    display: none;
}
@media all and (min-width: 768px) {
    .qnc-csw-cont {
        width: 20%;
    }
}

/* -- Each Color Card -- */
.nac-col-card {
    width: 7em;
    height: 7em;
    margin: 0.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: 12vw;
            height: 12vw;
            max-width: 10em;
            max-height: 10em;
        }
    }
}

/* ----------- icons ----------- */
.qnc-icon {
    background: none;
    position: absolute;    
}

/* ----------- action button ----------- */
.qnc-button > * {
    margin: 0.3em!important;
}

#qnc_btn_new {
    display: none;
    margin: 0.5em!important;
}

#qnc_btn_start {
    margin: 15vh auto 0.5em auto!important;
}
@media all and (min-width: 768px) {
    #qnc_btn_start {
        margin: 0.5em!important;
    }
}

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

/* --------- background ---------- */
#video_bg_quiz {
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 0.5em;
    object-fit: cover;
    position: absolute;
    right: 0;
    bottom: 0;
}

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