/* #region Imports */
@import url('global/controls.css');
@import url('global/navigation.css');
@import url('global/footer.css');
@import url('global/tables.css');
/* #endregion */

/* #region Variables */
:root {
  --white: #ffffff;
  --smoky-white: #f1f3f9;
  --smoky-white-light: #f6f6f6;
  --white-aluminum: #aaaaaa;
  --lavender: #e9eaf2;
  --moderate-purple-blue: #363c5f;
  --cornflower: #6f83f5;
  --signal-black: #292929;
  --primary: var(--primary, #3D3D3D);
  --dark-slate-blue: #4c3eb8;
  --slate-blue: #5b4ccf;
  --light-grey: #d9d9d9;
  --light-carmine-pink: #ec6363;
  --danger: var(--light-carmine-pink);
  --danger-100: #F29292;
  --shiny-green: #47a951;
  --periwinkle: #c3cbfa;
  --white-lite: #e8e8e8;
  --slate-lite: #7c70d9;
  --blue-100: #c4c1ed;
  --gray-102: #999999;
  --gray-101: #363636;
  --gray-900: #d0d3e5;
  --gray-800: #cfd0d3;
  --gray-700: #777777;
  --gray-600: #d7d8df;
  --gray-500: #525252;
  --gray-400: #545454;
  --gray-300: #76777d;
  --gray-200: #686868;
  --gray-100: #767676;
  --white-400: #edf0fc;
  --white-300: #feeeee;
  --white-200: #eff1fe;
  --white-100: #d0d1d8;
  --violet-100: #a5a2cf;
  --violet-200: #9d47df;
  --violet-300: rgb(87, 102, 219);
  --blue-200: #636ea8;
  --blue-100: #2982ff;
  --box-shadow-100: 0px 4px 20px 0px rgba(54, 60, 95, 0.2);
  /* Pallete 2.0 */
  /* · Origin colors */
  /* ├─ Grays */
  /* │  ├─*/ --white: #FFFFFF;
  /* │  ├─*/ --alabaster: #FDFDFD;
  /* │  ├─*/ --black-haze: #F8F8F8;
  /* │  ├─*/ --concrete: #F2F2F2;
  /* │  ├─*/ --mercury: #E2E2E2;
  /* │  ├─*/ --silver-chalice: #AAAAAA;
  /* │  ├─*/ --boulder: #787878;
  /* │  └─*/ --outer-space: #3D3D3D;
  /* ├─ Pink */
  /* │  ├─*/ --lavander-blush: #FEF0F7;
  /* │  ├─*/ --persian-pink: #F782C2;
  /* │  ├─*/ --amour: #FBEEF9;
  /* │  └─*/ --fuchsia-pink: #E075D0;
  /* ├─ Purple */
  /* │  ├─*/ --selago: #F4EDF9;
  /* │  ├─*/ --amethyst: #AA6DD0;
  /* │  ├─*/ --ghost-white: #F2F1FB;
  /* │  ├─*/ --whisper: #F1F3F9;
  /* │  ├─*/ --lavander: #E8E6FB;
  /* │  ├─*/ --periwinkle: #C3CBFA;
  /* │  ├─*/ --true-v: #8B82E9;
  /* │  ├─*/ --royal-blue: #8374F8;
  /* │  ├─*/ --purple-heart: #5B4CCF;
  /* │  └─*/ --governor-bay: #4C3EB8;
  /* ├─ Blue */
  /* │  ├─*/ --rhino: #363C5F;                        /* Primary color for shadows */
  /* │  ├─*/ --solitude: #E7F4FC;
  /* │  ├─*/ --picton-blue: #3CAAE9;
  /* │  ├─*/ --polar: #E5F9F9;
  /* │  └─*/ --robin-egg-blue: #2BCDCD;
  /* ├─ Mint & green */
  /* │  ├─*/ --apple-green: #E0F3EC;
  /* │  ├─*/ --jungle-green: #4DBB94;
  /* │  └─*/ --green-haze: #009D66;
  /* └─ Red & orange */
  /*    ├─*/ --piggy-pink: #FBDEDE;
  /*    ├─*/ --sweet-pink: #F29292;
  /*    └─*/ --bittersweet: #EC6363;
  /*      */
  /* · Working colors */
  /* ├─ Main */
  /* │  ├─*/ --primary: var(--outer-space);
  /* │  └─*/ --secondary: var(--white);
  /* ├─ Gray */
  /* │  └─ ...*/ 
  /* ├─ Accent */
  /* │  ├─*/ --accent: var(--purple-heart);
  /* │  ├─*/ --accent-04: #5B4CCF0A;
  /* │  ├─*/ --accent-08: #5B4CCF14;
  /* │  ├─*/ --accent-10: #5B4CCF1A;
  /* │  ├─*/ --accent-100: var(--governor-bay);
  /* │  ├─*/ --accent-200: var(--blue-violet);
  /* │  ├─*/ --accent-300: var(--royal-blue);
  /* │  ├─*/ --accent-400: var(--periwinkle);
  /* │  └─*/ --accent-500: #F2F1FB;                   /* Solidified accent-08 */
  /* ├─ Danger */
  /* │  ├─*/ --danger: var(--bittersweet);
  /* │  ├─*/ --danger-100: var(--sweet-pink);
  /* │  └─*/ --danger-200: var(--piggy-pink);
  /* ├─ Success */
  /* │  ├─*/ --success: var(--green-haze);
  /* │  ├─*/ --success-100: var(--jungle-green);
  /* │  └─*/ --success-200: var(--apple-green);
  /* ...  */
  /*      */
  /* · Box-shadows */
  /* ├─*/ --shadow-10: 4px 4px 15px 0 #6F83F512;
  /* ├─*/ --shadow-20: 4px 4px 20px 0 #363C5F33;
  /* ├─*/ --shadow-30: 4px 4px 30px 0 #363C5F1A;
  /* ├─*/ --shadow-40: 0 0 10px 0 #363C5F1F;
  /* ├─*/ --shadow-50-primary: 0px 0px 32px 0 #363C5F14;
  /* └─*/ --shadow-50-secondary: 0px 0px 4px 0 #363C5F1A;
  /*      */
  /* · Easing */
  /* ├─ Defaults */
  /* │  ├─*/ --easing-exponential: cubic-bezier(.19,1,.22,1);
  /* │  ├─*/ --easing-low-friction: cubic-bezier(.67,.8,.27,.89);
  /* └─ Working easings */
  /*    ├─*/ 
}
/* #endregion */

/* #region Reset */

/* #endregion */

/* #region Global styles */
* {
  font-family: "Montserrat", sans-serif;
}

html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
  max-width: 100%;
}

