@font-face {
  font-family: "gotham";
  src: url("/fonts/Gotham/GothamBook.ttf");
}

@font-face {
  font-family: "gothammedium";
  src: url("/fonts/Gotham/GothamMedium.ttf");
}

@font-face {
  font-family: "gothambold";
  src: url("/fonts/Gotham/GothamBold.ttf");
}

:root {
  --mud-palette-tertiary: #00bbbe !important;
  --mud-palette-tertiary-text: #00bbbe !important;
}

body {
  font-family: "gotham";
}

body.identification-layout .login {
  background-image: url(../images/Wefit-Bg-login.png);
  overflow: hidden;
}

.mud-container-custom .mud-list-item {
  padding-top: 0;
  padding-bottom: 0;
  background-color: #00BBBE;
  color: #fff;
  border-radius: 4px;
  font-family: "gothammedium";
  z-index: 1300;
}

.mud-progress-linear.horizontal.mud-progress-linear-large {
  height: 28px;
}

.mud-picker-container .mud-theme-tertiary {
  color: var(--mud-palette-text-primary) !important;
}

.mud-dialog {
  border-radius: 0;
}

.mud-dialog .mud-dialog-title {
  border-bottom: 1px solid #00BBBE;
}

.mud-dialog .mud-dialog-content {
  padding-top: 16px;
}

.login {
  height: 100vh;
  background-color: #969696;
}

.login main,
.login .row {
  height: 100%;
}

.login .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.login h2 {
  font-size: 35px;
  font-family: "gothammedium";
  text-align: center;
  margin-bottom: 0;
}

.login .text-intro {
  font-size: 16px;
  margin: 20px 0;
  text-align: center;
}

.login .login-form {
  background: #f7fafc 0% 0% no-repeat padding-box;
  border: 1px solid #707070;
  border-radius: 10px;
  padding: 60px;
  position: relative;
}

.login .login-form form {
  padding-top: 1px;
}

.login .login-form form > div {
  margin: 20px 0;
}

.login .login-form form > div input {
  -webkit-box-shadow: 0px 2px 4px #1717172e;
          box-shadow: 0px 2px 4px #1717172e;
  border: 1px solid #707070;
  border-radius: 5px;
}

.login .login-form form > div .checkbox label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.login .login-form form > div .checkbox .form-check-input {
  -webkit-box-shadow: 0px 3px 8px #00000021;
          box-shadow: 0px 3px 8px #00000021;
  border-radius: 6px;
  height: 25px;
  width: 25px;
  margin-right: 10px;
  margin-top: 0;
}

.login .login-form form > div.forgot-password {
  text-align: center;
  font-size: 0.8em;
  position: absolute;
  bottom: 0;
  height: 10%;
  background-color: #E2E3E5;
  width: 100%;
  margin: 0;
  left: 0;
  border-bottom-right-radius: 9px;
  border-bottom-left-radius: 9px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #8B8B8B;
}

.login .login-form form > div.forgot-password a {
  text-decoration: none;
  color: #00BBBE;
}

.login .login-form form #login-submit {
  width: 50%;
  margin: 40px auto;
  text-align: center;
  font-family: "gothammedium";
  font-size: 18px;
  padding: 16px;
  border-radius: 4px;
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.menu {
  background-color: #171717;
  width: 20%;
  color: #fff;
  border-radius: 0;
  position: relative;
}

.menu .mud-navmenu {
  padding: 10%;
  font-size: 18px;
}

.menu .mud-navmenu .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto 50px;
  width: 50%;
}

.menu .mud-navmenu .mud-nav-link.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 25px;
  color: #fff;
}

.menu .mud-navmenu .mud-nav-link.active::before {
  content: "";
  height: 10px;
  width: 10px;
  background-color: #00BBBE;
  position: absolute;
  left: 25px;
  border-radius: 100%;
}

.menu .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
  color: #fff;
}

