html,
body
{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: url(./../img/enter/bg_pattern.png);
    background-size: 325px 325px;
}

#root
{
    width: 750px;
    height: 1118px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#root .shadow .top
{
    width: 150%;
    height: 184px;
    position: absolute;
    bottom: 100%;
    background-image: url(./../img/enter/bg_shadow_top.png);
    background-size: 4px 184px;
    background-repeat: repeat-x;
}

#root .shadow .bottom
{
    width: 150%;
    height: 184px;
    position: absolute;
    top: 100%;
    background-image: url(./../img/enter/bg_shadow_bottom.png);
    background-size: 4px 184px;
    background-repeat: repeat-x;
}

#root .shadow .left
{
    width: 184px;
    height: 150%;
    position: absolute;
    left: 100%;
    background-image: url(./../img/enter/bg_shadow_left.png);
    background-size: 184px 4px;
    background-repeat: repeat-y;
}

#root .shadow .right
{
    width: 184px;
    height: 150%;
    position: absolute;
    right: 100%;
    background-image: url(./../img/enter/bg_shadow_right.png);
    background-size: 184px 4px;
    background-repeat: repeat-y;
}

#root .layer-canvas
{
    position: absolute;
    width: 750px;
    height: 1118px;
    left: 0;
    top: 0;
    transform-origin: left top 0;
    background-size: 752px auto;
    background-position: center center;
    background-color: #000;
}

#root canvas
{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#root .loader
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    border: 4px solid #e60012;
    border-radius: 50%;
    animation: loadingRotateAnim 0.75s infinite linear;
    animation-fill-mode: both;
}

#root .loader::before,
  #root .loader::after
{
    left: -4px;
    top: -4px;
    display: none;
    position: absolute;
    content: '';
    width: inherit;
    height: inherit;
    border: inherit;
    border-radius: inherit;
}

#root .loading_img,
  #root .loading_img::before
{
    display: inline-block;
    border-color: transparent;
    border-top-color: #e60012;
    visibility: hidden;
}

#root .loading_img::before
{
    animation: loadingRotateAnim 1.5s infinite ease;
}

#root .error
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 313px;
    height: 277px;
    background-image: url(./../img/enter/message.png);
    background-size: 313px 277px;
    z-index: 2;
    display: none;
}

#root .error .title
{
    position: absolute;
    top: 16px;
    left: 105px;
    font-size: 2.2em;
    color: #fff;
}

#root .error .message
{
    position: absolute;
    top: 73px;
    left: 36px;
    font-size: 1.4em;
    color: #fff;
}

#root .error a
{
    position: absolute;
    width: 138px;
    height: 47px;
    top: 208px;
    left: 50%;
    margin-left: -69px;
    background-image: url(./../img/result/btn_yes.png);
    background-size: 138px 47px;
}

#root .error.show
{
    display: block;
    transform: scale(0, 0);
    animation: errorScaleAnim 0.22s ease-out;
    animation-fill-mode: both;
}

#__bs_notify__
{
    display: none !important;
}

@keyframes loadingRotateAnim
{
    from
    {
        transform: rotate(0deg);
    }

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

@keyframes errorScaleAnim
{
    from
    {
        transform: scale(0, 0);
    }

    to
    {
        transform: scale(1, 1);
    }
}