.info-block {
    background-color: white;
    text-align: center;
    min-width: 180px;
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
}

.flexable_div, #flexable_div {
    flex: 1;
    justify-content: space-around;
    display: grid;
}

.info-blocks-container {
    display: flex;
    flex-direction: row;
    gap: 25px;
    height: 100%;
}

.header_time_remaining_container{
    border-bottom: 2px solid #3e6883;
    padding: 20px 30px 15px 30px;
}

.header_time_remaining_container h3 {
    text-transform: uppercase;
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 15px;
}
  
.time_remaining_content_container {
    padding: 25px;
    margin-bottom: 30px;
}

.content_ticket_time_remaining{
    font-size: 16px;
    font-weight: 400;
}

/* Styles pour la barre de progression circulaire */
.circle-progress {
    width: 150px; /* Ajustez la largeur selon vos besoins */
    height: 150px; /* Ajustez la hauteur selon vos besoins */
    position: relative;
    margin: auto;
}

.circle-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Rotation de -90 degrés pour commencer à 0% */
}

.circle-progress-background {
    fill: none;
    stroke-width: 2; /* Épaisseur de la bordure */
}

.circle-progress-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px; /* Taille de la valeur au centre */
    color: #333; /* Couleur du texte de la valeur */
}


.circle-progress-background {
    fill: none;
    stroke-width: 4;
}

.circle-progress-fill {
    fill: none;
    stroke: #ADE796;
    stroke-width: 3;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: stroke-dasharray 0.5s, stroke-dashoffset 0.5s;
}

.circle-progress text {
    font-size: 0.23rem;
    fill: #333;
}

.alarm-clock{
    width: 65px;
    height: 65px;
    -webkit-mask:url('/wp-content/uploads/2023/09/clock-solid.svg') no-repeat center ;
    mask:url('/wp-content/uploads/2023/09/clock-solid.svg') no-repeat center ;
    background-color:#ade796 ;
    margin: auto;
}

.red_clock{
    background-color:#F17171;
}

.red_text {
    color:#F17171;
}

.red_stroke{
    stroke:#F17171;
}

.orange_clock{
    background-color:#FFC84B;
}

.orange_text {
    color:#FFC84B;
}

.orange_stroke{
    stroke:#FFC84B;
}

.green_clock{
    background-color: #ADE796;
}

.green_text{
    color: #ADE796;
}

.green_stroke{
    stroke: #ADE796;
}

.gray_clock{
    background-color: #808080;
}

.gray_text{
    color: #808080;
}

.gray_stroke{
    stroke: #808080;
}

.calendar_bg{
    -webkit-mask:url('/wp-content/uploads/2023/08/calendar-solid.svg') no-repeat center ;
    mask:url('/wp-content/uploads/2023/08/calendar-solid.svg') no-repeat center ;
    padding: 5px;
    padding-top: 25px;
} 

.info-blocks-container p {
    margin-bottom: 0 !important;
}

#time-available-content {
    gap: 10px;
    display: grid;
}

#date-expiration-content {
    display: flex;
    height: 100%;
}

.expiration-container {
    flex: 1;
    margin: auto;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.error_message{
    border: 3px solid red;
    padding: 15px;
    font-size: 1rem;
    font-weight: 500;
}

@media screen and (max-width: 1300px){
    .flexable_div, #flexable_div {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    .info-block {
        width: 100%;
        min-width: 0px;
    }

    .info-blocks-container {
        gap: 25px;
        height: 100%;
      }
}

@media screen and (max-width: 780px){
    .info-block {
        width: 100%;
        padding-bottom: 25px;
    }

    .info-blocks-container {
        display: grid;
        gap: 25px;
        height: 100%;
      }
}

@media screen and (max-width:480px) {
    .header_time_remaining_container {
        padding: 20px;
    }
}