/* Colors */
:root {
    --background-color: #F2F2F2;
    --text-color: #000000;
    --accent-color: #7ed957;
    --button-color: #7ed957;
    --primary-button-text-color: #000000;
    --secondary-color: #d9d9d9;
    --secondary-text-color: #000000;
    --audio-alert-color: #06723e;
    --success-color: #00cc00;
    --alert-color: #ff0000;
    --neutral-color: #ffffff;
    --navbar-text-color: #000000;
}


body{
    background-color: var(--background-color);
    color: var(--text-color);
}

#feedbackOverrideContainer{
    background-color: var(--background-color);
}

#cardContainer{
    background-color: var(--background-color);
}

.videoOverlay{
    /* make very faintly transparent */
    background-color: rgba(255,255,255,0.5);
}

h3{
    /* League Spartan */
    font-family: 'League Spartan';
    font-weight: 800;
    padding: 10px;
}

a{
    color: var(--accent-color)
}
h5{
    /* League Spartan */
    font-family: 'League Spartan';
    padding: 10px;
}

p{
    padding:10px;
}

.full-menu-content li:hover{
    background-color: var(--accent-color);
    color: var(--text-color);
}

.btn, .btn-icon{
    background-color: var(--button-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--primary-button-text-color);
    /* center button */
    margin-left: auto;
    margin-right: auto;
}
/*primary button selected*/
.btn-selected{
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: var(--primary-button-text-color);
    /* center button */
    margin-left: auto;
    margin-right: auto;
}
.btn-secondary{
    background-color: var(--secondary-color) !important;
    color: var(--secondary-text-color);
    /* center button */
    margin-left: auto;
    margin-right: auto;
}
.btn:hover, .btn-icon:hover{
    background-color: var(--success-color);
    border-color: var(--accent-color);
    color: var(--text-color);

}
.modal-dialog, .modal-content{
    background-color: var(--secondary-color);
    color: var(--secondary-text-color);
    display: flex;
}

.modal-title{
    /* League Spartan */
    font-family: 'League Spartan';
    font-weight: 800;
    font-size: 35px;
    /* center text */
    justify-content: center;
    display: inline-flex;
    margin-left: auto;
}
.full-menu-content, .active-menu-button{
    background-color: var(--secondary-color) !important;
    color: var(--secondary-text-color);
    /* slide in from right */
    animation: slideInRight 0.5s;
    -webkit-animation: slideInRight 0.5s;
    /* slide out to right */
    animation: slideOutRight 0.5s;
    -webkit-animation: slideOutRight 0.5s;
}
.alert, .header-box{
    background-color: var(--secondary-color);
    /*vertical center text*/
    display: flex;
    align-items: center;
    /*horizontal center text*/
    justify-content: center;
}

.text-alert-danger{
    color: var(--alert-color);
}

.alert-success, .alert-danger{
    background-color: var(--background-color) !important;
    /* fix to bottom of page */
    position: fixed;
    bottom: 0;
    width: 100%;
    /* slide in from bottom */
    animation: slideInBottom 0.5s;
    -webkit-animation: slideInBottom 0.5s;
    /* slide out to bottom */
    animation: slideOutBottom 0.5s;
    -webkit-animation: slideOutBottom 0.5s;
    background-color: var(--background-color) !important;
    /* make sure no border */
    border: none;

}
thead{
    background-color: var(--accent-color);
}

.card-header{

    padding: 10px;
}
.card-header .displaystats{
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-family: 'Arimo';
    font-size: 15px;
    margin-top: -10px;
    margin-bottom: -10px;
    /*justify all text right*/
    text-align: center;

}

/* General Styles */
h1{
    /* League Spartan */
    font-family: 'League Spartan';
    font-weight: 800;
    font: 55pt;
}

thead{
    /* League Spartan */
    font-family: 'League Spartan';
    font-weight: 800;
    /* border radius is 35px on left side*/
    border: 1px solid var(--accent-color);
    border-top-left-radius: 35px;
    border-top-right-radius: 35px;
    padding: 10px;
}

input[type=text], input[type=password], select{
    /* Josefin Sans */
    font-family: 'Josefin Sans';
    border-width: 1px;
    border-radius: 35px;
    padding: 5px;
    margin: 5px;
    /*give margin to the left of the input*/
    margin-left: 10px;
}

input[type=radio]{
    margin-bottom: 30px;
    /*large checkbox*/
    transform: scale(1.5);
    padding: 10px;
}

input[type=file]{
    /* Josefin Sans */
    font-family: 'Josefin Sans';
    border-width: 1px;
    border-radius: 35px;
    padding: 5px;
    border-color: var(--accent-color);
    /*give margin to the left of the input*/
    margin-left: 10px;
}

