﻿:root {
  --dialogBackground: #cfcfcfdf;
  --default-text-color: #000;
  --alt-text-color: #086a97;
  --theme-Icon-Color: #318A8C;
  --theme-Icon-background: #fff;
  --muted-text-colour: #949494;
  --default-page-background: #fff;
  --theme-containerBackground: #fff;
  --theme-backgroundColour1: #2e4d58;
  --theme-backgroundColour2: #CDE0E0;
  --theme-backgroundColour3: #000;
  --theme-Colour1: #fff;
  --theme-Colour2: #318A8C;
  --theme-Colour3: #CDE0E0;
  --theme-accentColour: #318A8C;
  --theme-accentColour2: #244E7A;
  --theme-accentColour3: rgba(0, 0, 0, 0);
}
html,
body {
  /* color: var(--default-text-color);*/
  /*background-color: @default-page-background;*/
}
.page {
  color: var(--default-text-color);
  background-color: var(--default-page-background);
}
.UI-theme-text {
  color: var(--default-text-color);
}
.UI-theme-alt-text {
  color: var(--muted-text-colour);
}
.UI-theme-muted-text {
  color: var(--muted-text-colour);
}
.UI-theme-icon {
  color: var(--theme-Icon-Color);
  background-color: var(--theme-Icon-background);
}
.UI-theme-toolbar-button {
  color: var(--theme-Colour3);
  background: var(--theme-backgroundColour3);
  border-color: var(--theme-backgroundColour3);
}
.UI-theme-button-colour {
  color: var(--theme-Colour1);
}
.UI-theme-toolbar {
  background: var(--theme-backgroundColour1);
  color: var(--theme-Colour1);
}
.UI-Theme-active-menu {
  background-color: transparent;
  color: var(--default-text-color);
}
.UI-theme-button {
  color: var(--theme-Colour1);
  background-color: var(--theme-accentColour);
  border: none;
  border-radius: 50px;
  display: inline-block;
  cursor: pointer;
  padding: 13px 32px;
  text-decoration: none;
  margin: 5px;
}
.UI-theme-button:active {
  position: relative;
  top: 1px;
}
.UI-theme-button:disabled {
  opacity: 0.3;
}
.UI-theme-button-Alt {
  color: var(--theme-Colour1);
  border-radius: 50px;
  display: inline-block;
  cursor: pointer;
  padding: 13px 32px;
  text-decoration: none;
  margin: 5px;
  -webkit-appearance: none;
}
.UI-theme-button-Alt:active {
  position: relative;
  top: 1px;
}
.UI-theme-button-Alt:disabled {
  opacity: 0.3;
  -webkit-appearance: none;
}
.UI-theme-loading-svg svg path {
  fill: var(--theme-Icon-Color);
  stroke: var(--theme-Icon-Color);
}
.UI-theme-logo-svg svg path {
  fill: var(--theme-Icon-Color);
  stroke: var(--theme-Icon-Color);
}
.UI-theme-svg path {
  fill: var(--theme-Icon-Color);
  stroke: var(--theme-Icon-Color);
}
.UI-theme-input-container {
  background-color: #fff;
  color: var(--default-text-color);
  border: 1px solid var(--alt-text-color);
  border-radius: 35px;
}
.UI-theme-page-container {
  background: var(--theme-containerBackground);
}
.UI-theme-page-container-header {
  color: var(--default-text-color);
  background: var(--theme-containerBackground);
  font-size: 1.5em;
}
.UI-theme-page-container-header2 {
  color: var(--default-text-color);
  background: var(--theme-containerBackground);
}
.UI-theme-dialog {
  background: #fff;
  color: #000;
}
.UI-theme-dialog-container {
  background: #fff;
  color: #000;
}
.UI-theme-dialog-header {
  /*background: #fff;*/
  color: #000;
}
.UI-theme-item-container {
  background: var(--theme-containerBackground);
  color: var(--alt-text-color);
  position: relative;
}
.UI-theme-item-button {
  background: var(--theme-backgroundColour1);
  color: var(--theme-Colour1);
}
.UI-theme1 {
  color: var(--theme-Colour1);
  background: var(--theme-backgroundColour1);
  border-color: var(--theme-backgroundColour1);
}
.UI-theme2 {
  color: var(--theme-Colour2);
  background: var(--theme-backgroundColour2);
  border-color: var(--theme-backgroundColour2);
}
.UI-theme3 {
  color: var(--theme-Colour3);
  background: var(--theme-backgroundColour3);
  border-color: var(--theme-backgroundColour3);
}
.UI-theme-outline1 {
  border-color: var(--theme-backgroundColour1);
  border-style: solid;
}
.UI-theme-outline2 {
  border-color: var(--theme-backgroundColour2);
  border-style: solid;
}
.UI-theme-outline3 {
  border-color: var(--theme-backgroundColour3);
  border-style: solid;
}
.UI-theme-accent1 {
  color: var(--theme-accentColour);
}
.UI-theme-accent2 {
  color: var(--theme-accentColour2);
}
.UI-theme-accent3 {
  color: var(--theme-accentColour3);
}
.pageCartTotalContainer {
  background-color: var(--theme-backgroundColour3);
  color: var(--theme-Colour3);
}
@media (max-width: 800px) {
  html,
  body {
    overflow-y: auto;
    color: #000;
    background-color: var(--theme-containerBackground);
  }
  .page {
    color: var(--default-text-color);
    background-color: var(--theme-containerBackground);
  }
  .UI-Theme-active-menu {
    /*  background: var(--theme-containerBackground);*/
    color: var(--default-text-color);
  }
}