@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nWNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K8nXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32KxfXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K67QNig.ttf) format('truetype');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/worksans/v19/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K8nQNig.ttf) format('truetype');
}
:root {
  --font-family-main: 'Work Sans', sans-serif;
  --font-weight-main: 400;
  --font-weight-light: 300;
  --font-size-main: 1.75vh;
  --font-size-mid: 2vh;
  --button-size: 4vh;
  --color-grey-main: #5A5A5A;
  --color-grey-light: #ebebeb;
  --color-black: #1B1B1B;
  --color-yellow: #FFCC00;
}
body {
  background: #fff;
  color: var(--color-grey-main);
  font-family: var(--font-family-main);
  font-weight: var(--font-weight-main);
  font-size: var(--font-size-main);
  overflow-x: hidden;
  margin: 0;
  display: block;
  float: left;
  width: 100%;
  height: 100%;
  padding: 0;
}
img {
  border: none;
}
td,
th {
  font-size: var(--font-size-main);
  padding: 8px;
}
th {
  font-weight: 500;
}
form {
  margin: 0px;
  padding: 0px;
}
.priceField {
  width: 75px;
}
.priceTd .percentDiscount {
  border: none;
  cursor: pointer;
  text-align: center;
  font-size: 1vh;
  padding: 0.5vh;
  vertical-align: top;
}
label.r:after {
  content: '*';
  color: red;
}
.priceTd .percentDiscount.clicked {
  color: #fff;
  background: var(--accent-color);
}
th.contents {
  background: var(--accent-color);
  color: #FFFFFF;
  font-weight: normal;
}
th.contents a {
  color: #FFFFFF;
}
a:link {
  color: var(--color-grey-main);
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: var(--color-grey-main);
}
a:hover {
  text-decoration: underline;
  color: var(--color-grey-main);
}
a:active {
  text-decoration: none;
  color: var(--color-grey-main);
}
a[class=blackLink]:link {
  color: var(--color-grey-main);
  text-decoration: none;
}
a[class=blackLink]:visited {
  text-decoration: none;
  color: var(--color-grey-main);
}
a[class=blackLink]:hover {
  text-decoration: underline;
  color: var(--color-grey-main);
}
a[class=blackLink]:active {
  text-decoration: none;
  color: var(--color-grey-main);
}
input,
textarea,
select {
  font-size: var(--font-size-main);
  font-family: var(--font-family-main);
  border: 1px solid var(--color-grey-light);
  padding: 0.5vh;
  box-sizing: border-box;
  min-width: 30px !important;
}
select {
  font-size: var(--font-size-main);
  border: 1px solid var(--color-grey-light);
  box-sizing: border-box;
}
select#address_options {
  width: 100% !important;
}
input[type="radio"], input[type="checkbox"] {
  min-width: auto !important;
}
input[type="radio"],
input[type="checkbox"],
textarea {
  height: auto;
}
input.attention,
select.attention {
  border: 1px solid green;
}
.loading {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 50;
  background: url(loading.gif) #fff center no-repeat;
  top: 0;
  left: 0;
  opacity: 0.5;
  text-align: center;
  line-height: 700px;
  font-size: 50px;
  color: black;
}
.small-loading {
  width: 20px;
  height: 20px;
  background: url("../images/small-loading.gif") transparent center / contain no-repeat;
  display: block;
}
.small-loading2 {
  background: url("../images/small-loading.gif") transparent center / contain no-repeat;
  aspect-ratio: 1;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-left: .5vh;
}
.loading2 {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: url(drum-roll.gif) #ebebeb center no-repeat;
  top: 0;
  left: 0;
  text-align: center;
}
#headingDiv {
  height: 6vh;
  width: 96vw;
  display: flex;
  float: left;
  margin: 0 2vw;
  padding: 1vh 0;
  align-items: flex-start;
  box-sizing: border-box;
  z-index: 60;
  position: relative;
}
#headingDiv #logo img {
  height: 80%;
  float: left;
  position: relative;
  top: 10%;
}
#headingDiv button[name='LogoutButton'] {
  background: none;
  border: none;
  font-size: 2vh;
  line-height: var(--button-size);
  cursor: pointer;
  vertical-align: middle;
}
.hello {
  height: 100%;
}
.hello > img {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  border-radius: 50%;
  margin: 0 1vh;
  border: 0.4vh solid var(--accent-color);
  box-sizing: border-box;
}
#appNameContainer {
  height: 100%;
  float: left;
  color: #000000;
  flex: 0;
  margin-right: 50px;
}
#appNameContainer #logo {
  height: 100%;
  float: left;
}
#appName {
  font-size: 25px;
  font-weight: normal;
  text-align: center;
  height: 30px;
}
#appNameSmall {
  font-size: var(--font-size-main);
  text-align: center;
}
#topRight {
  flex: 1;
  height: 100%;
}
#loggedIn {
  text-align: right;
  height: 100%;
}
#logoutForm {
  height: 100%;
}
#menucontainer {
  width: 100%;
  padding: 0;
  background: white;
  height: 4vh;
  float: left;
  display: block;
  border-bottom: 1px solid var(--color-grey-light);
  z-index: 60;
  position: relative;
}
#menuDiv {
  width: 96vw;
  height: 100%;
  text-transform: lowercase;
  font-size: var(--font-size-mid);
  display: flex;
  justify-content: flex-start;
  color: var(--color-black);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}
#menuDiv .rightNav {
  flex: 1;
  line-height: 4vh;
  justify-content: flex-end;
}
#menuDiv .rightNav .content {
  float: right;
  line-height: 4vh;
  flex: 1;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
