* {
    padding: 0;
    margin: 0;
}

:root {
    --cor-primaria: #f6821f;
    --cor-secundaria: #f6831f42;
    --cor-primaria-escuro: #c96813;
    --box-shadow-btn: #f6831f60;

    --gray-50: #F7F8FA;
    --gray-100: #E6E8EB;
    --gray-200: #AFB2B1;
    --gray-500: #808080;
    --gray-800: #494D4B;
}

body {
    background-color: #f8f9fc;
    font-size: 100%;
}

body, input, textarea, button {
    font: 500 1rem Inter, sans-serif;
    color: var(--gray-500);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    font-family: Lexend, sans-serif;
    color: var(--gray-800);
    cursor: default;
}

p {
    cursor: default;
}

@media (max-width: 1366px) {
    body {
        font-size: 90% !important;
    }
}

/* preload */
.pj-preload {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj-preload .spinner-border {
    color: var(--cor-primaria);
}
#__PAGE .pj-preload {
    width: 100%;
    height: 100%;
}
/* preload */

/* inputs */
.form-control {
    /* background: #f6f6f6; */
    -webkit-appearance: none;
    /* border-color: transparent; */
    transition: border-color 400ms
}
.form-control:focus {
    /* background: #f6f6f6; */
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 0.2rem rgb(246 130 31 / 25%);
}
.form-control:disabled, .form-control[readonly] {
    cursor: not-allowed;
}
.form-group {
    position: relative;
}
.form-group label {
    font-weight: 600;
    margin-bottom: 0.25rem !important;
}
.form-group input:read-only {
    pointer-events: none;
}
.form-group select:not(:disabled) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("../../public/angle-down-solid.svg") no-repeat;
    background-position-x: 95%;
    background-position-y: center;
    background-size: 1rem;
}
.form-group select:disabled {
    background-color: #e9ecef !important;
    opacity: 1;
}

.custom-control-label:before,
.custom-control-label:after {
    margin-top: -5px;
}
.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--cor-primaria);
    background-color: var(--cor-primaria);
}
.custom-control-input:active~.custom-control-label::before {
    background-color: rgb(246 130 31 / 25%) !important;
    border-color: var(--cor-primaria) !important;
}
.custom-control-input:focus~.custom-control-label::before {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 0.2rem rgb(246 130 31 / 25%);
}
.custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: rgba(246, 130, 31,.5);
}
.form-sugestoes {
    position: absolute;
    width: 100%;
    z-index: 10000;
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 6px;
    margin-top: .5rem;
    max-height: 250px;
    overflow-y: scroll;
}
.form-sugestoes.acima {
    bottom: 38px;
    margin-bottom: .5rem;
}
.form-sugestoes.fixed {
    position: fixed;
    z-index: 10000;
}
.form-sugestoes ul {
    list-style: none;
    margin: 0;
}
.form-sugestoes ul li * {
    margin: 0;
    cursor: pointer;
}
.form-sugestoes ul li {
    transition: background-color 400ms;
    margin-bottom: 1rem;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
}

/* alocado */
.form-sugestoes ul li.alocado {
    cursor: not-allowed;
    opacity: .6;
    pointer-events: none;
}
.form-sugestoes ul li.alocado * {
    cursor: not-allowed;
    transition: color 400ms;
}
.form-sugestoes ul li.alocado:hover {
    opacity: 1;
}
.form-sugestoes ul li.alocado:hover * {
    
    color: red !important;
}
/* alocado */

