@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,700");

:root {
  --blue-dark: #31006f;
  --purple-dark: #31006f;
  --blue-links: #31006f;
  --blue-light: #222a63;
  --title-bold: #06080a;
  --white-color: #ffffff;

  --color-primary: #b48226;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Rubik";
  height: 100vh;
  overflow: auto;
}
body .container-imperial {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(60deg, var(--color-primary), #120525);
}

.btn.focus,
.btn:focus {
  box-shadow: none;
}

/***************************** Header Css **********************************************/
header {
  width: 100%;
  min-height: 60px;
  background: var(--white-color);
  position: sticky;
  top: 0;
  z-index: 30;
}

header .content-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  color: var(--white-color);
  align-items: center;
  margin: 0 50px;
}

header .header-right {
  display: flex;
  align-items: center;
  column-gap: 10px;
  height: 100%;
}

header .header-right .listApps .listAppsContent {
  min-width: 300px !important;
  transform: translate3d(0, 50px, 0px) !important;
  right: 0 !important;
  left: auto !important;
  padding: 0;
  top: -5px !important;
}

.profilListContent {
  transform: translate3d(0, 50px, 0px) !important;
  left: inherit !important;
  right: 0 !important;
  padding: 0;
}

.profilListContent::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 40px;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-width: 0px 6px 10px 6px;
  border-color: transparent transparent var(--white-color) transparent;
}

header .header-right .listApps .listAppsContent h1 {
  font-size: 0.78rem !important;
  font-weight: 600;
  margin-bottom: 10px;
  padding: 10px;
}

header .header-right .cog-icon {
  width: 14px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  padding: 4px;
  text-align: center;
}

.blocs-apps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  column-gap: 20px;
  row-gap: 20px;
  height: 100px;
  overflow-y: auto;
  height: 60vh;
  padding: 10px;
  align-content: flex-start;
}

.blocs-apps::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-width: 0px 6px 10px 6px;
  border-color: transparent transparent var(--white-color) transparent;
}

.bloc-app {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  text-align: center;
}

.bloc-app:hover span {
  color: var(--blue-links);
}

.bloc-app a {
  text-decoration: none;
  color: #000;
}

.bloc-app i {
  font-size: 1.56rem;
}

.bloc-app span {
  font-size: 0.84rem;
  font-weight: 500;
}

.notify-all {
  padding: 10px 20px;
  font-size: 0.84rem;
  text-decoration: none;
  color: var(--blue-links);
}

.notify-all i {
  font-size: 0.72rem;
}

.profil .name-user {
  font-size: 0.84rem;
  text-align: center;
  padding: 5px 10px;
  border-bottom: 1px solid #e6dfdf;
}

.profil .profil-item {
  font-size: 0.84rem;
}

.profil .profil-item i {
  margin-right: 5px;
}

header .header-right .listInfo {
  float: left;
  padding: 5px;
  font-size: 1.2rem;
  margin-left: 20px;
  position: relative;
}

header .header-right .listInfo a {
  text-decoration: none;
  color: var(--white-color);
  display: none;
}

header .header-right .headerItems {
  margin-bottom: 0;
  display: flex;
  position: relative;
  z-index: 99;
  background: var(--color-primary);
  color: var(--white-color);
  border: 1px solid #a5afbf;
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0;
  list-style-type: none;
}

header .header-right .headerItems li {
  display: inline-block;
  padding: 5px 15px;
  cursor: pointer;
}

header .header-right .headerItems li span {
  display: none;
}

header .header-right .headerItems li:nth-child(2) {
  border-left: 1px solid #a5afbf;
  border-right: 1px solid #a5afbf;
}

header .header-right .profil .dropdown .dropdown-toggle {
  text-decoration: none;
  color: var(--white-color);
}

header .header-right .profil .dropdown img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

header .header-right .listApps .dropdown .listApps-dropdown {
  font-size: 1.2rem;
  margin-left: 20px;
  cursor: pointer;
  color: var(--white-color);
  padding: 0;
  margin-top: 5px;
}

/***************************** End Header Css **********************************************/

