@font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-Bold.woff2') format('woff2'),
         url('../fonts/Montserrat-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-BoldItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-BoldItalic.woff') format('woff');
     font-weight: bold;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2'),
         url('../fonts/Montserrat-ExtraBold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-ExtraLightItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-ExtraLightItalic.woff') format('woff');
     font-weight: 200;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-ExtraBoldItalic.woff') format('woff');
     font-weight: bold;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-ExtraLight.woff2') format('woff2'),
         url('../fonts/Montserrat-ExtraLight.woff') format('woff');
     font-weight: 200;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-Italic.woff2') format('woff2'),
         url('../fonts/Montserrat-Italic.woff') format('woff');
     font-weight: normal;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-LightItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-LightItalic.woff') format('woff');
     font-weight: 300;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-Light.woff2') format('woff2'),
         url('../fonts/Montserrat-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-MediumItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-MediumItalic.woff') format('woff');
     font-weight: 500;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-Medium.woff2') format('woff2'),
         url('../fonts/Montserrat-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-Regular.woff2') format('woff2'),
         url('../fonts/Montserrat-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2'),
         url('../fonts/Montserrat-SemiBold.woff') format('woff');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-SemiBoldItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-SemiBoldItalic.woff') format('woff');
     font-weight: 600;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-Thin.woff2') format('woff2'),
         url('../fonts/Montserrat-Thin.woff') format('woff');
     font-weight: 100;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-ThinItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-ThinItalic.woff') format('woff');
     font-weight: 100;
     font-style: italic;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-Black.woff2') format('woff2'),
         url('../fonts/Montserrat-Black.woff') format('woff');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Montserrat';
     src: url('../fonts/Montserrat-BlackItalic.woff2') format('woff2'),
         url('../fonts/Montserrat-BlackItalic.woff') format('woff');
     font-weight: 900;
     font-style: italic;
     font-display: swap;
 }

 :root {
     --main: #FF662F;
     --main-2: #f6ede9;
     --bg-main: rgb(245 105 43);
     --red: rgba(230, 21, 21, 0.988);
     --red2: #d25d5d;
     --white: #FFFFFF;
     --light: #000000;
     --green: #5cc184;
     --hover-bg: rgb(246, 151, 101);
     --active: #ff662f9f;
     --yellow: #f8ac59;
     --cyan: #45c5cd;
     --text-muted: #000000;
     --secondary: #f7ac49;
     --purple: #a66500;
     --bs-body-color: #000000;
     --auth-gradient: linear-gradient(140deg, #FF662F 0, #FFFFFF 100%);
 }

 ::-webkit-input-placeholder {
     color: var(--bg-main);
 }

 body,
 html {
     font-family: 'Montserrat';
     overflow-x: hidden;
 }

 a {
     transition: 0.3s ease-in-out;
     text-decoration: none;
 }

 section {
     padding: 80px 0;
     overflow: hidden;
 }

 ::-webkit-scrollbar {
     width: 4px;
     height: 4px;
     background-color: var(--bg-main);
     border-radius: .5rem;
 }

 ::-webkit-scrollbar-thumb {
     background-color: var(--purple);
     border-radius: .5rem;
 }

 input,
 textarea {
     color: var(--bg-main) !important;
 }

 /* comman css */
 /* .text-white,.text-light {
     color: var(--bs-body-color) !important;
 } */
 .white {
     color: var(--white);
 }

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

 .text-white,
 .text-light {
     color: var(--white) !important;
 }

 .text-light {
     font-weight: 500 !important;
 }

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

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

 .bg-main2 {
     background-color: var(--bg-main) !important;
 }

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

 .w-fit {
     width: fit-content !important;
 }

 .h-fit {
     height: fit-content !important;
 }

 .cursor-pointer {
     cursor: pointer !important;
 }

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

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

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

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

 .text-redirect {
     font-size: 12px;
     color: var(--main);
     border-bottom: 1px dashed #eaedf1 !important;
     font-weight: 700 !important;
     margin-left: .3125rem !important;
 }

 .comman-btn {
     text-align: center;
     width: 100%;
     height: 44px;
     line-height: 44px;
     border-radius: 4px;
     color: var(--white);
     border: 1px solid var(--main);
     background-color: var(--main);

     &:hover {
         opacity: 60%;
     }
 }

 .form-label {
     margin-bottom: .4rem;
     font-size: .75rem;
     font-weight: 500;
     color: var(--bs-body-color);
 }

 .form-group {
     margin: .5rem 0;
 }

 .form-control,
 .form-select {
     --bs-border-opacity: 1;
     --bs-bg-opacity: 0.5;
     background-color: var(--hover-bg) !important;
     padding-top: .5rem !important;
     padding-bottom: .5rem !important;
     color: var(--bs-body-color) !important;
     border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;

     &::-webkit-input-placeholder {
         color: var(--bs-body-color);
     }
 }

 .badge-success {
     background-color: rgb(15, 152, 70);
     color: var(--white);
     font-size: 12px !important;

     & i {
         font-size: 12px !important;
         margin-right: .25rem;
     }
 }

 .badge-danger {
     background-color: rgba(230, 21, 21, 0.988);
     color: var(--white);
     font-size: 12px !important;

     & i {
         font-size: 12px !important;
         margin-right: .25rem;
     }
 }

 .badge-warning {
     background-color: var(--yellow);
     color: var(--white);
     font-size: 12px !important;

     & i {
         font-size: 12px !important;
         margin-right: .25rem;
     }
 }

 .badge-main {
     background-color: rgba(97, 74, 227, 0.289);
     color: var(--purple);
     font-size: 10px !important;
     font-weight: 300 !important;

     & i {
         font-size: 10px !important;
         margin-right: .25rem;
     }
 }

 .users {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     overflow: hidden;

     & img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

 .user {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     overflow: hidden;
     flex: 0 0 auto;
     margin: 0 auto;

     & img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

 .users-big {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     overflow: hidden;

     & img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

 .table-icon {
     width: 30px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     color: var(--white);
     background-color: var(--bg-main);
     border-radius: .2rem;
     transition: all .3s ease-in-out;

     & i {
         font-size: 18px;
     }

     &:hover {
         opacity: 40%;
         transform: scale(0.9);
     }
 }

 .comman-heading {
     font-size: 22px;
     color: var(--light);
 }

 .product {
     width: 80px;
     height: 40px;
     border-radius: .25rem;
     padding: .2rem .5rem;
     background-color: var(--active);
     overflow: hidden;

     & img {
         width: 100%;
         height: 100%;
     }
 }

 /* comman css */
 .flex-auto {
     flex: 0 0 auto;
 }

 .bg-auth {
     width: 100%;
     background: var(--auth-gradient);

     & .account-pages {
         align-items: center;
         display: flex;
         min-height: 100vh;
     }

     & .card.auth-card {
         background-color: var(--white);
         margin-bottom: 1.5625rem;
         box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
     }
 }

 .bg-main-background {
     background-color: var(--white);
 }

 .sidebar {
     background-color: var(--white);
     width: 20%;
     height: 100vh;
     overflow-y: auto;
     overflow-x: hidden;
     transition: all .3s ease-in-out;
     padding-bottom: 1.25rem;

     &.active {
         width: 5%;
         overflow-x: hidden;

         & .nav-items {
             overflow-x: hidden;
         }

         & .nav-link {
             white-space: nowrap;

             & span {
                 margin-right: 30px;
                 padding-left: 8px;
             }
         }

         .logo-wrapper {
             & .logo {
                 width: 50px;
             }
         }
     }
 }

 .main-content {
     width: 79%;
     transition: all .3s ease-in-out;

     &.active {
         width: 94%;
     }
 }

 .header {
     width: 100%;
     border-top-left-radius: 15px;
     border-top-right-radius: 15px;
     background-color: var(--main);
     margin-top: 10px;
     padding: 0 1rem;
     height: 70px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-bottom: 1px solid var(--white);
 }

 .content-part {
     padding: 1.25rem;
     height: calc(100vh - 80px);
     background-color: var(--main);
     overflow-y: auto;
     scroll-behavior: smooth;
     overflow-x: hidden;
 }

 .toggle-btn {
     background-color: transparent;
     border: 0;

     & img {
         width: 24px;
         height: 24px;
     }
 }

 .header-dropdown {
     & .user {
         width: 32px;
         height: 32px;
         overflow: hidden;
         border-radius: 50%;
         cursor: pointer;

         & img {
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
     }

     & .dropdown-menu {
         background-color: var(--main);

         & .dropdown-item {
             font-size: 12px;
             padding: 5px 8px;
             color: var(--white);
             cursor: pointer;

             & a {
                 color: var(--white);

                 & span {
                     display: inline-block;
                     width: 20px;

                     & i {
                         font-size: 12px;
                     }
                 }
             }

             &:hover {
                 background-color: var(--hover-bg);
                 color: #fff;
             }
         }
     }
 }

 .logo-wrapper {
     width: 100%;
     height: 80px;
     display: flex;
     /* flex-direction: column; */
     align-items: center;
     /* justify-content: center; */
     gap: 10px;
     border-bottom: 1px solid var(--bg-main);
     padding: 1rem;

     & h2 {
         font-size: 16px;
         font-weight: 700;
         margin: 0;
         color: var(--bs-body-color);
         white-space: nowrap;
     }

     & .logo {
         width: 70px;
         transition: all .3s ease-in-out;
     }
 }

 .nav-items {
     padding: 1rem;
     height: calc(100vh - 100px);
     overflow-y: auto;
     transition: all .3s ease-in-out;
     scroll-behavior: smooth;

     &::-webkit-scrollbar {
         width: 0;
     }

     &:hover {
         &::-webkit-scrollbar {
             width: 4px;
             height: 4px;
             background-color: transparent;
         }

         &::-webkit-scrollbar-thumb {
             background-color: var(--hover-bg);
             border-radius: .5rem;
         }
     }

     & .nav-link {
         height: 40px;
         width: 100%;
         padding-left: .5rem;
         cursor: pointer;
         border-radius: .5rem;
         margin: .5rem 0;
         font-size: 14px;
         font-weight: 600;
         transition: all .3s ease-in-out;
         position: relative;
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
         gap: 5px;

         &.active {
             font-weight: 600;
             color: var(--white);
             background-color: var(--main);

             & span {
                 & i {
                     font-size: 14px;
                     color: #FFFFFF !important;
                 }
             }
         }
     }

     & span {
         display: inline-block;
         width: 20px;

         & i {
             font-size: 14px;
             color: var(--light);
         }
     }
 }

 .status {
     border-radius: 0.35rem;
     padding: 1.25rem 1rem;
     background-color: var(--hover-bg);
     box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
     transition: all .3s ease-in-out;

     &:hover {
         margin-top: -10px;
     }

     & .icon-design {
         width: 3.5rem;
         height: 3.5rem;
         line-height: 3.5rem;
         text-align: center;
         border-radius: 0.35rem;
         font-size: 2rem !important;
         background-color: var(--white);
         transition: all .3s ease-in-out;

         &:hover {
             background-color: var(--main);
             cursor: pointer;

             & i {
                 color: var(--white);
             }
         }

         & i {
             color: var(--main);
         }
     }

     & .status-heading {
         color: var(--text-muted);
         font-size: 14px;
         margin-top: .75rem;
         margin-bottom: .2rem;
     }

     & .status-count {
         font-size: 18px;
         color: var(--white);
         font-weight: 700 !important;
         margin: 0;
     }

     & .status-chart {
         display: flex;
         justify-content: flex-end;
         align-items: end;
         flex-direction: column;
         height: 100%;
     }
 }

 canvas {
     width: 100%;
     max-width: 100%;
     height: 167px !important;
 }

 .comman-design {
     width: 100%;
     border-radius: .25rem;
     padding: 1.25rem;
     background-color: var(--white);
 }

 #incomeExpensesChart {
     height: 400px !important;
 }

 .custom-dropdown {
     background-color: var(--bg-main);

     & .dropdown-item {
         &:hover {
             background-color: var(--main);
         }
     }
 }

 .comman-table {
     & .table {
         & thead {
             & tr {
                 & th {
                     background-color: transparent;
                     color: var(--light);
                     font-size: 14px;
                     font-weight: 500;
                     text-align: center;
                 }
             }
         }

         & tbody {
             & tr {
                 & td {
                     background-color: transparent;
                     color: var(--light);
                     font-size: 12px;
                     font-weight: 500;
                     vertical-align: middle;
                     text-align: center;
                 }
             }
         }
     }
 }

 .pagination {
     margin-bottom: 0px;

     & .page-item {

         & .page-link {
             width: 40px;
             height: 40px;
             line-height: 30px;
             margin: 0 .25rem;
             border-radius: .25rem;
             color: var(--white);
             text-align: center;
             background-color: var(--main);

             &:hover {
                 background-color: var(--light);
             }
         }

         &.active {
             & .page-link {
                 border: 1px solid var(--white);
                 background-color: var(--active);
                 color: var(--white);
             }
         }
     }
 }

 .bg-img {
     width: 100%;
     border-radius: .5rem;
     overflow: hidden;

     & img {
         width: 100%;
         height: fit-content;
         object-fit: cover;
     }
 }

 .form-switch {
     & .form-check-input:checked {
         background-color: var(--main);
         border: 1px solid var(--main);
     }
 }

 .comman-transactions-card {
     background-color: var(--purple);
     color: var(--white);
     padding: 0 1.25rem;
     border-radius: .5rem;

     & .transactions-card-header {
         display: flex;
         justify-content: space-between;
         align-items: center;

         & .chip {
             width: 40px;
             height: 40px;

             & img {
                 width: 100%;
                 height: 100%;
                 object-fit: contain;
             }
         }

         & .card-logo {
             width: 100px;
             height: fit-content;

             & img {
                 width: 100%;
                 object-fit: contain;
             }
         }
     }

     & .transactions-card-body {
         padding-bottom: 1.25rem;
     }
 }

 #map {
     height: 500px;
     width: 100%;
 }

 #editor {
     height: 500px;
     background-color: var(--bg-main);
 }

 .ck-editor__editable,
 .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused),
 .ck-reset_all :not(.ck-reset_all-excluded *),
 .ck.ck-reset,
 .ck.ck-reset_all {
     background-color: var(--bg-main) !important;
     color: var(--white) !important;
 }

 .nav {
     &.nav-pills {
         & .nav-link {
             color: var(--active);
         }

         & .nav-link.active {
             background-color: var(--active);
             color: var(--white);
         }
     }
 }

 /* Bell Effect */
 .notification-bell {
     position: relative;
 }

 .bell-con {
     fill: url(#fillGradient);
     z-index: 9;
     position: relative;
     border-radius: 32px;
     width: 32px;
     height: 32px;
     line-height: 32px;
     display: flex;
     justify-content: center;
     background-color: var(--green);
     text-align: center;

 }

 .alarm-notify .bell-con {
     animation-name: shake;
     animation: shake 6s 0.5s ease-in-out infinite;
 }

 .notification-count {
     display: flex;
     background: var(--red2);
     color: var(--white);
     width: 20px;
     justify-content: center;
     align-items: center;
     height: 20px;
     border-radius: 50px;
     position: absolute;
     top: -10px;
     right: -10px;
     z-index: 9;
     font-size: 12px;
     border: 2px solid var(--white);
 }

 .alarm-notify.notification-bell:before {
     content: '';
     background: var(--green);
     opacity: 0.4;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50px;
     transform: scale(1);
     animation-name: transformScale;
     animation-duration: 1.5s;
     animation-delay: 0;
     animation-iteration-count: infinite;
 }

 .alarm-notify.notification-bell:after {
     content: '';
     background: var(--green);
     opacity: 0.4;
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     border-radius: 50px;
     transform: scale(1);
     animation-name: transformScale;
     animation-duration: 1.5s;
     animation-delay: 0.75s;
     animation-iteration-count: infinite;
 }

 @keyframes transformScale {
     0% {
         transform: scale(1);
         opacity: 0.4;
     }

     100% {
         transform: scale(2.5);
         opacity: 0.01;
     }
 }

 @keyframes shake {
     0% {
         transform: rotate(0);
     }

     1% {
         transform: rotate(30deg);
     }

     3% {
         transform: rotate(-28deg);
     }

     5% {
         transform: rotate(34deg);
     }

     7% {
         transform: rotate(-32deg);
     }

     9% {
         transform: rotate(30deg);
     }

     11% {
         transform: rotate(-28deg);
     }

     13% {
         transform: rotate(26deg);
     }

     15% {
         transform: rotate(-24deg);
     }

     17% {
         transform: rotate(22deg);
     }

     19% {
         transform: rotate(-20deg);
     }

     21% {
         transform: rotate(18deg);
     }

     23% {
         transform: rotate(-16deg);
     }

     25% {
         transform: rotate(14deg);
     }

     27% {
         transform: rotate(-12deg);
     }

     29% {
         transform: rotate(10deg);
     }

     31% {
         transform: rotate(-8deg);
     }

     33% {
         transform: rotate(6deg);
     }

     35% {
         transform: rotate(-4deg);
     }

     37% {
         transform: rotate(2deg);
     }

     39% {
         transform: rotate(-1deg);
     }

     41% {
         transform: rotate(1deg);
     }

     43% {
         transform: rotate(0);
     }

     100% {
         transform: rotate(0);
     }
 }

 @keyframes gradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 /* Language Selector  */
 .custom-dropdown {
     position: relative;
     display: inline-block;
     width: 130px;
 }

 .dropdown-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     height: 32px;
     cursor: pointer;
     background: #fff;
 }

 .dropdown-toggle img {
     width: 20px;
     height: 15px;
     margin-right: 10px;
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     background: #fff;
     border: 1px solid #ccc;
     border-radius: 5px;
     display: none;
     list-style: none;
     padding: 0;
     margin: 5px 0;
     z-index: 1000;
 }

 .dropdown-menu li {
     padding: 10px;
     display: flex;
     align-items: center;
     cursor: pointer;
 }

 .dropdown-menu li:hover {
     background: #f0f0f0;
 }

 .dropdown-menu img {
     width: 20px;
     height: 15px;
     margin-right: 10px;
 }

 .comman-design .dropdown .dropdown-toggle {
     height: 44px;
 }

 .video-table {
     width: 100px;
     height: 60px;
 }

 .upload-box {
     height: 200px;
     cursor: pointer;
     background-color: #f8f9fa;
 }

 .upload-box:hover {
     background-color: #e9ecef;
 }

 .preview-image {
     width: 100%;
     max-height: 200px;
     object-fit: cover;
     border-radius: 8px;
     margin-bottom: 10px;
 }

 .offcanvas-custom {
     width: 40% !important;
 }

 .form-check-input:checked {
     background-color: var(--main);
     border-color: var(--main);
 }

 .form-check-input:focus {
     border-color: var(--main);
     outline: 0;
     box-shadow: 0 0 0 .25rem var(--hover-bg);
 }

 .business-logo {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border-radius: 50%;
     box-shadow: var(--bs-shadow);
     position: absolute;
     bottom: -44px;
     left: 50%;
     transform: translateX(-50%);
 }

 .business-logo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 .user-sm{
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    border: 5px solid var(--main);
 }
 .user-sm img{
    width: 100%;
    height: 100%;
    object-fit: cover;
 }