@import url('https://fonts.googleapis.com/css?family=Lato:300,400,500,700,900|Roboto:300,400,500,700,900|Play:400,600,700|Oswald:400,500');

/**
 * Reset de estilos
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    outline: 0;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    margin-left: 82px;
    color: #000;
    background: #eff4f8;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1em;
    line-height: 1em;
    overflow-x: hidden;
    z-index: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
:focus { outline: 0; }
:required, :invalid {
    outline: 0;
    box-shadow: none;
}
html {
    height: 100%;
    font-size: 80%;
}
div {
    position: relative;
}
img {
    -ms-interpolation-mode: nearest-neighbor;
}

/**
 * Font families
 */
@font-face {
    font-family: Ringbearer;
    src: url(../fonts/Ringbearer.ttf);
    font-weight: 400;
}

/**
 * Font styles
 */
.roboto {
    font-family: 'Roboto', Arial, sans-serif;
    letter-spacing: .3px;
    font-weight: 400;
    font-style: normal;
}
.roboto-light {
    font-weight: 300;
}
.roboto-bold {
    font-weight: 700;
}
.roboto-black {
    font-weight: 900;
}

.lato {
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}
.lato-bold {
    font-weight: 700;
}
.lato-black {
    font-weight: 900;
}

.font-red {
    color: #ff0303;
}

/**
 * Estilos genéricos
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
button:focus, input:focus {
    outline: 0;
}
.noselect {
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
html {
    overflow-x: hidden;
}
button {
    border: 0;
    border-radius: 0;
    font-family: 'Lato', Arial, sans-serif;
    cursor: pointer;
}
strong {
    font-weight: bold;
}
a {
    color: #888;
    text-decoration: none;
    transition: color .2s ease-out;
}
a:hover {
    color: #c8c8c8;
}
textarea {
    resize: vertical;
}
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/**
 * Template
 */
body.webapp main section{
    background-color: #000912;
    background: radial-gradient(circle at 50% 100%, rgba(0, 88, 163, 1) 0%, rgba(0, 9, 18, 1) 26%);
    background-position: bottom center;
    background-repeat: no-repeat;
    min-height: calc(100vh - 140px);
    align-content: flex-start;
}
body.webapp .header__menu{
    background-color: #000a28;
}
body.webapp .header__menu:before{
    display: block;
    content: " ";
    height: 1px;
    top: 0;
    background: radial-gradient(circle at 50% 0%, rgba(0, 60, 241, 1) 0%, rgba(0, 10, 40, 1) 80%);
}
body.webapp,
body.webapp .header__menu{
    margin-left: 0;
    left: 0;
}

header.disabled,
footer.disabled,
.sidebar-games.disabled,
.header__userpanel.disabled > div,
aside.disabled{
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/** Forms */
/* LIST FILTERS */
.list__filters {
    padding: 0 20px;
    margin-bottom: 10px;
    display: flex;
}
.list__filters.full-width {
    flex: 1 0 100%;
}
.list__filters .form__input{
    height: 36px;
    margin: 0;
    padding: 8px 10px;
    color: #444444;
    border-left: 0;
    font-size: 15px;
    line-height: 15px;
    vertical-align: top;
    margin-left: -4px;
    flex: 0 1 auto;
    background-color: #ffffff;
}
.list__filters .form__input::placeholder {
    color: #666;
    font-style: italic;
}
.list__filters .form__input::-webkit-input-placeholder {
    color: #666;
    font-style: italic;
}
.list__filters .form__input::-moz-placeholder {
    color: #666;
    font-style: italic;
    opacity: 1;
}
.list__filters .form__input:-ms-input-placeholder {
    color: #666;
    font-style: italic;
}
.list__filters .form__input:-moz-placeholder {
    color: #666;
    font-style: italic;
    opacity: 1;
}
.list__filters button {
    height: 36px;
    margin: 0;
    padding: 7px 10px 5px;
    color: #444444;
    border: 1px solid #c8c8c8;
    border-right: 0;
    background-color: #ffffff;
    font-size: 1.4em;
    vertical-align: top;
}
[loading] .list__filters button .icon:before {
    display: inline-block;
    content: "\eb23";
    animation: icon-loading 1s linear infinite;
    cursor: wait;
}
.list__filters select.form__input {
    color: #444444;
    margin: 0 0 0 10px;
    border: 1px solid #c8c8c8;
}

.form__input,
.form__input-inline {
    display: inline-block;
    padding: 8px;
    color: #111;
    border: 1px solid #bbb;
    background: #eee;
    font: normal 14px/14px 'Lato', Arial, sans-serif;
    vertical-align: middle;
    /*transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form__input {
    width: 100%;
    margin-bottom: 4px;
}
select.form__input,
input.form__input {
    height: 35px;
}
select.form__input {
    padding: 7px 8px;
}
body.webapp .ticket-form-categories-buttons{
    padding: 0 0 20px;
}

body.webapp .form__input,
body.webapp .form__input-inline,
body.webapp .ticket-form__upload-button{
    background: #e5f6ff;
    border-radius: 4px;
}
body.webapp .ticket-form{
    padding: 0 12px;
}
body.webapp .ticket-form__attachment > div{
    color: #fff;
}

/*
.form__input:hover,
.form__input-inline:hover {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2);
}
.form__input:focus,
.form__input-inline:focus {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .2);
}
.form__input::placeholder {
    color: #a6a6a6;
}
.form__input::-webkit-input-placeholder {
    color: #a6a6a6;
}
.form__input::-moz-placeholder {
    color: #a6a6a6;
    opacity: 1;
}
.form__input:-ms-input-placeholder {
    color: #a6a6a6;
}
.form__input:-moz-placeholder {
    color: #a6a6a6;
    opacity: 1;
}
.form__input-inline::placeholder {
    color: #a6a6a6;
}
.form__input-inline::-webkit-input-placeholder {
    color: #a6a6a6;
}
.form__input-inline::-moz-placeholder {
    color: #a6a6a6;
    opacity: 1;
}
.form__input-inline:-ms-input-placeholder {
    color: #a6a6a6;
}
.form__input-inline:-moz-placeholder {
    color: #a6a6a6;
    opacity: 1;
}
.form__input[success],
.form__input-inline[success] {
    border: 1px solid #6c6;
    background: #efe url(../images/icons/input-success.png) no-repeat right 8px top 10px;
    box-shadow: 0 0 5px rgba(0, 140, 0, .5);
}
select.form__input[success],
select.form__input-inline[success] {
    background-position: right 20px top 10px;
}
.form__input[success]:hover,
.form__input-inline[success]:hover {
    box-shadow: inset 1px 1px 1px rgba(0, 140, 0, .4), 0 0 3px rgba(0, 140, 0, .5);
}
.form__input[success]:focus,
.form__input-inline[success]:focus {
    box-shadow: inset 2px 2px 5px rgba(0, 140, 0, .4), 0 0 3px rgba(0, 140, 0, .5);
}
.form__input[error],
.form__input-inline[error] {
    border: 1px solid #d66;
    background: #fee url(../images/icons/input-error.png) no-repeat right 8px top 10px;
    box-shadow: 0 0 5px rgba(172, 0, 0, .5);
}
select.form__input[error],
select.form__input-inline[error] {
    background-position: right 20px top 10px;
}
.form__input[error]:focus,
.form__input-inline[error]:focus {
    box-shadow: inset 1px 1px 1px rgba(170, 0, 0, .4), 0 0 3px rgba(172, 0, 0, .5);
}
.form__input[error]:focus,
.form__input-inline[error]:focus {
    box-shadow: inset 2px 2px 5px rgba(170, 0, 0, .4), 0 0 3px rgba(172, 0, 0, .5);
}
.no-validation[success],
.no-validation[error] {
    border: 1px solid #eeeeee;
    background: #ffffff;
    box-shadow: none;
}
.no-validation[success]:hover,
.no-validation[error]:hover {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2);
}
.no-validation[success]:focus,
.no-validation[error]:focus {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .2);
}
*/
.form__checkbox input,
input.form__checkbox {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0 5px 5px 0;
    vertical-align: middle;
}
.form__checkbox {
    cursor: pointer;
}
.form__checkbox:not(input) {
    font-size: .8em;
}
body.webapp .form__checkbox:not(input){
    font-size: .94rem;
}
.form__checkbox input:after,
input.form__checkbox:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 1px;
    border: 1px solid #bcbcbc;
    background: #e6e6e6;
    text-align: center;
    z-index: 1;
    cursor: pointer;
    box-sizing: border-box;
    color: #8e8e8e;
}
.form__checkbox input:checked:after,
input.form__checkbox:checked:after {
    content: "\ed6f";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 16px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.form__checkbox input[success],
.form__checkbox input[error],
input.form__checkbox[success],
input.form__checkbox[error] {
    border: 1px solid #bbb;
    background: #eee;
    box-shadow: none;
}
.form__checkbox input[success]:after,
input.form__checkbox[success]:after {
    border: 1px solid #6c6;
    box-shadow: 0 0 5px rgba(0, 140, 0, .5);
}
.form__checkbox input[error]:after,
input.form__checkbox[error]:after {
    border: 1px solid #d66;
    box-shadow: 0 0 5px rgba(172, 0, 0, .5);
}
.form__checkbox input[success]:after,
input.form__checkbox[success]:after {
    color: #6c6;
    background: #efe;
}
.form__checkbox input[error]:after,
input.form__checkbox[error]:after {
    color: #d66;
    background: #fee;
}
.form__checkbox input:hover:after,
input.form__checkbox:hover:after {
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .2);
}
.form__checkbox input:focus:after,
input.form__checkbox:focus:after {
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, .2);
}
.form__checkbox input[success]:hover:after,
input.form__checkbox[success]:hover:after {
    box-shadow: inset 1px 1px 1px rgba(0, 140, 0, .4), 0 0 3px rgba(0, 140, 0, .5);
}
.form__checkbox input[success]:focus:after,
input.form__checkbox[success]:focus:after {
    box-shadow: inset 2px 2px 5px rgba(0, 140, 0, .4), 0 0 3px rgba(0, 140, 0, .5);
}
.form__checkbox input[error]:hover:after,
input.form__checkbox[error]:hover:after {
    box-shadow: inset 1px 1px 1px rgba(170, 0, 0, .4), 0 0 3px rgba(172, 0, 0, .5);
}
.form__checkbox input[error]:focus:after,
input.form__checkbox[error]:focus:after {
    box-shadow: inset 2px 2px 5px rgba(170, 0, 0, .4), 0 0 3px rgba(172, 0, 0, .5);
}
.form__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 10px;
    margin: 0;
    border-radius: 6px;
    border: 0;
    background: #018b01;
    font: 900 12px/10px 'Lato', Arial, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    box-shadow: none;
    transition: box-shadow .3s;
}

.form__button .icon{
    font-size: 12px;
    margin: 0 6px 0 0;
}

.form__button:hover,
.form__button:focus,
.form__button:active {
    box-shadow: inset 0 0 50px 100px rgba(255, 255, 255, 0.1);
}

.form__button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
form[loading] .form__button {
    position: relative;
    margin-top: 2px;
    border-bottom-width: 1px;
    border-color: #b38080;
    cursor: wait;
}
@keyframes form__button--progress-bar {
    to { background-position: -33.33px; }
}
form[loading] .form__button:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), linear-gradient(-243.33deg, rgba(255, 255, 255, .2) 16.66%, transparent 16.66%, transparent 33.33%, rgba(255, 255, 255, .2) 33.33%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 66.66%, rgba(255, 255, 255, .2) 66.66%, rgba(255, 255, 255, .2) 83.33%, transparent 83.33%);
    background-size: 100px 100px;
    animation: form__button--progress-bar 1s linear infinite;
    z-index: 1;
}
.form__errors {
    list-style-type: square;
    margin-left: 20px;
}
.form__errors li {
    margin-bottom: 10px;
}
.form__result {
    display: none;
    margin-top: 20px;
}
.form__result:last-child {
    margin-bottom: 0;
}
.form__title {
    color: #160A1F;
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1rem;
}
h2.form__title {
    font-size: 1.6rem;
}
h3.form__title {
    font-size: 1.2rem;
    margin: 12px 0 6px 0;
}
/*
.form__title:after{
    content: " ";
    display: block;
    margin: 8px 0 10px;
    height: 1px;
    width: 27px;
    background-color: #b5b5b5;
}
.form__title span {
    color: #f00;
}
*/
.form__intro {
    margin: 10px 0;
}

/* Range Slider Styles */
input[type=range] {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  background-color: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 0;
  background: #888;
  border-radius: 1px;
  border: 0;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0;
  border: 1px solid #888;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #eee;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #888;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 0;
  background: #888;
  border-radius: 1px;
  border: 0;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0;
  border: 1px solid #888;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #eee;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #888;
  border: 0;
  border-radius: 2px;
  box-shadow: 0;
}
input[type=range]::-ms-fill-upper {
  background: #888;
  border: 0;
  border-radius: 2px;
  box-shadow: 0;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0;
  border: 1px solid #888;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #eee;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #888;
}

/** Header */
body > header {
    position: fixed;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding-left: 20px;
    background-color: #160a1e;
    text-align: center;
    z-index: 50;
    transition: left .2s ease-in-out;
}
body.prehome > header {
    left: 0;
}
body.webapp > header,
body.webapp .header__right-menu{
    background-color: #160a1e;
}
.header__logo {
    flex: 0 1 auto;
    left: 0;
    transition: left .2s ease-in-out;
}
body.webapp .header__logo{
    margin: 0;
    display: block;
    position: absolute;
    left: calc(50% - 20px);
    top: 22px;
}
.header__logo img {
    height: 46px;
}
body > header.expanded .header__logo {
    left: 168px;
}
@media (max-width: 1360px) {
    body > header.expanded .header__logo {
        left: 0;
    }
}
@media (max-width: 1023px) {
    body > header.expanded {
        left: 250px;
    }
}
@media (max-width: 768px) {
    body > header.expanded {
        left: 65px;
    }
}
@media (max-width: 500px) {
    body.webapp > main {
        min-height: initial;
    }
}

/** Menú */
.header__menu {
    flex: 1 0 auto;
    height: 70px;
}
.header__menu > ul {
    position: relative;
    display: flex;
    justify-content: center;
    height: 70px;
}
.header__menu > ul > li {
    position: relative;
    border-left: 1px solid #434343;
    border-bottom: 2px solid transparent;
}
.header__menu > ul > li:last-child {
    border-right: 1px solid #434343;
}
.header__menu > ul li > a .icon {
    display: block;
    width: 100%;
    height: 39px;
    margin-bottom: 5px;
    font-size: 36px;
    padding-top: 1px;
    color: #fff;
    transition: all .2s ease-in-out;
}
.header__menu > ul li .header__menu-image {
    width: 100%;
    height: 39px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__menu > ul li img {
    max-width: 98%;
    max-height: 98%;
}
.header__menu > ul > li:nth-of-type(2) .icon{
    font-size: 3.4rem;
}
.header__menu > ul > li:last-child img {
    max-height: 35px;
}
.header__menu > ul > li a.color img,
.header__menu > ul > li a.color .icon{
    filter: grayscale(1) brightness(4);
    transition: all .2s ease-in-out;
}

.header__menu > ul > li > a.color:hover img,
.header__menu > ul > li > a.color:hover .icon,
.header__menu > ul > li > a.color:focus img,
.header__menu > ul > li > a.color:focus .icon,
.header__menu > ul > li > a.color.active img,
.header__menu > ul > li > a.color.active .icon{
    filter: none;
}
.header__menu > ul > li > a {
    position: relative;
    display: inline-block;
    height: 70px;
    min-width: 80px;
    color: #fff;
    padding: 8px 14px 0;
    font-weight: 700;
    font-size: .86em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .2s ease-in-out;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.header__menu > ul > li > a:hover,
.header__menu > ul > li > a:focus,
.header__menu > ul > li > a.active {
    background-color: #eeeff3;
    color: #fd2b2c;
}
body.webapp .header__menu > ul > li{
    border-bottom: none;
    border-left: none;}
body.webapp .header__menu > ul li > a{
    display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: center;
    padding: 0;
}
body.webapp .header__menu > ul li > a .icon{
    color: #bfc2c9;
    height: auto;
    margin: 0;
    font-size: 3rem;
    padding: 0;
}
body.webapp .header__menu > ul > li > a:not([disabled]):hover .icon:before,
body.webapp .header__menu > ul > li > a:not([disabled]):focus .icon:before,
body.webapp .header__menu > ul > li > a:not([disabled]).active .icon:before,
body.webapp .header__menu > ul > li > a:hover,
body.webapp .header__menu > ul > li > a:focus,
body.webapp .header__menu > ul > li > a.active{
    background-color: transparent;
    color: #f4f400;
    text-shadow: 0 0 10px #ae3412, 0 0 20px #ae3412, 0 0 30px #ae3412;
}
body.webapp .header__menu > ul > li a.color img,
body.webapp .header__menu > ul > li a.color .icon{
    filter: none;
    transition: none;
}

@media (hover: none) {
    .header__menu > ul > li > a:hover,
    .header__menu > ul > li > a:focus {
        height: 70px;
    }
}
.header__menu > ul > li > a.coins__oc-color {
    color: #0f0;
}
.header__menu > ul > li > a.coins__fc-color {
    color: #adc4c4;
}
.header__menu > ul > li > a.vip__color {
    color: #ffa600;
}
.header__menu > ul .nav__icon {
    padding-left: 51px;
    background-repeat: no-repeat;
    background-position: 15px center;
}
.header__menu > ul > li > a[disabled] {
    background-color: #333;
}
.header__menu > ul > li > a[disabled],
.header__menu > ul > li > a[disabled] .icon {
    color: rgba(255, 255, 255, .2);
}
.header__menu > ul > li > a[disabled]:hover,
.header__menu > ul > li > a[disabled]:focus,
.header__menu > ul > li > a[disabled].active {
    background-color: #333;
    color: rgba(255, 255, 255, .2);
    height: 70px;
}
.header__menu > ul > li > a[loading]:after {
    position: absolute;
    display: block;
    content: " ";
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    border-radius: 50%;
    box-shadow: 0 3px 0 0 #fff;
    animation: uil-ring-anim 1s linear infinite;
    z-index: 2;
}
.header__menu > ul > li > a:not([disabled]) .icon:before {
    transition: color .2s ease-in-out;
}
.header__menu > ul > li > a:not([disabled]):not(.color):hover .icon:before,
.header__menu > ul > li > a:not([disabled]):not(.color):focus .icon:before,
.header__menu > ul > li > a:not([disabled]):not(.color).active .icon:before {
    color: #fd2b2c;
}


.header__menu > ul > li > a.occash:not([disabled]):hover,
.header__menu > ul > li > a.occash:not([disabled]).active{
    color: #068133;
}
.header__menu > ul > li > a.funcoins:not([disabled]):hover,
.header__menu > ul > li > a.funcoins:not([disabled]).active{
    color: #799090;
}

.header__menu > ul > li > a.premium:not([disabled]):hover,
.header__menu > ul > li > a.premium:not([disabled]).active{
    color: #ffa600;
}

/** Submenú */
.header__submenu {
    display: none;
    position: absolute;
    padding: 30px 20px;
    background: #000;
    min-width: 630px;
    width: auto;
    margin-left: calc(50% - 315px);
}
.header__submenu li {
    color: #fff;
    margin: 0 25px;
    display: inline-block;
    vertical-align: bottom;
}
.header__submenu li a {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}
.header__submenu li .icon {
    font-size: 17px;
    vertical-align: -2px;
    display: inline-block;
    margin: 0 5px 0 0;
}
.header__submenu li a .header__submenu-image {
    width: 90px;
    height: 90px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__submenu li a img {
    transition: transform .3s;
    max-width: 100%;
    max-height: 100%;
}
.header__submenu li a:hover,
.header__submenu li a:focus {
    color: #fff;
}
.header__submenu li a:hover img,
.header__submenu li a:focus img {
    transform: translateY(-5px);
}


/* NEW DESIGN MENU 2022 */
.header__main_menu{
    flex: 1 0 auto;
    height: 70px;
    align-items: center;
    display: flex;
    justify-content: flex-end;
}
.header__main_menu ul{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
}
.header__main_menu ul li{
    padding: 20px 0;
    margin: 0 20px;
    font-family: 'Play', Arial, sans-serif;
    font-size: 1.15rem;
    text-transform: uppercase;
}
.header__main_menu ul li a{
    color: #ffffff;
    position: relative;
}
.header__main_menu ul li a:hover{
    color: #ff0126;
}
.header__main_menu ul li a.active:after{
    display: block;
    content: " ";
    position: absolute;
    bottom: -12px;
    height: 5px;
    width: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ff0126;
}

/** Cofres */
.header__chests {
    flex: 0 1 auto;
    margin-right: 20px;
}
.header__chests ul {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}
.header__chests li {
    flex: 1 0 120px;
    position: relative;
    height: 81px;
    padding: 8px 20px;
}
.header__chests li[loading] {
    opacity: .5;
}
.header__chests li[loading]:before {
    position: absolute;
    content: " ";
    width: 50px;
    height: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    border-radius: 50%;
    box-shadow: 0 3px 0 0 #fff;
    animation: uil-ring-anim 1s linear infinite;
    z-index: 1;
}
.header__chests li.header__chests-item:not([loading]),
.header__chests li.header__chests-locked:not([loading]) {
    cursor: pointer;
}
.header__chests li.header__chests-locked,
.header__chests li.header__chests-free {
    padding: 0 20px;
}
.header__chests-image {
    width: 100%;
    height: 44px;
    margin-bottom: 8px;
}
.header__chests-image img {
    max-width: 100%;
    max-height: 100%;
    transition: filter .2s ease-in-out;
}
.header__chests li.header__chests-locked .header__chests-image,
.header__chests li.header__chests-free .header__chests-image {
    height: 60px;
    margin-bottom: 0;
    opacity: .8;
}
.header__chests li.header__chests-item:not([loading]):hover .header__chests-image img {
    filter: drop-shadow(0 0 10px #fff);
}
.header__chests li.header__chests-locked:not([loading]):hover .header__chests-image img {
    filter: drop-shadow(0 0 10px #f00);
}
.header__chests-name {
    font-size: 14px;
    line-height: 14px;
    text-align: center;
    white-space: nowrap;
    transition: text-shadow .2s ease-in-out;
}
.header__chests-item .header__chests-name {
    text-transform: uppercase;
    text-shadow: -1px -1px 10px rgba(255, 255, 255, .5),
                 -1px  1px 10px rgba(255, 255, 255, .5),
                  1px -1px 10px rgba(255, 255, 255, .5),
                  1px  1px 10px rgba(255, 255, 255, .5);
}
.header__chests-item:not([loading]):hover .header__chests-name {
    text-shadow: -1px -1px 10px rgba(255, 255, 255, 1),
                 -1px  1px 10px rgba(255, 255, 255, 1),
                  1px -1px 10px rgba(255, 255, 255, 1),
                  1px  1px 10px rgba(255, 255, 255, 1);
}
.header__chests-locked .header__chests-name {
    color: #f00;
    font-weight: bold;
    text-shadow: -1px -1px 10px rgba(255, 0, 0, .5),
                 -1px  1px 10px rgba(255, 0, 0, .5),
                  1px -1px 10px rgba(255, 0, 0, .5),
                  1px  1px 10px rgba(255, 0, 0, .5);
}
.header__chests-locked:not([loading]):hover .header__chests-name {
    text-shadow: -1px -1px 10px rgba(255, 0, 0, 1),
                 -1px  1px 10px rgba(255, 0, 0, 1),
                  1px -1px 10px rgba(255, 0, 0, 1),
                  1px  1px 10px rgba(255, 0, 0, 1);
}
.header__chests-free .header__chests-name {
    font-weight: normal;
    text-transform: uppercase;
    text-shadow: -1px -1px 10px rgba(0, 255, 0, .5),
                 -1px  1px 10px rgba(0, 255, 0, .5),
                  1px -1px 10px rgba(0, 255, 0, .5),
                  1px  1px 10px rgba(0, 255, 0, .5);
}
.header__chests-free .header__chests-name strong {
    font-weight: 900;
    font-size: 13px;
    line-height: 13px;
}

/** Panel de usuario */
.header__userpanel {
    flex: 0 1 460px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    color: #fff;
    text-align: left;
    justify-content: flex-end;
    pointer-events: none;
}
body.webapp .header__userpanel{
    flex: 1 1 270px; 
}
body.webapp .header__unlogged .header__logo{
    justify-content: center;
}

.header__unlogged .header__userpanel {
    flex: 1 1 0;
    margin: 0 10px 0 0;
}
.header__userpanel > div {
    pointer-events: initial;
}

header:not(.header__unlogged) .header__userpanel-login,
header:not(.header__unlogged).header__userpanel-register {
    position: relative;
    flex: 0 1 auto;
    height: 90px;
    padding: 36px 20px 0;
    border-right: 1px solid #000;
    border-left: 1px solid #333;
    text-transform: uppercase;
    cursor: pointer;
}
header:not(.header__unlogged) .header__userpanel-login:before {
    position: absolute;
    content: " ";
    height: 90px;
    top: 0;
    left: -2px;
    border-left: 1px solid #000;
}
header:not(.header__unlogged) .header__userpanel-login:hover,
header:not(.header__unlogged) .header__userpanel-register:hover {
    height: 91px;
    margin-top: 1px;
    border-bottom: 3px solid #c00;
    background: rgba(0, 0, 0, .3);
}
header:not(.header__unlogged) .header__userpanel-login .icon {
    padding-right: 8px;
    vertical-align: -2px;
}

.header__userpanel-avatar {
    flex: 0 0 58px;
    margin-left: 5px;
}
.header__userpanel-avatar:hover {
    background: #fff;
}
.header__userpanel-avatar > a {
    display: block;
    padding: 6px 5px 6px;
    border-left: 1px solid transparent;
}
.header__userpanel-avatar:hover > a {
    border-left: 1px solid #c8c8c8;
}
body.webapp .header__userpanel-avatar:hover{
    background: transparent;
    border-left: none;
}
.header__userpanel-avatar .avatar__image.avatar__100 {
    width: 58px;
    height: 58px;
    z-index: 3;
}
body.webapp .header__userpanel-avatar .avatar__image.avatar__100{
    width: 40px;
    height: 40px;
}
.header__userpanel-info {
    flex: 0 1 auto;
    border: 0;
}
.header__userpanel-info-username {
    display: block;
    padding: 0 0 0 38px;
    color: #fff;
    font-weight: 900;
    letter-spacing: .3px;
    transition: color .1s ease-out;
}
.header__userpanel-info-username:hover {
    color: #999;
}
.header__userpanel-info-currency {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    font-size: 14px;
}
.webapp .header__userpanel-info-currency{
    font-size: .9rem;
}
.header__userpanel-info-currency .coins__fc,
.header__userpanel-info-currency .coins__oc {
    margin: 0;
}
.header__userpanel-info-currency:hover .coins__fc {
    color: #7a9191;
}
.header__userpanel-info-currency:hover .coins__oc {
    color: #00c800;
}
.header__userpanel-settings {
    height: 70px;
    flex: 1 0 40px;
    text-align: center;
    cursor: pointer;
    border: 0;
    display: flex;
    flex-flow: column wrap;
    color: #888;
}
.header__userpanel-settings > div {
    border-left: 1px solid #434343;
}

body.webapp .header__userpanel-settings > div{
    border: none;
}
.header__userpanel-settings > div:not(.header__userpanel-menu):hover,
.header__userpanel-settings > div.active {
    color: #141414;
    background: #d7d7d7;
}
.header__userpanel-settings > div:not(.header__userpanel-menu):hover .icon,
.header__userpanel-settings > div.active .icon {
    color: #141414;
}
/*
body.webapp .header__userpanel-settings > div:not(.header__userpanel-menu):hover{
    background: transparent;
}
*/
body.webapp .header__userpanel-settings > div:not(.header__userpanel-menu):focus,
body.webapp .header__userpanel-settings > div.active{
    background: #e5f6ff;
}
body.webapp .header__userpanel-settings > div:not(.header__userpanel-menu):focus .icon{
    color: #393d40;
}
body.webapp .header__userpanel-settings > div:not(.header__userpanel-menu):focus .icon{
    color: #ffffff;
}

.header__userpanel-notifications,
.header__userpanel-support,
.header__userpanel-menu {
    cursor: pointer;
    flex: 1 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__userpanel-menu {
    position: fixed;
    right: 0;
    height: 70px;
    width: 40px;
}
.header__userpanel-menu .icon{
    font-size: 1.5em;
    transition: transform .3s ease-in-out;
}
.header__userpanel-menu.active .icon{
    transform: rotate(180deg) translateX(2px);
}
.header__userpanel-menu{
    display: none;
}
body.webapp .header__userpanel-settings{
    flex: 0 1 30px;
    color: #ffffff;
}
body.webapp .header__right-menu-element{
    flex: 0 1 40px;
    justify-content: center;
    color: #bfc2c9;
    border-left: none;
}
body.webapp .header__right-menu-element img,
body.webapp .header__userpanel-settings .header__userpanel-notifications img{
    width: 20px;
    height: auto;
    margin: 8px;
}

@keyframes notification-animation {
    20% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(10deg); }
    80% { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}
.header__userpanel-notifications:hover .icon {
    animation: notification-animation .3s;
}
.header__userpanel-support .icon {
    border: 0;
    font-size: 1.5em;
    /*transition: transform .3s ease-in-out;*/
}
.header__userpanel-support:hover .icon {
    /*transform: rotate(-60deg);*/
}
.header__userpanel-notifications:hover,
.header__userpanel-notifications.active,
.header__userpanel-settings:hover,
.header__userpanel-settings.active {
    z-index: 3;
}
.header__userpanel-notifications {
    position: relative;
    font-size: 1.5em;
}
.header__right-menu-element[data-element="aside__quests"] .notification{
    display: none;
    top: 5px;
    left: 55%;
}
#notifications__number,
.header__right-menu-element[data-element="aside__quests"] .notification{
    border-radius: 10px;
    background: #c00;
    color: #fff;
    font-weight: 900;
    padding: 3px 5px;
    text-align: center;
    font-size: 11px;
    position: absolute;
    z-index: 5;
    font-family: 'Lato', Arial, sans-serif;
}
#notifications__number{
    top: 1px;
    right: 1px;
}
body.webapp #aside__notifications{
    background: #e5f6ff;
}
body.webapp #notifications__number{
    top: 11px;
}
#aside__notifications .scrollbar > .scroll-element .scroll-bar {
    opacity: .8;
}
#aside__notifications .scrollbar {
    height: calc(100vh - 126px);
    max-height: calc(100vh - 126px);
    overflow: hidden;
}
.notifications__notification,
.notifications__more {
    position: relative;
    text-align: left;
    cursor: auto;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}

#aside__notifications .list__items > div > div,
#aside__notifications .list__items > div > a {
    border-bottom: 1px solid #e9e9e9;
}
#aside__notifications .list__items > div.notifications__notification-unread > div:first-child,
#aside__notifications .list__items > div.notifications__notification-unread > a {
    background: #f0f0f0;
}
body.webapp #aside__notifications .list__items > div.notifications__notification-unread > a{
    background: #dbeffa;
}
.notifications__more {
    display: none !important;
}
.notifications__notification > div:first-child,
.notifications__notification > a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 15px 45px 15px 0;
    color: #444;
    cursor: pointer;
}
.notifications__notification-image {
    flex: 0 0 70px;
    text-align: center;
}
.notifications__notification-image img {
    max-width: 100%;
    max-height: 50px;
}
.notifications__notification-image span.icon {
    font-size: 30px;
    line-height: 30px;
}
.notifications__notification-info {
    flex: 0 1 auto;
}
.notifications__notification-body {
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.2em;
}
.notifications__notification-body .coins__oc:after{
    height: 15px;
}
.notifications__notification-date {
    padding-top: 10px;
    color: #888;
    font-size: .95em;
}
#aside__notifications .list__items > div > div.notifications__notification-delete {
    color: #c8c8c8;
    position: absolute;
    top: 15px;
    right: 15px;
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 10px;
    cursor: pointer;
    z-index: 2;
}
#aside__notifications .list__items > div > div.notifications__notification-delete:hover {
    color: #888;
}
.notifications__loading {
    position: absolute;
    display: block;
    width: 90px;
    height: 90px;
    top: 110px;
    left: calc(50% - 45px);
    border-radius: 50%;
    box-shadow: 0 3px 0 0 #666;
    animation: uil-ring-anim 1s linear infinite;
}

body.webapp #aside__notifications .list__items > div > a {
    border-top: 1px solid #b7ceda;
    border-bottom: none;
    padding: 15px 45px 15px 15px;
}
body.webapp .notifications__notification-image {
    display: none;
}
body.webapp #aside__notifications .list__items > div > div.notifications__notification-delete{
    background-color: #464646;
    border-radius: 50%;
    top: 22px;
    right: 22px;
    color: #b7ceda;
    width: 22px;
    height: 22px;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 1.8rem;
}
#settings-menu {
    position: absolute;
    right: 0;
    top: 100%;
    border: 1px solid #c8c8c8;
    z-index: 2;
    border-top: 0;
}
body.webapp #settings-menu {
    display: none !important;
}
body.webapp .header__userpanel-avatar > a{
    pointer-events: all !important;
}
#settings-menu li a {
    display: block;
    padding: 3px 20px;
    color: #444;
    background: #fff;
    border-bottom: 1px solid #c8c8c8;
    font-size: 1em;
    line-height: 35px;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: 'Roboto', Arial, sans-serif;
    transition: all .2s;
}
#settings-menu li a.double {
    border-bottom: 1px solid #282828;
}
#settings-menu li a.logout {
    color: #888;
    background: #282828;
}
#settings-menu li a span.icon {
    position: relative;
    display: inline-block;
    width: 40px;
    font-size: 1.8em;
    padding: 2px 15px 0 0;
    top: 5px;
}
#settings-menu li a img {
    display: inline-block;
    max-width: 40px;
    max-height: 40px;
    padding: 4px 15px 0 0;
    vertical-align: -10px;
}
#settings-menu li a:hover,
#settings-menu li a:focus {
    background: #e9e9e9;
}
body:not(.webapp) #settings-menu li:last-child a {
    color: #fff;
    border-bottom: 0;
}
body:not(.webapp) #settings-menu li:last-child a:hover {
    color: #444;
}

.header__right-menu {
    flex: 1 0 230px;
    pointer-events: auto;
    text-align: center;
    color: #888;
    display: flex;
    flex-flow: row nowrap;
    height: 70px;
}
.header__right-menu-element {
    flex: 1 0 56px;
    align-items: center;
    justify-content: flex-end;
    display: flex;
    flex-flow: column nowrap;
    transition: all .2s;
    border-left: 1px solid #434343;
    color: #a1a1a1;
    cursor: pointer;
}
body:not(.webapp) .header__right-menu-element:first-child {
    border-left: 0;
}
@media (hover: hover) {
    .header__right-menu-element:hover,
    body.webapp .header__right-menu-element:hover{
        background: #d7d7d7;
        color: #141414;
        border-left: none;
    }
}
.header__right-menu-element.active{
    background: #d7d7d7;
    color: #141414;
    border-left: none;
}
.header__right-menu-element div.icon {
    max-height: 30px;
    font-size: 1.9em;
    width: 100%;
    height: 100%;
}
.header__right-menu-element span {
    margin: 5px 0;
    text-transform: uppercase;
    font-size: .75em;
    letter-spacing: .5px;
    font-weight: 700;
    font-family: 'Roboto', Arial, sans-serif;
}
body.webapp .header__right-menu{
    left: auto;
    right: 0;
    width: auto;
    height: 70px;
    border-bottom: 0;
    flex: 0 1 auto;
}
body.webapp .header__right-menu-element.active{
    background-color: transparent;
    color: #f4f400;
    text-shadow: 0 0 10px #ae3412, 0 0 20px #ae3412, 0 0 30px #ae3412;
}
body.webapp .header__right-menu-element div.icon,
body.webapp .header__userpanel-settings div.icon{
    font-size: 2rem;
    padding: 0 6px;
    max-height: 27px;
}
body.noheader header{
    display: none;
}
body.noheader main{
    padding-top: 0;
}

/** Main content */
body > main,
body > footer {
    transition: padding .3s ease-in-out;
}
body > main {
    padding-top: 70px;
    padding-right: 340px;
    min-height: calc(100vh - 246px);
}
body.webapp > main,
body.webapp > footer{
    padding-right: 0;
}
body.webapp > footer{
    padding: 18px 5px 10px;
    min-height: 205px;
}
body.webapp footer > .column:first-child,
body.webapp footer > .column:last-child{
    padding: 0;
}
body.full-width > main {
    padding-right: 0;
}

body.full-width > footer {
    padding-right: 60px;
}

body > main:before,
body > main:after,
.modal__body > main:before,
.modal__body > main:after { /* Parent-child margin collapse fix */
    content: " ";
    display: table;
}

/** Sidebar */
body > aside {
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    width: 340px;
    height: calc(100% - 70px);
    bottom: 0;
    right: 0;
    color: #000;
    background: #fff;
    transition: margin .3s ease-in-out;
    z-index: 40;
    border-left: 1px solid #c8c8c8;
}
body.webapp > aside{
    left: 100vw;
    height: calc(100vh - 140px);
    bottom: 70px;
    opacity: 0;
    z-index: 10;
    width: 100%;
}
body.webapp > aside.active{
    left: 0;
    right: 0;
    opacity: 100;
}
body.full-width > aside {
    margin-right: -340px;
}
body > aside .aside__toggle {
    position: absolute;
    width: 20px;
    height: 34px;
    left: -20px;
    cursor: pointer;
    z-index: 39;
    top: calc(50% - 12px);
    background: #fff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border: 1px solid #c8c8c8;
    border-right: 0;
}
body > aside .aside__toggle:hover{
    color: #fff;
    background: #282828;
}
body > aside .aside__toggle .icon {
    position: absolute;
    font-weight: lighter;
    top: calc(50% - 7px);
    left: 3px;
    font-size: 12px;
    line-height: 14px;
    transition: transform .3s ease-in-out;
}
body.full-width > aside .aside__toggle {
    overflow: visible;
}
body.full-width > aside .aside__toggle .icon {
    left: 4px;
    transform: rotate(180deg);
}
body > aside .aside__loading:before {
    box-shadow: 0 3px 0 0 #696969;
}
.aside__button {
    flex: 0 1 auto;
    height: 38px;
    margin: 0 15px 0 0;
    color: #bdb4a5;
    border: 0;
    background: #444;
    border-radius: 50%;
    transition: all .2s ease-in-out;
    overflow: hidden;
    z-index: 1;
}
.aside__button__search{
    padding: 0 10px;
    color: #888888;
    border: 0;
    background: transparent;
}
.aside__chat__header,
.aside__subheader {
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background-color: #eee;
}
.aside__subheader {
    align-items: center;
    justify-content: center;
    font-size: .85em;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    height: 26px;
}
.aside__header-item {
    flex: 0 1 30px;
    height: 26px;
    color: #444;
    background-color: transparent;
    border-right: 1px solid #888;
    font-size: 20px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 8px 0;
}
.aside__header-item:last-child{
    border-right: 0;
}
.aside__header-item:hover,
.aside__header-item.active{
    color: #000;
}

.aside__element.hidden {
    display: none !important;
}

#aside__chat {
    display: flex;
    flex-flow: column nowrap;
    transition: all .2s ease-in-out;
    flex: 1 0 auto;
}
#aside__chat > div {
    flex-shrink: 0;
}
.aside__container {
    flex: 1 0 auto;
    display: flex;
    flex-flow: column nowrap;
    transition: all .2s ease-in-out;
}

.chat__admin-controls {
    display: inline-flex;
    width: 0;
    overflow: hidden;
    transition: width .15s ease-in;
    vertical-align: -2px;
}
.aside__chat-message:hover .chat__admin-controls {
    width: 30px;
}
.chat__admin-controls > span{
    flex: 0 1 13px;
    font-size: .8em;
    cursor: pointer;
}
.chat__message-delete-confirm {
    margin: 20px 0;
    color: #888;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
}

.button__audio-settings{
    position: absolute;
    right: 12px;
    top: 6px;
    font-size: 1.1em;
    background-color: transparent;
}
.mygroup{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    z-index: 2;
}
.aside__chat-content{
    flex: 1 0 50px;
}
.aside__chat-message-text{
    display: inline;
    top: 1px;
    color: #000;
    font-weight: 400;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: .9em;
    vertical-align: middle;
    word-break: break-word;
}

.aside__chat-message-text.admin {
    color: #00733b;
}

.aside__chat-message.right{
    text-align: right;
}

.aside__chat-message.right .aside__chat-message-text{
    font-weight: 400;
}

.aside__chat-message.right .aside__chat-message-author.admin:before{
    display: none;
}

.aside__chat-message.right .aside__chat-message-author.admin,
.aside__chat-message.right .aside__chat-message-author.vip{
    padding-right: 26px;
    padding-left: 5px;
}

.aside__chat-message.right .aside__chat-message-author.admin:after,
.aside__chat-message.right .aside__chat-message-author.vip:after{
    display: block;
    position: absolute;
    content: " ";
    right: 0;
    top: 0;
    width: 21px;
    height: 14px;
    content: ' ';
    background-image: url(../images/chat/oc_admin_chat.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 1px 0 0;
}
.aside__chat-message.right .aside__chat-message-author.vip:after{
    background-image: url(../images/chat/premium.png);
}
.aside__chat-message-form input[loading] {
    cursor: wait;
}
.aside__chat-channel-offline-warning {
    padding: 0 8px;
}
.aside__chat-submit {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.aside__chat-submit-button {
    flex-basis: 38px;
}
.aside__chat-submit-button .icon {
    pointer-events: none;
}
.aside__chat-submit-button[disabled] {
    cursor: not-allowed;
}
.aside__chat-submit-button[loading] {
    cursor: wait;
}
.aside__chat-submit-button[loading] .icon:before {
    display: inline-block;
    content: "\eb23";
    animation: icon-loading 1s linear infinite;
    cursor: wait;
}

#aside__social-search-form,
.aside__chat-message-form {
    flex: 1 0 auto;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    margin: 10px;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid #c8c8c8;
    background: #fff;
}
#aside__search-result{
    display: none;
    max-height: 500px;
}

.aside__friends .user__actions,
.aside__social-search .user__actions {
    right: 15px;
}
#aside__social-search-form input,
.aside__chat-message-form input,
.aside__chat-message-form textarea {
    flex: 1 0 auto;
    height: 38px;
    padding: 6px 15px;
    margin: 0;
    border: 0;
    background: #fff;
    color: #000;
    font-family: 'Lato', Arial, sans-serif;
    resize: none;
}
.aside__chat-message-form textarea {
    height: 38px;
    padding: 11px 15px;
    font-size: 1.04rem;
}
.aside__chat-message-form .aside__button{
    flex: 0 1 auto;
    height: 38px;
    width: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #444;
    color: #fff;
    text-transform: uppercase;
}

.aside__header {
    padding: 1px 0 0 12px;
    display: flex;
    flex-flow: row nowrap;
    height: 30px;
    min-height: 30px;
    background: #454545;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: .85em;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
body.webapp aside{
    background: transparent;
}
body.webapp .aside__header{
    background: transparent;
    color: #393d40;
    font-size: 1.2em;
    height: 40px;
}
body.webapp .aside__subheader{
    text-transform: none;
    height: 60px;
    background: transparent;
    justify-content: space-evenly;
    letter-spacing: 0;
    align-items: flex-start;
}
body.webapp .button.button-outline{
    height: 40px;
    background: transparent;
    color: #393d40;
    border: 1px solid #393d40;
    font-weight: 400;
    padding: 0 10px;
}

.aside__header .tooltip-box {
    flex: 0 1 14px;
    margin: -1px 12px 0 0;
}
.aside__header .aside__header-title {
    flex: 1 0 auto;
}
body.webapp section #aside__matches{
    background: transparent;
}
body.webapp #aside__matches .aside__header .icon{
    font-size: .9rem;
    margin-left: 10px;
}
body.webapp .aside__header .aside__header-title{
    flex: 0 1 auto;
    margin: 4px 0;
    text-transform: none;
}
.aside__subheader .aside__subheader-options {
    flex: 0 1 auto;
    margin: 1px 6px 0;
    cursor: pointer;
}
.aside__header .time__bar {
    margin-top: -1px;
}

#aside__social-search-form button span.icon {
    padding-right: 3px;
}

#aside__social {
    flex: 1 0 auto;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}
.aside__friends {
    flex: 0 1 calc(100% - 118px);
    height: calc(100% - 118px);
}
.aside__friends .scrollbar > .scroll-element .scroll-bar {
    opacity: .8;
}
.aside__social-search {
    flex: 0 1 auto;
    height: auto;
}
.aside__friends .user:first-child {
    margin-top: 10px;
}
.aside__friends .user:nth-last-child(2) {
    margin-bottom: 10px;
}
.aside__friends .user,
.aside__social-search .user{
    padding: 6px 15px 6px 25px;
    background-color: #fff;
    transition: background-color .3s
}

.aside__friends .user,
.aside__friends .user a,
.aside__social-search .user,
.aside__social-search .user a{
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    width: 100%;
}

.aside__friends .user.user-offline a > div:not(.user__actions),
.aside__friends .user.user-offline > div:not(.user__actions) {
    filter: grayscale(100%);
    opacity: .35;
}

.aside__friends .user .user__actions,
.aside__social-search .user .user__actions{
    font-size: 14px;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    top: initial;
    right: initial;
    margin: 5px 0 5px 12px;
    padding-left: 12px;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.aside__friends .user:hover,
.aside__social-search .user:hover{
    background-color: #f4f4f4;
}

.aside__social-search .user:hover .user__actions,
.aside__friends .user:hover .user__actions {
    opacity: 1;
}

.aside__group-players .user .user__actions .user__actions-icon{
    display: none;
}

.aside__social-search .user__actions-icon.user__actions-icon-permanent,
.aside__social-search .user:hover .user__actions-icon,
.aside__friends .user__actions-icon.user__actions-icon-permanent,
.aside__friends .user:hover .user__actions-icon {
    margin: 0 5px;
    font-size: 14px;
}

.aside__social-search .user:last-child,
.aside__friends .user:last-child {
    padding-bottom: 5px;
}
.aside__social-search .avatar__50 .avatar__level,
.aside__friends .avatar__50 .avatar__level {
    width: 30px;
    height: 36px;
    padding-top: 9px;
    font-size: 14px;
}
.aside__social-search .user__status,
.aside__friends .user__status {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #068133;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.aside__social-search .user__status:before,
.aside__friends .user__status:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 3px;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 0 2px 2px rgba(255, 255, 255,.5);
}
.aside__friends .user__avatar,
.aside__social-search .user__avatar {
    width: 40px;
    height: 40px;
    position: relative;
}
.aside__friends .user__username,
.aside__social-search .user__username {
    margin-left: 10px;
    text-align: left;
}
.aside__social,
#aside__quests,
#aside__support {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 0 auto;
    height: 100%;
}
.aside__group-players {
    display: flex;
    flex-flow: row;
    height: 65px;
    margin: 5px;
    padding: 0;
    z-index: 2;
    justify-content: space-around;
}
.aside__group-players .user {
    flex: 0 0 25%;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.aside__group-players .user a{
    flex-flow: column nowrap;
}
.aside__group-players .user .user__avatar {
    margin-bottom: 3px;
}
.aside__group-players .user .user__username {
    max-width: 80px;
    font-weight: normal;
    font-size: 12px;
    overflow: hidden;
}
.aside__group-players .user .user__actions{
    top: -5px;
    right: -5px;
}

#aside__group-leave{
    display: none;
    cursor: pointer;
    background: #444;
    padding: 6px 8px 4px;
    text-transform: uppercase;
    font-weight: 400;
    margin: -1px 15px 0;
    height: 30px;
    flex: 0 1 auto;
    line-height: 1.8em;
}
#aside__group-leave span{
    margin-left: 8px;
}
.aside__group-player-slot{
    flex: 0 0 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.aside__group-player-add {
    width: 50px;
    height: 50px;
    margin: 0;
    color: #c8c8c8;
    font-size: 36px;
    font-weight: 900;
    line-height: 44px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    display: inline-block;
    background: -webkit-linear-gradient(#c8c8c8, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.aside__group-player-add:before {
    position: absolute;
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    padding: 1px;
    top: 50%;
    left: 50%;
    border: 2px solid #c8c8c8;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.aside__group-player-add:after {
    position: absolute;
    content: "";
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #c8c8c8;
    z-index: -1;
}
.aside__group-player-delete {
    position: absolute;
    padding: 8px 4px 11px;
    top: -2px;
    right: 10px;
    color: #8f8f8f;
    border-radius: 50%;
    background-color: #000;
    font-size: 20px;
    line-height: 0px;
    text-align: center;
    box-shadow: 0 0 5px 1px rgba(150, 150, 150, .5);
    z-index: 2;
    cursor: pointer;
}
.aside__group-player-delete[data-tooltip] {
    position: absolute;
}
.aside__group-player img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Sidebar Matches subsection */
#aside__matches .scrollbar > .scroll-element .scroll-bar {
    opacity: .8;
}
#aside__matches {
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}
#aside__matches .aside__header:last-child {
    margin-top: 20px;
}
#aside__matches .aside__header,
#aside__quests .aside__header {
    cursor: pointer;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
#aside__matches .aside__header .icon {
    padding-right: 10px;
    font-size: 1.1em;
    transition: all .2s ease-in-out;
}
#aside__matches .aside__header.collapsed .icon {
    transform: rotate(90deg) translate(5px, 7px);
}
#aside__matches .aside__header .view_all{
    flex: 0 1 auto;
    background: #888;
    height: calc(100% + 1px);
    align-items: center;
    display: flex;
    margin-top: -1px;
    padding: 0 12px;
    position: relative;
    color: #fff;
    font-weight: 400;
    font-size: 1.1em;
}

#aside__matches .small-text {
    font-weight: 400;
}
#aside__matches li {
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    border-bottom: 1px solid #eee;
}
#aside__matches li:last-of-type {
    border-bottom: 0;
}
#aside__matches li a {
    position: relative;
    min-height: 123px;
    padding: 8px 12px 3px;
    color: #444;
}
#aside__matches li a:hover {
    background: #eee;
}
.aside-matches__event-title {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 600;
    color: #444;
    display: flex;
    flex-flow: row nowrap;
    text-transform: uppercase;
    align-items: center;
    margin: 0 0 5px;
}
.aside-matches__event-title > div{
    height: 10px;
}
.aside-matches__event-timeleft{
    font-size: .9rem;
}
.aside-matches__event-title .eventtype {
    margin-right: 5px;
    font-size: .8rem;
    width: 20px;
    height: 20px;
}
.aside-matches__event-title > span:last-of-type {
    margin-left: 0;
}
.aside-matches__event-title .lighter {
    font-weight: 400;
}
.aside-matches__event-title .chat__button{
    color: #888;
    font-size: .9em;
    position: absolute;
    right: 8px;
    cursor: pointer;
    transition: color .2s ease-in-out;
}
.aside-matches__event-title .chat__button .icon {
    margin-right: 5px;
    font-size: 1em;
}
.aside-matches__event-title .chat__button:hover{
    color: #444;
}
.aside-matches__event-title .chat__button[loading] {
    cursor: wait;
}
.aside-matches__event-title .chat__button[loading] span.icon:before {
    display: inline-block;
    content: "\eb23";
    animation: icon-loading 1s linear infinite;
    cursor: wait;
}
.aside-matches__event-status {
    flex: 1 0 auto;
    text-align: right;
}
.aside-matches__event-status.conflict {
    color: #c8a000;
}

.aside-matches__event-main {
    display: flex;
    align-items: center;
}
.aside-matches__event-main > div {
    flex: 0 1 33.33%;
    width: 33.3%;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
}
.aside-matches__event-main > div:first-child {
    align-self: flex-start;
    align-items: flex-start;
}
.aside-matches__event-game {
    max-width: 50px;
    max-height: 50px;
    margin: 0px 0 0 10px;
}
.aside-matches__event-main > .rival {
    display: flex;
    align-items: center;
    color: #444;
    font: bold 1em 'Roboto', Arial, sans-serif;
    text-align: center;
}
.aside-matches__event-main > .rival .small-text {
    font-weight: 400;
    font-size: .9em;
    padding: 0 3px;
}
.aside-matches__event-main > .rival .user {
    height: 80px;
}
.aside-matches__event-main > .rival .user__username {
    margin-top: 6px;
    font-weight: normal;
    font-size: 12px;
}
.aside-matches__event-main > .rival .icon {
    display: block;
    height: 50px;
    margin: 10px 0 20px;
    font-size: 35px;
    line-height: 35px;
}
.aside-matches__event-main > .rival > div:first-child {
    margin: 0 auto;
}
.aside-matches__event-main > .rival .avatar {
    margin: 0 auto;
}
.aside-matches__event-main .prize_info {
    flex-flow: row nowrap;
    font-size: 1.5em;
    align-items: center;
}
.aside-matches__event-main .prize_info.free {
    color: #888;
    font-size: 1.2em;
    text-transform: uppercase;
}
.aside-matches__event-main .prize_info .coins__oc,
.aside-matches__event-main .prize_info .coins__fc {
    margin: 0 2px 0 0;
}
#aside__matches .prize_info .small-text {
    margin-left: 3px;
    font-size: .7em;
}

.aside-matches__event-main .positions {
    flex: 1 0 auto;
    text-transform: uppercase;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1em;
    text-align: left;
    color: #888;
    min-width: 60px;
}
.aside-matches__event-main .positions div {
    padding: 6px 4px;
}
.aside-matches__event-main .positions div:first-child {
    border-bottom: 1px solid #eee;
}
#aside__matches li a:hover .aside-matches__event-main .positions div:first-child {
    border-bottom-color: #ddd;
}
.aside-matches__event-main .positions div:first-child span {
    color: #444;
}
.aside-matches__event-main .positions span {
    margin-left: 5px;
    font-weight: 700;
    font-size: 1.1em;
}
.aside-matches__event-main .positions span.tournament-position {
    margin-left: 0;
    font-size: 1.1em;
}
.aside-matches__event-main .event-prize {
    flex: 0 1 auto;
    justify-content: flex-start;
    align-items: center;
    padding-right: 14px;
    text-transform: uppercase;
    white-space: nowrap;
}
.aside-matches__event-main .event-prize .coins__oc,
.aside-matches__event-main .event-prize .coins__fc {
    margin-right: 2px;
    font-size: 1.5em;
}
.aside-matches__event-main .event-prize > span {
    color: #888;
    font-size: .9em;
}
.aside-matches__event-main .event-prize > div {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    font-size: 1.5em;
}
.aside-matches__event-main .event-prize img {
    max-width: 45px;
    max-height: 45px;
    margin: 5px auto;
}
.aside-matches__event-main .event-prize.free > span:last-child {
    margin-top: 15px;
    font-weight: 700;
}
#aside__matches .event-prize .small-text {
    margin-left: 3px;
}
.aside-matches__event-date {
    position: absolute;
    bottom: 10px;
    left: 12px;
    color: #888;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    max-width: 110px;
}
.aside-matches__event-date .icon {
    margin-right: 4px;
    font-size: 1.2em;
}
body.webapp #aside__matches{
    background: #000912;
}
body.webapp #aside__matches .aside__header{
    color: #ffffff;
}

body.webapp #aside__matches li,
body.webapp #events__list li,
body.webapp .profile__menu li {
    background: #e5f6ff;
    margin: 6px 8px;
    border-radius: 6px;
}
body.webapp #aside__matches li.win-player,
body.webapp #events__list li.win-player,
body.webapp #aside__matches li.win-rival,
body.webapp #events__list li.win-rival{
    background-position: top center, bottom center;
    background-size: 100% 40px, 100% 60px;
    background-repeat: no-repeat, no-repeat;
}
body.webapp #aside__matches li.win-player,
body.webapp #events__list li.win-player{
    background-image: linear-gradient(-52deg, rgba(199,213,222,1) 0%, rgba(199,213,222,1) 48%, rgba(229,246,255,1) 48%, rgba(229,246,255,1) 100%),
                      linear-gradient(-52deg, rgba(199,213,222,1) 0%, rgba(199,213,222,1) 51%, rgba(229,246,255,1) 51%, rgba(229,246,255,1) 100%);
}
body.webapp #aside__matches li.win-rival,
body.webapp #events__list li.win-rival{
    background-image: linear-gradient(-52deg, rgba(229,246,255,1) 0%, rgba(229,246,255,1) 47%, rgba(199,213,222,1) 47%, rgba(199,213,222,1) 100%),
                      linear-gradient(-52deg, rgba(229,246,255,1) 0%, rgba(229,246,255,1) 50%, rgba(199,213,222,1) 50%, rgba(199,213,222,1) 100%)
}
body.webapp #aside__matches li a,
body.webapp #events__list li a,
body.webapp .profile__menu li a{
    padding: 4px 2px;
    min-height: 70px;
    display: flex;
    align-items: center;
}
body.webapp .aside-matches__event-main > div{
    padding: 10px 0;
}
body.webapp #aside__matches li .won .score,
body.webapp #events__list li .won .score{
    color: #008247;
}
body.webapp #aside__matches li .lost .avatar,
body.webapp #events__list li .lost .avatar{
    filter: grayscale(100%);
    opacity: .5;
}
body.webapp #aside__matches li .user,
body.webapp #events__list li .user{
    display: flex;
    flex-flow: row;
    height: 70px;
    flex: 1 0;
}
body.webapp #aside__matches li .user .user__username,
body.webapp #events__list li .user .user__username{
    font-weight: 600;
    text-transform: capitalize;
    padding: 4px 0 0 4px;
    font-size: 1em;
    color: #404040;
}
body.webapp #aside__matches li .score,
body.webapp #events__list li .score{
    position: absolute;
    left: 45px;
    font-weight: 900;
    font-size: 2.4rem;
    font-family: 'Play', Arial, sans-serif;
    letter-spacing: -2px;
    transform: scaleX(.7);
    color: #404040;
    top: 37px;
    padding: 0;
    text-align: left;
    width: 92px
}
body.webapp #aside__matches li .game-info,
body.webapp #events__list li .game-info{
    flex: 1 0;
    padding: 0;
}
body.webapp .aside-matches__event-title{
    margin: 0;
    padding: 0;
}
body.webapp #aside__matches li .icon,
body.webapp #events__list li .icon{
    font-size: 4rem;
    color: #003d73;
}
body.webapp .aside-matches__event-main .prize_info{
    font-size: 1.2rem;
    font-weight: 600;
}
/*
body.webapp #aside__matches li .rival,
body.webapp #events__list li .rival{
    color: #c76700;
}
*/
body.webapp #aside__matches li .rival .pending,
body.webapp #events__list li .rival .pending{
    position: absolute;
    right: 25px;
    top: 27px;
    font-size: 1.7rem;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Play', Arial, sans-serif;
    letter-spacing: -1px;
    transform: scaleX(.7);
    color: #c76700;
}
body.webapp #aside__matches li .rival .user,
body.webapp #events__list li .rival .user{
    align-self: flex-end;
    margin: 0;
    padding: 5px 5px 5px 5px;
}
body.webapp #aside__matches li .rival .user .user__username,
body.webapp #events__list li .rival .user .user__username{
    position: absolute;
    right: 58px;
    text-align: right;
    width: 90px;
    top: -2px;
    font-family: 'Roboto', Arial, sans-serif;
}
body.webapp #aside__matches li .rival .score,
body.webapp #events__list li .rival .score{
    right: 40px;
    left: auto;
    top: 27px;
    width: 120px;
    text-align: right;
}
body.webapp #aside__matches li .rival .user,
body.webapp .aside-matches__event-main.events{
    padding: 10px 0 0 0;
}
body.webapp #aside__matches li .aside-matches__event-game,
body.webapp #events__list li .aside-matches__event-game{
    margin: 0 8px 0 4px;
}
body.webapp #aside__matches li .column.game-info .aside-matches__event-game,
body.webapp #events__list li .column.game-info .aside-matches__event-game{
    padding: 0;
    width: 48px;
    height: 48px;
}
body.webapp #aside__matches li .column.event-info,
body.webapp #events__list li .column.event-info{
    flex: 1 0 33.3%;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px 0 0 0;
}
body.webapp .aside-matches__event-title.events{
    font-size: 1.1rem;
    padding: 0 10px 0 0;
}
body.webapp .aside-matches__event-title.events > div{
    height: auto;
}
body.webapp #aside__matches li .column.event-info .positions,
body.webapp #events__list li .column.event-info .positions{
    padding: 0;
    text-transform: none;
    align-items: center;
    height: 26px;
}
body.webapp .aside-matches__event-main .positions div{
    padding: 0 3px 0 0;
}
body.webapp #aside__matches li .column.event-info .positions > div:first-of-type,
body.webapp #events__list li .column.event-info .positions > div:first-of-type{
    border: none;
    padding: 0;
}
body.webapp #aside__matches li .column.event-info .positions .icon,
body.webapp #events__list li .column.event-info .positions .icon{
    font-size: 1.1rem;
    font-weight: 400;
    color: #2d3133;
    top: -1px;
    position: relative;
}
body.webapp #aside__matches li .button,
body.webapp #events__list li .button{
    flex: 0 1 38px;
    padding: 4px 8px;
    margin: 0 6px 0 0;
    background-color: #00c76d;
    border-bottom: 4px solid #009752;
}
#aside__quests {
    height: 100%;
}
#aside__quests .scrollbar > .scroll-element .scroll-bar {
    opacity: .8;
}
#aside__quests .aside__header > div:last-child{
    padding: 0 6px 0 3px;
    text-transform: none;
}
#aside__quests ul{
    display: flex;
    flex-flow: column;
    height: 50%;
    flex: 0 1 50%;
}
#aside__quests ul#quests__daily__list {
    flex-basis: 30%;
}
#aside__quests ul#quests__weekly__list {
    flex-basis: 70%;
}
#aside__quests .scroll-element.scroll-x.scroll-scrollx_visible {
    display: none;
}
#aside__quests ul li{
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    background-color: #ffffff;
    border-bottom: 1px solid #c8c8c8;
}
#aside__quests ul li:last-of-type{
    border-bottom: 0;
}
.aside__quests_main{
    display: flex;
    align-items: center;
    padding: 15px 0 5px;
    transition: background .2s ease-in-out;
}
a.aside__quests_main:hover {
    background: #eee;
}
.aside__quests_main > div{
    flex: 1 0 28%;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    height: 100%;
}
.aside__quests_main > div{
    flex: 1 0 auto;
    justify-content: center;
}
.aside__quests_main > div:first-child {
    flex: 0 0 80px;
    align-items: center;
    justify-content: center;
    width: 80px;
    padding: 10px;
    font-size: 3em;
}
.aside__quests_main > div:first-child img {
    max-width: 100%;
}
.aside__quests_main > .description{
    flex: 1 0 46%;
    color: #888;
}
.aside__quests_main > .description .title{
    margin-bottom: 3px;
    text-transform: uppercase;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 600;
}
.aside__quests_main > .description .progress_bar{
    margin: 10px 0;
    display: block;
    position: relative;
    height: 18px;
    width: 134px;
    border: 1px solid #888;
    border-right: 0;
    background-color: #999;
}
.aside__quests_main > .description .progress_bar > .counter_rail{
    width: 100%;
    height: 16px;
}
.aside__quests_main > .description .progress_bar .counter_rail > .color_bar{
    background-color: #068133;
    height: 16px;
    width: var(--new_width);
    transition: width .1s;
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    font-size: .7em;
    font-weight: 700;
    text-align: center;
    line-height: 1.9em;
    letter-spacing: .7px;
}
.aside__quests_main > .description .progress_bar .counter{
    height: 18px;
    color: #fff;
    font-size: .9em;
    font-weight: 600;
    font-family: 'Roboto', Arial, sans-serif;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    padding: 2px 0 0 5px;
    z-index: 1;
}
.aside__quests_main > .description .progress_bar:after,
.aside__quests_main > .description .progress_bar:before {
    right: -17px;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 9px;
    margin-top: -9px;
}
.aside__quests_main > .description .progress_bar:after {
    border-color: transparent;
    border-left-color: #999;
}
.aside__quests_main > .description .progress_bar:before {
    border-color: transparent;
    border-left-color: #888;
    right: -18px;
}
.aside__quests_main.completed > .description .progress_bar {
    border: 1px solid #888;
}
.aside__quests_main.completed > .description .progress_bar .counter{
    color: #ffffff;
}
.aside__quests_main.completed > .description .progress_bar:after{
    border-left-color: #068133;
    right: -18px;
}
.aside__quests_main .prize_info{
    align-items: center;
    text-transform: uppercase;
    justify-content: center;
    font-size: 1.2em;
    font-weight: 600;
    flex: 0 1 auto;
    font-family: 'Roboto', Arial, sans-serif;
    color: #c8c8c8;
    padding-right: 17px;
}
.aside__quests_main.completed .prize_info.fc{
    color: #0D5886;
}
.aside__quests_main.completed .prize_info.oc{
    color: #068133;
}
.aside__quests_main .prize_info .reward{
    margin: 0 0 6px;
}
#aside__chat-channel-name {
    flex: 1 0 auto;
    border: 0;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
#aside__chat-channel-name .aside__chat-channels__flag{
    position: absolute;
    left: 10px;
    top: -4px;
    width: 22px;
}
#aside__chat-channel-name .aside__chat-channels__flag img{
    width: 100%;
    height: auto;
}
.mobile-chat-mode-close{
    position: absolute;
    left: 12px;
    top: 10px;
}

#aside__chat.scrollbar > .scroll-element .scroll-bar {
    opacity: 0;
}
#chat-channels-content {
    padding: 10px;
}
.aside__chat__topic{
    font-size: 1em;
    line-height: 1.2em;
    font-weight: 700;
    padding: 10px;
    text-align: center;
}
.aside__chat-message {
    margin: 4px 0;
    font-size: 1.1em;
    line-height: 1.2em;
    font-weight: 400;
    overflow: hidden;
}
.aside__chat-message-text img {
    display: inline-block;
    max-height: 20px;
    max-width: 30px;
    vertical-align: middle;
    padding: 0;
    margin: 0 2px;
}
.aside__chat-message-system {
    color: #d20000;
}
.aside__chat-message-timestamp,
.aside__chat-message-author {
    display: inline-block;
    vertical-align: middle;
}
.aside__chat-message-timestamp {
    padding-right: 4px;
    font-size: .9em;
}
.aside__chat-message-author {
    padding-right: 5px;
    z-index: 1;
    vertical-align: middle;
    font-weight: 600;
}
.aside__chat-message-author.admin,
.aside__chat-message-author.vip{
    padding-left: 22px;
}
.aside__chat-message-author.admin:before,
.aside__chat-message-author.vip:before{
    display: block;
    position: absolute;
    left: 0;
    top: 1px;
    width: 21px;
    height: 14px;
    content: ' ';
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 1px 0 0;
}
.aside__chat-message-author.admin:before{
    background-image: url(../images/chat/oc_admin_chat.png) !important;
}
.aside__chat-message-author.vip:before{
    background-image: url(../images/chat/premium.png);
}
.aside__chat-message-author.admin a{
    color: #505050;
}
.aside__chat-message-author.red a {
    color: #f00;
}
.aside__chat-message-author.red a:hover {
    color: #f44;
}
.aside__chat-message-author.green a {
    color: #259002;
}
.aside__chat-message-author.green a:hover {
    color: #2fb503;
}
.aside__chat-message-author.blue a {
    color: #5aa8de;
}
.aside__chat-message-author.blue:hover a {
    color: #7fbee9;
}
.aside__chat-message-author.orange a {
    color: #b17606;
}
.aside__chat-message-author.orange a:hover {
    color: #e4a939;
}
.aside__chat-message-author.strong_orange a {
    color: #ce6001;
}
.aside__chat-message-author.strong_orange a:hover {
    color: #ff9334;
}
.aside__chat-scroll-bottom {
    display: none;
    position: absolute;
    width: 100%;
    padding: 10px;
    bottom: calc(100% + 1px);
    left: 0;
    color: #fff;
    border: 0;
    background: rgba(100, 0, 0, .6);
    font-size: 14px;
    z-index: 1;
}
.aside__chat-message-form input[disabled],
.aside__chat-message-form button[disabled] {
    opacity: .5;
}
.aside__chat-message-form-emoticon {
    border: 0;
    background: #f4f4f4;
    padding: 7px 6px 3px;
}
.aside__chat-message-form-emoticon img {
    width: 23px;
    height: 23px;
    transition: all .2s ease-in-out;
}
.aside__chat-message-form-emoticon:hover img {
    transform: scale(1.1);
}
.aside__chat-message-form-emoticon[disabled]:hover img {
    transform: none;
}
.aside__chat-rooms{
    text-transform: uppercase;
    font-size: 12px;
    background: #191919;
    font-weight: 900;
    line-height: 22px;
    border-bottom: 1px solid #444;
    border-top: 1px solid #444;
    color: #808080;
    text-align: center;
}
.aside__chat-rooms .icon{
    margin: 0 5px 0 0;
    font-size: 15px;
    position: relative;
    top: 3px;
}
.aside__chat-channels {
    text-align: center;
}
.aside__chat-channels h3 {
    padding: 8px;
    color: #969292;
    font-weight: bold;
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
}
.aside__chat-channels span.icon {
    padding-right: 8px;
    color: #545454;
    font-size: 23px;
    vertical-align: -3px;
}
#chat-channels-list {
    display: flex;
    justify-content: space-around;
    min-height: 65px;
    height: auto;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
#chat-channels-list .aside__chat-channels__name{
    font-size: .8em;
    margin: 8px 0;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
    order: 2;
}
#chat-channels-list li{
    cursor: pointer;
    padding: 12px 0 0 0;
    position: relative;
    flex: 0 1 25%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    background-color: #d7d7d7;
    transition: background-color .2s;
    border-bottom: 3px solid #d7d7d7;
}
#chat-channels-list li.has-details:hover,
#chat-channels-list li.has-details.selected{
    border-bottom: 3px solid #141414;
    color: #141414;
}
#chat-channels-list li.has-details:hover > .aside__chat-channels__name,
#chat-channels-list li.has-details.selected > .aside__chat-channels__name{
    color: #141414;
}
#chat-channels-list li.has-details:hover:before{
    display: block;
    z-index: 100;
}
#chat-channels-list li .aside__chat-channels__icon {
    position: relative;
    flex: 0 1 auto;
    order: 1;
    z-index: 1;
    color: #888888;
    height: 35px;
    width: 35px;
}
#chat-channels-list li .aside__chat-channels__icon img {
    max-width: 100%;
    max-height: 100%;
}
#chat-channels-list li .aside__chat-channels__icon:active {
    color: #000000;
}
#chat-channels-list li .aside__chat-channels__details{
    transition: all .2s ease-in-out;
    position: absolute;
    width: 340px;
    background: #eee;
    height: auto;
    align-items: flex-start;
    top: 78px;
    overflow: hidden;
    z-index: 20;
    flex-flow: row wrap;
    justify-content: center;
    margin: 0;
    padding: 8px;
    right: 0px;
    display: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
#chat-channels-list li .aside__chat-channels__flag {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
#chat-channels-list li[data-type="1"] .aside__chat-channels__details{
    right: 0;
}
#chat-channels-list li[data-type="2"] .aside__chat-channels__details{
    right: -256px;
}
#chat-channels-list li[data-type="2"] .aside__chat-channels__details,
#chat-channels-list li[data-type="2"]:after{
    display: none !important;
}
#chat-channels-list li[data-type="3"] .aside__chat-channels__details{
    right: -254px;
}
#chat-channels-list li[data-type="4"] .aside__chat-channels__details{
    right: -169px;
}
#chat-channels-list li[data-type="5"] .aside__chat-channels__details{
    right: -85px;
}
#chat-channels-list li.has-details > .aside__chat-channels__name{
    color: #666;
}
#chat-channels-list li.has-details .aside__chat-channels__details .button__chat-settings{
    position: absolute;
    right: -6px;
    top: -8px;
}
#chat-channels-list li.has-details .aside__chat-channels__details .button__chat-settings .icon{
    font-size: .9em;
}

#chat-channels-list li.has-details:hover .aside__chat-channels__details{
    display: flex;
}

.header__right-menu-element:not([data-element="aside__quests"]) .notification,
#chat-channels-list li .notification {
    display: none;
    border-radius: 50%;
    background-color: #c10000;
    color: #fff;
    font-weight: 900;
    width: 16px;
    height: 16px;
    padding: 2px 0;
    text-align: center;
    font-size: .8em;
    position: absolute;
    top: -4px;
    right: -7px;
    z-index: 5;
}
.header__right-menu-element:not([data-element="aside__quests"]) .notification{
    position: absolute;
    top: 5px;
    left: 55%;
    padding: 3px 0 0 1px;
    font-size: 1em;
}

#chat-channels-list li .channelDetail{
    display: inline-flex;
    flex-direction: column;
    margin: 18px 10px 2px;
    flex: 1 0 auto;
    max-width: 70px;
}
#chat-channels-list li .channelDetail .aside__chat-channels__name{
    order: 2;
    margin: 8px auto 0;
    font-weight: 600;
}

#chat-channels-list li .channelDetail:hover .aside__chat-channels__name{
    color: #000000;
}

#chat-channels-list li .channelDetail .aside__chat-channels__icon{
    order: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
}

#chat-channels-list li .channelDetail .aside__chat-channels__icon img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

#chat-channels-list li .channelDetail .button__chat-close{
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 8;
    background-color: #ffffff;
    line-height: 0;
    border-radius: 50%;
}
#chat-channels-list li .channelDetail .button__chat-close .icon{
    font-size: 1.4em;
    color: #282828;
}
#chat-channels-list li .channelDetail .notification{
    top: 30px;
    right: 8px;
}
#chat-channels-list li .tooltip {
    background: #000;
    white-space: nowrap;
}
.aside__chat-channels .aside__button {
    height: 27px;
    margin: 10px 0;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
}

/* Sidebar notifications */
.aside__notifications{
    display: flex;
    flex-flow: column nowrap;
    flex: 0 1 auto;
    max-height: calc( 100vh - 102px);
}

body > aside .aside__noinfo {
    padding: 40px 25px;
    color: #555;
    font-weight: 900;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
}
body > aside .aside__noinfo strong {
    color: #888;
    font-weight: 900;
}
.aside__content-loading {
    display: none;
}
.aside__content-loading:before,
.aside__loading:before {
    display: block;
    content: " ";
    width: 90px;
    height: 90px;
    margin: 80px auto;
    border-radius: 50%;
    box-shadow: 0 3px 0 0 #666;
    animation: uil-ring-anim 1s linear infinite;
}

/** Footer */
body > footer {
    background: #282828;
    padding: 28px 370px 28px 15px;
    min-height: 220px;
    display: flex;
    flex-flow: row wrap;
}
body > footer a {
    color: #888;
}
body > footer a:hover {
    color: #c8c8c8;
}

/* LOGGED IN */
footer > .column{
    flex: 1 1 auto;
    align-items: flex-start;
}
footer > .column:first-child{
    flex: 1 0 20%;
    align-items: flex-start;
}
footer > .column:last-child{
    flex: 1 0 20%;
    align-items: center;
}
body > footer .logo{
    margin: 0;
}
body > footer .logo img{
    width: 86px;
    height: auto;
}
body > footer .social{
    display: flex;
    flex: 0 1 auto;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}
/*
body > footer .social > span:first-child{
    text-transform: uppercase;
    color: #888;
    border-right: 1px solid #444;
    line-height: 40px;
    padding: 0 10px 0 0;
}
*/
body > footer .social a{
    display: inline-flex;
    margin: 0 0 15px;
}
body > footer .social .icon {
    font-size: 1.3em;
    color: #888;
    transition: color .2s ease-in-out;
    margin: 0 15px 0 0;
}
body > footer .social img {
    max-width: 22px;
    max-height: 22px;
}
body > footer .social .social__youtube:hover .icon {
    color: #c4302b;
}
body > footer .social .social__facebook:hover .icon {
    color: #3b5998;
}
body > footer .social .social__twitter:hover .icon {
    color: #000;
}
body > footer .social .social__discord:hover .icon {
    color: #7289da;
}
body > footer .social .social__instagram:hover .icon {
    color: rgba(136, 136, 136, 0);
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-fill-color: transparent;
}
body > footer .social .social__twitch:hover .icon {
    color: #9147ff;
}
body > footer .social .social__tiktok:hover .icon {
    color: #ee1d52;
}
body > footer nav .footer__nav-cash{
    color: #00FF00;
}
body > footer nav.footer__menu li,
body > footer nav.footer__info li{
    margin: 0 0 15px 0;
}
body > footer .title{
    font-size: 1.1em;
    color: #888;
    padding: 0;
}
body > footer #form__newsletter{
    display: flex;
    align-items: center;
    padding: 0;
    margin: 12px 0 0 0;
}
body > footer input.input{
    flex: 1 0 200px;
    height: 34px;
    border: 1px solid #ccc;
    padding: 0 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font: 1em 'Lato', Arial, sans-serif;
    color: #888888;
    margin-bottom: 0;
    border-radius: 20px 0 0 20px;
    background-color: #fff;
}
body > footer button.button{
    height: 34px;
    color: #fff;
    font: 900 .9em 'Lato', Arial, sans-serif;
    background-color: #525252;
    text-transform: uppercase;
    border: 0;
    min-width: 0;
    transition: background .1s ease-in-out;
    border-radius: 0 20px 20px 0;
    padding: 0 30px;
    width: auto;
}

/* Idiomas */
.footer__language {
    position: relative;
    cursor: pointer;
    margin-bottom: 70px;
}
.footer__language-current {
    display: flex;
    align-items: center;
}
.footer__language-text {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    color: #a10101;
    font: 700 1.2em 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    transition: color .1s ease-in-out;
}
.footer__language-text span.icon {
    color: #7d7d7d;
    font-size: 24px;
}
.footer__language-region {
    color: #fff;
    font: 700 1.2em 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
}
.footer__language-region img {
    padding: 0 7px;
}
.footer__languages {
    position: absolute;
    display: none;
    min-width: 290px;
    padding: 12px 20px;
    right: 0;
    bottom: 40px;
    border-radius: 6px;
    color: #fff;
    background: #000;
    font: 700 1.2em 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    z-index: 50;
}
.footer__languages:before {
    position: absolute;
    display: block;
    content: '';
    left: 50%;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    transform: translate(-50%, 100%);
}
.footer__languages:before {
    bottom: 0;
    border-top: 8px solid #000;
    z-index: 2;
}
.footer__languages ul li a {
    display: block;
    padding: 4px 5px;
    color: #666;
    text-decoration: none;
}
.footer__languages ul li a:hover {
    color: #aaa;
}
.footer__languages ul li a.footer__languages-current {
    color: #fff;
}
.footer__languages ul li a.footer__languages-current:hover {
    color: #bbb;
}
.footer__languages ul li a img {
    padding-right: 5px;
}
body.webapp .footer__language {
    align-self: center;
}


/* PUBLIC & PREHOME NOT LOGGED STYLES */
.public header .button {
    font-family: 'Play', Arial, sans-serif;
    font-weight: 700;
    height: 40px;
    min-width: 140px;
    letter-spacing: .08em;
    /*background-color: #FFB800;*/
    font-size: 1.1em;
    margin: 0 8px;
    color: #ffffff;
    padding: 0 12px;
}
.public header .button .icon{
    margin: 0 0 0 4px;
}
.public header .button.button-green {
    background-color: #009d00;
}
.public header .button.button-white {
    color: #888;
    background-color: #ddd;
}
.public header .button:not([disabled]):not(.disabled):hover {
    /*
    background-color: #ef8e00;
    color: #0b0b25;
    */
}
.public header .button.button-dark-grey {
    background-color: #212121;
}
body.prehome {
    margin-left: 0;
}
body.public > main {
    min-height: calc(100vh - 172px);
    padding: 70px 0 0 0;
}
body.public.noheader > main {
    padding: 0;
}
body.public > footer {
     min-height: 130px;
     display: flex;
     flex-flow: row wrap;
     align-items: flex-start;
     padding: 28px 45px;
    justify-content: space-between;
}
body.public > footer > div,
body.corporate.public > footer > .column{
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    margin: 0;
}
body.public > footer > .payment,
footer .payment{
    color: #e3e3e3;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: 300;
}
body.public > footer > .payment{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);  
}
body.public > footer > .payment .icon,
footer .payment .icon{
    font-size: 1.1em;
    margin: 0 6px 0 0;
}
body.public > footer > .payment .row{
    margin: 10px 0 0 0;
    align-items:  center;
    justify-content: center;
}
footer .payment .row{
    margin: 10px 0 0 0;
    align-items:  center;
    justify-content: flex-end;
    flex-flow: row nowrap;
}
body.corporate .payment .row,
body.corporate footer .row:not(.coin_block__header){
    margin: 0;
}
body.public > footer .payment p,
footer .payment p{
    font-size: 1rem; 
    letter-spacing: 1px;
}
footer .payment img{
    width: 100%;
    max-width: 280px;
}
/*
body.public > footer .social{
    justify-content: center;
    align-items: flex-start;
    border: 0;
    flex-flow: row nowrap;
}
body.public > footer .social a{
    display: inline-flex;
    margin-left: 24px;
}
*/
footer.public .lang{
    justify-content: flex-end;
}
/*
footer.public .social{
    flex: 1 0 100%;
}
*/
.public .header__menu > ul > li{
    border-bottom: 0;
    background-color: transparent;
}
/*
.public .header__menu > ul > li > a{
    background-color: #141414;
}
.public .header__menu > ul > li:last-child{
    border-right: none;
}
.public .header__unlogged .header__menu.welcome ul li a{
    padding: 32px 14px 0;
    text-align: center;
    color: #6e6a68;
    font-size: 1em;
    font-weight: 900;
}
.public .header__unlogged .header__menu.welcome > ul > li > a.active{
    background-color: #fff;
}
.public .header__unlogged .header__menu.welcome ul li a:hover{
    color: #fd2b2c;
}
*/
.public .button-reflect,
.public .button-prehome {
    font-family: 'Play', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    height: 56px;
    min-width: 240px;
    letter-spacing: .08em;
}

@media (max-width: 1024px) {
    footer > .column:first-child,
    footer > .column:last-child{
        max-width: 100%;
        flex: 1 0 100%;
        align-items: center;
        padding: 0 0 30px;
    }
    body > footer{
        flex-flow: row wrap;
        padding: 40px 15px 70px 15px;
    }
    footer > .column{
        flex: 1 1 auto;
        flex-flow: column wrap;
        align-items: center;
        text-align: center;
    }
    body > footer .logo{
        margin: 0 0 30px;
    }
    body.webapp > footer .logo{
        margin: 0;
    }
    body > footer .social{
        margin: 0 auto 30px;
    }
    body > footer .social a:first-child{
        margin-left: 0;
    }
    
    footer > .column:nth-of-type(2),
    footer > .column:nth-of-type(3),
    footer > .column:nth-of-type(4) {
        display: flex;
        flex: 1 1 auto;
        flex-flow: column wrap;
        margin: 10px 30px;
    }
    
    footer .payment .row{
        justify-content: center;
    }
    body > footer nav.footer__info,
    body > footer nav.footer__menu{
        padding: 0;
    }
    .footer__language{
        align-items: center;
        padding: 0 0 30px;
        margin: 0 auto 20px;
    }
    .footer__language-region,
    .footer__languages {
        font-size: .9em;
    }
    .footer__languages {
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
    }
    .webapp .footer__languages{
        bottom: 30px;
    }
    
    body.public > footer > div,
    body.corporate.public > footer > .column{
        flex: 1 0 100%;
    }

    /*
    body.public > footer .social{
        justify-content: center;
        margin: 30px auto 0;
    }
    */
}
@media (max-width: 1023px) {
    .public header {
        padding: 0;
        background: #141414;
        justify-content: space-between;
    }
    .public .header__userpanel {
        flex-flow: row nowrap;
    }
}
@media (max-width: 700px) {
    footer > .column:nth-of-type(2),
    footer > .column:nth-of-type(3),
    footer > .column:nth-of-type(4) {
        flex: 1 1 100%;
        margin: 10px;
    }
}
@media (max-width: 420px) {
    .public header .button {
        min-width: 0;
        width: auto;
        margin: 0 4px;
        padding: 0 10px;
        font-size: 1em;
    }    
    .header__unlogged .header__userpanel-login img{
        display: none;
    }
}
@media (max-width: 380px) {
    .header__unlogged .header__userpanel-register{
        display: none;
    }
    body.webapp .header__unlogged .header__userpanel-register{
        display: flex;
    }
}
@media (max-width: 300px) {
    body.webapp .header__unlogged .header__userpanel-login{
        display: none;
    }
}

/* GAMES SIDEBAR - START */
.sidebar-games {
    display: flex;
    flex-flow: column nowrap;
    position: fixed;
    z-index: 48;
    width: 82px;
    top: 70px;
    left: 0;
    bottom: 0;
    font-family: 'Play', Arial, sans-serif;
    transition: width .2s ease-in-out;
    overflow: hidden;
}
.sidebar-games.expanded {
    width: 250px;
    z-index: 51;
}
.sidebar-games .scrollbar > .scroll-element.scroll-y {
    right: 5px;
}
.sidebar-games__logo {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 70px;
    background: #250f33;;
    color: #b9b9b9;
    padding: 0;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .2s ease-in-out;
    overflow: hidden;
    cursor: pointer;
}
.sidebar-games .games-minigames .sidebar-games__logo {
    background: transparent;
}
.sidebar-games.expanded .sidebar-games__logo {
    justify-content: flex-start;
    padding: 0 0 0 24px;
}
.sidebar-games .games-minigames .sidebar-games__logo .icon {
    height: 30px;
}
.sidebar-games__logo .icon {
    position: absolute;
    top: 10px;
    left: 21px;
    width: 40px;
    height: 40px;
    font-size: 36px;
    transition: all .2s ease-in-out;
}
.sidebar-games__logo__title {
    position: absolute;
    top: 53px;
    left: calc(50% - 1px);
    font-weight: 700;
    font-size: .9em;
    transform: translateX(-50%);
    transition: all .2s ease-in-out;
}
.sidebar-games .games-minigames .sidebar-games__logo__title {
    top: 45px;
    left: 38px;
    max-width: 50px;
    text-align: center;
}
.sidebar-games .games-installable,
.sidebar-games .games-minigames {
    padding: 2px 12px 1px 0;
}
.sidebar-games .games-installable {
    background-color: #250f33;
}
.sidebar-games .games-minigames {
    background-color: #15091d;
}
.sidebar-games.expanded .sidebar-games__logo .icon,
.sidebar-games.expanded .sidebar-games__logo__title {
    color: #fd2b2c;
}
.sidebar-games.expanded .sidebar-games__logo .icon {
    top: 17px;
}
.sidebar-games.expanded .sidebar-games__logo__title {
    top: 30px;
    left: 74px;
    font-weight: 400;
    font-size: 1.16em;
    transform: none;
}
.sidebar-games.expanded .games-minigames .sidebar-games__logo__title {
    top: 30px;
    left: 74px;
    max-width: 150px;
}
.sidebar-games__list {
    display: flex;
    flex-flow: column wrap;
    justify-content: left;
    align-items: flex-start;
    width: 100%;
    height: calc(100vh - 70px);
    background-color: #15091d;
    overflow-x: hidden;
}
.sidebar-games .scrollbar > .scroll-element .scroll-bar {
    opacity: .8;
}
.sidebar-games__list .scroll-element.scroll-x.scroll-scrollx_visible {
    display: none;
}
.sidebar-games__list__game {
    margin: 13px 0;
    display: flex;
    align-items: center;
    justify-content: left;
    font-weight: 400;
    font-size: 1.1em;
    text-transform: uppercase;
    padding-left: 20px;
    cursor: pointer;
}
.sidebar-games__list__game-icon {
    max-width: 40px;
    max-height: 40px;
    position: relative;
}
.sidebar-games__list__game__name {
    position: relative;
    padding: 0 25px 0 15px;
    color: #fff;
    opacity: 0;
    white-space: nowrap;
    transition: opacity .1s ease-in-out;
}
.sidebar-games__list__game:hover .sidebar-games__list__game__name {
    color: #aaa;
}
.sidebar-games.expanded .sidebar-games__list__game__name {
    opacity: 1;
}
.sidebar-games__toggle {
    display: none;
}
@media (hover: none) {
    .sidebar-games__toggle {
        position: fixed;
        display: block;
        width: 82px;
        height: 100%;
        top: 70px;
        left: 0;
        z-index: 52;
    }
    .sidebar-games.expanded .sidebar-games__toggle {
        display: none;
    }
}
@media (max-width: 768px) {
    body {
        margin-left: 0;
    }
    body > header {
        left: 65px;
    }
    .header__menu {
        left: 0;
    }
    .sidebar-games {
        width: 65px;
        height: 70px;
        top: 0;
    }
    .sidebar-games.expanded {
        height: 100%;
    }
    .sidebar-games__logo .icon {
        left: 15px;
    }
    .sidebar-games.expanded .sidebar-games__logo .icon {
        left: 21px;
    }
    .sidebar-games__list {
        height: calc(100vh - 70px);
        position: absolute;
        left: -250px;
        margin: 0;
    }
    .sidebar-games.expanded .sidebar-games__list {
        left: 0;
        top: 70px;
    }
    .sidebar-games__toggle {
        width: 65px;
        height: 70px;
    }
}
/* GAMES SIDEBAR - END */

/**
 * Comunes
 */
.page {
    padding: 50px;
}
.page-text {
    padding-top: 5px;
    line-height: 1.5em;
}
.page-text h3 {
    font-weight: bold;
    font-size: 18px;
    line-height: 18px;
    margin: 1.8em 0 1em;
}
.page-text p {
    margin: 0 0 1.5em;
}

.error-document {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 80px 20px 20px;
    color: #666;
}
.webapp .error-document {
    padding: 20px;
}
.error-document__image img {
    max-width: 100%;
}
.error-document__title {
    padding: 25px 0 6px;
    font: 900 2.1em/1.2em 'Lato', Arial, sans-serif;
    text-align: center;
}
.error-document__description {
    font-size: 1.2em;
    line-height: 1.4em;
    text-align: center;
}

.icon-coins {
    padding-left: 3px;
    padding-right: 0 !important;
    font-size: .8em !important;
    vertical-align: 0 !important;
}

form[loading] .button[type="submit"],
form[loading] .button-submit {
    border: 0;
    cursor: wait;
}
@keyframes button--progress-bar {
    to { background-position: -50px 0; }
}
form[loading] .button[type="submit"]:after,
form[loading] .button-submit:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    background: linear-gradient(to right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), linear-gradient(-243.33deg, rgba(255, 255, 255, .2) 16.66%, transparent 16.66%, transparent 33.33%, rgba(255, 255, 255, .2) 33.33%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 66.66%, rgba(255, 255, 255, .2) 66.66%, rgba(255, 255, 255, .2) 83.33%, transparent 83.33%);
    background-size: 100px 100px;
    background-position: 0 0;
    animation: button--progress-bar 1s linear infinite;
    z-index: 1;
}

.button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: #444444;
    padding: 0 30px;
    /*text-transform: uppercase;*/
    text-decoration: none;
    border-radius: 6px;
    height: 30px;
    border: 0;
    cursor: pointer;
    transition: all .2s ease-in-out;
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.1rem;
}
.button:not([disabled]):not(.disabled):hover,
.button:not([disabled]):not(.disabled):focus {
    color: #fff;
    background-color: #888;
}
.button span.icon {
    font-size: 1.1rem;
    padding-right: 8px;
}
.button[off] {
    opacity: .8;
}
.button.button-round {
    border-radius: 50%;
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
}
.button.button-small {
    height: 22px;
    padding: 0 8px;
}
.button.button-medium {
    height: 32px;
}
.button.button-big {
    height: 36px;
    min-width: 172px;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 1.2rem;
    box-sizing: border-box;
}
.button.button-xbig {
    height: 54px;
    border-radius: 6px;
    padding: 0 30px;
    font: 700 20px 'Lato', Arial, sans-serif;
    min-width: 375px;
    box-sizing: border-box;
}
.button.button-inline {
    display: inline-flex;
}
.button.button-translucent {
    opacity: .2;
}
.button.hidden {
    display: none;
}
.button.play_now {
    color: #fe0022;
    background-color: #211030;
}
.button.play_now:before {
    display: inline-block;
    content: " ";
    background-image: url(../images/home/play_now.svg);
    background-size: contain;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    margin: 0 8px 0 0;
}
.button.play_now:not([disabled]):not(.disabled):hover,
.button.play_now:not([disabled]):not(.disabled):focus {
    color: #fe0022;
    background-color: #544365;
}
body.webapp .button.play_now:not([disabled]):not(.disabled):hover,
body.webapp .button.play_now:not([disabled]):not(.disabled):focus {
    color: #ffffff;
    background-color: inherit;
}
.button.button-black {
    color: #fff;
    background: #211030;
}
body.webapp .button.button-black{
    border-bottom: 4px solid #000000;
}
.button.button-black:not([disabled]):not(.disabled):hover,
.button.button-black:not([disabled]):not(.disabled):focus {
    background: #544363;
}
.button.button-yellow {
    color: #000;
    background: #ffc502;
}
.button.button-yellow:not([disabled]):not(.disabled):hover,
.button.button-yellow:not([disabled]):not(.disabled):focus {
    color: #000;
    background: #ffd916;
}
.button.button-green {
    color: #fff;
    background: #068133;
}

body.webapp .button{
    padding: 11px 18px 8px;
    margin: 0 auto;
    font-size: .9rem;
    text-transform: uppercase;
    vertical-align: middle;
    height: auto;
    line-height: 1;
}
body.webapp .button.button-green {
    background-color: #00c76d;
    border-bottom: 4px solid #009752;
}
body.webapp .button.button-green:not([disabled]):not(.disabled):hover,
body.webapp .button.button-green:not([disabled]):not(.disabled):focus {
    background-color: #00c76d;
}
body.webapp .button.button-blue {
    background-color: #000a28;
    border-bottom: none;
    border-top: 1px solid #002a92;
}
body.webapp .button.button-blue:not([disabled]):not(.disabled):hover,
body.webapp .button.button-blue:not([disabled]):not(.disabled):focus {
    background-color: #000a28;
}
body.webapp .button.button-blue img{
    width: 36px;
    position: absolute;
    left: 8px;
    top: -7px;
}
body.webapp .button.button-blue p{
    font-weight: 600;
}
body.webapp .button.button-bluegrey,
body.webapp .button.button-bluegrey:hover{
    text-transform: none;
    font-size: 1.1rem;
    background-color: #1a334c;
    border: 1px solid #3f70a0;
}
body.webapp .button.button-bluegrey .icon{
    font-size: 1.3rem;
}
body.webapp .button.button-red {
    background-color: #9f0200;
    border-bottom: 4px solid #3d0000;
}
body.webapp .button.button-red:not([disabled]):not(.disabled):hover,
body.webapp .button.button-red:not([disabled]):not(.disabled):focus {
    background-color: #9f0200;
}
.button.button-green:not([disabled]):not(.disabled):hover,
.button.button-green:not([disabled]):not(.disabled):focus {
    background: #00c800;
}
.button.button-grey {
    background: #eeeff3;
    color: #303030;
    border: 1px solid #babfc3;
}
.button.button-grey:not([disabled]):not(.disabled):hover,
.button.button-grey:not([disabled]):not(.disabled):focus {
    background: #d9dde1;
    color: #5b5c5e;
}
.button.button-red {
    color: #fff;
    background: #ff0126;
}
.button.button-red:not([disabled]):not(.disabled):hover,
.button.button-red:not([disabled]):not(.disabled):focus {
    background: #f77;
}
.button.button-icon {
    position: relative;
    overflow: hidden;
    padding: 0 20px 1px 75px;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, .1);
    justify-content: flex-start;
}
.button.button-icon span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 57px;
    font-size: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button[disabled],
.button.disabled,
.submenu.profile a[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
.button[loading],
.submenu.profile a[loading] {
    cursor: wait;
}
.button[loading] span.icon:before,
.submenu.profile a[loading] span.icon:before {
    display: inline-block;
    content: "\eb23";
    animation: icon-loading 1s linear infinite;
    cursor: wait;
}
.button[loading]:after,
.submenu.profile a[loading]:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 6px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, .2), rgba(255, 255, 255, .2)), linear-gradient(-243.33deg, rgba(255, 255, 255, .2) 16.66%, transparent 16.66%, transparent 33.33%, rgba(255, 255, 255, .2) 33.33%, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent 66.66%, rgba(255, 255, 255, .2) 66.66%, rgba(255, 255, 255, .2) 83.33%, transparent 83.33%);
    background-size: 100px 100px;
    background-position: 0 0;
    animation: button--progress-bar 1s linear infinite;
    z-index: 1;
}
.submenu.profile a[loading]:after {
    border-radius: 0;
    background-image: linear-gradient(to right, rgba(150, 150, 150, .2), rgba(150, 150, 150, .2)), linear-gradient(-243.33deg, rgba(150, 150, 150, .2) 16.66%, transparent 16.66%, transparent 33.33%, rgba(150, 150, 150, .2) 33.33%, rgba(150, 150, 150, .2) 50%, transparent 50%, transparent 66.66%, rgba(150, 150, 150, .2) 66.66%, rgba(150, 150, 150, .2) 83.33%, transparent 83.33%);
}
@media (max-width: 767px) {
    .button.button-xbig {
        height: 44px;
        border-radius: 5px;
        padding: 0 12px;
        font: 700 16px 'Lato', Arial, sans-serif;
        min-width: 195px;
    }
}
.button-see-more {
    width: 100%;
    height: 48px;
    box-shadow: 0 0 10px -1px rgba(0, 0, 0, .1);
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #b3b3b3;
    font: 700 13px 'Lato', Arial, sans-serif;
    text-transform: uppercase;
    border: 0;
    transition: background .1s ease-in-out;
}
.button-see-more:hover {
    background-color: #fafafa;
}
.button-see-more span.icon {
    font-size: 15px;
    height: 10px;
    display: flex;
    align-items: center;
    margin-top: 2px;
}
.m-button {
    min-width: 142px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #eac000;
    background-color: #1d1d1d;
    border-radius: 5px;
    font: 900 20px 'Lato', Arial, sans-serif;
    transition: background .1s ease-in-out;
}
.m-button:hover {
    background-color: #4f4f4f;
}
.m-button img {
    height: 18px;
    margin-right: 7px;
}
.button.button-premium {
    text-transform: none;
    color: #ffa600;
    background: #211030;
    font-weight: 600;
}
.button.button-premium:not([disabled]):not(.disabled):hover,
.button.button-premium:not([disabled]):not(.disabled):focus {
    color: #ffa600;
    background: #655430;
}
.button.button-premium-icon:before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 20px;
    margin-right: 8px;
    background: url(../images/subscription/premium_logo.png) no-repeat;
    background-size: contain;
}

.logo-premium{
    background-color: #010101;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
}
.logo-premium img{
    height: 68%;
    width: auto;
}
.logo-premium:before{
    content: " ";
    display: block;
    position: absolute;
    border-radius: 50%;
    top: 4px;
    width: 75%;
    height: 60%;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 90%);
}
.status {
    line-height: .9em;
}
.status:before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    background: #000;
}
.status .icon {
    padding-right: 6px;
}
.status.status-green:before {
    background: #009400;
}
.status.status-red:before {
    background: #a40000;
}
.status.status-lightred:before {
    background: #ea2200;
}
.status.status-grey:before {
    color: #666;
    background: #cecece;
}
.status.status-blue:before {
    background: #0d5886;
}
.status.status-lightblue:before {
    background: #3296c8;
}
.status.status-golden:before {
    background: #9f6303;
}
.status.status-darkgrey:before {
    background: #333;
}

@keyframes icon-loading {
    to { transform: rotate(360deg); }
}
.icon[loading]:before {
    display: inline-block;
    content: "\eb23";
    animation: icon-loading 1s linear infinite;
    cursor: wait;
}

[data-tooltip] {
    position: relative;
    cursor: pointer;
}

.tooltip {
    position: absolute;
    width: auto;
    max-width: 600px;
    padding: 6px 8px;
    color: #fff;
    border-radius: 4px;
    background: rgba(0, 0, 0, .9);
    text-align: center;
    font: normal 14px/18px 'Lato', Arial, sans-serif;
    text-transform: none;
    pointer-events: none;
    z-index: 200;
    display: none;
}
.tooltip:before {
    position: absolute;
    content: " ";
    width: 0;
    height: 0;
    border: 6px solid transparent;
}
.tooltip.tooltip-top:before {
    bottom: -12px;
    left: 50%;
    border-top-color: rgba(0, 0, 0, .9);
    transform: translateX(-6px);
}
.tooltip.tooltip-right:before {
    top: 50%;
    left: -12px;
    border-right-color: rgba(0, 0, 0, .9);
    transform: translateY(-6px);
}
.tooltip.tooltip-bottom:before {
    top: -12px;
    left: 50%;
    border-bottom-color: rgba(0, 0, 0, .9);
    transform: translateX(-6px);
}
.tooltip.tooltip-left:before {
    top: 50%;
    right: -12px;
    border-left-color: rgba(0, 0, 0, .9);
    transform: translateY(-6px);
}
.tooltip-medium {
    width: 150px;
    text-align: justify;
}
.tooltip-long {
    width: 250px;
    text-align: justify;
}
.tooltip-long-nojustify {
    width: 250px;
    text-align: left;
}
.tooltip-nowrap {
    white-space: nowrap;
}
.tooltip-box {
    display: block;
    width: 14px;
    height: 14px;
    border: 1px solid #282828;
    border-radius: 2px;
    color: #282828;
    font: bold 10px/13px 'Roboto', Arial, sans-serif;
    text-transform: lowercase;
    text-align: center;
}
.tooltip-box.white {
    color: #fff;
    border-color: #fff;
}
.tooltip-box.left {
    margin-right: 4px;
}
.tooltip-box.right {
    margin-left: 4px;
}

.message-box {
    position: relative;
    width: 90%;
    min-width: 350px;
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    color: #aaa;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 1.25em;
    line-height: 1.25em;
    letter-spacing: 0;
    z-index: 1;
}
.message-box.message-box__modal {
    background: none;
    box-shadow: none;
}
.message-box__success,
.message-box__error {
    padding-bottom: 80px;
    padding-left: 150px;
}
.message-box .button {
    position: absolute;
    float: left;
    bottom: 20px;
    right: 20px;
    font-size: .9em;
    clear: left;
}
.message-box__success .form__button[type="submit"],
.message-box__error .form__button[type="submit"] {
    left: 200px;
}
.message-box__success:before,
.message-box__error:before {
    position: absolute;
    top: 32px;
    left: 70px;
    font-size: 60px;
    line-height: 24px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.message-box__success:before {
    content: "\e931";
    color: transparent;
    background: #27917a linear-gradient(to bottom, #3dd2ae, #4bb9c3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.message-box__error:before {
    content: "\e930";
}
.message-box__success h2,
.message-box__error h2 {
    height: auto;
    margin: 10px 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 38px;
    line-height: 24px;
    text-transform: uppercase;
    box-shadow: none;
}
.message-box__success h2 {
    color: #27917a;
}
.message-box__error h2 {
    color: #990100;
}

.message-success,
.message-error,
.message-warning,
.message-info {
    display: none;
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 15px auto;
    padding: 12px 15px 12px 60px;
    border-radius: 6px;
    font-size: 1.1em;
    line-height: 1.2em;
    text-align: left;
}
.message-info {
    display: block;
}
.message-success:before,
.message-error:before,
.message-warning:before,
.message-info:before {
    position: absolute;
    top: 50%;
    left: 15px;
    font-size: 28px;
    transform: translateY(-50%);
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.message-success:before {
    content: "\ed6f";
    color: #6c6;
}
.message-error:before {
    content: "\ed4f";
    color: #d66;
}
.message-warning:before {
    content: "\ed4f";
    color: #fc0;
}
.message-info:before {
    content: "\ed63";
    color: #66afe9;
}
.message-success {
    border: 1px solid #6c6;
    background: #efe;
}
.message-error {
    border: 1px solid #d66;
    background: #fee;
}
.message-warning {
    border: 1px solid #fc0;
    background: #fff6d4;
}
.message-info {
    border: 1px solid #66afe9;
    background: #ebf4ff;
}
.message-box .message-success,
.message-box .message-error,
.message-box .message-warning,
.message-box .message-info {
    font-size: 0.9em;
    color: #000;
}
.debug-info {
    display: flex;
    flex-flow: row wrap;
    padding: 10px;
    font: normal 20px 'Roboto', Arial, sans-serif;
}
.debug-info__title {
    flex: 0 0 11%;
    font-weight: bold;
}
.debug-info__data {
    flex: 1 1 89%;
}

h1 strong,
h2 strong {
    padding: 0 3px;
}
h1 span,
h2 span {
    text-shadow: 0 0 1px #fff;
}
h1 img,
h2 img,
h1 span.icon:first-child{
    max-width: 58px;
    max-height: 40px;
    padding-right: 18px;
    font-size: 32px;
    vertical-align: middle;
    text-shadow: none;
    z-index: 1;
}
h1 .back,
h2 .back {
    width: 76px;
    height: 56px;
    border-right: 1px solid #fff;
    color: #fff;
    background-color: #838383;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    font-size: 19px;
    margin: -5px 40px -5px -40px;
    transition: background-color .1s ease-in-out;
}
h1 .back:hover,
h2 .back:hover {
    background-color: #b6b6b6;
}

.general_header {
    background-image: url(../images/banners/header.jpg);
    height: 130px;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.general_header h1 {
    text-align: center;
    min-height: 0;
    font-size: 2.2em;
    line-height: 1.5em;
    text-transform: uppercase;
    font-family: 'Play', Arial, sans-serif;
    display: block;
    color: #fff;
    font-weight: 700;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-shadow: 0 2px 13px rgba(0,0,0,.4);
    letter-spacing: .5px;
}

.modal h1,
.modal h2 {
    display: block;
    min-height: auto;
    padding: 0;
    border-top: 0;
    background-color: initial;
    box-shadow: none;
    margin: 0 0 10px;
}
.modal h1 img {
    max-height: 35px;
}

.modal .modal-text {
    font-size: 1.1em;
    line-height: 1.5em;
}
.modal .modal-p {
    margin: 0 0 30px;
    font-size: 1.1em;
    line-height: 1.5em;
}
.modal .modal-p ul {
    margin-left: 50px;
}
.modal .modal-p ul li {
    line-height: 34px;
    position: relative;
}
.modal .modal-p ul li:before {
    width: 11px;
    height: 22px;
    content: " ";
    display: block;
    position: absolute;
    left: -25px;
    top: 7px;
    background: url(../images/faqs/bullet.png) center center no-repeat;
}

@media (max-width: 900px) {
    h1,
    h2 {
        /*padding: 5px 20px;*/
    }
    h1 .back,
    h2 .back {
        margin: -5px 20px -5px -20px;
    }
}
h3 {
    font-weight: 700;
    font-family: 'Lato', Arial, sans-serif;
}
h3 img {
    margin-right: 7px;
}
h3 span.icon {
    text-shadow: 0 1px 0 #fff;
    margin-right: 10px;
    font-size: 27px;
}
h3.inline{
    display: inline-flex;
    flex-flow: row wrap;
    width:  80%;
}
h3.inline.centered{
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

h3.inline > div{
    flex: 0 1 auto;
    margin: 2px 24px 4px 0;
    align-items: center;
    display: flex;
    justify-content: center;
}

h3.inline.centered > div{
    text-transform: uppercase;
}
h3.inline.centered > .icon{
    margin: 0 10px 0 0;
}
h3.inline span.icon{
    font-size: 28px;
    margin: 0 0 0 10px;
    color: #9d9d9d;
}
h3.inline span.icon.mode{
    font-size: 28px;
    margin: 0 5px;
    color: #5f5f5f;
}
h3.inline span.icon-matchmaking.mode{
    font-size: 26px;
}
h3.inline span.icon-duel.mode{
    font-size: 36px;
}
h3 span.arrow {
    font-size: 22px;
    margin-left: 5px;
}
/*
@media (max-width: 900px) {
    h3 {
        padding: 0 20px;
    }
}
@media (max-width: 767px) {
    h3 {
        padding: 0 3.43vw;
    }
}
*/
/*
body:not(.corporate) h4 {
    background-color: #ececec;
    padding: 0 40px 0 76px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 0 28px 20px -20px rgba(0, 0, 0, .1);
    height: 57px;
    border-top: 1px solid #fff;
    position: relative;
    z-index: 1;
}
*/
body:not(.corporate) h4 .title {
    font: 20px 'Lato', Arial, sans-serif;
    color: #6f6f6f;
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
body:not(.corporate) h4 .title strong {
    font-weight: 900;
}
body:not(.corporate) h4 .title img {
    margin: 0 12px 0 27px;
}
@media (max-width: 1107px) {
    body:not(.full-width) h4 .title {
        font-size: 16px;
    }
    body:not(.full-width) h4 .title img {
        display: none;
    }
    body:not(.full-width) h4 .back {
        width: 57px;
    }
}
@media (max-width: 767px) {
    h4 .title {
        font-size: 16px;
    }
    h4 .title img {
        display: none;
    }
    h4 .back {
        width: 57px;
    }
}
h5 {
    padding: 0 40px;
    font: 16px 'Lato', Arial, sans-serif;
    color: #2a2a2a;
    text-transform: uppercase;
}
h5:after {
    content: '';
    display: block;
    background-color: #000;
    width: 38px;
    height: 1px;
    margin-top: 10px;
}
@media (max-width: 900px) {
    h5 {
        padding: 0 20px;
    }
}
@media (max-width: 767px) {
    h5 {
        padding: 0 3.43vw;
    }
}

nav.submenu {
    padding: 0 40px;
    background-color: #eee;
    text-transform: uppercase;
}
nav.submenu ul {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
}
nav.submenu ul li {
    width: 100%;
    border-left: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
    transition: all .2s ease-in-out;
}
nav.submenu ul li:first-of-type {
    border-left: 0;
}
nav.submenu a,
nav.submenu span:not(.icon) {
    position: relative;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #282828;
    transition: all .2s ease-in-out;
    padding: 3px 15px 0;
    box-sizing: border-box;
    font-size: 1.3em;
    line-height: 1.2em;
    text-align: center;
    font-family: 'Play', Arial, sans-serif;
    font-weight: 600;
}
nav.submenu span:not(.icon) {
    padding: 3px 0 0;
    justify-content: flex-start;
}
nav.submenu li:hover,
nav.submenu li:focus,
nav.submenu li.active {
    border-bottom-color: #282828;
    border-left-color: #282828;    
}
nav.submenu a:hover,
nav.submenu a:focus,
nav.submenu li.active a {
    color: #fff;
    background-color: #282828;
}
nav.submenu li.active a .icon{
   color: #fff;
}
nav.submenu a:hover img,
nav.submenu li.active a img {
    filter: brightness(0) invert(1);
}
nav.submenu a img,
nav.submenu a span.icon {
    margin-right: 8px;
}
nav.submenu a span.icon {
    font-size: 24px;
}
.submenu__image {
    position: absolute;
    top: 4px;
    left: 40px;
    padding: 0;
    z-index: 1;
}
.submenu__image img {
    max-width: 80px;
    max-height: 80px;
}
@media (max-width: 1107px) {
    body:not(.full-width) nav.submenu {
        padding: 0;
    }
    body:not(.full-width) nav.submenu ul {
        flex-wrap: wrap;
    }
    body:not(.full-width) nav.submenu ul li {
        width: 50%;
        max-width: 100%;
        border-bottom: 1px solid #e6e6e6;
        border-left: 0;
    }
    body:not(.full-width) nav.submenu ul li:nth-child(odd) {
        border-right: 1px solid #e6e6e6;
    }
    body:not(.full-width) nav.submenu ul li:last-child {
        border-bottom: 0;
    }
    body:not(.full-width) nav.submenu ul li:nth-last-child(2):not(:nth-child(even)) {
        border-bottom: 0;
    }
    body:not(.full-width) nav.submenu ul li a {
        border: 0;
    }
    nav.submenu a, nav.submenu span:not(.icon) {
        font-size: 1.1rem;
        padding: 0;
    }
}
@media (max-width: 767px) {
    .submenu__image {
        display: none;
    }
    nav.submenu {
        padding: 0;
    }
    nav.submenu ul {
        flex-wrap: wrap;
    }
    nav.submenu ul li {
        width: 50%;
        max-width: 100%;
        border-left: 0;
    }
    nav.submenu ul li:nth-child(even) {
        border-left: 1px solid #e6e6e6;
    }
    nav.submenu ul li:nth-child(n+3) a {
        border-top: 1px solid #e6e6e6;
    }
    nav.submenu ul li a {
        border: 0;
    }
    nav.submenu span {
        justify-content: center;
    }
}

.row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    max-width: 2200px;
    margin: 0 auto;
}
.row.flex-nowrap {
    flex-flow: nowrap;
}
.column {
    display: flex;
    flex-flow: column wrap;
    flex: 1 0 auto;
    align-items: center;
}
.column.flex-nowrap {
    flex-wrap: nowrap;
}
.column.left {
    align-items: flex-start;
}
.column.right {
    align-items: flex-end;
}
.column.break {
    flex-basis: 100%;
    height: 0;
}
.column > * {
    padding: 0 20px;
}
.box {
    /*overflow: hidden;*/
    padding: 20px 10px;
    flex: 1 0 auto;
    width: 100%;
}
.box.half{
    flex: 0 1 50%;
    min-width: 460px;
}
.box__header {
    padding: 10px 12px 9px;
    color: #fff;
    background-color: #211030;
    font-size: .9em;
    line-height: .9em;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 6px 6px 0 0;
}
.box__header-right {
    float: right;
    white-space: nowrap;
}
.box__header-right a {
    margin-left: 1px;
    padding: 4px 10px 3px;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    font-weight: normal;
    transition: all .1s ease-in-out;
    white-space: nowrap;
}
.box__header-right a:first-child {
    margin-left: 5px;
}
.box__header-right a:hover,
.box__header-right a.selected {
    color: #282828;
    background: #fff;
}
.box__subheader{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    background-color: #fff;
}
.box__subheader > *:not(.box__subheader__group),
.box__subheader > .box__subheader__group > * {
    flex: 1 0 10%;
    padding: 10px 12px;
    color: #888888;
    font-family: 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: .9em;
    text-align: center;
}

.box__subheader > .box__subheader__group {
    flex: 1 0 50%;
    display: flex;
    flex-flow: row nowrap;
}

.box__subheader > [data-sort]{
    cursor: pointer;
}

.box__header > * {
    text-transform: uppercase;
}
.box__body {
    border: 1px solid #eeeeee;
    border-top: 0;
    background: #fff;
}

body.webapp .box__body{
    border: none;
    background-color: #e5f6ff;
    border-radius: 0 0 6px 6px;
}
body.webapp .box{
    padding: 0 10px;
}
body.webapp .box__header{
    color: #404040;
    text-transform: none;
    font-size: 1.2rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    background-color: #e5f6ff;
}
body.webapp .box__subheader{
    background-color: #e5f6ff;
    border: none;
    border-radius: 6px 6px 0 0;
}
.box ul{
    background: #fff;
    border: 1px solid #eeeeee;
    border-top: 0;
}
body.webapp .box ul{
    background-color: #e5f6ff; 
    border: none;
    border-radius: 0 0 6px 6px;
}
.box.box-list .box__body ul {
    padding: 5px 0;
    font-family: 'Lato', Arial, sans-serif;
    font-size: 1em;
    color: #444;
}
.box.box-list .box__body ul li {
    border-bottom: 1px solid #eee;
    padding: 14px 36px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 42px;
}
.box.box-list .box__body ul li:nth-child(2) {
    border-bottom: 1px solid #ebebeb;
}
.box.box-list .box__body ul li:nth-child(3) {
    border-bottom: 1px solid #ebebeb;
}
.box.box-list .box__body ul li:last-of-type {
    border: 0;
}

body.webapp .box ul li{
    border-top: 1px solid #b7ceda;
    border-bottom: none;
    font-size: 1.1rem; 
}

@media (max-width: 1350px) {
    .list__pagination.numbered button{
        padding: 0 10px;
    }
    .box.half {
        flex: 0 1 100%;
        min-width: auto;
    }
}
@media (max-width: 500px) {
    .box__header-right {
        margin: 12px 0 0;
        text-align: right;
        float: none;
    }
}

.grid-2column,
.grid-3column {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: center;
    margin: 0 15px;
}
.grid-2column > div {
    flex: 0 0 50%;
}
.grid-3column > div {
    flex: 0 0 33.33%;
}
.grid-2column .box,
.grid-3column .box {
    margin: 20px 15px;
}
@media (max-width: 1400px) {
    body:not(.full-width) .grid-3column > div {
        flex-basis: 100%;
        margin-bottom: 30px;
    }
    .grid-2column > div {
        flex: 0 0 100%;
    }
}
@media (max-width: 1023px) {
    .grid-3column > div {
        flex-basis: 100%;
        margin-bottom: 30px;
    }
}

.list__head > div[data-sort] {
    cursor: pointer;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
form[loading] .list__head > div[data-sort] {
    cursor: wait;
}
.list__sort-asc:after,
.list__sort-desc:after {
    display: inline-block;
    margin-left: 5px;
    font-family: 'icomoon' !important;
    speak: none;
    text-transform: none;
    font-size: 1.4em;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    top: 2px;
}
.list__sort-asc:after {
    content: "\edc7";
}
.list__sort-desc:after {
    content: "\edc9";
}
form[loading] .list__sort-asc:after,
form[loading] .list__sort-desc:after {
    content: "\eb23";
    animation: icon-loading 1s linear infinite;
}

.list__pagination {
    display: flex;
    margin: 20px 0 0;
    align-items: center;
    justify-content: center;
}
.list__pagination.numbered {
    display: flex;
    flex-flow: row nowrap;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
.pagination__number-buttons {
    flex: 3 0 auto;
    justify-content: center;
    align-items: center;
    display: inline-flex;
}
.list__pagination.numbered button {
    flex: 0 1 40px;
    background-color: transparent;
    color: #888;
    margin: 0 6px;
    position: relative;
    border-radius: 6px;
}
.list__pagination .button{
    background-color: #eff4f8;
    color: #3d3d3d;
    border: 1px solid #babfc3;
}
body.webapp .list__pagination .button{
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: #fff;
}
.list__pagination.numbered button[disabled] {
    opacity: .25;
    cursor: not-allowed;
}
.list__pagination.numbered button.selected,
.list__pagination.numbered button:hover{
    background-color: #444;
    color: #fff;
}
.list__pagination.numbered .pagination__number-buttons > button {
    margin: 0 2px;
}
.list__pagination.numbered > button:first-child,
.list__pagination.numbered > button:last-child {
    flex: 1 0 60px;
    margin: 0;
    background-color: #444;
    color: #fff;
    border-radius: 6px;
}
.list__pagination.numbered > button:nth-child(2),
.list__pagination.numbered > button:nth-last-child(2){
    background-color: #444;
    color: #fff;
    font-size: 20px;
}
.list__pagination.numbered .pagination__number-buttons > button.player .avatar__image{
    width: 50px;
    height: 50px;
    zoom: .45;
    bottom: -38px;
    position: absolute;
    left: calc(50% - 31px);
}
.list__pagination.numbered .pagination__number-buttons > button.player .avatar__image:before{
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-width: 3px;
}
.list__pagination.numbered .pagination__number-buttons > button.player .arrow{
    position: absolute;
    left: calc(50% - 8px);
    bottom: -26px;
    z-index: 3;
    filter: drop-shadow( 0px 3px 2px rgba(0, 0, 0, .4));
}
.list__pagination.numbered button span.icon {
    font-size: 13px;
}

.logo-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.logo-list a {
    flex: none;
    margin: 20px 2.56vw;
    max-width: 100%;
}
.logo-list a img {
    display: block;
    max-width: 100%;
}
@media (max-width: 767px) {
    .logo-list a {
        margin: 20px;
    }
}

/** Monedas */
.coins__fc,
.coins__oc {
    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    margin: 1px 0;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 700;
    vertical-align: middle;
}

.coins__fc,
.coins__fc-color {
    color: #adc4c4;
}
.coins__fc.coins__white-background,
.coins__fc-color.coins__white-background {
    color: #799090;
}
.coins__oc,
.coins__oc-color {
    color: #0f0;
}
.coins__oc.coins__white-background,
.coins__oc-color.coins__white-background {
    color: #068133;
}
.coins__fc:after,
.coins__oc:after {
    content: " ";
}
.coins__fc:after {
    flex: 0 0 26px;
    width: 26px;
    height: 23px;
    background: url(../images/coins/fc/fc_new.svg) no-repeat center right/contain;
}
.coins__oc:after {
    flex: 0 0 34px;
    width: 34px;
    height: 25px;
    background: url(../images/coins/oc/oc_new.svg) no-repeat center center/contain;
}
.coins__fc.coins__left:after,
.coins__oc.coins__left:after {
    order: -1;
    margin: 0 5px 0 0;
}
body.webapp .coins__fc.coins__left:after,
body.webapp .coins__oc.coins__left:after{
    margin: 0;
    height: 22px;
    width: 24px;
    flex: 0 0 28px;
}
.coins__big {
    font-size: 1.2em;
}
.coins__big:after {
    margin: 1px 0 0 10px;
}
.coins__oc.coins__big:after {
    flex: 0 0 54px;
    height: 36px;
    background: url(../images/coins/oc/oc_big.png) no-repeat;
    background-size: initial;
}
.coins__left.coins__big:after {
    margin: 1px 10px 0 0;
}
.coins__fc.coins__single:after {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: url(../images/coins/fc/fc_single.png) no-repeat center center;
}
.coins__oc.coins__single:after {
    flex: 0 0 31px;
    width: 31px;
    height: 18px;
    background: url(../images/coins/oc/oc_single.png) no-repeat center center;
}
@keyframes coins__animation-add {
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}
@keyframes coins__animation-del {
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}
.coins__animation {
    position: absolute;
    padding: 20px;
    left: 10px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, .8) 20%, transparent 75%);
    font-weight: bold;
    font-size: 20px;
    z-index: 1000;
}
.coins__animation.coins__add {
    top: 0;
    animation: coins__animation-add 1s linear forwards;
    transform: translateY(-40%);
}
.coins__animation.coins__del {
    bottom: 0;
    animation: coins__animation-del 1s linear forwards;
    transform: translateY(35%);
}
.coins__add {
    color: #068133;
}
.coins__del {
    color: #cc0000;
}
.coins__black {
    color: #282828;
}
.coins__grey {
    color: #444444;
}

.header__userpanel-info-currency .coins__fc:after,
.list__items .coins__fc:after {
    flex: 0 0 34px;
    width: 34px;
    display: flex;
    flex-flow: column nowrap;
    background-position: center center;
}
/** VIP */
.vip__color {
    color: #ffa600;
}

/** Helpers */
.text-center {
    text-align: center;
}
.color-white {
    color: white;
}
.color-black {
    color: black;
}
.color-red {
    color: #d20000;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.hidden {
    display: none;
}
.block {
    display: block;
}
.nowrap {
    white-space: nowrap;
}
.transparent {
    visibility: hidden;
}
.clearfix {
    visibility: hidden;
}
.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
img.grayscale {
    filter: gray;
    -webkit-filter: grayscale(100%);
}
.bold {
    font-weight: bold;
}
.uppercase {
    text-transform: uppercase;
}
.noinfo {
    padding: 25px;
    color: #888;
    font-size: 1.2em;
    line-height: 1.4em;
    text-align: center;
}
.no-records {
    flex: 1 0 100% !important;
    display: block !important;
    /*height: auto !important;*/
    margin: 0 auto;
    padding: 16px;
    color: #888;
    font-size: 1.2em;
    line-height: 1.4em;
    text-align: center;
}
td.no-records {
    display: table-cell !important;
}

.list__items.half{
    flex: 1 0 50%;
}

/** Usuarios */
.user {
    padding: 5px;
    transition: all .2s ease-in-out;
}
.user a {
    white-space: nowrap;
    color: #444;
    display: flex;
    flex-flow: row nowrap;
    font-family: Lato;
    font-weight: 600;
    text-align: center;
    font-size: 14px;
    align-items: center;
}

@keyframes user-online-animation {
    to { background-position: -300%; }
}
.aside__friends .user.user-online {
    background: linear-gradient(to right, transparent 30%, rgba(0, 255, 0, .8), transparent 70%) no-repeat 400% top/80% 100%;
    animation: user-online-animation .6s ease-in-out forwards;
}
.user.user-pending:before {
    position: absolute;
    display: block;
    content: " ";
    width: 30px;
    height: 30px;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    border-radius: 50%;
    box-shadow: 0 3px 0 0 #fff;
    animation: uil-ring-anim 1s linear infinite;
}
.user.user-offline .avatar,
.user.user-offline .user__info {
    filter: grayscale(100%);
}
.user.user-offline .avatar,
.user.user-offline .user__info,
.user.user-pending .avatar,
.user.user-pending .user__info {
    opacity: .4;
}
.header__userpanel-avatar.user-captain:before,
.aside__group-players .user.user-captain:before,
#play__group .user.user-captain:before{
    position: absolute;
    content: " ";
    width: 25px;
    height: 20px;
    left: 50%;
    background: url(../images/group_captain.png) no-repeat center center/100% 100%;
    transform: translateX(-50%);
    z-index: 4;
}
.header__userpanel-avatar.user-captain:before {
    top: -1px;
}
.aside__group-players .user.user-captain:before{
    top: -11px;
}
#play__group .user.user-captain:before {
    top: -6px;
}
.user__avatar {
    margin: 0;
}
.user__info {
    margin: 10px;
}
.user__info .user__username {
    width: 100%;
    margin-top: -3px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user__account {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 130px;
    height: 30px;
    padding: 0 7px;
    color: #fff;
    border: 1px solid #464646;
    border-radius: 4px;
    background: #464646;
    font: 14px 'Roboto', Arial, sans-serif;
    box-sizing: border-box;
    overflow: hidden;
}
.user__account span.icon {
    margin: 0 7px 0 0;
    font-size: 16px;
}
.user__actions {
    position: absolute;
    top: 0;
    right: 0;
    transition: all .2s ease-in-out;
    z-index: 5;
}
.user__actions-icon {
    display: inline-block;
    margin-right: 0;
    color: #444;
    transition: all .2s ease-in-out;
}
.user__actions-icon.user__actions-icon-permanent,
.user:hover .user__actions-icon {
    margin-right: 0px;
    font-size: 14px;
}
.user__actions-icon[disabled],
.user__actions-icon:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.user.user-offline .user__actions-icon.user__actions-icon-online {
    display: none;
}

@media (max-width: 1023px) {
    .user__info .user__username {
        font-size: 14px;
    }
}

/** Avatares */
.avatar {
    position: relative;
}
.avatar.avatar__image {
    /*margin: 5px;*/
    font-size: 0;
    z-index: 1;
}
.avatar.avatar__image img,
.avatar.avatar__frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.avatar__level {
    padding-right: 1px;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: bold;
    text-align: center;
    z-index: 1;
}
.avatar__frame .avatar__level {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.avatar__image.avatar__50 {
    width: 50px;
    height: 50px;
}
.avatar__frame.avatar__50 {
    width: 50px;
    height: 50px;
    margin: 10px 10px 20px 10px;
}
.avatar__frame.avatar__50 img {
    box-shadow: 0 0 5px 6px rgba(0, 0, 0, .8);
}
.avatar__frame.avatar__50:before {
    width: 68px;
    height: 74px;
    top: -10px;
    left: -10px;
    background-image: url(../images/avatars/frames/50/avatar-frame.png);
}
.avatar__50 .avatar__level {
    width: 38px;
    height: 46px;
    padding-top: 13px;
    background-image: url(../images/avatars/frames/70/user-level.png);
    font-size: 16px;
}
.avatar__frame.avatar__50 .avatar__level {
    width: 30px;
    height: 35px;
    padding-top: 12px;
    background-image: url(../images/avatars/frames/50/user-level.png);
    font-size: 12px;
    line-height: 12px;
}
.avatar__frame.avatar__50 .avatar__level {
    bottom: -13px;
    background-image: none;
}

.avatar__image.avatar__70 {
    width: 50px;
    height: 50px;
}
.avatar__image.avatar__70:before {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-width: 5px;
}
.avatar__frame.avatar__70 {
    width: 70px;
    height: 70px;
    margin: 15px 10px 30px 10px;
}
.avatar__frame.avatar__70 img {
    box-shadow: 0 0 10px 12px rgba(0, 0, 0, .8);
}
.avatar__frame.avatar__70:before {
    width: 94px;
    height: 102px;
    top: -12px;
    left: -12px;
    background-image: url(../images/avatars/frames/70/avatar-frame.png);
}
.avatar__70 .avatar__level {
    width: 44px;
    height: 52px;
    padding-top: 17px;
    background-image: url(../images/avatars/frames/70/user-level.png);
    font-size: 16px;
    line-height: 16px;
}
.avatar__frame.avatar__70 .avatar__level {
    bottom: -22px;
    background-image: none;
}
/*.avatar__image.avatar__100 {
    width: 100px;
    height: 100px;
}
.avatar__image.avatar__100:before {
    width: calc(100% + 5px);
    height: calc(100% + 5px);
    border-width: 6px;
}*/
.avatar__frame.avatar__100 {
    width: 100px;
    height: 100px;
    margin: 20px 20px 40px 20px;
}
.avatar__frame.avatar__100 img {
    box-shadow: 0 0 10px 20px rgba(0, 0, 0, .8);
}
.avatar__frame.avatar__100:before {
    width: 136px;
    height: 148px;
    top: -18px;
    left: -18px;
    background-image: url(../images/avatars/frames/100/avatar-frame.png);
}
.avatar__100 .avatar__level {
    width: 44px;
    height: 52px;
    padding-top: 17px;
    background-image: url(../images/avatars/frames/100/user-level.png);
    font-size: 18px;
    line-height: 18px;
}
.avatar__frame.avatar__100 .avatar__level {
    bottom: -22px;
    background-image: none;
}

.avatar__vip{
    position: relative;
}
.avatar__vip:before {
    display: block;
    content: " ";
    position: absolute;
    background: url(../images/avatars/premium.png) no-repeat center center/contain;
    z-index: 2;
}
.avatar__50.avatar__vip:before {
    width: 55px;
    height: 68px;
    top: -3px;
    left: -2px;
}
.avatar__70.avatar__vip:before {
    width: 110%;
    height: 126%;
    top: -2px;
    left: -3px;
}
.avatar__100.avatar__vip:before {
    width: 110%;
    height: 126%;
    top: -1px;
    left: -3px;
}
.aside__chat-channels__details .channelDetail > .aside__chat-channels__icon.avatar__vip:before {
    height: 55px;
    width: 47px;
    top: -2px;
    left: -2px;
}
#chat-channels-list [data-type="4"].selected > .aside__chat-channels__icon.avatar__vip:before{
    height: 45px;
    width: 39px;
    top: -1px;
    left: -2px;
}
#aside__social .avatar__50.avatar__vip:before {
    width: 44px;
    height: 52px;
    top: -1px;
}
.daily__avatar .avatar__100.avatar__vip:before {
    top: -4px;
    left: -3px;
}
body.webapp .daily__avatar{
    display: none;
}
body.webapp #modal-daily .modal__title,
body.webapp #modal-monthly .modal__title{
    padding-left: 10px;
}
.matchmaking-accept__player-avatar .avatar__100.avatar__vip:before,
.duel-accept__player-avatar .avatar__100.avatar__vip:before {
    top: -5px;
    left: -5px;
}

/** Modalidades */
.events-types {
    background-color: #d2d2d2;
    border-top: 1px solid #fff;
    padding: 6px 40px;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.events-types:before {
    content: '';
    border: 16px solid transparent;
    border-top-color: #d2d2d2;
    border-bottom: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.events-types h3 {
    padding: 0!important;
    flex: none;
    margin: 9px 10px 9px 0;
}
.events-types__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.events-types__buttons .button {
    margin: 9px 20px 9px 0;
    min-width: 180px;
}
@media (max-width: 1366px) {
    .events-types {
        justify-content: center;
    }
    .events-types h3 {
        margin: 9px 0;
    }
    .events-types__buttons {
        justify-content: center;
    }
    .events-types__buttons .button {
        margin: 9px 10px;
    }
}
@media (max-width: 900px) {
    .events-types {
        padding: 9px 20px;
    }
}
@media (max-width: 767px) {
    .events-types {
        justify-content: center;
        padding: 9px 3.43vw;
    }
    .events-types__buttons {
        justify-content: center;
    }
    .events-types__buttons .button {
        width: calc(50% - 20px);
    }
}
@media (max-width: 480px) {
    .events-types h3 > *:first-child {
        display: none;
    }
    .events-types__buttons .button {
        width: calc(100% - 20px);
    }
}

/** Juegos */
.games-slider {
    position: relative;
    width: 90%;
    max-width: 1440px;
    padding: 0px 90px;
    margin: 20px auto 22px;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.games-slider__arrow-left,
.games-slider__arrow-right {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    font-size: 33px;
    cursor: pointer;
    color: #adadad;
    transition: opacity .1s ease-in-out;
    text-shadow: 0 1px 0 #fff;
}
.games-slider__arrow-left.transparent,
.games-slider__arrow-right.transparent {
    opacity: 0;
}
.games-slider__arrow-left span,
.games-slider__arrow-right span {
    transform: translateX(0);
    transition: transform .1s ease-in-out;
}
.games-slider__arrow-left {
    left: 40px;
}
.games-slider__arrow-left:hover span {
    transform: translateX(-10px);
}
.games-slider__arrow-right {
    right: 40px;
}
.games-slider__arrow-right:hover span {
    transform: translateX(10px);
}
.games-slider__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.games-slider__games {
    padding-top: 25px;
    padding-bottom: 0px;
    white-space: nowrap;
}
.games-slider__games.slide-left .games-slider__game-image,
.games-slider__games.slide-left .games-slider__game-device,
.games-slider__games.slide-left .games-slider__game-name {
    transform-origin: right center;
    transform: rotateY(-35deg);
}
.games-slider__games.slide-right .games-slider__game-image,
.games-slider__games.slide-right .games-slider__game-device,
.games-slider__games.slide-right .games-slider__game-name {
    transform-origin: left center;
    transform: rotateY(35deg);
}
.modal__body .games-slider{
    width: 100%;
}
.games-slider__title {
    margin-top: 18px;
    text-transform: uppercase;
}
.games-slider__categories {
    margin: 20px auto 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.games-slider button,
.matchmaking__options button,
.matchmaking__info button,
.duel__options button,
.duel__info button{
    min-width: 135px;
    height: 34px;
    background-image: linear-gradient(to bottom, rgba(255,255,255,1) 25%, rgba(255,255,255,.0) 54%);
    background-color: #eeeeee;
    box-shadow: 0 1px 4px 1px rgba(0,0,0,.2);
    color: #5a5a5a;
    font-weight: 400;
    font-size: .9em;
    border: 2px solid #dedede;
    display: inline-flex;
    white-space: nowrap;
}
.games-slider button {
    margin: 0 12px;
}
.games-slider span {
    padding-right: 6px;
    font-size: 1.6em;
}
.modal__body .games-slider button:last-child {
    display: none;
}
.games-slider button:hover,
.games-slider button.selected,
.matchmaking__options button:not([disabled]):not(.disabled):hover,
.matchmaking__options button:not([disabled]):not(.disabled).selected,
.matchmaking__info button:not([disabled]):not(.disabled):hover,
.matchmaking__info button:not([disabled]):not(.disabled).selected,
.duel__options button:not([disabled]):not(.disabled):hover,
.duel__options button:not([disabled]):not(.disabled).selected,
.duel__info button:not([disabled]):not(.disabled):hover,
.duel__info button:not([disabled]):not(.disabled).selected {
    color: #fff;
    border: 2px solid #282828;
    background-image: linear-gradient(to bottom, rgba(255,255,255,.3) 20%, rgba(255,255,255,.0) 60%);
    background-color: #282828;
}

.games-slider__search {
    display: inline-block;
    width: 100%;
    max-width: 400px;
}
.games-slider__search input {
    display: inline-block;
    width: 100%;
    height: 35px;
    margin-bottom: 4px;
    padding: 8px 8px 8px 42px;
    color: #666;
    border: 1px solid #ddd;
    background: #fff;
    font: normal 14px/14px 'Lato', Arial, sans-serif;
    vertical-align: middle;
    transition: box-shadow .15s ease-in-out;
}
.games-slider__search input::placeholder {
    color: #aaa;
}
.games-slider__search input::-webkit-input-placeholder {
    color: #aaa;
}
.games-slider__search input::-moz-placeholder {
    color: #aaa;
}
.games-slider__search input:-ms-input-placeholder {
    color: #aaa;
}
.games-slider__search input:-moz-placeholder {
    color: #aaa;
}
.games-slider__search input:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.games-slider__search input:focus {
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
.games-slider__search:before {
    position: absolute;
    content: "\eb33";
    top: 1px;
    left: 1px;
    width: 33px;
    height: 33px;
    padding: 8px 0 0 8px;
    background: #f3f3f3;
    color: #aaa;
    border-right: 1px solid #ddd;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1;
    box-sizing: border-box;
}
.games-slider__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.games-slider__games {
    display: flex;
    flex-flow: row wrap;
    padding-top: 25px;
    padding-bottom: 0px;
    justify-content: center;
}
.games-slider__game {
    transition: transform .2s ease-in-out;
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;
    margin: 10px;
    perspective: 800px;
    cursor: pointer;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
}
.games-slider__game:hover{
    transform: translateY(-7px);
}
.games-slider__game.unselected {
    filter: grayscale(100%);
    opacity: .25;
}
.games-slider__game .games-slider__game-image {
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
}

.games-slider__game .games-slider__game-name {
    font: 700 1em 'Play', Arial, sans-serif;
    line-height: 1em;
    margin-top: 6px;
    z-index: 2;
    color: #000;
    text-align: center;
}

.games-slider__game .games-slider__game-options{
    display: none;
    flex-flow: column nowrap;
}

.games-slider__game .games-slider__game-options .button{
    flex: 1 0 auto;
    height: 38px;
    font-weight: 900;
    font-size: .9em;
    color: #FFCC00;
    margin: 2px 0 0;
}
.games-slider__game .games-slider__game-options .button:hover{
    color: #fff;
    background-image: linear-gradient(to bottom, #b70202 26%, #ab0101 40%, #7D1110 100%);
}
.games-slider__game .games-slider__game-options .button .icon-duel{
    font-size: 28px;
}
.games-slider__game.selected .games-slider__game-options{
    display: flex;
}
.games-slider__game .games-slider__game-device {
    font: 11px 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    color: #838383;
    margin-top: 4px;
    transition: transform .2s ease-in-out;
    z-index: 2;
}
.games-slider__games.game-icons .games-slider__game {
    width: 50px;
    height: 50px;
    margin: 0 4px 20px;
    transition: all .3s ease-in-out;
    filter: grayscale(0);
}
.games-slider__games.game-icons .games-slider__game .games-slider__game-image {
    border: none;
}
.games-slider__games.game-icons .games-slider__game .games-slider__game-name {
    font-size: .7em;
}
.games-slider__games.game-icons .games-slider__game:hover .games-slider__game-image {
    transform: none;
}
.games-slider__games.game-icons .games-slider__game:hover{
    opacity: 1;
}
.games-slider__games.game-icons:before{
    display: block;
    content: " ";
    width: 1px;
    position: absolute;
    left: 76px;
    top: -2px;
    height: 110%;
    background: linear-gradient(0deg, transparent 0%, #d6d6d6 30%, #d6d6d6 70%, transparent 100% );
}
.games-slider__games .play-modal__installable,
.games-slider__games .play-modal__minigames{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    min-height: 82px;
    align-items: center;
    padding: 0 0 0 86px;
}
.games-slider__games .play-modal__installable .section-title,
.games-slider__games .play-modal__minigames .section-title {
    display: flex;
    flex-flow: column nowrap;
    color: #b9b9b9;
    font-size: 1.8em;
    align-items: center;
    justify-content: flex-start;
    font-weight: 600;
    text-transform: uppercase;
    width: 70px;
    padding: 5px 0 0 0;
    text-align: center;
    position: absolute;
    left: 0;
}
.games-slider__games .play-modal__installable .section-title {
    top: 10px;
}
.games-slider__games .play-modal__minigames .section-title {
    top: 2px;
}
.games-slider__games .play-modal__installable .section-title .icon,
.games-slider__games .play-modal__minigames .section-title .icon{
    padding: 0;
    font-size:  1.4em;
}
.games-slider__games .play-modal__installable .section-title .text,
.games-slider__games .play-modal__minigames .section-title .text{
    font-size: .9rem;
    padding: 5px 0 0 0;
    white-space: break-spaces;
    font-weight: 900;
    font-family: 'Play', Arial, sans-serif;
}

.games-slider__viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.games-slider__viewport.scrollbar:hover > .scroll-element .scroll-bar {
    opacity: 0;
}
.games-slider__viewport > .scroll-element.scroll-y {
    display: none;
}

@media (max-width: 1300px) {
    .games-slider__categories button,
    .games-slider__categories button:last-child{
        margin: 0 10px 15px;
    }
    .games-slider__categories button:last-child:before{
        display: none;
    }
}
@media (max-width: 1023px) {
    .games-slider__viewport {
        overflow: auto;
        padding-bottom: 22px;
    }
    .games-slider__games{
        margin-left: 0 !important;
        padding-top: 7px;
        white-space: normal;
        display: flex;
        flex-flow: row wrap;
        height: auto;
    }
    .games-slider__game.selected .games-slider__game-image {
        transform: translateY(-7px);
    }
    .games-slider__game.selected .games-slider__game-options{
        position: absolute;
        width: 100%;
        bottom: -18px;
        left: 0;
    }
    .games-slider span{
        padding: 0;
        font-size: 1.4em;
    }
    .games-slider__game .games-slider__game-options .button{
        height: 24px;
        margin: 0;
        padding-bottom: 2px;
    }
    .games-slider__game .games-slider__game-options .button p{
        display: none;
    }
    .games-slider .scroll-wrapper{
        height: 280px !important;
    }
    .games-slider .scroll-wrapper > .scroll-content{
        max-height: 285px !important;
    }
    .games-slider__game{
        width: 80px;
        height: 80px;
        margin: 12px 7px;
    }
    .games-slider__game .games-slider__game-image {
        max-height: 104px;
    }
}
@media (max-width: 900px) {
    .games-slider {
        padding: 20px 20px 40px;
    }
}
@media (max-width: 767px) {
    .games-slider {
        padding: 10px 2.4vw 0px;
    }
}
@media (min-width: 700px) and (max-width: 1023px) {
    .games-slider{
        padding: 0;
        /*width: 55%;*/
    }
}

.games-slider__game.unselected {
    filter: grayscale(100%);
    opacity: .25;
}
.games-slider__games.game-icons .games-slider__game[data-idgame="show_all"]{
    border: 1px solid #575757;
    margin: 0 10px;
    color: #575757;
    opacity: 1;
    display: none;
    border-radius: 50%;
}
.games-slider__game[data-idgame="show_all"] .games-slider__game-name{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 0;
    font-size: 1em !important;
    white-space: initial;
}

/* NEW GAMES LIST - START */
.games-list__games{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.games-list__game{
    margin: 14px 15px;
    transition: all .3s ease-in-out;
}
.games-list__game:hover{
    filter: brightness(1.3);
}
.games-list__game-image{
    width: 180px;
    height: 180px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.webapp .games-list__game{
    width: 50%;
    margin: 0;
}
.webapp .games-list__game:nth-of-type(odd){
    padding: 2px 2px 2px 0;
}
.webapp .games-list__game:nth-of-type(even){
    padding: 2px 0px 2px 2px;
}
.webapp .games-list__game-image{
    width: 100%;
    height: 100px;
    border-radius: 0;
    box-shadow: none;
}
.webapp .games-list__game-name{
    position: absolute;
    font-size: 1.3rem;
    color: #fff;
    font-weight: 700;
    bottom: 14px;
    left: 14px;
}

@media (max-width: 1300px) {
    .games__content{
        padding: 20px 4px;
    }
    .games-list__game-image{
        width: 120px;
        height: 120px;
    }
}
/* NEW GAMES LIST - END */

.main__title{
    display: block;
    height: auto;
    padding: 0;
    border-top: 0;
    background-color: initial;
    box-shadow: none;
    margin: 0;
    min-height: 0;
    color: #444;
    text-shadow: 0 1px 1px #fff;
    text-align: center;
    font: normal 19px 'Roboto', Arial, sans-serif;
}
.sub__title{
    display: block;
    height: auto;
    padding: 10px 0;
    border-top: 0;
    background-color: initial;
    box-shadow: none;
    margin: 0;
    min-height: 0;
    color: #888;
    text-align: center;
    font: normal 19px 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
    z-index: 2;
}
.sub__title span{
    font-weight: 700;
}

/** How to */
.howto {
    font-size: 1.2em;
    line-height: 1.5em;
}
.howto div{
    padding: 7px 0;
}
.howto h1{
    font-weight: 600;
}
.howto h2{
    font-size: 1.3em;
}
.howto .howto_ul{
    padding: 0 0 0 30px;
    margin: 10px 0;
}
.howto .howto_ul li{
    margin: 8px 0;
}
.howto .icon{
    margin: 0 10px 0 0;
    width: 20px;
    display: inline-block;
    text-align: center;
    vertical-align: -2px;
}
.howto .tutorial-image {
    text-align: center;
}
.howto .tutorial-image img {
    margin: 10px auto 15px;
}

/** Matchmaking */
#matchmaking-search {
    position: fixed;
    left: 82px;
    bottom: 0;
    transition: left .2s ease-in-out;
    z-index: 200;
}
#matchmaking-search.expanded {
    left: 250px;
}
.matchmaking-search__item {
    display: flex;
}
.matchmaking-search__item:hover {
    box-shadow: -2px 0 15px 2px rgba(0, 0, 0, .5);
    z-index: 1;
}
.matchmaking-search__game {
    flex: none;
    display: flex;
    align-items: center;
    border-right: 1px solid #999;
    border-bottom: 0;
    background: #e3e3e3;
    font-size: 0;
}
.matchmaking-search__game img {
    width: 130px;
    height: 130px;
}
.matchmaking-search__item:hover .matchmaking-search__game img {
    width: 200px;
    height: 200px;
}
.matchmaking-search__info {
    background: linear-gradient(to bottom, #111, #000 20%);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.matchmaking-search__info:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: " ";
    width: 50px;
    height: 50px;
    margin: 35px;
    color: #fff;
    border-radius: 50%;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 45px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: 0 3px 0 0 #fff;
    animation: uil-ring-anim 1s linear infinite;
}
.matchmaking-search__item.paused .matchmaking-search__info:before,
.matchmaking-search__item.found .matchmaking-search__info:before {
    border-radius: 0;
    box-shadow: none;
    animation: none;
}
.matchmaking-search__item.paused .matchmaking-search__info:before {
    content: "\ed7f";
}
.matchmaking-search__item.found .matchmaking-search__info:before {
    content: "\ed6f";
    color: #090;
    font-size: 30px;
}
.matchmaking-search__item:hover .matchmaking-search__info {
    display: flex;
    padding: 15px 20px 25px;
    justify-content: space-between;
    overflow: initial;
}
.matchmaking-search__item:hover .matchmaking-search__info:before {
    display: none;
}
.matchmaking-search__info ul {
    margin-bottom: 10px;
}
.matchmaking-search__info ul,
.matchmaking-search__info button {
    display: none;
}
.matchmaking-search__item:hover .matchmaking-search__info ul,
.matchmaking-search__item:hover .matchmaking-search__info button {
    display: block;
}
.matchmaking-search__info ul li {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    font: 16px 'Lato', Arial, sans-serif;
    color: #fff;
    margin: 5px 0;
}
.matchmaking-search__info ul li:first-child {
    display: none;
}
.matchmaking-search__info ul li > div:last-child,
.matchmaking-search__info ul li > span:last-child {
    font-weight: 900;
    margin-left: 5px;
}
.matchmaking-search__info ul li img,
.matchmaking-search__info ul li span.icon {
    margin-right: 9px;
}
@media (max-width: 1023px) {
    #matchmaking-search {
        bottom: 70px;
    }
}
@media (max-width: 767px) {
    #matchmaking-search {
        left: 0;
    }
    .matchmaking-search__item:hover .matchmaking-search__game {
        display: none;
    }
    .matchmaking-search__info ul li:first-child {
        display: block;
    }
}

/* Configuración de chat */
.container__active_channels {
    display: flex;
    padding: 30px;
    justify-content: space-around;
}
.container__active_channels .container__chat .content__container {
    display: flex;
    flex-direction: column;
    margin-top: 18px;
    color: #000;
}
#chatSettings h2{
    margin-bottom: 15px;
    color: #666;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
}
#chatSettings h2:not(:first-child) {
    margin-top: 50px;
}
#chatSettings h2 span.icon {
    padding-right: 8px;
    font-size: 20px;
    line-height: 20px;
    vertical-align: -2px;
}
#chatSettings .container__chat,
#chatSettings .container__filters {
    flex: 1 0 50%;
}
#chatSettings .container__chat:first-child{
    margin-bottom: 20px;
}
#chatSettings h3 {
    padding: 5px 0 10px 25px;
    font-size: 1.3em;
    line-height: 1.3em;
}
#chatSettings label {
    cursor: pointer;
    display: block;
    padding: 5px 0 5px 35px;
    font-size: 15px;
    color: #3d3d3d;
}
#chatSettings img.flag {
    max-height: 20px;
    padding: 0 2px;
    vertical-align: -4px;
}
@media (max-width: 1023px) {
    #chatSettings {
        padding: 20px;
        flex-direction: column;
    }
    #chatSettings .container__chat {
        flex: 0 1 130px;
    }
    #chatSettings h2 span.icon {
        float: left;
    }
    #chatSettings h2 {
        font-size: 14px;
        line-height: 19px;
    }
}
@media (max-width: 1500px) {
    #modal__chat-settings .modal__container {
        width: 60% !important;
    }
}
@media (max-width: 1250px) {
    #modal__chat-settings .modal__container {
        width: 70% !important;
    }
}
@media (max-width: 1050px) {
    #modal__chat-settings .modal__container {
        width: 80% !important;
    }
}
@media (max-width: 950px) {
    #modal__chat-settings .modal__container {
        width: 90% !important;
    }
}

/** Añadir amigo */
#modal__group-add h2 {
    margin-bottom: 15px;
    color: #666;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
}
#modal__group-add h2 span.icon {
    padding-right: 8px;
    font-size: 20px;
    line-height: 20px;
    vertical-align: -2px;
}
#group-add__content {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: space-between;
}
.group-add__friends,
.group-add__search {
    flex: 0 0 50%;
}
.group-add__friends {
    padding: 0 30px 0 5px;
}
#group-add__friends-list {
    max-height: calc(80vh - 145px);
}
#modal__group-add .scrollbar > .scroll-element.scroll-y {
    width: 7px;
}
#modal__group-add .scrollbar > .scroll-element .scroll-element_track {
    display: block;
    height: calc(100% - 3.5px);
    border-radius: 8px;
    background: #e0e0e0;
}
#modal__group-add .scrollbar > .scroll-element.scroll-y .scroll-bar {
    left: 0;
    opacity: .5;
}
#modal__group-add .scrollbar:hover > .scroll-element.scroll-y .scroll-bar {
    opacity: 1;
}
#modal__group-add .user {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}
#modal__group-add .user:hover {
    background: #eee;
    cursor: pointer;
}
#modal__group-add .user,
#modal__group-add .user > div {
    display: flex;
    align-items: center;
    width: 100%;
}
#modal__group-add #group-add__friends-list .user {
    width: calc(100% - 10px);
}
#modal__group-add .user.user-offline > div > div:not(.user__invite) {
    filter: grayscale(100%);
    opacity: .4;
}
#modal__group-add .user:last-child {
    border-bottom: 0;
}
#modal__group-add .avatar__50 .avatar__level {
    width: 30px;
    height: 36px;
    padding-top: 9px;
    font-size: 14px;
}
#modal__group-add .user__status {
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 6px;
    border-radius: 50%;
    background-color: #bf0;
}
#modal__group-add .user__avatar {
    width: 50px;
    height: 50px;
    margin-right: 15px;
}
#modal__group-add .user__username {
    flex: 1 0 auto;
    color: #000;
    font-weight: bold;
}
#modal__group-add .user .user__invite {
    margin-right: 10px;
    padding: 10px 11px;
    color: #000;
    border-radius: 4px;
    background: #fff;
    font-size: 20px;
    line-height: 20px;
    box-shadow: 0 1px 3px rgba(50, 50, 50, .8);
    transition: all .2s ease-in-out;
    opacity: 0;
}
#modal__group-add .user:hover .user__invite {
    margin-right: 0;
    opacity: 1;
}
#modal__group-add .user.user-offline:hover .user__invite {
    opacity: 0;
}
#group-add__content[loading] span.icon-user-plus:before {
    display: inline-block;
    content: "\eb23";
    animation: icon-loading 1s linear infinite;
    cursor: wait;
}
#group-add__search-form input {
    flex: 1 0 auto;
    height: 38px;
    border: 1px solid #c8c8c8;
    padding: 6px 15px;
    font: 13px 'Lato', Arial, sans-serif;
    color: #000;
    margin-bottom: 10px;
    border-radius: 32px;
    background-color: #fff;
}
@media (max-width: 1500px) {
    #modal__group-add .modal__container {
        width: 60% !important;
    }
}
@media (max-width: 1250px) {
    #modal__group-add .modal__container {
        width: 70% !important;
    }
}
@media (max-width: 1050px) {
    #modal__group-add .modal__container {
        width: 80% !important;
    }
}
@media (max-width: 950px) {
    #modal__group-add .modal__container {
        width: 90% !important;
    }
}
@media (max-width: 850px) {
    .group-add__friends {
        padding-right: 10px;
    }
}
@media (max-width: 750px) {
    #group-add__content {
        flex-wrap: wrap;
    }
    .group-add__friends,
    .group-add__search {
        flex-basis: 100%;
    }
    .group-add__friends {
        padding-right: 0;
    }
    #group-add__friends-list {
        max-height: calc(50vh - 145px);
    }
    .group-add__search {
        margin-top: 30px;
    }
}
#modal__group-invite .modal__body {
    padding: 20px 30px;
}
.modal__group-invite-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.modal__group-invite-buttons .button {
    margin: 5px;
}
@media (max-width: 500px) {
    .modal__group-invite-buttons {
        flex-wrap: wrap;
    }
    #modal__group-invite .button {
        display: block;
        width: 100%;
    }
}

/** Aceptar matchmaking */
.modal__matchmaking-accept .modal__body {
    display: flex;
    justify-content: space-between;
    background: #fff;
}
.matchmaking-accept__team1,
.matchmaking-accept__team2 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: calc(50% - 106px);
    padding: 30px;
    text-align: center;
}
.matchmaking-accept__player {
    margin: 20px;
}
.matchmaking-accept__player .avatar__level {
    color: #fff;
}
.matchmaking-accept__team1 .matchmaking-accept__player-avatar {
    opacity: .5;
    filter: gray;
    -webkit-filter: grayscale(100%);
}
.matchmaking-accept__team1 .matchmaking-accept__player-avatar.matchmaking-accept__player-accepted {
    opacity: 1;
    filter: none;
    -webkit-filter: none;
}
.matchmaking-accept__team2 .matchmaking-accept__player-avatar {
    position: relative;
    width: 100px;
    height: 100px;
    background: url(../images/avatars/player-unknown.png) no-repeat top center/100% 100%;
    text-align: center;
    opacity: .5;
}
.matchmaking-accept__player-name {
    margin-top: 20px;
    font-size: 16px;
}
.matchmaking-accept__team2 .matchmaking-accept__player-avatar.matchmaking-accept__player-accepted {
    background-image: url(../images/avatars/player-unknown-green.png);
    opacity: 1;
}
.matchmaking-accept__player-avatar.matchmaking-accept__player-accepted:before {
    position: absolute;
    content: " ";
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 15px 3px rgba(0, 255, 0, .5), inset 0 0 30px 30px rgba(0, 255, 0, .5);
    transform: translateX(-50%);
    animation: animation__matchmaking-accept__player-accepted-before .8s ease-in-out forwards;
    z-index: 2;
}
.matchmaking-accept__team1 .matchmaking-accept__player-avatar.matchmaking-accept__player-accepted:before {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px 3px rgba(255, 0, 0, .5), inset 0 0 30px 30px rgba(255, 0, 0, .5);
    animation: animation__matchmaking-accept__player-free-accepted-before .8s ease-in-out forwards;
}
.matchmaking-accept__team1 .matchmaking-accept__player-avatar.matchmaking-accept__player-vip.matchmaking-accept__player-accepted:before {
    box-shadow: 0 0 15px 3px rgba(255, 255, 0, .5), inset 0 0 30px 30px rgba(255, 255, 0, .5);
    animation: animation__matchmaking-accept__player-vip-accepted-before .8s ease-in-out forwards;
}
@keyframes animation__matchmaking-accept__player-accepted-before {
    to { box-shadow: 0 0 0 0 rgba(0, 255, 0, .5), inset 0 0 0 0 rgba(0, 255, 0, .5); }
}
@keyframes animation__matchmaking-accept__player-free-accepted-before {
    to { box-shadow: 0 0 0 0 rgba(255, 0, 0, .5), inset 0 0 0 0 rgba(255, 0, 0, .5); }
}
@keyframes animation__matchmaking-accept__player-vip-accepted-before {
    to { box-shadow: 0 0 0 0 rgba(255, 255, 0, .5), inset 0 0 0 0 rgba(255, 255, 0, .5); }
}
.matchmaking-accept__player-avatar.matchmaking-accept__player-accepted:after {
    position: absolute;
    content: " ";
    width: 110px;
    height: 1px;
    top: 90px;
    left: 50%;
    border-radius: 1%;
    background: rgba(0, 255, 0, .5);
    box-shadow: 0 0 15px 3px rgba(0, 255, 0, .8);
    transform: translateX(-50%);
    animation: animation__matchmaking-accept__player-accepted-after .8s ease-in-out forwards;
    z-index: 1;
}
.matchmaking-accept__team1 .matchmaking-accept__player-avatar.matchmaking-accept__player-accepted:after {
    background: rgba(255, 0, 0, .5);
    box-shadow: 0 0 15px 3px rgba(255, 0, 0, .5), inset 0 0 30px 30px rgba(255, 0, 0, .5);
}
.matchmaking-accept__team1 .matchmaking-accept__player-avatar.matchmaking-accept__player-vip.matchmaking-accept__player-accepted:after {
    background: rgba(255, 255, 0, .5);
    box-shadow: 0 0 15px 3px rgba(255, 255, 0, .5), inset 0 0 30px 30px rgba(255, 255, 0, .5);
}
@keyframes animation__matchmaking-accept__player-accepted-after {
    to {
        top: 0;
        opacity: 0;
    }
}

.matchmaking-accept__versus {
    background: linear-gradient(to bottom, #424242, #1c1c1c 30%, #000);
    padding: 90px 10px 10px;
    min-width: 210px;
    box-sizing: border-box;
    position: relative;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.matchmaking-accept__game {
    position: absolute;
    top: -88px;
    left: 50%;
    transform: translateX(-50%);
    width: 128px;
    height: 128px;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #696969, #6e6e6e);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
}
.matchmaking-accept__game:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background-color: #e3e3e3;
    box-shadow: inset 0 7px 8px 0 rgba(0, 0, 0, .7);
}
.matchmaking-accept__game img {
    flex: none;
    position: relative;
    max-width: 50%;
    max-height: 50%;
}
.matchmaking-accept__game-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 35px;
}
.matchmaking-accept__game-info-name {
    text-transform: uppercase;
    font: 16px 'Roboto', Arial, sans-serif;
    position: relative;
}
.matchmaking-accept__game-info-name:before,
.matchmaking-accept__game-info-name:after {
    content: '';
    width: calc((174px - 100%) / 2);
    height: 1px;
    background-color: #8b8b8b;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.matchmaking-accept__game-info-name:before {
    left: -8px;
    transform: translateX(-100%);
}
.matchmaking-accept__game-info-name:after {
    right: -8px;
    transform: translateX(100%);
}
.matchmaking-accept__game-info-teamsize {
    font: 700 28px 'Lato', Arial, sans-serif;
    margin-top: -5px;
}

.matchmaking-accept__prize-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 35px;
}
.matchmaking-accept__prize-info-title {
    text-transform: uppercase;
    font: 16px 'Roboto', Arial, sans-serif;
    position: relative;
}
.matchmaking-accept__prize-info-title:before,
.matchmaking-accept__prize-info-title:after {
    content: '';
    width: calc((174px - 100%) / 2);
    height: 1px;
    background-color: #8b8b8b;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.matchmaking-accept__prize-info-title:before {
    left: -8px;
    transform: translateX(-100%);
}
.matchmaking-accept__prize-info-title:after {
    right: -8px;
    transform: translateX(100%);
}
.matchmaking-accept__prize-info-amount {
    font: 700 24px 'Lato', Arial, sans-serif;
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.matchmaking-accept__timeleft {
    background-color: #1a1a1a;
    width: 138px;
    height: 138px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    position: relative;
}
.matchmaking-accept__timeleft svg {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 138px;
    height: 138px;
    fill: none;
    transform: translate(50%, -50%) rotateY(0deg) rotateZ(-90deg);
}
.matchmaking-accept__timeleft svg circle {
    stroke-dasharray: 421px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 2px;
    stroke: #fff;
    fill: none;
}
#matchmaking-accept__timeleft-number {
    font: 50px 'Lato', Arial, sans-serif;
    position: relative;
    z-index: 1;
}
#matchmaking-accept__timeleft-info {
    display: none;
    margin: 0 10px 10px;
    font-size: 16px;
    line-height: 18px;
}
@keyframes matchmaking-accept__countdown {
    to { stroke-dashoffset: 421px; }
}
@media (max-width: 1680px) {
    #modal__matchmaking-accept .modal__container {
        width: 80% !important;
    }
}
@media (max-width: 1580px) {
    #modal__matchmaking-accept .modal__container {
        width: 90% !important;
    }
}
@media (max-width: 1420px) {
    #modal__matchmaking-accept .modal__container {
        width: 95% !important;
    }
}
@media (max-width: 1080px) {
    .matchmaking-accept__player {
        margin: 10px;
    }
    .matchmaking-accept__player-name {
        margin-top: 10px;
    }
    .matchmaking-accept__team1,
    .matchmaking-accept__team2 {
        padding: 30px 10px;
    }
    .matchmaking-accept__team1 .matchmaking-accept__player-avatar,
    .matchmaking-accept__team2 .matchmaking-accept__player-avatar {
        width: 70px;
        height: 70px;
    }
    .matchmaking-accept__team1 .matchmaking-accept__player-avatar .avatar__100:before {
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        border-width: 5px;
    }
    .matchmaking-accept__player-avatar.matchmaking-accept__player-accepted:before {
        width: 60px;
        height: 60px;
    }
    .matchmaking-accept__team1 .matchmaking-accept__player-avatar.matchmaking-accept__player-accepted:before {
        width: 70px;
        height: 70px;
    }
    .matchmaking-accept__player-avatar.matchmaking-accept__player-accepted:after {
        width: 70px;
        top: 60px;
    }
}
@media (max-width: 767px) {
    .matchmaking-accept__team1,
    .matchmaking-accept__team2 {
        display: none;
    }
    .matchmaking-accept__versus {
        width: 100%;
        padding: 20px 3.43vw;
        align-items: center;
    }
    .matchmaking-accept__game {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        margin-bottom: 20px;
    }
}

/** Duels accept */
.modal__duel-accept .modal__body {
    display: flex;
    justify-content: space-between;
    background: #fff;
}
.modal__duel-accept .modal__body .title{
    padding: 10px 15px;
    align-items: center;
    position: absolute;
    font-size: 1.8rem;
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 600;
}
.modal__duel-accept .tooltip-box {
    display: inline-block;
    margin-left: 3px;
}
.duel-accept__team1,
.duel-accept__team2 {
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    width: calc(50% - 106px);
    padding: 30px;
    text-align: left;
    align-items: flex-start;
}
.duel-accept__team2{
    align-items: flex-end;
    text-align: right;
}
.duel-accept__team1 button,
.duel-accept__team2 button{
    margin: 10px 0;
}
/*
.duel-accept__team1 button,
.duel-accept__team2 button{
    height: 36px;
    margin: 10px auto 0;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(to bottom, #b70202 26%, #ab0101 40%, #7D1110 100%);
    box-shadow: 0 2px 5px 1px rgba(0,0,0,.2);
    transition: none;
}

.duel-accept__team1 button{
    color: #5a5a5a;
    background: linear-gradient(to bottom, #fff 26%, #efefef 40%, #dedede 100%);
}
.duel-accept__team1 button .icon,
.duel-accept__team2 button .icon{
    font-size: 18px;
    padding-right: 10px;
}
.duel-accept__team1 button:hover,
.duel-accept__team2 button:hover{
    background: linear-gradient(to bottom, #d10101 26%, #bd0000 40%, #951615 100%);
}
*/
.duel-accept__team1 input[type="number"],
.duel-accept__team2 input[type="number"]{
    -moz-appearance: textfield;
    padding: 5px 10px;
    text-align: right;
    font-size: 1.6rem;
    width: 140px;
    font-weight: 600;
}
.duel-accept__team1 input[type="number"].fc,
.duel-accept__team2 input[type="number"].fc{
    color: #799090;
}
.duel-accept__team1 input[type="number"].oc,
.duel-accept__team2 input[type="number"].oc{
    color: #297d01;
}

.duel-accept__team1 label,
.duel-accept__team2 label{
    width: 200px;
    margin: 10px 0 0;
    text-align: right;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
}
.duel-accept__player {
    margin: 10px 0;
    height: 130px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.duel-accept__team1 .duel-accept__player .column{
    align-items: flex-start;
    order: 2;
}
.duel-accept__team2 .duel-accept__player .column{
    align-items: flex-end;
    order: 1;
}
.duel-accept__player .avatar__level {
    color: #fff;
}
.duel-accept__team1 .duel-accept__player-avatar.duel-accept__player-accepted {
    opacity: 1;
    filter: none;
    -webkit-filter: none;
}
.duel-accept__team1 .duel-accept__player-avatar{
    margin: 0 14px 0 0;
    order: 1;
}
.duel-accept__team2 .duel-accept__player-avatar{
    margin: 0 0 0 10px;
    order: 2;
}

.duel-accept__team1 .duel-accept__duel-info,
.duel-accept__team2 .duel-accept__duel-info{
    font-size: 1.2rem;
    line-height: 1em;
    padding: 0;
    margin: 10px 0;
}
.duel-accept__team1 .duel-accept__duel-info .icon,
.duel-accept__team2 .duel-accept__duel-info .icon {
    font-size: 30px;
    margin: 0 5px 0 0;
    position: absolute;
    top: -3px;
    left: 0px;
    color: #9d9d9d;
}
.duel-accept__team1 .duel-accept__duel-info .coins__oc,
.duel-accept__team2 .duel-accept__duel-info .coins__oc {
    vertical-align: -1px;
}
.duel-accept__player-name {
    font-size: 1.4rem;
    font-weight: 900;
    padding: 0;
}
.duel-accept__player-mmr {
    margin-top: 5px;
    font-size: 1.2rem;
    font-weight: 700;
    padding: 0;
}
.duel-accept__team2 .duel-accept__player-avatar.duel-accept__player-accepted {
    opacity: 1;
}
.duel-accept__player-avatar.duel-accept__player-accepted:before {
    position: absolute;
    content: " ";
    width: 100px;
    height: 100px;
    top: 0;
    left: 50%;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 15px 3px rgba(0, 255, 0, .5), inset 0 0 30px 30px rgba(0, 255, 0, .5);
    transform: translateX(-50%);
    animation: animation__duel-accept__player-accepted-before .8s ease-in-out forwards;
    z-index: 2;
}
.duel-accept__team1 .duel-accept__player-avatar.duel-accept__player-accepted:before {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 15px 3px rgba(255, 0, 0, .5), inset 0 0 30px 30px rgba(255, 0, 0, .5);
    animation: animation__duel-accept__player-free-accepted-before .8s ease-in-out forwards;
}
.duel-accept__team1 .duel-accept__player-avatar.duel-accept__player-vip.duel-accept__player-accepted:before {
    box-shadow: 0 0 15px 3px rgba(255, 255, 0, .5), inset 0 0 30px 30px rgba(255, 255, 0, .5);
    animation: animation__duel-accept__player-vip-accepted-before .8s ease-in-out forwards;
}
@keyframes animation__duel-accept__player-accepted-before {
    to { box-shadow: 0 0 0 0 rgba(0, 255, 0, .5), inset 0 0 0 0 rgba(0, 255, 0, .5); }
}
@keyframes animation__duel-accept__player-free-accepted-before {
    to { box-shadow: 0 0 0 0 rgba(255, 0, 0, .5), inset 0 0 0 0 rgba(255, 0, 0, .5); }
}
@keyframes animation__duel-accept__player-vip-accepted-before {
    to { box-shadow: 0 0 0 0 rgba(255, 255, 0, .5), inset 0 0 0 0 rgba(255, 255, 0, .5); }
}
.duel-accept__player-avatar.duel-accept__player-accepted:after {
    position: absolute;
    content: " ";
    width: 110px;
    height: 1px;
    top: 90px;
    left: 50%;
    border-radius: 1%;
    background: rgba(0, 255, 0, .5);
    box-shadow: 0 0 15px 3px rgba(0, 255, 0, .8);
    transform: translateX(-50%);
    animation: animation__duel-accept__player-accepted-after .8s ease-in-out forwards;
    z-index: 1;
}
.duel-accept__team1 .duel-accept__player-avatar.duel-accept__player-accepted:after {
    background: rgba(255, 0, 0, .5);
    box-shadow: 0 0 15px 3px rgba(255, 0, 0, .5), inset 0 0 30px 30px rgba(255, 0, 0, .5);
}
.duel-accept__team1 .duel-accept__player-avatar.duel-accept__player-vip.duel-accept__player-accepted:after {
    background: rgba(255, 255, 0, .5);
    box-shadow: 0 0 15px 3px rgba(255, 255, 0, .5), inset 0 0 30px 30px rgba(255, 255, 0, .5);
}
@keyframes animation__duel-accept__player-accepted-after {
    to {
        top: 0;
        opacity: 0;
    }
}
.duel-accept__versus {
    padding: 100px 10px 10px;
    min-width: 210px;
    text-align: center;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #cbcbcb;
    border-left: 1px solid #cbcbcb;
}
.duel-accept__game {
    position: absolute;
    top: -68px;
    left: 50%;
    transform: translateX(-50%);
    width: 138px;
    height: 138px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.duel-accept__game img {
    flex: none;
    position: relative;
}
.duel-accept__game-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 35px;
}
.duel-accept__game-info-name {
    text-transform: uppercase;
    font: 16px 'Roboto', Arial, sans-serif;
    position: relative;
}
.duel-accept__game-info-name:before,
.duel-accept__game-info-name:after {
    content: '';
    width: calc((174px - 100%) / 2);
    height: 1px;
    background-color: #8b8b8b;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.duel-accept__game-info-name:before {
    left: -8px;
    transform: translateX(-100%);
}
.duel-accept__game-info-name:after {
    right: -8px;
    transform: translateX(100%);
}
.duel-accept__game-info-teamsize {
    font: 700 28px 'Lato', Arial, sans-serif;
    margin-top: -5px;
}
.duel-accept__prize-info {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 35px;
}
.duel-accept__prize-info-title {
    margin: 10px auto 0;
    font-size: 1.7rem;
    font-weight: 900;
    font-family: 'Lato', Arial, sans-serif;
    position: relative;
}
.duel-accept__prize-info-amount {
    margin-top: 6px;
    font-size: 2.23rem;
    display: flex;
    align-items: center;
}
.duel-accept__timeleft,
.invite-accept__timeleft {
    background-color: #1a1a1a;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px;
    position: relative;
}
.invite-accept__timeleft {
    background-color: #fff;
    width: 92px;
    height: 92px;
}
.duel-accept__timeleft svg,
.invite-accept__timeleft svg {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 104px;
    height: 104px;
    fill: none;
    transform: translate(50%, -50%) rotateY(0deg) rotateZ(-90deg);
}
.invite-accept__timeleft svg {
    width: 92px;
    height: 92px;
}
.duel-accept__timeleft svg circle,
.invite-accept__timeleft svg circle{
    stroke-dasharray: 420px;
    stroke-dashoffset: 100px;
    stroke-linecap: round;
    stroke-width: 3px;
    stroke: #ff002f;
    fill: none;
}
.invite-accept__timeleft svg circle{
    stroke-dasharray: 290px;
    stroke: #ff002f;
}
#duel-accept__timeleft-number,
#invite-accept__timeleft-number {
    font: 3rem 'Lato', Arial, sans-serif;
    position: relative;
    color: #ff002f;
    z-index: 1;
}
#duel-accept__timeleft-info {
    display: none;
    margin: 0 10px 10px;
    font-size: 1.2rem;
}
#duel-accept__button,
#duel-reject__button{
    width: calc(100% - 20px);
    margin: 10px 10px 5px;
    font-size: 1.2rem;
    text-transform: none;
}
.duel-accept__duel-settings {
    margin-top: 30px;
}
.duel-accept__duel-settings h2 {
    margin-bottom: 10px;
    line-height: 1em;
    font-size: 1.2em;
    font-weight: 600;
}
.duel-accept__duel-settings label {
    justify-content: flex-start;
    margin: 10px 0 0 0px;
}
.duel-accept__duel-settings input {
    margin-right: 5px;
}
@keyframes duel-accept__countdown {
    to { stroke-dashoffset: 420px; }
}
.duel__countdown-animation{
    animation: duel-accept__countdown 30s linear forwards;
}
@keyframes invite__countdown-animation {
    to { stroke-dashoffset: 290px; }
}
.invite__countdown-animation{
    animation: invite__countdown-animation 30s linear forwards;
}


@media (max-width: 800px) {
    .modal__duel-accept .modal__body {
        flex-flow: column wrap;
        align-items: center;
    }
    .duel-accept__team1,
    .duel-accept__team2 {
        flex: 1 0 100%;
        justify-content: center;
        align-items: center;
        padding: 10px;
        width: auto;
    }
    .duel-accept__team1{
        margin: 30px 0 0 0;
    }
    .duel-accept__versus {
        width: 100%;
        padding: 10px;
        align-items: center;
        flex-flow: row wrap;
    }
    .duel-accept__duel-settings{
        margin-top: 8px;
    }
    .duel-accept__game {
        position: relative;
        transform: none;
        top: auto;
        left: auto;
        margin-bottom: 5px;
        width: 104px;
        height: auto;
    }
    .duel-accept__prize-info,
    .duel-accept__timeleft,
    .invite-accept__timeleft{
        margin-bottom: 5px;
    }

    .duel-accept__player{
        height: 100px;
    }
}

/** Modal */
html.modal__open, body.modal__open {
    overflow: hidden;
}
body.modal__open > header > *,
body.modal__open > header:before,
body.modal__open > main,
body.modal__open > aside,
body.modal__open > footer,
body.modal__open > div.sidebar-games,
body.modal__open > div.sidebar-admin {
    filter: blur(5px);
}
body.modal__open > header {
    background-color: transparent;
}
body.modal__open > header:before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #160a1e;
    z-index: -1;
}

.modal {
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #000;
    background: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: opacity .25s ease-in-out, z-index .1s ease-in-out .25s;
    z-index: -1;
}
body.webapp .modal{
    background: rgba(0, 10, 40, .75);
}
body.webapp .modal .button .icon{
    display: none;
}
body.webapp .modal .button{
    height: 40px;
}
.modal.modal__open {
    opacity: 1;
    z-index: 200;
}
.modal.modal__open .modal__container {
    margin-top: 0;
}
.modal .modal__container {
    position: relative;
    display: flex;
    align-items: center;
    width: 80%;
    max-width: 90%;
    margin: -50px auto 0;
    padding: 5vh 0;
    transition: margin-top .4s ease-in-out;
}
.modal .modal__container:before {
    display: block;
    content: '';
    height: 90vh;
}
.modal .modal__container.modal-width-auto {
    width: auto;
    min-width: auto;
}
.modal .modal__content {
    width: 100%;
    margin: 0 auto;
}
.modal .modal__container.modal-width-auto .modal__content {
    width: auto;
}
.modal .modal__title {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
    padding: 15px 80px 12px 20px;
    color: #dbdbdb;
    border-bottom: 1px solid #c8c8c8;
    border-radius: 6px 6px 0 0;
    font-family: 'Play', Arial, sans-serif;
    font-size: 1.5em;
    line-height: 1.1em;
    font-weight: 700;
    background-color: #3b3b3b;
    text-transform: none;
}
.modal .modal__title span.icon:not(.modal__close),
.modal .modal__title img {
    display: inline-block;
    margin: -4px 0;
    padding-right: 8px;
    font-size: 26px;
    vertical-align: -4px;
}
.modal .modal__title img {
    margin: -6px 0;
}
.modal h1.modal__title strong {
    padding: 0;
}
.modal .modal__title .modal__close,
.modal div.modal__close {
    position: absolute;
    padding: 14px 15px;
    top: 0;
    right: 0;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 1;
}
.modal .modal__title .modal__close {
    transition: color .15s ease-in-out;
}
.modal .modal__title .modal__close:hover {
    color: #f1f1f1;
}
.modal div.modal__close {
    padding: 17px 17px;
}
.modal div.modal__close span.icon {
    font-weight: bold;
    font-size: 1em;
    color: #888;
}
.modal .modal__body {
    position: relative;
    padding: 30px 40px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: #e4e7ec;
    z-index: 3;
}
.modal .modal__body.modal__body-notitle {
    border-radius: 18px;
}
body.webapp .modal .modal__body.modal__body-notitle {
    border-radius: 8px;
    padding: 10px;
}
body.webapp .modal#modal__iframe .modal__body.modal__body-notitle {
    border-radius: 0;
    padding: 0;
}
.modal .modal__body .field__title {
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 10px;
}
.modal .modal__body .field__body {
    margin-bottom: 30px;
}
.modal .modal__body.modal-nopadding {
    padding: 0;
}
.modal .modal__body.modal-nopadding .message-box {
    width: 100%;
    max-width: none;
    margin: 0 auto;
}
.modal__message-box {
    padding: 30px 40px;
}
.modal .modal__body img {
    max-width: 100%;
}

body.webapp .modal .modal__body img.webapp-modal-image {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
}
body.webapp .modal .modal__body .avatar.avatar__image img{
    width: 50px;
    height: 50px;
}

.modal#modal__game-account .profile__general-container{
    padding: 0;
}
.modal#modal__game-account .profile__general-container .box{
    margin: 0;
}
@media (max-width: 1300px) {
    .modal__container {
        width: 90% !important;
    }
}
@media (max-width: 900px) {
    .modal__container {
        width: 90% !important;
    }
    .modal .modal__title{
        font-size: 1.4rem;
    }
}
.game-fullscreen #modal__iframe .modal__container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    padding: 0 !important;
}
.game-fullscreen #modal__iframe.rotated .modal__container {
    overflow: hidden;
}
.game-fullscreen #modal__iframe iframe {
    width: 100vw !important;
    height: 100vh !important;
}
.game-fullscreen #modal__iframe.rotated iframe {
    position: fixed;
    width: 100vh !important;
    height: 100vw !important;
    top: 50%;
    left: 50%;
    transform: rotate(90deg) translate(-50%, -50%);
    transform-origin: 0 0;
}

body.webapp.game-fullscreen .modal .modal__body.modal__body-notitle{
    padding: 0;
}

.body__iframe .message-box {
    width: 100%;
    max-width: none;
    margin: 0 auto;
}
.modal.modal__open.modal__alert,
.modal.modal__open.modal__confirm {
    z-index: 210;
}
.alert__body {
    padding: 10px 20px 25px;
}
.alert__subtitle {
    margin-bottom: 20px;
    font-weight: lighter;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
    text-transform: uppercase;
}
.alert__success {
    color: #090;
}
.alert__error {
    color: #c00;
}
.alert__content {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}
.alert__image {
    padding-right: 15px;
}
.alert__message {
    width: 100%;
    color: #666;
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: center;
}
.alert__buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.alert__buttons button {
    margin: 10px;
}
body.webapp .alert__buttons button{
    flex: 0 1 auto;
    width: auto;
    min-width: 120px;
    margin: 10px auto;
}
.alert__input-message {
    margin-bottom: 10px;
}
.alert__input-submessage {
    margin: 20px 0 10px;
}

@media (max-width: 480px) {
    .alert__buttons button {
        width: 100%;
    }
}

.ocgames_banner_small{
    width: 100%;
}

/** Gamificación */
.gamification__item {
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-right: -4px;
    background: url(../images/gamification/items/item-background.png) no-repeat center center/100% 300%;
    text-align: center;
    cursor: pointer;
    z-index: 1;
}
.gamification__item:before {
    display: inline-block;
    content: " ";
    width: 0;
    height: 100%;
    vertical-align: middle;
}
.gamification__item img {
    max-width: 93%;
    vertical-align: middle;
}
.gamification__item-noslot {
    opacity: .4;
    cursor: auto;
}
.gamification__item-noslot {
    background-position: center top;
}
.profile-inventory__character .gamification__item-noslot {
    background-position: center center;
}
.gamification__item-active,
.profile-inventory__character .gamification__item-active {
    opacity: 1;
    background-position: center bottom;
}
.gamification__item-rarity-1:after,
.gamification__item-rarity-2:after,
.gamification__item-rarity-3:after,
.gamification__item-rarity-4:after,
.gamification__item-rarity-5:after {
    position: absolute;
    display: block;
    content: " ";
    width: 112px;
    height: 112px;
    top: 4px;
    left: 4px;
    background: url(../images/gamification/items/item-rarities.png) no-repeat center top/100% 560px;
    z-index: -1;
}
.gamification__item-rarity-1:after {
    background-position: center top;
}
.gamification__item-rarity-2:after {
    background-position: center -112px;
}
.gamification__item-rarity-3:after {
    background-position: center -224px;
}
.gamification__item-rarity-4:after {
    background-position: center -336px;
}
.gamification__item-rarity-5:after {
    background-position: center -448px;
}
.gamification__item-dragging {
    opacity: .5;
    filter: blur(2px);
}
.gamification__item-helper {
    z-index: 5;
}

.gamification__item-tooltip {
    position: absolute;
    width: 350px;
    padding: 8px;
    top: 0;
    left: 0;
    border: 4px solid #eee;
    border-right-color: #bbb;
    border-bottom-color: #bbb;
    background: #000;
    font-family: 'Roboto', Arial, sans-serif;
    z-index: 100;
}
.gamification__item-tooltip:before,
.gamification__item-tooltip:after {
    position: absolute;
    width: 30px;
    height: 30px;
    content: " ";
    background: url(../images/gamification/items/tooltip-corner.png) no-repeat center center/100% 100%;
    pointer-events: none;
    z-index: 2;
}
.gamification__item-tooltip:before {
    bottom: -4px;
    left: -4px;
}
.gamification__item-tooltip:after {
    top: -4px;
    right: -4px;
    transform: rotateX(180deg) rotateZ(-90deg);
}
.gamification__item-tooltip-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -1;
}
.gamification__item-tooltip-frame:before,
.gamification__item-tooltip-frame:after {
    position: absolute;
    content: " ";
    border: 24px solid transparent;
    transform: rotate(-45deg);
    z-index: -1;
}
.gamification__item-tooltip-frame:before {
    bottom: -22px;
    left: -22px;
    border-right-color: #000;
}
.gamification__item-tooltip-frame:after {
    top: -22px;
    right: -22px;
    border-left-color: #000;
}
.gamification__item-tooltip-rarity-1 {
    color: #fff;
}
.gamification__item-tooltip-rarity-2 {
    color: #00b700;
}
.gamification__item-tooltip-rarity-3 {
    color: #0060ff;
}
.gamification__item-tooltip-rarity-4 {
    color: #c222ff;
}
.gamification__item-tooltip-rarity-5 {
    color: #c30;
}
.gamification__item-tooltip-info {
    width: 100%;
    padding: 12px;
    z-index: -2;
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-1 {
    background: linear-gradient(to bottom, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05) 15%, rgba(255, 255, 255, .05) 85%, rgba(255, 255, 255, .45));
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-2 {
    background: linear-gradient(to bottom, rgba(0, 183, 0, .45), rgba(0, 183, 0, .05) 15%, rgba(0, 183, 0, .05) 85%, rgba(0, 183, 0, .45));
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-3 {
    background: linear-gradient(to bottom, rgba(0, 96, 255, .45), rgba(0, 96, 255, .05) 15%, rgba(0, 96, 255, .05) 85%, rgba(0, 96, 255, .45));
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-4 {
    background: linear-gradient(to bottom, rgba(194, 34, 255, .45), rgba(194, 34, 255, .05) 15%, rgba(194, 34, 255, .05) 85%, rgba(194, 34, 255, .45));
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-5 {
    background: linear-gradient(to bottom, rgba(204, 51, 0, .45), rgba(204, 51, 0, .05) 15%, rgba(204, 51, 0, .05) 85%, rgba(204, 51, 0, .45));
}
@keyframes gamification-tooltip-background {
    to { transform: rotate(-360deg); }
}
@keyframes gamification-tooltip-background-flash {
    0.2% { opacity: 1; }
    0.4% { opacity: 0; }
    1% { opacity: 0; }
    1.2% { opacity: 1; }
    1.4% { opacity: .5; }
    12.5% { opacity: 0; }
}
.gamification__item-tooltip-info:before,
.gamification__item-tooltip-info:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.gamification__item-tooltip-info:before {
    animation: gamification-tooltip-background 40s linear infinite;
    opacity: .3;
    z-index: -2;
}
.gamification__item-tooltip-info:after {
    animation: gamification-tooltip-background 40s linear 2s infinite, gamification-tooltip-background-flash 8s linear 1s infinite;
    opacity: 0;
    z-index: -1;
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-1:before,
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-1:after {
    background: url(../images/gamification/items/rarities/1.png) no-repeat center center;
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-2:before,
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-2:after {
    background: url(../images/gamification/items/rarities/2.png) no-repeat center center;
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-3:before,
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-3:after {
    background: url(../images/gamification/items/rarities/3.png) no-repeat center center;
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-4:before,
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-4:after {
    background: url(../images/gamification/items/rarities/4.png) no-repeat center center;
}
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-5:before,
.gamification__item-tooltip-info.gamification__item-tooltip-rarity-5:after {
    background: url(../images/gamification/items/rarities/5.png) no-repeat center center;
}
.gamification__item-tooltip-name {
    position: static;
    margin-bottom: 3px;
    padding-right: 5px;
    font-family: 'Ringbearer', 'Roboto', Arial, sans-serif;
    font-size: 28px;
    line-height: 28px;
    text-transform: lowercase;
}
.gamification__item-tooltip-name:before,
.gamification__item-tooltip-name:after {
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    left: 0;
    z-index: 1;
}
.gamification__item-tooltip-name:before {
    top: 0;
}
.gamification__item-tooltip-name:after {
    bottom: 0;
}
.gamification__item-tooltip-rarity-1 .gamification__item-tooltip-name:before,
.gamification__item-tooltip-rarity-1 .gamification__item-tooltip-name:after {
    background: linear-gradient(to right, transparent, #fff, transparent);
}
.gamification__item-tooltip-rarity-2 .gamification__item-tooltip-name:before,
.gamification__item-tooltip-rarity-2 .gamification__item-tooltip-name:after {
    background: linear-gradient(to right, transparent, #00b700, transparent);
}
.gamification__item-tooltip-rarity-3 .gamification__item-tooltip-name:before,
.gamification__item-tooltip-rarity-3 .gamification__item-tooltip-name:after {
    background: linear-gradient(to right, transparent, #0060ff, transparent);
}
.gamification__item-tooltip-rarity-4 .gamification__item-tooltip-name:before,
.gamification__item-tooltip-rarity-4 .gamification__item-tooltip-name:after {
    background: linear-gradient(to right, transparent, #c222ff, transparent);
}
.gamification__item-tooltip-rarity-5 .gamification__item-tooltip-name:before,
.gamification__item-tooltip-rarity-5 .gamification__item-tooltip-name:after {
    background: linear-gradient(to right, transparent, #c30, transparent);
}
.gamification__item-tooltip-rarity {
    margin-bottom: 15px;
    padding-bottom: 12px;
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
}
.gamification__item-tooltip-rarity:before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
}
.gamification__item-tooltip-rarity-1 .gamification__item-tooltip-rarity:before {
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, .25), transparent);
}
.gamification__item-tooltip-rarity-2 .gamification__item-tooltip-rarity:before {
    background: linear-gradient(to right, transparent, rgba(0, 183, 0, .25), transparent);
}
.gamification__item-tooltip-rarity-3 .gamification__item-tooltip-rarity:before {
    background: linear-gradient(to right, transparent, rgba(0, 96, 255, .25), transparent);
}
.gamification__item-tooltip-rarity-4 .gamification__item-tooltip-rarity:before {
    background: linear-gradient(to right, transparent, rgba(194, 34, 255, .25), transparent);
}
.gamification__item-tooltip-rarity-5 .gamification__item-tooltip-rarity:before {
    background: linear-gradient(to right, transparent, rgba(204, 51, 0, .25), transparent);
}
.gamification__item-tooltip-secondary-stats,
.gamification__item-tooltip-primary-stats {
    display: inline-block;
    width: 50%;
    margin: 0 -4px 20px 0;
    padding: 0 5px;
    vertical-align: top;
}
.gamification__item-tooltip-secondary-stats {
    text-align: left;
}
.gamification__item-tooltip-primary-stats {
    text-align: right;
}
.gamification__item-tooltip-stats-title {
    margin-bottom: 10px;
    color: rgba(200, 200, 200, .4);
    font-size: 16px;
    line-height: 16px;
    text-transform: uppercase;
}
.gamification__item-tooltip-secondary-stats .gamification__item-tooltip-stat {
    margin-bottom: 8px;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: .8px;
}
.gamification__item-tooltip-secondary-stats .gamification__item-tooltip-stat span {
    padding: 0 10px 0 5px;
    font-size: 14px;
    line-height: 14px;
}
.gamification__item-tooltip-primary-stats .gamification__item-tooltip-stat {
    margin-bottom: 20px;
    font-size: 60px;
    line-height: 60px;
}
.gamification__item-tooltip-primary-stats .gamification__item-tooltip-stat:after {
    position: absolute;
    content: attr(data-value);
    right: 0;
    bottom: -39px;
    font-size: 60px;
    line-height: 60px;
    color: rgba(220, 220, 220, .06);
    transform: rotateX(180deg);
}
.gamification__item-tooltip-level,
.gamification__item-tooltip-value {
    margin-top: 5px;
    color: #fff;
    text-align: center;
    font-size: 15.01px;
    line-height: 15px;
}
.gamification__item-tooltip-level span:first-child,
.gamification__item-tooltip-value span:first-child {
    padding-right: 5px;
    color: #aaa;
}
.gamification__item-tooltip-level-insufficient {
    color: #d20000;
    font-weight: bold;
}
.gamification__item-tooltip-level-insufficient span:first-child {
    color: #d20000;
    font-weight: bold;
}

/** Configuración */
.config__form {
    display: none;
}

/** Login/register modal */
#modal__login .modal__container{
    width: 30%;
    min-width: 550px;
}
#modal__login .modal__body{
    border-radius: 6px;
    overflow: hidden;
    background-color: #fff;
}
#modal__login .form__checkbox:not(input){
    font-size: 14px;
}
#modal__login .button-reflect,
#modal__login .button-prehome {
    font-family: 'Play', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    height: 56px;
    min-width: auto;
    letter-spacing: .08em;
}
#modal__login .button.button-green {
    background: #009d00;
}
#modal__login .button.button-green:not([disabled]):not(.disabled):hover {
    background: #00c800;
}

.login__header {
    padding: 0 0 30px;
    color: #160A1F;
    font-weight: 900;
    line-height: 2rem;
    font-size: 2rem;
}
/*
.login__header:before {
    position: absolute;
    content: " ";
    width: 97px;
    height: 54px;
    top: 0;
    left: 0;
    background: url(../images/logo-login.png) no-repeat left top;
    z-index: 1;
}
*/
.login__header span {
    display: block;
    font-weight: 900;
    font-size: 22px;
}

.login__motd:before {
    position: absolute;
    width: 135px;
    height: 1px;
    top: -5px;
    left: -10px;
    content: " ";
    background: #b2b2b2;
    font-size: 0;
}
.login__motd {
    position: relative;
    margin: 10px 0 0;
    font-weight: bold;
    font-style: italic;
    text-transform: none;
}
.login__facebook,
.login__twitter,
.login__google {
    display: inline-block;
    width: 100%;
    padding: 12px 10px 12px 14%;
    margin: 0 0 8px;
    color: #fff;
    border: 0;
    font: bold 15px/15px 'Lato', Arial, sans-serif;
    text-align: left;
    text-transform: uppercase;
}
.login__facebook span.icon,
.login__twitter span.icon,
.login__google span.icon {
    padding-right: 10px;
}
.login__facebook {
    border-bottom: 3px solid #354a77;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .3) 0%, transparent 50%), linear-gradient(to bottom, #435c94 50%, #50679b 50%);
}
.login__twitter {
    border-bottom: 3px solid #1b8eab;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .3) 0%, transparent 50%), linear-gradient(to bottom, #000 50%, #000 50%);
}
.login__google {
    border-bottom: 3px solid #8c2819;
    background: radial-gradient(circle at center, rgba(255, 255, 255, .3) 0%, transparent 50%), linear-gradient(to bottom, #aa3120 50%, #b03f2f 50%);
}
.login__facebook:hover,
.login__twitter:hover,
.login__google:hover,
.login__facebook:focus,
.login__twitter:focus,
.login__google:focus {
    margin-top: 2px;
    border-bottom-width: 1px;
}
.login__facebook:active,
.login__twitter:active,
.login__google:active {
    margin-top: 3px;
    border-bottom-width: 0px;
}
.login__form {
    position: initial;
    padding-bottom: 60px;
}
.login__recover,
.login__resend {
    display: none;
    padding: 20px 0 0;
}
.login__checkbox,
.login__options,
.login__submit {
    display: inline-block;
    margin: 10px -7px 0 0;
    vertical-align: top;
}
.login__checkbox,
.login__options {
    width: 62%;
    text-align: left;
    color: #7c7c7c;
}
.login__checkbox a,
.login__options a {
    color: #7c7c7c;
    text-decoration: none;
}
.login__checkbox a:hover,
.login__checkbox a:focus,
.login__options a:hover,
.login__options a:focus {
    color: #000;
}
.login__options div {
    margin-bottom: 5px;
}
.login__options span.icon {
    padding: 0 10px 0 10px;
    font-size: 18px;
    vertical-align: -4px;
}
.social_logins{
    display: flex;
    flex-flow: column nowrap;
    margin: 0 auto;
}
.social_logins__buttons{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
body.webapp .social_logins__buttons .button {
    min-height: 40px;
}
.social_logins h2{
    margin: 20px 0 0 0;
}
.social_logins .button {
    flex: 1 0 calc(33.33% - 20px);
    height: 40px;
    margin: 5px 10px;
    padding: 11px 12px 9px;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.1em;
    letter-spacing: .4px;
    text-transform: none;
    border: 1px solid #696969;
    color: #696969;;
}
.social_logins .button span {
    margin: -4px 8px 0 0;
    transition: all .2s ease-in-out;
}
.social_logins .button img {
    max-width: 100%;
    max-height: 100%;
    margin-top: -3px;
    padding-right: 10px;
}
body.webapp .social_logins .button img {
    max-width: 30px;
    height: auto;
    max-height: 100%;
    margin-top: -3px;
    padding-right: 10px;
}
.social_logins .button.button-facebook {
    margin: 5px 10px 5px 0;
    background: #ffffff;
}
.social_logins .button.button-facebook .icon{
    color: #3b5998;
}
.social_logins .button:not([disabled]):not(.disabled).button-facebook:hover,
.social_logins .button:not([disabled]):not(.disabled).button-facebook:focus {
    background: #3b5998;
    border-color: #3b5998;
}
.social_logins .button:not([disabled]):not(.disabled).button-facebook:hover .icon,
.social_logins .button:not([disabled]):not(.disabled).button-facebook:focus .icon {
    color: #ffffff;
}
.social_logins .button.button-google {
    color: #696969;
    background: #fff;
}
.social_logins .button:not([disabled]):not(.disabled).button-google:hover,
.social_logins .button:not([disabled]):not(.disabled).button-google:focus {
    color: #696969;
    background: #ccc;
}
.social_logins .button.button-twitter {
    margin: 5px 0 5px 10px;
    background: #ffffff;
}
.social_logins .button.button-twitter .icon{
    color: #000;
}
.social_logins .button:not([disabled]):not(.disabled).button-twitter:hover,
.social_logins .button:not([disabled]):not(.disabled).button-twitter:focus {
    color: #fff;
    background: #000;
    border-color: #000;
}
.social_logins .button:not([disabled]):not(.disabled).button-twitter:hover .icon,
.social_logins .button:not([disabled]):not(.disabled).button-twitter:focus .icon {
    color: #fff;
}
@media (max-width: 600px) {
    .social_logins .button {
        flex-basis: 100%;
    }
}

.login__form .message-warning {
    display: block;
}

.form__register .login__checkbox a,
.form__register .login__options a,
.form__register .login__checkbox a:hover,
.form__register .login__checkbox a:focus,
.form__register .login__options a:hover,
.form__register .login__options a:focus {
    color: #f00;
}

.login__submit {
    margin: 20px 0;
    display: block;
    vertical-align: middle;
}
.login__swap {
    position: absolute;
    width: 100%;
    padding: 15px;
    bottom: 0;
    left: 0;
    color: #040821;
    /*background: linear-gradient(to bottom, #4c4c4c 50%, #515151 50%);*/
    text-align: center;
    cursor: pointer;
    letter-spacing: .5px;
    background-color: #eee;
}
body.webapp.prehome > header{
    background: #000912;
}
body.webapp .welcome__webapp .login__swap{
    color: #fff;
    position: relative;
    background-color: transparent;
    font-size: 1.2rem;
}
body.webapp.prehome .login__header{
    margin: 0 0 20px;
    color: #fff;
}
body.webapp.prehome .login__checkbox a,
body.webapp.prehome .login__options a,
body.webapp.prehome .form__title{
    color: #7ac1ff;
}
body.webapp.prehome h2.form__title{
    color: #ffffff;
}
body.webapp.prehome .header__logo{
    left: calc(50% - 30px);
}
body.webapp.prehome .header__logo img{
    width: 60px;
}
/*
.login__swap:before {
    position: absolute;
    content: " ";
    width: 0;
    height: 0;
    top: -20px;
    left: calc(50% - 25px);
    border-right: 25px solid transparent;
    border-bottom: 20px solid #4c4c4c;
    border-left: 25px solid transparent;
    font-size: 0;
}

.login__swap span.icon {
    position: absolute;
    width: 20px;
    top: -10px;
    left: calc(50% - 13px);
    font-size: 26px;
    text-align: center;
}
*/
.login__form .form__input {
    display: inline-block;
    width: calc(100% - 55px);
    height: 40px;
    border: 1px solid #bcbcbc;
    color: #8e8e8e;
    background-color: #ffffff;
    border-left: none;
    border-radius: 0 6px 6px 0;
    margin: 0 0 10px -3px;
    background-position: right 10px top 13px;
}
.login__form-username:before,
.login__form-password:before,
.login__form-email:before{
    font-family: 'icomoon';
    display: inline-block;
    height: 40px;
    width: 55px;
    border: 1px solid #bcbcbc;
    color: #8e8e8e;
    background-color: #fff;
    font-size: 28px;
    border-right: none;
    border-radius: 6px 0 0 6px;
    margin: 0 0 10px;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 12px 0 0;
    text-align: center;
}
.login__form-username:before{
    content: "\e91e";
    font-size: 1.7rem;
}
.login__form-password:before{
    content: "\e93f";
    padding: 13px 0 0;
    font-size: 24px;
}
.login__form-email:before{
    content: "\ea31";
    padding: 13px 0 0;
    font-size: 24px;
}
.login__form .form__register .login__checkbox,
.login__form .form__register .login__submit,
.login__form #form__recover .login__submit,
.login__form #form__resend .login__submit {
    display: block;
    width: 100%;
}
.login__form .message-success:not(.form__result),
.login__form .message-error:not(.form__result) {
    margin-top: 0;
}

#form__register__social {
    margin-bottom: -60px;
}

@media (max-width: 767px) {
    .login__header{
        text-align: center;
        padding: 0;
        margin: 0 0 30px;
    }
    .login__header:before{
        display: block;
        position :relative;
        margin: 0 auto 10px;
    }
    .login__options,
    .login__submit{
        width: 100%;
        display: block;
    }
    .login__submit{
        margin: 20px 0 24px;
    }

    .form__input,
    .form__input-inline {
        padding: 8px 18px 8px 8px;
    }
    .form__button{
        display: block;
        margin: 10px auto;
    }

    .modal .modal__body{
        padding: 20px 10px;
    }

    #modal__login .modal__container{
        min-width: 90%;
        width: 100%;
    }
    #modal__login .form__checkbox:not(input){
        position: relative;
        padding: 0 0 0 30px;
        margin: 0 0 14px;
        display: block;
    }
    #modal__login .form__checkbox input,
    #modal__login input.form__checkbox{
        position: absolute;
        margin: 0;
        left: 0;
        top: 0;
    }

    .social_logins .button.button-facebook,
    .social_logins .button.button-google,
    .social_logins .button.button-twitter{
        margin: 10px auto;
    }

    #modal__login .button-reflect,
    #modal__login .button-prehome{
        padding: 20px;
        font-size: 1.1rem;
    }
}

/** Welcome/patchnotes modal */
.modal__welcome .modal__container {
    width: 95%;
    max-width: 580px;
}
.modal__patchnotes .modal__container {
    max-width: 1000px;
}
.modal__welcome .welcome__title,
.modal__patchnotes .patchnotes__title {
    position: relative;
    color: #2d3f4d;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 28px;
    text-transform: uppercase;
    padding: 0 0 16px 0;
    border-bottom: 1px solid #e6e6e6;
    margin: 0 0 18px 0;
}
.modal__welcome .welcome__title span,
.modal__patchnotes .patchnotes__title {
    display: block;
    font-weight: 900;
    font-size: 34px;
    line-height: 34px;
}
.modal__welcome .welcome__title img{
    position: absolute;
    right: 0;
    top: 0;
}
.modal__welcome.modal .modal__body,
.modal__patchnotes.modal .modal__body {
    border-radius: 6px;
}
.modal__welcome,
.modal__patchnotes {
    font-size: 16px;
    line-height: 18px;
    color: #737373;
    margin: 0 0 20px 0;
}
.modal__welcome ul,
.modal__patchnotes ul{
    margin: 15px 0 20px;
}
.modal__welcome li,
.modal__patchnotes li{
    margin: 0 30px 10px 20px;
    list-style: disc;
}
.welcome__buttons{
    width: 100%;
    text-align: center;
    margin: 10px 0 0 0;
}
.welcome__button{
    width: auto;
    display: inline-block;
    margin: 10px 20px 10px 0;
    text-transform: uppercase;
    text-align: center;
    border: 0;
    border-radius: 6px;
    box-shadow: inset 0 0 50px 100px rgba(255, 255, 255, 0);
    padding: 10px 20px;
    font: 900 17px/.8em 'Lato', Arial, sans-serif;
    letter-spacing: .6px;
    cursor: pointer;
    transition: box-shadow .2s ease-in-out;
    min-width: 42%;
}
.welcome__button:hover{
    box-shadow: inset 0 0 50px 100px rgba(255, 255, 255, 0.2);
}
.welcome__button.button-grey-blue{
    background: #597487;
    color: #fff;
}
.welcome__button.button-black{
    background: #353535;
    color: #fff;
}
.welcome__checkbox{
    position: relative;
    padding: 0 0 0 35px;
    margin: 20px 0 0 0;
}
.welcome__checkbox input{
    position: absolute;
    left: -35px;
    top: 0;
}
.welcome__checkbox .form__checkbox:not(input){
    font-size: 16px;
    line-height: 18px;
    color: #737373;
}
@media (max-width: 620px) {
    .modal__welcome .welcome__title {
        padding-top: 70px;
        text-align: center;
    }
    .modal__welcome .welcome__title img {
        right: initial;
        left: 50%;
        transform: translateX(-50%);
    }
}
@media (max-width: 600px) {
    .modal__welcome .modal__container,
    .modal__patchnotes .modal__container{
        max-width: 90%;
    }
    .modal__welcome .welcome__title:after,
    .modal__patchnotes .patchnotes__title:after{
        display: none;
    }
    .welcome__buttons {
        margin-top: 20px;
    }
    .welcome__button{
        display: block;
        width: 100%;
        margin: 10px auto;
    }
}
@media (max-width: 500px) {
    .modal__welcome .welcome__title {
        font-size: 14px;
        line-height: 14px;
    }
    .modal__welcome .welcome__title span {
        font-size: 24px;
        line-height: 24px;
    }
}
@media (max-width: 400px) {
    .modal__patchnotes .patchnotes__title {
        font-size: 22px;
        line-height: 22px;
    }
}

/** Otros */
.note__form {
    text-align: center;
}
.note__form textarea {
    display: block;
    width: 600px;
    height: 150px;
    margin-bottom: 10px;
}

/** AJAX loader */
#ajax-load {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
}
@keyframes uil-ring-anim {
    100% { transform: rotate(360deg); }
}
#ajax-load:before {
    position: absolute;
    display: block;
    content: " ";
    width: 100px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    border-radius: 50%;
    box-shadow: 0 3px 0 0 #fff;
    animation: uil-ring-anim 1s linear infinite;
}
.ajax-loading {
    display: block;
    content: " ";
    width: 90px;
    height: 90px;
    margin: 80px auto;
    border-radius: 50%;
    box-shadow: 0 3px 0 0 #666;
    animation: uil-ring-anim 1s linear infinite;
}

/* Sidebar tickets / Support */
#aside__support .button.open-ticket{
    margin: 10px 22px;
    color: #fff;
}
#aside__support .no-records {
    border-top: 0;
}
.ticket-list__sidebar-container {
    display: flex;
    flex: 0 1 35%;
    flex-flow: column nowrap;
    overflow-y: hidden;
}
#aside__support .scrollbar {
    height: calc(100vh - 150px);
    max-height: calc(100vh - 150px);
    overflow: hidden;
}
#aside__support .scrollbar > .scroll-element .scroll-bar {
    opacity: .8;
}
.ticket-list__sidebar-container .ticket-item,
.help-element {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 15px 30px 15px 0;
    color: #888;
    position: relative;
    text-align: left;
    border-top: 1px solid #e9e9e9;
    cursor: pointer;
    transition: background-color .2s ease-out;
}
.help-element:hover{
    background-color: #eee;
}
.ticket-list__sidebar-container .ticket-item:first-child{
    border-top: 0;
}
.ticket-list__sidebar-container .ticket-item .ticket-image,
.help-element__image {
    flex: 0 0 70px;
    text-align: center;
}
.ticket-list__sidebar-container .ticket-item .ticket-image img,
.help-element__image img {
    max-width: 100%;
    max-height: 50px;
}
.ticket-list__sidebar-container .ticket-item .ticket-image span.icon,
.help-element__image span.icon {
    color: #444;
    font-size: 30px;
    line-height: 30px;
}
.ticket-list__sidebar-container .ticket-item .ticket-info,
.help-element__info {
    flex: 1 0 auto;
    flex-flow: column nowrap;
}
.ticket-list__sidebar-container .ticket-item .ticket-body,
.help-element__info .help-element__title{
    max-width: 239px;
    font-family: Roboto;
    font-weight: 600;
    word-break: break-word;
}
.ticket-list__sidebar-container .ticket-item .ticket-date,
.help-element__text {
    padding-top: 10px;
    color: #888;
    font-size: .95em;
}
.ticket-list__sidebar-container .ticket-item .ticket-status {
    margin-top: 15px;
    text-align: right;
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Roboto', Arial, sans-serif;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.red .ticket-status-marker{
    background: #990000;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.blue .ticket-status-marker{
    background: #0d5886;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.green .ticket-status-marker{
    background: #068133;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.golden .ticket-status-marker{
    background: #9f6303;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.red{
    color: #990000;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.blue{
    color: #0d5886;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.lightblue{
    color: #3296c8;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.green{
    color: #068133;
}
.ticket-list__sidebar-container .ticket-item .ticket-status.golden{
    color: #9f6303;
}
/* END - Sidebar tickets / Support */

/* Tutorial elements */
html.tutorial__open,
body.tutorial__open {
    /*overflow: hidden;*/
    pointer-events: none;
}

/* NEW ONBOARDING - START */
.onboarding{
    font-family: 'Play', Arial, sans-serif;
    padding: 30px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    color: #141414;
}
/*
body.corporate .onboarding .column > *{
    padding: 0 20px;
}
*/
.onboarding .button{
    /*
    background-color: #FFB800;
    color: #0B0B25;
    */
    font-weight: 700;
    height: 52px;
    padding: 0 15px;
    text-align: center;
    margin: 30px auto 0;
    font-size: 1.8em;
    min-width: 260px;
    font-family: 'Play', Arial, sans-serif;
}
.onboarding .button:not([disabled]):not(.disabled):hover {
    color: #fff;
    background-color: #888888;
}
#onboarding_cancel{
    cursor: pointer;
    font-size: 1.2rem;
    margin: 20px auto;
    text-decoration: underline;
}
.onboarding > .column > h2,
.onboarding > .column > h3{
    font-family: 'Play', Arial, sans-serif;
    font-size: 2rem;
    margin: 20px auto 12px;
    font-weight: 700;
    line-height: 2rem;
    text-align: center;
    padding: 0;
}
.onboarding > .column > h2 {
    font-size: 2.4rem;
}
.onboarding > .column > h3.lighter{
    font-size: 2.1rem;
    font-weight: 400;
    margin-bottom: 30px;
}
.onboarding > .column > h3.smaller{
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 auto;
}
.onboarding p{
    font-size: 1.4rem;
    line-height: 1.4rem;
    text-align: center;
}
.onboarding .coin_block .coin_block__header h3{
    font-size: 2rem;
    line-height: 2rem;
}
.onboarding .coin_block p {
    font-size: 1.3rem;
    line-height: 1.6rem;
    text-align: left;
}
.onboarding .separator{
    display: block;
    height: 4px;
    width: 60px;
    background-color: #141414;
    margin: 12px auto;
}
.coin_block{
    font-family: 'Play', Arial, sans-serif;
    width: 100%;
    max-width: 500px;
    color: #e2eeee;
    background-color: #141414;
    border-radius: 12px;
    padding: 15px 60px;
    margin: 60px auto 40px;
    font-size: 1.4rem;
    line-height: 1.5rem;
}
.coin_block .row{
    margin: 0 auto;
    justify-content: flex-start;
}
.coin_block .coin_block__header{
    padding: 0;
}
.coin_block .coin_block__header img{
    position: absolute;
    right: -70px;
    top: -85px;
}
.coin_block .coin_block__header > div{
    margin: 0 0 20px 0;
}
.coin_block .coin_block__header h3{
    font-family: 'Play', Arial, sans-serif;
    font-size: 2rem;
    margin: 0;
    font-weight: 700;
    color: #fff;
    text-align: left;
}
.coin_block .coin_block__header p{
    color: #ff0126;
    margin: 0;
}
.coin_block .info_text h3{
    font-family: 'Play', Arial, sans-serif;
    margin: 0 0 10px;
    padding: 0;
    width: 100%;
    font-size: 1.4rem;
    text-align: left;
}
.coin_block .info_text{
    width: 100%;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}
.coin_block ul{
    list-style: disc;
    list-style-position: outside;
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin: 0 0 30px 16px;
}

.onboarding__panel{
    position: absolute;
    max-width: 350px;
    height: auto;
    margin: 0;
    padding: 20px;
    color: #000;
    background: #fff;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.6);
    border-radius: 6px;
    transition: all .8s ease-in-out;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: 1000;
    pointer-events: all;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.onboarding__panel:before{
    display: block;
    position: absolute;
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
}
.onboarding__panel.none:before{
    display: none;
}
.onboarding__panel.center{
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    max-width: 400px;
}
.onboarding__panel.top{
    top: -170px;
    left: 50%;
    transform: translateX(-50%);
}
.onboarding__panel.top:before{
    border-width: 14px 10px 0 10px;
    border-color: #ffffff transparent transparent transparent;
    left: 50px;
    bottom: -14px;
}
.onboarding__panel.bottom{
    bottom: -272px;
    left: 50%;
    transform: translateX(-50%);
}
.onboarding__panel.bottom:before{
    border-width: 0 10px 14px 10px;
    border-color: transparent transparent #ffffff transparent;
    left: 50%;
    transform: translateX(-50%);
    top: -14px;
}
.onboarding__panel.right{
    right: -330px;
    top: 50px;
}
.onboarding__panel.right:before{
    border-width: 10px 14px 10px 0;
    border-color: transparent #ffffff transparent transparent;
    left: -14px;
    top: 10px;
}
.onboarding__panel.left{
    left: -250px;
    top: 50px;
}
.onboarding__panel.left:before{
    border-width: 10px 0 10px 14px;
    border-color: transparent transparent transparent #ffffff;
    right: -14px;
    top: 10px;
}
.onboarding__panel .symbol{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #068133;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}
.onboarding__panel .symbol .icon{
    color:#ffffff;
    font-size: 1.4rem;
}
.onboarding__panel h3{
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.6rem;
    margin: 6px auto 20px auto;
}
.onboarding__panel p{
    line-height: 1.2rem;
    font-size: 1.1rem;
}
.onboarding__panel .options{
    align-items: center;
    justify-content: center;
    margin: 30px auto 10px;
}
.onboarding__panel .button{
    margin: 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
}
.onboarding__panel .options .onboarding__quit_confirm,
.onboarding__quit{
    cursor: pointer;
    margin: 0 auto;
}    
.onboarding__bottom_bar{
    pointer-events: all;
    z-index: 1000;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 50px;
    color: #fff;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    font-family: 'Play', Arial, sans-serif;
    background-color: #000;
}
.onboarding__bottom_bar .content{
    display: flex;
    flex-flow: row nowrap;
    flex: 1 0 100%;
    align-items: center;
    justify-content: center;
}
.onboarding__bottom_bar .content > span{
    margin-right: 20px;
}
.onboarding__bottom_bar .content .onboarding__quit{
    position: absolute;
    right: 20px;
    cursor: pointer;
}
.onboarding__bottom_bar .content ul{
    display: flex;
    flex-flow: row nowrap;
}
.onboarding__bottom_bar .content ul li{
    flex-flow: row nowrap;
    display: flex;
    margin: 0 6px;
    align-items: center;
}
.onboarding__bottom_bar .content ul li .number{
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,.5);
    color: #000;
    font-weight: 900;
    border-radius: 50%;
}
.onboarding__bottom_bar .content ul li.active .number{
    background-color: rgba(255,255,255,1);
}
.onboarding__bottom_bar .content ul li.active:after{
    content: " ";
    display: block;
    width: 30px;
    height: 1px;
    background-color: #fff;
    margin: 0 0 0 10px;
}
.onboarding__bottom_bar .content ul li:last-child::after{
    display: none;
}
.onboarding__bottom_bar .content ul li span{
    margin-left: 12px;
}
@media (max-width: 600px) {
    .onboarding__bottom_bar .content{
        padding: 0 10px;
        justify-content: flex-start;
    }

    .onboarding__bottom_bar .content .onboarding__quit{
        right: 0px;
        padding: 0 8px;
    }
    
    .coin_block{
        padding: 10px 26px;
    }
    .coin_block .coin_block__header img{
        width: 160px;
        right: -60px;
        top: -55px;
    }
}
/* NEW ONBOARDING - END */

.tutorial-area {
    position: absolute;
    /*box-shadow: inset 0 0 8px 1px #e50000, 0 0 8px 1px #e50000, 0 0 0 5000px rgba(0, 0, 0, .85);*/
    box-shadow: inset 0 0 8px 1px #000, 0 0 8px 1px #000, 0 0 0 5000px rgba(0, 0, 0, .85);
    z-index: 198;
    transition: none;
    /*border: 2px solid #e50000;*/
    border: 2px solid #ffffff;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
}
.tutorial-modal {
    position: fixed;
    overflow: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
}
.tutorial-message {
    position: absolute;
    width: 400px;
    margin-bottom: 40px;
    padding: 0;
    background: #fff;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.6);
    border-radius: 5px;
    transition: all .8s ease-in-out;
    right: auto;
    left: auto;
    top: auto;
    z-index: 1;
}
.tutorial-message .img-icon{
    display: inline-block;
    margin: 0 5px;
    max-height: 44px;
    width: auto;
    vertical-align: middle;
}
.tutorial-message .subtitle{
    font-weight: 900;
    font-size: 19px;
    display: block;
    margin-bottom: 10px;
}
.tutorial-message strong{
    font-weight: 900;
}
.tutorial-message p{
    margin: 0 0 20px;
}
.tutorial-message ul{
    margin: 2px 0 20px 0;
    padding: 0 30px;
    list-style: disc;
}
.tutorial-message .but{
    text-align: center;
    vertical-align: middle;
    position: relative;
    text-transform: uppercase;
    color: #eee;
    font-size: 12px;
    padding: 3px 10px;
    border-top: 1px solid #4b4b4b;
    border-right: 1px solid #4b4b4b;
    background: #131313;
    display: inline-block;
    margin: 0 10px 0 0;
}
.tutorial-message .but.red{
    border-top: 1px solid #6f2323;
    border-right: 1px solid #6f2323;
    border-bottom: 0;
    border-left: 0;
    background: #520100;
}
.tutorial-message .icon{
    font-size: 22px;
    display: inline-block;
    line-height: 21px;
    margin: 0 5px;
    vertical-align: text-bottom;
    color: #555;
}
.tutorial-message .tutorial-title {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 0;
    padding: 15px 80px 12px 20px;
    color: #666;
    border-bottom: 1px solid #c8c8c8;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(to bottom, #fff, #ccc);
    font: bold 17px/22px 'Lato', Arial, sans-serif;
    text-shadow: 0 1px 0 #fff;
    text-transform: uppercase;
    white-space: initial;
}
.tutorial-message .tutorial-title .title-text{
    display: inline-block;
    margin: 0 0 0 10px;
}
.tutorial-message .tutorial-title .tutorial-icon{
    display: inline-block;
    font-size: 22px;
    vertical-align: middle;
    top: -2px;
    position: relative;
}
.tutorial-message .tutorial-title .tutorial-exit{
    position: absolute;
    padding: 14px 15px;
    top: 0;
    right: 0;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    text-shadow: none;
    cursor: pointer;
    transition: color .15s ease-in-out;
}
.tutorial-message .tutorial-title .tutorial-exit:hover {
    color: #000;
}
.tutorial-message .tutorial-text{
    padding: 15px 20px;
    color: #444;
    font-size: 1.1em;
    line-height: 1.4em;
}
.tutorial-message .tutorial-footer {
    text-align: center;
    padding: 20px;
    height: 80px;
}
.tutorial-message .tutorial-bar {
    height: 10px;
    position: relative;
    background: #B20000;
    border-radius: 3px;
    transition: .8s ease-in-out;
    width: 0;
    margin: 0 0 0 36px;
    max-width: 330px;
}
.tutorial-message .tutorial-bar:after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 3px;
    top: 0;
    left: 0;
    width: 330px;
    height: 10px;
    background: #ddd;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}
.tutorial-message .tutorial-footer button {
    text-transform: uppercase;
    width: calc(50% - 5px);
    margin-left: 5px;
    padding: 14px 40px;
    border: 0;
    background: #dfdfdf;
    color: #666;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    float: left;
}
.tutorial-message .tutorial-footer button.red {
    background: #a20202;
    color: #fff;
    float: right;
}
.tutorial-message .tutorial-footer .tutorial-exit {
    display: none;
}

/***** TIMER BAR ******/
.time__counter {
    font-weight: 700;
    display: inline-flex;
    flex-flow: row nowrap;
    margin: 0;
    align-items: center;
    text-transform: none;
}
.time__counter.uppercase {
    text-transform: uppercase;
    margin-right: 0;
}
.time__bar {
    flex: 0 1 155px;
    width: 155px;
    height: 6px;
    max-height: 6px;
    border-radius: 5px;
    background-color: #888;
    overflow: hidden;
}
.time__bar-text {
    text-transform: none;
}
.time__bar .time__bar-fill {
    height: 100%;
    width: 1px;
    display: block;
    border-radius: 5px;
    background: #6c0 linear-gradient(to bottom, rgba(255, 255, 255, .5) 48%, transparent 52%);
}

/* HEADER RESPONISVE -- START */
/* ALL UNTIL TABLETS */
@media (max-width: 1023px) {
    html.mobile-expanded {
        overflow: hidden;
    }
    html.mobile-expanded > body > header {
        z-index: 52;
    }
    .header__logo img{
        height: 36px;
        margin: 0 8px;
    }
    .webapp .header__logo img{
        margin: 0;
        height: auto;
        width: 40px;
    }
    .header__menu {
        border-top: 1px solid #434343;
        position: fixed;
        bottom: 0;
        right: 0;
        background-color: #141414;
    }
    .header__userpanel {
        flex-flow: row-reverse nowrap;
    }
    .header__userpanel-menu{
        display: flex;
        position: fixed;
        right: 0;
        top: 0;
        height: 70px;
        width: 40px;
    }
    .header__userpanel-menu .icon {
        font-size: 3em;
    }
    .header__menu > ul {
        justify-content: space-between;
    }
    .header__menu > ul > li {
        width: 100%;
    }
    .header__menu > ul > li:first-child {
        border-left: 0;
    }
    .header__menu > ul > li:last-child {
        border-right: 0;
    }
    .header__menu > ul > li > a:hover{
        height: 70px;
    }
    .header__userpanel-info{
        margin-top: 0;
    }
    .header__userpanel-info-username{
        padding: 0 0 0 6px;
    }
    .header__userpanel-avatar{
        margin: 0;
    }
    .header__userpanel-avatar > a{
        border-right: 1px solid transparent;
        border-left: 1px solid #434343;
        padding: 6px 8px;
        pointer-events: none;
    }
    .header__userpanel-avatar:hover > a {
        border-left: 1px solid #141414;
    }
    body.webapp .header__userpanel-avatar{
        width: 56px;
    }
    body.webapp .header__userpanel-avatar > a{
        padding: 6px 0 6px 14px;
        border-left: none;
        height: 50px;
    }
    #settings-menu{
        right: auto;
        left: 1px;
    }
    .header__right-menu {
        height: 71px;
        border-bottom: 1px solid #c8c8c8;
        position: fixed;
        width: 100vw;
        background-color: #141414;
        left: 100vw;
        top: 0;
        z-index: 10;
        transition: left .3s ease-in-out;
    }
    .header__right-menu.mobile-expanded {
        left: 0;
    }

    .header__userpanel-settings .header__right-menu-element {
        flex: 1 0 auto;
    }
    .header__right-menu.mobile-expanded > .header__userpanel-menu {
        display: flex;
        position: relative;
        flex: 0 1 40px;
        transition: all .3s ease-in-out;
    }
    body > main{
        padding: 70px 0 0 0;
    }
    body > header{
        padding: 0;
    }
    body.webapp > header,
    body.webapp > main{
        left: 0;
    }
    body > aside{
        z-index: 100;
        width: 100vw;
        left: 100vw;
        border: 0;
        transition: left .3s ease-in-out;
    }
    body > aside.mobile-expanded{
        left: 0;
    }
    .aside__toggle,
    .aside__toggle-close{
        display: none;
    }
    .coin_block ul{
        font-size:  1.2rem;
    }
    .coin_block h3{
        text-align: left !important;
        padding: 0;
    }
    .coin_block .info_text{
        font-size: .9rem;
    }
}

/* TABLETS */
@media (max-width: 1200px) {
    .header__menu > ul > li > a {
        min-width: 50px;
        padding: 8px 10px 0;
        font-size: .7em;
        width: 100%;
    }
    body.webapp #settings-menu{
        width: 70vw;
        left: 0;
    }
}
@media (min-width: 768px) AND (max-width: 1023px) {
    .header__menu {
        left: 82px;
    }
}
@media (max-width: 600px) {
    #settings-menu{
        width: 100vw;
        left: -146px;
        max-height: 80vh;
        overflow-y: auto;
    }
    .header__menu > ul > li > a {
        padding: 5px 5px 0;
    }
}
@media (max-width: 450px) {
    .header__menu > ul li .icon {
        font-size: 34px;
        margin-top: 4px;
    }
    .header__menu > ul li .header__menu-image {
        margin-top: 4px;
    }
}
/* HEADER RESPONISVE -- END */

/* STREAMER PROTECT STYLES */
.streamer-protect .personal-data .profile-settings__setting-info-text,
.streamer-protect .personal-data input,
.streamer-protect .personal-data textarea,
.streamer-protect .personal-data select,
.streamer-protect .personal-data option,
.streamer-protect .account-info .profile-settings__setting:nth-of-type(2) .profile-settings__setting-info-text,
.streamer-protect .account-info .profile-settings__setting:nth-of-type(2) input,
.streamer-protect .market-modal__form input, .streamer-protect .market-modal__form select,
.streamer-protect .event__matchmaking-container .event__info input,
.streamer-protect .social-networks .profile-settings__setting-info-text
{
    filter: blur(6px);
}
/* STREAMER PROTECT STYLES - END */



/* NEW REDESIGN 2022 */
.event-list__content{
    padding: 20px 20px 60px;
}
.event-list__content h2{
    font-size: 1.8em;
    line-height: 1.8rem;
    color: #201e21;
    font-weight: 700;
    margin: 0 0 0 14px;
}
#list__events{
    width: 100%;
}
body.webapp section.event-list__content {
    padding-bottom: 40px;
}
body.webapp section.event-list__content h2,
body.webapp section.ticket-list h2 {
    text-align: center;
    color: #ffffff;
    font-size: 1.4rem;
    margin: 0 auto 20px;
    font-weight: 700;
}

body.webapp section h3 {
    text-align: center;
    color: #ffffff;
    font-size: 1.2rem;
    margin: 0 auto 20px;
    font-weight: 700;
}
body.webapp section > h3 {
    line-height: 1.3rem;
    margin-bottom: 15px;
}
body.webapp section > h3:last-of-type {
    margin-bottom: 20px;
}

/* NEW EVENT CARD DESIGNS - START */
.event-grid__filter{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    width: 100%;
}
.event-grid__filter .row{
    flex: 1 0 80%;
    padding: 0;
    margin: 0 0 10px;
}
.event-grid__filter .row:last-child{
    flex: 0 1 auto;
    justify-content: flex-end;
}
body.webapp .event-grid__filter .row:last-child {
    padding: 0;
    margin: 8px auto 24px;
}
.event-grid__filter h3{
    color: #383838;
    font-size: 1.4rem;
    padding: 0 14px;
}
.event-grid__filter .list__filters select.form__input,
.event-grid__filter .form__input{
    padding: 0px 8px 0;
    font-size: 1.1rem;
    max-width: 180px;
    background-color: #ffffff;
    position: relative;
    color: #757575;
    font-style: italic;
    border: none;
    margin: 14px;
}
.event-grid__filter .myevents{
    margin-left: 10px;
    display: flex;
    flex-flow: row;
    align-items: center;
    color: #757575;
    font-size: 1.1rem;
}
.event-grid__filter .form__input[type="checkbox"]{
    height: 14px;
    width: 14px;
}
.event-grid__filter .orderby{
    margin: 14px 0 0 0;
}
.event-grid__filter select.event-order__select{
    border: none;
    max-width: 140px;
    background-color: transparent;
    margin: 14px 14px 14px 0;
}
.event-grid__filter .icon-eye{
    color: #ababab;
    font-size: 1.5rem;
    position: absolute;
    right: 10px;
    top: 8px;
}
.event-grid__filter .list__sort-asc:after,
.event-grid__filter .list__sort-desc:after{
    position: absolute;
    right: -6px;
    top: 18px;
}
.event-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.event-grid__event{
    flex: 0 1 260px;
    width: 260px;
    height: 160px;
    margin: 14px;
    padding: 10px;
    transition: transform .2s ease-in-out;
    background-color: #ffffff;
    color: #201e21;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0,0,0,.2);
    cursor: pointer;
}
.event-grid__event[disabled]{
    opacity: .7;
    pointer-events: none;
}
.event-grid__event input{
    display: none;
}

.event-grid__event[data-type="league"],
.event-grid__event[data-type="league"]:hover,
.event-grid__event[data-vip="1"],
.event-grid__event[data-vip="1"]:hover{
    background-color: #000;
    color: #ffffff;  
}
.event-grid__event[data-type="league"] .event-grid__game,
.event-grid__event[data-vip="1"] .event-grid__game,
.event-grid__event[data-type="league"] .event-grid__timeleft,
.event-grid__event[data-vip="1"] .event-grid__timeleft,
.event-grid__event[data-type="league"] .coins__fc, .event-grid__event[data-type="league"] .coins__oc,
.event-grid__event[data-vip="1"] .coins__fc, .event-grid__event[data-vip="1"] .coins__oc{
    color: #ffffff; 
}
.event-grid__event:hover {
    transform: translateY(-5px);
    color: #201e21;
}
.event-grid__event .column *{
    padding: 0;
    margin: 0;
}
.event-grid__event .row .column{
    flex: 1 1 auto;
    align-items: flex-start;
}
.event-grid__event .row .column.name{
    flex: 0 1 190px;
}
.event-grid__event .row .column.position{
    align-items: flex-end;
}
.event-grid__event .event-grid__icon{
    height: 37px;
    width: auto;
    margin: 0 10px 0 0;
}
.event-grid__event .event-grid__game{
    font-size: 1rem;
    line-height: 1.3rem;
    color: #6f6f6f;
}
.event-grid__event .event-grid__name{
    font-weight: 900;
    text-transform: uppercase;
    font-family: 'Play', Arial, sans-serif;
    min-height: 34px;
    line-height: 1.2rem;
}
.event-grid__event .event-grid__name:first-line{
    font-size: 1.4rem;
}
.event-grid__event .event-grid__eventtype,
.events__header__eventtype,
.event__teams-versus .eventtype,
.event__earnings .eventtype,
.eventtype,
.faqs__icon .mode,
.events__header__title-block .mode,
.event__teams-prize-info .mode{
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Play', Arial, sans-serif;
    height: 28px;
    width: 28px;
    color: #ffffff;
    font-size: 1.2rem;
    border-radius: 6px;
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin: 0 10px 0 0;
}
.event-grid__event[data-type="league"] .event-grid__eventtype,
.event-grid__event[data-vip="1"] .event-grid__eventtype{
    color: #000000;
}
.modal[data-section="play"] .play__content__modes li .mode.ladder,
.modal[data-section="play"] .play__content__modes li .mode.ranked,
.event-grid__event .event-grid__eventtype.ladder,
.event-grid__event .event-grid__eventtype.ranked,
.event__teams-versus .eventtype.ladder,
.event__teams-versus .eventtype.ranked,
.event__earnings .eventtype,
.eventtype.ladder,
.eventtype.ranked,
.eventtype.arcade,
.eventtype.season,
.eventtype.ranking{
    background-color: #9ec1dd;
}
.modal[data-section="play"] .play__content__modes li .mode.tournament,
.modal[data-section="play"] .play__content__modes li .mode.arcade,
.event-grid__event .event-grid__eventtype.tournament,
.event-grid__event .event-grid__eventtype.arcade,
.event__teams-versus .eventtype.tournament,
.event__teams-versus .eventtype.arcade,
.eventtype.tournament,
.eventtype.arcade{
    background-color: #ff0137;
}
.event-grid__event .event-grid__eventtype.league,
.event__teams-versus .eventtype.league,
.eventtype.league{
    background-color: #00b6f3;
}
.modal[data-section="play"] .play__content__modes li .mode.versus,
.modal[data-section="play"] .play__content__modes li .mode.duel,
.event__teams-versus .eventtype.duel,
.event__teams-versus .eventtype.versus,
.eventtype.versus,
.eventtype.duel{
    background-color: #3E4348;
}

/*
NOT USED
.event-grid__event .event-grid__eventtype.arcade,
.event__teams-versus .eventtype.arcade{
    background-color: #670000;
}
.event-grid__event .event-grid__eventtype.ranking,
.events__header__title-block .mode.ranking,
.faqs__icon .mode.ranking,
.event__teams-prize-info .mode.ranking{
    background-color: #5f898e;
}
.event-grid__event .event-grid__eventtype.season,
.events__header__title-block .mode.season,
.faqs__icon .mode.season,
.event__teams-prize-info .mode.season{
    background-color: #ffaf1a;
}
*/

.event-grid__event .event-grid__position,
.event-grid__event .event-grid__cost,
.event-grid__event .event-grid__jackpot-amount{
    align-items: center;
    display: flex;
    min-height: 23px;
}
.event-grid__event .event-grid__position {
    margin-right: 5px;
}
.event-grid__event .event-grid__position span,
.event-grid__event .event-grid__cost span,
.event-grid__event .event-grid__jackpot-amount span{
    margin: 0 4px 0 0;
}
.event-grid__event .event-grid__cost strong,
.event-grid__event .event-grid__jackpot-amount strong{
    font-size: 1.2em;
}
.event-grid__event .coins__fc,
.event-grid__event .coins__oc{
    color: #201e21;
}
.event-grid__event .coins__fc:after {
    background: url(../images/coins/fc/fc_new.svg) no-repeat center center/contain;
}
.event-grid__event .coins__oc:after {
    flex: 0 0 28px;
    height: 25px;
    background: url(../images/coins/oc/oc_new.svg) no-repeat center center/contain;
}
.event-grid__event .event-grid__requirements {
    padding: 5px 0;
}
.event-grid__event .event-grid__requirements span.icon {
    padding-right: 8px;
    font-size: 24px;
}
.event-grid__event .event-grid__requirements span.icon.icon-premium-logo{
    color: #ffa500;
}
.event-grid__event .event-grid__timeleft {
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #595959;
}
.event-grid__event .event-grid__timeleft .column{
    justify-content: space-around;
    height: 30px;
}
.event-grid__event .event-grid__timeleft .time__counter{
    word-spacing: 2px;
}
.event-grid__event .button{
    font-size: .9rem;
    padding: 0 10px;
    text-transform: none;
}

.event-grid__event.selected{
    color: #ffffff;
    background-color: #180b1f;
}
.event-grid__event.selected .event-grid__game,
.event-grid__event.selected .coins__fc,
.event-grid__event.selected .coins__oc,
.event-grid__event.selected .event-grid__timeleft{
    color: #ffffff;
}

@media (max-width: 1300px){
    .event-list__content{
        padding: 20px 4px; 
    }
    .event-grid__filter{
        flex-flow: row wrap;
    }
    .event-grid__filter .row{
        flex: 1 0 100%;
    }
    .event-grid__filter .row:last-child {
        flex: 1 1 100%;
        justify-content: flex-start;
        padding: 0 0 0 48px;
    }
    .event-grid__filter .orderby,
    .event-grid__filter select.event-order__select{
        margin: 0;
    }
}

/** Daily/Monthly modal */
#modal-daily,
#modal-monthly{
    font-family: 'Play', Arial, sans-serif;
}
#modal-daily .modal__title,
#modal-monthly .modal__title{
    font-family: 'Play', Arial, sans-serif;
    padding-left: 110px;
    font-weight: 400;
    font-size: 1.4em;
}
#modal-daily .modal__title span,
#modal-monthly .modal__title span{
    text-shadow: none;
    font-weight: 700;
}
.daily {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    padding: 0 20px 20px;
}
#modal-daily .daily > .row > .column:first-child {
    flex: 1 1 calc(100% - 360px);
}
#modal-daily .daily > .row > .column:last-child {
    flex: 1 1 360px;
    justify-content: center;
}
.daily__avatar{
    width: 80px;
    height: 80px;
    position: absolute;
    top: -35px;
    left: 15px;
    box-shadow: 0 2px 7px 2px rgba(0,0,0,.6);
    border-radius: 50%;
}
.daily__text{
    width: 100%;
    text-align: left;
    padding: 14px 0 14px 72px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-family: 'Lato', Arial, sans-serif;
}
.daily__text.extra a,
.daily__text.extra a:hover{
    color: #fea500;
}
#modal-daily .daily__title,
#modal-monthly .daily__title{
    text-transform: initial;
    font-family: 'Play', Arial, sans-serif;
    font-weight: 700;
    color: #000;
    font-size: 1.3em;
    display: inline-block;
    position: absolute;
    top: -18px;
    width: 130px;
    text-align: center;
}
.daily__free .daily__title .vip,
.daily__vip .daily__title .free {
    display: none;
}
#modal-monthly .daily__vip {
    width: 100%;
}
.daily__rewards {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    max-width: 720px;
    padding: 0;
}
#modal-monthly .daily__rewards {
    width: 100%;
    max-width: 100%;
}
.daily__rewards li {
    flex: 1 1 190px;
    height: 120px;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-flow: column nowrap;
    background-color: #fff;
    margin: 10px;
    position: relative;
    border-radius: 6px;
    padding: 10px;
    font-family: 'Lato', Arial, sans-serif;
    text-transform: uppercase;
}
#modal-monthly .daily__rewards li {
    flex: 0 1 220px;
}
.daily__rewards li.claimed:before{
    content: " ";
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 18px;
    height: 18px;
    background-image: url(../images/daily/checkbox.png);
}
.daily__vip .daily__rewards li.claimed:before{
    background-image: url(../images/daily/checkbox_vip.png);
}
.daily__rewards li .daily__rewards-image {
    padding: 5px 0;
}
.daily__rewards li .daily__rewards-image img {
    width: 100%;
    max-width: 80px;
    height: auto;
}
.daily__rewards li.last img{
    max-width: 180px;
}
.daily__rewards li .daily__rewards-amount {
    width: 100%;
}
.daily__rewards li.claimed > * {
    opacity: .4;
}
.daily__rewards li.active.clicked {
    cursor: default;
    pointer-events: none;
}
.daily__rewards li.last{
    flex-flow: row nowrap;
}
.daily__rewards li.last .daily__rewards-day{
    position: absolute;
    top: 10px;
    left: 10px;
}
.daily__rewards li.last .daily__rewards-amount{
    font-size: 1.9rem;
    width: auto;
    margin: 0 0 0 50px;
}
.daily__rewards li.active {
    opacity: 1;
    border: 2px solid #88c8c8;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
}
#modal-daily .daily > .row > .column:last-child a {
    position: relative;
}
#modal-daily .daily > .row > .column:nth-child(2):before {
    position: absolute;
    content: "";
    display: block;
    top: 20px;
    left: 0;
    width: 1px;
    height: calc(100% - 20px);
    background: #ccc;
}
#modal-daily .daily > .row > .column:last-child a:not(.daily__highlight-image-only):after {
    position: absolute;
    content: "";
    display: block;
    bottom: -17px;
    left: 0;
    width: calc(100% - 40px);
    height: calc(100% - 20px);
    margin: 20px;
    background: linear-gradient(to top, #000, transparent 30%);
    border-radius: 12px;
}
.daily .banner{
    width: 100%;
    height: auto;
    max-width: 320px !important;
    max-height: 490px;
    border-radius: 12px;
    object-fit: cover;
    padding: 0;
    margin: 20px 0 0 0;
}
.daily .banner__texts{
    position: absolute;
    bottom: 24px; 
    color: #fff;
    text-align: center;
    padding: 0 30px;
    width: 100%;
    font-size: 1.2rem;
    line-height: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 5px #000;
    z-index: 1;
}
.daily .banner__texts .banner__title{
    font-weight: 600;
    font-size: 1.8rem;
    margin-bottom: 5px;
}

/* VIP SPECIFIC */
.daily__rewards__vip {
    margin: 30px 0 10px;
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
}
#modal-daily .coins__fc,
#modal-daily .coins__oc,
#modal-monthly .coins__fc,
#modal-monthly .coins__oc {
    font-size: 1.4em;
    color: #656565;
}
#modal-daily .coins__fc:after,
#modal-monthly .coins__fc:after {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-left: 3px;
    background-size: contain;
}
#modal-daily .coins__oc:after,
#modal-monthly .coins__oc:after {
    flex: 0 0 30px;
    width: 30px;
    height: 26px;
    background-size: contain;
}

#modal-daily .last .coins__fc:after,
#modal-monthly .last .coins__fc:after {
    flex: 0 0 32px;
    width: 32px;
    height: 28px;
}
#modal-daily .last .coins__oc:after,
#modal-monthly .last .coins__oc:after {
    flex: 0 0 40px;
    width: 40px;
    height: 36px;
}
#modal-monthly .monthly__rewards-title{
    text-align: center;
    font-size: 1.3em;
    font-weight: 700;
    margin: 20px auto 10px;
}
#modal-daily .modal__container {
    width: 98% !important;
    max-width: 1150px;
}
#modal-monthly .modal__container {
    width: 620px !important;
}

/* Responsive Styles*/
@media (max-width: 1160px) {
    #modal-daily .modal__container {
        width: 88% !important;
    }
    .daily__text{
        display: none;
    }
    .daily__text.extra{
        padding: 14px;
        text-align: center;
    }
}
@media (max-width: 980px) {
    #modal-daily .modal__container {
        width: 50% !important;
    }
    #modal-daily .daily > .row {
        flex-wrap: wrap;
    }
    #modal-daily .daily > .row > .column:first-child {
        flex-basis: 100%;
    }
    #modal-daily .daily > .row > .column:nth-child(2):before {
        display: none;
    }
    .daily{
        padding: 10px;
    }
    .daily__rewards li:last-of-type .daily__rewards-amount{
        font-size: 1.6em;
    }
    .daily__rewards li{
        flex: 0 1 88px;
        height: 60px;
        justify-content: space-between;
        padding: 6px;
        margin: 4px;
    }
    .daily__rewards li:last-of-type{
        flex: 1 0 100%;
        max-width: 280px;
    }
    .daily__rewards li .daily__rewards-image img{
        max-width: 60px;
    }
    .daily__rewards li.last .daily__rewards-amount {
        width: 100%;
        margin: 0;
    }
    .daily__rewards li.claimed:before{
        top: 2px;
        right: 2px;
    }
    .daily__rewards li .daily__rewards-amount{
        font-size: .8em;
    }
    #modal-daily .daily > .row > .column:first-child > .column {
        padding: 0 10px;
    }
    .daily__avatar{
        top: -95px;
    }
    .daily__rewards {
        max-width: 290px;
    }
    .daily__rewards li .daily__rewards-image{
        display: none;
    }    
}
@media (max-width: 700px) {
    #modal-daily .modal__container {
        width: 70% !important;
    }
}
@media (max-width: 500px) {
    #modal-daily .modal__container {
        width: 80% !important;
    }
}
@media (max-width: 400px) {
    #modal-daily .modal__container {
        width: 90% !important;
    }
}
@media (max-width: 560px) {
    #modal-daily .daily__rewards li.last .daily__rewards-amount{
        margin: 0 0 0 5px;
        font-size: 1.6rem;
    }
    #modal-daily .daily {
        padding: 20px 0;
    }
}

/* Talkabout slider */
.talkabout{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    background-color: #fff;
    flex-flow: column wrap;
    padding: 0 10%;
}
.talkabout h2{
    display: flex;
    align-items:  center;
    font-family: 'Play', Arial, sans-serif;
    font-weight: 600;
    width: 100%;
    text-align: left;
    font-size: 1.3em;
    color: #7d7d7d;
    text-transform: uppercase;
}
.talkabout h2 .icon{
    font-size: 2.2em;
    margin-right: 10px;
    font-weight: 300;
}
.talkabout .talkabout-wrap {
    display: block;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    height: 130px;
    position: relative;
}
.talkabout .talkabout-wrap ul {
    display: flex;
    list-style: none;
    position: absolute;
}
.talkabout .talkabout-wrap ul li {
    width: 278px;
    height: 70px;
    line-height: 100px;
    text-align: center;
    display: block;
    position: relative;
}
.talkabout .talkabout-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  opacity: 0.65;
  padding: 0 30px;
}
.talkabout .talkabout-wrap ul li img:not(.nolink):hover {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}
.talkabout .talkabout__arrow-left,
.talkabout .talkabout__arrow-right{
    position: absolute;
    top: 56%;
    transform: translateY(-50%);
    font-size: 1.4em;
    color: #c2c2c2;
    cursor: pointer;
}
.talkabout .talkabout__arrow-left{
    left: 6%;
}
.talkabout .talkabout__arrow-right{
    right: 6%;
}
@media (max-width: 800px) {
    .talkabout .talkabout-wrap{
        width: 90%;
    }
}

/* Autocomplete */
.autocomplete-suggestions {
    padding: 4px 0;
    border: 1px solid #666;
    border-bottom-width: 3px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background: #fff;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
    cursor: default;
    overflow: auto;
}
.autocomplete-suggestion {
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}
.autocomplete-no-suggestion {
    padding: 8px 12px;
}
.autocomplete-selected {
    background: #f0f0f0;
}
.autocomplete-suggestions strong {
    color: #000;
    font-weight: bold;
}
.autocomplete-group {
    display: block;
    padding: 8px 12px 15px;
    color: #000;
    font-weight: bold;
    font-size: 16px;
}


/* PLAY MODAL - NEW REDESIGN 2022 - START */

/*
.modal[data-section="play"] .modal__container {
    width: fit-content !important;
    width: -moz-fit-content !important;
    max-width: 1024px;
}
*/
.modal[data-section="play"] .modal__content{
    min-height: 580px;
}
.modal[data-section="play"] .modal__title,
.modal[data-section="howto"] .modal__title,
#instructions_modal .modal__title{
    display: none;
}
.modal[data-section="play"] .modal__body,
.modal[data-section="howto"] .modal__body,
#instructions_modal .modal__body{
    background-color: #d0d1d6;
    border-radius: 14px;
}
.modal[data-section="play"] .play__content h2.title,
.modal[data-section="play"] .play__content h3.title,
.modal[data-section="play"] #play__options h3{
    font-size: 1.4rem;
    line-height: 1.4rem;
    color: #201e21;
    font-weight: 700;
    margin: 5px 0 0 14px;
    font-family: "Arial";
}
.modal[data-section="play"] .play__content h3.title,
.modal[data-section="play"] #play__options h3{
    font-size: 1.1em;
    line-height: 1rem;
    margin: 14px 0 8px 14px;
    width: 100%;
}
.modal[data-section="play"] .play__content .details h3.title:first-child{
    margin: 0 0 8px 14px;
}
.modal[data-section="play"] #play__options{
    margin: 0 0 0 14px;
}
.modal[data-section="play"] #play__options h3{
    margin: 14px 0 10px;
}
.modal[data-section="play"] #play__options .play__options{
    margin: 0 14px 0 0;
}
.modal[data-section="play"] .play__content > .row > .column{
    align-items: flex-start;
    padding: 15px;
    flex: 1 0;
}
.modal[data-section="play"] .play__content > .row > .column.info-panel{
    background-color: #e9eaef;
    width: 300px;
    max-width: 300px;
    border-radius: 0 14px 14px 0;
    overflow: hidden;
}
.modal[data-section="play"] .play__content > .row > .column.info-panel:after{
    display: block;
    content: " ";
    width: 100%;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    height: 30px;
    background-image: linear-gradient(180deg, rgba(233,234,239,0) 0%, rgba(233,234,239,1) 100%);
}

.modal[data-section="play"] .play__content__modes{
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    margin: 0 0 10px;
    width: 100%;
}
.modal[data-section="play"] .modal__close:not(.button-red),
.modal[data-section="howto"] .modal__close:not(.button-red),
#instructions_modal .modal__close{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #a3a3ab;
    font-size: 1.3rem;
    cursor: pointer;
    position: absolute;
    right: -18px;
    top: -18px;
    z-index: 10;
    font-family: "Arial";
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1px 0 0;
}
body.webapp .modal[data-section="play"] .modal__close:not(.button-red),
#instructions_modal .modal__close{
    width: 38px;
    height: 38px;
    right: -10px;
}
.modal[data-section="play"] .modal__close .icon,
.modal[data-section="howto"] .modal__close .icon,
#instructions_modal .modal__close .icon{
    color: #ffffff;
}
.modal[data-section="play"] .play__content__modes li{
    flex: 0 1 21%;
    max-width: 192px;
    height: 52px;
    margin: 14px;
    padding: 12px 8px 12px 12px;
    /*transition: all .2s ease-in-out;*/
    background-color: #ffffff;
    color: #595959;
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    /*box-shadow: 0 0 6px rgb(0 0 0 / 20%);*/
}
.modal[data-section="play"] .play__content__modes li[disabled],
.modal[data-section="play"] .play__content__modes li[disabled]:hover{
    background-color: #ffffff;
    color: #595959;
    opacity: .4;
}
.modal[data-section="play"] .play__content__modes li[disabled]:hover h3{
    color: #595959;
}
.modal[data-section="play"] .play__content__modes li[disabled]:hover .mode{
    color: #ffffff;
}
.modal[data-section="play"] .play__content__modes li[disabled]:hover .mode.ladder,
.modal[data-section="play"] .play__content__modes li[disabled]:hover .mode.ranked {
    background-color: #9ec1dd;
}
.modal[data-section="play"] .play__content__modes li[disabled]:hover .mode.tournament {
    background-color: #ff0137;
}
.modal[data-section="play"] .play__content__modes li[disabled]:hover .mode.versus,
.modal[data-section="play"] .play__content__modes li[disabled]:hover .mode.duel {
    background-color: #3E4348;
}
.modal[data-section="play"] .play__content__modes li:hover,
.modal[data-section="play"] .play__content__modes li.active{
    background-color: #180b1f;
    color: #ffffff;
}
.modal[data-section="play"] .play__content__modes li:hover h3,
.modal[data-section="play"] .play__content__modes li.active h3{
    color: #ffffff;
}
.modal[data-section="play"] .play__content__modes li:hover .mode,
.modal[data-section="play"] .play__content__modes li.active .mode{
    background-color: #ffffff;
    color: #180b1f;
}
.modal[data-section="play"] .play__content__modes li > .row{
    align-items: center;
    flex-wrap: nowrap;
}
.modal[data-section="play"] .play__content__modes li .mode{
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Play', Arial, sans-serif;
    height: 28px;
    width: 28px;
    color: #ffffff;
    font-size: 1.2rem;
    border-radius: 6px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    line-height: 0;
    margin: 0 10px 0 0;
}

.modal[data-section="play"] .play__content__modes li h3{
    font-weight: 900;
    font-size: 1.3rem;
}
.modal[data-section="play"] .play__content__modes li p{
    margin: 8px 0 0 0;
    line-height: 1.2rem;
}

.modal[data-section="play"] .play__content form{
    width: 100%;
    padding: 0;
    margin: 0 0 30px;
}
body.webapp  .modal[data-section="play"] .play__content form{
    margin: 0 0 4px;
}
.modal[data-section="play"] .button-black{
    margin: 0 0 0 14px;
    text-transform: none;
    color: #fc0823;
    min-width: 320px;
    font-size: 1.8rem;
    max-width: 320px;
}
.modal[data-section="play"] .button-black img{
    margin: 0 10px 0 0;
    height: 32px;
}
.modal[data-section="play"] .button-black:hover{
    color: #fc0823;
}

.modal[data-section="play"] .button-black,
.modal[data-section="play"] .play_totals{
    display: inline-flex;
}
.modal[data-section="play"] .play_totals{
    align-items: flex-start;
    line-height: 1.1rem;
    color: #595959;
    font-size: 1.2rem;
}
.modal[data-section="play"] .play_totals .cost,
.modal[data-section="play"] .play_totals .prize{
    display: flex;
    align-items: center;
    height: 24px;
}
.modal[data-section="play"] .play_totals .cost span,
.modal[data-section="play"] .play_totals .prize span{
    color: #201e21;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 0 8px;
}

.modal[data-section="play"] .play_totals .cost span.euros__left,
.modal[data-section="play"] .play_totals .prize span.euros__left{
    font-size: 1.1rem;
    color: #4e4e4e;
}
.modal[data-section="play"] .play_totals .coins__fc:after{
    flex: 0 0 23px;
    width: 23px;
    height: 20px;
}
.modal[data-section="play"] .play_totals .coins__oc:after{
    flex: 0 0 23px;
    width: 23px;
    height: 20px;
    margin-left: 5px;
}
.modal[data-section="play"] #play__amounts{
    align-items: center;
}
.modal[data-section="play"] .event-grid {
    justify-content: flex-start;
}
.modal[data-section="play"] .details{
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 280px;
    margin-bottom: 20px;
}
.modal[data-section="play"] .currencies{
    align-items: center;
    margin: 0 0 0 14px;
    font-size: 1.2rem;
    font-weight: 600;
}
.modal[data-section="play"] .currencies label{
    margin: 0 14px 0 0;
    display: flex;
    align-items: center;
}
.modal[data-section="play"] .currencies input{
    margin: 0 10px 0 0;
}
.modal[data-section="play"] #play__rival__choose__amount input,
.modal[data-section="play"] #play__rival__choose input{
    margin: 0 14px;
    max-width: 200px;  
}
.modal[data-section="play"] .duel__users .noinfo{
    padding: 0;
}
#play__extra__info{
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.modal[data-section="play"] .modal__container,
.modal[data-section="howto"] .modal__container{
    max-width: 1270px;
}
.modal[data-section="play"] .info-panel > .row{
    padding: 0;
    align-items: center;
}
body.webapp .modal[data-section="play"] .info-panel > .row{
    align-items: flex-start;
}
.modal[data-section="play"] .info-panel .game__cover,
.modal[data-section="play"] .info-panel h2.title,
.modal[data-section="play"] .info-panel h3.title{
    margin: 10px 0 0;
    padding: 0;
    width: 100%;
}
body.webapp .info-panel h2.title{
    margin: 0;
}
body.webapp .info-panel{
    flex: 1 1 100%;
    margin: 50px auto 30px;
}
body.webapp .info-panel .button-blue{
    width: 100%;
    max-width: 80%;
}
body.webapp .info-panel .button-blue:after{
    display: block;
    content: "+";
    font-weight: 700;
    position: absolute;
    right: 10px;
    top: 3px;
    font-size: 2em;
}
body.webapp .info-panel .button-blue.opened:after{
    content: "-";
}
body.webapp .info-panel .game__info{
    background: #000913;
    padding: 10px 20px;
    width: 100%;
    max-width: 90%;
    line-height: 1.4;
    border-radius: 0 0 6px 6px;
}


.modal[data-section="play"] .info-panel .game__cover{
    width: 110px;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    object-fit: cover;
    margin: 10px 0;
}
.modal[data-section="play"] .info-panel .button-red{
    text-transform: none;
    background-color: #ff0126;
    font-weight: 700;
    color: #ffffff;
    font-size: 1.2rem;
    padding: 0 40px;
    margin: 10px 0;
}
.modal[data-section="play"] .info-panel .game__events .row{
    align-items: center;
}
.modal[data-section="play"] .info-panel .game__events > .row:first-child{
    border-bottom: 1px solid #c4c5c8;
    padding: 0 0px 10px;
    max-width: 84%;
}
.modal[data-section="play"] .info-panel .game__events h3{
    align-items: center;
    display: flex;
    font-weight: 400;
    color: #595959;
}
.modal[data-section="play"] .info-panel .game__events h3.hidden{
    display: none;
}
.modal[data-section="play"] .info-panel .game__events h3 strong{
    font-size: 1.3rem;
    margin: 0 0 0 4px;
    font-weight: 700;
}
.modal[data-section="play"] .info-panel .game__events img{
    height: 22px;
    width: auto;
}
.modal[data-section="play"] .info-panel .game__events .game__platforms{
    margin: 10px 0 0 0;
    align-items: center;
    justify-content: flex-start;
    padding: 0 14px;
}
.modal[data-section="play"] .info-panel .game__events .game__platforms img{
    height: 24px;
    width: auto;
    margin: 0 5px;
}
.modal[data-section="play"] .info-panel .game__info{
    max-height: 300px;
    flex-flow: column nowrap;
}
.modal[data-section="play"] .info-panel .game__info-content {
    padding-bottom: 10px;
}
body.webapp .modal[data-section="play"] .info-panel .game__info{
    flex: 1 1 170px;
    padding: 0 0 0 20px;  
}
body.webapp .modal[data-section="play"] .info-panel .game__info:nth-of-type(2){
    padding: 0;
}
body.webapp .modal[data-section="play"] .info-panel .game__info li:last-child{
    display: none; 
}
.modal[data-section="play"] .info-panel .game__info .team{
    display: none;
}
.modal[data-section="play"] .info-panel .game__info p,
.modal[data-section="play"] .info-panel .game__info li{
    color: #595959;
    margin: 5px 10px 5px 0;
    line-height: 1.2rem;
}
.modal[data-section="play"] .info-panel .game__info li{
    padding: 2px 0 2px 10px;
    color: #595959;
    line-height: 1.2rem;
    position: relative;
}
.modal[data-section="play"] .info-panel .game__info li:before{
    display: block;
    content: " ";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #595959;
    position: absolute;
    left: 0;
    top: 7px;
}
.form__play__result {
    margin-left: 13px;    
}
#play__extra__info{
    position: absolute;
    bottom: 20px;
    right: 20px;
}
/* Under maintenance */
.maintenance-msg{
    margin: 0 auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    background-color: #fff;
    min-height: calc(100vh - 228px);
    justify-content: flex-end;
    padding-top: 70px;
}
.maintenance-msg > div{
    flex-flow: column nowrap;
    align-items: flex-start;
    padding: 0 20px;
}
.maintenance-msg h1{
    font-family: 'Play', Arial, sans-serif;
    font-size: 4.5rem;
    letter-spacing: -3px;
    line-height: 3rem;
    text-transform: uppercase;
    font-weight: 900;
    color: #4d4d4d;
    /*transform-origin: center left;*/
    /*transform: scaleX(.85) scaleY(1.3);*/
    /*font-style: italic;*/
    position: relative;
    /*left: -7px;*/
    padding: 0;
    word-break: break-word;
}
.maintenance-msg h3{
    font-size: 1.2rem;
    line-height: 1.2rem;
    color: #4d4d4d;
    padding: 0;
    margin: 0 0 15px;
}
.maintenance-msg img{
    max-width: 610px;
    height: auto;
    position: relative;
    top: -3px;
    width: 100%;
    margin-bottom: -6px;
}
@media (max-width: 700px) {
    .maintenance-msg h3,
    .maintenance-msg h1{
        text-align: center;
    }
    .maintenance-msg h1{
        font-size: 3.2rem;
        line-height: 2.5rem;
        padding-bottom: 6px;
        /*left: 6vw;*/
    }
}
@media (max-width: 350px) {
    .maintenance-msg h1{
        font-size: 2.7rem;
        line-height: 2.2rem;
    }
}
.modal[data-section="play"] #play__rival__choose{
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;
}
.modal[data-section="play"] #play__social-search-form{
    margin: 0;
}
.modal[data-section="play"] #play__search-result{
    margin: 7px 0 0 45px;
    display: flex;
    flex-flow: row wrap;
}
.modal[data-section="play"] .user{
    display: flex;
    top: -25px;
    margin-bottom: -25px;
    transition: none;
    cursor: pointer;
}
.modal[data-section="play"] .user.selected {
    top: 0;
    margin-bottom: 0;
}
.modal[data-section="play"] .user:hover .user__actions-icon{
    margin: 0;
    font-size: inherit;
}

.modal[data-section="play"] .user__avatar{
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
}
.modal[data-section="play"] .user .icon-cross{
    position: absolute;
    right: 3px;
    margin: 0;
    z-index: 10;
    display: none;
}
.modal[data-section="play"] .user.selected .icon-cross{
    display: flex;
    align-items: center;
    justify-content: center;
    top: -1px;
    right: -2px;
    width: 20px;
    height: 20px;
    color: #fff;
    border-radius: 50%;
    background: #ff0126;
    font-size: 12px;
}
.modal[data-section="play"] .avatar{
    width: 50px;
    height: 50px;
}
.modal[data-section="play"] .user__username{
    margin: 10px 0 0;
    text-align: center;
}
@media (max-width: 1500px) {
    .modal[data-section="play"] .event-grid {
        justify-content: center;
    }    
}
@media (max-width: 1300px) {
    .games-list__games{
        justify-content: center;
    }
    .modal[data-section="play"] .play__content > .row > .column:first-child{
        order: 2;
        flex: 1 0 100%;
        padding: 5px 5px 40px;
    }
    .modal[data-section="play"] .play__content > .row > .column.info-panel{
        order: 1;
        max-width: 100%;
        width: 100%;
        flex: 1 0 100%;
        border-radius: 14px 14px 0 0;
    }
    .modal[data-section="play"] .info-panel .button-red{
        width: 100%;
        max-width: 220px;
        margin: 10px auto;
    }
    .modal[data-section="play"] .play__content__modes li{
        flex: 0 1 40%;
        height: auto;
    }
    .modal[data-section="play"] .play__content__modes li h3{
        padding: 0;
    }
    .modal[data-section="play"] .play__content > .row > .column.info-panel .game__info .game__info-content > *:not(.title:first-child),
    .modal[data-section="play"] .play__content__modes li p{
        display: none;
    }
    body.webapp .modal[data-section="play"] .play__content > .row > .column.info-panel .game__info .game__info-content > *:not(.title:first-child){
        display: block;
    }
    .modal[data-section="play"] .details{
        min-height: 0;
    }
    .modal[data-section="play"] .button-black{
        width: 90%;
        min-width: 90%;
        height: 54px;
        margin: 10px auto;
    }
    .modal[data-section="play"] .play__content > .row > .column.info-panel:after{
        display: none;
    }
    .modal[data-section="play"] #play__amounts{
        flex-flow: column wrap;
    }
    .modal[data-section="play"] .play__content h3.title,
    .modal[data-section="play"] #play__options h3,
    .modal[data-section="play"] .play__content .details h3.title:first-child{
        padding: 0;
        margin: 0 0 8px 2px;
    }
    .modal[data-section="play"] .currencies{
        margin: 0 0 0 2px;
    }
    .modal[data-section="play"] .currencies input{
        margin: 0 4px 0 0;
    }
    .modal[data-section="play"] .column.game__events{
        max-width: 200px;
    }
    .modal[data-section="play"] .play__content__modes{
        width: 100%;
        justify-content: center;
    }
    .modal[data-section="play"] .play__content__modes li h3{
        font-size: 1.1rem;
    }
    .modal[data-section="play"] .play_totals{
        width: 100%;
    }
}
@media (max-width: 767px) {
    .modal[data-section="play"] .form__input {
        padding: 8px;
    }
    .modal[data-section="play"] #play__search-result {
        width: 100%;
        margin: 7px 14px 0;
    }
    .modal[data-section="play"] .user {
        top: 0;
        margin-bottom: 0;
    }
}


/* Payment Buttons */
/** box payments methods **/
#payment-box #payment-methods {
    justify-content: center;
    padding: 0;
    align-items: center;
    width: 90%;
    max-width: 900px;
}
#payment-box #payment-methods button {
    background: #ffffff;
    margin: 10px auto;
    height: 48px;
    width: 250px;
    border-radius: 30px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #969696;
}
#payment-box #payment-methods button.skrill{
    background-color: #551f59;
}
#payment-box #payment-methods button .badge {
    width: 94px;
    height: 94px;
    background: url(../images/discount.png) no-repeat;
    position: absolute;
    right: -28px;
    top: 55px;
    z-index: 1;
    color: white;
    transform: rotate(-25deg);
    text-align: center;
}
#payment-box #payment-methods button .badge span {
    display: block;
    margin: 21px 0 -5px;
    font-weight: 700;
    font-size: 150%;
    text-transform: uppercase;
}
#payment-box #payment-methods button img {
    width: auto;
    height: auto;
    margin: 0 10px 0 0;
}

/* VIDEO PLAYER STYLES */
.modal#videoplayer .modal__container{
    width: 100% !important;
    max-width: 720px !important;
}
.modal#videoplayer .modal__container iframe{
    width: 100% !important;
    max-width: 720px;
    max-height: 420px;
}
/* VIDEO PLAYER STYLES */

.tournament-reminder{
    font-weight: 600;
    margin: 30px auto 0;
    max-width: 470px;
}

/* Calendar add */
.calendar__wrapper {
    position: relative;
    -webkit-touch-callout: none;
      -webkit-user-select: none;
       -khtml-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
}
.calendar__add {
    margin: 10px auto 0;
}
.calendar__options {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    font-size: 1.2rem;
    line-height: 1.5rem;
    transform: translate(50px, -50px);
    z-index: 1;
}
.calendar__options ul {
    padding: 15px 0;
    border: 0;
    background: none;
}
.calendar__options ul li {
    display: block !important;
    border-bottom: none !important;
    padding: 0 !important;
    min-height: auto !important;
}
.calendar__options a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 8px 25px;
    color: #000;
    font-weight: bold;
    background: none;
}
.calendar__options a:hover {
    background: #eee;
}
.calendar__options img {
    width: 22px;
    max-height: 22px;
    margin-right: 10px;
}
.calendar__options span {
    margin: 3px 0 0 5px;
    color: #666;
    font-size: 0.95rem;
    font-weight: initial;
    font-style: italic;
}

/* New detailed Market confirmation modal - START */
#shop_modal_success {
    font-size: 1.1em;
    line-height: 1.1em;
}
#shop_modal_success .coins__fc, #shop_modal_success .coins__oc{
    vertical-align: inherit;
    font-size: 1.1em;
}
#shop_modal_success .modal__body h1 {
    margin-bottom: 30px;
    color: #068133;
    font-weight: bold;
    font-size: 26px;
    line-height: 26px;
    text-align: center;
    text-transform: uppercase;
}
#shop_modal_success .subheader {
    margin: -20px 0 20px;
    text-align: center;
}
#shop_modal_success .market__result{
    margin: 20px 0 0;
}
#shop_modal_success .column.highlight{
    background-color: #eee;
}
#shop_modal_success .column.highlight h3 {
    margin-bottom: 25px;
}
#shop_modal_success .column.highlight ul {
    flex: 1 0 auto;
    margin: 20px 0;
}
#shop_modal_success .column{
    flex: 1 0 50%;
    padding: 20px;
}
#shop_modal_success .column:first-child h3 {
    display: block;
    font-weight: normal;
    font-size: 1.1em;
}
#shop_modal_success .column:first-child h3 span {
    font-weight: bold;
    font-size: 1.35em;
}
#shop_modal_success .product_img {
    max-height: 170px;
    margin: 10px auto;
}
#shop_modal_success .column p,
#shop_modal_success .column li{
    padding: 5px 0;
    line-height: 1.3em;
}
#shop_modal_success .column li{
    list-style: disc;
}
#shop_modal_success .column p.coins__white-background {
    font-size: 1em;
}
#shop_modal_success .column p.coins__white-background span {
    font-weight: bold;
    font-size: 1.2em;
}
#shop_modal_success .button-black{
    min-width: 200px;
}
#shop_modal_success .button-black img{
    height: 40px;
}
#shop_modal_success .button-black p{
    margin: 0 0 0 10px;
    width: auto;
    padding: 0;
}
/* New detailed Market confirmation modal - END */

/* Matches / Events listing styles */
/* RANKING */
.event__general-container .box.ranking__playedmatches{
    margin: 0 auto;
}
.ranking__playedmatches .lighter{
    font-weight: 400;
}
.ranking__playedmatches .list__items > li {
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    height: auto;
    align-items: normal;
    font-size: 1em;
    color: #252525;
    border-bottom: 1px solid #eee;
}
.ranking__playedmatches .list__items > li:last-child {
    border-bottom: none;
}
.ranking__playedmatches .list__items > li.no-records.novip{
    background-image: url(../images/league/novip.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    height: 310px;
}
.ranking__playedmatches .list__items .button-inline {
    margin: 30px auto 10px;
}
.ranking__playedmatches .list__items > li:not(.options) a:not(.button){
    color: #252525;
}
.ranking__playedmatches .list__items > li.no-records {
    font-size: 1.2em;
    min-height: 50px;
}
.ranking__playedmatches .list__items > li.no-records button {
    margin: 14px auto;
}
.ranking__playedmatches .list__items > li.no-records .button-green {
    display: inline-flex;
    margin: 14px auto 4px;
}
/*
.ranking__playedmatches:not(.resume) .ranking__playedmatches-event {
    display: flex;
    flex-flow: row nowrap;
    font-size: 1.2em;
    color: #888;
    background: #fff;
    transition: background .2s ease-in-out;
    align-items: center;
    justify-content: flex-start;
}
*/
.ranking__playedmatches .ranking__playedmatches-event {
    position: relative;
    padding: 10px;
    font-size: 1rem;
}
.ranking__playedmatches .ranking__playedmatches-event:hover {
    background: #e9e9e9;
}
.ranking__playedmatches .list__items > li.options{
    flex-flow: row nowrap;
    justify-content: center;
    padding: 8px 12px;
}
.ranking__playedmatches .ranking__matches__event_title {
    font-family: 'Play', Arial, sans-serif;
    font-size:  1.3rem;
    font-weight: 600;
    display: flex;
    flex-flow: row nowrap;
    text-transform: uppercase;
    align-items: center;
}
.ranking__playedmatches .ranking__matches__event_title .eventtype {
    margin-right: 5px;
}
.ranking__playedmatches .ranking__matches__event_title > span:last-of-type {
    margin-left: 10px;
    padding: 0;
}
.ranking__playedmatches .ranking__matches__event_main{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.ranking__playedmatches .ranking__matches__event_main > div{
    flex: 1 1 33%;
    display: flex;
    flex-flow: column;
}
.ranking__playedmatches .ranking__matches__event_main > div:first-child{
    align-items: flex-start;
}
.ranking__playedmatches .ranking__matches__event_main > div:last-child{
    align-items: flex-end;
}
.ranking__playedmatches .ranking__matches__event_main .user{
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0;
}
.ranking__playedmatches .ranking__matches__event_main .user .user__username{
    margin-left: 12px;
    font-size: 1.2rem;
    font-weight: 600;
}
.ranking__playedmatches .ranking__playedmatches-event-team .user{
    flex-direction: row-reverse;
}
.ranking__playedmatches .ranking__playedmatches-event-team.loser {
    filter: grayscale(1);
    opacity: .25;
}
.ranking__playedmatches .ranking__playedmatches-event-team .user-self .user__username {
    font-weight: bold;
}
.ranking__playedmatches .ranking__playedmatches-event-team .small-text {
    font-weight: 400;
    font-size: .9em;
    padding: 0 3px;
}

.ranking__playedmatches .ranking__playedmatches-event-team .user__username {
    /*max-width: 50px;
    margin-top: 6px;
    font-weight: normal;
    font-size: 1rem;
    overflow: hidden;*/
}
.ranking__playedmatches .ranking__playedmatches-event-team .user__username {
    max-width: none;
    overflow: initial;
    margin-left: 0;
    margin-right: 12px;
}
.ranking__playedmatches .ranking__playedmatches-event-team .icon {
    display: block;
    height: 50px;
    margin: 10px 0 20px;
    font-size: 35px;
    line-height: 35px;
}
/*
.ranking__playedmatches.resume .ranking__playedmatches-event-team > div:first-child {
    margin: 0 auto;
}
*/
.ranking__playedmatches .ranking__playedmatches-event-team .avatar {
    margin: 0 auto;
}

.ranking__playedmatches .ranking__matches__event_main .ranking__matches__event_game {
    max-width: 50px;
    max-height: 50px;
    margin: 8px 0 0 30px;
}

.ranking__playedmatches .prize_info,
.ranking__playedmatches .points_info{
    font-size: 1.1em;
    align-items: center;
    text-transform: uppercase;
    justify-content: center;
}
.ranking__playedmatches .points_info{
    font-size: .9rem;
    text-align: center;
}
.ranking__playedmatches .points_info .scores{
    font-size:  2rem;
    font-weight: 600;
    font-family: 'Play', Arial, sans-serif;
    transform: scaleX(.8);
    justify-content: center;
    margin: 0 0 5px;
    line-height: 1.6rem;
}
.ranking__playedmatches .points_info .points strong{
    font-weight: 600;
    font-size: 1.2rem;
    margin-right: 4px;
}
.ranking__playedmatches .prize_info{
    position: absolute;
    left: 62px;
    top: 67%;
    font-weight: 600;
    font-size: 1rem;
}
.ranking__playedmatches .list__items > li.winner .prize_info {
    color: #31bc2f;
}
.ranking__playedmatches .list__items > li.loser .prize_info {
    color: #fe001d;
}
.ranking__playedmatches .list__items > li.loser .ranking__matches__event_main > div:first-child .user{
    filter: grayscale(1);
    opacity: .5;
}
.ranking__playedmatches .list__items > li.winner .ranking__matches__event_main > div:last-child .user{
    filter: grayscale(1);
    opacity: .5;
}
.ranking__playedmatches .list__items > li.cancelled .prize_info {
    color: #444;
}
.ranking__playedmatches .list__items > li.tied .prize_info {
    color: #c8a000;
}
.ranking__playedmatches .ranking__matches__event_date {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    /*word-spacing: 10px;*/
}

.ranking__playedmatches .box__subheader > div:nth-child(1),
.ranking__playedmatches:not(.resume) .list__items > li:not(.options) > a > div:nth-child(1) {
    flex: 0 0 150px;
    font-size: 1rem;
}
.ranking__playedmatches .box__subheader > div:nth-child(2),
.ranking__playedmatches:not(.resume) .list__items > li:not(.options) > a > div:nth-child(2) {
    flex: 0 0 120px;
}
.ranking__playedmatches .box__subheader > div:nth-child(4),
.ranking__playedmatches:not(.resume) .list__items > li:not(.options) > a > div:nth-child(4) {
    flex: 0 0 100px;
}
.ranking__playedmatches .box__subheader > div:nth-child(5),
.ranking__playedmatches:not(.resume) .list__items > li:not(.options) > a > div:nth-child(5) {
    flex: 0 0 200px;
}

/* Arcade score modal */
#modal__arcade-score .modal__title img{
    margin: -8px 0;
    vertical-align: middle;
}
#modal__arcade-score .modal__body{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    font-family: 'Play', Arial, sans-serif;
}
#modal__arcade-score .points-earned-block{
    position: relative;
    margin-bottom: 15px;
}
#modal__arcade-score .avatar{
    position: absolute;
    top: 10px;
    left: -30px;
    box-shadow: 0 0 10px rgba(255,255,255,.4);
    border-radius: 50%;
}
#modal__arcade-score .points-earned-text{
    height: 70px;
    width: 100%;
    min-width: 240px;
    padding: 0 20px 0 40px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    background-image: linear-gradient(to bottom, #747474 0%, #303030 40%);
    border-radius: 10px;
    border: 3px solid #2f2f2f;
    border-top-width: 4px;
    color: #fff;
}
#modal__arcade-score .points-earned-text h2{
    font-size: 1.8em;
    font-weight: 700;
    margin: 0 0 10px;
    font-family: 'Play', Arial, sans-serif;
}
#modal__arcade-score .points-earned-text p{
    font-size: 1.1em;
}
#modal__arcade-score .ribbon{
    height: 20px;
    width: auto;
}
#modal__arcade-score .points-total-position{
    margin: 0 0 20px;
}
#modal__arcade-score .points-total-position > div{
    display: flex;
    align-items: center;
    margin: 8px 0;
    font-size: 1.2em;
}
#modal__arcade-score .points-total-position > div span,
#modal__arcade-score .points-total-position > div img{
    margin: 0 7px 0 0;
}
body.webapp section.tickets{
    padding: 20px 4px;
}

body.webapp section.tickets h2{
    text-align: center;
    color: #ffffff;
    font-size: 1.6rem;
    margin: 0 auto 10px;
    line-height: 1.8rem;
        font-weight: 700;
}

body.webapp .ticket-form-categories-buttons .button{
    width: 90px;
    height: 90px;
    background: #acbbc4;
    margin: 5px;
    color: #3a3a3a;
}
body.webapp .ticket-form-categories-buttons .button.selected,
body.webapp .ticket-form-categories-buttons .button.selected:hover{
    background: #e5f6ff;
    color: #3a3a3a;
}

body.webapp .ticket-form-categories-buttons span.icon{
    font-size: 2em;
}

body.webapp .ticket-form-categories-buttons span:not(.icon){
    font-size: .8rem;
}
body.webapp #appfilter__games{
    position: fixed;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    background-color: #e5f6ff;
    border-radius: 6px;
    overflow: auto;
    z-index: 1000;
    padding: 20px;
}
body.webapp #appfilter__games .desc{
    font-size: 1.12rem;
    margin: 0 0 10px;
}
body.webapp #appfilter__games .filter__game{
    display: flex;
    width: 100%;
    align-items: center;
    justify: flex-start;
    padding: 5px 0;
}
body.webapp #appfilter__games .close{
    float: right;
    font-size: 1.4rem;
    padding: 4px;
    position: relative;
    top: -10px;
    right: -10px;
    color: #666;
}
body.webapp #appfilter__games .filter__game img{
    width: 50px;
    height: auto;
    display: block;
    margin: 0 20px 0 0;
    border: 2px solid transparent;
    border-radius: 50%;
}
body.webapp #appfilter__games .filter__game p{
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
}
body.webapp #appfilter__games .filter__game.selected img{
    border-color: #009752;
}
body.webapp #appfilter__games .filter__game.selected p{
    color: #009752;
}

/* New Login Screen */
body.webapp.prehome header{
    display: none;
}
body.webapp.prehome main{
    padding: 0;
    background: url(../images/app/bg_register.jpg) no-repeat center center / cover;
}
body.webapp.prehome main.bg2{
    padding: 0;
    background: url(../images/app/bg_login.jpg) no-repeat center center / cover;
}
body.webapp.prehome .welcome__webapp {
    min-height: calc(100vh - 100px);
    background: none;
}
body.webapp.prehome .welcome__loading-logo {
    min-height: 100vh;
    padding: 20%;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.webapp.prehome .welcome__loading-logo.hidden {
    display: none;
}
body.webapp.prehome .welcome__loading-logo img {
    max-width: 100%;
    max-height: 100%;
    mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .8) 20%, rgba(0, 0, 0, 1) 70%);
    mask-repeat: no-repeat;
    mask-size: 500%;
    mask-position: 500px 0;
    animation: welcome__loading-logo-animation 1s linear forwards;
}
@keyframes welcome__loading-logo-animation {
    to {
        -webkit-mask-position: -500px 0;
    }
}

body.webapp.prehome .header__logo{
    left: auto;
    position: relative;
    top: 0;
    margin: 30px auto 20px;
}
body.public > footer.hidden {
    display: none;
}

body.webapp .access__options{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
}
body.webapp .access__options .button-option,
body.webapp .access__options .button-option:not([disabled]):not(.disabled):hover,
body.webapp .access__options .button-option:not([disabled]):not(.disabled):focus{
    flex: 0 1 47%;
    background-color: #fff;
    padding: 16px 16px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #586477;
    margin: 0;
    border-bottom: 4px solid #586477;
    opacity: .5;
}

body.webapp .access__options .button-option:not([disabled]):not(.disabled):hover,
body.webapp .access__options .button-option:not([disabled]):not(.disabled):focus{
    background: #b9b9b9;
}


body.webapp .access__options.columns {
    flex-flow: column;
}

body.webapp .access__options.columns .button-option,
body.webapp .access__options.columns .button-option:not([disabled]):not(.disabled):hover,
body.webapp .access__options.columns .button-option:not([disabled]):not(.disabled):focus{
    margin-top: 20px;
}

body.webapp #form__slider{
    flex-flow: nowrap;
    left: 0;
}
body.webapp .login__form{
    align-items: center;
    justify-content: flex-start;
    display: flex;
    flex-flow: column;
    padding: 20px;
    max-width: 100%;
    min-width: 100%;
    display: inline-flex;
    margin: 0 auto;
}
body.webapp .login__form.hidden {
    display: none;
}

body.webapp .access__options .button-option.active,
body.webapp .access__options .button-option.active:not([disabled]):not(.disabled):hover,
body.webapp .access__options .button-option.active:not([disabled]):not(.disabled):focus{
    opacity: 1;
}
body.webapp .login__form .form__input{
    width: 100%;
    margin: 10px 0;

}
body.webapp .login__form-email:before,
body.webapp .login__form-username:before,
body.webapp .login__form-password:before{
    display: none;
    content: none;
}
body.webapp .form__checkbox{
    display: flex;
    height: 36px;
    align-items: center;
}
body.webapp .form__checkbox input,
body.webapp input.form__checkbox{
    width: 26px;
    height: 24px;
    margin: 0 9px 0 0;
}

body.webapp .form__checkbox input:after,
body.webapp input.form__checkbox:after{
    background: #e5f6ff;
    border-radius: 4px;
}

body.webapp.prehome .button.button-green{
    background-color: #00b630;
    border-bottom-color: #00671d;
    font-size: 1.1rem;
    padding: 14px 24px;
    min-width: 200px;
}

body.webapp.prehome .login__form #form__recover .login__submit,
body.webapp.prehome .login__form #form__resend .login__submit{
    margin: 5px 0 30px 0;
}
body.webapp.prehome .login__recover,
body.webapp.prehome .login__resend{
    padding: 0;
}

body.webapp.prehome .show-form,
body.webapp.prehome .social_logins,
body.webapp.prehome .login__checkbox, .login__options{
    color: #ffffff;
    width: 100%;
}

body.webapp.prehome .social_logins .separator{
    width: 100%;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}
body.webapp.prehome .social_logins .separator span{
    margin: 0 5px;
}
body.webapp.prehome .social_logins .separator:after,
body.webapp.prehome .social_logins .separator:before{
    content: "";
    display: inline-flex;
    width: 46%;
    background-color: #73797e;
    height: 1px;
}
body.webapp.prehome > footer{
    min-height: 30px;
}

/** Telegram */
body.webapp.telegram:not(.prehome) > main {
    margin-bottom: 70px;
}
body.webapp.telegram:not(.prehome) > footer {
    display: none;
}

/** Webapp Tutorial */
#modal__webapp-turorial .modal__body {
    max-width: 500px;
    margin: 0 auto;
    padding: 25px 20px 20px;
    color: #4e4e4e;
    border-radius: 6px;
    background: #e1f5fe;
    font-size: 1.3rem;
    line-height: 1.6rem;
}
.webapp-tutorial {
    min-height: 500px;
    position: relative;

    .webapp-tutorial__slide {
        position: absolute;
        width: 100%;
        max-width: 500px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity .4s ease-in-out;
        pointer-events: none;

        &.active {
            opacity: 1;
            pointer-events: initial;
        }

        h1 {
            text-align: center;
            font-weight: 900;
            font-size: 1.8rem;
            line-height: 1.4rem;
            margin: 0 auto 10px;
        }
        h2 {
            text-align: center;
            font-weight: normal;
            font-size: 1.4rem;
            line-height: 1.4rem;
            margin: 0 auto 20px;
        }
        .tutorial-image.row {
            align-items: flex-end;
            gap: 20px;
            margin: 40px 0 30px;
        }
        .tutorial-image .column {
            flex-basis: 0;
        }
        .tutorial-image .column > * {
            padding: 0;
        }
        .tutorial-image img {
            max-height: 95px;
            margin-bottom: 10px;
        }
        .tutorial-list li {
            margin: 10px 0 12px 20px;
            list-style: '❯  ';
        }
        .footer-title {
            text-align: center;
            font-size: 1.4rem;
            margin-top: 40px;
            font-weight: bold;
        }
        .tutorial-icon {
            text-align: center;
            display: flex;
            flex-flow: column;
            font-size: 40px;
            margin-bottom: 10px;
        }
    }
}
.webapp-tutorial__pagination {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    user-select: none;

    .webapp-tutorial__pagination-prev,
    .webapp-tutorial__pagination-next {
        cursor: pointer;

        &.disabled {
            filter: grayscale(1);
            opacity: .25;
            cursor: auto;
        }

        img {
            width: 45px;            
        }
    }
    .webapp-tutorial__pagination-prev img {
        transform: scaleX(-1);
    }

    .webapp-tutorial__pagination-pages {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        gap: 22px;

        .webapp-tutorial__pagination-page {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #9eb9ca;
            cursor: pointer;

            &.active {
                background: #052e41;
            }
        }
    }
}

/** Newsletter footer */
.newsletter-footer {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 350px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1rem;

    div {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;

        &.title {
            justify-content: flex-start;
        }
    }

    form {
        width: 100%;
    }

    .input {
        flex: 1 0 auto;
        padding-left: 14px;
    }
    .button {
        flex: 0 1 auto;
        padding: 11px 18px 9px;
    }

    body.webapp footer & {
        margin-bottom: 25px;
    }
}

/** Google AdSense */
.google-adsense-banner {
    display: block;
    width: 100%;
    padding: 20px;
    background: #eff4f8;

    h2 {
        margin: 0 20px 20px 14px;
        color: #201e21;
        font-weight: 700;
        font-size: 1.3em;
        line-height: 1.8rem;
        text-align: left;

        span {
            padding-left: 8px;
            font-weight: normal;
        }
    }

    > div {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin: 10px auto;
    }

    body.webapp & {
        background: #000a23;

        h2 {
            margin-left: 0;
            color: #fff;
            font-size: 1.2em;
        }
    }
    &.margin {
        margin-top: 20px;
    }

    .adsbygoogle {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    .google-adsense-fallback {
        font-size: 1.2em;
    }
}

/* GDPR  */
.gdpr-cookie-notice{position:fixed;background:#333;left:0;bottom:0;right:0;padding:20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all ease 1s;transition:all ease 1s;-webkit-transform:translateY(100%);transform:translateY(100%);z-index:49;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}@media (max-width: 1024px){.gdpr-cookie-notice{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;bottom:0px;}}.gdpr-cookie-notice-loaded .gdpr-cookie-notice{-webkit-transform:translateY(0);transform:translateY(0)}.gdpr-cookie-notice-description{margin:0;padding:0 16px 0 0;color:rgba(255,255,255,0.75);font-size:14px;line-height:20px;text-align:left}.gdpr-cookie-notice-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0 0 0 auto;background:none;width:auto;height:auto;padding:0;cursor: pointer;}.gdpr-cookie-notice-nav-item{text-decoration:none;display:block;height:40px;line-height:40px;white-space:nowrap;color:#fff;padding:0 16px;font-size:15px;font-weight:600}.gdpr-cookie-notice-nav-item:hover{text-decoration:none}.gdpr-cookie-notice-nav-item-btn{background:#1ad56c;border-radius:3px}.gdpr-cookie-notice-modal{position:fixed;left:0;top:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg height="12" viewBox="0 0 8 12" width="8" xmlns="http://www.w3.org/2000/svg"><path d="m1.41 0-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z" fill="#1ad56c"/></svg>');z-index:1001;background:rgba(0,0,0,0.4);overflow:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:20px 10px;display:none}.gdpr-cookie-notice-show-modal .gdpr-cookie-notice-modal{display:-webkit-box;display:-ms-flexbox;display:flex}.gdpr-cookie-notice-modal-content{width:470px;border-radius:6px;background:#fff;margin:auto}.gdpr-cookie-notice-modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:16px;border-bottom:1px solid #f4f5f7}.gdpr-cookie-notice-modal-title{font-size:18px;color:rgba(0,0,0,0.8);font-weight:600;line-height:18px;margin:0;padding:0}.gdpr-cookie-notice-modal-close{width:24px;height:24px;margin:0 0 0 auto;background:none;border:none;outline:none;padding:0;position:relative;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.gdpr-cookie-notice-modal-close:before,.gdpr-cookie-notice-modal-close:after{width:18px;height:2px;content:'';display:block;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background:#bdbdbd}.gdpr-cookie-notice-modal-close:after{-webkit-transform:translate(-50%, -50%) rotate(90deg);transform:translate(-50%, -50%) rotate(90deg)}.gdpr-cookie-notice-modal-close:hover{-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:1}.gdpr-cookie-notice-modal-cookies{display:block;margin:0;padding:0;list-style-type:none}.gdpr-cookie-notice-modal-cookie{display:block;border-bottom:1px solid #f4f5f7;list-style-type:none;padding:0;margin:0}.gdpr-cookie-notice-modal-cookie-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:12px 16px}.gdpr-cookie-notice-modal-cookie-title{font-weight:normal;font-size:15px;color:rgba(0,0,0,0.8);margin:0;padding:0;line-height:1;position:relative;cursor:pointer;}.gdpr-cookie-notice-modal-cookie-title:after{width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#bdbdbd transparent transparent transparent;content:'';display:block;position:absolute;right:-17px;top:50%;margin-top:-2px;-webkit-transition:all ease 0.3s;transition:all ease 0.3s}.open .gdpr-cookie-notice-modal-cookie-title:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.gdpr-cookie-notice-modal-cookie-state{color:#1ad56c;margin-left:auto;font-size:15px}.gdpr-cookie-notice-modal-cookie-input{opacity:0;pointer-events: none;}.gdpr-cookie-notice-modal-cookie-input:checked+.gdpr-cookie-notice-modal-cookie-input-switch{background:#1ad56c;-webkit-box-shadow:inset 0px 0px 0px 1px #1ad56c;box-shadow:inset 0px 0px 0px 1px #1ad56c}.gdpr-cookie-notice-modal-cookie-input-switch{width:24px;height:24px;border-radius:50%;-webkit-box-shadow:inset 0px 0px 0px 1px #bdbdbd;box-shadow:inset 0px 0px 0px 1px #bdbdbd;margin:0 0 0 auto;position:relative;-webkit-transition:all ease 0.3s;transition:all ease 0.3s;cursor:pointer}.gdpr-cookie-notice-modal-cookie-input-switch:after{position:absolute;left:0;right:0;bottom:0;top:0;background:url('data:image/svg+xml;utf8,<svg height="11" viewBox="0 0 14 11" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m5 10.42-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42z" fill="rgb(255,255,255)" fill-rule="evenodd"/></svg>') no-repeat center 7px;content:'';display:block}.gdpr-cookie-notice-modal-cookie-info{margin:0;padding:0 16px 12px 16px;font-size:13px;color:rgba(0,0,0,0.5);line-height:16px;display:none}.open .gdpr-cookie-notice-modal-cookie-info{display:block}.gdpr-cookie-notice-modal-footer{background:#f4f5f7;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:15px 16px 16px 16px;border-radius:0 0 6px 6px;-ms-flex-wrap:wrap;flex-wrap:wrap}.gdpr-cookie-notice-modal-footer-item{height:40px;line-height:40px;font-size:15px;text-decoration:none;margin:0;padding:0;color:#1ad56c;position:relative;cursor:pointer;}.gdpr-cookie-notice-modal-footer-item:after{position:absolute;right:-16px;top:50%;margin-top:-5px;background:url('data:image/svg+xml;utf8,<svg height="12" viewBox="0 0 8 12" width="8" xmlns="http://www.w3.org/2000/svg"><path d="m1.41 0-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z" fill="#1ad56c"/></svg>') no-repeat left center;height:12px;width:8px;content:'';display:block}.gdpr-cookie-notice-modal-footer-item-btn{padding:0 16px;font-weight:600;color:#fff;background:#1ad56c;border-radius:3px;position:relative}.gdpr-cookie-notice-modal-footer-item-btn span{-webkit-transition:all ease 0.3s;transition:all ease 0.3s}.gdpr-cookie-notice-modal-footer-item-btn:after{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;content:'';opacity:0;-webkit-transition:all ease 0.3s;transition:all ease 0.3s;display:block;background:url('data:image/svg+xml;utf8,<svg height="11" viewBox="0 0 14 11" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m5 10.42-5-5 1.41-1.41 3.59 3.58 7.59-7.59 1.41 1.42z" fill="rgb(255,255,255)" fill-rule="evenodd"/></svg>') no-repeat center}.gdpr-cookie-notice-modal-footer-item-btn.saved span{opacity:0}.gdpr-cookie-notice-modal-footer-item-btn.saved:after{opacity:1}.gdpr-cookie-notice-modal-footer-item:hover{text-decoration:none;opacity:1;}.gdpr-cookie-notice-modal-footer-item-btn:hover{color:#fff;}@media (max-width: 1024px){.gdpr-cookie-notice-description{padding:0;margin:0 0 10px 0;font-size:12px;line-height:18px}.gdpr-cookie-notice-nav-item{font-size: 12px;}.gdpr-cookie-notice-loaded body:not(.public) .gdpr-cookie-notice{-webkit-transform: translateY(-70px);transform: translateY(-70px);}}
@font-face {
  font-family: 'icomoon';
  src: url(../fonts/icomoon.eot?vwb29x);
  src: url(../fonts/icomoon.eot?vwb29x#iefix) format('embedded-opentype'),
       url(../fonts/icomoon.ttf?vwb29x) format('truetype'),
       url(../fonts/icomoon.woff?vwb29x) format('woff'),
       url(../fonts/icomoon.svg?vwb29x#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-disk:before {
  content: "\e962";
}
.icon-matchmaking:before {
  content: "\e90c";
}
.icon-challenge:before {
  content: "\e90c";
}
.icon-ranked:before {
  content: "\e90c";
}
.icon-duel:before {
  content: "\e944";
}
.icon-season:before {
  content: "\eb94";
}
.icon-tournament:before {
  content: "\ec66";
}
.icon-team_size:before {
  content: "\e926";
}
.icon-region:before {
  content: "\e917";
}
.icon-map:before {
  content: "\ea38";
}
.icon-premium-color .path2:before {
  color: rgb(244, 145, 1);
}
.icon-premium-color .path4:before {
  color: rgb(254, 167, 1);
}
.icon-premium-color .path6:before {
  color: rgb(254, 167, 1);
}
/**
 - QUITAR color DE icon-playnow-fill
 - QUITAR color DE icon-medal-star-fill
 */
/***************************/
/* COPIAR A PARTIR DE AQUÍ */
/***************************/
.icon-x:before {
  content: "\e95c";
}
.icon-app-transactions:before {
  content: "\e957";
}
.icon-app-versus:before {
  content: "\e958";
}
.icon-app-report-game:before {
  content: "\e956";
}
.icon-app-events:before {
  content: "\e959";
}
.icon-app-notifications:before {
  content: "\e95a";
}
.icon-app-prizes:before {
  content: "\e95b";
}
.icon-tiktok:before {
  content: "\e955";
}
.icon-disk:before {
  content: "\e962";
}
.icon-equalizer:before {
  content: "\e992";
}
.icon-bin:before {
  content: "\e9ad";
}
.icon-arcade:before {
  content: "\e900";
}
.icon-bloquear:before {
  content: "\e901";
}
.icon-categorias:before {
  content: "\e902";
}
.icon-config-general:before {
  content: "\e903";
}
.icon-config-sidebar:before {
  content: "\e904";
}
.icon-contraoferta:before {
  content: "\e905";
}
.icon-duel-arrow:before {
  content: "\e906";
}
.icon-newspaper:before {
  content: "\e90b";
}
.icon-pencil:before {
  content: "\e910";
}
.icon-pencil6:before {
  content: "\e92f";
}
.icon-pen:before {
  content: "\e91c";
}
.icon-gamepad2:before {
  content: "\e96c";
}
.icon-gamepad:before {
  content: "\e96d";
}
.icon-pacman:before {
  content: "\e96e";
}
.icon-clubs:before {
  content: "\e970";
}
.icon-bullhorn:before {
  content: "\e979";
}
.icon-library2:before {
  content: "\e999";
}
.icon-file-text:before {
  content: "\e99b";
}
.icon-file-eye2:before {
  content: "\e9ac";
}
.icon-copy2:before {
  content: "\e9b8";
}
.icon-folder-upload:before {
  content: "\e9d3";
}
.icon-folder-open:before {
  content: "\e9dc";
}
.icon-ticket:before {
  content: "\e9fa";
}
.icon-bag:before {
  content: "\ea07";
}
.icon-coins:before {
  content: "\ea0a";
}
.icon-coin-dollar:before {
  content: "\ea0b";
}
.icon-cash2:before {
  content: "\ea12";
}
.icon-credit-card:before {
  content: "\ea15";
}
.icon-credit-card2:before {
  content: "\ea16";
}
.icon-envelope:before {
  content: "\ea31";
}
.icon-location:before {
  content: "\ea38";
}
.icon-map:before {
  content: "\ea49";
}
.icon-alarm:before {
  content: "\ea53";
}
.icon-bell:before {
  content: "\ea57";
}
.icon-display2:before {
  content: "\ea74";
}
.icon-mobile:before {
  content: "\ea78";
}
.icon-box:before {
  content: "\ea84";
}
.icon-database:before {
  content: "\ea93";
}
.icon-undo2:before {
  content: "\eabf";
}
.icon-bubble:before {
  content: "\eac4";
}
.icon-bubbles:before {
  content: "\eac5";
}
.icon-bubbles2:before {
  content: "\eac6";
}
.icon-bubbles4:before {
  content: "\eac9";
}
.icon-bubbles3:before {
  content: "\eade";
}
.icon-bubble-check:before {
  content: "\eae4";
}
.icon-bubble-notification:before {
  content: "\eaee";
}
.icon-user:before {
  content: "\eaf7";
}
.icon-users:before {
  content: "\eaf8";
}
.icon-user-plus:before {
  content: "\eaf9";
}
.icon-user-minus:before {
  content: "\eafa";
}
.icon-user-cancel:before {
  content: "\eafb";
}
.icon-user-block:before {
  content: "\eafc";
}
.icon-user-check:before {
  content: "\eafe";
}
.icon-users4:before {
  content: "\eb0c";
}
.icon-spinner2:before {
  content: "\eb23";
}
.icon-spinner:before {
  content: "\eb24";
}
.icon-spinner5:before {
  content: "\eb26";
}
.icon-search:before {
  content: "\eb33";
}
.icon-key:before {
  content: "\eb4a";
}
.icon-key2:before {
  content: "\eb4c";
}
.icon-keyhole:before {
  content: "\eb4f";
}
.icon-lock:before {
  content: "\eb50";
}
.icon-lock2:before {
  content: "\eb53";
}
.icon-wrench3:before {
  content: "\eb5a";
}
.icon-cog:before {
  content: "\eb5f";
}
.icon-cogs:before {
  content: "\eb60";
}
.icon-hammer-wrench:before {
  content: "\eb69";
}
.icon-magic-wand2:before {
  content: "\eb6e";
}
.icon-bug:before {
  content: "\eb78";
}
.icon-stats-bars:before {
  content: "\eb88";
}
.icon-stats-bars2:before {
  content: "\eb8a";
}
.icon-stats-bars3:before {
  content: "\eb8c";
}
.icon-stats-growth:before {
  content: "\eb90";
}
.icon-ranking:before {
  content: "\eb94";
}
.icon-ladder:before {
  content: "\eb98";
}
.icon-medal-star:before {
  content: "\eb9f";
}
.icon-medal:before {
  content: "\eba0";
}
.icon-medal2:before {
  content: "\eba1";
}
.icon-trophy:before {
  content: "\eba7";
}
.icon-trophy-star:before {
  content: "\eba8";
}
.icon-gift:before {
  content: "\ebac";
}
.icon-gift2:before {
  content: "\ebad";
}
.icon-rocket:before {
  content: "\ebdd";
}
.icon-fire:before {
  content: "\ebe8";
}
.icon-briefcase:before {
  content: "\ec02";
}
.icon-paperplane:before {
  content: "\ec09";
}
.icon-truck:before {
  content: "\ec0f";
}
.icon-target:before {
  content: "\ec2c";
}
.icon-shield:before {
  content: "\ec35";
}
.icon-bow:before {
  content: "\ec3a";
}
.icon-sword:before {
  content: "\ec3b";
}
.icon-switch:before {
  content: "\ec4b";
}
.icon-list-numbered:before {
  content: "\ec58";
}
.icon-tree:before {
  content: "\ec66";
}
.icon-lan:before {
  content: "\ec68";
}
.icon-menu:before {
  content: "\ec6a";
}
.icon-menu2:before {
  content: "\ec6d";
}
.icon-menu3:before {
  content: "\ec6f";
}
.icon-menu4:before {
  content: "\ec71";
}
.icon-menu5:before {
  content: "\ec73";
}
.icon-upload2:before {
  content: "\ec7f";
}
.icon-download10:before {
  content: "\ec8f";
}
.icon-earth:before {
  content: "\ec96";
}
.icon-link:before {
  content: "\ec99";
}
.icon-unlink:before {
  content: "\ec9c";
}
.icon-flag:before {
  content: "\eca4";
}
.icon-eye:before {
  content: "\ecae";
}
.icon-eye-blocked:before {
  content: "\ecb1";
}
.icon-furniture:before {
  content: "\ecde";
}
.icon-star-full:before {
  content: "\ece2";
}
.icon-star-full2:before {
  content: "\ece5";
}
.icon-heart4:before {
  content: "\ecea";
}
.icon-heart:before {
  content: "\ecef";
}
.icon-thumbs-up:before {
  content: "\ecf8";
}
.icon-thumbs-down:before {
  content: "\ecf9";
}
.icon-cursor2:before {
  content: "\ed27";
}
.icon-touch:before {
  content: "\ed35";
}
.icon-warning:before {
  content: "\ed4f";
}
.icon-warning2:before {
  content: "\ed50";
}
.icon-notification:before {
  content: "\ed51";
}
.icon-notification2:before {
  content: "\ed52";
}
.icon-question:before {
  content: "\ed55";
}
.icon-question2:before {
  content: "\ed56";
}
.icon-plus:before {
  content: "\ed5b";
}
.icon-minus:before {
  content: "\ed5c";
}
.icon-plus-circle:before {
  content: "\ed5f";
}
.icon-info:before {
  content: "\ed63";
}
.icon-info2:before {
  content: "\ed64";
}
.icon-cancel-circle:before {
  content: "\ed65";
}
.icon-cancel-circle2:before {
  content: "\ed66";
}
.icon-blocked:before {
  content: "\ed67";
}
.icon-cross:before {
  content: "\ed6c";
}
.icon-cross2:before {
  content: "\ed6d";
}
.icon-checkmark:before {
  content: "\ed6f";
}
.icon-enter3:before {
  content: "\ed7a";
}
.icon-pause:before {
  content: "\ed7f";
}
.icon-play:before {
  content: "\ed85";
}
.icon-pause2:before {
  content: "\ed86";
}
.icon-volume-medium:before {
  content: "\ed90";
}
.icon-volume-mute1:before {
  content: "\ed92";
}
.icon-volume-mute:before {
  content: "\ed95";
}
.icon-volume-0:before {
  content: "\eda5";
}
.icon-arrow-up:before {
  content: "\edb7";
}
.icon-arrow-up2:before {
  content: "\edba";
}
.icon-arrow-right:before {
  content: "\edbb";
}
.icon-arrow-right2:before {
  content: "\edbe";
}
.icon-arrow-down:before {
  content: "\edbf";
}
.icon-arrow-down2:before {
  content: "\edc2";
}
.icon-arrow-left:before {
  content: "\edc3";
}
.icon-arrow-left2:before {
  content: "\edc6";
}
.icon-sort-up:before {
  content: "\edc7";
}
.icon-sort-down:before {
  content: "\edc9";
}
.icon-arrow-up3:before {
  content: "\edcc";
}
.icon-arrow-right3:before {
  content: "\edce";
}
.icon-arrow-down3:before {
  content: "\edd0";
}
.icon-arrow-left3:before {
  content: "\edd2";
}
.icon-arrow-right16:before {
  content: "\ee38";
}
.icon-enter5:before {
  content: "\ee40";
}
.icon-transmission2:before {
  content: "\ee47";
}
.icon-sort-amount-desc:before {
  content: "\ee51";
}
.icon-key-up:before {
  content: "\ee5e";
}
.icon-key-right:before {
  content: "\ee5f";
}
.icon-key-down:before {
  content: "\ee60";
}
.icon-key-left:before {
  content: "\ee61";
}
.icon-mail3:before {
  content: "\eee4";
}
.icon-google-plus:before {
  content: "\eeea";
}
.icon-google-plus2:before {
  content: "\eeeb";
}
.icon-facebook:before {
  content: "\eeef";
}
.icon-facebook2:before {
  content: "\eef0";
}
.icon-twitter:before {
  content: "\eef5";
}
.icon-telegram:before {
  content: "\eef4";
}
.icon-youtube:before {
  content: "\eefc";
}
.icon-twitch:before {
  content: "\eefe";
}
.icon-linkedin2:before {
  content: "\ef29";
}
.icon-paypal:before {
  content: "\ef37";
}
.icon-chrome:before {
  content: "\ef38";
}
.icon-occash-color .path1:before {
  content: "\e94f";
  color: rgb(117, 255, 116);
}
.icon-occash-color .path2:before {
  content: "\e950";
  margin-left: -1em;
  color: rgb(0, 48, 0);
}
.icon-occash-color .path3:before {
  content: "\e951";
  margin-left: -1em;
  color: rgb(28, 96, 28);
}
.icon-occash-color .path4:before {
  content: "\e952";
  margin-left: -1em;
  color: rgb(28, 96, 28);
}
.icon-occash-color .path5:before {
  content: "\e953";
  margin-left: -1em;
  color: rgb(0, 94, 0);
}
.icon-occash-color .path6:before {
  content: "\e954";
  margin-left: -1em;
  color: rgb(179, 255, 0);
}
.icon-playnow-fill:before {
  content: "\e94e";
}
.icon-events-fill:before {
  content: "\e946";
}
.icon-funcoins-color:before {
  content: "\e947";
  color: #8ab8ba;
}
.icon-premium-color .path1:before {
  content: "\e948";
  color: rgb(254, 222, 31);
}
.icon-premium-color .path2:before {
  content: "\e949";
  margin-left: -1em;
  color: rgb(244, 145, 1);
}
.icon-premium-color .path3:before {
  content: "\e94a";
  margin-left: -1em;
  color: rgb(244, 145, 1);
}
.icon-premium-color .path4:before {
  content: "\e94b";
  margin-left: -1em;
  color: rgb(254, 167, 1);
}
.icon-premium-color .path5:before {
  content: "\e94c";
  margin-left: -1em;
  color: rgb(254, 167, 1);
}
.icon-premium-color .path6:before {
  content: "\e94d";
  margin-left: -1em;
  color: rgb(254, 167, 1);
}
.icon-duel:before {
  content: "\e944";
}
.icon-padlock:before {
  content: "\e93f";
}
.icon-talk-about:before {
  content: "\e940";
}
.icon-prizes-total:before {
  content: "\e941";
}
.icon-prizes-users:before {
  content: "\e942";
}
.icon-prizes-delivered:before {
  content: "\e943";
}
.icon-filter:before {
  content: "\e93e";
}
.icon-premium-logo:before {
  content: "\e93d";
}
.icon-arrow-keys:before {
  content: "\e93a";
}
.icon-premium-avatar:before {
  content: "\e939";
}
.icon-check-green:before {
  content: "\e93b";
  color: #41ad49;
}
.icon-daily-reward:before {
  content: "\e93c";
}
.icon-controller:before {
  content: "\e936";
}
.icon-medal-star-fill:before {
  content: "\e937";
}
.icon-crown:before {
  content: "\e938";
}
.icon-invite-friends:before {
  content: "\e945";
}
.icon-sword-fill:before {
  content: "\e933";
}
.icon-random:before {
  content: "\e934";
}
.icon-man:before {
  content: "\e935";
}
.icon-menu-duel-fill:before {
  content: "\e913";
}
.icon-menu-duel:before {
  content: "\e914";
}
.icon-duel-sidebar:before {
  content: "\e932";
}
.icon-success:before {
  content: "\e931";
}
.icon-error:before {
  content: "\e930";
}
.icon-instagram:before {
  content: "\e92e";
}
.icon-discord:before {
  content: "\e92c";
}
.icon-language:before {
  content: "\e92d";
}
.icon-friend-add:before {
  content: "\e908";
}
.icon-friend-block:before {
  content: "\e92a";
}
.icon-friend-del:before {
  content: "\e92b";
}
.icon-timeleft:before {
  content: "\e907";
}
.icon-amount:before {
  content: "\e921";
}
.icon-select:before {
  content: "\e928";
}
.icon-chat:before {
  content: "\e91f";
}
.icon-report:before {
  content: "\e920";
}
.icon-group:before {
  content: "\e929";
}
.icon-quests:before {
  content: "\e922";
}
.icon-notifications:before {
  content: "\e923";
}
.icon-matches:before {
  content: "\e924";
}
.icon-send:before {
  content: "\e925";
}
.icon-social:before {
  content: "\e926";
}
.icon-support:before {
  content: "\e927";
}
.icon-open-ticket:before {
  content: "\e915";
}
.icon-settings:before {
  content: "\e916";
}
.icon-game-accounts:before {
  content: "\e917";
}
.icon-logout:before {
  content: "\e918";
}
.icon-info-custom:before {
  content: "\e919";
}
.icon-prizes:before {
  content: "\e91a";
}
.icon-tickets:before {
  content: "\e91b";
}
.icon-transactions:before {
  content: "\e91d";
}
.icon-user-custom:before {
  content: "\e91e";
}
.icon-menu-games-fill:before {
  content: "\e909";
}
.icon-menu-games:before {
  content: "\e90a";
}
.icon-menu-matchmaking-fill:before {
  content: "\e90c";
}
.icon-menu-matchmaking:before {
  content: "\e90d";
}
.icon-menu-raffles-fill:before {
  content: "\e90e";
}
.icon-menu-raffles:before {
  content: "\e90f";
}
.icon-menu-prizes-fill:before {
  content: "\e911";
}
.icon-menu-prizes:before {
  content: "\e912";
}
/*************** SCROLLBAR BASE CSS ***************/
.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
    height: 100%;
    max-height: 100%;
}
.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0 0 10px 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
.scroll-wrapper.scroll--rtl {
    direction: rtl;
}

.scroll-element {
    box-sizing: content-box;
    display: none;
}
.scroll-element div {
    box-sizing: content-box;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}
.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}

.scroll-textarea {
    border: 1px solid #ccc;
    border-top-color: #999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}

/*************** SCROLLBAR ONLINE CHAMPION ***************/
.scrollbar > .scroll-element,
.scrollbar > .scroll-element div {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar > .scroll-element .scroll-element_track {
    display: none;
}

.scrollbar > .scroll-element .scroll-bar {
    display: block;
    border-radius: 7px;
    background-color: rgba(108, 110, 113, .8);
    transition: opacity .2s linear;
    opacity: 0;
}

.scrollbar:hover > .scroll-element .scroll-bar,
.scrollbar > .scroll-element.scroll-draggable .scroll-bar {
    opacity: .8;
}

.scrollbar > .scroll-element.scroll-x {
    bottom: 0px;
    height: 0px;
    left: 0;
    min-width: 100%;
    overflow: visible;
    width: 100%;
}

.scrollbar > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0px;
    top: 0;
    width: 0px;
}

/* scrollbar height/width & offset from container borders */
.scrollbar > .scroll-element.scroll-x .scroll-bar {
    height: 7px;
    min-width: 10px;
    top: -9px;
}

.scrollbar > .scroll-element.scroll-y .scroll-bar {
    left: -9px;
    min-height: 10px;
    width: 7px;
}

.scrollbar > .scroll-element.scroll-x .scroll-element_outer {
    left: 2px;
}

.scrollbar > .scroll-element.scroll-x .scroll-element_size {
    left: -4px;
}

.scrollbar > .scroll-element.scroll-y .scroll-element_outer {
    top: 2px;
}

.scrollbar > .scroll-element.scroll-y .scroll-element_size {
    top: -4px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size {
    left: -11px;
}

.scrollbar > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size {
    top: -11px;
}
#emojiPanel{
    position: absolute;
    top: -280px;
    z-index: 10;
    left: 10px;
}

.jemoji-menu {
  display: none;
}

.jemoji-icons {
  position: absolute;
  z-index: 1;
  overflow: auto;
  max-height: 250px;
  margin-top: 20px;
  padding: 5px;
  padding-bottom: 0;
  border: 1px solid rgba(143, 193, 228, .6);
  border-radius: 5px;
  background-color: #fff;
}

/* Style when info about keybindings is displayed */
.jemoji-menu .jemoji-info + .jemoji-icons {
  margin-top: 50px;

  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.jemoji-menu-arrow {
  position: absolute;
}

.jemoji-menu-arrow.up {
	display: none;
	width: 0;
	height: 0;
	margin-top: 10px;
	margin-left: 25px;

	border-right: 10px solid rgba(0, 0, 0, 0);
	border-bottom: 10px solid rgba(143, 193, 228, .6);
	border-left: 10px solid rgba(0, 0, 0, 0);
}

.jemoji-info {
    font-size: 13px;

    position: absolute;
    z-index: 1;

    height: 30px;
    margin-top: 20px;
    padding: 3px 10px 0 10px;

    color: #7f7f83;
    /*border: 1px solid rgba(143, 193, 228, .6);*/
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #4b4b4b;
}

.jemoji-info div {
  float: left;

  margin-right: 15px;
}

.jemoji-info .jemoji-close {
    text-align: right;
    width: 100%;
    font-weight: 900;
    font-size: 12px;
	margin-right: 0;
	cursor: pointer;
}

.jemoji-icons > div {
	font-size: 13px;
	margin: 0 3px;
	margin-bottom: 2px;
	padding: 4px;
	cursor: pointer;
	color: #a0a0a0;
	display: inline-block;
}

.jemoji-icons > div:hover,
.jemoji-icons > div:focus,
.jemoji-icons > div:active,
.jemoji-icons > div.active {
  color: #fff;
  border-radius: 5px;
  background-color: #439fe0;
}

.jemoji-icons > div > img {
	width: 20px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;
}

.jemoji-icons > span {
  float: left;
}

/* Themes */
.jemoji-menu.blue .jemoji-icons {
  border-color: #4688bd;
}

.jemoji-menu.blue .jemoji-info {
  color: #fff;
  border-color: #4688bd;
  background-color: #4688bd;
}

.jemoji-menu.blue .jemoji-icons > div:hover,
.jemoji-menu.blue .jemoji-icons > div:focus,
.jemoji-menu.blue .jemoji-icons > div:active,
.jemoji-menu.blue .jemoji-icons > div.active {
  background-color: #4688bd;
}

.jemoji-menu.blue .jemoji-menu-arrow.up {
  border-bottom-color: #4688bd;
}

.jemoji-menu.green .jemoji-icons {
  border-color: #63b546;
}

.jemoji-menu.green .jemoji-info {
  color: #fff;
  border-color: #63b546;
  background-color: #63b546;
}

.jemoji-menu.green .jemoji-icons > div:hover,
.jemoji-menu.green .jemoji-icons > div:focus,
.jemoji-menu.green .jemoji-icons > div:active,
.jemoji-menu.green .jemoji-icons > div.active {
  background-color: #63b546;
}

.jemoji-menu.green .jemoji-menu-arrow.up {
  border-bottom-color: #63b546;
}

.jemoji-menu.red .jemoji-icons {
  border-color: #d44a4a;
}

.jemoji-menu.red .jemoji-info {
  color: #fff;
  border-color: #d44a4a;
  background-color: #d44a4a;
}

.jemoji-menu.red .jemoji-icons > div:hover,
.jemoji-menu.red .jemoji-icons > div:focus,
.jemoji-menu.red .jemoji-icons > div:active,
.jemoji-menu.red .jemoji-icons > div.active {
  background-color: #d44a4a;
}

.jemoji-menu.red .jemoji-menu-arrow.up {
  border-bottom-color: #d44a4a;
}

.jemoji-menu.black .jemoji-icons {
  border-color: #4e4e4e;
}

.jemoji-menu.black .jemoji-info {
  color: #d2d2d2;
  border-color: #4e4e4e;
  background-color: #4e4e4e;
}

.jemoji-menu.black .jemoji-icons > div:hover,
.jemoji-menu.black .jemoji-icons > div:focus,
.jemoji-menu.black .jemoji-icons > div:active,
.jemoji-menu.black .jemoji-icons > div.active {
  background-color: #4e4e4e;
}

.jemoji-menu.black .jemoji-menu-arrow.up {
  border-bottom-color: #4e4e4e;
}