:root {
    --main-bg-color: #8879cf;
}

html{
    font-size: 13px;
}

*{
    font-size: 1rem;
    font-family: sans-serif;
}

.hide{
    display: none !important;
}
body{
    margin: 0;
    padding: 0;
    font-size: 1rem;
    background-color: #fff;
}


div.interface {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

div.interface header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background: #d0d6e9;
}
div.interface main{
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 4rem;
    bottom: 0;
}
div.interface.signin main{
    display: flex;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
}





div.interface.signin header{
    background-color: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}


div.interface.signin header .logo{
}


div.interface.signin header span.areaName{
    color: #504294;
    margin-left: 1rem;
    font-size: 1.5rem;
}


div.interface.control header{
    background-color: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}


div.interface.control header .logo{
}


div.interface.control header span.areaName{
    color: #504294;
    margin-left: 1rem;
    font-size: 1.5rem;
}


/*

div.interface header img.logo{
    z-index:10;
    position:absolute
}

div.interface header::before{
    width: 137rem;
    height: 55rem;
    top: -27rem;
    left: -92rem;
    content: "";
    position: absolute;
    z-index: 10;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: block;
    background: -webkit-gradient(linear, left top, right top, from(#E5EEEF), color-stop(60%, #E5EEEF), color-stop(60%, #001E33), to(#001E33));
    background: linear-gradient(90deg, #E5EEEF 0%, #E5EEEF 60%, #001E33 60%, #001E33 100%);
}
*/

div.interface.signin form{
    border: 1px solid #d2d2d2;
    border-radius: 10px;
    padding: 1.5rem;
    background-color: #e0e0e8;
}




div.interface header img.logo{
    height: 3.2rem;
    margin: 0.7rem;
}



.form-default{
}

.form-default fieldset{
    border: 0;
}

.form-default fieldset input{
    min-width: 200px;
}






















header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background: #fff;
}
/*
footer{
    background-color: var(--main-bg-color);
    height: 1.5em;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #fff;
    padding: 0 1rem;
    text-align: right;
}
*/
header div.menuTop{
    position: absolute;
    right: 0;
    padding: 1rem;
}

header div.menuTop .userAccount{
    cursor: pointer;
}

