* {
	margin: 0;
	padding: 0;

	outline: none !important;
}

body {
	background: var(--background-grey);
	overflow-x: hidden;
}

::-webkit-scrollbar-track {
	border-radius: 2px;
}

::-webkit-scrollbar {
	width: 9px;
	background-color: #F7F7F7;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;

	background-color: rgba(0,0,0,0.2);
}

/*===============================================================================*/
/*================================= COMPONENTS ==================================*/
/*===============================================================================*/

/*---------- BTN ----------*/

.btn {
	position: relative;

	height: 35px;

	color: var(--text-clear) !important;

	border-radius: var(--border-radius);
	border: none;

	transition: all .1s;
}

.btn:hover {
	filter: brightness(85%);
	transition: all .1s;
}

.btn-default,
.btn-primary {
	background-color: var(--btn-primary) !important;
}

.btn-secondary {
	background-color: var(--btn-secondary);
	color: var(--text-dark);
}

.btn-close {
	background-color: var(--btn-close);
	color: var(--text-clear);
}

.btn-left-menu {
	position: relative;
	height: 45px;
	width: 100%;
	margin-bottom: 5px;
	font-size: 15px;
}

.btn-left-menu > i {
	position: absolute;
	margin: 0;
	left: 10px;

	top: 50%;
	transform: translateY(-50%);
}

.btn-left-menu:last-of-type {
	margin-bottom: 0;
}

.btn-transparent {
	background-color: transparent;
	border: none;
}

.btn-transparent:hover {
	filter: none;
}

.btn-input {
	height: 30px;
	margin-left: 10px;
}

.btn > .btn-badge {
	position: absolute;

	height: 20px;
	width: 20px;
	top: -5px;
	right: -5px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 20px;

	background-color: var( --btn-close);
}

.btn-badge > i {
	font-size: 10px;
}

.btn-small {
	height: 25px;
    padding: 0px !important;
    aspect-ratio: 1/1;
}

button > img {
	height: 100%;
	width: 100%;

	object-fit: contain;
	object-position: center;
}

/*---------- INPUT ----------*/

input, select, textarea {
	margin: 0 !important;
	border-radius: var(--border-radius) !important;
}

.form-control.textMode {
	padding: 0;
	background-color: transparent;
	border: none;
	box-shadow: none;
	pointer-events: none;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	transition: unset !important;
}

.form-control.editMode {
	padding: 3px;
	transition: unset !important;
}

option:disabled {
	color: rgba(0,0,0,0.2);
}

/*---------- FORM ----------*/

input {
	max-height: 30px;
}

.form-group > .inline-row {
	display: flex;
	align-items: center;
}

.inline-row > label {
	min-width: 100px;
	width: 100px;

	margin: 0;
	margin-right: 10px;

	text-align: right;
}

.inline-row > label:not(:first-child) {
	flex-shrink: 0;

	width: auto;
	padding: 0 10px;

	margin: 0;
	text-align: right;
}

.inline-row > img {
	height: 34px;
	margin-left: 10px;
}

.inline-row > form {
	width: 100%;
}

.form-group.form-btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.form-group.form-btn > button {
	min-width: 150px;
}

/*---------- ALERTIFY ----------*/

.alertify-notifier {
	z-index: 9999 !important;
}

.ajs-message {
	border-radius: var(--border-radius);

	color: var(--text-clear);
}

.ajs-success {
	background-color: var(--ajs-success) !important;
}

.ajs-success::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f164";
	margin-right: 10px
}

.ajs-error {
	background-color: var(--ajs-error) !important;
}

.ajs-error::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00d";
	margin-right: 10px
}

.ajs-warning {
	background-color: var(--ajs-warning) !important;
}

.ajs-warning::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f071";
	margin-right: 10px
}

.ajs-dialog {
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-modal);
}

.ajs-dialog > .ajs-header,
.ajs-dialog > .ajs-footer {
	background-color: transparent !important;
}

.ajs-footer .ajs-ok {
	background-color: var(--btn-primary);
	border-radius: var(--border-radius);
	border: none;
	color: var(--text-clear);
}

.ajs-footer .ajs-cancel {
	background-color: var(--btn-close);
	border-radius: var(--border-radius);
	border: none;
	color: var(--text-clear);
}

.ajs-input {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555555;
	background-color: var(--background-white);
	background-image: none;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

/*---------- JQUERY UI ----------*/

.ui-autocomplete {
	border: 1px solid var(--border-light) !important;
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--background-grey) !important;
	background: var(--background-grey) !important;
	font-weight: normal !important;
	color: unset !important;
}

.ui-selectmenu-open {
	z-index: 9999 !important;
}

.ui-icon.avatar {
	background-size: contain;
}

.ui-autocomplete {
	z-index: 9999 !important;
}

.ui-tooltip {
	background: rgba(0,0,0,0.9) !important;
	border: 1px solid var(--text-dark) !important;
	color: var(--text-clear) !important;
}

/*---------- LEAFLET ----------*/

.marker-cluster-small,
.marker-cluster-small div {
	background-color: var(--marker-color) !important;
}

.marker-cluster-medium,
.marker-cluster-medium div {
	background-color: var(--marker-color) !important;
}

.marker-cluster-small span,
.marker-cluster-medium span {
	color: var(--text-dark);
	font-weight: bold;
}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	filter: drop-shadow(0px 0px 3px #111111);
}

.leaflet-bottom {
	z-index: 1009 !important;
}

/*---------- SUMMERNOTE ------------*/

.panel {
	margin: 0 !important;
}

.note-editable > ol,
.note-editable > ul {
	margin: 1em 0;
	padding-inline-start: 40px;
}

/*---------- NAV TABS ----------*/

.nav-tabs {
	border: none;
}

.nav-tabs > li > a {
	border: none;
	border-bottom: 4px solid transparent;

	color: var(--text-dark);
}

.nav-tabs > li > a:hover {
	border: none;
	border-bottom: 4px solid var(--border-light);
}

.nav > li > a:focus,
.nav > li > a:hover {
	text-decoration: none;
	background-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
	border: none;
	border-bottom: 4px solid var(--main-color-light);

	font-weight: bold;

	color: var(--text-dark);
}

/*---------- JSGRID -----------*/

.jsgrid-edit-row input,
.jsgrid-edit-row select,
.jsgrid-edit-row textarea,
.jsgrid-filter-row input,
.jsgrid-filter-row select,
.jsgrid-filter-row textarea,
.jsgrid-insert-row input,
.jsgrid-insert-row select,
.jsgrid-insert-row textarea {
	display: block;
	width: 100%;
	height: 34px px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555555;
	background-image: none;
	border: 1px solid #CCCCCC;
}

.jsgrid-grid-header {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

.jsgrid-header-row > .jsgrid-header-cell {
	text-align: center;

	background: var(--main-color) !important;
	color: var(--text-clear);
}

.jsgrid-header-row > .jsgrid-header-cell:first-of-type {
	border-top-left-radius: var(--border-radius);
}

.jsgrid-insert-mode-button {
	filter: grayscale(1) brightness(100);
}

/*---------- GLOBAL ----------*/

.noData {
	grid-column: 1/-1;
	width: 100%;
	margin: 0;
	padding: 10px;
	text-align: center;
	font-weight: bold;
}

span.separator {
	padding: 0 !important;
}

.heightSpacer {
	height: 30px;
}

/*===============================================================================*/
/*==================================== MODAL ====================================*/
/*===============================================================================*/

.modal-header {
	display: flex;
}

.modal-title {
	margin-right: auto;
}

.modal-content {
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-modal);
}

.modal-half > .modal-dialog {
	min-width: 50%;
}

.modal-large > .modal-dialog {
	min-width: 85%;
}

.modal-large-fullheight > .modal-dialog {
	height: calc(100vh - 60px);
	min-width: 85%;
}

