:root {
    --body-bg: #F8FAFF;
    --bg-default: #fff;
    --bg-card: #fff;
    --bg-default-transparent: rgba(255, 255, 255, 0.8);
    --color: #212529;
    --color-2: #1c2025;
    --default-border-radius: 0.5rem;
    --default-border-color: #DFDFDF;
    --default-hover-color: #F3F6F9;
    --bs-primary: #0d6efd;
    --bs-primary-light: rgba(13, 110, 253, .12);
    --bs-primary-200: rgba(13, 110, 253, 0.2);
    --bs-primary-400: rgba(13, 110, 253, 0.4);
    --bs-primary-500: rgba(13, 110, 253, 0.5);
    --bs-secondary: #82868b;
    --bs-secondary-light: rgba(130, 134, 139, .12);
    --bs-success: #28c76f;
    --bs-success-light: rgba(40, 199, 111, .12);
    --bs-danger: #ea5455;
    --bs-danger-light: rgba(234, 84, 85, .12);
    --bs-warning: #ff9f43;
    --bs-warning-light: rgba(255, 159, 67, .12);
    --bs-info: #00cfe8;
    --bs-info-light: rgba(0, 207, 232, .12);


    --color-background: #c7c4c4;
    --color-background-hover: #bfbcbc;
    --color-background-active: #b9b6b6;
    --color-background-weak: #424244;
    --color-background-weak-deprecated-opaque: #424244;
    --color-background-weak-deprecated: #424244;
    --color-background-weak-hover: #464648;
    --color-background-weak-hover-deprecated: #464648;
    --color-foreground: #1e1f21;
    --color-foreground-weak: #fff;
    --color-foreground-weak-deprecated: #fff;
    --color-red-background: #f06a6a;
    --color-red-background-rgb: 240, 106, 106;
    --color-red-background-hover: #eb6868;
    --color-red-foreground: #1e1f21;
    --color-red-foreground-hover: #1e1f21;
    --color-red-text-deprecated: #f5f4f3;
    --color-orange-background: #ec8d71;
    --color-orange-background-rgb: 236, 141, 113;
    --color-orange-background-hover: #e3886d;
    --color-orange-foreground: #1e1f21;
    --color-orange-foreground-hover: #1e1f21;
    --color-orange-text-deprecated: #f5f4f3;
    --color-yellow-orange-background: #f1bd6c;
    --color-yellow-orange-background-rgb: 241, 189, 108;
    --color-yellow-orange-background-hover: #e7b568;
    --color-yellow-orange-foreground: #1e1f21;
    --color-yellow-orange-foreground-hover: #1e1f21;
    --color-yellow-orange-text-deprecated: #f5f4f3;
    --color-yellow-background: #f8df72;
    --color-yellow-background-rgb: 248, 223, 114;
    --color-yellow-background-hover: #f2da6f;
    --color-yellow-foreground: #1e1f21;
    --color-yellow-foreground-hover: #1e1f21;
    --color-yellow-text-deprecated: #f5f4f3;
    --color-yellow-green-background: #b3df97;
    --color-yellow-green-background-rgb: 179, 223, 151;
    --color-yellow-green-background-hover: #a8d688;
    --color-yellow-green-foreground: #1e1f21;
    --color-yellow-green-foreground-hover: #1e1f21;
    --color-yellow-green-text-deprecated: #f5f4f3;
    --color-green-background: #83c9a9;
    --color-green-background-rgb: 131, 201, 169;
    --color-green-background-hover: #7ec1a3;
    --color-green-foreground: #1e1f21;
    --color-green-foreground-hover: #1e1f21;
    --color-green-text-deprecated: #f5f4f3;
    --color-blue-green-background: #4ecbc4;
    --color-blue-green-background-rgb: 78, 203, 196;
    --color-blue-green-background-hover: #4abeb7;
    --color-blue-green-foreground: #1e1f21;
    --color-blue-green-foreground-hover: #1e1f21;
    --color-blue-green-text-deprecated: #f5f4f3;
    --color-aqua-background: #9ee7e3;
    --color-aqua-background-rgb: 158, 231, 227;
    --color-aqua-background-hover: #99dfdb;
    --color-aqua-foreground: #1e1f21;
    --color-aqua-foreground-hover: #1e1f21;
    --color-aqua-text-deprecated: #f5f4f3;
    --color-blue-background: #4573d2;
    --color-blue-background-rgb: 69, 115, 210;
    --color-blue-background-hover: #526dc6;
    --color-blue-foreground: #fff;
    --color-blue-foreground-hover: #fff;
    --color-blue-text-deprecated: #f5f4f3;
    --color-indigo-background: #a69ff3;
    --color-indigo-background-rgb: 166, 159, 243;
    --color-indigo-background-hover: #9f98ed;
    --color-indigo-foreground: #1e1f21;
    --color-indigo-foreground-hover: #1e1f21;
    --color-indigo-text-deprecated: #f5f4f3;
    --color-purple-background: #cd95ea;
    --color-purple-background-rgb: 205, 149, 234;
    --color-purple-background-hover: #c48fdf;
    --color-purple-foreground: #1e1f21;
    --color-purple-foreground-hover: #1e1f21;
    --color-purple-text-deprecated: #f5f4f3;
    --color-magenta-background: #f9aaef;
    --color-magenta-background-rgb: 249, 170, 239;
    --color-magenta-background-hover: #f1a5e8;
    --color-magenta-foreground: #1e1f21;
    --color-magenta-foreground-hover: #1e1f21;
    --color-magenta-text-deprecated: #f5f4f3;
    --color-hot-pink-background: #f26fb2;
    --color-hot-pink-background-rgb: 242, 111, 178;
    --color-hot-pink-background-hover: #e66aa9;
    --color-hot-pink-foreground: #1e1f21;
    --color-hot-pink-foreground-hover: #1e1f21;
    --color-hot-pink-text-deprecated: #f5f4f3;
    --color-pink-background: #fc979a;
    --color-pink-background-rgb: 252, 151, 154;
    --color-pink-background-hover: #f39294;
    --color-pink-foreground: #1e1f21;
    --color-pink-foreground-hover: #1e1f21;
    --color-pink-text-deprecated: #f5f4f3;
    --color-cool-gray-background: #6d6e6f;
    --color-cool-gray-background-rgb: 109, 110, 111;
    --color-cool-gray-background-hover: #656667;
    --color-cool-gray-foreground: #fff;
    --color-cool-gray-foreground-hover: #fff;
    --color-cool-gray-text-deprecated: #f5f4f3;
}

