:root {
  --lessprimary: #ced4da;
  --lightprimary: #adb5bd;
  --primary: #1A1110;
  --darkprimary: #000000;
  --lesssecondary: #ced4da;
  --lightsecondary: #adb5bd;
  --secondary: #48484A;
  --darksecondary: #000000;
  --white: #FFFFFF;
  --lessred: #fff0f3;
  --lightred: #ef7674;
  --red: #d02224;
  --darkred: #9c191b;
  --lessreddeep: #ec8385;
  --lightreddeep: #ff2c55;
  --reddeep: #c41e3d;
  --darkreddeep: #7d1128;
  --lessgreen: #b7e4c7;
  --lightgreen: #4c956c;
  --green: #008000;
  --darkgreen: #10451d;
  --lessgreendeep: #bee3db;
  --lightgreendeep: #40826D;
  --greendeep: #2d6a4f;
  --darkgreendeep: #18392b;
  --lessblue: #e3f2fd;
  --lightblue: #64b5f6;
  --blue: #007AFF;
  --darkblue: #0040DD;
  --lessbluedeep: #e1ecf7;
  --lightbluedeep: #0899ba;
  --bluedeep: #0f80aa;
  --darkbluedeep: #16679a;
  --lessblueskype: #e1ecf7;
  --lightblueskype: #1976d2;
  --blueskype: #0353a4;
  --darkblueskype: #023e7d;
  --lessorange: #fff2b2;
  --lightorange: #FFD426;
  --orange: #FF9500;
  --darkorange: #D84315;
  --lessorangedeep: #ffe3e0;
  --lightorangedeep: #f7a399;
  --orangedeep: #cc5803;
  --darkorangedeep: #D84315;
  --lessviolet: #dfd7f1;
  --lightviolet: #B692F6;
  --violet: #7F56D9;
  --darkviolet: #53389E;
  --lessgray: #e9ecef;
  --lightgray: #d8dae5;
  --gray: #8E8E93;
  --darkgray: #48484A;
  --lessblack: #ced4da;
  --lightblack: #adb5bd;
  --black: #1A1110;
  --darkblack: #000000;
  --menubackground: #F0F0F0;
  --menucolor: #000000;
  --background: #F0F0F0;
  --box-shadow-dark:rgba(0, 0, 0, 0.2) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 16px 24px 2px, rgba(0, 0, 0, 0.12) 0px 6px 30px 5px;
  --box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  --box-shadow-light: 0;
  --font-size-xxl: 2rem;
  --font-size-xl: 1.5rem;
  --font-size-l: 1.2rem;
  --font-size-m: 1rem;
  --font-size-s: 0.9rem;
  --font-size-xs: 0.8rem;
  --range-xxl: 21px;
  --range-xl: 18px;
  --range-l: 18px;
  --range-m: 10px;
  --range-s: 8px;
  --range-xs: 5px;
  --range-xxs: 3px;
  --height-l: 38px;
  --height-m: 32px;
  --height-s: 24px;
  --height-xs: 20px;
  --height-xxs: 18px;
  --radius-l: 12px;
  --radius-m: 9px;
  --radius-s: 6px;
}
*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: var(--lightgray);
}

*::-webkit-scrollbar-thumb {
  background: var(--gray);
  border-radius: 0px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--gray);
}

#content {
  display: flex;
  position: relative;
  flex-direction: column;
  height: calc(100vh - 55px - var(--range-m));
  margin-top: calc(55px + var(--range-m));
  padding-left: var(--range-m);
  padding-right: var(--range-m);
  overflow: auto;
  background-color: var(--background);
}

.ti {
  font-size: 18px;
}

.app-menu {
  background: var(--menubackground);
}
.app-menu .nav > li > a {
  color: var(--menucolor);
}
.app-menu .nav > li > a:hover {
  background: var(--lessprimary)
}
.app-menu .dk{
  background: var(--menubackground)
}

.app-menu .nav-primary > ul.nav-main > li:hover > a,
.app-menu .nav-primary > ul.nav-main > li:focus > a,
.app-menu .nav-primary > ul.nav-main > li:active > a,
.app-menu .nav-primary > ul.nav-main > li.active > a {
  background-color: var(--lessprimary);
  color: var(--primary);
  border-radius: 6px;
}

.app-menu .nav > li:hover > a,
.app-menu .nav > li:focus > a,
.app-menu .nav > li:active > a,
.app-menu .nav > li.active > a {
background-color: var(--lessprimary);
  color: var(--darkprimary);
}

