/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
@font-face {
  font-family: "Inter1";
  src: url("/Content/fonts/Inter.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400 900;
}


@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Regular.ttf");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Bold.ttf");
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Regular.ttf");
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/Content/fonts/Inter-Bold.ttf");
  font-style: italic;
  font-weight: bold;
}




@font-face {
  font-family: "Roboto";
  src: url("/Content/fonts/Roboto-Regular.ttf");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("/Content/fonts/Roboto-Bold.ttf");
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "Roboto";
  src: url("/Content/fonts/Roboto-Italic.ttf");
  font-style: italic;
  font-weight: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("/Content/fonts/Roboto-BoldItalic.ttf");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: "Roboto Mono";
  src: url("/Content/fonts/RobotoMono-VariableFont_wght.ttf");
}



.monofont {
  font-family: "Roboto Mono";
}



/* BODY   
----------------------------------------------------------*/



body {
  background-color: #EEEEEE;
  font-size: 0.8em;
  font-size: 9.6pt;
  font-family: Inter, Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
  color: #696969;
  min-width: 850px;
}


@media screen and (max-width: 1000px) {
  body {
    font-family: Roboto, Inter, Verdana, Tahoma;
  }
}




/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-size: 1.5em;
  color: #000;
}

h1 {
  font-size: 2em;
  padding-bottom: 0;
  margin-bottom: 0;
}

h2 {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  font-size: 12pt;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.1em;
  margin: 0px;
  padding: 3px;
}

h5, h6 {
  font-size: 1em;
}

a {
  color: #696969;
}

li {
  line-height: 1.6;
}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {
  margin-top: 0;
}



select {
  font-size: 11pt;
  vertical-align: middle;
  font-family: Inter, Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
}





/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.pageHeader {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  padding-left: 10px;
  font-size: 16pt;
  color: #006C6C;
}


.tabHeader {
  margin: 0 0 0 0;
  padding: 3px;
  padding-left: 10px;
  font-size: 11pt;
  font-weight: bold;
}

.subTabHeader {
  margin: 0 0 0 0;
  padding: 3px;
  padding-left: 14px;
  padding-top: 10px;
  font-size: 10pt;
  font-weight: bold;
  color: gray;
}

.subTabHeader1 {
  margin: 0 0 0 0;
  padding: 3px;
  font-size: 12pt;
  font-weight: bold;
  color: gray;
}

#header {
  position: relative;
  margin-bottom: 0px;
  color: #000;
  padding: 0;
}

  #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
  }

#main {
  padding: 3px 3px 3px 3px;
  _height: 1px; /* only IE6 applies CSS properties starting with an underscore */
}

#footer {
  color: #999;
  padding: 10px 0;
  text-align: center;
  line-height: normal;
  margin: 0;
  font-size: 8pt;
}


img {
  border: none;
}



/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
  border: 1px solid #CCCCCC;
  padding: 0em 1em 1em 1em;
  margin: 0 0 1em 0;
  border-radius: 4px;
}

legend {
  font-size: 1.2em;
  font-weight: bold;
}

textarea {
  min-height: 75px;
  resize: none;
  font-family: Inter, Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
  font-size: 10pt;
}




input[type="text"] {
  width: 200px;
  border: 1px solid #CCC;
  padding-left: 2px;
  font-size: 10pt;
}

input[type="password"] {
  width: 180px;
  border: 1px solid #CCC;
  padding-left: 2px;
  font-size: 10pt;
}


/*
  fix for coloris picker
  coloris.js.org

*/
#clr-picker {
  z-index: 90000;
}

input.clr-color {
  order: 1;
  width: calc(100% - 80px) !important;
  height: 32px;
  margin: 15px 20px 20px auto;
  padding: 0 10px;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  color: #444;
  background-color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
  box-shadow: none;
}


/* TABLE
----------------------------------------------------------*/


/* override standard teleric grid cell*/
.t-grid {
  padding: 0px;
  margin: 2px;
  text-align: left;
  border-radius: 0px;
  1box-shadow: 1px 1px 2px #888;
}

  .t-grid td {
    padding: 2px 3px 2px 3px;
    white-space: nowrap;
  }

  .t-grid .t-grid-bottom {
    background: #F3F3F3;
  }

.t-header, .t-grid-header, .t-toolbar, .t-grouping-header, .t-tooltip, .t-grid-pager {
  background: #DFE6EC;
  background: #DFDFDF;
}

.t-menu {
  background: #DFDFDF;
}

.t-tabstrip {
  background: inherit !important;
  border: 0px;
}

  .t-tabstrip li {
    background: #CED8E3;
    background: #DFDFDF;
  }

    .t-tabstrip li.t-state-active {
      background: #FFFFFF;
    }

.t-group {
  background: #DFDFDF;
}


.t-menu .t-group .t-item {
  padding: 4px;
}



/* MENU   
----------------------------------------------------------*/
#mainMenu1 {
  position: relative;
  margin: 0;
  text-align: left;
}



#mainMenu .t-link {
  font-weight: normal;
  text-decoration: none;
  font-size: 10pt;
  text-align: left;
}



div.t-window {
  border-radius: 4px;
  moz-border-radius: 4px;
  webkit-border-radius: 4px;
  moz-box-shadow: none;
  webkit-box-shadow: none;
  box-shadow: none;
  border-width: 2px;
}

.tr-alt {
  background-color: #eff2f6;
}

.tr-reg {
  background-color: #FFF;
}



.t-state-selected {
  background-color: #ACDBC8;
}

.t-state-hover:hover {
}



.t-window-content {
  background-color: #FAFBFD;
}

.t-grid-content {
  overflow: visible;
}

  .t-grid-content td {
    vertical-align: top;
  }

.t-tabstrip .t-content, .t-panelbar .t-tabstrip .t-content {
  padding: 4px;
}

.t-scrollable1 {
  background-color: #e9edf3;
  border-width: 0px;
  padding: 2px;
}

.t-button, button.t-button.t-state-disabled:hover, a.t-button.t-state-disabled:hover, .t-state-disabled .t-button:hover {
  background-color: #CFCFCF;
  outline: none;
  -- background-color: #A7CFED;
}

.t-toolbar, .t-grouping-header, .t-grid-pager, .t-group-footer td, .t-grid-footer, .t-footer-template td, .t-widget .t-status,
.t-state-active, .t-header .t-state-active, .t-state-default {
  border-color: #BFBFBF;
}

.t-widget {
  color: #282828;
  border-color: #BFBFBF;
}

.t-calendar .t-header {
  --background-color: #ACDBC8;
  --color: #FFFFFF;
}



.t-calendar th {
  background-color: #ACDBC8;
  color: #4A4A4A;

}



.divButtons {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  position: absolute;
  width: calc(100% - 22px);
  --background-color: #F3F3F3;
  border-radius: 4px;
}


/* MISC  
----------------------------------------------------------*/
.section-title {
  padding: 6px;
  padding-bottom: 4px;
  font-size: 1.2em;
  font-weight: bold;
  color: #494949;
}


.dialog-title {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  color: Navy;
}



.error {
  color: Red;
}

div#title {
  display: block;
  text-align: left;
}

#logindisplay {
  font-size: 1.1em;
  display: block;
  text-align: right;
  margin: 10px;
  color: White;
}

  #logindisplay a:link {
    color: white;
    text-decoration: underline;
  }

  #logindisplay a:visited {
    color: white;
    text-decoration: underline;
  }

  #logindisplay a:hover {
    color: white;
    text-decoration: none;
  }

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
  color: #ff0000;
}

.field-validation-valid {
  display: none;
}

.input-validation-error {
  border: 1px solid #ff0000;
  background-color: #ffeeee;
}

.validation-summary-errors {
  font-weight: bold;
  color: #ff0000;
}

