/* ########################## */
/* ##### Generic style ###### */
/* ########################## */

.mh-0 {
  min-height: 0;
}

.mw-0 {
  min-width: 0;
}

/* View Width */
.vw-0 {
  width: 0vw;
}

.vw-5 {
  width: 5vw;
}

.vw-6 {
  width: 6vw;
}

.vw-7 {
  width: 7vw;
}

.vw-10 {
  width: 10vw;
}

.vw-15 {
  width: 15vw;
}

.vw-20 {
  width: 20vw;
}

.vw-25 {
  width: 25vw;
}

.vw-30 {
  width: 30vw;
}

.vw-35 {
  width: 35vw;
}

.vw-40 {
  width: 40vw;
}

.vw-45 {
  width: 45vw;
}

.vw-50 {
  width: 50vw;
}

.vw-55 {
  width: 55vw;
}

.vw-60 {
  width: 60vw;
}

.vw-65 {
  width: 65vw;
}

.vw-70 {
  width: 70vw;
}

.vw-75 {
  width: 75vw;
}

.vw-80 {
  width: 80vw;
}

.vw-85 {
  width: 85vw;
}

.vw-90 {
  width: 90vw;
}

.vw-95 {
  width: 95vw;
}

.vw-100 {
  width: 100vw;
}

/* Flex */
.flex-none {
  flex: none !important;
}

.flex-1 {
  flex: 1 !important;
}

.flex-2 {
  flex: 2 !important;
}

.flex-3 {
  flex: 3 !important;
}

.flex-4 {
  flex: 4 !important;
}

.flex-5 {
  flex: 5 !important;
}

.flex-6 {
  flex: 6 !important;
}

/* Input with label on border */
.form-group {
  position: relative;
}

.form-group > label {
  position: absolute;
  top: -0.6rem;
  line-height: 0.9;
  left: 0.5rem;
  background-color: white;
  padding: 0 0.7rem;
  transition: color 0.15s ease-in-out;
  z-index: 10;
}

.form-group > label.focused {
  color: var(--custom-primary);
}

.form-group > input,
.form-group > select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  /* font-size: 1rem; */
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-group > input:focus,
.form-group > select:focus {
  border-color: var(--custom-primary);
  outline: none;
  box-shadow: 0 0 3px #4ab4c9;
}

.form-group > input:-webkit-autofill,
.form-group > input:-webkit-autofill:hover,
.form-group > input:-webkit-autofill:focus,
.form-group > input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Cursor */
.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-none {
  cursor: none;
}

.cursor-context-menu {
  cursor: context-menu;
}

