@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-ThinItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Prompt';
  src: url('../fonts/prompt/Prompt-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

:root {
  --theme: red;
  --white: #ffffff;
}

* {
  box-sizing: border-box;
  font-family: "Prompt", Sans-Serif;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.login_page {
  background-image: url('../../auth/bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  height: calc(100vh + 40px);
}

.login_page .container {
  position: absolute;
  width: 100%;
  height: inherit;
  background: rgba(255,0,0,.4);
}

.login_page .container .page_option ,
.moi .page_option {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login_page .container .page_option .help ,
.moi .page_option .help {
  height: 35px;
  width: 35px;
  background: rgba(255,255,255,.3);
  border-radius: 50%;
  color: var(--white);
  font-weight: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.login_page .container .page_option .select_lang  ,
.moi .page_option .select_lang {
  height: 25px;
  background: rgba(255,255,255,.3);
  color: var(--white);
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 20px;
  padding: 0 10px;
  cursor: pointer;
}

.login_page .container .page_option .select_lang span  ,
.moi .page_option  .select_lang span{
  display: block;
  margin: 0 10px;
  font-weight: 200;
}

.login_page .container .page_logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: -10px;
}
.login_page .container .page_logo img {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.login_page .container .page_logo h1 {
  text-align: center;
  color: var(--white);
}

.login_page .container .page_logo .wel_msg {
  display: block;
  text-align: center;
  margin-top: -25px;
  color: var(--white);
  font-weight: 400;
}

.login_page .form-container {
  width: 90%;
  margin: 20px auto;
  background: var(--white);
  border-radius: 20px;
  padding-bottom: 30px;
  position: relative;
}

.login_page .form-container .auth_form {
  width: 90%;
  margin: 20px auto;
  padding-top: 20px;
  position: relative;
}

.login_page .form-container .auth_form input {
  display: block;
  margin-top: 10px;
  margin-bottom: 20px;
  width:100% ;
  padding: 10px;
  border-radius: 20px;
  outline: none;
  border: 2px solid gold;
  font-weight: 900;
}

.login_page .form-container .auth_form .tel::placeholder {
  font-weight: 200;
}

.login_page .form-container .auth_form .smt_btn {
    display: block;
    position: relative;
    width: 100%;
    border: 0;
    background: orange;
    color: black;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: -30px!important;
    font-weight: 600;
    margin-top: 30px;
    z-index: 2;
    height: 50px; /* Ajoutez une hauteur pour l'élément */
}

.login_page .form-container .auth_form .label span {
  font-size: 14px;
  color: gray;
  font-weight: 200;
  font-family: Sans-Serif!important;
}

.login_page .form-container .auth_form .smt_btn:before {
    content: attr(value);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* Définissez la hauteur de l'élément :before */
    background: gold;
    position: absolute;
    top: 0; /* Positionnez l'élément :before par rapport à son parent */
    left: 0;
    z-index: 1; /* Utilisez z-index pour positionner l'élément :before derrière le texte */
    margin-top: -8px;
    border-radius: 10px;
    color: black;
    cursor: pointer;
}

.login_page .form-container .auth_form .smt_btn:hover:before {
    letter-spacing: 0.5px;
    transition: all 0.5s ease;
    opacity: 1;
}

.login_page .form-container .auth_form .smt_btn:not(:hover):before {
    letter-spacing: 0;
    transition: .3s;
}

body > div > div.form-container > form > div:nth-child(1) > span > svg,
body > div > div.form-container > form > div:nth-child(2) > span > svg,
body > div > div.form-container > form #k2 {
  color: gray;
  font-size: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
  border: .1px solid;
  border-radius: 50%;
}

.login_page .user-help {
  width: 90%;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  flex-direction: column;
}

.login_page .user-help div {
  color: white;
}

.login_page .user-help a {
  color: gold;
  display: block;
  text-align: center;
}

.moi .page_option {
  height: 400px;
  background: linear-gradient(to bottom, rgba(255,165,0,.8) 5%, transparent);
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: initial;
  padding: 10px;
}

.moi .page_option .select_lang {
  margin-top: 10px;
  margin-right: 15px;
  font-size: 12px;
  font-weight: bold!important;
}

.moi .page_option .help {
  margin-top: 10px;
  margin-left: 65px;
  border: 0px solid white;
  position: relative;
  border-radius: 50% 40px 50% 0;
  text-shadow: 1px 1px 1px #0000006e;
}

.moi .page_option .help img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.moi .page_option .help .ui {
  font-size: 12px;
  font-weight: 300;
  margin-left: 10px;
}

.moi .page_option .help .ui .tel {
  display: flex;
}

.moi .page_option .help .ui .tel span {
  font-weight: 300;
  margin-right: 3px;
}

.moi .dashboard {
	width:90%;
	height:210px;
	border-radius:20px;
	background: rgb(255,165,0);
	margin:20px auto;
	position:relative;
	margin-top: -320px;
	box-shadow: 0 0 .3em rgba(0,0,0,.1);
	user-select: none;
  -webkit-user-select: none;
}

.moi .dashboard .actifs {
  width: 90%;
  margin: auto;
  padding: 10px 20px;
  margin-top: 8px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.moi .dashboard .actifs span {
  font-weight: 600;
  margin-top: 15px;
  display: flex;
  align-items: center;
  color: white;
}

.moi .dashboard .actifs span::before {
  content: "";
  display: block;
  height: 10px;
  width: 4px;
  border-radius: 5px;
  background: white;
  margin-right: 10px;
}

.moi .dashboard .actifs a {
  text-decoration: none;
  color: white;
  border: 1px solid white;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 12px;
  display: block;
  margin-top: 15px;
  margin-left: 10px;
  font-weight: 700;
}

.moi .dashboard .montant {
  width: 80%;
  color: white;
  margin: auto;
  padding: 0 2px;
  font-size: 35px;
  font-weight: 600;
}

.moi .dashboard .montant span {
  font-size: 14px;
}

.moi .dashboard .bonus {
  width: 80%;
 padding: 0 2px;
 margin: auto;
 font-size: 14px;
 color: white;
 font-weight: 600;
}

.moi .dashboard .manage {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

.moi .dashboard .manage a {
  text-decoration: none;
  color: white;
  display: block;
  width: 125px;
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  margin-top: 15px;
}

.moi .dashboard .manage a .fa{
  margin-left: 10px!important;
}

.moi .main {
  width: 83%;
  margin: auto;
  font-size: 14px;
  font-weight: 400;
  margin-top: 40px;
}

.moi .main a {
  transition: .3s ease;
  user-select: none;
  -webkit-user-select: none;
}

.moi .main a:hover {
  color: rgb(255,165,0);
}

.moi .main .mct {
  text-decoration: none;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.moi .main .mct .mtxt {
  display: flex;
  align-items: center;
}

.moi .main .mct .mtxt .fa,
.moi .main .mct .mtxt .fab,
.moi .main .mct .mtxt .fas {
  margin-right: 20px!important;
  font-size: 15px!important;
  width: 20px!important;
}

.moi .main .mct .mtxt .fab {
  color: green!important;
}

.moi .main .mct .msyb .fa {
  color: silver;
}
.red-c {color: red!important;}

.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 80px;
  background: white;
  box-shadow: 0 0 .3em rgba(0,0,0,.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  z-index: 1000!important;
}

.footer a {
  display: block;
  font-size: 11px;
  word-wrap: wrap;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: black;
  max-width: 40px;
  text-decoration:  none;
  color: #000000a7;
}

.footer a:hover {
  color: rgb(255,165,0);
  transition: color .3s ease;
}

.footer a .ico .fa,
.footer a .ico .fas {
  font-size: 16px;
  font-weight: 600;
}

.footer a #pico {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -20px;
  border-top: .1px solid rgba(255,165,0,.2);
}

.footer a #pico .fas {
  font-size: 30px;
  color: rgb(255,165,0);
}

.floating-wa-btn {
  position: fixed;
  bottom: 100px;
  left: 30px;
  border-radius: 50%;
  box-shadow: 0 0 .5em rgba(0,0,0,.3);
  animation: zoom 3s infinite ease-in-out;
}

.floating-wa-btn a {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background: #25d366;
  color: white;
  font-size: 25px;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.login {
  background: #f1f1f1;
}

 .header {
  width: 100%;
  position: fixed;
  height: 50px;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000!important;
}

 .header .fa-arrow-left{
  font-size: 18px;
  cursor: pointer;
}

 .header .other {
  color: grey;
  font-size: 10px;
}

.login .container {
  width: 90%;
  margin: auto;
}

.login .container form {
  width: 100%;
}

.login .container form .form-group {
  margin-bottom: 15px;
}

.login .container form input {
  padding: 8px 10px;
  background: transparent;
  border-radius: 10px;
  border: 1px solid #80808069;
  width: 100%;
  box-sizing: border-box; /* pour inclure le padding dans la largeur */
}

.login .container form input::-webkit-input-placeholder {
  color: #8080807e;
  font-weight: 200;
  letter-spacing: 0;
  background: white;
  height: 20px!important;
}
.login .container form input:-moz-placeholder {
  color: #8080807e;
  font-weight: 200;
  letter-spacing: 0;
  background: white;
  height: 20px!important;
}
.login .container form input::-moz-placeholder {
  color: #8080807e;
  font-weight: 200;
  letter-spacing: 0;
  background: white;
  height: 20px!important;
}
.login .container form input:-ms-input-placeholder {
  color: #8080807e;
  font-weight: 200;
  letter-spacing: 0; 
  background: white;
  height: 20px!important;
}


.login .container form input:disabled {
  width: 85px;
  padding: 8px 10px;
  margin-right: 5px;
  border: 1px solid silver;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}

.login .container form .form-group {
  display: flex;
  align-items: center;
}

.login .container form .f2 {
  border: 1px solid #80808078;
  padding: 5px 10px;
  border-radius: 10px;
}

.login .container form .f2 input {
  border: none;
}

.login .container form .f2 label {
  width: 200px;
  letter-spacing: 0;
  font-size: 14px;
  font-weight: 400;
}

.login .container form .f3 {
  border-radius: 10px;
  border: 1px solid #8080808f;
  padding: 5px 10px;
}

.login .container form .f3 .captcha-area {
  display: flex;
}

.login .container form .f3 label {
  width: 100px;
  font-size: 12px;
  letter-spacing: 0;
}

.login .container form input {
  outline: none!important;
  outline-color: transparent;
  font-weight: 900;
  letter-spacing: 1px;
}

.login .container form .f3 .captcha-area input {
  width: 100%;
  margin-right: 10px;
  border: none;
}

.login .container form .f3 .captcha-area img {
  display: block;
  width: 70px;
  margin-right: 5px;
  border-radius: 10px;
}

.login small {
  font-size: 11px;
  font-weight: 400;
  margin-bottom: 15px;
}

.login .container form button {
  display: block;
  margin: 20px auto;
  background: rgb(255,165,0);
  color: white;
  padding: 8px 20px;
  border-radius: 5px;
  border: none;
  font-weight: 600;
  min-width: 160px!important;
}

.login .or {
  width: 90%;
  margin: 0px auto;
  display: flex;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
}

.login .or a {
  color: #00a0ff;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}

.login .or .l1,
.login .or .l2 {
  height: .1px;
  border: 1px solid #00a0ff10;
  width: 60px;
  margin: 0px 5px;
  margin-top: -8px;
}

.captcha_msg {
  font-size: 12px!important;
  margin-top: -40px;
  font-weight: 600;
  color: red;
}

.records {
  background: #f1f1f1;
}

.records .container {
  width: 91%;
  margin: auto;
  margin-top: -25px;
  display: flex;
  flex-direction: column-reverse;
}

.records .container .content {
  height: 80px;
  width: 100%;
  border-radius: 10px;
  background: rgb(255,165,0);
  margin-bottom: 20px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  cursor: pointer;
}

.records .container .content .label {
  font-weight: 400!important;
}

.records .container .content .label .la1 {
  margin-bottom: 10px;
  position: relative;
  margin-left: 13px;
}

.records .container .content .label .la1 .fa-solid {
  font-size: 12px!important;
}

.records .container .content .label .la1::before {
  content: "";
  display: block;
  width: 3px;
  height: 8px;
  border-radius: 10px;
  background: white;
  color: white;
  position: absolute;
  margin-top: 7px;
  margin-left: -13px;
}

.records .container .content .label .la2 span{
  font-size: 13px;
  font-weight: 600;
}

.records .container .content .amount{
  font-size: 16px;
}

.records .container .content .amount span {
  font-size: 10px;
}

.moi {
  background: #f1f1f1;
}

.moi .container {
  width: 90%;
  border-radius: 10px;
  background: rgb(255,165,0);
  margin: 15px auto;
 margin-top: -20px;
 color: white;
 font-size: 14px;
 font-weight: 600;
 padding: 20px;
}

.moi .container .qrcode {
  height: 200px;
  width: 210px;
  margin: auto;
  margin-left: calc(auto -20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.moi .container .refLink .label{
  font-weight: 400;
}

.moi .container .refLink .link{
  width: 100%;
  border: .1px solid grey;
  font-size: 11px;
  padding: 10px;
  border-radius: 10px;
  margin: auto;
  background: white;
  color: rgb(255,165,0);
  overflow: hidden;
  margin-bottom: 10px;
}

.moi .container .refLink button {
  padding: 10px;
  border: none;
  border-radius: 10px;
  width: 100%;
  margin: 5px auto;
  color: black;
  font-weight: 600;
  cursor: pointer;
}

.moi .mds {
  width: 90%;
  margin: 10px auto;
  margin-bottom: 40px;
  margin-top: -35px;
}

.moi .mds a {
  display: block;
  border-radius: 10px;
  text-decoration: none;
  color: black;
  font-weight: 600;
}

.moi .mds a .ch {
  font-size: 30px;
  color: rgb(255,165,0);
}

.moi .mds a .ch span {
  font-size: 12px!important;
  margin-top: -10px;
}

.moi .mds2 {
  background: rgb(255,165,0);
  width: 100%;
  border-radius: 10px;
  padding: 10px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.moi .mds2 .vue {
  text-align: center;
}

.moi .mds2 .vue p:first-child {
  margin: 0;
  margin-left: 7px;
}

.moi .mds2 .vue p:last-child {
  font-size: 16px;
  margin: 0;
}

.moi .mds2 .vue p:first-child::before {
  content: "";
  display: block;
  height: 8px;
  width: 3px;
  border-radius: 10px;
  background: white;
  position: absolute;
  margin-top: 5px;
  margin-left: -7px;
}

.list {
  background: #f1f1f1;
}

.list .container {
  width: 90%;
  margin: auto;
  margin-bottom: 20px;
  margin-top: -23px;
}

.list .container .lu {
  background: rgb(255,165,0);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
  margin-top: -10px;
}

.list .container .lu .num {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 13px;
  font-weight: 400;
}

.vip {
  background: #f1f1f1;
}

.vip .container {
  width: 95%;
  margin: auto;
  background: white;
  padding: 30px 10px;
  border-radius: 10px;
  margin-top: -20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.vip .container .vc {
  width: 97%;
  height: 180px;
  border-radius: inherit;
  background: rgb(255,165,0);
  margin-bottom: 20px;
}

.vip .container .vc .header {
  height: 35px;
  width: 100%;
  background: rgba(255,255,255,.3);
  display: flex;
  justify-content: flex-start;
  position: relative!important;
  z-index: 1!important;
}

.vip .container .vc .header .vipname {
  background: white;
  font-weight: 900;
  padding: 1px 8px;
  border-left: .1px solid silver;
  color: red;
}

.vip .container .vc .header .vstatut {
  background: rgba(255,255,255,.2);
  color: white;
  padding: 1px 8px;
  position: absolute;
  z-index: 1!important;
  right: 20px;
  border-radius: 10px;
}

.vip .container .vc .header .prix {
  background: white!important;
  padding: 1px 8px;
  margin-left: 5px;
  font-weight: 900;
}

.vip .container .vc .details {
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
}

.vip .container .vc .details img {
  display: block;
  width: 100px;
  height: 120px;
  object-fit: cover;
  border-radius: 20px;
}

.vip .container .vc .details h2,
.vip .container .vc .details p {
  margin: 0;
}

.vip .container .vc .details .info {
  margin-left: 20px;
  color: #ffffffda;
}

.vip .container .vc .details .info .pi {
  font-size: 12px;
  font-weight: 500;
}

.vip .container .vc .details .info .pi p{
  margin-bottom: 4px;
  margin-top: 1px;
}

.vip .container .vc .details .info .pi a {
  display: block;
  text-decoration: none;
  color: rgb(255,165,0);
  background: white;
  border-radius: 5px;
  padding: 3px 10px;
  text-align: center;
  font-weight: 600;
  margin-top: 10px;
}

.vip .container .vc .details .info .pi a span {
  font-size: 12px;
  font-weight: 100!important;
}

.vdetails {
  background: #f1f1f1;
}

.vdetails .container {
  width: 94%;
  border-radius: 5px;
  padding: 10px;
  margin: 20px auto;
  background: white;
  margin-top: -40px;
  padding-top: 20px;
  padding-left: 10px;
  position: relative;
}

.vdetails .container .listc {
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
}
.vdetails .container .listc .list {
  background: white;
  margin-bottom: 24px;
  position: relative;
  margin-left: 25px;
}

.vdetails .container .listc .list:first-child::before {
  content: "";
  display: block;
  height: 6px;
  width: 3px;
  border-radius: 10px;
  background: black;
  position: absolute;
  margin-top: 7px;
  margin-left: -12px;
}

.vdetails .container .listc .list:last-child {
  font-weight: 300;
  color: gray;
}

.vdetails .container a {
  display: block;
  padding: 10px 25px;
  margin: auto;
  border-radius: 5px;
  color: white;
  background: rgb(255,165,0);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
  width: fit-content;
  margin-bottom: 20px;
}

.emptymsg {
  font-size: 14px;
  color: silver;
  font-weight: 200;
  font-style: italic;
  display: block;
  width: 90%;
  margin: 20px auto;
  text-align: center;
}

.vdetails .msgr {
  padding: 0px 20px;
  font-size: 12px;
  display: block;
  color: red;
  margin-bottom: 20px;
  font-style: italic;
  transition: font-size .2s ease-in-out;
}

.vdetails .container #compte_a_rebours {
  width: 99%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.green-c {
  color: green!important;
}

.orange-c{
  color: rgb(255,165,0)!important;
}

.vdetails .orange-c{
  font-weight: 200!important;
}

.vdetails .green-c {
  font-weight: 300!important;
}

.vdetails .container .check {
  position: absolute;
  left: 45%;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.vdetails .container .check span {
  color: green;
}
.vdetails .container .check p {
  color: rgb(255,165,0);
  font-weight: 600;
  text-transform: lowercase;
  font-size: 10px;
  margin-top: 5px;
}

.archive .lu {
  padding: 0!important;
  background: white!important;
}

.archive .lu .vinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 10px;
  font-size: 12px;
}

.archive .lu .vinfo * {
  margin-top: 10px;
}

.archive .lu .vsolde,
.archive .lu .vinfo {
  font-weight: 400;
}

.archive .lu .vinfo .vname span {
  color: rgb(255,165,0);
} 

.archive .lu a {
  display: block;
  text-decoration: none;
  background: rgba(255,255,255,.2);
  padding: 5px;
  margin: 10px 0;
  color: rgb(255,165,0);
  font-size: 14px;
  text-align: center;
  font-weight: 300!important;
  border-top: .1px solid #c0c0c073;
}

.csh .container{
  border-top: .1px solid #f1f1f1;
  padding: 20px;
}












/* Conservez vos styles CSS ici */
      .csh .container {
            max-width: 600px;
            margin: 30px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            margin-top: -30px;
            font-size: 14px;
        }
        .csh .container a {
          font-weight: 300;
          color: green;
        }
     .csh .form-group {
            margin-bottom: 15px;
        }
        .form-group div {
            display: flex;
            margin-bottom: 5px;
            font-weight: bold;
            margin-right: 20px;
        }
        
        .csh form .form-group .optype .disabled {
          color: silver!important;
          background: #f5f5f5!important;
          cursor: not-allowed!important;
        }
        
        .csh form input {
          outline: none!important;
        }
        
        .form-group input[type="text"],
        .form-group input[type="number"],
        .form-group select,
        .form-group .sys_number {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        
       .form-group .sys_number {
         background: #007bff30;
         border-color: #007bff!important;
         color: #007bff;
         font-size: 14px; 
         font-weight: 600;
       } 
       
       .form-group .sys_number p {
         margin: 0px;
       }
        
        .form-group input[type="radio"] {
            margin-right: 5px;
        }
        .form-group input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .form-group input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .error-message {
            color: red;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .success-message {
            color: green;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .form-group .optype label  {
          display: block!important;
        }

 #payment_code .warn {
  color: orange!important;
  font-size: 12px!important;
  margin: 20px auto!important;
  display: block!important;
  font-weight: 300!important;
}

select, input {
  outline: none;
}

.about {
  color: rgba(0, 0, 0, 0.3)!important;
  background: #f1f1f1;
}

.about .container {
    max-width: 800px; /* Largeur maximale du conteneur de contenu */
    margin: 0 auto; /* Centrage du conteneur */
    background: #fff; /* Couleur de fond du conteneur */
    padding: 30px; /* Espacement interne du conteneur */
    border-radius: 8px; /* Coins arrondis du conteneur */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère pour le conteneur */
    font-size: 14px; /* Taille de police par défaut pour le conteneur */
    color: rgba(0, 0, 0, 0.3); /* Couleur de texte très claire pour le conteneur, à ajuster si trop pâle */
}

.about h1,
.about h2 {
    color: rgb(255, 165, 0); /* Couleur orange pour les titres h1 et h2 */
}

.about h1 {
    text-align: center; /* Centrage du titre h1 */
    margin-bottom: 30px; /* Marge inférieure du titre h1 */
}

.about h2 {
    border-bottom: 2px solid rgb(255, 165, 0); /* Bordure inférieure orange pour h2 */
    padding-bottom: 10px; /* Espacement interne sous la bordure */
    margin-top: 30px; /* Marge supérieure du titre h2 */
}

.about strong {
    color: rgb(255, 165, 0); /* Couleur orange pour le texte en gras */
}

.about ul {
    list-style: none; /* Supprime les puces par défaut des listes */
    padding: 0; /* Supprime le rembourrage par défaut des listes */
}

.about ul li {
    margin-bottom: 10px; /* Marge inférieure pour chaque élément de liste */
    padding-left: 20px; /* Espacement à gauche pour l'icône */
    position: relative; /* Nécessaire pour positionner l'icône */
}

.about ul li::before {
    position: absolute; /* Positionne l'icône par rapport à l'élément li */
    left: 0; /* Place l'icône à gauche */
    color: #28a745; /* Couleur verte pour l'icône */
}

.about p {
    margin-bottom: 15px; /* Marge inférieure pour les paragraphes */
    color: #rgba(0, 0, 0, 0.3); /* S'assure que les paragraphes sont d'une couleur sombre et lisible */
}

.about .header .pageTitle {
  color: black!important;
}

.records .container .empty {
  width: 90%; 
  margin: 20px auto;
  font-size: 12px;
  color: silver;
  font-style: italic;
  font-weight: 300;
  text-align: center;
  padding: 10px;
}

.welcome {
  background: #f1f1f1;
  padding: 0!important;
  width: 100%;
}

.welcome .logo {
  width: 90%;
  height: 50px;
  margin: auto;
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: rgb(255,165,0);
  font-weight: 600;
}

.welcome .logo img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
}

.welcome .container {
  width: 90%;
  margin: auto!important;
  width: inherit;
}

.welcome .container .banner {
  width: 90%;
  height: 125px; /* Ou la hauteur que vous souhaitez pour votre bannière */
  margin: auto;
  margin-top: 20px;
  position: relative;
  overflow: hidden; /* Important pour cacher les parties de l'image qui dépassent */
  border-radius: 20px;
}

.welcome .container .banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* L'image remplit la totalité de la largeur (et hauteur), et les débordements sont coupés */
}

.noti {
  width: 90%;
  /*height: 35px;*/
  border-radius: 20px;
  color: rgb(255,165,0);
  background: white;
  margin: 20px auto;
  display: flex;
  align-items: center;
  padding:0 15px;
  overflow: hidden;
  box-shadow: 0 0 .2em rgba(0,0,0,.2);
  position: relative;
}

.noti .fa {
  margin-right: 10px;
}

.slider-container {
      position: relative;
      width: 100%;
      height: 40px;
      overflow: hidden;
      box-sizing: border-box;
      font-size: 14px;
      display: flex;
      align-items: center;
    }

    .slide {
      position: absolute;
      width: 100%;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .slide.show {
      opacity: 1;
    }
    
.welcome .pub {
  padding: 20px;
  background: white;
  font-size: 14px;
  margin: auto;
  margin-top: 10px;
}
.welcome .pub img {
  display: block;
  margin: 10px auto;
  margin-bottom: 30px;
  width: 100%!important;
  object-fit: cover;
  opacity: .7;
}

.view {
  background: #f1f1f1;
  height: 100%;
  position: relative;
}

.view .container {
  margin: 0px auto;
  background: white;
  width: 95%;
  margin: auto;
  margin-top: -35px;
  padding: 20px 0;
  border-radius: 5px;
  position: relative;
}

.view .container .header {
  width: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: auto;
}

.view .container .header div {
  color: green;
}

.view .container .header span {
  font-size: 12px;
  color: rgb(255,165,0);
}

.view .container .det {
  margin-top: 50px;
  padding: 20px;
  font-size: 14px;
}

.view .container .det .d1 {
  display: flex;
  justify-content: space-between;
}

.view .container .det .d1 p:last-child {
  color: gray;
}

.welcome .annonce {
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: rgba(0,0,0,.7);
  top: 0;
  left: 0;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10001;
  
}

.welcome {
  position: relative;
}

.welcome .annonce .cont {
  background: white;
  width: 90%;
  border-radius: 10px;
  padding: 20px;
  height: 400px;
  overflow-y: scroll;
  box-shadow: inset 0 0 .3em rgba(0,0,0,.6);
  margin: auto!important;
  text-align: justify;
}

.welcome .annonce h2 {
  margin-top: -70px;
  width: 300px;
  background: rgb(255,165,0);
  border-radius: 10px;
  margin: 0;
  padding: 10px;
  font-size: 16px;
}

.welcome .annonce button {
  width: 300px!important;
  padding: 10px;
  text-align: center;
  background: gray;
  color: white;
  border: none;
  border-radius: 10px;
}

.welcome .annonce .head{
  font-size: 30px;
  color: white;
}

.archive .dsb {
  width: 90%;
  border-radius: 10px;
  height: 150px;
  background: rgb(255,165,0);
  padding: 10px;
  margin: auto;
  margin-top: -30px;
 margin-bottom: 35px;
 color: white;
 font-size: 14px;
 font-weight: 600;
 padding-left: 20px;
 padding-right: 20px;
}

.archive .dsb .sol {
  padding: 10px 0;
  font-size: 20px;
}

.archive .dsb .sol .span {
  font-size: 12px;
  font-weight: 300;
}

.archive .dsb .bar {
  padding: 6px 10px;
  background: rgba(255,255,255,.2);
  border-radius: 5px;
  font-size: 12px;
  font-size: 300;
}

.archive .vi {
  padding: 6px 10px;
  width: 90%;
  padding-left: 10px;
  border: .1px solid rgb(255,165,0);
  background: rgba(255,165,0,.1);
  color: rgb(255,165,0);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin: auto;
  margin-top: -20px;
  border-radius: 3px;
  margin-bottom: 40px;
}

.archive .ac {
  width: 90%;
  margin: auto;
  margin-top: -23px;
  font-size: 14px;
}

.archive .lue {
  height: 70px;
  border-radius: 10px;
  background: white;
  margin: 10px auto;
  padding: 10px;
  padding-top: -10px;
  margin-bottom: 10px!important;
}

.archive .lue .c {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.archive .lue .vinfo span,
.archive .lue .vsolde span {
  font-weight: 600;
}

.archive .ac a {
  display: block;
  width: 100%;
  border-top: .1px solid silver;
  text-align: center;
  color: rgb(255,165,0);
  padding: 10px;
  text-decoration: none;
  padding-top: 3px;
  margin-top: 10px;
}

.list .tbd {
  width: 90%;
  height: 100px;
  border-radius: 10px;
  background: rgb(255,165,0);
  margin: auto;
  margin-top: -30px;
  padding: 10px;
  display: flex;
  align-items: center;
  color: white;
}

.list .tbd .logo {
  width: 70px;
  height: 70px;
  position: relative;
  background: white;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list .tbd .logo img {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: content;
  filter: grayscale(100%);
}

.list .tbd .dat {
  margin-left: 10px;
}

.list .tbd .dat .tel {
  font-weight: 600;
  font-size: 14px;
}

.list .tbd .dat .maxvip {
  display: flex;
  align-items: center;
  font-size: 10px;
  background: black;
  padding: .1px 1px;
  border-radius: 5px;
  color: rgb(255,165,0);
  width: fit-content;
  padding-right: 5px;
  margin-top: 3px;
  margin-bottom: 3px;
}

.list .tbd .dat .maxvip .lab {
  background: white;
  font-weight: 600;
  border-radius: inherit;
  font-size: 8px;
  padding: 0 2px;
  color: black;
  margin-right: 3px;
}

.list .tbd .dat .uid {
  font-size: 10px;
}

.list .bon {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.list .bon div {
  height: 90px;
  width: 100px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  align-items: center;
}

.list .bon .bonus {
  background: #ffffff;
  cursor: pointer;
}

.list .bon .bonus .ico {
  color: #000;
}

.list .bon .hist {
  background: #ffca0015;
  cursor: pointer;
}


.list .bon .hist .ico {
  color: #ffca00;
}

.list .bon .aides {
  background: #7a7a7a15;
  cursor: pointer;
}


.list .bon .aides .ico {
  color: #7a7a7a;
}

.list .bon div .ico {
  font-size: 40px;
  margin-top: -20px;
}

.list .bon div .lab {
  font-size: 12px;
  text-align: center;
  margin-top: -20px;
  color: gray;
}

.list .big {
  width: 90%;
  margin: auto;
  border-radius: 10px;
  background: rgb(255,165,0);
  padding: 10px;
  font-size: 14px;
  margin-top: 20px;
}

.list .big .rev {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  width: 90%;
  margin: auto;
  margin-top: 15px;
  color: white;
}

.list .big .rev .fcfa {
  font-weight: 300;
}

.list .big .rev .solde{
  text-align: right;
}

.list .big .ana {
  width: 100%;
  padding: 20px;
  margin: auto;
  margin-top: 15px;
  background: white;
}

.list .big .ana .ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: .1px solid grey;
}

.list .big .ana .ligne:last-child {
  border: none;
}

.list .big .ana .ligne .rang {
  width: 100%;
  padding: 10px;
  text-align: right;
}

.list .big .ana .ligne .rang:first-child {
  border-right: .1px solid grey;
  text-align: left;
}

.list .big .ana .ligne .rang p:last-child{
  font-weight: 300;
  font-size: 12px;
  color: orange;
}

.blue-c {
  color: #0088cc!important;
}