@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap');

body {
    font-family:'Montserrat', 'Arial Narrow', 'Arial', sans-serif;
    margin:0px;
    overflow-x: hidden;
}

body.dark {
    background-color:#111;
    color:white;
}

.spacer {
    display:block;
    clear:both;
}

.hidden {
    display: none !important;
}

.error_message {
    display:block;
    margin:8px 0px;

    background-color:goldenrod;
    color:white;
    text-shadow:0px 0px 4px rgba(0, 0, 0, 0.2);

    padding:8px 8px;

    border-radius:3px;
    box-shadow:0px 0px 8px rgba(0, 0, 0, 0.2);
}

/*******************************************************************
    Collumns and stuff
*******************************************************************/

.halfcol {
    display:block;

}

.halfcol .halfcol_col {
    display:block;
    width:50%;
    float:left;
    box-sizing: border-box;
}


.halfcol .halfcol_col.pad {
    padding:4px;
}

.halfcol .halfcol_col.center {
    text-align: center;
}

/*******************************************************************
    section generic
*******************************************************************/

.section {
    display:block;
    box-sizing:border-box;
}

/*******************************************************************
    BUTTONS
*******************************************************************/

button.cool {
    padding:8px 16px;
    box-sizing: border-box;
    outline:none;

    height:33px;

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

    transition-property: background-color, opacity, color;
    transition-duration: 400ms, 400ms, 400ms;
    transition-timing-function: ease, ease, ease;
}

/*******************************************************************
    section header
*******************************************************************/

.section.header {
    display:block;
    box-sizing:border-box;
    margin:32px;
    min-height:620px;
    padding:1px;
    border-radius: 3px;
}

.section.header.photo1 {
    background-image:url("../images/_DSC7593.jpg");
    background-position: 50% 100%;
    background-size: cover;
}


.section.header .pagetitle_contenthold {
    display:block;
    text-align:center;
    margin:160px;
}

.section.header .pagetitle_contenthold .pagetitle_text {
    display:block;

    color:white;
    font-size:36pt;
    font-weight: 400;

    font-family: 'roboto', 'Montserrat', 'Arial Narrow', 'Arial', sans-serif;
}

.section.header .pagetitle_contenthold .pagetitle_sub {
    display:block;

    color:rgba(255, 255, 255, 0.8);
    font-size:20pt;
    font-weight: 400;

    margin:20px 0px;
}


.section.header .pagetitle_contenthold .button_header button {
    display:inline-block;
    background-color:white;
    color:#222;
    padding:24px 0px;
    width:250px;
    border:none;
    font-size:12pt;

    transition-property: background-color, opacity, color;
    transition-duration: 400ms, 400ms, 400ms;
    transition-timing-function: ease, ease, ease;
}

body.dark .section.header .pagetitle_contenthold .button_header button {

}

.section.header .pagetitle_contenthold .button_header button:hover {
    display:inline-block;
    background-color:#f2f2f2;
    color:#222;

    border:none;

    transition-property: background-color, opacity, color;
    transition-duration: 400ms, 400ms, 400ms;
    transition-timing-function: ease, ease, ease;
} 


/*******************************************************************
    royalheader
*******************************************************************/

.section.royalheader {
    display:block;
    box-sizing:border-box;
    margin:32px;
    padding:32px;
}

.section.royalheader .royalheader_wrapper {
    display:block;
    width:700px;
    margin:0px auto;
    
    padding:64px 0px;
}

.section.royalheader.borderbottom .royalheader_wrapper {
    border-bottom:1px solid #f2f2f2;
}

.section.royalheader .royalheader_wrapper .royalheader_subtletitle {
    display:block;
    text-align:center;
    line-height:3;
    color:#444;
    font-size:10pt;
}

.section.royalheader .royalheader_wrapper .royalheader_text {
    display:block;
    text-align:center;
    line-height:1.5;
    color:#444;
    font-size:24pt;
}


.section.royalheader .royalheader_wrapper .p {
    display:block;
    margin:0px auto;
    width:700px;
    font-size:14pt;
    line-height:1.5;
}

.section.royalheader .royalheader_wrapper .p.leftalign {
    font-size:12pt;
    margin:16px 0px;
    text-align:justify;

    color:#444;
}

.section.royalheader .royalheader_wrapper .p.center {
    text-align:center;
}

/*******************************************************************
    section featureset
    featureset_wrapper
*******************************************************************/

.section.featureset {
    display:block;
}

