/*
|--------------------------------------------------------------------------
| FARMA TEAM
| Tema Oficial
|--------------------------------------------------------------------------
*/

:root{

    /* Cores Principais */

    --ft-red: #D71920;
    --ft-blue: #0099D8;
    --ft-dark-blue: #004B87;
    --ft-yellow: #FFD100;
    --ft-green: #28A745;

    /* Cinzas */

    --ft-white: #FFFFFF;
    --ft-light: #F4F6F9;
    --ft-gray: #6C757D;
    --ft-dark: #212529;

    /* Layout */

    --sidebar-width: 260px;

}

/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

body{
    background: var(--ft-light);
    font-family: 'Segoe UI', sans-serif;
    font-size:14px;
    color:var(--ft-dark);
}

/*
|--------------------------------------------------------------------------
| NAVBAR
|--------------------------------------------------------------------------
*/

.main-header{
    background: var(--ft-red) !important;
    border:none !important;
}

.main-header .nav-link{
    color:#fff !important;
}

/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.main-sidebar{
    background: var(--ft-dark-blue) !important;
}

.brand-link{
    background: var(--ft-dark-blue);
    color:#fff !important;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.brand-link:hover{
    color:#fff !important;
}

.brand-text{
    font-weight:700;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active{
    background: var(--ft-red) !important;
    color:#fff !important;
}

.nav-sidebar .nav-link{
    color:rgba(255,255,255,.85);
}

.nav-sidebar .nav-link:hover{
    background: rgba(255,255,255,.08);
}

.nav-sidebar .nav-icon{
    color:#fff;
}

/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.content-wrapper{
    background: var(--ft-light);
}

/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/

.card{
    border:none;
    border-radius:15px;
    box-shadow:0 0 15px rgba(0,0,0,.08);
}

.card-header{
    background:#fff;
    border-bottom:1px solid #eee;
}

.card-title{
    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| DASHBOARD CARDS
|--------------------------------------------------------------------------
*/

.small-box{
    border-radius:15px;
    overflow:hidden;
}

.border-online{
    border-left:5px solid var(--ft-green);
}

.border-chat{
    border-left:5px solid var(--ft-blue);
}

.border-ticket{
    border-left:5px solid var(--ft-yellow);
}

.border-warning{
    border-left:5px solid var(--ft-red);
}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

.btn-primary{
    background: var(--ft-red);
    border-color: var(--ft-red);
}

.btn-primary:hover{
    background:#b7141a;
    border-color:#b7141a;
}

.btn-info{
    background: var(--ft-blue);
    border-color: var(--ft-blue);
}

.btn-success{
    background: var(--ft-green);
    border-color: var(--ft-green);
}

/*
|--------------------------------------------------------------------------
| TABLES
|--------------------------------------------------------------------------
*/

.table thead{
    background: var(--ft-dark-blue);
    color:#fff;
}

.table-hover tbody tr:hover{
    background:#f5f5f5;
}

/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

.badge-online{
    background:var(--ft-green);
    color:#fff;
}

.badge-offline{
    background:#dc3545;
    color:#fff;
}

/*
|--------------------------------------------------------------------------
| LOGIN
|--------------------------------------------------------------------------
*/

.login-page{
    background:
    linear-gradient(
        135deg,
        var(--ft-dark-blue),
        var(--ft-blue)
    );
}

.login-box{
    width:420px;
}

.login-card-body{
    border-radius:20px;
}

.login-logo img{
    max-width:180px;
}

.login-logo{
    margin-bottom:20px;
}

/*
|--------------------------------------------------------------------------
| CHAT
|--------------------------------------------------------------------------
*/

.chat-container{
    height:calc(100vh - 180px);
}

.chat-sidebar{
    background:#fff;
    border-right:1px solid #ddd;
}

.chat-user{
    padding:12px;
    cursor:pointer;
    border-bottom:1px solid #eee;
}

.chat-user:hover{
    background:#f5f5f5;
}

.chat-user.active{
    background:#e8f5ff;
}

.chat-messages{
    background:#f8f9fa;
    padding:20px;
    overflow-y:auto;
}

.message-received{
    background:#fff;
    padding:10px 15px;
    border-radius:15px;
    max-width:70%;
    margin-bottom:10px;
}

.message-sent{
    background:#D9FDD3;
    padding:10px 15px;
    border-radius:15px;
    max-width:70%;
    margin-left:auto;
    margin-bottom:10px;
}

/*
|--------------------------------------------------------------------------
| COMUNICADOS
|--------------------------------------------------------------------------
*/

.comunicado-normal{
    border-left:5px solid var(--ft-blue);
}

.comunicado-importante{
    border-left:5px solid var(--ft-yellow);
}

.comunicado-urgente{
    border-left:5px solid var(--ft-red);
}

/*
|--------------------------------------------------------------------------
| CHAMADOS TI
|--------------------------------------------------------------------------
*/

.status-aberto{
    color:#dc3545;
    font-weight:bold;
}

.status-andamento{
    color:#ffc107;
    font-weight:bold;
}

.status-finalizado{
    color:#198754;
    font-weight:bold;
}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.main-footer{
    background:#fff;
    border-top:1px solid #ddd;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVO
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .login-box{
        width:95%;
    }

    .chat-container{
        height:auto;
    }

}