@charset "UTF-8";
/************************************************************************* COMMON ***********************************************************************************************/
html,
body {
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
  background: var(--color--background--principal) !important;
  margin: 0 !important; }

* {
  color: var(--color--text);
  box-sizing: border-box;
  font-size: 13px;
  font-family: "Open Sans", sans-serif, Arial; }

.highcharts-credits {
  display: none !important; }

.fa,
.fas {
  font-weight: 600 !important; }

code {
  font-family: "Roboto Mono", monospace !important; }

.user-no-select {
  user-select: none !important; }

.cursor-pointer {
  cursor: pointer; }

a {
  text-decoration: none; }

span.marker {
  background-color: #ffff00; }

.cl.divider {
  height: 1px;
  width: 100%;
  background-color: #22242626;
  margin: 6px 0; }

.php_functions_print_readable_array {
  overflow: auto;
  white-space: nowrap; }

/************************************************************************* BLOCK ***********************************************************************************************/
.block_right {
  overflow-y: auto;
  height: calc(100vh - var(--dimen--height--block--top));
  margin: var(--dimen--height--block--top) 0 0 var(--dimen--margin--left--block--right);
  width: auto;
  padding: 25px;
  background-color: var(--color--background--principal);
  transition: margin-left var(--animation--duration--function--reduce--block--left), margin-right var(--animation--duration--function--reduce--block--left); }

/************************************************************************* DOT ***********************************************************************************************/
/************************************************************************* LABEL ***********************************************************************************************/
.group_label {
  color: #ffffff;
  padding: 5px;
  font-size: 12px !important;
  font-weight: 100;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 3px;
  text-decoration: none;
  width: fit-content; }

.status_label {
  color: #ffffff;
  padding: 5px;
  font-size: 12px !important;
  font-weight: 100;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 3px;
  text-decoration: none;
  width: fit-content; }

.simple_label {
  color: #ffffff;
  padding: 5px;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 3px;
  text-decoration: none;
  width: fit-content; }

/************************************************************************* SCROLLBAR ***********************************************************************************************/
/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 6px; }

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888888;
  cursor: pointer;
  border-radius: 8px; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555555; }

/************************************************************************* USER *******************************************************************/
.user_image_circle {
  width: 30px;
  height: 30px;
  border-radius: 30px; }

.user_image_circle.little {
  width: 25px;
  height: 25px; }

/************************************************************************* DATATABLES ***********************************************************************************************/
.DT_td_fit {
  width: 1px;
  text-align: -webkit-center; }

th.DT_td_fit {
  white-space: nowrap; }

.DT_td_fit > *:first-child {
  margin-left: 0 !important; }

.DT_td_fit > *:last-child {
  margin-right: 0 !important; }

.DT_td_fit > .buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center; }

.DT_td_fit > .buttons > :not(:first-child) {
  margin-left: 6px; }

.DT_td_fit > .buttons > :first-child {
  margin-left: 0; }

.dataTable th::after {
  bottom: 14px !important; }

.dataTables_wrapper {
  overflow-x: auto !important;
  width: 100% !important; }

.dataTables_wrapper > .row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important; }

.dataTables_wrapper > .row > .col-sm-6 {
  width: 50% !important;
  padding: 0 !important; }

.dataTables_wrapper > .row > .col-sm-5,
.dataTables_wrapper > .row > .col-sm-7 {
  padding: 0 !important; }

.dataTables_wrapper > .row > .col-sm-12 {
  min-width: 100% !important;
  padding: 0 !important; }

.dataTables_wrapper > .row > .col-sm-12 > table.dataTable {
  min-width: 100% !important;
  border-collapse: collapse !important; }

/************************************************************************* TABLE ***********************************************************************************************/
table {
  border-spacing: 0;
  border-collapse: collapse !important;
  width: 100%; }

table tr > td.td_button {
  background: var(--color--principal);
  text-align: center !important;
  font-weight: 400 !important;
  color: var(--color--principal--text);
  cursor: pointer;
  transition: 0.1s; }

table tr > td.td_button:hover {
  background: var(--color--principal--hover); }

table tr > td.td_button.td_button_icon > i {
  color: var(--color--principal--text);
  margin-right: 4px;
  font-size: 16px; }

td.fit_content {
  width: 1px;
  text-align: -webkit-center; }

td input:not([type="submit"]) {
  margin-bottom: 0; }

