﻿.ltr {
    direction: ltr !important;
}

.hide {
    display: none;
}

input {
    text-align: right;
}

    input.form-control[type=tel] {
        text-align: left;
        direction: ltr;
    }

.check-danger > .form-check-input {
    border-color: var(--bs-danger);
}

    .check-danger > .form-check-input ~ .form-check-label {
        color: var(--bs-danger);
    }

    .check-danger > .form-check-input:checked {
        background-color: var(--bs-danger);
    }

.check-success > .form-check-input {
    border-color: var(--bs-success);
}

    .check-success > .form-check-input ~ .form-check-label {
        color: var(--bs-success);
    }

    .check-success > .form-check-input:checked {
        background-color: var(--bs-success);
    }

.bg-dropdown {
    background-color: var(--bs-component-bg);
}

.time-to {
    width: 45px;
    align-content: center;
    text-align: center;
    margin: 20px 0;
    font-size: 13pt;
}

    .time-to > span {
        background: #546e7a;
        display: block;
        padding: 5px;
    }

.fa-half {
    font-size: 8px;
}
/*Virtual-Select*/
.vscomp-value > span.flag, .vscomp-option-text > span.flag {
    margin-right: 5px;
}

.vscomp-arrow {
    display: none !important;
}

.vscomp-value {
}

.vscomp-toggle-button {
    background-position-x: 5px;
}

.vscomp-wrapper {
    color: #fff;
}
/*Chat Widget*/
.widget-chat .widget-chat-info-container {
    background: #1be68d;
}

.widget-chat .widget-chat-message:before {
    border-left-color: #1be68d;
}

.widget-chat .widget-chat-message {
    color: var(--bs-light);
}

    .widget-chat .widget-chat-message > p {
        margin-bottom: 0;
    }

/* Quill dark styled */
.ql-editor {
    direction: rtl;
    text-align: right;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}

.ql-container.ql-snow {
    border: 1px solid var(--bs-component-border-color);
    border-radius: 3px;
    /*    background-color: var(--bs-light);*/
}

.ql-toolbar.ql-snow {
    background-color: var(--bs-light);
    border: 1px solid var(--bs-component-border-color);
    /*    margin-bottom: 2px;*/
}

body .ql-container .ql-picker-item:focus, body .ql-container .ql-picker-item:hover, body .ql-container .ql-picker-label:focus, body .ql-container .ql-picker-label:hover, body .ql-container button:focus, body .ql-container button:hover, body .ql-toolbar .ql-picker-item:focus, body .ql-toolbar .ql-picker-item:hover, body .ql-toolbar .ql-picker-label:focus, body .ql-toolbar .ql-picker-label:hover, body .ql-toolbar button:focus, body .ql-toolbar button:hover {
    background: rgba(var(--bs-body-color-rgb), .15) !important;
    color: var(--bs-body-color) !important;
    border-radius: 3px;
}

body .ql-container .ql-stroke, body .ql-toolbar .ql-stroke {
    fill: transparent !important;
    stroke: var(--bs-body-color) !important;
}

body .ql-container .ql-fill, body .ql-toolbar .ql-fill {
    fill: var(--bs-body-color) !important;
}

body .ql-container .ql-picker-item.ql-active, body .ql-container .ql-picker-label.ql-active, body .ql-container button.ql-active, body .ql-toolbar .ql-picker-item.ql-active, body .ql-toolbar .ql-picker-label.ql-active, body .ql-toolbar button.ql-active {
    background: rgba(var(--bs-app-theme-rgb), .25) !important;
    border-radius: 3px;
    color: var(--bs-app-theme) !important;
    border: none !important;
}

body .ql-container .ql-picker-item.ql-active, body .ql-container .ql-picker-label.ql-active, body .ql-container button.ql-active, body .ql-toolbar .ql-picker-item.ql-active, body .ql-toolbar .ql-picker-label.ql-active, body .ql-toolbar button.ql-active {
    background: rgba(var(--bs-app-theme-rgb), .25) !important;
    border-radius: 3px;
    color: var(--bs-app-theme) !important;
    border: none !important;
}

    body .ql-container .ql-picker-item.ql-active .ql-stroke, body .ql-container .ql-picker-label.ql-active .ql-stroke, body .ql-container button.ql-active .ql-stroke, body .ql-toolbar .ql-picker-item.ql-active .ql-stroke, body .ql-toolbar .ql-picker-label.ql-active .ql-stroke, body .ql-toolbar button.ql-active .ql-stroke {
        stroke: var(--bs-app-theme) !important;
    }

    body .ql-container .ql-picker-item.ql-active .ql-fill, body .ql-container .ql-picker-label.ql-active .ql-fill, body .ql-container button.ql-active .ql-fill, body .ql-toolbar .ql-picker-item.ql-active .ql-fill, body .ql-toolbar .ql-picker-label.ql-active .ql-fill, body .ql-toolbar button.ql-active .ql-fill {
        fill: var(--bs-app-theme) !important;
    }

