/** 
* -----------------------------------------------------------------
* Template : TryPOS - Reliable, fast and secured POS Application
* Author : TryPlusIT
* Author URI : https://tryplusit.com/
* -----------------------------------------------------------------
*/
/* -------------TABLE OF CONTENT----------  */
/*
01. Typography
02. Common Classes
03. Header Css Start
04. Sidebar Css
05. Dashboard Page
06. Content Common
07. Table Common
08. Product Table
09. Create Product
10. Create Invoice
11. Customer Page
12. Categories Page
13. Brand Page
14. Reports Page
15. Expenses List
16. Settings Common
17. Settings Appearance
18. Settings UserManagement
19. Settings Roles and Permissions
20. Inventory Settings Page
21. Reports settings Page
22. Payment method setting Page
23. Backup and Restore Setting Page
24. Transaction Setup Setting Page
25. Branch Management Setting Page
26. Update Settings Page
27. Logout Page Style
28. Help and info Page
29. Login Page Style
*/
/* Responsive Grid */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

[class^=col-] {
  padding-right: 15px;
  padding-left: 15px;
  flex-grow: 1;
}

/* Gutter */
.g-0 {
  margin-right: 0;
  margin-left: 0;
}

.g-0 > [class^=col-] {
  padding-right: 0;
  padding-left: 0;
}

.g-1 {
  margin-right: -5px;
  margin-left: -5px;
}

.g-1 > [class^=col-] {
  padding-right: 5px;
  padding-left: 5px;
}

.g-2 {
  margin-right: -10px;
  margin-left: -10px;
}

.g-2 > [class^=col-] {
  padding-right: 10px;
  padding-left: 10px;
}

.g-3 {
  margin-right: -15px;
  margin-left: -15px;
}

.g-3 > [class^=col-] {
  padding-right: 15px;
  padding-left: 15px;
}

/* Vertical Gutter */
.gy-0 > [class^=col-] {
  margin-bottom: 0;
}

.gy-1 > [class^=col-] {
  margin-bottom: 5px;
}

.gy-2 > [class^=col-] {
  margin-bottom: 10px;
}

.gy-3 > [class^=col-] {
  margin-bottom: 15px;
}

.gy-4 > [class^=col-] {
  margin-bottom: 20px;
}

.gy-5 > [class^=col-] {
  margin-bottom: 30px;
}

@media (min-width: 768px) {
  .gy-md-0 > [class^=col-] {
    margin-bottom: 0;
  }
  .gy-md-1 > [class^=col-] {
    margin-bottom: 5px;
  }
  .gy-md-2 > [class^=col-] {
    margin-bottom: 10px;
  }
  .gy-md-3 > [class^=col-] {
    margin-bottom: 15px;
  }
  .gy-md-4 > [class^=col-] {
    margin-bottom: 20px;
  }
  .gy-md-5 > [class^=col-] {
    margin-bottom: 30px;
  }
}
@media (min-width: 992px) {
  .gy-lg-0 > [class^=col-] {
    margin-bottom: 0;
  }
  .gy-lg-1 > [class^=col-] {
    margin-bottom: 5px;
  }
  .gy-lg-2 > [class^=col-] {
    margin-bottom: 10px;
  }
  .gy-lg-3 > [class^=col-] {
    margin-bottom: 15px;
  }
  .gy-lg-4 > [class^=col-] {
    margin-bottom: 20px;
  }
  .gy-lg-5 > [class^=col-] {
    margin-bottom: 30px;
  }
}
/* Element Order  */
.order-first {
  order: -1;
}

.order-last {
  order: 9999;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

/* Responsive Order */
@media (min-width: 768px) {
  .order-md-first {
    order: -1;
  }
  .order-md-last {
    order: 9999;
  }
  .order-md-0 {
    order: 0;
  }
  .order-md-1 {
    order: 1;
  }
  .order-md-2 {
    order: 2;
  }
  .order-md-3 {
    order: 3;
  }
  .order-md-4 {
    order: 4;
  }
  .order-md-5 {
    order: 5;
  }
}
@media (min-width: 992px) {
  .order-lg-first {
    order: -1;
  }
  .order-lg-last {
    order: 9999;
  }
  .order-lg-0 {
    order: 0;
  }
  .order-lg-1 {
    order: 1;
  }
  .order-lg-2 {
    order: 2;
  }
  .order-lg-3 {
    order: 3;
  }
  .order-lg-4 {
    order: 4;
  }
  .order-lg-5 {
    order: 5;
  }
}
@media (min-width: 1200px) {
  .order-xl-first {
    order: -1;
  }
  .order-xl-last {
    order: 9999;
  }
  .order-xl-0 {
    order: 0;
  }
  .order-xl-1 {
    order: 1;
  }
  .order-xl-2 {
    order: 2;
  }
  .order-xl-3 {
    order: 3;
  }
  .order-xl-4 {
    order: 4;
  }
  .order-xl-5 {
    order: 5;
  }
}
@media (min-width: 1400px) {
  .order-xxl-first {
    order: -1;
  }
  .order-xxl-last {
    order: 9999;
  }
  .order-xxl-0 {
    order: 0;
  }
  .order-xxl-1 {
    order: 1;
  }
  .order-xxl-2 {
    order: 2;
  }
  .order-xxl-3 {
    order: 3;
  }
  .order-xxl-4 {
    order: 4;
  }
  .order-xxl-5 {
    order: 5;
  }
}
.col-bs {
  flex: 1;
}

.col-bs-1 {
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}

.col-bs-2 {
  flex: 0 0 16.6667%;
  max-width: 16.6667%;
}

.col-bs-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-bs-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

.col-bs-5 {
  flex: 0 0 41.6667%;
  max-width: 41.6667%;
}

.col-bs-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-bs-7 {
  flex: 0 0 58.3333%;
  max-width: 58.3333%;
}

.col-bs-8 {
  flex: 0 0 66.6667%;
  max-width: 66.6667%;
}

.col-bs-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-bs-10 {
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}

.col-bs-11 {
  flex: 0 0 91.6667%;
  max-width: 91.6667%;
}

.col-bs-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .col-sm {
    flex: 1;
  }
  .col-sm-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-sm-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-sm-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-sm-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-sm-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .col-md {
    flex: 1;
  }
  .col-md-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-md-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-md-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-md-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-md-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .col-lg {
    flex: 1;
  }
  .col-lg-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-lg-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-lg-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-lg-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-lg-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Extra Large devices (1200px and up) */
@media (min-width: 1200px) {
  .col-xl {
    flex: 1;
  }
  .col-xl-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-xl-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-xl-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-xl-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-xl-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Extra Extra Large devices (1400px and up) */
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1;
  }
  .col-xxl-1 {
    flex: 0 0 8.3333%;
    max-width: 8.3333%;
  }
  .col-xxl-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }
  .col-xxl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
  .col-xxl-5 {
    flex: 0 0 41.6667%;
    max-width: 41.6667%;
  }
  .col-xxl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 58.3333%;
    max-width: 58.3333%;
  }
  .col-xxl-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
  }
  .col-xxl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 83.3333%;
    max-width: 83.3333%;
  }
  .col-xxl-11 {
    flex: 0 0 91.6667%;
    max-width: 91.6667%;
  }
  .col-xxl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
/* Mixins */
/* ## Media Query  mixins ## */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

/* fonts */
/* basic colors */
/* highlights colors */
/* RGBA colors */
/* ## global css variables ## */
:root {
  /* components colors */
  --primaryColor: #4c4c9d;
  --secondaryColor: #ef715a;
  --primaryBgColor: #f5f5f5;
  --secondaryBgColor: #f7fafc;
  --primaryBtnBgColor: #cdcccc;
  --secondaryHoverBgColor: #c1d7e5;
  --borderColor: #cdcccc;
  --fontColor: #2d2d2d;
  --titleAndSubtitle: rgba(0, 0, 0, 0.4392156863);
  --inputDateColor: #cdcccc;
  /* Status Colors*/
  --primary: #4c4c9d;
  --success: #3bd470;
  --warning: #fe9526;
  --danger: #ef715a;
  --default: #07090c;
  --light: #f7fafc;
  /* base colors */
  --white: #ffffff;
  --black: #000000;
  --gray: #808080;
  --light-gray: #d3d3d3;
  --dark-gray: #333333;
  --red: #ff0000;
  --green: #00ff00;
  --blue: #0000ff;
  --yellow: #ffff00;
  --orange: #ffa500;
  --pink: #ffc0cb;
  --purple: #800080;
  --teal: #008080;
  --cyan: #00ffff;
  --indigo: #4b0082;
  --lime: #00ff00;
  --brown: #a52a2a;
  --gold: #ffd700;
  --silver: #c0c0c0;
  --navy: #000080;
  /* Highlights*/
  --highlight1: #3bd470;
  --highlight2: #6d92f0;
  --highlight3: #d250fd;
  --highlight4: #3169e5;
  --highlight5: #ef4643;
  --highlight6: #fe9526;
  --highlight7: #447eff;
  --highlight8: #07090c;
  /* RGBA colors */
  --popupBgColor: rgba(0, 0, 0, 0.5);
  --popupContentShadow: rgba(0, 0, 0, 0.3);
  --primaryBorderColor: rgba(76, 76, 157, 0.3);
  --commonRGBAColor: rgba(0, 0, 0, 0.5);
}

/* font-face */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraBold.woff2") format("woff2"), url("../fonts/Poppins-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-ExtraLight.woff2") format("woff2"), url("../fonts/Poppins-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Light.woff2") format("woff2"), url("../fonts/Poppins-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Medium.woff2") format("woff2"), url("../fonts/Poppins-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Thin.woff2") format("woff2"), url("../fonts/Poppins-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2"), url("../fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ==== 00. Typography start ====*/
* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow: unset;
  color: #2d2d2d;
}

h1,
.h1 {
  font-size: 34px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  h1,
  .h1 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1190px) {
  h1,
  .h1 {
    font-size: 64px;
  }
}

h2,
.h2 {
  font-weight: 700;
  font-size: 30px;
}
@media only screen and (min-width: 1190px) {
  h2,
  .h2 {
    font-size: 35px;
  }
}

h3,
.h3 {
  font-weight: 700;
  font-size: 25px;
}
@media only screen and (min-width: 1190px) {
  h3,
  .h3 {
    font-size: 30px;
  }
}

h4,
.h4 {
  font-weight: 700;
  font-size: 20px;
}
@media only screen and (min-width: 1190px) {
  h4,
  .h4 {
    font-size: 22px;
  }
}

h5,
.h5 {
  font-weight: 700;
  font-size: 18px;
}
@media only screen and (min-width: 1190px) {
  h5,
  .h5 {
    font-size: 20px;
  }
}

h6,
.h6 {
  font-weight: 700;
  font-size: 16px;
}
@media only screen and (min-width: 1190px) {
  h6,
  .h6 {
    font-size: 18px;
  }
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

label {
  margin-bottom: 6px;
}

input {
  width: 100%;
  height: 50px;
  padding: 10px;
  font-weight: 400;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  margin-bottom: 20px;
  font-size: 16px;
}

input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4392156863);
}

input::placeholder {
  color: rgba(0, 0, 0, 0.4392156863);
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=search],
input[type=date],
[type=number],
textarea,
select {
  padding: 0px 10px;
  width: 100%;
  border-radius: 10px;
  height: 50px;
  border: 1px solid #000000;
  margin-bottom: 8px;
  outline-offset: 0px;
  font-size: 16px;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=date]:focus,
[type=number]:focus,
textarea:focus,
select:focus {
  outline: unset;
}
input[type=text] option,
input[type=email] option,
input[type=password] option,
input[type=tel] option,
input[type=url] option,
input[type=search] option,
input[type=date] option,
[type=number] option,
textarea option,
select option {
  font-size: 16px;
}

input[type=date] {
  font-size: 16px;
  margin: 0px;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  padding: 0px 10px;
  color: rgba(0, 0, 0, 0.4392156863);
}

input[type=radio] {
  accent-color: #4c4c9d;
}

textarea {
  height: 129px;
  padding: 10px;
}

input[type=submit],
input[type=button],
button {
  padding: 12px 18px;
  font-size: 16px;
  display: flex;
  border-radius: 25px;
  border: 0px;
  outline: 0px;
  cursor: pointer;
  outline: none;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}

button:focus {
  outline: none;
}

input[type=checkbox] {
  accent-color: #4c4c9d;
  border: 2px solid #4c4c9d;
}

input[type=submit] {
  min-width: 160px;
}
@media only screen and (min-width: 1200px) {
  input[type=submit] {
    min-width: 200px;
  }
}
@media only screen and (min-width: 1600px) {
  input[type=submit] {
    min-width: 282px;
  }
}

input[type=file] {
  margin: auto;
  border: 2px dashed #bbb;
  background-color: #fff;
  transition: border-color 0.25s ease-in-out;
  padding: 5px;
}
input[type=file]::file-selector-button {
  padding: 7px 10px;
  border-width: 0;
  border-radius: 2em;
  background-color: hsl(210, 70%, 30%);
  color: hsl(210, 40%, 90%);
  transition: all 0.25s ease-in-out;
  cursor: pointer;
  margin-right: 1em;
  font-size: 12px;
}
input[type=file]:hover {
  border-color: #888;
}
input[type=file]:hover::file-selector-button {
  background-color: hsl(210, 70%, 40%);
}

p,
ul,
ol,
table,
address {
  margin-bottom: 10px;
}

select {
  background-image: url("../images/dashboard/selectdown-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-repeat: no-repeat;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  background-color: #ffffff;
  height: 50px;
  padding: 0px 24px;
  margin-bottom: 16px;
}

/* ==== 01. Typography end ========== */
/* ==== 02. Common classes start ==== */
.btnTextHide {
  display: none;
}
@media only screen and (min-width: 768px) {
  .btnTextHide {
    display: block;
  }
}

.primaryBg {
  color: #ffffff;
  background-color: #4c4c9d;
}
.primaryBtn {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #4c4c9d;
  padding: 10px;
  border-radius: 25px;
  margin-bottom: 0px;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 992px) {
  .primaryBtn {
    padding: 8px 15px;
  }
}
.primaryBtn:hover {
  background-color: #6767b5;
}

.success {
  color: #2d2d2d;
}
.successBg {
  color: #2d2d2d;
  background-color: #3bd470;
}
.successBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #e2f9ea;
  padding: 10px;
  border-radius: 25px;
  margin-bottom: 0px;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 992px) {
  .successBtn {
    padding: 8px 15px;
  }
}
.successBtn:hover {
  background-color: #cdf4db;
}

.warning {
  color: #2d2d2d;
}
.warningBg {
  color: #2d2d2d;
  background-color: #fe9526;
}
.warningBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #fff8f1;
  padding: 10px;
  border-radius: 25px;
  margin-bottom: 0px;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 992px) {
  .warningBtn {
    padding: 8px 15px;
  }
}
.warningBtn:hover {
  background-color: #ffecd8;
}

.danger {
  color: #2d2d2d;
}
.dangerBg {
  color: #2d2d2d;
  background-color: #ef715a;
}
.dangerBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #fde9e5;
  padding: 10px;
  border-radius: 25px;
  margin-bottom: 0px;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 992px) {
  .dangerBtn {
    padding: 8px 15px;
  }
}
.dangerBtn:hover {
  background-color: #fad5ce;
}