.menu .logout-button {
  position: absolute;
  bottom: 10px;
  padding-left: 17%;
}

.menu .download-button {
  position: absolute;
  bottom: 65px;
  margin-left: 17%;
}

.mud-main-content {
  background-color: #262626;
  color: #fff;
  padding: 3% 3% 0;
  height: 100vh;
  width: 80%;
  overflow-y: scroll;
}

.mud-main-content::-webkit-scrollbar {
  display: none;
}

.illustration-concept {
  width: 40px;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-pres p {
  margin-right: 10px;
}

.video-pres .delete {
  margin-top: 0;
}

.mud-switch p {
  color: #b5b5b5;
}

.select-themecolor p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.select-themecolor p .color {
  height: 15px;
  width: 15px;
  margin-right: 10px;
}

.mud-switch-button .mud-switch-thumb {
  background-color: #fff;
}

.mud-switch-primary.mud-checked + .mud-switch-track {
  background-color: #00BBBE;
  opacity: 1;
}

.mud-switch-span .mud-switch-track {
  background-color: #000;
}

.asset-actions {
  height: 40px;
  width: 40px;
}

.asset-actions.sm {
  height: 20px;
  width: 20px;
}

.asset-actions.primary {
  -webkit-filter: brightness(0) saturate(100%) invert(46%) sepia(94%) saturate(1363%) hue-rotate(144deg) brightness(98%) contrast(103%);
          filter: brightness(0) saturate(100%) invert(46%) sepia(94%) saturate(1363%) hue-rotate(144deg) brightness(98%) contrast(103%);
}

.asset-actions.alert {
  -webkit-filter: brightness(0) saturate(100%) invert(59%) sepia(66%) saturate(971%) hue-rotate(314deg) brightness(91%) contrast(86%);
          filter: brightness(0) saturate(100%) invert(59%) sepia(66%) saturate(971%) hue-rotate(314deg) brightness(91%) contrast(86%);
}

.asset-actions:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(51%) saturate(0%) hue-rotate(263deg) brightness(114%) contrast(101%);
          filter: brightness(0) saturate(100%) invert(100%) sepia(51%) saturate(0%) hue-rotate(263deg) brightness(114%) contrast(101%);
  cursor: pointer;
}

.asset-actions.star {
  margin-right: 2px;
}

.asset-actions.star:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(46%) sepia(94%) saturate(1363%) hue-rotate(144deg) brightness(98%) contrast(103%);
          filter: brightness(0) saturate(100%) invert(46%) sepia(94%) saturate(1363%) hue-rotate(144deg) brightness(98%) contrast(103%);
  cursor: initial;
}

.asset-actions.star.not-selected {
  -webkit-filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(508%) hue-rotate(10deg) brightness(99%) contrast(82%);
          filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(508%) hue-rotate(10deg) brightness(99%) contrast(82%);
}

.asset-actions.star.not-selected:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(508%) hue-rotate(10deg) brightness(99%) contrast(82%);
          filter: brightness(0) saturate(100%) invert(0%) sepia(3%) saturate(508%) hue-rotate(10deg) brightness(99%) contrast(82%);
  cursor: initial;
}

.bloc-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 50px;
}

.bloc-title .title {
  font-size: 40px;
  width: 80%;
}

.bloc-title .title a {
  color: #333333;
  text-decoration: none;
  display: block;
}

.bloc-title.details > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bloc-title.details > div:first-child {
  width: 80%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.bloc-title.details > div:first-child button {
  margin-right: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.bloc-title.details > div:first-child button p.mud-typography-body2 {
  font-size: initial;
  line-height: 1;
}

.bloc-title .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  color: #00BBBE;
}

.bloc-title .mud-input.mud-input-underline:after {
  border-bottom: 2px solid #00BBBE;
}

.bloc-title .mud-input > input.mud-input-root, .bloc-title div.mud-input-slot.mud-input-root {
  color: #b5b5b5;
}

.bloc-title .mud-input-control {
  margin-top: 0;
}

.bloc-title .mud-input-control.mud-input-input-control {
  margin: 0 20px;
}

.bloc-title .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
  color: #b5b5b5;
  margin-top: -16px;
}

