.red-text {
    color: red;
    font-weight: bold
}

.green-text {
    color: green;
    font-weight: bold
}

.white-text {
    color: white;
    font-weight: bold
}


.info-box {
    display:    none;
    z-index:    1000;
    position: fixed;
    left:   50%;
    top:    50%;
    line-height: 90px;
    text-align: center;
    overflow: visible;
    white-space:normal;
    vertical-align: middle;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 5px; /* Уголки */
    height:     10%;
    width:      30%;
    background: rgba( 0, 0, 0, .8 )
    50% 50%
    no-repeat;
}

.load-den {
    display:    none;
    z-index:    1000;
    position: absolute;
    left:   47%;
    top:    45%;
    border-radius: 5px; /* Уголки */
    height:     3%;
    width:      5%;
    background: rgba( 0, 0, 0, .8 )
    url('/ajax-loader.gif')
    50% 50%
    no-repeat;
}

.load-block {
    display:    none;
    z-index:    1000;
    position: absolute;
    left:0;
    top:0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .0 )
    50% 50%
    no-repeat;
}

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

body.info {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */

body.loading .load-den {
    display: block;
}

body.loading .load-block {
    display: block;
}

body.info .info-box {
    display: block;
}