@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
+----------------------------------------------------+
| TABLE DES MATIÈRES                                 |
+----------------------------------------------------+
1. Variables CSS                                     |
| 2. Boutons                                         |
|    2.1 Boutons CMS                                 |
|        2.1.1 Mise en relief                        |
|        2.1.2 Icônes                                |
|    2.2 Boutons Action Latérales                    |
|        2.2.1 Mise en relief                        |
|        2.2.2 Icônes                                |
|    2.3 Boutons de Tableau                          |
|        2.3.1 Mise en relief                        |
|        2.3.2 Icônes                                |
|    2.4 Boutons de Pagination                       |
|        2.4.1 Mise en relief                        |
|        2.4.2 Icônes                                |
|    2.5 Boutons de Filtre                           |
|        2.5.1 Mise en relief                        |
|        2.5.2 Icônes                                |
| 3. Navigation                                      |
|    3.1 Top Bar                                     |
|    3.2 Boutons de Navigation                       |
|        3.2.1 Mise en relief                        |
|        3.2.2 Icônes                                |
| 4. Tableaux                                        |
|    4.1 Colonnes                                    |
|    4.2 Filtres de colonnes                         |
|    4.3 Lignes spéciales                            |
| 5. Filtres                                         |
|    5.1 Onglets                                     |
|    5.2 Radio boutons, Checkboxs et Comboboxs       |
| 	 5.3 Tableaux                    			     |
| 6. Card Patient                                    |
|    6.1 Header                                      |
|    6.2 Informations                                |
| 7. Textes et Titres  								 |
| 8. Formulaire                                      |
+----------------------------------------------------+
*/

/*
+----------------------------------------------------+
| ICÔNES UTILISÉES                                   |
+----------------------------------------------------+
| Les images SVG utilisées pour les boutons          |
| proviennent de Google Material Icons.              |
| Style : Outline                                    |
| Weight : 300                                       |
|                                                    |
| Source :                                           |
| https://fonts.google.com/icons?icon.style=Outline  |
|                                                    |
| Les icônes ont été exportées en SVG.               |
+----------------------------------------------------+
*/

/*
+----------------------------------------------------+
| 1. Variables CSS                                   |
+----------------------------------------------------+
*/

:root {
	
	--text-size    : 13px;
	
	
	/* Couleurs */
	--color-primary         : #09659F;
	--color-hover-primary   : #188AD1;
	--color-hover-secondary : #09659F20;
	--color-white           : #FFFFFF;
	--color-black           : #000000;
	--color-error           : #EF4836;
	--color-warning         : #F2660F;
	--color-success         : #3adb76;
	--color-emergency       : #EF4836;
	--color-temporary       : #F2660F;
	--color-table-bt        : #1F2A30;
	--color-text            : #1F2A30;
	
	/* Tailles générales */
	--border-radius-sm    : 4px;
	--border-radius-md    : 6px;
	--border-radius-lg    : 8px;
	--border-radius-xl    : 0.5rem;
	
	--spacing-xs          : 0.1rem;
	--spacing-sm          : 0.3rem;
	--spacing-md          : 0.5rem;
	--spacing-lg          : 1rem;
	
	--transition-fast     : all 0.2s ease;
	--transition-normal   : all 0.2s ease;
	
	/* Boutons généraux */
	--button-size         : 32px;
	--button-padding      : 0.3rem;
	--button-border-radius: var(--border-radius-sm);
	--button-text-size    : 13px;	
	
	/* Icônes générales */
	--icon-size-sm        : 16px;
	--icon-size-md        : 24px;
	--icon-padding        : 4px;
	
	/* Boutons CMS */
	--cms-button-padding-lr    : 8px;
	--cms-button-padding-tb    : 4px;
	--cms-button-icon-size     : var(--icon-size-md);
	--cms-button-border-radius : var(--border-radius-sm);
	
	/* Boutons Action Latérales */
	--action-lat-icon-size      : var(--icon-size-md);
	--action-lat-button-padding : var(--spacing-sm);
	--action-lat-border-radius  : var(--border-radius-xl);
	
	/* Navigation */
	--nav-item-icon-size      : var(--icon-size-md);
	--nav-item-button-padding : var(--spacing-sm);
	
	/* Tableaux */
	--table-button-size          : var(--icon-size-md);
	--table-button-icon-size     : var(--icon-size-sm);
	--table-button-icon-padding  : var(--icon-padding);
	--table-button-border-radius : var(--border-radius-sm);
	
	/* Colonnes */
	--column-cms-width     : 24px;
	--column-padding-lr    : 0.5rem;
	--column-padding-sm    : var(--spacing-xs);
}

body {
	color                   : var(--color-text);
	font-family             : "Inter", sans-serif;
	font-size				: var(--text-size);
	-webkit-font-smoothing  : antialiased;
	-moz-osx-font-smoothing : grayscale;
}