.bloc-title .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text {
  margin-top: 0;
}

.bloc-title .mud-input-control .mud-input {
  color: #b5b5b5;
}

.bloc-title .mud-input-control .mud-input::-webkit-input-placeholder {
  color: #b5b5b5;
}

.bloc-title .mud-input-control .mud-input:-ms-input-placeholder {
  color: #b5b5b5;
}

.bloc-title .mud-input-control .mud-input::-ms-input-placeholder {
  color: #b5b5b5;
}

.bloc-title .mud-input-control .mud-input::placeholder {
  color: #b5b5b5;
}

.bloc-title .mud-input.mud-input-underline:hover:not(.mud-disabled):before {
  border-bottom-color: #b5b5b5;
}

.bloc-details > div,
.bloc-details form > div {
  margin-bottom: 40px;
  position: relative;
}

.bloc-details .subtitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  position: relative;
  font-family: "gothammedium";
  margin-bottom: 20px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.bloc-details .subtitle::after {
  content: "";
  position: absolute;
  height: 1px;
  background-color: #00bbbe;
}

.bloc-details button.button-blue {
  position: relative;
  right: 0;
  margin-top: 8px;
}

.bloc-details .mud-input > input.mud-input-root:not(.mud-input-root-adorned-end),
.bloc-details .mud-input.mud-select-input,
.bloc-details .mud-input.mud-input-adorned-end {
  border: 1px solid #707070;
  border-radius: 10px;
  color: #fff;
  padding: 14px;
}

.bloc-details .mud-input.mud-select-input > input.mud-input-root,
.bloc-details .mud-select .mud-select-input .mud-input-slot,
.bloc-details .mud-input.mud-input-adorned-end > input.mud-input-root {
  padding: 0;
}

.bloc-details .mud-input.mud-input-underline:before {
  border: none;
}

.bloc-details .mud-input.mud-input-underline:after {
  left: 10px;
  border-bottom: 2px solid #00BBBE;
  width: 98.5%;
}

.bloc-details label.mud-input-label.mud-input-label-animated.mud-input-label-text.mud-input-label-inputcontrol {
  padding-left: 20px;
  padding-top: 7px;
  color: #b5b5b5;
}

.bloc-details .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.bloc-details .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  -webkit-transform: translate(0, -10.5px) scale(0.75);
          transform: translate(0, -10.5px) scale(0.75);
}

.bloc-details .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  color: #00BBBE;
}

.bloc-details .mud-input-control.mud-input-input-control,
.bloc-details .mud-input-control.mud-select,
.bloc-details .picture-illustration,
.bloc-details .mud-switch,
.bloc-details .video-pres .mud-input-label,
.bloc-details .video-pres .mud-button-root:not(.delete),
.bloc-details .video-pres p {
  margin-top: 20px;
}

.bloc-details .picture-illustration.screensavers.videos > div {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 20px;
}

.bloc-details .picture-illustration.screensavers.videos > div .video {
  background-color: #171717;
  margin-bottom: 10px;
  /* border: 1px solid #00BBBE; */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 10px 20px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #00bbbe;
}

.bloc-details .picture-illustration.screensavers.videos > div .video button {
  margin-left: 5px;
}

.bloc-details .picture-illustration.screensavers.videos > div label {
  margin-top: 10px;
}

.bloc-details .picture-illustration.screensavers > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.bloc-details .preview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 150px;
  width: 150px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
  margin-right: 10px;
}

.bloc-details .preview img.img-preview {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
  width: 100%;
}

.bloc-details .preview .actions-picture {
  display: none;
}

.bloc-details .preview::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  content: "";
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.bloc-details .preview:hover {
  background-color: #171717;
}

.bloc-details .preview:hover:after {
  display: block;
}