.section.featureset .featureset_wrapper {
    display:block;
    margin:0px auto;
    width:1140px;
}

.section.featureset .featureset_wrapper .feature_item {
    display:block;
    margin:64px 0px;    

}

.featureset_wrapper .feature_item .item_content,
.featureset_wrapper .feature_item .item_image {
    display:block;
    float:left;
    box-sizing: border-box;
}

.featureset_wrapper .feature_item.imageright .item_content { float:left; }
.featureset_wrapper .feature_item.imageright .item_image { float:right; }

.featureset_wrapper .feature_item.imageleft .item_content { float:right; }
.featureset_wrapper .feature_item.imageleft .item_image { float:left; }

.featureset_wrapper .feature_item .item_content { width:40%; }
.featureset_wrapper .feature_item.imageright .item_content { padding-right:48px; }
.featureset_wrapper .feature_item.imageleft .item_content { padding-left:48px; }

.featureset_wrapper .feature_item .item_content .h1 {
    display:block;
    line-height:2;
    font-size:24pt;
}

.featureset_wrapper .feature_item .item_content .p {
    display:block;
    line-height:1.5;
    font-size:12pt;
    margin:8px 0px;
    color:#888;
}

.featureset_wrapper .feature_item .item_image {
    width:60%;
}

.featureset_wrapper .feature_item .item_image img {
    display:block;
    width:100%;
    height:auto;

    border-radius:5px;
}

/*******************************************************************
    newscol_wrapper
*******************************************************************/

.newscol_wrapper {
    display:block;
    margin:0px auto;
    box-sizing: border-box;

    width:1084px;


   
}

.newscol_wrapper .coll {
    display:block;
    box-sizing: border-box;

    float:left;
    width:360px;

    padding:0px 10px;
}

.newscol_wrapper .coll .h1 {
    display:block;
    height:128px;
    font-size:24pt;
}

.newscol_wrapper .coll .p {
    display:block;
    line-height:1.5;
    font-size:12pt;
    margin:8px 0px;
    color:#888;
}

.newscol_wrapper .coll .p a {
    color:#00AEFF;
    text-decoration: none;
}

.newscol_wrapper .coll .p.center {
    text-align: center;
}

/******************************************************************
    royal navbar
******************************************************************/
.royalheader_nav {
    display:block;
    text-align:center;
}

.royalheader_nav .rh_n_item {
    display:inline-block;
    text-decoration: none;
    color:black;
}

.royalheader_nav .rh_n_item a {
    text-decoration: none;
}


.royalheader_nav .rh_n_item button.navItem {

    padding:4px 8px;
    text-decoration: none;
    border-radius:0px;
    border:none;
    font: unset;
    color:#222;

    transition-property: background-color, opacity, color;
    transition-duration: 400ms, 400ms, 400ms;
    transition-timing-function: ease, ease, ease;
}

.royalheader_nav .rh_n_item button.navItem:hover {
    background-color:black;
    color:white;
}


/*******************************************************************
    section footer
*******************************************************************/

.section.footer {
    padding:32px;
}


.section .footer {
    display:block;
    background-color:#f2f2f2;
}

body.dark .section .footer {
    background-color: #333;
    color:white;
}

.section .footer .footermargin {
    display:block;
    margin:0px auto;
    width:450px;
}

.section .footer .footermargin h1 {
    text-align:center;
    color:#444;
    padding:32px 0px;
    font-size:36pt;
    font-weight: 100;
}

body.dark .section .footer .footermargin h1 {
    color:#fff;
}

.section .footer .footermargin p {
    line-height:1.5;
    font-size:20pt;
    text-align: justify;
    font-weight:300;
    color:#333;
}

.section .footer .footermargin .h5,
.section .footer .footermargin .h6 {
    display:block;
    line-height:2;
    text-align:center;
    color:#333;
}

.section .footer .footermargin a.h6  {
    color:#333;
    text-decoration: none;
    background-color:rgba(0, 0, 0, 0.2);
}

.section .footer .footermargin .h5 {
    font-weight:600;
}

.section .footer .footermargin  .singlebuttonhold {
    display:block;
    padding:8px 0px;
    text-align:center;
}

.section .footer .footermargin  .singlebuttonhold button {
    display:inline-block;
    background-color:#222;
    color:white;
    padding:12px 0px;
    width:200px;
    border:none;

    transition-property: background-color, opacity, color;
    transition-duration: 400ms, 400ms, 400ms;
    transition-timing-function: ease, ease, ease;
}

