@charset "UTF-8";

/*!
/* Tomate 2023 (https://tomate.com/) */
/* Copyright 2018-2023 */

@font-face {
  font-family: "icone-tmt";
  src: url("../fonts/icone-tmt.eot?faoxof");
  src: url("../fonts/icone-tmt.eot?faoxof#iefix") format("embedded-opentype"),
    url("../fonts/icone-tmt.ttf?faoxof") format("truetype"),
    url("../fonts/icone-tmt.woff?faoxof") format("woff"),
    url("../fonts/icone-tmt.svg?faoxof#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icone-tmt" !important;
  speak-as: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "ico-tmt";
  src: url("../fonts/ico-tmt-2.eot?ydfru0");
  src: url("../fonts/ico-tmt-2.eot?ydfru0#iefix") format("embedded-opentype"),
    url("../fonts/ico-tmt-2.ttf?ydfru0") format("truetype"),
    url("../fonts/ico-tmt-2.woff?ydfru0") format("woff"),
    url("../fonts/ico-tmt-2.svg?ydfru0#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-maillage"],
[class*=" icon-maillage"],
[class^="icon-prevision"],
[class*=" icon-prevision"],
[class^="icon-reparation"],
[class*="icon-reparation"] {
  font-family: "ico-tmt" !important;
  speak-as: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tomate:before {
  content: "\e900";
}

.icon-save:before {
  content: "\e901";
}

.icon-prevision:before {
  content: "\e902";
}

.icon-reparation:before {
  content: "\e903";
}

.icon-maillage:before {
  content: "\e904";
}

/*fieldset*/

fieldset {
  border: 1px solid #ccc;
}

.file-input__label {
  margin-left: 8px;
  padding: 0 0.25rem;
  font-size: 9pt;
  color: var(--secondary-text-on-light);
  float: inherit;
  width: auto;
}

.pr-pl-10 {
  padding: 0 10px;
}

.input-size .dx-texteditor.dx-editor-outlined {
  height: 36px;
}

fieldset .btn-width {
  width: 8%;
  margin-left: 0px !important;
  border-top-left-radius: inherit !important;
  border-bottom-left-radius: inherit !important;
}

.p0 {
  padding: 0 !important;
}

.-mr-1 {
  margin-right: -8px !important;
}

.-mr-1-5 {
  margin-right: -12px !important;
}

.-mr-2 {
  margin-right: -16px !important;
}

.-ml-1 {
  margin-left: -8px !important;
}

.-ml-1-5 {
  margin-left: -7px !important;
}

.border-right {
  border-right: 2px solid #ccc;
}

.mt-mb-center-lg {
  margin: 2.5em 0;
}

.img-contact {
  width: 180px;
  height: 167px;
  background: #f3f3f3;
}

.dx-popover-wrapper .dx-popover-arrow::after,
.dx-popover-wrapper.dx-popover-without-title .dx-popover-arrow::after {
  background: #2a4f77 !important;
}

.border-info {
  border-color: #6393c8 !important;
}

.font-grey {
  color: #6c6c6c;
}

/* Accès refusé */
.box {
  position: absolute;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #274c5e;
  overflow: hidden;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

.box-container {
  text-align: center;
  position: relative;
  box-shadow: 1px 4px 8px 0px #afafaf;
  padding-bottom: 3rem;
  padding-top: 3rem;
  padding-left: 3rem;
  padding-right: 3rem;
  background: #fff;
  border-radius: 3px;
}

.MainTitle-tmt {
  display: block;
  font-size: 2rem;
  font-weight: lighter;
  text-align: center;
  color: #c63032;
  margin-top: 0;
  text-transform: uppercase;
}

.MainDescription-tmt {
  font-size: 1.4rem;
  font-weight: lighter;
}

.MainGraphic-tmt {
  position: relative;
}

.MainGraphic-tmt img {
  width: 182px;
}

.Cog-tmt {
  width: 10rem;
  height: 10rem;
  fill: #bdbdbd;
  transition: easeInOutQuint();
  -webkit-animation: CogAnimation 5s infinite;
  animation: CogAnimation 5s infinite;
}

.Logo-tmt-center {
  position: absolute;
  width: 3rem;
  height: 3rem;
  fill: #30a9de;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes CogAnimation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes CogAnimation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* input interior */
.has-list .form-control-feedback {
  position: absolute;
  z-index: 1;
  display: block;
  text-align: center;
  color: #aaa;
  border: none;
  background: transparent;
}

.has-list .visible-0 {
  opacity: 0;
}

.has-list .form-control-feedback.visible-0 {
  opacity: 0;
}

.has-list:hover .form-control-feedback,
.has-list:focus-within .form-control-feedback {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}

.has-list .form-control-feedback:hover,
.has-list .form-control-feedback:active,
.has-list .form-control-feedback:focus {
  border-radius: 0 !important;
  border: none;
  background: #e6e6e6;
  opacity: 1 !important;
}

.has-list .form-control-feedback .dx-button-content {
  padding: 4px;
  padding-top: 6px;
  border-radius: 0;
}

.result-contact {
  font-weight: bold;
}

.result-contact .dx-dropdownbox.dx-textbox.dx-texteditor {
  padding-left: 25px;
}

.btn-mini .dx-button-content {
  padding: 3px 10px !important;
}

.has-list .dx-state-disabled.dx-button {
  background: transparent !important;
  border-color: none !important;
}

/* .view-contact {
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e7e7e7;
  padding: 5px 5px;
  height: 27px
} */

.view-contact {
  background-color: #f0f0f0;
  background-clip: border-box;
  border: 1px solid #c1c1c1;
  padding: 5px 5px 3px;
  min-height: 27px;
}

.label-txt {
  background-color: #f0f0f0;
  background-clip: border-box;
  border: 1px solid #c1c1c1;
  padding: 4px 5px;
  height: auto;
  font-weight: bold;
  margin-bottom: 3px;
  min-height: 27px;
}

.view-contact a {
  color: #216bbd;
}

/* Toolptip btn*/
/* TOOLTIP */
.btn-tooltip {
  position: relative;
}

.btn-tooltip:hover {
  overflow: visible;
}

.btn-tooltip:hover span {
  pointer-events: none;
  display: block;
}

.btn-tooltip span {
  background: #ffffff;
  border: 1px solid #d3d3d3;
  box-shadow: 0px 3px 4px 0px rgb(223 223 223 / 80%);
  box-sizing: border-box;
  color: #42526e;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 1px;
  max-width: 238px;
  min-width: 227px;
  padding: 2em;
  position: absolute;

  transition: all 0.3s ease;
  display: none;
}

.btn-tooltip span::after {
  background: #ffffff;
  content: "";
  height: 10px;
  position: absolute;
  transform: rotate(45deg);
  width: 10px;
  border-top: 1px solid #b9b9b9;
  border-right: 1px solid #b9b9b9;
}

.btn-tooltip.top span {
  bottom: calc(100% + 1.5em);
  left: 50%;
  transform: translateX(-50%);
}

.btn-tooltip.top span::after {
  bottom: -5px;
  left: 50%;
  margin-left: -5px;
}

.btn-tooltip.bottom span {
  bottom: calc(-100% - 1.8em);
  left: 50%;
  transform: translateX(-50%);
}

.btn-tooltip.bottom span::after {
  top: -5px;
}

.btn-tooltip.right span {
  left: calc(100% + 1.5em);
  top: 50%;
  transform: translateY(-50%);
}

.btn-tooltip.right span::after {
  left: -5px;
  margin-top: -5px;
  top: 50%;
}

.btn-tooltip.left span {
  right: calc(100% + 1.5em);
  top: 50%;
  transform: translateY(-15%);
}

.btn-tooltip.left span::after {
  right: -5px;
  margin-top: -5px;
  top: 50%;
}

.map-indication-marker[data-tooltip],
.map-indication[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
.map-indication-marker[data-tooltip]:before,
.map-indication-marker[data-tooltip]:after,
.map-indication[data-tooltip]:before,
.map-indication[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
.map-indication-marker[data-tooltip]:before,
.map-indication[data-tooltip]:before {
  position: absolute;
  bottom: 170%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -65px;
  padding: 7px;
  min-width: 120px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

.map-indication-marker[data-tooltip]:after,
.map-indication[data-tooltip]:after {
  position: absolute;
  bottom: 170%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
.map-indication-marker[data-tooltip]:hover:before,
.map-indication-marker[data-tooltip]:hover:after,
.map-indication[data-tooltip]:hover:before,
.map-indication[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
/* .app-search .dropdown-menu.show {
  scrollbar-width: auto;
  scrollbar-color: #c9c9c9 #ffffff;
} */

/* Chrome, Edge, and Safari */
/* .app-search .dropdown-menu.show::-webkit-scrollbar {
  width: 6px;
}

.app-search .dropdown-menu.show::-webkit-scrollbar-track {
  background: #ffffff;
}

.app-search .dropdown-menu.show::-webkit-scrollbar-thumb {
  background-color: #c9c9c9;
  border-radius: 10px;
}*/

.app-search .dropdown-menu.show {
  max-height: 485px;
  min-height: 100px;
  height: auto;
  overflow: auto;
}

.app-list .dropdown-app-list {
  /* max-height: 600px; */
  min-height: 53px;
  height: auto;
  /* overflow: auto; */
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
/* .app-list .dropdown-app-list {
  scrollbar-width: auto;
  scrollbar-color: #000000 #ff0000;
}


.app-list .dropdown-app-list::-webkit-scrollbar {
  width: 6px;
}

.app-list .dropdown-app-list::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

.app-search .dropdown-app-list::-webkit-scrollbar-thumb {
  background-color: #ff0000 !important;
  border-radius: 10px;
  -webkit-border-radius: 10px;
} */

.logo-sigle {
  height: 27px;
  margin-left: 7px;
}

.padding-app-page-title {
  padding-bottom: 19px;
}

.overflow-criteria {
  /* overflow-y: auto; */
  margin-bottom: 5px;
  height: 263px;
}

/* Firefox */
.overflow-criteria {
  scrollbar-width: auto;
  scrollbar-color: #a8a8a8 #eeeeee;
}

.overflow-criteria::-webkit-scrollbar {
  width: 6px;
}

.overflow-criteria::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

.overflow-criteria::-webkit-scrollbar-thumb {
  background-color: #eeeeee !important;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

.overflow-step-four {
  overflow-y: auto;
  height: 253px;
}

/* Firefox */
.overflow-step-four {
  scrollbar-width: auto;
  scrollbar-color: #a8a8a8 #eeeeee;
}

.overflow-step-four::-webkit-scrollbar {
  width: 6px;
}

.overflow-step-four::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

.overflow-step-four::-webkit-scrollbar-thumb {
  background-color: #eeeeee !important;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}

.scrollspy-example::-webkit-scrollbar {
  width: 6px;
}

.scrollspy-example::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 0;
  -webkit-border-radius: 0;
}

.scrollspy-example::-webkit-scrollbar-thumb {
  background-color: #d4d4d4 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
}

.scrollspy-example::-webkit-scrollbar-thumb:hover {
  background-color: #b8b8b8 !important;
  cursor: pointer;
  border-radius: 0;
  -webkit-border-radius: 0;
}

.btn-grey {
  background-color: #ebebeb !important;
  border-color: #ddd;
  color: #333;
  padding: 2px !important;
  font-weight: bold !important;
}

.btn-grey:hover {
  background-color: #dddddd !important;
}

.btn-grey i {
  margin-right: 3px !important;
  font-size: 14px !important;
}

.btn-grey .dx-button-content {
  padding: 5px 4px !important;
}

/* Dropdown menu button */
.dropdown-menu-button-item .dx-popup-normal {
  top: 5px !important;
}

.dropdown-menu-button-item .dx-list-item-content {
  font-weight: bold;
}

.dropdown-menu-button-item .dx-item.dx-list-item {
  border-bottom: 1px solid #ededed !important;
  padding: 3px;
}

.dropdown-menu-button-item .dx-item.dx-list-item:last-child {
  border-bottom: none !important;
}

.dx-list:not(.dx-list-select-decoration-enabled) .dx-list-item.dx-state-focused {
  background-color: #e5edf6 !important;
  color: #333 !important;
}

.dx-list:not(.dx-list-select-decoration-enabled) .dx-list-item.dx-state-hover {
  background-color: #e5edf6 !important;
  color: #333 !important;
}

.bg-blue {
  background-color: #e7edf3 !important;
}

.dx-list:not(.dx-list-select-decoration-enabled) .dx-list-item.dx-state-focused .dx-icon {
  color: #333 !important;
}

.btn-export-icon .dx-button-content {
  padding: 4px 10px !important;
}

.datagrid-toolbar .dx-toolbar-before {
  left: 10px;
}

.datagrid-tooltip i {
  font-weight: bold;
  font-size: 15px;
}

/* skeleton-toolbar-search*/

.skeleton-toolbar-search {
  display: flex;
  /* align-items: center; */
  padding: 10px 20px;
}

.skeleton-toolbar-search .img {
  height: 15px;
  width: 15px;
  background: #d9d9d9;
  position: relative;
  top: 0;
  overflow: hidden;
  border-radius: 2px;
}

.skeleton-toolbar-search .details {
  margin-left: 10px;
}

.skeleton-toolbar-search span {
  display: block;
  background: #d9d9d9;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.skeleton-toolbar-search .name {
  height: 15px;
  width: 110px;
}

.skeleton-toolbar-search .label {
  height: 13px;
  width: 120px;
}

.skeleton-toolbar-search .champ {
  height: 26px;
  width: 100%;
}

.skeleton-toolbar-search .bloc-modele {
  height: 90px;
  width: 100%;
}

.skeleton-toolbar-search .result {
  height: 15px;
  width: 118px;
  margin-top: 12px;
}

.skeleton-toolbar-search ul li {
  margin-right: 7px;
}

.skeleton-toolbar-search ul {
  margin-left: -5px;
}

.skeleton-toolbar-search ul li:first-child {
  margin-left: 5px;
}

.skeleton-toolbar-search .img::before,
.skeleton-toolbar-search .details span::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right,
      #d9d9d9 0%,
      rgba(0, 0, 0, 0.07) 20%,
      #d9d9d9 40%,
      #d9d9d9 100%);
  background-repeat: no-repeat;
  background-size: 450px 400px;
  animation: shimmer 0.6s linear infinite;
}

.skeleton-toolbar-search .img::before {
  background-size: 650px 600px;
}

.skeleton-toolbar-search .details span::before {
  animation-delay: 0.1s;
}

@keyframes shimmer {
  0% {
    background-position: -450px 0;
  }

  100% {
    background-position: 450px 0;
  }
}

/* Pofil CSS */
.profil-page-list {
  list-style: none;
  padding-left: 0;
}

.profil-page-list li a i {
  font-size: 18px;
}

.profil-page-list a {
  display: flex;
  flex-wrap: no-wrap;
  align-items: center;
  text-decoration: none;
  color: #000;
  position: relative;
  background-color: #fff;
  padding: 1em 1em 1em 0;
  border-bottom: 1px solid #cfcfcf;
  font-weight: bold;
}

.profil-page-list a:hover {
  background: linear-gradient(312deg, #e0efff, #fcfdff);
  color: #000;
}

.profil-page-list a:last-chid {
  border-bottom: none;
}

.profil-active a,
.profil-active a:hover,
.profil-active a:focus,
.profil-active a:active {
  background: #2a4f77;
  color: #fff;
}

.profil-page-list span {
  min-width: 50px;
  text-align: center;
  color: #333;
  z-index: 0;
  margin-right: 10px;
}

.profil-page-list span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background-color: #ffffff;
  z-index: -1;
}

.profil-active span:before {
  background: #2a4f77;
}

.profil-page-list span:before:hover {
  background: #2a4f77;
}

.profil-active i {
  color: #fff;
}

.center-element {
  margin: 0 auto;
  display: grid;
  justify-content: center;
}

/* menu profil */
.list-avatar-profil {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #fff;
  padding: 25px 25px 0 25px;
  position: relative;
}

.list-avatar-profil::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 70%;
  width: 100%;
  background-color: #2a4f77;
}

.image-avatar-profil {
  position: relative;
  height: 120px;
  width: 120px;
  border-radius: 50%;
  background-color: #2a4f77;
  padding: 3px;
  margin-bottom: 10px;
}

.image-avatar-profil .profile-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #fff;
}

.column-right-height {
  min-height: 80vh;
}

.height-details {
  min-height: 65vh;
}

.description-border {
  border: 1px solid #ccc;
  height: 27px;
  padding: 5px;
  color: #8f8f8f;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.description-border-comment {
  border: 1px solid #ccc;
  height: auto;
  padding: 5px;
  color: #8f8f8f;
  font-style: italic;
  margin-bottom: 10px;
}

.input-group-text-padding {
  padding: 4px 14px;
}

.dx-datagrid-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused)>td:not(.dx-focused) {
  background: #e5edf66c !important;
}

.hover-cursor .dx-datagrid-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused)>td:not(.dx-focused) {
  background: #e5edf66c !important;
  cursor: pointer;
}

.hover-cursor .dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
.hover-cursor .dx-datagrid-rowsview .dx-row-focused.dx-data-row>td:not(.dx-focused),
.hover-cursor .dx-datagrid-rowsview .dx-row-focused.dx-data-row>tr>td:not(.dx-focused) {
  cursor: pointer;
}

#treeListTomportail .dx-treelist-rowsview .dx-row-focused.dx-data-row .dx-command-edit:not(.dx-focused) .dx-link,
#treeListTomportail .dx-treelist-rowsview .dx-row-focused.dx-data-row>td:not(.dx-focused),
#treeListTomportail .dx-treelist-rowsview .dx-row-focused.dx-data-row>tr>td:not(.dx-focused) {
  background: #e5edf6 !important;
  color: #333 !important;
}

#treeListTomportail .dx-treelist-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines)>td,
#treeListTomportail .dx-treelist-rowsview .dx-row-focused.dx-data-row:not(.dx-row-lines)>tr:first-child>td {
  border-top: 1px solid #e5edf6 !important;
  border-bottom: 1px solid #e5edf6 !important;
}

#treeListTomportail .dx-treelist-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused)>td:not(.dx-focused) {
  background: #e5edf66c !important;
}

.col-right {
  height: auto;
  min-height: 70vh;
}

.card-height-fixed {
  min-height: 147px;
  height: auto;
}

.checkbox-height-fixed {
  min-height: 40px;
  height: auto;
}

.wording-height {
  min-height: 30px;
  padding: 6px 10px !important;
  text-align: center;
  font-weight: bold;
  color: #333;
}

.dx-treelist-headers .dx-treelist-action {
  font-weight: bold;
  text-align: center !important;
  vertical-align: middle !important;
  color: #333;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused)>tr>td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover>td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover>tr>td {
  background-color: #e5edf6 !important;
  color: #333;
}

.modal-open {
  overflow-y: auto !important;
}

.modal-open.scroll-disabled {
  position: fixed;
  width: 100%;
  overflow-y: scroll !important;
}

.scroll-disabled::-webkit-scrollbar {
  width: auto;
  height: 16px;
}

.scroll-disabled::-webkit-scrollbar-corner,
.scroll-disabled::-webkit-scrollbar-track {
  background-color: rgb(64, 64, 64);
}

.scroll-disabled::-webkit-scrollbar-thumb {
  background-color: rgb(96, 96, 96);
  background-clip: padding-box;
  border: 2px solid transparent;
}

.scroll-disabled::-webkit-scrollbar-thumb:hover {
  background-color: rgb(112, 112, 112);
}

.scroll-disabled::-webkit-scrollbar-thumb:active {
  background-color: rgb(128, 128, 128);
}

/* Buttons */
.scroll-disabled::-webkit-scrollbar-button:single-button {
  background-color: rgb(64, 64, 64);

  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
}

/* Up */
.scroll-disabled::-webkit-scrollbar-button:single-button:vertical:decrement {
  height: 12px;
  width: 16px;
  background-position: center 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

.scroll-disabled::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
}

.scroll-disabled::-webkit-scrollbar-button:single-button:vertical:decrement:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
}

/* Down */
.scroll-disabled::-webkit-scrollbar-button:single-button:vertical:increment {
  height: 12px;
  width: 16px;
  background-position: center 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
}

.scroll-disabled::-webkit-scrollbar-button:single-button:vertical:increment:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
}

.scroll-disabled::-webkit-scrollbar-button:single-button:vertical:increment:active {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
}

#treeListTomportail .dx-treelist-rowsview .dx-treelist-empty-space {
  margin-right: 10px;
}

#treeListTomportail .dx-treelist-rowsview .dx-line {
  width: 14px;
  height: 14px;
}

