/* styles.css */

/* Change font */
@import url('https://fonts.googleapis.com/css2?family=Radio+Canada+Big:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zain:wght@400;700&display=swap');

@font-face {
    font-family: 'myFont';
    /* src: url('Moderne.ttf') format('truetype'); */
    src: url('Klavika.otf') format('opentype');
}

@font-face {
    font-family: 'bodyFont';
    src: url('Moderne.ttf') format('truetype');
}


@font-face {
    font-family: 'Glance';
    src: url('Glance.otf') format('opentype');
}

@font-face {
    font-family: 'Eudoxus';
    src: url('EudoxusSansMedium.ttf') format('truetype');
}


/* Change font */
body {
    background-color: #f3f3f3;  
    font-family: 'Eudoxus', sans-serif;
    justify-content: center;
    transition: opacity 1s ease-in;

}

.dash-debug-menu__content {
    display: none !important;
  }

.dash-debug-menu--closed {
    display: none !important; /* Hides the element */
}

.dash-debug-menu__outer--closed {
    display: none !important;
}


body.fade-in {
    opacity: 1;
}

.navbar {
    background-color: #dddddd !important;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 3vh;
    height: 10vh !important ;
    font-size: 12px;
}

.nav {
    color: #4b4b4b !important;
    font-size: 20px;
    padding: 2vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

/* Hover */
.navbar .nav-link:hover {
    color: #110a66 !important;
    font-size: 22px;
    padding: 2vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

.nav-active {
    color: #a0a0a0 !important; 
    font-size: 22px;
    padding: 2vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

.pageContent {
    background-color: #e9e9e9;
    flex: 1; /* Allow this div to grow and take up available space */
    min-height: 80vh;
    margin-left: 2vw;
    margin-right: 2vw;
}

.break {
    width: 50vw;
    height: 1vh;
    margin: auto;
    background-color: #dddddd;
    margin-bottom: 5vh;
}

.footer {
    background-color: #dddddd; /* Background color */
    color: #4b4b4b; /* Text color */
    text-align: center; /* Center the text */
    font-size: 12px; /* Font size */
    letter-spacing: 2px; /* Spread out characters */
    padding: 0; /* Remove padding */
    display: flex; /* Use Flexbox */
    align-items: center; /* Vertically center text */
    justify-content: center; /* Horizontally center text */
    position: relative;
    padding: 1vh;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-bottom: 3vh;
}

.custom-dropdown .Select-control{
    border: 1px solid #ccc;
}

.custom-dropdown .Select-placeholder{
    color: #ccc;
}

.custom-dropdown {
    width: 20vw;
    margin-left: 1vw;
    margin-right: 1vw;
    padding-top: 2vh; 
}

.dropdownContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 5px;
}

/* If you want to specifically target the instance with all classes */
.SingleDatePickerInput.SingleDatePickerInput_1.SingleDatePickerInput__withBorder.SingleDatePickerInput__withBorder_2 {
    width: 13vw !important; /* Adjust the width as needed */
    text-align: center;
}

.DateInput.DateInput_1 {
    width: 13vw !important; /* Set the width to 4% of the viewport width */
    text-align: center;
  }