@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* PAGE */

:root { 
  /*
  --bs-primary-rgb: 255, 130, 102;
  --bs-primary: rgb(var(--bs-primary-rgb));
  --bs-secondary-rgb: 33, 18, 33;
  --bs-secondary: rgb(var(--bs-secondary-rgb));
  --bs-light-rgb: 230, 230, 230;
  --bs-light: rgb(var(--bs-light-rgb));
  --bs-dark-rgb: 120, 120, 120;
  --bs-dark: rgb(var(--bs-dark-rgb));
  --bs-danger-rgb: 255, 147, 147;
  --bs-danger: rgb(var(--bs-danger-rgb));
  --bs-success-rgb: 152, 243, 189;
  --bs-border-color-rgb: 179, 182, 185;
  --bs-border-color: rgba(var(--bs-border-color-rgb), .6);
  --bs-success: rgb(var(--bs-success-rgb));*/
}

body,
html {
  font-family: Inter, sans-serif !important;
  background-color: var(--bs-light);
}

/* PROGRESS BAR */
.progress-container {
  height: 15px;
  background-color: var(--bs-light);
}

.progress-progression {
  height: 100%;
  transition: width 1s ease;
}

/* TITLES */


h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color, inherit);
  text-transform: uppercase;
}

/*
.fs-7 {
  font-size: 0.95rem;
}
*/

h1 {
  line-height: 1 !important;
  font-weight: 800 !important;
}

h2 {
  font-weight: 700 !important;
}

h3 {
  font-weight: 600 !important;
}

h4 {
  font-weight: 500 !important;
}

h5 {
  line-height: 1.2;
  font-weight: 400 !important;
}


/* NAVBAR */

.navbar .profile-picture {
  --size: 3rem;
}

.profile-picture.small {
  --size: 3rem;
}

.navbar {
  z-index: 1;
}

.navbar {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important;
  transition-duration: .15s !important;
}

.nav-item {
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.nav-item .active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: black;
}

.nav-item .active {
  text-decoration-color: var(--bs-primary) !important;
}

/*
.nav-item .active {
  position: relative;
}

.nav-item .active::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.25em;
  left: 0;
  right: 0;
  bottom: 0.4em;
  background-color: black;
  z-index: -1;
}

.nav-item .active.primary::before {
  background-color: var(--bs-primary) !important;
}*/

/* BUTTONS */


.arrow-btn {
  border: none;
  background-color: transparent;
}

/* MEDIAS */

img,
video {
  max-width: 100%;
  height: auto;
}

/* INPUTS */
input.form-control.input-component,
input.form-control.input-component:focus {
  border: 1px solid #FFFFFF;
  border-radius: 0px;
  background-color: rgb(79, 71, 82, .8);
  padding: 25px 10px 25px 10px !important;
  color: #FFF;
  outline: none !important;
}

input.form-control.input-component:disabled {
  border: 1px solid rgba(214, 47, 47, 0.4);
  border-radius: 0px;
  background-color: rgb(79, 71, 82, .4);
  padding: 25px 10px 25px 10px !important;
  color: #FFF;
  cursor: not-allowed;
}

textarea.form-control,
textarea.form-control:focus {
  border: 1px solid #FFFFFF;
  border-radius: 0px;
  background-color: rgb(79, 71, 82, .8);
  color: #FFF;
}

textarea.form-control:disabled {
  border: 1px solid rgba(214, 47, 47, 0.4);
  border-radius: 0px;
  background-color: rgb(79, 71, 82, .4);
  padding: 25px 10px 25px 10px !important;
  color: #FFF;
  cursor: not-allowed;
}

.btn.btn-selector {
  border: 1px solid #FFFFFF;
  border-radius: 0px;
  background-color: rgb(79, 71, 82, .8);
  padding: 10px !important;
  color: #FFF;
  font-weight: 700;
}

.btn.btn-selector:hover {
  background-color: transparent;
}

.btn.btn-selector.selected {
  background-color: var(--bs-primary);
}

input.form-control.input-component::placeholder {
  color: rgba(255, 255, 255, .5);
}

input.form-control.input-component:not([disabled]):hover::placeholder {
  color: white !important;
}

input[type="date"].form-control {
  height: 3.3em;
  border-radius: 0px;
  background-color: var(--bs-light);
  color: black;
}

input[type="date"].form-control:focus {
  border: 1px solid #ced4da;
  box-shadow: none;
}

/* Positionnement des flèches à gauche et à droite du carrousel */
.splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.splide__arrow--prev {
  left: 0;
}

.splide__arrow--next {
  right: 0;
}

/* HOME */

header.header {
  background-image: linear-gradient(0deg, rgba(42, 5, 43, 0.38), rgba(42, 5, 43, 0.38)), url("/assets/illustrations/bg-home.webp");
  background-repeat: no-repeat !important;
  background-position: top !important;
  background-size: cover !important;
}

