:root {
  --black: #000;
  --dark-grey: #161616;
  --medium-grey: #8d8d8d;
  --blue: #316ca0;
  --green: #37a249;
  /* --blue: #03369d; */
  --white: #fff;
  --light-grey: #cccccc;
  --offline: #ad1b00;
  --online: #008805;
  --vlight-grey: #eff0f2;
  --king-blue: #2580ec;
  --error: #f05e5e;
}
#appLoader {
  z-index: 99;
  width: 100%;
  text-align: center;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
/* footer */
footer {
  background-color: var(--black);
  position: inherit;
  margin-top: 0;
}

.listing-footer {
  position: fixed;
}

/* _________ DASHBOARD PAGE _________ */
/* header */
.logo.medium {
  width: 300px;
  height: 100px;
}

/* top bar */
.topbar.mob {
  display: none;
}

.topbar {
  background-color: var(--black);
}

.nav-topbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem 0;
  color: var(--white);
  margin-bottom: 0;
}

.topbar a {
  background-color: var(--white);
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--black);
  font-weight: 600;
  letter-spacing: 1.7px;
  padding: 1rem 1.5rem;
  display: inline-block;
  text-align: center;
}

.topbar img {
  width: 25px;
  height: 25px;
}

.topbar span {
  margin-left: 1.5rem;
  vertical-align: middle;
}

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

.vehicle p:first-child {
  margin-right: 1rem;
}

.topbar .truck,
.topbar .immat {
  font-size: 2.4rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0;
}

/* dashboard section */
.dashboard {
  background: var(--blue);
  background: rgb(0, 0, 0);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgb(46, 100, 148) 19%,
    rgba(46, 100, 148, 1) 81%,
    rgba(0, 0, 0, 1) 100%
  );
  /* background: rgb(0, 20, 103); */
  /* background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(31, 74, 119, 1) 30%,
    rgba(28, 66, 105, 1) 80%,
    rgba(0, 0, 0, 1) 100%
  ); */
  padding-bottom: 1rem;
}

.dashboard-nav {
  padding: 2rem 0;
}

.title-dashboard {
  text-align: center;
  color: var(--white);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.6rem;
  padding-bottom: 1.2rem;
}

.medium-title {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--white);
  background-color: inherit;
  border: none;
}

/* -- button preview next-- */
.grpe-info {
  display: flex;
  flex-direction: row;
}

.arrow {
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(119, 129, 149, 1) 100%);
  font-size: 1.1rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  padding: 0.5rem 1.1rem;
  border-radius: 1rem;
}

.btn:disabled,
.btn.disabled {
  background: rgb(176, 176, 176);
  background: linear-gradient(180deg, rgba(176, 176, 176, 1) 0%, rgba(84, 84, 84, 1) 100%);
  pointer-events: none;
}

.preview i {
  margin-right: 1rem;
}

.preview {
  margin-left: 3rem;
}

.next i {
  margin-left: 1rem;
}

.arrow span,
.arrow {
  vertical-align: middle;
}

/* -- dropdown button -- */
.info-dropdown {
  padding: 1rem 2rem;
  background-color: var(--white);
  min-width: 23rem;
  margin: 0 1rem;
}

.txt-drop,
.dropdown-item {
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--black);
  font-weight: 600;
  text-align: left;
}

.dropdown-item {
  padding: 1.3rem 2rem;
}

.info-dropdown i {
  position: absolute;
  right: 0;
  font-size: 2.5rem;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(119, 129, 149, 1) 0%, rgba(0, 0, 0, 1) 100%);
  margin-top: -11.5px;
  padding: 1rem;
  color: var(--white);
  font-size: 2.3rem;
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: none;
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  background-color: transparent;
  border: none;
}

