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

/* Lato Bold */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    /* overflow: hidden; */
    position: relative;
    color:#3B252C  !important; 
}
.color-test-container, .yeux-color-test-container, .peau-color-test-container, .valeur-color-test-container, .Temperature-color-test-container, .intesite-color-test-container{
    /* border-radius: 50% / 40%; */
    justify-content: center;
    display: flex;
    overflow: hidden;
    height: 300px;
    width: 300px;
    padding: 1rem 2rem !important;
}
.mypic{
    border-radius: 50% / 40%;
    height: 100%  !important;

}


.progress {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10px;
    background-color: #fff;
    border-radius: 0;
    z-index: 999;
}
.progress-bar {
    height: 100%;
    background-color: #3B252C;
    transition: 0.5s ease;
    z-index: 9999;
}
.progress-bot{
    height: 10px!important;
}
.drop-zone {
    max-width: 100%;
    height: 125px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    border: 2px solid #9C858C;
    border-radius: 8px;
    background-color: #9C858C;
  }

  .drop-zone--over {
    border-style: solid;
  }

  .drop-zone__input {
    display: none;
  }

  .drop-zone__thumb {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background-color: #cccccc;
    background-size: cover;
    position: relative;
  }

  .drop-zone__thumb::after {
    content: attr(data-label);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.75);
    font-size: 14px;
    text-align: center;
  }
 .drop-zone_svg{
    display: block;
    margin-bottom: 0.5rem;
 }
 .drop-zone__prompt{
    color: #fff;
    font-size: 12px;
 }
 .step-form .step-num{
    font-size: 40px;
    font-weight: bold;
 }
 .step-form .step-heading{
    font-size: 32px;
    font-weight: 400;
    margin-top: 0.25rem;
 }
 .step-form .step-detail{
    font-size: 16px;
 }
