/* Import the common scheme */

:root {
	--fb: #D5E4F2;
	--admin: #25396F;
	--gube: #683B11;
	--gube-dark: #522b06;
	--border-gube: #683B11;
	--gube-clear: #e2bea3;
	--gube-light: #EFD4BD;
	--gube-night: #272A30;
	--sky: #a3cef7;
	--sky-2: : #a8c7e0;
	--sky-3: #0D6EFD;
	--clear: #ccf2ff;
	/*#cff2f7;*/
	--lemon: #fffdc6;
	--tomato: #F27348;
	--rajah: #F7CE76;
	--glaucous: #6082B6;
	--turquoise: #40E0D0;
	--celadon: #AFE1AF;
	--light-blue: #ADD8E6;
	--light-green: #ddffdd;
	--spring-green: #00FF7F;
	--pastel-green: #C1E1C1;
	--mint-green: #98FB98;
	--clear-green: #e5fff5;
	--nyanza: #ECFFDC;
	--pastel-pink: #F8C8DC;
	--canari: #FFFF8F;
	--night: #272A30;
	--midnight: #333;
	--green-dark: #195e46;
	--blue-sigbm: #0869FF;

	--e5: #e5e5e5;
	--e6: #e6e6e6;
	--e7: #e7e7e7;
	--e8: #e8e8e8;

	--f5: #f5f5f5;
	--f6: #f6f6f6;
	--f7: #f7f7f7;
	--f8: #f8f8f8;

	--hover-2: rgba(209, 211, 226, 0.1);
	--animate-duration: 800ms;
	--animate-delay: 0.9s;
}


html {
	scroll-behavior: smooth !important;
}

* {
	box-sizing: border-box;
	scroll-behavior: smooth !important;
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'),
		local('Roboto-Regular'),
		url(../fonts/Roboto/Roboto-Regular.ttf) format('truetype');
}

@font-face {
	font-family: 'Roboto-Bold';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto'),
		local('Roboto-Bold'),
		url(../fonts/Roboto/Roboto-Bold.ttf) format('truetype');
}

@font-face {
	font-family: 'Roboto-Thin';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto'),
		local('Roboto-Thin'),
		url(../fonts/Roboto/Roboto-Light.ttf) format('truetype');
}

@font-face {
	font-family: 'Roboto-Condensed';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'),
		local('Roboto-Condensed'),
		url(../fonts/Roboto_Condensed/RobotoCondensed-Regular.ttf) format('truetype');
}


@font-face {
	font-family: 'Roboto-Condensed-Light';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto'),
		local('Roboto-Condensed-Light'),
		url(../fonts/Roboto_Condensed/RobotoCondensed-Light.ttf) format('truetype');
}

@font-face {
	font-family: 'Roboto-Condensed-Bold';
	font-style: normal;
	font-weight: 700;
	src: local('Roboto'),
		local('Roboto-Condensed-Bold'),
		url(../fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf) format('truetype');
}

@font-face {
	font-family: 'Facebook';
	src: local('☺'),
		url(../fonts/facebook-2/FACEBOLF.OTF) format('truetype');
}

@font-face {
	font-family: 'Dax';
	font-style: normal;
	font-weight: 400;
	src: local('Dax'),
		url(../fonts/daxlight/dax.ttf) format('truetype');
}

@font-face {
	font-family: 'Futura';
	src: local('Futura'),
		url('../fonts/futura/futura medium bt.ttf');
}


@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400;
	src: local('Nunito'),
		url('../fonts/Nunito/Nunito-VariableFont_wght.ttf');
}

@font-face {
	font-family: 'Groovy';
	src: local('Groovy'),
		url('../fonts/balance_groovy/Balance_Groovy.ttf');
}


@font-face {
	font-family: 'Groovy_sans';
	src: local('Groovy_sans'),
		url('../fonts/balance_groovy/Balance_Groovy_Sans.ttf');
}


/*https://stackoverflow.com/a/2436830/4304740*/

@font-face {
	font-family: "Caviar Dreams";
	src: url("../fonts/caviar_dreams/CaviarDreams.ttf");
}

@font-face {
	font-family: "Caviar Dreams";
	src: url("../fonts/caviar_dreams/CaviarDreams_Bold.ttf");
	font-weight: bold;
}

/*

@font-face {
	font-family: "Caviar Dreams";
	src: url("../fonts/caviar_dreams/CaviarDreams_Italic.ttf");
	font-style: italic, oblique;
}


@font-face {
	font-family: "Caviar Dreams";
	src: url("../fonts/caviar_dreams/CaviarDreams_BoldItalic.ttf");
	font-weight: bold;
	font-style: italic, oblique;
}

*/


