body {
    font-family: Roboto;

    color: #212529;

    height: 100vh;
}

body .container-fixed {
    height: 100%;

    overflow: hidden;
}

.monospaced {
    font-family: "Roboto Mono" !important;
}

.bg-tr-dark {
    background-color: #2D2D2D;
}

.bg-tr-semidark {
    background-color: #dedede;
}

.bg-tr {
    background-color: #FF9B00;
}

.title-huge {
    font-size: 96pt;
    line-height: 0.96;
}

.title-large {
    font-size: 78pt;
    line-height: 1.1;
}

.title-big {
    font-size: 58pt;
    line-height: 1.1;
}

.title-semibig {
    font-size: 66pt;
    line-height: 1;
}

.title-medium {
    font-size: 42pt;
    line-height: 1;
}

.tr-header-slope {
    margin-top: -30px;
    border-bottom: 30px solid transparent;
    height: 0px;
}

.tr-header-slope-left {
    border-right: 50px solid #2D2D2D;
}

.tr-header-slope-right {
    border-left: 50px solid #2D2D2D;
}

.tr-border-width {
    border-width: 4px !important;
}

.tr-border-dark {
    border-color: #2D2D2D !important;
}

.tr-border {
    border-color: #FF9B00 !important;
}




.tr-header {
    width: 100vw;
    height: 80px;

    background: #2D2D2D;

    color: #fff;

    position: relative;
}




.tr-header .tr-logo {
    display: inline-block;

    height: 100%;

    padding: 16px;

    margin-right: 50px;
}

.tr-header .tr-logo > img {
    height: 100%;
}




.tr-header .tr-timer {
    display: inline-block;

    vertical-align: middle;
}

.tr-header .tr-timer > h1 {
    font-size: 46pt;

    margin-bottom: 1px;
}




.tr-header .tr-col-headers {
    position: absolute;

    right: 0;
    top: 0;

    height: 100%;
}

.tr-header .tr-col-headers > div {
    display: inline-block;

    height: 100%;

    padding: 0 14px;

    border-left: 4px solid #4A4D50;

    font-size: 46pt;
    font-weight: 500;

    line-height: 1;
}

.tr-header .tr-col-headers > div span {
    vertical-align: middle;

    line-height: 1.4;
}




.tr-content {
    height: calc(100% - 80px);
    width: 100vw;
}

.tr-content .tr-block {
    background: #F1F3F5;

    border-bottom: 2px solid #333;
}

.tr-content .tr-block:first-child {
    height: 28%;
}

.tr-content .tr-block:not(:first-child) {
    background: #E6E8E9;

    height: 18%;
}

.tr-content .tr-block .tr-block-col {
    display: inline-block;

    height: 100%;

    border-left: 4px solid #4A4D50;
}

.tr-content .tr-block .tr-block-col:first-child {
    width: calc(100% - (438px * 2));

    overflow: hidden;
}

.tr-content .tr-block .tr-block-col:first-child .tr-block-name {
    white-space: nowrap;
}

.tr-content .tr-block .tr-block-col:not(:first-child) {
    width: 438px;

    float: right;

    text-align: right;

    overflow: hidden;
}

.tr-content .tr-block .tr-block-col:not(:first-child) > span {
    font-weight: 500;

    margin-right: 16px;
}

.tr-content .tr-block .tr-block-col:not(:first-child) > span.danger {
    background: #E80018;

    color: #fff !important;

    border-radius: 4px;

    padding: 0 0 0 10px;

    display: inline-block;
}

.tr-content .tr-block .tr-block-col:not(:first-child) > span.danger:before {
    content: "+";
    margin-right: -30px;
}

.tr-content .tr-block .tr-block-col:not(:first-child) > span.success {
    background: #14A601;

    color: #fff !important;

    border-radius: 4px;

    padding: 0 0 0 10px;

    display: inline-block;
}

.tr-content .tr-block .tr-block-col:not(:first-child) > span.success:before {
    content: "-";
    margin-right: -30px;
}

.tr-content .tr-block:first-child .tr-block-col .tr-block-rank > span:first-child {
    width: 216px;

    display: inline-block;
}

.tr-content .tr-block:first-child .tr-block-col:first-child .tr-block-name {
    font-size: 50pt;
    font-weight: 500;

    line-height: 2;

    white-space: nowrap;
}

.tr-content .tr-block:first-child .tr-block-col:first-child .tr-block-name > span:first-child {
    width: 200px;

    display: inline-block;
}

.tr-content .tr-block:not(:first-child) .tr-block-col .tr-block-rank > span:first-child {
    width: 176px;

    display: inline-block;
}

.tr-content .tr-block:not(:first-child) .tr-block-col:first-child .tr-block-name > span:first-child {
    width: 164px;

    display: inline-block;
}

.tr-content .tr-block:first-child .tr-block-col .tr-block-rank > span:first-child {
    font-size: 60pt;

    line-height: 1;
}

.tr-content .tr-block:first-child .tr-block-col .tr-block-rank > span:last-child {
    font-size: 30pt;
}

.tr-content .tr-block:first-child .tr-block-col:not(:first-child) > span {
    font-size: 50pt;

    line-height: 1.6;
}

.tr-content .tr-block:not(:first-child) .tr-block-col:first-child .tr-block-name {
    font-size: 40pt;
    font-weight: 500;

    color: #474A4C;
}

.tr-content .tr-block:not(:first-child) .tr-block-col .tr-block-rank > span:first-child {
    font-size: 46pt;

    line-height: 1.1;

    color: #474A4C;
}

.tr-content .tr-block:not(:first-child) .tr-block-col .tr-block-rank > span:last-child {
    font-size: 20pt;

    color: #474A4C;
}

.tr-content .tr-block:not(:first-child) .tr-block-col:not(:first-child) > span {
    font-size: 40pt;

    line-height: 1.3;

    color: #474A4C;
}



.tr-ranking-checkpoints > div {
    height: 28px;
    width: 10px;
    margin: 0 6px -6px 0;

    -ms-transform: skewX(-8deg); /* IE 9 */
    -webkit-transform: skewX(-8deg); /* Safari */
    transform: skewX(-8deg); /* Standard syntax */
}

.tr-ranking-checkpoints .bg-info {
    background-color: #FF9B00 !important;
}

.tr-ranking-checkpoints .bg-semilight, .bg-semilight {
    background-color: #e9ecef !important;
}

.tr-ranking-position-status.tr-ranking-improved {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-bottom: 16px solid #3FB618;

    margin-top: 10px !important;
}

.tr-ranking-position-status.tr-ranking-dropped {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

    border-top: 16px solid #FF001A;

    margin-top: 10px !important;
}



.fade-enter-active, .fade-leave-active {
    transition: opacity .3s;
    z-index: 1;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

.flip-list-move {
    transition: transform .6s;

    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}