.modal-large-fullheight > .modal-dialog > .modal-content {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.modal-large-fullheight > .modal-dialog > .modal-content > .modal-body {
	flex: 1;

	display: flex;
	flex-direction: column;

	overflow: hidden;
}

.modal-fullscreen {
	padding: var(--spacing);
}

.modal-fullscreen > .modal-dialog {
	height: 100%;
	width: 100%;

	margin: 0;
}

.modal-fullscreen > .modal-dialog > .modal-content {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.modal-fullscreen > .modal-dialog > .modal-content > .modal-body {
	flex: 1;

	display: flex;
	flex-direction: column;

	overflow-x: hidden;
	overflow-y: auto;
}

/*===============================================================================*/
/*==================================== MENUS ====================================*/
/*===============================================================================*/

.navbar {
	height: var(--nav-bar-height);
	background-color: var(--nav-background);
	border-radius: 0;
	border: none;
	margin: 0;
}

.navbar-inverse .navbar-nav > li > a {
	color: var(--text-clear);
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:focus,
.navbar-inverse .navbar-nav > .open > a:hover {
	background-color: rgba(0,0,0,0.3);
}

.dropdown-menu {
	min-width: 300px;
	border-radius: var(--border-radius);
	border: none;
	box-shadow: var(--shadow-dropdown);
	z-index: 9999;
}

.dropdown-item.nav-separator {
	padding: 10px;
	margin-top: 5px;

	font-weight: bold;

	color: var(--text-clear);
	background-color: var(--main-color);
}

.dropdown-item.nav-separator:first-of-type {
	margin-top: -5px;
}

.leftMenu {
	position: absolute;
	flex-shrink: 0;

	height: calc(100vh - var(--nav-bar-height));
	padding: var(--spacing);
	width: var(--left-menu-width);

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);

	z-index: 1010;
}

/*===============================================================================*/
/*================================ MAIN CONTAINER ===============================*/
/*===============================================================================*/

.mainContainer {
	height: calc(100vh - var(--nav-bar-height));

	display: flex;
}

/*===============================================================================*/
/*================================== PASSWORD ===================================*/
/*===============================================================================*/

.passwordResetContainer {
	width: 100%;
}

/*===============================================================================*/
/*==================================== LOGIN ====================================*/
/*===============================================================================*/

.loginContainer {
	position: relative;

	height: 100vh;
	flex: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background: #00D2FF;
	background: -webkit-linear-gradient(to left, #0288d1, #00d2ff);
	background: linear-gradient(to left, #0288d1, #00d2ff);
}

.loginContainer > .loginMenu {
	position: absolute;

	width: 100%;

	padding: 20px;
	top: 0;
	left: 0;

	display: flex;
	flex-direction: row;
	align-items: center;
}

.loginMenu > img {
	height: 20px;
}

.loginMenu > h1 {
	margin: 0;
	margin-left: 20px;

	font-size: 20px;
	font-weight: 100;
	color: var(--text-clear);
}

.loginContainer > form {
	height: auto;
	min-height: 450px;
	width: 400px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	border-radius: var(--border-radius);

	background-color: var(--background-white);
	box-shadow: var(--shadow-login);
}

.loginContainer > form > .loginFormHeader,
.loginContainer > form > .loginFormFooter {
	min-height: 75px;
	max-height: 75px;
	width: 100%;
	flex-shrink: 0;
	padding: 20px;
	display: flex;
	align-items: center;
}

.loginContainer > form > .loginFormHeader {
	background-color: var(--main-color);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	color: var(--text-clear);
}

.loginContainer > form > .loginFormFooter {
	justify-content: flex-end;

	border-top: 1px solid var(--border-light);
}

.loginContainer > form > .loginFormHeader > h1 {
	margin: 0;
	font-size: 25px;
}

.loginContainer > form > .loginFormBody {
	flex: 1;
	width: 100%;

	padding: 30px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.loginContainer > form > .loginFormBody > .form-group {
	width: 100%;
}

.loginFormBody > .form-group > input {
	height: 45px;
	max-height: unset;
}

.loginFormFooter > button {
	width: 100%;
}

/*===============================================================================*/
/*=================================== LANDING ===================================*/
/*===============================================================================*/

.landingPage {
	position: absolute;

	height: calc(100vh - var(--nav-bar-height));
	width: 100%;

	display: flex;
	flex-direction: row;

	background-color: var(--background-white);

	z-index: 9998;
}

.landingPage > .landingWelcome {
	height: 100%;
	width: 50%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.landingWelcome > h1 {
	font-size: 60px;
}

.landingWelcome > button {
	height: 50px;
	width: 250px;
}

.landingPage > .landingImg {
	height: 100%;
	width: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	background-image: url('../img/blob.svg');
	background-repeat: no-repeat;
	background-position: center;
}

.landingImg > img {
	height: 30%;
}

/*===============================================================================*/
/*==================================== INDEX ====================================*/
/*===============================================================================*/

.indexContainer {
	flex: 1;

	padding: var(--spacing);

	display: flex;
	flex-direction: column;
}

/*===============================================================================*/
/*=================================== CLIENT ====================================*/
/*===============================================================================*/

.clientInfoContainer {
	height: 80px;
	margin-bottom: var(--spacing);
	display: flex;
	flex-direction: row;
}

.clientInfoContainer > .clientDataContainer {
	position: relative;
	min-width: fit-content;
	width: 65%;
	margin-right: var(--spacing);

	display: flex;

	border-radius: var(--border-radius);
	background-color: var(--nav-background);
	box-shadow: var(--shadow-normal);
}

.clientDataContainer > .clientTagContainer {
	position: absolute;

	min-width: 250px;
	max-width: 90%;

	padding: 0 15px;

	top: 0;
	right: 50%;

	transform: translateY(-5px) translateX(50%);

	text-align: center;
}

.clientTagContainer > .clientTag {
	padding: 2px 10px;

	border-radius: var(--border-radius);

	color: var(--text-clear);
}

.clientTagContainer > .clientTag.contratRunning {
	background-color: var(--main-color);
}

.clientTagContainer > .clientTag.contratEnded {
	background-color: var(--btn-close);
}

.clientTag > label {
	margin: 0;
	font-weight: 100;
}

.clientDataContainer > .clientLogo {
	position: relative;

	height: 100%;
	width: fit-content;
	max-width: 120px;

	padding: 10px;
}

.clientLogo > img {
	height: 100%;
	width: 100%;

	object-fit: contain;
	object-position: center;

	border-radius: var(--border-radius);
}

.clientLogo > .clientAddLogo {
	height: 100%;
	width: 60px;

	display: flex;
	align-items: center;
	justify-content: center;

	border: 1px dashed var(--text-clear);
	border-radius: var(--border-radius);

	color: var(--text-clear);

	cursor: pointer;
}

.clientAddLogo > input {
	display: none;
}

.clientLogo > .clientEditLogo {
	position: absolute;

	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;

	display: none;
}

.clientEditLogo > input {
	display: none;
}

.clientLogo:hover > .clientEditLogo {
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--border-radius);

	font-size: 17px;

	border: 1px dashed var(--background-white);

	color: var(--text-clear);
	background-color: rgba(0,0,0,0.4);

	cursor: pointer;
}

.clientDataContainer > .clientData {
	flex: 1;
	min-width: fit-content;

	height: 100%;
	display: flex;
	align-items: center;
	padding: 15px;
	color: var(--text-clear);
}

.clientData > .form-group {
	margin-bottom: 0;
}

.clientData > .form-group > .inline-row {
	margin-right: 30px;
}

.clientData > .form-group > .inline-row > i {
	min-width: unset;
	margin-right: 5px;
	color: var(--main-color-light);
}

@media screen and (max-width: 1440px) {
	.clientData {
		padding-bottom: 5px !important;
		justify-content: space-evenly !important;
	}

	.clientData > .form-group > .inline-row {
		flex-direction: column;
		align-items: center;
		margin-right: 15px;
	}

	.clientData > .form-group > .inline-row > i {
		width: auto;
	}
}

.clientDataOptions {
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: end;
}

.clientDataOptions > button {
	height: 40px;
	width: 40px;

	margin-right: 5px;
}

.clientDataOptions > button:last-of-type {
	margin: 0;
}

/*================================= GROUPE =================================*/

.modalGroupeClientNoGroup {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: var(--spacing);
}

.modalGroupeClientNoGroup > .modalGroupeClientNoGroupOptions {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--spacing-xl);
}

.modalGroupeClientNoGroupOptions > i {
	flex-shrink: 0;
}

.modalGroupeClientToolbar {
	padding: var(--spacing);

	display: flex;
	align-items: center;
	justify-content: space-between;

	border-radius: var(--border-radius);

	background-color: var(--main-color);
}

.modalGroupeClientContainer {
	display: flex;
	flex-direction: column;
}

.modalGroupeClientToolbar > input {
	max-width: 33%;
	min-width: 200px;
}

.modalGroupeClientToolbar > .modalGroupeClientToolbarName {
	display: flex;
	align-items: center;
	column-gap: 4px;
}

.modalGroupeClientToolbarName > label {
	margin: 0;
	font-weight: 400;
	color: var(--background-white);
}

.modalGroupeClientToolbarName > h1 {
	font-size: 20px;
	font-weight: bold;
	margin: 0;
	color: var(--background-white);
}

.modalGroupeClientContainer > h1 {
	font-size: 17px;
	font-weight: bold;
}

.modalGroupeClientContainer > .modalGroupeClientList {
	max-height: 600px;
	width: 100%;

	display: flex;
	flex-direction: column;

	overflow: auto;
}

.modalGroupeClientList > .modalGroupeClientItem {
	padding: var(--spacing);

	display: flex;
	align-items: center;
	justify-content: space-between;

	border-radius: var(--border-radius);
	background-color: var(--background-lightgrey);
}

.modalGroupeClientList > .modalGroupeClientItem:not(:first-of-type) {
	margin-top: var(--spacing-sm);
}

/*===============================================================================*/
/*================================= CLIENT MENU =================================*/
/*===============================================================================*/

.clientsMenu {
	position: absolute;

	width: auto;
	max-width: 100%;
	top: 0;
	bottom: 0;
	right: 0;

	display: flex;
	justify-content: flex-end;

	z-index: 1003;
}

.clientsMenu > .clientsListContainer {
	width: 500px;
	max-width: 100%;
	max-height: 100%;

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);
}

.clientsListContainer > h1 {
	height: 50px;
	max-height: 50px;
	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	font-size: 15px;
	color: var(--text-clear);
	background-color: var(--main-color);
}

.clientsListContainer > h1 > .btn {
	margin-left: auto;
	padding: 0;
	height: auto;
}

.clientsListContainer > .clientsList {
	height: calc(100% - var(--nav-bar-height));
	padding: 15px;

	list-style-type: none;

	overflow: auto;
}

.clientsList > .clientLetterLabel {
	padding: 10px;
	margin-top: 10px;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color-light);
	color: var(--text-clear);
}

.clientsList > .clientLetterLabel:first-of-type {
	margin-top: 0;
}

.clientLetterLabel > label {
	margin: 0;
}

.clientsList > .client {
	padding: 7px;
	margin-bottom: -1px;

	display: flex;

	border: 1px solid var(--border-light);

	cursor: pointer;
	transition: all .1s;
}

.clientsList > .client:hover {
	transform: scale(1.01);
	transition: all .1s;
}

.clientsList > .client:last-of-type {
	margin: 0;
}

.client > span:first-of-type {
	min-width: 90px;
}

.client > span.clientTag {
	width: 120px;

	margin-left: auto;

	flex-shrink: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	text-align: center;

	border-radius: var(--border-radius);
	color: var(--text-clear);
}

.clientTag.ended {
	background-color: var(--btn-close);
}

.clientTag.running {
	background-color: var(--main-color-light);
}

.clientTag.unknown {
	background-color: var(--detail-grey);
}

/*===============================================================================*/
/*================================ CLIENT SEARCH ================================*/
/*===============================================================================*/

.clientInfoContainer > .clientSearchContainer
{
	width: 35%;

	border-radius: var(--border-radius);
	background-color: var(--nav-background);

	box-shadow: var(--shadow-normal);
}

.clientSearchContainer > .clientInfoSearchContainer
{
	height: 100%;
	padding: 10px;

	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
}

.clientInfoSearchContainer > i,
.clientInfoSearchContainer > button
{
	height: 40px;
	width: 40px;
	padding: 0 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);

	font-size: 15px;

	background-color: var(--btn-secondary);
	color: var(--text-clear);
}

.clientInfoSearchContainer > button
{
	margin-right: 5px;
}

.clientInfoSearchContainer > input
{
	height: 40px;
	max-height: unset;
	width: 50%;
	min-width: 150px;
	margin-right: 5px !important;

	border-radius: 0 !important;

	background-color: rgba(255,255,255,0.1);

	border-top-right-radius: var(--border-radius) !important;
	border-bottom-right-radius: var(--border-radius) !important;

	border: none;
	color: var(--text-clear);
}

.clientInfoSearchContainer > input::placeholder
{
	color: var(--background-grey);
}

/*===============================================================================*/
/*=================================== CONTACT ===================================*/
/*===============================================================================*/

.contactMenu
{
	position: absolute;

	width: auto;
	max-width: 100%;
	top: 0;
	bottom: 0;
	right: 0;

	display: flex;
	justify-content: flex-end;

	z-index: 1003;
}

.contactMenu > .contactListContainer
{
	width: 500px;
	max-width: 100%;
	max-height: 100%;

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);
}

.contactListContainer > h1
{
	height: 50px;
	max-height: 50px;
	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	font-size: 15px;
	color: var(--text-clear);
	background-color: var(--main-color);
}

.contactListContainer > h1 > .btn
{
	margin-left: auto;
	padding: 0;
	height: auto;
}

.contactListContainer > .contactList
{
	height: calc(100% - var(--nav-bar-height));
	padding: 15px;

	list-style-type: none;

	overflow: auto;
}

.contactList > .contact
{
	border-radius: var(--border-radius);
	margin-bottom: 5px;
}

.contactList > .contact:last-of-type
{
	margin: 0;
}

.contact > .contactHeader
{
	height: 40px;
	display: flex;
	align-items: center;

	border-radius: var(--border-radius);

	background-color: var(--main-color-light);
}

.contact > .contactHeader > span
{
	padding: 10px;
	color: var(--text-clear);
}

.contact > .contactHeader > span:first-child
{
	min-width: 80px;
}

.contact > .contactHeader > span:last-of-type
{
	margin-left: auto;
}

.contact > .contactHeader > button
{
	height: 40px;
	width: 40px;
	padding: 10px;
	margin-left: 10px;

	border-radius: 0;
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	border-left: 1px solid var(--text-clear);
}

.contact > .contactHeader > button:hover
{
	background-color: var(--main-color);
	color: var(--text-clear) !important;
}

.contact > .contactHeader > span:first-child
{
	font-weight: bold;
	color: var(--nav-background);
}

.contact > .contactExpand
{
	position: relative;

	height: auto;
	width: 100%;
	padding: 10px;

	display: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	background-color: var(--background-white);

	border: 1px solid var(--border-light);
	border-top: 0;
}

.contactExpand > .form-group
{
	margin-bottom: 5px;

	display: flex;
	align-items: center;
}

.contactExpand > .form-group.textMode[role="hidden"]
{
	display: none;
}

.contactExpand > .form-group label
{
	flex-shrink: 0;
}

.contactExpand > .form-group > .contactExpandDoubleInput,
.contactExpand > .form-group > .contactExpandSingleInput
{
	width: 100%;

	display: flex;
	column-gap: 5px;
}

.contactExpand > .form-group.textMode > input,
.contactExpand > .form-group.textMode > .contactExpandDoubleInput > input
{
	width: auto;
	height: auto;
	margin: 0 !important;
	padding: 0;

	display: initial;

	border-radius: 0 !important;
	border: none;

	background-color: transparent;
	box-shadow: none;
}

.contactExpand > .form-group.textMode > input:not([type="checkbox"]),
.contactExpand > .form-group.editMode > input:not([type="checkbox"])
{
	width: 100%;
	display: initial;
}

.contactExpand > .form-group.editMode > .contactExpandDoubleInput > input
{
	width: 50%;
	display: initial;
}

.contactExpand > .form-group.editMode > .contactExpandSingleInput > input
{
	width: 100%;
}

.contactExpand > .contactBtnGroup
{
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.contactBtnGroup > button
{
	height: 25px;
	width: 25px;
	padding: 0;
}

/*===============================================================================*/
/*===================================== DOCS ====================================*/
/*===============================================================================*/

.documentsMenu
{
	position: absolute;

	width: auto;
	max-width: 100%;
	top: 0;
	bottom: 0;
	right: 0;

	display: flex;
	justify-content: flex-end;

	z-index: 1003;
}

.documentsMenu > .documentsListContainer
{
	width: 500px;
	max-width: 100%;
	max-height: 100%;

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);
}

.documentsListContainer > h1
{
	height: 50px;
	max-height: 50px;
	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	font-size: 15px;
	color: var(--text-clear);
	background-color: var(--main-color);
}

.documentsListContainer > h1 > .btn
{
	margin-left: auto;
	padding: 0;
	height: auto;
}

.documentsListContainer > .documentsList
{
	height: calc(100% - var(--nav-bar-height));
	padding: 15px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	grid-auto-rows: min-content;
	justify-content: space-between;
	column-gap: 15px;
	row-gap: 15px;

	overflow: auto;
}

.documentsList > h1
{
	grid-column: 1/-1;

	height: 50px;

	margin: 0;

	display: flex;
	align-items: center;

	font-size: 20px;
	font-weight: bold;
}

.documentsList > .document
{
	position: relative;
	height: 100px;
	width: 100%;

	border-radius: var(--border-radius);
	margin-bottom: 5px;

	transition: all .1s;
}

.documentsList > .document:last-of-type
{
	margin: 0;
}