/*#DAE0E6*/

html,
body {
	height: 100%;
	min-height: 100%;
}

BODY {
	position: relative;
	background-color: #fff !important;
	/*e6e6e6*/
	font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	/*font-family: "Dax" !important;*/
	color: #333;
	margin: 0;
	padding: 0;
}


BODY.noscroll {
	overflow: hidden !important;
}


FORM {
	margin: 0;
}

/***/
INPUT,
BUTTON,
TEXTAREA,
SELECT {
	margin: 0px 0;
}

UL {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

LI {
	margin: 0;
}


A {
	outline: 0;
	cursor: pointer;
	text-decoration: none !important;
}

A:hover {
	text-decoration: none !important;
}

INPUT,
BUTTON,
TEXTAREA,
SELECT {
	margin: 2px 0;
}

TEXTAREA {
	resize: none;
}


INPUT::-webkit-outer-spin-button,
INPUT::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

INPUT[type=number] {
	-moz-appearance: textfield;
}


/**From PUN--*/

DIV.clearer,
DIV.nosize {
	HEIGHT: 0;
	WIDTH: 0;
	LINE-HEIGHT: 0;
	FONT-SIZE: 0;
	OVERFLOW: hidden
}

DIV.block DIV.inbox,
DIV.blockmenu DIV.inbox {
	PADDING: 3px 6px
}

DIV.clearer,
DIV.clearb {
	CLEAR: both
}


/**---*/

DIV.responsive-version,
.responsive-version {
	display: none;
}

Table.noborder TD {
	padding: 0;
	border: 0
}

Table.flat TD {
	font-size: 0.9em;
	border: 0px solid #000;
}

.box {
	display: block;
	background-color: #ddf;
	border-radius: 7px;
	margin: 7px;
	padding: 7px;
}


/*freezer--Masque opaque noir de fond--*/
#freezer,
.freezer {
	display: none;
	position: fixed;
	z-index: 3 !important;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .2;
}

.show {
	display: block;
}



.hidden-scrollbar {
	-ms-overflow-style: none;
	/* Internet Explorer 10+ */
	scrollbar-width: none;
	/* Firefox */
}

.hidden-scrollbar::-webkit-scrollbar {
	display: none;
	/* Safari and Chrome */
}


.fixedcenter {
	position: fixed;
	z-index: 4;
	bottom: 0;
	color: #000;
	overflow: auto;
	border-radius: 7px;
	left: 50%;
	top: 20%;
	height: auto;
	transform: translateX(-50%) translateY(-20%);
}

.centered {
	/*position: fixed !important;*/
	z-index: 9;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);

}

.centered-h {
	/*position: fixed !important;*/
	z-index: 9;
	left: 50%;
	transform: translateX(-50%);

}

/*
/*Custom Confirm Dialog in JS - Part 1/2 | JavaScript Tutorials | Web Development Tutorials
*https://www.youtube.com/watch?v=Ie3al52U0Ig
*Custom Confirm Dialog in JS - Part 2/2 | JavaScript Tutorials | Web Development Tutorials
*https://www.youtube.com/watch?v=hK-YSxNX_YQ
*Updated by Raymond Gbely : 04/10/2019 20:11
*/

.dlg-container {
	position: fixed;
	/*absolute*/
	z-index: 999;
	left: 50%;
	top: -50%;
	transform: translateX(-50%) translateY(-50%);
	min-width: 400px;
	background: #fff;
	padding: 10px;
	border: 2px solid #ccc;
	box-shadow: 1px 1px 5px 1px #ccc;
	border-radius: 10px;
	opacity: 1;
	transition: all 0.3s linear 0s;

}

.dlg-header {
	padding: 10px;
	font-weight: bold;
	background: #575757;
	color: #f6f7f8;
}

.dlg-body {
	padding: 1px 0px;
	/*overflow: auto;*/
	border: 0px solid red;
	max-height: 550px;
	/*line-height: 30px;*/
}

.dlg-footer {
	text-align: center;
	background: #f5f5f2;
	padding: 3px 0;
}

.dlg-footer a {
	display: inline-block;
	width: 100px;
	padding: 5px 0;
	border: 1px solid #ccc;
	border-radius: 10px;
	background: #eee;
	cursor: pointer;
	text-decoration: none;
}

.dlg-footer a:active {
	box-shadow: inset 2px 2px 4px 0px #ccc;
	color: #666;
}

