.emscripten {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
}
html{
    min-height: 100%;
    /*overflow: hidden;*/
    /*border: 1px solid red;*/
}
body.emscripten {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 99.9%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}
body.arena_vk {
    width: 100%;
}
div.emscripten { text-align: center; }

div.emscripten_border {
    width: 100%;
    height: 100%;

    border: 0px;
    padding: 0px;
    margin: 0px;
    margin-left: auto;
    top: 1px;
    left: 1px;
}

/* special div inserted by Module code */
div.emscripten_border > div:first-of-type{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 0px;
    margin: 0px;
}

/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten {
    border: 0px none;
    padding: 0px;
    background-color: black;
    min-width: 320px; min-height: 240px;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

#application-status{
    position: absolute;
    top: -50px;
    left: 0;
}
/* loader */
#application-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 3;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #fff;
    /*moz-opacity: 0.5;*/
    /*opacity: 0.5;*/
}

#application-loader .rbw-logo{
    width: 240px;
    height: 206px;
    position: fixed;
    top: 40px;
    left: 50%;
    /*margin-top: -113px;*/
    margin-left: -120px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*transition: all ease-in-out .3s;*/
}

#application-loader .rbw-logo-mailru{
    width: 256px;
    height: 204px;
    position: fixed;
    top: 40px;
    left: 50%;
    /*margin-top: -113px;*/
    margin-left: -128px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /*transition: all ease-in-out .3s;*/
}

#application-loader .rbw-logo-ru{
    width: 256px;
    height: 204px;
    position: fixed;
    top: 160px;
    left: 50%;
    /*margin-top: -113px;*/
    margin-left: -128px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#application-loader .progress-mailru {
    /*position: fixed; */
    position: absolute;
    bottom: -19px;
    left: 0;
    width: 256px;
    height: 14px;
    /*top: 50%;*/
    /*left: 50%;*/
    z-index: 3;
    margin-top: 98px;
    /*margin-left: -120px;*/
    background: #ccc;
    /*border-radius: 5px;*/
    overflow: hidden;

    /*background-position: 0 -332px;*/
    /*box-shadow: 0 0 4px #fff inset;     */
}

#application-loader .progress {
    /*position: fixed; */
    position: absolute;
    bottom: -19px;
    left: 0;
    width: 240px;
    height: 14px;
    /*top: 50%;*/
    /*left: 50%;*/
    z-index: 3;
    margin-top: 98px;
    /*margin-left: -120px;*/
    background: #ccc;
    /*border-radius: 5px;*/
    overflow: hidden;

    /*background-position: 0 -332px;*/
    /*box-shadow: 0 0 4px #fff inset;     */
}

#application-loader .progress-fill {
    margin: 0 0 0 0;
    height: 14px;
    width: 0%;
    background: #e93c40;
    /*transition: all ease-in-out .3s;*/
    /*border-radius: 5px;*/
    /*background-position: bottom left;*/
    /*background-repeat: no-repeat;*/
    /*box-shadow: 0 0 4px #fff inset; */
    /*border-radius: 10px;*/
    /*text-align: center;*/
}

.application-system-input-buttons {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    padding: 0px 8px;
}





/* sytem input for chat message */
#ghl-system-input {
    position: relative;
    /* left: 0; */
    /* bottom: 0; */
    width: 100%;
    font-size: 18px;
    z-index: 1; /* Sit on top */
    box-sizing: border-box; /* Takes care of borders and padding */
    /* top: unset; Parent has this property set, we need to unset it to align to bottom with property bottom : 0 */
    margin: 4px auto;
    padding: 5px
}

