/*

selecter:
element:  a, footer
class     .className
ID        #id    needs to be unique accros the webpage

combine selecters:

.selector1.selector2      <h1 class='large-Header'>Select


h1.larger-header { font-szize:200%}



.ancester .child {}

eg all p tags inside a div == div p {}
div > b   needs to ba direct child


combine select to avoid duplication
.big .large { }

everything selector  * {}


li.red ~ li  every after the li.red div
li.red + li  only the very next element



pseudo selector

psuedo attribute:

attribute selectors

[data-red] {}    <div  data-red   >
[data-red="true"]  <div data-red="true">
[data-red^="tr"]   match begining
[data-red$="ue"]   match ending
[data-red*="ue"]   match anywhere
[data-comDesc*="(H)"] {}
*/


#page,
#loading {
  transition: opacity 1s;
  
}

*,* ::before, *::after {
    box-sizing: border-box;
}



body {
   font-family: 'Comic Neue';
   /* font-family: 'Rubik'; */
display:flex;
margin:5px;
padding:5px;
overflow: hidden auto;
justify-content: center;
flex-wrap: wrap;

}












input.larger {
  width: 25px;
  height: 25px;
}



.selector-for-some-widget {
  box-sizing: content-box;
}

.container {
  margin: 0px 20px 0px 20px ;
  padding:0px 10px 0px 10px ;
  width:100vw;
  /* max-width: 200vw; */
  overflow-x:auto;
  position:absolute;

}


.navContainer {
  margin: 5px 20px 5px 10px ;
  padding:0px 10px 0px 10px ;
  width:100vw;
  position:absolute;

  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  justify-content: flex-end; /* Align items to the right */
  list-style: none;
  z-index: 1001;
  flex-direction: column; 
}
@media screen and (width < 930px),
       screen and (height < 840px) {
  .navContainer {
    top: 1; /* Position the menu at the top */
    left: 90vw; /* Align the menu to the right */
    font-size: 10px;
    margin: 1px 1px 1px 1px ;
    padding:1px 1px 1px 1px ;
    width: 100px;
    flex-wrap: wrap;
    margin-right: 10px !important;
    background-color: #ebebeb;
    color: #424242;
    border-radius: 5px;
    border: solid 2px #dd6e39;
    box-shadow: 2px 15px 15px 2px #424242;
    z-index: 1001;
  }
}

.container-fluid {
    padding-top: 10px;
    padding-bottom: 10px;  
    }


.navbar {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    /* width: 120%; */
    border-radius: 0;
    margin-bottom: 0;
    font-size: 12px;

    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    list-style: none;
    }


.navbar-nav  li a:hover {
    /* color: #1abc9c !important; */
    /* color: #000000 !important; */
    font-size: 14px;
    }

.navbarAct  li a:hover {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 0;
  /* width: 120%; */
  border-radius: 0;
  margin-bottom: 0;
  font-size: 9px;
  letter-spacing: 3px;
  }

.navbar-top {
  position: fixed;
  top: 0;
  /* width: 100%; */
  }


  @media screen and (max-width: 760px),
        screen and (height < 840px){
  .navbar-brand{
    margin-bottom:  40px;
    padding: 15px 20px 3px 20px ;
 
    }
}

.navWhiteText {
  color: #fff;
  padding-top: 20px;
  padding-bottom: 1px;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.navBlack {
  padding-top: 10px;
  padding-bottom: 1px;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 14px;
}

 
 /* -------footer---------- */



.footer-padding {
	padding-bottom: 30px;
}

.footer {
	position: absolute;
	text-align: center;
  padding: 5px;
	bottom: 0;
	width: 100%;
	height: 25px;
	background-color: #f1f1f1; /*   #DD8D01;  #252525;  #DD8D01; */
  position: fixed;
	font-size: 12px;
  vertical-align: middle;
  color: #252525;
  /*
    display: block;
  */
}




.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}



.div-inline {
  display: inline-block;
  margin:1%;
}

.divRounded {
  border-radius: 25px !important;
  padding: 4px;
  padding-left: 10px;
    padding-right: 10px;
}



