:root {
    --main-bg-color: #3d3d3d;

    --button-color-default: #659f5b;
}

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

.hide{
    display: none;
}
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-color: #71609e;
}
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: #FFF;
    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: #FFF;
    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(--button-color-default);
    border: 1px solid var(--button-color-default);
    color: #fff;
    border-radius: 10px;
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

main .main section table.list tbody tr{
}

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{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
}


main .main section nav.topNav p{
    margin: 0;
    font-size: 0.8rem;
    line-height: 150%;
}


main .main section nav.topNav .visitaTecnicaLocal_name{
    margin-top: 5px;
    font-size: 1.3rem;
}

main .main section nav.topNav .visitaTecnica_name{
    color:#007bff;
    font-size: 1rem;
}


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: start;
}


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;
}











/* 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;
}



.viewWindow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #72727278;
    z-index: 100;
    display: none;
}

.viewWindow.active {
    display: flex;
}



.viewWindow .panel .contentBox {
    display: none;
}
.viewWindow .panel .contentBox.active {
    display: block;
}


.viewWindow .panel {
    background-color: #fff;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--main-bg-color);
    margin: auto;
    width: 90%;
    height: 80%;
}



.viewWindow .panel .image {
    background-image: url('');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}



.viewWindow .panel button.close {
    margin: 2rem 0 0 -1rem;
    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;
}


.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: #bd7000 !important;
    border-color: #bd7000 !important;
}
.btn-edit{
    background-color: #555bed !important;
    border-color: #555bed !important;
}
.btn-delete{
    background-color: #df1717 !important;
    border-color: #df1717 !important;
}
.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(8, 1fr);
    align-items: center;
}
.tab-panel .tab-container > *{
    grid-column:span 8;
}
.tab-panel .tab-container .colSpan-1{
    grid-column:span 1;
}
.tab-panel .tab-container .colSpan-2{
    grid-column:span 2;
}
.tab-panel .tab-container .colSpan-3{
    grid-column:span 3;
}
.tab-panel .tab-container .colSpan-4{
    grid-column:span 4;
}
.tab-panel .tab-container .colSpan-5{
    grid-column:span 5;
}
.tab-panel .tab-container .colSpan-6{
    grid-column:span 6;
}
.tab-panel .tab-container .colSpan-7{
    grid-column:span 7;
}
.tab-panel .tab-container .colSpan-8{
    grid-column:span 8;
}

.tab-panel .tab-container.active{
    display: grid;
}

.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.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;
}






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

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

div.copyToClipboard{
    display: block;
    cursor: pointer;
    color: #ff4b00;
}
div.copyToClipboard span{
    font-size: 9px !important;
    font-weight: normal;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td:nth-child(9) div.copyToClipboard span{
    color: #ffeb00;
}


section.races .panel.dashboard table.qualifyingHeats tbody tr td:nth-child(6)
, section.races .panel.dashboard table.qualifyingHeats tbody tr td:nth-child(15){
    background-color: #f3db24 !important;
}



section.races .panel.list table.list tbody tr:hover {
    background-color: #f5f4f4;
}







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;
    
}





.form_input_bottomLabel{
    width:50%;
    line-height: 150%;
    text-align: center;
}
.form_input_bottomLabel.valid{
    background-color: #1637f3;
    color: #fff;
}
.form_input_bottomLabel.invalid{
    background-color: #f33716;
    color: #fff;
}



table.flightRuns span.valid{
    background-color: #40ba05;
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
}
table.flightRuns span.invalid{
    background-color: #fb0000;
    color: #f4ff00;
    padding: 3px 10px;
    border-radius: 3px;
}
table.flightRuns p.chosenRun{
    background-color: #8d5dd8;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
}


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



section.races .panel.dashboard table.entrants{
    width: 100%;
    
}
section.races .panel.dashboard table.entrants tbody tr td:first-child{
    cursor: pointer;
}
section.races .panel.dashboard table.entrants tbody tr td:first-child,
section.races .panel.dashboard table.entrants tbody tr td:nth-child(2){
    text-align: left;
}
section.races .panel.dashboard table.entrants tbody tr td:nth-child(2)
, section.races .panel.dashboard table.entrants tbody tr td:nth-child(5)
, section.races .panel.dashboard table.entrants tbody tr td:nth-child(6)
, section.races .panel.dashboard table.entrants tbody tr td:nth-child(9)
, section.races .panel.dashboard table.entrants tbody tr td:nth-child(12)
, section.races .panel.dashboard table.entrants tbody tr td:nth-child(15)
, section.races .panel.dashboard table.entrants tbody tr td:nth-child(19)
{
    border-left: 1px solid #c0c0c0;
}
section.races .panel.dashboard table.entrants tbody tr td{
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #c0c0c0;
    text-wrap: nowrap;
}
section.races .panel.dashboard table.entrants thead tr th{
    text-align: center;
    padding: 10px;
    background-color: var(--main-bg-color);
    color: #fff;
}






section.races .panel.dashboard table.results{
    width: 100%;
    
}
section.races .panel.dashboard table.results tbody tr td:first-child{
    padding:1rem;
}
section.races .panel.dashboard table.results tbody tr td:first-child{
    cursor: pointer;
}



section.races .panel.dashboard table.results tbody tr td{
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #c0c0c0;
    text-wrap: nowrap;
}
section.races .panel.dashboard table.results thead tr th{
    text-align: center;
    padding: 10px;
    background-color: var(--main-bg-color);
    color: #fff;
}




section.races .panel.dashboard table.results.qualifying tbody tr td:nth-child(2)
, section.races .panel.dashboard table.results.qualifying tbody tr td:nth-child(3)
, section.races .panel.dashboard table.results.qualifying tbody tr td:nth-child(4)
, section.races .panel.dashboard table.results.qualifying tbody tr td:nth-child(7)
, section.races .panel.dashboard table.results.qualifying tbody tr td:nth-child(11)
{
    border-left: 1px solid #c0c0c0;
}
section.races .panel.dashboard table.results.qualifying tbody tr td:nth-child(5)
, section.races .panel.dashboard table.results.qualifying tbody tr td:nth-child(6)
{
    text-align: left;
}




section.races .titleBar{
    font-size: 1.5rem;
    background-color: #c6daec;
    padding: 1rem;
    margin: 2px;
    margin-bottom: 0;
    margin-top: 4rem;
    text-align: center;
    border-radius: 5px 5px 0 0;
}



section.races .panel.dashboard table.raceResult{
    width: 100%;
    
}
section.races .panel.dashboard table.raceResult tbody tr td:first-child{
    padding:1rem;
}
section.races .panel.dashboard table.raceResult tbody tr td:first-child{
    cursor: pointer;
}


section.races .panel.dashboard table.raceResult tbody tr td{
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #c0c0c0;
    text-wrap: nowrap;
}
section.races .panel.dashboard table.raceResult thead tr th{
    text-align: center;
    padding: 10px;
    background-color: var(--main-bg-color);
    color: #fff;
}







section.races .panel.dashboard table.qualifyingHeats{
    width: 100%;
    
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td:first-child,
section.races .panel.dashboard table.qualifyingHeats tbody tr td:nth-child(10){
    text-align: left;
    text-wrap: nowrap;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td{
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid #c0c0c0;
}
section.races .panel.dashboard table.qualifyingHeats thead tr th
, section.races .panel.dashboard table.qualifyingHeats tbody tr.head th {
    text-align: center;
    padding: 10px;
    background-color: var(--main-bg-color);
    color: #fff;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td:nth-child(9){
    background-color: #8879d0;
    color: #fff;
    font-weight: bold;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td.status_1{
    color: #9d18ce;
    font-weight: bold;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td.status_2{
    color: #186dce;
    font-weight: bold;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td.highlight{
    background-color: #fff1a0;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr.highlight{
    background-color: #f2f1f1;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td.winner{
    color: #069e24;
    font-weight: 600;
    text-transform: uppercase;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td.draw{
    color: #1a30c3;
    font-weight: 600;
    text-transform: uppercase;
}
section.races .panel.dashboard table.qualifyingHeats tbody tr td.loser{
    color: #a60a0a;
    font-weight: 600;
    text-transform: uppercase;
}






section.flights table.flightFiles{
    border-collapse: collapse;
    width: 100%;
}
section.flights table.flightFiles thead tr th:first-child,
section.flights table.flightFiles tbody tr td:first-child{
    text-align: left;
}
section.flights 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.flights table.flightFiles tbody tr td{
    padding: 0.2rem 1rem;

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


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



.button_DNS{
    background-color: #3c3737 !important;
    color: #ffed00 !important;
    border-color: #ff0303 !important;
}

.button_flight_reset{
    background-color: #009cff !important;
    color: #ffffff !important;
    border-color: #009cff !important;
}








.flex_cards{
    /*display: flex;*/
    display: grid;
    flex-wrap: wrap;
    justify-items: center;
    grid-template-columns: repeat(8, 1fr);
}

