html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
* {
    box-sizing: border-box; 
}

:root {
    --primary-color: #2E54C7;
    --darkest-color: #04060C;
    --dark-color: #4B5470;
    --medium-color: #7D88A2;
    --light-color: #D1D7EA;
    --lightest-color: #EDEEF2;
    --extra-light-color: #FBFBFD;
    --white-color: #FFFFFF;
    --warning-color: #f27474;
    --sucess-color: #a5dc86;
    --xxs: 4px;
    --xs: 8px;
    --s: 16px;
    --m: 24px;
    --l: 32px;
    --xl: 48px;
    --xxl: 80px;
}

@font-face {
    font-family: 'Luciole';
    src: url('../fonts/Luciole-Regular.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Luciole-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Luciole-Regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Luciole-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/Luciole-Regular.svg#Luciole-Regular') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
@font-face {
    font-family: 'Luciole';
    src: url('../fonts/Luciole-Bold.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Luciole-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/Luciole-Bold.woff') format('woff'), /* Modern Browsers */
         url('../fonts/Luciole-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/Luciole-Bold.svg#Luciole-Bold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

html{
    font-size: 18px;
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    Font-family: 'Luciole', Helvetica, Tahoma, Arial, sans-serif;
    text-align: left;
    color: var(--darkest-color);
    background: var(--white-color);
}

main{
    flex: 1;
}

.grid-12c-3r{ 
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--l);
    margin: var(--xl) var(--xxl) 0 var(--xxl);
}

.grid-1-1-2-13{
    grid-area: 1 / 1 / 2 / 13;
}
.grid-2-1-2-5{
    grid-area: 2 / 1 / 2 / 5;
}
.grid-2-1-2-6{
    grid-area: 2 / 1 / 2 / 6;
}
.grid-2-1-3-13{
    grid-area: 2 / 1 / 3 / 13;
}
.grid-2-5-2-9{
    grid-area: 2 / 5 / 2 / 9;
}
.grid-2-9-2-13{
    grid-area: 2 / 9 / 2 / 13;
}
.grid-3-1-3-5{
    grid-area: 3 / 1 / 3 / 5;
}
.grid-3-5-3-9{
    grid-area: 3 / 5 / 3 / 9;
}

.grid-compare{
    display: grid;
    grid-template-columns: 1fr var(--xxl) 1fr;
}

.gap-compare{
    margin: 0 var(--m);
    border-left: 2px solid var(--dark-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.compare-heightmax{
    height: 800px;
    overflow-y: auto
}

.tile{ 
    padding: var(--m);
    border-radius: var(--xs);
    border: 1px var(--light-color) solid;
    box-shadow: var(--light-color) 0px 1px 2px 0px;
}

.tile-sort{ 
    display: flex;
    flex-direction: row;
    background-color: var(--lightest-color);
    border-radius: var(--xs);
    border: 1px var(--light-color) solid;
    box-shadow: var(--light-color) 0px 1px 2px 0px;
    padding: var(--xs);
    margin-bottom: var(--xs);
    transition: 0.3s;   
}

.tile-sort.is-dragged{
    transition: 0s;
    opacity: 0.5;
    z-index: 9000;
}

footer{ 
    padding: var(--xs);
    width: 100%;
    color: var(--darkest-color);
    text-align: center;
}

.flex-auto{ 
    flex:1;
}

.flex-column-start{ 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

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

.flex-row-start{ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.flex-row-space-between{ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
}

.item-flex-row{ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: var(--xs);
}

.trash-container{
    display: flex;
    flex-direction: column;
    height: 60vh;
    width:auto;
    overflow-y: auto;
}

.drag-and-drop-container{
    display: flex;
    flex-direction: column;
    height: 60vh;
    width:auto;
    overflow-y: auto;
}

.no-margin{
    margin: 0 !important;
}
.margin-xs{
    margin: var(--xs);
}
.margin-s{
    margin: var(--s);
}
.margin-m{
    margin: var(--m);
}
.margin-top-xs{
    margin-top: var(--xs);
}
.margin-top-s{
    margin-top: var(--s);
}
.margin-top-m{
    margin-top: var(--m);
}
.margin-top-l{
    margin-top: var(--l);
}
.margin-top-xl{
    margin-top: var(--xl);
}
.margin-top-xxl{
    margin-top: var(--xxl);
}
.margin-top-90{
    margin-top: 90px;
}
.margin-top-eqm{
    margin-top: calc(4 * var(--xxl));
}
.margin-left-xs{
    margin-left: var(--xs);
}
.margin-left-s{
    margin-left: var(--s);
}
.margin-right-xs{
    margin-right: var(--xs);
}
.margin-right-s{
    margin-right: var(--s);
}
.margin-right-m{
    margin-right: var(--m);
}
.margin-right-xxl{
    margin-right: var(--xxl);
}
.margin-bottom-xxl{
    margin-bottom: var(--xxl);
}
.margin-bottom-l{
    margin-bottom: var(--l);
}
.margin-bottom-m{
    margin-bottom: var(--m);
}
.margin-bottom-xs{
    margin-bottom: var(--xs);
}
.margin-bottom-s{
    margin-bottom: var(--s);
}
.margin-bottom-xxs{
    margin-bottom: 2px;
}
.margin-bottom-xxs2{
    margin-bottom: 6px;
}
.separator-border-bottom{
    border-bottom: 2px solid var(--darkest-color);
}
.spacer-vertical-l{
    height: var(--l);
}
.no-padding{
    padding: 0 !important;
}

/* ### ADD RISK ### */
.container-flex-column{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: var(--m) var(--xxl);
}

.container-compare{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: var(--m) calc(3 * var(--xxl));
}

.grid-btn-exam-add-risk{
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--l);
    padding: var(--m) var(--xs);
    border-right: 1px var(--light-color) solid;
    border-bottom: 1px var(--light-color) solid;
    border-left: 1px var(--light-color) solid;
    box-shadow: var(--light-color) 0px 1px 2px 0px;
}

.border-bottom{
    border-radius: 0 0 var(--xs) var(--xs);
}

.radio-label{
    margin-top: var(--xs);
}
.radio-label:hover, .item-flex-row:hover{
    color: var(--primary-color);
}

.schema{
    padding: var(--xs);
    margin-left: var(--xs);
    background-color: var(--white-color);
    border: 1px solid var(--medium-color);
    border-radius: var(--xs);
    font-size: 0.6rem;
    flex: 1;
}

.schema p{
    line-height:normal;
}

#title_risk, #title_risk_eqm, #title_risk_spst, #title_riskCompare, #linkEqmTB{
    width: 30%;
}

#observation1, #observation2, #observation3, #observation4, #observation5, #observation6, #observation7, #observation8, #observation9, #observation10,
#clinical1Compare, #clinical2Compare, #clinical3Compare, #clinical4Compare, #clinical5Compare, #clinical6Compare, #clinical7Compare, #clinical8Compare, #clinical9Compare, #clinical10Compare,
#observation1Compare, #observation2Compare, #observation3Compare, #observation4Compare, #observation5Compare, #observation6Compare, #observation7Compare, #observation8Compare, #observation9Compare, #observation10Compare,
#orientation1Compare, #orientation2Compare, #orientation3Compare, #orientation4Compare, #orientation5Compare, #orientation6Compare, #orientation7Compare, #orientation8Compare, #orientation9Compare, #orientation10Compare,
#info1Compare, #info2Compare, #info3Compare, #info4Compare, #info5Compare, #info6Compare, #info7Compare, #info8Compare, #info9Compare, #info10Compare,
#prevention1Compare, #prevention2Compare, #prevention3Compare, #prevention4Compare, #prevention5Compare, #prevention6Compare, #prevention7Compare, #prevention8Compare, #prevention9Compare, #prevention10Compare,
#divSheetInfoCompare, #divSheetPreventionCompare {
    border: 1px solid var(--light-color);
    border-radius: var(--xs);
    min-height: calc(var(--xxl) * 2);
    margin: var(--xs) 0;
    padding: 14.58px var(--xs);
    font-size: 0.9rem;
    font-family: Luciole;
    color: var(--darkest-color);
    height: calc(var(--xxl) * 2);
    width: 100%;
    resize: none;
}

.exam-btn-btn{
    border: solid 2px var(--primary-color);
    border-radius: var(--xs);
    color: var(--primary-color);
    background-color: var(--white-color);
    font-size: 1rem;
    margin: 0 4px 4px 0;
    cursor: pointer;
}

.exam-btn-btn:hover{
    background-color: var(--primary-color);
    color: var(--white-color);
}

.exam-btn-textarea{
    border: 1px solid var(--dark-color);
    height: var(--xxl);
    padding: var(--xs);
    color: var(--darkest-color);
    background-color: var(--white-color);
    font-size: 1rem;
    font-family: Luciole;
    border-radius: var(--xs);
    width: 100%;
    resize: none;
}

.add-line{
    color: var(--primary-color);
    margin: var(--s) 0;
    cursor: pointer;
}

.add-line:hover{
    color: var(--darkest-color);
}

.copyCompare{
    padding-left: var(--xs);
    font-size: 1.22rem;
}
.copyCompare:hover{
    cursor: pointer;
}

/* #### TOPBAR #### */
nav{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: var(--dark-color);
    height: var(--xl);
}

.fixed-nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.topbar-menu{
    font-size: 1.5rem;
    color: var(--lightest-color);
    cursor: pointer;
    background-color: var(--primary-color);
    text-decoration: none;
    border: none;
    padding: var(--xs) var(--s);
    margin-right: var(--xs);
}

.tab-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    max-width: 80vw;
    overflow: hidden;
}

.tab{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 var(--xs);
    transition: color .3s;
    transform: translate(0, 1px);
    border-radius: var(--xs) var(--xs) 0 0;
    font-size: 1.2rem;
}

.tab:not(.tab-add):not(.tab-logout)::after {
    content: "";
    position: absolute;
    top: 20%;
    right: 0;
    bottom: 20%;
    width: 2px;
    background-color: var(--lightest-color);
}

.tab a {
    color: var(--white-color);
    font-size: 1.2rem;
}

.tab-title{
    padding: 0 var(--xs) 0 var(--xs);
    box-shadow: none;
    white-space: nowrap;
}

.tab:hover:not(.tab-add):not(.tab-search), .tab:hover .tab-title, .tab:hover .tab-close{
    background-color: var(--light-color);
    color: var(--darkest-color);
}

.tab-active{
    background-color: var(--lightest-color);
    color: var(--darkest-color);
    border-radius: var(--xs) var(--xs) 0 0;
    box-shadow: 2.5px 0 10px var(--darkest-color), -2.5px 0 10px var(--darkest-color);
    z-index: 200;
}
.tab-active a{
    color: var(--darkest-color);
}

.countdown{
    text-decoration: none;
    color: #f27474;
    font-size: 1.2rem;
    white-space: nowrap;
}

.tab-close{
    text-decoration: none;
    padding: 0 var(--xs);
    border-radius: 4px;
}
.tab:hover .tab-close:hover{
    background-color: var(--lightest-color);
}

.tab-close-risk:hover{
    background-color: var(--light-color);
    cursor: pointer;
}

.tab-add{
    background-color: var(--primary-color);
    margin: 4px var(--xs) 4px var(--xs);
    padding: 0;
    border: 2px solid var(--white-color);
    border-radius: var(--xs);
}

.tab-add a{
    color: var(--white-color);
    text-decoration: none;
    padding: var(--xs);
}

.tab-add:hover{
    background-color: var(--white-color);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}
.tab-add:hover a{
    color: var(--primary-color);
}

#header-search{
    border: 1px solid var(--lightest-color);
    padding: var(--xs);
    color: var(--lightest-color);
    background-color: var(--dark-color);
    font-family: Luciole;
    font-size: 1rem;
    border-radius: var(--s);
    height: var(--l);
    line-height: var(--s);
    margin-right: var(--xs);
}

#header-search:hover{
    border-color: var(--dark-color);
    background-color: var(--lightest-color);
    color: var(--darkest-color);
    cursor: pointer;
}

