:root {
    --main-color: #F3AF0D;
    --main-color-rgb: 243, 175, 13;
    --main-color-rgba-1: rgba(243, 174, 13, 1);
    --main-color-rgba-0: rgba(243, 174, 13, 0);
    --main-color-light: rgba(242, 174, 13, 0.24);
    --main-color-half: rgba(242, 174, 13, 0.48);
    --white-color: #FFFFFF;
    --dark-color: #2C2C2C;
    --dark-color-rgb-number: 43, 43, 43;

    --primary-color: #111111;
    --secondary-color: #171717;
    --tertiary-color: #343434;

    --primary-light-color: rgba(17, 17, 17, 0.48);
    --primary-color-80: rgba(17, 17, 17, 0.80);
    --primary-color-0: rgba(17, 17, 17, 0);
    --primary-color-1: rgba(17, 17, 17, 1);
    --primary-rgb: 17, 17, 17;

    --black-24: rgba(0, 0, 0, 0.24);
    --dark-glass: rgba(17, 17, 17, 0.48);

    --secondary-color-96: rgba(23, 23, 23, 0.96);
    --secondary-color-72: rgba(23, 23, 23, 0.72);
    --secondary-color-rgba-1: rgba(23, 23, 23, 1);
    --secondary-color-rgba-0: rgba(23, 23, 23, 0);

    --input-field-bg: #2e2e2e;

    --tertiary-color-rgba-1: rgba(52, 52, 52, 1);
    --tertiary-color-rgba-0: rgba(52, 52, 52, 0);
    --half-tertiary: rgba(52, 52, 52, .48);

    --selection-color: rgba(0, 193, 71, 1);
    --selection-color-rgb: 0, 193, 71;
    --half-selection-color: rgba(0, 193, 71, 0.6);
    --med-selection-color: rgba(0, 193, 71, 0.32);
    --light-selection-color: rgba(0, 193, 71, 0.04);

    --light-main-color: rgba(243, 174, 13, 0.08);
    --light-main-bg: rgba(243, 174, 13, 0.04);
    --sub-color: #ff5d00;
    --light-grey-color: #F5F5F5;
    --grey-color: #e5e5e5;
    --dark-grey-color: #c8c8c8;
    --light-color: #f0f0f0;
    --error-light-color: rgba(235, 0, 0, 0.32);
    --error-bg-color: #fde5e5;
    --input-focus-color: #fef7e6;
    --footer-color: #595767;

    --error-color: #eb0000;
    --error-04-light-color: rgba(235, 0, 0, 0.04);

    --warning-color: #DF7700;
    --warning-light-color: rgba(223, 119, 0, 0.32);
    --warning-04-light-color: rgba(223, 119, 0, 0.04);

    --super-light-glass: rgba(255, 255, 255, 0.04);
    --light-glass-zero: rgba(255, 255, 255, 0);
    --light-glass: rgba(255, 255, 255, 0.08);
    --light-border: rgba(255, 255, 255, 0.16);
    --quarter-white: rgba(255, 255, 255, 0.24);
    --half-white: rgba(255, 255, 255, 0.48);
    --threequarter-white: rgba(255, 255, 255, 0.72);

    --begin-tier: #0e7f40;

    --begin-tier-gradient: #aed8a7 0%, var(--selection-color) 100%;
    --brnz-tier-gradient: #ffd694 0%, #6a2012 100%;
    --silv-tier-gradient: #ffffff 0%, #9d9d9d 100%;
    --gold-tier-gradient: #fffcef 0%, #c3942f 100%;
    --plat-tier-gradient: #c9c8c8 0%, #6d6d6d 100%;
    --diam-tier-gradient: #e5f5fd 0%, #5d879a 100%;

    --skeleton-highlight: rgba(255, 255, 255, 0.015);

    --game-btn-webkit-linear-gradient-btm: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.32)), color-stop(40%, rgba(255, 255, 255, 0)));
    --game-btn-linear-gradient-btm: linear-gradient(to bottom, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 40%);

    --button-color-1: var(--main-color-rgba-1);
    --button-color-2: rgba(255, 159, 22, 1);
}