.app-header {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 55px;
  background-color: var(--menubackground);
  padding-left: 15px;
  padding-right: 15px;
}
.app-header-logo  {
  width: 180px;
  /* background-color: var(--black); */
}
.app-header-logo >img {
  height: 45px;
}
.app-header-button {
  padding-left: var(--range-s);
  padding-right: var(--range-s);
}
.app-header-title {
  flex: 1;
  padding-left: var(--range-s);
  padding-right: var(--range-s);
}
.app-header-actions {
  display: flex;
}
/* .app-menu-body {
  height: calc(100vh - 55px);
  overflow-x: hidden;
  overflow-y: visible;
}*/
.nav-off-screen #app-main-menu {
  height: calc(100vh - 55px);
  overflow: auto;
  direction: rtl;
}

.app-box {
  padding: 0px;
  border-radius: var(--radius-m);
  margin-bottom: var(--range-m);
}




/* button */

.button-primary-icon {
  color: var(--white);
  background-color: var(--primary);
  border: 1px solid var(--primary);
  padding: 0 !important;
  min-width: var(--height-m);
  min-height: var(--height-m);
}
.button-primary-icon:hover{
  color: var(--white);
  background-color: var(--darkprimary);
  border: 1px solid var(--darkprimary);
}
.button-primary-icon:focus{
  text-decoration: none;
  color: var(--white);
  background-color: var(--darkprimary);
  border: 1px solid var(--darkprimary);
} 
.button-primary-icon.focused {
  text-decoration: none;
  color: var(--white);
  background-color: var(--darkprimary);
  border: 1px solid var(--darkprimary);
}

.button-primary-icon-outline {
  color: var(--primary);
  background-color: var(--lessprimary);
  border: 1px solid var(--lessprimary);
  padding: 0 !important;
  min-width: var(--height-m);
  min-height: var(--height-m);
}
.button-primary-icon-outline:hover{
  color: var(--white);
  background-color: var(--primary);
  border: 1px solid var(--primary);
  transition: all 200ms ease;
}
.button-primary-icon-outline:focus{
  text-decoration: none;
  color: var(--white);
  background-color: var(--primary);
  border: 1px solid var(--primary);
} 
.button-primary-icon-outline.focused {
  text-decoration: none;
  color: var(--white);
  background-color: var(--primary);
  border: 1px solid var(--primary);
}

.button-secondary-icon {
  color: var(--secondary);
  background-color: var(--lesssecondary);
  border: 1px solid var(--lesssecondary);
  padding: 0 !important;
  min-width: var(--height-m);
  min-height: var(--height-m);
}
.button-secondary-icon:hover{
  color: var(--white);
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
}
.button-secondary-icon:focus{
  text-decoration: none;
  color: var(--white);
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
}
.button-secondary-icon.focused {
  text-decoration: none;
  color: var(--white);
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
}

.button-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--radius-s);
  font-size: var(--font-size-m);
  height: auto;
  width: auto;
  padding: 0 !important;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--primary);
  text-decoration: none;
}
.button-icon:hover {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--darkprimary);
  text-decoration: none;
}
.button-icon:focus {
  background-color: transparent;
  border: 1px solid transparent;
  outline: 1px solid transparent;
  color: var(--darkprimary);
  text-decoration: none;
  outline-offset: 0px;
}
.button-icon[disabled] {
  background-color: var(--lessgray);
  color: var(--gray);
  border: none;
  cursor: not-allowed;
}

.button-default-outline {
  background-color: var(--white);
  border: 1px solid var(--gray);
  color: var(--black);
  text-decoration: none;
}
.button-default-outline:hover {
  background-color: var(--lightgray);
  border: 1px solid var(--gray);
  color: var(--black);
  text-decoration: none;
}
.button-default-outline:focus {
  background-color: var(--lightgray);
  border: 1px solid var(--white);
  outline: 1px solid var(--darkgray);
  color: var(--black);
  text-decoration: none;
  outline-offset: 0px;
}
.button-default-outline[disabled] {
  background-color: var(--lessgray);
  border: 1px solid var(--lightgray);
  color: var(--gray);
  cursor: not-allowed;
}
.button-default-noline {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--black);
  text-decoration: none;
  height: auto !important;
}
.button-default-noline:hover {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--black);
  text-decoration: underline;
}
.button-default-noline:focus {
  background-color: transparent;
  border: 1px solid transparent;
  outline: 1px solid transparent;
  color: var(--black);
  text-decoration: underline;
  outline-offset: 0px;
}
.button-default-noline[disabled] {
  color: var(--gray);
  cursor: not-allowed;
}

