html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

.pc-container,
.pc-content,
.page-header,
.card,
.modal-content {
    min-width: 0;
}

.pc-content {
    overflow-x: clip;
}

.modal-content {
    overflow: hidden;
}

.card-body,
.modal-body,
.alert {
    overflow-wrap: anywhere;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table {
    vertical-align: middle;
}

.table td,
.table th {
    max-width: 320px;
}

.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
}

.dataTables_wrapper .row {
    min-width: 0;
}

.btn,
.form-control,
.form-select,
.input-group-text {
    min-height: 40px;
}

.btn {
    white-space: normal;
}

.input-group .btn {
    white-space: nowrap;
}

.form-label,
.form-check-label,
.text-muted,
.badge,
.pc-mtext {
    overflow-wrap: anywhere;
}

.dropdown-menu,
.pc-h-dropdown {
    max-width: min(92vw, 420px);
}

.swal2-popup {
    max-width: calc(100vw - 24px);
}

.auth-main .auth-wrapper .auth-form {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    padding: 16px;
}

.auth-main .auth-wrapper .auth-form .card {
    max-width: min(480px, calc(100vw - 32px));
}

.auth-main .auth-wrapper {
    width: 100%;
}

.auth-main .card {
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    .pc-content {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sticky-top {
        top: 80px !important;
    }
}

@media (max-width: 991.98px) {
    .pc-container {
        margin-left: 0;
    }

    .pc-header .header-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pc-content {
        padding: 14px;
    }

    .page-header .row,
    .card-header,
    .card-body .row {
        row-gap: 12px;
    }

    .sticky-top {
        position: static !important;
    }
}

@media (max-width: 767.98px) {
    .pc-content {
        padding: 12px;
    }

    .page-header h1,
    .page-header h2,
    .page-header h3,
    .card-title,
    .card-header h4,
    .card-header h5 {
        line-height: 1.3;
    }

    .card {
        margin-bottom: 14px;
    }

    .card-body {
        padding: 16px;
    }

    .card-header {
        padding: 14px 16px;
    }

    .pc-content .d-flex:not(.input-group):not(.btn-group):not(.btn-toolbar),
    .auth-main .d-flex:not(.input-group):not(.btn-group):not(.btn-toolbar) {
        flex-wrap: wrap;
        gap: 8px;
    }

    .justify-content-between {
        row-gap: 8px;
    }

    .btn-lg {
        min-height: 46px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal-dialog {
        width: auto;
        max-width: calc(100vw - 20px);
        margin: 10px;
    }

    .modal-title,
    .modal-body h1,
    .modal-body h2,
    .modal-body h3,
    .modal-body h4,
    .modal-body h5,
    .modal-body h6,
    .modal-body p,
    .modal-body a {
        overflow-wrap: anywhere;
    }

    .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }

    .modal-footer .btn {
        flex: 1 1 140px;
    }

    .table td,
    .table th {
        max-width: 220px;
        white-space: normal;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: left;
        width: 100%;
        margin: 8px 0;
    }
}

@media (max-width: 575.98px) {
    .pc-content {
        padding: 10px;
    }

    .card-body {
        padding: 14px;
    }

    .auth-main .card {
        width: 100%;
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .auth-main .card-body {
        padding: 20px 16px;
    }

    .g-recaptcha {
        transform: scale(.88);
        transform-origin: left top;
        min-height: 68px;
    }

    .toast-container {
        left: 10px !important;
        right: 10px !important;
        width: auto;
    }

    .toast {
        width: 100%;
    }

    .swal2-actions {
        width: 100%;
    }

    .swal2-actions .btn {
        flex: 1 1 100%;
    }
}