body {
	position:relative;
    background-color:#efefef;
    transition:all 0.5s linear;
}



body h1 {
    margin:0;
    margin-top:-10px;
}

.tlegend {
    color:#6b7a91;
    font-size:25px;
    text-transform: uppercase;

}

table {
    border-collapse: collapse;
}

table th {
    color:grey;
    text-transform: uppercase;
    background-color: #4a5566;
}
 table td {
    border:1px solid grey;
    padding:10px;
 }

table.twocol {
    width:100%;
}

body.dark.max {
    background-color:#bf2323;
}


body h1 {
    padding: 10px;
    border-bottom: 2px solid #c8cacd;
    color: #161616;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 5px;
    text-align: center;
    margin-top: 24px;
}

h1.color {
    color:#4a5566!important;
}

/********** /// MEP  //// -*****/ 

.hide {
    display:none!important;
}

.presentation {
	font-family: "Arial";
    color: gray;
    font-size: 0.9em;
    line-height: 1.2em;
}

.presentation h2 {
	margin-top: 20px;
    font-size: 1.2em;
    padding-bottom: 10px;
    border-bottom: 4px solid #fb713d;
    display: inline-block;
    color: black;
}


/********** /// SCANNER COMPNENT   //// -*****/ 

#reader__scan_region.success {
    border:8px solid #8ae38a;
}

#reader__scan_region.sameCode {
    border:8px dashed orange;
}

/********** /// MARKER ALERT MESSAGE BANNER   //// -*****/ 

div#stateAlert {  
    position: fixed;
    opacity: 0;
    top: 57vh;
    width: 150px;
    font-size: 3.5em;
    color: #3AC130;
    left: 5vw;
    padding: 5px;
    background-color: rgb(255,255,255,0.8);
    border: 3px solid #8ae38a;
    border-radius: 5px;
    width: 90%;
    text-align: center;
    transition: opacity 0.2s linear;
}

div#stateAlert.visible {
        opacity:1
}  

div#stateAlert.warning {
    border: 3px solid orange;
    color:orange;
}

/***   HEADER  ***/ 
/********** /// HEADER   //// -*****/ 

.header {
    height:85px;
    display:block;
    background-color:#f7a76e;
        /*
    * Created with https://www.css-gradient.com
    * Gradient link: https://www.css-gradient.com/?c1=f5951d&c2=ffe1ce&gt=l&gd=dbb
    */
    
    height: 85px;
    display: block;
    background-color: #f7a76e;
    background: #4a5566;
    background: linear-gradient(0deg, #314260, #264ead);
    margin-bottom: -25px;
    border-bottom: 3px solid #293f60;
    
}

.header span  {
    display:inline-block;
    text-align:center;
    width: 100%;
}

.header span  img {
    height:120px;
    width: auto;
}




/***   MENU ***/ 

#MenuCantina {
	position:absolute;
	transform:translateX(-200px);
	bottom: 0;
	top:0;
	width: 148px;
	border-right:2px solid #fbaf3d;
	
	padding:20px;
	transition:transform 0.2s linear;
	z-index:30;
	margin-top:10px;
        background-color:#b59985;
        background: linear-gradient(351deg, rgb(77 75 71) 0%, rgba(166,123,39,1) 25%, rgb(149 144 139) 30%, rgba(218,188,90,1) 34%, rgb(41 34 16) 45%, rgb(91 87 78) 100%);
}


#MenuCantina.open {
	transform:translateX(0px);
}



#MenuCantina ul {
		margin:0;padding:0;margin-top:30px;
}
#MenuCantina li {
	margin:10px 0;
	list-style-type: none;

}

#MenuCantina li a {
	display:block;
	padding:15px 2px;
	text-decoration: none;
	width:100%;
	color:white;

}

#MenuCantina li a:hover {
	background-color:#a5a969;
	width:100%;
}

#MenuCantina .footer {
        color: #cfcfcf;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid white;
    padding-top: 10px;
    width: 100%;
    display: block;
}

 #counter.max { 
    border: 1px solid red;
    background-color: #c12b49;
    color: #fb6868;
    font-weight: bold;
    font-size: 24px;
 }

/********** /// CARDS DESIGN     //// -*****/ 


.cardshowpanel {
    padding:20px;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 10%, rgb(249 248 248) 100%);
    min-height:600px;
}



.visible {
    display:block!important;
}


.levelmarker {
    height: 10px;
    width: 10px;
    border-radius: 100%;
    background: gray;
    display: inline-block;
    margin: 0px 5px;
}