.button-primary-outline {
  background-color: var(--white);
  border: 1px solid var(--primary);
  color: var(--primary);
}
.button-primary-outline:hover {
  background-color: var(--darkprimary);
  border: 1px solid var(--darkprimary);
  color: var(--white);
  text-decoration: none;
}
.button-primary-outline:focus {
  background-color: var(--darkprimary);
  border: 1px solid var(--white);
  outline: 1px solid var(--darkprimary);
  color: var(--white);
  text-decoration: none;
  outline-offset: 0px;
}
.button-primary-outline[disabled] {
  background-color: var(--lessgray);
  border: 1px solid var(--lightgray);
  color: var(--lightprimary);
  cursor: not-allowed;
}
.button-primary-noline {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--primary);
  height: auto !important;
}
.button-primary-noline:hover {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--darkprimary);
  text-decoration: underline;
}
.button-primary-noline:focus {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--darkprimary);
  text-decoration: underline;
}
.button-primary-noline[disabled] {
  color: var(--gray);
  cursor: not-allowed;
}

.button-danger {
  background-color: var(--red);
  border: 1px solid var(--red);
  color: var(--white);
  text-decoration: none;
  outline-offset: 0px;
}

.button-danger:hover {
  background-color: var(--darkred);
  border: 1px solid var(--darkred);
  color: var(--white);
  text-decoration: none;
}
.button-danger:focus {
  background-color: var(--darkred);
  border: 1px solid var(--white);
  outline: 1px solid var(--darkred);
  color: var(--white);
  text-decoration: none;
  outline-offset: 0px;
}
.button-danger[disabled] {
  background-color: var(--lightred);
  border: none;
  cursor: not-allowed;
}
.button-danger-outline {
  background-color: var(--white);
  border: 1px solid var(--red);
  color: var(--red);
}
.button-danger-outline:hover {
  background-color: var(--darkred);
  border: 1px solid var(--darkred);
  color: var(--white);
  text-decoration: none;
}
.button-danger-outline:focus {
  background-color: var(--darkred);
  border: 1px solid var(--white);
  outline: 1px solid var(--darkred);
  color: var(--white);
  text-decoration: none;
  outline-offset: 0px;
}
.button-danger-outline[disabled] {
  background-color: var(--lessgray);
  border: 1px solid var(--lightgray);
  color: var(--lightred);
  cursor: not-allowed;
}
.button-danger-noline {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--red);
}
.button-danger-noline:hover {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--darkred);
  text-decoration: underline;
}
.button-danger-noline:focus {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--darkred);
  text-decoration: underline;
}
.button-danger-noline[disabled] {
  color: var(--gray);
  cursor: not-allowed;
}

.button-success {
  background-color: var(--green);
  border: 1px solid var(--green);
  color: var(--white);
  text-decoration: none;
  outline-offset: 0px;
}

.button-success:hover {
  background-color: var(--darkgreen);
  border: 1px solid var(--darkgreen);
  color: var(--white);
  text-decoration: none;
}
.button-success:focus {
  background-color: var(--darkgreen);
  border: 1px solid var(--white);
  outline: 1px solid var(--darkgreen);
  color: var(--white);
  text-decoration: none;
  outline-offset: 0px;
}
.button-success[disabled] {
  background-color: var(--lightgreen);
  border: none;
  cursor: not-allowed;
}
.button-success-outline {
  background-color: var(--white);
  border: 1px solid var(--green);
  color: var(--green);
}
.button-success-outline:hover {
  background-color: var(--darkgreen);
  border: 1px solid var(--darkgreen);
  color: var(--white);
  text-decoration: none;
}
.button-success-outline:focus {
  background-color: var(--darkgreen);
  border: 1px solid var(--white);
  outline: 1px solid var(--darkgreen);
  color: var(--white);
  text-decoration: none;
  outline-offset: 0px;
}
.button-success-outline[disabled] {
  background-color: var(--lessgray);
  border: 1px solid var(--lightgray);
  color: var(--lightgreen);
  cursor: not-allowed;
}
.button-success-noline {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--green);
}
.button-success-noline:hover {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--darkgreen);
  text-decoration: underline;
}
.button-success-noline:focus {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--darkgreen);
  text-decoration: underline;
}
.button-success-noline[disabled] {
  color: var(--gray);
  cursor: not-allowed;
}
/* button */

