// Fonts
@import 'fonts/roboto';

// Breakpoint
@import 'breakpoint';

// 3rd Parties
@import '~slick-carousel/slick/slick';
@import '~slick-carousel/slick/slick-theme';
@import '~highlight.js/scss/github';
@import '~tooltipster/dist/css/tooltipster.bundle.min';
@import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min';
@import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min';
@import '~daterangepicker/daterangepicker';
@import '~select2/src/scss/core';
@import '~dropzone/src/dropzone';
@import '~jquery-toast-plugin/src/jquery.toast';

@import "~datatables.net-bs4/css/dataTables.bootstrap4.css";
@import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css";

// Animations
@import 'typing-dots';
@import 'zoom-in';
@import 'intro';

// Components
@import 'top-bar';
@import 'app';
@import 'login';
@import 'mini-chat-box';
@import 'mini-chat-list';
@import 'mini-chat';
@import 'table';
@import 'table-report';
@import 'report-timeline';
@import 'report-chart';
@import 'search';
@import 'input';
@import 'button';
@import 'notification';
@import 'image-fit';
@import 'box';
@import 'report-box';
@import 'global';
@import 'content';
@import 'top-nav';
@import 'side-nav';
@import 'breadcrumb';
@import 'tailwind';
@import 'top-bar-boxed';
@import 'mobile-menu';
@import 'pagination';
@import 'dropdown';
@import 'modal';
@import 'tab';
@import 'checkbox';
@import 'file';
@import 'inbox-filter';
@import 'inbox';
@import 'scrollbar';
@import 'chat';
@import 'boxed-tabs';
@import 'chat-dropdown';
@import 'wizard';
@import 'blog';
@import 'news';
@import 'pricing-tabs';
@import 'accordion';
@import 'error-page';
@import 'tooltip';
@import 'datatable-wrapper';
@import 'datepicker';
@import 'select2';
@import 'summernote';
@import 'slick';
@import 'jquery-validation';
@import 'slick';
@import 'search-result';
@import 'mini-report-chart';
@import 'notification-content';
@import 'report-maps';
@import 'pos-dropdown';
@import 'pos';
@import 'toast';
@import 'post';


.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

.contaner-grafic {
    position: relative;
    &_loading {
        position: relative;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 60px;
            height: 40px;
            background-position: center;
            background-repeat: no-repeat;
            background-color: hsla(0,0%,100%,.3);
            backdrop-filter: blur(.5px);
            z-index: 111;
            background-image: url('../../images/loading.gif');
            background-size: 30px;
        }
    }
}


.tablero-circle {
    margin-bottom: 5px;
    &.tablero-circle--square .tablero-circle__info {
        border-radius: 26px;
    }
}
.tablero-circle__date,
.tablero-circle {
    font-size: .8rem;
    text-align: center;
}
.tablero-circle__value {
    width: 100%;
    text-align: center
}
.tablero-circle__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 5px;
}
.tablero-circle__status {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background: gray;
}
.tablero-circle__title {
    font-weight: 700;
}
.tablero-circle__item.error .tablero-circle__status {
    background-color: red;
}
.tablero-circle__item.active .tablero-circle__status {
    background-color: #4caf50;
}
.tablero-circle__info {
    margin: auto;
    border: 2px solid #dfdfdf;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-content: center;
    flex-direction: column;
    padding: .5rem;
    justify-content: center;
    box-shadow: 0px 2px 4px #333;
    font-weight: 700;
    margin-bottom: 2px;
    &:hover {
        box-shadow: 0px 1px 3px #333;
    }
}