.dgl-close-top {
	position: absolute;
	display: flex;
	align-items: center;
	justify-items: center;
	z-index: 1;
	top: 0;
	right: 0;
	background: #ff0;
	color: #000;
	border-radius: 50%;
	margin: 10px;
	padding: 3px 10px;
	box-shadow: 1px 1px 5px #888;
}


.opacity-black {
	background: rgba(0, 0, 0, 0.1) !important;
}

.opacity-white {
	background: rgba(255, 255, 255, 0.3) !important;
}

.opacity-0 {
	opacity: 0 !important;
}


.z-index-under {
	z-index: -1 !important;
}

.z-index-0 {
	z-index: 0 !important;
}

.z-index-1 {
	z-index: 1 !important;
}

.z-index-2 {
	z-index: 2 !important;
}

.z-index-3 {
	z-index: 3 !important;
}

.z-index-4 {
	z-index: 4 !important;
}

.z-index-5 {
	z-index: 5 !important;
}

.z-index-6 {
	z-index: 6 !important;
}

.z-index-7 {
	z-index: 7 !important;
}

.z-index-8 {
	z-index: 8 !important;
}

.z-index-9 {
	z-index: 9 !important;
}


.z-index-100 {
	z-index: 100 !important;
}

.z-index-9999,
.z-index-max {
	z-index: 9999 !important;
}

/**
COLOR
**/




.bg-e5 {
	background-color: var(--e5) !important;
}

.bg-e6 {
	background-color: var(--e6) !important;
}

.bg-e7 {
	background-color: var(--e7) !important;
}


.bg-e8 {
	background-color: var(--e8) !important;
}


.bg-f5 {
	background-color: var(--f5) !important;
}

.bg-f6 {
	background-color: var(--f6) !important;
}

.bg-f7 {
	background-color: var(--f7) !important;
}

.bg-f8 {
	background-color: var(--f8) !important;
}

.text-bolder {
	font-weight: bolder !important
}

.bg-gube {
	background-color: var(--gube)  !important;
}

.text-gube {
	color: var(--gube)  !important
}

.bg-gube-dark {
	background-color: #522b06 !important;
}

.text-gube-dark {
	color: #522b06 !important
}


.border-gube {
	border: 1px solid var(--gube)  !important;
}


.bg-gube-clear {
	background-color: #e2bea3 !important;
}

.text-gube-clear {
	color: #e2bea3 !important
}

.border-gube-clear {
	border-color: #e2bea3 !important;
}

.bg-gube-light {
	background-color: #EFD4BD !important;
}

.text-gube-light {
	color: var(--gube-light) !important
}

.border-gube-light {
	border-color: 1px solid var(--gube-light) !important;
}


.bg-night {
	background-color: var(--night) !important;
}


.bg-sky {
	background-color: var(--sky) !important;
}

.bg-sky-2 {

	background-color: var(--sky-2) !important;
}

.bg-sky-3 {
	background-color: var(--sky-3) !important
}

.bg-clear {
	background-color: var(--clear) !important;
}

.bg-lemon {
	background-color: var(--lemon) !important;
}

.bg-yellow {
	background-color: yellow !important;
}

.text-yellow {
	color: yellow !important;
}

.bg-tomato {
	background-color: var(--tomato) !important;
}

.text-tomato {
	color: var(--tomato) !important;
}

.bg-rajah {
	background-color: var(--rajah) !important;
}

.bg-glaucous {
	background-color: var(--glaucous) !important;
}

.bg-turquoise {
	background-color: var(--turquoise) !important;
}

.bg-celadon {
	background-color: var(--celadon) !important;
}

.bg-light-blue {
	background-color: var(--light-blue) !important;
}

.bg-light-green {
	background-color: var(--light-green) !important;
}

.bg-spring-green {
	background-color: var(--spring-green) !important;
}

.bg-pastel-green {
	background-color: var(--pastel-green) !important;
}

.bg-mint-green {
	background-color: var(--mint-green) !important;
}

.bg-clear-green {
	background-color: var(--clear-green) !important;
}


.bg-nyanza {
	background-color: var(--nyanza);
}


.bg-pastel-pink {
	background-color: var(--pastel-pink);
}


.bg-canari {
	background-color: var(--canari) !important;
}


.bg-facebook,
.bg-fb {
	background-color: var(--fb) !important;
}

.text-facebook,
.text-fb {
	color: var(--fb) !important;
}

.text-blue-sigbm {
	color: var(--blue-sigbm) !important;
}

.bg-blue-sigbm {
	background-color: var(--blue-sigbm) !important;
}

.bg-admin {
	background-color: var(--admin) !important;
}