.es-box {    
    position: relative;
    display: block;
    float: left;
    padding: var(--range-m) !important;
    border-radius: var(--radius-m);
    margin-bottom: var(--range-m);
}
.es-box-white {
    background-color: var(--white);
    box-shadow: var(--box-shadow-light);
    color: var(--black);
}
.es-box-orange {
  background-color: var(--lessorange);
  border: 1px solid var(--orange);
}
.es-box-title {
    color: var(--black);
    font-weight: bold;
    font-size: var(--font-size-m);
    min-height: var(--height-s);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.es-box p {
    margin-bottom: 0px;
    margin-top: 0px;
}
.es-box hr {
    margin-top: var(--range-m);
    margin-bottom: var(--range-m);
    border: 0;
    border-top: 1px solid var(--lightgray);
  }
.es-box > .es-box-legend {
  position: absolute;
  top: -10px;
  left: 10px;
  background: white;
  padding: 0 5px;
}
.es-box > .tabs {
  display: flex;
  flex-wrap: wrap;
} 
.es-box > .tabs > .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--height-m);
  background: transparent;
  color: var(--primary);
  border-radius: var(--radius-s);
  padding-left: var(--range-s);
  padding-right: var(--range-s);
  margin-right: var(--range-s);
  margin-bottom: var(--range-s);
  cursor: pointer;
  border: 1px solid transparent;
} 
.es-box > .tabs > .tab:hover {
  background: var(--lessprimary);
}

.es-box > .tabs > .tab.active {
  background: var(--primary);
  color: var(--white);
  outline: 4px solid var(--lessprimary);
}

/* start timeline */
.es-timeline-list {
    display: flex;
    flex-direction: column;
}
  .es-timeline-time {
    display: flex;
    flex-direction: row;
  }
  .es-timeline-line {
    position: relative;
    width: 34px;
  }
  .es-timeline-time-line {
    background-color: var(--lightprimary);
    width: 2px;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 11px;
  }
  
  .es-timeline-time-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
  }
  .es-timeline-time-datetime {
    font-size: 12px;
    color: var(--primary);
    margin-top: var(--radius-m);
    margin-bottom: 0px;
  }
  .es-timeline-time-title {
    padding: var(--range-m);
  }
  /* end timeline */

/* start textarea */
.es-textarea-m {
    font-size: var(--font-size-m);
    color: var(--darkgray);
    padding: 6px 8px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid var(--lightgray);
    width: 100%;
    display: block;
  }
  .es-textarea-m:focus-visible {
    outline: 2px solid var(--lightprimary);
    border: 1px solid transparent;
  }
  .es-textarea-m[disabled]{
    background-color: var(--lessgray);
    color: var(--gray);
  }
  /* end textarea */


/* start text */
.es-text-left {
    text-align: left;
  }
 .es-text-right {
    text-align: right;
  }
 .es-text-center {
    text-align: center;
  }
 .es-text-right {
    text-align: right;
  }
 .es-text-white {
    color: var(--white);
  }
 .es-text-primary {
    color: var(--primary);
  }
 .es-text-secondary {
    color: var(--secondary);
  }
 .es-text-gray {
    color: var(--gray);
  }
 .es-text-orange {
    color: var(--orange);
  }
 .es-text-blue {
    color: var(--blue);
  }
 .es-text-green {
    color: var(--green);
  }
 .es-text-red {
    color: var(--red);
  }
 .es-text-lightred {
    color: var(--lightred);
  }
  .es-text-violet {
     color: var(--violet);
   }
 .es-text-bold {
    font-weight: bold;
  }
 .es-text-italic {
    font-style: italic;
  }
 .es-fz-s {
    font-size: var(--font-size-s);
  }
 .es-fz-m {
    font-size: var(--font-size-m);
  }
 .es-fz-l {
    font-size: var(--font-size-l);
  }
 .es-fz-lg {
    font-size: 22px;
  }
  

  .table-header-pined > table > thead > tr{
    position: sticky;
    top: 0px;
  }
  .table-content-top td{
    vertical-align: top !important;
  }

.es-user {
  width: 70px;
  height: 70px;
}

