/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
/* New Admin Css */

:root,[data-bs-theme=light] {
    --bs-blue: #007bff;
    --bs-indigo: #6610f2;
    --bs-purple: #7367f0;
    --bs-pink: #e83e8c;
    --bs-red: #ff4c51;
    --bs-orange: #fd7e14;
    --bs-yellow: #ff9f43;
    --bs-green: #28c76f;
    --bs-teal: #20c997;
    --bs-cyan: #00bad1;
    --bs-black: #2f2b3d;
    --bs-white: #fff;
    --bs-gray: #82808b;
	--bs-paper-bg: #fff;
    --bs-gray-dark: #595564;
    --bs-gray-25: #fcfcfc;
    --bs-gray-50: #f3f2f3;
    --bs-gray-75: #eeeeef;
    --bs-gray-100: #eaeaec;
    --bs-gray-200: #e6e6e8;
    --bs-gray-300: #c1bfc5;
    --bs-gray-400: #acaab1;
    --bs-gray-500: #97959e;
    --bs-gray-600: #82808b;
    --bs-gray-700: #6d6b77;
    --bs-gray-800: #595564;
    --bs-gray-900: #444050;
    --bs-primary: #7367f0;
    --bs-secondary: #808390;
    --bs-success: #28c76f;
    --bs-info: #00bad1;
    --bs-warning: #ff9f43;
    --bs-danger: #ff4c51;
    --bs-light: #dfdfe3;
    --bs-dark: #2f3349;
    --bs-gray: #97959e;
    --bs-primary-rgb: 115, 103, 240;
    --bs-secondary-rgb: 128, 131, 144;
    --bs-success-rgb: 40, 199, 111;
    --bs-info-rgb: 0, 186, 209;
    --bs-warning-rgb: 255, 159, 67;
    --bs-danger-rgb: 255, 76, 81;
    --bs-light-rgb: 223, 223, 227;
    --bs-dark-rgb: 47, 51, 73;
    --bs-gray-rgb: 151, 149, 158;
    --bs-primary-text-emphasis: #2e2960;
    --bs-secondary-text-emphasis: #33343a;
    --bs-success-text-emphasis: #10502c;
    --bs-info-text-emphasis: #004a54;
    --bs-warning-text-emphasis: #66401b;
    --bs-danger-text-emphasis: #661e20;
    --bs-light-text-emphasis: #6d6b77;
    --bs-dark-text-emphasis: #6d6b77;
    --bs-primary-bg-subtle: #e9e7fd;
    --bs-secondary-bg-subtle: #ebebed;
    --bs-success-bg-subtle: #ddf6e8;
    --bs-info-bg-subtle: #d6f4f8;
    --bs-warning-bg-subtle: #fff0e1;
    --bs-danger-bg-subtle: #ffe2e3;
    --bs-light-bg-subtle: #f5f5f6;
    --bs-dark-bg-subtle: #dedee2;
    --bs-primary-border-subtle: #c8c4f9;
    --bs-secondary-border-subtle: #cdcfd4;
    --bs-success-border-subtle: #abe9c7;
    --bs-info-border-subtle: #9ce4ed;
    --bs-warning-border-subtle: #ffdab6;
    --bs-danger-border-subtle: #ffb9bb;
    --bs-light-border-subtle: #e6e6e8;
    --bs-dark-border-subtle: #aeafb8;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 47, 43, 61;
    --bs-font-sans-serif: "Public Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --bs-font-monospace: "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-root-font-size: 16px;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.375;
    --bs-body-color: #6d6b77;
    --bs-body-color-rgb: 109, 107, 119;
    --bs-body-bg: #f8f7fa;
    --bs-body-bg-rgb: 248, 247, 250;
    --bs-emphasis-color: #2f2b3d;
    --bs-emphasis-color-rgb: 47, 43, 61;
    --bs-secondary-color: #acaab1;
    --bs-secondary-color-rgb: 172, 170, 177;
    --bs-secondary-bg: #e6e6e8;
    --bs-secondary-bg-rgb: 230, 230, 232;
    --bs-tertiary-color: rgba(109, 107, 119, 0.5);
    --bs-tertiary-color-rgb: 109, 107, 119;
    --bs-tertiary-bg: #dfdfe3;
    --bs-tertiary-bg-rgb: 223, 223, 227;
    --bs-heading-color: #444050;
    --bs-link-color: #7367f0;
    --bs-link-color-rgb: 115, 103, 240;
    --bs-link-decoration: none;
    --bs-link-hover-color: #685dd8;
    --bs-link-hover-color-rgb: 104, 93, 216;
    --bs-code-color: #e83e8c;
    --bs-highlight-color: #6d6b77;
    --bs-highlight-bg: #ffecd9;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: var(--bs-gray-200);
    --bs-border-color-translucent: rgba(47, 43, 61, 0.075);
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 0.625rem;
    --bs-border-radius-xxl: 1rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.1875rem 0.75rem 0 rgba(47, 43, 61, 0.14);
    --bs-box-shadow-sm: 0 0.125rem 0.5rem 0 rgba(47, 43, 61, 0.12);
    --bs-box-shadow-lg: 0 0.25rem 1.125rem 0 rgba(47, 43, 61, 0.16);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(47, 43, 61, 0.075);
    --bs-focus-ring-width: 0.15rem;
    --bs-focus-ring-opacity: 0.75;
    --bs-focus-ring-color: rgba(109, 107, 119, 0.75);
    --bs-form-valid-color: #28c76f;
    --bs-form-valid-border-color: #28c76f;
    --bs-form-invalid-color: #ff4c51;
    --bs-form-invalid-border-color: #ff4c51;
	--bs-bg-label-tint-amount: 84%;
}
.app-content.content{
  overflow-x: hidden;
}
.table > :not(caption) > * > * {
    padding: 0.72rem 1rem !important;
}
td {
    font-size: 14px;
}
#shipmentsChart {
  height: 320px !important;
  width: 100% !important;
}

