:root {
    --basecolor: #13375A;
    --orangeC: #EF7904;
    --redC: #FF0000;
    --greyC: #86919f;
    --grey2C: #e8edfb;
    --grey3C: #979797;
    --grey4C: #EFEFEF;
    --bgGreyC: rgba(6, 27, 30, 0.30);

    /* borderRadius */
    --btnC: 10px;
	--4xlC: 50px;

    /* width */
    --4_5wC: 4.5rem;
    --21wC: 21rem;
	--25wC: 25rem;
	--lgwC: 28rem;
    --57pcwC: 57%;

    /* height */
    --25hC: 25rem;
    --90hC: 90px;

    /* font-size */
    --22C: 22px;
}

body {
    font-family: "Avenir Light", sans-serif;
  }

a {
    color: var(--basecolor);
}

.text-22C{
    font-size:var(--22C);
}

.bg-basecolor {
    background-color: var(--basecolor);
}

.bg-redC {
    background-color: var(--redC);
}

.text-basecolor {
    color: var(--basecolor);
}

.bg-orangeC {
    background-color: var(--orangeC);
}

.bg-grey2C{
    background-color: var(--grey2C);
}

.bg-grey4C{
    background-color: var(--grey4C);
}

.border-basecolor {
    border-color: var(--basecolor);
}

.border-grey3C {
    border-color: var(--grey3C) !important;
}

.h-90hC{
    height: var(--90hC);
}

.w-4_5wC{
    width: var(--4_5wC);
}

.w-21wC{
    width: var(--21wC);
}

.w-25wC {
    width: var(--25wC);
}

.w-48{
    width: 12rem; /* 192px */
}

.min-h-screen {
    min-height: 100vh;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}
  
.px-5 {
    padding-left: 1.25rem !important; 
    padding-right: 1.25rem !important; 
}

.p-6{
    padding: 1.5rem; /* 24px */
}

.py-1 {
    padding-top: 0.25rem !important; /* 4px */
    padding-bottom: 0.25rem !important; /* 4px */
}

.pl-2{
    padding-left: 0.5rem !important; /* 8px */
}


.pr-12{
    padding-right: 3rem !important; /* 48 */
}

.pr-20{
    padding-right: 5rem !important; /* 80px */
}

.align-middle {
    align-items: center;
}

.items-start{
    align-items: flex-start;

}

.justify-between {
    justify-content: space-between;
}
  
/* Classes pour le bouton */
.text-white {
    color: white;
}

.bg-bgGreyC {
    background-color: var(--bgGreyC); /* Assurez-vous de définir cette variable dans votre CSS */
}

.focus\:ring-4:focus {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
}

.focus\:outline-none:focus {
    outline: 0;
}

.font-medium {
    font-family: "Avenir Medium";
}

.rounded-btnC {
    border-radius: var(--btnC); /* Assurez-vous de définir cette variable dans votre CSS */
}

.text-sm {
    font-size: 0.875rem; /* 14px */
}
  
.py-5 {
    padding-top: 1.25rem !important; /* 20px */
    padding-bottom: 1.25rem !important;  /* 20px */
}

.text-center {
    text-align: center;
}

.inline-flex {
    display: inline-flex;
}

.items-center {
    align-items: center;
}

/* Classes pour le dropdown menu */
.z-10 {
    z-index: 10;
}

.hidden {
    display: none;
}
  
.border {
    border-width: 1px !important;
    border-style: solid !important;
}

.border-2 {
    border-width: 2px !important;
}

.border-gray-300 {
    border-color: #d1d5db !important;
}

.bg-white {
    background-color: white;
}

.divide-y {
    border-top-width: 1px;
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #f3f4f6;
}

