@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

/*@font-face {font-family: "Quicksand";}*/

:root{
	/** colors base
	--blue: #386A90;
	--blue75: #6A8FAC;
	--blue50: #9BB4C7;
	--blue15: #CDDAE3;
	--blue10: #EBF0F4;
	--blue5: #F5F7F9;
	--orange: rgba(255,165,0,1); #ffa500
	--orange50: rgba(255,190,70,1); #ffbe46
	--orange5: rgba(255,245,230,1); #fff5e6
	--grey50: rgba(0,0,0,0.5);
	--grey30: rgba(0,0,0,0.3);
	--grey10: rgba(0,0,0,0.1);
	--grey5: rgba(0,0,0,0.05);
	--late: rgba(216,78,78,1);
	--priority: Plum;
	--urgent: DarkSeaGreen;
	**/
	/** colors elements foncé **/
	/*--color_body: #2E4057;
	--color_txt: white;
	--color_txt_light: rgba(255,255,255,0.6);
	--color_border: var(--color_txt);
	--color_focus: #cc5803;
	--color_body_contrast: var(--color_txt);
	--color_late: #FFBDE4;
	--color_filter: invert(100%);
	--color_filter_hover: invert(68%) sepia(29%) saturate(4833%) hue-rotate(2deg) brightness(104%) contrast(107%)*/
	/** colors elements clair **/
	--color_body: white;
	--color_txt: #2E4057;
	--color_txt_light: rgba(0,0,0,0.3);
	--color_border: var(--color_txt);
	--color_hover: #cc5803;
	--color_focus: #DEE5ED; /*#cc5803;*/
	--color_body_contrast: var(--color_txt);
	--color_late: #cc5803;
	--color_filter: none;
	--color_filter_hover: invert(68%) sepia(29%) saturate(4833%) hue-rotate(2deg) brightness(104%) contrast(107%);
	/** sizes **/
	--width_default: 600px;
	--width_form: calc(var(--width_default) / 2.5);
	--height_header: 5rem;
	--height_nav: 4rem;
	--height_main: calc(100% - var(--height_header) - var(--height_nav) - 2rem);
	--rem_default: 2rem;
	--rem_slider: 1.5rem;
	--gap: 1rem;
	--padding: var(--rem_default);
	--img_height: var(--rem_default);
	--form_width: 10rem;
	--form_height: 2.4rem;
	--radiusRatio2: var(--rem_default);
	--radiusRatio50: calc(var(--rem_default) / 4);
	/** position **/
	--align_v: center;
}

/*
https://nextcloud.f-mk.ch/index.php/apps/polls/s/QvQHSa9U
https://nextcloud.f-mk.ch/index.php/apps/forms/s/F4ixQSdpFLJKdabAtobGxPaB
*/


*{
	font-family: "Quicksand";
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;	
	color: var(--color_txt);
	/** color: white; **/
	text-decoration: none;
	list-style-type: none;
	list-style-position: inside;
	margin: 0;
	padding: 0;
	box-sizing: border-box;	
}

::placeholder{ /* Firefox */
	font-size: 0.9rem;
	font-style: italic;
	color: var(--color_txt_light);
}

::-ms-input-placeholder{ /* Edge 12-18 */
	font-size: 1rem;
	font-style: italic;
	/*opacity: 0.5;*/
	color: var(--color_txt_light);
	font-weight: light;
border: solid red 3px;
}

h2{
	font-size: 1.2rem;
	font-weight: bolder;
	padding-bottom: 0.2rem;
	border-bottom: dotted var(--color_border) 2px;
}

h2, h3{
	margin-top: 1rem;
}

h4{
	font-weight: 500;
	text-transform: uppercase;
}

h5{
	font-weight: bolder;	
}

form + h4, form + h5{
	margin-top: 1.2rem;
}

a:hover{
	color: var(--color_hover);
	transition: color 0.3s;		
}

img{
	height: var(--img_height);
/*border: solid orange 2px;*/
}

img[src*=".svg"]{
	/*filter: invert(38%) sepia(15%) saturate(1725%) hue-rotate(164deg) brightness(93%) contrast(87%);*/
	filter: var(--color_filter);
}

img[src*=".svg"]:hover{
	filter: var(--color_filter_hover);
}

alert{
	display: flex;
	flex-direction: column;
	text-align: center;
	margin: 30px 0 30px 0;
	font-size: 1.5rem;
	font-weight: bold;
}

/** form **/

input:focus, textarea:focus{
	outline:none;
	background: var(--color_focus);
}

input, select, textarea, button, input[type="file"]{
	font-weight: bold;
	height: var(--form_height);
	min-height: var(--form_height);
	width: var(--form_width);
	max-width: var(--form_width);
	min-width: var(--form_width);
	border: none;
	border-bottom: solid var(--color_border) 1px;
	/** background: rgba(255,255,255,1); **/
	background: none;
}