/***************************** Content Css ************************************************/
.login-forms {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.login-content {
  width: 100%;
  min-height: calc(100vh - 60px);
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 2% 2% 0% 2%;
  column-gap: 100px;
}

.login-content-imperial {
  width: 100%;
  overflow: hidden;
  flex: 1 1 0%;
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 2rem 1rem;
  column-gap: 100px;
  background-image: url("/assets/images/imperial_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.loader-walaw {
  width: 48px;
  height: 48px;
  border: 5px solid #c31a30;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.login-content-forms {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.login-content .login-content-forms,
.login-content .login-content-slide {
  /* width: calc(100vw / 2); */
  display: flex;
  align-items: center;
}

.login-content .login-content-forms {
  /* background: var(--white-color); */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#slider-search-login {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  height: 520px;
  max-height: 100%;
}

#slider-search-login .carousel-control-next-icon,
#slider-search-login .carousel-control-prev-icon {
  background-image: none !important;
}

#slider-search-login .carousel-control-prev-icon i,
#slider-search-login .carousel-control-next-icon i {
  font-size: 1.5rem !important;
}

#slider-search-login #sliderApps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-slider-search .moteur_de_recherche form {
  width: 100%;
  height: 50px;
  position: relative;
}

.login-slider-search .moteur_de_recherche form input {
  width: 100%;
  height: 50px;
  border: 1px #dbdfe933 solid;
  color: white;
  padding: 15px;
  padding-left: 30px;
  border-radius: 5px;
  outline: none;
  background-color: #fcfcfc1a;
}

.login-slider-search .moteur_de_recherche form .icon_search {
  position: absolute;
  left: 10px;
  top: 15px;
  border-radius: 5px;
  border: 0;
  outline: none;
  cursor: pointer;
}

#sliderApps .carousel-control-next,
#sliderApps .carousel-control-prev {
  width: auto;
}

#sliderApps .carousel-item .content-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 20px;
  text-align: center;
  position: relative;
  top: 50%;
  margin: 0 30px;
}

#sliderApps .carousel-item .content-slide img {
  height: 130px;
}

#sliderApps .carousel-item .content-slide h1 {
  font-size: 1.5rem;
  color: var(--white-color);
  margin-bottom: 25px;
}

#sliderApps .carousel-item .content-slide p {
  font-size: 0.9rem;
  color: var(--white-color);
}

#sliderApps .carousel-item .content-slide .aps {
  display: inline-block;
}

#sliderApps .carousel-item .content-slide .aps .app {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  display: inline-block;
  margin: 0 3px 5px;
  font-size: 0.72rem;
  box-shadow: 0 3px 20px #0000000f;
}

#sliderApps .carousel-item .content-slide .aps .app a {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--white-color);
}

#sliderApps .carousel-item .content-slide .aps .app a:hover {
  text-decoration: none;
}

#sliderApps .carousel-item .content-slide .aps .app a > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
}

#sliderApps .carousel-item .content-slide .aps .app a > div i {
  font-size: 1.5rem;
}

#sliderApps .carousel-item .content-slide .aps .app span {
  display: block;
}

.content-page {
  display: grid;
  align-items: center;
  height: calc(100vh - 65px);
  padding-top: 30px;
}

.login-content-forms .log-in-email {
  padding: 50px;
  height: 100%;
  width: 100%;
}

.login-content-forms .create-acount-form {
  position: relative;
}

.login-content-forms .content-form {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: white;
  border-radius: 5px;
  padding: 36px;
}

.login-content-forms .content-form .form-shad {
  box-shadow: 0 3px 20px #0000000f;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 25px;
  border-radius: 10px;
  position: relative;
}

.login-content-forms .content-form .form-shad div .icn-app {
  font-size: 1.8rem;
  color: var(--blue-links);
  text-align: center;
  margin-bottom: 13px;
}

.login-content-forms .content-form .form-shad div h1 {
  font-size: 1.26rem;
  color: var(--title-bold);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}

.login-content-forms .content-form .form-shad div h2 {
  font-size: 24px;
  color: var(--title-bold);
  text-align: start;
  margin-bottom: 0px;
}
.login-content-forms .content-form .form-shad div p {
  margin-bottom: 30px;
  margin-top: 1px;
  text-align: start;
  color: #33455a;
}

.input-form-login {
  width: 100%;
  height: 45px;
  border-radius: 4px;
  border: 1px solid #a5afbf;
  text-indent: 20px;
  margin-bottom: 5px;
  position: relative;
}

.login-content-forms .content-form .form-shad div .passInput {
  margin-bottom: 21px;
}

.login-content-forms
  .content-form
  .form-shad
  div
  input:focus-visible::placeholder {
  color: transparent;
}

