@layer components {
    .popover { @apply z-[200]; }
    .form-control.form-control-sm,
    .input-group-sm>.form-control:not(textarea) {
        height: calc(2em + 0.5rem + 3px);
    }

    .input-group-append .input-group-text.bg-info {
        background-color: #415F7D;
    }

    .wrapper h3 {
        @apply py-4;
    }

    .btn-primary {
        @apply bg-custom-blue-800 hover:bg-custom-blue-900 border border-custom-blue-900 text-white;
    }

    .w-25,
    .form-control.w-25 {
        width: 25%;
    }

    .w-50,
    .form-control.w-50 {
        width: 50%;
    }

    .card .card-body.pt-0.px-0.py-0 {
        padding: unset;
    }

    .card-body {
        flex: 1 1 auto;
        min-height: 1px;
    }

    .readers li.reader {
        display: inline-block;
    }

    .text-sm-left {
        text-align: left;
    }

    table.dataTable thead th.text-right,
    table.dataTable thead td.text-right,
    table.dataTable tfoot th.text-right,
    table.dataTable tfoot td.text-right {
        text-align: right;
    }

    .select2.select2-container {
        width: 100% !important;
    }

    .profile-view .select2.select2-container {
        width: 200px !important;
    }

    @media (max-width: 768px) {
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: 0px;
            margin-left: 0px;
        }
    }

    @media (min-width: 768px) {
        .text-md-left {
            text-align: left;
        }

        .align-items-md-start {
            align-items: flex-start;
        }

        .flex-md-row {
            flex-direction: row;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .ml-md-5,
        .mx-md-5 {
            margin-left: 3rem;
        }
    }

    .text-left {
        text-align: left;
    }

    @media (min-width: 768px) {
        .text-md-right {
            text-align: right;
        }
    }

    option {
        font-weight: normal;
        display: block;
        min-height: 1.2em;
        padding: 0px 2px 1px;
        white-space: normal;
    }

    .hide {
        display: none;
    }

    .d-flex {
        display: flex;
    }

    .ajax-upload-dragdrop {
        @apply py-4 px-6 border border-custom-grey-300 rounded-lg flex flex-col gap-3;
    }

    .ajax-upload-dragdrop span {
        @apply text-xs-regular text-custom-grey-600 text-center;
    }

    .ajax-upload-dragdrop .ajax-file-upload {
        @apply w-10 h-10 rounded-full border-4 flex justify-center items-center cursor-pointer bg-custom-grey-100 border-custom-grey-50;
    }

    .dropzone {
        @apply border border-custom-grey-300 rounded-lg min-h-32;
    }

    .dropzone .dz-message {
        @apply my-4;
    }


    .btn,
    .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-cancel,
    .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-confirm,
    .swal2-modal .swal2-buttonswrapper .swal2-styled,
    .fc button {
        @apply inline-block py-2 px-3 lg:px-4 align-middle select-none rounded-[0.375rem] transition-none sm:transition-colors duration-150 ease-in-out;
    }

    .document-wrap.document-builder .frmb {
        @apply list-none pl-3;
    }

    .btn-lg {
        @apply px-12 h-full;
    }

    input.form-control.error,
    select.form-control.error {
        @apply border border-solid border-red-500 bg-custom-red-100;
    }

    /* Modals */
    .modal .modal-dialog {
        @apply mt-0;
    }

    .modal .modal-dialog .modal-content {
        @apply rounded-lg;
    }

    .modal .modal-dialog .modal-content .modal-header {
        @apply py-4 px-6 items-center;
    }

    .modal .modal-d ialog .modal-content .modal-header .close span {
        @apply text-[20px] font-normal text-custom-grey-500;
    }

    .modal .modal-dialog .modal-content .modal-header.modal-custom-header {
        @apply absolute -top-2.5 right-0 z-[9] border-0;
    }

    .modal .modal-dialog .modal-content .modal-header.modal-custom-header .close span {
        @apply text-2xl font-bold text-red-600;
    }

    .modal .modal-dialog .modal-content .modal-body {
        @apply px-6 py-9;
    }

    .modal .modal-dialog .modal-content .modal-body .announcement .description {
        @apply whitespace-normal;
    }

    .modal .modal-dialog .modal-content .modal-footer {
        @apply px-8 py-4;
    }

    @media (max-width: 400px) {
        .modal .modal-dialog .modal-content .modal-footer {
            @apply px-1 flex-col;
        }

        .modal .modal-dialog .modal-content .modal-footer> :not(:last-child) {
            @apply mr-0 mb-3;
        }

        .modal .modal-dialog .modal-content .modal-footer> :not(:first-child) {
            @apply ml-0;
        }
    }

    .modal#modal-preview {
        @apply overflow-scroll;
    }

    .modal#modal-preview .modal-dialog {
        @apply max-w-[90%] mb-0;
    }

    .modal#modal-preview .modal-dialog .modal-body {
        @apply p-4;
    }

    .modal#modal-preview .modal-dialog .modal-body canvas {
        @apply w-full;
    }

    @media (max-width: 576px) {
        .modal#modal-preview .modal-dialog {
            @apply max-w-[95%];
        }
    }

    .custom-loader {
        @apply  absolute w-full h-full top-0 left-0 items-center flex z-[100] bg-[rgba(255,255,255,0.54)];
    }

    .fc .fc-event.fc-start {
        @apply !border border-custom-blue-400 rounded-lg bg-custom-blue-25 p-2 ;
    }

    .fc .fc-event .fc-title, .fc .fc-event .fc-time {
        @apply text-custom-grey-600 text-xs-semibold;
    }
    .bootstrap-datetimepicker-widget.dropdown-menu {
        @apply z-[300];
    }
}