@charset "UTF-8";
:root {
  --color-primary: #112673;
  --color-secondary: #4D5865;
  --color-background: #F5F7FF;
  --color-sidebar-background: #F5F7FA;
  --color-white: #FFFFFF;
  --color-accent: #2B449D;
  --color-border-search: #CDD1E4;
  --color-text: #03140F;
  --color-hover: #E4EAFF;
  --color-text-hover: #112673;
  --color-active: #0AB39C;
  --color-inactive: #F06547;
  --color-info-light: #0AAFE3;
  --background-info: #E2F5FC;
  --color-secondary-light: #A571C5;
  --color-purple-light: #F4EEF8;
  --color-warning-light: #FF8A00;
  --color-success-light: #35C144;
  --color-error-light: #EA5657;
  --color-message: #EBFFD1;
  --color-error: #BA0000;
  --color-border: #ababab;
  --color-line: #8C8EA4;
  --color-light-hover: #F6F8FF;
  --color-search: #213E40;
  --color-notification: #A80D0D;
  --color-button-text: #576577;
  --color-paragraph: #6E7189;
  --color-grey: #CBD5E1;
  --color-image-background: #EDEDF1;
  --color-input: #B5B6C4;
  --color-select: #F7F7F8;
  --color-black: #0C0D10;
  --color-scrollbar: #D9D9D9;
  --color-scrollthumb: #949494;
  --color-lite-text: #7C849C;
  --filter-dropdown-border: #efefef;
  --filter-hover: #cfcfcf;
  --dark-accent: #0c4a4d;
  --table-head: #e1e1e1;
  --color-lite-border: #B6C3D4;
  --color-amount: #3E3E4E;
  --btn-background: #e4eaff;
  --background-progress: #e9ecef;
  --color-arrow: #939393;
  --color-toaster-succes-bg: #E4F7F1;
  --color-toaster-succes: #0D7C56;
  --color-toaster-warning-bg: #FFF8E7;
  --color-toaster-warning: #E8A317;
  --color-toaster-error-bg: #FEECEC;
  --color-toaster-error: #DC3545;
  --color-toaster--info-bg: #E8EDFF;
  --color-toaster--info: #4B64BF;
  --color-toggle: #ccc;
  --color-button: #FDFEFF;
  --color-module: #48495C;
  --color-label: #80C8C7;
  --background-tab: #ebeff0;
  --color-tab: #424242;
  --color-premium: #55ABAC;
  --placeholder-text: #8D8D8D;
  --psw-eye: #BDBDBD;
  --color-select: #F5F5F5;
  --color-button: #FDFEFF;
  --color-amount: #3E3E4E;
  --background-progress: #e9ecef;
  --color-label: #80C8C7;
  --background-tab: #ebeff0;
  --color-tab: #424242;
  --color-premium: #55ABAC;
  --premium-btn: #CDD1E4;
  --color-invoice: #404040;
  --table-background: #F6F7F8;
  --color-note: #6b7280;
  --color-green: #DDF5EE;
  --box-icon-border: #E4E7EC;
  --or-btn: #E5E8F2;
  --checkbox-border: #d1d1da;
  --color-required: #0F5132;
  --required-border: #BADBCC;
  --required-background: #E7FAF1;
  --dark-green: #23494C;
  --toaster-sucess-bg: #D1E7DD;
  --toaster-sucess-border: #BADBCC;
  --toaster-sucess-icon: #0D7C56;
  --toaster-warning-bg: #BADBCC;
  --toaster-warning-border: #FFECB5;
  --toaster-warning-icon: #D19F1F;
  --toaster-error-bg: #F8D7DA;
  --toaster-error-border: #F5C2C7;
  --toaster-error-icon: #D72F4D;
  --toaster--information-bg: #EEFEFF;
  --toaster--information-border: #AFE0DD;
  --toaster--information-icon: #2A686B;
  --hover-dropdown: #f2f2f2;
  --color-swiper-dot: #CEDBDB;
  --color-pending: #0250c5;
  --bg-red: #BF3838;
  --color-dark-hover: #245253;
  --bread-crumb-text: #475569;
  --color-cancelled: #007BFF;
  --color-inactive: #f59404ab;
  --color-warning: #d33606ed;
  --color-transfer: #f57c00;
  --popular-green: #A0CC16;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 37.5em) {
  html {
    font-size: 53%;
  }
}

body {
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 200;
  text-rendering: optimizeLegibility;
}
body.modal-open {
  overflow: hidden;
}

button {
  font-family: "DM Sans", sans-serif;
}

input {
  font-family: "DM Sans", sans-serif;
}

a {
  text-decoration: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.heading-3 {
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 90em) {
  .heading-3 {
    font-size: 1.8rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .heading-3 {
    font-size: 2rem;
    margin-top: 1rem;
  }
}

.heading-4 {
  color: var(--color-accent);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 1.7rem;
}

.heading-5 {
  color: var(--color-text-hover);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media only screen and (max-width: 90em) {
  .heading-5 {
    font-size: 1.7rem;
  }
}

.heading-6 {
  color: var(--color-text);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: var(--color-module);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.2rem;
}
@media only screen and (max-width: 90em) {
  .heading-6 {
    font-size: 1.5rem;
  }
}

.heading-7 {
  color: var(--color-text);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
}
@media only screen and (max-width: 90em) {
  .heading-7 {
    font-size: 17px;
  }
}

.heading-8 {
  color: var(--color-text);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-ExtraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-ExtraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-ExtraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-BlackItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-ExtraLightItalic.woff") format("woff");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 18pt";
  src: url("../sass/fonts/DMSans18pt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 24pt";
  src: url("../sass/fonts/DMSans24pt-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-ExtraBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans 36pt";
  src: url("../sass/fonts/DMSans36pt-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../sass/fonts/DMSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.header {
  background-color: var(--color-white);
  padding: 0.8rem 3rem;
  height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
}
@media only screen and (max-width: 90em) {
  .header {
    height: 5.5rem;
  }
}
.header__hamburger {
  display: none;
  cursor: pointer;
}
@media only screen and (max-width: 75em) {
  .header__hamburger {
    display: flex;
    margin-right: 1.2rem;
  }
  .header__hamburger svg {
    width: 3rem;
    height: 3rem;
    stroke: var(--color-black);
  }
}

.footer {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  position: relative;
  z-index: 11;
}
@media only screen and (max-width: 90em) {
  .footer {
    height: 4rem;
  }
}
.footer__content {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  color: var(--color-secondary);
}
@media only screen and (max-width: 90em) {
  .footer__content {
    font-size: 1.2rem;
  }
}
.footer__text {
  color: var(--color-accent);
}
.footer.signin-ftr {
  grid-column: 1/14;
}
.footer.subscription-plan-ftr {
  grid-column: 1/25;
}

.center_wrapper {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  padding: 0;
}

.header-one {
  padding: 1.5rem 8rem;
  height: 6rem;
  background-color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(48, 78, 120, 0.2);
  position: relative;
  z-index: 111;
}
@media only screen and (max-width: 90em) {
  .header-one {
    height: 4.5rem;
  }
}
.header-one__right--text {
  color: var(--color-text);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
}
@media only screen and (max-width: 90em) {
  .header-one__right--text {
    font-size: 1.6rem;
  }
}
.header-one__right--link {
  color: var(--color-text-hover);
  font-size: 1.8rem;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}
@media only screen and (max-width: 90em) {
  .header-one__right--link {
    font-size: 1.6rem;
  }
}
.header-one__logo {
  width: auto;
  height: 2rem;
}

.main-area {
  padding: 1rem 8rem 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  min-height: calc(100vh - 6rem);
}
@media only screen and (max-width: 106em) {
  .main-area {
    padding: 2rem 7rem 0;
  }
}
@media only screen and (max-width: 85.37em) {
  .main-area {
    padding: 2rem 6rem 0;
  }
}
.main-area__left {
  grid-column: 1/10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 6rem);
}
@media only screen and (max-width: 100em) {
  .main-area__left {
    grid-column: 1/9;
  }
}
@media only screen and (max-width: 85.37em) {
  .main-area__left {
    grid-column: 1/9;
  }
}
@media only screen and (max-width: 75em) {
  .main-area__left {
    grid-column: 1/8;
  }
}
.main-area__left--box {
  width: 70%;
}
@media only screen and (max-width: 85.37em) {
  .main-area__left--box {
    width: 80%;
  }
}
.main-area__right {
  grid-column: 10/14;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 6rem);
  margin-bottom: 3rem;
}
@media only screen and (max-width: 100em) {
  .main-area__right {
    grid-column: 9/14;
  }
}
@media only screen and (max-width: 85.37em) {
  .main-area__right {
    grid-column: 9/14;
  }
}
@media only screen and (max-width: 75em) {
  .main-area__right {
    grid-column: 8/14;
  }
}
.main-area__head {
  color: var(--color-accent);
  font-size: 4.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}
@media only screen and (max-width: 90em) {
  .main-area__head {
    font-size: 3rem;
  }
}
.main-area__head--lite {
  color: var(--color-accent);
  font-size: 4.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
@media only screen and (max-width: 90em) {
  .main-area__head--lite {
    font-size: 2.8rem;
  }
}
.main-area__desc {
  color: var(--color-text);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media only screen and (max-width: 90em) {
  .main-area__desc {
    font-size: 1.4rem;
  }
}
.main-area__form-head {
  color: var(--color-text-hover);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  text-align: center;
}
@media only screen and (max-width: 90em) {
  .main-area__form-head {
    font-size: 2.6rem;
  }
}
.main-area__sml-desc {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.main-area__check-icon {
  width: 1.8rem;
  height: 1.2rem;
  fill: var(--color-accent);
}
.main-area__ul {
  list-style: none;
  margin-top: 3.5rem;
  background-color: var(--color-white);
  position: relative;
  z-index: 1111;
}
.main-area__list {
  color: var(--color-secondary);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 1.8rem;
}
@media only screen and (max-width: 90em) {
  .main-area__list {
    font-size: 1.4rem;
  }
}
.main-area__list--img {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 111;
  width: 35%;
}
@media only screen and (max-width: 100em) {
  .main-area__list--img {
    width: 35%;
  }
}

.side-menu {
  grid-column: 1/5;
  background-color: var(--color-white);
  /*    padding: 1.3rem 0;*/
  background: #FFF;
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
  min-height: 100vh;
  transition: left 0.4s ease-in-out;
}
@media only screen and (max-width: 75em) {
  .side-menu {
    position: absolute;
    z-index: 220;
    position: fixed;
    left: -30rem;
  }
  .side-menu.active {
    left: 0;
  }
}
.side-menu__logo {
  padding: 2.2rem 4.2rem;
  display: block;
}
@media only screen and (max-width: 90em) {
  .side-menu__logo {
    padding: 1.8rem 4.2rem;
  }
}
@media only screen and (max-width: 75em) {
  .side-menu__logo {
    display: none;
  }
}
.side-menu__logo.header-logo {
  display: none;
}
@media only screen and (max-width: 75em) {
  .side-menu__logo.header-logo {
    display: block;
    padding: 0;
    margin-right: 1.2rem;
  }
}
.side-menu__logo img {
  width: auto;
  height: 2rem;
}
.side-menu__list-text {
  list-style: none;
  padding-bottom: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.side-menu__list-text .side-menu__sub-item {
  max-height: 0;
}
.side-menu__list-main {
  padding: 1.8rem 4.2rem;
  border-right: 5px solid var(--color-white);
}
@media only screen and (max-width: 106em) {
  .side-menu__list-main {
    padding: 1.5rem;
  }
}
.side-menu__list-main:hover {
  background-color: var(--color-light-hover);
}
.side-menu__list-main.active {
  background-color: var(--color-hover);
  border-right: 5px solid var(--color-text-hover);
}
.side-menu__list-main.active .side-menu__list-icon {
  stroke: var(--color-text-hover);
}
.side-menu__list-main.active .side-menu__list-label {
  color: var(--color-text-hover);
}
.side-menu__list-main.active .side-menu__list-dropdown-icon {
  stroke: var(--color-text-hover);
}
.side-menu__list-icon {
  width: 1.8rem;
  height: 2rem;
  stroke: var(--color-text);
  transition: stroke 0.3s ease, transform 0.3s ease;
}
.side-menu__list-dropdown-icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--color-text);
  transition: stroke 0.3s ease, transform 0.3s ease;
}
@media only screen and (max-width: 90em) {
  .side-menu__list-dropdown-icon {
    width: 1rem;
    height: 1.2rem;
  }
}
.side-menu__list-label {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  transition: color 0.3s ease;
  white-space: nowrap;
}
@media only screen and (max-width: 90em) {
  .side-menu__list-label {
    font-size: 1.4rem;
  }
}
.side-menu__sub-item {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  transition: max-height 0.3s ease, padding 0.3s ease;
  position: relative;
  margin: 0;
}
.side-menu__sub-item::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 50%;
  bottom: -50%;
  width: 0.2rem;
  background-color: var(--color-line);
}
.side-menu__sub-item:last-child::after {
  display: none;
}
.side-menu__sub-item::before, .side-menu__sub-item::after {
  background-color: var(--color-accent);
}
.side-menu__list-text.active .side-menu__sub-item {
  max-height: 200rem;
  padding-left: 0;
  padding-top: 2.1rem;
  margin-left: 0.3rem;
}
.side-menu__sub-text {
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 140%;
  color: var(--color-text);
  position: relative;
}
.side-menu__sub-text::after {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 2.7rem;
  width: 0.1rem;
  background-color: var(--color-line);
  height: 6rem;
  margin: 0 4.5rem;
  z-index: 1;
}
@media only screen and (max-width: 106em) {
  .side-menu__sub-text::after {
    margin: 0 2rem;
  }
}
.side-menu__sub-text:last-child::after {
  display: none;
}
.side-menu__sub-list {
  position: relative;
  padding: 1.8rem 7.1rem;
  white-space: nowrap;
}
@media only screen and (max-width: 90em) {
  .side-menu__sub-list {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 106em) {
  .side-menu__sub-list {
    padding: 1.8rem 4.5rem;
  }
}
.side-menu__sub-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--color-line);
  border-radius: 50%;
  transform: translateY(-50%);
  margin: 0 4.5rem;
  z-index: 2;
}
@media only screen and (max-width: 106em) {
  .side-menu__sub-list::before {
    margin: 0 2rem;
  }
}
.side-menu__sub-list:hover {
  background-color: var(--color-light-hover);
}
.side-menu__sub-list.active {
  color: var(--color-accent);
  background-color: var(--color-light-hover);
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}
.side-menu__sub-list.active::before {
  background-color: var(--color-accent);
}
.side-menu__sub-list.active ~ .side-menu__sub-list {
  color: var(--color-line);
}

.search-box {
  width: 32rem;
  position: relative;
}
@media only screen and (max-width: 75em) {
  .search-box {
    width: 65rem;
  }
}
@media only screen and (max-width: 64em) {
  .search-box {
    width: 60rem;
  }
}
@media only screen and (max-width: 62.3125em) {
  .search-box {
    width: 36rem;
  }
}
.search-box__input {
  border: 1px solid var(--color-border-search);
  background: transparent;
  border-radius: 12.3rem;
  padding: 0.8rem 3.2rem 0.8rem 1rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.2rem;
  letter-spacing: -0.098px;
  width: 100%;
  outline: none;
}
@media only screen and (max-width: 90em) {
  .search-box__input {
    padding: 0.3rem 3.2rem 0.3rem 0.8rem;
    font-size: 1.2rem;
  }
}
.search-box__input.permissions {
  border-radius: 0.6rem;
  padding: 0.8rem 1rem 0.8rem 3.2rem;
}
.search-box__input.user-activity {
  border-radius: 0.6rem;
  padding: 0.8rem 1rem 0.8rem 3.2rem;
  margin: 2rem;
}
@media only screen and (max-width: 90em) {
  .search-box__input.user-activity {
    border-radius: 0.6rem;
    padding: 0.3rem 1rem 0.3rem 2.5rem;
    margin: 1rem;
    width: 85%;
  }
}
.search-box__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--color-search);
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 90em) {
  .search-box__icon {
    width: 1.4rem;
    height: 1.4rem;
  }
}
.search-box__icon.wrapper-input-icon {
  left: 1.5rem;
}
.search-box__icon.user-input-icon {
  left: 2.8rem;
}
@media only screen and (max-width: 90em) {
  .search-box__icon.user-input-icon {
    left: 1.8rem;
  }
}
.search-box__filter-icon {
  text-decoration: none;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  color: var(--color-line);
}

.notification {
  position: relative;
  margin-top: 0.6rem;
}
.notification__icon {
  width: 2rem;
  height: 2.4rem;
  stroke: var(--color-text);
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .notification__icon {
    width: 1.8rem;
    height: 2rem;
  }
}
.notification__counter {
  background-color: var(--color-notification);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  position: absolute;
  right: -0.8rem;
  top: -0.4rem;
}
@media only screen and (max-width: 90em) {
  .notification__counter {
    width: 1.5rem;
    height: 1.5rem;
    right: -0.5rem;
    top: -0.4rem;
  }
}
.notification__text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--color-white);
  font-weight: 600;
  margin-top: 0.3rem;
}
@media only screen and (max-width: 90em) {
  .notification__text {
    margin-top: 0.2rem;
  }
}

.header-profile {
  margin-left: 1.8rem;
  display: inline;
  position: relative;
}
.header-profile__button {
  border-radius: 4rem;
  border: 1px solid var(--color-border-search);
  outline: 0;
  background-color: var(--color-light-hover);
  padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .header-profile__button {
    padding: 0.5rem 1.1rem 0.5rem 0.7rem;
  }
}
.header-profile__user-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}
@media only screen and (max-width: 90em) {
  .header-profile__user-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.header-profile__text {
  color: var(--color-button-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  margin-right: 0.4rem;
  text-overflow: ellipsis;
  overflow: hidden;
  /*        display: -webkit-box !important;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  padding: 0 1rem;*/
  white-space: nowrap;
  padding: 0 1rem;
  min-width: 10rem;
  max-width: 15rem;
}
.header-profile__dropdown {
  position: absolute;
  top: 6.6rem;
  right: 0;
  display: none;
}
.header-profile__dropdown.is-visible {
  display: block;
}
.header-profile__menu {
  background: var(--color-white);
  border-radius: 1.6rem;
  border-bottom: 1px solid var(--color-border-search);
  width: 19.5rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  z-index: 20;
  position: relative;
  list-style: none;
}
.header-profile__menu-icon {
  height: 1.5rem;
  width: 1.5rem;
  stroke: var(--color-text);
  margin-right: 1rem;
}
.header-profile__menu-item {
  list-style: none;
  padding: 1.2rem 1.8rem;
  border-bottom: 1px solid var(--color-border-search);
}
.header-profile__menu-item:hover {
  cursor: pointer;
  transition: 0.5s;
}
.header-profile__menu-item:hover .header-profile__menu-text {
  color: var(--color-accent);
}
.header-profile__menu-item:hover .header-profile__menu-icon {
  stroke: var(--color-accent);
}
.header-profile__menu-text {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 500;
  color: var(--color-text);
}

.notification-dropdown {
  background: var(--color-white);
  border-radius: 1.6rem;
  border-bottom: 1px solid var(--color-border-search);
  width: 38.9rem;
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  position: absolute;
  top: 4.5rem;
  right: 0;
  display: none;
  z-index: 9999999;
}
.notification-dropdown.is-visible {
  display: block;
}
.notification-dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.9rem 1.6rem;
}
.notification-dropdown__heading {
  color: var(--color-accent);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.2rem;
}
.notification-dropdown__icon {
  width: 1.1rem;
  height: 1.1rem;
  stroke: var(--color-secondary);
  cursor: pointer;
}
.notification-dropdown__list {
  list-style: none;
  height: 51rem;
  overflow-y: scroll;
}
.notification-dropdown__list::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.6rem;
  background-color: transparent;
  border-radius: 0.3rem;
}
.notification-dropdown__list::-webkit-scrollbar-thumb {
  background-color: #C1C1C1;
  border-radius: 0.3rem;
}
.notification-dropdown__item {
  padding: 1.2rem 1.3rem 1.1rem 2.2rem;
  display: flex;
  cursor: pointer;
}
.notification-dropdown__item--read {
  background: #fff;
}
.notification-dropdown__item--unread {
  background-color: #F1F2F8;
}
.notification-dropdown__item:hover {
  background: #dfdfdf;
}
.notification-dropdown__label-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  margin-right: 0.8rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.2rem;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-dropdown__text {
  color: var(--color-paragraph);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  padding-bottom: 0.6rem;
  width: 30rem;
  overflow: hidden;
}
.notification-dropdown__label {
  color: var(--color-line);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
}

.import-dropdown {
  position: relative;
}
@media only screen and (max-width: 90em) {
  .import-dropdown {
    margin-right: unset !important;
  }
}
.import-dropdown__menu {
  position: absolute;
  right: 0;
  top: 5rem;
  display: none;
  padding: 4px;
  flex-direction: column;
  align-items: flex-start;
  background-color: var(--color-white);
  list-style: none;
  border-radius: 0.4rem;
  z-index: 111;
}
.import-dropdown__item {
  padding: 1rem 1.6rem;
  color: var(--text-color);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 18rem;
  transition: background-color 0.3s ease-in-out;
}
.import-dropdown__item:hover {
  background-color: var(--color-light-hover);
}
.import-dropdown__icon {
  width: 1.6rem;
  height: 2rem;
  fill: var(--color-accent);
}