.arrow:hover {
  color: var(--white);
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgba(119, 129, 149, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

/* -- dropdown open -- */
.info-dropdown .dropdown-menu.show {
  min-width: 23rem;
  left: 0 !important;
  top: 4.1rem !important;
  border-radius: 0;
  padding: 0;
  margin: 0;
  border: none;
  transform: none !important;
  max-height: 39rem;
  overflow: auto;
}

.add-group span {
  margin-left: 15px;
}

.add-group {
  font-size: 1.2rem !important;
  background-color: var(--vlight-grey);
  color: var(--blue) !important;
  transition: 0.3s ease-in-out;
}

.add-group:hover {
  background-color: var(--king-blue);
  color: var(--white) !important;
}

.add-group:hover i {
  color: var(--white);
}

.add-group i {
  color: var(--blue);
  font-size: 1.6rem;
  background: none;
  padding: 1.3rem;
  left: 0;
  transition: 0.3s ease-in-out;
}

.dropdown-divider {
  margin: 0 !important;
  border-top: 1px solid var(--king-blue);
}

.dropdown-header {
  font-size: 1.4rem;
  font-weight: 600;
  padding: 1.3rem 2rem;
}
/* -- general button -- */
.blue-btn {
  background-color: var(--king-blue);
  font-size: 1.1rem;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  padding: 1.3rem 2.4rem;
  border-radius: 1rem;
}

.blue-btn:hover {
  color: var(--white);
}

/* -- toggl button -- */
.diag-btn {
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.2rem;
  font-size: 1.6rem;
  margin-left: 7rem;
  margin-right: 2rem;
}

.toggle.btn {
  min-width: 7rem !important;
  min-height: 3.3rem !important;
  border-radius: 5rem !important;
}

.btn.btn-primary.toggle-on {
  background: rgb(196, 199, 205);
  background: linear-gradient(180deg, rgba(196, 199, 205, 1) 0%, rgba(35, 150, 46, 1) 100%);
}

.btn {
  border: none;
}

.toggle-handle {
  width: 22px !important;
  height: 22px !important;
  background-color: var(--white);
  border-radius: 5rem !important;
  left: -16px;
  top: 5px;
}

.toggle-btn i {
  font-size: 2rem;
}

.btn.btn-light.toggle-off {
  background: rgb(196, 199, 205);
  background: linear-gradient(180deg, rgba(196, 199, 205, 1) 0%, rgba(178, 40, 42, 1) 100%);
  color: transparent;
}

.btn.btn-light.toggle-off:before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: var(--white);
  border-radius: 5rem;
  left: 5px;
  top: 5px;
}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle {
  color: transparent;
}

.fa-power-off:before {
  left: 11px;
  top: 6px;
  position: absolute;
}

/* -- left side -- */
/* -- jauge -- */
.unit {
  font-size: 1.2rem;
  color: var(--white);
  font-weight: 700;
  margin-top: -0.5rem;
  text-transform: uppercase;
}

.j_value {
  margin-top: -1rem;
  font-size: 2rem !important;
}

.jauge_value p {
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  margin-bottom: 0;
}

.jauge_value {
  padding-top: 1rem;
}

.jauge_pic {
  text-align: center;
}

.jauge {
  max-width: 170px;
  height: auto;
  position: relative;
}

.aiguille-small {
  position: absolute;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 70px;
}

.big .jauge_value {
  padding-top: 2rem;
}

.big {
  max-width: 285px;
  margin: 0 auto;
}

.small {
  max-width: 170px;
  margin: 0 auto;
  padding-top: 6rem;
}

.txt-jauge {
  max-width: 285px;
  margin: 0 auto;
}

.big .jauge_value p {
  color: var(--white);
  font-size: 1.6rem;
}

.big .j_value {
  margin-top: -2rem;
  font-size: 4rem !important;
}

.big .unit {
  font-size: 2rem;
  margin-top: -1rem;
}

.jauge-big {
  max-width: 285px;
  height: auto;
  position: relative;
}

.aiguille-big {
  position: absolute;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 128px;
}

.jauge-section .row:last-child {
  margin-bottom: 3rem;
}

/* -- blue container -- */
.dashboard_elements {
  background: rgba(0, 38, 73, 0.575);
  /* background: linear-gradient(180deg, var(--blue) 10%, rgb(1, 73, 141) 50%, var(--blue) 90%); */
  /* background: rgb(4, 92, 115);
  background: linear-gradient(180deg, rgba(4, 92, 115, 1) 0%, rgba(0, 42, 46, 1) 50%); */
  border-radius: 4rem;
  border: 3px solid var(--medium-grey);
}

.left-side .dashboard_elements {
  padding: 4rem 3rem;
}

.name_elements {
  color: var(--white);
  text-transform: uppercase;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  font-size: 1.3rem;
  line-height: 1.3;
}

.left-side .name_elements {
  width: 10rem;
}

.name_elements.icon {
  margin-left: 1.5rem;
}

.valor_elements,
.actif_elements {
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 175px;
  padding: 0.5rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.4rem;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0px 9px 20px 1px rgba(255, 255, 255, 0.45);
  -moz-box-shadow: 0px 9px 20px 1px rgba(255, 255, 255, 0.45);
  box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.4);
  border: none;
  max-height: 3.5rem;
}