.divRounded20 {
  border-radius: 20px !important;
  padding: 4px;
  padding-left: 20px;
}
.divRounded15 {
  border-radius: 15px !important;
  padding: 4px;
  padding-left: 20px;
}

.divRounded25 {
  border-radius: 25px !important;
  padding: 10px ;
  padding-left: 20px;
}


.divCol {

  display: flex;
   justify-content: center;
   align-items: center;
}







.topicImage {
    border: 0;
    height: 80px;
    width:88px;
    background-color: transparent;
}

.activityRow {
    text-align:left;
    width: 800px;
    background-color:transparent;
    color: grey;
}
/* appears on title  */
.activityImage {
  border: 0;
  height: 160px;
  width: 176px;
  background-color:transparent;
    display: inline-block;
    top:10%;
    margin-top:10px;
    margin-bottom:10px;
}

.actText {
  text-align:   left;
}


.studText {
  vertical-align: middle;
  width: 30%;
  padding: 10px;
}




.glyphiconFC {
  background-color:transparent;
  color: white;
}










.activeRow {
  min-height: 50px;
  align-content: center;
}

.activityColumn {
  min-width: 180px;
}

.tableInput {
  min-width:50px;
  width: 100%;
 background-color: #e7e7e7;
}

.tableInputEmail {
  min-width:250px;
  width: 100%;
 background-color: #e7e7e7;
}


/* ------------- badges --------------------------- */


.badgeImagelarge {
  border: 10px;
  height: 100px;
  width:100px;
  margin: -20px;
  margin-left: 5px;
  margin-right: 5px;
  padding: -20px;
  background-color: transparent;
}

.badgeImageMedium {
  border: 10px;
  height: 80px;
  width:80px;
  margin: -2px;
  padding: -2px;
  background-color: transparent;
}


.badgeImageSmall {
  border: 10px;
  height: 50px;
  width:50px;
  margin: -2px;
  padding: -2px;
  background-color: transparent;
}



.bigImage {
  border: 0;
  height: 300px;
  width:330px;
  background-color:transparent;
  display: inline-block;
  top:50%;
  margin-top:-15px;
}

.medImage {
  border: 0;
  height: 200px;
  width:220px;
  background-color:transparent;
  display: inline-block;
  top:50%;
  margin-top:-15px;
}

.gameImage {
  border: 0;
  height: 140px;
  width:155px;
  background-color:transparent;
  display: inline-block;
  top:50%;
  margin-top:-15px;
}




span.tooltip {
    font-size: 30px;
     text-align: left;
    border-radius: 0px 3.2px 3.2px 0px;
    /* background-color: #dd6e39 !important; */

}



.tooltip {
  width:400px;
}
/* -----------------sections -------------------  */

#headerSection {


  text-align: left;

  background-color:  #fff ;
  color: #dd6e39;
  margin: 15px;
  padding: 15px;
 /* min-height: 50px; */
}





#stdImage {
  border: 0;
  height: 50px;
  width:55px;
  background-color:transparent;
  display: inline-block;
  top:50%;
  margin-top:-15px;
}




 /* ----------- header logo ------------ */
/* Default styles for the image */
#headerImage {
  border: 0;
  height: 45px;
  width:70px;
  background-color:transparent;
  display: inline-block;
  top:50%;
  margin-top:-15px;
  display: inline; /* Ensure the image is visible by default */
}

/* Media query to hide the image when screen width is less than 900px */
@media screen and (width < 930px),
       screen and (height < 830px) {
  #headerImage {
    display: none; /* Hides the image */

  }
}

/* Default styles: both image and text are visible */
#headerTitle {
  color: #dd6e39;
  display: inline-block;
  display: block; /* Ensure the content is visible by default */
}

/* Media query to hide both image and text when screen width is less than 900px */
@media screen and (width < 930px),
       screen and (height < 840px) {
  #headerTitle {
    display: none; /* Hides the entire <p> element, including the image and text */
  }
}














 /* --------------------------------- */

