.restitution{
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}
    .restitution_progress{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
    }
        .restitution_progress-step{
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            width: 80px;
        }
            .restitution_progress-step-icon{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: var(--color-3-light);
                color: var(--color-3-dark);
                cursor: default;
            }
            .restitution_progress-step.active .restitution_progress-step-icon,
            .restitution_progress-step.done .restitution_progress-step-icon{
                background: var(--color-theme-1);
                color: var(--color-2);
            }
            .restitution_progress-step.active .restitution_progress-step-icon{
                outline: 5px solid var(--color-theme-1-overlay-30);
            }
                .restitution_progress-step-number{
                    font-size: 16px;
                    font-weight: 600;
                }
                .restitution_progress-step.done .restitution_progress-step-number{
                    display: none;
                }
                .restitution_progress-step-done{
                    display: none;
                    font-size: 12px;
                }
                .restitution_progress-step.done .restitution_progress-step-done{
                    display: block;
                }
            .restitution_progress-step-label{
                font-size: 12px;
                color: var(--color-1);
                text-align: center;
                opacity: 0.8;
            }
        .restitution_progress-separator{
            width: 60px;
            height: 1px;
            margin-top: 20px;
            background: var(--color-3);
        }
        .restitution_progress-step.done + .restitution_progress-separator{
            background: var(--color-theme-1);
        }

    .restitution_steps{
        width: 100%;
    }
        .restitution_step{
            display: none;
            flex-direction: column;
            gap: 30px;
            width: 100%;
        }
        .restitution_step.active{
            display: flex;
        }
            .restitution_step-intro{
                display: flex;
                flex-direction: column;
            }
                .restitution_step-title{
                    font-size: 24px;
                    font-weight: 600;
                }
                .restitution_step-title span{
                    color: var(--color-theme-2);
                }
                .restitution_step-text{
                    font-size: 16px;
                    color: var(--color-3-dark);
                }
            .restitution_step-fields{
                display: flex;
                flex-direction: column;
                gap: 10px;
            }
            .restitution_step-fields[data-fields="centres-contrat"]:not(.active){
                display: none;
            }
                .restitution_step-fields-row{
                    display: flex;
                    flex-direction: row;
                    gap: 10px;
                }
                    .restitution_step-field{
                        display: flex;
                        flex-direction: column;
                        gap: 3px;
                        flex: 1;
                    }
                        .restitution_step-field-label{
                            font-size: 16px;
                            font-weight: 500;
                            color: var(--color-1);
                        }
                        .restitution_step-field-input{
                            padding: 10px;
                            border-radius: 5px;
                            border: 1px solid var(--color-3);
                            background: transparent;
                            color: var(--color-1);
                            font-family: inherit;
                            font-size: 14px;
                            transition: border-color .2s ease-in-out;
                        }
                        .restitution_step-field-input[readonly]{
                            background: var(--color-3-lighter);
                            color: var(--color-3-dark);
                            cursor: not-allowed;
                        }
                        .restitution_step-field-input:-webkit-autofill{
                            box-shadow: 0 0 0px 1000px #ffffff inset;
                            }
                        .restitution_step-field-input:focus{
                            border-color: var(--color-theme-2);
                        }
                        .restitution_step-field-info{
                            font-size: 12px;
                            color: var(--color-3-dark);
                        }

                    .restitution_step-cards{
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        width: 100%;
                    }
                        .restitution_step-cards-title{
                            color: var(--color-3-dark);
                            font-size: 16px;
                        }
                        .restitution_step-fields[data-fields="centres-contrat"]:not(.active) + .restitution_step-fields[data-fields="centres-autres"] .restitution_step-cards-title{
                            display: none;
                        }
                        .restitution_step-cards-search{
                            align-self: flex-start;
                            display: flex;
                            flex-direction: row;
                            align-items: center;
                            width: 100%;
                            max-width: 250px;
                            position: relative;
                        }
                            .restitution_step-cards-search-input{
                                width: 100%;
                                padding: 10px;
                                border-radius: 5px;
                                border: 1px solid var(--color-3);
                                background: transparent;
                                color: var(--color-1);
                                font-family: inherit;
                                font-size: 14px;
                                transition: border-color .2s ease-in-out;
                                z-index: 2;
                            }
                            .restitution_step-cards-search-input:focus{
                                border-color: var(--color-theme-2);
                            }
                            .restitution_step-cards-search-icon{
                                color: var(--color-3-dark);
                                font-size: 14px;
                                position: absolute;
                                right: 10px;
                                z-index: 1;
                            }
                        .restitution_step-cards-list{
                            display: flex;
                            flex-direction: column;
                            gap: 7px;
                            width: 100%;
                        }
                        .restitution_step-cards-list.has-scrollbar{
                            max-height: 400px;
                            overflow-y: scroll;
                            padding-right: 10px;
                        }
                            .restitution_step-card{
                                display: flex;
                                flex-direction: row;
                                width: 100%;
                                padding: 10px 15px;
                                border: 1px solid var(--color-3);
                                border-radius: 5px;
                                background: transparent;
                                cursor: pointer;
                                transition: border-color .2s ease-in-out, background .2s ease-in-out;
                            }
                            .restitution_step-card:not(.selected, .disabled):hover{
                                border-color: var(--color-3);
                                background: var(--color-theme-2-overlay-10);
                            }
                            .restitution_step-card.disabled{
                                background: var(--color-3-lighter);
                                color: var(--color-3-dark);
                                cursor: not-allowed;
                            }
                                .restitution_step-card-left{
                                    flex-grow: 1;
                                    display: flex;
                                    flex-direction: column;
                                }
                                    .restitution_step-card-title{
                                        font-size: 16px;
                                        font-weight: 500;
                                        color: var(--color-1);
                                    }
                                    .restitution_step-card-text{
                                        font-size: 14px;
                                        color: var(--color-3-dark);
                                    }
                                .restitution_step-card-right{
                                    flex-shrink: 0;
                                    display: flex;
                                    flex-direction: row;
                                    align-items: center;
                                    justify-content: center;
                                }
                                    .restitution_step-card-radio{
                                        position: absolute;
                                        opacity: 0;
                                        width: 0;
                                        height: 0;
                                    }
                                    .restitution_step-card-fake-radio{
                                        display: flex;
                                        flex-direction: row;
                                        align-items: center;
                                        justify-content: center;
                                        width: 20px;
                                        height: 20px;
                                        border-radius: 50%;
                                        border: 1px solid var(--color-3);
                                        background: var(--color-2);
                                        transition: border-color .2s ease-in-out, background .2s ease-in-out;
                                    }
                                    .restitution_step-card.selected .restitution_step-card-fake-radio{
                                        display: none;
                                    }
                                    .restitution_step-card-check{
                                        display: none;
                                        align-items: center;
                                        justify-content: center;
                                        width: 20px;
                                        height: 20px;
                                        border-radius: 50%;
                                        background: var(--color-theme-1);
                                        color: var(--color-2);
                                        font-size: 10px;
                                    }
                                    .restitution_step-card.selected .restitution_step-card-check{
                                        display: flex;
                                    }
            .restitution_step-warning {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 15px;
                padding: 15px;
                border-radius: 10px;
                background: #fadddd;
            }
                .restitution_step-warning-icon{
                    font-size: 16px;
                }
                .restitution_step-warning-message{
                    font-size: 14px;
                }
            .restitution_step-datetime{
                display: flex;
                flex-direction: row;
                gap: 20px;
            }
                .restitution_step-date{
                    width: calc(50% - 10px);
                    max-width: 100%;
                }
                .restitution_step-time{
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    width: calc(50% - 10px);
                    border: 1px solid var(--color-3);
                    border-radius: 5px;
                }
                    .restitution_step-time-header{
                        height: 50px;
                        padding: 10px;
                        border: 0;
                        border-radius: 5px 5px 0 0;
                        background: var(--color-theme-2-overlay-10);
                        color: var(--color-1);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-weight: 600;
                    }
                    .restitution_step-time-hours{
                        display: grid;
                        grid-template-columns: repeat(4, 1fr);
                        width: 100%;
                        padding: 0 10px 10px 10px;
                    }
                        .restitution_step-time-hour{
                            padding: 10px;
                            border: 1px solid var(--color-3);
                            border-radius: 5px;
                            color: var(--color-3);
                            text-align: center;
                            font-size: 14px;
                            margin: 2px;
                            cursor: default;
                        }
                        .restitution_step-time-hour.active{
                            color: var(--color-1);
                            cursor: pointer;
                        }
                        .restitution_step-time-hour[data-column="1"]{ grid-column: 1; }
                        .restitution_step-time-hour[data-column="2"]{ grid-column: 2; }
                        .restitution_step-time-hour[data-column="3"]{ grid-column: 3; }
                        .restitution_step-time-hour[data-column="4"]{ grid-column: 4; }
                        .restitution_step-time-hour.active:not(.selected):hover{
                            border-color: var(--color-3);
                            background: var(--color-theme-2-overlay-10);
                        }
                        .restitution_step-time-hour.selected{
                            border-color: var(--color-theme-1);
                            background: var(--color-theme-1);
                            color: var(--color-2);
                            font-weight: 500;
                        }
            .restitution_step-resume{
                display: flex;
                flex-direction: column;
                padding: 30px;
                background: var(--color-3-lighter);
                border-radius: 10px;
            }
                .restitution_step-resume-data{
                    display: flex;
                    flex-direction: row;
                }
                .restitution_step-resume-data:not(:last-child){
                    padding-bottom: 10px;
                    border-bottom: 1px solid var(--color-3-light);
                    margin-bottom: 10px;
                }
                    .restitution_step-resume-data-label{
                        font-size: 16px;
                        font-weight: 600;
                        width: 50%;
                    }
                        .restitution_step-resume-data-label span{
                            font-size: 10px;
                            opacity: 0.4;
                        }
                    .restitution_step-resume-data-value{
                        font-size: 14px;
                    }
            .restitution_step-buttons{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                gap: 10px;
            }
                .restitution_step-buttons-left,
                .restitution_step-buttons-right{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 10px;
                }
                    .restitution_step-button{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        gap: 10px;
                        padding: 10px 15px;
                        border-radius: 5px;
                        border: 1px solid var(--color-3);
                        background: transparent;
                        color: var(--color-1);
                        cursor: pointer;
                        transition: border-color .2s ease-in-out, background .2s ease-in-out;
                    }
                    .restitution_step-button:hover{
                        border-color: var(--color-3);
                        background: var(--color-3-light);
                    }
                    .restitution_step-button.button-colored{
                        border-color: var(--color-theme-1);
                        background: var(--color-theme-1);
                        color: var(--color-2);
                    }
                    .restitution_step-button.button-colored:hover{
                        border-color: var(--color-theme-1-darker);
                        background: var(--color-theme-1-darker);
                    }
                    .restitution_step-button.disabled{
                        opacity: 0.5;
                        cursor: not-allowed;
                    }
                        .restitution_step-button-label{
                            font-size: 14px;
                            font-weight: 500;
                        }
                        .restitution_step-button-icon{
                            font-size: 12px;
                        }