#main-search{
    border: 1px solid var(--dark-color);
    padding: var(--xs);
    color: var(--medium-color);
    background-color: var(--white-color);
    font-family: Luciole;
    font-size: 1.1rem;
    border-radius: var(--s);
    height: var(--xl);
    line-height: var(--s);
    width: 500px;
}

#main-search:hover, #main-search:focus{
    background-color: var(--lightest-color);
    color: var(--darkest-color);
    cursor: pointer;
}

.topbar-renamable:focus{
    background-color: var(--white-color);
    color:var(--darkest-color);
}

.push{
    margin-left: auto;
}

/* #### TOOLBAR #### */
.toolbar{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: var(--l);
    background-color: var(--lightest-color);
    box-shadow: 0 -2.5px 10px var(--dark-color);
    z-index: 300;
}

.tool{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 var(--xs);
    height: var(--l);
    background-color: var(--lightest-color);
    color: var(--darkest-color);
}
.spacer{
    height: 60%;
    width: 2px;
    background-color: var(--medium-color);
}

.tool:hover, .tool:hover > input, .dropdown-space-btw:hover, .dropdown-child > p:hover{
    background-color: var(--light-color);
    cursor: pointer;
}

.tool > input, .tool > a{
    font-size: 1rem;
    border: none;
    text-decoration: underline;
    color: var(--darkest-color);
    white-space: nowrap;
}
.tool > a{
    padding: 1px 6px;
}
.dropdown-icon{
    font-size: 2rem;
}

