.modal {
    @apply hidden items-center flex-col justify-center overflow-hidden fixed inset-0 z-40;
}

.modal.active {
    @apply flex;
}

.modal-background {
    @apply absolute inset-0 bg-gray-900 bg-opacity-80;
}

.modal-card {
    max-height: calc(100vh - 160px);
    @apply w-full flex flex-col overflow-hidden relative
    lg:mx-auto lg:w-2/5;
}

.modal-card-body {
    @apply bg-white flex-grow flex-shrink overflow-auto p-6 space-y-2;
}

.modal-card-head,
.modal-card-foot {
    @apply flex items-center flex-shrink-0 justify-start px-6 py-4 relative bg-gray-100 border-gray-200;
}

.modal-card-head {
    @apply border-b rounded-t;
}

.modal-card-foot {
    @apply border-t rounded-b;
}

.modal-card-foot .button:not(:last-child) {
    @apply mr-2;
}