.document:hover
{
	transform: scale(1.015);
	cursor: pointer;

	transition: all .1s;
}

.document > img
{
	height: 100%;
	width: 100%;

	object-fit: cover;
	object-position: center;

	border-radius: var(--border-radius);
}

.document > .doc
{
	height: 100%;
	width: 100%;
	padding: 5px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);

	background-color: var(--background-lightgrey);
}

.document > button
{
	position: absolute;

	height: 22px;
	width: 22px;
	padding: 0;

	bottom: 5px;
	right: 5px;
}

.doc > i
{
	font-size: 30px;
	margin-bottom: 5px;
}

.doc > span
{
	width: 100%;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*===============================================================================*/
/*============================== LIST DEVIS CLIENT ==============================*/
/*===============================================================================*/

.modalListDevisClientContent
{
	display: flex;
	flex-direction: column;
}

.modalListDevisClientContent > h1
{
	margin-bottom: 15px;

	font-size: 20px;
	font-weight: bold;
}

.modalListDevisClientContent > h1:first-of-type
{
	margin-top: 0;
}

.modalListDevisClientContent > p.noData
{
	padding: 10px;

	border: 1px solid var(--border-light);
	border-top: none;
}

.modalListDevisClientContent > .documentList
{
	width: 100%;
	padding: 10px;
	
	display: flex;
	align-items: center;

	border: 1px solid var(--border-light);
	border-top: none;
}

.modalListDevisClientContent > .documentList:nth-child(odd)
{
	background-color: var(--background-lightgrey);
}

.documentList.header
{
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border: none !important;

	color: var(--text-clear);
	background-color: var(--detail-darkgrey) !important;
}

.documentList.header > span
{
	font-size: 15px;
	font-weight: bold;
}

/*===============================================================================*/
/*================================= COMMENTAIRE =================================*/
/*===============================================================================*/

.commentsContainer
{
	position: absolute;

	height: 520px;
	width: 450px;

	bottom: var(--spacing);
	right: var(--spacing);

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);

	background-color: var(--background-white);

	box-shadow: var(--shadow-picture-viewer);
	z-index: 1005;
}

.commentsContainer > h1
{
	min-height: 40px;
	max-height: 40px;
	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);

	font-size: 15px;
}

.commentsContainer > h1 > span
{
	margin-left: 10px;
	font-size: 15px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.commentsContainer > h1 > button:last-of-type
{
	margin-left: auto;
}

.commentsContainer > .commentsList
{
	flex: 1;
	padding: 15px;

	display: flex;
	flex-direction: column-reverse;

	overflow: auto;
}

.commentsList > .form-group:first-child
{
	margin: 0;
}

.commentsList > .form-group
{
	display: flex;
}

.commentsList > .form-group > .appComment
{
	width: 70%;

	display: flex;
	flex-direction: column;
}

.appComment.appCommentRight
{
	margin-left: auto;
}

.appComment.appCommentLeft
{
	margin-right: auto;
}

.appComment > .appCommentHeader
{
	font-size: 12px;
	font-weight: normal;
}

.appComment > .appCommentText
{
	padding: 10px;
	margin: 0;

	border-radius: 20px;

	color: var(--text-clear);
	background-color: var(--main-color-light);
}

.appComment.appCommentRight > .appCommentHeader
{
	text-align: right;
}

.appComment.appCommentLeft > .appCommentHeader
{
	text-align: left;
}

.appComment.appCommentRight > .appCommentText
{
	text-align: right;

	border-radius: 20px;
	border-top-right-radius: 2px;
}

.appComment.appCommentLeft > .appCommentText
{
	text-align: left;

	border-radius: 20px;
	border-top-left-radius: 2px;
}

.commentsContainer > .commentsFooter
{
	flex-shrink: 0;
	padding: 15px;

	display: flex;
	align-items: center;

	border-top: 1px solid var(--border-light);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	background-color: var(--background-lightgrey);
}

.commentsFooter > textarea
{
	margin-right: 10px !important;

	resize: none;
}

.commentsFooter > button
{
	height: 100%;
}

/*===============================================================================*/
/*=============================== FREQUENCE AIRE ================================*/
/*===============================================================================*/

.modalFrequenceAireGroup > .frequenceAireGroup
{
	margin-bottom: var(--spacing);

	display: flex;
	flex-direction: column;
}

.frequenceAireGroup:last-of-type
{
	margin: 0;
}

.frequenceAireGroup > .frequenceAireGroupHeader
{
	width: 100%;
	padding: 10px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);
}

.frequenceAireGroupHeader > label
{
	margin: 0;
	margin-right: 10px;
}

.frequenceAireGroup > .frequenceAireGroupContent
{
	padding: 10px;

	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 10px;

	border: 1px solid var(--border-light);
	border-top: 0;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.frequenceAireGroupContent > label
{
	flex-shrink: 0;
	margin: 0;

	font-weight: 100;
}

.frequenceAireGroupContent > button
{
	height: 30px;
}

.frequenceAireGroupContent > img
{
	height: 25px;
}

/*===============================================================================*/
/*==================================== AIRES ====================================*/
/*===============================================================================*/

.clientGameAreaContainer
{
	flex: 1;
	display: flex;
	flex-direction: row;
}

.clientGameAreaDetail
{
	height: 100%;
	width: -webkit-fill-available;
	width: -moz-available;

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);

	background-color: var(--background-white);
	box-shadow: var(--shadow-normal);

	position: relative;
}

.clientGameAreaDetail > h1
{
	min-height: 50px;
	max-height: 50px;

	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);

	font-size: 15px;
}

.clientGameAreaDetail > h1 > span
{
	margin-left: 10px;
	font-size: 15px;
}

.clientGameAreaDetail > h1 > button
{
	height: 35px;
	width: 35px;
	padding: 0;

	margin-left: auto;
}

.clientGameAreaDetail > .clientGameAreaInfoContainer
{
	height: 100%;

	display: flex;
	flex-direction: row;
}

.clientGameAreaInfoContainer > .clientGameAreaListContainerList
{
	position: absolute;
	top: 50px;
	left: 0;

	height: calc(100% - 50px);
	width: 100%;
	padding: var(--spacing);

	display: flex;
	flex-direction: column;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	background: var(--background-white);

	z-index: 1002;
}

.clientGameAreaListContainerList > .clientGameAreaListeContainerListHeader
{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.clientGameAreaListeContainerListHeader > h1
{
	margin: 0;
	font-size: 17px;
	font-weight: bold;
}

.clientGameAreaListeContainerListHeader > .btn
{
	padding: 5px;
	font-size: 20px;
	color: #000000 !important;
	aspect-ratio: 1/1;
}

.clientGameAreaListContainerList > .clientGameAreaListeContainerListSearchMenu
{
	padding: var(--spacing) 0;
}

.clientGameAreaListeContainerListContent
{
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.clientGameAreaListeContainerListContent > .clientGameAreaListeContainerListItem
{
	height: 50px;
	width: 100%;
	margin-bottom: 2px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);
}

.clientGameAreaListeContainerListItem > .clientGameAreaListeContainerListItemImage
{
	height: 100%;
}

.clientGameAreaListeContainerListItem > .clientGameAreaListeContainerListItemImage > img
{
	height: 100%;
	width: 75px;
	object-fit: cover;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.clientGameAreaListeContainerListItem > .clientGameAreaListeContainerListItemInfo
{
	padding: 0 var(--spacing);

	display: flex;
	justify-content: space-between;
	flex: 1;
}

.clientGameAreaListeContainerListItemInfo > .clientGameAreaListeContainerListItemInfoTags
{
	display: flex;
	column-gap: var(--spacing);
}

.clientGameAreaListeContainerListItemInfoTags > .gameAreaTag
{
	width: fit-content;
    padding: 2px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--border-radius);
	color: var(--background-white);
}

.clientGameAreaListeContainerListItemInfoTags > .gameAreaTag > span
{
	margin: 0;
}

.clientGameAreaListeContainerListItem > .clientGameAreaListeContainerListItemBtns
{
	height: 100%;
	width: fit-content;
	flex-shrink: 0;
	aspect-ratio: 1/1;
}

.clientGameAreaListeContainerListItemBtns > .btn
{
	height: 100%;
	width: 100%;

	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.clientGameAreaInfoContainer > .clientGameAreaListContainer
{
	height: 100%;
	width: 270px;

	display: flex;
	flex-direction: column;

	border-bottom-left-radius: var(--border-radius);
	border-right: 1px solid var(--border-light);
}

.clientGameAreaListContainer > h1
{
	margin: 0;
	padding: 15px;
	padding-bottom: 7.5px;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.clientGameAreaListContainer > h1 > .clientGameAreaListContainerTop
{
	width: 100%;
	margin: 0;
	margin-bottom: 10px;

	display: flex;
	flex-direction: row;
	align-items: center;
}

.clientGameAreaListContainer > h1 > .clientGameAreaListContainerTop > span
{
	font-size: 17px;
	font-weight: bold;
}

.clientGameAreaListContainer > h1 > .clientGameAreaListContainerTop > button
{
	height: 20px;
	width: 20px;
	padding: 0;
	margin-left: var(--spacing-sm);
}

.clientGameAreaListContainer > h1 > .clientGameAreaListContainerTop > button:first-of-type
{
	margin-left: auto;
}

.clientGameAreaInfoContainer > .clientGameAreaGameDetail
{
	flex: 1;
	width: 100%;

	display: flex;
	flex-direction: column;

	position: relative;
}

.clientGameAreaGameDetail > .clientGameAreaMap
{
	height: 100%;
	width: 100%;
	position: absolute;

	display: flex;
	align-items: center;
	justify-content: center;

	border-bottom-right-radius: var(--border-radius);

	background-color: var(--background-lightgrey);

	z-index: 1001;
}

.clientGameAreaMapHide
{
	position: relative;

	height: 60px;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;

	color: var(--text-clear);
	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);

	font-size: 25px;

	cursor: default;
	pointer-events: painted;
	z-index: 1009;
}

.clientGameAreaMapHide > i:first-of-type
{
	position: absolute;
	left: 15px;
}

.clientGameAreaMapHide > i
{
	cursor: pointer;
}

.clientGameAreaMapNoData
{
	height: 100%;
	width: 100%;
	position: absolute;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--background-lightgrey);

	cursor: default;
	z-index: 1008;
}

.clientGameAreaMapNoData > img
{
	height: 200px;
	max-height: 100%;
}

.clientGameAreaListContainer > h1 > .btn
{
	margin-left: auto;
	padding: 0;
	height: auto;
}

.clientGameAreaGameDetail > .clientGameAreaInfosContainer
{
	height: auto;
	padding: 10px;

	display: flex;

	border-bottom: 1px solid var(--border-light);

	background-color: var(--background-lightgrey);
}

.clientGameAreaGameDetail > .clientGameAreaMaintenanceCalendarContainer
{
	height: 0px;
	padding: 10px;

	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	column-gap: var(--spacing);
	overflow: hidden;
}

/* ------------------ AIRE CONTAINERS ------------------ */

.clientGameAreaMaintenanceCalendarContainer > .clientGameAreaMaintenanceContainer,
.clientGameAreaMaintenanceCalendarContainer > .clientGameAreaCalendarContainer,
.clientGameAreaMaintenanceCalendarContainer > .clientGameAreaImagesTabContainer,
.clientGameAreaMaintenanceCalendarContainer > .clientGameAreaDocumentsTabContainer
{
	height: 100%;
	width: 100%;
	padding: 10px;
	overflow: auto;
}

.clientGameAreaMaintenanceCalendarContainer > .clientGameAreaDownloadToolbar {
	padding: 10px;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	column-gap: 5px;

	border: 1px solid var(--border-light);
	border-radius: 4px;

	background-color: var(--background-lightgrey);
	box-shadow: var(--shadow-small);
}

/* ------------------ AIRE IMGS ------------------ */

.clientGameAreaMaintenanceCalendarContainer > .clientGameAreaImagesTabContainer
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-auto-rows: 190px;
	justify-content: space-between;
	column-gap: 15px;
	row-gap: 15px;
}

.clientGameAreaImagesTabContainer > img
{
	display: block;

	height: 100%;
	width: 100%;

	object-fit: cover;
	object-position: center;

	transition: all .1s;
}

.clientGameAreaImagesTabContainer > img:hover
{
	transform: scale(1.01);
	cursor: pointer;

	transition: all .1s;
}

/* ------------------ AIRE DOCUMENTS ------------------ */

.clientGameAreaMaintenanceCalendarContainer > .clientGameAreaDocumentsTabContainer
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	grid-auto-rows: min-content;
	justify-content: space-between;
	column-gap: 10px;
	row-gap: 10px;
}

.clientGameAreaDocumentsTabContainer > button
{
	grid-column: 1/-1;
	width: 100%;
	margin-left: auto;
}

.clientGameAreaDocumentsTabContainer > p.noData
{
	background-color: var(--background-grey);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-light);
}

