/* ////////////////////////////////////////////////////////////////////
*
*  CSS CORE components
*  v2.0 - 25 Nov 2020
*  Dev by: Rogério Saraceni
*
* - anime
* - avatar-circle
* - btnScrollToTop
* - box-charts
* - btns
* - fold-table
* - loading-simple
* - page-header
* - ripple
* - section-title
* - table-asp
*
* //////////////////////////////////////////////////////////////////// */



/* --------------------------------------------------------------------
* - anime-css
* - https://animista.net/
---------------------------------------------------------------------- */
.slide-in-left {
    -webkit-animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-left .5s cubic-bezier(.25, .46, .45, .94) both
}
@-webkit-keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-left{0%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}


.slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
}
@-webkit-keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes slide-in-right{0%{-webkit-transform:translateX(1000px);transform:translateX(1000px);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}

.slide-in-top {
    -webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both
}
@-webkit-keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-top{0%{-webkit-transform:translateY(-1000px);transform:translateY(-1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}

.slide-in-bottom {
    -webkit-animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both;
    animation: slide-in-bottom .5s cubic-bezier(.25, .46, .45, .94) both
}
@-webkit-keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes slide-in-bottom{0%{-webkit-transform:translateY(1000px);transform:translateY(1000px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}

.fade-in {
    -webkit-animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) both;
    animation: fade-in 1.2s cubic-bezier(.39, .575, .565, 1.000) both
}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

/* --------------------------------------------------------------------
* - avatar-circle
* -------------------------------------------------------------------- */
.wrapper-avatar-circle{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
}

/* --------------------------------------------------------------------
* - btnScrollToTop
---------------------------------------------------------------------- */
#btnScrollToTop{
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    font-size: 1rem;
    cursor: pointer;
    transform:scale(1.8);
    opacity: 0;
    transition: .3s;
}

/* --------------------------------------------------------------------
* - 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;}
}

/* --------------------------------------------------------------------
* - btns
---------------------------------------------------------------------- */
.btn { 
    font-size: var(--btn-font-size);
    padding: .205rem .65rem;
}
.btn:hover, .btn:focus {
    outline: 0 !important;
    box-shadow: none;
}
.btn-small{ 
    padding: .105rem .45rem;
}
.btn-transparent{
    border: none;
    background-color: transparent;
}
.btn-clearfix {
    margin-top: 2px;
    margin-bottom: 0;
}
@media(max-width: 1200px){ .btn-last-xl{ float: right;}}
@media(max-width: 992px) { .btn-last-lg{ float: right;}}
@media(max-width: 768px) { .btn-last-md{ float: right;}}
@media(max-width: 576px) { .btn-last-sm{ float: right;}}

.btn-blue  { background-color: var(--blue); color: #fff;}
.btn-purple{ background-color: var(--purple); color: #fff;}
.btn-pink  { background-color: var(--pink); color: #fff;}
.btn-red   { background-color: var(--red); color: #fff;}
.btn-orange{ background-color: var(--orange); color: #fff;}
.btn-yellow{ background-color: var(--yellow); color: #666;}
.btn-green { background-color: var(--green); color: #fff;}
.btn-grey  { background-color: var(--grey); color: #fff;}
.btn-black { background-color: var(--black); color: #fff;}

.btn-blue:hover  { background-color: var(--blue-hover); color: #fff;}
.btn-purple:hover{ background-color: var(--purple-hover); color: #fff;}
.btn-pink:hover  { background-color: var(--pink-hover); color: #fff;}
.btn-red:hover   { background-color: var(--red-hover); color: #fff;}
.btn-orange:hover{ background-color: var(--orange-hover); color: #fff;}
.btn-yellow:hover{ background-color: var(--yellow-hover); color: #666;}
.btn-green:hover { background-color: var(--green-hover); color: #fff;}
.btn-grey:hover  { background-color: var(--grey-hover); color: #fff;}
.btn-black:hover { background-color: var(--black-hover); color: #fff;}

.btn-blue-clean   { background-color: var(--blue-clean); color: #fff;}
.btn-purple-clean { background-color: var(--purple-clean); color: #fff;}
.btn-pink-clean   { background-color: var(--pink-clean); color: #fff;}
.btn-red-clean    { background-color: var(--red-clean); color: #fff;}
.btn-orange-clean { background-color: var(--orange-clean); color: #fff;}
.btn-yellow-clean { background-color: var(--yellow-clean); color: #666;}
.btn-green-clean  { background-color: var(--green-clean); color: #fff;}
.btn-grey-clean   { background-color: var(--grey-clean); color: #fff;}
.btn-black-clean  { background-color: var(--black-clean); color: #fff;}

.btn-blue-clean:hover   { background-color: var(--blue-clean-hover); color: #fff;}
.btn-purple-clean:hover { background-color: var(--purple-clean-hover); color: #fff;}
.btn-pink-clean:hover   { background-color: var(--pink-clean-hover); color: #fff;}
.btn-red-clean:hover    { background-color: var(--red-clean-hover); color: #fff;}
.btn-orange-clean:hover { background-color: var(--orange-clean-hover); color: #fff;}
.btn-yellow-clean:hover { background-color: var(--yellow-clean-hover); color: #666;}
.btn-green-clean:hover  { background-color: var(--green-clean-hover); color: #fff;}
.btn-grey-clean:hover   { background-color: var(--grey-clean-hover); color: #fff;}
.btn-black-clean:hover  { background-color: var(--black-clean-hover); color: #fff;}

/* --------------------------------------------------------------------
* - fold-table
---------------------------------------------------------------------- */
table.fold-table > tbody > tr.view td, 
table.fold-table > tbody > tr.view th { cursor: pointer;}

table.fold-table>tbody>tr.view td:first-child,
table.fold-table>tbody>tr.view th:first-child {
    position: relative;
    padding-left: 20px;
}

table.fold-table > tbody > tr.view td:first-child:before, 
table.fold-table > tbody > tr.view th:first-child:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5px;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-color: #777;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    transform: rotate(225deg);
    transition: .3s cubic-bezier(.25,.8,.5,1),visibility 0s;
}
table.fold-table > tbody > tr.view.open td:first-child:before, 
table.fold-table > tbody > tr.view.open th:first-child:before { transform: rotate(45deg);}

table.fold-table > tbody > tr.view.open { background: #f8f8f8;}

table.fold-table > tbody > tr.fold { display: none;}
table.fold-table > tbody > tr.fold.open { display: table-row;}

/* --------------------------------------------------------------------
* - loading-simple
---------------------------------------------------------------------- */
.loading-simple {
    user-select: none;
}
.loading-simple::after {
    content: "";
    display: block;
    position: absolute;
    opacity: 1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.7);
    z-index: 2;
    transition: all .2s ease;
}
.loading-simple::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 45%;
    left: 45%;
    width: 2rem;
    height: 2rem;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    z-index: 10;
    -webkit-animation: spin-loading-simple 1s linear infinite;
    animation: spin-loading-simple 1s linear infinite;
}
@-webkit-keyframes spin-loading-simple {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes spin-loading-simple {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* --------------------------------------------------------------------
* - page-header
* -------------------------------------------------------------------- */
.page-header {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: 50%;
}
.page-header .container { z-index: 1;}
 
/* --------------------------------------------------------------------
* - ripple
---------------------------------------------------------------------- */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}
.ripple:active:after {
    transform: scale(0, 0);
    opacity: .2;
    transition: 0s;
}

/* --------------------------------------------------------------------
* - section-title
---------------------------------------------------------------------- */
.section-title {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border-color-default);
}
.section-title:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -2px;
    width: 30px;
    height: 0;
    border-top: 2px solid var(--blue);
    transition: height 0.3s, bottom, top ease 0s;
    z-index: 0
}

/* --------------------------------------------------------------------
* - table-asp
---------------------------------------------------------------------- */
.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;
    margin: 0;
    padding: 0;
}
.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 #4aa3df;
    background-color: #4aa3df;
    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);
}