#topicSection {


  text-align: center;

  background-color: #f8f8f8;
  color: #dd6e39;
  margin: 10px;
  padding: 10px;
 /* min-height: 50px; */
}

.teacherRadio {
  color:  #004d90 ;/*  #4A90E2; */
  font-size: 8px;

}





#myTest {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}


/* element {
  --yr7Color : #E27F98;

  --yr8Color : #DF9B6D;

 --yr9Color : #8F9EDA;

 --yr10Color : #BDB76C;

 --yr11Color : #85A9C2;
} */


/* ------------  hide test ----------------------------------- */
/*

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

.this-will-not-be-read {
   display: none !important;
} */

.col-2w {
  width: 50%;
}

.col-3w {
  width: 33.33%;
}

.col-4w {
  width: 25%;
}

.col-8w {
  width: 12.5%;
}


 .col {
  grid-column: span 12;
  
} 


.col-sm-1 {
   grid-column: span 1;
   min-width: 5vw;
}
.col-sm-2 {
  grid-column: span 2;
  min-width: 10vw;
}
.col-sm-3 {
  grid-column: span 3;
  min-width: 25vw;
}
.col-sm-4 {
  grid-column: span 4;
  min-width: 33vw;
}
.col-sm-5 {
  grid-column: span 5;
  min-width: 41vw;
}
.col-sm-6 {
  grid-column: span 6;
  min-width: 50vw;
}
.col-sm-7 {
  grid-column: span 7;
  min-width: 58vw;
}
.col-sm-8 {
  grid-column: span 8;
  min-width: 66vw;
}
.col-sm-9 {
  grid-column: span 9;
  min-width: 75vw;
}
.col-sm-10 {
  grid-column: span 10;
  min-width: 83%;
}
.col-sm-11 {
  grid-column: span 11;
  min-width: 91vw;
}
.col-sm-12 {
  grid-column: span 12;
  min-width: 100vw;
}


 







.middleText {
  margin: auto;
  width: 100%;
  text-align-last: right;
  /* border: 3px solid green; */
  padding: 10px;
}


/* ------------- seelction -------------------------     */
    /* input, select,

    select option  { background-color: #e7e7e7;
                                    color: #000;  }
    select option[value="frenchselect"] { background-color: #4A90E2 ;
                                    color: #dd6e39; }
    select option[value="spanishselect"] { background-color: #dd6e39 ;
                                      color: #fff;}


input {

  radio {

    .frenchselect{ background-color: #4A90E2 ;
                  color: #dd6e39;
                  }

    .spanishselect { background-color: #dd6e39 ;
                    color: #fff;
                  }

      }
    } */


/* indicates problem with validity checks */


    input:invalid {
      border: 2px dashed pink;
       /* background-image: linear-gradient(to right, pink, red); */
        box-shadow: 0 0 5px 1px pink;
    }








.scoreDisplay{
  border-style: hidden;

}
.scoreDisplayText{
  border-style: hidden;
  width: 250px;

}

.scoreDisplayNum{
  border-style: hidden;
  width: 100px !important;
  text-align: center;
}

.summaryDisplayNum{
  border-style: hidden;
  width: 100% !important;
  text-align: center;
  margin:1px;
}



.base1 {
    background: #252525;
    color: #fff;
}



.rotate-45 {
  transform: rotate(-45deg);
transform-origin: 50% 50%;
}

.rotate-60 {
  transform: rotate(-60deg);
transform-origin: 50% 50%;
border-width: 2px;
border-color: #fff;
}

.rotate-89 {
  transform: rotate(-89deg);
transform-origin: 20% 50%;
border-width: 2px;
border-color: #fff;
}

.rotate-90 {
  transform: rotate(-45deg);
transform-origin: 50% 50%;
}





.font14 {
        font: 22px  !important;
        height: 39px !important;
        width:40px !important;
        padding: 1px !important;
        /* margin: 1px !important; */
        border-color: transparent;
        border-width: 0;
        align: center;
        color: Black
}

.modeltxt {
      text-align: left;
      font: 11px Rubik !important;
      margin:0px !important;
      padding:0px !important;
        vertical-align:left !important;
      border-color: transparent    !important;
      border-width: 0px!important;
      z-index: 20;
}