.col-12by5{
    width: 20%;
    flex: 0 0 auto;
}
.col-w11_per{
    width: 11%;
    flex: 0 0 auto;
}
.multiform-sec{
    /* height:-webkit-fill-available !important; */
}

 input[type=radio] {
    display: none;
  }
  input[type=radio]:checked + label span {
    border: 4px solid #E86D44;
  }

  label {
    display: inline-block;
    width: 100%;
    height: 45px;
    cursor: pointer;
  }

  label span {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease-in-out;
  }
  .heading_essayages{
     background-color: #3B252C;
     color: white;
     font-size: large;
     font-weight: bolder;
   }
  .filters_essayages{
     background-color: #3B252C;
     color: white;
     /* font-size: large;
     font-weight: bolder; */
   }
   .filter_label{
    text-transform: uppercase;
    margin-bottom: 5px;
    height: 20px;

   }
   .filter_color_test{
    justify-content: center;
    display: flex;
    height: 350px;
    padding: 3rem 5rem !important;
   }
   .switch {
    display: inline-block;
    height: 27px;
    position: relative;
    width: 50px;
  }
  .switch_sapn{
    text-transform: capitalize;
  }
  .switch input {
    display:none;
  }

  .slider {
    background-color: #fff;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
  }

  .slider:before {
    background-color: #000;
    bottom: 4px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 20px;
  }
    .btn-essayages{
        text-transform: uppercase;
        background-color: #ffffff;
        color: #3B252C;
        border: 2px solid #3B252C;
        border-radius: 6px;
        padding: .75rem;
    }
    .btn-essayages:hover{
        background-color: #3B252C;
        color: #ffffff;
        border: 2px solid #ffffff;
        transition: 0.5s ease-in-out;
    }
  input:checked + .slider {
    background-color: #66bb6a;
  }

  input:checked + .slider:before {
    transform: translateX(20px);
  }

  .slider.round {
    border-radius: 34px;
  }

  .slider.round:before {
    border-radius: 50%;
  }
  .valeur_range::-webkit-slider-thumb,
  .teinte_range::-webkit-slider-thumb,
  .intensite_range::-webkit-slider-thumb,
  .temperature_range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 12px; /* Set the width of the thumb */
    height: 12px; /* Set the height of the thumb */
    background-color: transparent; /* Make the background transparent */
    border: 2px solid rgb(255, 255, 255); /* Add a white border */
    border-radius: 50%; /* Make it round */
    cursor: pointer; /* Add a cursor on hover */
    margin-top: 1px;

  }
  .valeur_range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: rgb(255,255,255);
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
    background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
    background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%); */
    /* background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%); */
    background: linear-gradient(90deg,  rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 14px;
  }
  .teinte_range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: rgb(255,255,255);
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
    background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
    background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%); */
    background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 14px;
  }
  .intensite_range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: rgb(207,207,207);
    background: linear-gradient(90deg, rgba(207,207,207,1) 0%, rgba(207,0,199,1) 100%);
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
    background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
    background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 14px;
  }
  .temperature_range::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: rgb(92,155,237);
    background: linear-gradient(90deg, rgba(92,155,237,1) 0%, rgba(230,130,79,1) 100%);
    /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
    background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
    background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 14px;
  }

  input[type=range]:focus {
    outline: none;
  }

  input[type=range]::-moz-range-track {
    -moz-appearance: none;
    background: rgba(59,173,227,1);
    background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(59,173,227,1)), color-stop(25%, rgba(87,111,230,1)), color-stop(51%, rgba(152,68,183,1)), color-stop(100%, rgba(255,53,127,1)));
    background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    background: linear-gradient(45deg, rgba(59,173,227,1) 0%, rgba(87,111,230,1) 25%, rgba(152,68,183,1) 51%, rgba(255,53,127,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    /* height: 2px; */
  }
   .col-w30_per{
       width: 30%;
       flex: 0 0 auto;
   }
  .btn-add{
    font-size: 55px;
    border: 1px solid black;
    background-color: white;
    width: 91.08px;
    height: 58.35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn-remove-palette{
    border-radius: 50%;
    padding: 6px;
    border: 1px solid black;
    background-color: white;
    padding: 0px 9px;
  }
  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }
  .inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
    background-color: red;
}
.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}
.sec_3_para{
    font-size: 16px;
    text-transform: uppercase;
}
.valeur_show,.intensite_show,.temperature_show{
    font-size: small;
}
.color-row{
    --bs-gutter-x:0 !important;
}
  label span.E0E0E0 {
    background: #E0E0E0;
  }
  label span.DAD8D5{
    background: #DAD8D5;
  }
  label span.E7E5D9{
    background: #E7E5D9;
  }
  label span.F0F0E8{
    background: #F0F0E8;
  }
  label span.BDAFA3{
    background: #BDAFA3;
  }
  label span.E2CDB4{
    background: #E2CDB4;
  }
  label span.F6E4C1{
    background: #F6E4C1;
  }
  label span.F7D7A2{
    background: #F7D7A2;
  }
  label span.BlondCendreFonce
  {
    background: #806F67;
  }
  label span.B8A184
  {
    background: #B8A184;
  }
  label span.MediumLightBrown
  {
    background: #A28372;
  }
  label span.C19A6D
  {
    background: #C19A6D;
  }
  label span.C6A88C
  {
    background: #C6A88C;
  }
  label span.GrisFonce
  {
    background: #5D5D5F;
  }
  label span.marron
  {
    background: #664D3D;
  }
  label span.ColdDarkBroiwn
  {
    background: #5C4E42;
  }
  label span.Chatain
  {
    background: #805D46;
  }
  label span.CF7939
  {
    background: #CF7939;
  }
  label span.MarronFroid
  {
    background: #3C332C;
  }
  label span.MaronFonce
  {
    background: #35271F;
  }
  label span.WarmBrownBlack
  {
    background: #41261B;
  }
  label span.auburn
  {
    background: #653C2B;
  }


  /* ---------------------------------------------------- */
  label span.white {
    background: #FFFFFF;
  }
  label span.VeryLightAshBlond
  {
    background: #D4CECE;
  }
  label span.ColdMediumLightBrown
  {
    background: #A79485;
  }

  label span.chestnut {
    background: #C6A88C;
  }
  label span.WhiteBlond
  {
    background: #F4F1EC;
  }
  label span.PlatineBlond
  {
    background: #F9F8E3;
  }
  label span.LightAshBlond
  {
    background: #B9AFAF;
  }
  label span.ColdMediumBrown
  {
    background: #7C695A;
  }
  label span.MediumBrown
  {
    background: #876853;
  }
  label span.MediumChestnut
  {
    background: #A27750;
  }
  label span.blond
  {
    background: #F6E9B0;
  }
  label span.silver
  {
    background: #DBDBDB;
  }
  label span.MediumDarkAshBlond
  {
    background: #897777;
  }
  label span.ColdMediumDarkBroiwn
  {
    background: #625346;
  }
  label span.MediumDarkBroiwn
  {
    background: #6B5241;
  }
  label span.DarkChestnut
  {
    background: #7E5C3E;
  }
  label span.GoldenBlond
  {
    background: #F5D9A4;
  }
  label span.DarkGrey
  {
    background: #48484A;
  }
  label span.DakAshBlond
  {
    background: #6B5D5D;
  }

  label span.darkBroiwn
  {
    background: #4C3A2E;
  }
  label span.auburn
  {
    background: #653C2B;
  }
  label span.DarkGoldenBlond
  {
    background: #C49A6D;
  }
  label span.black
  {
    background: #000000;
  }
  label span.DarkAshBrown
  {
    background: #554949;
  }
  label span.ColdBrownBlack
  {
    background: #272121;
  }
  label span.BrownBlack
  {
    background: #2D221B;
  }

  label span.red
  {
    background: #CD6B4D;
  }


  /* yeux */
  label span.YeuxColdblue
  {
    background: #BEDFFF;
  }
  label span.YeuxBrightblue
  {
    background: #71A5E5;
  }
  label span.Yeuxblue
  {
    background: #2F6BBB;
  }
  label span.YeuxWarmblue
  {
    background: #92B8BE;
  }
  label span.YeuxLightblue
  {
    background: #A7D0E1;
  }
  label span.Yeuxgrenn165647
  {
    background: #165647;
  }
  label span.Yeuxgrenn196128
  {
    background: #196128;
  }
  label span.Yeuxgrenn565316
  {
    background: #565316;
  }


  label span.YeuxLightgrey
  {
    background: #A3B3C9;
  }
  label span.Yeuxgrey
  {
    background: #4C6382;
  }
  label span.YeuxBrightcyan
  {
    background: #367BAF;
  }
  label span.YeuxWarmgrey
  {
    background: #54768B;
  }
  label span.YeuxWarmbluegreen
  {
    background: #397683;
  }
  label span.YeuxColdlightgreen
  {
    background: #B0E2C8;
  }
  label span.YeuxEmeraldgreen
  {
    background: #2B9E8F;
  }
  label span.YeuxNeutralgreen
  {
    background: #68928B;
  }
  label span.YeuxWarmgreen
  {
    background: #91B8A1;
  }
  label span.YeuxLightgreen
  {
    background: #D0E0B5;
  }
  label span.YeuxGreygreen
  {
    background: #596050;
  }
  label span.Yeuxgreen
  {
    background: #82ABAD;
  }
  label span.Yeuxkaki
  {
    background: #454C20;
  }
  label span.Yeuxolive
  {
    background: #736E1E;
  }
  label span.YeuxDarkolive
  {
    background: #4C482F;
  }
  label span.Yeuxtopaz
  {
    background: #BBAF8B;
  }
  label span.YeuxIcyhazel
  {
    background: #9C8C64;
  }
  label span.YeuxPalehazel
  {
    background: #D9C79B;
  }
  label span.YeuxLighthazel
  {
    background: #BFA259;
  }
  label span.Yeuxhazel
  {
    background: #8D743D;
  }
  label span.YeuxLightbrown
  {
    background: #6B4C2F;
  }
  label span.YeuxCoolbrown
  {
    background: #695647;
  }
  label span.Yeuxbrown
  {
    background: #5A3F27;
  }
  label span.Yeuxamber
  {
    background: #613407;
  }
  label span.Yeuxbrowntopaz
  {
    background: #925019;
  }
  label span.Yeuxblack
  {
    background: #26231A;
  }
  label span.YeuxDarkbrowncool
  {
    background: #3F322D;
  }
  label span.YeuxNeutralbrown
  {
    background: #392B1B;
  }
  label span.YeuxWarmbrown
  {
    background: #3D1A0A;
  }
  label span.Yeuxred
  {
    background: #641F09;
  }

