.backbod {  margin-left: 0px; margin-right: 6px; margin-top: 2px; 
   background:  url('hswback01.jpg'); background-size:  100% 100%; background-attachment: fixed;
   display: flex; }

@media print { .backbod {  
  margin-left: 2px; margin-right: 2px; margin-top: 2px; 
   background: white ; display: flex;  } }

.backsiz {  margin-left: 0px;  margin-top: 2px;  }
@media ( min-width:693px ) { .backsiz {  margin-left: 15px;  margin-top: 9px;  } }






.r3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}

/*
@-webkit-keyframes animasch { from { top:-110%;} to {top:0;}  }
@keyframes animassch { from {top:-110%;} to {top:0;}  }
 */

@-webkit-keyframes animasch { from { opacity:0;} to {opacity:1;}  }
@keyframes animassch { from {opacity:0;} to {opacity:1;}  }


/* top:-110%;  */

.r3-container {  display: table; text-align: left; }

.r3-modal { z-index:3; position:fixed; text-align: center; width:100%; height:100%;
	 padding-top:46px; left:0; opacity: 0; display: none;
	 overflow:auto; 

/*   background-color:rgb(0,0,0, 0.4); background-color:rgba(0,0,0,0.4); */

   transition: 0.8s;
    -webkit-animation: animassch 0.5s ; 
   animation: animassch 0.5s ;

}

.r3-modal-content{ margin: auto; background-color:#fff;
	position:relative;padding:10;outline:0;width:600px; border: 4px solid black;
 border-radius: 10px; font-family: arial; 

    transition: 0.8s;
    -webkit-animation: animassch 0.9s ; 
   animation: animassch 0.9s ;

}
@media (min-width:993px){.r3-modal-content{width:900px}}
@media (max-width:768px){.r3-modal-content{width:500px}}
@media (max-width:600px){.r3-modal-content{width:400px; }}

.r3-display-bottomright { position:relative; float:right;}
.r3-display-bottomleft { position:relative; float: left;}

.r3-display-topleft { position:relative; margin-bottom: 8px; float: middle; }
.r3-display-top { position:relative;left:0;top:0; margin-bottom: 8px; float: middle; }



.setrepmultb {
   border: 1px solid black; width: 100%; border-collapse: collapse;
}

.schmapsma { height: 115px; max-width: 160px; cursor: pointer; border-radius: 4px; 

   transition: 0.8s;
    -webkit-animation: animassch 0.5s ; 
   animation: animassch 0.5s ;

}

@media ( max-width:380px ) { .schmapsma { height: 75px;  } }
@media ( max-width:470px ) { .schmapsma { height: 100px; } }


.schmapsusma { height: 110px; max-height: 110px; cursor: pointer; border: 0px solid grey; border-radius: 9px;
 max-width: 120px ; 

 }
@media ( max-width:470px ) { .schmapsusma { height: 60px; } }
@media ( max-width:400px ) { .schmapsusma { height: 50px; } }


.schmapc { height: 130px;  cursor: pointer; border-radius: 4px;
   transition: 0.8s;
    -webkit-animation: animassch 0.5s ; 
   animation: animassch 0.5s ;

 }
@media ( max-width:400px ) { .schmapc {  } }


.schmapla { height: 140px; cursor: pointer; border-radius: 8px;
 max-width: 220px;
   transition: 0.8s;
    -webkit-animation: animassch 0.5s ; 
   animation: animassch 0.5s ;

 }
@media ( max-width:380px ) { .schmapla { height: 120px;  } }
@media ( max-width:400px ) { .schmapla {  } }

/*
.tschvars { width: 300px;    float:left;    }
@media only screen and (max-width: 700px){
 .tschvars {   float:left;    } }
@media only screen and (max-width: 500px){
 .tschvars {   float:left;    } }
  */

 
.tschvarcl { display: table-cell; margin-left: 5px; float: right; border: 0px solid black;
 width: 200px; text-align: right;
}




.iprevicl { display: none; float: right; min-width: 250px; max-width: 400px; }




.poolitem { display: inline-flex; border-bottom: 0px solid black; font-family: arial;  font-size: 9pt; 
    margin-bottom: 3px; margin-left: 20px;  padding-bottom: 6px;  }

/*
@media only screen and (max-width: 700px){
 .poolitem { display: inline-block;  width: 150px;  border-bottom: 0px solid black; font-family: arial;  font-size: 9pt ; 
  margin-bottom: 3px; margin-left: 20px;  padding-bottom: 6px; } }
@media only screen and (max-width: 500px){
 .poolitem {  display: inline-block;  width: 100px;  border-bottom: 0px solid black; font-family: arial;  font-size: 6pt; 
  margin-bottom: 3px; margin-left: 10px;  padding-bottom: 6px; } }
*/

/*
.pltxt {  display:inline-block; max-width: 100px; font-size: 7pt; float: left; margin-left: 2px;}
@media only screen and (max-width: 700px){
 .pltxt {   display:none;   } }
@media only screen and (max-width: 500px){
 .pltxt {  display:none   } }
*/

.smallp { border-radius: 8px;  max-height: 55px; max-width: 75px; cursor: pointer; margin-right: 3px; margin-bottom: 3px;
 border: 1px solid black; }
