* { margin:0; padding:0; box-sizing: border-box; }

#contener {
	color:#333;
	background-color:#fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	width: 320px;
	margin: 0 auto;
}

#main {
	margin: 0.5em auto;
}

@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    body { zoom: 1.6; }
}



table { width: 100%; }
table, table td { border: none; }
.covid-title {
    text-align: center;
    padding: 0.25em 0.5em;
    font-size: 115%;
    line-height: 120%;
    background-color: #000191;
    color: #fff;
}
.covid-subtitle {
    padding: 0.25em 0.5em;
    font-size: 90%;
    line-height: 120%;
    text-transform: uppercase;
    background-color: #e1000f;
    color: #fff;
}
.covid-title a { color: #fff !important; }

#contener a { color:#022e6d; text-decoration:none;  }
#contener a:hover { color:#6666aa; text-decoration:underline; }
#contener .form-group { margin: 0.5em; }
#contener .form-group label { display: block; width: 100%; text-align: left; }
#contener .form-group label em { display: block; font-size: 80%; color: grey; }
#contener .form-group input { width: 100%; margin: 0.2em 0 0.5em; padding: 0.2em 0.25em; font: 400 160% system-ui; border: none; border-radius: 0.25em; background-color: #eee; }
#contener .form-group textarea { width: 100%; margin: 0.2em 0 0.5em; padding: 0.2em 0.25em; font: 400 110% system-ui; border: none; border-radius: 0.25em; background-color: #eee; }
#contener .form-group select { width: 100%; margin: 0.2em 0 0.5em; padding: 0.2em 0.25em; font: 400 160% system-ui; border: none; border-radius: 0.25em; background-color: #eee; }

#contener .form-option { margin: 0.5em; }
#contener .form-option label { display: inline-block; text-align: left; margin-right: 15px; }
#contener .form-option input { width: auto; margin: 0.2em 0 0.5em; padding: 0.2em 0.25em; font: 400 100% system-ui; border: none; border-radius: 0.25em; background-color: #eee; }

#contener .date-group { display: flex; justify-content: space-around; align-items: center; }
#contener .date-group input { width: 54% !important; }
#contener .date-group i { margin-top: -7px; }

::-webkit-input-placeholder,
::placeholder {
  color: #c7c7c7;
}

#contener .form-check {
    margin: 0;
}
#contener .form-check legend { font-size: 80%; margin-left: .8em; }
#contener .form-check .check-btn {
    display: inline-block;
    position: relative;
    width: 22.3%;
    height: 44px;
    padding: 0 ;
    margin: 2% 5%;
}
#contener .form-check .check-btn2 {
    width: 39.3%;
}
#contener .form-check label {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    padding: 0.5em .1em .2em;
    border-radius: .5em;
    color: #fff;
    background-color: #828282;
    text-align: center;
    font-size: 110%;
	line-height: 100%;
}
#contener .form-check label em {
  display: block;
  font-size: 60%;
}
#contener .form-check input {
    position: absolute;
    top: -5px;
    left: -4px;
    width: auto;
}
#contener .form-check input:checked + label {
    background-color: #e1000f;
}



#div_message,
.div_message {
    font-size: 90%;
    padding: 5px 10px;
    border-radius: 5px;
    border: #a0abab 3px solid;
    border: #00a88a 3px solid;
    background-color: #94ffeb;
    color: #353535;
    min-height: 90px;
}
#div_message.att,
.div_message.att {
    border-color: #e1000f;
    background-color: #ffb9bd;
}
#div_message.warn,
.div_message.warn {
    border-color: #e19c00;
    background-color: #fff1b9;
}


.btn-page {
    padding: .5em .1em ;
    width: 55%;
    margin: 2%;
    font-size: 120%;
    font-weight: 700;
    color: #fff;
    background-color: #000191;
    border-radius: .5em;
    cursor: pointer;
}
.btn-page.small {
    width: 35%;
}

.btn-user {
    display: inline-block;
    padding: .5em .1em ;
    width: 90%;
    margin: 2%;
    font-size: 120%;
    font-weight: 700;
    text-align: center;
    color: #fff !important;
    background-color: #000191;
    border-radius: .5em;
    cursor: pointer;
}
.btn-user span {
    display: block;
    font-size: 65%;
    font-weight: 400;
}

.falsebtn {
    display: inline-block;
    background-color: lightgrey;
    border-radius: 0.25em;
    cursor: pointer;
    padding: 0.1em 0.2em;
    margin-top: 0.3em;
    margin-left: 0.3em;
}

.cal-day:hover {
  cursor: pointer;
}
.grey {
    background-color: #d4d4d4;
    width: 28%;
}
.red {
    background-color: #910100;
}
.att {
    display: block;
    color: #910100;
}

.info {
    margin: 12px 6px 24px;
    font-size: 70%;
}

.resastatut {
	display: inline-block;
	width: 100px;
	padding: 2px 11px 3px;
	margin-right: 15px;
	color: white;
	font-weight: bold;
	text-align: center;
	background-color: yellow;
	border-radius: 12px;
}
.resastatut_0 { background-color: #ea0000; }
.resastatut_1 { background-color: #e2cd00; }
.resastatut_2 { background-color: #008ae2; }
.resastatut_3 { background-color: #05a594; }
.resastatut_8 { background-color: #29244b; }
.resastatut_9 { background-color: #3b3b3b; }
.resastatut:has(input:not(:checked)) {
	background-color: grey;
}



.pin-login {
  display: block;
  margin: 0 15px;
  border-radius: 10px;
  padding: 10px;
  font-size: 28px;
  background: #d9deff;
  border: 1px solid #363b5e;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  font-family: sans-serif;
  text-align: center;
}

.pin-login__text {
  margin: 6px auto 6px auto;
  padding: 10px;
  display: block;
  width: 50%;
  font-size: 0.5em;
  text-align: center;
  letter-spacing: 0.2em;
  background: rgba(0, 0, 0, 0.15);
  border: none;
  border-radius: 10px;
  outline: none;
  cursor: default;
}

.pin-login__text--error {
  color: #901818;
  background: #ffb3b3;
  animation-name: loginError;
  animation-duration: 0.1s;
  animation-iteration-count: 2;
}

.pin-login__numpad {
  margin: 0 auto;
}

@keyframes loginError {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

@-moz-keyframes loginError {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

.pin-login__key {
  width: 60px;
  height: 60px;
  margin: 10px;
  background: rgba(0, 0, 0, 0.15);
  color: #363b5e;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  cursor: pointer;
}

.pin-login__key:active {
  background: rgba(0, 0, 0, 0.25);
}