.default {
  color: #2d2d2d;
}
.defaultBg {
  color: #2d2d2d;
  background-color: #07090c;
}
.defaultBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #07090c;
  padding: 10px;
  border-radius: 25px;
  margin-bottom: 0px;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 992px) {
  .defaultBtn {
    padding: 8px 15px;
  }
}
.defaultBtn:hover {
  background-color: #36455d;
}

.light {
  color: #000000;
}
.lightBg {
  color: #2d2d2d;
  background-color: #f7fafc;
}
.lightBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #f7fafc;
  padding: 10px;
  border-radius: 25px;
  margin-bottom: 0px;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 992px) {
  .lightBtn {
    padding: 8px 15px;
  }
}
.lightBtn:hover {
  background-color: #e4eef5;
}

.statusCirclePrimary {
  display: block;
  background-color: #e6e6e6;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.statusCirclePrimary:hover {
  background-color: #3b3b7b;
}

.statusCircleSuccess {
  display: block;
  background-color: #28b458;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.statusCircleSuccess:hover {
  background-color: #28b458;
}

.statusCircleWarning {
  display: block;
  background-color: #f07c01;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.statusCircleWarning:hover {
  background-color: #28b458;
}

.statusCircleDanger {
  display: block;
  background-color: #ea492c;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.statusCircleDanger:hover {
  background-color: #ea492c;
}

