body{
 -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scrollbar-gutter: stable;
}
form, #in{
    width:100%;
    height:100%;
    
}
.e{
    font-size: 70% !important;
}
#cookie-bar{
font-size:17pt !important;
padding-bottom:2% !important;
}
#corpo2{
height:100% !important;
}
#init2{
background-image: url('./../../img/bg_critty_02.png') !important; /* swirls.gif */
background-repeat: repeat !important;
background-size:40% !important;
height:100% !important;
}
.wellMod{
    opacity:1 !important;
    width:80% !important;
    height:fit-content!important;
    margin-top: 30px; !important;
}
.wellMod p{
    font-size:100% !important;
}
.campMod{
    padding-top:0 !important;
    margin-top:4px !important;
    height:100vh !important;
    display:block !important;
    overflow:scroll;
}
.butMod{
    width:80% !important;
    margin:0 !important;
    height:fit-content !important;
}
.bic{
    z-index:6;
}
#tit{
    text-align:left !important;
    font-size:200% !important;
    padding:0;
    margin:0;
}
#segn{
    width:100%;
    height:10vh;
    margin-top:-10vh;
    font-size: 40px;
    text-align:center;
    margin-bottom:10vh;
}
#segn p{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    color:grey;
}
.classic, .arcade, .crossrun{
display:none;
}

#l{
	position:absolute;
	top:25px;
	right:5px;
	padding:10px;
	padding-left:20px;
	padding-right:40px;
	font-size: 20px;
	font-weight:bold;
	background-color:rgba(200,120,25,.5);
	border:2px solid rgba(200,120,25,.7);
	border-radius:15% 0 0 15%;
}
#log{
        position:absolute;
	right:-5%;
	top:30%;
	margin-top:-2%;
	padding:2%;
	padding-right:7%;
	font-size: 45%;
	background-color:rgba(20,120,250,.5);
	border:2px solid rgba(20,120,250,.7);
	border-radius:15% 15% 15% 15%;
}
#swirl, #wswirl, #lswirl{
position:fixed;
height:100%;
width:100%;
padding:1%;
padding-top:45vh;
horizontal-padding:15%;
margin:0;
top:0;
left:0;
text-align:center;
font-weight:bold;
background-image: url('./../../img/swirls.gif'); /* swirls.gif */
background-position:top; 
background-repeat: no-repeat;
font-size:4vh;
text-align: center;
z-index:5;
display:none;
}
#swhole{
position:fixed;
height:100%;
width:100%;
margin:0;
top:0;
left:0;
text-align:center;
font-weight:bold;
background-color:lightgray;
background-image: url('./../../img/bg_critty_01_mod_01.png'); /* swirls.gif */
background-repeat: repeat;
background-size:40%;
z-index:4;
display:none;

}
#istr{
min-height:50%;
width: 80%;
font-size:17px;
padding:10%;
padding-top:5%;
padding-bottom: 90%;
word-wrap: break-word;
}
#well h4{
font-size:30px;
margin-top:0;
}
#well p{
font-size:17px;
word-break: word-wrap;
}
#well{
    padding:5%;
    padding-bottom:50%;
    height:fit-content;
    background-color:lightgray;
