/*!
 * Stisla v2.2.0 - Minimal CSS for PilarPOS
 */

:root {
    --primary: #6777ef;
    --secondary: #cdd3d8;
    --success: #47c363;
    --info: #3abaf4;
    --warning: #ffc107;
    --danger: #fc544b;
    --light: #e3eaef;
    --dark: #191d21;
}

body {
    background-color: #e2e8f0;
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    font-size: 14px;
}

a { color: #6777ef; }
a:hover { color: #394eea; }

/* Main Wrapper */
.main-wrapper { }
.main-wrapper .main-content { padding: 30px; padding-top: 80px; min-height: 100vh; margin-left: 250px; }

/* Navbar */
.navbar { height: 70px; background-color: #6777ef; left: 0; right: 0; position: fixed; z-index: 890; }
.navbar .nav-link { color: rgba(255,255,255,.8) !important; padding: 0 15px; height: 70px; line-height: 70px; }
.navbar .nav-link:hover { color: #fff !important; }
.navbar .dropdown-menu { border: none; box-shadow: 0 0 30px rgba(0,0,0,.1); }
.navbar .dropdown-item { font-size: 13px; padding: 8px 20px; }
.nav-link-user img { border: 2px solid rgba(255,255,255,.5); }
.dropdown-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #98a6ad; padding: 10px 20px; font-weight: 700; }

/* Sidebar */
.main-sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 250px; z-index: 880; overflow-y: auto; background-color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.03); }
.main-sidebar .sidebar-brand { display: flex; align-items: center; justify-content: center; height: 70px; background-color: #fff; }
.main-sidebar .sidebar-brand a { font-size: 20px; font-weight: 700; color: #6777ef; text-decoration: none; }
.main-sidebar .sidebar-brand-sm { display: none; }

.sidebar-menu { padding: 0; margin: 0; list-style: none; }
.sidebar-menu li { display: block; }
.sidebar-menu li.menu-header { padding: 15px 25px 8px; color: #98a6ad; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.sidebar-menu li a { display: flex; align-items: center; padding: 10px 25px; color: #34395e; text-decoration: none; transition: all .3s; }
.sidebar-menu li a i { width: 28px; font-size: 16px; margin-right: 10px; text-align: center; color: #98a6ad; }
.sidebar-menu li a:hover { background-color: #fcfcfd; color: #6777ef; }
.sidebar-menu li a:hover i { color: #6777ef; }
.sidebar-menu li.active > a { background-color: #f2f4ff; color: #6777ef; font-weight: 600; }
.sidebar-menu li.active > a i { color: #6777ef; }

/* Dropdown in sidebar */
.sidebar-menu li.dropdown .dropdown-menu { display: none; list-style: none; padding: 0; background: #fcfcfd; position: static; float: none; box-shadow: none; border: none; }
.sidebar-menu li.dropdown.active .dropdown-menu { display: block; }
.sidebar-menu li.dropdown .dropdown-menu li a { padding: 8px 25px 8px 60px; font-size: 13px; }
.sidebar-menu li a.has-dropdown::after { content: '\f107'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: 25px; }
.sidebar-menu li a { position: relative; }

/* Content */
.main-content { margin-left: 250px; }
.section .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 0 20px; border-bottom: 1px solid #f2f2f2; margin-bottom: 25px; }
.section .section-header h1 { font-size: 18px; font-weight: 700; color: #34395e; margin: 0; }
.section-header-breadcrumb { display: flex; align-items: center; }
.breadcrumb-item { font-size: 12px; }
.breadcrumb-item + .breadcrumb-item::before { content: '/'; padding: 0 8px; color: #ccc; }

/* Cards */
.card { background: #fff; border-radius: 3px; border: none; box-shadow: 0 4px 8px rgba(0,0,0,.03); margin-bottom: 25px; }
.card .card-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #f9f9f9; padding: 15px 25px; }
.card .card-header h4 { font-size: 14px; font-weight: 700; margin: 0; }
.card .card-body { padding: 25px; }
.card .card-footer { padding: 15px 25px; background-color: #fff; border-top: 1px solid #f9f9f9; }

.card-primary { border-top: 2px solid #6777ef; }

/* Statistic Card */
.card-statistic-1 { display: flex; position: relative; }
.card-statistic-1 .card-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 3px 0 0 3px; font-size: 22px; color: #fff; }
.card-statistic-1 .card-wrap { flex: 1; padding: 15px; }
.card-statistic-1 .card-header { padding: 0; border: none; }
.card-statistic-1 .card-header h4 { font-size: 11px; color: #98a6ad; text-transform: uppercase; letter-spacing: .5px; }
.card-statistic-1 .card-body { padding: 0; font-size: 20px; font-weight: 700; color: #34395e; }

/* Badges */
.badge { padding: 5px 10px; font-size: 11px; font-weight: 600; border-radius: 3px; letter-spacing: .5px; }
.badge-success { background-color: #47c363; }
.badge-warning { background-color: #ffc107; color: #000; }
.badge-danger { background-color: #fc544b; }
.badge-info { background-color: #3abaf4; }
.badge-secondary { background-color: #cdd3d8; color: #000; }

/* Buttons */
.btn { font-size: 13px; font-weight: 600; border-radius: 3px; padding: 8px 20px; letter-spacing: .5px; }
.btn-primary { background-color: #6777ef; border-color: #6777ef; }
.btn-primary:hover { background-color: #394eea; border-color: #394eea; }
.btn-icon { padding: 6px 10px; }
.btn-icon i { margin: 0; }

/* Forms */
.form-control { border-radius: 3px; border-color: #e4e6fc; font-size: 13px; padding: 8px 15px; height: auto; }
.form-control:focus { border-color: #6777ef; box-shadow: 0 0 0 .2rem rgba(103,119,239,.25); }
.form-group label { font-weight: 600; font-size: 12px; color: #34395e; letter-spacing: .5px; }
.form-group .form-text { font-size: 12px; }

.select2-container--default .select2-selection--single { border-color: #e4e6fc !important; height: 42px !important; padding: 6px; }

/* Tables */
.table thead th { border-top: none; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #98a6ad; font-weight: 700; }
.table td { font-size: 13px; vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.02); }

/* Footer */
.main-footer { display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; margin-left: 0; border-top: 1px solid #e4e6fc; color: #98a6ad; font-size: 12px; }

/* Alerts */
.alert { border-radius: 3px; font-size: 13px; }

/* Modal */
.modal-content { border: none; box-shadow: 0 5px 25px rgba(0,0,0,.1); border-radius: 3px; }
.modal-header { border-bottom: 1px solid #f9f9f9; }
.modal-footer { border-top: 1px solid #f9f9f9; }

/* Login Brand */
.login-brand { text-align: center; margin-bottom: 20px; }
.login-brand h3 { font-weight: 700; color: #6777ef; }

/* Simple Footer */
.simple-footer { text-align: center; margin-top: 20px; font-size: 12px; }

/* Utilities */
.text-primary { color: #6777ef !important; }
.bg-primary { background-color: #6777ef !important; }
.bg-success { background-color: #47c363 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-danger { background-color: #fc544b !important; }
.bg-info { background-color: #3abaf4 !important; }

/* Media list */
.list-unstyled-border li { padding: 15px 0; border-bottom: 1px solid #f2f2f2; }
.list-unstyled-border li:last-child { border-bottom: none; }

/* Responsive */
@media (max-width: 1024px) {
    .main-sidebar { left: -250px; transition: left .3s; }
    .main-sidebar.toggled { left: 0; }
    .main-content, .main-footer { margin-left: 0; }
}