.clientGameAreaDocumentsTabContainer > h1
{
	grid-column: 1/-1;
	height: 50px;
	margin: 0;
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
}

.clientGameAreaDocumentsTabContainer > .aireDocument
{
	position: relative;
	height: 180px;
	width: 100%;

	border-radius: var(--border-radius);
	margin-bottom: 5px;

	transition: all .1s;
}

.clientGameAreaDocumentsTabContainer > .aireDocument:last-of-type
{
	margin: 0;
}

.clientGameAreaDocumentsTabContainer > .aireDocument:hover
{
	transform: scale(1.015);
	cursor: pointer;

	transition: all .1s;
}

.aireDocument > img
{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--border-radius);
}

.aireDocument > button
{
	position: absolute;
	height: 34px;
	width: 34px;
	padding: 0;
	bottom: 5px;
	right: 5px;
}

.aireDocument > .doc
{
	height: 100%;
	width: 100%;
	padding: 5px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);

	background-color: var(--background-lightgrey);
}

/* ------------------ AIRE MAINTENANCES ------------------ */

.clientGameAreaMaintenanceLegends
{
	display: flex;
	margin-bottom: var(--spacing);

	border-radius: var(--border-radius);

	border: 1px solid var(--border-light);
	background: var(--background-lightgrey);
}

.clientGameAreaMaintenanceLegends > .clientGameAreaMaintenanceLegendsContent
{
	display: flex;
}

.clientGameAreaMaintenanceLegendsContent:not(:first-of-type)
{
	margin-left: var(--spacing);
}

.clientGameAreaMaintenanceLegendsContent > label
{
	padding: 10px;
	margin: 0;

	color: var(--text-clear);
	background: var(--detail-darkgrey);
}

.clientGameAreaMaintenanceLegendsContent:first-of-type > label
{
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.clientGameAreaMaintenanceLegendsContent > .clientGameAreaMaintenanceLegendsDot
{
	padding: 0 10px;

	display: flex;
	align-items: center;
	column-gap: 5px;
}

.clientGameAreaMaintenanceLegendsDot > .dot
{
	height: 12px;
	width: 12px;

	border-radius: 50px;
}

.clientGameAreaMaintenanceContainer > .clientGameAreaMaintenanceList
{
	list-style-type: none;
}

.clientGameAreaMaintenanceList > .clientGameAreaMaintenanceListHeader
{
	height: 35px;
	width: 100%;
	padding: 0 5px;

	display: flex;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	color: var(--text-clear);
	background-color: var(--detail-darkgrey);
}

.clientGameAreaMaintenanceList > .clientGameAreaMaintenanceListRow
{
	height: 45px;
	width: 100%;
	padding: 0 5px;

	display: flex;

	border: 1px solid var(--border-light);
	border-top: none;

	background-color: var(--background-lightgrey);
}

.clientGameAreaMaintenanceList > .clientGameAreaMaintenanceListRow:last-of-type
{
	border-radius: var(--border-radius);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.clientGameAreaMaintenanceListHeader > span
{
	position: relative;

	flex: 1;

	line-height: 35px;
	text-align: center;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clientGameAreaMaintenanceListRow > span
{
	position: relative;

	flex: 1;

	line-height: 45px;
	text-align: center;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.clientGameAreaMaintenanceListRow > span.overflow
{
	white-space: inherit;
	overflow: inherit;
	text-overflow: inherit;
}

.clientGameAreaMaintenanceListHeader > span.clientGameAreaMaintenanceListComment,
.clientGameAreaMaintenanceListRow > span.clientGameAreaMaintenanceListComment
{
	max-width: 180px;

	position: relative;
	text-align: left;
}

.clientGameAreaMaintenanceListRow > span > .clientGameAreaMaintenanceListRowDot
{
	height: 12px;
	width: 12px;

	border-radius: 50px;
}

.clientGameAreaMaintenanceListRow button
{
	height: 34px;
	width: 34px;
	padding: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 17px;
}

.clientGameAreaMaintenanceListRow > span > .clientGameAreaMaintenanceListDevis
{
	position: absolute;

	height: auto;
	max-height: 200px;
	width: 350px;
	top: calc(100% + 10px);
	right: calc(0px - 5px);
	padding: 10px;

	border-radius: var(--border-radius);
	border: 1px solid var(--border-light);

	background-color: var(--background-lightgrey);

	box-shadow: var(--shadow-small);

	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1;
}

.clientGameAreaMaintenanceListDevis > .clientGameAreaMaintenanceListDevisBtnGroup
{
	margin-bottom: 5px;
	display: flex;
}

.clientGameAreaMaintenanceListDevisBtnGroup:last-of-type
{
	margin: 0;
}

.clientGameAreaMaintenanceListDevisBtnGroup > button
{
	height: 34px;
	width: 100%;

	margin: 0 !important;
}

.clientGameAreaMaintenanceListDevisBtnGroup > button:last-of-type
{
	width: 34px;
	margin-left: 5px !important;

	flex-shrink: 0;
}

.clientGameAreaMaintenanceListDevisBtnGroup > button.devisValidated
{
	background-color: var(--background-green) !important;
}

.clientGameAreaMaintenanceListDevisBtnGroup > button.devisRefused
{
	background-color: var(--btn-close) !important;
}

.clientGameAreaMaintenanceListDevisBtnGroup > button.devisTravaux
{
	color: #1E391D !important;
	background-color: var(--background-limegreen) !important;
}

.clientGameAreaMaintenanceListDevisBtnGroup > button > span
{
	margin-left: 5px;
}

/* ------------------ AIRE INFOS ------------------ */

.clientGameAreaInfos
{
	height: 100%;
	width: 100%;
	padding-right: 15px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.clientGameAreaInfos label
{
	width: auto;
	min-width: inherit;

	margin: 0;
	margin-right: 5px;
}

.clientGameAreaInfos span
{
	margin: 0;
	margin-right: 15px;

	display: flex;
	align-items: center;
}

/* ------------------ AIRE TOOLBAR ------------------ */

.clientGameAreaToolbar
{
	height: 40px;
	width: 100%;

	padding: 0 10px;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	background-color: var(--background-lightgrey);
	border-bottom: 1px solid var(--border-light);
}

.clientGameAreaToolbar > button
{
	height: 30px;
	padding: 0 12px;
}

.clientGameAreaToolbar > button:not(:first-of-type)
{
	margin-left: 5px;
}

/* ------------------ AIRE INFOS IMGS ------------------ */

.clientGameAreaImagesContainer
{
	width: auto !important;
	height: 100%;

	display: flex;
	flex-direction: row;
	align-items: center;
}

.clientGameAreaImagesContainer > .clientGameAreaImages
{
	max-width: 220px;

	padding: 10px 0;
	margin-right: 5px;

	display: flex;
	flex-direction: row;
	align-items: center;

	column-gap: 5px;

	overflow: overlay;
}

.clientGameAreaImages::-webkit-scrollbar
{
	height: 3px;
}

.clientGameAreaImages > div
{
	position: relative;
}

.clientGameAreaImages > div > img
{
	height: 70px;

	max-height: 70px;
	min-width: 70px;
	max-width: 70px;

	object-fit: cover;
	object-position: center;

	border-radius: var(--border-radius);

	cursor: pointer;
}

.clientGameAreaImages > div > button
{
	position: absolute;
	
	height: auto;
	
	padding: 3px 5px;
	right: 5px;
	bottom: 5px;
	font-size: 11px;

	opacity: 0;
	pointer-events: none;
	transition: all .1s;
}

.clientGameAreaImages > div:hover > button
{
	opacity: 1;
	pointer-events: all;
	transition: all .1s;
}

.clientGameAreaImagesContainer > .clientGameAreaImagesAdd
{
	position: relative;

	height: 70px;
	width: 70px;

	max-height: 70px;
	max-width: 70px;

	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--border-radius);
	border: 1px dashed var(--detail-darkgrey);

	color: var(--detail-darkgrey);

	cursor: pointer;

	transition: all .1s;
}

.clientGameAreaImagesAdd:hover
{
	border: 1px dashed var(--detail-heavygrey);
	color: var(--detail-heavygrey);

	transition: all .1s;
}

.clientGameAreaImagesAdd > input
{
	pointer-events: none;
}

.clientGameAreaImagesAdd > .customProgress
{
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;

	background: var(--background-lightgrey);
}

.customProgress > .loader
{
	border: 7px solid var(--main-color-light);
	border-top: 7px solid var(--background-lightgrey);
	border-radius: 50%;
	width: 50%;
	height: 50%;
	animation: spin 2s linear infinite;
}

@keyframes spin
{
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.clientGameAreaInfos > .form-group
{
	margin-bottom: 0px;
}

.clientGameAreaInfos > .form-group:last-of-type
{
	margin: 0;
}

.clientGameAreaList
{
	height: 100%;
	max-height: calc(100vh - 300px);
	padding: 15px;
	padding-top: 7.5px;

	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 5px;
	align-content: flex-start;

	overflow: overlay;
	overflow-x: hidden;
}

.clientGameAreaList > .clientGameArea
{
	height: 170px;
	width: 100%;
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	border-radius: var(--border-radius);

	color: var(--text-clear);
	background-color: var(--background-white);

	transition: all .1s;
}

.clientGameArea:hover
{
	transform: scale(1.015);

	transition: all .1s;
}

.clientGameArea > img
{
	height: 100%;
	width: 100%;

	border-radius: var(--border-radius);
	border-bottom: 0;

	object-fit: cover;
	object-position: center;

	filter: grayscale(1) opacity(0.7);

	z-index: 0;

	transition: filter .1s;
}

.clientGameArea > .gameAreaTagContainer
{
	position: absolute;

	top: 5px;
	right: 5px;
	left: 5px;

	display: flex;
	justify-content: flex-end;
	column-gap: 5px;

	pointer-events: none;

	z-index: 1;
}

.clientGameArea > .gameAreaTagContainer > .gameAreaTag
{
	min-width: 50px;
	width: fit-content;
	padding: 2px 12px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	border-radius: var(--border-radius);
	background-color: var(--btn-close);
}

.gameAreaTag.good
{
	background-color: var(--background-green) !important;
}

.gameAreaTag.warning
{
	background-color: var(--ajs-warning) !important;
}

.gameAreaTag.error
{
	background-color: var(--btn-close) !important;
}

.gameAreaTag.goodWithRemark
{
	background-color: var(--main-color-light) !important;
}

.gameAreaTag > span
{
	margin-left: 5px;
}



.clientGameArea.selected > img
{
	filter: grayscale(0) opacity(1);
	transition: filter .1s linear;
}

.clientGameArea > img.gameAreaNoPicture
{
	object-fit: none;

	border: 1px solid var(--border-light);
	border-bottom: 0;

	background-color: var(--background-lightgrey);
}

.clientGameArea > .clientGameAreaHeader
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
	display: flex;
	flex-direction: column;
	border-top: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 100%);
	border-radius: var(--border-radius);
}

.clientGameArea > .clientGameAreaHeader > i
{
	position: absolute;

	height: 15px;
	width: 15px;
	top: -5px;
	left: -5px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 20px;
	font-size: 7px;

	color: var(--text-clear);
	background-color: var(--ajs-error);
}

.clientGameArea > .clientGameAreaHeader > span
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.clientGameArea > .clientGameAreaHeader > span:first-of-type
{
	font-weight: bold;
	text-transform: uppercase;
}

.clientGameArea > .gameAreaHoverButton
{
	position: absolute;

	height: 100%;
	width: 100%;
	top: 0;
	left: 0;

	display: none;

	border-radius: var(--border-radius);

	background-color: rgba(0,0,0,0.3);

	cursor: pointer;
	z-index: 1;
}

.clientGameArea:hover > .gameAreaHoverButton
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.gameAreaHoverButton > i
{
	font-size: 20px;
}

/*===============================================================================*/
/*===================================== JEUX ====================================*/
/*===============================================================================*/

.clientGameAreaContainer > .clientGameListContainer
{
	flex-shrink: 0;

	height: 100%;
	width: 320px;
	margin-left: var(--spacing);

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);
	background-color: var(--background-white);

	box-shadow: var(--shadow-normal);
}

@media screen and (max-width: 1440px)
{
	.clientGameAreaContainer > .clientGameListContainer
	{
		width: 280px;
	}
}

.clientGameListContainer > h1
{
	min-height: 50px;
	max-height: 50px;

	margin: 0;
	padding: 10px;

	display: flex;
	flex-direction: row;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--background-yellow);
	color: var(--text-clear);

	font-size: 15px;
}

.clientGameListContainer > h1 > span
{
	margin-left: 10px;
	font-size: 15px;
}

.clientGameListContainer > h1 > button
{
	height: 20px;
	width: 20px;
	padding: 0;

	margin-left: auto;
}

.clientGameListContainer > .clientGameList
{
	height: 100%;
	max-height: calc(100vh - 200px);
	width: 100%;
	padding: 15px;
	margin: 0;

	flex-direction: row;
	align-items: center;

	overflow: auto;
}

.clientGameList > .clientGameAreaGame
{
	position: relative;

	height: 50px;
	width: 100%;
	margin-bottom: 5px;

	display: flex;
	flex-direction: row;
	align-items: center;

	border-radius: var(--border-radius);

	background-color: var(--background-yellow-light);

	cursor: pointer;
	transition: all .1s;
}

.clientGameList > .clientGameAreaGame.inactif
{
	background-color: var(--detail-darkgrey);
}

.clientGameAreaGame:hover
{
	transform: scale(1.015);

	transition: all .1s;
}

.clientGameAreaGame.selected
{
	background-color: var(--background-yellow);
}

.clientGameAreaGame.inactif.selected
{
	background-color: var(--detail-heavygrey);
}

.clientGameAreaGame:last-of-type
{
	margin: 0;
}

.clientGameAreaGame > img
{
	height: 50px;
	width: 50px;
	min-width: 50px;
	object-fit: cover;

	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.clientGameAreaGame > img.gameNoPicture
{
	object-fit: none;
	border: 1px solid var(--border-light);
	background-color: var(--background-lightgrey);
}

.clientGameAreaGame > span
{
	padding: 5px;
	padding-right: 20px;

	color: var(--text-clear);
}

.clientGameAreaGame > .clientGameAreaGameBadgeContainer
{
	position: absolute;

	width: 25px;
	height: 25px;

	right: 0;
	top: 0;

	transform: translateX(25%) translateY(-15%);
}

.clientGameAreaGameBadgeGood,
.clientGameAreaGameBadgeGoodWithRemark,
.clientGameAreaGameBadgeHalf,
.clientGameAreaGameBadgeBad
{
	height: 100%;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 11px;
	color: var(--text-clear);

	border: 2px solid var(--background-white);
	border-radius: 50px;
}

.clientGameAreaGameBadgeGood
{
	background-color: var(--background-green);
}

.clientGameAreaGameBadgeGoodWithRemark
{
	background-color: var(--main-color-light);
}

.clientGameAreaGameBadgeHalf
{
	background-color: var(--ajs-warning);
}

.clientGameAreaGameBadgeBad
{
	background-color: var(--btn-close);
}

.clientGameDetail
{
	position: absolute;

	height: 100%;
	width: 100%;

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);
	background-color: var(--background-white);

	z-index: 1002;
}

.clientGameDetail > h1
{
	min-height: 50px;
	max-height: 50px;

	margin: 0;
	padding: 10px;

	display: flex;
	flex-direction: row;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--background-yellow);
	color: var(--text-clear);

	font-size: 15px;
}

