/*
 * ==========================================================
 * TEAM TITULOS FINAL V1
 * Body design based on supplied reference.
 * Team hero/nav remain shared with existing team pages.
 * ==========================================================
 */

.mct-titles-page {
    background: #f6f8f9;
    color: #102636;
}

.mct-titles-content {
    padding: 24px 0 42px;
}

.mct-titles-content .mct-team-shell {
    width: min(1210px, calc(100% - 32px));
    margin: 0 auto;
}


/* HEADER */

.mct-titles-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;

    padding: 0 6px 20px;

    border-bottom: 1px solid #e2e8eb;
}

.mct-titles-heading > div:first-child > span,
.mct-titles-section-head span {
    display: block;
    margin-bottom: 5px;

    color: #10ad58;

    font-family: Lato, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
}

.mct-titles-heading h2 {
    margin: 0;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 34px;
    line-height: 1;
    font-weight: 600;
    color: #102636;
}

.mct-titles-heading p {
    margin: 8px 0 0;

    font-family: Rajdhani, sans-serif;
    font-size: 17px;
    color: #718397;
}

.mct-titles-heading-kpi {
    min-width: 180px;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "number label"
        "number small";

    column-gap: 12px;
    align-items: center;
}

.mct-titles-heading-kpi > span {
    grid-area: label;

    font-family: Lato, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #8090a0;
}

.mct-titles-heading-kpi > strong {
    grid-area: number;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 44px;
    line-height: 1;
    color: #102636;
}

.mct-titles-heading-kpi > small {
    grid-area: small;

    font-family: Rajdhani, sans-serif;
    font-size: 12px;
    color: #718397;
}


/* SECTION */

.mct-titles-section {
    margin-top: 20px;
}

.mct-titles-section-head,
.mct-title-panel > header {
    margin-bottom: 14px;
}

.mct-titles-section-head h3,
.mct-title-panel > header h3,
.mct-title-all-head h3 {
    margin: 0;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    color: #102636;
}

.mct-titles-section-head p,
.mct-title-panel > header p,
.mct-title-all-head p {
    margin: 4px 0 0;

    font-family: Rajdhani, sans-serif;
    font-size: 12px;
    color: #7c8fa1;
}


/* MAIN TROPHIES */

.mct-title-main-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.mct-title-main-card {
    min-height: 175px;

    display: grid;
    grid-template-columns: 54px 1fr;
    grid-template-rows: 1fr auto;

    gap: 6px 10px;

    padding: 18px 16px 14px;

    background: #fff;

    border: 1px solid #dfe6e9;
    border-radius: 10px;

    box-shadow: 0 3px 12px rgba(23, 44, 60, .025);
}

.mct-title-main-icon {
    grid-row: 1 / 3;

    width: 54px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;

    color: #b7923b;

    background:
        linear-gradient(
            145deg,
            #faf6e8,
            #fff
        );

    border-radius: 8px;
}

.mct-title-main-icon span {
    transform: translateY(-1px);
}

.mct-title-main-copy > strong {
    min-height: 30px;

    display: block;

    font-family: Lato, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #102636;
}

.mct-title-main-copy > div {
    margin-top: 5px;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 40px;
    line-height: 1;
    font-weight: 600;
    color: #102636;
}

.mct-title-main-copy > small {
    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #8a9aaa;
}

.mct-title-main-card > p {
    grid-column: 2;

    margin: 0;

    font-family: Rajdhani, sans-serif;
    font-size: 12px;
    line-height: 1.35;
    color: #68809a;
}


/* VISUAL GRID */

.mct-title-visual-grid {
    margin-top: 16px;

    display: grid;
    grid-template-columns: 1.18fr 1.1fr .82fr;
    gap: 14px;
}

.mct-title-panel {
    padding: 18px;

    background: #fff;

    border: 1px solid #dfe6e9;
    border-radius: 10px;

    box-shadow: 0 3px 12px rgba(23, 44, 60, .02);
}


/* DONUT */

.mct-title-profile {
    min-height: 225px;

    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 16px;
}

.mct-title-donut {
    position: relative;

    width: 160px;
    height: 160px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        conic-gradient(
            #0bae5b 0 30%,
            #23c57a 30% 46%,
            #5d9ee8 46% 82%,
            #cfd8df 82% 100%
        );
}

.mct-title-donut::after {
    content: "";

    position: absolute;

    width: 104px;
    height: 104px;

    background: #fff;

    border-radius: 50%;
}

.mct-title-donut > div {
    position: relative;
    z-index: 2;

    text-align: center;
}

.mct-title-donut strong {
    display: block;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 34px;
    line-height: 1;
}

.mct-title-donut span {
    display: block;
    margin-top: 4px;

    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    color: #6e8090;
}

.mct-title-profile-list {
    display: grid;
    gap: 11px;
}

.mct-title-profile-list > div {
    position: relative;

    display: grid;
    grid-template-columns: 1fr auto;

    gap: 10px;

    padding-left: 17px;
}

.mct-title-profile-list > div::before {
    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 8px;
    height: 8px;

    border-radius: 2px;

    background: #cfd8df;
}

.mct-title-profile-list .is-international::before {
    background: #0bae5b;
}

.mct-title-profile-list .is-national::before {
    background: #23c57a;
}

.mct-title-profile-list .is-state::before {
    background: #5d9ee8;
}

.mct-title-profile-list span {
    font-family: Lato, sans-serif;
    font-size: 12px;
    color: #273c4b;
}

.mct-title-profile-list strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
}


/* DECADE */

.mct-title-bars {
    height: 180px;

    display: flex;
    align-items: flex-end;
    gap: 7px;

    padding: 10px 8px 0;

    border-bottom: 1px solid #dfe6e9;

    background:
        repeating-linear-gradient(
            to top,
            transparent 0,
            transparent 39px,
            #edf1f3 40px
        );
}

.mct-title-bar-item {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.mct-title-bar-area {
    width: 100%;
    height: 125px;

    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.mct-title-bar-area > span {
    width: min(18px, 65%);

    min-height: 6px;

    background:
        linear-gradient(
            180deg,
            #16c66b,
            #079e50
        );

    border-radius: 3px 3px 0 0;
}

.mct-title-bar-item > strong {
    display: none;
}

.mct-title-bar-item > small {
    margin-top: 7px;

    font-family: Rajdhani, sans-serif;
    font-size: 9px;
    color: #8090a0;
}

.mct-title-best-decade {
    margin-top: 12px;
    padding: 10px 12px;

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3px 10px;

    background: #f0fbf5;

    border: 1px solid #d1efdf;
    border-radius: 8px;
}

.mct-title-best-decade span {
    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    color: #6c8577;
}

.mct-title-best-decade strong {
    grid-row: 2;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
}

.mct-title-best-decade b {
    grid-column: 2;
    grid-row: 1 / 3;

    align-self: center;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 18px;
    color: #0bae5b;
}


/* RHYTHM */

.mct-title-rhythm {
    border-top: 1px solid #edf1f3;
}

.mct-title-rhythm > div {
    min-height: 58px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 8px 2px;

    border-bottom: 1px solid #edf1f3;
}

.mct-title-rhythm span {
    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    color: #718397;
}

.mct-title-rhythm strong {
    margin-top: 2px;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 22px;
    line-height: 1;
}


/* TIMELINE + GOLDEN */

.mct-title-timeline-panel {
    margin-top: 14px;

    width: calc(74% - 4px);
}

.mct-title-timeline {
    position: relative;

    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));

    gap: 8px;

    margin-top: 28px;
    padding-top: 20px;
}

.mct-title-timeline::before {
    content: "";

    position: absolute;

    top: 9px;
    left: 4%;
    right: 4%;

    height: 2px;

    background: #dce5e9;
}

.mct-title-timeline article {
    position: relative;

    text-align: center;
}

.mct-title-timeline article > span {
    position: absolute;

    top: -17px;
    left: 50%;

    width: 10px;
    height: 10px;

    transform: translateX(-50%);

    background: #0bae5b;

    border: 3px solid #fff;
    border-radius: 50%;

    box-shadow: 0 0 0 1px #0bae5b;
}

.mct-title-timeline strong {
    display: block;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 17px;
}

.mct-title-timeline p {
    margin: 3px 0 0;

    font-family: Rajdhani, sans-serif;
    font-size: 10px;
    line-height: 1.2;
    color: #60788d;
}


/* GOLDEN ERA */

.mct-title-golden {
    margin-top: -258px;
    margin-left: calc(74% + 10px);

    width: calc(26% - 10px);

    min-height: 244px;
}

.mct-title-golden-main {
    min-height: 80px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 4px;
}

.mct-title-golden-main > span {
    font-size: 26px;
    color: #e4ad24;
}

.mct-title-golden-main > strong {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 28px;
    line-height: 1;
}

.mct-title-golden-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 6px;
}

.mct-title-golden-stats > div {
    padding: 10px 5px;

    text-align: center;

    background: #f8fafb;

    border: 1px solid #e4eaed;
    border-radius: 7px;
}

.mct-title-golden-stats strong {
    display: block;

    font-family: "Barlow Condensed", sans-serif;
    font-size: 23px;
}

.mct-title-golden-stats span {
    display: block;
    margin-top: 3px;

    font-family: Rajdhani, sans-serif;
    font-size: 8px;
    color: #718397;
}


/* ALL TITLES */

.mct-title-all {
    clear: both;

    margin-top: 14px;
}

.mct-title-all-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 14px;
}

.mct-title-all-head > strong {
    padding: 8px 12px;

    font-family: Lato, sans-serif;
    font-size: 12px;
    color: #596b79;

    background: #f8fafb;

    border: 1px solid #e2e8eb;
    border-radius: 7px;
}

.mct-title-all-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border: 1px solid #e2e8eb;
    border-radius: 8px;

    overflow: hidden;
}

.mct-title-all-grid > article {
    min-height: 58px;

    display: grid;
    grid-template-columns: 30px 1fr auto;

    align-items: center;

    gap: 8px;

    padding: 8px 10px;

    border-right: 1px solid #edf1f3;
    border-bottom: 1px solid #edf1f3;

    background: #fff;
}

.mct-title-all-icon {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #a98a44;
}

.mct-title-all-grid article > div:nth-child(2) {
    min-width: 0;
}

.mct-title-all-grid article > div:nth-child(2) > strong {
    display: block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: Lato, sans-serif;
    font-size: 14px;
    color: #263b49;
}

.mct-title-all-grid article small {
    display: block;

    margin-top: 3px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-family: Rajdhani, sans-serif;
    font-size: 11px;
    color: #8696a3;
}

.mct-title-all-grid article > b {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 15px;
}


/* EMPTY */

.mct-titles-empty {
    margin-top: 20px;
    padding: 30px;

    text-align: center;

    background: #fff;

    border: 1px solid #e2e8eb;
    border-radius: 10px;
}


/* MOBILE */

