.preloader {
    width: 100%;
    height: 100%;
    top: 0px;
    position: fixed;
    z-index: 99999;
    background: aliceblue;
}

    .preloader .cssload-speeding-wheel {
        position: absolute;
        top: calc(50% - 3.5px);
        left: calc(50% - 3.5px);
    }

.loader,
.loader__figure {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.loader {
    overflow: visible;
    padding-top: 2em;
    height: 0;
    width: 2em;
}

.loader__figure {
    height: 0;
    width: 0;
    box-sizing: border-box;
    border: 0 solid #1976d2;
    border-radius: 50%;
    -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.loader__label {
    float: left;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0.5em 0 0 50%;
    font-size: 0.875em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #1976d2;
    white-space: nowrap;
    -webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@-webkit-keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2;
    }

    29% {
        background-color: #1976d2;
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1;
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent;
    }
}

@-moz-keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2;
    }

    29% {
        background-color: #1976d2;
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1;
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent;
    }
}

@keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2;
    }

    29% {
        background-color: #1976d2;
    }

    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1;
    }

    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent;
    }
}

@-webkit-keyframes loader-label {
    0% {
        opacity: 0.25;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }
}

@-moz-keyframes loader-label {
    0% {
        opacity: 0.25;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }
}

@keyframes loader-label {
    0% {
        opacity: 0.25;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 0.25;
    }
}

#main-wrapper[data-layout="vertical"], #main-wrapper[data-layout="horizontal"] {
    /*This is for the logo bg*/
    /*This is for the sidebar bg*/
}

    #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin1"], #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin1"] {
        background: #2962FF !important;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin2"], #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin2"] {
        background: #fe5419 !important;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin3"], #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin3"] {
        background: #00b0ff !important;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin4"], #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin4"] {
        background: #6659f7 !important;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin5"], #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin5"] {
        background: #273146 !important;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin6"], #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin6"] {
        background: #fff !important;
    }

        #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin6"] .dark-logo, #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin6"] .dark-logo {
            display: block;
        }

        #main-wrapper[data-layout="vertical"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin6"] .light-logo, #main-wrapper[data-layout="horizontal"] .topbar nav .nav-wrapper .brand-logo[data-logobg="skin6"] .light-logo {
            display: none;
        }

    #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin1"], #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin1"] {
        background: #303443;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin2"], #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin2"] {
        background: #fe5419;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin3"], #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin3"] {
        background: #00b0ff;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin4"], #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin4"] {
        background: #6659f7;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin5"], #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin5"] {
        background: #273146;
    }

    #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin6"], #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin6"] {
        background: #fff;
    }

        #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin6"] .nav-wrapper ul li a, #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin6"] .nav-wrapper ul li a {
            color: #6c757d;
        }

        #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin6"] .bars, #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin6"] .bars {
            background: #adb5bd;
        }

        #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin6"] .header-search .header-search-input, #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin6"] .header-search .header-search-input {
            color: #9098ac;
        }

            #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin6"] .header-search .header-search-input:focus, #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin6"] .header-search .header-search-input:focus {
                border: 1px solid #adb5bd;
            }

        #main-wrapper[data-layout="vertical"] .topbar nav[data-navbarbg="skin6"] .header-search i, #main-wrapper[data-layout="horizontal"] .topbar nav[data-navbarbg="skin6"] .header-search i {
            color: #9098ac;
        }

    #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin1"], #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin1"] {
        background-color: #2962FF !important;
    }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin1"] .collapsible-body, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin1"] .collapsible-body {
            background-color: #2962FF !important;
        }

    #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin2"], #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin2"] {
        background-color: #fe5419 !important;
    }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin2"] .collapsible-body, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin2"] .collapsible-body {
            background-color: #fe5419 !important;
        }

    #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin3"], #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin3"] {
        background-color: #00b0ff !important;
    }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin3"] .collapsible-body, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin3"] .collapsible-body {
            background-color: #00b0ff !important;
        }

    #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin4"], #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin4"] {
        background-color: #6659f7 !important;
    }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin4"] .collapsible-body, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin4"] .collapsible-body {
            background-color: #6659f7 !important;
        }

    #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin5"], #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin5"] {
        background-color: #273146 !important;
    }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin5"] .collapsible-body, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin5"] .collapsible-body {
            background-color: #273146 !important;
        }

    #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"], #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] {
        background-color: #fff !important;
    }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.small-cap, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.small-cap {
            color: #9098ac;
        }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li a, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li a {
            color: #4F5467;
        }

            #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li a i, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li a i {
                color: #adb5bd;
            }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li:hover > .collapsible-header, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li:hover > .collapsible-header {
            color: #4F5467;
        }

            #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li:hover > .collapsible-header i,
            #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li:hover > .collapsible-header .hide-menu, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li:hover > .collapsible-header i,
            #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li:hover > .collapsible-header .hide-menu {
                color: #4F5467;
            }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.active > .collapsible-header, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.active > .collapsible-header {
            color: #fff;
        }

            #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.active > .collapsible-header i,
            #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.active > .collapsible-header .hide-menu, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.active > .collapsible-header i,
            #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] ul li.active > .collapsible-header .hide-menu {
                color: #fff;
            }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li a, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li a {
            color: #4F5467 !important;
        }

            #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li a i, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li a i {
                color: #adb5bd !important;
            }

        #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li.active a, #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li:hover a, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li.active a, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li:hover a {
            color: #212529 !important;
        }

            #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li.active a i, #main-wrapper[data-layout="vertical"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li:hover a i, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li.active a i, #main-wrapper[data-layout="horizontal"] .left-sidebar .sidenav[data-sidebarbg="skin6"] .collapsible-body > ul:not(.collapsible) > li:hover a i {
                color: #212529 !important;
            }