body
{
background:#cddcec;
font-family:Verdana,sans-serif;
font-size:small;
margin:8px 0 16px;
text-align:center
}


#form_container
{
background:#fff;
margin:0 auto;
text-align:left;
width:640px;
border-radius:25px 25px 25px 25px;
box-shadow:5px 5px 4px grey
}


#top
{
display:block;
height:10px;
margin:10px auto 0;
width:650px
}


#footer
{
width:640px;
clear:both;
color:#999;
text-align:center;
width:640px;
padding-bottom:15px;
font-size:85%
}

#footer a
{
color:#999;
text-decoration:none;
border-bottom:1px dotted #999
}

.public_set
{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 60px;
    grid-column-gap: 10px;
    grid-row-gap: 10px;

}



form.ispraak_form
{
margin:20px 20px 0;
padding:0 0 20px
}


img
{
border:none
}


.ispraak_form
{
font-family:Verdana,sans-serif;
font-size:small
}


.ispraak_form li
{
width:61%
}


form ul
{
font-size:small;
list-style-type:none;
margin:0;
padding:0;
width:100%
}

form li{
	display:block;
	margin:0;
	padding:4px 5px 2px 9px;
	position:relative;
}


form li:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden
}

form li.highlighted
{
background-color:#e6f2ff;
}


li:hover 
{
background-color:#cde5ff;
}




.buttons:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden
}


.buttons
{
clear:both;
display:block;
margin-top:10px
}


* html form li
{
height:1%
}


* html .buttons
{
height:1%
}


* html form li div
{
display:inline-block
}


form li div
{
color:#444;
margin:0 4px 0 0;
padding:0 0 8px
}


form li span
{
color:#444;
float:left;
margin:0 4px 0 0;
padding:0 0 8px
}


form li div.left
{
display:inline;
float:left;
width:48%
}


form li div.left .medium
{
width:100%
}


form li div label
{
clear:both;

color:#444;

display:block;

font-size:9px;

line-height:9px;

margin:0;

padding-top:3px
}


form li span label
{
clear:both;

color:#444;

display:block;

font-size:9px;

line-height:9px;

margin:0;

padding-top:3px
}




.form_description_alt
{
font-family:Verdana,sans-serif;
clear:both;
margin:0 0 1em;
color:#364563
}







.form_description
{
font-family:Verdana,sans-serif;

border-bottom:1px dotted #ccc;

clear:both;

display:inline-block;

margin:0 0 1em;

color:#364563
}


.form_description[class]
{
display:block
}


.form_description p
{
font-size:small;

line-height:130%;

margin:0 0 12px
}


form hr
{
display:none
}


input.button_text
{
overflow:visible;

padding:0 7px;

width:auto
}


.buttons input
{
font-size:small;

margin-right:5px
}


label.description
{
border:none;

display:block;

font-size:small;

color:#364563;

line-height:150%;

padding:0 0 1px
}


input.text
{
/* background:#fff url(http://ispraak.net/images/shadow.gif) repeat-x top; */

border-bottom:1px solid #ddd;

border-left:1px solid #c3c3c3;

border-right:1px solid #c3c3c3;

border-top:1px solid #7c7c7c;

color:#333;

font-size:small;

margin:0;

padding:2px 0
}


input.file
{
color:#333;

font-size:100%;

margin:0;

padding:2px 0
}


textarea.textarea
{
/* background:#fff url(http://ispraak.net/images/shadow.gif) repeat-x top; */

border-bottom:1px solid #ddd;

border-left:1px solid #c3c3c3;

border-right:1px solid #c3c3c3;

border-top:1px solid #7c7c7c;

color:#333;

font-family:Verdana,sans-serif;

font-size:small;

margin:0;

width:99%
}


select.select
{
font-size:small;

margin:1px 0;

padding:1px 0 0;

border-bottom:1px solid #ddd;

border-left:1px solid #c3c3c3;

border-right:1px solid #c3c3c3;

border-top:1px solid #7c7c7c
}


input.radio
{
display:block;

height:13px;

line-height:1.4em;

margin:6px 0 0 3px;

width:13px
}

input.radio:hover
{
	background-color:white;
}



label.choice
{
color:#444;

display:block;

font-size:small;

line-height:1.4em;

margin:-1.55em 0 0 25px;

padding:4px 0 5px;

width:90%
}

label.choice:hover
{

   text-decoration: underline;
}



