/* ////////////////////////////////////////////////////////////////////
*
*  CSS APP
*   
* - variables app

* - html / body
* - wrapper-main / content-main / container-fluid
* - links
* -
* - header-main
* -
* - wrapper-nav-center
* -     item-header-nav
* -     item-header-logo
* -     item-header-nav-right
* -     
* - nav-mobile
* - 
* - footer-main
* -
* - aux-class
* - charts
*
* //////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------
* - variables color alqia
* -------------------------------------------------------------------- */
:root{
    --color-verde-alqia: #52755E;

    --color-verde-alqia-75: #7d9886;
    --color-verde-alqia-50: #a7bbae;
    --color-verde-alqia-25: #d2ded5;
    --color-verde-alqia-10: #EEF1EF;

    --color-preto-alqia-80: #2F2F2F;
}

/* --------------------------------------------------------------------
* - variables
* -------------------------------------------------------------------- */
:root{
    --height-header: 55px;

    --bg-body-default: #F7F7F8;
    --bg-nav-show: var(--color-verde-alqia);

    --color-font-header: #fff;
    --color-font-header-hover: #ddd;
    --color-font-footer: #fff;

    --acc-vanilla-header-active: var(--color-verde-alqia);

    --table-th-bg-color: var(--color-verde-alqia-75);

    --loader-text-color: var(--color-verde-alqia-75);
    --loader-bord-color: var(--color-verde-alqia);
}

.section-title {
    color: var(--color-verde-alqia)
}
.section-title:after {
    border-top: 3px solid var(--color-verde-alqia-75);
}

/* --------------------------------------------------------------------
* - html / body
* -------------------------------------------------------------------- */
body{
    background-color: var(--bg-body-default);
}

/* --------------------------------------------------------------------
* - wrapper-main / content-main / container-fluid
* -------------------------------------------------------------------- */
.wrapper-main {
    position: relative;
    top: 0;
	display: flex;
	flex-direction: column;
	height: 100vh;
}
.content-main {
    flex: 1;
    margin-top: calc(var(--height-header) + 20px);
    padding: 10px 0;
}
.content-main.content-no-nav {
    margin-top: calc(var(--height-header) - 10px);
}

.breadcrumb {
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.5rem;
}
.breadcrumb-item.active {
    color: var(--color-verde-alqia);
}


.container-fluid{ max-width: 1920px;}

/* --------------------------------------------------------------------
* - header-main
* -------------------------------------------------------------------- */
.header-main{ 
    color: var(--color-font-header); 
    background-color: var(--color-verde-alqia);
}
.header-main .navbar{
    padding-left: 0; 
    padding-right: 0;
}

/* --------------------------------
* - wrapper-logo-nav-right
* ------------------------------- */
.wrapper-logo-nav-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wrapper-logo-nav-right .item:nth-child(1){ flex: 1;}
.wrapper-logo-nav-right .item:nth-child(2){ flex: 0 1 auto;}
.wrapper-logo-nav-right .item:nth-child(3){ flex: 1;}

/* --- avatar --- */
.dropdown-menu-avatar{ width: 230px;}

.menu-avatar{
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-avatar .dropdown-toggle:after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    margin-top: 12px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}
.menu-avatar .nav-item .nav-link {
    display: inline-flex;
    padding: 0 .5rem;
    font-size: 1.3rem;
    color: var(--color-font-header);
}
.menu-avatar .container-avatar{
    position: relative;
    width: 30px;
    height: 30px;
    line-height: 1;
    overflow: hidden;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #777;
    background-color: #333;
}
.menu-avatar .container-avatar img{
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* btn-avatar - list */
.menu-avatar .nav-item .dropdown-menu { border-radius: 10px; overflow: hidden;}
.menu-avatar .nav-item .dropdown-menu .dropdown-item{ padding: .25rem 1.0rem;}

/* --- logo --- */
.navbar-brand { font-size: inherit;}
.navbar-brand img {
    width: auto;
    height: 35px;
}

/* --- nav-top-right --- */
.nav-top-right{ 
    flex: 1; 
    display: flex;
    justify-content: flex-end;
}
.nav-top-right ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
/* btn-sair */
.nav-top-right ul .nav-item .nav-link { 
    display: inline-flex;
    padding: 0 .5rem;
    font-size: 1.3rem;
    color: var(--color-font-header);
}
.nav-top-right ul .nav-item .nav-link:last-child { padding-right: 0;}
.nav-top-right ul .nav-item .nav-link:hover { color: var(--color-font-header-hover);}


/* media */
@media (max-width: 991px){
    .nav-top-right ul .nav-item .nav-link { padding-right: 0;}
    .nav-top-right ul .nav-item .nav-link.btn-logoff { display: none;}
}
@media (max-width: 680px){
    .navbar-brand img { height: 25px;}
}


/* --------------------------------------------------------------------
* - footer-main
* -------------------------------------------------------------------- */
.footer-main{
    padding: 1rem 0;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--color-font-footer);
    background-color: var(--color-preto-alqia-80);
}

/* --------------------------------------------------------------------
* - aux-class
* -------------------------------------------------------------------- */
.cursor-auto {cursor: auto!important;}

/* --------------------------------------------------------------------
* - box-charts
* -------------------------------------------------------------------- */
.box-charts{
    position: relative;
    width: 100%;
}
@media (max-width: 680px) {
    .overflow-charts{ 
        overflow-x: scroll;
        overflow-y: hidden;
        margin-bottom: 10px;
    }
    .overflow-charts .box-charts{ width: 200vw;}
    .overflow-charts .box-charts.no-vw{ width: 100%;}
    .overflow-charts .box-charts.vw100{ width: 100vw;}
    .overflow-charts .box-charts.vw150{ width: 150vw;}
    .overflow-charts .box-charts.vw200{ width: 200vw;}
    .overflow-charts .box-charts.vw250{ width: 250vw;}
    .overflow-charts .box-charts.vw300{ width: 300vw;}
}

/**----------------------------------------------------------------------------
 * paginacao (asp)
 *
 * @section plugins
*/
.paginacao_master {
	margin: 10px 0;
    width: 100%;
    height: 60px;
    font-size: 12px;
    text-align: center;
}
.paginacao_master_1 { height: 30px; color: #777;}
.paginacao_master_1_bold { font-weight: bold;}

.master_ul {
    position: relative;
    list-style: none;
}
.master_ul li {
	display: inline-block;
	margin-right: 10px;
}
.master_ul li.active_paginacao {
    font-weight: bold;
    padding: 5px 10px;
    color: #fff;
    border-radius: 4px;
    border: 1px solid var(--color-verde-alqia);
    background-color: var(--color-verde-alqia);
    font-weight: normal;
}
.master_ul li a {
    display: block;
    padding: 5px 10px;
	color: #666;
    border-radius: 4px;
    border: 1px solid #eee;
    background-color: #f8f8f8;
}
.master_ul li a:hover { background-color: #f1f1f1;}

.sem_margem_right { margin-right: 0px !important;}

.seta_right,
.seta_left {
    border: solid #999;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
}
.seta_right {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.seta_left {
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
}

/**----------------------------------------------------------------------------
 * btn-info
 *
*/
.btn-info {
    color: #fff;
    background-color: var(--color-verde-alqia);
    border-color: var(--color-verde-alqia-75);
}
.btn-info:hover {
    background-color: var(--color-verde-alqia-75);
    border-color: var(--color-verde-alqia);
}

.btn-info.focus, 
.btn-info:focus {
    color: #fff;
    background-color: var(--color-verde-alqia-75);
    border-color: var(--color-verde-alqia);
    box-shadow: none;
}