.section .footer .footermargin  .singlebuttonhold button:hover {
    background-color:#333;
}

body.dark .section .footer .footermargin  .singlebuttonhold button:hover {
    background-color: #888;
    
}

.section .footer_full {
    display:block;
    padding:32px 0px;
    text-align:center;
}

.hamburg_nav {
    display:block;
    

    margin:36px 32px 0px 32px;
    box-sizing: border-box;
}

.hamburg_nav .ul {
    display:inherit;
}

.hamburg_nav .ul .li {
    display:inline-block;

    padding:4px 8px;
    text-decoration: none;

    color:#222;
}

body.dark .hamburg_nav .ul .li {
    color:#f2f2f2;
}

.hamburg_nav .ul .li:hover {
    background-color:#f2f2f2;
}

body.dark .ul .li:hover {
    background-color: #ccc;
    color:#222;
}

.hamburg_nav .ul .li.active {
    background-color:#222;
    color:white;   
}


body.dark .hamburg_nav .ul .li.active  {
    background-color: #ccc;
    color:#222;
}


.section.account_wrap {
    display:block;
    margin:0px auto;
    width:560px;
    min-height: 600px;
    padding: 120px 0px 16px 0px;
}


.section.account_wrap h1 {
    color:#1caff3;
}

.section.account_wrap .p {
    display:block;
    color:#333;
    line-height:1.5;
    padding:8px 0px;
}

.section.account_wrap .p a {
    color:#1caff3;
    text-decoration: none;
}

.section.account_wrap .p.alert {
    background-color:#ffd000;
    text-decoration: none;
    border-radius:4px;
    padding:4px 8px;
}

.section.account_wrap hr {
    display:block;
    width:75%;

    border-width: 0px;
    border:none;

    background: rgb(213,213,213);
    background: linear-gradient(325deg, rgba(213,213,213,0) 0%, rgba(213,213,213,1) 50%, rgba(213,213,213,0) 100%);

    height:2px;

}

.section.account_wrap .input_hold {
    display:block;
}

.section.account_wrap .input_hold input[type=text],
.section.account_wrap .input_hold input[type=password] {
    display:block;
    width:100%;
    padding:8px;

    border:1px solid #ccc;
    
    box-sizing: border-box;
    outline:none;

    height:33px;

    border-radius:8px;
}

.section.account_wrap .input_hold input[type=text]:focus,
.section.account_wrap .input_hold input[type=password]:focus {
    border:1px solid #1caff3;
}

.halfcol .halfcol_col .input_label {
    line-height:33px;
}

.halfcol .halfcol_col .input_label_tandc {
    line-height:33px;
}


.halfcol .halfcol_col .input_label_tandc a {
    color:#1caff3;
    text-decoration: none;
}

.section.account_wrap .input_hold input[type=submit],
.section.account_wrap .input_hold button {
    padding:8px 16px;
    
    box-sizing: border-box;
    outline:none;

    height:33px;

    border:1px solid #ccc;

    border-radius:8px;
}

.section.account_wrap .input_hold input[type=submit]:hover,
.section.account_wrap .input_hold button:hover {
    background-color:#f2f2f2;
}


@media (max-width: 650px) {
    .section.account_wrap {
        display:block;
        margin:unset;
        width:unset;
        min-height: 600px;
        padding: 64px 0px 16px 0px;
        text-align: center;
    }

    .section.account_wrap .p {
        text-align: center;
    }
}

.slide-away,
.slide-out {
    display:block;
    -webkit-animation: slide-out 0.5s forwards;
    -webkit-animation-delay: 0s;
    animation: slide-out 0.5s forwards;
    animation-delay: 0s;
}

@-webkit-keyframes slide-out {
    100% {  transform: translate(-300px, 0); opacity:0; }
}

@keyframes slide-out {
    100% { transform: translate(-300px, 0); opacity:0; }
}

/**********************************/

.slide-in {
    display:block;
    -webkit-animation: slide-in 0.5s forwards;
    -webkit-animation-delay: 0s;
    animation: slide-in 0.5s forwards;
    animation-delay: 0s;
}

@-webkit-keyframes slide-in {
    0% {  transform: translate(300px, 0); opacity:0; }
    100% {  transform: translate(0px, 0); opacity:1; }
}

@keyframes slide-in {
    0% { transform: translate(300px, 0); opacity:0; }
    100% { transform: translate(0px, 0); opacity:1; }
}

/****************************************/