th.fit_content {
  width: 1px;
  white-space: nowrap;
  text-align: -webkit-center; }

tr.notActive {
  opacity: 0.2; }

table tr {
  background-color: #ffffff; }

table td,
table th {
  padding: 0px 5px;
  height: 44px; }

table th.sorted {
  padding-right: 30px;
  position: relative; }

table th > .icons {
  position: absolute;
  top: calc(50% - calc(38px / 2));
  right: calc(calc(30px - 16px) / 2); }

table th > .icons > .icon {
  cursor: pointer; }

table th > .icons > .icon > i {
  font-size: 16px;
  color: #888888; }

table th > .icons > .icon:hover > i {
  font-weight: 600 !important; }

table th > .icons > .icon.active > i {
  font-weight: 600 !important;
  color: #000000; }

table > tbody > tr {
  border-top: 1px solid #0000001f; }

/********************************************************************** PAGE TITLE ****************************************************************************************/
.page_title {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px; }

.page_title > .top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; }

.page_title > .top > .left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap; }

.page_title > .top > .left > .text {
  font: 25px "Open Sans", sans-serif, Arial;
  font-weight: 700; }

.page_title > .top > .left > .text.uppercase {
  text-transform: uppercase; }

.page_title > .top > .left > .text.ucfirst::first-letter {
  text-transform: uppercase; }

.page_title > .top > .left > .added_element {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap; }

.page_title > .top > .left > .added_element > * {
  margin-left: 4px; }

.page_title > .top > .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap; }

.page_title > .bottom {
  font-size: 10px;
  line-height: 10px;
  text-transform: initial;
  font-weight: 400;
  margin-top: 2px; }

/********************************************************************** SWITCH ********************************************************************************************/
.cl.switch {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 24px;
  margin: 0; }

.cl.switch.labeled-left::before {
  content: attr(data-label-left);
  position: absolute;
  right: calc(100% + 8px);
  white-space: nowrap; }

.cl.switch.labeled-right.label-right-color-white::before,
.cl.switch.labeled-left.label-left-color-white::before {
  color: #ffffff; }

.cl.switch.labeled-right::before {
  content: attr(data-label-right);
  position: absolute;
  left: calc(100% + 8px);
  white-space: nowrap; }

.cl.switch > input {
  opacity: 0;
  width: 0;
  height: 0; }

.cl.switch > .slider {
  position: absolute;
  cursor: pointer;
  width: 50px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cccccc;
  -webkit-transition: 0.3s;
  transition: 0.3s; }

.cl.switch > .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: 0.3s;
  transition: 0.3s; }

.cl.switch > input:checked + .slider {
  background-color: #0066ff; }

.cl.switch > input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px); }

/* Rounded sliders */
.cl.switch > .slider.round {
  border-radius: 24px;
  height: 24px; }

.cl.switch > .slider.round:before {
  border-radius: 50%; }

/********************************************************************* PRESENTATION EN 3 **********************************************************************************/
.pre3 {
  width: 100%;
  border-radius: 4px 4px 0 0; }

.pre3 > .top {
  background-color: #001438;
  min-height: 137.5px;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 21.875px 25px 109.397px 25px;
  color: #ffffff;
  border-radius: 4px 4px 0 0; }

.pre3 > .top > .data {
  width: 100%;
  display: flex; }

.pre3 > .top > .title * {
  color: white; }

.pre3 > .top > .title H1 {
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0; }

.pre3 > .top > .data > .left {
  max-height: 300px;
  width: 65%; }

.pre3 > .top > .data > .right {
  width: 35%; }

.pre3 > .top > .data > .left.noRight {
  width: 100%; }

.pre3 > .center {
  background-color: #ffffff;
  height: 175px;
  transform: translateY(-50%);
  width: 90%;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  padding: 25px 0; }

.pre3 > .thin.center {
  height: 175px; }

.pre3 > .center > .block {
  padding: 0 25px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.12); }

.pre3 > .center > .block:last-child {
  border-right: none; }

.pre3 > .center.three > .block {
  width: calc(100% / 3); }

.pre3 > .center.two > .block {
  width: calc(100% / 2); }

