@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap");

#toggleDivPip{
    position: absolute;
    color: red;
    bottom: 200px;
    left: 200px;
    position: absolute;
    bottom: -295px;
    z-index: 1;
    border: 0;
    background-color: #fff;
}
aside ul li.active,aside ul li:hover {
  background: #19599d;
}
aside ul li.active button i,
aside ul li.active button small ,
aside ul li:hover button small,aside ul li:hover button i{
  color: #fff !important;
}
.student_room ul#selectBrush {
    left: 345px;
    top: 74px;
}
.secTwo .btnsgroup {
    padding: 5px 0;
}


#app{
    min-height: 100vh;
}
button.btn.btn-link:hover i, button.btn.btn-link:hover small {
    color: #fff;
}

aside ul li:hover button i, aside ul li:hover button small {
    color: #fff;
}

button.btn.btn-link:foucs i, button.btn.btn-link:focus small {
    color: #fff;
}

aside ul li:focus button i, aside ul li:focus button small {
    color: #fff;
}

aside ul li.active small,aside ul li.active i {
    color: #e80b0b !important;
     outline: 0;
}
aside ul li.active button,aside ul li.active div{
       outline: 0;
}

ul#selectBrush li span{ 
    position: relative;
    top: 10px;
}
h4#quizQuestion input,.quizQuestion input,.col-lg-6.col-12 span input {
    display: inline-block;
    margin-bottom: 10px;
    min-width: 100px;
    max-width: 200px;
    margin-right: 0 !important;

}

.lil-gui.autoPlace {
    max-height: 100%;
    position: fixed;
    right: 89px !important;
    top: 0;
    z-index: 1001;
}

/* Loading Animation */
/*.progress-bar-container-animation{*/
/*  position:absolute;*/
/*  left:50%;*/
/*top:50%;*/
/*transform: translate(-50%,-50%);*/
/*width:100%;*/
/*height:100%;*/
/*background-color: rgba(0,0,0,0.8);*/
/*display:flex;*/
/*flex-direction: column;*/
/*justify-content:center;*/
/*align-items: center;*/
/*}*/

.iframeUrlVisibility{
  width:90%;
  height:632px;  
}

.defaultInstructorRoomUrl::before {
    content: "";
    position: absolute !important;
    top: 50px;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, #ffffff, #ffffff);
    opacity: 0;
    width: 90%;
    height: 95%;
    border: 0px;
}


.progress-bar-container-animation {
    position: absolute;
    left: 50%;
    top: 50%;

    color: #000;
    z-index: 9;
}

/*#progress-bar-animation{*/
/*width: 30%;*/
/*margin-top:0.5%;*/
/*height: 2%;*/
/*z-index: 5555;*/
/*}*/

#progress-bar-animation {
    width: 94%;
    margin-top: 0.5%;
    height: 10px;
    z-index: 9;
    display: block;
    color: #fff;
    background: #434343;
}
/* Loading Animation */

.student_room fieldset div#Multisvg {
    position: relative;
}
.student_room fieldset div#Multisvg div.layersrow .layer {
           height: 500px;
           /* min-height: 500px; */
           width: 100%;
           /* width: 100%; */
           /* margin: 5px; */
           /* padding: 6px; */
           /* margin-left: auto; */
           /* margin-right: auto; */
           overflow-x: scroll;
           text-align: center;
           position: absolute;
           display: block;
    }

/*::-webkit-scrollbar {*/
/*    background: transparent;*/
/*    width: 10px !important;*/
/*    height: 10px !important;*/
/*}*/

#openmeet:hover span{
    display:inline-block !important;
}

div#resultModal .modal-dialog {
    max-width: 70vw;
}

.pdf_input_questions {
    color: #495057 !important;
    background-color: #fff !important;
    border-color: #80bdff !important;
    outline: 0 !important;
    box-shadow: 0px 1px 0 0rem rgb(0 123 255 / 25%) !important;
}


/* New */
.select{
  height:27px;
  width:56px;
  overflow:hidden;
  background-color:#FFFFFF;
  border:1px solid #CCCCCC;
  padding:0px;
  margin:0px;
  cursor:pointer;
      display: inline-block;  position: fixed;
    /*top: 74px;*/
    top: 104px;
    left: 382px;

}

.select li span {
    width: 41px !important;
    overflow: hidden !important;
    display: block;
    line-height:0;
}
.select:hover{
  height:auto;  
}

.select li{
     height: 26px;
    line-height: 20px;
    padding: 0 5px;
}

.select li:hover{
  background-color:#EEEEFF;
}

.select li a{
  text-decoration:none;
  color:#000000;
  font-family:calibri;
}

.select li:first-child a:after{
  content:' ';
  background-image: url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-24.png');
  background-size:16px 16px;
  background-position:center center;
  background-repeat:no-repeat;
  float:right;
  height:20px;
  width:20px;
  text-align:center;
  line-height:20px;
}

.selectedBrush{
    border: 1px solid #888;
    background-color: green;
}
/* New */


p.heightWidthReport {
    position: absolute;
    width: 100%;
}










section#main {
    position: relative;
}
ul.languages,ul.languages2,ul.languages1 {
    padding: 0;
    min-width: 218px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #eee;
 
}

#iframeUrlData{
    position:relative !important;
    z-index: 1 !important;
    top:0 ;
}

.video_page .btn {padding: 3px  3px 2px;font-size: 13px;}

.video-group {
    /*height: 230px !important;*/
    height: 143px !important;

    overflow-y: auto;
}

.video_page {
    display: flex;
    justify-content: space-between;
    padding: 5px;
}

span.videoname {
    display: block;
    color: #000;
    font-weight: 600;
}
li#myDDUrl .dropdown-menu.text-center.show {
    transform: translate3d(-243px, -5px, 0px) !important;
        width: 240px;

}

button.language_selector.active.btn.btn-success.btn-block,button.language_selector2.active.btn.btn-success.btn-block,button.language_selector1.active.btn.btn-success.btn-block {
    margin-bottom: 0;
    margin: 0;
}

ul.languages li,ul.languages2 li,ul.languages1 li {
    border-bottom: 1px solid #eee;
    font-size:12px;
    text-align:left !important;
        padding: 5px 10px;
      

}

ul.languages li:hover,ul.languages li:hover span.videoname,ul.languages2 li:hover,ul.languages2 li:hover span.videoname,ul.languages1 li:hover,ul.languages1 li:hover span.videoname  {
background: #2196f3;
    color: #fff;
}

div#video h4 {
    font-size: 16px;
    padding: 5px 9px 6px;
    border-bottom: 1px solid #adb5bd;
    background: #17a2b8;
    color: #fff;
}
.meetframe {
    /*width: 40%;*/
    width: 95%;
    margin: 140px auto;
}
.meetframe h4 i {
    display: block;
    font-size: 46px;
    margin-bottom: 20px;
    color: #117a8b;
}
.meetframe h4 {
    padding: 60px 30px;
    font-size: 16px;
    line-height: 2rem;
}
div#video h6 {
    font-weight: 400;
    padding: 6px 7px;
}

.video_metadata {
    border: 1px solid #b5b5b5;
    margin: 6px 4px;
    background: rgb(212 228 245 / 25%);
}
#AskToDraw .positions_bottom_fixedes {
    position: fixed;
    bottom: -52px;
    left: -31px;
}
.list-participants {
    position: relative;
    display: inline-block;
}

.list-participants:nth-child(2) {
    position: relative;
    left: -7px;
}

#screenshare,#AskToDraw{
    display:none;
}

.spinnerdimension{
 width:5rem;
 height:5rem;
}
.modal{
    z-index:10002 !important;
}
.student_details {
    border: 1px solid #ddd;
    padding: 10px;
    background: #f1f8ff;
}

.student_details p {
    margin: 0;
    font-weight: 700;
}

.student_details span {
    font-size: 14px;
}
#chat_name_initial {
    background: pink;
    height: 30px;
    width: 30px;
    text-align: center;
    padding: 5px;
    border-radius: 20px;
    font-size: 13px;
}
#chatboxContainer{
/*    position: absolute;*/
/*bottom: 0px;*/
/*width:100%;*/
  flex:1 1 13%;

}

.typer_name{
    flex: 1 0 2%;
}

#myDDUrl .dropdown-item {
  padding: 0;
}
.closechat {
    color: #d32a2a;
    padding: 0 8px;
    font-size: 19px;
}

.videoClassForStudent{
     display: block; 
     /*background-color:red ;*/
     height: 100vh !important; 
     position: absolute; 
     width: 100vw; 
     left: 0;   
     right: 0;   
     top: 0;   
     z-index: 1000; 
     /*height: 80% !important;*/
}
.closeuserlist {
    color: #000;
    margin: 9px;
    cursor:pointer;
}
.embed-responsive-16by9{
    /*z-index:99999;*/
}
aside li .btn.btn-success {
    padding: 4px 11px;
    margin: 7px;
    font-size: 12px;
    word-break:break-word;
}
aside li .btn.btn-success i {
  color: #fff;
}
aside .dropdown-menu.text-center.show
{padding:10px;}
 html {
   /*min-height: 100vh;*/
 height:  -webkit-fill-available;
 }
body.student_room #player {
pointer-events:none;}

body.student_room .embed-responsive-16by9::before {padding:0}
/*.overlaymsg {*/
/*    height: 200px;*/
/*    position: absolute;*/
    /*color: #cdc2c2;*/
/*    font-size: 28px;*/
/*    text-align: center;*/
/*    z-index: 99;*/
/*    width: 100%;*/
/*    padding: 133px 0;*/
/*    border:2px solid;*/
/*    background-color:#52ad6b;*/
/*    color:white;*/
/*    cursor: pointer;*/
/*}*/

.overlaymsg {
    height: 200px;
    position: absolute;
    font-size: 28px;
    text-align: center;
    z-index: 99;
    width: 100%;
    padding: 266px 0;
    border: 2px solid;
    background-color: #474848;
    color: white;
    cursor: pointer;
    height: 100% !important;
    min-height: 582px;
    vertical-align: middle;
}

body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
  overflow: hidden;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently */
}
/*canvas#canvasBG {background: white !important;}*/

div#canvasesdiv .multipleLayerMobileClass{background: #fff !important;}
#app{
    visibility:hidden;
}
select {
    height: auto !important;
}
video {
    margin-bottom: 15px;
}
ul#type6-sortable li::marker {
    display: none;
    content: "";
}
#canvasBG { 
/*  width: 100%;
  height:100%;*/
}

.canvasLayersClass{
   width: 100%;
  height:100%;
}
button.btn.btn-link, button.btn.btn-link:hover {
    text-decoration: none;
    color: #fff;
}
/*body {*/
/*    font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; */
/*    font-size: 1.2rem;*/
/*    margin: 1em;*/
/*    color: #fff;*/
/*    background: url(../images/grid-pattern.png) left top repeat, */
/*    			-webkit-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;*/
/*    background: url(../images/grid-pattern.png) left top repeat, */
/*    			-moz-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;*/
/*    background: url(../images/grid-pattern.png) left top repeat, */
/*    			-ms-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;*/
/*    background: url(../images/grid-pattern.png) left top repeat, */
/*    			-o-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;*/
/*    background: url(../images/grid-pattern.png) left top repeat, */
/*    			radial-gradient(circle farthest-side at 50% 15%, #2c98dd, #1a5f96) no-repeat;*/
/*    background-color: #1a5f96;*/
/*}*/

aside li {
  display: grid;
}

aside li .btn {
  margin: 0 0 0px 0;
  padding: 0;
}

aside li small {
  font-size: 60%;
  font-weight: 400;
  margin: 0px 0 0 0;
  color: #000;
  opacity: 0.8;
  display: block;
  word-break:break-word;
}

header {
  border-bottom: 1px solid #f1f2f3;
  padding: 5px 0px;
  height: 50px;
}

header .absolute_input_opaity {
  position: relative;
}

header .btn {
  padding-right: 10px;
  font-size: 17px;
  color: #fff;
  background: #131f2c;
  border-radius: 30px;
  /*margin-top: 5px;*/
  font-size: 13px;
  letter-spacing: 0.5px;
  height:32px;
    
}

header img {
  width: 80px;
  height: 40px;
  object-fit: contain;
}

aside {
  position: absolute;
  right: 0;

  background: #fff;
  top: 50px;
  border-left: 1px solid #f1f2f3;
  z-index: 10001;
  opacity: 1;
  width: 90px;
  visibility: visible;
  word-break: break-all;

  /*height: 100%;*/
  height: calc(100% - 12.2vh);
  overflow-y: auto;
  box-shadow: -3px 2px 6px -1px rgba(168,168,168,0.75);
-webkit-box-shadow: -3px 2px 6px -1px rgba(168,168,168,0.75);
-moz-box-shadow: -3px 2px 6px -1px rgba(168,168,168,0.75);
}
aside li .dropdown-menu.text-center.show, aside li#myDDUrl .dropdown-menu.text-center.show {
    padding: 10px;
    position: fixed !important;
    right: 62px !important;
    transform: unset !important;
    left: unset !important;
    top: unset !important;
}
.position_absolutes {
  position: absolute;
  bottom: 0;
}

aside ul li {
  padding: 6px 2px;
      text-align: center;

}

.flex_listing ul li button i {
  font-size: 15px;
  color: #131f2c;
}
.chat_footer input {
  height: 50px;
}

.chat_footer .input-group{
    flex-direction:column !important;
}

.chat_footer textarea{
    width:100% !important;
}

.chat_listing_system {
  position: fixed;
  right: -450px;
  width: 350px;
  z-index: 2;
  background: #fff;
  border-right: 1px solid #f1f2f3;
  bottom: 0;
  top: 50px;
  border-left: 1px solid #f1f2f3;
  box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.02);
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 99999;
  display: flex;
flex-direction: column;
justify-content: space-between;
}

.transform-hide {
  /*right: 65px;*/
  right:0;
  opacity: 1;
  visibility: visible;
}

.chat_header {
  border-bottom: 1px solid #f1f2f3;
  padding: 12px 15px;
}

.chat_header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/*.chat_body */
/*{*/
/*  padding: 15px 10px 25px 10px;*/
/*  min-height: auto;*/
/*  max-height: 84%;*/
/*  overflow: auto;*/
/*}*/

#chat_header_body_container{
    /*max-height:90%;*/
   max-height: 90%;
    flex: 1 1 100%;
    min-height: 0;
    
}
.chat_body {
padding: 15px 10px 0 10px;
/*min-height: auto;*/
max-height: 90%;
overflow: auto;
/*max-height: calc(100vh - 225px);*/
}
.toasts_main_body {
  position: absolute;
  bottom: 50px;
  left: 20px;
  z-index: 9999999;
}

.online_offline_peoples {
  position: absolute;
  top: -200px;
  opacity: 0;
  visibility: hidden;
}

.online_offline_peoples h3 {
  font-size: 14px;
  color: #000;
  letter-spacing: 0.3px;
  margin: 0;
}

.online_offline_peoples li {
  padding: 5px 10px;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #cccccc38;
}

.online_offline_peoples li img {
  height: 30px;
  width: 30px;
  margin-right: 10px;
  border-radius: 100%;
}

.online .dots {
  position: absolute;
  left: 30px;
  top: 8px;
  background: #24c724;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 1px solid #fff;
}

.online p {
  color: #24c724;
  font-size: 12px;
  margin: 0;
}

.offline .dots {
  position: absolute;
  left: 30px;
  top: 8px;
  background: #b10c27;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 1px solid #fff;
}

.offline p {
  color: #b10c27;
  font-size: 12px;
  margin: 0;
}

.slidein {
position: absolute;
top: 61px;
opacity: 1;
bottom: 0px;
/*min-height: 22%;*/
left: 0;
right: 0;
visibility: visible;
background: #f9f9f9;
z-index: 3;
overflow-y: auto;
max-height: 100%;
}

