.loader-component {
  position: relative;
  width: 100%;
  height: 100%;
}
.loader-component__boxes-wrapper {
  height: calc(32px * 2);
  width: calc(32px * 3);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(32px * -1.5);
  margin-left: -32px;
  transform-origin: 50% 50%;
}
.loader-component__boxes {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}
.loader-component__box {
  width: 32px;
  height: 32px;
  top: 0;
  left: 0;
  position: absolute;
  transform-style: preserve-3d;
  transition-timing-function: linear;
  animation-duration: 800ms;
  animation-iteration-count: infinite;
}
@keyframes loader-box1-animation {
  0% {
    transform: translate(100%, 0);
  }
  50% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(200%, 0);
  }
}
@keyframes loader-box2-animation {
  0% {
    transform: translate(0, 100%);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}
@keyframes loader-box3-animation {
  0% {
    transform: translate(100%, 100%);
  }
  50% {
    transform: translate(100%, 100%);
  }
  100% {
    transform: translate(0, 100%);
  }
}
@keyframes loader-box4-animation {
  0% {
    transform: translate(200%, 0);
  }
  50% {
    transform: translate(200%, 100%);
  }
  100% {
    transform: translate(100%, 100%);
  }
}
.loader-component__box.box1 {
  transform: translate(100%, 0);
  animation-name: loader-box1-animation;
}
.loader-component__box.box2 {
  transform: translate(0, 100%);
  animation-name: loader-box2-animation;
}
.loader-component__box.box3 {
  transform: translate(100%, 100%);
  animation-name: loader-box3-animation;
}
.loader-component__box.box4 {
  transform: translate(200%, 0);
  animation-name: loader-box4-animation;
}
.loader-component__face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #377ded;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: rotateY(0deg) rotateX(0deg) translateZ(calc(32px / 2));
}
.loader-component__face.face1 {
  top: 0;
  left: 0;
}
.loader-component__face.face2 {
  right: 0;
  transform: rotateY(90deg) rotateX(0deg) translateZ(calc(32px / 2));
}
.loader-component__face.face3 {
  background: #206eeb;
  transform: rotateY(0deg) rotateX(-90deg) translateZ(calc(32px / 2));
}
.loader-component__face.face4 {
  background: #dbe3f4;
  top: 0;
  left: 0;
  transform: rotateY(0deg) rotateX(0deg) translateZ(calc(32px * 3 * -1));
}
.loader-component__dots {
  display: inline-block;
  position: relative;
  width: 76px;
  height: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6.5px;
  margin-left: -38px;
  transform-origin: 50% 50%;
}
.loader-component__dot {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #377ded;
  transition-timing-function: cubic-bezier(0, 1, 1, 0);
}
@keyframes dot-anim1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes dot-anim2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
@keyframes dot-anim3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
.loader-component__dot.dot1 {
  left: 8px;
  animation: dot-anim1 0.6s infinite;
}
.loader-component__dot.dot2 {
  left: 8px;
  animation: dot-anim2 0.6s infinite;
}
.loader-component__dot.dot3 {
  left: 32px;
  animation: dot-anim2 0.6s infinite;
}
.loader-component__dot.dot4 {
  left: 56px;
  animation: dot-anim3 0.6s infinite;
}
.loader-component__wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  margin: -150px;
  animation: fade-in 300ms ease-in-out;
}
.loader-component__wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  mix-blend-mode: screen;
}
.loader-component__wrap .metaballs {
  width: 100%;
  height: 100%;
  filter: contrast(25);
  background: white;
}
.loader-component__wrap .meta {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px;
  transform: scale(0.3) rotateZ(-20deg) rotateX(-10deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  perspective: 330px;
  animation: wobble 40s infinite linear;
}
.loader-component__wrap .ball,
.loader-component__wrap .meta:before,
.loader-component__wrap .meta:after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px;
  background: black;
  border-radius: 50%;
  filter: blur(10px);
  animation: move 4.2s infinite linear;
}
.loader-component__wrap .meta:before {
  animation-delay: -1.4s;
}
.loader-component__wrap .meta:after {
  animation-delay: -2.8s;
}
@keyframes move {
  from {
    transform: translateZ(100px) rotateY(360deg) translateZ(-100px) rotateY(0deg);
  }
  to {
    transform: translateZ(100px) rotateY(0deg) translateZ(-100px) rotateY(360deg);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wobble {
  from {
    transform: scale(0.3) rotateZ(0deg) rotateX(-10deg);
  }
  to {
    transform: scale(0.3) rotateZ(360deg) rotateX(-10deg);
  }
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.usermenu {
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 15px;
  position: relative;
  cursor: default;
}
.usermenu__badge {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-image: url('/assets/icons/user.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-size: 65%;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--lightGrey);
  box-sizing: border-box;
}
.usermenu__badge__button {
  box-shadow: 0px 0px 3px #0003;
  background-color: transparent;
  height: 19px;
  width: 19px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--light);
  bottom: 0;
  right: -5px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.usermenu__badge__button .svg {
  top: -5px;
  height: 8px;
  position: relative;
  transition: 0.3s all;
}
.usermenu__badge__button .svg svg {
  width: 10px;
  height: 10px;
}
.usermenu__dropdown {
  position: absolute;
  padding: 0px 0px;
  top: 45px;
  z-index: 70;
  right: 0;
  background-color: white;
  box-shadow: 4px 4px 16px 0 #cfcfd4;
  border-radius: 5px;
  overflow: hidden;
}
.usermenu__dropdown-header {
  padding: 16px;
  line-height: 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--lightGrey);
  font-weight: 500;
}
.usermenu__dropdown-header .email {
  color: var(--grey);
  font-size: 12px;
}
.usermenu__dropdown-item {
  padding: 0px 16px;
  height: 48px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--light);
  font-size: 14px;
  color: var(--darkGrey);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
}
.usermenu__dropdown-item:hover {
  background-color: var(--lightGrey);
}
.usermenu__dropdown-item .svg {
  width: 14px;
  margin-right: 10px;
}
.usermenu__dropdown-item p {
  margin: 0px;
}
.dashboardheader .usermenu {
  margin-left: 1.83016105vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu {
    margin-left: 3.25520833vh;
  }
}
.dashboardheader .usermenu__badge {
  width: 2.92825769vw;
  height: 2.92825769vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge {
    width: 5.20833333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge {
    height: 5.20833333vh;
  }
}
.dashboardheader .usermenu__badge__button {
  height: 1.3909224vw;
  width: 1.3909224vw;
  right: -0.36603221vw;
  padding-top: 0.29282577vw;
  padding-right: 0.29282577vw;
  padding-bottom: 0.29282577vw;
  padding-left: 0.29282577vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge__button {
    height: 2.47395833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge__button {
    width: 2.47395833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge__button {
    right: -0.65104167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge__button {
    padding-top: 0.52083333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge__button {
    padding-right: 0.52083333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge__button {
    padding-bottom: 0.52083333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__badge__button {
    padding-left: 0.52083333vh;
  }
}
.dashboardheader .usermenu__badge__button .svg {
  width: 100%;
}
.dashboardheader .usermenu__dropdown {
  top: 3.2942899vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown {
    top: 5.859375vh;
  }
}
.dashboardheader .usermenu__dropdown-header {
  padding: 1.17130307vw;
  line-height: 1.17130307vw;
  font-size: 1.02489019vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-header {
    padding: 2.08333333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-header {
    line-height: 2.08333333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-header {
    font-size: 1.82291667vh;
  }
}
.dashboardheader .usermenu__dropdown-item {
  padding-right: 1.17130307vw;
  padding-left: 1.17130307vw;
  height: 3.51390922vw;
  font-size: 1.02489019vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-item {
    padding-right: 2.08333333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-item {
    padding-left: 2.08333333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-item {
    height: 6.25vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-item {
    font-size: 1.82291667vh;
  }
}
.dashboardheader .usermenu__dropdown-item .svg {
  width: 1.02489019vw;
  margin-right: 0.73206442vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-item .svg {
    width: 1.82291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown-item .svg {
    margin-right: 1.30208333vh;
  }
}
.dashboardheader .usermenu__dropdown > hr {
  padding-right: 1.17130307vw;
  padding-left: 1.17130307vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown > hr {
    padding-right: 2.08333333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader .usermenu__dropdown > hr {
    padding-left: 2.08333333vh;
  }
}
#main.creator .usermenu {
  font-weight: 600;
}
/* If we want animations but we should manage the display
.open {
	.usermenu__badge {
		&__button {
			.svg {
				transition: 0.3s all;
				transform: rotateZ(180deg);
			}
		}
	}
	.usermenu__dropdown {
		display: block;
		transition: opacity .03s linear, transform .12s cubic-bezier(0,0,.2,1);
		opacity: 1;
		transform: scale(1);
	}
}
 */

/** @format */
.usersettings {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  height: 100%;
}
.usersettings__body {
  width: 70%;
}
.usersettings__head {
  display: flex;
  gap: 10px;
  margin-bottom: 50px;
}
.usersettings__back {
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
}
.usersettings__back .svg,
.usersettings__back .svg svg {
  width: 100%;
  height: 100%;
}
.usersettings__title {
  /* height: 20%; */
  font-size: 22pt;
  font-weight: bold;
  margin-bottom: 20px;
  margin-right: 50px;
}
.usersettings__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 20px;
}
.usersettings__content {
  margin-bottom: 50px;
  margin-top: 50px;
}
.usersettings__content:first-child {
  margin-top: 0px;
}
.usersettings__content h4 {
  font-weight: 600;
  margin-bottom: 10px;
}
.usersettings__content p {
  font-size: 10pt;
  color: #8c909a;
}
.usersettings__content input {
  outline: 0;
  filter: none;
  border: 1px solid var(--lightGrey) !important;
  border-radius: 4px;
  padding: 0 10px;
  height: 40px;
}
.usersettings__content select {
  border: 1px solid var(--lightGrey) !important;
  border-radius: 4px;
  padding: 0px 12px;
  background-color: white;
  cursor: pointer;
  height: 40px;
  max-width: 200px;
}
.usersettings__content__row {
  display: flex;
  justify-content: space-between;
  margin: 15px;
  gap: 10px;
}
.usersettings__content__row.hidden {
  display: none;
}
.usersettings__content form {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  gap: 10px;
}
.usersettings__content form input {
  font-size: 14px;
}
.usersettings__content form button {
  background-color: var(--primary);
  color: var(--light);
  font-weight: 500;
  padding: 10px 20px;
  font-size: 14px;
}
.usersettings__content form button.delete {
  background-color: var(--warning);
  color: var(--light);
}
.usersettings__content.credentials .usersettings__content__row {
  flex-direction: column;
  max-width: 420px;
  margin: 40px auto;
  padding: 0px 15px;
}
.usersettings__section-title {
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 15px;
}
.usersettings__section-title.selected {
  color: var(--primary);
}
.usersettings__footer {
  display: flex;
  justify-content: center;
  padding: 0px 15px;
}
.usersettings__save {
  min-width: fit-content;
  width: 40%;
  align-self: center;
}
.usersettings .submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 420px;
  color: var(--light);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  background-color: var(--primary);
  padding: 10px 20px;
  box-sizing: border-box;
}
.usersettings .submit.loading {
  background-color: var(--light);
}
.usersettings .submit.success {
  background-color: var(--success);
}
.usersettings .submit.error {
  background-color: var(--warning);
}
@media (max-width: 1000px) {
  .usersettings__body {
    flex-direction: column;
    width: 90%;
  }
  .usersettings__sidepanel__sections {
    display: none;
  }
}
@media (max-width: 500px) {
  .usersettings__content__row {
    flex-direction: column;
    gap: 10px;
  }
  .usersettings__content__row p {
    display: none;
  }
  .usersettings__content__row h4 {
    margin-bottom: 0px;
  }
}

/** @format */
label.checkbox {
  cursor: pointer;
}
label.checkbox input {
  display: none;
}
label.checkbox .checkmark {
  height: 18px;
  width: 18px;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  border-radius: 3px;
  border: 2px solid #e9ecee;
  text-align: center;
  color: transparent;
  font-size: 12px;
  line-height: 14px;
}
label.checkbox .checkmark:before {
  content: '\2714';
}
label.checkbox input[type='checkbox']:checked + .checkmark {
  background-color: #2d3446;
  border-color: #2d3446;
  color: white;
}
label.checkbox .label {
  font-size: 13px;
  margin: 10px;
}

/** @format */
.confirm-popup .popup-component__content {
  width: 300px;
  height: auto;
  display: flex;
  flex-direction: column;
}
.confirm-popup__title {
  font-weight: 600;
  padding-bottom: 10px;
}
.confirm-popup__text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 36px;
  font-size: 15px;
  line-height: 19px;
  text-align: center;
  cursor: default;
}
.confirm-popup__buttons {
  box-shadow: 0px 0px 10px #0001;
  display: flex;
}
.confirm-popup__no-btn {
  width: 50%;
  text-align: center;
  height: 50px;
  line-height: 52px;
  font-weight: 500;
  cursor: pointer;
}
.confirm-popup__no-btn:hover {
  background-color: var(--boxShadow);
}
.confirm-popup__yes-btn {
  width: 50%;
  text-align: center;
  height: 50px;
  line-height: 52px;
  background-color: var(--warning);
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.confirm-popup__yes-btn:hover {
  opacity: 0.9;
}

/** @format */
.popup-component {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0005;
}
.popup-component__content {
  background-color: var(--light);
  width: 70%;
  height: 70%;
  max-width: 880px;
  max-height: 700px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (max-width: 650px) {
  .popup-component__fullscreen-on-mobile .popup-component__content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}

/** @format */
.resource-button {
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 500;
  color: var(--light);
  background-color: var(--lightPrimary);
}
.resource-button.loading {
  background-color: var(--light);
}
.resource-button.success {
  background-color: var(--success);
}
.resource-button.error {
  background-color: var(--warning);
}
.resource-button.disabled {
  background-color: var(--lightGrey);
  cursor: default;
}
.resource-button__error-msg {
  text-align: center;
  color: var(--warning);
}

/** @format */
.terms {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--light);
  overflow-y: auto;
}
.terms__header {
  padding: 20px;
  display: flex;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}
.terms__header__back {
  font-size: 14px;
  color: var(--darkGrey);
  font-weight: 600;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.terms__header__back .svg {
  margin-right: 8px;
}
.terms__header__back .svg svg path {
  fill: var(--darkGrey);
}
.terms__header__menu {
  flex-grow: 1;
}
.terms__header__menu ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.terms__header__menu ul li {
  color: var(--grey);
  font-weight: 500;
  font-size: 14px;
  line-height: 26px;
  cursor: pointer;
}
.terms__header__menu ul .active {
  color: var(--lightPrimary);
}
.terms__content {
  display: flex;
  width: 100%;
  height: 100%;
}
.terms__content__text {
  box-sizing: border-box;
  width: 100%;
}
.terms__content__text embed,
.terms__content__text iframe {
  width: 100%;
  height: 100%;
}
.terms__content__text__section h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--darkGrey);
  margin-bottom: 35px;
}
.terms__content__text__section p {
  font-size: 14px;
  font-weight: 500;
  color: var(--darkGrey);
  line-height: 20px;
  margin-bottom: 65px;
}
.terms__content__text__section + .terms__content__text__section {
  border-top: 1px solid var(--grey);
  padding-top: 65px;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(48, 48, 49, 0.85);
  z-index: 200;
}
.popup__content {
  width: 37%;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 2px 6px 0 rgba(45, 52, 70, 0.06);
  position: relative;
  padding: 50px 40px 50px;
  justify-content: center;
}
.popup__content__close {
  position: absolute;
  display: block;
  right: 20px;
  top: 20px;
  padding: 10px;
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.popup__content__close svg path {
  fill: var(--grey);
}
.popup__content__close .svg {
  font-size: 0px;
}
.popup__content__pic .svg {
  display: block;
  margin: 0 auto;
  width: 36px;
  height: 36px;
  margin-bottom: 27px;
}
.popup__content h4 {
  color: var(--darkGrey);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  text-align: center;
  margin-bottom: 21px;
}
.popup__content p {
  color: var(--darkGrey);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
  white-space: pre-line;
}
.popup__content__buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.popup__content input {
  display: none;
}
.popup__content button + button {
  margin-left: 15px;
}
.popup__content button {
  margin-top: 40px;
  height: 45px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}
.popup__content .cancel {
  background-color: var(--light);
  color: var(--lightPrimary);
  border: 2px solid var(--lightPrimary);
}
.popup__content .validate {
  background-color: var(--lightPrimary);
  color: var(--light);
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.confirmation {
  display: flex;
  width: 100%;
  height: 100%;
}
.confirmation__green {
  background-color: var(--success);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33%;
  min-width: 460px;
  height: 100%;
}
.confirmation__green__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 80px;
  padding-right: 50px;
  padding-top: 40px;
  padding-bottom: 80px;
  box-sizing: border-box;
}
.confirmation__green__content .confirmation__green__content__validate {
  margin-bottom: 39px;
}
.confirmation__green__content__logo {
  cursor: pointer;
}
.confirmation__green__content p {
  font-size: 18px;
  font-weight: 500;
  color: var(--light);
  line-height: 21px;
}
.confirmation__green__content h3 {
  margin-top: 20px;
  color: var(--light);
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 41px;
  line-height: 33px;
}
.confirmation__green__content .button {
  color: var(--success);
  background-color: var(--light);
  width: 220px;
  height: 45px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 100px;
  border-radius: 3px;
}
.confirmation__summary {
  width: 67%;
  height: 100%;
  background-color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.confirmation__summary__content {
  width: 90%;
  display: flex;
  flex-direction: column;
}
.confirmation__summary__content__top {
  margin-top: 25px;
  margin-bottom: 32px;
}
.confirmation__summary__content__top h2 {
  font-size: 18px;
  color: var(--darkGrey);
  font-weight: 500;
  margin-bottom: 7px;
}
.confirmation__summary__content__top__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.confirmation__summary__content__top__container__icons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.confirmation__summary__content__top__container__icons a + a {
  margin-left: 10px;
}
.confirmation__summary__content__text {
  font-size: 12px;
  color: var(--darkGrey);
  font-weight: 500;
  opacity: 0.55;
  margin-bottom: 23px;
  line-height: 14px;
}
.confirmation__summary__content__table {
  padding-bottom: 25px;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
#total-price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
#total-price .svg {
  margin-right: 10px;
}
#total-price .svg svg path {
  fill: var(--darkGrey);
}
#total-price p {
  font-size: 15px;
  font-weight: 700;
  color: var(--darkGrey);
  min-width: 50px;
  text-align: right;
  white-space: nowrap;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.quoteTable {
  border-radius: 6px;
  background-color: var(--light);
  box-shadow: 0 2px 12px 0 #dbdbdd;
}
.quoteTable__header {
  display: flex;
  justify-content: space-between;
  padding: 16px 63px 16px 20px;
}
.quoteTable__header p,
.quoteTable__header .name {
  color: #2d3446;
  font-size: 11px;
  font-weight: 600;
}
.quoteTable .name {
  width: 55%;
  text-align: left;
}
.quoteTable .unitprice {
  width: 15%;
  text-align: right;
}
.quoteTable .quantity {
  width: 15%;
  text-align: right;
}
.quoteTable .totalprice,
.quoteTable .price {
  width: 15%;
  text-align: right;
  opacity: 1 !important;
}
.quoteTable .accordion.active .arrow .svg {
  transform: rotateZ(180deg);
}
.quoteTable .accordion {
  border-bottom: 1px solid #e7ebed;
  width: 100%;
}
.quoteTable .accordion p,
.quoteTable .accordion .name {
  color: var(--darkGrey);
  font-size: 11px;
  font-weight: 500;
}
.quoteTable .accordion__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 12px 63px 12px 20px;
}
.quoteTable .accordion__header .name {
  display: flex;
  align-items: center;
  opacity: 1;
  max-height: 2em;
}
.quoteTable .accordion__header .name .svg {
  margin-right: 8px;
  width: 22px;
  min-width: 22px;
}
.quoteTable .accordion__header .name .svg svg {
  width: 22px;
}
.quoteTable .accordion__header .name .svg path {
  fill: #0a2e67;
}
.quoteTable .accordion__header .arrow {
  position: absolute;
  right: 18px;
  height: 100%;
  width: 10px;
}
.quoteTable .accordion__header .arrow .svg {
  transform-origin: center;
  transition: 0.5s all;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quoteTable .accordion__header .arrow .svg path {
  fill: var(--grey);
}
.quoteTable .accordion__content {
  display: flex;
  flex-direction: column;
  padding: 0px 63px 0px 65px;
  overflow: hidden;
  transition: all 0.5s;
}
.quoteTable .accordion__content p {
  opacity: 0.7;
}
.quoteTable .accordion__content .option {
  margin-top: 11px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.quoteTable .accordion__content .option .name {
  position: relative;
}
.quoteTable .accordion__content .option .name:before {
  content: '-';
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
}
.quoteTable .accordion__content .option:last-child {
  padding-bottom: 23px;
}
.quoteTable .accordion__content.demands {
  padding: 0px 63px 0px 25px;
}
.quoteTable .accordion__content.demands .toggleSwitch {
  margin-right: 2px;
}
.quoteTable .accordion__content.demands .name:before {
  content: none;
}
.quoteTable .accordion__content.demands .demand {
  display: flex;
  flex-direction: column;
}
.quoteTable .accordion__content.demands .demand__description {
  padding: 0px 0px 0px 32px;
  width: 55%;
  margin-top: 12px;
  padding-bottom: 24px;
}
.quoteTable .quoteSection.accordion > .accordian__header {
  padding-left: 16px !important;
}
.quoteTable .quoteSection.accordion > .accordian__content {
  padding: 0px;
}
.quoteTable .quoteSection.accordion .accordian__header {
  padding-bottom: 0px;
}
.quoteTable .quoteSection .quoteRow.accordion {
  border-bottom: unset;
  opacity: 1;
}
.quoteTable .quoteSection .quoteGroup.accordion .accordion__header {
  padding-bottom: 0px;
}
.quoteTable .quoteRow:hover .accordion__header .svg path {
  fill: #1258c5;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.toggleSwitch {
  position: relative;
  width: 28px;
  min-width: 28px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-align: left;
}
.toggleSwitch__input {
  display: none;
}
.toggleSwitch__label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 0 solid var(--dark);
  border-radius: 20px;
  margin: 0;
}
.toggleSwitch__label:focus {
  outline: none;
}
.toggleSwitch__label:focus > span {
  box-shadow: 0 0 2px 5px red;
}
.toggleSwitch__label > span:focus {
  outline: none;
}
.toggleSwitch__inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.toggleSwitch__inner:before,
.toggleSwitch__inner:after {
  content: '';
  display: block;
  float: left;
  width: 50%;
  height: 15px;
  padding: 0;
  box-sizing: border-box;
}
.toggleSwitch__inner:before {
  background-color: var(--darkGrey);
}
.toggleSwitch__inner:after {
  background-color: #dce2f1;
}
.toggleSwitch-disabled {
  background-color: #e7ebed;
  cursor: not-allowed;
}
.toggleSwitch-disabled:before {
  background-color: #e7ebed;
  cursor: not-allowed;
}
.toggleSwitch__switch {
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px;
  background: var(--light);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}
.toggleSwitch__input:checked + .toggleSwitch__label .toggleSwitch__inner {
  margin-left: 0;
}
.toggleSwitch__input:checked + .toggleSwitch__label .toggleSwitch__switch {
  right: 0px;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
/** @format */
.dashboardheader {
  position: relative;
  padding: 0px;
  padding-right: 7.32064422vw;
  padding-left: 7.32064422vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  margin-top: 2.56222548vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader {
    padding-right: 13.02083333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader {
    padding-left: 13.02083333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader {
    margin-top: 4.55729167vh;
  }
}
.dashboardheader__left {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  color: var(--darkGrey);
  text-decoration: none;
  flex: 0 1 auto;
  cursor: pointer;
}
.dashboardheader__left__logo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.dashboardheader__left__logo div {
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  width: 8.562vw;
  height: 3.5vw;
  flex: 0 1 auto;
  margin-right: 2vw;
  margin-left: 10px;
}
.dashboardheader__left__welcome p {
  font-size: 1.75695461vw;
  font-weight: 500;
  color: var(--darkgrey);
  margin-bottom: 0.73206442vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__left__welcome p {
    font-size: 3.125vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__left__welcome p {
    margin-bottom: 1.30208333vh;
  }
}
.dashboardheader__left__welcome span {
  font-size: 1.02489019vw;
  font-weight: 500;
  color: var(--grey);
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__left__welcome span {
    font-size: 1.82291667vh;
  }
}
.dashboardheader__right {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex: 0 1 auto;
}
.dashboardheader__right__nav {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex: 0 1 auto;
}
.dashboardheader__right__nav .separator {
  flex: 0 1 auto;
  width: 2px;
  height: 2.92825769vw;
  background-color: #e8e8e9;
  margin-right: 1.46412884vw;
  margin-left: 1.46412884vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav .separator {
    height: 5.20833333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav .separator {
    margin-right: 2.60416667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav .separator {
    margin-left: 2.60416667vh;
  }
}
.dashboardheader__right__nav__icon + .dashboardheader__right__nav__icon {
  margin-left: 1.46412884vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__icon + .dashboardheader__right__nav__icon {
    margin-left: 2.60416667vh;
  }
}
.dashboardheader__right__nav__icon {
  flex: 0 1 auto;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.dashboardheader__right__nav__icon p {
  font-weight: 600;
  flex: 0 1 auto;
  font-size: 0.87847731vw;
  color: var(--darkgrey);
  margin-left: 0.21961933vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__icon p {
    font-size: 1.5625vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__icon p {
    margin-left: 0.390625vh;
  }
}
.dashboardheader__right__nav__icon span {
  width: 1.75695461vw;
  height: 1.75695461vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__icon span {
    width: 3.125vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__icon span {
    height: 3.125vh;
  }
}
.dashboardheader__right__nav__icon .close {
  background-color: var(--darkgrey);
  border-radius: 50%;
}
.dashboardheader__right__nav__icon .close svg path {
  fill: var(--light);
}
.dashboardheader__right__nav__icon:hover svg path {
  fill: var(--lightprimary);
}
.dashboardheader__right__nav__icon:hover p {
  color: var(--lightprimary);
}
.dashboardheader__right__nav__actions {
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: transparent;
  cursor: pointer;
}
.dashboardheader__right__nav__actions .svg {
  margin-right: 0.5124451vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__actions .svg {
    margin-right: 0.91145833vh;
  }
}
.dashboardheader__right__nav__actions p {
  font-size: 0.95168375vw;
  color: var(--darkgrey);
  font-weight: 600;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__actions p {
    font-size: 1.69270833vh;
  }
}
.dashboardheader__right__nav__actions + .dashboardheader__right__nav__actions {
  margin-left: 1.24450952vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__actions + .dashboardheader__right__nav__actions {
    margin-left: 2.21354167vh;
  }
}
.dashboardheader__right__nav__tab {
  padding-top: 0.65885798vw;
  padding-right: 2.12298682vw;
  padding-bottom: 0.80527086vw;
  padding-left: 2.12298682vw;
  background-color: var(--primary);
  color: var(--light);
  text-decoration: none;
  box-shadow: 0 2px 12px 0 var(--boxshadow);
  border-radius: 4px;
  font-size: 1.02489019vw;
  font-weight: 500;
  margin-left: 1.83016105vw;
  flex: 0 1 auto;
  cursor: pointer;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__tab {
    padding-top: 1.171875vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__tab {
    padding-right: 3.77604167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__tab {
    padding-bottom: 1.43229167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__tab {
    padding-left: 3.77604167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__tab {
    font-size: 1.82291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__tab {
    margin-left: 3.25520833vh;
  }
}
.dashboardheader__right__nav__price {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}
.dashboardheader__right__nav__price .svg {
  margin-right: 0.73206442vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__price .svg {
    margin-right: 1.30208333vh;
  }
}
.dashboardheader__right__nav__price p {
  font-size: 1.09809663vw;
  font-weight: 700;
  color: var(--lightprimary);
  min-width: 3.66032211vw;
  text-align: right;
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__price p {
    font-size: 1.953125vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboardheader__right__nav__price p {
    min-width: 6.51041667vh;
  }
}
.panel-open .dashboard__content .panel {
  transform: translateX(0%);
  transition: transform 0.5s;
}
.dashboard {
  height: 100%;
  display: flex;
  padding-top: 1.83016105vw;
  padding-right: 7.32064422vw;
  padding-bottom: 2.92825769vw;
  padding-left: 7.32064422vw;
  box-sizing: border-box;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard {
    padding-top: 3.25520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard {
    padding-right: 13.02083333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard {
    padding-bottom: 5.20833333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard {
    padding-left: 13.02083333vh;
  }
}
.dashboard__main {
  display: flex;
  flex: 1 0 0;
  gap: 20px;
  height: 50%;
}
.dashboard__timeline {
  flex: 1 0 0;
}
.dashboard__timeline .timeline-component {
  margin-top: 40px;
}
.dashboard.no-timeline .dashboard__content .cards__sector {
  width: auto;
  height: 50%;
}
.dashboard.no-timeline .dashboard__content .cards__sector__details__infos {
  width: 45%;
}
.dashboard.no-timeline .dashboard__content .cards__infos {
  width: auto;
  height: 50%;
}
.dashboard.no-timeline .dashboard__content .cards__body {
  flex-direction: row;
}
.dashboard.no-timeline .dashboard__content .cards__body-welcome {
  width: 65%;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
}
.dashboard.no-timeline .dashboard__content .cards__body-welcome-text {
  flex-grow: 1;
}
.dashboard.no-timeline .dashboard__content .photos {
  width: 50%;
}
.dashboard.no-timeline .dashboard__content .cards {
  flex-direction: column;
  width: 50%;
}
.dashboard__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.dashboard__content .cards {
  display: flex;
  flex-direction: row;
  width: 66.66%;
  gap: 20px;
}
.dashboard__content .cards__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.dashboard__content .cards__body-welcome {
  padding: 20px 0px;
  font-size: 14px;
  font-weight: 600;
}
.dashboard__content .cards__body-welcome button {
  margin-top: 20px;
  width: 100%;
}
.dashboard__content .cards__sector {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  height: 100%;
  width: 50%;
  box-sizing: border-box;
  overflow: auto;
}
.dashboard__content .cards__sector .card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.dashboard__content .cards__sector .card-header__left {
  display: flex;
  align-items: center;
}
.dashboard__content .cards__sector .card-header__left svg {
  width: 1.17130307vw;
  height: 1.17130307vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__left svg {
    width: 2.08333333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__left svg {
    height: 2.08333333vh;
  }
}
.dashboard__content .cards__sector .card-header__left__right {
  margin-left: 0.5124451vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__left__right {
    margin-left: 0.91145833vh;
  }
}
.dashboard__content .cards__sector .card-header__left__title {
  font-size: 0.73206442vw;
  color: var(--grey);
  text-transform: uppercase;
  font-weight: 600;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__left__title {
    font-size: 1.30208333vh;
  }
}
.dashboard__content .cards__sector .card-header__left__count {
  margin-left: 0.73206442vw;
  font-size: 0.73206442vw;
  color: var(--grey);
  text-transform: uppercase;
  font-weight: 600;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__left__count {
    margin-left: 1.30208333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__left__count {
    font-size: 1.30208333vh;
  }
}
.dashboard__content .cards__sector .card-header__nav {
  display: flex;
  flex-direction: row-reverse;
}
.dashboard__content .cards__sector .card-header__nav svg {
  width: 1.17130307vw;
  height: 1.17130307vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__nav svg {
    width: 2.08333333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__nav svg {
    height: 2.08333333vh;
  }
}
.dashboard__content .cards__sector .card-header__nav__right {
  margin-left: 0.5124451vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector .card-header__nav__right {
    margin-left: 0.91145833vh;
  }
}
.dashboard__content .cards__sector .card-header__nav .enabled {
  cursor: pointer;
}
.dashboard__content .cards__sector .card-header__nav .enabled path {
  fill: var(--dark);
}
.dashboard__content .cards__sector .card-header__nav .disabled {
  pointer-events: none;
}
.dashboard__content .cards__sector .card-header__nav .disabled path {
  fill: var(--grey);
}
.dashboard__content .cards__sector__details {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1.46412884vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details {
    margin-top: 2.60416667vh;
  }
}
.dashboard__content .cards__sector__details__config {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dashboard__content .cards__sector__details__config p {
  font-size: 1.02489019vw;
  font-weight: 600;
  line-height: 1.17130307vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__config p {
    font-size: 1.82291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__config p {
    line-height: 2.08333333vh;
  }
}
.dashboard__content .cards__sector__details__config .download {
  font-size: 11px;
  font-size: 0.80527086vw;
  font-weight: 500;
  color: var(--grey);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  cursor: pointer;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__config .download {
    font-size: 1.43229167vh;
  }
}
.dashboard__content .cards__sector__details__config .download svg {
  margin-right: 0.36603221vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__config .download svg {
    margin-right: 0.65104167vh;
  }
}
.dashboard__content .cards__sector__details__config .download svg path {
  fill: var(--grey);
}
.dashboard__content .cards__sector__details__config .customize {
  margin-top: 2.92825769vw;
  width: 17.56954612vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__config .customize {
    margin-top: 5.20833333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__config .customize {
    width: 31.25vh;
  }
}
.dashboard__content .cards__sector__details__infos {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dashboard__content .cards__sector__details__infos h4 {
  font-size: 0.87847731vw;
  font-weight: 600;
  color: var(--grey);
  margin-bottom: 1.53733529vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos h4 {
    font-size: 1.5625vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos h4 {
    margin-bottom: 2.734375vh;
  }
}
.dashboard__content .cards__sector__details__infos .info + .info {
  margin-top: 1.02489019vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info + .info {
    margin-top: 1.82291667vh;
  }
}
.dashboard__content .cards__sector__details__infos .info {
  display: flex;
  align-items: center;
}
.dashboard__content .cards__sector__details__infos .info .progressCircle {
  width: 5.12445095vw;
  left: 1.46412884vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info .progressCircle {
    width: 9.11458333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info .progressCircle {
    left: 2.60416667vh;
  }
}
.dashboard__content .cards__sector__details__infos .info__picto {
  flex: 0 1 auto;
}
.dashboard__content .cards__sector__details__infos .info__picto .svg {
  margin-right: 0.43923865vw;
  width: 1.53733529vw;
  height: 1.53733529vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info__picto .svg {
    margin-right: 0.78125vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info__picto .svg {
    width: 2.734375vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info__picto .svg {
    height: 2.734375vh;
  }
}
.dashboard__content .cards__sector__details__infos .info__picto .svg svg {
  width: 100%;
  height: 100%;
}
.dashboard__content .cards__sector__details__infos .info__picto .svg svg path {
  fill: var(--darkGrey);
}
.dashboard__content .cards__sector__details__infos .info__data {
  flex: 0 1 auto;
}
.dashboard__content .cards__sector__details__infos .info__data__title {
  font-size: 0.73206442vw;
  font-weight: 600;
  color: var(--grey);
  margin-bottom: 0.14641288vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info__data__title {
    font-size: 1.30208333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info__data__title {
    margin-bottom: 0.26041667vh;
  }
}
.dashboard__content .cards__sector__details__infos .info__data__text {
  font-size: 0.87847731vw;
  font-weight: 600;
  color: var(--darkGrey);
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__sector__details__infos .info__data__text {
    font-size: 1.5625vh;
  }
}
.dashboard__content .cards__infos {
  width: 50%;
  display: flex;
  height: 100%;
  box-sizing: border-box;
}
.dashboard__content .cards__infos .announcements {
  display: flex;
  flex-direction: column;
  padding: 20px 20px;
  flex-grow: 1;
}
.dashboard__content .cards__infos .announcements .messages {
  overflow: auto;
  padding: 0px 20px 20px;
  margin: 0px -20px -20px;
}
.dashboard__content .cards__infos .announcements .no-messages {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aeaeae;
}
.dashboard__content .cards__infos .announcements .message {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--darkerLight);
  width: 100%;
  padding: 20px 16px 16px 25px;
  border-radius: 6px;
  box-sizing: border-box;
  margin-bottom: 15px;
}
.dashboard__content .cards__infos .announcements .message p {
  font-size: 14px;
  font-weight: normal;
  color: var(--dark);
  white-space: pre-wrap;
}
.dashboard__content .cards__infos .announcements .message .date {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey);
  align-self: end;
}
.dashboard__content .cards__infos .contact {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  width: 19.18008785vw;
  height: 100%;
  box-sizing: border-box;
  margin-right: 2.92825769vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact {
    width: 34.11458333vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact {
    margin-right: 5.20833333vh;
  }
}
.dashboard__content .cards__infos .contact__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dashboard__content .cards__infos .contact__content__photo {
  border-radius: 50%;
  height: 8.05270864vw;
  width: 8.05270864vw;
  max-height: 8.05270864vw;
  max-width: 8.05270864vw;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 120%;
  margin-bottom: 1.61054173vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content__photo {
    height: 14.32291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content__photo {
    width: 14.32291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content__photo {
    max-height: 14.32291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content__photo {
    max-width: 14.32291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content__photo {
    margin-bottom: 2.86458333vh;
  }
}
.dashboard__content .cards__infos .contact__content .svg {
  height: 3.66032211vw;
  width: 3.66032211vw;
  margin-bottom: 0.36603221vw;
  margin-top: 2.92825769vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content .svg {
    height: 6.51041667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content .svg {
    width: 6.51041667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content .svg {
    margin-bottom: 0.65104167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content .svg {
    margin-top: 5.20833333vh;
  }
}
.dashboard__content .cards__infos .contact__content .svg svg {
  width: 100%;
  height: 100%;
}
.dashboard__content .cards__infos .contact__content .svg svg path {
  fill: var(--darkGrey);
}
.dashboard__content .cards__infos .contact__content p {
  font-size: 1.02489019vw;
  font-weight: 600;
  color: var(--darkGrey);
  margin-bottom: 0.80527086vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content p {
    font-size: 1.82291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content p {
    margin-bottom: 1.43229167vh;
  }
}
.dashboard__content .cards__infos .contact__content .email {
  text-decoration: underline;
  cursor: pointer;
  margin-bottom: 7px;
}
.dashboard__content .cards__infos .contact__content a {
  font-size: 1.02489019vw;
  font-weight: 500;
  color: var(--grey);
  line-height: 1.02489019vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content a {
    font-size: 1.82291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos .contact__content a {
    line-height: 1.82291667vh;
  }
}
.dashboard__content .cards__infos__data {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: space-between;
}
.dashboard__content .cards__infos__data .limit,
.dashboard__content .cards__infos__data .funds {
  width: 19.10688141vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .limit,
  .dashboard__content .cards__infos__data .funds {
    width: 33.984375vh;
  }
}
.dashboard__content .cards__infos__data .limit__content,
.dashboard__content .cards__infos__data .funds__content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dashboard__content .cards__infos__data .limit__content .svg,
.dashboard__content .cards__infos__data .funds__content .svg {
  width: 3.07467057vw;
  height: 3.07467057vw;
  margin-right: 0.43923865vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .limit__content .svg,
  .dashboard__content .cards__infos__data .funds__content .svg {
    width: 5.46875vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .limit__content .svg,
  .dashboard__content .cards__infos__data .funds__content .svg {
    height: 5.46875vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .limit__content .svg,
  .dashboard__content .cards__infos__data .funds__content .svg {
    margin-right: 0.78125vh;
  }
}
.dashboard__content .cards__infos__data .limit__content .svg svg,
.dashboard__content .cards__infos__data .funds__content .svg svg {
  width: 100%;
  height: 100%;
}
.dashboard__content .cards__infos__data .limit__content__date,
.dashboard__content .cards__infos__data .funds__content__date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.dashboard__content .cards__infos__data .limit__content__date h5,
.dashboard__content .cards__infos__data .funds__content__date h5 {
  font-size: 1.02489019vw;
  font-weight: 600;
  color: var(--light);
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .limit__content__date h5,
  .dashboard__content .cards__infos__data .funds__content__date h5 {
    font-size: 1.82291667vh;
  }
}
.dashboard__content .cards__infos__data .limit__content__date h4,
.dashboard__content .cards__infos__data .funds__content__date h4 {
  font-size: 2.04978038vw;
  font-weight: bold;
  color: var(--light);
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .limit__content__date h4,
  .dashboard__content .cards__infos__data .funds__content__date h4 {
    font-size: 3.64583333vh;
  }
}
.dashboard__content .cards__infos__data .funds {
  background-color: var(--light);
}
.dashboard__content .cards__infos__data .funds__header h2 {
  color: var(--grey);
}
.dashboard__content .cards__infos__data .funds__content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.dashboard__content .cards__infos__data .funds__content .svg path {
  fill: var(--darkGrey);
}
.dashboard__content .cards__infos__data .funds__content__date h5 {
  font-size: 1.02489019vw;
  font-weight: 600;
  color: var(--darkGrey);
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .funds__content__date h5 {
    font-size: 1.82291667vh;
  }
}
.dashboard__content .cards__infos__data .funds__content__date h4 {
  font-size: 2.04978038vw;
  font-weight: bold;
  color: var(--darkGrey);
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .cards__infos__data .funds__content__date h4 {
    font-size: 3.64583333vh;
  }
}
.dashboard__content .photos {
  width: 33.33%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dashboard__content .photos .overlay {
  background: linear-gradient(180deg, rgba(45, 52, 70, 0.15) 0%, rgba(93, 94, 94, 0) 25%, rgba(93, 94, 94, 0) 75%, rgba(45, 52, 70, 0.15) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--light);
  padding-top: 1.83016105vw;
  padding-right: 1.83016105vw;
  padding-bottom: 1.83016105vw;
  padding-left: 1.83016105vw;
  box-sizing: border-box;
  border-radius: 6px;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay {
    padding-top: 3.25520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay {
    padding-right: 3.25520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay {
    padding-bottom: 3.25520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay {
    padding-left: 3.25520833vh;
  }
}
.dashboard__content .photos .overlay > div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dashboard__content .photos .overlay__title {
  font-size: 0.73206442vw;
  font-weight: 600;
  text-transform: uppercase;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay__title {
    font-size: 1.30208333vh;
  }
}
.dashboard__content .photos .overlay__date {
  margin-bottom: 0.36603221vw;
  font-size: 0.73206442vw;
  font-weight: 500;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay__date {
    margin-bottom: 0.65104167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay__date {
    font-size: 1.30208333vh;
  }
}
.dashboard__content .photos .overlay__desc {
  width: 100%;
  font-size: 0.87847731vw;
  line-height: 1.17130307vw;
  font-weight: 500;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay__desc {
    font-size: 1.5625vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos .overlay__desc {
    line-height: 2.08333333vh;
  }
}
.dashboard__content .photos__fullscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  z-index: 170;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashboard__content .photos__fullscreen__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 17px 25px;
  cursor: pointer;
  color: var(--light);
}
.dashboard__content .photos__fullscreen__close:after {
  font-size: 1.17130307vw;
  content: '\2715';
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos__fullscreen__close:after {
    font-size: 2.08333333vh;
  }
}
.dashboard__content .photos__fullscreen__prev,
.dashboard__content .photos__fullscreen__next {
  position: absolute;
  top: 50%;
  margin-top: -36px;
  line-height: 24px;
  padding: 24px;
  cursor: pointer;
  color: var(--light);
}
.dashboard__content .photos__fullscreen__next {
  right: 0;
}
.dashboard__content .photos__fullscreen__next:after {
  content: '\276D';
}
.dashboard__content .photos__fullscreen__prev {
  left: 0;
}
.dashboard__content .photos__fullscreen__prev:after {
  content: '\276C';
}
.dashboard__content .photos__fullscreen__photo {
  width: 90%;
  height: 90%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.dashboard__content .photos__fullscreen__photo .overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(93, 94, 94, 0) 25%, rgba(93, 94, 94, 0) 75%, rgba(0, 0, 0, 0.5) 100%);
  border-radius: none;
}
.dashboard__content .photos__fullscreen__photo .overlay__desc {
  text-overflow: none;
  white-space: normal;
  overflow: visible;
}
.dashboard__content .photos__photo {
  flex: 1 0;
  height: 72.3%;
  width: 100%;
  border-radius: 6px;
  background-size: cover;
  background-repeat: none;
  background-position: bottom;
  cursor: pointer;
  position: relative;
}
.dashboard__content .photos__photo.solo {
  height: 100%;
}
.dashboard__content .photos__photo .overlay__desc {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.dashboard__content .photos__thumbnails {
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  height: 18.9%;
  width: 100%;
  justify-content: space-between;
  gap: 20px;
}
.dashboard__content .photos__thumbnails__thumbnail {
  box-sizing: border-box;
  flex: 0 1 auto;
  width: 50%;
  border-radius: 6px;
  background-size: cover;
  background-repeat: none;
  background-position: bottom;
  position: relative;
  cursor: pointer;
  background-color: var(--lightGrey);
  overflow: hidden;
}
.dashboard__content .photos__thumbnails .last:after {
  content: '';
  color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  font-size: 0.80527086vw;
  font-weight: 500;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(32, 35, 44, 0.35);
  background-image: url(/assets/icons/icon-pictures.png);
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .photos__thumbnails .last:after {
    font-size: 1.43229167vh;
  }
}
.dashboard__content .panel {
  display: none !important;
  position: absolute;
  transform: translateX(100%);
  box-sizing: border-box;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 26.42752562vw;
  flex: 0 1 auto;
  padding-top: 1.53733529vw;
  padding-bottom: 1.53733529vw;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 7px 48px 0 rgba(0, 0, 0, 0.07);
  z-index: 120;
  background-color: var(--light);
  transition: transform 0.5s;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel {
    width: 47.00520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel {
    padding-top: 2.734375vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel {
    padding-bottom: 2.734375vh;
  }
}
.dashboard__content .panel__header {
  position: relative;
  padding-left: 1.83016105vw;
  padding-right: 1.83016105vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__header {
    padding-left: 3.25520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__header {
    padding-right: 3.25520833vh;
  }
}
.dashboard__content .panel__header h2 {
  font-size: 10px;
  color: var(--grey);
  margin-bottom: 27px;
  margin-bottom: 1.97657394vw;
  flex: 0 1 auto;
  font-weight: 600;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__header h2 {
    margin-bottom: 3.515625vh;
  }
}
.dashboard__content .panel__header hr {
  border-top: none;
  border-bottom: 1px solid #e7ebed;
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  margin: 0px;
}
.dashboard__content .panel__cards {
  overflow-y: auto;
  margin-bottom: 1.61054173vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards {
    margin-bottom: 2.86458333vh;
  }
}
.dashboard__content .panel__cards__card + .dashboard__content .panel__cards__card {
  margin-top: 0.5124451vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card + .dashboard__content .panel__cards__card {
    margin-top: 0.91145833vh;
  }
}
.dashboard__content .panel__cards__card {
  padding-left: 1.83016105vw;
  padding-right: 1.83016105vw;
  position: relative;
  top: -0.07320644vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card {
    padding-left: 3.25520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card {
    padding-right: 3.25520833vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card {
    top: -0.13020833vh;
  }
}
.dashboard__content .panel__cards__card__content {
  padding-top: 1.09809663vw;
  padding-bottom: 1.24450952vw;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  position: relative;
  color: #20232c;
  font-weight: 500;
  font-size: 0.73206442vw;
  border-bottom: 1px solid #e7ebed;
  border-top: 1px solid #e7ebed;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card__content {
    padding-top: 1.953125vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card__content {
    padding-bottom: 2.21354167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card__content {
    font-size: 1.30208333vh;
  }
}
.dashboard__content .panel__cards__card__content__icon {
  margin-right: 0.43923865vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card__content__icon {
    margin-right: 0.78125vh;
  }
}
.dashboard__content .panel__cards__card__content__icon svg path {
  fill: var(--darkGrey);
}
.dashboard__content .panel__cards__card__content__text h5 {
  font-weight: 600;
  margin-bottom: 0.73206442vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card__content__text h5 {
    margin-bottom: 1.30208333vh;
  }
}
.dashboard__content .panel__cards__card__content__date {
  position: absolute;
  top: 1.02489019vw;
  right: 1.02489019vw;
  opacity: 0.35;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card__content__date {
    top: 1.82291667vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card__content__date {
    right: 1.82291667vh;
  }
}
.dashboard__content .panel__cards__card:last-child {
  margin-bottom: 1.61054173vw;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card:last-child {
    margin-bottom: 2.86458333vh;
  }
}
.dashboard__content .panel__cards__card:last-child .panel__cards__card__content {
  border-bottom-color: var(--light);
}
.dashboard__content .panel__cards__card:first-child .panel__cards__card__content {
  border-top-color: var(--light);
}
.dashboard__content .panel__cards__card:hover {
  background-color: #f9f9fd;
  z-index: 1;
}
.dashboard__content .panel__cards__card:hover:before {
  content: '';
  position: absolute;
  width: 0.43923865vw;
  height: 0.43923865vw;
  background-color: var(--lightPrimary);
  top: 1.24450952vw;
  left: 0.73206442vw;
  border-radius: 50%;
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card:hover:before {
    width: 0.78125vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card:hover:before {
    height: 0.78125vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card:hover:before {
    top: 2.21354167vh;
  }
}
@media (min-aspect-ratio: 16/9) {
  .dashboard__content .panel__cards__card:hover:before {
    left: 1.30208333vh;
  }
}
.dashboard__content .panel__cards__card:hover .panel__cards__card__content {
  border-bottom-color: var(--light);
  border-top-color: var(--light);
}
#main.editor-dashboard {
  overflow: auto;
}
#main.editor-dashboard #body {
  overflow: visible;
}

/** @format */
.timeline-component {
  user-select: none;
  position: relative;
  overflow: hidden;
}
.timeline-component__body {
  height: 220px;
  position: relative;
  min-width: 900px;
}
.timeline-component__grid {
  position: absolute;
  height: 100%;
  width: 100%;
}
.timeline-component__grid-cell {
  position: absolute;
  height: 100%;
  border-left: 1px solid #e7ebed;
}
.timeline-component__grid-cell span {
  font-size: 13px;
  font-weight: 500;
  color: #a6afb7;
  padding: 16px;
  display: block;
}
.timeline-component__cycles {
  position: absolute;
  width: 100%;
  height: 100%;
}
.timeline-component__cycle {
  position: absolute;
  background-color: #eee;
  color: black;
  font-size: 13px;
  height: 110px;
  border-radius: 5px;
  top: 46px;
  box-sizing: border-box;
}
.timeline-component__cycle-body {
  padding: 15px;
  height: 100%;
  box-sizing: border-box;
}
.timeline-component__cycle-name {
  font-weight: 500;
  margin-bottom: 5px;
}
.timeline-component__cycle-name input {
  width: 100%;
  box-sizing: border-box;
}
.timeline-component__cycle-description {
  font-style: italic;
  flex-grow: 1;
}
.timeline-component__cycle-uncertainty {
  position: absolute;
  height: 100%;
  top: 0px;
  right: 0px;
  z-index: 1;
  background: repeating-linear-gradient(-45deg, transparent, transparent 3px, white 3px, white 6px), linear-gradient(to right, transparent, #fffd);
  border-radius: 0px 5px 5px 0px;
}
.timeline-component__events {
  position: absolute;
  width: 100%;
}
.timeline-component__event {
  position: absolute;
  background-color: #9699a2;
  color: #353b4d;
  height: 160px;
  top: 46px;
  width: 2px;
  z-index: 3;
}
.timeline-component__event-name {
  position: absolute;
  right: 0px;
  bottom: 0px;
  font-weight: 500;
  border: 2px solid #9699a2;
  white-space: nowrap;
  padding: 9px 10px;
  border-radius: 5px 3px 3px 5px;
  font-size: 12px;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.oops {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.oops__content {
  width: 510px;
  text-align: center;
}
.oops__content h1 {
  margin-top: 65px;
  margin-bottom: 25px;
  font-size: 32px;
  font-weight: 800;
  color: var(--darkGrey);
}
.oops__content h2 {
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 25px;
  color: var(--darkGrey);
  font-weight: 500;
}
.oops__content__logos {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.oops__content__logos .svg + .svg {
  margin-left: 25px;
}
.oops__content__logos .svg svg {
  height: 50px;
}

/** @format */
.sector-list {
  padding: 50px 20px;
}
.sector-list__sector {
  display: flex;
  gap: 20px;
  width: 720px;
  margin: 20px auto;
  justify-content: space-between;
  max-width: 90%;
  padding: 20px;
  box-shadow: 0px 0px 5px #0002;
  border-radius: 5px;
}
.sector-list__sector-price {
  white-space: nowrap;
}
.sector-list__sector-actions a {
  margin-left: 10px;
  padding: 9px 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px #0002;
  text-decoration: none;
  font-size: 14px;
  color: black;
  white-space: nowrap;
}
.sector-list__sector-actions a.access {
  background-color: #fe784f;
  color: white;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.header {
  position: relative;
  height: 68px;
  box-shadow: 0px 4px 12px 0 rgba(232, 232, 237, 0.5);
  padding: 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 150;
}
.header__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--darkGrey);
  text-decoration: none;
  flex: 0 1 auto;
  padding-left: 25px;
  box-sizing: border-box;
  width: calc(100% - 330px);
}
.header__left__logo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
}
.header__left__logo div {
  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  width: 120px;
  height: 40px;
  flex: 0 1 auto;
  margin: 10px 8px 10px 0px;
}
.header__right {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  flex: 0 1 auto;
  padding-right: 25px;
  box-sizing: border-box;
  width: 330px;
}
.header__right__nav {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex: 0 1 auto;
}
.header__right__nav .icon-action {
  position: relative;
  width: 20px;
  height: 20px;
}
.header__right__nav .icon-action .svg {
  width: 20px;
  height: 20px;
}
.header__right__nav .needs-save .svg:after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: red;
  position: absolute;
  top: 4px;
  left: 27px;
}
.header__right__nav .icon-action + .icon-action {
  padding-right: 0px;
  margin-left: 12px;
}
.header__right__nav .separator {
  flex: 0 1 auto;
  width: 2px;
  height: 48px;
  background-color: #e8e8e9;
  margin: 0 20px;
}
.header__right__nav__icon + .header__right__nav__icon {
  margin-left: 15px;
}
.header__right__nav__icon {
  flex: 0 1 auto;
  cursor: pointer;
}
.header__right__nav__icon:hover svg path {
  fill: var(--lightPrimary);
}
.header__right__nav__actions {
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: transparent;
  cursor: pointer;
}
.header__right__nav__actions[disabled] {
  opacity: 0.3;
  cursor: default;
}
.header__right__nav__actions .svg {
  margin-right: 7px;
  height: 20px;
}
.header__right__nav__actions p {
  font-size: 13px;
  color: var(--darkGrey);
  font-weight: 600;
}
.header__right__nav__actions + .header__right__nav__actions {
  margin-left: 17px;
}
.header__right__nav__tab {
  padding: 9px 29px 11px;
  background-color: var(--primary);
  color: var(--light);
  text-decoration: none;
  box-shadow: 0 2px 12px 0 var(--boxShadow);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  margin-left: 25px;
  flex: 0 1 auto;
  cursor: pointer;
}
.header__right__nav__price svg {
  width: 20px;
  height: 20px;
}

/** @format */
.bakery {
  position: relative;
}
.bakery__open-btn {
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  padding: 16px 5px;
  border-radius: 0px;
}
.bakery__open-btn .svg {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bakery__open-btn .svg svg {
  width: 26px;
  height: 26px;
}
.bakery__open-btn .svg svg path {
  fill: var(--darkGrey);
}
.bakery__open-btn:hover .svg svg path {
  fill: var(--svgHover);
}
.bakery.open .bakery__open-btn {
  background-color: var(--darkGrey);
}
.bakery.open .bakery__open-btn .svg svg path {
  fill: var(--light);
}
.bakery__tooltip {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  border-radius: 5px;
  background-color: white;
  color: black;
  margin-left: -60px;
  padding: 20px;
  box-shadow: 0px 0px 10px #0001;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  z-index: 100;
  margin-top: 5px;
  pointer-events: none;
}
.bakery__tip {
  background-image: url('/assets/img/subscribe_renders.png');
  background-size: auto 280px;
  background-repeat: no-repeat;
  background-color: transparent;
  height: auto;
  margin: 30px auto;
  background-position: top center;
  padding: 320px 30px 0px 30px;
  line-height: 15px;
}
.bakery__tip p {
  font-size: 15px;
  padding: 0px 40px;
  line-height: 17px;
  color: #999;
  text-align: center;
}
.bakery:hover .bakery__tooltip {
  display: block;
}
.bakery__dropdown {
  position: absolute;
  top: 100%;
  right: 0px;
  margin-top: 5px;
  width: 200px;
  background-color: white;
  box-shadow: 0px 0px 10px #0001;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
}
.bakery__dropdown .bakery__render-btn {
  max-width: 180px;
}
.bakery__content-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-top: 1px solid var(--lightGrey);
  background-color: white;
}
.bakery__render-btn {
  width: 100%;
  height: 45px;
  background-color: var(--dark);
  color: var(--light);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 6px;
}
.bakery__render-btn.exit {
  background-color: var(--darkGrey);
}
.bakery__assets {
  position: relative;
  overflow: auto;
  flex-grow: 1;
  max-height: min(440px, 90vh);
}
.bakery__asset {
  position: relative;
  margin: 10px;
  border-radius: 5px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.bakery__asset-remove {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
  z-index: 1000;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bakery__asset-remove:hover {
  color: white;
}
.bakery__asset-remove:after {
  content: '\00D7';
}
.bakery__asset-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bakery__asset-text span {
  font-size: 10px;
}
.bakery__asset-overlay {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000a;
}
.bakery__asset:hover .bakery__asset-overlay {
  display: block;
}
@media (max-width: 650px) {
  .bakery__asset:hover .bakery__asset-overlay {
    background-color: #0000;
  }
}
.bakery__asset.pending {
  height: 40px;
  color: #333;
  animation: pending-render-text 2s infinite alternate;
  font-size: 12px;
}
@keyframes pending-render-text {
  from {
    color: #333;
  }
  to {
    color: #bbb;
  }
}
.bakery__asset.pending .bakery__asset-remove {
  height: 40px;
}
.bakery__asset.ready {
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background-size: cover;
  min-height: 90px;
}
.slideshow {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #000d;
  z-index: 10000;
}
.slideshow__image {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  top: 70px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.slideshow__panorama {
  position: absolute;
  top: 70px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.slideshow__header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 70px;
  background-color: var(--darkGrey);
}
.slideshow__button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 70px;
  height: 70px;
  text-align: center;
  cursor: pointer;
}
.slideshow__button:hover {
  background-color: #fff2;
}
.slideshow__button .svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slideshow__button .svg svg {
  width: 20px;
  height: 20px;
}
.slideshow__button .svg svg path {
  fill: white;
}
.slideshow__button.download {
  right: 100px;
}
.slideshow__button.download .svg svg {
  width: 30px;
  height: 30px;
}
.slideshow__navigate {
  position: absolute;
  top: 70px;
  left: 0px;
  bottom: 0px;
  width: 50px;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.1s linear;
}
.slideshow__navigate:hover {
  opacity: 1;
}
.slideshow__navigate .svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slideshow__navigate .svg svg {
  width: 50px;
  height: 50px;
}
.slideshow__navigate .svg svg path {
  fill: white;
  filter: drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.3));
}
.slideshow__navigate.next {
  left: auto;
  right: 0px;
}
.slideshow__navigate.next .svg svg {
  transform: rotate(90deg);
}
.slideshow__navigate.prev .svg svg {
  transform: rotate(-90deg);
}
.viewer .capture__exit-btn {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  padding: 13px;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 1001;
}
.viewer .capture__exit-btn .svg svg path {
  fill: var(--light);
}
.viewer .capture__overlay {
  pointer-events: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #000a;
  mix-blend-mode: hard-light;
}
.viewer .capture__screen {
  background-color: gray;
  border: 2px solid white;
  border-radius: 5px;
  max-width: 97%;
  max-height: 97%;
  aspect-ratio: 16 / 9;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.viewer .capture__screen:after {
  content: '';
  display: block;
  width: 100vw;
  height: 100vh;
}
.viewer .capture__panel {
  position: absolute;
  bottom: 80px;
  left: 50%;
  background-color: white;
  height: 80px;
  z-index: 1000;
  border-radius: 5px;
  max-width: 90%;
  width: 550px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 0px 30px;
  box-sizing: border-box;
  gap: 30px;
}
.viewer .capture__disabled-text {
  position: absolute;
  bottom: 85px;
  left: 0px;
  width: 100%;
  background-color: #fbcc85;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 5px;
  text-align: center;
  font-size: 13px;
}
.viewer .capture__panel-text {
  flex-grow: 1;
  font-size: 13px;
  max-width: 400px;
}
.viewer .capture__panel-button {
  background-color: var(--primary);
  height: 50px;
  border-radius: 5px;
  cursor: pointer;
  width: 350px;
  color: var(--light);
}
.viewer .capture__panel-button.loading {
  background-color: white;
}
.viewer .capture__panel-button.error {
  background-color: var(--warning);
}
.viewer .capture__panel-button.success {
  background-color: var(--success);
}
.viewer .capture__panel-button.disabled {
  background-color: var(--lightGrey);
  cursor: default;
  font-size: 12px;
  color: var(--grey);
}
@media (max-width: 950px) {
  .viewer .capture__panel {
    flex-direction: column;
    height: 80px;
    padding: 10px 20px;
    text-align: center;
    gap: 10px;
  }
  .viewer .capture__panel-button {
    max-width: 100%;
  }
}
@media (max-width: 650px) {
  .viewer .capture__panel {
    flex-direction: row;
    width: fit-content;
  }
  .viewer .capture__panel-text {
    display: none;
  }
  .viewer .capture__panel-button {
    max-width: 100%;
    width: max-content;
  }
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.steps {
  height: 68px;
  margin-left: 20px;
  overflow-x: hidden;
  position: relative;
}
.steps nav::-webkit-scrollbar {
  display: none;
}
.steps nav {
  display: flex;
  flex-direction: row;
  height: 100%;
  position: relative;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.steps nav .wrapper-left {
  position: sticky;
  left: 0px;
  z-index: 21;
  height: 69px;
  overflow: visible;
  width: 0;
}
.steps nav .wrapper-left.visible .scroll-helper-left {
  opacity: 1;
  width: 50px;
  padding-left: 15px;
}
.steps nav .wrapper-left .scroll-helper-left {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, #ffffff 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 0px;
  height: 100%;
  width: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s opacity;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 14px;
  color: var(--dark);
  padding-left: 0px;
}
.steps nav .wrapper-left .scroll-helper-left span {
  display: flex;
  flex-direction: column;
}
.steps nav .wrapper-left .scroll-helper-left .svg {
  width: 10px;
  transform: rotateZ(90deg);
}
.steps nav .wrapper-right {
  position: sticky;
  right: 0px;
  z-index: 21;
  height: 69px;
  overflow: visible;
  width: 0;
}
.steps nav .wrapper-right.visible .scroll-helper-right {
  opacity: 1;
  width: 50px;
  padding-right: 15px;
}
.steps nav .wrapper-right .scroll-helper-right {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, #ffffff 100%);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  right: 0px;
  height: 100%;
  width: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s opacity;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 14px;
  color: var(--dark);
  padding-right: 0px;
}
.steps nav .wrapper-right .scroll-helper-right span {
  display: flex;
  flex-direction: column;
}
.steps nav .wrapper-right .scroll-helper-right .svg {
  width: 10px;
  transform: rotateZ(270deg);
}
.steps nav:after {
  content: '';
  display: block;
  width: 0px;
  height: 0px;
  position: absolute;
  top: 50%;
  left: -45px;
  transform-origin: center;
  transform: translate(0%, -50%) rotate(-270deg);
  border: 50px solid transparent;
  border-bottom: 22px solid #ffffff;
  border-top: none;
}
.steps__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 22px 0 37px;
  cursor: pointer;
  text-decoration: none;
  color: var(--dark);
  text-align: left;
  background-color: var(--light);
  flex: 0 1 auto;
  height: 69px;
}
.steps__tab:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 0px;
  background-image: url('/assets/img/chevron.png');
  height: 38px;
  width: 13px;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 10;
  transform: translate(0, -50%);
}
.steps__tab:after {
  content: '';
  display: block;
  width: 0px;
  height: 0px;
  position: absolute;
  top: 50%;
  right: -5px;
  transform-origin: center;
  transform: translate(50%, -50%) rotate(-270deg);
  z-index: 10;
  border: 50px solid transparent;
  border-bottom: 22px solid var(--light);
  border-top: none;
}
.steps__tab.selected {
  font-weight: 600;
  background-color: var(--lightSecondary);
}
.steps__tab.selected span {
  color: var(--light);
}
.steps__tab.selected:before {
  display: none;
}
.steps__tab.selected:after {
  border: 50px solid var(--light);
  border-bottom: 22px solid var(--lightSecondary);
  border-top: none;
  right: 0px;
  background-color: var(--light);
  z-index: 20;
}
.steps__tab:last-of-type:after {
  display: none;
}
.steps__tab__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--darkGrey);
}
.steps__tab__until {
  font-size: 9.5px;
  color: var(--darkGrey);
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.tooltip {
  position: relative;
}
.tooltip__content {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 10px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  background-color: var(--light);
  color: var(--dark);
  box-shadow: 2px 2px 10px 0 var(--boxShadow);
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--lightGrey);
  border-style: solid;
  user-select: none;
  width: max-content;
  white-space: pre-wrap;
}
.tooltip__content__top {
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
}
.tooltip__content__bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.tooltip__content__left {
  top: 50%;
  left: 0;
  transform: translateX(-100%) translateY(-50%);
}
.tooltip__content__right {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
}
.tooltip.open .tooltip__content {
  display: block;
}

/** @format */
.signature-popup .spacer {
  padding: 10px;
}
.signature-popup__body {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.signature-popup__body__label {
  font-size: 12px;
  font-weight: 500;
}
.signature-popup__body__line {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  white-space: pre-line;
}
.signature-page {
  display: flex;
  height: 100%;
}
.signature-page__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 600px;
  padding: 60px;
  box-shadow: 0px 4px 12px 0 rgba(232, 232, 237, 0.5);
  overflow: auto;
}
.signature-page__left__bottom {
  display: flex;
  justify-content: space-evenly;
}
.signature-page__title {
  margin-top: 8px;
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #2d3446;
}
.signature-page__title.refused {
  margin-top: 40px;
}
.signature-page__total {
  display: flex;
  justify-content: left;
  margin: 10px 0px 20px 0px;
}
.signature-page__total p {
  margin: 0px 10px;
  font-weight: 600;
}
.signature-page__sign {
  min-width: 250px;
}
.signature-page__right {
  flex-grow: 1;
}
.signature-page .refused-demands {
  font-size: 13px;
}
.signature-page .refused-demands__demand {
  background-color: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
  margin: 20px 0px;
}
.signature-page .refused-demands__description {
  padding: 10px;
  font-style: italic;
  font-size: 12px;
  color: #9b9b9b;
}
.signature-page .refused-demands__description span {
  font-size: 11px;
  line-height: 20px;
}
.signature-page .refused-demands__comment {
  padding: 10px;
  background-color: #f9f9f9;
  white-space: pre-wrap;
}
.signature-page .refused-demands__comment span {
  font-size: 11px;
  line-height: 20px;
}

/** @format */
/* CSS variables. */
:root {
  --PhoneInput-color--focus: #03b2cb;
  --PhoneInputInternationalIconPhone-opacity: 0.8;
  --PhoneInputInternationalIconGlobe-opacity: 0.65;
  --PhoneInputCountrySelect-marginRight: 0.35em;
  --PhoneInputCountrySelectArrow-width: 0.3em;
  --PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
  --PhoneInputCountrySelectArrow-borderWidth: 1px;
  --PhoneInputCountrySelectArrow-opacity: 0.45;
  --PhoneInputCountrySelectArrow-color: currentColor;
  --PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
  --PhoneInputCountrySelectArrow-transform: rotate(45deg);
  --PhoneInputCountryFlag-aspectRatio: 1.5;
  --PhoneInputCountryFlag-height: 1em;
  --PhoneInputCountryFlag-borderWidth: 1px;
  --PhoneInputCountryFlag-borderColor: rgba(0, 0, 0, 0.5);
  --PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
  --PhoneInputCountryFlag-backgroundColor--loading: rgba(0, 0, 0, 0.1);
}
.PhoneInput {
  /* This is done to stretch the contents of this component. */
  display: flex;
  align-items: center;
}
.PhoneInputInput {
  /* The phone number input stretches to fill all empty space */
  flex: 1;
  /* The phone number input should shrink
	   to make room for the extension input */
  min-width: 0;
}
.PhoneInputCountryIcon {
  width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
  height: var(--PhoneInputCountryFlag-height);
}
.PhoneInputCountryIcon--square {
  width: var(--PhoneInputCountryFlag-height);
}
.PhoneInputCountryIcon--border {
  /* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
  background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
  /* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
  /* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}
.PhoneInputCountryIconImg {
  /* Fixes weird vertical space above the flag icon. */
  /* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
  display: block;
  /* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
  width: 100%;
  height: 100%;
}
.PhoneInputInternationalIconPhone {
  opacity: var(--PhoneInputInternationalIconPhone-opacity);
}
.PhoneInputInternationalIconGlobe {
  opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}
/* Styling native country `<select/>`. */
.PhoneInputCountry {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-right: var(--PhoneInputCountrySelect-marginRight);
}
.PhoneInputCountrySelect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
  cursor: default;
}
.PhoneInputCountrySelectArrow {
  display: block;
  content: '';
  width: var(--PhoneInputCountrySelectArrow-width);
  height: var(--PhoneInputCountrySelectArrow-width);
  margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
  border-style: solid;
  border-color: var(--PhoneInputCountrySelectArrow-color);
  border-top-width: 0;
  border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  border-left-width: 0;
  border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
  transform: var(--PhoneInputCountrySelectArrow-transform);
  opacity: var(--PhoneInputCountrySelectArrow-opacity);
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
  box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus), inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}
.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
  opacity: 1;
  color: var(--PhoneInputCountrySelectArrow-color--focus);
}
.PhoneInput {
  border-radius: 4px;
  border: var(--grey) 2px solid;
}
.PhoneInput input {
  outline: none;
  font-size: 14px;
  color: var(--dark);
}
.PhoneInput.error {
  border-color: var(--warning);
}
.PhoneInputCountry {
  margin-left: 10px;
}
.PhoneInputInput {
  border: none;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.viewer {
  position: relative;
  flex-grow: 1;
  background-color: var(--light);
  overflow: hidden;
  outline: none;
}
.viewer__hud {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.viewer__hud-banners {
  display: block;
  pointer-events: all;
}
.viewer__hud-menus {
  display: block;
  position: relative;
  flex-grow: 1;
  pointer-events: none;
}
.viewer__hud-menus > * {
  pointer-events: all;
}
.viewer__view {
  flex: 1 1 0;
  position: relative;
  max-height: 100%;
  overflow: hidden;
}
.viewer .banner {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  background-color: #fed223;
  box-sizing: border-box;
  transition: margin-top 400ms;
  padding: 50px 50px;
  height: 100px;
  margin-top: -100px;
}
.viewer .banner.warning {
  background-color: red;
}
.viewer .banner.show {
  margin-top: 0px;
}
.viewer .banner.history {
  height: 35px;
  padding: 30px 20px;
  background-color: #c1d9ff;
}
.viewer .banner.unclosed-rooms {
  gap: 30px;
  justify-content: space-between;
}
.viewer .banner.unclosed-rooms a.button {
  white-space: nowrap;
  background-color: var(--dark);
  color: var(--light);
  border-radius: 5px;
  text-decoration: none;
  padding: 10px 20px;
}
.viewer .banner .spacer {
  flex-grow: 1;
}
.viewer .banner p {
  font-size: 15px;
  flex: 1 0 0;
}
.viewer .banner button {
  font-size: 14px;
  padding: 8px 20px;
  color: white;
  font-weight: 500;
}
.viewer .banner__help {
  position: relative;
}
.viewer .banner__help-text {
  text-decoration: underline dashed;
  cursor: help;
}
.viewer .banner__help-popup {
  display: none;
  position: absolute;
  background-color: white;
  padding: 20px;
  max-width: 450px;
  border-radius: 5px;
  margin: 10px;
  z-index: 2000;
  border: 1px dashed gray;
  top: 20px;
  left: -50px;
  right: -170px;
}
.viewer .banner__help:hover .norms-banner__help-popup {
  display: block;
}
.viewer .mode-banner {
  gap: 20px;
  background-color: #BFD6EE;
  padding: 15px 20px;
  height: auto;
}
.viewer .mode-banner h3 {
  font-size: 13px;
  white-space: nowrap;
  font-weight: 600;
  margin-bottom: 5px;
}
.viewer .mode-banner p {
  font-size: 13px;
  font-weight: 300;
}
.viewer .mode-banner__done {
  cursor: pointer;
  background-color: var(--light);
  padding: 6px 20px;
  font-size: 13px;
  border-radius: 5px;
}
/*
.creator .viewer {
	background-color: #f6f6f6;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dbdbdb' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-position: center;
	background-attachment: fixed;
	background-size: 60px;
}
*/
.scaled-label {
  font-family: monospace;
}
.set-scale__form {
  position: absolute;
  top: 0px;
  left: 50%;
  height: 30px;
  margin-left: -180px;
  background-color: var(--light);
  padding: 20px;
  box-shadow: 0px 0px 10px #0001;
  border-radius: 0px 0px 8px 8px;
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  z-index: 1000;
}
.set-scale__form input {
  height: 30px;
  width: 80px;
  padding: 0px 10px;
}
.set-scale__form button {
  height: 36px;
  background-color: var(--primary);
  color: var(--light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  padding: 0px 20px;
}
.set-scale__scan {
  display: none;
  position: absolute;
  top: 100px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}
.set-scale-line .scaled-label.foreground {
  fill: var(--secondary);
}
.set-scale-line path {
  stroke: var(--secondary);
}
#main.promoter-creator .controls__top__config {
  display: none;
}
.file-panel {
  border-radius: 4px 4px 0 0;
  background-color: #ffffff;
  box-shadow: 0 -2px 12px 0 #dbdbdd;
  position: absolute;
  left: 0;
  top: 0;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  max-height: 46px;
  transition: 0.5s all;
}
.file-panel .file {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 220px;
  margin: 10px 20px;
  gap: 10px;
}
.file-panel .title {
  opacity: 0.5;
  font-size: 14px;
  margin-bottom: 3px;
}
.file-panel.open {
  max-height: 50%;
  transition: 0.5s all;
}
.file-panel.open h5 > div {
  transform: rotateZ(0deg);
  transition: 0.7s all;
}
.file-panel button {
  padding: 5px;
  display: flex;
}
.file-panel h5 {
  cursor: pointer;
  padding: 14px 16px 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  color: var(--dark);
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
}
.file-panel h5 > div {
  transform: rotateZ(180deg);
  transition: 0.7s all;
}
.file-panel h5 span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--warning);
  display: block;
}
.file-panel h5 .svg {
  width: 10px;
}
.file-panel__content {
  overflow: hidden;
}
.file-panel__content ul .norm + .norm {
  margin-top: 8px;
}
.file-panel__content ul .norm {
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.file-panel__content ul .norm__icon {
  min-width: 16px;
  min-height: 16px;
  width: 16px;
  height: 16px;
  margin-right: 28px;
}
.file-panel__content ul .norm__icon svg {
  width: 100%;
  height: 100%;
}
.file-panel__content ul .norm__data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.file-panel__content ul .norm__data span {
  font-size: 11px;
  line-height: 18px;
  color: var(--grey);
}
.toolbar {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  min-width: 100px;
  overflow: hidden;
}
.toolbar__panels.open .toolbar__left-panels {
  transform: translateX(450px);
}
.toolbar__left-panels {
  position: absolute;
  width: 450px;
  height: 100%;
  margin-left: -450px;
  z-index: 8;
  transform: translateX(0px);
  transition: transform 0.4s ease-in-out;
  background-color: var(--light);
  box-shadow: 0px 0px 10px #0001;
  display: flex;
  flex-direction: column;
}
.toolbar__panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--lightGrey);
  height: 50px;
}
.toolbar__panel-header .close {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.toolbar__panel-header .close svg {
  width: 17px;
  height: 17px;
}
.toolbar__placing-panels {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 12;
}
.toolbar__page {
  width: calc(100% - 100px);
  position: relative;
  display: flex;
  flex-grow: 1;
  z-index: 4;
}
.toolbar__children {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.toolbar__children .viewer {
  width: 100%;
  height: 100%;
}
.toolbar__variants {
  overflow: auto;
}
.toolbar__walls,
.toolbar__objects,
.toolbar__annotations,
.toolbar__comments,
.toolbar__coverings,
.toolbar__tools,
.toolbar__variants {
  width: 100%;
  height: calc(100% - 50px);
  position: relative;
}
.toolbar__placing-footer {
  border-top: 1px solid var(--lightGrey);
  margin: 0px 0px 0px 10px;
  padding: 10px 0px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toolbar__placing-option {
  display: flex;
  align-items: center;
  font-size: 13px;
}
.toolbar__placing-option-text {
  flex-grow: 1;
  display: flex;
  gap: 10px;
  padding: 10px 0px;
}
.toolbar__placing-objects {
  background-color: var(--light);
  position: absolute;
  left: 20px;
  top: 20px;
  box-shadow: 0px 0px 10px #0001;
  border-radius: 5px;
  gap: 20px;
  padding: 0px 20px 0px 10px;
}
.toolbar__placing-objects__head {
  display: flex;
  align-items: center;
}
.toolbar__placing-objects .mode-tooltip {
  width: 100%;
  padding: 10px;
}
.toolbar__placing-objects .item {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex: 0 0 auto;
}
.toolbar__placing-objects .item .svg {
  margin-bottom: 7px;
  height: 40px;
  width: 50%;
}
.toolbar__placing-objects .item .svg svg {
  width: 100%;
  height: 100%;
}
.toolbar__placing-objects .item .svg svg path {
  fill: #1C283F;
}
.toolbar__placing-objects .item p {
  font-size: 13px;
  color: #2d3446;
  font-weight: 500;
  text-align: center;
  word-break: break-word;
}
.toolbar__placing-objects .text {
  width: 190px;
  text-align: center;
  font-size: 14px;
}
.toolbar__placing-objects .cancel-btn {
  background-color: #0076ef;
  color: var(--light);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.toolbar__placing-objects .cancel-btn:hover {
  background-color: #3391f2;
}
.toolbar__placing-objects .cancel-btn:active {
  background-color: #005ebf;
}
.toolbar__placing-covering {
  display: flex;
  flex-direction: column;
  background-color: var(--light);
  border-radius: 5px;
  box-shadow: 0px 0px 10px #0001;
  position: absolute;
  top: 10px;
  left: 10px;
  overflow: hidden;
  width: 500px;
}
.toolbar__placing-covering .covering__head {
  display: flex;
  align-items: center;
  padding: 0px 10px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
.toolbar__placing-covering .covering__footer {
  padding: 15px 20px;
}
.toolbar__placing-covering .covering__footer .toolbar__coverings__row {
  margin: 10px 0px;
}
.toolbar__placing-covering .covering__footer .toolbar__coverings__row span {
  font-size: 12px;
}
.toolbar__placing-covering .covering__expand-btn {
  display: block;
  text-align: center;
  background-color: #fffd;
  width: 100%;
  left: 0px;
  bottom: 0px;
  height: 30px;
  line-height: 30px;
  font-size: 11px;
  cursor: pointer;
}
.toolbar__placing-covering .covering__expand-btn:hover {
  background-color: var(--darkerLight);
}
.toolbar__placing-covering .covering__thumbnail {
  width: 100px;
  height: 100px;
  flex: 0 0 auto;
  background-size: cover;
  background-position: center center;
  background-color: white;
  transform: translateX(-8px);
  border-radius: 6px;
}
.toolbar__placing-covering .covering__legend {
  width: 16px;
  height: 100px;
  border-radius: 6px;
  flex: 0 0 auto;
}
.toolbar__placing-covering .covering__content {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 100px;
  padding: 0px 10px;
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden;
  margin: 0px 10px;
  border-radius: 5px;
}
.toolbar__placing-covering .covering__content .choice-input-comp {
  width: fit-content;
}
.toolbar__placing-covering .covering__content .choice-input-comp__item {
  font-size: 12px;
}
.toolbar__placing-covering .covering__name {
  font-weight: 600;
  margin-bottom: auto;
  text-align: left;
  white-space: pre;
  text-overflow: ellipsis;
  overflow-y: clip;
}
.toolbar__placing-covering .covering__text {
  width: 100%;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  height: 70px;
  height: 100%;
  padding: 10px 0px;
  justify-content: space-between;
  box-sizing: border-box;
}
.toolbar__placing-covering .covering__tuto {
  font-size: 11px;
}
.toolbar__placing-covering .covering__mode {
  font-size: 11px;
  margin-bottom: 5px;
}
.toolbar__placing-covering .covering__done-btn {
  background-color: var(--primary);
  color: var(--light);
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  margin: 10px;
}
.toolbar__placing-covering .covering__done-btn:hover {
  background-color: #3391f2;
}
.toolbar__placing-covering .covering__done-btn:active {
  background-color: #005ebf;
}
.toolbar__walls .scroller,
.toolbar__annotations .scroller,
.toolbar__comments .scroller {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: auto;
  width: auto;
  overflow: auto;
}
.toolbar__walls .scroller__content,
.toolbar__annotations .scroller__content,
.toolbar__comments .scroller__content {
  padding: 20px 30px;
}
.toolbar__walls .wall-group,
.toolbar__annotations .wall-group,
.toolbar__comments .wall-group {
  margin-bottom: 20px;
}
.toolbar__walls .wall-group__title,
.toolbar__annotations .wall-group__title,
.toolbar__comments .wall-group__title {
  font-weight: 600;
  padding: 10px 5px;
}
.toolbar__walls .wall,
.toolbar__annotations .wall,
.toolbar__comments .wall {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 5px;
  border: 1px solid var(--lightGrey);
}
.toolbar__walls .wall:hover,
.toolbar__annotations .wall:hover,
.toolbar__comments .wall:hover {
  background-color: var(--lightGrey);
}
.toolbar__walls .wall__title,
.toolbar__annotations .wall__title,
.toolbar__comments .wall__title {
  font-size: 13px;
  font-weight: 600;
}
.toolbar__walls .wall__description,
.toolbar__annotations .wall__description,
.toolbar__comments .wall__description {
  font-size: 13px;
  color: var(--grey);
  margin-top: 5px;
}
.toolbar__walls .wall .svg,
.toolbar__annotations .wall .svg,
.toolbar__comments .wall .svg {
  width: 50px;
  height: 40px;
  flex-shrink: 0;
}
.toolbar__walls .wall .svg svg,
.toolbar__annotations .wall .svg svg,
.toolbar__comments .wall .svg svg {
  width: 100%;
  height: 100%;
}
.toolbar__walls .wall .svg svg path,
.toolbar__annotations .wall .svg svg path,
.toolbar__comments .wall .svg svg path {
  fill: var(--dark);
}
.toolbar__objects .search {
  position: relative;
  padding: 30px 20px 30px 20px;
  box-sizing: border-box;
  width: 450px;
  height: 100px;
  border-bottom: 1px solid var(--lightGrey);
  margin: 0px;
}
.toolbar__objects .scroller {
  position: absolute;
  top: 100px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  height: auto;
  width: auto;
  overflow: auto;
}
.toolbar__objects .category {
  padding: 15px;
  box-sizing: border-box;
  width: 100%;
}
.toolbar__objects .category.d1 > .category__head {
  font-weight: 600;
  font-size: 15px;
}
.toolbar__objects .category.d2 .category__head {
  border: 1px solid #e3e3e3;
  border-radius: 5px 5px 0px 0px;
  border-bottom: none;
}
.toolbar__objects .category.d2 .category__children {
  background-color: #f9f9f9;
  border-radius: 0px 0px 10px 10px;
  padding: 10px;
  box-shadow: inset 0px 0px 10px #00000011;
  border: 1px solid #e3e3e3;
}
.toolbar__objects .category__head {
  font-size: 13px;
  padding: 10px 15px;
  position: relative;
  cursor: pointer;
}
.toolbar__objects .category__head:after {
  content: '-';
  position: absolute;
  right: 20px;
}
.toolbar__objects .category__children {
  display: flex;
  flex-wrap: wrap;
}
.toolbar__objects .category__children .item:hover svg path,
.toolbar__objects .category__children .item.selected svg path {
  fill: #1258c5;
}
.toolbar__objects .category__children .item:hover p,
.toolbar__objects .category__children .item.selected p {
  color: var(--dark);
}
.toolbar__objects .category.closed.d2 .category__head {
  border-bottom: 1px solid #e3e3e3;
  border-radius: 5px;
}
.toolbar__objects .category.closed .category__head:after {
  content: '+';
}
.toolbar__objects .category.closed .category__children {
  display: none;
}
.toolbar__objects .category__children .item {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
}
.toolbar__objects .category__children .item .svg {
  margin-bottom: 7px;
  height: 40px;
  width: 50%;
}
.toolbar__objects .category__children .item .svg svg {
  width: 100%;
  height: 100%;
}
.toolbar__objects .category__children .item .svg svg path {
  fill: #1C283F;
}
.toolbar__objects .category__children .item p {
  font-size: 13px;
  color: #2d3446;
  font-weight: 500;
  text-align: center;
  word-break: break-word;
}
.toolbar__objects .category__children .item.selected {
  background-color: var(--darkGrey);
}
.toolbar__objects .category__children .item.selected .svg svg path {
  fill: white;
}
.toolbar__objects .category__children .item.selected p {
  color: white;
}
.toolbar__coverings {
  display: flex;
  flex-direction: column;
}
.toolbar__coverings .scroller {
  overflow-y: auto;
}
.toolbar__coverings .search {
  margin-top: 10px;
}
.toolbar__coverings .product-details .title {
  border: none;
}
.toolbar__coverings .products.materials {
  padding: 0px;
}
.toolbar__coverings .products.materials .title {
  cursor: default;
  text-align: center;
  margin-bottom: 20px;
}
.toolbar__coverings .product-card.plinth .product-card__main {
  justify-content: flex-start;
}
.toolbar__coverings .product-card.plinth .product-card__legend {
  min-height: 40px;
  width: 8px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.toolbar__coverings .product-card.empty .product-card__main__thumbnail > div {
  box-sizing: border-box;
  border: var(--lightGrey) 1.4px solid;
}
.toolbar__coverings .product-card__main__info {
  min-height: 40px;
}
.toolbar__coverings .product-card__main__legend {
  width: 20px;
  height: 90px;
  border-radius: 6px;
}
.toolbar__coverings .product-card__main__thumbnail > div {
  width: 44%;
  left: 10px;
}
.toolbar__coverings .product-card__main .paint__colour {
  width: 50%;
  padding: 0;
  border: none;
  margin: 5px 0px;
  cursor: pointer;
}
.toolbar__coverings.show {
  opacity: 1;
  pointer-events: all;
}
.toolbar__coverings__card {
  display: flex;
  align-items: center;
}
.toolbar__coverings__legend {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  margin-left: 10px;
}
.toolbar__coverings__materials {
  flex-grow: 1;
  overflow-y: auto;
  padding: 8px 25px;
  box-shadow: 0px 0px 10px 0px #0001;
  margin-top: 10px;
}
.toolbar__coverings__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 25px;
  min-height: 30px;
}
.toolbar__coverings__row > span {
  font-size: 14px;
  font-weight: 600;
}
.toolbar__coverings__row .choice-input-comp.walls .choice-input-comp__content {
  width: 100%;
  justify-content: space-between;
}
.toolbar__coverings__row input[type='checkbox'] {
  width: 16px;
  height: 16px;
}
.toolbar__coverings__row input[type='text'] {
  border: 1px solid var(--grey);
  border-radius: 4px;
  color: var(--dark);
  padding: 4px;
  font-size: 14px;
}
.toolbar__coverings__row .choice-input-comp__item {
  text-align: center;
  flex-grow: 1;
}
.toolbar__coverings__row .material-orientation {
  width: 60%;
}
.toolbar__coverings__row .material-orientation__edit:hover {
  color: var(--primary);
  cursor: pointer;
}
.toolbar__coverings__row .material-orientation__input {
  width: 30px;
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
}
.toolbar__coverings__row .material-orientation-choices .choice-input-comp__item {
  font-weight: 600;
  font-family: monospace;
  color: var(--darkGrey);
}
.toolbar__coverings__row .material-orientation-choices .choice-input-comp__item.selected {
  color: var(--light);
}
.toolbar__coverings__apply-to-all {
  margin-bottom: 20px;
}
.toolbar__coverings__title {
  text-align: center;
  padding: 20px 30px;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  cursor: pointer;
}
.toolbar__coverings__title.selected {
  font-weight: 600;
  color: var(--primary);
}
.toolbar__coverings__title.selected:after {
  content: '';
  cursor: default;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
}
.toolbar__coverings__title:hover {
  color: var(--primary);
}
.toolbar__coverings__tabs {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-bottom: 1px solid var(--lightGrey);
  margin-bottom: 10px;
}
.toolbar__coverings__btn {
  width: 100%;
}
.toolbar__coverings__viewMode {
  width: 100%;
}
.toolbar__coverings__viewMode svg {
  height: 18px;
}
.toolbar__variants__title {
  text-align: center;
  padding-top: 40px;
  font-weight: 600;
}
.toolbar__variants .variants {
  display: flex;
  flex-direction: column;
  padding: 40px 20px 20px 20px;
}
.toolbar__variants .variants .children {
  position: relative;
  padding: 10px 0px 0px 20px;
}
.toolbar__variants .variants .children:before {
  content: '';
  position: absolute;
  width: 2px;
  height: auto;
  background-color: #eee;
  left: 7px;
  top: 0px;
  bottom: 42px;
}
.toolbar__variants .variants .children .variant-container {
  position: relative;
}
.toolbar__variants .variants .children .variant-container .variant {
  border-left-color: #b0afaf;
}
.toolbar__variants .variants .children .variant-container:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #eee;
  left: -13px;
  top: 42px;
}
.toolbar__variants .variants .variant-container + .variant-container {
  margin-top: 20px;
}
.toolbar__variants .variants .variant {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  border-radius: 7px;
  box-shadow: 0px 0px 6px #0000001f;
  border: 2px solid transparent;
  gap: 20px;
}
.toolbar__variants .variants .variant__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.toolbar__variants .variants .variant__icon .svg {
  width: 100%;
  height: 100%;
}
.toolbar__variants .variants .variant__icon .svg svg {
  width: 100%;
  height: 100%;
}
.toolbar__variants .variants .variant__title {
  flex-grow: 1;
  font-size: 13px;
  line-height: 15px;
}
.toolbar__variants .variants .variant__price {
  font-size: 12px;
  font-weight: 600;
  color: #9f9f9f;
  white-space: nowrap;
}
.toolbar__variants .variants .variant__checkbox {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid #d8d9dd;
  border-radius: 4px;
  width: 12px;
  height: 12px;
}
.toolbar__variants .variants .variant:hover:not(.excluded, .disabled) .variant__title,
.toolbar__variants .variants .variant:hover:not(.excluded, .disabled) .variant__price {
  color: var(--primary);
}
.toolbar__variants .variants .variant.no-icon .variant__checkbox {
  position: relative;
  top: 0px;
  right: 0px;
  flex-shrink: 0;
}
.toolbar__variants .variants .variant.disabled {
  opacity: 0.2;
  cursor: default;
}
.toolbar__variants .variants .variant.excluded {
  opacity: 0.3;
  border-color: #ffc5c5;
}
.toolbar__variants .variants .variant.selected {
  border-color: var(--primary) !important;
}
.toolbar__variants .variants .variant.selected .svg svg path {
  fill: var(--primary);
}
.toolbar__variants .variants .variant.selected .variant__title {
  color: var(--primary);
  font-weight: 600;
}
.toolbar__variants .variants .variant.selected .variant__price {
  color: var(--primary);
}
.toolbar__variants .variants .variant.selected .variant__checkbox:after {
  content: '\2713';
  position: absolute;
  top: -20px;
  right: -17px;
  font-size: 40px;
  color: var(--primary);
}
.toolbar__variants .variants .variant.selected + .children:before {
  background-color: #b0afaf;
}
.toolbar__variants .variants .variant.selected + .children > .variant-container:before {
  background-color: #b0afaf;
}
.toolbar__variants .summary__content__special-request {
  margin: 40px 0px 80px 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.toolbar__variants .summary__content__special-request h3 {
  color: var(--grey);
}
.toolbar__variants .summary__content__special-request input[type='file'] {
  display: none;
}
.toolbar__variants .summary__content__special-request .file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
.toolbar__variants .summary__content__special-request .download {
  margin-top: 20px;
}
.toolbar__variants .summary__content__special-request .loader {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.toolbar__variants .summary__content__special-request .demands_head_container {
  display: flex;
  flex-direction: row;
  justify-content: SPACE-BETWEEN;
  width: 100%;
  align-items: CENTER;
}
.toolbar__variants .summary__content__special-request .demands_head_price {
  font-size: 12px;
  color: var(--lightSecondary);
  font-weight: 500;
  margin-right: 35px;
}
.toolbar__variants .summary__content__special-request .custom-demands-subtext {
  font-size: 12px;
  color: var(--darkGrey);
  opacity: 0.55;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 0px 5px;
}
.toolbar__variants .summary__content__special-request .custom-demands-subtext-italic {
  font-size: 12px;
  color: var(--darkGrey);
  opacity: 0.55;
  font-weight: 500;
  margin-bottom: 8px;
  font-style: italic;
  padding: 0px 5px;
}
.toolbar__variants .summary__content__special-request h2 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--darkGrey);
}
.toolbar__variants .summary__content__special-request h2 span {
  margin-left: 5px;
  color: var(--grey);
  font-size: 14px;
  font-weight: 500;
}
.toolbar__variants .summary__content__special-request .button {
  border: none;
  padding-left: 0px;
  padding-right: 0px;
}
.toolbar__variants .summary__content__special-request .upload {
  margin-bottom: 20px;
}
.toolbar__variants .summary__content__special-request .request {
  display: flex;
  align-items: start;
  margin-top: 15px;
  width: 100%;
  justify-content: space-between;
}
.toolbar__variants .summary__content__special-request .request.accepted .request__number {
  background-color: #008000;
}
.toolbar__variants .summary__content__special-request .request.rejected .request__number {
  background-color: #cf415e;
}
.toolbar__variants .summary__content__special-request .request .body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}
.toolbar__variants .summary__content__special-request .request .body p {
  width: 80%;
  font-size: 13px;
  white-space: pre-wrap;
}
.toolbar__variants .summary__content__special-request .request .body .side-buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 20%;
}
.toolbar__variants .summary__content__special-request .request .body .side-buttons .icon-pen {
  background-color: #ffffff;
  cursor: pointer;
}
.toolbar__variants .summary__content__special-request .request .body .side-buttons .icon-trash {
  background-color: #ffffff;
  cursor: pointer;
  transform: scale(1.5);
}
.toolbar__variants .summary__content__special-request .request .body .space {
  height: 30px;
}
.toolbar__variants .summary__content__special-request .request .body__comment {
  font-size: 12px;
  color: var(--grey);
}
.toolbar__variants .summary__content__special-request .request span {
  background-color: #ffc251;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  color: var(--light);
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  display: block;
  text-align: center;
  flex: 0 0 auto;
}
.toolbar__variants .summary__content__special-request .request .selected {
  background-color: #f58d70;
}
.toolbar .bar {
  position: absolute;
  max-height: 100%;
  z-index: 9;
  width: 450px;
  background-color: #ffffff;
  overflow: hidden;
  height: 100%;
  width: 100px;
}
.toolbar .bar__spacer {
  flex-grow: 1;
}
.toolbar .bar .scroller {
  width: 130px;
  overflow-y: auto;
  padding: 0px 15px 0px 0px;
  box-sizing: border-box;
  height: 100%;
  background: linear-gradient(white 30%, rgba(255, 255, 255, 0)) center top, /* Shadow Cover BOTTOM */ linear-gradient(rgba(255, 255, 255, 0), white 70%) center bottom, linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) center top, /* Shadow Cover BOTTOM */ linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)) center bottom;
  background-repeat: no-repeat;
  background-size: 100% 40px,
				100% 40px,
				100% 14px,
				100% 14px;
  background-attachment: local, local, scroll, scroll;
}
.toolbar .bar .scroller__content {
  min-width: 100px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.toolbar .bar .scroller__content .wall:last-child {
  padding-bottom: 20px;
}
.toolbar .bar .scroller__content .wall,
.toolbar .bar .scroller__content .action,
.toolbar .bar .scroller__content .item {
  width: 100px;
  height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  user-select: none;
}
.toolbar .bar .scroller__content .wall .svg,
.toolbar .bar .scroller__content .action .svg,
.toolbar .bar .scroller__content .item .svg {
  margin-bottom: 7px;
  height: 35px;
  width: 35%;
}
.toolbar .bar .scroller__content .wall .svg svg,
.toolbar .bar .scroller__content .action .svg svg,
.toolbar .bar .scroller__content .item .svg svg {
  width: 100%;
  height: 100%;
}
.toolbar .bar .scroller__content .wall .svg svg path,
.toolbar .bar .scroller__content .action .svg svg path,
.toolbar .bar .scroller__content .item .svg svg path {
  fill: #1C283F;
}
.toolbar .bar .scroller__content .wall p,
.toolbar .bar .scroller__content .action p,
.toolbar .bar .scroller__content .item p {
  font-size: 13px;
  color: var(--dark);
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  margin-top: 5px;
}
.toolbar .bar .scroller__content .wall.hidden,
.toolbar .bar .scroller__content .action.hidden,
.toolbar .bar .scroller__content .item.hidden {
  display: none;
}
.toolbar .bar .scroller__content .wall:hover,
.toolbar .bar .scroller__content .wall.selected,
.toolbar .bar .scroller__content .action:hover {
  background-color: var(--lightGrey);
}
.toolbar .bar .scroller__content .wall:hover,
.toolbar .bar .scroller__content .wall.selected,
.toolbar .bar .scroller__content .action:hover {
  background-color: var(--lightGrey);
}
.toolbar .bar .scroller__content .wall.selected:after {
  content: '';
  background-color: var(--darkGrey);
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
}
.toolbar .bar .scroller__content .action.active {
  background-color: #f6f6f6;
  box-shadow: inset 0px 10px 10px -10px #0002, inset 0px -10px 10px -10px #0002;
}
.toolbar .bar .scroller__content .action.move.active:after,
.toolbar .bar .scroller__content .action.help.active:after {
  display: none;
}
.toolbar .bar .scroller__content .action.measure .svg {
  height: 30px;
}
.toolbar .bar .scroller__content .action.help {
  height: 40px;
}
.toolbar .bar .scroller__content .action.help .svg {
  margin-bottom: 0px;
  height: 25px;
}
.toolbar__tools .scroller {
  width: 100%;
  max-height: 100%;
  overflow: auto;
}
.toolbar__tools .scroller__content {
  align-items: flex-start;
}
.toolbar__tools .scroller__content h3 {
  color: var(--dark);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  margin: 20px 80px 0px 30px;
}
.toolbar__tools .scroller__content .close {
  cursor: pointer;
  position: absolute;
  top: 23px;
  right: 15px;
  width: 22px;
  height: 22px;
}
.toolbar__tools .scroller__content .close .svg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbar__tools .scroller__content .settings-menu {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
}
.toolbar__tools .scroller__content .settings-menu .active {
  border-bottom-color: var(--primary);
}
.toolbar__tools .scroller__content .settings-menu .active p {
  color: var(--primary);
}
.toolbar__tools .scroller__content .settings-menu > div {
  cursor: pointer;
  width: 50%;
  border-bottom: 1px solid var(--grey);
}
.toolbar__tools .scroller__content .settings-menu > div p {
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  margin-bottom: 16px;
}
.toolbar__tools .scroller__content .row + .row {
  margin-top: 15px;
}
.toolbar__tools .scroller__content .rows {
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 20px;
}
.toolbar__tools .scroller__content .rows .row,
.toolbar__tools .scroller__content .rows .full-row {
  width: 40%;
  height: 95px;
  box-sizing: border-box;
  padding: 0px 0px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 20px 10px;
  gap: 20px;
}
.toolbar__tools .scroller__content .rows .row .textbox-width > div,
.toolbar__tools .scroller__content .rows .full-row .textbox-width > div {
  min-width: 0;
}
.toolbar__tools .scroller__content .rows .row .description,
.toolbar__tools .scroller__content .rows .full-row .description {
  font-size: 12px;
  color: var(--grey);
  margin-top: 10px;
}
.toolbar__tools .scroller__content .rows .row .compass,
.toolbar__tools .scroller__content .rows .full-row .compass {
  border-radius: 40px;
  overflow: hidden;
  display: inline-block;
}
.toolbar__tools .scroller__content .rows .full-row {
  width: 100%;
}
.toolbar__tools .scroller__content .rows .column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  box-sizing: border-box;
  padding: 20px 10px;
}
.toolbar__tools .scroller__content .rows .column .prop {
  display: block;
  font-size: 14px;
  color: #20232c;
  font-weight: 600;
}
.toolbar__tools .scroller__content .blacklist {
  border-radius: 6px;
  border: 1.5px solid var(--darkGrey);
  padding-top: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.toolbar__tools .scroller__content .blacklist__variant {
  display: flex;
  margin: 10px;
  margin-left: 25px;
  margin-right: 25px;
  justify-content: space-between;
}
.toolbar__tools .scroller__content .blacklist__variant__text {
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
}
.toolbar__tools .scroller__content .blacklist__variant__remove {
  cursor: pointer;
  margin-left: 5px;
}
.toolbar__tools .scroller__content .blacklist__choosevariant {
  width: 80%;
  margin: 5px;
}
.toolbar__tools .scroller__content .blacklist__choosevariant option {
  max-width: 100;
  text-overflow: ellipsis;
}
.toolbar__tools .scroller__content .blacklist__addvariant {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.toolbar__tools .scroller__content .blacklist__addvariant__action {
  cursor: pointer;
  opacity: 0.3;
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
}
.toolbar__tools .scroller__content .blacklist__addcombo {
  cursor: pointer;
  opacity: 0.3;
  margin: 10px 25px;
  font-size: 12px;
  font-weight: 600;
}
.toolbar__content {
  box-shadow: 0px 0px 10px #0002;
  background-color: #ffffff;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100px;
  position: relative;
  box-sizing: border-box;
  z-index: 10;
}
.toolbar__content__subdrop {
  position: absolute;
  left: 200px;
  max-height: 100%;
  z-index: 8;
}
.toolbar__content__main {
  z-index: 10;
  overflow: initial;
}
.toolbar__content__main__intro,
.toolbar__content__drop__intro,
.toolbar__content__subdrop__intro {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0px 20px;
  overflow: hidden;
  max-height: 400px;
}
.toolbar__content__main__intro__title,
.toolbar__content__drop__intro__title,
.toolbar__content__subdrop__intro__title {
  flex: 0 1 auto;
  margin-top: 40px;
  font-size: 18px;
  font-weight: 600;
  color: #2d3446;
  margin-bottom: 22px;
}
.toolbar__content__main__intro__text,
.toolbar__content__drop__intro__text,
.toolbar__content__subdrop__intro__text {
  flex: 0 1 auto;
  font-size: 14px;
  color: #2d3446;
  margin-bottom: 50px;
  font-weight: 500;
}
.toolbar__content__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #377ded;
  width: 100%;
  z-index: 15;
}
.toolbar__content__footer button {
  background-color: #377ded;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  padding: 11px 0px 13px;
  width: 100%;
  height: 100%;
}
.toolbar .back {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 22px;
  left: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toolbar .back .svg,
.toolbar .back svg {
  width: 100%;
  height: 100%;
}
.toolbar .back .svg path,
.toolbar .back svg path {
  fill: var(--grey);
}
.toolbar .back:hover svg path {
  fill: var(--dark);
}
.toolbar .ref-card {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
}
.toolbar .ref-card:hover {
  background-color: var(--darkerLight);
}
.toolbar .ref-card .second-panel__head-thumbnail {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.toolbar .ref-card .second-panel__head-thumbnail svg {
  width: 100px;
}
.toolbar .products {
  padding: 15px;
  box-sizing: border-box;
}
.toolbar__desktop .toolbar__panels {
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 6;
  left: 100px;
}
.toolbar__mobile .mode-tooltip {
  display: none;
}
.toolbar__mobile .toolbar__page {
  width: 100%;
  height: 100%;
}
.toolbar__mobile .toolbar__objects {
  width: 100%;
}
.toolbar__mobile .toolbar__objects .search {
  width: 100%;
  border-right: 0px;
}
.toolbar__mobile .toolbar__objects .search .text {
  max-width: 60vw;
}
.toolbar__mobile .toolbar__objects .search input {
  width: auto;
}
.toolbar__mobile .toolbar__coverings,
.toolbar__mobile .toolbar__annotations,
.toolbar__mobile .toolbar__comments,
.toolbar__mobile .toolbar__walls {
  width: 100%;
}
.toolbar__mobile .toolbar__left-panels {
  position: fixed;
  z-index: 100;
  bottom: -60vh;
  margin: 0;
  height: 60vh;
  width: 100%;
  transform: translateY(0);
}
.toolbar__mobile .toolbar__left-panels .toolbar__coverings__tabs {
  margin: 0;
}
.toolbar__mobile .toolbar__left-panels .toolbar__coverings__materials {
  margin: 0;
}
.toolbar__mobile .toolbar__left-panels .toolbar__coverings__row {
  display: none;
}
.toolbar__mobile .toolbar__placing-panels {
  bottom: 100px;
  top: auto;
  width: 100%;
  left: 0px;
}
.toolbar__mobile .toolbar__placing-objects {
  bottom: -100px;
  top: auto;
  left: 0;
  width: 100%;
  margin-left: 0;
  box-sizing: border-box;
}
.toolbar__mobile .toolbar__placing-objects .text {
  font-size: 10px;
}
.toolbar__mobile .toolbar__placing-objects .cancel-btn {
  margin-left: auto;
}
.toolbar__mobile .toolbar__placing-covering {
  display: flex;
  flex-direction: column;
  bottom: -100px;
  top: auto;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 -5px 10px #0001;
  border-radius: 0;
}
.toolbar__mobile .toolbar__placing-covering .covering__content {
  display: flex;
  justify-content: space-between;
}
.toolbar__mobile .toolbar__placing-covering .covering__footer {
  max-height: 20vh;
  overflow-y: auto;
}
.toolbar__mobile .toolbar__panels.open .toolbar__left-panels {
  transform: translateY(-60vh);
}
.toolbar__mobile .bar .scroller__content .action.active:after {
  display: none;
}
.toolbar__mobile .bar .scroller__content .wall.selected:after {
  left: 0px;
  height: 5px;
  width: 100%;
}
@media (max-width: 650px) {
  .helpcrunch-iframe-wrapper {
    display: none;
  }
  .viewer .banner.unclosed-rooms {
    gap: 20px;
    padding: 20px;
  }
  .viewer .banner.unclosed-rooms p {
    font-size: 13px;
  }
  .viewer .banner.unclosed-rooms a.button {
    font-size: 14px;
  }
}
.select-anchor-mode {
  display: flex;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
  align-items: stretch;
  overflow: hidden;
}
.select-anchor-mode__option {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px 10px;
}
.select-anchor-mode__option .svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.select-anchor-mode__option.selected {
  background-color: var(--dark);
}
.select-anchor-mode__option.selected svg path {
  stroke: white;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
#viewer-2d {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#viewer-2d svg.plan {
  user-select: none;
}
#viewer-2d .input-surface {
  position: absolute;
  width: 100%;
  height: 100%;
}
#viewer-2d .input-surface:hover .overlay {
  opacity: 0;
}
#viewer-2d .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: 0.25s opacity;
  pointer-events: none;
}
#viewer-2d .overlay__text {
  position: absolute;
  left: 400px;
  top: 0px;
  z-index: 1000;
  color: var(--light);
  font-size: 24px;
  opacity: 1;
  padding: 60px;
  text-align: center;
}
#viewer-2d .overlay__rect {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.6;
}
#viewer-2d .room-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: auto !important;
  border-radius: 6px;
  background-color: var(--light);
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  display: flex;
  flex-direction: column;
  padding: 25px;
}
#viewer-2d .room-panel h4 {
  color: var(--dark);
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  margin-bottom: 10px;
}
#viewer-2d .room-panel select {
  border: 1px solid var(--lightGrey);
  border-radius: 4px;
  background-color: var(--light);
  box-shadow: 0 7px 48px 0 rgba(0, 0, 0, 0.07);
  padding: 14px 17px;
}
#viewer-2d .faded path:not([stroke]) {
  fill: #c6c6c6;
}
#viewer-2d .faded path[stroke] {
  stroke: #c6c6c6;
}
#viewer-2d .removed {
  opacity: 0.5;
}
#viewer-2d .removed .item path {
  fill: #800000;
}
#main.creator .electrical.overlay .overlay__text {
  transform: translate(30%, 0px);
}
#floorplanner-canvas.draw-walls,
#floorplanner-canvas.draw-rooms {
  cursor: crosshair;
}
.drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  width: 400px;
  height: 400px;
  font-family: sans-serif;
  margin: 20px auto;
  padding: 20px;
}
#main #body #viewer-2d .close-set-scale {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 11px;
  z-index: 1;
}
.dropzone {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.dropzone .close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 11px;
}
.dropzone .svg {
  margin-bottom: 40px;
}
.dropzone h1 {
  margin-top: 0px;
  margin-bottom: 28px;
  font-size: 24px;
  font-weight: 600;
}
.dropzone h3 {
  color: var(--darkGrey);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.dropzone h3 .click {
  color: var(--lightPrimary);
  margin-left: 4px;
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid var(--primary);
  border-radius: 5px;
  margin: 10px;
  text-transform: uppercase;
}
.dropzone h3 .format {
  color: var(--darkGrey);
  display: block;
  text-align: center;
}
.drop-area.highlight {
  border-color: purple;
}
.preview {
  margin-top: 10px;
}
.preview img {
  height: auto;
  width: 100%;
  max-width: 400px;
}
.floorplan-canvas {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: visible;
}
.floorplan-viewport {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  overflow: visible;
}
@media (max-width: 650px) {
  #viewer-2d .overlay {
    display: none;
  }
}

/** @format */
#viewer-3d {
  width: 100%;
  height: 100%;
}
.hdri-panel {
  position: absolute;
  top: 50px;
  right: 0px;
  padding: 10px;
  z-index: 10;
}

/** @format */
.progress-circle {
  position: relative;
}
.progress-circle__background {
  stroke: #000;
}
.progress-circle__background-path {
  stroke: #444;
}
.progress-circle__progress {
  stroke: #007bff;
  transition: stroke-dashoffset 0.3s ease;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.viewer .controls {
  width: fit-content;
}
.viewer .controls hr {
  border: none;
  background-color: #b9b9b9;
  width: 1px;
  height: 50%;
  margin-left: 15px;
  margin-right: 15px;
}
.viewer .controls__top {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.viewer .controls__top__bar {
  height: 50px;
  background-color: var(--light);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 0px 0px 8px 8px;
  border: 1px solid var(--lightGrey);
  border-top: 0px;
}
.viewer .controls__top__bar p {
  font-weight: 600;
  font-size: 11px;
  color: var(--darkGrey);
}
.viewer .controls__top__bar .svg {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0px 4px;
  box-sizing: border-box;
}
.viewer .controls__top__bar .svg:hover path {
  fill: var(--lightPrimary);
}
.viewer .controls__top__bar .icon.active svg path {
  fill: var(--primary);
}
.viewer .controls__top__bar .disabled-icon {
  pointer-events: none;
}
.viewer .controls__top__bar .disabled-icon .svg path {
  fill: #a4a7a8;
}
.viewer .controls__top__config {
  background-color: var(--light);
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  width: 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
}
.viewer .controls__top__config__title {
  height: 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  flex-direction: row;
  flex: 0 1 auto;
  padding: 0px 25px 0px;
  font-size: 11px;
  font-weight: 600;
  color: var(--darkGrey);
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.viewer .controls__top__config__title .svg {
  transform: rotateZ(180deg);
}
.viewer .controls__top__config__content {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex: 0 1 auto;
  height: 0px;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 0px;
  padding-top: 0px;
}
.viewer .controls__top__config__content .row + .row {
  margin-top: 8px;
}
.viewer .controls__top__config__content .row {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 25px;
}
.viewer .controls__top__config__content .row span {
  display: block;
  font-size: 14px;
  color: var(--dark);
  font-weight: 600;
}
.viewer .controls__top__config__content .row input {
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  height: 38px;
  padding-left: 15px;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.viewer .controls__top__config__content .row select {
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  background-color: transparent;
  height: 38px;
  padding-left: 15px;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url(/assets/icons/icon-arrow.png);
  background-position: right 15px center;
  background-size: 11px auto;
  background-repeat: no-repeat;
}
.viewer .controls__top__config__content hr {
  border: none;
  width: 100%;
  border-top: 2px solid #a4a7a8;
  margin-top: 25px;
  margin-bottom: 25px;
}
.viewer .controls__top__config__content__type p {
  font-size: 11px;
  font-weight: 600;
  color: var(--darkGrey);
  text-transform: uppercase;
  text-align: left;
  padding-left: 25px;
}
.viewer .controls__top__config__content__type select {
  margin-left: 25px;
  width: 81%;
}
.viewer .controls__top__config__content__type__cards {
  padding-left: 25px;
  padding-right: 25px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.viewer .controls__top__config__content__type__cards__card {
  flex: 0 1 auto;
  width: 50%;
}
.viewer .controls__top__config__content__footer {
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lightPrimary);
  position: absolute;
  bottom: 0;
  width: 100%;
  cursor: pointer;
}
.viewer .controls__top__config__content__footer p {
  flex: 0 1 auto;
  color: var(--light);
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
.viewer .controls__top__config__content.show-config {
  height: 630px;
  padding-bottom: 43px;
  padding-top: 15px;
  transition: all 0.5s;
}
.viewer .controls__top__info {
  position: absolute;
  left: 0;
  display: flex;
  border-radius: 4px 4px 0 0;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 #dbdbdd;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  font-weight: 600;
  min-width: 200px;
}
.viewer .controls__top__info .surface {
  font-weight: 500;
  color: var(--primary);
}
.viewer .controls__top__info__check {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 14px;
}
.viewer .controls__top__info input[type='checkbox'] {
  width: 16px;
  height: 16px;
}
.viewer .controls__bottom {
  position: absolute;
  z-index: 1;
  bottom: 0px;
  right: 110px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  max-height: 50px;
}
.viewer .controls__bottom > div + div {
  margin-left: 20px;
}
.viewer .controls__bottom__slider p {
  margin-left: 19px;
  margin-right: 19px;
  width: 28px;
}
.viewer .controls__bottom__zoom {
  margin-left: 20px;
  display: none !important;
}
.viewer .controls__bottom__zoom,
.viewer .controls__bottom__slider {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 4px 4px 0 0;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 #dbdbdd;
  height: 48px;
  margin-left: 20px;
}
.viewer .controls__bottom__zoom p,
.viewer .controls__bottom__slider p {
  font-size: 11px;
  font-weight: 600;
  color: var(--darkGrey);
}
.viewer .controls__bottom__zoom .svg,
.viewer .controls__bottom__slider .svg {
  padding: 0px 7px;
}
.viewer .controls__bottom__zoom input,
.viewer .controls__bottom__slider input {
  appearance: none;
  width: 105px;
  border-radius: 4px;
  background-color: var(--lightPrimary);
  height: 4px;
}
.viewer .controls__bottom__zoom input::-webkit-slider-thumb,
.viewer .controls__bottom__slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  background: var(--lightPrimary);
  cursor: pointer;
  border: 1.5px solid var(--light);
  border-radius: 50%;
}
.viewer .controls__bottom__zoom input::-moz-range-thumb,
.viewer .controls__bottom__slider input::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--lightPrimary);
  cursor: pointer;
  border: 1.5px solid var(--light);
  border-radius: 50%;
}
.viewer .controls__bottom__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 4px 4px 0 0;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 #dbdbdd;
  height: 48px;
  padding: 0px 20px 0px 20px;
  margin-left: 20px;
}
.viewer .controls__bottom__label p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0px;
  max-width: 200px;
  font-size: 11px;
  font-weight: 600;
  color: var(--darkGrey);
}
.viewer .photo3d {
  position: absolute;
  margin: 10px;
  border-radius: 5px;
  z-index: 102;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.25s linear;
}
.viewer .photo3d.collapse {
  width: 320px;
  height: 180px;
}
@media (min-width: 1600px) and (max-width: 1920px) {
  .viewer .photo3d.collapse {
    width: 480px;
    height: 270px;
  }
}
@media (min-width: 2560px) {
  .viewer .photo3d.collapse {
    width: 640px;
    height: 360px;
  }
}
.viewer .photo3d.expand {
  width: 90%;
  max-width: 1920px;
  height: 90%;
  max-height: 1080px;
}
.viewer .photo3d .col1 {
  position: absolute;
  display: flex;
}
.viewer .photo3d .col2 {
  position: relative;
  display: inline-block;
}
.viewer .photo3d .enlarge {
  position: absolute;
  margin-top: -40px;
  margin-left: -40px;
  z-index: 102;
}
.viewer .photo3d img {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 5px;
  z-index: 101;
  max-width: 100%;
  max-height: 100%;
}
.viewer .photo3d img.background {
  position: relative;
}
.viewer .photo3d p {
  z-index: 102;
  margin: 10px;
  background-color: white;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  cursor: default;
}
.mode-switch {
  display: flex;
  border-radius: 8px 8px 0 0;
  background-color: #ffffff;
  flex-direction: column;
  align-items: center;
  position: relative;
  transform: translateY(280px);
  transition: transform 300ms ease-in-out;
  border: 1px solid var(--lightGrey);
  border-bottom: none;
}
.mode-switch.open {
  transform: translateY(0px);
}
.mode-switch.compact {
  transform: unset;
}
.mode-switch__buttons {
  position: relative;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  flex: 1 0 48px;
}
.mode-switch button {
  background-color: transparent;
  justify-content: center;
  align-items: center;
  display: flex;
  padding: 0px;
  cursor: pointer;
}
.mode-switch button.diff-mode .mode-switch__tooltip {
  min-width: 300px;
}
.mode-switch button.diff-mode .svg svg {
  width: 30px;
  height: 30px;
}
.mode-switch button .svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 24px;
}
.mode-switch button .svg path {
  fill: var(--darkGrey);
}
.mode-switch button + button {
  margin-left: 7px;
}
.mode-switch .active {
  width: 34px;
  height: 34px;
  background-color: var(--darkGrey);
  border-radius: 50%;
}
.mode-switch .active .svg path {
  fill: var(--light);
}
.mode-switch p {
  font-size: 11px;
  font-weight: 600;
  color: var(--darkGrey);
  margin-right: 20px;
}
.mode-switch .btn-layer.changed > .svg {
  position: relative;
}
.mode-switch .btn-layer.changed > .svg::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: red;
  position: absolute;
  top: 2px;
  left: 27px;
}
.mode-switch button.disabled {
  pointer-events: none;
}
.mode-switch button.disabled svg path {
  fill: var(--grey);
}
.mode-switch button:hover .mode-switch__tooltip {
  opacity: 1;
  pointer-events: all;
}
.mode-switch__tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms linear;
  cursor: default;
  position: absolute;
  bottom: 60px;
  right: 0px;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  margin: 0px;
  border-radius: 8px;
  border: 1px solid var(--lightGrey);
}
.mode-switch__tooltip-title {
  font-size: 14px;
  font-weight: 600;
}
.mode-switch__tooltip-rows {
  padding-top: 15px;
  margin: 0px;
}
.mode-switch__tooltip-rows hr {
  width: 100%;
  height: 1px;
  margin: 5px 0px;
}
.mode-switch__tooltip-row {
  font-size: 12px;
  text-align: left;
  margin-left: 0px;
  display: flex;
  height: 20px;
}
.mode-switch__tooltip-row:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: black;
  margin-right: 10px;
}
.mode-switch__tooltip-row.selected:before {
  background-color: #6198f0;
}
.mode-switch__tooltip-row.added:before {
  background-color: #60af60;
}
.mode-switch__tooltip-row.removed:before {
  background-color: #efdfdf;
}
.mode-switch__tooltip-row.changed:before {
  background-color: #450145;
}
.mode-switch__tooltip-row.colliding:before {
  background-color: #e92c20;
}
.mode-switch__layers {
  background-color: white;
  height: 280px;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  margin: 0px;
}
.mode-switch__layers.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.mode-switch__layers-title {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 5px 0px 15px;
}
.mode-switch__layers-rows {
  padding-top: 15px;
  margin: 0px;
}
.mode-switch__layers-rows hr {
  width: 100%;
  height: 1px;
  margin: 5px 0px;
}
.mode-switch__layers-item {
  font-size: 12px;
  text-align: left;
  margin-left: 0px;
  display: flex;
  height: 25px;
  justify-content: space-between;
}
@media (max-width: 650px) {
  .viewer:not([data-no-mobile]) .controls__bottom {
    bottom: auto;
    right: 0px;
    transform-origin: right bottom;
    top: 60px;
    max-height: none;
    max-width: 48px;
  }
  .viewer:not([data-no-mobile]) .mode-switch {
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    transform: translateX(250px);
    margin-left: 0px;
    border: 1px solid var(--lightGrey);
    border-right: none;
    border-radius: 8px 0 0 8px;
  }
  .viewer:not([data-no-mobile]) .mode-switch.open {
    transform: translateX(0px);
  }
  .viewer:not([data-no-mobile]) .mode-switch.open button {
    display: flex;
  }
  .viewer:not([data-no-mobile]) .mode-switch .description {
    display: none;
  }
  .viewer:not([data-no-mobile]) .mode-switch button {
    display: none;
    height: 34px;
    margin-left: 0px;
  }
  .viewer:not([data-no-mobile]) .mode-switch button.btn-2d,
  .viewer:not([data-no-mobile]) .mode-switch button.btn-iso,
  .viewer:not([data-no-mobile]) .mode-switch button.btn-layer,
  .viewer:not([data-no-mobile]) .mode-switch button.active {
    display: flex;
  }
  .viewer:not([data-no-mobile]) .mode-switch hr {
    width: 50%;
    height: 1px;
  }
  .viewer:not([data-no-mobile]) .mode-switch__buttons {
    flex-direction: column-reverse;
    justify-content: start;
    padding: 10px 0px 20px 0px;
    height: auto;
    width: 48px;
    gap: 5px;
  }
  .viewer:not([data-no-mobile]) .mode-switch__layers {
    width: 250px;
    padding: 20px 25px;
    height: auto;
  }
  .viewer:not([data-no-mobile]) .mode-switch__layers-item {
    height: 28px;
  }
  .viewer:not([data-no-mobile]) .mode-switch__tooltip {
    display: none;
  }
}
#main.builder .mode-switch__layers-item.layer-room-lines {
  display: none;
}
#main.editor .viewer .controls__bottom {
  justify-content: space-between;
  box-sizing: border-box;
  left: 0px;
}
#main.editor .viewer .controls__bottom div + div {
  margin-left: 0px;
}
#main.editor .viewer .controls__bottom__view button.diff-mode {
  display: none;
}
#main.creator.worksite .viewer .controls__bottom .mode-switch button.diff-mode {
  display: none;
}

/** @format */
.toggleSwitch {
  position: relative;
  width: 28px;
  min-width: 28px;
  display: inline-block;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-align: left;
}
.toggleSwitch__input {
  display: none;
}
.toggleSwitch__label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 0 solid var(--dark);
  border-radius: 20px;
  margin: 0;
}
.toggleSwitch__label:focus {
  outline: none;
}
.toggleSwitch__label:focus > span {
  box-shadow: 0 0 2px 5px red;
}
.toggleSwitch__label > span:focus {
  outline: none;
}
.toggleSwitch__inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}
.toggleSwitch__inner:before,
.toggleSwitch__inner:after {
  content: '';
  display: block;
  float: left;
  width: 50%;
  height: 15px;
  padding: 0;
  box-sizing: border-box;
}
.toggleSwitch__inner:before {
  background-color: var(--darkGrey);
}
.toggleSwitch__inner:after {
  background-color: #dce2f1;
}
.toggleSwitch-disabled {
  background-color: #e7ebed;
  cursor: not-allowed;
}
.toggleSwitch-disabled:before {
  background-color: #e7ebed;
  cursor: not-allowed;
}
.toggleSwitch__switch {
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px;
  background: var(--light);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}
.toggleSwitch__input:checked + .toggleSwitch__label .toggleSwitch__inner {
  margin-left: 0;
}
.toggleSwitch__input:checked + .toggleSwitch__label .toggleSwitch__switch {
  right: 0px;
}

/** @format */
.floorplanswitch {
  position: relative;
  height: 100%;
}
.floorplanswitch.open .floorplanswitch__head .svg {
  transform: rotate(180deg);
}
.floorplanswitch__head {
  display: flex;
  width: 105px;
  justify-content: space-between;
  padding: 0px 10px;
  align-items: center;
  height: 100%;
  cursor: pointer;
  min-width: 130px;
}
.floorplanswitch__head .svg {
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 100ms ease-in-out;
}
.floorplanswitch__head .svg svg {
  width: 10px;
  height: 10px;
}
.floorplanswitch__list-container {
  position: absolute;
  top: 51px;
  overflow: hidden;
  left: -11px;
}
.floorplanswitch__list {
  display: flex;
  flex-direction: column;
  background-color: var(--light);
  border: 1px solid var(--lightGrey);
  margin-top: -1px;
  border-radius: 0px 0px 8px 8px;
  overflow: hidden;
  transition: margin-top 300ms ease-in-out;
}
.floorplanswitch__list-item {
  display: flex;
  padding-left: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 40px;
  width: 140px;
}
.floorplanswitch__list-item.selected {
  color: var(--primary);
}
.floorplanswitch__list-item.selected .svg svg path {
  fill: var(--primary);
}
.floorplanswitch__list-item:hover {
  background-color: var(--lightGrey);
}
.floorplanswitch__list-item .spacer {
  flex: 1;
}
.floorplanswitch__list-item .svg {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floorplanswitch__list-item .svg svg {
  width: 20px;
  height: 20px;
}
.floorplanswitch__add-btn {
  background: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 13px;
  padding: 15px 20px;
  white-space: nowrap;
  border-top: 1px solid var(--lightGrey);
  border-radius: 0px;
}
.floorplanswitch__add-btn:hover {
  background-color: var(--lightGrey);
}
.edit-floor-popup .popup-component__content {
  width: 420px;
  height: auto;
  max-width: 90%;
}
.edit-floor-popup__header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  padding-bottom: 0px;
}
.edit-floor-popup__header span {
  flex: 1;
  font-weight: 600;
}
.edit-floor-popup__header .svg {
  cursor: pointer;
  margin-left: 10px;
}
.edit-floor-popup__header .svg.delete svg path {
  fill: var(--warning);
}
.edit-floor-popup__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 30px;
}
.edit-floor-popup__grid-cell {
  padding: 10px;
  border: 1px solid var(--lightGrey);
  color: var(--dark);
  border-radius: 5px;
  cursor: pointer;
}
.edit-floor-popup__grid-cell.selected {
  border-color: var(--primary);
  color: var(--primary);
}
.edit-floor-popup__custom {
  display: flex;
  gap: 10px;
  padding: 30px;
  padding-top: 10px;
  align-items: center;
  justify-content: center;
}
.edit-floor-popup__custom .add {
  padding: 10px;
  border: 1px solid var(--dark);
  color: var(--dark);
  border-radius: 5px;
  opacity: 0.5;
  font-family: sans-serif;
  font-size: 12px;
  cursor: default;
  padding: 8px 10px;
}
.edit-floor-popup__custom .add.minus10,
.edit-floor-popup__custom .add.plus10 {
  padding: 6px 10px;
}
.edit-floor-popup__custom .add.show {
  opacity: 1;
  cursor: pointer;
}
.edit-floor-popup__custom .add.minus10:after {
  content: "-10";
}
.edit-floor-popup__custom .add.minus1:after {
  content: "-";
}
.edit-floor-popup__custom .add.plus1:after {
  content: "+";
}
.edit-floor-popup__custom .add.plus10:after {
  content: "+10";
}
.edit-floor-popup__custom .value {
  padding: 10px;
  border: 1px solid var(--primary);
  color: var(--primary);
  border-radius: 5px;
}
.edit-floor-popup__done-btn {
  padding: 15px;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.itemGrid {
  position: relative;
}
.itemGrid hr {
  margin-top: 12px;
  margin-bottom: 22px;
  border-top: none;
  border-bottom: 1px solid #e7ebed;
}
.itemGrid__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--darkGrey);
  text-align: center;
  opacity: 0.55;
  padding: 0px 10%;
  white-space: break-spaces;
}
.itemGrid__items {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-right: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}
@media screen and (max-width: 1024px) {
  .itemGrid__items {
    flex-direction: column;
    justify-content: center;
  }
}
.itemGrid__items__item {
  position: relative;
  width: 48%;
  height: 88px;
  border: 1.3px solid #dce2f1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  text-align: center;
  cursor: pointer;
  padding: 12px 10px 15px;
  margin-bottom: 10px;
  box-sizing: border-box;
  transition: all 0.5s;
}
@media screen and (max-width: 1024px) {
  .itemGrid__items__item {
    width: 110px;
    height: 74px;
  }
}
.itemGrid__items__item .svg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 70%;
  flex-shrink: 0;
}
.itemGrid__items__item .svg.itemGrid__items__item__delete {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  background-color: white;
  border-style: solid;
  border-color: grey;
  border-width: 1px;
  border-radius: 30px;
  transform: translate(50%, -50%);
}
.itemGrid__items__item .svg.itemGrid__items__item__delete svg path {
  fill: var(--grey);
  stroke: var(--grey);
}
.itemGrid__items__item .svg.itemGrid__items__item__delete:hover svg path {
  fill: var(--warning);
  stroke: var(--warning);
}
@media screen and (max-width: 1024px) {
  .itemGrid__items__item .svg {
    height: 65%;
  }
}
.itemGrid__items__item .svg svg {
  width: 75%;
  height: 75%;
}
.itemGrid__items__item .svg svg path {
  fill: #0a2e67;
}
.itemGrid__items__item__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--darkGrey);
}
.itemGrid__items__item:hover,
.itemGrid__items__item.hovered {
  border-color: #7dabf3;
}
.itemGrid__items__item:hover > .svg path,
.itemGrid__items__item.hovered > .svg path {
  fill: #1258c5;
}
.itemGrid__items__item:hover p,
.itemGrid__items__item.hovered p {
  color: #1258c5;
}
.itemGrid__items__item.selected {
  background-color: var(--lightPrimary);
  border-color: #7dabf3;
}
.itemGrid__items__item.selected > .svg path {
  fill: var(--light);
}
.itemGrid__items__item.selected p {
  color: var(--light);
}
.itemGrid__items__item:hover .itemGrid__items__item__delete,
.itemGrid__items__item.hovered .itemGrid__items__item__delete,
.itemGrid__items__item.selected .itemGrid__items__item__delete {
  display: flex;
}
.itemGrid.linkeditems .itemGrid__items {
  justify-content: space-around;
  flex-direction: row;
  margin-top: 10px;
}
.itemGrid.linkeditems .itemGrid__items__item {
  width: 40%;
  margin-left: 3%;
}
.itemGrid.show-config-panel .selectitems .itemGrid__items {
  justify-content: start;
  flex-direction: row;
}
.itemGrid.show-config-panel .selectitems .itemGrid__items__item + .itemGrid__items__item {
  margin-left: 2%;
}
.itemGrid.show-config-panel .selectitems .itemGrid__items__item:nth-child(4n + 5) {
  margin-left: 0px;
}
.itemGrid.show-config-panel .selectitems .itemGrid__items__item {
  height: 50px;
  width: 23.5%;
  padding: 0;
  transition: all 0.5s;
}
@media screen and (max-width: 1024px) {
  .itemGrid.show-config-panel .selectitems .itemGrid__items__item {
    height: 3.66032211vw;
    width: 3.66032211vw;
  }
}
.itemGrid.show-config-panel .selectitems .itemGrid__items__item > .svg {
  width: 100%;
  height: 100%;
}
.itemGrid.show-config-panel .selectitems .itemGrid__items__item > .svg svg {
  width: 75%;
  height: 75%;
}
.itemGrid.show-config-panel .selectitems .itemGrid__items__item__label {
  display: none;
}
.linkeditems__btn {
  width: 100%;
}
.mode-settings .itemGrid__items__item {
  width: 24%;
}
.mode-settings .itemGrid__items__item p {
  font-size: 11px;
}

/** @format */
.material-options h2 {
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  margin-top: 0px;
  padding-bottom: 21px;
  text-transform: uppercase;
  text-align: center;
}
.material-options .colour-option__info {
  margin-left: 0;
}
.product-card .colour-option__palette,
.itemGrid .colour-option__palette {
  padding: 0px 10px;
}
.itemGrid .colour-option__info {
  margin-left: 10px;
}
.colour-option__info {
  margin: 10px;
  margin-top: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.colour-option__info input[type="color"] {
  width: 50%;
  border: none;
  cursor: pointer;
}
.colour-option__info__title {
  color: var(--darkGrey);
  font-weight: 600;
  font-size: 12px;
}
.colour-option__info__subtitle {
  color: var(--grey);
  font-weight: 600;
  font-size: 12px;
}
.colour-option__palette {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
}
.colour-option__palette__colour {
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 5px;
  border-radius: 4px;
  background-color: none;
  margin-right: 6px;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.colour-option__palette__check svg {
  width: 15px;
}
.colour-option__palette__check path {
  fill: var(--light);
}

/** @format */
.product-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 9px;
  border: 1.3px solid transparent;
}
.product-card:hover {
  border-color: var(--darkGrey);
  border-radius: 6px;
  background-color: rgba(45, 52, 70, 0.1);
}
.product-card.selected {
  border-color: var(--darkGrey);
  border-radius: 6px;
  background-color: rgba(45, 52, 70, 0.1);
  cursor: default;
}
.product-card.selected .svg {
  display: block;
}
.product-card__main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  position: relative;
}
.product-card__main__thumbnail div {
  width: 47%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-size: contain;
  background-position: center;
  border-radius: 6px;
  background-repeat: no-repeat;
  background-color: #ffffff;
}
.product-card__main__info {
  display: flex;
  flex-direction: column;
  width: 49%;
  height: 100%;
  min-height: 60px;
  align-items: flex-start;
}
.product-card__main__info > .svg {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
}
.product-card__main__info > .svg svg path:first-child {
  fill: var(--darkGrey);
}
.product-card__main__info__top {
  display: flex;
}
.product-card__main__info__creatoronly {
  margin-top: 14px;
  margin-bottom: 15px;
  font-size: 12px;
  flex: 0 1 auto;
  font-size: 11px;
  right: 2px;
  position: absolute;
  border-radius: 4px;
  color: var(--grey);
}
.product-card__main__info__price {
  margin-top: 14px;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 12px;
  color: var(--grey);
  flex: 0 1 auto;
}
.product-card__main__info__noprice {
  margin-top: 14px;
}
.product-card__main__info__name {
  color: var(--darkGrey);
  font-weight: 600;
  font-size: 12px;
  flex: 0 1 auto;
  margin-bottom: 3px;
}
.product-card__main__info__brand {
  color: var(--grey);
  font-weight: 600;
  font-size: 12px;
  flex: 0 1 auto;
  margin-bottom: 3px;
}
.product-card__options {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}
.product-card__options .dashed {
  width: 100%;
  margin-top: 7px;
  margin-bottom: 15px;
  border-bottom: 1px dashed var(--darkGrey);
}
.product-card__options .option + .option {
  margin-top: 4px;
}
.product-card__options .option {
  padding: 0px 14px;
  font-size: 10px;
  font-weight: 500;
  line-height: 11px;
  color: var(--darkGrey);
  display: flex;
  align-items: center;
}
.product-card__options .option .svg {
  max-width: 12px;
  max-height: 12px;
  margin-right: 6px;
}
.product-card__options .option .svg svg {
  width: 100%;
  height: 100%;
}
.product-card__customize {
  cursor: pointer;
}
.product-card__customize button {
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  text-align: center;
  color: var(--light);
  width: 100%;
  background-color: var(--darkGrey);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 36px;
}
.product-card__customize button:active {
  background-color: var(--dark);
}
.product-card__customize button:hover {
  opacity: 0.9;
}
.product-card__highlight {
  color: var(--secondary);
}
.products.materials .product-card__main__thumbnail div {
  background-size: cover;
}

.search {
  position: relative;
  display: flex;
  gap: 15px;
  background-color: white;
  justify-content: center;
  margin: 0px 10px 10px 10px;
}
.search__box {
  border-radius: 40px;
  border: 1px solid #d7d7d7;
  display: flex;
  align-items: center;
}
.search input {
  border: none;
  padding: 5px 10px;
  width: 270px;
}
.search .svg {
  display: flex;
  align-items: center;
  padding-left: 15px;
  opacity: 0.7;
}
.search .svg svg {
  width: 16px;
  height: 30px;
}
.search .svg svg path {
  fill: var(--darkGrey);
}
.search__clear {
  width: 40px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  line-height: 37px;
  font-size: 20px;
}
.search__clear:after {
  content: '\00D7';
}

/** @format */
.product-details .title {
  color: var(--dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 14px;
  margin-top: 24px;
  padding-bottom: 21px;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid var(--lightGrey);
}
.product-details .link {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 12px;
  margin-right: 6px;
}
.product-details .picture {
  height: 170px;
  border-radius: 6px;
  width: calc(100% - 36px);
  margin: 0px 18px;
  box-sizing: border-box;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.product-details .tech {
  color: var(--grey);
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  flex: 0 1 auto;
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  padding: 0 18px;
  margin-top: 12px;
}
.product-details .tech .svg svg path {
  fill: var(--grey);
}
.product-details .tech:hover {
  text-decoration: underline;
}
.product-details .name {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  color: var(--darkGrey);
  padding: 0px 18px;
}
.product-details .description {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  color: var(--darkGrey);
  padding: 0px 18px;
}

/** @format */
.products {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.products.grid .products__ungrouped {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.products.grid .products-group__content {
  flex-flow: row wrap;
  justify-content: space-between;
}
.products.grid .product-tile {
  margin-bottom: 10px;
  width: 47%;
}
.products.grid .products-group.closed .products-group__content {
  flex-wrap: nowrap;
  gap: 10px;
}
.products.grid .products-group.closed .product-tile {
  width: unset;
  flex-grow: 1;
  margin: 0;
  opacity: 0.6;
  pointer-events: none;
}
.products.grid .products-group.closed .product-tile__thumbnail {
  min-height: 20px;
  height: unset;
  width: 70px;
}
.products.grid .products-group.closed .product-tile__content {
  display: flex;
  flex-direction: row;
}
.products.grid .products-group.closed .product-tile__price {
  position: unset;
  white-space: pre;
  height: fit-content;
  align-self: center;
  margin-left: auto;
  margin-right: 4px;
}

/** @format */
.products-group__head {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0px 15px 0px;
  user-select: none;
}
.products-group__head svg {
  height: 22px;
  max-width: 32px;
}
.products-group__head:after {
  content: '-';
  margin-left: auto;
  font-size: 25px;
  font-weight: 400;
}
.products-group.closed .products-group__head:after {
  content: '+';
}
.products-group__text {
  font-size: 15px;
  font-weight: 600;
}
.products-group__subtext {
  font-size: 12px;
  color: var(--grey);
}
.products-group__content {
  display: flex;
  flex-direction: column;
}
.products-group__see-more {
  background-color: white;
  box-shadow: inset 0px 0px 10px #00000011;
  border: 1px solid var(--boxShadow);
  border-radius: 6px;
  overflow: hidden;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: pre;
  min-width: fit-content;
  font-size: 12px;
  text-transform: capitalize;
  transition: all 200ms linear;
}
.products-group__see-more:hover {
  border-color: var(--grey);
}

/** @format */
.product-tile {
  cursor: pointer;
  position: relative;
}
.product-tile__content {
  background-color: white;
  box-shadow: inset 0px 0px 10px #00000011;
  border: 1px solid var(--boxShadow);
  border-radius: 6px;
  overflow: hidden;
  transition: all 200ms linear;
}
.product-tile.selected {
  cursor: default;
}
.product-tile.selected .product-tile__content {
  border-color: var(--darkGrey);
}
.product-tile.selected .product-tile__bottom {
  background-color: var(--lightGrey);
}
.product-tile.selected .product-tile__price {
  background-color: var(--price);
}
.product-tile:hover:not(.selected) .product-tile__content {
  border-color: var(--grey);
}
.product-tile__top {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--boxShadow);
}
.product-tile__bottom {
  padding: 10px;
}
.product-tile__thumbnail {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: #ffffff;
}
.product-tile__price {
  position: absolute;
  right: 7px;
  top: 7px;
  padding: 6px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  background-color: var(--grey);
  color: var(--light);
}
.product-tile__tick {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
}
.product-tile__tick svg path:first-child {
  fill: var(--darkGrey);
}
.product-tile__name {
  color: var(--darkGrey);
  font-weight: 600;
  font-size: 12px;
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
.summary {
  position: relative;
  width: 54%;
  min-width: 54%;
  height: 100%;
  padding: 33px 0px;
  overflow: auto;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.summary__content {
  width: 90%;
  padding-bottom: 75px;
}
.summary__content__top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 30px;
}
.summary__content__top h2 {
  margin-top: 8px;
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--darkGrey);
}
.summary__content__top__subtitle {
  color: var(--grey);
  font-size: 12px;
  margin-bottom: 10px;
}
.summary__content__top__content {
  display: flex;
  justify-content: space-between;
}
.summary__content__top__content__icons {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.summary__content__top__content__icons a + a {
  margin-left: 12px;
}
.summary__content__top__content__icons svg path {
  fill: var(--lightSecondary);
}
.summary__content__top__content__price span {
  color: var(--lightSecondary);
  font-size: 15px;
  font-weight: 700;
}
.summary__content__options {
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  margin-bottom: 50px;
}
.summary__content__options h2 {
  margin-bottom: 34px;
  font-size: 18px;
  font-weight: 600;
  color: var(--darkGrey);
}
.summary__content__options__option + .summary__content__options__option {
  margin-top: 25px;
}
.summary__content__options__option {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
}
.summary__content__options__option__content {
  display: flex;
  flex-direction: row;
}
.summary__content__options__option__content__picture {
  display: flex;
  align-items: center;
}
.summary__content__options__option__content__picture span {
  border-radius: 50%;
  width: 46px;
  height: 46px;
  background-color: var(--lightSecondary);
  margin-right: 25px;
  display: block;
}
.summary__content__options__option__content__text {
  display: flex;
  flex-direction: column;
  width: 320px;
}
.summary__content__options__option__content__text h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--darkGrey);
  margin-bottom: 8px;
}
.summary__content__options__option__content__text p {
  font-size: 12px;
  color: var(--darkGrey);
  opacity: 0.55;
  font-weight: 500;
  margin-bottom: 8px;
}
.summary__content__options__option__content__text a {
  font-size: 12px;
  color: var(--lightSecondary);
  font-weight: 500;
}
.summary__content__options__option__choice {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.summary__content__options__option__choice p {
  font-size: 12px;
  color: var(--lightSecondary);
  font-weight: 500;
  margin-right: 10px;
}
.summary__content__commentary {
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
}
.summary__content__commentary h2 {
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--darkGrey);
}
.summary__content__commentary p {
  font-size: 12px;
  font-weight: 500;
  color: var(--darkGrey);
  margin-bottom: 20px;
  opacity: 0.55;
}
.summary__content__commentary textarea {
  border-radius: 4px;
  background-color: var(--light);
  padding: 16px 16px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--darkGrey);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e6ebed;
}
.summary__content__commentary textarea::placeholder {
  font-size: 12px;
  font-weight: 500;
  color: var(--grey);
}
.summary__content__special-request {
  margin: 40px 0px 80px 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.summary__content__special-request h3 {
  color: var(--grey);
}
.summary__content__special-request input[type='file'] {
  display: none;
}
.summary__content__special-request .file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
.summary__content__special-request .download {
  margin-top: 20px;
}
.summary__content__special-request .loader {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.summary__content__special-request .demands_head_container {
  display: flex;
  flex-direction: row;
  justify-content: SPACE-BETWEEN;
  width: 100%;
  align-items: CENTER;
}
.summary__content__special-request .demands_head_price {
  font-size: 12px;
  color: var(--lightSecondary);
  font-weight: 500;
  margin-right: 35px;
}
.summary__content__special-request .custom-demands-subtext {
  font-size: 12px;
  color: var(--darkGrey);
  opacity: 0.55;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 0px 5px;
}
.summary__content__special-request .custom-demands-subtext-italic {
  font-size: 12px;
  color: var(--darkGrey);
  opacity: 0.55;
  font-weight: 500;
  margin-bottom: 8px;
  font-style: italic;
  padding: 0px 5px;
}
.summary__content__special-request h2 {
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--darkGrey);
}
.summary__content__special-request h2 span {
  margin-left: 5px;
  color: var(--grey);
  font-size: 14px;
  font-weight: 500;
}
.summary__content__special-request .button {
  border: none;
  padding-left: 0px;
  padding-right: 0px;
}
.summary__content__special-request .upload {
  margin-bottom: 20px;
}
.summary__content__special-request .request {
  display: flex;
  align-items: start;
  margin-top: 15px;
  width: 100%;
  justify-content: space-between;
}
.summary__content__special-request .request.accepted .request__number {
  background-color: #008000;
}
.summary__content__special-request .request.rejected .request__number {
  background-color: #cf415e;
}
.summary__content__special-request .request .body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}
.summary__content__special-request .request .body p {
  width: 80%;
  font-size: 13px;
  white-space: pre-wrap;
}
.summary__content__special-request .request .body .side-buttons {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 20%;
}
.summary__content__special-request .request .body .side-buttons .icon-pen {
  background-color: #ffffff;
  cursor: pointer;
}
.summary__content__special-request .request .body .side-buttons .icon-trash {
  background-color: #ffffff;
  cursor: pointer;
  transform: scale(1.5);
}
.summary__content__special-request .request .body .space {
  height: 30px;
}
.summary__content__special-request .request .body__comment {
  font-size: 12px;
  color: var(--grey);
}
.summary__content__special-request .request span {
  background-color: #ffc251;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  color: var(--light);
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
  display: block;
  text-align: center;
  flex: 0 0 auto;
}
.summary__content__special-request .request .selected {
  background-color: #f58d70;
}
.summary__content__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4.1em;
  z-index: 100;
  display: flex;
  justify-content: space-evenly;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
  align-items: center;
  padding: 0 4em;
  width: 54%;
  box-sizing: border-box;
}
.summary__content__footer.full-size {
  width: 100%;
}
.summary__content__footer .text {
  flex-grow: 1;
  text-align: center;
}
.summary__content__footer .backBtn {
  width: 9em;
  background-color: var(--light);
  color: var(--dark);
  margin: 1em;
  line-height: 2em;
  font-weight: 500;
  visibility: hidden;
}
.summary__content__footer.back .backBtn {
  visibility: visible;
}
.summary__content__footer .nextBtn {
  width: 9em;
  background-color: var(--lightSecondary);
  color: var(--light);
  margin: 1em;
  line-height: 2em;
  font-weight: 500;
  visibility: hidden;
}
.summary__content__footer.next .nextBtn {
  visibility: visible;
}
.summary__content__footer .saveBtn {
  position: relative;
  background-color: #ffffff;
  border: 1px solid var(--lightSecondary);
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 #dbdbdd;
  color: var(--lightSecondary);
  font-size: 14px;
  padding: 10px 30px 12px;
}
.summary__content__footer .saveBtn.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.summary__content__footer .saveBtn.unsaved:after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #a80000;
  position: absolute;
  top: 9px;
  right: 12px;
}
.summary__content__footer .validateBtn {
  border-radius: 4px;
  background-color: var(--lightSecondary);
  box-shadow: 0 2px 12px 0 #dbdbdd;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 30px 12px;
  transition: all 0.5s;
}
.summary__content__footer .validateBtn.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.summary__content__footer .validateBtn.success {
  background-color: #a2c797;
}
.summary__content__footer .validateBtn.error {
  background-color: #ef0043;
}
.summary__content__footer .validateBtn.loading span {
  border: 2px solid;
  border-left-color: #ffffff;
  border-top-color: #ffffff;
  border-right-color: #ffffff;
  border-bottom-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  animation: load 2s infinite linear;
  transform-origin: center center;
  width: 15px;
  height: 15px;
  display: block;
}
@keyframes load {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.summary__content .button-sign {
  top: -5px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.summary__export__btn {
  padding: 0px 15px !important;
  min-width: 140px;
}
.summary__export__item {
  padding: 0px 16px;
  height: 48px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--light);
  font-size: 14px;
  color: var(--darkGrey);
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  width: 140px;
}
.summary__export__item:hover {
  background-color: var(--lightGrey);
}
.summary .errortooltip .tooltip__content {
  top: -5px;
}
.summary .errortooltip__content {
  display: flex;
  gap: 10px;
  align-items: center;
}
#confirm__summary p.text {
  color: var(--darkGrey);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 8px;
  white-space: pre-line;
}
.floorplan-request {
  position: absolute;
  display: flex;
}
.floorplan-request span {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.floorplan-request__info {
  flex-grow: 1;
  position: relative;
  top: -15px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e7ebed;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0 7px 48px 0 rgba(0, 0, 0, 0.07);
  align-items: flex-end;
  padding: 15px;
}
.floorplan-request__info textarea {
  border: none;
  width: 100%;
}
.floorplan-request__info .buttons {
  display: flex;
  margin-top: 15px;
  align-items: center;
}
.floorplan-request__info .buttons .icon-pen {
  background-color: #ffffff;
  cursor: pointer;
}
.floorplan-request__info .buttons .icon-trash {
  background-color: #ffffff;
  cursor: pointer;
  transform: scale(1.5);
}
.floorplan-request__info .buttons .icon-trash .svg {
  display: flex;
  align-items: center;
}
.floorplan-request__info .buttons .add {
  margin-left: 8px;
}
.floorplan-request__info .buttons .cancel,
.floorplan-request__info .buttons .add {
  padding-left: 15px;
  padding-right: 15px;
}
.demo-container {
  width: 300px;
  margin: auto;
}
.kitchen-progress-bar {
  height: 4px;
  background-color: #f0ad97;
  width: 100%;
  overflow: hidden;
}
.kitchen-progress-bar-value {
  width: 100%;
  height: 100%;
  background-color: #f58d70;
  animation: indeterminateAnimation 1s infinite linear;
  transform-origin: 0% 50%;
}
@keyframes indeterminateAnimation {
  0% {
    transform: translateX(0) scaleX(0);
  }
  40% {
    transform: translateX(0) scaleX(0.4);
  }
  100% {
    transform: translateX(100%) scaleX(0.5);
  }
}

/** @format */
.dropdown {
  position: relative;
  z-index: 100;
}
.dropdown.open {
  z-index: 200;
}
.dropdown__button {
  cursor: pointer;
}
.dropdown__content {
  position: absolute;
  top: 100%;
  right: 5px;
  padding: 10px 0px;
  background-color: var(--light);
  box-shadow: 0px 0px 10px #0002;
  border-radius: 5px;
  overflow: hidden;
}
.dropdown__separator {
  border-top: 2px solid #dfe1e6;
  padding-top: 15px;
  margin: 20px 10px;
  text-transform: uppercase;
  color: var(--grey);
  text-align: center;
  font-size: 12px;
}
.dropdown__list {
  max-height: 400px;
  overflow-y: auto;
}
.dropdown__list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dark);
  padding: 10px 30px;
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
  white-space: nowrap;
  font-weight: 500;
  border-radius: 0px;
  width: 100%;
  box-sizing: border-box;
}
.dropdown__list-item .svg {
  height: 23px;
  width: 23px;
  margin: -5px 0px;
}
.dropdown__list-item .svg svg {
  width: 100%;
  height: 100%;
}
.dropdown__list-item .svg svg path {
  fill: var(--dark);
}
.dropdown__list-item:hover {
  background-color: var(--lightGrey);
}
.dropdown__list-item.selected {
  color: var(--primary);
  font-weight: 600;
}
.dropdown__list-item.selected:hover {
  background-color: var(--light);
}

/** @format */
.tiny-loader {
  transition: all 0.5s;
}
.tiny-loader.primary span {
  border-left-color: var(--primary);
  border-top-color: var(--primary);
  border-right-color: var(--primary);
}
.tiny-loader.secondary span {
  border-left-color: var(--secondary);
  border-top-color: var(--secondary);
  border-right-color: var(--secondary);
}
.tiny-loader span {
  border: 2px solid;
  border-left-color: #ffffff;
  border-top-color: #ffffff;
  border-right-color: #ffffff;
  border-bottom-color: transparent;
  border-radius: 50%;
  background-color: transparent;
  animation: load 2s infinite linear;
  transform-origin: center center;
  width: 15px;
  height: 15px;
  display: block;
}
@keyframes load {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.norms-panel {
  border-radius: 4px 4px 0 0;
  background-color: #ffffff;
  box-shadow: 0 -2px 12px 0 #dbdbdd;
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: auto;
  max-height: 46px;
  transition: 0.5s all;
}
.norms-panel.open {
  max-height: 50%;
  transition: 0.5s all;
}
.norms-panel.open .norms-panel__content {
  overflow-y: auto;
}
.norms-panel.open h5 > div {
  transform: rotateZ(0deg);
  transition: 0.7s all;
}
.norms-panel.pass h5 span {
  background-color: var(--success);
}
.norms-panel.fail h5 span {
  background-color: var(--warning);
}
.norms-panel.disabled h5 span {
  background-color: var(--grey);
}
.norms-panel.fail h5 {
  cursor: pointer;
}
.norms-panel h5 {
  padding: 14px 16px 16px;
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  color: var(--dark);
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: default;
}
.norms-panel h5 > div {
  transform: rotateZ(180deg);
  transition: 0.7s all;
}
.norms-panel h5 span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--warning);
  display: block;
}
.norms-panel h5 .svg {
  width: 10px;
}
.norms-panel__footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  border-top: 1px solid var(--lightGrey);
}
.norms-panel__footer button {
  padding: 15px 20px;
  background-color: var(--dark);
  color: var(--light);
  font-size: 14px;
  font-weight: 500;
  flex-grow: 1;
}
.norms-panel__footer button.disable-btn {
  background-color: var(--grey);
}
.norms-panel__content {
  overflow: hidden;
  width: 100%;
  flex: 1;
}
.norms-panel__content.disabled {
  background-image: url('/assets/img/subscribe_errors.png');
  background-size: auto 280px;
  background-repeat: no-repeat;
  background-position: center -50px;
}
.norms-panel__content .splitter {
  margin: 10px;
  border-top: var(--boxShadow) solid 1px;
}
.norms-panel__content ul .norm {
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 12px;
  cursor: default;
}
.norms-panel__content ul .norm.ignored {
  opacity: 0.6;
}
.norms-panel__content ul .norm:hover {
  background-color: var(--darkerLight);
}
.norms-panel__content ul .norm:hover .norm__btn {
  visibility: visible;
}
.norms-panel__content ul .norm__icon {
  min-width: 16px;
  min-height: 16px;
  width: 16px;
  height: 16px;
  margin-right: 28px;
}
.norms-panel__content ul .norm__icon svg {
  width: 100%;
  height: 100%;
}
.norms-panel__content ul .norm__data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.norms-panel__content ul .norm__data span {
  font-size: 11px;
  line-height: 18px;
  color: var(--grey);
}
.norms-panel__content ul .norm__data span.reason {
  color: var(--warning);
}
.norms-panel__content ul .norm__btn {
  visibility: hidden;
  margin-left: auto;
}
.norms-panel__content ul .norm__btn svg {
  cursor: pointer;
  width: 10px;
  padding-left: 4px;
}
.norms-panel__content ul .norm__btn svg:hover path {
  fill: var(--lightPrimary);
}
@media (max-width: 650px) {
  .norms-panel__footer {
    padding-bottom: 30px;
  }
}
.norms-list {
  padding: 10px 20px;
}
.norms-list h3 {
  font-weight: 600;
  margin: 10px;
}
.norms-list__none {
  font-size: 13px;
  font-weight: 500;
  line-height: 13px;
  color: var(--grey);
  padding: 15px 0px;
  text-align: center;
}
.norms-list ul .norm {
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 12px;
  cursor: default;
}
.norms-list ul .norm.ignored {
  opacity: 0.6;
}
.norms-list ul .norm:hover {
  background-color: var(--darkerLight);
}
.norms-list ul .norm:hover .norm__btn {
  visibility: visible;
}
.norms-list ul .norm__icon {
  min-width: 16px;
  min-height: 16px;
  width: 16px;
  height: 16px;
  margin-right: 28px;
}
.norms-list ul .norm__icon svg {
  width: 100%;
  height: 100%;
}
.norms-list ul .norm__data {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.norms-list ul .norm__data span {
  font-size: 11px;
  line-height: 18px;
  color: var(--grey);
}
.norms-list ul .norm__data span.reason {
  color: var(--warning);
}
.norms-list ul .norm__btn {
  visibility: hidden;
  margin-left: auto;
}
.norms-list ul .norm__btn svg {
  cursor: pointer;
  width: 10px;
  padding-left: 4px;
}
.norms-list ul .norm__btn svg:hover path {
  fill: var(--lightPrimary);
}
.norms-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #e3e3e3;
  box-shadow: inset 0px 0px 10px #00000011;
  border-radius: 5px;
  padding: 3px;
}
.norms-btn:hover {
  background-color: var(--darkerLight);
}
.norms-btn .notifications {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--warning);
  color: var(--light);
  border-radius: 15px;
  padding: 3px 6px;
  font-weight: 600;
  font-family: sans-serif;
}
.norms-btn svg {
  width: 35px;
  height: 35px;
}
.norms-btn svg path {
  fill: var(--dark);
}

/** @format */
.treepath {
  display: flex;
  /* position: absolute; */
  padding: 15px 25px;
  gap: 5px;
}
.treepath__back {
  cursor: pointer;
  width: 16px;
  height: 16px;
  transition: transform 150ms ease-in-out;
}
.treepath__back:hover {
  transform: translateX(-3px);
}
.treepath__step {
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--grey);
  text-transform: lowercase;
}
.treepath__step .active {
  cursor: default;
  color: var(--dark);
}
.treepath__step:hover .previous {
  color: var(--dark);
}

/** @format */
.selection-panel {
  flex: 0 1 auto;
  transition: all 0s;
  position: absolute;
  left: 0px;
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  background-color: #ffffff;
  z-index: 20;
  transform: translateX(-400px);
  transition: transform 0.5s;
  height: auto;
  overflow: visible;
  width: auto;
  z-index: 5;
}
.selection-panel.open .selection-panel__head .arrow {
  transform: rotateZ(0deg);
  transition: 0.7s all;
}
.selection-panel.open .selection-panel__content {
  transform: translateY(0px);
}
.selection-panel:not(.open):hover .selection-panel__expand-btn {
  background-color: var(--darkerLight);
}
.selection-panel.show {
  transform: translateX(0px);
}
.selection-panel .remove-btn {
  position: absolute;
  top: 10px;
  left: 10px;
}
.selection-panel .remove-btn:hover .svg svg path {
  fill: var(--secondary);
}
.selection-panel .deleted-object-head {
  color: var(--grey);
  text-decoration: line-through;
}
.selection-panel__head {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--darkGrey);
  padding-left: 0px;
  padding-right: 10px;
  cursor: pointer;
  border-right: 10px solid var(--darkGrey);
  width: 400px;
  box-sizing: border-box;
  box-shadow: 0px 0px 10px #00000020;
  background-color: var(--light);
  left: 0px;
  height: 100px;
  z-index: 2;
}
.selection-panel__head .search {
  margin: 0;
  font-size: 14px;
}
.selection-panel__head .arrow {
  transform: rotateZ(180deg);
  transition: 0.7s all;
  transform-origin: center 70%;
  padding-left: 15px;
  padding-right: 15px;
  cursor: pointer;
}
.selection-panel__close {
  width: 30px;
  height: 70px;
  display: flex;
  box-sizing: border-box;
  padding: 10px;
}
.selection-panel__close:hover svg path {
  fill: var(--dark);
}
.selection-panel__head-thumbnail {
  width: 70px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  background-color: #fff;
}
.selection-panel__head-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0px 10px;
}
.selection-panel__head-text p {
  font-size: 12px;
  font-weight: 600;
}
.selection-panel__head-text span {
  font-size: 11px;
  color: #858585;
  margin-top: 5px;
}
.selection-panel__head-actions {
  display: flex;
  gap: 5px;
}
.selection-panel__head-action {
  cursor: pointer;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
}
.selection-panel__head-action .svg svg path {
  fill: #6b6b6b;
}
.selection-panel__head-action:hover .svg svg path {
  fill: var(--dark);
}
.selection-panel__head-action:hover.delete .svg svg path {
  fill: var(--warning);
}
.selection-panel__head-action.delete .svg svg {
  width: 20px;
  height: 20px;
}
.selection-panel__expand-btn {
  position: fixed;
  display: block;
  text-align: center;
  background-color: #fffd;
  width: 100%;
  left: 0px;
  bottom: 0px;
  height: 30px;
  line-height: 30px;
  font-size: 11px;
  cursor: pointer;
}
.selection-panel__expand-btn:hover {
  background-color: var(--darkerLight);
}
.selection-panel__id {
  position: absolute;
  right: 12px;
  top: 5px;
  font-size: 11px;
  line-height: 20px;
  padding: 0px 10px;
  background-color: white;
  border-radius: 5px;
  color: var(--grey);
  font-family: sans-serif;
}
.selection-panel__scroller {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}
.selection-panel__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.selection-panel__footer {
  box-shadow: 0px -10px 10px #00000020;
  margin-bottom: 35px;
  padding: 10px 10px 5px 10px;
  border-top: 1px solid var(--boxShadow);
}
.selection-panel__footer .done-btn {
  width: 100%;
}
.selection-panel__content {
  position: absolute;
  width: 400px;
  height: calc(100vh - 164px);
  left: 0px;
  background-color: var(--light);
  top: 100px;
  transform: translateY(calc(195px - 100vh));
  transition: transform 0.3s ease-in-out;
}
.selection-panel__content .close {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 7px;
  right: 18px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selection-panel__content .close .svg,
.selection-panel__content .close svg {
  width: 100%;
  height: 100%;
}
.selection-panel__content .row + .row {
  margin-top: 8px;
}
.selection-panel__content .row .product-options {
  width: 70px;
}
.selection-panel__content .row .product-options input.number-input {
  height: 28px;
  margin: -11px 0px;
}
.selection-panel__content input.number-input.has-error {
  border-color: var(--warning);
  color: var(--warning);
}
.selection-panel__content .heading-title {
  color: var(--dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 14px;
  margin-top: 24px;
  padding-bottom: 21px;
  text-align: center;
}
.selection-panel__content .row + .row-products {
  margin-top: 8px;
}
.selection-panel__content .row-products + .row-products {
  margin-top: 8px;
}
.selection-panel__content .products {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 10px;
}
.selection-panel__content .products .prop {
  width: 100%;
  text-align: center;
  padding: 10px;
}
.selection-panel__content .options h2 {
  margin-top: 0px;
}
.selection-panel__content .options hr {
  margin-top: 12px;
  margin-bottom: 22px;
  border-top: none;
  border-bottom: 1px solid #e7ebed;
}
.selection-panel__content .options .material-choice {
  padding: 0 19px;
}
.selection-panel__content .bubble {
  position: relative;
  margin: 15px;
  border-radius: 5px;
  box-shadow: inset 0px 0px 10px #00000011;
  border: 1px solid var(--boxShadow);
  overflow: hidden;
  padding: 10px;
}
.selection-panel__content .bubble.no-padding {
  padding: 0;
}
.selection-panel__content .bubble__split {
  display: flex;
  flex-direction: row;
  padding: 0;
}
.selection-panel__content .bubble__left,
.selection-panel__content .bubble__right {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 50%;
  padding: 10px;
}
.selection-panel__content .bubble__left {
  border-right: 1px solid #e3e3e3;
}
.selection-panel__content .bubble__title {
  display: flex;
  gap: 10px;
  margin: 15px;
  text-transform: uppercase;
  font-size: 14px;
  align-items: center;
}
.selection-panel__content .bubble__title .reset-btn {
  padding: 0;
}
.selection-panel__content .bubble__title .reset-btn svg {
  width: 18px;
}
.selection-panel__content .bubble__title .svg {
  cursor: pointer;
}
.selection-panel__content .bubble .product-card {
  background-color: var(--light);
  cursor: default;
}
.selection-panel__content .bubble .product-card .product-card__tick {
  display: none;
}
.selection-panel__content .bubble button.btn {
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  text-align: center;
  color: var(--light);
  width: 100%;
  background-color: var(--darkGrey);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 36px;
}
.selection-panel__content .bubble button.btn:active {
  background-color: var(--dark);
}
.selection-panel__content .bubble button.btn:hover {
  opacity: 0.9;
}
.selection-panel__content .bubble .option + .option {
  margin-top: 8px;
}
.selection-panel__content .bubble .option {
  padding: 0px 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  color: var(--darkGrey);
  display: flex;
  align-items: center;
  margin: 5px;
  margin-top: 12px;
}
.selection-panel__content .bubble .option .svg {
  max-width: 12px;
  max-height: 12px;
  margin-right: 6px;
}
.selection-panel__content .bubble .option .svg svg {
  width: 100%;
  height: 100%;
}
.selection-panel__content .bubble .row .prop {
  font-size: 14px;
}
.selection-panel__content .bubble .linkeditems.itemGrid .itemGrid__items__item {
  width: 45%;
  /* margin-left: 3%; */
  display: flex;
  flex-direction: row;
  height: fit-content;
}
.selection-panel__content .bubble .linkeditems.itemGrid .itemGrid__items__item .svg:not(.itemGrid__items__item__delete) {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 20%;
  flex-shrink: 0;
}
.selection-panel__content .bubble .row {
  display: flex;
  white-space: pre-wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.selection-panel__content .bubble .row .prop-btn {
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding: 0.4em 10px;
}
.selection-panel__content .bubble .row .prop-btn .svg {
  margin: 0;
  flex: 1;
}
.selection-panel__content .bubble .row .prop-btn .svg svg {
  width: 15px;
  height: 15px;
}
.selection-panel__content .bubble .row .prop-btn::after {
  content: '';
  flex: 1;
}
.selection-panel__content .bubble .row .hspacer {
  padding-left: 1ch;
}
.selection-panel__content .bubble .row .prop-with-error {
  position: relative;
}
.selection-panel__content .bubble .row .error {
  position: absolute;
  color: red;
  display: block;
  font-style: italic;
  font-size: 9px;
}
.selection-panel__content .bubble .row .prop {
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
}
.selection-panel__content .bubble .row .prop.title {
  display: block;
}
.selection-panel__content .bubble .row .prop.subtitle {
  display: block;
  font-size: 11px;
  color: #aaa;
}
.selection-panel__content .bubble .row .value {
  font-size: 12px;
  white-space: pre;
  color: var(--grey);
  font-weight: 600;
  cursor: default;
}
.selection-panel__content .bubble .row.disabled {
  opacity: 0.5;
}
.selection-panel__content .bubble .row input,
.selection-panel__content .bubble .row textarea {
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  height: 38px;
  padding-left: 15px;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
  float: right;
  max-width: 80px;
}
.selection-panel__content .bubble .row textarea {
  padding-top: 10px;
  padding-bottom: 10px;
  min-height: 80px;
  max-width: unset;
  resize: vertical;
  flex-grow: 1;
}
.selection-panel__content .bubble .row input[type='checkbox'] {
  width: 24px;
  height: 24px;
}
.selection-panel__content .bubble .row input[type='color'] {
  border: none;
  padding: 0;
  cursor: pointer;
  background-color: transparent;
}
.selection-panel__content .bubble .row select {
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  background-color: transparent;
  height: 38px;
  padding-left: 15px;
  font-size: 11px;
  font-weight: 600;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url('/assets/icons/icon-arrow.png');
  background-position: right 15px center;
  background-size: 11px auto;
  background-repeat: no-repeat;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 26px;
}
.selection-panel__content .scrolling-layout__footer .done-btn {
  margin: 10px;
  flex-grow: 1;
}
.selection-panel__content .scrolling-layout__footer .done-btn p {
  font-weight: 500;
  font-size: 14px;
}
@media (max-width: 650px) {
  .selection-panel {
    width: 100%;
    bottom: 0px;
    transform: translateY(100px);
    height: 130px;
    z-index: 10;
    left: 0px;
  }
  .selection-panel.show {
    transform: translateY(0px);
  }
  .selection-panel.open {
    transform: translateY(calc(60px - 50vh));
  }
  .selection-panel.open.full {
    transform: translateY(calc(260px - 100vh));
  }
  .selection-panel.open.full .selection-panel__content {
    height: calc(100vh - 200px);
  }
  .selection-panel.open .selection-panel__expand-btn {
    height: 30px;
  }
  .selection-panel__scroller {
    padding-top: 30px;
    padding-bottom: 0;
  }
  .selection-panel__expand-btn {
    top: 0px;
    bottom: auto;
    height: 60px;
  }
  .selection-panel__head {
    width: 100%;
    border-right: 0px;
    height: 70px;
  }
  .selection-panel__content {
    top: 70px;
    transform: translateY(0px);
    width: 100%;
    height: 50vh;
    transition: height 0.5s;
  }
  .selection-panel__footer {
    margin: 0;
  }
  .selection-panel .item-panel-body .scrolling-layout__content {
    padding-bottom: 100px;
  }
  .selection-panel__search {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .selection-panel__search .treepath {
    flex-wrap: wrap;
  }
  .selection-panel__search .search__box input[type='text'] {
    width: 45px;
  }
}

/** @format */
.toolbox {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: white;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  max-height: 600px;
  overflow: auto;
}
.toolbox__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 250px;
}
.toolbox textarea {
  width: 370px;
  height: 540px;
  font-family: monospace;
}
.toolbox button {
  margin: 10px 0px 0px 0px;
}
.toolbox .diff-action {
  width: 400px;
  padding: 5px 10px;
}
.toolbox .diff-action .rm {
  position: absolute;
  left: 6px;
  cursor: pointer;
}
.toolbox .diff-action.selected {
  color: var(--primary);
}
.toolbox .diff-action textarea {
  height: 100px;
}
.toolbox .tooltip button {
  width: 100%;
}
.selector-panel {
  min-width: 500px;
  overflow: unset;
}
.selector-panel .error {
  color: red;
  font-size: 14px;
  margin: 5px;
}
.selector-panel textarea {
  margin-top: 10px;
  height: 100px;
  min-height: 100px;
  font-family: monospace;
  width: 100%;
  resize: vertical;
}
.selector-panel .result {
  max-height: 400px;
  overflow: auto;
  margin-top: 10px;
  padding: 10px;
}
.selector-panel .result .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.selector-panel .result .row div {
  font-size: 14px;
}
.selector-panel .result .row .floor {
  width: 10%;
}
.selector-panel .result .row .name {
  width: 25%;
}
.selector-panel .result .row .roomName {
  width: 25%;
}
.selector-panel .search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
}
.selector-panel .selector .category {
  padding: 6px 10px;
  width: fit-content;
  max-width: 300px;
}
.selector-panel .selector .product {
  max-width: 300px;
}
.selector-panel .item-selector .selector__item {
  background-color: var(--primary);
}
.selector-panel .room-selector .selector__item {
  background-color: var(--secondary);
}
.selector-panel .selector__wrapper {
  max-width: 600px;
}
.script-panel textarea {
  height: 240px;
  margin-top: 10px;
}
.ignored-warnings-panel {
  overflow-x: hidden;
}
.ignored-warnings-panel h3.title {
  margin-top: 10px;
}
.ignored-warnings-panel textarea {
  width: 100%;
  height: 200px;
}
.permissions-panel h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.permissions-panel textarea {
  margin-bottom: 5px;
  min-height: 180px;
  height: auto;
  resize: vertical;
}
.actions-panel__content {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}
.actions-panel .row {
  display: flex;
  gap: 10px;
  flex-direction: row;
  justify-content: space-between;
  margin: 8px 0px;
}
.actions-panel .row .typeid {
  max-width: 100px;
  width: 100px;
}
.actions-panel .row .text {
  width: 250px;
  color: var(--darkGrey);
  max-width: 250px;
}
.import-export {
  display: flex;
  gap: 10px;
}
.import-export__grp {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.import-export__grp button {
  flex-grow: 1;
}
.import-export__status {
  max-height: 25px;
  resize: none;
  font-size: 12px;
}
.import-export button {
  margin: 0;
}

/** @format */
.selector__wrapper {
  display: flex;
  flex-direction: row;
  position: relative;
}
.selector__clause {
  display: flex;
  background-color: var(--darkGrey);
  width: fit-content;
  border-radius: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 5px;
  margin-top: 0px;
  position: relative;
}
.selector__or {
  font-weight: 500;
  align-self: center;
  margin: 5px;
  color: var(--light);
}
.selector__and {
  font-weight: 500;
  align-self: center;
  padding: 1px;
  margin: 0px 5px;
  position: absolute;
  left: -35px;
  bottom: -30px;
}
.selector__and.first {
  visibility: hidden;
}
.selector__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--secondary);
  border-radius: 7px;
  padding: 6px 10px;
  margin: 5px;
  height: fit-content;
  min-width: 10em;
  min-height: 1.5em;
  font-weight: 600;
  color: var(--light);
  font-size: 12px;
  gap: 1em;
}
.selector__item__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.selector__item input {
  padding: 2px;
  font-size: 12px;
  font-family: monospace;
}
.selector__item.invalid input {
  color: red;
  border-color: red;
}
.selector__item__del {
  min-width: unset !important;
  cursor: pointer;
  color: var(--dark);
  align-self: center;
}
.selector__item__del:hover {
  color: var(--light);
}
.selector__item:not(.selector__item.selected) {
  cursor: pointer;
}
.selector__item.add {
  min-width: unset;
  width: fit-content;
  background-color: var(--grey);
  opacity: 0.7;
  cursor: pointer;
}
.selector__item.add:hover {
  opacity: 1;
}
.selector__item.unknown {
  background-color: var(--grey);
}
.selector .selector__item input[type="checkbox"].selector__item__negation {
  align-self: center;
}
.selector .product-select {
  max-width: 200px;
}
.selector .multicategory {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.selector .multicategory__inner.select-category__value:hover {
  background-color: var(--boxShadow);
}
.selector .multicategory__item {
  cursor: default;
  display: flex;
  justify-content: space-between;
  color: green;
  width: 100%;
  min-width: 150px;
  background-color: var(--light);
  padding: 4px;
  font-weight: 500;
  font-size: 12px;
  border-radius: 4px;
  box-sizing: border-box;
}
.selector .multicategory__item__remove {
  color: black;
  cursor: pointer;
  margin: 0px 5px;
}
.selector .multicategory__item__remove:hover {
  color: red;
}
.selector .multicategory__btns {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
.selector .multicategory__btns .multicategory__btn {
  width: unset;
  flex-grow: 1;
}
.selector .multicategory__btn {
  width: 100%;
  font-weight: 500;
  border: var(--dark) 1px solid;
}
.selector .multicategory__btn:hover {
  background-color: var(--boxShadow);
}
.selector .multicategory__btn.include {
  color: green;
}
.selector .multicategory__btn.except {
  color: red;
}
.selector .multicategory__btn[disabled] {
  cursor: default;
  background-color: var(--lightGrey);
  color: var(--grey);
}
.selector .select-category__value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--light);
  color: var(--dark);
  border: 1px solid var(--darkGrey);
  border-radius: 4px;
  padding: 4px;
  font-size: 12px;
  text-transform: capitalize;
  line-height: normal;
  max-width: unset;
  min-width: 150px;
}
.selector .select-category__search {
  width: unset;
  border-radius: 6px;
}
.selector .select-category__list {
  min-width: unset;
}
.selector .select-category__list-group-name,
.selector .select-category__list-item {
  text-transform: capitalize;
  color: var(--dark);
  cursor: pointer;
  white-space: nowrap;
}
.selector .select-category__list-group-name:hover,
.selector .select-category__list-item:hover {
  color: var(--primary);
}
.selector .select-category__list-group-name.selected span,
.selector .select-category__list-item.selected span {
  color: var(--primary);
}
.selector .select-category__list-group.selected > span {
  color: var(--primary);
}
.selector .multi-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.selector .multi-select__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.selector .multi-select__list__item {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  color: var(--dark);
  width: 100%;
  min-width: 150px;
  background-color: var(--light);
  padding: 4px;
  font-weight: 500;
  font-size: 12px;
  border-radius: 4px;
  box-sizing: border-box;
}
.selector .multi-select__list__item:hover .multi-select__list__remove {
  color: red;
}
.selector .multi-select__btns {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
.selector .multi-select__btns button,
.selector .multi-select__btns select {
  border: 1px solid var(--darkGrey);
}
.selector .multi-select__btns button:hover {
  background-color: var(--boxShadow);
}

/** @format */
.select-category {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
  position: relative;
}
.select-category__dropdown .dropdown__content {
  right: auto;
  left: -30px;
  top: -30px;
}
.select-category__dropdown .select-category__list {
  height: 280px;
  width: 300px;
}
.select-category__value {
  display: flex;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.select-category__value .svg {
  display: flex;
  width: 10px;
  height: 10px;
  margin-top: -2px;
}
.select-category__header {
  padding: 10px 20px 20px 20px;
  border-bottom: 1px solid var(--lightGrey);
}
.select-category__search {
  width: 100%;
  border: 1px solid var(--lightGrey);
  border-radius: 6px;
  height: 30px;
}
.select-category__search input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  padding: 5px 20px;
  font-size: 13px;
  border-radius: 5px;
}
.select-category__search input:focus {
  outline: none;
}
.select-category__list {
  background-color: white;
  max-height: 300px;
  overflow: auto;
  padding: 10px 20px;
}
.select-category__list-item {
  cursor: pointer;
  line-height: 17px;
  padding: 0px 0px 5px 0px;
}
.select-category__list-item.selected {
  color: var(--primary);
}
.select-category__list-group.root > .select-category__label {
  display: none;
}
.select-category__list-group.root > .select-category__list-group-children {
  padding-left: 0px;
}
.select-category__list-group.closed > .select-category__list-group-children {
  display: none;
}
.select-category__list-group.closed > .select-category__label .select-category__arrow:before {
  transform: rotate(0deg);
}
.select-category__list-group.closed.root > .select-category__list-group-children,
.select-category__list-group.closed.object > .select-category__list-group-children,
.select-category__list-group.closed.material > .select-category__list-group-children {
  display: block;
}
.select-category__list-group.root > .select-category__label .select-category__arrow:before,
.select-category__list-group.object > .select-category__label .select-category__arrow:before,
.select-category__list-group.material > .select-category__label .select-category__arrow:before {
  display: none;
}
.select-category__list-group.selected > .select-category__label,
.select-category__list-item.selected > .select-category__label {
  color: var(--primary);
}
.select-category__list-group.selected > .select-category__label.with-checkbox:before,
.select-category__list-item.selected > .select-category__label.with-checkbox:before {
  border-color: var(--primary);
  content: '\2713';
  text-align: right;
}
.select-category__list-group.partial > .select-category__label,
.select-category__list-item.partial > .select-category__label {
  color: var(--svgHover);
}
.select-category__list-group.partial > .select-category__label.with-checkbox:before,
.select-category__list-item.partial > .select-category__label.with-checkbox:before {
  border-color: var(--svgHover);
  content: '\2012';
}
.select-category__list-group.child-selected > .select-category__label,
.select-category__list-item.child-selected > .select-category__label {
  font-weight: 100;
  color: var(--primary);
}
.select-category__list-group > .select-category__label {
  text-transform: capitalize;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 0px;
  display: block;
}
.select-category__label.with-checkbox:before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid var(--dark);
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  margin: -3px 7px 0px 0px;
  text-align: center;
  line-height: 10px;
  font-size: 10px;
}
.select-category__arrow {
  cursor: pointer;
}
.select-category__arrow:before {
  display: inline-block;
  transform: rotate(90deg);
  content: '\203A';
  margin: 0px 6px;
}
.select-category__arrow.right:before {
  content: '\2039';
  transform: rotate(-90deg);
}
.select-category__list-group-children {
  padding-left: 10px;
}
.select-category button {
  margin: 20px auto;
  display: block;
  padding: 10px 40px;
  background-color: var(--primary);
  color: var(--light);
  font-size: 15px;
}

/** @format */
.choice-input-comp__content {
  display: flex;
  border-radius: 4px;
  background-color: var(--lightGrey);
}
.choice-input-comp__item:hover {
  background-color: var(--boxShadow);
}
.choice-input-comp__item.selected {
  background-color: var(--svg);
  color: var(--light);
}
.choice-input-comp__item.selected:hover {
  cursor: default;
}
.choice-input-comp__item {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  margin: 1px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
}

/** @format */
#view {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#view .viewer {
  height: 100%;
}
#view .viewer button.diff-mode {
  display: none;
}
#visit {
  height: 100%;
}
#visit .viewer {
  height: 100%;
}
#visit .viewer button.diff-mode {
  display: none;
}
.no-header {
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 1010;
  padding: 5px;
}
.no-header .bakery__open-btn {
  padding: 16px 16px;
  border-radius: 5px;
}
#explore {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#explore .body {
  display: flex;
  flex-flow: row;
  height: 100%;
}
#explore .panel {
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  box-sizing: border-box;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.5s;
  width: 30%;
  max-width: 450px;
  min-width: 350px;
  z-index: 10;
}
#explore .panel__content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
#explore .panel__content__dispositions {
  width: 100%;
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  overflow-y: auto;
  padding-top: 30px;
}
#explore .panel__content__main__intro {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0px 10%;
  transition: all 0.3s;
  overflow: hidden;
}
#explore .panel__content__main__intro__title {
  flex: 0 1 auto;
  margin-top: 40px;
  font-size: 18px;
  font-weight: 600;
  color: var(--darkGrey);
  margin-bottom: 22px;
}
#explore .panel .variants {
  display: flex;
  flex-direction: column;
  padding: 40px 20px 20px 20px;
}
#explore .panel .variants .children {
  position: relative;
  padding: 10px 0px 0px 20px;
}
#explore .panel .variants .children:before {
  content: '';
  position: absolute;
  width: 2px;
  height: auto;
  background-color: #eee;
  left: 7px;
  top: 0px;
  bottom: 42px;
}
#explore .panel .variants .children .variant-container {
  position: relative;
}
#explore .panel .variants .children .variant-container .variant {
  border-left-color: #b0afaf;
}
#explore .panel .variants .children .variant-container:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #eee;
  left: -13px;
  top: 42px;
}
#explore .panel .variants .variant-container + .variant-container {
  margin-top: 20px;
}
#explore .panel .variants .variant {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  border-radius: 7px;
  box-shadow: 0px 0px 6px #0000001f;
  border: 2px solid transparent;
  gap: 20px;
}
#explore .panel .variants .variant__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
#explore .panel .variants .variant__icon .svg {
  width: 100%;
  height: 100%;
}
#explore .panel .variants .variant__icon .svg svg {
  width: 100%;
  height: 100%;
}
#explore .panel .variants .variant__title {
  flex-grow: 1;
  font-size: 13px;
  line-height: 15px;
}
#explore .panel .variants .variant__price {
  font-size: 12px;
  font-weight: 600;
  color: #9f9f9f;
  white-space: nowrap;
}
#explore .panel .variants .variant__checkbox {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid #d8d9dd;
  border-radius: 4px;
  width: 12px;
  height: 12px;
}
#explore .panel .variants .variant.no-icon .variant__checkbox {
  position: relative;
  top: 0px;
  right: 0px;
  flex-shrink: 0;
}
#explore .panel .variants .variant.disabled {
  opacity: 0.2;
  cursor: default;
}
#explore .panel .variants .variant.excluded {
  opacity: 0.3;
  border-color: #ffc5c5;
}
#explore .panel .variants .variant.selected {
  border-color: var(--primary) !important;
}
#explore .panel .variants .variant.selected .svg svg path {
  fill: var(--primary);
}
#explore .panel .variants .variant.selected .variant__title {
  color: var(--primary);
  font-weight: 600;
}
#explore .panel .variants .variant.selected .variant__price {
  color: var(--primary);
}
#explore .panel .variants .variant.selected .variant__checkbox:after {
  content: '\2713';
  position: absolute;
  top: -20px;
  right: -17px;
  font-size: 40px;
  color: var(--primary);
}
#explore .panel .variants .variant.selected + .children:before {
  background-color: #b0afaf;
}
#explore .panel .variants .variant.selected + .children > .variant-container:before {
  background-color: #b0afaf;
}
#explore .viewer {
  height: 100%;
}
#explore .viewer button.diff-mode {
  display: none;
}
@media (max-width: 650px) {
  .editor .editor-panel {
    display: none;
  }
  #main.editor .viewer div.controls__bottom {
    left: auto;
    top: 40px;
  }
  #explore .body {
    flex-direction: column-reverse;
  }
  #explore .body .panel {
    width: 100%;
    height: 40%;
    max-width: none;
  }
  #explore .body .panel__content__main__intro__title {
    margin: 0px;
  }
  #explore .body .panel .variants {
    padding: 30px 20px 0px 20px;
  }
  #explore .body .panel .summary__content__special-request {
    margin-top: 0px;
  }
  #explore .body .viewer .controls__bottom {
    top: 40px;
  }
}

