@import url('https://fonts.googleapis.com/css?family=Montserrat');
body{
    min-height: 100vh;
    padding: 1% 1%;
    background-color:  #2ea15a;
    text-align: center;
    font-family: Roboto, Arial, sans-serif;
}
.listCourses{
    width: 60px;
    height: 60px; 
    border-radius: 20px; 
    border: none; 
    background-color:  #186f3a;
}
.home{
    align-items: center;
    align-content: center;
    
}

.navAnchor{
    color: yellow;
}
.left{
   text-align: left;
}
.instruction{
    text-align: left;
    padding-left: 20%;
    padding-right: 2%;
}
a{
    text-decoration: none;
    transition-duration: 0.3s;  
    color: white;
    text-decoration: none; 
}
::-webkit-scrollbar{
    width:15px;
}
::-webkit-scrollbar-track{
    background: #d1e5ff;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(#087421, #118d4f);
    border-radius: 10px;
}

.objective0{
    background-color: #30ac63;
    margin-left: 20%;
    margin-right: 1.5%;
    text-align: left;
    padding-left: 2%;
    padding-top: 2%;
}
.side-bar{
    background:#2ea15a;
    width: 250px;
    left: -250px;
    height: 100vh;
    position: fixed;
    top: 0;
    overflow-y: auto;
    transition: 0.6s ease;
    transition-property: left;
}
header{
    background: #538a4e;
}
header img{
    width: 100px;
    margin: 15px;
    margin-left: 10px;
    margin-top: 30px;

}
.close-btn{
    position: absolute;
    color: #fff;
    font-size: 23px;
    right:0px;
    margin: 15px;
    cursor:pointer;
}
header h1{
   text-align: center;
   font-weight: 500;
   font-size: 25px;
   padding-bottom: 13px;
   font-family: sans-serif;
   letter-spacing: 2px;
}
.menu{
    width: 100%;
    margin-top: 3px;
    text-align: left;
}

.menu .item {
   position: relative;
   cursor: pointer; 
}
.menu .item a{
  color:  white;
   font-size: 16px;
   display: block;
   padding: 3px 3px;
   /* height of side bar*/
   line-height: 30px;
}
.menu .unit{
    color:  yellow;
    font-size: 16px;
    display: block;
    padding: 3px 20px;
    /* height of side bar*/
    line-height: 30px;
    text-align: left;
  }

  .common{
    text-align: left;
    padding-left: 30px;
  }

.item i{
    margin-right: 15px;
}
.item a .dropdown{
 position: absolute;
 right:0;
 margin:20px;
 transition:0.3s ease;
}
.item .sub-menu{
    background: #3c803a;
    display: none;
    text-align: left;
    padding-left: 3%;
}
.menu-btn{
   position: absolute;
   color: black;
   font-size: 40px;
   cursor: pointer;
   margin: 25px;
}
.side-bar.active{
   left:0; 
}
.side-bar::-webkit-scrollbar{
    width: opx;
}
.item .sub-menu a{
    padding-left: 2px;
}
.rotate{
    transform: rotate(90deg);
}

.question p{
    font-size: 18px;
    /*text-align: center;*/
    color: white;
}

.drag-container{
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word;
    container-type: inline-size;

}

.draggable {
    height: 150px;
    width: 25%;
    margin: 10px;
    /*border: solid 2px black;*/
    cursor: pointer;
    background-color: #147a34;
    /* border: 2px solid rgb(7, 162, 64);*/
    text-align: center;
    border-radius: 30px;
    align-items: center;
    align-content: center;
}

.drop-container{
    display: flex;
    align-items: center;
    justify-content: center;
  /*  overflow-x: scroll; */
  overflow-wrap: break-word;
  container-type: inline-size;

 

}

.after-drop{
    height: 150px;
    width: 25%;
   /* width: min-content; */
   /* width: fit-content; */
    margin: 10px;
    text-align: center;
    line-height: 20px;
    align-items: center;
    align-content: center;
  /*  overflow-x: scroll; */
   overflow-wrap: break-word;
  container-type: inline-size;
 
  aspect-ratio: 1/1;
}

.drop-target{
    height: 150px;
    width: 25%;
   /* width: min-content; */
   /* width: fit-content; */
    /*border: 2px dashed black;*/
    border: 2px solid rgb(21, 87, 6);
    margin: 10px;
    text-align: center;
    line-height: 20px;
    align-items: center;
    align-content: center;
  /*  overflow-x: scroll; */
   overflow-wrap: break-word;
   container-type: inline-size;
   
   aspect-ratio: 1/1;
   
}

.drop-target>p{
    font-size: clamp(0.8rem, 7cqi, 2rem);
}