select{
    /* Josefin Sans */
    font-family: 'Josefin Sans';
    border-width: 1px;
    border-radius: 35px;
    padding: 5px;
    border-color: var(--accent-color);
    /*give margin to the left of the input*/
    margin-left: 10px;
}

.btn{
    font-family: 'Josefin Sans';
    border-width: 1px;
    border-radius: 35px;
    padding: 15px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    width: 80%;
    height: 100%;
    padding: 10px;
}
.btn-fixed{
    max-width: 250px;
    height: inherit;
    margin-bottom:20px;
}
.btn-icon{
    font-family: 'Josefin Sans';
    border-width: 1px;
    border-radius: 35px;
    padding: 15px;
    margin: 5px;
    /* center icon */
    text-align: center;
    /* center text */
    justify-content: center;
    /* center icon */
    align-items: center;
}
.btn-icon{
    font-family: 'Josefin Sans';
    border-width: 1px;
    border-radius: 35px;
    padding: 15px;
    margin: 5px;
    /* center icon */
    text-align: center;
    /* center text */
    justify-content: center;
    /* center icon */
    align-items: center;
}
.navbar{
    background-color: var(--neutral-color) !important;
    color: var(--navbar-text-color);
}
.navbar-toggler-icon{
    background-image: none !important;
}
.fa-bars{
    color: var(--navbar-text-color);
}
.navbar button{
    background-color: transparent;
    border: none;
}

.footer{
    color: var(--navbar-text-color);
    /* Joefin Sans */
    font-family: 'Josefin Sans';
}

.navbar-brand{
    /* League Spartan */
    color: var(--navbar-text-color);
    font-family: 'League Spartan';
    font-weight: 800;
    font-size: 35px;
}

.modal-dialog, .modal-content{
    border-radius:35px;
    /* fade in and out */
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
}

.full-menu{
    height: 100%;
    width: 100%;
    position: fixed;
    top:0px;
    z-index: 1;
    display: none;
}
.full-menu-background{
    height: 100%;
    width: 100%;
    position: fixed;
    top:0px;
    z-index: 1;
    background-color: rgba(0,0,0,0.6);
    /* fade in */
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s;
    
}
.full-menu-content{
    height: 100%;
    /*border radius is 35px on left side*/
    border-top-left-radius: 35px;
    position: fixed;
    top:0px;
    z-index: 2;
    /*animate in from right*/
    
}
.full-menu-content li{
    /* centered, joesfin sans, no bullets, 35pt font */
    text-align: center;
    font-family: 'Josefin Sans';
    list-style-type: none;
    padding: 10px;
    margin: 10px;
}

