
#surveysTable{

    margin-top: 100px;
}



/* Filter container styles*/

.dropdown-labels, .label-row{

    font-size: 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    font-weight: 900;
}


.dropdown-filter{
    border: 2px solid #a8dfb0;
    border-radius: 3px;
    
    font-size: 18px;
    height: 40px;
}
.go-btn{
    margin-top: 50px;
    background-color: #801db9;
    padding: 10px 10px;
    font-size: 16px;
    font-weight: 800;
    border: none !important;
    border-radius: 5px;
    color: #f7f3f3;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.5s ease, transform 0.5s ease;
    border-radius: 15px;
    padding: 10px 15px;
    border: 0px;

}

.reset-btn{

    background-color: #a8dfb0;

    font-size: 16px;
    font-weight: 800;
    border: none !important;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.5s ease, transform 0.5s ease;
    border-radius: 15px;
    padding: 10px 15px;
    border: 0px;


}

.reset-btn:hover{

    transform: scale(1.03);
}


.go-btn:hover{

    transform: scale(1.03);
}

#sliderWrap, #ageSliderWrap { 
    
    width: 360px; 
    margin-bottom: 50px;
}

#ageSliderWrap{
    margin-bottom: 30px;
}

.label-row{
    font-weight: 600;

}



.noUi-tooltip {
    bottom: -35px !important;
    top: auto !important;
    background: #333;
    color: white;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
}


#chartWrapper{
    height: 90vh;
    /* overflow-y: auto; */
}



#ageSlider .noUi-connect {
    background: #801db9;  
}



#ageSliderQuestion .noUi-connect {
    background: #801db9;  
}

#yearSlider .noUi-connect {
    background: #801db9;  
}
#chartContainer{
    height: inherit;
}

.ts-wrapper.multi .ts-control {
    max-height: 125px;  
    overflow-y: auto;
  }



#filtersContainer{
    padding: 30px 35px;
    height: fit-content;
    background-color: #f7f0ff;
    background-color: linear-gradient( #ebd9fe, #dbd0e6);
    /* border: 1px solid black; */
    box-shadow: 0 4px 10px 5px rgba(0,0,0,0.1); 
    border-radius: 5px;
}



/*
Table style for "Explore Survey Questions"
*/
#tableWrapper{

    height: 90vh;
    /* overflow: auto; */

}

#tableWrapper thead th{
    position: sticky;
    top:0;
    z-index: 10;
}


#chartToggle, #tableToggle{
    margin: 15px;
    font-weight: bold;
 }
 #toggleSwitch, #toggleSwitchQuestion{
    height: 18px;
    width: 33px;

 }
 #toggleSwitch:checked, #toggleSwitchQuestion:checked{
    height: 18px;
    width: 33px;
    color: #ccc;
    background-color: #801db9;
 }



#dataTable{
    height: 80vh;
    margin-bottom: 60px;
    
}

#dataTable td {
    vertical-align: top !important;
    font-size: 11.5px;
}

#dataTable td.domain-span{
    /* color: white; */
    font-size: 13px;
    font-weight: 800;
    /* border-right: 1px solid gray; */
    /* background-color: #baaff0; */

}


#dataTable td.survey-span{
    font-size: 13px;
    font-weight: 800;
}

tbody tr:nth-child(odd) td.question-cell {

    background-color: #f2f2f2;
    
}

tbody tr:nth-child(even) td.question-cell {

    background-color: #ffffff;
    
}


tbody tr:nth-child(odd) td.year-cell {

    background-color: #f2f2f2;
    
}

tbody tr:nth-child(even) td.year-cell {

    background-color: #ffffff;
    
}



.ag-theme-alpine .ag-header{

    background: linear-gradient(135deg, #b1d1ef 0%, #7ab3ec 100%);
}

.ag-theme-alpine{
    --ag-odd-row-background-color: #fff;
}



#dataTable{
    height: 80vh;
    margin-bottom: 60px;
    
}

#dataTable td {
    vertical-align: top !important;
    font-size: 13px;
}

#dataTable td.domain-span{
    /* color: white; */
    font-size: 16px;
    font-weight: 800;
    /* border-right: 1px solid gray; */
    /* background-color: #baaff0; */

}


#dataTable td.survey-span{
    font-size: 16px;
    font-weight: 800;
}

tbody tr:nth-child(odd) td.question-cell {

    background-color: #f2f2f2;
    
}

tbody tr:nth-child(even) td.question-cell {

    background-color: #ffffff;
    
}


tbody tr:nth-child(odd) td.year-cell {

    background-color: #f2f2f2;
    
}

tbody tr:nth-child(even) td.year-cell {

    background-color: #ffffff;
    
}


.grp-pin{
    position: absolute;
    z-index: 20;
    pointer-events: none;
    box-sizing: border-box;
    background: #fcfcfc;
    background: #ffffff;

    padding: 10px;
    border-bottom: 1px solid rgb(180, 180, 180);

    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    color: black  !important;
    opacity: 0; 
    transition: opacity 0.15s; 
    display: block;
}


.grp-pin-qts{
    position: absolute;
    z-index: 20;
    pointer-events: none;
    box-sizing: border-box;
    background: #fcfcfc;
    background: #ffffff;
    font-size: 12px;

    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    color: black  !important;
    opacity: 0; 
    transition: opacity 0.15s; 
    display: block;
}

#pinDomain,#pinSurvey,#pinMeasure{
    text-align: center;

    font-size: .87rem;
}

#pinDomainQts,#pinSurveyQts,#pinMeasureQts{
    text-align: center;
    padding: 10px;
    font-size: .87rem;
}


.cell-domain, .cell-survey , .cell-measure, .cell-survey-qts , .cell-measure-qts{
    text-align: center;
}

/* #groupBar{
    display:flex;
    align-items: center;
    gap:6px;
}
 */

.cell-domain-qts, .cell-measure-qts{
    text-align: center !important;
    display:flex !important;
    align-items: center !important;

    padding: 12px !important;
}

#surveysChart{
    background-color: #ffffff;
}