/*
+----------------------------------------------------+
| 2. Boutons                                         |
+----------------------------------------------------+
*/

button {
	padding       : var(--button-padding);
	border        : 1px solid var(--color-primary);
	border-radius : var(--button-border-radius);
	font-size     : var(--button-text-size);
	color         : var(--color-primary);
	cursor        : pointer;
}

button:hover {
	background-color : var(--color-hover-secondary);
}

button .selected {
	background-color : var(--color-hover-primary);
	color            : white;
}

/*----------------------------------------------------*
 | 2.1 Boutons CMS                                   |
 *----------------------------------------------------*/

.btAction {
	position    : relative;
	display     : inline-flex;
	align-items : center;
	
	padding      : var(--cms-button-padding-tb) var(--cms-button-padding-lr) var(--cms-button-padding-tb) calc(var(--cms-button-icon-size) + var(--cms-button-padding-lr) );
	margin-right : 4px;
	
	color        : var(--color-primary);
	font-size    : var(--button-text-size);
	
	cursor       : pointer;
	transition   : var(--transition-fast);
}

.btAction::before {
	content       : '';
	position      : absolute;
	inset         : 0;
	border        : 1px solid var(--color-primary);
	border-radius : var(--cms-button-border-radius);
}

.btAction::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-primary);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	left             : var(--icon-padding);
	width            : var(--cms-button-icon-size);
	height           : var(--cms-button-icon-size);
}

.patientHisto {
	border-radius: .2rem;
	background-color: var(--color-success);	
	height: 50px;
	font-weight : bold;
}

.patientControl {
	height: 50px;
	font-weight : bold;
}


/* 2.1.1 Mise en relief */
.btAction:hover {
	color      : var(--color-primary);
	transition : var(--transition-normal);
}

.btAction:hover::before {
	background-color : var(--color-hover-secondary);
	transition       : var(--transition-normal);
}

.btAction:hover::after {
	background-color : var(--color-primary);
	transition       : var(--transition-normal);
}

/* 2.1.2 Icônes */
.annul::after {
	mask-image : url(../image/icons_google/cancle.svg);
}

.enreg::after {
	mask-image : url(../image/icons_google/save.svg);
}

.delete::after {
	mask-image : url(../image/icons_google/trashcan.svg);
}

/*----------------------------------------------------*
 | 2.2 Boutons Action Latérales                      |
 *----------------------------------------------------*/

.btItemC, .btItemPrint, .btItemExport {
	position         : relative;
	align-items      : center;
	padding          : var(--action-lat-button-padding) var(--action-lat-button-padding) var(--action-lat-button-padding) calc(var(--action-lat-icon-size) + var(--action-lat-button-padding) * 2);
	margin-right     : 4px;
	background-color : var(--color-primary);
	color            : var(--color-white);
	font-size        : var(--button-text-size);
	cursor           : pointer;
	border-radius    : var(--action-lat-border-radius);
}

.btItemC::after, .btItemPrint::after, .btItemExport::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-white);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	left             : var(--action-lat-button-padding);
	width            : var(--action-lat-icon-size);
	height           : var(--action-lat-icon-size);
}

/* 2.2.1 Mise en relief */
.btItemC:hover, .btItemPrint:hover, .btItemExport:hover {
	background-color : var(--color-hover-primary);
	transition       : var(--transition-normal);
}

/* 2.2.2 Icônes */
.btItemC::after {
	mask-image : url("../image/icons_google/plus.svg");
}

.btItemPrint::after {
	mask-image : url("../image/icons_google/printer.svg");
}

.btItemExport::after {
	mask-image : url("../image/icons_google/export.svg");
}

/*----------------------------------------------------*
 | 2.3 Boutons de Tableau                            |
 *----------------------------------------------------*/

.btTable {
	position : relative;
	cursor   : pointer;
	height   : var(--table-button-size);
	width    : var(--table-button-size);
}

.btTable::before {
	content       : '';
	position      : absolute;
	inset         : 0;
	border        : 1px solid var(--color-table-bt);
	border-radius : var(--table-button-border-radius);
}

.btTable::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-table-bt);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	left             : var(--table-button-icon-padding);
	top              : var(--table-button-icon-padding);
	width            : var(--table-button-icon-size);
	height           : var(--table-button-icon-size);
}

.link {
	text-decoration : underline;
	cursor          : pointer;
	width           : fit-content;
	height          : fit-content;
}

.link::before, .link::after {
	display : none;
}

thead .cellB_C_Of::before {
	border : 1px solid var(--color-white);
}

thead .cellB_C_Of::after {
	background-color : var(--color-white);
}

/* 2.3.1 Mise en relief */
.btTable:hover::after {
	background-color : var(--color-primary);
	transition       : var(--transition-normal);
}

.btTable:hover::before {
	border           : 1px solid var(--color-primary);
    background-color : #09659F10;
    transition       : var(--transition-normal);
}

