/* ==========================================================
   ASSECTRA APP THEME
   Versão 1.0
   ========================================================== */

:root{

    /* ===========================================
    IDENTIDADE ASSECTRA
    =========================================== */

    --customer-blue: #211551 !important;
    --customer-blue-hover: #2D1B73 !important;
    --customer-blue-light: #F4F2FB !important;

    --customer-white: #FFFFFF !important;

    --customer-gray: #F5F7FA !important;
    --customer-gray-dark: #6C757D !important;

    --customer-success: #28A745 !important;
    --customer-warning: #FFC107 !important;
    --customer-danger: #DC3545 !important;

    --default-color: #2F3542 !important;

    --background-default-color: #F5F7FA !important;

    --border-color: #E4E8EF !important;

    --box-shadow: 0 6px 18px rgba(33,21,81,.10) !important;
    --box-shadow-hover: 0 12px 30px rgba(33,21,81,.18) !important;

    --border-radius: 14px !important;

}


/* ==========================================================
   GERAL
   ========================================================== */

html,
body{
    background: var(--background) !important;
    color: var(--text) !important;
    font-family: Roboto, Arial, sans-serif !important;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

md-toolbar{
    background: var(--primary) !important;
    color:#FFF !important;
    box-shadow: var(--shadow) !important;
}

.md-toolbar-tools{
    color:#FFF !important;
}

md-toolbar,
.md-toolbar-tools,
.md-toolbar-tools:not(.md-menu-toolbar){

    background:#211551 !important;
    background-color:#211551 !important;
    color:#FFF !important;

}

md-toolbar h2,
.md-toolbar-tools h2{

    color:#FFF !important;

}

md-toolbar .fa,
.md-toolbar-tools .fa{

    color:#FFF !important;

}

/* ==========================================================
   MENU DROPDOWN
   ========================================================== */

.dropdown-menu > li > a{

    color:#FFFFFF !important;

    background:transparent !important;

}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus{

    background:#2D1B73 !important;

    color:#FFFFFF !important;

}

.dropdown-menu > li > a:hover i,
.dropdown-menu > li > a:focus i{

    color:#FFFFFF !important;

}

/* ==========================================================
   MENU SUPERIOR / LATERAL
   ========================================================== */

.navbar a,
.navbar-nav a,
.navbar-nav > li > a{

    color:#FFF !important;

}

.navbar a:hover,
.navbar-nav a:hover,
.navbar-nav > li > a:hover{

    color:#FFF !important;

    background:rgba(255,255,255,.10) !important;

}

/* ==========================================================
   DIALOG
   ========================================================== */

md-dialog{
    border-radius:16px !important;
    overflow:hidden !important;
    box-shadow:0 12px 40px rgba(0,0,0,.25)!important;
}


/* ==========================================================
   BOTÕES
   ========================================================== */

.btn{
    border-radius:10px !important;
    transition:.25s !important;
}

.btn:hover{
    transform:translateY(-2px)!important;
}

.btn-custom,
.btn-primary,
.md-button.md-primary{

    background:var(--primary)!important;
    border:none!important;
}

.btn-custom:hover,
.btn-primary:hover,
.md-button.md-primary:hover{

    background:var(--primary-hover)!important;
}


/* ==========================================================
   BOTÃO SECUNDÁRIO
   ========================================================== */

.btn-default{

    background:#ECECF3!important;
    border:none!important;
}

/* ==========================================================
   BOTÕES PESQUISAR
   ========================================================== */

.btn-success,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success{

    background:#211551 !important;
    border-color:#211551 !important;
    color:#FFF !important;

}

.btn-success:hover{

    background:#2D1B73 !important;
    border-color:#2D1B73 !important;
    color:#FFF !important;

}

/* ==========================================================
   INPUT
   ========================================================== */

input,
select,
textarea{

    border-radius:10px!important;
    border:1px solid var(--border)!important;
}

input:focus,
select:focus,
textarea:focus{

    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px rgba(33,21,81,.15)!important;
}


/* ==========================================================
   CARDS
   ========================================================== */

.card,
.menu-card{

    background:#FFF!important;

    border-radius:16px!important;

    border:none!important;

    box-shadow:var(--shadow)!important;

    transition:.25s!important;
}

.card:hover,
.menu-card:hover{

    transform:translateY(-4px)!important;

    box-shadow:var(--shadow-hover)!important;
}


/* ==========================================================
   ÍCONES
   ========================================================== */

.fa{

    color:var(--primary)!important;
}

.menu-card .fa{

    font-size:58px!important;
}

.fa-times{

    color:#FFF!important;
}


/* ==========================================================
   RADIO BUTTON
   ========================================================== */

input[type=radio]{

    accent-color:var(--primary)!important;
}


/* ==========================================================
   LINKS
   ========================================================== */

a{

    color:var(--primary)!important;
}

a:hover{

    color:var(--primary-hover)!important;
}


/* ==========================================================
   PAINÉIS / CARDS
   ========================================================== */

.panel{

    border: none !important;

    border-radius: 18px !important;

    overflow: hidden !important;

    background: #FFF !important;

    box-shadow: 0 6px 18px rgba(33,21,81,.10) !important;

    transition: all .25s ease !important;

}

.panel:hover{

    transform: translateY(-4px);

    box-shadow: 0 12px 28px rgba(33,21,81,.18) !important;

}

.panel > .panel-body{

    border: none !important;

    border-radius: 18px !important;

    background: #FFF !important;

    padding: 25px 20px !important;

}

.panel a{

    text-decoration: none !important;

    color: inherit !important;

}


/* ==========================================================
   QR CODE
   ========================================================== */

#reader{

    border-radius:16px!important;

    overflow:hidden!important;

    border:3px solid var(--primary)!important;

    box-shadow:var(--shadow)!important;

    width: 600px !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ==========================================================
   VISITANTES
   ========================================================== */

md-dialog .panel{

    border:none !important;
    border-radius:14px !important;
    box-shadow:0 6px 18px rgba(33,21,81,.10)!important;

}

md-dialog .panel-heading{

    background:#211551 !important;
    color:#FFF !important;
    border:none !important;

}

md-dialog .panel-heading h4{

    color:#FFF !important;
    font-weight:600 !important;

}

md-dialog .form-control{

    height:42px !important;
    border-radius:10px !important;
    border:1px solid #D8DDEA !important;
    box-shadow:none !important;

}

md-dialog .form-control:focus{

    border-color:#211551 !important;
    box-shadow:0 0 0 3px rgba(33,21,81,.12)!important;

}

md-dialog label{

    color:#211551 !important;
    font-weight:600 !important;

}

/* ==========================================================
   CAMPOS OBRIGATÓRIOS
   ========================================================== */

.required-star{

    color:#DC3545 !important;

    font-weight:700 !important;

    font-size:16px !important;

    margin-left:2px;

}