.es-top-bar {
  top: 0px;
  position: absolute;
  width: 100%;
  z-index: 1001;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
}
.es-tool-bar{
  height: 20px;
  padding: var(--range-xs) var(--range-m);
  position: relative;
  width: 100%;
  background-color: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.es-header-bar {
  height: 50px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.es-header-bar-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: var(--font-size-l);
  padding-left: var(--range-m);
  padding-right: var(--range-m);
}
.es-header-bar-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: var(--range-m);
  padding-right: var(--range-m);
}
.es-notifications {
  position: relative;
  margin-right: var(--range-s);
}
#es-notifications-icon {
  color: var(--primary);
  font-size: var(--font-size-m);
  padding-left: var(--range-xs);
  padding-right: var(--range-xs);
  background-color: var(--white);
  border-radius: var(--radius-s) 0px 0px var(--radius-s);
}
#es-notifications-counter {
  color: var(--white);
  background-color: var(--red);
  padding-left: var(--range-m);
  padding-right: var(--range-m);
  text-align: center;
  font-size: var(--font-size-s);
  border-radius: 0px var(--radius-s) var(--radius-s) 0px;
}
#es-notifications-popup {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-width: 400px;
  min-height: 100px;
  background-color: white;
}
.notifications-table > table {
  border: none;
}
.notifications-table > table > tbody > tr > td {
  border-color: transparent;
  border-top: none;
  padding-left: var(--range-xxs);
  padding-right: var(--range-xxs);
}
.es-tasks {
  position: relative;
  margin-right: var(--range-s);
}
#es-tasks-icon {
  color: var(--primary);
  font-size: var(--font-size-m);
  padding-left: var(--range-xs);
  padding-right: var(--range-xs);
  background-color: var(--white);
  border-radius: var(--radius-s) 0px 0px var(--radius-s);
}
.es-counter {
  position: absolute;
  z-index: 899;
  display: flex;
  align-items: center;
  justify-content: center;
  right: -10px;
  top: -10px;
  color: var(--white);
  background-color: var(--red);
  height: var(--height-xxs);
  min-width: var(--height-xxs);
  padding: var(--range-xxs);
  font-size: var(--font-size-s);
  border-radius: 10px;
}
#es-tasks-popup {
  display: flex;
  justify-content: center;
  flex-direction: column;
  min-width: 400px;
  min-height: 100px;
  background-color: white;
}

.list_tasks-table > table {
  border: none;
}
.list_tasks-table > table > tbody > tr > td {
  border-color: transparent;
  border-top: none;
  padding-left: var(--range-xxs);
  padding-right: var(--range-xxs);
}

.es-order-items-table {
  width: 100%;
}
.es-order-items-table {
  width: 100%;
  border-radius: var(--radius-m);
  border: 1px solid var(--primary);
  border-spacing: 1px solid var(--lightgray);
  
}
.es-order-items-table > thead > tr > th {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}
.es-order-items-table > tbody > tr > td {
  border: 1px solid var(--lightgray);
  padding: var(--range-xs);
}
.es-order-items-sum-table {
  width: 100%;
  border: 1px solid var(--lightgray);
}
.es-order-items-sum-table > tbody > tr > td {
  border: 1px solid var(--lessgray);
  background-color: var(--lessgray);
  padding: var(--range-xs);
}


.dropdown-box {
  display: block;
  position: relative;
}
.dropdown-box-body {
  text-align: left;
  position: fixed;
  z-index: 1000;
  padding: var(--range-s);
  /* min-width: 100%; */
  background-color: var(--white);
  border-radius: var(--radius-s);
  box-shadow: var(--box-shadow-dark);
  margin-top: var(--range-xxs);
}

.dropdown-list-items {
  display: grid;
  padding: 0;
  margin: 0;
}
.dropdown-list-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding: var(--range-xs);
  min-height: var(--height-m);
}
.dropdown-list-item:hover {
  background-color: var(--primary);
  color: var(--white);
  cursor: pointer;
  border-radius: var(--radius-s);
  transition: background-color 200ms ease-in;
}

.position-bottom-right {
  top: 100%;
  right: 0;
  margin-top: var(--range-xs);
}

.position-bottom-left {
  top: 100%;
  left: 0;
  margin-top: var(--range-xs);
}
.position-top-right {
  bottom: 100%;
  right: 0;
  margin-bottom: var(--range-xs);
}

.position-top-left {
  bottom: 100%;
  left: 0;
  margin-bottom: var(--range-xs);
}