#menuDiv .rightNav .content a,
#menuDiv .rightNav .content span,
#menuDiv .rightNav .content input {
  line-height: 4vh;
  display: inline-block;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding-right: 2%;
}
#menuDiv .rightNav .content input {
  background: transparent;
  border: none;
  font-size: var(--font-size-mid);
  font-weight: var(--font-weight-main);
  font-family: var(--font-family-main);
  height: 4vh;
  margin-right: 2%;
  flex: 1;
}
#menuDiv .rightNav .content a {
  background: #fc0;
}
#menuDiv .rightNav .content a:hover {
  text-decoration: none;
}
.alertBanner {
  width: 96vw;
  padding: 0 2vw;
  height: 4vh;
  background: orange;
  color: white;
  float: left;
  line-height: 4vh;
}
.alertBanner a {
  color: white;
  text-decoration: underline;
}
#passDiv {
  position: absolute;
  top: 10vh;
  float: right;
  display: block;
  background: white;
  right: 0;
  padding: 0.5% 1% 0.5% 0.5%;
  z-index: 20;
}
#passDiv .button {
  display: inline-block;
  width: 47.5%;
  margin-right: 5%;
}
#passDiv .button:last-child {
  margin-right: 0;
}
#passDiv form {
  width: 20vw;
  display: block;
  float: left;
}
#passDiv input {
  margin-bottom: 4%;
}
#passDiv input,
#passDiv span {
  float: left;
  display: block;
  width: 100%;
}
.navItem {
  float: left;
  line-height: 4vh;
  height: 4vh;
  cursor: pointer;
  position: relative;
  z-index: 10;
  padding: 0 10px;
  flex: 0 0 auto;
  font-size: var(--font-size-main);
  &:visited, &:hover {
    color: var(--color-black);
    text-decoration: none;
  }
}
.map-button {
  background: url("../images/map.png") 0 / contain no-repeat;
  display: block;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 10px;
  left: 10px;
  cursor: pointer;
}
.dropCont {
  flex: 0 0 auto;
  color: var(--color-black);
  height: 4vh;
  font-size: var(--font-size-main);
}
.dropdown {
  display: none;
  position: absolute;
  float: left;
  padding-top: 4vh;
  z-index: 5;
}
.dropItem {
  display: block;
  line-height: 4vh;
  height: 4vh;
  cursor: pointer;
  background: var(--accent-color);
  color: #FFFFFF;
  font-weight: normal;
  padding: 0 10px;
  font-size: var(--font-size-main);
  &:visited, &:hover, &:link {
    color: #FFFFFF;
    text-decoration: none;
  }
}
.dropItem {
  background: linear-gradient(to right, #111 0%, var(--accent-color) 100%);
}
.dropItem:last-child {
  border-bottom: none;
}
.navItem:hover,
.dropItem:hover {
  background: var(--color-yellow);
  color: #FFFFFF;
}
.dropCont:hover .dropdown {
  display: block;
}
.menuItem {
  height: 28px;
  float: right;
  cursor: pointer;
  color: var(--color-black);
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 7px;
}
.hzItem {
  height: 28px;
  float: right;
  cursor: pointer;
  background-color: #CC0000;
  color: #FFFFFF;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 7px;
}
.menuItemActive {
  height: 28px;
  float: right;
  color: #FFFFFF;
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 7px;
  background-color: var(--color-yellow);
}
.hzItemActive {
  height: 28px;
  float: right;
  color: #FFFFFF;
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 7px;
  background-color: var(--color-yellow);
}
#tabDiv {
  font-size: var(--font-size-main);
  clear: both;
  margin-left: auto;
  margin-right: auto;
  width: 96vw;
}
.tabItem,
.tabItemActive {
  line-height: 2vh;
  text-align: center;
  float: left;
  cursor: pointer;
  border: 1px solid var(--color-grey-light);
  margin: 1vh 1vh 1vh 0;
  padding: 0.5vh;
}
.tabItem:hover,
.tabItemActive:hover {
  background: linear-gradient(to right, #111 0%, var(--accent-color) 100%);
  color: white;
}
#contentDiv {
  width: 96vw;
  margin: 1.5%;
  display: block;
  float: left;
}
#contentDiv.fullWidth {
  margin: 0;
  width: 100%;
}
#colour-key {
  height: 3vh;
}
#filteringDiv {
  width: 100%;
  height: 25px;
  padding: 2vh 0;

  & label {
    margin-right: 2vh;

    & input[name="page"] {
      width: 5vh;
      margin: 0 1vh;
    }

    & i {
      cursor: pointer;
    }
  }

  & .newRecord {
    float: right;
  }
}
#filteringDivLeft {
  float: left;
  padding-right: 10px;
}
#filteringDivMid {
  float: left;
  border-left: 1px solid var(--color-grey-light);
  padding-left: 10px;
  padding-right: 10px;
}
#filteringDivRight {
  float: left;
  text-align: right;
}
.button2,
.button,
a.button2,
a.button {
  background: var(--accent-color);
  background-position: top left;
  text-transform: lowercase;
  font-size: var(--font-size-main);
  cursor: pointer;
  color: #ffffff;
  height: auto;
  min-width: auto;
  animation: fade_out 0.2s forwards;
  background: linear-gradient(to right, #111 0%, var(--accent-color) 100%);
  background-size: 200% 100%;
  transition: all 0.2s ease-in-out;
  padding: 1vh 3.5vh;
  border: 0.1vh solid var(--color-grey-light);
  border-radius: 0.1vh;
  font-family: var(--font-family-main);
  font-weight: 500;
  text-decoration: none;
  box-sizing: border-box;
  text-align: center;
}
.button2:disabled,
.button:disabled {
  background: grey;
  opacity: 0.5;
}
.glow {
  background-color: green;
  transition: background-color 1s;
  -webkit-transition: background-color 1s;
}
.noGlow {
  background-color: var(--accent-color);
  transition: background-color 1s;
  -webkit-transition: background-color 1s;
}
.actionButton {
  background: green;
}
#copyrightDiv {
  padding-top: 30px;
  width: 100%;
  height: 15px;
  clear: both;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.historyDiv {
  padding-bottom: 30px;
  border-bottom: 1px solid var(--color-grey-light);
  padding-top: 30px;
}
.historyImgDiv {
  height: 59px;
  width: 150px;
  float: left;
  text-align: center;
  margin-right: 60px;
}
.historyInfoDiv {
  width: 350px;
  float: left;
}
.historyButtonDiv {
  width: 250px;
  float: left;
}
span.req {
  color: #008200;
}
.button2.req {
  background: #008200;
}
input.req {
  border: 1px solid #008200;
}
.csv-icon {
  background: url(../images/csv.png) center / contain no-repeat;
  display: inline-block;
}
.pdf-icon {
  background: url(../images/pdf.png) center / contain no-repeat;
  display: inline-block;
}
.infoText {
  font-weight: normal;
  color: #0000A0;
}
.infoTextGreen {
  font-weight: normal;
  background-color: #008200;
  color: #FFFFFF;
  padding: 5px;
  margin-bottom: 10px;
}
.errorDiv,
.orderWarning,
.warningDiv {
  padding: 1vh;
  margin-bottom: 2vh;
  color: #FFFF00;
}
.errorDiv {
  background-color: #FF0000;
}
.orderWarning {
  background-color: orange;
}
.infoBack {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: #FFFFFF;
  text-align: left;
  opacity: 0.7;
  filter: alpha(opacity=70);
  z-index: 40;
  display: none;
}
.pagination {
  margin-top: 5px;
  padding-top: 5px;
  padding-left: 10px;
  text-align: left;
  border-top: 1px solid var(--color-grey-light);
}
.rowGeneral {
  background-color: #FFFFFF;
}
.rowGeneral2 {
  background-color: #C0C0C0;
}
.rowGeneral3 {
  background-color: #E0E0E0;
}
.rowGeneral10 {
  background-color: var(--color-grey-light);
  color: #FFFF80;
  font-weight: normal;
}
.hintBox {
  position: absolute;
  display: block;
  max-width: 30vw;
  background: #fff;
  border: 1px solid #ebebeb;
  text-align: justify;
  padding: 1vw;
  top: 0;
  left: 0;
  box-sizing: border-box;
  white-space: nowrap;
}
.systemKey {
  width: 2vh;
  height: 2vh;
  float: left;
  cursor: pointer;
  box-sizing: border-box;
  margin-left: 1vh;
}
.splitRequired {
  border: 3px solid purple;
}
.selectedRow {
  background-color: var(--color-grey-light);
  cursor: pointer;
  border: 1px solid var(--color-grey-light);
  color: #222;
}
.paymentSelectedRow {
  box-shadow: inset 0 0 5px #666;
}
.ygRow {
  border: 2px solid #fc0;
}
.yellowgridliterow {
  background-color: #bce8f1;
  color: #000;
}
.normalRow, tr.normalRow td {
  background-color: #FFFFFF;
  border: 1px solid var(--color-grey-light);
}
.redRow {
  background-color: lightgreen;
  cursor: pointer;
  color: #000;
}
.noCallRow {
  border: 1px solid red;
}
.noPayment {
  background-color: blue;
  cursor: pointer;
  color: #000;
}
.awaitingPayment {
  background-color: #ffd470;
  cursor: pointer;
  color: #000;
}
.quoteRow {
  background-color: lightsteelblue;
  cursor: pointer;
  color: #000;
}
.hiddenRow {
  display: none;
  background-color: #FFFFFF;
}
.hiddenRow td {
  border: 1px solid var(--color-grey-light);
}
.sageRow {
  background: #ffb8d9;
  border: 1px solid #ff69b4;
  cursor: pointer;
  color: #000;
}
.refundedRow {
  background-color: #ED1C24;
  cursor: pointer;
  color: #000;
  border: 1px solid #ED1C24;
}
.portalOrder {
  font-weight: 500;
  font-size: var(--font-size-main);
  color: #000;
}
.hint {
  cursor: help;
}
.showDistOrders {
  float: right;
}
.emailMan {
  display: none;
}
.edit_dist_order,
.del_dist_order {
  cursor: pointer;
}
#fixedHeight {
  height: 300px;
  overflow: auto;
}
.orderRecordTitle {
  font-size: var(--font-size-mid);
  font-weight: normal;
  display: block;
}
#orderRecordWebsite {
  height: 20px;
  padding-top: 15px;
  display: block;
  margin-bottom: 7px;
}
.orderRecordMiscData {
  height: 20px;
  padding-top: 5px;
  margin-bottom: 7px;
}
#orderRecordDate {
  height: 20px;
  padding-top: 5px;
  margin-bottom: 7px;
  display: block;
}
.orderRecordCustomerInfo {
  width: 50%;
  float: left;
  display: block;
  box-sizing: border-box;
  padding: 0 1%;
}
.rowGrey td {
  background: #FFFFFF;
  border: 1px solid var(--color-grey-light);
}
.rowRed td {
  background: red;
  border: 1px solid red;
  color: white;
}
.rowBlue td {
  background: #FFFFFF;
  border: 1px solid var(--color-grey-light);
}
.rowGreen {
  background: var(--accent-color);
  color: #FFFFFF;
}
.rowLightGrey {
  background: var(--color-grey-light);
}
.rowYellow {
  background: var(--color-yellow);
  color: #FFFFFF;
}
.batchLeft {
  width: 80%;
  float: left;
  margin-bottom: 2%;
}
.batchRight {
  width: 19%;
  float: left;
  margin-left: 1%;
}
.batchRight textarea {
  width: 100%;
}
.batchRight .button,
.batchRight .button2 {
  width: 12vw;
  margin-bottom: 2vh;
}
.brMid {
  padding-top: 10px;
}
.batchBottom {
  height: 25px;
  padding-top: 5px;
  clear: both;
  margin-bottom: 15px;
}
.batchBottom div {
  display: block;
  float: left;
  margin: 1% 0;
  width: 100%;
}
.shipmentReadOnly input:not(.button2),
.shipmentReadOnly textarea {
  background: #ebebeb;
  cursor: not-allowed;
}
.shipment-title {
  cursor: pointer;
  display: block;
  width: 100%;
  float: left;
}
.shipment-title span {
  margin-left: 1%;
}
.shipment-container {
  display: none;
  width: 100%;
}
.shipment {
  display: block;
  width: 100%;
  float: left;
  border: 1px solid var(--color-grey-light);
  margin: 1% 0;
}
.shipment .title h3 {
  padding: 0;
  margin: 0;
  display: inline-block;
  float: left;
  line-height: 40px;
  margin: 0 1%;
  cursor: pointer;
}
.shipment .title h3:hover {
  text-decoration: underline;
}
.shipment .title {
  border-bottom: 1px solid var(--color-grey-light);
  width: 100%;
  display: block;
  height: 40px;
}
.shipment .title a {
  display: inline-block;
  float: left;
}
.shipment .details {
  width: 100%;
  float: left;
  min-height: 600px;
  padding: 0 1%;
  display: flex;
  gap: 2vw;
}
.shipment .left {
  height: 100%;
  float: left;
  flex: 2;
}
.shipment .left .shipment_provisioning {
  display: flex;
  margin: 10px 0;
}
.shipment .left .shipment_provisioning select {
  flex: 9;
}
.shipment .left .shipment_provisioning .shipment_provisioning_submit {
  flex: 1;
  font-size: var(--font-size-mid);
  text-align: right;
  cursor: pointer;
}
.shipment .right {
  height: 100%;
  float: left;
  flex: 6;
}
.shipment .right-right {
  height: 100%;
  float: left;
  flex: 2;
  padding-top: 20px;
}
.shipment .right-right select {
  width: 90%;
  margin-top: 50px;
}
.shipment .top {
  display: block;
  width: 100%;
  padding-bottom: 1%;
  margin-bottom: 1%;
  float: left;
}
.shipment .top .itemInfo span {
  padding-left: 40px;
  box-sizing: border-box;
}
.shipment .top .macInfo,
.shipment .top .itemInfo {
  display: inline-block;
  width: 50%;
  float: left;
  padding-top: 2%;
}
.shipment .top .itemInfo p {
  font-weight: 500;
  font-size: var(--font-size-mid);
  line-height: 30px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  padding-left: 40px;
}
.shipment .top .itemInfo p b {
  font-weight: 500;
}
.shipment .top .itemInfo p:hover {
  background: url("../images/edit-icon.png") left / contain no-repeat;
  text-decoration: underline;
}
.shipment .bottom {
  display: none;
  padding-bottom: 2vh;
}
.shipment .left .button2 {
  display: block;
  width: 50%;
}
.shipment .bottom a.button2 {
  display: inline-block;
}
.shipment span,
.shipment input[type="text"],
.shipment input[type="number"],
.shipment select,
.shipment textarea {
  display: block;
}
.shipment .top span {
  margin-top: 20px;
}
.shipment input,
.shipment textarea,
.shipment select {
  margin: 10px 0;
}
.shipment textarea {
  width: 90%;
}
.shipment .left input[type="text"],
.shipment .left select {
  width: 100%;
}
.shipment .right input[type="text"],
.shipment .right select {
  width: 25%;
}
.shipmentAddress {
  display: none;
}
.shipment .shipmentAddress label {
  display: block;
  font-size: var(--font-size-main);
}
.shipment .shipmentAddress input {
  margin: 0;
  width: 50%;
  padding: 0;
}
.shipmentAddressLink {
  cursor: pointer;
}
.shipmentAddressLink:hover {
  text-decoration: underline;
}
.shipmentAddressLink:after {
  content: " \21D3";
}
.shipment .MacSerialTable {
  max-height: 200px;
  overflow-y: scroll;
  width: 90%;
}
.shipment .MacSerialTable table {
  width: 100%;
}
.shipment .MacSerialTable table th {
  background: #0A0A0A;
  color: white;
  text-align: left;
  padding: 0.5%;
  margin: 0;
}
.shipment .MacSerialTable table td {
  padding: 0.5%;
  margin: 0;
}
.shipment .MacSerialTable table tr:nth-child(2n) {
  background: #ebebeb;
}
.newShipment {
  display: block;
  width: 100%;
  float: left;
  cursor: pointer;
}
.vertSpace {
  height: 20px;
}
.paymLeft {
  width: 1000px;
  float: left;
}
.paymRight {
  width: 150px;
  float: left;
  margin-left: 10px;
}
.supplierTable {
  border: 1px solid var(--color-grey-light);
  width: 50%;
}
.supplierTable th {
  text-align: left;
}
.supplierTable td {
  border: 1px solid var(--color-grey-light);
  font-size: var(--font-size-main);
  width: 100%;
}
.supplierTable td:first-child {
  width: 30%;
}
.supplierTable td input, .supplierTable td select {
  width: 100%;
}
.supplierTable td select.readonly {
  border: none;
  color: var(--color-black);
  -webkit-appearance: none;
  -moz-appearance: none;
  pointer-events: none;
  background: white;
}
.supplerTable .button {
  float: right;
}
.textheader {
  font-size: var(--font-size-mid);
}
.hzNewRow {
  background-color: #17365D;
  cursor: pointer;
  color: #FFFFFF;
}
.hzNewRowWithForm {
  background-color: #548DD4;
  cursor: pointer;
  color: var(--color-black);
}
.hzSetupDone,
.backorderRow {
  background-color: #e7ffc9;
  cursor: pointer;
  color: var(--color-black);
}
.hzOutstandingRow {
  background-color: #800080;
  cursor: pointer;
  color: #FFFFFF;
}
.hzNonOutstandingRow {
  background-color: #FFFFFF;
  cursor: pointer;
  border: 1px solid var(--color-grey-light);
}
.hzDetails {
  padding: 5px;
  margin-bottom: 10px;
}
.mandateRow {
  height: 30px;
  padding: 5px;
}
.hzOutstandingDiv {
  font-weight: normal;
  background-color: var(--color-yellow);
  color: var(--color-black);
  padding: 5px;
  margin-bottom: 10px;
}
.hzNonOutstandingDiv {
  font-weight: normal;
  background-color: #008200;
  color: #FFFFFF;
  padding: 5px;
  margin-bottom: 10px;
}
.hzCustomerValidationDiv {
  padding: 10px;
  clear: both;
}
#allCustomers {
  padding: 10px 0px 5px 0px;
  display: none;
}
.notMatched {
  background: #FFFF00;
  color: #800000;
}
.hzTableData {
  width: 380px;
  float: left;
  margin: 2px;
}
#loaderDiv {
  text-align: center;
  margin: 10px;
  display: none;
}
#statusDiv {
  padding: 5px 0px 0px 0px;
}
.greenStatus {
  background-color: #92D050;
  color: var(--color-black);
}
.redStatus {
  background-color: #800000;
  color: #FFFFFF;
}
.additionalItemsRight {
  width: 310px;
  float: right;
}
.additionalItemsRight a {
  width: 80px;
  padding-top: 4px;
  margin-left: 2px;
  height: 20px;
  text-align: center;
  float: left;
  cursor: pointer;
  border: 1px solid var(--color-grey-light);
}
.additionalItemsRight a:hover {
  background: var(--color-grey-main);
  color: #ffffff;
  text-decoration: none;
}
.showItems {
  width: 100%;
  float: left;
}
.customerSpecificField {
  color: #548DD4;
}
.popup,
.popupBG,
.popupCont,
.popupClose {
  position: fixed;
}
.popupCont {
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}
.popupClose {
  right: 34.5%;
  top: 16%;
  z-index: 11;
  color: red;
  font-weight: 500;
  font-size: 30px;
  cursor: pointer;
}
.popupBG {
  width: 100%;
  height: 100%;
  z-index: 5;
  background: black;
  top: 0;
  left: 0;
  opacity: 0.5;
}
.popup {
  z-index: 10;
  background: white;
  width: 30%;
  height: 60%;
  top: 18%;
  left: 33%;
  overflow-y: scroll;
}
.edit,
.del,
.edit_cred,
.del_cred,
.edit_prosp,
.del_prosp,
.add,
.cursor {
  cursor: pointer;
}
#creditAccountForm {
  width: 100%;
  margin: auto auto;
  display: block;
}
.creditAccountTable {
  border: 1px solid var(--color-grey-light);
  width: 100%;
}
.creditAccountTable td {
  border: 1px solid var(--color-grey-light);
  font-size: var(--font-size-main);
}
.creditAccountTable .button {
  float: right;
}
.creditAccountTable input,
.creditAccountTable textarea {
  width: 95%;
}
.creditAccountTable input[type="radio"] {
  width: auto;
}
.creditAccountTable .xeroSearchResults {
  font-size: var(--font-size-main);
  display: none;
}
.creditAccountTable .xeroSearchResults a {
  display: block;
  color: green;
  text-decoration: underline;
}
.accountRow {
  height: 50px;
}
.welcomeEmail,
.priceListEmail {
  display: none;
}
.edit_cred,
.del_cred,
.customerEmail,
.accPriceList {
  cursor: pointer;
  display: inline-block;
  float: left;
  width: 25%;
  height: 25px;
}
.customerEmail {
  background: url("../images/email-icon.png") center / contain no-repeat;
}
.edit_cred {
  background: url("../images/edit-icon.png") center / contain no-repeat;
}
.del_cred {
  background: url("../images/delete-icon.png") center / contain no-repeat;
}
.accPriceList {
  background: url("../images/price-list.png") center / contain no-repeat;
}
.thSort {
  cursor: pointer;
}
.thSort:hover {
  text-decoration: underline;
}
.fanvil_prov {
  text-align: center;
  display: block;
  background: lightgrey;
  height: 100%;
  width: 100%;
}
.fanvil_prov b {
  display: block;
  padding: 10px 0;
  text-align: center;
  color: white;
}
.fanvil_prov select {
  display: block;
  margin: auto;
  width: 90%;
}
.fanvil_prov div {
  display: none;
  color: white;
}
.fanvil_prov div input {
  width: 85% !important;
  margin: 0 auto;
  display: block;
}
.fanvil_prov input[type="submit"],
.fanvil_prov input[type="button"] {
  display: block;
  margin: 10px auto;
  cursor: pointer;
  padding: 10px;
  color: white;
  background: lightgrey;
  border: 1px solid white;
}
#stock-orders {
  & .deliveryMethod {
    & .shippingIcon {
      font-size: 3vh;
    }
  }
  & .items {
    & p {
      padding: 0;
      margin: 0;

      &.received {
        text-decoration: line-through;
      }
    }
  }
}
#distribution-record {
  & .actions {
    & i {
      cursor: pointer;
      font-size: 3vh;
      margin-left: 1vh;
    }
  }
  & .saveButton {
    &.active {
      color: var(--accent-color);
    }
  }
  & .rowBlue {
    & .title {
      & div {
        display: flex;
        align-items: center;
        gap: 1vh;
      }
      & > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
  }
  & .rowGrey {
      height: 100%;
      & td {
        height: 100%;

        & div {
          text-align: left;
          display: flex;
          flex-direction: column;
          height: 100%;

          label {
            font-weight: bold;
            margin-bottom: 1vh;
            display: block;

            & span {
              width: 100%;
              margin-bottom: 0.5vh;
              display: block;

              & i {
                cursor: pointer;
                margin-left: 1vh;
              }
            }

            & input, select {
              width: 100%;
            }
          }

          & i.orderDataButton {
            color: white;
            background: var(--accent-color);
            width: 100%;
            margin: 0;
            text-align: center;
            padding: 0.7vh 0;

            &.disabled {
              cursor: not-allowed;
              background: #ebebeb;
            }
          }
        }
      }
    & .deductions {
      & > div {
        width: 100%;
        height: 100%;
        display: flex;
      }
      & table {
        width: 100%;
        & .actions {
          & div {
            flex-direction: row;
            justify-content: center;
          }
        }
        & th {
          text-align: center;
        }
        & input {
          width: 100%;
        }
      }
    }
  }
  & .status {
    & i {
      cursor: pointer;
      margin-left: 1vh;
    }
  }
}
.distRecordTitle {
  font-size: var(--font-size-mid);
  font-weight: normal;
  display: block;
}
.distSupplier {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: var(--font-size-main);
}
.distSupplier img {
  margin-top: 20px;
}
.distSupplier select {
  margin-right: 30px;
  font-size: var(--font-size-main);
  margin-top: 20px;
  width: 200px;
}
.dist .exch_rate {
  display: block;
  margin-bottom: 20px;
}
.dist .rowBlue select {
  width: 100%;
  margin-bottom: 10px;
}
.dist input[name="note[]"] {
  width: 50%;
}
.dist .distRecordBottom {
  padding-top: 20px;
  margin-top: 20px;
  border-top: 2px solid var(--color-grey-light);
}
.distCourier select {
  margin-right: 30px;
  font-size: var(--font-size-main);
  width: 200px;
  margin-top: 20px;
}
.distCourier img {
  margin: 20px 0;
}
.dist .distRecordBottom .distCourier .setCourier {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  width: 70%;
}
.dist .distRecordBottom .distCourier .setCourier select {
  margin-top: 0;
}
.dist .distRecordBottom .download {
  margin-right: 20px;
}
.dist .distRecordBottom .right {
  display: block;
  height: 40px;
}
.dist .distRecordBottom .right input,
.dist .distRecordBottom .right a {
  float: left;
  margin-right: 20px;
}
.dist .distCourierCosts {
  margin-top: 20px;
}
.dist .distCourierCosts table {
  margin-bottom: 20px;
}
.dist .distCourierCosts table .rowBlue td span {
  font-size: var(--font-size-main);
  color: black;
}
.required {
  border: 1px solid red;
}
.required.button2 {
  background: red;
}
span.addRow {
  cursor: pointer;
}
span.addRow:hover {
  text-decoration: underline;
}
.cardPayment {
  display: none;
  margin: 10px 0;
}
.cardPayment form label {
  display: inline-block;
  margin-right: 10px;
}
.cardPayment form input[type="text"] {
  display: inline-block;
  width: 60%;
}
.cardPayment form input {
  margin: 5px 0;
}
.marketing-emails-record {
  width: 100%;
  display: block;
  float: left;
}
.email-form,
.email-preview {
  width: 40%;
  display: inline-block;
  float: left;
}
.email-form {
  height: 100%;
}
.email-form form {
  display: block;
  float: left;
  width: 100%;
}
.email-preview {
  width: 60%;
  height: 600px;
}
.email-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.email-form span {
  display: block;
}
.email-form input[type="text"],
.email-form textarea,
.email-form select {
  display: block;
  height: 30px;
  width: 90%;
  margin: 10px 0;
}
.deleteImage,
.uploadImage {
  margin: 10px 0;
}
.email-form input[type="checkbox"] {
  margin: 5px 0;
}
.email-form div {
  margin: 10px 0;
}
.email-form textarea {
  height: 200px;
  resize: none;
}
.email-form .sendCampaign {
  margin-top: 50px;
}
.email-form .initialiseSendCampaign {
  opacity: 0.5;
  margin-top: 50px;
}
.email-form .uploadedImages {
  display: block;
  width: 95%;
  min-height: 100px;
  margin: 0 0 10px 0;
  overflow: auto;
}
.email-form .uploadedImages div {
  height: 90px;
  width: 90px;
  display: inline-block;
  float: left;
  background-size: contain;
  margin: 2px;
  border: 1px solid #ebebeb;
  box-sizing: border-box;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
}
.monthlyTarget {
  display: block;
  width: 100%;
  height: 10%;
  border-bottom: 1px solid white;
  box-sizing: border-box;
  text-align: center;
  font-size: 30px;
  color: white;
}
.monthlyTarget p {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  font-size: 50px;
}
.monthlyTarget span {
  font-size: 80px;
  color: white;
  vertical-align: middle;
}
.targetReport {
  display: none;
  width: 100%;
  height: 10%;
  background-size: contain;
  background-position: center;
  font-size: 30px;
  text-align: center;
  float: left;
}
.targetReport .container {
  display: inline-block;
  width: 50%;
  float: left;
}
.targetReport p {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  color: white;
  font-size: 50px;
  line-height: 10vh;
}
.targetReport span {
  font-size: 80px;
  margin-left: 1%;
  line-height: 10vh;
  vertical-align: middle;
}
.targetReport .pizza,
.targetReport .champagne {
  background: url(../images/pizza.gif) no-repeat;
  background-size: contain;
  height: 300px;
  width: 300px;
  display: none;
  position: absolute;
  top: 0;
  z-index: 10;
}
.targetGraph {
  width: 50%;
  display: inline-block;
  float: left;
  height: 80%;
  box-sizing: border-box;
  border-right: 1px solid white;
}
.targetGraph h1 {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 10%;
  color: white;
  text-align: center;
  font-size: 80px;
}
.targetGraph h1.year {
  margin-bottom: 10px;
}
.targetGraph .graph,
.targetGraph .percentage {
  display: block;
  width: 100%;
  height: 60%;
  position: relative;
  font-size: var(--font-size-main);
  border-bottom: 1px solid white;
}
.targetGraph .percentage {
  height: 30%;
}
.targetGraph .graph .container {
  display: block;
  width: 80%;
  height: 90%;
  position: absolute;
  left: 10%;
  bottom: 0;
}
.targetGraph .graph .bar {
  width: 6%;
  display: inline-block;
  float: left;
  background: red;
  position: absolute;
  bottom: 0;
  color: white;
  text-align: center;
  box-sizing: border-box;
  z-index: 4;
}
.targetGraph h2 {
  position: absolute;
  z-index: 5;
  text-align: center;
  display: block;
  width: 100%;
  font-size: 25px;
  margin: 0;
  padding: 0;
}
.targetGraph .graph .bar span {
  margin-top: 50%;
  display: block;
  font-weight: 500;
}
.targetGraph .percentage span {
  font-size: 150px;
  color: white;
  display: block;
  width: 100%;
  text-align: center;
}
/*Support Tickets*/
.supportTicketRecord {
  width: 100%;
  display: block;
  float: left;
}
.supportTicketRecord form {
  width: 100%;
  display: block;
  float: left;
}
.supportTicketRecord .ticketInfo b,
.supportTicketRecord .ticketInfo select {
  float: right;
  margin-right: 20px;
}
.supportTicketRecord .top {
  margin: 0;
  padding: 0;
  width: 30%;
  padding-left: 3%;
  display: inline-block;
  float: left;
  border-bottom: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
  height: 300px;
}
.supportTicketRecord .top:nth-child(3) {
  border-right: none;
}
.supportTicketRecord .top span {
  margin-right: 20px;
}
.supportTicketRecord .top textarea {
  width: 90%;
  height: 100px;
  resize: none;
}
.supportTicketRecord .updates {
  display: block;
  width: 100%;
  float: left;
}
.supportTicketRecord .updates .update {
  display: block;
  width: 100%;
  float: left;
  border-bottom: 1px solid #ebebeb;
  padding: 2% 0;
}
.supportTicketRecord .updates .update div,
.supportTicketRecord .updates .title {
  display: inline-block;
  float: left;
  min-height: 100%;
  padding: 0 2%;
}
.supportTicketRecord .updates .update div:nth-of-type(1),
.supportTicketRecord .updates .title:nth-of-type(1) {
  width: 16%;
}
.supportTicketRecord .updates .update div:nth-of-type(2),
.supportTicketRecord .updates .title:nth-of-type(2) {
  width: 56%;
}
.supportTicketRecord .updates .update div:nth-of-type(3),
.supportTicketRecord .updates .title:nth-of-type(3) {
  width: 16%;
}
.supportTicketRecord .updates .title {
  margin-top: 3%;
  font-weight: 500;
  border-bottom: 1px solid #ebebeb;
  font-size: 16px;
}
.supportTicketRecord .updates .new b {
  color: green;
}
.supportTicketRecord .updates .new a {
  display: block;
  margin-bottom: 5px;
  color: green;
}
.supportTicketRecord .updates .new a:first-child {
  color: var(--color-grey-main);
}
.supportTicketRecord .updates .update textarea {
  height: 100%;
  width: 100%;
  height: 200px;
}
#pieChart {
  display: block;
  width: 100%;
  height: 80vh;
}
/*.row-buttons {
	display: flex;
	align-content: flex-start;
}*/
.row-buttons {
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.row-buttons a, .row-buttons i {
  cursor: pointer;
  height: 25px;
  width: 25px;
}
.row-buttons i {
  font-size: 25px;
  color: var(--color-black);
}
.row-buttons img {
  height: 100%;
}
div.buttons {
  display: flex;
  justify-content: flex-end;
  float: left;
  width: 100%;
  margin: 2% 0;
  gap: 1%;
}
.button-icon {
  width: var(--button-size);
  height: var(--button-size);
  border: none;
  cursor: pointer;
  margin-right: 1%;
  float: left;
  color: var(--accent-color);
  font-size: var(--button-size);
  line-height: var(--button-size);
  position: relative;
  text-transform: lowercase;
}
.button-icon#recordEdit {
  background: url("../images/edit-icon.png") no-repeat;
  background-size: 90%;
}
#orderRecordTopRight {
  text-align: right;
}
.invoicePDFButton {
  background: url("../images/invoice-pdf.png") no-repeat;
  background-size: contain;
}
.copied::after {
  content: 'Copied';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1vh;
  background: var(--accent-color);
  color: white;
  text-transform: lowercase;
  transition: opacity 0.3s ease;
}
.invoicePDFButtonGrey {
  background: url("../images/invoice-pdf-grey.png") no-repeat;
  background-size: contain;
}
.button-icon[aria-disabled="true"] {
  opacity: 0.2;
  cursor: not-allowed;
}
#itemTable input[type="text"] {
  height: 23px;
}
/*PO*/
.poForm .topSection,
.poForm .middleSection {
  width: 100%;
  display: block;
  float: left;
  margin-bottom: 50px;
}
.poForm .topSection div {
  width: 25%;
  display: inline-block;
  float: left;
}
.poForm .topSection div span {
  display: block;
  margin-bottom: 2%;
}
.poForm .topSection div input[type="text"],
.poForm .topSection div select {
  width: 90%;
  margin-bottom: 2%;
}
.poForm .topSection div span.r:after {
  content: '*';
  color: red;
}
.poForm .middleSection table {
  width: 100%;
  border-spacing: 0;
  padding: 0;
}
.poForm .middleSection table tr:not(.poRow) td {
  background: white;
  border: 1px solid #ebebeb;
  border-top: none;
}
.poForm .middleSection table th {
  background: #303030;
  color: white;
  font-weight: normal;
  text-align: left;
  padding: 1%;
}
.poForm .middleSection table td {
  padding: 0;
  background: #dbdbdb;
  padding: 1%;
  border-bottom: 1px solid #ebebeb;
}
.poForm .middleSection table input[type="text"],
.poForm .middleSection table textarea {
  width: 95%;
  padding: 0;
  box-sizing: border-box;
  padding: 10px;
  display: block;
}
.poForm .addPoItem {
  cursor: pointer;
}
.poForm .addPoItem:hover {
  text-decoration: underline;
}
.poForm input[type="submit"] {
  float: right;
  background: green;
  margin-top: 2%;
}
.poForm h2 {
  display: inline-block;
}
.poForm span#paymentInfo {
  float: right;
}
.poForm span#paymentInfo input {
  margin-right: 5px;
}
.poForm .middleSection table th.poCredit {
  background: darkred;
}
.poForm .middleSection table td.poCredit {
  border-left: 1px solid #303030 !important;
}
.poList {
  width: 100%;
  border-spacing: 0;
}
.poList td {
  text-align: left;
  color: #303030;
}
.poList th {
  background: #303030;
  color: white;
  text-align: left;
}
.poList tr:nth-child(2n) td {
  background: #ebebeb;
}
.poList td.actions img {
  height: 25px;
  cursor: pointer;
  margin-left: 5px;
}
/* Quotes Pop Up */
.quotesPopup {
  overflow-y: scroll;
  max-height: 70vh;
}
.quotesPopup .quotesTitle th {
  background: var(--accent-color);
  color: white;
}
.quotesPopup .quotesTitle i {
  cursor: pointer;
  margin-left: 10px;
  color: white;
}
#showSendInvoice {
  position: fixed;
  bottom: 1vw;
  left: 1vw;
  display: block;
  z-index: 10;
  cursor: pointer;
  background: #fc0;
  color: white;
  border-radius: 50%;
  padding: 0.5%;
  width: 1vw;
  line-height: 1vw;
  text-align: center;
}
#adhocSendInvoice {
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  border: 1px solid #ebebeb;
  background: white;
  padding: 2%;
}
#adhocSendInvoice input {
  display: block;
  margin: 10% auto;
  width: 100%;
  padding: 1% 0;
  text-align: center;
  font-size: var(--font-size-main);
}
#newOrderRecord table th {
  vertical-align: top;
  text-align: left;
}
#newOrderRecord table tr {
  display: flex;
}
#newOrderRecord table tr td:first-child,
#newOrderRecord table tr th {
  flex: 3;
}
#newOrderRecord table tr th {
  height: 4vh;
}
#newOrderRecord table tr td:last-child {
  flex: 7;
}
#newOrderRecord .select2 {
  width: 100%;
}
#newOrderRecord .credit_account #upfrontPayment {
  padding-top: 1vh;
  display: block;
}
.actionLog {
  width: 100%;
}
.actionLog th {
  width: 33%;
}
.actionLog td {
  text-align: center;
}
.actionLog tr:nth-child(2n) td {
  background: #ebebeb;
}
#password-sender-form label {
  min-width: 10vw;
}
#password-sender-form input,
#password-sender-form textarea {
  width: 100%;
  margin-right: 1vw;
  margin-left: 1vw;
}
#password-sender-form .formGroup {
  margin-top: 2vh;
  display: flex;
  flex-direction: row;
  align-content: space-between;
}
#password-sender-form #expire-time-unit {
  margin-left: auto;
}
.post-code-row > td:nth-child(2) {
  display: flex;
  gap: 10px;
  flex-direction: row;
}
select#suggestedAddress {
  width: 100%;
  margin-top: 16px;
}
.post-code-row td .addressSearchButton {
  height: unset !important;
}
.credentialPopUp td {
  padding: 1%;
}
.credentialPopUp .credentialSave {
  cursor: pointer;
}
.credentialPopUp td div {
  display: flex;
}
.credentialPopUp td div h2 {
  padding: 0;
  margin: 0;
}
.credentialPopUp td div input,
.credentialPopUp td div textarea,
.credentialPopUp td div h2 {
  flex: 1;
  flex-grow: 4;
}
.credentialPopUp td .totp {
  height: 100%;
  width: 100%;
}
.credentialPopUp input:read-only {
  background: #ebebeb;
}
.credentialPopUp td [class*="fa-"] {
  font-size: var(--font-size-mid);
  padding-left: 2%;
}
.credentialPopUp td div {
  align-content: center;
  align-items: center;
}
.credentialPopUp td .fa:hover {
  text-decoration: none;
}
.dataCopied {
  color: green !important;
}
.dataCopy:hover {
  text-decoration: none;
}
.credentialPopUp {
  position: fixed;
  box-shadow: 0px 10px 20px #888888;
  background: white;
  z-index: 65;
  width: 35vw;
  padding: 1vw;
}
.credentialPopUp #closePopUp {
  float: right;
  text-align: right;
  cursor: pointer;
  color: red;
}
.credentialPopUp table {
  border-spacing: 0;
  padding: 0;
}
#tcx-installations {
  border-collapse: collapse;
  & th, & td {
    border: solid 1px #ececec
  }
  & td {
    height: calc(3em + 15px);
  }
  & .supportCell {
    padding: 1vh 1vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & .unsupported {
        color: red;
    }
  }
}
.installationActions {
  display: block;
  height: 100%;
  width: 100%;
}
.installationActions a {
  height: 30px;
  display: block;
  width: 40px;
  text-decoration: none;
  margin: 0 auto;
}
.installationActions a:hover {
  text-decoration: none;
}
.installationActions .actionRequired {
  opacity: 1 !important;
}
.installationActions .actionIcon:before {
  font-size: var(--font-size-mid);
  font-weight: 500;
  line-height: 50px;
  float: right;
  height: 100%;
  text-align: right;
}
.installationActions .actionRequired:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f071";
}
.installationActions .actionError:before {
  color: red;
}
.installationActions .actionComplete:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00c";
  color: green;
}
.installationActions .actionScheduled:before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f073";
  color: green;
}
.installationActions:not(.actionComplete,.actionRequired) [class*="fa-"] {
  line-height: 30px;
  text-align: center;
  font-size: 30px;
  color: #303030;
}
.installationActions .getPasswords {
  background: url("../images/pwsafe.png") no-repeat center / contain;
}
.installationActions .orderLink {
  background: url("../images/view-icon.png") no-repeat center / contain;
}
.installationActions .noOrderLink {
  background: url("../images/view-icon.png") no-repeat center / contain;
  cursor: not-allowed;
  opacity: 0.2;
}
.installationActions .configLink {
  background: url("../images/setup.png") no-repeat center / contain;
}
.installationActions .noConfigLink {
  background: url("../images/setup.png") no-repeat center / contain;
  cursor: not-allowed;
  opacity: 0.2;
}
.installationActions .instanceInstalling {
  background: url("../images/loading.gif") no-repeat center / contain;
}
.installationActions .deleteInstallation {
  background: url("../images/delete-icon.png") no-repeat center / contain;
}
.installationActions .undeleteInstallation {
  background: url("../images/undo-icon.png") no-repeat center / contain;
}
.installationActions .checklistLink {
  background: url("../images/checklist.png") no-repeat center / contain;
}
.installationActions .noChecklistLink {
  background: url("../images/checklist.png") no-repeat center / contain;
  cursor: not-allowed;
  opacity: 0.2;
}
.listDropdown {
  position: relative;
  display: inline-block;
  width: 80%;
  text-align: left;
  border: 1px solid #ebebeb;
  background: white;
  color: var(--color-grey-main);
  min-width: 10vw;
}
.listDropdown span,
.listDropdown a {
  display: block;
  cursor: pointer;
  width: 100%;
  background: var(--accent-color);
  color: white;
  padding: 4%;
  box-sizing: border-box;
  user-select: none;
}
.listDropdown span:hover,
.listDropdown a:hover {
  background: #fc0;
  color: #fff;
  text-decoration: none;
}
span.listDropdownButton {
  background: #fff;
  color: var(--color-grey-main);
}
.listDropdownButton i {
  display: inline-block;
  float: right;
}
.listDropdownContent {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
}
.checklist3CX {
  width: 100%;
}
.checklist3CX td {
  padding: 2px;
  font-size: var(--font-size-main);
}
.checklistItem3CX {
  display: none;
}
.checkboxCheckList3CX {
  display: block;
  height: 30px;
  width: 30px;
  border: 1px solid #cbcbcb;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  font-size: var(--font-size-mid);
  color: #fc0;
}
.addCustomChecklistItem {
  display: block;
  color: #fc0;
  cursor: pointer;
  line-height: 30px;
}
.addCustomChecklistItem:hover {
  text-decoration: none;
}
.editCustomItem:hover {
  padding-right: 30px;
  cursor: pointer;
  background: url("../images/edit-icon.png") no-repeat right / contain;
}
.addCheckListValue {
  margin-left: 1%;
  color: blue !important;
}
.installationActions .instance-action {
  margin-bottom: 5px;
}
.fa-terminal {
  background: #303030;
  color: white !important;
  box-sizing: border-box;
  padding: 2% 8%;
  font-size: var(--font-size-mid) !important;
  border-radius: 5px;
}
.sbcDetailsForm .fa-terminal {
  padding: 1%;
  margin-left: 1%;
  cursor: pointer;
}
.install-error.fa-circle-exclamation {
  color: red !important;
}
.installationActions .fa-hourglass-start {
  opacity: 0.5%;
}
.flex-parent {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}
.flex-parent .flex-child {
  height: 100%;
  flex: 1;
}
.flex-child input[type="text"],
.flex-child select {
  width: 100%;
  box-sizing: border-box;
  padding: 1%;
  height: 1.5vw;
}
.flex-child textarea {
  width: 99%;
  min-height: 5vw;
  padding: 0;
}
#orderTop {
  margin-bottom: 2%;
}
:root {
  --crm-logo-size: 4vh;
}
.crm-middle {
  background: #ebebeb;
  overflow-y: scroll;
  padding: 1vw;
}
.crm-logo img {
  max-height: 5vh;
  margin-bottom: 5%;
  width: 100%;
}
.crm-left h2 {
  margin: 3% 0;
  padding: 0;
}
.crm-buttons {
  display: flex;
  justify-content: flex-start;
  margin: 3% 0;
  column-gap: 1vh;
}
.crm-button {
  text-align: center;
  width: 100%;
  height: 100%;
  float: left;
  flex: 0;
}
.crm-record {
  height: 89.9vh;
  display: grid;
  grid-template-columns: 1fr 3fr 2fr;
  grid-template-rows: auto;
}
.crm-record .crm-col {
  display: grid;
  grid-template-rows: repeat(5, 20%);
}
.crm-button i {
  color: white;
  display: block;
  background: #fc0;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-size-mid);
  width: var(--crm-logo-size);
  line-height: var(--crm-logo-size);
  height: var(--crm-logo-size);
}
.crm-button a:hover {
    text-decoration: none;
}
.crm-record .crm-left {
  grid-template-rows: 1fr 2fr 2fr;
}
.crm-record .crm-right {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 89.9vh;
}
.crm-button i:hover {
  background: #ebebeb;
}
.crm-block {
  font-weight: 300;
  overflow: hidden;
  box-sizing: border-box;
}
.button-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1vh;
}
.button-grid i {
  font-size: 150%;
  text-align: center;
  aspect-ratio: 1;
  background: #444445;
  border-radius: 1vh;
  color: #bfbec1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-grid i:hover {
  cursor: pointer;
  color: #656566;
}
.button-grid i.remove:after {
  content: "\f715";
  position: relative;
  left: -60%;
  width: 0;
  font-size: 115%;
}
.crm-right .crm-block {
  flex-grow: 1;
  min-height: 17%;
  width: 50%;
}
.crm-block b {
  font-weight: 500;
}
.crm-block {
  color: white;
  padding: 3%;
  box-sizing: border-box;
}
.crm-block h3 {
  font-weight: 300;
  color: white;
  margin: 3% 0%;
}
.crm-block .changeable {
  cursor: pointer;
}
.crm-block span.changeable.placeholder {
  color: #999;
  font-style: italic;
}
.crm-block .crmDate {
  background: transparent;
  border: none;
  font-family: var(--font-family-main);
  font-size: var(--font-size-main);
  color: white;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.crm-block#block-initial {
  flex-grow: 1;
}
.crm-record .crm-logo {
  width: 100%;
  overflow: hidden;
}
.crm-block .logo {
  height: 4vh;
  display: block;
  margin-bottom: 1vh;
}
.crm-block .customer-logo {
  width: 100%;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  height: 5vh;
}
.crm-block:nth-child(1),.crm-block:nth-child(6) {
  background: white;
  color: var(--color-grey-main);
}
.crm-block:nth-child(1) h3,.crm-block:nth-child(6) h3 {
  color: var(--color-grey-main);
}
.crm-block:nth-child(2),.crm-block:nth-child(7) {
  background: #595959;
}
.crm-block:nth-child(3),.crm-block:nth-child(8) {
  background: #434343;
}
.crm-block:nth-child(4),.crm-block:nth-child(9) {
  background: #2e2e2e;
}
.crm-block:nth-child(5),.crm-block:nth-child(10) {
  background: #1a1a1a;
}
.crm-block#block-3cx {
  color: #000;
  background: #ebebeb;
}
.crm-block#block-3cx #tcx_alignment {
  color: white;
  font-weight: bold;
  padding: 0 2%;
}
.crm-block#block-3cx #tcx_alignment.aligned {
  background: green;
}
.crm-block#block-3cx #tcx_alignment.unaligned {
  background: red;
}
.crm-block#block-3cx.affiliate {
  background: #363535;
}
.crm-block#block-3cx.affiliate,
.crm-block#block-3cx.bronze,
.crm-block#block-3cx.gold {
  color: white;
}
.crm-block#block-3cx.bronze {
  background-color: #f5d3c8;
  background-image: linear-gradient(315deg, #f5d3c8 0%, #c08552 74%);
}
.crm-block#block-3cx.silver {
  background-color: #e7eff9;
  background-image: linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%);
}
.crm-block#block-3cx.gold {
  background-color: #a38560;
  background-image: linear-gradient(315deg, #a38560 0%, #e0d4ae 74%);
}
.crm-block#block-3cx.platinum {
  background-color: #c3cbdc;
  background-image: linear-gradient(147deg, #c3cbdc 0%, #edf1f4 74%);
}
.crm-block#block-3cx.titanium {
  background-color: #f1f2f6;
  background-image: linear-gradient(315deg, #f1f2f6 0%, #c9c6c6 74%);
}
.crm-block#block-finance .xeroAction {
  cursor: pointer;
  font-weight: bold;
  display: block;
}
.crm-block#block-finance .xeroAction {
  color: var(--color-black);
}
.crm-block#block-finance .xeroAction#archiveContact {
  color: white;
}
.crm-block#block-finance .xeroAction i {
  margin-right: 5px;
}
.crm-block#block-contacts {
  overflow-y: auto;
}
.crm-block#block-contacts .contacts-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2%;
}
.crm-block#block-contacts .contact-bubble {
  background: #777;
  text-align: center;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  place-items: center;
  display: grid;
}
.crm-block#block-contacts .contact-bubble.MainContact {
  background: var(--accent-color);
}