.flex_cards div.pilot{
    flex: none;
    margin: 1rem;
    width: 81%;
    height: 255px;
    min-height: 100%;
    position: relative;
    font-size: 8px;
}

.flex_cards div.pilot.running{
    background-color: #fffb7b;
}

.flex_cards div.pilot div.photo{
    height: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
}

.flex_cards div.pilot div.panel{
    position: absolute;
    top: 170px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    line-height: 150%;
}



.flex_cards > div.pilot .pilotName {
    color: #606060;
    font-size: 1vw;
    position: absolute;
    bottom: 0px;
}


.flex_cards > div.pilot .flight {
    color: #ff0000;
    font-size: 1rem;
    position: absolute;
    top: 81px;
    left: 25px;
}

.flex_cards > div.pilot .flight .heat_name_number {
}


.flex_cards > div.pilot .card-container{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    padding: 1rem;
}

.flex_cards div.time_bar{
    display: block;
    width: 100%;
    height: 10px;
    background-color: #13ac53;
}



div.worldMap{
}















/* CSS for styling */
.rank-chart {
    border: 1px solid #ccc;
    padding: 20px;
    margin: 20px auto;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: space-between;
}
.rank-column {
    flex: 1;
    padding: 30px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: space-around;
    position: relative;
}
.rank-column::before {
    font-weight: 600;
    font-size: 1.5rem;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
}
.rank-column:nth-child(1)::before {
    content: 'QUARTER-FINAL';
}
.rank-column:nth-child(2)::before {
    content: 'SEMI-FINAL';
}
.rank-column:nth-child(3)::before {
    content: 'FINAL';
}
.rank-column:nth-child(4)::before {
    content: 'WINNER';
}
.rank-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.rank-bar {
    height: 2rem;
    background-color: #fbb313;
    color: #fff;
    margin-bottom: 5px;
    /* width: 100%; */
    border-radius: 5px;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 2rem;
    margin-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.rank-bar:empty {
    background-color: #dddddd;
    color: #000;
}
.rank-bar.winner {
    background-color: #007bff;
}
.rank-bar.champion {
    background-color: #0dde56;
}
.rank-bar::before{
    /* content: '#' attr(data-label); */
    content: attr(data-label);
    position: absolute;
    left: -4px;
    color: #000;
}

.rank-bar:nth-child(2)
, .rank-bar:nth-child(4) 
, .rank-bar:nth-child(6) 
, .rank-bar:nth-child(8) {
    margin-bottom: 20px;
}




section.seasons {

}

section.seasons .panel.ranking table.ranking{
    width: 100%;
}

section.seasons .panel.ranking table.ranking thead{
    
}

section.seasons .panel.ranking table.ranking thead th{
    text-align: center;
}
section.seasons .panel.ranking table.ranking thead th:first-child{
}

section.seasons .panel.ranking table.ranking tbody{
    
}

section.seasons .panel.ranking table.ranking tbody td{
    text-align: center;
    padding: 0.5rem;
}
section.seasons .panel.ranking table.ranking tbody td:first-child{
    text-align: left;
}









section.visitasTecnicasLocais div.panel.list div.excelContent{

}

section.visitasTecnicasLocais div.panel.list div.excelContent table{
    width: 100%;
}










section.visitasTecnicasLocais .panel.form h2{
    background-color: #e2e2e2;
    padding: 1rem;
    border-radius: 5px 5px 0 0;
}

section.visitasTecnicasLocais .panel.form table.items{

}
section.visitasTecnicasLocais .panel.form table.items tr td{

    border-top: 1px solid #c0c0c0;
}

section.visitasTecnicasLocais .panel.form table.items ul.files{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}
section.visitasTecnicasLocais .panel.form table.items ul.files li{
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    padding: 5px;
    margin: 0 5px;
    cursor: pointer;
}
section.visitasTecnicasLocais .panel.form table.items ul.files li img{
    max-width: 100px;
    max-height: 50px;
}
section.visitasTecnicasLocais .panel.form table.items ul.files li video{
    max-height: 100px;
    max-width: 100px;
}
section.visitasTecnicasLocais .panel.form .contentPreview{
    width: 300px;
    height: 300px;
    border: 1px solid #c0c0c0;
    text-align: center;
    padding: 1rem;
    border-radius: 5px;
}
section.visitasTecnicasLocais .panel.form .contentPreview img{
    max-width: 100%;
    max-height: 100%;
}
section.visitasTecnicasLocais .panel.form .contentPreview video{
    max-width: 100%;
    max-height: 100%;
}



.clickable{
    cursor:pointer
}





section.visitasTecnicasLocais .panel.form .subPanel{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
}
section.visitasTecnicasLocais .panel.form .subPanel > *{
    width: 25%;

}

section.visitasTecnicasLocais .panel.form ul.items{
    list-style: none;
    padding-left: 1rem;
}
section.visitasTecnicasLocais .panel.form ul.items > li{
    cursor: pointer;
    cursor: pointer;
    margin-bottom: 1rem;
    border-left: 2px solid #c0c0c0;
    padding: 0.5rem;
}
section.visitasTecnicasLocais .panel.form ul.items > li.active{
    background-color: #f1f1f1;
}

section.visitasTecnicasLocais .panel.form div.imagens{
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    align-items: flex-start;
    gap: 10px;
}

section.visitasTecnicasLocais .panel.form div.imagens .item-img{
    width: 100px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    cursor: pointer;
}


section.salas img.thumb{
    width: 250px;
}
section.salas img.horizontal{
    width: 100%;
}
section.salas img.vertical{
    width: auto;
    height: 400px;
}


section.salaEventos img.thumb{
    width: 250px;

    max-width: fit-content;
    max-height: fit-content;
}
section.salaEventos img.horizontal{
    width: 100%;

    max-width: fit-content;
    max-height: fit-content;
}
section.salaEventos img.vertical{
    width: auto;
    height: 400px;

    max-width: fit-content;
    max-height: fit-content;
}




section.myAccount .logo{
    width: 250px;
    width: 250px;
}




section.billings [paymentStatus="1"]{
    color: #ff0000;
}
section.billings [paymentStatus="2"]{
    color: #33e85a;
}
section.billings [paymentStatus="3"]{
    color: #acabab;
}




section.billings table.billing_items{
    width: 100%;
}

section.billings table.billing_items thead{
    background-color: #dcd8e7;
    line-height: 1rem;
}

section.billings table.billing_items th,
section.billings table.billing_items td{
    padding: 3px;
}

section.billings table.billing_items thead tr th:first-child{
    text-align: left;
}

section.billings table.billing_items thead tr th:nth-child(2),
section.billings table.billing_items thead tr th:nth-child(3),
section.billings table.billing_items thead tr th:nth-child(4),
section.billings table.billing_items thead tr th:nth-child(5){
    text-align: right;
}


section.billings table.billing_items tbody tr{
    background-color: transparent;
}
section.billings table.billing_items tbody tr:hover{
    background-color: #d1d7ec;
}

section.billings table.billing_items tbody tr td:nth-child(3),
section.billings table.billing_items tbody tr td:nth-child(4),
section.billings table.billing_items tbody tr td:nth-child(5),
section.billings table.billing_items tbody tr td:nth-child(6){
    text-align: right;
}


section.billings table.billing_items tfoot{
    background-color: #dcd8e7;
    line-height: 1rem;
}

section.billings table.billing_items tfoot tr td{
    text-align: right;
}

section.billings .btn-payment
, main .main section .menu button.btn-payment {
    background-color: var(--button-color-default);
    border: 1px solid var(--button-color-default);
    color: #fff;
}