/* Keep main sidebar labels on one line. */
.left-sidebar #sidebarnav > li > a {
    display: flex;
    align-items: center;
    min-width: 0;
}

.left-sidebar #sidebarnav > li > a > i {
    flex: 0 0 35px;
}

.left-sidebar #sidebarnav > li > a .hide-menu {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.left-sidebar #sidebarnav > li > a.has-arrow .hide-menu {
    padding-right: 18px;
}

html[dir="rtl"] .left-sidebar #sidebarnav > li > a.has-arrow .hide-menu {
    padding-right: 0;
    padding-left: 18px;
}

/* Keep controls from shrinking inside legacy grid and AJAX form wrappers. */
.form-control,
.custom-select,
.select2-container,
.input-group,
.bootstrap-select {
    width: 100% !important;
    max-width: 100%;
}

.form-group.row > [class*="col-"],
.modal-body [class*="col-"],
.right-sidebar [class*="col-"] {
    min-width: 0;
}

.table-responsive {
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Arabic/RTL polish shared by normal pages, settings, modals and notifications. */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] button {
    font-family: "Tajawal", "Roboto", sans-serif;
}

html[dir="rtl"] .select2-container--bootstrap .select2-selection,
html[dir="rtl"] .select2-container--default .select2-selection,
html[dir="rtl"] .select2-results__option {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 12px;
    padding-left: 30px;
}

html[dir="rtl"] .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,
html[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 8px;
}

html[dir="rtl"] .modal .modal-dialog .modal-header button.close,
html[dir="rtl"] .modal .modal-content .x-extra-close-icon {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .right-sidebar .rpanel-title span {
    float: left;
}

html[dir="rtl"] .right-sidebar .rpanel-title i:not(.ti-close) {
    padding-right: 0;
    padding-left: 6px;
}

html[dir="rtl"] .topevent .x-content {
    min-width: 0;
    padding-right: 12px;
    padding-left: 0;
}

html[dir="rtl"] .topevent .x-title,
html[dir="rtl"] .topevent .x-ref-title {
    overflow-wrap: anywhere;
}

@media (max-width: 991.98px) {
    body.settings .form-group.row > label[class*="col-"],
    body.settings .form-group.row > div[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .modal-dialog:not(.modal-sm) {
        width: calc(100% - 24px);
        max-width: none;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 575.98px) {
    .container-fluid {
        padding-right: 12px;
        padding-left: 12px;
    }

    .modal .modal-dialog .modal-body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .right-sidebar.shw-rside,
    .right-sidebar.shw-rside.sidebar-md,
    .right-sidebar.shw-rside.sidebar-lg,
    .right-sidebar.shw-rside.sidebar-xl {
        width: min(100vw, 380px);
    }
}