.text-admin {
	color: var(--admin) !important;
	transition: all .5s;
}

.text-darkblue {
	color: darkblue !important;
}


.input-uppercase INPUT:not(INPUt[type="email"]),
.uppercase,
.input-uppercase {
	text-transform: uppercase;
}

.input-text-black INPUT {
	color: blue;
	font-weight: bolder;
}

.left-0 {
	left: 0 !important
}



/**/

.cursor-pointer {
	cursor: pointer;
}


.d-flex-start,
.d-flex-center,
.d-flex-end,
.d-flex-between,
.d-flex-column {
	display: flex !important;
}

.d-flex-start {
	align-items: start;
}

.d-flex-center {
	align-items: center;
}

.d-flex-end {
	align-items: end;
}

.d-flex-between {
	justify-content: space-between;
}

.d-flex-column {
	flex-direction: column !important;
}


.i-toast{
	
}

/* //ErrorToastyellow upToast for process erros*/

.errorToast {

	position: fixed;
	z-index: 9999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	background: #eee;
	border: 1px solid #f49f9f;
	border-radius: 4px;

	width: 0%;
	min-height: 0;
	max-height: 0%;
	transition: all 0.15s ease-in-out;
	overflow: auto;
}

.errorToast.show {
	width: 48%;
	min-height: 38%;
	max-height: 78%;
}

.errorToast .errTitle {
	background: #f49f9f;
	color: #000;
	display: flex;
	align-items: center;
	padding: 3px 7px;
	font-weight: bold;
}

.errorToast .errMsg {
	display: block;
	padding: 10px;
	width: 100%;
	max-height: 23%;

}

.errorToast .close {
	font-size: 1.2rem;
	float: right;
	text-decoration: none;
	cursor: pointer;
	background: #000;
	color: #fff;
	text-decoration: none;
	padding: 1px 5px;
	border-radius: 50%;
	margin: 7px;

}

.errorToast .close {
	transform: scale(1.2);
}

/*--*/

/*REQUIRED WARNING*/


/*avatar*/
.avatar-cont {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	overflow: hidden;
	border-radius: 50%;
	background: #eee;
	/*margin-right:5px;*/
}