.clientGameDetail > h1 > span
{
	margin-left: 10px;
	font-size: 15px;
}

.clientGameDetail > h1 > button
{
	height: 20px;
	width: 20px;
	padding: 0;

	margin-left: auto;
}

.clientGameDetail > .clientGameDetailInfosContainer
{
	height: 170px;
	padding: 10px;

	display: flex;
	align-items: center;

	background-color: var(--background-lightgrey);
	border-bottom: 1px solid var(--border-light);
}

.clientGameDetailInfosContainer > .clientGameInfos
{
	height: 100%;
	width: 25%;
	margin-right: 15px;
}

.clientGameInfos > .form-group
{
	margin-bottom: 5px;
}

.clientGameDetailInfosContainer > .clientGameInfosBtnGroup
{
	height: 100%;
	width: auto;
	margin-left: 15px;

	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 5px;
}

.clientGameDetailInfosContainer > .clientGameImagesContainer
{
	width: auto !important;
	height: 100%;
	margin-left: auto;

	display: flex;
	flex-direction: row;
	align-items: center;
}

.clientGameImagesContainer > .clientGameImages
{
	max-width: 220px;

	padding: 10px 0;
	margin-right: 5px;

	display: flex;
	flex-direction: row;
	align-items: center;

	column-gap: 5px;

	overflow: overlay;
}

.clientGameImages::-webkit-scrollbar
{
	height: 3px;
}

.clientGameImages > div
{
	position: relative;
}

.clientGameImages > div > img
{
	height: 70px;

	max-height: 70px;
	min-width: 70px;
	max-width: 70px;

	object-fit: cover;
	object-position: center;

	border-radius: var(--border-radius);

	cursor: pointer;
}

.clientGameImages > div > button
{
	position: absolute;
	
	height: auto;
	
	padding: 3px 5px;
	right: 5px;
	bottom: 5px;
	font-size: 11px;

	opacity: 0;
	pointer-events: none;
	transition: all .1s;
}

.clientGameImages > div:hover > button
{
	opacity: 1;
	pointer-events: all;
	transition: all .1s;
}

.clientGameImages > img
{
	height: 70px;

	max-height: 70px;
	min-width: 70px;
	max-width: 70px;

	object-fit: cover;
	object-position: center;

	border-radius: var(--border-radius);

	cursor: pointer;
}

.clientGameImagesContainer > .clientGameImagesAdd
{
	position: relative;

	height: 70px;
	width: 70px;

	max-height: 70px;
	max-width: 70px;

	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--border-radius);
	border: 1px dashed var(--detail-darkgrey);

	color: var(--detail-darkgrey);

	cursor: pointer;

	transition: all .1s;
}

.clientGameImagesAdd:hover
{
	border: 1px dashed var(--detail-heavygrey);
	color: var(--detail-heavygrey);

	transition: all .1s;
}

.clientGameImagesAdd > input
{
	pointer-events: none;
}

.clientGameImagesAdd > .customProgress
{
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;

	background: var(--background-lightgrey);
}

/* ------------------- GAME TOOLBAR ------------------- */

.clientGameDetailToolbar
{
	height: 40px;
	width: 100%;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	background-color: var(--background-lightgrey);
	border-bottom: 1px solid var(--border-light);
}

.clientGameDetailToolbar > button
{
	height: 30px;
	padding: 0 12px;
	margin-left: 5px;
}

/* ------------------- GAME DOCUMENTS ------------------- */

.clientGameDetail > .clientGameJeuxDocsContainer
{
	padding: 10px;
	flex: 1;
	display: flex;
	flex-direction: column;
	column-gap: var(--spacing);

	overflow: auto;
}

.clientGameJeuxDocsContainer > .clientGameDocumentsTabContainer
{
	height: fit-content;
	width: 100%;
	padding: 15px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	grid-auto-rows: min-content;
	justify-content: space-between;
	column-gap: 15px;
	row-gap: 15px;
}

.clientGameDocumentsTabContainer > p.noData
{
	background-color: var(--background-grey);
	border-radius: var(--border-radius);
	border: 1px solid var(--border-light);
}

.clientGameDocumentsTabContainer > button
{
	grid-column: 1/-1;
	width: 100%;
	margin-left: auto;
}

.clientGameDocumentsTabContainer > h1
{
	grid-column: 1/-1;
	height: 50px;
	margin: 0;
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
}

.clientGameDocumentsTabContainer > .jeuxDocument
{
	position: relative;
	height: 180px;
	width: 100%;

	border-radius: var(--border-radius);
	margin-bottom: 5px;

	transition: all .1s;
}

.clientGameDocumentsTabContainer > .jeuxDocument:last-of-type
{
	margin: 0;
}

.clientGameDocumentsTabContainer > .jeuxDocument:hover
{
	transform: scale(1.015);
	cursor: pointer;

	transition: all .1s;
}

.jeuxDocument > img
{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--border-radius);
}

.jeuxDocument > .doc
{
	height: 100%;
	width: 100%;
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);
	background-color: var(--background-lightgrey);
}

.jeuxDocument > button
{
	position: absolute;
	height: 34px;
	width: 34px;
	padding: 0;
	bottom: 5px;
	right: 5px;
}

/*===============================================================================*/
/*============================= POINTS MAINTENANCES =============================*/
/*===============================================================================*/

.modalAddPointMaintenanceContainer
{
	height: auto;
	display: flex;
	flex-direction: column;
}

.modalAddPointMaintenanceContainer > h1
{
	min-height: 50px;
	max-height: 50px;
	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);
	font-size: 15px;
}

.modalAddPointMaintenanceContainer > .modalAddPointMaintenanceList
{
	padding: 15px;

	display: grid;
	grid-template-columns: repeat(4, minmax(150px, 1fr) );
	justify-content: space-between;
	gap: 10px;

	border: 1px solid var(--border-light);
	border-top: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.modalAddPointMaintenanceList > .modalPointMaintenance,
.modalTypesJeuxPoitsMaintenancesList > .typesJeuxPointMaintenanceDrag,
.modalTypesJeuxTypeMaintenance > .typesJeuxPointMaintenance
{
	width: 100%;
	padding: 10px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	border-radius: var(--border-radius);

	color: var(--text-clear);
	background-color: var(--main-color-light);
}

.modalPointMaintenance > label,
.typesJeuxPointMaintenanceDrag > label,
.typesJeuxPointMaintenance > label
{
	margin: 0;
}

.typesJeuxPointMaintenanceDrag > label > img
{
	margin-left: 5px;
	width: 17px;

	filter:invert(100%) sepia(0%) saturate(7493%) hue-rotate(111deg) brightness(93%) contrast(111%);
}

.typesJeuxPointMaintenanceDrag > label > i.fa-tools
{
	margin-left: 5px;
	width: 17px;
}

.modalPointMaintenance .modalPointMaintenanceCriticite,
.typesJeuxPointMaintenanceDrag .typesJeuxPointMaintenanceCriticite,
.typesJeuxPointMaintenance .typesJeuxPointMaintenanceCriticite
{
	height: 35px;
	width: 35px;

	margin-right: 5px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--border-radius);

	font-weight: bold;

	color: var(--btn-primary) !important;
	background-color: var(--background-white);
}

/*===============================================================================*/
/*================================== TYPES JEUX =================================*/
/*===============================================================================*/

.modalTypesJeuxContainer
{
	flex: 1;
	display: flex;
}

.modalTypesJeuxContainer > .modalTypesJeuxListContainer,
.modalTypesJeuxContainer > .modalTypesJeuxTypeMaintenanceContainer
{
	flex: 1;
	max-width: 300px;

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);
}

.modalTypesJeuxContainer > .modalTypesJeuxInfoContainer
{
	flex: 1;
	margin: 0 15px;

	display: flex;
	flex-direction: column;
}

.modalTypesJeuxListContainer > h1,
.modalTypesJeuxInfoContainer > h1,
.modalTypesJeuxTypeMaintenanceContainer > h1
{
	min-height: 50px;
	max-height: 50px;
	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);

	font-size: 15px;
}