/* peau */
label span.peauFFEBEA
  {
    background: #FFEBEA;
  }
label span.peauFEF0E5
  {
    background: #FEF0E5;
  }
label span.peauFFF5E1
  {
    background: #FFF5E1;
  }
label span.peauFAFBEB
  {
    background: #FAFBEB;
  }
label span.peauFADED3
  {
    background: #FADED3;
  }
label span.peauFCE2D1
  {
    background: #FCE2D1 ;
  }
label span.peauFDECD2
  {
    background: #FDECD2 ;
  }
label span.peauF9F3D1
  {
    background: #F9F3D1 ;
  }
label span.peauF3CBBF
  {
    background: #F3CBBF ;
  }
label span.peauF1D3BB
  {
    background: #F1D3BB ;
  }
label span.peauF0D6B3
  {
    background: #F0D6B3 ;
  }
label span.peauEFE1B2
  {
    background: #EFE1B2;
  }
label span.peauD5A69C
  {
    background: #D5A69C ;
  }
label span.peauD3B39A
  {
    background: #D3B39A ;
  }
label span.peauD0AF8B
  {
    background: #D0AF8B ;
  }
label span.peauCEB98A
  {
    background: #CEB98A ;
  }
label span.peauB18077
  {
    background: #B18077;
  }
