.mono {
    font-family: monospace !important
}

.site-container {
    transition: all 0.2s ease;
}

.site-container-width {
    width: 96%;
}

.bottom-nav {
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    border-radius: 1px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr;
    padding-top: 5px;
}

.bottom-nav-link {
    border: 1px solid #ddd;
    border-width: 1px 0px 5px 0px;
    border-bottom: 5px solid #ddd;
    color: #126cd3;
    cursor: pointer;
    display: flex;
    flex: 1;
    padding: 5px 0px;
    grid-row: 1;
    grid-column: auto / span 2;
    justify-content: center;
    align-items: center;

}

.bottom-nav-link.is-selected {
    font-weight: 700;
    border-bottom: 5px solid #186dcd;
}

.bottom-nav-link.has-sub-nav::after {
    color: #6295d0;
    content: '\25bc\00FE0E';
    font-size: 11px;
    line-height: 21px;
    padding-left: 3px;
}

.btn-bottom-nav-back {
    align-items: center;
    background: #126cd3;
    border: 0;
    color: #fff;
    border-radius: 3px;
    left: 0;
    padding: 0px 8px;
    grid-row: 1;
    justify-self: center;
    margin: 1px 0px 5px 0px;
    display: flex;
    justify-content: center;
    min-width: 50%;
}

.btn-bottom-nav-back::before {
    content: '\25C0\00FE0E';
    font-size: 10px;
    padding-right: 3px;
}

.btn::before {
    content: none;
}

.btn::after {
    content: none;
}

.input {
    transition: border 0.25s;
}

.input:focus {
    border-bottom: 3px solid #126cd3 !important;
}

.player__img {
    height: 40%;
}

    .player__img--no-photo {
        height: 95%;
    }


@media screen and (min-width: 540px ) {
    .player__img {
        height: 60px;
    }
}

[class~="grid"] > [class*="_col-0"],
[class*="grid-"] > [class*="_col-0"],
[class*="grid_"] > [class*="_col-0"] {
    display: none; }

.text-1 { font-size: 0.08333em; }
.text-2 {  font-size: 0.16667em; }
.text-3 { font-size: 0.25em; }
.text-4 { font-size: 0.3333em; }
.text-5 { font-size: 0.41667em; }
.text-6 { font-size: 0.5em; }
.text-7 { font-size: 0.16667em; }
.text-8 { font-size: 0.6667em; }
.text-9 { font-size: 0.75em; }
.text-10 { font-size: 0.83333em; }
.text-11 { font-size: 0.91667em; }
.text-12 { font-size: 1em; }