border:2px solid rgba(0,0,0,.05);
opacity:.7;
}
.n1{
  background-color: rgba(255,0,0, .3) !important;
}
.n4{
  background-color: rgba(255,155,0,.5) !important;
}
.n5{
  background-color: rgba(130,150,0,.3) !important;
}
.n2{
  background-color: rgba(55,255,0,.3) !important;
}
.n7{
  background-color: rgba(0,255,255,.3)!important;
}
.n6{
  background-color: rgba(0,55,255,.3) !important;
}
.n3{
  background-color: rgba(255,0,255,.3) !important;
}
.n8{
  background-color: rgba(155,0,255,.3) !important;
}
.not{
  border: 3px dotted darkred !important;
  background-color: rgba(255,0,0,.4) !important;
}
.not2{
    padding: 10px;
    border-left: 5px solid darkred !important;
    background-color: rgba(255,0,0,.4) !important;
}
.iniz_vert{
border-top: 7px solid black !important;

}
.fin_oriz{
border-right: 7px solid gray !important;
}
.iniz_oriz{
border-left:7px solid black !important;
}
.fin_vert{
border-bottom: 7px solid gray !important;
}
.yes2{
padding: 10px;
border-left: 5px solid darkgreen !important;
background-color: rgba(55,255,0,.3) !important;
}
.blk{
   background-color: rgba(0,0,0,0) !important;
}
.whi{
	background-color:rgba(255,255,255,1) !important;
}
.col{
  padding: 0;
  margin:  0;
  position: relative;
  left:0;
  top:0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin-top:-5%;
  margin-bottom:-5%;
}
.mycell2{
	border: 1px solid black;
	padding: 0;
	vertical-align: middle;
}
.let2{
  font-weight: bold;
  }
.let2 p{
  font-size: 40px;
  position: relative;
  text-align: center;
  text-anchor: center;
  top:0;
  left:0;
  border: none;
  outline0: 0;
  width:80%;
  height:80%;
  padding: 0;
  margin:0;
  }
.num2{
  font-size: 30px;
  position: relative;
  right:0;
  bottom:0;
  text-align: right;
  width:10%;
  height:10%;
  font-family: italic;
}
.cas2{
  font-size: 35px;
  position: relative;
  display: inline;
  top:0;
  left:0;
  border: none;
  outline: 0;
  width:90%;
  height:100%;
  background: transparent;
  text-align: center;
  text-anchor: center;
}
.ly{
 background-color: rgba(255,255,50,.5) !important;
}
.mytable2{
  width: max-content;
  height: auto;
  margin: 5%;
  padding: 0;
  border-spacing: 0px;
}
/*
#logounder{
  background-image: url('./../../img/icon.png');
   background-position: left; 
  background-repeat: no-repeat;
  background-size: contain; 
}
hr{
  height: 20px;
  border: none;
  border-bottom:5px dotted black;
}
*/
#loco{
height:20%;
width:20%;
margin-bottom:-15px;
}
#logounder{
display:none;
}
#logounder2{
    font-family: Georgia !important;
    position:relative;
    margin-left:5px;
    margin-top:5px;
    height: min-content;
    font-size:230%;
    font-weight:bold;
}
#loco2{
display:inline;
height:75px;
vertical-align:middle;
}
#logounder2 a{
vertical-align:middle;
}
/* MOBILE VIEW */
/** @media screen and (max-width: 768px) { **/
	body,html{
        margin: 0;
        font-family: Monospace !important;
        width: 100%;
        height: 100%;
        }