.main_chat_info li .flex_lis ,.private_chat_info li .flex_lis{
  display: flex;
  width: 300px;
  clear: both;
  /* margin-top: 10px; */
  word-break: break-word;
    flex-direction:column;

}

.coloredChatBoxes:nth-child(even){
    background: #ffffca;
}

.main_chat_info li img ,.private_chat_info li img, .chat_window_header img {
  width: 32px;
  height: 32px;
  border-radius: 100%;
  overflow: hidden;
  margin-top: 1px;
  border: 1px solid #ddd;
  object-fit:contain;
  background:gray;
}

.received img {
  margin-right: 7px;
}

.flex_lis b{
  font-weight: 600;
}

.send {
  /* float: right; */
  /*background: #ecf2ff;*/
  border-radius: 8px;
  padding: 5px 5px 5px 5px;
  margin-bottom: 5px;
}

.received{
  margin-bottom: 0px;
  padding:5px;
}

span.grey_text_timer:before {
  content: "";
  margin-right: 5px;
  width: 3px;
  height: 3px;
  background: #000;
  border-radius: 100%;
  position: absolute;
  opacity: 0.5;
  top: 40%;
  left: 0%;
}

.grey_text_timer {
  font-size: 9px;
  font-weight: normal;
  color: #000;
  opacity: 0.8;
  padding: 0 5px;
  position: relative;
}

.send img {
  /*margin-right: 7px;*/
margin-left:7px;
    
}

.send {
  /* float: right;
  text-align: right; */
}

.main_chat_info small, .private_chat_info small {
  font-size: 10px;
  margin-top: 2px;
  display: block;
  position: relative;
}

.main_chat_info p, .private_chat_info p
.main_chat_info a, .private_chat_info a {
  font-size: 11px;
  color: rgb(129, 128, 128);
  line-height: 18px;
  margin: 0;
}

.chat_footer {
  padding: 8px 10px;
  background: #eaeaea;
  border-top: 1px solid #f1f2f3;
  /*position: absolute;*/
  /*bottom: 0;*/
  /*left: 0;*/
  /*right: 0;*/
}

.hidesidebar {
  right: -65px;
  opacity: 0;
  visibility: hidden;
  display: none;
}

.chat_footer input,
.chat_footer button {
  font-size: 13px;
  margin-bottom: 0;
}

footer {
  background: rgb(211, 211, 211);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0px 0px;
  text-align: center;
  z-index: 1;
}

footer img {
 width: 80px;
    margin: 0 0 8px;
}

footer p {
  margin: 0;
  font-size: 10px;
  color: #666;
      position: relative;
    top: 3px;

}

.new_canvas canvas {
  z-index: 3 !important;
}

.instructor_room .old_canvas canvas {
  z-index: 4 !important; 
   /*was 1 */
}
.student_room .old_canvas canvas {
  z-index: 4 !important; 
   /*was 1 */
}

#old_canvas{
    max-height:80vh;
    overflow-y:auto;
    overflow-x: hidden;
    max-width: 94.5vw;
}

.absolute_input_text {
  position: absolute;
  top: 0px;
  right: 0;
  left: 0;
  z-index: 5;
  width: 300px;
  margin: 10px auto;
}

.absolute_input_text button {
  font-size: 12px;
  padding: 2px 8px;
  margin: 0 1px;
}

.dropdown-menu i {
  color: #fff;
}

.dropdown_floats {
  position: fixed;
  top: 5px;
  right: 20px;
  width: 300px;
  z-index: 1049;
  left: 0;
  margin: 0 auto;
}

.literally .lc-picker .fat-button {
  font-size: 12px !important;
  color: #fff !important;
}

.literally .lc-picker .fat-button {
  width: 37px !important;
}

.literally .horz-toolbar {
  background: #37474f !important;
}

.literally .lc-drawing.with-gui {
  left: 40px !important;
}

.literally .lc-options {
  left: 40px !important;
}

.literally .lc-picker .toolbar-button.disabled {
  font-size: 11px !important;
  color: #fff !important;
}

.c-disabled{
    pointer-events:none !important;
    opacity:0.7;
}

/*#table {*/
  /*max-height: 400px;*/
  /*height: 250px;*/
  /*overflow: auto;*/
/*}*/

main {
  position: relative;
}

#whiteboard {
  /* background: #000; */
  display: block;
  /* height: 100vh; */
  position: absolute;
  width: 100vw;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  height: 80%;
}

#board_new {
  position: absolute;
  left: 20px;
  z-index: 1;
  width: 80%;
  top: 20px;
  height: 80vh;
}

#editor1 {
  width: 100%;
  height: 100%;
}

#app iframe {
  width: 100%;
  border: 0px;
  height: 90% !important;
  position: absolute;
  top: 50px;
  /* bottom: 0; */
}

iframe {
  width: 100%;
}

.cke_reset {
  /*height: 70vh !important;*/
}

.quizViewOverlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height:100vh;
background: rgba(255,255,255,0.9);
filter: blur(10px);
}

#quizViewpreview1 {background: #fff;padding: 15px;position: relative;/* left: 14px;*//*top: 6px;*//*width: 93%;*//*height: calc(100vh - 153px);*/left: 46.5%;top: 290px;transform: translate(-50%,-50%);z-index: 1;width: 91vw;min-height: 84vh;box-shadow: 0 3px 15px -4px black;border-radius: 10px;overflow-y:auto;padding-top:36px;}

#createQuiz{
    /*background: #fff;*/
    padding: 15px;
    /*position: absolute;*/
    /*left: 14px;*/
    /*top: 6px;*/
    /*z-index: 1;*/
    /*width: 93%;*/
    /*height: calc(100vh - 153px);*/
  
    /*box-shadow: 0 3px 15px -4px black;*/
    /*border-radius: 10px;*/
    /*overflow-y:auto;*/
    /*padding-top:36px;*/
}
.quizNotifications-student {
  position:absolute;
  background: #fff;
  padding: 15px;
  left: 0px;
  /* bottom: 0; */
  top: 0px;
  /*right: 0px;*/
  z-index: 2;
  /*clear: both;*/
  width: 100%;
  /*height: calc(100vh - 154px);*/
  /*height:auto;*/
  height:100%;
  /*overflow: auto;*/
  /*box-shadow:0 3px 15px -4px black;*/
  border-radius:10px;
  opacity:0;
  transition: 0.5s ease-in-out;

}

.quizClose_btn{
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    font-size: 31px;
    padding: 0 5px;
    transition: 0.3s ease-in-out;
    z-index: 999;
    /* background: #fff; */
}
div#quizViewpreview1 {
    padding-bottom: 0;
    padding-right: 0;
    padding-top: 0;
    padding-left: 0;
}
.quizClose_btn:hover{
cursor: pointer;
color:orangered;
}



.quizNotifications-student .card-body{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

#quizViewpreview1 .container-fluid ,#createQuiz .container-fluid{
    height:100%;
    max-height:100%;
overflow-y:auto;
    
}


#quizViewpreview1 h1 ,#createQuiz h1{
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
}

.question_main {
/*  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 20px;*/
     min-height: 452px;

    /* overflow-y: auto; */
    overflow-x: hidden;
    /*  min-height: 469px;*/
    /*overflow-y: auto;*/
    /*overflow-x: hidden;*/
}

.student_room .question_main {margin: 15px 15px;}

.question_main h4 {
     letter-spacing: 0.05rem;
    font-size: 18px;
    line-height: 25px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 0;
    display: inline-block;
    margin: 0 0 15px;
    font-family: sans-serif;
    max-width: 85%;
}

h4#quizQuestion p {
    /*margin: 0;*/
    font-size: 18px;
     /*display: inline-block;*/
}

.question_main li {
  font-size: 13px;
  color: #696969;
}

/* pubnub */

/*#drawCanvas {*/
/*  -ms-touch-action: none;*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
/*			-webkit-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
/*  background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
/*			-moz-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
/*  background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
/*			-ms-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
/*  background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
/*			-o-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
/*  background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
/*			radial-gradient(circle farthest-side at 50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
/*  background-color: #1a5f96 !important;*/
  /*height:100vh;*/
  /*border: 5px solid;*/
  /*box-shadow: 10px 10px black;*/
  /*width:100vw;*/
  /*height: 80vh;*/
   /*bottom: 0; */
   /*height: 86vh; */
/*}*/

.instructor_room #drawCanvas ,
.instructor_room #drawCanvas1 {
  /*-ms-touch-action: none;*/
  /*position: absolute;
  top: 0;
  left: 0;*/
  /*background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
		/*	-webkit-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
  /*background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
		/*	-moz-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
  /*background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
		/*	-ms-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
  /*background: url('https://www.freeiconspng.com/uploads/tile-grid-png-6.png') left top repeat, */
		/*	-o-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
  /*background: url('../images/grid-pattern-1.png') left top repeat, */
		/*	radial-gradient(circle farthest-side at 50% 15%, #2c98dd, #1a5f96) no-repeat !important;*/
  /*background-color: #1a5f96 !important;*/
    /*  background: url(../images/grid-pattern-1.png) left top repeat !important;, */
    /*			-webkit-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;;*/
    /*background: url(../images/grid-pattern-1.png) left top repeat !important;, */
    /*			-moz-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;;*/
    /*background: url(../images/grid-pattern-1.png) left top repeat !important;, */
    /*			-ms-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;;*/
    /*background: url(../images/grid-pattern-1.png) left top repeat !important;, */
    /*			-o-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat !important;;*/
    /*background: url(../images/grid-pattern-1.png) left top repeat !important;, */
    /*			radial-gradient(circle farthest-side at 50% 15%, #2c98dd, #1a5f96) no-repeat !important;;*/
    /*background-color: #fafdff !important;;*/
  /*height:100vh;*/
  /*border: 5px solid;*/
  /*box-shadow: 10px 10px black;*/
  /*width:100vw;*/
  /*height: 80vh;*/
   /*bottom: 0; */
   /*height: 86vh; */
}
#drawCanvas:hover,
#drawCanvas:active {
  cursor: url("data:image/x-icon;base64,AAACAAEAICAAAAEAAQCoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA70aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/4yHh/8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef9XTEr/v7+//62oqP8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/V0xK/7+/v/9pXlz/6enp/8jEw/8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//aV5c/+np6f+rpKL//////87Jyf8aBgO9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/q6Si//////+vqKf/6Obl/xoGA70AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P//////r6in/+jm5f97b27/GgYDvQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj////////////o5uX/e29u/87Jyf8aBgO9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4/////////////////3tvbv/Oycn/6Obl/xoGA70AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////97b27/zsnJ///////o5uX/GgYDvQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj/////////////////e29u/87Jyf//////6Obl/xoGA70aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4/////////////////3tvbv/Oycn//////+jm5f8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////97b27/zsnJ///////o5uX/GgYDvRoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/1dMSv+/v7//1dXV/+np6f/4+Pj/////////////////e29u/87Jyf//////6Obl/xoGA70aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//2leXP/p6en/+Pj4/////////////////3tvbv/Oycn//////+jm5f8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp/6ukov////////////////97b27/zsnJ///////o5uX/GgYDvRoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj//////6+op//o5uX/VUZE/87Jyf//////6Obl/xoGA70aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4////////////6Obl/1VGRP9VRkT/zsnJ/+jm5f8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////9VRkT/GgYDNxoGAzcaBgM3GgYDvRoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj/////////////////VUZE/xoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4/////////////////1VGRP8aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj/////////////////VUZE/xoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA72rq6v/v7+//9XV1f/p6en/+Pj4/////////////////1VGRP8aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9nJqa/7+/v//V1dX/6enp//j4+P////////////////9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA72/v7//1dXV/+np6f/4+Pj/////////////////VUZE/xoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9rqys/9XV1f/p6en/+Pj4/////////////////1VGRP8aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA73CwMD/6enp//j4+P//////6Obl/1VGRP9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9wsDA/+np6f/4+Pj/6Obl/1VGRP9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGA73U0tL/4d/f/1VGRP9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO96enp/1NFQv9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABTRUL/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////z////4f///8D///+Af///AD///gA///wAP//4AD//8AA//+AAP//AAH//gAD//wAB//4AA//8AAf/+AAP//AAH//gAD//wAd//4AP//8AH//+AD///AB///wA///4Af//+AP///AH///wD///4D///+D////D////7////8="),
    pointer;
}
#colorSwatch,#colorSwatch1 {
  position: absolute;
  left: 80px;
  top: 20px;
  z-index: 999;
  transition:0.3s ease-in-out;

    
}

#colorSwatch input[type="radio"],#colorSwatch1 input[type="radio"],
#tools input[type="radio"], #tools1 input[type="radio"]  {
  margin: 0;
  display: none;
  width: 0;
}
#colorSwatch input[type="radio"]:checked + label::after,#colorSwatch1 input[type="radio"]:checked + label::after {
  content: "\2712";
  position: absolute;
  left: 6px;
  font-size: 18px;
}

#tools input[type="radio"]:checked + label::after, #tools1 input[type="radio"]:checked + label::after {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  content: "";
  position: absolute;
  top: 0;
  border: 2px solid #2f3bce;
  left: 0;
    
}

#tools input[type="radio"]:checked + label,#tools1 input[type="radio"]:checked + label {
  color: #fff;
  background: #215bc5 !important;
}

#galeryitems img {
  width: 300px;
  height: 100px;
  object-fit: contain;
}

#tools, #tools1 {
  position: absolute;
  left: 20px;
  color: #fff;
  line-height: 10px;
  top: 70px;
  z-index: 99999;
  transition:0.3s ease-in-out;

    
}

#colorSwatch label,#colorSwatch1 label,
#tools label, #tools1 label  {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  padding-right: 5px;
  border-radius: 50%;
  text-shadow: 1px 1px 2px #000;
  color: #fff;
  /* font-size: 32px; */
  line-height: 30px;
  cursor:pointer;
}

#tools label:hover, #tools1 label:hover{
background: #215bc5 !important;
}
.instructor_room #tools label:before,.instructor_room  #tools1 label:before{
      font-family: 'feather' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

}

.student_room #tools label:before,.student_room #tools1 label:before{
      font-family: 'feather' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    position: relative;
    top: 9px;
}
#tools label[for="tool01"]:before,#tools1 label[for="tool011"]:before {
  content: "\e959";
  margin-left: 9px;
  /*margin-top: 9px;*/
  /*font-family: fontawesome;*/
}

#tools label[for="tool02"]:before, #tools1 label[for="tool021"]:before {
  content: "\e9d4";
  margin-left: 9px;
  /*font-family: fontawesome;*/
}

#tools label[for="tool03"]:before, #tools1 label[for="tool031"]:before {
  content: "\e937";
  margin-left: 9px;
  font-family: fontawesome;
}

#tools label[for="tool04"]:before,#tools1 label[for="tool041"]:before {
  content: "/";
  margin-left: 13px;
  font-family: fontawesome;
}

#tools label[for="tool05"]:before, #tools1 label[for="tool051"]:before {
  content: "\f031";
  margin-left: 9px;
  font-family: fontawesome !important;
}

#tools label[for="tool06"]:before, #tools1 label[for="tool061"]:before {
  content: "\e9e3";
  margin-left: 9px;
  /*font-family: fontawesome;*/
}

#tools label[for="tool07"]:before,#tools1 label[for="tool071"]:before {
  content: "\e9bc";
  margin-left: 9px;
  /*font-family: fontawesome;*/
}

#tools label[for="tool08"]:before, #tools1 label[for="tool081"]:before {
  content: "\e9ef";
  margin-left: 5px;
  /*font-family: fontawesome;*/
}

#tools label[for="tool09"]:before, #tools1 label[for="tool091"]:before {
  content: "\e973";
  margin-left: 5px;
  /*font-family: fontawesome;*/
}