body {
    background: var(--primary-color);
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: var(--main-font);
    line-height: 1.6;
    color: var(--white-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto Condensed', sans-serif;
    margin-top: 0px;
}


#outer-wrapper {}

#outer-wrapper:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: 0.48;
    mix-blend-mode: multiply;
    mix-blend-mode: luminosity;
    mix-blend-mode: overlay;

    background-image: url("../../../images/shared/background-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    /*	transform-origin: 25% 25%;*/

}

/* No animation on active tab */
.react-tabs__tab-panel.react-tabs__tab-panel--selected #outer-wrapper:after {
    /* animation: banneranimate 100.0s linear infinite; */
}

/* No animation on inactive tab */
.react-tabs__tab-panel #outer-wrapper:after {
    animation: none;
}

/* No animation on game tab outer-wrappers */
.react-tabs__tab-panel.react-tabs__tab-panel--selected #outer-wrapper.game::after {
    background: black;
    animation: none;
}

#outer-wrapper:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    background: linear-gradient(45deg, var(--primary-color) 35%, var(--tertiary-color) 100%);
}

/* BUTTON HOVERS */

.b-btn:hover,
.d-btn:hover,
.i-btn:hover
.social-btn:hover {
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.a-btn:hover,
.txt-btn:hover {
    color: var(--main-color);
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.inline-btn:hover,
.toast-btn:hover,
.table-btn:hover {
    color: var(--white-color);
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.invert-inline-btn:hover {
    color: var(--main-color);
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.button::before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--lg-border);
    z-index: 0;
    background: var(--main-color);
    transform: scale(1.00);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.b-btn:before,
.d-btn:before {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--lg-border);
    z-index: 0;
    transform: scale(1.00);
    -webkit-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

.b-btn {
    background: linear-gradient(180deg, var(--light-glass) 0%, var(--super-light-glass) 100%);
}

.b-btn:before {
    border: 1px solid transparent;
    background: linear-gradient(180deg, var(--quarter-white) 0%, var(--light-glass-zero) 80%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.d-btn:before {
    border: 1px solid var(--dark-color);
}

.okey-btn:hover:after,
.button:hover:before,
.b-btn:hover:before,
.d-btn:hover:before,
.social-btn:hover:before {
    transform: scale(1.05);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.b-btn:after,
.d-btn:after {
    position: absolute;
    content: '';
    display: block;
    width: 0%;
    height: 100%;
    top: 0;
    left: 50%;
    opacity: 0;
    border-radius: 50%;
    z-index: 1;
    background: var(--light-glass);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.small-btn-green:after {
    background: var(--light-glass);
}

.b-btn:hover:after,
.d-btn:hover:after,
.social-btn:hover:after {
    opacity: 1;
    left: -2.5%;
    width: 105%;
    border-radius: var(--lg-border);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}

.b-btn:disabled {
    color: var(--light-border);
    cursor: default;
}

/*NEW BUTTON STYLE*/
.button,
a.button {
    color: var(--primary-color);
}

.button:not(.okey-btn),
.button:not(.okey-btn):before {
    background: linear-gradient(180deg, var(--button-color-1) 0%, var(--button-color-2) 100%) border-box !important;
}

.button:not(.okey-btn) span {
    text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.16);
}

.button:not(.okey-btn):after {
    position: absolute;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0%;
    border-radius: 50%;
    z-index: 1;
    border-radius: var(--lg-btn-border);
    background: var(--super-light-glass);
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 100%) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.button:not(.okey-btn):hover:after {
    transform: scale(1.05);
    transition: all 0.4s ease-out;
}


@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-webkit-keyframes banneranimate {
    0% {
        opacity: 0;
        transform: scale(2.0) rotate(0deg);
    }

    3%,
    97% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(3.0) rotate(-180deg);
    }
}

/* HEADER PROFILE */
#header-profile-bar .hp-bal-bg:after {
    background: radial-gradient(ellipse at center, rgba(255, 132, 3, 1) 0, rgba(255, 132, 3, 0) 80%);
}

/* MOBILE DASHBOARD */
.quickplay-button {
    color: var(--primary-color);
}