body {

    font-family: 'Inter', serif;

    font-feature-settings: 'cv01';

    font-feature-settings: 'cv02';

    font-feature-settings: 'cv03';

    font-feature-settings: 'cv04';

    font-feature-settings: 'cv09';

    font-feature-settings: 'cv11';

    background: #eff5ff;

    color: #233044;

}



button,

input,

optgroup,

select,

textarea {

    font-feature-settings: 'cv01';

    font-feature-settings: 'cv02';

    font-feature-settings: 'cv03';

    font-feature-settings: 'cv04';

    font-feature-settings: 'cv09';

    font-feature-settings: 'cv11';

}



a {

    color: #41a0fc;

    transition: .2s;

    text-decoration: none !important;

}



a:hover {

    color: rgb(72, 185, 241);

    text-decoration: none

}



a:focus-visible {

    outline: none;

}



input {

    background: rgb(249, 250, 251);

}



textarea {

    line-height: 1.4 !important;

}



.container-fluid {

    padding: 0 2rem;

}



.h1,

h1 {

    font-size: 2rem;

}



.h2,

h2 {

    font-size: 1.75rem;

}



.h3,

h3 {

    font-size: 1.5rem;

}



.h4,

h4 {

    font-size: 1.25rem;

}



.h5,

h5 {

    font-size: 1rem;

}



.h6,

h6 {

    font-size: .75rem;

}



/* Backgrounds */



.bg-primary {

    background: #41a0fc !important;

}



.bg-secondary {

    background: #233044 !important;

}



.bg-third {

    background: #716aca !important;

}



.bg-dark {

    background: #1f2a3b !important;

}



.bg-light {

    background: #e0e0e0 !important;

}



.bg-success {

    background: #35cd3a !important;

}



.bg-warning {

    background: #ffa534 !important;

}



.bg-danger {

    background: #f3545d !important;

}



/* Colors */



.primary {

    color: #41a0fc !important;

}



.secondary {

    color: #233044 !important;

}



.third {

    color: #716aca !important;

}



.dark {

    color: #1f2a3b !important;

}



.light {

    color: #e0e0e0 !important;

}



.success {

    color: #35cd3a !important;

}



.warning {

    color: #ff8e00 !important;

}



.danger {

    color: #f3545d !important;

}



.white {

    color: #fff !important;

}



/* Border */



.border-primary {

    border-color: #41a0fc !important;

}



.border-secondary {

    border-color: #233044 !important;

}



.border-third {

    border-color: #716aca !important;

}



.border-dark {

    border-color: #1f2a3b !important;

}



.border-light {

    border-color: #e0e0e0 !important;

}



.border-success {

    border-color: #35cd3a !important;

}



.border-warning {

    border-color: #ffa534 !important;

}



.border-danger {

    border-color: #f3545d !important;

}



/* Header */



.navbar {

    background: #fff;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    min-height: 60px;

    padding: 1rem;

    width: calc(100% - 300px);

    margin-left: 300px;

    transition: .2s;

}



.nav-sidebar-closed .navbar {

    width: 100% !important;

    margin-left: 0;

}



.navbar .navbar-nav .nav-link {

    color: #3b3b3b !important;

    padding: .25rem .75rem;

}



.navbar .navbar-nav .nav-text {

    line-height: 24px;

    font-size: 13px;

}



.navbar .navbar-nav .nav-link:hover {

    color: #5e5e5e !important;

}



.navbar .dropdown-toggle {

    font-size: 13px;

    transition: .2s;

}



.navbar .dropdown-toggle i {

    font-size: 16px;

    line-height: 20px;

}



.navbar .dropdown-toggle img {

    width: 24px;

    height: 24px;

    border-radius: 50%;

}



.navbar .dropdown-toggle::after {

    display: none;

}



.navbar .dropdown-menu {

    left: auto;

    padding: 0;

    border: 1px solid #eee;

    right: 0 !important;

    min-width: 200px;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    overflow: hidden;

}



.navbar .dropdown-menu a {

    display: block;

    border-bottom: 1px solid #ececec;

    font-size: 12px;

    color: #4f4f4f;

    padding: .75rem 1rem;

    transition: .2s;

    font-weight: 500;

}



.navbar .dropdown-menu a:last-child {

    border-bottom: 0;

}



.navbar .dropdown-menu a:hover {

    color: #41a0fc !important;

    background: #f8f8f8;

}



/* Sidebar */



.sidebar {

    display: flex;

    flex-direction: column;

    position: fixed !important;

    overflow: hidden;

    z-index: 1;

    top: 0;

    bottom: 0;

    left: 0;

    width: 300px;

    background: #1f2a3b;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    padding-top: 2rem;

    transition: .2s;

}



.sidebar-minimized {

    width: 0;

}



.sidebar .sidebar-inner {

    max-height: 100%;

    overflow-y: auto;

}