#treeListTomportail .dx-treelist-rowsview .dx-line span {
  font-size: 14px;
  line-height: 14px;
}

#treeListTomportail .dx-treelist-rowsview .dx-line span:before {
  margin-top: -4px;
  margin-left: -11px;
  font-size: 26px;
}

#treeListTomportail .dx-treelist-rowsview .dx-line:before {
  visibility: visible !important;
  content: "" !important;
  position: absolute;
  left: 0px;
  right: -4px;
  top: -7px;
  bottom: -11px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAABmCAYAAAAgVArEAAAAgElEQVRoQ+3aMQrAIAxA0Sgey+PnXulU6PBpoW22/yaF8AUnB0dVRZcZEZGZLSfMp4EvjCPjyDgyjowj48g4ao2vc/H322XvPdZ1czf8Ruu1GEfGkXFkHBlHxpFxZBwZR8aRcWQcGUfGkXFkHBlHxpFxZBwZR8aRcWQcjfY/RV0OBM0OyQHa1DgAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: 0px -30px;
}

#treeListTomportail .dx-treelist-rowsview .dx-line-middle:before {
  background-position-y: -9px;
}

#treeListTomportail .dx-treelist-rowsview .dx-line-last:before {
  bottom: 4px;
}

.current-user i {
  font-size: 14px;
}

.top-1 {
  top: 1px;
}

.top-0 {
  top: 0;
}

.list-btn-arrow,
.list-btn-arrow:hover,
.list-btn-arrow:active,
.list-btn-arrow:focus {
  background: #6393c8 !important;
  color: #fff !important;
  border: 1px solid #6393c8 !important;
}

.pt-2px {
  padding-top: 2px !important;
}

/* Astuce dropdown */
.astuce-btn-dropdown {
  color: #333;
  font-size: 16px;
  border: none;
  font-size: 20px;
}

.astuce-btn-dropdown:hover {
  cursor: pointer;
  color: #579adf;
}

.astuce-dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.astuce-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #42484e;
  min-width: 280px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1072;
  border-radius: 3px;
}

.astuce-dropdown-content p {
  color: #fff;
  padding: 12px 16px;
  display: block;
  margin-bottom: 0;
  /* font-weight: bold; */
  border-bottom: 1px solid #fdfdfd;
}

.astuce-dropdown-content p:last-child {
  border-bottom: none;
}

/* Show the dropdown menu on hover */
.astuce-dropdown:hover .astuce-dropdown-content {
  display: block;
  cursor: auto;
}

/* Filtre dropdown */
.filtre-btn-dropdown {
  color: #333;
  font-size: 16px;
  border: none;
  font-size: 17px;
}

.filtre-btn-dropdown:hover {
  cursor: pointer;
  color: #579adf;
}

.filtre-dropdown {
  position: relative;
  display: inline-block;
  top: 3px;
}

/* Dropdown Content (Hidden by Default) */
.filtre-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #fff;
  min-width: 380px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1072;
  border-radius: 3px;
}

.histo-dropdown-content {
  min-width: 215px !important;
  padding: 0 10px;
  /* height: 77px; */
  /* min-height: auto; */
  padding-bottom: 5px;
}

.histo-dropdown-content .subtitle h3 {
  font-size: 14px;
}

.histo-dropdown-content .dx-list-item-before-bag .dx-list-select-radiobutton {
  margin-left: 0 !important;
}

.histo-dropdown-content .dx-list:not(.dx-list-select-decoration-enabled) .dx-list-item.dx-state-hover,
.histo-dropdown-content .dx-list:not(.dx-list-select-decoration-enabled) .dx-list-item {
  padding-left: 5px;
}

.histo-dropdown-content .dx-list-item-content {
  padding-left: 0;
}

.filtre-dropdown-content p {
  color: #42484e;
  padding: 12px 16px;
  display: block;
  margin-bottom: 0;
  /* font-weight: bold; */
  border-bottom: 1px solid #e5e5e5;
  border-left: 5px solid #579adf;
}

.filtre-dropdown-content p:last-child {
  border-bottom: none;
}

/* Show the dropdown menu on hover */
.filtre-dropdown:hover .filtre-dropdown-content {
  display: block;
  cursor: auto;
}

/*line-adjustment*/
.line-adjustment {
  position: fixed;
  bottom: 46px;
  left: 0;
  opacity: 0.25;
  width: 260px;
  border-style: solid;
  border-width: 0.1px;
  border-color: #252525;
}

.no-leftside-menu .line-adjustment {
  display: none;
}

.modal-custom {
  max-width: 536px;
}

.name-uploadFile {
  position: relative;
  top: 2px;
  white-space: nowrap;
  width: 320px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.upload-file-btn {
  display: flex;
  margin-bottom: 0;
}

.name-uploadFile label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: #959595;
  width: 100%;
}

.fileUploader-border {
  border-style: dotted !important;
  border-radius: 3px;
}

.text-break-spaces div {
  text-overflow: ellipsis;
  white-space: break-spaces;
  overflow: hidden !important;
  display: block;
  padding-right: 2px;
}

.collapse-treatment {
  font-weight: bold;
  border-radius: 3px;
  margin-bottom: 5px;
  background: #fff;
  padding-left: 5px;
  width: 100%;
}

.treatment-title {
  text-transform: uppercase;
}

.treatment-title h2 {
  font-size: 12px;
  font-weight: 600;
}

.treatment-title {
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  background: #2a4f77;
  padding: 7px 17px;
  margin-bottom: 5px;
  text-align: center;
}

.treatment-title h2 {
  color: #ffffff;
}

.box-treatment .label-collapse {
  position: relative;
  top: -3px;
}

.task-treatment {
  cursor: move;
  background-color: var(--white);
  padding: 1rem;
  border-radius: 3px;
  width: 100%;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
  margin-bottom: 1rem;
  padding-bottom: 3rem;
  border: 1px solid #ddd6d6;
}