.had-copy{
    color: #4CAF50;
}

/* DROPDOWN MENU */
.dropdown{
    display: flex;
    position: relative;
}

.dropdown-child {
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: var(--l);
    background-color: var(--lightest-color);
    box-shadow: 0px 0px 8px 2px var(--light-color);
    z-index: 200;
    padding: 0 var(--s);
    cursor: default;
}

#dropdown-frame{
    width: 25vw;
    min-width: 250px;
    height: 25vh;
    min-height: 500px;
}

#dropdown-copy, #dropdown-sort{
    width: 250px;
    padding: 0;
}

#dropdown-copy-by-char{
    width: 200px;
    top:0;
    left: 250px;
    padding: 0;
}

#dropdown-copy-by-class, #dropdown-copy-by-subclass{
    width: 400px;
    top:0;
    left: 250px;
    padding: 0;
}

.dropdown-section:not(:last-child){
    border-bottom: 2px solid var(--medium-color);
}

.dropdown-section > p, .dropdown-space-btw > p{
    font-size: 1rem;
    padding: var(--xs) 0;
}

.dropdown-section > a {
    font-size: 1rem;
    margin-bottom: var(--xs);
    color: var(--darkest-color);
    display: block;
}

.dropdown-section > a:hover {
    background-color: var(--light-color);
}

.dropdown-space-btw {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--s);
}

.dropdown-list-char, .dropdown-list-class, .dropdown-list-subclass {
    padding: var(--xs);
}

.dropdown-inactive {
    background-color: var(--light-color);
}

#noResultMessage{
    display: none;
}

/* #### SEARCH #### */

#resizable-aside{ 
    height: calc(100vh - var(--xl) - var(--l));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--lightest-color);
    box-shadow: 0px 0px 8px 2px var(--light-color);
    /* min-width: 430px; */
}

#resizable-aside .dropdown-section{ 
    margin: 0 var(--s);
}

#filters-search{ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    
}

.filters-container{ 
    display: flex;
    flex-direction: column;
    margin: 0 var(--l) var(--xs) 0;    
}

#searchJS{ 
    overflow-y: auto;
}

.title-categories{ 
    font-weight: 600;
    padding: var(--xs) var(--s);
    background-color: var(--light-color);
    line-height: 1;
}

.item-container{ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--s);
}

.item-search{ 
    color: var(--darkest-color);
    cursor: move;
    margin: 4px 0;
    line-height: 1.3;
    width: 100%;
    text-decoration: underline;
}

.item-container .exist-bloc, .exist-bloc > .item-search{ 
    color: var(--medium-color);
    text-decoration: none;
    cursor: not-allowed;
}

.item-container:hover{ 
    background-color: var(--light-color);
    border-top: 1px var(--dark-color) solid;
    border-bottom: 1px var(--dark-color) solid;
}

div[id^="sortablesearch"] > .item-container:first-child{ 
    padding-top: var(--xs);
}

div[id^="sortablesearch"] > .item-container:last-child{ 
    padding-bottom: var(--xs);
}

.star, .star-library{
    cursor: pointer;
}