.header-box{
    width: 100%;
    margin-bottom: 5vh;
    margin-right: -5px;
    margin-left: 10px;
    padding: 3vh;
    border-radius: 0px;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

.alert{
    margin-top: 5vh;
    margin-bottom: 5vh;
    padding: 5vh;
    border-radius: 0px;
}

.alert-bg{
    background-color: var(--neutral-color) !important;
    color: var(--text-color) !important;
}
.alert-icon{
    /*display an icon on the top left of the alert*/
    float: left;
    margin-left: 50px;
    margin-top: -10vh;
    width: 50px;
    height: 50px;
    /* font size should be 50px */
    font-size: 50px;
    /* circle */
    border-radius: 50%;
}


.alert-danger b{
    color: var(--alert-color);
    font-size: 20px;
}
.alert-success b{
    color: var(--accent-color);
    font-size: 20px;
}

.modal-body{
    padding: 0px;
}

.table-responsive table{
    min-width: 100%;
}

.modal-header{

}
/* Desktop Screens */
@media screen and (min-width: 1024px) {
    .full-menu-content{
        width: 15vw;
        margin-left: 85vw;
        /* animate in from right */
        animation: slide-in-right 0.5s forwards;
        --webkit-animation: slide-in-right 0.5s forwards;
        /* animate out to right */
        animation: slide-out-right 0.5s forwards;
        --webkit-animation: slide-out-right 0.5s forwards;
    }
    .full-menu-content li{
        font-size: 12pt;
    }
    .fixed-btm{
        position: absolute;
        bottom: 5vh;    
        width:75vw;
        max-width: 500px;
    }

    .input-box{
        position: none;
    }
    .input-box input{
        width: 50% !important;
        margin: 0px;
    }
    .alert-audio-100{
        color: var(--audio-alert-color);
        background-color: var(--accent-color);
        padding: 20px;
        margin-top: 20px;
    }
}

/* Adaptive  Screens */
@media screen and (max-width: 1024px) {
    .fixed-btm{
        position: absolute;
        bottom: 5vh;    
        width:90vw;
        max-width: 500px;
    }

    .modal-expanded{
        height: 80vh !important;
        top: 20% !important;
        /* animate from bottom to top */
        -webkit-animation: animatezoom 0.6s;
        animation: animatezoom 0.6s;
    }
    .modal-dialog{
        height: 50vh;
        position: fixed;
        top: 50%;
        width: 90vw;
        margin-left: 5vw;
        /* reset bottom of border radius */
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .full-menu-content{
        width: 90vw;
        margin-left: 10vw;
    }
    .full-menu-content li{
        font-size: 20pt;
    }
    .header-box{
        width: 100%;
        margin-bottom: 5vh;
        margin-right: -5px;
        margin-left: 10px;
        padding: 3vh;
        border-radius: 0px;
    }
    .null-alert
    {
        /* remove width and height, setting them to null */
        width: null !important;
        height: null !important;
    }
    .alert-icon{
        margin-left:5vw;
    }
    .table-responsive table{
        min-width: 90vw;
    }
    .input-box{
        position: absolute;
        bottom: 20px;
        left: 0px;
        right: 0px;
    }
    .input-box input{
        width: 100%;
        margin: 0px;
    }
    .alert-audio-100{
        color: var(--audio-alert-color);
        background-color: var(--accent-color);
        padding: 20px;
        margin-top: 20px;
        margin-right: -8vw;
        margin-left: -8vw;
    }
}

/* hack for bootstrap between 768px and 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .alert-audio-100{
        color: var(--audio-alert-color);
        background-color: var(--accent-color);
        padding: 20px;
        margin-top: 20px;
        margin-right: -6vw;
        margin-left: -6vw;
    }
}



/*animation classes*/
/* fade in and slide up */
.fade-in-up {
    animation: fadeInUp 0.5s ease-in-out;
    -webkit-animation: fadeInUp 0.5s ease-in-out;
}

/* utility classes */
.vh-100 {
    height: 100vh;
}

.vh-50 {
    height: 50vh;
}

.vh-25 {
    height: 25vh;
}

.vh-75 {
    height: 75vh;
}

.vh-5{
    height: 5vh;
}

.vh-10 {
    height: 10vh;
}

.vh-15 {
    height: 15vh;
}

.vh-20 {
    height: 20vh;
}

.vh-30 {
    height: 30vh;
}
.vh-35{
    height: 35vh;
}
.vh-40{
    height: 40vh;
}


.width-100-percent{
    width: 100%;
}

.width-80-percent{
    width: 80%;
    /*centered*/
    margin-left: 10%;
    margin-right: 10%;
}

.align-center{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* form switches */

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  }

.form-switch .form-check-input {
    width: 4em;
    height: 3em;
    margin-left: -2.5em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-color: var(--accent-color)
    background-position: left center;
    border-radius: 2em;
    transition: background-position .15s ease-in-out;
  }

.form-switch label{
    display: inline-block;
    margin-left: 5px;
    padding: 15px;
    font-size: 12pt;
}


input[type="range"]::-webkit-slider-runnable-track {
    background: var(--success-color);
    height: 0.5rem;
  }
  
  /******** Firefox ********/
  input[type="range"]::-moz-range-track {
    background: var(--success-color);
    height: 0.5rem;
  }



  #progressBarContainer{
    background-color: rgba(0,0,0,0.0);
  }

 input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    appearance: none;
    background-color: var(--text-color);
    height: 2rem;
    width: 1rem;    
    margin-top: -5px; /* Centers thumb on the track */
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -5px; /* Centers thumb on the track */
    background-color: var(--accent-color);
    height: 2rem;
    width: 1rem;    
 }

 #signInButtonOAuth {
    /* use google's blue for outline with white background */
    border: 1px solid #4285f4;
    background-color: var(--background-color) !important;
    color: var(--text-color);
 }

 #backkTosignInButton{
    /* use google's blue for outline with white background */
    border: 1px solid var(--accent-color);
    background-color: var(--background-color) !important;
 }
 
 #signInWithMicrosoftSSO{
    /* use microsoft black for outline with white background */
    border: 1px solid var(--text-color);
    background-color: var(--background-color) !important;
    color: var(--text-color);
 }

 #classSelectButton{
    /* use microsoft black for outline with white background */
    border: 1px solid var(--text-color);
    background-color: var(--background-color) !important;
    color: var(--text-color);
 }

 .img-responsive{
    /* centered, and only max of 50% of the screen */
    margin-left: auto;
    margin-right: auto;
    max-width: 50vw;
    height: auto;
 }

 .imgDisplay-container{
    /*this is a backround image that needs to be top-center and not repeat, and contained within the div*/
    background-position: top center;    
    background-repeat: no-repeat;
    height:50vh;
    width: 100%;
    background-size: contain;
}

/*video unit question backgroun */
.questionContainer{
    height: 65vh;
    border-radius: 35px;
    padding: 10px;
    background: var(--background-color);
    /*blurred border*/
    border: 1px solid var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color);
    margin-top: 10vh;
}