.task-treatment:hover {
  box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
}

.task-treatment-tags {
  margin-bottom: 12px;
  color: #6d6d6d;
  width: 330px;
  display: block;
  overflow-wrap: break-word;
  /* height: 32px; */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.list-task-treatment {
  margin-top: 2px;
  margin-bottom: 6px;
  color: #2a4f77;
  font-weight: bold;
}

.list-task-treatment li {
  font-size: 11px;
  margin-right: 20px;
}

.task-owner-treatment {
  color: #ffffff;
  background: #59b6f5;
  padding: 6px;
  border-radius: 5px;
  font-weight: bold;
  position: absolute;
  right: 16px;
}

.date-treatment {
  color: #757575;
  background: #ddd;
  padding: 6px;
  border-radius: 5px;
  font-weight: bold;
}

.border-color-card {
  border-left: 4px solid #ee1616;
}

.column-treatment {
  width: 389px;
  margin-right: 20px;
}

.column-treatment:first-child {
  margin-right: 18px;
  width: 388px;
}

#kanban .list:nth-child(2) {
  margin-left: 6px;
  padding-right: 18px;
}

#kanban .list:nth-child(3) {
  margin-left: 7px;
  padding-right: 19px;
}

.column-treatment:last-child {
  margin-right: 0;
  width: 389px;
}

/* Calculator */
.output-calculator {
  width: 100%;
  height: 120px;
  margin-bottom: 2rem;
}

.result-calculator {
  width: 100%;
  height: inherit;
  border-radius: 0.5rem;
  text-align: start;
  padding: 1rem;
  background-color: #c7c7c7;
  color: #222;
  font-size: 14px;
  border: 0;
  outline: 0;
  pointer-events: none;
}

.calculator-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: #f3f3f3;
  border-radius: 0.5rem;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
}

.buttons-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.btn-calculator {
  width: 100%;
  height: 60px;
  border-radius: 0.25rem;
  border: 0;
  background-color: #c7c7c7;
  color: #222;
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 250ms ease-in-out;
  font-size: 16px;
  font-weight: bold;
}

.btn-calculator span {
  font-size: 14px;
}

.btn-calculator:where(:focus, :hover) {
  outline: 1px solid #c7c7c7;
}

.calculator-logic-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.25rem;
  border-top: 1px solid #dcdcdc;
  padding-top: 8px;
}

.calculator-logic-section__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
}