.vglo:before{
    content: url(./assets/logo_vege.png);
    top: 3px;
    position: relative;
}

.splo:before{
    content: url(./assets/logo_sporc.png);
    top: 3px;
    position: relative;
}
.svlo:before{
    content: url(./assets/logo_sviande.png);
    top: 3px;
    position: relative;
}

.qritem {
    display: inline-block;
    background-color:white;
    overflow:hidden;
    padding:25px;
    
    /* Credit card format in print mode    86mm x 54mm */
    /* Credit card format in print mode    280 x xx */
    
    width: 280px;
    height: 176px; /* 54 */
    padding:25px;
    border:1px solid rgb(163, 163, 163);
    border-top:6px solid green;
    border-radius:10px;
    margin:15px;
    /*box-shadow:3px 2px 2px #ccc;*/
}


/*  RemainCounter : students remainig to pass */

#remainDetail {
    background-color: #d5d5d5;
}



.RemainCounter {
    padding: 10px 15px;
    display: inline-block;
    border: 1px solid;
    border-radius: 17px;
    margin: 2px 10px;
    font-weight: bolder;
    background-color: white;
    margin: 8px 5px;
}

.RemainCounter span.unit {
    font-size: 0.8em;
    font-weight: normal;
}

/*  theme classe    */
.RemainCounter.c6b, .RemainCounter.c6a { border-color:green;color:green;}
.RemainCounter.c5b { border-color:rgb(6, 92, 206);color:rgb(6, 92, 206);}
.RemainCounter.c4b { border-color:rgb(87, 0, 128);color:rgb(87, 0, 128);}
.RemainCounter.c3b { border-color:rgb(128, 0, 43);color:rgb(128, 0, 43);}
.RemainCounter.c2b { border-color:rgb(128, 68, 0);color:rgb(128, 68, 0);}
.RemainCounter.c1b { border-color:rgb(240, 158, 5);color:rgb(240, 158, 5);}

/*  theme regime spe    */
.RemainCounter.vglo { border:1px dashed rgb(102, 175, 118);color:rgb(102, 175, 118);}
.RemainCounter.splo { border:1px dashed #ce55a1;color:#ce55a1;}
.RemainCounter.svlo { border:1px dashed #852f40;color:#852f40;}

.qritem.c6a { border-top:4px solid green;  }

.qritem.c6b { border-top:4px solid green;  } 
.c6a .levelmarker, .c6b .levelmarker { background-color: green;  } 
.qritem.c5a { border-top:4px solid rgb(6, 92, 206);  } 
.qritem.c5b { border-top:4px solid rgb(6, 92, 206);  } 
.c5a .levelmarker, .c5b .levelmarker { background-color:rgb(6, 92, 206);  } 
.qritem.c4a { border-top:4px solid rgb(87, 0, 128);  } 
.qritem.c4b { border-top:4px solid rgb(87, 0, 128);  } 
.c4a .levelmarker, .c4b .levelmarker { background-color: rgb(87, 0, 128);  } 
.qritem.c3a { border-top:4px solid rgb(128, 0, 43);  } 
.qritem.c3b { border-top:4px solid rgb(128, 0, 43);  } 
.c3a .levelmarker, .c3b .levelmarker { background-color: rgb(128, 0, 43);  } 
.qritem.c2a { border-top:4px solid rgb(128, 68, 0);  } 
.qritem.c2b { border-top:4px solid rgb(128, 68, 0);  } 
.c2a .levelmarker, .c2b .levelmarker { background-color: rgb(128, 68, 0);  } 
.qritem.c1a { border-top:4px solid rgb(240, 158, 5);  } 
.qritem.c1b { border-top:4px solid rgb(240, 158, 5);  } 
.c1a .levelmarker, .c1b .levelmarker { background-color: rgb(240, 158, 5);  } 
.qrstyle {
    height: 100px;
    width: 100px;
    display: inline-block;
    vertical-align: middle!important;
    margin-right: 50px;
    margin-bottom: 2px;
    margin-left: -6px;
}


/********** /// CARD SCANNING ACTION    //// -*****/ 

.qritem.scanned {
 display:none;
}



.qritem {
    animation:fadetop 1s linear;
}

.qritem p {
    display:inline-block;
}

.qritem p small.label{
    font-style:italic;
}

.qritem.scanned.active {
  /*border:2px solid lightgray;*/
  box-shadow:-2px 2px 3px #ccc;
  display:inline-block;	
}
.active .uuidlabel { font-weight:bolder;border:1px solid green; }




/********** /// INTERACT    //// -*****/ 

button.sbutton {
	background-color: white;
	color:grey;
	padding:5px!important;
}

button.mbutton {
    position: relative;
    top: -50px;
    margin: 2px;
    border: none;
    text-transform: uppercase;
    font-size: 1em;
    /* border-top: 4px solid #f7c76e; */
    padding: 9px 10px;
    font-weight: bolder;
    border-bottom: 4px solid #ad6942;
    z-index: 99;
    border-radius: 7px;
    left: 10px;
}

#preloaddata {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: rgb(255 255 255 / 81%);
    z-index: 80;
    vertical-align: middle;
    height: 100vh;
    color: #3500ff;
    display: block;
    left: 0;
    right: 0;
    padding: 50% 7%;
    font-size: 37px;
    text-transform: uppercase;
    font-weight: 800;

}

#loading {
    display:none;
}