#tools label[for="tool10"]:before, #tools1 label[for="tool101"]:before {
  content: "\f245";
  margin-left: 5px;
  font-family: fontawesome !important;
}
#tools label[for="tool11"]:before, #tools1 label[for="tool111"]:before {
  content: "\e982";
  margin-left: 5px;
  /*font-family: fontawesome;*/
}
#tools label[for="tool12"]:before, #tools1 label[for="tool121"]:before {
  content: "\e9bf";
  margin-left: 5px;
  /*font-family: fontawesome;*/
}
#tools label[for="tool13"]:before, #tools1 label[for="tool131"]:before {
  content: "\f06e";
  margin-left: 5px;
  font-family: fontawesome !important;
}
#tools label[for="tool14"]:before, #tools1 label[for="tool141"]:before {
  content: "\f068";
  margin-left: 5px;
  font-family: fontawesome !important;
}

#tool07,
#tool08,
#tool09,#tool071,
#tool081,
#tool091,#tool10,#tool101,#tool11,#tool111,#tool12,#tool121,#tool13,#tool131,#tool14,#tool141{
  padding: 0;
  margin: 0;
  background: 0;
  border: 0;
}

#tools label, #tools1 label {
  background: #2e2e2e !important;
  font-size: 13px;
}

#colorSwatch label[for="color01"],#colorSwatch1 label[for="color011"] {
  background: gold;
}
#colorSwatch label[for="color02"],#colorSwatch1 label[for="color021"] {
  background: darkorange;
}
#colorSwatch label[for="color03"],#colorSwatch1 label[for="color031"] {
  background: navy;
}
#colorSwatch label[for="color04"],#colorSwatch1 label[for="color041"] {
  background: yellowgreen;
}
#colorSwatch label[for="color05"],#colorSwatch1 label[for="color051"] {
  background: firebrick;
}
#colorSwatch label[for="color06"],#colorSwatch1 label[for="color061"] {
  background: powderblue;
}
#colorSwatch label[for="color07"],#colorSwatch1 label[for="color071"] {
  background: black;
}

footer {
  margin-top: 1.5em;
}

/* Occupancy Animation */

.anim {
  transform: scale(1.5);
}
header div {
  /* float: left; */
}
.bubble {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.bubble {
  display: none;
  position: absolute;
  top: 10px;
  left: 15px;
  min-width: 38px;
  height: 48px;
  padding: 0.3em;
  display: inline-block;
  border-radius: 8px;
  line-height: 0.9em;
  color: #fff;
  text-align: center;
  background: #0142a3;
}
.bubble span {
  display: block;
  margin: 5px auto;
  font-size: 10px;
}
.bubble #occupancy {
  font-size: 32px;
}
.github {
  display: none;
}

.layerActive{
    background-color: #215bc5 !important;
    color:white;
}

.layerInActive{
    background-color: grey !important;
    color:white;
}

.flex_listing .btn-link{
    transition: 0.3s ease-in-out;
}

.list-inline .btn-link:hover{
opacity:0.7;    
}

.list-inline-btn--active{
    border: 1px solid #215bc5;
}

.quizImg{
    height: 300px;
    width: auto;
    max-width:100%;
}

.quizQuestion img{
    /*height: 300px;*/
    /*width: auto;*/
    max-width:100%;
}

.chat_open_btn{
    position:relative;
}
.notif_icon{
position: absolute;
    top: -5px;
    right: 0;
    font-size: 14px !important;
    color: orangered !important;
    background: white;
    display: inline;
    font-weight: 600 !important;
    border-radius: 50%;
    border: 2px solid white;
}


#hotspotImgDiv,#hotspotImgDiv_createQues{
    /*height:350px;width:100%;*/
    /*position: relative;*/
    /*overflow: hidden;*/
    /*vertical-align: top;*/
    /*display: inline-block;*/
  height: 800px !important;
  width: 800px !important;
  border: 1px dashed #ddd;
  overflow: hidden;
  display: inline-block;
  position: relative;
}


/*#hotspotImgDiv .quizHotspotImg{*/
/*    max-height:640px;*/
/*    max-width:800px;*/
/*}*/
div#hotspotImgDiv img ,#hotspotImgDiv_createQues img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    vertical-align: unset;
}
.hotspotCreator-hotspot{
    position: absolute !important;
    border: solid 1px #900 !important;
    background: #c00 !important;
    border-radius: 6px !important;
    min-width: 40px;
    min-height: 40px;
    opacity: 0.7;

}

#hotspotImgDiv .removeHotspot ,#hotspotImgDiv_createQues .removeHotspot{
   z-index: 999999;
  position: absolute;
  right: 0 !important;
  top: 0 !important;
  cursor: pointer!important;
  float:none !important;
}

.disableClick{
    pointer-events:none;
}

#type6-sortable li{
padding: 8px 7px !important;
background: #eee !important;
border: 2px dashed #ccc !important;
cursor: move !important;
list-style-position: inside !important;
margin-bottom: 7px !important;
}

#optionselect{
  display: flex;
  flex-direction: column;
}

#optionselect .opt-1 {
  background-image: url(./images/join.png);
  background-repeat: no-repeat;
  background-position: right center;
}

#optionselect .opt-name {
  display: block;
  width: 80%;
  min-height: 58px;
  margin-bottom: 10px;
  padding: 5px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  text-align: center;
  
}

.droppables-main {
  width: 45%;
  float: left;
}

.drop_box {
  min-height: 300px;
  width: 99%;
  float: left;
  position: relative;
  margin-bottom: 10px !important;
}

.ans-drop #draggables li {
  min-height: 58px;
  width: 98%;
  float: left;
  position: relative;
  margin-bottom: 0 !important;
  background-image: none;
  padding-left: 15px;
  box-shadow: none;
  text-align: center;
  border: 2px dashed #e8e8e8;
}

.top-drag {
  width: 100% !important;
}

.top-drag #draggables {
  width: 100% !important;
  background: #F0F0F0;
  padding: .5em;
  overflow: hidden;
  color: #222;
  margin-right: 15px;
}

#draggables ul, #droppables ul {
  padding: 0;
    padding-right: 0px;
  margin: 0;
  list-style: none;
  padding-right: 10px;
}

#draggables li {
  position: static;
  cursor: move;
  background-image: url(./images/list-dot.png);
  background-repeat: no-repeat;
  background-position: left 10px center;
  padding: 8px 15px;
    padding-left: 15px;
  padding-left: 28px;
}

.opt-1 {
  display: inline-block;
  position: relative;
  padding: 5px;
  background: #ddd;
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-image: none;
  min-width: 350px;
  border-radius: 5px !important;
  width: 100% !important;
  margin: 5px;
  font-size: 14px;
}


.resCol1 {
    width:5%;
}
.resCol2{
    width:60%;
    max-width:60%;
    word-break:break-word;

    
}
.resCol3{
    width:35%;
    max-width:35%;
    word-break:break-word;

    
}

.toastMsg{
    position: absolute;
    top: 30px;
    left: 50%;
    z-index: 9999999;
    transform: translate(-50%);
    opacity:0;
    transition: 0.5s ease-in-out;
    box-shadow: 0 2px 6px 1px black;
}
.wrongAns{
    padding: 3px;
    color: orangered;
    background-color: #ff45003b;
    border-radius: 5px;
}

.correctAns{
  padding: 3px;
  color: green;
  background-color: #00800024;
  border-radius: 5px;
}
.correctAns{
  color: green;
 
}
.quiz_nav_disabled{
 background-color: #ababab !important;
 pointer-events:none;
 color:black !important;
 
}
.active_question {
background-color: blue !important;
}

.done_question{
    background-color: darkgray !important;
    color:white !important;
}

.chat_initial{
  display: inline-flex !important;
  height: 32px;
  width: 32px;
  border-radius: 50%;
  border: 2px solid gray;
  margin-right: 7px;
  justify-content: center;
  align-items: center;
  /*font-size: 14px;*/
}

.curUserMsg{
    width: 100% !important;
display: inline-flex;
flex-direction: row-reverse;
position:relative;
}

.chat_msg{
   /*max-width: 75%;*/
    min-width: 25%;
}

.chat_msg pre{
    white-space: pre-wrap;
}

.curUserMsg .chat_msg small{
    text-align:right;
}

.chat_search_box{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
}

.chat_search_box input{
    width:90%;
    margin-top:5px;
}

.chat_search_box .feather-x-circle{
    cursor:pointer;
}

#leaderModal{
    z-index: 10003 !important;
}

.main_whiteboard_close{
 position:absolute;
 right:75px;
 top:20px;
 font-size:20px;
 cursor:pointer;
 z-index:999;
}

.disable_pointer_btn{
position: absolute;
left:25px;
top:60px;
z-index: 9999999;
    
}

#canvas_pointer{
position: absolute;
height: 8px;
width: 8px;
border-radius: 50%;
display: inline-block;
background-color: orangered;
z-index: 99999;
}

#canvas_pointer_container{
    position:absolute;
    top:50px;
    left:0;
    right:0;
    bottom:0;
    z-index:999999;
    /*background-color:#00000033;    */
}

.d-block{
    word-break:break-all;
}

.header_btns{
    background-color:#131f2c;
    color:white;
}
.header_btns:hover{
    color:white !important;
}

#app .bg_img_container{
    position:relative;
}

.bg_img_main{
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background-image: url("https://i.giphy.com/7DoOompzLEMLT5e6pc.gif");*/
  /*background-repeat: no-repeat;*/
  /*background-position: center;*/
  display: flex;
    align-items: center;
    justify-content: center;
}

.dropdownMenuButtonVideoUrl{
    left:-99px !important;
    width: 340px !important;
}

.meet_timings{
    margin:auto 3px;
    font-size:15px;
    color:gray;
}

.meet_timings_tab{
    position:absolute;
    top:53px;
    left:10px;
     margin:auto 3px;
    font-size:15px;
    color:gray;
}

.meet_timings p {
font-size: 12px;
display: inline-block;
margin-bottom: 0px;
line-height: 13px;
position: relative;
top: 5px;
margin-left: 10px;
}

.tag_list{
height: 250px;
position: absolute;
background: #f0f0f0;
right: 0;
bottom: 59px;
/*z-index: ;*/
width: 250px;
overflow-y: auto;
padding:10px;
}

.tag_list span{
    width:100%; margin:5px auto;display:inline-block;
    transition: 0.3s ease-in-out;
    text-align:center;
    word-break:break-word;
    
}

.tag_list span:hover{
    cursor:pointer;
    background-color: #e4e4e4;
    border-radius: 5px;
}

.taggedUser{
   color: black;
    font-weight: 600;
    background: #9de2ff;
   padding: 7px;
    border-radius: 5px;
    line-height: 32px;
}
.taggedCurUser{
color: black;
    font-weight: 600;
    background: #b1b1fd;
    padding: 2px;
    border-radius: 5px;
}

.close_tag{
position: absolute;    
right:2px;
top:2px;
cursor:pointer;
}

.mobile_only{
    display:none !important;
}

.refreshQuizDone{
    opacity:0;
    transition:opacity 0.3s ease-in-out;
    color:#19599d;
    margin-left:8px;
    font-size:22px;
}

.leaderboard_progress_container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    grid-gap:8px;
}



.leaderboard_progress{
    height:60px !important;
    background-color:white !important;
    position:relative;
    width:80%;
}

.leaderboard_progress .progress-bar{
    max-width:95% !important;
} 

.leaderboard_student_name{
    max-width:113px;
    word-break:break-word;
    text-align:right;
}

.leaderboard_progress_img{
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
border: 3px solid white;
z-index: 99;
    object-fit: contain;
    background: #eee;
}

.leaderboard_progress_noimg{
position: absolute;
height: 60px;
width: 60px;
border-radius: 50%;
background: #15aa00;
border: 3px solid white;
z-index: 99;
display:flex;
justify-content:center;
align-items:center;
}

.confetti_celebration{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    /*background:url('https://mavig.com/wp-content/themes/mavig/img/confetti.gif');*/
    background:url('./images/confetti.gif');
    opacity:0;
    transition:0.3s ease-in-out;
    z-index: 99;
    background-color:#80808078;

}

.confetti_legend{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    align-items:center;
    
}

.confetti_legend_item{
    display:inline-flex;
    gap:5px;
    align-items:center;
}

.confetti_legend_item span{
    display:inline-block;
    height:20px;
    width:30px;

    
}

.confetti_container{
display: flex;
/*overflow-x: auto;*/
position: absolute;
gap:20px;
/*flex-wrap:wrap;*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 70vw;
flex-direction:column;
background: white;
padding: 20px 40px;

}

.confetti_inner_container{
    width:100%;
}

.confetti_data{
    /*position:absolute;*/
    /*top:50%;*/
    /*left:50%;*/
    /*transform:translate(-50%,-50%);*/
    z-index: 999999;
    width:100%;
    /*text-align:center;*/
    display:flex;
    /*justify-content:center;*/
    border-radius:10px;
    padding:10px;
    /*align-items:center;*/
    border-radius:10px !important;
    gap:20px;
    border:2px solid gray;
    min-width:20vw !important;
    flex-direction:row !important;
}

.confetti_close{
    position:absolute;
    right:5px;
    top:5px
}
.confetti_data .confetti_img,.confetti_data .confetti_noimg{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 3px solid white;

}

.confetti_data .confetti_noimg{
    display:flex;
    justify-content:center;
    align-items:center;
}

.fastest_text{
    font-style:italic;
    font-weight:600;
    color:gray;
}

.progress_switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.progress_switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

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

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

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

/* Rounded progress_switch_sliders */
.progress_switch_slider.round {
  border-radius: 34px;
}

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

.enableScrolling{
    position:absolute;
    bottom: 30px;
    left:20px;
    z-index:10000;
}

/*.enableScrolling{*/
/*    position: fixed;*/
/*    bottom: 0px;*/
/*    right: 0px; */
/*    z-index:9999999;*/
/*}*/

.hide_tools{
  position: absolute;
  right: -41px;
  top: 50%;
  transform: translate(-50%);
  cursor: pointer;
  color: black;
  font-size: 22px;
  transition: 0.3s ease-in-out;
    
}

.hide_tools:hover{
    right:-38px;
}



 .student_room #drawCanvas{
    -ms-touch-action: none;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    cursor:
    crosshair;
    /*width: 100% !important;*/
    /*width: 98% !important;*/
    /*height: 80vh !important;*/
    /*height: 100vh !important;*/
    /*border: 5px solid;*/
    /*box-shadow: 10px 10px black;*/
    /*background: blue;*/
    /*z-index: 6 !important;*/
  }

 .student_room #drawCanvas1 {
    -ms-touch-action: none;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    cursor:
    crosshair;
    /*width: 100% !important;*/
    /*width: 98% !important;*/
    /*height: 80vh !important;*/
    /*height: 100vh !important;*/
    /*border: 5px solid;*/
    /*box-shadow: 10px 10px black;*/
    /*background: #ffc107;*/
    display: none;
  }
  
  
  .instructor_room #drawCanvas{
    -ms-touch-action: none;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    cursor:
    crosshair;
    /*width: 100% !important;*/
    /*width: 98% !important;*/
    /*height: 80vh !important;*/
    /*height: 100vh !important;*/
    /*border: 5px solid;*/
    /*box-shadow: 10px 10px black;*/
    /*background: blue;*/
    /*z-index: 6 !important;*/
  }

 .instructor_room #drawCanvas1 {
    -ms-touch-action: none;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    cursor:
    crosshair;
    /*width: 100% !important;*/
    /*width: 98% !important;*/
    /*height: 80vh !important;*/
    /*height: 100vh !important;*/
    /*border: 5px solid;*/
    /*box-shadow: 10px 10px black;*/
    /*background: #ffc107;*/
    display: none;
  }
  
  #chat_input, textarea[id^="chat_input_private"]{
      overflow: auto;
    padding: 0;
    outline: none;
    max-height:156px;
    height:30px;
    /*min-width: 70%;*/
  }
  
  /*#button-addon4{*/
  /*    display: flex;*/
  /*  justify-content: end;*/
  /*  flex-direction: column;*/
  /*}*/
  
  .button-addon4{
margin: 8px 0 8px 0 ;
}
  
  #button-addon4 span ,.button-addon4 span {
      cursor:pointer;
      /*margin:auto 10px;*/
