@import '~material-design-icons/iconfont/material-icons.css';
@import '~bootstrap/dist/css/bootstrap.css';
@import '~bootstrap-vue/dist/bootstrap-vue.css';
@import '~bootstrap-material-design/dist/css/bootstrap-material-design.min.css';
@import '~sweetalert2/src/sweetalert2.scss';
@import '~vue-select/dist/vue-select.css';
@import '~leaflet/dist/leaflet.css';
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.snow.css';
@import '~quill/dist/quill.bubble.css';
@import '~vue-bootstrap-typeahead/dist/VueBootstrapTypeahead.css';
@import '~uppy/dist/uppy.css';
@import '~@voerro/vue-tagsinput/dist/style.css';
@import '~jquery-ui-bundle/jquery-ui.min.css';
@import '~shabnam-font/dist/font-face.css';
@import '~material-dashboard/assets/scss/material-dashboard.scss';
@import '~chart.js/dist/Chart.min.css';
@import '~vue-datetime/dist/vue-datetime.css';
@import './variables.scss';
@import './material-dashboard-rtl.scss';

.navbar-nav .dropdown {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar {
    z-index: 1000;
}

.screen-saver .sidebar {
    width: 100%;
    z-index: 4000000000;
}

.screen-saver .swal2-container {
    z-index: 4000000001;
}

.screen-saver .main-panel {
    display: none;
    opacity: 0;
}

.screen-saver .sidebar-wrapper {
    display: none;
    opacity: 0;
}

.sidebar[data-background-color="black"] .sidebar-background:after {
    transition-duration: 1.0s,1.0s, 1.0s;
}

.screen-saver .sidebar[data-background-color="black"] .sidebar-background:after {
    background: rgba(0, 0, 0, 0.0);
}

.screen-saver-content {
    display: none;
}

.sidebar-background {
    filter: blur(4px);
}

.screen-saver {
    .sidebar-background {
        filter: unset;
    }

    .screen-saver-content {
        display: flex;
        position: absolute;
        z-index: 1000;
        align-items: center;
        vertical-align: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    h1 {
        text-shadow: 0 0 10px #000000;
        cursor: pointer;
        font-size: 120pt;
    }
}

a.image-author {
    bottom: 10px;
    right: 10px;
    position: fixed;
}

.page-link:hover {
    color: #000;
}

.page-link {
    outline: none !important;
    box-shadow: none !important;
}

.bmd-form-group:not(.is-focused):not(.is-filled) .bmd-label-floating {
    top: 35px;
}

.card .card-body .form-group {
    margin: 0 !important;
}

.is-focused [class^='bmd-label'], .is-focused [class*=' bmd-label'] {
    color: #AAAAAA;
}

.form-group .bmd-label-static {
    top: -2px !important;
}

.nav-tabs .nav-item .nav-link, .nav-tabs .nav-item .nav-link:hover, .nav-tabs .nav-item .nav-link:focus {
    color: black !important;
}

.sidebar-wrapper .ps__rail-x {
    display: none;
}

.bmd-form-group .bmd-label-static, .bmd-form-group.is-filled .bmd-label-floating, .bmd-form-group .is-filled .bmd-label-floating, .bmd-form-group.is-focused .bmd-label-floating, .bmd-form-group .is-focused .bmd-label-floating {
    top: 0.7rem;
}

.list-group.vbt-autcomplete-list {
    background: #fff;
}

.uppy-Dashboard--modal {
    z-index: 2500;
}

.sidebar .badge {
    float: right;
    margin-top: -21px;
}

.sanjab-crud-table th {
    white-space: nowrap;
}

#advanced_search_collapse {
    .custom-select {
        margin-top: 24px;
    }
}

.elfinder.elfinder-rtl div.elfinder-bottomtray {
    z-index: 1000;
}

.elfinder-dialog-info, .ui-dialog, .elfinder-frontmost {
    z-index: 100000 !important;
}

.CodeMirror, .elfinder-file-edit, .elfinder-quicklook-preview-text-wrapper {
    text-align: left;
    direction: ltr;
}

.elfinder-quicklook-titlebar-icon.elfinder-titlebar-button-right {
    background: #777;
}

.elfinder-button-icon {
    background: none;
}

.sanjab-crud-table.table-responsive {
    overflow-y: hidden;
}

.sanjab-simple-view-group {
    word-break: keep-all;
}

.sidebar[data-background-color=black] .sidebar-background:after {
    opacity: 0.4;
}

.swal2-container.swal2-center.swal2-backdrop-show, .uppy-Dashboard-overlay {
    backdrop-filter: blur(3px);
}

body > * {
    transition: 0.15s filter linear;
}

.sanjab-icons-list {
    overflow: hidden;

    i {
        width: 20px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (max-width: 991px) {
    .screen-saver .sidebar {
        transform: translate3d(0, 0, 0);
    }

    #sanjab_navbar_app {
        display: none;
    }
}

@media (min-width: 820px) {
    html[dir="rtl"] .uppy-Dashboard--modal .uppy-Dashboard-inner {
        right: unset;
    }
}

.custom-control.custom-checkbox span, .custom-control.custom-checkbox label {
    padding-left: 20px;
}

.item-list-widget-buttons {
    position: absolute;
    right: 3px;
    top: -6px;
}

html[dir="ltr"] {
    .custom-control {
        padding-left: 0;
    }
}

/** RTL **/

html[dir="rtl"] {

    .custom-control-label::after, .custom-control-label::before {
        right: -20px !important;
    }

    .form-check .form-check-label span {
        right: -10px;
        left: unset !important;
    }

    .form-check .form-check-sign:before {
        right: 0;
        left: unset !important;
    }

    .sidebar .nav .caret {
        right: unset !important;
        left: 6px;
    }

    .bmd-form-group .bmd-label-static {
        left: unset !important;
        right: 0;
    }

    .vbt-autcomplete-list.list-group {
        padding: 0 !important;
        margin-top: 40px;

        .list-group-item :first-child {
            margin-right: 0 !important;
        }
    }

    .sidebar .badge {
        float: left;
    }

    .item-list-widget-buttons {
        position: absolute;
        right: unset;
        left: 3px;
    }
}

.sanjab-seperator-widget {
    width: 100%;
    text-align: center;
    line-height: 0.1em;
    margin: 10px 0 20px;
    padding-top: 24px;
}

 .sanjab-seperator-widget span {
    background:#fff;
    color: #AAAAAA;
    font-weight: bold;
    padding:0 10px;
}

#sanjab_navbar_app, #sanjab_navbar_mobile_app {
    .dropdown-menu {
        transition: none;
    }
}

#sanjab_navbar_mobile_app {
    .dropdown-menu {
        transform: none !important;
    }
}