body {
  background: #fdfdfd;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.page-content-wrapper {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   flex: 1;
   gap: 128px;
}

.field-error {
  font-size: 12px;
  color: var(--danger);
}

a {
  color: var(--violet-200);
  text-decoration: none;
}

a:hover {
  color: var(--violet-300);
}
/* #endregion */

/* #region Utility classes */
.ml-auto {
  margin-left: auto;
}

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

.mb-8 {
  margin-bottom: 80px;
}

.mb-2 {
  margin-bottom: 20px;
}

.mb-0-4 {
  margin-bottom: 10px;
}

.mb-0-8 {
  margin-bottom: 10px;
}

.mb-1-2 {
    margin-bottom: 12px;
}

.mb-1-4 {
    margin-bottom: 14px;
}

.mb-1-6 {
    margin-bottom: 16px;
}

.mb-2-0 {
    margin-bottom: 20px;
}

.mb-2-4 {
    margin-bottom: 24px;
}

.mb-2-7 {
  margin-bottom: 27px;
}

.mb-3-0 {
    margin-bottom: 30px;
}

.mb-3-2 {
    margin-bottom: 32px;
}

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

.mt-1-3 {
  margin-top: 13px;
}

.mt-1-6 {
  margin-top: 16px;
}

.mt-2-1 {
  margin-top: 21px;
}

.mt-2-4 {
  margin-top: 24px;
}

.mb-3-8 {
  margin-bottom: 38px;
}

.mb-6-6 {
  margin-bottom: 66px;
}

.p-0 {
  padding: 0;
}