margin: 8px 10px;
  }
  
  .popupContainer{
      z-index:999999 !important;
      min-height:560px !important;
  }
  
  .msg_delete,.msg_edit,.msg_reply{
   display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    opacity:0;
    transition: 0.3s ease-in-out;
    cursor:pointer;
  }
  
  .flex_lis:hover .msg_delete,.flex_lis:hover .msg_edit,.flex_lis:hover .msg_reply{
      opacity:1;
      pointer-events:all
  }
  .questionTypeCategory{
      display:flex;
      justify-content:space-between;
      gap:10px
  }
  
  .newQuizType {
      margin:10px ;
      display: inline-block;
  }
  
  .newQuizType label{
      margin:0 10px;
  }
  
  .newQuestionType_select,.newQuestionCategory_select{
      position:relative;
      width:100%;
      
  }
  
  .newQuestionCategory_select ul{
         max-height: 385px;
    overflow-y: auto;
  }
  .newQuestionType_select_options,.newQuestionCategory_select_options{
    /*  position:absolute;*/
      /*max-height: 424px;*/
    /*overflow-y: auto;*/
    /*width: 400px;*/
    /*background: white;*/
    /*list-style: none;*/
position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    list-style: none;
    text-shadow: none;
    padding: 0px;
    margin: 0px;
    background-color: #ffffff;
    -webkit-box-shadow: 0 1px 8px rgb(0 0 0 / 10%);
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 8px rgb(0 0 0 / 10%);
    font-size: 14px;
    font-family: "Segoe UI",Helvetica, Arial, sans-serif;
    border: 1px solid #ddd;
    
  }
  .newQuestionType_select_options li ,.newQuestionCategory_select_options li{
      margin:8px auto;
      padding:5px;
      border-radius:10px;
      transition: 0.2s ease-in-out;
  }
  .newQuestionType_select_options li:hover ,.newQuestionCategory_select_options li:hover{
    background-color:#19599D;
    color:white;
  }
  .newQuestionType_select_button,.newQuestionCategory_select_button{
      width:100%;
          color: #717171 !important;
    background-color: #ededed;
        text-align: left;
    padding: 6px 12px;
    border-radius: 4px !important;
  }
  
   .newQuestionType_select_button:hover,.newQuestionCategory_select_button:hover{
      color: #333;
    background-color: #ebebeb;
  }
  .newQuestionType_option{
      position:relative;
  }
  .newQuestionType_preview{
      position:absolute;
      left: 210px;
    background: white;
        top: -65px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 10px;
    color:black;
    
    z-index: 9999;
    max-height: 300px;
    max-width: 800px;
      
  }
  .newQuestionType_preview img{
      max-height:250px;
  }
  
  .newQuestionText{
      margin:15px auto;
  }
  
  .required_star{
      color:orangered;
      font-weight:600;
      font-size:14px;
      
  }
  
  .newQuizDifficulty,.sliderQuestionRow_1{
      display:flex;
      justify-content:space-between;
      margin:15px auto;
  }


   .required-field {
    color: #e50000;
    /* font-weight: 600; */
    font-size: 16px;
    margin: 0 5px;

    }
  
  #addMoreFill, #addMorePair, #addMoreMatrixRow_X, #addMoreMatrixRow_Y, #addMoreOrder {
    background: #169ef0;
    color: #fff;
    padding: 8px 8px 5px;
    border-radius: 3px !important;
    font-size: 9px !important;
    margin: 0 1px;
}
  
  
  #AddCategoryForm .modal-header button {
      order:2;
      
  }
  
  #AddCategoryForm .modal-body .form-group{
      width:100%;
  }
  
  .activate_modal2{
    position: absolute;
    right: 0;
    top: 32px;
  }
  .modal_category_label{
      display:flex;
      justify-content:space-between;
  }
  .modal_category_label .feather-x{
      cursor:pointer;
      font-size: 20px;
  }
  
  .newQuestionText .ck-editor__editable {
    min-height: 300px !important;
   }
   
   .info.note-info {
    padding: 15px;
    margin: 5px 0 15px;
    border: 1px solid #ddd;
    color: #333;
}

.note-info {
    background-color: #e8f6fc;
    border-color: #57b5e3;
}

.eg-heading {
    color: #fff;
    background-color: #5bc0de;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.eg-inner {
    padding: 10px;
}

.hand_raise_main{
    position:absolute;
    left:25px;
    bottom:30px;
    max-width:300px;
    word-break:break-word;
    padding:16px;
    max-height:200px;
    z-index:9999999;
    border: 1px solid black;
    border-radius: 12px;
    overflow-y:auto;

}

.hand_raise_content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin: 0 10px 20px;
    gap: 12px;

}

.hand_raise_icon{
    font-size:16px !important;

}

/*star*/

.starrating.starss{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    font-size: 0.5em;
    width: 10em;
    float: left;
  }
  .starrating.starss > input {
  display: none;
  } 
  .starrating.starss > label:before {
    font-size: 26px;

  content: "\f005"; /* Star */
  display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
  display: inline-block;
  }
  .starrating.starss > label {
  color: #222222; /* Start color when not clicked */
  font-size: 22px;
  
  }
  .starrating.starss > input:checked ~ label {
  color: #ffb901;
  content: "\f0c8";
  font-weight: 900;
  } 
  .starrating.starss > input:hover ~ label {
  color: #ffca08;
  content: "\f0c8";
  font-weight: 900;
  } 
  .starrating.square > label span {
    position: absolute;
    left: 13px;
    top: 40px;
    color: black;
    font-weight: 400;
}

.starrating.square > label {
    position: relative;
}

.starrating.starss > label {
    position: relative;
}

.starrating.starss > label span {
    position: absolute;
    top: 24px;
    left: 10px;
    color: black;
    font-weight: 400;
    font-size: 13px;

}
  .flex-row-reverse {
    flex-direction: row-reverse!important;
  }
  .justify-content-end {
    justify-content: flex-end!important;
  }
  
  
  /*Squarebox*/
  
  .starrating.square > input {
    display: none;
  }
  /* Remove radio buttons */
  
  
  .starrating.square > label:before {
    content:"\f0c8"; /* Star */
    margin: 0.2rem;
    font-size: 2em;
    font-family: "FontAwesome";
    display: inline-block;
  }
  
  .starrating.square > label
  {
    color: #222222; /* Start color when not clicked */
    margin-bottom:0;
  }
  
  .starrating.square > input:checked:nth-child(9) ~ label {
    color: rgb(220 53 72);
    content: "\f0c8";
    font-weight: 900;
  }
  .starrating.square > input:checked:nth-child(7) ~ label 
  {
    color: rgb(255 245 157);
    content: "\f0c8";
    font-weight: 900;
  }
  .starrating.square > input:checked:nth-child(5) ~ label 
  {
    color: #dce775;
    content: "\f0c8";
    font-weight: 900;
  } 
  
  .starrating.square > input:checked:nth-child(3) ~ label 
  {
    color: #8bc34a;
    content: "\f0c8";
    font-weight: 900;
  } 
  .starrating.square > input:checked:nth-child(1) ~ label {
    color: #388e3c;
    content: "\f0c8";
    font-weight: 900;
  }
  .starrating.square > input:hover:nth-child(9) ~ label {color: rgb(220 53 72);
  
  }
  .starrating.square > input:hover:nth-child(7) ~ label {color: rgb(255 245 157);
  
  }
  .starrating.square > input:hover:nth-child(5) ~ label {color: #dce775;
   
  }
  .starrating.square > input:hover:nth-child(3) ~ label {color: #8bc34a;
  
  } 
  .starrating.square > input:hover:nth-child(1) ~ label {color: #388e3c;
  
  } 
  
  


  
  .starrating.square.DES > input:checked:nth-child(9) ~ label {
    color: #388e3c;
    content: "\f0c8";
    font-weight: 900;
  }
  .starrating.square.DES > input:checked:nth-child(7) ~ label 
  {
    color: #8bc34a;
    content: "\f0c8";
    font-weight: 900;
  }
  .starrating.square.DES > input:checked:nth-child(5) ~ label 
  {
    color: #dce775;
    content: "\f0c8";
    font-weight: 900;
  } 
  .starrating.square.DES > input:checked:nth-child(3) ~ label 
  {
    

    color: rgb(255 245 157);
    content: "\f0c8";
    font-weight: 900;
  } 
  .starrating.square.DES > input:checked:nth-child(1) ~ label {
    

    color: rgb(220 53 72);
    content: "\f0c8";
    font-weight: 900;
  }
  .starrating.square.DES > input:hover:nth-child(9) ~ label {
    color: #388e3c;
  
  }
  .starrating.square.DES > input:hover:nth-child(7) ~ label {
    color: #8bc34a;
  }
  .starrating.square.DES > input:hover:nth-child(5) ~ label {color: #dce775;
   
  }
  .starrating.square.DES > input:hover:nth-child(3) ~ label {
    color: rgb(255 245 157);
  } 
  .starrating.square.DES > input:hover:nth-child(1) ~ label {
    color: rgb(220 53 72);
  } 
  
  /*number*/
  
  .starrating.number{
    display: flex;
    /* flex-direction: row-reverse; */
    /* justify-content: space-around; */
    font-size: 0.5em;
    width: 10em;
    /* float: left; */
  }
  .starrating.number > input {
  display: none;
  } 
  .starrating.number > label:before {
  content: "\f111"; /* Star */
  display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
  display: inline-block;
  }
  .starrating.number > label {
  color: #222222; /* Start color when not clicked */
  font-size: 22px;
      margin: 0 3px;
  }
  .starrating.number > input:checked ~ label {
  color: rgb(34 157 204);
  content: "\f10c";
  font-weight: 900;
  } 
  .starrating.number > input:hover ~ label {
  color: #229dcc;
  content: "\f10c";
  font-weight: 900;
  } 
  
  .starrating.number > label > span {
    position: relative;
    font-size: 11px;
    color: #ffffff;
    top: -36px;
    left: 6px;
  }
  .starsecone {
    display: flex;
}

.htmlquestion{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.htmlinput textarea{
    width:100%;
}

.htmloutput {
    max-height:500px;
    overflow-y:auto;
    width:100%;
}

.fit_header{
display: inline-flex;
justify-content: flex-end;
grid-gap: 4px;
}

.fit_header .fit_menu_btn{
  display: inline-flex;
  align-items: center;

}

.blob-1 {
  background: url(https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
  height: 100vh;
  color: #262626;
  background-size: cover;
  word-wrap: break-word;
  z-index: 999999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

#overflowbox .row {
  z-index: 999999;
  color: #fff;
}

.blob-1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000000ba;
}

.index_top {
  position: relative;
  z-index: 999999;
}

.absolute_input_opaity select {
  position: absolute;
  left: 0;
  opacity: 0;
  top: 0;
}

#overflowbox h2 {
    font-weight: bold;
    font-size: 48px;
    color: #fdfdfd;
}

#overflowbox h4 {
  font-size: 22px;
  margin: 20px 0px;
}

#overflowbox p {
  font-size: 14px;
  font-weight: normal;
}

#overflowbox img {
    height: 100px;
    width: 255px;
    object-fit: contain;
    border-radius: 8px;
    margin-bottom: 20px;
}

.positions_bottom_fixedes {
  position: fixed;
  bottom: 20px;
  left: 20px;
}

span.question_badge {
    height: 40px;
    width: 40px;
    display: inline-block;
    background: #cfcfcf;
    margin: 0 4px 4px 0;
    text-align:  center;
    vertical-align: middle;
    padding: 10px;
    border-radius: 6px;
}

span.question_badge.correct {
    background: green;
    color: #fff;
}

p.quiz_metadata {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 15px;
}

p.quiz_metadata span {
    font-weight: 500;
    word-break: break-word;
}
button.btn.closequiz {
    background: #c30000;
    color: #ffff;
    font-size: 12px;
    position:relative;
    top:-10px;
    left:10px;
}

.learner_name_initials {
    display: inline-block;
    color: green;
    padding: 2px 5px;
    border: 2px solid green;
    border-radius:20px;
   height: 40px;
    width: 40px;
    line-height: 35px;
    text-align: center;
}

.learner_full_name {
    display: inline-block;
        font-weight: 600;

}
p.answer_time_taken {
    font-size: 13px !important;
    text-transform: capitalize;
    margin: 0;
    text-transform: capitalize;
}
.learners_answer i {
    float: right;
 
    font-size: 26px;
}
.learners_answer .marks {
    float: right;
    margin:auto 3px;
 }
.learners_answer .marks input{
  width:30px;
 }
 
 .learner_answer img{
     max-width:100%;
     object-fit:contain;
 }

.learner_answer,.wait-alert {
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding: 6px 0 0;
    word-break: break-word;
}

.learner_answers {
    border: 1px solid #eee;
    padding: 11px;
    margin: 10px 0;
    border-left: 3px solid rgb(0 123 255 / 25%);
}
ul#type6-sortable {
    padding: 0;
}
.instructor_room .question_main {
    min-height: auto;
}


/*.student_room div#quizViewpreview {*/
/*   width: 94%;*/
/*    left: 0;*/
/*    margin: 0 auto;*/
/*}*/
.student_room .question_main .row:nth-child(2) {
    /*overflow-y: auto !important;*/
    /*max-height: 395px;*/
}



.connected_student_count {
    background: white;
    height: 40px;
    width: 40px;
    border-radius: 25px;
    display: inline-block;
    color: #131519;
    padding: 6px 10px;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.05em;
    z-index: 2;
    position: absolute;
    /*left: -24px;*/
    top:-1px;
    border: 4px solid gray;
    font-weight: 700;
}

.online_student {
    display: inline-block;
    z-index: 1;
    position: relative;
    left: -82px;
    height: 37px;
}

.online_student span {
  display: inline-block !IMPORTANT;
    width: 37px;
    height: 37px;
    border-radius: 30px;
    z-index: 1;
    border: 3px solid #aae2f7;
    overflow: hidden;
    background-size: contain;
    background-position: center;
    position: relative;
    text-align: center;
    line-height: 34px;
    background-repeat: no-repeat;
}

.focus_indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: #ff9f3b;
  z-index: 2;
    height: 8px;
}
    
.instructor_room .instrctorimg {
    display: inline-block;
    margin: 0 8px 8px;
    position: relative;
    /*top: -13px;*/
}

.instrctorimg {
    display: inline-block;
    margin: 0 8px 8px;
    position: relative;
    /*top: -13px;*/
}

.connected-student {
    display: inline-block;
    position: relative;
}

.instrctorimg span {
    display:inline-block;
    /*border: 3px solid #b7f4c1;*/
    height: 37px;
    width: 37px;
    border-radius: 30px;
    
        overflow:hidden;
    background-size:contain;
    background-position:center;
}


/*.online_student span:nth-child(2){
    position: absolute;
    left: 24px;
    top:0;
}

.online_student span:nth-child(3){
    position: absolute;
    left: 48px;
    top:0;

    
}
*/
li.send span.grey_text_timer {
    text-align: right;
    display: block;
    list-style: none;
}

li.send .flex_lis.curUserMsg .chat_msg {
    /*background: #f1f1ff;*/
    padding: 6px;
    border-radius: 4px;
}

li.send span.grey_text_timer::before {
    content: "";
    width: 0;
}

li.received .chat_msg 
/*p*/
{
    /*background: #ffeef1;*/
    padding: 5px;
    border-radius: 4px;
}

body.zoommeeting header {
    position: relative;
    top: 27px;
}

body.zoommeeting aside {
    position: fixed;
}

body.zoommeeting .meetframe iframe {
    top: 80px;
    position: absolute;
}

body#body main {
    position: relative;
    top: 29px;
}

body.zoommeeting  footer {
    bottom: -28px;
}

.student_room div#whiteboard .old_canvas {
       position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 503px;
    overflow-x: auto;
}


