@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap);:root {
  --blue: #038AEA;
  --light-blue: #73C4FD;
  --pastel-blue: #D2ECFF;
  --dark: #040F19;
  --dark-grey: #758495;
  --grey-2: #EFF1F5;
  --grey: #ECEEF2;
  --light: #F9FBFC;
  --green: #2ABCA4;
  --red: #D15240;
  --yellow: #EABB03;
  --purple: #CA03EA;
}

.uix__avatar {
  position: relative;
  display: inline-block;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: var(--grey-2);
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  line-height: 65px;
  color: var(--dark-grey);
  font-size: 27px;
}

.uix__avatar.light-rounded {
  border-radius: 5px;
}

.uix__avatar img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 65px;
  height: 65px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.uix__avatar.lg {
  width: 95px;
  height: 95px;
  line-height: 95px;
  font-size: 45px;
}

.uix__avatar.lg img {
  width: 95px;
  height: 95px;
}

.uix__avatar.sm {
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}

.uix__avatar.sm img {
  width: 35px;
  height: 35px;
}

.uix__avatar.transparent {
  background-color: transparent;
}

.uix__tag {
  background-color: var(--light);
  display: inline-block;
  white-space: nowrap;
  border-radius: 5px;
  padding: 1px 8px;
  color: var(--dark);
  font-size: 12px;
  font-weight: 500;
}

.uix__tag:hover {
  text-decoration: none;
  color: inherit;
}

.uix__tag.light {
  color: white;
}

.footer {
  width: 100%;
  text-align: center;
  background-color: #343a40;
  color: white;
  padding: 32px 0;
  border-top: 1px solid #dadada;
}

* {
  outline: none;
}

html,
body {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 100%;
}

html h1,
body h1 {
  font-size: 25px !important;
}

.planning {
  min-height: 100%;
  position: relative;
}

.planning-content {
  min-height: 100%;
  padding-bottom: 80px;
}

.required::after {
  color: #f00;
  content: " *";
}

.badge-tag {
  font-size: 14px;
  font-weight: 400;
}

.badge-font-light {
  color: white;
}

.uppFirst {
  display: inline-block;
}

.uppFirst:first-letter {
  text-transform: capitalize;
}

.crossed {
  background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, white 5px, white 10px);
}

.footer {
  height: 60px;
  text-align: center;
  background-color: #1D292E;
  color: white;
  padding: 16px 0;
  position: absolute;
  border-top: 1px solid #dadada;
  bottom: 0;
  left: 0;
}

.crossed-half {
  background-image: linear-gradient(to bottom right, transparent calc(50% - 1px), white, transparent calc(50% + 1px));
}

.table-schedule th:first-child,
.table-schedule td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0px;
  background-color: white;
  z-index: 1;
}

.table-schedule thead tr.first th,
.table-schedule thead tr.first td {
  position: sticky;
  position: -webkit-sticky;
  /* Safari */
  top: 0;
}

.table-schedule thead tr.second th,
.table-schedule thead tr.second td {
  position: sticky;
  position: -webkit-sticky;
  /* Safari */
  top: 40px;
}

.table-schedule th {
  width: 40px !important;
}

.table-schedule .schedule-content {
  width: 20px;
  height: 20px;
  border: 1px solid white;
  border-radius: 5px;
  margin: auto;
}

.table-schedule .half-schedule-content {
  width: 0px;
  height: 0px;
  border: 1px solid white;
  margin: auto;
}

.table-schedule tr td:not(:first-child) {
  width: 40px !important;
}

.gender-men {
  color: var(--blue);
}

.gender-women {
  color: var(--purple);
}

.yellow-star {
  color: var(--yellow);
}

.handle-sortable {
  font-size: 14px;
  cursor: -webkit-grab;
  cursor: grab;
}

.sortable-ghost-background {
  background: var(--grey-2);
}

.uix__activity-indicator {
  display: inline-block;
  height: 4px;
  width: 25px;
  background: var(--dark-grey);
}

.uix__activity-indicator.active {
  background: var(--green);
}

.uix__stat-title {
  display: block;
  color: var(--dark-grey);
  font-size: 14px;
  text-transform: uppercase;
}

.uix__stat-number {
  display: block;
  color: var(--dark);
  font-size: 26px;
  font-weight: 700;
}

.header-form {
  display: flex;
  justify-content: space-between;
}

.filter-tablet {
  display: none;
}

.fix-header {
  overflow-y: auto;
  max-height: 700px;
}

.fix-header thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  box-shadow: inset 1px 1px #dee2e6, 0 1px #dee2e6;
}

.grey {
  background: #d6d8db !important;
}

.td-lighter {
  background: #e1f5f9 !important;
}

.no-border {
  border: 0px !important;
  box-shadow: unset;
}

@media only screen and (max-width: 1080px) {
  /* Styles pour cette Media Queries */

  .filter-tablet {
    display: block;
  }

  .filter-schedule {
    display: none;
  }

  .fix-header {
    height: 300px !important;
  }

  .schedule .col-sm-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .schedule .col-sm-2 {
    flex: 0 0 0% !important;
    max-width: 0% !important;
  }

  .table-schedule .schedule-content {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    margin: auto;
  }

  #btn_add_schedule {
    width: 100% !important;
  }
}

@media only screen and (max-width: 580px) {
  .background-login {
    width: 100% !important;
    height: 400px !important;
  }
}