.slide-in-up {
    display:block;
    -webkit-animation: slide-in-up 0.2s forwards;
    -webkit-animation-delay: 0s;
    animation: slide-in-up 0.2s forwards;
    animation-delay: 0s;
}

@-webkit-keyframes slide-in-up {
    0% {  transform: translate(0, 25px); opacity:0; }
    100% {  transform: translate(0px, 0); opacity:1; }
}

@keyframes slide-in-up {
    0% { transform: translate(0, 25px); opacity:0; }
    100% { transform: translate(0px, 0); opacity:1; }
}

.section.pref_settings {
    display:block;
    margin:0px auto;
    width:1200px;
    min-height: 250px;
    margin-bottom:64px;
}

.section.pref_settings .sect_header {
    display:block;
    line-height: 2;
    font-size:32pt;

    text-transform: uppercase;
}

.section.pref_settings .sect_description {
    display:block;
    line-height: 2;
    font-size:16pt;
    color:grey;
}

.section.pref_settings .change_setting {
    font-size:16pt;
    line-height:2;
    color:#333;
}

.section.pref_settings .halfcol .halfcol_col {
    content:"";
}

.section.pref_settings .halfcol .halfcol_col.center {
    text-align:center;
}

.section.pref_settings .halfcol .halfcol_col .setting_text_small {
    font-size:12pt;
}

.section.pref_settings .halfcol_col .row_descriptor {
    display:block;
    font-size:10pt;
    line-height:1.2;
    padding-bottom:8px;
    padding-right:32px;
    color:blueviolet;
}

.section.pref_settings::after {
    display:block;

    content: "";
    width:75%;

    border-width: 0px;
    border:none;
    margin:0px auto;

    border-top:1px solid #f2f2f2;

    background: rgb(213,213,213);
    background: linear-gradient(90deg, rgba(213,213,213,0) 0%, rgba(213,213,213,1) 50%, rgba(213,213,213,0) 100%);

    height:2px;
}

.section.pref_settings.center .halfcol {
    text-align:center;
}

.horse_list_hold {
    display:block;
    margin:0px auto;
    width:800px;
    max-width: 800px;
    width: 100%;
}

.horse_list_hold .hItem {
    display:block;

    min-height:48px;
}

.horse_list_hold .hItem .namespan {
    display:block;

    border:1px solid #f2f2f2;
    border-width: 1px 0px;
    padding:8px 0px;
}

.horse_list_hold .hItem .namespan .text_span {
    font-weight:bold;
    line-height:24px;

    display:inline-block;
    width:70%;
    float:left;
}

.horse_list_hold .hItem .namespan .guid_hold {
    display:inline-block;
    width:10%;
    float:left;
    
}

.horse_list_hold .hItem .namespan .guid_hold .guid_code {
    background-color:#f2f2f2;
    color:#222;
    padding:0px 4px;
    line-height:24px;
    margin:0px 8px;
    font-family: monospace;


}

.horse_list_hold .hItem .namespan .grade_hold {
    display:inline-block;
    width:20%;
    float:left;

    text-align:center;
}

.horse_list_hold .hItem .namespan::after {
    content:"";
    display:block;
    clear:both;
}

.hGrade_badge {
    display:inline-block;
    padding:4px 8px;
    background-color:#f2f2f2;
    border-radius:3px;
    box-shadow:0px 0px 4px rgba(0, 0, 0, 0.2);
    font-size:12pt;
    font-weight:normal;
    vertical-align:middle;
    width: 110px;
}

@media (max-width: 700px) {
    .horse_list_hold .hItem .namespan {
        display:block;
        border:1px solid #f2f2f2;
        border-width: 1px 0px;
        padding: 8px 0px 64px 0px;
    }
    
    .horse_list_hold .hItem .namespan .text_span,
    .horse_list_hold .hItem .namespan .guid_hold,
    .horse_list_hold .hItem .namespan .grade_hold {
        display:block;
        float:initial;

        width:unset;
        text-align: center;
    }

    .horse_list_hold .hItem .namespan .text_span {

    }
    
    .horse_list_hold .hItem .namespan .guid_hold {

    }

    .horse_list_hold .hItem .namespan .grade_hold {

    }
}

.hGrade_badge.wide-margin {

}

.hGrade_badge.sub-bronze {
    background-color:#807240;
    color:white;
}

.hGrade_badge.bronze {
    background-color:#D59227;
    color:white;
    text-shadow:1px 1px 0px rgba(0, 0, 0, 0.5);
}