.student_room fieldset {
      width: 100%;
    /* border: 1px solid #e4e4e4 !important; */
    /* border-radius: 10px; */
    text-align: center;
    /* margin: 0 -10px 0 2px !important; */
    position: absolute;
    top: 0;
    background: #fff;
    /* margin-top: 5px !important;*/
}

.student_room #drawCanvas1 {
    -ms-touch-action: none;
  
    cursor: crosshair;

    display: none;}

.student_room #videoForPIP {
  
    height: 100px;
    width: 220px;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    /*bottom: 200px;*/
    left: 12px;
    position: absolute;
    bottom: -380px;
    z-index: 1;
}
.student_room .enableScrolling {
    position: absolute;
    bottom: 301px;
    left: 8px;
    z-index: 10000;
}
.student_room div#pdf-canvas2 canvas {
    /*transform: scale(0.6);*/
}

.student_room div#pdf-canvas2 .mycanvas {
    /*position: relative;*/
    /*left: -188px;*/
    /*    top: -250px;*/

}
.quizmetadata p {
    word-break: break-word;
}

p.passagetext {
    background: #fbfbfb;
    padding: 10px;
    border: 1px solid #dddd;
}

p.passagetext p {
    margin-bottom: 5px;
}

p.quiz_metadata.quiz_desc {
  font-size: 16px;
    color: #4c4c4c;
    font-weight: 600;
    
}
p.quiz_metadata.quiz_desc span {
   -webkit-line-clamp: 2;
    font-weight: 400;
    font-size: 14px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: #6a6969;
    letter-spacing: 0.03em;
    font-family: sans-serif;
}
p.quiz_metadata.quiztitle {
   color: #4455af;
    margin-bottom: 0;
    max-width: 85%;
    font-family: sans-serif;
   
}
p.quiz_metadata.quiztitle span {
    font-weight: 600;
    font-size: 20px;
    line-height: 1rem;
}
p.quiz_metadata.quiztimer {
    border: 1px solid #ddd;
    display: inline-block;
    padding: 3px 10px;
        margin-right: 5px;

}
.border-1 {
    border-right: 1px dashed #a2a2a2;
}
p.quiz_metadata.quiztimer span {
    color: #0052ff;
}
.added_input[disabled] {
    /*border: 0 !important;*/
    box-shadow: unset !important;
    border-color: #eee !important;
    color: #2196f3 !important;
    font-size: 20px;
    /*background: transparent !important;*/
    background: white !important;
}
.added_input[type="checkbox"] {

    height: 40px;
    width: 30px;
}
select.added_input.disabled {
    border: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: 0 !important;
    font-size: 20px;
    color: blue;
}

  .student_room  fieldset div.old_canvas {
           height: 500px;
    /* min-height: 500px; */
    width: 100%;
    /* width: 100%; */
    /* margin: 5px; */
    /* padding: 6px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    overflow-x: scroll;
    text-align: center;
    position: relative;
       
    }
    
    .student_room fieldset div.new_canvas {
        height: 500px;
    /* min-height: 500px; */
    width: 100%;
    /* width: 100%; */
    /* margin: 5px; */
    /* padding: 6px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    overflow-x: auto;
    text-align: center;
    position: relative;
       
    }
 
 #custom-timers{

    margin-top:10px;
    height: 70px;
    position: relative;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
/*#custom-timers svg{*/
/*     background-color:orangered !important;*/
/* }*/
 
.custom-timer{
height: 70px;
    position: absolute;
    top: -15px;
    width: 70px;
}

.custom-timer2{
    height: 30px;
    position: absolute;
    top: 37px;
    width:30px;
    left:50px;

    
}

.custom-timer-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 13px;
}

.custom-timer-text2{
        position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
    
    .msg_edited_text{
        text-align: right;
    font-size: 10px;
    margin: 5px auto;
    color: blue;
    font-style: italic;
    }
    
    .received .replied_to,.send .replied_to{
        font-size: 13px;
        margin: 6px auto;
        border-radius: 10px;
        padding: 10px 5px;
        cursor: pointer;
        font-style:italic;
    }

    .received .replied_to{
        background:#ffc7d1;
    }

    .send .replied_to{
        background: #bfbfec;
    }
    
    .blur_overlay{
        position:absolute;
        top:51px;
        left:0;
        bottom:0;
        right:91px;
        backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
          z-index:6;
         display:none;
          
    }
    
    .vl{
        background: black;
    height: 100%;
    width: 2px;
    }
    .online-dot{
        height:13px;
        width:13px;
        display:inline-block;
        margin:0px 10px;
        background-color:lime;
        border-radius:50%;
        position: relative;
        top: 2px;
    }
    
    .offline-dot{
        height:13px;
        width:13px;
        display:inline-block;
        margin:0px 10px;
        background-color:red;
        border-radius:50%;
        position: relative;
        top: 2px;
    }
    
    .chat_boxes{
        position:absolute;
        bottom:24px;
        left:0;
        right:0;
        display:flex;
        gap:16px;
        max-width:100vw;
        overflow-x:auto;
        align-items: flex-end;
        margin: 0 40px;
        z-index: 999999;
   
    }
    .chat_window {
        width: 350px;
        border: 1px solid black;
        transition: 0.1s ease-in-out;
        border-radius:8px;
        display:flex;
        justify-content:space-between;
        flex-direction:column;
        position:relative;
         background: white;
    }
    .chat_window .chat_window_header{
        cursor:pointer;
        padding:10px 16px;
        flex: 0 0 10%;

    }
    
      .chat_window .chat_window_header hr{
          margin:0 auto;
      }
    
    .chat_window .chat_window_body{
     
        padding:10px 16px;
        flex: 0 1 70%;
        max-width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .chat_window .chat_window_footer{
        flex: 1 0 20%;
    }
    .start_message{
        margin-left:10px;
        transition:0.2s ease-in-out;
    }
    
    .start_message:hover{
        cursor:pointer;
        color:blue;
        
    }
    
    li::marker{
        display:none !important;
            content: "";
    }

.chat-header-items{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chat-header-items .dismissChat{
    opacity:0;
    transition:0.2s ease-in-out;
    font-size:22px;
    color:orangered;
}

.chat-header-items:hover .dismissChat{
    opacity:1;
    cursor:pointer;
}

.openChat_notif_icon{
    font-size: 22px !important;
    color: orangered !important;
    background: white;
    display: inline;
    font-weight: 600 !important;
    border-radius: 50%;
    border: 2px solid white;
    position: relative;
    top: 4px;
}

.flex_lis .msg_box{
    display:flex;
}

.flex_lis .msg_tools{
    display: flex;
    justify-content: flex-end;
    /* margin-left: 14%; */
    gap: 20px;
    align-items: center;
}

#video{
    position:relative;
}
.closeVideoStream{
   position: absolute;
    right: 105px;
    top: 5px;
    z-index: 99999;
    color: orangered;
    font-size: 40px;
    background: white;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.closeAnimateStream{
   position: absolute;
    right: 105px;
    top: 5px;
    z-index: 99999;
    color: orangered;
    font-size: 40px;
    background: white;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.videoQuestionPlayer{
    height:310px;
}

.learners_answer img {
    max-width: 190px;
}

.option img{
    /*max-width: 500px;*/
max-width: 100%;    
    object-fit:contain;
}

.popupSurveyAnswers{
    display:flex;flex-wrap:wrap;
}

.create_quiz_new{
        /*width: 65%;*/
    margin: 30px auto;
}

.create_quiz_new input[type='checkbox']{
    margin-right:5px;
    
}

.create_quiz_new input[type='radio']{
    margin-right:5px;
}

.create_quiz_steps_bar li{
    color:#0481ec !important;
}
.create_quiz_steps_bar li:before{
    position:relative;
    top: 10px;
    background-color:#0481ec !important;
    border-color:#0481ec !important;
}

.create_quiz_steps_bar > li.is-active ~ li:before, .create_quiz_steps_bar > li.is-active:before{
    background-color:#fff !important;
}
.create_quiz_steps_bar li span{
    position:relative;
    top: 10px;
    
}

.create_quiz_steps_bar li.is-active:before{
    border-color:#0481ec !important;
    color:#0481ec !important;
}
.create_quiz_steps_bar .progress-bar{
    height:3px !important;
}

.create_quiz_step_0{
    margin-top:20px;
}
.create_quiz_step_0 button{
    background: white;
    color: black;
    border: 1px solid black;
    width: 200px;
    
}

.create_quiz_step_2,.create_quiz_step_3,.create_quiz_step_4{
    padding:10px 0px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.create_questions_with_ai{
     display:flex;
    flex-direction:column;
    gap:20px;
}
.create_quiz_nav{
    display:flex;
    justify-content:flex-end;
    gap:12px;
}

.create_quiz_select_ques label{
    width:100%;
    /*display:flex;*/
    /*justify-content:space-between;*/
    /*align-items:center;*/
}

.create_quiz_existing_questions{
    /*max-height: 500px;*/
    padding: 15px;
    /*overflow-y: auto;*/
    border: 1px solid lightgray;
    border-radius: 8px;
}
#createQuizDraggable,#createQuizDroppables{
 /*max-height: 60vh;*/
max-height:100%;
  /*overflow-y: auto;*/
  height:100%;
}

#createQuizDraggable{
    max-height:92% !important;
    overflow-y: auto;
}

#createQuizDraggable label{
    cursor:drag !important;
}


.create_quiz_select_categories{
     
    padding: 15px;
  
    /*border: 1px solid lightgray;*/
    border-radius: 8px;
}
.create_quiz_select_categories .categories_list{
    display: flex;
    flex-flow: wrap;
}
.create_quiz_select_categories .categories_list_item{
cursor: pointer;
    transition: 0.1s ease-in-out;
    max-width: 19%;
    min-width: 19%;
    font-size: 13px;
    clear: both;
    border: 1px solid #eee;
    padding: 12px;
    letter-spacing: 0.05em;
    color: #525252;
    min-height: 50px;
    text-align: center;
    max-height: 50px;
    margin: 4px 4px 4px !important;
    word-break: break-word;
}

.create_quiz_select_categories .categories_list_item:hover {
    color: #0481ec;    
}

.category_selected{
    border:1px solid #0481ec;
    color: #0481ec;
}

.disabled_ques{
    opacity:0.6;
    pointer-events:none;
}

.removeQuesFromSec{
    cursor:pointer;
    margin-left:5px;
        float: right;

}

.create_quiz_sections_list{
    display:flex;
    justify-content:space-between;
}

.create_quiz_sections{
  border: 1px solid #e5dfdf;
  margin: 0 auto 5px;
  background: #f3feff;
  height:100%;
  display: flex;
    flex-direction: column;

}

.create_quiz_sections .nav-tabs li{
  display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 12px;  
     gap:6px;
}
.active_tab{
    border: 4px solid #007BFF;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 12px;
    border-bottom: white;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background: #007BFF;
    color: white;
}

.create_quiz_sections .tab-content{
    border: 4px solid #007BFF;
    border-top: 2px solid #007BFF;
    height:93%;
    overflow-y:auto;
}

.create_quiz_sections h6{
padding: 5px 0;
margin:0;
}

.create_quiz_section_questions{
    padding:0 5px;
     height:100%;
    /*display:flex;
    gap:2px;*/
}

.tabpanes{
    height:100%;
}


#addMediaForm .form-group{
    width:100%;
}


.create_quiz_ques_preview{
    display:flex;
    flex-direction:column;
    gap:12px;
}

#confettichart{
    width:100%;
    height:100%;
    
}

.scramble_options{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    align-items:center;
}

.scramble_item{
    cursor:pointer;
        border: 2px solid lightblue;
    padding: 10px 12px;
    border-radius: 12px;
}

.disabled{
    pointer-events:none;
    opacity:0.7;
}

.disabled2{
    background:#dfdfdf;
    pointer-events:none;
    opacity:0.7;
}

  #displayUsersTable{
            height: 70vh !important;
    overflow-y: auto !important;
    }

/*.loadingQuesList{*/
/*     display:flex;*/
/*    justify-content:center;*/
/*    align-items:center;*/
    
/*    position:absolute;*/
/*    left:50%;*/
/*    top:50%;*/
/*    transform:translate(-50%,-50%);*/
/*        background: #e3e3e33b;*/
/*}*/
.quizListCardContainer{
    max-height:60vh;
    overflow-y:auto;
}
.quizListCard{
    gap:20px;
    flex-wrap:wrap;
    display: flex;
    justify-content: center;
}
.quizListCard .card-image img{
    max-width:100%;
    object-fit:contain;
}
.quizListCard .card{
    width: 400px;
    height:300px;
    /*margin:20px auto;*/
        align-items: center;
    justify-content: space-between;
    padding: 10px;

}
.quizListCard .card-body{
        display:flex;
        flex-direction:column;
        align-items: center;
    justify-content: space-between;

}

.quizListCard .card p{
    max-height:130px;
    overflow-y:auto;
}
.quizListCard .card:hover{
    cursor:pointer;
}
.sliderImgsCount,.sliderInstructions  {
    width:43%;
    
}


.slider_image_item{
    height:400px;
    max-width:100%;
    object-fit:contain;
    max-height:100%;
}

.image-sliderfade{
    transition: all 0.2s ease-in-out;
}
.sliderImgs_result{
    display:flex;
    gap:20px;
    align-items:flex-start;
    flex-wrap:wrap;
}
.sliderImgs_result img{
    height:100px;
    object-fit:contain;
    max-width:100%;
     max-height:100%;
    
}

/*crossword css*/

#crossword_modal .modal-dialog{
    margin: 40px 0 0 !important;
}

#crossword_modal .modal-dialog .modal-content{

    width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}
#appbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #2a797a;
        color: white;
        z-index: 313;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
      }
      .abitem {
        padding: 20px;
        display: inline-block;
      }
      .noad {
        text-align: center;
      }
      .noad button {
        border: none;
        background-color: blue;
        color: white;
        padding: 10px;
        border-radius: 5px;
        margin: 5px;
      }
      #drawer {
        background-color: #e6e6e6;
        width: 512px;
        max-width: 85%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        padding-top: 70px;
        display: none;
        overflow: auto;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
      }

      #crossword {
        text-align: left;
      }

      .crossword {
        border-collapse: collapse;
        font-family: "Courier New", Courier, monospace;
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .crossword td {
        border: 1px solid black;
        padding: 0;
        margin: 0;
        vertical-align: middle;
        padding: 0;
        text-align: center;
        width: 30px;
        height: 30px;
      }

      .no-border {
        background-color: gray;
      }

      .crossword .no-border {
        border: none;
      }

      #clues {
        font-size: 13px;
        margin: 10px auto;
      }

      #clues td {
        vertical-align: top;
        margin: 0 auto;
        text-align: left;
        padding: 5px;
      }

      .canswer {
        display: none;
      }

      /* custom css start */
      #crossword td {
        padding-top: 10px !important;
        /* width: 50px !important; */
        height: 30px !important;
      }

      #crossword td > input {
        border: none;
        width: 80%;
        height: 85%;
        text-align: center;
        font-size: 20px;
      }
      #crossword td > input:focus {
        outline: none;
      }

      #crossword table {
        min-width: 40vw;
        max-width: 100%;
      }

      #crossword td {
        background-repeat: no-repeat;
      }

      #ttscontainer {
        display: flex !important;
        flex-wrap: wrap;
      }
      #ttscontainer #crossword {
        flex: 1 0 60%;
      }
      #ttscontainer #clues {
        flex: 0 1 40%;
      }

      .match {
        border: 1px solid greenyellow !important;
        color: black !important;
        background-color: greenyellow !important;
      }
      .match input {
        color: black !important;
        background-color: greenyellow !important;
      }

      .no-match {
        border: 1px solid orangered !important;

        color: red !important;
      }
      .no-match input {
        color: red !important;
      }
      /* custom css end */

    #game th {
        text-align: left;
        font-weight: bold;
        padding: 5px;
      }
      #game ul, #game
      li {
        list-style-type: none;
        list-style-position: inside;
        margin: 0;
        margin-right: 5px;
        padding: 0;
        margin-bottom: 10px;
      }

      #game {
        margin-bottom: 10px;
        padding: 10px;
        display: none;
      }

      .ditem {
        padding: 10px;
        border-bottom: 1px solid black;
        margin-bottom: 3px;
      }