.login-content-forms .content-form .form-shad .input-form-login:focus-visible,
.content-form .tab .tab-content input[type="text"]:focus-visible,
select[class="location"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible {
  outline: 2px solid var(--blue-links) !important;
  position: relative;
}

.login-content-forms .content-form .form-shad .inputemail {
  position: relative;
}

.login-content-forms .content-form .form-shad .inputemail span {
  position: absolute;
  top: -15px;
  left: 20px;
  background: var(--white-color);
  padding: 0 10px;
  color: var(--blue-links);
}

.login-content-forms .content-form .form-shad .tab .input-group span {
  position: absolute;
  top: -15px;
  left: 20px;
  background: var(--white-color);
  padding: 0 10px;
  color: var(--blue-links);
}

.login-content-forms .content-form .form-shad .input-form-login::placeholder {
  font-size: 0.9rem;
  color: #a5afbf;
}

.emailvalid {
  border: 1px solid #a5afbf;
  width: 70%;
  margin: 5px 0px 25px 0px;
  /* height: 30px; */
  line-height: 30px;
  border-radius: 4px;
  /* margin-bottom: 25px; */
  display: flex;
  /* grid-template-columns: 35px 1fr 15px; */
  background: transparent;
  padding: 4px 8px;
}

.emailvalid .icnprofil {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 22px;
  margin: 4px 5px;
  border-radius: 50%;
  background: #a5afbf;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.emailvalid span {
  overflow: hidden;
  margin-right: 5px;
  font-size: 15px;
  color: var(--title-bold);
  flex-grow: 1;
}
.emailvalid a {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(49, 0, 111, 1) !important;
  font-weight: 500;
  font-size: 14px;
}

.labelPass {
  font-size: 0.9rem;
  color: var(--title-bold);
}

.emailvalid .icnprofil i {
  font-size: 0.72rem;
  color: var(--white-color);
}

.emailvalid .arrowprofil {
  align-self: flex-end;
  color: #a5afbf;
}

.emailvalid .arrowprofil i {
  font-size: 0.72rem;
}

.login-content-forms .content-form .form-shad div .forgot-pass,
.forgot-pass {
  font-size: 0.9rem;
  color: var(--blue-links);
  text-decoration: none;
  font-weight: 600;
  line-height: 40px;
  margin: 0;
}

.forgot-pass {
  margin-top: 60px;
}

.login-content-forms .content-form .form-shad div .form-login-buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 13px;
}

.login-content-forms
  .content-form
  .form-shad
  div
  .form-login-buttons
  .create-account {
  color: var(--color-primary);
  line-height: 15px;
  margin-left: 3px;
  font-weight: 500;
}

.login-content-forms
  .content-form
  .form-shad
  div
  .form-login-buttons
  .nextStep {
  border-radius: 5px;
  background: var(--blue-links);
  color: var(--white-color);
  height: 44px;
  width: 100%;
}

.login-content-forms .login-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: rgb(33, 86, 163, 0.03);
  border-radius: 0 0 10px 10px;
  padding: 15px 40px;
  display: flex;
  justify-content: space-between;
  z-index: 20;
}

.link-cp {
  display: flex;
}

.login-content-forms .login-footer div select {
  background: #f1f5f9;
  border: 1px solid #a5afbf;
  border-radius: 3px;
  color: #a5afbf;
  padding: 3px 0;
  font-size: 0.6rem;
  padding: 8px 36px 7.5px 10px;
  outline: none;
}

.login-content-forms .login-footer .login-menu-footer {
  list-style-type: none;
  line-height: 15px;
}

.login-content-forms .login-footer .login-menu-footer li {
  display: inline-block;
  font-size: 0.72rem;
  color: #a5afbf;
  margin-right: 15px;
  text-decoration: underline;
  cursor: pointer;
}

.login-content-forms .login-footer .login-menu-footer li:first-child {
  text-decoration: none;
  cursor: auto;
}

/***************************** Style the form ****************************/
#regForm {
  overflow: hidden;
  width: 100%;
  /* margin: 0 auto; */
  display: grid;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
#log-in-email .tab {
  /* display: none; */
  width: 100%;
  padding: 0px 10px;
  position: relative;
  top: 0;
  left: 0;
}

.content-form .tab {
  height: 100%;
  /* min-height: calc(100vh - 320px); */
  background-repeat: no-repeat;
  background-position: top right;
  position: relative;
  border-radius: 10px;
}

.log-in-email .tab {
  height: 100%;
  background: transparent;
  position: relative !important;
}

.content-form .tab .tab-content {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 320px);
}

