/*.si-wrapper {
	/*display: inline-block;*/
	/*vertical-align:top;
	position: relative;
	width:100%;
	
}*/

/*
.si-wrapper input {
	margin: 0;
	
}*/
.fireDetail {
  font-family:"Helvetica";
  font-size: 20px;
  border:none;
  text-align: right;
  background-color: #edf2fa;
}

.fireDetaiLeft {
  text-align: left;
  
}

html, body {
margin:0;
padding:0;
}

.si-input {	
	font-family:"Helvetica";  
   font-size: 18px; 
  /* width:90%;*
   	vertical-align:top;
   /*height:100%; */
   height:auto; 
   border:none;
   resize:none;
 
}

.si-btn {
    position:relative;
    vertical-align:top;
    top:0px;
    right:0px;
  height: 50px;
	width: 50px;
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	font: 0/0 a;
	outline: none;
}

/*
.si-wrapper button {
	position: absolute;
	top: 0;
	right: 0;
	height: 50px;
	width: 50px;
	margin: 0;
	border: 0;
	padding: 0;
	background: none;
	font: 0/0 a;
}*/



.si-mic,
.si-mic:after,
.si-holder,
.si-holder:before,
.si-holder:after {
	position: absolute;
	background: #333;
}

/* Microphone icon */
.si-mic {
	display: block;
	height: 25%; /* 8px / 32px */
	top: 9.375%; /* 3px / 32px */
	left: 37.5%; /* 12px / 32px */
	right: 37.5%; /* 12px / 32px */
	-webkit-border-radius: 99px 99px 0 0;
	-moz-border-radius: 99px 99px 0 0;
	border-radius: 99px 99px 0 0;
}

.si-mic:before,
.si-mic:after,
.si-holder {
	-webkit-border-radius: 0 0 99px 99px;
	-moz-border-radius: 0 0 99px 99px;
	border-radius: 0 0 99px 99px;
}

.si-mic:before {
	position: absolute;
	z-index: 1;
	content: '';
	width: 150%; /* 12px / 8px */
	height: 137.5%; /* 11px / 8px */
	top: 100%; /* 8px / 8px */
	left: -25%; /* -2px / 8px */
	background: #fff;
}

.si-mic:after {
	z-index: 1;
	content: '';
	width: 100%; /* 10px / 10px */
	height: 100%; /* 10px / 10px */
	top: 110%; /* 11px / 10px */
	left: 0;
}

.si-holder {
	display: block;
	height: 40.625%; /* 13px / 32px */
	width: 50%; /* 16px / 32px */
	left: 25%; /* 8px / 32px */
	top: 37.5%; /* 12px / 32px */
}

.si-holder:after {
	content: '';
	width: 66.666%; /* 8px / 16px */
	height: 18.182%; /* 2px / 13px */
	bottom: -30.769%; /* -4px / 13px */
	left: 16.667%; /* 2px / 16px */
}

