/*########### DEKSTOP ##########*/
@media screen and (min-width: 1024px) {
}

/*########### TABLET ##########*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
}

/*########### MOBILE ##########*/
@media screen and (max-width: 767px) {
    /*#region ================== GLOBAL*/
        *::-webkit-scrollbar {
            display: none !important;
        }
    /*#endregion*/

    /*#region ================== ERROR UI */
        #blazor-error-ui {
            bottom: 0;
        }
        #blazor-error-ui .wrap-error {
            flex-direction: column;
            align-items: flex-start;
            max-width: 100%;
            padding: 1.5rem 1.25rem;
            background: linear-gradient(30deg, hsl(from var(--red) h s 55) 50%, hsl(from var(--red) h s 65));
            border-radius: 2rem 2rem 0 0;
        }
        #blazor-error-ui .txt {
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 1.5rem;
        }
        #blazor-error-ui .reload {
            width: 100%;
            font-weight: 600;
            text-align: center;
            margin-right: 0;
            margin-bottom: 0;
            padding: .5rem .75rem;
        }
        #blazor-error-ui .dismiss {
            right: 1rem;
            top: 1rem;
            font-size: 1.25rem;
        }
    /*#endregion ================== ERROR UI END */

    /*#region ================== ANTMODAL */
        :is(#warningPopup, #logoutPopup, #lupaPassword, #aturLeadExpiry, #aturAssignmentHours) .ant-modal-centered .ant-modal {
            max-width: calc(100vw - 1.5rem);
        }
        :is(#warningPopup, #logoutPopup, #lupaPassword, #aturLeadExpiry, #aturAssignmentHours) .ant-modal .ant-modal-content {
            height: fit-content;
            border: 1px solid var(--border);
            border-radius: 1rem;
        }
        :is(#warningPopup, #logoutPopup, #lupaPassword, #aturLeadExpiry, #aturAssignmentHours) .ant-modal .ant-modal-body {
            max-height: fit-content;
        }

        .ant-modal .ant-modal-body .tombol .cr-gradient {
            flex: 1;
        }
        #loadingFullPage .ant-modal-body {
            justify-content: center;
            align-items: center;
            height: 100% !important;
        }
    /*#endregion ================== ANTMODAL END */

    /*#region ================== ALL INDEX */
        .idx-header {
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            border-bottom: none;
        }
        .idx-title {
            width: 100%;

            i {
                width: 40px;
            }
            p:first-child {
                font-size: 1.25rem;
            }
        }
        .idx-action {
            width: 100%;

            .search {
                max-width: 100%;
            }
        }

        .idx-subtitle {
            display: none;
        }
        .idx-list {
            padding: 0 1rem 1rem 1rem;
        }
        .idx-item {
            display: flex;
            flex-direction: column;
            grid-template-columns: unset;
            align-items: flex-start;
            gap: .25rem;
            padding: 1rem;

            &:has(.stat) {
                padding-top: 2.75rem;
            }
            > p:first-child {
                font-size: 1.1rem;
            }
            > p {
                max-width: 100%;
                line-height: 1.3;
            }
            > .stat {
                position: absolute;
                top: .75rem;
                left: .75rem;
            }
        }
    /*#endregion ================== ALL INDEX END */

}