#swirl, #wswirl, #lswirl{
background-size: 45vh; 
}

            h1{
            width: 90%;
            font-size: 65px;
            font-weight: bold;
            font-family: Georgia !important;
            text-align: center;
            margin-top: 0;
            margin-left: 5%;
            margin-right: 5%;
            }
            #hed{
			position:fixed;
			width: 100%;
			height:85px;
			top:0;
			left:0;
			border:3px solid rgba(0,0,0,.07);           
            z-index: 2;
            background-color: lightgrey;
            }
		    #logounder{
            font-weight: bold;
            font-family: Georgia !important;
            position: absolute;
            width:fit-content;
			top:5%;
            right:5%;
            margin:0;
            padding:0;
		    }
            #init, #init2{
            font-family: Monospace !important;
              margin:0;
              position: fixed;
              top:0;
              left: 0;
              width: 100%;
              height: 100%;
              background: repeat url("./../../img/bg.png");
              overflow: scroll;
            }
            #ciao{
            font-family: Monospace !important;
              margin:0;
              top:0;
              left: 0;
              width: 100%;
              height:fit-content;
              background: repeat url("./../../img/bg.png");
               border-bottom: 5px dotted black;
              overflow:scroll;
            }
            #bye{
            background-color:rgba(0,0,0,.05);
            }
            .mytable{
            	width: 150%;
             height: auto;
                margin: 5%;
                padding: 0;
                table-layout: fixed;
                border-spacing: 0px;
         
            }
            #ver{
		padding:1%;
			 width:98%;
			 height:auto;
			 font-size:17px;
			 background-color:lightyellow;
			 text-align:right;
			 border-radius:0% 0% 0% 0%;
			 margin-bottom:5%;
	    }
            #foot{
            	height: 100%;
            	width: 100%;
		
            }
             #footout{
            
            	display: flex;
            	flex-direction:column;
		justify-content:space-around;
            	
            	
            }
            #footout,#footin{
            	position: fixed;
            	width: 100%;
		height:fit-content;
            	bottom: 0;
            	left: 0;
            	z-index: 1;
                font-size: 230%;
                padding-top: 10px;
                padding-bottom:0px;
                background-color: lightgrey;
                border:3px solid rgba(0,0,0,.07);
            
            }
            #footin{
            	background: repeat url("./../../img/bg.png") !important;
            }

	    .foottall{
		height:fit-content;
		min-height:160px !important;
		
	    }
	    .footshort{
		height:fit-content;
		min-height:50px !important;
		
	    }
	    
            #left{
            display:flex;
            flex-direction:row;
            justify-content:flex-start;
	    align-content:center;
            height:100%;
            width:60%;
            }
            
             #right{
            display:flex;
            flex-direction:row;
	    justify-content:flex-end;
            align-content:center;
            height:100%;
            width:40%
            
            }
            #centr{
            display:flex;
            flex-direction:row;
            justify-content:space-around;
	    align-content:center;
            height:7%;
            width:100%;
            }
	    #top{
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-content:center;
		align-items:center;
            height:35%;
            width:100%;
	    }
        #toast,#difftoast{
             font-size:15px !important;
             display:none;
             width:150%;
	     height:100%;
             }

            #toast,#difftoast,#toastsel{
        
            	font-family: Monospace !important;
                font-style: italic;
		position: relative;
		left:-5%;
		text-align:center;
            }
            #toastsel{
            width:120%;
            height:100%;
             }
            .void1, .void2{
            	opacity: .3;
            	background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }
            .void1{
                background-image: url('/img/mark1.png') !important;
            }
            .void2{
                background-image: url('/img/mark2.png') !important;
            }
            .mycell, .mycell2{
                
                width: 60px;
                height: 60px;
                border: 2px solid darkgrey;
		padding:0;
            }
            .myrow{
          
              
            }
            .num, .num2{
              font-size: 15px;
              position: relative;
              right:0;
              bottom:0;
              text-align: right;
            }
            .cas, cas2{
            width: 70%;
            height: 70%;
            font-size: 50px;
            border: none;
            outline: 0;
             }
            .cas, .cascont{
            opacity:85%;
            background-color:lightyellow;
            }
            
            .redcont{
            
            }
            .divider{
            
            }
            .nobo{
            	border: none;
            }
           .let, .let2{
              font-size: 30px;
              font-weight: 550;
            }
			#dit{
			font-size: 100px;
            font-weight: 550;
            text-align:center;
			}
#menu{
    display:flex;
            flex-direction:row;
            justify-content:space-around;
	    align-content:center;
	    flex-wrap:wrap;
            height:50%;
            width:100%;
}
#r, #p, #m, #d, #c{
  position: relative;
  width:  50px;
  height: 50px;
  background-size:100% !important;
  background-position:center !important;
  z-index: 2;
  display: none;
  border:none;
  font-size:70%;
}
#p{
  background: no-repeat url("./../../img/bar/plus.png");
}
#m{
  background: no-repeat url("./../../img/bar/min.png");
}
#m{
  background: no-repeat url("./../../img/bar/min.png");
}
#r{
  background: no-repeat url("./../../img/bar/ref.png");
}
#d{
  background: no-repeat url("./../../img/bar/tool.png");
}
#c{
  background: no-repeat url("./../../img/bar/check.png");
}
.cas{
 border:none;
}
#back{
 font-family: Monospace !important;
 display:none;
 position:relative;
 right:10px;
 width:fit-content;
 font-size:90%;
 font-weigth:bold;
 margin:auto 0;

}