.bloc-details .preview:hover .actions-picture {
  position: absolute;
  -ms-flex-item-align: center;
      align-self: center;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 2;
}

.bloc-details .preview:hover .actions-picture:hover {
  background-color: transparent;
}

.bloc-details .preview:hover .actions-picture.delete {
  right: 0;
}

.bloc-details .preview-video {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.button-blue {
  color: white;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  background-color: #00BBBE;
  padding: 6px 15px;
  border-radius: 0;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.button-blue span {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.button-blue::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 94%;
  z-index: 1;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-color: #00BBBE;
  border-bottom-color: #00BBBE;
  -webkit-transform: scale(0.1, 1);
  transform: scale(0.1, 1);
}

.button-blue::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: rgba(255, 255, 255, 0.25);
}

.button-blue:hover span {
  letter-spacing: 2px;
}

.button-blue:hover::before {
  opacity: 1;
  -webkit-transform: scale(1, 1);
  transform: scale(1, 1);
}

.button-blue:hover::after {
  opacity: 0;
  -webkit-transform: scale(0.1, 1);
  transform: scale(0.1, 1);
}

.mud-table {
  background-color: initial;
  color: #fff;
}

.mud-table .mud-toolbar {
  display: none;
}

.mud-table .mud-table-root .mud-table-head .mud-table-cell,
.mud-table .mud-table-root .mud-table-body .mud-table-cell {
  color: inherit;
}

.mud-table .mud-table-root .mud-table-body .mud-table-cell {
  color: inherit;
  border: none;
}

.mud-table .mud-table-root .mud-table-body .mud-table-cell .mud-nav-link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  line-height: 1;
}

.mud-table .mud-table-root .mud-table-body .mud-table-cell .mud-nav-link .mud-nav-link-text {
  margin-left: 0;
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}

.mud-table .mud-table-root .mud-table-body .mud-table-cell .asset-actions {
  height: 18px;
  width: 18px;
}

.mud-table .mud-table-root .mud-table-body .mud-table-row {
  border-top: 1px solid #707070;
  position: relative;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px !important;
}

.planning-licence {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.planning-licence .count-hours {
  width: 4%;
  margin-top: 20px;
}

.planning-licence .count-hours > div {
  font-size: 8px;
  color: #fbfbfb;
  height: calc(100% / 96);
}

.planning-licence .mud-container-custom {
  width: 96%;
}

.planning-licence .mud-container-custom > div > div {
  margin-right: 5px;
}

.planning-licence .mud-container-custom > div > div .mud-paper p {
  line-height: 1;
  font-size: 14px;
  text-align: center;
}

.planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 1), .planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 2), .planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 3), .planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 4) {
  background-color: #484848;
}

.planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 5), .planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 6), .planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 7), .planning-licence .mud-container-custom > div > div .mud-paper:nth-child(8n + 8) {
  background-color: #3b3b3b;
}

.planning-licence .mud-container-custom > div > div .mud-drop-zone {
  height: 36px;
  margin-bottom: 4px;
  width: 180px;
  border-radius: 7px;
}

.expirationDateAlert {
  color: #C65C5A;
  font-family: 'gothammedium';
}

.column-options .mud-svg-icon {
  -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(51%) saturate(0%) hue-rotate(263deg) brightness(114%) contrast(101%);
          filter: brightness(0) saturate(100%) invert(100%) sepia(51%) saturate(0%) hue-rotate(263deg) brightness(114%) contrast(101%);
}

.mud-input.mud-input-underline:before {
  border-bottom: 1px solid var(--mud-palette-tertiary);
}

.mud-selected-item {
  color: var(--mud-palette-tertiary);
  background-color: var(--mud-palette-tertiary-hover);
}

.mud-input.mud-input-underline:after {
  border-bottom: 2px solid var(--mud-palette-tertiary);
}

.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
  color: var(--mud-palette-tertiary);
}