.content-form .tab .tab-content h1 {
  margin-top: 38px;
  /* font-size: 1.14rem; */
  color: var(--title-bold);
  font-weight: 700;
}

.content-form .tab .tab-content h5 {
  margin-top: 18px;
  font-size: 0.84rem;
  color: var(--title-bold);
}

.content-form .tab .tab-content h5 i {
  color: var(--white-color);
  background-color: #a5afbf;
  border-radius: 50%;
}

.content-form .tab .tab-content input[type="text"],
select[class="location"],
input[type="email"],
input[type="password"] {
  width: 100%;
  border: 1px solid #a5afbf;
  border-radius: 4px;
  color: #323334;
  height: 40px;
  text-indent: 16.5px;
  background: var(--white-color);
}

/* .content-form .tab .tab-content .input-e {
  margin-top: 30px;
} */

.content-form .tab .tab-content p {
  margin-top: 4px;
  margin-bottom: 25px;
  color: var(--title-bold);
}

.content-form .tab .tab-content3 {
  width: 100%;
}

.content-form .tab .tab-content .insc-inputs {
  margin-top: 30px;
}

.content-form .tab .tab-content .insc-inputs input {
  margin-top: 15px;
}

.content-form .tab .tab-content .insc-inputs .form-check {
  margin-top: 13px;
  font-size: 0.9rem;
}

.form-shad-account {
  height: 100%;
}

.form-shad-account .bloc_title {
  display: flex;
  align-items: center;
}

.form-shad-account .bloc_title h1 {
  width: fit-content;
  margin: 0 auto !important;
}

.form-shad-account .bloc_title button {
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  background: transparent;
  color: #000000a3;
  cursor: pointer;
}

.form-shad-account .bloc_title button:hover {
  color: var(--blue-links);
}

.form-shad-account .bloc_title button:focus {
  outline: none;
}

.form-shad-account .search_apps {
  display: flex;
  align-items: center;
  width: 50%;
  margin: 30px auto 50px auto;
  gap: 10px;
  border: 1px solid #00000057;
  padding: 5px 10px;
  border-radius: 3px;
}

.form-shad-account .search_apps input {
  width: 100%;
  border: none;
}

.form-shad-account .search_apps input:focus {
  outline: none;
}

.content-form .tab .tab-btns {
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  height: 40px;
  /* line-height: 40px; */
  margin-top: 20px;
  flex-direction: column;
  gap: 8px;
}

.content-form .tab .tab-btns .compte-exist {
  color: var(--blue-links);
  line-height: 15px;
  margin-left: 3px;
  font-weight: 500;
}

.content-form .tab .tab-btns .clickNext {
  height: 100%;
  width: 100%;
  background: var(--blue-links);
  color: var(--white-color);
  text-align: center;
  line-height: 11px;
  text-transform: capitalize;
  border-radius: 5px;
  padding: 16px 20px;
  text-decoration: none;
  outline: none;
  border: none;
  cursor: pointer;
}
.content-form .tab .tab-btns .clickBack {
  height: 100%;
  /* width: 100%; */
  background: #ffffff;
  color: #a5afbf;
  text-align: center;
  line-height: 11px;
  text-transform: capitalize;
  border-radius: 5px;
  padding: 16px 20px;
  text-decoration: none;
  outline: none;
  border: 1px #d1dbe3 solid;
  cursor: pointer;
}

.content-form .tab .tab-content .cpt-verife {
  margin-top: 70px;
}

.content-form .tab .tab-content .cpt-verife h4 {
  color: #00af42;
  font-weight: 900;
  margin-bottom: 20px;
  font-size: 1rem;
}

.content-form .tab .tab-content .cpt-verife p {
  margin-top: 0;
  color: var(--title-bold);
}

.content-form .tab .tab-content .loc-step {
  margin-top: 36px;
}

.content-form .tab .tab-content .loc-step span {
  margin-bottom: 10px;
  font-size: 0.72rem;
  color: var(--title-bold);
}

.content-form .tab .tab-content .loc-step input::placeholder {
  font-size: 0.9rem;
  color: #a5afbf;
}

.content-form .tab .tab-content9 {
  width: 60%;
}

.content-form .tab .tab-content9 p {
  font-size: 0.84rem !important;
  color: var(--title-bold);
  margin-top: 20px;
}

.content-form .tab .tab-content9 .verifMobile-step {
  position: relative;
}

