/*** GENERAL COLOR VARIABLES ***/
/*** GENERAL FONT/TEXT VARIABLES ***/
/*** GENERAL BORDER VARIABLES***/
/* Borders for grey */
/* border attributes */
/*** GENERAL ELEMENT VARIABLES***/
/* Footerbackground */
/* Margin */
/* Background */
/* shadows */
/*** GENERAL FORM/INPUT VARIABLES***/
/*date*/
/*Flex prefix mixin*/
/*bold*/
/*bold - small*/
/*semi-bold*/
/*regular*/
/*regular - small*/
/*light*/
/*light italic*/
.loading-md, .loading-sm, .loading-lg, .loading-xs {
    position: relative;
    /*ContentSection loader*/
    /*To cover entire body, the global loader before and after must use position fixed instead of absolute*/
    /*The same rule is applied to the content section, for the loader as this can cover a large area that would otherwise just be covered by the transparent overlay*/
    /* Transparent Overlay */
    /* The loader itself */
}

.loading-md:hover, .loading-sm:hover, .loading-lg:hover, .loading-xs:hover { cursor: progress; }

.loading-md[loader-area="contentSection"], .loading-sm[loader-area="contentSection"], .loading-lg[loader-area="contentSection"], .loading-xs[loader-area="contentSection"] { min-height: 500px; }

.loading-md[loader-area="global"]:before, .loading-md[loader-area="global"]:after, .loading-md[loader-area="contentSection"]:after, .loading-sm[loader-area="global"]:before, .loading-sm[loader-area="global"]:after, .loading-sm[loader-area="contentSection"]:after, .loading-lg[loader-area="global"]:before, .loading-lg[loader-area="global"]:after, .loading-lg[loader-area="contentSection"]:after, .loading-xs[loader-area="global"]:before, .loading-xs[loader-area="global"]:after, .loading-xs[loader-area="contentSection"]:after { position: fixed; }

.loading-md:before, .loading-sm:before, .loading-lg:before, .loading-xs:before {
    background-color: rgba(68, 68, 68, 0.51);
    content: ' ';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1050;
}

.loading-md:after, .loading-sm:after, .loading-lg:after, .loading-xs:after {
    -webkit-animation: 1.2s spin linear infinite;
    animation: 1.2s spin linear infinite;
    background-color: transparent;
    border: 4px solid #414141;
    border-radius: 50%;
    border-top: 4px solid #7fd2c1;
    bottom: 0;
    content: ' ';
    display: block;
    font-size: 60px;
    height: 1em;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 1em;
    z-index: 1050;
}

.loading-md.loading-top:after, .loading-sm.loading-top:after, .loading-lg.loading-top:after, .loading-xs.loading-top:after {
    bottom: auto;
    top: 5%;
}

.loader-wrapper.loading-sm { display: inline-block; }

.loader-wrapper.loading-sm:before { background-color: rgba(0, 0, 0, 0.3); }

/* Small module loader */

.loading-sm:after { font-size: 30px; }

.loading-xs:after { font-size: 20px; }

.loading-lg:after { font-size: 160px; }

/* Animation */

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}