.noselect{-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;}

nav{
		top:0;
		left:0;
		width:100%;
		background-color:#fff;
		height:80px;
		display:block;
		border-bottom:1px solid #ededed;
	}
	

.container{
	width:1024px;
}
#headercontainer{
	width:1024px;
	margin:0px auto;
}

.dropwrapper{
	margin:80px auto 0px auto; 
	max-width:1024px; 
	background-color:white;
	height:50px;
	line-height:50px;
}

#droputenti{
	line-height:50px;
}

#titolo{
	font-size:24px;
	line-height:50px;
	color:#424242;
	display:inline-block;
}
#sottotitolo{
	font-size:14px;
	line-height:50px;
	color:#424242;
	margin-left:5px;
	display:inline-block;
}


#imglogo{
	max-width:141px;
	display:block;
	height:46px;
	margin-top:17px;
	display:inline-block;
}

#mainmenu{
	float:right;
	display:inline-block;
	text-align:right;
}

body{
margin:0px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #073E59;
letter-spacing: -0.02em;
background:radial-gradient(219.45% 150.52% at 35.54% 22.89%, #EAF8FF 0%, #DDDCFF 100%);
padding-bottom:20px;
}

		#mini_schermo_parola{
			width:90%;
			margin:0px auto;
			border-radius:5px;
			border:1px solid black;
		}
		
		#listapersonalizzata_wrapper{
			width:100%;
			padding:20px 5%;
			font-size:16px;
		}
				#mini_schermo{
			width:150px;
			height:150px;
			border:1px solid black;
			border-radius:5px;
			margin:0px auto 20px auto;
			line-height:150px;
			font-size:16px;
			background-color:white;
		}
		
		#feedback{
			margin-top:150px;
		}
		
		#box_riscritta{
			width:100%;
			text-align:center;
		}
		#riscritta{
			width:80%;
			border:0px solid black;
			border-bottom:1px solid black;
			margin:30px auto;
			text-align:center;
		}
		
		#riscrivi{
			margin-top:150px;
		}
		.leftsubtab{
			width:70%;
			float:left;
			border-right:1px solid lightgrey;
		}
		.rightsubtab{
			width:30%;
			float:right;
		}
		.riga{
			width:100%;
			padding:16px 5%;
			font-size:20px;
		}
		.left{
			width:30%;
			display:inline-block;
		}
		.right{
			width:70%;
			display:inline-block;
		}
		.right select, .right input{
			line-height:16px;
			font-size:16px;
			width:100%;

		}
		
					.lowbuttons{
		margin-top:15px;
		width:100%;
		text-align:center;
	}
	
			#salva{
		margin:0px auto 0px auto;
		padding:5px;
			height:62px;
			line-height:62px;
			font-size:20px;
		text-align:center;
		background-color:darkorange;
		color:white;
		max-width:280px;
		font-weight:bold;
		box-shadow:0px 0px 2px black;
		cursor:pointer;
	}
	
			#stampa{
		margin:0px 5px 0px auto;
		padding:5px;
			height:62px;
			line-height:62px;
			font-size:20px;
		text-align:center;
		background-color:darkred;
		color:white;
		max-width:280px;
		font-weight:bold;
		box-shadow:0px 0px 2px black;
		cursor:pointer;
	}	
	
		#avvia{
			margin:0px auto 0px 5px;
			padding:5px;
			height:62px;
			line-height:62px;
			font-size:20px;
			text-align:center;
			background-color:#006666;
			color:white;
			max-width:280px;
			font-weight:bold;
			box-shadow:0px 0px 2px black;
			cursor:pointer;
		}
		

					.parolaerrata{
		color:red;
		line-height:20px;
		font-size:20px;
	}
	
		#tachistoscopio_parola_wrapper{
		height:550px;
		line-height:520px;
	}

p,h1,h2,h4,h5{
	color:#424242;
}

h3{
	color:white;
}

#ri_totali, #ri_corrette, #ri_errori{
	color:#424242;	
}
.modal h3, .modal p, #tmp{
	color:black;
}

nav a{
	text-align:left;
}

nav{
	display: flex
;
    align-content: center;
    flex-wrap: wrap;
}