#ti{
font-family: Monospace !important;
 display:none;
 position:relative;
 width:fit-content;
 text-align:center;
 margin:auto;
 font-size:70%;

}
#oro{
 font-family: Monospace !important;
 position:relative;
 height:auto;
 width:fit-content;
 text-align:center;
 margin:auto;
 font-size:70%;
}
#po{
  font-family: Monospace !important;  
  position:relative;
	display:block;
	left:10px;
	font-weight: bold;
	width:fit-content;
	margin: auto 0;
	font-size:90%;
	vertical-align:middle;
}

#po #Pimage{
    display:inline-block;
    width:35px;
    height:35px;
    vertical-align:middle;
  background-size:100% !important;
  background-position:left !important;
  background: no-repeat url("./../../img/bar/points_02_mod.png");

}
.Picon{
width:35px;
height:35px;

    display:inline-block;
    vertical-align:middle;
  background-size:100% !important;
  background-position:left !important;
  background: no-repeat url("./../../img/bar/points_02_mod.png")

}
#sim, #adv, #cro-run{
  width: 70%;
  font-family: Georgia !important;
  font-weight:bold;
  font-size: 7vw;
  background-color: lightblue;
  border:2px solid rgba(0,0,0,.05);
  z-index: 1;
  border-radius: 5%;
  text-align: center;
  padding: 2% 2%;
  margin: 6% auto;
  opacity: .7;
  word-break:break-work;
}
#Cicon, #Aicon, #Ricon{
width:70px;
height:70px;

  display:inline-block;
  vertical-align:middle;
  background-size:100% !important;
  background-position:center !important;
}
#Cicon{
    background: no-repeat url("./../../img/bar/class.png");
}
#Aicon{
    background: no-repeat url("./../../img/bar/arca.png");
}
#Ricon{
background: no-repeat url("./../../img/bar/cross.png")
}
.Licon{
    height:80px;
    width:auto;
  display:block;
  background-size:100% !important;
  background-position:right !important;
background: no-repeat url("./../../img/orig.png")
}
#but{
height:70vh;
display:flex;
flex-direction:column;
align-content:center;
margin:5%;
}
#camp{
height:200%;
padding-left:10%;
padding-right:10%;
margin-top:25%;

/*
  background-color: none;
  background-image: url('./../../img/icon-updown.png');
  background-position:left 45% bottom 125%;
  background-repeat: no-repeat
  background-size: 50%;
  padding-top:35%;
*/
}
.nodisp{
	visibility: hidden;
}

#mouse{
   position:fixed;
   background-image: url('./../../img/mouse_02.png') !important;
   background-repeat: no-repeat;
  background-size: 100%;
   bottom:170px;
   right:5px;
   width:90px;
   height:90px;
   display:none;
}

/**}/** screen */

/* COMPUTER VIEW */
@media screen and (min-width: 768px) {
	body,html{
        margin: 0;
        font-family: Monospace !important;
        width: 100%;
        height: 100%;
        }

.campMod{
    margin-top:7px !important;
    display:flex !important;
height: 100vh !important;
overflow: scroll !important;
}
#corpo2{
    width: 100%;
}
#init2{
background-image: url('./../../img/bg_critty_02.png') !important; /* swirls.gif */
background-repeat: repeat !important;
background-size:40% !important;
width: 100%;
}
.wellMod{
    opacity:1 !important;
    width:35% !important;
    height:100% !important;
    margin-top:0px !important;
}
.wellMod p{
    font-size:100% !important;
}
.butMod{
    width:45% !important;
    margin:0 !important;
    
}
.bic{
    z-index:6;
}
#tit{
    text-align:left !important;
    font-size:200% !important;
    padding:0;
    margin:0;
}
	
	#segn{
	    display:block;
	}