html[lang="fa"] {
    body, h4, .dz-message, .swal2-title, .tooltip-inner, .screen-saver-content h1,
    #sanjab_elfinder, .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button,
    .ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6, .ql-editor.ql-blank::before {
        font-family: Shabnam;
    }
}

.sanjab-customized-scrollbar {
    &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }

    &::-webkit-scrollbar {
        width: 6px;
        background-color: rgba(0, 0, 0, 0.3);
    }

    &::-webkit-scrollbar-track {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: rgba(0, 0, 0, 0.3);
    }
}

html, .sidebar-wrapper {
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        box-shadow: inset 0 0 0 rgba(0,0,0,0.0);
        -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.0);
        background-color: rgba(0, 0, 0, 0);
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0);
        border-radius: 10px;
    }

    &::-webkit-scrollbar {
        width: 6px;
        background-color: rgba(0, 0, 0, 0);
    }

    &:hover::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #222;
    }

    &:hover::-webkit-scrollbar {
        background-color: #222;
    }
}

@each $theme in $themes {
    .theme-#{$theme} {

        scrollbar-color: map-get($material-colors, $theme) #222;

        &::-webkit-scrollbar-thumb,
        .sidebar-wrapper:hover::-webkit-scrollbar-thumb,
        .sanjab-customized-scrollbar::-webkit-scrollbar-thumb,
        .form-check .form-check-input:checked + .form-check-sign .check {
            background-color: map-get($material-colors, $theme) !important;
        }

        .sidebar {
            @include set-background-color-button(map-get($material-colors, $theme));
        }

        .card-header-sanjab .card-icon,
        .card-header-sanjab .card-text,
        .card-header-sanjab:not(.card-header-icon):not(.card-header-text),
        &.bg-sanjab,
        &.card-rotate.bg-sanjab .front,
        &.card-rotate.bg-sanjab .back{
            background: linear-gradient(60deg, map-get($material-colors-400, $theme), map-get($material-colors-600, $theme));
        }

        .card-header-sanjab .card-icon,
        .card-header-sanjab:not(.card-header-icon):not(.card-header-text),
        .card-header-sanjab .card-text{
            @include shadow-big-color(map-get($material-colors, $theme));
        }

        .btn.btn-primary, .btn.btn-primary:active, .btn.btn-primary.active, .open > .btn.btn-primary.dropdown-toggle, .show > .btn.btn-primary.dropdown-toggle {
            @include bmd-raised-button-variant(white, map-get($material-colors, $theme), map-get($material-colors, $theme));
        }

        .screen-saver {
            h1 {
                color: map-get($material-colors, $theme);
            }
        }

        .page-link,
        .spinner-border.text-default,
        a.image-author, .btn.btn-sanjab,
        .nav-item a {
            color: map-get($material-colors, $theme);
        }

        .page-item.active .page-link {
            background-color: map-get($material-colors, $theme);
            border-color: map-get($material-colors, $theme);
        }

        .custom-select {
            border-color: map-get($material-colors, $theme);
        }

        .custom-select:focus {
            border-color: map-get($material-colors-800, $theme);
        }

        select.custom-select option.option2 {
            background-color: map-get($material-colors-400, $theme);
        }

        .dropdown-menu {
            z-index: 1100;

            .dropdown-item:hover,
            .dropdown-item:focus,
            a:hover,
            a:focus,
            a:active,
            a.active {
                color: white;
                background-color: map-get($material-colors, $theme) !important;
                @include shadow-small-color(map-get($material-colors, $theme));
            }
        }

        .bmd-form-group.is-focused .form-control {
            background-image: linear-gradient(to top, rgba(map-get($material-colors, $theme), 0.8) 2px, rgba(map-get($material-colors-900, $theme), 0.0) 2px), linear-gradient(to top, rgba(map-get($material-colors-50, $theme), 1.0) 1px, rgba(map-get($material-colors-900, $theme), 0.0) 1px);
        }

        .login-page .form-control {
            background-image: linear-gradient(to top, map-get($material-colors, $theme) 2px, rgba(map-get($material-colors-900, $theme), 0.0) 2px), linear-gradient(to top, map-get($material-colors-200, $theme) 1px, rgba(map-get($material-colors-900, $theme), 0.0) 1px)
        }

        .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
            background-color: map-get($material-colors, $theme) !important;
        }

        .sanjab-seperator-widget {
            border-bottom: 1px solid  map-get($material-colors, $theme);
        }

        .vdatetime-popup__header,
        .vdatetime-calendar__month__day--selected > span > span,
        .vdatetime-calendar__month__day--selected:hover > span > span {
            background: map-get($material-colors, $theme);
        }

        .vdatetime-year-picker__item--selected,
        .vdatetime-time-picker__item--selected,
        .vdatetime-popup__actions__button {
            color: map-get($material-colors, $theme);
        }
    }
}