/* Theme */
.card-center {
    top: 47.5% !important;
}

.page-title {
    margin: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.input-style {
    margin-bottom: 0 !important;
}

.btn.bg-highlight, .btn.bg-green-dark, .page-link.bg-highlight, .page-link.bg-green-dark, .stepper .bg-green-dark, .stepper .bg-highlight {
    background-color: #27ae60 !important;
}

.btn.gradient-highlight, .page-link.gradient-highlight, .stepper .gradient-highlight, .gradient-highlight {
    background-image: linear-gradient(to bottom, #28f37d, #27ae60) !important;
}

.stepper a.gradient-highlight:hover {
    color: white;
}

.row.compact {
    --bs-gutter-x: 0.25rem !important;
}

#footer-bar a {
    flex: 1 1 !important;
}

#footer-bar.action-button {
    height: calc(80px + (env(safe-area-inset-bottom))*1.1) !important;
    padding-block: 1rem !important;
}

.btn.border-gray {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.btn.color-gray {
    color: #727272 !important;
}

.app-subtitle {
    font-size: 1.3em!important;
    padding-bottom: 5px;
    margin-inline: 15px;
}

.btn-white {
    background-color: hsl(0, 0%, 100%) !important;
    color: hsl(0, 0%, 20%) !important;
}

/* Dropzone */
.dropzone {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.dropzone .dz-preview .dz-error-message {
    top: unset !important;
    bottom: 145px;
}

.dropzone .dz-preview .dz-error-message::after {
    border-bottom: unset !important;
    border-top: 6px solid #be2626;
    top: unset !important;
    bottom: -6px;
}

.dropzone .dz-preview .dz-remove {
    margin-top: 0.5rem !important;
    color: var(--bs-danger);
}

/* Skeleton Loading */

.container {
    margin-top: 4em;
    margin-bottom: 4em;
}

.loading-skeleton h1,
.loading-skeleton h2,
.loading-skeleton h3,
.loading-skeleton h4,
.loading-skeleton h5,
.loading-skeleton h6,
.loading-skeleton p,
.loading-skeleton li,
.loading-skeleton .btn,
.loading-skeleton label,
.loading-skeleton .form-control {
    color: transparent;
    appearance: none;
    -webkit-appearance: none;
    background-color: #eee;
    border-color: #eee;
}

.loading-skeleton h1::placeholder,
.loading-skeleton h2::placeholder,
.loading-skeleton h3::placeholder,
.loading-skeleton h4::placeholder,
.loading-skeleton h5::placeholder,
.loading-skeleton h6::placeholder,
.loading-skeleton p::placeholder,
.loading-skeleton li::placeholder,
.loading-skeleton .btn::placeholder,
.loading-skeleton label::placeholder,
.loading-skeleton .form-control::placeholder {
    color: transparent;
}

@keyframes loading-skeleton {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}
.loading-skeleton {
    pointer-events: none;
    animation: loading-skeleton 1s infinite alternate;
}
.loading-skeleton img {
    filter: grayscale(100) contrast(0%) brightness(1.8);
}

/* Swal2 */
.swal2-actions {
    margin-bottom: 25px !important;
}
.swal2-title {
    line-height: 1.3em !important;
}
.swal2-html-container {
    line-height: 1.5em !important;
}