/* The Modal (background) */
.application-popup-fade {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* Modal Content/Box */
.application-popup-body {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    /*padding: 20px;*/
    border: 1px solid #888;
    width: 40%; /* Could be more or less, depending on screen size */

    border-radius: 3px;
    position: relative;
    font-family: Arial, sans-serif;
}

.application-popup-header {
    background-color: #f6f7f9;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 3px 3px 0 0;
    color: #1d2129;
    font-weight: bold;
    line-height: 19px;
    padding: 10px 12px;
}

.application-popup-header-title {
    color: #1d2129;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.application-popup-content {
    padding: 10px;
    background-color: #fff;
    word-wrap: break-word;
    font-size: 14px;
    line-height: 18px;
}

.application-popup-content h1 {
    font-size: 110%;
    color: #333;
}

.application-popup-footer {
    background-color: #fff;
    padding: 12px 0;
    border-top: 1px solid #dddfe2;
    margin: 0 12px;
    text-align: right;
}

.application-popup-button {
    background-color: #4267b2;
    color: white !important;
    margin: 4px 2px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border: 1px solid #4267b2;
    border-radius: 2px;
    box-sizing: content-box;
    font-size: 12px;
    font-weight: bold;
    justify-content: center;
    padding: 4px 8px;
    text-shadow: none;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
}

.application-popup-button.secondary {
    background-color: #f6f7f9;
    border-color: #ced0d4;
    color: #4b4f56 !important;
}

a.application-popup-button {
    display: inline-block;
    text-decoration: none;
}

a.application-popup-button:hover {
    text-decoration: none;
}

.fileupload {
    bottom: 0;
    cursor: inherit;
    height: 10px;
    width: 10px;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    right: 0;
}

.input-text {
    border: 1px solid #bdc7d8;
    margin: 0;
    padding: 3px;
}

.input-textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.arena_wrapper{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    /*overflow: hidden;   */
}
.bottom_whiting{
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 1;
    background: linear-gradient(transparent, #fff);
}
.arena_main{
    background-position:  center center;
    background-size: cover;
    position: relative;
    min-width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.arena_minheight{
    min-height: 360px;
}
.arena_game{
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 15px #000;
    background-color: #000;
    border: 1px solid #000;
}
.arena_bottom_panel{
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #000;
    font-family: 'Play', arial;
    z-index: 2;
}


/*640х360*/
.arena_game {
    top: 5px;
    width: 640px;
    height: 360px;
    margin-left: -320px;
    margin-top: 0;
}

.arena_game #application-loader .rbw-logo{
    margin-top: 77px;
}
.arena_game #application-loader .rbw-logo-mailru{
    margin-top: 77px;
}
.arena_bottom_panel{
    top: calc(360px + 15px);
    margin-top: 0;
}
ul.arena_buttons_menu li.community-badge{margin: 0 44px;}
ul.arena_buttons_menu li{margin: 0 0px;}


/*@media screen and (min-width: 680px) and (min-height: 475px) {*/
/*!*640х360*!*/
/*.arena_game {*/
/*top: 50%;*/
/*width: 640px;*/
/*height: 360px;*/
/*margin-left: -320px;*/
/*margin-top: -230px;*/
/*}*/

/*.arena_game #application-loader .rbw-logo {*/
/*margin-top: 77px;*/
/*}*/

/*.arena_bottom_panel {*/
/*top: 50%;*/
/*margin-top: 140px;*/
/*}*/

/*ul.arena_buttons_menu li.community-badge {*/
/*margin: 0 44px;*/
/*}*/

/*ul.arena_buttons_menu li {*/
/*margin: 0 0px;*/
/*}*/
/*}*/


@media screen and (min-width: 680px) and (min-height: 455px) {
    /*640х360*/
    .arena_game {
        top: 50%;
        width: 640px;
        height: 360px;
        margin-left: -320px;
        margin-top: -220px;
    }

    .arena_game #application-loader .rbw-logo {
        margin-top: 77px;
    }

    .arena_bottom_panel {
        top: 50%;
        margin-top: 155px;
    }

    ul.arena_buttons_menu li.community-badge{margin: 0 44px;}
    ul.arena_buttons_menu li{margin: 0 0px;}

    /*ul.arena_buttons_menu li {*/
    /*margin: 0 0px;*/
    /*}*/
}

@media screen and (min-width: 680px) and (min-height: 523px) {
    /*640х360*/
    .arena_game {
        top: 50%;
        width: 800px;
        height: 450px;
        margin-left: -400px;
        margin-top: -260px;
    }

    .arena_game #application-loader .rbw-logo {
        margin-top: 77px;
    }

    .arena_bottom_panel {
        top: 50%;
        margin-top: 210px;
    }

    ul.arena_buttons_menu li.community-badge{margin: 0 40px;}
    ul.arena_buttons_menu li{margin: 0 10px;}

    /*ul.arena_buttons_menu li {*/
    /*margin: 0 0px;*/
    /*}*/
}

/*800х450*/
/*@media screen and (min-width: calc(800px + 40px)) and (min-height: calc(450px + 20px + 90px + 20px)){*/
@media screen and (min-width: 840px) and (min-height: 600px){
    .arena_game {
        top: 40px;
        width: 800px;
        height: 450px;
        margin-left: -400px;
        margin-top: 0;
    }

    .arena_bottom_panel{
        top: calc(450px + 60px);
        margin-top: 0;
    }
    ul.arena_buttons_menu li.community-badge{margin: 0 40px;}
    ul.arena_buttons_menu li{margin: 0 10px;}

    .arena_game #application-loader .rbw-logo{
        margin-top: 122px;
    }
}