select.select[class]
{
margin:0;

padding:1px 0
}


input.medium
{
width:50%
}


select.medium
{
width:50%;

color:#364563
}


textarea.medium
{
height:10em
}

textarea.modify
{
height:7em;
width:30em;
}



form .required
{
color:red;

float:none;

font-weight:700
}


li:hover
{
background-color:#cde5ff
}


form .guidelines
{
background:#f0f0f5;

border:1px solid #e6e6e6;

color:#444;

font-size:85%;

left:100%;

line-height:130%;

margin:0 0 0 8px;

padding:8px 10px 9px;

position:absolute;

top:0;

visibility:hidden;

width:42%;

z-index:1000;

border-radius:10px;

animation:fadein 2s;

-moz-animation:fadein 2s;

-webkit-animation:fadein 2s;

-o-animation:fadein 2s
}




form .guidelines_on
{
background:#f0f0f5;
border:1px solid #e6e6e6;
color:#444;
font-size:85%;
left:100%;
line-height:130%;
margin:0 0 0 8px;
padding:8px 10px 9px;
position:absolute;
top:0;
width:42%;
z-index:1001;
border-radius:10px;
animation:fadein 2s;
-moz-animation:fadein 2s;
-webkit-animation:fadein 2s;
-o-animation:fadein 2s
}




form .guidelines_on2
{
background:#f0f0f5;
border:1px solid #e6e6e6;
color:#444;
font-size:85%;
left:70%;
line-height:130%;
margin:0 0 0 8px;
padding:8px 10px 9px;
position:absolute;
top:5;
width:25%;
z-index:1001;
border-radius:10px;
animation:fadein 2s;
-moz-animation:fadein 2s;
-webkit-animation:fadein 2s;
-o-animation:fadein 2s
}










@keyframes fadein
{
from
{
opacity:0
}


to
{
opacity:1
}



}


@-moz-keyframes fadein
{
from
{
opacity:0
}


to
{
opacity:1
}



}


@-webkit-keyframes fadein
{
from
{
opacity:0
}


to
{
opacity:1
}



}


@-o-keyframes fadein
{
from
{
opacity:0
}


to
{
opacity:1
}



}


form li:hover .guidelines
{
visibility:visible
}


.no_guidelines .guidelines
{
display:none!important
}


.no_guidelines form li
{
width:97%
}


.logo2
{
-webkit-animation:spin 1s linear;

-moz-animation:spin 1s linear;

animation:spin 1s linear
}


@-moz-keyframes spin
{
100%
{
-moz-transform:rotate(360deg)
}



}


@-webkit-keyframes spin
{
100%
{
-webkit-transform:rotate(360deg)
}



}


@keyframes spin
{
100%
{
-webkit-transform:rotate(360deg);

transform:rotate(360deg)
}



}


@-webkit-keyframes flipInX
{
0%
{
-webkit-transform:perspective(400px) rotateX(90deg);

opacity:0
}


40%
{
-webkit-transform:perspective(400px) rotateX(-10deg)
}


70%
{
-webkit-transform:perspective(400px) rotateX(10deg)
}


100%
{
-webkit-transform:perspective(400px) rotateX(0);

opacity:1
}



}


@keyframes flipInX
{
0%
{
transform:perspective(400px) rotateX(90deg);

opacity:0
}


40%
{
transform:perspective(400px) rotateX(-10deg)
}


70%
{
transform:perspective(400px) rotateX(10deg)
}


100%
{
transform:perspective(400px) rotateX(0);

opacity:1
}



}


@-webkit-keyframes target-fade
{
0%
{
background-color:rgba(255,255,0,.9)
}


100%
{
background-color:rgba(0,0,0,0)
}



}


@-moz-keyframes target-fade
{
0%
{
background-color:rgba(255,255,0,.9)
}


100%
{
background-color:rgba(0,0,0,0)
}



}


.alert
{
padding:20px;

background-color:#ffffb3;

color:#000;

border:1px;

border-radius:15px 15px 15px 15px;

border-style:solid;

border-width:1px;

z-index:2015;

position:fixed;

top:20%;

left:50%;

transform:translate(-50%,-50%)
}


.closebtn
{
margin-left:15px;

color:#000;

font-weight:700;

float:right;

font-size:22px;

line-height:20px;

cursor:pointer;

transition:.3s
}


.closebtn:hover
{
color:gray
}