.suppr:hover::before {
	border           : 1px solid red;
	background-color : #ff000010;

}

.suppr:hover::after {
	background-color : red;
}

/* 2.3.2 Icônes */
.ok::after {
	mask-image : url("../image/icons_google/check.svg");
}

.create::after {
	mask-image : url("../image/icons_google/plus.svg");
}

.modif::after {
	mask-image : url("../image/icons_google/pen.svg");
}

.suppr::after {
	mask-image : url("../image/icons_google/trashcan.svg");
}

.visu::after {
	mask-image : url("../image/icons_google/eye.svg");
}

.print::after {
	mask-image : url("../image/icons_google/printer.svg");
}

.undelete::after {
	mask-image : url("../image/icons_google/trashcan_restore.svg");
}

.dupli::after {
	mask-image : url("../image/icons_google/page_copy.svg");
}

.cellB_Mail_Of::after {
	mask-image : url("../image/icons_google/letter.svg");
}

.cellB_cmt_Of::after {
	mask-image : url("../image/icons_google/arrow_downward.svg");
}

.pj::after {
	mask-image : url("../image/icons_google/paperclip.svg");
}

.luOf::after {
	mask-image : url("../image/icons_google/eye_glasses.svg");
}

.lu::after {
	mask-image : url("../image/icons_google/eye_glasses.svg");
}

.histo::after {
	mask-image : url("../image/icons_google/clock_back.svg");
}

/*----------------------------------------------------*
 | 2.4 Boutons de Pagination                         |
 *----------------------------------------------------*/

.btPagination {
	position      : relative;
	float         : left;
	cursor        : pointer;
	margin-right  : 4px;
	margin-bottom : var(--spacing-lg);
	width         : var(--button-size);
	height        : var(--button-size);
}

.btPagination::before {
	content       : '';
	position      : absolute;
	inset         : 0;
	border        : 1px solid var(--color-primary);
	border-radius : var(--button-border-radius);
}

.btPagination::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-primary);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	left             : var(--icon-padding);
	top              : var(--icon-padding);
	width            : var(--icon-size-md);
	height           : var(--icon-size-md);
}

.btClose {
	position : relative;
	cursor   : pointer;
	height   : var(--table-button-size);
	width    : var(--table-button-size);
}

/* 2.4.1 Mise en relief */
.btPagination:hover::after {
	background-color : var(--color-primary);
	transition       : var(--transition-normal);
}

.btPagination:hover::before {
	background-color : var(--color-hover-secondary);
	transition       : var(--transition-normal);
}

.btPagination:hover {
	color      : var(--color-primary);
	transition : var(--transition-normal);
}

/* 2.4.2 Icônes */
.first::after {
	mask-image : url("../image/icons_google/double_arrow_back.svg");
}

.last::after {
	mask-image : url("../image/icons_google/double_arrow_forward.svg");
}

.next::after {
	mask-image : url("../image/icons_google/arrow_forward.svg");
}

.previous::after {
	mask-image : url("../image/icons_google/arrow_back.svg");
}

/*----------------------------------------------------*
 | 2.5 Boutons de Filtre et Formulaire                            |
 *----------------------------------------------------*/

.btFilter, .btForm {
	position      : relative;
	float         : left;
	cursor        : pointer;
	margin-right  : 4px;
	width         : var(--button-size);
	height        : var(--button-size);
}

.btFilter::before, .btForm::before {
	content       : '';
	position      : absolute;
	inset         : 0;
	border        : 1px solid var(--color-primary);
	border-radius : var(--button-border-radius);
}

.btFilter::after, .btForm::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-primary);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	left             : var(--icon-padding);
	top              : var(--icon-padding);
	width            : var(--icon-size-md);
	height           : var(--icon-size-md);
}

/* 2.5.1 Mise en relief */
.btFilter:hover::after, .btForm:hover::after {
	background-color : var(--color-primary);
	transition       : var(--transition-normal);
}

.btFilter:hover::before, .btForm:hover::before {
	background-color : var(--color-hover-secondary);
	transition       : var(--transition-normal);
}

/* 2.5.2 Icônes */
.loupe::after {
	mask-image : url("../image/icons_google/magnifying_glass.svg");
}

.gomme::after {
	mask-image : url("../image/icons_google/ink_eraser.svg");
}

.close::after {
	mask-image : url("../image/icons_google/cancle.svg");
}

/*
+----------------------------------------------------+
| 3. Navigation                                      |
+----------------------------------------------------+
*/

/*----------------------------------------------------*
 | 3.1 Top Bar                                       |
 *----------------------------------------------------*/


.sticky.is-anchored {
	position : fixed;
	z-index  : 5;
	width    : 100%;
}

.top-bar {
	box-shadow : 0 2px 5px rgba(0, 0, 0, 0.3);
	padding    : 0;
}

.top-bar, .top-bar ul {
	background-color : var(--color-primary);
}