/*1024х576*/
/*@media screen and (min-width: calc(1024px + 40px)) and (min-height: calc(576px + 20px + 90px + 20px)){*/
@media screen and (min-width: 1064px) and (min-height: 726px){
    .arena_game {
        width: 1024px;
        height: 576px;
        margin-left: -512px;
        margin-top: 0;
    }

    .arena_bottom_panel{
        top: calc(576px + 60px);
    }

    .arena_game #application-loader .rbw-logo{
        margin-top: 185px;
    }

}

/*1280х720*/
/*@media screen and (min-width: calc(1280px + 40px)) and (min-height: calc(720px + 20px + 90px + 20px)){*/
@media screen and (min-width: 1320px) and (min-height: 870px){
    .arena_game {
        width: 1280px;
        height: 720px;
        margin-left: -640px;
        margin-top: 0;
    }
    .arena_bottom_panel{
        top: calc(720px + 60px);
    }
    .arena_game #application-loader .rbw-logo{
        margin-top: 257px;
    }
}

/*1440х810*/
/*@media screen and (min-width: calc(1440px + 40px)) and (min-height: calc(810px + 20px + 90px + 20px)){*/
@media screen and (min-width: 1480px) and (min-height: 960px){
    .arena_game {
        width: 1440px;
        height: 810px;
        margin-left: -720px;
        margin-top: 0;
    }
    .arena_bottom_panel{
        top: calc(810px + 60px);
    }
    .arena_game #application-loader .rbw-logo{
        margin-top: 302px;
    }
}



.arena_bottom_panel ul{
    margin: 0;
    padding: 0;
}

.arena_bottom_panel ul li{
    display: inline;
    font-size: 13px;
    font-weight: bold;
}

.arena_bottom_panel a{
    color: #000;
    text-decoration: none;
}
.arena_bottom_panel a:hover{
    text-decoration: underline;
}

.arena_bottom_panel .arena_bottom_hint{
    font-size: 12px;
}
.arena_bottom_panel .arena_user_id{
    font-size: 12px;
}
ul.arena_buttons_menu li{
    /*margin-right: 30px;*/
}
ul.arena_links_menu{
    margin-top: 5px;
}
ul.arena_links_menu li:after{
    content:'|';
    margin: 0 15px 0 20px;
}
ul.arena_links_menu li:last-child:after{
    content:'';
    margin: 0;
}
.arena_tiket_od{
    margin-top: 5px;
}
ul.arena_buttons_menu li .fb-like{
    top: -9px;
}
.arena_bottom_hint{
    margin-top: 8px;
}
.arena_user_id{
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
}
.social-ico{
    width: 29px;
    height: 29px;
    display: inline-block;
    border-radius: 5px;
    background-size: cover;
    margin-right: 2px;
    position: relative;
    top: -5.5px;
}
.social-ico-fb{background-position: 0 0;}
.social-ico-vk{background-position: -87px 0;}
.social-ico-in{background-position: -174px 0;}
.social-ico-yt{background-position: -261px 0;}


/* GDPR */
.gdpr-container {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 auto;
    border: none;
    width: 100%;
    height: 100%;
    font-family: Helvetica, Tahoma, sans-serif;
    font-size: 1.4rem;
    z-index: 2;
}
.gdpr-modal {
    position: absolute;
    top: 30%;
    left: 50%;
    margin: auto auto;
    width: 90%;
    height: 90%;
    max-width: 740px;
    max-height: 350px;
    padding: 0;
    transform: translate(-50%, -30%);
}
.gdpr-big-font {
    font-size: 2rem;
}
.gdpr-container a, a:link, a:hover, a:visited, a:active {
    color: #157cc6;
    text-decoration: underline;
}
.gdpr-header {
    padding: 0.7rem 0.2rem;
    background: #167cc6;
    color: #ffffff;
    text-align: center;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}
.gdpr-container .button-container {
    text-align: center;
}
.gdpr-button {
    display: inline-block;
    padding: 1.6rem 4.1rem;
    background: #69a55b;
    color: #ffffff;
    border: 0;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.gdpr-button:hover {
    background: #79b56b;
}
.gdpr-button.disabled {
    background: #b8b8b8;
}
.gdpr-text {
    padding: 4.6rem 2.4rem;
    background: #e7e7e7;
    border: 2px solid #cbcbcb;
    border-width: 0 2px 2px 2px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
}
.gdpr-text-b {
    display: block;
    margin-bottom: 2rem;
}

.play_btn {
    bottom: 35%;
    position: absolute;
    margin: 15%;
    width: 70%;
    padding-bottom: 30%;
    background-position: 0 0;
    background-size: 300%;
    display: block;
    z-index: 4;
}

.play_btn:hover {
    background-position: 50% 0px;
}

.play_btn:active {
    background-position: 100% 0px;
}

.play_btn_holder {
    float: right;
    margin: -1px 10%;
    min-width: 211px;
    max-width: 423px;
    width: 22%;
    position: relative;
}

.play_btn_shield {
    width: 100%;
}

.bottom_blacking{
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 20%;
    z-index: 1;
    background: linear-gradient(transparent, #000000);
}

.arena_wrapper_vk {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    /*overflow: hidden;   */
}

body.emscripten.arena_vk {
    height: 100%;
    width: 1000px;
}

.arena_game_vk {
    width: 100%;
    height: 562px;
    position: relative;
}

.arena_game_vk .emscripten_border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
}

.arena_game_vk #application-loader .rbw-logo-mailru {
    margin-top: 120px;
}

