@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');


:root {
    --ColorPrincipal: #0066b3;
    --ColorHeader: #137ccc;
    --ColorHeaderTitulos: white;
    --ColorIconFooter: white;
}

#modal {
    width: 400px;
    height: 256px;
    background: white;
    position: absolute;
    z-index: 200;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 3px 3px 20px #baabab;
    border-radius: 4px;
}

#modal .modalHeader {
    background: var(--ColorHeader);
    width: 100%;
    height: 30px;
    cursor: move;
    border-radius: 4px 4px 0px 0px;
}

#modal .modalHeader .titulos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

#modal .modalHeader .titulos .modalTitulo {
    font-size: 13px;
    font-weight: 500;
    margin: 0 5px;
    color: var(--ColorHeaderTitulos);
}

#modal .modalHeader .titulos .grouicon {
    font-size: 13px;
    color: var(--ColorHeaderTitulos);
    cursor: pointer;
}

#modal .modalHeader .titulos .grouicon i{
    margin: 0 11px;
}

#modal .modalBody {
    width: 100%;
    height: calc(100% - 58px);
}

#modal .modalBody fieldset{
    margin: 2px;
    padding: 0;
    border: 1px solid #cec8c8;
}
#modal .modalBody fieldset legend{
    font-size: 10px;
    font-weight: 400;
    color: black;
}

#modal .modalBody .GroupInputs{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}
#modal .modalBody .GroupInputs .Input{
    margin: 3px 6px;
}

#modal .modalBody .GroupInputs .Input .prioridade{
    color: red;
}

#modal .modalBody .GroupInputs .Input .label{
    font-size: 12px;
    font-weight: 500;
    color: #383434;
    background: #f7efef;
    position: relative;
    z-index: 200;
    top: 0px;
    left: 5px;
    border-left: 1px solid #d2d1d1;
    border-right: 1px solid #d2d1d1;
    border-top: 1px solid #d2d1d1;
    padding: 2px;
}
#modal .modalBody .GroupInputs .Input [inputModal]{
    font-family: 'Roboto Mono', monospace;
    border: 1px solid #d2d1d1;
    outline: none;
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    resize: none;
}

#modal .modalBody .GroupInputs .Input textarea[inputModal]{
    font-family: 'Roboto Mono', monospace;
    border: 1px solid #d2d1d1;
    outline: none;
    padding: 5px;
    width: 100%;
    height: calc(100% - 22px);
    box-sizing: border-box;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    resize: none;
}

#modal .modalBody .GroupExplicacao{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
}

#modal .modalBody .GroupExplicacao .conteudo{
    background: #f7eeee;
    margin: 5px;
    padding: 3px;
    border-radius: 5px;
    border-left: 3px solid #0066b3;
}


#modal .modalBody .GroupExplicacao .conteudo .infor{
    font-size: 11px;
    font-weight: 500;
    color: #282424;
    margin: 3px 5px;
    display: block;
}
#modal .modalBody .GroupExplicacao .conteudo .infor i {
    color: #0066b3;
    font-size: 11px;
    margin-right: 3px;
    border-radius: 10px;
}

#modal .modalBody .GroupExplicacao .conteudo .exem{
    font-size: 10px;
    font-weight: 500;
    color: #2f7006;
    margin: 3px 5px;
    display: block;
}

#modal .modalFooter {
    background: #137ccc;
    width: 100%;
    height: 28px;
    border-radius: 0 0 4px 4px;
}

#modal .modalFooter .groupicon {
    height: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 0 5px;
    align-items: center;
}
#modal .modalFooter .groupicon span i{
    background: green;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1px;
    color: var(--ColorIconFooter);
    font-size: 12px;
    cursor: pointer;
}

#modal .modalBody .headerTabs{
    background: white;
    width: 100%;
    height: 35px;
}
#modal .modalBody .headerTabs .ulHeaderTabs{
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #e4e2e2;
}
#modal .modalBody .headerTabs .ulHeaderTabs .liheaderTab{
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    border-right: 1px solid #c2c2c2;
}
#modal .modalBody .headerTabs .ulHeaderTabs .liheaderTab.extend{
    padding: 0 15px;
}