.avatar-cont IMG {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.avatar-cont.avatar-cont-sm {
	width: 30px !important;
	height: 30px !important;
	flex: 0 0 30px !important;
	font-size: 12px;
	/*margin-right:5px;*/
}

.avatar-cont.avatar-cont-xs {
	width: 20px !important;
	height: 20px !important;
	flex: 0 0 20px !important;
	font-size: 10px;
	/*margin-right:5px;*/
}

/**From PUN--*/

DIV.clearer,
DIV.nosize {
	HEIGHT: 0;
	WIDTH: 0;
	LINE-HEIGHT: 0;
	FONT-SIZE: 0;
	OVERFLOW: hidden
}

DIV.block DIV.inbox,
DIV.blockmenu DIV.inbox {
	PADDING: 3px 6px
}

DIV.clearer,
DIV.clearb {
	CLEAR: both
}

.scrollable {
	max-height: 70vh;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollable.mh-max {
	max-height: 70vh !important;
}

.scrollable-fit {
	max-height: fit-content;
	overflow-y: auto;
	overflow-x: hidden;
}

.scrollable-x {
	max-width: fit-content;
	overflow-y: hidden;
	overflow-x: auto;
	border: 0px solid red;
}

.scrollable-x>* {
	flex: 0 0 auto !important;
}

.white-space-nowrap {
	white-space: nowrap !important;
}

.bull {
	background: #999;
	border-radius: 5px;
	font-weight: bold;
	color: #fff;
	margin: 5px 0;
	padding: 1px 7px;
}

.bull-cross {

	position: absolute;
	top: 22%;
	z-index: 1;
	padding: 3px 7px;
	margin: 0 7px;
	background-color: black;
	color: white;
}

.puce {
	width: 12px;
	height: 12px;
	margin-right: 3px;
	background: #eee;
	border-radius: 50%;
	font-weight: bold;
	margin: 5px 0;
	padding: 1px;
}

.digit {
	background: #fff;
	font-size: 1.2rem;
	color: #888;
	font-family: Arial;
	letter-spacing: 0.2rem;
}


.under {
	position: absolute;
	left: 0;
	z-index: -1 !important;
	opacity: 0 !important;
}



/*Floating Label css (-sm for small)
* Bootstrap styling for Floating Label
*/

.form-floating-sm>.form-control,
.form-floating-sm>.form-control-plaintext,
.form-floating-sm>.form-select {
	padding: 0rem 0.75rem;
}


.form-floating-sm>.form-control,
.form-floating-sm>.form-control-plaintext,
.form-floating-sm>.form-select {
	height: calc(2.5rem + 1px) !important;
	line-height: 1;
}


.form-floating-sm>label {
	padding: 0.5rem 0.75rem !important;
	font-size: .90rem !important;
	color: #777;
}

/*Autocomplete css 
* https://stackoverflow.com/questions/17838380/styling-jquery-ui-autocomplete
* Bootstrap styling for jQuery UI Autocomplete
*/

.ui-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	float: left;
	display: none;
	min-width: 160px;
	padding: 4px 0;
	margin: 0 0 10px 25px;
	list-style: none;
	background-color: #ffffff;
	border-color: #ccc;
	border-color: rgba(0, 0, 0, 0.2);
	border-style: solid;
	border-width: 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-background-clip: padding-box;
	-moz-background-clip: padding;
	background-clip: padding-box;
	/**border-right-width: 2px;
	*border-bottom-width: 2px;*/

	max-height: 400px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}

.ui-menu-item>a.ui-corner-all {
	display: block;
	padding: 3px 15px;
	clear: both;
	font-weight: normal;
	line-height: 18px;
	color: #555555;
	white-space: nowrap;
	text-decoration: none;
}

.ui-state-hover,
.ui-state-active {
	color: #ffffff;
	text-decoration: none;
	background-color: #0088cc;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	background-image: none;
}



/*recent*/

.hidden {
	display: none;
}

.alter {
	background: #fff;
}

.alter:nth-child(even) {
	background: #f0f2f6;
}

.alter:hover,
.hover:hover {

	text-decoration: none !important;
	color: #000 !important;
	opacity: 0.99;

}

.hover-2:hover,
.child-hover>*:hover {
	background-color: var(--hover-2) !important;
	text-decoration: none !important;
	/*color: #000 !important;*/
}

.hover-2:hover A {
	color: #25396f !important;
}



.alter.sky:nth-child(even) {
	background: #DDDDFF;
}

.rounded-30 {
	border-radius: 30px !important;
}

.rounded-15 {
	border-radius: 15px !important;
}

.border-333 {
	border: 1px solid #333
}

.shadow {
	/*box-shadow: 1px 1px 5px #888;*/
	box-shadow: 0px 0px 13px 0px rgba(62, 44, 90, 0.08);
}

.hover-shadow:hover {
	box-shadow: 1px 1px 5px #888 !important;
	;
	/*box-shadow: 0px 0px 13px 0px rgba(62, 44, 90, 0.08) !important;*/
}

.scale {
	transition: all 0s ease-in-out;
}

.scale:hover {
	transform: scale(1.03);
	text-decoration: none;
}

.scale-sm:hover {
	transform: scale(1.01);
	transition: all 150ms ease-in-out;
}

.scale:hover {
	transform: scale(1.03);
	text-decoration: none;
}

.line-height-0 {
	line-height: 0.5rem;

}

/*SHEETS*/

.sheet {
	z-index: -1 !important;
	visibility: hidden;
	/*background: rgba(0,0,0,0.1);*/
	opacity: 0;
	transition: all 0.14s ease-in-out;
	overflow-y: auto;
	display: inline !important;
}

.sheet.active {
	z-index: 10 !important;
	visibility: visible;
	opacity: 1;
}


.sheet.fly {
	position: fixed;
	height: 100%;
	width: 100%;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}


.sheet .sheet-dialog {

	display: inline-flex;
	flex-direction: column;
	background: #fff;
	height: 0;

	/* default layer appearance.. 

	width: 35%;
	height: 50%;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -42%);
	border-radius: 7px;
	box-shadow: 1px 1px 5px #888;
*/
	overflow: hidden;
	transition: height 0.15s linear;
}

.sheet.fly .sheet-dialog {
	display: flex;
	position: absolute !important;
	z-index: 1;

}

/*SHEET-DIALOG TYPES*/


/*-Layer sheet-*/

.sheet.fly .sheet-dialog.layer {

	z-index: -1;

	height: 0%;
	left: 50%;
	width: 35%;
	transform: translateX(-50%);
	border-radius: 7px;
	box-shadow: 1px 1px 5px #888;
	opacity: 0;
}



.sheet.fly.active .sheet-dialog.layer {
	height: auto;
	/**/
	transform: translateX(-50%);
	bottom: 10px;
	opacity: 1;
}

/*-Pane Dialog-*/

.sheet.fly .sheet-dialog.pane {
	z-index: -1;
	top: 0%;
	bottom: 5px;
	right: 0%;
	height: 100%;
	opacity: 0.5;
	box-shadow: 1px 1px 5px #888;
	border-radius: 7px;

	transition: all 0.2s linear;
	/**/

}

.sheet.fly.active .sheet-dialog.pane {
	opacity: 1 !important;
	top: 1.5%;
	right: 0.5%;
}



/*-Action Dialog-*/

.sheet.fly .sheet-dialog.action {
	height: 0;
	bottom: 0;
	border: 0px solid #bbb;
	border-bottom: 0;
	border-radius: 30px 30px 0px 0px;
	transform: scaleY(.95);
	box-shadow: 0px 0px 13px 0px rgba(62, 44, 90, 0.08);

}



.sheet.fly.active .sheet-dialog.action {
	transform: scale(1);

}

/*-Stack sheet-*/
.sheet.fly .sheet-dialog.stack {
	transform: translateX(300%);
	bottom: 0;
	border-right: 0;
	border-radius: 7px 0px 0px 7px;
	box-shadow: -2px 13px 10px #888;
	transition: all 0.5s linear;
	width: 100%
}

.sheet.fly.active .sheet-dialog.stack {
	transform: translateX(0)
}

.sheet-content {
	display: contents;
	flex-direction: column;
	padding: 0;
}

.sheet-header {
	display: flex;
	background-color: var(--blue-sigbm) !important;
	/*#25396F;*/
}

.sheet-title {
	flex-grow: 1;
	display: block;
	padding: 10px;
	font-family: Roboto-Condensed;
	font-weight: bold;
	color: white;

}

.discard-button {
	position: absolute;
	z-index: 1;
	right: 10px;
	margin: 10px;
	cursor: pointer;
}

.discard-button:hover {
	transform: scale(1.2);
}


.sheet-body {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	/*justify-content: stretch;*/

	padding: 0;
	border: 0px solid var(--blue-sigbm);
	max-height: 93vh;
	min-height: 20vh;
	overflow-y: auto !important;
	overflow-x: hidden;
}



.text-xxs {
	font-size: xx-small !important;
}

.font-size-small,
.font-small,
.text-small,
.text-sm {
	font-size: small;
}

.font-size-medium,
.font-medium,
.text-medium,
.text-md {
	font-size: 14px;
}

.font-size-large,
.font-large,
.text-large {
	font-size: x-large;
}

.text-black {
	color: black !important;
}

.bg-black {
	background-color: #000 !important;
}


.text-blue {
	color: blue !important;
}

.text-green-dark {
	color: #195e46 !important;
}

.bg-green-dark {
	background-color: #195e46 !important;
}

.text-green-clear {
	color: #c9f2d9 !important;
}

.bg-green-clear {
	background-color: #c9f2d9 !important;
}


.text-violet {
	color: violet !important;
}

.text-night {
	color: var(--night) !important;
}

.text-midnight {
	color: var(--midnight) !important;
}

.bg-midnight {
	background-color: var(--midnight) !important;
}

.bg-violet {
	background-color: violet !important;
}

.bg-violet-clear {
	background-color: #fcc9f4 !important;
}

.font-Roboto {
	font-family: "Roboto" !important;
}

.font-Roboto-Bold {
	font-family: "Roboto" !important;
}

.font-Roboto-Thin,
.font-slim {
	font-family: Roboto-Thin !important;
}

.font-Roboto-Condensed {
	font-family: Roboto-Condensed !important;
}

.font-Roboto-Condensed-Light {
	font-family: Roboto-Condensed-Light !important;
}

.font-Roboto-Condensed-Bold {
	font-family: Roboto-Condensed-Bold !important;
}

.font-Facebook {
	font-family: Facebook !important;
}

.font-Dax {
	font-family: Dax !important;
}

.font-Futura {
	font-family: Futura !important;
}

.font-Nunito {
	font-family: Nunito !important;
	letter-spacing: 0em !important;

}

.font-Groovy {
	font-family: 'Groovy' !important;
}

.font-Groovy-Sans {
	font-family: 'Groovy_sans' !important;
}

.font-CaviarDreams {
	font-family: 'Caviar Dreams' !important;
}



.font-Arial {
	font-family: Arial, Helvetica, sans-serif !important;
}


.no-line-height,
.flat {
	line-height: .9em;
}

.text-decoration-none {
	text-decoration: none;
}

.text-scroll {
	display: flex;
	width: 100%;
	max-width: 100%;
	overflow-x: auto !important;
	white-space: nowrap;
}

.max-width-100,
.wmax-100,
.mw,
.wm-100 {
	max-width: 97% !important;
}

.mh-100 {
	max-height: 90% !important;
}



.blur {

	background-color: rgb(0, 0, 0, 0.2);
	/*   background-color: #fff; */
	/*  background:#bde5fc;*/
	-webkit-backdrop-filter: blur(5px);
	-o-backdrop-filter: blur(5px);
	-moz-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);

	z-index: 0;
}