.crm-block#block-prospects a {
  color: white;
  text-decoration: underline !important;
}

.crm-history,
.crm-history > div.crm-events {
  display: block;
  width: 100%;
}
.crm-history h3 {
  padding: 0;
  margin: 0;
  font-weight: var(--font-weight-main);
}
.crm-event {
  background: white;
  padding: 1vw;
  box-sizing: border-box;
  margin-top: 1vw;
  display: flex;
  color: #303030;
  line-height: var(--crm-logo-size);
}
.crm-history .crm-action {
  cursor: pointer;
  transition: 0.3s;
}
.crm-history .crm-action:hover {
  box-shadow: 0px 10px 50px #888888;
}
.crm-event:last-of-type {
  margin-bottom: 1vw;
}
.crm-event div[class*='crm-event-'] {
  flex: 1;
}
.crm-event .crm-event-description {
  flex: 3 !important;
  max-width: 40%;
  word-wrap: break-word;
  display: flex;
  gap: 0.5vw;
}
.crm-event .crm-event-description textarea {
  resize: none;
  width: 100%;
  box-sizing: border-box;
  padding: 2%;
  font-size: var(--font-size-main);
  font-weight: var(--font-weight-main);
  font-family: var(--font-family-main);
  height: 100px !important;
}
.crm-event {
  line-height: 2vh;
}
.crm-event .crm-event-description .full-text,
.crm-history .crm-event-description .hide-text {
  display: none;
}
.crm-event .crm-event-description .text-options {
  cursor: pointer;
}
.crm-event .crm-event-description .text-options:hover {
  color: #fc0;
}
.crm-event .crm-event-date {
  text-align: right;
}
.crm-history .crm-loading {
  background: url('../images/crm-loading.gif') center no-repeat;
  display: block;
  width: 100%;
  height: 5vw;
}
.crm-event-type .crm-event_icon,
div[class*='crm-event-'] [class*="fa-"] {
  height: var(--crm-logo-size);
  display: block;
  width: var(--crm-logo-size);
  font-size: var(--crm-logo-size);
}
.crm-event-type .crm-event_icon.tcx_order {
  background: url('../images/3cx_logo.svg') #363535 center / 80% no-repeat;
}
.crm-event-type .close-event {
  cursor: pointer;
}
.crm-event-type .close-event:hover {
  color: red;
}
.crm-event-action i {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  float: right;
  color: #303030;
  cursor: pointer;
  margin-left: 0.5vw;
}
.crm-event-action i:hover {
  color: #fc0;
}
.crm-event-action .icon-loading {
  background: url("../images/loading.gif") no-repeat center / contain;
  width: var(--crm-logo-size);
  height: var(--crm-logo-size);
  float: right;
  margin-left: 0.5vw;
}
.crm-initials,
.crm-avatar {
  display: block;
  background: #777;
  width: var(--crm-logo-size);
  line-height: var(--crm-logo-size);
  text-align: center;
  color: white;
  border-radius: 50%;
  float: right;
  cursor: default;
  border: 0.4vh solid var(--accent-color);
}
.crm-record .fa-phone:after {
  font-size: var(--font-size-mid);
  vertical-align: top;
  margin-left: -1.5vh;
  color: #fc0;
}
.crm-record .fa-phone.inbound:after,
.crm-record .fa-phone.missed:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f060";
}
.crm-record .fa-phone.outbound:after,
.crm-record .fa-phone.notanswered:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f061";
}
.crm-record .fa-phone.missed,
.crm-record .fa-phone.notanswered {
  color: red;
}
.crm-record .fa-envelope-o.sent:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f061";
}
.crm-record .fa-envelope-o.received:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f060";
}
.crm-record .fa-envelope-o:after {
  font-size: var(--font-size-mid);
  vertical-align: bottom;
  margin-left: -1vh;
  color: #fc0;
}
.crm-filters {
  display: flex;
  justify-content: left;
  margin-bottom: 2vh;
  line-height: 2vh;
}
.crm-filters select {
  width: 10vw;
  margin: 0 1vw;
  border: none;
  background: #ebebeb;
  color: var(--color-grey-main);
  height: auto;
  padding: 0;
}
.crm-filters select option,
.crm-filters select,
.crm-filters input[type="text"] {
  text-transform: capitalize;
  font-size: var(--font-size-main);
  font-weight: var(--font-weight-main);
  font-family: var(--font-family-main);
  height: 2vh;
  background: transparent;
  color: var(--color-grey-main);
  padding: 0;
}
.crm-filters input[type="text"] {
  border-bottom: 1px solid var(--color-grey-main);
  width: 10vw;
  margin: 0 1vw 0 0.5vw;
  padding: 0;
}
.crm-block.doNotCall {
  border: 5px solid red;
  box-sizing: border-box;
}
.crm-record input.changeable,
.crm-record .crm-block select {
  border: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-main);
  font-weight: 300;
  color: white;
  height: auto;
  background: transparent;
  font-family: var(--font-family-main);
  display: inline;
  width: auto;
  max-width: 15vw;
}
.crm-record .crm-block .changeable-options {
  display: none;
}
.crm-record .crm-block option {
  padding: 0;
  background: white;
  color: #0A0A0A;
}
.crm-record-search-container {
  width: max-content;
  display: flex;
}
.crm-record-search {
  display: block;
  width: 100%;
  height: 10vh;
  border-top: 1px solid #ebebeb;
  border-left: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
}
.crm-record-search-results {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  max-height: 50vh;
  overflow-y: scroll;
}
.crm-record-search-results .result {
  height: 5vh;
  width: 100%;
  display: block;
  display: flex;
  background: #0A0A0A;
  cursor: pointer;
}
.crm-record-search-results .result:hover {
  text-decoration: none;
}
.crm-record-search-results .result:nth-child(2n) {
  background: #303030;
}
.crm-record-search-results .result span {
  display: inline-block;
  color: white;
  line-height: 2.5vh;
  align-self: center;
}
.crm-record-search-results .result div {
  background-color: white;
  background-size: 90% auto;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 5%;
  border-bottom: 1px solid #ebebeb;
  vertical-align: middle;
  display: inline-block;
  flex: 0 0 auto;
  padding: 0 1.5vh;
  width: 3vh;
}
.crm-record-search-results .result div i {
  color: #fc0;
  line-height: 5vh;
  text-align: center;
  width: 100%;
  font-size: 3vh;
}
.crm-block-actions {
  display: block;
  position: relative;
  z-index: 10;
  overflow-y: scroll;
  box-sizing: border-box;
  padding-right: 5%;
  width: 100%;
}
.crm-block .crm-block-loading {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 15;
  top: 0;
  background: url('../images/crm-loading.gif') transparent center no-repeat;
}
.crm-block-actions .close-block-actions {
  display: block;
  width: 100%;
  height: 10%;
}
.crm-block-actions .close-block-actions i {
  color: #0A0A0A;
  font-size: 2vh;
  text-align: right;
  float: right;
  cursor: pointer;
  margin-left: 2%;
}
form.contact-info {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: row;
  gap: 2vh;
  height: 100%;
}
form.contact-info {
  & .contact-info-detail {
    margin: 0 0 1vh;
    & i {
      margin-right: 0.5vh;
    }
    &.warning {
      color: orange;
    }
  }
}