#modal .modalBody .headerTabs .ulHeaderTabs .liheaderTab.actived{
    border-right: 2px solid #509df1;
    border-left: 2px solid #509df1;
    border-top: 2px solid #509df1;
    background: white;
    height: 98%;
}

#modal .modalBody .headerTabs .ulHeaderTabs .liheaderTab i{
    font-size: 15px;
}
#modal .modalBody .bodyTabs{
    width: 100%;
    height: 92%;
    overflow: auto;
}
#modal .modalBody .bodyTabs ul{
    margin: 0;
    padding: 0;
    width: 100%;
}

#modal .modalBody .bodyTabs ul li.actived{
    display: block;
}

#modal .modalBody .bodyTabs ul li{
    display: none;
    width: 99.8%;
    height: 100%;
}


#modal .modalBody .Tabela {
    width: calc(100% - 1px);
    height: 100%;
}

#modal .modalBody .Tabela .TabHeader {
    background: white;
    width: 100%;
    border: 1px solid #cfc1c1;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInfor {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 2px solid #8484d5;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInfor i {
    background: white;
    width: 30px;
    height: 30px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #cfc1c1;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInfor span {
    background: white;
    width: calc(100% - 40px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0 0 10px;
    font-size: 13px;
    font-weight: 400;
}


#modal .modalBody .Tabela .TabHeader .TabHeaderInputs {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 35px;
    position: relative;

}

#modal .modalBody .Tabela .TabHeader .TabHeaderInputs .btn {
    background: transparent;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    font-size: 14px;
    color: #5e6266;
    cursor: pointer;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInputs .btn.hover:hover {
    background: #c1c1ee;
    color: #2f2f85;
    border-radius: 50%;
}


#modal .modalBody .Tabela .TabHeader .TabHeaderInputs .btn.nmr i::after {
    display: inline-block;
    margin-left: 0.355em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}


#modal .modalBody .Tabela .TabHeader .TabHeaderInputs .btn.refresh {
    color: green;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInputs .btn.refresh:hover {
    background: #c4e9c4;
    border-radius: 50%;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInputs .btnrigth {
    position: absolute;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal .modalBody .Tabela .TabBody {
    background: transparent;
    width: 100%;
    height: calc(100% - 84px);
    border-left: 1px solid #cfc1c1;
    border-right: 1px solid #cfc1c1;
    border-bottom: 1px solid #cfc1c1;
}

#modal .modalBody .Tabela .TabBody.Modal {
    height: calc(100% - 35px); 
}


#modal .modalBody .Tabela .TabBody .Table {
    width: 100%;
    height: 100%;
}

#modal .modalBody .Tabela .TabBody .Table ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#modal .modalBody .Tabela .TabBody .TableHeader {
    width: 100%;
    height: 30px;
}

#modal .modalBody .Tabela .TabBody .TableHeader ul {
    background: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    box-shadow: 0px 4px 8px #cecece;
    user-select: none;
    z-index: 101;
    position: relative;
}

#modal .modalBody .Tabela .TabBody .TableHeader ul li {
    box-sizing: border-box;
    background: transparent;
    width: auto;
    min-width: 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    padding: 0 3px;
    margin: 0 1px;
    border-right: 1px solid #c2c2c2;
    font-size: 11px;
    font-weight: 500;
}

#modal .modalBody .Tabela .TabBody .TableHeader ul li::after {
    display: inline-block;
    margin-left: 0.355em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}


#modal .modalBody .Tabela .TabBody .TableHeader ul .Desactived {
    display: none;
    visibility: hidden;
    opacity: 0;
}


#modal .modalBody .Tabela .TabBody .TableHeader ul li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
}




#modal .modalBody .Tabela .TabBody .TableBody {
    width: 100%;
    height: calc(100% - 60px);
    overflow-y: auto;
    max-height: calc(100% - 60px);
}

#modal .modalBody .Tabela .TabBody .TableBody.Modal {
    width: 100%;
    height: calc(100% - 66px);
    overflow-y: auto;
    max-height: calc(100% - 66px); 
}



#modal .modalBody .Tabela .TabBody .TableBody .ulTableBody {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #ede8e8;
    border-bottom: 1px solid rgb(0 0 0 / 6%);
    width: 100%;
    height: 35px;
    box-shadow: -1px 3px 10px rgb(0 0 0 / 9%);
}



