@import "bootstrap/bootstrap.min.css";
@import "jquery/jquery-ui.min.css";

@import "icons/font-awesome.min.css";

@import "mcustomscrollbar/jquery.mCustomScrollbar.css";
@import "select2/select2.css";

@import "shbrush/shCoreDefault.css";
@import "shbrush/shThemeDefault.css";

@import "cleditor/jquery.cleditor.css";
@import "codemirror/codemirror.css";
@import "validationengine/validationEngine.css";

@import "fancybox/jquery.fancybox.css";

@import "fullcalendar/fullcalendar.css";

@import "elfinder/elfinder.min.css";
@import "filetree/jqueryFileTree.css";

@import "stylesheet.css";
@import "backgrounds.css";
@import "themes.css";
@import "mystyles.css";

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}

@media only screen and (min-width : 321px) {}

@media only screen and (max-width : 320px) {}

@media only screen and (max-width: 767px) {
    .container {
        padding-left: 0px;
        padding-right: 0px;
    }

    .row {
        margin-left: 10px;
        margin-right: 10px;
    }

    .navbar-collapse {
        background: #444;
        border: 0px;
    }

    .navbar-collapse .nav,
    .navbar-collapse .nav li a {
        border: 0px;
        width: 100%;
        text-align: left;
    }

    .navbar-collapse .navbar-form {
        float: left;
        width: 100%;
        margin: 0px;
    }

    .navbar-collapse .navbar-form .form-group {
        padding: 5px;
    }

    .navbar-nav .open .dropdown-menu {
        width: 100%;
        float: left;
    }

    .navbar-nav .open .dropdown-menu>li>a {
        padding: 8px 15px 8px 25px;
    }

    .navbar-nav .open .dropdown-menu>li>a:hover {
        background: url('../img/background/bt_cubs_a.png') left top repeat transparent;
    }

    .dropdown-menu>li>a .icon-angle-right {
        display: none;
    }

    .navbar-collapse .dropdown-submenu {
        position: relative;
        display: block;
        float: left;
        left: auto;
        background: transparent;
        padding-left: 25px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        width: 100%;
    }

    .registration-block {
        width: auto;
    }

    .block>div,
    .block.block-drop-shadow {
        -moz-border-radius: 0px !important;
        -webkit-border-radius: 0px !important;
        border-radius: 0px !important;
    }
}

@media only screen and (max-width: 768px) {

    .row>[class^='col-xs-'],
    .row>[class^='col-sm-'],
    .row>[class^='col-md-'],
    .row>[class^='col-lg-'] {
        margin-bottom: 10px;
        padding-left: 0px;
        padding-right: 0px;
    }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}

@media only screen and (max-width: 992px) {}

@media only screen and (max-width: 1024px) {
    .block .user {
        padding: 35px 10px;
    }

    .container.container-fixed {
        width: auto;
        max-width: auto !important;
    }


}

@media only screen and (max-width: 1279px) {}


.sortable {
    position: relative;
    padding-left: 20px !important;
}

.sortable .fa-angle-double-down {
    position: absolute;
    left: 5px;
    top: 20px;
    font-size: 12px;
    font-weight: bold
}

.sortable .fa-angle-double-up {
    position: absolute;
    left: 5px;
    top: 8px;
    font-size: 12px;
    font-weight: bold
}

.activeiclass {
    color: aqua !important
}

.not_active {
    color: rgba(255, 255, 255, .5)
}

.js-snackbar-container {
    z-index: 99999 !important;
    position: absolute
}

td .btn-sm {
    padding: 4px 8px
}

::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: .25rem !important;
}