.pt-4 {
  padding-top: 40px;
}

.max-w-228 {
  max-width: 228px;
}

.max-w-377 {
  max-width: 377px;
}

.mw-3-0 {
  max-width: 30px;
}

.w-462 {
  width: 462px;
}

.w-181 {
  width: 181px;
}

.js-image-show-big {
  cursor: pointer;
}

.vertical-align-top {
  vertical-align: top !important;
}

.td-text-ellipsis,
.td-text-ellipsis * {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/*.modal.show .modal-dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	min-width: 100vw;
}
*/
.box-white {
  border-radius: 20px;
  background: var(--white);
  box-shadow: 4px 4px 30px 0px rgba(54, 60, 95, 0.1);
}

.container-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
}

.container-flex-2 {
  display: flex;
  margin: 0 -10px;
}

.container-flex-2 > div {
  margin: 0 10px;
}

.container-flex-2 > div:first-child {
  width: 300px;
}

.container-flex-2 > div:last-child {
  width: calc(100% - 300px);
}

.wrapper-row {
  margin-left: 60px;
  margin-right: 60px;
}

.scroll-basic::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}

.scroll-basic::-webkit-scrollbar-thumb {
  background: var(--violet-100);
  border-radius: 8px;
}

.scroll-basic::-webkit-scrollbar-track {
  background-color: #eff1fe;
  border: 1px solid #eff1fe;
  border-radius: 8px;
}

div.scroll-basic {
  overflow: auto;
}

.scroll-basic::-webkit-scrollbar-button:hover {
  background-color: #eff1fe;
}

.scroll-basic_grey::-webkit-scrollbar-thumb {
  background: var(--violet-100);
  border-radius: 12px;
}

.scroll-basic_grey::-webkit-scrollbar-track {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
}

div.scroll-basic_grey {
  overflow: auto;
  scroll-padding-top: 100px;
}

