body {
    /* When table has width: 2000px, it will show x-scroll for table and for the body. Use this to hide for body*/
    overflow-x: hidden;
}

grammarly-desktop-integration {
    display: none;
}
.readonly {
    background-color: #f3f4f6 !important; /*bg-gray-100: f3f4f6*/
}
/* Override flow-bite */
/* [type='text'],
[type='number'],
textarea,
select {
    border: 1px solid rgb(209 213 219);
} */
/* This is for the option box bigger */
.select2-dropdown.select2-dropdown--above {
    width: max-content !important;
}
.select2-dropdown.select2-dropdown--below {
    width: max-content !important;
}

/* This allow select2 to be readOnly*/
.disabled-select {
    background-color: #f3f4f6; /*bg-gray-100: f3f4f6*/
    opacity: 0.5;
    border-radius: 3px;
    cursor: not-allowed;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

select[readonly].select2-hidden-accessible + .select2-container {
    pointer-events: none;
    touch-action: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
    background: #f3f4f6; /*bg-gray-100: f3f4f6*/
    box-shadow: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow,
select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
    display: none;
}
/* END OF This allow select2 to be readOnly*/

@media print {
    .pagebreak {
        page-break-before: always;
    }
}

/* This is not making the dropdown have different size during dynamic render */
select + .select2-container {
    width: 100% !important;
}

.hr-custom {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: 1px !important;
    border-bottom: 1px solid #fff !important;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@media print {
    .page-break {
        /* page-break-inside: avoid; */
        page-break-before: always;
    }

    .no-print {
        display: none !important;
    }

    .only-print {
        display: block;
    }

    .bg-only-print {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    }
}

@media screen {
    .only-print {
        display: none;
    }
}

a.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
}

/* select:not([size]) {
    background-image: url(
        data:image/svg + xml;charset=utf-8,
        %3Csvgxmlns='http://www.w3.org/2000/svg'fill='none'viewBox='0 0 20 20'%3E%3Cpathstroke='%236B7280'stroke-linecap='round'stroke-linejoin='round'stroke-width='1.5'd='m6 8 4 4 4-4'/%3E%3C/svg%3E
    );
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 0rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
} */

/*Override flowbite :focus*/
[multiple]:focus,
[type='date']:focus,
[type='datetime-local']:focus,
[type='email']:focus,
[type='month']:focus,
[type='number']:focus,
[type='password']:focus,
[type='search']:focus,
[type='tel']:focus,
[type='text']:focus,
[type='time']:focus,
[type='url']:focus,
[type='week']:focus,
select:focus,
textarea:focus {
    border-color: none;
    box-shadow: none;
}
[type='checkbox']:focus,
[type='radio']:focus {
    border-color: none;
    box-shadow: 0px 0px 2px 2px;
}
.grid-flow-col {
    grid-auto-flow: column;
}
.grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
}

input[type='file']::file-selector-button {
    display: none;
}
.h-100vh {
    height: 100vh;
}
.h-80vh {
    height: 80vh;
}
.h-50vh {
    height: 50vh;
}
.h-40vh {
    height: 40vh;
}

div.scroll-to-month {
    /* display: block;
    position: relative;
    top: -250px; */
    scroll-margin-top: 80px;
}

#toast-container > .toast {
    width: 600px; /* width: 100% */
}
/* @media screen {
    div.divFooter {
        display: none;
    }
}
@media print {
    div.divFooter {
        position: fixed;
        bottom: 0;
        right: 0;
        transform: rotate(90deg);
        transform-origin: bottom right;
        white-space: nowrap;
    }
} */

.page-break-after {
    page-break-after: always !important;
}

span.select2-selection__clear {
    margin-left: 4px;
}

span.select2-selection__arrow {
    margin-top: 6px;
}