*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

* {
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

sup {
    color: var(--bs-danger);
    font-size: 16px;
    top: -2px;
    font-weight: bold;
}

.rounded {
    border-radius: var(--default-border-radius) !important;
    -webkit-border-radius: var(--default-border-radius) !important;
    -moz-border-radius: var(--default-border-radius) !important;
    -ms-border-radius: var(--default-border-radius) !important;
    -o-border-radius: var(--default-border-radius) !important;
}

::marker {
    color: var(--color);
}

.text-success {
    color: var(--bs-success) !important;
}

.text-info {
    color: var(--bs-info) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

.text-sucess {
    color: var(--bs-success) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

/* backgroud start */
.bg-success {
    background-color: var(--bs-success) !important;
}

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

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

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

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

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

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

/* background end */

.border-top,
.border-right,
.border-bottom,
.border-left,
.border-start,
.border-end {
    border-color: var(--default-border-color) !important;
}

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

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

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

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

.badge {
    display: inline-block;
    font-size: 85%;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, background 0s, border 0s, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, background 0s, border 0s, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0s, border 0s;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background 0s, border 0s, -webkit-box-shadow 0.15s ease-in-out;
}

.badge {
    padding: 0.3rem 0.5rem;
    text-align: center;
    border-radius: 0.358rem;
}

.badge-pill {
    border-radius: 10rem;
}

.badge-light-primary {
    color: #fff;
    background-color: var(--bs-primary) !important;
}

.badge-light-danger {
    color: #fff;
    background-color: var(--bs-danger) !important;
}

.badge-light-warning {
    color: #fff;
    background-color: var(--bs-warning) !important;
}

.badge-light-success {
    color: #fff;
    background-color: var(--bs-success) !important;
}

.badge-light-secondary {
    color: #fff;
    background-color: var(--bs-secondary) !important;
}

.badge-light-info {
    color: #fff;
    background-color: var(--bs-info) !important;
}

.dark .badge-light-primary {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
}

.dark .badge-light-danger {
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
}

.dark .badge-light-warning {
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
}

.dark .badge-light-success {
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
}

.dark .badge-light-secondary {
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
}

.dark .badge-light-info {
    background-color: var(--bs-info-light) !important;
    color: var(--bs-info) !important;
}

.badge-light {
    color: #6e6b7b;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-19 {
    font-size: 19px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-21 {
    font-size: 21px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fw-100 {
    font-weight: 100 !important;
}

.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.fw-900 {
    font-weight: 900 !important;
}

.fw-500 {
    font-weight: 500 !important;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: none;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.show-scroll::-webkit-scrollbar {
    display: block;
}

.small {
    font-size: 85%;
}

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--body-bg);
}

body {
    background-color: var(--body-bg);
    scroll-behavior: smooth;
    color: var(--color);
}

/* Cards Start */
.card.disabled {
    opacity: 0.85;
    background-color: var(--body-bg);
}

.card.disabled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: inherit;
    z-index: 99;
    cursor: no-drop;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--default-border-color);
    border-radius: var(--default-border-radius);
    -webkit-border-radius: var(--default-border-radius);
    -moz-border-radius: var(--default-border-radius);
    -ms-border-radius: var(--default-border-radius);
    -o-border-radius: var(--default-border-radius);
}

.card-header {
    padding: 1rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
}

.card-header .card-title {
    margin-bottom: 0;
    color: var(--color);
}

.card-header+.card-body {
    padding-top: 0;
}

/* Cards End */

html,
body {
    position: relative;
    width: 100%;
    height: 100%;
}

#app {
    position: relative;
    height: 100%;
    width: 100%;
}

.navbar {
    z-index: 2;
}

.main-navbar-nav .nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-menu-toggle {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    max-width: 200px;
    overflow: hidden;
    margin-left: 10px;
}

.profile-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 8px;
}

