#container-ppal .fondoBannerRanking,
#container-ppal > .tableRanking {
    --background-color-cabecera: #2185d0;
    --color-cabecera: #fff;

    --background-color-header-table: #94c120;
    --color-header-table: #000;

    --background-color-cell-marked: #e5f4bd;
    --background-color-cell-marked-puntuable: #b9e250;
    --background-color-cell-marked-puntuable-hover: #b0df3a;
}

#container-ppal .fondoBannerRanking.ranking-AM00,
#container-ppal > .tableRanking.ranking-AM00 {
    --background-color-cabecera: #46643a;
    --color-cabecera: #94c120;

    --background-color-header-table: #364b2a;
    --color-header-table: #8dac80;

    --background-color-cell-marked: #c6dabe;
    --background-color-cell-marked-puntuable: #a7c59b;
    --background-color-cell-marked-puntuable-hover: #7fab6d;
}

#container-ppal .fondoBannerRanking.ranking-CM00,
#container-ppal > .tableRanking.ranking-CM00 {
    --background-color-cabecera: #1355b3;
    --color-cabecera: #fddf14;

    --background-color-header-table: #fddf14;
    --color-header-table: #000;

    --background-color-cell-marked: #e1f1fe;
    --background-color-cell-marked-puntuable: #c8e5fe;
    --background-color-cell-marked-puntuable-hover: #9bcffd;
}

#container-ppal .fondoBannerRanking.ranking-7700,
#container-ppal > .tableRanking.ranking-7700 {
    --background-color-cabecera: #085ea1;
    --color-cabecera: #fff;

    --background-color-header-table: #6db022;
    --color-header-table: #1b2b08;

    --background-color-cell-marked: #ceefa9;
    --background-color-cell-marked-puntuable: #b1e576;
    --background-color-cell-marked-puntuable-hover: #85d629;
}


#container-ppal .fondoBannerRanking.ranking-CP00,
#container-ppal > .tableRanking.ranking-CP00 {
    --background-color-cabecera: #3f6aff;
    --color-cabecera: #fff;

    --background-color-header-table: #efe890;
    --color-header-table: #000;

    --background-color-cell-marked: #fcfbe9;
    --background-color-cell-marked-puntuable: #f5f2bc;
    --background-color-cell-marked-puntuable-hover: hsl(56, 75%, 67%);
}

#container-ppal .fondoBannerRanking.ranking-CM01,
#container-ppal > .tableRanking.ranking-CM01 {
    --background-color-cabecera: #A8003B;
    --color-cabecera: #fff;

    --background-color-header-table: #FFC72C;
    --color-header-table: #000;

    --background-color-cell-marked: #fff1cc;
    --background-color-cell-marked-puntuable: #ffdd80;
    --background-color-cell-marked-puntuable-hover: #ffcd42;
}

div.ui.segment.fondoBannerRanking {
    background-color: var(--background-color-cabecera);
}

div.ui.segment.fondoBannerRanking .headerRanking,
div.ui.segment.fondoBannerRanking .a-container {
    color: var(--color-cabecera);
}

.tableHeader {
    background-color: var(--background-color-header-table);
}

.tableHeader div.ui.header {
    color: var(--color-header-table);
}

.fila .tableCell-total,
.bodyTable .tableRow:hover:not(.filaOculta) .tableCell {
    background-color: var(--background-color-cell-marked);
}

.bodyTable .tableRow:not(.filaOculta) .tableCell.puntuable {
    background-color: var(--background-color-cell-marked-puntuable);
}

.bodyTable .tableRow:hover:not(.filaOculta) .tableCell.puntuable,
.bodyTable .tableRow:hover:not(.filaOculta) .tableCell-total {
    background-color: var(--background-color-cell-marked-puntuable-hover);
}

div.filaOculta div.tableCell{
    background-color: #ededed;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.bodyTable .tableRow .tableCell span {
    color: black
}

.tableRanking{
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: whitesmoke;
}

.tableRanking .tableRow{
    display: flex;
    flex-wrap: wrap;
}

.tableRanking .tableGroup{
    display: flex;
}

.tableCell{
    padding: 0.5em;
    border: 1px solid rgba(34,36,38,.1);
}

.tableRanking .bodyTable .tableCell-nombre{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
.tableRanking .bodyTable .tableCell-competicion a span{
    opacity: 0.75;
}

.tableRanking .tableGroup-variable .tableCell{
    overflow: hidden;
    flex-basis: 100%;
}

#ranking  .filaOculta{
    /* display: none; */
    text-decoration: line-through;
    color: #999;
}

