/* General Styles --------------------------------------------------------------------------------- */
:root {
    --Bases-Black: #1A1A1A;
    --Bases-Darkest: #252525;
    --Bases-Dark-Gray: #2D2D2D;
    --Bases-Gray: #454545;
    --Bases-Light-Gray: #ECECEC;
    --Bases-Pure-White: #FCFCFC;
    --primary: #05E172;
    --secondary: #0CAB5A;
    --tertiary: #00683E;
    --green-bplay: #04F77C;
    --accent: #9C0CCB;
}
/* Background Color */
.bg-bases-black {
    background-color: var(--Bases-Black, #1A1A1A);
}
.bg-bases-darkest {
    background-color: var(--Bases-Darkest, #252525);
}
.bg-bases-dark-gray {
    background-color: var(--Bases-Dark-Gray, #2D2D2D);
}
.bg-bases-gray {
    background-color: var(--Bases-Gray, #454545);
}
.bg-bases-light-gray {
    background-color: var(--Bases-Light-Gray, #ECECEC);
}
.bg-bases-pure-white {
    background-color: var(--Bases-Pure-White, #FCFCFC);
}
.bg-primary {
    background-color: var(--primary, #05E172);
}
.bg-secondary {
    background-color: var(--secondary, #0CAB5A);
}
.bg-tertiary {
    background-color: var(--tertiary, #00683E);
}
.bg-green-bplay {
    background-color: var(--green-bplay, #04F77C);
}
.bg-accent {
    background-color: var(--accent, #9C0CCB);
}
/* Color */
.color-bases-black {
    color: var(--Bases-Black, #1A1A1A);
}
.color-bases-darkest {
    color: var(--Bases-Darkest, #252525);
}
.color-bases-dark-gray {
    color: var(--Bases-Dark-Gray, #2D2D2D);
}
.color-bases-gray {
    color: var(--Bases-Gray, #454545);
}
.color-bases-light-gray {
    color: var(--Bases-Light-Gray, #ECECEC);
}
.color-bases-pure-white {
    color: var(--Bases-Pure-White, #FCFCFC);
}
.color-primary {
    color: var(--primary, #05E172);
}
.color-secondary {
    color: var(--secondary, #0CAB5A);
}
.color-tertiary {
    color: var(--tertiary, #00683E);
}
.color-green-bplay {
    color: var(--green-bplay, #04F77C);
}
.color-accent {
    color: var(--accent, #9C0CCB);
}
/* Text Format */
.body-1 {
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    line-height: 24px; /* 150% */
}
.body-2 {
    /* Body 2/Negrita-SmInter */
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
}
.body-3 {
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    line-height: 16px; /* 133.333% */
}
.legal {
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 12px; /* 120% */
}
.caption {
    font-family: Inter;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: 8px; /* 100% */
}
.bold {
    font-weight: 700;
}
.italic {
    font-style: italic;
}

/* Structure -------------------------------------------------------------------------------------- */
/* Structure Fix Start */
body {
    overflow-x: hidden;
}
main {
    position: relative;
}
.body {
    overflow-y: scroll !important;
}
aside {
    position: fixed !important;
}
.aside--left {
    left: 0;
}
section {
    max-width: 100% !important;
}
/* Structure Fix End */

.display-grid {
    display: grid;
    grid-column-gap: 16px;
    grid-template-columns: 16px repeat(12, 1fr) 16px;
}
.display-grid-fullwidth {
    grid-column: 2 / 14;
}
.fullwidth {
    width: 100%;
}
.flex-center {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

/* Elements --------------------------------------------------------------------------------------- */
/* Bplay Button */
.bplay-bp3-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary, #05E172);
    border: 0;
    border-radius: 4px;
    padding: 8px 16px;
    width: 100%;
    color: var(--Bases-Darkest, #252525);
}
.btn-transparent {
    background: transparent;
    border: 1px solid var(--Bases-Darkest, #252525);
    color: var(--Bases-Darkest, #252525);
}
.bplay-bp3-btn:hover {
    background-color: var(--secondary, #0CAB5A);
    color: var(--Bases-Light-Gray, #ECECEC);
    border-color: var(--secondary, #0CAB5A);
}
.bplay-bp3-btn.disabled {
    border: 0;
    background: rgba(199, 199, 199, 0.40);
    color: rgba(69, 69, 69, 0.20);
}

/* Media Query ------------------------------------------------------------------------------------ */
/* Tablet */
@media ( max-width: 768px ) {    
    .display-grid {
        grid-template-columns: 16px repeat(8, 1fr) 16px;
    }
    .display-grid-fullwidth {
        grid-column: 2 / 10 !important;
    }
}
/* Mobile */
@media ( max-width: 360px ) {
    .display-grid {
        grid-template-columns: 0 repeat(4, 1fr) 0;
    }
    .display-grid-fullwidth {
        grid-column: 2 / 6 !important;
    }
}