.webgl-content {width: 100%; height: 100%; background: linear-gradient(to bottom, #b22222 0%, #e63946 100%);}
.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;}

.uploaddialog {font-family: 'Bangers',Verdana, sans-serif; display: flex; flex-direction: column; position: absolute; bottom: 0%; right: 5%;  width: 400px; height: 200px; background-color:#102230; color: white;  }

.drag-drop {
    border: 2px dashed #ccc;
    text-align: center;
    padding: 20px;
    cursor: pointer;
}

.dragged {
    border: 2px dashed #000;
}


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

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

#progressgif {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 20px; /* distance from top */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.loadingtext-carousel {
  height: 1.2em; /* height of a single line */
  overflow: hidden;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  color: white;
  margin-top: 20px;
  width: 100%;
  position: relative;
  
}

.loadingtext-inner span {
  display: flex;
  flex-direction: row;
  animation: scrollText 105s steps(35) infinite;
  line-height: 1.1em;  /* Adjust this value for more vertical space between lines */
}

.loadingtext-inner span {
  display: block;
  height: 1.2em;
}

@keyframes scrollText {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-41.8em); } /* 1.2em * 35 lines */
}

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