.profile-menu-container .profile-name {
    position: relative;
    text-align: right;
}

.profile-menu-container .profile-name .username {
    position: relative;
    font-weight: 500;
    font-size: 13px;
    text-align: right;
}

.profile-menu-container .profile-name .role {
    position: relative;
    font-size: 8px;
    text-align: right;
    font-weight: 500;
}

.profile-menu-container .profile-img {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-left: 12px;
}

.profile-menu-container .profile-img img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    object-fit: cover;
}

.app-content {
    position: relative;
    min-height: 100%;
    padding: 1rem;
}

.app-footer {
    position: relative;
    margin-left: 0;
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 0.75rem;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, .125);
    transition: margin 200ms ease-in-out;
    -webkit-transition: margin 200ms ease-in-out;
    -moz-transition: margin 200ms ease-in-out;
    -ms-transition: margin 200ms ease-in-out;
    -o-transition: margin 200ms ease-in-out;
    z-index: 2;
}

.footer-content {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color);
    flex: 1;
}

.footer-content>.footer-link {
    margin: 0 6px;
}

.footer-content>.footer-link a {
    text-decoration: none;
}

.avatar-rounded {
    position: relative;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}


/************************* buttons start *************************/

.btn-outline-light {
    color: var(--color);
    border-color: var(--default-border-color);
}

.btn-outline-light:hover {
    color: var(--color);
    background-color: var(--default-hover-color);
    border-color: var(--default-border-color);
}

.btn-reload {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 40px;
}

.btn-simple-primary {
    color: var(--bs-primary) !important;
}

.btn-simple-primary:hover,
.btn-simple-primary:focus {
    background-color: var(--bs-primary-light) !important;
    box-shadow: none;
}

.btn-simple-secondary {
    color: var(--bs-secondary) !important;
}

.btn-simple-secondary:hover,
.btn-simple-secondary:focus {
    background-color: var(--bs-secondary-light) !important;
    box-shadow: none;
}

.btn-simple-info {
    color: var(--bs-info) !important;
}

.btn-simple-info:hover,
.btn-simple-info:focus {
    background-color: var(--bs-info-light) !important;
    box-shadow: none;
}

.btn-simple-warning {
    color: var(--bs-warning) !important;
}

.btn-simple-warning:hover,
.btn-simple-warning:focus {
    background-color: var(--bs-warning-light) !important;
    box-shadow: none;
}

.btn-simple-success {
    color: var(--bs-success) !important;
}

.btn-simple-success:hover,
.btn-simple-success:focus {
    background-color: var(--bs-success-light) !important;
    box-shadow: none;
}

.btn-simple-danger {
    color: var(--bs-danger) !important;
}

.btn-simple-danger:hover,
.btn-simple-danger:focus {
    background-color: var(--bs-danger-light) !important;
    box-shadow: none;
}

.btn {
    border-radius: var(--default-border-radius);
    -webkit-border-radius: var(--default-border-radius);
    -moz-border-radius: var(--default-border-radius);
    -ms-border-radius: var(--default-border-radius);
    -o-border-radius: var(--default-border-radius);
    font-weight: 500;
}