/* #### FORMS #### */
.stick-input{  
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.stick-input input[type="text"] {  
    border: 1px solid var(--dark-color);
    height: var(--l);
    min-width: 100px;
    padding-left: var(--xs);
    color: var(--darkest-color);
    background-color: var(--white-color);
    font-size: 1rem;
    margin-bottom: var(--s);
    border-radius: var(--xs) 0 0 var(--xs);
}

input[type="search"], input[type="text"], input[type="email"], input[type="password"]{  
    border: 1px solid var(--dark-color);
    height: var(--l);
    min-width: 200px;
    padding: var(--xs);
    color: var(--darkest-color);
    background-color: var(--white-color);
    font-size: 1rem;
    font-family: Luciole;
    margin-bottom: var(--s);  
    border-radius: var(--xs);
    width: 100%;
}

textarea{  
    border: 1px solid var(--dark-color);
    min-width: 200px;
    padding: var(--xs);
    color: var(--darkest-color);
    background-color: var(--white-color);
    font-size: 1rem;
    font-family: Luciole;
    /* margin-bottom: var(--s);   */
    border-radius: var(--xs);
    width: 100%;
    overflow-y: auto;
    resize: none;
}

input[type="checkbox"], input[type="radio"]{  
    margin: 0 var(--xs) var(--xs) 0;
    transform: scale(1.3);
    position: relative;
}

input[type="checkbox"]::before, input[type="radio"]::before{  
    content: '';
    position: absolute;
    top: 0;
    left: 0;
}

.input-send{  
    border: 1px solid var(--dark-color);
    border-radius: 0 var(--xs) var(--xs) 0;
    height: var(--l);
    color: var(--white-color);
    font-size: 1rem;
    background-color: var(--primary-color);
}

p.error-tip {  
    display: none;
    color: var(--warning-color);
    padding: 0 0 4px 0;
}

.error-tip.active {  
    display: block;
}

.error-input{  
    border: 2px solid  var(--warning-color) !important;
    background-color: #f3e7e7 !important;
}

/* GESTION SLIDER BUTTON */
.switch{  
    display: inline-block;
    position: relative;
    width: 42px;
    height: var(--m);
    cursor: pointer;
    overflow: hidden;
    margin: 0 var(--xs);
}

.switch input {  
	position: absolute;
	top: -30px;
	left: -30px;
	width: 0;
	height: 0;
}

.switch input + span {  
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: var(--light-color);
   border: 1px var(--lightest-color) solid;
   border-radius: 20px;
}

.switch input:checked + span {  
	background: var(--primary-color);
}

.switch input + span:before {  
	content: "";
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 2px;
	width: 18px;
	height: 18px;
	background: var(--white-color);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all .3s;
}

.switch input:checked + span:before {  
	left: 20px;
}

/* #### BOUTONS #### */
.button-confirm{ 
    height: var(--xl);
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--dark-color);
    border-radius: var(--xs);
    font-size: 1.22rem;
    font-weight: 600;
    padding: var(--xs) var(--l);
    width: fit-content;
}

a.button-confirm, a.button-cancel{ 
    text-decoration: none;
}

.button-confirm:hover{  
    background-color: var(--white-color);
    color: var(--primary-color);
    cursor: pointer;
}

.button-cancel{ 
    height: var(--xl);
    background-color: var(--warning-color);
    color: var(--white-color);
    border: 1px solid var(--warning-color);
    border-radius: var(--xs);
    font-size: 1.22rem;
    font-weight: 600;
    padding: var(--xs) var(--l);
    width: fit-content;
    align-items: baseline;
    white-space: nowrap;
}

.button-cancel:hover{
    background-color: var(--white-color);
    color: var(--warning-color);
    cursor: pointer;
}

.element-checked{
   color: var(--primary-color);
} 

.required{
    font-size: 1.3rem;
    color: var(--warning-color);
}

.tertiary-button{
    color: var(--primary-color);
    text-decoration: underline;
}
.tertiary-button:hover{
    cursor: pointer;
    color: var(--darkest-color)
}

.deleteJS{
    margin-left: var(--xs) !important;
}

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

.spst-background{
    background-color: var(--lightest-color);
    border-top: 2px solid var(--medium-color);
    border-bottom: 2px solid var(--medium-color);
}
.admin-background{
    background-color: var(--primary-color);
    color: var(--lightest-color);
}

/* #### TEXTES & ELEMENTS #### */
h1{
    font-size: 2.44rem;
    font-weight: bold;
}

h2{
    font-size: 2rem;
    font-weight: bold;
}
h3{
    font-size: 1.56rem;
    font-weight: bold;
}
h4 {
    font-size: 1.22rem;
}
h2 + h3{
    padding-top: var(--m);
}
p{
    line-height: 1.5;
}
.small-text{
    font-size: 0.83rem;
}
.txt-underline{
    text-decoration: underline;
}
.txt-bold{
    font-weight: bold;
}
.txt-italique{
    font-style: italic;
}
.rcpTitle3{
    font-size: 1.1rem;
    text-decoration: underline;
    font-weight: bold;
}
.rcpTitle4{
    font-style: italic;
    text-decoration: underline;
    font-weight: bold
}
a {
    color:var(--primary-color);
}

ol, ul {
    margin-top: .4rem;
	padding-left: 1.4rem;
    font-family: Luciole, sans-serif;
    font-size: 1rem;
    list-style: disc;
}

li {
	margin-top: .2rem;
    font-family: Luciole, sans-serif;
    font-size: 0.9rem;
}

ul ul, ol ul, ul ol, ol ol {
	margin-bottom: 0;
}

hr{
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin: calc(var(--s) + var(--xs)) 0 var(--s) 0;
}

.account-item{
    font-size: 1.1rem;
    display: inline-block;
    color: var(--primary-color);
    padding-top: var(--xs);
}

