/* General */

:root {
	--dark-gray: #585858;
	--blue: #2B5EAB;
	--light-blue: #6494CE;
	--off-white: #eff3f8;
	--red: #e84118;
	--green: #10ac84;
	--light-green: #1dd1a1;
}

html,
body,
body * {margin: 0; padding: 0;}

body * {font-family: 'Assistant', sans-serif;}

header {position: relative;}

button:hover,
input[type="submit"] {cursor: pointer;}

.cache {display: none !important;}

.input-radio {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.input-radio > span:last-child {margin-left: 8px; text-transform: initial;}
.input-radio input[type="radio"] {display: none;}
.input-radio .radio {display: block; width: 15px; height: 15px; border: solid var(--dark-gray) 0.2em; border-radius: 50%;}
.input-radio input[type="radio"]:checked ~ .radio {background-colod: var(--off-white); border-color: var(--blue);}



/* PAGE CONNEXION */

#ctn-connexion {display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;width:100vw;height:100vh}
#ctn-connexion > img {position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}

#ctn-form-connexion,
#ctn-form-connexion > p,
#form-connexion {display: -webkit-box;display: -ms-flexbox;display: flex;	-webkit-box-orient: vertical;	-webkit-box-direction: normal;	-ms-flex-direction: column;	flex-direction: column;	-webkit-box-pack: center;	-ms-flex-pack: center;	justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0;}

#ctn-form-connexion {padding: 50px 0; width: 35%; height: 100; background-color: rgba(255, 255, 255, 0.7); z-index: 10;}
#ctn-form-connexion > * {width: 60%; -webkit-box-sizing: border-box; box-sizing: border-box;}
#ctn-form-connexion > p {margin: 45px 0 25px 0;}
#ctn-form-connexion > p span {color: #7f7f7f; font-weight: 600; font-size: 0.9em; text-align: center;}
#ctn-form-connexion > img {display: block; width: 330px;}

#form-connexion > * {width: 100%;}
#form-connexion > * + * {margin-top: 22px;}
#form-connexion div:not(#mdp-oublie) {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; jusitfy-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 42px; border: solid transparent 1px; border-radius: 3px; padding: 8px 16px 8px 8px; background-color: #fff; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box;}
#form-connexion div.active {border-color: var(--blue) !important;}
#form-connexion div > img {display: block; height: 100%; margin-right: 10px; -webkit-filter: brightness(0) invert(54%) sepia(3%) saturate(10%) hue-rotate(358deg) brightness(91%) contrast(91%); filter: brightness(0) invert(54%) sepia(3%) saturate(10%) hue-rotate(358deg) brightness(91%) contrast(91%);}
#form-connexion div.active > img { -webkit-filter: invert(32%) sepia(87%) saturate(757%) hue-rotate(185deg) brightness(85%) contrast(91%); filter: invert(32%) sepia(87%) saturate(757%) hue-rotate(185deg) brightness(85%) contrast(91%);}
#form-connexion input {outline: none; border: none; width: 100%; font-size: 1em;}
#form-connexion input[type='submit'] {margin-top: 45px; padding: 10px; height: 42px; background-color: var(--blue); font-weight: 600; color: #fff;}

#afficher-mdp,
#cacher-mdp {float: right; margin: 0 !important;}

#afficher-mdp:hover,
#cacher-mdp:hover {cursor: pointer;}

#mdp-oublie {text-align: right; margin-top: 8px;}
#mdp-oublie a {font-weight: 600; font-size: 0.9em; text-decoration: underline; color: var(--dark-gray) !important;}
#mdp-oublie a:hover {cursor: pointer;}

#error-message {margin: 0 !important; margin-bottom: 25px !important; text-align: center; font-size: 0.9em; font-weight: 600; color: var(--red);}



/* NAV BAR */

#nav-bar {position: relative; background-color: var(--blue); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 60px;}
#nav-bar ul {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; list-style: none; width: 900px; height: 100%; margin-left: 20%; padding: 15px 30px; color: #FFF;}
#nav-bar li {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%;}
#nav-bar li:hover {cursor: pointer;}
#nav-bar li + li {margin-left: 20px;}
#nav-bar ul > li a {color: #FFF; font-size: 1.1em; text-decoration: none; padding: 12px 0;}
#nav-bar ul > li img {display: block; height: 90%; margin-top: 5%;}
#nav-bar .active {text-decoration: underline;}
#nav-bar > div {position: absolute; top: 4px; right: 0; padding: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#nom-technicien {margin-right: 12px; background-color: #FFF; color: var(--blue); border-radius: 10px; padding: 7px 10px; font-weight: 600; text-align: center;}
#deconnexion {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 10px; text-decoration: none; background-color: var(--red); color: #FFF; border-radius: 10px;}
#deconnexion img {display: block; width: 25px; height: 25px; margin-right: 5px; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}



/* NOTIFICATION */

.notification {position: absolute; top: 60px; right: 0; color: #FFF; font-size: 1.05em; font-weight: 600; background-color: var(--light-green); border: solid 3px var(--green); border-radius: 0 0 0 12px; padding: 15px 20px;}
.notification:hover {cursor: pointer;}



/* CREATION INTERVENTION */

#ctn-header-infos {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 855px; height: 85px; margin: 0 auto; padding: 24px 0;}
#ctn-header-infos > * {-webkit-box-flex: 1;-ms-flex: 1 1 0px;flex: 1 1 0;}
#ctn-header-infos img {display: block; height: 100px; margin: 0 auto;}

#header-infos p {color: var(--dark-gray);}
#header-infos > *:first-child {font-size: 1.05em; font-weight: 600;}

.title {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--blue); padding: 17px;}
.title > * + * {margin-top: 5px;}
.title h1 {color: #FFF; font-weight: 500;}
.title img {height: 30px; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
body > .title {width: 870px; margin: 0 auto;}

#form-creation-intervention {width: 855px; margin: 30px auto;}
#form-creation-intervention > * + * {margin-top: 30px;}
#form-creation-intervention > div > div {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: between; -ms-flex-pack: between; justify-content: between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;}
#form-creation-intervention > div > div > div + div {margin-left: 30px;}
#form-creation-intervention > div > div > div,
#form-creation-intervention > div > div > div > div {-webkit-box-flex: 1;-ms-flex: 1 1 0px;flex: 1 1 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start;}
#form-creation-intervention > div > div > div > div + div {margin-top: 10px;}

#send-form {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end;}

#form-creation-intervention input,
#form-creation-intervention select,
#form-creation-intervention textarea {-webkit-box-sizing: border-box;box-sizing: border-box;}
/* #form-creation-intervention input {padding: 5px 10px; font-size: 1em;} */
#form-creation-intervention button[type="submit"] {position: relative; outline: none; border: none; padding: 8px 30px; font-size: 1em; font-weight: 600; color: #FFF; background-color: var(--blue); border: solid var(--blue) 2px; border-radius: 10px;}
#form-creation-intervention button[type="submit"] i {position: absolute; display: none; top: 10px; left: 6px;}
#form-creation-intervention button[type="submit"]:hover {color: var(--blue); background-color: transparent;}

#form-creation-intervention label {color: var(--blue); font-size: 0.9em; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;}
#form-creation-intervention label + * {margin-top: 5px;}
#form-creation-intervention textarea {display: block; width: 100%;}

#form-creation-intervention > div:not(.block) {padding-left: 30px; padding-right: 30px;}

#form-creation-intervention .block {background-color: var(--off-white); border-radius: 5px; overflow: hidden;}
#form-creation-intervention .block > .title {padding: 8px 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#form-creation-intervention .block > div:not(.title) {padding: 16px 30px;}

#form-creation-intervention .title {-webkit-box-align: start;-ms-flex-align: start;align-items: start; background-color: var(--light-blue);}
#form-creation-intervention .block.bg-none {background-color: transparent;}
#form-creation-intervention .title.bg-blue {background-color: var(--blue);}
#form-creation-intervention .title h2 {color: #FFF; font-weight: 500; margin-top: 0;}
#form-creation-intervention .title img {diaply: block; height: 25px;}
#form-creation-intervention .title > * + * {margin-left: 20px;}

#infos > div > div > div {width: 100%;}
#infos #clients + .selectize-control {width: 100%; margin-top: 5px;}
#infos .selectize-dropdown-content > div {padding: 7px;}

#description {height: 100%;}
#deplacement,
#main-oeuvre {-webkit-box-flex: unset !important;-ms-flex: unset !important;flex: unset !important;}
#main-oeuvre,
#a-reprogrammer {margin-top: 20px !important;}

#browse {color: #FFF; background-color: var(--light-blue); padding: 8px 10px; text-decoration: none;}

#ctn-upload-files {display: block !important;}
#files-errors {position: relative; margin: 25px 0 0 0 !important; padding: 10px; border: solid #e84118 1px; border-radius: 8px; background-color: #e8411833;}
#files-errors .close-error {position: absolute; top: 5px; right: 10px;}
#files-errors .close-error i {color: #000; font-size: 1.2em;}
#files-errors .close-error:hover {cursor: pointer;}
#ctn-files {margin: 25px 0 0 0 !important;}
.ctn-file {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal !important;-webkit-box-direction: normal !important;-ms-flex-direction: row !important;flex-direction: row !important; -webkit-box-pack: start !important; -ms-flex-pack: start !important; justify-content: start !important; -webkit-box-align: start !important; -ms-flex-align: start !important; align-items: start !important;}
.ctn-file .file-infos {display: block !important;}
.ctn-file .file-infos > * {width: 100%;}
.ctn-file .file-name i {margin-right: 5px;}
.ctn-file .upload-percent {display: block; width: 100%; margin: 0 !important; text-align: center; font-size: 0.9em;}
.ctn-file .remove-file {font-size: 1.4em; color: var(--red); margin-left: 15px;}
.ctn-file .remove-file:hover {cursor: pointer;}

#ctn-reprogrammation,
#ctn-devis {padding-right: 0 !important;}
#ctn-reprogrammation > div,
#ctn-devis > div {-webkit-box-orient: horizontal !important;-webkit-box-direction: normal !important;-ms-flex-direction: row !important;flex-direction: row !important;}
#ctn-reprogrammation > div > div:last-child,
#ctn-devis > div > div:last-child {-webkit-box-flex: 3 !important;-ms-flex: 3 1 0px !important;flex: 3 1 0 !important; -webkit-box-orient: vertical !important;-webkit-box-direction: normal !important;-ms-flex-direction: column !important;flex-direction: column !important;}
#ctn-reprogrammation .block,
#ctn-devis .block {-webkit-box-flex: unset;-ms-flex: unset;flex: unset; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 40px 15px 40px;}
#ctn-reprogrammation .block + .block,
#ctn-devis .block + .block {margin-top: 10px; margin-left: 0;}
#ctn-reprogrammation .block label,
#ctn-devis .block label {display: block;}
#ctn-reprogrammation .block input,
#ctn-devis .block input {display: block; width: 100%;}


#ctn-signature {display: -ms-grid !important;display: grid !important; grid-template-areas: "a b" ". c"; grid-gap: 10px 30px; padding: 0 !important;}
#ctn-signature > div {margin: 0 !important;}
#ctn-signature > div:nth-child(1) {-ms-grid-row: 1;-ms-grid-column: 1;grid-area: a;}
#ctn-signature > div:nth-child(2) {-ms-grid-row: 1;-ms-grid-column: 3;grid-area: b;}
#ctn-signature > div:nth-child(3) {-ms-grid-row: 3;-ms-grid-column: 3;grid-area: c;}
#ctn-signature > div:nth-child(1),
#ctn-signature > div:nth-child(2) {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 16px 30px; background-color: var(--off-white);}
#ctn-signature > div:nth-child(3) label {color: var(--dark-gray); font-size: 1em; text-transform: unset;}
#ctn-signature canvas {width: 355px; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid var(--dark-gray) 1px;}



/* MES INTERVENTIONS */

#form-filter {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: end; -ms-flex-align: end; align-items: end;}
#form-filter > * + * {margin-left: 18px;}
#filters {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#filters > div {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#filters > div + div {margin-left: 18px;}

#form-filter input[type='search'],
#form-filter input[type='text'],
#form-filter input[type='date'] {width: 120px; height: 30px; display: inline-block; vertical-align: middle; border: #ccc 1px solid;}
#form-filter select {min-width: 120px; height: 32px; display: inline-block; vertical-align: middle; border: #ccc 1px solid;}
#form-filter input[type='submit'],
#form-filter input[type='button'] {font-weight: 400; display: inline-block; min-width: 100px; height: 32px; line-height: 25px; font-size: 14px; letter-spacing: 0.5px; color: #FFF; text-align: center; cursor: pointer; border: 1px solid #0d7ef0; background: #0d7ef0; border-radius: 3px;}
#form-filter input[type='button'].btn-danger {background-color: #c9302c; border-color: #ac2925;}

#filtre-client + .selectize-control {width: 200px;}

#conteneur-datatable,
#form-filter {width: 90%; margin: 20px auto;}
#table-datatable {border-collapse: collapse; border-spacing: 0; border-bottom: none;}
#table-datatable th,
#table-datatable td {padding: 10px 18px; -webkit-box-sizing: content-box; box-sizing: content-box;}
#table-datatable thead th {text-align: left; border: 1px solid #ccc !important; background-color: #2B5EAB; color: #ffffff; font-size: 14px; font-weight:500;}
#table-datatable thead th:last-child {width: 170px !important;}
#table-datatable tbody tr:hover {cursor: pointer;}
#table-datatable tbody tr:nth-child(2n+1) {background: #eaeaea;}
#table-datatable tbody tr > td:last-child {text-align: center;}
#table-datatable tbody tr > td:last-child > a + a {margin-left: 20px;}
#table-datatable tbody td {padding: 8px 10px; border: 1px solid #ccc; font-size: 12px;}

.dataTables_paginate {margin: 10px 0;}

.btn {margin: 0px; color: #fff !important; background-color: #337ab7; border-color: #2e6da4; display: inline-block; padding: 6px 12px; font-size: 12px; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; text-decoration: none;}
.btn:hover {background-color: #286090; border-color: #204d74;}
.btn-danger {background-color: #d9534f;}
.btn-danger:hover {background-color: #c9302c; border-color: #ac2925;}
.btn .fa {font-size: 14px;}

.gras {font-weight: 700;}



/* EDITER INTERVENTION */

#ctn-editer-intervention h1 {text-align: center; margin-bottom: 40px;}
		
#ctn-editer-intervention {width: 610px; margin: 30px auto;}
#ctn-editer-intervention > * + * {margin-top: 30px;}

#back {padding: 8px 15px; border-radius: 10px; color: #fff; background-color: var(--blue); text-decoration: none;}

#form-editer-intervention > div > label:first-child {display: block; float: left; width: 180px; padding-right: 20px;}
#form-editer-intervention > div + div {margin-top: 10px;}
#form-editer-intervention > div input[type='text'],
#form-editer-intervention > div input[type='date'],
#form-editer-intervention > div select,
#form-editer-intervention > div textarea {width: 100%; max-width: 400px;}
#form-editer-intervention > div textarea {height: 80px;}

#intervention-client + .selectize-control {display: inline-block; width: 400px;}

#form-editer-intervention input[type='submit'] {padding: 8px 10px; margin-top: 30px; margin-left: auto; font-weight: 400; display: block; min-width: 100px; font-size: 1.1em; letter-spacing: 0.5px; color: #FFF; text-align: center; cursor: pointer; border: 1px solid var(--green); background: var(--green); border-radius: 8px;}

#ctn-intervention-images,
#ctn-intervention-images > div + div {margin-top: 30px !important;}
#ctn-upload-files {margin-top: 20px;}
#existing-images {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-box-align: start; -ms-flex-align: start; align-items: start; grid-gap: 15px;}
#existing-images > li {position: relative; display: block; width: 190px; height: 130px; border: solid var(--dark-gray) 1px;}
#existing-images > li img {display: block; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; text-align: center;}
#existing-images .fa-image {margin-right: 5px;}
#existing-images .remove-existing-file {position: absolute; top: -1px; right: -1px; font-size: 1.4em; color: var(--red); padding: 0 5px; border: solid var(--dark-gray) 1px; background-color: #FFF;}
#existing-images .remove-existing-file:hover {cursor: pointer;}