@media (min-width: 1024px) {
    .print-responsive .w-90vw-portrait {
        width: 1000px;
        min-height: 1400px;
    }

    .print-responsive .w-90vw-landscape {
        width: 1400px;
        min-height: 1000px;
    }

    .print-responsive .m-1vw {
        --parent-width: 1000px;
        margin: calc(var(--parent-width) * 1.4 * 0.01);
    }

    .print-responsive .p-025vw {
        --parent-width: 1000px;
        padding: calc(var(--parent-width) * 1.4 * 0.0025);
    }

    .print-responsive .p-05vw {
        --parent-width: 1000px;
        padding: calc(var(--parent-width) * 1.4 * 0.005);
    }

    .print-responsive .p-1vw {
        --parent-width: 1000px;
        padding: calc(var(--parent-width) * 1.4 * 0.01);
    }

    .print-responsive .p-4vw {
        --parent-width: 1000px;
        padding: calc(var(--parent-width) * 1.4 * 0.04);
    }

    .print-responsive .p-8vw {
        --parent-width: 1000px;
        padding: calc(var(--parent-width) * 1.4 * 0.08);
    }

    .print-responsive .p-10vw {
        --parent-width: 1000px;
        padding: calc(var(--parent-width) * 1.4 * 0.1);
    }

    .print-responsive .text-xs-vw {
        font-size: 12px;
        line-height: calc(12px * 1.5);
    }

    .print-responsive .text-sm-vw {
        font-size: 14px;
        line-height: calc(14px * 1.5);
    }

    .print-responsive .text-md-vw {
        font-size: 16px;
        line-height: calc(16px * 1.5);
    }

    .print-responsive .text-lg-vw {
        font-size: 18px;
        line-height: calc(18px * 1.5);
    }

    .print-responsive .text-xl-vw {
        font-size: 20px;
        line-height: calc(20px * 1.5);
    }

    .print-responsive .text-2xl-vw {
        font-size: 24px;
        line-height: calc(24px * 1.5);
    }

    .print-responsive .text-3xl-vw {
        font-size: 30px;
        line-height: calc(30px * 1.5);
    }

    .print-responsive .text-4xl-vw {
        font-size: 36px;
        line-height: calc(36px * 1.5);
    }

    /* .print-responsive .text-5xl-vw {
        font-size: 48px;
        line-height: calc(48px * 1.5);
    }

    .print-responsive .text-6xl-vw {
        font-size: 60px;
        line-height: calc(60px * 1.5);
    }

    .print-responsive .text-7xl-vw {
        font-size: 72px;
        line-height: calc(72px * 1.5);
    }

    .print-responsive .text-8xl-vw {
        font-size: 96px;
        line-height: calc(96px * 1.5);
    }

    .print-responsive .text-9xl-vw {
        font-size: 128px;
        line-height: calc(128px * 1.5);
    } */
}

@media (max-width: 1023px) {
    .print-responsive .w-90vw-portrait {
        width: 90vw;
        min-height: calc(90vw * 1.4);
    }

    .print-responsive .w-90vw-landscape {
        width: 90vw;
        min-height: calc(90vw * 1.4);
    }

    /* Custom padding (p-div-10) as 10% of (width of the viewport * 1.4) */

    .print-responsive .m-1vw {
        margin: calc((90vw * 1.4) * 0.01);
    }

    .print-responsive .p-025vw {
        padding: calc((90vw * 1.4) * 0.0025);
    }
    .print-responsive .p-05vw {
        padding: calc((90vw * 1.4) * 0.005);
    }

    .print-responsive .p-1vw {
        padding: calc((90vw * 1.4) * 0.01);
    }

    .print-responsive .p-4vw {
        padding: calc((90vw * 1.4) * 0.04);
    }

    .print-responsive .p-8vw {
        padding: calc((90vw * 1.4) * 0.08);
    }

    .print-responsive .p-10vw {
        padding: calc((90vw * 1.4) * 0.1);
    }

    /* Define custom viewport width based font sizes */
    .print-responsive .text-xs-vw {
        font-size: 1vw;
        line-height: calc(1vw * 1.5);
    }

    .print-responsive .text-sm-vw {
        font-size: 1.167vw;
        line-height: calc(1.167vw * 1.5);
    }

    .print-responsive .text-md-vw {
        font-size: 1.333vw;
        line-height: calc(1.333vw * 1.5);
    }

    .print-responsive .text-lg-vw {
        font-size: 1.5vw;
        line-height: calc(1.5vw * 1.5);
    }

    .print-responsive .text-xl-vw {
        font-size: 1.667vw;
        line-height: calc(1.667vw * 1.5);
    }

    .print-responsive .text-2xl-vw {
        font-size: 2vw;
        line-height: calc(2vw * 1.5);
    }

    .print-responsive .text-3xl-vw {
        font-size: 2.5vw;
        line-height: calc(2.5vw * 1.5);
    }

    .print-responsive .text-4xl-vw {
        font-size: 3vw;
        line-height: calc(3vw * 1.5);
    }
    /* 
    .print-responsive .text-5xl-vw {
        font-size: 4vw;
        line-height: calc(4vw * 1.5);
    }

    .print-responsive .text-6xl-vw {
        font-size: 5vw;
        line-height: calc(5vw * 1.5);
    }

    .print-responsive .text-7xl-vw {
        font-size: 6vw;
        line-height: calc(6vw * 1.5);
    }

    .print-responsive .text-8xl-vw {
        font-size: 8vw;
        line-height: calc(8vw * 1.5);
    }

    .print-responsive .text-9xl-vw {
        font-size: 10.667vw;
        line-height: calc(10.667vw * 1.5);
    } */
}

/* select:not([size]) {
   
    background-image: none;
} */

.jstree-icon.jstree-themeicon.jstree-themeicon-custom[style*='background-image'] {
    /* width: 90%;
    height: 90%; */
    background-size: cover !important;
    background-position: center;
    border-radius: 9999px; /* makes it circular */
    transform: scale(0.9);
    transform-origin: center;
}