.content-form .tab .tab-content9 .verifMobile-step .getcode {
  position: absolute;
  right: 10px;
  top: calc(50% + 10px);
  color: #f8ab4c;
  text-decoration: none;
}

.content-form .tab .tab-content9 input {
  margin-top: 40px;
  padding-right: 35%;
}

.content-form .tab .tab-content9 span {
  font-size: 0.78rem;
  color: #a5afbf;
}

.content-form .tab .tab-content9 .change-method {
  margin-top: 54px;
}

.content-form .tab .tab-content9 .change-method a:first-child {
  color: var(--blue-links);
  font-size: 0.9rem;
  font-weight: 700;
  display: block;
}

.content-form .tab .tab-content9 .change-method a:last-child {
  color: var(--blue-links);
  font-size: 0.84rem;
  display: block;
}

.btn-imp {
  height: 100%;
  background: var(--blue-links);
  color: var(--white-color) !important;
  text-align: center;
  line-height: 20px;
  text-transform: capitalize;
  border-radius: 5px;
  padding: 11px 20px;
  text-decoration: none;
}

.btn-imp:hover {
  text-decoration: none;
}

.tab-content-profils {
  width: 100% !important;
}

.tab-content-profils h1 {
  color: var(--title-bold);
  /* font-size: 1.26rem; */
  text-align: start;
  margin: 0 !important;
}

.tab-content-profils p {
  /* font-size: 0.84rem; */
  color: var(--title-bold);
  text-align: start;
  /* margin-top: 23px !important; */
  margin-bottom: 55px;
}

.tab-content-profils p span {
  color: var(--blue-links);
  font-weight: 700;
}