#modal .modalBody .Tabela .TabBody .TableBody .ulTableBody.checked {
    background: #9898fd !important;
}


#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody:nth-child(even) {
    background: #f4f4f4;
}

#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody {
    box-sizing: border-box;
    background: transparent;
    width: auto;
    min-width: 20px;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    padding: 0 3px;
    margin: 0 1px;
    border-right: 1px solid rgb(0 0 0 / 3%);
    font-size: 11px;
    font-weight: 500;
}

#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody.Left {
    justify-content: flex-start;
}

#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody.Rigth {
    justify-content: flex-end;
}


#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .Desactived {
    display: none;
    visibility: hidden;
    opacity: 0;
}

#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody span i {
    font-size: 13px;
    color: #727272;
}

#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 95%;
}
#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody span.sucessFolgas {
    color: white;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 5px;
    background: #22a222;
}

#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody span.pendentFolgas {
    color: white;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 5px;
    background: #0267b3;
}


#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody img {
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
    object-fit: cover;
}


#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody .liTableBody .Number {
    width: 100%;
    height: 20px;
    background: #fbf844;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 1px 3px 10px #cfc3c3;
    align-items: center;
}


#modal .modalBody .Tabela .TabBody .TableBody  .ulTableBody:hover {
    cursor: pointer;
    background: #d8d8f4;
}

#modal .modalBody .Tabela .TabBody .TableFooter {
    width: 100%;
    height: 36px;
}

#modal .modalBody .Tabela .TabBody .TableFooter ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    height: 100%;
    display: flex;
}

#modal .modalBody .Tabela .TabBody .TableFooter ul li{
    font-size: 11px;
    margin: 0 5px;
    padding: 0;
    display: flex;
    align-items: center;
}

#modal .modalBody .Tabela .TabBody .TableFooter .Status{
    color: white;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 10px;
    margin: 0 5px 0 0;
}
#modal .modalBody .Tabela .TabBody .TableFooter .Status.Rede{
    color: #494444;
    background: #ece8e8;
    padding: 0px 5px 2px 5px;
    border-radius: 12px;
}
#modal .modalBody .Tabela .TabBody .TableFooter .Status.Finalizado{
    background: #33b413;

}
#modal .modalBody .Tabela .TabBody .TableFooter .Status.Pendente{
    background: #137cb4;

}


#modal .modalBody .Tabela .TabBody .TableFooter ul li .Qtd{
    font-weight: 600;
    padding: 0 5px;
    color: #0066b3;    
}


#modal .modalBody .Tabela .TabHeader .TabHeaderInputsSearchs {
    width: calc(100% - 20px);
    transition: all 0.3s ease-in-out;
    height: auto;
    display: none;
}
#modal .modalBody .Tabela .TabHeader .TabHeaderInputsSearchs.Active {
    display: block;
}


#modal .modalBody .Tabela .TabHeader .TabHeaderInputsSearchs .TabHeaderInputsSearchsCorpo {
    width: 100%;
    height: 100%;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInputsSearchs .TabHeaderInputsSearchsCorpo .input {
    box-sizing: border-box;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    position: relative;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInputsSearchs .TabHeaderInputsSearchsCorpo .input .inputSearch {
    font-family: 'Roboto Mono', monospace;
    box-sizing: border-box;
    width: auto;
    height: 100%;
    border: 1px solid #cfc1c1;
    padding: 0 0 0 2px;
    outline: none;
    font-size: 11px;
    font-weight: 400;
    border-radius: 0 5px 5px 0;
}

#modal .modalBody .Tabela .TabHeader .TabHeaderInputsSearchs .TabHeaderInputsSearchsCorpo .input input::placeholder {
    font-size: 11px;
    font-weight: 400;
}


#modal .modalBody .Tabela .TabHeader .TabHeaderInputsSearchs .TabHeaderInputsSearchsCorpo .input span {
    font-size: 10px;
    font-weight: 500;
    background: #c2c2c2;
    width: auto;
    padding: 0 5px;
    height: 100%;
    border-radius: 5px 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}