#l{
	position:absolute;
	top:10px;
	right:0px;
	padding:10px;
	padding-left:20px;
	padding-right:40px;
	font-size: 15px;
	font-weight:bold;
	background-color:rgba(200,120,25,.5);
	border:2px solid rgba(200,120,25,.7);
	border-radius:15% 0 0 15%;
}

#log{
        position:absolute;
	right:-2%;
	top:25%;
	margin-top:-0.5%;
	padding:0.5%;
	padding-right:3%;
	font-size: 55%;
	background-color:rgba(20,120,250,.5);
	border:2px solid rgba(20,120,250,.7);
	border-radius:15% 15% 15% 15%;
}
	
#swirl, #wswirl, #lswirl{
    padding-top: 55vh;
background-size: 45vh; 
}
#swhole{
background-size:17%;
}
#well h4{
font-size:45px;
margin-top:0;
}
#well p{
font-size:35px;
word-break: word-wrap;
}
#logounder2{
    margin-left:2px;
    margin-top:2px;
    height: min-content;
    font-size:200%;
}

#loco2{
display:inline;
height:60px;
vertical-align:middle;
}
            h1{
            width: 90%;
            font-size: 65px;
            font-weight: bold;
            font-family: Georgia !important;
            text-align: center;
            margin-top: 0;
            margin-left: 5%;
            margin-right: 5%;
            }
            #hed{
			position:fixed;
			width: 100%;
			height:70px;
			top:0;
			left:0;
		
			border:3px solid rgba(0,0,0,.07);           
            z-index: 2;
            background-color: lightgrey;
            }
		    #logounder{
            font-weight: bold;
            font-family: Georgia !important;
            position: absolute;
            width:fit-content;
	    top:3%;
            right:3%;
            margin:0;
            padding:0;
		    }
            #init{
            font-family: Monospace !important;
              margin:0;
              position: fixed;
              top:0;
              left: 0;
              width: 100%;
              height: 100%;
              background: repeat url("./../../img/bg.png");
              overflow: scroll;
            }
            #ciao{
            font-family: Monospace !important;
              margin:0;
              top:0;
              left: 0;
              width: 100%;
              height:fit-content;
              background: repeat url("./../../img/bg.png");
               border-bottom: 5px dotted black;
              overflow:scroll;
            }
            #bye{
            background-color:rgba(0,0,0,.05);
            }
            .mytable{
            	width: 150%;
             height: auto;
                margin: 5%;
                padding: 0;
                table-layout: fixed;
                border-spacing: 0px;
         
            }
            #foot{
            	height: 100%;
            	width: 100%;
            }
             #footout{
            
            	display: flex;
            	flex-direction:column;
            	
            	
            }
            #footout, #footin{
            	position: fixed;
            	height: 10%;
            	width: 100%;
            	bottom: 0;
            	left: 0;
            	z-index: 1;
                font-size: 250%;
                padding-top: 10px;
                background-color: lightgrey;
                border:3px solid rgba(0,0,0,.07);
            
            }
            #footin{
            	background: repeat url("./../../img/bg.png") !important;
            }
	    .foottall{
		min-height:160px !important;

	    }
	    .footshort{
		min-height:10px !important;
	    }
	    
            #left{
            display:flex;
            flex-direction:row;
            justify-content:space-between;
            height:100%;
            width:75%;
            }
            
            #right{
            display:flex;
            flex-direction:row;
	    justify-content:flex-end;
            align-content:center;
            height:100%;
            width:25%
            
            }
            #centr{
            display:flex;
            flex-direction:row;
            justify-content:space-around;
	    align-content:center;
            height:20%;
            width:100%;
            }
	    #top{
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		align-content:center;
		align-items:center

            height:30%;
            width:100%;
	    }
         #toast,#difftoast{
             font-size:15px !important;
             display:none;
             width:150%;
	     height:100%;
             }

            #toast,#difftoast,#toastsel{
        
            	font-family: Monospace !important;
                font-style: italic;
		position: relative;
		left:-5%;
		text-align:center;
            }
            #toastsel{
            width:120%;
            height:100%;
             }
            
            .void1, .void2{
            	opacity: .3;
            	background-position: center;
                background-size: contain;
                background-repeat: no-repeat;
            }
            .void1{
                background-image: url('/img/mark1.png') !important;
            }
            .void2{
                background-image: url('/img/mark2.png') !important;
            }
           .mycell, .mycell2{
                
                width: 100px;
                height: 80px;
                border: 2px solid darkgrey;
           }
	   .mycell2{
		background-color:none;
	    }
            .myrow{
          
              
            }
             .num, .num2{
              font-size: 15px;
              position: relative;
              right:0;
              bottom:0;
              text-align: right;
            }
            .cas, cas2{
            width: 70%;
            height: 70%;
            font-size: 50px;
            border: none;
            outline: 0;
             }
            .cas,.cascont{
            opacity:85%;
            background-color:lightyellow;
            }
            
            .redcont{
            
            }
            .divider{
            
            }
            .nobo{
            	border: none;
            }
           .let{
              font-size: 50px;
              font-weight: 550;
            }
			#dit{
			font-size: 100px;
            font-weight: 550;
            text-align:center;
			}
