.color-blue {
    color: #2d8fd0 !important;
}

.color-info {
    color: #11cdef !important;
}

.color-green {
    color: #00a09d !important;
}

.color-fuchsia {
    color: #df2de3 !important;
}

.color-white {
    color: #FFFFFF;
}

.color-red {
    color: #de1814;
}

.color-gray {
    color: #848080;
}

.color-yellow {
    color: #ffcc00;
}

.color-black {
    color: #111;
}

.color-purple {
    color: #62495B !important;
}

.bg-danger {
    background-color: #f86c6b !important;
}

.bg-red {
    background-color: #de1814 !important;
}

.bg-gray {
    background-color: #848080;
}

.bg-info {
    background-color: #63c2de !important;
}

.bg-primary {
    background-color: #11b2c6 !important;
}

.bg-warning {
    background-color: #ffc107 !important;
}

.bg-success {
    background-color: #00a09d !important;
}

.bg-purple2,
.bg-purple {
    background-color: #62495B !important;
}

.text-orange {
    color: #f46a2c !important;
}


/***Loader***/
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.divLoader {
    position: relative;
}

.divModalLoader {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .2) url('img/app-loader.gif') 50% 50% no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
.divLoader.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
.divLoader.loading .divModalLoader {
    display: block;
}