.statusCircleDefault {
  display: block;
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.statusCircleDefault:hover {
  background-color: black;
}

.nowrap {
  flex-wrap: nowrap;
}

.unset-btn {
  padding: 0px;
  margin: 0px;
  background-color: unset;
  outline: 0px;
  width: unset;
  height: unset;
  min-width: unset;
}

.container {
  width: 100%;
  max-width: 100%;
}

.container-fluid {
  width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  margin-right: auto;
  margin-left: auto;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.d-block {
  display: block;
}

.flexwrap {
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.main {
  width: 100%;
  display: block;
}

.fitContent {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.remove-padding {
  padding: unset;
}

.remove-margin {
  margin: unset;
}

.margin-auto {
  margin: auto !important;
}

.space-between {
  justify-content: space-between;
}

.redasterisk {
  color: #ff0000;
}

.form-submit-button {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  height: 100%;
  gap: 10px;
}

body.modal-open {
  overflow: hidden;
}

.modal-popup {
  /* Close Button */
  /* Show Modal */
  /* Keyframe animation */
}
.modal-popup .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
  overflow: auto;
  /* Modal Content */
}
.modal-popup .modal .modal-content {
  background: #ffffff;
  padding: 20px;
  width: 600px;
  max-width: 90%;
  border-radius: 8px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease-out;
}
.modal-popup .close {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  border: none;
  border-radius: 50px;
  z-index: 123;
}
.modal-popup .top-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  min-width: unset !important;
  background-color: #f0f5f9;
  padding: 0px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-popup .top-close:hover {
  background-color: gainsboro;
}
.modal-popup .show {
  display: flex;
  opacity: 1;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modal-popup .modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.modal-popup .modal-title .h3 {
  font-size: 20px;
  font-weight: 500;
  margin: 0px;
  padding: 0px;
}
.modal-popup .ss-main {
  height: 40px !important;
}

.item-popup {
  border-radius: 15px;
}
.item-popup .modal-content {
  padding: 20px !important;
}
@media only screen and (min-width: 768px) {
  .item-popup .modal-content {
    padding: 40px !important;
  }
}
.item-popup .modal-content .modal-title {
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 24px;
}
.item-popup .modal-content label {
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 12px;
  display: block;
  text-align: left;
  margin-bottom: 0px;
}
.item-popup .modal-content input {
  border-radius: 10px;
  border: 1px solid #cdcccc;
  height: 40px;
  margin: 0px;
}
.item-popup .modal-content textarea {
  height: 60px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  margin: 0px;
}
.item-popup .modal-content select {
  border-radius: 10px;
  border: 1px solid #cdcccc;
  background-color: unset;
  height: 40px;
  margin-bottom: 0px;
}
.item-popup .modal-content .btn_primary {
  position: unset;
  margin: 0px;
  padding: 6px 14px;
  gap: 6px;
}
.item-popup .modal-content .btn_secondary {
  gap: 6px;
  padding: 6px 14px;
}

.drag-drop-box {
  margin-bottom: 10px;
  display: block;
}
.drag-drop-box .upload-box {
  width: 100%;
  height: 90px;
  border-radius: 12px;
  border: 2px dashed rgba(76, 76, 157, 0.3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  background-color: #ffffff;
  transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.drag-drop-box .upload-box img {
  width: 24px;
}
.drag-drop-box .upload-box p {
  margin: 0px;
  padding: 5px 0px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
}
.drag-drop-box .upload-box span {
  font-size: 10px;
  font-weight: 600;
}
.drag-drop-box .upload-box.dragover {
  background-color: rgba(0, 128, 255, 0.2);
  /* Light blue */
  opacity: 0.7;
}
.drag-drop-box .gallery-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
}
.drag-drop-box .gallery-item {
  position: relative;
  width: 100%;
  height: 100px;
  height: auto;
}
.drag-drop-box .gallery-item .thumb-img {
  width: 60px;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.drag-drop-box .gallery-item img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.drag-drop-box .remove-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ff0000;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  max-height: unset;
  min-width: unset;
  font-size: 14px;
  cursor: pointer;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drag-drop-box .image-input {
  display: none;
}

.upload-container .upload-box {
  text-align: center;
  cursor: pointer;
  border-radius: 15px;
  border: 2px dashed #ccc;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.upload-container p {
  font-size: 16px;
  margin: 0px;
  font-weight: 400;
}
.upload-container .image-preview-container {
  position: relative;
  padding-top: 5px;
}
.upload-container .image-preview-container img {
  width: 100%;
  border-radius: 5px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.upload-container .remove-image {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #ff0000;
  color: #ffffff;
  width: 26px;
  height: 26px;
  text-align: center;
  border-radius: 50%;
  font-size: 20px;
  line-height: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-content: center;
  border: 2px solid rgba(205, 204, 204, 0.5);
}
.upload-container .delete-btn {
  display: block;
  margin-top: 5px;
  background: #ff0000;
  color: #ffffff;
  border: none;
  padding: 5px;
  cursor: pointer;
}

.action-btn-wrapper .action-btn {
  border: none;
  cursor: pointer;
  position: relative;
  margin: 0px auto;
}
.action-btn-wrapper .dropdown {
  padding: 5px;
  position: absolute;
  top: -4px;
  right: 32px;
  background: #ffffff;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  width: -moz-max-content;
  width: max-content;
  display: none;
  flex-direction: row;
  text-align: left;
  z-index: 99;
}
.action-btn-wrapper .dropdown a {
  padding: 4px 8px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 4px;
}
.action-btn-wrapper .dropdown a:last-child {
  margin-bottom: 0px;
}
.action-btn-wrapper .dropdown a img {
  width: 25px;
}
.action-btn-wrapper .dropdown a:hover {
  background: #f0f0f0;
  text-decoration: none;
}
.action-btn-wrapper .show {
  display: flex;
}

.switcher-btn {
  /* Ensure pointer cursor applies when hovering */
}
.switcher-btn .switch {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 22px;
}
.switcher-btn .switch input {
  display: none;
}
.switcher-btn .slider {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;
  border-radius: 15px;
  transition: background 0.3s;
}
.switcher-btn .slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #4c4c9d;
  border-radius: 50%;
  top: 2.5px;
  left: 3px;
  transition: all 0.3s;
}
.switcher-btn input:checked + .slider {
  background: #4c4c9d;
}
.switcher-btn input:checked + .slider::before {
  left: 22px;
  background: #fff;
}
.switcher-btn .switch:hover .slider {
  cursor: pointer;
}

.switcher-button {
  /* Ensure pointer cursor applies when hovering */
}
.switcher-button .title {
  margin-left: 10px;
}
.switcher-button .switch {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 22px;
}
.switcher-button .switch input {
  display: none;
}
.switcher-button .slider {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;
  border-radius: 15px;
  transition: background 0.3s;
}
.switcher-button .slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #4c4c9d;
  border-radius: 50%;
  top: 2.5px;
  left: 3px;
  transition: all 0.3s;
}
.switcher-button input:checked + .slider {
  background-color: #4c4c9d;
}
.switcher-button input:checked + .slider::before {
  left: 22px;
  background-color: #ffffff;
}
.switcher-button .switch:hover .slider {
  cursor: pointer;
}

.pagination {
  width: 100%;
  padding-top: 20px;
}
.pagination ul {
  width: 540px;
  margin: 0px;
  margin-left: auto;
  margin-bottom: auto;
  padding: 0px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
@media only screen and (min-width: 576px) {
  .pagination ul {
    width: 100%;
  }
}
@media only screen and (min-width: 850px) {
  .pagination ul {
    gap: 10px;
  }
}
@media only screen and (min-width: 1400px) {
  .pagination ul {
    gap: 15px;
  }
}
.pagination ul li {
  width: auto;
  gap: 5px;
  font-weight: 300;
}
@media only screen and (min-width: 750px) {
  .pagination ul li {
    gap: 10px;
  }
}
@media only screen and (min-width: 1400px) {
  .pagination ul li {
    gap: 15px;
  }
}
.pagination ul li a {
  font-family: "Inter";
  font-style: normal;
  font-size: 16px;
  text-decoration: none;
  font-weight: 300;
  font-size: 14px;
}
@media only screen and (min-width: 850px) {
  .pagination ul li a {
    font-size: 16px;
  }
}
.pagination ul li a :hover {
  background: #f7fafc;
  color: #4c4c9d;
  font-size: 17px;
  font-weight: 400;
}
.pagination ul li .active-pagination .page-number {
  background: #4c4c9d;
  color: #ffffff;
}
.pagination ul li .page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #2d2d2d;
  font-size: 14px;
  font-weight: 300;
}
@media only screen and (min-width: 850px) {
  .pagination ul li .page-number {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) {
  .pagination ul li .page-number {
    width: 40px;
    height: 40px;
  }
}
.pagination ul .prev-button,
.pagination ul .next-button {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pagination ul .prev-button,
  .pagination ul .next-button {
    display: block;
  }
}
.pagination ul .prev-button :hover,
.pagination ul .next-button :hover {
  color: #4c4c9d;
}
.pagination ul .item-perpage {
  display: none;
}
@media only screen and (min-width: 768px) {
  .pagination ul .item-perpage {
    display: block;
  }
}
.pagination ul .itempage-wraper {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 300;
}
@media only screen and (min-width: 850px) {
  .pagination ul .itempage-wraper {
    gap: 10px;
  }
}
@media only screen and (min-width: 1400px) {
  .pagination ul .itempage-wraper {
    gap: 15px;
  }
}
@media only screen and (min-width: 850px) {
  .pagination ul .itempage-wraper {
    font-size: 16px;
  }
}
.pagination ul .itempage-wraper label {
  margin: 0px;
}
.pagination ul .itempage-wraper select {
  width: 50px;
  margin: 0px !important;
  padding: 2px 12px !important;
  height: 30px;
  color: #000000;
  background-position: right 11px center;
  font-size: 14px;
  font-weight: 300;
}
@media only screen and (min-width: 850px) {
  .pagination ul .itempage-wraper select {
    font-size: 16px;
    width: 70px;
  }
}
@media only screen and (min-width: 1200px) {
  .pagination ul .itempage-wraper select {
    font-size: 16px;
  }
}

.shorting-data {
  flex-wrap: nowrap;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding: 0px;
  margin: 0px;
}
.shorting-data .shorting-button {
  display: block;
  gap: 5px;
}
.shorting-data .shorting-button button {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 12px;
  height: 12px;
  padding: 0px;
  background-color: unset;
}
.shorting-data .shorting-button button svg {
  width: 8px;
  height: 8px;
}
.shorting-data .shorting-button button svg path {
  fill: #4c4c9d;
}
.shorting-data .shorting-button button img {
  width: 8px;
  height: 8px;
}
.shorting-data .shorting-button button:hover {
  background-color: #4c4c9d;
}
.shorting-data .shorting-button button:hover svg path {
  fill: #ffffff;
}
.shorting-data .shorting-button button:hover img {
  filter: brightness(10.5);
}

.copyright-section {
  width: 100%;
  text-align: center;
}
.copyright-section p {
  margin: 0px;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 300;
}
.copyright-section p a {
  color: "Poppins", sans-serif;
}

.ps-20 {
  padding-left: 20px;
}

/* ==== 02. Common classes End ==== */
/* ==== 03. Header Css Start ====== */
.navbar {
  background-color: #4c4c9d;
  padding: 14px 0px;
}
@media only screen and (min-width: 768px) {
  .navbar {
    padding: 10px 0px;
  }
}
.navbar .container {
  padding: 0px;
}
.navbar .row {
  margin: 0px;
  justify-content: space-between;
}
.navbar .left-box {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  padding-left: 10px;
}
@media only screen and (min-width: 576px) {
  .navbar .left-box {
    padding-left: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .navbar .left-box {
    width: 18%;
  }
}
@media only screen and (min-width: 1300px) {
  .navbar .left-box {
    width: 16%;
  }
}
@media only screen and (min-width: 1600px) {
  .navbar .left-box {
    width: 14%;
  }
}
.navbar .logo-menu-container {
  width: -moz-fit-content;
  width: fit-content;
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .logo-menu-container .logo a {
  display: flex;
}
.navbar .logo-menu-container .logo .main-logo {
  width: 100px;
  display: none;
}
@media only screen and (min-width: 768px) {
  .navbar .logo-menu-container .logo .main-logo {
    width: 150px;
  }
}
@media only screen and (min-width: 576px) {
  .navbar .logo-menu-container .logo .main-logo {
    display: block;
  }
}
.navbar .logo-menu-container .logo .mini-logo {
  display: block;
  width: 25px;
}
@media only screen and (min-width: 576px) {
  .navbar .logo-menu-container .logo .mini-logo {
    display: none;
  }
}
.navbar .logo-menu-container .mobile-menu-btn {
  width: -moz-fit-content;
  width: fit-content;
  min-width: auto;
  outline: none;
  background-color: unset;
  padding: 0px;
  outline: 0px;
  margin: auto;
  padding-left: 10px;
}
@media only screen and (min-width: 768px) {
  .navbar .logo-menu-container .mobile-menu-btn {
    padding-left: 14px;
  }
}
@media only screen and (min-width: 1200px) {
  .navbar .logo-menu-container .mobile-menu-btn {
    display: none;
  }
}
.navbar .logo-menu-container .mobile-menu-btn img {
  width: 30px;
}
@media only screen and (min-width: 576px) {
  .navbar .logo-menu-container .mobile-menu-btn img {
    width: 25px;
  }
}
@media only screen and (min-width: 768px) {
  .navbar .logo-menu-container .mobile-menu-btn img {
    width: 30px;
  }
}
.navbar .logo-menu-container a {
  display: inline-block;
}
.navbar .logo-menu-container .menu-icon {
  display: inline-block;
}
.navbar .logo-menu-container .desktop-menu-icon {
  padding-left: 8px;
  display: none;
}
@media only screen and (min-width: 1200px) {
  .navbar .logo-menu-container .desktop-menu-icon {
    display: flex;
  }
}
.navbar .logo-menu-container .desktop-menu-icon img {
  width: 25px;
}
@media only screen and (min-width: 576px) {
  .navbar .logo-menu-container .desktop-menu-icon img {
    width: 30px;
  }
}
.navbar .moveStart {
  justify-content: start !important;
}
.navbar .moveStart .menu-icon {
  transform: rotateY(180deg);
}
.navbar .mobile-search-box {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
  z-index: 1000;
  padding-right: 6px;
}
.navbar .mobile-search-box img {
  width: 26px;
}
@media only screen and (min-width: 768px) {
  .navbar .mobile-search-box {
    display: none;
  }
}
.navbar .search-box {
  position: relative;
  padding-left: 10px;
  /* Make search input full width for better mobile UX */
  /* Show when toggled */
}
@media only screen and (min-width: 768px) {
  .navbar .search-box {
    padding-left: 20px;
  }
}
.navbar .search-box .mobile-search-container {
  position: fixed;
  top: 53px;
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  padding: 15px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .navbar .search-box .mobile-search-container {
    top: 70px;
  }
}
.navbar .search-box .desktop-search {
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 1200px) {
  .navbar .search-box .desktop-search {
    width: 450px;
    max-width: 100%;
  }
}
.navbar .search-box .mobile-search-container .search-input {
  width: 100%;
  display: block;
  height: 44px;
  border-radius: 25px;
  font-size: 16px;
  padding: 20px;
  border: 1px solid #cdcccc;
  background-color: #ffffff;
  background-image: url("../images/search-icon-mobile.svg");
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 16px;
}
.navbar .search-box .mobile-search-container .search-input:focus {
  outline: none;
  border-color: #4c4c9d;
}
.navbar .search-box .mobile-search-container.active {
  display: block;
}
@media only screen and (min-width: 768px) {
  .navbar .search-box .search-input {
    display: block;
  }
}
.navbar .search-box .search-input {
  max-width: 100%;
  height: 44px;
  border-radius: 25px;
  margin: 0px;
  border: 0px;
  font-size: 16px;
  font-weight: 300;
  font-family: "Poppins", sans-serif;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-size: 16px;
  background-position: 30px center;
  padding: 14px 30px;
  padding-left: 50px;
  background-color: #f5f5f5;
  display: none;
}
.navbar .search-box .search-input::-moz-placeholder {
  color: #b3b2b2;
}
.navbar .search-box .search-input::placeholder {
  color: #b3b2b2;
}
@media only screen and (min-width: 768px) {
  .navbar .search-box .search-input {
    display: block;
  }
}
.navbar .mid-box {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.navbar .right-box {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  justify-content: end;
  align-items: center;
  padding-right: 10px;
}
@media only screen and (min-width: 576px) {
  .navbar .right-box {
    padding-right: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .navbar .right-box {
    width: 13%;
  }
}
.navbar .right-box .settings-tools ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.navbar .right-box .settings-tools ul li {
  /* Shake animation */
  /* Pulse effect */
}
.navbar .right-box .settings-tools ul li .dropdown-menu {
  display: none;
  position: absolute;
  background: #f7fafc;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  right: 0;
  top: 30px;
  width: 150px;
  list-style: none;
  padding: 10px;
  z-index: 999;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .dropdown-menu {
    top: 50px;
    width: 200px;
  }
}
.navbar .right-box .settings-tools ul li .dropdown-menu li {
  padding: 5px;
  margin-bottom: 0px;
}
.navbar .right-box .settings-tools ul li .dropdown-menu li:last-child {
  margin-bottom: 0px;
}
.navbar .right-box .settings-tools ul li .dropdown-menu li:hover {
  border-radius: 10px;
  background: rgba(76, 76, 157, 0.0901960784);
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .dropdown-menu li {
    padding: 2px 10px;
    margin-bottom: 15px;
  }
}
.navbar .right-box .settings-tools ul li .dropdown-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #000000;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
}
.navbar .right-box .settings-tools ul li .dropdown-menu li a img {
  width: 20px;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .dropdown-menu li a {
    font-size: 18px;
  }
  .navbar .right-box .settings-tools ul li .dropdown-menu li a img {
    width: auto;
  }
}
.navbar .right-box .settings-tools ul li .dropdown-menu.active {
  display: block;
}
.navbar .right-box .settings-tools ul li button {
  width: 25px;
  height: 25px;
  min-width: unset !important;
  max-width: 100%;
  padding: 0px;
  margin: 0px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  background-color: unset;
  border: 0px !important;
  outline: 0px;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li button {
    width: 34px;
    height: 34px;
  }
}
.navbar .right-box .settings-tools ul li .plus-icon {
  border-radius: 50%;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}
.navbar .right-box .settings-tools ul li .plus-icon img {
  width: 22px;
}
.navbar .right-box .settings-tools ul li .plus-icon:hover {
  background-color: rgba(179, 179, 179, 0.168627451);
}
.navbar .right-box .settings-tools ul li .plus-icon:hover img {
  transform: rotate(90deg);
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .plus-icon {
    width: 34px;
    height: 34px;
  }
}
.navbar .right-box .settings-tools ul li .profile-icon img {
  width: 25px;
  height: 25px;
  display: block;
  border-radius: 50%;
  border: 1px solid #f5f5f5;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .profile-icon img {
    width: 34px;
    height: 34px;
  }
}
.navbar .right-box .settings-tools ul li .notify-icon {
  cursor: pointer;
  position: relative;
  padding: 0;
}
.navbar .right-box .settings-tools ul li .notify-icon:hover {
  background-color: rgba(179, 179, 179, 0.168627451);
}
.navbar .right-box .settings-tools ul li .notify-icon img {
  width: 24px;
  height: 24px;
  transition: 0.3s ease;
}
@keyframes bell-shake {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0);
  }
}
.navbar .right-box .settings-tools ul li .notify-icon:hover img {
  animation: bell-shake 0.6s ease;
}
.navbar .right-box .settings-tools ul li .notify-icon::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background-color: #3fbb46;
  border-radius: 50%;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.2;
  }
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}
.navbar .right-box .settings-tools ul li .notify-icon img {
  width: 18px;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .notify-icon img {
    width: 29px;
  }
}
.navbar .right-box .settings-tools ul li .notification-dropdown {
  width: 260px;
  background-color: #ffffff;
}
@media only screen and (min-width: 567px) {
  .navbar .right-box .settings-tools ul li .notification-dropdown {
    width: 320px;
  }
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification_title {
  gap: 5px;
  justify-content: space-between;
  padding: 10px;
  align-items: center;
  border-bottom: 0.5px solid #cdcccc;
  padding-bottom: 10px;
}
@media only screen and (min-width: 576px) {
  .navbar .right-box .settings-tools ul li .notification-dropdown .notification_title {
    gap: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .notification-dropdown .notification_title {
    gap: 20px;
  }
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification_title .left-title .h4 {
  color: #2d2d2d;
  font-size: 14px;
  font-weight: 400;
  margin: 0px;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .notification-dropdown .notification_title .left-title .h4 {
    font-size: 18px;
  }
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification_title .right-title {
  gap: 5px;
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification_title .right-title span {
  padding: 0px;
  margin: 0px;
  color: #4c4c9d;
  font-size: 14px;
  font-weight: 300;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .notification-dropdown .notification_title .right-title span {
    font-size: 18px;
  }
}
.navbar .right-box .settings-tools ul li .notification-dropdown li:hover {
  background-color: unset;
  border-radius: 0px;
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification-item {
  gap: 10px;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification-item:hover {
  border-radius: 10px !important;
  background-color: #f7fafc !important;
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification-item .notification-message p {
  margin: 0px;
  font-size: 14px;
}
@media only screen and (min-width: 786px) {
  .navbar .right-box .settings-tools ul li .notification-dropdown .notification-item .notification-message p {
    font-size: 16px;
  }
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification-item .notification-message span {
  font-weight: 300;
  font-size: 12px;
}
.navbar .right-box .settings-tools ul li .notification-dropdown .notification-item .notification-icon .message-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4c4c9d;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.navbar .right-box .settings-tools ul li .notification-dropdown .viewall-item {
  display: flex;
  justify-content: center;
}
.navbar .right-box .settings-tools ul li .notification-dropdown .viewall-item a {
  text-align: center;
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .notification-dropdown .viewall-item {
    font-size: 16px;
  }
}
.navbar .right-box .settings-tools ul li .notification-dropdown .profile-dropdown a {
  font-size: 18px;
  color: #4c4c9d;
}
.navbar .right-box .settings-tools ul li .plus-icon img,
.navbar .right-box .settings-tools ul li .profile-box img {
  width: 20px;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul li .plus-icon img,
  .navbar .right-box .settings-tools ul li .profile-box img {
    width: 30px;
  }
}
.navbar .right-box .settings-tools ul .profile-box {
  display: flex;
  /* Hide dropdown by default */
  /* Show dropdown when active */
}
.navbar .right-box .settings-tools ul .profile-box img:hover {
  background-color: #cccccc;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul .profile-box {
    width: 35px;
  }
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown {
  display: none;
  position: absolute;
  background: #fff;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  right: 0;
  top: 50px;
  width: 175px !important;
  list-style: none;
  padding: 10px;
  z-index: 999;
}
@media only screen and (min-width: 768px) {
  .navbar .right-box .settings-tools ul .profile-box .profile-dropdown {
    width: 190px !important;
  }
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown li {
  padding: 2px 10px;
  margin: 0px;
  margin-bottom: 15px;
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown li a {
  color: #000000;
  font-size: 16px;
  font-weight: 300;
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown li a img {
  background-color: unset;
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown li:last-child {
  border-bottom: none;
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown a {
  text-decoration: none;
  color: #333;
  display: block;
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown a:hover {
  background: #f5f5f5;
}
.navbar .right-box .settings-tools ul .profile-box .profile-dropdown.active {
  display: block;
}

/* ===== 03. Header Css End ====== */
/* ==== 04. Sidebar Css Start ==== */
body.sidebar-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.content {
  width: 100%;
  display: block;
  height: 100%;
}
.content .d-flex.nowrap {
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .content {
    height: auto;
  }
  .content .d-flex.nowrap {
    height: 100%;
  }
}
.content .sidebar.collapsed {
  max-width: 80px;
}
.content .sidebar.collapsed .sidebar-item-box .d-flex span {
  display: none;
}
.content .sidebar.collapsed .d-flex {
  justify-content: center;
}

.sidebar {
  max-width: 100%;
  background-color: rgba(76, 76, 157, 0.1294117647);
  min-height: 93.6vh;
}
@media only screen and (min-width: 1200px) {
  .sidebar {
    width: 18%;
  }
}
@media only screen and (min-width: 1300px) {
  .sidebar {
    width: 16%;
  }
}
@media only screen and (min-width: 1600px) {
  .sidebar {
    width: 14%;
  }
}
.sidebar .sidebar-item-box {
  max-width: 100%;
  margin-left: auto;
  padding-left: 8px;
}
.sidebar .sidebar-item-box ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.sidebar .sidebar-item-box ul li {
  padding-top: 10px;
  margin: 0px;
}
.sidebar .sidebar-item-box ul li:first-child {
  padding-top: 0px;
}
.sidebar .sidebar-item-box ul li .item-link {
  border-left: 4px solid rgba(255, 255, 255, 0);
}
.sidebar .sidebar-item-box ul li .item-link svg path {
  fill: #343330;
}
.sidebar .sidebar-item-box ul li .item-link:hover svg path {
  fill: #383869;
}
.sidebar .sidebar-item-box ul li .active-menu {
  background-color: rgba(76, 76, 157, 0.137254902);
  border-left: 4px solid #4c4c9d;
}
.sidebar .sidebar-item-box ul li a {
  display: flex;
  padding: 8px 0px;
  list-style: none;
  color: #4c4c9d;
  padding-left: 16px;
  padding-right: 16px;
}
@media only screen and (min-width: 1200px) {
  .sidebar .sidebar-item-box ul li a {
    padding-right: 0px;
  }
}
.sidebar .sidebar-item-box ul li a:hover {
  background-color: rgba(76, 76, 157, 0.137254902);
  border-left: 4px solid #4c4c9d;
  text-decoration: none;
}
.sidebar .sidebar-item-box ul li .d-flex {
  display: block;
  align-items: center;
  font-size: 18px;
}
.sidebar .sidebar-item-box ul li .d-flex img,
.sidebar .sidebar-item-box ul li .d-flex svg {
  width: -moz-fit-content;
  width: fit-content;
  margin-right: 8px;
}
.sidebar .sidebar-item-box ul li .d-flex span {
  display: none;
}
@media only screen and (min-width: 1200px) {
  .sidebar .sidebar-item-box ul li .d-flex {
    display: flex;
  }
  .sidebar .sidebar-item-box ul li .d-flex span {
    display: inline;
  }
}
.sidebar .sidebar-item-box .sidemenulogoutpart {
  padding-top: 30px;
}
.sidebar.collapsed .tooltip-item {
  position: relative;
}
.sidebar.collapsed .custom-tooltip {
  position: absolute;
  top: 60%;
  left: 105%;
  transform: translateY(-50%);
  background-color: #333;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 999;
}
.sidebar.collapsed .tooltip-item:hover .custom-tooltip {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.desktop-sidebar {
  display: none;
}
@media only screen and (min-width: 768px) {
  .desktop-sidebar {
    display: block;
  }
}
.desktop-sidebar .custom-tooltip {
  display: none;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

#mobile-sidebar {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100vh;
  transition: left 0.2s ease-in-out;
  background-color: #ffffff;
  z-index: 1001;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
#mobile-sidebar.active {
  left: 0;
}
#mobile-sidebar::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}
#mobile-sidebar.active::before {
  opacity: 1;
  visibility: visible;
}
#mobile-sidebar .sidebar-item-box {
  width: 100% !important;
}
#mobile-sidebar .sidebar-item-box ul li {
  margin: 0px;
  padding: 0px;
}
#mobile-sidebar .sidebar-item-box ul > li .d-flex {
  display: flex;
}
#mobile-sidebar .sidemenulogoutpart {
  padding-top: 20px;
}
#mobile-sidebar .item-link span {
  display: block;
}

/* ==== 04. Sidebar Css End ==== */
/* ==== 05. Dashboard Css Start ==== */
.dashboard-content {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  justify-content: space-between;
}
@media only screen and (min-width: 576px) {
  .dashboard-content {
    padding: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .dashboard-content {
    width: 82%;
  }
}
@media only screen and (min-width: 1200px) {
  .dashboard-content {
    padding: 20px;
  }
}
.dashboard-content .content-inner-area {
  width: 100%;
  padding: 5px;
  border-radius: 10px;
  border: 0.5px solid rgba(76, 76, 157, 0.3);
}
@media only screen and (min-width: 576px) {
  .dashboard-content .content-inner-area {
    padding: 10px;
  }
}
@media only screen and (min-width: 1200px) {
  .dashboard-content .content-inner-area {
    padding: 20px;
  }
}
.dashboard-content .content-inner-area .counter-inner-layer {
  background: rgba(193, 215, 229, 0.1);
  border: 0.5px solid rgba(76, 76, 157, 0.3);
  border-radius: 10px;
  width: 100%;
  height: 100%;
  padding: 40px 30px;
  background-repeat: no-repeat;
  transition: 0.3 ease;
  cursor: pointer;
}
.dashboard-content .content-inner-area .counter-inner-layer .row {
  justify-content: space-between;
}
@media only screen and (min-width: 1200px) {
  .dashboard-content .content-inner-area .counter-inner-layer {
    padding: 40px 20px;
  }
}
@media only screen and (min-width: 1550px) {
  .dashboard-content .content-inner-area .counter-inner-layer {
    padding: 40px 30px;
  }
}
.dashboard-content .content-inner-area .total-sales .counter-inner-layer {
  background-color: #fff5eb;
}
.dashboard-content .content-inner-area .total-invoices .counter-inner-layer {
  background-color: #fde9e5;
}
.dashboard-content .content-inner-area .customers .counter-inner-layer {
  background-color: #fbeeff;
}
.dashboard-content .content-inner-area .products .counter-inner-layer {
  background-color: #e5ecff;
}
.dashboard-content .counter-inner-layer {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 40px;
}
.dashboard-content .counter-inner-layer .title-counter .h3 {
  color: #2d2d2d;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  padding-bottom: 0px;
  margin: 0px;
}
@media only screen and (min-width: 576px) {
  .dashboard-content .counter-inner-layer .title-counter .h3 {
    font-size: 25px;
  }
}
@media only screen and (min-width: 786px) {
  .dashboard-content .counter-inner-layer .title-counter .h3 {
    font-weight: 600;
    font-size: 32px;
  }
}
.dashboard-content .counter-inner-layer .title-counter span {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.8px;
}
@media only screen and (min-width: 576px) {
  .dashboard-content .counter-inner-layer .title-counter span {
    font-weight: 500;
  }
}
.dashboard-content .counter-inner-layer .icon-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashboard-content .counter-inner-layer .icon-right .icon-box {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 1300px) {
  .dashboard-content .counter-inner-layer .icon-right .icon-box {
    width: 55px;
    height: 55px;
  }
}
.dashboard-content .total-sales .icon-box {
  background-color: #fe9526;
}
.dashboard-content .total-invoices .icon-box {
  background-color: #ef715a;
}
.dashboard-content .customers .icon-box {
  background-color: #d250fd;
}
.dashboard-content .products .icon-box {
  background-color: #3169e5;
}
.dashboard-content .content-inner-area .mid-number-wrapper {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-size: auto;
  background-position: left top;
  background-repeat: no-repeat;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  background-color: rgba(113, 141, 215, 0.1);
}
.dashboard-content .content-inner-area .mid-number-wrapper .inner-wrapper {
  padding: 15px;
}
@media only screen and (min-width: 1200px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .inner-wrapper {
    padding: 20px;
  }
}
.dashboard-content .content-inner-area .mid-number-wrapper .select-calculat-report {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat, no-repeat;
  background-position: left 10px center, right 10px center;
  padding: 0px 32px;
  background-color: unset;
  border-radius: 20px;
  border: 0.2px solid rgba(0, 0, 0, 0.4392156863);
  color: #4c4c9d;
  height: 30px;
  width: -moz-fit-content;
  width: fit-content;
  text-align: center;
}
.dashboard-content .content-inner-area .mid-number-wrapper .select-calculat-report option {
  text-align: left;
  color: #4c4c9d;
  font-family: Poppins;
  font-size: 14px;
  font-weight: 300;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview {
  width: 100%;
  padding: 0px 10px;
}
@media only screen and (min-width: 1300px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview {
    padding: 0px 0px;
    width: 18%;
  }
}
@media only screen and (min-width: 1500px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview {
    padding: 0px 10px;
    width: 18%;
  }
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li {
  width: 100%;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li:last-child {
  margin-bottom: 0px;
}
@media only screen and (min-width: 400px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li {
    width: 50%;
  }
}
@media only screen and (min-width: 992px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li {
    width: 25%;
  }
}
@media only screen and (min-width: 1300px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul {
    display: block;
  }
  .dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li {
    width: 100%;
  }
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li {
  margin-bottom: 10px;
  align-items: center;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .icon-box {
  background-color: #fe9526;
  margin-right: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 1700px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .icon-box {
    margin-right: 20px;
  }
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .icon-two {
  background-color: #3169e5;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .icon-three {
  background-color: #ef715a;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .icon-four {
  background-color: #4c4c9d;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .title-box {
  padding: 5px 0px;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li p {
  color: #4c4c9d;
  font-size: 20px;
  font-weight: 400;
  margin: 0px;
  padding-bottom: 4px;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li span {
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .title-two span {
  color: #3169e5;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .title-three span {
  color: #ef715a;
}
.dashboard-content .content-inner-area .mid-number-wrapper .left-box-shortview ul li .title-four {
  color: #4c4c9d;
}
.dashboard-content .content-inner-area .mid-number-wrapper .mid-box-grapview {
  width: 100%;
  padding: 0px 10px;
  padding-top: 30px;
}
@media only screen and (min-width: 576px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .mid-box-grapview {
    width: 50%;
  }
}
@media only screen and (min-width: 1300px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .mid-box-grapview {
    padding-top: 0px;
    padding: 0px 20px;
    width: 51%;
  }
}
.dashboard-content .content-inner-area .mid-number-wrapper .mid-box-grapview img {
  width: 610px;
  height: 330px;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 100%;
}
.dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
}
@media only screen and (min-width: 576px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview {
    width: 50%;
  }
}
@media only screen and (min-width: 1300px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview {
    padding-left: 20px;
    padding-right: 0px;
    padding-top: 0px;
    width: 31%;
  }
}
.dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview .profit-box {
  width: 100%;
  justify-content: space-between;
}
.dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview .profit-box .left-box {
  padding-bottom: 10px;
}
.dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview .profit-box .icon-box {
  background-color: #4c4c9d;
  margin-top: 8px;
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 1700px) {
  .dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview .profit-box .icon-box {
    margin-right: 22px;
  }
}
.dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview .profit-box .icon-box img {
  width: 20px;
}
.dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview .profit-box .title-box p {
  color: #4c4c9d;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin: 0px;
  padding: 0px;
}
.dashboard-content .content-inner-area .mid-number-wrapper .right-box-profitview .profit-box .title-box span {
  text-align: center;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.dashboard-content .content-inner-area .btm-number-wrapper {
  padding-top: 20px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .gy-4 .col-md:last-child {
  margin-bottom: 0px;
}
@media only screen and (min-width: 1180px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .gy-4 .col-md {
    margin-bottom: 0px;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .row {
  display: block;
}
@media only screen and (min-width: 922px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .row {
    display: flex;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .inner-box-btm {
  height: 100%;
  padding: 18px 26px;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  background: linear-gradient(90deg, rgba(254, 70, 38, 0.05) 4.19%, rgba(255, 255, 255, 0.06) 83.08%);
}
.dashboard-content .content-inner-area .btm-number-wrapper .title-btn-box {
  justify-content: space-between;
}
.dashboard-content .content-inner-area .btm-number-wrapper .title-btn-box .h4 {
  color: #ef715a;
  font-size: 20px;
  font-weight: 600;
  margin: 0px;
  padding: 0px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .title-btn-box a {
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  padding: 6px 10px;
  background-color: #4c4c9d;
  display: flex;
  text-decoration: none;
  border-radius: 25px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .title-btn-box a:hover img {
  transform: rotate(-45deg);
}
.dashboard-content .content-inner-area .btm-number-wrapper .title-btn-box a img {
  transition: 0.3s ease;
}
.dashboard-content .content-inner-area .btm-number-wrapper .title-btn-box a:hover {
  background-color: #2b2b58;
}
.dashboard-content .content-inner-area .btm-number-wrapper .overlayer-color {
  height: 100%;
  background: linear-gradient(90deg, rgba(254, 70, 38, 0.05) 4.19%, rgba(255, 255, 255, 0.06) 83.08%);
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products {
  background-repeat: no-repeat;
  background-position: center center;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul {
  padding: 0px;
  margin: 0px;
  margin-top: 16px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li {
  margin-bottom: 10px;
  justify-content: space-between;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li:last-child {
  margin-bottom: 0px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .product-title {
  width: 250px;
  max-width: 100%;
  padding-bottom: 6px;
}
@media only screen and (min-width: 576px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .product-title {
    padding-bottom: 0px;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .product-title .name-and-icon {
  padding-bottom: 10px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .product-title .name-and-icon img {
  margin-right: 12px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .progress-container {
  width: 100%;
  max-width: 250px;
  background-color: #ffdcd6;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  height: 5px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .progress-bar {
  height: 100%;
  background-color: #3169e5;
  text-align: center;
  line-height: 5px;
  color: white;
  font-weight: 700;
  transition: width 0.5s ease-in-out;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .total-price {
  text-align: center;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.dashboard-content .content-inner-area .btm-number-wrapper .top-products ul li .total-price p {
  padding: 0px;
  margin: 0px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  margin-bottom: 1rem;
  border-radius: 8px;
  position: relative;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive::-webkit-scrollbar {
  height: 8px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table {
  margin-bottom: 0;
  white-space: nowrap;
  width: 100%;
  min-width: 600px;
  font-size: 16px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table th,
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table td {
  min-width: 120px;
  padding: 12px 16px;
  vertical-align: middle;
  line-height: 1.4;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table th:last-child,
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table td:last-child {
  padding-right: 24px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table th:hover,
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table td:hover {
  background-color: rgba(76, 76, 157, 0.05);
}
@media only screen and (max-width: 576px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table th,
  .dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table td {
    padding: 10px;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table th:first-child,
.dashboard-content .content-inner-area .btm-number-wrapper .table-responsive table td:first-child {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 1;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  margin-top: 16px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable table {
  width: 100%;
  min-width: 400px;
  border-collapse: collapse;
  margin: 0;
}
@media only screen and (min-width: 576px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable table {
    min-width: 600px;
  }
}
@media only screen and (min-width: 1120px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable table {
    min-width: unset;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable tr {
  transition: background-color 0.2s ease;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable tr:last-child {
  border-bottom: none;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable td,
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable th {
  text-align: left;
  border: 0;
  padding: 9px 0px;
  white-space: nowrap;
  vertical-align: middle;
  font-size: 14px;
}
@media only screen and (min-width: 1200px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable td,
  .dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable th {
    font-size: 16px;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable th {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  padding-top: 0px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable th,
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable td:first-child {
  padding-left: 0px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable th:last-child {
  text-align: center;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .status-title {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .status-title {
    text-align: left;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .active-status {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .active-status svg {
  flex-shrink: 0;
  margin: 0px auto;
}
@media only screen and (min-width: 768px) {
  .dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .active-status svg {
    margin: 0px;
  }
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .active-status span {
  color: rgba(0, 0, 0, 0.7);
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .action-class {
  text-align: center;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .action-class .action-btn {
  min-width: unset !important;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  border-radius: 50%;
  background-color: unset;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .action-class .action-btn .dropdown {
  top: -10px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .action-class img {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .action-class img:hover {
  opacity: 1;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .active-status {
  display: flex;
  align-items: center;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .active-status span {
  margin-left: 5px;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .action-class {
  text-align: center;
}
.dashboard-content .content-inner-area .btm-number-wrapper .transactionsTable .action-btn-wrapper a img {
  width: 20px;
}

/* ==== 05. Dashboard Css End ==== */
/* ==== 06. Content Common Style Start ==== */
.fullscreen-mode #fullscreen-icon {
  width: 18px;
}
@media only screen and (min-width: 768px) {
  .fullscreen-mode #fullscreen-icon {
    width: 22px;
  }
}

#fullscreen-prompt {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
#fullscreen-prompt button {
  background: #4c4c9d;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.content-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #cdcccc;
  justify-content: space-between;
}
@media only screen and (min-width: 992px) {
  .content-header {
    padding-bottom: 20px;
  }
}
.content-header .heading {
  align-items: center;
}
.content-header .heading .h4 {
  padding-left: 10px;
  color: #4c4c9d;
  font-size: 16px;
  font-weight: 500;
  margin: 0px;
  padding-left: 5px;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}
@media only screen and (min-width: 576px) {
  .content-header .heading .h4 {
    padding-left: 10px;
    font-size: 20px;
  }
}

.others-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
@media only screen and (min-width: 576px) {
  .others-tools {
    gap: 10px;
  }
}
@media only screen and (min-width: 1500px) {
  .others-tools {
    margin-top: 0px;
  }
}
.others-tools .mobile-searchicon {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
}
@media only screen and (min-width: 568px) {
  .others-tools .mobile-searchicon {
    width: 40px;
  }
}
@media only screen and (min-width: 850px) {
  .others-tools .mobile-searchicon {
    display: none;
  }
}
.others-tools .mobile-searchicon input {
  padding: 0px 10px;
}
.others-tools .mobile-searchicon input::-moz-placeholder {
  font-weight: 400;
}
.others-tools .mobile-searchicon input::placeholder {
  font-weight: 400;
}
.others-tools .search-container {
  display: flex;
  align-items: center;
  background-color: #f7fafc;
  border-radius: 25px;
  transition: width 0.4s ease-in-out;
  width: 32px;
  overflow: hidden;
  position: absolute;
}
.others-tools .search-container input {
  border: none;
  outline: none;
  padding: 5px;
  font-size: 16px;
  width: 0;
  transition: width 0.4s ease-in-out;
  height: 32px;
  margin: 0px;
  background-color: #f7fafc;
}
.others-tools .search-container.active {
  width: 180px;
}
@media only screen and (min-width: 576px) {
  .others-tools .search-container.active {
    width: 220px;
  }
}
.others-tools .search-container.active input {
  width: 100%;
}
.others-tools .search-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.others-tools .search-icon img {
  width: 20px;
  max-width: 20px;
}
.others-tools .table-item-search {
  max-width: 150px;
  display: none;
}
@media only screen and (min-width: 850px) {
  .others-tools .table-item-search {
    display: block;
  }
}
@media only screen and (min-width: 1200px) {
  .others-tools .table-item-search {
    width: 120px;
  }
}
@media only screen and (min-width: 1250px) {
  .others-tools .table-item-search {
    width: 180px;
  }
}
@media only screen and (min-width: 1280px) {
  .others-tools .table-item-search {
    width: 180px;
  }
}
@media only screen and (min-width: 1300px) {
  .others-tools .table-item-search {
    width: 200px;
  }
}
.others-tools .table-item-search input {
  padding: 4px 15px;
  align-items: center;
  border-radius: 50px;
  border: 1px solid #dbe0e3;
  background-color: unset;
  background-repeat: no-repeat;
  background-position: 15px center;
  padding-left: 40px;
  height: 32px;
  margin: 0px;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}
.others-tools .table-item-search input::-moz-placeholder {
  font-weight: 400;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}
.others-tools .table-item-search input::placeholder {
  font-weight: 400;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}
.others-tools .lightBtn,
.others-tools .successBtn,
.others-tools .dangerBtn,
.others-tools .warningBtn,
.others-tools .primaryBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 6px;
  margin: 0px;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}
.others-tools .lightBtn img,
.others-tools .successBtn img,
.others-tools .dangerBtn img,
.others-tools .warningBtn img,
.others-tools .primaryBtn img {
  width: 20px;
}
@media only screen and (min-width: 576px) {
  .others-tools .lightBtn,
  .others-tools .successBtn,
  .others-tools .dangerBtn,
  .others-tools .warningBtn,
  .others-tools .primaryBtn {
    padding: 6px 15px;
  }
}
.others-tools .lightBtn span,
.others-tools .successBtn span,
.others-tools .dangerBtn span,
.others-tools .warningBtn span,
.others-tools .primaryBtn span {
  display: none;
}
@media only screen and (min-width: 1150px) {
  .others-tools .lightBtn span,
  .others-tools .successBtn span,
  .others-tools .dangerBtn span,
  .others-tools .warningBtn span,
  .others-tools .primaryBtn span {
    display: block;
  }
}
.others-tools a {
  text-decoration: none;
}

.item-list-table {
  position: relative;
}
.item-list-table .rootaction-menu {
  display: none;
  position: absolute;
  background-color: #4c4c9d;
  border-radius: 5px;
  padding: 10px;
  top: 10px;
  left: 32px;
}
@media only screen and (min-width: 992px) {
  .item-list-table .rootaction-menu {
    top: 18px;
    left: 38px;
  }
}
.item-list-table ul {
  margin: 0px;
  padding: 0px;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.item-list-table ul li {
  list-style: none;
}
.item-list-table li.divider-wrapper span {
  height: 20px;
  width: 1px;
  background-color: #cdcccc;
  font-weight: 300;
  display: block;
}
.item-list-table li.select-iteminfo {
  display: flex;
  align-items: center;
  font-weight: 300;
  gap: 6px;
}
.item-list-table ul li span {
  color: #fff;
  font-weight: 300;
}
.item-list-table .rootaction-menu .unset-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.item-list-table .rootaction-menu.active {
  display: block;
}
.item-list-table .status-wrapper {
  position: relative;
}
.item-list-table .status-menu {
  display: none;
  list-style: none;
  padding: 5px 0;
}
.item-list-table .status-menu.open {
  display: block;
  position: absolute;
  background-color: aliceblue;
  border-radius: 3px;
  top: 28px;
  left: -5px;
  padding: 10px 0px;
}
.item-list-table .status-menu li button {
  width: 100%;
  padding: 10px 10px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.item-list-table .status-dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ==== 06. Content Common Style Start ==== */
/* ==== 07. Table Common Style Start ==== */
.content-page {
  width: 100%;
  background: unset !important;
}
.content-page .item-list-table {
  overflow-x: auto;
}
.content-page .item-list-table table {
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 0px;
  width: 950px;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}
@media only screen and (min-width: 900px) {
  .content-page .item-list-table table {
    width: 100%;
  }
}
.content-page .item-list-table th {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  padding: 10px 5px;
  border: 0px;
  color: #4c4c9d;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .content-page .item-list-table th {
    font-size: 16px;
  }
}
@media only screen and (min-width: 991px) {
  .content-page .item-list-table th {
    padding: 16px 10px;
  }
}
.content-page .item-list-table th:last-child {
  text-align: center;
}
.content-page .item-list-table td {
  border: 0px;
  text-align: left;
  padding: 5px;
  margin-bottom: 0px;
  font-size: 14px;
  font-family: "Inter";
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .content-page .item-list-table td {
    font-size: 16px;
  }
}
@media only screen and (min-width: 991px) {
  .content-page .item-list-table td {
    font-size: 16px;
    padding: 10px 10px;
  }
}
.content-page .item-list-table tr:nth-child(odd) {
  background-color: #f7fafc;
}
.content-page .item-list-table tr th:first-child {
  padding-right: 10px;
  width: 20px;
}
@media only screen and (min-width: 568px) {
  .content-page .item-list-table tr th:first-child {
    width: 25px;
  }
}
@media only screen and (min-width: 992px) {
  .content-page .item-list-table tr th:first-child {
    width: 35px;
  }
}
.content-page .item-list-table tr td:first-child {
  padding-right: 0px;
  width: 20px;
}
@media only screen and (min-width: 568px) {
  .content-page .item-list-table tr td:first-child {
    width: 25px;
  }
}
@media only screen and (min-width: 992px) {
  .content-page .item-list-table tr td:first-child {
    width: 35px;
  }
}
.content-page .item-list-table tr th:nth-child(2) {
  padding-left: 0px;
}
.content-page .item-list-table tr td:nth-child(2) {
  padding-left: 0px;
}
.content-page .item-list-table tr th:first-child input[type=checkbox] {
  margin: 0px;
}
.content-page .item-list-table tr td:first-child input[type=checkbox] {
  margin: 0px;
}
.content-page .item-list-table input[type=checkbox] {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 2px solid #cdcccc;
}
@media only screen and (min-width: 992px) {
  .content-page .item-list-table input[type=checkbox] {
    width: 18px;
    height: 18px;
  }
}
@media only screen and (min-width: 992px) {
  .content-page .item-list-table .img-title-col {
    min-width: 200px;
  }
}
.content-page .item-list-table .img-title-col .d-flex {
  gap: 5px;
  flex-wrap: nowrap;
  align-items: center;
  min-width: -moz-fit-content;
  min-width: fit-content;
}
@media only screen and (min-width: 992px) {
  .content-page .item-list-table .img-title-col .d-flex {
    gap: 10px;
  }
}
.content-page .item-list-table .img-title-col img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .content-page .item-list-table .img-title-col img {
    width: 44px;
    height: 44px !important;
  }
}
.content-page .item-list-table .item-status .successBtn {
  margin: auto;
}
.content-page .item-list-table .item-status .dangerBtn {
  margin: auto;
}
.content-page .item-list-table .item-status .warningBtn {
  margin: auto;
}
.content-page .item-list-table .item-status .primaryBtn {
  margin: auto;
}
.content-page .item-list-table .item-status p {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: left;
  background: rgba(59, 212, 112, 0.1);
  padding: 10px;
  border-radius: 25px;
  margin-bottom: 0px;
  width: -moz-fit-content;
  width: fit-content;
}
@media only screen and (min-width: 992px) {
  .content-page .item-list-table .item-status p {
    padding: 8px 15px;
  }
}
.content-page .item-list-table .item-status p span:last-child {
  display: none;
}
@media only screen and (min-width: 992px) {
  .content-page .item-list-table .item-status p span:last-child {
    display: block;
  }
}
.content-page .item-list-table .status-title {
  text-align: center;
}
.content-page .item-list-table .status-title .shorting-data {
  margin: 0px auto;
}
.content-page .item-list-table .action-btn {
  display: flex;
  justify-content: center;
  width: 35px;
  background-color: #f7fafc;
  height: 35px;
  margin: 0px auto;
  padding: 0px;
  outline: unset;
  align-items: center;
  border: none;
  border-radius: 50%;
}
.content-page .item-list-table .action-btn img {
  width: 20px;
}

/* ==== 07. Table Common Style End ==== */
/* ==== 08. Product Table Style Start ==== */
.productListTable .product-title {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
@media only screen and (min-width: 992px) {
  .productListTable .product-title {
    min-width: 200px;
  }
}
.productListTable .stock-title {
  text-align: center;
}
.productListTable .stock-data {
  text-align: center !important;
}

/* ==== 08. Product Table Style End ==== */
/* ==== 09. Create Product Style Start ==== */
.ss-main {
  height: 50px !important;
  border-radius: 10px !important;
  border: 1px solid #cdcccc !important;
  margin-bottom: 16px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  outline: unset !important;
}

.ss-main:focus {
  box-shadow: none !important;
}

.ss-content .ss-search input:focus {
  box-shadow: none !important;
}

.ss-content .ss-list .ss-option:hover {
  background-color: #4c4c9d !important;
}

.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  background-color: #4c4c9d !important;
}

.ss-main .ss-values .ss-value {
  height: -moz-fit-content;
  height: fit-content;
}

.ss-main .ss-values {
  align-items: anchor-center;
}

.ss-main .ss-values .ss-value {
  background-color: #4c4c9d !important;
}

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected {
  color: #ffffff !important;
  background-color: #4c4c9d !important;
}

.create-product .inputs-wrapper {
  margin-top: 15px;
}
.create-product .inputs-wrapper label {
  display: block;
  margin-bottom: 10px !important;
  color: #000;
  font-weight: 400;
}
.create-product .inputs-wrapper .input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  font-size: 16px;
  font-weight: 500;
  height: 50px;
  margin-bottom: 16px;
  padding: 0px 24px;
  font-family: "Poppins", sans-serif !important;
}
.create-product .inputs-wrapper .input::-moz-placeholder {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400;
}
.create-product .inputs-wrapper .input::placeholder {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400;
}
.create-product .inputs-wrapper select {
  background-image: url("../images/dashboard/selectdown-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-repeat: no-repeat;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  background-color: #ffffff;
  font-weight: 400;
  height: 58px;
  padding: 0px 24px;
  margin-bottom: 16px;
  font-size: 16px;
  font-family: "Poppins", sans-serif !important;
}
.create-product .inputs-wrapper .product-desc {
  margin-bottom: 20px;
}
.create-product .inputs-wrapper .product-desc textarea {
  border: 1px solid rgba(76, 76, 157, 0.3);
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.08));
  padding: 24px 24px;
  margin: 0px;
  display: block;
}
.create-product .inputs-wrapper .product-desc .note-toolbar {
  justify-content: center;
}
.create-product .inputs-wrapper .product-desc .note-toolbar button {
  width: auto;
  min-width: unset;
  margin: 0px;
  padding: 5px 8px;
  background-color: unset;
}
@media only screen and (min-width: 1770px) {
  .create-product .inputs-wrapper .product-desc .note-editable {
    height: 196px !important;
  }
}
.create-product .inputs-wrapper .drag-drop-box {
  margin-bottom: 10px;
  display: block;
}
@media only screen and (min-width: 992px) {
  .create-product .inputs-wrapper .drag-drop-box {
    display: flex;
  }
}
.create-product .inputs-wrapper .upload-box {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  border: 2px dashed rgba(76, 76, 157, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
@media only screen and (min-width: 992px) {
  .create-product .inputs-wrapper .upload-box {
    width: 50%;
  }
}
.create-product .inputs-wrapper .upload-box img {
  width: 40px;
}
.create-product .inputs-wrapper .upload-box p {
  margin: 0px;
  padding: 15px 0px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.create-product .inputs-wrapper .upload-box span {
  font-size: 10px;
  font-weight: 600;
}
.create-product .inputs-wrapper .upload-box.dragover {
  background-color: rgba(0, 128, 255, 0.2);
  opacity: 0.7;
}
.create-product .inputs-wrapper .gallery-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}
.create-product .inputs-wrapper .gallery-box .thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #cdcccc;
  border-radius: 15px;
}
@media only screen and (min-width: 992px) {
  .create-product .inputs-wrapper .gallery-box {
    padding-top: 0px;
    padding-left: 12px;
    width: 50%;
  }
}
.create-product .inputs-wrapper .gallery-item {
  position: relative;
  width: 100%;
  height: 100px;
  height: auto;
}
.create-product .inputs-wrapper .gallery-item img {
  width: 100%;
  height: 126px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 5px;
}
.create-product .inputs-wrapper .gallery-item .thumb-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.create-product .inputs-wrapper .remove-btn {
  position: absolute;
  top: -2px;
  right: -2px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  max-height: unset;
  min-width: unset;
  font-size: 14px;
  cursor: pointer;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-product .inputs-wrapper .image-input {
  display: none;
}
.create-product .form-submit-button {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.create-product .form-submit-button button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* ==== 09. Create Product Style End ==== */
/* ==== 10. Create Invoice Page Style Start ==== */
.createInvoice {
  background-color: #ffffff !important;
  padding: 15px !important;
}
@media only screen and (min-width: 1200px) {
  .createInvoice {
    padding: 25px !important;
  }
}
.createInvoice .others-tools a {
  text-decoration: none !important;
}
.createInvoice .main-invoice-info {
  padding-top: 20px;
}
.createInvoice label {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 17px;
  display: block;
}
@media only screen and (min-width: 440px) {
  .createInvoice label {
    margin-bottom: 17px;
  }
}
.createInvoice .invoice-customer-date input {
  width: 100%;
  height: 40px;
  padding: 10px;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid #cdcccc;
  color: rgba(0, 0, 0, 0.4392156863);
  font-size: 14px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 440px) {
  .createInvoice .invoice-customer-date input {
    margin-bottom: 20px;
  }
}
.createInvoice .invoice-customer-date input[type=date] {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4392156863);
  margin-bottom: 10px;
}
@media only screen and (min-width: 440px) {
  .createInvoice .invoice-customer-date input[type=date] {
    margin-bottom: 0px;
  }
}
.createInvoice .customer-button-wrapper {
  display: block;
  margin-bottom: 15px;
}
@media only screen and (min-width: 992px) {
  .createInvoice .customer-button-wrapper {
    margin: 0px;
  }
}
.createInvoice .customer-button-wrapper .customer-button {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  margin-bottom: 0px;
  border-radius: 10px;
  height: 80px;
  background-color: unset;
  width: 100%;
  border: 1px solid #cdcccc;
}
@media only screen and (min-width: 567px) {
  .createInvoice .customer-button-wrapper .customer-button {
    height: 100px;
  }
}
@media only screen and (min-width: 768px) {
  .createInvoice .customer-button-wrapper .customer-button {
    height: 140px;
  }
}
.createInvoice .customer-button-wrapper .customer-button span {
  margin-left: 5px;
}
.createInvoice .productedit-table {
  overflow: auto;
  font-family: "Poppins", sans-serif !important;
}
.createInvoice .productedit-table table {
  width: 700px;
  border-collapse: collapse;
}
@media only screen and (min-width: 700px) {
  .createInvoice .productedit-table table {
    width: 100%;
  }
}
.createInvoice .productedit-table table input {
  color: #000000;
  text-align: center;
  border-radius: 4px;
  height: 35px;
  margin: 0px;
  border: 1px solid #cdcccc;
  font-family: "Poppins", sans-serif !important;
}
@media only screen and (min-width: 768px) {
  .createInvoice .productedit-table table input {
    height: 43px;
  }
}
.createInvoice .productedit-table table tr th:last-child:last-child {
  width: 40px;
}
.createInvoice .productedit-table table th {
  font-weight: 500;
  text-align: left;
  padding: 8px;
}
.createInvoice .productedit-table table td {
  padding: 8px;
}
.createInvoice .productedit-table table td:last-child {
  width: 40px;
}
@media only screen and (min-width: 992px) {
  .createInvoice .productedit-table table td {
    padding: 10px;
  }
}
.createInvoice .productedit-table table tr:first-child {
  background-color: #f0f9ff;
}
.createInvoice .productedit-table table tr:first-child span {
  display: block;
}
.createInvoice .productedit-table table .prod-quantity {
  text-align: center;
}
.createInvoice .productedit-table table .prod-quantity input {
  padding: 5px;
  width: 75px;
}
.createInvoice .productedit-table table .prod-price {
  font-size: 16px;
  text-align: center;
}
.createInvoice .productedit-table table .prod-price input {
  padding: 5px;
  width: 160px;
  max-width: 100%;
}
.createInvoice .productedit-table table .prod-removebtn {
  text-align: right;
}
.createInvoice .productedit-table .new-prod-add {
  margin-bottom: 15px;
}
.createInvoice .productedit-table .new-prod-add .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 400;
}
.createInvoice .note-total .row {
  display: block;
}
@media only screen and (min-width: 992px) {
  .createInvoice .note-total .row {
    display: flex;
  }
}
.createInvoice .note-total .note-inner textarea {
  border-radius: 10px;
  border: 1px solid #cdcccc;
  margin: 0px;
  height: 130px !important;
}
.createInvoice .note-total .total-inner {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
}
.createInvoice .note-total .total-inner table {
  text-align: right;
}
.createInvoice .note-total .total-inner table td {
  font-size: 16px;
  padding: 5px 0px;
}
@media only screen and (min-width: 992px) {
  .createInvoice .note-total .total-inner table td {
    padding: 6px 0px;
  }
}
.createInvoice .note-total .total-inner .title {
  font-size: 14px;
  font-family: "Inter";
  font-weight: 600;
  padding-right: 10px;
}
@media only screen and (min-width: 380px) {
  .createInvoice .note-total .total-inner .title {
    font-size: 16px;
    padding-right: 40px;
  }
}
.createInvoice .note-total .total-inner .dicount-input {
  display: flex;
  justify-content: flex-end;
}
.createInvoice .note-total .total-inner .dicount-input input {
  width: 80px;
  margin: 0px;
  border-radius: 4px;
  border: 1px solid #cdcccc;
  background-color: unset;
  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 400;
  height: 30px;
  text-align: center;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.createInvoice .note-total .total-inner .dicount-input select {
  background-position: right 5px center;
  text-align: center;
  border-radius: 3px;
  width: 80px;
  margin: 0px;
  border-radius: 4px;
  border: 1px solid #cdcccc;
  background-color: unset;
  color: rgba(0, 0, 0, 0.5);
  font-size: 16px;
  font-weight: 400;
  height: 30px;
  padding: 0px;
  border-bottom-left-radius: 0px;
  border-top-left-radius: 0px;
}
.createInvoice .note-total .total-inner .dicount-input select option {
  text-align: center;
}
.createInvoice .note-total .total-inner .tax-td {
  gap: 5px;
  justify-content: end;
}
.createInvoice .note-total .total-inner .tax-td #tax-input-container {
  width: 80px;
}
.createInvoice .note-total .total-inner .tax-td #tax-input-container input {
  margin: 0px;
  border: 1px solid #cdcccc;
  height: 35px;
  border-radius: 25px;
}
.createInvoice .note-total .total-inner .addtax {
  color: #000;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 500;
  margin-left: auto;
  border: 1px solid rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
}
.createInvoice .inadsc .row {
  display: block;
}
@media only screen and (min-width: 992px) {
  .createInvoice .inadsc .row {
    display: flex;
  }
}
.createInvoice .inadsc .extra-identity {
  justify-content: center;
  padding: 0px 15px;
  padding-top: 10px;
}
@media only screen and (min-width: 1200px) {
  .createInvoice .inadsc .extra-identity .extra-width {
    width: 700px;
  }
}
.createInvoice .inadsc .item-box {
  padding: 0px 15px;
  width: 100%;
  margin-bottom: 15px;
}
@media only screen and (min-width: 576px) {
  .createInvoice .inadsc .item-box {
    margin-bottom: 0px;
    width: 50%;
  }
}
@media only screen and (min-width: 1200px) {
  .createInvoice .inadsc .item-box {
    width: auto;
  }
}
.createInvoice .inadsc .item-box .invoice {
  padding: 10px 20px;
  background-color: #f0f9ff;
  border-radius: 10px;
  border: 0px;
  margin-right: 18px;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  margin-bottom: 0px;
}
@media only screen and (min-width: 992px) {
  .createInvoice .inadsc .item-box .invoice {
    width: 224px;
  }
}
.createInvoice .inadsc .item-box .advance {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  padding: 10px 21px;
  background-color: #f5f5f5;
  border-radius: 10px;
  border: 0px;
  height: 50px;
  margin-bottom: 0px;
}
@media only screen and (min-width: 992px) {
  .createInvoice .inadsc .item-box .advance {
    width: 380px;
    max-width: 100%;
  }
}
.createInvoice .inadsc .form-submit-button {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  height: 100%;
  gap: 10px;
  padding: 16px 16px;
}
@media only screen and (min-width: 992px) {
  .createInvoice .inadsc .form-submit-button {
    padding: 0px;
  }
}
.createInvoice .inadsc .form-submit-button .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0px;
  padding: 10px;
  min-width: 120px;
}
@media only screen and (min-width: 576px) {
  .createInvoice .inadsc .form-submit-button .btn {
    min-width: 130px;
    padding: 6px 15px;
  }
}
.createInvoice .inadsc .form-submit-button .btn_primary {
  border: 0.5px solid #4c4c9d;
}

.select-customer-popup .item-list-table tr td:first-child,
.select-product-item .item-list-table tr td:first-child {
  width: auto !important;
  min-width: 200px;
}
.select-customer-popup .table-item-search,
.select-product-item .table-item-search {
  width: 300px !important;
  max-width: 100%;
}
@media only screen and (min-width: 992px) {
  .select-customer-popup .table-item-search,
  .select-product-item .table-item-search {
    width: 500px !important;
  }
}
.select-customer-popup .table-item-search input,
.select-product-item .table-item-search input {
  height: 44px;
  border: 1px solid #4c4c9d;
}
.select-customer-popup .table-item-search input:placeholder,
.select-product-item .table-item-search input:placeholder {
  color: rgba(76, 76, 157, 0.5);
  font-weight: 300;
}
.select-customer-popup .main-content,
.select-product-item .main-content {
  overflow-y: scroll;
  height: 100%;
}
.select-customer-popup .modal .modal-content,
.select-product-item .modal .modal-content {
  height: 85%;
  padding: 10px !important;
  width: 1300px !important;
}
@media only screen and (min-width: 992px) {
  .select-customer-popup .modal .modal-content,
  .select-product-item .modal .modal-content {
    padding: 10px 30px !important;
  }
}
.select-customer-popup .modal .modal-content .main-content,
.select-product-item .modal .modal-content .main-content {
  max-height: 96% !important;
}
.select-customer-popup .modal .modal-content .main-content .content-inner-area,
.select-product-item .modal .modal-content .main-content .content-inner-area {
  overflow: auto;
}
.select-customer-popup .modal label,
.select-product-item .modal label {
  padding-bottom: 0px;
  font-weight: 300;
}
.select-customer-popup .content-header,
.select-product-item .content-header {
  padding: 15px 0px;
}
.select-customer-popup .others-tools .search-container input,
.select-product-item .others-tools .search-container input {
  width: 200px;
}
.select-customer-popup .right-side-search .table-item-search,
.select-product-item .right-side-search .table-item-search {
  width: 180px !important;
  display: block;
}
@media only screen and (min-width: 576px) {
  .select-customer-popup .right-side-search .table-item-search,
  .select-product-item .right-side-search .table-item-search {
    width: 200px !important;
  }
}
@media only screen and (min-width: 768px) {
  .select-customer-popup .right-side-search .table-item-search,
  .select-product-item .right-side-search .table-item-search {
    width: 300px !important;
  }
}
@media only screen and (min-width: 850px) {
  .select-customer-popup .right-side-search .table-item-search,
  .select-product-item .right-side-search .table-item-search {
    display: none;
  }
}
.select-customer-popup .right-side-search .table-item-search input,
.select-product-item .right-side-search .table-item-search input {
  height: 36px;
}

/* ==== 10. Create Invoice Page Style End ==== */
/* ==== 11. Customer Page Style Start ==== */
.customers-list .others-tools .btn {
  min-width: unset;
}

#PopupModalCustomer .countries.ss-main {
  height: 50px;
  font-size: 18px;
  font-weight: bold;
}
#PopupModalCustomer .countries.ss-main .ss-single .country {
  width: 30px;
  padding: 0 8px 0 8px;
}
#PopupModalCustomer .countries.ss-content .ss-option {
  display: flex;
  align-items: center;
  height: 40px;
  font-size: 14px;
  font-weight: bold;
}
#PopupModalCustomer .countries.ss-content .ss-option .country {
  width: 30px;
  padding: 0 8px 0 8px;
}

/* ==== 11. Customer Page Style End ==== */
/* ==== 12. Categories Page Style Start ==== */
#PopupModalCategory .sub-category {
  padding-top: 15px;
}
#PopupModalCategory .upload-container .upload-box {
  padding: 10px !important;
  gap: 5px !important;
}
#PopupModalCategory .upload-container .upload-box p {
  font-size: 10px;
}
#PopupModalCategory .root-category .ss-main {
  height: 40px !important;
  margin-bottom: 0px !important;
}
#PopupModalCategory .image-preview-container img {
  height: 116px;
}

/* ==== 12. Categories Page Style End ==== */
/* ==== 13. Brand Page Style Start ==== */
.brand-list .item-list-table .img-title-col {
  align-items: center;
}
.brand-list .item-list-table .img-title-col img {
  border-radius: 0px !important;
  height: unset !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  width: 25px;
  height: 25px !important;
}
@media only screen and (min-width: 1150px) {
  .brand-list .item-list-table .img-title-col img {
    width: 44px;
    height: 44px !important;
  }
}

#PopupModalBrand .upload-container .upload-box {
  padding: 10px !important;
  gap: 5px !important;
}
#PopupModalBrand .upload-container .upload-box p {
  font-size: 10px;
}
#PopupModalBrand .image-preview-container img {
  height: 116px;
}
#PopupModalBrand .ss-main {
  height: 40px !important;
}

/* ==== 13. Brand Page Style End ==== */
/* ==== 14. Reports Page Style Start ==== */
.reports-page table {
  margin-top: 0px;
}
.reports-page .item-list-table .rootaction-menu {
  top: 18px;
}
.reports-page .action-btn-wrapper {
  gap: 15px;
  justify-content: center;
}
.reports-page .generate-report {
  display: block;
  padding-top: 20px;
}
@media only screen and (min-width: 1200px) {
  .reports-page .generate-report {
    display: flex;
  }
}
.reports-page .generate-report input {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
}
.reports-page .generate-report select {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 10px;
}
@media only screen and (min-width: 576px) {
  .reports-page .generate-report select {
    margin-bottom: inherit;
  }
}
.reports-page .generated-reports-title {
  padding: 20px 0px;
  justify-content: space-between;
  align-items: center;
}
.reports-page .generated-reports-title .h4 {
  color: #4c4c9d;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  margin: 0px;
  padding: 0px;
}
.reports-page .generated-reports-title .title {
  align-items: center;
}
.reports-page .generated-reports-title .title .btn_primary {
  margin-left: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  font-size: 14px;
  padding: 10px 8px;
}
@media only screen and (min-width: 380px) {
  .reports-page .generated-reports-title .title .btn_primary {
    padding: 10px 18px;
    font-size: 16px;
  }
}
.reports-page .generated-reports-title .title .btn_primary:hover svg path {
  fill: #ffffff;
}
.reports-page .generated-reports-title .icon svg {
  display: none;
  width: 25px;
  height: 25px;
}
@media only screen and (min-width: 380px) {
  .reports-page .generated-reports-title .icon svg {
    display: block;
  }
}
@media only screen and (min-width: 576px) {
  .reports-page .generated-reports-title .icon svg {
    width: 30px;
    height: 38px;
  }
}
.reports-page .generate-btn button {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  padding: 4px 8px;
  border-radius: 50px;
  font-size: 14px;
}
.reports-page .generate-btn button svg {
  width: 16px;
}
@media only screen and (min-width: 380px) {
  .reports-page .generate-btn button {
    padding: 4px 20px;
    font-size: 16px;
  }
  .reports-page .generate-btn button svg {
    width: 20px;
  }
}
.reports-page .left-filter-input {
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .reports-page .left-filter-input {
    width: 60%;
  }
}
.reports-page .left-filter-input .ss-main {
  height: 50px !important;
  margin-bottom: 0px !important;
}
.reports-page .left-filter-input .block-title {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .reports-page .left-filter-input .block-title {
    margin-bottom: 26px;
  }
}
.reports-page .left-filter-input .block-title .h4 {
  color: #4c4c9d;
  font-family: Poppins;
  font-size: 20px;
  font-weight: 400;
  margin-top: 0px;
  margin-bottom: 0px;
}
.reports-page .left-filter-input .repot-type-frequen {
  flex-direction: column;
}
.reports-page .left-filter-input .repot-type-frequen label {
  margin-bottom: 10px;
  display: block;
}
@media only screen and (min-width: 576px) {
  .reports-page .left-filter-input .repot-type-frequen label {
    margin-bottom: 26px;
  }
}
@media only screen and (min-width: 576px) {
  .reports-page .left-filter-input .repot-type-frequen {
    flex-direction: row;
  }
}
.reports-page .left-filter-input .block-title-date {
  align-items: center;
  justify-content: space-between;
  /* Ensure pointer cursor applies when hovering */
}
.reports-page .left-filter-input .block-title-date .h4 {
  color: #000;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
}
.reports-page .left-filter-input .block-title-date .switch {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 22px;
}
.reports-page .left-filter-input .block-title-date .switch input {
  display: none;
}
.reports-page .left-filter-input .block-title-date .slider {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;
  border-radius: 15px;
  transition: background 0.3s;
}
.reports-page .left-filter-input .block-title-date .slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #4c4c9d;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: all 0.3s;
}
.reports-page .left-filter-input .block-title-date input:checked + .slider {
  background: #4c4c9d;
}
.reports-page .left-filter-input .block-title-date input:checked + .slider::before {
  left: 22px;
  background: #fff;
}
.reports-page .left-filter-input .block-title-date .switch:hover .slider {
  cursor: pointer;
}
.reports-page .left-filter-input .input-date-continaer {
  align-items: center;
  justify-content: space-between;
}
.reports-page .left-filter-input .input-date-continaer .labletext {
  width: -moz-fit-content;
  width: fit-content;
  padding: 0px;
  margin: 0px;
  display: block;
  text-align: center;
}
.reports-page .left-filter-input .input-date-continaer label {
  font-size: 16px;
  font-weight: 500;
}
.reports-page .left-filter-input .input-date-continaer .input-date-box {
  width: 100%;
}
@media only screen and (min-width: 576px) {
  .reports-page .left-filter-input .input-date-continaer .input-date-box {
    width: 48%;
  }
}
.reports-page .left-filter-input .input-date-continaer .input-date-box input[type=date] {
  font-size: 16px;
  height: 50px;
  margin: 0px;
  border: 1px solid #cdcccc;
}
.reports-page .right-filter-preview {
  width: 100%;
  padding-left: 0px;
  padding-top: 20px;
}
@media only screen and (min-width: 1200px) {
  .reports-page .right-filter-preview {
    width: 40%;
    padding-top: 0px;
    padding-left: 22px;
  }
}
.reports-page .right-filter-preview .bg-image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.reports-page .right-filter-preview .bg-image .report-overlay {
  border-radius: 10px;
  padding: 100px 20px;
  background-color: rgba(0, 0, 0, 0.288);
}
@media only screen and (min-width: 1200px) {
  .reports-page .right-filter-preview .bg-image .report-overlay {
    padding: 120px 40px;
  }
}
.reports-page .right-filter-preview .bg-image .report-overlay .ppcvs-icon-box {
  width: 300px;
  max-width: 100%;
  padding: 10px;
  border-radius: 50px;
  background: #4c4c9d;
  margin: auto;
  display: flex;
  gap: 15px;
  justify-content: center;
}
.reports-page .right-filter-preview .bg-image .report-overlay .ppcvs-icon-box img {
  width: 30px;
}
@media only screen and (min-width: 576px) {
  .reports-page .right-filter-preview .bg-image .report-overlay .ppcvs-icon-box {
    padding: 10px 30px;
  }
  .reports-page .right-filter-preview .bg-image .report-overlay .ppcvs-icon-box img {
    width: 40px;
  }
}

/* ==== 14. Reports Page Style End ==== */
/* ==== 15. Expenses List Page Style Start ==== */
.expenses-page .method,
.transactions-page .method {
  display: flex;
  align-items: center;
  gap: 10px;
}

.suppliers-list-popup select {
  height: 40px;
  margin-bottom: 0px;
}
.suppliers-list-popup textarea {
  height: 40px !important;
}
.suppliers-list-popup .ss-main {
  height: 40px !important;
  margin-bottom: 0px !important;
}

/* ==== 15. Expenses List Page Style End ==== */
/* ==== 16. Settings Common Style Start ==== */
.settings-content {
  display: block;
  gap: 15px;
  height: 100%;
}
@media only screen and (min-width: 1200px) {
  .settings-content {
    display: flex;
    flex-direction: row;
  }
}
.settings-content .sub-settings-item-area {
  width: 100%;
  border-radius: 10px !important;
  border: 0.5px solid rgba(76, 76, 157, 0.3);
  background-color: unset !important;
  padding: 10px;
  overflow: auto;
  background-color: #f7fafc !important;
}
@media only screen and (min-width: 1200px) {
  .settings-content .sub-settings-item-area {
    overflow: unset;
    width: 40%;
  }
}
@media only screen and (min-width: 1300px) {
  .settings-content .sub-settings-item-area {
    width: 30%;
  }
}
@media only screen and (min-width: 1400px) {
  .settings-content .sub-settings-item-area {
    width: 24%;
  }
}
@media only screen and (min-width: 1600px) {
  .settings-content .sub-settings-item-area {
    width: 22%;
  }
}
@media only screen and (min-width: 1800px) {
  .settings-content .sub-settings-item-area {
    width: 18%;
  }
}
.settings-content .sub-settings-item-area .sidebar-item-box {
  width: 100% !important;
}
.settings-content .sub-settings-item-area .sidebar-item-box .menu-item-label {
  gap: 6px;
}
.settings-content .sub-settings-item-area .sidebar-item-box .menu-item-label img {
  margin-right: 0px !important;
}
.settings-content .sub-settings-item-area .sidebar-item-box .active-menu {
  border-radius: 10px;
  border: 0px;
  background-color: rgba(76, 76, 157, 0.09);
}
.settings-content .sub-settings-item-area .sidebar-item-box .item-link {
  border: 0px;
  border-radius: 10px;
}
@media only screen and (min-width: 1200px) {
  .settings-content .sub-settings-item-area .sidebar-item-box .item-link {
    padding-right: 10px;
  }
}
.settings-content .sub-settings-item-area .sidebar-item-box .item-link:hover {
  background-color: rgba(76, 76, 157, 0.09);
}
.settings-content .sidebar-item-box {
  width: 100%;
  display: flex;
  overflow: scroll;
  padding-left: 0px;
  padding-bottom: 6px;
  padding-top: 6px;
}
@media only screen and (min-width: 1200px) {
  .settings-content .sidebar-item-box {
    width: 280px;
    display: block;
    overflow: unset;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}
.settings-content .sidebar-item-box ul {
  display: flex;
  padding: 0px;
  margin: 0px;
  list-style: none;
  gap: 15px;
}
.settings-content .sidebar-item-box ul li {
  padding: 0px;
}
.settings-content .sidebar-item-box ul li .active-menu {
  border-top: 4px solid #4c4c9d;
  border-left: unset;
}
.settings-content .sidebar-item-box ul li a {
  font-weight: 300;
  font-size: 18px;
  color: #000000;
  padding: 0px;
}
@media only screen and (min-width: 1200px) {
  .settings-content .sidebar-item-box ul li a {
    padding: 8px;
  }
}
.settings-content .sidebar-item-box ul li a .menu-item-label {
  text-align: center;
  flex-wrap: nowrap !important;
  align-items: center;
}
.settings-content .sidebar-item-box ul li a .menu-item-label span {
  display: none;
  text-wrap-mode: nowrap;
}
@media only screen and (min-width: 768px) {
  .settings-content .sidebar-item-box ul li a .menu-item-label span {
    display: flex;
  }
}
@media only screen and (min-width: 1200px) {
  .settings-content .sidebar-item-box ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: block;
  }
  .settings-content .sidebar-item-box ul li {
    padding-top: 10px;
    margin: 0px;
  }
  .settings-content .sidebar-item-box ul li .item-link {
    border-left: 4px solid rgba(255, 255, 255, 0);
  }
  .settings-content .sidebar-item-box ul li .active-menu {
    background-color: rgba(76, 76, 157, 0.137254902);
    border-left: 4px solid #4c4c9d;
    border-top: 0px;
  }
  .settings-content .sidebar-item-box ul li a {
    display: flex;
    padding: 8px 0px;
    list-style: none;
    color: #4c4c9d;
    padding-left: 10px;
  }
  .settings-content .sidebar-item-box ul li a:hover {
    background-color: rgba(76, 76, 157, 0.137254902);
    border-left: 4px solid #4c4c9d;
    text-decoration: none;
  }
  .settings-content .sidebar-item-box ul li a .d-flex {
    text-align: left;
  }
  .settings-content .sidebar-item-box ul li a .d-flex span {
    text-wrap-mode: wrap;
  }
  .settings-content .sidebar-item-box ul li .d-flex {
    display: block;
    align-items: center;
    font-size: 18px;
  }
  .settings-content .sidebar-item-box ul li .d-flex img {
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 6px;
  }
  .settings-content .sidebar-item-box ul li .d-flex span {
    display: block;
  }
}
@media only screen and (min-width: 1200px) and (min-width: 1200px) {
  .settings-content .sidebar-item-box ul li .d-flex {
    display: flex;
  }
  .settings-content .sidebar-item-box ul li .d-flex span {
    display: inline;
  }
}
.settings-content .sub-settings-content-area {
  width: 100%;
  border-radius: 10px;
  border: 0.5px solid rgba(76, 76, 157, 0.3);
  background-color: #ffffff !important;
  padding: 10px 10px;
  margin-top: 10px;
}
@media only screen and (min-width: 1200px) {
  .settings-content .sub-settings-content-area {
    padding: 20px;
    margin-top: 0px;
  }
}
@media only screen and (min-width: 1400px) {
  .settings-content .sub-settings-content-area {
    margin-top: 0px;
    width: 83%;
  }
}
.settings-content .sub-settings-content-area .content-header {
  padding-bottom: 10px;
}
@media only screen and (min-width: 992px) {
  .settings-content .sub-settings-content-area .content-header {
    padding-bottom: 20px;
  }
}
.settings-content .sub-settings-content-area .others-tools {
  margin-bottom: 5px;
}
@media only screen and (min-width: 576px) {
  .settings-content .sub-settings-content-area .others-tools {
    margin-bottom: 0px;
  }
}
.settings-content .sub-settings-content-area .setting-input-lebel .h3 {
  padding: 10px 10px 10px 10px;
  font-size: 18px;
  font-weight: 400;
  border-radius: 10px;
  background: #f7fafc;
}
.settings-content .sub-settings-content-area .setting-input-lebel label {
  display: block;
  padding-bottom: 12px;
  margin-bottom: 0px;
}
.settings-content .sub-settings-content-area .setting-input-lebel input {
  height: 50px;
  border-radius: 10px;
  border: 1px solid #cdcccc;
}
.settings-content .sub-settings-content-area .setting-input-lebel input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4392156863);
}
.settings-content .sub-settings-content-area .setting-input-lebel input::placeholder {
  color: rgba(0, 0, 0, 0.4392156863);
}
.settings-content .sub-settings-content-area .setting-input-lebel select {
  margin-bottom: 8px;
}

/* ==== 16. Settings Common Style End ==== */
/* ==== 17. Settings Appearance Page Style Start ==== */
.appearance .setting-input-lebel {
  margin-bottom: 0px;
}
@media only screen and (min-width: 992px) {
  .appearance .setting-input-lebel {
    margin-bottom: 15px;
  }
}
.appearance .h3 {
  font-weight: 400 !important;
  font-size: 18px;
}
.appearance ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.appearance .logobranding .logofavicon {
  gap: 20px;
}
.appearance .logobranding .logo-box .image-preview-container {
  width: 100px;
  height: 100px;
}
@media only screen and (min-width: 992px) {
  .appearance .logobranding .logo-box .image-preview-container {
    width: 122px;
    height: 122px;
  }
}
.appearance .logobranding .logo-box .image-preview-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}
.appearance .logobranding .logo-box .upload-container {
  align-items: center;
  gap: 15px;
  text-align: center;
}
.appearance .logobranding .logo-box .upload-container .input-name {
  font-size: 16px;
  padding-top: 10px;
  display: block;
}
.appearance .logobranding .logo-box .upload-box {
  border: 0px;
  background-color: #f7fafc;
  padding: 10px;
  width: 135px;
  max-width: 100%;
  flex-direction: row;
  height: -moz-max-content;
  height: max-content;
}
.appearance .logobranding .favicon-box {
  display: flex;
  align-items: center;
}
.appearance .logobranding .favicon-box .upload-container {
  align-items: center;
  gap: 15px;
  text-align: center;
}
.appearance .logobranding .favicon-box .upload-container .image-preview-container img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.appearance .logobranding .favicon-box .upload-container .remove-image {
  width: 18px;
  height: 18px;
  font-size: 16px;
  line-height: 15px;
  font-weight: 500;
}
.appearance .logobranding .favicon-box .upload-container .input-name {
  padding-top: 10px;
  display: block;
}
.appearance .logobranding .favicon-box .upload-box {
  border: 0px;
  background-color: #f7fafc;
  padding: 10px;
  width: 135px;
  max-width: 100%;
  flex-direction: row;
  height: -moz-max-content;
  height: max-content;
}
.appearance .switcher-button .title {
  margin-left: 10px;
}
.appearance .switcher-button .switch {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 22px;
}
.appearance .switcher-button .switch input {
  display: none;
}
.appearance .switcher-button .slider {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ddd;
  border-radius: 15px;
  transition: background 0.3s;
}
.appearance .switcher-button .slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  background: #4c4c9d;
  border-radius: 50%;
  top: 2.5px;
  left: 3px;
  transition: all 0.3s;
}
.appearance .switcher-button input:checked + .slider {
  background: #4c4c9d;
}
.appearance .switcher-button input:checked + .slider::before {
  left: 22px;
  background: #ffffff;
}
.appearance .switcher-button .switch:hover .slider {
  cursor: pointer;
}
.appearance .themestyle .radio-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
@media only screen and (min-width: 1200px) {
  .appearance .themestyle .radio-wrap {
    gap: 50px;
  }
}
.appearance .themestyle input[type=radio] {
  display: none;
}
.appearance .themestyle .label-select {
  display: inline-block;
  width: 80px;
  height: 60px;
  background-size: cover;
  border: 2px solid transparent;
  cursor: pointer;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 1200px) {
  .appearance .themestyle .label-select {
    width: 110px;
    height: 80px;
  }
}
.appearance .themestyle label {
  margin: 0px !important;
  padding: 0px !important;
  color: #000000;
  text-align: center;
}
.appearance .themestyle input[type=radio]:checked + label {
  border-color: #3169e5;
  border-radius: 10px;
}
.appearance .headerstyle .radio-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}
.appearance .headerstyle input[type=radio] {
  display: none;
}
.appearance .headerstyle .label-select {
  display: inline-block;
  width: 60px;
  height: 36px;
  background-size: cover;
  border: 2px solid transparent;
  cursor: pointer;
}
.appearance .headerstyle label {
  margin: 0px !important;
  padding: 0px !important;
  font-size: 16px;
  font-weight: 400;
}
.appearance .headerstyle input[type=radio]:checked + label {
  border-color: #3169e5;
  border-radius: 5px;
}
.appearance .searchbarposition ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 10px;
}
.appearance .searchbarposition ul li {
  padding: 0px;
  margin: 0px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
}
@media only screen and (min-width: 992px) {
  .appearance .searchbarposition ul li {
    width: 120px;
  }
}
.appearance .searchbarposition ul li label {
  margin: 0px !important;
  padding: 0px !important;
  font-size: 16px;
  font-weight: 400;
}
.appearance .searchbarposition ul li input {
  width: 30px;
  margin: 0px;
  padding: 0px;
}
.appearance .font-setting {
  margin-bottom: 0px;
}
.appearance .font-setting label {
  font-size: 16px;
}
.appearance .font-setting .font-input-box {
  gap: 10px;
  padding-right: 20px;
  padding-left: 20px;
  align-items: center;
  margin-bottom: 10px;
}
.appearance .font-setting .font-input-box select {
  width: 100%;
  height: 30px;
  font-size: 16px;
  font-weight: 400;
}
@media only screen and (min-width: 576px) {
  .appearance .font-setting .font-input-box select {
    width: 200px;
    max-width: 100%;
    height: 30px;
    margin: 0px !important;
  }
}
.appearance .font-setting label {
  margin: 0px !important;
  padding: 0px !important;
}
.appearance .color-menu .color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
}
.appearance .color-menu .color-options li {
  display: flex;
}
.appearance .color-menu .color-options li label {
  padding: 0px;
}
.appearance .color-menu .color-radio {
  display: none;
}
.appearance .color-menu .color-swatch {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s ease;
}
.appearance .color-menu .color-radio:checked + .color-swatch {
  border-color: #cdcccc;
}
.appearance .color-menu ul {
  list-style: none;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.appearance .color-menu ul .custom-color {
  width: 280px;
  height: 40px;
  max-width: 100%;
  flex-wrap: nowrap;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
}
.appearance .color-menu ul .custom-color span {
  color: rgba(0, 0, 0, 0.5);
}
.appearance .color-menu ul .custom-color .color-wrapper {
  padding: 0px;
  margin: 0px;
  position: relative;
}
.appearance .color-menu ul .custom-color .colorpicker {
  width: 20px;
  height: 20px;
  padding: 0px;
  margin: 0px;
  border-radius: 0px;
  background-repeat: no-repeat;
  background-size: auto;
  border: 0px;
  background-color: unset;
  visibility: hidden;
  position: absolute;
}

.search-left {
  margin-right: auto !important;
}

.search-right {
  margin-left: auto !important;
}

.search-center {
  margin: auto !important;
}

.search-none {
  display: none;
}

/* ==== 17. Settings Appearance Page Style End ==== */
/* ==== 18. Settings User Management Page Style Start ==== */
/* ==== 18. Settings User Management Page Style End ==== */
/* ==== 19. Settings Roles and Permissions Page Style Start ==== */
.roles-permissions .roletitle {
  margin-top: 20px;
}
.roles-permissions .roletitle .left-roles {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0px 15px;
}
@media only screen and (min-width: 576px) {
  .roles-permissions .roletitle .left-roles {
    width: 50%;
    gap: 20px;
  }
}
.roles-permissions .roletitle .left-roles span {
  color: #000000;
  font-size: 20px;
  font-weight: 400;
}
.roles-permissions .roletitle .left-roles select {
  display: flex;
  width: 300px;
  height: 40px;
  padding: 10px;
  align-items: center;
  margin: 0px;
  font-size: 16px;
}
.roles-permissions .roletitle .right-addnew {
  width: 100%;
  padding: 15px;
  padding-bottom: 0px;
  text-align: right;
  display: flex;
  justify-content: center;
  gap: 15px;
  justify-content: space-between;
}
@media only screen and (min-width: 576px) {
  .roles-permissions .roletitle .right-addnew {
    width: 50%;
    justify-content: flex-end;
    padding: 0px 15px;
  }
}
.roles-permissions .roletitle .right-addnew a {
  width: -moz-fit-content;
  width: fit-content;
}
.roles-permissions .permission-tree {
  display: flex;
  flex-wrap: wrap;
}
.roles-permissions .permission-tree .row {
  margin-left: 0px;
}
.roles-permissions .permission-tree .service-list {
  width: 50%;
  padding-top: 20px;
}
@media (min-width: 576px) {
  .roles-permissions .permission-tree .service-list {
    width: 33.33%;
  }
}
@media (min-width: 1250px) {
  .roles-permissions .permission-tree .service-list {
    width: 20%;
  }
}
.roles-permissions .permission-tree .service-list ul li {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 18px;
  font-style: normal;
  line-height: normal;
}
.roles-permissions .permission-tree .service-list ul li ul {
  list-style: none;
  position: relative;
}
.roles-permissions .permission-tree .service-list ul li ul::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 8px;
  border-left: 2px solid #999;
  height: 96.9%;
}
.roles-permissions .permission-tree .service-list ul li ul li {
  position: relative;
  margin: 0 0 10px 34px;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px;
}
.roles-permissions .permission-tree .service-list ul li ul li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -24px;
  width: 25px;
  height: 2px;
  background: #999;
}
.roles-permissions .permission-tree .service-list label {
  margin-bottom: 0px !important;
}
.roles-permissions .permission-tree .service-list .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.roles-permissions .permission-tree .service-list .checkbox input[type=checkbox] {
  width: 18px;
  height: 19px;
  accent-color: #4c4c9d;
  border: 2px solid #4c4c9d;
  border-radius: 3px;
  background-color: #ffffff;
  margin: 0;
  position: relative;
  z-index: 999;
  cursor: pointer;
}
.roles-permissions .userinadminlist .left-roles a {
  color: #ef715a;
  font-family: Poppins;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.roles-permissions .userinadminlist .right-addnew a {
  text-decoration: none;
}
.roles-permissions .item-list-table table {
  overflow: auto;
  width: 825px;
}
@media (min-width: 825px) {
  .roles-permissions .item-list-table table {
    width: 100%;
  }
}
.roles-permissions .item-list-table table tr th {
  padding: 16px 5px;
}
.roles-permissions .item-list-table table tr th:last-child {
  text-align: center;
}
.roles-permissions .item-list-table table tr td:last-child button {
  margin: auto;
}
.roles-permissions .item-list-table table .img-title-col {
  display: flex;
  align-items: center;
  gap: 10px;
}
.roles-permissions .item-list-table table tr td {
  padding: 7px 5px;
}
.roles-permissions .item-list-table table tr td input {
  border-radius: 4px;
  border: 2px solid #cdcccc;
}

.roles-permissions-popup .main-content {
  overflow-y: scroll;
  height: 100%;
}
.roles-permissions-popup .modal .modal-content {
  width: 90%;
  height: 85%;
  max-width: 100%;
}
@media only screen and (min-width: 1300px) {
  .roles-permissions-popup .modal .modal-content {
    width: 1140px !important;
  }
}
.roles-permissions-popup .table-item-search input {
  border-radius: 25px;
}

.viewallRolesPopup .modal .modal-content {
  width: 90%;
  max-width: 100%;
}
@media only screen and (min-width: 1300px) {
  .viewallRolesPopup .modal .modal-content {
    width: 1140px !important;
  }
}
.viewallRolesPopup .modal .modal-content .table-item-search input {
  border-radius: 25px;
}

/* ==== 19. Settings Roles and Permissions Page Style End ==== */
/* ==== 20. Inventory Settings Page Style Start ==== */
.inventory-settings .switcher-button {
  margin-bottom: 0px;
}
.inventory-settings .switcher-button .switch-header {
  padding: 20px 0px;
  color: #07090c;
  font-family: Poppins;
  font-size: 16px;
  font-weight: 400;
  margin: 0px;
}
.inventory-settings .switcher-button .title {
  color: #ffffff;
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  padding-bottom: 0px !important;
}

/* ==== 20. Inventory Settings Page Style End ==== */
/* ==== 21. Reports settings page Style Start ==== */
.reports-settings .switcher-button select {
  width: 90px;
  height: 30px;
}

/* ==== 21. Reports settings page Style End ==== */
/* ==== 22. Payment method setting page Style Start ==== */
.paymentmethods .paymentmethods-table .img-title-col {
  display: flex;
  align-items: center;
  gap: 10px;
}
.paymentmethods .paymentmethods-table table {
  width: 400px;
}
@media only screen and (min-width: 400px) {
  .paymentmethods .paymentmethods-table table {
    width: 100%;
  }
}
.paymentmethods .paymentmethods-table .payment-mentod-default {
  width: 30px;
}
.paymentmethods .paymentmethods-table tr th:last-child {
  text-align: center;
}
.paymentmethods .paymentmethods-table tr th:first-child {
  width: auto !important;
}
.paymentmethods .paymentmethods-table tr td:first-child {
  width: auto !important;
}
.paymentmethods .paymentmethods-table .item-status p {
  background-color: unset;
  padding: 0px;
}

.paymentmethods-popup .modal-content {
  width: 350px !important;
}
.paymentmethods-popup .modal-content .paymethod-status select {
  width: 100%;
}
.paymentmethods-popup .methodinputbox {
  width: 80%;
  margin: auto;
  gap: 20px;
}
.paymentmethods-popup .method-name {
  width: 100%;
}
.paymentmethods-popup .paymethod-status {
  width: 100%;
  margin-bottom: 40px;
}
.paymentmethods-popup .modal-content {
  padding: 25px !important;
}
.paymentmethods-popup .btn_secondary {
  padding: 10px 16px;
}
.paymentmethods-popup table tr th {
  background-color: #f7fafc;
}
.paymentmethods-popup table tr:nth-last-child(odd) {
  background-color: #f7fafc;
}

/* ==== 22. Payment method setting page Style End ==== */
/* ==== 23. Backup and Restore Setting page Style Start ==== */
.backupandrestore .action-btn-wrapper {
  justify-content: center;
  gap: 6px;
}
.backupandrestore .action-btn-wrapper button {
  margin: 0px !important;
}
.backupandrestore .heading-title {
  color: #4c4c9d;
  font-size: 18px;
  font-weight: 600;
  padding: 20px 0px;
  margin: 0px;
}
.backupandrestore .heading-title .h3 {
  margin: 0px;
  padding: 0px;
}
.backupandrestore table {
  overflow: auto;
  min-width: 890px;
  margin-top: 0px !important;
}
.backupandrestore tr th {
  color: rgba(0, 0, 0, 0.4392156863) !important;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 10px !important;
}
.backupandrestore tr th:first-child {
  width: auto !important;
}
.backupandrestore tr td:first-child {
  width: auto !important;
}
.backupandrestore tr {
  background-color: unset !important;
}
.backupandrestore tr:first-child {
  background-color: #f7fafc !important;
}
.backupandrestore .switcher-button {
  text-align: center;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

/* ==== 23. Backup and Restore Setting page Style End ==== */
/* ==== 24. Transaction Setup Setting page Style Start ==== */
.expensecategories table {
  width: 400px !important;
}
@media only screen and (min-width: 450px) {
  .expensecategories table {
    width: 100% !important;
  }
}
.expensecategories table th {
  color: #000000 !important;
  font-weight: 500 !important;
}
.expensecategories table tr th:first-child {
  width: auto !important;
}
.expensecategories table tr td:first-child {
  width: auto !important;
}

.addexpensecategory-popup .modal-content {
  width: 300px !important;
  max-width: 100%;
  padding: 20px !important;
}
.addexpensecategory-popup .modal-content .block-title-date {
  justify-content: space-between !important;
}

/* ==== 24. Transaction Setup Setting page Style End ==== */
/* ==== 25. Branch Management Setting page Style End ==== */
.branch-management-table table {
  width: 700px !important;
}
@media only screen and (min-width: 700px) {
  .branch-management-table table {
    width: 100% !important;
  }
}
.branch-management-table table td {
  padding: 10px;
}
.branch-management-table table tr td:first-child {
  width: auto !important;
}
.branch-management-table table tr th:first-child {
  width: auto !important;
}

/* ==== 25. Branch Management Setting page Style End ==== */
/* ==== 26. Update Settings page Style End ==== */
.update-settings .update-info {
  gap: 8px;
  align-items: center;
}
@media only screen and (min-width: 576px) {
  .update-settings .update-info {
    gap: 16px;
  }
}
.update-settings .update-info .update-mark-icon {
  display: flex;
  align-items: center;
}
.update-settings .update-info .update-mark-icon svg {
  width: 25px;
}
@media only screen and (min-width: 768px) {
  .update-settings .update-info .update-mark-icon svg {
    width: 40px;
  }
}
.update-settings .update-info .update-text p {
  font-size: 14px;
  margin: 0px;
  margin: 0px;
  color: rgba(0, 0, 0, 0.4392156863);
}
@media only screen and (min-width: 450px) {
  .update-settings .update-info .update-text p {
    font-size: 16px;
  }
}
.update-settings .update-info .update-text span {
  font-size: 14px;
}
.update-settings .update-info .update-text span b {
  font-weight: 500;
}
@media only screen and (min-width: 450px) {
  .update-settings .update-info .update-text span {
    font-size: 16px;
  }
}
.update-settings .update-setting-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #cdcccc;
  border-radius: 10px;
}
.update-settings .update-setting-item p {
  margin: 0px;
  padding: 0px;
}
.update-settings .update-setting-item label {
  margin-bottom: 0px;
}
.update-settings .btn-primery {
  background-color: #f7fafc;
  font-size: 14px;
}
@media only screen and (min-width: 450px) {
  .update-settings .btn-primery {
    font-size: 16px;
  }
}
@media only screen and (min-width: 765px) {
  .update-settings .btn-primery {
    font-size: 18px;
  }
}
.update-settings .btn-primery:hover svg path {
  fill: #ffffff;
}
.update-settings .updated-software-part {
  padding: 10px;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}
@media only screen and (min-width: 570px) {
  .update-settings .updated-software-part {
    justify-content: space-between;
  }
}

/* ==== 26. Update Settings page Style End ==== */
/* ==== 27. Logout Page Style Start ==== */
#userlogout {
  z-index: 999999999;
}
#userlogout .content-text h3 {
  font-size: 30px;
  font-weight: 600;
}
#userlogout .confirm-button {
  display: flex;
  justify-content: center;
  gap: 20px;
}
#userlogout .confirm-button a {
  width: 100px;
}

/* ==== 27. Logout Page Style End ==== */
/* ==== 28. Help and info Page Style Start ==== */
#helpinfo {
  z-index: 999999999;
}

/* ==== 28. Help and info Page Style End ==== */
/* ==== 29. Login Page page Style Start ==== */
.main {
  height: 100%;
}

.auth-page {
  background-color: #f7fafc;
  height: 100%;
  display: flex;
  background-repeat: no-repeat;
  background-position: top right;
}
.auth-page .auth-container {
  width: 1200px;
  max-width: 100%;
  margin: auto;
  padding-left: 30px;
  padding-right: 30px;
}
.auth-page .top-logo {
  display: block;
  padding-bottom: 30px !important;
}
@media only screen and (min-width: 992px) {
  .auth-page .top-logo {
    display: none;
  }
}
.auth-page .left-side {
  flex-direction: column;
  justify-content: space-between;
  display: none;
}
@media only screen and (min-width: 992px) {
  .auth-page .left-side {
    display: flex;
    gap: 20px;
  }
}
.auth-page .left-side .auth-left-img img {
  width: 530px;
  max-width: 100%;
}
.auth-page .right-side {
  margin: auto;
}
.auth-page .right-side .mobile-banner-img img {
  width: 200px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 992px) {
  .auth-page .right-side .mobile-banner-img {
    display: none;
  }
}
.auth-page .right-side .logo-img {
  display: none;
}
@media only screen and (min-width: 992px) {
  .auth-page .right-side .logo-img {
    display: block;
  }
}
.auth-page .right-side .auth-form {
  max-width: 100%;
  padding: 30px;
  border-radius: 20px;
  border: 1px solid #cdcccc;
  background: #f7fafc;
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.25);
  margin-left: auto;
}
@media only screen and (min-width: 576px) {
  .auth-page .right-side .auth-form {
    width: 448px;
  }
}
@media only screen and (min-width: 992px) {
  .auth-page .right-side .auth-form {
    padding: 60px 30px;
  }
}
.auth-page .right-side .auth-form .form-head {
  text-align: center;
}
.auth-page .right-side .auth-form .form-head .logo-img {
  padding-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .auth-page .right-side .auth-form .form-head .logo-img {
    padding-bottom: 42px;
  }
}
.auth-page .right-side .auth-form .form-head .h2 {
  color: #07090c;
  text-align: center;
  font-family: Poppins;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 0px;
}
@media only screen and (min-width: 576px) {
  .auth-page .right-side .auth-form .form-head .h2 {
    font-size: 32px;
    margin-bottom: 36px;
  }
}
.auth-page .right-side .auth-form .form-head p {
  margin: 0px;
  padding-bottom: 20px;
}
@media only screen and (min-width: 576px) {
  .auth-page .right-side .auth-form .form-head p {
    padding-bottom: 36px;
  }
}
.auth-page .right-side .auth-form .input-item-box input {
  width: 100%;
  border-radius: 15px;
  border: 1px solid #cdcccc;
  color: rgba(0, 0, 0, 0.4);
  font-size: 18px;
  font-weight: 400;
  height: 60px;
  padding: 20px 46px;
  background-repeat: no-repeat;
  background-position: 20px center;
  font-weight: 400;
  margin-bottom: 20px;
  background-color: unset;
}
@media only screen and (min-width: 576px) {
  .auth-page .right-side .auth-form .input-item-box input {
    margin-bottom: 30px;
  }
}
.auth-page .right-side .auth-form .input-item-box .primaryBtn {
  width: 100%;
  border-radius: 15px;
  padding: 15px 20px;
  color: #ffffff;
  font-size: 20px;
}
.auth-page .right-side .auth-form .forget-pass {
  margin-top: 25px;
  text-align: center;
}
.auth-page .right-side .auth-form .forget-pass a {
  text-decoration: none;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
}
.auth-page .logo-and-sologan {
  margin: auto;
  padding-bottom: 60px;
}
.auth-page .logo-and-sologan img {
  width: 180px;
  max-width: 100%;
}
@media only screen and (min-width: 992px) {
  .auth-page .logo-and-sologan {
    padding-bottom: 0px;
    margin: unset;
  }
  .auth-page .logo-and-sologan img {
    width: 342px;
  }
}

/* ==== 29. Login Page page Style End ==== *//*# sourceMappingURL=style.css.map */