.modalTypesJeuxListContainer > .modalTypesJeuxList,
.modalTypesJeuxTypeMaintenanceContainer > .modalTypesJeuxPoitsMaintenancesList
{
	flex: 1;

	padding: 15px;

	border: 1px solid var(--border-light);
	border-top: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.modalTypesJeuxList > .modalTypesJeux
{
	position: relative;
	margin-bottom: 5px;

	display: flex;
	align-items: center;

	border-radius: var(--border-radius);

	font-weight: bold;

	color: var(--text-clear);
	background-color: var(--background-yellow);

	transition: all .1s;
}

.modalTypesJeux:hover
{
	transform: scale(1.02);
	transition: all .1s;
}

.modalTypesJeux > span
{
	padding: 10px;

	color: var(--text-clear);
}

.modalTypesJeux > button
{
	height: 30px;
	width: 30px;
	padding: 0;

	margin-right: 5px;

	border-radius: var(--border-radius);
}

.modalTypesJeux > button.large
{
	height: 40px;
	width: 40px;
	padding: 10px;

	margin: 0;

	border-radius: var(--border-radius);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;

	border-left: 1px solid var(--text-clear);
}

.modalTypesJeux > button:first-of-type
{
	margin-left: auto !important;
}

.modalTypesJeuxInfo
{
	padding: 15px;

	border: 1px solid var(--border-light);
	border-top: 0;
	border-bottom: 0;
}

.modalTypesJeuxTypeMaintenance
{
	flex: 1;

	padding: 15px;

	border: 1px solid var(--border-light);
	border-top: 0;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 15px;

	position: relative;

	transition: border .05s;
}

.modalTypesJeuxTypeMaintenance.dragStart
{
	border-radius: var(--border-radius);
	border: 2px dashed var(--detail-darkgrey);

	transition: border .05s;
}

.modalTypesJeuxTypeMaintenance.dragStart:before
{
	content: '+';

	position: absolute;

	height: 100%;
	width: 100%;
	top: 0;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 45px;
	font-weight: bold;

	color: var(--detail-darkgrey);
}

.modalTypesJeuxTypeMaintenance > .typesJeuxPointMaintenance
{
	height: 55px;
	width: 230px;
	margin-bottom: 10px;
}

.typesJeuxPointMaintenance > img
{
	width: 17px;
	margin-right: 5px;

	filter: invert(100%) sepia(0%) saturate(7493%) hue-rotate(111deg) brightness(93%) contrast(111%);
}

.typesJeuxPointMaintenance > i.fa-tools
{
	width: 17px;
	margin-right: 5px;
}

.typesJeuxPointMaintenance > .typesJeuxPointMaintenanceCriticiteContainer
{
	margin-left: auto;

	display: flex;
}

.modalTypesJeuxTypeMaintenance.dragStart > .typesJeuxPointMaintenance
{
	background-color: var(--detail-darkgrey);
}

#modalTypesJeuxInfoDesc
{
	text-align: justify;
}

.typesJeuxPointMaintenanceDrag
{
	margin-bottom: 5px;
}

.typesJeuxPointMaintenanceDrag.ui-draggable-dragging
{
	width: 300px;
}

.typesJeuxPointMaintenanceGrip
{
	cursor: grab;
}

/*===============================================================================*/
/*============================== MODAL MAINTENANCE ==============================*/
/*===============================================================================*/

#modal-info-maintenance > .modal-dialog > .modal-content > .modal-body
{
	padding: 0;
}

.modalMaintenanceHeader
{
	flex-shrink: 0;

	height: 200px;
	padding: 10px;

	display: flex;

	background-color: var(--background-lightgrey);
	border-bottom: 1px solid var(--border-light);
}

.modalMaintenanceHeader > fieldset
{
	width: 100%;
	margin-right: 10px;

	display: flex;
	align-items: center;

	border: 1px solid var(--border-light);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	background-color: var(--background-white);
}

.modalMaintenanceHeader > .fieldsetLarge
{
	width: 100%;
}

.modalMaintenanceHeader > .fieldsetSmall
{
	width: 60%;
}

.modalMaintenanceHeader > fieldset > legend
{
	padding: 5px;
	margin: 0px;

	font-size: 15px;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border: none;

	color: var(--text-clear);
	background-color: var(--main-color);
}

.modalMaintenanceHeader > fieldset > .fieldsetContent
{
	flex-shrink: 0;

	height: 100%;
	width: 100%;
	padding: 10px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.fieldsetContent > .fieldsetRow
{
	height: 50%;
	width: 100%;

	display: flex;
	align-items: center;

	border-bottom: 1px solid var(--border-light);
}

.fieldsetContent > .fieldsetRow.fullHeight
{
	height: 100%;
}

.fieldsetContent > .fieldsetRow:last-of-type
{
	border: none;
}

.fieldsetRow > .form-group
{
	width: 25%;
	margin: 0;

	display: flex;
	flex-direction: column;
}

.fieldsetContent > .fieldsetRow.fullHeight > .form-group
{
	height: 100%;
}

.fieldsetRow > .form-group > label,
.fieldsetRow > .form-group > .inline-row > label
{
	width: auto;

	font-weight: 100;
	margin: 0;
}

.fieldsetRow > .form-group > .inline-row > label
{
	margin-right: 5px;
	text-align: center;
}

.fieldsetRow > .form-group > label:first-of-type,
.fieldsetRow > .form-group > .inline-row > label:first-of-type
{
	font-weight: bold;
}

.fieldsetContent > textarea
{
	height: 100%;
	width: 100%;
	padding: 5px;

	border: 1px solid var(--border-light);
	background-color: transparent;

	resize: none;
}

.fieldsetContent > button
{
	height: 100%;
	margin-left: 10px;
}

.fieldsetContent > .modalMaintenanceHeaderLabelTitle
{
	font-weight: bold;

	margin-right: 5px;
}

.modalMaintenanceJeuContainer {
	height: calc(100% - 200px);

	display: flex;
	flex-direction: row;
}

.modalMaintenanceImgsContainer {
	display: flex;
	flex-direction: column;
}

.modalMaintenanceJeuContainer > .modalMaintenanceJeuList
{
	height: 100%;

	width: 400px;
	padding: 10px;
	margin: 0;

	border-right: 1px solid var(--border-light);

	overflow: auto;
}

.modalMaintenanceJeuList > .maintenanceJeuItem
{
	min-height: 55px;
	height: auto;
	width: 100%;
	margin-bottom: 5px;

	display: flex;
	flex-direction: row;
	align-items: stretch;

	border-radius: var(--border-radius);
	background-color: var(--background-yellow);
}

.maintenanceJeuItem.unselect
{
	background-color: var(--detail-grey);
}

.maintenanceJeuItem.itemGood
{
	background-color: var(--background-green);
}

.maintenanceJeuItem.itemGoodWithRemark
{
	background-color: var(--main-color-light);
}

.maintenanceJeuItem.itemHalf
{
	background-color: var(--ajs-warning);
}

.maintenanceJeuItem.itemBad
{
	background-color: var(--btn-close);
}

.maintenanceJeuItem.itemNone
{
	background-color: var(--detail-darkgrey);
}

.maintenanceJeuItem > img
{
	width: 70px;

	object-fit: cover;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}

.maintenanceJeuItem > span
{
	padding: 10px;
	color: var(--text-clear);
}

.maintenanceJeuItem > button
{
	height: auto;
	margin-left: auto;

	border-top-left-radius: 0;
	border-bottom-left-radius: 0;

	background-color: rgba(0,0,0,.05);
	transition: all .1s;
}

.maintenanceJeuItem > button:hover
{
	background: rgba(0,0,0,0.1);
	filter: none;
	transition: all .1s;
}

.modalMaintenanceJeuContainer > .modalMaintenanceJeuInfo
{
	position: relative;

	flex: 1;

	display: flex;
	flex-direction: column;
}

.modalMaintenanceJeuContainer > .modalTravauxJeuInfo
{
	position: relative;
	padding: 10px;
	flex: 1;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	grid-gap: 10px;

	overflow: auto;
}

.modalTravauxJeuInfo > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.modalMaintenanceJeuInfo > .modalMaintenanceHideArea,
.modalTravauxJeuInfo > .modalMaintenanceHideArea
{
	position: absolute;

	height: 100%;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: var(--background-grey);

	z-index: 2;
}

.modalMaintenanceHideArea > img
{
	height: 50%;
}

.modalLavageImgs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

.modalLavageImgs > img {
	width: calc((100% / 5) - ((10px * 4) / 5));
	aspect-ratio: 16/9;
	object-fit: cover;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------------- */

.modalMaintenanceJeuInfo > .modalMaintenanceImgContainer
{
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	padding: 10px;

	background-color: var(--background-white);

	z-index: 1;
}

.modalMaintenanceJeuInfo > .modalMaintenanceImgContainer#modalMaintenanceAireImgContainer
{
	z-index: 3;
}

.modalMaintenanceImgContainer > .modalMaintenanceImgContainerHeader
{
	height: 50px;

	display: flex;
	align-items: center;
}

.modalMaintenanceImgContainerHeader > h1
{
	width: 100%;
	margin: 0;

	font-size: 20px;
}

.modalMaintenanceImgContainer > .modalMaintenanceImgs
{
	height: calc(100% - 50px);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-auto-rows: 190px;
	justify-content: space-between;
	column-gap: 15px;
	row-gap: 15px;
}

.modalMaintenanceImgs > .modalMaintenanceImgsContainer {
	position: relative;
	height: 100%;
	width: 100%;
}

.modalMaintenanceImgsContainer > img
{
	height: 100%;
	width: 100%;

	object-fit: cover;
	object-position: center;

	transition: all .1s;
}

.modalMaintenanceImgs > img:hover
{
	transform: scale(1.01);

	cursor: pointer;

	transition: all .1s;
}

.modalMaintenanceImgsContainer > button {
	position: absolute;
	bottom: 8px;
	right: 8px;
}

.modalMaintenanceImgContainer > .modalMaintenancePanelContainer
{
	height: calc(100% - 50px);

	display: flex;
	flex-direction: row;
	column-gap: 10px;
}

.modalMaintenancePanelContainer > .modalMaintenanceImgsPanel
{
	padding: 10px;

	width: 50%;

	border: 1px solid var(--border-light);
	border-radius: var(--border-radius);
}

.modalMaintenanceImgsPanel > h1
{
	height: 35px;

	margin: 0;
	font-size: 20px;
}

.modalMaintenanceImgsPanel > .modalMaintenanceImgsPanelContainer
{
	height: calc(100% - 35px);

	display: flex;
	flex-wrap: wrap;
	column-gap: 8px;
	row-gap: 8px;

	overflow-y: auto;
	overflow-x: hidden;
}

.modalMaintenanceImgsPanelContainer > .modalMaintenanceImgsPanelContainerColumn {
	flex: 1;

	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.modalMaintenanceImgsPanelContainerColumn > .modalMaintenanceImgsPanelContainerImg {
	position: relative;
	width: 100%;
}

.modalMaintenanceImgsPanelContainerImg > img
{
	width: 100%;

	object-fit: cover;
	object-position: center;

	transition: all .1s;
}

.modalMaintenanceImgsPanelContainerImg > button {
	position: absolute;
	bottom: 8px;
	right: 8px;
}

.modalMaintenanceImgsPanelContainerColumn > img:hover
{
	transform: scale(1.01);

	cursor: pointer;

	transition: all .1s;
}

/* -------------------------------------------------------------------------------- */

.modalMaintenanceJeuInfo > .modalMaintenanceJeuHeader
{
	flex-shrink: 0;
	height: 150px;
	padding: 10px;

	display: flex;

	border-bottom: 1px solid var(--border-light);

	background-color: var(--background-white);
}

.modalMaintenanceJeuHeader > fieldset
{
	width: 50%;
	margin-right: 10px;

	display: flex;
}

.modalMaintenanceJeuHeader > fieldset > legend
{
	padding: 5px;
	margin: 0;

	font-size: 15px;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border: none;

	color: var(--text-clear);
	background-color: var(--background-yellow);
}

.modalMaintenanceJeuHeader > fieldset > .fieldsetContent
{
	flex-shrink: 0;
	width: 100%;
	padding: 10px;

	display: flex;
	justify-content: space-around;

	border: 1px solid var(--border-light);
	border-top: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.fieldsetContent > .modalMaintenanceJeuHeaderLabelTitle
{
	font-weight: bold;
	margin-right: 5px;
}

.fieldsetContent > .fieldsetRow > .form-group
{
	width: 33.33%;
}

.fieldsetContent > .fieldsetRow > .form-group.half
{
	width: 50%;
}

.modalMaintenanceJeuInfo > .modalMaintenanceJeuControlsList
{
	padding: 10px;

	overflow: auto;
}

.modalMaintenanceJeuControlsList > li
{
	width: 100%;
	margin-bottom: 5px;
	padding: 10px;

	display: flex;
	align-items: center;

	border-radius: var(--border-radius);
	border: 1px solid var(--border-light);

	background-color: var(--background-lightgrey);
}

.modalMaintenanceJeuControlsList > li > label
{
	margin: 0;
	margin-left: 10px;
	font-size: 15px;
}

.modalMaintenanceJeuControlsList > li > span
{
	height: 35px;
	width: 45px;
	margin: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	color: var(--text-clear);
}

.modalMaintenanceJeuControlsList > li > span.maintenancePointGood
{
	margin: 0;
	margin-left: auto;

	border-right: 1px solid var(--background-white);

	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);

	background-color: var(--background-green);

	transition: filter .1s;
}

.modalMaintenanceJeuControlsList > li > span.maintenancePointGoodWithRemark
{
	margin: 0;

	border-right: 1px solid var(--background-white);

	background-color: var(--main-color-light);

	transition: filter .1s;
}

.modalMaintenanceJeuControlsList > li > span.maintenancePointHalf
{
	margin: 0;

	border-right: 1px solid var(--background-white);

	background-color: var(--ajs-warning);

	transition: filter .1s;
}


.modalMaintenanceJeuControlsList > li > span.maintenancePointBad
{
	margin: 0;

	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	background-color: var(--btn-close);

	transition: filter .1s;
}

.modalMaintenanceJeuControlsList > li > span.unselected
{
	background-color: var(--detail-grey);
}

/*===============================================================================*/
/*================================ DEMANDE PRIX =================================*/
/*===============================================================================*/

.modalDemandePrixImgContainer
{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: 120px;
	justify-content: space-between;
	column-gap: 15px;
	row-gap: 15px;
}

.modalDemandePrixImgContainer > .modalDemandePrixImg
{
	position: relative;

	height: 100%;
	width: 100%;
}

.modalDemandePrixImg > img
{
	height: 100%;
	width: 100%;

	object-fit: cover;

	border-radius: var(--border-radius);
}

.modalDemandePrixImg > input
{
	position: absolute;

	height: 20px;
	width: 20px;
	bottom: 5px;
	right: 5px;
}

/*===============================================================================*/
/*================================== MODAL MAP ==================================*/
/*===============================================================================*/

#modal-map .modal-body
{
	flex-direction: row;

	background-color: var(--background-grey);
}

.modalCityContainer
{
	height: 100%;
	width: 300px;

	flex-shrink: 0;

	margin-right: 15px;

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);
	background-color: var(--background-white);
}

.modalCityContainer > h1
{
	min-height: 50px;
	max-height: 50px;

	margin: 0;
	padding: 15px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);
	font-size: 17px;
}

.modalCityContainer > .modalCityList
{
	height: 100%;
	width: 100%;

	padding: 15px;
	margin: 0;

	list-style-type: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	border: 1px solid var(--border-light);
	border-top: 0;

	overflow: auto;
}

.modalCityList > li
{
	width: 100%;
	margin-bottom: 5px;
	padding: 10px;

	display: flex;
	flex-direction: row;
	align-items: center;

	border-radius: var(--border-radius);

	color: var(--text-clear);
	background-color: var(--main-color-light);

	cursor: pointer;
}

.modalMapContainer
{
	height: 100%;
	width: 100%;

	border-radius: var(--border-radius);
}

.modalMapContainer > .modalMapInfoBox
{
	position: absolute;

	padding: 10px;
	right: 10px;
	top: 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: var(--border-radius);

	background-color: var(--background-white);
	box-shadow: var(--shadow-normal);

	z-index: 1000;
}

.modalMapInfoBox > #modalMapInfoText
{
	margin: 0;
}

/*===============================================================================*/
/*================================== PLANNING ===================================*/
/*===============================================================================*/

.planningContainer
{
	flex: 1;

	padding: var(--spacing);

	display: flex;
	flex-direction: column;
}

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

.planningHeaderContainer
{
	width: 100%;
	margin-right: var(--spacing);
	padding: 15px;

	display: flex;

	border-radius: var(--border-radius);
	background-color: var(--nav-background);
	box-shadow: var(--shadow-normal);
}

.planningHeaderContainer button
{
	margin-right: 10px;
}

/* --------- FREQUENCE --------- */

.planningFrequenceContainer
{
	height: calc(100% - 75px);
	width: 100%;
	margin-top: var(--spacing);

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);
	background-color: var(--background-white);
	box-shadow: var(--shadow-normal);

	overflow: auto;
}

.planningFrequenceContainer > h1
{
	min-height: 50px;
	max-height: 50px;

	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);

	font-size: 15px;
}