.numbers{
    color:var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 var(--xs);
}

.bold{
    font-weight: 600;
}

.container-flex-column-small{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: var(--m) calc(4 * var(--xxl));
}

.list-flex-row{
    padding: 0 var(--s);
}

.list-flex-row:hover{
    background: var(--lightest-color);
}

.tile .list-flex-row:last-child{
    margin-bottom: var(--s);
}

.tile .list-flex-row:first-child{
    margin-top: var(--s);
}
.selected-warning, .selected-warning a{
    background-color: var(--warning-color);
    color: var(--white-color);
    text-decoration: none;
}

.selected-sucess, .selected-sucess a{
    background-color: var(--sucess-color);
    color: var(--darkest-color);
    text-decoration: none;
}

.up-form-title{
    font-size: var(--xxl);
    font-weight: bold;
    color: var(--primary-color);
    margin: auto;
    text-align: center;
}

.input-text::placeholder {
    font-style: italic;
    color:rgb(195, 190, 190);
}

.medDb-list{
    font-size: 1rem;
    color: var(--dark-color);
    display: block;
    padding-bottom: 6px;
    text-decoration: none;
}

.medDb-list:hover{
    color: var(--primary-color);
    text-decoration: underline;
}

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

/* ###### REZISER ######*/

.ck-toolbar__items {
    max-width: 400px;
}

.container-index{
    display: flex;
    height: calc(100vh - var(--xl) - var(--l));
}

#resizer{
    width: var(--s);
    cursor: ew-resize;
    position: relative;
    user-select: none;
}

.handle{
    position: absolute;
    top: calc(50% - var(--l));
    left: 75%;
    width: var(--xs);
    height: var(--l);
    background-color: var(--light-color);
    border: 1px var(--dark-color) solid;
    border-radius: var(--xs);
}

.handle:hover {
    background-color: var(--primary-color);
    border: 1px var(--dark-color) solid;
}

/* #### BLOCS #### */
.fixed{
    height: calc(100vh - 80px);
    width: 100%;
    flex-grow: 1;
    overflow: hidden;
}

.toolbar-to-bloc{ 
    height: var(--s);
    width: 100%;
}
.bloc{ 
    height: 100%;
    padding: 0;
    overflow: auto;
}

.bloc-container{ 
    border-radius: var(--xs);
    margin: 0 var(--s) var(--m) var(--s);
    position: relative;
}

.bloc-up{ 
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    height: var(--l);
    align-content: center;
    position: sticky;
    top: 0;
    background-color: var(--lightest-color);
    border: 1px var(--light-color) solid;
    border-radius: var(--xs) var(--xs) 0 0 ;
    box-shadow: var(--light-color) 0px 1px 2px 0px;
    overflow: hidden;
}

.alerte-orientation{
    background-color:var(--light-color);
}

.bloc-up-close{ 
    border-radius: var(--xs);
}

.bloc-title{ 
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    z-index: 30000;
}

.expand-container{ 
    width: var(--l);
    height: var(--l);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease-in-out;
}

.expand-container:hover{ 
    transform: scale(1.2);
    cursor: pointer;
}

.title-bloc{ 
    font-weight: 600;
    margin-left: var(--xs);
}

.bloc-move{ 
    cursor: move;
    margin: 0;
}

.bloc-move:hover{ 
    color: var(--primary-color);
}