.sidebar .sidebar-inner .title {

    padding: 0 2rem;

    font-size: 12px;

    color: #ccc;

    text-transform: uppercase;

}



.sidebar .sidebar-inner .sidebar-menu {

    display: block;

}



.sidebar .sidebar-inner .sidebar-menu:last-of-type {

    margin-bottom: 0;

}



.sidebar .sidebar-inner .sidebar-menu ul {

    padding: 0 1.5rem;

    margin: 0;

}



.sidebar .sidebar-inner .sidebar-menu ul li {

    list-style-type: none;

    margin-top: .5rem;

}



.sidebar .sidebar-inner .sidebar-menu .opened {

    background: #233044;

    border-radius: 5px;

    overflow: hidden;

}



.sidebar .sidebar-inner .sidebar-menu .opened a {

    color: #5eb4ff;

}



.sidebar .sidebar-inner .sidebar-menu ul li a {

    display: flex;

    cursor: pointer;

    align-items: center;

    font-size: 14px;

    color: #fff;

    padding: .625rem 1rem;

    border-radius: 5px;

    white-space: nowrap;

}



.sidebar .sidebar-inner .sidebar-menu ul li a i {

    width: .75rem;

    margin-right: 1rem;

    text-align: center;

    color: #5eb4ff;

    font-size: 15px;

}



.sidebar .sidebar-inner .sidebar-menu ul li a span {

    transition: .1s;

    padding: 0;

    margin-left: auto;

    line-height: 22px;

}



.sidebar .sidebar-inner .sidebar-menu ul li a span i {

    margin-right: 0;

}



.sidebar .sidebar-inner .sidebar-menu ul li a:hover {

    background: #233044;

}



.sidebar .sidebar-inner .sidebar-menu ul li a:hover {

    color: #5eb4ff;

}



.sidebar .sidebar-inner .sidebar-menu .active a {

    background: #233044;

}



.sidebar .sidebar-inner .sidebar-menu .active a {

    color: #5eb4ff;

}



.sidebar .sidebar-inner .sidebar-menu ul li ul {

    display: none;

    background: #1b2535;

    margin-top: 0;

    padding: .75rem 0;

}



.sidebar .sidebar-inner .sidebar-menu ul li ul .sub-active a {

    color: #fff !important;

}



.sidebar .sidebar-inner .sidebar-menu .opened ul {

    display: block;

}



.sidebar-menu .opened a span {

    transform: rotate(90deg);

}



.sidebar .sidebar-inner .sidebar-menu ul li ul li {

    margin: 0;

}



.sidebar .sidebar-inner .sidebar-menu ul li ul li a {

    display: flex;

    align-items: center;

    font-size: 12px;

    color: #dadada !important;

    font-weight: 400;

    padding: .375rem .5rem;

    white-space: nowrap;

    margin: 0;

}



.sidebar .sidebar-inner .sidebar-menu ul li ul li a .dot {

    margin-right: 0;

    margin-left: 1rem;

}



.sidebar .sidebar-inner .sidebar-menu ul li ul li a .dot::before {

    content: "";

    width: 3px;

    height: 3px;

    display: block;

    border-radius: 50%;

    background: #fff;

    margin-top: 1px;

}



.sidebar .sidebar-inner .sidebar-menu ul li ul li a:hover {

    background: #1b2535;

    color: #fff !important;

}



.sidebar .sidebar-inner .sidebar-menu ul li ul li a:hover .dot::before {

    background: #fff;

}



.sidebar .sidebar-footer {

    display: flex;

    font-size: 12px;

    color: #ccc;

    background: #1b2535;

    padding: 1.5rem;

    margin-top: auto;

    border-radius: 5px;

    width: 300px;

}



.sidebar .sidebar-footer img {

    margin-right: .75rem;

    width: 32px;

    height: 32px;

    border-radius: 50%;

}



.sidebar .sidebar-footer h5 {

    color: #fff;

    font-size: 13px;

    margin-bottom: .25rem;

}



.sidebar .sidebar-footer .logout {

    color: #f3545d;

    font-size: 13px;

    margin-left: auto;

}



#sidebar-toggle {

    cursor: pointer;

    display: block;

    font-size: 16px;

    color: #3b3b3b;

    padding: .25rem .75rem .25rem 0;

    border-radius: 4px;

    transition: .2s;

}



#sidebar-toggle:hover {

    color: #5e5e5e;

}



.sidebar-brand {

    display: block;

    padding: 2rem;

    margin-bottom: 2rem;

}



.sidebar-brand img {

    width: 100px;

    height: auto;

}



/* Content */