.pre3 > .center > .block > .data {
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.125em;
  color: gray;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

.pre3 > .center > .block > .subtitle {
  font-size: 15px;
  font-weight: bold;
  color: #888888;
  width: 100%;
  text-align: end; }

.pre3 > .bottom {
  background-color: var(--color--background--second);
  min-height: 150px;
  margin-top: -200px;
  padding-top: 125px;
  width: 100%;
  border-radius: 0 0 4px 4px; }

.pre3 > .center > .block > .what > .libelle {
  color: black;
  font-weight: 400;
  margin: 0; }

/************************************************************************* COPY ****************************************************************************************/
.toCopy {
  position: relative;
  cursor: pointer;
  user-select: none; }

.toCopy:hover {
  text-decoration: dotted underline; }

.toCopy.copied::after {
  content: "Copié";
  position: absolute;
  transform: translate(10%, calc(-50% + 10px));
  background-color: var(--color--blue--dark);
  color: #ffffff;
  padding: 0px 6px;
  border-radius: 119px;
  font-size: 10px; }

/************************************************************************ SECTION ****************************************************************************************/
.section {
  padding: 8px;
  margin-bottom: 8px;
  background: var(--color--background--second);
  border: 1px solid #e8ecee;
  border-radius: 4px;
  display: flex;
  flex-direction: column; }

.section.shadow {
  border: 1px solid #566ab533;
  -webkit-box-shadow: 0px 2px 10px 0px #566ab533;
  -moz-box-shadow: 0px 2px 10px 0px #566ab533;
  -khtml-box-shadow: 0px 2px 10px 0px #566ab533;
  -o-box-shadow: 0px 2px 10px 0px #566ab533;
  box-shadow: 0px 2px 10px 0px #566ab533; }

.section.second {
  background: #eeeeee;
  border: 1px solid #e8ecee;
  border-radius: 4px; }

.section.outerTitle {
  position: relative;
  margin-top: 30px; }

.section.outerTitle > h3 {
  position: absolute;
  top: -30px;
  left: 6px;
  margin: 0;
  font: 20px "Open Sans", sans-serif, Arial;
  font-weight: 700;
  text-transform: uppercase; }

.section > :last-child {
  margin-bottom: 0; }

/*************************************************************************** CONTAINER ************************************************************************************/
.container {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  padding: 0 !important;
  width: 100%; }

.container > .title {
  font: 20px "Open Sans", sans-serif, Arial;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px; }

.container > .content {
  padding: 8px;
  background: var(--color--background--second);
  border: 1px solid #e8ecee;
  border-radius: 4px;
  display: flex;
  flex-direction: column; }

.container > .content.shadow {
  border: 1px solid #566ab533;
  -webkit-box-shadow: 0px 2px 10px 0px #566ab533;
  -moz-box-shadow: 0px 2px 10px 0px #566ab533;
  -khtml-box-shadow: 0px 2px 10px 0px #566ab533;
  -o-box-shadow: 0px 2px 10px 0px #566ab533;
  box-shadow: 0px 2px 10px 0px #566ab533; }

.container > :last-child {
  margin-bottom: 0; }

.container:last-of-type {
  margin-bottom: 0; }

/************************************************************************* MTABLE ***********************************************************************************************/
.mtable {
  width: 100%;
  display: flex;
  flex-direction: column; }

.mtable.bordered > .mrow,
.mtable.bordered > .mrow > .mcolumn {
  border: 1px solid #dddddd; }

.mtable > .mrow {
  display: grid;
  width: 100%;
  flex: 1 1 auto;
  justify-content: space-between;
  align-items: flex-start; }

.mtable > .mrow.mrow-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr)); }

.mtable > .mrow.mrow-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mtable > .mrow.mrow-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mtable > .mrow.mrow-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mtable > .mrow.mrow-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)); }

.mtable > .mrow.mrow-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)); }

.mtable > .mrow.mrow-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr)); }

.mtable > .mrow.mrow-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr)); }

.mtable > .mrow.mrow-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr)); }

.mtable > .mrow.mrow-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr)); }

.mtable > .mrow.mrow-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr)); }

.mtable > .mrow.mrow-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr)); }

.mtable > .mrow.header * {
  font-weight: 700; }

.mtable > .mrow > .mcolumn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 4px; }

.mtable > .mrow.header > .mcolumn {
  justify-content: space-between;
  padding: 0 6px 4px; }

.mtable > .mrow > .mcolumn.have-content {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start; }

.mtable > .mrow > .mcolumn.have-content > .content {
  width: 100%;
  margin-top: 4px; }