.bloc-parameter{ 
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.bloc-parameter a { 
    text-decoration: none;
    color: var(--darkest-color);
    padding: 0 var(--xs);
}

.bloc-parameter a:hover { 
    background-color: var(--light-color);
}

.bloc-parameter-option{ 
    margin: 0 var(--xs);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.bloc-data-common{ 
    grid-gap: var(--l);
    /* background-color: var(--white-color); */
    background-color: var(--extra-light-color);

    border-right: 1px var(--light-color) solid;
    border-bottom: 1px var(--light-color) solid;
    border-left: 1px var(--light-color) solid;
    box-shadow: var(--light-color) 0px 1px 2px 0px;
}

.bloc-dataA1{ 
    display: grid;
    grid-template-columns: 0.8fr 1fr 0.6fr 0.8fr 0.8fr;
    padding: 0 var(--xs);
}

.bloc-dataAT1{ 
    display: grid;
    grid-template-columns: 0.8fr 1fr 0.6fr 0.8fr 0.8fr;
    padding: var(--xs) var(--xs) 0 var(--xs);
    position: sticky;
    top: var(--l);
}

.bloc-dataB1{ 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 var(--xs);
}

.bloc-dataBT1, .bloc-dataTT{ 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: var(--xs) var(--xs) 0 var(--xs);
    position: sticky;
    top: var(--l);
}

.bloc-dataC1{ 
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    padding: 0 var(--xs);
}

.bloc-dataCT1, .bloc-dataHT{ 
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    padding: var(--xs) var(--xs) 0 var(--xs);
    position: sticky;
    top: var(--l);
}

.bloc-container div[id^="bloc-data-"] .bloc-dataA1:last-of-type,
.bloc-container div[id^="bloc-data-"] .bloc-dataB1:last-of-type,
.bloc-container div[id^="bloc-data-"] .bloc-dataC1:last-of-type,
.bloc-container div[id^="bloc-data-"] .bloc-dataA:last-of-type,
.bloc-container div[id^="bloc-data-"] .bloc-dataB:last-of-type,
.bloc-container div[id^="bloc-data-"] .bloc-dataC:last-of-type { 
    border-radius: 0 0 var(--xs) var(--xs);
}

.bloc-dataA{ 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0 var(--xs);
}

.bloc-dataAT{ 
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: var(--xs) var(--xs) 0 var(--xs);
    position: sticky;
    top: var(--l);
}

.bloc-dataB, .bloc-dataC{ 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--xs);
}

.bloc-dataBT, .bloc-dataCT{ 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: var(--xs) var(--xs) 0 var(--xs);
    position: sticky;
    top: var(--l);
}

.bloc-dataQN{  /* 1*/
    display: flex;
    flex-direction: column;
    padding: 0 var(--xs) var(--xs) var(--xs);
}

.bloc-dataMP{
    display: grid;
    grid-template-columns: 1fr 0,3fr 1fr;
}

.no-sticky{
    position: static;
}

.bloc-compare{
    padding: var(--s);
}

.bloc-clinical, .bloc-orientation, .bloc-info, .bloc-prevention{
    padding: var(--xs) 0;
    color: var(--dark-color);
    font-size: 0.9rem;
}

.bloc-button{
    margin: var(--xs) 0;
}

.focus-button{
    border: solid 2px var(--primary-color);
    border-radius: var(--xs);
    color: var(--primary-color);
    background-color: var(--white-color);
    font-size: 1rem;
    margin: 0 var(--xs) var(--xs) 0;
    cursor: pointer;
}

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

.bloc-exam{
    cursor: pointer;
    color: var(--primary-color);
}

.bloc-exam-orientation{
    padding : 0 0 var(--s) var(--m);
}

.observation{
    width: 100%;
    resize: none;
    margin-top: var(--xs);
    padding: var(--xs) var(--s);
    border-radius: var(--xs);
    border: 1px var(--light-color) solid;
    box-shadow: var(--light-color) 0px 1px 2px 0px;
    font-size: 1rem;
    font-family: luciole;
    color: var(--darkest-color);
    overflow-y: hidden;
}

.bloc-orientation, .bloc-prevention{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.bloc-new-tab{
    display: flex;
    flex-direction: column;
    padding:var(--s);
    height: 100%;
}

.bloc-quick-note > textarea{
    width: 100%;
    height: 200px;
    resize: none;
    padding: var(--xs);
    border-radius: var(--xs);
    border: 1px var(--light-color) solid;
    box-shadow: var(--light-color) 0px 1px 2px 0px;
    font-size: 1rem;
    font-family: luciole;
    color: var(--darkest-color);
    overflow-y: hidden;
}

.no-bloc{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-bloc-txt{
    padding: var(--m) 0;
    font-size: 2rem; 
    text-align: center;
}

.grid-exam-synthese{
    display: grid;
    grid-template-columns: 0.7fr 1fr 0.7fr;
    overflow: auto;
}

.login-container{
    width: 40%;
    min-width: 500px;
    margin: auto;
    margin-top: var(--l);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* text-align: center; */
}

.form-container{
    padding: var(--m);
    border-radius: var(--m);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid var(--light-color);
    box-shadow: var(--light-color) 0px 1px 2px 0px;
}

/* #### MODALE ####*/
#modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none;
}
  
#modalContainer, #modalContainerBtn{
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 75%;
    height: 96%;
    background-color: var(--lightest-color);
    border: 1px solid var(--medium-color);
    border-radius: var(--xs);
    padding: var(--m);
    z-index: 10000;
    overflow: hidden;
    display: none;
}

#modalContainerProtocols{
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 50%;
    height: 96%;
    background-color: var(--lightest-color);
    border: 1px solid var(--medium-color);
    border-radius: var(--xs);
    padding: var(--m);
    z-index: 10000;
    overflow: hidden;
    display: none;
}

#modalExamToolBarContainer{
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 75%;
    height: 96%;
    background-color: var(--lightest-color);
    border: 1px solid var(--medium-color);
    border-radius: var(--xs);
    padding: var(--m);
    z-index: 10000;
    overflow: auto;
    display: none;
}

.exams-container{
    flex: 1;
}

input[type="search"].search-exam-field{
    width: calc(var(--xxl) * 3);
}

.grid-header-modale-exams{
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.4fr 0.4fr;
    margin-right: var(--s);
}

#grid-modale-exams{ 
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.4fr 0.4fr;
    height: 550px;
}

.header-exams{
    background-color: var(--light-color);
    border-bottom: 2px solid var(--dark-color);
    padding: var(--xs);
    position: sticky;
}
.table-exams{
    border-bottom: 1px solid var(--dark-color);
    padding: var(--xs);
}

.clear-table-row{
    background-color: var(--white-color);
}

.exam-modal{
    color:var(--dark-color);
    padding: var(--s);
    border-bottom: 1px solid var(--primary-color);
}

.grid-header-modale-protocols{
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 0.4fr 0.4fr;
    margin-right: var(--s);
}

#grid-modale-protocols{
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 0.4fr 0.4fr;
    height: 550px;
}

#modalSearchHeader{
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 50%;
    border-radius: var(--xs);
    z-index: 10000;
    overflow: auto;
    display: none;
    background-color: var(--lightest-color);

}

#search-form{
    padding: var(--xxs);
    border-radius: var(--xs);
    background-color: var(--lightest-color);
}

#search-page-form{
    border-radius: 2px;
}

#search-input-meili{
    display: flex;
    flex-direction: row;
    padding: var(--xxs);
    border-radius: var(--xs);
    margin: var(--xxs) var(--xxs) var(--s) var(--xxs);
    border: 1px solid var(--medium-color);
    background-color: var(--lightest-color);

}

#search-input-meili button{
    border: none;
    border-radius: var(--xs);
    font-size: 1.3rem;
    cursor: pointer;
    padding-bottom: 7px;
}
#search-input-meili button:hover{
    background-color: var(--light-color);
}

