.mainWrapper, .controlPanel, .controlPanel .head, .filterPanel .filterHead, .filterPanel .filterBody .family .filterHead, .filterPanel .filterBody .familyBody .filterSection, .filterPanel .filterBody .familyBody .filterSection .check-element, .filterPanel .filterBody .base .filterHead, .filterPanel .filterBody .baseBody .filterSection, .filterPanel .filterBody .baseBody .filterSection .check-element, .filterPanel .filterSearch form .autocomplete, .viewport .colorItem, .viewport .itemDetail .detailDiv, .viewport .itemDetail .detailDiv p, .viewport .itemDetail .detailSelector, .viewport .itemDetail .detailQuantity, .viewport .itemDetail .detailSelector p, .viewport .itemDetail .detailQuantity p, .viewport .itemDetail .detailSelector .selectCont .line-items > div, .viewport .itemDetail .detailQuantity .quantityCont, .viewport .itemDetail .detailQuantity .quantityCont .quantitySelectors, .viewport .itemDetail .detailPrice, .viewport .itemDetail .detailPrice .singlePrice, .viewport .itemDetail .detailPrice .singlePrice p, .viewport .itemDetail .detailPrice .totalPrice, .viewport .itemDetail .detailPrice .totalPrice p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
}

.bodyWrapper, .paletteContainer, .filterPanel, .viewport, .viewport .itemDetail .detailInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.filterPanel .filterBody .family .filterHead .badge, .filterPanel .filterBody .familyBody .filterSection .badge, .filterPanel .filterBody .baseBody .filterSection .badge, .viewport .itemDetail .detailClose {
  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;
}

