/**
	Styles entry for Spaceport

	@author Dylan Vorster
	@copyright Eezipay Management Systems

------------------ OPTIONS ------------------- */
/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
@import "../../node_modules/react-dropzone-uploader/dist/styles.css";
@import "../../node_modules/chariot-tooltips/release/chariot.css";
@import "../../node_modules/@fortawesome/fontawesome-free/css/v4-shims.css";
@import "../../node_modules/@fortawesome/fontawesome-free/css/all.css";
@import url("https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@400;700&display=swap");
/**
	Function for figuring out if something is light or dark
*/
@-webkit-keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
/* ---------------------------------------------- */
:root {
  color-scheme: only light;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
}

html,
body {
  width: 100%;
  background: black;
  height: calc(100% - 2px);
  font-family: "Inter", "Arial", serif !important;
}

@media (max-width: 600px) {
  html {
    min-height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}

*::-webkit-scrollbar {
  width: 7px;
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #00afef;
}

.storm-button {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  color: white;
  padding: 8px 16px;
  font-size: 17px;
  outline: none;
  margin-bottom: 2px;
  display: block !important;
  width: 300px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 1px transparent;
  border-left: solid 4px transparent;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.storm-button:hover {
  background-color: rgba(0, 175, 239, 0.4);
}

select optgroup {
  background-color: white;
  color: black;
  border: none;
  outline: none;
}

.select .multiple {
  height: 100px !important;
  padding-left: 5px !important;
}
.select .multiple optgroup {
  background-color: inherit;
  color: white;
}
.select .multiple optgroup option:checked {
  color: white;
  background: rgba(0, 0, 0, 0.4) -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.4)));
  background: rgba(0, 0, 0, 0.4) linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
}

@media (max-width: 600px) {
  .main .storm-button {
    width: 100%;
  }
}

.qrScan {
  width: 300px;
  max-width: 90%;
}

.chariot-tooltip-icon .fa {
  height: 100%;
  font-size: 50px;
  color: #555;
}

.relative {
  position: relative !important;
}

.question-to-text {
  position: absolute;
  top: 5px;
  left: 235px;
  font-size: 32px;
  color: orange;
  cursor: pointer;
}
@media (max-width: 600px) {
  .question-to-text {
    margin-left: 10px;
  }
}

.mobile-loader-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 29;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgb(42, 58, 71);
}
.mobile-loader-overlay .mobile-loader-child {
  position: relative;
  width: 100%;
  background-color: rgb(42, 58, 71);
}
.mobile-loader-overlay .mobile-loader-child .mobile-loader-text {
  color: white;
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  bottom: 5px;
  left: 50%;
  min-width: 300px;
  text-align: center;
}

/* Account Management Styles */
.account-management-container {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 1px solid #61709e;
  border-left: 7px solid #00afef;
  margin-bottom: 20px;
  overflow: hidden;
  color: white;
}
.account-management-container .student-account-message {
  max-width: 353px;
  padding: 10px;
}

.account-management-container .content-wrapper {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.account-management-container .account-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.account-management-container .account-icon {
  font-size: 24px;
  margin-right: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.account-management-container .family-members .text {
  padding: 30px 0px 10px 0px;
}

.account-management-container .account-title {
  font-size: 18px;
  font-weight: 300;
}

.account-management-container .contentContainer {
  padding: 15px;
}

.account-management-container .info-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
}

.account-management-container .info-icon {
  margin-right: 10px;
  color: rgba(255, 255, 255, 0.6);
  width: 20px;
  text-align: center;
}

.account-management-container .family-accounts-section,
.account-management-container .account-deletion-section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.account-management-container h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 300;
}

.account-management-container .family-account-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.account-management-container .family-name {
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}

.account-management-container .family-balance {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.account-management-container .deletion-warning {
  color: #ff6b6b;
  margin-bottom: 15px;
  font-size: 14px;
}

.deactivateModle.off {
  display: none;
}

/* Modal Styling */
.account-management-container .modal {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1000;
}

.account-management-container .modal.off {
  display: none;
}

.account-management-container .modal .insideModal {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #61709e;
  border-left: 7px solid #00afef;
  padding: 20px;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  color: white;
}

.account-management-container .modal .label {
  margin-bottom: 20px;
  font-size: 16px;
}

.account-management-container .modal .modalButton {
  margin-top: 15px;
  margin-right: 10px;
}

.account-management-container .modal .deleteButton {
  background-color: rgba(220, 53, 69, 0.7);
}

.modal .deleteButton:hover {
  background-color: rgba(220, 53, 69, 0.9);
}

/* Button Styling */
.account-management-container .button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 0px !important;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.info-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.donationModal .storm-form input[value=Submit][type=button] {
  width: 100% !important;
}

.balance-display {
  margin-left: auto;
  font-weight: bold;
}

.account-management-container .button:hover {
  background: rgba(0, 0, 0, 0.5);
}

.account-management-container .button.deactivate {
  background-color: rgba(220, 53, 69, 0.7);
}

.account-management-container .button.deactivate:hover {
  background-color: rgba(220, 53, 69, 0.9);
}

@media (max-width: 600px) {
  .modalButton.pad-right {
    margin-right: 20px !important;
  }
}

.storm-calendar-workspace .menubar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.storm-calendar-workspace .menubar .heading {
  font-size: 20px;
}
.storm-calendar-workspace .menubar .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
  align-self: center;
  cursor: pointer;
}
.storm-calendar-workspace .menubar .buttons > * {
  padding: 5px;
}
.storm-calendar-workspace .menubar .switcher {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.storm-calendar-week {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.storm-calendar-day {
  width: 14.28%;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 5px;
}
.storm-calendar-day .heading .number {
  text-align: right;
}
.storm-calendar-month .weekDays {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.storm-calendar-month .weekDays > * {
  width: 14.28%;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.storm-calendar-year {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.ReactCrop {
  position: relative;
  display: inline-block;
  cursor: crosshair;
  overflow: hidden;
  max-width: 100%;
}
.ReactCrop *, .ReactCrop *::before, .ReactCrop *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ReactCrop--disabled, .ReactCrop--locked {
  cursor: inherit;
}
.ReactCrop__child-wrapper {
  max-height: inherit;
}
.ReactCrop__child-wrapper > img, .ReactCrop__child-wrapper > video {
  display: block;
  max-width: 100%;
  max-height: inherit;
}
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > img, .ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper > video {
  -ms-touch-action: none;
  touch-action: none;
}
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection {
  -ms-touch-action: none;
  touch-action: none;
}
.ReactCrop__crop-selection {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  cursor: move;
  -webkit-box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
}
.ReactCrop--disabled .ReactCrop__crop-selection {
  cursor: inherit;
}
.ReactCrop--circular-crop .ReactCrop__crop-selection {
  border-radius: 50%;
}
.ReactCrop--no-animate .ReactCrop__crop-selection {
  outline: 1px dashed white;
}
.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {
  -webkit-animation: marching-ants 1s;
  animation: marching-ants 1s;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #444)), -webkit-gradient(linear, left top, right top, color-stop(50%, #fff), color-stop(50%, #444)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #444)), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #fff), color-stop(50%, #444));
  background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);
  background-size: 10px 1px, 10px 1px, 1px 10px, 1px 10px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  color: #fff;
  -webkit-animation-play-state: running;
  animation-play-state: running;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
@-webkit-keyframes marching-ants {
  0% {
    background-position: 0 0, 0 100%, 0 0, 100% 0;
  }
  100% {
    background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
  }
}
@keyframes marching-ants {
  0% {
    background-position: 0 0, 0 100%, 0 0, 100% 0;
  }
  100% {
    background-position: 20px 0, -20px 100%, 0 -20px, 100% 20px;
  }
}
.ReactCrop__crop-selection:focus {
  outline: none;
  border-color: blue;
  border-style: solid;
}
.ReactCrop--invisible-crop .ReactCrop__crop-selection {
  display: none;
}
.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after, .ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
}
.ReactCrop__rule-of-thirds-vt::before, .ReactCrop__rule-of-thirds-vt::after {
  width: 1px;
  height: 100%;
}
.ReactCrop__rule-of-thirds-vt::before {
  left: 33.3333%;
  left: 33.3333333333%;
}
.ReactCrop__rule-of-thirds-vt::after {
  left: 66.6666%;
  left: 66.6666666667%;
}
.ReactCrop__rule-of-thirds-hz::before, .ReactCrop__rule-of-thirds-hz::after {
  width: 100%;
  height: 1px;
}
.ReactCrop__rule-of-thirds-hz::before {
  top: 33.3333%;
  top: 33.3333333333%;
}
.ReactCrop__rule-of-thirds-hz::after {
  top: 66.6666%;
  top: 66.6666666667%;
}
.ReactCrop__drag-handle {
  position: absolute;
}
.ReactCrop__drag-handle::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.7);
  outline: 1px solid transparent;
}
.ReactCrop__drag-handle:focus::after {
  border-color: blue;
  background: #2dbfff;
}
.ReactCrop .ord-nw {
  top: 0;
  left: 0;
  margin-top: -5px;
  margin-left: -5px;
  cursor: nw-resize;
}
.ReactCrop .ord-nw::after {
  top: 0;
  left: 0;
}
.ReactCrop .ord-n {
  top: 0;
  left: 50%;
  margin-top: -5px;
  margin-left: -5px;
  cursor: n-resize;
}
.ReactCrop .ord-n::after {
  top: 0;
}
.ReactCrop .ord-ne {
  top: 0;
  right: 0;
  margin-top: -5px;
  margin-right: -5px;
  cursor: ne-resize;
}
.ReactCrop .ord-ne::after {
  top: 0;
  right: 0;
}
.ReactCrop .ord-e {
  top: 50%;
  right: 0;
  margin-top: -5px;
  margin-right: -5px;
  cursor: e-resize;
}
.ReactCrop .ord-e::after {
  right: 0;
}
.ReactCrop .ord-se {
  bottom: 0;
  right: 0;
  margin-bottom: -5px;
  margin-right: -5px;
  cursor: se-resize;
}
.ReactCrop .ord-se::after {
  bottom: 0;
  right: 0;
}
.ReactCrop .ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -5px;
  margin-left: -5px;
  cursor: s-resize;
}
.ReactCrop .ord-s::after {
  bottom: 0;
}
.ReactCrop .ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -5px;
  margin-left: -5px;
  cursor: sw-resize;
}
.ReactCrop .ord-sw::after {
  bottom: 0;
  left: 0;
}
.ReactCrop .ord-w {
  top: 50%;
  left: 0;
  margin-top: -5px;
  margin-left: -5px;
  cursor: w-resize;
}
.ReactCrop .ord-w::after {
  left: 0;
}
.ReactCrop__disabled .ReactCrop__drag-handle {
  cursor: inherit;
}
.ReactCrop__drag-bar {
  position: absolute;
}
.ReactCrop__drag-bar.ord-n {
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  margin-top: -3px;
}
.ReactCrop__drag-bar.ord-e {
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  margin-right: -3px;
}
.ReactCrop__drag-bar.ord-s {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  margin-bottom: -3px;
}
.ReactCrop__drag-bar.ord-w {
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  margin-left: -3px;
}
.ReactCrop--new-crop .ReactCrop__drag-bar, .ReactCrop--new-crop .ReactCrop__drag-handle, .ReactCrop--fixed-aspect .ReactCrop__drag-bar {
  display: none;
}
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s, .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
  display: none;
}
@media (pointer: coarse) {
  .ReactCrop .ord-n,
  .ReactCrop .ord-e,
  .ReactCrop .ord-s,
  .ReactCrop .ord-w {
    display: none;
  }
  .ReactCrop__drag-handle {
    width: 24px;
    height: 24px;
  }
}

.chariot-overlay {
  background: transparent !important;
}

.chariot-tooltip {
  background-color: #fff;
  padding: 30px;
  width: 280px;
  text-align: center;
  -webkit-box-shadow: 0 0 5px 0 rgba(31, 28, 28, 0.3);
  box-shadow: 0 0 5px 0 rgba(31, 28, 28, 0.3);
  border: 1px solid #ddd;
  color: #999;
}

.chariot-tooltip .chariot-tooltip-icon {
  width: 52px;
  height: 52px;
  margin: auto;
}

.chariot-tooltip .chariot-tooltip-header {
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  color: #555;
  padding: 5px 0;
}

.chariot-tooltip .chariot-tooltip-content {
  padding: 5px 0;
}

.chariot-tooltip .chariot-tooltip-content p {
  font-size: 14px;
  font-weight: 300;
  color: #999;
  padding-bottom: 15px;
}

.chariot-tooltip .chariot-btn-row {
  padding-top: 5px;
}

.chariot-tooltip .chariot-btn-row .btn {
  font-size: 13px;
  font-weight: 400;
  color: #fff;
  background-color: #78A300;
  border-radius: 3px;
  height: 36px;
  padding: 0 20px;
  border: none;
}

.chariot-tooltip .chariot-btn-row .btn:hover {
  background-color: #78A300;
  cursor: pointer;
}

.chariot-tooltip .chariot-btn-row .chariot-tooltip-subtext {
  float: left;
  color: #ddd;
  font-size: 13px;
  padding-top: 10px;
}

.chariot-tooltip-arrow {
  background: #fff;
}

.chariot-tooltip-arrow-left {
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  -webkit-box-shadow: -2px 2px 2px 0 rgba(31, 28, 28, 0.1);
  box-shadow: -2px 2px 2px 0 rgba(31, 28, 28, 0.1);
}

.chariot-tooltip-arrow-right {
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  -webkit-box-shadow: 2px -2px 2px 0 rgba(31, 28, 28, 0.1);
  box-shadow: 2px -2px 2px 0 rgba(31, 28, 28, 0.1);
}

.chariot-tooltip-arrow-top {
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  -webkit-box-shadow: -2px -2px 4px 0 rgba(31, 28, 28, 0.1);
  box-shadow: -2px -2px 4px 0 rgba(31, 28, 28, 0.1);
}

.chariot-tooltip-arrow-bottom {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  -webkit-box-shadow: 2px 2px 4px 0 rgba(31, 28, 28, 0.1);
  box-shadow: 2px 2px 4px 0 rgba(31, 28, 28, 0.1);
}

.chariot-clone {
  opacity: 0 !important;
  -webkit-transition: none !important;
  transition: none !important;
}
.chariot-clone.year, .chariot-clone.month, .chariot-clone.day {
  padding: 5px;
}
.chariot-clone.tab {
  padding: 10px;
}
.chariot-clone.btn-report, .chariot-clone.mobile-content-menu-icon {
  height: 137px;
  width: 102px;
}
.chariot-clone.storm-select {
  height: 30px;
  padding: 3px 0 5px 10px;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("./fonts/Roboto Mono/RobotoMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("./fonts/Roboto Mono/RobotoMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
}

.fade-enter {
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
  -o-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 0.25s;
  -moz-animation-duration: 0.25s;
  -o-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -o-animation-name: fadeOut;
  animation-name: fadeOut;
}

.fade-leave {
  -webkit-animation-name: fadeOut;
  -moz-animation-name: fadeOut;
  -o-animation-name: fadeOut;
  animation-name: fadeOut;
  -webkit-animation-duration: 0.25s;
  -moz-animation-duration: 0.25s;
  -o-animation-duration: 0.25s;
  animation-duration: 0.25s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.05);
  }
  70% {
    -moz-transform: scale(0.9);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    -o-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -o-transform: scale(1.05);
  }
  70% {
    -o-transform: scale(0.9);
  }
  100% {
    -o-transform: scale(1);
  }
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
}

.bounce-enter {
  -webkit-animation-name: bounceIn;
  -moz-animation-name: bounceIn;
  -o-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
}
@-moz-keyframes bounceOut {
  0% {
    -moz-transform: scale(1);
  }
  25% {
    -moz-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.3);
  }
}
@-o-keyframes bounceOut {
  0% {
    -o-transform: scale(1);
  }
  25% {
    -o-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -o-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -o-transform: scale(0.3);
  }
}
@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}
.bounceOut {
  -webkit-animation-name: bounceOut;
  -moz-animation-name: bounceOut;
  -o-animation-name: bounceOut;
  animation-name: bounceOut;
}

.bounce-leave {
  -webkit-animation-name: bounceOut;
  -moz-animation-name: bounceOut;
  -o-animation-name: bounceOut;
  animation-name: bounceOut;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.fadeLeft-enter {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
}
@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
}
@-o-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

.fadeLeft-leave {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.fadeLeftFast-enter {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -o-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
}
@-moz-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
}
@-o-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -o-transform: translateX(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

.fadeLeftFast-leave {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -o-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.fadeUpFast-enter {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -o-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
}
@-moz-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
}
@-o-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  -o-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

.fadeUpFast-leave {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  -o-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -o-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.fadeDownFast-enter {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -o-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
}
@-moz-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
}
@-o-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -o-transform: translateY(0);
  }
  100% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  -o-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

.fadeDownFast-leave {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  -o-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  -o-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.placeholder > .elements > .button, .bodycontent .workspace a.button, .bodycontent .workspace .button, #iframePDF .button, #iframeContainer .button, #iframeContainerChat .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  background-color: #007bb7;
  color: #FFFFFF;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.placeholder > .elements > .selected.button, .bodycontent .workspace .selected.button, #iframePDF .selected.button, #iframeContainer .selected.button, #iframeContainerChat .selected.button {
  background-color: #003367;
}
.placeholder > .elements > .disabled.button, .bodycontent .workspace .disabled.button, #iframePDF .disabled.button, #iframeContainer .disabled.button, #iframeContainerChat .disabled.button {
  opacity: 0.5;
  cursor: default;
}
@media (min-width: 600px) {
  .placeholder > .elements > .button:not(.disabled):hover, .bodycontent .workspace .button:not(.disabled):hover, #iframePDF .button:not(.disabled):hover, #iframeContainer .button:not(.disabled):hover, #iframeContainerChat .button:not(.disabled):hover {
    background-color: #00afef;
  }
}
@media (max-width: 1024px) {
  .placeholder > .elements > .button:active, .bodycontent .workspace .button:active, #iframePDF .button:active, #iframeContainer .button:active, #iframeContainerChat .button:active {
    background-color: #00afef;
  }
}
.placeholder > .elements > .button .icon, .bodycontent .workspace .button .icon, #iframePDF .button .icon, #iframeContainer .button .icon, #iframeContainerChat .button .icon {
  background-color: #003367;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.placeholder > .elements > .button .icon .fa, .bodycontent .workspace .button .icon .fa, #iframePDF .button .icon .fa, #iframeContainer .button .icon .fa, #iframeContainerChat .button .icon .fa {
  padding: 10px;
  font-size: 14px;
  -ms-flex-item-align: center;
  align-self: center;
  width: 36px !important;
  min-width: 36px;
}
@media (max-width: 600px) {
  .placeholder > .elements > .bottom.button, .bodycontent .workspace .bottom.button, #iframePDF .bottom.button, #iframeContainer .bottom.button, #iframeContainerChat .bottom.button {
    width: 100%;
    margin-top: 10px;
  }
}
.placeholder > .elements > .button span, .bodycontent .workspace .button span, #iframePDF .button span, #iframeContainer .button span, #iframeContainerChat .button span {
  padding: 10px;
  -ms-flex-item-align: center;
  align-self: center;
  font-weight: 400;
  font-size: 14px;
  color: white;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

#iframeContainer, #iframeContainerChat {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
  border: none;
  padding: 70px 5px 0 10px;
  background-image: url("../plugin/Eezipay/media/backdrop-new.jpg");
  background-color: #0A0A0A;
  overflow-y: scroll;
  -webkit-animation: fade_in_show 0.3s;
  animation: fade_in_show 0.3s;
}
@media (min-width: 600px) {
  #iframeContainer, #iframeContainerChat {
    padding-top: 20px;
  }
}
#iframeContainer.hide, .hide#iframeContainerChat {
  -webkit-animation: fade_out_hide 0.3s;
  animation: fade_out_hide 0.3s;
}
#iframeContainer #termsframe, #iframeContainerChat #termsframe, #iframeContainer #chatframe, #iframeContainerChat #chatframe {
  visibility: visible;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
  border: none;
  padding: 30px;
  background-color: #0A0A0A;
}
@media (min-width: 600px) {
  #iframeContainer #termsframe, #iframeContainerChat #termsframe, #iframeContainer #chatframe, #iframeContainerChat #chatframe {
    height: calc(100% - 55px);
  }
}
@media (max-width: 600px) {
  #iframeContainer #termsframe, #iframeContainerChat #termsframe, #iframeContainer #chatframe, #iframeContainerChat #chatframe {
    padding: 5px;
  }
}
#iframeContainer .content, #iframeContainerChat .content {
  padding-bottom: 0px !important;
}

@media (min-width: 600px) {
  #iframeContainerChat {
    padding-top: 20px;
  }
}
#iframeContainerChat #chatFrame {
  visibility: visible;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
  border: none;
  padding: 20px;
  background-color: #0A0A0A;
}
@media (min-width: 600px) {
  #iframeContainerChat #chatFrame {
    height: calc(100% - 55px);
  }
}
@media (max-width: 600px) {
  #iframeContainerChat #chatFrame {
    padding: 5px;
  }
}

#iframePDF {
  z-index: 999;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  padding: 30px 5px 0 10px;
  background-color: #0A0A0A;
  overflow-y: scroll;
  -webkit-animation: fade_in_show 0.5s;
  animation: fade_in_show 0.5s;
}
#iframePDF .button {
  padding: 0;
}
#iframePDF #pdfViewer {
  visibility: visible;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(100% - 60px);
  border: none;
  padding: 20px;
  background-color: #0A0A0A;
}
@media (max-width: 600px) {
  #iframePDF #pdfViewer {
    padding: 5px;
  }
}

.fadeOut {
  -webkit-animation: dash 1s ease-out forwards;
  animation: dash 1s ease-out forwards;
}

@-webkit-keyframes dash {
  0% {
    top: 0px;
  }
  100% {
    top: 5000px;
  }
}