.si-holder:before {
	content: '';
	width: 33.333%; /* 4px / 16px */
	height: 27.273%; /* 3px / 13px */
	top: 92.308%; /* 12px / 13px */
	left: 33.333%; /* 4px / 16px */
}



  .center {
    padding: 10px;
    text-align: center;
  }
  
  
 .button {
   /* background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);*/
   background: -webkit-linear-gradient(top,#DBE5F6 0,#0249C0 50%,#0084F8 100%);
    border: 2px solid #076bd2;
    border-radius: 5px;
    color: #fff;
    display: inline;
    font-size: 25px;
    /*font-weight: bold; */
    line-height: 1.3;
    padding: 5px 10px; 
   font-family:Helvetica;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
    letter-spacing: 1px;
    
  }
  
  .bigbutton {
   /* background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);*/
   background: -webkit-linear-gradient(top,#DBE5F6 0,#0249C0 50%,#0084F8 100%);
    border: 2px solid #076bd2;
    border-radius: 5px;
    color: #fff;
    display: inline;
    font-size: 30px;
    /*font-weight: bold; */
    line-height: 1.3;
    padding: 5px 10px; 
   font-family:Helvetica;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
    letter-spacing: 1px;
    
  }
  
  .redbutton {
   /* background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);*/
   background: -webkit-linear-gradient(top,#F8E4E5 0,#D81500 50%,#F32618 100%);
    border: 2px solid #D81500;
    border-radius: 5px;
    color: #fff;
    display: inline;
    font-size: 25px;
    /*font-weight: bold; */
    line-height: 1.3;
    padding: 5px 10px; 
   font-family:Helvetica;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
    letter-spacing: 1px;
    
  }
  
  .yellowbutton {
   /* background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);*/
   background: -webkit-linear-gradient(top,#FCE9DA 0,#F5A500 50%,#F9CA00 100%);
    border: 2px solid #F5A500;
    border-radius: 5px;
    color: #fff;
    display: inline;
    disabled:true;
     font-size: 25px;
    /*font-weight: bold; */
    line-height: 1.3;
    padding: 5px 10px; 
   font-family:Helvetica;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
    letter-spacing: 1px;
    
  }
  
  .smallbutton {
   /* background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);*/
   background: -webkit-linear-gradient(top,#DBE5F6 0,#0249C0 50%,#0084F8 100%);
    border: 2px solid #076bd2;
    border-radius: 5px;
    color: #fff;
    display: inline;
    font-size: 15px;
    /*font-weight: bold; */
    line-height: 1.0;
    padding: 5px 5px; 
   font-family:Helvetica;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
    letter-spacing: 1px;
    
  }
  
  .smallredbutton {
   /* background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);*/
   background: -webkit-linear-gradient(top,#F8E4E5 0,#D81500 50%,#F32618 100%);
    border: 2px solid #D81500;
    border-radius: 5px;
    color: #fff;
    display: inline;
    font-size: 15px;
    /*font-weight: bold; */
    line-height: 1.0;
    padding: 5px 5px; 
   font-family:Helvetica;
    text-align: center;
    text-shadow: 1px 1px 1px #076bd2;
    letter-spacing: 1px;
    
  }
  
  .tdbottom {
  display: inline-block;
  vertical-align: bottom;
  }
  .tdtop {
  display: inline-block;
  vertical-align: top;
  }
  
  .right {
    float: right;
  }
  
 .sidebyside {
    display: inline-block;
    width: 49%;
    min-height: 40px;
    text-align: left;
    vertical-align: top;
}
  
 /*#table-wrapper {
  position:relative;
  display:block;
}*/

#table-scroll th {
	 background-color:#3532FD;
	 color:white;
	
}
#table-scroll {
  overflow:auto;  
  padding-left:0px;
   table-layout: fixed;
  height:560px; 
  background:white;
}

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


/*#table-scroll td {
	background:white;
}*/


.image-table {
	border: 2px solid black;
	border-radius:10px;
	/*horizontal-align:middle;*/
	margin:auto; 
	vertical-align:middle;
	
}

.image-table table {
	border-spacing:0;
  width:100%;
   border-collapse:collapse;
   
}

.table-wrapper {
	border: 1px solid black;
	
}

.table-wrapper table {
	border-spacing:0;
  width:100%;
   border-collapse:collapse;
}

.table-wrapper table * {
  background:white;
  color:black;
 
}

.table-wrapper table th {
	padding:10px;
	 background-color:#3532FD;
	 color:white;
	 border: 1px solid black;
}



.table-wrapper table th .text {
	font-family:"Helvetica";
  	 background-color:#3532FD; /*3532FD  old #326BCB*/
	 color:white;
}

.table-wrapper .wordtabletext {
	padding-left:5px;
	padding-right:15px;
	font-size:18px;
}

#table-goal {
	table-layout: fixed;
    width: 100%;
    text-align:"left";
    font-family:"Helvetica";
    border-collapse:collapse;
}

#table-goal th {
	 background-color:#3532FD;
	 
	 color:white;
    height: 38px;
    border: 1px solid black;
}

#table-goal tr td {
   
    border: 1px solid black;
    background:white;
    text-align:right;
    padding:5px;
    font-size:18px;
}

#table-goal tr td div {
   font-size:18px;
    padding-right:20px
}