.list-profils {
  list-style-type: none;
  padding-left: 0;
  max-height: 380px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.list-profils a {
  text-decoration: none;
}

.list-profils a:last-child .profil-bloc .info-profil {
  display: flex;
  align-items: center;
  text-transform: lowercase;
}

.list-profils .profil-bloc a {
  display: grid;
  grid-template-columns: 50px 1fr 15px;
  background: #fafafa;
  border-radius: 10px;
  padding: 17px;
  /* margin-bottom: 5px; */
  cursor: pointer;
  align-items: center;
}

.list-profils .profil-bloc a:hover {
  background: #fafaff;
}

.list-profils .profil-bloc .img-profil {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
}

.list-profils .profil-bloc .img-profil img {
  width: 100%;
}

.list-profils .profil-bloc .info-profil {
  overflow: hidden;
}

.list-profils .profil-bloc .info-profil h3 {
  font-size: 0.9rem;
  color: var(--title-bold);
  text-transform: capitalize;
  margin-bottom: 2px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-profils .profil-bloc .info-profil h3 b {
  text-transform: uppercase;
}

.list-profils .profil-bloc .info-profil span {
  display: block;
  font-size: 0.84rem;
  color: var(--title-bold);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #04aa6d;
}

.message {
  font-size: 0.78rem;
  color: #b00020;
}

.leftclick {
  -webkit-animation-name: stepAnimation;
  -webkit-animation-duration: 0.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes stepAnimation {
  from {
    left: 0;
  }

  to {
    left: -100%;
  }
}

.input-number {
  position: relative;
  margin-top: 1rem;
}

.input-number input {
  padding-left: 130px;
  padding-right: 20px;
  font-size: 0.84rem;
  color: #a5afbf;
}

.input-number input::placeholder {
  color: #a5afbf;
}

.input-number + p {
  margin-top: 25px !important;
  font-size: 0.84rem !important;
  color: #99a2b1 !important;
}

.f-dropdown {
  --max-scroll: 3;
  position: absolute;
  z-index: 10;
  width: 120px;
  top: 50%;
  left: 10px;
  transform: translate(0px, -50%);
}

.f-dropdown select {
  display: none;
  border: none;
  position: relative;
  font-size: 0.84rem;
  color: #a5afbf;
}

.f-dropdown::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 0;
  width: 1px;
  height: 17px;
  background: #dfe6ee;
  z-index: 10;
}

.f-dropdown > span {
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  position: relative;
  color: #bbb;
  border: none;
  background: var(--white-color);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.f-dropdown > span > span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
  color: #a5afbf;
  font-size: 0.84rem;
}

.f-dropdown > span img {
  width: 30px;
  margin-right: 10px;
}

.f-dropdown > span:before,
.f-dropdown > span:after {
  content: "";
  display: block;
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  top: 50%;
  right: 12px;
  background: #a5afbf;
  transition: all 0.3s ease;
}

.f-dropdown > span:before {
  margin-right: 4px;
  transform: scale(0.96, 0.8) rotate(50deg);
}

.f-dropdown > span:after {
  transform: scale(0.96, 0.8) rotate(-50deg);
}

.f-dropdown ul {
  margin: 0;
  padding: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  max-height: calc(var(--max-scroll) * 46px);
  top: 40px;
  left: 0;
  z-index: 1;
  right: 0;
  background: var(--white-color);
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  transform-origin: 0 0;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
  transform: translate(0, 5px);
}

/* width */
.f-dropdown ul::-webkit-scrollbar,
.list-profils::-webkit-scrollbar,
.blocs-apps::-webkit-scrollbar {
  width: 6px;
}

/* Track */
.f-dropdown ul::-webkit-scrollbar-track,
.list-profils::-webkit-scrollbar-track,
.blocs-apps::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
.f-dropdown ul::-webkit-scrollbar-thumb,
.list-profils::-webkit-scrollbar-thumb,
.blocs-apps::-webkit-scrollbar-thumb {
  background: var(--blue-light);
  border-radius: 10px;
}

/* Handle on hover */
.f-dropdown ul::-webkit-scrollbar-thumb,
.list-profils::-webkit-scrollbar-thumb,
.blocs-apps::-webkit-scrollbar-thumb {
  background: var(--blue-links);
}

.f-dropdown ul li {
  padding: 0;
  margin: 0;
}

.f-dropdown ul li a {
  cursor: pointer;
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  outline: none;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.f-dropdown ul li a img {
  width: 30px;
  margin-right: 10px;
}

.f-dropdown ul li a:hover {
  color: #5c6bc0;
}

.f-dropdown ul li.active a {
  color: var(--white-color);
  background: #303f9f;
}

.f-dropdown ul li.active a:before,
.f-dropdown ul li.active a:after {
  --scale: 0.6;
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  position: absolute;
  right: 12px;
  top: 50%;
  opacity: 0;
  background: var(--white-color);
  transition: all 0.2s ease;
}

.f-dropdown ul li.active a:before {
  transform: rotate(45deg) scale(var(--scale));
}

.f-dropdown ul li.active a:after {
  transform: rotate(-45deg) scale(var(--scale));
}

.f-dropdown ul li.active a:hover:before,
.f-dropdown ul li.active a:hover:after {
  --scale: 0.9;
  opacity: 1;
}

.f-dropdown ul li:first-child a {
  border-radius: 6px 6px 0 0;
}

.f-dropdown ul li:last-child a {
  border-radius: 0 0 6px 6px;
}

.f-dropdown.disabled {
  opacity: 0.7;
}

.f-dropdown.disabled > span {
  cursor: not-allowed;
}

.f-dropdown.filled > span {
  color: #000;
}

.f-dropdown.open {
  z-index: 15;
}

.f-dropdown.open > span {
  border-color: #aaa;
}

.f-dropdown.open > span:before,
.f-dropdown.open > span:after {
  background: #000;
}

.f-dropdown.open > span:before {
  transform: scale(0.96, 0.8) rotate(-50deg);
}

.f-dropdown.open > span:after {
  transform: scale(0.96, 0.8) rotate(50deg);
}

.f-dropdown.open ul {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 12px);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}

/* --------------------------- */
.f-group {
  max-width: 250px;
  margin: 0 auto;
  text-align: left;
}

.f-group select {
  width: 100%;
}

.f-control {
  font-size: 0.84rem;
  line-height: normal;
  color: #000;
  display: inline-block;
  background-color: var(--white-color);
  border: #ccc 1px solid;
  border-radius: 6px;
  padding: 8px 12px;
  outline: none;
  max-width: 250px;
}

.tab.act {
  display: block;
  height: 100%;
}

.loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(248, 250, 252, 0.9);
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 25;
  backdrop-filter: blur(2px);
}

.loading .load {
  text-align: center;
  width: 100%;
}

.loading .load img {
  margin-bottom: 22px;
  animation: loadTurn 1.7s linear infinite;
}

.loading .load h1 {
  margin-bottom: 10px;
  font-size: 1.14rem;
  color: var(--blue-light);
  font-weight: 700;
}

.loading .load p {
  font-size: 0.84rem;
  color: var(--title-bold);
  margin-bottom: 0;
}
.loading .load i {
  color: var(--blue-light);
  margin-bottom: 19px;
  font-size: 35px;
}

@keyframes loadTurn {
  0% {
    transform: rotate(0deg);
  }

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

.typeConnecion {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgb(30, 37, 89, 0.5);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backdrop-filter: blur(2px);
}

.typeConnecion .contenttypeConnection {
  background: var(--white-color);
  padding: 20px;
  border-radius: 10px;
  width: 60%;
  margin: auto;
}

.typeConnecion .contenttypeConnection .typeconnectionHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.typeConnecion .contenttypeConnection .typeconnectionHeader h3 {
  font-size: 1rem;
  color: var(--title-bold);
  font-weight: 700;
}

.typeConnecion .contenttypeConnection .typeconnectionHeader a {
  font-size: 1rem;
  color: var(--title-bold);
  font-weight: 700;
  text-decoration: none;
}

.typeConnecion .contenttypeConnection .typeconnectionBody {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.typeConnecion .contenttypeConnection .typeconnectionBody li {
  width: 100%;
  height: 70px;
  border-radius: 5px;
  background: #fafafa;
  margin-bottom: 5px;
  padding: 27px;
  display: flex;
  cursor: pointer;
}

.typeConnecion .contenttypeConnection .typeconnectionBody li:last-child {
  margin-bottom: 0;
}

.typeConnecion .contenttypeConnection .typeconnectionBody li h6 {
  margin-left: 20px;
  color: var(--title-bold);
  font-size: 0.9rem;
}

.typeConnecion .contenttypeConnection .typeconnectionBody li:hover {
  background: #f1f5fa;
}

.typeConnecion .contenttypeConnection .typeconnectionBody li:hover h6 {
  color: var(--blue-links);
}

.anim {
  animation-name: trans;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes trans {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

.content-form .tab:nth-child(1) {
  z-index: 10;
}

.content-form .tab:nth-child(2) {
  z-index: 9;
}

.content-form .tab:nth-child(3) {
  z-index: 8;
}

.content-form .tab:nth-child(4) {
  z-index: 7;
}

.content-form .tab:nth-child(5) {
  z-index: 6;
}

.secActive {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
}

/***************************** End  Content Css ************************************************/

/************************* width maximum 1400 Css *********************************************/
@media screen and (max-width: 1400px) {
  .login-content-forms .content-form .form-shad {
    padding: 25px;
  }

  #regForm {
    width: 100%;
  }

  .content-form .tab {
    background-size: 70%;
  }

  .content-form .tab .tab-content {
    width: 100%;
  }

  .login-content-forms .login-footer .login-menu-footer {
    line-height: 15px;
  }

  .content,
  header .content-header {
    margin: 0px 32px;
  }
}

/************************* width maximum 1023 et minimum 767 Css ***********************/
@media screen and (min-width: 767px) and (max-width: 1023px) {
  .left {
    order: 2;
    margin: 30px 0px;
  }

  .right {
    order: 1;
    margin: 30px 0px;
  }

  .login-content-forms {
    width: 100%;
  }

  header .content-header {
    margin: 0px 30px !important;
  }
  .content-form .tab .tab-content input[type="text"],
  select[class="location"],
  input[type="email"],
  input[type="password"] {
    height: 38px;
  }
}

/************************* width maximum 1023 Css *********************************************/
@media screen and (max-width: 1023px) {
  .login-content {
    flex-direction: column;
    row-gap: 50px;
  }

  .login-content .login-content-forms,
  .login-content .login-content-slide {
    width: 100%;
    margin: auto;
  }
  .footer-container {
    width: 100%;
    margin: auto;
  }
  .login-forms {
    width: 100%;
  }
  /* .login-content .login-content-forms {
    order: 1;
  } */

  .login-content .login-content-slide {
    order: 2;
    display: none;
  }
}

/************************* width maximum 767 Css *********************************************/
@media screen and (max-width: 767px) {
  .left {
    order: 2;
    margin: 30px 0px;
  }

  .right {
    order: 1;
    margin: 30px 0px;
  }

  .login-content-forms {
    width: 100%;
  }

  .content {
    margin: 0 30px;
  }

  .login-content-forms .log-in-email,
  .login-content-forms .log-in-password,
  .login-content-forms .create-acount-email,
  .login-content-forms .content-form {
    padding: 0px;
  }

  .login-content-forms .login-footer .login-menu-footer {
    line-height: 15px;
  }

  #regForm {
    width: 100%;
  }

  .login-content-forms .login-footer div select {
    padding: 8px 1px 7.5px 1px;
  }

  header .content-header {
    margin: 0px 30px !important;
  }

  .tab-content-profils .list-profils .profil-bloc a {
    padding: 10px;
  }

  .content-form .tab {
    padding: 10px;
  }

  .login-content-forms .login-footer {
    text-align: center;
    padding-left: 0;
  }

  .login-content-forms .login-footer div select {
    padding: 8px 30px 7.5px 30px;
  }

  .login-content-forms .login-footer .login-menu-footer li:first-child {
    display: block;
  }

  .login-content-forms .login-footer {
    padding: 14px 5px;
  }

  .login-content-forms .login-footer div:first-child {
    text-align: center;
    margin-bottom: 10px;
  }

  .content-page {
    display: inherit;
    margin: auto;
  }

  .content-form .tab .tab-btns {
    position: initial;
    margin: 30px 0;
    padding: 0;
  }
}

@media screen and (max-width: 600px) {
  header .header-right .headerItems li span {
    display: block;
  }

  header .header-right .headerItems li div {
    display: none;
  }

  header .content-header {
    margin: 0 5px !important;
  }

  .content {
    margin: 0px 10px;
  }

  .content-form .tab {
    background-image: none !important;
    padding: 0px;
  }

  .right {
    margin: 0;
    padding-right: 0;
  }

  .left {
    padding: 20px 30px;
  }

  .content {
    margin: 0;
    padding: 0;
  }

  .login-content-forms {
    border-radius: 0;
  }

  .content-form .tab .tab-btns {
    position: initial;
    padding: 0;
    margin: 40px 0;
  }

  .content-form .tab .tab-btns .compte-exist {
    line-height: 18px;
    padding-right: 10px;
  }

  .content-form .tab .tab-content {
    width: 100%;
  }

  .tab-content-profils .list-profils .profil-bloc a {
    grid-template-columns: 50px 1fr 10px;
  }

  .login-content-forms {
    margin-left: 0;
    margin: auto;
  }

  .content-form .tab .tab-content9 p {
    margin-top: 40px;
  }

  .login-content-forms .login-footer {
    position: initial;
    display: block;
    padding: 10px;
    height: auto;
  }

  header .header-right .listApps .listAppsContent {
    min-width: auto !important;
  }

  .login-content {
    padding: 20px;
  }
}

/************************* width maximum 320 Css *******************************/
@media screen and (max-width: 320px) {
  header .header-right .headerItems li {
    padding: 5px;
  }

  .login-content-forms .log-in-email {
    padding: 15px 0px;
  }
}

@media screen and (max-height: 750px) {
  html {
    font-size: 14px;
  }

  .content-form .tab,
  #slider-search-login {
    /* min-height: calc(95vh - 120px); */
    height: 100%;
  }

  .login-content-forms .log-in-email .tab {
    /* min-height: calc(100vh - 250px); */
    height: 100%;
  }
}

.loadFormLogin {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 25;
  background: #1e2559bd;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: #fff;
  visibility: hidden;
}

.loadFormLogin span i {
  font-size: 50px;
}

.loadFormLogin span {
  animation: spinLoad 0.6s ease-out infinite;
}

@keyframes spinLoad {
  100% {
    transform: rotate(360deg);
  }
}

.content-form .tab .tab-btns .backBtn {
  text-decoration: none;
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 25px;
}

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

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px transparent;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
}

.account-box {
  position: relative;
  overflow: hidden;
}
.account-box .logo-nl {
  text-align: center;
  padding: 20px;
}
.account-box .logo-nl img {
  width: 122px;
}
.account-box .logo-nl .app_logo {
  text-align: center;
  width: 120px;
  height: 120px;
  margin: auto;
  border-radius: 50%;
}
.account-box .logo-nl .app_logo > div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.account-box .logo-nl .app_logo .nampeapp {
  font-weight: 500;
  font-family: "Rubik", sans-serif;
  font-size: 16px;
  margin-top: 8px;
  display: block;
}
.account-box .app_logo .iconapp {
  display: block;
}
.account-box .app_logo .iconapp i {
  font-size: 40px;
}

.footer-container {
  background: transparent; /* No background */
  width: 100%;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-link {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  font-weight: 300;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-text {
  color: #ffffffb2;
  font-weight: 300;
}

.language-select {
  background: transparent;
  color: rgb(151, 151, 151);
  cursor: pointer;
}

.language-select:focus {
  box-shadow: none;
}