.position-left-top {
  bottom: 0;
  right: 100%;
  margin-right: var(--range-xs);
}
.position-left-bottom {
  top: 0;
  right: 100%;
  margin-right: var(--range-xs);
}
.position-right-top {
  bottom: 0;
  left: 100%;
  margin-left: var(--range-xs);
}
.position-right-bottom {
  top: 0;
  left: 100%;
  margin-left: var(--range-xs);
}

.login-box {
  background-color: var(--white);
  border-radius: var(--radius-l);
  box-shadow: var(--box-shadow);
  padding: var(--range-m);
}
.login-title {
  color: var(--primary);
  font-weight: bold;
  text-align: center; 
  font-size: var(--font-size-xxl);
  padding: var(--range-l);
  margin-bottom: var(--range-m);
}
.login-title-sub {
  height: var(--height-m);
  text-align: center;
}
.login-title-bottom {
  margin-top: var(--range-l);
  text-align: center;
}
.login-button {
  font-size: var(--font-size-l);
  height: var(--height-l);
  margin-bottom: var(--range-m);
  width: 100%;
  color: var(--white);
  background-color: var(--primary);
}
.app-style-list {
  display: flex;
  flex-wrap: wrap;
}
.app-style-select-box {
  position: relative;
  display: flex;
  margin: var(--range-m);
  border: 1px solid var(--lightgray);
}
.app-style-select-box > span {
  height: var(--height-l);
  width: var(--height-l);
}
.app-style-select-box > i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  font-size: var(--font-size-xl);
}

.title-bar {
  position: sticky;
  top: 0;
  z-index: 998;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: var(--white);
  width: 100%;
  min-height: 55px;
  border-radius: var(--radius-m);
  padding-left: var(--range-m);
  padding-right: var(--range-m);
  outline: 4px solid var(--background);
}
.title-bar h3 {
  font-size: var(--font-size-l);
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
  margin-bottom: 0;
  color: var(--primary);
  padding-right: var(--range-s);
}

.title-bar h3:hover {
  color: var(--primary);
}
.title-bar h3 > i {
  margin-right: var(--range-s);
}

.title-bar > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: var(--range-m);
}

.title-bar .button-m {
  margin-top: var(--range-m);
  margin-left: var(--range-m);
}


.label-s {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: var(--radius-s);
  padding: 0 var(--range-xxs);
  font-size: var(--font-size-s);
  width: fit-content;
}

.label-lessgray {
  background-color: var(--lessgray);
  color: var(--darkgray);
  border: solid 1px var(--lessgray)
}
.label-gray {
  background-color: var(--lightgray);
  color: var(--darkgray);
  border: solid 1px var(--lightgray)
}
.label-lessorange {
  background-color: var(--lightorange);
  color: var(--black);
  border: solid 1px var(--lightorange)
}
.label-orange {
  background-color: var(--orange);
  color: var(--white);
  border: solid 1px var(--orange)
}
.label-lessgreen {
  background-color: var(--lightgreendeep);
  color: var(--white);
  border: solid 1px var(--lightgreendeep)
}
.label-green {
  background-color: var(--green);
  color: var(--white);
  border: solid 1px var(--green)
}
.label-red {
  background-color: var(--reddeep);
  color: var(--white);
  border: solid 1px var(--reddeep)
}
.label-redeep {
  background-color: var(--reddeep);
  color: var(--white);
  border: solid 1px var(--reddeep)
}
.label-blue {
  background-color: var(--bluedeep);
  color: var(--white);
  border: solid 1px var(--bluedeep)
}
.label-bluedeep {
  background-color: var(--bluedeep);
  color: var(--white);
  border: solid 1px var(--bluedeep)
}
.label-lessblue {
  background-color: var(--lightbluedeep);
  color: var(--white);
  border: solid 1px var(--lightbluedeep)
}
.actions-icon {
  display: flex;
  justify-content: flex-start;
  font-size: var(--font-size-l);
}
.actions-icon > div {
  padding-left: var(--range-xxs);
  padding-right: var(--range-xxs);
  flex: 1;
}

.header-dropdown {
  position: relative;
  display: block;
}
.header-dropdown-popup {
  padding-left: var(--range-s);
  padding-right: var(--range-xxs);
  padding-top: var(--range-s);
  padding-bottom: var(--range-s);
  border-radius: var(--radius-s);
  box-shadow: var(--box-shadow-dark);
  background-color: white;
}