@media (max-width: 768px) {

    .restitution_progress-step{
        width: 70px;
    }
    .restitution_progress-step-icon{
        width: 30px;
        height: 30px;
    }
    .restitution_progress-step-number{
        font-size: 12px;
    }
    .restitution_progress-step-label{
        font-size: 10px;
    }
    .restitution_progress-separator{
        margin-top: 15px;
    }

    .restitution_step-fields-row{
        flex-direction: column;
    }
    .restitution_step-datetime{
        flex-direction: column;
    }
    .restitution_step-date{
        width: 100%;
    }
    .restitution_step-time{
        width: 100%;
    }


}

@media (max-width: 600px) {

    .restitution_progress-step{
        width: 30px;
    }
    .restitution_progress-step-label{
        display: none;
    }
    .restitution_progress-separator{
        width: 30px;
    }

    .restitution_step-resume-data{
        flex-direction: column;
    }
    .restitution_step-resume-data-label{
        width: 100%;
    }

}


/* --------------------------------------------------------------------------------------------- */
/* Datepicker */

.restitution_step-date .ui-datepicker-inline{
    width: 100%;
    border-radius: 5px;
    color: var(--color-3-dark);
    padding: 0;
    border: 1px solid var(--color-3);
    font-size: 16px;
    font-family: inherit;
}
    .restitution_step-date .ui-datepicker-header{
        height: 50px;
        padding: 10px;
        border: 0;
        border-radius: 5px 5px 0 0;
        background: var(--color-theme-2-overlay-10);
        color: var(--color-1);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
        .restitution_step-date .ui-datepicker-prev,
        .restitution_step-date .ui-datepicker-next{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            top: 50%;
            transform: translateY(-50%);
        }
        .restitution_step-date .ui-datepicker-prev{
            left: 10px;
        }
        .restitution_step-date .ui-datepicker-next{
            right: 10px;
        }
            .restitution_step-date .ui-datepicker-prev::before,
            .restitution_step-date .ui-datepicker-next::before{
                font-family: "icons-common";
                font-size: 12px;
            }
            .restitution_step-date .ui-datepicker-prev::before{
                content: "\e92e";
            }
            .restitution_step-date .ui-datepicker-next::before{
                content: "\e92b";
            }
            .restitution_step-date .ui-datepicker-prev .ui-icon{
                display:none;
            }
            .restitution_step-date .ui-datepicker-next .ui-icon{
                display:none;
            }
        .restitution_step-date .ui-datepicker-title{
            font-size: 16px;
            font-weight: 600;
        }
            .restitution_step-date .ui-datepicker-title .ui-datepicker-month{
                text-transform: capitalize;
            }
    .restitution_step-date .ui-datepicker-calendar{
        margin: 14px 10px 10px 10px;
        width: calc(100% - 20px);
    }
        .restitution_step-date .ui-datepicker td{
            padding: 2px;
        }
        .restitution_step-date .ui-datepicker td.ui-state-disabled{
            opacity: 1;
        }
            .restitution_step-date .ui-datepicker td:not(.ui-state-disabled):hover .ui-state-default:not(.ui-state-active){
                background: var(--color-theme-2-overlay-10);
            }
            .restitution_step-date .ui-datepicker td .ui-state-default.ui-state-active{
                border: 1px solid var(--color-theme-1);
                background: var(--color-theme-1);
                color: var(--color-2);
                font-weight: 500;
            }
            .restitution_step-date .ui-datepicker td .ui-state-default{
                border: 1px solid var(--color-3);
                border-radius: 5px;
                padding: 10px 0;
                background: var(--color-2);
                color: var(--color-1);
                font-size: 14px;
                text-align: center;
            }
            .restitution_step-date .ui-datepicker td.ui-state-disabled .ui-state-default{
                color: var(--color-3)
            }