.headerRanking{
    text-align: center;
}

#container-ppal {
    width: 99%;
    display: grid;
}

.a-container {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
}

.update-container {
    position: absolute;
    bottom: -27px;
    right: 14px;
    color: #4183c4;
    font-style: italic;
}

.a-container .abreModal{
    text-decoration: underline;
    cursor: pointer;
}

.tableHeader .tableCell {
    padding: 1em 0.5em;
}

.bodyTable .tableCell-total {
    font-weight: bold;
}


.tablaAmpliada {
    max-width: 100%;
    overflow-x: scroll;
}

.tablaAmpliada .tableGroup-variable {
    display: flex!important;
}

.tablaAmpliada .tableRow {
    flex-wrap: nowrap!important;
}

.tablaAmpliada .tableCell {
    min-width: 5em;
}

.tablaAmpliada .tableCell.tableCell-nombre {
    min-width: 18em;
}

span.negrita {
    font-weight: bold;
}

.puntuable span {
    font-weight: bold;
}

.headerCompetitions .tableCell,
.headerPoints .tableCell {
    min-width: 11em;
}

/*div.vertical-name {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*}*/

/*div.vertical-name div.header {*/
/*    writing-mode: vertical-rl;*/
/*    text-orientation: mixed;*/
/*    max-height: 9em;*/
/*    transform: rotate(180deg);*/
/*    overflow: hidden;*/
/*}*/

.tableRanking {
    overflow-x: scroll;
}

.ui.segment.inactiveRanking {
    margin-top: 5em;
    padding: 4em;
}

.ui.segment.inactiveRanking h1 {
    font-style: italic
}

.competition-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

#toggle-column {
    display: flex;
    align-items: flex-end;


    position: absolute;
    bottom: -30px;
    left: 0;
}

.toggle-text {
    font-size: 1.2em;
    font-weight: bold;
}

.toggle-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --toggle-width: 8.2em; /* 144px / 16 = 9em */
    --toggle-height: 1.9em; /* 56px / 16 = 3.5em */
    --thumb-width: 4.2em; /* 80px / 16 = 5em */
    --thumb-height: 1.5em; /* 48px / 16 = 3em */
    --thumb-translate-x: 3.5em; /* 56px / 16 = 3.5em */
    --toggle-bg-color: #16c; /* blue-300 */
    --toggle-ring-color: #3b82f6; /* blue-500 */
    --thumb-bg-color: #ffffff; /* white */
    --thumb-text-color: #094aa1; /* sky-800 */
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
}

.toggle-label:focus {
    background: none;
}

.toggle-input {
    display: none;
}

.toggle-switch {
    position: relative;
    width: var(--toggle-width);
    height: var(--toggle-height);
    background-color: var(--toggle-bg-color);
    border-radius: 9999px; /* full */
    transition: all 0.1s ease-in-out;
}

.toggle-switch:after {
    content: "Inactivo";
    position: absolute;
    top: 0.25em; /* 4px / 16 = 0.25em */
    left: 0.25em; /* 4px / 16 = 0.25em */
    width: var(--thumb-width);
    height: var(--thumb-height);
    background-color: var(--thumb-bg-color);
    border-radius: 9999px; /* full */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--thumb-text-color);
    font-weight: bold;
    transition: all 0.5s ease-in-out;
    letter-spacing: .024em;
}

.toggle-input:focus + .toggle-switch {
    outline: none;
    box-shadow: 0 0 0 0.25em var(--toggle-ring-color); /* 4px / 16 = 0.25em */
}

.toggle-input:checked + .toggle-switch:after {
    transform: translateX(var(--thumb-translate-x));
    content: "Activo";
}

.no-highlights{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.table-ranking-container {
    margin-top: 1.5em;
}

.hide-points-columns {
    width: 60%;
    justify-self: center;
    border-radius: .28571429rem;
}

.hide-points-columns .points-columns {
    display:none !important;
}

.hide-points-columns .tableCell {
    display: flex;
    flex-grow: 1;
}

.hide-points-columns .tableCell.tableCell-pos,
.hide-points-columns .tableCell.tableCell-total,
.hide-points-columns .tableCell.tableCell-licencia {
    justify-content: center;
}

.hide-points-columns .tableCell.tableCell-pos,
.hide-points-columns .tableCell.tableCell-total {
    width: 6%;
    flex-grow: unset;
}

.hide-points-columns .tableCell.tableCell-licencia {
    width: 20%;
    flex-grow: unset;
}

a.cell-points {
    display: flex;
    justify-content: center;
    gap: .2em;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: .5em;
}

.icon-bonus-penalty{
    display: flex;
    width: 1em;
    height: 1em;
    align-self: center;
}

.headerPoints .tableCell {
    box-sizing:  border-box;
    position: relative;
    padding: 0;
}

#show-observations-btn {
    width: fit-content;
    display:flex;
    align-items: center;
    /*margin-top: 2.3em;*/
    border-radius: .5em;
    padding: 0 .5em;
    font-weight: bold;
    background: #16c;
    color: white;
    cursor: pointer;
    user-select: none;
}

