body { color: #FFF; padding: 0 0 60px; font-family: 'Poppins', sans-serif; background: #1E1D2A; }
h1 { font-size: 28px; font-weight: 500; }
h2 { font-size: 23px; font-weight: 500; }
h3 { font-size: 18px; font-weight: 500; }

.bg-success { background: #00B989 !important; }
.bg-primary { background: #1b3439 !important; }
.bg-secondary { background: #352638 !important; }
.btn-primary { font-size: 13px; background: #00B989; background-image: linear-gradient(125deg, #00DBA2 0%, #00B989 100%, #00B888 100%); border-radius: 100px; border: none; transition: .4s ease-in-out; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-image: linear-gradient(125deg, #00FFB7 0%, #00B989 100%, #00B888 100%); box-shadow: 0px 0px 14px #1FB899; }
.btn-secondary { font-size: 13px; background: #272637; border: 1px solid #323046; border-radius: 100px; transition: .4s ease-out; }
.btn-secondary:hover { background: #323046; border: 1px solid #393750; }
.btn-secondary .fa,
.btn-secondary .fas { color: #FD71AF; }
.btn-secondary svg { fill: #FD71AF; }
.btn-simple { padding: 13px 30px; font-size: 13px; color: #FFF; background: #00B888; border: none; border-radius: 5px; text-align: center; }
.btn-simple:hover { color: #FFF; box-shadow: 0px 0px 14px #1FB899; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 45px; min-width: 45px; }
.btn-has-label .fas { margin-right: 9px; }
.btn-outline-secondary { color: #FD71AF; border-color: #FD71AF; }
.btn-outline-secondary:hover { color: #FD71AF; background-color: #322436; border-color: #FD71AF; }
.btn-check:active + .btn-outline-secondary,
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active { color: #FFF; background-color: #FD71AF; }
.alert .btn-close { margin-top: -5px; font-size: 16px; background: transparent; }
.alert-success { border-color: #18715f; background-color: #1b3439; }
.alert-success,
.alert-success .btn-close { color: #00FFB7; }
.alert-danger { border-color: #6e3b43; background-color: #342531; }
.alert-danger,
.alert-danger .btn-close { color: #F46E6E; }
.alert-warning { border-color: #725d1a; background-color: #352e26; }
.alert-warning,
.alert-warning .btn-close { color: #FFC800; }
.list-group { border-radius: 0; }
.list-group-item { padding-top: 9px; padding-bottom: 9px; color: #FFF; background: transparent; border: none; border-bottom: 1px solid #323046; }
.list-group-item .badge { padding: 1em; font-size: 1em; font-weight: 500; min-width: 61px; }
.list-group-item .badge.bg-primary { border: 1px solid #18715f; }
.list-group-item .badge.bg-secondary { border: 1px solid #713D5C; }
.list-group-item.active { background: #FD71AF; border-color: #FD71AF; }
.list-group-item-action:focus, .list-group-item-action:hover { color: #FFF; background-color: #322436; border-color: #FD71AF; }
.text-muted { color: #A2A0B9 !important; }
.dropdown-menu { padding: 10px; background: #272637; border: 1px solid #323046; border-radius: 4px; }
.dropdown-item { color: #FFF; }
.dropdown-item:focus, .dropdown-item:hover { color: #FFF; background: #323046; }

.wrapper { display: flex; }
.sidebar { position: fixed; z-index: 999; top: 0; left: 0; overflow: hidden; display: block; flex: 0 0 186px; width: 186px; height: 100vh; background: #DE163A; background: transparent linear-gradient(180deg, #DE163A 0%, #CE0373 100%); border-radius: 0px 15px 15px 0px; transition: .2s ease-out; }
.logo { display: block; margin: 20px auto; width: 34px; height: 34px; }
.logo svg { display: block; width: 100%; height: 100%; }
.nav { overflow-x: auto; display: block; margin: 15px 0; max-height: 5500px; }
.nav a { position: relative; display: flex; align-items: center; padding: 0 30px; width: 100%; height: 46px; color: #F9D7DF; text-decoration: none; background: transparent linear-gradient(145deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%); transition: .2s ease-out; }
.nav a svg { opacity: .62; display: inline-block; margin-right: 11px; width: 16px; height: 16px; transition: .4s ease-out; }
.nav a:hover { color: #FFF; background: transparent linear-gradient(145deg, rgba(255,255,255,.23) 0%, rgba(255,255,255,.01) 100%); }
.nav a:hover svg,
.nav a.active svg { opacity: 1; }
.nav a.active { color: #FFF; }
.nav a.active::before { position: absolute; top: 50%; left: 14px; content: " "; margin-top: -3px; width: 6px; height: 6px; background: #FFF; border-radius: 100px; }
.logout { position: absolute; left: 50%; bottom: 12px; display: flex; align-items: center; justify-content: center; margin-left: -10px; width: 20px; height: 20px; font-size: 12px; color: #FFF; text-decoration: none; background: rgba(0,0,0,.26); border-radius: 100px; transition: .4s ease-out; }
.logout span { display: none; }
.logout:hover { opacity: .5; color: #FFF; }
.main-panel { display: block; overflow: hidden; width: 100%; }
.page-header { position: fixed; top: 0; left: 0; z-index: 9; display: flex; align-items: center; padding-left: 186px; width: 100%; height: 106px; border-bottom: 1px solid #323046; transition: .4s ease-out; }
.page-header::after { opacity: .95; content: " "; position: absolute; z-index: 99; width: 100%; height: 100%; background: #1E1D2A; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.page-title { position: relative; z-index: 999; margin: 0; padding: 0 30px; font-size: 28px; color: #FFF; line-height: 32px; }
.navbar { position: relative; z-index: 999; display: flex; padding: 0; width: 100%; }
.navbar .btn { display: flex; align-items: center; justify-content: center; height: 45px; min-width: 45px; }
.navbar-nav { flex-direction: row; align-items: center; justify-content: flex-end; padding: 0 30px; width: 100%; }
.navbar-nav > .nav-item { margin: 0 11.5px; }
.navbar-nav > .nav-item .bullet { margin-top: -4px; }
.navbar-nav > .nav-item:last-child { margin-right: 0; }
.navbar-nav .btn-search svg { width: 18px; height: 18px; }
.navbar-nav .dropdown-menu { position: absolute; }
.navbar-nav .dropdown-toggle::after { display: none; } 
.navbar-nav .btn-add { display: flex; align-items: center; justify-content: center; width: 39px; height: 39px; }
.navbar-nav .btn-add span { display: none; }
.navbar-nav .user-photo { display: block; width: 39px; height: 39px; }
.content { position: relative; z-index: 1; display: flex; margin: 0 30px; padding: 106px 250px 0 186px; }
.content > .row { width: 100%; }

.menu-mini .sidebar { width: 75px; }
.menu-mini .nav a svg { margin: 0; }
.menu-mini .nav a span { display: none; }
.menu-mini .page-header { padding-left: 75px; }
.menu-mini .content { padding-left: 76px; }

.navbar-table { position: fixed; z-index: 9999; top: 30px; right: 300px; }
table.dataTable { margin-bottom: 60px !important; border-collapse: collapse !important; }
table.dataTable th { font-size: 14px; font-weight: 600; color: #A2A0B9; }
table.dataTable > :not(caption) > * > * { border: none; }
table.dataTable > tbody > tr.odd { background: #272637; border: 1px solid #323046; border-radius: 4px; }
table.dataTable > tbody > tr.odd,
table.dataTable > tbody > tr.even  { font-size: 13px; line-height: 14px; }
table.dataTable > tbody > tr:nth-of-type(2n+1) > *,
table.dataTable > tbody > tr > * { padding: 18px; color: #FFF; }
table.dataTable > tbody > tr > td > a { color: #A2A0B9 }
table.dataTable > tbody > tr.selected { background: #323046; border: 1px solid #323046; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {    
    top: 16%;
    right: 1em;
    font-family: "Font Awesome 5 Free";
    font-size: 11px;
    content: "\f106" !important;
    color: #FD71AF;
}
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
    bottom: 16%; 
    right: 1em;
    font-family: "Font Awesome 5 Free";
    font-size: 11px;
    content: "\f107" !important;
    color: #FD71AF;
}
.dataTables_info { font-size: 14px; color: #A2A0B9 }
.dataTables_info span { color: #FFF; }
.dataTables_paginate .page-link,
.dataTables_paginate .page-item.disabled .page-link,
.dataTables_paginate .page-item.active .page-link { font-size: 14px; font-weight: 600; background: transparent; border: none; }
.dataTables_paginate .page-item.disabled .page-link { opacity: .5; }
.dataTables_paginate .page-item.active .page-link { color: #FD71AF; }
.widgets { position: fixed; right: 30px; width: 250px; margin-left: 30px; }
.widgets .card { margin-bottom: 32px; padding: 10px 10px 34px; background: #272637; border: 1px solid #323046; border-radius: 4px; }
.widgets .card h3 { padding: 13px 20px; color: #FFF; }
.widgets .card:last-child { margin-bottom: 0; }
.activities { display: block; overflow-x: auto; list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; max-height: calc(100vh - 530px); }
.activity { display: flex; padding: 12px; width: 100%; font-size: 13px; border-bottom: 1px solid #323046; }
.activity:last-child { border: none; }
.activity-image { display: block; width: 33px; height: 33px; margin-right: 9px; }
.activity-image img { display: block; width: 100%; height: auto; }
.activity-description { display: table; margin: 10px 0; padding: 5px 10px; font-size: 12px; background: rgba(255,255,255,.1); border-radius: 100px; }
.apps { list-style: none; display: flex; flex-wrap: wrap; margin: 0 20px; padding: 0; }
.apps > li { display: block; margin: 14px; }
.apps li:nth-child(3n) { margin-right: 0; }
.apps li:nth-child(3n+1) { margin-left: 0; }
.apps li:first-child { margin-right: 14px; }
.app-icon { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; background-color: rgba(0,0,0,.14); border-radius: 12px; }
.app-icon img { display: block; width: 100%; height: auto; max-width: 24px; max-height: 24px; }
.modal-backdrop { background: #1E1D2A; }
.modal-backdrop.show { opacity: .98; }
.modal-dialog { max-width: 920px; }
.modal-header { display: block; padding: 37.5px 30px 30px; border-color: #323046; }
.modal-header p { margin: 0; font-size: 15px; }
.modal-close { position: absolute; top: 30px; right: 30px; display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; }
.modal-close svg { width: 20px; height: 20px; }
.modal-close,
.modal-close:hover { font-size: 18px; color: #FD71AF; }
.modal-title { font-weight: 600; color: #FFF; }
.modal-body { padding: 30px; padding-bottom: 0; font-size: 14px; }
.modal-content { color: #A2A0B9; background: #1A1925; }
.modal-content .btn-group { margin: 30px 0; }
.modal-content .btn-group svg { display: inline-block; margin-right: 18px; width: 25px; height: 25px; }
.modal-content .btn-group .btn { margin-right: 20px; padding: 22px 30px; color: #FFF; background: #222130; border: 1px solid #323046; border-radius: 4px; }
.modal-content .btn-group .btn-check:active + .btn,
.modal-content .btn-group .btn-check:checked + .btn { background: #16292E; border: 1px solid #035E51; border-radius: 6px; }
.modal-content .btn-group .btn-check:active + .btn svg,
.modal-content .btn-group .btn-check:active + .btn svg path,
.modal-content .btn-group .btn-check:checked + .btn svg,
.modal-content .btn-group .btn-check:checked + .btn svg path { fill: #00FFB7; }
.modal-content .input-group svg { width: 14px; height: 14px; }
.modal-content .input-group .input-group-text { padding-left: 0; background: transparent; border: none; }
.modal-content .form-group { padding: 10px 0; }
.modal-content .form-select { max-width: 300px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FD71AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.modal-content .form-select option,
.modal-content .form-select optgroup { margin: 0; background: #1A1925; }
.modal-content .form-select,
.modal-content .form-control { padding-left: 0; padding-right: 0; color: #FFF; background-color: transparent; border: 0px solid #1A1925; border-radius: 0; transition: .4s; }
.modal-content .form-control:focus { border-bottom: 1px solid #323046; box-shadow: none; }
.modal-footer { padding: 30px; justify-content: unset; border: none; }
.modal-footer .btn { margin: 0; }
.modal.modal-right { transition: opacity .15s linear; }
.modal.modal-right .modal-dialog { margin-top: 106px; margin-bottom: 0; margin-right: 0; transform: translate(50px, 0); transition: transform .15s linear; }
.modal.modal-right.show .modal-dialog { transform: none; }
.modal.modal-right:not(.show) { opacity: 0; }
.datepicker td, .datepicker th { width: 30px; height: 30px; color: #FFF; }
.datepicker .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover, .datepicker tfoot tr th:hover,
.datepicker table tr td span.focused, .datepicker table tr td span:hover,
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover { background: #1A1925; border-radius: 6px; }
.datepicker-dropdown.datepicker-orient-top::before { border: none; }
.datepicker-dropdown.datepicker-orient-top::after { border-top-color: #272637; }
.datepicker-dropdown::after { border-bottom-color: #272637; }
.datepicker table tr td.active.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active:active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover:active { color: #1A1925; background: #FFF; }