.validation-summary-valid {
  display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, .editor-label {
  --margin: 1em 0 0 0;
}

.display-field, .editor-field {
  margin: 0.5em 0 0 0;
}

.text-box {
  width: 30em;
}

  .text-box.multi-line {
    height: 6.5em;
  }

.tri-state {
  width: 6em;
}

/* Styles for custom
----------------------------------------------------------*/

.display-field-bold {
  font-weight: bold;
}

.display-field-condensed {
  font-family: Roboto, Tahoma;
  vertical-align: top;
}

.display-label-condensed {
  font-family: Roboto, Tahoma;
  vertical-align: top;
  padding-top: 3px;
}

.display-label {
  color: #676767;
  text-align: left;
  vertical-align: top;
  padding-top: 5px;
  padding-left: 3px;
}

.display-label-gray {
  color: Gray;
}

.dl-header-panel {
  background-color: #7891B1;
  background-color: #006C6C;
  color: #FFFFFF;
  height: 22px;
  vertical-align: middle;
  padding-top: 6px !important;
}


.dl-selected-panel {
  margin: 1px;
  padding: 4px;
  padding-left: 4px;
  text-align: left;
  background-color: #B7DBBD;
  border: 1px solid #4B9458;
  color: #387242;
  font-weight: normal;
  border-radius: 4px;
}


.dl-message-panel {
  margin: 1px;
  padding: 4px;
  padding-left: 4px;
  text-align: left;
  background-color: #ffffd2;
  border: 1px solid #c6c600;
  color: #757500;
  font-weight: normal;
  border-radius: 4px;
}

.dl-error-panel {
  margin: 1px;
  padding: 4px;
  padding-left: 4px;
  text-align: left;
  background-color: #ffe4e4;
  border: 1px solid #ff7c7c;
  color: red;
  font-weight: normal;
  border-radius: 4px;
}

.dl-message-panel-message {
  margin: 1px;
  padding: 4px;
  padding-left: 4px;
  text-align: left;
  background-color: #ffffd2;
  border: 1px solid #c6c600;
  color: #757500;
  font-weight: normal;
  border-radius: 4px;
  position: absolute;
  top: 60px;
  z-index: 1000;
  left: 280px;
  width: 600px;
  overflow: auto;
  cursor: pointer;
}


.dl-error-panel-message {
  margin: 1px;
  padding: 4px;
  padding-left: 4px;
  text-align: left;
  background-color: #ffe4e4;
  border: 1px solid #ff7c7c;
  color: red;
  font-weight: normal;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  z-index: 1000;
  left: 800px;
  width: 300px;
  overflow: auto;
  cursor: pointer;
}

.dl-message-panel-light {
  margin: 1px;
  padding: 4px;
  padding-left: 26px;
  text-align: left;
  background-color: #F4F4F4;
  border: 1px solid #C9C9C9;
  color: #999999;
  font-weight: normal;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  top: 10px;
  overflow: auto;
  background-image: url("/Content/images/msg_info_gray16.png");
  background-repeat: no-repeat;
  background-position-y: 2px;
  background-position-x: 2px;
}

.dl-wait {
  padding: 20px;
  padding-top: 30px;
  text-align: center;
  width: 50px;
  height: 50px;
  background-color: #d2d2d2;
  border-radius: 10px;
  position: absolute;
  top: 70px;
  z-index: 99999;
  left: 100px;
  opacity: 0.8;
  display: none;
  __background-image: url("/Content/images/wait.gif");
}


.dl-panel {
  padding: 0px;
  --margin: 2px;
  text-align: left;
  --border-radius: 5px;
  --box-shadow: 1px 1px 2px #888;
}

.dl-panel2 {
  padding: 0px;
  text-align: left;
  border: 1px solid gray;
  --border-radius: 5px;
  --box-shadow: 1px 1px 2px #888;
}


.dl-status-orders-button {
  background-color: white;
  border: 0px;
  color: #7E7A7A;
  text-align: center;
  padding: 3px;
  width: 70px;
  cursor: pointer;
  font-size: 1.2em;
  outline: none;
}


.dl-new-orders-button {
  color: #1e395b;
  border: solid 1px #CCCCCC;
  border-radius: 4px 0px 0px 4px;
  background-color: white;
}

.dl-posted-orders-button {
  color: #1e395b;
  border: solid 1px #CCCCCC;
  background-color: white;
}

.dl-all-orders-button {
  color: #1e395b;
  border: solid 1px #CCCCCC;
  border-radius: 0px 4px 4px 0px;
  background-color: white;
}



.dl-new-orders-button:hover {
  background-color: #5AA37B;
  color: white;
  border: solid 1px #5AA37B;
}

.dl-posted-orders-button:hover {
  background-color: #51A8FF;
  color: white;
  border: solid 1px #51A8FF;
}

.dl-all-orders-button:hover {
  background-color: #FF9155;
  color: white;
  border: solid 1px #FF9155;
}


.dl-new-orders-button-selected {
  background-color: #5AA37B;
  color: white;
  border: solid 1px #5AA37B;
}

.dl-posted-orders-button-selected {
  background-color: #51A8FF;
  color: white;
  border: solid 1px #51A8FF;
}

.dl-all-orders-button-selected {
  background-color: #FF9155;
  color: white;
  border: solid 1px #FF9155;
}


.dl-info-icons {
  margin: 0px;
  padding: 0px;
  position: relative;
  top: -4px;
  z-index: 999;
  --left: 300px;
  height: 18px;
  --width: 200px;
}


.dl-order-count-icon {
  float: left;
  margin: 0px;
  padding: 4px;
  margin-right: 10px;
  width: 26px;
  height: 16px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid grey;
  background-repeat: no-repeat;
  background-position-y: 4px;
  background-position-x: 4px;
  opacity: 1;
  text-align: center;
  font-weight: bold;
}




.dl-new-order-count-icon {
  background-color: #5AA37B;
  border: 1px solid green;
}

  .dl-new-order-count-icon:hover {
    background-color: #4E8B69;
  }


.dl-approved-order-count-icon {
  background-color: #64B1FF;
  border: 1px solid #0073AA;
}

  .dl-approved-order-count-icon:hover {
    background-color: #379BFF;
  }



.dl-picking-order-count-icon {
  background-color: #6186B4;
  border: 1px solid #486B97;
}

  .dl-picking-order-count-icon:hover {
    background-color: #486B97;
  }





.dl-sync-panel-icon {
  float: left;
  margin: 0px;
  padding: 4px;
  margin-right: 10px;
  width: 26px;
  height: 16px;
  cursor: pointer;
  border-radius: 4px;
  background-color: #C68718;
  border: 1px solid #C68718;
  background-image: url("/Content/images/warn.png");
  background-repeat: no-repeat;
  background-position-y: 0px;
  background-position-x: 5px;
  opacity: 1;
}

  .dl-sync-panel-icon:hover {
    background-color: #9F6F13;
  }




.dl-notification-icon {
  float: left;
  margin: 0px;
  padding: 4px;
  text-align: center;
  margin-right: 10px;
  width: 26px;
  height: 16px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #FF0000;
  background-color: #FF0000;
  opacity: 1;
  color: #FFFFFF;
  font-weight: bold;
}

  .dl-notification-icon:hover {
    background-color: #FF2F2F;
  }


.dl-sync-panel-message {
  margin: 1px;
  padding: 4px;
  padding-left: 30px;
  text-align: left;
  background-color: #C68718;
  border: 1px solid #C68718;
  color: #FFF;
  font-weight: bold;
  border-radius: 4px;
  box-shadow: 2px 2px 4px #888;
  position: absolute;
  top: 64px;
  left: 420px;
  width: 360px;
  cursor: pointer;
  opacity: 1;
}



.dl-result-10 /*Demo*/ {
  color: #0080ff;
  font-weight: bold;
  font-size: 10pt;
}

.dl-result-20 /*Reset*/ {
  color: #d379fb;
}

.dl-result-30 /*Cancel*/ {
  color: #808000;
}

.dl-result-40 /*Not Qualified*/ {
  color: #800000;
}

.dl-result-50 /*Sale*/ {
  vertical-align: middle;
  padding: 0px;
  padding-left: 4px;
  padding-right: 4px;
  border: 1px solid #008c00;
  background-color: #59c52c;
  color: White;
  font-weight: bold;
  font-size: 10pt;
  border-radius: 5px;
}


.dl-text-area {
  font-size: 1.2em;
  padding: 6px;
  height: 150px;
  max-height: 150px;
  width: 300px;
  max-width: 300px;
  border-radius: 5px;
  border: 1px solid silver;
  font-family: Inter, Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
}


.dl-text-area-readonly {
  background-color: #EFF2F6;
}

.dl-drop-down-list {
  font-size: 12pt;
}



.rotate270 {
  -ms-transform: rotate(270deg); /* IE 9 */
  -moz-transform: rotate(270deg); /* Firefox */
  -webkit-transform: rotate(270deg); /* Safari and Chrome */
  -o-transform: rotate(270deg); /* Opera */
  transform: rotate(270deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.rotate90 {
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
  transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}





.dl-splitter-v {
  vertical-align: top;
  padding: 2px;
  width: 30px;
  min-width: 30px;
  background-color: #DFDFDF;
  border: #006C6C 1px solid;
  cursor: pointer;
  color: #006C6C;
  margin-left: 3px;
  margin-right: 3px;
  border-radius: 3px;
  padding-top: 6px;
  padding-bottom: 6px;
}

  .dl-splitter-v:hover {
    background-color: #006C6C;
    border: #F7F7F7 1px solid;
    color: #F7F7F7;
  }


  .dl-splitter-v .dl-splitter-item {
    height: 24px;
    vertical-align: middle;
    align-content: center;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 13px;
    padding-top: 5px;
    display: block;
  }

  .dl-splitter-v .dl-splitter-button {
    height: 24px;
    vertical-align: middle;
    align-content: center;
    text-align: center;
    border-radius: 13px;
    margin-top: 2px;
    margin-bottom: 13px;
    padding-top: 6px;
    padding-left: 3px;
    display: none;
  }

  .dl-splitter-v .dl-splitter-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11pt;
    --font-family: Inter, Arial;
    width: 23px;
  }


  .dl-splitter-v.expand {
    background-color: #DFDFDF;
    border: #006C6C 1px solid;
    width: 30px;
    min-width: 30px;
  }

    .dl-splitter-v.expand:hover {
      background-color: #006C6C;
    }

    .dl-splitter-v.expand .dl-splitter-button {
      display: block;
    }

    .dl-splitter-v.expand .dl-splitter-item {
      display: none;
    }




.dl-splitter-h {
  vertical-align: middle;
  padding: 1px;
  height: 24px;
  min-height: 24px;
  width: 99%;
  cursor: pointer;
  margin-top: 3px;
  margin-bottom: 3px;
  border-radius: 3px;
  padding-left: 6px;
  padding-top: 5px;
  background-color: #DFDFDF;
  border: #006C6C 1px solid;
  color: #006C6C;
}

  .dl-splitter-h:hover {
    background-color: #006C6C;
    border: #F7F7F7 1px solid;
    color: #F7F7F7;
  }




  .dl-splitter-h .dl-splitter-item {
    width: 30px;
    vertical-align: middle;
    padding-top: 1px;
    padding-left: 1px;
    display: block;
    float: left;
  }

  .dl-splitter-h .dl-splitter-button {
    width: 30px;
    vertical-align: middle;
    align-content: center;
    text-align: center;
    border-radius: 13px;
    padding-top: 1px;
    padding-left: 1px;
    display: none;
    float: left;
  }

  .dl-splitter-h .dl-splitter-text {
    text-orientation: mixed;
    float: left;
    padding-top: 2px;
  }


  .dl-splitter-h.expand:hover {
    background-color: #006C6C;
  }

  .dl-splitter-h.expand .dl-splitter-button {
    display: block;
  }

  .dl-splitter-h.expand .dl-splitter-item {
    display: none;
  }



/* Styles report
----------------------------------------------------------*/

.report-parameters {
}

  .report-parameters tr {
  }

    .report-parameters tr td {
      vertical-align: top;
      padding: 4px;
    }

  .report-parameters div {
    float: left;
  }


.report-row {
}

  .report-row TD {
    padding-left: 5px;
    padding-right: 6px;
  }

.report-row-alt {
  background-color: #f5f5f5;
}

.report-header {
  padding: 0px;
  padding-left: 5px;
  padding-bottom: 6px;
  font-size: 1.2em;
  font-weight: bold;
}




.report-items {
  padding: 1px;
  margin: 1px;
  overflow: auto;
}

  .report-items ul {
    padding: 1px;
    margin: 1px;
  }

    .report-items ul li {
      list-style: none outside none;
      display: block;
      padding: 5px;
      text-align: left;
    }

.report-item {
  cursor: pointer;
  padding: 1px;
  font-size: 1.1em;
  --background-image: url("/Content/images/24/scroll.png");
  --background-repeat: no-repeat;
  --background-position-y: 8px;
  --background-position-x: 0px;
}

  .report-item div {
    padding-left: 5px;
  }

.report-item-hover {
  background-color: #FFF29D;
}

.report-item-selected {
  background-color: #ACDBC8;
  border-radius: 4px;
}

.report-item:hover {
  background-color: #FFF29D;
}



.custom-menu {
  display: none;
  z-index: 10020;
  position: absolute;
  background-color: #FFF;
  border: 1px solid gray;
  color: #000;
  overflow: hidden;
  --width: 150px;
  white-space: nowrap;
  padding: 5px;
  border-radius: 6px;
}

  .custom-menu li {
    padding: 3px;
    list-style: none;
    list-style-type: none;
    margin: 0px;
    cursor: pointer;
    font-size: 1.0em;
  }

    .custom-menu li:hover {
      background-color: #DDD;
    }

    .custom-menu li label {
      padding: 4px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .custom-menu li .cell {
      padding: 4px;
      padding-left: 10px;
      padding-right: 10px;
      display: inline;
      width: 300px;
      text-align: right;
    }

    .custom-menu li .title {
      padding: 0px;
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;
      font-weight: bold;
    }


.item-quantity-free-label {
  background-color: #CBFEE4;
  border: solid 0.5px #02C865;
  padding: 2px;
  margin: 0px;
  margin-right: 0px;
  height: 24px;
  min-width: 30px;
  font-size: 1.2em;
  text-align: center;
  align-content: center;
}

.item-quantity-free-label-custom {
  background-color: #FDFEE0;
  border: solid 0.5px #BCB305;
}


.item-state {
  width: 18px;
  min-width: 18px;
  padding: 1px;
  background-repeat: no-repeat;
  display: inline-block;
}
 
span.item-state {
  position: relative;
  top: -1px;
  padding-left: 2px;
  padding-right: 2px;
}



.item-state-active-on {
  background-image: url("/Content/images/state_active_on.png");
}

.item-state-active-off {
  background-image: url("/Content/images/state_active_off.png");
}

.item-state-catalog-on {
  background-image: url("/Content/images/state_catalog_on.png");
}

.item-state-catalog-off {
  background-image: url("/Content/images/state_catalog_off.png");
}

.item-state-free-on {
  background-image: url("/Content/images/state_free_on.png");
}

.item-state-free-off {
  background-image: url("/Content/images/state_free_off.png");
}

.item-state-hot-on {
  background-image: url("/Content/images/state_hot_on.png");
}

.item-state-hot-off {
  background-image: url("/Content/images/state_hot_off.png");
}

.item-state-price-on {
  background-image: url("/Content/images/state_price_on.png");
}

.item-state-price-off {
  background-image: url("/Content/images/state_price_off.png");
}

.item-state-store-on {
  background-image: url("/Content/images/state_store_on.png");
}

.item-state-store-off {
  background-image: url("/Content/images/state_store_off.png");
}

.item-state-reduct-on {
  background-image: url("/Content/images/state_reduct_on.png");
}

.item-state-reduct-off {
  background-image: url("/Content/images/state_reduct_off.png");
}

.item-state-negative-on {
  background-image: url("/Content/images/state_negative_on.png");
}

.item-state-negative-off {
  background-image: url("/Content/images/state_negative_off.png");
}



.item-state-hide-catalog {
  background-image: url("/Content/images/state_hide_catalog.png");
}

.item-state-hide-webstore {
  background-image: url("/Content/images/state_hide_webstore.png");
}

.item-state-hide-mobile {
  background-image: url("/Content/images/state_hide_mobile.png");
}

.item-state-hide-portal {
  background-image: url("/Content/images/state_hide_portal.png");
}


.t-button-selected {
  border-color: #f3d64a;
  background-color: #fae185;
  color: #1e395b;
}

.t-button {
  display: inline-block;
  padding: 3px 6px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  border-color: #ccc;
  color: #4f4f4f;
  background-color: #fff;
  outline: none;
}



  .t-button:hover {
    border-color: #b0b0b0;
    background-color: #f0f0f0;
  }


.btn-primary {
  color: #fff;
  background-color: #006C6C !important;
  border-color: #006262 !important;
}

  .btn-primary:hover {
    color: #fff;
    background-color: #006262 !important;
    border-color: #006262 !important;
  }




.btn-success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

  .btn-success:hover {
    color: #fff;
    background-color: #4cae4c;
    border-color: #4cae4c;
  }

.btn-info {
  color: #fff;
  background-color: #5bc0de;
  border-color: #46b8da;
}

  .btn-info:hover {
    color: #fff;
    background-color: #46b8da;
    border-color: #46b8da;
  }


div.item-img-catalog {
  position: relative;
  padding: 2px;
  height: 74px;
  width: 74px;
  float: left;
}

img.item-img-catalog {
  max-height: 80px;
  max-width: 80px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


div.item-img-catalog-edit {
  position: relative;
  height: 50px;
  width: 100%;
  background: gray;
  display: none;
  text-align: center;
  vertical-align: middle;
  color: white;
  opacity: 0.9;
  color: #000;
  background-color: silver;
  border-color: #2e6da4;
  border-radius: 4px;
  border: 1px solid #fff
}



div.item-img-catalog-edit-label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80%;
  margin: auto;
}


div.item-img-edit {
  position: relative;
  height: 250px;
  width: 250px;
  text-align: center;
  padding: 3px;
  border: 1px solid gray;
}

img.item-img-edit {
  max-height: 250px;
  max-width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

div.item-img-edit-toolbar {
  width: 250px;
  padding: 3px;
  text-align: left;
  background-color: #DAE1EC;
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
}

.item-img-edit-button {
  margin-left: 1px;
  margin-right: 2px;
  width: 29px;
  text-align: center;
}




div.company-img {
  --margin-top: 10px;
  --text-align: left;
  padding: 0px;
  --position: absolute;
  --left: 540px;
  --border: 1px solid silver;
  --border-radius: 6px;
  width: 280px;
  height: 300px;
}



div.company-img-edit {
  position: relative;
  height: 200px;
  width: 240px;
  text-align: center;
  padding: 3px;
}

img.company-img-edit {
  max-height: 200px;
  max-width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

div.company-img-edit-toolbar {
  padding: 3px;
  text-align: left;
  color: gray;
  font-weight: bold;
  text-align: center;
}

.company-img-edit-button {
  margin-left: 3px;
  margin-right: 3px;
  width: 30px;
  text-align: center;
  position: relative;
  z-index: 100;
  left: 95px;
  top: 205px;
}




div.style-img {
  padding: 0px;
  border: 1px solid silver;
  border-radius: 6px;
  width: 240px;
  height: 165px;
}


div.style-img-edit {
  position: relative;
  height: 100px;
  width: 240px;
  text-align: center;
  padding: 3px;
}

img.style-img-edit {
  max-height: 100px;
  max-width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

div.style-img-edit-toolbar {
  padding: 3px;
  text-align: left;
  color: gray;
  font-weight: bold;
  text-align: center;
}

.style-img-edit-button {
  margin-left: 3px;
  margin-right: 3px;
  width: 30px;
  text-align: center;
  position: relative;
  z-index: 100;
  left: 90px;
  top: 103px;
}





.company-url {
  border-radius: 6px;
  margin: 5px;
  margin-top: 20px;
  padding: 10px;
  border: solid 1px silver;
  float: left;
  width: 95%;
}



input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin-bottom: 0px;
  vertical-align: text-bottom;
}

.t-header input[type='checkbox'] {
  margin-bottom: 0px;
  margin-top: 0px;
  vertical-align: text-bottom;
}

.t-grid-toolbar input[type='checkbox'] {
  margin-bottom: 0px;
  margin-top: 0px;
  vertical-align: text-bottom;
}


.multi-edit-options {
}

  .multi-edit-options td.display-label {
    padding: 2px;
    padding-top: 5px;
    width: 270px;
    height: 30px;
    vertical-align: top;
    text-align: right;
  }


  .multi-edit-options td.display-control {
    padding: 2px;
    padding-right: 20px;
    height: 30px;
    vertical-align: top;
    text-align: left;
  }


.t-icon-calendar {
  background-image: url('/Content/Images/calendar1.png');
  width: 16px;
  height: 24px;
  background-position: 0px 0px;
}


.body-panel {
  padding: 3px;
  background-color: #f9f9f9;
  text-align: left;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid #00A6A6;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 6px;
}

.body-panel-header {
  padding: 3px;
  padding-top: 7px;
  text-align: center;
  font-size: 1.4em;
  font-weight: normal;
  color: #191919;
}



/* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
  }

/* The container <div> - needed to position the dropdown content */
.dropdown-button {
  position: relative;
  display: inline-block;
  --font-size: 9pt;
  font-weight: normal;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-button-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  border: 1px solid #00A6A6;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  overflow: auto;
  font-size: 9pt;
  font-weight: normal;
  border-radius: 6px;
}




  /* Links inside the dropdown */
  .dropdown-button-content a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
  }


    /* Change color of dropdown links on hover */
    .dropdown-button-content a:hover {
      background-color: #fae185
    }

    .dropdown-button-content a img {
      padding-right: 10px;
      padding-bottom: 5px;
    }

    .dropdown-button-content a i {
      padding-right: 10px;
      padding-bottom: 5px;
    }


.dropdown-button-content-item {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

  .dropdown-button-content-item:hover {
    background-color: #fae185
  }

  .dropdown-button-content-item a {
    padding: 2px;
    cursor: pointer
  }


.dropdown-button #btnMore {
  margin-right: 5px;
  padding-left: 10px;
  padding-right: 10px;
  display: inline;
  _height: 25px;
  font-weight: bold;
}





.dropdown-context {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  border: 1px solid #00A6A6;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  overflow: auto;
  font-size: 9pt;
  font-weight: normal;
  border-radius: 6px;
}


/* Dropdown Content (Hidden by Default) */
.dropdown-context-content {
  padding: 0px;
}




  /* Links inside the dropdown */
  .dropdown-context-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }


    /* Change color of dropdown links on hover */
    .dropdown-context-content a:hover {
      background-color: #fae185
    }

    .dropdown-context-content a img {
      padding-right: 10px;
      padding-bottom: 5px;
    }

    .dropdown-context-content a i {
      padding-right: 10px;
      padding-bottom: 5px;
    }


.dropdown-context-content-item {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

  .dropdown-context-content-item:hover {
    background-color: #fae185
  }

  .dropdown-context-content-item a {
    padding: 2px;
    cursor: pointer
  }







button .fa {
  padding-top: 6px;
  padding-right: 6px;
  padding-left: 2px;
  padding-bottom: 4px;
}



button .fa-2x {
  vertical-align: middle;
}




.item-inventory-quantity-on-hand {
  font-weight: bold;
  cursor: pointer;
  --text-decoration: underline;
}

.item-inventory-quantity-on-hand1 {
  cursor: pointer;
  text-decoration: underline;
}

.item-grid-display-string div {
  padding-top: 1px;
  padding-bottom: 1px;
}

.item-grid-qty-button {
  width: 32px;
  padding: 0;
  margin: 0px;
  text-align: center;
  height: 29px;
}

  .item-grid-qty-button .fa {
    padding: 0;
  }

.item-grid-image {
  cursor: pointer;
}

.item-grid-thumb-image {
  max-height: 70px;
  max-width: 70px;
}

.item-grid-description {
  white-space: normal;
}

.item-grid-category {
  background-color: #006C6C;
}

.item-grid-category-name {
  white-space: normal;
  margin: 0px;
  font-weight: bold;
  color: white;
  padding: 4px 4px 4px 10px;
  font-size: 13pt;
}



.report-row-type-total {
  font-weight: bold;
}

.report-row-type-grand-total {
  font-weight: bold;
  text-decoration: underline;
}





.ld-select-list {
  cursor: pointer;
}

  .ld-select-list tr {
    background-color: #eff2f6;
  }

    .ld-select-list tr.alt {
      background-color: #FFFFFF;
    }

    .ld-select-list tr:hover {
      background-color: #fae185;
    }

    .ld-select-list tr.selected {
      background-color: #ACDBC8;
    }

    .ld-select-list tr.message {
      color: red;
      padding: 10px;
      font-size: 16pt;
      text-align: center;
      font-weight: bold;
    }

    .ld-select-list tr td {
      white-space: normal;
    }


      .ld-select-list tr td img {
        float: left;
        padding: 6px;
      }

      .ld-select-list tr td div {
        padding-left: 2px;
        padding-right: 2px;
      }

        .ld-select-list tr td div span {
          padding-right: 2px;
        }





.item-tag-sale {
  background-image: url("/Content/images/item_tag_sale.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-new {
  background-image: url("/Content/images/item_tag_new.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}



.item-tag-new-sale {
  background-image: url("/Content/images/item_tag_new_sale.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}


.item-tag-best-seller {
  background-image: url("/Content/images/item_tag_best_seller.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}


.item-tag-sold-out {
  background-image: url("/Content/images/item_tag_sold_out.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-out-of-stock {
  background-image: url("/Content/images/item_tag_out_of_stock.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}



.item-tag-low-in-stock {
  background-image: url("/Content/images/item_tag_low_in_stock.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}


.item-tag-kosher {
  background-image: url("/Content/images/item_tag_kosher.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-halal {
  background-image: url("/Content/images/item_tag_halal.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-gluten-free {
  background-image: url("/Content/images/item_tag_gluten_free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-bio {
  background-image: url("/Content/images/item_tag_bio.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}


.item-tag-100natural {
  background-image: url("/Content/images/item_tag_100natural.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}


.item-tag-health {
  background-image: url("/Content/images/item_tag_health.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}



.item-tag-10-1free {
  background-image: url("/Content/images/item_tag_10_1free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-10-2free {
  background-image: url("/Content/images/item_tag_10_2free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-10-3free {
  background-image: url("/Content/images/item_tag_10_3free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-5-1free {
  background-image: url("/Content/images/item_tag_5_1free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-special-offer {
  background-image: url("/Content/images/item_tag_special_offer.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-price-by-request {
  background-image: url("/Content/images/item_tag_price_by_request.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}


.item-tag-pre-order {
  background-image: url("/Content/images/item_tag_pre_order.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-1-1free {
  background-image: url("/Content/images/item_tag_1_1free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-organic {
  background-image: url("/Content/images/item_tag_organic.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-coming-soon {
  background-image: url("/Content/images/item_tag_coming_soon.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}



.item-tag-new-price {
  background-image: url("/Content/images/item_tag_new_price.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-new-better-price {
  background-image: url("/Content/images/item_tag_new_better_price.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-back-in-stock {
  background-image: url("/Content/images/item_tag_back_in_stock.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-limit-1-per-order {
  background-image: url("/Content/images/item_tag_limit_1_per_order.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-limit-2-per-order {
  background-image: url("/Content/images/item_tag_limit_2_per_order.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-limit-3-per-order {
  background-image: url("/Content/images/item_tag_limit_3_per_order.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}




.item-tag-buy-2-get-1-free {
  background-image: url("/Content/images/item_tag_buy_2_get_1_free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-buy-15-get-2-free {
  background-image: url("/Content/images/item_tag_buy_15_get_2_free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-buy-20-get-3-free {
  background-image: url("/Content/images/item_tag_buy_20_get_3_free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-buy-20-get-5-free {
  background-image: url("/Content/images/item_tag_buy_20_get_5_free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-buy-60-get-6-free {
  background-image: url("/Content/images/item_tag_buy_60_get_6_free.png");
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.item-tag-list-view {
  background-size: 100%;
}





/* ControlSelectList */
/* The container <div> - needed to position the dropdown content */
.control-select-list {
  position: relative;
  display: inline-block;
}

  .control-select-list textarea {
    float: left;
    resize: none;
    cursor: pointer;
  }

  .control-select-list input {
    float: left;
    resize: none;
    cursor: pointer;
  }



/* Dropdown Content (Hidden by Default) */
.control-select-list-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  border: 1px solid #00A6A6;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 90000;
  border-radius: 5px;
  padding: 1px;
  padding-bottom: 2px;
}

  .control-select-list-content div.item {
    overflow: auto;
  }

  .control-select-list-content table {
    border-collapse: collapse;
    border: none;
    width: 100%;
  }


  /* Links inside the dropdown */
  .control-select-list-content tr {
    color: black;
    padding: 2px;
    text-decoration: none;
    cursor: pointer;
  }


.control-select-list-header {
}

.control-select-list-content tr.selected {
  background-color: #ACDBC8
}

/* Change color of dropdown links on hover */
.control-select-list-content tr.item:hover {
  background-color: #fae185
}

.control-select-list-content td {
  border: none;
  padding: 6px;
  text-align: left !important;
}

  .control-select-list-content td.header {
    color: gray;
    background-color: #ebebeb;
    border-bottom: solid 1px lightgray;
  }

  .control-select-list-content td.checkbox {
    width: 26px;
  }

  .control-select-list-content td.close {
    width: 16px;
    cursor: pointer;
  }

  .control-select-list-content td.footer {
    color: gray;
    background-color: lightgray;
  }



.whats-new {
  padding-bottom: 20px;
}

  .whats-new ul {
    background: none !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .whats-new li {
    background: none !important;
  }

  .whats-new p {
    margin-top: 4px !important;
    margin-bottom: 0px !important;
  }


/* Custom styles */
.control-select-list-text {
  margin: 0px !important;
  --min-height: 22px !important;
  background-color: #FFFFFF;
  border: 1px solid #D8D8D8 !important;
  border-radius: 4px;
  --font-size: 11pt;
  padding-left: 6px;
  outline: none;
  font-family: Inter, Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
}

.control-select-list-button {
  width: 30px !important;
  height: 26px !important;
}


.control-select-list-text-search {
  margin: 0px !important;
  height: 26px !important;
  outline: none;
}

.control-select-list-button-search {
  width: 30px !important;
  height: 30px !important;
}


.control-select-list-text-select-list {
  border-radius: 4px;
  border: 1px solid #D8D8D8 !important;
  --font-size: 1em;
  --font-family: Inter, Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
}





.setting-panels {
  float: left;
  padding: 10px;
  width: 700px;
  overflow: auto;
  margin-top: 10px;
  margin-left: 10px;
  border: solid 1px #00A6A6;
  border-radius: 4px;
  background-color: white;
}




.setting-panel {
  text-align: left;
  padding: 10px;
  display: none;
}

.setting-panel-header {
  font-weight: bold;
  font-size: 1.2em;
}

.setting-panel-sub-header {
  font-weight: bold;
  font-size: 1.0em;
  color: #006C6C;
  padding: 6px;
}

.setting-nav {
  margin-top: 10px;
  width: 200px;
  padding: 4px;
  float: left;
  height: 400px;
  border: solid 1px #00A6A6;
  border-radius: 4px;
  background-color: white;
  overflow: auto;
}





  .setting-nav ul {
    padding: 1px;
    margin: 1px;
  }

    .setting-nav ul li {
      list-style: none outside none;
      display: block;
      background-color: white;
    }

.setting-nav-item {
  padding: 2px;
  text-align: left;
  cursor: pointer;
  padding: 1px;
  font-size: 1.1em;
}


  .setting-nav-item div {
    padding: 5px;
  }


.setting-nav ul li:hover {
  background-color: #FFF29D;
}

.setting-nav ul li.selected {
  background-color: #ACDBC8;
  border-radius: 4px;
}




.dl-grid {
}

  .dl-grid tr {
  }

    .dl-grid tr:hover {
      background-color: #FFF29D;
    }

    .dl-grid tr td {
      vertical-align: top;
    }




.filter-panel {
  display: none;
  z-index: 9000;
  position: absolute;
  background-color: #FFF;
  border: 1px solid gray;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  padding: 5px;
  padding-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.inv-reorder-level-good {
  color: green;
}

.inv-reorder-level- {
  display: none;
}

.inv-reorder-level-under-25 {
  color: maroon;
}

.inv-reorder-level-under-50 {
  color: red;
}

.inv-reorder-level-under-75 {
  color: orange;
}

.inv-reorder-level-under-100 {
  color: gold;
}




#customerDetailViewFloatWindow {
  width: 400px;
  padding: 0px;
  margin-bottom: 6px;
  text-align: left;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  border-width: 1px;
  opacity: 1
}

  #customerDetailViewFloatWindow:hover {
    opacity: 1 !important;
  }

#customerDetailViewFloatWindowTabs {
}


  #customerDetailViewFloatWindowTabs:hover {
  }

.picking-status {
  padding: 10px;
  --height: 80px;
  text-align: center;
  font-size: 11pt;
  border-radius: 4px;
}



.picking-status-count-panel {
  margin-top: 1px;
  padding: 2px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left;
  font-weight: bold;
  border-radius: 4px;
  width: 100%;
  font-size: 10pt;
  display: inline-block;
}


.picking-status-panel-notstarted {
  background-color: #C1C1C1;
  border: 1px solid #C1C1C1;
  color: #3A3A3A;
}


.picking-status-panel-picking {
  background-color: #486B97;
  border: 1px solid #486B97;
  color: white;
}

.picking-status-panel-completed {
  background-color: #4b944e;
  border: 1px solid #4b944e;
  color: white;
}

.picking-status-panel-total {
  background-color: #585858;
  border: 1px solid #585858;
  color: white;
}

.picking-status-panel-select {
  background-color: #804040;
  border: 1px solid #804040;
  color: white;
}


.picking-status-panel-overpicked {
  background-color: #DD0005;
  border: 1px solid #DD0005;
  color: yellow;
}

.picking-status-panel-addition {
  background-color: #994655;
  border: 1px solid #994655;
  color: yellow;
}

.picking-status-panel-on {
  --border: 2px solid #FAE185;
  outline-style: solid;
  outline-color: #50BBF5;
  outline-width: 3px;
}


.picking-status-panel {
  margin: 2px;
  --padding: 4px;
  --padding-left: 8px;
  --padding-right: 8px;
  text-align: left;
  font-weight: normal;
  border-radius: 4px;
  min-width: 220px;
  font-size: 9pt;
  display: inline-block;
  height: 90px;
  overflow: hidden;
}

.picking-status-panel-order-outline {
  outline-style: solid;
  outline-color: #50BBF5;
  outline-width: 3px;
}




  .picking-status-panel .picking-status-panel-content {
    padding: 4px;
    padding-left: 8px;
    overflow: hidden;
  }




.picking-status-divider {
  margin: 2px;
  --padding: 4px;
  --padding-left: 8px;
  --padding-right: 8px;
  --text-align: left;
  font-weight: normal;
  border-radius: 4px;
  min-width: 250px;
  font-size: 10pt;
  --display: inline-block;
  --height: 90px;
  padding: 4px;
  padding-left: 8px;
  background-color: #D2D2D2;
  background-color: #A7A7A7;
  border: 2px solid #D2D2D2;
  color: #3A3A3A;
  color: #FFFFFF;
}






.picking-status-panel-selected {
  background-color: #FDEFC1;
  border: 1px solid #A98507;
  color: #917206;
  height: 130px;
  white-space: normal;
  overflow: hidden;
}






.picking-status-panel-selected-title {
  background-color: #A98507;
  color: white;
  padding: 4px;
  padding-left: 8px;
  margin: 0px;
  text-align: center;
  font-weight: bold;
}

.picking-status-panel-message {
  margin: 1px;
  text-align: left;
  font-weight: normal;
  border-radius: 4px;
  font-size: 9pt;
  background-color: #D3D3D3;
  border: 1px solid #D3D3D3;
  color: #811010;
  font-weight: normal;
  font-size: 12px;
  font-weight: bold;
  height: 100px;
  width: 200px !important;
  white-space: normal;
  overflow: auto;
}

.picking-status-panel-tool {
  background-color: #D3D3D3;
  border: 1px solid #D3D3D3;
  color: gray;
  font-weight: normal;
  height: 90px;
  width: 250px;
  padding: 6px;
}

.picking-status-panel-error {
  background-color: #ECA6A6;
  border: 1px solid #B02828;
  color: #B02828;
  height: 80px;
  width: 250px;
}




.picking-search-header {
  white-space: nowrap;
  padding-bottom: 3px;
  vertical-align: middle;
  height: 110px;
  min-width: 1000px;
  overflow-x: auto;
  overflow-y: auto;
}





.picking-status-table-panel {
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: left;
  font-weight: normal;
  border-radius: 4px;
  padding-left: 2px;
  padding-right: 2px;
  --width: 150px;
  font-size: 8pt;
  display: block;
  cursor: default;
}

  .picking-status-table-panel .picking-status-table-panel-content {
    padding-left: 2px;
    padding-right: 2px;
    cursor: default;
  }

.picking-status-table-header {
  margin-top: 3px;
  margin-bottom: 3px;
  font-weight: normal;
  border-radius: 4px;
  font-size: 8pt;
  padding: 2px;
  padding-top: 4px;
  padding-bottom: 4px;
  background-color: #585858;
  border: 2px solid #585858;
  color: #FFFFFF;
  cursor: default;
}




@media only screen and (max-device-width: 880px) {
  .picking-status-panel {
    height: 110px;
  }

  .picking-status-panel-message {
    height: 116px;
  }

  .picking-status-panel-tool {
    height: 116px;
  }

  .picking-status-panel-selected {
    height: 100px;
  }

  .picking-search-header {
    height: 120px;
  }
}


.item-receipt-status {
  padding: 10px;
  height: 55px;
  text-align: center;
  font-size: 11pt;
  border-radius: 4px;
}

.item-receipt-status-panel-notstarted {
  background-color: #C1C1C1;
  border: 1px solid #C1C1C1;
  color: #3A3A3A;
}


.item-receipt-status-panel-completed {
  background-color: #4b944e;
  border: 1px solid #4b944e;
  color: white;
}








.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 3px;
}

.scrolling-wrapper-card {
  flex: 0 0 auto;
  margin: 3px;
}


.itemTag {
  margin: 1px 2px 1px 1px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #33b86f;
  color: #fff;
  background-color: #33b86f;
  white-space: nowrap;
}

.customTag {
  margin: 1px 2px 1px 1px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #3886ca;
  color: #fff;
  background-color: #3886ca;
  white-space: nowrap;
}

.customer-tag {
  margin: 1px 2px 1px 1px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #FF8040;
  color: #fff;
  background-color: #FF8040;
  white-space: nowrap;
}

.invoice-category {
  margin: 1px 2px 1px 2px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #FF8040;
  color: #fff;
  background-color: #FF8040;
  white-space: nowrap;
}

.invoice-category-grid {
  margin: 3px 1px 3px 1px;
  padding: 0px 2px 0px 2px;
  border-radius: 4px;
  --border: 1px solid #FF8040;
  color: #fff;
  background-color: #FF8040;
  white-space: nowrap;
}

.item-lot-grid {
  margin: 3px 1px 3px 1px;
  padding: 0px 2px 0px 2px;
  border-radius: 4px;
  --border: 1px solid #006C6C;
  color: #fff;
  background-color: #006C6C;
  white-space: nowrap;
}

.item-tag-grid {
  margin: 3px 1px 3px 1px;
  padding: 0px 2px 0px 2px;
  border-radius: 4px;
  --border: 1px solid #4A7960;
  color: #fff;
  background-color: #4A7960;
  white-space: nowrap;
}


.order-tag {
  margin: 0px 2px 0px 2px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #3886ca;
  color: #fff;
  background-color: #3886ca;
  white-space: nowrap;
}


.order-return-tag {
  margin: 0px 2px 0px 2px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #FF5B5B;
  color: #fff;
  background-color: #FF5B5B;
  white-space: nowrap;
}


.vendor-connect-tag {
  margin: 0px 2px 0px 2px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #5AA37B;
  color: #fff;
  background-color: #5AA37B;
  white-space: nowrap;
}

.vendor-connect-error-tag {
  margin: 0px 2px 0px 2px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #FF0000;
  color: #fff;
  background-color: #FF0000;
  white-space: nowrap;
}


.vendor-connect-posted-tag {
  margin: 0px 2px 0px 2px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #5AA37B;
  color: #fff;
  background-color: #5AA37B;
  white-space: nowrap;
}


.vendor-connect-waiting-tag {
  margin: 0px 2px 0px 2px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #5AA37B;
  color: #5AA37B;
  background-color: #fff;
  white-space: nowrap;
}


.minMaxOrderQty {
  margin: 1px 2px 1px 1px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #cc2700;
  color: #fff;
  background-color: #cc2700;
  white-space: nowrap;
}


.onHandBox {
  margin: 1px 2px 1px 1px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #CEF2DE;
  background-color: #CEF2DE;
  white-space: nowrap;
}

.onHandBoxNegative {
  margin: 1px 2px 1px 1px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #F1CFC7;
  background-color: #F1CFC7;
  white-space: nowrap;
}


.onHandBoxZero {
  margin: 1px 2px 1px 1px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
  border: 1px solid #E0E0E0;
  background-color: #E0E0E0;
  white-space: nowrap;
}


.banner-manager-grid-image {
}

  .banner-manager-grid-image img {
    max-width: 300px;
    max-height: 200px;
  }





/*MUST BE AT THE END OF FILE 
  Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.padding, .padding4 {
  padding: 4px;
}

.padding0 {
  padding: 0px !important;
}

.padding1 {
  padding: 1px;
}

.padding2 {
  padding: 2px;
}


.padding6 {
  padding: 6px;
}

.padding8 {
  padding: 10px;
}


.padding10 {
  padding: 10px;
}

.padding15 {
  padding: 15px;
}

.padding20 {
  padding: 20px;
}








.pleft0 {
  padding-left: 0px !important;
}

.pleft1 {
  padding-left: 1px;
}

.pleft2 {
  padding-left: 2px;
}

.pleft4 {
  padding-left: 2px;
}


.pleft6 {
  padding-left: 6px;
}

.pleft8 {
  padding-left: 10px;
}


.pleft10 {
  padding-left: 10px;
}

.pleft15 {
  padding-left: 15px;
}

.pleft20 {
  padding-left: 20px;
}







.pright0 {
  padding-right: 0px !important;
}

.pright1 {
  padding-right: 1px;
}

.pright2 {
  padding-right: 2px;
}

.pright4 {
  padding-right: 2px;
}


.pright6 {
  padding-right: 6px;
}

.pright8 {
  padding-right: 10px;
}


.pright10 {
  padding-right: 10px;
}

.pright15 {
  padding-right: 15px;
}

.pright20 {
  padding-right: 20px;
}





.padding-h, .padding-h4 {
  padding-left: 4px;
  padding-right: 4px;
}

.padding-h0 {
  padding-left: 0px;
  padding-right: 0px;
}

.padding-h1 {
  padding-left: 1px;
  padding-right: 1px;
}

.padding-h2 {
  padding-left: 2px;
  padding-right: 2px;
}

.padding-h3 {
  padding-left: 3px;
  padding-right: 3px;
}

.padding-h5 {
  padding-left: 5px;
  padding-right: 5px;
}

.padding-h6 {
  padding-left: 6px;
  padding-right: 6px;
}

.padding-h8 {
  padding-left: 8px;
  padding-right: 8px;
}

.padding-h10 {
  padding-left: 10px;
  padding-right: 10px;
}

.padding-v, .padding-v4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.padding-v0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.padding-v1 {
  padding-top: 1px;
  padding-bottom: 1px;
}

.padding-v2 {
  padding-top: 2px;
  padding-bottom: 2px;
}

.padding-v3 {
  padding-top: 3px;
  padding-bottom: 3px;
}


.padding-v5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.padding-v6 {
  padding-top: 6px;
  padding-bottom: 6px;
}




.padding-t, .padding-t4 {
  padding-top: 4px;
}

.padding-t0 {
  padding-top: 0px;
}

.padding-t1 {
  padding-top: 1px;
}

.padding-t2 {
  padding-top: 2px;
}

.padding-t3 {
  padding-top: 3px;
}

.padding-t5 {
  padding-top: 5px;
}

.padding-t6 {
  padding-top: 6px;
}

.padding-t8 {
  padding-top: 8px;
}

.padding-t10 {
  padding-top: 10px;
}






.padding-l, .padding-l4 {
  padding-left: 4px;
}

.padding-l0 {
  padding-left: 0px;
}

.padding-l1 {
  padding-left: 1px;
}

.padding-l2 {
  padding-left: 2px;
}

.padding-l3 {
  padding-left: 3px;
}

.padding-l5 {
  padding-left: 5px;
}

.padding-l6 {
  padding-left: 6px;
}

.padding-l8 {
  padding-left: 8px;
}

.padding-l10 {
  padding-left: 10px;
}

.padding-l15 {
  padding-left: 15px;
}

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



.padding-r, .padding-r4 {
  padding-right: 4px;
}

.padding-r0 {
  padding-right: 0px;
}

.padding-r1 {
  padding-right: 1px;
}

.padding-r2 {
  padding-right: 2px;
}

.padding-r3 {
  padding-right: 3px;
}

.padding-r5 {
  padding-left: 5px;
  padding-right: 5px;
}

.padding-r6 {
  padding-right: 6px;
}

.padding-r8 {
  padding-right: 8px;
}

.padding-r10 {
  padding-right: 10px;
}

.padding-r15 {
  padding-right: 15px;
}

.padding-r20 {
  padding-right: 20px;
}





.margin, .margin4 {
  margin: 4px;
}

.margin1 {
  margin: 1px;
}

.margin2 {
  margin: 2px;
}

.margin6 {
  margin: 6px;
}

.margin10 {
  margin: 10px;
}

.margin15 {
  margin: 15px;
}

.margin20 {
  margin: 20px;
}


.margin-h, .margin-h4 {
  margin-left: 4px;
  margin-right: 4px;
}

.margin-h2 {
  margin-left: 2px;
  margin-right: 2px;
}

.margin-h6 {
  margin-left: 6px;
  margin-right: 6px;
}

.margin-h8 {
  margin-left: 8px;
  margin-right: 8px;
}

.margin-h10 {
  margin-left: 10px;
  margin-right: 10px;
}

.margin-v, .margin-v4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.margin-v2 {
  margin-top: 2px;
  margin-bottom: 2px;
}

.margin-v6 {
  margin-top: 6px;
  margin-bottom: 6px;
}



.margin-r, .margin-r4 {
  margin-right: 4px;
}

.margin-r0 {
  margin-right: 0px;
}

.margin-r1 {
  margin-right: 1px;
}

.margin-r2 {
  margin-right: 2px;
}

.margin-r3 {
  margin-right: 3px;
}

.margin-r5 {
  margin-left: 5px;
  margin-right: 5px;
}

.margin-r6 {
  margin-right: 6px;
}

.margin-r8 {
  margin-right: 8px;
}

.margin-r10 {
  margin-right: 10px;
}

.margin-r15 {
  margin-right: 15px;
}

.margin-r20 {
  margin-right: 20px;
}


.margin-l, .margin-lr4 {
  margin-right: 4px;
}

.margin-lr0 {
  margin-right: 0px;
}

.margin-lr1 {
  margin-right: 1px;
}

.margin-lr2 {
  margin-right: 2px;
}

.margin-lr3 {
  margin-right: 3px;
}

.margin-lr5 {
  margin-left: 5px;
  margin-right: 5px;
}

.margin-lr6 {
  margin-right: 6px;
}

.margin-lr8 {
  margin-right: 8px;
}

.margin-lr10 {
  margin-right: 10px;
}

.margin-lr15 {
  margin-right: 15px;
}

.margin-lr20 {
  margin-right: 20px;
}



.w10 {
  width: 10px;
}
.w12 {
  width: 12px;
}
.w14 {
  width: 14px;
}
.w16 {
  width: 16px;
}
.w18 {
  width: 18px;
}


.w20 {
  width: 20px;
}

.w25 {
  width: 25px;
}

.w30 {
  width: 30px;
}

.w35 {
  width: 35px;
}

.w40 {
  width: 40px;
}

.w50 {
  width: 50px;
}

.w60 {
  width: 60px;
}

.w70 {
  width: 70px;
}

.w80 {
  width: 80px;
}

.w90 {
  width: 90px;
}

.w100 {
  width: 100px;
}

.w110 {
  width: 110px;
}

.w120 {
  width: 120px;
}

.w130 {
  width: 130px;
}

.w140 {
  width: 140px;
}

.w150 {
  width: 150px;
}

.w160 {
  width: 160px;
}

.w170 {
  width: 170px;
}

.w180 {
  width: 180px;
}

.w190 {
  width: 190px;
}

.w200 {
  width: 200px;
}

.w220 {
  width: 220px;
}

.w240 {
  width: 240px;
}

.w250 {
  width: 250px;
}

.w260 {
  width: 260px;
}

.w280 {
  width: 280px;
}

.w300 {
  width: 300px;
}

.w350 {
  width: 350px;
}

.w400 {
  width: 400px;
}

.w450 {
  width: 450px;
}

.w500 {
  width: 500px;
}

.w600 {
  width: 600px;
}

.w700 {
  width: 700px;
}

.w800 {
  width: 800px;
}


.h10 {
  height: 10px
}

.h12 {
  height: 12px
}

.h14 {
  height: 14px
}


.h16 {
  height: 16px
}

.h18 {
  height: 18px
}


.h20 {
  height: 20px
}

.h22 {
  height: 22px
}

.h23 {
  height: 23px
}

.h24 {
  height: 24px
}


.h25 {
  height: 25px
}

.h30 {
  height: 30px
}

.h40 {
  height: 40px
}

.h50 {
  height: 50px
}

.h60 {
  height: 60px
}

.h70 {
  height: 70px
}

.h80 {
  height: 80px
}

.h90 {
  height: 90px
}

.h100 {
  height: 100px
}

.h110 {
  height: 110px
}

.h120 {
  height: 120px
}

.h130 {
  height: 130px
}

.h140 {
  height: 140px
}

.h150 {
  height: 150px
}

.h160 {
  height: 160px
}

.h170 {
  height: 170px
}

.h180 {
  height: 180px
}

.h190 {
  height: 190px
}

.h200 {
  height: 200px
}

.h300 {
  height: 300px
}

.h400 {
  height: 400px
}

.h500 {
  height: 500px
}

.f7 {
  font-size: 7pt !important;
}

.f8 {
  font-size: 8pt !important;
}

.f9 {
  font-size: 9pt !important;
}


.f10 {
  font-size: 10pt !important;
}

.f11 {
  font-size: 11pt !important;
}


.f12 {
  font-size: 12pt !important;
}

.f13 {
  font-size: 13pt !important;
}

.f14 {
  font-size: 14pt !important;
}

.f15 {
  font-size: 15pt !important;
}

.f16 {
  font-size: 16pt !important;
}

.f17 {
  font-size: 17pt !important;
}

.f18 {
  font-size: 18pt !important;
}


.radius {
  border-radius: 4px;
}

.radius2 {
  border-radius: 2px;
}

.radius6 {
  border-radius: 6px;
}

.radius8 {
  border-radius: 8px;
}

.radius-t {
  border-radius: 4px 4px 0px 0px;
}

.radius-b {
  border-radius: 0px 0px 4px 4px;
}


.border {
  border: 1px solid #CCCCCC;
}


.border-l {
  border-left: 1px solid #CCCCCC;
}
.border-r {
  border-right: 1px solid #CCCCCC;
}
.border-t {
  border-top: 1px solid #CCCCCC;
}
.border-b {
  border-bottom: 1px solid #CCCCCC;
}




.border-black {
  border: 1px solid black !important
}

.border-gray {
  border: 1px solid #767676 !important
}

.gray {
  color: gray;
}


.grey {
  color: grey;
}



.grey1 {
  color: #B7B7B7;
}


.red {
  color: red;
}

.lightgray {
  color: lightgray;
}

.lightgrey {
  color: lightgrey;
}

.darkgray {
  color: #696969;
}

.darkgray1 {
  color: #3A3A3A;
}


.black {
  color: black;
}


i.checkbox {
  color: #626262;
}


.white {
  color: #FFFFFF !important;
}

.gold {
  color: gold;
}

.green {
  color: #5AA37B;
}

.purple {
  color: #9473B9;
}

.navy {
  color: #337AB7;
}

.blue {
  color: #0072C6;
}


.teal {
  color: #006C6C;
}

.braun {
  color: #C68718;
}

.orange {
  color: #FF5900;
}

.bg-black {
  background-color: black;
}


.bg-gold {
  background-color: gold;
}

.bg-green {
  background-color: #5AA37B;
}

.bg-green1 {
  background-color: #9FCAB3;
 
}

.bg-blue {
  background-color: #0681DB;
}

.bg-blue1 {
  background-color: #59B6FB;
}

.bg-navy {
  background-color: #045897;
}



.bg-red {
  background-color: red;
}

.bg-yelloow {
  background-color: #FFFF00;
}

.bg-teal {
  background-color: #006C6C;
}


.bg-lightteal {
  background-color: #D1E9E9;
}

.bg-lightteal-i {
  background-color: #D1E9E9 !important;
}

.bg-lightteal1 {
  background-color: #BBDBDB;
}


.bg-lightteal2 {
  background-color: #A0CDCD;
}


.bg-lightred {
  background-color: #FFBFBF;
}


.bg-lightred-i {
  background-color: #FFBFBF !important;
}

.bg-lightred1-i {
  background-color: #FF6F6F !important;
}


.bg-lightred1 {
  background-color: #FF6F6F;
}

.bg-lightred2-i {
  background-color: #FF8282 !important;
}


.bg-lightred2 {
  background-color: #FF9B9B;
}


.bg-lightblue {
  background-color: #AFD6ED;
}


.bg-lightblue-i {
  background-color: #AFD6ED !important;
}





.bg-darkgray {
  background-color: #B4B4B4;
}

.bg-darkgray2 {
  background-color: #828282;
}

.bg-lightgray {
  background-color: #F2F2F2;
}

.bg-lightgray-i {
  background-color: #F2F2F2 !important;
}


.bg-lightgray2 {
  background-color: #D6D6D6;
}

.bg-white {
  background-color: white;
}



.border-gold {
  border-color: gold;
}

.border-braun {
  border-color: #A98507;
}

.border-teal {
  border-color: #006C6C;
}

.show {
  display: block;
}

.bold {
  font-weight: bold;
}

.nobold {
  font-weight: normal;
}


.strike {
  text-decoration: line-through;
}


.hide {
  display: none;
}

.hide1 {
  display: none !important;
}


.clear {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

.absolute {
  position: absolute;
}

.align-left {
  text-align: left
}

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


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

.align-middle {
  vertical-align: middle
}

.pointer,
.cursor {
  cursor: pointer;
}

.shadow {
  filter: drop-shadow(3px 3px 6px #D7D7D7)
}



.underline {
  text-decoration: underline;
}



.a {
  color: #696969;
  cursor: pointer;
  text-decoration: none;
}

  .a:hover {
    text-decoration: underline;
  }


.a-black {
  color: #000000;
  cursor: pointer;
  text-decoration: none;
}

  .a-black:hover {
    text-decoration: underline;
  }


.no-decoration {
  text-decoration: none !important;
}

  .no-decoration:hover {
    text-decoration: none !important;
  }

  .no-decoration:visited {
    text-decoration: none !important;
  }



.center-content {
  margin: 0 auto;
}

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

.overflow {
  overflow: auto;
}

.nowrap {
  white-space: nowrap;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.alertify-notifier {
}
/* 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;
}


.heightmax100 {
  height: calc(100vh -100px);
}


/* Recommended icon sizes */

.material-symbols-outlined {
  padding-right: 6px;
  vertical-align: middle;
}

.material-symbols-rounded {
  padding-right: 6px;
  vertical-align: middle;
}

span.size-18 {
  font-size: 18px;
  font-variation-settings: 'OPSZ' 18;
}

span.size-20 {
  font-size: 20px;
  font-variation-settings: 'OPSZ' 20;
}

span.size-24 {
  font-size: 24px;
  font-variation-settings: 'OPSZ' 24;
}

span.size-40 {
  font-size: 40px;
  font-variation-settings: 'OPSZ' 40;
}

span.size-48 {
  font-size: 48px;
  font-variation-settings: 'OPSZ' 48;
}

/* Rules for using icons as black on a light background. */
.dark {
  background: black;
  color: rgba(255, 255, 255, 1);
  font-variation-settings: 'GRAD' -25;
}

.dark-inactive {
  background: black;
  color: rgba(255, 255, 255, 0.3);
  font-variation-settings: 'GRAD' -25;
}

.opacity-select {
  opacity: 0.5;
}
.opacity-select:hover {
  opacity: 1;
}




.db-style {
  font-size: 9pt !important;
  margin: 1px 1px 1px 1px;
  padding: 0px 2px 0px 2px;
  border-radius: 4px;
  color: #fff;
  background-color: #A7A7A7;
  white-space: nowrap;
  height:19px;
  --font-weight:bold;
}

.db-style-000 {
  background-color: #D1D1D1;
}

.db-style-001 {
  background-color: #FFA579;
}

.db-style-002 {
  background-color: #F457F9;
}

.db-style-003 {
  background-color: #019E9A;
}

.db-style-004 {
  background-color: #30BA01;
}

.db-style-005 {
  background-color: #AE72F8;
}

.db-style-006 {
  background-color: #076CBE;
}

.db-style-008 {
  background-color: #C40648;
}

.db-style-009 {
  background-color: #486B97;
}








.route-style {
  background-color: #698F73;
}



.route-style-00 {
  background-color: #9E9E9E;
}

.route-style-01 {
  background-color: #6B8E23;
}

.route-style-02 {
  background-color: #A26464;
}

.route-style-03 {
  background-color: #9638AD;
}

.route-style-04 {
  background-color: #D16D43 ;
}

.route-style-05 {
  background-color: #486B97 ;
}

.route-style-06 {
  background-color: #808000;
}

.route-style-07 {
  background-color: #4DAE94;
}

.route-style-08 {
  background-color: #A0522D;
}

.route-style-09 {
  background-color: #0080C0;
}

.route-style-10 {
  background-color: #518888;
}

.route-style-11 {
  background-color: #826644;
}

.route-style-12 {
  background-color: #556B2F;
}

.route-style-13 {
  background-color: #7B3F00;
}

.route-style-14 {
  background-color: #CD853F;
}

.route-style-15 {
  background-color: #9E7B4F;
}

.route-style-16 {
  background-color: #6E4B3A;
}

.route-style-17 {
  background-color: #EEDC82;
}

.route-style-18 {
  background-color: #B87333;
}

.route-style-19 {
  background-color: #704214;
}

.route-style-20 {
  background-color: #BC8F8F;
}

.route-style-21 {
  background-color: #708238;
}

.route-style-22 {
  background-color: #D2691E;
}

.route-style-23 {
  background-color: #8B4513;
}

.route-style-24 {
  background-color: #C19A6B;
}

.route-style-25 {
  background-color: #9C661F;
}

.route-style-26 {
  background-color: #7F675B;
}

.route-style-27 {
  background-color: #4E3B31;
}

.route-style-28 {
  background-color: #D2B48C;
}

.route-style-29 {
  background-color: #6B8E23;
}

/* sysTabs - reusable simple tabs (matches Telerik t-tabstrip) */
.sys-tabs-buttons {
  padding: 3px 0 0 4px;
  border-bottom: 1px solid #a8a8a8;
  line-height: normal;
}

.sys-tab-btn {
  display: inline-block;
  margin: 0 1px -1px 0;
  padding: 6px 10px;
  border: 1px solid #a8a8a8;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: #DFDFDF;
  color: #333;
  cursor: pointer;
  --font-size: 12px;
  text-decoration: none;
}

.sys-tab-btn:hover {
  background: #e8e8e8;
}

.sys-tab-btn.sys-tab-active {
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

.sys-tab-panel {
  padding: 4px;
}