@import "/bootstrap/css/bootstrap.min.css";
@import "/bootstrap/font/bootstrap-icons.min.css";

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background-attachment: fixed;
    /* font-family: Segoe UI, SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif; */
    overflow: auto;
}

@media (min-width: 992px) {
    body {
        overflow: hidden;
    }
}

/*********************************************************************
    HEADER
*********************************************************************/
.focus-header {
    background-color: #1e293b;
}

.focus-header .logo {
    height: auto;
    width: 65%;
}

.focus-header .dropdown-menu-dark {
    background-color: #334155 !important;
}

.focus-header .dropdown-menu-dark hr {
    background-color: #64748b !important;
}

/*********************************************************************
    MENU
*********************************************************************/
.focus-menu {
    width: auto;
    padding: 0;
    background-color: #1e293b;
    color: #f8fafc;
    transition: width .35s ease, height .35s ease;
}

.focus-menu .dropdown-menu-dark {
    background-color: #334155 !important;
}

.focus-menu .dropdown-menu-dark hr {
    background-color: #f8fafc !important;
}

.focus-menu .btn:hover,
.focus-menu .nav-link:hover,
.focus-menu .nav-link.active {
    background-color: #334155 !important;
}

.focus-menu hr,
.focus-menu .focus-menu-label {
    display: none;
    transition: width .35s ease, height .35s ease;
}

.focus-menu .focus-menu-expand {
    display: none;
}

.focus-menu.show {
    width: 100%;
    padding: 1rem !important;
}

.focus-menu .show,
.focus-menu .show {
    display: none;
}

.focus-menu.show .show,
.focus-menu.show .show {
    display: block !important;
}

.focus-menu.show hr.show,
.focus-menu.show .focus-menu-label {
    display: block !important;
}

.focus-menu.show hr.focus-divider {
    display: block !important;
}

.focus-menu.show .focus-menu-expand {
    display: block !important;
}

@media (min-width: 992px) {
    .focus-menu.show {
        width: 280px !important;
    }
}


/*********************************************************************
    CONTEÚDO
*********************************************************************/
main {
    height: auto;
    width: auto;
    display: flex;
    flex: 1;
    flex-direction: row;
    overflow: hidden;
}

.page {
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    background-color: #f8fafc;
}

.content-wrapper {
    padding: 1rem 1.5rem;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.focus-titulo-tela {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

.focus-titulo-tela hr {
    width: 100%;
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid;
    opacity: .25;
}

.clickable,
.clickable * {
    cursor: pointer;
}


/*********************************************************************
    BOTÃO
*********************************************************************/
button i.bi {
    margin-right: .5rem;
}

.focus-menu button i.bi {
    margin: 0 !important;
}


/*********************************************************************
    TABELA
*********************************************************************/
table .left {
    text-align: left !important;
}

table .center {
    text-align: center !important;
}

table .right {
    text-align: right !important;
}

table .top {
    vertical-align: top !important;
}

table .middle {
    vertical-align: middle !important;
}

table .bottom {
    vertical-align: bottom !important;
}

.focus-table th,
.focus-table td {
    padding: 1rem 0.75rem;
    vertical-align: middle;
}

.focus-table td.ico {
    padding: .25rem 0;
    text-align: center;
}