body {
    /* height: 100%; */
    margin: 0;
    padding: 0;
    color: #333;
    font-family: 'Noto Sans', sans-serif;
}

html {
    scroll-behavior: smooth;
    /* Smooth scrolling */

}

body {
    margin-top: 180px;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 300;


}

html,
body {
    /* height: 100%; */
    margin: 0;
}

header .logo-link{
    display: block;
    transition: all 0.3s ease;
}



.nav-logo{
    display: none;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);

}

.nav-logo a{
    padding: 0;

}

.nav-logo img{
    height: 38px;
    width: 68px;
    display: block;
}

body.scrolled header .logo-link{
    height: 0;
    padding: 0;
    overflow: hidden;
}

body.scrolled .nav-logo{
    display: block;
}


.nav-tabs{
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1); 
    background-color: #f7f0ff;
    transition: padding 0.3s ease;

}


.logo-name-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: fixed; */
    /* top: 20; */
    /* left: 0;  */
    width: 100%;
    height: 90px;
    /* padding: 10px 20px; */
    background-color: #fff;

  }

  .logo {
    width: 300px; /* Adjust size as needed */
    height: 120px;
  }


.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Ensure full viewport height */
}



.tabs{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.tabs a{
    padding: 10px 16px;
    border: 1px solid #ccc;
    margin: 0 4px;
    text-decoration: none;
    background: #f8f8f8;
    color: #333;
}

.tabs a.active{
    background: #eaeaea;
    font-weight: bold;
}

/* 
#navigationTab{
   
    justify-content: center;

    margin-top: 20px;
    font-weight: bold;
  
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.1); 
    background-color: #f7f0ff;

    gap: 8px;
  

    } */

.navigation-tabs{
    color: #801db9;
    border-radius: 5px;
}

.navigation-tabs:hover{
    color: #000;
}


.page-title{
    font-weight: 900;
}


.introContainer{
    justify-content: center;
}

@media (max-width: 768px) {
    #mainContainer {
        padding: 3rem 3rem; 
    }
}

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