#loading.visible {
    display:block;
}

#messag {
    display: block;
    background: white;
    padding: 11px 10px;
    border-bottom: 1px solid #aaa;
    font-family: arial;
    font-size: 18px;
    text-transform: uppercase;
}

/* FORMS */

body input { 
    padding: 6px;
    border: 1px solid gray;
    background-color: #dfdfdf;
    border: none;
    border-bottom: 1px solid #bbb;
    padding: 10px;
}



#options {
    margin: 18px;
    display: none;
    animation: fadetop 0.2s linear;
    background-color: #cfcfcf;
    padding: 10px;
    border-radius: 14px 0 14px 0;
    border-top: 5px solid #afafb9;
    color: black!important;
}


#options h4 {
    text-transform: uppercase;
    font-size: 1.2em;
    /*color: #2d2d2d;*/
    color:black;
    margin: 8px 2px;
    font-weight: 600;
    letter-spacing: 4px;

}
body label.form  { display:inline-block;width:150px;margin-bottom:25px; text-transform: uppercase;}

/* MARKER */
input:focus + span.mkr { margin-left:12px;width:10px;height:20px;display:inline-block;}
input:focus + span.mkr { background-color:rgb(120, 237, 122) ;}

/* BYNAME */
input#searchbyfirstname { border-left:2px solid rgb(226, 208, 43);}
input#searchbyfirstname:focus{ background-color:rgb(205, 251, 205) ;}

/* BYNAME */
input#searchbyname { border-left:2px solid rgb(223, 82, 22);}
input#searchbyname:focus{ background-color:rgb(205, 251, 205)  ;}



body button {
    position: relative;
    z-index: 0;
    margin: 2px;
    padding: 20px;
    text-transform: uppercase;
    font-size: 0.9em;
    border: 1px solid #768095;
    padding: 15px 10px;
    background-color: white;
    color: black;
    font-weight: bold;
    border-left: 2px solid gray;
    border-bottom: 2px solid gray;
}
 a.second_action {
    padding: 6px 15px;
    border: 1px solid #5f7eb9;
    text-transform: uppercase;
    border-radius: 5px;
    text-align: center;
    margin: auto;
    width: 345px;
    display: block;
    color: #5e6778;
    line-height: 23px;
    font-family: arial;
    font-size: 13px;
    background: #fdfdfd;
    text-decoration: none;
}

  button.action {
    padding: 15px;
    border: 1px solid #5E6778;
    text-transform: uppercase;
    border-radius: 5px;
    text-align: center;
    margin: auto;
    width: 350px;
    display: block;
    color: #5e6778;
    line-height: 23px;
    font-family: arial;
    font-size: 15px;
    background: #fdfdfd;
  }


.container {
	margin-left:0px;
} 

/************* /// WATCHER  /// -*******/ 


.topbanner {
    display:block;
    height:25px;
    background-color:rgb(34, 35, 51)!important;
    color:white!important;
    font-size:25px;
    padding:10px;
}

h4.tag {
    width: 70%;
    display: inline-block;
    background-color: #7088ad;
    color: black;
    margin: 0px;
    margin-top: 11px;
    padding: 5px;
    border-left: 4px solid #6200ff;
    padding-left: 10px;
}

/********** /// ANIMATIONS  //// -*****/ 


@keyframes fade {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
    
}

@keyframes d_fade {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
    
}

@keyframes fadetop {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    40% {
        opacity: 0;
        transform: translateY(-50px);
    }
    
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
    
}