.form-sugestoes ul li:last-child {
    margin-bottom: 0;
}
.form-sugestoes ul li:hover {
    background-color: #f1f1f1;
}
.form-sugestoes ul li h6 {
    font-size: 1.1rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form-sugestoes ul li p {
    font-size: .9rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* inputs */

/* buttons */
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}
.pj-button {
    background-color: var(--cor-primaria);
    color: #ffffff;
    outline: none !important;
    transition: filter 400ms;
    border-radius: 6px;
}
.pj-button:hover {
    color: #ffffff;
    filter: brightness(.9);
}
.pj-button:focus {
    box-shadow: 0 0 0 0.2rem var(--box-shadow-btn);
}
.pj-button.secundario {
    background-color: var(--cor-secundaria);
    border: 1px solid var(--cor-primaria);
    color: var(--cor-primaria);
}
/* buttons */

/* tables */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    background-color: var(--cor-primaria);
}
table .sorting::before {
    font-weight: 400;
}
table .sorting::after {
    font-weight: 400;
}
table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_desc:after {
    color: var(--cor-primaria);
}
.page-link {
    color: var(--cor-primaria);
}
.page-link:hover {
    color: var(--cor-primaria) !important;
}
.page-item.active .page-link {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #ffffff;
}
.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--box-shadow-btn);
}
table tbody tr {
    transition: background-color 400ms;
}
table tbody tr:hover {
    background-color: #e0e0e0 !important;
}
table.dataTable tbody tr.selected {
    background-color: #ecd1b9 !important;
}
table tbody tr td .btn-acoes {
    margin: 0 0 0 1rem;
    padding: 0;
    transition: color 400ms;
}
table tbody tr td .btn-acoes:first-child {
    margin: 0;
}
table tbody tr td .btn-acoes:not(:disabled):hover {
    color: var(--cor-primaria);
}
table tbody tr td .btn-acoes.hover-red:not(:disabled):hover {
    color: red !important;
}
table p {
    max-width: 300px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: normal;
}
/* tables */

/* nav-tabs */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: transparent !important;
    border-color: #dee2e6 #dee2e6 #f8f9fa !important;
}
.nav-tabs a {
    transition: color 400ms !important;
}
.nav-tabs .nav-link:focus {
    border-color: #dee2e6 #dee2e6 #f8f9fa !important;
}
.nav-tabs .nav-link:hover {
    border-color: #d1d1d1 #d1d1d1 #f8f9fa !important;
    color: var(--cor-primaria-escuro) !important;
    filter: none !important;
}
/* nav-tabs */

/* tela login */
.pj-login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}
.pj-card-login {
    width: 100vw;
    max-width: 350px;
    border-radius: 6px;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.pj-card-login img {
    width: 100%;
    margin: 1rem 0;

}
.pj-card-login form {
    width: 100%;
}
/* tela login */

/* root painel */
#__APP {
    display: flex;
    height: 100vh;
}

@media (max-width: 767px) {
    #__APP {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
    }
}

/* menu */
.pj-menu {
    width: 6.5rem;
    background-color: var(--cor-primaria);
    min-height: 100vh;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    transition: width 400ms;
    position: relative;
    padding: 0 .5rem;
}

.pj-menu.aberto {
    width: 14rem;
    padding: 0 1rem;
}

.btn-menu {
    position: relative;
    top: 0;
    left: 0;
    height: 7.5vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width, justify-content 400ms;
}

.pj-menu.aberto .btn-menu {
    justify-content: flex-end;
}

/* animacao abre-fecha */
.btn-menu label {
    display: inline-block;
    background-color: transparent;
    cursor: pointer;
    margin: 0;
    padding: 0;
    z-index: 3;
    position: fixed;
}

.btn-menu .bar {
    display: block;
    background-color: #ffffff;
    width: 30px;
    height: 3px;
    border-radius: 5px;
    margin: 5px auto;
    transition: background-color .5s ease-in, transform .5s ease-in, width .5s ease-in;
}

.btn-menu input[type="checkbox"] {
    display: none;
}

.btn-menu input[type="checkbox"]:checked ~ label .bar {
    background-color: #ffffff;
}

.btn-menu input[type="checkbox"]:checked ~ label .top {
    -webkit-transform: translateY(8px) rotateZ(45deg);
    -moz-transform: translateY(8px) rotateZ(45deg);
    -ms-transform: translateY(8px) rotateZ(45deg);
    -o-transform: translateY(8px) rotateZ(45deg);
    transform: translateY(8px) rotateZ(45deg);
}
  
