/* MODAL */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 534px;
    padding: 24px;
    background: #FFF;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0.5em;
    z-index: 1000;
}

.modal .modal-header {
    display: flex;
    align-items: center;
    gap: 16px; /* Espace entre l'icône et le titre */
    width: 100%;
}

.modal .modal-header .modal-title {
    flex: 1;
    font-family: "Yanone Kaffeesatz";
    font-size: 20px;
    font-weight: 500;
    text-align: left;
    color: var(--Gray_02-100, #0A0A0A);
}

.modal .modal-body {
    margin: 15px 0 15px 0;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #757575;
    text-align: justify;
}

.modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 10px;
}

/* Modal Types */
.modal.danger .btn.primary {
    background: #B20101;
}

.modal.danger .btn.outline {
    background: #FFE8E8;
    color: #B20101;
    border: 1px solid #FFE8E8;
}

.modal.success .btn.primary {
    background: #099B32;
}

.modal.success .btn.outline {
    background: #E7FAF5;
    color: #099B32;
    border: 1px solid #E7FAF5;
}

.modal.attention .btn.primary {
    background: #C6B200;
}

.modal.attention .btn.outline {
    background: #FEFADC;
    color: #C6B200;
    border: 1px solid #FEFADC;
}

.modal.info .btn.primary {
    background: #0023DD;
}

.modal.info .btn.outline {
    background: #EBEEFF;
    color: #0023DD;
    border: 1px solid #EBEEFF;
}

/* Modal Icons */
.modal.danger .modal-icon {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M12 17H12.01M12 9.00001V13M10.29 3.86001L1.82002 18C1.64539 18.3024 1.55299 18.6453 1.55201 18.9945C1.55103 19.3437 1.64151 19.6871 1.81445 19.9905C1.98738 20.2939 2.23675 20.5468 2.53773 20.7239C2.83871 20.901 3.18082 20.9962 3.53002 21H20.47C20.8192 20.9962 21.1613 20.901 21.4623 20.7239C21.7633 20.5468 22.0127 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.4471 18.6453 22.3547 18.3024 22.18 18L13.71 3.86001C13.5318 3.56611 13.2807 3.32313 12.9812 3.15449C12.6817 2.98585 12.3438 2.89726 12 2.89726C11.6563 2.89726 11.3184 2.98585 11.0188 3.15449C10.7193 3.32313 10.4683 3.56611 10.29 3.86001Z" stroke="%23B30101" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat center center;
    width: 24px;
    height: 24px;
}

.modal.success .modal-icon {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M20 6L9 17L4 12" stroke="%23099B32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') no-repeat center center;
    width: 24px;
    height: 24px;
}

.modal.attention .modal-icon {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cg clip-path="url(%23clip0_135_593)"%3E%3Cpath d="M10.29 3.85999L1.82002 18C1.64539 18.3024 1.55299 18.6453 1.55201 18.9945C1.55103 19.3437 1.64151 19.6871 1.81445 19.9905C1.98738 20.2939 2.23675 20.5467 2.53773 20.7238C2.83871 20.9009 3.18082 20.9962 3.53002 21H20.47C20.8192 20.9962 21.1613 20.9009 21.4623 20.7238C21.7633 20.5467 22.0127 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.4471 18.6453 22.3547 18.3024 22.18 18L13.71 3.85999C13.5318 3.5661 13.2807 3.32311 12.9812 3.15447C12.6817 2.98584 12.3438 2.89725 12 2.89725C11.6563 2.89725 11.3184 2.98584 11.0188 3.15447C10.7193 3.32311 10.4683 3.5661 10.29 3.85999V3.85999Z" stroke="%23C6B200" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M12 17H12.01" stroke="%23C6B200" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M12 9V13" stroke="%23C6B200" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_135_593"%3E%3Crect width="24" height="24" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E') no-repeat center center;
    width: 24px;
    height: 24px;
}

.modal.info .modal-icon {
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cg clip-path="url(%23clip0_135_608)"%3E%3Cpath d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="%230023DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M12 16V12" stroke="%230023DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M12 8H12.01" stroke="%230023DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id="clip0_135_608"%3E%3Crect width="24" height="24" fill="white"/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E') no-repeat center center;
    width: 24px;
    height: 24px;
}

.modal.default .modal-icon {
    width: 0px;
    height: 0px;
}

.modal-body textarea {
    width: 100%;
    max-width: auto;
    max-height: 150px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    resize: none;
    outline: none;
    transition: border-color 0.3s;
}

.modal-body textarea:focus {
    border-color: #b20101;
}

/* New Styles for Flexbox Layout */
.input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.input-group {
    flex: 1;
    min-width: 150px; /* Adjust as needed */
}

.input-group label {
    display: block;
    margin-bottom: 4px;
}

.input-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.options {
    display: flex;
    flex-direction: column;
    
    gap: 8px;
}

.option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.option.row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 0%;
}

.option.column {
    flex-direction: column;
    align-items: flex-start;
}

.scrollable-content {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
    width: 100%;
}

.modal.info .modal-content {
    width: -webkit-fill-available;
}