input[type="file"]::file-selector-button{
	height: 80%;
	width: 25%;
	background:var(--color_body_contrast);
	border: none;
	border-radius: var(--radiusRatio50);
	color: var(--color_body);
	margin-right: 1rem;
}

input[type="file"]::file-selector-button:hover{
	/*background:var(--color_txt);*/
}

input[type="checkbox"]{
	--form_width: 15px;
	--form_height: 15px;
}

input[type="submit"], button{
	background: var(--color_txt);
	color: var(--color_body);
	border: none;
}

input[type="submit"]:hover, button:hover, input[type="submit"]:focus, button:focus{
	background: var(--color_focus);
	color: var(--color_txt);
}

select[name="sort"]{
	--form_width: 7rem;
	--form_height: 1.6rem;
	text-align: center;
	border: solid var(--color_border) 2px;
	border-radius: var(--radiusRatio2);
}

input[readonly=""], textarea[readonly=""], select[disabled=""]{
	background: var(--color_focus);
	cursor: context-menu;
}

input.add, button.add{
	--form_width : var(--form_height);
	font-size: 1.9rem;
	font-weight: 500;
	/*background: none;*/
	/*align-items: center;*/
	/*align-items*/
	
}

textarea{
	padding-top: 0.5rem;
	height: 5em; /*height == rows*/ 
}

/** structure **/

body{
	height: 100vh;
	background: var(--color_body);
	/** background: black; **/
}

header, nav, main{
	display: flex;
	flex-direction: column;
	max-width: min(var(--width_default), calc(100% - var(--padding)));
	margin-inline: auto;
	scroll-behavior: smooth;
}

header{
	display: grid;
	grid-template-columns: auto auto fit-content(100%);
	grid-gap: var(--gap);
	height: var(--height_header);
	z-index: 100;
}

header select[name="groupprojet_id"]{
	font-weight: normal;
	font-size: 1.4rem;
	text-align: right;
	/*color: var(--color_body);*/
	/*--form_width: auto;*/
	--form_width: min(var(--width_default), calc(100% - var(--padding)));
	border: none;
}

header .title a{
	font-size: 3.5rem;
	transition: color 0.3s;
}

header .title a:hover{
	color: var(--color_hover);
}

header .title .copyright{
	font-size: 0.82rem;
}

header .infos{
	text-align: right;
}

header .menu #button_menu ~ .list_menu, header .menu #button_menu{
	display: none;
}

header .menu #button_menu:checked ~ .list_menu{
	display: flex;
	position: absolute;
	padding-top: 3rem;
	left: 0;
	font-size: 1.6rem;
	font-weight: bold;	
	text-transform: uppercase;
	text-align: center;
	height: calc(100vh - 4rem);
	width: 100vw;
	justify-content: center;
	/*background:rgba(255,255,255,0.9);*/
	background: var(--color_body);
	z-index: 90;
}

header .menu_expose{
	color: var(--color_hover);
}

header img{
	--img_height: 3.5rem;
	cursor: pointer;
}

nav, section.form .form_tools{
	display: grid;
	grid-template-columns: auto fit-content(100%);	
	align-items: var(--align_v);
	height: 4rem;
}

nav{
	height: var(--height_nav);
}

nav .sort{
	display: flex;
	align-items: var(--align_v);	
}

nav .tools{
	display: flex;
	justify-content: right;
}

nav .sort > *, nav .tools > *{
	margin-left: 0.5rem;
}

main{
	height: var(--height_main);	
}

section.form{
	--section_form_height: calc(var(--form_height) + 0.5rem);
	position: absolute;
	width: min(var(--width_default), calc(100% - var(--padding)));
	height: calc(var(--height_main) - var(--section_form_height));
	margin-inline: auto;
	/*overflow: auto;*/
	background: var(--color_body);
	/*background:rgba(255,255,255,0.9);*/
	/*background: none;*/
	margin-top: var(--section_form_height);
	z-index: 10;
}

section.form form{
	display: flex;
	flex-direction: column;
	height: calc(100% - 4rem);
	overflow: auto;
	padding-right: 1rem;
}

section.form input, section.form select, section.form textarea{
	--form_width: 100%;
}

section.slider + section.form{
	--section_form_height: calc(var(--form_height) + var(--rem_slider) + 2rem);
	height: calc(var(--height_main) - var(--section_form_height));
	margin-top: var(--section_form_height);
	/*border: solid red 3px;*/
}

/****************************/
/**A CONSERVER EN ATTENDANT DE REGLER LA QUESION**/
section.form.undisplayable{
	display: none;
}
/****************************/

section.corp{
	overflow: auto;
	padding-right: 1rem;
}