.top-bar-left, .top-bar-right {
	padding : var(--spacing-md);
}

.dropdown {
	justify-content : right;
}

.submenu {
	margin-block : var(--spacing-md);
	padding      : var(--spacing-md);
}

.top-bar-right > ul > li {
	display     : flex;
	align-items : center;
}

.top-bar-right > ul > li + li::before {
	content : "|";
	padding : 0 10px;
	color   : var(--color-white);
}

/*----------------------------------------------------*
 | 3.2 Boutons de Navigation                         |
 *----------------------------------------------------*/

.btItemOf, .btItemOther {
	position      : relative;
	cursor        : pointer;
	font-weight   : bold;
	font-size     : 1rem;
	color         : var(--color-white);
	white-space   : nowrap;
	border-bottom : 2px solid transparent;
	transition    : var(--transition-normal);
	padding       : var(--nav-item-button-padding) var(--nav-item-button-padding) var(--nav-item-button-padding) calc(var(--nav-item-icon-size) + var(--nav-item-button-padding) * 2);
}

.btItemOf::after, .btItemOther::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-white);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	left             : var(--nav-item-button-padding);
	width            : var(--nav-item-icon-size);
	height           : var(--nav-item-icon-size);
}

/* 3.2.1 Mise en relief */
.btItemOf:hover, .btItemOther:hover, 
.top-bar-right .selected {
	border-bottom : 2px solid var(--color-white);
}

/* 3.2.2 Icônes */

.connectDivers:after, .connectDocPadLabo:after, .connectDocPadIde:after, .prescriptionMultipleForOneSampler:after, 
.mediaByUser:after,  .catalogCommentType:after, .catalogExemplairePat:after, .catalogMedicTreatmentStatus:after, 
.catalogMedicCible:after, .media:after, .mediaSeen:after, .docIdeWeb:after, .docIdePhone:after,
.docIdeAndroid:after, .docAdmWeb:after, .docValidation:after, .docIdeCreationPatientPhone:after, 
.docIdeCreationPatientAndroid:after, .docIdeCreationPatientWeb:after {
	mask-image : url("../image/icons_google/book.svg");
}

.establishmentSample:after, .laboratory:after, .tourWorkFlow:after {
	mask-image : url("../image/icons_google/building.svg");
}

.analysisResultHeader:after, .appointmentSgl:after, .cityDoctor:after {
	mask-image : url("../image/icons_google/clinical_notes.svg");
}

.supervision:after, .supervisionGlobal:after {
	mask-image : url("../image/icons_google/eye.svg");
}

.aes:after {
	mask-image : url("../image/icons/icon_aes.svg");	
}

.connectEntity:after {
	mask-image : url("../image/icons/icon_bases.svg");
}

.orderHeader:after {
	mask-image : url("../image/icons/icon_commande.svg");	
}

.device:after {
	mask-image : url("../image/icons/icon_echange.svg");	
}

.cotation:after, .patientBillingLabo:after {
	mask-image : url("../image/icons/icon_facturation.svg");
}

.faq:after {
	mask-image : url("../image/icons/icon_faq.svg");
}

.passwordUser:after {
	mask-image : url("../image/icons/icon_mdp.svg");
}

.catalogFamilleMedic:after, .medicament:after {
	mask-image : url("../image/icons/icon_medicament.svg");
}

.connectPrelevs:after, .tube:after {
	mask-image : url("../image/icons/icon_prelevement.svg");
}

.appointmentSas:after {
	mask-image : url("../image/icons/icon_sas.svg");
}

.arrival:after {
	mask-image : url("../image/icons/icon_sejour.svg");
}

.bioAnalysis:after, .catalogSousTitreExam:after, .catalogTitreExam:after {
	mask-image : url("../image/icons_google/laboratory.svg");
}

.article:after, .catalogFamilleArticle:after,
.appointmentForOneSampler:after {
	mask-image : url("../image/icons_google/syringe.svg");
}

.connectParamPrelev:after, .connectParamPrelevLabo:after, .connectParamOther:after, .connectParamDev:after, .appointmentForCabinet:after,
.orderHeaderOneSampler:after, .connectCoursierParam:after, .connectOtherIde:after, .connectOtherLabo:after, .reloadFactParameter:after,
.hprimToXml:after, .passwordSampler:after {
	mask-image : url("../image/icons_google/settings.svg");
}

.pjImage:after, .pjImageNew:after {
	mask-image : url("../image/icons_google/book.svg");
}

.pjImageNew {
	background-color : red;
}

.patient:after, .patientForOneSampler:after {
	mask-image : url("../image/icons_google/personal_injury.svg");
}

.user:after {
	mask-image : url("../image/icons_google/person.svg");
}

.collector:after {
	mask-image : url("../image/icons_google/collect.svg");
}

.nurseRacing:after, .coursierRacing:after {
	mask-image : url("../image/icons_google/nurce_racing.svg");
}