.table-goalnew {
	
    font-family:"Helvetica";
    border:1px solid black;
    border-radius:10px;
    margin-left:15%; 
    margin-right:15%;
    margin-top:40px
    
    /*border-collapse:collapse;*/
}


.table-goalnew th {
	 background-color:yellow;
	 
	 color:#326BCB;
    height: 38px;
   
}

.table-goalnew tr td {
   
        background:yellow;
    text-align:center;
    padding:5px;
    font-size:18px;
    
}

.table-goalnew td, .table-goalnew th {
	border-bottom: 1px solid black;
}


.step-column {
	width:150px;
	vertical-align:top;
}
#step1Parent #step1Popup {
  visibility: visible;
}
#step1Parent:hover #step1Popup {
	visibility:visible
}

.tooltipold .tooltiptext {
    visibility: visible;
    width: 500px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
}

.tooltip {
	font-family:Helvetica;
	font-size:12px;
	background-color: yellow;
	border-radius:6px;
	text-align:center;
	padding:5px 0;
}

input[type=number] {
text-align:right;
padding:5px;
font-family:Helvetica;
font-size:large;
border:none;

}

input[type=date] {
    text-align: right;
    padding:5px;
    font-family:Helvetica;
    font-size:large;
    border:none;
}

input[type=date][class=selection] {
	padding-left:2px;
	padding-right:2px;
	padding-top:2px;
	padding-bottom:2px;
	font-family:system-ui;
	font-size:small;
    margin:0px;
    background-color:white;
	border:1px solid #326BCB;
	border-radius:5px;
	white-space: nowrap;
}

.disabled {
	color:#999;
}
.step {
	background:yellow;
	color=black;
	width:150px;
}

.useridtext {
	padding-left:5px;
	padding-right:5px;
	background:url(images/student_name.svg);
	background-repeat:no-repeat;
	background-position: center;
	/*border:1px solid blue;*/
}

.teachertext {
	padding-left:7px;
	padding-right:7px;
	padding-top:5px;
	padding-bottom:5px;
	font-family:Helvetica;
    margin:0px;
    background-color:white;
    color:black;
	border:2px solid #326BCB;
	border-radius:5px;
	white-space: nowrap;
}

.hinttext {
	padding-left:7px;
	padding-top:0px;
	font-family:Helvetica;
    color:black;
    font-size:40px;
	white-space: nowrap;
}

.hintrb {
	margin-bottom:010px;
    color:black;
    font-size:40px;
    vertical-align:middle;
	
}

.bannertext {
	padding-left:50px;
	padding-right:50px;
	padding-top:20px;
	padding-bottom:5px;
	font-family:Helvetica;
	font-size:70px;
	font-weight: bold;
    margin:0px;
    white-space: nowrap;
    color:#A80144
    
}

.wordtabletext {
	font-family:Helvetica;	
}

.myplaintext {
	font-family:Helvetica;
	color:black;
}

div.reportwords {
	font-family:Helvetica;
	/*color:green; */
	padding:10px !important;
	overflow: auto !important;
	
 	display:none;
  	/* height:30px; */
    text-align:left;
	font-size:14px !important;
}

.standardtext {
	font-size:large;
		
}

.emailtext {
	font-size:large;
	width:400px;
}


.inlinetext {
	 color:#326BCB;
	text-align:"left";
    font-family:"Helvetica";
    font-size:large;
}

.messagetext {
	 color:#326BCB;
	text-align:"left";
    font-family:"Helvetica";
    font-size:40px;
}

.sets {
	padding-left:180px;
}