#searchbar-meilisearch, #searchbar-specifics{
    height: var(--xl);
    background-color: var(--lightest-color);
    margin-bottom: 0;
    border: none;
    outline: none;
}

#search-input-meili:has(#searchbar-meilisearch:focus), #searchbar-meilisearch:focus, #search-input-meili:has(#searchbar-specifics:focus), #searchbar-specifics:focus{
    background-color: var(--white-color);
}

#search-filter{
    margin: var(--xs);
}

.checkbox-label{
    margin-right: var(--s);
}
.nb-page{
    padding: var(--xxs);
    border-radius: var(--xs);
}
.nb-page:hover{
    background-color: var(--primary-color);
    color: var(--white-color);
}

#resultsPreview{
    border-top: 1px solid var(--medium-color);
}

.preview-row{
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    grid-gap: var(--xs);
    padding: var(--s) var(--xs) ;
    border-bottom: 1px solid var(--medium-color);
}

.preview-total-row{
    padding: var(--s) var(--xs) ;
    border-bottom: 1px solid var(--medium-color);
    text-align: center;
}

.preview-row:hover, .preview-total-row:hover{
    background-color: var(--white-color);
}

.preview-row-specifics{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--s) var(--xs) ;
    border-bottom: 1px solid var(--medium-color);
}

.preview-total-row-specifics{
    padding: var(--s) var(--xs) ;
    border-bottom: 1px solid var(--medium-color);
    text-decoration: underline;
}

.preview-row-specifics:hover, .preview-total-row-specifics:hover{
    background-color: var(--lightest-color);
}

#globalResults:hover, .clipboardCopyJS{
    cursor: pointer;
}
/* #### HABITUS #### */
.bloc-dataH{
    display: grid;
    grid-template-columns: 0.4fr 1fr 1fr 1fr;
    padding: 0 var(--s);
}
/* .bloc-dataH2{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 0 var(--s);
} */

.type-tobacco{
    width: 88px;
    height: var(--l);
    font-size: 0.8rem;
    margin-right: var(--xs);
}
input[type="text"].nb-tobacco, .title-eval-tobacco{
    width:80px;
    min-width: 30px;
    margin:0;
    margin-right: var(--xs);

}

input[type="text"].nb-tobacco.disabled{
    border: var(--light-color) 1px solid;
}

.tab-close-tobacco{
    padding: 0 var(--xs);
    border-radius: var(--xs);
    cursor: pointer;
    font-size: 1.23rem;
}

.tab-close-tobacco:hover{
   background-color: var(--light-color);
}

.habitus-subtitle{
    margin-top: var(--xs);
    padding: var(--xs) 0;
    border-bottom: 1px var(--light-color) solid;
}

#add-tobbaco-observation, #add-alcohol-observation, #add-cast-observation, #add-biometrie-observation{
    border: solid 2px var(--primary-color);
    border-radius: var(--xs);
    color: var(--primary-color);
    background-color: var(--white-color);
    font-size: 1rem;
    margin: 0;
    cursor: pointer;
}

#add-tobbaco-observation:hover, #add-alcohol-observation:hover, #add-cast-observation:hover{
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* #### BIOMETRIE ####*/
.bloc-dataT{
    display: grid;
    grid-template-columns: 375px 375px 1fr;
    background-color: var(--white-color);
    padding: 0 var(--xs);
}

.grid-biometrie-2col{
    display: grid;
    grid-template-columns: 125px 1fr;
    gap: var(--xs);
    margin: var(--s) 0;
}

.grid-biometrie-3col{
    display: grid;
    grid-template-columns: 100px 100px 100px;
    gap: var(--xs);
    margin: var(--s) 0;
}
#class-pa, #class-imc, #class-hta{
    padding: var(--xs);
    border-radius: var(--xs);
}
.norme{
    background-color: var(--sucess-color);
}
.moderate{
    background-color: #f8bb86;
}
.high{
    background-color: var(--warning-color);
}

/* #### NAVIGATION #### */

.return-back{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    padding: var(--xs);
    font-size: 1rem;
    font-weight: 600;
    color:var(--primary-color);
}
.return-back a, .return-back p{
    margin-right: var(--xs);
}
.return-back:hover, .return-back a:hover{
    color: var(--darkest-color);
}

/* #### POSITIONNEMENT #### */
.divide-width50p, #title_risk.divide-width50p, #title_riskCompare.divide-width50p, #titlesheet{
    width: 50%;
}

.hide-element{
    display: none;
}
.hide-element.active {
    display: block;
}

.expand{
    transition: transform 0.3s ease;
}
.unexpand{
    transform: rotate(-90deg);
}

.push-middle{
    margin: auto;
}

.center{
    margin: 0 auto;
    text-align: center;
}

.confirm-logo{
    margin: var(--xxl) 0;
    width: 150px;
}

/* CKEDITOR 5 stylisation */
#divClinical1, #divClinical2, #divClinical3, #divClinical4, #divClinical5, #divClinical6, #divClinical7, #divClinical8, #divClinical9, #divClinical10, 
#divOrientation1, #divOrientation2, #divOrientation3, #divOrientation4, #divOrientation5, #divOrientation6, #divOrientation7, #divOrientation8, #divOrientation9, #divOrientation10,
#divInformation1, #divInformation2, #divInformation3, #divInformation4, #divInformation5, #divInformation6, #divInformation7, #divInformation8, #divInformation9, #divInformation10,
#divPrevention1, #divPrevention2, #divPrevention3, #divPrevention4, #divPrevention5, #divPrevention6, #divPrevention7, #divPrevention8, #divPrevention9, #divPrevention10,  
#divSheetInfo, #divSheetPrevention {
    border: 1px solid var(--light-color);
    border-radius: var(--xs);
    min-height: calc(var(--xxl) * 2);
}