.disable-interaction {
  pointer-events: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* #endregion */

/* #region Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  background: rgba(54, 60, 95, 0.26);
  animation: modal 0.6s;
}

.modal.show {
  display: flex;
}

.modal-content {
  background-color: var(--white);
  padding: 21px 24px;
  border-radius: 16px;
  border: 0;
}

.modal.show .modal-content {
  animation: modal-content 0.2s;
}

.modal-content__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.modal-content__title {
  display: flex;
  justify-content: space-between;
  color: var(--primary, #3D3D3D);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  align-items: center;
  margin-bottom: 30px;
}

.modal-content__close {
  cursor: pointer;
  transition: 0.2s;
}

.modal-content__close:hover {
  opacity: 0.6;
}

.modal-content__label {
  color: var(--primary, #3D3D3D);
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 15px;
}

.modal-content__footer {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 20px;
}

.modal-content__btn {
  border-radius: 40px;
  border: 1px solid var(--accent, #5B4CCF);
  background: var(--accent, #5B4CCF);
  color: var(--white);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  padding: 6px 20px 8px;
  transition: 0.2s;
  cursor: pointer;
}

.modal-content__btn_white {
  background: var(--white);
  color: var(--accent, #5B4CCF);
}

.modal-content__btn:hover {
  opacity: 0.6;
}

.modal-content__input-text {
  border-radius: 40px;
  border: 1px solid rgba(54, 60, 95, 0.2);
  padding: 11px 16px;
  width: 100%;
  color: rgba(41, 41, 41, 0.5);
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.modal_small .modal-dialog {
  width: fit-content;
}

.modal_small .modal-content {
  width: 276px;
  padding: 0;
  min-width: -webkit-fill-available;
}

.modal_small .modal-body {
  padding: 24px;
}

.modal_small .modal-header {
  border-bottom: 0;
  padding: 24px 24px 0 24px;
}

.modal_small .modal-title {
  color: var(--primary, #3D3D3D);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}

.modal_small .btn-close {
  opacity: 1;
}

.modal-content__gray {
  background: #f2f1f6;
}

.modal__input-tag {
  border-radius: 8px;
  background: #e4e4e6;
  text-align: center;
  border: 1px #e4e4e6 solid;
  height: 44px;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  color: #4d6aea;
  font-size: 24px;
}

.modal-title_black {
  height: 50px;
  line-height: 50px;
}

#modal-orderinfotrack .modal-lg,
#modal-orderinfotrack .modal-xl {
  max-width: 400px;
}

#modal-orderinfotrack .modal-header {
  padding: 0;
  border: 0;
  margin-bottom: 13px;
}

#modal-orderinfotrack .container-fluid,
#modal-orderinfotrack .modal-body {
  padding: 0;
}

#modal-orderinfotrack .modal-title {
  color: var(--primary, #3D3D3D);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

#modal-orderinfotrack .btn-close {
  background: transparent url(/images/svg/modal-close.svg) no-repeat;
  margin: 0;
  padding: 0;
  opacity: 1;
  width: 18px;
  height: 18px;
}

.dialog-basic .modal-title {
  color: var(--primary, #3D3D3D);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.dialog-basic .btn-close {
  background: transparent url(/images/svg/modal-close.svg) no-repeat;
  margin: 0;
  padding: 0;
  opacity: 1;
  width: 18px;
  height: 18px;
}

.dialog-basic .container-fluid,
.dialog-basic .modal-body {
  padding: 0;
}

.dialog-basic .modal-lg,
.dialog-basic .modal-xl {
  max-width: 1252px;
}

.dialog-basic .modal-header {
  padding: 0;
  border: 0;
  margin-bottom: 13px;
}

.dropdown-menu-profile {
  width: 342px;
}

.dropdown-menu-profile__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--smoky-white);
  padding: 16px 23px;
}

.dropdown-menu-profile__header-title {
  color: var(--primary, #3D3D3D);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.dropdown-menu-profile__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.dropdown-menu-profile__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 18px 23px;
  border-bottom: 1px var(--smoky-white) solid;
}

.dropdown-menu-profile__item-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dropdown-menu-profile__item-title {
  color: var(--signal-black);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.dropdown-menu-profile__item-title .main-user-name__description-status {
  font-size: 11px;
}

.dropdown-menu-profile__item-position {
  display: flex;
  gap: 9px;
  align-items: center;
  color: rgba(61, 61, 61, 0.5);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.dropdown-menu-profile__seporator {
  width: 6px;
  height: 6px;
  background: var(--light-grey);
  border-radius: 100%;
}

.widget-products__wrapper {
  position: relative;
}

.widget-products__gradient {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 74px;
  height: 100%;
  background: linear-gradient(
    270deg,
    #fff 32.43%,
    rgba(255, 255, 255, 0) 89.19%
  );
}

.widget-products {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 20px;
  padding-right: 74px;
}

.widget-products__item {
  width: 84px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.widget-products__image {
  width: 83px;
  height: 83px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.widget-products__image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.widget-products__article {
  color: var(--primary, #3D3D3D);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* #endregion */

/* #region Media queries */
@media all and (max-width: 1439px) {
  .wrapper-row {
    margin-left: 30px;
    margin-right: 30px;
  }
}

@media all and (max-width: 1023px) {
  .container-fluid {
    padding: 0 15px;
  }
}

@media all and (max-width: 767px) {
  body {
    background: #f7f7f7;
  }

  .is-mobile {
    display: block !important;
  }

  .is-desktop {
    display: none !important;
  }
}

@media all and (max-width: 700px) {
  .container-flex-2 {
    flex-direction: column-reverse;
    margin-right: 25px;
  }

  .container-flex-2 > div:first-child,
  .container-flex-2 > div:last-child {
    width: 100%;
  }
}

@media all and (max-width: 550px) {
  .wrapper-row {
    margin-left: 0px;
    margin-right: 0px;
  }
}
/* #endregion */

/* #region Animation definitions */
@keyframes key-speed-history-indicator {
  100% {
    width: 100%;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

@keyframes modal {
  0% {
    background: rgba(54, 60, 95, 0);
  }

  100% {
    background: rgba(54, 60, 95, 0.26);
  }
}

@keyframes modal-content {
  0% {
    transform: scale(0.7);
  }

  100% {
    transform: scale(1);
  }
}
/* #endregion */