#main_page_preloader {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    color: #666;
    z-index: 1000000;
    transition: opacity ease 0.8s;
    transition-delay: 0.5s;
    opacity: 1;
    background-color: #F1F1F1;
    overflow-x: hidden;
    pointer-events: none;
}

#main_page_preloader.unauthorized {
    background-color: #DCE1E6;
}

#main_page_preloader .main_page_preloader_container {
    width: 300px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#main_page_preloader .main_page_preloader_animation_container {
    /*background: red;*/
    width: 70px;
    height: 70px;
    margin: 0px auto;
}

#main_page_preloader .main_page_preloader_animation {
    display: inline-block;
    width: 70px;
    text-align: center;
    margin-top: 27px;
}

#main_page_preloader .main_page_preloader_animation span {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #777;
    border-radius: 100%;
    animation: main_loader_animation 1.4s infinite ease-in-out both;
}

#main_page_preloader .main_page_preloader_animation span.dot_1 {
    animation-delay: -0.32s;
}

#main_page_preloader .main_page_preloader_animation span.dot_2 {
    animation-delay: -0.16s;
}

@keyframes main_loader_animation {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}

#main_page_preloader .main_page_preloader_status_loading {
    height: 20px;
    position: relative;
}

#main_page_preloader .main_page_preloader_status_loading div {
    position: absolute;
    opacity: 0;
    width: 100%;
    text-align: center;
    left: 0;
    overflow: hidden;
    margin-top: 5px;
    z-index: 1;
    animation: rotate_status_word 18s linear 1 0s;
    animation-delay: 4s;
}

#main_page_preloader .main_page_preloader_status_loading div:nth-child(2) {
    animation-delay: 8s;
}

#main_page_preloader .main_page_preloader_status_loading div:nth-child(3) {
    animation-delay: 12s;
}

#main_page_preloader .main_page_preloader_status_loading div:nth-child(4) {
    animation-delay: 16s;
}

#main_page_preloader .main_page_preloader_status_loading div:nth-child(5) {
    animation: rotate_last_status_word 20s linear 1 0s;
    animation-delay: 20s;
}

@keyframes rotate_status_word {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-10px); }
    5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
    20% { opacity: 0; transform: translateY(10px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes rotate_last_status_word {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-10px); }
    5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
    100% { opacity: 1; }
}

#main_page_preloader .main_page_preloader_status_error,
#main_page_preloader .main_page_preloader_error_image {
    display: none;
}

#main_page_preloader.error .main_page_preloader_animation,
#main_page_preloader.error .main_page_preloader_status_loading {
    display: none;
}

#main_page_preloader.error .main_page_preloader_error_image,
#main_page_preloader.error .main_page_preloader_status_error {
    display: block;
}

#main_page_preloader.done {
    opacity: 0;
}

#main_page_preloader.done .main_page_preloader_container {
    transition: opacity ease 0.5s;
    opacity: 0;
}


div#main_page_preloader.hidden,
#main_page,
#main_sidebar,
#main_topbar,
#main_message,
#compact_menu {
    display: none;
}