.search-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.2-5.2m0 0A7.5 7.5 0 1 0 5.2 5.2a7.5 7.5 0 0 0 10.6 10.6Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1.375em 1.375em;
    padding-right: 2.5rem;
    background-position: right 0.5rem center;
}

.Sidebar {
    width: var(--sidebar-width);
}

.Notification__panel {
    position: fixed;
    inset: 0;
    z-index: 10;
}
.Notification__panel__content {
    background: #fbfbfb;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(100vw - var(--sidebar-width) - 100px);
    padding: 32px;
    border-radius: 30px 0 0 30px;
    z-index: 10;

    animation: slide-in 0.5s;
}
.Notification__panel__backdrop {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9;
}

.Notification__button {
    position: relative;
}

.Notification__button__bubble {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 5px;
    border-radius: 100%;
    font-size: 11px;
    background: #dd4515;
    color: #fff;
}

@keyframes slide-in {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0px);
    }
}

.notification-circle {
    position: relative;
    width: 24px;
    height: 24px;
}

.red-dot {
    width: 12px;
    height: 12px;
    background-color: #dd4415;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-ring-circle {
    fill: none;
    stroke: #dd4415;
    stroke-width: 3;
    stroke-dasharray: 57;
    stroke-dashoffset: 57;
}

.Notification__item:hover .progress-ring-circle {
    /* Délai à changer aussi en JS assets/controllers/notifications_controller.js */
    transition: stroke-dashoffset 0.3s linear;
}

/* Dropzone */

.dz-progress,
.dz-success-mark,
.dz-error-mark,
.dz-error-message {
    display: none;
}

.dz-processing .dz-progress {
    display: block;
}

.dz-processing.dz-complete .dz-progress {
    display: none;
}

.dz-complete.dz-success:not(.dz-error) .dz-success-mark {
    display: block;
}
.dz-complete.dz-error .dz-error-mark,
.dz-complete.dz-error .dz-error-message {
    display: block;
}