.drag-container>p{
    font-size: clamp(0.8rem, 7cqi, 2rem); 
}

.subset{
    font-size: 30px;
    font-weight: bold;
}

.correct{
    background-color: #30ac63;
  
}
.wrong{
    background-color: #e16557;
}

/* Float window */

/*

#floatCont{
    background-color: #212228; 
    background-image: linear-gradient(#292a30 .1em, transparent .1em),
    linear-gradient(90deg, #292a30 .1em, transparent .1em);
    background-size: 4em 4em;
    height: 100vh;
}
 */
#card{
    width: 210px;
    height: 400px;
    background-color: yellow;
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    padding: 10px;
    padding-top: 25px;
    text-align: left;
}

#myButtonFloat{
    text-align: right;
}

/* -----------------------------------------  quiz 1.x ----------------------------  */

#dragScriptContainer{	/* BIG DIV containing HTML needed for the entire script */
    width:100%;
    margin:0 auto;
    height:400px;
    margin-top:20px;
    padding:3px;
}
#questionDiv{ /* Big div for all the questions */
    float:left;
    height:100%;
    width:60%;
   /* border:1px solid #000; */
    padding:2px;
    display: block;
}
#answerDiv{	/* Big div for all the answers */
    float:right;
    height:100%;
    width:30%;
    padding:2px;
}
#questionDiv div,#answerDiv div,#dragContent div{	/* General rules for small divs - i.e. specific questions and answers */
    width:45%;
    height:100px;
    line-height:20px;		
    float:left;
    margin-right:2px;
    margin-bottom:2px;
    text-align:center;
    background-color: white; 
    border-radius: 30px;
    align-items: center;
    align-content: center;
    padding: 2px;
}
#dragContent div{	/* Drag content div - i.e. specific answers when they are beeing dragged */
     border:1px solid #000; 
}
#answerDiv .dragDropSmallBox{	/* Small answer divs */
    border:1px solid #000;
    cursor:pointer;
    width: 100%;
}
#questionDiv .dragDropSmallBox{	/* Small answer divs */
    border:1px solid #000;
    cursor:pointer;
}
#questionDiv div div{	/* DIV after it has been dragged from right to left box */
    margin:0px;
    border:0px;
    padding:0px;
    width:100%;
}
#questionDiv .destinationBox{ /* Small empty boxes for the questions - i.e. where answers could be dragged */
    border:0px;
  background-color: rgba(255, 255, 255, 0); 
    width:45%;
    border:1px dashed #000; 
}
#questionDiv .correctAnswer{	/* CSS indicating correct answer */
    background-color:rgb(26, 95, 26);
    color:#fff;
}
#questionDiv .wrongAnswer{	/* CSS indicating wrong answer */
    background-color:rgb(183, 74, 74);
    color:#fff;
}

#dragContent{
    position:absolute;
    display:none;
}	

.sideWays{
    width: 100%;
    /*    display: flex;
    container-type: inline-size; */
 
  }
  
  .slideSolids1{
      width: 100%;
      /* border: 2px solid rgb(7, 162, 64);
      float:left; */
  }
  .slideSolids2{
    width: 100%;
    /* border: 2px solid rgb(7, 162, 64);*/
    float:left;
}
/*
.slidePadlet1{
    display: flex;
    width: 100%;
}
*/


.slidePadlet1{
    display: flex;
    width: 85%;
    gap: 10px;
    overflow-wrap: break-word;
    container-type: inline-size;
}

.slide1{
    width: 30%;
}

.googlSheet1 {

    width: 100%;
    margin: 3px;
    cursor: pointer;
}

.objective0{
    background-color: #30ac63;
    margin-left: 20%;
   /* margin-right: 1.5%; */
    text-align: left;
    padding-left: 2%;
    padding-top: 2%;
}

/*


.SheetContainer{
    display: flex;
    width: 94%;
    gap: 10px;
    overflow-wrap: break-word;
    container-type: inline-size;
}


.container{

    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    overflow-wrap: break-word;
    container-type: inline-size;
}
.googlSheet1 {

    width: 100%;
    margin: 3px;

    cursor: pointer;

}


*/




.lessonPlan{
    width: 100%;
}

.table{
   /*  background-color: yellow;*/
    width: 100%;
}

th{
    background-color: rgb(154, 219, 23);
    text-align: center;
}

tr{
    background-color: rgb(167, 238, 60);
}



.googlSheet1 {
    /* height: 150px;*/
     width: 100%;
     margin: 3px;
     /*border: solid 2px black;*/
     cursor: pointer;
    /* background-color: #147a34;*/
     /* border: 2px solid rgb(7, 162, 64);*/
     float: left;
    /* text-align: center;
     border-radius: 30px;
     align-items: center;
     align-content: center; */
 }