@media (max-width: 767px) {

    .mct-titles-content {
        padding: 16px 0 30px;
    }

    .mct-titles-content .mct-team-shell {
        width: calc(100% - 20px);
    }

    .mct-titles-heading {
        align-items: flex-start;

        padding: 0 6px 16px;
    }

    .mct-titles-heading h2 {
        font-size: 27px;
    }

    .mct-titles-heading-kpi {
        min-width: 78px;

        display: block;

        text-align: right;
    }

    .mct-titles-heading-kpi > strong {
        display: block;

        font-size: 32px;
    }

    .mct-titles-heading-kpi > span,
    .mct-titles-heading-kpi > small {
        display: none;
    }


    .mct-title-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mct-title-main-card {
        min-height: 145px;

        grid-template-columns: 42px 1fr;

        padding: 13px 10px;
    }

    .mct-title-main-card:nth-child(5) {
        grid-column: 1 / -1;
    }

    .mct-title-main-icon {
        width: 40px;
        height: 48px;

        font-size: 22px;
    }

    .mct-title-main-copy > strong {
        min-height: 26px;

        font-size: 10px;
    }

    .mct-title-main-copy > div {
        font-size: 31px;
    }


    .mct-title-visual-grid {
        grid-template-columns: 1fr;
    }

    .mct-title-profile {
        grid-template-columns: 145px 1fr;
    }

    .mct-title-donut {
        width: 135px;
        height: 135px;
    }

    .mct-title-donut::after {
        width: 88px;
        height: 88px;
    }


    .mct-title-bars {
        overflow-x: auto;

        gap: 8px;
    }

    .mct-title-bar-item {
        min-width: 34px;
    }


    .mct-title-timeline-panel {
        width: auto;
    }

    .mct-title-timeline {
        grid-template-columns: repeat(4, minmax(100px, 1fr));

        overflow-x: auto;

        padding-bottom: 8px;
    }


    .mct-title-golden {
        margin: 14px 0 0;

        width: auto;

        min-height: 0;
    }


    .mct-title-all-grid {
        grid-template-columns: 1fr;
    }

    .mct-title-all-grid > article {
        border-right: 0;
    }
}


/*
 * ==========================================================
 * TITULOS HEADER HERO V2
 * Reference-style heading with blurred team crest watermark
 * ==========================================================
 */

.mct-titles-page
.mct-titles-heading {
    position: relative;

    min-height: 130px;

    display: grid !important;

    grid-template-columns:
        minmax(300px, 1fr)
        minmax(260px, .75fr)
        auto !important;

    align-items: center !important;

    gap: 34px !important;

    margin: 0 !important;

    padding:
        18px
        8px
        20px !important;

    overflow: hidden !important;

    border-bottom:
        1px solid #dfe6ea !important;

    box-sizing:
        border-box !important;
}


.mct-titles-page
.mct-titles-heading-left {
    position: relative;

    z-index: 3;
}


.mct-titles-page
.mct-titles-heading-left
h2 {
    margin: 0 !important;

    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        42px !important;

    font-weight:
        600 !important;

    line-height:
        .98 !important;
}


.mct-titles-page
.mct-titles-heading-left
p {
    margin:
        8px
        0
        0 !important;

    color:
        #6f87a0 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        20px !important;

    font-weight:
        500 !important;

    line-height:
        1.15 !important;
}


/*
 * Quote
 */

.mct-titles-page
.mct-titles-heading-quote {
    position: relative;

    z-index: 3;

    display: flex;

    justify-content: center;

    padding:
        0
        12px;
}


.mct-titles-page
.mct-titles-heading-quote
span {
    display: block;

    max-width: 300px;

    color:
        #728aa3;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        16px;

    font-style:
        italic;

    font-weight:
        600;

    line-height:
        1.35;

    text-align:
        center;
}


/*
 * Blurred crest background
 */

.mct-titles-page
.mct-titles-heading-watermark {
    position: absolute !important;

    z-index: 1 !important;

    top: 50% !important;
    right: 260px !important;

    width: 235px !important;
    height: 235px !important;

    max-width: none !important;

    transform:
        translateY(-50%)
        rotate(-14deg) !important;

    object-fit:
        contain !important;

    opacity:
        .075 !important;

    filter:
        blur(1.2px)
        saturate(.7) !important;

    pointer-events:
        none !important;

    user-select:
        none !important;
}


/*
 * Meta
 */

.mct-titles-page
.mct-titles-heading-meta {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 24px;

    min-width: 310px;
}


.mct-titles-page
.mct-titles-history {
    min-width: 115px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.mct-titles-page
.mct-titles-history
> span {
    color:
        #8193a5;

    font-family:
        Lato,
        sans-serif;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1;
}


.mct-titles-page
.mct-titles-history
> strong {
    margin-top:
        3px;

    color:
        #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        38px;

    font-weight:
        800;

    line-height:
        .95;
}


.mct-titles-page
.mct-titles-history
> small {
    margin-top:
        3px;

    color:
        #6f87a0;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        9px;

    font-weight:
        600;
}


/*
 * Vertical divider
 */

.mct-titles-page
.mct-titles-divider {
    width: 1px;
    height: 70px;

    flex:
        0
        0
        1px;

    background:
        #dce4e8;
}


/*
 * Total
 */

.mct-titles-page
.mct-titles-total {
    min-width: 128px;

    display: flex;

    align-items: center;

    gap: 12px;
}


.mct-titles-page
.mct-titles-cup-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #8297aa;

    font-size:
        28px;
}


.mct-titles-page
.mct-titles-total
> div {
    display: flex;

    flex-direction: column;
}


.mct-titles-page
.mct-titles-total
strong {
    color:
        #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        36px;

    font-weight:
        600;

    line-height:
        .95;
}


.mct-titles-page
.mct-titles-total
small {
    margin-top:
        4px;

    color:
        #6f87a0;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;
}


/*
 * Desktop spacing before Principais títulos
 */

.mct-titles-page
.mct-titles-section {
    margin-top:
        18px !important;
}


/*
 * MOBILE
 */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-titles-heading {
        min-height: 128px;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        gap:
            14px !important;

        padding:
            16px
            5px
            18px !important;
    }


    .mct-titles-page
    .mct-titles-heading-left
    h2 {
        font-size:
            30px !important;
    }


    .mct-titles-page
    .mct-titles-heading-left
    p {
        margin-top:
            5px !important;

        font-size:
            14px !important;
    }


    .mct-titles-page
    .mct-titles-heading-quote {
        display:
            none !important;
    }


    .mct-titles-page
    .mct-titles-heading-watermark {
        right:
            42px !important;

        width:
            150px !important;

        height:
            150px !important;

        opacity:
            .055 !important;

        filter:
            blur(1px) !important;
    }


    .mct-titles-page
    .mct-titles-heading-meta {
        min-width:
            88px;

        display:
            block;

        text-align:
            right;
    }


    .mct-titles-page
    .mct-titles-history,
    .mct-titles-page
    .mct-titles-divider {
        display:
            none !important;
    }


    .mct-titles-page
    .mct-titles-total {
        min-width:
            auto;

        display:
            block;
    }


    .mct-titles-page
    .mct-titles-cup-icon {
        display:
            none;
    }


    .mct-titles-page
    .mct-titles-total
    > div {
        align-items:
            flex-end;
    }


    .mct-titles-page
    .mct-titles-total
    strong {
        font-size:
            32px;
    }


    .mct-titles-page
    .mct-titles-total
    small {
        font-size:
            12px;
    }

}



/*
 * ==========================================================
 * TITULOS SVG ICON SYSTEM V3
 * ==========================================================
 */

.mct-titles-page
.mct-titles-cup-icon
svg {
    width: 28px;
    height: 28px;

    display: block;

    fill: currentColor;
}


.mct-titles-page
.mct-title-main-icon {
    color: #b7923b;
}


.mct-titles-page
.mct-title-main-icon
svg {
    width: 34px;
    height: 34px;

    display: block;

    fill: currentColor;
}


.mct-titles-page
.mct-title-golden-icon {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #e4ad24;
}


.mct-titles-page
.mct-title-golden-icon
svg {
    width: 30px;
    height: 30px;

    display: block;

    fill: currentColor;
}


.mct-titles-page
.mct-title-all-icon {
    color: #a98a44;
}


.mct-titles-page
.mct-title-all-icon
svg {
    width: 21px;
    height: 21px;

    display: block;

    fill: currentColor;
}


@media (max-width: 767px) {

    .mct-titles-page
    .mct-title-main-icon
    svg {
        width: 27px;
        height: 27px;
    }

}



/*
 * ==========================================================
 * TITULOS PRINCIPAIS + VISUAL CARDS V4
 * ==========================================================
 */


/* ==========================================================
   SECTION TITLE
   ========================================================== */

.mct-titles-page
.mct-titles-section {
    margin-top: 18px !important;
}


.mct-titles-page
.mct-titles-section-head {
    min-height: 42px;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px !important;

    margin: 0 0 12px !important;

    padding: 0 6px !important;
}


