/* RFedu global responsive support for mobile browsers and Android WebView. */
html {
    -webkit-text-size-adjust: 100%;
}

body,
.content-wrapper {
    overflow-x: hidden;
}

.form-control,
.custom-select,
.select2-container,
.input-group,
.btn,
.card,
.table {
    max-width: 100%;
}

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

/* Keep Select2 values vertically centered like Bootstrap form controls. */
.select2-container .select2-selection--single {
    height: calc(2.25rem + 2px) !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding-left: .75rem !important;
    padding-right: 2rem !important;
    line-height: 1.5 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0 !important;
    height: 100% !important;
}

.select2-container .select2-selection--multiple {
    min-height: calc(2.25rem + 2px) !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    width: 100%;
    padding: 2px .5rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-search--inline .select2-search__field {
    line-height: 1.5 !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.table-responsive,
.dataTables_wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.dt-buttons,
.dataTables_filter,
.dataTables_length,
.dataTables_paginate {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

.dt-buttons .btn,
.btn-group .btn {
    white-space: nowrap;
}

.form-group label .text-danger,
.required-star {
    color: #dc3545 !important;
    font-weight: 700;
}

img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .content-header h1,
    .content-header .m-0 {
        font-size: 1.25rem;
        line-height: 1.35;
    }

    .content-wrapper > .content,
    .content-header {
        padding-left: .65rem;
        padding-right: .65rem;
    }

    .card-body,
    .card-header,
    .card-footer {
        padding: .75rem;
    }

    .form-group.row,
    .row.form-group {
        display: block;
    }

    .form-group.row > [class*="col-"],
    .row.form-group > [class*="col-"] {
        max-width: 100%;
        flex: 0 0 100%;
    }

    label,
    .col-form-label {
        margin-bottom: .25rem;
        text-align: left !important;
    }

    .btn-toolbar,
    .btn-group,
    .card-tools,
    .float-right {
        float: none !important;
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        justify-content: flex-start;
    }

    .btn {
        min-height: 38px;
    }

    .dataTables_wrapper .row > [class*="col-"] {
        max-width: 100%;
        flex: 0 0 100%;
        margin-bottom: .5rem;
    }

    .dataTables_filter,
    .dataTables_filter label,
    .dataTables_filter input,
    .dataTables_length,
    .dataTables_length label {
        width: 100%;
    }

    .dataTables_filter input {
        margin-left: 0 !important;
        margin-top: .25rem;
    }

    .table th,
    .table td {
        white-space: nowrap;
        vertical-align: middle;
    }
}

@media (max-width: 480px) {
    .btn:not(.btn-sm):not(.btn-xs) {
        width: 100%;
        justify-content: center;
    }

    .dt-buttons .btn,
    .card-tools .btn,
    .btn-group .btn {
        width: auto;
    }
}