.valor_elements.clock {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: -1rem;
}

.dashboard .actif_elements {
  width: 30px;
  height: 25px;
  font-size: 1.7rem;
}

.dashboard .base {
  background-color: var(--white);
}

.dashboard .actif_elements.actif {
  background-color: var(--online);
  color: var(--white);
}

.dashboard .actif_elements.inactif {
  background-color: var(--offline);
  color: var(--white);
}

.dashboard .actif_elements.notavailable {
  background-color: var(--medium-grey);
  color: var(--white);
}

.dashboard .actif_elements {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -- right side -- */
.gradient {
  height: 3px;
  background: rgb(3, 54, 157);
  background: linear-gradient(
    90deg,
    rgba(3, 54, 157, 1) 0%,
    rgba(3, 54, 157, 0) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(3, 54, 157, 0) 100%
  );
  width: 100%;
}

.right-side .name_elements {
  color: var(--white);
  text-transform: uppercase;
  font-size: 1.3rem;
  line-height: 1.3;
  vertical-align: middle;
}

.right-side .dashboard_elements {
  padding: 3rem;
}

/* -- progress bar -- */
.wrapper > img {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.progress {
  border-radius: 0;
  height: 22px;
  background-color: rgb(255 255 255 / 0.3);
  overflow: visible;
}

.progress-bar {
  border-radius: 0px;
  padding: 5px;
  background-color: var(--king-blue);
  -webkit-box-shadow: 0px 0px 6px 1px rgba(70, 129, 255, 1) !important;
  -moz-box-shadow: 0px 0px 6px 1px rgba(70, 129, 255, 1) !important;
  box-shadow: 0px 0px 6px 1px rgba(70, 129, 255, 1) !important;
}

.progress-bar span {
  font-size: 1.1rem;
}

/* -- popup carto -- */
/* .modal-footer {
  display: none !important;
} */

.modal-header h5 {
  font-size: 1.4rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.7px !important;
  font-weight: 600 !important;
}

.modal-header img {
  width: 25px;
  height: 25px;
  margin-right: 15px;
}

.modal-body {
  padding: 0 !important;
}

.modal-header {
  padding: 1.5rem;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  font-size: 14px;
}

/* _________ END DASHBOARD PAGE _________ */

/* _________ FULL-DASHBOARD PAGE _________ */
.cta-back {
  margin-bottom: 5rem;
}

.full-dashboard {
  padding-bottom: 10rem;
}

.full-dashboard .dashboard-nav {
  padding-bottom: 12rem;
}

.name_elements.progress_bar {
  margin: 0;
}

.full-dashboard .name_elements {
  max-width: 19rem;
}

#lblPer1 {
  margin-bottom: 0;
}
#lblPer1 label {
  margin-bottom: 0;
}

#diagnosticRender {
  margin-top: 15px;
}

/* _________ END FULL-DASHBOARD PAGE _________ */
/* .... RESPONSIVE .... */
/* _________ END DASHBOARD PAGE _________ */

/*________________START HISTORY-DASHBOARD PAGE________________*/
.datetimeInput {
  padding: 6px;
  margin: 5px;
}

#historyToggle {
  padding: 6px;
  margin: 5px;
}

#playbackCollapseButton {
  color: var(--black);
  font-weight: bold;
}

#playbackTimeline {
  /* display: flex;
  justify-content: center; */
  color: var(--white);
  /* font-size: 20px; */
  margin-bottom: 4px;
  /* background-color: var(--white); */
  /* text-decoration: none; */
}

.playbackControlButtons {
  text-align: center;
}