/*crossword css end*/

/*new quiz ui css*/
/*@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&family=Work+Sans:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

  body{
    font-family: 'Rubik', sans-serif !important;
    color: rgb(60 61 105);
  }*/

  .customPopup p{
  	font-size: 15px;
  }

.customPopup .ctmRadioBtnSec{
    max-height: 47vh;
    overflow-y: auto;
}
.customPopup .ctmRadioBtnSec.devheight{
    max-height: 64vh !important;
    overflow-y: auto;
}


input:disabled + label.container2 {
  pointer-events: none !important;
  opacity: 0.7 !important;
}
.inutanswer img{
    max-width:100%;
    max-height:800px;
    object-fit:contain;
}
.quesPreviewSec h6{
    display:flex;
    align-items:center;
}
.quesPreviewSec h6 input[type='radio'],.quesPreviewSec h6 input[type='checkbox']{
   width:25px;
       margin-right: 6px;

}

.quesPreviewSec .card-header{
        display: flex;
    justify-content: space-between;
}

#quizViewpreview1 .row{
    width: 100%;
    margin: 0;
    
}

#quizViewpreview1{
    transform:translate(-50%);
    top:-20px;
    overflow-x:hidden;
    max-height: 85vh;
}

/*--------------Custom Progress Bar---------*/
.customPopup .ctmProgressBar p {
    position: relative;
    margin: 0;
    top: 2px;
    z-index: 1;
    font-size: 20px;
    font-weight: 500;
}

.customPopup .ctmProgressBar.d-flex.justify-content-between.align-items-center.p-3 {
    /*margin-bottom: 20px;*/
    padding-top: 7px !important;
}

.customPopup p.ctmStepnumber{
    margin: 0;
    z-index: 1;
    font-weight: 500;
    position: absolute;
    right: 33px;
    font-size: 12px;
    top: 22px;
    color: #3a3a3a;
}

.customPopup .progress{
    width: 35px;
    height: 35px;
    line-height: 65px;
    background: none;
    margin: 0 auto;
    box-shadow: none;
    position: absolute;
    right: 45px;
}
.customPopup .progress:after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
}
.customPopup .progress > span{
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}
.customPopup .progress .progress-left{
    left: 0;
}
.customPopup .progress .progress-bar{
    width: 100%;
    height: 100%;
    background: none;
    border-width: 5px;
    border-style: solid;
    position: absolute;
    top: 0;
}
.customPopup .progress .progress-left .progress-bar{
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
}
.customPopup .progress .progress-right{
    right: 0;
}
.customPopup .progress .progress-right .progress-bar{
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards;
}
.customPopup .progress .progress-value{
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: #fff;
    font-size: 8px;
    line-height: 34px;
    text-align: center;
    position: absolute;
    top: 5%;
    font-weight: 600;
    color: #444;
    left: 5%;
}
.customPopup .progress.blue .progress-bar{
    border-color: #4d4b4b;
}
.customPopup .progress.blue .progress-left .progress-bar{
    animation: loading-2 1.5s linear forwards 1.8s;
}
 
.customPopup .progress-left .progress-bar{
    animation: loading-3 1s linear forwards 1.8s;
}

.customPopup .progress-left .progress-bar{
    animation: loading-4 0.4s linear forwards 1.8s;
}

.customPopup .progress-left .progress-bar{
    animation: loading-5 1.2s linear forwards 1.8s;
}
@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-2{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
@keyframes loading-3{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@keyframes loading-4{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

.answerboxes .ck-editor__editable {
    min-height: 150px !important;
}



.generateQuesFromPdf{
        display: flex;
    flex-direction: column;
    gap: 20px;
    
}

.allFileDataHaystack{
    max-height: 50vh;
    overflow-y: auto;
   
}

.haystackFilesCheckbox{
    display: flex;
    gap: 60px;
    align-items: center;
    
}

.haystackFilesCheckbox input{
    height: 20px;
    width: 20px;
}

.haystackFilesCheckbox .paragraphContainer{
    flex: 0 0 90%;
}

.haystackFilesCheckbox .paragraphContainer p {
     text-align: justify;
 }
 
.pdfChapterInfo {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.pdfChapterInfo .pdfInfoWithActions{
    display:flex;
    gap:20px;
    align-items:center;
}

.loadingQuesList{
    display:flex;
    justify-content:center;
    align-items:center;
    position:fixed;
    z-index:999;
    width:100vw;
    height:100vh !important;
    overflow:hidden;
    left:-51px;
    top:50px;
    right:0;
    bottom:0;
    background: #e3e3e352;
}

.inlineFlex{
    display:inline-flex;
    gap:10px;
    align-items:center;
}

.inlineFlex label{
    margin:0 !important;
}
@media only screen and (max-width: 990px){
    .progress{ margin-bottom: 20px; }
}

.bigQuestionLabel{
    min-height:200px !important;
}

.question_list_sub_questions{
    max-height:100%;
    overflow-y:auto;
}

.question_list_sub_questions .ques_text{
    display:flex !important;
}

.question_list_sub_questions {
    padding-top:20px;
}

.subQList{
    display:flex;
    flex-direction:column;
}


/*------Custom Radio btn start------------*/
/* The container */
.customPopup .container1 {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.customPopup .container1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.customPopup .container1 .checkmark {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 20px;
  width: 20px;
  background-color: #3b30861a;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.customPopup .container1:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.customPopup .container1 input:checked ~ .checkmark {
  background-color: #3b3086;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.customPopup .container1 .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.customPopup .container1 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customPopup .container1 .checkmark:after {
 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
/*------Custom Radio btn end------------*/


/*------Custom Checkbox Start------------*/

/* The container */
.customPopup .container2 {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    background: #d6d5dd2b;
    border: 1px solid #f1f1f1;
    padding: 10px 15px 5px;
    cursor: pointer;
    font-size: 14px;
    /* box-shadow: 0px 8px 15px 0px #7e76b41a; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-left: 2px solid green;
}

.customPopup .container2.cntManual{
  border-left: 2px solid #3F51B5;
}
.customPopup .ctmCheckBoxSec {
    margin: 10px 0;
}

.customPopup .container2 h5{
  font-size: 16px;
}

/* Hide the browser's default checkbox */
.customPopup .container2 input:not(.markInput) {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.secSeven .input{
    opacity:1 !important;
}

/* Create a custom checkbox */
.customPopup .container2 .checkmark {
  position: absolute;
  top: 10px;
  right: 10px;
  height: 25px;
  width: 25px;
  background-color: #3b308612;
}

/* On mouse-over, add a grey background color */
.customPopup .container2:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customPopup .container2 input:checked ~ .checkmark {
  background-color: #3b3086;
}

/* Create the checkmark/indicator (hidden when not checked) */
.customPopup .container2 .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.customPopup .container2 input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.customPopup .container2 .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.customPopup .SecSevenBodyRight {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    width: 50%;
     height: 70vh;
}

.customPopup .SecSevenBodyLeft {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    width: 50%;
     height: 70vh;
}

.customPopup .SecSevenMiddle{
    margin: auto;
    flex: 0 0 3%;
    display: flex;
    justify-content: center;
}

.customPopup .SecSevenMiddle i{
    font-size:32px;
}

.customPopup .modal-footer {
    z-index: 1;
}


/*---Step One-----*/



.customPopup .cc-selector input:checked +.drinkcard-cc:before {
    background: #e66bba;
    position: absolute;
    content: '';
    width: 240px;
    height: 240px;
    z-index: -1;
    left: -20px;
    border-radius: 10px;
}

.customPopup .cc-selector input:checked +.drinkcard-cc {
    filter: none;
    position: relative;
}

.customPopup .drinkcard-cc span {
    position: relative;
    top: 95%;
    margin-bottom: 20px;
    font-weight: 500;
}

.customPopup .cc-selector input{
    margin:0;
    padding:0;
    appearance:none;
}



.customPopup button#next {
    background: #3b3086;
    border: transparent;
    padding: 10px 20px;
    transition: 0.5s;
}

.customPopup button#back {
    border: transparent;
    padding: 10px 20px;
    color: #555;
    transition: 0.5s;
}

.customPopup button#next:hover, .customPopup button#back:hover {
	box-shadow: 0 5px 10px #4e3dc059;
}

.customPopup .serType {
	padding: 19px 50px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    transition: 0.5s;
    margin: 0 20px;
    cursor: pointer;
}

.customPopup .serType:hover {
    background: #eeeaf5;
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    transform: translateY(-10px);
}

.customPopup .secHeader h4{
	padding: 20px 0;
}

.customPopup .modal-content{
	overflow: hidden;
}

.customPopup .serType h5 {
    margin: 10px 0 0;
    color: #312a4e;
}

.customPopup .bgImgOne{
	width: 52px;
    position: absolute;
    top: -35px;
    left: 0;
    z-index: 0;
}

.customPopup .bgImgOne.imgSec{
	right: 0; left: auto;  transform: rotate(180deg); bottom: 0; position: absolute;top: auto;z-index: 0;
}

.customPopup img.serImg {
    width: 90px;
}



.customPopup .switch {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 22px;
  margin:0;
  top: 7px;
  right: 16px;
}

.customPopup .switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

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

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

.customPopup input:checked + .slider {
  background-color: #3b3086;
}

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

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

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

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








.customPopup .searchForm {
    position: relative;
    margin-right: 15px;
}

.customPopup .searchForm svg {
    position: absolute;
    top: 14px;
    left: 10px;
}

.customPopup .searchForm input.form-control {
    padding: 20px 5px 20px 30px;
}

.customPopup .btnsgroup button {
    border: 1px solid #3b3086;
    color: #3b3086;
   padding: 6px 10px;
    margin: 0 0px;
    font-size: 15px;
}

.customPopup .btnsgroup button:hover {
    background: #5f51bb;
    border: 1px solid #5f51bb;
        color: #fff;

}

.customPopup .secHeader.text-center {
    padding: 0 10px;
    margin: -20px;
    background: #f7f7f7;
    border-bottom: 1px solid #c395e9;
}

.customPopup .secTwoBody {
    padding: 0px 0 10px;
}

.customPopup .selQuiz {
    padding: 10px;
    background: #fdfdfd;
    margin: 20px 0;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    transition: 0.5s;
}

.customPopup .selQuiz:hover {
	/*box-shadow: rgb(78 85 90 / 23%) 0px 4px 4px 0px;*/
    background: rgb(216 214 233);
    /*transform: translateX(10px);*/
}

.customPopup .selQuiz p {
    margin: 0;
    font-size: 14px;
}

.customPopup .secTwoBodyTwo svg {
    width: 17px;
    margin-right: 3px;
    position: relative;
    top: -1px;
}

.customPopup .ctmRadioBtns label.container1 {
    padding: 10px 40px;
    background: #fdfdfd;
    border-radius: 10px;
    border: 1px solid #f3f1f1;
}

.customPopup .modal-dialog.crtNewQuiz .modal-body {
    padding: 20px 20px 10px;
}

.customPopup .modal-dialog.crtNewQuiz .modal-body h6 {
    margin-bottom: 20px;
}

.customPopup .quizSec p {
    margin: 0;
}

.customPopup .quizFooterLeft p {
    margin-right: 10px;
    padding: 5px 15px;
    background: #e66bba;
    border-radius: 50px;
    color: #fdfdfd;
    font-weight: 400;
    font-size: 12px;
}


.customPopup .btn.btn-primary.ctmPrimaryBtn {
  background: #3b3086;
  border: transparent;
  padding: 8px 12px;
  font-size: 13px;
  width: 130px;
  margin: 0px 5px;
}

.customPopup a.btn.btn-primary.ctmPrimaryBtn.btn-lg, .customPopup button.btn.btn-primary.ctmPrimaryBtn.btn-lg {
    font-size: 18px;
    padding: 10px 20px;
}

.customPopup button.btn.btn-primary.AddNewBack {
    background:#50bfbc;
    border: transparent;
    padding: 9px;
    font-size: 14px;
}

.customPopup .secTwoBodyOne {
	 position: relative;
	 z-index: 1;
	 padding: 10px;
	 /*margin: -20px -20px 20px -20px;*/
	 background: #edeaff;
	 border-bottom: 1px solid #ada7d7;
}


.customPopup .secTwoBodyOne h4{
    text-align:left;
        padding: 0;
    margin: 0;
}

.customPopup .question.active {
    position: relative;
    z-index: 1;
}

.customPopup .quizSec input.form-control {
    height: 50px;
}

.customPopup .secFour .ctmForm label {
    font-size: 13px;
    margin-bottom: 0;
    color: #353338;
        font-weight: 600;

}



.customPopup .secNine .form-group label {
    letter-spacing: 0.03rem;
    font-size: 1rem;
    font-weight: 600;
}
.customPopup .secFour .ctmForm {
    padding: 0 20px 15px;
}

.customPopup .SecFive .quizAlert.text-center {
    padding: 30px;
}

.customPopup .quizSec {
    padding: 20px 30px;
}

.customPopup .quesType p {
    position: relative;
    padding-left: 15px;
}

.customPopup p.quesManual:before {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3F51B5;
    content: '';
    top: 5px;
    left: 0;
}

.customPopup p.quesAI:before {
    position: absolute;
    width: 10px;
    height: 10px;
    background: green;
    content: '';
    top: 5px;
    left: 0;
}






.customPopup .secNineBody .ctmCheckBoxSec {
    display: flex;
    flex-wrap: wrap;
}

.customPopup .secNineBody .form {
    display: block;
}

.customPopup .secNineBody .ctmCheckBoxSec label.container2 {
 width: 30%;
    margin: 5px;
    border: none;
    padding: 8px;
    background: #fff;
    border: 1px solid #eeeeee75;
    border-radius: 5px;
    box-shadow: 0px 8px 15px 0px #7e76b41a;
    min-height: 50px;
}

.customPopup .secNineBody .ctmCheckBoxSec label.container2 span.checkmark {
    top: 13px;
    right: 13px;
}

.customPopup div#myModal2 .form-group .form-control {
    height: 45px;
}

.customPopup .quesDefLevel span.checkmark {
    top: 0px;
    left: 0;
}

.customPopup .quesDefLevel label.container1 {
    margin-right: 20px;
    padding-left: 25px;
}

.customPopup .secTen label.container1 {
    background: #fff;
    padding: 10px 10px 10px 40px;
    display: block;
    width: 40%;
    border-radius: 5px;
    border: 1px solid #eeeeee75;
    border-radius: 5px;
    box-shadow: 0px 8px 15px 0px #7e76b41a;
}

.customPopup .secTen small {
    display: block;
    margin-bottom: 15px;
}

.customPopup .secFifteen .ctmCheckBoxSec label.container2 {
    background: transparent;
    padding: 0;
    border: none;
    width: 100%;
    padding-left: 37px;
}

.customPopup .secFifteen .ctmCheckBoxSec .container2 span.checkmark {
    right: auto;
    left: 0;
}





.customPopup #container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.customPopup .box {
  width: 100%;
  max-width: 562px;
  padding: 15px;
}
.customPopup .box h1 {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: 1px;
  text-align: center;
}
.customPopup .form {
 /* display: grid;
  grid-template-columns: 48% 48%;
  grid-column-gap: 6%;
  margin-top: 10px;
  min-height: 44vh;*/
      min-height: 44vh;
    display: flex;
    gap: 10px;
}
.customPopup .custom-radio-button__container input[type="radio"] {
  display: none;
}

.customPopup .custom-radio-button__container input[type="radio"]:checked + .custom-radio-button svg.feather.feather-clipboard {
    color: #fdfdfd;
}

.customPopup .custom-radio-button__container input[type="radio"]:checked + .custom-radio-button svg {
    color: #fdfdfd;
}

.customPopup .custom-radio-button {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 20px;
    padding: 30px 10px 20px;
    border: 2px solid #979797;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    color: /*#a19eb7*/ black;
    min-height: 35vh;
        width: 287px;

}

.customPopup .custom-radio-button svg {
    width: 40px;
    height: 40px;
    margin-bottom: 20px; color: #a19eb7;
}
.customPopup .svg-designer {
  stroke: #979797;
}
.customPopup .svg-developer {
  fill: #979797;
}
.customPopup .custom-radio-button h3 {
  color: #979797;
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: 1px;
  text-align: center;
}
.customPopup .custom-radio-button__container input[type="radio"]:checked + .custom-radio-button {
    border: 2px solid #3b3086;
    box-shadow: 0px 0px 16px -6px rgb(0 0 0 / 22%);
    background: #3b3086;
    color: #fdfdfd;
}
.customPopup .custom-radio-button__container input[type="radio"]:checked + .custom-radio-button h3 {
  color: #e94174;
}
.customPopup .custom-radio-button__container input[type="radio"]:checked + .custom-radio-button .svg-designer {
  stroke: #e94174;
}
.customPopup .custom-radio-button__container input[type="radio"]:checked + .custom-radio-button .svg-developer {
  fill: #e94174;
}
/*new quiz ui css end*/



.override_on_load_quiz{
    transform:none !important;
    left:30px !important;
    top:-20px !important;
    width:90vw !important;
}

.override_on_load_quiz_student{
    transform:none !important;
    left:30px !important;
    top:20px !important;
    width:90vw !important;
}

.override_on_load_quiz_student textarea{
    resize:none;
}
.loadQuiz_chatbox_active_width{
     width:80vw !important;
}

#quizPreviewModal .pdf-canvas2{
    pointer-events:none;
    opacity:0.8;
}

#quizPreviewModal .modal-body{
    max-height: 85vh;
    overflow-y: auto;
    
    

}


#quizPreviewModal table {
    table-layout: fixed;
}