#show-observations-btn svg {
    margin-right: .2em;
}

#show-observations-btn.hidden {
    display:none;
}

#observations-segment {
    margin-top: 1em;
    padding: 1em 2em;
    border: 1px solid #c1d8f3;
    border-radius: .5em;
    background: #ffffff36;
    position: relative;
    display: none;

    border-left: 10px solid #16c;
    box-sizing: content-box;
}

#observations-hide-btn {
    cursor: pointer;
}

#observations-hide-btn svg {
    background: #16c;
    width: fit-content;
    border-radius: 999999999em;
    padding: .2em;
    position: absolute;
    top: -1.3em;
    left: -.7em;
    color: white;
}

.only-login-visible {
    border: 1px solid #d1d100;
    border-radius: .5em;
    padding: .5em;
    margin-top: .5em;
    background: #ffeb3b;
    color: black;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    word-spacing: .1em;
    -webkit-animation: blink-1 3s infinite both;
    animation: blink-1 3s infinite both;
}

@media (min-width: 901px){
    .tableRanking .tableCell-pos{
        width: 3%;
    }

    .tableRanking .tableCell-nombre{
        width: 19.5%;
    }

    .tableRanking .tableCell-licencia{
        width: 8%;
    }

    .tableRanking .tableCell-total{
        width: 4.5%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .1em;
    }

    .tableRanking .tableGroup-variable{
        display: flex;
        width: 65%;
    }

    .headerRanking{
        text-align: left;
    }

    .fondoBannerRanking{
        min-height: 100px;
    }
}

@media (max-width: 900px){
    #container-ppal{
        width: 100%;
    }

    .fondoBannerRanking{
        /*height: 70px;*/
        background-size: 150% 100%!important;
    }

    .tableRanking .tableGroup-variable{
        display: flex;
        width: 100%;
        order: 4;
    }

    .tableRanking .tableGroup-variable{
        display: none;
    }

    .tableRanking .tableCell-pos{
        width: 10%;
        order: 1;
    }

    .tableRanking .tableCell-licencia{
        display: none;
    }

    .tableRanking .tableCell-nombre{
        width: 75%;
        order: 2;
    }

    .tableRanking .tableCell-total{
        width: 15%;
        order: 3;
    }


    .table-ranking-container {
        width: 100%;
        justify-self: center;
        border-radius: unset;
    }

    .table-ranking-container .hide-points-columns .tableCell {
        display: none;
    }

    .table-ranking-container .tableCell {
        flex-grow: 1;
    }

    .table-ranking-container .tableCell.tableCell-pos,
    .table-ranking-container .tableCell.tableCell-total {
        justify-content: center;
        width: 12%;
        flex-grow: unset;
    }

    .table-ranking-container .tableCell.tableCell-licencia {
        display: none !important;
    }

    .table-ranking-container .tableCell.tableCell-pos,
    .table-ranking-container .tableCell.tableCell-total,
    .table-ranking-container .tableCell.tableCell-nombre {
        display: flex;
    }

    .headerCompetitions .tableCell {
        /*pointer-events: none;*/
    }

    .bodyTable .tableRow .headerPoints div.tableCell {
        border-bottom: 1px solid var(--background-color-cabecera);
    }

    .bodyTable .tableRow:last-of-type .headerPoints div.tableCell {
        border-bottom: none !important;
    }
}

@media (max-width: 767px) {
    #toggle-column {
        position: relative;
        margin-left: .1em;
    }

    #show-observations-btn {
        margin-top: 1em;
    }

    #observations-segment {
        margin-top: 2em;
    }
}

@media (max-width: 1301px){
    .tableRanking .tableCell-licencia{
        display: none;
    }

    .tableRanking .tableGroup-variable {
        display: flex;
        width: 73%;
    }
}


@-webkit-keyframes blink-1 {
    0%,
    50%,
    100% {
        background: #ffeb3b;
    }
    25%,
    75% {
        background: yellow;
    }
}
@keyframes blink-1 {
    0%,
    50%,
    100% {
        background: #ffeb3b;
    }
    25%,
    75% {
        background: yellow;
    }
}