.playbackControl {
  font-size: 20px;
  /* margin: 0 10px; */
}

.datetimeControl {
  background-color: var(--white);
  color: var(--black);
  font-size: 12px;
  line-height: 2.5;
  padding: 0.375rem 0.75rem;
  font-weight: bold;
}

#playbackMenu {
  position: fixed;
  bottom: 4%;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
}

#sliderContainer {
  width: 100%;
}

/* The slider itself */
.slider {
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 10px; /* Specified height */
  border-radius: 10px;
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  border-radius: 25px;
  border: 3px solid var(--white);
  background: var(--black); /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  border-radius: 25px;
  border: 3px solid var(--white);
  background: var(--black); /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/*________________END HISTORY-DASHBOARD PAGE________________*/

@media (max-width: 1785px) {
  /* .global-grpe-info,
  .diag-col {
    flex: 0 0 100%;
  } */

  .dashboard > div {
    width: 100% !important;
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .valor_elements,
  .actif_elements,
  .name_elements.icon {
    font-size: 1.2rem;
  }

  .name_elements.icon {
    margin-left: 0.7rem;
  }

  .dashboard_elements img {
    width: 20px;
    height: 20px;
  }

  .valor_elements {
    width: auto;
  }
}
@media (max-width: 1199.98px) {
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  /* .dashboard-nav .global-grpe-info {
    margin-bottom: 4rem;
    justify-content: space-between;
  } */
  .topbar a {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
  }
  .diag-col {
    justify-content: space-between !important;
  }

  .diag-btn {
    margin-left: 0;
  }

  .topbar .truck,
  .topbar .immat {
    font-size: 2rem;
  }

  /* dashboard */
  .left-side,
  .right-side {
    margin-bottom: 5rem;
  }

  .value {
    display: flex;
    justify-content: flex-end !important;
  }

  .title-dashboard {
    margin-top: 2rem;
  }

  .dashboard_elements {
    padding: 2.5rem 3rem 2rem 3rem !important;
  }

  .valor_elements {
    width: 175px;
  }
}

@media (max-width: 991.98px) {
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  .arrow {
    font-size: 1.4rem;
  }
  .topbar a {
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
  }
  .info-dropdown,
  .info-dropdown .dropdown-menu.show {
    max-width: 20rem;
  }

  .info-dropdown i {
    font-size: 2.3rem;
  }

  .add-group i {
    font-size: 1.6rem !important;
  }

  .vehicle {
    flex-direction: column;
  }

  .vehicle p:first-child {
    margin-right: 0;
  }
}

@media (max-width: 950px) {
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  .topbar a {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .topbar img {
    margin: auto;
    margin-bottom: 0.5rem;
  }

  .topbar span {
    margin-left: 0;
  }
}

@media (max-width: 865px) {
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  /* .dashboard-nav .global-grpe-info {
    flex-direction: column !important;
  } */

  /* .global-grpe-info span {
    margin-bottom: 2rem;
  } */

  .grpe-info {
    padding: 0;
  }

  .arrow.preview {
    margin-left: 0;
  }
}

@media (max-width: 767.98px) {
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  .diag-col {
    flex-direction: column;
    padding-right: 1rem;
    padding-left: 1rem !important;
  }

  .blue-btn {
    margin-bottom: 3rem;
    font-size: 1.3rem;
  }

  .dashboard .dashboard-nav {
    padding-bottom: 9rem;
  }

  .dashboard-nav .global-grpe-info {
    flex-direction: column !important;
  }

  .dashboard-nav .global-grpe-info span {
    margin-bottom: 2rem;
  }

  .preview {
    margin-left: 0;
  }

  .diag-btn {
    font-size: 1.3rem;
  }

  .diag .toggle {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .dashboard .dashboard-nav {
    padding-top: 1rem;
  }

  .topbar {
    display: none;
  }

  .topbar.mob {
    display: block;
  }

  .vehicle {
    flex-direction: row;
    margin-bottom: 1rem;
  }

  .topbar a {
    flex-direction: row;
    align-items: center;
  }

  .topbar img {
    margin: 0;
  }

  .topbar span {
    margin-left: 1.5rem;
  }

  .histo {
    padding-right: 1.5rem !important;
  }

  .carto {
    padding-left: 1.5rem !important;
  }

  .vehicle p:first-child {
    margin-right: 1rem;
  }

  /* full-dashboard */
  .dashboard {
    padding-bottom: 0;
  }

  .name_elements {
    font-size: 1.3rem;
  }

  .menu-header {
    width: 100% !important;
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }

  .dashboard > div {
    width: 100% !important;
    padding-right: 3rem;
    padding-left: 3rem;
  }

  /* top bar */
  .topbar > div {
    width: 100% !important;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  /* _________ DASHBOARD PAGE _________ */
  .dashboard-nav {
    padding-bottom: 3rem !important;
  }

  .txt-jauge {
    order: 3;
    padding-top: 3rem;
  }

  .jauge-big {
    max-width: 170px;
  }

  .small {
    padding: 0;
  }

  .big .jauge_value p {
    font-size: 1rem;
  }

  .big .jauge_value {
    padding-top: 1rem;
  }

  .big .j_value {
    font-size: 2rem !important;
  }

  .big .unit {
    font-size: 1.2rem;
  }

  .big {
    max-width: 170px;
    padding: 0;
  }

  .aiguille-small,
  .aiguille-big {
    margin-left: -3px;
    width: 6px;
    bottom: 53px;
    height: 85px;
  }

  .big .unit {
    margin-top: -0.5rem;
  }

  .jauge,
  .big {
    max-width: 100%;
    width: 170px;
  }

  .big .jauge_value {
    width: 170px;
    margin: 0 auto;
  }

  .big .j_value {
    margin-top: -1rem;
  }

  .row.mt-4 .small {
    width: 170px;
    max-width: 100%;
  }

  .jauge_value {
    width: 170px;
    margin: 0 auto;
  }

  .big,
  .small {
    margin-bottom: 2rem;
  }
}

@media (max-width: 575.98px) {
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  .arrow span {
    display: none;
  }

  .arrow i {
    margin: 0;
  }

  .arrow {
    padding: 1rem 1.5rem;
  }

  .info-dropdown,
  .info-dropdown .dropdown-menu.show {
    min-width: 18rem;
  }

  /* .info-dropdown .dropdown-menu.show {
        left: -1rem !important;
        top: 1rem !important;
    } */

  .add-group i {
    display: none;
  }

  .add-group span {
    margin-left: 0;
  }

  .dropdown-header {
    font-size: 1.2rem;
    padding: 1rem;
  }

  .txt-drop,
  .dropdown-item {
    font-size: 1.2rem;
  }

  .dropdown-item,
  .info-dropdown {
    padding: 1rem;
  }

  .info-dropdown i {
    font-size: 2.1rem;
  }

  .grpe-info {
    max-height: 40px;
  }

  .topbar span {
    font-size: 1.1rem;
  }

  .dashboard .dashboard-nav {
    padding-bottom: 5rem;
  }

  /* dashboard */
  .dashboard .actif_elements:last-child {
    margin-left: 0.5rem;
  }

  .dashboard .actif_elements:first-child {
    margin-right: 0.5rem;
  }

  .dashboard_elements img {
    height: 25px;
    width: 25px;
  }
  .valor_elements,
  .actif_elements {
    font-size: 1.1rem;
  }

  .dashboard_elements img {
    display: none;
  }

  .name_elements.icon {
    margin-left: 0;
  }

  .full-dashboard .name_elements.icon {
    margin-left: 0.7rem;
  }

  .actif_elements {
    padding: 0 !important;
  }
}

@media (max-width: 440px) {
  /* MODAL CARTO */
  .modal-header h5 {
    font-size: 1.2rem !important;
    letter-spacing: 0 !important;
  }

  .modal-header img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  .topbar span {
    margin-left: 5px;
    letter-spacing: 0;
  }

  .carto {
    padding-left: 0.3rem !important;
  }

  .histo {
    padding-right: 0.3rem !important;
  }

  .topbar img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 340px) {
  /* _________ FULL-DASHBOARD PAGE _________ */
  /* dashboard-nav */
  .diag {
    text-align: center;
  }

  /* dashboard */
  .valor_elements,
  .actif_elements {
    font-size: 1rem;
    line-height: 1.2;
  }
}