From 1fefa343081823b38ccf92d9619bb5afa7d625eb Mon Sep 17 00:00:00 2001
From: Ludovic <54670129+lbr38@users.noreply.github.com>
Date: Sat, 18 Nov 2023 11:33:44 +0100
Subject: [PATCH] patch

---
 www/public/resources/styles/common.css | 1416 ++++++++++++------------
 1 file changed, 708 insertions(+), 708 deletions(-)

diff --git a/www/public/resources/styles/common.css b/www/public/resources/styles/common.css
index 84bd67f9..409f8700 100644
--- a/www/public/resources/styles/common.css
+++ b/www/public/resources/styles/common.css
@@ -1,711 +1,711 @@
 /**
  *  v1.4
  */
- @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-
- /**
-  *  Color picker
-  *  https://www.w3schools.com/colors/colors_picker.asp?colorhex=182b3e
-  */
- 
- /**
-  *  Text
-  */
- a {
-     text-decoration: none;
-     /* using text-shadow to generate bold on link */
-     text-shadow: -.25px -.25px 0 transparent,
-                   .25px .25px transparent;
- }
- 
- a:hover {
-     /* using text-shadow to generate bold on link */
-     text-shadow: -.25px -.25px 0 white,
-                   .25px .25px white;
- }
- 
- p, label, a, i, span {
-     font-size: 14px;
-     color: white;
- }
- 
- span {
-     /* line-height: inherit !important; */
-     line-height: initial !important;
- }
- 
- b, strong {
-     font-weight: bolder;
- }
- 
- p, h1, h2, h3, h4, h5 {
-     line-height: 1.5em;
- }
- 
- h1, h2, h3, h4 {
-     color: white;
-     margin-top: 20px;
-     margin-bottom: 30px;
- }
- 
- h3 {
-     width: max-content;
-     font-size: 18px;
-     margin: 50px 0 40px 0;
-     border-bottom: 1px solid #15bf7f;
- }
- 
- h4 {
-     font-size: 16px;
-     margin-bottom: 15px;
- }
- 
- h5 {
-     font-size: 14px;
-     font-weight: bold;
-     margin-top: 10px;
-     margin-bottom: 10px;
- }
- 
- hr {
-     border-color: gray;
-     opacity: 0.11;
- }
- 
- pre {
-     font-family: monospace, monospace;
-     font-size: 12px;
- }
- 
- 
- /**
-  *  Generic class
-  */
- .inline { display: inline; }
- .block { display: block; }
- .inline-block { display: inline-block; }
- .float-left { float: left; }
- .float-right { float: right; }
- .align-top { vertical-align: top; }
- .margin-auto { margin: auto; }
- .text-center { text-align: center; }
- .text-right { text-align: right; }
- .relative { position: relative; }
- .pointer { cursor: pointer; }
- .bold { font-weight: bold; }
- .greentext { color: #14be7e; }
- .redtext { color: #ff0044; }
- .yellowtext { color: #ffb536; }
- .graytext { color : gray; }
- .bkg-green { background-color: #14be7e !important; color: white !important; }
- .bkg-yellow { background-color: #ffb536 !important; color: white !important; }
- .bkg-red { background-color: #ff0044 !important; color: white !important; }
- .no-bkg {background: none !important}
- .center { text-align: center; }
- .baseline { vertical-align: baseline; }
- .font-size-11{font-size: 11px !important}.font-size-12{font-size: 12px !important}.font-size-13{font-size: 13px !important}.font-size-14{font-size: 14px !important}
- .lowopacity, .lowopacity-cst { opacity: 0.33; } /* lowopacity-cst is used for constant lowopacity even on hover */
- .mediumopacity { opacity: 0.55 }
- .verylowopacity { opacity: 0.08; }
- .lowopacity:hover, .mediumopacity:hover, .verylowopacity:hover { opacity: 1 }
- .opacity-80 { opacity: 0.80; }
- .wordbreakall { word-break: break-all; }
- 
- .div-28 { width: 28%; padding: 10px; }.div-29 { width: 29%; padding: 10px; }.div-30 { width: 30%; padding: 10px; }
- .div-33 { width: 33%; padding: 10px; }.div-45 { width: 45%; padding: 10px; }.div-48 { width: 48%; padding: 10px; }
- .div-49 { width: 49%; padding: 10px; }.div-50 { width: 50%; padding: 10px; }.div-65 { width: 65%; padding: 10px; }
- .div-67 { width: 67%; padding: 10px; }.div-68 { width: 68%; padding: 10px; }.div-69 { width: 69%; padding: 10px; }
- .div-70 { width: 70%; padding: 10px; }
- .flex { display: flex; }
- .flex-div-15 { flex: 0 0 14%; }.flex-div-20 { flex: 0 0 19%; }.flex-div-25 { flex: 0 0 24%; }.flex-div-30 { flex: 0 0 29%; }
- .flex-div-33 { flex: 0 0 32%; }.flex-div-40 { flex: 0 0 39%; }.flex-div-50 { flex: 0 0 47%; }.flex-div-60 { flex: 0 0 59%; }
- .flex-div-65 { flex: 0 0 64%; }.flex-div-68 { flex: 0 0 67%; }.flex-div-80 { flex: 0 0 79%; }.flex-div-100 { flex: 0 0 98%; }
- .flex-grow { flex-grow: 1; }
- .flex-wrap { flex-wrap: wrap; }
- .flex-nowrap { flex-wrap: nowrap; }
- .flex-direction-column {flex-direction: column}
- .grid {display: grid}
- .grid-2 {grid-template-columns: auto auto}
- .justify-center {justify-content: center}
- .justify-space-between {justify-content: space-between}
- .justify-end {justify-content: flex-end}
- .align-content-center {align-content: center}
- .align-content-right {align-content: flex-end}
- .align-item-center {align-items: center}
- .align-item-right {align-items: flex-end}
- .align-self-center {align-self: center}
- .column-gap-1{column-gap: 1px}.column-gap-2 {column-gap: 2px}.column-gap-4 {column-gap: 4px}.column-gap-5{column-gap: 5px}.column-gap-6{column-gap: 6px}.column-gap-7{column-gap: 7px}.column-gap-8{column-gap: 8px}.column-gap-9{column-gap: 9px}.column-gap-10{column-gap: 10px}
- .column-gap-20{column-gap: 20px}
- .row-gap-1 {row-gap: 1px;}.row-gap-2 {row-gap: 2px;}.row-gap-4 {row-gap: 4px;}.row-gap-5 {row-gap: 5px;}.row-gap-6 {row-gap: 6px;}.row-gap-7 {row-gap: 7px;}
- .padding-left-15 {padding-left: 15px !important}
- .padding-right-15 {padding-right: 15px !important}
- .margin-bottom-0 {margin-bottom: 0px !important}
- 
- /**
-  *   Tables
-  */
- table {
-     width: 100%;
-     font-size: 14px;
-     table-layout: auto !important;
- }
- .table-large  { width: 100%; }
- .table-medium { width: 65%; }
- .table-small  { width: 25% }
- th {
-     text-align: left;
-     font-weight: 600;
-     vertical-align: middle;
- }
- td {
-     height: 36px;
-     vertical-align: middle;
-     color: white;
- }
- .td-fit {
-     width: 1% !important;
-     white-space: nowrap !important;
-     padding-left: 2px;
-     padding-right: 2px;
- }
- .td-small { width: 200px; }
- .td-medium { width: 300px; }
- .td-large { width: 500px; }
- .td-10, .td-30, .td-50, .td-100 {
-     width: 0px;
-     margin: 0px;
-     white-space: nowrap;
- }
- .td-10 { padding-right: 10px !important; }
- .td-30 { padding-right: 30px !important; }
- .td-50 { padding-right: 50px !important; }
- .td-100 { padding-right: 100px !important; }
- 
- /**
-  *  Generic tables
-  */
- 
- /* Concerne toutes les classes commencant par table-generic- */
- [class^="table-generic"] {
-     border-collapse: separate !important;
-     border-spacing: 0 4px;
-     table-layout: auto !important;
-     /* white-space: nowrap; */
-     word-break: break-word;
- }
- [class^="table-generic"] tr td {
-     padding-left: 8px;
-     padding-right: 8px;
- }
- [class^="table-generic"] tr td:first-child {
-     border-top-left-radius: 2px;
-     border-bottom-left-radius: 2px;
- }
- [class^="table-generic"] tr td:last-child {
-     border-top-right-radius: 2px;
-     border-bottom-right-radius: 2px;
- }
- [class^="table-generic"] thead tr {
-     background: none !important;
-     font-weight: bold;
- }
- .table-generic-blue tr { background-color: #1d3349; }
- .table-generic-red tr  { background-color: #ff0044; }
- 
- /**
-  *  Icons
-  */
- .icon, .icon-small, .icon-lowopacity, .icon-verylowopacity, .icon-mediumopacity, .icon-nf, .icon-np {
-     /* height: 13px; */
-     height: 15px;
-     margin-left: 5px;
-     margin-right: 5px;
-     vertical-align: middle;
-     cursor: pointer;
- }
- .icon-small {
-     height: 8px;
- }
- .icon-lowopacity {
-     opacity: 0.33;
- }
- .icon-mediumopacity {
-     opacity: 0.55;
- }
- .icon-verylowopacity {
-     opacity: 0.08;
- }
- .icon-lowopacity:hover, .icon-verylowopacity:hover, .icon-mediumopacity:hover {
-     opacity: 1;
- }
- /* icon with no pointer */
- .icon-np {
-     cursor: default;
- }
- .icon-copy {
-     height: 13px;
- }
- 
- /**
-  *  Forms, button, input, textarea
-  */
- input[type=text], input[type=date], input[type=time], input[type=number], input[type=email], input[type=password], input[type=color], input[type=file], select {
-     width: 100%;
-     height: 35px;
-     margin-top: 4px;
-     margin-bottom: 4px;
-     padding-left: 10px;
-     border: none;
-     border-radius: 20px;
-     box-sizing: border-box;
-     font-size: 14px;
-     color: white;
-     background-color:#25394b;
- }
- input[type=file] {
-     background: none !important;
- }
- input[type=color].color-xsmall { width: 50px; vertical-align: middle; }
- input[type].input-small, .select-small { width: 100px; }
- input[type].input-medium, .select-medium { width: 150px; }
- input[type].input-large, .select-large { width: 250px; }
- input:checked { opacity: 1; }
- input::placeholder {
-     color: #ffffff9e;
- }
- .select-xxlarge {
-     width: 400px;
- }
- 
- /* Tous les boutons */
- [class^="btn-"], [class*=" btn-"] {
-     padding: 7px 5px 7px 5px;
-     border: none;
-     border-radius: 16px;
-     color: white;
-     text-align: center;
-     text-decoration: none;
-     display: inline-block;
-     font-size: 14px;
-     cursor: pointer;
- }
- 
- /* Tous les boutons bleus */
- .btn-large-blue, .btn-medium-blue, .btn-small-blue, .btn-xsmall-blue, .btn-xxsmall-blue, .btn-fit-blue, .round-btn-blue {
-     background-color: #5473e8;
- }
- /* Tous les boutons verts */
- .btn-large-green, .btn-medium-green, .btn-small-green, .btn-xsmall-green, .btn-xxsmall-green, .btn-fit-green, .round-btn-green {
-     background-color: #15bf7f;
- }
- /* Tous les boutons rouges */
- .btn-large-red, .btn-medium-red, .btn-small-red, .btn-xsmall-red, .btn-xxsmall-red, .btn-fit-red, .round-btn-red {
-     background-color: #ff0044;
- }
- /* Tous les boutons jaunes */
- .btn-large-yellow, .btn-medium-yellow, .btn-small-yellow, .btn-xsmall-yellow, .btn-xxsmall-yellow, .btn-fit-yellow, .round-btn-yellow {
-     background-color: #ffb536;
- }
- /* Boutons taille large */
- .button-large, .btn-large-blue, .btn-large-green, .btn-large-red {
-     width: 100%;
- }
- /* Boutons taille moyenne */
- .button-medium, .btn-medium-blue, .btn-medium-green, .btn-medium-red {
-     width: 150px;
- }
- /* Boutons petite taille */
- .button-small, .btn-small-blue, .btn-small-green, .btn-small-red {
-     width: 100px;
- }
- /* Boutons très petite taille */
- .button-xsmall, .btn-xsmall-blue, .btn-xsmall-green, .btn-xsmall-red {
-     width: 50px;
- }
- /* Boutons carré */
- .button-xxsmall, .btn-xxsmall-blue, .btn-xxsmall-green, .btn-xxsmall-red {
-     margin: 2px;
-     width: 30px;
- }
- 
- /* Tous les boutons bleus :hover */
- .btn-large-blue:hover, .btn-medium-blue:hover, .btn-small-blue:hover, .btn-xsmall-blue:hover, .btn-xxsmall-blue:hover, .btn-fit-blue:hover, .round-btn-blue:hover {
-     transition-duration: 0.4s;
-     background-color: #4e69cd;
- }
- /* Tous les boutons verts :hover */
- .btn-large-green:hover, .btn-medium-green:hover, .btn-small-green:hover, .btn-xsmall-green:hover, .btn-xxsmall-green:hover, .btn-fit-green:hover, .round-btn-green:hover {
-     transition-duration: 0.4s;
-     background-color: #12a16a;
- }
- /* Tous les boutons rouges :hover */
- .btn-large-red:hover, .btn-medium-red:hover, .btn-small-red:hover, .btn-xsmall-red:hover, .btn-xxsmall-red:hover, .btn-fit-red:hover, .round-btn-red:hover {
-     transition-duration: 0.4s;
-     background-color: #dc0044;
- }
- 
- /**
-  *  Round btns
-  */
- [class^="round-btn"] {
-     display: flex;
-     align-items: center;
-     justify-content: center;
-     overflow: hidden;
-     text-decoration: none;
-     width: 28px;
-     height: 28px;
-     -webkit-transition: max-width 0.7s;
-     transition: max-width 0.7s;
-     margin: 0 3px 0 3px;
-     color: white;
-     border-radius: 60px;
-     cursor: pointer;
- }
- 
- [class^="round-btn"] img {
-     width: 16px;
- }
- 
- /**
-  *  Slide btns
-  */
- [class^="slide-btn"] {
-     display: inline-flex;
-     align-items: center;
-     overflow: hidden;
-     text-decoration: none;
-     width: auto;
-     max-width: 28px;
-     height: 28px;
-     -webkit-transition: max-width 0.7s;
-     transition: max-width 0.7s;
-     margin: 0 3px 0 3px;
-     color: white;
-     background-color: #15bf7f;
-     border-radius: 60px;
-     cursor: pointer;
- }
- [class^="slide-btn"] img {
-     width: 16px;
-     padding-left: 6px;
-     display: flex;
-     align-items: center;
- }
- [class^="slide-btn"] span {
-     white-space: nowrap;
-     padding-right: 12px;
-     padding-left: 8px;
- }
- .slide-btn-red {
-     background-color: #ff0044;
- }
- .slide-btn-red:hover {
-     background-color: #dc0044;
- }
- .slide-btn-yellow {
-     background-color: #eb984e;
- }
- .slide-btn-yellow:hover {
-     background-color: #eb984e;
- }
- 
- textarea {
-     width: 100%;
-     text-indent: 0px;
-     padding-top: 5px;
-     padding-left: 5px;
-     font-size: 14px;
-     color: white;
-     background-color:#25394b;
-     border-radius: 16px;
-     border: none;
- }
- 
- .textarea-100 {
-     min-height: 100px;
- }
- 
- .round-item {
-     display: inline-block;
-     width: 8px;
-     height: 8px;
-     border-radius: 60px;
- }
- 
- .label-black, .label-white, .label-green, .label-blue, .label-red, .label-yellow {
-     font-size: 13px;
-     vertical-align: middle;
-     display: inline-block;
-     padding: 6px 8px 6px 8px;
-     border-radius: 16px;
-     color: white;
-     box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
- }
- 
- .label-black {
-     background-color: rgb(46, 54, 58);
-     box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
- }
- .label-white {
-     background-color: white;
-     color: #000000d9;
- }
- .label-green {
-     background-color: #15bf7f;
- }
- .label-blue {
-     background-color: #5473e8;
- }
- .label-red {
-     background-color: #ff0044;
- }
- .label-yellow {
-     background-color: #ffb536;
- }
- 
- /**
-  *  On/off slider switch
-  */
- 
- /* The onoff-switch-label - the box around the slider */
- .onoff-switch-label {
-     position: relative;
-     display: inline-block;
-     width: 35px;
-     height: 20px;
-     margin-top: 5px;
-     margin-bottom: 5px;
- }
- /* Hide default HTML checkbox */
- .onoff-switch-input {
-     opacity: 0;
-     width: 0;
-     height: 0;
- }
- /* The slider */
- .onoff-switch-slider {
-     position: absolute;
-     cursor: pointer;
-     top: 0;
-     left: 0;
-     right: 0;
-     bottom: 0;
-     background-color: #ccc;
-     -webkit-transition: .4s;
-     transition: .4s;
-     border-radius: 34px;
- }
- .onoff-switch-slider:before {
-     position: absolute;
-     content: "";
-     height: 16px;
-     width: 16px;
-     left: 2px;
-     bottom: 2px;
-     background-color: white;
-     -webkit-transition: .4s;
-     transition: .4s;
-     border-radius: 50%;
- }
- .onoff-switch-input:checked + .onoff-switch-slider {
-     background-color: #5473e8;
- }
- .onoff-switch-input:focus + .onoff-switch-slider {
-     box-shadow: 0 0 1px #5473e8;
- }
- .onoff-switch-input:checked + .onoff-switch-slider:before {
-     -webkit-transform: translateX(15px);
-     -ms-transform: translateX(15px);
-     transform: translateX(15px);
- }
- 
- /* boutons switch-field */
- .switch-field {
-     display: flex;
-     overflow: hidden;
-     margin-top: 2px;
-     margin-bottom: 2px;
- }
- 
- .switch-field input {
-     position: absolute;
-     clip: rect(0, 0, 0, 0);
-     width: 1px;
-     margin-left: 0;
-     margin-right: 0;
-     border: 0;
-     overflow: hidden;
- }
- 
- .switch-field label {
-     background-color: white;
-     color: #3b3b3b;
-     line-height: 1;
-     text-align: center;
-     padding: 6px 8px;
-     margin-right: -1px;
-     border: 1px solid rgba(0, 0, 0, 0.2);
-     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-     transition: all 0.1s ease-in-out;
- }
- 
- .switch-field label:hover {
-     cursor: pointer;
- }
- 
- .switch-field input:checked + label {
-     background-color: #5473e8;
-     box-shadow: none;
-     color: white;
- }
- 
- .switch-field label:first-of-type {
-     border-radius: 16px 0 0 16px;
- }
- 
- .switch-field label:last-of-type {
-     border-radius: 0 16px 16px 0;
- }
- 
- /**
-  *  Slider div
-  */
- .slide-panel-container {
-     width: 100vw;
-     height: 100%;
-     background-color: #3b3b3b2b;
-     position: fixed;
-     top: 0;
-     right: 0;
-     z-index: 99;
-     visibility: hidden;
- }
- 
- .slide-panel {
-     box-sizing: border-box;
-     position: absolute;
-     right: -1000px;
-     height: 100%;
-     width: 100%;
-     padding: 20px;
-     background-color: #182b3e;
-     border-left: 1px solid rgb(60, 70, 75);
-     box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
-     overflow: auto;
- }
- 
- .slide-panel h5 {
-     margin-top: 40px;
-     margin-bottom: 20px;
- }
- 
- .slide-panel-close-btn {
-     width: 18px;
-     cursor: pointer;
- }
- 
- /**
-  *  Alert div
-  */
- .action, .alert, .alert-success, .alert-error, .confirmAlert {
-     width: 100%;
-     display: grid;
-     grid-template-columns: repeat(1, auto);
-     justify-content: space-around;
-     align-items: center;
-     align-content: center;
-     min-height: 60px;
-     padding-top: 15px;
-     padding-bottom: 15px;
-     font-size: 16px;
-     position: fixed;
-     bottom: 0;
-     left: 0;
-     z-index:99;
-     background-color: #182b3e;
-     border-top: 1px solid rgb(60, 70, 75);
-     box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
-     color: white;
-     text-align: center;
- }
- .confirmAlert {
-     grid-template-columns: repeat(3, 33%);
- }
- .alert-success { background-color: #14be7e; }
- .alert-error { background-color: #ff0044; }
- .alert span, .alert-success span, .alert-error span, .confirmAlert span,
- .alert a, .alert-success a, .alert-error a, .confirmAlert a {
-     font-size: 16px;
- }
- .confirmAlert-buttons-container {
-     display: flex;
-     justify-content: flex-end;
-     width: 100%;
- }
- 
- [class*="btn-doConfirm"], .btn-doGeneric, .btn-doCancel {
-     margin-left: 15px;
-     margin-right: 15px;
-     padding: 20px;
-     border-radius: 8px;
-     box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
- }
- [class*="btn-doConfirm"] {
-     background-color: #ff0044;
- }
- [class*="btn-doConfirm"]:hover {
-     background-color: #dc0044;
- }
- .btn-doGeneric:hover {
-     background-color: #1d3349;
- }
- 
- /**
-  *  Loading div
-  */
- #loading {
-     position: fixed;
-     bottom: 15px;
-     right: 15px;
-     display: flex;
-     align-items: center;
-     column-gap: 8px ;
-     z-index: 999;
- }
- 
- #loading img {
-     height: 18px;
- }
- 
- /**
-  *  Generic div
-  */
- .div-generic-blue {
-     position: relative;
-     padding: 15px;
-     margin-bottom: 20px;
-     border-radius: 8px;
-     background-color: #182b3e;
-     -webkit-box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
-     box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
- }
- 
- .div-generic-blue h3 {
-     border: none;
-     margin-top: 0;
- }
- 
- /* Desktop configuration */
- @media (min-width:1025px) {
-     /**
-      *  Slide btns
-      */
-     [class^="slide-btn"]:hover {
-         max-width: 300px;
-     }
- 
-     .slide-panel {
-         width: 30%;
-     }
- }
\ No newline at end of file
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+/**
+*  Color picker
+*  https://www.w3schools.com/colors/colors_picker.asp?colorhex=182b3e
+*/
+
+/**
+*  Text
+*/
+a {
+    text-decoration: none;
+    /* using text-shadow to generate bold on link */
+    text-shadow: -.25px -.25px 0 transparent,
+                .25px .25px transparent;
+}
+
+a:hover {
+    /* using text-shadow to generate bold on link */
+    text-shadow: -.25px -.25px 0 white,
+                .25px .25px white;
+}
+
+p, label, a, i, span {
+    font-size: 14px;
+    color: white;
+}
+
+span {
+    /* line-height: inherit !important; */
+    line-height: initial !important;
+}
+
+b, strong {
+    font-weight: bolder;
+}
+
+p, h1, h2, h3, h4, h5 {
+    line-height: 1.5em;
+}
+
+h1, h2, h3, h4 {
+    color: white;
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
+
+h3 {
+    width: max-content;
+    font-size: 18px;
+    margin: 50px 0 40px 0;
+    border-bottom: 1px solid #15bf7f;
+}
+
+h4 {
+    font-size: 16px;
+    margin-bottom: 15px;
+}
+
+h5 {
+    font-size: 14px;
+    font-weight: bold;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+hr {
+    border-color: gray;
+    opacity: 0.11;
+}
+
+pre {
+    font-family: monospace, monospace;
+    font-size: 12px;
+}
+
+
+/**
+*  Generic class
+*/
+.inline { display: inline; }
+.block { display: block; }
+.inline-block { display: inline-block; }
+.float-left { float: left; }
+.float-right { float: right; }
+.align-top { vertical-align: top; }
+.margin-auto { margin: auto; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.relative { position: relative; }
+.pointer { cursor: pointer; }
+.bold { font-weight: bold; }
+.greentext { color: #14be7e; }
+.redtext { color: #ff0044; }
+.yellowtext { color: #ffb536; }
+.graytext { color : gray; }
+.bkg-green { background-color: #14be7e !important; color: white !important; }
+.bkg-yellow { background-color: #ffb536 !important; color: white !important; }
+.bkg-red { background-color: #ff0044 !important; color: white !important; }
+.no-bkg {background: none !important}
+.center { text-align: center; }
+.baseline { vertical-align: baseline; }
+.font-size-11{font-size: 11px !important}.font-size-12{font-size: 12px !important}.font-size-13{font-size: 13px !important}.font-size-14{font-size: 14px !important}
+.lowopacity, .lowopacity-cst { opacity: 0.33; } /* lowopacity-cst is used for constant lowopacity even on hover */
+.mediumopacity { opacity: 0.55 }
+.verylowopacity { opacity: 0.08; }
+.lowopacity:hover, .mediumopacity:hover, .verylowopacity:hover { opacity: 1 }
+.opacity-80 { opacity: 0.80; }
+.wordbreakall { word-break: break-all; }
+
+.div-28 { width: 28%; padding: 10px; }.div-29 { width: 29%; padding: 10px; }.div-30 { width: 30%; padding: 10px; }
+.div-33 { width: 33%; padding: 10px; }.div-45 { width: 45%; padding: 10px; }.div-48 { width: 48%; padding: 10px; }
+.div-49 { width: 49%; padding: 10px; }.div-50 { width: 50%; padding: 10px; }.div-65 { width: 65%; padding: 10px; }
+.div-67 { width: 67%; padding: 10px; }.div-68 { width: 68%; padding: 10px; }.div-69 { width: 69%; padding: 10px; }
+.div-70 { width: 70%; padding: 10px; }
+.flex { display: flex; }
+.flex-div-15 { flex: 0 0 14%; }.flex-div-20 { flex: 0 0 19%; }.flex-div-25 { flex: 0 0 24%; }.flex-div-30 { flex: 0 0 29%; }
+.flex-div-33 { flex: 0 0 32%; }.flex-div-40 { flex: 0 0 39%; }.flex-div-50 { flex: 0 0 47%; }.flex-div-60 { flex: 0 0 59%; }
+.flex-div-65 { flex: 0 0 64%; }.flex-div-68 { flex: 0 0 67%; }.flex-div-80 { flex: 0 0 79%; }.flex-div-100 { flex: 0 0 98%; }
+.flex-grow { flex-grow: 1; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-direction-column {flex-direction: column}
+.grid {display: grid}
+.grid-2 {grid-template-columns: auto auto}
+.justify-center {justify-content: center}
+.justify-space-between {justify-content: space-between}
+.justify-end {justify-content: flex-end}
+.align-content-center {align-content: center}
+.align-content-right {align-content: flex-end}
+.align-item-center {align-items: center}
+.align-item-right {align-items: flex-end}
+.align-self-center {align-self: center}
+.column-gap-1{column-gap: 1px}.column-gap-2 {column-gap: 2px}.column-gap-4 {column-gap: 4px}.column-gap-5{column-gap: 5px}.column-gap-6{column-gap: 6px}.column-gap-7{column-gap: 7px}.column-gap-8{column-gap: 8px}.column-gap-9{column-gap: 9px}.column-gap-10{column-gap: 10px}
+.column-gap-20{column-gap: 20px}
+.row-gap-1 {row-gap: 1px;}.row-gap-2 {row-gap: 2px;}.row-gap-4 {row-gap: 4px;}.row-gap-5 {row-gap: 5px;}.row-gap-6 {row-gap: 6px;}.row-gap-7 {row-gap: 7px;}
+.padding-left-15 {padding-left: 15px !important}
+.padding-right-15 {padding-right: 15px !important}
+.margin-bottom-0 {margin-bottom: 0px !important}
+
+/**
+*   Tables
+*/
+table {
+    width: 100%;
+    font-size: 14px;
+    table-layout: auto !important;
+}
+.table-large  { width: 100%; }
+.table-medium { width: 65%; }
+.table-small  { width: 25% }
+th {
+    text-align: left;
+    font-weight: 600;
+    vertical-align: middle;
+}
+td {
+    height: 36px;
+    vertical-align: middle;
+    color: white;
+}
+.td-fit {
+    width: 1% !important;
+    white-space: nowrap !important;
+    padding-left: 2px;
+    padding-right: 2px;
+}
+.td-small { width: 200px; }
+.td-medium { width: 300px; }
+.td-large { width: 500px; }
+.td-10, .td-30, .td-50, .td-100 {
+    width: 0px;
+    margin: 0px;
+    white-space: nowrap;
+}
+.td-10 { padding-right: 10px !important; }
+.td-30 { padding-right: 30px !important; }
+.td-50 { padding-right: 50px !important; }
+.td-100 { padding-right: 100px !important; }
+
+/**
+*  Generic tables
+*/
+
+/* Concerne toutes les classes commencant par table-generic- */
+[class^="table-generic"] {
+    border-collapse: separate !important;
+    border-spacing: 0 4px;
+    table-layout: auto !important;
+    /* white-space: nowrap; */
+    word-break: break-word;
+}
+[class^="table-generic"] tr td {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+[class^="table-generic"] tr td:first-child {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+[class^="table-generic"] tr td:last-child {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
+[class^="table-generic"] thead tr {
+    background: none !important;
+    font-weight: bold;
+}
+.table-generic-blue tr { background-color: #1d3349; }
+.table-generic-red tr  { background-color: #ff0044; }
+
+/**
+*  Icons
+*/
+.icon, .icon-small, .icon-lowopacity, .icon-verylowopacity, .icon-mediumopacity, .icon-nf, .icon-np {
+    /* height: 13px; */
+    height: 15px;
+    margin-left: 5px;
+    margin-right: 5px;
+    vertical-align: middle;
+    cursor: pointer;
+}
+.icon-small {
+    height: 8px;
+}
+.icon-lowopacity {
+    opacity: 0.33;
+}
+.icon-mediumopacity {
+    opacity: 0.55;
+}
+.icon-verylowopacity {
+    opacity: 0.08;
+}
+.icon-lowopacity:hover, .icon-verylowopacity:hover, .icon-mediumopacity:hover {
+    opacity: 1;
+}
+/* icon with no pointer */
+.icon-np {
+    cursor: default;
+}
+.icon-copy {
+    height: 13px;
+}
+
+/**
+*  Forms, button, input, textarea
+*/
+input[type=text], input[type=date], input[type=time], input[type=number], input[type=email], input[type=password], input[type=color], input[type=file], select {
+    width: 100%;
+    height: 35px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+    padding-left: 10px;
+    border: none;
+    border-radius: 20px;
+    box-sizing: border-box;
+    font-size: 14px;
+    color: white;
+    background-color:#25394b;
+}
+input[type=file] {
+    background: none !important;
+}
+input[type=color].color-xsmall { width: 50px; vertical-align: middle; }
+input[type].input-small, .select-small { width: 100px; }
+input[type].input-medium, .select-medium { width: 150px; }
+input[type].input-large, .select-large { width: 250px; }
+input:checked { opacity: 1; }
+input::placeholder {
+    color: #ffffff9e;
+}
+.select-xxlarge {
+    width: 400px;
+}
+
+/* Tous les boutons */
+[class^="btn-"], [class*=" btn-"] {
+    padding: 7px 5px 7px 5px;
+    border: none;
+    border-radius: 16px;
+    color: white;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+/* Tous les boutons bleus */
+.btn-large-blue, .btn-medium-blue, .btn-small-blue, .btn-xsmall-blue, .btn-xxsmall-blue, .btn-fit-blue, .round-btn-blue {
+    background-color: #5473e8;
+}
+/* Tous les boutons verts */
+.btn-large-green, .btn-medium-green, .btn-small-green, .btn-xsmall-green, .btn-xxsmall-green, .btn-fit-green, .round-btn-green {
+    background-color: #15bf7f;
+}
+/* Tous les boutons rouges */
+.btn-large-red, .btn-medium-red, .btn-small-red, .btn-xsmall-red, .btn-xxsmall-red, .btn-fit-red, .round-btn-red {
+    background-color: #ff0044;
+}
+/* Tous les boutons jaunes */
+.btn-large-yellow, .btn-medium-yellow, .btn-small-yellow, .btn-xsmall-yellow, .btn-xxsmall-yellow, .btn-fit-yellow, .round-btn-yellow {
+    background-color: #ffb536;
+}
+/* Boutons taille large */
+.button-large, .btn-large-blue, .btn-large-green, .btn-large-red {
+    width: 100%;
+}
+/* Boutons taille moyenne */
+.button-medium, .btn-medium-blue, .btn-medium-green, .btn-medium-red {
+    width: 150px;
+}
+/* Boutons petite taille */
+.button-small, .btn-small-blue, .btn-small-green, .btn-small-red {
+    width: 100px;
+}
+/* Boutons très petite taille */
+.button-xsmall, .btn-xsmall-blue, .btn-xsmall-green, .btn-xsmall-red {
+    width: 50px;
+}
+/* Boutons carré */
+.button-xxsmall, .btn-xxsmall-blue, .btn-xxsmall-green, .btn-xxsmall-red {
+    margin: 2px;
+    width: 30px;
+}
+
+/* Tous les boutons bleus :hover */
+.btn-large-blue:hover, .btn-medium-blue:hover, .btn-small-blue:hover, .btn-xsmall-blue:hover, .btn-xxsmall-blue:hover, .btn-fit-blue:hover, .round-btn-blue:hover {
+    transition-duration: 0.4s;
+    background-color: #4e69cd;
+}
+/* Tous les boutons verts :hover */
+.btn-large-green:hover, .btn-medium-green:hover, .btn-small-green:hover, .btn-xsmall-green:hover, .btn-xxsmall-green:hover, .btn-fit-green:hover, .round-btn-green:hover {
+    transition-duration: 0.4s;
+    background-color: #12a16a;
+}
+/* Tous les boutons rouges :hover */
+.btn-large-red:hover, .btn-medium-red:hover, .btn-small-red:hover, .btn-xsmall-red:hover, .btn-xxsmall-red:hover, .btn-fit-red:hover, .round-btn-red:hover {
+    transition-duration: 0.4s;
+    background-color: #dc0044;
+}
+
+/**
+*  Round btns
+*/
+[class^="round-btn"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    text-decoration: none;
+    width: 28px;
+    height: 28px;
+    -webkit-transition: max-width 0.7s;
+    transition: max-width 0.7s;
+    margin: 0 3px 0 3px;
+    color: white;
+    border-radius: 60px;
+    cursor: pointer;
+}
+
+[class^="round-btn"] img {
+    width: 16px;
+}
+
+/**
+*  Slide btns
+*/
+[class^="slide-btn"] {
+    display: inline-flex;
+    align-items: center;
+    overflow: hidden;
+    text-decoration: none;
+    width: auto;
+    max-width: 28px;
+    height: 28px;
+    -webkit-transition: max-width 0.7s;
+    transition: max-width 0.7s;
+    margin: 0 3px 0 3px;
+    color: white;
+    background-color: #15bf7f;
+    border-radius: 60px;
+    cursor: pointer;
+}
+[class^="slide-btn"] img {
+    width: 16px;
+    padding-left: 6px;
+    display: flex;
+    align-items: center;
+}
+[class^="slide-btn"] span {
+    white-space: nowrap;
+    padding-right: 12px;
+    padding-left: 8px;
+}
+.slide-btn-red {
+    background-color: #ff0044;
+}
+.slide-btn-red:hover {
+    background-color: #dc0044;
+}
+.slide-btn-yellow {
+    background-color: #eb984e;
+}
+.slide-btn-yellow:hover {
+    background-color: #eb984e;
+}
+
+textarea {
+    width: 100%;
+    text-indent: 0px;
+    padding-top: 5px;
+    padding-left: 5px;
+    font-size: 14px;
+    color: white;
+    background-color:#25394b;
+    border-radius: 16px;
+    border: none;
+}
+
+.textarea-100 {
+    min-height: 100px;
+}
+
+.round-item {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 60px;
+}
+
+.label-black, .label-white, .label-green, .label-blue, .label-red, .label-yellow {
+    font-size: 13px;
+    vertical-align: middle;
+    display: inline-block;
+    padding: 6px 8px 6px 8px;
+    border-radius: 16px;
+    color: white;
+    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+}
+
+.label-black {
+    background-color: rgb(46, 54, 58);
+    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+}
+.label-white {
+    background-color: white;
+    color: #000000d9;
+}
+.label-green {
+    background-color: #15bf7f;
+}
+.label-blue {
+    background-color: #5473e8;
+}
+.label-red {
+    background-color: #ff0044;
+}
+.label-yellow {
+    background-color: #ffb536;
+}
+
+/**
+*  On/off slider switch
+*/
+
+/* The onoff-switch-label - the box around the slider */
+.onoff-switch-label {
+    position: relative;
+    display: inline-block;
+    width: 35px;
+    height: 20px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+/* Hide default HTML checkbox */
+.onoff-switch-input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+/* The slider */
+.onoff-switch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 34px;
+}
+.onoff-switch-slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+}
+.onoff-switch-input:checked + .onoff-switch-slider {
+    background-color: #5473e8;
+}
+.onoff-switch-input:focus + .onoff-switch-slider {
+    box-shadow: 0 0 1px #5473e8;
+}
+.onoff-switch-input:checked + .onoff-switch-slider:before {
+    -webkit-transform: translateX(15px);
+    -ms-transform: translateX(15px);
+    transform: translateX(15px);
+}
+
+/* boutons switch-field */
+.switch-field {
+    display: flex;
+    overflow: hidden;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+.switch-field input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    width: 1px;
+    margin-left: 0;
+    margin-right: 0;
+    border: 0;
+    overflow: hidden;
+}
+
+.switch-field label {
+    background-color: white;
+    color: #3b3b3b;
+    line-height: 1;
+    text-align: center;
+    padding: 6px 8px;
+    margin-right: -1px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
+    transition: all 0.1s ease-in-out;
+}
+
+.switch-field label:hover {
+    cursor: pointer;
+}
+
+.switch-field input:checked + label {
+    background-color: #5473e8;
+    box-shadow: none;
+    color: white;
+}
+
+.switch-field label:first-of-type {
+    border-radius: 16px 0 0 16px;
+}
+
+.switch-field label:last-of-type {
+    border-radius: 0 16px 16px 0;
+}
+
+/**
+*  Slider div
+*/
+.slide-panel-container {
+    width: 100vw;
+    height: 100%;
+    background-color: #3b3b3b2b;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 99;
+    visibility: hidden;
+}
+
+.slide-panel {
+    box-sizing: border-box;
+    position: absolute;
+    right: -1000px;
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    background-color: #182b3e;
+    border-left: 1px solid rgb(60, 70, 75);
+    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
+    overflow: auto;
+}
+
+.slide-panel h5 {
+    margin-top: 40px;
+    margin-bottom: 20px;
+}
+
+.slide-panel-close-btn {
+    width: 18px;
+    cursor: pointer;
+}
+
+/**
+*  Alert div
+*/
+.action, .alert, .alert-success, .alert-error, .confirmAlert {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(1, auto);
+    justify-content: space-around;
+    align-items: center;
+    align-content: center;
+    min-height: 60px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    font-size: 16px;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index:99;
+    background-color: #182b3e;
+    border-top: 1px solid rgb(60, 70, 75);
+    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
+    color: white;
+    text-align: center;
+}
+.confirmAlert {
+    grid-template-columns: repeat(3, 33%);
+}
+.alert-success { background-color: #14be7e; }
+.alert-error { background-color: #ff0044; }
+.alert span, .alert-success span, .alert-error span, .confirmAlert span,
+.alert a, .alert-success a, .alert-error a, .confirmAlert a {
+    font-size: 16px;
+}
+.confirmAlert-buttons-container {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+}
+
+[class*="btn-doConfirm"], .btn-doGeneric, .btn-doCancel {
+    margin-left: 15px;
+    margin-right: 15px;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: rgb(12 18 20 / 67%) 0px 0px 0px 1px;
+}
+[class*="btn-doConfirm"] {
+    background-color: #ff0044;
+}
+[class*="btn-doConfirm"]:hover {
+    background-color: #dc0044;
+}
+.btn-doGeneric:hover {
+    background-color: #1d3349;
+}
+
+/**
+*  Loading div
+*/
+#loading {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    display: flex;
+    align-items: center;
+    column-gap: 8px ;
+    z-index: 999;
+}
+
+#loading img {
+    height: 18px;
+}
+
+/**
+*  Generic div
+*/
+.div-generic-blue {
+    position: relative;
+    padding: 15px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    background-color: #182b3e;
+    -webkit-box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
+    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
+}
+
+.div-generic-blue h3 {
+    border: none;
+    margin-top: 0;
+}
+
+/* Desktop configuration */
+@media (min-width:1025px) {
+    /**
+    *  Slide btns
+    */
+    [class^="slide-btn"]:hover {
+        max-width: 300px;
+    }
+
+    .slide-panel {
+        width: 30%;
+    }
+}
\ No newline at end of file