@media screen and (max-width: 980px ) {

    [class~="grid"] > [class*="_lg-0"],
    [class*="grid-"] > [class*="_lg-0"],
    [class*="grid_"] > [class*="_lg-0"] {
        display: none; }

    [class~="grid"] > [class*="_lg-1"],
    [class*="grid-"] > [class*="_lg-1"],
    [class*="grid_"] > [class*="_lg-1"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-2"],
    [class*="grid-"] > [class*="_lg-2"],
    [class*="grid_"] > [class*="_lg-2"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-3"],
    [class*="grid-"] > [class*="_lg-3"],
    [class*="grid_"] > [class*="_lg-3"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-4"],
    [class*="grid-"] > [class*="_lg-4"],
    [class*="grid_"] > [class*="_lg-4"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-5"],
    [class*="grid-"] > [class*="_lg-5"],
    [class*="grid_"] > [class*="_lg-5"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-6"],
    [class*="grid-"] > [class*="_lg-6"],
    [class*="grid_"] > [class*="_lg-6"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-7"],
    [class*="grid-"] > [class*="_lg-7"],
    [class*="grid_"] > [class*="_lg-7"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-8"],
    [class*="grid-"] > [class*="_lg-8"],
    [class*="grid_"] > [class*="_lg-8"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-9"],
    [class*="grid-"] > [class*="_lg-9"],
    [class*="grid_"] > [class*="_lg-9"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-10"],
    [class*="grid-"] > [class*="_lg-10"],
    [class*="grid_"] > [class*="_lg-10"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-11"],
    [class*="grid-"] > [class*="_lg-11"],
    [class*="grid_"] > [class*="_lg-11"] {
        display: initial; }

    [class~="grid"] > [class*="_lg-12"],
    [class*="grid-"] > [class*="_lg-12"],
    [class*="grid_"] > [class*="_lg-12"] {
        display: initial; }

    .lg-text-1 { font-size: 0.08333em; }
    .lg-text-2  { font-size: 0.16667em; }
    .lg-text-3 { font-size: 0.25em; }
    .lg-text-4 { font-size: 0.3333em; }
    .lg-text-5 { font-size: 0.41667em; }
    .lg-text-6 { font-size: 0.5em; }
    .lg-text-7 { font-size: 0.58333; }
    .lg-text-8 { font-size: 0.6667em; }
    .lg-text-9 { font-size: 0.75em; }
    .lg-text-10 { font-size: 0.83333em; }
    .lg-text-11 { font-size: 0.91667em; }
    .lg-text-12 { font-size: 1em; }
}

@media screen and (max-width: 760px ) {

    [class~="grid"] > [class*="_md-0"],
    [class*="grid-"] > [class*="_md-0"],
    [class*="grid_"] > [class*="_md-0"] {
        display: none; }

    [class~="grid"] > [class*="_md-1"],
    [class*="grid-"] > [class*="_md-1"],
    [class*="grid_"] > [class*="_md-1"] {
        display: initial; }

    [class~="grid"] > [class*="_md-2"],
    [class*="grid-"] > [class*="_md-2"],
    [class*="grid_"] > [class*="_md-2"] {
        display: initial; }

    [class~="grid"] > [class*="_md-3"],
    [class*="grid-"] > [class*="_md-3"],
    [class*="grid_"] > [class*="_md-3"] {
        display: initial; }

    [class~="grid"] > [class*="_md-4"],
    [class*="grid-"] > [class*="_md-4"],
    [class*="grid_"] > [class*="_md-4"] {
        display: initial; }

    [class~="grid"] > [class*="_md-5"],
    [class*="grid-"] > [class*="_md-5"],
    [class*="grid_"] > [class*="_md-5"] {
        display: initial; }

    [class~="grid"] > [class*="_md-6"],
    [class*="grid-"] > [class*="_md-6"],
    [class*="grid_"] > [class*="_md-6"] {
        display: initial; }

    [class~="grid"] > [class*="_md-7"],
    [class*="grid-"] > [class*="_md-7"],
    [class*="grid_"] > [class*="_md-7"] {
        display: initial; }

    [class~="grid"] > [class*="_md-8"],
    [class*="grid-"] > [class*="_md-8"],
    [class*="grid_"] > [class*="_md-8"] {
        display: initial; }

    [class~="grid"] > [class*="_md-9"],
    [class*="grid-"] > [class*="_md-9"],
    [class*="grid_"] > [class*="_md-9"] {
        display: initial; }

    [class~="grid"] > [class*="_md-10"],
    [class*="grid-"] > [class*="_md-10"],
    [class*="grid_"] > [class*="_md-10"] {
        display: initial; }

    [class~="grid"] > [class*="_md-11"],
    [class*="grid-"] > [class*="_md-11"],
    [class*="grid_"] > [class*="_md-11"] {
        display: initial; }

    [class~="grid"] > [class*="_md-12"],
    [class*="grid-"] > [class*="_md-12"],
    [class*="grid_"] > [class*="_md-12"] {
        display: initial; }

    .md-text-1 { font-size: 0.08333em; }
    .md-text-2  { font-size: 0.16667em; }
    .md-text-3 { font-size: 0.25em; }
    .md-text-4 { font-size: 0.3333em; }
    .md-text-5 { font-size: 0.41667em; }
    .md-text-6 { font-size: 0.5em; }
    .md-text-7 { font-size: 0.58333; }
    .md-text-8 { font-size: 0.6667em; }
    .md-text-9 { font-size: 0.75em; }
    .md-text-10 { font-size: 0.83333em; }
    .md-text-11 { font-size: 0.91667em; }
    .md-text-12 { font-size: 1em; }
}

@media screen and (max-width: 540px ) {

    [class~="grid"] > [class*="_sm-0"],
    [class*="grid-"] > [class*="_sm-0"],
    [class*="grid_"] > [class*="_sm-0"] {
        display: none; }

    [class~="grid"] > [class*="_sm-1"],
    [class*="grid-"] > [class*="_sm-1"],
    [class*="grid_"] > [class*="_sm-1"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-2"],
    [class*="grid-"] > [class*="_sm-2"],
    [class*="grid_"] > [class*="_sm-2"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-3"],
    [class*="grid-"] > [class*="_sm-3"],
    [class*="grid_"] > [class*="_sm-3"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-4"],
    [class*="grid-"] > [class*="_sm-4"],
    [class*="grid_"] > [class*="_sm-4"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-5"],
    [class*="grid-"] > [class*="_sm-5"],
    [class*="grid_"] > [class*="_sm-5"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-6"],
    [class*="grid-"] > [class*="_sm-6"],
    [class*="grid_"] > [class*="_sm-6"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-7"],
    [class*="grid-"] > [class*="_sm-7"],
    [class*="grid_"] > [class*="_sm-7"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-8"],
    [class*="grid-"] > [class*="_sm-8"],
    [class*="grid_"] > [class*="_sm-8"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-9"],
    [class*="grid-"] > [class*="_sm-9"],
    [class*="grid_"] > [class*="_sm-9"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-10"],
    [class*="grid-"] > [class*="_sm-10"],
    [class*="grid_"] > [class*="_sm-10"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-11"],
    [class*="grid-"] > [class*="_sm-11"],
    [class*="grid_"] > [class*="_sm-11"] {
        display: initial; }

    [class~="grid"] > [class*="_sm-12"],
    [class*="grid-"] > [class*="_sm-12"],
    [class*="grid_"] > [class*="_sm-12"] {
        display: initial; }

    .sm-text-1 { font-size: 0.08333em; }
    .sm-text-2  { font-size: 0.16667em; }
    .sm-text-3 { font-size: 0.25em; }
    .sm-text-4 { font-size: 0.3333em; }
    .sm-text-5 { font-size: 0.41667em; }
    .sm-text-6 { font-size: 0.5em; }
    .sm-text-7 { font-size: 0.58333; }
    .sm-text-8 { font-size: 0.6667em; }
    .sm-text-9 { font-size: 0.75em; }
    .sm-text-10 { font-size: 0.83333em; }
    .sm-text-11 { font-size: 0.91667em; }
    .sm-text-12 { font-size: 1em; }
}

@media screen and (max-width: 400px ) {

    .site-container-width {
        width: 100%;
    }

    [class~="grid"] > [class*="_xs-0"],
    [class*="grid-"] > [class*="_xs-0"],
    [class*="grid_"] > [class*="_xs-0"] {
        display: none; }

    [class~="grid"] > [class*="_xs-1"],
    [class*="grid-"] > [class*="_xs-1"],
    [class*="grid_"] > [class*="_xs-1"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-2"],
    [class*="grid-"] > [class*="_xs-2"],
    [class*="grid_"] > [class*="_xs-2"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-3"],
    [class*="grid-"] > [class*="_xs-3"],
    [class*="grid_"] > [class*="_xs-3"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-4"],
    [class*="grid-"] > [class*="_xs-4"],
    [class*="grid_"] > [class*="_xs-4"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-5"],
    [class*="grid-"] > [class*="_xs-5"],
    [class*="grid_"] > [class*="_xs-5"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-6"],
    [class*="grid-"] > [class*="_xs-6"],
    [class*="grid_"] > [class*="_xs-6"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-7"],
    [class*="grid-"] > [class*="_xs-7"],
    [class*="grid_"] > [class*="_xs-7"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-8"],
    [class*="grid-"] > [class*="_xs-8"],
    [class*="grid_"] > [class*="_xs-8"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-9"],
    [class*="grid-"] > [class*="_xs-9"],
    [class*="grid_"] > [class*="_xs-9"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-10"],
    [class*="grid-"] > [class*="_xs-10"],
    [class*="grid_"] > [class*="_xs-10"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-11"],
    [class*="grid-"] > [class*="_xs-11"],
    [class*="grid_"] > [class*="_xs-11"] {
        display: initial; }

    [class~="grid"] > [class*="_xs-12"],
    [class*="grid-"] > [class*="_xs-12"],
    [class*="grid_"] > [class*="_xs-12"] {
        display: initial; }

    .xs-text-1 { font-size: 0.08333em; }
    .xs-text-2  { font-size: 0.16667em; }
    .xs-text-3 { font-size: 0.25em; }
    .xs-text-4 { font-size: 0.3333em; }
    .xs-text-5 { font-size: 0.41667em; }
    .xs-text-6 { font-size: 0.5em; }
    .xs-text-7 { font-size: 0.58333; }
    .xs-text-8 { font-size: 0.6667em; }
    .xs-text-9 { font-size: 0.75em; }
    .xs-text-10 { font-size: 0.83333em; }
    .xs-text-11 { font-size: 0.91667em; }
    .xs-text-12 { font-size: 1em; }
}