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: #001e33;
}
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: #fe634d;
    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: #fe634d;
    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: #f1634e;
    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: #fe634d;
}
nav.sideLeft ul li:hover{
    color: #fe634d;
    background-color: #f6f6f6;
    border-left: 7px solid #fe634d;
    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: #fe634d;
    border: 1px solid #fe634d;
    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 : #fe634d;
}
main .main section ul.breadcrumbs > li:first-child::before{
    content : '';
}

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

main .main section .options button.active{
    background-color: #fe634d;
    color: #fff;
    cursor: default;
}

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

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

main .main section form button{
    background-color: #fe634d;
    border: 1px solid #fe634d;
    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;
}











/* 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: #fe634d;
    border: 1px solid #fe634d;
    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: #fe634d;
    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 #f1634e;
    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: #fe634d;
    border: 1px solid #fe634d;
    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: #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: #fe634d;
    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.heats td.done{
    background-color: #1056c0;
    color: #fff;
}
table.heats td.running{
    background-color: #fce16c;
}





table.finalHeats{
    border-collapse: collapse;
    width: 100%;
}
table.finalHeats thead th{
    cursor: pointer;
}
table.finalHeats thead th:first-child{
    cursor: default;
}
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%;
}