.cursor-help {
  cursor: help;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-progress {
  cursor: progress;
}

.cursor-wait {
  cursor: wait;
}

.cursor-cell {
  cursor: cell;
}

.cursor-crosshair {
  cursor: crosshair;
}

.cursor-text {
  cursor: text;
}

.cursor-vertical-text {
  cursor: vertical-text;
}

.cursor-alias {
  cursor: alias;
}

.cursor-copy {
  cursor: copy;
}

.cursor-move {
  cursor: move;
}

.cursor-no-drop {
  cursor: no-drop;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-e-resize {
  cursor: e-resize;
}

.cursor-n-resize {
  cursor: n-resize;
}

.cursor-ne-resize {
  cursor: ne-resize;
}

.cursor-nw-resize {
  cursor: nw-resize;
}

.cursor-s-resize {
  cursor: s-resize;
}

.cursor-se-resize {
  cursor: se-resize;
}

.cursor-sw-resize {
  cursor: sw-resize;
}

.cursor-w-resize {
  cursor: w-resize;
}

.cursor-ew-resize {
  cursor: ew-resize;
}

.cursor-ns-resize {
  cursor: ns-resize;
}

.cursor-nesw-resize {
  cursor: nesw-resize;
}

.cursor-nwse-resize {
  cursor: nwse-resize;
}

.cursor-col-resize {
  cursor: col-resize;
}

.cursor-row-resize {
  cursor: row-resize;
}

.cursor-all-scroll {
  cursor: all-scroll;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

.cursor-grab {
  cursor: grab;
}

.cursor-grabbing {
  cursor: grabbing;
}

/* Overflow */
.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* Width */
.vw-50 {
  width: 50vw;
  max-width: 50vw;
}

.vw-80 {
  width: 80vw;
  max-width: 80vw;
}

@media (max-width: 992px) {
  .vw-50-r {
  }

  .vw-80-r {
  }
}

@media (min-width: 992px) {
  .vw-50-r {
    width: 50vw;
    max-width: 50vw;
  }

  .vw-80-r {
    width: 80vw;
    max-width: 80vw;
  }
}
.w-33 {
  width: calc(100% / 3);
}

.w-30 {
  width: 30% !important;
}

.w-70px {
  width: 70px;
}
.w-100px {
  width: 100px;
}
.w-200px {
  width: 200px;
}
/* Slide from  */
/* Slide from left of right need a width */
.vw-50-r.slide-from-right {
  transition: margin-right 0.1s ease-out;
  margin-right: -50vw;
  transition: transform 0.1s ease-out;
  transform: translateX(52vw);
}

.vw-50-r.slide-from-right.show {
  transform: none !important;
}

.vw-80.slide-from-right {
  transition: margin-right 0.1s ease-out;
  margin-right: -80vw;
  transition: transform 0.1s ease-out;
  transform: translateX(82vw);
}

.vw-80.slide-from-left.show {
  transform: none !important;
}

.vw-80.slide-from-left {
  transition: margin-left 0.1s ease-out;
  margin-left: -80vw;
  transition: transform 0.1s ease-out;
  transform: translateX(-82vw);
}

.vw-80.slide-from-left.show {
  transform: none !important;
}

.slide-from-top {
  transition: transform 0.1s ease-out;
  transform: translate(0, -50px);
}

.slide-from-top.show {
  transform: none !important;
}

/* height */
.h-40px {
  height: 40px;
}

/* Width */

/* Btn */
/* .btn-delete {
  box-sizing: content-box;
  width: 1.4em;
  height: 1.4em;
  padding: 0.05em 0.25em;
  color: red;
  border: 0;
  border-radius: 0.25rem;
}

.btn-edit {
  box-sizing: content-box;
  width: 1.4em;
  height: 1.4em;
  padding: 0.05em 0.25em;
  color: var(--bs-blue);
  border: 0;
  border-radius: 0.25rem;
}

.btn-svg {
  box-sizing: content-box;
  width: 1.4em;
  height: 1.4em;
  padding: 0.05em 0.25em;
  border: 0;
  border-radius: 0.25rem;
}

.btn-sm-svg {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  border: 0;
  border-radius: 0.25rem;
}

.btn-vlg-svg {
  box-sizing: content-box;
  width: 3em;
  height: 3em;
  padding: 0.25em 0.25em;
  border: 0;
  border-radius: 0.25rem;
}

.btn-svg.red,
.btn-sm-svg.red {
  color: var(--bs-red);
}

.btn-svg.green,
.btn-sm-svg.green {
  color: var(--bs-green);
}

.btn-svg.blue,
.btn-sm-svg.blue {
  color: var(--bs-blue);
}

.btn-svg.yellow,
.btn-sm-svg.yellow {
  color: var(--bs-warning);
}

.btn-svg.muted,
.btn-sm-svg.muted {
  color: var(--bs-gray-600);
} */

/* Derived from bootstrap */
.toggler {
  color: rgba(0, 0, 0, 0.55);
  /* border-color: ; */
  line-height: 1;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}

.toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

@media (max-width: 992px) {
}

@media (min-width: 992px) {
  .toggler {
    display: none;
  }
}

/* Modal */
mom-modal {
  z-index: var(--z-index-mom-modal) !important;
  background-color: rgba(10, 10, 10, 0.6);
}

mom-modal[modal-size="modal-fullscreen"] {
  z-index: var(--z-index-mom-modal);
}

/* font-size */
.fs-small {
  font-size: small;
}
.fs-smaller {
  font-size: smaller;
}
.fs-x-small {
  font-size: x-small;
}
.fs-xx-small {
  font-size: xx-small;
}

/* ########################## */
/* ##### Specfic style ###### */
/* ########################## */

#logo-on-login {
  width: 20vw;
  margin-bottom: -0.75rem !important;
}

#form {
  border-color: rgba(0, 0, 0, 0.15) !important;
  border-radius: 0.75rem;
}

nav img {
  transition: height 0.3s ease-in-out;
}

@media (max-width: 992px) {
  #wrapper {
    flex-direction: column !important;
    /* overflow: visible !important; */
  }

  #wrapper-left {
    flex: none !important;
  }

  .card-body-collapse:not(.show) {
    display: none;
  }

  nav img {
    height: 30px;
  }
}

.vh-80 {
  height: 80vh !important;
}

.vh-0 {
  height: 0vh !important;
}

.mh-50vh {
  max-height: 50svh;
}