#quizPreviewModal .mycanvas{
    width:35vw;
}
#quizPreviewModal canvas{
    width:35vw;
}

#quizPreviewModal .quizClose_btn{
font-size: 25px !important;
}


#quizPreviewModal .match-column-outer .drop_box li{
    min-width: auto;
    max-width: 100%
}

#quizPreviewModal .match-column-outer {
    flex-direction: column;
}

#quizPreviewModal .optionselect-main {
    flex: 0 0 50%;
}

 #quizPreviewModal .droppables-main{
    flex: 0 0 50%;
}

#quizPreviewModal .connectedItemsExample li{
    height: auto;
    display:flex;
    flex-wrap:wrap;
}

.isDisplayAILoader {
    width: 463px;
    word-break: break-word;
    color: #fff;
    margin: 22px;
    text-align: center;
}

.btnsgroup_option{
    display:flex;
    gap:20px;
    margin-bottom: 0;
}

.btnsgroup_option div{width: 100%;position: relative;}

.btnsgroup_option button{
        /* display: flex; */
        /* word-break: keep-all; */
        max-width: 100%;
        gap: 10px;
        justify-content: space-between;
        height:100%;
        align-items:center;
        height: auto;
        min-height: -webkit-fill-available;
    min-width: -webkit-fill-available;
}

.studentResultPlayer{
    height:300px;
    width:400px;
}

.answerPreviewExplanation{
        border: 2px solid lightgray;
    padding: 20px;
    border-radius: 10px;
}

.custom-radio-button__container{
    position:relative;
}
.quizPreview_optionChecked{
    position:absolute;
    top:10px;
    right:10px;
}

.quizPreview_optionChecked i {
color:limegreen;
font-size:24px;
    
}

.backBtn{
background: #d5d5d5 !important;
}

.typedetails{
    text-align: center;
}

.promptPreviewInQuesPreview{
    border:1px solid lightgray;
    padding:12px;
    margin-bottom: 10px;
    
}

.directQuizOpenFlag {
        top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
    position: absolute !important;
    padding: 0 !important;
}

.prompt_suggestion_categories{
    display:inline-flex;
    gap:15px;
    min-width: 200px;
    
}
.show_suggested_prompts .container2{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:20px;
    width:300px;
    height:50px;
}

.show_suggested_prompts .container1 .checkmark{
    top: 0 !important;
}

.question_draggable img,.question_droppable img{
    max-width: 100%;
    border-style: none;
    max-height: 300px;
    object-fit: contain;
}

.question_draggable .ques_text,.question_droppable .ques_text{
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    display: inline-block;
    max-height:100px;
}

.question_draggable{
    max-width:50vw;
}

.ques_drag_drop_view{
    display:flex;
    align-items:center;
}

.ques_drag_drop_view .ques_text{
    flex: 0 0 85%;
}

.ques_drag_drop_view .markInput{
    flex: 0 0 5%;
    height:20px;
}

.ques_drag_drop_view span{
         flex: 0 0 5%;
    margin-top: 60px;
 }
 
 
.ques_drag_drop_view button:first-child{
    flex:0 0 5%;
}

#questionPreview .modal-body{
    max-height: 75vh;
    overflow-y: auto;
}
@media(max-width:1400px){
    .quizListCardContainer{
    max-height:45vh;
}
.quizListCard .card{
    width: 300px;
    height:300px;
}
}

.loaderFor_directQuizOpenFlag{
    top: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
}

.prompt_list_slide{
    display:flex;
    gap:20px;
    overflow-x:auto;
    max-width:100%;
    margin-top:15px;
}

.prompt_list_slide .card{
    display:inline-flex !important;
    cursor:pointer;
    border-radius:12px;
       max-width: 400px;
    text-overflow: ellipsis;
    flex: 0 0 25%;
    margin-bottom: 20px;
}


.fade_deleted{
    opacity:0.7;
    pointer-events:none;
}

 #colorSwatch{
        display: inline-flex;
        gap: 10px;
    }
    
   .whiteboard .select{
        position: revert !important;
    }
    
    
    .show_suggested_prompts{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

 .show_suggested_prompts .selectLangResponse{
    display: flex !important;
    justify-content: space-between;
    width: 50%;
 }
 .show_suggested_prompts .selectLangResponse select{
     width: 50%;
 }
 
  .match-column-outer  .drop_box{
            display: inline-flex;
    flex-direction: column;
    gap: 10px;
}

 .match-column-outer  .drop_box li{
     height:200px;
     /*margin:5px auto;*/
     display:flex;
     justify-content:center;
     top: 6px;
      min-width: 20vw;
    max-width: 20vw;
     align-items:center;
 }
    
    .match-column-outer .opt-1{
          min-width: 20vw;
    max-width: 20vw;
    height: 200px;
    
        
    }
    
     .match-column-outer .opt-1 .opt-name{
         height: 100%;
}

 .match-column-outer .opt-1 .opt-name img{
     max-height:100%;
 }
    
    .mtp_container{
        display:flex;
        gap:60px;
    }
    
    .connectedItemsExample{
        display:flex;
        gap:25px;
        
    }
    
    .connectedItemsExample li{
            height: 200px;
    max-width: 20vw;
    }
    
    .match-column-outer  .drop_box li img{
        max-height: 100%;
    }
    
    .match-column-outer{
        display: flex;
    gap: 30px;
    }
    
    
    .flex-item-inline{   display:inline-flex;
    align-items:center;
    gap:10px;
    }
@media (max-width:600px){
    
    #hotspotImgDiv{
     height: auto !important;
     width:auto !important;
    }
    #hotspotImgDiv img{
        height: auto !important;
        
        max-width:100%;
    }

    
    .match-column-outer  .drop_box{
        display: inline-flex;
        flex-direction: column;
        gap: 10px;
}

.match-column-outer{
    flex-direction:column;
}

 .match-column-outer  .drop_box li{
     height:100px !important;
     /*margin:5px auto;*/
     display:flex;
     justify-content:center;
      min-width:30vw;
     max-width:35vw;
     top: 6px;
     align-items:center;
 }
 
 .connectedItemsExample{
     flex-wrap:wrap;
 }
 
 .connectedItemsExample li{
            height: 120px;
    max-width: 100%;
    }
    
     .connectedItemsExample li img{
         max-height:100%;
     }
    
    .match-column-outer .opt-1{
        min-width:30vw;
        max-width:35vw;
        height:100px;
        
    }
       .quizListCardContainer{
    max-height:38vh !important;
}
    
    .confetti_legend{
        flex-wrap:wrap !important;
    }
    
    .confetti_container{
        padding: 20px !important;
    }
    
    .confetti_data{
        flex-direction:column !important;
        text-align:center;
        align-items:center;
    }
    .create_quiz_existing_questions{
    padding:8px !important;
        
    }
    .create_quiz_existing_questions .col-sm-6{
    margin-bottom: 20px;
}

    
    #createQuizDraggable, #createQuizDroppables {
        max-height:280px !important;
    word-break:break-word;
}

.create_quiz_sections {
    min-height:250px !important;
}

div#resultModal .modal-dialog{
    max-width:100vw;
}

.leaderboard_progress_bar{
    flex: 0 0 70% !important;    
}

.student_room #whiteboard {
  position: relative !important;
}

#app .bg_img_container {
    position: initial !important;
}
    
.custom-timer{height: 50px;position: absolute;top: 0px;width: 50px;font-size: 5px;}

.custom-timer2{
    height: 30px;
    position: absolute;
    top: 37px;
    width:30px;
    left:50px;

    
}
#custom-timers {
  
    height: 50px;
 
    width: 50px;

}

.custom-timer-text{
  
    font-size: 11px;
}

 

.chat_boxes{
    background:white;
    z-index:9999999;
}

.chat_boxes_mobile_trigger{
    position: absolute;
    right: 13vh;
    z-index: 99999;
    font-size: 32px;
    transition: 0.3s ease-in-out;
    top: 10vh;
}
.chat_boxes_mobile_view{
   position: absolute;
    right: 20px;
    height: 80vh;
    width: 10vh;
    background: white;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid gray;
    padding: 10px;
    z-index: 999;
    align-items: center;
    overflow-y: auto;
}
.chat_boxes_mobile_view li{
    display:flex;
    flex-direction:column;
    gap: 8px;
    align-items: center;    
}

 .customPopup .form {
    
    flex-direction:column !important;
  }
  
  .customPopup .custom-radio-button{
    min-height: 0 !important;
    width: 100%;
    height: 250px;
  }
  
  .secTwo .btnsgroup_option {
      flex-direction:column !important;
  }
  
  .secTwo .btnsgroup_option button{
      text-align:left;
  }
  
  .secTwoBodyOne .refreshSearch{
      flex-direction: column;
    margin: 15px 0;
  }
  
  .secTwoBodyTwo .selQuiz{
      flex-direction:column !important;
      gap:10px !important;
  } 
  
  .secNineBodycontent .quesDefLevel{
      flex-direction: column !important;
    gap: 12px !important;
  }
  
  .secNineBody .ctmCheckBoxSec label.container2 {
      width:100% !important;
  }
  
  .prompt_list_slide .card {
      flex:0 0 55% !important;
  }
  
  .secTen label.container1{
      width:100% !important;
  }
  
 .quesPreviewSec .card-header {
     flex-direction:column !important;
 }
 
 .secSix .secTwoBodyOne{
         flex-direction: column;
    gap: 10px;
 }
 
 .secSix .secTwoBodyOne .searchForm{
     margin: 0  !important;
 }
 
 .SecSevenBody {
     flex-direction:column !important;
 }
 .SecSevenBodyLeft,.SecSevenBodyRight{
     width:100% !important;
 }
 
 .SecSevenMiddle button{
     transform: rotate(90deg);
 }
 
 .secTwo .secTwoBodyOne{
      flex-direction:column !important;
 }
 
 .secTwo .secTwoBodyOne .searchForm{
     margin: 0  !important;
 }
 
 .isDisplayAILoader{
     width:300px !important;
 }
 
 .quesPreviewSec{
     word-break:break-word !important;
 }
 
 .secSeven .secTwoBodyOne{
       flex-direction:column !important;
       gap:12px !important;
 }
 
 .ques_drag_drop_view{
     flex-direction: column !important;
    gap: 12px;
 }
 
 .question_draggable{
     max-width:65vw !important;
 }
 
 .viewSubQuesBtn{
    margin-top: 10px;
    margin-left: 30px;
 }
 
 .customPopup .secFour .ctmForm {
    padding: 0 0px 15px !important;
}
 
 .ctmProgressBar {
    gap: 12px;
    flex-direction: column;
     
 }
 
 .chat_listing_system {
     max-height:92vh !important;
 }
 
 
 
    
     .asktodraw{
        width:100% !important;
    }
    
#tools{
    top:70px !important;
    left:6px !important;
}

.show_suggested_prompts{
    flex-direction:column !important;
    
}
 .show_suggested_prompts .selectLangResponse{
     width: 100% !important;
 }

}
@media (max-width: 520px) {
    
table.table.table-bordered.table-striped.table-hover.table-responsive:after {
    height: 100%;
    width: 20px;
    background: #4f4f4fe0;
    color: #fff;
    content: '🠮';
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

table.table.table-bordered.table-striped.table-hover.table-responsive {
    position: relative;
    overflow: scroll !important;
}
    .question_main {
    margin:0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
}

body .override_on_load_quiz_student{
    left:0 !important;
    box-shadow: none !important;
    border: 0 !important;
}

.student_room div#quizViewpreview1 .row>.col-sm-12 {
    padding: 0 !important;
}
    .instructor_room #tools label:before{
        margin-left: 6px !important;
    }
    .quizmetadata .alert {
    font-size: 11px;
    padding: 4px;
}
    .student_room .enableScrolling {
    top: 402px !important;
}
.pdf-canvas2 {
    overflow-x: scroll;
    width: 82vw !important;
}
    html,body{
        overflow:hidden;
    }    .student_room div#canvasesdiv section#tools1 label:before {
    top: 12px !important;
    left: -2px;
}
    .student_room #tools label:before,.student_room #tools1 label:before {
       top: -5px !important;
        font-size: 10px;
        left: -2px;
    }
    
    .meetframe iframe {
        width: 80% !important;
    }
    
    .student_room ul#selectBrush {
        left: 221px;
        top: 70px;
    }
    .mobile-search-right{
            margin-right: 50px;
    }
    
    .student_room p.heightWidthReport {
        right: -147px;
        position: fixed;
    }

       .instructor_room #tools label {
    padding-top: 0;
    padding-right: 7px;
} 
    .student_room #tools label{
        padding-top: 12px;
        padding-right: 9px;
    }
    
    .confetti_data .confetti_img,.confetti_data .confetti_noimg{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: 3px solid white;

}

.student_room div#whiteboard .old_canvas {
    position: absolute;
    top: 0;
    left: 0;
    /*bottom:37px;*/
    /*left:15px;*/
    
    width: 98%;
    height: 555px;

}
.student_room div#whiteboard .old_canvas video#videoForPIP {
bottom: 135px;
    left: 7px;
}

#videoForPIP{
    /*position: fixed;
    height: 100px;
    width: 220px;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    bottom: 200px;
    left: 42px;*/
    
        /* position: fixed; */
    height: 100px;
    width: 220px;
    box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    bottom: 200px;
    left: 12px;
    position: absolute;
    bottom: -459px;
    z-index: 1;
}

.student_room div#canvasesdiv {
    position: absolute !important;
    top: 0;
    left: 0;
}

.confetti_container{
    max-width:80vw;
}

.confetti_data{
    min-width:40vw;
}
 .mobile_only{
    display:block !important;
}
 .meet_timings{
display:none;
}

 
    #screenshare,#AskToDraw{
    display:block;
}
.meetframe {
    width: 70%;
 
}
  main.instructor .input-group>.custom-select {
    /*display: none;*/
}

main.instructor .input-group>.input-group-append {
    /*display: none;*/
}  

iframe#jitsiConferenceFrame0 {
    /*top: auto;*/
    top: 40px;
}

