#footer{
	z-index:0 !important;
	}



#videosections a{
	color:#aa3500;
	}

#videosections a:hover{
	color:red !important;
	}


@keyframes blink2 {
  0%   { color:#ff0; }
  10% { color:#aa3500; }
  12% { color:#ff0; }
  14% { color:#aa3500; }
  16% { color:#ff0; }
  18% { color:#aa3500; }
  20% { color:#ff0; }

  22% { color:#aa3500; }
  24% { color:#ff0; }
  26% { color:#aa3500; }
  28% { color:#ff0; }
  30% { color:#aa3500; }  
  32% { color:#ff0; }   
  
  100% { color:#aa3500 }
}

 
.blink2 {
	   animation: blink2 3s 1 ease-out;
	}



.check_scrolltoend {
    position: fixed;
    right: 16px;
    cursor: pointer;
    z-index: 999;
  
}	 
 

.check_scrolltoend.up{   
  top:  -0px;
}	
.check_scrolltoend.down{   
  bottom: -2px;
}	
 
.hiddenforced{
	display:none !important;
	}	 
 



 
 input[type=text]:focus {
	border: 1px solid #fff;
	}
 
  
 
 
 hr {
border: 1px solid #9c9c9c4d;
    border-bottom: 2px solid #ffffff42;
    margin: 1.5rem 0;
}




 
 
          


/* Responsive: */

@media only screen and (min-width: 640px) {
	.col {
  #padding: 10px
  }
  .layout {
    display: flex;
    padding: 0.2em; 
  }
  
  
  
}

/* etc */

 

.containerz {
  max-width: 60em;
  margin-right: auto;
  margin-left: auto;
}

 



/*here*/


 .wrapper-thumb {
  height: 180px;
  display: flex;
  gap: 0px;
}

.box {
  #border: 5px solid #000;
      border: 1px solid #8080803d;
    padding: 3px;
    margin: 6px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%)
}

.box img {
  width: 100%;
  height: 100%;
}

.box1 img {
  object-fit: cover;
}

.box2 img {
  object-fit: contain;
}

.box3 img {
  object-fit: fill;
}

 
.notez .textz{
	padding: 11px 11px 0 11px;
	}

.notez{
    padding: 11px;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    background-color: #ffffff60;
    box-shadow: 2px 2px 2px 0px #ffffff36;
	}


strong, b {
    color: unset;
}	


.sectionoptions {
    padding-left: 12px;
    display: block;
}



.mymin-max-slider .myrange {
	position: absolute;
	height:5px;
	background-color:red;

	}

.mymin-max-slider {
	position: relative; 
    margin: 3px 11px 8px 10px;
    display:none;
    }
    
 .mymin-max-slider.show {
  display:block;
    }   

.slotnum{
	display:inline;
	}
	
 .sectionhighlight{
    background-color: rgb(238 238 238 / 45%);
    border: 1px solid #ffffff70;
    border-radius: 3px;
    padding-top: 5px;
    padding-right: 11px;
    margin: 5px 0;
    display: block;
        box-shadow: rgb(0 0 0 / 22%) 1px 1px 3px 1px;
 	}
 
 
select {
	margin-bottom: 5px!important;
	padding: 0 11px;
	letter-spacing: 0;
	} 
		select option {
			background-color: unset;
			color: unset;
			font-size: 16px;
	    letter-spacing: -3px;

		}
         
select:focus {
	border: 1px solid red;
	margin-bottom: 5px!important;
	padding: 0 11px;
	letter-spacing: 0;
	}        




p {
    text-align: left;
}


.sub { 
  padding-left: 18px;
	display: block;
	#border:1px solid red;
	}
 
 
 
 select  {
  line-height: 0;
  height: unset;
  width: unset;
  margin-bottom: 0;
  letter-spacing: 0px;;
  font-size: 16px; 
  background-image: none;
  display: unset;
  border: 1px solid #808080;
  -webkit-appearance: auto;
  appearance: auto;
  padding:0px;
 }


@keyframes blink {
  0%   { background-color:#ff0; }
  10% { background-color:#ff9400; }
  12% { background-color:#ff0; }
  14% { background-color:#ff9400; }
  16% { background-color:#ff0; }
  18% { background-color:#ff9400; }
  20% { background-color:#ff0; }
  100% { background-color:#ff9400 }
}

 
.blink {
	   animation: blink 1s 1 ease-out;
	}


.sectionsizetotal.show{ 
    border: 1px solid #b1b1b1;
    border-radius: 0 3px 3px 0;
    border-left: 5px solid #808080;
    background-color: rgb(238 238 238 / 39%);
}
.sectionsizetotal{ 
    margin-top: 14px;
    padding: 4px 8px 4px 22px;
    display: inline-block; 
    margin: 5px 0;
    width:100%;
}

.sectionsizetotal.actionneeded{ 
background-color: #fff!important;
width: auto;
}

.sectionsizetotal.alert{ 
    border: 1px solid #a87435;
    border-radius: 0 3px 3px 0;
    border-left: 5px solid #f00;
    background-color: #ff9400;
 
}

  
.sectionsize{
	font-weight: bolder;
	 color:purple;
    display: inline-block;
  }


.timedisplay.submenu{
	margin-top: 4px;
	}

.timedisplay{ 

    font-weight: bolder;
    border: 1px solid #ffffff;
    padding: 0 4px 0 4px;
    border-radius: 3px;
    height: 22px;
    display: inline-block;
    background-color: #e4e4e4;    
   cursor:pointer;
   position:relative;
  }
 
.timedisplay-active {	
    color: #2a241c;
    font-weight: bolder;
    border: 1px solid #c0c0c0;   
  background-color: #fff;
  }
	
.timedisplay-active.focus {	
    box-shadow: 0px 2px 2px 0px rgb(0 0 0 / 30%);
    top: -1px;
    border:1px solid #00000040;

    
    color: rgb(255 93 0);
    font-weight: bolder;

    
    
    
  } 


.sliderhide {
    display: none;
}

.slidershow {
    display: block;
} 

.longtext a, .shorttext a{
	color: #2a5e7f;
}

.short > .longtext {
    display: none;
}

.long > .shorttext {
    display: none;
}


input[type=button] {
	height:unset;
	}


.modal-content-img {
    position: relative;
    #top: 50%;
    #left: 50%;
    #transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 90%;
    display: block;
    padding: 22px;
     margin: auto; 

    
}

 


.webviewtop{
	padding-top:0px !important;
	}
 

p {
#text-align: unset;
letter-spacing: 0;
}

.main-wrapper{
    overflow-x: hidden;
    
}
.container-faq{
    max-width: 1200px;
    margin: 0 auto;
 
}
.container-faq p{
    text-align: left;

}
.faq-title {
    margin: 1rem 15px 2rem 15px;
    text-align: center;
  color: #000;
  font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 16px;
}


 

 h2{
    margin: 15px;
    text-align: left;
  color: #000;
  font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 16px;
}

h3 {
    color: #000;
    font-size: 16px  ;
    font-weight: bold  ;
    margin: 0;
    font-family: 'Courier New', monospace;
}


.faq-content{
    display: grid;
    grid-template-columns: 100%;
    row-gap: 1rem;
}

.faq-left-content, .faq-right-content{
    padding: 1.2rem;
   
}

 


.faq-left-content{
   # text-align: center;
}
.faq-left-content img{
    width: 75%;
    display: block;
    margin-bottom: 1rem ;
}
.faq-left-content p{
    font-weight: 400;
    opacity: 0.95;
    max-width: 400px;
    margin: 0 auto;

}
.faq-item{
    margin-bottom: 10px;
    box-shadow: 2px 2px 2px 0px #ffffff36;
        border-left: 4px solid #b8b6b061;
}
.faq-item-head{
color: #000000;
    display: flex;
    align-items: center;
    justify-content: space-between;
        background-image: linear-gradient(90deg, #ffeada69 0%, #2a241c33 100%);
    opacity: 0.85;
    padding: 3px 1rem;
    border-radius: 3px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.faq-item-icon{
    cursor: pointer;
    font-size: 11px;
    color: #888888;
    padding: 1px 9px;
    background-color: #cfc7c0;
    border: 1px solid #868686;
    border-radius: 3px;
    
}


.faq-item-body{
    overflow: hidden;
    max-height: 0;
    transition: all 0.3s ease;
}
.faq-item-body p{
    font-weight: 300;
    padding: 1rem;
}
.show-para{
    max-height: 1000px; /* js related */
}


@media screen and (min-width: 800px){
    .faq-left-content{
        text-align: left;
    }
    .faq-left-content img{
        margin-left: 0;
    }
    .faq-left-content p{
        margin-left: 0;
        max-width: 460px;
    }
    .faq-content{
        grid-template-columns: repeat(2, 1fr);
    }
}











 
.textfooter {
color:#808080 !important;
    text-shadow: none;
}

/*this set the init background color before page stating to fading to the dest color*/
		#wrapper.fade-in:before {
			pointer-events: none;
			-moz-transition: none;
			-webkit-transition: none;
			-ms-transition: none;
			transition: none;
 
  		-moz-transition-delay: 0s;
			-webkit-transition-delay: 0s;
			-ms-transition-delay: 0s;
			transition-delay: 0s;			
	 
			background: #2a241c;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: fixed;
			top: 0;
			width: 100%;
		} 

 


.text-left {text-align:left;} /* Ignore */

.x-auto {
  overflow-x: auto; 
}

.table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}

.table tbody {
  display: table;
  width: 100%;
}

.table thead {
  display: table;
  width: 100%;
 
}
 
 
 
 


/*this set the init background color before page stating to fading to the dest color*/
		#wrapper.fade-in:before {
			background: #dddddd;
		}

  
  	
 
input {
background: transparent;
caret-color: #000;
   
}
input.no-autofill-bkg:-webkit-autofill {
  -webkit-background-clip: text;
  -webkit-text-fill-color: #c0c0c0; 
}

  

  
  
  
  input[type=checkbox], input[type=radio] {
    -webkit-appearance: auto;
    -ms-appearance: unset;
    appearance: auto;
    display: unset;
    float: none;
    margin-right: 0;
    opacity: 1;
    width: auto;
    z-index: -1;
}

input[type=checkbox] + label, input[type=radio] + label {
    color: #000;
}


input[type=checkbox] + label, input[type=radio] + label {
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    letter-spacing: 0;
    font-family: 'Courier New', monospace;
    text-transform: none;
    font-weight: normal;
    padding-left: 0;
    padding-right: 1.5rem;
    position: relative;
}

 
 
   
   
 label {
    display: unset;;
    font-family: 'Courier New', monospace;
    font-weight: normal;
    line-height: normal;
     letter-spacing: normal;
    font-size: 16px;
    text-transform: none;
    color:#000;
    font-size:16px ;
}


 


   
 #navPanel {  
    line-height: 2.375;
}

 
#navPanelToggle{
color: #2a241c;
    background-color: #eee;
    height: 26px;
    left: 0px;
    border-radius: 0 3px 3px 0;
    border-left: none !important;
    border: 2px solid #fff;
    margin-top: -5px;
    width: 8em;
    padding: 1px 1rem;
            box-shadow: 2px 3px 3px 1px rgb(0 0 0 / 40%);
	} 
 

body, input, select, textarea  {
    font-family: 'Courier New', monospace;
    line-height:0; 
    letter-spacing: 1px;
    line-height: 1.25em !important;
}


p {
	font-family: 'Courier New', monospace;
	padding:0;
	margin:0;
	} 
 
input[type=text] {
	  height: 36px;
    color:#000;
		display: block;
		outline: 0;	
		text-decoration: none;
		width: 100%;
		margin-bottom: 0;
	  border: 2px solid #fff;
   # background: #fff;
    border-radius: 3px 0 0 3px;
    border-right: none;  
    
	}
	
	
input[type=submit], input[type=reset], input[type=button], button, .button {
	   font-family: 'Courier New', monospace;
     font-size: 0.8rem; 
     
     letter-spacing: 0px; 
   
     line-height: 0;
	
	}	
	
	
	
	
	input[type=submit]  {
		border:0px; 
		}
 
	

*, ::before, ::after {
    box-sizing: none;
    margin: 0;
    padding: 0;
}
 

		table th {
	 
			padding: 0;
			 
			text-transform: none;
		}




table th {
    color: #000;
}

.span-tableitems a, .shorttext a  .longtext a {
    color: #000;
    border-bottom-color: none;
    font-weight: bold;
} 

 

		a:hover {
			border-bottom-color: none;
			color: #717981 !important  ;
		}


 
		 

		#wrapper   > .bg {
			position: unset;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #292118;		
 

	  background: url("../images/mxmdl-bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

										 
			z-index: -1;
		}



		  	#wrapper > .bg.fixed {
				position: fixed;
				width: 100%;
				height: 100vh;
				
			}






/* end */

body {
	font-family: 'Courier New', monospace;
 	font-size:16px ;
 	background-color: #ddd;
 	color:#000;
 	line-height: 1.375;
	}
 

.fa.fa-home {
	style="font-size: 60px;
	 padding-right:11px;
	  color: #bebebe;
	}

.original-video {
    position: relative; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;   



}





video::-webkit-media-controls-volume-slider {
#display:none;
}

video::-webkit-media-controls-mute-button {
#display:none;
}
video::-webkit-media-controls-fullscreen-button {
#   display: none;
}




.container {
  display: flex;
  flex-direction: row;
}

#img {
  width: 130px;
}

#text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  
}

@media screen and (max-width: 736px) {
  .container {
    flex-direction: column;
  } 
  
@media screen and (max-width: 769px) {
  .faq-right-content{
    padding: 1.2rem;
}
 }   
  
  
  
  #img {
    width: 100%;
    height: auto;
  }
  
 
  
  
}
















 

.red {
	font-weight: bold;
	color: #aa3500;
	} 



.blue {
	font-family: 'Courier New', monospace;
	font-weight: bold;
	color: #000;
	}


 
 .span-tableitems { 
 	font-family: 'Courier New', monospace;
 	font-size:16px ;
 	 letter-spacing: -1px;
 	     white-space: nowrap;
            width: 100%;
           overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 5px 0 5px;
  }

 .text-overflow-ellipses { 
 	     white-space: nowrap;
            width: 100%;
           overflow: hidden;
          text-overflow: ellipsis;
       }

.parent{
    width: 100%;
    #border:3px solid black;
}

.child{
    float: left;
    width:200px; 
     border:1px solid #8080803d;
    padding:3px;
    margin:6px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.child:hover{  
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.child img {
  height: 100%; 
  width: 100%;
 object-fit: contain;
 /* The following may be needed if there's still a wierd looking 2-3px gap at the bottom of the image in some browsers: */
  vertical-align: bottom;
}

.child img:hover {  
  opacity: 0.7;
}

.thumb_default{
    width:200px;
     border:1px solid #8080803d;
    padding:3px;
    margin:6px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.thumb_default img {
  height: 100%;
 
 object-fit: contain;

   max-width: 100%;  
  /* Images default to being inline, inline items cannot have a width, so change to block: */
  display: block;
  /* The following may be needed if there's still a wierd looking 2-3px gap at the bottom of the image in some browsers: */
  vertical-align: bottom;

}

.modal-img {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 93px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(53 63 80 / 90%);
}

.modal-content {
  margin: auto;
  display: block;
  height: 80%;  
  padding-top: 40px;
      position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  
  
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;

}

 

.close {
  position: absolute;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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


.closepic {
 	  font-family: 'Courier New', monospace !important;
	  font-size:18px ;
    position: absolute;
    right: 55px;
    top: 100px;
    color: #f1f1f1;
    font-weight: bold;
    height: 30px;
    width: 30px;
    padding: 0;
    background: #c75050 !important;
    border-radius: 3px;
    border: 1px solid #8c969fc9;
    cursor: pointer;
    font-weight: bold;
    color: #c0c0c0 !important;
    padding: 0;
    text-align: center;
    letter-spacing: 0;
    line-height: 28px;
}

.closepic:hover {
 
    background: #ff0000 !important;
    color: #ffffff !important;
}  




@import url(https://fonts.googleapis.com/css?family=Open+Sans);


.search { 
	 
    padding-bottom: 20px;
    padding-top: 8px;
 width: 50%;
  position: relative;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  
}

.search.submenu { 
	 
     padding-bottom: 10px;
    padding-top: 0px;
display: block;
  
}

@media screen and (max-width: 1680px) {
	.search {   width: 60%; }
	
	.closepic {
    top: 80px;
    right: 48px;
	}
	
}
@media screen and (max-width: 1280px) {
	.search {   width: 70%; }
		.closepic {
    top: 80px;
    right: 43px;
	}
	
	
}
@media screen and (max-width: 980px) {
	.search {   width: 100%; }
	.closepic {
    top: 50px;
    right: 17px;
	}
	
	#main {
    padding-top: 2rem;
    margin-top: 0;
}	

.modal-content {
  padding-top: 0px; 
  height: 60%;
  }

}

@media screen and (max-width: 480px) {
	.search {   width: 100%; }
	#main {
    padding-top: 2rem ;
    margin-top: 0;
  }	

.modal-content {
  padding-top: 0px; 
  height: 50%;
  }

.textfading.center {

	  width: unset !important;
   
}

}



.searchTerm:focus {
	box-shadow: 0 0 10px 2px #dddddd;
	border: 2px solid #dddddd;
}

.searchTerm {
  font-family: 'Courier New', monospace;
  font-size:18px ;
  font-weight: bold;
  font-style: normal;
  width: 100%;
  border: 3px solid #fff;
  border-right: none;
  padding: 5px;
  padding-left: 11px;
  height: 36px;
  border-radius: 3px 0 0 3px;
  outline: none;
  color: #2a5e7f !important;
  background-color: #eeeeee !important;
}

.searchTerm:focus{
  color: #2980b9 !important;
}

.searchButton {
  width: 70px;
  height: 36px;
  border: 2px solid #fff;
  background: #6d512c;
  text-align: center;
  color: #fff;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  font-size: 20px;
  padding:0;
  line-height: 0;
  letter-spacing: 0;
}

 


.modal_grammar{
display:flex;flex-direction:column;justify-content:center;
min-height:50px;background-color:#ffffff69;border:1px solid #ddd;
border-radius:6px;z-index:1001;position:fixed;top:50%;left:50%;
transform:translate(-50%, -50%);
width:70%;
height: 100vh;
}

@media screen and (max-width: 912px) {
  .modal_grammar {
  width:90%;   height: 100vh;
  } 
}

@media screen and (max-width: 789px) {
  .modal_grammar {
  width:100%;   height: 100vh;
  } 
  
 
  
}
  

.modal_grammar p {
    font-size: 0.9rem;
    color: #777;
    margin: .2rem 0 .2rem;
}

.modaltitle{
background-color:#bdc8d3;
border:1px solid #d0dde9;
border-radius:6px 6px 0 0;
height:42px
}
 
.modal_grammar .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    margin-right: 9px;
    margin-left: 33px;
    letter-spacing: 3px;
}

.btn-close {
    height: 30px;
    width: 30px;
    padding: 0;
    background: #c75050 !important;
    border-radius: 3px;
    border: 1px solid #8c969fc9;
    cursor: pointer;
    font-weight: bold;
    color: #c0c0c0 !important;
    font-size: 18px;
  
}

.btn-close:hover {
 
    background: #ff0000 !important;
    color: #ffffff !important;
}     


.overlay_grammar{
	position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;
	background-color: rgb(53 63 80 / 90%);
	backdrop-filter:blur(3px);z-index:1000}
	
.hidden{display:none}

.modalcontent{
	border-radius:4px;margin:11px;
	height: calc(100vh - 65px);
	}

iframe {
	           height: calc(100vh - 65px);
            width: 100%;
            

        }

.iframeheader {
padding:5px 5px 20px 5px;
 
overflow:hidden;
 
 }

input {
	font-family: 'Courier New', monospace;
	font-size:16px ;
   width: 0.9em;
    height: 0.9em;
    background-color: #ddd;
    vertical-align: middle;
  text-decoration: none;
  
 
  
        }


a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
    
}

#example1 .fixedColumn {
  width: 90px;
 float: left;
display: flex;
justify-content: flex-end
}

#example1 .flexibleColumn {
  margin-left: 0px;
overflow:auto;

#  background: #0E5D7B;
  /* For browsers that do not support gradients */
#  background: -webkit-linear-gradient(to right, #f6f6f6, white);
  /* For Safari 5.1 to 6.0 */
#  background: -o-linear-gradient(to right, #f6f6f6, white);
  /* For Opera 11.1 to 12.0 */
#  background: -moz-linear-gradient(to right,  #f6f6f6, white);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right,white, red, white);
  /* Standard syntax */

}


/* gratuituous styling */

.fixedColumn {  padding: 0px;} 
.flexibleColumn {  padding: 0px;}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 270px;
  margin-left:5px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.listformat_items
{
height: 15px;
border-bottom: 1px solid #e8e8e8;
padding-right: 11px;
}

.listformat_items.color1
{
# background: linear-gradient(to right,white, red, white);
#background-color: #f6f6f6;
 }

.listformat_items.color2
{
# background: linear-gradient(to right,white, red, white);
#background-color: #efefef;
}

.text-container {
    position: relative;
    color: #000;
    /* left: 50%; */
    top: -50%;
    /* transform: translate(-50%, -50%); */
    background-color: #eee;
    border:1px solid #8080803d;

    padding: 0.3rem;
    text-align: center;

}

tbody tr:hover.selected th,
tbody tr:hover th {
  background-color: #F0F0F090;
  cursor: pointer;
}
tbody tr.selected th {
  background-color: #ffffff44;
}

table {
border-collapse: collapse;
}

thead > tr {
  font-weight: normal; 
  padding: 3px;
  text-align: left;
     border-bottom: 2px solid #9393937d;

}

.table > tbody > tr   {
   border-bottom: 1px solid #eee;
}

 .table > tbody > tr:last-child   {
   border-bottom: none;
}
 
#progress_dots{
	letter-spacing: -5px;
	}


.dltext  {
text-align: right; 
}

.iframe_dloptions{
  padding: 13px 25px 20px 25px;
  margin:11px 11px;
  border-radius: 5px;
  border: 1px solid #ffffff70;	
  background-color: #ddd;  
 min-width: 260px;
 
 background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url(../images/mxmdl-bg.jpg);
    background-position: center -44em;
    background-repeat: no-repeat;
	}
	
.iframe_dloptions.second{ 
	#height:100vh;
}
 
 
.textfading.disabled, .textfading.disabled_2 {
	cursor: not-allowed;
    pointer-events: none;
    color: #757575;
    border: 2px solid #c0ab9ba3;
    background: #e0d7d085;
    box-shadow: 0px 1px 1px 1px rgb(242 242 242 / 40%);
}

.textfading.disabled:hover{
	cursor: not-allowed ;pointer-events: none;
    color: #757575 !important;;   
        border: 2px solid #cecece;
    background: #d4d4d4  ;
    box-shadow: 0px 1px 1px 1px rgb(242 242 242 / 40%);  

  top: 0px;    
    
}

.textfading.nomargintop { 
	margin-top: 0px;
	}

.textfading {
font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    line-height: 8px;
    padding: 8px;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    border: 2px solid #eeeeee94;
    background: none;
    margin-top: 15px;
    position: relative;
     box-shadow:0px 1px 1px 1px rgb(105 105 105 / 39%);
 
background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url(../images/mxmdl-bg.jpg);
    background-position: -28em -54em;
    background-repeat: no-repeat;
 height: 33px;
    
}

.textfading.leftpadding {
    padding-left: 25px;
    height: 33px;
}

.textfading.width {
    width: 340px;
    height: 33px;
}

.textfading.center {

	text-align: center;
	
	    width: 340px;
    margin-left: auto;
    margin-right: auto;    
height: 33px;
}


.textfading.hovertest{
	  color:#000 !important;
 
    border: 2px solid #eeeeee;
    background: none;
    
    background-image: none;
 
    
	}

.textfading:hover {
 
    color:#000 !important;
 
    border: 2px solid #eeeeee;
    background: none;
    
    background-image: none;
  
}


.textfading:active:hover  { /*this is for touch screen press , may affect mousedown as well*/
 
 color: #000000b5 !important;
    border: 2px solid #6363632e;
    background: #71798133;
    background-image: none;
    box-shadow: 0px 1px 1px 1px rgb(255 255 255 / 30%);
}

@-webkit-keyframes colorchange {
  0% {
    color: blue;
  }
  10% {
    color: #8e44ad;
  }
  20% {
    color: #1abc9c;
  }
  30% {
    color: #d35400;
  }
  40% {
    color: blue;
  }
  50% {
    color: #34495e;
  }
  60% {
    color: blue;
  }
  70% {
    color: #2980b9;
  }
  80% {
    color: #ff0000;
  }
  90% {
    color: #2980b9;
  }
  100% {
    color: pink;
  }
}









           span.deleteicon {
           	   width:100%;
                position: relative;
                display: inline-flex;
                align-items: center;
                letter-spacing: normal;
            }
            span.deleteicon span {
                position: absolute;
                display: none;
                right: 6px;
                width: 20px;
                height: 20px;
                border-radius: 3px;
                color: #c0c0c0 !important;
                background: #c75050 !important;
                text-align: center;
                line-height: 19px;
                cursor: pointer;
                letter-spacing: normal;
            }
            
             span.deleteicon span:hover {
                position: absolute;
                display: block;
                right: 6px;
                width: 20px;
                height: 20px;
                border-radius: 3px;
                color: #ffffff !important;
                background: #ff0000 !important;
                text-align: center;
                 
                cursor: pointer;
            }           
            
            span.deleteicon input {
                padding-right: 18px;
                 
            }










input[type='range'] {
  width: 210px;
  height: 30px;
  overflow: hidden;
  cursor: pointer;
    outline: none;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
    background: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 1px;
  background: #003D7C;
}

input[type='range']:nth-child(2)::-webkit-slider-runnable-track{
  background: none;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid #003D7C;
  border-radius: 25px;
  z-index: 1;
}


input[type='range']:nth-child(1)::-webkit-slider-thumb{
  z-index: 2;
}

.rangeslider{
    position: relative;
    height: 60px;
    width: 210px;
    display: inline-block;
    margin-top: -5px;
    margin-left: 20px;
}
.rangeslider input{
    position: absolute;
}
.rangeslider{
    position: absolute;
}

.rangeslider span{
    position: absolute;
    margin-top: 30px;
    left: 0;
}

.rangeslider .right{
   position: relative;
   float: right;
   margin-right: -5px;
}


/* Proof of concept for Firefox */
@-moz-document url-prefix() {
  .rangeslider::before{
    content:'';
    width:100%;
    height:2px;
    background: #003D7C;
    display:block;
    position: relative;
    top:16px;
  }

  input[type='range']:nth-child(1){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }

  input[type='range']:nth-child(2){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }
input[type='range']::-moz-range-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid #003D7C;
  border-radius: 25px;
  z-index: 1;
}

  input[type='range']:nth-child(1)::-moz-range-thumb {
      transform: translateY(-20px);    
  }
  input[type='range']:nth-child(2)::-moz-range-thumb {
      transform: translateY(-20px);    
  }
}










.slider-distance {
    display: inline-block;
    margin-top: -5px;
    margin-left: 20px;
}





[slider] .left {
    position: absolute;
    margin-top: 33px;
    left: -50px;
}

[slider] .right {
     
    margin-top: 33px;
    position: absolute;
    right: -50px;
}
@media screen and (max-width: 444px) {
	
	.original-video {
  position: relative;
  min-width: 100%; 
  width:11px;
  }
	
 .wrapper{
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	}
	
	
	[slider] .right {
   position: absolute;
    margin-top: 50px;
  }

.textfading {
    line-height: 8px !important;  
   } 
.textfading.width {
    width:auto;  
   } 
  
iframe {
    
}


.modal_grammar {
	#height: 740px    !important; 

    top: 0;
    transform: translate(-50%, 0);
height: 100vh;

	}  

.modaltitle { 
    border-radius: 0;
}


#modal_title  {
	display:none;
	}

.modal_grammar .flex {
	float:right;
}


	
.searchTerm	{
	letter-spacing: -3px;
	}		
	
label{
	letter-spacing: -3px;
	}
	
 select  {		
	letter-spacing: -3px;
	}
 select:focus  {		
	letter-spacing: -3px;
	}
	
	
	select option {
	
	    letter-spacing: -3px;
		}
	
	
body{
	letter-spacing: -3px;
	}	
	

	  
p{
	letter-spacing: -3px;
	}	  
 
.sub {
  padding-left: 11px;
 
	display: block;
	} 


}


 


	
@media screen and (max-width: 352px) {
 
 .iframe_dloptions{
  padding: 8px 8px;	
  min-width: 260px;
}	
 
	.original-video {
  position: relative;
  min-width: 50%; 
  width: 10rem;
  }




	[slider] .right {
    margin-top: 77px !important;  
  }
  
.textfading {
    line-height: 14px !important;  
   } 
.textfading.width {
    width:auto;  
    min-width: 273px;
   }   
.textfading.leftpadding {
    padding-left: 8px;
}   
   

[slider] {
    height: 46px !important;  
}

iframe {
    
}


.modal_grammar {
	#height: 692px    !important; 
	
    top: 0;
    transform: translate(-50%, 0);
	height: 100vh;
	}

.modaltitle { 
    border-radius: 0;
}
  
#modal_title  {
	display:none;
	}

.searchTerm	{
	letter-spacing: -3px;
	}	
	
label{
	letter-spacing: -3px;
	}	

body{
	letter-spacing: -3px;
	}	
p{
	letter-spacing: -3px;
	}	

.sub {
 
 
    padding-left: 6px;
	}

 .sectionoptions {
    padding-left: 1px;    
}	

.slotnum{
	display:none;
	}


  
}


@media screen and (max-width: 200px) {
	.searchTerm	{
	letter-spacing: -3px;
	}	
	
	.original-video {
  min-width: 50%; 
  width: 10rem;
 
 
 
  }
	
 .wrapper{
 	justify-content: normal;
 	}
	
	
.sub {
 
	    margin-left: 0px;
    padding-left: 4px;
	display: block;
	}	
	

 
}



[scroller] .disabledz { 
    background: #939393  !important; 
    cursor: not-allowed !important; 
    box-shadow: 2px 2px 0px -1px #ffffff8a;
}
[scroller] .disabledz:hover{
	background: #d4d4d4 !important;
   color: #c0c0c0 !important ;
	}


[scroller] .left {
    position: absolute;
    margin-top: -22px;
    padding-left: 10px;
    
     height: 24px;
    width: 33px;
        line-height: 22px;
    background: #c75050  ;
    border-radius: 3px;
    border: 1px solid #c0c0c0;
    cursor: pointer;
    font-weight: bold;
    color: #c0c0c0 ;
    font-size: 18px;
    align-items: center;
    letter-spacing: normal;
    text-align: center;   
}

[scroller] .left:hover{
	background: #ff0000 ;
	color:#fff ;
	}

[scroller] .right {     
    margin-top: -22px;
    position: absolute;
    right: 0px;
     padding-right: 10px;
    height: 24px;
    width: 33px;
    line-height: 22px;
    padding: 0;
    background: #c75050 ;
    border-radius: 3px;
    border: 1px solid #c0c0c0;
    cursor: pointer;
    font-weight: bold;
    color: #c0c0c0 ;
    font-size: 18px;
}

[scroller] .right:hover{
	background: #ff0000 ;
	color:#fff ;
	}



[slider] > span { 
    margin-top: 33px;
    left: 0;
}

 

[slider] {   
  position: relative;
  height: 5px;
  margin: 15px 33px 30px 33px;
 
}

[slider] > div {
  position: absolute;
  left: 13px;
  right: 15px;
  height: 5px;
}
[slider] > div > [inverse-left] {
  position: absolute; 
  left: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #c0c0c0;
  margin: 0 7px;top: 7px;
}

[slider] > div > [inverse-right] {
  position: absolute;
  right: 0;
  height: 5px;
  border-radius: 10px;
  background-color: #c0c0c0;
  margin: 0 7px;top: 7px;
}


[slider] > div > [range] {
  position: absolute;
  left: 0;
  height: 5px;
  border-radius: 14px;
  background-color: #555;
  top: 7px;
}

[slider] > div > [thumb] {
  position: absolute;
   
  z-index: 2;
  height: 20px;
  width: 20px;
  text-align: left;
  margin-left: -11px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  background-color: #FFF;
  border-radius: 50%;
  outline: none;
}

[slider] > div > [start]   {
  background-color: #555; 
}

[slider] > div > [end]   {
  background-color: #555;
  
}

[slider] > input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
 
  z-index: 3;

    top: -5px;
  width: 100%;
  opacity:0;

   
}

 
[slider] >    [everything]  {  
  filter: blur(3px) grayscale(100%);
  opacity: 0.6  
  pointer-events: none;  
  cursor: not-allowed; 
  
  
}
 

div[slider] > input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 28px;
  height: 28px;
  border-radius: 0px;
  border: 0 none;
  background: red;
  -webkit-appearance: none;
}

  

















input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
    background: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 200px;
  height: 1px;
  background: #003D7C;
}

input[type='range']:nth-child(2)::-webkit-slider-runnable-track{
  background: none;
}

input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid #003D7C;
  border-radius: 25px;
  z-index: 1;
}


input[type='range']:nth-child(1)::-webkit-slider-thumb{
  z-index: 2;
}



.rangeslider{ 	
    position: relative;
    height: 60px;
    width: 510px;
    display: inline-block;
    margin-top: -5px;    
    margin-left: 20px;    
}
 input[type='range'] { 
  width: 510px;
  height: 30px;
  
  cursor: pointer;
    outline: none;
}



.rangeslider input{
    position: absolute;
}
.rangeslider{
    position: absolute;
}

.rangeslider span{
    position: absolute;
    margin-top: 30px;
    left: 0;
}

.rangeslider .right{
   position: relative;
   float: right;
   margin-right: -5px;
}


/* Proof of concept for Firefox */
@-moz-document url-prefix() {
  .rangeslider::before{
    content:'';
    width:100%;
    height:2px;
    background: #003D7C;
    display:block;
    position: relative;
    top:16px;
  }

  input[type='range']:nth-child(1){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }

  input[type='range']:nth-child(2){
    position:absolute;
    top:35px !important;
    overflow:visible !important;
    height:0;
  }
input[type='range']::-moz-range-thumb {
  position: relative;
  height: 15px;
  width: 15px;
  margin-top: -7px;
  background: #fff;
  border: 1px solid #003D7C;
  border-radius: 25px;
  z-index: 1;
}

  input[type='range']:nth-child(1)::-moz-range-thumb {
      transform: translateY(-20px);    
  }
  input[type='range']:nth-child(2)::-moz-range-thumb {
      transform: translateY(-20px);    
  }
}





#message-box {   
  padding: 1px; 
}

 
 

.everything {
  filter: blur(3px) grayscale(100%);
  opacity: 0.6  
  pointer-events: none;  
  cursor: not-allowed; 
  pointer-events: none;
  
}



 



.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 270px;
margin-left:5px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}






.col-main {
 
   padding: 8px 11px 0 22px; 
}  

.col-complementary {
  flex: 1; 

}

@media only screen and (min-width: 640px) {
  .layout { 
     display: flex;   
  }
.col-main img {
	    padding-top: 0px !important;	    
	}


}

.container_top {
   max-width: 1200px;
  margin-right: auto !important;
  margin-left: auto !important;
 
  padding: 0 1.2rem;
}
.col-main img {
	    padding-top: 10px;
	}




.layout {
 
    
     line-height: 0;
 
    border: 1px solid #a8a8a8;
    border-radius: 5px;
    background-image: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url(../images/mxmdl-bg.jpg);
    background-position: center -50em;
    background-repeat: no-repeat;
    box-shadow: 2px 2px 2px 0px #ffffff36;
    

}