.content {

    transition: .2s;

    margin: calc(60px + 4rem) 2rem 2rem calc(300px + 2rem);

    background-image: url('../img/vspares_icon.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}



.content-sidebar-minimized {

    margin-left: 2rem !important;

}



.inner-content {

    max-width: 1500px;

    margin: auto;

}



/* Boxes */



.box {

    background: #fff;

    box-shadow: rgba(50, 50, 93, 0.024) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 6px;

    padding: 1.5rem;

    font-size: 13px;

}



.box h2 {

    font-size: 16px;

    font-weight: 500;

    margin-bottom: .5rem;

}



.stats {

    background: #fff;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 6px;

    overflow: hidden;

    padding: 0 30px;

}



.stat-box {

    border-right: 1px solid #eeeeee;

    padding: 30px 0;

    gap: 1rem;

    line-height: 1;

}



.stat-box h2 {

    font-size: 16px;

    margin: 0;

}



.stat-box span {

    font-size: .625rem;

    color: #808080;

    text-transform: uppercase;

    letter-spacing: .0125rem;

}



.stat-box .icon {

    min-width: 3rem;

    height: 3rem;

    text-align: center;

    line-height: 3rem;

    border-radius: .25rem;

    font-size: 1rem;

    color: #fff;

}



.inner-stats {

    padding: 0 1.5rem;

    margin-top: 2rem;

    margin-bottom: 3rem;

}



.inner-stat {

    border-left: 2px solid;

    padding-left: .75rem;

}



.inner-stat h2 {

    margin-bottom: .25rem;

}



.inner-stat span {

    color: #979797;

}



.profile {

    background: #fff;

    box-shadow: rgba(50, 50, 93, 0.024) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 6px;

    overflow: hidden;

    padding: 0;

    margin: 0;

}



.profile-box {

    padding: 1.15rem;

    font-size: 12px;

    line-height: 1;

    border-bottom: 1px solid #f1f1f1;

}



.profile-box h2 {

    font-size: 16px;

    max-width: 250px;

}



.profile-box .pp {

    width: 50px;

    height: 50px;

    overflow: hidden;

    border-radius: 50%;

    cursor: pointer;

}



.profile-box img {

    width: 50px;

}



#ppModal img {

    max-width: 250px;

}



.report .small {

    opacity: 0;

}



.report:hover .small {

    opacity: 1;

}



/* Breadcrumb */

.breadcrumb {

    font-size: 12px;

    color: #646464;

    margin-bottom: 0 !important;

}



.breadcrumb a {

    font-size: 12px;

    color: #41a0fc;

}



.breadcrumb .separator {

    font-family: 'Feather', sans-serif !important;

}



.breadcrumb .separator::after {

    content: '\e844';

    font-size: 10px;

    margin: 0 0.2rem;

}



/* Forms */



.modal-label {

    margin-bottom: .5rem;

    margin-left: .05rem;

    font-weight: 500;

    color: #6c7a91;

    font-size: .625rem;

    text-transform: uppercase !important;

    margin-top: 1rem;

}



label {

    margin-bottom: .5rem;

    margin-left: .05rem;

    font-weight: 500;

    color: #6c7a91;

    font-size: .625rem;

    text-transform: uppercase !important;

}



label.required::after {

    content: '*';

    color: #f3545d;

}



input:disabled {

    cursor: not-allowed;

}



.input-text {

    display: block;

    width: 100%;

    background: #fff;

    padding: .85rem;

    font-size: 12px;

    border: 1px solid #eaeaea;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 4px;

    line-height: 1;

}



.input-text:focus {

    outline: none;

    box-shadow: none;

    border-color: #41a0fc;

}



.input-search {

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    display: inline-block;

    background: #fff;

    padding: .85rem;

    font-size: 12px;

    border: 1px solid #eaeaea;

    border-radius: 4px;

    line-height: 1;

}



.input-search:focus {

    outline: none;

    box-shadow: none;

    border-color: #41a0fc;

}



.input-desc {

    display: block;

    margin-top: .25rem;

    margin-left: .1rem;

    font-size: 11px;

    color: #959595;

}



.file-input.selected label {

    border: 1px solid #41a0fc;

}



.file-input label {

    display: block;

    width: 100%;

    background: #fff;

    padding: 1rem .6rem;

    font-size: 13px;

    border: 1px solid #eaeaea;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 4px;

    line-height: 1;

    cursor: pointer;

}



.file-input input {

    display: none;

}



/*  Data Select */



.data-select {

    display: none;

}



.select {

    position: relative;

}



.select-disabled .select-button {

    pointer-events: none;

    color: #6d6d6d;

}



.select .select-button {

    background: #fff url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="10" height="10" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1200 1200"%3E%3Cpath fill="%23222" d="m600.006 989.352l178.709-178.709L1200 389.357l-178.732-178.709L600.006 631.91L178.721 210.648L0 389.369l421.262 421.262l178.721 178.721h.023z"%2F%3E%3C%2Fsvg%3E') no-repeat right 14px top 17px;

    display: block;

    width: 100%;

    min-width: 175px;

    font-size: 12px;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    line-height: 15px;

    text-align: left;

    border: 1px solid #eaeaea;

    border-radius: 4px;

    cursor: pointer;

    padding: .85rem 45px .85rem .85rem;

}



.select .focused {

    border-color: #41a0fc;

}



.select .dropdown-content {

    padding: 0;

    display: none;

    position: absolute;

    margin-top: .5rem;

    background-color: #fff;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 6px;

    border: 1px solid #eaeaea;

    z-index: 1090;

    max-height: 400px;

    overflow-x: auto;

    min-width: 200px;

    width: 100%;

}



.select .dropdown-content .selected {

    background: #f1f1f1;

}



.select .dropdown-content .selected:hover {

    background: #f1f1f1;

}



.select .dropdown-content .disabled {

    background: #fafafa;

    color: #acacac !important;

    cursor: not-allowed;

    pointer-events: none;

}



.select .dropdown-content li {

    display: block;

    cursor: pointer;

    font-size: 13px;

    color: #222;

    padding: .5rem .75rem;

    border-bottom: 1px solid #f1f1f1;

    white-space: nowrap;

}



.select .dropdown-content li.select-search {

    padding: .7rem;

    cursor: default;

}



.select .dropdown-content li.select-search:hover {

    background: #fff;

}



.select .dropdown-content li:last-child {

    border: 0;

}



.select .dropdown-content li:hover {

    background: #fafafa;

}



.select .dropdown-content li.select-group {

    background: #fafafa;

    color: #333333 !important;

    font-weight: bold;

    pointer-events: none;

}



.data-checkbox {

    display: block;

    padding: 0;

    width: 100%;

    background: #fff;

    font-size: 13px;

    border: 1px solid #eaeaea;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 4px;

    line-height: 1;

}



.data-checkbox li {

    display: block;

    cursor: pointer;

    font-size: 13px;

    color: #222;

    padding: .65rem;

    border-bottom: 1px solid #f1f1f1;

    white-space: nowrap;

}



.data-checkbox li::before {

    content: "";

    display: inline-block;

    width: 10px;

    height: 10px;

    background: #e8e8e8;

    margin-right: .5rem;

}



.data-checkbox li.selected::before {

    content: "";

    display: inline-block;

    width: 10px;

    height: 10px;

    background: #41a0fc;

    border: 2px solid #e8e8e8;

    margin-right: .5rem;

}



.data-checkbox li:last-child {

    border-bottom: none;

}



/* Input Data List */



.input-datalist {

    position: relative;

}



.input-datalist ul {

    padding: 0;

    display: none;

    position: absolute;

    margin-top: .5rem;

    background-color: #fff;

    width: 100%;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    border-radius: 6px;

    border: 1px solid #eaeaea;

    z-index: 1090;

    max-height: 400px;

    overflow-x: auto;

}



.input-datalist ul li {

    display: block;

    cursor: pointer;

    font-size: 13px;

    color: #222;

    padding: .35rem .7rem;

    border-bottom: 1px solid #f1f1f1;

}



.input-datalist ul li i {

    font-size: 12px;

}



.input-datalist ul li:last-child {

    border: 0;

}



.input-datalist ul li:hover {

    background: #fafafa;

}



.modal .input-datalist,

.modal .input-desc,

.modal .input-text,

.modal .input-search,

.modal .select,

.modal .select .select-button,

.modal .data-checkbox {

    box-shadow: none;

}



/* Buttons */



.btn {

    display: inline-flex;

    text-align: center;

    padding: .65rem 1.15rem;

    font-size: 13px;

    border-radius: 4px;

    transition: .2s;

    color: #fff !important;

    border: 0;

    cursor: pointer;

    align-items: center;

    font-weight: 500;

}



.btn i {

    font-size: 15px;

    margin-right: .75rem;

}



.btn:hover {

    opacity: .8;

}



.btn-sm {

    padding: .65rem .85rem;

    font-size: 13px;

    border-radius: 2px;

}



.btn-primary {

    background: #41a0fc;

}



.btn-secondary {

    background: #233044;

}



.btn-third {

    background: #716aca;

}



.btn-dark {

    background: #1f2a3b;

}



.btn-light {

    background: #e0e0e0;

    color: #233044 !important;

}



.btn-success {

    background: #35cd3a;

}



.btn-warning {

    background: #ffa534;

}



.btn-danger {

    background: #f3545d;

}



.link-button {

    cursor: pointer;

    border: 0;

    background: none;

    padding: 0;

    font-size: 12px;

    color: #41a0fc;

}



.link-button:hover {

    color: rgb(72, 185, 241);

}



.link-button:focus {

    outline: 0;

}



/* Alert */



.alert {

    position: relative;

    padding: .75rem .9rem;

    margin-bottom: 1.5rem;

    border: 1px solid transparent;

    border-radius: 6px;

    color: #fff;

    font-size: 14px;

}



.alert-slide {

    transition: .2s;

    position: fixed;

    min-width: 500px;

    z-index: 1090;

    transform: translateX(120%);

    right: 2rem;

    bottom: 2rem;

    padding: .75rem .9rem;

    border: 1px solid transparent;

    border-radius: 6px;

    color: #fff;

    font-size: 14px;

}



.alert-slide.show {

    transform: translateX(0);

}



.alert-slide .alert-close {

    padding: 0;

    background-color: transparent;

    border: 0;

    font-size: 20px;

    line-height: 1;

    float: right;

    cursor: pointer;

    color: #ffffffd1;

    text-shadow: none;

    opacity: 1;

    margin-left: 1rem;

}



.alert-slide .alert-close:hover {

    color: #fff;

    text-shadow: none;

    opacity: 1;

}



/* Scrollbar */



::-webkit-scrollbar {

    width: 5px;

}



::-webkit-scrollbar-thumb {

    background: #757981;

    border-radius: 50px;

}



::-webkit-scrollbar-track {

    background: #1c2331;

}



@-moz-document url-prefix() {

    .sidebar-inner {

        scrollbar-width: thin;

    }



    .notifications {

        scrollbar-width: thin;

    }

}



/* Modal */



.modal-content {

    background: #f4f8ff !important;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px !important;

    border-radius: 4px !important;

    padding: 1.5rem !important;

}



.modal-inner {

    margin: 2rem 0 !important;

}



.modal-inner p {

    font-size: 15px;

    margin-bottom: 0.5rem !important;

}



.modal-desc {

    margin: 0 0 0 .1rem;

    font-size: 12px;

    color: #777;

}



.modal .close {

    background: transparent;

    border: 0;

}



/* Tabber */



.box .tabber {

    padding: 0 1.5rem;

    border-top: 1px solid #eaeaea;

    border-bottom: 1px solid #eaeaea;

    margin: 0 -1.5rem .5rem;

}



.box .tabber button {

    border: 0;

    background: none;

    padding: .75rem 0;

    font-weight: 500;

    cursor: pointer;

    margin-right: 1.5rem;

}



.box .tabber button:hover {

    color: #716aca;

    border-bottom: 1px solid #716aca;

}



.box .tabber button:focus {

    outline: 0;

}





.box .tabber .active {

    color: #716aca;

    border-bottom: 1px solid #716aca;

}



/* Login */



.login {

    height: calc(100vh);
    background-image: url('../img/vbg1.jpg');
    background-size: cover;
    background-repeat: no-repeat;

    /* background: linear-gradient(to top left, #f7f9fc 45%, transparent 45%), linear-gradient(to top right, #f7f9fc 45%, transparent 45%), #1f2a3b; */

}



.login img {

    margin-bottom: 4rem !important;

}



.login .box {

    padding: 4rem;

    border-top: 0;

}



.login h2 {

    line-height: 1;

    font-size: 22px;

    margin-bottom: .5rem;

    font-weight: 600;

}



.login a {

    font-size: 12px;

}



/* ErrorHandler */



.error-404 {

    width: 100%;

    padding: 5rem 0;

}



.error-404 img {

    height: 350px;

    width: auto;

    margin: auto;

}



.error-404 h1 {

    margin: 1rem 0;

    font-size: 28px;

    font-weight: 600;

}



.error-404 p {

    font-size: 14px;

    max-width: 600px;

    text-align: center;

    color: #9eabb6;

}



/* Tab Menu */



.tab-menu {

    display: block;

    overflow: hidden;

    padding: 0;

    margin: 0;

}



.tab-menu li {

    border-top: 1px solid #f1f1f1;

}



.tab-menu li:first-child {

    border-top: none;

}



.tab-menu li.active {

    background: #fafafa;

}



.tab-menu li.active a {

    color: #716aca;

}



.tab-menu li a {

    display: block;

    font-size: 13px;

    padding: .85rem 1.15rem;

    font-weight: 500;

    color: #233044;

}



.tab-menu li i {

    width: 1rem;

    margin-right: .75rem;

    font-size: 12px;

}



.tab-menu li a:hover {

    background: #fafafa;

}



/* Pagination */



.pagination .active {

    border: 1px solid #41a0fc;

    background-color: #41a0fc;

    color: #fff;

}



.pagination .active:hover {

    background-color: #41a0fc;

    color: #fff;

}



.pagination select {

    display: none;

}



.pagination .select {

    margin: 0 .2rem;

}



.pagination .select .select-button {

    min-width: 80px;

}



.page-prev,

.page-next {

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

    display: inline-block;

    background: #fff;

    padding: .75rem;

    font-size: 12px;

    border: 1px solid #eaeaea;

    border-radius: 4px;

    line-height: inherit;

    cursor: pointer;

    outline: 0 !important;

}



/* Product */



.mini-product-photo {

    margin-right: .5rem;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    overflow: hidden;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.mini-product-photo img {

    object-fit: cover;

    width: 30px;

    height: 30px;

}



.product-photo {

    width: 100%;

    height: 100px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 1rem;

}



.product-photo img {

    max-width: 100%;

    max-height: 100%;

    cursor: pointer;

}



#galleryModal img {

    max-width: 100%;

}



.product-box {

    display: block;

    border-radius: 4px;

    border: 1px solid rgb(238, 238, 238);

    padding: .5rem;

}



.pb-photo {

    position: relative;

    overflow: hidden;

    height: 125px;

    border-radius: 4px;

}



.pb-photo img {

    position: absolute;

    left: 50%;

    top: 50%;

    height: auto;

    transform: translate(-50%, -50%);

    width: 100%;

}



.pb-photo span {

    position: absolute;

    background: #41a0fc;

    padding: .25rem .5rem;

    color: #fff !important;

    left: .5rem;

    top: .5rem;

    border-radius: 50px;

}



.product-box h3 {

    font-size: 13px;

    color: #222;

    margin-top: .5rem;

    margin-bottom: .25rem;

    white-space: nowrap;

    overflow: hidden;

    line-height: 16px;

    text-overflow: ellipsis;

}



.product-box span {

    display: block;

    color: #ccc;

    font-size: 11px;

    font-weight: 300;

}



/* Additional */



.collapse {

    display: none;

}



.show {

    display: block !important;

}



.space {

    display: inline-block;

    width: 12px;

}



.flex-1 {

    flex: 1 !important;

}



.btn:disabled {

    cursor: not-allowed;

    opacity: 0.5;

}



.barcode-container {

    background: #fff;

    padding-top: 20px;

    padding-bottom: 10px;

}



.label {

    color: #fff;

    border-radius: 4px;

    padding: .375rem .5rem;

    font-weight: 500;

}



/* Live Chat */



.live-chat {

    position: fixed;

    bottom: 0;

    right: 1rem;

    display: flex;

    align-items: flex-end;

}



.live-chat .people {

    width: 300px;

    display: inline-block;

    box-shadow: rgba(50, 50, 93, 0.024) 0 -2px 5px -1px, rgba(0, 0, 0, 0.05) 0 -1px 3px -1px;

    position: fixed;

    bottom: 0;

    right: 1rem;

}



.live-chat .people h2 {

    cursor: pointer;

    background: #716aca;

    padding: .65rem .85rem;

    border-top-right-radius: 4px;

    border-top-left-radius: 4px;

    font-weight: 500;

    color: #fff;

    font-size: 15px;

    margin: 0;

}



.live-chat .people .list {

    width: 100%;

    list-style-type: none;

    padding: 0;

    margin: 0;

    height: 300px;

    background: #fff;

    transition: .3s;

    overflow-y: scroll;

    border-bottom: 4px solid #716aca;

}



.live-chat .people .list.closed {

    height: 0;

    border: 0;

}



.live-chat .people .list li {

    padding: .65rem .85rem;

    border-bottom: 1px solid rgb(244, 244, 244);

    font-size: 14px;

    cursor: pointer;

}



.live-chat .people .list li.unread {

    color: #6b74ff;

}



.live-chat .people .list li span {

    display: block;

    color: #828282;

    font-size: 12px;

}



.live-chat .people .list li:hover {

    background-color: rgba(0, 0, 0, 0.03);

}



.live-chat .chat-box {

    display: inline-block;

    box-shadow: rgba(50, 50, 93, 0.024) 0 -2px 5px -1px, rgba(0, 0, 0, 0.05) 0 -1px 3px -1px;

    border-top-right-radius: 4px;

    border-top-left-radius: 4px;

    overflow: hidden;

    border-top: 1px solid #eaeaea;

    border-left: 1px solid #eaeaea;

    border-right: 1px solid #eaeaea;

    position: relative;

    bottom: 0;

    right: calc(300px);

    margin-right: 1rem;

}



.live-chat .chat-box.online {

    border-bottom: 4px solid #35cd3a;

}



.live-chat .chat-box.busy {

    border-bottom: 4px solid #ffa534;

}



.live-chat .chat-box.away {

    border-bottom: 4px solid #6c757d;

}



.live-chat .chat-box h2 {

    background: #fff;

    padding: .65rem .85rem;

    width: 350px;

    font-weight: 500;

    font-size: 15px;

    margin: 0;

    border-bottom: 1px solid #f0f0f0;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.live-chat .chat-box h2 span {

    display: block;

    color: #828282;

    font-size: 12px;

    font-weight: 400;

    margin-top: .15rem;

}



.live-chat .chat-box .chat-body {

    display: flex;

    height: 350px;

    flex-direction: column;

    transition: .3s;

}



.live-chat .chat-box .chat-body label {

    margin-bottom: 0;

}



.live-chat .chat-box .chat-body.closed {

    height: 0;

}



.live-chat .chat-box .messages {

    height: 100%;

    max-width: 100%;

    overflow-y: scroll;

    background: #fbfbfb;

    display: flex;

    align-items: flex-start;

    flex-direction: column;

    align-self: stretch;

    padding: .75rem 1rem;

}



.live-chat .chat-box .messages .msg {

    padding: .5rem .75rem;

    font-size: 13px;

    max-width: 200px;

    border-radius: 10px;

    margin-bottom: 1rem;

    word-break: break-word;

}



.live-chat .chat-box .messages .msg.sent {

    background: #41a0fc;

    margin-left: auto;

    color: #fff;

}



.live-chat .chat-box .messages .msg.received {

    background: #fff;

    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.11);

}



