/* 
    Created on : 23 de nov. de 2023, 08:56:21
    Author     : wellington assis
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;900&display=swap');

body{
    background: #191919;
    font-family: 'Poppins', sans-serif;
}
.sidebar{
    width: 300px !important;
    background: #191919;
    padding-left: 0px;
    padding-right: 0px;
    height: 100%;
    overflow-y: auto;
}
#wrapper{
    margin: 0 0 0 300px;
    background: transparent;
    z-index: 99;
    margin-top: -100px;
}
#header{
    margin: 0 0 0 300px;
    background: #00bc81;
    border-bottom: 1px solid #00bc81;
    z-index: 100;
}
body.hide-sidebar:not(.show-sidebar) #menu {
    margin-left: -300px;
}
body.page-small.show-sidebar #wrapper {
    margin-left: 330px;
}
.bg-top{
    height: 182px;
    background: #00bc81;
}
.modal{
    background-color: rgba(0, 0, 0, .5);
    z-index: 2050 !important;
}
/*************** MENU LATERAL **************/
.logo-menu{
    height: 60px;
    width: 125px;
    position: fixed;
    top: 0px;
    background: #222222;
    padding: 10px 15px 10px 10px;
    z-index: 1029;
    border-bottom-right-radius: 40%;
    margin-left: -5px;
}
.box_thumb{
    background: #00bc81;
    padding: 50px 0 10px 0;
    top: 0;
    position: sticky;
    z-index: 8;
}
.thumb_menu{
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.thumb_menu span{
    width: 100%;
    color: #fff;
    text-align: center;
    margin-top: 10px;
}
.thumb_menu a img{
    border: 2px solid #00ffaf;
}
.menu-profile-image-thumb{
    height: 80px;
    width: 80px;
    border-radius: 50%;
}
.notific_menu{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 20px;
}

.notific_menu svg{
    color: #fff;
}
.sidebar-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 10px;
}
.sidebar-menu li {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
    transition: all ease 0.2s;
    width: 50%;

}
.sidebar-menu li.active>a {
    background: #00bc81;
}
.sidebar li.active > a, .sidebar .nav > li > a:hover, .sidebar .nav > li > a:focus{
    background: #00bc81;
}
.sidebar-menu{
    position: relative;
}
.sidebar-menu li a{
    transition: all ease 0.2s;
    border-radius: 10px;
    color: #ffffff !important;
    height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    transition: all ease 0.4s;
    width: 80%;
    text-align: center;
    font-weight: 500;
}

.sidebar-menu li a i{
    margin-right: 0px !important;
}
.sidebar-menu div{
    display: none;
    position: absolute;
    background: #19191a;
    width: 100%;
    z-index: 4;
    height: 100%;
}
.sidebar-menu div li, .sidebar ul div li a{
    display: block;
    height: auto;
    width: 80%;
    text-align: start;
}
.sidebar::-webkit-scrollbar {
    width: 0px; /* Largura da barra de rolagem */
}
.menu-icon{
    font-size: 1.2rem !important;
}
.icon-open{

}
.icon-croos{
    position: relative;
    right: 10px;
    top: 10px;
    float: right;
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    transition: .5s;
}
.icon-croos:hover{
    border-radius: 5px;
    background: #fff;
    padding: 2px;
    color: #000;
    transition: .5s;
}
.active>a{
    background: #00bc81;
}
.sidebar li .nav-second-level li.active a {
    background: #00bc81;
}
.mega-menu li a i{
    margin-right: 13px !important;
}
.mega-menu li {
    width: 270px!important;
}
/*************** FIM MENU LATERAL **************/

/*************** MENU config **************/

.navbar-pills-flat{
    background-color: #272727;
    color: #fff;
}
.navbar-pills-flat li a,.navbar-pills-flat li a i{
    color: #fff;
}
.nav-tabs>li a i.menu-icon {
    color: #fff;
}
.nav-tabs>li a:hover i.menu-icon {
    color: #00bc81;
}

.navbar-pills-flat li a:hover{
    color: #00bc81;
}
.navbar-pills-flat li a:active{
    color: #00bc81;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    color: #00bc81;
}
.nav-tabs>li.active>a i.menu-icon, .nav-tabs>li.active>a:focus i.menu-icon, .nav-tabs>li.active>a:hover i.menu-icon {
    color: #00bc81;
}

/*************** FIM MENU config **************/