.calculator-logic-toolbar {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 575.98px) {
  .calculator-logic-toolbar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.calculator-logic-toolbar>.btn-calculator--logic {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0.2rem;
  height: 44px;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #d8d8d8;
  -webkit-appearance: none;
  appearance: none;
}

.calculator-logic-toolbar>.btn-calculator--logic:hover:not(:disabled),
.calculator-logic-toolbar>.btn-calculator--logic:focus:not(:disabled) {
  background-color: #cacaca;
  outline: 1px solid #b0b0b0;
}

.calculator-logic-toolbar>.btn-calculator--logic:disabled {
  opacity: 0.92;
  cursor: not-allowed;
  color: #444;
}

.btn-color-white i {
  color: #fff !important;
}

.badge-notification {
  min-width: 3rem;
  /* top: -27px; */
  padding: 2px 6px;
  text-align: center;
  font-size: 1rem;
  line-height: inherit;
  color: #757575;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 8pt;
  color: #fff;
  background-color: #f0ad4e;
  border-radius: 50rem;
  float: right;
}

.badge-tab-notification {
  margin-left: 12px;
  padding: 6px 5px;
  text-align: center;
  line-height: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 8pt;
  color: #fff;
  background-color: #fbae3f;
}

.badge-tab-notification-red {
  margin-left: 12px;
  padding: 6px 5px;
  text-align: center;
  line-height: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 8pt;
  color: #414141;
  background-color: #ffa29d;
}

.badge-tab-notification-green {
  margin-left: 12px;
  padding: 6px 5px;
  text-align: center;
  line-height: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 8pt;
  color: #414141;
  background-color: #c5f5bc;
}

.collection-list {
  overflow: hidden;
  position: relative;
}

.collection-list .notify-icon i {
  font-size: 20px;
  position: relative;
  top: -5px;
}

.bg-danger {
  background-color: #f0ad4e !important;
}

.notification-list .notify-item .notify-icon {
  height: 30px;
  width: 30px;
}

.notification-list .notify-item .notify-details {
  margin-bottom: 0;
  overflow: hidden;
  margin-left: 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* ICON INSIDE AN INPUT */

.has-icon .icon-inside {
  padding-left: 2.375rem;
}

.has-icon .form-control-feedback-icon {
  position: absolute;
  z-index: 2;
  display: block;
  width: 27px;
  height: 26px;
  line-height: 2.7rem;
  text-align: center;
  pointer-events: none;
  color: #333;
  font-weight: bold;
  font-size: 16px;
}

.has-select .dx-texteditor-input,
.has-select .dx-placeholder {
  margin-left: 25px;
}

/* radio button customizer */
.radio-button-default {
  padding-left: 0;
  margin-bottom: 5px;
}

.radio-button-default [type="radio"]:checked,
.radio-button-default [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.radio-button-default [type="radio"]:checked+label,
.radio-button-default [type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 33px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #333;
  font-weight: inherit;
}

.radio-button-default [type="radio"]:checked+label:before,
.radio-button-default [type="radio"]:not(:checked)+label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff;
  padding: 10px;
}

.radio-button-default:hover [type="radio"]:checked+label:before,
.radio-button-default:hover [type="radio"]:not(:checked)+label:before {
  border: 1px solid #337ab7;
  opacity: 0.5;
}

.radio-button-default:focus [type="radio"]:checked+label:before,
.radio-button-default:focus [type="radio"]:not(:checked)+label:before {
  border: 1px solid #337ab7;
}

.radio-button-default [type="radio"]:checked+label:after,
.radio-button-default [type="radio"]:not(:checked)+label:after {
  content: "";
  width: 10px;
  height: 10px;
  background: #337ab7;
  position: absolute;
  top: 6px;
  left: 6px;
  border-radius: 100%;
}

.radio-button-default [type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.radio-button-default [type="radio"]:checked+label:after {
  opacity: 1;
}

/* Animation Checkmark and failuremark*/
.checkmark-loader {
  animation: 600ms ease forwards loader-spin,
    500ms linear 500ms forwards border-fill;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-left-color: #4caf50;
  border-radius: 50%;
  display: inline-block;
  height: 25px;
  width: 25px;
  right: 28em;
  position: relative;
  left: 13px;
  top: 11px;
  margin-top: -10px;
}

.checkmark {
  animation: 800ms ease 1s forwards checkmark;
  border-right: 2px solid #4caf50;
  border-top: 2px solid #4caf50;
  height: 16px;
  left: 3px;
  opacity: 0;
  position: absolute;
  top: 12px;
  transform: scaleX(-1) rotate(135deg);
  transform-origin: left top;
  width: 8px;
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes border-fill {
  0% {
    border-color-top: none;
    border-color-right: none;
    border-color-bottom: none;
  }

  90% {
    border-color-top: rgba(247, 148, 30, 0.1);
    border-color-right: rgba(247, 148, 30, 0.1);
    border-color-bottom: rgba(247, 148, 30, 0.1);
  }

  100% {
    border-color: #4caf50;
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 0;
  }

  20% {
    height: 0;
    width: 8px;
    opacity: 1;
  }

  40% {
    height: 14px;
    width: 7px;
    opacity: 1;
  }

  100% {
    height: 14px;
    width: 7px;
    opacity: 1;
  }
}

.failuremark-loader {
  animation: 600ms ease forwards loader-spin2,
    500ms linear 500ms forwards border-fill2;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-left-color: #d30909;
  border-radius: 50%;
  display: inline-block;
  height: 25px;
  width: 25px;
  right: 28em;
  position: relative;
  left: 13px;
  top: 11px;
  margin-top: -10px;
}

.failuremark-right {
  animation: 800ms ease 1s forwards checkmark2;
  border-right: 2px solid #d30909;
  height: 16px;
  left: 3px;
  opacity: 0;
  position: absolute;
  top: 12px;
  transform: scaleX(-1) rotate(139deg);
  transform-origin: left top;
  width: 8px;
}

.failuremark-left {
  animation: 800ms ease 1s forwards checkmark2;
  border-left: 2px solid #d30909;
  height: 16px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 6px;
  transform: scaleX(-1) rotate(45deg);
  transform-origin: left top;
  width: 8px;
}

@keyframes loader-spin2 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes border-fill2 {
  0% {
    border-color-top: none;
    border-color-right: none;
    border-color-bottom: none;
  }

  90% {
    border-color-top: rgba(247, 148, 30, 0.1);
    border-color-right: rgba(247, 148, 30, 0.1);
    border-color-bottom: rgba(247, 148, 30, 0.1);
  }

  100% {
    border-color: #d30909;
  }
}

@keyframes checkmark2 {
  0% {
    height: 0;
    width: 0;
    opacity: 0;
  }

  20% {
    height: 0;
    width: 8px;
    opacity: 1;
  }

  40% {
    height: 12px;
    width: 6px;
    opacity: 1;
  }

  100% {
    height: 12px;
    width: 6px;
    opacity: 1;
  }
}

.btn-p-2 .dx-button-content {
  padding: 2px !important;
}

.btn-p-3 .dx-button-content {
  padding: 3px !important;
}

.btn-p-4 .dx-button-content {
  padding: 4px !important;
}

.btn-p-5 .dx-button-content {
  padding: 5px !important;
}

.info-box {
  border: 1px solid;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
}

.info-label {
  font-size: 12px;
  font-weight: bold;
  position: relative;
  top: 7px;
  color: #00243e;
}

.info-primary {
  border-color: #cdcdcd;
  background-color: #ffffff;
}

.info-box .loading {
  width: 33px;
  height: 33px;
  border: 4px solid #cdcdcd;
  border-top: 4px solid #00243e;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
  margin-right: 10px;
  /* margin: 0 20px; */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.value-label {
  background: #e6e6fa;
  padding: 10px 13px 0 13px;
  color: #313131;
  border-radius: 3px;
}

.contact-mail .dx-texteditor-input-container {
  display: block;
}

.contact-mail i {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: inline-block;
  position: relative;
  top: 2px;
  /* background: #fff; */
}

.contact-mail span {
  position: relative;
  top: -1px;
}

.contact-mail .dx-tag-content {
  background-color: initial;
  border-radius: 18px;
  border: 1px solid #aaaaaa;
}

.contact-mail .bg-contact-mail {
  background: #6393c8;
  color: #fff;
}

.datagrid-dashboard .dx-datagrid-rowsview.dx-scrollable.dx-scrollable-both.dx-fixed-columns {
  position: sticky;
}

/* Button Autorization */
.btn-autorization {
  padding: 1px 8px 5px 8px;
  width: 100%;
  text-align: left;
  font-size: 9pt;
  margin-bottom: 5px;
}

.btn-autorization:hover,
.btn-autorization:active,
.btn-autorization:focus {
  color: #6d6d6d;
}

.btn-autorization i {
  font-size: 18px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}

.btn-autorization.btn-enabled-unchecked:hover,
.btn-autorization.btn-enabled-unchecked:active,
.btn-autorization.btn-enabled-unchecked:focus {
  color: #6d6d6d;
}

.btn-enabled-unchecked {
  color: #6d6d6d;
  border: 1px solid #bff3d5;
}

.btn-confirm {
  background-color: #ccffe1;
  color: #6d6d6d;
}

.btn-disabled {
  background-color: #efefef;
  color: #a1a1a1 !important;
}

/* Tree List */
.tree-list-autorization {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree-list-autorization li {
  position: relative;
  line-height: 2em;
}

.tree-list-autorization ul {
  position: relative;
  margin: 0 0 0 1em;
  padding: 0;
  list-style: none;
}

.tree-list-autorization ul:before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 17px;
  left: 5px;
  border-left: 1px dotted rgba(0, 0, 0, 0.3);
}

.tree-list-autorization ul li {
  padding-left: 1.5em;
}

.tree-list-autorization ul li:before {
  content: "";
  position: absolute;
  top: 16px;
  left: 5px;
  width: 1em;
  border-top: 1px dotted rgba(0, 0, 0, 0.3);
}

.tree-list-autorization ul li:last-child:before {
  background-color: white;
  top: 15px;
  left: 5px;
  bottom: 0;
}

.tree-list-autorization ul ul {
  margin-left: 0.5em;
}

.tree-list-autorization .dx-item-content.dx-treeview-item-content {
  position: relative;
  top: -1px;
}

.tree-list-autorization .dx-treeview-node-container.dx-treeview-node-container-opened:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 17px;
  left: 5px;
  border-left: 1px dotted rgba(0, 0, 0, 0.3);
}

.tree-list-autorization .dx-treeview-node.dx-treeview-item-without-checkbox.dx-state-focused>.dx-treeview-item,
.tree-list-autorization .dx-treeview-item.dx-state-hover,
.tree-list-autorization .dx-treeview-item-without-checkbox.dx-state-selected>.dx-treeview-item {
  background-color: #b5d5ef36 !important;
  color: #333;
}

.rounded-circle-primary {
  height: 10px;
  width: 10px;
  display: inline-block;
  background-color: rgb(29, 178, 245);
  position: relative;
  top: 1px;
}

.rounded-circle-danger {
  height: 10px;
  width: 10px;
  display: inline-block;
  background-color: red;
  position: relative;
  top: 1px;
}

/* z-index */
.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-n1 {
  z-index: -1;
}

.bg-warning-light {
  background-color: #ffe4c5;
}

.bg-success {
  background-color: #0acf97 !important;
}

.bg-success-2 {
  background-color: #51b455;
}

.bg-secondary {
  background-color: #2a4f77 !important;
}

/* Profile */
.profile-card {
  margin-bottom: 5px;
  background-color: #fff;
  padding: 10px 20px;
  /* width: auto; */
  /* display: flex; */
}

.profile-card .media-body {
  position: relative;
  top: 6px;
  /* flex: 1; */
}

.profile-card img {
  width: 64px;
  margin-right: 20px;
  border-radius: 50%;
}

.profile-name {
  line-height: 1.5;
  margin-bottom: 0;
  color: #4f4f4f;
  width: 206px;
}

.percentage-right {
  position: absolute;
  right: 20px;
  top: 20px;
}

.card-file {
  display: flex;
  background-color: #fff;
  align-items: center;
  align-content: center;
  box-shadow: rgb(0 0 0 / 16%) 0px 2px 5px;
  /* width: 126%; */
}

.card-file .icon {
  max-width: 27%;
  margin: auto;
  padding: 0.1em;
  border-radius: 0.7em;
  font-size: 50px;
  color: #198754;
}

.card-file .card-body {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 18px;
  align-items: center;
}

.card-file .card-title {
  margin-bottom: 10px;
  color: #337ab7;
  font-size: 12px;
}

.card-file .date-section {
  margin-bottom: 10px;
  font-size: 11px;
  color: #898989;
}

.text-section {
  max-width: 60%;
}

.cta-section {
  max-width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}

.cta-section .btn {
  padding: 0.3em 0.5em;
  /* color: #696969; */
}

.card-file.bg-light-subtle .cta-section .btn {
  background-color: #898989;
  border-color: #898989;
}

.top-5 {
  top: 5px;
}

.top-4 {
  top: 4px;
}

.width-notify {
  max-width: 330px;
  border-radius: 0;
  padding: 30px 0;
  /* box-shadow: none; */
  box-shadow: rgb(0 0 0 / 16%) 0px 2px 5px;
}

.site-task {
  color: #ff991f;
}

.task-marche .date-treatment {
  position: relative;
  top: 4px;
  background: none;
  color: #3e90fd;
}

.site-task span,
.task-marche .date-treatment span {
  color: #777777;
}

.noBgBtn.dx-state-hover,
.noBgBtn {
  background-color: initial !important;
}

.notification-calcul {
  position: absolute;
  bottom: 10px;
}

.state-txt {
  padding: 5px 10px;
  width: 100%;
  position: relative;
  top: -5px;
  text-align: center;
  font-weight: inherit;
  color: #fff;
}

.state-bg-success {
  background-color: rgb(92, 184, 92) !important;
}

.state-bg-default {
  background-color: rgb(119, 119, 119) !important;
}

.state-bg-primary {
  background-color: rgb(66, 139, 202) !important;
}

.state-bg-danger {
  background-color: rgb(240, 78, 49) !important;
}

/* .scrollspy-example {
  height: 100%;
} */

.list-border .dx-radiobutton {
  border-top: 1px solid #ddd;
  padding: 5px 4px 2px 5px;
}

.list-border .dx-radiobutton:first-child {
  border-top: none;
}

.skeleton-edit {
  margin: 8px 0 !important;
  align-items: center !important;
}

.skeleton-edit .details {
  margin-left: 0;
}

.skeleton-edit .label {
  height: 20px;
  width: 100%;
}

.skeleton-edit .champ {
  height: 20px;
  width: 180px;
}

.bg-danger {
  background-color: #ff5555 !important;
}

.header-panel-datagrid .dx-datagrid-headers .dx-header-row .dx-cell-focus-disabled {
  text-align: center !important;
  vertical-align: middle !important;
  font-weight: bold;
  color: #000;
}

.ms--2 {
  margin-left: -2px;
}

/* Table op*/
.table-remove-p th {
  padding: 7px 0;
  color: #313a46;
  padding-bottom: 0;
}

.table-remove-p td {
  padding: 0;
  margin-bottom: 0;
}

.table-remove-p td:last-child {
  padding-right: 0;
  margin-bottom: 0;
}

.table-remove-p .th-custom-header {
  padding-top: 0;
  padding-bottom: 0;
}

.empty-input {
  height: 27px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid #c1c1c1;
}

.table-grey th.text-center.text-dark {
  padding-bottom: 7px;
  border: 1px solid #d1d1d1;
  /* margin-right: 29px; */
}

.table-border-right {
  height: 50px;
}

.table-border-right td {
  border-right: 1px solid #c1c1c1;
  width: 30%;
  padding: 0 5px;
}

.table-border-right td:last-child {
  border-right: none;
}

.img-right {
  position: absolute;
  right: 9px;
  margin-top: -5px;
}

.error-item span {
  color: #ff5a54;
  position: absolute;
  right: 43px;
}

/* MAP */
.lightbox-viewer {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1002;
}

.lightbox-viewer .leaflet-container {
  max-width: 90%;
  max-height: 80%;
  margin-top: 5%;
  left: 5%;
}

.lightbox-viewer a.close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 3em;
  color: #fff;
  text-decoration: none;
  z-index: 1003;
}

.lightbox-viewer a.close:hover {
  cursor: pointer;
}

.cursor-pointer {
  cursor: pointer;
}

.icon-size {
  padding: 0 !important;
}

.icon-size i.icon-h3 {
  font-size: 18px;
  position: relative;
  top: 4px;
  color: #6393c8;
}

.name-break {
  height: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-bottom: 5px;
}

.contact-break {
  text-overflow: ellipsis;
  overflow: hidden;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
  word-break: break-all;
  font-size: 14px;
}

.description-break {
  height: 30px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
}

.padding-contact {
  padding: 1.8rem !important;
}

.left--6 {
  left: -6px;
}

.position-feuille-du-jour {
  padding-top: 10px;
}

.position-absolute-grid-agenda .dx-button-mode-contained {
  background-color: #6393c8;
  border-color: #6393c8;
}

.position-absolute-grid-agenda .dx-button-mode-contained .dx-icon {
  color: #fff;
}

.position-absolute-grid-agenda .dx-button-mode-contained:hover .dx-icon,
.position-absolute-grid-agenda .dx-button-mode-contained:hover {
  background-color: #6393c8;
  border-color: #6393c8;
  color: #fff;
}

top-0 {
  top: 0;
}

.element-disabled {
  pointer-events: none;
  opacity: 0.7 !important;
  border-color: #a9a9a9 !important;
  color: #8a8a8a !important;
}

.message-information {
  padding: 15px;
  box-shadow: 0px 4px 10px 0px #bfbfbf;
  background: #51b455;
  color: white;
}

.message-information .icon-information {
  align-items: center;
  display: flex;
  vertical-align: middle;
}

.icon-information i {
  font-size: 4em !important;
  font-weight: initial !important;
}

.upload-temp .dx-buttongroup .dx-button-content i,
.upload-temp .dx-toolbar-button i,
.upload-temp .dx-filemanager-file-actions-button i {
  color: #333 !important;
}

.upload-temp .dx-dropdownbutton {
  margin-right: 5px;
}

.upload-temp .dx-buttongroup-item .dx-button-content {
  padding-left: 5px !important;
  padding-right: 4px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.upload-temp .dx-filemanager-toolbar,
.upload-temp .dx-toolbar {
  background: initial !important;
}

.upload-temp .dx-toolbar-button .dx-toolbar-item-content .dx-button-normal {
  background-color: #e9e9e9;
}

.upload-temp .dx-toolbar-button .dx-toolbar-item-content .dx-buttongroup-item {
  background-color: #ffffff;
}

.upload-temp .dx-toolbar-button.dx-filemanager-toolbar-has-large-icon .dx-button-normal {
  background-color: #ffffff;
}

.upload-temp .dx-toolbar-button.dx-filemanager-toolbar-has-large-icon .dx-button-normal.dx-state-hover {
  background-color: rgba(0, 0, 0, 0.04);
  border-color: transparent;
}

.position-mark {
  font-size: 26px;
  color: green;
  position: relative;
  top: -7px;
}

.position-mark-diagnostic {
  font-size: 20px;
  color: green;
  position: relative;
  top: -4px;
}

.mark-failed {
  color: red;
}

.height-axes {
  height: 435px;
}

.list-ietm-error {
  border-color: #ffa1a1;
  background: #fff0f0;
  text-align: justify;
}

.d-icon {
  font-size: 22px !important;
  color: #333;
}

.d-icon-hidden .d-icon {
  width: 22px;
  visibility: hidden;
}

.d-icon-show .d-icon {
  width: 22px;
}

.d-icon-show .dx-icon-spindown::after {
  border-bottom: 1px solid #dfdfdf;
  bottom: -8px;
  position: relative;
  content: "";
  display: block;
  left: 17px;
  /* right: -28px; */
}

.submenu-item .d-icon:hover {
  cursor: pointer;
}

.submenu-item .strong {
  font-weight: bold;
  position: relative;
  top: -2px;
}

.f-right {
  display: flex;
}

.f-right img {
  width: 23px;
  height: 23px;
  margin-left: 5px;
}

.f-right span {
  color: #ff5a54;
  position: relative;
  top: 2px;
}

.header-submenu {
  padding-top: 10px !important;
  background: #e9eff3 !important;
  box-shadow: 0px 1px 2px #c5c5c5;
}

.submenu-item {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #dfdfdf;
  padding: 6px 0px 0 0;
}

.submenu-check-all {
  display: flex;
  justify-content: space-between;
  padding: 0;
  padding-left: 0;
}

.subFolderHeirarchy .folderHeirarchyList2 {
  padding-left: 0px;
}

.mainFolderHeirarchy li {
  border: none;
}

/*.subFolderHeirarchy li:last-child .subFolderHeirarchy li:last-child{
  background-color: #e9eff3 !important;
}*/

/* .mainFolderHeirarchy .list-group-item .submenu-item{
  padding-left: 20px; 
}

.subFolderHeirarchy .folderHeirarchyList2 .submenu-item{
  padding-left: 40px;
} */

.mainFolderHeirarchy li a {
  color: #000;
  text-decoration: none !important;
}

.mainFolderHeirarchy li a:hover {
  text-decoration: none !important;
}

.mainFolderHeirarchy .folderHeirarchyList {
  padding-top: 0;
  padding-bottom: 0px;
  padding-left: 9px;
}

.mainFolderHeirarchy .folderHeirarchyList.active>.subFolderHeirarchy {
  display: block;
}

.mainFolderHeirarchy .folderHeirarchyList .subFolderHeirarchy {
  display: block;
  content: "";
  position: relative;
  top: 0;
  bottom: 0;
  left: 0px;
  padding-left: 16px;
}

.mainFolderHeirarchy {
  height: auto;
  overflow: inherit;
}

.mainFolderHeirarchy::-webkit-scrollbar-track {
  background-color: transparent;
}

.mainFolderHeirarchy::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
}

.mainFolderHeirarchy::-webkit-scrollbar-thumb {
  background: rgb(224, 224, 224);
  border-radius: 10px;
}

.folderHeirarchyList .subFolderHeirarchy::before {
  display: block;
  content: "";
  position: absolute;
  top: -8px;
  bottom: 8px;
  left: 11px;
  border-left: 1px dashed #bfbfbf;
}

/* TABULATION */

.tab-vertical .nav.nav-tabs {
  float: left;
  display: block;
  margin-right: 0px;
  border-bottom: 0;
}

.tab-vertical .nav.nav-tabs .nav-item {
  margin-bottom: 5px;
  text-align: center;
  display: grid;
  border: none;
}

.tab-vertical .nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  background: #fff;
  padding: 10px 25px;
  color: #71748d;
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 0;
  text-align: center;
}

.tab-vertical .nav-tabs .nav-link.active {
  color: #ffffff;
  background-color: #4896e7 !important;
  border-color: transparent !important;
}

.tab-vertical .nav-tabs .nav-link {
  border: 1px solid #eef2f7;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
}

.tab-vertical .tab-content {
  overflow: auto;
  -webkit-border-radius: 0px 4px 4px 4px;
  -moz-border-radius: 0px 4px 4px 4px;
  border-radius: 0px 4px 4px 4px;
  background: #fff;
  padding: 0 12px 10px 12px;
}

.tab-vertical.bg-trasparent .tab-content {
  background-color: transparent;
  padding-right: 0;
  overflow: hidden;
}

.tab-slider--nav {
  width: 100%;
  float: left;
  margin-bottom: 20px;
}

.tab-slider--tabs {
  display: inline-table;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  overflow: hidden;
  background: #fff;
  justify-content: flex-end;
}

.tab-slider--tabs .nav-item .nav-link.active {
  background-color: #345f90;
  border: 1px solid #345f90;
}

.tab-slider--tabs .nav-link {
  color: #3d3d3d;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 12px 6px;
}

.tab-slider--tabs li.nav-item {
  border: none;
}

.tab-slider--tabs li {
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  color: #345f90;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: inline-block;
  transition: color 250ms ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tab-slider--tabs li.active {
  color: #fff;
}

.btn-info-disabled .dx-state-disabled .dx-button-content i {
  color: #333 !important;
}

.wrappers .btn-info-disabled .dx-state-hover {
  background-color: #6393c8 !important;
  border-color: #6393c8 !important;
}

.bg-sky-blue {
  background-color: #e9eff3;
}

.bg-light-gray {
  background-color: #efefef !important;
}

.height-37 {
  height: 37px;
}

.dxc-tooltip {
  z-index: 1061;
}

.btn-p-rl {
  padding: 10px 12px 11px;
}

.position-absolute-legend {
  position: absolute;
  right: 0;
  width: auto;
  margin-top: -35px;
  background: none;
}

.img-maillage:hover {
  -webkit-filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
  filter: invert(30%) grayscale(100%) brightness(70%) contrast(4);
  cursor: pointer;
}

.border-top-bottom-none .dx-texteditor.dx-editor-outlined {
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
}

.border-none.dx-texteditor.dx-editor-outlined {
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
}

.border-right-none {
  border-right: none !important;
}

.border-left-none {
  border-left: none !important;
}

/* Welcome page */
.cta-box {
  background-image: url(assets/images/bg-pattern.png) !important;
  background-size: cover !important;
}

.img-module {
  width: 98px;
}

.liste-module li {
  margin-right: 12px;
}

.liste-module .card {
  border-radius: 10px;
  margin-bottom: 15px;
}

.liste-module li:last-child {
  margin-right: 0;
}

.liste-module .card-body {
  padding: 0;
  /* border-radius: 21px; */
}

.liste-module .img-body {
  padding: 21px;
  border-radius: 10px;
  box-shadow: 9px 10px 7px 1px rgb(118 108 108 / 30%);
}

.liste-module .card-body p {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 0;
}

.gr-tompro {
  background: linear-gradient(170deg, #1771b5 0%, #1771b5 100%);
}

.gr-tomconso {
  background: linear-gradient(170deg, #1771b5 0%, #2a4f77 100%);
}

.gr-tometatFin,
.gr-tometatsfinassociation,
.gr-tometatsfinprojet {
  background: linear-gradient(170deg, #673e91 0%, #673e91 100%);
}

.gr-tommarche {
  background: linear-gradient(170deg, #1e6a53 0%, #dc2f7d 100%);
}

.gr-tomstock {
  background: linear-gradient(170deg, #e64a34 0%, #e64a34 100%);
}

.gr-tomparc {
  background: linear-gradient(170deg, #4a919e 0%, #4a919e 100%);
}

.gr-tommonitoring {
  background: linear-gradient(170deg, #23a77f 0%, #23a77f 100%);
}

.gr-tomcollecte {
  background: linear-gradient(170deg, #1e6a53 0%, #1e6a53 100%);
}

.gr-tompaie {
  background: linear-gradient(170deg, #f5ac37 0%, #f5ac37 100%);
}

.gr-tomgrh {
  background: linear-gradient(170deg, #be7800 0%, #be7800 100%);
}

.gr-tompatrimoine {
  background: linear-gradient(170deg, #4a919e 0%, #2c575e 100%);
}

.text-tompro {
  color: #ffffff;
}

.text-description {
  padding-top: 10px;
}

.header-banner {
  background: #ffffff;
  padding: 8px 8px;
  padding-top: 0;
  border-radius: 5px;
}

.header-banner ul {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  margin-bottom: 0;
  padding-right: 5px;
  /* display: grid; */
  /* grid-template-columns: 2fr 1fr; */
  /* gap: 10px; */
}

.header-banner .flagicon {
  width: auto;
  height: 42px;
  /* box-shadow: inherit; */
  /* border: 1px solid #ececec; */
  box-shadow: #9a9a9a 1px -1px 12px -3px;
  /* margin: auto 0; */
  /* display: block; */
  position: relative;
  top: 10px;
  right: 0;
}

.title-banner {
  font-size: 18px;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  /* box-shadow: 0px 6px 20px 0px #e7e7e7; */
}

.title-banner .minititle {
  font-size: 24px;
  color: #747474;
}

.header-sigle {
  font-size: 26px;
  color: #2a4f77;
  font-weight: bold;
}

.img-hover-module:hover {
  transform: translateY(-7px);
}

.img-hover-module {
  transition: transform 0.4s;
}

.box .media {
  background-color: #ff5437;
  border-radius: 5px;
  padding: 25px;
  /* display: flex; */
  align-items: center;
}

.box .media i {
  background-color: #fa8673;
  border-radius: 50%;
  padding: 3px 11px;
  color: #fff;
  width: 45px;
  height: 45px;
  margin-right: 20px;
}

.box .media-body h3 {
  color: #fff;
  font-size: 14px;
  font-weight: inherit;
  line-height: 1.5;
}

.drawer-item .dx-treeview-select-all-item {
  padding: 13px 0 11px 20px !important;
}

/* title-tip-right */
/*.title-tip-right[data-title]:hover:before {
  content: attr(data-title); 
  position: fixed;
  top: auto;
  left: 100%; 
  right: auto;
  transform: translateY(0%,-50%);
  margin-left: 0.5em;
  background-color: #222;
  color: #fff;
  padding: 0.5em;
  border-radius: 4px;
  z-index: 1000;
  font-size: 0.875em;
  line-height: 1.2;
}

.title-tip-right[data-title]:hover:after {
  content: '';
  position: fixed;
  top: auto;
  right: auto; 
  transform: translateY(180%);
  margin-left: 0;
  border: 0.25em solid transparent;
  border-right-color: #222;
  z-index: 999;
}

.title-tip-right[data-title] {
  position: relative;
  cursor: pointer;
}*/

.label-yellow {
  background-image: url("/assets/images/indication/label-yellow.png");
  width: 100%;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
}

.label-fuchsia {
  background-image: url("/assets/images/indication/label-fuchsia.png");
  width: 100%;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
}

.label-green {
  background-image: url("/assets/images/indication/label-green.png");
  width: 100%;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  float: left;
}

.card-ribbon .media-body {
  /* margin-top:5px; */
  padding: 0 0 0 25px;
  padding-top: 0px;
}

.card-ribbon .card-body {
  padding: 10px 20px;
  background: white;
  padding-left: 10px;
}

.card-ribbon .media {
  align-items: center;
  margin: 11px 0;
}

.card-ribbon .media img {
  width: 106px;
}

.card-ribbon .ribbon {
  font-size: 11px;
  font-weight: inherit;
}

.card-ribbon {
  box-shadow: rgb(0 0 0 / 16%) 0px 2px 5px;
}

.card-ribbon .media-heading {
  font-size: 14px !important;
  font-weight: bold;
  color: #333;
  margin-top: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 128px;
}

.card-ribbon .media-body p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 128px;
  display: block;
}

.card-ribbon .circle {
  width: 7px;
  height: 7px;
  line-height: 20px;
  border-radius: 50%;
  /* the magic */
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  text-align: center;
  color: white;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  /* margin: 0 auto 40px; */
  display: block;
  position: relative;
  top: 5px;
  margin-right: 4px;
  margin-left: 0;
}

.blue {
  background-color: #3498db;
}

.card-ribbon .ribbon {
  width: 87px;
}

.card-ribbon,
.overlay-desc {
  transition: 0.3s;
}

.card-ribbon:hover {
  transform: translate(0, -3px);
  cursor: pointer;
  box-shadow: rgba(0, 81, 255, 0.5) 0px 2px 5px;
}

.card-ribbon:active,
.card-ribbon:focus {
  box-shadow: rgba(0, 81, 255, 0.5) 0px 2px 5px;
  cursor: pointer;
}

.overlay-desc {
  display: none;
}

.card-ribbon:hover .overlay-desc {
  display: block;
  transition: 0.3s;
  position: absolute;
  background-color: rgb(0 0 0 / 75%);
  left: 0;
  color: #fff;
  bottom: 0;
  padding: 9px;
  right: 0;
}

.ribbon-box .ribbon-danger {
  background: #ff5555 !important;
}

.ribbon-box .ribbon {
  padding-right: 5px;
}

.card-container:first-child {
  padding-left: 0;
}

.card-container {
  padding-left: 12px;
  padding-right: 12px;
}

.img-detail-vehicle {
  width: 70%;
  height: auto;
  margin: 0 auto;
  padding: 30px;
}

.img-detail-vehicle img {
  /* max-width: 110px; */

  display: table-cell;

  vertical-align: middle;
}

.badge-vehicle {
  position: relative;
  clear: both;
  font-size: 12px;
  color: #fff;
  padding: 3px 6px;
  float: right;
  top: -23px;
  right: -10px;
  width: 96px;
  text-align: center;
  margin-top: 5px;
}

.card-details-vehicle .badge-success {
  background: #0acf97;
}

.card-details-vehicle .badge-info {
  background: #39afd1;
}

.card-details-vehicle .badge-warning {
  background: #ffbc00;
}

.card-details-vehicle .badge-danger {
  background: #ff5555;
}

.card-details-vehicle {
  padding: 20px;
  background: #fff;
  box-shadow: 0px 6px 20px 0px #e7e7e7;
}

.title-details-vehicle-container {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 12px;
  color: #fff;
  padding: 3px 10px;
}

.title-details-vehicle-container .tilte-details-vehicle {
  color: #333333;
  text-transform: uppercase;
  font-size: 13px;
}

.box-shadow-details-vehicle {
  border-top: 1px solid #e8e8e8;
}

.list-detail-vehicle {
  margin-top: 13px;
}

.list-detail-vehicle li {
  margin-bottom: 5px;
}

.desc-detail {
  font-size: 12px;
  padding: 5px 10px;
}

.title-info {
  font-size: 13px;
}

.statut-detail {
  font-size: 13px;
}

.date-detail-vehicle {
  font-size: 11px;
  margin-bottom: 0;
}

.date-detail-vehicle i {
  font-size: 12px;
  color: #39afd8;
}

.pagination-vehicle {
  position: absolute;
  bottom: 0;
  left: 13px;
}

.pagination-vehicle li:hover {
  background: #6393c8;
  cursor: pointer;
  color: #ffffff;
}

.pagination-vehicle li {
  padding: 4px 8px;
  border: 1px solid #ccc;
}

.mb-details-vehicle {
  margin-bottom: 0;
}

.list-active {
  background: #6393c8;
  color: #ffffff;
  border: none;
}

/* TOMGED */
.tomged-body-content {
  /* padding: 1.75rem; */
  /* padding-top: 11px; */
  left: 0;
  overflow-x: hidden;
  position: relative;
  padding-top: 0;
  transition: right 0.5s ease, width 0.5s ease;
}

.tomged-files-list li a {
  padding: 15px 67px;
  margin: 8px;
  background: #fff;
  border: 1px solid #dbdfea;
  border-radius: 4px;
  display: block;
  margin-right: 18px;
  text-align: center;
}

.tomged-files-list li a:hover {
  border: 1px solid #3e80c7;
}

.tomged-files-list li a:first-child {
  margin-left: 0;
}

.tomged-files-list li a i {
  font-size: 70px;
  color: #f1b44c;
}

/* .tomged-files-list li a:hover p{
  color: #f1b44c;
 } */

.tomged-files-list li p {
  font-size: 12px;
  font-weight: 500;
  color: #364a63;
}

.tomged-title {
  text-transform: uppercase;
  padding-top: 15px;
  font-size: 12px;
  border-top: 1px solid #e5e9f2;
  margin-top: 15px;
}

.zip-box {
  color: #7e95c4 !important;
}

.tomged-file-item {
  padding: 15px 12px 15px 12px;
  margin: 4px 0;
  background: #fff;
  border: 1px solid #dbdfea;
  position: relative;
  border-radius: 4px;
  margin-left: 0;
  /* margin-right: 7px; */
  /* margin-bottom: 15px; */
}

/* .tomged-file-item:hover .btn-group.dropdown {
  z-index: 200;
} */

.tomged-file-item:first-child {
  margin-left: 0;
}

.tomged-file-item i {
  margin-right: 10px;
  color: #f1b44c;
  font-size: 35px;
}

.tomged-file-item .tomged-file {
  display: flex;
  align-items: center;
  float: left;
}

.tomged-file-item .tomged-file p {
  margin-bottom: 0;
  color: #364a63;
  font-weight: 500;
  font-size: 12px;
}

ul.history-size {
  margin-left: 3px;
  margin-top: -5px;
  width: 225px;
}

ul.history-size li {
  font-size: 11px;
  color: #8094ae;
  margin-right: 2px;
}

ul.history-size li span {
  position: relative;
  top: 1px;
}

.tomged-files-group .btn-group,
.card-list-tomged .btn-group {
  display: block;
  float: right;
  /* width: 45px; */
  height: 20px;
  /* z-index: 10; */
  position: absolute;
  right: 5px;
  top: 5px;
}

.seats-tomged .firstPart {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 77px;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.tomged-body-content.sidenavActive .title-card-list {
  width: 114px;
}

.tomged-files-group .btn-group:hover {
  cursor: pointer;
}

.tomged-file-item .btn-group i {
  color: #364a63;
}

.tomged-file-item .firstPart,
.title-card-list .firstPart {
  max-width: calc(100% - 4.62em);
  /* min-width: 2.52em; */
  text-overflow: ellipsis;
}

.grid-title .firstPart {
  max-width: 200px;
  /* min-width: 2.52em; */
  text-overflow: ellipsis;
}

.tomged-file-item .tomged-titte-container {
  white-space: nowrap;
  overflow: hidden;
  width: 155px;
}

.tomged-file-item .firstPart,
.tomged-file-item .lastPart,
.title-card-list .firstPart,
.title-card-list .lastPart,
.grid-title .firstPart,
.grid-title .lastPart {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
}

.grid-item .firstPart,
.grid-item .lastPart {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
}

.grid-item .firstPart {
  max-width: 156px;
  /* min-width: 2.52em; */
  text-overflow: ellipsis;
}

/* details view */
.detail-file-tomged .task-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f3f3f3;
  padding: 15px 0;
}

.detail-file-tomged .task-info .icon {
  color: #74788d;
  font-size: 15px;
}

.detail-file-tomged .task-info .label {
  color: #74788d;
}

.detail-file-tomged .value {
  font-weight: 600;
}

.value-description {
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-file-tomged .value-description {
  margin-bottom: 0;
  padding-top: 11px;
  line-height: 2;
}

/* Préserve sauts de ligne, tabulations et indentations (descriptions GED, historique, etc.) */
.preserved-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-file-tomged .list-document {
  margin-top: 10px;
  margin-bottom: 0;
}

.detail-file-tomged .list-document li {
  margin: 2px 0;
  display: flex;
  align-items: center;
}

.detail-file-tomged .list-document li:first-child {
  margin: 0 0;
}

.detail-file-tomged .list-document li i {
  font-size: 15px;
  margin-right: 9px !important;
}

.weight-i {
  font-size: 20pt;
}

.grid-vertical-center td {
  align-content: center;
}

.file-word-box {
  color: #599def !important;
}

.file-excel-box {
  color: #51a830 !important;
}

.file-pdf-box {
  color: #f0463c !important;
}

.file-image {
  color: #34c38f !important;
}

.file-box {
  color: #74788d !important;
}

.folder-box {
  color: #f1b44c !important;
}

.tomged-search {
  position: relative;
  color: #aaa;
  font-size: 13px;
  margin: 0 15px;
}

.tomged-search {
  display: block;
}

.tomged-search input {
  padding: 5px;
  width: 100%;
  /* height: 32px; */
  background: #fcfcfc;
  border: 1px solid #aaa;
  /* border-radius: 5px; */
  /* box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset; */
  border-top: none;
  border-right: none;
  border-left: none;
}

.tomged-search input {
  text-indent: 20px;
}

.tomged-search .tom-search {
  position: absolute;
  top: 3px;
  left: 10px;
  font-size: 15px;
}

.tomged-search input:focus {
  outline: none;
}

.tomged-search .tom-search {
  left: auto;
  left: 4px;
}

.tree-view-menu,
.tree-view-menu ul {
  margin: 0 0 0 0;
  /* indentation */
  padding: 0;
  list-style: none;
  color: #333;
  position: relative;
  padding: 13px 0;
  padding-top: 0;
}

.tree-view-menu ul {
  margin-left: 0.5em;
}

/* (indentation/2) */

.tree-view-menu:before,
.tree-view-menu ul:before {
  content: "";
  display: block;
  width: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  border-left: 1px solid #e5e9f2;
}

ul.tree-view-menu:before {
  border-left: none;
}

.tree-view-menu li {
  margin: 0;
  padding: 0 1.5em;
  /* indentation + .5em */
  line-height: 2em;
  /* default list item's `line-height` */
  font-weight: bold;
  position: relative;
}

.tree-view-menu folder.selected {
  background-image: linear-gradient(to bottom, #e4eef5, #c0d1db);
  border-radius: 5px;
}

.tree-view-menu folder:hover {
  background-image: linear-gradient(to bottom, #e9f5e7, #c3d9bf);
  border-radius: 5px;
}

.tree-view-menu li:before {
  content: "";
  display: block;
  width: 10px;
  /* same with indentation */
  background: red;
  margin-top: -1px;
  /* border top width */
  position: absolute;
  top: 1em;
  /* (line-height/2) */
  left: 6px;
}

ul.tree-view-menu>li:before {
  border-top: none;
}

.tree-view-menu li:last-child:before {
  background: none;
  /* same with body background */
  height: auto;
  top: 1em;
  /* (line-height/2) */
  bottom: 0;
}

.circle-indentation {
  margin-left: -5px;
}

.tree-view-menu .level-menu i {
  font-size: 20px;
  margin-right: 8px;
  color: #f1b44c;
}

.tree-view-menu .level-menu {
  color: #364a63;
  width: 100%;
  display: block;
  padding: 5px 4px 3px 10px;
  background-color: #e1e1e1;
  margin-top: 0;
}

.tree-view-menu .level-menu span {
  position: relative;
  top: -2px;
}

.level-sous-menu li {
  padding: 0px 1.5em;
  font-weight: initial;
  padding-right: 0;
}

.level-sous-menu li .circle-indentation {
  margin-right: 14px;
  color: #bfbfbf;
  font-size: 8px;
}

.level-sous-menu li a {
  font-weight: inherit;
  color: #364a63;
  width: 100%;
  display: block;
  padding: 8px 5px 5px 0;
}

.level-sous-menu li a:hover {
  background-color: #f3f3f3;
}

.level-sous-menu li a.selected {
  background-color: #e4eeff;
  /* background-color: #f3f3f3; */
  font-weight: 600;
}

.level-sous-menu li a.selected .circle-indentation {
  color: #364a63;
}

.level-sous-menu {
  padding: 0 !important;
}

.title-level-sous-menu-3 .level-sous-menu {
  margin-top: 0px;
}

.title-level-sous-menu-3 {
  padding-bottom: 0 !important;
}

.send-color {
  color: #258dad !important;
}

.btn-tomged-default,
.btn-tomged-default:hover,
.btn-tomged-default:focus,
.btn-tomged-default:active {
  background-color: #f0f3f4;
  font-size: 12px;
  color: #374b64;
  outline: 0;
  border: 1px solid #374b64;
}

.btn-tomged-group {
  padding: 15px;
  padding-bottom: 0;
}

.btn-tomged-group .w-100 {
  width: 100% !important;
}

.border-0 .dx-buttongroup-wrapper .dx-buttongroup-item {
  border: none !important;
}

/* Sidenav tomged */
@supports (position: sticky) {
  .is-sticky {
    position: sticky;
    top: 1px;
    z-index: 2;
    background: #fff;
    padding-top: 1px !important;
  }
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  background-color: #ffffff;
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 50px;
  padding-bottom: 12px;
  box-shadow: 0px 0px 5px 0px #e7e7e7;
}

.sidenav .closebtn {
  position: fixed;
  top: 54px;
  right: 14px;
  font-size: 28px;
  margin-left: 50px;
  color: #333;
  z-index: 3;
}

.sidenav .closebtn-tomged {
  position: fixed;
  top: 54px;
  right: 14px;
  font-size: 28px;
  margin-left: 50px;
  background-color: transparent;
  border: none;
  color: #333;
  z-index: 3;
}

.sidenav.sidenavActive {
  width: 370px;
  transition: 0.5s;
}

.tomged-body-content.sidenavActive {
  /*right: 179px;*/
  transition: all 0.3s ease;
  left: 0;
  /* width: 66vw; */
  margin-right: 365px;
}

.title-file {
  padding: 0 12px;
  border-bottom: 1px solid #e5e9f2;
  /* position: sticky; */
  /* top: -4px; */
}

.title-file h4 {
  margin: 15px 0;
}

.title-file i {
  font-size: 28px;
  margin-right: 5px;
}

.title-file span {
  position: relative;
  top: -6px;
}

.tagged-history-item {
  position: relative;
  padding: 0 5px !important;
  margin-bottom: 3px !important;
}

.tomged-history .icon-piece.mt-3 {
  margin-top: 5px !important;
}

.tagged-history-item span i {
  font-size: 20px;
  color: #f1b44c;
  position: relative;
  top: 2px;
}

.tagged-history-item:hover {
  cursor: inherit;
}

.center-img {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 215px;
}

.center-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.center-img i {
  font-size: 70px;
  position: relative;
  top: 48px;
}

.wrapper-img {
  position: relative;
  display: block;
  height: auto;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.05);
  margin: 19px 14px;
  top: 0;
  text-align: center;
  border: 1px solid #e5e9f2;
  margin-bottom: 2px;
}

/* Preview actions bar - flexbox container */
.preview-actions-bar {
  position: absolute;
  bottom: 5px;
  right: 9px;
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  align-items: center;
}

/* Button styles inside flexbox container */
.preview-actions-bar .btn-screen-mode,
.preview-actions-bar .btn-download-mode,
.preview-actions-bar .btn-split-mode,
.preview-actions-bar .btn-new-version-mode,
.preview-actions-bar .btn-link-mode {
  position: static;
}

.btn-screen-mode,
.btn-download-mode,
.btn-split-mode,
.btn-new-version-mode,
.btn-link-mode {
  padding: 0 8px;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 3px;
}

.btn-screen-mode:hover,
.btn-download-mode:hover,
.btn-split-mode:hover,
.btn-new-version-mode:hover,
.btn-link-mode:hover {
  border: 1px solid #e7e7e7;
  background: #e7e7e7;
  border-radius: 3px;
}

.btn-screen-mode {
  position: absolute;
  bottom: 5px;
  right: 9px;
}

.btn-download-mode {
  position: absolute;
  bottom: 5px;
  right: 56px;
}

.btn-link-mode {
  position: absolute;
  bottom: 5px;
  right: 103px;
}

.btn-split-mode {
  position: absolute;
  bottom: 5px;
  right: 150px;
}

.btn-new-version-mode {
  position: absolute;
  bottom: 5px;
  right: 197px;
}

.tagged-history-item .badge {
  border: 1px solid #ef5959;
  background: #ffebeb;
}

.tagged-history-item.tag-remove {
  border: 1px solid #ef5959;
  background: #ffebeb;
}

.tagged-history-item.tag-add {
  border: 1px solid #599def;
  background: #ebf4ff;
}

.share-history {
  margin-left: 22px;
}

.share-history li {
  margin: 5px 0;
}

.btn-screen-mode i {
  font-size: 25px;
  color: #333;
}

.btn-download-mode i {
  font-size: 25px;
  color: #333;
}

.btn-split-mode i {
  font-size: 25px;
  color: #333;
}

.btn-new-version-mode i {
  font-size: 25px;
  color: #333;
}

/* Barre de progression affichée pendant le préchargement du viewer */
.preview-actions-bar .btn-screen-mode.is-prefetching {
  position: relative;
  bottom: 2px;
  right: auto;
}

.preview-action-progress {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 3px;
  border-radius: 2px;
  background: #e0e0e0;
  overflow: hidden;
}

.preview-action-progress-bar {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 2px;
  background: #599def;
  animation: previewActionProgressSlide 1s ease-in-out infinite;
}

@keyframes previewActionProgressSlide {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(250%);
  }
}

.btn-link-mode i {
  font-size: 25px;
  color: #333;
}

.header-uiData img {
  height: 62px;
  border-radius: 5px;
}

/* .header-uiData .media img{
  border-radius: 50%;
} */

.header-uiData .media {
  margin-top: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
}

.header-uiData .media-body {
  padding: 10px;
  /* padding-top: 20px; */
}

.header-uiData .media-body h5 {
  padding-left: 15px;
  margin-bottom: 0;
  font-size: 19px;
  color: #2a4f77;
  text-transform: uppercase;
  /* font-weight: inherit; */
  position: relative;
  top: 2px;
}

.header-uiData .media-body span {
  font-size: 19px;
}

.header-uiData .media-body p {
  padding-left: 16px;
  margin-bottom: 0;
  margin-top: 5px;
  font-size: 13px;
  color: #919191;
}

.font-8 {
  font-size: 8pt;
}

.toolbox-tomged {
  position: relative;
  top: -9px;
}

.toolbox-tomged .button-box {
  padding-top: 13px;
  padding-bottom: 13px;
  background: #fff;
  opacity: 1;
}

.toolbox-tomged .button-box .button-list .btn {
  margin-left: 12px;
}

.tomged-comment {
  border-top: 1px solid #e5e9f2;
  margin: 10px 0;
  padding-top: 16px;
  /* padding-bottom: 0; */
}

.tomged-comment small {
  font-size: 7pt;
  position: relative;
  top: 2px;
}

.tomged-comment-input .btn-group-comment a {
  padding: 0 5px;
  border: none;
}

.tomged-comment-input .btn-group-comment a i {
  font-size: 15px;
}

.btn-group-comment .btn-tomged-send {
  font-size: 15px;
}

.height-60 {
  height: 100px;
}

.tomged-tab {
  padding: 0 15px;
}

.tomged-tab li .nav-link {
  padding: 14px !important;
}

.tomged-tab .nav-tabs .nav-item.show .nav-link,
.tomged-tab .nav-tabs .nav-link.active {
  color: #4896e7;
  background-color: inherit;
  border-bottom: 2px solid #4896e7;
  border-top: none;
  font-weight: bold;
  border-left: none;
  border-right: none;
}

.tomged-tab .nav-tabs {
  border-bottom: 1px solid #f3f3f3;
}

.tomged-tab .nav-tabs .nav-link {
  border: none;
}

.tomged-tab .nav-item {
  border: none !important;
}

.detail-file-tomged hr {
  background-color: #afafaf;
}

.tomged-file-item:hover,
.activeFolderOrFile {
  border: 1px solid #599def;
  cursor: pointer;
  background: #ebf4ff;
}

.btn-success.text-white .dx-icon {
  color: #fff;
}

/* caroussel */
.carousel-container img {
  width: 100%;
  height: 157px !important;
  object-fit: cover;
}

.inner-carousel {
  width: 100%;
  overflow: hidden;
  margin: 13px;
  margin-bottom: 10px;
}

.track {
  display: inline-flex;
  height: 50%;
  transition: transform 0.2s ease-in-out;
}

.card-item-carousel {
  width: 152px !important;
  flex-shrink: 0;
  margin-right: 10px;
  height: 154px;
  padding-right: 0 !important;
}

.nav-button button {
  position: absolute;
  top: 190px;
  transform: translatey(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  outline: none;
  border: 1px solid #ffffff;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.3) !important;
}

.nav-button button:hover {
  background-color: #ebf4ff;
  border: 1px solid #599def;
}

.nav-button button:hover svg {
  color: #599def;
}

.nav-button .prev {
  left: 20px;
  /* display: none; */
}

.nav-button .prev-button {
  left: 20px !important;
}

.nav-button .prev {
  left: 25rem;
  /* display: none; */
}

.nav-button .prev.show {
  display: block;
}

.nav-button .next {
  right: 4px;
}

.nav-button .next.hide {
  display: none;
}

.nav-button svg {
  font-size: 20px;
  position: relative;
  top: -6px;
  left: -5px;
  color: #6b6b6b;
  font-weight: bold;
}

.model-navigator .nav-button {
  position: relative;
  width: 100%;
}

.model-navigator .nav-button .prev,
.model-navigator .nav-button .next {
  position: absolute;
  top: 7rem;
  transform: translateY(-50%);
  z-index: 2;
}

.model-navigator .nav-button .prev {
  left: 1rem;
  padding: 8px 6px !important;
}

.model-navigator .nav-button .next {
  right: 2rem;
}

.model-navigator .nav-button button {
  border-radius: 50%;
  background: #fff;
  border: 1px solid #fff;
  cursor: pointer;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
}

.filter-search {
  padding-left: 20px;
  margin-bottom: 10px;
}

.filter-search .app-search .form-control {
  border: 1px solid #b7b7b7;
  border-radius: 3px !important;
  width: 311px;
}

.filter-list {
  display: flex;
  align-items: center;
  /* margin-left: 7px; */
  margin-bottom: 10px;
}

.filter-list ul {
  margin-bottom: 0;
}

.filter-list ul li {
  margin-bottom: 0;
  margin-right: 9px;
}

.filter-list ul li span {
  font-weight: bold;
  font-size: 10px;
  color: #41404c;
}

.filter-list ul li:last-child {
  margin-right: 10px;
}

.filter-list ul li p {
  margin-bottom: 0;
}

.filter-list .tag-list {
  padding: 5px 15px 6px 15px;
  background: #42414d;
  border: 1px solid #42414d;
  border-radius: 3px;
  color: #fff;
}

.filter-list .tag-list span {
  color: #fff;
}

.filter-list .list-without-border {
  padding: 5px 28px 7px 8px;
  /* border: 1px solid #9d9d9d; */
  border: 1px solid #b7b7b7;
  border-radius: 3px;
  background: #fff;
}

.filter-list .list-without-border:hover {
  border: 1px solid #599def;
  cursor: pointer;
  background: #ebf4ff;
  border-radius: 3px;
}

.tag-list:hover {
  border: 1px solid #5b5b5b;
  cursor: pointer;
  background: #5b5b5b;
}

.tag-list i {
  font-size: 11px;
  position: relative;
  top: 1px;
  color: #ffffff;
}

.line-separator-menu {
  margin: 9px 16px;
}

.card-item-carousel-info {
  position: relative;
  padding: 9px;
  background: #f1f1f1;
  opacity: 0.8;
  left: 0;
  right: 0;
  top: -50px;
  margin-bottom: -80px;
}

.card-item-carousel-info:hover {
  cursor: pointer;
}

.card-item-carousel-info .firstPart {
  max-width: 97px;
  text-overflow: ellipsis;
}

.card-item-carousel-info .firstPart,
.card-item-carousel-info .lastPart {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
}

.card-item-carousel-info h5 {
  margin: 0;
  color: #000000;
}

.card-item-carousel-info p {
  margin: 0;
  color: #000000;
  font-size: 10px;
  margin-top: 5px;
}

.card-item-carousel-action {
  position: relative;
  padding: 9px;
  left: 0;
  right: 0;
  top: -117px;
  margin-bottom: -80px;
  text-align: end;
  background: #3333339c;
  height: 101px;
  display: none;
}

.card-item-carousel:hover .card-item-carousel-action {
  position: relative;
  padding: 9px;
  left: 0;
  right: 0;
  top: -130px;
  margin-bottom: -80px;
  text-align: end;
  background: rgb(51 51 51 / 61%);
  height: 111px;
  display: block;
  cursor: pointer;
}

.card-item-carousel-action a {
  margin-right: 5px;
  border-radius: 3px !important;
  padding: 0 5px;
}

.card-item-carousel-action a i {
  font-size: 17px;
  color: #364a63;
}

.card-item-carousel-action a:last-child {
  margin-right: 0;
}

/* TAGS */
.tomged-tags {
  /* padding: 0 15px; */
  overflow-x: hidden;
  max-height: 230px;
  min-height: 15px;
}

.tomged-tags ul {
  margin-bottom: 0;
}

.tomged-tags h3 {
  margin-top: 0;
  margin-bottom: 0;
}

.btn-tag {
  padding: 5px 5px;
  border-radius: 15px;
  margin-right: 5px;
  margin-bottom: 5px;
  background: #f1f1f1;
  color: #364a63;
  font-size: 10px;
  padding-right: 5px;
  padding-left: 7px;
}

/* .btn-tag span {
  border: 1px solid #ccc;
  top: 0px !important;
  position: relative;
  background: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-left: 5px;
} */

.btn-tag span {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  margin-left: 5px;

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

  padding: 0;
  line-height: 1;
}

.btn-tag span i {
  font-size: 9px;
  line-height: 1;
}

.btn .badge-tag {
  position: relative;
  top: 0;
}

.plus-info.btn-tag:hover {
  border: 1px solid #599def;
  background: #ebf4ff;
}

.plus-info.btn-tag:hover span {
  background: #599def;
  border: 1px solid #599def;
}

.plus-info.btn-tag:hover span i {
  color: #fff !important;
}

.close-danger.btn-tag:hover {
  border: 1px solid #ef5959;
  background: #ffebeb;
}

.close-danger.btn-tag:hover span {
  background: #ef5959;
  border: 1px solid #ef5959;
}

.close-danger.btn-tag:hover span i {
  color: #fff !important;
}

/* .btn-tag span i {
  position: relative;
  left: -2px;
  top: 0;
} */

.search-tag {
  margin-bottom: 10px;
}

.tomged-tags .app-search {
  border: 1px solid #b7b7b7;
  border-radius: 3px;
  /* height: 20px; */
}

.search-tag .app-search .form-control,
.add-tag .app-search .form-control {
  padding: 0 8px;
  padding-left: 23px;
  height: 26px !important;
  border-radius: 3px !important;
  font-size: 11px;
}

.search-tag .app-search span.search-icon,
.add-tag .app-search span.search-icon {
  top: -6px;
  font-size: 14px;
  left: 5px;
}

.line-separator-title {
  margin: 16px 8px;
  margin-bottom: 2px;
  background-color: #a1a1a1;
}

.CustomHeader.text-dark .dx-toolbar-item-content {
  color: #333 !important;
}

.position-fixed-btn-bottom {
  position: fixed;
  right: 28px;
  bottom: 82px;
}

.input-formule .value-formule {
  padding: 5px;
  border: 1px solid #c1c1c1;
  height: 26px;
  font-size: 11px;
  background: #f0f0f0;
  font-weight: bold;
}

.add-new-file {
  position: relative;
  bottom: 5em;
  padding: 18px;
  text-align: center;
  padding-top: 0;
  line-height: 15px;
  font-weight: initial;
  color: #ffffff;
  font-size: 11px;
}

.object-fill {
  object-fit: contain !important;
}

.icon-add-new-file i {
  font-size: 50px;
  color: #ffffff;
  position: absolute;
  left: 54px;
  padding-top: 50px;
  transform: translateX(10px);
}

.img-zoom:hover i {
  color: #002353;
}

.title-welcome {
  font-size: 18px;
  color: #44434f;
  font-weight: bold;
  margin-bottom: 7px;
  padding-top: 5px;
}

.mdi-icon-filter {
  font-size: 20px;
  color: #2a4f77;
  position: absolute;
  /* top: 0px; */
  margin-left: 5px;
  margin-top: -6px;
}

.badge-tomged-action-non-fait {
  color: #6a6a6a !important;
  background-color: #f0f0f0 !important;
  display: flex;
  padding: 4px 8px 4px 4px;
  border-radius: 4px;
  align-items: center;
}

.badge-tomged-action-fait {
  color: #006a1c !important;
  background-color: #9fffb8 !important;
  display: flex;
  padding: 4px 8px 4px 4px;
  align-items: center;
  border-radius: 4px;
}

.bg-light-grey {
  background-color: #afafaf !important;
}

.text-bg-primary {
  color: #fff !important;
  background-color: #0d6efd !important;
}

.text-bg-secondary {
  color: #fff !important;
  background-color: #6c757d !important;
}

.text-bg-success {
  color: #fff !important;
  background-color: #198754 !important;
}

.text-bg-danger {
  color: #fff !important;
  background-color: #dc3545 !important;
}

.text-bg-warning {
  color: #fff !important;
  background-color: #ffc107 !important;
}

.text-bg-info {
  color: #fff !important;
  background-color: #0dcaf0 !important;
}

.text-bg-light {
  color: #000 !important;
  background-color: #f8f9fa !important;
}

.text-bg-dark {
  color: #fff !important;
  background-color: #212529 !important;
}

.scroll-popup {
  overflow-y: auto;
  overflow-x: hidden !important;
  max-height: 500px;
  min-height: 500px;
}

.btn-com-tool {
  background: none !important;
  border: none !important;
  font-size: 18px !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
  color: #3b3b3b;
}

.btn-com-tool:hover {
  background: #ededed !important;
}

.btn-default-tool {
  background: white !important;
  border: 1px solid #d1d1d1 !important;
  font-size: 18px !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
  color: #3b3b3b;
}

.btn-default-tool i {
  font-size: 17px;
}

.btn-default-tool:hover,
.btn-default-tool:focus,
.btn-default-tool:after,
.btn-default-tool:active {
  background: #ededed !important;
}

.btn-standard {
  background: white !important;
  border: 1px solid #d1d1d1 !important;
  font-size: 8pt !important;
  border-radius: 3px !important;
  padding: 4px 7px !important;
  color: #3b3b3b;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.btn-standard i {
  font-size: 17px;
}

.btn-standard:hover,
.btn-standard:focus,
.btn-standard:after,
.btn-standard:active {
  background: #ededed !important;
}

.btn-add-tools {
  background: #6393c8 !important;
  border: 1px solid #6393c8 !important;
  font-size: 18px !important;
  border-radius: 3px !important;
  padding: 2px 7px !important;
  color: #ffffff;
}

.btn-add-tools:hover,
.btn-add-tools:focus,
.btn-add-tools:after,
.btn-add-tools:active {
  background: #5179a3 !important;
  color: #ffffff !important;
}

.btn-com-cancel {
  border-radius: 3px !important;
  padding: 8px 15px !important;
  background: #ffffff;
  border: 1px solid #dddddd;
  color: #313131;
  display: flex;
  align-items: center;
  font-size: 8pt !important;
  font-weight: bold !important;
}

.btn-com-cancel:hover,
.btn-com-cancel:focus,
.btn-com-cancel:active {
  background: #f5f5f5 !important;
  border: 1px solid #dddddd !important;
  color: #313131 !important;
  box-shadow: none !important;
}

.btn-com-cancel i {
  font-size: 17px;
}

.btn-com-save {
  font-size: 8pt !important;
  font-weight: bold !important;
  border-radius: 3px !important;
  padding: 8px 15px !important;
  background: #ffffff;
  border: 1px solid #52779f;
  color: #52779f;
  display: flex;
  align-items: center;
}

.btn-com-save:hover,
.btn-com-save:focus,
.btn-com-save:active {
  background: #52779f !important;
  border: 1px solid #52779f !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-com-save i {
  font-size: 16px;
  transform: rotate(323deg);
  margin-top: -8px;
}

/* .btn-com-save:hover {
  background: #27ae60 !important;
  color: white !important;
} */

.card-coms {
  border-bottom: 1px solid #f5f5f5;
  border-radius: 0;
  background: white;
  padding-left: 15px;
  padding-top: 5px;
  margin-bottom: 5px;
}

/* .card-coms {
  background: white;
  padding-left: 19px;
  padding-top: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 2px 5px #e1e1e1;
  border-radius: 10px;
} */

.coms-item .btn.disabled,
.coms-item .btn:disabled,
.coms-item fieldset:disabled .btn {
  pointer-events: none !important;
  opacity: 0.35 !important;
}

.coms-item {
  border-bottom: 1px solid #f5f5f5;
}

/* .my-comment {
  border-left: 4px solid #007bff !important;
  background-color: #ffffff !important;
}

.other-comment {
  border-left: 4px solid #e9ecef !important;
}

.my-comment .card-body {
  background-color: rgba(0, 123, 255, 0.02);
} */

.btn-com-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-com-tool:disabled:hover {
  opacity: 0.4;
}

.btn-standard:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-standard:disabled:hover {
  opacity: 0.4;
}

.btn-default-tool:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-default-tool:disabled:hover {
  opacity: 0.4;
}

.btn-add-tools:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-add-tools:disabled:hover {
  opacity: 0.4;
}

.btn-add-coms {
  background-color: #ffffff;
  border: none;
  box-shadow: none !important;
  font-size: 12px;
  padding: 10px 10px;
  border-radius: 3px;
}

.btn-add-coms:hover {
  background-color: #d7edff;
  color: white !important;
}

.btn-add-coms i {
  font-size: 14px;
}

.time-coms {
  background: #d5e9ff94;
  padding: 1px 5px;
  border-radius: 3px;
  color: #509de1;
}

.comment-tooltip {
  position: relative;
  cursor: pointer;
}

/* Tooltip commentaire styles */

.comment-tooltip[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 0px);
  left: 45%;
  transform: translateX(-50%);
  background: rgb(39 41 45 / 91%);
  color: #fff;
  padding: 5px 10px;
  font-size: 9pt;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
  z-index: 9999;
  font-family: Nunito, sans-serif;
}

.comment-tooltip[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.comment-tooltip[data-tooltip-top]::before {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%);
}

.comment-tooltip i {
  font-size: 17px;
}

.comment-tooltip .tom-navigator {
  font-size: 20px;
}

.comment-tooltip .dx-icon-undo {
  font-size: 16px !important;
}

/* Tooltip styles */


.btn-undo-no-text {
  position: relative;
  border: none !important;
  background-color: initial !important;
  top: -3px;
}

.btn-undo-no-text:hover {
  background-color: #f0f0f0 !important;
}

.btn-undo-no-text .dx-button-content {
  padding: 4px !important;
  border: none !important;
}

.no-bg,
.no-bg .icon {
  background-color: initial !important;
}

.comment-in-btn {
  bottom: 9px;
  right: 16px;
  z-index: 10;
  padding: 2px 4px;
  justify-content: flex-end;
}

/* .comment-items {
  background: #ffffff;
  padding: 2px 5px;
  color: #575757;
  width: 160px;
  border: 1px solid #c8c8c8;
  border-radius: 15px;
  font-size: 9px;
} */

.comment-items {
  background: #ffffff;
  padding: 2px 5px;
  color: #a18000;
  width: 160px;
  border: 1px solid #dcb41a;
  border-radius: 15px;
  font-size: 9px;
}

.scroll-popup::-webkit-scrollbar {
  width: 6px;
}

.scroll-popup::-webkit-scrollbar-track {
  background: #ffffff;
  border-radius: 0;
  -webkit-border-radius: 0;
}

.scroll-popup::-webkit-scrollbar-thumb {
  background-color: #e8e8e8 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  cursor: pointer;
  border-radius: 15px;
}

.scroll-popup::-webkit-scrollbar-thumb:hover {
  background-color: #cacbcd !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  cursor: pointer;
  border-radius: 15px;
}

.d-none-title .subtitle {
  display: none;
}

/*TomGED SKELETON */
.skeleton-wrapper-carousel {
  display: flex;
  flex-direction: column;
  width: 152px;
}

.skeleton-image-carousel {
  width: 100%;
  height: 157px;
  background: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite linear;
}

.skeleton-text-carousel {
  width: 100%;
  height: 20px;
  background: #e0e0e0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite linear;
}

.skeleton-text-carousel.short {
  width: 60%;
  margin-bottom: 5px
}

.skeleton-content-carousel {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  top: -63px;
  padding: 9px;
  margin-bottom: -66px;
}

.skeleton-wrapper-body-carousel {
  display: grid;
  gap: 10px;
  grid-template-columns: 0.5fr 1fr;
}

.skeleton-wrapper-body-carousel-single .skeleton-wrapper-carousel {
  width: 100%;
}

.skeleton-wrapper-body-carousel-single .skeleton-image-carousel {
  height: 215px;
}


@keyframes shimmer {
  0% {
    background-position: 100%;
  }

  100% {
    background-position: -100%;
  }
}

.skeleton-image-carousel,
.skeleton-text-carousel {
  background: linear-gradient(90deg,
      #e0e0e0 25%,
      #f5f5f5 50%,
      #e0e0e0 75%);
  background-size: 200% 100%;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40vh;
  color: #999999;
  font-size: 17px;
  text-align: center;
}

/* Tooltip bouton */

.wrappers .tooltip-b {
  bottom: inherit !important;
  top: 100% !important;
}

.wrappers .tooltip-b::before {
  top: -3px !important;
}

.no-text .dx-button-text,
.no-text .dx-icon.dx-icon-spindown {
  display: none !important;
}

.no-text .dx-button-content .dx-icon {
  margin-right: 0 !important;
}

.no-text .dx-button-content {
  padding: 2px 2px 0 2px !important;
}

.no-text,
.no-text .dx-button.dx-button-mode-outlined {
  border: none !important;
  background-color: initial !important;
}


.no-text:hover .dx-button-content {
  background-color: #fff !important;
  padding: 2px 2px 0 2px !important;
}

.no-text .dx-button-content .dx-icon.tom {
  font-size: 11pt !important;
  color: #838383;
}

.no-text {
  display: none !important;
}

.level-sous-menu li a:hover .dx-dropdownbutton-has-arrow,
.level-sous-menu li a:focus .dx-dropdownbutton-has-arrow,
.level-sous-menu li a:active .dx-dropdownbutton-has-arrow,
.level-sous-menu li a.selected .dx-dropdownbutton-has-arrow {
  display: block !important;
}

.bookshelf-size {
  font-size: 18px;
  position: relative;
  top: 4px;
}

.bookshelf-file-size {
  color: #8c8c8c !important;
  position: relative;
  top: 2px;
  font-size: 14px;
}

.unread {
  border: 2px solid #6393c8;
  /* background: #ebf1ff; */
}

.unread-badge {
  background: #ebf4ff;
  position: absolute;
  top: 22px;
  left: 35px;
  width: 12px;
  height: 12px;
  background-color: #0089ca;
  border-radius: 50%;
  border: 2px solid #0089ca;
  transform: translate(50%, -50%);
}

.unread-badge-validation {
  /* background: #ebf4ff; */
  position: relative;
  /* top: 0; */
  /* left: 0; */
  width: 12px;
  height: 12px;
  background-color: #0089ca;
  border-radius: 50%;
  border: 6px solid #0089ca;
  transform: translate(-89%, -97%);
  margin-right: -12px;
}

.unread-grid .firstPart .lastPart,
.unread-grid span,
.unread-grid .seats-tomged i {
  font-weight: bold;
  color: #333;
}

.unread-grid .dx-datagrid-rowsview .dx-datagrid-content tbody tr {
  background: #f2f5f9;
}

.badge-unread-grid {
  position: relative;
  margin-right: -10px;
  width: 10px;
  height: 10px;
  background-color: #0089ca;
  border-radius: 50%;
  border: 2px solid #0089ca;
  transform: translate(-156%, -52%);
}

/* xlsx export icon */

.header-panel-datagrid .dx-button-content .dx-icon.dx-icon-xlsxfile,
.header-panel-datagrid .dx-button-content .dx-icon.dx-icon-export,
.header-panel-datagrid .dx-button-content .dx-icon.dx-icon-spindown.dx-icon-right {
  color: #fff !important;
}

.header-panel-datagrid .dx-button-content:has(.dx-icon.dx-icon-xlsxfile),
.header-panel-datagrid .dx-button-content:has(.dx-icon.dx-icon-export) {
  background: #27AE60 !important;
  color: #fff !important;
  border-radius: 0px !important;
}

.dx-button-content:has(.dx-icon.dx-icon-xlsxfile),
.dx-button-content:has(.dx-icon.dx-icon-export) {
  background: #27AE60 !important;
  color: #fff !important;
  border-radius: 0px !important;
  border-color: #27AE60 !important;
}

.dx-gridbase-container .dx-datagrid-header-panel .dx-button-mode-contained {
  border-color: transparent !important;
}

/* xlsx export icon */

.full-width {
  width: 100% !important;
}

.value-index {
  border: 1px solid #3799ff;
  border-radius: 5px;
  padding: 4px 5px;
}

.value-index:hover {
  border: 1px solid #1a73e8;
  background-color: #f5f5f5;
}

.tomged-file-item .dx-button-has-icon .dx-button-content {
  padding: 2px !important;
}

.tomged-file-item .dx-button-has-icon .dx-icon {
  font-size: 13px !important;
}

.unit-numb {
  background: #ffffff;
  border-radius: 0;
}

.bl-text {
  color: #606060;
}

.bg-default {
  background-color: #ebedee !important;
}

.modal-access-users .table-responsive table {
  color: #333 !important;
}

.toolbox-container {
  margin-top: -1em;
}

.toolbox-wrapper {
  margin-top: 6em;
}

/* Subtitle Info Tooltip */
.subtitle-info-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: opacity 0.2s ease;
}


.subtitle-info-tooltip i {
  font-size: 18px;
  transition: color 0.2s ease;
  position: relative;
  top: -3px;
}

.subtitle-info-tooltip:hover i {
  color: #2a4f77;
}

.subtitle-info-tooltip[data-tooltip]:before,
.subtitle-info-tooltip[data-tooltip]:after {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Tooltip content */
.subtitle-info-tooltip[data-tooltip]:before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 115%;
  right: 0;
  transform: translateX(0);
  padding: 8px 12px;
  min-width: 225px;
  max-width: 300px;
  background: rgb(39 41 45 / 91%);
  color: #ffffff;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
  z-index: 1000;
}


/* Show tooltip on hover */
.subtitle-info-tooltip[data-tooltip]:hover:before,
.subtitle-info-tooltip[data-tooltip]:hover:after {
  visibility: visible;
  opacity: 1;
}

.sidenavActive .grid-title .firstPart {
  max-width: 135px;
  text-overflow: ellipsis;
}

/* ========================================
   OTP (code sécurité)
   ======================================== */
.auth-page {
  --auth-gradient-from: #d1e8ff;
  --auth-gradient-to: #a8d4ff;
  --auth-card-bg: #f8fafc;
  --auth-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --auth-input-border: #d9d9d9;
  --auth-primary: #4285f4;
  --auth-primary-hover: #3367d6;
}

.auth-otp-label {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.4;
  text-align: center;
}

.auth-otp,
.auth-form .auth-otp {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0.25rem 0 0.25rem;
  padding: 0;
}

/* Petit espace visuel entre les groupes 3-3 pour un code à 6 chiffres */
.auth-otp>input:nth-child(3) {
  margin-right: 0.625rem;
}

input.auth-otp-cell,
.auth-form input.auth-otp-cell {
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
  appearance: none !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 2.875rem !important;
  height: 3.25rem !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--auth-input-border) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  font-family: inherit;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  text-align: center !important;
  color: #1a1a1a !important;
  caret-color: var(--auth-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease;
}

input.auth-otp-cell::-webkit-outer-spin-button,
input.auth-otp-cell::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.auth-otp-cell::placeholder {
  color: transparent;
}

input.auth-otp-cell:hover:not(:disabled) {
  border-color: #b8c8df !important;
}

input.auth-otp-cell:focus {
  outline: none !important;
  border-color: var(--auth-primary) !important;
  box-shadow:
    0 0 0 3px rgba(66, 133, 244, 0.18),
    0 1px 2px rgba(15, 23, 42, 0.06) !important;
  background: #ffffff !important;
  transform: translateY(-1px);
}

input.auth-otp-cell:disabled {
  background: #f5f5f5 !important;
  color: #8e8e8e !important;
  cursor: not-allowed;
  opacity: 0.85;
  box-shadow: none;
}

input.auth-otp-cell-filled {
  border-color: var(--auth-primary) !important;
  background: #f4f8ff !important;
  color: #1a1a1a !important;
}

@media (max-width: 480px) {

  input.auth-otp-cell,
  .auth-form input.auth-otp-cell {
    width: 2.375rem !important;
    height: 2.875rem !important;
    font-size: 1.0625rem !important;
    border-radius: 9px !important;
  }

  .auth-otp,
  .auth-form .auth-otp {
    gap: 0.375rem;
  }

  .auth-otp>input:nth-child(3) {
    margin-right: 0.5rem;
  }
}