.winniethepooh
{
opacity:0;

position:absolute;

top:0;

left:0;

height:0;

width:0;

z-index:-1
}


a:hover
{
background-color:#4b75b3;

color:#cff
}


.sidebar
{
height:100%;

width:0;

position:fixed;

z-index:1;

top:0;

left:0;

background-color:#364563;

overflow-x:hidden;

transition:.5s;

padding-top:60px
}


.sidebar a
{
padding:8px 8px 8px 32px;

text-decoration:none;

font-size:15px;

color:#fff;

display:block;

transition:.3s;

background-color:#364563
}


.sidebar a:hover
{
color:gray
}


.sidebar .closebtn
{
position:absolute;

top:0;

right:25px;

font-size:36px;

margin-left:50px
}


.openbtn
{
font-size:14px;

cursor:pointer;

background-color:#364563;

color:#fff;

padding:8px 12px;

border:none;

border-radius:25px 25px 25px 25px;

box-shadow:5px 5px 4px grey
}


.openbtn:hover
{
background-color:#cddcec
}


#mainz
{
transition:margin-left .5s;

padding:16px;

position:absolute;

top:2px;

left:25px
}


@media screen and (max-height:450px)
{
.sidebar
{
padding-top:15px
}


.sidebar a
{
font-size:18px
}



}


.button4
{
background-color:#364563;

border:none;

color:#fff;

padding:5px 10px;

text-align:center;

text-decoration:none;

font-size:16px;

margin:1px 1px;

cursor:pointer;

border-radius:5px;

-webkit-transition-duration:.4s;

transition-duration:.4s
}


.button4:hover
{
background-color:grey;

color:#fff
}

.button5{
background-color:#364563;

border:none;

color:#fff;

padding:5px 10px;

text-align:center;

text-decoration:none;

display: inline-block;

font-size:16px;

margin:1px 1px;

cursor:pointer;

border-radius:5px;

-webkit-transition-duration:.4s;

transition-duration:.4s
}


.button5:hover
{
background-color:grey;

color:#fff
}



.button6{
background-color:#efefef;
border:none;
color:#364563;
padding:5px 10px;
text-align:center;
text-decoration:none;
display: inline-block;
font-size:16px;
margin:1px 1px;
cursor:pointer;
border-radius:5px;
border-top: solid 10px #364563;
-webkit-transition-duration:.4s;
transition-duration:.4s
}


.button6:hover
{
background-color:grey;
color:#fff
}





#headerBar
{
height:50px;

background:#364563;

border-bottom:solid 20px #efefef;

border-radius:25px 25px 0 0
}

a.cutelink
{
	text-decoration: none;
	color: #364563;
}


a.cutelink:hover
{
	text-decoration: none;
	color: white;
	background-color:#364563;

}

a.cutelink2
{
	text-decoration: none;
	color: #364563;
}


a.cutelink2:hover
{
	text-decoration: none;
	color: #0099ff;
	background:#f0f0f5;

}



a.cutelink3
{
	text-decoration: none;
	color: #0066cc;

}


a.cutelink3:hover
{
	text-decoration: none;
	color: #ffffff;
	background:#364563;

}



a.cutelink4
{
	text-decoration: none;
	color: #cddcec;

}


a.cutelink4:hover
{
	text-decoration: none;
	color: #cddcec;
	background:#cddcec;

}









.target {
    -webkit-animation: target-fade 3s;
    -moz-animation: target-fade 3s;
    
    padding:2px; 
    
    display: table;
}

.announcement{
	background-color: #a80709;
	padding: 20px;
	color: white;

}



.activityset{
    background-color: #364563;
    padding-bottom: 10px;
    padding-top: 10px;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: medium; 
}




.progress-event{
	height: 35px;
	width: 250px;
	border: 2px solid black;
	margin-left: 0%;
	display: flex;
}

.progress-bar-fill{
	height: 100%;
	width: 0%;
	background: #364563;
	display: flex;
	align-items: center;
	transition: width 0.25s;

}

.progress-bar-text{
	margin-left: 10px;
	font-weight: bold;
}

.holder {

	display: flex;
	align-items: center;
	margin:0 auto;
	
}


.audio.green-audio-player {
	width: 340px;
	min-width: 340px;
	height: 45px;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .07);
	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	padding-left: 24px;
  	padding-right: 24px;
  	border-radius: 20px;
  	user-select: none;
  	-webkit-user-select: none;
	background-color: #364563;
		margin:0 auto;
}










