.webgl-content {width: 100%; height: 100%; background-color: #6d1c1c;}
.webgl-content {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.header {position: relative; margin-top: 0px; width: 100%; height: 40px; line-height: 38px; background-color: #ffe92f; font-family: 'Oswald',Verdana, sans-serif; font-size: 18px;}
.header .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.header .webgl-logo {background-image: url('../images/minilogo.png'); float: left;width: 38px; height: 38px;}
.header .headertitle {margin-left: 8px; margin-top: 0px; margin-bottom: 0px; float: left;}
.header .functionhead {color: #000; margin-left: 8px; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; padding-right: 5px; float: left; font-size: 15px; cursor: pointer;}
.header .fullscreen {width: 38px; float:left; cursor: pointer; margin-right: 5px;}
.header .closeoverlay {cursor: pointer; width: 38px; float: right;}


.rounded { border-radius: 2px; padding: 5px; float: left; border-width: 0px; border-color:#000; border-style: solid;}
.recorderdialog {font-family: 'Bangers',Verdana, sans-serif; display: flex; flex-direction: column; position: absolute; bottom: 0%; right: 5%;  width: 400px; height: 400px; background-color:#102230; color: white;  }
.recordertitle {  font-size: 1.5em; color:rgb(255, 255, 255); display: flex; justify-content: space-between; padding: 10px; height:35px;}
.recordermike { background: url('../images/Mic-Animation.gif') no-repeat; 
    background-size: 100%; display: block; width: 200px; height: 200px;}
.background {display: flex; 
    align-items: center; justify-content: space-between;}

.closebtn { cursor: pointer; width:38px; background-size: 100%; float:right; background:url("../images/closebutton.png") no-repeat;}
.recordbtn {cursor: pointer; border-width: 0px; width: 410px; height: 110px; background-size: 100%; background-image: url("../images/start-record.png"); background-color: transparent;}
.stopbtn { cursor: pointer; border-width: 0px; width: 410px; height: 106px; background-size: 100%; background-image: url("../images/stop-record.png"); background-color: transparent;}
.OKBtn { display: none; cursor: pointer; float: right; border-width: 0px; width: 75px; height: 75px; background-size: cover; background-image: url("../images/Save-icon.png"); background-color: transparent;}
button:disabled {color: gray; background-color: lightsteelblue; display:none}
.recorderbox { height: 180px; overflow: scroll;}

ul { list-style-type: none; }

.Sample {display: inline-block; align-self: center; cursor: pointer; width: 30px; height: 30px; background-image: url("../images/checkboxOff.png"); background-size: cover;}
.selectedSample {background-image: url("../images/checkboxOn.png"); background-size: cover;}

.animatorgif {
    background: url('../images/loadinganimation.gif') no-repeat; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: auto;
    width: 512px; 
    height: 256px;
}

.progress 
{
    width:100%; 
    height: 100%; 
    position: absolute; 
    left: 0px;
    top: 30%;
}


body {background:#6d1c1c; color:#323f4e; font:14px/21px 'Oswald','Roboto',"Open Sans", Arial, Verdana, Tahoma, Trebuchet MS;}