.form_quick{
	display: grid;
	grid-template-columns: auto fit-content(100%);
	margin-bottom: 1rem;
}

.form_quick > input{
	--form_width: 100%;
}

.form_quick > form, .form_quick > button{
	margin-left: 1rem;
}

.list > *{
	display: grid;
	grid-template-columns: auto fit-content(100%);
	margin-bottom: 0.5rem;
	align-items: var(--align_v);
}

form.list > *{
	margin-bottom: inherit;
}

.list > * :nth-child(2):not(input[type="submit"]){
	text-align: right;	
}

.list > a:hover, .list > .reveal:hover{
	font-weight: bold;
}

.list > form{
	display: inherit;
}

.list > .taskItem{
	grid-template-columns: fit-content(100%) auto;
	grid-gap: var(--gap);
}

.list .task_content{
	display: flex;
	justify-content: space-between;
}

.list.hono > *{
	grid-template-columns: repeat(2, 1fr);
}

/** generic **/

.red, .red *{
	color: red;
}

.archive, .archive *{
	color: var(--color_txt_light);
	font-style: italic;
}

.selected, .selected *{
	padding: 0.2rem 0.3rem 0.2rem 0.3rem;
	/*border-radius: var(--radiusRatio2);*/
	background: var(--color_txt);
	color: var(--color_body);
}

.italic{
	font-style: italic;
	font-size: 0.95rem;
}

/** rate **/

.rate{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: var(--gap);
}

.rate input{
	--form_width: 100%;
}

.rate input:nth-child(-n+3){
	text-align: right;
}

.margin_bottom{
	margin-bottom: 1rem;
}
/** slider **/

.slider{
	display: grid;
	grid-template-columns: fit-content(100%) 1fr fit-content(100%);
	position: sticky;
	top: 0;	
	/*background: rgba(255,255,255,0.9);*/
	z-index: 20;
}

.slider div{
	display: flex;
	justify-content: center;
	align-items: var(--align_v);
}


/*.slider a{
	font-size: var(--rem_slider);
}*/

.slider div a{
	font-size: var(--rem_slider);
	font-weight: bold;
	margin-right: 10px;
}

.slider input[type="checkbox"] ~ label{
	cursor: pointer;
}

.slider input[type="checkbox"], .slider input[type="checkbox"] ~ label form{
	display: none;
}

.slider input[type="checkbox"]:checked ~ label form{
	display: flex;
	justify-content: space-around;
	position:absolute;
	width: 100%;
	left: 0;
	padding:20px 0 300px 0;
	background: linear-gradient(to bottom, rgba(255,255,255,1) 60%, rgba(255,255,255,0))
}

/** autocomplete **/

.adrStreet_items{
	width: var(--width_form);
	margin-bottom: 5px;
	padding: 5px;
	cursor: pointer;
}

.adrStreet_items .adrStreet_item{
	/*color: var(--blue75);*/
	font-style: italic;
	margin-bottom: 5px;
}

.adrStreet_items .adrStreet_item:hover, .autocomplete-active{
	font-weight: bold;
}

/** kanban **/

section.kanban{
	display: flex;
	overflow: inherit;
	padding: inherit;
/*border: solid blue 2px;*/
	/*flex: auto auto auto;*/
	/*flex: auto auto auto;*/


}

section.kanban > #taskColumn{
	/*flex: calc(100% + 1rem);*/
	width: calc(100% / 3);
	padding: 0.5rem;
/*border: solid orange 2px;*/
}

section.kanban > #taskColumn > :nth-child(1){
	display:flex;
	position: sticky;
	top: 0.5rem;
	justify-content:center;
	align-items: center;
	font-weight: bold;
	border-radius:  var(--radiusRatio50);
	background: var(--color_txt);
	color: var(--color_body);
}


section.kanban > #taskColumn > :nth-child(2) > *{
	border: solid var(--color_border) 1px;
	border-radius: var(--radiusRatio50);
	padding: 0.5rem;
	margin-top: 0.5rem;
	overflow-wrap: break-word;
	
	/*********************/
	/*-webkit-touch-callout: none;*/
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	/*********************/
}

section.kanban > #taskColumn > :nth-child(2) > *:hover{
	border: solid var(--color_border) 2px;
}

/*section.kanban > #taskColumn > * > .taskItem{
	/*border: solid var(--blue) 1px;
	border-radius: var(--radiusRatio50);
	padding: 5px;
	overflow-wrap: break-word;*/
	
	/*********************/
	/*-webkit-touch-callout: none;*/
	/** -webkit-user-select: none; /* Safari */
	/** -ms-user-select: none; /* IE 10 and IE 11 */
	/** user-select: none; /* Standard syntax */
	/*********************/
/*}*/