.btn-menu input[type="checkbox"]:checked ~ label .bottom {
    -webkit-transform: translateY(-8px) rotateZ(-45deg);
    -moz-transform: translateY(-8px) rotateZ(-45deg);
    -ms-transform: translateY(-8px) rotateZ(-45deg);
    -o-transform: translateY(-8px) rotateZ(-45deg);
    transform: translateY(-8px) rotateZ(-45deg);
}
  
.btn-menu input[type="checkbox"]:checked ~ label .middle {
    width: 0;
}
  
.btn-menu .middle {
    margin: 0 auto;
}

@media (max-width: 767px) {
    .pj-menu {
        position: absolute;
        top: 0;
        left: -6.5rem;
        width: 6.5rem;
        z-index: 2;
        transition: left 400ms;
    }
    .pj-menu.aberto {
        left: 0;
        width: 6.5rem;
    }
    .btn-menu {
        position: fixed;
        width: 4rem;
        transition: width 450ms;
    }
    .btn-menu .bar {
        background-color: var(--cor-primaria);
    }
    .btn-menu input[type="checkbox"]:checked ~ label .bar {
        background-color: #ffffff;
    }
    .pj-menu.aberto .btn-menu {
        width: 6rem;
    }
    .pj-menu-content {
        padding-top: 7.5vh;
    }
}
/* animacao abre-fecha */

.pj-menu-content a {
    text-decoration: none;
}

.pj-btn-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: display, background-color 400ms;
    cursor: pointer;
    padding: 1rem 0;
    border-radius: 6px;
    margin-bottom: 1rem;
}

.pj-btn-menu.ativo {
    background-color: rgba(255, 255, 255, 0.1);
}

.pj-btn-menu:hover {
    background-color: rgba(255, 255, 255, 0.3)
}

.pj-btn-menu * {
    color: #ffffff;
}

.pj-btn-menu .icone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj-btn-menu .descricao {
    font-size: .8rem;
    padding: 0 .5rem;
}

.pj-menu .dropdown-icone {
    display: none;
}

.pj-dropdown .pj-collapse {
    display: none;
    background-color: #ffffff;
    color: var(--gray-500);
    border-radius: 6px;
    padding: 1rem;
    opacity: 0;
    position: relative;
    transition: opacity, position 400ms;
    box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.1);
    z-index: 1000;
}

.pj-menu .pj-dropdown .pj-collapse.mostrar {
    display: flex;
    flex-direction: column;
    opacity: 1;
    position: absolute;
    width: 12rem;
    left: 7rem;
    margin-top: -55px;
}

.pj-dropdown .pj-collapse a {
    color: var(--gray-500);
    text-decoration: none;
    padding: 1rem;
    text-align: left;
    transition: background 400ms;
    border-radius : 6px;
}
.pj-dropdown .pj-collapse a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}

.pj-menu .pj-suporte {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
    width: 100%;
}

.pj-menu .pj-suporte button {
    background-color: transparent;
    border: none;
    width: 80%;
    max-width: 74px;
    color: #ffffff;
    font-size: .8rem;
    padding: 1rem 0;
    border-radius: 6px;
    transition: display, background-color 400ms;
}

.pj-menu .pj-suporte button:hover {
    background-color: rgba(255, 255, 255, 0.3)
}

.pj-menu .pj-suporte button img {
    width: 25%;
    object-fit: cover;
}

.pj-menu .pj-suporte button p {
    margin: 0;
}

@media (min-width: 768px) {
    .pj-menu.aberto .pj-btn-menu {
        display: grid;
        grid-template-columns: 20% 80%;
        text-align: left;
    }
    
    .pj-menu.aberto .pj-btn-menu .descricao {
        font-size: 1rem;
        margin-left: .5rem;
    }
    
    .pj-menu.aberto .pj-dropdown .pj-btn-menu {
        display: grid;
        grid-template-columns: 20% 60% 20%;
        text-align: left;
    }

    .pj-menu.aberto .dropdown-icone {
        display: flex;
    }

    .pj-menu.aberto .pj-dropdown .pj-collapse.mostrar {
        display: flex;
        flex-direction: column;
        opacity: 1;
        position: absolute;
        width: 100%;
        left: 13rem;
        margin-top: -55px;
    }
}