/*Color Admin*/
.app-sidebar .menu .menu-item .menu-submenu .menu-item:first-child:before {
    top: -10px;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item:before {
    content: "";
    position: absolute;
    right: -13px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #546e7a;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item:after {
    content: "";
    position: absolute;
    right: 0;
    width: 6px;
    height: 6px;
    border: var(--bs-app-sidebar-menu-grid-border-width) solid #546e7a;
    top: 11px;
    margin-top: -2px;
    z-index: 10;
    background: #546e7a;
    border-radius: 4px;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item .menu-link:after {
    content: "";
    position: absolute;
    right: -11px;
    top: 11px;
    width: 11px;
    height: 2px;
    background: #546e7a;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item:last-child:before {
    bottom: auto;
    height: 13px;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item:first-child:last-child:before {
    height: 23px;
}

.app-sidebar .menu .menu-item .menu-submenu .menu-item.active:after {
    border-color: var(--bs-app-theme);
}

#SettingManage .list-group-item .btn {
    width: 113px;
    white-space: nowrap;
}

.mud-input > input.mud-input-root-outlined, div.mud-input-slot.mud-input-root-outlined {
    padding: .4375rem .75rem;
}

.mud-input .mud-icon-button {
    padding: 0;
}

.ofw-anywhere {
    overflow-wrap: anywhere;
}

.of-hidden {
    overflow: hidden;
}

.widget {
    overflow: unset;
}

.pill {
    padding: 5px;
    display: inline-block;
    vertical-align: middle;
}

.page-item.active > button {
    border-color: var(--bs-btn-border-color);
    background-color: var(--bs-btn-bg);
}

.masked-input-group {
    position: relative;
    display: flex;
    padding: 0;
    margin-bottom: 1rem;
}

    .masked-input-group > input {
        background: none;
        width: 100%;
        padding: 8px 8px 8px 2px;
    }

        .masked-input-group > input:focus-visible {
            outline: none;
        }

    .masked-input-group:has(input:focus) {
        color: var(--bs-component-color);
        background-color: var(--bs-component-bg);
        border-color: #59b0f6;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(33, 150, 243, .25);
    }

    .masked-input-group > label {
        padding: 8px 0 8px 8px;
    }

.ls2 {
    letter-spacing: 2px;
}

.swal2-actions > * {
    margin: 0 .25rem;
}

.form-switch-row {
    padding: 0;
    display: flex;
    justify-content: space-between;
}

    .form-switch-row .form-check-input {
        float: none;
        margin: 0 5px;
    }

.cp-footer {
    padding: 1rem;
    background-color: var(--bs-light);
}

    .cp-footer > * {
        padding-bottom: 10px;
        border-bottom: 1px solid var(--bs-component-border-color);
    }

.toggle-switchy[data-size='xs'] > input + .toggle {
    width: 59px !important;
}

    .toggle-switchy[data-size='xs'] > input + .toggle:before, .toggle-switchy[data-size='xs'] > input + .toggle:after {
        font-size: 0.6rem !important;
    }

.toggle-switchy > input:not(:checked) + .toggle {
    background-color: var(--bs-component-bg) !important;
    border: 1px solid var(--bs-component-border-color) !important;
}

.toggle-switchy > input:focus:not(:checked) + .toggle, .toggle-switchy > input:active:not(:checked) + .toggle {
    box-shadow: none !important;
}

.toggle-switchy[data-style='rounded'] > input + .toggle:after {
    left: 40% !important;
}

.toggle-switchy[data-size='xs'] > input:not(:checked) + .toggle > .switch {
    border-color: var(--bs-component-bg) !important;
}

.form-switch-text {
    display: flex;
    align-items: center;
    padding: 0;
}

    .form-switch-text .form-check-input {
        position: relative;
        width: 58px;
        display: inline-block;
        margin: 0;
    }

        .form-switch-text .form-check-input:after,
        .form-switch-text .form-check-input:before {
            transition: all 200ms linear;
            position: absolute;
            font-size: .7rem;
            display: flex;
            align-items: center;
            z-index: 2;
            height: 100%;
            opacity: 0;
        }

        .form-switch-text .form-check-input:after {
            content: 'ON';
            left: 10%;
            opacity: 0;
        }

        .form-switch-text .form-check-input:checked:after {
            opacity: 1;
        }

        .form-switch-text .form-check-input:before {
            content: 'OFF';
            right: 6%;
            opacity: 1;
        }

        .form-switch-text .form-check-input:checked:before {
            opacity: 0;
        }

.form-check-input:active {
    filter: none;
}
/*
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-radius: 0;
}
*/

/*ApexChart*/
.apexcharts-canvas .apexcharts-tooltip {
    direction: rtl;
    font-family: var(--bs-body-font-family) !important;
}

    .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-marker {
        height: auto !important;
        width: unset !important;
        padding: .4rem 0;
        margin-right: 0;
    }

    .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title {
        text-align: start;
    }

    .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-series-group + .apexcharts-tooltip-series-group {
        margin-top: 0 !important;
    }

.apex-pie-chart > * {
    max-width: 100% !important;
}

.apexcharts-tooltip-series-group {
    align-items: start !important;
    justify-content: start !important;
}

.is-invalid .form-select {
    --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23F44336'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F44336' stroke='none'/%3e%3c/svg%3e");
    padding-right: 4.125rem;
    background-position: right .75rem center,center right 2.25rem;
    background-size: 16px 12px,calc(.75em + .4375rem) calc(.75em + .4375rem);
    border-color: #f44336;
}
