/*------------------ OPTIONS ------------------- */
/* !==== This is the main colour ====! */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* Warning */
/* Error/Failure */
/* Success */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/*$color_header_background: rgb(240,240,240); //light*/
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
.bodycontent .header {
  border-left-color: #0078b4; }

.bodycontent .homepage .sidebar {
  background-color: rgba(255, 255, 255, 0.5) !important; }

.bodycontent .desktop-content .sidemenu {
  background: rgba(0, 120, 180, 0.4) !important;
  border-left-color: rgba(0, 120, 180, 0.4); }

.bodycontent .workspace.touchpos-items .section .menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  bottom: 8px;
  width: 92%;
  z-index: 13;
  /**
                    @component button
                    @state section
                    @theme spaceport
                */ }
  @media (min-width: 600px) {
    .bodycontent .workspace.touchpos-items .section .menu {
      padding-left: 20px; } }
  @media (max-width: 600px) {
    .bodycontent .workspace.touchpos-items .section .menu {
      padding-top: 10px;
      padding-bottom: 10px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column; } }
  .bodycontent .workspace.touchpos-items .section .menu .button {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    margin-right: 1px;
    background-color: rgba(128, 128, 128, 0.8);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
    .bodycontent .workspace.touchpos-items .section .menu .button[value="Login"] {
      position: absolute; }
    @media (min-width: 600px) {
      .bodycontent .workspace.touchpos-items .section .menu .button:hover {
        background-color: rgba(0, 175, 239, 0.5) !important; } }
    @media (max-width: 1024px) {
      .bodycontent .workspace.touchpos-items .section .menu .button:active {
        background-color: rgba(0, 175, 239, 0.5); } }
    @media (max-width: 600px) {
      .bodycontent .workspace.touchpos-items .section .menu .button {
        width: 95%;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto; }
        .bodycontent .workspace.touchpos-items .section .menu .button:first-of-type {
          margin-top: 0; } }
    @media (max-width: 600px) {
      .bodycontent .workspace.touchpos-items .section .menu .button .fa {
        padding: 17px !important;
        color: white;
        font-size: 15px; } }
    @media (max-width: 600px) {
      .bodycontent .workspace.touchpos-items .section .menu .button span {
        text-align: center;
        font-size: 15px !important; } }

.bodycontent .desktop-content .sidemenu-icon {
  color: white; }

.storm-calendar-year .yearmonth .today {
  background: #0078b4; }

*::-webkit-scrollbar-thumb {
  background-color: #0078b4; }

.bodycontent .workspace .section .menu .button:hover {
  background-color: rgba(0, 120, 180, 0.5); }

.bodycontent .mobile-content .menu-button {
  background: #852ef6;
  /* Old browsers */
  background: -moz-linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  background: linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#852ef6', endColorstr='#50c9ff',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.bodycontent .mobile-content-menu-icon {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#131313+0,212121+100 */
  background: #FFF;
  /* Old browsers */
  margin: 2px;
  border: 1px solid #212121; }

.bodycontent .mobile-content-menu #a {
  bottom: 159px;
  width: 80%; }

.bodycontent .mobile-content-menu #a .icon, .bodycontent .mobile-content-menu #a .name {
  margin: 0 auto; }

.bodycontent .mobile-content-menu {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#852ef6+0,50c9ff+79,50c9ff+79,50c9ff+100 */
  background: #852ef6;
  /* Old browsers */
  z-index: 15 !important;
  background-image: url("./media/eezidelivery-logo-sm.png");
  background: -moz-linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: -o-linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  background: linear-gradient(45deg, #852ef6 0%, #50c9ff 79%, #50c9ff 79%, #50c9ff 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#852ef6', endColorstr='#50c9ff',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }

.bodycontent .mobile-content-menu-icon .icon {
  color: #3385d1; }

.bodycontent .mobile-content-menu-icon .name {
  color: #3385d1; }

.bodycontent .icontab .tab.selected {
  border-bottom-color: red !important; }

.bodycontent .homepage .sidebar .title, .bodycontent .homepage .sidebar .info p {
  color: black; }

@media (max-width: 600px) {
  .bodycontent .homepage .sidebar {
    padding-top: 20px; } }

.bodycontent .homepage .sidebar img {
  max-width: 200px; }

.bodycontent .desktop-content .sidemenu .collapse {
  background: rgba(0, 120, 180, 0.2) !important; }

.bodycontent .workspace .button:hover {
  background-color: rgba(0, 120, 180, 0.5); }

.bodycontent .workspace .selected.button {
  background-color: rgba(255, 0, 0, 0.5); }

.bodycontent .workspace .section {
  border-left-color: rgba(0, 120, 180, 0.5); }

.bodycontent .workspace form input[type=button]:focus,
.bodycontent .workspace form input[type="text"]:focus,
.bodycontent .workspace form input[type="number"]:focus,
.bodycontent .workspace form input[type="tel"]:focus,
.bodycontent .workspace form input[type="date"]:focus,
.bodycontent .workspace form textarea:focus {
  border: solid 1px #0078b4;
  border-left: solid 4px #0078b4;
  background-color: rgba(0, 120, 180, 0.3); }

.eezipay-homescreen {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%; }
  @media (min-width: 600px) {
    .eezipay-homescreen {
      padding-top: 50px; } }
  .eezipay-homescreen .videoHomeScreen {
    padding: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1; }
    @media (max-width: 600px) {
      .eezipay-homescreen .videoHomeScreen {
        display: none; } }
    .eezipay-homescreen .videoHomeScreen .videoContainer {
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
      flex: 1 0 50%;
      border: none;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center; }
      .eezipay-homescreen .videoHomeScreen .videoContainer .previousVideo, .eezipay-homescreen .videoHomeScreen .videoContainer .nextVideo {
        height: 200px;
        width: 25px;
        background: rgba(0, 0, 0, 0.5);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.5);
        -webkit-transition: color 200ms ease, -webkit-transform 200ms ease;
        transition: color 200ms ease, -webkit-transform 200ms ease;
        -o-transition: color 200ms ease, transform 200ms ease;
        transition: color 200ms ease, transform 200ms ease;
        transition: color 200ms ease, transform 200ms ease, -webkit-transform 200ms ease;
        cursor: default; }
        .eezipay-homescreen .videoHomeScreen .videoContainer .previousVideo:hover, .eezipay-homescreen .videoHomeScreen .videoContainer .nextVideo:hover {
          color: white;
          -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0); }
      .eezipay-homescreen .videoHomeScreen .videoContainer .previousVideo {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0); }
      .eezipay-homescreen .videoHomeScreen .videoContainer .nextVideo {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0); }
      .eezipay-homescreen .videoHomeScreen .videoContainer .video {
        border: none;
        width: 384px;
        height: 216px;
        -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
        background-color: black;
        z-index: 5; }
      @media screen and (min-width: 1400px) {
        .eezipay-homescreen .videoHomeScreen .videoContainer .video {
          width: 384px;
          height: 216px; }
          .eezipay-homescreen .videoHomeScreen .videoContainer .video.large {
            width: 640px;
            height: 360px; } }
      @media screen and (min-width: 1600px) {
        .eezipay-homescreen .videoHomeScreen .videoContainer .video {
          width: 512px;
          height: 288px; }
          .eezipay-homescreen .videoHomeScreen .videoContainer .video.large {
            width: 768px;
            height: 432px; } }
      @media screen and (min-width: 1900px) {
        .eezipay-homescreen .videoHomeScreen .videoContainer .video {
          width: 640px;
          height: 360px; }
          .eezipay-homescreen .videoHomeScreen .videoContainer .video.large {
            width: 896px;
            height: 504px; } }
    .eezipay-homescreen .videoHomeScreen .text {
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
      flex: 1 0 50%;
      color: white; }
    .eezipay-homescreen .videoHomeScreen .videoContainer, .eezipay-homescreen .videoHomeScreen .text {
      padding: 20px; }
  .eezipay-homescreen .tweets {
    /*background-color: rgba(white,0.5);*/
    padding: 30px;
    /**
		* @author Dylan Vorster
		* @component TweetBox
		*/ }
    .eezipay-homescreen .tweets h1 {
      color: white;
      font-weight: 200;
      font-size: 30px;
      padding-left: 10px;
      padding-bottom: 10px; }
    @media (max-width: 600px) {
      .eezipay-homescreen .tweets {
        display: none; } }
    .eezipay-homescreen .tweets .tweetbox {
      font-family: roboto;
      padding: 20px;
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
      font-weight: 400;
      /*flex-grow: 1;*/
      -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
      flex-shrink: 1;
      -webkit-flex-basis: 350px;
      -ms-flex-preferred-size: 350px;
      flex-basis: 350px;
      margin-right: 5px;
      margin-bottom: 5px;
      cursor: pointer; }
      .eezipay-homescreen .tweets .tweetbox:hover {
        background-color: rgba(255, 255, 255, 0.15); }
      .eezipay-homescreen .tweets .tweetbox .meta {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        font-size: 14px; }
        .eezipay-homescreen .tweets .tweetbox .meta .channel {
          font-weight: bold;
          padding-right: 10px; }
        .eezipay-homescreen .tweets .tweetbox .meta .user {
          padding-right: 5px; }
        .eezipay-homescreen .tweets .tweetbox .meta .when {
          opacity: 0.5; }
      .eezipay-homescreen .tweets .tweetbox .content {
        padding-top: 10px;
        font-size: 13px;
        font-weight: 300; }
  @media (min-width: 600px) {
    .eezipay-homescreen .header {
      padding-left: 50px; } }
  @media (max-width: 600px) {
    .eezipay-homescreen .header {
      padding-top: 70px;
      padding-left: 30px;
      padding-bottom: 20px;
      background-color: rgba(0, 0, 0, 0.8); } }
  .eezipay-homescreen .header .left {
    height: 150px; }
    @media (max-width: 600px) {
      .eezipay-homescreen .header .left {
        height: 50px; } }
    .eezipay-homescreen .header .left img {
      height: 150px; }
      @media (max-width: 600px) {
        .eezipay-homescreen .header .left img {
          width: 50px;
          height: 50px;
          display: none; } }
  .eezipay-homescreen .header .right {
    padding-left: 154px;
    margin-top: -50px; }
    @media (max-width: 600px) {
      .eezipay-homescreen .header .right {
        padding-left: 20px; } }
    @media (max-width: 600px) {
      .eezipay-homescreen .header .right img {
        height: 10px; } }
    .eezipay-homescreen .header .right span {
      color: white;
      font-size: 30px;
      font-weight: 200; }
      @media (max-width: 600px) {
        .eezipay-homescreen .header .right span {
          font-size: 20px;
          display: block; } }
      .eezipay-homescreen .header .right span.heading {
        padding-right: 20px;
        font-weight: 600; }

.headercontact {
  font-family: Roboto;
  font-size: 14px;
  color: #313131;
  background-color: #FFF !important; }
  .headercontact .storm-form {
    background-color: #FFF !important; }
    .headercontact .storm-form input, .headercontact .storm-form textarea {
      border: 1px solid #717171 !important;
      color: #313131 !important;
      background: #8c8c8c !important; }
    .headercontact .storm-form input[type=button] {
      background: #0078b4 !important;
      color: #fff  !important; }
  @media (min-width: 600px) {
    .headercontact {
      background-color: #FFF !important; } }
  @media (max-width: 600px) {
    .headercontact {
      padding-bottom: 20px;
      background-color: #FFF !important; } }
  .headercontact .left {
    height: 150px; }
    @media (max-width: 600px) {
      .headercontact .left {
        height: 50px; } }
    .headercontact .left img {
      height: 150px; }
      @media (max-width: 600px) {
        .headercontact .left img {
          width: 50px;
          height: 50px;
          display: none; } }
  .headercontact .right {
    padding-left: 154px;
    margin-top: -50px; }
    @media (max-width: 600px) {
      .headercontact .right {
        padding-left: 20px; } }
    @media (max-width: 600px) {
      .headercontact .right img {
        height: 10px; } }
    .headercontact .right span {
      color: white;
      font-size: 30px;
      font-weight: 200; }
      @media (max-width: 600px) {
        .headercontact .right span {
          font-size: 20px;
          display: block; } }
      .headercontact .right span.heading {
        padding-right: 20px;
        font-weight: 600; }

.coupons-page .coupons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .coupons-page .coupons .coupon {
    margin: 5px;
    font-family: roboto;
    width: 300px;
    cursor: pointer; }
    .coupons-page .coupons .coupon .coupon-content {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      background: -webkit-gradient(linear, left top, left bottom, from(white), to(#eaeaea));
      background: -webkit-linear-gradient(white, #eaeaea);
      background: -o-linear-gradient(white, #eaeaea);
      background: linear-gradient(white, #eaeaea);
      -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      -webkit-border-radius: 3px;
      border-radius: 3px;
      overflow: hidden; }
      .coupons-page .coupons .coupon .coupon-content .top {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex; }
        .coupons-page .coupons .coupon .coupon-content .top > * {
          -webkit-align-self: center;
          -ms-flex-item-align: center;
          align-self: center; }
        .coupons-page .coupons .coupon .coupon-content .top .type {
          font-size: 15px;
          opacity: 0.5;
          padding: 10px; }
        .coupons-page .coupons .coupon .coupon-content .top .code {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          flex-grow: 1;
          font-size: 14px;
          padding: 10px; }
        .coupons-page .coupons .coupon .coupon-content .top .fa {
          font-size: 20px;
          color: white;
          -webkit-flex-shrink: 0;
          -ms-flex-negative: 0;
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          text-align: center;
          vertical-align: middle;
          line-height: 40px; }
          .coupons-page .coupons .coupon .coupon-content .top .fa.valid {
            background-color: #00c0ff; }
          .coupons-page .coupons .coupon .coupon-content .top .fa.invalid {
            background-color: red; }
      .coupons-page .coupons .coupon .coupon-content .center {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center; }
        .coupons-page .coupons .coupon .coupon-content .center .balance {
          font-size: 40px;
          font-weight: 600; }
      .coupons-page .coupons .coupon .coupon-content .bottom {
        font-size: 12px;
        opacity: 0.5;
        padding: 5px;
        text-align: left; }
        .coupons-page .coupons .coupon .coupon-content .bottom .uses {
          display: block;
          width: 100%;
          text-align: left; }
        .coupons-page .coupons .coupon .coupon-content .bottom .valid {
          max-width: 100%;
          text-align: left;
          display: block;
          width: 100%; }
        .coupons-page .coupons .coupon .coupon-content .bottom .invalid {
          max-width: 100%;
          color: red;
          text-align: left;
          display: block;
          width: 100%; }
    .coupons-page .coupons .coupon .logs {
      margin-left: 10px;
      margin-right: 10px;
      background: white;
      -webkit-box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.2);
      padding: 10px;
      -webkit-border-bottom-right-radius: 5px;
      border-bottom-right-radius: 5px;
      -webkit-border-bottom-left-radius: 5px;
      border-bottom-left-radius: 5px; }
      .coupons-page .coupons .coupon .logs .title {
        text-align: center;
        font-size: 12px;
        padding-bottom: 10px; }
      .coupons-page .coupons .coupon .logs .log-data {
        max-height: 80px;
        overflow-y: auto; }
      .coupons-page .coupons .coupon .logs .log {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        font-size: 13px;
        border-top: solid 1px rgba(0, 0, 0, 0.1);
        padding: 2px; }
        .coupons-page .coupons .coupon .logs .log .timestamp {
          -webkit-box-flex: 1;
          -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
          flex-grow: 1; }
        .coupons-page .coupons .coupon .logs .log .amount {
          font-weight: 600; }

/*------------------ OPTIONS ------------------- */
/* !==== This is the main colour ====! */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* Warning */
/* Error/Failure */
/* Success */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/*$color_header_background: rgb(240,240,240); //light*/
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
#test {
  height: 400px;
  width: 100%;
  background-image: url("./images/map-loading.png");
  background-position-x: center;
  background-position-y: center;
  margin-bottom: 4px !important; }

#maplink {
  width: 100%;
  background: #0078b4;
  color: #FFF;
  text-decoration: none;
  padding: 10px 20px;
  text-align: center;
  font-family: Roboto;
  display: block; }

.listNote {
  max-width: calc(100% - 100px); }

#count {
  font-size: 12px !important; }

.storeHours {
  font-family: roboto;
  color: white;
  text-align: center;
  padding: 20px 0px;
  font-size: 26px; }

#test {
  background: -webkit-linear-gradient(135deg, #d9d9d9, #969696, #d9d9d9, #969696);
  background: -o-linear-gradient(135deg, #d9d9d9, #969696, #d9d9d9, #969696);
  background: linear-gradient(-45deg, #d9d9d9, #969696, #d9d9d9, #969696);
  -webkit-background-size: 400% 400%;
  background-size: 400% 400%;
  -webkit-animation: gradient 15s ease infinite;
  animation: gradient 15s ease infinite; }

.stock.out p {
  background-color: #9d1d08; }

.stock.avail p {
  background-color: #2ca02c; }

.stock.limited p {
  background-color: #ad6704; }

.stock p {
  font-size: 12px;
  color: #fff;
  padding: 2px 8px; }

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes gradient {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@media (min-width: 600px) {
  .defaultList .storm-table th {
    color: #fff !important; } }

.resHeader {
  width: 100%;
  position: relative;
  margin-bottom: -70px; }
  @media (min-width: 600px) {
    .resHeader {
      display: none; } }

.itemDimensions {
  background: white;
  width: 100%;
  font-family: roboto;
  position: relative;
  top: 2px;
  bottom: 10px;
  z-index: 3;
  font-family: roboto;
  padding: 10px;
  width: 95%;
  margin: 0 auto 10px auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  opacity: 0.8;
  font-size: 12px; }
  .itemDimensions .dimensionsContainer {
    width: 25%;
    text-align: center; }
    .itemDimensions .dimensionsContainer p {
      border-top: 1px solid #888888;
      padding: 5px 0px;
      margin-top: 10px; }

.viewItemBack .dark {
  padding-top: 10px !important; }

.viewItemBack .menu {
  position: relative !important;
  width: 100% !important;
  z-index: 10 !important; }
  .viewItemBack .menu .button {
    background-color: rgba(128, 128, 128, 0.2) !important; }

.viewItemBack .content {
  display: none !important; }

.viewItemBack .heading {
  display: none !important; }

.Itembuttons {
  background: white;
  width: 100%;
  font-family: roboto;
  position: relative;
  top: 10px;
  z-index: 3;
  font-family: roboto;
  padding: 10px;
  width: 95%;
  margin: 0 auto;
  display: block;
  height: 50px; }
  .Itembuttons .counter {
    text-align: center;
    display: inherit;
    width: calc(100% - 65px);
    float: left;
    font-size: 23px; }
  .Itembuttons .minus {
    float: left; }
  .Itembuttons .plus {
    float: right; }
  @media (min-width: 600px) {
    .Itembuttons {
      width: 100%; } }

.catHeaderMain {
  background: white;
  width: 100%;
  font-family: roboto;
  position: relative;
  z-index: 3;
  font-family: roboto;
  padding: 10px;
  width: 95%;
  margin: 0 auto; }
  @media (min-width: 600px) {
    .catHeaderMain {
      width: 100%; } }
  .catHeaderMain .button.chatButton {
    position: absolute !important;
    top: 10px !important;
    left: 190px !important;
    max-width: 200px !important;
    background-color: #007bb7; }
    @media (max-width: 600px) {
      .catHeaderMain .button.chatButton {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        max-width: 200px !important;
        margin: 5px 2px 2px 5px; } }

.itemDetails .resHeader {
  margin-bottom: -20px; }

.restitle {
  display: inherit;
  color: #5d5d5d;
  font-size: 30px; }

.resStatus {
  position: absolute;
  top: 0px;
  right: 10px;
  max-width: 70px; }

.subtitle {
  color: #939393;
  font-size: 18px;
  font-weight: lighter;
  padding-bottom: 10px; }

.tpremote-checkout {
  width: 100%; }
  .tpremote-checkout .convenience {
    font-family: roboto;
    color: #c0ff00;
    font-size: 30px;
    text-align: center;
    background: rgba(192, 255, 0, 0.1);
    padding: 5px; }
    .tpremote-checkout .convenience p {
      font-size: 14px; }
  .tpremote-checkout .label {
    font-size: 20px; }
  .tpremote-checkout .select {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: #dbdbdb;
    margin: 5px 0px 15px 5px; }
    @media (max-width: 600px) {
      .tpremote-checkout .select {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin-right: 0px;
        margin-bottom: 5px; } }
    @media (max-width: 1024px) {
      .tpremote-checkout .select {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        margin-right: 0px;
        margin-bottom: 5px; } }
    .tpremote-checkout .select:after {
      font-family: 'FontAwesome';
      content: '\f0dc';
      font-size: 25px;
      margin-left: -38px;
      opacity: 0.3;
      color: black;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      padding-left: 20px;
      padding-right: 10px;
      pointer-events: none; }
    .tpremote-checkout .select:hover:after {
      opacity: 1.0; }
    .tpremote-checkout .select select {
      padding: 3px 5px;
      font-size: 20px;
      border: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      -webkit-appearance: none;
      color: black;
      outline: none;
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      height: 40px;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      padding-left: 20px;
      padding-right: 0; }
      .tpremote-checkout .select select.sizes {
        font-size: 15px !important;
        height: 30px; }
    .tpremote-checkout .select.sizes {
      margin: 0 auto !important;
      max-width: 95% !important;
      margin-top: 15px !important; }
      .tpremote-checkout .select.sizes:after {
        font-size: 15px !important; }

.touchpos-items .checkout {
  background: #c0ff00 !important;
  width: calc(100% - 40px) !important;
  height: 50px; }
  .touchpos-items .checkout .icon {
    background-color: #003367 !important; }
  .touchpos-items .checkout span {
    color: #000 !important; }

.touchpos-items .content > .name {
  color: black;
  font-family: roboto;
  padding: 10px; }

.touchpos-items .content > .checkout {
  margin-bottom: 15px; }

.touchpos-items .select {
  -webkit-border-radius: 0px;
  border-radius: 0px;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #dbdbdb;
  margin: 5px 0px 15px 5px; }
  @media (max-width: 600px) {
    .touchpos-items .select {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      margin-right: 0px;
      margin-bottom: 5px; } }
  @media (max-width: 1024px) {
    .touchpos-items .select {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      margin-right: 0px;
      margin-bottom: 5px; } }
  .touchpos-items .select:after {
    font-family: 'FontAwesome';
    content: '\f0dc';
    font-size: 25px;
    margin-left: -25px;
    opacity: 0.3;
    color: black;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 20px;
    padding-right: 10px;
    pointer-events: none; }
  .touchpos-items .select:hover:after {
    opacity: 1.0; }
  .touchpos-items .select select {
    background: transparent;
    padding: 3px 5px;
    font-size: 20px;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    color: black;
    outline: none;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 40px;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    padding-left: 20px;
    padding-right: 0;
    margin-right: -20px; }
    .touchpos-items .select select.sizes {
      font-size: 15px !important;
      height: 30px; }
  .touchpos-items .select.sizes {
    margin: 0 auto !important;
    max-width: 95% !important;
    margin-top: 15px !important; }
    .touchpos-items .select.sizes:after {
      font-size: 15px !important; }

.touchpos-items .category {
  /*background: rgba(white,0.1);*/
  /*background: rgba(black,0.5);*/
  border: 2px solid rgba(0, 0, 0, 0.9);
  margin-top: 4px;
  position: relative;
  z-index: 1; }
  .touchpos-items .category .header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: darkgrey;
    background: rgba(0, 0, 0, 0.7);
    overflow: hidden;
    position: relative; }
    .touchpos-items .category .header > * {
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center; }
    .touchpos-items .category .header .catHeader {
      position: absolute;
      width: 100%;
      height: 126px;
      opacity: 0.5;
      z-index: 10; }
    .touchpos-items .category .header .name {
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      font-family: roboto;
      /*text-align: center;*/
      padding: 50px 20px;
      font-size: 20px;
      opacity: 1;
      color: white;
      position: relative;
      z-index: 11; }
    .touchpos-items .category .header .fa {
      -webkit-box-flex: 0;
      -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
      flex-grow: 0;
      font-size: 30px;
      margin-right: 20px;
      opacity: 1;
      position: relative;
      z-index: 11; }
  .touchpos-items .category .content {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 3px !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: rgba(255, 255, 255, 0.1); }
    @media (max-width: 600px) {
      .touchpos-items .category .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; } }
    @media (max-width: 1024px) {
      .touchpos-items .category .content {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; } }
  .touchpos-items .category .item-selector {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: white;
    margin-top: 2px;
    float: left;
    background: #FFFFFF;
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
    .touchpos-items .category .item-selector img {
      width: 125px; }
    .touchpos-items .category .item-selector:hover .name, .touchpos-items .category .item-selector:hover .meta, .touchpos-items .category .item-selector:hover .item-selector {
      background: black !important;
      color: white !important; }
    @media (min-width: 600px) {
      .touchpos-items .category .item-selector {
        max-width: 540px;
        min-width: 540px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        margin-right: 5px; } }
    @media (max-width: 1024px) {
      .touchpos-items .category .item-selector {
        max-width: 100%; } }
    @media (max-width: 600px) {
      .touchpos-items .category .item-selector img {
        max-width: 80px !important;
        height: 58px !important; }
      .touchpos-items .category .item-selector .productImage {
        width: 80px !important;
        height: 58px !important;
        display: none; } }
    .touchpos-items .category .item-selector.active .meta {
      padding: 2px;
      padding-right: 10px;
      padding-left: 10px; }
      .touchpos-items .category .item-selector.active .meta .qty {
        font-size: 22px;
        text-align: right; }
      .touchpos-items .category .item-selector.active .meta .price {
        opacity: 0.3;
        font-size: 12px;
        text-align: right;
        white-space: nowrap; }
    .touchpos-items .category .item-selector .plus {
      background: #acbb2d; }
    .touchpos-items .category .item-selector .minus {
      background: #d23208; }
    .touchpos-items .category .item-selector .meta {
      padding: 10px 10px 0px 0px;
      min-width: 85px;
      width: calc(50% - 80px);
      position: absolute;
      right: 0px;
      height: 100%;
      text-align: right; }
      @media (min-width: 600px) {
        .touchpos-items .category .item-selector .meta {
          min-width: 120px; } }
    @media (min-width: 600px) {
      .touchpos-items .category .item-selector .button {
        min-width: 100px; } }
    .touchpos-items .category .item-selector .button .fa {
      font-size: 25px; }
    .touchpos-items .category .item-selector > * {
      /*align-self:center;*/ }
    .touchpos-items .category .item-selector .name {
      font-family: roboto;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      color: black;
      background: white;
      padding: 10px 20px;
      font-size: 14px;
      max-width: 50%; }
    .touchpos-items .category .item-selector .meta {
      font-family: roboto;
      background: white;
      color: black; }

/*------------------ OPTIONS ------------------- */
/* !==== This is the main colour ====! */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* Warning */
/* Error/Failure */
/* Success */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/*$color_header_background: rgb(240,240,240); //light*/
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
.sidebar .card-tap .fa {
  font-size: 80px;
  color: white;
  padding: 20px; }

.dli-card-settings .dli-card {
  background-image: url("/plugin/dli/media/bank-card.png");
  -webkit-background-size: contain;
  background-size: contain;
  height: 191.4px;
  width: 303.3px;
  position: relative;
  margin-bottom: 10px;
  overflow: hidden; }
  @media (max-width: 600px) {
    .dli-card-settings .dli-card {
      margin-left: auto;
      margin-right: auto; } }
  .dli-card-settings .dli-card .card-blocked-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    z-index: 10; }
    .dli-card-settings .dli-card .card-blocked-wrapper .blocked {
      font-family: 'Roboto';
      font-weight: 300;
      font-size: 24px;
      padding: 5px 10px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: white;
      background: rgba(0, 0, 0, 0.5);
      margin-bottom: 10px; }
  .dli-card-settings .dli-card .pan {
    position: absolute;
    top: 93px;
    left: 25.5px;
    font-family: 'Roboto Mono';
    color: #464646;
    font-size: 21.6px; }
  .dli-card-settings .dli-card .button {
    position: absolute;
    bottom: 0px;
    background-color: rgba(215, 44, 44, 0.8);
    background: rgba(215, 44, 44, 0.8);
    color: rgba(215, 44, 44, 0.8);
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-left-radius: 8px; }
    .dli-card-settings .dli-card .button span {
      padding: 20px;
      font-size: 16px; }

.dli-card-settings .student-card {
  background-image: url("/plugin/dli/media/student-card.png");
  -webkit-background-size: contain;
  background-size: contain;
  height: 191.4px;
  width: 303.3px;
  position: relative;
  margin-bottom: 10px;
  overflow: hidden; }
  @media (max-width: 600px) {
    .dli-card-settings .student-card {
      margin-left: auto;
      margin-right: auto; } }
  .dli-card-settings .student-card .button {
    position: absolute;
    bottom: 0;
    background-color: rgba(215, 44, 44, 0.8);
    background: rgba(215, 44, 44, 0.8);
    color: rgba(215, 44, 44, 0.8);
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-left-radius: 8px; }
    .dli-card-settings .student-card .button span {
      padding: 20px;
      font-size: 16px; }