@import 'variables';
@import "~admin-lte/plugins/fontawesome-free/css/all.min.css";
@import "~admin-lte/plugins/daterangepicker/daterangepicker.css";
@import "~admin-lte/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css";

@import "~admin-lte/plugins/select2/css/select2.min.css";
@import "~admin-lte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css";
@import "~admin-lte/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css";

@import "~admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css";
@import "~admin-lte/plugins/datatables-responsive/css/responsive.bootstrap4.min.css";
@import "~admin-lte/plugins/datatables-buttons/css/buttons.bootstrap4.min.css";

@import "~admin-lte/dist/css/adminlte.min.css";
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff !important;
    border-color: #006fe6 !important;
}

@import '~admin-lte/plugins/chart.js/Chart.min.css';

.modal-dialog-bs4 {
    // to solve conflict with google modal
    position: relative !important;
    padding: 0 !important;
    background: initial !important;
    border: initial !important;
    -webkit-box-shadow: inherit !important;
    -moz-box-shadow: inherit !important;
    box-shadow: inherit !important;
}

.flex-center {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.nav[role="menu"] {
    // .nav-item-menu {
    // 	display: flex;
    // 	flex-direction: column;
    // }

    .nav-item-menu:hover .menu-pinable-wrap {
        display: inherit;

        &:after {
            clear: both;
        }
    }

    .nav-treeview {
        .menu-pinable-wrap {
            bottom: 0;
            margin-bottom: 3px;
        }
    }

    .menu-pinable-wrap {
        position: absolute;
        right: 0;
        margin-right:.5rem;
        display: none;

        span {
            float: right;
        }

        .menu-pinable-text {
            border-radius: 10px;
            background-color: #5e5e5e;
            border: 1px solid #5e5e5e;
            font-size: .6rem;
            padding: 2px 7px;
            color: #fff;
            display: none;
            cursor: default;

            // &:hover {
            // 	display: block;
            // }
        }

        &.active {
            .menu-pinable-icon {
                i {
                    //color: #325dba;
                }
            }
        }

        .menu-pinable-icon {
            padding: 2px 8px;

            &:hover {
                i {
                    opacity: 0.5;
                }

                &+.menu-pinable-text {
                    display: inline-block;
                }
            }
        }
    }
}

@media (max-width: 767.98px) {

    .select2-container--bootstrap4 .select2-dropdown {
        width: auto !important;
        left: 0 !important;
    }

    .select2-container--open .select2-dropdown--above {
        display: block !important;
        visibility: visible !important;
    }
}