/* primary start */
.btn-check:focus+.btn-primary,
.btn-primary:focus,
.btn-primary:hover {
    -webkit-box-shadow: 0 8px 25px -8px var(--bs-primary);
    box-shadow: 0 8px 25px -8px var(--bs-primary);
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    -webkit-box-shadow: 0 8px 25px -8px var(--bs-primary);
    box-shadow: 0 8px 25px -8px var(--bs-primary);
}

/* primary end */

/* danger  start*/
.btn-danger {
    color: #fff;
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-danger:hover {
    color: #fff;
    background-color: #e14c4d;
    border-color: #e14c4d;
}

.btn-check:focus+.btn-danger,
.btn-danger:focus,
.btn-danger:hover {
    color: #fff;
    background-color: #e14c4d;
    border-color: #e14c4d;
    -webkit-box-shadow: 0 8px 25px -8px var(--bs-danger);
    box-shadow: 0 8px 25px -8px var(--bs-danger);
}

.btn-check:active+.btn-danger:focus,
.btn-check:checked+.btn-danger:focus,
.btn-danger.active:focus,
.btn-danger:active:focus,
.show>.btn-danger.dropdown-toggle:focus {
    -webkit-box-shadow: 0 8px 25px -8px var(--bs-danger);
    box-shadow: 0 8px 25px -8px var(--bs-danger);
}


.btn-check:active+.btn-danger,
.btn-check:checked+.btn-danger,
.btn-danger.active,
.btn-danger:active,
.show>.btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #e14c4d;
    border-color: #e14c4d;
}

/* danger end */


.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.input-group .btn-sm.btn-icon {
    width: 35px;
    height: 35px;
}

.btn-group-sm>.btn,
.btn-sm {
    border-radius: var(--default-border-radius);
    -webkit-border-radius: var(--default-border-radius);
    -moz-border-radius: var(--default-border-radius);
    -ms-border-radius: var(--default-border-radius);
    -o-border-radius: var(--default-border-radius);
}





.btn-anchor {
    font-weight: 500;
    color: var(--bs-primary);
    cursor: pointer;
}

.btn-anchor:hover {
    color: var(--bs-primary);
}

.btn-refresh {
    position: relative;
    color: var(--bs-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 24px;
    height: 24px;
    padding: 12px;
    border-radius: 4px;
}

.btn-refresh:hover {
    background-color: var(--bs-primary-light);
}

.btn-refresh:focus,
.btn-refresh:active {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
    background-color: var(--bs-primary-light);
}

.swiftui-btn-group {
    background-color: #efefef;
    padding: 6px;
    border-radius: var(--default-border-radius);
    -webkit-border-radius: var(--default-border-radius);
    -moz-border-radius: var(--default-border-radius);
    -ms-border-radius: var(--default-border-radius);
    -o-border-radius: var(--default-border-radius);
}

.dark .swiftui-btn-group {
    background-color: #2a2a2a;
}

.swiftui-btn-group button:focus {
    box-shadow: none;
    outline: none;
}

.swiftui-btn-group button {
    margin-right: 4px;
}

.swiftui-btn-group button:last-of-type,
.swiftui-btn-group button:last-child {
    margin-right: 0;
}

.swiftui-btn-group button {
    opacity: 0.75;
    color: var(--color);
    border-radius: var(--default-border-radius) !important;
    -webkit-border-radius: var(--default-border-radius) !important;
    -moz-border-radius: var(--default-border-radius) !important;
    -ms-border-radius: var(--default-border-radius) !important;
    -o-border-radius: var(--default-border-radius) !important;
}

.swiftui-btn-group button:hover {
    opacity: 1;
    color: var(--color);
    border-radius: var(--default-border-radius) !important;
    -webkit-border-radius: var(--default-border-radius) !important;
    -moz-border-radius: var(--default-border-radius) !important;
    -ms-border-radius: var(--default-border-radius) !important;
    -o-border-radius: var(--default-border-radius) !important;
}

.swiftui-btn-group button.active,
.swiftui-btn-group button.active:hover {
    background-color: var(--bg-card);
    box-shadow: 2px 2px 5px -3px rgba(0, 0, 0, .5);
    opacity: 1;
}

/************************* buttons start *************************/

.image-preview-box {
    position: relative;
    width: 200px;
    height: 200px;
}

.image-preview-box>img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}