label span.peauAD836B
  {
    background: #AD836B ;
  }
label span.peauA38563
  {
    background: #A38563 ;
  }
label span.peauA38D64
  {
    background: #A38D64 ;
  }
label span.peau4D3D42
  {
    background: #4D3D42 ;
  }
label span.peau735747
  {
    background: #735747 ;
  }
label span.peau6F5941
  {
    background: #6F5941 ;
  }
label span.peau716143
  {
    background: #716143 ;
  }
label span.peau1C1618
  {
    background: #1C1618 ;
  }
label span.peau2A1E18
  {
    background: #2A1E18 ;
  }
label span.peau443728
  {
    background: #443728 ;
  }
label span.peau3C3324
  {
    background: #3C3324 ;
  }

  /* VALEUR */

  label span.valeurwhite
  {
    background: #ffffff ;
  }

  label span.valeursilver
  {
    background: #BDBBBC ;
  }

  label span.valeurblack
  {
    background: #000000 ;
  }

  label span.valeur808080
  {
    background: #808080 ;
  }
  label span.valeur414141
  {
    background: #414141 ;
  }
  label span.valeurB5D0FF
  {
    background: #B5D0FF ;
  }
  label span.valeur6BA1FF
  {
    background: #6BA1FF ;
  }
  label span.valeur3A7CE8
  {
    background: #3A7CE8 ;
  }
  label span.valeur224A8A
  {
    background: #224A8A ;
  }
  label span.valeur001947
  {
    background: #001947 ;
  }
  label span.valeurBAFFFE
  {
    background: #BAFFFE ;
  }
  label span.valeur74FFFD
  {
    background: #74FFFD ;
  }
  label span.valeur48DCD8
  {
    background: #48DCD8 ;
  }
  label span.valeur007A79
  {
    background: #007A79 ;
  }
  label span.valeur005251
  {
    background: #005251 ;
  }
  label span.valeurFBE3E3
  {
    background: #FBE3E3 ;
  }
  label span.valeurBC8282
  {
    background: #BC8282 ;
  }
  label span.valeur893D3D
  {
    background: #893D3D ;
  }
  label span.valeur691515
  {
    background: #691515 ;
  }
  label span.valeur390000
  {
    background: #390000 ;
  }

  /* INTENSITE */

    label span.intesiteB7871B
    {
        background: #B7871B ;
    }
    label span.intesiteE1B21D
    {
        background: #E1B21D ;
    }
    label span.intesiteEDC811
    {
        background: #EDC811 ;
    }
    label span.intesiteF3D70B
    {
        background: #F3D70B ;
    }
    label span.intesiteFCEA04
    {
        background: #FCEA04 ;
    }
    label span.intesite8F422A
    {
        background: #8F422A;
    }
    label span.intesiteA74627
    {
        background: #A74627;
    }
    label span.intesiteC54E28
    {
        background: #C54E28 ;
    }
    label span.intesiteE55426
    {
        background: #E55426 ;
    }
    label span.intesiteFF5A26
    {
        background: #FF5A26 ;
    }

    label span.intesiteA05A8C
    {
        background: #A05A8C ;
    }
    label span.intesiteB867A0
    {
        background: #B867A0 ;
    }
    label span.intesiteCD72B3
    {
        background: #CD72B3 ;
    }
    label span.intesiteE67EC8
    {
        background: #E67EC8 ;
    }
    label span.intesiteFF8ADD
    {
        background: #FF8ADD ;
    }

    label span.intesite384C6F
    {
        background: #384C6F ;
    }
    label span.intesite2E4978
    {
        background: #2E4978 ;
    }
    label span.intesite224686
    {
        background: #224686 ;
    }
    label span.intesite124298
    {
        background: #124298 ;
    }
    label span.intesite003DA9
    {
        background: #003DA9 ;
    }

    /* Temperature */

    label span.TemperatureA8ADB4
    {
        background: #A8ADB4 ;
    }
    label span.TemperatureA8ADB4_2
    {
        background: #A8ADB4 ;
    }
    label span.TemperatureA29789
    {
        background: #A29789 ;
    }
    label span.TemperatureC69C63
    {
        background: #C69C63 ;
    }
    label span.TemperatureDB9D47
    {
        background: #DB9D47 ;
    }
    label span.Temperature01246B
    {
        background: #01246B ;
    }
    label span.Temperature01336B
    {
        background: #01336B ;
    }
    label span.Temperature01416B
    {
        background: #01416B ;
    }
    label span.Temperature014E6B
    {
        background: #014E6B ;
    }
    label span.Temperature01596B
    {
        background: #01596B ;
    }
    label span.Temperature2B9E8B
    {
        background: #2B9E8B ;
    }
    label span.Temperature2B9E5A
    {
        background: #2B9E5A ;
    }
    label span.Temperature2B9E2B
    {
        background: #2B9E2B ;
    }
    label span.Temperature5A9E2B
    {
        background: #5A9E2B ;
    }
    label span.Temperature8B9E2B
    {
        background: #8B9E2B ;
    }
    label span.TemperatureEA35DC
    {
        background: #EA35DC ;
    }
    label span.TemperatureEA35A8
    {
        background: #EA35A8 ;
    }
    label span.TemperatureEA355B
    {
        background: #EA355B ;
    }
    label span.TemperatureEA4E35
    {
        background: #EA4E35 ;
    }
    label span.TemperatureEA7135
    {
        background: #EA7135 ;
    }

  .color-box{
    padding:0 5px;
  }
  .page-link{
    color: #3B252C !important;
  }
  .page-item.disabled{
    opacity: 0.5;
  }
  .page-item.active .page-link{
    background-color: #3B252C !important;
    border-color: #3B252C !important;
    color: white !important;
  }