.hGrade_badge.silver {
    background-color:#ccc;
    color:#666600;
    text-shadow:0px 0px 4px rgba(255, 255, 255, 0.5);
}

.hGrade_badge.gold {
    background-color:#FFD016;
    color:#666600;
    text-shadow:0px 0px 4px rgba(255, 255, 255, 0.5);
}

.hGrade_badge.patinum {
    background-color:#00ffff;
    color:#006666;
    text-shadow:0px 0px 4px rgba(255, 255, 255, 0.5);
}

.body {
    display:block;
    margin:0px auto;
    Width:1200px;
    max-width: 1200px;
    margin: 0px auto;
    width: 100%;
}

.body.center {
    margin:0px auto;
}

.body.wide {
    Width:1200px;
} 

.body.full {
    width:90%;
}

.ajax_content {
    display:block;
    min-height:800px;
}


.body h1, .body h2, .body h3 {
    font-weight: normal;
}

.body h1 {
    font-size: 32pt;

}

.body .race_infobar {
    display:block;
    padding:8px 0px;
    box-sizing: border-box;

    font-size:18pt;


}

.body .race_infobar .itm {
    display:inline-block;

    text-align:center;

    width:20%;
    float:left;
}

.body .race_infobar .itm .label,
.body .race_infobar .itm .val {
    display:block;
    line-height: 24px;
    text-align:center;
}

.body .race_infobar .itm .label {
    color:rgba(0, 0, 0, 0.5);
    font-size:14pt;
    line-height: 32px;
}

body.dark .body .race_infobar .itm .label {
    color:rgba(255, 255, 255, 0.5);
}

.body .race_infobar .itm .val {
    line-height:24px;
}

@media (max-width: 650px) {
    .body .race_infobar {
        display:block;

    
    
    }
    
    .body .race_infobar .itm {
        display:block;

        width: unset;
        float:unset;
    }

    .body .race_infobar .itm:nth-child(odd) {
        background-color:#f2f2f2;
    }

    body.dark .body .race_infobar .itm:nth-child(odd) {
        background-color: #333;
    }

    .body .race_infobar .itm .label,
    .body .race_infobar .itm .val {
        padding:4px 0px;
    }
}

.body table.simple_ui {
    width:100%;
    border-collapse: collapse;
    cursor:default;
}

.body table.simple_ui thead th {
    padding:4px;
    text-align: left;
}

.body table.simple_ui tbody tr {
    cursor:pointer;
}

.body table.simple_ui tbody tr td {
    padding:4px;
}




.body table.simple_ui tbody tr td .name_hold {
    display:block;
    width:100%;
    box-sizing: border-box;
    padding:4px;
    border-radius:16px;
    border:2px solid white;
    text-align: center;
    color:white;
}

.body table.simple_ui tbody tr {
    cursor:default;
}
.body table.simple_ui tbody tr:hover {
    border-radius:4px;
    box-shadow:0px 0px 4px rgba(0, 0, 0, 0.5);
    cursor:default;
}

.body table.simple_ui tbody tr:hover td .name_hold {
    box-shadow:0px 0px 2px rgba(0, 0, 0, 0.5);
}

.body .ajax_message_hold {
    display:block;
    padding:4px 8px;
    margin:64px 16px;
    border-radius: 4px;
    box-shadow:0px 0px 4px rgba(0, 0, 0, 0.2);
    background: goldenrod;
    color:black;
}

.body .innerpage_nav {
    display:block;
    margin:32px 0px;
}

.body .innerpage_nav .innerpage_nav_item {
    display:inline-block;
    font-size:24pt;
    color:#ccc;
    padding-right:16px;
    cursor:pointer;
    vertical-align: middle;
}

.body .innerpage_nav .innerpage_nav_item.selected {
    font-size:28pt;
}

.body .innerpage_nav .innerpage_nav_item.selected,
.body .innerpage_nav .innerpage_nav_item:hover {
    color:#000;
}

body.dark .body .innerpage_nav .innerpage_nav_item.selected,
body.dark .body .innerpage_nav .innerpage_nav_item:hover {
    color:#fff;
}

.body .innerpage_nav .innerpage_nav_item .live_bubble {
    display:inline-block;
    width: 16px;
    height: 16px;
    border-radius:100%;
    background-color:#ff8888;
    vertical-align: middle;
    
    -webkit-animation: live-now-pulse 5s forwards;
    -webkit-animation-delay:  0s;
    animation: live-now-pulse 5s forwards;
    animation-iteration-count: infinite;
}

