@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:200,400,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
body {
  font-family: "Nunito Sans", Verdana, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #333333;
}
body a {
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
body a:hover {
  cursor: pointer;
}
body .uiMessage {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 10px 0;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}
body .uiMessage.green {
  background-color: #05a9bc;
  color: #fff;
}
body .uiMessage.amber {
  background-color: #ffae1b;
}

.pageContainer {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  background-color: #f2f2f2;
}

.sideNavCont {
  width: 200px;
  height: 100vh;
  max-height: 100vh;
  background-color: #eaeaea;
  color: #333333;
  padding: 0;
  margin-bottom: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
}
.sideNavCont .headerLeft {
  background-color: #000;
  padding: 20px 0;
  color: #333333;
  display: inline-block;
  width: 100%;
  text-align: center;
  margin: 0 0 20px;
}
.sideNavCont .headerLeft img {
  max-height: 60px;
  display: inline-block;
  filter: invert(1);
}
.sideNavCont .headerLeft h2 {
  font-size: 1em;
  display: inline-block;
  vertical-align: top;
  margin-top: 7px;
  margin-bottom: 0;
  margin-left: 10px;
}
.sideNavCont .headerLeft a {
  margin: 0;
  padding: 0;
}
.sideNavCont .headerLeft a:hover {
  background: none;
}
.sideNavCont a {
  color: #333333;
  display: inline-block;
  width: 90%;
  margin: 0 0 10px;
  padding: 6px 5%;
  position: relative;
}
.sideNavCont a .orderCount {
  width: 20px;
  height: 20px;
  background-color: #05a9bc;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-size: 13px;
}
.sideNavCont a:hover {
  background-color: rgba(119, 119, 119, 0.2);
}
.sideNavCont form {
  width: 100%;
  margin: 0;
}
.sideNavCont .logoutButton {
  background-color: #d9d9d9;
  color: #333333;
  display: inline-block;
  width: 100%;
  padding: 6px 0;
  border: none;
  transition: all 0.3s ease-in-out;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-size: 1em;
  position: absolute;
  bottom: 0;
  left: 0;
}
.sideNavCont .logoutButton:hover {
  background-color: #bfbfbf;
  cursor: pointer;
}
.sideNavCont .logoutButton:focus {
  outline: none;
}

.mainContainer {
  display: inline-block;
  width: calc(100% - 200px);
  float: right;
  overflow: auto;
  height: 100vh;
  padding: 40px 20px 20px;
  box-sizing: border-box;
}
.mainContainer .pageIntroBox {
  background-color: #e5e5e5;
  position: fixed;
  padding: 10px;
  box-sizing: border-box;
  width: calc(100vw - 200px);
  top: 0;
  right: 0;
  z-index: 999;
}
.mainContainer .pageIntroBox h1 {
  margin: 0;
  color: #333333;
  display: inline-block;
  font-size: 20px;
}
.mainContainer .pageIntroBox h1 small {
  font-size: 14px;
}
.mainContainer .pageIntroBox h1 small a {
  color: #333333;
}
.mainContainer .welcomeBox {
  margin: 10px 0 0;
  display: inline-block;
}
.mainContainer .welcomeBox h2 {
  font-size: 1em;
  font-weight: 400;
}
.mainContainer .welcomeBox h2 a {
  color: #000;
}
.mainContainer .welcomeBox p {
  color: #333333;
}
.mainContainer .welcomeBox a {
  color: #000;
}
.mainContainer .welcomeBox.successMessage a {
  background-color: #000;
  padding: 10px 20px;
  display: inline-block;
  color: #fff;
}
.mainContainer .welcomeBox.successMessage small {
  margin-top: 20px;
  font-style: italic;
  display: inline-block;
}
.mainContainer h1 {
  margin: 0 0 10px;
  font-size: 20px;
}
.mainContainer .tableBox {
  margin: 20px 0 0;
  display: inline-block;
  width: 100%;
  max-height: 60vh;
  overflow-y: scroll;
}
.mainContainer .tableBox.productTable {
  margin-top: 0;
}
.mainContainer .tableBox.header {
  margin-bottom: -20px;
}
.mainContainer .tableBox.header table thead tr td {
  padding: 5px 0 6px;
}
.mainContainer .tableBox table {
  width: 100%;
}
.mainContainer .tableBox table thead {
  background-color: #d9d9d9;
}
.mainContainer .tableBox table thead td {
  padding: 2px 4px;
}
.mainContainer .tableBox table thead td.productStoreImage {
  width: 12%;
}
.mainContainer .tableBox table thead td.productStoreName {
  width: 30%;
}
.mainContainer .tableBox table thead td.productStoreCategory {
  width: 14%;
}
.mainContainer .tableBox table thead td.productStorePrice {
  width: 14%;
}
.mainContainer .tableBox table thead td.productStoreTools {
  width: 15%;
}
.mainContainer .tableBox table tbody tr {
  background-color: #f2f2f2;
}
.mainContainer .tableBox table tbody tr:nth-child(2n) {
  background-color: #eaeaea;
}
.mainContainer .tableBox table tbody tr td {
  padding: 4px 4px;
  font-size: 0.9em;
}
.mainContainer .tableBox table tbody tr td a {
  color: #0074D9;
}
.mainContainer .tableBox table tbody tr td img {
  max-width: 80px;
}
.mainContainer .tableBox table tbody tr .productID {
  width: 5%;
}
.mainContainer .tableBox table tbody tr .productRange {
  width: 15%;
}
.mainContainer .tableBox table tbody tr .productCode {
  width: 15%;
}
.mainContainer .tableBox table tbody tr .productName {
  width: 25%;
}
.mainContainer .tableBox table tbody tr .productPrice {
  width: 15%;
}
.mainContainer .tableBox table tbody tr .productTools {
  width: 10%;
}
.mainContainer .tableBox .editProdBtn {
  padding: 3px 5px;
  background-color: #000;
  color: #fff;
  display: inline-block;
  margin: 3px 0;
  cursor: pointer;
}
.mainContainer .filterBox {
  margin: 20px 20px 0;
}
.mainContainer .filterBox .searchedForBox {
  background-color: gray;
  border: 1px solid #333333;
  display: inline-block;
}
.mainContainer .filterBox .searchedForBox p {
  display: inline-block;
  margin: 5px 10px 5px 5px;
  color: #333333;
}
.mainContainer .filterBox .searchedForBox a {
  display: inline-block;
  margin-right: 10px;
  color: #fff;
  font-size: 12px;
  vertical-align: top;
  margin-top: 10px;
}
.mainContainer .filterBox form {
  margin: 0;
  display: inline-block;
  width: 70%;
  float: left;
}
.mainContainer .filterBox form .productSearch {
  width: 50%;
  padding: 6px 10px;
  display: inline-block;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-size: 14px;
  border: 1px solid #333333;
  margin: 0;
  vertical-align: top;
}
.mainContainer .filterBox form .productSearch:focus {
  outline: none;
}
.mainContainer .filterBox form button {
  border: none;
  background-color: #000;
  color: #fff;
  padding: 10px;
  transition: all 0.3s ease-in-out;
  vertical-align: top;
}
.mainContainer .filterBox form button:hover {
  background-color: black;
  cursor: pointer;
}
.mainContainer .filterBox form .inputWrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.mainContainer .filterBox form .inputWrapper select,
.mainContainer .filterBox form .inputWrapper input {
  margin: 0;
  display: block;
  width: 100%;
  font-weight: 400;
  padding: 4px 20px 4px 6px;
  font-size: 16px;
  border: 1px #333333 solid;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.mainContainer .filterBox form .inputWrapper select:focus,
.mainContainer .filterBox form .inputWrapper input:focus {
  outline: 0;
}
.mainContainer .filterBox form .inputWrapper select {
  border-radius: 0;
  background-color: #fff;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  z-index: 1;
  position: relative;
  display: block;
}
.mainContainer .filterBox form .inputWrapper select:hover {
  cursor: pointer;
}
.mainContainer .filterBox form .inputWrapper .selectArrow {
  position: absolute;
  top: 7px;
  right: 5px;
  z-index: 1;
  font-size: 1em;
}
.mainContainer .filterBox .paginationBox {
  display: inline-block;
  float: right;
  vertical-align: top;
}
.mainContainer .filterBox .paginationBox p {
  margin: 2px 0 0;
}
.mainContainer .filterBox .paginationBox p a,
.mainContainer .filterBox .paginationBox p span {
  background-color: #000;
  padding: 0 10px;
  color: #fff;
}
.mainContainer .filterBox .paginationBox p a:hover,
.mainContainer .filterBox .paginationBox p span:hover {
  background-color: black;
  cursor: pointer;
}
.mainContainer .filterBox .paginationBox p a.disabled,
.mainContainer .filterBox .paginationBox p span.disabled {
  background-color: gray;
}
.mainContainer .filterBox .paginationBox p a.disabled:hover,
.mainContainer .filterBox .paginationBox p span.disabled:hover {
  background-color: #4d4d4d;
  cursor: default;
}
.mainContainer .filterBox .paginationBox p small {
  font-size: 15px;
  margin: 0 10px;
}

.loginOuter {
  display: flex;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.loginOuter.registerPage {
  justify-content: flex-start;
  padding: 60px 0;
  height: auto;
}

.logInBox {
  width: 600px;
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
  padding: 20px 0;
}
.logInBox img {
  max-width: 50%;
  max-height: 100px;
  margin: 10px auto 0;
}
.logInBox h1 {
  color: #333333;
  display: inline-block;
  margin: 20px auto 0;
  font-size: 18px;
  padding: 10px 0;
  background-color: #f2f2f2;
  width: 80%;
}
.logInBox h3 {
  color: #333333;
  display: inline-block;
  text-transform: uppercase;
  margin: 20px auto 0;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 2px solid #333333;
  width: 80%;
}
.logInBox label {
  display: block;
  width: 80%;
  text-align: center;
  margin: 30px auto 0;
  color: #333333;
}
.logInBox textarea {
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  width: 60%;
  resize: vertical;
  margin: 5px 0 0;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.logInBox select {
  border: none;
  border-bottom: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  width: 60%;
  margin: 5px 0 0;
}
.logInBox select:focus {
  outline: none;
}
.logInBox input {
  border: none;
  border-bottom: 1px solid #000;
  padding: 10px;
  margin: 5px 0 0;
  width: 60%;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-size: 14px;
}
.logInBox input:focus {
  outline: none;
}
.logInBox p {
  font-size: 14px;
  max-width: 80%;
  margin: 10px auto;
}
.logInBox p a {
  color: #05a9bc;
  font-size: 16px;
}
.logInBox button {
  background-color: #000;
  color: #fff;
  border: none;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  width: 60%;
  margin: 20px auto 0;
  text-align: center;
  padding: 10px 0;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-size: 14px;
}
.logInBox button img {
  margin: 0 auto;
}
.logInBox button:hover {
  background-color: #5e5e5e;
  cursor: pointer;
}
.logInBox .validationMessage {
  color: #FF4136;
  margin: 10px auto 0;
  font-size: 13px;
}
.logInBox .resetLogin {
  display: block;
  margin: 20px auto 0;
  font-size: 15px;
  cursor: pointer;
}

.loginRegButton {
  width: 600px;
  background-color: #05a9bc;
  color: #fff;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

.loginError {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #FF4136;
  text-align: center;
  color: #fff;
  padding: 10px 0;
}
.loginError.success {
  background-color: #59c866;
}

#product_selector #product_section_ul {
  transition: all 0.3s ease-in-out;
}
#product_selector #product_section_ul.narrow {
  width: 65px;
  max-width: 120px;
}
#product_selector #product_section_ul.narrow .addNewLine {
  display: none;
}
#product_selector #customer_letter_ul .customer_letter.selected h1 {
  color: #000;
}
#product_selector #customer_ul .selected_product {
  background-color: #000;
  color: #fff;
}
#product_selector #product_range_ul {
  width: 0%;
  padding: 0;
}
#product_selector #product_range_ul.visible {
  width: 100%;
  padding: 0 0 0 10px;
}
#product_selector #product_range_ul .rangeHead {
  position: relative;
  background-color: #000;
  padding: 10px;
  margin-bottom: 5px;
  box-sizing: border-box;
}
#product_selector #product_range_ul .rangeHead .product_range h2, #product_selector #product_range_ul .rangeHead .product_type h2 {
  color: #fff;
  margin: 0;
}
#product_selector #product_range_ul .rangeHead #close_range i {
  color: #fff;
}
#product_selector .product_range_text_div {
  line-height: 1;
}
#product_selector #product_ul {
  width: 0%;
  padding: 0;
}
#product_selector #product_ul.visible {
  width: 100%;
  padding: 0 0 0 10px;
}
#product_selector .selected {
  background-color: #000;
  color: #fff;
}

