.bg-green {
    background-color: #3a9e17 !important;
}
.bg-grey {
    background-color: rgb(211 211 211)     !important;
}
.bg-created {
    background-color: rgb(211 211 211)     !important;
}
.bg-ready {
    background-color: var(--bs-primary)     !important;
}
.bg-started {
    background-color: var(--bs-warning)     !important;
}
.bg-completed {
    background-color: #3a9e17     !important;
}
.bg-canceled {
    background-color: var(--bs-danger)     !important;
}

.pagination .active>.page-link,.pagination .page-link.active{
    background-color: #3a9e17 !important;
    border-color: #3a9e17 !important;
    color: rgb(211 211 211)     !important;
}

.pagination .page-link{
    color: #3a9e17 !important;
}
.pagination .page-link:hover{
    background-color: #3a9e1740 !important;
    color: #3a9e17 !important;
}
.pagination .page-link:focus{
    box-shadow : 0 0 0 0.25rem rgba(101, 253, 13, 0.25);
}

.alert-success {
    --bs-alert-color: #3a9e17;
    --bs-alert-border-color: #3a9e17;
    --bs-alert-link-color: #3a9e17;
}

#image-input-container {
    position: relative;
    display: inline-block;
}

#image-input-container input[type="file"] {
    position: absolute;
    left: 0px;
    opacity: 0;
    z-index: 1;
}

#image-input-container p {
    position: relative;
}

.preview-box img {
    width: 100%;
    object-fit: fill;
    aspect-ratio: 1 / 1;
}

.preview-box>div {
    border-style: dashed !important;
}

.bg-yellow{
    background-color: rgb(253 179 21) !important;
    background: rgb(253 179 21) !important
}
.bg-light-yellow{
    background-color: hsl(48.54deg 84.31% 41.95% / 50%) !important;
    background: hsl(48.54deg 84.31% 41.95% / 50%) !important;
}