.col-lg-2.col-12.text-right.mobilemenu {
    position: absolute;
    padding: 0 3px;
}


header .btn {
    padding: 3px 7px !important;
    height: auto;
    margin-top: 5px;
    margin-right: 2px !important;

}
header .btn span{
    display:none;
}

.col-lg-6.col-12.text-right.list-connection {
   
    position: relative;
    left: -162px !important;
    top: 10px;
}
    p.quiz_metadata.pull-right {
    float: unset;
}
   .student_room .question_main {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  margin-bottom: 20px;
  min-height: 476px;
  overflow-y: auto;
  overflow-x: hidden;
  /*max-height: 476px;*/
}
    .transform-hide {
  right: 46px !important;

}
    .col-sm-2 button.btn.closequiz {
    float: right;

    padding: 0 0px;


    background: none;
    color: #dc3545;
    font-size: 19px;
}
button.btn.closequiz span {
    display: none;
  
}
    aside{
        width:47px;
        font-size:11px;
    }
    aside li .btn {
font-size:11px;
}
aside ul li{
    padding:2px;
}
   .flex_listing ul li button i {
  font-size: 14px;

}
  #overflowbox {
    text-align: center;
  }

  #colorSwatch input[type="radio"]:checked + label::after {
  left: 0px;
    font-size: 13px;
    right: 0;
  }
  
  #colorSwatch1 input[type="radio"]:checked + label::after {
    left: 3px;
    font-size: 20px;
    right: 0;
  }

  #colorSwatch label,#colorSwatch1 label,
  #tools label,#tools1 label {
       width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
  }

  #tools input[type="radio"]:checked + label::after, #tools1 input[type="radio"]:checked + label::after {
    width: 25px;
    height: 25px;
    line-height: 25px;
  }

  #colorSwatch,#colorSwatch1 {
    left: 6px;
  }

  #tools, #tools1 {
    top: 100px;
  }

  .instructor_room #drawCanvas,
  .instructor_room #drawCanvas1 {
 
    position: absolute !important;
    top: 0;
    left: 0;

    cursor:crosshair;

  }
  
  div#canvasesdiv #canvasBG,div#canvasesdiv .multipleLayerMobileClass{
    width: 100% !important;
    cursor:crosshair;
    height: 100%;
    object-fit: contain;
  }
  
  /*.old_canvas {*/
        /*position: fixed;*/
    /*}*/
    
 fieldset {
    width: 100%;
    border: 1px solid #e4e4e4 !important;
    border-radius: 10px;
    text-align: center;
    margin: 0 27px 0 0px !important;
    position: absolute;
    top: 0;
    background: #fff;
    margin-top: 5px !important;
    

}
    /*fieldset div {*/
    /*    height:500px;*/
        /*min-height: 500px;*/
    /*    width: 95%;*/
        /*width: 100%;*/
    /*    margin: 5px;*/
    /*    padding: 6px;*/
    /*    margin-left: auto;*/
    /*    margin-right: auto;*/
    /*    overflow-x: scroll;*/
    /*    text-align: center;*/
    /*        position: relative;*/
       
    /*}*/
    
    
    
    /*.student_room  fieldset div.old_canvas {*/
    /*    height:500px;*/
        /*min-height: 500px;*/
    /*    width: 95%;*/
        /*width: 100%;*/
    /*    margin: 5px;*/
    /*    padding: 6px;*/
    /*    margin-left: auto;*/
    /*    margin-right: auto;*/
    /*    overflow-x: scroll;*/
    /*    text-align: center;*/
    /*        position: relative;*/
       
    /*}*/
    
    .student_room fieldset div.old_canvas {
        /* height: 500px; */
        /* min-height: 500px; */
        /* width: 95%; */
        width: 100%;
        /* margin: 5px; */
        /* padding: 6px; */
        margin-left: auto;
        margin-right: auto;
        overflow-x: scroll;
        text-align: center;
        position: relative;
    }
    
    .student_room fieldset div.new_canvas {
        /*height:500px;*/
        /*min-height: 500px;*/
        /*width: 95%;*/
        width: 100%;
        /*margin: 5px;*/
        /*padding: 6px;*/
        margin-left: auto;
        margin-right: auto;
        /*overflow-x: scroll;*/
        text-align: center;
            position: relative;
       
    }
    
  .enableScrolling {
    position: absolute;
       top: 481px;
    left: 8px;

    z-index: 10000;
  }    
 .enableScrolling .btn{
     padding:4px;
     font-size:11px;
 }   
/*  div#canvasesdiv canvas, div#canvasesdiv canvas {*/
/*    width: 100% !important;*/
/*    height: 100%;*/
/*    object-fit: contain;*/
/*}*/


  .chat_listing_system {
    width: 100% !important;
    /* position: absolute !important; */
        z-index: 100001;

  }
  /*.main_chat_info li .flex_lis {*/
  /*  width: 230px !important;*/
  /*}*/
  .dropdown_floats {
    width: 245px;
    right:105px !important;
  }
  header .col-lg-7 img{
      display:none;
  }
  .dropdown_floats .input-group-append button {
    font-size: 11px;
    padding: 5px;
  }
  
  #quizViewpreview1,#createQuiz {
    width: 100% !important;
    /*left: 0 !important;*/
  }
   .instructor #quizViewpreview1,#createQuiz {
    width: 82% !important;
  }

      
      .display_stars .col-md-3{
          margin:20px auto;
      }
  .questionTypeCategory {
    flex-direction: column;
  }
      .newQuizType {
    margin: 10px;
     display: block;
    }
    .newQuizDifficulty{
     flex-direction: column;
    }
    .activate_modal2{
    position: revert;
    right: revert;
    top: revert;
    margin-top: 20px;
  }
      
  }
  
  #jitsiLoader{
 position: fixed;
    top: 60px;
    left: 0;
    /* transform: translate(-50%, -50%); */
    z-index: 9999;
    display: block;
    right: 85px;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(65 67 68 / 85%);
    flex-direction: column;
  }
  
  
  
@media (max-width: 1024px) {
  /*#drawCanvas,*/
  /*#drawCanvas1 {*/
    /*-ms-touch-action: none;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*cursor:crosshair;*/
    /*width: 100% !important;*/
    /*width: 98% !important;*/
    /*height: 80vh !important;*/
    /*height: 100vh !important;*/
    
    /*border: 5px solid;*/
    /*box-shadow: 10px 10px black;*/
  /*}*/
  .student_room #drawCanvas{
    -ms-touch-action: none;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    cursor:
    crosshair;
    /*width: 100% !important;*/
    /*width: 98% !important;*/
    /*height: 80vh !important;*/
    /*height: 100vh !important;*/
    /*border: 5px solid;*/
    /*box-shadow: 10px 10px black;*/
    /*background: blue;*/
    z-index: 6 !important;
  }

  .student_room #drawCanvas1 {
    -ms-touch-action: none;
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    cursor:
    crosshair;
    /*width: 100% !important;*/
    /*width: 98% !important;*/
    /*height: 80vh !important;*/
    /*height: 100vh !important;*/
    /*border: 5px solid;*/
    /*box-shadow: 10px 10px black;*/
    /*background: #ffc107;*/
    display: none;
  }

}


@charset "UTF-8";
.multi-steps > li.is-active ~ li:before, .multi-steps > li.is-active:before {
  content: counter(stepNum);
  font-family: inherit;
  font-weight: 700;
      font-size: 12px;
}
.multi-steps > li.is-active ~ li:after, .multi-steps > li.is-active:after {
  background-color: #e1e1e1;
}

.multi-steps {
  display: table;
  table-layout: fixed;
  width: 100%;
      margin-bottom: 10px;
    margin-top: 10px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    justify-content:center;
}
.multi-steps > li {
  counter-increment: stepNum;
  text-align: center;
  display: table-cell;
  position: relative;
  color: #027f00;
}
.multi-steps > li:before {
  content: "✓";
  display: block;
  margin: 0 auto 4px;
  background-color: #027f00;
 width: 25px;
    height: 25px;
    line-height: 24px;
  text-align: center;
  font-weight: bold;
  border-width: 2px;
  border-style: solid;
  border-color: #027f00;
  border-radius: 50%;
  color: white;
}
.multi-steps > li:last-child:after {
  display: none;
}
.multi-steps > li.is-active:before {
  background-color: #fff;
  border-color: #027f00;
  color: #027f00;
  animation: pulse 2s infinite;
}
.multi-steps > li.is-active ~ li {
  color: #808080;
}
.multi-steps > li.is-active ~ li:before {
  background-color: #e1e1e1;
  border-color: #e1e1e1;
  color: #808080;
}

.is-complete {
  background: linear-gradient(to right, #027f00 50%, #e1e1e1 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.5s ease-out;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #027f0070;
  }
  100% {
    box-shadow: 0 0 0 10px #027f0000;
  }
}
@keyframes nextStep {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.progress-bar {
  cursor: pointer;
  user-select: none;
}

.progress-bar {
  background-color: #e1e1e1;
  height: 2px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  bottom: calc(50% + 3px);
  width: 100%;
  z-index: -1;
}

.progress-bar--success {
  background-color: #027f00;
}

.progress-bar__bar {
  background-color: #e1e1e1;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 500ms ease-out;
}
.custom-timers svg {
    overflow: hidden;
    vertical-align: middle;
    fill: #fff !important;
    background: #fff;
}
.student_room div#quizViewpreview1 .row {
    margin-right: 0;
}
.qtype {
    color: blue;
    font-size: 11px;
    text-transform: uppercase;
}
.student_status img {
    /*height: 100px;*/
    /*width: 100px;*/
    height:auto;
    width:auto;
    border-radius: 50%;
    object-fit: contain;
    background: #ddd;
    max-height:80px;
       max-width: 100%;
    aspect-ratio: 1/1
}

.student_status {
    text-align: center;
}

.student_status p {
    margin: 0;
    word-break: break-word;

}

.student_status span {
    font-size: 12px;
}
.student_status .row {
    gap:12px;
    justify-content: center;
}

.student_status .row .studentinfo,.student_status .row .presinfo {
    border: 1px solid #eee;
    margin: 0 6px;
    padding: 15px 15px 0;
    background: #f6fffe;
    width: 120px;
}

.student_status span span {
    font-size: 25px;
    line-height: 20px;
    position: relative;
    top: 4px;
}
.instructor_room .tooltip.bs-tooltip-right {
    /*display: none;*/
}
i.feather-x-circle.main_whiteboard_close {
    font-size: 43px;
    position: absolute;
    top: 6px;
    color: gray;
        right: 100px;

}
.norecord i{
    font-size:50px;
    color:#ddd;
}
span.statusstats {
    border: 1px solid #eee;
    padding: 4px 15px;
    border-radius: 13px;
    display: inline-block;
    margin-bottom: 10px;
}

.instrctorimg img {
    border: 3px solid #b7f4c1;
    height: 37px;
    width: 37px;
    border-radius: 30px;
}


.tooltip {
    z-index: 99999999 !important;
}

.instructor_room .tooltip.bs-tooltip-left {
    position:absolute !important;
    left: -120px !important;
    width:120px;}
    
    .horizontal .option {
    display: inline-block;
    width: 100%;
    text-align: center;

}

#quizViewpreview1 .s12{
    margin-top: 32px;
}
/*
.editquestion.horizontal .s12.radiocheckmybox {
    display:
    inline-block;
    width: 27%;
    margin: 0 13px 0 0;
}

.editquestion.horizontal .s12.radiocheckmybox label {
    clip-path: unset;
    margin: 0 -0;
    padding: 10px;
}*/
.hideoptionforfewsec{
  display:none;

}


.leaderboard_progress .progress-bar{
    position:initial !important;
    z-index:0 !important;   
}

.studentResultModal .modal-dialog {
    max-width: 95vw!important;
}

/*#quizViewpreview{*/
/*    width: calc(100vw - 120px);*/
/*}*/

.quiz_row_actions{
    display:flex;
    gap:5px;
}

@media (min-width:700px) and (max-width:1024px){
    
.dropdown_floats{
    left:18% !important;
    margin:0 !important;
}

.dropdown_floats .input-group{
    width:75% !important;
}
}
.create_quiz_select_categories .categories_list_item.category_selected {
    background: #03A9F4;
    color: #fff;
}

.ctmProgressBar .progress-bar {
    left: 85%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#7ececc 75%, #dddddd 0);
    position: absolute;
    top: 1%; 
}

.ctmProgressBar  span {
    color: black;
    font-size: 9px;
    position: relative;
    top: 2px;
}

ul.breadcrumbs {
    padding: 0;
    position:relative;
    top:5px;
}

ul.breadcrumbs li {
    display: inline-block;
}

ul.breadcrumbs li span {
  font-size: 18px;
    letter-spacing: 0.05rem;
    padding: 0 6px 0 6px;
    font-weight: 600;
        position: relative;
    left: 31px;
}

ul.breadcrumbs li:before {
   content: '\00bb';
    color: #ffffff;
    position: absolute;
    top: -33px;
    font-size: 60px;
    font-weight: 600;

}
.customPopup .container2.cntManual .smallText {
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.03rem;
    text-transform: uppercase;
}
   .tabs .metadataofquiz h4 {
    font-size: 19px;
    font-weight: 600;
    /*border-bottom: 1px solid #eee;*/
    /*padding-bottom: 10px;*/
}

.tabs .metadataofquiz p {
    font-size: 14px;
    letter-spacing: 0.03rem;
}
    
    .tabs .metadataofquiz span {
    font-size: 12px;
    border: 1px solid #eee;
    padding: 5px 9px;
    border-radius: 12px;
    background: #f6f6ff;
    color: #607D8B;
    letter-spacing: 0.05rem;
    display: inline-block;
    margin-bottom: 8px;
}
.questiontypeineer h4 {
    color: #282828;
    font-size: 17px;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.03rem;
}

.questiontypeineer h4 p {
    margin: 0;
}
.card-footer p {
    margin: 0;
}

/*.customPopup .secTwoBodyTwo.text-center .ctmRadioBtnSec {*/
/*    max-height: 37vh !important;*/
/*}*/
.secNineBodycontent {
    min-height: 64vh;
    /* padding: 0 18rem; */
}

.modal-footer.d-flex.justify-content-between.flex-row-reverse {
    padding: 0;
}
.customPopup .SecEight .ctmRadioBtnSec {
    max-height: 68vh!important;
}



.customPopup .SecEight .custom-radio-button {

    min-height: 39vh !important;

}

.customPopup .SecEight .form {
    min-height: 54vh !important;
   
}
.GenContent {
    min-height: 67vh;
}
.g_promptSec {
    min-height: 64vh;
}
.cntPreview.form-group label,.g_promptSec.form-group label {
    font-weight: 600;
    display: block;
    font-size: 17px;
}
.newQuizForm label {
    font-weight: 600;
}

.newQuizType label {
    font-weight: 400;
}
.cntPreview{min-height: 65vh;}
.customPopup .secSix .secTwoBodyTwo.text-center .ctmRadioBtnSec {
    max-height: 59vh !important;
}
.selQuizLeft.text-left small {
    font-size: 70%;

}

.selQuizLeft.text-left {
    line-height: 1;
}

.selQuizLeft.text-left h6 {
    font-size: 0.9rem;
    margin-bottom: 3px;
}
.customPopup .quesTypeForm .form {
    min-height: 13vh;
}
.secTwoBody button.btn.btn-outline-primary {
    border: 1px solid #3b3086;
    color: #3b3086;
}
.quiz_info {
    background: #f6ffff;
    padding: 10px;
    border: 1px solid #eee;
    position: relative;
    margin-bottom:10px
}

.quiz_info p.quiz_metadata.pull-left {
    border:1px solid #eee;
    padding: 5px 15px;
    font-size: 13px;
    background: #3F51B5;
    margin-right: 7px;
    color: #fff;
}



.quiz_info #custom-timers {
    /*position: absolute;*/
    /*top: 7px;*/
    /*right: 0;*/
    width: 100%;
}