/*
@media (max-width: 576px) {
  h1 {
    font-size: 2.5rem!important;
  }

  h2 {
    font-size: 1rem!important;
  }

  h3 {
    font-size: 1.75rem!important;
  }

  h4 {
    font-size: 1.5rem!important;
  }

  h5 {
    font-size: 1.25rem!important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  h1 {
    font-size: 3rem!important;
  }

  h2 {
    font-size: 2.5rem!important;
  }

  h3 {
    font-size: 2rem!important;
  }

  h4 {
    font-size: 1.75rem!important;
  }

  h5 {
    font-size: 1.5rem!important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  h1 {
    font-size: 3.5rem!important;
  }

  h2 {
    font-size: 3rem!important;
  }

  h3 {
    font-size: 2.5rem!important;
  }

  h4 {
    font-size: 2rem!important;
  }

  h5 {
    font-size: 1.75rem!important;
  }
}

@media (min-width: 993px) {
  h1 {
    font-size: 4rem!important;
  }

  h2 {
    font-size: 3.5rem!important;
  }

  h3 {
    font-size: 3rem!important;
  }

  h4 {
    font-size: 2.5rem!important;
  }

  h5 {
    font-size: 2rem!important;
  }
}
*/

.blur {
  backdrop-filter: blur(40px);
}

.image-over {
  background-color: rgba(42, 5, 43, 0.38);
}

/* LOGIN */

.background-login {
  background-color: #3C2D3C !important;
}

/* ICONS */

.icon-arrow {
  --size: 1.5em;
  width: var(--size);
  height: var(--size);
}

.icon-arrow.left {
  transform: rotateX(180deg);
}

/* ROUNDS */
.rounds {
  --size: 1.5em;
  width: var(--size);
  height: var(--size);
  border-radius: 1.5em;
  background-color: rgb(79, 71, 82, .8);
  border: 1px solid rgb(79, 71, 82, 255);
}

.rounds.purple {
  background-color: #6b2468;
  border: none;
}

.rounds.active {
  background-color: var(--bs-primary);
  border: none;
}

.highlight {
  position: relative;
}

.highlight::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5em;
  left: 0;
  right: 0;
  bottom: -0.25em;
  background-color: black;
  z-index: -1;
}


.highlight.highlight-primary::before {
  background-color: var(--bs-primary) !important;
}

.highlight.highlight-danger::before {
  background-color: var(--bs-red ) !important;
  opacity: .75;
}

/* IMAGE UPLOAD */


/* SETTINGS */
.step-status {
  width: 1.75rem;
  height: 1.75rem;
}

/*
.profil-picture-selector {
  height: 20rem !important;
}*/

.profil-picture-selector:hover {
  cursor: hand !important;
}

.border-for-input {
  border-color: #ced2d6;
}

.bg-white input.form-control.input-component,
.bg-white input.form-control.input-component:focus {
  border: 1px solid #ced2d6 !important;
  background-color: var(--bs-light);
  border-radius: 0px;
  padding: 25px 10px 25px 10px !important;
  color: #000;
}

.bg-white input.form-control.input-component::placeholder {
  color: rgba(0, 0, 0, .5);
}


.bg-white textarea.form-control,
textarea.form-control:focus {
  border: 1px solid #ced2d6 !important;
  background-color: var(--bs-light);
  border-radius: 0px;
  color: #000;
}

.bg-white textarea.form-control:disabled {
  border: 1px solid rgba(214, 47, 47, 0.4);
  border-radius: 0px;
  background-color: rgb(79, 71, 82, .4);
  padding: 25px 10px 25px 10px !important;
  color: #FFF;
  cursor: not-allowed;
}

.bg-white input.form-control.input-component:not([disabled]):hover::placeholder {
  color: rgba(0, 0, 0, .65) !important;
}

.bg-white input.form-control.input-component:disabled {
  border: 1px solid rgba(214, 47, 47, 0.8);
  background-color: var(--bs-light);
  border-radius: 0px;
  padding: 25px 10px 25px 10px !important;
  color: #000;
  cursor: not-allowed;
}

.bg-white .btn.btn-selector {
  border: 1px solid #ced2d6 !important;
  border-radius: 0px;
  background-color: var(--bs-light);
  padding: 12px 10px !important;
  color: #8d8e90 !important;
  font-weight: 700;
}

.bg-white .btn.btn-selector:hover {
  background-color: transparent;
}

.bg-white .btn.btn-selector.selected {
  border: 1px solid transparent !important;
  background-color: var(--bs-primary);
  color: var(--bs-white) !important;
}

.bg-white .searchable-selectbox {
  flex-direction: row;
  align-items: center;
  justify-content: start;
  border: 1px solid #ced2d6 !important;
  background-color: var(--bs-light);
  color: var(--bs-black) !important;
  border-radius: 0px;
  height: 3.3em;
  cursor: pointer !important;
  position: relative;
}

.bg-white .searchable-selectbox .placeholder {
  color: var(--bs-black) !important;
}

.bg-white .searchable-selectbox:hover .placeholder {
  color: var(--bs-black) !important;
}

.bg-white .searchable-selectbox .arrow-btn {
  margin-left: auto;
  background-color: transparent;
  border: none;
  color: var(--bs-dark);
}