.ck-placeholder{
    color: var(--medium);
    font-size: 0.7rem;
}
.text-tiny {
    font-size: 0.7rem;
}
.text-small {
    font-size: 0.85rem;
}
.text-big {
    font-size: 1.4rem;
}
.text-huge {
    font-size: 1.8rem;
}

/* NOTIFICATIONS */
.colored-toast{
    margin-top: 40px;
}
.colored-toast.swal2-icon-success {
    background-color: #a5dc86 !important;
}
.colored-toast.swal2-icon-error {
    background-color: #f27474 !important;
}
.colored-toast.swal2-icon-warning {
    background-color: #f8bb86 !important;
}
.colored-toast.swal2-icon-info {
    background-color: #3fc3ee !important;
}
.colored-toast.swal2-icon-question {
    background-color: #87adbd !important;
}
.colored-toast .swal2-title {
    color: white;
}
.colored-toast .swal2-close {
    color: white;
}
.colored-toast .swal2-html-container {
    color: white;
}

.alerte{
    padding: var(--s);
    margin: var(--l);
    border-radius: var(--s);
    box-shadow: var(--light-color) 0px 1px 2px 0px;
}

.alerte-danger{
    color: var(--darkest-color);
    font-weight: bold;
    background-color: var(--warning-color);
}
.alerte-success{
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

/* MENU HAMBURGER */
/* Styles de base */
#hamburger-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: var(--primary-color);
    color: var(--lightest-color);
    transition: transform 0.3s ease;
    z-index: 11000;
}

#hamburger-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#hamburger-menu li {
    padding: 1rem;
    border-bottom: 1px solid var(--medium-color);
    
}

#hamburger-menu a {
    text-decoration: none;
    color: var(--lightest-color);
}

.hidden-menu {
    transform: translateX(-100%); 
}

#close-menu-hamburger{
    text-align: right;
}

#close-menu-hamburger a{
    border: 1px solid var(--light-color);
    border-radius: 6px;
    padding: var(--xs);
}

#close-menu-hamburger a:hover{
    background-color: var(--lightest-color);
    color: var(--primary-color);
    border: 1px solid var(--darkest-color-color);
    cursor: pointer;

}
/* #hamburger-btn {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1100;
} */


/* #### PAGES PUBLIQUES #### */
.welcome-overflow{
    height: calc(100vh - var(--xl));
    overflow: auto;
}

.welcome-container{
    padding: 0 calc(3 * var(--xxl));
    margin-bottom: var(--xl);
}

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

.welcome-main{
    font-size: calc(3 * var(--xl));
    color: var(--white-color);
    padding-top: var(--xxl);
}

.welcome-secondary{
    font-size: calc(1.5 * var(--l));
    color: var(--white-color);
    padding: var(--l) 0 var(--l) 0;
}

.welcome-section-header{
    font-size: calc(1.5 * var(--l));
    color: var(--darkest-color-color);
    padding: calc(1.5 * var(--xxl)) 0 var(--xl) 0;
}

.welcome-section-content{
    color: var(--darkest-color-color);
    padding-bottom: var(--xl);
}

.welcome-border-shadow{
    border-radius: var(--s);
    border: 2px solid var(--light-color);
    box-shadow: var(--light-color) 0px 1px 2px 0px;
    overflow: hidden;
    width: fit-content;
    margin: 0 auto;
}

.naf-col{
    display: grid;
    grid-template-columns: 0.7fr 1fr;
}

.mp-col{
    display: grid;
    grid-template-columns: 1fr 0.35fr 1fr;
}

.mp-content{
    padding: var(--s);
}

.mp-border-left{
    border-left: 1px solid var(--darkest-color);
}

.mp-border-right{
    border-right: 1px solid var(--darkest-color);
}

.border-left-mid-col{
    border-left: 2px solid var(--dark-color);
    margin-left: var(--l);
    padding-left: var(--l);
}

.container-number {
    display: grid;
    width: 500px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: var(--xs);
}

.control {
    display: flex;
    flex-direction: column;

}

.arrow {
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    color: rgba(0, 0, 0, 0.6);
    border-top: 1px solid;
}

.arrow:active {
    color: var(--primary-color);
}

.left-up{
    border-left: 1px solid;
    border-radius: var(--xs) 0 0 0;
}
.right-up{
    border-right: 1px solid;
    border-radius: 0 var(--xs) 0 0;
}
.left-down{
    border-left: 1px solid;
    border-bottom: 1px solid;
    border-radius: 0 0 0 var(--xs);
}
.right-down{
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-radius: 0 0 var(--xs) 0;
}

input[type="text"].biometrie{
    width: 65px;
    min-width: var(--l);
    height: var(--xl);
    margin: 0;
    font-size: 1.3rem;
    border-radius: 0;
}

.grid-drug{
    display: grid;
    grid-template-columns: 0.2fr 1fr 0.1fr;
    gap: var(--l);
    padding: 0 var(--xxl);
    margin-bottom: var(--xl);
}

.nav-drug{
    display: flex;
    flex-direction: column;
    position: sticky;
    top: var(--xl);
    height: calc(100vh - (2 * var(--xl)));
}

.margin-top-auto{
    margin-top: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: Luciole;
    font-size: 1rem;
    text-align: left;
}

th, td {
    padding: var(--xs) var(--s);
    border: 1px solid #ddd;
}

th {
    background-color: #f4f4f4;
    font-weight: bold;
    text-transform: uppercase;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}