@media only screen and (max-width: 768px) {
    .multiform-sec{
        height: auto !important;
    }
    .step1-wrapper{
        justify-content:space-between;
    }
    .color-test-container, .yeux-color-test-container, .peau-color-test-container, .valeur-color-test-container, .Temperature-color-test-container, .intesite-color-test-container{
        /* border-radius: 50% / 40%; */
        justify-content: center;
        display: flex;
        overflow: hidden;
        height: 300px;;
        width: 250px;
        margin: auto;
    }
    .filter_label{
        font-size: 11px;
       }
    .switch_sapn{
        text-transform: capitalize;
        font-size: 12px;
      }
      .btn-essayages{
        padding: 0.35rem;
        margin-top: 1rem;
    }
    .filter_color_test{
        height: 300px;
        padding: 1.5rem 3rem !important;
       }
    .col-w11_per {
        width: 20%;
        flex: 0 0 auto;
    }

}
#essayages select option:disabled{
    background-color: silver;
}
.modal-badge{
  border-radius: 0 0 10px 10px;
  background-color: #ADE8B6;
  color: #2A7B2E;
}
.modal-xl {
  max-width: 1250px !important;
}
.limited-modal-left{
  background-color: #FFF8FD;
}
.limited-modal-left p{
  font-size: 14px;
  text-align: left;
}
.limited-modal-right h5{
  font-size: 18px;
}
.limited-modal-right .limited-modal-btn{
  background-color: #459CEE;
  color: white;
  font-size: 26px;
  font-weight: bolder;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 0.5rem 1rem;
}
.qa-section {
      /* max-width: 800px; */
      margin: 40px 80px auto;
      padding: 40px;
      border-radius: 12px;
    }

    .qa-title {
      font-size: 28px;
      font-weight: 600;
      color: #333;
      margin-bottom: 30px;
    }
    .accordion{
      border:none !important;
    }
    .accordion-item {
      border: none !important;
      margin: 1rem 0;
    }
    .accordion-button {
      background-color: #ffffff;
      border: none;
      border-radius: 8px !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      margin-bottom: 10px;
      transition: background-color 0.3s ease;
    }

    .accordion-button:not(.collapsed) {
      color: #000;
      background-color: #ffffff;
    }

    .accordion-button:focus {
      box-shadow: none;
    }

    .accordion-body {
      background-color: #ffffff;
      border-radius: 8px;
    }
    .pink-card{
      background-color:#EAD7DD; 
      border-radius:15px;
    }
    .step-2-content-points{
      font-size: 14px;
    }


@media (max-width: 768px) {
  .modal-xl {
      max-width: 1140px !important;
      width: 100% !important;
      margin: 1rem auto !important;
  }

  .limited-modal-left,
  .limited-modal-right {
      flex: none !important;
      width: 25% !important;
      max-width: 25% !important;
  }

  .limited-modal-right {
      width: 75% !important;
      max-width: 75% !important;
  }

  .modal-body {
      flex-direction: row !important;
      overflow-x: auto;
  }

  body.modal-open {
      overflow: hidden;
  }
  .drop-zone{
      padding: 0.5rem;
  }
  .drop-zone__prompt {
    font-size: 10px;
  }
    .qa-section {
      /* max-width: 800px; */
      margin: 1rem auto;
      padding: 0px;
      border-radius: 12px;
    }
}