.mct-titles-page
.mct-titles-section-head h3 {
    margin: 0 !important;

    color: #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size: 21px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}


.mct-titles-page
.mct-titles-section-head p {
    display: none !important;
}


.mct-titles-page
.mct-titles-see-all {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #276cff;

    font-family:
        Lato,
        sans-serif;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;
}


.mct-titles-page
.mct-titles-see-all svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   FIVE MAIN CARDS
   ========================================================== */

.mct-titles-page
.mct-title-main-grid {
    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 12px !important;
}


.mct-titles-page
.mct-title-main-card {
    position: relative;

    min-width: 0 !important;
    min-height: 184px !important;

    display: grid !important;

    grid-template-columns:
        68px
        minmax(0, 1fr) !important;

    grid-template-rows:
        auto
        1fr !important;

    column-gap: 11px !important;

    margin: 0 !important;

    padding:
        14px
        13px
        13px !important;

    background: #fff !important;

    border:
        1px solid #dce5ea !important;

    border-radius:
        8px !important;

    box-shadow:
        0 2px 7px
        rgba(27, 47, 62, .025) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* TROPHY */

.mct-titles-page
.mct-title-main-icon {
    width: 68px !important;
    height: 105px !important;

    grid-row:
        1 / 3 !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        transparent !important;

    border-radius:
        0 !important;
}


.mct-titles-page
.mct-title-main-icon img {
    width: 64px !important;
    height: 100px !important;

    max-width: 64px !important;
    max-height: 100px !important;

    display: block !important;

    object-fit: contain !important;

    object-position:
        center center !important;

    margin: 0 !important;
}


.mct-titles-page
.mct-title-main-icon svg {
    width: 47px !important;
    height: 72px !important;

    margin-top: 9px;

    fill: currentColor;

    color: #b4924c;
}


/* COPY */

.mct-titles-page
.mct-title-main-copy {
    min-width: 0;

    padding-top: 2px;
}


.mct-titles-page
.mct-title-main-copy
> strong {
    min-height: 31px !important;

    display: flex !important;

    align-items: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #112535 !important;

    font-family:
        Lato,
        sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;
}


.mct-titles-page
.mct-title-main-copy
> div {
    margin:
        1px
        0
        0 !important;

    color: #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size: 40px !important;

    font-weight: 600 !important;

    line-height: .9 !important;
}


.mct-titles-page
.mct-title-main-copy
> small {
    display: block;

    margin-top: 5px !important;

    color: #8496a7 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1 !important;
}


.mct-titles-page
.mct-title-main-card
> p {
    grid-column: 1 / -1 !important;

    align-self: end;

    min-height: 31px;

    margin:
        6px
        0
        0 !important;

    padding-top: 7px;

    color: #647f9e !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    line-height: 1.35 !important;

    border-top:
        1px solid #eef2f4;
}


/* ==========================================================
   THREE VISUAL CARDS
   ========================================================== */

.mct-titles-page
.mct-title-visual-grid {
    display: grid !important;

    grid-template-columns:
        1.16fr
        1.16fr
        .84fr !important;

    gap: 12px !important;

    margin-top: 14px !important;
}


.mct-titles-page
.mct-title-panel {
    min-width: 0;

    margin: 0;

    padding:
        15px
        16px !important;

    background: #fff !important;

    border:
        1px solid #dce5ea !important;

    border-radius:
        8px !important;

    box-shadow:
        0 2px 7px
        rgba(27, 47, 62, .02) !important;

    box-sizing: border-box !important;
}


.mct-titles-page
.mct-title-panel
> header {
    margin:
        0
        0
        10px !important;

    padding: 0 !important;
}


.mct-titles-page
.mct-title-panel
> header h3 {
    margin: 0 !important;

    color: #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size: 15px !important;

    font-weight: 600 !important;

    line-height: 1 !important;
}


.mct-titles-page
.mct-title-panel
> header p {
    margin:
        4px
        0
        0 !important;

    color: #74899e !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size: 11px !important;

    line-height: 1.1 !important;
}


/* ==========================================================
   DONUT
   ========================================================== */

.mct-titles-page
.mct-title-profile {
    min-height: 215px !important;

    display: grid !important;

    grid-template-columns:
        170px
        minmax(0, 1fr) !important;

    align-items: center !important;

    gap: 15px !important;
}


.mct-titles-page
.mct-title-donut {
    width: 158px !important;
    height: 158px !important;

    margin: 0 auto;

    border-radius: 50% !important;
}


.mct-titles-page
.mct-title-donut::after {
    width: 102px !important;
    height: 102px !important;
}


.mct-titles-page
.mct-title-donut strong {
    font-size: 33px !important;
}


.mct-titles-page
.mct-title-profile-list {
    display: grid;

    gap: 12px;
}


.mct-titles-page
.mct-title-profile-list
> div {
    min-height: 20px;

    display: grid;

    grid-template-columns:
        1fr
        auto;

    align-items: center;

    column-gap: 8px;

    padding-left: 17px;
}


.mct-titles-page
.mct-title-profile-list span {
    font-size: 11px !important;
}


.mct-titles-page
.mct-title-profile-list strong {
    font-size: 15px !important;
}


/* ==========================================================
   DECADE GRAPH
   ========================================================== */

.mct-titles-page
.mct-title-bars {
    height: 162px !important;

    gap: 5px !important;

    padding:
        8px
        4px
        0 !important;
}


.mct-titles-page
.mct-title-bar-area {
    height: 112px !important;
}


.mct-titles-page
.mct-title-bar-area
> span {
    width: 13px !important;

    max-width: 70%;

    background:
        #10b65c !important;

    border-radius:
        2px
        2px
        0
        0 !important;
}


.mct-titles-page
.mct-title-best-decade {
    min-height: 50px;

    margin-top: 10px !important;

    padding:
        8px
        11px !important;
}


/* ==========================================================
   RHYTHM
   ========================================================== */

.mct-titles-page
.mct-title-rhythm {
    margin-top: 4px;

    border-top:
        1px solid #edf1f3;
}


.mct-titles-page
.mct-title-rhythm
> div {
    position: relative;

    min-height: 50px !important;

    justify-content: center;

    padding:
        7px
        4px
        7px
        38px !important;
}


.mct-titles-page
.mct-title-rhythm
> div::before {
    content: "";

    position: absolute;

    left: 5px;
    top: 50%;

    width: 23px;
    height: 23px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        #f2faf6;

    box-shadow:
        inset
        0
        0
        0
        1px
        #dff0e7;
}


.mct-titles-page
.mct-title-rhythm span {
    font-size: 10px !important;
}


.mct-titles-page
.mct-title-rhythm strong {
    margin-top: 2px;

    font-size: 19px !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-titles-see-all
    span {
        display: none;
    }


    .mct-titles-page
    .mct-title-main-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;
    }


    .mct-titles-page
    .mct-title-main-card {
        min-height: 152px !important;

        grid-template-columns:
            48px
            minmax(0, 1fr) !important;

        padding:
            11px
            9px !important;
    }


    .mct-titles-page
    .mct-title-main-card:nth-child(5) {
        grid-column:
            1 / -1 !important;
    }


    .mct-titles-page
    .mct-title-main-icon {
        width: 48px !important;
        height: 78px !important;
    }


    .mct-titles-page
    .mct-title-main-icon img {
        width: 46px !important;
        height: 75px !important;
    }


    .mct-titles-page
    .mct-title-main-copy
    > strong {
        font-size:
            12px !important;
    }


    .mct-titles-page
    .mct-title-main-copy
    > div {
        font-size:
            30px !important;
    }


    .mct-titles-page
    .mct-title-main-card
    > p {
        font-size:
            11px !important;
    }


    .mct-titles-page
    .mct-title-visual-grid {
        grid-template-columns:
            1fr !important;
    }


    .mct-titles-page
    .mct-title-profile {
        grid-template-columns:
            145px
            minmax(0, 1fr) !important;
    }


    .mct-titles-page
    .mct-title-donut {
        width: 132px !important;
        height: 132px !important;
    }


    .mct-titles-page
    .mct-title-donut::after {
        width: 85px !important;
        height: 85px !important;
    }

}



/*
 * ==========================================================
 * TITULOS MAIN GRID WIDTH FIX V5
 * 3-5 items fill full row
 * 1-2 items stay compact
 * ==========================================================
 */

.mct-titles-page
.mct-title-main-grid {
    width: 100% !important;
}


/* FIVE */

.mct-titles-page
.mct-title-main-grid.is-count-5 {
    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;
}


/* FOUR */

.mct-titles-page
.mct-title-main-grid.is-count-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
}


/* THREE */

.mct-titles-page
.mct-title-main-grid.is-count-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
}


/* TWO */

.mct-titles-page
.mct-title-main-grid.is-count-2 {
    grid-template-columns:
        repeat(2, minmax(0, 260px)) !important;

    justify-content:
        start !important;
}


/* ONE */

.mct-titles-page
.mct-title-main-grid.is-count-1 {
    grid-template-columns:
        minmax(0, 280px) !important;

    justify-content:
        start !important;
}


/*
 * Competition logo sizing
 */

.mct-titles-page
.mct-title-main-icon img {
    width: 58px !important;
    height: 78px !important;

    max-width: 58px !important;
    max-height: 78px !important;

    object-fit: contain !important;
}


/*
 * If competition logos are wider / flatter,
 * keep them centered without distortion.
 */

.mct-titles-page
.mct-title-main-icon {
    align-items: center !important;
}


/* MOBILE */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-title-main-grid.is-count-5,
    .mct-titles-page
    .mct-title-main-grid.is-count-4,
    .mct-titles-page
    .mct-title-main-grid.is-count-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .mct-titles-page
    .mct-title-main-grid.is-count-2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .mct-titles-page
    .mct-title-main-grid.is-count-1 {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }


    .mct-titles-page
    .mct-title-main-grid.is-count-5
    .mct-title-main-card:last-child {
        grid-column:
            1 / -1 !important;
    }

}



/*
 * ==========================================================
 * PRINCIPAIS TITULOS EQUAL HEIGHT + EXPAND V10
 * ==========================================================
 */


/* ----------------------------------------------------------
   EQUAL HEIGHT
   ---------------------------------------------------------- */