.sampler:after {
	mask-image : url("../image/icons_google/clinical_notes.svg");
}

.passwd:after {
	mask-image : url("../image/icons_google/password.svg");
}

.coursierVehicle:after {
	mask-image : url("../image/icons_google/vehicle.svg");
}

.coursierDriver:after {
	mask-image : url("../image/icons_google/wheel.svg");
}

.coursierContener:after {
	mask-image : url("../image/icons_google/tube.svg");
}

.coursierTour:after, .connectCoursierTourFollow:after {
	mask-image : url("../image/icons_google/road.svg");
}

.preDemandePrintQrcode::after {
	mask-image : url("../image/icons_google/qrcode.svg");
}

.deconnexion:after {
	mask-image : url("../image/icons_google/cancle.svg");
}

/*
+----------------------------------------------------+
| 4. Tableaux                                        |
+----------------------------------------------------+
*/

.table-scroll {
	overflow-x : visible;
	padding    : 0px;
}

table {
    border        : none;
    overflow      : hidden;
    border-radius : 12px;
    box-shadow    : 0px 0px 20px 1px rgba(0, 0, 0, 0.16);
}

table thead {
    background-color : var(--color-primary);
    color            : white;
    border-radius    : 12px;
    border           : none;
}

tbody td, tbody th {
	padding: .25rem .3rem .3rem;
}

thead th {
	padding: .5rem .3rem .3rem;
}

.firstPageTableConnectionDate {
	margin-top : var(--spacing-lg);
}

/*----------------------------------------------------*
 | 4.1 Colonnes                                      |
 *----------------------------------------------------*/

.TD_CMS {
	padding-left  : var(--column-padding-lr);
	padding-right : var(--column-padding-lr);
	width         : var(--column-cms-width);
}

.TD_CMSEnd, .TH_CMSEnd {
	padding-left  : var(--column-padding-sm);
	padding-right : var(--column-padding-sm);
	width         : var(--column-cms-width);
}

.TD_CMSEnd:last-child, .TH_CMSEnd:last-child {
	padding-right : var(--column-padding-lr);
}

.TH_CMSEnd .btTable::after {
	background-color : white;
}

.TH_CMSEnd .btTable::before {
	border-color : white;
}

.TH_CMSEnd .btTable:hover::before {
	background-color : var(--color-hover-primary);
}

td .checkbox [type=checkbox] {
	margin : 0;
}

/*----------------------------------------------------*
 | 4.2 Filtres de colonnes                           |
 *----------------------------------------------------*/

.cellBEnteteLink, .cellBEnteteLinkAsc, .cellBEnteteLinkDesc {
	position    : relative;
	align-items : center;
	padding     : var(--cms-button-padding-tb) var(--cms-button-padding-lr) var(--cms-button-padding-tb) calc(var(--cms-button-icon-size) + var(--cms-button-padding-lr) * 2);
	color       : var(--color-white);
	cursor      : pointer;
	transition  : var(--transition-fast);
}

.cellBEnteteLink::after, .cellBEnteteLinkAsc::after, .cellBEnteteLinkDesc::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-white);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	top              : 50%;
	left             : var(--icon-padding);
	width            : var(--icon-size-md);
	height           : var(--icon-size-md);
	transform        : translateY(-50%);
}

.cellBEnteteLink::after {
	mask-image : url(../image/icons_google/arrow_no_filter.svg);
}

.cellBEnteteLinkAsc::after {
	mask-image : url(../image/icons_google/arrow_filter_up.svg);
}

.cellBEnteteLinkDesc::after {
	mask-image : url(../image/icons_google/arrow_filter_down.svg);
}

/*----------------------------------------------------*
 | 4.3 Lignes spéciales                              |
 *----------------------------------------------------*/

.divPatientTemporaryList, .divEmergencyList {
	font-weight : bold;
}

.divPatientTemporaryList {
	color : var(--color-temporary);
}

.divEmergencyList {
	color : var(--color-emergency);
}

/*----------------------------------------------------*
 | 4.3 Lignes sexe.                                   |
 *----------------------------------------------------*/

.cellSexF, .cellSexM {
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;

	width  : var(--icon-size-md);
	height : var(--icon-size-md);

	margin : auto
}

.cellSexM {
	mask-image       : url("../image/icons_google/male.svg");
	background-color : #0074D9;
}

.cellSexF {
	mask-image       : url("../image/icons_google/female.svg");
	background-color : #B10DC9;
}
/*
+----------------------------------------------------+
| 5. Filtres                                         |
+----------------------------------------------------+
*/

#divItemFilterId {
	display        : flex;
	flex-direction : column;
	gap            : 0.5rem;
}

#divItemFilterId .fieldset{
    border        : none;
    box-shadow    : 0px 0px 20px 1px rgba(0, 0, 0, 0.16);
    border-radius : 12px;
	margin        : 0;
	margin-bottom : 1rem;
	padding       : 1rem;
}