.bg-label-primary {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-primary)) !important;
    color: var(--bs-primary) !important
}

.bg-label-primary.bg-label-hover:hover {
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-contrast) !important
}

.bg-label-secondary {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-secondary)) !important;
    color: var(--bs-secondary) !important
}

.bg-label-secondary.bg-label-hover:hover {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-secondary-contrast) !important
}

.bg-label-success {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-success)) !important;
    color: var(--bs-success) !important
}

.bg-label-success.bg-label-hover:hover {
    background-color: var(--bs-success) !important;
    color: var(--bs-success-contrast) !important
}

.bg-label-info {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-info)) !important;
    color: var(--bs-info) !important
}

.bg-label-info.bg-label-hover:hover {
    background-color: var(--bs-info) !important;
    color: var(--bs-info-contrast) !important
}

.bg-label-warning {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-warning)) !important;
    color: var(--bs-warning) !important
}

.bg-label-warning.bg-label-hover:hover {
    background-color: var(--bs-warning) !important;
    color: var(--bs-warning-contrast) !important
}

.bg-label-danger {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-danger)) !important;
    color: var(--bs-danger) !important
}

.bg-label-danger.bg-label-hover:hover {
    background-color: var(--bs-danger) !important;
    color: var(--bs-danger-contrast) !important
}

.bg-label-light {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-light)) !important;
    color: RGBA(#000, var(--bs-bg-label-tint-amount)) !important
}

.bg-label-light.bg-label-hover:hover {
    background-color: var(--bs-light) !important;
    color: var(--bs-light-contrast) !important
}

.bg-label-dark {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-dark)) !important;
    color: var(--bs-dark) !important
}

.bg-label-dark.bg-label-hover:hover {
    background-color: var(--bs-dark) !important;
    color: var(--bs-dark-contrast) !important
}

.bg-label-gray {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-gray)) !important;
    color: var(--bs-gray) !important
}

.bg-label-gray.bg-label-hover:hover {
    background-color: var(--bs-gray) !important;
    color: var(--bs-gray-contrast) !important
}

.bg-label-facebook {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-facebook)) !important;
    color: var(--bs-facebook) !important
}

.bg-label-facebook.bg-label-hover:hover {
    background-color: var(--bs-facebook) !important;
    color: var(--bs-facebook-contrast) !important
}

.bg-label-twitter {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-twitter)) !important;
    color: var(--bs-twitter) !important
}

.bg-label-twitter.bg-label-hover:hover {
    background-color: var(--bs-twitter) !important;
    color: var(--bs-twitter-contrast) !important
}

.bg-label-google-plus {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-google-plus)) !important;
    color: var(--bs-google-plus) !important
}

.bg-label-google-plus.bg-label-hover:hover {
    background-color: var(--bs-google-plus) !important;
    color: var(--bs-google-plus-contrast) !important
}

.bg-label-instagram {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-instagram)) !important;
    color: var(--bs-instagram) !important
}

.bg-label-instagram.bg-label-hover:hover {
    background-color: var(--bs-instagram) !important;
    color: var(--bs-instagram-contrast) !important
}

.bg-label-linkedin {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-linkedin)) !important;
    color: var(--bs-linkedin) !important
}

.bg-label-linkedin.bg-label-hover:hover {
    background-color: var(--bs-linkedin) !important;
    color: var(--bs-linkedin-contrast) !important
}

.bg-label-github {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-github)) !important;
    color: var(--bs-github) !important
}

.bg-label-github.bg-label-hover:hover {
    background-color: var(--bs-github) !important;
    color: var(--bs-github-contrast) !important
}

.bg-label-dribbble {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-dribbble)) !important;
    color: var(--bs-dribbble) !important
}

.bg-label-dribbble.bg-label-hover:hover {
    background-color: var(--bs-dribbble) !important;
    color: var(--bs-dribbble-contrast) !important
}

.bg-label-pinterest {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-pinterest)) !important;
    color: var(--bs-pinterest) !important
}

.bg-label-pinterest.bg-label-hover:hover {
    background-color: var(--bs-pinterest) !important;
    color: var(--bs-pinterest-contrast) !important
}

.bg-label-slack {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-slack)) !important;
    color: var(--bs-slack) !important
}

.bg-label-slack.bg-label-hover:hover {
    background-color: var(--bs-slack) !important;
    color: var(--bs-slack-contrast) !important
}

.bg-label-reddit {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-reddit)) !important;
    color: var(--bs-reddit) !important
}

.bg-label-reddit.bg-label-hover:hover {
    background-color: var(--bs-reddit) !important;
    color: var(--bs-reddit-contrast) !important
}

.bg-label-youtube {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-youtube)) !important;
    color: var(--bs-youtube) !important
}

.bg-label-youtube.bg-label-hover:hover {
    background-color: var(--bs-youtube) !important;
    color: var(--bs-youtube-contrast) !important
}

.bg-label-vimeo {
    background-color: color-mix(in sRGB, var(--bs-paper-bg) var(--bs-bg-label-tint-amount), var(--bs-vimeo)) !important;
    color: var(--bs-vimeo) !important
}

.bg-label-vimeo.bg-label-hover:hover {
    background-color: var(--bs-vimeo) !important;
    color: var(--bs-vimeo-contrast) !important
}