@import url('global.css');

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

.loginContainer
{
	position: absolute;

	height: calc(100vh + var(--dflt-padding));
	width: calc(100vw  + var(--dflt-padding));

	top: calc(0px - var(--dflt-padding));
	left: calc(0px - var(--dflt-padding));

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

	background-image: -webkit-linear-gradient(left bottom, #07a0c3, #108aa9, #127490, #135f77, #114b5f);
	background-image: -o-linear-gradient(left bottom, #07a0c3, #108aa9, #127490, #135f77, #114b5f);
	background-image: linear-gradient(to right top, #07a0c3, #108aa9, #127490, #135f77, #114b5f);
}

.loginContainer > .loginMenu
{
	position: absolute;

	width: 100vw;

	padding: 20px;
	top: var(--dflt-padding);
	left: var(--dflt-padding);

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

.loginMenu > img
{
	height: 20px;
}

.loginMenu > h1
{
	margin: 0;

	font-size: 25px;
	font-weight: 600;
	color: var(--txt-white);
}

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

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

	border-radius: var(--radius);

	background-color: var(--bck-white);
	box-shadow: var(--shdw-soft);
}

.loginContainer > .loginForm > .loginFormHeader,
.loginContainer > .loginForm > .loginFormFooter
{
	min-height: 75px;
	width: 100%;
	flex-shrink: 0;
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loginContainer > .loginForm > .loginFormHeader
{
	display: none;
}

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

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

.loginContainer > .loginForm > .loginFormHeader > h1
{
	margin: 0;

	font-size: 30px;
	color: var(--txt-black);
}

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

	padding: 30px;
	padding-bottom: 0;

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

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

.loginFormBody > .form-group > label
{
	margin: 5px 0;
	font-size: 16px;
	font-weight: 600;
}

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

.loginFormFooter > button
{
	width: 100%;
}

/*===============================================================================*/
/*=============================== REGISTER PAGE =================================*/
/*===============================================================================*/

.registerContainer
{
	position: absolute;

	height: calc(100vh + var(--dflt-padding));
	width: calc(100vw  + var(--dflt-padding));

	top: calc(0px - var(--dflt-padding));
	left: calc(0px - var(--dflt-padding));

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

	background-image: -webkit-linear-gradient(left bottom, #07a0c3, #108aa9, #127490, #135f77, #114b5f);
	background-image: -o-linear-gradient(left bottom, #07a0c3, #108aa9, #127490, #135f77, #114b5f);
	background-image: linear-gradient(to right top, #07a0c3, #108aa9, #127490, #135f77, #114b5f);

	overflow: hidden;
}

.registerContainer > .registerFormContainer
{
	height: 100%;
	width: 100%;

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

.registerFormContainer > .registerMenu
{
	position: absolute;

	width: 100vw;

	padding: 20px;
	top: var(--dflt-padding);
	left: var(--dflt-padding);

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

.registerMenu > img
{
	height: 20px;
}

.registerMenu > h1
{
	margin: 0;

	font-size: 25px;
	font-weight: 600;
	color: var(--txt-white);
}

.registerFormContainer > .registerForm
{
	height: auto;
	min-height: 400px;
	width: 60vw;

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

	border-radius: var(--radius);

	background-color: var(--bck-white);
	box-shadow: var(--shdw-soft);
}

.registerForm > .registerFormHeader,
.registerForm > .registerFormFooter
{
	min-height: 75px;
	width: 100%;
	flex-shrink: 0;
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.registerForm > .registerFormHeader
{
	display: none;
}

.registerForm > .registerFormFooter
{
	justify-content: flex-end;

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

.registerForm > .registerFormHeader > h1
{
	margin: 0;

	font-size: 30px;
	color: var(--txt-black);
}

.registerForm > .registerFormBody
{
	flex: 1;
	width: 100%;

	padding: 30px;
	padding-bottom: 0;

	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	column-gap: var(--dflt-padding);
}

.registerFormBody > .registerPanel
{
	padding: var(--dflt-padding);

	flex: 1;

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

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

.registerFormBody > .registerPanel.wider
{
	flex: 2;
}

.registerPanel > h2
{
	margin: 0;
	margin-bottom: var(--dflt-padding);

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

	font-size: 25px;
	font-weight: 600;
	color: var(--txt-black);
}

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

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

.registerPanel > .form-group.inline
{
	display: flex;
	column-gap: var(--dflt-padding);
}

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

.form-group > label,
.form-group.inline > .form-row > label
{
	margin: 5px 0;
	font-size: 16px;
	font-weight: 600;
}

.registerPanel > .form-group input,
.registerPanel > .form-group.inline > .form-row input
{
	height: 45px;
	max-height: unset;
	transition: all .1s;
}

.registerPanel > .form-group input.inputError,
.registerPanel > .form-group.inline > .form-row input.inputError
{
	border-color: var(--bck-red);
	transition: all .1s;
}

.form-group > .input-wrapper,
.form-group.inline > .form-row > .input-wrapper
{
	display: flex;
}

.form-group > .input-wrapper input,
.form-group.inline > .form-row > .input-wrapper input
{
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

button.btn-input-endcap
{
	height: 45px;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.registerFormFooter > button
{
	width: 100%;
}

/*===============================================================================*/
/*================================ PRODUCT FORM =================================*/
/*===============================================================================*/

.registerForm > .productFormBody
{
	flex: 1;
	width: 100%;

	padding: 30px;
	padding-bottom: 0;

	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	row-gap: var(--dflt-padding);
}

.productFormBody > .productPanel
{
	padding: var(--dflt-padding);

	flex: 1;

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

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

.productFormBody > .productPanel.wider
{
	flex: 2;
}

.productPanel > h2
{
	margin: 0;
	margin-bottom: var(--dflt-padding);

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

	font-size: 25px;
	font-weight: 600;
	color: var(--txt-black);
}

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

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

.productPanel > .form-group.inline
{
	display: flex;
	column-gap: var(--dflt-padding);
}

/*===============================================================================*/
/*=========================== PAGE CONTAINER GLOBAL =============================*/
/*===============================================================================*/

.pageContainer
{
	width: 100%;
	padding: var(--dflt-padding);
	margin-left: var(--dflt-padding);

	border-radius: var(--radius);

	background-color: var(--bck-white);
	box-shadow: var(--shdw-soft);
}

.pageContainer > .mainTitle
{
	height: 35px;
	width: 100%;
	margin: 0;
	margin-bottom: var(--dflt-padding);

	display: flex;
	align-items: center;

	font-size: 25px;
	font-weight: 500;
}

.pageContainer > hr.pageContainerSeparator
{
	margin: var(--dflt-padding) 0;
	margin-left: calc(0px - var(--dflt-padding));
	margin-right: calc(0px - var(--dflt-padding));

	border-top: 2px solid var(--bck-main-menu);
}

.pageContainer > .mainTitle > i
{
	font-size: 20px;
	margin-right: 10px;
}

.pageContainer > .mainTitle > span
{
	flex-shrink: 0;
}

.pageContainer > .pageContent
{
	height: calc(100% - 50px) !important;
}

/*===============================================================================*/
/*============================= PAGE CONTAINER MENU =============================*/
/*===============================================================================*/

.pageContainer > .pageMenu
{
	display: flex;
	column-gap: var(--dflt-padding);
}

/*===============================================================================*/
/*============================= LOCK IMG CONTAINER ==============================*/
/*===============================================================================*/

.lockRight
{
	height: 100%;
	width: 100%;

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

.lockRight > img
{
	width: 65%;
	max-width: 450px;

	aspect-ratio: 1/1;
}

.lockRight > span
{
	text-align: center;

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

/*===============================================================================*/
/*============================= PLANNING CONTAINER ==============================*/
/*===============================================================================*/

/*================================== PLANNING ===================================*/

.pageContainer > .pageContent#planningContainer
{
	width: 100%;

	display: flex;
	column-gap: var(--dflt-padding);
}

.pageContent#planningContainer > #planningContent
{
	position: relative;
	width: calc(100% - 270px);
}

.pageContent#planningContainer > #planningContent > img
{
	position: absolute;

	width: 50px;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	z-index: 1;
}

.pageContent#planningContainer > #planningColFilters
{
	width: 270px;
	padding: var(--dflt-padding);

	display: flex;
	flex-direction: column;
	row-gap: var(--dflt-padding);

	border-radius: var(--radius);

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

#planningColFilters > h1
{
	font-size: 20px;
	color: var(--txt-white);
}

#planningColFilters label
{
	color: var(--txt-white);
}

#planningColFilters #planningFilterUsers
{
	padding: var(--padding-small);

	list-style-type: none;
	color: var(--txt-white);
}

#planningFilterUsers > .userFilters
{
	margin-bottom: 5px;

	cursor: pointer;

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

#planningFilterUsers > li > input[name="userFiltersCheckbox[]"]
{
	display: none;
}

#planningFilterUsers > li > span
{
	margin-right: 5px;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
  	-moz-user-select: none;
   	-ms-user-select: none;
	user-select: none;

	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#planningFilterUsers > li > input[name="userFiltersCheckbox[]"]:not(:checked) ~ span
{
	font-weight: normal;
	text-decoration: line-through;
}

#planningFilterUsers > li > input[name="userFiltersCheckbox[]"]:checked ~ span
{
	font-weight: 600;
}

.btnGetUserNotWorking
{
	height: 25px;
	aspect-ratio: 1/1;
}

.btnGetUserNotWorking.active
{
	border: 2px solid var(--bck-main-light) !important;
	background-color: transparent !important;
}

/*================================ MODAL ADD EVENT ==================================*/

.planningRdvContainer
{
	padding: var(--dflt-padding);
	margin-bottom: var(--dflt-padding);

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

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

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

.planningRdvContainer > h1
{
	margin: 0;
	margin-bottom: var(--padding-small);

	font-size: 20px;
}

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

.modalPlanningEventWarning
{
	padding: var(--padding-small);
	border-radius: var(--radius);
	font-weight: bold;
	color: var(--txt-white);
	background: var(--ajs-error);
	margin-bottom: 20px;
}

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

.modalPlanningEventInfos,
.modalPlanningCustomerInfos,
.modalPlanningFilesInfos
{
	display: flex;
	flex-direction: column;
	row-gap: var(--padding-small);
}

.modalPlanningEventInfos > h1
{
	font-size: 17px;
}

.modalPlanningCustomerInfos > h1,
.modalPlanningFilesInfos > h1
{
	font-size: 17px;
	margin-top: var(--dflt-padding);
}

.modalPlanningFilesInfos > .modalPlanningFilesList
{
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	grid-auto-rows: 150px;
	justify-content: space-between;
	column-gap: var(--padding-small);
	row-gap: var(--padding-small);
}

.modalPlanningFilesList > .modalPlanningFiles
{
	height: 150px;
	width: 100%;

	display: flex;
	flex-direction: column;
	transition: all .1s;
}

.modalPlanningFilesList > .modalPlanningFiles:hover
{
	transform: scale(1.02);
	cursor: pointer;
	transition: all .1s;
}

.modalPlanningFiles > .modalPlanningFilesIcons
{
	position: relative;
	height: -webkit-fill-available;

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

	font-size: 30px;

	border: 1px solid var(--border-grey);
	border-radius: var(--radius-small);

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

.modalPlanningFilesIcons > .modalPlanningFilesWait
{
	position: absolute;
	height: 100%;
	width: 100%;

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

	border-radius: var(--radius-small);
	background: var(--bck-lightgrey);
}

.modalPlanningFilesWait > img
{
	height: 40px;
}

.modalPlanningFiles > span
{
	padding: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

/*===============================================================================*/
/*============================== RIGHTS CONTAINER ===============================*/
/*===============================================================================*/

/* .pageContainer > .pageContent#profilsContainer
{
} */

#profilsContainer > .profilsHeaderContainer
{
	height: 100px;

	display: flex;
	align-items: center;
	column-gap: var(--dflt-padding);
}

.profilsHeaderContainer > .profilsHeader
{
	flex: 1;
	padding: var(--dflt-padding);

	display: flex;
	flex-direction: column;

	border-radius: var(--radius);

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

.profilsHeader > h1
{
	margin-bottom: var(--padding-small);
	font-size: 20px;

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

.profilsHeader > .profilsFilters
{
	display: flex;
	column-gap: var(--padding-small);
}

.profilsFilters > button
{
	white-space: nowrap;
}

.profilsModuleContainer
{
	position: relative;

	height: calc(100% - (100px + var(--dflt-padding)));
	margin-top: var(--dflt-padding);
	padding: var(--dflt-padding);

	display: flex;
	flex-direction: column;

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

.profilsModuleContainer > .profilsModuleEmpty
{
	position: absolute;

	height: 100%;
	width: 100%;
	padding: var(--dflt-padding);
	top: 0;
	left: 0;

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

	border-radius: var(--radius);
	background-color: rgba(0,0,0,0.3);

	z-index: 1;
}

.profilsModuleEmpty > h1
{
	margin: 0;
	padding: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 4px;
	font-size: 20px;
	font-weight: 500;
	border-radius: var(--radius);
	color: var(--txt-white);
	background-color: var(--bck-main-dark);
}

.profilsModuleContainer > h1
{
	height: 35px;
	width: 100%;
	margin: 0;
	margin-bottom: var(--dflt-padding);

	display: flex;
	align-items: center;
	font-size: 25px;
	font-weight: 500;
}

.profilsModuleContainer > .profilsModuleContent
{
	flex: 1;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: 50px;
	column-gap: var(--dflt-padding);
	row-gap: var(--dflt-padding);
}

.profilsModuleItem
{
	padding: var(--dflt-padding);

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

	border-radius: var(--radius);

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

.profilsModuleItem.check
{
	background-color: var(--bck-green);
}

.profilsModuleItem.uncheck
{
	background-color: var(--bck-red);
}

.profilsModuleItem.null
{
	background-color: var(--bck-main-light);
}

.profilsModuleItemLeft,
.profilsModuleItemRight
{
	display: flex;
	align-items: center;
}

.profilsModuleItemLeft
{
	column-gap: 4px;
}

.profilsModuleItemRight > input[type="radio"]
{
	margin: 0;
	margin-right: 4px;
}

.profilsModuleItemRight > label:not(:last-of-type)
{
	margin-right: 10px;
}

.profilsModuleContainer > .profilsModuleFooter
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: var(--padding-small);
}

/*===============================================================================*/
/*=============================== USERS CONTAINER ===============================*/
/*===============================================================================*/

/* .pageContainer > .pageContent#usersGrid
{
} */

#modal-user-config .modal-body
{
	height: 100%;

	display: flex;
	flex-direction: column;
}

.modalUsersConfigContainer
{
	height: calc(100% - 50px);
	width: 100%;
	margin-top: var(--dflt-padding);

	display: flex;
	column-gap: var(--dflt-padding);
}

.modalUsersConfigContainer:not(.active)
{
	display: none;
}

/*=============================== RIGHTS ===============================*/

.modalUsersRightsContent
{
	height: 100%;
	width: 50%;

	display: flex;
	flex-direction: column;

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

	overflow: hidden;
}

.modalUsersRightsContent > h1
{
	height: 65px;

	font-size: 20px;
	padding: var(--dflt-padding);

	display: flex;
	align-items: center;
	column-gap: var(--padding-small);

	color: var(--txt-black);
}

.modalUsersRightsContent > .modalUsersRightsList
{
	height: calc(100% - 65px);
	padding: var(--dflt-padding);
	padding-top: 0;

	display: flex;
	flex-direction: column;
	row-gap: 5px;

	overflow: auto;
}

.modalUsersRightsList > .modalUsersRightItem
{
	width: 100%;
	padding: var(--padding-small);
	display: flex;
	flex-direction: column;
	column-gap: var(--padding-large);

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

	color: var(--txt-black);
	background-color: var(--bck-lightgrey);
}

.modalUsersRightItem > .modalUsersRightItemTitle
{
	width: 100%;
	margin-bottom: 5px;

	display: flex;
	align-items: center;
	column-gap: var(--padding-extra-small);

	font-variant: all-small-caps;
	font-size: 20px;
}

.modalUsersRightItemTitle > i
{
	font-size: 15px;
}

.modalUsersRightItem > .modalUsersRightInputContainer
{
	flex: 1;
	display: flex;
	align-items: center;
	column-gap: var(--padding-small);

	white-space: nowrap;
}

.modalRightDetailProfilsContainer
{
	display: flex;
	flex-direction: column;
	row-gap: var(--padding-small);
}

/*=============================== APPOINTMENTS ===============================*/

.modalUsersRdvContent
{
	height: 100%;
	width: 100%;

	position: relative;
	display: flex;

	overflow: hidden;
}

.modalUsersRdvAdded,
.modalUsersRdvAvailable
{
	flex: 1;

	display: flex;
	flex-direction: column;

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

.modalUsersRdvAdded
{
	margin-right: var(--dflt-padding);
	border: 1px solid var(--border-grey);
}

.modalUsersRdvAdded > h1
{
	font-size: 20px;
	padding: var(--dflt-padding);

	color: var(--txt-black);
}

.modalUsersRdvAdded > .modalUsersRdvAddedList
{
	position: relative;

	height: 100%;
	padding: var(--dflt-padding);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: min-content;
	column-gap: 10px;
	row-gap: 10px;
}

.modalUsersRdvAddedList > .modalUsersRdv
{
	position: relative;

	min-height: 55px;
	width: 100%;
	padding: var(--padding-small);

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

	border-radius: var(--radius);

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

.modalUsersRdvAddedList > .modalUsersRdv i,
.modalUsersRdvAddedList > .modalUsersRdv span
{
	flex-shrink: 0;
	color: var(--txt-white);
}

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

.modalUsersRdvAvailable
{
	max-width: 350px;
	background-color: var(--bck-main-dark);
}

.modalUsersRdvAvailable > h1
{
	font-size: 20px;
	padding: var(--dflt-padding);

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

.modalUsersRdvAvailable > .modalUsersRdvAvailableList
{
	padding: var(--dflt-padding);
	padding-top: 0;
	height: 100%;
	overflow: auto;
}

.modalUsersRdvAvailableList > .modalUsersRdv
{
	height: 55px;
	width: 100%;
	max-width: 320px;
	margin-bottom: 5px;
	padding: var(--padding-small);

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

	border-radius: var(--radius);

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

.modalUsersRdv.ui-draggable-dragging
{
	z-index: 100;
	box-shadow: var(--shdw-heavy);
	transition: box-shadow .1s;
}

.modalUsersRdv > .modalUsersRdvHandle,
.modalUsersRdv > .modalUsersRdvInfos
{
	color: var(--txt-black);
}

.modalUsersRdv > .modalUsersRdvHandle
{
	margin-right: var(--dflt-padding);
}

.modalUsersRdv > .modalUsersRdvHandle:hover
{
	cursor: move;
}

.modalUsersRdv > .modalUsersRdvDot
{
	height: 15px;
	margin-right: 5px;

	border: 2px solid var(--bck-white);
	border-radius: var(--radius-full);

	aspect-ratio: 1/1;
}

/*===============================================================================*/
/*================================ PDV CONTAINER ================================*/
/*===============================================================================*/

/* .pageContainer > .pageContent#pdvGrid
{
} */

#modal-store-config .modal-body
{
	height: 100%;

	display: flex;
	flex-direction: column;
}

#modal-store-config .modal-body > .modalStoreConfigContent
{
	height: 100%;
	margin-top: var(--dflt-padding);

	position: relative;
	display: flex;

	overflow: hidden;
}

#modal-store-config .modal-body > .modalStoreConfigContent:not(.active)
{
	display: none;
}

.modalStoreConfigAdded,
.modalStoreConfigAvailable
{
	flex: 1;

	display: flex;
	flex-direction: column;

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

.modalStoreConfigAdded
{
	margin-right: var(--dflt-padding);
	border: 1px solid var(--border-grey);
}

.modalStoreConfigAdded > h1
{
	font-size: 20px;
	padding: var(--dflt-padding);

	color: var(--txt-black);
}

.modalStoreConfigAdded > .modalStoreConfigAddedList
{
	position: relative;

	height: 100%;
	padding: var(--dflt-padding);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-auto-rows: min-content;
	column-gap: 10px;
	row-gap: 10px;
}

.modalStoreConfigAddedList > .modalStoreConfigUser,
.modalStoreConfigAddedList > .modalStoreConfigRDV
{
	position: relative;

	min-height: 55px;
	width: 100%;
	padding: var(--padding-small);

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

	border-radius: var(--radius);

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

.modalStoreConfigAddedList > .modalStoreConfigUser i,
.modalStoreConfigAddedList > .modalStoreConfigUser span,
.modalStoreConfigAddedList > .modalStoreConfigRDV i,
.modalStoreConfigAddedList > .modalStoreConfigRDV span
{
	flex: 1;
	flex-shrink: 0;

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

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

.modalStoreConfigAddedList > .modalStoreConfigRDV > .modalStoreConfigRdvConfig
{
	position: absolute;

	height: calc(55px + var(--padding-small));
	width: 100%;
	left: 0;
	top: calc(100% - var(--padding-small));

	border-radius: var(--radius);

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

	z-index: 1;
}

.modalStoreConfigAddedList > .modalStoreConfigRDV > .modalStoreConfigRdvConfig > .fakeTop
{
	height: var(--padding-small);
	width: 100%;
	background-color: var(--bck-main-light);
}

.modalStoreConfigAddedList > .modalStoreConfigRDV > .modalStoreConfigRdvConfig > .modalStoreConfigRdvConfigContent
{
	padding: var(--padding-small);
	height: calc(100% - var(--padding-small));
	width: 100%;

	display: flex;
	align-items: center;

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

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

.modalStoreConfigRdvConfig > .modalStoreConfigRdvConfigContent > label
{
	width: auto;

	font-weight: 500;
	color: var(--txt-black);
}

.modalStoreConfigRdvConfig > .modalStoreConfigRdvConfigContent > input
{
	flex: 1;
	margin: 0 var(--dflt-padding);
}

.modalStoreConfigAddedList > .modalStoreConfigUser button:first-of-type,
.modalStoreConfigAddedList > .modalStoreConfigRDV button:first-of-type
{
	margin-left: auto !important;
}

.modalStoreConfigAddedList > .modalStoreConfigUser button,
.modalStoreConfigAddedList > .modalStoreConfigRDV button
{
	height: 100%;
	margin-left: 5px;

	display: flex;
	align-items: center;
}

.modalStoreConfigAvailable
{
	max-width: 350px;
	background-color: var(--bck-main-dark);
}

.modalStoreConfigAvailable > h1
{
	font-size: 20px;
	padding: var(--dflt-padding);

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

.modalStoreConfigAvailable > .modalStoreConfigAvailableList
{
	padding: var(--dflt-padding);
	padding-top: 0;
	height: 100%;
	overflow: auto;
}

.modalStoreConfigAvailableList > .modalStoreConfigUser,
.modalStoreConfigAvailableList > .modalStoreConfigRDV
{
	height: 55px;
	width: 100%;/*calc(350px - (var(--dflt-padding) * 2));*/
	max-width: 320px;
	margin-bottom: 5px;
	padding: var(--padding-small);

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

	border-radius: var(--radius);

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

.modalStoreConfigUser.ui-draggable-dragging,
.modalStoreConfigRDV.ui-draggable-dragging
{
	z-index: 100;
	box-shadow: var(--shdw-heavy);
	transition: box-shadow .1s;
}

.modalStoreConfigUser > .modalStoreConfigUserHandle,
.modalStoreConfigUser > .modalStoreConfigUserInfos,
.modalStoreConfigRDV > .modalStoreConfigRDVHandle,
.modalStoreConfigRDV > .modalStoreConfigRDVInfos
{
	color: var(--txt-black);
}

.modalStoreConfigUser > .modalStoreConfigUserHandle,
.modalStoreConfigRDV > .modalStoreConfigRDVHandle
{
	margin-right: var(--dflt-padding);
}

.modalStoreConfigUser > .modalStoreConfigUserHandle:hover,
.modalStoreConfigRDV > .modalStoreConfigRDVHandle:hover
{
	cursor: move;
}

.modalStoreConfigRDV > .modalStoreConfigRDVDot
{
	height: 15px;
	margin-right: 5px;

	border: 2px solid var(--bck-white);
	border-radius: var(--radius-full);

	aspect-ratio: 1/1;
}

/*===============================================================================*/
/*============================== USER HORAIRE PDV ===============================*/
/*===============================================================================*/

#modal-user-horaire-config .modal-body
{
	display: flex;
	flex-direction: column;
}

.modalUserHoraireConfigInfos
{
	padding: var(--dflt-padding);
	margin-bottom: var(--dflt-padding);

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

	border-radius: var(--radius);

	color: var(--txt-white);
	background-color: var(--bck-main-dark);
}

.modalUserHoraireConfigInfos > span
{
	margin-right: 7px;
}

.modalUserHoraireConfigInfos > .modalUserHoraireConfig
{
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.modalUserHoraireConfig > .form-control
{
	width: 130px;
}

.modalUserHoraireConfigList
{
	position: relative;

	height: 100%;
}

.modalUserHoraireConfigList > .modalUserHoraireConfigWarning
{
	position: absolute;

	height: 100%;
	width: 100%;

	top: 0;
	left: 0;

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

	border-radius: var(--radius);
	background-color: rgba(0,0,0,0.3);
}

.modalUserHoraireConfigList > .modalUserHoraireConfigWarning > h1
{
	margin: 0;
	padding: 30px;

	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 4px;

	font-size: 20px;
	font-weight: 500;

	border-radius: var(--radius);

	color: var(--txt-white);
	background-color: var(--bck-main-dark);
}

.modalUserHoraireConfigList > .modalUserHoraireConfigContent
{
	height: 100%;

	display: flex;
	flex-direction: column;

	overflow: auto;
}

.modalUserHoraireConfigContent > .modalUserHoraireConfigWeek
{
	display: flex;
	flex-direction: column;
}

.modalUserHoraireConfigWeek > .modalUserHoraireConfigWeekTitle
{
	margin: var(--dflt-padding) 0;
	font-size: 20px;
}

.modalUserHoraireConfigWeek > .modalUserHoraireConfigRow
{
	padding: 5px;
	margin-bottom: 5px;

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

.modalUserHoraireConfigWeek > .modalUserHoraireConfigRow:first-of-type
{
	border: 1px solid var(--border-grey);
	border-radius: var(--radius);
	background-color: var(--bck-body);
}

.modalUserHoraireConfigRow > .modalUserHoraireConfigRowBlock
{
	height: 100%;
	margin-left: var(--padding-small);

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

.modalUserHoraireConfigRow > .modalUserHoraireConfigRowBlock:first-of-type
{
	margin: 0;
}

.modalUserHoraireConfigRowBlock.smallBlock
{
	flex: 0;
	min-width: 120px;
}

.modalUserHoraireConfigRowBlock.mediumBlock
{
	flex: 1;
}

.modalUserHoraireConfigRowBlock.largeBlock
{
	flex: 3;
}

.modalUserHoraireConfigRowBlock.centerBlock
{
	justify-content: center;
}

.modalUserHoraireConfigRowBlock.endBlock
{
	justify-content: flex-end;
}

.modalUserHoraireConfigRowBlock > label
{
	height: 100%;
	min-width: fit-content;
	padding: 0 10px;

	display: flex;
	align-items: center;

	color: var(--txt-black);
}

.modalUserHoraireConfigRowBlock > label.important
{
	font-weight: 600;
}

.modalUserHoraireConfigRowBlock > button
{
	height: 100%;
	flex: 1;
}

/*===============================================================================*/
/*============================== TYPE RDV CONTAINER =============================*/
/*===============================================================================*/

#modal-type-rdv-config .modal-body
{
	display: flex;
	flex-direction: column;
}

#modal-type-rdv-config .modal-body > .modalTypeRdvConfigContainer
{
	height: 100%;
	margin-top: var(--dflt-padding);

	position: relative;
	display: flex;

	overflow: hidden;
}

#modal-type-rdv-config .modal-body > .modalTypeRdvConfigContainer:not(.active)
{
	display: none;
}

.modalTypeRdvConfigContainer > .modalTypeRdvUserListContent,
.modalTypeRdvConfigContainer > .modalTypeRdvSmsListContent
{
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);

	border: 1px solid var(--border-grey);
}

.modalTypeRdvUserListContent > h1,
.modalTypeRdvSmsListContent > h1
{
	height: 65px;
	font-size: 20px;
	padding: var(--dflt-padding);
	display: flex;
	align-items: center;
	column-gap: var(--padding-small);
	color: var(--txt-black);
}

.modalTypeRdvAcceptedUserList,
.modalTypeRdvAcceptedPDVList
{
	position: relative;
	height: 100%;
	padding: var(--dflt-padding);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	grid-auto-rows: min-content;
	column-gap: 10px;
	row-gap: 10px;
}

.modalTypeRdvAcceptedUserList > .modalTypeRdvAcceptedUser,
.modalTypeRdvAcceptedPDVList > .modalTypeRdvAcceptedUser
{
	position: relative;
	min-height: 55px;
	width: 100%;
	padding: var(--padding-small);

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

	border-radius: var(--radius);
	background-color: var(--bck-main-light);
}

.modalTypeRdvAcceptedUser > span
{
	flex: 1;
	flex-shrink: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--txt-white);
}

.modalTypeRdvSmsList
{
	position: relative;
	padding: var(--dflt-padding);
	padding-top: 0;
	overflow: auto;
}

.modalTypeRdvSmsList > .addedSmsRow
{
	padding: var(--dflt-padding);

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

	border: 1px solid var(--border-grey);
	background: var(--bck-white);
}

.modalTypeRdvSmsList > .addedSmsRow.header
{
	position: sticky;
	top: 0;

	font-weight: bold;

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

	color: var(--txt-white) !important;
	background-color: var(--bck-main-dark);
}

.modalTypeRdvSmsList > .addedSmsRow:not(:first-of-type)
{
	margin-top: -1px
}

.modalTypeRdvSmsList > .addedSmsRow.end
{
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);

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

.addedSmsRow > .addedSmsCell:first-of-type
{
	font-weight: bold;
}

.addedSmsRow > .addedSmsCell.large
{
	width: 250px;
}

.addedSmsRow > .addedSmsCell.end
{
	width: 100px;
	margin-left: auto;

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

/*===============================================================================*/
/*================================== USERS EVENT ================================*/
/*===============================================================================*/

/* .pageContainer > .pageContent#usersEventGrid
{
} */

/*===============================================================================*/
/*=================================== MODELE SMS ================================*/
/*===============================================================================*/

.pageContainer > .pageContent#smsModeleContent
{
	display: flex;
	flex-direction: column;
}

.pageContent#smsModeleContent > .pageSmsHeader
{
	padding: var(--dflt-padding);
	margin-bottom: var(--dflt-padding);
	border-radius: var(--radius);
	background-color: var(--bck-main-dark);
}

.pageContent#smsModeleContent > .smsModeleGrid
{
	flex: 1;

	display: grid;
	grid-template-columns: repeat(auto-fill, 210px);
	grid-auto-rows: min-content;
	justify-content: space-between;
	row-gap: 10px;

	overflow: auto;
}

.smsModeleGrid > .smsModeleContainer
{
	width: 100%;
}

.smsModeleContainer > .smsModeleHeader
{
	padding: var(--padding-extra-small) var(--padding-small);
	margin-bottom: 5px;

	display: flex;
	align-items: center;

	border-radius: var(--radius);

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

.smsModeleHeader > label
{
	font-weight: bold;
	margin-right: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.smsModeleHeader > i
{
	margin-right: 10px;
	font-size: 13px;
	flex-shrink: 0;
}

.smsModeleHeader > button:first-of-type
{
	margin-left: auto;
}

.smsModeleHeader > button
{
	border-radius: var(--radius-small);
}

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

.smsModeleContainer > .smsModelePhone
{
	position: relative;
	width: 100%;
	aspect-ratio: 9/16;

	display: flex;
	flex-direction: column;

	border: 4px solid var(--txt-black);
	border-radius: 20px;
}

.smsModelePhone > .smsModelePhoneNotch
{
	height: 20px;
	width: 60%;
	margin: 0 auto;

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

	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;

	background-color: var(--txt-black);
}

.smsModelePhoneNotch > .smsModelePhoneNotchSpeaker
{
	height: 7px;
	width: 40px;
	border-radius: var(--radius-full);
	background: var(--bck-grey);
}

.smsModelePhoneNotch > .smsModelePhoneNotchLens
{
	height: 7px;
	width: 7px;
	border-radius: var(--radius-full);
	background: var(--bck-grey);
}

.smsModelePhone > .smsModelePhoneSmsApp
{
	flex: 1;
	width: 100%;
	padding: var(--padding-small);
	display: flex;
	flex-direction: column-reverse;
}

.smsModelePhoneSmsApp > .smsModelePhoneSmsAppBubble
{
	position: relative;
	padding: 15px;
	margin-bottom: 5px;
	font-size: 12px;
	color: white;
	background-color: var(--bck-green);
	border-radius: 30px;
	border-bottom-right-radius: 0;
}

.smsModelePhoneSmsApp > .smsModelePhoneSmsAppBubble::after
{
	position: absolute;
	content: 'Envoyé le 01/01/2022';
	bottom: -15px;
	color: var(--border-grey);
	width: 100%;
	right: 0;
	text-align: right;
	font-size: 8px;
}

.smsModelePhone > .smsModelePhoneSmsInputContainer
{
	height: 40px;
	padding: 5px;
}

.smsModelePhoneSmsInputContainer > .smsModelePhoneSmsInput
{
	height: 100%;
	width: 100%;

	display: flex;
	align-items: center;

	border: 1px solid var(--border-grey);
	border-radius: 100px;

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

	pointer-events: none;
}

.smsModelePhoneSmsInput > span
{
	font-size: 13px;
	color: var(--border-grey);
	padding: 0 10px;
}

.modalAddModeleSmsTagContainer
{
	flex: 1;

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

.modalAddModeleSmsTagContainer > .smsModeleTag
{
	flex: 0;

	height: fit-content;
	padding: 6px;

	border: 1px solid var(--border-grey);
	border-radius: var(--radius-full);

	font-size: 13px;
	font-weight: bold;
	white-space: nowrap;

	color: var(--txt-grey);
	background-color: var(--bck-white);
	transition: all .1s;
}

.smsModeleTag:hover
{
	cursor: pointer;
	transform: scale(1.03);
	transition: all .1s;
}

/*===============================================================================*/
/*================================= MODULE CONFIG ===============================*/
/*===============================================================================*/

.pageContainer > .pageContent#moduleConfig
{
	display: flex;
	column-gap: var(--dflt-padding);
}

.pageContent#moduleConfig > .moduleConfigContent
{
	flex: 1;

	display: flex;
	flex-direction: column;
	row-gap: var(--dflt-padding);
}

.pageContent#moduleConfig > .moduleConfigContent > .moduleConfigStore
{
	padding: var(--dflt-padding);

	border-radius: var(--radius);

	color: var(--txt-white);
	background-color: var(--bck-main-dark);
}

.pageContent#moduleConfig > .moduleConfigContent > .moduleConfigStore label
{
	min-width: fit-content;
	margin-right: var(--dflt-padding);
}

.pageContent#moduleConfig > .moduleConfigContent > .moduleConfigPreview
{
	flex: 1;

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

.pageContent#moduleConfig > .moduleConfigOptionMenu
{
	width: 300px;

	display: flex;
	flex-direction: column;
	flex-shrink: 0;

	border-radius: var(--radius);

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

.pageContent#moduleConfig > .moduleConfigOptionMenu > h1
{
	padding: var(--dflt-padding);

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

	font-size: 20px;
	color: var(--txt-white);
}

.pageContent#moduleConfig > .moduleConfigOptionMenu > h1 > i
{
	font-size: 17px;
}

.pageContent#moduleConfig > .moduleConfigOptionMenu > h1 > button
{
	margin-left: auto;
}

.pageContent#moduleConfig > .moduleConfigOptionMenu > .moduleConfigOptionMenuList
{
	height: 100%;

	padding: var(--dflt-padding);
	padding-top: 0;

	color: var(--txt-white);
	list-style-type: none;

	overflow: auto;
}

.moduleConfigOptionMenuList > li
{
	margin-bottom: 10px;

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

.moduleConfigOptionMenuList > li:last-of-type
{
	margin-bottom: 0;
}

.moduleConfigOptionMenuList > li > label
{
	margin-right: var(--dflt-padding);
}

.pageContent#moduleConfig > .moduleConfigOptionMenu > .moduleConfigOptionSave
{
	padding: var(--dflt-padding);

	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: var(--padding-small);
}

.moduleConfigOptionMenu > .moduleConfigOptionSave > button:first-of-type
{
	width: 100%;
}

/*==================================== MODULE CONFIG HOVER ==================================*/

[data-module-hover]
{
	position: relative;
	cursor: pointer !important;

	transition: all .1s;
}

[data-module-hover][data-hovered="yes"]
{
	outline: 4px solid var(--bck-grey);
	outline-offset: -2px;

	z-index: 1;

	cursor: pointer !important;
	transition: all .05s;
}

[data-module-hover][data-hovered="yes"]::after
{
	position: absolute;

	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 13px;

	content: "\f1fc";

	height: 30px;
	margin-right: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(50%);
	right: 0;

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

	border: 2px solid var(--bck-white);
	border-radius: var(--radius-full);

	color: var(--txt-white);
	background-color: var(--bck-main-light);

	aspect-ratio: 1/1;
}

/*===============================================================================*/
/*=========================== CODE GENERATION MODULE ============================*/
/*===============================================================================*/

.codeGenerationTypeRdv
{
	list-style-type: none;
}

.codeGenerationTypeRdv > li
{
	display: flex;
	align-items: center;
	column-gap: 5px;
}

.codeGenerationResultContainer
{
	padding: var(--dflt-padding);

	border-radius: var(--radius);
	background: var(--bck-body);
}

.codeGenerationResultContainer > h1
{
	font-size: 20px;
	margin-bottom: var(--padding-small);
}

/*===============================================================================*/
/*==================================== ACCOUNT ==================================*/
/*===============================================================================*/

.pageContainer > .pageContent > .accountHeader
{
	height: 200px;
	width: 100%;
	padding: var(--dflt-padding);

	display: flex;
	column-gap: var(--dflt-padding);

	border-radius: var(--radius);

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

.accountHeader > .accountHeaderLogo
{
	position: relative;

	height: 100%;
	padding: var(--padding-small);

	border: 6px solid rgba(0,0,0,0.2);
	border-radius: var(--radius);

	aspect-ratio: 1/1;
	transition: all .1s;
}

.accountHeader > .accountHeaderLogo:hover
{
	border: 6px dashed rgba(0,0,0,0.2);

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

	transition: all .1s;
}

.accountHeader > .accountHeaderLogo:hover::before
{
	position: absolute;

	font-size: 27px !important;
	font: var(--fa-font-solid);
	content: "\f56d";

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

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

	color: var(--txt-white);
	z-index: 1;
}

.accountHeader > .accountHeaderLogo:hover > img
{
	filter: opacity(0.5);
	transition: all .1s;
}

.accountHeader > .accountHeaderLogo > img
{
	height: 100%;
	width: 100%;

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

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

	transition: all .1s;
}

.accountHeader > .accountHeaderLogo > input
{
	display: none;
}

.accountHeader > .accountHeaderBlockInfo
{
	height: 100%;
	padding: var(--padding-small);
	flex: 1;

	display: flex;
	flex-direction: column;

	border: 6px solid var(--bck-white);
	border-radius: var(--radius);
}

.accountHeaderBlockInfo .accountHeaderBlockContent
{
	display: flex;
	align-items: center;
	column-gap: 10px;
}

.accountHeaderBlockInfo .accountHeaderAccountTxtLarge
{
	font-size: 25px;
	font-weight: 600;

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

.accountHeaderBlockInfo .accountHeaderAccountTxtSmall
{
	font-size: 15px;
	font-weight: 400;

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

.accountHeaderBlockInfo .accountHeaderAccountTxtDetail
{
	font-size: 15px;
	font-style: italic;

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

.accountAuthorizedUrlList
{
	height: calc(100% - 215px) !important;
	width: 100% !important;
	margin-top: 15px;

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

/*===============================================================================*/
/*================================== SUBSCRIPTION ===============================*/
/*===============================================================================*/

.pageContainer > .pageContent > .subscriptionHeader
{
	height: 200px;
	width: 100%;
	padding: var(--dflt-padding);
	margin-bottom: var(--dflt-padding);

	display: flex;
	column-gap: var(--dflt-padding);

	border-radius: var(--radius);

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

.subscriptionHeader > .subscriptionHeaderGroup
{
	height: 100%;
	width: 400px;
	padding: var(--dflt-padding);

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

	border: 6px solid rgba(0,0,0,0.2);
	border-radius: var(--radius);

	font-size: 15px;

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

.subscriptionHeaderGroup > button
{
	width: 100%;
	margin-top: 5px;
}

.pageContainer > .pageContent > .subscriptionInvoicesList
{
	height: calc((100% - 200px) - var(--dflt-padding));
	width: 100%;

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

/*===============================================================================*/
/*==================================== FEEDBACK =================================*/
/*===============================================================================*/

/* .feedbackButton
{
	position: absolute;

	height: 45px;
	width: 65px;
	bottom: 0;
	right: 0;
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	border-top-left-radius: var(--radius);
	border: 4px solid var(--bck-main);
	border-right: 0;
	border-bottom: 0;
	
	font-size: 25px;
	
	color: var(--txt-white);
	background: var(--bck-main-light);
	box-shadow: var(--shdw-heavy);
	transition: all .1s;

	z-index: 1;
} */

.feedbackButton:hover
{
	cursor: pointer;
	transform: scale(1.04);
	transform-origin: bottom right;
	transition: all .1s;
}

.feedback
{
	position: absolute;
	height: 500px;
	width: 500px;
	bottom: var(--padding-small);
	right: var(--padding-small);

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

	border-radius: var(--radius);
	background: var(--bck-white);
	box-shadow: var(--shdw-page);

	z-index: 1;
}

.feedback > .feedbackHeader,
.feedback > .feedbackFooter
{
	width: 100%;
	padding: var(--dflt-padding);
	flex-shrink: 0;
}

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

	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	background-color: var(--bck-main);
}

.feedbackHeader > h1
{
	width: 100%;

	font-size: 25px;
	color: var(--txt-white);
}

.feedbackHeader > button,
.feedbackHeader > button:hover
{
	color: var(--txt-white);
}

.feedbackFooter
{
	display: flex;
	justify-content: flex-end;
	align-items: center;

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

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

.feedbackFooter > img
{
	height: 30px;
	margin-left: 10px;
}

.feedback > .feedbackForm
{
	width: 100%;
	padding: var(--dflt-padding);

	display: flex;
	flex-direction: column;
	flex: 1;
}

.feedbackForm > .form-group.expand
{
	display: flex;
	flex-direction: column;
	flex: 1;
}

.feedbackForm textarea
{
	height: 100%;
	resize: none;
}