.filter-dropdown {
  position: relative;
}
.filter-dropdown__filter {
  stroke: var(--color-black);
  width: 1.4rem;
  height: 1.4rem;
}
.filter-dropdown.filtering span {
  margin-right: 0;
}
@media only screen and (max-width: 48em) {
  .filter-dropdown.filtering span {
    display: none;
  }
}
.filter-dropdown.filtering svg {
  margin-left: 0;
  margin-right: 0.6rem;
}
@media only screen and (max-width: 48em) {
  .filter-dropdown.filtering svg {
    margin-right: 0;
    width: 1.6rem;
    height: 1.6rem;
  }
}
.filter-dropdown__button {
  border-radius: 0.8rem;
  background-color: transparent;
  border: 1px solid var(--color-border-search);
  padding: 1rem 1.2rem;
  color: var(--color-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-right: 0.8rem;
  position: relative;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .filter-dropdown__button {
    border-radius: 0.3rem;
    padding: 0.5rem;
    font-size: 1.3rem;
  }
}
.filter-dropdown__button--name {
  margin-right: 0.6rem;
  white-space: nowrap;
}
.filter-dropdown__button--icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--color-text);
}
.filter-dropdown__content {
  display: none;
  min-width: 22rem;
  position: absolute;
  top: 115%;
  right: 0;
  z-index: 1000;
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
  height: 24rem;
  overflow-y: auto;
}
.filter-dropdown__content.last-content {
  left: unset;
  right: 0;
}
.filter-dropdown__content::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: var(--color-scrollbar);
  border-radius: 1.5rem;
}
.filter-dropdown__content::-webkit-scrollbar-thumb {
  background: var(--color-scrollthumb);
  border-radius: 1.5rem;
}
.filter-dropdown__content__leads {
  max-height: unset;
}
.filter-dropdown__content.show {
  display: block;
}
.filter-dropdown__list {
  list-style: none;
}
.filter-dropdown__item {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.filter-dropdown__item:hover {
  background-color: var(--color-light-hover);
}
.filter-dropdown__item--name {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  margin-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 17rem;
  display: inline-block;
  color: var(--color-text);
}
.filter-dropdown__item--label {
  display: flex;
  align-items: center;
}
.filter-dropdown__item-count {
  position: absolute;
  top: -8px;
  right: 0px;
  background: var(--color-accent);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: var(--color-white);
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .filter-dropdown__item-count {
    top: -14px;
  }
}
.filter-dropdown__days {
  flex-direction: column;
}
.filter-dropdown__days .filter-dropdown-day {
  display: block;
  font-size: 1.4rem;
}
.filter-dropdown__days .filter-dropdown-day__details {
  font-size: 1rem;
  display: block;
}
.filter-dropdown__days .filter-dropdown-day__datePicker {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
}
.filter-dropdown__count {
  font-size: 1rem;
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-accent);
  margin-left: 0.5rem;
  color: var(--color-black);
}
.filter-dropdown__no-data {
  display: none;
  text-align: center;
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.filter-dropdown__no-data--img {
  max-width: 5rem;
  margin-bottom: 0.6rem;
}
.filter-dropdown__no-data--text {
  font-weight: 500;
  color: var(--color-black);
  font-size: 1.4rem;
}
.filter-dropdown__no-data-db {
  text-align: center;
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.filter-dropdown__no-data-db--img {
  max-width: 5rem;
  margin-bottom: 0.6rem;
}
.filter-dropdown__no-data-db--text {
  font-weight: 500;
  color: var(--color-black);
  font-size: 1.4rem;
}
.filter-dropdown__no-data-permission {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  text-align: center;
  position: relative;
}
.filter-dropdown__no-data-permission--img {
  max-width: 5rem;
  margin-bottom: 0.6rem;
}
.filter-dropdown__no-data-permission--text {
  font-weight: 500;
  color: var(--color-black);
  font-size: 1.4rem;
}

.advanced-filter-dropdown {
  position: relative;
  display: inline-block;
}
.advanced-filter-dropdown__icon {
  stroke: var(--color-text);
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.6rem;
}
.advanced-filter-dropdown__main {
  position: relative;
}
.advanced-filter-dropdown__main-button {
  border-radius: 0.8rem;
  background-color: transparent;
  border: 1px solid var(--color-border-search);
  padding: 1rem 1.2rem;
  color: var(--color-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin-right: 0.8rem;
  position: relative;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .advanced-filter-dropdown__main-button {
    border-radius: 0.3rem;
    padding: 0.6rem 1.2rem;
  }
}
.advanced-filter-dropdown__main-area {
  display: none;
  position: absolute;
  top: 110%;
  z-index: 1000;
  left: unset;
  right: 0;
  overflow-y: visible;
  padding: 3px;
  border-radius: 1.8rem;
  background: var(--color-white);
}
.advanced-filter-dropdown__main-area.show {
  display: block;
}
.advanced-filter-dropdown__button {
  background-color: transparent;
  border-style: none;
  width: 27rem;
  border-bottom: 1px solid var(--color-border-search);
  border-radius: 0;
  color: var(--bla);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  position: relative;
  cursor: pointer;
  padding: 0.8rem 1rem;
}
@media only screen and (max-width: 37.5em) {
  .advanced-filter-dropdown__button {
    border-radius: 3rem;
    padding: 0.8rem;
  }
}
.advanced-filter-dropdown__button--head {
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  color: var(--color-text);
}
.advanced-filter-dropdown__content {
  display: none;
  min-width: 22rem;
  position: absolute;
  top: 115%;
  left: 0;
  z-index: 1000;
  border-radius: 1rem;
  border: 1px solid var(--filter-dropdown-border);
  background: var(--filter-dropdown-border);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
  max-height: 24rem;
  overflow-y: auto;
}
.advanced-filter-dropdown__content.last-content {
  left: unset;
  right: 0;
}
.advanced-filter-dropdown__content::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: var(--color-border-search);
  border-radius: 1.5rem;
}
.advanced-filter-dropdown__content::-webkit-scrollbar-thumb {
  background: var(--color-grey);
  border-radius: 1.5rem;
}
.advanced-filter-dropdown__content.show {
  display: block;
}
.advanced-filter-dropdown__item {
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
}
.advanced-filter-dropdown__item:hover {
  background-color: var(--filter-hover);
}
.advanced-filter-dropdown__item--name {
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  margin-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 17rem;
}
.advanced-filter-dropdown__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--filter-dropdown-border);
  border-radius: 1.6rem 1.6rem 0 0;
}
.advanced-filter-dropdown__header--title {
  display: flex;
  align-items: center;
  color: var(--color-text);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}
.advanced-filter-dropdown__actions-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.advanced-filter-dropdown__btn-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 3rem 1.5rem;
  flex-wrap: wrap;
  border-right: 1px solid var(--filter-dropdown-border);
  border-left: 1px solid var(--filter-dropdown-border);
}
.advanced-filter-dropdown__item-count {
  right: 2rem;
  top: -0.5rem;
}
.advanced-filter-dropdown__footer {
  padding: 1rem 2rem;
  display: flex;
  justify-content: flex-end;
  border-radius: 0px 0px 16px 16px;
  border-right: 1px solid var(--filter-dropdown-border);
  border-bottom: 1px solid var(--filter-dropdown-border);
  border-left: 1px solid var(--filter-dropdown-border);
  background: var(--filter-dropdown-border);
}
.advanced-filter-dropdown__apply-btn {
  padding: 0.7rem 1.4rem;
  background-color: var(--color-accent);
  color: var(--color-white);
  border-style: none;
  border-radius: 0.6rem;
  cursor: pointer;
}
.advanced-filter-dropdown__apply-btn:hover {
  background-color: var(--dark-accent);
}

.main-table {
  min-width: 100%;
  border-spacing: 0;
  overflow-x: hidden;
}
.main-table__firstrow {
  background: var(--table-head);
}
.main-table__firstrow th:last-of-type .main-table__sortBtn {
  padding-right: 1rem;
}
.main-table__head {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem 0 1.2rem 1.6rem;
}
@media only screen and (max-width: 90em) {
  .main-table__head {
    padding: 0.8rem 0 0.8rem 1rem;
  }
}
.main-table__head span {
  color: #03140F;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  white-space: nowrap;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .main-table__head span {
    font-size: 1.4rem;
  }
}
.main-table__head:last-child {
  padding-right: 2.5rem;
}
.main-table__sortBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 4rem;
}
.main-table__sortBtn svg {
  width: 0.6rem;
  height: 0.7rem;
  fill: var(--color-button-text);
}
.main-table__sortBtn svg:active {
  fill: var(--filter-hover);
}
.main-table__detailsRow td {
  border-bottom: 1px solid var(--table-head);
  padding: 1.2rem 0 1.2rem 1.2rem;
  color: #03140F;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
  background: transparent;
  padding-left: 1.6rem;
}
@media only screen and (max-width: 90em) {
  .main-table__detailsRow td {
    padding: 0.8rem 0 0.8rem 0.8rem;
    font-size: 1.4rem;
    padding-left: 1rem;
  }
}
.main-table__detailsRow:hover .main-table__hoverBox {
  opacity: 1;
  margin-top: 0;
}
.main-table__detailsRow:hover {
  background-color: var(--color-light-hover);
}
.main-table__hoverBox {
  position: absolute;
  /*  min-width: calc(100vw - 5rem);
  left: 0;*/
  left: calc(100vw - 4rem);
  background-color: var(--color-light-hover);
  opacity: 0;
  margin-top: 10px;
  transition: ease-in-out 0.3s all;
  border-style: none !important;
  padding-right: 0 !important;
}
@media only screen and (max-width: 90em) {
  .main-table__hoverBox {
    left: calc(100vw - 3rem);
  }
}
.main-table__hoverRelativeDiv {
  position: relative;
}
.main-table__hover-btns {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: absolute;
  right: 2rem;
  background-color: var(--color-light-hover);
  padding: 1.1rem;
  padding-right: 2.5rem;
  top: -0.7rem;
}
@media only screen and (max-width: 90em) {
  .main-table__hover-btns {
    right: 1rem;
    padding: 0.5rem;
    padding-right: 1rem;
    top: 0px;
  }
}
.main-table__hover-btn {
  padding: 0.6rem 1rem;
  background-color: var(--color-light-hover);
  border-style: none;
  display: flex;
  align-items: center;
  border-radius: 1.6rem;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}
@media only screen and (max-width: 90em) {
  .main-table__hover-btn {
    padding: 0.4rem 1rem;
  }
}
.main-table__hover-btn.edit {
  background-color: var(--color-accent);
}
.main-table__hover-btn.edit svg {
  width: 1.2rem;
  height: 1.3rem;
  stroke: var(--color-white);
}
.main-table__hover-btn.delete {
  background-color: var(--color-error-light);
}
.main-table__hover-btn.delete svg {
  width: 1.3rem;
  height: 1.3rem;
  stroke: var(--color-white);
}
.main-table__hover-btn svg {
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--table-head);
  margin-right: 0.6rem;
}
.main-table__hover-btn span {
  color: var(--table-head);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}
@media only screen and (max-width: 90em) {
  .main-table__hover-btn span {
    font-size: 1.2rem;
  }
}
.main-table__hover-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
.main-table__hover-btn.transfer {
  background-color: #d77c2a;
}
.main-table__hover-btn.transfer svg {
  width: 1.2rem;
  height: 1.3rem;
  stroke: var(--color-white);
}
.main-table__hoverDropdown {
  border-style: none;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  z-index: 11;
}
.main-table__hoverDropdown svg {
  width: 0.4rem;
  height: 1.6rem;
  stroke: var(--table-head);
}
.main-table__dropdownitems {
  position: absolute;
  background-color: var(--color-sidebar-background);
  z-index: 111;
  padding: 2px;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
  display: none;
}
.main-table__dropdownitems ul {
  list-style: none;
  border-radius: 0.5rem;
}
.main-table__dropdownitems li {
  padding: 0.6rem 2rem;
  width: 14rem;
  background-color: var(--color-sidebar-background);
  text-align: left;
  font-size: 1.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.main-table__dropdownitems li span {
  white-space: nowrap;
  color: var(--color-text-hover);
}
.main-table__dropdownitems li:hover {
  background-color: var(--table-head);
}
.main-table__dropdownitems li svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--color-text-hover);
  margin-right: 1rem;
}
.main-table__dropdownitems.show {
  display: block;
}
.main-table__dropdownitems.top {
  bottom: 100%;
  top: auto;
  left: 0;
}
.main-table__dropdownitems.persuite-dropdown-menu {
  right: 0 !important;
  left: auto !important;
}
.main-table__checkbox {
  position: relative;
  z-index: 200;
}
.main-table__priority-column {
  display: flex;
  align-items: center;
}
.main-table__priority-name {
  color: var(--table-head);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  display: inline-block;
  margin-left: 0.8rem;
}
.main-table__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7rem;
  padding: 0 2rem;
}
@media only screen and (max-width: 90em) {
  .main-table__footer {
    height: 5rem;
  }
}
.main-table__footer.my-account {
  padding: 0;
}
.main-table__footer.users-foot {
  background: #E5E8F2;
}
@media only screen and (max-width: 48em) {
  .main-table__footer {
    justify-content: space-between;
  }
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.pagination__button {
  padding: 0.9rem 2rem;
  border: 1px solid var(--color-lite-border);
  background: var(--color-white);
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-button-text);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
@media only screen and (max-width: 90em) {
  .pagination__button {
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 1.2rem;
  }
}
.pagination__button:hover {
  background: #f8fafc;
}
.pagination__button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination__button--icon {
  width: 0.6rem;
  height: 1.2rem;
  stroke: var(--color-button-text);
}
.pagination__page-number {
  width: 3.8rem;
  height: 3.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-button-text);
  border: 1px solid var(--color-lite-border);
  background: var(--color-white);
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .pagination__page-number {
    width: 3rem;
    height: 2.8rem;
    font-size: 1.2rem;
  }
}
.pagination__page-number.active {
  background: var(--color-accent);
  color: white;
  border: none;
}
.pagination__pages {
  display: flex;
  gap: 0.8rem;
}