.right-0 {
	right: 0 !important;
}


/* The side navigation menu */

.main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}



.fixed-bar {
	position: sticky;
	z-index: 1 !important;
	left:0;
	width: 100%;

}


.sticky {
	position: sticky;
	z-index: 1;
	left:0;
}



/*
body .fixed-bar:first-child{
	z-index: 200 !important;border:
	 0px solid red;
}
*/

/*
.overbottombar {
	bottom: 0 !important;
}*/




.mr-custom {
	margin-right: 410px !important;
}



div.mainscene {
	position: relative;
}

/* Page content. The value of the margin-left property should match the value of the sidebar's width property */
div.content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

div.content>.flex-grow-1:first-of-type {
	padding-top: 52px;
}

.footer {
	/* position:fixed;*/
	bottom: 0;
	width: 100%;
	background-color: transparent;
	color: #000;
	padding: 5px;
}


.loading-container {
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

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

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

}

.spiner-cont {
	background-color: #195e464e;
	border-radius: 10px;
	padding: 30px;
}

.loading-spiner {
	border: 10px solid #fff;
	border-top: 10px solid #3498db;
	border-radius: 50%;
	width: 50px;
	height: 50px;

	animation: spin 2s linear infinite;

}


input[type=search]::-webkit-search-cancel-button {
	-webkit-appearance: searchfield-cancel-button;
}