/*section.kanban > #taskColumn > * > .taskItem:hover{
	border: solid var(--blue) 2px;
}*/

/*section.kanban .taskColumn > :nth-child(1){
	display:flex;
	justify-content:center;
	align-items: center;
	font-weight: bold;
	border-radius:  var(--radiusRatio50);
	background: var(--blue15);
}*/

/*section.kanban .taskColumn > :nth-child(1){
	display: 
}*/

/** generic task **/


.priority1 > a{
	/*background: Plum;*/
	/*border: solid var(--color_border) 2px;*/
	background: var(--color_focus);
	border-radius: var(--radiusRatio2);
	padding: 0.2rem 0.7rem 0.3rem 0.7rem;
	font-weight: bolder;
	/*color: var(--color_txt);*/
}

.priority2 > a{
	/*background: DarkSeaGreen;*/
	/*background: var(--color_late);*/
	/*border: solid var(--color_late) 2px;*/
	background: var(--color_txt);
	border-radius: var(--radiusRatio2);
	padding: 0.2rem 0.7rem 0.3rem 0.7rem;
	font-weight: bolder;
	color: var(--color_body);
	/*font-weight: bolder;*/
	/*color: white;*/
}

.priority2 > a > *{
	color: var(--color_body);
	/*color: var(--color_txt);*/	
}

.late div{
	color: var(--color_late);
	font-weight: bolder;
	/*color: rgba(216,78,78,1);*/
}

/*.close{
	display:none;
}*/
/*.font_small{
	font-size: 0.8rem;
	font-style: oblique;
}*/

/** hono **/

.honoSia > *, .hono_detail{
	width: 100%;
	display: grid;
	grid-gap: 5px;
	align-items: var(--align_v);
}

.hono_detail{
	grid-template-columns: 5% auto 12% 12% 12% 12%;	
	font-size: 1rem;
}

.hono_detail :nth-last-child(-n+3){
	text-align: right;
}

.hono_detail.loose :first-child{
	grid-column: 1 / span 3;
}

.hono_detail.loose_phase :first-child{
	grid-column: 1 / span 2;
}

.hono_detail.loose_detail :nth-child(2){
	grid-column: 2 / span 2;
}

.hono_detail.loose_forfait > *{
	text-align: inherit;
}

.hono_detail.loose_forfait :nth-last-child(-n+2){
	text-align: right;
}

.hono_detail.loose_forfait :nth-child(1){
	grid-column: 1 / span 4;
}

.hono_detail.total > *{
	text-align: inherit;
}

.hono_detail.total :nth-child(1){
	grid-column: 1 / span 5;
}

.hono_detail.total :nth-last-child(-n+1){
	text-align: right;
}

.hono_detail > *{
	--form_width: 100%;
}

.hono_detail > input[type="submit"]{
	/*text-align: center;*/
	padding-right: 0.5rem;
/*border: solid red 2px;*/
}

.honoSia.facture > *{
	grid-template-columns: 10% auto 15% 10% 13%;	
}

.honoSia.offre > *{
	grid-template-columns: 10% auto 10% 10% 13% 13%;
}

.honoSia > * > input.factor{
	--form_width: 100%;
	--form_height: 1.8rem;
	border: dotted var(--color_border) 1px;
	border-radius: var(--radiusRatio50);
}

.honoSia > :first-child{
	font-weight: bold;
}

.facture > * :nth-child(3), .facture > * :nth-child(4), .facture > * :nth-child(5),
.offre > * :nth-child(3), .offre > * :nth-child(4), .offre > * :nth-child(5), .offre > * :nth-child(6){
	text-align: right;
}

/** auth **/

form.auth{
	margin-top: 6rem;
	display:flex;
	flex-direction: column;
}

form.auth input{
	--form_width: 15rem;
	--form_height: 3.6rem;
	margin: 0 auto 0 auto;
	text-align: center;
}

/** dialogue **/

dialog{
	position: absolute;
	width: calc(var(--width_default) / 2);
	margin: auto;	
	padding: 20px;
	border-radius: var(--radiusRatio50);
}

dialog button{
	--form_width: 100%;
}

dialog > div{
	padding-top: 1rem;
	padding-bottom: 1rem;
}

dialog > div > *{
	font-size: 1.2rem;
	display: grid;
	grid-template-columns: fit-content(100%) auto;
	grid-gap: var(--gap);	
}

dialog > div a{
	font-weight: bold;
	cursor: pointer;	
}

@media only screen and (min-width: 1200px){
	section.form{
		position: absolute;
		left: 0;
		width: clamp(var(--width_form), calc((100vw - var(--width_default)) / 2), calc(5rem + var(--width_form)));
		overflow: auto;
		padding: 0 1rem 0 1rem;
	}
	
	section.form.undisplayable{
		display: block;
	}
}