/** @format */
/** @format */
.centering {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ratio-box {
  height: 56.25vw;
  width: 100vw;
  max-height: 100vh;
  max-width: 177.78vh;
  position: relative;
}
* {
  -webkit-tap-highlight-color: transparent;
}
#main.editor #body {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
  z-index: 0;
}
#main.editor .disabled-step {
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-popup > div {
  width: 80%;
  height: 80%;
}
body.iframe-mode section#header {
  display: none;
}
.editor-panel {
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  box-sizing: border-box;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.5s;
  width: 30%;
  max-width: 500px;
  min-width: 350px;
}
.editor-panel.placing-item {
  cursor: grabbing;
}
.editor-panel.no-footer .editor-panel__content {
  height: 100%;
}
.editor-panel.hide-groups .editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded {
  display: none;
}
.editor-panel .videos__video {
  position: relative;
  background-color: #f6cf6b49;
  padding: 10px 40px;
  cursor: pointer;
  margin: 5px 0px;
  font-size: 13px;
}
.editor-panel .videos__video:before {
  content: 'i';
  left: 10px;
}
.editor-panel .videos__video:after {
  content: '\23F5';
  right: 10px;
}
.editor-panel .videos__video:before,
.editor-panel .videos__video:after {
  display: block;
  position: absolute;
  top: 6px;
  text-align: center;
  line-height: 18px;
  border: 1px solid #000;
  border-radius: 20px;
  width: 20px;
  height: 20px;
}
.editor-panel__content {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  height: calc(100% - 80px);
  width: 100%;
  position: relative;
  box-sizing: border-box;
}
.editor-panel__content__dispositions {
  width: 100%;
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  overflow-y: auto;
}
.editor-panel__content__dispositions .editor-panel__content__main__intro__text {
  text-align: center;
}
.editor-panel__content__main {
  width: 100px;
  box-shadow: 4px 4px 12px 0 rgba(232, 232, 237, 0.5);
  transition: all 0.5s;
  background-color: var(--light);
  z-index: 10;
  overflow: hidden;
  min-width: 100px;
  position: relative;
}
.editor-panel__content__main .wrapper-top {
  position: sticky;
  top: 0px;
  z-index: 1;
  height: 0px;
  overflow: visible;
  width: 100%;
}
.editor-panel__content__main .wrapper-top.visible .scroll-helper-top {
  opacity: 1;
  height: 50px;
  padding-top: 15px;
}
.editor-panel__content__main .wrapper-top .scroll-helper-top {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  top: 0px;
  height: 0px;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s opacity;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 14px;
  color: var(--dark);
  padding-top: 0px;
}
.editor-panel__content__main .wrapper-top .scroll-helper-top .svg {
  width: 10px;
  transform: rotateZ(180deg);
}
.editor-panel__content__main .wrapper-bottom {
  position: sticky;
  bottom: 0px;
  z-index: 1;
  height: 0px;
  overflow: visible;
  width: 100%;
}
.editor-panel__content__main .wrapper-bottom.visible .scroll-helper-down {
  opacity: 1;
  height: 50px;
  padding-bottom: 15px;
}
.editor-panel__content__main .wrapper-bottom .scroll-helper-down {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  overflow: hidden;
  bottom: 0px;
  height: 0px;
  width: 100%;
  opacity: 0;
  transition: 0.5s opacity;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 14px;
  color: var(--dark);
  padding-bottom: 0px;
}
.editor-panel__content__main .wrapper-bottom .scroll-helper-down .svg {
  width: 10px;
}
.editor-panel__content__main .scroller::-webkit-scrollbar {
  display: none;
}
.editor-panel__content__main .scroller {
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: auto;
  box-sizing: border-box;
  height: 100%;
}
.editor-panel__content__main__intro {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0px 10%;
  transition: all 0.3s;
  overflow: hidden;
}
.editor-panel__content__main__intro__title {
  flex: 0 1 auto;
  margin-top: 40px;
  font-size: 18px;
  font-weight: 600;
  color: var(--darkGrey);
  margin-bottom: 22px;
}
.editor-panel__content__main__intro__text,
.editor-panel__content__main__intro__disabled {
  flex: 0 1 auto;
  font-size: 14px;
  color: var(--darkGrey);
  text-align: left;
  line-height: 20px;
  white-space: pre-line;
}
.editor-panel__content__main__intro__disabled {
  margin-top: 40px;
}
.editor-panel__content__secondary {
  transition: all 0.5s;
  width: 100%;
  box-shadow: 4px -6px 12px 0 rgba(232, 232, 237, 0.5);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--light);
  position: relative;
  z-index: 5;
}
.editor-panel__content__secondary .itemGrid {
  position: relative;
  display: flex;
  flex-direction: column;
}
.editor-panel__content__secondary .itemGrid.coverings {
  max-height: 100%;
}
.editor-panel__content__secondary .itemGrid .breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 18px;
  margin-top: 21px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--grey);
}
.editor-panel__content__secondary .itemGrid .breadcrumbs .svg {
  margin-right: 12px;
  width: 16px;
  height: 12px;
}
.editor-panel__content__secondary .itemGrid .breadcrumbs .svg svg {
  width: 100%;
  height: 100%;
}
.editor-panel__content__secondary .itemGrid .breadcrumbs span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  padding-bottom: 2px;
}
.editor-panel__content__secondary .itemGrid .breadcrumbs .active {
  color: var(--darkGrey);
  cursor: default;
}
.editor-panel__content__secondary .itemGrid .breadcrumbs .previous:hover {
  color: var(--darkGrey);
}
.editor-panel__content__secondary .itemGrid hr {
  margin-top: 12px;
  margin-bottom: 22px;
  border-top: none;
  border-bottom: 1px solid #e7ebed;
}
.editor-panel__content__secondary .itemGrid .products {
  display: flex;
  flex-direction: column;
  padding: 8px 18px;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid #e7ebed;
}
.editor-panel__content__secondary .itemGrid .products .product-card.empty .product-card__main__info {
  min-height: 60px;
  justify-content: center;
}
.editor-panel__content__secondary .itemGrid .products__tip {
  color: var(--grey);
  padding: 20px 9px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: default;
}
.editor-panel__content__secondary .itemGrid__roomName {
  font-size: 12px;
  font-weight: 800;
  color: var(--darkGrey);
  text-align: center;
  text-transform: uppercase;
  margin-top: 24px;
  margin-bottom: 14px;
  padding: 0px 10%;
  white-space: break-spaces;
}
.editor-panel__content__secondary .itemGrid .mode-settings {
  display: flex;
  flex-direction: column;
}
.editor-panel__content__secondary .itemGrid .mode-settings hr {
  margin-top: 12px;
  margin-bottom: 12px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .prop {
  font-size: 14px;
  color: var(--dark);
  font-weight: 600;
  line-height: 25px;
}
.editor-panel__content__secondary .itemGrid .mode-settings input[type='range'] {
  height: 38px;
  width: 100%;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  border: 1px solid #377ded;
  color: #377ded;
  background-color: transparent;
  font-size: 14px;
  padding: 10px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 18px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete .move {
  box-sizing: border-box;
  color: var(--darkGrey);
  border: 1px solid var(--darkGrey);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 19px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete .move .svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete .move .svg svg {
  width: 100%;
  height: 100%;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete .move .svg svg path {
  fill: var(--darkGrey);
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete .delete {
  box-sizing: border-box;
  border: none;
  color: var(--grey);
  font-size: 11px;
  font-weight: 600;
  line-height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 19px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete .delete .svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .move-delete .delete .svg svg path {
  fill: var(--grey);
}
.editor-panel__content__secondary .itemGrid .mode-settings .reverse,
.editor-panel__content__secondary .itemGrid .mode-settings .rotate {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0px 18px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .reverse > span,
.editor-panel__content__secondary .itemGrid .mode-settings .rotate > span {
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  margin-left: 8px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .reverse .price,
.editor-panel__content__secondary .itemGrid .mode-settings .rotate .price {
  color: var(--lightSecondary);
}
.editor-panel__content__secondary .itemGrid .mode-settings .toggle + .toggle,
.editor-panel__content__secondary .itemGrid .mode-settings .toggle + .row,
.editor-panel__content__secondary .itemGrid .mode-settings .row + .row {
  margin-top: 12px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .row {
  padding: 0px 18px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .show-hide-options .row {
  display: flex;
  justify-content: space-between;
  padding: 0px 25px;
}
.editor-panel__content__secondary .itemGrid .mode-settings .show-hide-options .row p {
  font-weight: 600;
  font-size: 12px;
}
.editor-panel__content__secondary .itemGrid .quick-customize {
  padding-left: 10%;
  padding-right: 10%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.editor-panel__content__secondary .itemGrid .quick-customize .header-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.editor-panel__content__secondary .itemGrid .quick-customize .header-container .svg-container {
  align-self: center;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  transform-origin: 50% 50%;
  margin: 0 10px 0 0;
}
.editor-panel__content__secondary .itemGrid .quick-customize .header-container .closed {
  transform: rotate(270deg);
}
.editor-panel__content__secondary .itemGrid .quick-customize .header-container .open {
  transform: rotate(180deg);
}
.editor-panel__content__secondary .itemGrid .quick-customize .header-container:only-child {
  display: none;
}
.editor-panel__content__secondary .itemGrid .quick-customize h1 {
  font-size: 14px;
  font-weight: 800;
  color: var(--dark);
}
.editor-panel__content__secondary .itemGrid .quick-customize__option {
  overflow: hidden;
}
.editor-panel__content__secondary .itemGrid .quick-customize__option > p {
  color: var(--dark);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
}
.editor-panel__content__secondary .itemGrid .quick-customize .closed {
  max-height: 0;
}
.editor-panel__content__secondary .itemGrid .quick-customize .open {
  max-height: unset;
}
.editor-panel__content__secondary .itemGrid .quick-customize .quick-customize__option + .quick-customize__option {
  margin-top: 20px;
}
.editor-panel__content__secondary .itemGrid .quick-customize .head {
  font-weight: bold;
}
.editor-panel__content__secondary .itemGrid .options h2 {
  margin-top: 0px;
}
.editor-panel__content__secondary .itemGrid .options .material-choice {
  padding: 0 19px;
}
.editor-panel__content__secondary .itemGrid .title {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--darkGrey);
  padding-top: 2px;
  padding-bottom: 12px;
  text-transform: uppercase;
}
.editor-panel__content__secondary .itemGrid .group .tab {
  color: #a1b3d0;
  border-bottom: 1px solid #a1b3d0;
  display: inline-block;
  padding: 0px 0.5em;
  cursor: pointer;
}
.editor-panel__content__secondary .itemGrid .group .tab:first-of-type {
  padding-left: 0;
}
.editor-panel__content__secondary .itemGrid .group .tab:last-of-type {
  padding-right: 0;
}
.editor-panel__content__secondary .itemGrid .group .tab.selected {
  color: #0a2e67;
  border-color: #0a2e67;
}
.editor-panel__content__secondary .itemGrid .item-creator {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 45px;
  padding-right: 45px;
  margin-top: 35px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item + .create-item {
  margin-top: 5px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 50px;
  border: 1px solid #dce2f1;
  border-radius: 6px;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item:hover,
.editor-panel__content__secondary .itemGrid .item-creator .create-item.selected {
  border-color: #7dabf3;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item:hover .svg svg path,
.editor-panel__content__secondary .itemGrid .item-creator .create-item.selected .svg svg path {
  fill: #7dabf3;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item.selected {
  cursor: grabbing;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item {
  display: flex;
  flex-direction: row;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item .svg {
  min-width: 20px;
  width: 50px;
  max-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 5px;
  box-sizing: border-box;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item .svg svg {
  height: 100%;
  width: 100%;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item .svg svg path {
  fill: #0a2e67;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item__data {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0px 5px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item__data__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item__data__text__category {
  font-size: 12px;
  font-weight: 500;
  color: var(--lightPrimary);
  margin-bottom: 3px;
  padding-right: 5px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item__data__text__name {
  color: var(--darkGrey);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item__data__price {
  font-size: 11px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__item__data .generic {
  font-style: italic;
  color: #96a7d5;
  font-size: 10px;
  flex: 0 1 auto;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded .bonded-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  padding-left: 20px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded .bonded-item .svg {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0px 3px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded .bonded-item .svg svg {
  height: 100%;
  width: 100%;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded .bonded-item .svg svg path {
  fill: #0a2e67;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded .bonded-item p {
  margin-left: 5px;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded .bonded-item p span:first-child {
  text-align: left;
  color: var(--lightPrimary);
  padding-right: 5px;
}
.editor-panel__content__secondary .itemGrid .item-creator .create-item__bonded .bonded-item p span:last-child {
  text-align: right;
  color: var(--darkGrey);
}
.editor-panel__content__secondary .itemGrid__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 18px;
  padding-right: 18px;
  position: sticky;
  height: 53px;
  width: 100%;
  bottom: 0px;
  box-sizing: border-box;
  background-color: var(--light);
}
.editor-panel__content__secondary .itemGrid__toggle p {
  font-size: 14px;
  color: var(--darkGrey);
  font-weight: 600;
}
.editor-panel__content__secondary .itemGrid__toggle .price {
  color: var(--lightPrimary);
}
.editor-panel__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80px;
  padding: 16px;
  box-sizing: border-box;
  background-color: transparent;
}
.editor-panel__footer .nextBtn {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.editor-panel__footer .disabled {
  opacity: 50%;
}
.editor-panel .variants {
  display: flex;
  flex-direction: column;
  padding: 40px 20px 20px 20px;
}
.editor-panel .variants .children {
  position: relative;
  padding: 10px 0px 0px 20px;
}
.editor-panel .variants .children:before {
  content: '';
  position: absolute;
  width: 2px;
  height: auto;
  background-color: #eee;
  left: 7px;
  top: 0px;
  bottom: 42px;
}
.editor-panel .variants .children .variant-container {
  position: relative;
}
.editor-panel .variants .children .variant-container .variant {
  border-left-color: #b0afaf;
}
.editor-panel .variants .children .variant-container:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: #eee;
  left: -13px;
  top: 42px;
}
.editor-panel .variants .variant-container + .variant-container {
  margin-top: 20px;
}
.editor-panel .variants .variant {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 15px;
  border-radius: 7px;
  box-shadow: 0px 0px 6px #0000001f;
  border: 2px solid transparent;
  gap: 20px;
}
.editor-panel .variants .variant__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}
.editor-panel .variants .variant__icon .svg {
  width: 100%;
  height: 100%;
}
.editor-panel .variants .variant__icon .svg svg {
  width: 100%;
  height: 100%;
}
.editor-panel .variants .variant__title {
  flex-grow: 1;
  font-size: 13px;
  line-height: 15px;
}
.editor-panel .variants .variant__price {
  font-size: 12px;
  font-weight: 600;
  color: #9f9f9f;
  white-space: nowrap;
}
.editor-panel .variants .variant__checkbox {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid #d8d9dd;
  border-radius: 4px;
  width: 12px;
  height: 12px;
}
.editor-panel .variants .variant:hover:not(.excluded, .disabled) .variant__title,
.editor-panel .variants .variant:hover:not(.excluded, .disabled) .variant__price {
  color: var(--primary);
}
.editor-panel .variants .variant.no-icon .variant__checkbox {
  position: relative;
  top: 0px;
  right: 0px;
  flex-shrink: 0;
}
.editor-panel .variants .variant.disabled {
  opacity: 0.2;
  cursor: default;
}
.editor-panel .variants .variant.excluded {
  opacity: 0.3;
  border-color: #ffc5c5;
}
.editor-panel .variants .variant.excluded:hover {
  opacity: 0.5;
}
.editor-panel .variants .variant.selected {
  border-color: var(--primary) !important;
}
.editor-panel .variants .variant.selected .svg svg path {
  fill: var(--primary);
}
.editor-panel .variants .variant.selected .variant__title {
  color: var(--primary);
  font-weight: 600;
}
.editor-panel .variants .variant.selected .variant__price {
  color: var(--primary);
}
.editor-panel .variants .variant.selected .variant__checkbox:after {
  content: '\2713';
  position: absolute;
  top: -20px;
  right: -17px;
  font-size: 40px;
  color: var(--primary);
}
.editor-panel .variants .variant.selected + .children:before {
  background-color: #b0afaf;
}
.editor-panel .variants .variant.selected + .children > .variant-container:before {
  background-color: #b0afaf;
}
.editor-panel .rooms {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-x: hidden;
  width: 100%;
}
.editor-panel .rooms .floor {
  width: 100%;
  border-top: 2px solid var(--lightGrey);
}
.editor-panel .rooms .room {
  position: relative;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 1 auto;
  transition: height 0.5s;
  padding: 10px 0px;
}
.editor-panel .rooms .room .title {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 600;
  padding: 0px 5px;
  color: var(--darkGrey);
}
.editor-panel .rooms .room .price {
  color: var(--darkGrey);
  font-size: 11px;
  margin-top: 3px;
}
.editor-panel .rooms .room svg {
  width: 50px;
  height: 30px;
}
.editor-panel .rooms .room svg path {
  fill: var(--darkGrey);
}
.editor-panel .rooms .room:hover svg path,
.editor-panel .rooms .room.hovered svg path {
  fill: var(--secondary);
}
.editor-panel .rooms .room:hover .title,
.editor-panel .rooms .room.hovered .title {
  color: var(--secondary);
}
.editor-panel .rooms .room:hover .price,
.editor-panel .rooms .room.hovered .price {
  color: var(--secondary);
}
.editor-panel .rooms .room.selected {
  background-color: var(--darkGrey);
}
.editor-panel .rooms .room.selected .svg svg path {
  fill: var(--light);
}
.editor-panel .rooms .room.selected .title {
  color: var(--light);
}
.editor-panel .rooms .room.selected .price {
  color: var(--light);
}