.mct-titles-page
.mct-title-main-grid {
    align-items: stretch !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-6 {
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-5 {
    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-4 {
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-2 {
    grid-template-columns:
        repeat(2, minmax(0, 260px)) !important;

    justify-content:
        start !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-1 {
    grid-template-columns:
        minmax(0, 280px) !important;

    justify-content:
        start !important;
}


.mct-titles-page
.mct-title-main-card {
    position: relative;

    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;

    grid-template-rows:
        112px
        1fr !important;

    cursor: pointer;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.mct-titles-page
.mct-title-main-card:hover {
    border-color:
        #b9cad5 !important;

    box-shadow:
        0
        5px
        16px
        rgba(19, 44, 60, .06) !important;

    transform:
        translateY(-1px);
}


.mct-titles-page
.mct-title-main-card.is-open {
    border-color:
        #2d77ff !important;

    box-shadow:
        inset
        0
        -3px
        0
        #2d77ff !important;
}


/* ----------------------------------------------------------
   YEARS PREVIEW
   ---------------------------------------------------------- */

.mct-titles-page
.mct-title-years-preview {
    position: relative;

    min-height: 42px !important;
    max-height: 42px !important;

    display: block !important;

    overflow: hidden !important;

    margin:
        0 !important;

    padding:
        9px
        18px
        0
        0 !important;

    border-top:
        1px solid
        #edf1f3 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    line-height:
        1.35 !important;

    color:
        #58779a !important;
}


.mct-titles-page
.mct-title-years-preview
> span {
    display:
        inline !important;
}


.mct-titles-page
.mct-title-years-preview
> b {
    display:
        inline !important;

    margin-left:
        5px;

    color:
        #276cff !important;

    font-family:
        Lato,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    white-space:
        nowrap;
}


/* ----------------------------------------------------------
   CARD ARROW
   ---------------------------------------------------------- */

.mct-titles-page
.mct-title-card-arrow {
    position: absolute;

    right: 9px;
    bottom: 12px;

    width: 16px;
    height: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        #9aabb7;

    opacity: 0;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.mct-titles-page
.mct-title-main-card:hover
.mct-title-card-arrow,
.mct-titles-page
.mct-title-main-card.is-open
.mct-title-card-arrow {
    opacity: 1;
}


.mct-titles-page
.mct-title-main-card.is-open
.mct-title-card-arrow {
    transform:
        rotate(180deg);
}


.mct-titles-page
.mct-title-card-arrow
svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ----------------------------------------------------------
   DETAIL ZONE
   ---------------------------------------------------------- */

.mct-titles-page
.mct-title-detail-zone {
    display: none;

    margin-top:
        12px;
}


.mct-titles-page
.mct-title-detail-zone.is-visible {
    display: block;
}


.mct-titles-page
.mct-title-detail {
    position: relative;

    width: 100%;

    min-height: 138px;

    grid-template-columns:
        245px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        25px;

    padding:
        20px
        24px;

    background:
        #fff;

    border:
        1px solid
        #d9e3e9;

    border-radius:
        9px;

    box-shadow:
        0
        4px
        18px
        rgba(20, 43, 58, .04);

    box-sizing:
        border-box;
}


.mct-titles-page
.mct-title-detail.is-open {
    display: grid;
}


/* left summary */

.mct-titles-page
.mct-title-detail-summary {
    min-width: 0;

    display: grid;

    grid-template-columns:
        82px
        minmax(0, 1fr);

    align-items: center;

    gap:
        14px;

    padding-right:
        24px;

    border-right:
        1px solid
        #e2e8ec;
}


.mct-titles-page
.mct-title-detail-logo {
    width: 80px;
    height: 80px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.mct-titles-page
.mct-title-detail-logo
img {
    width: 72px;
    height: 72px;

    display: block;

    object-fit:
        contain;
}


.mct-titles-page
.mct-title-detail-summary
> div:last-child
> strong {
    display: block;

    font-family:
        Lato,
        sans-serif;

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.2;

    color:
        #122635;
}


.mct-titles-page
.mct-title-detail-summary
> div:last-child
> b {
    display: block;

    margin-top:
        5px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        38px;

    line-height:
        .9;

    color:
        #102433;
}


.mct-titles-page
.mct-title-detail-summary
> div:last-child
> small {
    display: block;

    margin-top:
        5px;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        10px;

    color:
        #8294a4;
}


/* all years */

.mct-titles-page
.mct-title-detail-years {
    min-width: 0;
}


.mct-titles-page
.mct-title-detail-years
> span {
    display: block;

    margin-bottom:
        10px;

    font-family:
        Lato,
        sans-serif;

    font-size:
        11px;

    font-weight:
        800;

    color:
        #203746;
}


.mct-titles-page
.mct-title-detail-years
> p {
    margin: 0;

    color:
        #58779a;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        15px;

    font-weight:
        600;

    line-height:
        1.6;
}


/* close */

.mct-titles-page
.mct-title-detail-close {
    position: absolute;

    right: 18px;
    bottom: 14px;

    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 5px 0;

    border: 0;

    background:
        transparent;

    color:
        #276cff;

    font-family:
        Lato,
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    cursor:
        pointer;
}


.mct-titles-page
.mct-title-detail-close
svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* ----------------------------------------------------------
   6 CARDS: slightly tighter
   ---------------------------------------------------------- */

.mct-titles-page
.mct-title-main-grid.is-count-6
.mct-title-main-card {
    padding-left:
        10px !important;

    padding-right:
        10px !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-6
.mct-title-main-icon {
    width:
        55px !important;
}


.mct-titles-page
.mct-title-main-grid.is-count-6
.mct-title-main-icon
img {
    width:
        52px !important;

    max-width:
        52px !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-title-main-grid.is-count-6,
    .mct-titles-page
    .mct-title-main-grid.is-count-5,
    .mct-titles-page
    .mct-title-main-grid.is-count-4,
    .mct-titles-page
    .mct-title-main-grid.is-count-3,
    .mct-titles-page
    .mct-title-main-grid.is-count-2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }


    .mct-titles-page
    .mct-title-main-grid.is-count-1 {
        grid-template-columns:
            1fr !important;
    }


    .mct-titles-page
    .mct-title-main-card {
        height:
            165px !important;

        min-height:
            165px !important;

        max-height:
            165px !important;

        grid-template-rows:
            92px
            1fr !important;
    }


    .mct-titles-page
    .mct-title-years-preview {
        font-size:
            9px !important;
    }


    .mct-titles-page
    .mct-title-detail {
        grid-template-columns:
            1fr;

        gap:
            14px;

        padding:
            16px;
    }


    .mct-titles-page
    .mct-title-detail-summary {
        grid-template-columns:
            58px
            1fr;

        padding:
            0
            0
            14px;

        border-right:
            0;

        border-bottom:
            1px solid
            #e6ecef;
    }


    .mct-titles-page
    .mct-title-detail-logo {
        width:
            56px;

        height:
            56px;
    }


    .mct-titles-page
    .mct-title-detail-logo
    img {
        width:
            52px;

        height:
            52px;
    }


    .mct-titles-page
    .mct-title-detail-years
    > p {
        padding-bottom:
            28px;

        font-size:
            13px;
    }

}



/*
 * ==========================================================
 * PROFILE / DECADE / RHYTHM REFINEMENT V12
 * ==========================================================
 */


/* REAL DONUT */

.mct-titles-page
.mct-title-donut {
    background:
        conic-gradient(
            #0aae58
                0
                calc(var(--mct-int) * 1%),

            #26c782
                calc(var(--mct-int) * 1%)
                calc(
                    (
                        var(--mct-int)
                        +
                        var(--mct-national)
                    )
                    * 1%
                ),

            #599be3
                calc(
                    (
                        var(--mct-int)
                        +
                        var(--mct-national)
                    )
                    * 1%
                )
                calc(
                    (
                        var(--mct-int)
                        +
                        var(--mct-national)
                        +
                        var(--mct-state)
                    )
                    * 1%
                ),

            #d6dee4
                calc(
                    (
                        var(--mct-int)
                        +
                        var(--mct-national)
                        +
                        var(--mct-state)
                    )
                    * 1%
                )
                100%
        ) !important;
}


.mct-titles-page
.mct-title-profile-list
> div {
    grid-template-columns:
        minmax(0, 1fr)
        30px
        34px !important;
}


.mct-titles-page
.mct-title-profile-list
> small {
    color:
        #73899d;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        11px;

    font-weight:
        600;

    text-align:
        right;
}


/* DONUT CENTER */

.mct-titles-page
.mct-title-donut
strong {
    font-size:
        34px !important;
}


.mct-titles-page
.mct-title-donut
span::after {
    content:
        "catalogadas";

    display:
        block;

    margin-top:
        2px;

    text-transform:
        none;

    font-size:
        11px;

    color:
        #8294a3;
}


/* THREE PANELS HEIGHT */

.mct-titles-page
.mct-title-visual-grid
> .mct-title-panel {
    min-height:
        320px !important;
}


/* DECADE GRID LOOK */

.mct-titles-page
.mct-title-bars {
    position:
        relative;

    height:
        190px !important;

    padding:
        15px
        10px
        0
        32px !important;

    background:
        repeating-linear-gradient(
            to top,
            transparent
                0,
            transparent
                39px,
            #e7edf0
                40px
        ) !important;
}


.mct-titles-page
.mct-title-bars::before {
    content:
        "20\a15\a10\a5\a0";

    white-space:
        pre;

    position:
        absolute;

    left: 3px;
    top: 13px;

    height:
        160px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    color:
        #7890a3;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        9px;

    line-height:
        1;
}


/* BEST DECADE BIGGER */

.mct-titles-page
.mct-title-best-decade {
    min-height:
        62px !important;

    align-items:
        center;

    padding:
        10px
        14px !important;
}


.mct-titles-page
.mct-title-best-decade
strong {
    font-size:
        25px !important;
}


.mct-titles-page
.mct-title-best-decade
b {
    font-size:
        20px !important;
}


/* RHYTHM ROW */

.mct-titles-page
.mct-title-rhythm
> div {
    min-height:
        61px !important;

    padding-left:
        50px !important;
}


.mct-titles-page
.mct-title-rhythm
> div::before {
    width:
        32px !important;

    height:
        32px !important;

    left:
        4px !important;
}


.mct-titles-page
.mct-title-rhythm
strong {
    font-size:
        23px !important;
}


.mct-titles-page
.mct-title-rhythm
span {
    font-size:
        11px !important;
}



/*
 * ==========================================================
 * TITULOS DECADE SVG V13
 * Reference-style chart
 * ==========================================================
 */

.mct-titles-page
.mct-decade-chart {
    width: 100%;

    margin-top: 3px;

    overflow: hidden;
}


.mct-titles-page
.mct-decade-chart
svg {
    width: 100%;
    height: auto;

    display: block;

    overflow: visible;
}


/* horizontal + vertical dashed grid */

.mct-titles-page
.mct-decade-grid-line {
    stroke: #dbe4e9;

    stroke-width: 1;

    stroke-dasharray:
        4
        4;

    vector-effect:
        non-scaling-stroke;
}


.mct-titles-page
.mct-decade-grid-line.is-vertical {
    stroke: #e4eaee;

    stroke-dasharray:
        3
        4;
}


/* Y AXIS */

.mct-titles-page
.mct-decade-y-label {
    fill: #72889d;

    font-family:
        Rajdhani,
        sans-serif;

    font-size: 11px;

    font-weight: 600;
}


/* X AXIS */

.mct-titles-page
.mct-decade-x-label {
    fill: #72889d;

    font-family:
        Rajdhani,
        sans-serif;

    font-size: 11px;

    font-weight: 500;
}


/* BARS */

.mct-titles-page
.mct-decade-bar {
    fill: #0fb35b;

    transition:
        opacity .15s ease,
        transform .15s ease;

    transform-box:
        fill-box;

    transform-origin:
        center bottom;
}


.mct-titles-page
.mct-decade-bar:hover {
    fill: #069b4b;

    transform:
        scaleY(1.02);
}


/*
 * Remove old fake-axis chart styling.
 */

.mct-titles-page
.mct-title-bars {
    display: none !important;
}


/* BEST DECADE */

.mct-titles-page
.mct-title-best-decade {
    position: relative;

    min-height: 68px !important;

    display: grid !important;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto !important;

    grid-template-rows:
        auto
        auto !important;

    align-items: center !important;

    gap:
        2px
        10px !important;

    margin-top: 6px !important;

    padding:
        10px
        15px
        10px
        11px !important;

    background:
        #f1fbf6 !important;

    border:
        1px solid
        #cfeadd !important;

    border-radius:
        8px !important;
}


/* medal */

.mct-titles-page
.mct-best-decade-medal {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #edae18;
}


.mct-titles-page
.mct-best-decade-medal
svg {
    width: 31px;
    height: 31px;

    display: block;

    fill: currentColor;
}


/* eyebrow */

.mct-titles-page
.mct-title-best-decade
> span:not(.mct-best-decade-medal) {
    grid-column: 2;
    grid-row: 1;

    align-self: end;

    color: #64816f;

    font-family:
        Rajdhani,
        sans-serif;

    font-size: 10px;

    font-weight: 600;
}


/* decade */

.mct-titles-page
.mct-title-best-decade
> strong {
    grid-column: 2;
    grid-row: 2;

    align-self: start;

    margin: 0;

    color: #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 27px !important;

    font-weight: 600;

    line-height: 1;
}


/* count */

.mct-titles-page
.mct-title-best-decade
> b {
    grid-column: 3;
    grid-row: 1 / 3;

    align-self: center;

    margin: 0;

    color: #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size: 28px !important;

    font-weight: 600 !important;

    line-height: .9;

    text-align: right;
}


/*
 * Put "CONQUISTAS" beneath count without changing PHP.
 */

.mct-titles-page
.mct-title-best-decade
> b::after {
    content: "CONQUISTAS";

    display: block;

    margin-top: 5px;

    color: #718599;

    font-family:
        Rajdhani,
        sans-serif;

    font-size: 9px;

    font-weight: 700;

    line-height: 1;
}


/* DESKTOP CARD */

.mct-titles-page
.mct-title-visual-grid
> .mct-title-panel:nth-child(2) {
    padding:
        16px
        17px
        14px !important;
}


/* MOBILE */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-decade-chart {
        overflow-x: auto;
    }


    .mct-titles-page
    .mct-decade-chart
    svg {
        min-width: 470px;
    }


    .mct-titles-page
    .mct-title-best-decade
    > strong {
        font-size:
            23px !important;
    }


    .mct-titles-page
    .mct-title-best-decade
    > b {
        font-size:
            24px !important;
    }

}



/*
 * ==========================================================
 * DECADE CARD STABLE LAYOUT V14
 * Stop jumping / lock reference layout
 * ==========================================================
 */


/* ----------------------------------------------------------
   CHART: NO MOVEMENT
   ---------------------------------------------------------- */

.mct-titles-page
.mct-decade-bar {
    transition:
        fill .15s ease !important;

    transform:
        none !important;

    transform-origin:
        initial !important;
}


.mct-titles-page
.mct-decade-bar:hover {
    fill:
        #089f50 !important;

    transform:
        none !important;
}


/* ----------------------------------------------------------
   BEST DECADE CARD
   ---------------------------------------------------------- */

.mct-titles-page
.mct-title-best-decade {
    position: relative !important;

    min-height: 72px !important;
    height: 72px !important;

    display: grid !important;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        120px !important;

    grid-template-rows:
        25px
        31px !important;

    grid-template-areas:
        "icon label value"
        "icon decade value" !important;

    align-items: center !important;

    column-gap:
        10px !important;

    row-gap:
        0 !important;

    margin:
        8px
        0
        0 !important;

    padding:
        8px
        14px
        8px
        10px !important;

    background:
        #f1fbf6 !important;

    border:
        1px solid
        #cce9da !important;

    border-radius:
        8px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


/* medal */

.mct-titles-page
.mct-title-best-decade
.mct-best-decade-medal {
    grid-area:
        icon !important;

    width:
        34px !important;

    height:
        34px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    color:
        #e8a91a !important;
}


.mct-titles-page
.mct-title-best-decade
.mct-best-decade-medal
svg {
    width:
        29px !important;

    height:
        29px !important;

    display:
        block !important;

    fill:
        currentColor !important;
}


/* small label */

.mct-titles-page
.mct-title-best-decade
> span:not(.mct-best-decade-medal) {
    grid-area:
        label !important;

    align-self:
        end !important;

    justify-self:
        start !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #648170 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;
}


/* 2020–2029 */

.mct-titles-page
.mct-title-best-decade
> strong {
    grid-area:
        decade !important;

    align-self:
        start !important;

    justify-self:
        start !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        27px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;
}


/* right number */

.mct-titles-page
.mct-title-best-decade
> b {
    grid-area:
        value !important;

    align-self:
        center !important;

    justify-self:
        end !important;

    width:
        110px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        28px !important;

    font-weight:
        800 !important;

    line-height:
        .92 !important;

    text-align:
        right !important;

    white-space:
        nowrap !important;
}


/* remove "17 conquistas" inline look:
   show number large + CONQUISTAS below */

.mct-titles-page
.mct-title-best-decade
> b {
    font-size:
        0 !important;
}


.mct-titles-page
.mct-title-best-decade
> b::before {
    content:
        attr(data-count);

    display:
        block;

    color:
        #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        .9;
}


.mct-titles-page
.mct-title-best-decade
> b::after {
    content:
        "CONQUISTAS" !important;

    display:
        block !important;

    margin-top:
        5px !important;

    color:
        #71869a !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-align:
        right !important;
}


/*
 * We do not currently have data-count in markup,
 * so restore real PHP text until we add it.
 */

.mct-titles-page
.mct-title-best-decade
> b::before {
    display:
        none !important;
}

.mct-titles-page
.mct-title-best-decade
> b {
    font-size:
        22px !important;

    color:
        #0bae5b !important;
}


/* MOBILE */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-title-best-decade {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            92px !important;

        padding:
            8px
            10px !important;
    }


    .mct-titles-page
    .mct-title-best-decade
    > strong {
        font-size:
            23px !important;
    }


    .mct-titles-page
    .mct-title-best-decade
    > b {
        width:
            86px !important;

        font-size:
            19px !important;
    }

}



/*
 * ==========================================================
 * BEST DECADE FINAL ALIGNMENT V15
 * ==========================================================
 */

.mct-titles-page
.mct-title-best-decade {
    position: relative !important;

    min-height: 78px !important;
    height: 78px !important;

    display: grid !important;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        105px !important;

    grid-template-rows:
        1fr !important;

    align-items:
        center !important;

    column-gap:
        12px !important;

    margin:
        8px
        0
        0 !important;

    padding:
        9px
        14px !important;

    background:
        #f1fbf6 !important;

    border:
        1px solid
        #cce9da !important;

    border-radius:
        8px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   SVG MEDAL
   ========================================================== */

.mct-titles-page
.mct-best-decade-medal {
    grid-column:
        1 !important;

    width:
        38px !important;

    height:
        38px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    margin:
        0 !important;

    color:
        #e6a719 !important;
}


.mct-titles-page
.mct-best-decade-medal
svg {
    width:
        30px !important;

    height:
        30px !important;

    display:
        block !important;

    fill:
        currentColor !important;
}


/* ==========================================================
   CENTER COPY
   ========================================================== */

.mct-titles-page
.mct-title-best-decade
> span:not(.mct-best-decade-medal) {
    position:
        absolute !important;

    left:
        64px !important;

    top:
        16px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #668070 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        10px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;
}


.mct-titles-page
.mct-title-best-decade
> strong {
    position:
        absolute !important;

    left:
        64px !important;

    top:
        32px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        28px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   RIGHT VALUE
   ========================================================== */

.mct-titles-page
.mct-best-decade-value {
    grid-column:
        3 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    align-self:
        stretch !important;

    min-width:
        95px !important;

    padding-left:
        13px !important;

    border-left:
        1px solid
        #d4ebe0 !important;

    text-align:
        center !important;
}


.mct-titles-page
.mct-best-decade-value
> strong {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #08ae56 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        30px !important;

    font-weight:
        800 !important;

    line-height:
        .9 !important;
}


.mct-titles-page
.mct-best-decade-value
> small {
    display:
        block !important;

    margin-top:
        6px !important;

    color:
        #6f8495 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        8px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        .03em !important;
}


/* kill old b rules */

.mct-titles-page
.mct-title-best-decade
> b {
    display:
        none !important;
}


/* MOBILE */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-title-best-decade {
        grid-template-columns:
            36px
            minmax(0, 1fr)
            82px !important;

        height:
            72px !important;

        min-height:
            72px !important;

        padding:
            8px
            10px !important;
    }


    .mct-titles-page
    .mct-title-best-decade
    > span:not(.mct-best-decade-medal) {
        left:
            54px !important;

        top:
            14px !important;
    }


    .mct-titles-page
    .mct-title-best-decade
    > strong {
        left:
            54px !important;

        top:
            30px !important;

        font-size:
            24px !important;
    }


    .mct-titles-page
    .mct-best-decade-value {
        min-width:
            72px !important;

        padding-left:
            9px !important;
    }


    .mct-titles-page
    .mct-best-decade-value
    > strong {
        font-size:
            25px !important;
    }

}



/*
 * ==========================================================
 * BEST DECADE — FIGURE 2 EXACT STYLE V16
 * ==========================================================
 */

.mct-titles-page
.mct-title-best-decade {
    position: relative !important;

    width: 100% !important;

    min-height: 100px !important;
    height: 100px !important;

    display: grid !important;

    grid-template-columns:
        92px
        minmax(0, 1fr)
        125px !important;

    grid-template-rows:
        1fr !important;

    grid-template-areas:
        "icon copy value" !important;

    align-items: center !important;

    column-gap: 18px !important;

    margin:
        10px
        0
        0 !important;

    padding:
        10px
        18px !important;

    background:
        #f1fbf6 !important;

    border:
        1px solid
        #bfe8d3 !important;

    border-radius:
        9px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   MEDAL
   ========================================================== */

.mct-titles-page
.mct-best-decade-medal {
    grid-area: icon !important;

    position: static !important;

    width: 76px !important;
    height: 76px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 50% !important;

    background:
        #fff3cd !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(231, 184, 55, .08) !important;
}


.mct-titles-page
.mct-best-decade-medal
svg {
    width: 54px !important;
    height: 54px !important;

    display: block !important;

    fill: none !important;
}


/* ==========================================================
   CENTER COPY
   ========================================================== */

.mct-titles-page
.mct-title-best-decade
> span:not(.mct-best-decade-medal) {
    grid-area: copy !important;

    position: static !important;

    align-self: center !important;
    justify-self: stretch !important;

    display: block !important;

    margin:
        0
        0
        6px !important;

    padding: 0 !important;

    color:
        #638077 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-align:
        left !important;
}


/*
 * Put label + decade in same center column.
 */

.mct-titles-page
.mct-title-best-decade
> strong {
    grid-area: copy !important;

    position: static !important;

    align-self: center !important;
    justify-self: stretch !important;

    display: block !important;

    margin:
        26px
        0
        0 !important;

    padding: 0 !important;

    color:
        #09243a !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        36px !important;

    font-weight:
        800 !important;

    line-height:
        .9 !important;

    letter-spacing:
        -.02em !important;

    white-space:
        nowrap !important;

    text-align:
        left !important;
}


/* ==========================================================
   RIGHT VALUE
   ========================================================== */

.mct-titles-page
.mct-best-decade-value {
    grid-area: value !important;

    position: static !important;

    height: 72px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;

    margin: 0 !important;

    padding:
        0
        0
        0
        18px !important;

    border-left:
        1px solid
        #cce9dc !important;

    text-align:
        center !important;

    box-sizing:
        border-box !important;
}


.mct-titles-page
.mct-best-decade-value
> strong {
    display: block !important;

    margin: 0 !important;

    color:
        #05b85a !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        44px !important;

    font-weight:
        800 !important;

    line-height:
        .82 !important;

    letter-spacing:
        -.02em !important;
}


.mct-titles-page
.mct-best-decade-value
> small {
    display: block !important;

    margin-top:
        9px !important;

    color:
        #657d91 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .035em !important;
}


/* kill every old best-decade layout rule */

.mct-titles-page
.mct-title-best-decade
> b {
    display: none !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .mct-titles-page
    .mct-title-best-decade {
        min-height:
            88px !important;

        height:
            88px !important;

        grid-template-columns:
            66px
            minmax(0, 1fr)
            84px !important;

        column-gap:
            10px !important;

        padding:
            8px
            10px !important;
    }


    .mct-titles-page
    .mct-best-decade-medal {
        width:
            58px !important;

        height:
            58px !important;
    }


    .mct-titles-page
    .mct-best-decade-medal
    svg {
        width:
            43px !important;

        height:
            43px !important;
    }


    .mct-titles-page
    .mct-title-best-decade
    > span:not(.mct-best-decade-medal) {
        font-size:
            10px !important;
    }


    .mct-titles-page
    .mct-title-best-decade
    > strong {
        margin-top:
            22px !important;

        font-size:
            27px !important;
    }


    .mct-titles-page
    .mct-best-decade-value {
        height:
            62px !important;

        padding-left:
            10px !important;
    }


    .mct-titles-page
    .mct-best-decade-value
    > strong {
        font-size:
            34px !important;
    }


    .mct-titles-page
    .mct-best-decade-value
    > small {
        margin-top:
            7px !important;

        font-size:
            8px !important;
    }

}



/*
 * ==========================================================
 * BEST DECADE REFERENCE MATCH V17
 * Match the supplied Figure 2 proportions
 * ==========================================================
 */

html body
.mct-titles-page
.mct-title-best-decade {
    position: relative !important;

    width: 100% !important;

    height: 118px !important;
    min-height: 118px !important;
    max-height: 118px !important;

    display: grid !important;

    grid-template-columns:
        96px
        minmax(0, 1fr)
        126px !important;

    grid-template-rows:
        1fr !important;

    grid-template-areas:
        "medal center value" !important;

    align-items: center !important;

    column-gap: 18px !important;

    margin: 10px 0 0 !important;

    padding:
        12px
        18px !important;

    background:
        linear-gradient(
            100deg,
            #f3fcf7 0%,
            #f7fdf9 52%,
            #f4fcf8 100%
        ) !important;

    border:
        1px solid
        #b9e5ce !important;

    border-radius:
        10px !important;

    box-sizing:
        border-box !important;

    overflow:
        hidden !important;
}


/* ==========================================================
   MEDAL AREA
   ========================================================== */

html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-medal {
    grid-area:
        medal !important;

    position: static !important;

    width: 82px !important;
    height: 82px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;
    justify-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        #fff3cf !important;

    border-radius:
        50% !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(230, 176, 30, .08) !important;

    color:
        initial !important;
}


html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-medal
svg {
    width: 60px !important;
    height: 60px !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    overflow: visible !important;

    /*
     * IMPORTANT:
     * preserve each SVG path's own red/gold fills.
     */
    fill: initial !important;
    color: initial !important;
}


html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-medal
svg path {
    fill:
        revert !important;
}


/* ==========================================================
   CENTER — label above, decade below
   ========================================================== */

html body
.mct-titles-page
.mct-title-best-decade
> span:not(.mct-best-decade-medal) {
    grid-area:
        center !important;

    position: static !important;

    align-self: center !important;
    justify-self: stretch !important;

    display: block !important;

    transform:
        translateY(-22px) !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        #63847b !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-align:
        left !important;

    white-space:
        nowrap !important;
}


html body
.mct-titles-page
.mct-title-best-decade
> strong {
    grid-area:
        center !important;

    position: static !important;

    align-self: center !important;
    justify-self: stretch !important;

    display: block !important;

    transform:
        translateY(13px) !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        #09243a !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        42px !important;

    font-weight:
        800 !important;

    line-height:
        .92 !important;

    letter-spacing:
        -.025em !important;

    text-align:
        left !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   RIGHT VALUE
   ========================================================== */

html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-value {
    grid-area:
        value !important;

    position: static !important;

    width: 100% !important;
    height: 82px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;
    justify-self: stretch !important;

    margin: 0 !important;

    padding:
        0
        0
        0
        17px !important;

    border-left:
        1px solid
        #c9ead9 !important;

    text-align:
        center !important;

    box-sizing:
        border-box !important;
}


html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-value
> strong {
    position: static !important;

    display: block !important;

    transform: none !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        #06b95c !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        52px !important;

    font-weight:
        800 !important;

    line-height:
        .82 !important;

    letter-spacing:
        -.025em !important;

    text-align:
        center !important;
}


html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-value
> small {
    position: static !important;

    display: block !important;

    margin:
        11px
        0
        0 !important;

    padding: 0 !important;

    color:
        #607a91 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        12px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .04em !important;

    text-align:
        center !important;
}


/* old output must never interfere */

html body
.mct-titles-page
.mct-title-best-decade
> b {
    display:
        none !important;
}


/* ==========================================================
   MEDIUM DESKTOP
   ========================================================== */

@media (max-width: 1100px) {

    html body
    .mct-titles-page
    .mct-title-best-decade {
        grid-template-columns:
            82px
            minmax(0, 1fr)
            110px !important;

        column-gap:
            13px !important;

        padding:
            11px
            13px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-medal {
        width:
            70px !important;

        height:
            70px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-medal
    svg {
        width:
            52px !important;

        height:
            52px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    > strong {
        font-size:
            36px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-value
    > strong {
        font-size:
            44px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    html body
    .mct-titles-page
    .mct-title-best-decade {
        height:
            94px !important;

        min-height:
            94px !important;

        max-height:
            94px !important;

        grid-template-columns:
            62px
            minmax(0, 1fr)
            78px !important;

        column-gap:
            8px !important;

        padding:
            8px
            9px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-medal {
        width:
            56px !important;

        height:
            56px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-medal
    svg {
        width:
            43px !important;

        height:
            43px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    > span:not(.mct-best-decade-medal) {
        transform:
            translateY(-17px) !important;

        font-size:
            9px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    > strong {
        transform:
            translateY(10px) !important;

        font-size:
            26px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-value {
        height:
            66px !important;

        padding-left:
            8px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-value
    > strong {
        font-size:
            34px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    .mct-best-decade-value
    > small {
        margin-top:
            7px !important;

        font-size:
            7px !important;
    }

}



/*
 * ==========================================================
 * BEST DECADE — REAL 399PX LAYOUT V18
 * No transform / no absolute / no collision
 * ==========================================================
 */

html body
.mct-titles-page
.mct-title-best-decade {
    position: relative !important;

    width: 100% !important;

    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;

    display: grid !important;

    grid-template-columns:
        72px
        minmax(0, 1fr)
        88px !important;

    grid-template-rows:
        38px
        42px !important;

    grid-template-areas:
        "medal label value"
        "medal decade value" !important;

    align-items: center !important;

    column-gap: 10px !important;
    row-gap: 0 !important;

    margin: 10px 0 0 !important;

    padding:
        11px
        12px !important;

    background:
        linear-gradient(
            100deg,
            #f2fbf6 0%,
            #f7fdf9 55%,
            #f2fbf6 100%
        ) !important;

    border:
        1px solid
        #bce4cf !important;

    border-radius:
        9px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;
}


/* ==========================================================
   LEFT MEDAL
   ========================================================== */

html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-medal {
    grid-area: medal !important;

    position: static !important;

    width: 64px !important;
    height: 64px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;
    justify-self: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    background:
        #fff1c9 !important;

    border-radius: 50% !important;

    color: initial !important;
}


html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-medal
svg {
    width: 48px !important;
    height: 48px !important;

    display: block !important;

    max-width: none !important;
    max-height: none !important;

    overflow: visible !important;

    fill: none !important;

    transform: none !important;
}


/*
 * Restore exact SVG colors.
 * Previous generic SVG rules were turning it black.
 */

html body
.mct-titles-page
.mct-best-decade-medal
svg path:nth-of-type(1) {
    fill: #df2828 !important;
}

html body
.mct-titles-page
.mct-best-decade-medal
svg path:nth-of-type(2) {
    fill: #b81720 !important;
}

html body
.mct-titles-page
.mct-best-decade-medal
svg circle:nth-of-type(1) {
    fill: #ffc928 !important;
}

html body
.mct-titles-page
.mct-best-decade-medal
svg circle:nth-of-type(2) {
    fill: #f7b800 !important;
}

html body
.mct-titles-page
.mct-best-decade-medal
svg path:nth-of-type(3) {
    fill: #b77a00 !important;
}

html body
.mct-titles-page
.mct-best-decade-medal
svg rect {
    fill: #b77a00 !important;
}


/* ==========================================================
   CENTER — SMALL LABEL TOP
   ========================================================== */

html body
.mct-titles-page
.mct-title-best-decade
> span:not(.mct-best-decade-medal) {
    grid-area: label !important;

    position: static !important;

    align-self: end !important;
    justify-self: start !important;

    display: block !important;

    width: auto !important;

    margin: 0 0 4px !important;
    padding: 0 !important;

    transform: none !important;

    color:
        #617f75 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-align:
        left !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   CENTER — BIG DECADE BELOW
   ========================================================== */

html body
.mct-titles-page
.mct-title-best-decade
> strong {
    grid-area: decade !important;

    position: static !important;

    align-self: start !important;
    justify-self: start !important;

    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    color:
        #09243a !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        31px !important;

    font-weight:
        600 !important;

    line-height:
        .92 !important;

    letter-spacing:
        -.02em !important;

    text-align:
        left !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   RIGHT VALUE
   ========================================================== */

html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-value {
    grid-area: value !important;

    position: static !important;

    width: 88px !important;
    height: 72px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;
    justify-self: stretch !important;

    margin: 0 !important;

    padding:
        0
        0
        0
        10px !important;

    transform: none !important;

    border-left:
        1px solid
        #c9e7d8 !important;

    box-sizing:
        border-box !important;

    text-align:
        center !important;
}


html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-value
> strong {
    position: static !important;

    display: block !important;

    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    color:
        #04b85a !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        40px !important;

    font-weight:
        600 !important;

    line-height:
        .82 !important;

    letter-spacing:
        -.02em !important;

    text-align:
        center !important;
}


html body
.mct-titles-page
.mct-title-best-decade
.mct-best-decade-value
> small {
    position: static !important;

    display: block !important;

    margin:
        8px
        0
        0 !important;

    padding: 0 !important;

    transform: none !important;

    color:
        #60788d !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        9px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    letter-spacing:
        .04em !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;
}


/* no legacy output */

html body
.mct-titles-page
.mct-title-best-decade
> b {
    display: none !important;
}


/* ==========================================================
   WIDER CARD
   ========================================================== */

@media (min-width: 1200px) {

    html body
    .mct-titles-page
    .mct-title-best-decade {
        grid-template-columns:
            78px
            minmax(0, 1fr)
            96px !important;

        column-gap:
            12px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    html body
    .mct-titles-page
    .mct-title-best-decade {
        height:
            92px !important;

        min-height:
            92px !important;

        max-height:
            92px !important;

        grid-template-columns:
            70px
            minmax(0, 1fr)
            70px !important;

        grid-template-rows:
            33px
            37px !important;

        column-gap:
            8px !important;

        padding:
            10px
            9px !important;
    }


    html body
    .mct-titles-page
    .mct-best-decade-medal {
        width:
            50px !important;

        height:
            50px !important;
    }


    html body
    .mct-titles-page
    .mct-best-decade-medal
    svg {
        width:
            39px !important;

        height:
            39px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    > span:not(.mct-best-decade-medal) {
        font-size:
            11px !important;
    }


    html body
    .mct-titles-page
    .mct-title-best-decade
    > strong {
        font-size:
            25px !important;
    }


    html body
    .mct-titles-page
    .mct-best-decade-value {
        width:
            70px !important;

        height:
            62px !important;

        padding-left:
            6px !important;
    }


    html body
    .mct-titles-page
    .mct-best-decade-value
    > strong {
        font-size:
            32px !important;
    }


    html body
    .mct-titles-page
    .mct-best-decade-value
    > small {
        margin-top:
            6px !important;

        font-size:
            7px !important;
    }

}



/*
 * ==========================================================
 * RITMO DE CONQUISTAS — REFERENCE STYLE V19
 * ==========================================================
 */

html body
.mct-titles-page
.mct-title-rhythm {
    margin-top:
        2px !important;

    padding:
        0 !important;

    border-top:
        1px solid
        #e8edf0 !important;
}


/* ----------------------------------------------------------
   ROW
   ---------------------------------------------------------- */

html body
.mct-titles-page
.mct-title-rhythm
.mct-rhythm-row {
    position: relative !important;

    min-height: 58px !important;
    height: 58px !important;

    display: grid !important;

    grid-template-columns:
        42px
        minmax(0, 1fr) !important;

    align-items: center !important;

    column-gap:
        10px !important;

    margin: 0 !important;

    padding:
        0
        4px !important;

    border-bottom:
        1px solid
        #e8edf0 !important;

    box-sizing:
        border-box !important;
}


html body
.mct-titles-page
.mct-title-rhythm
.mct-rhythm-row:last-child {
    border-bottom:
        0 !important;
}


/* kill old pseudo circles */

html body
.mct-titles-page
.mct-title-rhythm
.mct-rhythm-row::before {
    display:
        none !important;
}


/* ----------------------------------------------------------
   ICON CIRCLE
   ---------------------------------------------------------- */

html body
.mct-titles-page
.mct-rhythm-icon {
    width: 34px !important;
    height: 34px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    align-self: center !important;
    justify-self: center !important;

    margin: 0 !important;

    border-radius:
        50% !important;

    background:
        #f5faf7 !important;

    box-shadow:
        inset 0 0 0 1px
        #e5f0ea !important;
}


/* common svg */

html body
.mct-titles-page
.mct-rhythm-icon
svg {
    width: 19px !important;
    height: 19px !important;

    display: block !important;

    fill:
        currentColor !important;
}


/* trophy gold */

html body
.mct-titles-page
.mct-rhythm-icon.is-trophy {
    color:
        #d4a026 !important;

    background:
        #fffaf0 !important;

    box-shadow:
        inset 0 0 0 1px
        #f2e5bf !important;
}


/* stopwatch green */

html body
.mct-titles-page
.mct-rhythm-icon.is-stopwatch {
    color:
        #10b65c !important;
}


/* bars green */

html body
.mct-titles-page
.mct-rhythm-icon.is-bars {
    color:
        #10b65c !important;
}


/* star green */

html body
.mct-titles-page
.mct-rhythm-icon.is-star {
    color:
        #10b65c !important;
}


/* ----------------------------------------------------------
   COPY
   ---------------------------------------------------------- */

html body
.mct-titles-page
.mct-rhythm-copy {
    min-width: 0;

    display: flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;
}


html body
.mct-titles-page
.mct-rhythm-copy
> span {
    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #6d8296 !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    line-height:
        1.05 !important;

    white-space:
        nowrap !important;
}


html body
.mct-titles-page
.mct-rhythm-copy
> strong {
    display:
        block !important;

    margin:
        3px
        0
        0 !important;

    padding:
        0 !important;

    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        21px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;
}


/* ----------------------------------------------------------
   REMOVE OLD ROW PADDING RULES
   ---------------------------------------------------------- */

html body
.mct-titles-page
.mct-title-rhythm
> div {
    min-height:
        58px !important;

    padding:
        0
        4px !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    html body
    .mct-titles-page
    .mct-title-rhythm
    .mct-rhythm-row {
        height:
            56px !important;

        min-height:
            56px !important;

        grid-template-columns:
            40px
            minmax(0, 1fr) !important;

        column-gap:
            9px !important;
    }


    html body
    .mct-titles-page
    .mct-rhythm-icon {
        width:
            32px !important;

        height:
            32px !important;
    }


    html body
    .mct-titles-page
    .mct-rhythm-icon
    svg {
        width:
            18px !important;

        height:
            18px !important;
    }


    html body
    .mct-titles-page
    .mct-rhythm-copy
    > span {
        font-size:
            11px !important;
    }


    html body
    .mct-titles-page
    .mct-rhythm-copy
    > strong {
        font-size:
            20px !important;
    }

}



/*
 * ==========================================================
 * TITULOS HISTORY + GOLDEN ERA V20
 * ==========================================================
 */


/* hide previous implementations */

html body
.mct-titles-page
.mct-title-timeline-panel {
    display: none !important;
}

html body
.mct-titles-page
.mct-old-golden-v20 {
    display: none !important;
}


/* ==========================================================
   SPACING — red box areas
   ========================================================== */

html body
.mct-titles-page
.mct-history-timeline-v20 {
    margin-top:
        22px !important;

    margin-bottom:
        22px !important;
}


/* ==========================================================
   TIMELINE CARD
   ========================================================== */

html body
.mct-titles-page
.mct-history-timeline-v20 {
    min-height:
        250px !important;

    padding:
        18px
        20px
        20px !important;

    background:
        #fff !important;

    border:
        1px solid
        #dbe5eb !important;

    border-radius:
        9px !important;

    box-sizing:
        border-box !important;
}


html body
.mct-titles-page
.mct-history-head-v20 {
    display:
        flex !important;

    align-items:
        flex-start !important;

    justify-content:
        space-between !important;

    margin:
        0
        0
        14px !important;

    padding:
        0 !important;
}


html body
.mct-titles-page
.mct-history-head-v20
h3 {
    margin:
        0 !important;

    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        15px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;
}


html body
.mct-titles-page
.mct-history-head-v20
p {
    margin:
        5px
        0
        0 !important;

    color:
        #74899c !important;

    font-family:
        Rajdhani,
        sans-serif !important;

    font-size:
        11px !important;
}


/* arrows */

html body
.mct-titles-page
.mct-history-arrows-v20 {
    display:
        flex;

    gap:
        8px;
}


html body
.mct-titles-page
.mct-history-arrows-v20
span {
    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #f8fafb;

    border:
        1px solid
        #e0e7eb;

    border-radius:
        50%;

    color:
        #506a7e;
}


html body
.mct-titles-page
.mct-history-arrows-v20
svg {
    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* track */

html body
.mct-titles-page
.mct-history-track-v20 {
    position:
        relative;

    padding:
        0
        4px
        8px;
}


html body
.mct-titles-page
.mct-history-items-v20 {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    gap:
        6px;
}


html body
.mct-titles-page
.mct-history-item-v20 {
    position:
        relative;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    padding-bottom:
        43px;
}


/* competition logo */

html body
.mct-titles-page
.mct-history-logo-v20 {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        7px;

    background:
        #f8fafb;

    border:
        1px solid
        #e3e9ed;

    border-radius:
        50%;
}


html body
.mct-titles-page
.mct-history-logo-v20
img {
    width:
        34px !important;

    height:
        34px !important;

    max-width:
        34px !important;

    max-height:
        34px !important;

    object-fit:
        contain !important;
}


html body
.mct-titles-page
.mct-history-logo-v20
svg {
    width:
        24px;

    height:
        24px;

    fill:
        #8aa0b1;
}


/* year */

html body
.mct-titles-page
.mct-history-item-v20
> strong {
    color:
        #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        20px;

    font-weight:
        600;

    line-height:
        1;
}


/* competition */

html body
.mct-titles-page
.mct-history-item-v20
> p {
    min-height:
        34px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    margin:
        5px
        0
        0;

    color:
        #09a953;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.15;
}


/* main timeline */

html body
.mct-titles-page
.mct-history-line-v20 {
    position:
        absolute;

    z-index:
        1;

    left:
        1%;

    right:
        1%;

    bottom:
        18px;

    height:
        2px;

    background:
        #dfe7ec;
}


/* green main nodes */

html body
.mct-titles-page
.mct-history-item-v20
> i {
    position:
        absolute;

    z-index:
        3;

    left:
        50%;

    bottom:
        12px;

    width:
        12px;

    height:
        12px;

    transform:
        translateX(-50%);

    background:
        #0caf58;

    border:
        2px solid
        #fff;

    border-radius:
        50%;

    box-shadow:
        0 0 0 1px
        #0caf58;
}


/* small grey intermediate nodes */

html body
.mct-titles-page
.mct-history-line-v20::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        50%;

    height:
        8px;

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            circle,
            #d7e0e6 0 4px,
            transparent 4.5px
        )
        left center /
        31px 8px
        repeat-x;
}


/* ==========================================================
   GOLDEN ERA
   ========================================================== */

html body
.mct-titles-page
.mct-golden-era-v20 {
    width:
        100% !important;

    margin:
        0
        0
        22px !important;

    padding:
        18px
        20px
        20px !important;

    background:
        #fff !important;

    border:
        1px solid
        #dbe5eb !important;

    border-radius:
        9px !important;

    box-sizing:
        border-box !important;
}


html body
.mct-titles-page
.mct-golden-era-v20
> header {
    margin:
        0
        0
        14px !important;
}


html body
.mct-titles-page
.mct-golden-era-v20
> header
h3 {
    margin:
        0 !important;

    color:
        #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        23px;

    font-weight:
        800;

    line-height:
        1;
}


html body
.mct-titles-page
.mct-golden-era-v20
> header
p {
    margin:
        5px
        0
        0 !important;

    color:
        #74899c;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        12px;
}


/* golden header box */

html body
.mct-titles-page
.mct-golden-hero-v20 {
    min-height:
        75px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        12px
        17px;

    background:
        #fff;

    border:
        1px solid
        #e3e9ed;

    border-radius:
        7px;

    box-sizing:
        border-box;
}


html body
.mct-titles-page
.mct-golden-crown-v20 {
    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #efb21c;
}


html body
.mct-titles-page
.mct-golden-crown-v20
svg {
    width:
        31px;

    height:
        31px;

    fill:
        currentColor;
}


html body
.mct-titles-page
.mct-golden-hero-v20
> strong {
    color:
        #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        34px;

    font-weight:
        600;

    line-height:
        1;
}


/* 3 stats */

html body
.mct-titles-page
.mct-golden-stats-v20 {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top:
        10px;
}


html body
.mct-titles-page
.mct-golden-stats-v20
> div {
    min-height:
        76px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        #e3e9ed;

    border-right:
        0;

    box-sizing:
        border-box;
}


html body
.mct-titles-page
.mct-golden-stats-v20
> div:first-child {
    border-radius:
        7px
        0
        0
        7px;
}


html body
.mct-titles-page
.mct-golden-stats-v20
> div:last-child {
    border-right:
        1px solid
        #e3e9ed;

    border-radius:
        0
        7px
        7px
        0;
}


html body
.mct-titles-page
.mct-golden-stats-v20
strong {
    color:
        #102433;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        28px;

    font-weight:
        800;

    line-height:
        1;
}


html body
.mct-titles-page
.mct-golden-stats-v20
span {
    margin-top:
        7px;

    color:
        #8093a4;

    font-family:
        Rajdhani,
        sans-serif;

    font-size:
        9px;

    font-weight:
        600;
}


/* ==========================================================
   DESKTOP: timeline + golden era same row like reference
   ========================================================== */

@media (min-width: 900px) {

    html body
    .mct-titles-page
    .mct-history-timeline-v20 {
        width:
            calc(75% - 6px) !important;

        display:
            inline-block !important;

        vertical-align:
            top !important;
    }


    html body
    .mct-titles-page
    .mct-golden-era-v20 {
        width:
            calc(25% - 10px) !important;

        display:
            inline-block !important;

        vertical-align:
            top !important;

        margin:
            22px
            0
            22px
            12px !important;

        min-height:
            250px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    html body
    .mct-titles-page
    .mct-history-timeline-v20,
    html body
    .mct-titles-page
    .mct-golden-era-v20 {
        width:
            100% !important;

        margin:
            16px
            0
            0 !important;
    }


    html body
    .mct-titles-page
    .mct-history-items-v20 {
        overflow-x:
            auto;

        grid-template-columns:
            repeat(8, 112px);

        justify-content:
            start;

        padding-bottom:
            6px;
    }


    html body
    .mct-titles-page
    .mct-history-arrows-v20 {
        display:
            none;
    }


    html body
    .mct-titles-page
    .mct-history-logo-v20 {
        width:
            42px;

        height:
            42px;
    }


    html body
    .mct-titles-page
    .mct-history-logo-v20
    img {
        width:
            30px !important;

        height:
            30px !important;
    }


    html body
    .mct-titles-page
    .mct-golden-hero-v20
    > strong {
        font-size:
            29px;
    }

}



/*
 * ==========================================================
 * HISTORY ROW REFERENCE STYLE V21
 * Linha do tempo + Era de ouro
 * ==========================================================
 */


/* ==========================================================
   MAIN ROW
   ========================================================== */

html body
.mct-titles-page
.mct-history-row-v21 {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 3fr)
        minmax(255px, 1fr) !important;

    align-items: stretch !important;

    gap: 12px !important;

    margin:
        18px
        0
        20px !important;
}


/* reset V20 inline-block desktop layout */

html body
.mct-titles-page
.mct-history-row-v21
.mct-history-timeline-v20,
html body
.mct-titles-page
.mct-history-row-v21
.mct-golden-era-v20 {
    width: 100% !important;

    display: block !important;

    vertical-align: initial !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}


/* ==========================================================
   TIMELINE CARD
   ========================================================== */

html body
.mct-titles-page
.mct-history-row-v21
.mct-history-timeline-v20 {
    min-height: 225px !important;
    height: 225px !important;

    padding:
        17px
        18px
        13px !important;

    border:
        1px solid
        #dce5ea !important;

    border-radius:
        8px !important;

    background:
        #fff !important;

    overflow: hidden !important;
}


/* heading */

html body
.mct-titles-page
.mct-history-head-v20 {
    margin:
        0
        0
        9px !important;
}


html body
.mct-titles-page
.mct-history-head-v20
h3 {
    font-size:
        15px !important;
}


html body
.mct-titles-page
.mct-history-head-v20
p {
    margin-top:
        3px !important;

    font-size:
        11px !important;
}


/*
 * Reference doesn't need large navigation circles here.
 * Keep DOM, hide visually.
 */

html body
.mct-titles-page
.mct-history-arrows-v20 {
    display: none !important;
}


/* ==========================================================
   6 TIMELINE ITEMS
   ========================================================== */

html body
.mct-titles-page
.mct-history-items-v20 {
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap:
        2px !important;
}


html body
.mct-titles-page
.mct-history-item-v20 {
    min-height:
        158px !important;

    padding-bottom:
        32px !important;
}


/* competition logo circle */

html body
.mct-titles-page
.mct-history-logo-v20 {
    width:
        36px !important;

    height:
        36px !important;

    margin-bottom:
        5px !important;

    background:
        #f8fafb !important;

    border:
        1px solid
        #e4eaee !important;
}


html body
.mct-titles-page
.mct-history-logo-v20
img {
    width:
        26px !important;

    height:
        26px !important;

    max-width:
        26px !important;

    max-height:
        26px !important;

    object-fit:
        contain !important;
}


/* year */

html body
.mct-titles-page
.mct-history-item-v20
> strong {
    font-size:
        18px !important;

    line-height:
        1 !important;
}


/* league/competition name */

html body
.mct-titles-page
.mct-history-item-v20
> p {
    min-height:
        29px !important;

    margin:
        4px
        5px
        0 !important;

    color:
        #08a852 !important;

    font-size:
        11px !important;

    line-height:
        1.1 !important;
}


/* main horizontal line */

html body
.mct-titles-page
.mct-history-line-v20 {
    left:
        2% !important;

    right:
        2% !important;

    bottom:
        17px !important;

    height:
        2px !important;

    background:
        linear-gradient(
            to right,
            #dce5eb 0%,
            #dce5eb 6%,
            #16b765 20%,
            #16b765 80%,
            #dce5eb 94%,
            #dce5eb 100%
        ) !important;
}


/* small background nodes */

html body
.mct-titles-page
.mct-history-line-v20::before {
    background:
        radial-gradient(
            circle,
            #d4dde4 0 3px,
            transparent 3.5px
        )
        left center /
        22px 7px
        repeat-x !important;
}


/* major green nodes */

html body
.mct-titles-page
.mct-history-item-v20
> i {
    bottom:
        11px !important;

    width:
        10px !important;

    height:
        10px !important;

    background:
        #0caf58 !important;

    border:
        2px solid
        #fff !important;

    box-shadow:
        0 0 0 1px
        #0caf58 !important;
}


/* ==========================================================
   ERA DE OURO
   ========================================================== */

html body
.mct-titles-page
.mct-history-row-v21
.mct-golden-era-v20 {
    min-height:
        225px !important;

    height:
        225px !important;

    padding:
        17px
        14px
        13px !important;

    border:
        1px solid
        #dce5ea !important;

    border-radius:
        8px !important;

    background:
        #fff !important;

    overflow:
        hidden !important;
}


/* heading */

html body
.mct-titles-page
.mct-golden-era-v20
> header {
    margin:
        0
        0
        10px !important;
}


html body
.mct-titles-page
.mct-golden-era-v20
> header
h3 {
    margin: 0 !important;

    font-size:
        20px !important;

    line-height:
        1 !important;
}


html body
.mct-titles-page
.mct-golden-era-v20
> header
p {
    margin:
        3px
        0
        0 !important;

    font-size:
        10px !important;
}


/* ==========================================================
   GOLDEN ERA PERIOD
   ========================================================== */

html body
.mct-titles-page
.mct-golden-hero-v20 {
    min-height:
        67px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        10px !important;

    padding:
        8px
        10px !important;

    background:
        #fff !important;

    border:
        1px solid
        #e1e8ec !important;

    border-radius:
        6px !important;
}


/* crown */

html body
.mct-titles-page
.mct-golden-crown-v20 {
    width:
        31px !important;

    height:
        31px !important;

    flex:
        0 0 31px !important;

    color:
        #efb11a !important;
}


html body
.mct-titles-page
.mct-golden-crown-v20
svg {
    width:
        28px !important;

    height:
        28px !important;

    fill:
        currentColor !important;
}


/* period */

html body
.mct-titles-page
.mct-golden-hero-v20
> strong {
    margin:
        0 !important;

    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        30px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   GOLDEN ERA 3 KPIs
   ========================================================== */

html body
.mct-titles-page
.mct-golden-stats-v20 {
    display:
        grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    margin-top:
        8px !important;
}


html body
.mct-titles-page
.mct-golden-stats-v20
> div {
    min-width:
        0 !important;

    min-height:
        63px !important;

    height:
        63px !important;

    padding:
        6px
        2px !important;

    border:
        1px solid
        #e1e8ec !important;

    border-right:
        0 !important;

    background:
        #fff !important;

    box-sizing:
        border-box !important;
}


html body
.mct-titles-page
.mct-golden-stats-v20
> div:last-child {
    border-right:
        1px solid
        #e1e8ec !important;
}


html body
.mct-titles-page
.mct-golden-stats-v20
strong {
    color:
        #102433 !important;

    font-family:
        "Barlow Condensed",
        sans-serif !important;

    font-size:
        24px !important;

    font-weight:
        600 !important;

    line-height:
        1 !important;
}


html body
.mct-titles-page
.mct-golden-stats-v20
span {
    margin-top:
        6px !important;

    color:
        #7e91a2 !important;

    font-size:
        11px !important;

    line-height:
        1 !important;

    text-align:
        center !important;

    white-space:
        nowrap !important;
}


/* ==========================================================
   SPACE TO NEXT SECTION
   ========================================================== */

html body
.mct-titles-page
.mct-history-row-v21
+ * {
    margin-top:
        18px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

    html body
    .mct-titles-page
    .mct-history-row-v21 {
        grid-template-columns:
            minmax(0, 2.4fr)
            minmax(230px, 1fr) !important;
    }


    html body
    .mct-titles-page
    .mct-history-item-v20
    > p {
        font-size:
            11px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    html body
    .mct-titles-page
    .mct-history-row-v21 {
        grid-template-columns:
            1fr !important;

        gap:
            10px !important;

        margin-top:
            14px !important;
    }


    html body
    .mct-titles-page
    .mct-history-row-v21
    .mct-history-timeline-v20,
    html body
    .mct-titles-page
    .mct-history-row-v21
    .mct-golden-era-v20 {
        height:
            auto !important;

        min-height:
            0 !important;
    }


    html body
    .mct-titles-page
    .mct-history-items-v20 {
        display:
            grid !important;

        grid-template-columns:
            repeat(6, 108px) !important;

        overflow-x:
            auto !important;

        justify-content:
            start !important;

        padding-bottom:
            3px !important;
    }


    html body
    .mct-titles-page
    .mct-golden-era-v20 {
        padding-bottom:
            14px !important;
    }

}

.mct-title-best-decade>span:not(.mct-best-decade-medal),.mct-title-best-decade>strong{position:relative!important;left:10px!important;}