.body .innerpage_nav .innerpage_nav_item:hover .live_bubble {
    background-color: #ff0000;
    box-shadow:0px 0px 8px #ff8888
}

@-webkit-keyframes live-now-pulse {
    0% {  background-color:#ff8888; box-shadow:0px 0px 8px #ff888800; }
    50% { background-color:#ff0000; box-shadow:0px 0px 8px #ff8888 }
    100% { background-color:#ff8888; box-shadow:0px 0px 8px #ff888800; }
}

@keyframes live-now-pulse {
    0% {  background-color:#ff8888; box-shadow:0px 0px 8px #ff888800; }
    50% { background-color:#ff0000; box-shadow:0px 0px 8px #ff8888ff; }
    100% { background-color:#ff8888; box-shadow:0px 0px 8px #ff888800; }
}

.body .liveBubble {

    display:inline-block;
    width: 16px;
    height: 16px;
    border-radius:100%;
    background-color:#ff8888;
    vertical-align: middle;
    
    -webkit-animation: live-now-pulse 5s forwards;
    -webkit-animation-delay:  0s;
    animation: live-now-pulse 5s forwards;
    animation-iteration-count: infinite;

}

.body .liveBubble.small {
    width:8px;
    height:8px;
}

.body .hasResultsBubble {

    display:inline-block;
    width: 16px;
    height: 16px;
    border-radius:100%;
    background-color:#226622;
    vertical-align: middle;

}

.body .hasResultsBubble.small {
    width:8px;
    height:8px;
}


.race_data_json {
    display:block;
}

.json_highlight .key {
    font-weight: bold;
}

.json_highlight .string {
    color:blue;
    color:#00AEFF;
}

.json_highlight .number {

}

.triple_graph_hold {
    display:block;
}

.triple_graph_hold .chart_hold {
    display:inline-block;
    vertical-align: top;
    width:33.33%;
}

.triple_graph_hold .chart_hold canvas {
    margin:0px auto;
}


@media (max-width: 960px) {
    .triple_graph_hold .chart_hold {
        display:block;
        width:unset;
    }

    .triple_graph_hold .chart_hold canvas {
        margin:0px auto;
        
    }
}


/************************************************************************************/
.ajax_spinner_hold {
    display: block;
    width:80px;
    height:80px;
    margin:0px auto;
}

.ajax_loader.hidden {
    display: none!important;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #444;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(24px, 0);
    }
}


.race_pos_hold {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    border-radius: 16px;
    border: 2px solid white;
    text-align: center;
    color: white;
}

body.dark .race_pos_hold {
    border: 2px solid #888;

}

.race_pos_hold.red { background-color:#FF0000; color:white; }
.race_pos_hold.orange { background-color:#FF8000; color:white; }
.race_pos_hold.yellow { background-color:#FFFF00; color:black; }
.race_pos_hold.limegreen { background-color: #80FF00; color:black;  }
.race_pos_hold.green { background-color: #00FF00; color:black;  }
.race_pos_hold.aquagreen { background-color: #00FF80; color:black;  }
.race_pos_hold.aqua { background-color: #00FFFF; color:black;  }
.race_pos_hold.skyblue { background-color: #0080FF; color:white;}
.race_pos_hold.blue { background-color: #0000FF; color:white; }
.race_pos_hold.purple { background-color: #8000FF; color:white; }
.race_pos_hold.fuscia { background-color: #FF00FF; color:white; }
.race_pos_hold.pink { background-color: #FF0080; color:white; }


.canvas_liveView {
    display:block;

    width:100%;
    height:400px;
}

.WatchLiveTitle {
    display:block;
    padding:8px 0px;
    font-size:larger;
    box-sizing: border-box;
}

.WatchLiveTitle .raceDataName,
.WatchLiveTitle .watchCounter {
    display:inline-block;
    float:left;
    width:50%;
}

.WatchLiveTitle .watchCounter {
    text-align:right;
}

.WatchLiveTitle .watchCounter .label {
    display:inline-block;

    border-radius:4px;
    margin:0px 4px;
    line-height:24px;

    box-sizing: border-box;
}

.WatchLiveTitle .watchCounter .value {
    display:inline-block;

    border-radius:16px;
    padding:0px 16px;
    margin:0px 4px;

    font-size:small;
    line-height:24px;

    box-sizing: border-box;

    background-color:red;
    color:white;
}