.live-chat .chat-box input {

    background-color: #fff;

    width: 100%;

    border: 0;

    padding: .65rem .85rem;

    font-size: 14px;

    align-self: flex-end;

    border-top: 1px solid #f0f0f0;

}



.live-chat .chat-box input:focus {

    outline: 0;

}



.live-chat .close-chat,

.live-chat .minimize-chat {

    text-align: center;

    font-size: 12px;

    border: 0;

    cursor: pointer;

    border-radius: 50%;

    width: 25px;

    height: 25px;

    background: #faf9f9;

    color: #222;

}



.live-chat .minimize-chat {

    margin-right: .5rem;

}



.invoice .address h3 {

    font-size: 16px;

}



.invoice .address p {

    color: #5c5c5c;

    margin-bottom: 0;

}



.delete-warning {

    font-size: 12px !important;

    margin-top: .5rem;

    font-style: italic;

}



.bg-primary-light {

    background-color: #d4e9ff !important;

}



.bg-third-light {

    background: #dddaff !important;

}



.bg-success-light {

    background: #c4ffc6 !important;

}



.bg-warning-light {

    background: #ffecd4 !important;

}



.permission-group {

    display: flex;

    flex-direction: row;

    margin-bottom: .5rem;

}



.permission-group label {

    width: 200px;

}