/* modal-suporte */
.modal-content {
    border: none !important;
    border-radius: 6px !important;
}

#modalSuporte .modal-header {
    border-bottom: none !important;
    align-items: center !important;
}

#modalSuporte .modal-title span {
    font-weight: 500 !important;
    font-size: .8rem !important;
    display: flex;
    flex-direction: column;
    opacity: .8;
}

.pj-body-suporte .col-md-6 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pj-card-contato {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    max-width: 160px;
}

@media (max-width: 768px) {
    .pj-body-suporte .pj-card-contato {
        max-width: unset;
        width: 100%;
    }
    .pj-body-suporte .pj-card-contato:last-child {
        margin-top: 1rem;
    }
    .pj-body-suporte .pj-card-contato a {
        font-size: 2rem;
    }
}

.pj-card-contato a {
    color: var(--cor-primaria) !important;
}

.pj-body-suporte h5 {
    margin: 1rem 0 0 !important;
}

.pj-body-suporte h5 span {
    font-weight: 500 !important;
}

.pj-body-suporte p {
    margin: 1rem 0 0 !important;
}

.pj-body-suporte p a {
    color: var(--cor-primaria) !important;
}

.pj-copyright * {
    margin: 0;
    padding: 0;
}

.pj-copyright p {
    font-size: 1rem;
}

.pj-copyright p i {
    color: var(--cor-primaria);
}

.pj-copyright a {
    font-size: 1.1rem;
    color: var(--gray-800);
}
/* modal-suporte */
/* menu */

/* content */
.pj-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.pj-navbar {
    background-color: #ffffff;
    height: 7.5vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.container-fluid {
    padding: 1rem 15px;
    height: 92.5vh;
    overflow-y: auto;
}

.pj-navbar p {
    display: none;
}

.pj-navbar #versao-beta {
    cursor: pointer;
}

.pj-navbar #versao-beta span {
    display: none;    
}

@media (min-width: 768px) {
    .pj-navbar p {
        display: block;
    }
    .pj-navbar #versao-beta span {
        display: unset;    
    }
}

.pj-navbar .dados-usuario {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.dados-usuario span {
    font-weight: 500;
    opacity: .9;
}
.dados-usuario img {
    height: 2rem;
    margin-left: 1rem;
    border-radius: 50%;
}
.pj-dados-usuario-dropdown {
    position: absolute;
    right: 15px;
    top: -8rem;
    background: #ffffff;
    padding: 1rem 3rem;
    border-radius: 6px;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 8%);
    transition: top 400ms;
    z-index: 1000;
}
.pj-dados-usuario-dropdown.mostrar {
    top: 8vh;
}
.pj-dados-usuario-dropdown button {
    border: none;
    background: transparent;
    transition: color 400ms;
    border-radius : 6px;
}
.pj-dados-usuario-dropdown button:hover {
    color: red
}
/* content */
.pages-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
}
.card {
    border-radius: 6px;
}
.card input, .card select {
    background-color: #fafafa;
}
.shadow {
    -webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
    box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}
.border-none {
    border: none !important;
}
@media (max-width: 768px) {
    .pages-header {
        align-items: center;
    }
    .pages-header h1 {
        font-size: 1.7rem;
    }
    .pages-header .pj-button {
        border-radius: 6px;
    }
    .pages-header .pj-button span {
        display: none;
    }
}
@media (max-width: 320px) {
    .pages-header h1 {
        font-size: 1.4rem;
    }
}
/* root painel */

/* modal */
.modal-body {
    max-height: 79vh !important;
}
@media (max-height: 768px) {
    .modal-dialog-scrollable .modal-content {
        overflow: unset;
    }
    .modal-body {
        max-height: 75vh !important;
    }
    .pj-body-suporte .animacao {
        max-height: 250px
    }
}
/* modal */