.removeitem{
	float:right;
	margin-right:5px;
	color:red;
	cursor:pointer;
}

.menu-item{
	line-height: 80px;
	list-style: none;
	color:#424242;
	display:inline-block;
	padding:0px 20px;
}
.menu-item-link{

font-size: 16px;
font-weight: 600;
line-height: 80px;
letter-spacing: 0em;
text-align: left;
color:#424242;
list-style: none;
}


	
	nav h1{
		line-height:45px;
		font-size:30px;
		padding:0px;
		margin:0px;
		font-weight:500;
		text-align:left;
		margin-left:10px;
	}
	nav h2{
		line-height:20px;
		font-size:14px;
		padding:0px;
		margin:0px;
		font-weight:400;
				text-align:left;
		margin-left:10px;
	}

	#tab_container{
		width:100%;
		height:70px;
		box-shadow:0px 2px 2px grey;
		margin-bottom:10px;
				cursor:pointer;
				background-color:white;
	}
	
	
	.mytab{
		width:33%;
		margin:0px;
		height:70px;
		text-align:center;
		float:left;
		padding:10px 0px 0px 0px;

	}
	
	.tabselected{
		border-bottom:6px solid #006666;
		opacity:1;
	}
	
	.tabunselected{
		border-bottom:6px solid #white;
		opacity:0.7;
	}
	
	.tab-icon{
		max-width:30px;
	}
	
	.mytab p{
		line-height:16px;
		font-size:14px;
		font-weight:bold;
		color:#006666;
		margin:0px;
	}
	
		.butmid{
		width:calc(33% - 4px);
		display:inline-block;
		padding-top:20px;
	}
	
		.progress {

	margin-bottom:0px;
	width:100%;
	
}

#tachiprogress{
    bottom: 0;
}

.progress-bar{
	background-color:#006666;
}

		#final_riavvia{
		background-color:#006666;
	}
	
		#final_cambia{
		background-color:darkorange;
	}
	
	#perwrapper{
		padding:10px 10px 0px 10px;
	}
	
	#perwrapper h3{
		margin:5px;
	}
	.iconerr{
		color:red;
		width:16px;
		height:16px;
		margin-right:10px;
		float:left;
	}
	
	.parolaerrata{
		color:red;
		line-height:16px;
		font-size:12px;
	}
	
	.lowbuttons{
		margin-bottom:15px;
	}
	@media screen and (min-width:401px) and (max-width:767px){
	.container{
		width:401px;}	
.menu-item{
	display:none;
}
#headercontainer{
	width:400px;
	margin:0px auto;
}
		.left{
			width:50%;
			display:inline-block;
		}
		.right{
			width:50%;
			display:inline-block;
		}
		.right select, .right input{
			line-height:20px;
			font-size:20px;
			width:100%;
			background-color:white;
			height:46px;
		}
		.riga{
			width:100%;
			padding:16px 5%;
			font-size:20px;
		}
			.lowbuttons{
		margin-top:15px;
		width:100%;
		text-align:center;
	}
	
			#salva{
		margin:0px auto;
		padding:5px;
			height:92px;
			line-height:92px;
			font-size:26px;
		text-align:center;
		background-color:darkorange;
		color:white;
		max-width:180px;
		font-weight:bold;
		box-shadow:0px 0px 2px black;
		cursor:pointer;
	}
	
		#avvia{
			margin:0px auto;
			padding:5px;
			height:92px;
			line-height:92px;
			font-size:26px;
			text-align:center;
			background-color:#006666;
			color:white;
			max-width:180px;
			font-weight:bold;
			box-shadow:0px 0px 2px black;
			cursor:pointer;
		}
		
		.rightsubtab{
			display:none;
		}
		
			.parolaerrata{
		color:red;
		line-height:20px;
		font-size:20px;
	}
	
			#tachistoscopio_parola_wrapper{
		height:550px;
		line-height:520px;
	}
	
			#listapersonalizzata_wrapper{
			width:100%;
			padding:20px 5%;
			font-size:16px;
		}
		
	}
	
	
	@media screen and (min-width:768px) and (max-width:1023px){
	.container{
		width:768px;
		padding:0px;}	
	
	#sottotitolo{
		display:none;}
		
