:root {
	--couleur_claire: #a0f1f2;
	--couleur_foncee: #149294;
	--texte_clair: white;
	--texte_fonce: black;
	--couleur_box1: #9802a8;
	--couleur_box2: #4743bf;
	font-family: Arial, sans-serif;
	font-size:50px;
}

body{
	background-color: var(--couleur_claire);
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/* ----------------- header --------------------- */
header{
	background-color: var(--couleur_foncee);
	color: var(--texte_clair);
	height: 7vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

#CLdujour{
	text-align: center;
}

.p_head{
	margin-top: 0;
	font-size: 1.5 rem;
	font-weight: bold;
}

.p_surhead{
	font-size: 1 rem;
	margin-bottom: 0;
}

.maincontainer {
	display: flex;
	flex-direction: row;
}

.subcontainer {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.largeur {
	width: 100%;
}

#frame_floating {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100vh;
}

.subcontainerit_encours {
	display: grid;
	width: 100%;
	height: 85vh;
	grid-template-columns: 10% 1fr 10%;
	grid-template-rows: 80% 1fr;
	grid-template-areas:
	"fait encours poub"
	"fait clock clock";
}

.subcontainerit_fait {
	display: grid;
	width: 100%;
	height: 85vh;
	grid-template-columns: 80% 1fr 10%;
	grid-template-rows: 80% 1fr;
	grid-template-areas:
	"fait encours poub"
	"fait clock clock";
}

.subcontainerit_poub {
	display: grid;
	width: 100%;
	height: 85vh;
	--grid_endcols: 80% 1fr 80%;
	grid-template-columns: 10% 1fr 80%;
	grid-template-rows: 80% 1fr;
	grid-template-areas:
	"fait encours poub"
	"fait clock clock";
}

.subcontainerit_clock {
	display: grid;
	width: 100%;
	height: 85vh;
	grid-template-columns: 10% 1fr 10%;
	grid-template-rows: 30% 1fr;
	grid-template-areas:
	"fait encours poub"
	"fait clock clock"
}

#framencours {
	padding:10px;
	white-space: nowrap;
	overflow-x: hidden;
  }

#framefait {
	padding:10px;
	white-space: nowrap;
	overflow-x: hidden;
}

#framepoub {
	padding:10px;
	white-space: nowrap;
	overflow-x: hidden;
}

#frameclock {
	padding:10px;
	white-space: nowrap;
	overflow-x: hidden;
}

fait {
	grid-area: fait;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	overflow: scroll;
}

encours {
	grid-area: encours;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	overflow: scroll;
}

poub {
	grid-area: poub;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	overflow: scroll;
}

.lapoub {
	position: absolute;
	top: 8vh;
	left: 75%;
	width:30%;
	height: 56%;
	z-index: 1;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	overflow: scroll;
}

.lapoubactive {
	left: 50%;
}

clock {
	grid-area: clock;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	overflow: scroll;
}

/* ----------------- sections --------------------- */
section {
	border-width: 1px;
	border-color: black;
	border-style: solid;
	overflow: scroll;
}

#lischeqlis {
	height: 30vh;
	position: relative;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	padding: 1%;
}

#template {
	height: 50vh;
	position: relative;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	padding: 2%;
}

#exp {
	height: 30vh;
	position: relative;
	display: flex;
    flex-direction: column;
	padding: 1%;
}

#imp {
	height: 50vh;
	position: relative;
	display: flex;
    flex-direction: column;
	padding: 1%;
}

/* ----------------- texte --------------------- */
.div_titleCL{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	height: 1.2rem;
}

.p_title_checklist{
	font-size:1rem;
	font-weight: bold;
}

.p_rub_checklist{
	font-size:1rem;
	font-weight: bold;
}

.p_instans_checklist{
	font-size:1rem;
	margin-left: 1%;
	margin-right: 1%;
}

.div_imgplus{
	width:100%;
	display: flex;
	justify-content: space-between;
	position: sticky;
}

.div_rubric{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	height: 1.2rem;
}

.div_item{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: auto;
	height: 1.4rem;
	padding-left: 10%;
}

.div_sauv{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding-left: 10%;
}

.div_imp{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: 5%;
	padding-right: 5%;
}

#textarea_import{
	width: 100%;
	height: 300px;
	font-size: 0.5rem;
}

/* ----------------- aside --------------------- */
aside {
	width: 10%;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	overflow: scroll;
}

/* ----------------- footer --------------------- */
footer{
	background-color: var(--couleur_foncee);
	color: var(--texte_clair);
	height: 8vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ----------------- images --------------------- */
.imgfoot{
	height: 7vh;
}

.imgplus{
	position: sticky;
	height: 4.5vh;
	width: 4.5vh;
	top: 1%;
	margin-bottom: 50px;
}

.imgTCL{
	height: 1rem;
	margin-left: 4%;
	margin-right: 2%;
}

.imgSTA{
	height: 1rem;
	margin-right: 1%;
}

.imgicon{
	position: absolute;
	height: 5vh;
	top: 1%;
	left: 1%;
	box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.86);
	border-radius: 6px;
}