.planningFrequenceContainer > h1 > span
{
	margin-left: 10px;
	font-size: 15px;
}

.planningFrequenceContainer > .planningFrequenceToolbar
{
	height: 40px;
	width: 100%;
	padding: 0 10px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-shrink: 0;
	background-color: var(--background-lightgrey);
	border-bottom: 1px solid var(--border-light);
}

.planningFrequenceToolbar > .planningFrequenceToolbarLeft
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.planningFrequenceToolbarLeft > label
{
	margin: 0;
	margin-right: 10px;
}

.planningFrequenceToolbarLeft > select
{
	height: 30px;
	width: auto;
}

.planningFrequenceToolbar > .planningFrequenceToolbarCenter
{
	margin: 0 auto;

	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 5px;
}

.planningFrequenceToolbarCenter > label
{
	margin: 0;

	font-size: 20px;
}

.planningFrequenceToolbar > button
{
	height: 30px;
	padding: 0 12px;
}

.planningFrequenceContainer > .planningFrequence
{
	position: relative;

	min-height: calc(100% - 90px);

	border: 15px solid var(--text-clear);

	overflow: auto;
}

.planningFrequence > img
{
	position: absolute;
	height: 35px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

.planningFrequence > .rowPlanning
{
	height: 50px;
	min-height: 35px;
	width: 100%;

	display: flex;

	border-bottom: 1px solid var(--border-light);
	transition: all .1s;
}

.planningFrequence > .rowPlanning.rowPlanningHeader
{
	position: sticky;
	top: 0;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color) !important;

	border: none;

	z-index: 1;
}

.planningFrequence > .rowPlanning:nth-child(odd)
{
	background-color: var(--background-grey);
}

.planningFrequence > .rowPlanning:hover
{
	background-color: var(--background-hover);
	transition: all .1s;
}

.planningFrequence > .rowPlanning:last-of-type
{
	border-radius: var(--border-radius);
}

.planningFrequence > .rowPlanning.rowPlanningHeader > .columnPlanning:first-child
{
	border-left: none;
}

.planningFrequence > .rowPlanning.rowPlanningHeader > .columnPlanning:last-of-type
{
	border-right: none;
}

.planningFrequence > .rowPlanning.rowPlanningHeader > .columnPlanning
{
	padding: 5px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-weight: bold;
	color: var(--text-clear);
}

.planningFrequence > .rowPlanning.rowPlanningHeader > .columnPlanning > span
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.planningFrequence > .rowPlanning > .columnPlanning
{
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	border-right: 1px solid var(--border-light);
}

.planningFrequence > .rowPlanning > .columnPlanning > span
{
	text-align: center;
}

.planningFrequence > .rowPlanning > .columnPlanning:first-child
{
	border-left: 1px solid var(--border-light);
}

.planningFrequence > .rowPlanning > .columnPlanning:first-child > span
{
	font-weight: bold;
}

.planningFrequence > .rowPlanning > .columnPlanning.columnClient
{
	width: 250px;
	padding: 10px;
}

.planningFrequence > .rowPlanning > .columnPlanning.columnAireJeux
{
	width: 150px;
}

.planningFrequence > .rowPlanning > .columnPlanning.columnFrequence
{
	width: 50px;
}

.planningFrequence > .rowPlanning > .columnPlanning.columnReste
{
	width: 70px;
}

.planningFrequence > .rowPlanning.rowPlanningHeader > .columnPlanning.columnMonths
{
	cursor: initial !important;
}

.planningFrequence > .rowPlanning > .columnPlanning.columnMonths
{
	position: relative;

	min-width: 85px;
	width: calc( (100% / 12) - (520px / 12) );

	cursor: pointer;
	transition: all .1s;
}

.planningFrequence > .rowPlanning > .columnPlanning > input[type="number"]
{
	display: none;
}

.planningFrequence > .rowPlanning > .columnPlanning > .columnColor
{
	height: 100%;
	width: 100%;
}

.planningFrequence > .rowPlanning > .columnPlanning > .columnBtn
{
	position: absolute;

	height: 100%;
	width: 100%;
	padding: 0 10px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.planningFrequence > .rowPlanning > .columnPlanning > .columnBtn > button
{
	flex-shrink: 0;

	display: none;

	height: 20px;
	width: 20px;

	padding: 0;

	font-size: 13px;
}

.planningFrequence > .rowPlanning > .columnPlanning.editMode:hover > .columnBtn > button
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.planningFrequence > .rowPlanning > .columnPlanning > .columnBtn > span
{
	height: 100%;
	width: 100%;
	margin: 0 auto;

	line-height: 50px;

	font-weight: bold;
	text-align: center;

	cursor: zoom-in;
}

/* --------- TECH --------- */

.planningTechnicienContainer
{
	height: 100%;
	width: 100%;
	margin-top: var(--spacing);

	display: flex;
	flex-direction: row;

	overflow: auto;
}

.planningTechnicienContainer > .planningTechnicienPlanning
{
	height: 100%;
	width: 100%;

	background-color: var(--background-white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-normal);
}

.planningTechnicienPlanning > h1,
.planningTechncienPrevision > h1
{
	min-height: 50px;
	max-height: 50px;

	margin: 0;
	padding: 10px;

	display: flex;
	align-items: center;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--main-color);
	color: var(--text-clear);

	font-size: 15px;
}

.planningTechnicienPlanning > h1 > span,
.planningTechncienPrevision > h1 > span
{
	margin-left: 10px;
	font-size: 15px;
}

.planningTechnicienPlanning > .planningTechnicien
{
	padding: 15px;
}

.planningTechnicienContainer > .planningTechncienPrevision
{
	flex-shrink: 0;

	width: 300px;
	margin-left: var(--spacing);

	background-color: var(--background-white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-normal);
}

.planningTechncienPrevision > h1
{
	background-color: var(--background-yellow);
}

.planningTechncienPrevision > .planningPrevisionList
{
	height: calc(100% - 50px);
	padding: 15px;

	display: flex;
	flex-direction: column;

	overflow: overlay;
}

.planningPrevisionList > .previsionItem
{
	margin-bottom: 5px;
}

.previsionItem > span
{
	padding: 10px;
	display: flex;
	justify-content: space-between;
	border-radius: 3px;
	color: var(--text-clear);
	background-color: var(--background-yellow);
}

.previsionItem > span > button
{
	height: 20px;
	width: 20px;
	padding: 0;
}

.previsionItem > .previsionFrequence
{
	padding: 0 5px;
}

.previsionItem > .previsionFrequence:first-of-type
{
	padding-top: 5px;
}

.previsionFrequence > span
{
	padding: 10px;
	display: flex;
	justify-content: space-between;
	border-radius: 3px;
	color: var(--text-clear);
	background-color: var(--background-yellow-light);
}

.previsionFrequence > .previsionMonth
{
	padding-top: 5px;
}

.previsionMonth > .prevision
{
	padding: 10px;
	margin-bottom: 5px;
	display: flex;
	justify-content: space-between;
	border-radius: 3px;
	color: black;
	background-color: var(--background-lightgrey);
	border: 1px solid var(--border-light);
}

.eventDelBtn
{
	margin-bottom: 5px;
	background-color: transparent;
	border: none;
	font-size: 15px;
	color: var(--text-clear);
}

.eventDelBtn > i
{
	pointer-events: none;
}

.eventInfoFollow, .clientEventInfoFollow
{
	position: absolute;
	height: auto;
	top: calc(var(--nav-bar-height) + var(--spacing));
	bottom: 10px;
	max-height: calc(100vh - var( --nav-bar-height));
	width: auto;
	padding: 10px;

	border-radius: var( --border-radius);

	background-color: rgba(0,0,0,0.7);
	color: var( --text-clear);

	backdrop-filter: blur(10px);
	overflow: auto;

	z-index: 1;
}

.eventInfoFollow > .eventInfoFollowList,
.clientEventInfoFollow > .eventInfoFollowList
{
	list-style: none;
	margin: 0;
}

/* --------- CALENDAR --------- */

.fc-day-sun,
.fc-day-sat
{
	background-color: rgba(0,0,0,0.05);
}

/*===============================================================================*/
/*==================================== DEVIS ====================================*/
/*===============================================================================*/

/* --------- PANEL DEVIS --------- */

.panelAllDevisInfosContainer
{
	position: absolute;

	top: 0;
	right: 150px;
	width: 550px;

	z-index: 1003;
}

.panelAllDevisInfosContainer > h1
{
	height: var(--nav-bar-height);
	width: fit-content;
	margin: 0;
	margin-left: auto;
	padding: 0 10px;

	display: flex;
	align-items: center;

	font-size: 15px;

	color: var(--text-clear);

	background-color: var(--main-color);
}

.panelAllDevisInfosContainer > h1 > span
{
	margin-left: 5px;
}

.panelAllDevisInfosContainer > h1 > button
{
	margin-left: auto;
}

.panelAllDevisInfosContainer > .panelAllDevisContent
{
	position: absolute;
	right: 0;

	height: auto;
	width: 600px;
	max-height: calc(100vh - var(--nav-bar-height));
	padding: 15px;

	border: 1px solid var(--border-light);
	border-top: none;
	border-bottom-left-radius: var(--border-radius);

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);

	overflow: auto;
}

.panelAllDevisContent > h1
{
	margin: 0;
	margin-bottom: 10px;

	font-size: 17px;
	font-weight: bold;
}

.panelAllDevisContent > ul
{
	margin: 0;

	list-style-type: none;

	display: flex;
	flex-direction: column;
}

.panelAllDevisContent > ul > li
{
	padding: 5px;

	display: flex;

	border-bottom: 1px solid var(--border-light);
}

.panelAllDevisContent > ul > li:last-of-type
{
	border: 0;
}

/* --------- DEVIS --------- */

#modal-ligne-photos > .modal-dialog > .modal-content > .modal-body
{
	display: flex;
	flex-direction: row;
	column-gap: 10px;
}

.modalLignePhotosAvailable,
.modalLignePhotosPut
{
	width: 50%;
	padding: 10px;

	display: flex;
	flex-direction: column;

	border-radius: var(--border-radius);
	border: 1px solid var(--border-light);
}

.modalLignePhotosAvailable > .modalLignePhotosHeader,
.modalLignePhotosPut > .modalLignePhotosHeader
{
	height: 50px;
	padding-bottom: 10px;

	display: flex;
	align-items: center;
}

.modalLignePhotosAvailable > .modalLignePhotosHeader > h1,
.modalLignePhotosPut > .modalLignePhotosHeader > h1
{
	margin: 0;
	padding: 0;

	font-size: 15px;
	font-weight: bold;
}