.apexChart {

    min-height: 365px;

    border: 1px #ececec solid;

    border-radius: 4px;

    box-shadow: rgba(50, 50, 93, 0.025) 0 2px 5px -1px, rgba(0, 0, 0, 0.05) 0 1px 3px -1px;

}



.apexcharts-tooltip-text-y-value {

    margin-left: 0 !important;

}



.apexcharts-tooltip-text-y-value span {

    font-weight: 400 !important;

}



.float-left {

    float: left;

}



.float-right {

    float: right;

}



.ms-auto {

    margin-left: auto;

}



.me-auto {

    margin-right: auto;

}



.table {

    width: 100%;

    max-width: 100%;

    margin-bottom: 1rem;

    background-color: transparent;

    border-bottom: 1px solid #dee2e6;

}



.table td, .table th {

    padding: 0.75rem;

    vertical-align: middle;

}



.table td {

    border-top: 1px solid #dee2e6;

}



.table thead th {

    vertical-align: middle;

    border-bottom: 1px solid #dee2e6;

    border-top: 1px solid #dee2e6;

    text-transform: capitalize;

    font-weight: 600;

}



.table tbody + tbody {

    border-top: 2px solid #dee2e6;

}



.table .table {

    background-color: #fff;

}



.table-sm td,

.table-sm th {

    padding: 0.3rem;

}