.mtable > .mrow > .mcolumn.have-content > .content > .ui.dropdown,
.mtable > .mrow > .mcolumn.have-content > .content > select,
.mtable > .mrow > .mcolumn.have-content > .content > input {
  width: 100%; }

@media screen and (max-width: 992px) {
  .mtable > .mrow {
    flex-direction: column; }

  .mtable > .mrow > .mcolumn:not(.have-content) {
    justify-content: space-between; }

  .mtable > .mrow > .mcolumn.have-content > .content {
    justify-content: space-between; } }
/************************************************************************* pagination ***********************************************************************************************/
.pagination {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  margin: 20px 0 !important; }

.pagination > .number {
  height: 30px;
  background-color: #0002;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 4px 12px; }

.pagination > .number.active {
  background-color: var(--color--principal);
  color: #ffffff; }

.pagination > .number.active:hover {
  background-color: var(--color--principal--hover); }

.pagination > .number:hover:not(.active) {
  background-color: #0003; }

.pagination > .number > i {
  font-weight: bold !important; }

.pagination > div:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px; }

.pagination > div:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: none; }

/************************************************************************* IMAGE ***********************************************************************************************/
img.user {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  object-fit: cover;
  object-position: 50% 50%; }

img.user.middleSize {
  width: 35px;
  height: 35px;
  border-radius: 100%;
  object-fit: cover;
  object-position: 50% 50%; }

img.user.little {
  width: 20px;
  height: 20px; }

/************************************************************************* Statistiques ******************************************************************************/
.clickAndCopy {
  cursor: pointer; }
  .clickAndCopy.copied {
    position: relative; }
    .clickAndCopy.copied::after {
      content: 'Copié';
      position: absolute;
      top: 50%;
      right: -8px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000000;
      color: #ffffff;
      border-radius: 4px;
      padding: 4px 6px;
      opacity: 0.8;
      transform: translateY(-50%) translateX(100%);
      white-space: nowrap; }

/************************************************ Statistiques ****************************/
.pill {
  font-size: 14px;
  font-weight: 700;
  height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
  border-radius: 8px;
  background-color: green;
  color: white; }

.big.pill {
  height: 32px;
  font-size: 14px; }

.green.pill {
  background-color: #009900; }

.red.pill {
  background-color: #afafaf; }

.pillwrapper {
  display: flex;
  align-items: center; }

.data_bold {
  font-size: 35px;
  font-weight: bold;
  margin-right: 16px; }

.fas.fa-arrow-down.stat {
  font-weight: 600 !important;
  font-size: 25px;
  color: #afafaf;
  margin-right: 8px; }

.fas.fa-arrow-down.little.stat {
  font-weight: 600 !important;
  font-size: 12px;
  color: #afafaf;
  margin-right: 4px;
  margin-left: 8px; }

.fas.fa-arrow-up.stat {
  font-weight: 600 !important;
  font-size: 25px;
  color: #009900;
  margin-right: 8px; }

.fas.fa-arrow-up.little.stat {
  font-weight: 600 !important;
  font-size: 12px;
  color: #009900;
  margin-right: 4px;
  margin-left: 8px; }

.apexcharts-xaxistooltip {
  display: none; }

.apexcharts-tooltip-custom {
  border: 1px solid #e3e3e3;
  background: #fffffff5; }
  .apexcharts-tooltip-custom > .top {
    background: #eceff1;
    border-bottom: 1px solid #dddddd;
    padding: 6px; }
  .apexcharts-tooltip-custom > .bottom {
    display: flex;
    flex-direction: column;
    padding: 4px 10px; }
    .apexcharts-tooltip-custom > .bottom > .line {
      display: flex;
      flex-direction: row;
      align-items: center; }
      .apexcharts-tooltip-custom > .bottom > .line:not(:last-child) {
        margin-bottom: 4px; }
      .apexcharts-tooltip-custom > .bottom > .line > .marker {
        width: 12px;
        height: 12px;
        border-radius: 12px;
        margin-right: 10px; }
      .apexcharts-tooltip-custom > .bottom > .line > .text {
        font-size: 12px;
        margin-right: 12px; }
      .apexcharts-tooltip-custom > .bottom > .line > .data {
        font-size: 12px;
        font-weight: 600;
        margin-left: auto; }

/*# sourceMappingURL=common.css.map */