.addNewLine {
  background-color: #000;
}
.addNewLine .product_nested {
  background-color: #000;
}
.addNewLine .product_nested:hover {
  background-color: #000;
  cursor: default;
}

.sitePreview {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  box-sizing: border-box;
}

.column-single {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.column-single .column-child {
  max-width: 100%;
}
.column-double {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.column-double .column-child {
  max-width: 50%;
}
.column-triple {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.column-triple .column-child {
  max-width: 33%;
}
.column-four {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.column-four .column-child {
  max-width: 25%;
}
.column-five {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.column-five .column-child {
  max-width: 20%;
}
.column-six {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.column-child {
  display: inline-flex;
  flex-direction: column;
}
.column-child.column-wide {
  width: 75%;
  max-width: 75%;
}
.column-child.column-thin {
  width: 25%;
  max-width: 25%;
}
.column-child.column-tiny {
  width: 10%;
  max-width: 10%;
}
.column-child.column-stretch {
  width: 98%;
  max-width: 98%;
}
.column-child img {
  max-width: 100%;
  max-height: inherit;
}
.column-fullwidth {
  max-width: 100% !important;
  width: 100%;
}
.column-no-wrap {
  flex-wrap: nowrap !important;
}

.background-navy {
  background-color: #000;
  color: #fff;
}
.background-navy.hover-rule:hover {
  background-color: black;
}
.background-gradient {
  background: #30BEDE;
  color: #fff;
}
.background-gradient-purple {
  background: rgb(84, 31, 191);
  background: -moz-linear-gradient(54deg, rgb(230, 70, 245) 0%, rgb(84, 31, 191) 100%);
  background: -webkit-linear-gradient(54deg, rgb(230, 70, 245) 0%, rgb(84, 31, 191) 100%);
  background: linear-gradient(54deg, rgb(230, 70, 245) 0%, rgb(84, 31, 191) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e646f5", endColorstr="#541fbf", GradientType=1);
  color: #000;
}
.background-gradient-pink {
  background: rgb(255, 42, 188);
  background: -moz-linear-gradient(54deg, rgb(252, 167, 157) 0%, rgb(255, 42, 188) 100%);
  background: -webkit-linear-gradient(54deg, rgb(252, 167, 157) 0%, rgb(255, 42, 188) 100%);
  background: linear-gradient(54deg, rgb(252, 167, 157) 0%, rgb(255, 42, 188) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fca79d", endColorstr="#ff2abc", GradientType=1);
  color: #000;
}
.background-gradient-green {
  background: rgb(116, 202, 42);
  background: -moz-linear-gradient(54deg, rgb(116, 202, 42) 0%, rgb(1, 183, 205) 100%);
  background: -webkit-linear-gradient(54deg, rgb(116, 202, 42) 0%, rgb(1, 183, 205) 100%);
  background: linear-gradient(54deg, rgb(116, 202, 42) 0%, rgb(1, 183, 205) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#74ca2a", endColorstr="#01b7cd", GradientType=1);
  color: #000;
}
.background-gradient-amber {
  background: rgb(255, 120, 0);
  background: -moz-linear-gradient(54deg, rgb(252, 167, 50) 0%, rgb(255, 120, 0) 100%);
  background: -webkit-linear-gradient(54deg, rgb(252, 167, 50) 0%, rgb(255, 120, 0) 100%);
  background: linear-gradient(54deg, rgb(252, 167, 50) 0%, rgb(255, 120, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fca732", endColorstr="#ff7800", GradientType=1);
  color: #000;
}
.background-gradient-red {
  background: rgb(255, 42, 0);
  background: -moz-linear-gradient(54deg, rgb(172, 0, 0) 0%, rgb(255, 42, 0) 100%);
  background: -webkit-linear-gradient(54deg, rgb(172, 0, 0) 0%, rgb(255, 42, 0) 100%);
  background: linear-gradient(54deg, rgb(172, 0, 0) 0%, rgb(255, 42, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fca79d", endColorstr="#ff2a00", GradientType=1);
  color: #000;
}
.background-green {
  background-color: #59c866;
}
.background-green.hover-rule:hover {
  background-color: #35a041;
}
.background-blue {
  background-color: #000;
}
.background-blue.hover-rule:hover {
  background-color: black;
  color: #fff;
}
.background-light-grey {
  background-color: #f2f2f2;
}
.background-light-grey.hover-rule:hover {
  background-color: #cccccc;
}
.background-white {
  background-color: #fff;
  color: #000;
}
.background-white.hover-rule:hover {
  background-color: #f2f2f2;
}

.padding-button {
  padding: 5px 10px;
  max-width: calc(100% - 20px) !important;
}
.padding-mini {
  padding: 5px;
  max-width: calc(100% - 10px) !important;
}
.padding-small {
  padding: 10px;
  max-width: calc(100% - 20px) !important;
}
.padding-medium {
  padding: 25px;
  max-width: calc(100% - 50px) !important;
}
.padding-large {
  padding: 50px;
  max-width: calc(100% - 100px) !important;
}
.padding-vert-mini {
  padding: 5px 0;
}
.padding-vert-small {
  padding: 10px 0;
}
.padding-vert-medium {
  padding: 25px 0;
}
.padding-vert-large {
  padding: 50px 0;
}

.display-inline {
  display: inline-block;
}

.margin-mini {
  margin: 5px 0;
}
.margin-small {
  margin: 10px 0;
}
.margin-medium {
  margin: 25px 0;
}
.margin-large {
  margin: 50px 0;
}
.margin-bottom-small {
  margin-bottom: 10px;
}
.margin-bottom-medium {
  margin-bottom: 25px;
}
.margin-bottom-large {
  margin-bottom: 50px;
}
.margin-right-small {
  margin-right: 10px;
}
.margin-right-medium {
  margin-right: 25px;
}
.margin-right-large {
  margin-right: 50px;
}
.margin-left-small {
  margin-left: 10px;
}
.margin-left-medium {
  margin-left: 25px;
}
.margin-left-large {
  margin-left: 50px;
}

.font-xlarge {
  font-size: 30px;
}
.font-large {
  font-size: 24px;
}
.font-medium {
  font-size: 20px;
}
.font-small {
  font-size: 15px;
}
.font-mini {
  font-size: 13px;
}
.font-uppercase {
  text-transform: uppercase;
}
.font-line {
  text-decoration: line-through;
}
.font-underline {
  text-decoration: underline;
}

.button-blue {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.button-blue-small {
  background-color: #000;
  color: #fff;
  font-size: 13px;
  padding: 5px 10px;
  border: none;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.button-blue-small:hover {
  background-color: black;
  cursor: pointer;
}
.button-blue-small:focus {
  outline: none;
}
.button-blue:hover {
  background-color: black;
  cursor: pointer;
}
.button-blue:focus {
  outline: none;
}
.button-red {
  background-color: #FF4136;
  color: #fff;
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.button-red-small {
  background-color: #FF4136;
  color: #fff;
  font-size: 13px;
  padding: 5px 10px;
  border: none;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.button-red-small:hover {
  background-color: #cf0b00;
  cursor: pointer;
}
.button-red-small:focus {
  outline: none;
}
.button-red:hover {
  background-color: #cf0b00;
  cursor: pointer;
}
.button-red:focus {
  outline: none;
}
.button-green {
  background-color: #59c866;
  color: #fff;
  padding: 10px 20px;
  border: none;
  font-size: 16px;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.button-green:hover {
  background-color: #2f8c3a;
  cursor: pointer;
}
.button-green:focus {
  outline: none;
}
.button-green-small {
  background-color: #59c866;
  color: #fff;
  font-size: 13px;
  padding: 5px 10px;
  border: none;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.button-green-small:hover {
  background-color: #2f8c3a;
  cursor: pointer;
}
.button-green-small:focus {
  outline: none;
}

.hover-green:hover {
  color: #59c866;
}
.hover-teal:hover {
  color: #000;
}
.hover-blue:hover {
  color: #000;
}
.hover-grey:hover {
  color: #333333;
}

.align-center {
  align-items: center;
  justify-content: center;
}
.align-start {
  align-items: stretch;
  justify-content: flex-start;
}
.align-end {
  align-items: stretch;
  justify-content: flex-end;
}
.align-left-center {
  justify-content: center;
  align-items: flex-start;
}

.pointer-hover {
  transition: all 0.3s ease-in-out;
}
.pointer-hover:hover {
  cursor: pointer;
}

.text-area-left {
  text-align: left;
}
.text-area-right {
  text-align: left;
}
.text-area-center {
  text-align: center;
}

.color-white {
  color: #fff;
}
.color-navy {
  color: #000 !important;
}

.item-bottom {
  margin-bottom: 0 !important;
}
.item-top {
  margin-top: 0 !important;
}

.height-xlarge {
  max-height: 500px;
  height: 500px;
}
.height-large {
  max-height: 240px;
  height: 240px;
}
.height-medium {
  max-height: 120px;
  height: 120px;
}
.height-small {
  max-height: 80px;
  height: 80px;
}
.height-mini {
  max-height: 40px;
  height: 40px;
}

.border-blue {
  border: 2px solid #000;
}
.border-blue.hover-rule:hover {
  border: 2px solid black;
}
.border-green {
  border: 2px solid #59c866;
}
.border-green.hover-rule:hover {
  border: 2px solid #2f8c3a;
}
.border-red {
  border: 2px solid #FF4136;
}
.border-red.hover-rule:hover {
  border: 2px solid #cf0b00;
}

.grid-item-four {
  width: calc((100% - 50px) / 4);
  margin-right: 10px;
}
.grid-item-four.has-border {
  width: calc((100% - 50px - 24px) / 4);
}
.grid-item-four:nth-child(4n) {
  margin-right: 0;
}
.grid-item-five {
  width: calc((100% - 50px) / 5);
  margin-right: 10px;
}
.grid-item-five.has-border {
  width: calc((100% - 50px - 24px) / 5);
}
.grid-item-five:nth-child(5n) {
  margin-right: 0;
}
.grid-item-six {
  width: calc((100% - 50px) / 6);
  margin-right: 10px;
}
.grid-item-six.has-border {
  width: calc((100% - 50px - 24px) / 6);
}
.grid-item-six:nth-child(6n) {
  margin-right: 0;
}

.tab-head {
  border-radius: 5px 5px 0 0;
  margin-right: 2px;
  padding: 8px 16px;
  background-color: #000;
  color: #fff;
  position: relative;
}
.tab-head.has-icon {
  padding-right: 20px;
}
.tab-head .tabTypeIcon {
  position: absolute;
  right: 3px;
  top: 3px;
  color: #000;
  font-size: 14px;
}
.tab-head.hover-rule:hover {
  cursor: pointer;
}
.tab-head.tab-inactive {
  background-color: rgba(51, 51, 51, 0.2);
  background: rgba(51, 51, 51, 0.2);
  color: #333333;
}
.tab-item {
  border: 2px solid #000;
  max-width: calc(100% - 4px);
  height: auto;
}

.externalTabProduct {
  margin-top: -4px;
}

.upload-area {
  padding: 10px;
  width: calc(100% - 20px);
}
.upload-area .dropzone {
  width: 100%;
  text-align: center;
  padding: 30px 0;
}
.upload-area .dropzone label {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  display: inline-block;
  z-index: 99;
  position: relative;
}
.upload-area .dropzone label:hover {
  cursor: pointer;
  background-color: black;
}
.upload-area .dropzone label i {
  margin-right: 5px;
}
.upload-area .dropzone p {
  width: calc(100% - 44px);
  padding: 20px;
  border: 2px dashed #000;
  margin: 20px auto 10px;
}

.file {
  width: 100%;
  display: inline-block;
  margin-top: 10px;
  position: relative;
  background: linear-gradient(to right, lightblue 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 1s ease;
}
.file.done {
  background: #fff;
}
.file.done .remove {
  display: inline-block;
}
.file .fileName {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-x: hidden;
  text-align: left;
  width: 60%;
}
.file .remove {
  margin-top: 12px;
  font-weight: 600;
  margin-right: 10px;
  color: #FF4136;
  display: none;
}

select {
  border-radius: 0;
  border: 1px solid #000;
  padding: 3px 15px 3px 3px;
  background-color: #fff;
  color: #000;
  font-family: "Nunito Sans", Verdana, sans-serif;
  text-transform: capitalize;
  background-image: url("/img/ui/dd_arrow.png");
  background-size: 9px;
  background-position: calc(100% - 4px) 46%;
  background-repeat: no-repeat;
  font-size: 13px;
}
select:focus {
  outline: none;
}

.hidden-element {
  display: none;
}

.close-element {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #FF4136;
  transition: all 0.3s ease-in-out;
  color: #fff;
  padding: 5px;
}
.close-element:hover {
  background-color: #cf0b00;
  cursor: pointer;
}

.ui-sortable-placeholder {
  border: 1px solid #000 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  box-sizing: border-box !important;
}

.imgDelete {
  background-color: #FF4136;
  padding: 4px;
  font-size: 12px;
  top: 2px;
  left: 2px;
  position: absolute;
}
.imgDelete i {
  color: #fff;
  font-size: 12px;
}

.imgEdit {
  background-color: #000;
  padding: 4px;
  font-size: 12px;
  bottom: 2px;
  left: 2px;
  position: absolute !important;
}
.imgEdit i {
  color: #fff;
  font-size: 12px;
}

.vidTutContainer {
  position: relative;
  margin-right: 25px;
}
.vidTutContainer .vidTutorial {
  position: absolute;
  right: -26px;
  top: 0;
  text-align: center;
  display: inline-block;
  background-color: #000;
  color: #000;
  padding: 5px;
  transition: all 0.3s ease-in-out;
  width: unset !important;
}
.vidTutContainer .vidTutorial:hover {
  cursor: pointer;
  background-color: black;
}
.vidTutContainer .vidTutorial i {
  font-size: 14px;
  margin: 0 1px 0 0 !important;
  transform: none !important;
  width: unset !important;
}

.videoBoxContainer {
  width: calc(80% - 20px);
  max-width: 1000px;
  height: calc(100% - 20px);
  display: none;
  top: 10px;
  right: 10px;
  position: fixed;
  text-align: center;
  z-index: 9999999999999;
  background-color: #f2f2f2;
}
.videoBoxContainer .closeBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 6px;
  background-color: #FF4136;
  color: #fff;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-weight: 800;
  transition: all 0.3s ease-in-out;
}
.videoBoxContainer .closeBtn:hover {
  cursor: pointer;
  background-color: #ff1103;
}
.videoBoxContainer .videoBox {
  width: 90%;
  position: absolute;
  top: 0;
  left: 5%;
  transition: all 0.3s ease-in-out;
}
.videoBoxContainer .videoBox p {
  margin: 60px 0 0;
  text-align: left;
  color: #333333;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
}
.videoBoxContainer .videoBox h2 {
  margin: 0 0 20px;
  text-align: left;
  color: #59c866;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-weight: 400;
  font-size: 40px;
}
.videoBoxContainer .videoBox .iframeHolder {
  position: relative;
  padding-top: 56.25%;
  margin: 0 auto;
  display: block;
}
.videoBoxContainer .videoBox .iframeHolder iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.tooltipContainer {
  position: relative;
}
.tooltipContainer .switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 20px;
  /* The slider */
  /* Rounded sliders */
}
.tooltipContainer .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.tooltipContainer .switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.tooltipContainer .switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.tooltipContainer .switch input:checked + .slider {
  background-color: #59c866;
}
.tooltipContainer .switch input:focus + .slider {
  box-shadow: 0 0 1px #59c866;
}
.tooltipContainer .switch input:checked + .slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
}
.tooltipContainer .switch .slider.round {
  border-radius: 34px;
}
.tooltipContainer .switch .slider.round:before {
  border-radius: 50%;
}
.tooltipContainer:hover {
  cursor: pointer;
}
.tooltipContainer:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.tooltipContainer .tooltiptext {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  width: 120px;
  font-weight: 600;
  bottom: 100%;
  left: 0%;
  padding: 5px;
  display: inline-block;
  max-width: 400px;
  text-align: center;
  margin-left: -60px;
  z-index: 9999999999;
}

.loaderBoxContainerOuter {
  width: 100%;
  height: 100%;
  display: none;
  top: 0;
  position: fixed;
  text-align: center;
  z-index: 9999999999999;
}
.loaderBoxContainerOuter .loaderBoxCont {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  z-index: 99999999999;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  transition: all 0.3s ease-in-out;
}
.loaderBoxContainerOuter .loaderBoxCont .loaderContainer {
  background-color: #000;
  padding: 30px;
  border-radius: 50%;
  box-shadow: 0 0 20px 10px #000;
}
@media screen and (max-width: 600px) {
  .loaderBoxContainerOuter .loaderBoxCont .loaderContainer {
    padding: 20px;
  }
}
.loaderBoxContainerOuter .loaderBoxCont .loaderContainer img {
  max-width: 150px;
}
@media screen and (max-width: 600px) {
  .loaderBoxContainerOuter .loaderBoxCont .loaderContainer img {
    max-width: 80px;
  }
}

.radioBoxContainer {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.radioBoxContainer input {
  width: auto !important;
  min-width: unset !important;
  margin: 0 10px 0 0 !important;
}

.globalModalContainer {
  display: none;
}
.globalModalContainer.toSide {
  position: relative;
  width: 30%;
  height: 100vh;
  float: right;
}
.globalModalContainer.toSide .globalModal {
  padding: 0;
  position: relative;
  width: 100%;
}
.globalModalContainer.toSide .globalModal .modalCloseBtn {
  right: 20px !important;
}
.globalModalContainer.toSide .globalModal .modalInner {
  width: 100%;
  height: 100%;
  margin: 0;
}

.globalModal {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 200px);
  height: calc(100vh - 0px);
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  padding: 3%;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  z-index: 10;
}
.globalModal.full {
  padding: 0px !important;
}
.globalModal.full .modalCloseBtn {
  position: fixed;
  right: 20px;
  top: 20px !important;
  margin: 0;
}
.globalModal.medium {
  padding: 10% 20%;
  align-items: center;
}
.globalModal.medium .modalCloseBtn {
  position: fixed;
  right: calc(20% + 20px);
  top: calc(11% + 40px);
  margin: 0;
}
.globalModal.small {
  padding: 10% 30%;
  align-items: center;
}
.globalModal.small .modalCloseBtn {
  position: fixed;
  right: calc(30% + 20px);
  top: calc(11% + 40px);
  margin: 0;
}
.globalModal iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.globalModal .modalInner {
  background-color: #ffffff;
  border: 2px solid #000;
  box-sizing: border-box;
  padding: 30px;
  width: 100%;
  position: relative;
  overflow-y: auto;
}

.globalModal .modalInner.showroomView {
  padding: 0;
  overflow-y: auto;
}

.globalModal .modalInner.showroomView iframe {
  border: 0;
}

.globalModal .modalCloseBtn {
  background-color: #ff8060;
  color: #ffffff;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: calc(3% + 20px);
  margin-top: 20px;
  z-index: 10;
}

#overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  top: 0;
  z-index: 999999999999999999;
}
#overlay #alert {
  background-color: #000;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
  width: 800px;
  max-width: 80%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
#overlay #alert #alert_head {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 10px 0;
}
#overlay #alert #alert_result {
  font-size: 16px;
  font-weight: 400;
}
#overlay #alert #alert_close {
  padding: 6px 18px;
  background-color: #59c866;
  color: #fff;
  margin-top: 15px;
  font-size: 16px;
}
#overlay #alert #alert_close:hover {
  cursor: pointer;
  background-color: #46c254;
}

.faded_out {
  opacity: 0.4;
  cursor: not-allowed;
}

.datahouse_form table select {
  margin: 0 auto !important;
}
.datahouse_form table select,
.datahouse_form table input {
  max-width: 95%;
}

.searchResultContainer {
  display: inline-block;
  width: calc(100% - 100px);
  height: calc(100% - 55px);
  position: fixed;
  top: 52px;
  right: 0;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  z-index: 99;
  overflow: auto;
}
.searchResultContainer .clearSearch {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: #FF4136;
  padding: 5px 10px;
  color: #fff;
  font-family: "Nunito Sans", Verdana, sans-serif;
  font-size: 14px;
}
.searchResultContainer h1 {
  margin-bottom: 30px;
}
.searchResultContainer h4 {
  display: block;
  clear: both;
  margin: 0 auto 10px;
  color: #000;
  font-weight: 600;
  text-transform: unset;
  font-size: 1.1em;
}
.searchResultContainer .searchResults {
  width: 100%;
  margin: 0 0 10px;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
}
.searchResultContainer .searchResults .searchItem {
  width: 140px;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
  margin-bottom: 20px;
}
.searchResultContainer .searchResults .searchItem:hover {
  border: 1px solid #000;
  cursor: pointer;
}
.searchResultContainer .searchResults .searchItem img {
  max-width: 100%;
}

.windowSection {
  margin: 20px 0;
}
.windowSection .windowHead {
  box-sizing: border-box;
  padding: 10px;
}
.windowSection .windowHead h4 {
  margin: 0;
  color: #fff;
}
.windowSection .windowArea {
  border: 1px solid #fff;
  background-color: white;
  box-sizing: border-box;
  border-top: none;
  display: inline-block;
  width: 100%;
  padding: 10px;
}

.tasksContainer {
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}
.tasksContainer .taskBlock {
  display: inline-flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  padding: 20px;
  flex-direction: column;
  margin-right: 10px;
  width: 200px;
  max-width: 200px;
  height: 200px;
  cursor: pointer;
}
.tasksContainer .taskBlock.progressBlock {
  text-align: center;
}
.tasksContainer .taskBlock.progressBlock h1 {
  color: #fff;
  font-size: 60px;
  font-weight: 600;
  margin: 0;
}
.tasksContainer .taskBlock.progressBlock h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 5px 0 0;
  color: #fff;
}
.tasksContainer .taskBlock h4 {
  font-size: 13px;
  margin: 0 0 5px;
  color: #333333;
  font-weight: 600;
  text-decoration: underline;
}
.tasksContainer .taskBlock h2 {
  font-size: 18px;
  margin: 0;
  color: #333333;
  line-height: 21px;
  font-weight: 600;
}
.tasksContainer .taskBlock p {
  font-size: 12px;
  margin: 5px 0 0;
  color: #333333;
}
.tasksContainer .taskBlockSmall {
  display: inline-flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  padding: 20px;
  flex-direction: column;
  margin-right: 10px;
  width: 200px;
  max-width: 200px;
  height: 75px;
  cursor: pointer;
  font-size: 12px;
}

.validate-input {
  border: 1px solid #FF4136;
  background-color: #ffa19c;
}

.modalTopInfo {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #777777;
  width: 100%;
  box-sizing: border-box;
}
.modalTopInfo #logo {
  margin-right: 10px;
}
.modalTopInfo #logo img {
  max-width: 100%;
  max-height: 80px;
}
.modalTopInfo #name p {
  margin: 5px 0;
}
.modalTopInfo .profileIcons {
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.modalTopInfo .profileIcons:first-of-type {
  margin-bottom: 20px;
}
.modalTopInfo .profileIcons p {
  margin: 0 10px 0 0;
  text-align: right;
}

.companyDetailDropdown {
  font-weight: 300;
  padding: 5px;
  background-color: #fff;
  font-size: 20px;
  margin: 10px auto;
  transition: all 0.3s ease-in-out;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.companyDetailDropdown p {
  margin: 0;
}
.companyDetailDropdown.selected {
  background-color: #e5e5e5;
  margin-bottom: 0;
}
.companyDetailDropdown.selected i {
  transform: rotate(0deg);
}
.companyDetailDropdown i {
  float: right;
  transform: rotate(90deg);
  transition: all 0.3s ease-in-out;
}
.companyDetailDropdown:hover {
  cursor: pointer;
  background-color: #e5e5e5;
}

.companyDetailArea {
  background-color: white;
  overflow: hidden;
  width: calc(100% - 40px);
  display: inline-block;
  padding: 20px;
  text-align: left;
  opacity: 1;
  max-height: unset;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  margin-bottom: 10px;
}
.companyDetailArea .inputRowFlex {
  display: flex;
  justify-content: space-between;
  padding-bottom: 3px;
  border-bottom: 1px solid #f2f2f2;
}
.companyDetailArea .inputRowFlex .input_text_span {
  width: calc(50% - 10px);
}
.companyDetailArea .inputRowFlex .input_text_span input {
  width: 100%;
  box-sizing: border-box;
}
.companyDetailArea.dropdownClass {
  max-height: 0 !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 20px;
  /* The slider */
  /* Rounded sliders */
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch.purple {
  background-color: rgba(0, 0, 0, 0) !important;
}
.switch.purple input:checked + .slider {
  background-color: #000;
}
.switch.purple input:focus + .slider {
  box-shadow: 0 0 1px #000;
}
.switch input:checked + .slider {
  background-color: #000;
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px #000;
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
}
.switch .slider.round {
  border-radius: 34px;
}
.switch .slider.round:before {
  border-radius: 50%;
}

.addNewLine {
  background-color: #000;
}
.addNewLine .product_nested {
  background-color: #000;
}
.addNewLine .product_nested:hover {
  background-color: #000;
  cursor: default;
}

.sceditor-button-headers div {
  background-position: 0 -464px !important;
}

.sceditor-header-option h1, .sceditor-header-option h2, .sceditor-header-option h3 {
  color: #333;
}

.productSelectHead {
  display: flex;
  padding: 10px;
  background-color: #000;
  color: #fff;
  margin: 5px auto 0;
}

.productSelectBody {
  margin: 0 auto 0;
  background-color: #fff;
  height: calc(100% - 20px);
  overflow: auto;
  position: relative;
  display: inline-block;
  padding: 10px;
  box-sizing: border-box;
}
.productSelectBody input {
  width: calc(100% - 150px);
  padding: 5px;
  box-sizing: border-box;
  margin: 0 auto 10px;
}
.productSelectBody .selectedArea {
  background-color: none !important;
  border-bottom: 1px solid #000;
  width: 100%;
  padding: 0 0 5px;
  box-sizing: border-box;
}
.productSelectBody .selectedArea b {
  font-weight: 400;
}
.productSelectBody .packageArea {
  display: flex;
  flex-direction: column;
}
.productSelectBody .prodTilesBox, .productSelectBody .packTilesBox {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}
.productSelectBody .prodTilesBox .prodTile, .productSelectBody .packTilesBox .prodTile {
  margin: 0 5px 10px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-size: cover;
  background-position: center;
  width: calc(33% - 10px);
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  border: 1px solid black;
}
.productSelectBody .prodTilesBox .prodTile.category, .productSelectBody .packTilesBox .prodTile.category {
  width: calc(33% - 10px);
  height: 100px;
  padding: 0;
  margin: 0 5px 40px;
  background-color: #000;
  border: none;
}
.productSelectBody .prodTilesBox .prodTile.category p, .productSelectBody .packTilesBox .prodTile.category p {
  position: absolute;
  bottom: -20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.productSelectBody .prodTilesBox .prodTile span, .productSelectBody .packTilesBox .prodTile span {
  display: inline-block;
  width: 100%;
  height: 80px;
  background-size: cover;
  background-position: center;
  margin: 0 auto 5px;
  background-repeat: no-repeat;
}
.productSelectBody .prodTilesBox .prodTile p, .productSelectBody .packTilesBox .prodTile p {
  background-color: black;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  margin: 0;
  font-size: 14px;
  overflow: hidden;
  white-space: break-spaces;
}

.selectedProduct {
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 5px;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid black;
}
.selectedProduct .imgHolder {
  margin-right: 10px;
  border: 2px solid #000;
  width: 60px;
  min-width: 60px;
  height: 60px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  background-color: #1a1a1a;
}
.selectedProduct .imgHolder.productImg {
  border: none;
  border-radius: 0;
  background-size: cover;
}
.selectedProduct h4 {
  margin: 0 0 5px;
  font-size: 14px;
  color: #333333;
}
.selectedProduct p {
  color: #333333;
  margin: 0;
  font-size: 18px;
}

.stepHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  background-color: #333333;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 0;
}
.stepHeader.optional {
  background-color: #777777;
}
.stepHeader.optional i {
  display: inline-block;
}
.stepHeader.complete {
  background-color: #59c866;
}
.stepHeader.complete h4 {
  color: #fff;
}
.stepHeader.complete b {
  display: none;
}
.stepHeader.complete i {
  display: inline-block;
}
.stepHeader h4 {
  color: #fff;
  margin: 0;
}
.stepHeader b {
  color: #fff;
  font-weight: 400;
}
.stepHeader i {
  display: none;
  color: #fff;
}

.stepBox {
  display: none;
}
.stepBox input {
  margin: 0 auto 10px;
  width: 100%;
}
.stepBox .optionsContainer {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  overflow: auto;
  max-height: 250px;
  margin-bottom: 10px;
}
.stepBox .button-blue-small {
  color: #fff !important;
}
.stepBox.expanded {
  display: flex;
  width: 100%;
  max-height: 400px;
  border: 1px solid #333333;
  box-sizing: border-box;
  padding: 5px;
  position: relative;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  overflow: auto;
}
.stepBox.expanded .optionBox {
  margin: 0 5px 10px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-size: cover;
  background-position: center;
  width: calc(25% - 10px);
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  border: 1px solid black;
  padding: 5px;
}
.stepBox.expanded .optionBox span {
  display: inline-block;
  width: 100%;
  height: 80px;
  background-size: cover;
  background-position: center;
  margin: 0 auto 5px;
  background-repeat: no-repeat;
}
.stepBox.expanded .optionBox img {
  display: inline-block;
  max-width: calc(100% - 10px);
  max-height: 60px;
  margin: 0 auto 5px;
}
.stepBox.expanded .optionBox p {
  width: 100%;
  box-sizing: border-box;
  color: #000;
  margin: 0;
  font-size: 14px;
  overflow: hidden;
  white-space: break-spaces;
}

.leftExpandFix {
  position: fixed !important;
  top: 180px !important;
  width: 30% !important;
  height: calc(100% - 215px) !important;
}

.rightExpandBox {
  width: 65% !important;
  float: right !important;
}

.columnsSelect {
  position: relative;
}
.columnsSelect .columnsSelectLabel {
  background-color: #fff;
  color: #333333 !important;
  font-weight: 400 !important;
  border: 1px solid #333333;
  padding: 5px;
  font-size: 15px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-left: 0 !important;
}
.columnsSelect .columnsSelectLabel i {
  margin-left: 10px;
}
.columnsSelect .columnsSelectBox {
  height: 0;
  width: 100%;
  overflow: hidden;
  margin: 0;
  position: absolute;
  background-color: #fff;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
}
.columnsSelect .columnsSelectBox.display {
  height: auto;
  max-height: 30vh;
  overflow: auto;
  z-index: 9;
}
.columnsSelect .columnsSelectBox .column {
  width: 100%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  padding: 0 5px 5px;
}
.columnsSelect .columnsSelectBox .column:nth-child(2n) {
  background-color: #666666;
}
.columnsSelect .columnsSelectBox .column:nth-child(2n) h3 {
  background-color: #666666;
}
.columnsSelect .columnsSelectBox .column h3 {
  color: black;
  margin: 0 0 2px;
  position: sticky;
  top: 0;
  z-index: 9;
  padding: 5px 0 0;
  background-color: #fff;
}
.columnsSelect .columnsSelectBox .column .colItem {
  margin: 5px 0 0;
  color: #333333;
  max-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.columnsSelect .columnsSelectBox .column .colItem:hover {
  color: #000;
}

.tableContainer {
  overflow: auto;
  height: calc(100% - 50px);
  min-height: calc(100vh - 300px);
}
.tableContainer .inputTable {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  max-width: calc(100% - 2px);
}
.tableContainer .inputTable tr:nth-child(2n) td {
  background-color: white;
}
.tableContainer .inputTable tr.sum_row td {
  text-align: right !important;
}
.tableContainer .inputTable tr td {
  background-color: white !important;
  border: 1px solid #000;
  padding: 5px !important;
  text-align: left !important;
}
.tableContainer .inputTable tr td.int {
  text-align: right !important;
}
.tableContainer .inputTable tr td.datetime {
  text-align: right !important;
}
.tableContainer .inputTable tr td div {
  float: right;
  margin-top: -4px;
}
.tableContainer .inputTable tr td select {
  border-radius: 0;
  border: 1px solid #000;
  -webkit-appearance: none;
  padding: 3px 15px 3px 3px;
  background-color: #fff;
  color: #000;
  font-family: "Nunito Sans", Verdana, sans-serif;
  text-transform: capitalize;
  background-image: url("/img/ui/dd_arrow.png");
  background-size: 9px;
  background-position: calc(100% - 4px) 46%;
  background-repeat: no-repeat;
  font-size: 13px;
  margin-left: 5px;
}
.tableContainer .inputTable tr td select:focus {
  outline: none;
}
.tableContainer .inputTable tr td:first-of-type {
  color: #FF4136;
  overflow: visible;
  text-overflow: none;
  text-align: center;
}
.tableContainer .inputTable tr td input {
  min-width: 80%;
  border: 1px solid #999999;
  font-family: "Nunito Sans", Verdana, sans-serif;
}
.tableContainer .inputTable tr td input:focus {
  outline: none;
  border: 1px solid #333333;
}
.tableContainer .inputTable th {
  text-align: left;
  background-color: #000 !important;
  padding: 10px 5px !important;
  border: 1px solid #000;
  color: #fff;
}
.tableContainer .inputTable th select {
  border-radius: 0;
  border: 1px solid #000;
  -webkit-appearance: none;
  padding: 5px 15px 5px 5px;
  background-color: #fff;
  color: #000;
  font-family: "Nunito Sans", Verdana, sans-serif;
  text-transform: capitalize;
  background-image: url("/img/ui/dd_arrow.png");
  background-size: 9px;
  background-position: calc(100% - 4px) 46%;
  background-repeat: no-repeat;
  font-size: 13px;
}
.tableContainer .inputTable th select:focus {
  outline: none;
}
.tableContainer .inputTable th span {
  color: #fff;
  margin-left: 10px;
}
.tableContainer .inputTable th .set_to_zero {
  margin: 7px 0 0;
  color: #000;
  background-color: #59c866;
  padding: 5px;
  font-family: "Nunito Sans", Verdana, sans-serif;
  border: none;
  font-size: 12px;
}
.tableContainer .inputTable th .switch-field {
  display: inline-flex;
  overflow: hidden;
  margin-top: 5px;
  margin-left: 0;
}
.tableContainer .inputTable th .switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}
.tableContainer .inputTable th .switch-field input:checked + label {
  background-color: #59c866 !important;
  box-shadow: none;
  color: #000 !important;
}
.tableContainer .inputTable th .switch-field label {
  background-color: #fff !important;
  color: rgba(0, 0, 0, 0.6) !important;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  padding: 4px 8px !important;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  transition: all 0.1s ease-in-out;
}
.tableContainer .inputTable th .switch-field label:hover {
  cursor: pointer;
}
.tableContainer .inputTable th .switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}
.tableContainer .inputTable th .switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

table.fixedTable {
  table-layout: fixed;
}
table tr.tableHeading td {
  background-color: #2ee4f9;
  border: none;
}
table tr td {
  padding: 5px;
}
table tr td.smallPadding {
  padding: 3px;
}
table .input_text {
  width: 100%;
  box-sizing: border-box;
}
table .numericField {
  text-align: right;
}

/*# sourceMappingURL=main.css.map */