.alignMiddle {
  vertical-align:middle !important;
  text-align: center;
}


.avrCol {
  width:26px !important;
  font: 14px Rubik !important;
  margin:-2px !important;
  padding:2px !important;
  vertical-align:middle !important;
  border-color: #fff    !important;
  border-width: 0px!important;
  align:center;
  text-align: left;
  z-index: 100;
}

.docColBold {
  font-weight: bold !important;
}






.descColL {
    text-align: middle;
      vertical-align:middle !important;
    width:35px !important;
    font: 15px Rubik;
    margin:1px !important;
    padding:1px !important;
    /* height: 8px !important; */
    border-color: #fff    !important;
    border-width: 1px!important;
    z-index: 0;
    border-style: hidden;

}

.descColLM {
  font: 15px Rubik;
width:50px !important;
}

.descColLL {
  font: 25px Rubik;

}

.imageCol {
  width:20px !important;
}

.crossOut {
  text-decoration: line-through !important;
  color: #E4E6E4 !important;
  border-color: transparent !important;
}





.classCol {
    text-align: left;
      vertical-align:middle !important;
    font: 11px Rubik;
    margin:0px !important;
    padding:0px !important;
    /* height: 8px !important; */
}


.topicCol {
    text-align: center;
    width:100px;
}





.searchBox{
  border-color: #A9D0F5 !important;
  border-width: 1px;
  font-size: 16px;
  min-width: 200px;
  padding:5px;
  border-radius: 20px;
background-image: linear-gradient(to right, #A9D0F5, #fff);
}


.searchBox::-webkit-input-placeholder {
  color: #2196F3;

};




.mnWidth20 {
  min-width: 20px !important;
}









.inputBoxNos {
  width:40px;
  border-style: solid;
  border-color: #B1B0B0;
  border-width: 2px;

}


.inputBoxTxt {
  width:120px;
  border-style: solid;
  border-color: #B1B0B0;
  border-width: 2px;

}



/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}




.labelsStd {
    font-family: 'Arial';


}





.labelHeaderX3 {
  border-style: hidden;
  width: 400px;

}









.greyProgressBar {
  width: 100%;
  height: 20px;
  position: relative;
  background-color: #ddd;
  border-radius: 25px;
}

.progressBar {
  background-color: var(--green-d);
  width: 100%;
  height: 20px;
  position: absolute;
  border-radius: 25px;
}








alert {


  color: #721c24;
      background-color: #f8d7da;
      border-color: #f5c6cb;


      position: relative;
      padding: 0.75rem 1.25rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      border-radius: 0.25rem;



}



.audioUpContainer {
    /* height: 70vh; */
    display: flex;  /* display on top of each other  then wrap*/
    flex-direction: column;
    justify-content: space-between;  /* hieght space between */
    align-items: left;
    padding: 0px 0px 0px 120px
}


/* file upload */

.upload-container {
    position: relative;

}
.upload-container input {
    border: 1px solid #ffffff;
    background: #f1f1f1;
    outline: 2px dashed #fff;
    outline-offset: -10px;
    padding: 30px 20px 80px 20px;
    text-align: left !important;
    width: 450px;
    border-radius: 25px;
}
.upload-container input:hover {
    background: #ddd;
}
.upload-container:before {
    position: absolute;
    bottom: 40px;
    left: 40px;
    content: " (or) Drag and Drop files here. ";
    color: #B1B0B0;
    font-weight: 900;
}





.edit-modal {
  /* display: none; /* Hidden by default */ 
  position: fixed; /* Stay in place */

  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.left {
  position: absolute;
  left: 0px;
  margin-left:25px;
}


.right {
  position: absolute;
  right: 0px;
  margin-right:25px;
}






.centerImage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}



.mgScore {
  border-radius: 10px;
}



.mgBtn {
  margin:15px;
  border-radius: 15px;
  padding: auto;
  font-size: 1.6em;
  font-weight:500;
  color: var(--brown);
}





/* //loading spiner  */
.spinner {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}