.top_stats_wrapper{
    background:  #272727;
    color: #fff;
    border: 1px solid #272727;
}
.tw-text-neutral-800,.tw-text-neutral-600{
    color: #fff;
}
.panel, .panel-body, .panel_s {
    border: 1px solid #272727;
    background-color: #272727;
    color: #fff;
    overflow: hidden;
}
/************ botões  ***********/
.btn-primary,.btn-success{
    background: #272727;
    border: 1px solid #272727;
}
.btn-default{
    background: #6d6e6d;
    border: 1px solid #6d6e6d;
    color: #fff;
}

.btn-primary:hover{
    background: #6d6e6d;
    border: 1px solid #6d6e6d;
}
.btn:active{
    background: #6d6e6d !important;
    border: 1px solid #6d6e6d !important;
}
.btn i{
    color: #fff  !important;
}
.btn-primary.focus, .btn-primary:focus, .btn-primary:active{
    background: #6d6e6d;
    border: 1px solid #6d6e6d;
    --tw-ring-shadow: px 2px 14px 7px rgba(0,188,129,0.28);
    -webkit-box-shadow: 1px 2px 14px 7px rgba(0,188,129,0.28);
    box-shadow: 1px 2px 14px 7px rgba(0,188,129,0.28);
}
.panel-body .btn-primary{
    background: #6d6e6d;
    border: 1px solid #6d6e6d;
    color: #fff;
}
/************ fim botões  ***********/
a{
    color: #fff;
}
a:hover{
    color: #00bc81;
}

.panel_s a, .panel a, .panel-body a{
    color: #fff;
}
.horizontal-tabs a,.horizontal-tabs i{
    color: #fff !important;
}
.icon-black {
    background: #191919;
    border: #191919;
    position: relative;
}
.icon-notific{
    position: absolute;
    right: -10px;
    top: -10px;
}
.icon-black-responc{
    margin-top: -0.375rem;
    display: inline-flex;
    height: 2rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.dropdown-submenu>.dropdown-menu {
    right: 100%;
    left: auto;
}

.tw-text-neutral-100,
.tw-text-neutral-200,
.tw-text-neutral-300,
.tw-text-neutral-400,
.tw-text-neutral-500,
.tw-text-neutral-700,
.tw-text-neutral-800,
.tw-text-neutral-900
{
    color: #fff ;
}
.screen-options-area{
    background: #272727;
    border: none;
}
.mleft5 i{
    color: #000;
}
#search_input{
    background: #000;
}
.table thead tr th{
    background: #191919 !important;
    color: #fff !important;
}
.pagination>.active>a{
    background: #00bc81;
    border: 1px solid #00bc81;
}
.pagination>.active>a:hover{
    background: #191919;
    border: 1px solid #191919;
}
.onoffswitch-checkbox:checked+.onoffswitch-label{
    background: #00bc81;
    border: 1px solid #00bc81;
}
.row-options a:nth-child(1):hover {
    color: #00bc81;
}
.row-options a:nth-child(2):hover {
    color: #00bc81;
}
/************* kan-ban leads **************/
.kan-ban-content{
    background: #6D6E6D;
}
.kan-ban-content .panel, .kan-ban-content .panel-body, .kan-ban-content .panel_s, .kan-ban-content .panel_s a,.kan-ban-content .panel a,.kan-ban-content .panel-body a {
    background: #fff;
    color: #000 !important;
    border: 1px solid #fff;
}
.leads-overview {
    background: #272727;
    padding: 10px;
    border-radius: 10px;
}
.leads-overview h4{
    color: #fff;
}
.kanban-leads-sort{
    background: #272727;
    padding: 10px;
    border-radius: 10px;
}
.kanban-leads-sort span{
    color: #fff;
}
.control-label{
    color: #fff;
}
/************* fim kan-ban leads **************/
#contract_summary{
    background: #272727;
    padding: 10px;
    border-radius: 10px;
}
#contract_summary h4,#contract_summary svg{
    color: #fff;
}
.btn-bottom-toolbar{
    margin-left: 330px;
    width: calc(100% - 329px);
    background: #6D6E6D;

}
/************* alerta table **************/

.table>tbody>tr.danger>td a, .table>tbody>tr.danger>th a, .table>tbody>tr>td.danger a, .table>tbody>tr>th.danger a, .table>tfoot>tr.danger>td a, .table>tfoot>tr.danger>th a, .table>tfoot>tr>td.danger a, .table>tfoot>tr>th.danger a, .table>thead>tr.danger>td a, .table>thead>tr.danger>th a, .table>thead>tr>td.danger a, .table>thead>tr>th.danger a {
    color: #dc2626;
}

/************* Modal **************/

