body {
  background-color: #fafafa;
}

.avatar-title {
  line-height: 1.2;
}
.navview .pull-button + h2,
.navview.compacted .pull-button + h2 {
  display: none;
}
.navview.expand .pull-button + h2,
.navview-pane.open .pull-button + h2 {
  display: flex;
}
@media screen and (min-width: 1200px) {
  .navview .pull-button + h2 {
    display: flex;
  }
}
.navview-pane .avatar,
.app-bar .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}
.navview-pane ::-webkit-scrollbar-track {
  background-color: #4b646f !important;
}
.navview-pane * {
  scrollbar-color: #1ba1e2 #4b646f !important;
}
.app-bar-name {
  display: none;
}
@media screen and (min-width: 768px) {
  .app-bar-name {
    display: inline;
  }
}
.dashboard-section-title {
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
.user-list {
  margin: 0;
  padding: 0;
  list-style: none inside;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.user-list li {
  width: 25%;
  text-align: center;
  flex-shrink: 0;
  padding: 10px;
  font-size: 12px;
}
.user-list li .avatar {
  border-radius: 50%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}
.lock-box .avatar {
  width: 128px;
  height: auto;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid white;
}
.page-error-box {
  width: 100%;
  display: block;
  position: relative;
  text-align: center;
}
.login-box {
  display: block;
  position: relative;
  width: 100%;
  //box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.user-block {
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: 280px;
  line-height: 1.2;
}
.user-block .avatar {
  width: 128px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid white;
}
.user-block .avatar img {
  width: 100%;
  height: auto;
}
@media screen and (min-width: 640px) {
  .login-box {
    width: 360px;
  }
  .page-error-box {
    width: 480px;
  }
}
.product-list {
  margin: 10px 0 0;
  padding: 24px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  background-color: white;
  position: relative;
}
.product-list .product-list-item {
  position: relative;
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  flex-shrink: 0;
  max-width: calc(100% - 16px);
  margin: 20px 8px;
}
.product-list .product-list-item .product-image,
.product-list .product-list-item .product-title,
.product-list .product-list-item .product-price,
.product-list .product-list-item .product-desc {
  display: block;
  position: relative;
}
.product-list .product-list-item .product-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  order: 1;
}
.product-list .product-list-item .product-image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}
.product-list .product-list-item .product-image:hover img {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}
.product-list .product-list-item .product-title {
  order: 2;
  font-size: 16px;
  margin: 8px 0 4px;
}
.product-list .product-list-item .product-price {
  order: 3;
  margin: 4px 0 8px;
  font-weight: bold;
  font-size: 18px;
}
.product-list .product-list-item .product-price .old-price {
  text-decoration: line-through;
  font-weight: 300;
  font-size: 14px;
}
.product-list .product-list-item .product-desc {
  display: none;
  order: 4;
}
.product-list .product-list-item .product-actions {
  margin-top: auto;
  order: 5;
}
.product-list .product-list-item .sales,
.product-list .product-list-item .discount {
  display: none;
}
.product-list .product-list-item .countdown {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  padding-bottom: 10px;
}
@media screen and (min-width: 576px) {
  .product-list:not(.view-as-list) .product-list-item {
    max-width: calc(50% - 16px);
  }
}
@media screen and (min-width: 992px) {
  .product-list:not(.view-as-list) .product-list-item {
    max-width: calc(33.3% - 16px);
  }
}
@media screen and (min-width: 1452px) {
  .product-list:not(.view-as-list) .product-list-item {
    max-width: calc(25% - 16px);
  }
}
.product-list.view-as-list .product-list-item {
  display: block;
  height: 240px;
}
.product-list.view-as-list .product-image {
  float: left;
  width: 200px;
}
.product-list.view-as-list .product-title,
.product-list.view-as-list .product-price,
.product-list.view-as-list .product-desc,
.product-list.view-as-list .product-actions {
  margin-left: 216px;
}
.product-list.view-as-list .product-price {
  margin-top: 16px;
  margin-bottom: 16px;
}
.product-list.view-as-list .product-desc {
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
}
.product-list.view-as-list .product-actions {
  border-top: 1px solid #ebebeb;
  padding-top: 16px;
}
.product-card {
  display: block;
  position: relative;
  background-color: white;
  padding: 0;
  margin: 0;
}
.product-card .product-image {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.product-card .product-image img {
  width: 100%;
  height: auto;
}
.product-card .product-title {
  font-weight: 600;
  font-size: 24px;
}
.product-card .product-price {
  margin: 12px 0;
}
.product-card .product-price .old-price {
  text-decoration: line-through;
  font-weight: 300;
  font-size: 14px;
}
.product-card .product-price .current-price {
  font-weight: 600;
  font-size: 32px;
}
.product-card .product-price .old-price + .current-price {
  color: red;
}
.product-card .product-option {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin: 4px 0;
}
.product-card .product-option > span {
  width: 80px;
}
.product-card .product-option > * {
  margin: 4px 8px;
}
.product-card .color-group button.active::before {
  content: "x";
  color: white;
}
.product-card .size-group button.active {
  background-color: transparent;
  border: 1px solid red;
  color: #000;
}
.product-card .product-actions {
  margin: 24px 0 0;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.product-card .product-actions .spinner {
  width: 200px;
  margin-right: 8px;
}
.product-card .thumb-list {
  padding: 0;
  margin: 8px 0;
  list-style: none inside;
  display: flex;
  flex-flow: row wrap;
}
.product-card .thumb-list li {
  display: block;
  width: calc(25% - 2px);
  height: auto;
  overflow: hidden;
  margin: 1px;
  border: 1px solid transparent;
  cursor: pointer;
}
.product-card .thumb-list li img {
  width: 100%;
  height: auto;
}
.product-card .thumb-list li.active {
  border-color: red;
}
.product-info {
  background-color: white;
  padding: 24px;
  margin-top: 24px;
}
.review-list {
  margin: 0;
  padding: 0;
  list-style: none inside;
  display: block;
  position: relative;
}
.review-list > li {
  display: block;
  font-size: 14px;
  padding: 24px;
  margin: 4px 0;
}
.review-list > li + li {
  border-top: 1px solid #f8f8f8;
}
.review-tabloid {
  width: 120px;
  height: 155px;
  overflow: hidden;
  float: left;
  margin: 4px;
}
.review-tabloid img {
  width: 100%;
  height: auto;
}
.inbox {
  display: block;
  position: relative;
  background-color: white;
}
.inbox-folders .badge {
  position: absolute;
  top: 12px;
  right: 8px;
}
.inbox-folders li.active {
  border-left-color: #0b98da;
}
.inbox-folders li:hover {
  background-color: #f7f7f7;
}
.inbox-folders li a {
  background-color: inherit!important;
  color: #000 !important;
  height: 40px;
  line-height: 40px;
}
.inbox-table .check-cell,
.inbox-table .star-cell,
.inbox-table .attach-cell {
  width: 32px;
}
.inbox-table .sender-cell {
  width: 120px;
}
.inbox-table .subject-cell {
  max-width: 0;
}
.inbox-table .time-cell {
  width: 100px;
}
.email-read-form .email-date,
.email-read-form .email-from,
.email-read-form .email-text {
  font-size: 14px;
}
.email-read-form .email-to {
  font-size: 12px;
}
.email-attachments {
  display: flex;
  flex-flow: row wrap;
}
.email-attachment {
  width: 180px;
  height: 170px;
  display: flex;
  flex-flow: column;
  border: 1px solid #ededed;
  margin: 4px;
}
.email-attachment .preview {
  width: 100%;
  height: 120px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.email-attachment .preview img {
  width: 100%;
  height: auto;
  min-height: 100%;
}
.email-attachment .preview span {
  font-size: 64px;
}
.email-attachment .desc {
  height: 50px;
  margin-top: auto;
  background-color: #ededed;
  font-size: 14px;
  padding: 8px;
  line-height: 1.2;
}
.email-attachment .desc > *:not(button) {
  margin-right: 36px;
}
.master {
  width: 320px;
  margin: 0 auto;
  padding: 5px 5px 0;
  color: #000;
}
@media all and (min-width: 640px) {
  .master {
    width: 500px;
    padding: 5px 10px 0;
  }
}
@media all and (min-width: 768px) {
  .master {
    width: 650px;
    padding: 5px 80px 0;
  }
}


/******************************************/
.dialog {
  //top: 10px !important;
}
.dialog-content {
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100vh - 20px) !important;
}
.dialog-content {
  overflow-x: auto;
  overflow-y: auto;
}
.dialog-content pre {
  line-height: 1;
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
  font-size: 13px;
  overflow: unset;
  white-space: pre-wrap;
}
.dialog .closer {
  background-color: #1976d2;
  color: #fff;
}
.dialog .closer::before {
  font-size: 48px;
  margin-top: -15px;
}
._dialog {
  top: 10px !important;
}

table .tbody .td, .table .tbody td, .table tbody .td, .table tbody td {
  vertical-align: top;
}

table a:not([class]):not([href]):not([tabindex]) {
  color: #0366d6;
  text-decoration: none;
}

table a:not([class]):hover {
  color: #0056b3;
  text-decoration: underline;
}

table a:not([class]):not([href]):not([tabindex]):focus, table a:not([class]):not([href]):not([tabindex]):hover {
  text-decoration: underline;
}

.activity-atom.color-style span:nth-child(1) { border-bottom-color: #e20026; }
.activity-atom.color-style span:nth-child(2) { border-right-color: #e20026; }
.activity-atom.color-style span:nth-child(3) { border-top-color:#e20026; }

a:not([class]):not([href]):not([tabindex]) {
  //text-decoration: underline;
}

.file, .input, .metro-input, .select, .spinner, .tag-input, .textarea { border-top: 0; border-left: 0; border-right: 0; }
.select .dropdown-toggle { background-color: #f8f8f8; }
.dialog-content .calendar-picker .button { background-color: #f8f8f8; }
.input-clear-button, .input-reveal-button { background-color: #fcfcfc !important; opacity: 1 !important; transform: scale(1) !important; }
.input .prepend, .select .prepend, .textarea .prepend { font-weight: 500; color: #616161; }
.input .append, .select .append, .textarea .append { font-weight: 400; font-size: .8rem; color: #757575; background-color: #fcfcfc; }
.pagination .page-link { padding: .2rem .4rem; }

/******************************************/
.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
  z-index: 2000;
  // height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  height: auto;
  max-height: 400px;
  background-color: #fff;
  border: 1px solid #000;
  font-size: .85rem;
}
.ui-menu {
  list-style: none;
  padding: 2px;
  margin: 0;
  display: block;
  outline: none;
  width: 200px;
  margin-bottom: 2em;
}
.ui-menu .ui-menu-item {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style: none;
  list-style-image: none;
  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.ui-menu .ui-menu-item:hover {
  background-color: #ccc;
}

.select .option-list a {
  padding: 0 2rem 0 0.5rem;
}
pre {
  font-size: .8rem;
}
/******************************************/
.x-menu li a {
  //font-size: .9rem;
  line-height: 2;
  height: 26px;
  padding-left: 1rem;
}

.i_width { width: 120px; text-align: right; font-weight: bold; }
.select .i_width { width: 150px; }
input:read-only { background-color: #fcfcfc !important; color: #757575; }
.input input, .textarea textarea, .select .select-input { background-color: #e3f2fd !important; }
.input input:focus, .textarea textarea:focus { background-color: #bbdefb !important; }
.input input:hover, .textarea textarea:hover { background-color: #bbdefb !important; }
.select .select-input:focus, .select .select-input:hover { background-color: #bbdefb !important; }

.select_x { background-color: #e3f2fd !important; }
.select_x:focus { background-color: #bbdefb !important; }
.select_x:hover { background-color: #bbdefb !important; }

.prepend_x { border-bottom: 1px #d9d9d9 solid; }

.v-menu .button.small { height: 20px; line-height: 20px; padding: 0 .3rem; }
.v-menu li:hover > a { color: #fff; }
.fs_p70 { font-size: .70rem; }
.fs_p75 { font-size: .75rem; }
.fs_p80 { font-size: .80rem; }
.fs_p85 { font-size: .85rem; }
.lh_1 { line-height: 1; }










/******************************************************************************/
.tm2, .tm3 {
  -webkit-box-shadow: unset;
  box-shadow: unset;
  border: unset;
}

.tm2 .title {
  white-space: nowrap;
  font-size: 1.4rem;
  text-transform: uppercase;
  line-height: 40px;
  color: #fff;
}

.tm2 a.title:hover {
  border-left: 4px solid transparent;
}

.t-menu > li.title:hover {
  background-color: transparent;
}

.tm2 > li > a {
  height: 40px;
  width: 50px;
  line-height: 40px;
  padding: 0 .6rem;
  border-bottom: unset;
  border-left: 4px solid transparent;
}

.tm2 > li > a:hover {
  color: #fff;
  border-left: 4px solid var(--light-1);
}

.tm2 > li.active {
  background-color: rgba(29,29,29,.1);
}

.tm2 > li.active > a {
  color: #fff;
  border-left: 4px solid var(--light-1);
}

.tm2 > li > a .icon {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 1.3rem;
  line-height: 40px;
}

.tm2 .dropdown-toggle::after {
  border-color: transparent transparent rgb(224, 224, 224) transparent;
}

.tm3 > li > a {
  height: 40px;
  width: 40px;
  line-height: 40px;
  padding: 0 .6rem;
  border-bottom: unset;
}

.tm3 > li > a:hover {
  color: #fff;
}

.tm3 > li > a .icon {
  width: 1.4rem;
  height: 1.4rem;
  font-size: 1.4rem;
  line-height: 40px;
}

.dm2 {
  -webkit-box-shadow: unset;
  box-shadow: unset;
  border: unset;
}

.d-menu li a {
  font-size: .875rem;
  padding: 0 2rem 0 2.5rem;
  line-height: 40px;
  height: 40px;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border: none;
}

.button.primary, .command-button.primary, .image-button.primary, .info-button.primary, .input .button.primary, .notify.primary, .select .button.primary, .shortcut.primary, .spinner .button.primary, .split-button .split.primary, .tag-input .button.primary, .tally.primary, .toast.primary, .tool-button.primary, code.primary, tbody td.primary, tbody tr.primary {
  outline-color: #75b5fd;
  background-color: var(--dark-1);
  color: #fff;
}

.cpanel {
  height: calc(100vh - 55px) !important;
  overflow-y: auto;
}

.cpanel2 {
  overflow-y: hidden !important;
}

.panel .small {
  font-size: .85rem;
  line-height: 1.0rem;
}

.panel .panel-title.small, .panel .panel-title.small .icon {
  height: 26px;
  line-height: 1.5rem;
  font-weight: bold;
}
.panel .panel-title.small .custom-buttons, .panel .panel-title.small .btn-custom {
  height: 25px;
}
/******************************************************************************/
:root {
  --p1-1: #F3F9FE;
  --p1-2: #9BCEF5;
  --p1-3: #5EB2F2;
  --p1-4: #2699F2;
  --p1-5: #0288F0;
  --s1-1: #F4F4FE;
  --s1-2: #A4A4F7;
  --s1-3: #6C6CF4;
  --s1-4: #3939F4;
  --s1-5: #0505F2;
  --s2-1: #F2FEF9;
  --s2-2: #95F7CD;
  --s2-3: #54F4AF;
  --s2-4: #18F395;
  --s2-5: #00F18A;
}

/******************************************************************************/
.bg-1 { background-color: var(--p1-1) !important; }
.bg-2 { background-color: var(--p1-2) !important; }
.bg-3 { background-color: var(--p1-3) !important; }
.bg-4 { background-color: var(--p1-4) !important; }
.bg-5 { background-color: var(--p1-5) !important; }

.bg-1-hover:hover { background-color: var(--s1-1) !important; }
.bg-2-hover:hover { background-color: var(--s1-2) !important; }
.bg-3-hover:hover { background-color: var(--s1-3) !important; }
.bg-4-hover:hover { background-color: var(--s1-4) !important; }
.bg-5-hover:hover { background-color: var(--s1-5) !important; }

.fg-1 { color: var(--p1-1) !important; }
.fg-2 { color: var(--p1-2) !important; }
.fg-3 { color: var(--p1-3) !important; }
.fg-4 { color: var(--p1-4) !important; }
.fg-5 { color: var(--p1-5) !important; }

/*
.bg-blue-50 { background-color: #e3f2fd !important; }
.bg-blue-100 { background-color: #bbdefb !important; }
.bg-blue-200 { background-color: #90caf9 !important; }
.bg-blue-300 { background-color: #64b5f6 !important; }
.bg-blue-400 { background-color: #42a5f5 !important; }
.bg-blue-500 { background-color: #2196f3 !important; }
.bg-blue-600 { background-color: #1e88e5 !important; }
.bg-blue-700 { background-color: #1976d2 !important; }
.bg-blue-800 { background-color: #1565c0 !important; }
.bg-blue-900 { background-color: #0d47a1 !important; }

.bg-lightBlue-100 { background-color: #b3e5fc !important; }
.bg-lightBlue-200 { background-color: #81d4fa !important; }
.bg-lightBlue-300 { background-color: #4fc3f7 !important; }
.bg-lightBlue-500 { background-color: #03a9f4 !important; }
.bg-lightBlue-900 { background-color: #01579b !important; }

.fg-grey-50 { color: #fafafa !important; }
.fg-grey-100 { color: #f5f5f5 !important; }
.fg-grey-200 { color: #eeeeee !important; }
.fg-grey-300 { color: #e0e0e0 !important; }
.bg-grey-50 { background-color: #fafafa !important; }
.bg-grey-100 { background-color: #f5f5f5 !important; }
.bg-grey-200 { background-color: #eeeeee !important; }
.bg-grey-300 { background-color: #e0e0e0 !important; }
.bg-grey-400 { background-color: #bdbdbd !important; }
.bg-grey-500 { background-color: #9e9e9e !important; }

.bg-green-50 { background-color: #e8f5e9 !important; }
.bg-green-100 { background-color: #c8e6c9 !important; }
.bg-green-200 { background-color: #a5d6a7 !important; }
.bg-green-300 { background-color: #81c784 !important; }
.bg-green-400 { background-color: #66bb6a !important; }
.bg-green-500 { background-color: #4caf50 !important; }
.bg-green-600 { background-color: #43a047 !important; }
.bg-green-700 { background-color: #388e3c !important; }
.bg-green-800 { background-color: #2e7d32 !important; }
.bg-green-900 { background-color: #1b5e20 !important; }
    */

/******************************************************************************/
:root {
  --dark-1: #0d47a1;
  --light-1: #4fc3f7;
}

.bg-dark-1 { background-color: #1565c0 !important; }

.bg-light-1 { background-color: #eeeeee !important; }
.bg-light-2 { background-color: #e0e0e0 !important; }
.fg-light-1 { color: #eeeeee !important; }

.bg-blue-900-hover:hover {
  background-color: #1976d2 !important;
}

.scroll-1 {
  scrollbar-color: #1976d2 #81d4fa;
  scrollbar-width: thin;
}
.scroll-2 {
  scrollbar-color: #1976d2 #fff;
  scrollbar-width: thin;
}

.badge-nv {
  top: 24px;
  right: 8px;
  font-size: 60%;
}

/******************************************************************************/
.navview {
  height: 100%;
  z-index: 100;
}
.navview1 .navview-pane {
  background-color: #5DA4C1;
  color: #FAFAFA;
  font-size: 14px;
}
.navview .navview-content {
  padding-top: 0;
  //background-color: #ffffff;
}
.navview .pull-button {
  height: 52px;
  width: 52px;
}
.navview .navview-menu {
  background-color: #222D32;
  z-index: 100;
}
.navview .navview-menu li a:hover {
  color: #fff;
  background: var(--s1-3);
}
.navview .navview-menu li.active a {
  color: #fff;
  background: var(--light-1);
}
.navview .navview-menu .dropdown-toggle::after {
  border-bottom-color: white!important;
}
.navview .navview-menu .item-header {
  color: #fff;
  background: var(--s1-4);
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  line-height: 40px;
  font-size: 18px;
}
.navview .navview-menu .navview-menu {
//  background-color: #1a2226;
}
.avatar-title {
  line-height: 1.2;
}
.navview .pull-button + .app-title,
.navview.compacted .pull-button + .app-title {
  display: none;
}
.navview.expand .pull-button + .app-title,
.navview-pane.open .pull-button + .app-title {
  display: flex;
}
@media screen and (min-width: 1200px) {
  .navview .pull-button + .app-title {
    display: flex;
  }
}
.navview-pane ::-webkit-scrollbar-track {
  background-color: #4b646f !important;
}
.navview-pane * {
  scrollbar-color: #1ba1e2 #4b646f !important;
}

.navview.compacted .navview-menu .navview-menu, .navview.js-compact:not(.expanded) .navview-menu .navview-menu {
  top: -40px;
}

navview.compacted .navview-pane > .navview-menu-container > .navview-menu > li > a > .icon:hover + .caption, .navview.js-compact .navview-pane > .navview-menu-container > .navview-menu > li > a > .icon:hover + .caption {
  padding: 0 18px;
  font-size: 18px;
  line-height: 40px;
  width: 222px;
}

.navview .navview-menu .icon > *, .navview .pull-button > *, .navview .suggest-box .holder > * {
  width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 18px;
}

.xwindow {
  z-index: 100;
}

.xwindow .window-content {
  margin: 5px;
  overflow-x: hidden;
}