.mh-40vh {
  max-height: 40svh;
}

.w-40px {
  width: 40px !important;
}

.h-50px {
  height: 50px !important;
}

.h-95 {
  height: 95% !important;
}

#left-bar-side {
  display: none;
}

@media (max-width: 992px) {
  /* Nav bar */

  #left-bar {
    display: none;
  }

  #menu-icon {
    display: block !important;
  }

  #left-bar-side {
    display: block;
    height: 100%;
    width: 30%;
    position: absolute;
    z-index: 6;
  }

  #mom-logo {
    width: 20vw !important;
  }

  /* Machine Data */

  #card-machine-data {
    flex-direction: column !important;
    width: 45% !important;
    height: 50% !important;
  }

  .documents-details {
    display: block !important;
  }

  #document-name {
    font-weight: bold !important;
  }

  /* Machines Admin */

  .machine-admin-description {
    display: block !important;
    gap: 0 !important;
  }

  #machine-description {
    flex-direction: row !important;
  }

  #machine-etat {
    display: block !important;
  }

  #body-wrapper {
    overflow: auto !important;
  }

  #admin-documents-list,
  #admin-users-list {
    overflow-y: inherit !important;
  }

  /* Connexion page */

  #left-part-form {
    width: 50vw !important;
    max-width: 50vw !important;
  }

  #connexion-description {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  #searchBar {
    width: 50% !important;
  }
}

@media (max-width: 768px) {
  /* Nav bar */

  #left-bar-side {
    width: 50%;
  }

  #profileImg,
  #user-name {
    display: none !important;
  }

  #right-nav {
    margin: 0% !important;
  }

  /* Machine Data */

  #search-bar {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  #card-machine-data {
    width: 100% !important;
    height: 75% !important;
  }

  #searchBar,
  #companyChoice {
    width: 100% !important;
  }

  /* Machine Admin */

  #machine-details {
    flex-direction: column !important;
  }

  #machine-description {
    display: block !important;
  }

  #machine-comment {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }

  #sub-wrapper {
    flex-direction: column !important;
  }

  /* Machine Details */

  #wrapper {
    /* margin-bottom: 10rem !important; */
    overflow: auto !important;
  }

  #documents-services {
    flex-direction: column !important;
    gap: 0 !important;
  }

  #machine-documents,
  #machine-services,
  #documents-services,
  #machine-document-service {
    overflow: unset !important;
  }

  #machine-services {
    min-height: 40vh !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  #list-documents {
    min-height: 40vh !important;
    max-height: 100% !important;
  }

  #machine-thumbnail {
    min-height: 40vh !important;
  }

  /* Smartconnect */

  #sc-buttons {
    flex: none !important;
  }

  #sc-informations {
    display: block !important;
  }

  .badge-sc {
    margin: 0 !important;
  }

  #machine-line {
    display: block !important;
  }

  #machine-buttons {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  #sc-vpn,
  .sc-informations,
  .activate-sc {
    flex: 1 !important;
    text-align: center !important;
  }

  /* Connexion page */

  #connexion-part {
    display: block !important;
  }

  /* #page-wrapper {
    overflow: auto !important;
  } */

  #left-part-form {
    width: max-content !important;
    max-width: max-content !important;
  }

  #form-login-button {
    gap: 3rem !important;
  }

  #mom-logo {
    width: 35vw !important;
  }

  /* User */

  .user-email {
    display: none !important;
  }

  #user-company-machine,
  #company-user-machine-list {
    display: block !important;
  }

  /* #line-machine {
    display: block !important;
  } */

  /* #access-machine-button {
    width: 50% !important;
    margin-left: 50% !important;
  } */

  #machine-status-data {
    flex-direction: column-reverse !important;
    height: 60% !important;
  }

  .machine-status {
    display: flex !important;
    margin-top: 1rem !important;
    flex: 1 !important;
    align-self: center !important;
  }

  .badge-machine-status {
    margin-left: 1rem !important;
    margin-bottom: 1rem !important;
  }

  #search-user-bar {
    flex-direction: column !important;
  }

  #filter-momhuman,
  #filter-erpid {
    width: auto !important;
  }

  #details-machine-users {
    flex-direction: column !important;
  }

  #machineList,
  #usersList {
    overflow: unset !important;
  }

  #machine-status-download {
    display: flex !important;
    flex-direction: column !important;
  }

  #download-btn {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  #modal-name-comments-type {
    display: block !important;
  }

  #add-document-in-machine-text {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  #download-btn {
    align-self: center !important;
  }
}