#headercontainer{
	width:768px;
	margin:0px auto;
}		

	
	}
	
		#listaesistente{
			color:black;
		}
		
			#droputenti{
		color:black;
		width:200px;
		font-size:20px;
		margin-top:5px;
		margin-right:20px;
	}
	
	.puls{
		margin-right:5px;
		border-radius:5px;
		display:inline-block; 
		padding:0px 5px;
		cursor: pointer;
		min-width:50px;
		height:30px;
		line-height:30px;
		color:white;
		background-color:#0C6895;
	}
	
	.puls:hover{
	background-color:#06364e;
		}
	
@media screen and (max-width:401px) {

.leftsubtab{
	width:100%;
}

.rightsubtab{
	display:none;
}

.left{
	width:100%;
}

.right{
	width:100%;
}
.container{
	width:100%;
}

#droputenti{
	max-width:100px;
}

#sottotitolo{
	display:none;
}
#headercontainer{
	width:100%;
	margin:0px auto;
}

#menu-item{
	display:none;
}

#imglogo{
	margin:0px auto;
	display:block; 
}
			#box_riscritta{
			width:100%;
			text-align:center;
		}
			#riscritta{
			width:80%;
			border:0px solid black;
			border-bottom:1px solid black;
			margin:30px auto;
			text-align:center;
		}

				#droputenti{
		color:black;
		font-size:14px;
		margin-top:5px;
	}
	
	#titoli{
	width:100%;
}

			.rightsubtab{
			display:none;
		}
		
	.lowbuttons{
		margin-top:15px;
		width:100%;
		text-align:center;
	}

	
	#final_cambia h3{
		font-size:14px;
		margin:10px auto
	}

	#final_riavvia h3{
		font-size:14px;
		margin:10px auto
	}
	
		#final_riavvia{
		background-color:#006666;
	}
	
		#final_cambia{
		background-color:darkorange;
	}
	
	#perwrapper{
		padding:10px 10px 0px 10px;
	}
	
	#perwrapper h3{
		margin:5px;
	}
	.iconerr{
		color:red;
		width:16px;
		height:16px;
		margin-right:10px;
		float:left;
	}
	
	.parolaerrata{
		color:red;
		line-height:16px;
		font-size:12px;
	}
	#riepilogo_wrapper{
		width:100%;
	}
	#riepilogo_wrapper h2{
		text-align:center;
	}
	
	
	#right-column{
		display:none;
	}
	
	#tachistoscopio_wrapper{
		width:100%;

	}
	
	#right-button-wrapper{
		width:100%;
		height:30px;
		color:black;
		text-align:right;
	}
	
	#right-button-wrapper h2{
		margin:0px;
		padding:0px;
		color:red;
	}
	
	#tachistoscopio{
		width:100%;

	}
	

	#tachistoscopio_parola_wrapper{
		height:350px;
		line-height:320px;
	}


	


	
	.riga{
		width:100%;
		padding:12px;
		border-bottom:1px solid lightgrey;
	}
	
	.riga .left{

		display:inline-block;
		font-size:16px;
		line-height:46px;
	}
	
	.riga .right{

		display:inline-block;
	}
	
	#titolo{
		text-align:center;}
		
		.dropwrapper{
			text-align:center;}
	
	.riga .bigleft{
		width:70%;
		display:inline-block;
		font-size:16px;
	}
	
		.puls{
		width:30px;
		height:30px;
		margin:2px;
		border-radius:2px;
		text-align:Center;
		min-width:30px;
	}
	.riga .smallright{
		width:calc(30% - 5px);
		display:inline-block;
	}	
	
	.riga .right select, .riga .right input{
		width:100%;
		font-size:16px;
		border:0px solid black;
		border-bottom:1px solid grey;
		height:46px;
		line-height:46px;
		padding:0px 5px;
		border-radius:0px;
		background-color:white;
	}
	
	.riga .right .check{
		width:100%;
		font-size:16px;
		border:0px solid black;
		border-bottom:1px solid grey;
		height:36px;
		line-height:46px;
		padding:0px 5px;
		border-radius:0px;
		background-color:white;		
	}
	
	#salva{
		margin:0px auto;
		padding:5px;
		height:46px;
		line-height:36px;
		font-size:16px;
		text-align:center;
		background-color:darkorange;
		color:white;
		width:100%;
		font-weight:bold;
		box-shadow:0px 0px 2px black;
		cursor:pointer;
	}

	#stampa{
		margin:0px auto;
		padding:5px;
		line-height:36px;
		font-size:16px;
		text-align:center;
		background-color:darkred;
		color:white;
		width:100%;
		font-weight:bold;
		box-shadow:0px 0px 2px black;
		cursor:pointer;
	}
	
	#avvia{
		margin:0px auto;
		padding:5px;
		height:46px;
		line-height:36px;
		font-size:16px;
		text-align:center;
		background-color:#006666;
		color:white;
		width:100%;
		font-weight:bold;
		box-shadow:0px 0px 2px black;
		cursor:pointer;
	}

	.butmid{
		width:100%;
		display:inline-block;
		padding-top:20px;
	}
	
	#listapersonalizzata{
		margin-top:16px;
		width:calc(100% - 4px);
		font-size:16px;
	}

	#listaesistente{
		margin:16px auto;
		width:calc(100% - 4px);
		font-size:16px;
	}
	
	#listapersonalizzata_wrapper{
		padding:16px 16px 10px 16px;
		font-size:16px;
	}
	
	#buttons_container{
		padding-bottom:16px;
	}
	
	#secondotesto{
		font-size:16px;
	}
	
			.rightsubtab{
			display:none;
		}
		
	nav h1{
		text-align:center;
		margin-left:0px;
	}
	nav h2{
		text-align:center;
		margin-left:0px;		
	}
}