/*----------------------------------------------------*
 | 5.1 Onglets                                       |
 *----------------------------------------------------*/

.divTag {
	margin-bottom : 1rem;
}

.divTag div {
	display        : flex;
	flex-direction : column;
}

.divTag div > ul {
	display          : flex;
	margin           : 0;
	padding          : 4px;
	background-color : #f1f3f4;
	border-radius    : var(--border-radius-lg);
	list-style       : none;
}

.divTag div > ul li {
	flex : 1;
}

.divTag div > ul .divTagElement {
	padding       : var(--spacing-sm);
	border-radius : var(--border-radius-md);
	color         : var(--color-primary);
	text-align    : center;
	font-size     : 14px;
	cursor        : pointer;
	transition    : var(--transition-normal);
}

.divTag div > ul .divTagElement:hover {
	background-color : #e8eaed;
}

.divTag div > ul .selected .divTagElement {
	background-color : var(--color-primary);
	color            : var(--color-white);
	box-shadow       : 0 1px 3px rgba(0, 0, 0, 0.1);
}

.divTag > div {
	border        : 2px solid #f1f3f4;
	border-radius : var(--border-radius-lg);
}

.divTag table, .divTag tbody {
	border     : none;
	box-shadow : none;
}

/*----------------------------------------------------*
 | 5.2 Radio boutons Checkboxs et Comboboxs           |
 *----------------------------------------------------*/

.fieldRb, .fieldCb {
	display   : flex;
	flex-flow : row nowrap;
	gap       : var(--spacing-md);
}

.filtrDataInputCombo {
	margin-bottom : .5rem;
}

.divFilterSampler, .divFilterCabinet, .divFilterSite, .divFilterCliniq, .divFilterDepot {
	min-height : 200px;
	max-height : 300px;
	overflow   : auto;
}

/*----------------------------------------------------*
 | 5.3 Tableaux                    					 |
 *----------------------------------------------------*/

.filtrTable {
	margin : 0;
}

.filtrTable tr:nth-child(even) {
	background-color : #ffffff;
}
.filtrTable td > label {
	display : flex;
	gap     : 0.5rem;
}

.filtrTable td > label input {
	margin : 0;
}

/*
+----------------------------------------------------+
| 6. Card Patient                                    |
+----------------------------------------------------+
*/

.profilCard {
	box-shadow    : 0px 0px 20px 1px rgba(0, 0, 0, 0.16);
	border-radius : var(--border-radius-lg);
	margin-bottom : var(--spacing-lg);
	word-break    : break-word;
	padding-bottom: var(--spacing-md);
}

/*----------------------------------------------------*
 | 6.1 Header                                        |
 *----------------------------------------------------*/

.profilCardHeader {
	position                   : relative;
	color                      : var(--color-white);
	background-color           : var(--color-primary);
	padding                    : var(--button-padding) var(--button-padding) var(--button-padding) calc(var(--icon-size-md) + var(--button-padding) * 2);
	margin-bottom              : var(--spacing-md);
	border-radius              : var(--border-radius-lg);
	border-bottom-left-radius  : 0px;
	border-bottom-right-radius : 0px;
	cursor                     : pointer;
}

.profilCardHeader::after {
	content          : '';
	position         : absolute;
	background-color : var(--color-white);
	mask-size        : contain;
	mask-repeat      : no-repeat;
	mask-position    : center;
	left             : var(--icon-padding);
	width            : var(--icon-size-md);
	height           : var(--icon-size-md);
	mask-image       : url("../image/icons_google/arrow_circle_back.svg");
}

.profilCardHeader:hover {
	background-color : var(--color-hover-primary);
	transition       : var(--transition-normal);
}

/*----------------------------------------------------*
 | 6.2 Informations                                  |
 *----------------------------------------------------*/

.profilLabel label {
	color : var(--color-primary);
}

.profilData label {
	color : var(--color-text);
}

.profilCard .grid-x {
	gap            : var(--spacing-sm);
	margin         : 0;
	padding-inline : var(--spacing-md);
}

/*
+----------------------------------------------------+
| 7. Textes et Titres                               |
+----------------------------------------------------+
*/

.btItem {
	margin-block : var(--spacing-lg);
	color        : var(--color-primary);
	font-size    : 1.5rem;
	font-weight  : bold;
}

.cellBChapitre {
	font-size   : 1.5em;
	font-weight : bold;
	text-align  : center;
	margin-top  : 5em;
}

.sTitre {
	color       : var(--color-white);
	font-size   : 1rem;
	font-weight : bold;
}

/*
+----------------------------------------------------+
| 8. Formulaire                                      |
+----------------------------------------------------+
*/

.reveal .titre {
    text-align  : center;
	font-weight : bold;
	font-size   : 1.5rem;
}