@media (min-width: 768px) {
  .header-dropdown-popup {
    position: absolute;
  }
}

@media (max-width: 768px) {
  .header-dropdown-popup {
    position: fixed;
    top: 55px;
    left: 50%;
    width: calc(100vw - 10px);
    transform: translate(-50%, 0);
  }
}

.header-dropdown-title {
  padding-bottom: var(--range-xxs);
  margin-bottom: var(--range-xxs);
  font-size: var(--font-size-m);
  color: var(--primary);
  border-bottom: 1px dashed var(--primary);
}
.header-dropdown-body {
  max-height: calc(100vh - 100px);
  overflow: auto;
}

.app-tabs-header {
  background-color: var(--white);
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  padding: 0 !important;
}
.app-tabs-body {
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  background-color: var(--white);
  padding-top: var(--range-s) !important;
  padding-bottom: var(--range-s) !important;
  padding-left: var(--range-s) !important;
  padding-right: var(--range-s) !important;
}
.app-tabs-items {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.app-tabs-item{
  position: relative;
  padding-top: var(--range-s);
  padding-bottom: var(--range-xxs);
  padding-left: var(--range-m);
  padding-right: var(--range-m);
  margin-right: var(--range-m);
  margin-bottom: var(--range-m);
  margin-top: var(--range-m);
  margin-left: var(--range-m);
  color: var(--primary);
  border-bottom: 2px solid transparent;
}
.app-tabs-item:hover{
  background-color: var(--white);
  border-bottom: 2px solid var(--primary);
  cursor: pointer;
}
.app-tabs-item:hover > a{
  background-color: var(--white);
  color: var(--primary);
  text-decoration: none;
}
.app-tabs-item > a{
  color: var(--black);
  font-size: var(--font-size-l);
  text-decoration: none;
}
.app-tabs-item.active{
  background-color: var(--white);
  border-bottom: 2px solid var(--primary);
}
.app-tabs-item.active > a{
  color: var(--primary);
}
.app-tabs-item-counter{
  position: absolute;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--range-xxs);
  top: 0px;
  left: calc(100% - 8px);
  background: var(--lessprimary);
  min-width: var(--height-s);
  height: var(--height-xxs);
  text-align: center;
  border-radius: var(--height-xxs);
  color: var(--primary);
  font-size: var(--font-size-m);
}

.b-t-gray {
  border-top: 1px solid var(--lightgray);
}
.b-b-gray {
  border-bottom: 1px solid var(--lightgray);
}
.b-l-gray {
  border-left: 1px solid var(--lightgray);
}
.b-r-gray {
  border-right: 1px solid var(--lightgray);
}

.b-gray {
  border: 1px solid var(--lightgray);
}

.voucher-selected {
  border-radius: var(--radius-m);
  outline: 2px solid var(--lightprimary);
}
.input-selecter {
}
.input-selecter > ul {
  border-radius: var(--radius-s);
  border: 1px solid var(--lightgray);
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 225px;
  min-height: var(--height-m);
}
.input-selecter ul input {
  flex: 1;
  padding: var(--range-xs);
  border: none;
  outline: none;
  font-size: var(--font-size-m);
  justify-content: center;
}
.input-selecter ul li {
  color: #333;
  margin: var(--range-xs);
  list-style: none;
  border-radius: var(--radius-m);
  word-wrap: break-word;
  overflow: hidden;
}
.input-selecter-body {    
  position: absolute;
  z-index: 990;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-s);
  box-shadow: var(--box-shadow);
  margin-top: var(--range-s);
  display: none;
}
.input-selecter-body.active {
  display: block;
}
.input-selecter-button {
  display: flex;
  flex-wrap: nowrap;
  padding: var(--range-s);
  border-bottom: 1px solid var(--lightgray);
}

.input-selecter-results {
  overflow: auto;
  max-height: 320px;
  padding: var(--range-s);
}
.input-selecter-result{
  display: flex;
  align-items: center;
  padding: var(--range-s);
  border-bottom: 1px solid var(--lightgray);
  cursor: pointer;
}
.input-selecter-result:hover {
  border-left: 4px solid var(--primary);
}
.input-selecter-result-selected {
  background-color: var(--lessprimary);
}

.btn-info {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
}
.btn-info:hover {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}
.text-info {
  color: var(--darkprimary) !important;
  border-bottom: 2px solid var(--darkprimary) !important;
}