/*
    Clearable text inputs. Source https://stackoverflow.com/a/6258628/4304740
*/
.clearable {
	background: #000 url(data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=) no-repeat right -101px center;
	background-size: 10px !important;
	border: 1px solid #999 !important;
	padding: 3px 18px 3px 4px !important;
	/* Use the same right padding (18) in jQ! */


	border-radius: 3px !important;
	transition: all 0.4s !important;
}

.clearable.x {
	background-position: right 15px center;
}

/* (jQ) Show icon */
.clearable.onX {
	cursor: pointer;
}

/* (jQ) hover cursor style */
.clearable::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

/* Remove IE default X */

.row {
	margin: 0 !important;
}


@keyframes spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}

}


@keyframes beat {
	0% {
		transform: scaleX(1.01);
	}

	50% {
		transform: scaleX(1.09);
	}

	100% {
		transform: scaleX(1.01);
	}
}

.pulsate {
	animation: beat 0.3s 2;
}


/*zoom in https://www.30secondsofcode.org/css/s/zoomin-zoomout-animation/ */

.zoom-in {
	animation: zoom-in-anim 300ms ease 1;
  }
  
  @keyframes zoom-in-anim {
	0% {
	  scale: 90%;
	}

	
	50% {
	  scale: 95%;
	}
	100% {
	  scale: 100%;
	}
  }



.shExploreSelectorValue,
.shExploreSelectorLabelText {
	color: blue !important;
}

/* pour menus "que voulez vous faire ?"... */
UL.mainappitems {
	display: flex;
	margin: 0;
}

.mainappitems LI {
	display: flex;
	flex-direction: column;
	border: 2px solid white;
	border-radius: 10px;
	margin: 3px;
	padding: 1px;
	background-color: #fff;
}

.mainappitems LI>*:first-child {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 7px;
	text-decoration: none !important;
	color: black;
	background-color: ivory;
	height: 100px;
	width: 100px;
	border: 0
}



.dropdown-menu-center {
	right: auto;
	left: 50%;

}

.dropdown-menu {
	max-height: 500px !important;
	overflow-y: auto;
	z-index: 300 !important;
}

/*
.collapsing {
	transition: none !important;
	-webkit-transition: none;
	display: none;
}
*/

/*
[data-bs-toggle="collapse"] i {
	transform: rotate(90deg) ;
}

[data-bs-toggle="collapse"].collapsed i {
	transform: rotate(0deg) ;
}
*/

/* https://stackoverflow.com/questions/23414333/thinner-bootstrap-progress-bars*/
.progress {
	height: 20px;
}

/* we increased it so the text is visible or change font size*/
.progress .sr-only {
	position: relative;
}

.progress-sm {
	height: 0.5rem !important;
}

.progress-lg {
	height: 1.5rem !important;
}


.tick {
	font-family: FontAwesome;
}