.reveal fieldset {
	border        : 2px solid var(--color-primary);
	border-radius : 12px;
	box-shadow    : 0 2px 5px rgba(0, 0, 0, 0.3);
}

.reveal-overlay {
	z-index : 100;
}

.reveal {
	z-index : 100;
}

.reveal.full {
	top: 50% !important;
  	left: 50% !important;
  	transform: translate(-50%, -50%) !important;
}

.reveal table {
	box-shadow : none;
}

form label {
	margin-bottom : 0.1rem;
}

a {
	color : #000000;
}

label {
	line-height : 1;
	font-weight : bold;
	font-size     : var(--text-size);
	
}

.fieldset legend {
	color            : #FFFFFF;
	padding-block    : 0.1rem;
	padding-inline   : 0.6rem;
	background-color : var(--color-primary);
	border-radius    : 8px;
	word-break       : break-all;
}

select {
	transition: none !important;
}

.button.primary {
	background	: linear-gradient(
        to top,
        var(--color-primary),
        var(--color-hover-primary)
    );
   	transition	: none;
}

.button.primary:hover {
	background: var(--color-hover-primary);
}

.button.hollow.primary {
	background	: white;
}

.button.hollow.primary:hover {
	background	: white;
}

[type=text], [type=password], [type=tel], textarea, select {
	border        : 1px solid var(--color-text);
 	box-shadow:
        inset 0 2px 3px rgba(0,0,0,0.15),
        inset 0 -1px 0 rgba(255,255,255,0.8);
    border-radius : .2rem;
	height        : 1.6rem;
	margin        : 0 0 .25rem;
	font-size     : var(--text-size);
}


.cmsLine label {
	font-weight : normal;
	font-size  : var(--text-size);
}

.cmsLine .cell [type=text], .cmsLine .cell [type=password], .cmsLine .cell [type=tel], .cmsLine .cell textarea, .cmsLine .cell select, .cmsLine .cell .input-group, .cmsLine .cell .fieldDatePicker {
	font-weight : bold;
	font-size   : var(--text-size);
}

.cmsLine .cell:hover [type=text], .cmsLine .cell:hover [type=password], .cmsLine .cell:hover [type=tel], .cmsLine .cell:hover textarea, .cmsLine .cell:hover select, .cmsLine .cell:hover .input-group, .cmsLine .cell:hover .fieldDatePicker {
    box-shadow :  0 0 8px 2px var(--color-text);
}


[type='radio'] + label {
	color : var(--color-text);
	font-size   : var(--text-size);
}

[type='submit'], [type='button'] {
	border-radius : .2rem;
}

[type=checkbox], [type=file], [type=radio] {
	margin : 0 0 .5rem;
}

.cellDivOf {
	display : none;
}

.errorLibCompl {
	font-size   : 0.7em;
	font-style  : normal;
	text-align  : center;
	white-space : normal;
}

.filtrDataLabel, .labelSaisie, td label, .filtrDataLeft label, .fieldRb label, .fieldCb label {
	font-weight : normal;
}

.invalid {
	color   : var(--color-error);
	padding : 1px;
}

.invalid:before {
	position : relative;
	content  : "✖";
}

.valid {
	color   : var(--color-success);
	padding : 1px;
}

.valid:before {
	position : relative;
	content  : "✔";
}

label.required {
	color          : var(--color-error);
	font-style     : normal;
	font-weight    : bold;
	text-transform : none;
}

label.recommended {
	color          : var(--color-warning);
	font-style     : normal;
	font-weight    : bold;
	text-transform : none;
}

.cellBInputSaisieRequired, .input-group:has(.cellBInputSaisieRequired), .input-group:has(.cellBInputSaisieDateRequired), .fieldDatePicker:has(.cellBInputSaisieDateRequired) {
	border-color :  var(--color-error);
	
}

.cellBInputSaisieRecommended, .input-group:has(.cellBInputSaisieRecommended), .input-group:has(.cellBInputSaisieDateRecommended), .fieldDatePicker:has(.cellBInputSaisieDateRecommended) {
	border-color : var(--color-warning);
}

.emergency {
	color       : var(--color-emergency);
	font-weight : bold;
	text-align  : center;
	font-size   : 18px;
}

.logo {
	background-image    : url("../image/logo.png");
	background-repeat   : no-repeat;
	background-position : center;
	background-size		: contain;
	width               : 256px;
	height              : 256px;
	margin              : auto;
}

.firstPageLogo {
	background-image    : url("../image/firstPageLogo.png");
	background-repeat   : no-repeat;
	background-position : center;
	background-size		: contain;
	width               : 512px;
	height              : 512px;
	margin              : auto;
}

.logoMain {
	background-image    : url("../image/mainPage.png");
	background-repeat   : no-repeat;
	background-position : center center;
	background-size		: contain;
	width				: 500px;
	height				: 500px;
}