form.contact-info div {
  display: flex;
  flex-direction: column;
  gap: 1vh;
}
form.contact-info div.full {
  width: 100%;
  flex-direction: row;
}
form.contact-info div span {
  flex: 3;
}
form.contact-info div input {
  flex: 7;

  &:read-only {
    background: #ebebeb;
  }
}
form.contact-info div span {
  font-size: var(--font-size-main);
  color: #0A0A0A;
}
form.contact-info div span.req:after {
  content: ' *';
  color: red;
}
form.contact-info div input,
form.contact-info div select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1%;
  height: 1.5vw;
  font-size: var(--font-size-main);
}
form.contact-info div select {
  text-align: center;
}
.video-table {
  table-layout: fixed;
  width: 95vw;
}
.video-table td {
  text-align: center;
}
.video-table .outstanding-row {
  background-color: #e2e223;
}
.modal-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 50vw;
  min-height: 20vh;
  background: white;
  border-color: black;
  border-width: 1vw;
  border-style: solid;
  padding: 0 3vw;
}
.modal-window .top-right {
  position: absolute;
  top: 0.5vw;
  right: 0.5vw;
}
.video-assets-form {
  display: flex;
  flex-direction: row;
  gap: 2vw 2vw;
  flex-wrap: wrap;
}
.video-assets-form > .form-part {
  display: flex;
  flex-direction: column;
  gap: 2vh 2vw;
}
.video-assets-form > .form-part > label {
  display: block;
}
.icon-btn {
  background: unset;
  border: unset;
}
.icon-btn:hover {
  cursor: pointer;
}
.flex-container {
  display: flex;
}
.flex-container > div {
  flex: 1;
}
.magento-tools .flex-container {
  width: 50%;
}
span.orderAdditions {
  font-size: var(--font-size-main);
  cursor: pointer;
  line-height: 20px;
  display: block;
  margin-bottom: 20px;
}
span.orderAdditions i {
  margin-right: 5px;
  font-size: var(--font-size-mid);
}
span.orderAdditions .fa-trash {
  margin-left: 5px;
  cursor: pointer;
  color: black;
}
.sbcDetailsBg {
  position: fixed;
  background: #000;
  z-index: 15;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  cursor: pointer;
}
.sbcDetailsForm {
  display: none;
  position: fixed;
  z-index: 20;
  border: 1px solid #ebebeb;
  width: 40%;
  left: 30%;
  background: white;
  box-sizing: border-box;
  padding: 1%;
  max-height: 60vh;
  overflow-y: scroll;
  top: 0;
  text-align: left;
}
.sbcDetailsForm h2 {
  border-bottom: 1px solid var(--color-grey-main);
  width: 100%;
  padding-bottom: 1%;
}
.sbcDetailsForm h3 {
  margin: 0;
}
.sbcDetailsForm h2,
.sbcDetailsForm h3 {
  width: 100%;
}
.sbcDetailsForm h2 span {
  float: right;
}
.sbcDetailsForm h2 span,
.sbcDetailsForm h3 span {
  font-weight: normal;
  font-size: var(--font-size-main);
  margin-left: 10px;
}
.sbcDetailsForm input.disabled {
  background: #ebebeb;
}
.sbcDetailsForm section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sbcDetailsForm section input[type="text"] {
  flex: 2;
  margin-bottom: 10px;
}
/*3cx videos*/
.video-filtering {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 95vw;
  margin: 1% 0;
  padding: 1% 0;
}
.video-filtering input {
  cursor: pointer;
}
.video-filtering .filters input[type="submit"],
.video-filtering .filters input[type="text"] {
  margin: 0 1vw;
}
.filter-buttons input {
  background-color: var(--accent-color);
  border: none;
  color: white;
  text-decoration: none;
  cursor: pointer;
}
.video-table {
  font: normal 1.2vw var(--font-family-main);
}
.video-table tr th {
  background: black;
  color: white;
}
.video-table tr td {
  background: white;
  color: black !important;
  text-align: center;
}
.video-table tr td i {
  color: black;
}
#request .complete td,
#request .complete i {
  background: white;
}
#request .incomplete td,
#request .incomplete i {
  background: lightblue;
}
#request .overdue td,
#request .overdue i {
  background: red;
}
#request .unpaid td,
#request .unpaid i {
  background: mediumpurple;
}
#request .pending td,
#request .pending i {
  background: orange;
}
#request tr td a,
.videoUpload,
.videoEmail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: black !important;
  cursor: pointer;
}
.video-table i {
  font-size: var(--font-size-mid);
}
.video-table i.fa-pencil {
  font-size: var(--font-size-mid);
  padding-top: 0.5vh;
}
.editBranding i {
  font-size: var(--font-size-main);
}
.videoIncomplete {
  background: lightblue;
}
.videoOverdue {
  background: red;
}
.videoUnpaid {
  background: mediumpurple;
}
.videoPending {
  background: orange;
}
.videoComplete {
  background: white;
  border: solid 1px black;
}
.videoPage {
  padding: 0;
  margin: 5px;
}
.videoPage:disabled {
  border: 1px solid black;
  color: black;
}
.videoUpload {
  display: block;
}
.window {
  position: fixed;
  top: 30vh;
  left: 35vw;
  width: 30vw;
  /*height: 40vh;*/
  height: max-content;
  padding: 2vh 0;
  background: white;
  border: solid 10px black;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.window h2 {
  text-align: center;
}
.window table,
.window select,
.window form,
.window input,
.window a {
  margin: 1vh auto;
  width: min-content;
}
.window a:hover {
  text-decoration: none;
  color: white;
}
.window .buttons * {
  min-width: 30px;
  height: min-content;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: var(--font-weight-main);
  font-family: var(--font-family-main);
  padding: 1vh;
  margin: 2vh 0;
}
.window table {
  width: 70%;
}
.window .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
#thumbnailSelect table tr td:first-child {
  font-weight: 1000;
  width: 10%;
}
#thumbnailSelect input[type="file"] {
  margin-bottom: 2vh !important;
}
#formSubmit {
  display: none;
}
/*.spinner {*/
/*	height: 48px;*/
/*	width: 48px;*/
/*	color: #5a5a5a;*/
/*	position: relative;*/
/*	display: inline-block;*/
/*	border: 5px solid;*/
/*	border-radius: 50%;*/
/*	border-top-color: transparent;*/
/*	animation: rotate 1s linear infinite; }*/
/*@keyframes rotate {*/
/*	0% {*/
/*		transform: rotate(0); }*/
/*	100% {*/
/*		transform: rotate(360deg); }*/
/*}*/
#addThumbnail {
  display: flex;
  flex-direction: column;
  width: max-content;
  margin: 5vh 0;
}
#addThumbnail input {
  width: min-content;
}
#changeOrderCustomer {
  margin-left: 1%;
  cursor: pointer;
}
#changeOrderCustomerSelect {
  width: 50%;
}
.stdForm {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.stdForm h2,
.stdForm h3 {
  width: 100%;
}
.stdForm .row1 {
  width: 100%;
}
.stdForm .row2 {
  width: 50%;
}
.stdForm .row4 {
  width: 25%;
}
.stdForm label {
  width: 100%;
}
.stdForm select,
.stdForm > div > .button2 {
  flex: 1;
}
.stdForm input:not([type="checkbox"],[type="submit"],[type="radio"]) {
  flex: 9;
}
.stdForm .button2 {
  width: auto;
}
.stdForm > div {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5%;
  box-sizing: border-box;
  gap: 0.5vw;
}
.stdForm table {
  width: 100%;
}
.stdForm .uploadedImage {
  width: 100%;
}
.stdForm .select2select {
  width: 100%;
}
#promoForm #note {
  width: 100%;
}
#promoForm {
  width: 50%;
}
#promoForm .promoField {
  width: 4vw;
}
#surveyTable {
  margin: 0 auto;
  font-size: var(--font-size-mid);
  min-width: 80vw;
}
#surveyTable th,
#surveyTable td {
  font-size: var(--font-size-mid);
  text-align: center;
}
#surveyTable a {
  cursor: pointer;
}
.surveyTable {
  margin: 2vh 0;
  width: 40vw;
}
.surveyTable th,
.surveyTable td {
  font-size: var(--font-size-main);
  text-align: center;
}
.surveyTable th {
  background-color: var(--accent-color);
  color: white;
}
.surveyTable {
  border: none;
  border-collapse: collapse;
}
.surveyTable th,
.surveyTable td {
  border: 1px solid var(--accent-color);
}
#surveyFunctions {
  display: flex;
  flex-direction: row;
  width: 90%;
  margin: 2vh 0;
}
#newSurvey {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 7%;
  text-align: center;
}
#newSurveyWindow form {
  width: max-content;
}
#newSurveyWindow label {
  display: flex;
  flex-direction: column;
  margin: 2vh 0;
}
#emailSurveys {
  display: flex;
  flex-direction: column;
}
.surveyCode {
  background: #ececec;
  padding: 1vh 1vw;
  width: min-content;
  font-size: 0.6vw;
  color: black;
  font-family: monospace, monospace;
}
.arran-boxes {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 10%;
  font-size: var(--font-size-main);
}
.arran-boxes input {
  width: 40%;
}
.arran-arrows {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 50%;
}
.arran-arrow {
  margin: auto;
}
div[id^="licenceKey"] {
  display: inline;
}
span[id^="add_hosting"] {
  display: none;
}
span.keyName {
  display: none;
}
.table {
  width: 100%;
}
.table tr th {
  color: white;
  background: var(--accent-color);
}
.table tr td {
  text-align: center;
}
select#report {
  min-width: max-content;
  margin-right: 1vw;
}
.nav-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: fit-content;
}
.nav-buttons .button2 {
  width: min-content;
  background: var(--accent-color);
  background-position: top left;
  text-transform: lowercase;
  font-size: var(--font-size-mid);
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 1vh 2vh;
  height: 100%;
  text-align: center;
  display: block;
  margin: 0 0.2vw;
  white-space: nowrap;
}
.nav-buttons .button2:hover {
  text-decoration: none;
  color: white;
}
.billingEngineDialog form {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  gap: 1vh;
  justify-content: space-between;
}
.billingEngineDatePicker .ui-state-disabled {
  display: none;
}
.billingEngineMonthPicker thead {
  display: none;
}
.billingEngineDialog form > div {
  flex-basis: calc(50% - 1vh);
  display: flex;
  flex-wrap: wrap;
  row-gap: .5vh;
}
.billingEngineDialog form > div.full {
  flex-basis: 100%;
}
.billingEngineDialog form label,
.billingEngineDialog form input:not([type="checkbox"]),
.billingEngineDialog form select {
  width: 100%;
}
.billingEngineDialog form label {
  height: 2vh;
}
.billingEngineDialog form > .multiple {
  display: flex;
  flex-basis: 100%;
  gap: 1vh;
  align-items: center;
  justify-content: center;
}
.billingEngineDialog form > .multiple > div {
  flex: 1;
  display: flex;
  row-gap: .5vh;
  flex-wrap: wrap;
}
.billingEngineDialog form > .multiple > i {
  font-size: 2.5vh;
  cursor: pointer;
}
.billingEngineDialog form > .multiple > .addMultiple {
  padding-top: 2vh;
}
.billingEngineDialog form h2 {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-main);
  font-weight: var(--font-weight-main);
}
.dialogTable {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  max-height: 70vh;
}
.dialogTable .tr, .dialogTable .thead {
  flex-basis: 100%;
  display: flex;
}
.dialogTable .thead {
  background: var(--accent-color);
  color: white;
}
.dialogTable .tr:nth-child(2n) {
  background: #ebebeb;
}
.dialogTable .td,.dialogTable .th {
  flex: 1;
  padding: 1vh;
}
.stdDialog {
  max-height: 80vh;
}
.stdDialog table {
  width: 100%;
}
.stdDialog td,
.stdDialog th {
  text-align: left;
  font-size: var(--font-size-main);
}
.stdDialog tr:nth-child(2n) td {
  background: #ebebeb;
}
.stdDialog td input {
  background: white;
  border: 1px solid #ebebeb;
}
.stdDialog a i {
  margin-right: 5px;
}
tr[id^='itemRow'] span.stockInfo {
  color: white;
  margin-right: 5px;
}
tr[id^='itemRow'].outofstock td {
  background: red;
}
tr[id^='itemRow'].backorder td {
  background: orange;
}
.otpContainer {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
}
.otpContainer input {
  flex: 9;
}
.otpContainer .simpleTimer {
  flex: 1;
}
.simpleTimer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.simpleTimer > div {
  width: 4vh;
  height: 4vh;
  border-radius: 50%;
  border: 0.1vh solid var(--accent-color);
  border-top: 0.1vh solid transparent;
  animation: spin 2s linear infinite;
  box-sizing: border-box;
}
.simpleTimer > span {
  display: block;
  position: relative;
  width: 4vh;
  line-height: 4vh;
  text-align: center;
  left: -4vh;
  font-size: var(--font-size-main);
  color: var(--accent-color);
  pointer-events: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.crmDialog.newAccount {
  width: 80%;
  left: unset;
}
#newAccount {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#newAccount fieldset {
  display: flex;
  flex-direction: column;
  border: none;
}
#newAccount fieldset label {
  display: flex;
  flex-direction: row;
  margin: 1vh 0;
}
#newAccount fieldset label p {
  margin: 0;
  width: 50%;
}
#newAccount fieldset label > input,
#newAccount fieldset label > span {
  height: min-content;
  padding: 0.5vh 0;
  border: none;
  width: 50%;
}
#newAccount fieldset label > input {
  border-bottom: solid 1px grey;
}
.crm-record-search-container #newCustomer {
  color: black !important;
  background: none !important;
  padding-right: 2vw !important;
  cursor: pointer;
}
i.copyButton {
  cursor: pointer;
  margin: 0 1%;
}
#tcx-keys section {
  padding: 2vh 0;
}
#tcx-keys a,
#tcx-keys i {
  cursor: pointer;
}
#tcx-keys table {
  border-collapse: collapse;
  column-gap: 1vw;
}
#tcx-keys table td {
  padding: 1vh 1vw;
}
#tcx-keys table td i {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#tcx-keys table thead tr {
  background: var(--accent-color);
  color: white;
}
#tcx-keys table tbody tr {
  border-bottom: solid 1px grey;
}
#keyForm {
  display: flex;
  flex-direction: column;
}
#keyForm label {
  width: 75%;
  display: flex;
  flex-direction: row;
  margin: 1vh 0;
}
#keyForm label p {
  width: 30%;
  padding-right: 1vw;
}
#keyForm label input,
#keyForm label > span {
  width: 75% !important;
  margin: auto 0;
}
#keyForm label input {
  padding: 1vh 1vw;
}
.stdTable td {
  text-align: left;
}
.stdTable tr:first-child td {
  background: #303030;
  color: white;
}
.stdTable tr:nth-child(2n) td {
  background: #ebebeb;
}
.stdTable .button-icon {
  margin: 0 5%;
}
.ui-dialog .ui-dialog-buttonpane {
  margin-top: 0;
}
.ui-dialog .ui-dialog-content {
  padding: 1em;
}
form#promo-report-filters {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  & fieldset {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: none;

    > * {
      display: block;
      align-self: center;
    }

    & label {
      margin-right: 1vw;
    }

    & input, & select {
      margin-right: 2vw;
    }
  }
}

#promo-report {
  border-collapse: collapse;
  & th {
    text-align: left;
    padding-right: 2vw;
  }
  & td {
    border-bottom: solid 1px var(--color-grey-main);
    padding-right: 2vw;
  }
}

#nameSearch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  > * {
    margin: 2vh auto
  }

  & select {
    width: min-content;
  }

  & input[type="submit"] {
    width: min-content;
    padding: 1vh 2vw;
  }
}

#supportMatrix {
  position: absolute;
  top: 10vh;
  right: 0;
  border-collapse: collapse;
  & th {
    font-weight: bold;
  }
  & th, & td {
    padding: 0.5vh 1vw;
    text-align: left;
    border: solid 1px black;
    font-size: 0.7vw;
  }
}

table#orders {
  & a {
    color: var(--color-black);
    & i {
      margin-left: 0.5vh;
    }
  }
}