.table-bordered {

    border: 1px solid #dee2e6;

}



.table-bordered td,

.table-bordered th {

    border: 1px solid #dee2e6;

}



.table-bordered thead td,

.table-bordered thead th {

    border-bottom-width: 2px;

}



.table-borderless tbody + tbody,

.table-borderless td,

.table-borderless th,

.table-borderless thead th {

    border: 0;

}



.table-striped tbody tr:nth-of-type(odd) {

    background-color: rgba(0, 0, 0, 0.05);

}



.table-hover tbody tr:hover {

    background-color: rgba(0, 0, 0, 0.075);

}



.table-primary,

.table-primary > td,

.table-primary > th {

    background-color: #b8daff;

}



.table-hover .table-primary:hover {

    background-color: #9fcdff;

}



.table-hover .table-primary:hover > td,

.table-hover .table-primary:hover > th {

    background-color: #9fcdff;

}



.table-secondary,

.table-secondary > td,

.table-secondary > th {

    background-color: #d6d8db;

}



.table-hover .table-secondary:hover {

    background-color: #c8cbcf;

}



.table-hover .table-secondary:hover > td,

.table-hover .table-secondary:hover > th {

    background-color: #c8cbcf;

}



.table-success,

.table-success > td,

.table-success > th {

    background-color: #c3e6cb;

}