.order-status-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.label-pin-top-right {
  position: relative;
}
.label-pin-top-right > .label-s {
  position: absolute;
  top: 2px;
  right: 2px;
}
a {
  text-decoration: none;
  color: var(--primary);
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  color: var(--darkprimary);
  cursor: pointer;
}
.multiSelect .inputFilter {
  font-size: var(--font-size-s);
  border-radius: var(--radius-s);
  border: 1px solid var(--lightgray);
}

.multiSelect .clearButton:focus, .multiSelect .helperButton:focus, .multiSelect .inputFilter:focus {
  outline: 0px solid var(--lessprimary) !important;
  box-shadow: none !important;
  border: 1px solid var(--primary) !important;
}

.multiSelect .clearButton {
  border: none !important;
  background: none !important;
  font-size: 18px !important;
  top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  width: 23px;
}
.multiSelect .clearButton:focus {
  border: none !important;
  background: none !important;
}
.multiSelect .checkboxLayer {
  z-index: 996;
  border-radius: var(--radius-m);
  box-shadow: var(--box-shadow);
}
.multiSelect .line {
  padding: var(--range-xxs); 
}
.multiSelect .helperButton {
  background-color: var(--white);
  border: 1px solid var(--lightprimary);
  border-radius: var(--radius-s);
  color: var(--primary);
}
.multiSelect .helperButton:hover {
  background-color: var(--lessprimary);
  color: var(--primary);
  border: 1px solid var(--primary);
}
.box-search-advance .panel-default {
  border: 1px solid var(--lightgray);
  box-shadow: var(--box-shadow);
  border-radius: var(--radius-m)
}
.panel.panel-default > .panel-heading, .panel.panel-default > .panel-footer {
  border-radius: var(--radius-m)
}

.box-search-advance .panel-default.active {
  z-index: 800 !important;
}
.dropdown-menu {
  z-index: 300 !important;
  border-radius: var(--radius-m) !important;
}
.table > thead {
  border: 1px solid var(--primary);
}
.table > thead > tr {
  background-color: var(--primary);
}
.table > thead > tr > th {
  border-bottom: 1px solid var(--primary);
  border-left: 1px solid var(--primary);
  border-right: 1px solid var(--primary);
  border-top: 1px solid var(--primary);
  vertical-align: middle;
  white-space: nowrap;
  background-color: var(--primary);
  color: var(--white);
  font-weight: bold;
}
.table > tbody > tr > td {
  border-right: 1px solid var(--lessgray);
  border-bottom: 1px solid var(--lessgray);
}
.item-checked {
  background-color: #f5fbff;
}
.li-s, .li-s>i {
  display: flex;
  font-size: var(--font-size-s);
  line-height: var(--height-xxs);
  color: var(--darkgray);
}
.table-list {
  overflow: initial;
  border-radius: 0;
  margin-bottom: 0;
}
.table-list > table {
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
}
.table-list > table > tbody > tr > td {
  border-top: none !important;
  border-right: none;
  border-bottom: none;
  border-left: none;
  padding-top: var(--range-xs) !important;
  padding-right: var(--range-xs) !important;
  padding-bottom: var(--range-xs) !important;
  padding-left: 0 !important;
  background-color: transparent !important;
  vertical-align: top !important;
  white-space: normal;
}
.table-list > table > tbody > tr > th {
  border-top: none !important;
  border-right: none;
  border-bottom: none;
  border-left: none;
  padding-top: var(--range-xxs) !important;
  padding-right: var(--range-xxs) !important;
  padding-bottom: var(--range-xxs) !important;
  padding-left: 0 !important;
  background-color: transparent !important;
  vertical-align: top !important;
  white-space: normal;
}
.table-list > table > tbody > tr:hover td {
  background-color: transparent;
}
.tabs-sticky {
  display: inline-block;
  position: sticky;
  top: -10px;
  width: 100%;
  background: var(--white);
  z-index: 1000;
}
.m-l-xs {
  margin-left: var(--range-xs);
}
.m-l-s {
  margin-left: var(--range-s);
}
.m-l-m {
  margin-left: var(--range-m);
}
.m-l-l {
  margin-left: var(--range-l);
}
.display-inline-block {
  display: inline-block;
}
.es-select-box-list {
  position: absolute;
  z-index: 1998;
  padding: var(--range-xxs);
  min-width: 200px;
  border: 1px solid var(--lightgray);
  border-radius: var(--radius-s);
  background-color: var(--white);
  box-shadow: var(--box-shadow);
}