.shadow {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.w-28-5{
    width: 7.5rem !important;
}

.w-44 {
    width: 11rem; /* 176px */
}

.py-2 {
    padding-top: 0.5rem !important; /* 8px */
    padding-bottom: 0.5rem !important; /* 8px */
}

.text-gray-700 {
    color: #4b5563;
}

.text-input-disabled {
    color:#7E8997
}

.dark\:text-gray-200 {
    color: #e5e7eb;
}
  
.px-4 {
    padding-left: 1rem !important; /* 16px */
    padding-right: 1rem !important; /* 16px */
}

.hover\:bg-gray-100:hover {
    background-color: #f3f4f6;
}

/* Classes pour main */
.lg\:pt-10 {
    padding-top: 2.5rem; /* 40px */
}

.rounded-t-4xlC {
    border-top-left-radius: var(--4xlC);
    border-top-right-radius: var(--4xlC);
}

.rounded-b-4xlC {
    border-bottom-left-radius: var(--4xlC);
    border-bottom-right-radius: var(--4xlC);
}

.max-md\:px-5 {
    padding-left: 1.25rem !important; /* 20px */
    padding-right: 1.25rem !important; /* 20px */
}
  
  .px-12 {
    padding-left: 3rem; /* 48px */
    padding-right: 3rem; /* 48px */
  }
  
  .pt-8 {
    padding-top: 2rem; /* 32px */
  }
  
  .flex-grow {
    flex-grow: 1;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  /* Classes pour div */
  .w-lgwC {
    width: var(--lgwC); /* Assurez-vous de définir cette variable dans votre CSS */
  }
  
  /* Classes pour h1 */
  .font-bold {
    font-family: 'Avenir Black';
  }
  
  .text-3xl {
    font-size: 1.875rem; /* 30px */
  }
  
  .mb-16 {
    margin-bottom: 4rem; /* 64px */
  }
  
  .lg\:mb-8 {
    margin-bottom: 2rem; /* 32px */
  }
  
  /* Classes pour les autres éléments */
  .max-md\:hidden {
    display: none;
  }
  
  .h-\[135px\] {
    height: 135px;
  }
  
  .p-\[25px\] {
    padding: 25px;
  }
  
  .bg-\[\#e8edfb\] {
    background-color: #e8edfb;
  }
  
  .rounded-\[20px\] {
    border-radius: 20px;
  }
  
  .gap-\[35px\] {
    gap: 35px;
  }
  
  .relative {
    position: relative;
  }
  
  .gap-1_5 {
    gap: 0.375rem; /* 6px */
  }
  
  .w-4 {
    width: 1rem; /* 16px */
  }

  .w-5 {
    width: 1.25rem; /* 20px */
  }

  .h-4 {
    height: 1rem; /* 16px */
  }
  
  .w-60 {
    width: 15rem; /* 240px */
  }
  
  .py-4 {
    padding-top: 1rem; /* 16px */
    padding-bottom: 1rem; /* 16px */
  }
  
  .py-8 {
    padding-top: 2rem; /* 32px */
    padding-bottom: 2rem; /* 32px */
  }
  
  .justify-around {
    justify-content: space-around;
  }
  
  .cursor-pointer {
    cursor: pointer;
  }

  .cursor-default {
    cursor: default;
  }
  
  .pb-1 {
    padding-bottom: 0.25rem; /* 4px */
  }

  .pb-3 {
    padding-bottom: 0.75rem !important; /* 12px */
  }
  
  .h-1 {
    height: 0.25rem; /* 4px */
  }
  
  .w-12 {
    width: 3rem; /* 48px */
  }
  
  /* Classes pour les labels */
  .block {
    display: block;
  }
  
  .mb-2 {
    margin-bottom: 0.5rem; /* 8px */
  }
  
  .rounded-lg {
    border-radius: 0.5rem; /* 8px */
  }
  
  .focus\:outline-none:focus {
    outline: 0;
  }
  
  .focus\:ring-basecolor:focus {
    box-shadow: 0 0 0 1px var(--basecolor); /* Assurez-vous de définir cette variable */
  }
  
  .focus\:border-basecolor:focus {
    border-color: var(--basecolor); /* Assurez-vous de définir cette variable */
  }
  
  .w-full {
    width: 100%;
  }
  
  .p-2_5 {
    padding: 0.625rem; /* 10px */
  }

  .p-8{
    padding: 2rem; /* 32px */
  }

  .pt-2 {
    padding-top: 0.5rem; /* 8px */
  }
  
  .mr-5 {
    margin-right: 1.25rem !important; /* 20px */
  }
  
  .absolute {
    position: absolute;
  }

  .bottom-0_5{
    bottom: 0.125rem; /* 2px */
  }

  .bottom-4 {
    bottom: 1rem; /* 16px */
  }

  .right-2_5{
    right: 0.625rem; /* 10px */
  }
  
  .left-1\/2 {
    left: 50%;
  }
  
  .transform {
    transform: translateX(-50%);
  }
  
  .-translate-x-1\/2 {
    transform: translateX(-50%);
  }
  
  .w-90\%C {
    width: 90%; /* Remplacez %C par % si nécessaire */
  }
  
  .font-semibold {
    font-weight: 600;
  }
  
  .bg-greyC {
    background-color: var(--greyC); /* Assurez-vous de définir cette variable */
  }
  
  .py-2_5 {
    padding-top: 0.625rem; /* 10px */
    padding-bottom: 0.625rem; /* 10px */
  }

  .mr-2 {
    margin-right: 0.5rem; /* 8px */
  }

  .rounded-xl{
    border-radius: 0.75rem; /* 12px */
  }
  
  .leading-5{
    line-height: 1.25rem; /* 20px */
  }

  .leading-6{
    line-height: 1.5rem; /* 24px */
  }

  .p-\[25px\]{
    height: 135px;
  }

  .h-\[135px\]{
    height: 135px;
  }

  .h-\[85px\]{
    height: 85px;
  }

  .w-\[90px\]{
    width: 90px;
  }

  .top-\[15px\]{
    top: 15px;
  }

  .top-\[49px\]{
    top: 49px;
  }

  .left-\[40px\]{
    left: 40px;
  }

  .left-\[54px\]{
    left: 54px;
  }

  .ml-4 {
    margin-left: 1rem; /* 16px */
  }

  .rounded-full {
    border-radius: 9999px;
  }

  .text-white {
    color: #ffffff;
  }

  .text-base {
    font-size: 1rem; /* 16px */
  }

  .pb-8 {
    padding-bottom: 2rem; /* 32px */
  }

  .pb-16 {
    padding-bottom: 4rem; /* 64px */
  }

  .text-2xl {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
  }

  .pb-5 {
    padding-bottom: 1.25rem; /* 20px */
  }

  .gap-4 {
    gap: 1rem; /* 16px */
  }

  .py-6 {
    padding-top: 1.5rem !important; /* 24px */
    padding-bottom: 1.5rem !important; /* 24px */
  }

  .m-auto{
    margin: auto;
  }

  .h-lvh{
    height: 100lvh;
  }

  .overflow-scroll {
    overflow: scroll;
  }

  .overflow-hidden {
    overflow: hidden;
  }

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

  .w-3_5{
	width: 0.875rem; /* 14px */
  }

  .w-3\/5{
	width: 60%;
  }
  
  .h-3_5{
	height: 0.875rem; /* 14px */
  }

  .no-pb{
    padding-bottom: 0px;
  }

  .rounded-3xl{
    border-radius: 1.5rem; /* 24px */
  }	

  .border-8{
    border-width: 8px !important;
  }

  .py-3{
	padding-top: 0.75rem !important; /* 12px */
    padding-bottom: 0.75rem !important; /* 12px */
  }

  .w-64{
    width: 16rem; /* 256px */
  }

  .w-fit{
    width: fit-content;
  }

  .rotate-180{
    transform: rotate(180deg);
  }

  @media (min-width: 600px) {
    #block-submit-connexion{
        bottom: -14rem;
        padding-bottom: 13px;
    }
    .logo-home {
      width: inherit;
    }
  }

@media (min-width: 768px) {
    .md\:flex {
        display: flex;
    }

    .md\:px-12 {
        padding-left: 3rem !important; /* 48px */
        padding-right: 3rem !important; /* 48px */
    }
    .md\:justify-center {
        justify-content: center;
    }

    .md\:items-center {
        align-items: center;
    }

    .md\:static {
        position: static; 
    }

    .md\:w-auto {
        width: auto;
    }

    .md\:transform-none {
        transform: none;
    }

    .md\:p-6 {
        padding: 1.5rem; /* 24px */
    }

    .md\:pt-4 {
        padding-top: 1rem;
    }

    .md\:pt-10 {
        padding-top: 2.5rem;
    }

    .md\:pb-16 {
        padding-bottom: 4rem; /* 64px */
    }

    .md\:py-6 {
        padding-top: 1.5rem !important; /* 24px */
        padding-bottom: 1.5rem !important; /* 24px */
    }

    .md\:py-8 {
        padding-top: 2rem !important; /* 32px */
        padding-bottom: 2rem !important; /* 32px */
    }

    .md\:w-auto {
        width: auto;
    }

    .md\:block {
        display: block;
    }

    .md\:hidden {
        display: none;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:flex-wrap {
        flex-wrap: wrap;
    }

    .md\:justify-start {
        justify-content: start;
    }

    .md\:w-48{
        width: 12rem; /* 192px */
    }

    .md\:w-60{
        width: 15rem; /* 192px */
    }

    .md\:w-64 {
        width: 16rem; /* 256px */
    }

    .md\:overflow-hidden {
        overflow: hidden;
    }

    .md\:flex-wrap {
        flex-wrap: wrap;
    }

    .md\:flex-wrap {
        flex-wrap: wrap;
    }

    .md\:flex-col {
        flex-direction: column;
    }

    .md\:no-pb{
        padding-bottom: 0px !important;
    }

    .md\:py-1{
        padding-top: 0.25rem !important; /* 4px */
        padding-bottom: 0.25rem !important; /* 4px */
    }

    .md\:pr-6{
        padding: 1.5rem !important;
    }

    .md\:border{
        border-width: 1px !important;
        border-style: solid !important;
    }

    .md\:border-gray-300{
        border-color: #d1d5db !important;
    }

    .md\:border-grey3C{
        border-color: var(--grey3C)
    }

    .md\:border-2{
        border-width: 2px !important;
    }

    .md\:rounded{
        border-radius: 0.25rem !important;
    }

    .md\:mx-10{
        margin-left: 2.5rem !important;
        margin-right: 2.5rem !important;
    }

    .md\:h-25hC{
        height: var(--25hC);
    }

    .md\:w-57pcwC{
        width: var(--57pcwC);
    }

    .chip{
        width: 46px !important;
    }

    .chip-warning{
      width: 46px !important;
    }

    .pellet{
        padding: 6px 16px 7px 16px !important;
    }

    #countNom, #countPrenom {
        position: absolute;
        right: 17px;
        top: 50%;
        transform: translateY(-50%);
        bottom: 0px;
    }

    .block-visio{
        margin-left: 44%;
    }

    .custom-menu{
      overflow-y: hidden !important;
      height: auto !important;
    }
}

@media (min-width: 1024px) {
    .lg\:w-auto{
        width: auto;
    }

    .lg\:rounded-t-4xlC{
        border-top-left-radius: var(--4xlC);
        border-top-right-radius: var(--4xlC);
    }

    .lg\:bg-basecolor {
        background-color: var(--basecolor) !important;
    }

    .lg\:rounded-none{
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .block-visio{
        margin-left: 39%;
    }
    .logo-home {
      width: 7.5rem !important;
    }
}

.chip{
    width: 51px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chip-warning{
  width: 68px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pellet{
    padding: 2px 16px;
}

.custom-menu{
    border-radius: 16px;
    border-color: #bcbcbc;
    width: max-content;
    transform: translate3d(0px, 46px, 0px) !important;
    overflow-y: scroll;
    height: 25rem;
}

.rounded-mobil{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#countNom, #countPrenom {
    position: absolute;
    right: 6px;
    bottom: 14px;
    width: 2.5rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    background: rgba(245, 248, 255, .2);
    border-radius: 5px;
}

.dropdown-menu{
    min-width: 7rem;
}

.tooltipC{
    display: none; 
    font-size: medium;
    font-weight: 500;
    padding: 0.1rem 0.5rem;
    background-color: white;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    position: absolute;
    left: 25px;
    bottom: 27px;
}

.nameColor:hover + .tooltipC {
    display: block; 
}

.triangle-tooltipC{
    width: 7px;
    height: 7px;
    transform: rotate(-45deg);
    transform-origin: 0 0;
    background: white;
    position: absolute;
    bottom: -6px;
    right: 50%;
}

.previewNom, .previewPrenom{
    font-weight: 800;
}

#errorConnexionBadgeNotFound{
    font-size: 14px;
}

#ZoneDonnee input{
    font-size: 14px;
    padding: 0.4rem 0.6rem;
    font-family: "Avenir medium";
}

.color-unknow img{
  width: 15px;
}

.custom-checkbox {
  display: flex;
  flex-direction: row;
}
.custom-checkbox input{
  display: none;
}

/* Style du conteneur */
.custom-checkbox span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #acacac;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Ajouter le signe "check" */
.custom-checkbox span::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    opacity: 0;
    width: 10px;
    height: 10px;
    background-size: contain;  /* Assure que l'image s'adapte à la taille du pseudo-élément */
    background-repeat: no-repeat;
}

/* Afficher le signe "check" lorsque coché */
.custom-checkbox input:checked + span:after{
    opacity: 1;
    background-image: url("../LocImages/pictos/check-checkbox.svg");

}
.custom-checkbox input:checked + span{
  background-color: #0D6EFD;
  border: inherit;
}

.num_version{
  bottom: 8px;
  right: 14px;
  font-size: 14px;
}