.table-hover .table-success:hover {

    background-color: #b1dfbb;

}



.table-hover .table-success:hover > td,

.table-hover .table-success:hover > th {

    background-color: #b1dfbb;

}



.table-info,

.table-info > td,

.table-info > th {

    background-color: #bee5eb;

}



.table-hover .table-info:hover {

    background-color: #abdde5;

}



.table-hover .table-info:hover > td,

.table-hover .table-info:hover > th {

    background-color: #abdde5;

}



.table-warning,

.table-warning > td,

.table-warning > th {

    background-color: #ffeeba;

}



.table-hover .table-warning:hover {

    background-color: #ffe8a1;

}



.table-hover .table-warning:hover > td,

.table-hover .table-warning:hover > th {

    background-color: #ffe8a1;

}



.table-danger,

.table-danger > td,

.table-danger > th {

    background-color: #f5c6cb;

}



.table-hover .table-danger:hover {

    background-color: #f1b0b7;

}



.table-hover .table-danger:hover > td,

.table-hover .table-danger:hover > th {

    background-color: #f1b0b7;

}



.table-light,

.table-light > td,

.table-light > th {

    background-color: #fdfdfe;

}



.table-hover .table-light:hover {

    background-color: #ececf6;

}



.table-hover .table-light:hover > td,