.mainWrapper, .viewport .itemDetail .detailPanel, .viewport .itemDetail .detailDiv, .viewport .itemDetail .detailSelector, .viewport .itemDetail .detailQuantity, .viewport .itemDetail .detailPrice .singlePrice, .viewport .itemDetail .detailPrice .totalPrice {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.paletteContainer {
  overflow: hidden;
}

.filterPanel .filterBody .familyBody .filterSection .check-element input:checked ~ .checkmark:after, .filterPanel .filterBody .baseBody .filterSection .check-element input:checked ~ .checkmark:after {
  display: block;
}

.viewport .colorItem.hide, .viewport .itemDetail.view .detailPanel, .viewport .itemDetail.view .detailClose, .viewport .itemDetail .detailClose, .viewport .itemDetail .detailPanel {
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.viewport .colorItem, .viewport .itemDetail, .viewport .itemDetail.view {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.filterPanel .filterBody .family .filterHead img, .filterPanel .filterBody .familyBody, .filterPanel .filterBody .base .filterHead img, .filterPanel .filterBody .baseBody {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.bodyWrapper, .mainWrapper, .paletteContainer, .controlPanel, .controlPanel .head, .filterPanel, .filterPanel .filterList, .filterPanel .filterHead a, .filterPanel .filterBody, .filterPanel .filterBody .family .filterHead, .filterPanel .filterBody .familyBody, .filterPanel .filterBody .familyBody .filterSection .check-element, .filterPanel .filterBody .base .filterHead, .filterPanel .filterBody .baseBody, .filterPanel .filterBody .baseBody .filterSection .check-element, .filterPanel .filterSearch form .autocomplete, .viewport, .viewport .itemDetail .detailInfo, .viewport .itemDetail .detailSelector, .viewport .itemDetail .detailSelector .selectCont, .viewport .itemDetail .detailSelector .selectCont .line-selected, .viewport .itemDetail .detailQuantity .quantityCont input {
  position: relative;
}

.filterPanel .filterBody .family .filterHead .badge, .filterPanel .filterBody .family .filterHead img, .filterPanel .filterBody .familyBody .filterSection .badge, .filterPanel .filterBody .familyBody .filterSection .check-element input, .filterPanel .filterBody .familyBody .filterSection .check-element .checkmark, .filterPanel .filterBody .familyBody .filterSection .check-element .checkmark:after, .filterPanel .filterBody .base .filterHead img, .filterPanel .filterBody .baseBody .filterSection .badge, .filterPanel .filterBody .baseBody .filterSection .check-element input, .filterPanel .filterBody .baseBody .filterSection .check-element .checkmark, .filterPanel .filterBody .baseBody .filterSection .check-element .checkmark:after, .viewport .colorItem, .viewport .itemDetail, .viewport .itemDetail .detailClose, .viewport .itemDetail .detailPanel, .viewport .itemDetail .detailSelector .selectCont .line-selected:after, .viewport .itemDetail .detailSelector .selectCont .line-items, .viewport .itemDetail .detailSubmit {
  position: absolute;
}

.filterPanel .filterList, .filterPanel .filterSearch form, .filterPanel .filterSearch form .autocomplete, .viewport .colorItem img {
  width: 100%;
  height: 100%;
}

.bodyWrapper, .mainWrapper, .paletteContainer, .filterPanel .filterBody {
  width: 100%;
  height: auto;
}

.filterPanel .filterBody .familyBody .filterSection .check-element a, .filterPanel .filterBody .baseBody .filterSection .check-element a {
  text-decoration: none;
  color: inherit;
}

/** PALETTE */
.bodyWrapper {
  margin: 0 auto;
}

.mainWrapper {
  background-color: white;
  padding: 30px;
  min-height: 500px;
  max-width: 1366px;
  margin: 0 auto;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.paletteContainer {
  min-height: calc(100vh - 175px);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.controlPanel {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  width: 100%;
  height: 40px;
}

.controlPanel .head {
  width: calc(100% - 250px);
  height: 100%;
  margin-left: 250px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding-left: 10px;
}

.controlPanel .head h2 {
  font-size: 1.3em;
  margin: 0 0 8.25px;
}

.controlPanel .head p {
  margin: 0 0 9.25px 10px;
  font-size: 0.9em;
  color: #707070;
}

.filterPanel {
  width: 250px;
  height: calc(100% - 40px);
  padding-right: 20px;
}

.filterPanel .filterHead {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 20px;
  height: 60px;
}

.filterPanel .filterHead h2 {
  font-size: 1.3em;
  margin: 0;
}

.filterPanel .filterHead a {
  color: #175ADF;
  font-size: 0.9em;
  top: 0.1em;
}

.filterPanel .filterBody > div:last-child .filterHead.not {
  border-bottom: 1px solid #D2D2D2;
}

.filterPanel .filterBody .family .filterHead {
  height: 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FCFCFC;
  border: 1px solid #D2D2D2;
  padding: 0 20px;
  cursor: pointer;
}

.filterPanel .filterBody .family .filterHead.not {
  border-bottom: 1px solid white;
}

.filterPanel .filterBody .family .filterHead.not img {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.filterPanel .filterBody .family .filterHead h2:nth-child(2) {
  display: none;
}

.filterPanel .filterBody .family .filterHead h2 {
  font-size: 1em;
  margin: 0;
}

.filterPanel .filterBody .family .filterHead .badge {
  width: 20px;
  height: 20px;
  color: #5f5f5f;
  background-color: #c3c3c3;
  right: 40px;
  font-size: 0.7em;
  border-radius: 100%;
}

.filterPanel .filterBody .family .filterHead .badge.selected {
  color: white;
  background-color: #175ADF;
}

.filterPanel .filterBody .family .filterHead img {
  height: 25px;
  right: 10px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  top: 12px;
}

.filterPanel .filterBody .familyBody {
  width: 100%;
  overflow: hidden;
}

.filterPanel .filterBody .familyBody .sectionContainer {
  padding: 15px 0px 15px 20px;
}

.filterPanel .filterBody .familyBody.hide {
  height: 0 !important;
  padding: 0;
}

.filterPanel .filterBody .familyBody .filterSection {
  width: 100%;
  height: 32px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.filterPanel .filterBody .familyBody .filterSection .badge {
  width: 20px;
  height: 20px;
  color: #175ADF;
  right: 15px;
  font-size: 0.7em;
}

.filterPanel .filterBody .familyBody .filterSection .check-element {
  width: 100%;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #737373;
  font-size: 0.9em;
  padding-left: 27px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.filterPanel .filterBody .familyBody .filterSection .check-element a {
  color: blue;
}

.filterPanel .filterBody .familyBody .filterSection .check-element a:hover {
  text-decoration: underline;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.filterPanel .filterBody .familyBody .filterSection .check-element input {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  margin: 0;
  top: 0;
  left: 0;
}

.filterPanel .filterBody .familyBody .filterSection .check-element input:checked ~ .checkmark {
  background-color: #e8f2f9;
}

.filterPanel .filterBody .familyBody .filterSection .check-element .checkmark {
  top: 6px;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background-color: #fff;
  border: 1px solid #d8d8d8;
}

.filterPanel .filterBody .familyBody .filterSection .check-element .checkmark:after {
  content: "";
  display: none;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #175ADF;
}

.filterPanel .filterBody .familyBody .filterSection .check-element:hover input ~ .checkmark {
  background-color: #f1f1f1;
}

.filterPanel .filterBody .base .filterHead {
  height: 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #FCFCFC;
  border: 1px solid #D2D2D2;
  padding: 0 20px;
  cursor: pointer;
}

.filterPanel .filterBody .base .filterHead.not {
  border-bottom: 1px solid white;
}

.filterPanel .filterBody .base .filterHead.not img {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.filterPanel .filterBody .base .filterHead h2:nth-child(2) {
  display: none;
}

.filterPanel .filterBody .base .filterHead h2 {
  font-size: 1em;
  margin: 0;
}

.filterPanel .filterBody .base .filterHead img {
  height: 25px;
  right: 10px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  top: 12px;
}

.filterPanel .filterBody .baseBody {
  width: 100%;
  overflow: hidden;
}

.filterPanel .filterBody .baseBody .sectionContainer {
  padding: 15px 0px 15px 20px;
}

.filterPanel .filterBody .baseBody.hide {
  height: 0 !important;
  padding: 0;
}

.filterPanel .filterBody .baseBody .filterSection {
  width: 100%;
  height: 32px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.filterPanel .filterBody .baseBody .filterSection .badge {
  width: 20px;
  height: 20px;
  color: #175ADF;
  right: 15px;
  font-size: 0.7em;
}

.filterPanel .filterBody .baseBody .filterSection .check-element {
  width: 100%;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #737373;
  font-size: 0.9em;
  padding-left: 27px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.filterPanel .filterBody .baseBody .filterSection .check-element a {
  color: blue;
}

.filterPanel .filterBody .baseBody .filterSection .check-element a:hover {
  text-decoration: underline;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.filterPanel .filterBody .baseBody .filterSection .check-element input {
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
  margin: 0;
  top: 0;
  left: 0;
}

.filterPanel .filterBody .baseBody .filterSection .check-element input:checked ~ .checkmark {
  background-color: #e8f2f9;
}

.filterPanel .filterBody .baseBody .filterSection .check-element .checkmark {
  top: 6px;
  left: 0;
  height: 18px;
  width: 18px;
  border-radius: 100%;
  background-color: #fff;
  border: 1px solid #d8d8d8;
}

.filterPanel .filterBody .baseBody .filterSection .check-element .checkmark:after {
  content: "";
  display: none;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #175ADF;
}

.filterPanel .filterBody .baseBody .filterSection .check-element:hover input ~ .checkmark {
  background-color: #f1f1f1;
}

.filterPanel .filterSearch {
  width: 100%;
  height: 50px;
}

.filterPanel .filterSearch form .autocomplete {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.filterPanel .filterSearch form .autocomplete-items {
  position: absolute;
  border: 1px solid #c2c2c280;
  z-index: 99;
  top: 42px;
  left: 0;
  right: 0;
  border-radius: 3px;
}

.filterPanel .filterSearch form .autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #FCFCFC;
  border-bottom: 1px solid #d4d4d4;
  font-size: 0.8em;
}

.filterPanel .filterSearch form .autocomplete-items div:hover {
  background-color: #e9e9e9;
}

.filterPanel .filterSearch form .autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.filterPanel .filterSearch form .autocomplete input {
  width: 100%;
  height: 36px;
  padding: 12px 10px;
  margin: 10px 0;
  border-radius: 3px;
  border: 1px solid #c2c2c280;
  -webkit-transition: .4s border-color ease-in-out;
  transition: .4s border-color ease-in-out;
  font-family: 'Roboto', sans-serif;
}

.filterPanel .filterSearch form .autocomplete input:focus, .filterPanel .filterSearch form .autocomplete input:hover {
  outline: none;
  border-color: #848484;
  -webkit-transition: .4s border-color ease-in-out;
  transition: .4s border-color ease-in-out;
}

.viewport {
  width: calc(100% - 250px);
  height: 440px;
  padding: 5px;
  border: 1px solid #D6D6D6;
  -webkit-transition: height 0.25s ease-in-out;
  transition: height 0.25s ease-in-out;
}

.viewport .testing {
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
  width: 100px;
  height: 100px;
}

.viewport .colorItem {
  width: 15px;
  height: 15px;
  border: 1px solid;
  border-color: #D6D6D6;
}

.viewport .colorItem p {
  position: absolute;
  top: 2px;
  left: 2px;
  margin: 0;
  z-index: 70;
  font-size: 0.5em;
}

.viewport .colorItem:hover {
  border-color: #175ADF;
  cursor: pointer;
  z-index: 5;
  -webkit-transition: border-color 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out;
}

.viewport .colorItem.hide {
  opacity: 0;
  visibility: hidden;
}

.viewport .itemDetail {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
}

.viewport .itemDetail.view {
  background: rgba(35, 35, 35, 0.9);
  opacity: 1;
  visibility: visible;
  z-index: 5;
}

.viewport .itemDetail.view .detailPanel {
  right: 5px;
}

.viewport .itemDetail.view .detailClose {
  opacity: 1;
  visibility: visible;
}

.viewport .itemDetail .detailClose {
  top: 5px;
  left: 5px;
  width: calc(100% - 365px);
  height: calc(100% - 10px);
  opacity: 0;
  visibility: hidden;
  border: dashed 1px white;
}

.viewport .itemDetail .detailClose p {
  color: white;
  margin: 0;
}

.viewport .itemDetail .detailPanel {
  top: 5px;
  right: -255px;
  height: calc(100% - 10px);
  width: 350px;
  background: white;
  padding: 5px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.viewport .itemDetail .detailPanel .color {
  width: 100%;
  height: 100px;
  background-color: black;
}

.viewport .itemDetail .detailInfo {
  margin: 5px 0;
}

.viewport .itemDetail .detailDiv {
  height: 50px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 2.5px 5px 0;
  padding: 0 10px;
  background-color: #FCFCFC;
}

.viewport .itemDetail .detailDiv:nth-child(1) {
  width: calc(25% - 2.5px);
  margin: 0 2.5px 5px 0;
}

.viewport .itemDetail .detailDiv:nth-child(2) {
  width: calc(37.5% - 3.75px);
  margin: 0 2.5px 5px 2.5px;
}

.viewport .itemDetail .detailDiv:nth-child(3) {
  width: calc(37.5% - 3.75px);
  margin: 0 0 5px 2.5px;
}

.viewport .itemDetail .detailDiv p {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.8em;
  width: 100%;
  margin: 0;
}

.viewport .itemDetail .detailDiv p.title {
  font-size: 0.7em;
  font-weight: 600;
  margin: 0 0 2px;
}

.viewport .itemDetail .detailSelector, .viewport .itemDetail .detailQuantity {
  width: calc(50% - 2.5px);
  height: 75px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 2.5px 5px 0;
  padding: 0 10px;
  background-color: #FCFCFC;
}

.viewport .itemDetail .detailSelector label, .viewport .itemDetail .detailSelector p.title, .viewport .itemDetail .detailQuantity label, .viewport .itemDetail .detailQuantity p.title {
  font-size: 0.7em;
  font-weight: 600;
  margin: 0 0 2px;
}

.viewport .itemDetail .detailSelector p, .viewport .itemDetail .detailQuantity p {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.8em;
  width: 100%;
  margin: 0;
}

.viewport .itemDetail .detailSelector {
  cursor: pointer;
}

.viewport .itemDetail .detailSelector select {
  display: none;
}

.viewport .itemDetail .detailSelector .selectCont {
  bottom: 0;
  left: 0;
  margin-top: 3px;
}

.viewport .itemDetail .detailSelector .selectCont .line-selected {
  background-color: white;
  color: #00000080;
  font-size: 0.8em;
  padding: 10px 0.7em;
  border: 1px solid #c2c2c280;
  border-radius: 3px;
  cursor: pointer;
}

.viewport .itemDetail .detailSelector .selectCont .line-selected:after {
  content: "";
  top: 5px;
  right: 9px;
  width: 13px;
  height: 13px;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
  background-image: url(./../assets/icons/select.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.viewport .itemDetail .detailSelector .selectCont .line-selected:hover {
  outline: none;
  border-color: #848484;
  -webkit-transition: .4s border-color ease-in-out;
  transition: .4s border-color ease-in-out;
}

.viewport .itemDetail .detailSelector .selectCont .line-selected.selected {
  outline: none;
  color: black;
}

.viewport .itemDetail .detailSelector .selectCont .line-items {
  background-color: white;
  border: 1px solid #b5b5b5;
  border-radius: 3px;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 99;
}

.viewport .itemDetail .detailSelector .selectCont .line-items > div {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 35px;
  padding-left: 1.3em;
  font-size: 0.8em;
}

.viewport .itemDetail .detailSelector .selectCont .line-items > div:hover, .viewport .itemDetail .detailSelector .selectCont .line-items > div.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.viewport .itemDetail .detailSelector .selectCont .select-hide {
  display: none;
}

.viewport .itemDetail .detailQuantity {
  margin: 0 0 5px 2.5px;
}

.viewport .itemDetail .detailQuantity .quantityCont {
  margin-top: 3px;
}

.viewport .itemDetail .detailQuantity .quantityCont input {
  width: 55%;
  background-color: white;
  color: black;
  font-size: 0.8em;
  padding: 10px 1.3em;
  border: 1px solid #c2c2c280;
  border-radius: 3px;
  margin-right: 5%;
}

.viewport .itemDetail .detailQuantity .quantityCont input:hover {
  outline: none;
  border-color: #848484;
  -webkit-transition: .4s border-color ease-in-out;
  transition: .4s border-color ease-in-out;
}

.viewport .itemDetail .detailQuantity .quantityCont input:focus {
  outline: none;
  border: 1px solid #848484;
  -webkit-transition: .4s border-color ease-in-out;
  transition: .4s border-color ease-in-out;
}

.viewport .itemDetail .detailQuantity .quantityCont .quantitySelectors {
  width: 40%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.viewport .itemDetail .detailQuantity .quantityCont .quantitySelectors button {
  width: 45%;
  height: 37px;
  cursor: pointer;
}

.viewport .itemDetail .detailQuantity .quantityCont .quantitySelectors button[disabled="disabled"] {
  cursor: not-allowed;
}

.viewport .itemDetail .detailPrice {
  width: 100%;
  height: 50px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.viewport .itemDetail .detailPrice .singlePrice {
  width: 40%;
  height: 100%;
  padding: 0 10px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #FCFCFC;
}

.viewport .itemDetail .detailPrice .singlePrice label, .viewport .itemDetail .detailPrice .singlePrice p.title {
  font-size: 0.7em;
  font-weight: 600;
  margin: 0 0 2px;
}

.viewport .itemDetail .detailPrice .singlePrice p {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.8em;
  width: 100%;
  margin: 0;
}

.viewport .itemDetail .detailPrice .totalPrice {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60%;
  height: 100%;
  padding: 0 10px;
  background-color: #f7f7f7;
}

.viewport .itemDetail .detailPrice .totalPrice label, .viewport .itemDetail .detailPrice .totalPrice p.title {
  font-size: 0.7em;
  font-weight: 600;
}

.viewport .itemDetail .detailPrice .totalPrice p {
  font-size: 1.3em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  font-weight: 700;
}

.viewport .itemDetail .detailSubmit {
  width: calc(100% - 10px);
  bottom: 5px;
}

.viewport .itemDetail .detailSubmit button {
  width: 100%;
  max-width: unset;
}

@media only screen and (max-width: 900px) {
  .filterPanel, .viewport {
    display: none;
  }
  .controlPanel {
    height: auto;
  }
  .controlPanel .head {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
  }
  .controlPanel .head h2, .controlPanel .head p {
    width: 100%;
    margin: 0;
  }
  .controlPanel .head h2 {
    margin-bottom: 10px;
  }
  .controlPanel .head p {
    font-size: 1em;
  }
}
/*# sourceMappingURL=palette.css.map */