.arena_bottom_panel_vk {
    position: relative;
    width: 100%;
    height: 80px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000;
    z-index: 2;
    font-family: 'Play', arial;
    font-size: 16px;
}

.arena_bottom_panel_vk ul.arena_buttons_vk {
    list-style-type: none;
    position: relative;
    width: 80%;
    height: 38px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


ul.arena_buttons_vk li {
    float: left;
    vertical-align: middle;
    text-align: center;
    line-height: 38px;
    height: 100%;
    margin: 0;
}

ul.arena_buttons_vk li div {
    display: block;
}

ul.arena_buttons_vk li.vk_subscribe {
    width: 440px;
    padding-top: 7px; 
    margin-left: 7px;
}

ul.arena_buttons_vk li.vk_like {
    width: 140px;
    padding-top: 7px; 
    margin-left: 7px;
}

ul.arena_buttons_vk li.community-badge {
    margin: 0;
    margin-right: 7px;
    height: 100%;
    float: right;
}

ul.arena_buttons_vk li.community-badge a.social-ico {
    top: 3px;
}

ul.arena_buttons_vk li.vk_add_to_menu {
    padding-top: 5px; 
    float: right;
    margin-right: 7px;
    margin-left: 7px;
}

ul.arena_buttons_vk li.vk_add_to_menu div {
    height: 24px;
}



#vk_add_to_menu_btn { 
    display: inline-block; 
    font-family: Helvetica, "Noto Sans Armenian", "Noto Sans Bengali", "Noto Sans Cherokee", "Noto Sans Devanagari", "Noto Sans Ethiopic", "Noto Sans Georgian", "Noto Sans Hebrew", "Noto Sans Kannada", "Noto Sans Khmer", "Noto Sans Lao", "Noto Sans Osmanya", "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Thai", Arial, sans-serif;
    width: 140px; 
    height: 24px; 
    line-height: 24px;
    background: #edf2f6;
    border-radius: 4px;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    font-size: 12px;
    color: #2f5876;
    text-decoration: none;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #aebbcb;
    float: right;
}

#vk_add_to_menu_btn span{
    height: 22px;
    width: 22px;
    
    float: left;
    background: #8cafd4;
    border-radius: 3px 0px 0px 3px;
    border-style: solid;
    border-width: 1px;
    border-color: #6c90b4;
    border-right-color: #6f93b7;
} 

#vk_add_to_menu_btn span::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: #f4f9ff;
  height: 2px;
  width: 14px;
  /*margin-top: -5px;*/
  margin-left: 4px;
  margin-top: 10px;
  z-index: 9;
}
#vk_add_to_menu_btn span::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: #f4f9ff;
  height: 14px;
  width: 2px;
  /*margin-top: -5px;*/
  margin-left: 10px;
  margin-top: 4px;
  z-index: 9;
}

.arena_bottom_panel_vk ul.arena_links_vk {
    position: relative;
    overflow: hidden;
    width: 80%;
    height: 20px;
    margin: 0;
    padding: 0;
}


.arena_bottom_panel_vk ul.arena_links_vk li {
    display: inline-block;
    float: none;
    /*position: relative;
    vertical-align: middle;
    
    line-height: 20px;
    text-align: center;
    margin: 0;
    float: left;*/
}

ul.arena_links_vk li:after{
    content:'|';
    margin: 0 15px 0 20px;
}
ul.arena_links_vk li:last-child:after{
    content:'';
    margin: 0;
}

.arena_bottom_panel_vk .arena_user_id {
    position: relative;
    height: 20px;
    line-height: 20px;
    margin: 0;
    text-align: center;
    width: 80%;
    font-family: 'Play', arial;
}

.arena_bottom_panel_vk .arena_tiket_vk{
    position: relative;
    top: -80px;
    left: 0%;
    width: 18%;
    margin-top: 5px;
    float: right;
}