@keyframes dash {
  0% {
    top: 0px;
  }
  100% {
    top: 5000px;
  }
}
.layer {
  position: absolute;
  width: 100%;
  z-index: 8;
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
}
@media (max-width: 600px) {
  .layer {
    min-height: 100%;
  }
}
@media (min-width: 600px) {
  .layer {
    height: 100%;
  }
}
.layer.blur {
  -webkit-filter: blur(100px);
  filter: blur(100px);
  pointer-events: none;
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.layer #wirecardAlpha {
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  border: none;
  padding: 30px;
  background: url("../media/loader.gif") center center;
}
.layer .rewardContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 355px;
  margin: 20px auto;
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .layer .rewardContainer {
    width: 100%;
  }
}
@media (max-width: 380px) {
  .layer .rewardContainer {
    width: 100%;
  }
}
.layer .rewardContainer .logo {
  margin-bottom: -3px;
}
@media (max-width: 600px) {
  .layer .rewardContainer .logo {
    margin-bottom: -5px;
  }
}
.layer .rewardContainer .rewardContent {
  font-family: "Inter", "Arial", "sans-serif";
  background: #0D4371;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  padding: 10px 15px 0px 20px;
}
@media (max-width: 600px) {
  .layer .rewardContainer .rewardContent {
    font-size: 20px;
    padding: 10px 26px 0px 15px;
  }
}
@media (max-width: 380px) {
  .layer .rewardContainer .rewardContent {
    font-size: 16px;
  }
}
.layer .rewardContainer .rewardContent span {
  display: block;
  font-size: 16px;
}
@media (max-width: 600px) {
  .layer .rewardContainer .rewardContent span {
    font-size: 12px;
  }
}
.layer .rewardContainer .animatedIcon {
  margin-top: -44px;
  margin-left: -32px;
  margin-bottom: -17px;
}
.layer .rewardContainer .animatedIcon img {
  width: 120px;
}
.layer .invalidAmount {
  background-color: #ed3128;
  color: #ffffff;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 12px;
  width: 95%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.layer .tip {
  display: flow-root !important;
}
.layer .tip .tipheader {
  display: block;
  height: 40px;
}
.layer .tip .label, .layer .tip .amount {
  float: left;
}
.layer .tip .icon {
  font-size: 16px !important;
}
@media (max-width: 600px) {
  .layer .tip .icon {
    display: none;
  }
}
.layer .tip .button {
  width: 20%;
  border: 1px solid #1a1a1a;
  float: left;
  font-size: 16px;
}
@media (max-width: 600px) {
  .layer .tip .button {
    text-align: center;
  }
}
@media (max-width: 600px) {
  .layer .tip .button span {
    padding: 5px 0px;
    width: 100%;
    text-align: center;
  }
}
.layer .tip .remove {
  background-color: #990024 !important;
}
.layer .tip .button.active {
  width: 20%;
  background: #0e90d2;
  border: 1px solid #0e90d2;
}
.layer .range-wrap {
  position: relative;
  width: 100%;
}
.layer .coupon .title span {
  padding-right: 20px;
}
.layer .coupon .storm-field {
  width: 100%;
  border: 1px solid #1a1a1a;
  float: left;
  font-size: 18px;
  background: #0e0e0e;
  padding: 5px 10px;
  color: #FFFFFF;
}
.layer .coupon .storm-form {
  width: 100%;
}
.layer .coupon .storm-button {
  width: 100%;
  border: 1px solid #1a1a1a;
  float: left;
  font-size: 18px;
  background-color: rgba(10, 10, 10, 0.1);
  cursor: pointer;
  text-align: center;
  font-weight: 400;
  padding: 5px 10px;
  color: #FFF;
  opacity: 0.7;
}
.layer .touchpos-note, .layer .touchpos-date {
  padding-top: 20px;
}
.layer .touchpos-note textarea, .layer .touchpos-date textarea {
  width: 100%;
  padding: 10px;
  opacity: 0.8;
  margin-top: 10px;
}
.layer .touchpos-note .storm-button, .layer .touchpos-date .storm-button {
  display: none !important;
}
.layer .touchpos-note #ordernoteref, .layer .touchpos-date #ordernoteref {
  display: none;
}
.layer #range {
  width: 100%;
}
.layer output {
  position: absolute;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: linear-gradient(#444444, #999999);
  width: 40px;
  height: 30px;
  text-align: center;
  color: white;
  border-radius: 10px;
  display: inline-block;
  font: bold 15px/30px Georgia;
  bottom: -40px;
  left: 0;
}
.layer output:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
.layer.checkout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.layer.checkout .disclaimer {
  color: white;
  font-weight: bold;
}
.layer.checkout .header {
  background-color: #242424;
  padding: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 600px) {
  .layer.checkout .header {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 10px;
  }
}
.layer.checkout .header b {
  display: block;
}
.layer.checkout .header .spacer {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
@media (max-width: 600px) {
  .layer.checkout .header .spacer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 600px) {
  .layer.checkout .header > * {
    -ms-flex-item-align: center;
    align-self: center;
  }
}
.layer.checkout .header .header-icon {
  font-size: 40px;
  color: white;
  margin-right: 30px;
  margin-left: 10px;
  opacity: 0.2;
}
@media (max-width: 600px) {
  .layer.checkout .header .header-icon {
    margin-right: 20px;
    margin-top: 15px;
    margin-left: 5px;
    font-size: 50px;
  }
}
.layer.checkout .header p {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
}
.layer.checkout .header .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: white;
  cursor: pointer;
  border: solid 1px rgba(255, 255, 255, 0.15);
  margin-left: 10px;
}
@media (max-width: 600px) {
  .layer.checkout .header .button {
    margin-left: 0px;
    margin-top: 10px;
  }
}
.layer.checkout .header .button span {
  padding-right: 10px;
}
.layer.checkout .header .button > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.layer.checkout .header .button .icon {
  font-size: 30px;
  opacity: 0.6;
  padding: 5px;
}
@media (max-width: 600px) {
  .layer.checkout .header .button .icon {
    opacity: 0.4;
  }
}
.layer.checkout .header .title {
  color: white;
  font-size: 30px;
  font-weight: 300;
}
.layer.checkout .content {
  border-left: 10px solid #0A0A0A;
  border-right: 10px solid #0A0A0A;
  border-bottom: 10px solid #0A0A0A;
  background-color: rgba(10, 10, 10, 0.8);
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-height: 1px;
  padding: 20px;
  overflow-y: scroll;
}
.layer.checkout .content .section {
  width: 95%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.layer.checkout .content .section:last-of-type {
  padding-bottom: 20px;
}
.layer.checkout .content .section > .message {
  padding: 15px 20px;
  color: white;
  background: #003367;
  border: solid 2px #00afef;
  margin-bottom: 20px;
}
.layer.checkout .content .section > .message .button {
  background: rgba(255, 255, 255, 0.1);
  width: 200px;
  margin-top: 10px;
}
.layer.checkout .content .section > .message .button:hover {
  background: rgba(255, 255, 255, 0.2);
}
.layer.checkout .content .section.hide {
  display: none;
}
.layer.checkout .content .section.blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  pointer-events: none;
  bottom: 0px;
}
.layer.checkout .content .section.paymentfailed {
  background: rgba(255, 159, 47, 0.2);
  border: solid 2px #FF9F2F;
}
.layer.checkout .content .section.paymentsuccess, .layer.checkout .content .section.paymentfailed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 600px) {
  .layer.checkout .content .section.paymentsuccess, .layer.checkout .content .section.paymentfailed {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
  }
}
.layer.checkout .content .section.paymentsuccess .payment-info, .layer.checkout .content .section.paymentfailed .payment-info {
  -ms-flex-item-align: center;
  align-self: center;
  padding: 20px;
}
.layer.checkout .content .section.paymentsuccess .payment-info p, .layer.checkout .content .section.paymentfailed .payment-info p {
  opacity: 0.5;
}
.layer.checkout .content .section.paymentsuccess .payment-info h1, .layer.checkout .content .section.paymentsuccess .payment-info h2, .layer.checkout .content .section.paymentsuccess .payment-info p, .layer.checkout .content .section.paymentfailed .payment-info h1, .layer.checkout .content .section.paymentfailed .payment-info h2, .layer.checkout .content .section.paymentfailed .payment-info p {
  color: white;
}
@media (max-width: 600px) {
  .layer.checkout .content .section.paymentsuccess .payment-info, .layer.checkout .content .section.paymentfailed .payment-info {
    text-align: center;
    padding: 20px 0px;
    font-size: 14px;
  }
}
.layer.checkout .content .section .payment {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  color: white;
  padding: 10px;
  margin-right: 5px;
  margin-bottom: 5px;
}
@media (max-width: 600px) {
  .layer.checkout .content .section .payment {
    display: block;
    width: calc(50% - 5px);
    max-width: 100%;
  }
}
.layer.checkout .content .section .payment img {
  max-height: 40px;
}
.layer.checkout .content .section .payment > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.layer.checkout .content .section .payment .amount {
  margin-left: 10px;
  font-size: 20px;
  white-space: nowrap;
}
.layer.checkout .content .section .payment .message {
  margin-left: 10px;
  opacity: 0.5;
}
@media (max-width: 600px) {
  .layer.checkout .content .section .payment .message {
    font-size: 12px;
  }
}
.layer.checkout .content .section .payment.SUCCESS {
  background: rgba(0, 210, 127, 0.2);
  border: solid 2px #00D27F;
}
.layer.checkout .content .section .payment.BUSY {
  background: rgba(0, 51, 103, 0.5);
  border: solid 2px #003367;
}
.layer.checkout .content .section .payment.REVERSED {
  background: rgba(255, 159, 47, 0.2);
  border: solid 2px #FF9F2F;
}
.layer.checkout .content .section .payment.DECLINED {
  background: rgba(255, 47, 47, 0.2);
  border: solid 2px #FF2F2F;
}
.layer.checkout .content .section .payment.light .name {
  background: white;
  border-radius: 10px;
  padding: 7px;
}
.layer.checkout .content .section .section-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.layer.checkout .content .section .section-content p {
  color: white;
}
.layer.checkout .content .section .section-content .header .button {
  padding: 10px 5px;
  margin: 0px;
}
.layer.checkout .content .section .loader {
  color: white;
  font-size: 40px;
}
.layer.checkout .content .section .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: white;
  font-size: 25px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-weight: 300;
}
.layer.checkout .content .section .title .amount {
  font-weight: 500;
  color: #00afef;
  padding-left: 10px;
}
.layer.checkout .content .section .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}
.layer.checkout .content .section .button > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.layer.checkout .content .section .button .icon {
  opacity: 0.6;
  font-size: 20px;
  padding: 5px;
}
.layer.checkout .groupLabels, .layer.checkout .avatar {
  padding: 10px 5px 0 5px;
}
.layer.checkout .Label {
  display: inline;
  color: white;
  font-size: 20px;
  height: 40px;
  width: 150px;
}
@media (max-width: 600px) {
  .layer.checkout .Label {
    width: 130px;
    min-width: 130px;
  }
}
.layer.checkout .sm {
  font-size: 16px !important;
  padding-top: 8px;
}
.layer.checkout .groupButtons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 5px 0 5px;
}
.layer.checkout .proceed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 10px;
}
.layer.checkout .proceed.selected {
  background-color: rgba(0, 175, 239, 0.5);
}
.layer.checkout .proceed.disabled {
  opacity: 0.5;
}
@media (min-width: 600px) {
  .layer.checkout .proceed:hover {
    background-color: rgba(0, 175, 239, 0.5);
  }
}
@media (max-width: 1024px) {
  .layer.checkout .proceed:active {
    background-color: rgba(0, 175, 239, 0.5);
  }
}
.layer.checkout .proceed .icon {
  background-color: rgba(10, 10, 10, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.layer.checkout .proceed .icon .fa {
  padding: 10px;
  font-size: 14px;
  -ms-flex-item-align: center;
  align-self: center;
  width: auto !important;
}
.layer.checkout .proceed span {
  padding: 10px;
  -ms-flex-item-align: center;
  align-self: center;
  font-weight: 300;
  font-size: 14px;
  color: white;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.layer.checkout .button1 {
  width: 195px;
}
.layer.checkout .button2 {
  width: 90px;
}
.layer.checkout .invalid {
  color: white;
  font-size: 18px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.layer.checkout .slipLabel {
  margin-top: 10px;
}
.layer.checkout .slipInput input[type=number] {
  -moz-appearance: textfield;
}
.layer.checkout .slipInput input::-webkit-outer-spin-button,
.layer.checkout .slipInput input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.layer .button {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.layer .button.checkout {
  background: #AFEF00 !important;
}
.layer .button.checkout span {
  color: rgba(0, 0, 0, 0.6) !important;
}
@media (max-width: 600px) {
  .layer .button.checkout {
    position: fixed !important;
    bottom: 50px;
    z-index: 12 !important;
    left: 25px !important;
    width: calc(100% - 70px) !important;
    height: 49px;
  }
  .layer .button.checkout .fa {
    padding: 16px !important;
  }
}
.layer .button.checkout2 {
  margin-top: 10px;
}
@media (max-width: 600px) {
  .layer .button.checkout2 {
    background: #AFEF00 !important;
  }
  .layer .button.checkout2 .fa {
    padding: 16px !important;
  }
}
.layer .button.primary {
  margin-top: -9px;
  background: #00afef !important;
}
@media (max-width: 600px) {
  .layer .button.primary .fa {
    padding: 12px !important;
  }
}
.layer .button.primary span {
  padding: 5px 10px 5px 10px;
}
.layer .button.primary .fa {
  padding: 5px 10px 5px 10px;
}
.layer .noMoney {
  color: #FF2F2F;
  padding: 5px;
  cursor: pointer;
}
.layer .button.noMoney {
  margin: 10px 0 10px 3px;
  color: white;
  cursor: pointer;
  background-color: #007BB7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 450px;
  max-width: 100%;
  padding: 0;
}
.layer .button.noMoney span {
  padding: 10px;
}
.layer .button.noMoney .icon {
  background-color: #003367;
  padding: 10px !important;
}
.layer .button.noMoney:hover {
  background-color: #00afef;
}
.layer #checkoutMessage .waiting {
  margin-left: 20px;
  display: inline-block;
  position: relative;
  bottom: 12px;
}
@media (max-width: 825px) {
  .layer #checkoutMessage div:first-child {
    margin: 5px auto;
    display: block;
  }
  .layer #checkoutMessage .waiting {
    margin: 10px auto 0 auto;
    display: block;
    text-align: center;
    bottom: 0;
  }
}
.layer #checkoutMessage #checkoutCancel {
  padding-right: 20px;
  margin: 10px auto 0 auto;
}
@media (max-width: 825px) {
  .layer #checkoutMessage #checkoutCancel {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    float: none !important;
    top: 0 !important;
    margin: 10px auto 0 auto !important;
    padding-right: 20px !important;
  }
}
@media (min-width: 600px) {
  .layer #checkoutMessage #checkoutCancel {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    float: right;
    position: relative;
    top: 10px;
    padding: 0;
    margin: 0;
  }
}
.layer .title-tooltip-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}
.layer .title-tooltip-section > .checkout-tooltip {
  font-size: 32px;
  color: orange;
  cursor: pointer;
}
.layer.backdrop {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.layer.loginPage {
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
}
.layer.notifications {
  pointer-events: none;
}
.layer.notifications .notification {
  pointer-events: all;
  position: fixed;
  background-color: white;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 10, 10, 0)), to(rgba(10, 10, 10, 0.1)));
  background-image: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.1));
  color: #0A0A0A !important;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 10px;
  right: 18px;
  top: 60px;
}
@media (min-width: 600px) {
  .layer.notifications .notification {
    min-width: 300px;
    max-width: 300px;
  }
}
@media (max-width: 600px) {
  .layer.notifications .notification {
    left: 0;
    right: 0;
    top: 50px;
  }
  .layer.notifications .notification .title, .layer.notifications .notification .message {
    text-align: center;
  }
}
.layer.notifications .notification .title {
  font-weight: bold;
  font-size: 15px;
}
.layer.notifications .notification .message {
  font-weight: 300;
  font-size: 13px;
}
.layer.notifications .notification .title, .layer.notifications .notification .message {
  text-align: center;
}
.layer.announcement-layer {
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.5);
}
.layer.announcement-layer .announcements {
  max-width: calc(100% - 5px);
  margin: 2px;
  position: absolute;
  border: 2px solid #000;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  left: 50%;
  top: 50%;
  background: #007BB7;
  background: -moz-linear-gradient(top, #007BB7 0%, #007BB7 31%, #007BB7 55%, #007BB7 100%);
  background: -webkit-linear-gradient(top, #007BB7 0%, #007BB7 31%, #007BB7 55%, #007BB7 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(#007BB7), color-stop(31%, #007BB7), color-stop(55%, #007BB7), to(#007BB7));
  background: linear-gradient(to bottom, #007BB7 0%, #007BB7 31%, #007BB7 55%, #007BB7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#6db3f2", endColorstr="#1e69de",GradientType=0 );
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 300px;
  border-radius: 5px;
  color: white;
  pointer-events: all;
}
@media (max-width: 600px) {
  .layer.announcement-layer .announcements {
    width: calc(100% - 5px);
  }
}
.layer.announcement-layer .announcements .fa-close {
  top: 10px;
  right: 10px;
  position: absolute;
  font-size: 25px;
  opacity: 0.5;
  cursor: pointer;
}
.layer.announcement-layer .announcements .fa-close:hover {
  opacity: 1;
}
.layer.announcement-layer .announcements .page {
  top: 10px;
  left: 10px;
  position: absolute;
  opacity: 0.5;
  cursor: pointer;
  font-size: 18px;
}
.layer.announcement-layer .announcements .arrow {
  font-size: 60px !important;
  opacity: 0.1;
  cursor: pointer;
  margin-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
.layer.announcement-layer .announcements .arrow:hover {
  opacity: 1;
}
.layer.announcement-layer .announcements > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.layer.announcement-layer .announcements .content {
  max-width: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 50px;
  text-align: center;
  -ms-flex-item-align: start;
  align-self: flex-start;
  margin-top: 10px;
}
.layer.announcement-layer .announcements .content h3, .layer.announcement-layer .announcements .content h4, .layer.announcement-layer .announcements .content p {
  padding-bottom: 0px;
}
.layer.announcement-layer .announcements .content h1 {
  font-size: 30px;
}
.layer.announcement-layer .announcements .content h1, .layer.announcement-layer .announcements .content h2 {
  font-weight: 200;
  padding-bottom: 5px;
}
@media (max-width: 600px) {
  .layer.announcement-layer .announcements .content {
    padding: 30px 20px 30px 20px;
  }
}
@media (max-width: 1024px) {
  .layer.announcement-layer .announcements .content {
    padding: 30px;
  }
}
.layer.announcement-layer .announcements .content iframe {
  max-width: calc(100vw - 70px);
  margin-top: 15px;
}
.layer.announcement-layer .announcements .content * {
  white-space: normal;
}
.layer.announcement-layer .announcements .content #announcement-navigate {
  margin-left: 10px;
  background-color: rgb(0, 123, 183);
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 0 4px 2px;
  cursor: pointer;
  color: rgb(255, 255, 255);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s ease-in 0s;
  transition: all 0.2s ease-in 0s;
  padding: 10px;
  margin-top: 15px;
}
.layer.announcement-layer .announcements pre {
  margin: 15px;
}

.large-value {
  color: white;
  margin: 10px;
}
.large-value .value {
  font-size: 40px;
}
.large-value .name {
  font-size: 14px;
  opacity: 0.7;
}

.bodycontent {
  background-repeat: repeat;
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
}
@media (min-width: 600px) {
  .bodycontent {
    background-color: rgba(10, 10, 10, 0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
@media (max-width: 1024px) {
  .bodycontent {
    min-height: 100vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}
@media (max-width: 600px) {
  .bodycontent {
    background-attachment: initial;
  }
}
.bodycontent .grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 10px;
}
@media (max-width: 600px) {
  .bodycontent .grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
  }
}
.bodycontent .grid > * {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .homepage {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 1024px) {
  .bodycontent .homepage {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: calc(100vh - 40px);
  }
}
@media (max-width: 600px) {
  .bodycontent .homepage {
    min-height: calc(100vh - 40px);
  }
}
.bodycontent .homepage > .content {
  display: block;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
@media (max-width: 1024px) {
  .bodycontent .homepage > .content {
    padding: 0;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
  }
}
.bodycontent .homepage .sidebar {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  background-color: rgba(10, 10, 10, 0.5);
  -webkit-box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  padding-bottom: 20px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: scroll;
}
@media (min-width: 600px) {
  .bodycontent .homepage .sidebar {
    padding: 20px 70px;
  }
}
@media (max-width: 1024px) {
  .bodycontent .homepage .sidebar {
    width: 100%;
    background-color: unset !important;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0 0 20px 0;
  }
}
@media (max-width: 600px) {
  .bodycontent .homepage .sidebar {
    padding: 0 0 5px 0;
  }
}
.bodycontent .homepage .sidebar > * {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.bodycontent .homepage .sidebar .info {
  margin: 10px auto;
  font-size: 13px;
  max-width: 300px;
  color: white;
}
.bodycontent .homepage .sidebar .info p, .bodycontent .homepage .sidebar .info b {
  display: block;
  color: #F3F3F3;
}
.bodycontent .homepage .sidebar .info p:not(:first-child), .bodycontent .homepage .sidebar .info b:not(:first-child) {
  margin-top: 5px;
}
.bodycontent .homepage .sidebar .info a {
  color: #00D27F;
}
.bodycontent .homepage .sidebar .video-button-container {
  margin: 15px auto;
  width: 100%;
  max-width: 300px;
}
.bodycontent .homepage .sidebar .video-button-container .video-tutorial-button {
  background-color: rgba(0, 210, 127, 0.8);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.bodycontent .homepage .sidebar .video-button-container .video-tutorial-button:hover {
  background-color: rgb(0, 210, 127);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.bodycontent .homepage .sidebar .video-button-container .video-tutorial-button i {
  margin-right: 8px;
  font-size: 16px;
}
.bodycontent .homepage .sidebar .storm-error input {
  border-left: solid 2px #FF2F2F;
  margin-bottom: 0;
  background: rgba(255, 47, 47, 0.1);
}
.bodycontent .homepage .sidebar .storm-error .error {
  border-left: solid 2px #FF2F2F;
  background: rgba(255, 47, 47, 0.5);
  padding: 10px 15px;
  font-size: 12px;
  color: white;
}
.bodycontent .homepage .sidebar .title {
  color: white;
  font-size: 31px;
  font-weight: 200;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media (max-width: 1024px) {
  .bodycontent .homepage .sidebar .title {
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}
.bodycontent .homepage .sidebar table {
  border-spacing: 0;
}
.bodycontent .homepage .sidebar input:not([type=file]):not([type=radio]) {
  display: block !important;
  width: 300px;
  border-radius: 10px;
  border: none;
  background: #3b4567;
  padding: 10px 15px;
  font-size: 18px;
  color: white;
  outline: none;
  margin: 3px 3px 10px 3px;
  font-weight: 300;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.bodycontent .homepage .sidebar input:not([type=file]):not([type=radio])::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.bodycontent .homepage .sidebar input:not([type=file]):not([type=radio])::-moz-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.bodycontent .homepage .sidebar input:not([type=file]):not([type=radio]):-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.bodycontent .homepage .sidebar input:not([type=file]):not([type=radio])::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.bodycontent .homepage .sidebar input:not([type=file]):not([type=radio])::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 600px) {
  .bodycontent .homepage .sidebar input:not([type=file]):not([type=radio]) {
    display: inline-block !important;
  }
}
.bodycontent .homepage .sidebar .imageCropper {
  margin-bottom: 5px;
}
.bodycontent .homepage .sidebar input[type=button], .bodycontent .homepage .sidebar .button {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0px;
  width: 300px;
  background: rgba(10, 10, 10, 0.5);
  cursor: pointer;
  color: white;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  text-align: center;
  padding: 10px;
  margin-bottom: 1px;
  margin-top: 10px;
}
.bodycontent .homepage .sidebar input[type=button][subtype=submit], .bodycontent .homepage .sidebar .button[subtype=submit] {
  border-radius: 0px !important;
  background-color: #b6c204;
  color: black;
  margin-top: 10px;
}
.bodycontent .homepage .sidebar input[type=button]:hover, .bodycontent .homepage .sidebar .button:hover {
  background: rgba(10, 10, 10, 0.6);
  color: white;
}
.bodycontent .homepage .sidebar input[type=button] .icon, .bodycontent .homepage .sidebar .button .icon {
  display: inline-block;
}
.bodycontent .homepage .sidebar input[type=button] span, .bodycontent .homepage .sidebar .button span {
  padding-left: 10px;
}
.bodycontent .homepage .sidebar .horizontal-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  margin: 10px auto;
  width: 300px;
}
.bodycontent .homepage .sidebar .aboutButton, .bodycontent .homepage .sidebar .linkButton {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-weight: normal;
  width: auto;
  padding: 5px;
  margin: 20px 0px 0px 0px;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  cursor: pointer;
}
.bodycontent .homepage .sidebar .aboutButton .icon, .bodycontent .homepage .sidebar .linkButton .icon {
  display: none !important;
}
.bodycontent .homepage .sidebar .aboutButton:hover, .bodycontent .homepage .sidebar .linkButton:hover {
  background: transparent;
  color: white;
  text-decoration: underline;
}
.bodycontent .homepage .sidebar .reset-password-container {
  margin-top: 5px;
  margin-bottom: 5px;
  text-align: center;
}
.bodycontent .homepage .sidebar .reset-password-container .reset-password-link {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  width: auto;
  padding: 5px;
  margin: 0;
  font-size: 14px;
  text-decoration: none;
}
.bodycontent .homepage .sidebar .reset-password-container .reset-password-link .icon {
  display: none !important;
}
.bodycontent .homepage .sidebar .reset-password-container .reset-password-link:hover {
  background: transparent;
  color: white;
  cursor: pointer;
  text-decoration: underline;
}
.bodycontent .homepage .sidebar .reset-password-container .reset-password-link span {
  padding-left: 0;
}
.bodycontent .homepage .sidebar .registration-section {
  margin-top: 15px;
  padding: 10px 10px;
  background: rgba(10, 10, 10, 0.3);
  border-radius: 5px;
  width: 300px;
}
.bodycontent .homepage .sidebar .registration-section .registration-heading {
  color: white;
  font-size: 18px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 5px;
  text-align: center;
}
.bodycontent .homepage .sidebar .registration-section .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0px;
}
.bodycontent .homepage .sidebar .registration-section .buttons .button {
  margin-top: 0;
  background: rgba(0, 123, 183, 0.8);
}
.bodycontent .homepage .sidebar .registration-section .buttons .button:hover {
  background: #007bb7;
}
.bodycontent .homepage .sidebar .select {
  margin: 3px 3px 10px 3px;
  padding: 5px;
}
@media (max-width: 600px) {
  .bodycontent .homepage .sidebar .select {
    width: 300px;
    display: inline-block !important;
  }
}
.bodycontent .homepage .sidebar .select select {
  padding: 3px 0 3px 10px;
}
@media (max-width: 600px) {
  .bodycontent .homepage .sidebar .select select {
    width: 300px;
    display: inline-block !important;
  }
}
.bodycontent .homepage .sidebar .step {
  color: white;
}
.bodycontent .homepage .sidebar .Loader {
  width: 300px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.bodycontent .homepage .sidebar.solutions .solution:last-of-type {
  margin-top: 20px;
}
.bodycontent .homepage .sidebar.solutions .input-wrapper .enrollLabel.big {
  font-size: 16px !important;
}
.bodycontent .homepage .sidebar.solutions .breakline {
  margin: 10px 30px;
  border-top: 1px solid white;
}
@media (max-width: 1024px) {
  .bodycontent .homepage .sidebar.solutions .breakline {
    max-width: 350px;
    margin: 10px auto;
  }
}
.bodycontent .homepage .sidebar.solutions .hide {
  display: none;
}
.bodycontent .homepage .sidebar.solutions .subtitle {
  color: white;
  width: 306px;
  text-align: left;
  padding: 10px;
}
.bodycontent .homepage .sidebar.solutions .subtitle div {
  font-size: 14px;
  font-weight: 200;
}
.bodycontent .homepage .sidebar .otpLoader {
  width: 100%;
  max-width: 300px;
}
@media (min-width: 600px) {
  .bodycontent .homepage .sidebar .otpLoader {
    width: 300px;
  }
}
.bodycontent .homepage .sidebar .userLabel {
  text-align: left;
  color: white;
  padding: 10px;
  font-size: 18px;
  width: 300px;
}
.bodycontent .homepage .sidebar .list-title {
  width: 300px;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 20px;
  text-align: left;
  color: white;
}
.bodycontent .homepage .sidebar .account-list {
  width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: left;
}
.bodycontent .homepage .sidebar .account-list .account-list-item {
  margin-bottom: 12px;
  padding: 15px 0 15px 25px;
  border-left: 7px solid #b6c204;
  border-radius: 10px;
  background-color: #3b4567;
  color: white;
}
.bodycontent .homepage img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
.bodycontent .homepage .registration-section {
  width: 300px;
  margin: 0px auto;
  padding: 15px;
  background: rgba(10, 10, 10, 0.3);
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.bodycontent .homepage .registration-section:hover {
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.bodycontent .homepage .registration-section .registration-heading {
  color: white;
  font-size: 22px;
  font-weight: 300;
  text-align: left;
  margin-bottom: 5px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(0, 123, 183, 0.6);
  letter-spacing: 0.5px;
}
@media (max-width: 1024px) {
  .bodycontent .homepage .registration-section .registration-heading {
    font-size: 20px;
  }
}
.bodycontent .homepage .registration-section .registration-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0px;
}
.bodycontent .homepage .registration-section .registration-options .button {
  margin: 5px 0;
  border-radius: 0px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: rgba(10, 10, 10, 0.3);
  border-left: 3px solid #007BB7;
  width: 100% !important;
}
.bodycontent .homepage .registration-section .registration-options .button .icon {
  display: none !important;
}
.bodycontent .homepage .registration-section .registration-options .button:hover {
  background: rgba(10, 10, 10, 0.9);
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
.bodycontent .homepage .registration-section .registration-options .button[subtype=submit] {
  border-radius: 8px !important;
  border-left: 3px solid rgb(135.1212121212, 144.0303030303, 2.9696969697);
}
.bodycontent .homepage .registration-section .select {
  max-width: 100%;
}
.bodycontent .homepage .sidebar .input-wrapper {
  display: block;
}
.bodycontent .homepage .sidebar .input-wrapper .enrollLabel {
  width: 230px;
  font-size: 14px !important;
  padding-top: 5px;
  display: inline-block;
  text-align: left;
  position: relative;
  top: -5px;
}
.bodycontent .homepage .sidebar .input-wrapper .enrollLabel .tcLink {
  cursor: pointer;
}
.bodycontent .homepage .sidebar .input-wrapper .enrollLabel .tcLink span {
  color: #00D27F;
}
.bodycontent .homepage .sidebar .input-wrapper .enrollLabel .tcLink span:hover {
  text-decoration: underline;
}
.bodycontent .homepage .sidebar .input-wrapper .registerCorrect {
  border: none;
  display: inline-block !important;
  width: 60px;
  padding: 0;
  margin: 5px 0 0 0;
  height: 20px;
  min-width: 60px;
}
.bodycontent .homepage .sidebar .input-wrapper .registerCorrect input[type=checkbox] {
  padding: 0 0 0 0px;
  height: 20px;
  width: 60px !important;
  margin: 0;
}
.bodycontent .homepage .sidebar .input-wrapper:last-of-type {
  padding-bottom: 3px;
}
.bodycontent .homepage .sidebar .registerDOB {
  display: block;
}
.bodycontent .homepage .sidebar .registerDOB .enrollLabel {
  width: 110px;
  min-width: 110px;
  font-size: 14px;
  padding-top: 5px;
  display: inline-block;
  top: -1px;
}
.bodycontent .homepage .sidebar .registerDOB .enrollInput {
  border: none;
  display: inline-block !important;
  background-color: inherit;
  width: 190px;
  padding: 0;
  margin: 2px 0 0 0;
  height: 36px;
  min-width: 60px;
}
.bodycontent .homepage .sidebar .registerDOB .enrollInput input[type=date] {
  padding: 5px;
  cursor: pointer;
  height: 36px;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}
.bodycontent .homepage .sidebar .registerDOB .enrollInput input[type=date]::-webkit-calendar-picker-indicator {
  -webkit-filter: invert(1);
  filter: invert(1);
  cursor: pointer;
}
.bodycontent .homepage .sidebar input::-webkit-input-placeholder {
  font-size: 16px;
}
.bodycontent .homepage .sidebar input::-moz-placeholder {
  font-size: 16px;
}
.bodycontent .homepage .sidebar input:-ms-input-placeholder {
  font-size: 16px;
}
.bodycontent .homepage .sidebar input::-ms-input-placeholder {
  font-size: 16px;
}
.bodycontent .homepage .sidebar input::placeholder {
  font-size: 16px;
}
.bodycontent .migration-dots-container {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 20px 0;
  gap: 10px;
}
.bodycontent .migration-dots-container .migration-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.bodycontent .migration-dots-container .migration-dot.active {
  background-color: #00afef;
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}
@media (max-width: 600px) {
  .bodycontent .migration-dots-container .migration-dot {
    width: 10px;
    height: 10px;
  }
}
.bodycontent .migration-section {
  background: rgba(10, 10, 10, 0.4) !important;
  border-left: 3px solid #00D27F;
}
.bodycontent .migration-section:hover {
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.bodycontent .migration-section .registration-heading {
  color: white;
  border-bottom: 2px solid rgba(0, 210, 127, 0.6);
}
.bodycontent .migration-section .button {
  background: rgba(0, 210, 127, 0.7) !important;
  border-left: 0px !important;
}
.bodycontent .migration-section .button .icon {
  display: none !important;
}
.bodycontent .migration-section .button:hover {
  background: rgba(0, 210, 127, 0.9) !important;
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}
.bodycontent .create-account-section {
  background: rgba(10, 10, 10, 0.4) !important;
  border-left: 3px solid #007BB7;
}
.bodycontent .create-account-section:hover {
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.bodycontent .create-account-section .registration-heading {
  color: white;
  border-bottom: 2px solid rgba(0, 123, 183, 0.6);
}
.bodycontent .create-account-section .button {
  background: rgba(0, 123, 183, 0.7) !important;
  border-left: 3px solid #007BB7;
}
.bodycontent .create-account-section .button .icon {
  display: none !important;
}
.bodycontent .create-account-section .button:hover {
  background: rgba(0, 123, 183, 0.9) !important;
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
}
.bodycontent .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  opacity: 0;
  -webkit-animation: fadeIn 0.3s ease-in-out forwards;
  animation: fadeIn 0.3s ease-in-out forwards;
}
.bodycontent .overlay.closing {
  -webkit-animation: fadeOut 0.3s ease-in-out forwards;
  animation: fadeOut 0.3s ease-in-out forwards;
}
.bodycontent .overlay .overlay-content {
  position: relative;
  border-left: 3px solid #00D27F;
  max-width: 440px;
  max-height: 90%;
  font-size: 14px;
  overflow: auto;
  background-color: #256288;
  border-radius: 8px;
  padding: 30px;
  color: white;
  text-align: left;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  -webkit-animation: slideUp 0.4s ease-out forwards;
  animation: slideUp 0.4s ease-out forwards;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
}
.bodycontent .overlay .overlay-content.closing {
  -webkit-animation: slideDown 0.3s ease-in forwards;
  animation: slideDown 0.3s ease-in forwards;
}
.bodycontent .overlay .overlay-content li {
  padding-bottom: 6px;
}
.bodycontent .overlay .overlay-content a {
  color: #00D27F;
}
.bodycontent .overlay .overlay-content h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid white;
  margin-bottom: 10px;
}
.bodycontent .overlay .overlay-content .close-button {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
  font-size: 18px;
  width: 24px;
  height: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 50%;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.bodycontent .overlay .overlay-content .close-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.bodycontent .overlay .overlay-content.video-content {
  max-width: 640px;
}
.bodycontent .overlay .overlay-content.video-content .video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  margin-top: 15px;
}
.bodycontent .overlay .overlay-content.video-content .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.bodycontent .overlay .overlay-content.video-content p {
  margin-top: 15px;
}
@media (max-width: 1024px) {
  .bodycontent .overlay .overlay-content {
    max-width: 85%;
    padding: 15px;
  }
}
@media (max-width: 600px) {
  .bodycontent .overlay .overlay-content {
    max-width: 85%;
    padding: 10px;
  }
}
.bodycontent .video-widget-container {
  width: 100%;
  margin: 0 auto;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes slideUp {
  from {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUp {
  from {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes slideDown {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }
}
@keyframes slideDown {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent > .header {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  min-height: 65px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #242424;
  border-left: 5px solid #00afef;
}
@media (max-width: 1024px) {
  .bodycontent > .header .buttons span {
    display: none;
  }
}
@media (max-width: 600px) {
  .bodycontent > .header {
    position: fixed;
    -webkit-backface-visibility: hidden;
    z-index: 30;
    top: 0;
    right: 0;
    left: 0;
    -webkit-box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
    box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  }
  .bodycontent > .header .userinfo .name, .bodycontent > .header .userinfo .surname {
    font-size: 14px;
  }
  .bodycontent > .header .h1 {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
  .bodycontent > .header .h2 {
    display: none;
  }
  .bodycontent > .header .buttons span {
    display: none;
  }
}
@media (max-width: 380px) {
  .bodycontent > .header .userinfo .name, .bodycontent > .header .userinfo .surname {
    font-size: 12px;
    max-height: 15px;
  }
}
.bodycontent > .header .spacer {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 12px;
  margin-right: 20px;
}
@media (max-width: 600px) {
  .bodycontent > .header .spacer {
    width: 5px;
    margin-right: 0;
  }
}
.bodycontent > .header .h {
  display: inline-block;
}
.bodycontent > .header .h1 {
  font-weight: bold;
  color: #ffffff;
  font-size: 20px;
  margin-left: 15px;
  margin-top: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: inline-block;
}
.bodycontent > .header .h2 {
  color: #ffffff;
  opacity: 0.5;
  font-weight: normal;
  font-size: 15px;
  margin-left: 20px;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.bodycontent > .header .topLogo {
  height: 37px;
  margin-left: 10px;
  float: left;
}
@media (max-width: 380px) {
  .bodycontent > .header .topLogo {
    margin-left: 2px;
  }
}
.bodycontent > .header .loader {
  color: white;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  margin-right: 20px;
}
@media (max-width: 600px) {
  .bodycontent > .header .loader {
    margin-right: 10px;
    min-width: 16px;
  }
}
.bodycontent > .header .search {
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
.bodycontent > .header .search input {
  -ms-flex-item-align: stretch;
  align-self: stretch;
  outline: none;
  border: none;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  color: white;
  font-size: 14px;
}
@media (min-width: 600px) {
  .bodycontent > .header .search input {
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
  }
}
@media (min-width: 600px) {
  .bodycontent > .header .search input {
    width: 200px;
  }
}
.bodycontent > .header .search input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.bodycontent > .header .search input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.bodycontent > .header .search input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.bodycontent > .header .search input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.bodycontent > .header .search input::placeholder {
  color: rgba(255, 255, 255, 0.2);
}
.bodycontent > .header .search input:focus {
  background: rgba(255, 255, 255, 0.1);
}
.bodycontent > .header .userinfo, .bodycontent > .header .original-user {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  color: white;
  padding-right: 10px;
  max-height: 40px;
  overflow: hidden;
}
.bodycontent > .header .userinfo .name, .bodycontent > .header .original-user .name {
  font-weight: bold;
  margin-right: 5px;
  max-height: 17px;
  overflow: hidden;
  min-width: 60px;
  width: auto;
  text-align: right;
}
.bodycontent > .header .userinfo .surname, .bodycontent > .header .original-user .surname {
  max-height: 17px;
  overflow: hidden;
  min-width: 60px;
  width: auto;
}
.bodycontent > .header .userinfo .avatar, .bodycontent > .header .original-user .avatar {
  margin-left: 10px;
  width: 30px;
  min-width: 30px;
  height: 30px;
  background-size: cover;
  border-radius: 50px;
  background-position: center;
}
@media (max-width: 600px) {
  .bodycontent > .header .userinfo, .bodycontent > .header .original-user {
    padding-right: 0;
  }
}
.bodycontent > .header .original-user {
  background-color: #007BB7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 10, 10, 0)), to(rgba(10, 10, 10, 0.2)));
  background-image: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.2));
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  margin-right: 10px;
  min-width: 30px;
}
.bodycontent > .header .original-user img {
  width: calc(100% - 5px);
  padding: 5px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .bodycontent > .header .original-user {
    padding: 0;
    width: 45px;
    background: none;
  }
}
@media (max-width: 380px) {
  .bodycontent > .header .original-user {
    margin-right: 5px;
  }
}
.bodycontent > .header .buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 10px;
  /**
  	@component button
  	@state header
  	@css background-color: $color_header_background;
  */
}
@media (max-width: 380px) {
  .bodycontent > .header .buttons {
    padding-right: 5px;
  }
}
.bodycontent > .header .buttons .button {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  height: 100%;
}
.bodycontent > .header .buttons .button:hover {
  background: #007BB7;
}
.bodycontent > .header .buttons .button:hover .icon {
  opacity: 1;
}
.bodycontent > .header .buttons .button .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  opacity: 0.5;
}
.bodycontent > .header .buttons .button .icon .fa {
  padding-left: 10px;
  font-size: 13px;
  -ms-flex-item-align: center;
  align-self: center;
  width: auto !important;
}
@media (max-width: 1024px) {
  .bodycontent > .header .buttons .button .icon .fa {
    padding: 10px;
    font-size: 20px;
  }
}
@media (max-width: 600px) {
  .bodycontent > .header .buttons .button .icon .fa {
    padding: 10px;
    font-size: 20px;
  }
}
@media (max-width: 380px) {
  .bodycontent > .header .buttons .button .icon .fa {
    padding: 7px;
    font-size: 18px;
  }
}
.bodycontent > .header .buttons .button span {
  padding: 10px;
  -ms-flex-item-align: center;
  align-self: center;
  font-weight: 200;
  font-size: 13px;
  color: white;
}
.bodycontent > .header .settingsOverlay {
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 25;
  -webkit-animation: fadeIn 0.2s ease-in both;
  animation: fadeIn 0.2s ease-in both;
  width: 100%; /* Ensure full width */
}
.bodycontent > .header .settingsDropdown {
  position: fixed;
  top: 65px;
  right: 0;
  left: 0;
  z-index: 30;
  -webkit-animation: fadeIn 0.2s ease-in both;
  animation: fadeIn 0.2s ease-in both;
  background-color: #242424;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-height: 80vh;
  overflow-y: auto;
  width: 100%;
}
.bodycontent > .header .settingsDropdown > .icons {
  width: 100%;
  background-color: #242424;
}
.bodycontent > .header .settingsDropdown > .icons .button {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.bodycontent > .header .settingsDropdown > .icons .button .icon {
  width: 40px;
}
.bodycontent > .header .settingsDropdown > .icons .button .icon > i {
  margin: 0 auto;
}
.bodycontent > .header .settingsDropdown > .icons .button span {
  display: block !important;
  font-size: 14px;
}
.bodycontent > .header .settingsDropdown > .settingsDropdownIcon {
  position: relative;
  margin: 0;
  top: 2px;
  border-bottom: 1px solid white;
  opacity: 0.7;
}
.bodycontent > .header .settingsDropdown > .settingsDropdownIcon > i {
  position: relative;
  margin: 0;
  left: 85%;
  color: white;
}
@media (max-width: 600px) {
  .bodycontent > .header .settingsDropdown > .settingsDropdownIcon > i {
    left: 92%;
  }
}
.bodycontent > .header .qrReader .button span {
  min-width: 70px;
}
.bodycontent > .header #view-help-options .button span {
  min-width: 42px;
}
.bodycontent > .header .settings .button span {
  min-width: 64px;
}
.bodycontent > .header .signOut .button span {
  min-width: 68px;
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .desktop-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  overflow-x: hidden;
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
  /*------------------ OPTIONS ------------------- */
  /* !==== Primary Colours */
  /* Off white temp */
  /* !==== Secondary Colours */
  /* Warning */
  /* Error/Failure */
  /* Success */
  /* Yellow */
  /*$color_primary: rgb(192,255,0); //GREEN*/
  /*$color_primary: rgb(0,192,255); //BLUE*/
  /* !==== This is the main colour ====! */
  /* !==== This is the main colour of the desktop sidebars ====!*/
  /* !==== Color for the header ====! */
  /* !==== Color for the footer ====! */
  /* !==== Size of a phone ====! */
  /**
  	Function for figuring out if something is light or dark
  */
}
.bodycontent .desktop-content .collapsed {
  width: auto !important;
}
.bodycontent .desktop-content .collapsed .collapse {
  width: 100% !important;
}
.bodycontent .desktop-content .page-container {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow-y: auto;
}
.bodycontent .desktop-content .page-container.fullscreen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.bodycontent .desktop-content .page-container.fullscreen > * {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow-y: hidden;
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .desktop-content .collapsed {
  width: 60px !important;
}
.bodycontent .desktop-content .collapsed .sidemenu-icon {
  padding-left: 0;
}
.bodycontent .desktop-content .collapsed .sidemenu-grouping .sidemenu-group i {
  display: block;
}
.bodycontent .desktop-content .collapsed .sidemenu-grouping:first-of-type .sidemenu-group {
  border-top: none;
}
.bodycontent .desktop-content .sidemenu {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #007BB7;
  padding-top: 10px;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
  overflow-y: scroll;
}
.bodycontent .desktop-content .sidemenu .selected {
  color: white !important;
  border-left: 5px solid #00afef;
  background: rgba(0, 0, 0, 0.3); /* Old browsers */
  background: -moz-linear-gradient(left, #205475 0%, #1C2430 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #205475 0%, #1C2430 100%); /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#205475), to(#1C2430));
  background: linear-gradient(to right, #205475 0%, #1C2430 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.bodycontent .desktop-content .sidemenu .selected .title {
  font-weight: bold;
}
.bodycontent .desktop-content .sidemenu .collapse {
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  vertical-align: middle;
  -ms-flex-item-align: end;
  align-self: flex-end;
  background-color: rgba(0, 175, 239, 0.3);
  color: white;
  cursor: pointer;
  margin-right: -1px;
}
.bodycontent .desktop-content .sidemenu .collapse:hover {
  background-color: rgba(0, 175, 239, 0.5);
}
.bodycontent .desktop-content .sidemenu-icon {
  padding-left: 0;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: rgb(86, 209.7447698745, 255);
}
.bodycontent .desktop-content .sidemenu-icon:hover {
  background: rgba(10, 10, 10, 0.2);
}
.bodycontent .desktop-content .sidemenu-icon img {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  max-width: 16px;
  max-height: 16px;
  /*width:55px;*/
  /*height: $iconHeight;*/
  -ms-flex-item-align: center;
  align-self: center;
  margin: 10px 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.bodycontent .desktop-content .sidemenu-icon i {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  width: 48px;
  height: 40px;
  text-align: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.bodycontent .desktop-content .sidemenu-icon .title {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-size: 14px;
  white-space: nowrap;
  font-weight: 300;
}
.bodycontent .desktop-content .sidemenu-icon .notifications {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  display: inline;
  vertical-align: middle;
  font-size: 10px;
  background-color: rgba(10, 10, 10, 0.5);
  border-radius: 4px;
  padding: 3px 8px;
  margin-right: 10px;
}
.bodycontent .desktop-content .sidemenu-icon > * {
  vertical-align: middle;
  line-height: 40px;
}
.bodycontent .desktop-content .sidemenu-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: rgb(86, 209.7447698745, 255);
}
.bodycontent .desktop-content .sidemenu-group img {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  max-width: 16px;
  max-height: 16px;
  /*width:55px;*/
  /*height: $iconHeight;*/
  -ms-flex-item-align: center;
  align-self: center;
  margin: 10px 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.bodycontent .desktop-content .sidemenu-group i {
  display: none;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  width: 48px;
  height: 40px;
  text-align: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.bodycontent .desktop-content .sidemenu-group .title {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-size: 14px;
  white-space: nowrap;
  font-weight: bold;
  margin-left: 10px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
}
.bodycontent .desktop-content .sidemenu-group .notifications {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  display: inline;
  vertical-align: middle;
  font-size: 10px;
  background-color: rgba(10, 10, 10, 0.5);
  border-radius: 4px;
  padding: 3px 8px;
  margin-right: 10px;
}
.bodycontent .desktop-content .sidemenu-group > * {
  vertical-align: middle;
  line-height: 30px;
}
.bodycontent .desktop-content .sidemenu-grouping {
  display: block;
}
.bodycontent .desktop-content #iframePDF .backSidebar .button {
  padding: 0;
}
.bodycontent .desktop-content #iframePDF #pdfViewer.tcView {
  height: calc(100vh - 70px);
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .desktop-content .chatCollapsed {
  width: 50px !important;
}
.bodycontent .desktop-content .chatbar {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 210px;
  background-color: #007BB7;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}
.bodycontent .desktop-content .chatbar .controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: white;
  background: rgba(10, 10, 10, 0.5);
  padding: 5px;
}
.bodycontent .desktop-content .chatbar .controls .selected {
  opacity: 1 !important;
}
.bodycontent .desktop-content .chatbar .controls .button {
  opacity: 0.5;
  cursor: pointer;
  padding: 5px;
}
.bodycontent .desktop-content .chatbar .controls .button:hover {
  opacity: 1;
}
.bodycontent .desktop-content .chatbar > .iconstate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.bodycontent .desktop-content .chatbar > .iconstate .chatuser {
  border-right: none !important;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}
.bodycontent .desktop-content .chatbar .users .online {
  border-right: solid 10px #007BB7 !important;
}
.bodycontent .desktop-content .chatbar .users .online .notifications {
  background-color: #007BB7 !important;
}
.bodycontent .desktop-content .chatbar .users .chatuser {
  cursor: pointer;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 1px;
  background: rgba(10, 10, 10, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-right: solid 10px rgba(255, 255, 255, 0.3);
}
.bodycontent .desktop-content .chatbar .users .chatuser:hover {
  background: rgba(10, 10, 10, 0.4);
}
.bodycontent .desktop-content .chatbar .users .chatuser .avatar {
  margin: 8px;
  border-radius: 4px;
  width: 35px;
  height: 35px;
  background-repeat: no-repeat;
  background-size: cover;
}
.bodycontent .desktop-content .chatbar .users .chatuser .name {
  font-size: 12px;
  color: white;
  font-weight: bold;
  padding-right: 5px;
}
.bodycontent .desktop-content .chatbar .users .chatuser .surname {
  font-size: 12px;
  color: white;
  font-weight: 200;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.bodycontent .desktop-content .chatbar .users .chatuser .notifications {
  display: inline;
  vertical-align: middle;
  font-size: 10px;
  background-color: rgba(10, 10, 10, 0.5);
  border-radius: 4px;
  padding: 3px 8px;
  margin-right: 10px;
  color: white;
}
.bodycontent .desktop-content .chatbar .section {
  margin-top: 1px;
}
.bodycontent .desktop-content .chatbar .section .title {
  background: rgba(10, 10, 10, 0.5);
  color: rgba(255, 255, 255, 0.5);
  padding: 5px;
  font-size: 13px;
  cursor: pointer;
}
.bodycontent .desktop-content .chatbar .section .title:hover {
  color: white;
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .mobile-content {
  padding-top: 80px;
  padding-bottom: 115px;
  min-height: calc(100vh - 40px);
  height: 100%;
}
.bodycontent .mobile-content .workspace {
  margin-left: 0px !important;
}
.bodycontent .mobile-content .workspace .section > .heading {
  display: block;
  text-align: center;
  padding-top: 20px;
}
.bodycontent .mobile-content-menu {
  position: fixed;
  -webkit-backface-visibility: hidden;
  overflow-y: auto;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14;
  height: calc(100% - 60px);
  /*padding-right: 80px;*/
  padding-bottom: 10px;
  background: rgba(17, 17, 17, 0.9);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-overflow-scrolling: touch;
}
.bodycontent .mobile-content-menu .mobile-content-container {
  position: relative;
  padding-top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 14;
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  /*flex-direction: row-reverse;*/
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-bottom: 20px;
  background: rgba(17, 17, 17, 0.9);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.bodycontent .mobile-content-menu-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.bodycontent .mobile-content-menu-icon i {
  width: 100px;
  height: 70px;
  line-height: 90px;
  text-align: center;
  vertical-align: middle;
  color: white;
  font-size: 30px;
}
.bodycontent .mobile-content-menu-icon img {
  width: 30px;
  height: 30px;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
  margin: 35px 35px 10px 35px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.bodycontent .mobile-content-menu-icon .name {
  height: 60px;
  text-align: center;
  padding: 10px 5px 10px 5px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 64px;
  color: white;
  max-width: 100px;
}
.bodycontent .mobile-content .menu-button {
  position: fixed;
  width: 49px;
  height: 49px;
  right: 20px;
  bottom: 50px;
  z-index: 15;
  line-height: 49px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: rgba(0, 175, 239, 0.75);
  color: white;
  font-size: 20px;
  -webkit-box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  border-radius: 50px;
}
.bodycontent .mobile-content .help-button {
  position: fixed;
  width: 49px;
  height: 49px;
  right: 20px;
  bottom: 110px;
  z-index: 15;
  line-height: 49px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background: #cccc00;
  color: #333;
  font-size: 20px;
  -webkit-box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  border-radius: 50px;
}
.bodycontent .mobile-content ul.mobile-help-list {
  position: fixed;
  right: 20px;
  bottom: 165px;
  list-style: none;
  padding: 10px;
  background-color: #242424;
  color: white;
  border-radius: 10px;
  -webkit-animation: bounceIn 0.3s ease forwards;
  animation: bounceIn 0.3s ease forwards;
}
.bodycontent .mobile-content ul.mobile-help-list.mobile-help-list-hidden {
  -webkit-animation: fadeOut 0.2s ease forwards;
  animation: fadeOut 0.2s ease forwards;
}
.bodycontent .mobile-content ul.mobile-help-list li.mobile-help-list-item {
  padding: 15px 10px;
  cursor: pointer;
}
.bodycontent .mobile-content ul.mobile-help-list li.mobile-help-list-item:focus {
  background-color: #333;
}
@keyframes bounceIn {
  0% {
    scale: 0;
  }
  70% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .placeholder > .elements > .button, .bodycontent .workspace a.button, .bodycontent .workspace .button, .bodycontent #iframeContainer .button, #iframeContainer .bodycontent .button, .bodycontent #iframeContainerChat .button, #iframeContainerChat .bodycontent .button, .bodycontent #iframePDF .button, #iframePDF .bodycontent .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  background-color: #007bb7;
  color: #FFFFFF;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.bodycontent .placeholder > .elements > .selected.button, .bodycontent .workspace .selected.button, .bodycontent #iframeContainer .selected.button, #iframeContainer .bodycontent .selected.button, .bodycontent #iframeContainerChat .selected.button, #iframeContainerChat .bodycontent .selected.button, .bodycontent #iframePDF .selected.button, #iframePDF .bodycontent .selected.button {
  background-color: #003367;
}
.bodycontent .placeholder > .elements > .disabled.button, .bodycontent .workspace .disabled.button, .bodycontent #iframeContainer .disabled.button, #iframeContainer .bodycontent .disabled.button, .bodycontent #iframeContainerChat .disabled.button, #iframeContainerChat .bodycontent .disabled.button, .bodycontent #iframePDF .disabled.button, #iframePDF .bodycontent .disabled.button {
  opacity: 0.5;
  cursor: default;
}
@media (min-width: 600px) {
  .bodycontent .placeholder > .elements > .button:not(.disabled):hover, .bodycontent .workspace .button:not(.disabled):hover, .bodycontent #iframeContainer .button:not(.disabled):hover, #iframeContainer .bodycontent .button:not(.disabled):hover, .bodycontent #iframeContainerChat .button:not(.disabled):hover, #iframeContainerChat .bodycontent .button:not(.disabled):hover, .bodycontent #iframePDF .button:not(.disabled):hover, #iframePDF .bodycontent .button:not(.disabled):hover {
    background-color: #00afef;
  }
}
@media (max-width: 1024px) {
  .bodycontent .placeholder > .elements > .button:active, .bodycontent .workspace .button:active, .bodycontent #iframeContainer .button:active, #iframeContainer .bodycontent .button:active, .bodycontent #iframeContainerChat .button:active, #iframeContainerChat .bodycontent .button:active, .bodycontent #iframePDF .button:active, #iframePDF .bodycontent .button:active {
    background-color: #00afef;
  }
}
.bodycontent .placeholder > .elements > .button .icon, .bodycontent .workspace .button .icon, .bodycontent #iframeContainer .button .icon, #iframeContainer .bodycontent .button .icon, .bodycontent #iframeContainerChat .button .icon, #iframeContainerChat .bodycontent .button .icon, .bodycontent #iframePDF .button .icon, #iframePDF .bodycontent .button .icon {
  background-color: #003367;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.bodycontent .placeholder > .elements > .button .icon .fa, .bodycontent .workspace .button .icon .fa, .bodycontent #iframeContainer .button .icon .fa, #iframeContainer .bodycontent .button .icon .fa, .bodycontent #iframeContainerChat .button .icon .fa, #iframeContainerChat .bodycontent .button .icon .fa, .bodycontent #iframePDF .button .icon .fa, #iframePDF .bodycontent .button .icon .fa {
  padding: 10px;
  font-size: 14px;
  -ms-flex-item-align: center;
  align-self: center;
  width: 36px !important;
  min-width: 36px;
}
@media (max-width: 600px) {
  .bodycontent .placeholder > .elements > .bottom.button, .bodycontent .workspace .bottom.button, .bodycontent #iframeContainer .bottom.button, #iframeContainer .bodycontent .bottom.button, .bodycontent #iframeContainerChat .bottom.button, #iframeContainerChat .bodycontent .bottom.button, .bodycontent #iframePDF .bottom.button, #iframePDF .bodycontent .bottom.button {
    width: 100%;
    margin-top: 10px;
  }
}
.bodycontent .placeholder > .elements > .button span, .bodycontent .workspace .button span, .bodycontent #iframeContainer .button span, #iframeContainer .bodycontent .button span, .bodycontent #iframeContainerChat .button span, #iframeContainerChat .bodycontent .button span, .bodycontent #iframePDF .button span, #iframePDF .bodycontent .button span {
  padding: 10px;
  -ms-flex-item-align: center;
  align-self: center;
  font-weight: 400;
  font-size: 14px;
  color: white;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}
.bodycontent .workspace {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  overflow-x: hidden;
  /**
  	@component button
  	@state workspace
  	@theme spaceport
  */
  /**
  	@component Section
  	@theme spaceport
  */
}
@media (min-width: 600px) {
  .bodycontent .workspace {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
  }
}
.bodycontent .workspace a.button {
  text-decoration: none;
}
.bodycontent .workspace .deactivateFamily {
  padding: 20px 0px;
}
.bodycontent .workspace .deactivateFamily .storm-table {
  margin-top: 10px;
}
.bodycontent .workspace .section {
  margin-top: 10px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  border-left: 5px solid rgba(0, 175, 239, 0.5);
}
.bodycontent .workspace .section ul {
  padding-left: 16px;
  font-size: 13px;
  opacity: 0.5;
}
.bodycontent .workspace .section label {
  font-size: 13px;
  opacity: 0.8;
}
.bodycontent .workspace .section label a {
  color: #007BB7;
}
.bodycontent .workspace .section form {
  padding: 10px;
}
.bodycontent .workspace .section hr {
  border: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
}
.bodycontent .workspace .section.light {
  background-color: rgba(255, 255, 255, 0.4);
}
.bodycontent .workspace .section.dark {
  background-color: transparent !important;
  border-left: 0px !important;
}
.bodycontent .workspace .section .content {
  padding: 10px;
  color: white;
}
.bodycontent .workspace .section .content > h4 {
  color: white;
}
.bodycontent .workspace .section > .heading {
  color: white;
  padding: 10px 20px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.1);
  font-size: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 600px) {
  .bodycontent .workspace .section > .heading {
    font-weight: 300;
    font-size: 22px;
  }
}
.bodycontent .workspace .section .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /**
  	@component button
  	@state section
  	@theme spaceport
  */
}
@media (max-width: 600px) {
  .bodycontent .workspace .section .menu {
    padding-top: 10px;
    padding-bottom: 10px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.bodycontent .workspace .section .menu .button {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-item-align: center;
  align-self: center;
  margin-right: 1px;
  background-color: #007BB7;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
@media (min-width: 600px) {
  .bodycontent .workspace .section .menu .button {
    margin-left: 10px;
  }
  .bodycontent .workspace .section .menu .button:not(.disabled):hover {
    background-color: #00afef;
  }
}
@media (max-width: 1024px) {
  .bodycontent .workspace .section .menu .button:active {
    background-color: rgba(0, 175, 239, 0.5);
  }
}
@media (max-width: 600px) {
  .bodycontent .workspace .section .menu .button {
    width: calc(100% - 20px);
    margin: 5px 10px 0 10px !important;
  }
}
@media (max-width: 600px) {
  .bodycontent .workspace .section .menu .button .fa {
    padding: 15px;
    color: white;
    font-size: 15px;
  }
}
@media (max-width: 600px) {
  .bodycontent .workspace .section .menu .button span {
    text-align: center;
    font-size: 15px !important;
  }
}
@media (max-width: 600px) {
  .bodycontent .workspace .section .menu .button.checkout {
    margin: 0 !important;
  }
}
.bodycontent .workspace .smsStatusBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.bodycontent .workspace .smsStatusBlock > .text {
  font-size: 12px;
}
.bodycontent .workspace .smsStatusBlock > .status {
  font-size: 10px;
}
.bodycontent .workspace .smsStatusBlock > .status.delivered {
  color: #00D27F;
}
.bodycontent .workspace .smsStatusBlock > .status.undelivered, .bodycontent .workspace .smsStatusBlock > .status.queued, .bodycontent .workspace .smsStatusBlock > .status.sent {
  color: #FF9F2F;
}
.bodycontent .workspace .smsStatusBlock > .status.failed {
  color: #FF2F2F;
}
.bodycontent .workspace textarea {
  resize: none;
}
.bodycontent .workspace .print-buttons > .button {
  margin-right: 10px;
}
@media (max-width: 600px) {
  .bodycontent .workspace .print-buttons > .button {
    width: 50%;
  }
}
@media (max-width: 600px) {
  .bodycontent .workspace .print-buttons {
    margin: 5px 7px;
    width: calc(100% - 14px);
  }
}
.bodycontent .modalWorkspace {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  max-width: 0 !important;
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .footer {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  min-height: 38px;
  background-color: #0A0A0A;
  -webkit-box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
}
.bodycontent .footer .info {
  margin-left: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 38px;
  color: white;
  font-size: 12px;
}
.bodycontent .footer .info > * {
  padding: 5px;
}
.bodycontent .footer .info > img {
  padding: 0;
  margin-right: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  max-width: 20px;
  height: auto;
}
.bodycontent .footer .info a {
  text-decoration: none;
  color: white;
  opacity: 0.5;
}
.bodycontent .footer .info a:hover {
  opacity: 1;
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.bodycontent .icontab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 5px;
}
.bodycontent .icontab .tab {
  cursor: pointer;
  text-align: center;
  padding: 10px;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border: solid 1px #61709e;
  width: 107px;
  height: 138px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007293+0,003367+99 */
  background: #007293; /* Old browsers */
  background: -moz-linear-gradient(top, #007293 0%, #003367 99%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #007293 0%, #003367 99%); /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, left bottom, from(#007293), color-stop(99%, #003367));
  background: linear-gradient(to bottom, #007293 0%, #003367 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#007293", endColorstr="#003367",GradientType=0 ); /* IE6-9 */
  margin: 10px;
  border-radius: 10px;
}
@media (min-width: 600px) {
  .bodycontent .icontab .tab {
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
}
@media (max-width: 1024px) {
  .bodycontent .icontab .tab {
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
  }
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab {
    border-bottom: solid 2px #61709e;
  }
}
.bodycontent .icontab .tab.selected {
  border-bottom: solid 4px #00afef;
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab.selected {
    border-bottom: solid 3px #00afef;
  }
}
.bodycontent .icontab .tab.selected .fa {
  opacity: 1;
}
.bodycontent .icontab .tab .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab .icon {
    max-height: 45px;
  }
}
.bodycontent .icontab .tab .icon > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.bodycontent .icontab .tab .icon > img {
  position: relative;
  left: calc(50% - 15px);
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab .icon > img {
    left: calc(50% - 10px);
  }
}
.bodycontent .icontab .tab .icon img {
  padding: 15px 0px;
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab .icon img {
    padding: 10px;
  }
}
.bodycontent .icontab .tab img {
  opacity: 0.5;
  width: 30px;
  height: auto;
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab img {
    width: 20px;
  }
}
.bodycontent .icontab .tab .fa {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  font-size: 45px;
  padding: 15px 0px;
  opacity: 0.5;
  width: auto !important;
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab .fa {
    font-size: 25px;
    padding: 10px;
  }
}
.bodycontent .icontab .tab .title {
  font-size: 16px;
  font-weight: 200;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .bodycontent .icontab .tab .title {
    font-size: 18px;
    font-weight: 300;
  }
}
.bodycontent .icontab .tab.Cards .icon img {
  width: 40px;
  left: calc(50% - 20px);
}
.bodycontent .familyPage {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin: 25px;
}
@media (max-width: 600px) {
  .bodycontent .familyPage {
    margin: 5px;
  }
}
.bodycontent .familyPage .navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-height: 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 1024px) {
  .bodycontent .familyPage .navigation {
    padding-bottom: 5px;
  }
}
@media (max-width: 600px) {
  .bodycontent .familyPage .navigation {
    padding-bottom: 5px;
  }
}
.bodycontent .familyPage .navigation .view {
  margin-left: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (max-width: 600px) {
  .bodycontent .familyPage .navigation .view {
    margin: 0;
  }
}
.bodycontent .familyPage .navigation .view .icontab {
  margin-right: 20px;
}
@media (max-width: 600px) {
  .bodycontent .familyPage .navigation .view .icontab {
    margin-right: 0;
  }
}
.bodycontent .familyPage .navigation .view .icontab .tab {
  height: auto !important;
  width: auto !important;
}
.bodycontent .familyPage .navigation .view .icontab .tab .fa {
  font-size: 20px;
  color: #F3F3F3;
  padding: 0;
}
@media (max-width: 600px) {
  .bodycontent .familyPage .navigation .view .icontab .tab .fa {
    font-size: 15px;
  }
}
@media (max-width: 600px) {
  .bodycontent .familyPage .navigation .view .icontab .tab {
    border-bottom: solid 1px #61709e;
  }
}
.bodycontent .familyPage .navigation .view .icontab .selected {
  border-bottom-width: 3px;
}
.bodycontent .familyPage .navigation .view .icontab .selected .fa {
  color: white;
}

.request-go-live .storm-radioGroup, .go-live .storm-radioGroup {
  display: inline-block;
  max-width: 150px;
  width: 100%;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.chat-container {
  pointer-events: none;
  position: absolute;
  height: 400px;
  left: 0;
  right: 210px;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  overflow-x: hidden;
}
.chat-container .chat-window {
  pointer-events: all !important;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  overflow: hidden;
  min-height: 400px;
  max-height: 400px;
  min-width: 250px;
  -webkit-box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
  box-shadow: 0 0 10px rgba(10, 10, 10, 0.2);
  margin-right: 5px;
}
.chat-container .chat-window .collapsed .chat-window-title-heading {
  cursor: pointer !important;
}
.chat-container .chat-window-title {
  pointer-events: all !important;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 250px;
  max-width: 250px;
  border: 1px solid black;
  background-color: rgba(10, 10, 10, 0.7);
  color: white;
  font-size: 12px;
}
.chat-container .chat-window-title-heading {
  padding: 7px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.chat-container .chat-window-title-buttons {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}
.chat-container .chat-window-title-buttons > * {
  padding: 8px;
}
.chat-container .chat-window-body {
  border: solid 1px rgba(10, 10, 10, 0.5);
  border-bottom: none;
  background: rgba(240, 240, 240, 0.8);
}
.chat-container .chat-window-body::-webkit-scrollbar {
  width: 7px;
  outline: 1px solid slategrey;
}
.chat-container .chat-window-body::-webkit-scrollbar-thumb {
  background-color: lightgrey;
  outline: 1px solid slategrey;
}
.chat-container .chat-window-body .message .text {
  margin-top: 4px;
  border-radius: 3px;
  background: white;
  color: #373e4d;
  padding: 4px;
  font-size: 12px;
  text-shadow: rgba(10, 10, 10, 0.5) 0 1px 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 10, 10, 0)), to(rgba(10, 10, 10, 0.1)));
  background-image: linear-gradient(rgba(10, 10, 10, 0), rgba(10, 10, 10, 0.1));
}
.chat-container .chat-window-body .message .avatar {
  min-width: 30px;
  min-height: 30px;
  border-radius: 3px;
}
.chat-container .chat-window-body .other {
  margin-right: 30px;
  margin-left: 5px;
}
.chat-container .chat-window-body .other .text {
  border: solid 1px rgb(200, 200, 200);
}
.chat-container .chat-window-body .me {
  margin-left: 30px;
  margin-right: 5px;
}
.chat-container .chat-window-body .me .text {
  border: solid 1px rgb(0, 54.4426229508, 81);
  background-color: #007BB7;
}
.chat-container .chat-window-footer {
  background-color: #919191;
  border-left: solid 1px #0A0A0A;
  border-right: solid 1px #0A0A0A;
  border-bottom: solid 1px #0A0A0A;
  padding: 5px;
}
.chat-container .chat-window-footer input {
  padding: 7px;
  outline: none;
  border: none;
}

.section.chatHistory {
  border-left: none !important;
}
.section.chatHistory ul.list-group {
  overflow-y: scroll;
  padding-left: 0;
  margin-bottom: 20px;
  opacity: 0.9;
}
.section.chatHistory ul.list-group .list-group-item {
  position: relative;
  display: block;
  padding: 10px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: black;
}
.section.chatHistory ul.list-group .list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.section.chatHistory ul.list-group .list-group-item > strong {
  padding-bottom: 5px;
  display: block;
}
.section.chatHistory ul.list-group .header {
  position: relative;
  display: block;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: black;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-size: 18px;
  cursor: pointer;
}
.section.chatHistory ul.list-group .header .heading {
  width: calc(100% - 25px);
  float: left;
  font-size: 0.9rem;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.greyList .tableDetails.top {
  background: #373333;
  border: 1px solid #545967;
  -webkit-filter: drop-shadow(0px 4px 4px #000);
  filter: drop-shadow(0px 4px 4px #000);
}
.greyList .tableDetails.top .info {
  color: #acacac;
}

.tableDetails {
  margin: 15px 5px;
  background-color: black;
  padding: 9px 20px 9px 20px;
  overflow-y: auto;
  position: relative;
  color: white;
  min-width: 280px;
}
.tableDetails.top {
  border-radius: 10px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#007293+0,003367+100 */
  background: #007293; /* Old browsers */
  background: -moz-linear-gradient(left, #007293 0%, #003367 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #007293 0%, #003367 100%); /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#007293), to(#003367));
  background: linear-gradient(to right, #007293 0%, #003367 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  overflow: hidden;
  position: relative;
  border: 1px solid #61709e;
  -webkit-filter: drop-shadow(0px 4px 4px #000);
  filter: drop-shadow(0px 4px 4px #000);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.tableDetails.top .info {
  color: #929cb9;
  font-size: 12px;
}
.tableDetails.top .info.small {
  max-width: calc(100% - 120px);
}
.tableDetails.top .date {
  font-size: 11px;
  max-width: calc(100% - 10px);
}
.tableDetails.top .storeTitle {
  max-width: 75%;
}
.tableDetails.top .storeTitle.full {
  max-width: calc(100% - 10px);
}
.tableDetails.hover {
  background: #007293; /* Old browsers */
  background: -moz-linear-gradient(left, #007293 0%, #007293 80%, #003367 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #007293 0%, #007293 80%, #003367 100%); /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#007293), color-stop(80%, #007293), to(#003367));
  background: linear-gradient(to right, #007293 0%, #007293 80%, #003367 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#007293", endColorstr="#003367", GradientType=1); /* IE6-9 */
  cursor: pointer;
}
.tableDetails .lightblue {
  color: #9da6c2 !important;
}
.tableDetails .colortab {
  height: 100%;
  width: 7px;
  position: absolute;
  top: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.tableDetails .colortab.right {
  right: 0;
  left: auto;
  width: 25px;
  cursor: pointer;
}
.tableDetails .colortab.left {
  right: auto;
  left: 0;
}
.tableDetails .colortab.onclick {
  cursor: pointer;
  width: 25px;
}
.tableDetails .colortab.red {
  background: #9c0027;
}
.tableDetails .colortab.red:hover {
  background: #ff0000 !important;
}
.tableDetails .colortab.red.decline {
  width: 25px;
}
.tableDetails .colortab.green {
  background: #afef00;
  color: black;
}
.tableDetails .colortab.green:hover {
  background: #93e393;
}
.tableDetails .colortab.gray {
  background-color: #919191;
}
.tableDetails .colortab.orange {
  background-color: #FF9F2F;
}
.tableDetails .colortab.blue {
  background-color: #00afef;
}
.tableDetails .listTotal {
  position: absolute;
  bottom: 25px;
  right: 40px;
}
.tableDetails .listTotal .listFlex {
  text-align: right;
  display: inline-block;
}
.tableDetails .listTotal .listFlex div {
  padding: 0 5px;
  display: inline-block;
}
.tableDetails .listTotal .listFlex div.strike {
  -webkit-text-decoration: line-through red 2px;
  text-decoration: line-through red 2px;
}
.tableDetails .status {
  position: absolute;
  top: 20px;
  font-size: 15px;
  right: 40px;
  color: #C0C0C0;
}
.tableDetails .devider {
  color: grey;
  font-size: 12px;
  text-align: center;
  width: 50%;
  margin: 0 auto;
  border-bottom: 1px solid grey;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.tableDetails .groupTable {
  position: relative;
  width: calc(100% - 10px);
}
.tableDetails .groupTable .image {
  height: 60px;
  width: 60px;
  float: left;
  margin-right: 20px;
  margin-left: 22px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
@media (max-width: 600px) {
  .tableDetails .groupTable .image {
    margin-right: 10px;
    margin-left: 12px;
  }
}
@media (max-width: 380px) {
  .tableDetails .groupTable .image {
    margin-right: 10px;
    margin-left: 12px;
  }
}
.tableDetails .groupTable.leftPad {
  left: 15px;
  width: calc(100% - 25px);
}
.tableDetails.hide {
  display: none;
}
.tableDetails.leftMargin {
  margin-left: 40px;
}

.tableNew .loadMore {
  margin: 15px auto;
  padding: 10px;
  border-radius: 30px;
  border: none;
  width: 200px;
  display: block !important;
  background-color: #007bb7;
  color: #FFFFFF;
}

.storm-table {
  width: 100%;
  color: white;
  overflow-x: scroll;
}
@media (max-width: 600px) {
  .storm-table {
    color: #313131;
    overflow-x: hidden;
  }
}
.storm-table table {
  border-collapse: separate;
  border-spacing: 0 5px;
  width: 100%;
}
.storm-table table thead {
  display: none;
}
@media (min-width: 600px) {
  .storm-table table thead {
    display: table-header-group;
  }
}
.storm-table th {
  padding: 5px;
  text-align: left;
  font-weight: 200;
}
@media (min-width: 600px) {
  .storm-table tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.1);
  }
}
.storm-table tr td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 10px 0 20px;
}
.storm-table tr td .button {
  background-color: #007BB7 !important;
}
.storm-table tr td .button:hover {
  background-color: #00afef !important;
}
@media (min-width: 600px) {
  .storm-table tr td {
    padding: 10px;
    display: table-cell;
  }
}
.storm-table tr td .buttons .button:not(:first-child) {
  margin-top: 5px;
}
@media (max-width: 600px) {
  .storm-table tr td {
    background: white;
    -ms-flex-item-align: center;
    align-self: center;
  }
  .storm-table tr td .buttons {
    width: 100%;
  }
  .storm-table tr td .button {
    background-color: #0078b4 !important;
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
  .storm-table tr td:first-child {
    padding-top: 10px;
  }
  .storm-table tr td:last-child {
    padding-bottom: 20px;
  }
  .storm-table tr td:last-child .button {
    background-color: #0078b4;
    width: 100%;
    margin-top: 10px;
    text-align: center;
  }
}
@media (max-width: 380px) {
  .storm-table tr td {
    -ms-flex-item-align: center;
    align-self: center;
    font-size: 13px;
  }
  .storm-table tr td:first-child {
    padding-top: 10px;
  }
  .storm-table tr td:last-child {
    padding-bottom: 20px;
  }
}
@media (max-width: 380px) and (max-width: 600px) {
  .storm-table tr td:last-child .button {
    background: #0078b4;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    padding: 5px 0px;
  }
}
.storm-table tr td:last-child {
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .storm-table tr td:before {
    max-width: 30%;
    min-width: 30%;
    -ms-flex-item-align: center;
    align-self: center;
    content: attr(data-th) "";
    display: inline-block;
    font-weight: bold;
  }
}
@media (min-width: 600px) {
  .storm-table tr td:before {
    display: none;
  }
}
@media (max-width: 600px) {
  .storm-table tr td.Action:before {
    display: none;
  }
}
.storm-table .arrow {
  min-width: 100px;
  margin: 5px;
  padding: 10px 10px 21px 10px;
  background-color: #007BB7;
  border: 0;
  height: 30px;
}
.storm-table .arrow:hover {
  cursor: pointer;
}
@media (max-width: 600px) {
  .storm-table .arrow {
    width: calc(33% - 10px);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}
.storm-table .arrow i {
  width: 100%;
}
.storm-table .dropdownSizes {
  border-radius: 0px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 100px;
  width: 100px;
  margin: 5px;
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}
@media (max-width: 600px) {
  .storm-table .dropdownSizes {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: 0px;
    margin-bottom: 5px;
    width: calc(33% - 10px);
    max-width: 33% !important;
  }
}
@media (max-width: 1024px) {
  .storm-table .dropdownSizes {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: 0px;
    margin-bottom: 5px;
    max-width: 100px;
  }
}
.storm-table .dropdownSizes:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f0dc";
  font-size: 20px;
  margin-left: -35px;
  opacity: 0.3;
  color: black;
  -ms-flex-item-align: center;
  align-self: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 20px;
  padding-right: 10px;
  pointer-events: none;
}
.storm-table .dropdownSizes:hover:after {
  opacity: 1;
}
.storm-table .dropdownSizes select {
  background: transparent;
  padding: 3px 5px;
  font-size: 18px;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  color: black;
  outline: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 30px;
  -ms-flex-item-align: center;
  align-self: center;
  padding-left: 20px;
  padding-right: 10px;
}

.faqlist > .faq,
.faqlist .section.dark .faq {
  margin-bottom: 10px;
  background-color: rgba(15, 30, 45, 0.6);
  border-radius: 6px;
  border: 1px solid rgba(100, 120, 140, 0.3);
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}
.faqlist > .faq:hover,
.faqlist .section.dark .faq:hover {
  border-color: rgba(0, 114, 147, 0.8);
}
.faqlist > .faq:last-child,
.faqlist .section.dark .faq:last-child {
  margin-bottom: 5px;
}
.faqlist > .faq .question,
.faqlist .section.dark .faq .question {
  padding: 16px 45px 16px 20px;
  color: white;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: left;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}
.faqlist > .faq .question:after,
.faqlist .section.dark .faq .question:after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(0);
  -ms-transform: translateY(-50%) rotate(0);
  transform: translateY(-50%) rotate(0);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  color: #00afef;
  font-size: 18px;
}
.faqlist > .faq .question.active,
.faqlist .section.dark .faq .question.active {
  border-bottom: 1px solid rgba(0, 175, 239, 0.4);
  background-color: rgba(0, 114, 147, 0.1);
}
.faqlist > .faq .question.active:after,
.faqlist .section.dark .faq .question.active:after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}
.faqlist > .faq .answer,
.faqlist .section.dark .faq .answer {
  padding: 0 20px;
  color: #c5c5c5;
  font-size: 14px;
  line-height: 1.6;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-align: left;
}
.faqlist > .faq .answer.visible,
.faqlist .section.dark .faq .answer.visible {
  max-height: 1000px;
  padding: 15px 20px 20px;
}
.faqlist > .faq .answer ul,
.faqlist .section.dark .faq .answer ul {
  padding-left: 18px;
  margin: 10px 0;
  text-align: left;
  color: #c5c5c5;
  opacity: 1;
}
.faqlist > .faq .answer ul li,
.faqlist .section.dark .faq .answer ul li {
  margin-bottom: 8px;
  text-align: left;
}
.faqlist > .faq .answer ul li b,
.faqlist .section.dark .faq .answer ul li b {
  color: white;
}
.faqlist > .faq .answer b,
.faqlist .section.dark .faq .answer b {
  color: white;
  font-weight: 500;
}

.faqlist .section.dark {
  margin: 0 0 30px 0;
  padding: 0;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  background-color: rgba(10, 20, 30, 0.7) !important;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-left: 4px solid #00afef;
}
.faqlist .section.dark:hover {
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.faqlist .section.dark .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 114, 147, 0.8)), to(rgba(0, 51, 103, 0.9)));
  background: linear-gradient(90deg, rgba(0, 114, 147, 0.8) 0%, rgba(0, 51, 103, 0.9) 100%);
  padding: 25px 20px 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.faqlist .section.dark .header:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.03) 10px, rgba(255, 255, 255, 0.03) 20px);
  opacity: 0.5;
}
.faqlist .section.dark .header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  background-color: #00afef;
  border-radius: 0 0 3px 3px;
}
.faqlist .section.dark .header i {
  color: #fff !important;
  margin-right: 15px !important;
  background-color: rgba(0, 114, 147, 0.7) !important;
  width: 38px !important;
  height: 38px !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  font-size: 18px !important;
  position: relative !important;
  z-index: 1 !important;
}
.faqlist .section.dark .header > div {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  position: relative !important;
  z-index: 1 !important;
  text-align: left !important;
}
.faqlist .section.dark .content {
  padding: 15px !important;
}

/* Ensuring consistency across all FAQ sections and preventing style overwriting */
.bodycontent .workspace .faqlist .section.dark,
.faqlist .section.dark {
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background-color: rgba(10, 20, 30, 0.7) !important;
  border-left: 4px solid #00afef !important;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.storm-calendar-workspace {
  background-color: rgba(255, 255, 255, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.storm-calendar-workspace .menubar {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 10px;
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .storm-calendar-workspace .menubar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}
.storm-calendar-workspace .menubar .heading {
  font-size: 30px;
  font-weight: 200;
}
@media (max-width: 600px) {
  .storm-calendar-workspace .menubar .buttons {
    margin-top: 5px;
    width: 100%;
  }
}
.storm-calendar-workspace .menubar .buttons .button {
  background-color: #007BB7;
  padding: 5px 10px;
}
@media (max-width: 600px) {
  .storm-calendar-workspace .menubar .buttons .button {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
.storm-calendar-workspace .menubar .switcher > * {
  cursor: pointer;
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: center;
  align-self: center;
}
@media (max-width: 600px) {
  .storm-calendar-workspace .menubar .switcher {
    margin-top: 5px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
.storm-calendar-workspace > .content {
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
@media (max-width: 600px) {
  .storm-calendar-workspace > .content {
    padding: 5px;
  }
}
.storm-calendar-workspace > .content > .storm-calendar-month {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
@media (max-width: 600px) {
  .storm-calendar-workspace > .content > .storm-calendar-month .storm-calendar-week {
    min-height: 50px;
  }
}
.storm-calendar-workspace > .content > .storm-calendar-day {
  width: 100%;
}
.storm-calendar-week {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
.storm-calendar-day {
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0.5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.storm-calendar-day .heading {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-color: rgba(255, 255, 255, 0.1);
}
.storm-calendar-day .heading.Mealheading {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}
.storm-calendar-day .heading.Mealheading .number {
  background-color: transparent;
  color: black;
  border-bottom-left-radius: 5px;
}
.storm-calendar-day .heading > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.storm-calendar-day .heading .title {
  font-size: 10px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding-left: 5px;
  color: #003367;
}
.storm-calendar-day .heading .title.phone {
  height: 20px;
  font-size: 16px;
  text-align: center;
  padding: 0;
}
.storm-calendar-day .heading .number {
  padding: 3px;
  background-color: #0A0A0A;
  min-width: 30px;
  color: white;
  text-align: center;
  border-bottom-left-radius: 5px;
}
.storm-calendar-day .content {
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow-y: auto;
}
@media (max-width: 600px) {
  .storm-calendar-day .content {
    min-height: 42px;
  }
}
.storm-calendar-day .content .other {
  cursor: pointer;
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  overflow-y: auto;
}
.storm-calendar-day.ghost {
  opacity: 0.5;
}
.storm-calendar-day.today {
  background-color: rgba(255, 255, 255, 0.7);
}
.storm-calendar-day.micro {
  text-align: center;
  padding: 10px;
  min-height: 0 !important;
  cursor: pointer;
}
.storm-calendar-day.micro.available {
  color: #AFEF00;
}
@media (min-width: 600px) {
  .storm-calendar-day:hover {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
@media (max-width: 1024px) {
  .storm-calendar-day:active {
    background-color: rgba(255, 255, 255, 0.5);
  }
}
.storm-calendar-month {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.storm-calendar-month .storm-calendar-week {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  min-height: 100px;
}
@media (max-width: 600px) {
  .storm-calendar-month .weekDays {
    overflow: hidden;
  }
}
.storm-calendar-month .weekDays > * {
  padding: 5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 600px) {
  .storm-calendar-month .weekDays > * {
    display: block;
    visibility: hidden;
  }
}
.storm-calendar-month .weekDays > *:first-letter {
  visibility: visible;
}
.storm-calendar-year .yearmonth {
  padding: 5px;
}
@media (max-width: 600px) {
  .storm-calendar-year .yearmonth {
    width: 100%;
  }
}
.storm-calendar-year .yearmonth .today {
  background-color: #00afef;
}
.storm-calendar-year .yearmonth .today:hover {
  -webkit-filter: brightness(120%);
  filter: brightness(120%);
}
.storm-calendar-year .yearmonth .title {
  cursor: pointer;
  font-size: 20px;
  font-weight: 300;
  color: white;
}
@media (min-width: 600px) {
  .storm-calendar-year .yearmonth .title:hover {
    color: #00afef;
  }
}
@media (max-width: 1024px) {
  .storm-calendar-year .yearmonth .title:active {
    color: #00afef;
  }
}
.storm-calendar-year .yearmonth .storm-calendar-week {
  min-height: auto;
}
.storm-calendar-year .yearmonth .weekDays > * {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.2);
  padding: 5px;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.feed-item {
  background-color: #0A0A0A;
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  border-left: 5px #00afef solid;
  border-right: 5px #00afef solid;
  margin-top: 5px;
}
.feed-item .meta {
  color: rgba(0, 175, 239, 0.5);
  font-size: 11px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.feed-item .info {
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 5px;
}
.feed-item .content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.feed-item:nth-child(even) {
  background-color: #0A0A0A !important;
}
.feed-item > .fa {
  text-align: center;
  min-width: 70px;
  color: white;
  font-size: 30px;
  -ms-flex-item-align: center;
  align-self: center;
  opacity: 0.2;
}
.feed-item .fa-star {
  cursor: pointer;
  font-size: 20px !important;
}
.feed-item .fa-star:hover {
  color: #00afef !important;
  opacity: 1 !important;
}
.feed-item .starred {
  opacity: 1 !important;
}
.feed-item .tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
.feed-item .tags .tag {
  background-color: #919191;
  border-radius: 5px;
  font-size: 10px;
  padding: 1px 10px;
  margin-left: 2px;
  color: white;
}

/**
	@component Checkmark
	@theme spaceport
 */
/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.checkmark-wrapper {
  width: 200px;
  height: 200px;
}
@media (max-width: 600px) {
  .checkmark-wrapper {
    margin: 0 auto;
    width: 150px;
    height: 150px;
  }
}
.checkmark-wrapper .checkmark {
  stroke: #AFEF00;
  stroke-dashoffset: 745.7485351563;
  stroke-dasharray: 745.7485351563;
  -webkit-animation: dash 2s ease-out forwards;
  animation: dash 2s ease-out forwards;
}
@keyframes dash {
  0% {
    stroke-dashoffset: 745.7485351563;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.paymentOption {
  min-height: 75px;
  min-width: 300px;
  max-width: 300px;
  color: white;
  border: solid 2px #00afef;
  border-left-width: 15px;
  cursor: pointer;
  text-select: none;
  text-decoration: none;
  margin: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.paymentOption:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 600px) {
  .paymentOption {
    min-width: 99%;
  }
}
.paymentOption img {
  -ms-flex-item-align: center;
  align-self: center;
}
.paymentOption > .info {
  padding: 10px 10px;
}
.paymentOption .balance {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 10px;
}
.paymentOption .balance > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.paymentOption .balance .amount {
  font-size: 24px;
}
.paymentOption .balance .info {
  opacity: 0.3;
  font-size: 13px;
  padding-left: 10px;
}
.paymentOption > .fa-spin {
  color: white;
  font-size: 20px;
  width: auto !important;
}
.paymentOption.notallowed {
  background: rgba(255, 47, 47, 0.2);
  border-color: #FF2F2F;
  cursor: none;
}
.paymentOption.notallowed > .name {
  background: rgba(255, 47, 47, 0.2);
}
.paymentOption > .name {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 51, 103, 0.4)), to(rgb(0, 51, 103)));
  background-image: linear-gradient(180deg, rgba(0, 51, 103, 0.4), rgb(0, 51, 103));
  color: white;
  padding: 20px 15px;
}
.paymentOption .ozowLoading {
  display: none;
}

.yc-auto-shown-popup {
  z-index: 999;
  position: fixed;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.placeholder > .elements > .button, #iframeContainer .button, #iframeContainerChat .button, #iframePDF .button, .bodycontent .workspace .button, .bodycontent .workspace a.button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  background-color: #007bb7;
  color: #FFFFFF;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
.placeholder > .elements > .selected.button, #iframeContainer .selected.button, #iframeContainerChat .selected.button, #iframePDF .selected.button, .bodycontent .workspace .selected.button {
  background-color: #003367;
}
.placeholder > .elements > .disabled.button, #iframeContainer .disabled.button, #iframeContainerChat .disabled.button, #iframePDF .disabled.button, .bodycontent .workspace .disabled.button {
  opacity: 0.5;
  cursor: default;
}
@media (min-width: 600px) {
  .placeholder > .elements > .button:not(.disabled):hover, #iframeContainer .button:not(.disabled):hover, #iframeContainerChat .button:not(.disabled):hover, #iframePDF .button:not(.disabled):hover, .bodycontent .workspace .button:not(.disabled):hover {
    background-color: #00afef;
  }
}
@media (max-width: 1024px) {
  .placeholder > .elements > .button:active, #iframeContainer .button:active, #iframeContainerChat .button:active, #iframePDF .button:active, .bodycontent .workspace .button:active {
    background-color: #00afef;
  }
}
.placeholder > .elements > .button .icon, #iframeContainer .button .icon, #iframeContainerChat .button .icon, #iframePDF .button .icon, .bodycontent .workspace .button .icon {
  background-color: #003367;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.placeholder > .elements > .button .icon .fa, #iframeContainer .button .icon .fa, #iframeContainerChat .button .icon .fa, #iframePDF .button .icon .fa, .bodycontent .workspace .button .icon .fa {
  padding: 10px;
  font-size: 14px;
  -ms-flex-item-align: center;
  align-self: center;
  width: 36px !important;
  min-width: 36px;
}
@media (max-width: 600px) {
  .placeholder > .elements > .bottom.button, #iframeContainer .bottom.button, #iframeContainerChat .bottom.button, #iframePDF .bottom.button, .bodycontent .workspace .bottom.button {
    width: 100%;
    margin-top: 10px;
  }
}
.placeholder > .elements > .button span, #iframeContainer .button span, #iframeContainerChat .button span, #iframePDF .button span, .bodycontent .workspace .button span {
  padding: 10px;
  -ms-flex-item-align: center;
  align-self: center;
  font-weight: 400;
  font-size: 14px;
  color: white;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.placeholder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  width: 100%;
  color: white;
}
.placeholder > .icon, .placeholder > .text {
  margin: 5px;
  text-align: center;
}
.placeholder > .icon {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.placeholder > .icon .fa {
  font-size: 40px;
  width: auto !important;
}
.placeholder > .text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: 300;
  font-size: 16px;
}
.placeholder > .subText {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-weight: 300;
  text-align: center;
  font-size: 12px;
  color: grey;
}
.placeholder > .elements {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 20px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.placeholder.pad {
  margin-top: 5px;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.imageCropper > .savingBusy {
  width: 300px;
  height: 300px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (max-width: 600px) {
  .imageCropper > .savingBusy {
    width: 100%;
  }
}
.imageCropper > .savingBusy > .loaderIcon {
  margin-bottom: 10px;
  font-size: 32px;
}
.imageCropper > .savingBusy > .busyText {
  font-weight: 300;
}
.imageCropper > .cropperContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.imageCropper > .cropperContainer > .cropperImage {
  background-color: white;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .imageCropper > .cropperContainer > .cropperImage {
    max-width: 100%;
  }
}
.imageCropper > .cropperContainer > .button {
  height: 50px;
  text-align: center;
  margin-top: 2px;
  background-color: rgba(10, 10, 10, 0.5);
}
.imageCropper > .cropperContainer > .button > span {
  font-size: 17px;
  font-weight: 400;
}
.imageCropper > .currentImage {
  background-color: transparent;
  background-size: cover;
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}
@media (max-width: 600px) {
  .imageCropper > .currentImage {
    width: 300px !important;
    height: 188px !important;
    max-height: 40vw;
  }
}
.imageCropper > .currentImage > .dropZone {
  width: 100%;
  height: 100%;
  border: none;
  max-width: 100%;
}
.imageCropper > .currentImage > .dzu-dropzone {
  width: 100%;
  height: 100%;
  border: none;
  max-width: 100%;
  overflow: auto;
}
.imageCropper > .currentImage > .dzu-dropzone .dzu-inputLabel {
  font-size: 14px;
  color: white;
  text-shadow: 0 0 10px #003367, 0 0 10px #0a0a0a;
  opacity: 0.9;
  font-weight: bold !important;
  margin: 0 5px;
  text-align: center;
}
.imageCropper > .currentImage > .dzu-dropzone .dzu-inputLabelWithFiles {
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0;
  background-color: unset;
  color: white;
  opacity: 0.9;
  text-shadow: 0 0 10px #003367, 0 0 10px #0a0a0a;
  font-weight: bold !important;
}
.imageCropper > .currentImage > .dzu-dropzone .dzu-submitButtonContainer {
  display: none;
}
.imageCropper > .registerAvatar {
  width: 150px !important;
  height: 193px !important;
  max-height: 100vw;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .imageCropper > .registerAvatar {
    width: 130px !important;
    height: 167px !important;
  }
}
@media (max-width: 600px) {
  .imageCropper > .registerAvatar {
    width: 130px !important;
    height: 167px !important;
  }
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@-webkit-keyframes float {
  0% {
    -webkit-transform: rotate(-2deg);
  }
  50% {
    -webkit-transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
  }
}
@keyframes float {
  0% {
    -webkit-transform: rotate(-2deg);
  }
  50% {
    -webkit-transform: rotate(2deg);
  }
  100% {
    -webkit-transform: rotate(-2deg);
  }
}
.chariot-tooltip {
  padding: 15px !important;
}

.tooltip-container {
  position: relative;
  display: block;
}
.tooltip-container .tooltip {
  position: absolute;
  right: -170px;
  width: 150px;
  z-index: 10;
}
.tooltip-container .tooltip .arrow-box {
  cursor: pointer;
  -webkit-animation: float 3s ease infinite;
  animation: float 3s ease infinite;
  position: relative;
  background: #0A0A0A;
  border: 3px solid #FF9F2F;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
  -webkit-box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  box-shadow: 0 0 2px rgba(10, 10, 10, 0.5);
  margin-top: -5px;
}
.tooltip-container .tooltip .arrow-box:after, .tooltip-container .tooltip .arrow-box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.tooltip-container .tooltip .arrow-box:after {
  border-color: rgba(10, 10, 10, 0);
  border-right-color: #0A0A0A;
  border-width: 10px;
  margin-top: -10px;
}
.tooltip-container .tooltip .arrow-box:before {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #FF9F2F;
  border-width: 13px;
  margin-top: -13px;
}

.tooltip-container.bottom .tooltip .arrow-box:after, .tooltip-container.bottom .tooltip .arrow-box:before {
  top: -30px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  width: 30px;
  right: 50%;
  border-width: 14px;
}
.tooltip-container.bottom .tooltip .arrow-box:before {
  margin-top: -15px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.tooltip-container:has(.tooltip) {
  opacity: 1;
  -webkit-box-shadow: 3px 3px 2px 0px #FF9F2F;
  box-shadow: 3px 3px 2px 0px #FF9F2F;
  -webkit-transition: -webkit-box-shadow 1s;
  transition: -webkit-box-shadow 1s;
  transition: box-shadow 1s;
  transition: box-shadow 1s, -webkit-box-shadow 1s;
}

.tooltip-container:not(:has(.tooltip)) {
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: -webkit-box-shadow 1s;
  transition: -webkit-box-shadow 1s;
  transition: box-shadow 1s;
  transition: box-shadow 1s, -webkit-box-shadow 1s;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.barcodeScanner .dropZone {
  background: rgba(10, 10, 10, 0.5);
  min-height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}
@media (max-width: 600px) {
  .barcodeScanner .dropZone {
    width: 100%;
  }
}
.barcodeScanner .usage {
  color: white;
  font-weight: 300;
  margin-top: 10px;
  font-size: 12px;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.dateSelector {
  padding: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 50%;
}
.dateSelector > .year, .dateSelector > .month, .dateSelector > .day, .dateSelector > .hour, .dateSelector > .minute, .dateSelector > .storm-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  padding: 3px;
  font-weight: 500;
  background-color: #00486e;
  text-align: center;
  color: white;
  min-width: 85px;
  cursor: pointer;
  border-radius: 10px;
}
.dateSelector > .storm-button {
  width: 100%;
  max-width: 500px;
  margin-left: 10px;
  margin-bottom: 0;
  -webkit-transition: background 100ms ease;
  transition: background 100ms ease;
  background-color: #AFEF00 !important;
  padding: 6px 5px;
  color: #00486e;
}
.dateSelector > .storm-button:active {
  background-color: rgba(0, 175, 239, 0.2);
}
.dateSelector > .year, .dateSelector > .month, .dateSelector > .day, .dateSelector > .hour, .dateSelector > .minute {
  width: 50%;
  margin-right: 5px;
  border: 1px solid #556591;
}
.dateSelector > .year:last-of-type, .dateSelector > .month:last-of-type, .dateSelector > .day:last-of-type, .dateSelector > .hour:last-of-type, .dateSelector > .minute:last-of-type {
  -webkit-box-shadow: none;
  box-shadow: none;
}
@media (max-width: 1024px) {
  .dateSelector {
    min-width: 100%;
  }
}
@media (max-width: 600px) {
  .dateSelector {
    min-width: 100%;
  }
  .dateSelector > .year, .dateSelector > .month, .dateSelector > .day, .dateSelector > .hour, .dateSelector > .minute, .dateSelector > .storm-button {
    display: inline-block !important;
    width: calc(33.33% - 2px);
    padding: 5px 5px 5px 5px;
    font-size: 14px;
    margin-bottom: 2px;
    margin-right: 4px;
    margin-left: 0;
  }
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.fieldSet {
  border: 0;
}
.fieldSet :disabled {
  opacity: 0.5;
}

.storm-form input[type=dateTime-local], .storm-form input[type=color], .storm-form input[type=text], .storm-form input[type=number], .storm-form input[type=tel], .storm-form input[type=password], .storm-form textarea, .storm-form input[type=date], .storm-form input[type=time], .storm-form input[type=button] {
  background-color: #3b4567;
  color: white;
  padding: 8px 16px;
  font-size: 17px;
  font-weight: 200;
  outline: none;
  border-radius: 10px;
  display: block !important;
  width: 300px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 1px transparent;
  border-left: solid 4px transparent;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  max-width: 100%;
  margin: 3px;
}
.storm-form input[value=Submit][type=dateTime-local], .storm-form input[value=Submit][type=color], .storm-form input[value=Submit][type=text], .storm-form input[value=Submit][type=number], .storm-form input[value=Submit][type=tel], .storm-form input[value=Submit][type=password], .storm-form textarea[value=Submit], .storm-form input[value=Submit][type=date], .storm-form input[value=Submit][type=time], .storm-form input[value=Submit][type=button] {
  border-radius: 0px !important;
  background-color: #b6c204;
  color: black;
  margin-top: 10px;
}
.storm-form input[value="Delete and Donate"][type=dateTime-local], .storm-form input[value="Delete and Donate"][type=color], .storm-form input[value="Delete and Donate"][type=text], .storm-form input[value="Delete and Donate"][type=number], .storm-form input[value="Delete and Donate"][type=tel], .storm-form input[value="Delete and Donate"][type=password], .storm-form textarea[value="Delete and Donate"], .storm-form input[value="Delete and Donate"][type=date], .storm-form input[value="Delete and Donate"][type=time], .storm-form input[value="Delete and Donate"][type=button] {
  border-radius: 0px !important;
  background-color: #b6c204;
  color: black;
  margin-top: 10px;
}
.storm-form input[value=Delete][type=dateTime-local], .storm-form input[value=Delete][type=color], .storm-form input[value=Delete][type=text], .storm-form input[value=Delete][type=number], .storm-form input[value=Delete][type=tel], .storm-form input[value=Delete][type=password], .storm-form textarea[value=Delete], .storm-form input[value=Delete][type=date], .storm-form input[value=Delete][type=time], .storm-form input[value=Delete][type=button] {
  border-radius: 0px !important;
  background-color: #b6c204;
  color: black;
  margin-top: 10px;
}
.storm-form input[value=Deactivate][type=dateTime-local], .storm-form input[value=Deactivate][type=color], .storm-form input[value=Deactivate][type=text], .storm-form input[value=Deactivate][type=number], .storm-form input[value=Deactivate][type=tel], .storm-form input[value=Deactivate][type=password], .storm-form textarea[value=Deactivate], .storm-form input[value=Deactivate][type=date], .storm-form input[value=Deactivate][type=time], .storm-form input[value=Deactivate][type=button] {
  border-radius: 0px !important;
  background-color: #b6c204;
  color: black;
  margin-top: 10px;
}
.storm-form input[value=Login][type=dateTime-local], .storm-form input[value=Login][type=color], .storm-form input[value=Login][type=text], .storm-form input[value=Login][type=number], .storm-form input[value=Login][type=tel], .storm-form input[value=Login][type=password], .storm-form textarea[value=Login], .storm-form input[value=Login][type=date], .storm-form input[value=Login][type=time], .storm-form input[value=Login][type=button] {
  border-radius: 0px !important;
  background-color: #b6c204;
  color: black;
  margin-top: 10px;
}
.storm-form input[value="Start Demo"][type=dateTime-local], .storm-form input[value="Start Demo"][type=color], .storm-form input[value="Start Demo"][type=text], .storm-form input[value="Start Demo"][type=number], .storm-form input[value="Start Demo"][type=tel], .storm-form input[value="Start Demo"][type=password], .storm-form textarea[value="Start Demo"], .storm-form input[value="Start Demo"][type=date], .storm-form input[value="Start Demo"][type=time], .storm-form input[value="Start Demo"][type=button] {
  border-radius: 0px !important;
  background-color: #b6c204 !important;
  color: black !important;
  margin-top: 10px !important;
}
.storm-form input[type=dateTime-local]::-webkit-input-placeholder, .storm-form input[type=color]::-webkit-input-placeholder, .storm-form input[type=text]::-webkit-input-placeholder, .storm-form input[type=number]::-webkit-input-placeholder, .storm-form input[type=tel]::-webkit-input-placeholder, .storm-form input[type=password]::-webkit-input-placeholder, .storm-form textarea::-webkit-input-placeholder, .storm-form input[type=date]::-webkit-input-placeholder, .storm-form input[type=time]::-webkit-input-placeholder, .storm-form input[type=button]::-webkit-input-placeholder {
  color: white;
  font-size: 13px;
  opacity: 0.7;
}
.storm-form input[type=dateTime-local]::-moz-placeholder, .storm-form input[type=color]::-moz-placeholder, .storm-form input[type=text]::-moz-placeholder, .storm-form input[type=number]::-moz-placeholder, .storm-form input[type=tel]::-moz-placeholder, .storm-form input[type=password]::-moz-placeholder, .storm-form textarea::-moz-placeholder, .storm-form input[type=date]::-moz-placeholder, .storm-form input[type=time]::-moz-placeholder, .storm-form input[type=button]::-moz-placeholder {
  color: white;
  font-size: 13px;
  opacity: 0.7;
}
.storm-form input[type=dateTime-local]:-ms-input-placeholder, .storm-form input[type=color]:-ms-input-placeholder, .storm-form input[type=text]:-ms-input-placeholder, .storm-form input[type=number]:-ms-input-placeholder, .storm-form input[type=tel]:-ms-input-placeholder, .storm-form input[type=password]:-ms-input-placeholder, .storm-form textarea:-ms-input-placeholder, .storm-form input[type=date]:-ms-input-placeholder, .storm-form input[type=time]:-ms-input-placeholder, .storm-form input[type=button]:-ms-input-placeholder {
  color: white;
  font-size: 13px;
  opacity: 0.7;
}
.storm-form input[type=dateTime-local]::-ms-input-placeholder, .storm-form input[type=color]::-ms-input-placeholder, .storm-form input[type=text]::-ms-input-placeholder, .storm-form input[type=number]::-ms-input-placeholder, .storm-form input[type=tel]::-ms-input-placeholder, .storm-form input[type=password]::-ms-input-placeholder, .storm-form textarea::-ms-input-placeholder, .storm-form input[type=date]::-ms-input-placeholder, .storm-form input[type=time]::-ms-input-placeholder, .storm-form input[type=button]::-ms-input-placeholder {
  color: white;
  font-size: 13px;
  opacity: 0.7;
}
.storm-form input[type=dateTime-local]::placeholder, .storm-form input[type=color]::placeholder, .storm-form input[type=text]::placeholder, .storm-form input[type=number]::placeholder, .storm-form input[type=tel]::placeholder, .storm-form input[type=password]::placeholder, .storm-form textarea::placeholder, .storm-form input[type=date]::placeholder, .storm-form input[type=time]::placeholder, .storm-form input[type=button]::placeholder {
  color: white;
  font-size: 13px;
  opacity: 0.7;
}
.storm-form input[type=dateTime-local]:focus, .storm-form input[type=color]:focus, .storm-form input[type=text]:focus, .storm-form input[type=number]:focus, .storm-form input[type=tel]:focus, .storm-form input[type=password]:focus, .storm-form textarea:focus, .storm-form input[type=date]:focus, .storm-form input[type=time]:focus, .storm-form input[type=button]:focus {
  border: solid 1px #00afef;
  border-left: solid 4px #00afef;
  background-color: rgba(0, 175, 239, 0.3);
}
@media (max-width: 600px) {
  .storm-form input[type=dateTime-local], .storm-form input[type=color], .storm-form input[type=text], .storm-form input[type=number], .storm-form input[type=tel], .storm-form input[type=password], .storm-form textarea, .storm-form input[type=date], .storm-form input[type=time], .storm-form input[type=button] {
    font-size: 20px;
    width: 100%;
    padding: 10px 20px;
  }
}

.storm-form input[type=button] {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.storm-form input[type=button]:hover {
  background-color: rgba(0, 175, 239, 0.4);
}
@media (max-width: 600px) {
  .storm-form input[type=button] {
    -webkit-appearance: none;
  }
}

input[type=checkbox] {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.4))), -webkit-gradient(linear, left top, right top, from(#FF9F2F), color-stop(50%, #FF9F2F), color-stop(50%, #AFEF00), to(#AFEF00)) !important;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)), linear-gradient(to right, #FF9F2F 0%, #FF9F2F 50%, #AFEF00 50%, #AFEF00 100%) !important;
  background-size: 100% 100%, 200% 100% !important;
  /*background-position: 0 0, $padding 0 !important;*/
  cursor: pointer;
  height: 20px;
  padding-right: 40px;
  width: 60px !important;
  -webkit-appearance: none;
  -webkit-transition: 0.4s cubic-bezier(0, 0, 0, 0.99);
  transition: 0.4s cubic-bezier(0, 0, 0, 0.99);
  min-width: 0;
  padding: 0px;
  -webkit-box-sizing: border-box !important;
  box-sizing: border-box !important;
  border-radius: 3px !important;
  overflow: hidden;
  outline: none;
}
input[type=checkbox]:focus {
  border-left: none;
}
input[type=checkbox]:after {
  border-radius: 2px;
  background: #6a7cb9;
  content: "";
  display: block;
  height: 18px;
  left: 0;
  position: relative;
  top: 0;
  width: 20px !important;
  border: solid 1px rgba(0, 0, 0, 0.5);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 1px, transparent 1px, transparent 6px);
  background-size: 4px 4px;
}
input[type=checkbox]:checked {
  background-position: 0 0, 58px 0 !important;
  padding-left: 38px !important;
  padding-right: 0 !important;
}

.commentForm input {
  display: block;
}

.storm-form .form-checkbox {
  color: rgba(255, 255, 255, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
}
.storm-form .form-checkbox span {
  padding: 4px;
}
.storm-form .form-checkbox > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.storm-form textarea, .storm-form input {
  background-color: #3b4567;
}
.storm-form .row {
  /*background-color: rgba(white,0.1);*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-item-align: start;
  align-self: flex-start;
}
.storm-form .row input[type=text], .storm-form .row input[type=number], .storm-form .row textarea {
  background-color: rgba(255, 255, 255, 0.05);
}
.storm-form .row:hover label {
  opacity: 1;
}
.storm-form .row.inline {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  min-height: 40px;
}
.storm-form .row.inline label {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.storm-form .row.inline > * {
  -ms-flex-item-align: center;
  align-self: center;
}
.storm-form label {
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  color: white;
  font-size: 11px;
  padding-bottom: 4px;
  padding-top: 4px;
  opacity: 0.5;
}
.storm-form label.form-label {
  width: 300px;
  margin: auto;
  color: white;
  font-size: 14px;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  -webkit-transition: none;
  transition: none;
  opacity: 1;
}
.storm-form input[type=date], .storm-form input[type=time] {
  font-weight: 300;
  padding: 8px 16px;
}
.storm-form input[type=date]::-webkit-calendar-picker-indicator, .storm-form input[type=time]::-webkit-calendar-picker-indicator {
  -webkit-filter: invert(1);
  filter: invert(1);
}
.storm-form input[type=text]:after, .storm-form input[type=number]:after, .storm-form input[type=tel]:after, .storm-form input[type=password]:after, .storm-form textarea:after {
  border-radius: 10px;
  background: #FF2F2F;
  content: "";
  display: block;
  height: 30px;
  left: -10px;
  position: relative;
  top: 0;
  width: 40px !important;
}
.storm-form input[type=color] {
  padding: 0;
}
.storm-form input[type=color]:after {
  display: none;
}
.storm-form input[type=dateTime-local] {
  color: white;
}
.storm-form input[type=dateTime-local]::-webkit-calendar-picker-indicator {
  -webkit-filter: invert(1);
  filter: invert(1);
  color-scheme: light;
  color: white;
}
.storm-form input[type=dateTime-local]:not(:has(::-webkit-calendar-picker-indicator)) {
  color: blue;
}
@media (max-width: 600px) {
  .storm-form input[type=dateTime-local] {
    height: 40px !important;
    display: inline-block;
  }
  .storm-form input[type=dateTime-local]:before {
    color: white;
    content: attr(placeholder) !important;
    width: 100%;
    font-size: 17px;
    font-family: monospace, "Helvetica Mono", serif;
    font-weight: 400;
  }
  .storm-form input[type=dateTime-local].android:after, .storm-form input[type=dateTime-local].ios:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
    content: "\f073";
    font-size: 20px;
    margin-top: -40px;
    right: 20px;
    position: absolute;
    opacity: 0.8;
    color: white;
    -ms-flex-item-align: center;
    align-self: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 20px;
    padding-right: 10px;
    pointer-events: none;
  }
  .storm-form input[type=dateTime-local].ios:after {
    margin-top: -22px;
  }
  .storm-form input[type=dateTime-local].full:before {
    width: 0 !important;
    content: "" !important;
  }
  .storm-form input[type=dateTime-local].full:after {
    margin-top: -22px;
  }
}
.storm-form input[type=radio] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  -moz-appearance: none;
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0 10px 0px 0px;
  float: left;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  -webkit-transform: translateY(-0.075em);
  -ms-transform: translateY(-0.075em);
  transform: translateY(-0.075em);
  color: white;
  cursor: pointer;
  display: grid;
  place-content: center;
}
.storm-form input[type=radio]::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms transform ease-in-out;
  transition: 120ms transform ease-in-out, 120ms -webkit-transform ease-in-out;
  -webkit-box-shadow: inset 1em 1em var(--form-control-color);
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: white;
}
.storm-form input[type=radio]:checked::before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.storm-form .storm-radioGroup {
  margin: 15px 5px;
}
.storm-form .storm-radioGroup .storm-radioLabel {
  font-size: 14px;
}

.input-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.input-wrapper.error {
  background-color: rgba(255, 47, 47, 0.3);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.input-wrapper.error .label {
  opacity: 1;
}
.input-wrapper.error input:focus {
  border-color: #FF9F2F !important;
  background: rgba(255, 159, 47, 0.3) !important;
}
.input-wrapper img {
  margin: 3px;
}
.input-wrapper .qrReader .storm-button[type=button] {
  width: 140px;
  padding: 8px 16px;
  margin: 3px;
  height: 40px;
}
@media (max-width: 600px) {
  .input-wrapper .qrReader .storm-button[type=button] {
    width: 120px;
    height: auto;
    padding: 10px 16px;
  }
}

.enrollLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  color: white;
  font-size: 18px;
  height: auto;
  width: 200px;
}
@media (max-width: 600px) {
  .enrollLabel {
    width: 130px;
    min-width: 130px;
  }
}
.enrollLabel.sm {
  width: 110px !important;
  min-width: 110px !important;
}
.enrollLabel.lg {
  width: 100% !important;
  font-size: 16px;
  height: auto !important;
}

@media (max-width: 600px) {
  .add-card-label {
    width: 60px !important;
    min-width: 60px !important;
  }
}

.enrollErrorLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  color: white;
  font-size: 14px;
  height: 20px;
  margin-top: -6px;
  margin-bottom: 10px;
  margin-left: 10px;
}
@media (max-width: 600px) {
  .enrollErrorLabel {
    margin-left: 10px;
    font-size: 12px;
    margin-top: 0;
  }
}
@media (max-width: 1024px) {
  .enrollErrorLabel {
    margin-top: 1px;
  }
}

.enrollLabelHeader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5px;
  color: white;
  font-size: 20px;
  height: 40px;
  width: 300px;
}

.enrollInput {
  min-width: 0;
  background-color: #3b4567;
  color: white;
  font-size: 17px;
  font-weight: 200;
  outline: none;
  border-radius: 10px;
  display: block !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  margin: 3px;
}
@media (max-width: 600px) {
  .enrollInput {
    min-width: 192px;
    width: 100%;
  }
}
.enrollInput.sm {
  width: calc(100% - 110px) !important;
}
.enrollInput .select {
  margin: 0;
}
.enrollInput .select select {
  font-size: 18px;
  width: 300px;
}
.enrollInput.dateTime {
  width: 300px;
}
.enrollInput.registerCorrect {
  border: none;
  display: inline-block !important;
  width: 60px;
  padding: 0;
  margin: 5px 0 0 0;
  height: 20px;
  min-width: 60px;
}
.enrollInput.registerCorrect input[type=checkbox] {
  padding: 0 0 0 0px;
  height: 20px;
  width: 60px !important;
  margin: 0;
}
.enrollInput.registerImage {
  width: 150px;
  min-width: 150px;
}
@media (max-width: 600px) {
  .enrollInput.registerImage {
    width: 130px;
    min-width: 130px;
  }
}
.enrollInput input[type=color] {
  width: 300px;
}
.enrollInput .storm-field:focus {
  margin: 0;
  padding: 11px 16px 11px 19px;
}
@media (max-width: 600px) {
  .enrollInput .storm-field:focus {
    padding: 14px 20px 14px 23px;
  }
}

.storm-group .spaceportTF {
  display: block;
  margin-right: -15px;
}
@media (max-width: 600px) {
  .storm-group .spaceportTF {
    width: 100%;
  }
}
.storm-group .spaceportTF input[type=text] {
  width: 300px;
}
.storm-group .spaceportTF .storm-field {
  display: inline-block !important;
}
.storm-group .spaceportTF .icon {
  display: inline-block !important;
  position: relative;
  right: 30px;
  margin-right: -20px;
}

.select {
  border-radius: 0;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #3b4567;
  border-radius: 10px;
  color: white;
  padding: 5px 10px 3px 10px;
  max-width: 300px;
  width: 300px;
  margin: 3px;
}
@media (max-width: 600px) {
  .select {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: 0;
    margin-bottom: 5px;
    width: calc(100% - 5px);
    max-width: 100%;
  }
}
@media (max-width: 1024px) {
  .select {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin-right: 0px;
    margin-bottom: 5px;
  }
}
.select:after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  content: "\f0dc";
  font-size: 14px;
  margin-left: -25px;
  opacity: 0.5;
  color: white;
  -ms-flex-item-align: center;
  align-self: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 20px;
  padding-right: 10px;
  pointer-events: none;
}
@media (max-width: 600px) {
  .select:after {
    font-size: 16px;
  }
}
.select:hover:after {
  opacity: 1;
}
.select select {
  cursor: pointer;
  background: transparent;
  padding: 3px 0 5px 10px;
  font-size: 16px;
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  color: white;
  outline: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: 30px;
  -ms-flex-item-align: center;
  align-self: center;
  margin-right: -20px;
  width: 100%;
}
@media (max-width: 600px) {
  .select select {
    min-width: 100px;
    max-width: 100%;
  }
}

.selectLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 15px 5px 5px 5px;
  color: white;
  min-width: 200px;
  font-size: 16px !important;
}
.selectLabel.big {
  font-size: 18px !important;
}

.workspace .searchDiv {
  position: relative;
  height: 41px;
  top: -15px;
}
.workspace .searchDiv .storm-field.search {
  font-size: 18px;
  padding: 8px 8px 8px 23px;
  width: 100%;
  min-width: 250px;
  background-color: rgba(0, 0, 0, 0.2);
  font-weight: 200;
  outline: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  border: 2px solid rgba(0, 0, 0, 0);
  max-width: 300px;
  margin: 5px;
  background-color: #3b4567;
  display: inline-block !important;
  color: white;
  border-radius: 10px;
}
@media (max-width: 600px) {
  .workspace .searchDiv .storm-field.search {
    max-width: calc(100% - 7px);
  }
}
.workspace .searchDiv .storm-field.searchLabel {
  display: inline;
  position: absolute;
  top: 18px;
}
.workspace .searchDiv .storm-field.searchLabel:before {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900;
  content: "\f002";
  font-size: 14px;
  margin-left: -10px;
  margin-right: -35px;
  opacity: 0.5;
  color: white;
  -ms-flex-item-align: center;
  align-self: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 20px;
  padding-right: 10px;
  pointer-events: none;
}

.remove_button {
  background-color: darkred !important;
}

.touchpos-items input.search {
  font-size: 18px;
  padding: 8px;
  width: 100%;
  min-width: 250px;
  background-color: rgba(0, 0, 0, 0.2);
  color: black;
  font-weight: 200;
  outline: none;
  margin-bottom: 2px;
  display: block !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  border: 2px solid rgba(0, 0, 0, 0);
}
@media (max-width: 600px) {
  .touchpos-items input.search {
    padding-left: 5px;
    padding-right: 4px;
    min-width: 205px;
    max-width: 350px;
  }
}
.touchpos-items .searchText {
  min-width: 0;
  background-color: inherit;
  color: white;
  font-size: 17px;
  font-weight: 200;
  outline: none;
  display: block !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  margin: 3px;
  height: 100%;
  max-width: 400px;
}
.touchpos-items #search {
  width: 400px;
  max-width: 100%;
}

.icon-size {
  width: 24px;
  height: 24px;
}

.chariot-tooltip-icon {
  font-size: 32px;
  color: #555;
}

.chariot-mark:not(.question-mark) {
  border: 3px solid rgb(255, 255, 64) !important;
  -webkit-transition: 0.1s border;
  transition: 0.1s border;
}

.notification-optins .storm-list .item {
  width: auto;
  margin: 5px auto;
}
.notification-optins .storm-list .item label {
  font-size: 20px;
  padding-left: 5px;
  display: inline-block;
}

#view-help-options {
  position: relative;
  background-color: transparent;
  border: 0;
  outline: none;
}

.view-help-button > .icon, .view-help-button > span {
  color: rgba(255, 255, 255, 0.8) !important;
}

.view-help-list {
  position: absolute;
  top: 36px;
  right: 0;
  min-width: 250px;
  padding: 5px;
  background-color: #242424;
  display: none;
}

.view-list-menu {
  display: block !important;
}

.view-help-list > li {
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  list-style-type: none;
  padding-top: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
}

.view-help-list > li:hover {
  background-color: rgba(255, 255, 255, 0.8);
  color: #555;
}

.invalid {
  color: rgba(255, 0, 0, 0.9);
}

.valid {
  color: rgba(0, 255, 0, 0.9);
}

.padded-arrow {
  left: 218px !important;
}

.mobile-tooltip-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

.mobile-tooltip-mark {
  border: 3px solid rgb(255, 255, 64) !important;
  -webkit-transition: 0s border !important;
  transition: 0s border !important;
}

.mobile-tooltip {
  opacity: 0;
  position: absolute;
  background-color: white;
  color: #999;
  padding: 10px;
  text-align: center;
  -webkit-box-shadow: 0 0 5px 0 rgba(31, 28, 28, 0.3);
  box-shadow: 0 0 5px 0 rgba(31, 28, 28, 0.3);
  border: 1px solid #ddd;
  z-index: 22;
}
.mobile-tooltip-arrow {
  position: absolute;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transform-origin: 50% 50% 0;
  -ms-transform-origin: 50% 50% 0;
  transform-origin: 50% 50% 0;
  background-color: white;
}
.mobile-tooltip-arrow-top {
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  -webkit-box-shadow: -2px -2px 4px 0 rgba(31, 28, 28, 0.1);
  box-shadow: -2px -2px 4px 0 rgba(31, 28, 28, 0.1);
}
.mobile-tooltip-arrow-bottom {
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  -webkit-box-shadow: 2px 2px 4px 0 rgba(31, 28, 28, 0.1);
  box-shadow: 2px 2px 4px 0 rgba(31, 28, 28, 0.1);
}
.mobile-tooltip .mobile-tooltip-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #555;
}
.mobile-tooltip .mobile-tooltip-text {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 10px;
  color: #999;
}
.mobile-tooltip .mobile-tooltip-button-container {
  width: 100%;
  position: relative;
  padding-top: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mobile-tooltip .mobile-tooltip-button-container .mobile-tooltip-counter {
  color: #555;
  font-size: 14px;
  font-family: inherit;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}
.mobile-tooltip .mobile-tooltip-button-container .mobile-tooltip-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 5px;
  border: 0;
  color: #FFF;
  font-size: 16px;
  cursor: pointer;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mobile-tooltip .mobile-tooltip-button-container .mobile-tooltip-button.mobile-tooltip-next, .mobile-tooltip .mobile-tooltip-button-container .mobile-tooltip-button.mobile-tooltip-done {
  background-color: #78A300;
}
.mobile-tooltip .mobile-tooltip-button-container .mobile-tooltip-button.mobile-tooltip-skip {
  background-color: #A9A9A9;
}

.mobile-tooltip-animate {
  opacity: 1;
  -webkit-animation: bounceFadeIn 0.3s ease forwards;
  animation: bounceFadeIn 0.3s ease forwards;
}

.noscroll {
  overflow: hidden;
}

/* Keyframes animation for tooltip bounce and fade in */
@-webkit-keyframes bounceFadeIn {
  0% {
    scale: 0;
  }
  70% {
    scale: 1.05;
  }
  85% {
    scale: 0.95;
  }
  100% {
    scale: 1;
  }
}
@keyframes bounceFadeIn {
  0% {
    scale: 0;
  }
  70% {
    scale: 1.05;
  }
  85% {
    scale: 0.95;
  }
  100% {
    scale: 1;
  }
}
.newRegister-pwd {
  position: relative;
  width: 306px;
  margin: 0 auto;
}
.newRegister-pwd p {
  width: 300px;
  text-align: center;
  background: red;
  color: white;
  border-radius: 5px;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  -webkit-transition: height 0.3s, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: height 0.3s, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: height 0.3s, transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: height 0.3s, transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
  height: 0;
}
.newRegister-pwd .showRule {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-animation: anim 0.3s ease-in-out;
  animation: anim 0.3s ease-in-out;
  height: 100px;
  padding: 5px;
  margin-bottom: 5px;
}
.newRegister-pwd span {
  position: absolute;
  right: 15px;
  top: 15px;
}

.enrollInput .newRegister-pwd span {
  top: 10px;
}
.enrollInput .newRegister-pwd input:focus + span {
  top: 12px;
}

#password {
  -webkit-text-security: disc;
  text-security: disc;
}

#verify {
  -webkit-text-security: disc;
  text-security: disc;
}

@-webkit-keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes anim {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.modal1 {
  opacity: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 65px;
  z-index: 100;
  background: inherit;
  visibility: visible;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  -webkit-animation: blur 0.3s ease-in-out;
  animation: blur 0.3s ease-in-out;
}
.modal1 .insideModal {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-animation: anim 0.3s ease-in-out;
  animation: anim 0.3s ease-in-out;
}
.modal1.off {
  visibility: hidden;
  width: 300px;
  text-align: center;
  background: red;
  color: white;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
  opacity: 0;
}
@-webkit-keyframes blur {
  0% {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
  100% {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}
@keyframes blur {
  0% {
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
  100% {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}
@media (prefers-reduced-motion) {
  .modal1 {
    offset-path: none;
  }
}
.modal1 .insideModal {
  width: 460px;
  max-height: 380px;
  top: calc(50% - 200px);
  overflow-y: auto;
  position: relative;
  left: calc(50% - 160px);
  background-color: #0A0A0A;
  padding: 20px;
  border-radius: 15px;
}
@media (max-width: 600px) {
  .modal1 .insideModal {
    width: 320px;
  }
}
.modal1 .insideModal .deactivation-info {
  position: relative;
  bottom: 0px;
}
.modal1 .insideModal h3 {
  color: #FFFFFF;
  white-space: pre-wrap;
  text-align: center;
}
.modal1 .insideModal p {
  color: #FFFFFF;
  white-space: pre-wrap;
  text-align: center;
}
.modal1 .insideModal span {
  color: #FFFFFF;
  white-space: pre-wrap;
  text-align: center;
}
.modal1 .X {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 20px !important;
  border: 1px solid black;
  font-size: 22px;
  cursor: pointer;
  top: 5px;
  left: 125px;
}
.modal1 .label {
  color: white;
  text-align: center;
  margin-bottom: 40px;
}
.modal1 .modalButton {
  margin-bottom: 20px;
  margin-top: 10px;
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
}
.modal1 .modalButton.deactivate {
  background: #9c0027 !important;
}

.modal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 60px;
  z-index: 100;
  background: inherit;
  -webkit-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal.off {
  -webkit-transition: opacity 0s ease-out;
  transition: opacity 0s ease-out;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
@supports (offset-rotate: 0deg) {
  .modal.off {
    offset-distance: 100%;
  }
}
@media (prefers-reduced-motion) {
  .modal {
    offset-path: none;
  }
}
.modal .insideModal {
  width: 320px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
  top: calc(50% - 200px);
  left: calc(50% - 160px);
  background-color: #0A0A0A;
  padding: 20px;
  border-radius: 15px;
}
@media (max-width: 600px) {
  .modal .insideModal {
    width: 320px;
  }
}
.modal .insideModal h3 {
  color: #FFFFFF;
  white-space: pre-wrap;
  text-align: center;
}
.modal .insideModal p {
  color: #FFFFFF;
  white-space: pre-wrap;
  text-align: center;
}
.modal .insideModal span {
  color: #FFFFFF;
  white-space: pre-wrap;
  text-align: center;
}
.modal .insideModal textarea {
  border-radius: 5px;
  height: 140px;
  margin-bottom: 20px;
}
.modal .X {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 20px !important;
  border: 1px solid black;
  font-size: 22px;
  cursor: pointer;
  top: 5px;
  left: 125px;
}
.modal .label {
  color: white;
  text-align: center;
  margin-bottom: 40px;
}
.modal .modalButton {
  margin-bottom: 10px;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
#iframePolicy {
  display: none;
  height: 100%;
}

.accept-cookies-layer {
  width: 100%;
  height: calc(100% - 65px);
  position: absolute;
  display: block;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 999;
}
@media (max-width: 600px) {
  .accept-cookies-layer {
    height: 100%;
  }
}
.accept-cookies-layer .controls {
  position: absolute;
  bottom: 0;
  height: 55px;
  width: 100%;
  background-color: black;
  z-index: 99;
  text-align: center;
}
.accept-cookies-layer .controls h4 {
  color: #fff;
  padding-top: 12px;
  padding-left: 12px;
}
.accept-cookies-layer .controls h4 .policy-link {
  color: rgba(0, 123, 183, 0.9);
}
.accept-cookies-layer .controls h4 .accept-link {
  color: #b6c204;
}

/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.checklist {
  margin-top: 20px;
}
.checklist .title {
  font-size: 22px;
}
.checklist .checklistItem {
  width: 100%;
  padding: 10px;
  display: inline-block;
}
.checklist .checklistItem .label {
  display: inline-block;
  width: 280px;
  float: left;
}
@media (max-width: 1024px) {
  .checklist .checklistItem .label {
    width: 90%;
  }
}
@media (max-width: 600px) {
  .checklist .checklistItem .label {
    width: calc(100% - 40px);
  }
}
.checklist .checklistItem .icon {
  float: left;
}
.checklist .checklistItem .icon.green {
  color: #AFEF00;
}
.checklist .checklistItem .icon.red {
  color: #FF2F2F;
  padding-right: 20px;
}
.checklist .checklistItem .button {
  float: left;
}
@media (max-width: 825px) {
  .checklist .checklistItem .button {
    float: left;
    width: 100%;
  }
}
@media (max-width: 1024px) {
  .checklist .checklistItem .button {
    margin-top: 10px;
    float: left;
    width: 48%;
  }
}
@media (max-width: 600px) {
  .checklist .checklistItem .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
  }
}
.checklist .checklistItem .docs .button:not(:first-child) {
  margin-left: 10px;
}
@media (max-width: 825px) {
  .checklist .checklistItem .docs .button:not(:first-child) {
    margin-left: 0px;
  }
}
@media (max-width: 1024px) {
  .checklist .checklistItem .docs .button:not(:first-child) {
    margin-left: 10px;
  }
}
@media (max-width: 600px) {
  .checklist .checklistItem .docs .button:not(:first-child) {
    margin-left: 0px;
    margin-top: 0px;
  }
}
.checklist .checklistItem .docs .button:not(:first-child) span {
  font-size: 13px;
}
.checklist .statusBar {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.checklist .statusBar .status {
  display: inline-block;
  width: 25%;
}
.checklist .statusBar .status.red {
  color: #FF2F2F;
}
.checklist .statusBar .status.yellow {
  color: #FFF700;
}
.checklist .statusBar .status.orange {
  color: #FF9F2F;
}
.checklist .statusBar .status.green {
  color: #00D27F;
}
.checklist .statusBar .status.blue {
  color: #007BB7;
}
.checklist .statusProgress {
  width: auto;
  border: 1px solid white;
  border-radius: 10px;
  margin: 10px 20px 10px 0;
}
.checklist .statusProgress .currentStatus {
  height: 30px;
  background-color: #32CD32;
  border-radius: 10px;
}
.checklist a {
  margin: 10px;
}
.checklist .requestButton {
  margin: 0 10px;
}

.errorAlert {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url("../plugin/Eezipay/media/backdrop-new.jpg");
  background-size: cover;
  background-position: center;
  z-index: 9999;
}
.errorAlert .contentWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1rem;
  width: 80%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid #3a393b;
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(39, 36, 38)), to(rgb(59, 55, 55)));
  background: linear-gradient(180deg, rgb(39, 36, 38) 0%, rgb(59, 55, 55) 100%);
  border-radius: 12px;
  -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.errorAlert .heading {
  color: #e53935;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
  text-align: center;
}
.errorAlert .message {
  background-color: #f8f9fa;
  padding: 1.2rem;
  border-radius: 6px;
  width: 100%;
  color: #333;
  font-family: monospace;
  font-size: 1rem;
  border: 1px solid #e0e0e0;
  margin-bottom: 2rem;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 50vh;
  overflow-y: auto;
}
.errorAlert .button {
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  cursor: pointer;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
  font-weight: 500;
}
.errorAlert .button:hover {
  background-color: #1976d2;
}
/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@-webkit-keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.profilesContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 10px;
  margin-top: 10px;
}
@media (max-width: 600px) {
  .profilesContainer {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}
.profilesContainer > .profileCard {
  margin: 5px;
  width: 380px;
  max-width: 100%;
  border: 1px solid #61709e;
  border-radius: 10px;
  border-left: 7px solid #00afef;
}
.profilesContainer > .profileCard > .contentContainer .button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.profilesContainer > .profileCard > .contentContainer .button span {
  font-size: 13px;
}
.profilesContainer > .profileCard > .contentContainer .button:nth-child(2) {
  min-height: 34px;
}

.family .search {
  margin-right: 10px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: 0s;
  transition: 0s;
}
@media (max-width: 600px) {
  .family .search {
    margin: 10px auto 5px auto;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
.family .search > input {
  font-size: 18px;
  font-weight: 300;
  color: white;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  outline: none;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
@media (max-width: 600px) {
  .family .search > input {
    margin-top: 10px;
  }
}
.family .search > .button {
  width: 200px;
}
@media (max-width: 600px) {
  .family .search > .button {
    margin-top: 10px;
    width: 100%;
  }
}
.family .userLabel {
  margin: 0 0 20px 0px;
  cursor: pointer;
  width: 364px;
  display: inline-block;
  max-width: 100%;
}

.controlsContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 600px) {
  .controlsContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.controlsContainer > .icontab {
  margin-right: 10px;
}
.controlsContainer > .icontab .tab .fa {
  font-size: 20px;
  color: #F3F3F3;
  padding: 0;
}
@media (max-width: 600px) {
  .controlsContainer > .icontab .tab .fa {
    font-size: 15px;
  }
}
.controlsContainer > .icontab .selected {
  border-bottom-width: 2px !important;
}
.controlsContainer > .icontab .selected .fa {
  color: white;
}
@media (max-width: 600px) {
  .controlsContainer > .button {
    width: 100%;
    margin-bottom: 2px;
  }
}
.controlsContainer .transactionDates {
  max-width: 50%;
  margin: 0 auto 0 0;
}
@media (max-width: 600px) {
  .controlsContainer .transactionDates {
    max-width: 100%;
    margin: 0 auto 10px auto;
  }
}

/*.profilesContainer.small {
    & > .profileCard {
        & > .contentContainer {
            & > .tagBar, & > .description, & > .optionBar {
                display: none;
            }
        }
    }
}*/
.profileCard {
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: 100%;
}
.profileCard > .avatar {
  width: 140px;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  top: calc(50% - 98px);
  cursor: pointer;
  margin: 8px;
}
.profileCard > .avatar > .contentContainer {
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  bottom: -145px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media (max-width: 600px) {
  .profileCard > .avatar > .contentContainer {
    text-align: center;
    display: inline-block !important;
  }
}
.profileCard > .avatar > .contentContainer > .metaBar {
  font-size: 12px;
  display: inline-block;
  width: 100%;
}
.profileCard > .avatar > .contentContainer > .metaBar > *:first-child {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.profileCard > .avatar > .contentContainer > .metaBar .inviteDiv span {
  padding: 5px 12px;
  background: #FF9F2F;
  font-size: 13px;
}
.profileCard > .avatar > .contentContainer > .metaBar .acceptDiv {
  font-size: 13px;
}
.profileCard > .avatar > .contentContainer > .metaBar .acceptDiv .button:first-of-type {
  margin-bottom: 5px;
}
.profileCard > .avatar > .contentContainer > .metaBar > span {
  padding: 5px 12px;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.profileCard > .avatar > .contentContainer > .metaBar > span.invite {
  background: orange;
  font-size: 13px;
  height: 35px;
  padding: 10px;
}
.profileCard > .avatar > .contentContainer > .metaBar > span.parent {
  background: #00afef;
  height: 35px;
  padding: 10px;
}
.profileCard > .avatar > .contentContainer > .metaBar > span.child {
  background: rgb(192, 0, 255);
  height: 35px;
  padding: 10px;
}
.profileCard > .avatar > .contentContainer > .metaBar > span.friend {
  background: #AFEF00;
  height: 35px;
  padding: 10px;
}
.profileCard > .avatar > .contentContainer > .metaBar > span.coparent {
  background: #00D27F;
  height: 35px;
  padding: 10px;
}
.profileCard > .avatar > .contentContainer > .metaBar > span.seen {
  font-weight: 300;
  color: white;
  background: inherit;
  padding: 5px;
  -ms-flex-negative: 1;
  flex-shrink: 1;
  -webkit-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
}
.profileCard > .avatar > .contentContainer > .metaBar .familyButtons {
  display: inline-block;
  width: 100%;
}
.profileCard > .avatar > .contentContainer > .metaBar .familyButtons .button {
  width: 100%;
}
.profileCard > .avatar > .contentContainer > .metaBar .familyButtons .childAdded {
  font-size: 14px;
  padding: 9px;
  text-align: center;
  background: #FF9F2F;
  height: 35px;
}
.profileCard > .avatar > .contentContainer > .metaBar .familyButtons > *:not(:last-child) {
  margin-bottom: 3px;
}
.profileCard > .avatar > .contentContainer > .tagBar {
  font-size: 13px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 3px;
}
.profileCard > .avatar > .contentContainer > .tagBar > .tag {
  color: white;
  border-radius: 5px;
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  white-space: nowrap;
  padding: 1px 5px;
  margin: 3px;
}
.profileCard > .avatar > .contentContainer > .tagBar > .tag:after {
  border-radius: 5px;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.35)), to(rgba(255, 255, 255, 0.1)));
  background: linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.1));
}
.profileCard > .avatar > .contentContainer > .description {
  padding: 5px;
  color: rgb(170, 170, 170);
  font-size: 13px;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.profileCard > .avatar > .contentContainer:has(.familyButtons) {
  bottom: -89px;
}
.profileCard > .avatar > .contentContainer:has(.inviteDiv) {
  bottom: -140px;
}
.profileCard > .avatar > .contentContainer:has(.acceptDiv) {
  bottom: -71px;
}
.profileCard > .flexColumn {
  width: calc(100% - 155px);
  margin: 8px;
}
.profileCard > .flexColumn > .name {
  padding: 4px 0 8px 4px;
  min-height: 10px;
  color: white;
}
.profileCard > .flexColumn > .name > span {
  margin: 0;
  font-weight: 300;
  display: inline-block;
}
.profileCard > .flexColumn > .name > span:first-of-type {
  margin-right: 5px;
  font-weight: 500;
}
.profileCard > .flexColumn > .name > .similar {
  float: right;
  padding: 1px;
  background-color: darkorange;
  color: floralwhite;
  position: relative;
  bottom: 2px;
}
.profileCard > .flexColumn > .email {
  padding: 4px 0 8px 4px;
  color: white;
}
.profileCard > .flexColumn > .email > span {
  margin: 0;
  font-weight: 300;
  font-family: "Roboto Mono", "Courier New";
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
.profileCard > .flexColumn > .email > .similar {
  float: right;
  padding: 1px;
  background-color: darkorange;
  color: floralwhite;
}
.profileCard > .flexColumn > .school {
  padding: 4px 4px 8px 4px;
  color: white;
}
.profileCard > .flexColumn > .school > span {
  margin: 0;
  font-weight: 300;
  font-family: "Roboto Mono", "Courier New";
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
.profileCard > .flexColumn > .school > .similar {
  float: right;
  padding: 1px;
  background-color: darkorange;
  color: floralwhite;
}
.profileCard > .flexColumn > .grade {
  padding: 4px 0 8px 4px;
  color: white;
}
.profileCard > .flexColumn > .grade > span {
  margin: 0;
  font-weight: 300;
  font-family: "Roboto Mono", "Courier New";
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}
.profileCard > .flexColumn > .grade > .similar {
  float: right;
  padding: 1px;
  background-color: darkorange;
  color: floralwhite;
}
.profileCard > .flexColumn > .loginBlock {
  display: inline-block;
  position: relative;
  padding: 2px 8px;
}
.profileCard > .flexColumn > .loginBlock .seen {
  margin-right: 15px;
  display: inline-block;
  width: 100%;
}
.profileCard > .flexColumn > .loginBlock > .optionBar {
  display: inline-block;
  color: white;
  margin: 4px 0;
}
.profileCard > .flexColumn > .loginBlock > .optionBar > .button {
  margin-left: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.profileCard > .flexColumn > .loginBlock > .optionBar > .button > span {
  padding: 5px 10px;
}
.profileCard > .flexColumn > .loginBlock > .optionBar > .button:last-child {
  background: #007BB7;
}
.profileCard > .flexColumn > .loginBlock > .optionBar > .button:hover {
  background: #00afef;
}

.matches .profileCard .avatar .email span {
  width: auto;
}
.matches .profileCard .avatar .email span:not(.similar) {
  width: calc(100% - 40px);
}

/* Modern Profile Card Styles */
.profileCard.modern-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; /* Changed from row to column layout */
  background: #1e2130; /* Dark background */
  border-radius: 12px;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  padding: 16px;
  margin-bottom: 16px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  overflow: hidden;
  border: none;
  border-left: none;
  /* Content wrapper for avatar and user details */
  /* Avatar styling */
  /* User details container */
  /* Name styling */
  /* Email styling */
  /* Info rows (school, grade) */
  /* User role badge styling */
  /* Status indicators */
  /* Status tags (parent, child, etc) */
  /* Friend buttons */
  /* Similarity indicators */
  /* For smaller screens */
}
.profileCard.modern-card:hover {
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.profileCard.modern-card .contentContainer .acceptDiv {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.profileCard.modern-card .content-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row; /* Ensure horizontal layout */
  margin-bottom: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; /* Vertically center the items */
}
.profileCard.modern-card .contentContainer .metaBar {
  margin-bottom: 5px;
}
.profileCard.modern-card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin-right: 20px;
  position: relative;
  border: 3px solid #2c3042; /* Dark border */
  -ms-flex-negative: 0;
  flex-shrink: 0;
  overflow: hidden;
  top: auto;
  margin: 0 20px 0 0; /* Add right margin to create spacing */
}
.profileCard.modern-card .user-details {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-left: 5px;
}
.profileCard.modern-card .name-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  margin-bottom: 4px;
}
.profileCard.modern-card .fullname {
  font-size: 18px;
  font-weight: 600;
  color: #e0e0e0; /* Light text color for dark background */
}
.profileCard.modern-card .firstname {
  margin-right: 5px;
}
.profileCard.modern-card .email-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 8px;
}
.profileCard.modern-card .email-address {
  font-size: 14px;
  color: #a0a0a0; /* Lighter grey for secondary text */
  opacity: 0.9;
}
.profileCard.modern-card .info-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 6px;
  font-size: 14px;
  color: #b8b8b8; /* Light grey text */
}
.profileCard.modern-card .info-icon {
  margin-right: 8px;
  color: #4a90e2; /* Bright blue for icons */
  width: 18px;
  text-align: center;
}
.profileCard.modern-card .user-role {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 8px;
}
.profileCard.modern-card .user-role .role-badge {
  font-size: 12px;
  background-color: #ff7043; /* Orange color for role */
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 5px;
}
.profileCard.modern-card .login-status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: auto; /* Push to bottom */
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}
.profileCard.modern-card .login-status .status-indicator .seen {
  margin-left: 10px;
}
.profileCard.modern-card .status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin: 4px;
  text-transform: uppercase;
  color: white;
}
.profileCard.modern-card .status-tag.parent {
  background-color: #1976d2; /* Deeper blue */
}
.profileCard.modern-card .status-tag.child {
  background-color: #8e44ad; /* Deep purple */
}
.profileCard.modern-card .status-tag.friend {
  background-color: #2e7d32; /* Deep green */
}
.profileCard.modern-card .status-tag.coparent {
  background-color: #0097a7; /* Deep teal */
}
.profileCard.modern-card .familyButtons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.profileCard.modern-card .button.add-child, .profileCard.modern-card .button.add-parent, .profileCard.modern-card .button.add-coparent {
  background-color: #0097a7;
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 12px;
}
.profileCard.modern-card .button.accept-request {
  background-color: #2e7d32;
}
.profileCard.modern-card .button.cancel-invite, .profileCard.modern-card .button.remove-request {
  background-color: #c62828;
}
.profileCard.modern-card .button.login-as-child {
  background-color: #1976d2;
}
.profileCard.modern-card .childAdded {
  background-color: #313846; /* Dark grey background */
  color: #b0b0b0; /* Light text */
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
}
.profileCard.modern-card .similar {
  margin-left: 8px;
  font-size: 12px;
  background-color: #ff9800; /* Orange */
  color: #1a1a1a; /* Near black text for contrast */
  padding: 2px 6px;
  border-radius: 4px;
}
@media (max-width: 576px) {
  .profileCard.modern-card .content-wrapper {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row; /* Keep horizontal layout on mobile */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .profileCard.modern-card .avatar {
    margin-right: 10px; /* Slightly smaller margin on mobile */
    margin-bottom: 0;
    width: 60px; /* Smaller avatar on mobile */
    height: 60px;
  }
  .profileCard.modern-card .familyButtons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@-webkit-keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@media (max-width: 600px) {
  .workspace.account-settings .menu {
    display: none !important;
  }
}
.workspace.account-settings .notification-info {
  position: inherit;
}
.workspace.account-settings .section {
  /*background-color: rgba(black,0.7) !important;*/
}
.workspace.account-settings .section .content {
  padding: 20px;
}
@media (max-width: 600px) {
  .workspace.account-settings .section .content {
    padding: 10px;
  }
}
.workspace.account-settings hr {
  margin-bottom: 20px;
}
.workspace.account-settings .tab-scroll-container {
  position: relative;
  width: 100%;
  will-change: transform;
}
.workspace.account-settings .tab-scroll-container .tab-scroll-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 10;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
  cursor: pointer;
  pointer-events: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
.workspace.account-settings .tab-scroll-container .tab-scroll-arrow.visible {
  opacity: 0.8;
  pointer-events: auto;
}
.workspace.account-settings .tab-scroll-container .tab-scroll-arrow.visible:hover {
  opacity: 1;
}
.workspace.account-settings .tab-scroll-container .tab-scroll-arrow i {
  color: white;
  font-size: 16px;
}
.workspace.account-settings .tab-scroll-container .tab-scroll-arrow.left {
  left: -10px;
  background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-left: 10px;
}
.workspace.account-settings .tab-scroll-container .tab-scroll-arrow.right {
  right: -10px;
  background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding-right: 10px;
}
@media (max-width: 600px) {
  .workspace.account-settings .icontab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-box-pack: inherit;
    -ms-flex-pack: inherit;
    justify-content: inherit;
    background: none;
    margin: 0 -10px;
    padding: 0 10px;
    padding-bottom: 15px;
    scroll-behavior: smooth;
    -ms-scroll-snap-type: x proximity;
    scroll-snap-type: x proximity;
    position: relative;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .workspace.account-settings .icontab::-webkit-scrollbar {
    display: none;
  }
  .workspace.account-settings .icontab .tab {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    min-width: 80px;
    margin: 0 5px;
    height: auto;
    scroll-snap-align: center;
  }
  .workspace.account-settings .icontab .tab:first-child {
    margin-left: 0;
    padding-left: 10px;
  }
  .workspace.account-settings .icontab .tab:last-child {
    margin-right: 20px;
  }
  .workspace.account-settings .icontab .tab .icon {
    font-size: 18px;
  }
  .workspace.account-settings .icontab .tab .label {
    font-size: 12px;
    white-space: nowrap;
  }
  .workspace.account-settings .icontab .tab.selected {
    position: relative;
    z-index: 1;
  }
}
.workspace.account-settings .subsection {
  padding: 10px;
  color: white;
  overflow: hidden;
  max-width: 100%;
}
.workspace.account-settings .subsection.small {
  max-width: 340px;
}
@media (max-width: 600px) {
  .workspace.account-settings .subsection {
    padding: 0;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-bottom: 20px;
    text-align: center;
  }
}
.workspace.account-settings .subsection .name {
  font-size: 22px;
  padding-bottom: 10px;
}
.workspace.account-settings .subsection .desc {
  font-size: 13px;
  padding-bottom: 10px;
  opacity: 0.5;
}
@media (max-width: 600px) {
  .workspace.account-settings .subsection .children {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (max-width: 600px) {
  .workspace.account-settings .subsection .children > * {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
  }
}
@media (max-width: 600px) {
  .workspace.account-settings .subsection table {
    width: 100%;
  }
}
.workspace.account-settings .subsection h4 {
  padding-bottom: 10px;
}
.workspace.account-settings .subsection h3 {
  padding-bottom: 10px;
}
.workspace.account-settings .subsection h5 {
  font-weight: normal;
  padding-bottom: 10px;
}
.workspace.account-settings .subsection label {
  font-weight: 300 !important;
}
.workspace.account-settings .subsection .select {
  margin: 3px 3px 8px 3px;
}
.workspace.account-settings .subsection .uploadDocs .imageCropper .currentImage {
  margin-left: 0;
}
@media (max-width: 600px) {
  .workspace.account-settings .subsection .uploadDocs .imageCropper .currentImage {
    margin-left: auto;
  }
}
.workspace.account-settings .verify {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px;
}
.workspace.account-settings .verify > * {
  display: inline-block;
}
@media (max-width: 600px) {
  .workspace.account-settings .imageCropper .currentImage {
    width: 250px !important;
    height: 322px !important;
    max-height: 100vw;
  }
}
@media (max-width: 600px) {
  .workspace.account-settings .imageCropper .currentImage.IDbook {
    width: 250px !important;
    height: 170px !important;
    max-height: 100vw;
  }
}
@media (max-width: 600px) {
  .workspace.account-settings .imageCropper .currentImage.POA {
    width: 250px !important;
    height: 354px !important;
    max-height: 100vw;
  }
}
@media (max-width: 600px) {
  .workspace.account-settings .imageCropper .currentImage.other {
    width: 230px !important;
    height: 297px !important;
    max-height: 100vw;
  }
}
.workspace.account-settings #balanceAmount {
  display: inline-block !important;
  width: auto;
  max-width: calc(100% - 100px);
}
.workspace.account-settings .amount-field i {
  font-size: 20px;
  opacity: 0.5;
  color: white;
  font-weight: 200;
}
.workspace.account-settings .deleteButton {
  background-color: #FF2F2F;
  font-weight: bold;
}
.workspace.account-settings .deleteButton.noMargin {
  margin: 0 10px;
}
.workspace.account-settings #modal1 .label, .workspace.account-settings #modal2 .label {
  margin-bottom: 20px;
}
.workspace.account-settings #modal1 .modalButton, .workspace.account-settings #modal2 .modalButton {
  margin: 0 7px 0 10px !important;
}
.workspace.account-settings #modal1 .storm-radioLabel, .workspace.account-settings #modal2 .storm-radioLabel {
  font-weight: 400 !important;
  font-size: 14px;
}
/*------------------ OPTIONS ------------------- */
/* !==== Primary Colours */
/* Off white temp */
/* !==== Secondary Colours */
/* Warning */
/* Error/Failure */
/* Success */
/* Yellow */
/*$color_primary: rgb(192,255,0); //GREEN*/
/*$color_primary: rgb(0,192,255); //BLUE*/
/* !==== This is the main colour ====! */
/* !==== This is the main colour of the desktop sidebars ====!*/
/* !==== Color for the header ====! */
/* !==== Color for the footer ====! */
/* !==== Size of a phone ====! */
/**
	Function for figuring out if something is light or dark
*/
@-webkit-keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fade_in_show {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
@keyframes fade_out_hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.sectionsContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
@media (max-width: 1024px) {
  .sectionsContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .sectionsContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.sectionsContainer > .leftSection {
  background: rgba(0, 0, 0, 0.5);
}
.sectionsContainer > .leftSection .button .fa {
  color: white;
}
.sectionsContainer > .leftSection > .profileCard {
  padding: 20px 30px;
}
@media (max-width: 1024px) {
  .sectionsContainer > .leftSection > .profileCard {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
@media (max-width: 600px) {
  .sectionsContainer > .leftSection > .profileCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .sectionsContainer > .leftSection > .profileCard > .avatar {
    background-size: cover;
    background-position: center 25%;
  }
}
.sectionsContainer > .leftSection > .profileCard > .contentContainer {
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .sectionsContainer > .leftSection > .profileCard > .contentContainer {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
.sectionsContainer > .leftSection > .profileCard > .contentContainer > .description {
  display: none;
}
@media (max-width: 1024px) {
  .sectionsContainer > .leftSection > .profileCard > .contentContainer > .description {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
  }
}
@media (max-width: 600px) {
  .sectionsContainer > .leftSection > .profileCard > .contentContainer > .description {
    display: none;
  }
}
.sectionsContainer > .leftSection > .profileCard > .contentContainer > .optionBar {
  margin-top: 10px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
@media (max-width: 1024px) {
  .sectionsContainer > .leftSection > .profileCard > .contentContainer > .optionBar {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }
}
.sectionsContainer > .leftSection > .profileCard > .contentContainer > .optionBar > .button {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-top: 2px;
}
.sectionsContainer > .leftSection > .profileCard > .contentContainer .button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.sectionsContainer > .leftSection > .profileCard > .contentContainer .button:nth-child(2) {
  height: 38px;
}
.sectionsContainer > .leftSection > .profileCard > .contentContainer > .metaBar span {
  font-size: 16px;
}
@media (max-width: 600px) {
  .sectionsContainer > .leftSection > .profileCard > .contentContainer > .metaBar span {
    font-size: 14px;
    width: 100%;
  }
}
.sectionsContainer > .rightSection {
  background: rgba(0, 0, 0, 0.3);
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 5px;
}
.sectionsContainer > .rightSection .section {
  margin-top: 0px;
}

.workspace.profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}