.tick-checked::before {
	content: '\f00c';
	margin: 0 5px;
	font-family: FontAwesome;
}

.tick-checked.tick-end::after {
	content: '\f00c';
	margin: 0 5px;
	font-family: FontAwesome;
}

[data-bs-toggle="collapse"]:not(.no-tick)::after {
	content: '\f0d7';
	font-family: FontAwesome;
	margin: 0 5px;
	transition: all 0.3s ease-in-out;
}

[data-bs-toggle="collapse"].collapsed:not(.no-tick)::after {
	content: '\f0da';
	font-family: FontAwesome;
	margin: 0 5px;
}

.collapsed:not(.no-tick)::after {
	content: '\f0da';
	font-family: FontAwesome;
	margin: 0 5px;
}


/**/
.content-minus::after {
	font-family: FontAwesome;
	content: '\f068';
	color: yellow;
}

.content-plus::after {
	font-family: FontAwesome;
	content: '\f067';
	color: yellow;
}


.toggle-minus::after {
	font-family: FontAwesome;
	content: '\f068';
	color: yellow;
}

.collapsed .toggle-minus::after {
	font-family: FontAwesome;
	content: '\f067';
	color: yellow;
}

.icon-star::after {
	font-family: FontAwesome;
	content: '\f006';
	/*star empty*/
}

.icon-star-full::after {
	font-family: FontAwesome;
	content: '\f005';
	/*star full*/
	color: orange;
}

.btn {
	text-decoration: none;
	border: none;
	padding: 12px 40px;
	color: #fff;
	border-radius: 5px;
	/* 7px 6px 28px -3px rgba(0, 0, 0, 0.24);*/
	cursor: pointer;
	outline: none;
	transition: 0.2s all;
}

.btn:hover {
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.24);

}

/* Adding transformation when the button is active */

.btn:active {
	transform: scale(0.97);
	/* Scaling button to 0.98 to its original size */
	box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
	/* Lowering the shadow */
}

.btn.btn-canari {
	background-color: var(--canari) !important;
	color: #000;
}


/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap {
	white-space: pre-wrap;
	/* CSS3 */
	white-space: -moz-pre-wrap;
	/* Firefox */
	white-space: -pre-wrap;
	/* Opera <7 */
	white-space: -o-pre-wrap;
	/* Opera 7 */
	word-wrap: break-word;
	/* IE */
}

/*https://stackoverflow.com/a/3397158/4304740*/

textarea:focus,
input:focus,
*:focus {
	outline: none !important;
}


/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {

	BODY.noscroll {
		overflow: hidden !important;
	}

	.errorToast {
		width: 92% !important;
		height: 92% !important;
	}



	.sheet-dialog {
		position: fixed !important;
	}

	.sheet.fly.active .sheet-dialog.layer {

		width: 98% !important;
		/*height: auto  !important;98%*/
		/*height: 98% !important;*/

		max-height: 99%;
		bottom: 5px !important;
		z-index: -1 !important;
	}


	.sheet.fly.active .sheet-dialog.pane {

		width: 99% !important;
		height: 100% !important;
	}

	.sheet.fly.active .sheet-dialog.action {
		width: 100% !important;
	}



	/**/

	.sheet.layer.active {
		z-index: 999 !important;
	}

	/**/

	.container-fluid {
		padding: 0;
	}

	.sidebar {
		z-index: 999;
		background: white;
		width: 90% !important;
		top: 0;
		box-shadow: 1px 1px 5px #000;
		transform: translateX(-101%);
		border-right: 1px solid #ccc;
		transition: all 0.22s linear 0s;
	}

	.sidebar.move {
		transform: translateX(0px);
	}

	div.mainscene {
		margin-left: 0;
		padding: 0;
		padding-bottom: 25px;
	}

	.menumobile {
		position: fixed;
		z-index: 2;
		bottom: 0;
		width: 100%;
		color: #f1f1f1;
	}


	.scrollable {
		max-height: 70svh;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.alter:hover,
	.hover:hover {
		text-decoration: none !important;
		color: #000 !important;
		opacity: 1;
	}

	.scale-sm:hover {
		transform: initial;
		transition: initial;
	}

	.fixed-bar-toggle {
		position: relative !important;
		display: block;
	}

	.scrollable-toggle {
		max-height: initial !important;
		overflow-y: auto;
		overflow-x: hidden;
	}


}

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) {

	.fixed-bar,
	.overbottombar {
		padding-right: 0px;
		left: 0;
	}

	/*
	.overbottombar {
		bottom: initial !important;
	}*/

}

/**END SHEETS**/