#menu{
    display:flex;
            flex-direction:row;
            justify-content:space-around;
	    align-content:center;
            height:50%;
            width:100%;
}
#r, #p, #m, #d, #c{
  position: relative;
  z-index: 2;
  display: none;
  background-size:90% !important;
  border:none;
  font-size:75%;
}

.cas{
 border:none;
}
#back{
 font-family: Monospace !important;
 display:none;
 position:relative;
 right:10px;
 width:fit-content;
 font-size:120%;

}


#ti{
font-family: Monospace !important;
 display:none;
 position:relative;
 width:fit-content;
 text-align:center;
 font-size:120%;

}
#oro{
 font-family: Monospace !important;
 position:relative;
 height:auto;
 width:fit-content;
 text-align:center;
 margin:auto;
 font-size:120%;
}
#po{
  position:relative;
	display:block;
	left:10px;
	font-weight: bold;
	width:fit-content;
	 font-size:120%;
}
#po #Pimage{
    width:55px;
    height:55px;
}
.Picon{
width:25px;
height:25px;

}
#sim, #adv, #cro-run{
    width: 30%;
    height:fit-content;
  font-family: Georgia !important;
  font-weight:bold;
  font-size: 170%;
  background-color: lightblue;
  border:2px solid rgba(0,0,0,.05);
  z-index: 1;
  border-radius: 5%;
  margin:5%;;
  text-align: center;
  padding: 2% 2%;
  margin-bottom:2%;
  opacity: .7;
  word-break:break-work;
}
#but{
height:60vh;
display:flex;
flex-direction:row;
align-content:center;
margin:0;
}
#camp{
height:160%;
padding-left:10%;
padding-right:10%;
margin-top:15vh;

/*
  background-color: none;
  background-image: url('./../../img/icon-updown.png');
  background-position:left 45% bottom 125%;
  background-repeat: no-repeat
  background-size: 50%;
  padding-top:35%;
*/
}
.nodisp{
	visibility: hidden;
}

#mouse{
   position:fixed;
   background-image: url('./../../img/mouse_02.png') !important;
   background-repeat: no-repeat;
  background-size: 100%;
   bottom:185px;
   right:20px;
   width:110px;
   height:110px;
   display:none;
}

#segn{
    width:100%;
    height:20vh;
    margin-top:-15vh;
    font-size: 500%;
    text-align:center;
    margin-bottom:15vh;
}
#segn p{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    color:grey;
}

.Licon{
    height:120px;
    width:auto;
    margin:auto;
  display:block;
  vertical-align:middle;
  background-size:100% !important;
  background-position:right !important;
background: no-repeat url("./../../img/orig.png")
}

/** screen */
}