.table-hover .table-light:hover > th {

    background-color: #ececf6;

}



.table-dark,

.table-dark > td,

.table-dark > th {

    background-color: #c6c8ca;

}



.table-hover .table-dark:hover {

    background-color: #b9bbbe;

}



.table-hover .table-dark:hover > td,

.table-hover .table-dark:hover > th {

    background-color: #b9bbbe;

}



.table-active,

.table-active > td,

.table-active > th {

    background-color: rgba(0, 0, 0, 0.075);

}



.table-hover .table-active:hover {

    background-color: rgba(0, 0, 0, 0.075);

}



.table-hover .table-active:hover > td,

.table-hover .table-active:hover > th {

    background-color: rgba(0, 0, 0, 0.075);

}



.table .thead-dark th {

    color: #fff;

    background-color: #212529;

    border-color: #32383e;

}



.table .thead-light th {

    color: #495057;

    background-color: #e9ecef;

    border-color: #dee2e6;

}



.table-dark {

    color: #fff;

    background-color: #212529;

}



.table-dark td,

.table-dark th,

.table-dark thead th {

    border-color: #32383e;

}



.table-dark.table-bordered {

    border: 0;

}



.table-dark.table-striped tbody tr:nth-of-type(odd) {

    background-color: rgba(255, 255, 255, 0.05);

}



.table-dark.table-hover tbody tr:hover {

    background-color: rgba(255, 255, 255, 0.075);

}



/* Table */



.table-action {

    cursor: pointer;

    border: 0;

    background: none;

    padding: 0;

    opacity: 0;

    transition: 0s;

    margin-right: 1rem;

    font-size: 12px;

    white-space: nowrap;

}



.table-action:last-child {

    margin-right: 0;

}



td,

th {

    border-color: #f1f1f1 !important;

}



td:first-child,

th:first-child {

    padding-left: 1.5rem;

}



td:last-child,

th:last-child {

    padding-right: 1.5rem;

}



tr:hover .table-action {

    opacity: 1;

}



.table {

    border-color: #f1f1f1 !important;

}



.table caption {

    padding: 0 1.5rem;

    margin-top: 1.5rem;

    font-size: 12px;

}



.table .empty {

    max-width: 30px;

    background: #ccc;

    height: 1px;

    display: block;

}



table .readonly input {

    cursor: not-allowed;

    pointer-events: none;

    opacity: 0.6;

}



table .readonly .select {

    cursor: not-allowed;

    pointer-events: none;

    opacity: 0.6;

}



.table-hover tbody tr:hover {

    background-color: rgba(0, 0, 0, 0.03) !important;

}



.table-hover > tbody > tr:hover > * {

    --bs-table-bg-state: rgba(0, 0, 0, 0.03) !important;

}



thead th {

    background: #f6f8fb !important;

    color: #6c7a91 !important;

    font-size: .625rem;

    text-transform: uppercase !important;

}



@media (min-width: 576px) {

    .modal-dialog {

        max-width: 650px;

        margin: 1.75rem auto;

    }

}



.modal.fade .modal-dialog {

    transition: transform .3s ease-out;

    transform: translate(0, -25%);

}



.modal.show .modal-dialog {

    -webkit-transform: translate(0, 0);

    transform: translate(0, 0);

}



.modal-backdrop.fade {

    transition: none;

}



.text-muted {

    color: #6c757d !important;

}



.form-group {

    margin-top: 1rem;

}



.modal .form-group {

    margin-bottom: 1rem;

    margin-top: 0;

}



.text-right {

    text-align: right !important;

}



.text-center {

    text-align: center !important;

}



.text-left {

    text-align: left !important;

}



form#purchase, form#sale {

    padding-top: 1rem;

}



.main-welcome {

    font-size: 1.25rem;

    margin-bottom: 2rem;

}



.minw-160 {

    min-width: 160px;

}