.pagination-info {
  display: flex;
  align-items: center;
  color: var(--color-text);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.pagination-info::placeholder {
  color: var(--color-text);
}
@media only screen and (max-width: 90em) {
  .pagination-info {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .pagination-info {
    display: none;
  }
}
.pagination-info__select-box {
  position: relative;
  display: inline-block;
  margin: 0 5px;
}
.pagination-info__select-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  color: var(--button-text);
  width: 1.3rem;
  height: 1.3rem;
  background-image: url("../../images/arow-down-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
@media only screen and (max-width: 90em) {
  .pagination-info__select-box::after {
    width: 1.1rem;
    height: 1.1rem;
  }
}

.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 20;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.overlay.show {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

.subscription {
  display: flex;
  gap: 1rem;
  margin-bottom: 5.5rem;
}
@media only screen and (max-width: 90em) {
  .subscription {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 64em) {
  .subscription {
    display: block;
  }
}
.subscription__card {
  border: 1px solid var(--color-border-search);
  border-radius: 0.8rem;
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem 2rem;
}
@media only screen and (max-width: 90em) {
  .subscription__card {
    padding: 1rem;
  }
}
@media only screen and (max-width: 64em) {
  .subscription__card {
    margin-bottom: 1rem;
  }
}
.subscription__card--plan .subscription__header, .subscription__card--next-payment .subscription__header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.subscription__card--plan .subscription__header.next-payment, .subscription__card--next-payment .subscription__header.next-payment {
  justify-content: space-between;
}
.subscription__type {
  background-color: var(--color-text-hover);
  color: var(--color-button);
  padding: 0.5rem 1.5rem;
  border-radius: 0.3rem;
  font-weight: bold;
  font-size: 1.4rem;
}
@media only screen and (max-width: 90em) {
  .subscription__type {
    font-size: 1.2rem;
  }
}
.subscription__plan-text {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .subscription__plan-text {
    font-size: 1.2rem;
  }
}
.subscription__details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
}
.subscription__payment-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  padding: 0.5rem;
}
@media only screen and (max-width: 90em) {
  .subscription__payment-info {
    margin: 0;
  }
}
.subscription__card-icon {
  width: 2.6rem;
  height: 2.6rem;
  stroke: var(--color-black);
  border-radius: 0.4rem;
  border: 1px solid var(--color-border-search);
  padding: 0.2rem;
}
@media only screen and (max-width: 90em) {
  .subscription__card-icon {
    width: 2rem;
    height: 2rem;
  }
}
.subscription__price {
  text-align: right;
  color: var(--Woodsmoke-600, #595A70);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media only screen and (max-width: 90em) {
  .subscription__price {
    font-size: 1.3rem;
  }
}
.subscription__amount {
  font-size: 4rem;
  font-weight: bold;
  color: var(--color-amount);
  margin-right: 0.5rem;
}
@media only screen and (max-width: 90em) {
  .subscription__amount {
    font-size: 2.5rem;
  }
}
.subscription__doller {
  font-size: 2rem;
}
.subscription__expiry {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
@media only screen and (max-width: 90em) {
  .subscription__expiry {
    font-size: 1.2rem;
  }
}
.subscription__expiry-main {
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 90em) {
  .subscription__expiry-main {
    display: block;
  }
}
@media only screen and (max-width: 64em) {
  .subscription__expiry-main {
    display: flex;
  }
}
.subscription__progress-bar {
  background-color: var(--background-progress);
  border-radius: 0.8rem;
  overflow: hidden;
  height: 0.8rem;
  margin-bottom: 1rem;
  position: relative;
  width: 100%;
}
@media only screen and (max-width: 90em) {
  .subscription__progress-bar {
    height: 0.6rem;
  }
}
.subscription__progress {
  background-color: var(--color-accent);
  height: 100%;
  transition: width 0.6s ease;
  width: 0;
  /*        @include respond (laptop-large) {
      width: auto;
  }

  @include respond (tablet-portrait) {
      width: 60%;
  }*/
}
.subscription__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
@media only screen and (max-width: 64em) {
  .subscription__actions.payment-manage {
    margin-top: 5rem;
  }
}
.subscription__button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}
.subscription__button--cancel {
  background-color: var(--color-white);
  border-radius: 0.3rem;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  height: 3.6rem;
}
@media only screen and (max-width: 90em) {
  .subscription__button--cancel {
    border-radius: 0.3rem;
    font-size: 1.2rem;
    height: 3.3rem;
    font-weight: 500;
  }
}
.subscription__button--cancel:hover {
  transition: 0.3s;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}
.subscription__button--upgrade, .subscription__button--modules {
  background-color: var(--color-accent);
  color: var(--color-button);
  font-size: 1.4rem;
  height: 3.6rem;
}
.subscription__button--upgrade:hover, .subscription__button--modules:hover {
  background-color: var(--color-text-hover);
  transition: 0.5s;
}
@media only screen and (max-width: 90em) {
  .subscription__button--upgrade, .subscription__button--modules {
    border-radius: 0.3rem;
    font-size: 1.2rem;
    height: 3.3rem;
    font-weight: 500;
  }
}
.subscription__next-payment-title {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
}
@media only screen and (max-width: 90em) {
  .subscription__next-payment-title {
    font-size: 1.4rem;
  }
}
.subscription__status {
  background-color: transparent;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  font-weight: bold;
  font-size: 1.4rem;
  border: 1px solid var(--color-border-search);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media only screen and (max-width: 90em) {
  .subscription__status {
    font-size: 1.2rem;
  }
}
.subscription__status.active {
  color: var(--color-success-light);
}
.subscription__status.trial {
  color: #2835db;
}
.subscription__status.grace-period {
  color: orange;
}
.subscription__status.termination {
  color: #db0707;
}
.subscription__status.inactive {
  color: #db0707;
}
.subscription__status.suspended {
  color: #fd7e14;
}
.subscription__status-mark {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  border-radius: 50%;
}
.subscription__status-mark.active {
  background-color: var(--color-success-light);
}
.subscription__status-mark.trial {
  background-color: #2835db;
}
.subscription__status-mark.grace-period {
  background-color: orange;
}
.subscription__status-mark.termination {
  background-color: #db0707;
}
.subscription__status-mark.inactive {
  background-color: #db0707;
}
.subscription__status-mark.suspended {
  background-color: #fd7e14;
}
.subscription__payment-date {
  color: var(--color-paragraph);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
}
@media only screen and (max-width: 90em) {
  .subscription__payment-date {
    font-size: 1.2rem;
    font-weight: 500;
  }
}
.subscription__button-icon {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-white);
  margin-left: 0.5rem;
}
@media only screen and (max-width: 90em) {
  .subscription__button-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.subscription__card-number {
  color: var(--color-text);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
}
.subscription__required-text {
  color: var(--color-required);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 300;
  border-radius: 0.4rem;
  border: 1px solid var(--required-border);
  background: var(--required-background);
  padding: 0.5rem;
  width: 100%;
  margin: 10px 0;
}
@media only screen and (max-width: 90em) {
  .subscription__required-text {
    font-size: 1.2rem;
    padding: 0.3rem;
  }
}
.subscription__required-text.expired {
  border: 1px solid #f5c6cb;
  background: #f8d7da;
  color: #721c24;
}
.subscription__required-text.cancelled {
  border: 1px solid #b8daff;
  background: #cce5ff;
  color: #004085;
}
.subscription__required-text.inactive {
  border: 1px solid #ffeeba;
  background: #fff3cd;
  color: #856404;
}
.subscription__required-text.timely-payment {
  border: 1px solid #ffb366; /* deeper orange border */
  background: #ffe0b3; /* stronger orange background */
  color: #994d00; /* darker text for contrast */
}
.subscription__required-text.active {
  border: 1px solid #c3e6cb;
  background: #d4edda;
  color: #155724;
}
.subscription__active {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  gap: 0.5rem;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 90em) {
  .subscription__active {
    font-size: 1.4rem;
  }
}
.subscription__validity-text {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-top: 1.6rem;
}
@media only screen and (max-width: 90em) {
  .subscription__validity-text {
    font-size: 1.4rem;
  }
}
.subscription__selected-modules {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-top: 1.2rem;
}
@media only screen and (max-width: 90em) {
  .subscription__selected-modules {
    font-size: 1.4rem;
  }
}
.subscription__modules {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  overflow-x: auto;
}
.subscription__modules-btn {
  border-radius: 0.5rem;
  border: 1px solid var(--Border, #E5E7EB);
  background: var(--color-white);
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
  padding: 1.5rem 3.5rem;
  color: #393A3D;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  white-space: nowrap;
}
@media only screen and (max-width: 90em) {
  .subscription__modules-btn {
    padding: 0.7rem 2rem;
    font-size: 1.2rem;
  }
}
.subscription__cancel-subscription {
  border-radius: 0.6rem;
  background: var(--Color-Red, #BF3838);
  border: 0;
  color: var(--color-white);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
  width: 100%;
  padding: 1.2rem;
  margin-top: 1rem;
  cursor: pointer;
  transition: 0.3s;
}
@media only screen and (max-width: 90em) {
  .subscription__cancel-subscription {
    font-size: 1.2rem;
    padding: 1rem;
    margin-top: 0.5rem;
  }
}
.subscription__cancel-subscription:hover {
  background: var(--Color-Red, #c12a2a);
}
.subscription__link-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 1rem;
}
.subscription__link {
  color: var(--color-text);
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.subscription__span {
  width: 0.8rem;
  height: 0.8rem;
  display: block;
  border-radius: 50%;
  background-color: var(--color-accent);
}
.subscription__label-count {
  color: var(--color-accent);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
}
.subscription__label-count span {
  font-size: 1.1rem;
  margin-left: 0.5rem;
}
.subscription__warning-box {
  background-color: #fff8e6;
  padding: 1.2rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: flex-start;
  border-radius: 0.4rem;
}
.subscription__warning-icon {
  width: 2rem;
  height: 2rem;
  color: #ffc107;
  margin-right: 1rem;
  flex-shrink: 0;
}
@media only screen and (max-width: 90em) {
  .subscription__warning-icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}
.subscription__warning-content {
  font-size: 1.4rem;
  line-height: 1.5;
  color: #000000;
}
@media only screen and (max-width: 90em) {
  .subscription__warning-content {
    font-size: 1.3rem;
  }
}
.subscription__warning-content strong {
  color: #333;
  font-weight: 600;
}
.subscription__end-date {
  font-weight: 600;
  color: #d32f2f;
}
.subscription__button--Revoke {
  background-color: #1a7aeb;
  color: var(--color-button);
  font-size: 1.4rem;
  height: 3.6rem;
}
.subscription__button--Revoke:hover {
  background-color: #0157bd;
  transition: 0.5s;
}
@media only screen and (max-width: 90em) {
  .subscription__button--Revoke {
    border-radius: 0.3rem;
    font-size: 1.2rem;
    height: 3.3rem;
    font-weight: 500;
  }
}
.subscription__Revoke-subscription {
  border-radius: 0.6rem;
  background: #1a7aeb;
  border: 0;
  color: var(--color-white);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
  width: 100%;
  padding: 1.2rem;
  margin-top: 1rem;
  cursor: pointer;
  transition: 0.3s;
}
@media only screen and (max-width: 90em) {
  .subscription__Revoke-subscription {
    font-size: 1.2rem;
    padding: 1rem;
    margin-top: 0.5rem;
  }
}
.subscription__Revoke-subscription:hover {
  background: #0157bd;
}

.invoice {
  margin-top: 2.8rem;
}
@media only screen and (max-width: 90em) {
  .invoice {
    margin-top: 1.8rem;
  }
}
.invoice__card {
  border: 1px solid var(--color-border-search);
  border-radius: 0.8rem;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 4fr 3fr 3fr 3fr 1fr;
  align-items: center;
  width: 100%;
  margin-bottom: 1.7rem;
  transition: 0.3s ease-in-out all;
  cursor: pointer;
}
.invoice__card:hover {
  border: 1px solid var(--color-accent);
}
.invoice__name {
  display: flex;
  align-items: center;
}
.invoice__icon {
  height: 2.5rem;
  width: 2.5rem;
  margin-right: 0.5rem;
  stroke: var(--color-accent);
}
@media only screen and (max-width: 90em) {
  .invoice__icon {
    height: 2rem;
    width: 2rem;
  }
}
.invoice__text {
  color: var(--color-line);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .invoice__text {
    font-size: 1.4rem;
  }
}
.invoice__date {
  color: var(--color-line);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  margin-left: 2.5rem;
}
@media only screen and (max-width: 90em) {
  .invoice__date {
    font-size: 1.4rem;
  }
}
.invoice__date-active {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media only screen and (max-width: 90em) {
  .invoice__date-active {
    font-size: 1.3rem;
  }
}
.invoice__kebab-main {
  position: relative;
}
.invoice__kebab-btn {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  stroke: var(--color-line);
}
.invoice__btn-hover {
  position: absolute;
  display: flex;
  right: 2.5rem;
  top: -0.5rem;
  background-color: var(--color-white);
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}
.invoice__btn-hover.visible {
  opacity: 1;
  visibility: visible;
}
.invoice__btn-view {
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0.3rem;
  color: var(--color-white);
  padding: 0.7rem 1.3rem;
  display: flex;
  align-items: center;
  margin-right: 0.6rem;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .invoice__btn-view {
    padding: 0.5rem 0.8rem;
  }
}
.invoice__btn-view.delete {
  background: #dce0ff;
  border: 1px solid #9ca3db;
  color: var(--color-accent);
}
.invoice__view-icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--color-white);
  margin-right: 0.5rem;
}
.invoice .invoice__kebab-btn:hover + .invoice__btn-hover {
  opacity: 1;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.modal.show {
  display: flex;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}
.modal__head.employee-modal {
  margin-bottom: 0;
}
.modal__head--text {
  color: var(--color-text-hover);
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  text-transform: capitalize;
}
@media only screen and (max-width: 90em) {
  .modal__head--text {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}
.modal__close {
  width: 1.3rem;
  height: 1.3rem;
  stroke: var(--color-secondary);
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .modal__close {
    width: 1.1rem;
    height: 1.1rem;
  }
}
.modal__input {
  display: block;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  padding: 1rem;
  width: 100%;
  outline: none;
  margin-bottom: 1.4rem;
  position: relative;
  background: transparent;
}
.modal__input::placeholder {
  color: var(--color-line);
}
@media only screen and (max-width: 90em) {
  .modal__input {
    font-size: 1.3rem;
    padding: 0.5rem;
  }
}
.modal__input:focus {
  border: 1px solid var(--color-accent);
}
.modal__textarea {
  display: block;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  padding: 1rem;
  width: 100%;
  outline: none;
  margin-bottom: 1.4rem;
  font-family: "DM Sans", sans-serif;
  background: transparent;
  resize: none;
}
.modal__textarea::placeholder {
  color: var(--color-line);
}
@media only screen and (max-width: 90em) {
  .modal__textarea {
    font-size: 1.3rem;
  }
}
.modal__textarea:focus {
  border: 1px solid var(--color-accent);
}
.modal__label {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  text-transform: capitalize;
}
@media only screen and (max-width: 90em) {
  .modal__label {
    font-size: 1.3rem;
  }
}
.modal__custom-btn {
  width: 14rem;
  height: 4.6rem;
  justify-content: center;
}
@media only screen and (max-width: 90em) {
  .modal__custom-btn {
    width: 10rem;
    height: 3.3rem;
    border-radius: 3px;
  }
}
.modal__custom-btn.save-modal {
  width: 9rem;
}
.modal__parent {
  display: flex;
  gap: 0.5rem;
  width: 100%;
}
.modal__subdiv {
  width: 25%;
  position: relative;
}
.modal__paragraph {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 2rem;
}
.modal__paragraph span {
  line-break: anywhere;
}
.modal__save-main {
  border-radius: 6px;
  border: 1px solid var(--Border, #E5E7EB);
  stroke: var(--color-black);
  width: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.5rem;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  margin-right: 1rem;
  padding: 0.2rem;
}
.modal__save-main img {
  width: 2rem;
  height: 2rem;
}
.modal__save-main svg {
  width: 2rem;
  height: 2rem;
}
.modal.transfer-lead-modal .modal__content {
  border-radius: 0.6rem;
  border: 0.6px solid rgba(0, 0, 0, 0.15);
  background: var(--color-white);
  width: 47rem;
  padding: 1.5rem;
}

.select-box {
  position: relative;
  width: 100%;
}
.select-box__button {
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  background-color: transparent;
  padding: 1rem;
  width: 100%;
  margin-bottom: 1.4rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-box__button--text {
  color: var(--color-line);
}
@media only screen and (max-width: 90em) {
  .select-box__button {
    padding: 0.5rem;
    font-size: 1.3rem;
  }
}
.select-box__button--icon {
  stroke: var(--color-arrow);
  width: 1.4rem;
  height: 0.7rem;
}
@media only screen and (max-width: 90em) {
  .select-box__button--icon {
    width: 1rem;
  }
}
.select-box__button:hover {
  border-color: #D1D5DB;
}
.select-box__button__arrow-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.select-box__button__arrow-icon.open {
  transform: rotate(180deg);
}
.select-box__button span {
  text-align: left;
}
.select-box__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--color-white);
  border: 1px solid var(--color-border-search);
  border-radius: 6px;
  display: none;
  z-index: 10;
  padding: 0.4rem;
  height: 16rem;
  overflow-y: auto;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  overflow-x: hidden;
}
.select-box__dropdown::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: var(--color-scrollbar);
  border-radius: 1.5rem;
}
.select-box__dropdown::-webkit-scrollbar-thumb {
  background: var(--color-scrollthumb);
  border-radius: 1.5rem;
}
.select-box__dropdown.open {
  display: block;
}
.select-box__dropdown--option {
  padding: 1rem;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  border-radius: 0.4rem;
}
.select-box__dropdown--option:hover {
  background: var(--color-light-hover);
}
@media only screen and (max-width: 90em) {
  .select-box__dropdown--option {
    font-size: 1.3rem;
  }
}
.select-box__dropdown--no-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  font-weight: 400;
}

.toastify {
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: inline-block;
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  cursor: pointer;
  text-decoration: none;
  max-width: calc(50% - 20px);
  z-index: 2147483647;
  width: 42rem;
}
.toastify.on {
  opacity: 1;
}
.toastify__close {
  background: 0 0;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  font-family: inherit;
  font-size: 1em;
  opacity: 0.4;
  padding: 0 0.5rem;
}
.toastify__right {
  right: 1.5rem;
}
@media only screen and (max-width: 23.4em) {
  .toastify__right {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}
.toastify__left {
  left: 1.5rem;
}
@media only screen and (max-width: 23.4em) {
  .toastify__left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}
.toastify__top {
  top: -15rem;
}
.toastify__bottom {
  bottom: -15rem;
}

.toaster__content {
  display: flex;
  align-items: flex-start;
  padding: 2rem;
}
.toaster__message {
  flex-grow: 1;
}
.toaster__title {
  color: var(--color-black);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 4px;
}
.toaster__text {
  color: var(--color-black);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
.toaster__close {
  stroke: var(--color-black);
  width: 1.2rem;
  height: 1.2rem;
}
.toaster__success {
  background-color: var(--color-toaster-succes-bg);
  color: var(--color-black);
  border: 1px solid var(--color-toaster-succes);
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__success--icon {
  fill: var(--color-toaster-succes);
  margin-right: 1.2rem;
  width: 2rem;
  height: 2rem;
}
.toaster__warning {
  background-color: var(--color-toaster-warning-bg);
  color: var(--color-black);
  border: 1px solid var(--color-toaster-warning);
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__warning--icon {
  fill: var(--color-toaster-warning);
  margin-right: 1.2rem;
  width: 2rem;
  height: 1.8rem;
}
.toaster__error {
  background-color: var(--color-toaster-error-bg);
  color: var(--color-black);
  border: 1px solid var(--color-toaster-error);
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__error--icon {
  fill: var(--color-toaster-error);
  margin-right: 1.2rem;
  width: 2.2rem;
  height: 2.2rem;
}
.toaster__informational {
  background-color: var(--color-toaster--info-bg);
  color: var(--color-black);
  border: 1px solid var(--color-toaster--info);
  border-radius: 1rem;
  box-shadow: none;
  width: 100%;
}
.toaster__informational--icon {
  fill: var(--color-toaster--info);
  margin-right: 1.2rem;
  width: 2.4rem;
  height: 2.4rem;
}

.authentication-box {
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  padding: 2rem 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 60%;
}
@media only screen and (max-width: 90em) {
  .authentication-box {
    gap: 1rem;
  }
}
.authentication-box__icon {
  width: 7.5rem;
  height: 7.5rem;
  fill: var(--color-text-hover);
}
@media only screen and (max-width: 90em) {
  .authentication-box__icon {
    width: 6.5rem;
    height: 6.5rem;
  }
}
.authentication-box__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.authentication-box__input {
  width: 60rem;
  border-style: none;
  border-bottom: 1px solid var(--color-input);
  color: var(--placeholder-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  outline: none;
  margin-bottom: 4rem;
}
.authentication-box__form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.authentication-box__form--psw {
  position: relative;
}
.authentication-box__form--icon {
  width: 1.9rem;
  height: 1.9rem;
  stroke: var(--psw-eye);
}
.authentication-box__form--eye-btn {
  position: absolute;
  right: 0;
  border-style: none;
  background-color: transparent;
}
.authentication-box__form--eye-btn.login-eye {
  top: 10px;
}
.authentication-box__button {
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 1.3rem;
  border-style: none;
  width: 60rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 90em) {
  .authentication-box__button {
    padding: 0.8rem;
    margin-bottom: 1rem;
  }
}
.authentication-box__radio {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.authentication-box__radios {
  width: 60rem;
  display: flex;
  flex-direction: column;
  gap: 3rem 0;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 90em) {
  .authentication-box__radios {
    gap: 2rem 0;
  }
}
.authentication-box__radios--input {
  appearance: none;
  display: none;
}
.authentication-box__radios--input:checked + .authentication-box__radios--btn::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: #336666;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.authentication-box__radios--btn {
  width: 2rem;
  height: 2rem;
  border: 2px solid #B0B0C0;
  border-radius: 50%;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
}
@media only screen and (max-width: 90em) {
  .authentication-box__radios--btn {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.authentication-box__alert {
  width: 60rem;
  background-color: var(--color-message);
  color: var(--color-amount);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: 0.6rem;
  padding: 2rem;
}
.authentication-box__resend-btn {
  color: var(--color-accent);
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
}

.modules-subscription {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.modules-subscription__card {
  width: 25%;
  margin-left: 0;
}
@media only screen and (max-width: 90em) {
  .modules-subscription__card {
    width: 33.33%;
  }
}
@media only screen and (max-width: 64em) {
  .modules-subscription__card {
    width: 50%;
  }
}
.modules-subscription__card-inner {
  padding: 1.6rem;
  border-radius: 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--color-border-search);
  background: var(--color-white);
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
  margin: 0 3.2rem 3.2rem 0;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .modules-subscription__card-inner {
    padding: 1.4rem;
    margin: 0 1.5rem 1.5rem 0;
  }
}
.modules-subscription__card-inner--active {
  background-color: var(--color-accent);
}
.modules-subscription__card-inner--active .modules-subscription__module-icon-parent {
  border: 1px solid var(--color-border-search);
}
.modules-subscription__card-inner--active .modules-subscription__paragraph,
.modules-subscription__card-inner--active .heading-5,
.modules-subscription__card-inner--active .modules-subscription__price,
.modules-subscription__card-inner--active .modules-subscription__price-month {
  color: var(--color-white);
}
.modules-subscription__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
}
.modules-subscription__module-icon-parent {
  width: 4.8rem;
  height: 4.8rem;
  stroke: var(--color-white);
  background-color: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 90em) {
  .modules-subscription__module-icon-parent {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.modules-subscription__module-icon {
  width: 2.4rem;
  height: 2.4rem;
  stroke: var(--color-white);
}
@media only screen and (max-width: 90em) {
  .modules-subscription__module-icon {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.modules-subscription__module-tick-icon {
  width: 2.4rem;
  height: 2.4rem;
}
.modules-subscription__paragraph {
  color: var(--color-paragraph);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  margin: 0.6rem 0;
}
@media only screen and (max-width: 90em) {
  .modules-subscription__paragraph {
    font-size: 1.2rem;
  }
}
.modules-subscription__price {
  color: var(--color-text);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
}
@media only screen and (max-width: 90em) {
  .modules-subscription__price {
    font-size: 1.6rem;
  }
}
.modules-subscription__price-month {
  color: var(--color-line);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}

.subscription-plan {
  border-bottom: 1px solid var(--color-border-search);
}
.subscription-plan__current {
  padding: 2rem;
  padding-top: 0;
}
@media only screen and (max-width: 90em) {
  .subscription-plan__current {
    padding: 1rem;
  }
}
.subscription-plan__current-plan {
  color: var(--color-accent);
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  margin-right: 1rem;
}
@media only screen and (max-width: 90em) {
  .subscription-plan__current-plan {
    font-size: 1.4rem;
  }
}
.subscription-plan__label {
  background-color: var(--color-label);
  color: var(--color-button);
  font-size: 1.6rem;
  font-style: normal;
  border-radius: 0.3rem;
  padding: 0.6rem 2rem;
  font-weight: 700;
  width: 12rem;
  text-align: center;
}
@media only screen and (max-width: 90em) {
  .subscription-plan__label {
    font-size: 1.4rem;
    padding: 0.4rem 1rem;
    font-weight: 600;
    width: 9rem;
  }
}

.subscription-payment {
  border: 1px solid var(--color-border-search);
  display: flex;
  width: 100%;
  border-radius: 0.6rem;
}
@media only screen and (max-width: 85.37em) {
  .subscription-payment {
    display: block;
  }
}
.subscription-payment__billing {
  margin-top: 4rem;
}
.subscription-payment__form {
  width: 55%;
  padding: 3rem;
}
@media only screen and (max-width: 85.37em) {
  .subscription-payment__form {
    width: 100%;
  }
}
.subscription-payment__form-heading {
  color: var(--color-text);
  font-size: 1.4rem;
  font-weight: 400;
  margin-top: 0.6rem;
}
.subscription-payment__title {
  color: var(--color-module);
  font-size: 1.8rem;
  font-weight: 600;
  margin: 2rem 0;
}
.subscription-payment__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.subscription-payment__field {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.subscription-payment__field--expiry, .subscription-payment__field--cvv {
  flex: 1 1 45%;
}
.subscription-payment__label {
  color: var(--color-line);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.subscription-payment__input {
  border: 1px solid var(--color-border-search);
  padding: 0.75rem;
  border: none;
  border-bottom: 1px solid var(--color-border-search);
  color: var(--color-line);
  font-size: 1.5rem;
  width: 100%;
  outline: none;
  background: transparent;
}
.subscription-payment__input-radio {
  display: flex;
  align-items: center;
  padding: 1rem;
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: 500;
  width: 100%;
  outline: 0;
  background: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  gap: 0.75rem;
}
.subscription-payment__input-radio input[type=radio] {
  display: none;
}
.subscription-payment__input-radio label {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.subscription-payment__input-radio .custom-radio {
  width: 1.6rem;
  height: 1.6rem;
  border: 0.2rem solid var(--color-border-search);
  border-radius: 50%;
  background-color: transparent;
  position: relative;
  transition: background-color 0.3s, border-color 0.3s;
  margin-right: 0.5rem;
  margin-bottom: 0.2rem;
}
.subscription-payment__input-radio input[type=radio]:checked + label .custom-radio {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.subscription-payment__input-radio input[type=radio]:checked + label .custom-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-white);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.subscription-payment__options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.subscription-payment__option {
  display: flex;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--color-border-search);
  border-radius: 0.8rem;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.subscription-payment__option:hover {
  border-color: var(--color-text);
}
.subscription-payment__radio {
  margin-right: 1rem;
}
.subscription-payment__input-radio {
  border: 1px solid var(--color-border-search);
  padding: 1.4rem;
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  width: 100%;
  outline: 0;
  background: transparent;
  border-radius: 0.5rem;
  position: relative;
}
.subscription-payment__option-text {
  font-size: 1.4rem;
  color: var(--color-text);
}
.subscription-payment__card-details {
  margin-bottom: 1.5rem;
}
.subscription-payment__submit {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  color: var(--color-white);
  background-color: var(--color-primary);
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}
.subscription-payment__submit:hover {
  background-color: var(--color-primary-dark);
}
.subscription-payment__card-main {
  display: flex;
  gap: 1rem;
}
.subscription-payment__icon {
  position: absolute;
  right: 1rem;
}

.pricing-card {
  padding: 2.5rem 2rem 2.5rem;
  border-top-left-radius: 0.6rem;
  border-top-right-radius: 0.6rem;
}
.pricing-card.sign-subscription {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 24rem;
  padding: 0 2rem;
}
@media only screen and (max-width: 90em) {
  .pricing-card.sign-subscription {
    height: 20rem;
  }
}
@media only screen and (max-width: 90em) {
  .pricing-card {
    padding: 2rem;
  }
}
.pricing-card .pricing-card__title {
  color: var(--color-amount);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  width: max-content;
  text-align: center;
  padding: 0.7rem 2.5rem;
  border-radius: 8.6rem;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 90em) {
  .pricing-card .pricing-card__title {
    font-size: 1.3rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
  }
}
.pricing-card .pricing-card__price {
  color: var(--color-module);
}
.pricing-card .pricing-card__description {
  color: var(--color-text);
}
.pricing-card__title {
  color: var(--color-white);
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 500;
}
.pricing-card__price {
  color: var(--color-white);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .pricing-card__price {
    font-size: 2.2rem;
  }
}
.pricing-card__price-value {
  font-size: 3.6rem;
}
@media only screen and (max-width: 100em) {
  .pricing-card__price-value {
    font-size: 3.4rem;
  }
}
@media only screen and (max-width: 90em) {
  .pricing-card__price-value {
    font-size: 2.5rem;
  }
}
.pricing-card__description {
  color: var(--color-white);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}
@media only screen and (max-width: 90em) {
  .pricing-card__description {
    font-size: 1.4rem;
  }
}
.pricing-card__button {
  background: linear-gradient(271deg, #16A085 28.32%, #F4D03F 99.44%);
  border-radius: 0.6rem;
  border: 0;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  color: var(--color-white);
  padding: 1rem 1.5rem;
  width: 100%;
  display: block;
  cursor: pointer;
  margin-top: 2.5rem;
}
@media only screen and (max-width: 90em) {
  .pricing-card__button {
    font-size: 14px;
    padding: 0.8rem 1.5rem;
    margin-top: 1.5rem;
  }
}
.pricing-card__button.active-btn {
  background: linear-gradient(271deg, #16A085 28.32%, #2A686B 99.44%);
}
.pricing-card__list {
  padding: 3rem 2rem 3.5rem;
  list-style: none;
  height: 30rem;
  overflow-y: auto;
  padding-top: 0;
}
@media only screen and (max-width: 90em) {
  .pricing-card__list {
    height: 30rem;
  }
}
.pricing-card__list::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.6rem;
  background-color: transparent;
  border-radius: 0.3rem;
}
.pricing-card__list::-webkit-scrollbar-thumb {
  background-color: #C1C1C1;
  border-radius: 0.3rem;
}
.pricing-card__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.pricing-card__icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.8rem;
}
.pricing-card__text {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
}
@media only screen and (max-width: 90em) {
  .pricing-card__text {
    font-size: 1.3rem;
  }
}

.plan-card {
  width: 45%;
}
@media only screen and (max-width: 85.37em) {
  .plan-card {
    width: 100%;
  }
}
.plan-card__inner {
  border-radius: 0px 6px 6px 0px;
  border-left: 1px solid var(--Border, #E5E7EB);
  background: rgba(228, 234, 255, 0.3294117647);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
  padding: 5.5rem 18rem;
}
@media only screen and (max-width: 106em) {
  .plan-card__inner {
    border-left: 0;
    padding: 3rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .plan-card__inner {
    border-left: 0;
    padding: 5.5rem 7rem;
  }
}
.plan-card__main {
  padding: 1.5rem;
  border-radius: 8px;
  font-family: Arial, sans-serif;
  text-align: center;
}
.plan-card__price {
  color: var(--color-module);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
}
.plan-card__price-value {
  font-size: 4.2rem;
}
.plan-card__details {
  margin: 3rem 0;
}
.plan-card__row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}
.plan-card__label {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}
.plan-card__value {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}

.toggle-tabs-wrapper {
  padding: 2rem;
  padding-left: 0;
  padding-right: 0;
}
.toggle-tabs-wrapper__toggle-tabs {
  display: flex;
  justify-content: center;
}
.toggle-tabs-wrapper__toggle-tabs-inner {
  background-color: var(--background-tab);
  padding: 0.4rem;
  border-radius: 2rem;
  gap: 0.4rem;
}
.toggle-tabs-wrapper__button {
  position: relative;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 2rem;
  color: var(--color-text);
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
  background: none;
  transition: all 0.3s ease;
}
@media only screen and (max-width: 90em) {
  .toggle-tabs-wrapper__button {
    padding: 0.5rem 1rem;
    font-size: 1.4rem;
    font-weight: 400;
  }
}
.toggle-tabs-wrapper__button.active {
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
}
@media only screen and (max-width: 90em) {
  .toggle-tabs-wrapper__button.active {
    font-size: 1.3rem;
    font-weight: 600;
  }
}
.toggle-tabs-wrapper__button.active .toggle-tabs-wrapper__discount {
  color: var(--color-white);
}
.toggle-tabs-wrapper__discount {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  margin-left: 0.4rem;
  transition: color 0.3s ease;
}
@media only screen and (max-width: 90em) {
  .toggle-tabs-wrapper__discount {
    font-size: 1.4rem;
  }
}
.toggle-tabs-wrapper__tab-content {
  position: relative;
}
.toggle-tabs-wrapper__tab-content__panel {
  display: none;
  animation: fadeIn 0.5s ease;
}
.toggle-tabs-wrapper__tab-content__panel.active {
  display: block;
}
.toggle-tabs-wrapper__content-heading {
  color: var(--color-tab);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  padding: 1rem 0 3.8rem;
  text-align: center;
}
@media only screen and (max-width: 90em) {
  .toggle-tabs-wrapper__content-heading {
    padding: 1rem 0 1.8rem;
  }
}
.toggle-tabs-wrapper__content-span {
  color: var(--color-success-light);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
}
.toggle-tabs-wrapper__subscription {
  display: flex;
  width: 100%;
  padding: 0 15rem;
}
@media only screen and (max-width: 106em) {
  .toggle-tabs-wrapper__subscription {
    padding: 0;
  }
}
.toggle-tabs-wrapper__subscription.sign-in-subscription-wrapper {
  padding: 0 0 0 10rem;
}
@media only screen and (max-width: 90em) {
  .toggle-tabs-wrapper__subscription.sign-in-subscription-wrapper {
    padding: 0 0 0 4rem;
  }
}
.toggle-tabs-wrapper__subscription-plan-inner {
  border-radius: 6px;
  border: 2px solid var(--Border, #E5E7EB);
  background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(114deg, rgba(255, 255, 255, 0) -35.17%, rgba(255, 255, 255, 0.4) 18.93%);
  box-shadow: 0px 4px 8.2px -1px rgba(0, 0, 0, 0.25);
  margin: 0 1.4rem 1.4rem 0;
  transition: 0.3s;
  min-width: 34rem;
}
@media only screen and (max-width: 90em) {
  .toggle-tabs-wrapper__subscription-plan-inner {
    min-width: 30rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .toggle-tabs-wrapper__subscription-plan-inner {
    min-width: 27rem;
  }
}
@media only screen and (max-width: 75em) {
  .toggle-tabs-wrapper__subscription-plan-inner {
    min-width: 25rem;
  }
}
.toggle-tabs-wrapper__subscription-plan-inner:hover {
  border: 2px solid var(--Mosque-300, #80C8C7);
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-section {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  min-height: calc(100vh - 21.6rem);
  background-color: var(--color-white);
}
@media only screen and (max-width: 90em) {
  .account-section {
    padding: 1rem;
  }
}
.account-section__left {
  grid-column: 1/6;
  border-right: 1px solid var(--color-border-search);
  padding: 3rem;
}
@media only screen and (max-width: 85.37em) {
  .account-section__left {
    padding: 1rem;
  }
}
.account-section__right {
  grid-column: 6/25;
  padding: 5% 15%;
}
.account-section__right.about {
  padding: 3rem 2.5rem;
}
.account-section__right.history {
  padding: 3.5rem 2.5rem;
}
.account-section__my-account-main {
  grid-column: 1/25;
  padding: 0.5rem 2rem 2rem;
  border: 1px solid var(--color-border-search);
  border-radius: 0.6rem;
}
@media only screen and (max-width: 90em) {
  .account-section__my-account-main {
    padding: 0.5rem 1rem 0.5rem;
  }
}

.account-sidebar {
  list-style: none;
}
.account-sidebar__icon {
  stroke: var(--color-text);
  width: 2rem;
  height: 2.2rem;
  margin-right: 1.2rem;
}
.account-sidebar__icon.sign-out {
  width: 1.8rem;
  height: 1.8rem;
}
.account-sidebar__button {
  border-style: none;
  background-color: transparent;
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.account-sidebar__list {
  padding: 1rem 0.8rem;
  transition: 0.3s ease-in-out;
  border-radius: 0.4rem;
}
.account-sidebar__list:hover {
  background-color: var(--color-select);
}

.permissions {
  height: calc(100ch - 35rem);
  overflow-y: auto;
  overflow-x: hidden;
}
.permissions__top {
  padding: 1rem 2.4rem;
  background: var(--table-background);
}
@media only screen and (max-width: 90em) {
  .permissions__top {
    padding: 1.5rem;
  }
}
.permissions__labels {
  display: grid;
  grid-template-columns: 400px 1fr 100px;
  gap: 12rem;
}
@media only screen and (max-width: 64em) {
  .permissions__labels {
    gap: 2rem;
  }
}
.permissions__label {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
}
@media only screen and (max-width: 90em) {
  .permissions__label {
    font-size: 1.3rem;
  }
}
.permissions__block {
  padding: 2.4rem;
  /*        border-bottom: 1px solid var(--color-border-search);
  */
}
@media only screen and (max-width: 90em) {
  .permissions__block {
    padding: 1.5rem;
  }
}
.permissions__block:last-child {
  border-bottom: none;
}
.permissions__header {
  margin-bottom: 1.6rem;
}
.permissions__title {
  color: var(--color-text);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 800;
}
@media only screen and (max-width: 90em) {
  .permissions__title {
    font-size: 1.4rem;
    font-weight: 600;
  }
}
.permissions__item {
  display: grid;
  grid-template-columns: 400px 1fr 100px;
  gap: 12rem;
  align-items: start;
  border-bottom: 1px solid var(--color-border-search);
  padding: 2.4rem 0;
}
.permissions__item:last-child {
  border-bottom: none;
}
@media only screen and (max-width: 64em) {
  .permissions__item {
    display: block;
  }
}
.permissions__name {
  padding-right: 1.6rem;
}
@media only screen and (max-width: 64em) {
  .permissions__name {
    margin-bottom: 2rem;
  }
}
.permissions__subtitle {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
}
@media only screen and (max-width: 90em) {
  .permissions__subtitle {
    font-size: 1.4rem;
    font-weight: 500;
  }
}
.permissions__description {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
  margin-top: 0.4rem;
}
@media only screen and (max-width: 90em) {
  .permissions__description {
    font-size: 1.1rem;
    font-weight: 400;
  }
}
.permissions__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.permissions__section-title {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
@media only screen and (max-width: 90em) {
  .permissions__section-title {
    font-size: 1.3rem;
  }
}
.permissions__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.permissions__note {
  font-size: 1.2rem;
  color: var(--color-note);
}
.permissions__action {
  text-align: right;
}
.permissions__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}
.permissions__tag--blue {
  background-color: var(--background-info);
  color: var(--color-info-light);
  padding: 0.4rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 90em) {
  .permissions__tag--blue {
    padding: 0.3rem 1rem;
    font-size: 1.3rem;
  }
}
.permissions__tag--purple {
  background-color: var(--color-purple-light);
  color: var(--color-secondary-light);
  padding: 0.4rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 90em) {
  .permissions__tag--purple {
    padding: 0.3rem 1rem;
    font-size: 1.3rem;
  }
}
.permissions__tag--green {
  background-color: var(--color-green);
  color: var(--color-success-light);
  padding: 0.4rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 90em) {
  .permissions__tag--green {
    padding: 0.3rem 1rem;
    font-size: 1.3rem;
  }
}
.permissions__tag--orange {
  background-color: rgba(249, 115, 22, 0.1);
  color: var(--color-warning-light);
  padding: 0.4rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (max-width: 90em) {
  .permissions__tag--orange {
    padding: 0.3rem 1rem;
    font-size: 1.3rem;
  }
}
.permissions__remove {
  margin-left: 0.6rem;
  background: none;
  border: none;
  color: inherit;
  font-size: 1.8rem;
  padding: 0 0.2rem;
  cursor: pointer;
  opacity: 0.7;
}
@media only screen and (max-width: 90em) {
  .permissions__remove {
    font-size: 1.6rem;
  }
}
.permissions__remove:hover {
  opacity: 1;
}

.account-form {
  border: 1px solid var(--color-border-search);
  height: 100%;
  border-radius: 0.6rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: 2.5rem;
}
.account-form__profile {
  display: flex;
}
.account-form__left {
  grid-column: 1/6;
  height: 100%;
}
.account-form__left--inputs {
  margin-top: 5rem;
}
.account-form__right {
  grid-column: 7/12;
  height: 100%;
  margin-top: 12.3rem;
}
.account-form__right--btns {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3.2rem;
}
.account-form__right--btns .primary-btn {
  flex: 1;
}
.account-form__right--btns .secondary-btn {
  flex: 1;
}
.account-form__user-details {
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.account-form__user-details--name {
  color: var(--color-module);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 700;
}
.account-form__user-details--role {
  color: var(--color-accent);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin-top: 0.4rem;
}
.account-form__user-details--status {
  border-radius: 0.3rem;
  border: 1px solid var(--color-active);
  background: var(--color-active);
  color: var(--color-white);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  display: inline-block;
  width: 7.5rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.change-password-box {
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  background: var(--color-white);
  padding: 10%;
  width: 68rem;
}
.change-password-box__head {
  color: var(--color-accent);
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
  margin-bottom: 5rem;
}
.change-password-box__input-field {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.change-password-box__label {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}
.change-password-box__input {
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  display: flex;
  padding: 1rem;
  padding: 10px 20px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.change-password-box__psw {
  position: relative;
}
.change-password-box__psw--input {
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  display: flex;
  padding: 1rem;
  padding: 10px 20px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  color: var(--color-text);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  outline: none;
}
.change-password-box__eye-btn {
  position: absolute;
  border-style: none;
  background-color: transparent;
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.change-password-box__instruction--head {
  color: var(--color-module);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  display: block;
}
.change-password-box__instruction--desc {
  color: var(--color-text);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 5px;
}

.modal {
  /* Default icon state (no rotation) */
}
.modal__accordion-item {
  border-radius: 0.6rem;
  border: 1px solid #E5E7EB;
  margin-bottom: 0.8rem;
}
.modal__accordion-item {
  height: 4.3rem;
  overflow: hidden;
}
.modal__accordion-item--expanded {
  height: auto;
}
.modal__accordion-item--expanded .modal__accordion-content {
  display: block;
}
.modal__accordion-item--expanded .modal__accordion-header {
  border-bottom: 1px solid #E5E7EB;
}
.modal__accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.modal__accordion-header--count {
  border-radius: 1rem;
  background: #d3deff;
  width: 2.2rem;
  height: 2.2rem;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  position: absolute;
  right: 5rem;
}
.modal__accordion-checkbox-subitem {
  margin-right: 0.8rem;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--checkbox-border);
}
@media only screen and (max-width: 90em) {
  .modal__accordion-checkbox-subitem {
    width: 1.3rem;
    height: 1.3rem;
  }
}
.modal__accordion-label {
  font-size: 1.7rem;
  color: var(--color-module);
  font-style: normal;
  font-weight: 700;
  width: 18rem;
}
@media only screen and (max-width: 90em) {
  .modal__accordion-label {
    font-size: 1.5rem;
  }
}
.modal__accordion-content {
  padding: 1.5rem;
}
@media only screen and (max-width: 90em) {
  .modal__accordion-content {
    padding: 0 1.5rem;
  }
}
.modal__accordion-content-sub-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.modal__sub-label {
  font-size: 1.6rem;
  color: var(--color-module);
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
@media only screen and (max-width: 90em) {
  .modal__sub-label {
    font-size: 1.4rem;
  }
}
.modal__accordion-sub-item {
  padding: 0.3rem;
  align-items: center;
  display: flex;
}
@media only screen and (max-width: 90em) {
  .modal__accordion-sub-item {
    padding: 0.5rem;
  }
}
.modal__sidemenu-icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: var(--color-module);
  margin-left: 8rem;
}
@media only screen and (max-width: 90em) {
  .modal__sidemenu-icon {
    font-size: 1.4rem;
  }
}
.modal .modal__sidemenu-icon {
  transition: transform 0.5s ease;
  /* Smooth transition for rotation */
}
.modal .modal__accordion-item.modal__accordion-item--expanded .modal__sidemenu-icon {
  transform: rotate(-180deg);
  /* Rotate icon by 180 degrees */
}
.modal__accordion--permission {
  height: 40.5rem;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.modal__accordion--permission::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: var(--color-scrollbar);
  border-radius: 1.5rem;
}
.modal__accordion--permission::-webkit-scrollbar-thumb {
  background: var(--color-scrollthumb);
  border-radius: 1.5rem;
}

.sortable-table th.asc .main-table__head .sortable-head, .sortable-table th.desc .main-table__head .sortable-head {
  position: relative;
}
.sortable-table th.asc .main-table__head .sortable-head::after, .sortable-table th.desc .main-table__head .sortable-head::after {
  content: "";
  background-image: url("../../images/sort-icon.png");
  background-repeat: no-repeat;
  background-size: contain;
  width: 0.8rem;
  height: 1.6rem;
  position: absolute;
  right: -2rem;
}
.sortable-table th.asc .main-table__head .sortable-head::after {
  rotate: 180deg;
  top: -1px;
}
.sortable-table th.desc .main-table__head .sortable-head::after {
  rotate: 0deg;
  top: 3px;
}

.invoice-main {
  border-bottom: 0;
}
.invoice-main__form {
  display: flex;
  justify-content: space-between;
  padding: 2.4rem;
  width: 100%;
  padding: 2.9rem;
}
.invoice-main__label {
  color: var(--color-invoice);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.invoice-main__label.text-right {
  text-align: right;
}
.invoice-main__name {
  color: var(--color-invoice);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.invoice-main__table-main {
  margin-top: 5.2rem;
  overflow-x: auto;
}
.invoice-main__table-main::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.6rem;
  background-color: transparent;
  border-radius: 0.3rem;
}
.invoice-main__table-main::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 0.3rem;
}
.invoice-main__table {
  width: 100%;
  border-spacing: 0;
}
.invoice-main__table-head {
  background-color: var(--table-background);
}
.invoice-main__header-data {
  padding: 1.6rem;
  color: var(--color-secondary);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.invoice-main__header-data.number {
  text-align: right;
}
.invoice-main__table-cell {
  color: var(--color-secondary);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  padding: 2rem;
  border-bottom: 1px solid var(--color-border-search);
  white-space: nowrap;
}
.invoice-main__btn-main {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}
.invoice-main__table-cell-number {
  text-align: right;
  color: var(--color-secondary);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  padding: 2rem;
  border-bottom: 1px solid var(--color-border-search);
}
.invoice-main__printing {
  border-radius: 0.4rem;
  border: 0.6px solid var(--color-border-search);
  width: 5rem;
  height: 4.7rem;
  margin-left: 1.5rem;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .invoice-main__printing {
    width: 4rem;
    height: 3.7rem;
  }
}
.invoice-main__printing-icon {
  width: 1.8rem;
  height: 1.6rem;
}
.invoice-main__button-icon {
  width: 1.4rem;
  height: 1.3rem;
  margin-left: 1rem;
}

.custom-selects {
  position: relative;
  color: var(--color-line);
  border-bottom: 1px solid var(--or-btn);
  width: 100%;
}
.custom-selects__dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-white);
  padding: 1.2rem 0rem 0.6rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  cursor: pointer;
}
.custom-selects__dropdown--options {
  display: none;
  position: absolute;
  top: 100%;
  width: 100%;
  max-height: 24rem;
  overflow-y: auto;
  z-index: 30;
  background-color: var(--color-white);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  border-radius: 0.6rem;
}
.custom-selects__dropdown__option {
  padding: 1rem 1.6rem;
  transition: background 0.2s;
  color: var(--color-black);
  font-weight: 400;
  cursor: pointer;
}
.custom-selects__dropdown__option:hover {
  background-color: var(--hover-dropdown);
}
.custom-selects__dropdown--selected {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.custom-selects__dropdown--selected[data-value="0"], .custom-selects__dropdown--selected[data-value=""] {
  color: var(--color-line);
}
.custom-selects__dropdown--selected:not([data-value="0"]):not([data-value=""]) {
  color: var(--color-black);
}
.custom-selects.open .custom-selects__dropdown--options {
  display: block;
}
.custom-selects__search-input {
  border-style: none;
  width: 100%;
  outline: none;
  color: var(--color-black);
  font-weight: 400;
  font-size: 1.5rem;
}
.custom-selects__search-wrapper {
  display: flex;
  align-items: center;
  padding: 1.2rem 1rem;
}

.modal-password {
  margin-bottom: 3rem;
}
@media only screen and (max-width: 90em) {
  .modal-password {
    margin-bottom: 1rem;
  }
}
.modal-password__label {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media only screen and (max-width: 90em) {
  .modal-password__label {
    font-size: 1.3rem;
  }
}
.modal-password__input {
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  width: 100%;
  margin-top: 1rem;
  padding: 1rem;
  outline: 0;
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
@media only screen and (max-width: 90em) {
  .modal-password__input {
    padding: 0.5rem;
  }
}
.modal-password__input-main {
  position: relative;
}
.modal-password__input-main input::placeholder {
  font-size: 1.2rem;
}
.modal-password__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--psw-eye);
  position: absolute;
  right: 1rem;
  top: 45%;
  cursor: pointer;
}
.modal-password__icon.open {
  display: none;
}
.modal-password__span {
  color: var(--color-module);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 2;
}
.modal-password__paragraph {
  color: var(--color-module);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media only screen and (max-width: 90em) {
  .modal-password__paragraph {
    font-size: 1.2rem;
  }
}

.subscription-area {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
}
@media only screen and (max-width: 90em) {
  .subscription-area {
    min-height: calc(100vh - 4.8rem);
  }
}
.subscription-area__left {
  grid-column: 1/7;
  background-color: var(--color-hover);
  padding: 4rem;
  position: relative;
  overflow: hidden;
  z-index: 12;
  min-height: calc(100vh - 6rem);
}
@media only screen and (max-width: 90em) {
  .subscription-area__left {
    padding: 2rem 4rem 1rem 4rem;
    min-height: calc(100vh - 4.5rem);
  }
}
.subscription-area__left--head {
  color: var(--color-text-hover);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 0.6rem;
}
@media only screen and (max-width: 90em) {
  .subscription-area__left--head {
    font-size: 2.4rem;
  }
}
.subscription-area__left__img {
  margin-top: 6rem;
}
.subscription-area__left--div {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 112;
}
@media only screen and (max-width: 90em) {
  .subscription-area__left--div {
    width: 38%;
  }
}
.subscription-area__right {
  grid-column: 7/24;
  padding: 1rem 8rem 1rem 0;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: calc(100vh - 6rem);
}
@media only screen and (max-width: 100em) {
  .subscription-area__right {
    padding: 1rem 4rem 1rem 0;
  }
}
@media only screen and (max-width: 90em) {
  .subscription-area__right {
    padding: 1rem 2rem 1rem 0;
    padding-top: 2rem;
    grid-column: 7/25;
    min-height: calc(100vh - 4.5rem);
  }
}
.subscription-area__right--head {
  color: var(--color-text-hover);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 0.6rem;
}

.brudcrumb {
  display: flex;
  align-items: center;
  width: 100%;
}
.brudcrumb__icon {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-primary);
}
@media only screen and (max-width: 90em) {
  .brudcrumb__icon {
    width: 1.6rem;
    height: 1.6rem;
  }
}
.brudcrumb__right-angle {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-grey);
  margin: 0 0.8rem;
}
@media only screen and (max-width: 90em) {
  .brudcrumb__right-angle {
    width: 1.8rem;
    margin: 0 0.5rem;
    height: 1.8rem;
  }
}
.brudcrumb__text {
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2rem;
  color: var(--bread-crumb-text);
  cursor: pointer;
}
.brudcrumb__text.active {
  color: var(--color-text-hover);
}
@media only screen and (max-width: 90em) {
  .brudcrumb__text {
    font-size: 1.4rem;
    font-weight: 600;
  }
}

.primary-btn {
  padding: 1rem 1.5rem;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0.6rem;
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
@media only screen and (max-width: 90em) {
  .primary-btn {
    font-size: 1.4rem;
    padding: 0.8rem !important;
    margin-right: 1rem;
    border-radius: 0.4rem;
  }
}
.primary-btn:hover {
  background-color: var(--color-text-hover);
  transition: 0.5s;
}
@media only screen and (max-width: 75em) {
  .primary-btn {
    padding: 0.8rem !important;
  }
}
.primary-btn__icon {
  width: 1.8rem;
  height: 1.8rem;
  stroke: var(--color-white);
  margin-right: 0.3rem;
}
.primary-btn__icon.success {
  width: 1.3rem;
}
@media only screen and (max-width: 90em) {
  .primary-btn__icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}
@media only screen and (max-width: 75em) {
  .primary-btn__icon {
    width: 2rem;
    height: 2rem;
  }
}

.employee-profile {
  display: flex;
  align-items: flex-end;
  padding: 1.6rem;
  border-radius: 0.8rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 90em) {
  .employee-profile {
    margin-bottom: 2rem;
    padding: 0;
  }
}
.employee-profile.employee-modal {
  margin-bottom: 2rem;
  padding-left: 0;
}
@media only screen and (max-width: 85.37em) {
  .employee-profile {
    margin-bottom: 2rem;
  }
}
@media only screen and (max-width: 75em) {
  .employee-profile {
    margin-bottom: 2rem;
    display: flex;
  }
}
.employee-profile__avatar {
  width: 10.8rem;
  height: 10.4rem;
  min-width: 10.8rem;
  background-color: var(--color-image-background);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.4rem;
  position: relative;
  /*        overflow: hidden;*/
  cursor: pointer;
}
.employee-profile__avatar.employee {
  width: 16rem;
  height: 11.4rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 90em) {
  .employee-profile__avatar.employee {
    width: 14.8rem;
    height: 12.4rem;
  }
}
.employee-profile__avatar.employee .employee-profile__user {
  width: 14rem;
  height: 14rem;
}
@media only screen and (max-width: 90em) {
  .employee-profile__avatar.employee .employee-profile__user {
    width: 12.8rem;
    height: 12.4rem;
  }
}
.employee-profile__avatar.my-account {
  width: 14rem;
}
@media only screen and (max-width: 90em) {
  .employee-profile__avatar.my-account {
    width: 13rem;
  }
}
.employee-profile__image {
  max-width: 100%;
  height: auto;
  max-height: 10.4rem;
  object-fit: cover;
}
.employee-profile__image-icon {
  width: 4rem;
  height: 4rem;
}
@media only screen and (max-width: 90em) {
  .employee-profile__image-icon {
    width: 3rem;
    height: 3rem;
  }
}
.employee-profile__details {
  margin-left: 1rem;
  width: 100%;
}
.employee-profile__role {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  color: var(--color-accent);
  border: 0;
  white-space: nowrap;
}
@media only screen and (max-width: 90em) {
  .employee-profile__role {
    font-size: 1.2rem;
  }
}
.employee-profile__role:focus-visible {
  outline: 0;
}
.employee-profile__role::placeholder {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  color: var(--color-accent);
}
.employee-profile__user {
  width: 10.8rem;
  height: 10.4rem;
  border-radius: 0.6rem;
}
.employee-profile__button {
  color: var(--color-white);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  background-color: var(--color-active);
  border: 1px solid var(--color-active);
  border-radius: 0.3rem;
  padding: 0.5rem 1.5rem;
}
@media only screen and (max-width: 90em) {
  .employee-profile__button {
    padding: 0.3rem 1rem;
    font-size: 1.2rem;
  }
}
.employee-profile__heading {
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
  border: 0;
  background-color: transparent;
  overflow: hidden;
  word-break: break-word;
  border-bottom: 1px solid var(--color-hover);
}
@media only screen and (max-width: 90em) {
  .employee-profile__heading {
    font-size: 1.6rem;
    margin-bottom: 0.2rem;
  }
}
.employee-profile__heading:focus-visible {
  outline: 0;
}
.employee-profile__heading::placeholder {
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.employee-profile__avatar-button {
  position: absolute;
  z-index: 9;
  bottom: -2.6rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.8rem;
  white-space: nowrap;
  border-radius: 6px;
  border: 1px solid #E5E7EB;
  background-color: var(--color-white);
  width: 95%;
  cursor: pointer;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-text);
}
@media only screen and (max-width: 90em) {
  .employee-profile__avatar-button {
    font-size: 1.2rem;
    padding: 0.5rem;
    bottom: -1.6rem;
  }
}
@media only screen and (max-width: 90em) {
  .employee-profile__avatar-button img {
    margin-right: 0.5rem !important;
  }
}
.employee-profile__name {
  color: var(--color-line);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
}

.input-select {
  position: relative;
}
@media only screen and (max-width: 90em) {
  .input-select {
    font-size: 1.4rem;
    margin-top: 0.5rem;
  }
}
.input-select__label {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .input-select__label {
    font-size: 1.3rem;
  }
}
.input-select__select {
  margin-top: 0.9rem;
  padding: 0 0.5rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  height: 4.6rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  color: var(--color-line);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: 0;
  position: relative;
  background: transparent;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 90em) {
  .input-select__select {
    height: 3.3rem;
  }
}
.input-select__select.account {
  height: 3.8rem;
}
.input-select__select.employee-phone {
  margin-top: 0;
  color: var(--color-text);
  margin-bottom: 1.4rem;
}
@media only screen and (max-width: 90em) {
  .input-select__select.employee-phone {
    width: 15% !important;
    height: 3rem;
  }
}
@media only screen and (max-width: 90em) {
  .input-select__select {
    font-size: 1.2rem;
  }
}
.input-select__select.phonenumber {
  width: 18%;
}
@media only screen and (max-width: 90em) {
  .input-select__select.phonenumber {
    width: 19%;
  }
}
@media only screen and (max-width: 85.37em) {
  .input-select__select.phonenumber {
    width: 25%;
  }
}
@media only screen and (max-width: 64em) {
  .input-select__select.phonenumber {
    width: 13%;
  }
}
.input-select__select.employee {
  margin-top: 0.5rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  /*            color: var(--color-line);*/
  font-size: 1.6rem;
  font-weight: 400;
  margin-bottom: 1.4rem;
}
@media only screen and (max-width: 90em) {
  .input-select__select.employee {
    font-size: 1.2rem;
    height: 3rem;
  }
}
.input-select__select.emergency {
  width: 100%;
}
.input-select__select.user-number {
  width: 8rem;
}
@media only screen and (max-width: 90em) {
  .input-select__select.user-number {
    height: 3rem;
    width: 6rem;
  }
  .input-select__select.user-number::placeholder {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .input-select__select.user-number {
    width: 29%;
  }
}
@media only screen and (max-width: 75em) {
  .input-select__select.user-number {
    width: 25%;
  }
}
.input-select__select.my-account-select {
  width: 10rem;
}
@media only screen and (max-width: 90em) {
  .input-select__select.my-account-select {
    width: 10rem;
  }
}
@media only screen and (max-width: 48em) {
  .input-select__select.my-account-select {
    width: 9rem;
  }
}
.input-select__icon {
  width: 1.2rem;
  height: 1.5rem;
  stroke: var(--color-input);
  position: absolute;
  top: 50%;
  right: 1.5rem;
  z-index: 2;
  transform: translateY(-50%);
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .input-select__icon {
    top: 51%;
  }
}
.input-select__icon.usermanagement {
  top: 53%;
}
.input-select__icon.phone-number {
  top: 49%;
  right: 1rem;
}
@media only screen and (max-width: 64em) {
  .input-select__icon.phone-number {
    right: 2rem;
  }
}
.input-select__icon-down {
  width: 1.5rem;
  height: 0.7rem;
  stroke: var(--color-input);
  position: absolute;
  top: 2.9rem;
  z-index: 5;
  left: 5.5rem;
}
@media only screen and (max-width: 90em) {
  .input-select__icon-down {
    width: 1rem;
    top: 50%;
    left: 4rem;
    transform: translateY(-50%);
  }
}
.input-select__icon-down.account {
  top: 2.5rem;
}
@media only screen and (max-width: 90em) {
  .input-select__icon-down.account {
    top: 2.4rem;
    width: 1rem;
  }
}
.input-select__icon-down.employee {
  top: 2rem;
  left: 5rem;
}
@media only screen and (max-width: 90em) {
  .input-select__icon-down.employee {
    top: 1.5rem;
    left: 3.5rem;
    width: 1rem;
  }
}
@media only screen and (max-width: 64em) {
  .input-select__icon-down.employee {
    display: none;
  }
}
@media only screen and (max-width: 64em) {
  .input-select__icon-down.custom-date-angledown {
    display: block;
  }
}
.input-select__icon-down.account {
  left: 4.5rem;
}
@media only screen and (max-width: 90em) {
  .input-select__icon-down.account {
    left: 4rem;
  }
}
@media only screen and (max-width: 48em) {
  .input-select__icon-down.account {
    left: 3.8rem;
  }
}
.input-select__icon-down.user {
  left: 4.5rem;
}
@media only screen and (max-width: 64em) {
  .input-select__icon-down.user {
    left: 5.5rem;
  }
}

.inputfield {
  margin-top: 0.9rem;
  padding: 0 1rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  height: 4.6rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  color: var(--color-black);
  outline: 0;
  margin-bottom: 1rem;
  position: relative;
  background: transparent;
}
@media only screen and (max-width: 90em) {
  .inputfield {
    height: 3.3rem;
    font-size: 1.2rem;
  }
  .inputfield::placeholder {
    font-size: 1.2rem;
  }
}
.inputfield.account {
  height: 3.8rem;
}
@media only screen and (max-width: 90em) {
  .inputfield.account {
    height: 3rem;
  }
  .inputfield.account::placeholder {
    font-size: 1.2rem;
  }
}
.inputfield.phonenumber {
  width: 81%;
}
@media only screen and (max-width: 85.37em) {
  .inputfield.phonenumber {
    width: 73%;
  }
}
@media only screen and (max-width: 64em) {
  .inputfield.phonenumber {
    width: 86%;
  }
}
.inputfield.employee {
  width: 81%;
  margin-top: 0rem;
  border: 1px solid var(--color-border-search);
  margin-bottom: 1.4rem;
}
@media only screen and (max-width: 90em) {
  .inputfield.employee {
    width: 83%;
    height: 3rem;
    font-size: 1.2rem !important;
  }
  .inputfield.employee::placeholder {
    font-size: 1.2rem !important;
  }
}
@media only screen and (max-width: 64em) {
  .inputfield.employee {
    width: 83.5%;
  }
}
.inputfield.range-datepicker {
  border: 0;
  background: transparent;
}
.inputfield.range-datepicker::placeholder {
  color: var(--color-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}
@media only screen and (max-width: 90em) {
  .inputfield.range-datepicker::placeholder {
    font-size: 1.2rem;
  }
}
.inputfield.number {
  width: 82.5%;
}
@media only screen and (max-width: 118.75em) {
  .inputfield.number {
    width: 80.5%;
  }
}
@media only screen and (max-width: 106em) {
  .inputfield.number {
    width: 76.5%;
  }
}
@media only screen and (max-width: 90em) {
  .inputfield.number {
    width: 80.5%;
  }
}
@media only screen and (max-width: 85.37em) {
  .inputfield.number {
    width: 69.5%;
  }
}
@media only screen and (max-width: 64em) {
  .inputfield.number {
    width: 73%;
  }
}
.inputfield::placeholder {
  color: var(--color-line);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}
.inputfield.my-account {
  width: auto;
  height: 3.8rem;
}
@media only screen and (max-width: 90em) {
  .inputfield.my-account {
    height: 3rem;
  }
  .inputfield.my-account::placeholder {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 106em) {
  .inputfield.my-account {
    width: 62.5%;
  }
}
@media only screen and (max-width: 75em) {
  .inputfield.my-account {
    width: 60.5%;
  }
}
@media only screen and (max-width: 64em) {
  .inputfield.my-account {
    width: 59.5%;
  }
}
@media only screen and (max-width: 48em) {
  .inputfield.my-account {
    width: 53.5%;
  }
}

.textarea {
  margin-top: 0.9rem;
  padding: 0 1rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  height: 10rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  color: var(--color-black);
  outline: 0;
  margin-bottom: 1.4rem;
  font-family: "DM Sans", sans-serif;
  resize: none;
}
@media only screen and (max-width: 90em) {
  .textarea {
    height: 5rem;
    font-size: 1.4rem;
  }
}
.textarea::placeholder {
  color: var(--color-line);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}

.secondary-btn {
  padding: 1rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: 0.6rem;
  color: var(--color-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 90em) {
  .secondary-btn {
    padding: 0.6rem 0.8rem;
    font-size: 1.4rem;
    margin-right: 1rem !important;
    border-radius: 0.4rem;
  }
}
.secondary-btn:hover {
  transition: 0.3s;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border: 1px solid #082199;
  color: var(--color-text-hover);
}
@media only screen and (max-width: 75em) {
  .secondary-btn {
    padding: 0.5rem 1rem;
  }
}
.secondary-btn__icon {
  width: 1.8rem;
  height: 1.8rem;
  stroke: var(--color-accent);
  margin-right: 0.8rem;
}
@media only screen and (max-width: 90em) {
  .secondary-btn__icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.5rem;
  }
}
@media only screen and (max-width: 75em) {
  .secondary-btn__icon {
    width: 2rem;
    height: 2rem;
  }
}
.secondary-btn__arrow-icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--color-accent);
}
.secondary-btn__down-icon {
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 1rem;
  stroke: var(--color-accent);
}
.secondary-btn__checkbox {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  appearance: none;
  border: 1px solid var(--color-accent);
  border-radius: 0.2rem;
  outline: none;
  cursor: pointer;
  margin-right: 0.8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}
@media only screen and (max-width: 90em) {
  .secondary-btn__checkbox {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
  }
}
.secondary-btn__checkbox::after {
  content: "";
  width: 0.4rem;
  height: 0.8rem;
  border: solid var(--color-white);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(45deg);
  transform-origin: bottom left;
  position: absolute;
  top: 0;
  left: 0.3rem;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
@media only screen and (max-width: 90em) {
  .secondary-btn__checkbox::after {
    top: -0.2rem;
    left: 0.1rem;
  }
}
.secondary-btn__checkbox:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.secondary-btn__checkbox:checked::after {
  opacity: 1;
}
.secondary-btn__checkbox .count {
  background: var(--color-accent) !important;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: var(--color-white);
  font-weight: 500;
}

.table-search {
  display: flex;
  align-items: center;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  background: var(--color-white);
  width: 26rem;
  padding: 0.7rem 0.9rem;
}
@media only screen and (max-width: 90em) {
  .table-search {
    padding: 0.5rem 0.8rem;
  }
}
.table-search__icon {
  width: 1.9rem;
  height: 1.9rem;
  stroke: var(--color-line);
}
@media only screen and (max-width: 90em) {
  .table-search__icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}
.table-search__input {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  outline: none;
  border-style: none;
  background-color: transparent;
  width: 100%;
}
.table-search__input::placeholder {
  color: var(--color-line);
}
@media only screen and (max-width: 90em) {
  .table-search__input {
    font-size: 1.4rem;
  }
}
.table-search.dropdown-search {
  width: 100%;
  border-style: none;
  border-bottom: 1px solid var(--color-border-search);
  border-radius: 0;
}

.filter-search-box {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  font-size: 1.5rem;
}
.filter-search-box__input {
  border-style: none;
  outline: none;
  color: var(--color-lite-text);
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  background-color: transparent;
}

.switch {
  position: relative;
  display: inline-block;
  width: 4.8rem;
  height: 2.6rem;
}
.switch__input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-toggle);
  transition: 0.4s;
  border-radius: 3.4rem;
}
.switch__slider::before {
  position: absolute;
  content: "";
  height: 2rem;
  width: 2rem;
  left: 0.4rem;
  bottom: 0.3rem;
  background-color: var(--color-white);
  transition: 0.4s;
  border-radius: 50%;
}
.switch__input:checked + .switch__slider {
  background-color: var(--color-accent);
}
.switch__input:checked + .switch__slider::before {
  transform: translateX(2rem);
}
.switch__input:focus + .switch__slider {
  box-shadow: 0 0 1px var(--color-accent);
}
.switch__input:checked + .switch__slider {
  background-color: var(--color-accent);
}
.switch__input:checked + .switch__slider--before {
  transform: translateX(2.6rem);
}
.switch__input:focus + .switch__slider {
  box-shadow: 0 0 1px var(--color-accent);
}
.switch__slider--round {
  border-radius: 3.4rem;
}
.switch__slider--round--before {
  border-radius: 50%;
}

.create-new-modal .modal__content {
  width: 55rem;
  padding: 2rem;
  border-radius: 0.6rem;
  border: 0.6px solid rgba(0, 0, 0, 0.15);
  background: var(--color-white);
  /*        @include respond (laptop-large){
              width: 40rem;
          }*/
}
.create-new-modal .modal__content.save-modal {
  width: 46rem;
}
@media only screen and (max-width: 90em) {
  .create-new-modal .modal__content.save-modal {
    width: 40rem;
  }
}
.create-new-modal .modal__content.permission {
  width: 45rem;
}
@media only screen and (max-width: 90em) {
  .create-new-modal .modal__content.permission {
    width: 40rem;
  }
}
.create-new-modal .modal__content.employee-modal {
  width: 100rem;
  height: auto;
  overflow-y: auto;
  padding-bottom: 0;
}
@media only screen and (max-width: 90em) {
  .create-new-modal .modal__content.employee-modal {
    height: 54rem;
    width: 75rem;
  }
}
.create-new-modal .modal__content.employee-modal::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: var(--color-scrollbar);
  border-radius: 1.5rem;
}
.create-new-modal .modal__content.employee-modal::-webkit-scrollbar-thumb {
  background: var(--color-scrollthumb);
  border-radius: 1.5rem;
}
.create-new-modal .modal__content.modal-height {
  height: auto;
  overflow-y: auto;
}
@media only screen and (max-width: 90em) {
  .create-new-modal .modal__content.modal-height {
    height: 66rem;
  }
}
.create-new-modal .modal__content.modal-height::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: var(--color-scrollbar);
  border-radius: 1.5rem;
}
.create-new-modal .modal__content.modal-height::-webkit-scrollbar-thumb {
  background: var(--color-scrollthumb);
  border-radius: 1.5rem;
}

.sml-switch {
  position: relative;
  display: inline-block;
  width: 2.8rem;
  height: 1.6rem;
}
.sml-switch__input {
  opacity: 0;
  width: 0;
  height: 0;
}
.sml-switch__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-toggle);
  transition: 0.4s;
  border-radius: 1.6rem;
}
.sml-switch__slider::before {
  position: absolute;
  content: "";
  height: 1.2rem;
  width: 1.2rem;
  left: 0.2rem;
  bottom: 0.2rem;
  background-color: var(--color-white);
  transition: 0.4s;
  border-radius: 50%;
}
.sml-switch__input:checked + .sml-switch__slider {
  background-color: var(--color-accent);
}
.sml-switch__input:checked + .sml-switch__slider::before {
  transform: translateX(1.2rem);
}
.sml-switch__input:focus + .sml-switch__slider {
  box-shadow: 0 0 1px var(--color-accent);
}
.sml-switch__slider--round {
  border-radius: 1.6rem;
}
.sml-switch__slider--round::before {
  border-radius: 50%;
}

.otp-container__input {
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.2s ease-in-out;
}
.otp-container__input:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Base styles */
.subscription-success {
  position: absolute;
  color: var(--color-accent);
  top: 50%;
  left: 56%;
  transform: translate(-50%, -50%);
  /* Animation */
}
.subscription-success.success {
  left: 50%;
}
.subscription-success__icon {
  position: relative;
  width: 15rem;
  height: 15rem;
  margin: 0 auto 20px;
}
@media only screen and (max-width: 90em) {
  .subscription-success {
    top: 55%;
    left: 57%;
  }
}
@media only screen and (max-width: 75em) {
  .subscription-success {
    top: 70%;
    left: 50%;
  }
}
.subscription-success__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #d9ecec;
  animation: pulse 2s infinite;
  z-index: 1;
}
.subscription-success__circle:nth-child(2) {
  width: 80%;
  height: 80%;
  background: #b4d6d6;
  animation-delay: 0.1s;
}
.subscription-success__circleone {
  width: 50%;
  height: 50%;
  background: #6d9f9f;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 11;
}
.subscription-success__check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  stroke: var(--color-white);
  z-index: 21;
}
.subscription-success__404image {
  width: 9.8rem;
  height: 8.8rem;
  margin-bottom: 5.6rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 0.6rem;
}
@media only screen and (max-width: 90em) {
  .subscription-success__404image {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.6rem;
  }
}
.subscription-success__heading {
  color: var(--color-accent);
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .subscription-success__heading {
    font-size: 2rem;
  }
}
@keyframes pulse {
  50% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.subscription-success__check-icon {
  width: 8rem;
  height: 8rem;
  margin-bottom: 2rem;
}
.subscription-success__check-icon-sm {
  width: 6rem;
  height: 6rem;
  margin-bottom: 2rem;
}
.subscription-success__message {
  color: #595A70;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.subscription-success__heading {
  color: var(--color-accent);
  font-size: 2.8rem;
  font-style: normal;
  font-weight: 600;
}

.upload-photo {
  width: 17rem;
  height: 17rem;
  position: relative;
  margin-right: 1.7rem;
}
.upload-photo__container {
  position: relative;
  border-radius: 0.6rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upload-photo__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upload-photo__button {
  border-radius: 6px;
  border: 1px solid var(--color-border-search);
  background: var(--color-white);
  padding: 1rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.upload-photo__icon {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-text);
  margin-right: 0.8rem;
}
.upload-photo__text {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}
.upload-photo__input {
  display: none;
}

.about-logo {
  width: 23rem;
  background-color: var(--color-light-hover);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--premium-btn);
  border-radius: 0.6rem;
  margin-right: 2.5rem;
}
.about-logo__svg {
  width: 15rem;
  height: 15rem;
  margin: 0 0.4rem;
}

.about-container {
  border: 1px solid var(--color-border-search);
  margin-bottom: 5rem;
  border-radius: 0.6rem;
}
.about-container__top {
  padding: 1.8rem;
}
.about-container__top--head {
  color: var(--color-module);
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 700;
}
.about-container__top--desc {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
}
.about-container__box {
  border-top: 1px solid var(--color-border-search);
  padding: 1.5rem;
  display: flex;
  align-items: center;
}
.about-container__box--head {
  color: var(--color-module);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
}
.about-container__box--desc {
  color: var(--color-secondary);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}

.icon-box {
  border-radius: 10px;
  border: 1px solid var(--box-icon-border);
  background: var();
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1.8rem;
}
.icon-box__svg {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-accent);
}

.signout-modal .modal__content {
  width: 55rem;
  padding: 3rem;
  border-radius: 0.6rem;
  border: 0.6px solid rgba(0, 0, 0, 0.15);
  background: var(--color-white);
}
.signout-modal__head {
  color: var(--color-black);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
}
.signout-modal__desc {
  color: var(--color-text);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
}

.icon-box {
  border-radius: 10px;
  border: 1px solid var(--box-icon-border);
  background: var();
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  width: 4.8rem;
  height: 4.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1.8rem;
}
.icon-box__svg {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-accent);
}

.input-box {
  position: relative;
  height: 5rem;
  width: 100%;
}
.input-box__input {
  width: 100%;
  padding: 1.2rem 0 0.4rem 0;
  border: none;
  border-bottom: 1px solid var(--or-btn);
  background-color: transparent;
  font-size: 1.6rem;
  font-weight: 400;
  outline: none;
}
.input-box__input:focus + .input-box__label, .input-box__input:not(:placeholder-shown) + .input-box__label {
  top: -0.5rem;
  font-size: 1.4rem;
  color: #333;
}
.input-box__input:-webkit-autofill + .input-box__label {
  top: -0.5rem;
  font-size: 1.4rem;
  color: #333;
}
.input-box__label {
  position: absolute;
  left: 0;
  top: 1.6rem;
  color: var(--color-line);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
}
.input-box:focus-within .input-box__label {
  top: -0.5rem;
  font-size: 1.4rem;
  color: #333;
}

.logo-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin: 0 auto;
}
.logo-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  border: 1px solid var(--color-border-search);
  border-radius: 0.6rem;
  background-color: var(--color-white);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media only screen and (max-width: 90em) {
  .logo-list__item {
    padding: 0.8rem;
  }
}
.logo-list__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.logo-list__icon {
  width: 2.6rem;
  height: 2.6rem;
  margin-right: 2rem;
}
@media only screen and (max-width: 90em) {
  .logo-list__icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}
.logo-list__text {
  color: var(--color-black);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
}
.logo-list button {
  border-style: none;
}

.password-guidelines {
  margin: 4rem 0;
}
.password-guidelines__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.password-guidelines__item {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: var(--color-text);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
}
@media only screen and (max-width: 90em) {
  .password-guidelines__item {
    font-size: 1.4rem;
  }
}
.password-guidelines__item.invalid span {
  color: #BF3838;
}
.password-guidelines__icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin-right: 8px;
  fill: var(--color-scrollbar);
}
.password-guidelines__icon.success {
  /*fill: var(--color-accent);*/
  /*  fill: #2a686b;*/
  fill: #2eb10a;
}

.sign-in__container {
  width: 100vw;
  min-height: calc(100vh - 6rem);
  position: relative;
  overflow-x: hidden;
}
@media only screen and (max-width: 90em) {
  .sign-in__container {
    min-height: calc(100vh - 4.5rem);
  }
}
.sign-in__pages {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(100%);
}

.g-authenticator {
  border-radius: 0.6rem;
  align-items: center;
  display: flex;
}
.g-authenticator__box {
  border-radius: 20px;
  background: var(--or-btn);
  padding: 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.g-authenticator__box img {
  width: 1.9rem;
  height: 2rem;
}
.g-authenticator__head {
  color: var(--color-black);
  font-size: 1.7rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.17px;
}
@media only screen and (max-width: 90em) {
  .g-authenticator__head {
    font-size: 1.4rem;
  }
}
.g-authenticator__desc {
  color: var(--color-black);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
}

.help-area {
  margin-top: 1rem;
}
.help-area__head {
  color: var(--color-accent);
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: 19px;
}
@media only screen and (max-width: 90em) {
  .help-area__head {
    font-size: 1.4rem;
  }
}
.help-area__text {
  color: var(--color-text);
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
}
.help-area__link {
  color: var(--color-text);
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 12px;
}
.help-area__icon {
  width: 1.5rem;
  height: 1.3rem;
  stroke: var(--color-text);
  margin: 0 0.6rem;
}

.module-card {
  padding: 3.6rem 4rem 3rem;
  border-radius: 1rem;
  background: var(--color-white);
  color: var(--color-accent);
  box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2);
  position: relative;
  z-index: 114;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .module-card {
    padding: 2rem 1rem 2rem;
  }
}
.module-card__head {
  text-align: center;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
@media only screen and (max-width: 90em) {
  .module-card__head {
    font-size: 2rem;
  }
}
.module-card__desc {
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
}
@media only screen and (max-width: 90em) {
  .module-card__desc {
    font-size: 1.3rem;
  }
}
.module-card__icon {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  width: 2.4rem;
  height: 2.4rem;
}
.module-card.active {
  background: var(--color-accent);
  color: var(--color-white);
}

.save-btn {
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-white);
  width: 15rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  border-style: none;
  cursor: pointer;
}

.cancel-btn {
  border-radius: 6px;
  border: 1px solid rgba(91, 91, 91, 0.2);
  width: 15rem;
  height: 5.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  border-style: none;
  cursor: pointer;
}

.button-loader {
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  animation: spin 1s linear infinite;
  margin: 0 20px;
}
.button-loader.green {
  border: 3px solid rgb(41, 79, 82);
  border-top: 3px solid #fff;
}
@media only screen and (max-width: 90em) {
  .button-loader {
    width: 18px;
    height: 18px;
    margin: 0 18px;
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Base styles */
.status-animation {
  position: absolute;
  color: var(--color-accent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Animation */
}
.status-animation__main-div {
  position: relative;
  width: 15rem;
  height: 15rem;
  margin: 0 auto 20px;
}
.status-animation__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: pulse 2s infinite;
  z-index: 1;
}
.status-animation__circle:nth-child(2) {
  width: 80%;
  height: 80%;
  background: #b4d6d6;
  animation-delay: 0.1s;
}
.status-animation__circle:nth-child(2).failed {
  background-color: #e43737;
}
.status-animation__circle:nth-child(2).pending {
  background-color: #dbad16;
}
.status-animation__circle:nth-child(2).success {
  background-color: #11787e;
}
.status-animation__circle.failed {
  background-color: #e65252;
}
.status-animation__circle.pending {
  background-color: #e6bc34;
}
.status-animation__circle.success {
  background-color: #0f6a6e;
}
.status-animation__circleone {
  width: 50%;
  height: 50%;
  background: #D32F2F;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 11;
}
.status-animation__circleone.failed {
  background: #D32F2F;
}
.status-animation__circleone.pending {
  background-color: #D2A204;
}
.status-animation__circleone.success {
  background-color: #2A686B;
}
.status-animation__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  stroke: var(--color-white);
  z-index: 21;
}
.status-animation__icon.failed {
  stroke: unset;
  width: 80px;
  height: 80px;
}
.status-animation__icon.success {
  stroke: unset;
  width: 80px;
  height: 80px;
}
.status-animation__heading {
  color: var(--Woodsmoke-950, #0E0E11);
  text-align: center;
  font-size: 2rem;
  font-style: normal;
  font-weight: 700;
}
@media only screen and (max-width: 90em) {
  .status-animation__heading {
    font-size: 2rem;
  }
}
@keyframes pulse {
  50% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.status-animation__main-text {
  text-align: center;
  font-size: 2.8rem;
  font-style: normal;
  font-weight: 600;
}
.status-animation__main-text.failed {
  color: #D32F2F;
}
.status-animation__main-text.pending {
  color: #D2A204;
}
.status-animation__main-text.success {
  color: var(--color-accent);
}
.status-animation__desc {
  color: #595A70;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.status-animation__sml-head {
  color: #595A70;
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0.6rem;
}
.status-animation__sm-desc {
  color: #595A70;
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 0.6rem;
}

/* Base styles */
.subscription-success {
  position: absolute;
  color: var(--color-accent);
  top: 50%;
  left: 56%;
  transform: translate(-50%, -50%);
  /* Animation */
}
.subscription-success.success {
  left: 50%;
}
.subscription-success__icon {
  position: relative;
  width: 15rem;
  height: 15rem;
  margin: 0 auto 20px;
}
@media only screen and (max-width: 90em) {
  .subscription-success {
    top: 55%;
    left: 57%;
  }
}
@media only screen and (max-width: 75em) {
  .subscription-success {
    top: 70%;
    left: 50%;
  }
}
.subscription-success__circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #d9ecec;
  animation: pulse 2s infinite;
  z-index: 1;
}
.subscription-success__circle:nth-child(2) {
  width: 80%;
  height: 80%;
  background: #b4d6d6;
  animation-delay: 0.1s;
}
.subscription-success__circleone {
  width: 50%;
  height: 50%;
  background: #6d9f9f;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 11;
}
.subscription-success__check {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  stroke: var(--color-white);
  z-index: 21;
}
.subscription-success__404image {
  width: 9.8rem;
  height: 8.8rem;
  margin-bottom: 5.6rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  object-fit: contain;
  margin-bottom: 0.6rem;
}
@media only screen and (max-width: 90em) {
  .subscription-success__404image {
    width: 4rem;
    height: 4rem;
    margin-bottom: 0.6rem;
  }
}
.subscription-success__heading {
  color: var(--color-accent);
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .subscription-success__heading {
    font-size: 2rem;
  }
}
@keyframes pulse {
  50% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.subscription-success__check-icon {
  width: 8rem;
  height: 8rem;
  margin-bottom: 2rem;
}
.subscription-success__check-icon-sm {
  width: 6rem;
  height: 6rem;
  margin-bottom: 2rem;
}
.subscription-success__message {
  color: #595A70;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}
.subscription-success__heading {
  color: var(--color-accent);
  font-size: 2.8rem;
  font-style: normal;
  font-weight: 600;
}

.success-progress__container {
  /*width: 58rem;*/
  margin: 0 auto;
}
.success-progress__text {
  color: #595A70;
  text-align: center;
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 1rem;
}
.success-progress__bar-bg {
  /*width: 100%;*/
  width: 65rem;
  height: 0.4rem;
  background-color: #e2e2e2;
  border-radius: 4px;
  overflow: hidden;
}
.success-progress__bar-fill {
  height: 100%;
  width: 0%;
  background-color: var(--color-accent);
  transition: width 0.4s ease-in-out;
}

.loading-text {
  color: #595A70;
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}
.loading-text::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #4c8080;
  border-top: 2px solid transparent;
  border-radius: 50%;
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.proceed-payment-modal__head {
  color: var(--color-accent);
  font-size: 2.8rem;
  font-style: normal;
  font-weight: 600;
}
@media only screen and (max-width: 90em) {
  .proceed-payment-modal__head {
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .proceed-payment-modal__head {
    font-size: 2.6rem;
  }
}
.proceed-payment-modal__desc {
  color: var(--color-secondary);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}
.proceed-payment-modal__box {
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  background: var(--btn-background);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);
  padding: 2.5rem 5rem;
}
@media only screen and (max-width: 90em) {
  .proceed-payment-modal__box {
    padding: 2rem 3rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .proceed-payment-modal__box {
    padding: 1.6rem 2rem;
  }
}
.proceed-payment-modal__box--head {
  color: var(--color-accent);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}
@media only screen and (max-width: 90em) {
  .proceed-payment-modal__box--head {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .proceed-payment-modal__box--head {
    font-size: 2rem;
  }
}
.proceed-payment-modal__box--amount {
  color: #373843;
  font-size: 4rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}
@media only screen and (max-width: 90em) {
  .proceed-payment-modal__box--amount {
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .proceed-payment-modal__box--amount {
    font-size: 2.8rem;
  }
}
.proceed-payment-modal__box--amount span {
  color: var(--color-line);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 700;
}
@media only screen and (max-width: 90em) {
  .proceed-payment-modal__box--amount span {
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .proceed-payment-modal__box--amount span {
    font-size: 2.4rem;
  }
}
.proceed-payment-modal__box--desc {
  color: #717171;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.proceed-payment-modal__box--btn {
  border-radius: 6px;
  border: 1px solid var(--color-accent);
  color: #255455;
  font-size: 1.6rem;
  font-style: normal;
  line-height: normal;
  padding: 1rem 1.2rem;
  background-color: transparent;
  margin: 2rem 0;
}
.proceed-payment-modal__box--details {
  color: #595A70;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.proceed-payment-modal__box--pay-btn {
  border-radius: 6px;
  background: var(--color-accent);
  width: 100%;
  padding: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border-style: none;
  margin-top: 3.5rem;
  cursor: pointer;
}

.cus-subscription__container {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px;
  margin-top: 4.5rem;
  margin-bottom: 5rem;
}
@media only screen and (max-width: 106em) {
  .cus-subscription__container {
    max-width: 1540px;
  }
}
@media only screen and (max-width: 100em) {
  .cus-subscription__container {
    max-width: 1400px;
    margin-top: 3rem;
  }
}
@media only screen and (max-width: 90em) {
  .cus-subscription__container {
    max-width: 1300px;
    margin-top: 2.5rem;
  }
}
.cus-subscription__main-head {
  color: var(--color-accent);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
@media only screen and (max-width: 106em) {
  .cus-subscription__main-head {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 100em) {
  .cus-subscription__main-head {
    font-size: 2.8rem;
  }
}
.cus-subscription__description {
  color: #444;
  text-align: center;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 300;
  width: 45%;
  margin: 1rem 0;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__description {
    font-size: 1.6rem;
  }
}
.cus-subscription__tab-trigger .active {
  background-color: #fff;
  color: #2A686B;
}
.cus-subscription__features-container {
  background: var(--color-white);
  overflow-x: auto;
}
.cus-subscription__features-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.5rem;
  background: #F5F7FF;
}
.cus-subscription__features-header--title {
  color: #252430;
  font-size: 2.2rem;
  font-style: normal;
  font-weight: 500;
  margin-top: 1rem;
}
.cus-subscription__pricing-header {
  border-radius: 1.5rem;
  background: #F5F7FF;
  padding: 3rem 2rem;
  position: relative;
  border-radius: 15px;
  border: 1px solid #E6E9F5;
}
.cus-subscription__pricing-header .plan-name {
  color: #000;
  font-size: 2.6rem;
  font-style: normal;
  font-weight: 400;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__pricing-header .plan-name {
    font-size: 2.2rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__pricing-header .plan-name {
    font-size: 2rem;
  }
}
.cus-subscription__pricing-header .plan-subtitle {
  color: #444;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
  margin-bottom: 2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4rem;
}
.cus-subscription__pricing-header .price {
  color: var(--color-accent);
  font-size: 3.2rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__pricing-header .price {
    font-size: 2.8rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__pricing-header .price {
    font-size: 2.6rem;
  }
}
.cus-subscription__pricing-header .old-price {
  text-decoration: line-through;
  color: #C8C8C8;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__pricing-header .old-price {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__pricing-header .old-price {
    font-size: 1.5rem;
  }
}
.cus-subscription__pricing-header .price-period {
  color: #868484;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 300;
  margin-left: 0.6rem;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__pricing-header .price-period {
    font-size: 1.3rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__pricing-header .price-period {
    font-size: 1.2rem;
  }
}
.cus-subscription__pricing-header .billing-info {
  color: #444;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__pricing-header .billing-info {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__pricing-header .billing-info {
    font-size: 1.2rem;
  }
}
.cus-subscription__pricing-header .popular-badge {
  border-radius: 0.8rem;
  background: var(--color-white);
  box-shadow: 0px 4px 10px 0px rgba(74, 74, 74, 0.05);
  color: var(--color-accent);
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  padding: 1rem 1.7rem;
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__pricing-header .popular-badge {
    font-size: 1.2rem;
    padding: 0.8rem 1.5rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__pricing-header .popular-badge {
    font-size: 1.1rem;
    padding: 0.8rem 1.4rem;
  }
}
.cus-subscription__btn {
  border-radius: 0.6rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  display: flex;
  width: 100%;
  height: 5rem;
  padding: 8px 18px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-style: none;
  transition: 0.3s ease-in-out all;
  cursor: pointer;
}
.cus-subscription__btn:hover {
  background-color: #074bc2;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__btn {
    font-size: 1.4rem;
    height: 4.5rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__btn {
    height: 4.5rem;
    font-size: 1.3rem;
  }
}
.cus-subscription__btn.active {
  /*background: linear-gradient(166deg, #41b3b3, #01124c);*/
  /*background: linear-gradient(19deg, #54a94a, #00542e);*/
  background: var(--popular-green);
  pointer-events: auto;
  cursor: default;
}
.cus-subscription__feature-row {
  display: grid;
  grid-template-columns: 300px 360px 360px 360px;
  gap: 2rem;
  min-height: 80px;
}
.cus-subscription__feature-row .feature-name {
  color: #252430;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 0.2rem;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__feature-row .feature-name {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__feature-row .feature-name {
    font-size: 1.4rem;
  }
}
.cus-subscription__feature-row .feature-desc {
  color: #444;
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__feature-row .feature-desc {
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__feature-row .feature-desc {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 106em) {
  .cus-subscription__feature-row {
    grid-template-columns: 280px 330px 330px 330px;
  }
}
@media only screen and (max-width: 100em) {
  .cus-subscription__feature-row {
    grid-template-columns: 260px 320px 320px 320px;
  }
}
@media only screen and (max-width: 90em) {
  .cus-subscription__feature-row {
    grid-template-columns: 240px 300px 300px 300px;
  }
}
.cus-subscription__feature-cell {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  color: #252430;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 400;
  border-bottom: 1px solid #E6E9F5;
}
.cus-subscription__feature-cell.cus-subscription____bg-gray {
  background-color: #F5F7FF;
}
@media only screen and (max-width: 90em) {
  .cus-subscription__feature-cell {
    font-size: 1.4rem;
  }
}
@media only screen and (max-width: 85.37em) {
  .cus-subscription__feature-cell {
    font-size: 1.3rem;
  }
}
.cus-subscription__icon {
  width: 2.4rem;
  height: 2.4rem;
}
.cus-subscription__header-row {
  display: grid;
  grid-template-columns: 300px 360px 360px 360px;
  gap: 2rem;
  margin-bottom: 2rem;
}
@media only screen and (max-width: 106em) {
  .cus-subscription__header-row {
    grid-template-columns: 280px 330px 330px 330px;
  }
}
@media only screen and (max-width: 100em) {
  .cus-subscription__header-row {
    grid-template-columns: 260px 320px 320px 320px;
  }
}
@media only screen and (max-width: 90em) {
  .cus-subscription__header-row {
    grid-template-columns: 240px 300px 300px 300px;
  }
}
.cus-subscription__table {
  border: 1px solid #E6E9F5;
  border-radius: 1.5rem;
  width: fit-content;
}
.cus-subscription__main-container {
  display: flex;
  justify-content: center;
}
.cus-subscription__toggle-btns {
  background-color: var(--background-tab);
  padding: 0.4rem;
  border-radius: 2rem;
}
.cus-subscription__toggle-btn {
  position: relative;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 2rem;
  color: var(--color-text);
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
  cursor: pointer;
  background: none;
  transition: all 0.3s ease;
}
.cus-subscription__toggle-btn.active {
  background-color: var(--color-white);
  color: var(--color-accent);
  font-size: 1.6rem;
  font-style: normal;
}
.cus-subscription__modal {
  width: 55rem;
  padding: 2rem;
  border-radius: 0.6rem;
  border: 0.6px solid rgba(0, 0, 0, 0.15);
  background: var(--color-white);
}

.swap-lead-accordion {
  border-radius: 6px;
  background: #fff;
}
.swap-lead-accordion__item {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.swap-lead-accordion__item.open .swap-lead-accordion__body {
  max-height: 150px;
  padding: 5px 15px;
}
.swap-lead-accordion__item.open .swap-lead-accordion__icon {
  transform: rotate(180deg);
}
.swap-lead-accordion__item.open .swap-lead-accordion__header {
  border-bottom: 1px solid #E5E7EB;
}
.swap-lead-accordion__header {
  padding: 1rem 0.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #48495C;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
}
.swap-lead-accordion__header:hover {
  background: #f5f5f5;
}
.swap-lead-accordion__icon {
  transition: transform 0.5s;
  width: 1.5rem;
  height: 1.4rem;
  stroke: #595A70;
}
.swap-lead-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: all ease-in-out 0.3s;
  padding: 0 15px;
}
.swap-lead-accordion__body--status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #E5E7EB;
  background: #F3FAF9;
  border-radius: 4px;
  padding: 5px;
  color: #6E7189;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 1rem;
}
.swap-lead-accordion__body--status .accordion__stat {
  width: 50%;
  display: flex;
  align-items: center;
}
.swap-lead-accordion__body--status .accordion__stat strong {
  color: #373843;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  margin-left: 0.3rem;
}
.swap-lead-accordion__body--status .accordion__stat .dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: #2A686B;
  display: block;
  margin-right: 0.4rem;
}
.swap-lead-accordion__body--checkboxes {
  display: flex;
  flex-direction: column;
  color: #48495C;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
}
.swap-lead-accordion__body--checkboxes .accordion__checkbox {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  margin-left: 3rem;
}
.swap-lead-accordion__body--checkboxes .accordion__checkbox .custom-checkbox {
  margin-right: 1rem;
}

.swap-lead-dropdown {
  position: relative;
  margin-bottom: 2rem;
}
.swap-lead-dropdown__header {
  background: #fff;
  padding: 0 0 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #E5E7EB;
}
.swap-lead-dropdown__header--user-icon {
  width: 2.2rem;
  height: 1.8rem;
  stroke: #505050;
}
.swap-lead-dropdown__header .info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.swap-lead-dropdown__header .info.placeholder .avatar-placeholder {
  width: 4rem;
  height: 4rem;
  background: #ddd;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swap-lead-dropdown__header .info.placeholder .text .name {
  color: #999;
  font-weight: normal;
}
.swap-lead-dropdown__header .info img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
}
.swap-lead-dropdown__header .info .text {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.swap-lead-dropdown__header .info .text .name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}
.swap-lead-dropdown__header .info .text .title {
  color: #777;
  font-size: 13px;
}
.swap-lead-dropdown__header .info .text .email {
  color: #999;
  font-size: 12px;
}
.swap-lead-dropdown__header .arrow {
  transition: transform 0.3s ease;
  font-size: 14px;
}
.swap-lead-dropdown.open .swap-lead-dropdown__header .arrow {
  transform: rotate(180deg);
}
.swap-lead-dropdown.open .swap-lead-dropdown__menu {
  max-height: 400px;
}
.swap-lead-dropdown__menu {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 11;
  background: #fff;
  border-radius: 8px;
  margin-top: 8px;
  max-height: 0;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: max-height 0.3s ease;
}
.swap-lead-dropdown__search-box {
  display: flex;
  align-items: center;
  padding: 2rem 1.5rem 1.4rem;
}
.swap-lead-dropdown__search-box input {
  width: 100%;
  border-style: none;
  font-size: 14px;
  outline: none;
}
.swap-lead-dropdown__search-icon {
  width: 2rem;
  height: 1.6rem;
  stroke: #6E7189;
}
.swap-lead-dropdown__list {
  height: 28rem;
  overflow-y: auto;
}
.swap-lead-dropdown__list::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  background-color: transparent;
  border-radius: 0.3rem;
}
.swap-lead-dropdown__list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 0.3rem;
}
.swap-lead-dropdown .user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
}
.swap-lead-dropdown .user-item:hover {
  background: #f0f0f0;
}
.swap-lead-dropdown .user-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.swap-lead-dropdown .user-item .text {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  flex-grow: 1;
}
.swap-lead-dropdown .user-item .text .name {
  font-weight: bold;
}
.swap-lead-dropdown .user-item .text .title {
  color: #777;
  font-size: 12px;
}
.swap-lead-dropdown .user-item .text .email {
  color: #999;
  font-size: 12px;
}
.swap-lead-dropdown .user-item .checkmark {
  color: #4CAF50;
  font-weight: bold;
  font-size: 18px;
}
.swap-lead-dropdown__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #B5B6C4;
}
.swap-lead-dropdown__selected-icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: #040919;
}

.transfer-leads__labels {
  color: #595A70;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  margin-bottom: 1rem;
  display: block;
}
.transfer-leads__profile-img {
  min-width: 4rem;
  min-height: 4rem;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
}
.transfer-leads__name {
  color: #48495C;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 600;
  width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer-leads__user {
  /*        display: flex;
  align-items: flex-end;*/
  padding-bottom: 1rem;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 2rem;
}
.transfer-leads__details {
  color: #6E7189;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}
.transfer-leads__details.lead-email {
  width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer-leads__details.lead-email-dropdown {
  width: 35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer-leads__details.lead-designation {
  width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer-leads__status-dot {
  min-width: 0.6rem;
  min-height: 0.6rem;
  display: inline-block;
  border-radius: 50%;
  margin-right: 4px;
}
.transfer-leads__status-dot.deactivated {
  background: #BF3838;
}
.transfer-leads__status-dot.activated {
  background: #79b10b;
}
.transfer-leads__summary-box {
  border-radius: 6px;
  border: 1px solid #B8DAFF;
  background: #CCE5FF;
  padding: 1.6rem;
  margin: 1rem 0 2rem;
  display: none;
  height: 12rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.transfer-leads__summary-box::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.8rem;
  background-color: var(--color-scrollbar);
  border-radius: 1.5rem;
}
.transfer-leads__summary-box::-webkit-scrollbar-thumb {
  background: var(--color-scrollthumb);
  border-radius: 1.5rem;
}
.transfer-leads__summary-box--icon {
  width: 3.8rem;
  height: 1.8rem;
  stroke: #084298;
}
.transfer-leads__summary-box--head {
  color: #004085;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 600;
}
.transfer-leads__summary-box--desc {
  color: #2F4A66;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
}

.payment-details-box {
  position: absolute;
  right: -16px;
  top: -4px;
}
.payment-details-box__container {
  position: relative;
  display: inline-block;
}
.payment-details-box__container:hover .payment-details-box__ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.payment-details-box__icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #717171;
  cursor: pointer;
}
.payment-details-box__ul {
  position: absolute;
  bottom: 20px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  list-style: none;
  min-width: 250px;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}
.payment-details-box__ul li {
  margin-bottom: 0.4rem;
  font-size: 1.2rem;
  color: #333;
  white-space: nowrap;
}
.payment-details-box__ul li:last-child {
  margin-bottom: 0;
}

.cus-subscritpiton-box {
  border-radius: 1.6rem;
  background: var(--color-white);
  box-shadow: 0 8px 24px 0 rgba(149, 157, 165, 0.2);
  padding: 2rem 3.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cus-subscritpiton-box__icon-box {
  position: relative;
}
.cus-subscritpiton-box__icon-box img {
  position: absolute;
  width: 20px;
  animation: twinkle 2s infinite ease-in-out;
}
.cus-subscritpiton-box__icon-box img:nth-child(1) {
  top: -15px;
  left: -10px;
  animation-delay: 0s;
}
.cus-subscritpiton-box__icon-box img:nth-child(2) {
  top: 0px;
  right: -15px;
  animation-delay: 0.5s;
}
.cus-subscritpiton-box__icon-box img:nth-child(3) {
  top: 5px;
  left: -20px;
  animation-delay: 1s;
}
.cus-subscritpiton-box__icon-box img:nth-child(4) {
  top: -25px;
  right: 15px;
  animation-delay: 1.5s;
}
.cus-subscritpiton-box__icon-check {
  width: 6.4rem;
  height: 6.4rem;
}
.cus-subscritpiton-box__head {
  color: var(--color-accent);
  text-align: center;
  font-family: "DM Sans";
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.cus-subscritpiton-box__desc {
  color: #373843;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  max-width: 61rem;
}
.cus-subscritpiton-box__desc a {
  color: var(--color-accent);
}
.cus-subscritpiton-box__cart-icon {
  width: 1.6rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.cus-subscritpiton-box__pin-icon {
  width: 1.2rem;
  height: 1.3rem;
  margin-right: 0.4rem;
}
.cus-subscritpiton-box__text {
  color: #595A70;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.cus-subscritpiton-box__lite {
  color: #8C8EA4;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.cus-subscritpiton-box__loading-text {
  color: #8C8EA4;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}
.cus-subscritpiton-box__loading-text::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-accent);
  border-top: 2px solid transparent;
  border-radius: 50%;
  margin-right: 8px;
  animation: spin 1s linear infinite;
}
.cus-subscritpiton-box__loading-percentage {
  color: #8C8EA4;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.cus-subscritpiton-box__lg-btn {
  border-radius: 6px;
  background: var(--color-accent);
  display: flex;
  width: 30rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  transition: 0.2s ease-in all;
}
.cus-subscritpiton-box__lg-btn:hover {
  background-color: var(--color-text-hover);
}

/* Keyframes for twinkling movement */
@keyframes twinkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.2) rotate(180deg);
  }
}
/*********Flex*************/
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-none {
  display: none;
}

.flex-column {
  flex-direction: column;
}

.justify-content-end {
  justify-content: end;
}

.justify-content-center {
  justify-content: center;
}

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

.justify-content-start {
  justify-content: flex-start;
}

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

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

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-content-start {
  align-content: flex-start;
}

.align-content-end {
  align-content: flex-end;
}

.align-content-center {
  align-content: center;
}

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

.align-content-around {
  align-content: space-around;
}

.align-items-center {
  align-items: center;
}

.d-block {
  display: block;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

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

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: center;
}

.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-auto {
  width: auto !important;
}

.w-100 {
  width: 100%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-40 {
  width: 40%;
}

.w-10 {
  width: 10%;
}

.m-2 {
  margin: 2rem;
}

.mr-1 {
  margin-right: 0.4rem;
}

.mr-2 {
  margin-right: 0.8rem;
}

.mr-3 {
  margin-right: 1.2rem;
}

.mr-4 {
  margin-right: 1.6rem;
}

.mr-5 {
  margin-right: 1.5rem;
}

.mr-6 {
  margin-right: 2rem;
}

.mr-0 {
  margin-right: 0;
}

.ml-1 {
  margin-left: 0.4rem;
}

.ml-2 {
  margin-left: 0.8rem;
}

.ml-3 {
  margin-left: 1.2rem;
}

.ml-4 {
  margin-left: 1.6rem;
}

.ml-5 {
  margin-left: 2rem;
}

.margin-auto {
  margin: auto;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 0.4rem;
}

.mb-2 {
  margin-bottom: 0.8rem;
}

.mb-3 {
  margin-bottom: 1.2rem;
}

.mb-4 {
  margin-bottom: 1.6rem;
}

.mb-5 {
  margin-bottom: 2rem;
}

.mb-6 {
  margin-bottom: 3.2rem;
}

.mb-8 {
  margin-bottom: 1.8rem;
}

.mb-9 {
  margin-bottom: 4.3rem;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 0.4rem;
}

.mt-2 {
  margin-top: 0.8rem;
}

.mt-3 {
  margin-top: 1.2rem;
}

.mt-4 {
  margin-top: 1.6rem;
}

.mt-5 {
  margin-top: 2rem;
}

.mt-6 {
  margin-top: 3.2rem;
}

.mt-8 {
  margin-top: 2.8rem;
}

.mt-20 {
  margin-top: -2rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

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

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

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

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

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

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

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

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

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

.text-left {
  text-align: left;
}

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

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

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

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

.text-wrap {
  white-space: normal;
}

.text-break {
  word-break: break-word;
}

.white-space {
  white-space: pre-line;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.4rem;
}

.p-2 {
  padding: 0.8rem;
}

.p-3 {
  padding: 1.2rem;
}

.p-4 {
  padding: 1.6rem;
}

.p-5 {
  padding: 2rem;
}

.pt-1 {
  padding-top: 0.4rem;
}

.pt-2 {
  padding-top: 0.8rem;
}

.pt-3 {
  padding-top: 1.2rem;
}

.pt-4 {
  padding-top: 1.6rem;
}

.pt-5 {
  padding-top: 2rem;
}

.pb-1 {
  padding-bottom: 0.4rem;
}

.pb-2 {
  padding-bottom: 0.8rem;
}

.pb-3 {
  padding-bottom: 1.2rem;
}

.pb-4 {
  padding-bottom: 1.6rem;
}

.pb-5 {
  padding-bottom: 2rem;
}

.pl-1 {
  padding-left: 0.4rem;
}

.pl-2 {
  padding-left: 0.8rem;
}

.pl-3 {
  padding-left: 1.2rem;
}

.pl-4 {
  padding-left: 1.6rem;
}

.pl-5 {
  padding-left: 2rem;
}

.pl-6 {
  padding-left: 1.6rem;
}

.pr-1 {
  padding-right: 0.4rem;
}

.pr-2 {
  padding-right: 0.8rem;
}

.pr-3 {
  padding-right: 1.2rem;
}

.pr-4 {
  padding-right: 1.6rem;
}

.pr-5 {
  padding-right: 2rem;
}

.pb-5 {
  padding-bottom: 5rem;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

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

.d-table {
  display: table;
}

.d-table-row {
  display: table-row;
}

.d-table-cell {
  display: table-cell;
}

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  padding: 2rem 0;
}

.underline-none {
  text-decoration: none;
}

.container {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(auto-fill, auto);
  background-color: var(--color-background);
}

.container__body {
  grid-column: 1/25;
  min-height: calc(100vh - 21.3rem);
  padding: 0 2.4rem;
}

.main-section {
  grid-column: 5/27;
}
@media only screen and (max-width: 90em) {
  .main-section {
    grid-column: 5/27;
  }
}
@media only screen and (max-width: 75em) {
  .main-section {
    grid-column: 1/27;
  }
}

.main-body {
  min-height: calc(100vh - 11.6rem);
  padding: 1.8rem 3rem;
}
@media only screen and (max-width: 90em) {
  .main-body {
    padding: 1.5rem;
  }
}

.content-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.content-section__left {
  grid-column: 1/5;
  background-color: var(--color-white);
  border-radius: 0.6rem;
  margin-right: 1.8rem;
  padding: 1.6rem;
  border: 0.6px solid var(--color-border-search);
}
@media only screen and (max-width: 90em) {
  .content-section__left {
    grid-column: 1/5;
  }
}
@media only screen and (max-width: 64em) {
  .content-section__left {
    grid-column: 1/25;
    margin-right: 0;
    margin-bottom: 2rem;
  }
}
.content-section__left.user-info {
  grid-column: 1/5;
}
@media only screen and (max-width: 90em) {
  .content-section__left.user-info {
    grid-column: 1/6;
  }
}
@media only screen and (max-width: 64em) {
  .content-section__left.user-info {
    grid-column: 1/25;
    margin-right: 0;
    margin-bottom: 2rem;
  }
}
.content-section__right {
  grid-column: 5/13;
}
@media only screen and (max-width: 90em) {
  .content-section__right {
    grid-column: 5/13;
  }
}
@media only screen and (max-width: 64em) {
  .content-section__right {
    grid-column: 1/25;
  }
}
.content-section__right.user-address {
  grid-column: 5/13;
}
@media only screen and (max-width: 90em) {
  .content-section__right.user-address {
    grid-column: 6/13;
  }
}
@media only screen and (max-width: 64em) {
  .content-section__right.user-address {
    grid-column: 1/25;
  }
}
.content-section__right-section-1 {
  background-color: var(--color-white);
  border-radius: 0.6rem;
  padding: 1.6rem;
  padding-top: 3rem;
  border: 0.6px solid var(--color-border-search);
}
@media only screen and (max-width: 90em) {
  .content-section__right-section-1 {
    padding-top: 2rem;
  }
}
.content-section__right-section-1.section-2 {
  margin-bottom: 2rem;
}

.select-main {
  position: relative;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.show {
  display: flex;
}

.table-container {
  background: var(--color-white);
  overflow-x: hidden;
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
  border-radius: 1rem;
}
.table-container.my-account {
  border: 0;
}

.table-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.8rem 3rem;
  border-radius: 1rem;
  border-radius: 1rem;
  background: #FFF;
  box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
  margin-top: 1rem;
}
@media only screen and (max-width: 90em) {
  .table-top-bar {
    padding: 1rem;
  }
}
@media only screen and (max-width: 75em) {
  .table-top-bar {
    padding: 1.8rem;
  }
}

.table-filters {
  display: flex;
  align-items: center;
}

.clear-all {
  color: var(--color-text);
  font-size: 1.3rem;
  opacity: 0.5;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  border-style: none;
  background-color: transparent;
  text-decoration-line: underline;
  margin-right: 1.6rem;
  white-space: nowrap;
  cursor: pointer;
}

.search-icon {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--color-text);
}

.close-icon-btn {
  stroke: var(--color-text);
  width: 1rem;
  height: 1rem;
}

.table-horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  min-height: calc(100vh - 38rem);
  -webkit-overflow-scrolling: touch;
}
.table-horizontal-scroll.user {
  min-height: calc(100vh - 29rem);
}
@media only screen and (max-width: 90em) {
  .table-horizontal-scroll.user {
    min-height: calc(100vh - 29rem);
  }
}
@media only screen and (max-width: 106em) {
  .table-horizontal-scroll {
    min-height: calc(100vh - 23rem);
  }
}
.table-horizontal-scroll.my-account {
  min-height: calc(100vh - 63rem);
}
.table-horizontal-scroll.subscription-metrics {
  min-height: calc(100vh - 28rem);
}
@media only screen and (max-width: 90em) {
  .table-horizontal-scroll.subscription-metrics {
    min-height: calc(100vh - 22rem);
  }
}
.table-horizontal-scroll::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
  background-color: transparent;
  border-radius: 0.3rem;
}
.table-horizontal-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 0.3rem;
}

.main-table {
  min-width: 100%;
  border-spacing: 0;
  overflow-x: hidden;
}

.kebab-button {
  width: 0.4rem;
  height: 1.1rem;
  fill: var(--color-text-hover);
}

.position-relative {
  position: relative;
}

.nav-close-icon {
  padding: 1.7rem 2.6rem;
  display: none;
}
.nav-close-icon svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  stroke: var(--color-black);
  margin-left: 1.5rem;
}
@media only screen and (max-width: 75em) {
  .nav-close-icon {
    display: block;
  }
}

.emergency-details {
  display: flex;
}
.emergency-details .input-field {
  width: 100% !important;
}
@media only screen and (max-width: 90em) {
  .emergency-details {
    display: block;
  }
}

.center-section {
  background-color: var(--color-white);
  border-radius: 0.6rem;
  border: 0.6px solid var(--color-border-search);
  padding: 3rem;
  min-height: calc(100vh - 31rem);
}
.center-section.height-change {
  min-height: calc(100vh - 20rem);
}
@media only screen and (max-width: 90em) {
  .center-section.height-change {
    min-height: calc(100vh - 13rem);
  }
}
@media only screen and (max-width: 90em) {
  .center-section.overview {
    min-height: calc(100vh - 16rem);
  }
}
@media only screen and (max-width: 90em) {
  .center-section {
    min-height: calc(100vh - 23rem);
    padding: 2rem;
  }
}
.center-section.report-activity {
  padding: 0;
}
@media only screen and (max-width: 90em) {
  .center-section {
    margin-top: 1rem !important;
  }
}

.user-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  border-radius: 16px;
  background: #0AAFE3;
}
@media only screen and (max-width: 90em) {
  .user-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
}

.user-name {
  color: #03140F;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  width: 15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /*white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;*/ /* adjust as needed */
  /*display: inline-block;
  vertical-align: middle;*/
}
@media only screen and (max-width: 90em) {
  .user-name {
    font-size: 1.4rem;
  }
}

.user-icon-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
}
.user-icon-img__img {
  object-fit: cover;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
}

.centered-section {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  padding: 3rem;
  margin-top: 2.5rem;
  min-height: calc(100vh - 22rem);
}
.centered-section.pricing {
  padding: 0;
}

.required-message {
  background-color: var(--btn-background);
  padding: 0.6rem 0.8rem 2rem;
  width: 60rem;
  margin-bottom: 3rem;
}
@media only screen and (max-width: 90em) {
  .required-message {
    margin-bottom: 1rem;
  }
}
.required-message__box {
  background-color: var(--color-hover);
  width: 18rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  padding: 2rem 1rem;
  border-radius: 0.4rem;
  border-radius: 1rem;
}
@media only screen and (max-width: 90em) {
  .required-message__box {
    width: 16rem;
    height: 1rem;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
  }
}
.required-message__box--text {
  color: var(--color-black);
  text-align: center;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.required-message__Ulist {
  padding: 1.5rem 2.8rem;
}
.required-message__list {
  list-style: square;
  color: var(--color-module);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0.6rem;
}
.required-message__icon {
  height: 1.7rem;
  width: 1.7rem;
}

.about-container {
  border: 1px solid var(--color-border-search);
}
.about-container__top {
  padding: 1.8rem;
}

.button-anchor-tag {
  text-decoration: none;
}

.table-lg-text {
  width: 15rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}

.dateicon {
  cursor: pointer;
  stroke: var(--color-text);
  width: 1.3rem;
  height: 1.3rem;
  z-index: 10;
  position: relative;
}
.dateicon.modal-input {
  position: absolute;
  top: 50%;
  right: 1rem;
  stroke: var(--color-line);
}
.dateicon.modal-input-account {
  position: absolute;
  top: 50%;
  right: 1rem;
  stroke: var(--color-line);
  transform: translateY(-50%);
}
@media only screen and (max-width: 90em) {
  .dateicon {
    width: 1rem;
    height: 1rem;
  }
}

.input-main {
  padding: 0 1rem;
  border-radius: 0.8rem;
  background-color: transparent;
  border: 1px solid var(--color-border-search);
  color: var(--color-text);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  height: 3.9rem;
  outline: 0;
  display: flex;
  align-items: center;
  z-index: 15;
  position: relative;
  margin-right: 0.8rem;
  padding-left: 0;
}
@media only screen and (max-width: 90em) {
  .input-main {
    border-radius: 0.3rem;
    height: 2.9rem;
  }
}

/* For Chrome and most Chromium-based browsers */
input:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  -webkit-text-fill-color: var(--color-black) !important;
}

/* Optional for Firefox (autofill is less styled by default) */
input:autofill {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

.table-button {
  color: var(--color-white);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--color-active);
  background-color: var(--color-active);
  border-radius: 0.3rem;
  width: 10rem;
  display: block;
  text-align: center;
  cursor: pointer;
  /* 🟩 New: Transferred Status */
}
@media only screen and (max-width: 90em) {
  .table-button {
    font-size: 1.2rem;
    padding: 0.3rem 1rem;
  }
}
.table-button.active {
  border: 1px solid var(--color-active);
  background-color: var(--color-active);
  padding: 0.6rem 1.5rem;
}
@media only screen and (max-width: 90em) {
  .table-button.active {
    font-size: 1.2rem;
    padding: 0.3rem 1rem;
  }
}
.table-button.inactive {
  background-color: var(--color-inactive);
  border: 1px solid var(--color-inactive);
  padding: 0.6rem 1.5rem;
}
@media only screen and (max-width: 90em) {
  .table-button.inactive {
    font-size: 1.2rem;
    padding: 0.3rem 1rem;
  }
}
.table-button.pending {
  background-color: var(--color-pending);
  border: 1px solid var(--color-pending);
  padding: 0.6rem 1.5rem;
}
@media only screen and (max-width: 90em) {
  .table-button.pending {
    font-size: 1.2rem;
    padding: 0.3rem 1rem;
  }
}
.table-button.transfer {
  background-color: var(--color-transfer);
  border: 1px solid var(--color-transfer);
  padding: 0.6rem 1.5rem;
}
@media only screen and (max-width: 90em) {
  .table-button.transfer {
    font-size: 1.2rem;
    padding: 0.3rem 1rem;
  }
}

.rounded-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.8rem;
  height: 2.8rem;
  background-color: var(--color-accent);
  border-radius: 50%;
}
.rounded-icon__svg {
  width: 1.8rem;
  height: 1.8rem;
  stroke: var(--color-white);
}

.history-table {
  min-height: unset;
}

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

.or-btn {
  margin: 3rem 0;
  text-align: center;
  position: relative;
}
@media only screen and (max-width: 90em) {
  .or-btn {
    margin-bottom: 1.5rem;
  }
}
.or-btn::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--or-btn);
  display: block;
  position: absolute;
  top: 1rem;
}
.or-btn__text {
  background-color: var(--color-white);
  position: relative;
  z-index: 11;
  padding: 0 1rem;
  pointer-events: none;
}

.agree-text {
  color: var(--color-text);
  text-align: center;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}
@media only screen and (max-width: 90em) {
  .agree-text {
    font-size: 1.2rem;
  }
}
.agree-text__link {
  color: var(--color-accent);
  border-style: none;
  background-color: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.gap-10 {
  gap: 1rem;
}

.gap-30 {
  gap: 3rem;
}

.sm-text {
  color: var(--color-paragraph);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
}

.text-large {
  width: 20rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.error-message {
  color: rgb(207, 0, 0);
  font-size: 1.2rem;
  margin-top: -1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: none;
}
@media only screen and (max-width: 90em) {
  .error-message {
    font-size: 1rem;
  }
}
.error-message.my-account {
  margin-top: 0.2rem;
}
.error-message__phone {
  position: absolute;
  bottom: -0.9rem !important;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.gap-4 {
  gap: 4rem;
}

.gap-5 {
  gap: 5rem;
}

.input-box__input.error {
  border-bottom: 1px solid red;
  outline: none;
}

.error-msg {
  color: #cf0000;
  font-size: 12px;
  margin-top: 4px;
  display: block;
  font-weight: 500;
  position: absolute;
  bottom: -16px;
  transition: 0.3s ease-in all;
}

.btn-loader {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.field-validation-valid {
  bottom: -1.6rem;
}

.is-error .error-message {
  display: block;
}

.modal-active {
  margin-left: 0.5rem;
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 500;
}

.pagination__ellipsis {
  padding: 0 0.5rem;
  color: #666;
  font-size: 2.2rem;
  user-select: none;
}

.stars {
  display: inline-flex;
  direction: ltr;
  cursor: pointer;
}

.star {
  font-size: 4rem;
  color: #ddd;
  position: relative;
}
@media only screen and (max-width: 90em) {
  .star {
    font-size: 3rem;
  }
}

.star.full::before,
.star.half::before {
  content: "★";
  position: absolute;
  color: gold;
  left: 0;
  overflow: hidden;
}

.star.full::before {
  width: 100%;
}

.star.half::before {
  width: 50%;
}

/*.js-validation-parent {
  margin-top: 1.6rem;
}*/
.history-main {
  grid-column: 1/25;
  padding: 2rem;
  padding-bottom: 0;
}
@media only screen and (max-width: 90em) {
  .history-main {
    padding: 1rem;
  }
}

.myaccount-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media only screen and (max-width: 90em) {
  .myaccount-form {
    gap: 1rem;
  }
}

.avatar-myaccount {
  position: unset;
  width: 11rem;
  display: flex;
  gap: 0.5rem;
  transform: unset;
}
.avatar-myaccount svg {
  position: unset;
  margin-top: 0.3rem;
  width: 1.2rem;
  height: 1.2rem;
}

.company-detail-img {
  position: absolute;
}

.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.disable-pointer {
  pointer-events: none;
  opacity: 0.5;
}

.custom-checkbox input {
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.6rem;
  width: 1.6rem;
  background-color: #fff;
  border: 1px solid #B5B6C4;
  border-radius: 4px;
}
@media only screen and (max-width: 90em) {
  .custom-checkbox .checkmark {
    top: 50%;
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 3px;
    transform: translateY(-50%);
  }
}

.custom-checkbox input:checked + .checkmark {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media only screen and (max-width: 90em) {
  .custom-checkbox .checkmark::after {
    left: 3px;
    top: 0px;
    width: 4px;
    height: 8px;
  }
}

.custom-checkbox input:checked + .checkmark::after {
  display: block;
}

.currency-company-size-div {
  margin-bottom: 5rem;
}

.lite-text {
  color: var(--color-text);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
}
@media only screen and (max-width: 90em) {
  .lite-text {
    font-size: 1.4rem;
  }
}

.modulesImageSlider {
  margin-top: 4rem;
  padding-bottom: 2.8rem;
  height: fit-content;
  z-index: 114;
}

.swiper-pagination-bullet {
  background-color: var(--color-swiper-dot);
  border: 3px solid var(--color-white);
  width: 1.6rem;
  height: 1.6rem;
  opacity: 1;
  margin: 0 2px !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--color-text-hover);
}

.disabled-btn {
  pointer-events: none;
  opacity: 0.6;
}

.cancel-save-btns {
  margin-top: 4rem;
}

.loader {
  border: 7px solid #f3f3f3;
  border-radius: 50%;
  border-top: 7px solid var(--color-accent);
  width: 4.9rem;
  height: 4.9rem;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.branch-input {
  width: 23rem;
  height: 37px;
}
@media only screen and (max-width: 90em) {
  .branch-input {
    height: 30.5px;
  }
}

.branch-icon {
  top: 52% !important;
}

.custom-button-account {
  width: unset;
}

@media only screen and (max-width: 90em) {
  .input-field {
    margin-top: 0 !important;
  }
}

@media only screen and (max-width: 90em) {
  .inputfield::placeholder {
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 90em) {
  .facebook-link {
    margin-top: 1.4rem !important;
  }
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select {
  margin-top: 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-border-search);
  height: 4.6rem;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  color: var(--color-line);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: 0;
  position: relative;
  background: transparent;
  margin-bottom: 1rem;
}
.custom-select.employee {
  margin-top: 0.5rem;
}
@media only screen and (max-width: 90em) {
  .custom-select.employee {
    margin-top: 0;
  }
}
@media only screen and (max-width: 90em) {
  .custom-select {
    height: 3.3rem;
    font-size: 1.2rem;
  }
}

.custom-select__selected {
  color: var(--color-black);
  padding: 8px;
  user-select: none;
  padding-top: 1.1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 100%;
}
.custom-select__selected.placeholder {
  color: var(--color-line);
}
@media only screen and (max-width: 90em) {
  .custom-select__selected {
    padding-top: 0.7rem;
  }
}
.custom-select__selected.user-page {
  padding-top: 1.1rem;
}
@media only screen and (max-width: 90em) {
  .custom-select__selected.user-page {
    padding-top: 0.7rem;
  }
}
@media only screen and (max-width: 90em) {
  .custom-select__selected {
    padding: 6px;
  }
}

.account-page {
  padding: 0;
  height: 3.8rem;
}
@media only screen and (max-width: 90em) {
  .account-page {
    height: 3rem !important;
  }
}

.custom-select__options {
  display: none;
  width: 100%;
  max-height: 200px;
  position: absolute;
  top: 115%;
  right: 0;
  z-index: 1000;
  border-radius: 1rem;
  background: var(--color-white);
  box-shadow: 0px 5px 10px 0px rgba(13, 15, 18, 0.15);
  padding: 0.2rem;
  max-height: 24rem;
  overflow-y: auto;
}

.custom-select.open .custom-select__options {
  display: block;
  border: 1px solid var(--color-border-search);
}

.custom-select__search {
  width: 100%;
  padding: 8px;
  border: none;
  border-bottom: 1px solid var(--color-border-search);
  box-sizing: border-box;
  outline: 0;
}

.custom-select__option {
  padding: 10px;
  cursor: pointer;
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  color: var(--color-text);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media only screen and (max-width: 90em) {
  .custom-select__option {
    padding: 6px;
    font-size: 1.2rem;
  }
}

.custom-select__option:hover {
  background-color: #f0f0f0;
}

.usermanagement-select {
  padding: 0;
  padding-top: 4px;
}
@media only screen and (max-width: 90em) {
  .usermanagement-select {
    padding-top: 2px;
  }
}

.deactivate-class {
  background-color: var(--color-error-light);
  border: 1px solid var(--color-error-light);
  color: var(--color-white);
}
.deactivate-class:hover {
  border: 1px solid var(--color-error-light);
  color: var(--color-white);
}

.activate-class {
  background-color: #2a686b;
  color: var(--color-white);
  border-color: #2a686b;
}
.activate-class:hover {
  transition: 0.3s;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border: 1px solid #0a4447;
  color: #e7e9e9;
  background: #0a4447;
}

.form__label-counter {
  color: red;
}

.count {
  background: var(--color-accent) !important;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: var(--color-white);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -0.9rem;
  top: -1.4rem;
}

.import-dropdown__menu {
  display: none;
}

.import-dropdown__menu.show {
  display: block;
}

.country-code-select {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 9.1rem;
}
@media only screen and (max-width: 90em) {
  .country-code-select {
    width: 8.1rem;
  }
}
.country-code-select .input-select__select.phonenumber {
  width: 8.5rem;
}

.custom-date-angledown {
  left: 5.5rem !important;
  top: 2.5rem !important;
}
@media only screen and (max-width: 90em) {
  .custom-date-angledown {
    left: 5rem !important;
    top: 1.5rem !important;
  }
}

.employee-custom-select {
  width: 8.5rem;
  height: 4.4rem;
}
@media only screen and (max-width: 90em) {
  .employee-custom-select {
    width: 7rem;
  }
}

.select-box-ellipsis {
  width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
@media only screen and (max-width: 90em) {
  .select-box-ellipsis {
    width: 100%;
  }
}

.home-img-label {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-section);
  font-size: 2rem;
  font-weight: 500;
}

.my-account-select {
  height: 4rem;
  margin-top: 0 !important;
}
@media only screen and (max-width: 90em) {
  .my-account-select {
    width: 5.4rem;
  }
}
.my-account-select .custom-select__selected {
  padding-top: 0.8rem;
}

.custom-fied-myaccount {
  height: 4rem;
  margin-top: 0.5rem;
}

.custom-date-angledown-my-account {
  left: 5rem !important;
  top: 1.8rem !important;
}
@media only screen and (max-width: 90em) {
  .custom-date-angledown-my-account {
    left: 4rem !important;
    top: 1.8rem !important;
  }
}

.my-account-select-main {
  margin-top: 0.8rem;
}

.authentication-main {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.g-authenticator-main {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  align-items: center;
  margin: 0 0 2rem;
}

.qr-img img {
  width: 13rem;
  height: 12rem;
}
@media only screen and (max-width: 90em) {
  .qr-img img {
    width: 11rem;
    height: 10rem;
  }
}

.authetication-otp-main {
  color: var(--color-black);
  font-size: 1.5rem;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media only screen and (max-width: 90em) {
  .authetication-otp-main {
    font-size: 1.3rem;
  }
}

.authetication-sub-text {
  color: var(--color-black);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
}

.otp-qr-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.success-page {
  left: 50%;
}

.items-per-page {
  position: relative;
  appearance: none;
  padding: 0.5rem 2.3rem 0.5rem 0.8rem;
  cursor: pointer;
  font-size: 1.4rem;
  background: var(--table-container);
  outline: none;
  border-radius: 0.5rem;
  border: 1px solid var(--color-text);
  opacity: 0.6;
  color: var(--color-text);
}
@media only screen and (max-width: 90em) {
  .items-per-page {
    padding: 0.4rem 2rem 0.5rem 0.8rem;
    font-size: 1.3rem;
    color: var(--color-text);
  }
}
.items-per-page.users-select {
  background: #E5E8F2;
}

.input-disabled-class {
  background-color: var(--color-light-hover);
}

.ellipsis {
  text-overflow: ellipsis;
}

.disable-input-selector {
  pointer-events: none;
  background-color: var(--color-light-hover);
}
.disable-input-selector .input-select__icon {
  display: none;
}

.input-disabled-class {
  background-color: var(--color-light-hover);
  cursor: default;
}

.table-xlg-text {
  width: 25rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}

.table-xxlg-text {
  width: 35rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}

.select-phone-code {
  display: flex;
}
.select-phone-code .custom-select-wrapper {
  width: fit-content;
  min-width: 15rem;
  margin-right: 1rem;
}
.select-phone-code .custom-select__selected {
  white-space: nowrap;
}

.edit-company-name {
  cursor: text;
  text-overflow: unset;
}

.w-0 {
  width: 0;
}

.pt-8 {
  padding-top: 0.8rem;
}

.user-management-table {
  position: relative;
}
.user-management-table .subscription-success {
  left: 50% !important;
}

.disabled-dropdown {
  pointer-events: none;
  opacity: 0.6;
  background: #f5f5f5;
  cursor: not-allowed;
}

.center-section {
  background-color: var(--color-white);
  border-radius: 0.6rem;
  border: 0.6px solid var(--color-border-search);
  padding: 3rem;
  min-height: calc(100vh - 31rem);
}
.center-section.height-change {
  min-height: calc(100vh - 20rem);
}
@media only screen and (max-width: 90em) {
  .center-section.height-change {
    min-height: calc(100vh - 13rem);
  }
}
@media only screen and (max-width: 90em) {
  .center-section.overview {
    min-height: calc(100vh - 15.5rem);
  }
}
@media only screen and (max-width: 90em) {
  .center-section {
    min-height: calc(100vh - 23rem);
    padding: 2rem;
  }
}
.center-section.report-activity {
  padding: 0;
}
@media only screen and (max-width: 90em) {
  .center-section {
    margin-top: 1rem !important;
  }
}

.content-end {
  justify-content: end;
}

.profile-img-error {
  position: absolute;
  bottom: -2rem;
}

.disable-input-selector .employee-profile__heading {
  border-style: none;
}

.no-data-container__heading {
  color: var(--color-accent);
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
}
@media only screen and (max-width: 90em) {
  .no-data-container__heading {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 75em) {
  .no-data-container__heading {
    font-size: 1.4rem;
  }
}

.opacity-6 {
  opacity: 0.6;
}

.border-none {
  border-style: none;
}

.filter-dropdown-nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  color: var(--color-black);
}

.placeholder-color {
  color: var(--color-line);
}

.clear-dob-btn {
  position: absolute;
  top: 38px;
  right: 34px;
  background: none;
  border: none;
  font-size: 16px;
  color: #999;
  cursor: pointer;
  z-index: 10;
}

.clear-dob-btn:hover {
  color: #d00;
}

.save-edit-btn {
  display: flex;
  align-items: center;
}

.permission-modal-button.active {
  background-color: var(--color-accent); /* Example: Bootstrap primary */
  color: #fff;
}

.text-large-ellipsis {
  width: 56rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}

.table-md-text {
  width: 8rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}

.table-sm-text {
  width: 5rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}

.table-xxxlg-text {
  width: 50rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  display: block;
}

.mw-0 {
  min-width: 0;
}

.sign-in-error {
  bottom: -7px;
}

.custom-select__no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3rem 0;
}

.custom-select__no-data-img {
  width: 6rem;
  margin-bottom: 1rem;
}

.custom-select__no-data-text {
  font-size: 1.4rem;
  color: var(--color-black);
}

.country-code-select-account {
  width: 12rem;
}

.employee-profile__heading.account-pg {
  width: 32rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.bottom-0 {
  bottom: 0px;
}

.flex-1 {
  flex: 1;
}

@media only screen and (max-width: 90em) {
  .currency-field {
    margin-top: 0 !important;
  }
}

.crm-bold-amount {
  font-weight: 800;
  font-size: 1.8rem;
}

.subscription-text-staus {
  padding: 0.7rem;
  border-radius: 1rem;
  color: white;
  font-size: 1.1rem;
  letter-spacing: 1px;
}
.subscription-text-staus.pending {
  background-color: var(--color-warning-light);
}
.subscription-text-staus.completed {
  background-color: var(--color-toaster-succes);
}
.subscription-text-staus.expired {
  background-color: var(--color-toaster-error);
}

.expired-mfa {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.expired-mfa__circle {
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: rgb(233, 237, 252);
  display: flex;
  justify-content: center;
  align-items: center;
}
.expired-mfa__img {
  width: 12rem;
  height: 12rem;
}
.expired-mfa__button {
  min-width: 25rem;
  display: flex;
  justify-content: center;
}
.expired-mfa__vector {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
}
.expired-mfa__footer {
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.no-data-swap-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.no-data-swap-content img {
  width: 60px !important;
  height: 60px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

.text-nowrap {
  white-space: nowrap;
}

.empty-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.empty-page__img {
  width: 30rem;
  height: auto;
}
.empty-page__heading {
  color: #0E0E11;
  text-align: center;
  font-size: 2.6rem;
  font-style: normal;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.empty-page__message {
  color: #3E3E4E;
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  margin-bottom: 2rem;
}

.pointer-header {
  cursor: pointer;
}

.bottom-min-3 {
  bottom: -3px;
}

.bg-red {
  background-color: var(--bg-red);
}
.bg-red:hover {
  background-color: var(--bg-red);
  opacity: 0.9;
}

.border-red {
  color: var(--bg-red);
  border-color: var(--bg-red);
}
.border-red:hover {
  color: var(--bg-red);
  border-color: var(--bg-red);
  opacity: 0.9;
}

.invoice-history-table {
  position: relative;
  min-height: 30rem;
}

.no-invoice-data {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cus-subscription-success-container {
  min-height: 100vh;
  width: 100%;
  position: relative;
}
.cus-subscription-success-container__logo {
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translate(-50%, -50%);
  width: 10rem;
  z-index: 111;
}

.loader__container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(133, 133, 133, 0.5098039216);
  display: none;
  z-index: 111111;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.loader__container.show {
  display: flex;
}

.subscription-ellipsis-md {
  width: 360px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sub-label-text {
  font-size: 1.4rem !important;
}
.sub-label-text.pending {
  color: #db0707;
}

.billable-amt {
  font-size: 1.6rem !important;
}

.pending-amt {
  font-size: 1.6rem !important;
  color: #db0707;
}

.pending-amt-gap {
  font-size: 1.6rem !important;
}

.custom-selects-label {
  position: absolute;
  font-size: 1.6rem;
  color: var(--color-line);
  background-color: #fff;
  top: 0;
  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
  padding-right: 20px;
  top: 15px;
  font-weight: 400;
}

/* When dropdown is open */
.custom-selects.is-open .custom-selects-label,
.custom-selects.active .custom-selects-label {
  top: -1rem;
  font-size: 1.4rem;
  color: #333;
  font-weight: 400;
}

.sticky-table-data {
  position: sticky;
  right: 0;
  background: #fff !important;
  padding-right: 1rem !important;
}

.sticky-table-head {
  position: sticky;
  right: 0;
  background: #e1e1e1;
}

.bg-popular-green {
  background-color: var(--popular-green);
}
.bg-popular-green:hover {
  background-color: var(--popular-green);
  opacity: 0.9;
}

.retry__icon {
  width: 1.4rem;
  height: 1.4rem;
  stroke: #000;
}

.invoice-regenerate-btn {
  border-style: none;
  background-color: transparent;
  cursor: pointer;
}

.subscription-no-data-loader {
  min-height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification-icons {
  width: 2rem;
  height: 2rem;
  stroke: var(--color-text);
}

/*# sourceMappingURL=main.css.map */