/* COUNTRIES AVAILABLE */

.bg-white .countries-available input.form-control.input-component,
.bg-white .countries-available input.form-control.input-component:focus {
  background-color: var(--bs-white) !important;
}

.bg-white .tag {
  background-color: var(--bs-white);
  border: 1px solid #ced2d6;
}

.bg-white .tag-delete {
  color: var(--bs-black);
  transition: 300ms;
}

/* MEDIAS */

.btn.btn-delete {
  height: 2rem !important;
  width: 2rem !important;
  padding: 0px !important;
  background-color: var(--bs-black);
  border: 1px solid var(--bs-white);
  color: var(--bs-white);
}

.btn.btn-delete:hover {
  border: 1px solid transparent;
  background-color: rgb(227, 29, 29) !important;
}

/* SELECT */

select.form-control {
  border: 1px solid #ced2d6 !important;
  background-color: var(--bs-light);
  color: var(--bs-black) !important;
  height: 3.3em;
}

/* PROFILE PICTURE */

.profile-picture {
  --size: 12rem;
  object-fit: cover;
  object-position: center;
  border-radius: var(--size);
  height: var(--size);
  width: var(--size);
}

/* BOOTSTRAP NEWS CSS */

.text-initial {
  text-transform: none;
}

.fit-content-width {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bg-white .links-selector-component .links-selector .elements .element {
  background-color: var(--bs-white) !important;
  border: none;
  border-bottom: 1px solid var(--bs-gray);
  color: var(--bs-black)
}

.bg-white .links-selector-component .links-selector .elements .element:last-child {
  border-bottom: none;
}

.bg-white .links-selector-component .links-selector .elements {
  border: 1px solid var(--bs-gray) !important;
}

.bg-white .links-selector-component .links-selector .elements .element:hover {
  background-color: rgba(211, 211, 211, 1) !important;
  color: var(--bs-black)
}

.step:hover {
  cursor: pointer !important;
}

@keyframes up-chevron {
  0% {
    transform: rotate(0deg);
  }

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

@keyframes down-chevron {
  0% {
    transform: rotate(180deg);
  }

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

.arrow-btn.default-show {
  animation: none !important;
}

.arrow-btn {
  animation: up-chevron 0.5s ease forwards;
}

.arrow-btn.showed {
  animation: down-chevron 0.5s ease forwards;
}

/*
#__next {
  display: grid!important;
  width: 100%;
  min-height: 100vh;
  border: 1px solid red;
}*/

.text-clickable {
  text-decoration: none;
}

.text-clickable:hover {
  text-decoration: underline;
}

.ck-editor__editable_inline {
  min-height: 250px;
}

.ck.ck-content {
  background-color: var(--bs-light) !important;
}

.bg-black .btn-black {
  border: 1px solid var(--bs-white);
}

@media screen and (min-width: 992px) {}

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

.row {
  margin: none !important;
}

#__next {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.table-active {
  background-color: var(--bs-primary) !important;
  color: white;
}

.table-disabled {
  background-color: var(--bs-table-active-bg) !important;
}

.circle-unavailable {
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 1rem;
  background-color: var(--bs-primary);
}

.btn-available:hover {
  background-color: rgba(0, 0, 0, .2);
}

@media (max-width: 576px) {

  .circle-unavailable {
    height: 0.6rem;
    width: 0.6rem;
  }

  .calendar-day {
    height: 3.5rem !important;
  }
}

.table {
  overflow: hidden;
  max-width: 100vw !important;
}

.calendar-day {
  height: 5rem;
}


/* SPLIDE */
.splide {
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

.splide__list {
  display: flex;
}

.splide {
  display: flex;
  justify-content: center;
}

.splide__track {
  max-width: 1320px;
}

.splide-container:hover {
  transition: .4s;
  background-color: var(--bs-primary);
  color: white;
}


header.header .splide-container {
  border: 1px solid var(--bs-light);
  height: 10em;
  width: 95%;
  backdrop-filter: blur(40px);
}

.clickable {
  cursor: pointer;
}

.conversations .profile-picture {
  --size: 4rem;
}

.bg-light .form-control {
  background-color: var(--bs-white) !important;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .2);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, .2);
}

.text-prevent-back-line {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

.text-nowrap {
  white-space: nowrap !important;
  text-overflow: ellipsis;
  overflow: hidden;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio (height/width) */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-container {
  position: relative;
  width: 100%;
  padding-bottom: 75.25%;
  /* 16:9 aspect ratio (9 / 16 * 100) */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container {
  max-width: 1240px !important;
}

.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: auto;
  margin-right: 10px;
  min-width: 25px;
  height: 25px;
  background-color: var(--bs-primary);
  border-radius: 15px;
}

.no-user-select {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
}

.avatar-editor canvas {
  width: 100% !important;
  height: auto !important;
}

/*
Pour les tablettes attentions !

@media (min-width: 992px) {
  .collapse.bg-white {
    background-color: transparent !important;
  }

  .collapse.bg-white .nav-link.text-black {
    color: white !important;
  }
}*/