.m-2 {
    margin: .5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.mt-1 {
    margin-top: .25rem !important;
}

.mr-1 {
    margin-right: .25rem !important;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.ml-1 {
    margin-left: .25rem !important;
}

.mx-1 {
    margin-left: .25rem !important;
    margin-right: .25rem !important;
}

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important;
}

.mt-2 {
    margin-top: .5rem !important;
}

.mr-2 {
    margin-right: .5rem !important;
}

.mb-2 {
    margin-bottom: .5rem !important;
}

.ml-2 {
    margin-left: .5rem !important;
}

.mx-2 {
    margin-right: .5rem !important;
    margin-left: .5rem !important;
}

.my-2 {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.mx-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
}

.my-3 {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.mx-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mr-5 {
    margin-right: 3rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.ml-5 {
    margin-left: 3rem !important;
}

.mx-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mx-auto {
    margin-right: auto !important;
    margin-left: auto !important;
}

.my-auto {
    margin-bottom: auto !important;
    margin-top: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: .25rem !important;
}

.p-2 {
    padding: .5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pl-0 {
    padding-left: 0 !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.pt-1 {
    padding-top: .25rem !important;
}

.pr-1 {
    padding-right: .25rem !important;
}

.pb-1 {
    padding-bottom: .25rem !important;
}

.pl-1 {
    padding-left: .25rem !important;
}

.px-1 {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
}

.pt-2 {
    padding-top: .5rem !important;
}

.pr-2 {
    padding-right: .5rem !important;
}

.pb-2 {
    padding-bottom: .5rem !important;
}

.pl-2 {
    padding-left: .5rem !important;
}

.px-2 {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pr-3 {
    padding-right: 1rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pl-3 {
    padding-left: 1rem !important;
}

.py-3 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pr-4 {
    padding-right: 1.5rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4 {
    padding-left: 1.5rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pr-5 {
    padding-right: 3rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.pl-5 {
    padding-left: 3rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/************
*** label ***
************/

.label-dark-orange,
.label-orange,
.label-dark-yellow,
.label-yellow,
.label-lime-green,
.label-green,
.label-dark-green,
.label-cyan,
.label-blue,
.label-dark-blue,
.label-blue-green,
.label-purple,
.label-fushia,
.label-red,
.label-dark-red,
.label-light-grey,
.label-carmin-red,
.label-grey,
.label-dark-grey,
.label-black {
    color: #ffffff;
}

.label-dark-orange {
    background-color: #ff7900;
}

.label-orange {
    background-color: #ff9f00;
}

.label-dark-yellow {
    background-color: #d9c200;
}

.label-lime-green {
    background-color: #b7e000;
}

.label-green {
    background-color: #62b700;
}

.label-dark-green {
    background-color: #128b00;
}

.label-blue-green {
    background-color: #00ae7c;
}

.label-cyan {
    background-color: #00b6bd;
}

.label-blue {
    background-color: #0074e5;
}

.label-dark-blue {
    background-color: #002da9;
}

.label-purple {
    background-color: #5b00a9;
}

.label-fushia {
    background-color: #9b00a9;
}

.label-carmin-red {
    background-color: #a90040;
}

.label-red {
    background-color: #d10000;
}

.label-dark-red {
    background-color: #9f1200;
}

.label-light-grey {
    background-color: #c9c9c9;
}

.label-grey {
    background-color: #9c9c9c;
}

.label-dark-grey {
    background-color: #5b5b5b;
}

.label-black {
    background-color: #000000;
}

/**********
*** btn ***
***********/

.btn-dark-orange,
.btn-orange,
.btn-dark-yellow,
.btn-yellow,
.btn-lime-green,
.btn-green,
.btn-dark-green,
.btn-cyan,
.btn-blue,
.btn-dark-blue,
.btn-blue-green,
.btn-purple,
.btn-fushia,
.btn-red,
.btn-dark-red,
.btn-light-grey,
.btn-carmin-red,
.btn-grey,
.btn-dark-grey,
.btn-black {
    color: #ffffff;
}

.btn-dark-orange {
    background-color: #ff7900;
    border-color: #ff7900;
    color: #000;
}

.btn-orange {
    background-color: #ff9f00;
    border-color: #ff9f00;
    color: #000;
}

.btn-dark-yellow {
    background-color: #d9c200;
    border-color: #d9c200;
}

.btn-lime-green {
    background-color: #b7e000;
    border-color: #b7e000;
}

.btn-green {
    background-color: #62b700;
    border-color: #62b700;
}

.btn-dark-green {
    background-color: #128b00;
    border-color: #128b00;
}

.btn-blue-green {
    background-color: #00ae7c;
    border-color: #00ae7c;
}

.btn-cyan {
    background-color: #00b6bd;
    border-color: #00b6bd;
}

.btn-blue {
    background-color: #0074e5;
    border-color: #0074e5;
}

.btn-dark-blue {
    background-color: #002da9;
    border-color: #002da9;
}

.btn-purple {
    background-color: #5b00a9;
    border-color: #5b00a9;
}

.btn-fushia {
    background-color: #9b00a9;
    border-color: #9b00a9;
}

.btn-carmin-red {
    background-color: #a90040;
    border-color: #a90040;
}

.btn-red {
    background-color: #d10000;
    border-color: #d10000;
}

.btn-dark-red {
    background-color: #9f1200;
    border-color: #9f1200;
}

.btn-light-grey {
    background-color: #c9c9c9;
    border-color: #c9c9c9;
}

.btn-grey {
    background-color: #9c9c9c;
    border-color: #9c9c9c;
    color: #000
}

.btn-dark-grey {
    background-color: #5b5b5b;
    border-color: #5b5b5b;
}

.btn-black {
    background-color: #000000;
    border-color: #000000;
}

.btn-dark-orange:hover,
.btn-orange:hover,
.btn-dark-yellow:hover,
.btn-yellow:hover,
.btn-lime-green:hover,
.btn-green:hover,
.btn-dark-green:hover,
.btn-cyan:hover,
.btn-blue:hover,
.btn-dark-blue:hover,
.btn-carmin-red:hover,
.btn-purple:hover,
.btn-fushia:hover,
.btn-red:hover,
.btn-dark-red:hover,
.btn-light-grey:hover,
.btn-blue-green:hover,
.btn-grey:hover,
.btn-dark-grey:hover,
.btn-black:hover {
    color: #ffffff;
    opacity: 0.9;
}

/***************
***** panel ****
***************/

.panel-dark-orange .panel-heading,
.panel-orange .panel-heading,
.panel-dark-yellow .panel-heading,
.panel-yellow .panel-heading,
.panel-lime-green .panel-heading,
.panel-green .panel-heading,
.panel-dark-green .panel-heading,
.panel-cyan .panel-heading,
.panel-blue .panel-heading,
.panel-dark-blue .panel-heading,
.panel-blue-green .panel-heading,
.panel-purple .panel-heading,
.panel-fushia .panel-heading,
.panel-red .panel-heading,
.panel-dark-red .panel-heading,
.panel-light-grey .panel-heading,
.panel-carmin-red .panel-heading,
.panel-grey .panel-heading,
.panel-dark-grey .panel-heading,
.panel-black .panel-heading {
    color: #ffffff;
}

.panel-dark-orange {
    border-color: #ff7900;
}

.panel-orange {
    border-color: #ff9f00;
}

.panel-dark-yellow {
    border-color: #d9c200;
}

.panel-lime-green {
    border-color: #b7e000;
}

.panel-green {
    border-color: #62b700;
}

.panel-dark-green {
    border-color: #128b00;
}

.panel-blue-green {
    border-color: #00ae7c;
}

.panel-cyan {
    border-color: #00b6bd;
}

.panel-blue {
    border-color: #0074e5;
}

.panel-dark-blue {
    border-color: #002da9;
}

.panel-purple {
    border-color: #5b00a9;
}

.panel-fushia {
    border-color: #9b00a9;
}

.panel-carmin-red {
    border-color: #a90040;
}

.panel-red {
    border-color: #d10000;
}

.panel-dark-red {
    border-color: #9f1200;
}

.panel-light-grey {
    border-color: #c9c9c9;
}

.panel-grey {
    border-color: #9c9c9c;
}

.panel-dark-grey {
    border-color: #5b5b5b;
}

.panel-black {
    border-color: #000000;
}

.panel-dark-orange .panel-heading {
    background-color: #ff7900;
}

.panel-orange .panel-heading {
    background-color: #ff9f00;
}

.panel-dark-yellow .panel-heading {
    background-color: #d9c200;
}

.panel-lime-green .panel-heading {
    background-color: #b7e000;
}

.panel-green .panel-heading {
    background-color: #62b700;
}

.panel-dark-green .panel-heading {
    background-color: #128b00;
}

.panel-blue-green .panel-heading {
    background-color: #00ae7c;
}

.panel-cyan .panel-heading {
    background-color: #00b6bd;
}

.panel-blue .panel-heading {
    background-color: #0074e5;
}

.panel-dark-blue .panel-heading {
    background-color: #002da9;
}

.panel-purple .panel-heading {
    background-color: #5b00a9;
}

.panel-fushia .panel-heading {
    background-color: #9b00a9;
}

.panel-carmin-red .panel-heading {
    background-color: #a90040;
}

.panel-red .panel-heading {
    background-color: #d10000;
}

.panel-dark-red .panel-heading {
    background-color: #9f1200;
}

.panel-light-grey .panel-heading {
    background-color: #c9c9c9;
}

.panel-grey .panel-heading {
    background-color: #9c9c9c;
}

.panel-dark-grey .panel-heading {
    background-color: #5b5b5b;
}

.panel-black .panel-heading {
    background-color: #000000;
}

/***************
***** alert ****
***************/

.alert-dark-orange,
.alert-orange,
.alert-dark-yellow,
.alert-yellow,
.alert-lime-green,
.alert-green,
.alert-dark-green,
.alert-cyan,
.alert-blue,
.alert-dark-blue,
.alert-blue-green,
.alert-purple,
.alert-fushia,
.alert-red,
.alert-dark-red,
.alert-light-grey,
.alert-carmin-red,
.alert-grey,
.alert-dark-grey,
.alert-black {
    color: #ffffff;
}

.alert-dark-orange {
    background-color: #ff7900;
}

.alert-orange {
    background-color: #ff9f00;
}

.alert-dark-yellow {
    background-color: #d9c200;
}

.alert-lime-green {
    background-color: #b7e000;
}

.alert-green {
    background-color: #62b700;
}

.alert-dark-green {
    background-color: #128b00;
}

.alert-blue-green {
    background-color: #00ae7c;
}

.alert-cyan {
    background-color: #00b6bd;
}

.alert-blue {
    background-color: #0074e5;
}

.alert-dark-blue {
    background-color: #002da9;
}

.alert-purple {
    background-color: #5b00a9;
}

.alert-fushia {
    background-color: #9b00a9;
}

.alert-carmin-red {
    background-color: #a90040;
}

.alert-red {
    background-color: #d10000;
}

.alert-dark-red {
    background-color: #9f1200;
}

.alert-light-grey {
    background-color: #c9c9c9;
}

.alert-grey {
    background-color: #9c9c9c;
}

.alert-dark-grey {
    background-color: #5b5b5b;
}

.alert-black {
    background-color: #000000;
}


/**************
****** td *****
**************/

td.dark-orange,
td.orange,
td.dark-yellow,
td.yellow,
td.lime-green,
td.green,
td.dark-green,
td.cyan,
td.blue,
td.dark-blue,
td.blue-green,
td.purple,
td.fushia,
td.red,
td.dark-red,
td.light-grey,
td.carmin-red,
td.grey,
td.dark-grey,
td.black {
    color: #ffffff;
}

td.dark-orange {
    background-color: #ff7900;
}

td.orange {
    background-color: #ff9f00;
}

td.dark-yellow {
    background-color: #d9c200;
}

td.lime-green {
    background-color: #b7e000;
}

td.green {
    background-color: #62b700;
}

td.dark-green {
    background-color: #128b00;
}

td.blue-green {
    background-color: #00ae7c;
}

td.cyan {
    background-color: #00b6bd;
}

td.blue {
    background-color: #0074e5;
}

td.dark-blue {
    background-color: #002da9;
}

td.purple {
    background-color: #5b00a9;
}

td.fushia {
    background-color: #9b00a9;
}

td.carmin-red {
    background-color: #a90040;
}

td.red {
    background-color: #d10000;
}

td.dark-red {
    background-color: #9f1200;
}

td.light-grey {
    background-color: #c9c9c9;
}

td.grey {
    background-color: #9c9c9c;
}

td.dark-grey {
    background-color: #5b5b5b;
}

td.black {
    background-color: #000000;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 2px
}

.buildtype i {
    background: rgba(0, 0, 0, 1);
    padding: 5px;
    border-radius: 50px
}

.blue-bg {
    background: rgb(3, 3, 117);
    padding: 5px 10px
}

.green-bg {
    background: rgb(3, 144, 94);
    padding: 5px 10px
}

.phone-number-column::-webkit-inner-spin-button,
.phone-number-column::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.right-part {
    border-right: 1px dotted #ccc !important;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.phone-number-column {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.img-wrapper img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

/* COLORS  */
.text-primary {
    color: #007bff;
}

.text-secondary {
    color: #6c757d;
}

.text-success {
    color: #28a745;
}

.text-danger {
    color: #dc3545;
}

.text-warning {
    color: #ffc107;
}

.text-info {
    color: #17a2b8;
}

.text-light {
    color: #f8f9fa;
}

.text-dark {
    color: #343a40;
}

.text-muted {
    color: #6c757d;
}


/* All corners */
.rounded {
    border-radius: .25rem;
}

.rounded-1 {
    border-radius: .2rem;
}

.rounded-2 {
    border-radius: .375rem;
}

.rounded-3 {
    border-radius: .5rem;
}

.rounded-circle {
    border-radius: 50%;
}

.rounded-pill {
    border-radius: 50rem;
    /* Large value to ensure pill shape */
}

.rounded-0 {
    border-radius: 0;
}

/* Individual sides (example with LTR direction) */
.rounded-start {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.rounded-end {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.rounded-top {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.rounded-bottom {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

/* Specific corners */
.rounded-tl {
    border-top-left-radius: .25rem;
}

.rounded-tr {
    border-top-right-radius: .25rem;
}

.rounded-bl {
    border-bottom-left-radius: .25rem;
}

.rounded-br {
    border-bottom-right-radius: .25rem;
}


.loader {
    width: 100px;
    height: 100px;
    margin: auto auto;
}

.loader p {
    font-size: 14px;
    color: #fff;
}

.loader .loader-inner {
    display: inline-block;
    width: 15px;
    border-radius: 15px;
    background: #74d2ba;
}

.loader .loader-inner:nth-last-child(1) {
    -webkit-animation: loading 1.5s 1s infinite;
    animation: loading 1.5s 1s infinite;
}

.loader .loader-inner:nth-last-child(2) {
    -webkit-animation: loading 1.5s .5s infinite;
    animation: loading 1.5s .5s infinite;
}

.loader .loader-inner:nth-last-child(3) {
    -webkit-animation: loading 1.5s 0s infinite;
    animation: loading 1.5s 0s infinite;
}

@-webkit-keyframes loading {
    0% {
        height: 15px;
    }

    50% {
        height: 35px;
    }

    100% {
        height: 15px;
    }
}

@keyframes loading {
    0% {
        height: 15px;
    }

    50% {
        height: 35px;
    }

    100% {
        height: 15px;
    }
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.flex-col {
    flex: 1;
    /* Each column will grow equally */
    min-width: 100px;
    /* Prevent columns from becoming too narrow */
}

#loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, .5);
    z-index: 9999;
    display: none;
}

#loader-wrapper .wave-loader {
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30%;
    left: 50%;
    margin-left: -35px;
}

#loader-wrapper .wave-loader div {
    width: 10px;
    height: 10px;
    margin: 5px;
    background-color: #09f839;
    border-radius: 50%;
    animation: wave 1.5s infinite ease-in-out;
}

#loader-wrapper .wave-loader div:nth-child(2) {
    animation-delay: -0.4s;
}

#loader-wrapper .wave-loader div:nth-child(3) {
    animation-delay: -0.2s;
}

#loader-wrapper .wave-loader div:nth-child(4) {
    animation-delay: 0s;
}

#loader-wrapper .wave-loader div:nth-child(5) {
    animation-delay: 0.2s;
}

@keyframes wave {

    0%,
    40%,
    100% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-20px);
    }
}