.smallp:hover { transform: scale(1.4); }

 

.poolpct { width: 130px; border-radius: 10px; 
border: 1px solid #808080; margin-left: 4px; cursor: pointer;
  display: inline-flex;
}

/*

.poolpct:hover {
  transform: scale(1.3);
}

*/


.poolpcbig { max-height: 160px; max-width: 260px; border-radius: 10px; 
  border: 1px solid #808080; margin-left: 14px; cursor: pointer;
  display: inline-flex;
 }

/*
.poolpcbig:hover { transform: scale(1.3); }
*/ 

.poolpcsma { width: 100px; height: 80px; border-radius: 10px; 
  border: 1px solid #808080; margin-left: 4px; cursor: pointer;
  display: inline-flex;
 }

/*
.poolpcsma:hover { transform: scale(1.8); }
*/



.poolpi { border-radius: 10px; }

.picpool_cont { overflow-x: scroll; overflow-y: scroll; 
	 border: 0px solid; display: table-cell; border-radius: 10px; padding-top: 20px;
 background-color: rgb(255,255,255, 0.7); background-color: rgba(255,255,255, 0.7);
 }


.poolzkstr { border: 0px solid; font-family: arial;  font-size: 11pt; padding-left: 4px;
 background-color: rgb(255,255,255, 0.7); background-color: rgba(255,255,255, 0.7);
 border-radius: 5px; margin-bottom: 3px; margin-top: 2px;
 }


.zk_size {  width: 150px;  }
@media only screen and (min-width: 700px){
 .zk_size {  width: 200px;   } }
@media only screen and (min-width: 900px){
 .zk_size {  width: 200px;   } }
@media only screen and (min-width: 1400px){
 .zk_size {  width: 280px;   } }
@media only screen and (min-width: 1500px){
 .zk_size {  width: 300px;   } }


.picpool_size { height: 700px; width: 250px; 	}
@media only screen and (min-width: 700px){
 .picpool_size { height: 700px; width: 350px; 	} }
@media only screen and (min-width: 900px){
 .picpool_size { height: 700px; width: 370px; 	} }
@media only screen and (min-width: 1400px){
 .picpool_size { height: 700px; width: 520px; 	} }
@media only screen and (min-width: 1500px){
 .picpool_size { height: 700px; width: 650px; 	} }


 .ptxt  {   font-family: arial;  font-size: 9pt; width: 100%; }

 input.bstymid { font-family: arial;  font-size: 11pt; font-weight: bold; }
 input.bstysma { font-family: arial;  font-size: 13pt; font-weight: normal;  border: 0px ; background-color:lightgrey; border-top-left-radius: 10px 10px; border-top-right-radius:  10px 10px; border-bottom-left-radius: 10px 10px; border-bottom-right-radius:  10px 10px;}
  input.bstybig { font-family: arial;  font-size: 14pt; font-weight: bold; }
  input.zkfie { font-size: 16pt;width: 120px }
  input.inpgegs { font-size: 12pt;width: 220px }
  button.bstybig { font-family: arial;  font-size: 14pt; font-weight: bold; }
  table.tbvars { font-family: arial;  font-size: 9pt; font-weight: bold }
  select.selmid { font-family: arial;  font-size: 12pt; font-weight: bold; }


/* dat only screen nmoet hier weg denk ik */

.tbvars {  width: 200px;  float:left; border: solid 0px;   height:100; font-family: arial;  font-size: 9pt 	}
@media only screen and (max-width: 700px){
 .tbvars {  width: 380px; border: solid 0px;   height:100; font-family: arial;  font-size: 9pt 	} }
@media only screen and (max-width: 500px){
 .tbvars {  width: 100%; border: solid 0px;   height:100; font-family: arial;  font-size: 9pt 	} }




/*

.body { align-content: center}
 w3-input w3-round w3-border

*/


.pgstatu { min-width:90px; max-width:200px; border: 0px; background: rgb(255,255,255, 0.0); background: rgba(255,255,255, 0.0);
 display: table; margin: 3px; padding-left: 2px; border-radius: 6px; font-family: arial; color: white;
 }

.r3-amber { color:#000!important;background-color:#ffc107!important; }
.r3-aqua {color:#000!important;background-color:#00ffff!important}


.r3-select { background-color: #c0c0c0;
 padding:9px 0; width:200px;border:none;border-bottom:1px solid #ccc;

}



.r3-input {  padding:8px; display:block; border:none; border:1px solid #ccc; border-radius: 4px; width:200px;
 background: rgb(255,255,255, 0.6); background: rgba(255,255,255, 0.6);
 }
.r3-but { border: 2px solid; ; margin-bottom: 3px; font-size: 10pt; padding: 4px;
	 width: 200px; cursor: pointer; border-radius: 10px; background: #3f51b5; color: white; }

.r3-but:hover { color: red; border: 2px solid darkred; background-color: white; }

.lis_schems { max-height: 570px; overflow-x: hidden; overflow-y: scroll; margin-bottom: 10px; margin-top: 10px;
  border-radius: 9px; text-align:  left; padding-left:  20px;
  font-family: arial; 
 max-width: 550px;  }


.teditoef { font-size: 10pt; padding: 0px; border: 0px solid black; border-radius: 6px; 
  width: 400px; position: relative; margin: auto }