.play-pause-btn {
		cursor: pointer;
		color: white;
}

.spinner {
    width: 18px;
    height: 18px;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/355309/loading.png);
    background-size: cover;
    background-repeat: no-repeat;
    animation: spin 0.4s linear infinite;
	color: white;
}

.slider {
    flex-grow: 1;
    background-color: white;
    cursor: pointer;
    position: relative;
}

.progress {
	background-color: #cddcec;
	border-radius: inherit;
	position: absolute;
	pointer-events: none;
}

.pin {
	height: 16px;
	width: 16px;
	border-radius: 8px;
	background-color: #cddcec;
	position: absolute;
	pointer-events: all;
	box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.32);
}

.controls {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 18px;
    color: white;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
    margin-left: 24px;
    margin-right: 24px;
}
.slider {
      margin-left: 16px;
      margin-right: 16px;
      border-radius: 2px;
      height: 4px;
}
.progress {        
        width: 0;
        height: 100%;
}
.pin{
          right: -8px;
          top:-6px;
		  display: none;
}
.span {
      cursor: default;
}

.volume {
    position: relative;
	color: white;
}
.volume-btn {
      cursor: pointer;
	  color: white;
}
.open path {
        fill: #cddcec;
      }
.volume-controls {
		width: 30px;
		height: 135px;
		background-color: rgba(0, 0, 0, 0.62);
		border-radius: 7px;
		position: absolute;
		left: -3px;
		bottom: 52px;
		flex-direction: column;
		align-items: center;
		display: flex;
		color: white;
}
.hidden {
		  display: none;
		}
.slider {
		  margin-top: 12px;
		  margin-bottom: 12px;
		  width: 6px;
		  border-radius: 3px;
}
.progress {
			bottom: 0;
			height: 100%;
			width: 6px;
}
.pin {
			  left: -5px;
			  top: -8px;
	}
	
	svg, img {
		display: block;
	  } 
	  @keyframes spin {
		from {
		  transform: rotateZ(0);
		}
		to {
		  transform: rotateZ(1turn);
		}
	  }

#slowspeed{
	display: none;
	padding-left: 20%;
}

#button{
	margin-left: 20px;
}

#actions{
	margin-left: 20px;
}


	  
	  

/* Create two equal columns for Stats page  */
.column {
  float: left;
  width: 45%;
  padding: 5px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Create pulse animation for activity sets  */

.pulse {
    
   	animation: pulse 1s linear infinite;
    width: 25px;
    display: inline; 
    padding-left: 10px;
    vertical-align: middle;
  
}

@-webkit-keyframes "pulse" {
0% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}
50% {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
}
100% {
    -webkit-transform: scale(1);
   transform: scale(1);
}
}



/* Create pulse animation for activity sets  */

.pulse2 {
    
   	animation: pulse 1s linear infinite;
    width: 60px;
    display: inline; 
    padding-left: 10px;
    vertical-align: middle;
  
}

@-webkit-keyframes "pulse" {
0% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}
50% {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
}
100% {
    -webkit-transform: scale(1);
   transform: scale(1);
}
}

/* Large Right Arrow for activity sets  */

.goForward {
	position: absolute;
    top: 30%;
    height: 60px;
    right: 10%;
    width: 60px;

}

.display{
	display: inline-block;
	justify-content: center;
}


/* Better grid view for Roster  */

.tbl {
  display: table;
  width: 100%;

}

.col {
  display: table-cell;
  width: 80px;

}

.col2 {
  display: table-cell;
  width: 250px; 
 
}


.cell {
  display: table-row;
    width: 150px;
	
}

/* Alternative HR break for other pages  */

hr.alt 
{
  
  /* height:1px; */
  background:#364563;
  /* border-bottom:solid 4px #efefef; */ 
  display: block; 

}

/*better grid view for student stats*/ 
.table1 {
	display: table;
	width: 100%;
	margin-left: 20px;
  
  }
  
  .column1 {
	display: table-cell;
	width: 80px;
  
  }
  
  .column2 {
	display: table-cell;
	width: 250px; 
   
  }
  
  
  .cell12 {
	display: table-row;
	  width: 150px;
	  
  }


/* Tool tip balloon for copying links to clipboard  */


.tooltip {
  position: relative;
  display: inline-block;
  padding: 0px; 
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* for login page icons  */

img.smallicons {
  vertical-align: sub;
  display: inline;
  
}