﻿@import url('../vendors/google-fonts/google-fonts.css?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700');
@import url('../vendors/bootstrap-icons/font/bootstrap-icons.min.css?v=1.11.3');
:root {
    --bs-breadcrumb-divider: '»';
    --pwa-bg-blue: #0b4269;
    --pwa-color-blue: #0b4269;
}
html, body {
    height: 100%;
    width: 100%;
}
body {
    background-color: #F0F0F5;
    background-image: url(../img/logo-lg.png?v=202410011723);
    background-repeat: no-repeat;
    background-position: 20px 98%;
    font-family: 'Barlow', sans-serif;
    overflow-y: scroll !important;
}
h1, h2, h3, h4, h5, h6 { font-weight: 300 !important }
header {
    background: #FFFFFF;
    border-bottom: 0px;
    width: 100%;
    height: 48px !important;
    position: fixed;
    top: 0px;
    z-index: 999; 
    box-shadow: 0 .10rem .45rem rgba(0, 0, 0, .03) !important;
}
header nav {
    width: 100%;
    height: 48px;
}
nav #toogle-aside:hover,
nav #toogle-aside.active { background-color:rgba(0, 0, 0, 0.04) }
aside {
    background: #FFF;
    border-top: 1px solid #EEE;
    border-right: 1px solid #EEE;
    width: 320px;
    height: 100%;
    position: fixed;
    top: 48px;
    left: 0px;
    bottom: 0px;
    margin-left: -640px;
    z-index: 1020;
    transition: all 0.3s;
    box-shadow: 0 .10rem .45rem rgba(0, 0, 0, .03) !important;
    
}
aside.toggled { margin-left: 0px !important; }
main {
    padding: 75px 15px 25px 15px;
    margin: 0px;
    transition: all 0.3s;
}
/* BS Custom */
.is-invalid, .form-control:invalid {
    background-image: none !important;
    padding-right: 1rem !important;
}
.form-control:focus {
    border-color: var(--pwa-bg-blue);
    box-shadow: none !important;
}
.dropdown-menu {
    background-color: #fff;
    --bs-dropdown-min-width: 12rem;
    --bs-dropdown-padding-x: .25rem;
    --bs-dropdown-padding-y: .25rem;
    --bs-dropdown-font-size: .875rem;
    font-size: .875rem;
    border-radius: .5rem;
    box-shadow: var(--bs-box-shadow);
    --bs-dropdown-link-hover-bg: var(--pwa-bg-blue);
}
.dropdown-item { 
    color: rgb(var(--bs-dark-rgb));
    border-radius: 0.25rem;
}
.dropdown-item.active, .dropdown-item:active { background-color: var(--pwa-bg-blue) }
.modal-fullscreen .modal-header .btn-close { padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * 1.3) !important }
.btn-secondary {
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--pwa-bg-blue);
    --bs-btn-active-border-color: var(--pwa-bg-blue);
}
.btn-secondary:hover {
    background-color: var(--pwa-bg-blue);
    color: #fff;
}
.btn-outline-secondary:hover {
    background-color: var(--pwa-bg-blue);
    color: #fff;
}
/* .dropdown-item:hover { background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important; } */
.card { border-radius: .5rem; }
.breadcrumb-item { font-size: 11px; padding: 0; }
.breadcrumb-item+.breadcrumb-item::before { padding-right: var(--bs-breadcrumb-item-padding-x); }
.table > :not(caption) > * > * { padding: 0.5rem 1rem !important }
.table-danger {
    border-color: #dee2e6 !important;
    --bs-table-bg: #fff !important;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.07) !important;
}
.table-danger > td { color: #dc3545 !important }
thead th {
    text-transform: none;
    padding: 0.5rem 1rem !important;
}
.toast-container > :not(:last-child) { margin-bottom: 0.5rem !important }
.text-bg-primary { background-color: var(--pwa-bg-blue) !important }
.input-group .dselect-wrapper > button {
    border: 0 !important;
    font-weight: 500;
    background: none !important;
    padding-right: 12px !important;
    box-shadow: none !important;
}
.text-primary { color: var(--pwa-color-blue) !important; }
.fs-7 { font-size: 0.8rem!important }
.form-control-icon { position: relative }
.form-control-icon .form-control { padding-left: 2.0rem !important }
.form-control-icon .form-control + i.form-control-icon-left {
    position: absolute !important;
    top: 0.65rem !important;
    left: 0.60rem !important;
}
.table-search { padding: 0.3em 0 !important }
.table-search input {
    background: #fff;
    border: 0 !important;
    border-radius: 0 !important;
    padding-right: 0.5em !important;
    padding-left: 0.5em !important;
    box-shadow: none !important;
}
.left-menu { 
    display: flex;
    flex-direction: column;
}
.left-menu li {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}
.left-menu li + li { margin-top: 5px }
.left-menu li:first-child { margin-top: 5px }
.left-menu li:last-child { margin-bottom: 5px }
.left-menu a {
    display: block;
    position: relative;
    padding: 8px 14px 0px 14px;
    outline: 0;
    text-decoration: none;
}
.left-menu a i {
    font-size:1rem !important;
    padding-right:8px !important;
}
.left-menu ul a { padding: 8px 0px 8px 0px }
.left-menu a { color: var(--bs-dark); }
.left-menu a:hover,
.left-menu a:focus,
.left-menu a:active { color: var(--pwa-color-blue) }
.left-menu li.mm-active > a { color: var(--pwa-color-blue) }
.loading-overlay {
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000 !important;
}
.loading {
    background: transparent url(../img/Ripple-1s-80px_v2.png) no-repeat center center;
    height: 80px;
    width: 80px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -40px;
    z-index: 2001 !important;
    opacity: 1;
    opacity: 0.9;
    display: none;
}
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    .border-sm-end-0 { border-right-width: 0px !important }
}
@media (min-width: 576px) { }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { }
/* X-Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) { }
/* XX-Large devices (larger desktops, 1400px and up) */ 
@media (min-width: 1400px) { }