.modalLignePhotosAvailable > .modalLignePhotosHeader > button,
.modalLignePhotosPut > .modalLignePhotosHeader > button
{
	margin-left: auto;
}

.modalLignePhotosAvailable > .modalLignePhotosContainer,
.modalLignePhotosPut > .modalLignePhotosContainer
{
	width: 100%;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-auto-rows: 190px;
	justify-content: space-between;
	column-gap: 15px;
	row-gap: 15px;
}

.modalLignePhotosContainer > .lignePhotoAvailable,
.modalLignePhotosContainer > .lignePhotoPut
{
	position: relative;

	height: 100%;
	width: 100%;
}

.lignePhotoAvailable > .lignePhotoHover,
.lignePhotoPut > .lignePhotoHover
{
	display: none;
}

.lignePhotoAvailable:hover > .lignePhotoHover,
.lignePhotoPut:hover > .lignePhotoHover
{
	position: absolute;

	height: 100%;
	width: 100%;

	top: 0;
	left: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	background-color: rgba(0,0,0,0.3);
	cursor: pointer;

	transition: all .1s;
}

.lignePhotoAvailable > .lignePhotoHover > i,
.lignePhotoPut > .lignePhotoHover > i
{
	font-size: 25px;
	color: var(--text-clear);
}

.lignePhotoAvailable > img,
.lignePhotoPut > img
{
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
	transition: all .1s;
}

/*===============================================================================*/
/*=================================== ALERTE ====================================*/
/*===============================================================================*/

/* --------- PANEL DEMANDE CONTACT --------- */

.panelAlerteContainer
{
	position: absolute;

	top: 0;
	right: 100px;
	width: 50px;

	z-index: 1003;
}

.panelAlerteContainer > h1
{
	height: var(--nav-bar-height);
	width: 100%;
	margin: 0;
	padding: 0 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 15px;

	color: var(--text-clear);

	background-color: var(--background-green);
}

.panelAlerteContainer > h1 > span
{
	margin-left: 5px;
}

.panelAlerteContainer > h1 > button
{
	margin-left: auto;
}

.panelAlerteContainer > .pannelAlerteContent
{
	float: right;

	height: auto;
	width: 600px;
	max-height: calc(100vh - var(--nav-bar-height));
	padding: 15px;

	border: 1px solid var(--border-light);
	border-top: none;
	border-bottom-left-radius: var(--border-radius);

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);

	overflow: auto;
}

.pannelAlerteContent > h1
{
	margin: 0;
	margin-bottom: 10px;

	font-size: 17px;
	font-weight: bold;
}

.pannelAlerteContent > .alerte
{
	margin-bottom: 10px;
}

.pannelAlerteContent > .alerte:last-of-type
{
	margin-bottom: 0;
}

.alerte > .alerteHeader
{
	width: 100%;
	padding: 10px;

	font-weight: bold;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--background-green);
	color: var(--text-clear);
}

.alerte > .alerteDescription
{
	height: auto;
	min-height: 70px;
	width: 100%;
	padding: 10px;

	display: flex;
	flex-direction: column;

	border-left: 1px solid var(--border-light);
	border-right: 1px solid var(--border-light);
}

.alerte > .alerteFooter
{
	padding: 10px;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;

	border: 1px solid var(--border-light);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

/*===============================================================================*/
/*=============================== DEMANDE CONTACT ===============================*/
/*===============================================================================*/

/* --------- PANEL DEMANDE CONTACT --------- */

.panelDemandeContactContainer
{
	position: absolute;

	top: 0;
	right: 50px;
	width: 50px;

	z-index: 1003;
}

.panelDemandeContactContainer > h1
{
	height: var(--nav-bar-height);
	width: 100%;
	margin: 0;
	padding: 0 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 15px;

	color: var(--text-clear);

	background-color: var(--background-yellow);
}

.panelDemandeContactContainer > h1 > span
{
	margin-left: 5px;
}

.panelDemandeContactContainer > h1 > button
{
	margin-left: auto;
}

.panelDemandeContactContainer > .pannelDemandeContactContent
{
	float: right;

	height: auto;
	width: 600px;
	max-height: calc(100vh - var(--nav-bar-height));
	padding: 15px;

	border: 1px solid var(--border-light);
	border-top: none;
	border-bottom-left-radius: var(--border-radius);

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);

	overflow: auto;
}

.pannelDemandeContactContent > h1
{
	margin: 0;
	margin-bottom: 10px;

	font-size: 17px;
	font-weight: bold;
}

.pannelDemandeContactContent > ul
{
	margin: 0;

	list-style-type: none;

	display: flex;
	flex-direction: column;
}

.pannelDemandeContactContent > ul > li
{
	padding: 5px;

	display: flex;

	border-bottom: 1px solid var(--border-light);
}

.pannelDemandeContactContent > ul > li:last-of-type
{
	border: 0;
}

.demandeContactContainer#demandeContactRunningContainer
{
	margin-top: 10px;
}

.demandeContactContainer > h1
{
	margin: 0;

	display: flex;
	align-items: center;
	justify-content: space-between;

	font-size: 17px;

	border-radius: var(--border-radius);

	color: var(--text-clear);
	background-color: var(--main-color-light);
}

.demandeContactContainer > h1 > span,
.demandeContactContainer > h1 > button
{
	height: 100%;
	padding: 10px;
}

.demandeContactContainer > h1 > button
{
	width: 50px;

	border-top-left-radius: 0;
	border-bottom-left-radius: 0;

	background-color: rgba(0,0,0,0.05);
	transition: all .1s;
}

.demandeContactContainer > h1 > button:hover
{
	background-color: rgba(0,0,0,0.1);
	transition: all .1s;
}

.demandeContactContainer > section
{
	padding: 10px;

	border: 1px solid var(--border-light);
	border-top: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.demandeContactContainer > section > .demandeContact
{
	margin-bottom: 10px;
}

.demandeContactContainer > section > .demandeContact:last-of-type
{
	margin-bottom: 0;
}

.demandeContact > .demandeContactHeader
{
	width: 100%;
	padding: 10px;

	font-weight: bold;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--background-yellow);
	color: var(--text-clear);
}

.demandeContact > .demandeContactComment
{
	height: auto;
	min-height: 70px;
	width: 100%;
	padding: 10px;

	display: flex;
	flex-direction: column;

	border-left: 1px solid var(--border-light);
	border-right: 1px solid var(--border-light);
}

#demandeContactHistoryContainer > section > .demandeContact > .demandeContactComment
{
	border: 1px solid var(--border-light);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.demandeContactComment > label:last-of-type
{
	margin-top: 10px;
}

.demandeContact > .demandeContactBtns
{
	height: auto;
	width: 100%;
	padding: 5px;

	display: flex;
	justify-content: flex-end;

	border: 1px solid var(--border-light);
	border-top: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	background-color: var(--background-grey);
}

/*===============================================================================*/
/*================================ DEMANDE INTER ================================*/
/*===============================================================================*/

/* --------- PANEL DEMANDE INTER --------- */

.panelDemandeInterventionContainer
{
	position: absolute;

	top: 0;
	right: 0px;
	width: 50px;

	z-index: 1003;
}

.panelDemandeInterventionContainer > h1
{
	height: var(--nav-bar-height);
	width: 100%;
	margin: 0;
	padding: 0 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 15px;

	color: var(--text-clear);

	background-color: var(--btn-close);
}

.panelDemandeInterventionContainer > h1 > span
{
	margin-left: 5px;
}

.panelDemandeInterventionContainer > h1 > button
{
	margin-left: auto;
}

.panelDemandeInterventionContainer > .pannelDemandeInterventionContent
{
	float: right;

	height: auto;
	width: 600px;
	max-height: calc(100vh - var(--nav-bar-height));
	padding: 15px;

	border: 1px solid var(--border-light);
	border-top: none;
	border-bottom-left-radius: var(--border-radius);

	background-color: var(--background-white);
	box-shadow: var(--shadow-modal);

	overflow: auto;
}

.pannelDemandeInterventionContent > h1
{
	margin: 0;
	margin-bottom: 10px;

	font-size: 17px;
	font-weight: bold;
}

.pannelDemandeInterventionContent > ul
{
	margin: 0;

	list-style-type: none;

	display: flex;
	flex-direction: column;
}

.pannelDemandeInterventionContent > ul > li
{
	padding: 5px;

	display: flex;

	border-bottom: 1px solid var(--border-light);
}

.pannelDemandeInterventionContent > ul > li:last-of-type
{
	border: 0;
}

.demandeInterventionContainer#demandeInterventionRunningContainer
{
	margin-top: 10px;
}

.demandeInterventionContainer > h1
{
	margin: 0;

	display: flex;
	align-items: center;
	justify-content: space-between;

	font-size: 17px;

	border-radius: var(--border-radius);

	color: var(--text-clear);
	background-color: var(--main-color-light);
}

.demandeInterventionContainer > h1 > span,
.demandeInterventionContainer > h1 > button
{
	height: 100%;
	padding: 10px;
}

.demandeInterventionContainer > h1 > button
{
	width: 50px;

	border-top-left-radius: 0;
	border-bottom-left-radius: 0;

	background-color: rgba(0,0,0,0.05);
	transition: all .1s;
}

.demandeInterventionContainer > h1 > button:hover
{
	background-color: rgba(0,0,0,0.1);
	transition: all .1s;
}

.demandeInterventionContainer > section
{
	padding: 10px;

	border: 1px solid var(--border-light);
	border-top: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.demandeInterventionContainer > section > .demandeIntervention
{
	margin-bottom: 10px;
}

.demandeInterventionContainer > section > .demandeIntervention:last-of-type
{
	margin-bottom: 0;
}

.demandeIntervention > .demandeInterventionHeader
{
	width: 100%;
	padding: 10px;

	font-weight: bold;

	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);

	background-color: var(--btn-close);
	color: var(--text-clear);
}

.demandeIntervention > .demandeInterventionComment
{
	height: auto;
	min-height: 70px;
	width: 100%;
	padding: 10px;

	display: flex;
	flex-direction: column;

	border-left: 1px solid var(--border-light);
	border-right: 1px solid var(--border-light);
}

#demandeInterventionHistoryContainer > section > .demandeIntervention > .demandeInterventionComment
{
	border: 1px solid var(--border-light);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.demandeInterventionComment > label:last-of-type
{
	margin-top: 10px;
}

.demandeIntervention > .demandeInterventionBtns
{
	height: auto;
	width: 100%;
	padding: 5px;

	display: flex;
	justify-content: flex-end;

	border: 1px solid var(--border-light);
	border-top: none;

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	background-color: var(--background-grey);
}

/*===============================================================================*/
/*===================================== PDF =====================================*/
/*===============================================================================*/

#modal-pdf > .modal-dialog > .modal-content > .modal-footer
{
	display: flex;
	justify-content: flex-end;
}

.modal-footer > #modal-pdf-option-devis
{
	margin-right: 10px;
}

/*===============================================================================*/
/*================================ PICTURE VIEWER ===============================*/
/*===============================================================================*/

.pictureViewer
{
	position: fixed;

	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;

	display: flex;
	flex-direction: column;

	background-color: rgba(0, 0, 0, .7);
	backdrop-filter: blur(10px);
	z-index: 9999;
}

.pictureViewer > .pictureViewerHeader,
.pictureViewer > .pictureViewerFooter
{
	height: 60px;
	padding: 15px;
	display: flex;
	align-items: center;
}

.pictureViewerHeader > #pictureViewerTitle
{
	font-size: 17px;
	color: var(--text-clear);
}

.pictureViewerHeader > .pictureViewerOptions
{
	margin-left: 10px;
}

.pictureViewerHeader > button
{
	margin-left: auto;
}

.pictureViewer > .pictureViewerBody
{
	height: calc(100vh - 120px);
	display: flex;
	flex-direction: row;
	align-items: center;
}

.pictureViewerBody > .pictureViewerPrevContainer,
.pictureViewerBody > .pictureViewerNextContainer
{
	padding: 50px;
}

.pictureViewerBody > .pictureViewerPrevContainer > button,
.pictureViewerBody > .pictureViewerNextContainer > button
{
	color: var(--text-clear);
	font-size: 25px;
}

.pictureViewerBody > .pictureViewerContent
{
	height: 100%;
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.pictureViewerContent > .pictureViewerImg
{
	display: none;

	height: 100%;
	max-width: 100%;

	object-fit: cover;

	border-radius: var(--border-radius);
	box-shadow: var(--shadow-picture-viewer);
}

.pictureViewerContent > .pictureViewerImg.active
{
	display: inherit;
}

/*===============================================================================*/
/*================================== ANIMATION ==================================*/
/*===============================================================================*/

.shake
{
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) 2;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

@keyframes shake
{
	10%, 90%
	{
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80%
	{
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70%
	{
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60%
	{
		transform: translate3d(4px, 0, 0);
	}
}