.modal-content,.modal-header{
    background: #191919;
    color: #000;
}
.modal-content label{
    color: #fff;
}
.modal-header h4,.modal-header button span{
    color: #fff;
}
#contact p,#contact span{
    color: #fff;
}
/************* fim  Modal **************/

/************* barra de rolagem geral ****************/
::-webkit-scrollbar {
    width: 8px; /* Largura da barra de rolagem */
}

::-webkit-scrollbar-thumb {
    background-color: #00bc81; /* Cor da alça de rolagem */
    border-radius: 6px; /* Cantos arredondados da alça de rolagem */
}

/* Estilizando a pista de rolagem */
::-webkit-scrollbar-track {
    background-color: #000; /* Cor da pista de rolagem */
}


/************* fim barra de rolagem geral ****************/

/************* tela de login admin ****************/
.login_body{
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.login_imagem{
    width: 100vw;
    height: 100vh;
    background-image: url(../../assets/images/login/background1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.box-alert{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 60px;
    margin-bottom: 5px;
}
.box-alert-trigger{
    width: 100%;
    display: none;
    background-image: url(../../assets/images/login/portal.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: trigger 0.5s ease-in-out;
    color: #fff;
}
.login_imagem img{
    width: 100%;
    height: 100%;
}


.login_traje,.login_effect1,.login_effect2{
    top: 0;
    left: 0;
    position: absolute;
}
.login_traje{
    filter: hue-rotate(0deg);
}
.login_filter_error{
    filter: hue-rotate(-120deg);
}

.effect-particulas1 {
    opacity: 0;
    animation: subirESumir 2s linear  infinite; /* Repete infinitamente */
}
.effect-particulas2 {
    opacity: 0;
    animation: subirESumir 2s linear  infinite .5s; /* Repete infinitamente */
}
.effect-particulas3 {
    opacity: 0;
    animation: subirESumir 2s linear  infinite 1s; /* Repete infinitamente */
}
.porta-login{ 
    display: none;
    width: 100%;
    height: 100%;
    margin-top: -100vw;
    top: 0;   
    animation: loginSucess 1s ease-in-out  forwards;;
}
@keyframes loginSucess {
    0%{
         margin-top: -100vw;
    }
    100%{
         margin-top: 0px;         
    }
}
@keyframes trigger {
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}
@keyframes subirESumir {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    5%{
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-50vh);
    }
}
.login_effect2{
    animation: luzlaser 3s linear  infinite; /* Repete infinitamente */
}
.login_traje{
    animation: traje 3s linear  infinite ;
}
@keyframes traje {
    0% {
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    10%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

@keyframes luzlaser {
    0% {
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


.login_box_form{
    width: 800px;
}
.login-form{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.login-company-logo{
    width: 100%;
    display: flex;
    justify-content: center;
}
.login-company-logo img{
    width: 200px;
}
.form-control{
    background-color:transparent;
    color: #fff;
}
input.form-control:focus, textarea:focus,select:focus{
    border-color: #00bc81 !important;
    --tw-ring-shadow: #00bc81 !important;
}
/*************************************************************/
/* Estilo para a borda do foco da selectpicker */
.btn-default.active, .btn-default.active.focus,
.btn-default.active:focus, .btn-default.active:hover,
.btn-default.focus:active, .btn-default:active,
.btn-default:active:focus, .btn-default:active:hover,
.open>.dropdown-toggle.btn-default,
.open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover{
    border-color: #00bc81 !important;/* Substitua #ff0000 pela cor desejada */
    --tw-ring-shadow:#00bc81 !important;

}
.dataTables_length select{
    background: #272727 !important;
}

.announcement small {
    color: rgb(71 85 105/var(--tw-text-opacity));
}
.close {
    color: #fff;
    opacity: 1;
}
.alert-dismissable .close, .alert-dismissible .close {
    color: #fff;
    opacity: 1 !important;
}
.text-info{
    color: #fff;
}

/*************** TICKETS ***************/

.link-ticket a {
    color: rgb(161 98 7/var(--tw-text-opacity));
}
.client-reply,.client-reply a {
    color: #000;
}    
.panel_s .panel-footer{
    color: #000;
}

@media (max-width: 768px){
    ul.mobile-icon-menu > li > a span {
        padding: 0 3px 0 3px;
        color: #0000;
        background: transparent;
    }
    ul.mobile-icon-menu > li > a span svg {
        color: #000;
    }
    body.page-small #menu {
        margin-left: -300px;
    }

}
@media (max-width: 768px){
    .login_imagem{
        display: none;
    }
    .porta-login{
        width: 100vw;
        height: 100vh;
    }
}