.tableheading {
	 color:#326BCB;
	text-align:"center";
    font-family:"Helvetica";
    font-size:25px;
    background-color:yellow;
}

.mysettings {
	 color:#326BCB;
	text-align:"left";
    font-family:"Helvetica";
    font-size:30px;
    padding-top: 40px;
}

.settingsintro {
	 color:#326BCB;
	text-align:"left";
    font-family:"Helvetica";
    font-size:25px;
}



.settingslang {
	 color:#326BCB;
	text-align:"left";
    font-family:"Helvetica";
    font-size:25px;
    padding-left:20px;
}

.commandtext {
	color:#A80144;
	background-color: yellow;
	text-align:"left";
    font-family:"Helvetica";
    font-size:25px;
}

#settings {
	padding-top:80px;
}



.timertext {
	 color:#000000;
	text-align:"left";
    font-family:"Helvetica";
    font-size:large;
}

.dropdown {
	font-size:large;
	padding:10px;
	border:1px solid blue;
	background:white;
	width:100%;
	
}

#loggedonrows {
	display:none;
}

.g-signin2{
   width:100%;
}

/*.g-signin2 > div{
	
  margin: 0 auto;
  
}*/

.spacer {
	height:10px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* The Modal (background) */
.modaltimer {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: yellow; /* Black w/ opacity */
}

/* The Modal (background) */
.amimmodal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
   /*background-color: rgb(0,0,0); /* Fallback color */
   /* background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	-webkit-border-radius: 20px;
    -moz-border-radius:20px;
    border-radius: 20px; 
    background-color: yellow;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 40px;
    border: 1px solid #888;
    
    width: 40%; /* Could be more or less, depending on screen size */
}

.center-content {
	transform:translateX(15%)
}

/* Modal Content/Box */
.amimmodal-content {
	-webkit-border-radius: 20px;
    -moz-border-radius:20px;
    border-radius: 20px; 
    background-color: yellow;
    margin: 15% 0%; /* 15% from the top and centered */
    padding: 40px;
    border: 1px solid #888;
    width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

         
#schools > ul {
  display: none;
  list-style-type:none;
} 
  
#schools > ul > li {
    list-style:none; 
   
} 
  
#schools > li {
   list-style:none;   
  font-weight: bold;
}

#teachers > ul {
  display: none;
  list-style-type:none;
} 
  
#teachers > ul > li {
    list-style:none;
    text-decoration:underline;
} 
  
#teachers > li {
   list-style:none;   
  font-weight: bold;
}

#teacher {
	text-decoration:underline;
}
  
ul >  ul {
    display: none;
}  


 ul > .multi::after {
  content:' +'
}
  
 ul > .multi-opened::after {
  content:' -'
}

.bigloader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 240px;
  height: 240px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}



/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 
 
 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select the required image';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}       
    
.bottombuttons {
	position:fixed;
	height:50px;
	bottom:30px;
	right:60px;
}

.version {
	position: fixed; 
	bottom: 0; 
	right: 60px; 
	width: 100px; 
	font-family:Helvetica;
	font-size:12px;
	text-align:right;
	padding:0;
}

.copyright {
	position: fixed; 
	bottom: 0; 
	left: 5px; 
	width: 100px; 
	font-family:Helvetica;
	font-size:12px;
	text-align:left;
	padding:0;
}

.inner-container {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:80px;
    overflow-y:auto;
}

#container {
   
    height: 100%;
    
}

/* Tooltip container */
.tooltipgoal {
  position: relative;
  display: inline-block;
  
}

/* Tooltip text */
.tooltipgoal .tooltiptextgoal {
  display: block;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 1;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltipgoal .tooltiptextgoal::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipgoal:hover .tooltiptextgoal {
  display: block;
  opacity: 1;
}

.logo {
	position:relative;
	height:auto;
	width:300px;
	top:0px;
	left:0px;
}

.mrspeakup {
	position:absolute;
	height:auto;
	width:70px;
	top:5px;
	right:60px;
}

.countdown {
	
}