nav h3 a {
	font-size:18px;
}

	nav h3 a:hover{
		color:white;
		
	}
	
.select {
    position: relative;
    overflow: hidden;
    display: block;
    margin: auto;
    width: 330px;
    height: 100%;
    border-bottom: 0px;
    border-radius: 3px;
    font-size: 12px;
    box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, .5);
    >i.toggle {
        position: absolute;
        z-index: 4;
        right: 1.5em;
        top: 1.6em;
        color: #424242;
    }
    .title,
    .placeholder {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: 1.5em 2em;
        background: rgba(255, 255, 255, 1);
        border-top: 1px solid rgba(0, 0, 0, .05);
        cursor: pointer;
    }
    &>input {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 0;
        cursor: pointer;
        &:checked {
            ~i.toggle.icon-arrow-down {
                display: none;
            }
            ~i.toggle.icon-arrow-up {
                display: block;
            }
            div.options label.option .title {
                display: none!important;
            }
        }
        &:not(:checked) {
            z-index: 4;
            ~label.option {
                >span.title {
                    display: none;
                }
            }
            ~i.toggle.icon-arrow-up {
                display: none;
            }
            ~i.toggle.icon-arrow-down {
                display: block;
            }
        }
        &:disabled {
            cursor: no-drop;
        }
    }
    &>span.placeholder {
        position: relative;
        z-index: 0;
        display: inline-block;
        width: 100%;
        color: #999;
        border-top: 0px;
    }
    label.option {
        display: block;
        overflow: hidden;
        z-index: 1;
        width: 100%;
        transition: all 1s ease-out;
        span.title {
            position: relative;
            z-index: 2;
            transition: background .3s ease-out;
            i.icon {
                padding-right: 8px;
                color: rgba(146, 168, 209, 1);
            }
            &:hover {
                color: #424242;
                background: rgba(255, 255, 255, .3);
                box-shadow: inset 0px 1px 0px rgba(0, 0, 0, .1);
            }
        }
        input {
            display: none;
            &:checked~span.title {
                position: absolute;
                display: block;
                z-index: 3;
                top: 0px;
                font-size: 12px;
                background: #fff;
                border-top: 0px;
                box-shadow: none;
                color: inherit;
                width: 100%;
            }
            &:disabled {
                &~span.title {
                    background: #f9f9f9!important;
                    color: #aaa;
                    &:hover {
                        color: #aaa;
                        background: none;
                        cursor: no-drop;
                    }
                }
            }
        }
    }