img.icon{
    filter: var(--main-bg-color);
    filter: invert(48%) sepia(74%) saturate(2476%) hue-rotate(331deg) brightness(118%) contrast(119%) drop-shadow(1px 3px 6px #c0c0c0)
}
img.icon.button{
    cursor: pointer;
}


pre{
    white-space: pre-wrap;
    line-height: 150%;
}
main{
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 4rem;
    bottom: 0;
}
main div.main.full-width{
    width: 100%;
}
main div.main{
    background: #f9fafc;
    position: absolute;
    width:85vw;
    right: 0;
    top: 0;
    bottom: 0;

    -webkit-box-shadow: inset 0px 0px 14px -2px rgba(0,0,0,0.13); 
    box-shadow: inset 0px 0px 14px -2px rgba(0,0,0,0.13);
    transition: 0.3s;
}
main div.main.disconnected{
    width: 100%;
}


main div.main div.sidenavTab{
    position: absolute;
    left: 0;
    background-color: var(--main-bg-color);
    width: 15px;
    height: 80px;
    border-radius: 0 7px 7px 0;
    cursor: pointer;
    z-index: 1;
}


nav.sideLeft{
    background-color: #fff;
    position: absolute;
    width:15vw;
    left: 0;
    top: 0;
    bottom: 0;
    border-top: 1px solid #f2f1f1;
}
nav.sideLeft ul{
    list-style: none;
    padding: 0;
    padding-left: 1rem;
}
nav.sideLeft ul li{
    padding: 1rem 0;
    padding-left: 1rem;
    color: #b2b0ae;
    cursor: pointer;
    border-left: 7px solid #fff;
    display: none;
}
nav.sideLeft ul li.enabled{
    display: block;
}
nav.sideLeft ul li.active{
    color: var(--main-bg-color);
}
nav.sideLeft ul li:hover{
    color: var(--main-bg-color);
    background-color: #f6f6f6;
    border-left: 7px solid var(--main-bg-color);
    border-radius: 4px 0 0 4px;
}
header div.brand{
    padding: 1rem;
    font-size: 1.8rem;
    color: #ff530d;
    text-shadow: 1px 1px #b7b7b794;
    position: absolute;
    left: 0;
    top: 0;
    width: 20vw;
}
header div.section{
    padding: 1rem 0;
    font-size: 1.5rem;
    line-height: 2rem;
    color: #585858;
    position: absolute;
    left: 20vw;
}

main .main section{
    padding: 2rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; /*1.5rem;*/
    overflow: auto;
}

main .main section nav{
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-gap: 20px;
    grid-column: auto;
    align-content: center;
    justify-content: start;
    align-items: center;
    justify-items: center;
    margin-bottom: 1rem;
}




main .main section.dashboard{
    
}




main .main section table.list{
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
    background-color: transparent;

    border-radius: 10px;
}

main .main section table.list button{
    background-color: var(--main-bg-color);
    border: 1px solid var(--main-bg-color);
    color: #fff;
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

main .main section table.list tbody tr{
    /*cursor: pointer;*/
}

main .main section table.list td, main .main section table.list th{
    background-color: #fff;
    padding: 1rem;
    font-size: 1rem;
    text-align: left;
}
main .main section table.list thead{
    background-color: transparent;
}
main .main section table.list thead tr{
    background-color: transparent;
}
main .main section table.list thead tr th{
    background-color: #fcfcfc;
    border-bottom: 1px solid #efeff2;
}
main .main section table.list thead tr th:first-child{
    border-radius: 10px 0 0 0;
}
main .main section table.list thead tr th:last-child{
    border-radius: 0 10px 0 0;
}
main .main section table.list tbody{
    
}
main .main section table.list tbody tr{
    
}
main .main section table.list tbody tr.statusFinished{
    color: #388f0e;
}
main .main section table.list tbody tr.statusFinished td{
    background-color: #effae8;
}
main .main section table.list tbody tr td{
    background-color: #fff;
    border-bottom: 1px solid #efeff2;
    padding: 1rem;
}
main .main section table.list tbody tr td.late{
    background-color: #FFD000;
}
main .main section table.list tbody tr td.late.days_0{
    background-color: #FF6500;
    color: #fff;
}
main .main section table.list tbody tr td.late.days_1{
    background-color: #FF8000;
    color: #fff;
}
main .main section table.list tbody tr td.late.days_2{
    background-color: #FF9A00;
}
main .main section table.list tbody tr td.late.days_3{
    background-color: #FFB500;
}


main .main section table.list tbody tr td.overdue{
    background-color: #feea04;
    color: red;
}
main .main section table.list tfoot{
    
}
main .main section table.list tfoot tr{
    
}
main .main section table.list tfoot tr th{
    background-color: #fcfcfc;
}
main .main section table.list tfoot tr th:first-child{
    border-radius: 0 0 0 10px;
}
main .main section table.list tfoot tr th:last-child{
    border-radius: 0 0 10px 0;
}

main .main section ul.breadcrumbs{
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.3rem 0.3rem;
    font-size: 0.7rem;
}
main .main section ul.breadcrumbs > li{
    display: inline;
    font-size: 0.9rem;
    padding-left: 1rem;
}
main .main section ul.breadcrumbs > li::before{
    content : '> ';
    position: relative;
    left: -0.4rem;
}
main .main section ul.breadcrumbs > li:first-child{
    color : var(--main-bg-color);
}
main .main section ul.breadcrumbs > li:first-child::before{
    content : '';
}

main .main section .options button{
    background-color: #fff;
    border: 1px solid var(--main-bg-color);
    color: var(--main-bg-color);
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 1rem;
    cursor: pointer;
}

main .main section .options button.active{
    background-color: var(--main-bg-color);
    color: #fff;
    cursor: default;
}

main .main section .menu{
    text-align: right;
}

main .main section .menu button{
    background-color: var(--main-bg-color);
    border: 1px solid var(--main-bg-color);
    color: #fff;
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 1rem;
    cursor: pointer;
}

main .main section form button{
    background-color: var(--main-bg-color);
    border: 1px solid var(--main-bg-color);
    color: #fff;
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 1rem;
    cursor: pointer;
}


main .main section .nav.topNav{

}


main .main section{
    display: none;
}
main .main section.active{
    display: block;
}

main .main section > div{
    display: none;
}
main .main section > div.active{
    display: block;
}



.boxContainer{
    background-color: #fff;
    padding: 1rem;
    margin: 2rem 0;
    position: relative;
}



.boxShadow{
    border-radius: 10px;
    -webkit-box-shadow: 0px 5px 10px 3px rgb(0 0 0 / 14%);
    box-shadow: 0px 5px 10px 3px rgb(0 0 0 / 14%);
}


main .main section form{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}


main .main section form fieldset{
    border: 0;
    margin: 0.2rem;
}


main .main section form fieldset input
, main .main section form fieldset select
, main .main section form fieldset textarea
{
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    margin: 0;
}
main .main section form fieldset textarea{
    height: 14rem;
    resize: none;
}

main .main section form fieldset select option{
    line-height:1.5rem;
    font-size: 1rem;
}



.row{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.col{
    grid-column: 1fr;
}

.col-2{
    grid-column: span 2;
}
.col-3{
    grid-column: span 3;
}
.col-4{
    grid-column: span 4;
}
.col-5{
    grid-column: span 5;
}
.col-6{
    grid-column: span 6;
}



.panelFollowup_list ul.list{
    list-style: none;
    margin: 0;
    padding: 0;
}



.panelFollowup_list ul.list li{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}



span.tag_status_2{
    background-color: #37a503;
    color: #fff;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}
span.tag_status_1{
    background-color: #ffea08;
    color: #4c4c4c;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}


span.label_finished_early{
    color: #36a501;
    font-size: 0.8rem;
}

span.label_finished_overdue{
    color: #f95200;
    font-size: 0.8rem;
}






/*Spinner*/

.lds-hourglass-mini {
    display: inline-block;
    position: relative;
    width: 15px;
    height: 15px;
    color: #000;
}
.lds-hourglass-mini:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 0;
    box-sizing: border-box;
    border: 8px solid #999ba7;
    border-color: #999ba7 transparent #999ba7 transparent;
    animation: lds-hourglass-mini 1.5s infinite;
}
@keyframes lds-hourglass-mini {
    0% {
      transform: rotate(0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
      transform: rotate(900deg);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
      transform: rotate(1800deg);
    }
  }





/* LOADER _ BEGIN */
div.loader.active {
    display: flex;
}

div.loader {
    position: absolute;
    border-radius: 10px;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    z-index: 100000;
    background-color: rgb(0 0 0 / 14%);
    align-items: center;
    display: none;
    justify-content: center;
}
div.loader .lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}
div.loader .lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: loader-lds-dual-ring 1.2s linear infinite;
}
@keyframes loader-lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*LOADER _ END*/



/* ALERT MESSAGE - BEGIN */
.alertMessage{
    position: absolute;
    z-index: 1000;
    background-color: #00000085;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    justify-content: center;
    align-items: center;
}

.alertMessage.active{
    display: flex;
}
.alertMessage .message{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 4rem;
}
.alertMessage .buttons{
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.alertMessage .buttons button{
    background-color: var(--main-bg-color);
    border: 1px solid var(--main-bg-color);
    color: #fff;
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 1rem;
    cursor: pointer;
    margin-left: 1rem;
}

/*END*/




.fileAttachment-list{
    display: flex;
    flex-direction: column;
    
}

.fileAttachment-list > *{
    /*flex-basis: 100%;*/
    margin: 0; /*0.5rem 1rem;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.fileAttachment-list > * > *{
    flex-basis: 100%;
    margin: 0.5rem 1rem;
    overflow: hidden;
}

.fileAttachment-list > * > .fileName{
    flex-basis: 68%;
}

.fileAttachment-list > * > .fileSize{
    flex-basis: 10%;
}

.fileAttachment-list > * > .fileType{
    flex-basis: 20%;
}

.fileAttachment-list > * > button.delete{
    flex-basis: 10%;
    padding: 0.5rem 1rem;
}


.fileAttachment-list > * + *{
    border-top: 1px solid #c0c0c0;
}

.fileAttachment-list .downloadItem{
    /*cursor: pointer;*/
}
.fileAttachment-list .downloadItem::after {
    /*
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' width='24'%3E%3Cpath d='M12 15.825 6.725 10.55 8.3 8.925 10.85 11.475V3.45H13.15V11.475L15.7 8.925L17.275 10.55ZM5.875 20.375Q4.925 20.375 4.263 19.712Q3.6 19.05 3.6 18.1V14.75H5.875V18.1Q5.875 18.1 5.875 18.1Q5.875 18.1 5.875 18.1H18.1Q18.1 18.1 18.1 18.1Q18.1 18.1 18.1 18.1V14.75H20.375V18.1Q20.375 19.05 19.712 19.712Q19.05 20.375 18.1 20.375Z'/%3E%3C/svg%3E");
    margin: 0.5rem 1rem;
    */
}

.fileAttachment-list .downloadItem:hover {
    background-color: #fff4eb;
}

.fileAttachment-list .downloadItem .button{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 30px;
    width: 30px;
    border: 0;
    padding: 0;
    margin: 0 10px 0 0;
    flex-basis: auto;
    cursor: pointer;
}

.fileAttachment-list .downloadItem .button.download{
    background-image: url(icons/download_FILL0_wght400_GRAD0_opsz48.svg);
}

.fileAttachment-list .downloadItem .button.play{
    background-image: url(icons/play_circle_FILL1_wght400_GRAD0_opsz48.svg);
}





.fileAttachment-list:not(:empty){
    border: 1px solid #c0c0c0;
    border-radius: 8px;
    margin: 10px 10px 0 0;
}

.fileAttachment-list:not(:empty)::before {
    content: 'Arquivos';
    position: relative;
    background-color: var(--main-bg-color);
    color: #fff;
    padding: 5px 14px;
    border-radius: 6px 6px 0 0;
}





.panelColumn{
    overflow: auto;
}

.panelColumn .panel {
    display: none;
}
.panelColumn .panel.active {
    display: block;
}

/*
div.interface.control > main > div.main > section nav{
    grid-template-columns: 4fr 1fr !important;
}
div.interface.control > main > div.main > section{
    grid-template-columns: 100% 0 !important;
    padding: 0 !important;
    transition: 0.3s;
}
div.interface.control > main > div.main > section.splitted{
    display: grid !important;
    grid-template-columns: 60% 40% !important;
}
div.interface.control > main > div.main > section .panelColumn:first-child{
    padding: 2rem 1rem 2rem 2rem;
    display: block;
}
div.interface.control > main > div.main > section .panelColumn:nth-child(2){
    display: block;
}
div.interface.control > main > div.main > section .list{
    overflow: auto;
}
div.interface.control > main > div.main > section .panel.edit{
    position: relative;
    padding: 2rem;
}
div.interface.control > main > div.main > section .panel.newRecord{
    position: relative;
    padding: 2rem;
}
*/



ul.list-checkbox{
    list-style: none;
    padding: 0 1rem;
}
ul.list-checkbox li{
    cursor: pointer;
}
ul.list-checkbox li input[type="checkbox"]{
    width: auto;
    margin: 0.5rem;
}

.btn-save{
    background-color: #40ba05 !important;
    border-color: #40ba05 !important;
}
.btn-back{
    background-color: #40ba05;
}
.btn-setupComplete{
    background-color: #186dce !important;
    border-color: #186dce !important;
}



.tab-panel{
    grid-column: span 4;
    padding: 0;
    border: 1px solid #dcdcdc;
    border-radius: 0px;
    margin: 1rem;
}

.tab-panel .tab-bar{
    background-color: #dcdcdc;
}
.tab-panel .tab-bar button.active{
    background-color: var(--main-bg-color);
    color:#fff;
    border-radius: 0;
    cursor: default;
}
.tab-panel .tab-bar button{
    background-color: #dcdcdc;
    border: 0;
    color: #4a4a4a;
}
.tab-panel .tab-container{
    display: none;
    padding: 1rem;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}
.tab-panel .tab-container.active{
    display: grid;
}
.tab-panel .tab-container > h2{
    grid-column:span 4;
}


.panelInfo{
    display: grid;
    padding: 1rem;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}


table.heats{
    border-collapse: collapse;
    width: 100%;
}
table.heats th, table.heats td{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;

    height: 70px;
    width: 70px;

}
table.heats td.diagonalLine {
    background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}
table.heats td.mouseover{
    background-color: #ffc266 !important;
    cursor: pointer;
}
table.heats td.done{
    background-color: #1056c0;
    color: #fff;
}
table.heats td.running{
    background-color: #fce16c;
}



table.finalHeats{
    border-collapse: collapse;
}
table.finalHeats th, table.finalHeats td{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;

    height: 70px;
    width: 70px;
}
table.finalHeats tr td:first-child{
    width: 200px;
}


table.heatInfo{
    border-collapse: collapse;
}
table.heatInfo th, table.heatInfo td{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;

    height: 70px;
    width: 70px;
}
table.heatInfo tr td:first-child{
    width: 200px;
}

table.heatInfo td.done{
    background-color: #1056c0;
    color: #fff;
}
table.heatInfo td.running{
    background-color: #fce16c;
}
table.heatInfo td.winner{
    background-color: #13ac53;
    color: #fff;
}
table.heatInfo td.winner::before{
    content:'Winner';
    display: block;
    position: relative;
    top: -13px;
    color: yellow;
}
table.heatInfo td.loser{
    background-color: #e6dfbe;
}
table.heatInfo td.loser::before{
   /*
   content:'loser';
    display: block;
    position: relative;
    top: -13px;
    color: yellow
    */
}
table.heatInfo td.draw{
    background-color: #ffbf00;
}
table.heatInfo td.draw::before{
    content:'Draw';
    display: block;
    position: relative;
    top: -13px;
    color: #b94d15;
}




table.arUrls{
    width: 100%;
}

table.arUrls th{
    padding: 0.2rem 1rem;
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
    background-color: #ff624d;
    color: #fff;
}
table.arUrls tbody tr td:nth-child(2),
table.arUrls tbody tr td:nth-child(3)
{
    width: 45%;
}
table.arUrls input{
    width: 100%;
}








table.flights{
    border-collapse: collapse;
    width: 100%;
}
table.flights th, table.flights td{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;

    height: 50px;
}


table.practice-flights{
    border-collapse: collapse;
    width: 100%
}
table.practice-flights th, table.practice-flights td{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;

    height: 50px;
}


table.flights th, table.practice-flights th{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;

    height: 50px;

    background-color: #f1634e;
    color: #fff;
}

.countdown {
    margin: 0;
    color: #ffffff;
    background: #ff3c00;
    padding: 6px;
    border-radius: 5px;
}


div.modal{
    display: none;
    position: fixed;
    background-color: #4242427d;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}
div.modal.active{
    display: grid !important;
    justify-items: center;
    align-items: start;
    align-content: center;
}


table.flightDataListing{
    border-collapse: collapse;
    
}
table.flightDataListing thead tr th{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
    background-color: #ff624d;
    color: #fff;
}
table.flightDataListing tbody tr td{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
}
table.flightDataListing tbody tr.typeRun td{
    background-color: #688cff;
    color: #fff;
}

.modal.flightData span.runQuantity{
    background-color: #678cff;
    color: #fff;
    font-weight: bold;
    padding: 0.5rem;
    border-radius: 2px;
}






table.metarInfo{
    border-collapse: collapse;
    
}
table.metarInfo thead tr th{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
    background-color: #ff624d;
    color: #fff;
}
table.metarInfo tbody tr td{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
}





table.files_list{
    border-collapse: collapse;
    width: 100%;
}
table.files_list thead tr th:first-child,
table.files_list tbody tr td:first-child{
    text-align: left;
}
table.files_list thead tr th{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
    background-color: #ff624d;
    color: #fff;
}
table.files_list tbody tr td{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
}






section.races .modal.viewFlightData h2{
    margin: 0;
}
section.races .modal.viewFlightData p{
    margin: 0.5rem 0;
}

section.races .modal.viewFlightData table.flightRuns{
    width: 100%;
    border-collapse: collapse;
}
section.races .modal.viewFlightData table.flightRuns th{
    background-color: var(--main-bg-color);
    border: 1px solid var(--main-bg-color);
    color: #fff;
}
section.races .modal.viewFlightData table.flightRuns th
, section.races .modal.viewFlightData table.flightRuns td{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
}
section.races .modal.viewFlightData table.flightRuns tr td:first-child{
}

section.races .modal.viewFlightData table.flightRuns tr td.finalTime{
    background-color: #f3db24;
}

section.races .modal.viewFlightData table.flightRuns p.chosenRun {
    background-color: #8d5dd8;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
}

section.races .modal.viewFlightData table.flightFiles{
    border-collapse: collapse;
    width: 100%;
}
section.races .modal.viewFlightData table.flightFiles thead tr th:first-child,
section.races .modal.viewFlightData table.flightFiles tbody tr td:first-child{
    text-align: left;
}
section.races .modal.viewFlightData table.flightFiles thead tr th{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
    background-color: #ff624d;
    color: #fff;
}
section.races .modal.viewFlightData table.flightFiles tbody tr td{
    padding: 0.2rem 1rem;

    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
}













span.splitTime{
     
}
span.splitTimeDifference{
    color: #1b952b    
}

span.best_splitTimeDifference{
    color: #ff2f00    
}

div.timeline{
    position: relative;
    height: 100px;
    width: 100%;
    margin: 0 auto;
}
div.timeline .events-wrapper{
    position: relative;
    height: 100%;
    margin: 0 40px;
    overflow: hidden;
}

div.timeline .events-wrapper .events{
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 60px;
    height: 2px;
    background: #dfdfdf;
}

div.timeline .events-wrapper .events > div{
    position: absolute;
    left: 0;
    width: 15px;
    height: 15px;
    background-color: #5d8bd8;
    border-radius: 50%;
    top: -6px;
    cursor: pointer;
}

div.timeline .events-wrapper .events > div.penalty{
    background-color: #f76d6d;
}


div.timeline .events-wrapper .events > div > span {
    width: 1px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

div.timeline .events-wrapper .events > div > span::before {
    content: attr(data-label);
    top: -30px;
    width: 50px;
    transform: translateX(-25px) rotateZ(-90deg);
    font-size: 10px;
}
div.timeline .events-wrapper .events > div > span::after {
    content: attr(data-time);
    top: 16px;
    transform: translateX(-50%);
    font-size: 9px;
    color: #5d8bd8;
}

div.timeline .events-wrapper .events > div.gate {
    z-index: 2;
}

div.timeline .events-wrapper .events > div.penalty {
    z-index: 3;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    top: -3px;
}

div.timeline .events-wrapper .events > div.penalty > span::before {
    content: attr(data-label);
    top: -29px;
    text-align: left;
    left: 7px;
    border-radius: 2px;
    color: #f76d6d;
    padding: 0;
    margin: 0;
    background-color: #f6ecec6e;
    transform: translateX(-3px) rotateZ(-44deg);
    font-size: 10px;
}
div.timeline .events-wrapper .events > div.penalty > span::after {
    content: ''; /* attr(data-time); */
    top: 7px;
    transform: translateX(-50%);
    font-size: 9px;
    color: #e54141;
}

div.timeline .events-wrapper .events > div > span::before, div.timeline .events-wrapper .events > div > span::after {
    visibility: visible;
    position: absolute;
    left: 50%;
}


div.timeline .events-wrapper .events > div.gate > span::before {
    content: attr(data-label);
    top: -36px;
    background-color: #a6c5f84d;
    border-radius: 32px;
    color: #010101;
    width: 50px;
    transform: translateX(-25px) rotateZ(-90deg);
    font-size: 10px;
}



div.timeline .events-wrapper .events > div.gate:hover {
}


div.timeline .events-wrapper .events > div.gate:hover > span::before {
    font-size: 12px;
    color: #fff;
    background-color: #5d8bd8;
}


div.timeline .events-wrapper .events > div.gate:hover > span::after {
    font-size: 1rem;
    
}

table.finalHeats {
    border-collapse: collapse;
    width: 100%;
}

table.heatInfo {
    border-collapse: collapse;
    width: 100%;
}


span.openRace_status{
    
}
span.openRace_status.open{
    color:#1b952b;
}
span.openRace_status.closed{
    color:rgb(227, 18, 18);
}


section.races table.summary {
    width: 100%;
}
section.races table.summary thead tr th {
    text-align: left;
}

td.tbody_spacer{
    height: 2rem !important;
    border: 0 !important;
}

.panel.analysisList table.flights td,
.panel.analysisListByHeats table.flights td{
    font-size: 11px;
    letter-spacing: 1px;
}



.panel.analysisList table.flights td.secondsSymbol::after, 
.panel.analysisListByHeats table.flights td.secondsSymbol::after{
    /*content: 's';*/
}

.panel.analysisList table.flights td.splitTime,
.panel.analysisList table.flights td.timeFromStart,
.panel.analysisListByHeats table.flights td.splitTime,
.panel.analysisListByHeats table.flights td.timeFromStart{
    color: #13ac53;
    text-align: right;
    height: 2.5rem;
}

.panel.analysisList table.flights td.best,
.panel.analysisListByHeats table.flights td.best{
    color: #f30404;
}

.download_excel{
    border: 0;
    border-radius: 4px;
    padding: 0.7rem 1rem;
    background-color: #4b7a04;
    color: #fff;
    cursor: pointer;
}


table.leaderboard{
    border-collapse: collapse;
    /* width: 100%; */
}

table.leaderboard thead tr th{
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
    height: 50px;
    background-color: #f1634e;
    color: #fff;
}
table.leaderboard thead tr th:nth-child(2){
    width: 100px;
    text-align: right;
}


table.leaderboard tbody tr td{
    letter-spacing: 1px;
    border: 1px solid #c0c0c0;
    padding: 0.3rem 1rem;
    text-align: center;
    height: 50px;
}

table.leaderboard tbody tr td:nth-child(2){
    width: 100px;
    text-align: right;
}




.panel.leaderboard table.flights td{
    font-size: 11px;
    letter-spacing: 1px;
}



.panel.leaderboard table.flights td.secondsSymbol::after{
    /*content: 's';*/
}

.panel.leaderboard table.flights td.splitTime,
.panel.leaderboard table.flights td.timeFromStart{
    color: #13ac53;
    text-align: right;
    height: 2.5rem;
}

.panel.leaderboard table.flights td.best{
    color: #f30404;
}


.cancelFlightData{
    margin: 10px 0 0 0;
}





@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blinking-text {
    animation: blink 1s infinite;
}
.statusInProgress {
    color: green;
}
.statusReady {
    color: blue;
}
.statusError {
    color: red;
}






div.panel.view3D div.infoPanel {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: 0%;
    background-color: aliceblue;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    min-height: 4rem;
}

div.panel.view3D div.sliderControls {
    position: absolute;
    bottom: 12px;
    right: 0;
    left: 0%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}
div.panel.view3D div.sliderControls .button_playPause {
    border: 0;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    height: 36px;
    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 17px 0 17px 28px;
}
div.panel.view3D div.sliderControls .button_playPause.pause {
    border-style: double;
    border-width: 0px 0 0px 28px;
}
div.panel.view3D div.sliderControls .button_playPause:hover {
    border-color: transparent transparent transparent #404040;
}
div.panel.view3D div.sliderControls .timeSlider {
    width: 90%;
}

div.panel.view3D canvas{
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    width: 100%;
}

div.panel.view3D table.players {
}

div.panel.view3D table.players th.team,
div.panel.view3D table.players td.team{
    text-align: left;
}

div.panel.view3D table.players th.flight,
div.panel.view3D table.players td.flight{
    text-align: left;
}







div.panel.view3D .trackView .switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

div.panel.view3D .trackView .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

div.panel.view3D .trackView .switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

div.panel.view3D .trackView .switch .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

div.panel.view3D .trackView .switch input:checked + .slider {
    background-color: #2196F3;
}

div.panel.view3D .trackView .switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

div.panel.view3D .trackView .switch input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

div.panel.view3D .trackView .switch .slider.round{ /* Rounded sliders */
    border-radius: 34px;
}

div.panel.view3D .trackView .switch .slider.round:before {
    border-radius: 50%;
}