.cellHelpAlways {
	background-image    : url("../image/icoHelp.png");
	width               : 30px;
	background-position : 2% 65%;
	background-repeat   : no-repeat;
}

.stabilo, input:disabled.stabilo {
	background-color : var(--color-emergency);
}

.listeDynamiqueSelected {
    background-color : var(--color-primary);
}

.libelError {
	color       : red;
	font-weight : bold;
} 

.libelWarning {
	color       : orange;
	font-weight : bold;
} 

.libelOk {
	color       : green;
	font-weight : bold;
} 

.btRect {
	width					: 95px;
	height					: 110px;
	margin					: 12px -2px 0px 12px;
	transform				: skew(-10deg);
	border-radius			: 15px;
	box-shadow				: 0 9px #999;
	cursor					: pointer;
	display					: inline-grid;
	font-weight				: bold;
	text-align				: center;
	color					: #ffffff;
	-webkit-touch-callout	: none;
	-webkit-user-select		: none;
	-khtml-user-select		: none;
	-moz-user-select		: none;
	-ms-user-select			: none;
	user-select				: none;
}

.rectLabo { 
	min-height: 20px;
	max-height: 20px;
	font-size : 8pt;
	padding	  : 4px;
}

.rectError {
	background: #990e35;
}

.rectError:hover {
	background: #6a0925;
}

.rectError:active {
	background-color: #6a0925;
	box-shadow		: 0 5px #666;
	transform		: skew(-10deg) translateY(4px);
}

.rectWarning {
	background: #ff6600;
}

.rectWarning:hover {
	background: #c24e00;

}

.rectWarning:active {
	background-color: #c24e00;
	box-shadow		: 0 5px #666;
	transform		: skew(-10deg) translateY(4px);
}

.rectOk {
	background: #6aa84f;
}

.rectOk:hover {
	background: #598c43;
}

.rectOk:active {
	background-color: #598c43;
	box-shadow		: 0 5px #666;
	transform		: skew(-10deg) translateY(4px);
}

.ulEtsprlvetbprlvid, .ulEtsprlvretetbprlvid {
	list-style-type : none;
	margin          : 0px;
	padding         : 4px;
	min-height      : 80px;
	max-height      : 140px;
	overflow        : auto;
}

.boxMaxCm {
	height     : 97dvh;
	overflow-y : scroll;
}

.containerPj, .containerPagination {
	display        : flex;
	flex-direction : row;
	gap            : 0.5rem;
	padding-block  : 1rem;
}

.divEnclosure {
	display         : flex;
	justify-content : center;
	min-width       : 0;
	overflow-x      : auto;
    overflow-y      : hidden;
}

.divEnclosure canvas {
    flex-shrink : 0;
}

.labelWithoutIpe {
	color		: red;
	font-weight	: bold;
	font-size	: 16px;
}

.dataDiff {
	color		  : red;
	font-weight   : bold;
	border		  : 1px solid red;
	border-radius : 0.3rem !important;
}

.divPatientHisto {
	height           : 300px;
	overflow         : auto;
}

.fieldPhoneInput {
	display : flex;
	gap     : 0.5rem;
}

.fieldPhoneInput select {
	width : fit-content;
}

.input-group > :first-child, .input-group > :first-child.input-group-button > * {
	border-radius : .2rem;
}

.input-group, .fieldDatePicker {
	border-radius : 0.3rem;
	overflow      : hidden;
	border        : solid 1px currentcolor;
	word-break    : break-all;
	margin-bottom : .5rem;
	gap     	  : 0;
	display       : flex;
}

.input-group-label {
	padding : 0 0.3rem;
}

.input-group:focus, .input-group:focus-within, .fieldDatePicker:focus, .fieldDatePicker:focus-within {
	border     : 1px solid var(--color-primary);
}

.input-group:focus-within {
	border     : 1px solid var(--color-primary);
}


.input-group > select {
	text-align      : center;
	text-align-last : center;
	margin          : 0;
}

.input-group > input, .fieldDatePicker > input {
	margin : 0;
}

.input-group  > img, .fieldDatePicker > img {
	box-sizing : border-box;
	padding    : 0.2rem;
	width      : fit-content;
	height     : auto;
	margin     : auto 0 auto;
}

.input-group > *, .input-group > *:focus, .fieldDatePicker > *, .fieldDatePicker > *:focus {
	border     : none;
}

.inputWithPostLabel {
	display     : flex;
	gap         : 0.5rem;
	align-items : center;
}

.inputWithPostLabel label{
	word-break : normal;
}

#_idDivTube {
	margin-top : 1rem;
}

.divObjectif {
	text-align: center;
}

@media only screen and (min-width: 640px) {
	
	#topButton {
		position : fixed;
		bottom   : 7vh;
		left     : 0;
		right    : 0;
	}
	
	.footer {
		position : fixed;
		bottom   : 0;
		left     : 0;
		right    : 0;
	}
}

.footer {
	background: #dddddd;
}