/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;600;700&display=swap');


html, body 	{ margin:0; padding:0; height:100%; background-color:white; font-family: 'Quicksand', sans-serif; }

#global { background-color:#d8d8d8; height:100%; position:relative; text-align: center; overflow:hidden; }	

#left 			{ height:100vh; width:90%; padding:0; margin-left:0; max-width:none; }
#left #top 		{ height:9vh; width:90%; background-color:#3fa9f5; z-index:3; position:absolute; top:0; left:0; margin:0;
					box-shadow:0 3px 5px 0px rgba(0,0,0,0.5); color:white; font-weight:600; font-size:4.8vh; }
#left #middle 	{ padding-top:9vh; background-color:white; height:85vh; z-index:2; margin:0;
					box-shadow:0 3px 5px 0px rgba(0,0,0,0.3); }
#left #bottom,
#left #bottom-admin 	{ height:15vh;  z-index:1; margin:0; }
#left #bottom-admin  	{ display:none; }

#left .col					{ border-left:1px solid #000; height:100%; padding:0; }
#left .col:first-child		{ border-left:none; }

#left #top .col				{ padding-top:1vh; }
#left #top .col.finished	{ border-bottom:1vh solid #2e3192; }

#right 	{ position:absolute; width:10%; background:#f2f2f2 url("../img/jauge.svg?5") no-repeat center 15px; 
			background-size: 17px; z-index:10; top:0; right:0; box-shadow:-3px 0 5px 0px rgba(0,0,0,0.3); padding-top:calc(100vh - 70px); }
#arrow 	{ position:absolute; right:14px; top:240px; background:url("../img/arrow.svg") no-repeat center; width:25px; height:10px; }

#right a  { display:block; height:35px; }
#right a:hover  { background-color:#ccc; }
#right a.next  	{ background:url("../img/next.svg?4") no-repeat top center; background-size:20px; }
#right a.admin  { background:url("../img/lock-close.svg?4") no-repeat top center; background-size:20px; }
.unlocked #right a.admin  { background-image:url("../img/lock-open.svg?4"); }

/*@media (min-width: 1000px) {
 	#global 		{ width:692px; height:338px; margin:200px auto; }
	#left #middle 	{ height:calc(338px - 50px); }
	#right 			{ padding-top:calc(338px - 70px); }
}*/


#middle span 				{ font-size:1.5vw; display:block; background:#e5e5e5; margin-top:1.5vh; padding:1vh 0; position:relative; }
#middle span:first-child 	{ margin-top:2.8vh; }
#middle span[data-status="0"] 			{ background-color:#c1272d; color:white; }
#middle span[data-status="1"] 			{ background-color:#ffdc00; }
#middle span[data-status="2"] 			{ background-color:#8cc63f; }

.material-symbols-outlined		{ display:block; width:2.5vw; height:2.5vw; background:white; border-radius:0.5vw; position:absolute;
									line-height:2.4vw; box-shadow:0.2vw 0.2vw 0.3vw rgba(0,0,0,0.3); font-size:1.8vw; border:1px solid gray; z-index:10; color:black; }
#middle span i.edit 			{ left:0.5vw; top:-2.5vh; }
#middle span i.delete			{ left:0.5vw; bottom:-2.5vh; }
#middle span i.up				{ right:0.5vw; top:-2.5vh; }
#middle span i.down				{ right:0.5vw; bottom:-2.5vh; }
#bottom div i.add				{ left:0.5vw; top:-5vh; }
#middle span select,
#bottom div select 				{ height:2.5vw; position:absolute; left:3.5vw; top:-2.5vh; z-index:50; padding-left:1vw; width:16vw;
    								border-radius:0.5vw; box-shadow:0.2vw 0.2vw 0.3vw rgba(0,0,0,0.3);
									transition:width .1s ease; }
#bottom div select 				{ top:-5vh; }
#middle span select.hidden,
#bottom div select.hidden		{ padding-left:0; width:0; border:none; }
#middle span:first-child i.up	{ display:none; }
#middle span:last-child i.down	{ display:none; }

#bottom .full i,
#bottom .full select,
.locked #bottom i,
.locked #bottom select 			{ display:none; }

#bottom .col 						{ position:relative; }
#bottom .col font 					{ width:100%; height:100%; display:block; }
#bottom .col font[data-status="0"]	{ background:url("../img/smiley-red.svg") no-repeat center; background-size: 9.5vh; }
#bottom .col font[data-status="1"] 	{ background:url("../img/smiley-yellow.svg") no-repeat center; background-size: 9.5vh; }
#bottom .col font[data-status="2"] 	{ background:url("../img/smiley-green.svg") no-repeat center; background-size: 9.5vh; }

#password 			{ position:absolute; left:0; top:0; width:100vw; height:100vh; background:#f2f2f2; z-index:100; display:none; }
#password ul 		{ background:#d8d8d8; width:70vh; height:70vh; margin:10vh auto 0; list-style:none; padding:8vh 0 0 0;
							position:relative; }
#password ul li.nb 	{ display:inline-block; width:14vh; height:14vh; margin:2vh; background-color:#ccc; border-radius:50%;
						font-size:6vh; padding-top:2.5vh; }
#password ul li.close { display:block; position:absolute; right:-1.5vh; top:-1.5vh; width:5vh; height:5vh; font-size:3vh; padding-top:0; 
						margin:0; background-color:#6F6F6F; border-radius:50%; color:white; }
#password .mdp 			{ font-size:10vh; letter-spacing:1vh; }
#password .msg 			{ color:red; display:none; padding-top: 4vh; }


.draggable { cursor:move; user-select:none; }