.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);
	}
}
 */

#chat-widget {
  position: absolute;
  bottom: 0px;
  right: 0px;
  z-index: 1000000;
}
#chat-widget .chat-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  border-radius: 60px;
  cursor: pointer;
  background-image: url('/assets/icons/support.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60%;
  background-color: var(--light);
  border: 1px solid var(--lightGrey);
}
#chat-widget.open .chat-btn {
  background-image: url('/assets/icons/icon-close-light.svg');
}
#chat-widget.started .chat-iframe__loader {
  display: none;
}
#chat-widget .chat-overlay {
  display: none;
  background-color: #0007;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
@media (max-width: 650px) {
  #chat-widget.open .chat-overlay {
    display: block;
  }
}
#chat-widget .chat-counter {
  position: absolute;
  background-color: var(--warning);
  color: var(--light);
  width: 20px;
  height: 20px;
  border-radius: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  top: 0px;
  right: 0px;
}
#chat-widget .chat-counter[data-count='0'] {
  display: none;
}
#chat-widget .chat-iframe {
  width: 100vw;
  height: 100vh;
  position: absolute;
  bottom: 0px;
  right: 0px;
  max-width: 416px;
  max-height: 780px;
  display: none;
  background-color: var(--lightGrey);
  border-radius: 13px;
  box-shadow: 0px 0px 10px #0001;
  margin: 10px;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
}
#chat-widget .chat-iframe__footer {
  height: 80px;
  position: relative;
}
#chat-widget .chat-iframe__close {
  height: 100%;
  width: 100%;
  background-image: url('/assets/icons/cross.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  cursor: pointer;
}
#chat-widget .chat-iframe__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#chat-widget .chat-iframe iframe {
  height: 100%;
  margin: -2px;
}
#chat-widget.open .chat-iframe {
  display: flex;
}
#chat-widget.chat-style-hidden .chat-btn {
  display: none;
}
.hs-chat-btn {
  position: absolute;
  right: 15px;
  bottom: 10px;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light);
  box-shadow: 0px 0px 10px #0002;
  border-radius: 50px;
  cursor: pointer;
}
.hs-chat-btn__counter {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: var(--warning);
  padding: 5px;
  border-radius: 30px;
  color: var(--light);
  height: 10px;
  font-size: 12px;
  min-width: 10px;
  text-align: center;
  font-weight: bold;
  line-height: 10px;
}
.hs-chat-btn__counter.hidden {
  display: none;
}
@media (max-width: 436px) {
  #chat-widget .chat-iframe {
    margin: 0px;
  }
}
@media (max-width: 650px) {
  .hs-chat-btn {
    bottom: -10px;
    left: 50%;
    margin-left: -35px;
    right: auto;
  }
}

/** @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 */
/* 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;
}

/* 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);
}
/** @format */
/**
 * /* http://meyerweb.com/eric/tools/css/reset/ 
 *    v2.0 | 20110126
 *    License: none (public domain)
 *
 * @format
 */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/**
 * /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 *
 * @format
 */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/* Sections
     ========================================================================== */
/**
   * Remove the margin in all browsers.
   */
body {
  margin: 0;
}
/**
   * Render the `main` element consistently in IE.
   */
main {
  display: block;
}
/**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
     ========================================================================== */
/**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/* Text-level semantics
     ========================================================================== */
/**
   * Remove the gray background on active links in IE 10.
   */
a {
  background-color: transparent;
}
/**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}
/**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */
b,
strong {
  font-weight: bolder;
}
/**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
   * Add the correct font size in all browsers.
   */
small {
  font-size: 80%;
}
/**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
     ========================================================================== */
/**
   * Remove the border on images inside links in IE 10.
   */
img {
  border-style: none;
}
/* Forms
     ========================================================================== */
/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
   * Remove the inheritance of text transform in Edge, Firefox, and IE.
   * 1. Remove the inheritance of text transform in Firefox.
   */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
   * Correct the inability to style clickable types in iOS and Safari.
   */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
/**
   * Remove the inner border and padding in Firefox.
   */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
   * Restore the focus styles unset by the previous rule.
   */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
   * Correct the padding in Firefox.
   */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
   * 1. Correct the text wrapping in Edge and IE.
   * 2. Correct the color inheritance from `fieldset` elements in IE.
   * 3. Remove the padding so developers are not caught out when they zero out
   *    `fieldset` elements in all browsers.
   */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */
progress {
  vertical-align: baseline;
}
/**
   * Remove the default vertical scrollbar in IE 10+.
   */
textarea {
  overflow: auto;
}
/**
   * 1. Add the correct box sizing in IE 10.
   * 2. Remove the padding in IE 10.
   */
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
   * Remove the inner padding in Chrome and Safari on macOS.
   */
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/* Interactive
     ========================================================================== */
/*
   * Add the correct display in Edge, IE 10+, and Firefox.
   */
details {
  display: block;
}
/*
   * Add the correct display in all browsers.
   */
summary {
  display: list-item;
}
/* Misc
     ========================================================================== */
/**
   * Add the correct display in IE 10+.
   */
template {
  display: none;
}
/**
   * Add the correct display in IE 10.
   */
[hidden] {
  display: none;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/raleway-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/** @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 */
html {
  -webkit-font-smoothing: antialiased;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 100%;
  font-family: 'Raleway', sans-serif;
  font-weight: 500;
  background-color: white;
  overflow: hidden;
}
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
#main {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;
  position: relative;
}
#main.home {
  flex-direction: row;
}
#main.home #content {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
}
#body {
  height: 100%;
  overflow: hidden;
}
button {
  border: none;
  border-radius: 4px;
  padding: 0.4em;
  cursor: pointer;
}
#Smallchat iframe {
  bottom: 50px !important;
  right: 20px !important;
}
@media (max-width: 650px) {
  #Smallchat {
    display: none;
  }
}
input {
  outline: 0;
  filter: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: inherit;
  transition: none;
  box-shadow: 0 0 0 1000px white inset !important;
}
.error-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.error-page__content {
  flex-grow: 1;
}
.progress-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 3px;
  z-index: 2000;
}
.progress-bar__progress {
  height: 100%;
  width: 0%;
  background-color: var(--primary);
  transition: width 100ms linear;
}
.show-on-mobile {
  display: none;
}
@media (max-width: 650px) {
  .hide-on-mobile {
    display: none;
  }
  .show-on-mobile {
    display: inherit;
  }
}
@media (max-width: 650px) {
  #body {
    view-transition-name: body;
  }
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes move-out {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-30%);
    }
  }
  @keyframes move-in {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0%);
    }
  }
  @keyframes move-out-reverse {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(100%);
    }
  }
  @keyframes move-in-reverse {
    from {
      transform: translateX(-30%);
    }
    to {
      transform: translateX(0%);
    }
  }
  ::view-transition-old(body) {
    z-index: 1;
    animation: 0.4s ease-out both move-out;
  }
  ::view-transition-new(body) {
    z-index: 2;
    animation: 0.4s ease-out both move-in;
  }
  :root[data-transition="backward"]::view-transition-old(body) {
    z-index: 2;
    animation: 0.4s ease-out both move-out-reverse;
  }
  :root[data-transition="backward"]::view-transition-new(body) {
    z-index: 1;
    animation: 0.4s ease-out both move-in-reverse;
  }
  :root[data-transition="fade-in"]::view-transition-old(body) {
    z-index: 1;
  }
  :root[data-transition="fade-in"]::view-transition-new(body) {
    z-index: 2;
    animation: 5s ease-in-out fade-in;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}
:root {
  --light: #ffffff;
  --darkerLight: #f5f5f9;
  --dark: #1C283F;
  --grey: #8c909a;
  --lightGrey: #e8ecee;
  --darkGrey: #2d3446;
  --primary: #0076ef;
  --lightPrimary: #377ded;
  --secondary: #ed6237;
  --lightSecondary: #f58d70;
  --boxShadow: #dbdbdd;
  --success: #00c882;
  --warning: #cf415e;
  --svg: #0a2e67;
  --svgHover: #1258c5;
  --price: #6E50FF;
  font-family: 'Raleway';
}
/** @format */
.login,
.set-password,
.welcome,
.forgotPassword {
  display: flex;
  width: 100%;
  height: 100%;
}
.login .social-login,
.set-password .social-login,
.welcome .social-login,
.forgotPassword .social-login {
  position: relative;
  width: 420px;
  max-width: 80%;
}
.login .social-login button,
.set-password .social-login button,
.welcome .social-login button,
.forgotPassword .social-login button {
  margin-bottom: 10px;
  margin-top: 5px;
  width: 418px;
  height: 45px;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light);
  max-width: 100%;
  border: 1px solid var(--dark);
}
.login .social-login button:before,
.set-password .social-login button:before,
.welcome .social-login button:before,
.forgotPassword .social-login button:before {
  content: '';
  background-repeat: no-repeat;
  background-position: center;
}
.login .social-login button.apple:before,
.set-password .social-login button.apple:before,
.welcome .social-login button.apple:before,
.forgotPassword .social-login button.apple:before {
  width: 25px;
  height: 25px;
  background-image: url('/assets/icons/apple.svg');
  margin-right: 6px;
}
.login .social-login button.google:before,
.set-password .social-login button.google:before,
.welcome .social-login button.google:before,
.forgotPassword .social-login button.google:before {
  width: 22px;
  height: 22px;
  background-image: url('/assets/icons/google.svg');
  margin-right: 7px;
}
.login .social-login button.microsoft:before,
.set-password .social-login button.microsoft:before,
.welcome .social-login button.microsoft:before,
.forgotPassword .social-login button.microsoft:before {
  width: 18px;
  height: 18px;
  background-image: url('/assets/icons/microsoft.svg');
  margin-right: 7px;
}
.login .social-login:after,
.set-password .social-login:after,
.welcome .social-login:after,
.forgotPassword .social-login:after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: 35px;
  background-color: var(--grey);
  height: 1px;
  width: 100%;
}
.login .social-login .separator,
.set-password .social-login .separator,
.welcome .social-login .separator,
.forgotPassword .social-login .separator {
  display: block;
  text-align: center;
  margin: 30px auto;
  z-index: 100;
  background-color: var(--light);
  padding: 0px 10px;
  position: relative;
  width: 30px;
  font-weight: 300;
  font-size: 12px;
}
.login__colored,
.set-password__colored,
.welcome__colored,
.forgotPassword__colored {
  background-color: var(--darkGrey);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 33%;
  min-width: 460px;
  height: 100%;
  padding-left: 80px;
  padding-right: 50px;
  padding-top: 160px;
  box-sizing: border-box;
}
.login__colored h1,
.set-password__colored h1,
.welcome__colored h1,
.forgotPassword__colored h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--light);
  line-height: 33px;
}
.login__colored h2,
.set-password__colored h2,
.welcome__colored h2,
.forgotPassword__colored h2 {
  font-size: 18px;
  line-height: 21px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.login__colored__logo,
.set-password__colored__logo,
.welcome__colored__logo,
.forgotPassword__colored__logo {
  display: none;
  position: absolute;
  left: 127px;
  top: 40px;
  width: 177px;
  height: 52px;
}
.login__colored__logo:before,
.set-password__colored__logo:before,
.welcome__colored__logo:before,
.forgotPassword__colored__logo:before {
  content: '';
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url('/assets/img/logo.png');
  width: 30%;
  height: 100%;
  background-size: 177px 52px;
  background-repeat: no-repeat;
  background-position: left center;
}
.login__colored__logo:after,
.set-password__colored__logo:after,
.welcome__colored__logo:after,
.forgotPassword__colored__logo:after {
  content: '';
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  background-image: url('/assets/icons/viewer/logo-white.svg');
  width: 70%;
  height: 100%;
  background-size: 177px 52px;
  background-repeat: no-repeat;
  background-position: right center;
  opacity: 0.8;
}
.login__form,
.set-password__form,
.welcome__form,
.forgotPassword__form {
  width: 67%;
  background-color: var(--light);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 100px;
  position: relative;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 20px;
}
.login__form .back,
.set-password__form .back,
.welcome__form .back,
.forgotPassword__form .back {
  position: absolute;
  top: 20px;
  left: 20px;
  cursor: pointer;
}
.login__form__logo,
.set-password__form__logo,
.welcome__form__logo,
.forgotPassword__form__logo {
  height: 60px;
  width: auto;
  margin-bottom: 70px;
}
.login__form__logo img,
.set-password__form__logo img,
.welcome__form__logo img,
.forgotPassword__form__logo img {
  height: 100%;
}
.login__form form,
.set-password__form form,
.welcome__form form,
.forgotPassword__form form {
  max-width: 80%;
}
.login__form h3,
.set-password__form h3,
.welcome__form h3,
.forgotPassword__form h3 {
  margin-top: 45px;
  font-weight: 200;
  font-size: 22px;
  color: var(--darkGrey);
  margin-bottom: 47px;
}
.login__form .input + .input,
.set-password__form .input + .input,
.welcome__form .input + .input,
.forgotPassword__form .input + .input {
  margin-top: 17px;
}
.login__form .input > div,
.set-password__form .input > div,
.welcome__form .input > div,
.forgotPassword__form .input > div {
  width: 100%;
}
.login__form .input > div input,
.set-password__form .input > div input,
.welcome__form .input > div input,
.forgotPassword__form .input > div input {
  background-color: transparent;
}
.login__form .input > div .svg,
.set-password__form .input > div .svg,
.welcome__form .input > div .svg,
.forgotPassword__form .input > div .svg {
  flex: 0 0 auto;
}
.login__form .input > div .svg svg,
.set-password__form .input > div .svg svg,
.welcome__form .input > div .svg svg,
.forgotPassword__form .input > div .svg svg {
  width: 100%;
  height: 100%;
}
.login__form__forgot,
.set-password__form__forgot,
.welcome__form__forgot,
.forgotPassword__form__forgot {
  text-align: right;
  color: var(--lightPrimary);
  font-size: 10px;
  cursor: pointer;
  margin-top: 5px;
}
.login__form form label,
.set-password__form form label,
.welcome__form form label,
.forgotPassword__form form label {
  margin-bottom: 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}
.login__form .enter,
.set-password__form .enter,
.welcome__form .enter,
.forgotPassword__form .enter,
.login__form .btn,
.set-password__form .btn,
.welcome__form .btn,
.forgotPassword__form .btn {
  margin-bottom: 40px;
  margin-top: 5px;
  width: 418px;
  height: 45px;
  font-size: 14px;
  font-weight: 600;
  color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--lightPrimary);
  max-width: 100%;
}
.login__form .enter[disabled],
.set-password__form .enter[disabled],
.welcome__form .enter[disabled],
.forgotPassword__form .enter[disabled],
.login__form .btn[disabled],
.set-password__form .btn[disabled],
.welcome__form .btn[disabled],
.forgotPassword__form .btn[disabled] {
  opacity: 0.7;
  cursor: default;
}
.login__form__cgu,
.set-password__form__cgu,
.welcome__form__cgu,
.forgotPassword__form__cgu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 18px;
  width: 418px;
  max-width: 100%;
}
.login__form__cgu input,
.set-password__form__cgu input,
.welcome__form__cgu input,
.forgotPassword__form__cgu input {
  margin-left: 15px;
}
.login__form__cgu p,
.set-password__form__cgu p,
.welcome__form__cgu p,
.forgotPassword__form__cgu p {
  margin-left: 13px;
  font-size: 12px;
  font-weight: 500;
  color: #8c909a;
}
.login__form__cgu p span,
.set-password__form__cgu p span,
.welcome__form__cgu p span,
.forgotPassword__form__cgu p span {
  color: var(--lightPrimary);
  cursor: pointer;
}
.login__questions,
.set-password__questions,
.welcome__questions,
.forgotPassword__questions {
  flex-shrink: 0;
}
.login__questions iframe,
.set-password__questions iframe,
.welcome__questions iframe,
.forgotPassword__questions iframe {
  width: 450px;
  max-width: 100%;
  min-height: 500px;
}
.login__questions-skip,
.set-password__questions-skip,
.welcome__questions-skip,
.forgotPassword__questions-skip {
  margin: 20px;
  color: var(--grey);
  font-size: 12px;
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}
.login .validation,
.set-password .validation,
.welcome .validation,
.forgotPassword .validation {
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
}
.login .validation__text,
.set-password .validation__text,
.welcome .validation__text,
.forgotPassword .validation__text {
  font-size: 12px;
  height: 14.5px;
}
.login .validation__text.green,
.set-password .validation__text.green,
.welcome .validation__text.green,
.forgotPassword .validation__text.green {
  color: #00aa00;
}
.login .validation__text.red,
.set-password .validation__text.red,
.welcome .validation__text.red,
.forgotPassword .validation__text.red {
  color: #ff0000;
}
.login .login-error,
.set-password .login-error,
.welcome .login-error,
.forgotPassword .login-error,
.login .signup-error,
.set-password .signup-error,
.welcome .signup-error,
.forgotPassword .signup-error,
.login .forgotPassword-error,
.set-password .forgotPassword-error,
.welcome .forgotPassword-error,
.forgotPassword .forgotPassword-error,
.login .set-password-error,
.set-password .set-password-error,
.welcome .set-password-error,
.forgotPassword .set-password-error {
  text-align: center;
  font-size: 13px;
  color: var(--warning);
  padding-top: 10px;
  height: 13px;
}
.login__signup-link,
.set-password__signup-link,
.welcome__signup-link,
.forgotPassword__signup-link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  width: 420px;
  max-width: 80%;
}
.login__signup-link:before,
.set-password__signup-link:before,
.welcome__signup-link:before,
.forgotPassword__signup-link:before {
  content: '';
  position: absolute;
  left: 0px;
  top: 5px;
  background-color: var(--grey);
  height: 1px;
  width: 100%;
}
.login__signup-link span,
.set-password__signup-link span,
.welcome__signup-link span,
.forgotPassword__signup-link span {
  display: block;
  text-align: center;
  margin: 0px 0px 35px 0px;
  z-index: 100;
  background-color: var(--light);
  padding: 0px 20px;
}
.login__signup-link a,
.set-password__signup-link a,
.welcome__signup-link a,
.forgotPassword__signup-link a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 15px 0px;
  cursor: pointer;
  border: 1px solid var(--darkGrey);
  border-radius: 3px;
  color: var(--dark);
  text-decoration: none;
}
.login .required,
.set-password .required,
.welcome .required,
.forgotPassword .required {
  font-size: 20px;
  position: absolute;
}
.login .signup .enter,
.set-password .signup .enter,
.welcome .signup .enter,
.forgotPassword .signup .enter {
  width: 100%;
}
.login .signup__title,
.set-password .signup__title,
.welcome .signup__title,
.forgotPassword .signup__title {
  text-align: center;
  margin-bottom: 0;
}
.login .signup__subtitle,
.set-password .signup__subtitle,
.welcome .signup__subtitle,
.forgotPassword .signup__subtitle {
  color: var(--grey);
  max-width: 400px;
  font-size: 14px;
  margin: 15px 0;
  margin-bottom: 30px;
}
.login .signup__name,
.set-password .signup__name,
.welcome .signup__name,
.forgotPassword .signup__name {
  display: flex;
  margin: 17px 0px;
  gap: 20px;
  max-width: 420px;
}
.login .signup__name .input,
.set-password .signup__name .input,
.welcome .signup__name .input,
.forgotPassword .signup__name .input {
  width: 50%;
  margin-top: 0px;
}
.login .signup__phone,
.set-password .signup__phone,
.welcome .signup__phone,
.forgotPassword .signup__phone {
  display: flex;
  flex-direction: column;
}
.login .signup__phone .PhoneInput,
.set-password .signup__phone .PhoneInput,
.welcome .signup__phone .PhoneInput,
.forgotPassword .signup__phone .PhoneInput {
  width: 100%;
  border-width: 1px;
  box-sizing: border-box;
  border-color: var(--lightGrey);
}
.login .signup__phone .PhoneInput.error,
.set-password .signup__phone .PhoneInput.error,
.welcome .signup__phone .PhoneInput.error,
.forgotPassword .signup__phone .PhoneInput.error {
  border-color: var(--warning);
}
.login .signup__phone .PhoneInputCountry,
.set-password .signup__phone .PhoneInputCountry,
.welcome .signup__phone .PhoneInputCountry,
.forgotPassword .signup__phone .PhoneInputCountry {
  width: unset;
  margin-left: 18px;
}
.login .signup__phone .PhoneInputInput,
.set-password .signup__phone .PhoneInputInput,
.welcome .signup__phone .PhoneInputInput,
.forgotPassword .signup__phone .PhoneInputInput {
  border: none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  color: var(--dark);
  padding-left: 16px;
  padding-right: 16px;
  /* outline: none; */
  min-height: 43px;
  border-radius: 4px;
}
.login .signup__profession,
.set-password .signup__profession,
.welcome .signup__profession,
.forgotPassword .signup__profession {
  display: flex;
  flex-direction: column;
  margin-bottom: 17px;
}
.login .signup__profession label,
.set-password .signup__profession label,
.welcome .signup__profession label,
.forgotPassword .signup__profession label {
  margin-bottom: 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}
.login .signup__profession p,
.set-password .signup__profession p,
.welcome .signup__profession p,
.forgotPassword .signup__profession p {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}
.login .signup__profession__choices,
.set-password .signup__profession__choices,
.welcome .signup__profession__choices,
.forgotPassword .signup__profession__choices {
  display: flex;
  justify-content: space-evenly;
}
.login .signup__profession__choices__type,
.set-password .signup__profession__choices__type,
.welcome .signup__profession__choices__type,
.forgotPassword .signup__profession__choices__type {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.login .signup__profession__choices__type label,
.set-password .signup__profession__choices__type label,
.welcome .signup__profession__choices__type label,
.forgotPassword .signup__profession__choices__type label {
  margin: 0;
  cursor: pointer;
  padding: 10px;
}
.login .signup__profession__choices__type input,
.set-password .signup__profession__choices__type input,
.welcome .signup__profession__choices__type input,
.forgotPassword .signup__profession__choices__type input {
  cursor: pointer;
  margin-top: -2px;
}
.login .signup__profession__select,
.set-password .signup__profession__select,
.welcome .signup__profession__select,
.forgotPassword .signup__profession__select {
  margin-top: 17px;
  -webkit-box-align: start;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  font-weight: 700;
  font-size: 15px;
  color: var(--lightPrimary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.login .signup__profession__select label,
.set-password .signup__profession__select label,
.welcome .signup__profession__select label,
.forgotPassword .signup__profession__select label {
  margin-bottom: 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}
.login .signup__profession__select select,
.set-password .signup__profession__select select,
.welcome .signup__profession__select select,
.forgotPassword .signup__profession__select select {
  width: 100%;
  -webkit-box-align: center;
  transition: 0.7s;
  position: relative;
  min-height: 45px;
  background-color: var(--light);
  border-color: var(--lightGrey);
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 1px;
  font-size: 14px;
}
.login .signup__questions,
.set-password .signup__questions,
.welcome .signup__questions,
.forgotPassword .signup__questions {
  flex-shrink: 0;
}
.login .signup__questions iframe,
.set-password .signup__questions iframe,
.welcome .signup__questions iframe,
.forgotPassword .signup__questions iframe {
  width: 450px;
  max-width: 100%;
  min-height: 500px;
}
.login .signup__questions-skip,
.set-password .signup__questions-skip,
.welcome .signup__questions-skip,
.forgotPassword .signup__questions-skip {
  margin: 20px;
  color: var(--grey);
  font-size: 12px;
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}
.welcome__colored {
  padding-top: 100px;
}
.welcome__form__logo {
  margin-bottom: 40px;
}
.welcome__form-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.welcome__form-content video {
  max-width: min(400px, 100%);
}
.welcome h3 {
  max-width: 400px;
  text-align: center;
  margin: 0px 20px 45px 20px;
}
.welcome .slider {
  width: 320px;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin-bottom: 50px;
}
.welcome .slider__container {
  width: 320px;
  height: 100%;
  white-space: nowrap;
  transition: transform 300ms ease-in-out;
}
.welcome .slider__slide {
  width: 320px;
  height: 100%;
  display: inline-block;
  white-space: normal;
  text-align: center;
  box-sizing: border-box;
  padding: 10px;
}
.welcome .slider__slide-image {
  margin: 20px 0px;
}
.welcome .slider__slide-text {
  font-size: 14px;
}
.welcome .slider__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 100px;
  margin-left: -50px;
  height: 7px;
}
.welcome .slider__dot {
  width: 7px;
  height: 7px;
  border-radius: 10px;
  background-color: #eaeaea;
  cursor: pointer;
  display: inline-block;
  margin: 5px;
}
.welcome .slider__dot.current {
  background-color: #2d3446;
}
.welcome .guide-link {
  color: #8c909a;
  font-size: 13px;
  margin: 0px 20px 20px;
  text-align: center;
}
.welcome form {
  max-width: 100%;
  padding: 0px 20px;
  box-sizing: border-box;
}
.account-linking-popup .popup-component__content {
  display: flex;
  direction: column;
  width: 450px;
  max-width: 90%;
  height: auto;
  max-height: 90%;
}
.account-linking-popup form {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.account-linking-popup__header {
  padding: 40px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
}
.account-linking-popup__header h1 {
  font-size: 22px;
  margin: 0px 0px 20px 0px;
}
.account-linking-popup__body {
  padding: 0px 20px 50px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.account-linking-popup__footer {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 50px;
}
.account-linking-popup__footer button {
  flex: 1;
  border-radius: 0px;
  font-size: 14px;
}
.account-linking-popup__footer button[type=submit] {
  background-color: var(--primary);
  color: var(--light);
  font-weight: 500;
}
@media (max-width: 62em) {
  .login__colored,
  .set-password__colored,
  .welcome__colored,
  .forgotPassword__colored {
    display: none;
  }
  .login__form,
  .set-password__form,
  .welcome__form,
  .forgotPassword__form {
    width: 100%;
    padding-top: 40px;
  }
}

.notifications {
  position: absolute;
  top: 75px;
  right: 90px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}
.notifications__notif {
  position: relative;
  width: 420px;
  max-width: 90vw;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--lightGrey);
  background-color: aliceblue;
  overflow: hidden;
}
.notifications__notif.error {
  background-color: lightcoral;
}
.notifications__notif-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.notifications__notif-close:after {
  content: '\2715';
}
.notifications__notif-progress {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
}
@keyframes notif-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}
.notifications__notif-progress span {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: var(--primary);
  animation-name: notif-progress;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
.notifications__notif-content {
  padding: 20px 30px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.notifications__notif-icon {
  width: 50px;
}
.notifications__notif-text {
  flex-grow: 1;
  font-size: 14px;
  white-space: pre-wrap;
}
.notifications__notif-button {
  border: 1px solid var(--lightGrey);
  background: var(--light);
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
}
@media (max-width: 650px) {
  .notifications {
    right: 10px;
    left: 10px;
    width: auto;
  }
  .notifications__notif {
    width: 100%;
    max-width: 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;
}
.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 */
/** @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 */
.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 */
#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 */
.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);
}

/** @format */
.elevation {
  position: relative;
}
.elevation__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
@media (max-width: 650px) {
  .elevation__content {
    flex: 1;
    min-height: 0;
  }
}
.elevation__content-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-top: 1px solid var(--lightGrey);
  background-color: white;
}
.elevation__create-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;
}
.elevation__assets {
  position: relative;
  overflow: auto;
  flex-grow: 1;
}
.elevation__tip {
  background-image: url('/assets/img/subscribe_elevations.png');
  background-size: auto 240px;
  background-repeat: no-repeat;
  background-color: transparent;
  height: auto;
  margin: 30px auto;
  background-position: top center;
  padding: 280px 30px 0px 30px;
  line-height: 15px;
}
.elevation__tip p {
  font-size: 15px;
  padding: 0px 40px;
  line-height: 17px;
  color: #999;
  text-align: center;
}
.elevation__save-btn {
  width: 100%;
}

/** @format */
.subscribe-page .subscribe {
  margin-top: 100px;
}
.subscribe {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow: auto;
  padding: 40px 10px;
}
.subscribe.small .subscribe__image {
  background-image: url('/assets/img/subscribe-small.png');
  width: 175px;
  max-width: 100%;
  margin-top: 10px;
  height: 132px;
}
.subscribe.small .subscribe__text {
  padding: 10px;
  width: 100%;
}
.subscribe.small .subscribe__text span {
  font-size: 15px;
  color: var(--success);
}
.subscribe.small .subscribe__text p {
  margin-top: 5px;
}
.subscribe.small .subscribe__text .text {
  font-size: 15px;
}
.subscribe.small .subscribe__text .price {
  font-size: 9px;
  margin-top: 5px;
}
.subscribe.small .subscribe__text .price span {
  font-size: 12px;
}
.subscribe.small .subscribe__discount {
  padding: 10px;
  margin: 10px;
  margin-top: 0px;
}
.subscribe.small .subscribe__discount span {
  font-size: 12px;
}
.subscribe.small .subscribe__discount .text {
  font-size: 10px;
  margin-top: 0px;
}
.subscribe.small .subscribe__discount .code {
  font-size: 20px;
}
.subscribe.small .subscribe__discount .price {
  font-size: 10px;
}
.subscribe.small button {
  padding: 12px 50px;
  font-size: 16px;
  margin-bottom: 10px;
  border-radius: 5px;
}
.subscribe.simple .subscribe__image {
  display: none;
}
.subscribe.gold .subscribe__image {
  background-image: url('/assets/img/subscribe-gold.png');
  width: 240px;
  height: 170px;
}
.subscribe__image {
  width: 800px;
  max-width: 80%;
  background-image: url('/assets/img/subscribe.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 80px;
}
.subscribe__image:after {
  content: '';
  display: block;
  margin-top: 33%;
}
.subscribe__text {
  text-align: center;
  padding: 50px;
  box-sizing: border-box;
}
.subscribe__text span {
  font-size: 36px;
  color: var(--success);
}
.subscribe__text p {
  margin-top: 5px;
}
.subscribe__text .text {
  font-size: 36px;
}
.subscribe__text .price {
  position: relative;
  font-size: 22px;
  display: inline-block;
}
.subscribe__discount {
  text-align: center;
  border-radius: 5px;
  box-shadow: inset 0px 0px 10px #0001;
  background-color: #f3f3f3;
  padding: 20px 40px;
  margin: 50px;
  margin-top: 0px;
}
.subscribe__discount span {
  font-size: 30px;
  color: var(--success);
}
.subscribe__discount p {
  margin-top: 5px;
}
.subscribe__discount .text {
  font-size: 22px;
}
.subscribe__discount .code {
  font-weight: 400;
  font-size: 40px;
  margin: 10px 0px;
}
.subscribe__discount .price {
  font-size: 22px;
}
.subscribe button {
  background-color: var(--success);
  color: var(--light);
  padding: 15px 40px;
  font-weight: 500;
  font-size: 25px;
  border-radius: 8px;
  white-space: nowrap;
  margin-bottom: 40px;
  margin-top: 10px;
}
.subscribe__plans {
  display: flex;
  flex-direction: row;
  max-width: 400px;
  margin: 0px auto;
  gap: 10px;
}
.subscribe__plan {
  min-height: 100px;
  flex-grow: 1;
  border-radius: 5px;
  background-color: var(--lightGrey);
}
.subscribe-placeholder {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
}
.subscribe-placeholder__image {
  width: 100%;
  height: 339px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 20px;
}
.subscribe-placeholder__title {
  font-size: 18px;
  font-weight: 600;
  padding: 20px;
}
.subscribe-placeholder__description {
  font-size: 14px;
  max-width: 270px;
  padding: 20px;
  line-height: 18px;
}
.subscribe-placeholder__list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px;
}
.subscribe-placeholder__list-item {
  display: flex;
  font-size: 14px;
  gap: 10px;
}
.subscribe-placeholder__list-item .svg svg {
  width: 15px;
  height: 15px;
}
.subscribe-placeholder__list-item .svg svg path {
  fill: var(--success);
}
.subscribe-placeholder .view-pricing {
  margin: 20px 0px;
  padding: 15px 20px;
  width: 300px;
  background-color: var(--dark);
  color: var(--light);
  font-weight: 600;
  border-radius: 8px;
}
.pricing {
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}
.pricing__error {
  text-align: center;
  padding: 20px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: var(--warning);
}
.pricing__toggles {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px 0px 20px;
  gap: 10px;
}
.pricing__toggle {
  display: flex;
  border-radius: 7px;
  border: 1px solid #E8E8E8;
  position: relative;
}
.pricing__toggle-option {
  padding: 8px 20px;
  font-size: 12px;
  cursor: pointer;
  flex: 50%;
  box-sizing: border-box;
  width: 50%;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
}
.pricing__toggle-option:first-child {
  border-radius: 7px 0 0 7px;
}
.pricing__toggle-option:last-child {
  border-radius: 0 7px 7px 0;
}
.pricing__toggle-option.selected {
  background-color: var(--dark);
  color: var(--light);
}
.pricing__toggle-savings {
  position: absolute;
  top: -5px;
  right: -15px;
  border-radius: 7px;
  background-color: #F45637;
  color: white;
  padding: 3px 5px 2px 5px;
  font-size: x-small;
  font-weight: bold;
}
.pricing__plans {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.pricing__plan {
  box-sizing: border-box;
  width: 350px;
  border: 1px solid #CDCDCD;
  border-radius: 10px;
  max-width: 90%;
  position: relative;
  overflow: hidden;
}
.pricing__plan.highlight {
  box-shadow: 0px 0px 10px #6fbfe554;
}
.pricing__plan .subscribe__button {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.pricing__plan button {
  background-color: var(--success);
  color: var(--light);
  padding: 12px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 8px;
  white-space: nowrap;
  margin-bottom: 10px;
  max-width: 100%;
  box-sizing: border-box;
  width: 250px;
}
.pricing__plan-current {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
  font-size: 11px;
  background-color: var(--primary);
  color: var(--light);
  font-weight: 600;
  border-radius: 10px 10px 0px 0px;
}
.pricing__plan-action {
  display: flex;
  justify-content: center;
  padding: 20px;
  width: 100%;
}
.pricing__plan-summary {
  width: 100%;
  border-bottom: 1px solid #CDCDCD;
  padding: 20px 0;
  text-align: center;
  font-weight: bold;
}
.pricing__plan-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.pricing__plan-name {
  text-transform: uppercase;
  font-weight: 100;
  text-align: center;
  padding: 10px 0px;
  font-size: xx-large;
}
.pricing__plan-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 75px;
  text-align: center;
  gap: 3px;
}
.pricing__price-full {
  text-decoration: line-through;
  font-size: 12px;
}
.pricing__price-discounted {
  font-weight: 600;
  font-size: x-large;
}
.pricing__price-custom {
  font-weight: 600;
  font-size: x-large;
}
.pricing__plan-discount {
  position: absolute;
  top: 25px;
  left: -65px;
  background-color: var(--success);
  color: white;
  transform: rotate(-45deg);
  width: 200px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
}
.pricing__plan-discount span {
  color: red;
}
.pricing__plan-monthly-price {
  font-size: small;
  max-width: 240px;
  font-weight: bold;
}
.pricing__plan-features {
  padding: 10px;
}
.pricing__plan-feature {
  font-size: 13px;
  line-height: 15px;
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 7px;
}
.pricing__plan-feature .svg {
  align-self: start;
}
.pricing__plan-feature .svg svg path {
  fill: var(--success);
}
.pricing__plan-feature span {
  font-weight: 100;
}
.pricing__plan-feature__text {
  font-size: small;
}
.pricing__plan-feature__text p {
  font-size: small;
  color: var(--grey);
}
.pricing__plan-trial {
  font-size: x-small;
  border: 1px solid #0076EF;
  color: #0076EF;
  border-radius: 3px;
  padding: 0.5em 1em;
  align-self: flex-end;
  margin: -10px 0;
}
.pricing__help {
  padding: 100px 40px;
  text-align: center;
  color: #707070;
  font-size: 14px;
}
.pricing__demo-link {
  font-size: small;
  padding: 10px;
}
.subscribe-popup > div {
  width: fit-content;
  height: fit-content;
  padding: 0px;
}
.subscribe-message-popup {
  text-align: center;
}
.locked-subscribe-popup .locked-subscribe-popup__content_ {
  width: 240px;
  height: 330px;
  padding: 30px;
}
.locked-subscribe-popup .locked-subscribe-popup__cross_,
.locked-subscribe-popup .locked-subscribe-popup__title_ {
  display: none;
}
.subscribe-success {
  display: flex;
  height: 100%;
}
.subscribe-success__left {
  max-width: 50%;
  box-sizing: border-box;
  padding: 4%;
  background-color: var(--success);
  color: white;
  font-weight: 600;
  width: 600px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.subscribe-success__left .svg {
  margin-bottom: 30px;
}
.subscribe-success__left h1 {
  font-size: 30px;
  margin: 0px 0px 25px 0px;
  width: 90%;
}
.subscribe-success__left p {
  font-size: 17px;
  width: 500px;
  max-width: 90%;
}
.subscribe-success__left a {
  background-color: var(--light);
  color: var(--success);
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 5px;
  display: block;
  margin-top: 90px;
  margin-bottom: 10px;
  text-align: center;
}
.subscribe-success__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}
.subscribe-success__right h1 {
  text-align: center;
  font-size: 30px;
  margin: 0px 0px 25px 0px;
  width: 90%;
}
.subscribe-success__right p {
  font-size: 17px;
  max-width: 560px;
  text-align: center;
  margin-bottom: 20px;
  width: 90%;
}
.subscribe-success__right a {
  color: var(--primary);
  text-decoration: none;
}
@media (max-width: 900px) {
  .subscribe-success {
    flex-direction: column;
    width: 100%;
  }
  .subscribe-success__left {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }
  .subscribe-success__left h1 {
    text-align: center;
  }
  .subscribe-success__left p {
    text-align: center;
  }
  .subscribe-success__left a {
    margin-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.builder {
  font-family: 'Raleway', sans-serif;
}
#main.builder .header .steps__tab__title {
  font-weight: 600;
}
#main.builder #body {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
  position: relative;
  background-color: var(--light);
}
#main.builder .copy-banner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  box-sizing: border-box;
  background-color: #c1d9ff;
  font-size: 14px;
  gap: 20px;
}
#main.builder .copy-banner__btn {
  padding: 7px 20px;
  background-color: var(--darkGrey);
  color: var(--light);
  font-weight: 600;
}
#main.builder .copy-banner__btn.no-credits {
  background-color: var(--lightGrey);
  color: var(--grey);
}
#main.builder #viewer-2d > div {
  width: 100%;
  height: 100%;
}
#main.builder #viewer-2d > div svg {
  overflow: visible;
}
#main.builder #viewer-2d > div .svg svg {
  overflow: hidden;
}
#main.builder .panellayout__panel-toggle {
  height: 60px;
}
#main.builder .builderpanel,
.tabpanellayout__mobile-panel .builderpanel {
  width: 700px;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--light);
  height: 100%;
}
#main.builder .builderpanel__toggle,
.tabpanellayout__mobile-panel .builderpanel__toggle {
  position: absolute;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 10px 10px 14px;
  background-color: var(--light);
  color: var(--grey);
  font-size: 14px;
  font-weight: 600;
  transition: 0.5s all;
  cursor: pointer;
  z-index: 10;
  flex-wrap: wrap;
}
#main.builder .builderpanel__toggle .svg,
.tabpanellayout__mobile-panel .builderpanel__toggle .svg {
  transform: rotate(180deg);
  transition: 0.5s transform;
  width: 24px;
  margin-right: 8px;
  position: relative;
  top: -2px;
}
#main.builder .builderpanel__toggle .svg svg path,
.tabpanellayout__mobile-panel .builderpanel__toggle .svg svg path {
  fill: var(--grey);
}
#main.builder .builderpanel__header,
.tabpanellayout__mobile-panel .builderpanel__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  top: 0;
  left: 0;
  background-color: var(--light);
  z-index: 1;
  padding: 29px 0px;
  gap: 10px;
}
#main.builder .builderpanel__header.fixed,
.tabpanellayout__mobile-panel .builderpanel__header.fixed {
  position: absolute;
  top: 0px;
  border-bottom: 1px solid #eee;
  padding: 20px 20px 20px 30px;
  width: 100%;
  box-sizing: border-box;
}
#main.builder .builderpanel__header h3,
.tabpanellayout__mobile-panel .builderpanel__header h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--darkGrey);
  margin-bottom: 11px;
}
#main.builder .builderpanel__header h4,
.tabpanellayout__mobile-panel .builderpanel__header h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--grey);
}
#main.builder .builderpanel__header__title,
.tabpanellayout__mobile-panel .builderpanel__header__title {
  flex-grow: 1;
}
#main.builder .builderpanel__header__button,
.tabpanellayout__mobile-panel .builderpanel__header__button {
  background-color: var(--primary);
  color: var(--light);
  padding: 12px 50px;
  font-size: 15px;
  font-weight: 600;
}
#main.builder .builderpanel__header__total,
.tabpanellayout__mobile-panel .builderpanel__header__total {
  width: 100px;
  text-align: center;
  white-space: nowrap;
}
#main.builder .builderpanel__header__total > div,
.tabpanellayout__mobile-panel .builderpanel__header__total > div {
  margin-top: 10px;
  color: var(--lightPrimary);
  font-size: 14px;
}
#main.builder .builderpanel__header__total__pending,
.tabpanellayout__mobile-panel .builderpanel__header__total__pending {
  font-size: 12px;
  margin-top: 4px;
}
#main.builder .builderpanel__content,
.tabpanellayout__mobile-panel .builderpanel__content {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#main.builder .builderpanel__content .input,
.tabpanellayout__mobile-panel .builderpanel__content .input {
  padding-left: 35px;
}
#main.builder .builderpanel__content hr,
.tabpanellayout__mobile-panel .builderpanel__content hr {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--lightGrey);
  margin-top: 22px;
  margin-bottom: 20px;
}
#main.builder .builderpanel__content .sectors-list,
.tabpanellayout__mobile-panel .builderpanel__content .sectors-list,
#main.builder .builderpanel__content .rooms-list,
.tabpanellayout__mobile-panel .builderpanel__content .rooms-list {
  overflow-y: auto;
  flex-grow: 1;
}
#main.builder .builderpanel__content .sectors-list,
.tabpanellayout__mobile-panel .builderpanel__content .sectors-list {
  padding-bottom: 20px;
}
#main.builder .builderpanel__content .sectors-list .subtitle,
.tabpanellayout__mobile-panel .builderpanel__content .sectors-list .subtitle {
  margin-top: 12px;
  margin-bottom: 12px;
}
#main.builder .builderpanel__content .sector + .sector,
.tabpanellayout__mobile-panel .builderpanel__content .sector + .sector,
#main.builder .builderpanel__content .room + .room,
.tabpanellayout__mobile-panel .builderpanel__content .room + .room {
  margin-top: 12px;
}
#main.builder .builderpanel__content .sector,
.tabpanellayout__mobile-panel .builderpanel__content .sector,
#main.builder .builderpanel__content .room,
.tabpanellayout__mobile-panel .builderpanel__content .room {
  padding-left: 35px;
  padding-right: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#main.builder .builderpanel__content .sector.active .icon.type .svg svg path,
.tabpanellayout__mobile-panel .builderpanel__content .sector.active .icon.type .svg svg path,
#main.builder .builderpanel__content .room.active .icon.type .svg svg path,
.tabpanellayout__mobile-panel .builderpanel__content .room.active .icon.type .svg svg path {
  fill: #1258c5;
}
#main.builder .builderpanel__content .sector.active .data p,
.tabpanellayout__mobile-panel .builderpanel__content .sector.active .data p,
#main.builder .builderpanel__content .room.active .data p,
.tabpanellayout__mobile-panel .builderpanel__content .room.active .data p {
  color: var(--dark);
}
#main.builder .builderpanel__content .sector .icon,
.tabpanellayout__mobile-panel .builderpanel__content .sector .icon,
#main.builder .builderpanel__content .room .icon,
.tabpanellayout__mobile-panel .builderpanel__content .room .icon {
  width: 75px;
  height: 35px;
}
#main.builder .builderpanel__content .sector .icon .svg,
.tabpanellayout__mobile-panel .builderpanel__content .sector .icon .svg,
#main.builder .builderpanel__content .room .icon .svg,
.tabpanellayout__mobile-panel .builderpanel__content .room .icon .svg {
  width: 100%;
  height: 100%;
}
#main.builder .builderpanel__content .sector .icon .svg svg,
.tabpanellayout__mobile-panel .builderpanel__content .sector .icon .svg svg,
#main.builder .builderpanel__content .room .icon .svg svg,
.tabpanellayout__mobile-panel .builderpanel__content .room .icon .svg svg {
  width: 100%;
  height: 100%;
}
#main.builder .builderpanel__content .sector .icon .svg svg path,
.tabpanellayout__mobile-panel .builderpanel__content .sector .icon .svg svg path,
#main.builder .builderpanel__content .room .icon .svg svg path,
.tabpanellayout__mobile-panel .builderpanel__content .room .icon .svg svg path {
  fill: #1C283F;
}
#main.builder .builderpanel__content .sector .data,
.tabpanellayout__mobile-panel .builderpanel__content .sector .data,
#main.builder .builderpanel__content .room .data,
.tabpanellayout__mobile-panel .builderpanel__content .room .data {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#main.builder .builderpanel__content .sector .data p,
.tabpanellayout__mobile-panel .builderpanel__content .sector .data p,
#main.builder .builderpanel__content .room .data p,
.tabpanellayout__mobile-panel .builderpanel__content .room .data p {
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
#main.builder .builderpanel__content .sector .data span,
.tabpanellayout__mobile-panel .builderpanel__content .sector .data span,
#main.builder .builderpanel__content .room .data span,
.tabpanellayout__mobile-panel .builderpanel__content .room .data span {
  color: var(--grey);
  font-size: 11px;
  line-height: 18px;
}
#main.builder .builderpanel__content .sector .pen,
.tabpanellayout__mobile-panel .builderpanel__content .sector .pen,
#main.builder .builderpanel__content .room .pen,
.tabpanellayout__mobile-panel .builderpanel__content .room .pen {
  width: 24px;
  height: 24px;
}
#main.builder .builderpanel__content .variants,
.tabpanellayout__mobile-panel .builderpanel__content .variants {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#main.builder .builderpanel__content .variants hr,
.tabpanellayout__mobile-panel .builderpanel__content .variants hr {
  border: none;
  border-bottom: 1px solid var(--lightGrey);
  width: 100%;
  margin-top: 22px;
  margin-bottom: 20px;
}
#main.builder .builderpanel__content .variants select,
.tabpanellayout__mobile-panel .builderpanel__content .variants select {
  max-width: 100px;
  text-overflow: ellipsis;
}
#main.builder .builderpanel__content .variants .row + .row,
.tabpanellayout__mobile-panel .builderpanel__content .variants .row + .row {
  margin-top: 15px;
}
#main.builder .builderpanel__content .variants .row,
.tabpanellayout__mobile-panel .builderpanel__content .variants .row {
  width: 100%;
  box-sizing: border-box;
  padding: 0px 35px;
}
#main.builder .builderpanel__content .variants .row span,
.tabpanellayout__mobile-panel .builderpanel__content .variants .row span {
  display: block;
  margin-bottom: 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}
#main.builder .builderpanel__content .variants .row select,
.tabpanellayout__mobile-panel .builderpanel__content .variants .row select {
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  background-color: transparent;
  height: 43px;
  padding-left: 15px;
  font-size: 11px;
  font-weight: 600;
  width: 222px;
  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;
}
#main.builder .builderpanel__content .variants__created,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created {
  width: 100%;
  padding: 0px 35px;
  box-sizing: border-box;
}
#main.builder .builderpanel__content .variants__created h3,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created h3 {
  padding-left: 0px;
}
#main.builder .builderpanel__content .variants__created .floorplans,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow-y: auto;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan {
  position: relative;
  justify-content: flex-start;
  box-sizing: border-box;
  margin-top: 5px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  flex-basis: 50%;
  transition: height 0.5s;
  padding: 10px 5px;
  padding-top: 25px;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .title,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .title {
  margin-top: 7px;
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .subtitle,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .subtitle {
  color: var(--grey);
  font-size: 11px;
  line-height: 18px;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .icon,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .icon {
  width: 100%;
  height: 100%;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .icon svg,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .icon svg {
  width: 100%;
  height: 100%;
  max-height: 42px;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .icon svg path,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .icon svg path {
  fill: #0a2e67;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .close-icon,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .close-icon {
  cursor: pointer;
  position: absolute;
  top: 4px;
  right: 0px;
  width: 22px;
  height: 22px;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .close-icon svg,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .close-icon svg {
  opacity: 0.5;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .close-icon svg:hover,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .close-icon svg:hover,
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .close-icon svg.hovered,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .close-icon svg.hovered {
  opacity: 1;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .error-icon,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .error-icon {
  position: absolute;
  top: 4px;
  left: 0px;
  width: 22px;
  height: 22px;
  color: red;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .error-icon svg,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .error-icon svg {
  opacity: 0.5;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .error-icon svg:hover,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .error-icon svg:hover,
#main.builder .builderpanel__content .variants__created .floorplans .floorplan .error-icon svg.hovered,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan .error-icon svg.hovered {
  opacity: 1;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan:hover .icon svg path,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan:hover .icon svg path,
#main.builder .builderpanel__content .variants__created .floorplans .floorplan.hovered .icon svg path,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan.hovered .icon svg path {
  fill: #1258c5;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan:hover .title,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan:hover .title,
#main.builder .builderpanel__content .variants__created .floorplans .floorplan.hovered .title,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan.hovered .title {
  color: #1258c5;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan:hover .price,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan:hover .price,
#main.builder .builderpanel__content .variants__created .floorplans .floorplan.hovered .price,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan.hovered .price {
  color: #1258c5;
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan.selected,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan.selected {
  border-radius: 6px;
  background-color: var(--lightPrimary);
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan.selected .icon .svg svg path,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan.selected .icon .svg svg path {
  fill: var(--light);
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan.selected .title,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan.selected .title {
  color: var(--light);
}
#main.builder .builderpanel__content .variants__created .floorplans .floorplan.selected .price,
.tabpanellayout__mobile-panel .builderpanel__content .variants__created .floorplans .floorplan.selected .price {
  color: var(--light);
}
#main.builder .builderpanel__content .contact-me,
.tabpanellayout__mobile-panel .builderpanel__content .contact-me {
  padding: 25px;
  font-size: 16px;
  margin-top: 40px;
  background-color: #00c882;
  color: white;
  font-weight: 600;
}
#main.builder .builderpanel__footer,
.tabpanellayout__mobile-panel .builderpanel__footer {
  width: 100%;
  height: 40px;
  min-height: 40px;
  background-color: var(--primary);
  cursor: pointer;
  color: var(--light);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}
#main.builder .builderpanel__footer__cancel,
.tabpanellayout__mobile-panel .builderpanel__footer__cancel {
  margin-top: 0px;
  background-color: var(--secondary);
}
#main.builder .builderpanel .download-quote-xlsx,
.tabpanellayout__mobile-panel .builderpanel .download-quote-xlsx {
  color: var(--light);
  text-decoration: none;
  font-size: 14px;
  display: block;
  background-color: var(--darkGrey);
  padding: 10px 20px;
  border-radius: 5px;
  align-self: start;
  margin: -55px 0px 30px 0px;
}
#main.visuaryapp .create-plan {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding-top: 50px;
  gap: 30px;
  width: 100%;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
}
#main.visuaryapp .create-plan__draw-plan,
#main.visuaryapp .create-plan__capture-plan,
#main.visuaryapp .create-plan__send-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  box-sizing: border-box;
  width: 550px;
  height: 400px;
  padding: 64px 56px;
  border-radius: 24px;
  text-decoration: none;
  cursor: pointer;
  background-color: #f7f4f1;
  color: #303031;
  max-width: 90%;
}
#main.visuaryapp .create-plan__draw-plan:after,
#main.visuaryapp .create-plan__capture-plan:after,
#main.visuaryapp .create-plan__send-plan:after {
  content: '';
  position: absolute;
  background-image: url('/assets/icons/arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-color: #303031;
  width: 70px;
  height: 70px;
  border-radius: 70px;
  top: 50px;
  right: 50px;
  background-size: 35%;
  transition: transform 150ms linear;
}
#main.visuaryapp .create-plan__draw-plan:hover:after,
#main.visuaryapp .create-plan__capture-plan:hover:after,
#main.visuaryapp .create-plan__send-plan:hover:after {
  transform: translateX(10px);
}
#main.visuaryapp .create-plan__draw-plan img,
#main.visuaryapp .create-plan__capture-plan img,
#main.visuaryapp .create-plan__send-plan img {
  margin: 50px auto 0px;
  max-width: 250px;
  max-height: 250px;
}
#main.visuaryapp .create-plan__capture-unsupported {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  box-sizing: border-box;
  width: 550px;
  height: 400px;
  padding: 34px 56px;
  border-radius: 24px;
  text-decoration: none;
  background-color: #f7f4f1;
  color: #303031;
  max-width: 90%;
}
#main.visuaryapp .create-plan__capture-unsupported .create-plan__title {
  font-size: 30px;
  line-height: normal;
  opacity: 0.4;
}
#main.visuaryapp .create-plan__capture-unsupported .create-plan__text {
  margin-top: 10px;
  opacity: 0.4;
}
#main.visuaryapp .create-plan__price {
  font-weight: 600;
  font-size: 16px;
  line-height: 17px;
  text-transform: uppercase;
}
#main.visuaryapp .create-plan__title {
  font-weight: 500;
  font-size: 40px;
  line-height: 49px;
}
#main.visuaryapp .plan-limit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#main.visuaryapp .plan-limit__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#main.visuaryapp .plan-limit__title {
  font-weight: 600;
  font-size: 16px;
}
#main.visuaryapp .plan-limit__text {
  margin: 20px 0px 30px;
  max-width: 270px;
  text-align: center;
  font-size: 14px;
}
#main.visuaryapp .plan-limit button {
  background-color: var(--success);
  color: var(--light);
  padding: 10px 50px;
  font-weight: 600;
}
#main.visuaryapp .plan-limit__or {
  margin: 20px 0px;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
#main.visuaryapp .plan-limit__or:before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background-color: #f1f1f1;
  margin: 7px auto;
}
#main.visuaryapp .plan-limit__or span {
  display: block;
  background-color: var(--light);
  width: 40px;
  margin: -15px auto 0px;
}
#main.visuaryapp .plan-limit__archive {
  font-size: 14px;
  max-width: 230px;
  text-align: center;
}
#app .offline-banner {
  width: 100%;
  background-color: var(--secondary);
  color: var(--light);
  padding: 10px 20px;
  text-align: center;
  font-size: 14px;
  box-sizing: border-box;
  z-index: 1000;
}
@media (max-width: 1150px) {
  #main.visuaryapp .create-plan {
    flex-direction: column;
    justify-content: start;
  }
  #main.visuaryapp .create-plan__capture-unsupported {
    height: auto;
  }
}
@media (max-width: 570px) {
  #main.visuaryapp .create-plan__price {
    font-size: 13px;
  }
  #main.visuaryapp .create-plan__title {
    font-size: 25px;
  }
  #main.visuaryapp .create-plan__capture-unsupported .create-plan__title {
    font-size: 20px;
  }
  #main.visuaryapp .create-plan__capture-unsupported .create-plan__text {
    font-size: 13px;
  }
  #main.visuaryapp .create-plan__draw-plan:after,
  #main.visuaryapp .create-plan__capture-plan:after,
  #main.visuaryapp .create-plan__send-plan:after {
    width: 40px;
    height: 40px;
    top: 65px;
    right: 40px;
  }
}
.tabpanellayout .norms-panel,
.tabpanellayout__mobile-panel .norms-panel {
  width: 100%;
  height: 100%;
  max-height: none;
  box-shadow: none;
  position: relative;
}
.tabpanellayout .norms-panel h5,
.tabpanellayout__mobile-panel .norms-panel h5 {
  padding: 30px;
  justify-content: start;
  gap: 20px;
}
.tabpanellayout .norms-panel h5 .svg,
.tabpanellayout__mobile-panel .norms-panel h5 .svg {
  display: none;
}
.tabpanellayout .norms-panel__content,
.tabpanellayout__mobile-panel .norms-panel__content {
  overflow: auto;
}
.tabpanellayout .norms-panel__content ul li,
.tabpanellayout__mobile-panel .norms-panel__content ul li {
  padding: 15px 30px;
}
.tabpanellayout .bakery__content,
.tabpanellayout__mobile-panel .bakery__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tabpanellayout .bakery__render-btn,
.tabpanellayout__mobile-panel .bakery__render-btn {
  border-radius: 5px;
}
.tabpanellayout .bakery__assets,
.tabpanellayout__mobile-panel .bakery__assets {
  padding: 0px 10px;
  box-sizing: border-box;
  max-height: none;
}
.tabpanellayout .quote-placeholder,
.tabpanellayout__mobile-panel .quote-placeholder {
  padding: 40px 75px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabpanellayout .quote-placeholder h1,
.tabpanellayout__mobile-panel .quote-placeholder h1 {
  font-size: 18px;
  font-weight: 600;
}
.tabpanellayout .quote-placeholder h2,
.tabpanellayout__mobile-panel .quote-placeholder h2 {
  font-size: 13px;
  max-width: 430px;
}
.tabpanellayout .quote-placeholder .svg,
.tabpanellayout__mobile-panel .quote-placeholder .svg {
  width: 100%;
  margin-top: 50px;
}
.tabpanellayout .quote-placeholder .svg svg,
.tabpanellayout__mobile-panel .quote-placeholder .svg svg {
  width: 100%;
  height: auto;
}
.tabpanellayout__mobile-panel .quote-placeholder {
  padding: 30px;
}
.tabpanellayout__mobile-panel .norms-panel {
  height: calc(100% - 55px);
}
#main.builder .quotepanel__colname,
.tabpanellayout__mobile-panel .quotepanel__colname {
  font-size: 10px;
  color: #8c909a;
  width: 60px;
  text-align: center;
}
#main.builder .quotepanel__colname-name,
.tabpanellayout__mobile-panel .quotepanel__colname-name {
  flex-grow: 1;
}
#main.builder .quotepanel__colname-total,
.tabpanellayout__mobile-panel .quotepanel__colname-total {
  width: 60px;
  text-align: right;
  font-size: 10px;
  color: #8c909a;
}
#main.builder .quotepanel__colname-coef,
.tabpanellayout__mobile-panel .quotepanel__colname-coef {
  cursor: pointer;
  font-size: 12px;
  color: #8c909a;
  margin: 0px 10px;
}
#main.builder .quotepanel__colname-coef input,
.tabpanellayout__mobile-panel .quotepanel__colname-coef input {
  width: 60px;
}
#main.builder .quotepanel__colname-price,
.tabpanellayout__mobile-panel .quotepanel__colname-price {
  width: unset;
  font-size: 14px;
  font-weight: 600;
  color: var(--darkGrey);
  min-width: 80px;
  text-align: right;
}
#main.builder .quotepanel__content,
.tabpanellayout__mobile-panel .quotepanel__content {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 100px 29px 150px 29px;
  overflow: auto;
}
#main.builder .quotepanel__content .row__wrapper__sublines,
.tabpanellayout__mobile-panel .quotepanel__content .row__wrapper__sublines {
  overflow: hidden;
}
#main.builder .quotepanel__content__table .row.active .arrow .svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row.active .arrow .svg {
  transform: rotateZ(0deg);
  transition: 0.5s all;
}
#main.builder .quotepanel__content__table .row,
.tabpanellayout__mobile-panel .quotepanel__content__table .row {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
#main.builder .quotepanel__content__table .row .deleted .total,
.tabpanellayout__mobile-panel .quotepanel__content__table .row .deleted .total {
  text-decoration: line-through;
}
#main.builder .quotepanel__content__table .row .deleted .editable-text.name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row .deleted .editable-text.name {
  text-decoration: line-through;
  color: var(--secondary);
}
#main.builder .quotepanel__content__table .row__section .reorder,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__section .reorder {
  display: none;
}
#main.builder .quotepanel__content__table .row__section .manual .editable-text.name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__section .manual .editable-text.name {
  cursor: pointer;
  color: green;
}
#main.builder .quotepanel__content__table .row:first-child .row__wrapper__line,
.tabpanellayout__mobile-panel .quotepanel__content__table .row:first-child .row__wrapper__line {
  padding-top: 10px;
}
#main.builder .quotepanel__content__table .row__wrapper,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 100%;
}
@keyframes rowupdate {
  0% {
    background: #b0ceff;
  }
  100% {
    background: var(--light);
  }
}
#main.builder .quotepanel__content__table .row__wrapper .updated:not(.manual),
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper .updated:not(.manual) {
  animation: rowupdate 1s;
  color: red;
}
#main.builder .quotepanel__content__table .row__wrapper.hover,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper.hover {
  border: 1px solid #e7ebed;
  border-radius: 4px;
}
#main.builder .quotepanel__content__table .row__wrapper .reorder,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper .reorder {
  cursor: grab;
  display: none;
}
#main.builder .quotepanel__content__table .row__wrapper .row__wrapper__sublines,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper .row__wrapper__sublines {
  overflow: hidden;
}
#main.builder .quotepanel__content__table .row__wrapper__line,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line {
  padding: 0px 15px;
}
#main.builder .quotepanel__content__table .row__wrapper__sublines__row:first-child,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row:first-child {
  margin-top: 5px;
}
#main.builder .quotepanel__content__table .row__wrapper__line,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line,
#main.builder .quotepanel__content__table .row__wrapper__section,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#main.builder .quotepanel__content__table .row__wrapper__line.unsaved > .name span::after,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line.unsaved > .name span::after,
#main.builder .quotepanel__content__table .row__wrapper__section.unsaved > .name span::after,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section.unsaved > .name span::after,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row.unsaved > .name span::after,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row.unsaved > .name span::after {
  color: red;
  margin-left: 2px;
  font-weight: bold;
  content: '*';
}
#main.builder .quotepanel__content__table .row__wrapper__line .arrow,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .arrow,
#main.builder .quotepanel__content__table .row__wrapper__section .arrow,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .arrow,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .arrow,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .arrow {
  min-width: 10px;
  width: 10px;
  height: 10px;
  margin-left: 10px;
}
#main.builder .quotepanel__content__table .row__wrapper__line .arrow .svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .arrow .svg,
#main.builder .quotepanel__content__table .row__wrapper__section .arrow .svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .arrow .svg,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .arrow .svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .arrow .svg {
  transform: rotate(180deg);
  transition: 0.5s all;
  cursor: pointer;
  transform-origin: center 65%;
  position: relative;
  top: -5px;
}
#main.builder .quotepanel__content__table .row__wrapper__line .unitPrice,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .unitPrice,
#main.builder .quotepanel__content__table .row__wrapper__section .unitPrice,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .unitPrice,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .unitPrice,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .unitPrice {
  width: 19%;
  text-align: right;
}
#main.builder .quotepanel__content__table .row__wrapper__line .unitPrice input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .unitPrice input,
#main.builder .quotepanel__content__table .row__wrapper__section .unitPrice input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .unitPrice input,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .unitPrice input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .unitPrice input {
  width: 40px;
}
#main.builder .quotepanel__content__table .row__wrapper__line .quantity,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .quantity,
#main.builder .quotepanel__content__table .row__wrapper__section .quantity,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .quantity,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .quantity,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .quantity {
  width: 9%;
  text-align: right;
}
#main.builder .quotepanel__content__table .row__wrapper__line .quantity input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .quantity input,
#main.builder .quotepanel__content__table .row__wrapper__section .quantity input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .quantity input,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .quantity input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .quantity input {
  width: 40px;
}
#main.builder .quotepanel__content__table .row__wrapper__line .tax,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .tax,
#main.builder .quotepanel__content__table .row__wrapper__section .tax,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .tax,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .tax,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .tax {
  width: 9%;
  text-align: right;
}
#main.builder .quotepanel__content__table .row__wrapper__line .tax input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .tax input,
#main.builder .quotepanel__content__table .row__wrapper__section .tax input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .tax input,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .tax input,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .tax input {
  width: 40px;
}
#main.builder .quotepanel__content__table .row__wrapper__line .total,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .total,
#main.builder .quotepanel__content__table .row__wrapper__section .total,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .total,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .total,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .total {
  text-align: right;
}
#main.builder .quotepanel__content__table .row__wrapper__line .delete,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .delete,
#main.builder .quotepanel__content__table .row__wrapper__section .delete,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .delete,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .delete,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .delete {
  opacity: 0;
  transition: opacity 300ms;
  background-color: transparent;
  padding: 0px 12px 0px 9px;
  width: 35px;
}
#main.builder .quotepanel__content__table .row__wrapper__line .delete svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .delete svg,
#main.builder .quotepanel__content__table .row__wrapper__section .delete svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .delete svg,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .delete svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .delete svg {
  max-width: 18px;
  max-height: 18px;
}
#main.builder .quotepanel__content__table .row__wrapper__line:hover .delete,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line:hover .delete,
#main.builder .quotepanel__content__table .row__wrapper__section:hover .delete,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section:hover .delete,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row:hover .delete,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row:hover .delete {
  opacity: 1;
}
#main.builder .quotepanel__content__table .row__wrapper__section,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section {
  padding: 10px 15px;
  background-color: #e7ebed;
  margin-top: 10px;
}
#main.builder .quotepanel__content__table .row__wrapper__section .name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .name {
  font-size: 14px;
}
#main.builder .quotepanel__content__table .row__wrapper__line .name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .name {
  font-size: 12px;
}
#main.builder .quotepanel__content__table .row__wrapper__section .name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .name,
#main.builder .quotepanel__content__table .row__wrapper__line .name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .name {
  color: var(--darkGrey);
  font-weight: 600;
  width: auto;
}
#main.builder .quotepanel__content__table .row__wrapper__section .spacer,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .spacer,
#main.builder .quotepanel__content__table .row__wrapper__line .spacer,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .spacer {
  flex-grow: 1;
}
#main.builder .quotepanel__content__table .row__wrapper__section .unit,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .unit,
#main.builder .quotepanel__content__table .row__wrapper__line .unit,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .unit,
#main.builder .quotepanel__content__table .row__wrapper__section .quantity,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .quantity,
#main.builder .quotepanel__content__table .row__wrapper__line .quantity,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .quantity,
#main.builder .quotepanel__content__table .row__wrapper__section .unitPrice,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .unitPrice,
#main.builder .quotepanel__content__table .row__wrapper__line .unitPrice,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .unitPrice,
#main.builder .quotepanel__content__table .row__wrapper__section .tax,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .tax,
#main.builder .quotepanel__content__table .row__wrapper__line .tax,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .tax {
  font-size: 12px;
  color: var(--grey);
  font-weight: 500;
}
#main.builder .quotepanel__content__table .row__wrapper__section .total,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .total,
#main.builder .quotepanel__content__table .row__wrapper__line .total,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .total {
  color: var(--darkGrey);
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  padding-left: 10px;
}
#main.builder .quotepanel__content__table .row__wrapper__section .total span,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section .total span,
#main.builder .quotepanel__content__table .row__wrapper__line .total span,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line .total span {
  font-size: 12px;
  color: var(--grey);
  font-weight: 500;
}
#main.builder .quotepanel__content__table .row__wrapper__section.detailed .name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__section.detailed .name,
#main.builder .quotepanel__content__table .row__wrapper__line.detailed .name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line.detailed .name {
  padding-left: 40px;
  box-sizing: border-box;
}
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .name,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .name {
  font-size: 12px;
  color: var(--grey);
  font-weight: 500;
  box-sizing: border-box;
  padding: 5px;
  padding-left: 20px;
  flex-basis: 50%;
}
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .spacer,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .spacer {
  flex-grow: 1;
}
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .unit,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .unit,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .quantity,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .quantity,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .unitPrice,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .unitPrice,
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .tax,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .tax {
  font-size: 12px;
  color: var(--grey);
  font-weight: 500;
  width: 60px;
  text-align: center;
}
#main.builder .quotepanel__content__table .row__wrapper__sublines__row .total,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__sublines__row .total {
  font-size: 12px;
  color: var(--grey);
  font-weight: 500;
  width: 60px;
}
#main.builder .quotepanel__content__table .row .remove,
.tabpanellayout__mobile-panel .quotepanel__content__table .row .remove {
  cursor: pointer;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  opacity: 0;
  transition: opacity 300ms;
  align-items: center;
  justify-content: center;
}
#main.builder .quotepanel__content__table .row .remove .svg svg,
.tabpanellayout__mobile-panel .quotepanel__content__table .row .remove .svg svg {
  width: 15px;
  height: 15px;
}
#main.builder .quotepanel__content__table .row .remove .svg svg path,
.tabpanellayout__mobile-panel .quotepanel__content__table .row .remove .svg svg path {
  fill: var(--darkGrey);
}
#main.builder .quotepanel__content__table .row__wrapper__line:hover .remove,
.tabpanellayout__mobile-panel .quotepanel__content__table .row__wrapper__line:hover .remove {
  opacity: 1;
}
#main.builder .quotepanel__content .addForm__group__add,
.tabpanellayout__mobile-panel .quotepanel__content .addForm__group__add {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin: 0px 35px 0px 50px;
  opacity: 0;
  transition: opacity 300ms;
}
#main.builder .quotepanel__content .addForm__group__add:hover,
.tabpanellayout__mobile-panel .quotepanel__content .addForm__group__add:hover {
  opacity: 0.7;
}
#main.builder .quotepanel__content .addForm__group__add:before,
.tabpanellayout__mobile-panel .quotepanel__content .addForm__group__add:before,
#main.builder .quotepanel__content .addForm__group__add:after,
.tabpanellayout__mobile-panel .quotepanel__content .addForm__group__add:after {
  content: '';
  display: block;
  height: 1px;
  background-color: #ececec;
  flex-grow: 1;
}
#main.builder .quotepanel__content .addForm__group__add .svg,
.tabpanellayout__mobile-panel .quotepanel__content .addForm__group__add .svg {
  margin: 0px 25px;
}
#main.builder .quotepanel__content .addForm__group__add .svg svg,
.tabpanellayout__mobile-panel .quotepanel__content .addForm__group__add .svg svg {
  width: 12px;
  height: 12px;
}
#main.builder .quotepanel__content .addForm__group__add .svg svg path,
.tabpanellayout__mobile-panel .quotepanel__content .addForm__group__add .svg svg path {
  fill: #c2c4ca;
}
#main.builder .quotepanel__content__add,
.tabpanellayout__mobile-panel .quotepanel__content__add {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--darkGrey);
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px 15px;
  background-color: #e7ebed;
  opacity: 0.5;
  font-weight: 600;
}
#main.builder .quotepanel__content__add:hover,
.tabpanellayout__mobile-panel .quotepanel__content__add:hover {
  cursor: pointer;
  opacity: 1;
}
#main.builder .quotepanel__section__add,
.tabpanellayout__mobile-panel .quotepanel__section__add {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  justify-content: start;
  opacity: 0.3;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 600;
}
#main.builder .quotepanel__section__add:hover,
.tabpanellayout__mobile-panel .quotepanel__section__add:hover {
  opacity: 0.5;
}
#main.builder .quotepanel__section__add .quotepanel__addicon,
.tabpanellayout__mobile-panel .quotepanel__section__add .quotepanel__addicon {
  border: none;
  border-right: 2px solid #2d3446;
}
#main.builder .quotepanel__section__add .svg,
.tabpanellayout__mobile-panel .quotepanel__section__add .svg {
  margin-right: 6px;
}
#main.builder .quotepanel__section__add .svg svg,
.tabpanellayout__mobile-panel .quotepanel__section__add .svg svg {
  width: 12px;
  height: 12px;
}
#main.builder .quotepanel__section__add .svg svg path,
.tabpanellayout__mobile-panel .quotepanel__section__add .svg svg path {
  fill: var(--darkGrey);
}
.contact-me-popup {
  color: black;
}
.contact-me-popup > div {
  width: 70%;
  height: 70%;
  padding: 50px 20px 40px 20px;
}
.contact-me-popup iframe {
  width: 100%;
  height: 100%;
}
.request-quote-popup__title {
  font-weight: 600;
  text-align: center;
}
.request-quote-popup__subtitle {
  text-align: center;
  font-size: 12px;
  margin: 20px;
}
.request-quote-popup__input {
  padding-top: 10px;
}
.request-quote-popup__input.firstname {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.request-quote-popup__input.lastname {
  float: left;
  width: 48%;
}
.request-quote-popup__input.email {
  clear: both;
}
.request-quote-popup__content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.request-quote-popup__content {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 50px 40px;
  box-sizing: border-box;
}
.request-quote-popup__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.request-quote-popup__success .svg {
  width: 100px;
  height: 100px;
  margin-top: -100px;
}
.request-quote-popup__success .svg svg {
  width: 100%;
  height: 100%;
}
.request-quote-popup__error {
  text-align: center;
  width: 100%;
  line-height: 40px;
  background-color: var(--warning);
  color: var(--light);
  font-size: 14px;
  border-radius: 5px 5px 0px 0px;
  font-weight: 600;
}
.request-quote-popup__content_ {
  padding: 0px;
  height: 80%;
  width: 95%;
  box-sizing: border-box;
  max-width: 650px;
}
.request-quote-popup__cross_ {
  top: 5px;
  right: 5px;
}
.request-quote-popup__title_,
.request-quote-popup__buttons_,
.request-quote-popup__text_ {
  display: none;
}
.request-quote-popup .segmented-button {
  width: 100%;
  padding-top: 10px;
}
.request-quote-popup .segmented-button__label {
  font-size: 13px;
}
.request-quote-popup form {
  margin: 0px auto;
  max-width: 450px;
}
.request-quote-popup form button {
  margin: 30px auto 0px auto;
  text-align: center;
  display: block;
  padding: 13px 20px;
  width: 340px;
  background-color: var(--primary);
  color: var(--light);
  font-weight: 600;
  max-width: 100%;
}
.request-quote-popup .input-form__label {
  font-size: 13px;
}
.request-quote-popup .input-form__input {
  height: 34px;
}
.request-quote-popup .input-form__wrapper {
  margin-top: 5px;
  min-height: 40px;
  min-width: 100px;
  border: 1px solid var(--lightGrey);
}
.request-quote-popup .input-form__wrapper textarea {
  height: 100px;
  padding: 10px;
}
.main-action {
  position: absolute;
  bottom: 50px;
  left: 50%;
  background-color: var(--primary);
  color: var(--light);
  width: 230px;
  margin-left: -115px;
  height: 50px;
  border-radius: 50px;
  font-weight: 500;
  padding: 0px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
}
.main-action__back {
  height: 100%;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #7BA9FF;
  padding-left: 10px;
}
.main-action__back:hover {
  background-color: #95baff;
}
.main-action__back:active {
  background-color: #6287cc;
}
.main-action__forward {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-action__forward:hover {
  background-color: #3391f2;
}
.main-action__forward:active {
  background-color: #005ebf;
}
.main-action__forward span {
  flex: 1;
  white-space: nowrap;
}
.main-action__forward .svg {
  margin-right: 20px;
}
.main-action__forward .loader-component__dot {
  background-color: var(--light);
}
.main-action__error span {
  font-size: 14px;
}
.main-action__balance {
  width: 15px;
  margin-left: 20px;
  height: 15px;
}
.main-action .svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-action .svg svg {
  width: 15px;
  height: 15px;
}
.main-action .svg svg path {
  fill: var(--light);
}
#main.builder .toolbar__walls .wall.exterior_wall {
  display: none;
}
#main.builder .toolbar__settings .row.plasterWallWidth,
#main.builder .toolbar__settings .row.exteriorWallWidth {
  display: none;
}
@media (max-width: 1150px) {
  #body {
    flex-direction: column;
  }
}
@media (max-width: 650px) {
  #main.builder #body {
    flex-direction: column;
  }
  .main-action {
    bottom: 80px;
  }
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .name {
  white-space: nowrap;
  background-color: var(--grey);
  border-radius: 15px;
  height: 5px;
  color: transparent;
  opacity: 0.4;
  max-width: 270px;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .spacer {
  display: none;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .unitPrice {
  display: none;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .quantity {
  display: none;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .unit {
  display: none;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .tax {
  display: none;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .delete {
  display: none;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row {
  margin-top: 5px;
}
body.video-mode .quotepanel__section__add {
  display: none;
}
body.video-mode .quotepanel__colname {
  display: none;
}
body.video-mode .quotepanel__content__table .row__wrapper__sublines__row .total {
  white-space: nowrap;
  background-color: var(--grey);
  border-radius: 15px;
  height: 10px;
  color: transparent;
  opacity: 0.4;
}
body.video-mode .quotepanel__content__table .row__wrapper__section {
  border-radius: 5px;
}
body.video-mode .quotepanel__content__table .row__wrapper__line .total {
  background-color: var(--darkGrey);
  border-radius: 15px;
  opacity: 0.6;
  height: 12px;
  color: transparent;
}
body.video-mode #main.builder #body .builderpanel__header__total > div {
  background-color: var(--lightPrimary);
  border-radius: 18px;
  opacity: 0.7;
  color: transparent;
}
body.video-mode .toolbar .second-panel__content .mode-settings .row {
  display: none;
}
body.video-mode .toolbar .second-panel__content .mode-settings {
  padding-top: 0px !important;
}
body.video-mode .product-card:first-of-type {
  display: none;
}
body.video-mode .product-card__main__info__price {
  background-color: var(--grey);
  border-radius: 29px;
  color: transparent;
  opacity: 0.5;
}
body.video-mode .product-card__main__info__name {
  background-color: var(--darkGrey);
  border-radius: 15px;
  color: transparent;
  max-height: 13px;
  max-width: 170px;
  opacity: 0.7;
}
body.video-mode .product-card__main__info__brand {
  background-color: var(--grey);
  border-radius: 15px;
  color: transparent;
  max-height: 13px;
  max-width: 170px;
  opacity: 0.7;
}
#main {
  animation: 300ms ease-in-out fade-in;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/** @format */
#main.creator.sector .panellayout.panel-open .panellayout__panel {
  width: 1000px;
}
.panellayout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}
.panellayout__container {
  transform: translateX(0%);
  transition: transform 0.5s ease-in-out;
  display: flex;
  width: 100%;
  height: 50%;
  flex-grow: 1;
}
.panellayout__main-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.panellayout__main-content .viewer {
  width: 100%;
  height: 100%;
}
.panellayout.panel-open .panellayout__panel {
  width: 750px;
  max-width: 50%;
}
.panellayout.panel-open .panellayout__panel-toggle {
  width: auto;
}
.panellayout.panel-open .panellayout__panel-toggle .svg {
  transform: rotateZ(0deg);
  transition: 0.5s transform;
  margin-left: 20px;
  margin-right: 29px;
}
.panellayout.panel-open .panellayout__panel-content {
  display: block;
}
.panellayout.panel-open .panellayout__mobile-tab.panel-tab {
  color: var(--primary);
  border-top-color: var(--primary);
}
.panellayout.panel-open .panellayout__mobile-tab.main-tab {
  color: var(--dark);
  border-top-color: transparent;
}
.panellayout__panel {
  width: 72px;
  height: 100%;
  box-shadow: 0px 4px 12px 0 rgba(232, 232, 237, 0.5);
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}
.panellayout__panel-content {
  display: none;
  height: 100%;
  width: 100%;
  flex-direction: column;
}
.panellayout__panel-toggle {
  width: 72px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 5;
  cursor: pointer;
}
.panellayout__panel-toggle .svg {
  transform: rotate(180deg);
  transition: 0.5s transform;
  width: 24px;
  position: relative;
}
.panellayout__panel-toggle .svg svg path {
  fill: var(--grey);
}
.panellayout__mobile-toggle {
  display: none;
  width: 100%;
  height: 50px;
  box-shadow: 0px -4px 12px 0 rgba(232, 232, 237, 0.5);
  background-color: white;
  z-index: 10;
}
.panellayout__mobile-tab {
  width: 50%;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  border-top: 2px solid transparent;
}
.panellayout__mobile-tab.main-tab {
  color: var(--primary);
  border-top-color: var(--primary);
}
.panellayout__mobile-tab.panel-tab {
  color: var(--dark);
  border-top-color: transparent;
}
.tablayout {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tablayout__menu {
  display: flex;
  justify-content: start;
  align-items: center;
  color: var(--grey);
  background-color: var(--lightGrey);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  height: 40px;
}
.tablayout__tabs {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: start;
  box-sizing: border-box;
  padding-right: 80px;
}
.tablayout__tab {
  height: 100%;
  padding: 0px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 2;
  width: min-content;
}
.tablayout__tab p {
  color: var(--dark);
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  position: relative;
  left: -3px;
  z-index: 2;
  text-align: center;
}
.tablayout__tab p span {
  position: absolute;
  background-color: #e70050;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  font-size: 11px;
  font-weight: 600;
  box-sizing: border-box;
  padding-bottom: 2px;
  top: -6px;
  right: -16px;
}
.tablayout__tab.main {
  display: none;
}
.tablayout__tab.disabled {
  cursor: default;
}
.tablayout__tab.disabled p {
  color: var(--grey);
}
.tablayout__tab.active {
  background-color: var(--light);
  border-top-left-radius: 4px;
  border-top-right-radius: 6px;
  box-shadow: 0 2px 12px 0 #dbdbdd;
  position: relative;
}
.tablayout__tab.active:after {
  height: 120%;
  width: 15px;
  right: -6px;
  background-color: var(--lightGrey);
  content: '';
  position: absolute;
  transform: rotateZ(-15deg);
  top: -7px;
  border-bottom-left-radius: 9px;
  box-shadow: -10px 5px 0px 2px var(--light);
}
.tablayout__tab.active:before {
  height: 20px;
  width: 10px;
  right: 10px;
  top: 0px;
  background-color: var(--light);
  box-shadow: 7px -5px 0px 2px var(--lightGrey);
  content: '';
  position: absolute;
  z-index: 1;
  border-top-right-radius: 9px;
  transform: rotateZ(-15deg);
}
.tablayout__content {
  overflow: auto;
  padding: 0px 29px 0px 29px;
  background-color: var(--light);
  height: 100%;
}
.tabpanellayout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  background-color: var(--light);
}
.tabpanellayout__container {
  transform: translateX(0%);
  transition: transform 0.5s ease-in-out;
  display: flex;
  width: 100%;
  height: 50%;
  flex-grow: 1;
}
.tabpanellayout__main-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tabpanellayout__main-content .viewer {
  width: 100%;
  height: 100%;
}
.tabpanellayout.panel-open .tabpanellayout__panel {
  width: 750px;
  max-width: 50%;
}
.tabpanellayout.panel-open .tabpanellayout__panel-close {
  display: flex;
}
.tabpanellayout.panel-open .tabpanellayout__panel-content {
  display: block;
}
.tabpanellayout.panel-open .tabpanellayout__mobile-tab:active {
  background-color: var(--lightGrey);
}
.tabpanellayout.panel-open .tabpanellayout__mobile-tab.panel-tab {
  color: var(--primary);
  border-top-color: var(--primary);
}
.tabpanellayout.panel-open .tabpanellayout__mobile-tab.main-tab {
  color: var(--dark);
  border-top-color: transparent;
}
.tabpanellayout__panel {
  width: 80px;
  height: 100%;
  box-shadow: 0px 0px 10px #0002;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--light);
}
.tabpanellayout__panel-content {
  display: none;
  height: 100%;
  width: calc(100% - 80px);
  max-width: calc(100% - 80px);
  flex-direction: column;
  position: relative;
}
.tabpanellayout__panel-close {
  display: none;
  width: 100%;
  height: 70px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tabpanellayout__panel-close .svg {
  width: 24px;
  position: relative;
}
.tabpanellayout__panel-close .svg svg path {
  fill: var(--dark);
}
.tabpanellayout__tabs {
  width: 80px;
  z-index: 5;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--lightGrey);
}
.tabpanellayout__tabs .separator {
  flex-grow: 1;
}
.tabpanellayout__tab {
  position: relative;
  width: 100%;
  height: 90px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  gap: 5px;
  background-color: var(--light);
}
.tabpanellayout__tab .badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background-color: var(--warning);
  color: var(--light);
  border-radius: 15px;
  padding: 3px 6px;
  font-weight: 600;
  font-family: sans-serif;
}
.tabpanellayout__tab .badge__wrapper {
  position: relative;
}
.tabpanellayout__tab .svg {
  width: 35px;
  height: 35px;
}
.tabpanellayout__tab .svg svg {
  width: 100%;
  height: 100%;
}
.tabpanellayout__tab .svg svg path {
  fill: var(--dark);
}
.tabpanellayout__tab p {
  font-weight: 600;
  margin-top: 5px;
  font-size: 13px;
  color: var(--dark);
  text-align: center;
}
.tabpanellayout__tab:hover {
  background-color: var(--lightGrey);
}
.tabpanellayout__tab.selected {
  background-color: #f6f6f6;
  box-shadow: inset 0px 10px 10px -10px #0002, inset 0px -10px 10px -10px #0002;
}
.tabpanellayout__mobile-panel.panel-open .tabpanellayout__mobile-panel-content {
  transform: translateY(0%);
}
.tabpanellayout__mobile-panel-content {
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--light);
  z-index: 10000;
  transform: translateY(100%);
  transition: transform 500ms ease-in-out;
  display: flex;
  flex-direction: column;
}
.tabpanellayout__mobile-panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--lightGrey);
}
.tabpanellayout__mobile-panel-header span {
  font-size: 14px;
  font-weight: 500;
}
.tabpanellayout__mobile-panel-header .arrow {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tabpanellayout__mobile-panel-header .arrow svg {
  width: 17px;
  height: 17px;
}
.tabpanellayout__mobile-panel-header h1 {
  font-size: 15px;
  padding: 10px;
  font-weight: normal;
}
.mobile-tabs {
  display: none;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.mobile-tabs.left {
  left: 0px;
  right: auto;
}
.mobile-tabs.left .mobile-tabs__expand {
  right: auto;
  left: 10px;
}
.mobile-tabs.left .mobile-tabs__tab {
  flex-direction: row;
  right: auto;
  left: 10px;
}
.mobile-tabs.left.expanded .mobile-tabs__tabs {
  transform: translateX(60px);
}
.mobile-tabs__overlay {
  display: none;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background-color: #0007;
}
.mobile-tabs__expand {
  position: absolute;
  bottom: 80px;
  right: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: var(--light);
  border: 1px solid var(--lightGrey);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
}
.mobile-tabs__tabs {
  transform-style: preserve-3d;
  transition: transform 300ms ease-in-out;
}
.mobile-tabs__tab {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding: 10px 15px 10px 20px;
  width: 135px;
  background-color: var(--light);
  border: 1px solid var(--lightGrey);
  border-radius: 30px;
  font-size: 13px;
  gap: 10px;
  box-sizing: border-box;
  position: absolute;
  bottom: 20px;
  right: 10px;
  transition: transform 300ms ease-in-out, width 300ms ease-in-out, border-radius 300ms ease-in-out;
  overflow: hidden;
  cursor: pointer;
}
.mobile-tabs__tab p {
  display: block;
  text-align: center;
  width: 60px;
}
.mobile-tabs__tab .badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background-color: var(--warning);
  color: var(--light);
  border-radius: 15px;
  padding: 3px 6px;
  font-weight: 600;
  font-family: sans-serif;
}
.mobile-tabs__tab .badge__wrapper {
  position: relative;
}
.mobile-tabs__tab .svg {
  width: 30px;
  height: 30px;
}
.mobile-tabs__tab .svg svg {
  width: 100%;
  height: 100%;
}
.mobile-tabs__tab .svg svg path {
  fill: var(--dark);
}
.mobile-tabs__tab:nth-of-type(1) {
  transform: translate3d(0, 0, 9px);
}
.mobile-tabs__tab:nth-of-type(2) {
  transform: translate3d(0, 0, 8px);
}
.mobile-tabs__tab:nth-of-type(3) {
  transform: translate3d(0, 0, 7px);
}
.mobile-tabs__tab:nth-of-type(4) {
  transform: translate3d(0, 0, 6px);
}
.mobile-tabs__tab:nth-of-type(5) {
  transform: translate3d(0, 0, 5px);
}
.mobile-tabs__tab:nth-of-type(6) {
  transform: translate3d(0, 0, 4px);
}
.mobile-tabs__tab:nth-of-type(7) {
  transform: translate3d(0, 0, 3px);
}
.mobile-tabs__tab:nth-of-type(8) {
  transform: translate3d(0, 0, 2px);
}
.mobile-tabs__tab:nth-of-type(9) {
  transform: translate3d(0, 0, 1px);
}
.mobile-tabs__tab:nth-of-type(10) {
  transform: translate3d(0, 0, 0px);
}
.mobile-tabs.expanded {
  z-index: 10000;
}
.mobile-tabs.expanded .mobile-tabs__overlay {
  display: block;
}
.mobile-tabs.expanded .mobile-tabs__tabs {
  transform: translateX(-60px);
}
.mobile-tabs.expanded .mobile-tabs__tab {
  width: 200px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(1) {
  transform: translate3d(0, -60px, 9px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(2) {
  transform: translate3d(0, -111px, 8px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(3) {
  transform: translate3d(0, -162px, 7px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(4) {
  transform: translate3d(0, -213px, 6px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(5) {
  transform: translate3d(0, -264px, 5px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(6) {
  transform: translate3d(0, -315px, 4px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(7) {
  transform: translate3d(0, -366px, 3px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(8) {
  transform: translate3d(0, -417px, 2px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(9) {
  transform: translate3d(0, -468px, 1px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:nth-of-type(10) {
  transform: translate3d(0, -519px, 0px);
  border-radius: 0px;
}
.mobile-tabs.expanded .mobile-tabs__tab:first-of-type {
  border-radius: 0px 0px 15px 15px;
}
.mobile-tabs.expanded .mobile-tabs__tab:last-of-type {
  border-radius: 15px 15px 0px 0px;
}
@media (max-width: 650px) {
  #main.creator.sector .panellayout.panel-open .panellayout__panel {
    width: 100%;
  }
  .panellayout__main-content {
    width: 100%;
  }
  .panellayout__panel-content {
    display: block;
  }
  .panellayout__panel {
    position: absolute;
    top: 0px;
    left: 100%;
    max-width: none;
    width: 100%;
  }
  .panellayout__panel-toggle {
    display: none;
  }
  .panellayout__mobile-toggle {
    display: flex;
  }
  .panellayout.panel-open .panellayout__container {
    transform: translateX(-100%);
  }
  .panellayout.panel-open .panellayout__panel {
    width: 100%;
    max-width: none;
  }
  .tabpanellayout__panel-content {
    display: block;
    max-width: 100%;
    width: 100% !important;
  }
  .tabpanellayout__tabs {
    display: none;
  }
  .tabpanellayout__panel {
    position: fixed;
    bottom: 0px;
    right: 0px;
    height: auto;
    overflow: visible;
    width: auto !important;
    box-shadow: none;
    background-color: transparent;
  }
  .tabpanellayout__panel-tabs {
    width: auto;
    height: auto;
    display: block;
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .mobile-tabs {
    display: block;
  }
}

.room-panel-body .product-card,
.wall-panel-body .product-card {
  margin: 0;
  border: none;
  background-color: white;
  box-shadow: inset 0px 0px 10px #00000011;
}
.room-panel-body .product-card__main__thumbnail div,
.wall-panel-body .product-card__main__thumbnail div {
  background-size: cover;
  border-radius: 0;
}
.room-panel-body .product-card__tick.svg,
.wall-panel-body .product-card__tick.svg {
  display: none;
}
.room-panel-body .product-card .row,
.wall-panel-body .product-card .row {
  margin: 0 10px;
}
.room-panel-body .product-card .dashed,
.wall-panel-body .product-card .dashed {
  border-bottom: 1px solid var(--boxShadow);
}
.room-panel-body .product-card.empty .product-card__main__thumbnail .svg,
.wall-panel-body .product-card.empty .product-card__main__thumbnail .svg {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
.room-panel-body .product-card.empty .product-card__main__thumbnail .svg svg,
.wall-panel-body .product-card.empty .product-card__main__thumbnail .svg svg {
  height: 50px;
}
.room-panel-body .product-card.empty .product-card__main__info__name,
.wall-panel-body .product-card.empty .product-card__main__info__name {
  margin-top: 15px;
}
.room-panel-body .edit-measure-lines,
.wall-panel-body .edit-measure-lines {
  font-size: 11px;
  flex-grow: 1;
}
.room-panel-body .edit-measure-lines svg,
.wall-panel-body .edit-measure-lines svg {
  height: 18px;
}
#main.builder .room-panel-body .edit-measure-lines {
  display: none;
}
.room-lines-panel button {
  flex-grow: 1;
}
.room-lines-panel .edit-description {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey);
  text-align: center;
}
.choose-wall-materials .products,
.choose-floor-materials .products {
  display: flex;
  flex-direction: column;
  padding: 8px 18px;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid #e7ebed;
}
.choose-wall-materials .products .product-card.empty .product-card__main__info,
.choose-floor-materials .products .product-card.empty .product-card__main__info {
  min-height: 60px;
  justify-content: center;
}
.choose-wall-materials .products__tip,
.choose-floor-materials .products__tip {
  color: var(--grey);
  padding: 20px 9px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  cursor: default;
}

.ceiling-widget,
.ceiling-widget {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 250px;
  height: auto !important;
  background-color: var(--light);
  padding: 10px;
  border-top-right-radius: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #0001;
}
.ceiling-widget.open,
.ceiling-widget.open {
  min-width: 350px;
}
.ceiling-widget__container,
.ceiling-widget__container {
  position: absolute;
  top: 10px;
  left: 10px;
}
.ceiling-widget__btn,
.ceiling-widget__btn {
  width: 100%;
}
.ceiling-widget__done-btn,
.ceiling-widget__done-btn {
  width: fit-content;
}
.ceiling-widget .row,
.ceiling-widget .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.ceiling-widget .row .prop,
.ceiling-widget .row .prop {
  text-align: center;
  font-size: 14px;
}
.ceiling-widget .row .subtext,
.ceiling-widget .row .subtext {
  font-size: 12px;
  margin-bottom: 5px;
}
.ceiling-widget .row input[type="number"],
.ceiling-widget .row input[type="number"] {
  flex-grow: 1;
  max-width: 200px;
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  height: 38px;
  padding-left: 15px;
  font-size: 12px;
  font-weight: 600;
  box-sizing: border-box;
}
.ceiling-widget .row__btns,
.ceiling-widget .row__btns {
  padding-top: 8px;
  border-top: 1px solid var(--lightGrey);
  justify-content: center;
}
.ceilingpanel .selection-panel__head-actions .row,
.ceilingpanel .ceilingpanel__corner-list .row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.ceilingpanel .selection-panel__head-actions .row .prop,
.ceilingpanel .ceilingpanel__corner-list .row .prop {
  text-align: center;
  font-size: 14px;
}
.ceilingpanel .selection-panel__head-actions .row input[type="number"],
.ceilingpanel .ceilingpanel__corner-list .row input[type="number"] {
  max-width: 100px;
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  height: 38px;
  padding-left: 15px;
  font-size: 12px;
  font-weight: 600;
  box-sizing: border-box;
}
.ceilingpanel .ceilingpanel__corner-list,
.ceilingpanel .ceilingpanel__corner-list {
  padding: 20px 0px;
}
.ceilingpanel .ceilingpanel__corner-list .row,
.ceilingpanel .ceilingpanel__corner-list .row {
  margin: 0 20px;
  padding: 4px;
  border-radius: 4px;
  justify-content: space-between;
  cursor: pointer;
}
.ceilingpanel .ceilingpanel__corner-list .row:hover,
.ceilingpanel .ceilingpanel__corner-list .row:hover {
  background-color: var(--darkerLight);
}
.ceilingpanel .ceilingpanel__corner-list .row .prop,
.ceilingpanel .ceilingpanel__corner-list .row .prop {
  flex-basis: 25%;
}
.ceilingpanel .ceilingpanel__corner-list .row input[type="number"],
.ceilingpanel .ceilingpanel__corner-list .row input[type="number"] {
  max-width: unset;
}
.ceilingpanel.with-body.open .selection-panel__head-actions .row {
  display: none;
}
.ceilingpanel__btn {
  width: 100%;
}
@media (max-width: 650px) {
  .ceiling-widget {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .ceiling-widget__container {
    display: flex;
    justify-content: center;
    top: unset;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

.item-panel-body .section__title {
  max-height: 14px;
}
.item-panel-body .product-details .link {
  left: 6px;
  top: 6px;
  margin: 0;
  width: fit-content;
}
button.edit-room-btn {
  padding-left: 4px;
  padding-right: 4px;
}
button.edit-room-btn .svg {
  margin: 0;
}
button.edit-room-btn svg {
  height: 20px;
  width: 20px;
}

@media (max-width: 650px) {
  .mode-tooltip {
    display: none;
  }
}
.mode-tooltip {
  background-color: var(--light);
  width: 300px;
}
.mode-tooltip__header {
  display: flex;
  padding: 10px;
  gap: 10px;
  align-items: center;
}
.mode-tooltip__close {
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: relative;
}
.mode-tooltip__close:after,
.mode-tooltip__close:before {
  content: '';
  position: absolute;
  height: 20px;
  width: 1px;
  background-color: var(--dark);
  transform-origin: center;
  top: 50%;
  left: 50%;
  margin: -10px -0.5px;
}
.mode-tooltip__close:before {
  transform: rotate(-45deg);
}
.mode-tooltip__close:after {
  transform: rotate(45deg);
}
.mode-tooltip__title {
  display: flex;
  flex-direction: column;
}
.mode-tooltip__title span {
  text-transform: uppercase;
  font-size: 10px;
}
.mode-tooltip__title p {
  font-size: 14px;
}
.mode-tooltip__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mode-tooltip__key {
  display: flex;
  gap: 10px;
  align-items: center;
}
.mode-tooltip__key-icon {
  width: 25px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex-shrink: 0;
}
.mode-tooltip__key-icon.shift {
  background-image: url(/assets/icons/shift-key.svg);
}
.mode-tooltip__key-icon.space {
  background-image: url(/assets/icons/space-key.svg);
}
.mode-tooltip__key-icon.ctrl {
  background-image: url(/assets/icons/ctrl-key.svg);
}
.mode-tooltip__key-text {
  font-size: 13px;
}

/** @format */
.toolbar__selection-panels .measurement-panel {
  position: fixed;
  bottom: 140px;
  left: 50%;
  z-index: 1000;
  width: 230px;
  background-color: var(--light);
  box-sizing: border-box;
  border-radius: 8px;
  transform: translateX(-50%);
  border: 1px solid var(--lightGrey);
  padding: 15px 20px;
  gap: 10px;
  display: flex;
  flex-direction: column;
}
.toolbar__selection-panels .measurement-panel__title {
  font-size: 13px;
  font-weight: 600;
}
.toolbar__selection-panels .measurement-panel input {
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
  font-family: sans-serif;
  border: 1px solid var(--dark);
  border-radius: 5px;
  font-size: 15px;
}
.mode-banner.adjust button {
  background-color: var(--primary);
  color: var(--light);
  padding: 5px 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;
}
.toolbar .tools-menu__tools,
.toolbar__mobile .tools-menu__tools {
  padding: 50px 30px 10px 30px;
}
.toolbar .tools-menu__tool,
.toolbar__mobile .tools-menu__tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 70px;
  gap: 10px;
}
.toolbar .tools-menu__tool .icon,
.toolbar__mobile .tools-menu__tool .icon {
  width: 70px;
  height: 70px;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--lightGrey);
  border-radius: 8px;
}
.toolbar .tools-menu__tool .title,
.toolbar__mobile .tools-menu__tool .title {
  font-size: 13px;
  white-space: nowrap;
}
.toolbar .tools-menu__tool.hidden,
.toolbar__mobile .tools-menu__tool.hidden {
  display: none;
}
.toolbar .tools-menu__tool.measure .icon,
.toolbar__mobile .tools-menu__tool.measure .icon {
  background-image: url('/assets/icons/icon-ruler2.svg');
  background-size: 40%;
}
.toolbar .tools-menu__tool.rotate .icon,
.toolbar__mobile .tools-menu__tool.rotate .icon {
  background-image: url('/assets/icons/icon-rotate.svg');
  background-size: 40%;
}
.toolbar .tools-menu__tool.adjust .icon,
.toolbar__mobile .tools-menu__tool.adjust .icon {
  background-image: url('/assets/icons/adjust.svg');
  background-size: 55%;
}
.toolbar .tools-menu__tools-title,
.toolbar__mobile .tools-menu__tools-title {
  color: var(--dark);
  font-size: 18px;
  font-weight: 600;
  line-height: 21px;
  margin: 0px 0px 20px 0px;
}
.toolbar .tools-menu__tools-list,
.toolbar__mobile .tools-menu__tools-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.toolbar .tools-menu__settings .rows,
.toolbar__mobile .tools-menu__settings .rows {
  display: none;
}
.toolbar .tools-menu__settings h3.title,
.toolbar__mobile .tools-menu__settings h3.title {
  cursor: pointer;
}
.toolbar .tools-menu__settings h3.title:after,
.toolbar__mobile .tools-menu__settings h3.title:after {
  content: '+';
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-left: 10px;
}
.toolbar .tools-menu__settings.open .rows,
.toolbar__mobile .tools-menu__settings.open .rows {
  display: flex;
}
.toolbar .tools-menu__settings.open h3.title:after,
.toolbar__mobile .tools-menu__settings.open h3.title:after {
  content: '-';
}

.wall-panel-body .wall-panel__layer-thickness {
  text-transform: none;
  font-size: 14px;
  align-items: center;
  font-weight: 600;
  color: var(--primary);
}

.comments-panel {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.comments-panel .comment {
  cursor: pointer;
}
.comments-panel .comment:after {
  content: '';
  background-image: url('/assets/icons/icon-right-arrow.svg');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 20px;
  bottom: 15px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
}
.comments-panel__empty {
  text-align: center;
  color: gray;
  padding: 50px 0px;
  font-size: 14px;
}
.comments-panel__title {
  position: absolute;
  top: 0px;
  left: 0px;
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  font-weight: 600;
  background-color: var(--light);
  box-shadow: 0px 0px 10px #0001;
}
.comments-panel__add-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  left: 20px;
  background-color: var(--dark);
  color: var(--light);
  font-size: 14px;
  padding: 15px 30px;
  font-weight: 600;
}
.comments-panel .scroller__content {
  padding: 5px 0px 80px;
}
.comment-thread {
  padding-top: 30px;
  padding-bottom: 30px;
}
.comment-thread__back {
  width: 65px;
  height: 30px;
  background-image: url(/assets/icons/left.svg);
  background-size: 20px 15px;
  background-repeat: no-repeat;
  background-position: center;
}
.comment-thread__replies {
  padding: 0px 10px 10px 10px;
}
.comment-thread__reply {
  border-radius: 10px;
  margin: 0px 0px 10px 20px;
  background-color: #fbfdff;
  border: 1px solid #c3e1ff;
}
.comment-thread__reply-head {
  padding: 20px;
  background-color: #eff7ff;
  border-radius: 10px 10px 0px 0px;
  display: flex;
}
.comment-thread__reply-head-text {
  flex-grow: 1;
}
.comment-thread__reply-user {
  font-weight: 600;
  font-size: 14px;
}
.comment-thread__reply-date {
  color: gray;
  font-size: 11px;
  margin-top: 3px;
}
.comment-thread__reply-text {
  padding: 20px;
  white-space: pre-wrap;
}
.comment-thread__reply-attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.comment-thread__reply-attachments img {
  max-width: 100%;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--lightGrey);
}
.comment-thread__reply-delete {
  height: 25px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.comment-thread__reply-form {
  border: 1px solid var(--lightGrey);
  border-radius: 10px;
  margin: 0px 0px 0px 20px;
}
.comment-thread__reply-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  height: 100px;
  padding: 10px;
}
.comment-thread__reply-form-footer {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  justify-content: space-between;
}
.comment-thread__reply-form-footer input {
  display: none;
}
.comment-thread__reply-form-footer label {
  background-image: url(/assets/icons/clip.svg);
  width: 25%;
  height: 46px;
  display: block;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
}
.comment-thread__reply-form-footer button {
  padding: 15px 30px;
  background-color: var(--primary);
  color: var(--light);
  font-size: 14px;
  font-weight: 600;
  width: 50%;
}
.comment-thread__reply-form-files {
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow: auto;
  max-height: 60px;
}
.comment-thread__reply-form-files img {
  max-width: 100px;
  max-height: 60px;
  border-radius: 10px;
}
.file-uploads {
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow: auto;
  max-height: 130px;
}
.file-uploads__file {
  position: relative;
  min-width: 30px;
  min-height: 100px;
  flex-shrink: 0;
}
.file-uploads__file.error img {
  border-color: var(--warning);
}
.file-uploads__file-rm {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.file-uploads__file-rm:after {
  content: '\2715';
  display: block;
  border-radius: 40px;
  background-color: #0007;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin: 5px;
  font-size: 13px;
  color: white;
}
.file-uploads .progress-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0007;
  border-radius: 10px;
}
.file-uploads .progress-circle svg {
  max-width: 60%;
}
.file-uploads img {
  max-height: 100px;
  border-radius: 10px;
  border: 1px solid var(--lightGrey);
}
.write-comment__form {
  border: 1px solid var(--lightGrey);
  border-radius: 10px;
  margin: 10px;
  margin-top: 40px;
}
.write-comment__form textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  height: 100px;
  padding: 10px;
}
.write-comment__form-footer {
  display: flex;
  padding: 5px 10px;
  align-items: center;
  justify-content: space-between;
}
.write-comment__form-footer input {
  display: none;
}
.write-comment__form-footer label {
  background-image: url(/assets/icons/clip.svg);
  width: 25%;
  height: 46px;
  display: block;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
}
.write-comment__form-footer button {
  padding: 15px 30px;
  background-color: var(--primary);
  color: var(--light);
  font-size: 14px;
  font-weight: 600;
  width: 50%;
}
.comment {
  position: relative;
  margin: 10px;
  background-color: #fbfdff;
  border-radius: 10px;
  border: 1px solid #c3e1ff;
}
.comment__header {
  display: flex;
  align-items: start;
  padding: 20px;
  background-color: #eff7ff;
  border-radius: 10px 10px 0px 0px;
}
.comment__number {
  border-radius: 50px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 31px;
  font-family: Helvetica, sans-serif;
  background-color: #c2e0ff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 500;
}
.comment__header-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  height: 100%;
  gap: 5px;
  margin: 0px 20px;
}
.comment__user-name {
  font-weight: 600;
  font-size: 14px;
}
.comment__date {
  color: gray;
  font-size: 11px;
}
.comment__status {
  border: 1px solid black;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 10px;
  cursor: pointer;
}
.comment__status.open {
  border-color: var(--primary);
  color: var(--primary);
}
.comment__status.resolved {
  border-color: var(--success);
  color: var(--success);
}
.comment__status.draft {
  border-color: var(--secondary);
  color: var(--secondary);
}
.comment__delete-btn {
  height: 25px;
  display: flex;
  align-items: center;
  margin: 0px 10px;
  cursor: pointer;
}
.comment__message {
  font-size: 15px;
  padding: 20px;
  white-space: pre-wrap;
}
.comment__attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}
.comment__attachments img {
  max-width: 100%;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--lightGrey);
}
.comment-attachment-popup {
  background-color: #fffc;
}
.comment-attachment-popup .popup-component__content {
  max-width: 98%;
  max-height: 98%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.comment-attachment-popup .popup-component__content img {
  max-width: 100%;
  max-height: 100%;
}
.comment-attachment-popup .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-image: url(/assets/icons/cross.svg);
  background-position: center;
}

/** @format */
.bom {
  padding: 0px 0px 60px;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
}
.bom__header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 15px;
  color: var(--grey);
}
.bom__tabs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  border-bottom: 1px solid var(--lightGrey);
  margin-bottom: 10px;
  padding: 0px 20px;
}
.bom__tab {
  padding: 19px;
  margin-bottom: -1px;
  color: var(--grey);
  cursor: pointer;
  width: 100px;
  text-align: center;
  border-bottom: 1px solid transparent;
}
.bom__tab.selected {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.bom__tab:hover {
  color: var(--primary);
}
.bom__content {
  padding: 20px 29px 0px 29px;
}
.bom__content.columns {
  column-count: 3;
  column-fill: auto;
  column-width: 480;
  column-gap: 100px;
  height: 580px;
}
.bom__content.pdf > * {
  break-inside: avoid;
  page-break-inside: avoid;
  line-height: calc(13px * 0.8);
}
.bom__section-disclamer {
  font-size: 13px;
  padding: 15px;
  background-color: var(--lightGrey);
  border-radius: 5px;
}
.bom__dropdown__floor-title {
  font-size: 18px;
  font-weight: 300;
  padding: 12px 0px 12px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid var(--lightGrey);
}
.bom__dropdown__floor-title.pdf {
  cursor: default;
  margin: 0px -29px 20px;
}
.bom__dropdown__room-title {
  font-size: 17px;
  font-weight: 500;
  padding: 12px 0px 12px 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  border-bottom: 1px solid var(--lightGrey);
  background-color: #f7f7f7;
}
.bom__dropdown__room-title.pdf {
  cursor: default;
  margin: -20px -29px 20px;
}
.bom__dropdown .svg {
  display: flex;
  width: 13px;
  height: 13px;
  padding: 0px 30px 0px 30px;
  transform: rotate(90deg);
  transition: transform 0.1s linear;
}
.bom__dropdown.open > .bom__dropdown__floor-title .svg,
.bom__dropdown.open > .bom__dropdown__room-title .svg {
  transform: rotate(0deg);
}
.bom__area {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 40px;
}
.bom__single-quantity {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 25px;
}
.bom__title {
  font-size: 14px;
  font-weight: 100;
  text-transform: uppercase;
  color: var(--dark);
}
.bom__content.pdf .bom__title {
  font-size: calc(14px * 0.8);
}
.bom__floor-title {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0px 5px 0px;
  text-transform: uppercase;
  color: var(--dark);
}
.bom__content.pdf .bom__floor-title {
  font-size: calc(14px * 0.8);
}
.bom__category-title {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0px 4px 0px;
  color: var(--dark);
}
.bom__content.pdf .bom__category-title {
  font-size: calc(14px * 0.8);
}
.bom__category-section {
  padding: 0px 0px 0px 10px;
}
.bom__subtitle {
  font-size: 13px;
  color: #777;
  margin-top: 5px;
}
.bom__content.pdf .bom__subtitle {
  font-size: calc(13px * 0.8);
}
.bom__row-group {
  position: relative;
}
.bom__row-group:after {
  position: absolute;
  top: 15px;
  right: 0px;
  content: '-';
  pointer-events: none;
}
.bom__row-group.closed:after {
  content: '+';
}
.bom__row-group.closed .bom__row-group-rows {
  display: none;
}
.bom__row-group-title {
  font-weight: 600;
  padding: 15px 29px;
  margin: 0px -29px;
  cursor: pointer;
  font-size: 15px;
}
.bom__content.pdf .bom__row-group-title {
  font-size: calc(15px * 0.8);
}
.bom__row-group-rows {
  padding: 0px 29px;
  margin: 0px -29px;
  border-top: 1px solid var(--lightGrey);
  border-bottom: 1px solid var(--lightGrey);
}
.bom__row {
  margin: 0px -29px;
  padding: 6px 29px;
  font-size: 13px;
}
.bom__row:nth-child(even) {
  background-color: #f7f7f7;
}
.bom__content.pdf .bom__row {
  font-size: calc(13px * 0.8);
}
.bom__row-content {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.bom__row-tip {
  position: relative;
}
.bom__row-tip .description {
  display: none;
  position: absolute;
  left: 140px;
  top: -12px;
  z-index: 10;
  color: var(--dark);
  width: 200px;
  background-color: var(--light);
  border-radius: 5px;
  box-shadow: 0 3px 24px 0 rgba(48, 48, 49, 0.14);
  padding: 15px;
  font-size: 13px;
  text-transform: none;
  text-align: left;
  line-height: 16px;
}
.bom__row-tip .description .title {
  margin: 4px 0px;
  font-weight: 700;
}
.bom__row-tip .description::after {
  content: '';
  position: absolute;
  border: 10px solid transparent;
  border-right-color: var(--light);
  left: -20px;
  top: 10px;
}
.bom__row-tip:hover .description {
  display: block;
}
.bom__row-subrows {
  font-size: 12px;
  padding-left: 15px;
  margin-top: 5px;
}
.bom__content.pdf .bom__row-subrows {
  font-size: calc(12px * 0.8);
}
.bom__row-subrow {
  margin-bottom: 2px;
}
.bom__row-room {
  text-transform: uppercase;
  color: #9f9f9f;
  font-weight: 500;
  font-size: 10px;
  white-space: nowrap;
}
.bom__content.pdf .bom__row-product {
  font-size: calc(10px * 0.8);
}
.bom__row-name {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}
.bom__row-quantity {
  white-space: nowrap;
  display: flex;
  align-items: center;
  font-family: sans-serif;
  font-size: 14px;
  width: 70px;
  justify-content: end;
  flex-shrink: 0;
}
.bom__content.pdf .bom__row-quantity {
  font-size: calc(14px * 0.8);
}
.bom__row-product {
  font-size: 13px;
}
.bom__content.pdf .bom__row-product {
  font-size: calc(13px * 0.8);
}
.bom__section {
  padding: 10px 0px 20px 0px;
}

/** @format */
.builderheader {
  position: relative;
  height: 68px;
  box-shadow: 0px 0px 10px #0002;
  padding: 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2000;
  background-color: var(--light);
}
.builderheader__dropdown.open .overlay-dropdown__content {
  transform: translateY(0px);
}
.builderheader__dropdown .overlay-dropdown__content {
  display: block;
  position: absolute;
  top: 50px;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  border: 1px solid var(--lightGrey);
  transform: translateY(-300px);
  transition: transform 300ms ease-in-out;
}
.builderheader__dropdown .overlay-dropdown__body {
  display: flex;
  flex-direction: column;
  padding: 30px 40px;
}
.builderheader__dropdown .variant-list {
  display: flex;
  flex-direction: column;
}
.builderheader__dropdown .variant-list__item {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 14px;
  color: var(--dark);
  text-decoration: none;
  padding: 5px 0px;
  cursor: pointer;
}
.builderheader__dropdown .variant-list__item.selected {
  color: var(--primary);
}
.builderheader__dropdown .variant-list__item .svg svg {
  width: 20px;
  height: 20px;
}
.builderheader__dropdown.mobile .variant-list {
  padding-left: 20px;
}
.builderheader__dropdown .app-steps__tab {
  padding: 10px 0px;
  color: var(--dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.builderheader__dropdown .app-steps__tab.selected {
  color: var(--primary);
}
.builderheader__action {
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  padding: 16px 5px;
  width: 30px;
  height: 30px;
  box-sizing: content-box;
  justify-content: center;
  margin: 0px 1px;
  border-radius: 0px;
}
.builderheader__action.enabled .svg svg path {
  fill: var(--success);
}
.builderheader__action.enabled:hover .svg svg path {
  fill: var(--success);
}
.builderheader__action .svg {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builderheader__action .svg.size30 svg {
  width: 30px;
  height: 30px;
}
.builderheader__action .svg svg path {
  fill: var(--darkGrey);
}
.builderheader__action:hover .svg svg path {
  fill: var(--svgHover);
}
.builderheader__action p {
  font-size: 13px;
  color: var(--light);
  font-weight: bold;
}
.builderheader__action.active {
  background-color: var(--darkGrey);
}
.builderheader__action.active .svg svg path {
  fill: var(--light);
}
.builderheader__action.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}
.builderheader__action .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;
}
.builderheader__action:hover .tooltip {
  display: block;
}
.builderheader__left {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--darkGrey);
  text-decoration: none;
  flex: 1 1 0;
  box-sizing: border-box;
  min-width: 70px;
  height: 100%;
}
.builderheader__right {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  flex: 1 1 0;
  padding-right: 10px;
  box-sizing: border-box;
  min-width: 100px;
}
.builderheader__center {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  white-space: nowrap;
}
.builderheader__logo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  cursor: pointer;
  width: 80px;
}
.builderheader__logo div {
  background-image: url('/assets/icons/dashboard.svg');
  background-size: 24px;
  background-position: right;
  width: 40px;
  background-repeat: no-repeat;
  height: 40px;
  padding: 14px 0px;
  box-sizing: border-box;
  flex: 0 1 auto;
}
.builderheader__logo:after {
  content: '';
  visibility: hidden;
  background-image: url('/assets/icons/left.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 17px;
  height: 40px;
  transition: transform 150ms ease-in-out;
}
.builderheader__logo:hover:after {
  transform: translateX(-5px);
}
.builderheader__logo.back-btn:after {
  visibility: visible;
}
.builderheader .app-steps {
  display: flex;
  flex-direction: row;
  height: 100%;
  position: relative;
}
.builderheader .app-steps__content {
  display: flex;
  flex-direction: row;
  height: 100%;
  transition: transform 300ms ease-out;
}
.builderheader .app-steps .dropdown {
  height: 100%;
}
.builderheader .app-steps__subtitle {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builderheader .app-steps__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  color: var(--dark);
  white-space: nowrap;
  position: relative;
  gap: 10px;
}
.builderheader .app-steps__tab.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.builderheader .app-steps__tab.selected {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.builderheader .app-steps__tab.selected .svg path {
  fill: var(--primary);
}
.builderheader .app-steps__tab:hover {
  color: var(--primary);
}
.builderheader .app-steps__tab .svg svg {
  width: 9px;
  height: 9px;
}
.builderheader .app-steps__tab h1 {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.builderheader .app-steps__tab h1 .variant-name {
  font-size: 12px;
}
.builderheader .app-steps__tab h6 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
  display: flex;
  gap: 5px;
  margin-top: 4px;
  color: var(--primary);
  text-transform: uppercase;
}
.builderheader .app-steps__tab h6 .svg svg path {
  fill: var(--primary);
}
.builderheader__plan-btns {
  display: flex;
  align-items: center;
}
.builderheader__plan-btns .separator {
  flex: 0 0 auto;
  width: 2px;
  height: 20px;
  background-color: #e8e8e9;
  margin: 0 10px;
}
.builderheader__nav {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: row;
  flex: 0 1 auto;
  padding-left: 25px;
}
.builderheader__nav > div {
  display: flex;
  align-items: center;
}
.builderheader__nav select {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--dark);
}
.builderheader__nav .percentage {
  border: 1px solid var(--lightGrey);
  border-radius: 4px;
  height: 36px;
  margin-left: 7px;
}
.builderheader__nav .separator {
  flex: 0 0 auto;
  width: 2px;
  height: 20px;
  background-color: #e8e8e9;
  margin: 0 20px;
}
.builderheader__nav__icon + .builderheader__nav__icon {
  margin-left: 15px;
}
.builderheader__nav__icon {
  flex: 0 1 auto;
  cursor: pointer;
}
.builderheader__nav__icon:hover svg path {
  fill: var(--lightPrimary);
}
.builderheader__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;
}
.builderheader__nav .saved-button {
  background-color: green !important;
  border: 2px solid green !important;
}
.builderheader__nav div[class^='loader_'] {
  width: 40px;
}
.builderheader__nav div[class^='loader_'] div[class^='dots_'] {
  transform: scale(0.5);
  transform-origin: 0% 50%;
}
.builderheader .login-btn {
  font-size: 14px;
  padding: 20px 0px 20px 20px;
  cursor: pointer;
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
}
.builderheader .login-btn:hover {
  color: var(--primary);
}
.builderheader .help-btn svg {
  width: 28px;
  height: 28px;
}
.builderheader .reload-btn {
  background: none;
  padding: 10px;
  margin: 0px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builderheader .reload-btn .svg {
  width: 25px;
  height: 25px;
}
.builderheader .reload-btn .svg svg {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.more-menu .overlay-dropdown__overlay {
  z-index: 100000;
}
.more-menu .overlay-dropdown__content {
  top: 70px;
  right: 10px;
  border: 1px solid var(--lightGrey);
  overflow: hidden;
  z-index: 100001;
}
.more-menu.page-main .overlay-dropdown__content {
  min-height: 130px;
}
.more-menu__back {
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 15px 20px;
  top: 0px;
  left: 0px;
  z-index: 100;
  cursor: pointer;
}
.more-menu__back .svg {
  width: 100%;
  height: 100%;
}
.more-menu__back .svg svg {
  width: 100%;
  height: 100%;
}
.more-menu__page-title {
  font-weight: 600;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid var(--lightGrey);
}
.more-menu__pages {
  width: 250px;
  max-width: 92vw;
  transition: width 300ms ease-in-out, height 300ms ease-in-out;
}
.more-menu__page {
  position: absolute;
  left: 0px;
  pointer-events: none;
  opacity: 0;
  width: 250px;
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
  transform: translateX(100%);
  padding: 20px 0px;
  max-width: 92vw;
}
.more-menu__page.main {
  transform: translateX(-100%);
}
.more-menu__page.exports {
  width: 400px;
}
.more-menu__page.share {
  width: 480px;
}
.more-menu__page.current {
  transform: translateX(0px);
  opacity: 1;
  pointer-events: all;
}
.more-menu.page-main .more-menu__back {
  display: none;
}
.more-menu .separator {
  display: block;
  width: 80%;
  margin: 15px 10%;
  height: 2px;
  background-color: var(--lightGrey);
}
.more-menu .dropdown__list-item.plan-name-menu .svg {
  height: 20px;
}
.more-menu .dropdown__list-item.plan-name-menu p {
  max-width: 150px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.more-menu .dropdown__list-item.locked {
  opacity: 0.7;
  position: relative;
}
.more-menu .dropdown__list-item.locked:after {
  content: '';
  position: absolute;
  right: 15px;
  top: 10px;
  width: 15px;
  height: 15px;
  background-image: url('/assets/icons/icon-locked.svg');
  background-size: 15px;
  background-position: right center;
  background-repeat: no-repeat;
}
.more-menu .share-menu {
  display: flex;
  flex-direction: column;
  padding: 0px 0px 10px 0px;
  align-items: stretch;
}
.more-menu .share-menu__link {
  padding: 10px 40px 10px 20px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--lightGrey);
  margin: 20px;
  width: auto;
  border-radius: 5px;
  position: relative;
}
.more-menu .share-menu__link.disabled {
  pointer-events: none;
  user-select: none;
}
.more-menu .share-menu__link.disabled span,
.more-menu .share-menu__link.disabled div {
  opacity: 0.3;
}
.more-menu .share-menu__link span {
  word-break: break-all;
}
.more-menu .share-menu__link .copy-to-clipboard {
  width: 50px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.more-menu .share-menu__link .copy-to-clipboard .svg {
  width: 15px;
  height: 15px;
}
.more-menu .share-menu__text {
  white-space: nowrap;
  font-size: 10px;
  text-transform: uppercase;
}
.more-menu .share-menu__invite-section {
  display: flex;
  width: 100%;
  gap: 10px;
  height: 36px;
  padding: 0px 20px;
  box-sizing: border-box;
}
.more-menu .share-menu__invite-btn {
  flex: 0 0 0;
  background-color: var(--primary);
  color: var(--light);
  font-weight: 600;
  font-size: 12px;
  padding: 10px 30px;
}
.more-menu .share-menu__email-input {
  flex: 1 1 0;
  font-size: 12px;
  padding: 0px 15px;
  border-radius: 5px;
  border: 1px solid var(--lightGrey);
  min-width: 100px;
}
.more-menu .share-menu__email-input.invalid {
  border: 2px solid var(--warning);
}
.more-menu .share-menu__profession-select {
  display: none;
  flex: 1 1 0;
  font-size: 12px;
  max-width: 25%;
  padding: 0px 0px 0px 6px;
}
.more-menu .share-menu .share-table {
  border-collapse: collapse;
  border-spacing: 20px 10px;
  width: 100%;
  font-size: 13px;
  margin: 10px;
}
.more-menu .share-menu .share-table th {
  font-weight: bold;
  text-align: left;
}
.more-menu .share-menu .share-table td {
  position: relative;
  text-align: left;
  font-weight: 100;
}
.more-menu .share-menu .share-table thead th:nth-child(1),
.more-menu .share-menu .share-table tbody td:nth-child(1) {
  width: 45%;
  padding: 6px 0px 6px 20px;
}
.more-menu .share-menu .share-table thead th:nth-child(2),
.more-menu .share-menu .share-table tbody td:nth-child(2) {
  display: none;
  width: 20%;
  padding: 6px 0px;
}
.more-menu .share-menu .share-table thead th:nth-child(3),
.more-menu .share-menu .share-table tbody td:nth-child(3) {
  width: 25%;
  padding: 6px 0px;
}
.more-menu .share-menu .share-table thead th:nth-child(4),
.more-menu .share-menu .share-table tbody td:nth-child(4) {
  width: 10%;
  padding: 6px 20px 6px 0px;
}
.more-menu .share-menu .share-table tbody tr:hover {
  background-color: #f0f0f0;
}
.more-menu .share-menu .share-table__delete {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  right: 0;
}
@media (hover: hover) {
  .more-menu .share-menu .share-table__delete:hover .svg svg path {
    fill: var(--warning);
  }
}
.more-menu .share-menu .share-table tbody tr:hover .share-table__delete {
  visibility: visible;
}
.more-menu .share-menu .multi-select .dropdown__content {
  bottom: calc(100% + 10px);
  top: auto;
  left: auto;
  right: 0px;
}
.more-menu .share-menu .multi-select.open .multi-select__value .svg {
  transform: rotate(180deg);
}
.overlay-dropdown.open .overlay-dropdown__overlay {
  display: block;
}
.overlay-dropdown.open .overlay-dropdown__content {
  display: block;
}
.overlay-dropdown__overlay {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.overlay-dropdown__content {
  display: none;
  position: absolute;
  background-color: var(--light);
  border-radius: 8px;
}
.builderheader__action.save-btn.status-error .svg svg path {
  fill: var(--warning);
}
.builderheader__action.save-btn.status-success .svg svg path {
  animation: save-success 2s;
}
.builderheader__action.save-btn.is-local:after,
.builderheader__action.save-btn.needs-save:after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: grey;
  position: absolute;
  top: 12px;
  left: 29px;
}
.builderheader__action.save-btn.needs-save:after {
  background-color: red;
}
@keyframes save-success {
  0% {
    fill: var(--success);
  }
  100% {
    fill: var(--dark);
  }
}
.plan-name {
  position: relative;
  width: 300px;
}
.plan-name__head {
  display: flex;
  z-index: 1;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-left: 15px;
}
.plan-name__title {
  height: 40px;
  line-height: 40px;
  flex-grow: 1;
  white-space: nowrap;
  max-width: 255px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan-name__title p {
  display: inline;
  cursor: text;
}
.builderheader-popup .popup-component__content {
  width: fit-content;
  padding: 20px;
  height: fit-content;
  gap: 20px;
}
.builderheader-popup .row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.builderheader-popup .row .prop {
  font-size: 16px;
  line-height: 18px;
}
.builderheader-popup .row input {
  border: 1px solid var(--dark);
  border-radius: 4px;
  color: var(--dark);
  padding-left: 15px;
  font-size: 15px;
  line-height: 27px;
  box-sizing: border-box;
}
.builderheader-popup .row h3 {
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}
.builderheader-popup .footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.builderheader-popup .footer button {
  min-width: 130px;
}
body.video-mode .plan-name {
  display: none;
}
body.video-mode .norms-panel {
  display: none !important;
}
body.video-mode #viewer2d-grid {
  display: none;
}
@media (max-width: 1160px) {
  .builderheader__nav {
    display: none;
  }
  .builderheader .plan-picker {
    display: none;
  }
  .builderheader .plan-name {
    display: none;
  }
}
@media (min-width: 650px) {
  .builderheader .app-steps__content {
    transform: translate(0px, 0px) !important;
  }
}
@media (max-width: 650px) {
  .builderheader .tooltip {
    display: none;
  }
  .builderheader .usermenu {
    margin-left: 15px;
  }
  .builderheader__logo {
    width: 70px;
  }
  .builderheader__nav {
    display: none;
  }
  .builderheader .plan-picker {
    display: none;
  }
  .builderheader.plansheader .app-steps {
    justify-content: start;
    overflow: hidden;
  }
  .builderheader.plansheader .builderheader__right {
    min-width: 0px;
    flex: 0 0 40px;
    padding-right: 0px;
  }
  .builderheader.plansheader .builderheader__left {
    flex: 0 0 40px;
    min-width: 40px;
  }
  .builderheader.plansheader .builderheader__center {
    flex: 1 1 240px;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 240px;
  }
}

/** @format */
.editable-select {
  margin: -10px 0px;
}
.editable-text {
  display: inline-block;
  min-height: 14px;
  min-width: 30px;
  cursor: pointer;
  border-radius: 5px;
}
.editable-text.empty {
  background-color: var(--lightGrey);
}
.editable-text.price-value {
  font-family: sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #377ded;
}
.editable-text input {
  margin: -10px 0px;
  z-index: 10;
  position: relative;
}
.price-input {
  position: relative;
}
.price-input__inherit,
.price-input__unknown,
.price-input__included {
  cursor: pointer;
  position: absolute;
  left: -10px;
  top: 16px;
  width: 50px;
  background-color: white;
  border: 1px solid #dfdede;
  padding: 3px 8px;
  border-top-color: #ddd;
  z-index: 10;
  white-space: nowrap;
}
.price-input__inherit:hover,
.price-input__unknown:hover,
.price-input__included:hover {
  background-color: #eee;
}
.price-input__included {
  top: 35px;
}
.price-input__inherit {
  top: 54px;
  border-radius: 0px 0px 5px 5px;
}
.price-input input {
  margin: -10px;
  width: 50px;
  z-index: 10;
  position: relative;
}
.price-input__subtext {
  color: var(--grey);
  font-weight: 500;
}
.price-input__default {
  color: var(--grey);
}
.editable-thumbnail-component {
  position: relative;
  background-color: #dfdfdf;
  cursor: cell;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.editable-thumbnail-component.editing {
  cursor: move;
}
.editable-thumbnail-component.editing canvas {
  border-color: var(--primary);
}
.editable-thumbnail-component canvas {
  display: block;
  border: 2px solid transparent;
  border-radius: 5px;
}
.editable-thumbnail-component__select {
  padding: 10px 20px;
  border: 1px solid var(--dark);
  background-color: var(--light);
  margin-top: 10px;
  font-size: 13px;
}
.select-unit {
  position: relative;
  display: inline-block;
  font-size: 12px;
  margin: 0px 10px;
  color: var(--grey);
  text-transform: none;
}
.select-unit.open .select-unit__options {
  display: block;
}
.select-unit__value {
  cursor: pointer;
}
.select-unit__options {
  display: none;
  position: absolute;
  background-color: var(--light);
  padding: 5px 0px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #0001;
  z-index: 100;
  top: 150%;
}
.select-unit__option {
  padding: 4px 10px;
  cursor: pointer;
}
.select-unit__option:hover {
  background-color: #979797;
  color: white;
}

/** @format */
.multi-select__value {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.multi-select__value .svg {
  width: 10px;
  height: 13px;
  flex-shrink: 0;
}
.multi-select label.checkbox {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  margin-top: 0px !important;
}
.multi-select label.checkbox:hover {
  background-color: #00000008;
}
.multi-select label.checkbox span {
  white-space: nowrap;
  margin: 0px 5px;
}
.multi-select .dropdown__content {
  left: 0px;
  right: auto;
  top: calc(100% + 10px);
  max-height: 40vh;
  overflow: auto;
}

/** @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;
}
#home {
  height: 100%;
  position: relative;
}
#home .home__scroller {
  height: 100%;
  overflow: auto;
  position: relative;
}
#home .hs-chat-btn {
  bottom: 10px;
  right: 10px;
  left: auto;
  margin-left: 0px;
  z-index: 5;
}
@media (max-width: 850px) {
  #home .hs-chat-btn {
    bottom: 105px;
  }
}
#home .projects {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
#home .projects * {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#home .projects__add {
  position: absolute;
  top: 15px;
  right: 20px;
  padding: 10px 20px;
  background-color: var(--primary);
  color: var(--light);
  font-weight: 500;
  text-decoration: none;
  border-radius: 5px;
  line-height: 20px;
  padding: 10px 20px 10px 40px;
  z-index: 20;
}
@media (max-width: 1250px) {
  #home .projects__add {
    top: 80px;
  }
}
#home .projects__add:before {
  content: '+';
  font-size: 38px;
  position: absolute;
  left: 15px;
  top: 10px;
  font-weight: 100;
}
#home .projects__add:hover {
  opacity: 0.8;
}
#home .projects__content {
  width: 90%;
  max-width: 830px;
  padding: 0px 5%;
  padding-bottom: 60px;
}
#home .projects__content hr {
  margin-top: 10px;
  border: none;
  border-bottom: 2px solid #2d2d2d;
  opacity: 0.1;
  margin-bottom: 9px;
}
#home .projects__workspace-bar {
  margin-bottom: 40px;
  margin-top: -34px;
}
#home .projects__workspace-tabs {
  display: flex;
  max-width: 100%;
  flex-direction: row;
  gap: 6px;
  white-space: nowrap;
}
#home .projects__workspace-tabs.measure {
  visibility: hidden;
  overflow: hidden;
}
#home .projects__more-workspaces {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
}
#home .projects__workspace-tab {
  padding: 8px 20px;
  border-radius: 8px;
  display: block;
  text-decoration: none;
}
#home .projects__workspace-tab.selected {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}
#home .projects__workspace-tab .text {
  text-decoration: none;
  font-weight: 600;
  color: var(--dark);
}
#home .projects__workspace-tab .text.selected {
  color: var(--primary);
}
#home .projects__workspace-tab .text:hover {
  color: var(--primary);
}
#home .projects__shared-placeholder {
  padding-top: 25%;
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 30%;
  font-size: 20px;
  gap: 15px;
}
#home .projects__shared-placeholder .svg {
  width: 180px;
}
#home .projects__shared-placeholder .svg svg {
  width: 100%;
  height: 100%;
}
#home .projects__group {
  padding-bottom: 40px;
}
#home .projects__group-title {
  font-weight: 600;
  font-size: 18px;
  color: #2d3446;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
}
#home .projects__group-title button {
  border: 1px solid var(--dark);
  background-color: white;
  padding: 7px 17px;
  font-size: 15px;
}
#home .projects__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, min(50%, 206px));
  grid-gap: 0px;
  justify-content: center;
}
#home .projects__list .programs-card + .programs-card {
  margin-left: 27px;
}
#home .projects__list .programs-card:nth-child(4n + 5) {
  margin-left: 0px;
}
#home .projects__list .programs-card:hover {
  top: -5px;
  background-color: #e8ecee;
  transition: 0.5s all;
}
#home .project-card {
  position: relative;
  width: 206px;
  margin-bottom: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 11px 11px 11px 9px;
  transition: 0.5s all;
  border-radius: 6px;
  top: 0px;
  box-sizing: border-box;
  border: 1px solid transparent;
  max-width: 100%;
  overflow: hidden;
}
@media (hover: hover) {
  #home .project-card:hover,
  #home .project-card.selected {
    background-color: #e8ecee;
  }
  #home .project-card:hover .project-card__delete,
  #home .project-card.selected .project-card__delete {
    display: flex;
  }
}
#home .project-card:active {
  background-color: #e8ecee;
}
#home .project-card.highlighted {
  background-color: #e8ecee;
  border-color: var(--boxShadow);
}
#home .project-card.highlighted .project-card__delete {
  display: flex;
  width: 50px;
  height: 50px;
}
#home .project-card.highlighted .project-card__delete .svg {
  width: 25px;
  height: 25px;
}
#home .project-card.selected {
  border-color: var(--boxShadow);
}
#home .project-card.selected .programs-card__text__name {
  color: var(--primary);
}
#home .project-card.needs-save {
  border-color: var(--boxShadow);
}
#home .project-card.needs-save .project-card__name:after {
  content: '*';
  color: red;
}
#home .project-card__link {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
#home .project-card__delete {
  display: none;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
}
#home .project-card__delete .svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
#home .project-card__delete .svg svg {
  width: 100%;
  height: 100%;
}
@media (hover: hover) {
  #home .project-card__delete:hover .svg svg path {
    fill: var(--warning);
  }
}
#home .project-card__thumbnail {
  background-color: #dcdcdc;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 123px;
  width: 100%;
  border-radius: 7px;
}
#home .project-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
#home .project-card__address {
  font-size: 12px;
  font-weight: 500;
  color: #8c909a;
  margin-top: 8px;
}
#home .project-card__name {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #2d3446;
}
.create-project.create-floor .create-project__panel {
  transform: translateY(490px);
}
.create-project.open .create-project__panel {
  transform: translateY(0px);
}
.create-project.open .create-project__header .close {
  display: flex;
}
.create-project.open .create-project__create-btn {
  cursor: default;
  background-color: var(--light);
  color: var(--dark);
}
.create-project__overlay {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #0007;
  z-index: 6;
  display: none;
}
.create-project__panel {
  position: absolute;
  bottom: 0px;
  width: 400px;
  left: 50%;
  margin-left: -200px;
  display: flex;
  flex-direction: column;
  background-color: var(--light);
  z-index: 10;
  box-shadow: 0px 0px 10px #0002;
  border-radius: 10px 10px 0px 0px;
  transform: translateZ(1px) translateY(280px);
  transition: transform 300ms ease-in-out;
}
@media (max-width: 400px) {
  .create-project__panel {
    width: 100%;
    left: 0px;
    margin-left: 0px;
  }
  .create-project.open .create-project__overlay {
    display: block;
  }
}
.create-project__header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  position: relative;
  padding-bottom: 30px;
}
.create-project__header .close {
  display: none;
  position: absolute;
  top: 0px;
  right: 10px;
  height: 77px;
  width: 50px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.create-project__header .close svg {
  width: 17px;
  height: 17px;
}
.create-project__header h1 {
  padding: 15px;
  font-weight: 600;
  font-size: 16px;
  margin: 0px;
}
.create-project__create-btn {
  padding: 15px 20px;
  background-color: var(--primary);
  border-radius: 5px;
  color: var(--light);
  width: 330px;
  max-width: 100%;
  transition: background-color 100ms linear, color 100ms linear;
  font-weight: 600;
}
.create-project__body {
  padding: 0px 20px 60px 20px;
}
.create-project__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.create-project__button {
  height: 70px;
  border: 1px solid var(--grey);
  border-radius: 5px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  text-decoration: none;
  height: 100px;
  box-sizing: border-box;
}
.create-project__button.capture-unsupported {
  opacity: 0.5;
  cursor: default;
}
.create-project__button .svg svg {
  width: 40px;
  height: 40px;
}
.create-project__button p {
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}
.create-project__button span {
  font-size: 11px;
  color: var(--darkGrey);
}
.side-panel__panel {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0px 0px 10px #0002;
  padding: 20px 30px;
  z-index: 100000;
  background-color: var(--light);
  position: relative;
}
.side-panel__overlay {
  display: none;
  background-color: #0007;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 99999;
  width: 100%;
  height: 100%;
}
.side-panel .close {
  display: none;
  position: absolute;
  top: 50%;
  right: 0px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin-top: -25px;
  align-items: center;
  justify-content: center;
}
.side-panel .close svg {
  width: 17px;
  height: 17px;
}
.side-panel section h1 {
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 30px 0px 10px;
  color: var(--darkGrey);
}
.side-panel__toggle {
  display: none;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 10000;
  top: 0px;
  left: 0px;
  cursor: pointer;
}
.side-panel__toggle svg {
  width: 30px;
  height: 30px;
}
.side-panel__logo {
  background-image: url('/assets/img/logo_small.png');
  width: 170px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 110px;
  background-position: left center;
}
.side-panel__content {
  flex: 1;
  overflow: auto;
  margin: 0px -20px;
  padding: 0px 20px 20px 20px;
}
.side-panel__header {
  position: relative;
}
.side-panel__header:after {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 20px;
  background: linear-gradient(#FFFF, #FFF0);
}
.side-panel__footer {
  position: relative;
}
.side-panel__footer:before {
  content: '';
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 20px;
  background: linear-gradient(#FFF0, #FFFF);
}
.side-panel__list {
  display: flex;
  flex-direction: column;
}
.side-panel__list a {
  cursor: pointer;
  color: var(--dark);
  text-decoration: none;
  padding: 5px 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
}
.side-panel__list a.selected {
  color: var(--primary);
}
.side-panel__list a.selected svg path {
  fill: var(--primary);
}
.side-panel .spacer {
  flex-grow: 1;
}
.side-panel__logout {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  margin-top: 20px;
}
.side-panel__user {
  display: flex;
  height: 50px;
  margin-top: 10px;
  gap: 10px;
  cursor: pointer;
}
.side-panel__user .icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-panel__user .icon svg {
  width: 35px;
  height: 35px;
}
.side-panel__user .settings {
  display: flex;
  align-items: center;
  justify-content: center;
}
.side-panel__user .settings svg {
  width: 27px;
  height: 27px;
}
.side-panel__user-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  min-width: 0;
}
.side-panel__user-info p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}
.side-panel__user-info .name {
  font-size: 14px;
  font-weight: 600;
}
.side-panel__user-info .email {
  font-size: 13px;
  font-weight: 400;
  color: var(--darkGrey);
}
.create-plan-popup .home-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  padding-top: 50px;
  gap: 60px;
}
.create-plan-popup .home-main__draw-plan,
.create-plan-popup .home-main__send-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  box-sizing: border-box;
  width: 616px;
  height: 552px;
  padding: 64px 56px;
  border-radius: 24px;
  text-decoration: none;
  cursor: pointer;
}
.create-plan-popup .home-main__draw-plan:after,
.create-plan-popup .home-main__send-plan:after {
  content: '';
  position: absolute;
  background-image: url('/assets/icons/arrow.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-color: #303031;
  width: 70px;
  height: 70px;
  border-radius: 70px;
  top: 50px;
  right: 50px;
  background-size: 35%;
  transition: transform 150ms linear;
}
.create-plan-popup .home-main__draw-plan:hover:after,
.create-plan-popup .home-main__send-plan:hover:after {
  transform: translateX(10px);
}
.create-plan-popup .home-main__draw-plan img,
.create-plan-popup .home-main__send-plan img {
  margin: 50px auto 0px;
}
.create-plan-popup .home-main__draw-plan {
  background-color: #00c882;
  color: #f7f4f1;
}
.create-plan-popup .home-main__send-plan {
  background-color: #ffffff;
  color: #303031;
}
.create-plan-popup .home-main__draw-plan-price,
.create-plan-popup .home-main__send-plan-price {
  font-weight: 600;
  font-size: 16px;
  line-height: 17px;
  text-transform: uppercase;
}
.create-plan-popup .home-main__draw-plan-title,
.create-plan-popup .home-main__send-plan-title {
  font-weight: 500;
  font-size: 40px;
  line-height: 49px;
}
.add-workspace-popup .popup-component__content {
  width: auto;
  height: auto;
}
.add-workspace-popup form {
  display: flex;
  flex-direction: column;
  padding: 30px;
  gap: 20px;
}
.add-workspace-popup form button {
  background-color: var(--primary);
  color: var(--light);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
}
.add-workspace-popup__form-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.add-workspace-popup__form-input input {
  padding: 10px 20px;
  border-radius: 5px;
  border: 1px solid var(--grey);
  width: 300px;
}
@media (max-width: 1500px) {
  .side-panel__panel {
    position: absolute;
    height: 100%;
    transform: translateX(-280px);
    transition: transform 300ms ease-in-out;
  }
  .side-panel__toggle {
    display: flex;
  }
  .side-panel.open .side-panel__panel {
    transform: translateX(0px);
  }
  .side-panel.open .side-panel__overlay {
    display: block;
  }
  .side-panel .close {
    display: flex;
  }
}

.export-page {
  width: 100%;
  height: 100%;
}
.export-page .main-action {
  z-index: 1000;
}
.export-page .main-action__forward svg {
  width: 20px;
  height: 20px;
}
.export-page .spacer {
  flex-grow: 1;
}
.export-page__selector {
  display: flex;
  gap: 10px;
  align-items: center;
  background-color: var(--light);
  font-size: 11px;
}
.export-page__selector.variants {
  right: 480px;
  width: 140px;
}
.export-page__selector select {
  padding: 5px;
  border: 1px solid var(--lightGrey);
  background-color: var(--light);
  border-radius: 4px;
  cursor: pointer;
  max-width: 100px;
  overflow: hidden;
}
.export-page__download-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  box-shadow: 0px 0px 10px #0001;
  background-color: var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 5px;
  padding: 10px 20px;
  gap: 17px;
  line-height: 10px;
  font-size: 13px;
  font-weight: 500;
}
.export-page__download-btn .svg {
  width: 15px;
  height: 25px;
}
.export-page__download-btn .svg svg {
  width: 100%;
  height: 100%;
}
.export-page__add-page {
  width: 29.7cm;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.export-page__add-page:before,
.export-page__add-page:after {
  content: '';
  display: block;
  border-bottom: 1px solid var(--lightGrey);
  flex-grow: 1;
}
.export-page__add-page button {
  border: 1px solid var(--lightGrey);
  background-color: var(--light);
  color: var(--grey);
  font-size: 13px;
  padding: 5px 20px;
}
.export-page__add-page button:hover {
  border-color: var(--dark);
  color: var(--dark);
}
.export-page__content {
  overflow: auto;
  width: 100%;
  height: 100%;
}
.export-page__document {
  display: flex;
  flex-direction: column;
  padding: 40px;
  margin: 0px auto;
  align-items: start;
  justify-content: center;
  gap: 40px;
  width: calc(29.7cm + 70px);
}
.export-page__document.no-delete .export-page__page-ui button.disable-btn {
  display: none;
}
.export-page__document-page {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 10px #0002;
  background-color: white;
  width: 29.7cm;
  height: 21cm;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
}
.export-page__document-page .powered-by {
  position: absolute;
  bottom: 20px;
  right: 40px;
  width: 70px;
}
.export-page__page-wrapper {
  position: relative;
}
.export-page__page-header {
  display: flex;
  flex-direction: row;
  padding: 30px 40px;
  align-items: center;
}
.export-page__page-header-title h3 {
  font-weight: 600;
  font-size: 24px;
}
.export-page__page-header-title h3:hover {
  background-color: var(--darkerLight);
}
.export-page__page-header-title h4:hover {
  background-color: var(--darkerLight);
}
.export-page__page-header-logo img {
  max-width: 150px;
  max-height: 50px;
}
.export-page__disabled-page {
  display: flex;
  width: 29.7cm;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20px 30px;
  box-shadow: 0px 0px 10px #0001;
  border-radius: 10px;
}
.export-page__disabled-page button {
  background-color: var(--primary);
  color: var(--light);
  padding: 13px 30px;
  font-weight: 600;
}
.export-page__disabled-page.disabled button {
  background-color: var(--lightGrey);
}
.export-page__page-ui {
  position: absolute;
  top: 0px;
  right: -50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0px;
}
.export-page__page-ui button {
  width: 40px;
  height: 40px;
  cursor: pointer;
  padding: 0px;
  background-color: transparent;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}
.export-page__page-ui button.disable-btn {
  background-image: url('/assets/icons/icon-close.svg');
  background-size: 50%;
}
.export-page__page-ui button.locked {
  background-image: url('/assets/icons/icon-locked.svg');
}
.export-page__page-ui button.unlocked {
  background-image: url('/assets/icons/icon-unlocked.svg');
}
.export-page__page-ui button.layout-btn {
  background-image: url('/assets/icons/icon-layout.svg');
}
.export-page .page-cover {
  background-color: #1c283f;
  display: flex;
  align-items: start;
  padding: 80px;
  flex-direction: column;
  justify-content: center;
}
.export-page .page-cover__title {
  font-size: 48px;
  color: var(--light);
  max-width: 50%;
}
.export-page .page-cover__subtitle {
  font-size: 22px;
  color: #9198a2;
  margin-top: 10px;
}
.export-page .page-info {
  padding: 50px 70px;
  display: flex;
  flex-direction: column;
  color: #1c283f;
}
.export-page .page-info .company-info__logo img {
  max-height: 70px;
  max-width: 150px;
}
.export-page .page-info__company-labels {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: start;
}
.export-page .page-info__company-labels img {
  max-height: 100%;
}
.export-page .page-info__desc {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--lightGrey);
  max-width: 60%;
  padding: 30px 0px;
  margin: 50px 0px 30px;
}
.export-page .page-info__desc h6 {
  font-weight: 600;
  font-size: 32px;
  margin-bottom: 30px;
}
.export-page .page-info__desc article {
  font-size: 18px;
  line-height: 25px;
  color: #6a7280;
}
.export-page .page-info__project-info {
  display: flex;
  gap: 20px;
}
.export-page .page-info__project-info .card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
  min-width: 180px;
  padding: 20px 15px;
}
.export-page .page-info__project-info .card h6 {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 10px;
}
.export-page .page-info__project-info .card section {
  font-size: 12px;
  color: #6a7280;
  line-height: 16px;
}
.export-page .page-info__legal {
  color: #9198a2;
  font-size: 10px;
}
.export-page .page-comments #viewer-2d {
  pointer-events: none;
}
.export-page .page-comments__none {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.export-page .page-comments__none__icon svg {
  width: 100px;
  height: 100px;
}
.export-page .page-comments__none__icon svg path {
  fill: var(--boxShadow);
}
.export-page .page-comments__none__title {
  display: flex;
  align-items: center;
  color: var(--grey);
}
.export-page .page-comments__none__title svg {
  width: 22px;
  height: 22px;
}
.export-page .page-comments .comment-plan > div {
  flex-grow: 1;
}
.export-page .page-comments .comment-plan svg {
  width: 100%;
  height: 100%;
}
.export-page .page-comments .plan-selector.floors {
  right: 610px;
}
.export-page .page-comments .comment-card {
  display: flex;
  position: relative;
  padding: 20px;
  border: 1px solid var(--boxShadow);
  border-radius: 6px;
}
.export-page .page-comments .comment-card.small .comment-card__content {
  flex-direction: row;
  flex-wrap: nowrap;
}
.export-page .page-comments .comment-card.small .comment-card__attachments {
  height: 100%;
}
.export-page .page-comments .comment-card__content {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  width: 100%;
  height: 100%;
  gap: 10px;
  flex-direction: column;
}
.export-page .page-comments .comment-card__text {
  font-size: 14px;
  line-height: 18px;
  text-overflow: ellipsis;
}
.export-page .page-comments .comment-card__attachments {
  display: flex;
  gap: 5px;
  flex-grow: 1;
  flex-basis: 50%;
  height: 0;
}
.export-page .page-comments .comment-card__number {
  position: absolute;
  left: -6px;
  top: -10px;
  color: var(--light);
  background-color: var(--dark);
  font-weight: 600;
  border-radius: 13px;
  padding: 5px;
  min-width: 16px;
  height: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.export-page .page-comments .comment-card__remove {
  cursor: pointer;
}
.export-page .page-comments .comment-card__remove svg {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 12px;
  height: 12px;
}
.export-page .page-comments .comment-card__remove:hover svg path {
  fill: var(--grey);
}
.export-page .page-comments .comment-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
}
.export-page .page-assets .asset {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.export-page .page-assets .asset__remove {
  position: absolute;
  right: 8px;
  top: 8px;
  cursor: pointer;
}
.export-page .page-assets .asset__remove svg {
  width: 26px !important;
}
.export-page .page-assets .asset__remove svg path {
  fill: var(--lightGrey);
}
.export-page .page-assets .asset__remove:hover svg path {
  fill: var(--grey);
}
.export-page .page-assets .asset__content {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  align-items: center;
}
.export-page .page-assets .asset img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
.export-page .page-assets .asset svg {
  width: 100px;
}
.export-page .page-assets .asset button {
  padding: 0px 10px;
}
.export-page__table {
  width: 480px;
  border-radius: 10px;
  border: 1px solid #d2d4d8;
  font-size: 14px;
}
.export-page__table-row.highlight-1,
.export-page__table-head {
  background-color: #f5f5f5;
  font-weight: 600;
}
.export-page__table-row.highlight-2 {
  background-color: #f5f5f5;
  font-weight: 800;
}
.export-page__table-head {
  border-radius: 10px 10px 0px 0px;
}
.export-page__table-row {
  border-top: 1px solid #d2d4d8;
}
.export-page__table-head,
.export-page__table-row {
  display: flex;
  padding: 0px 5px;
}
.export-page__table-head:last-child,
.export-page__table-row:last-child {
  border-radius: 0px 0px 10px 10px;
}
.export-page__table-head .cell,
.export-page__table-row .cell {
  padding: 10px;
  white-space: nowrap;
}
.export-page .page-plan-3d {
  display: flex;
  flex-direction: column;
}
.export-page .page-plan-3d__content {
  flex-grow: 1;
  position: relative;
}
.export-page .page-plan-3d__content .cloak-overlay {
  display: none;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 1000;
}
.export-page .page-plan-3d__content.locked .cloak-overlay {
  display: block;
}
.export-page .page-plan-3d__content.locked .page-plan-hud {
  display: none;
}
.export-page .page-plan-3d__content #viewer-3d {
  width: 100%;
  height: 100%;
}
.export-page .page-plan-hud {
  position: absolute;
  bottom: 0px;
  right: 30px;
  z-index: 100;
}
.export-page .mode-switch {
  background-color: var(--light);
  box-shadow: 0 2px 12px 0 #dbdbdd;
}
.export-page .plan-selector {
  position: absolute;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  bottom: 0px;
  right: 300px;
  background-color: var(--light);
  border-radius: 4px 4px 0 0;
  padding: 10px 20px;
  box-shadow: 0 2px 12px 0 #dbdbdd;
  font-size: 11px;
}
.export-page .plan-selector.variants {
  right: 780px;
  width: 140px;
}
.export-page .plan-selector.scope {
  right: 600px;
}
.export-page .plan-selector select {
  padding: 5px;
  border: 1px solid var(--lightGrey);
  background-color: var(--light);
  border-radius: 4px;
  cursor: pointer;
  max-width: 100px;
  overflow: hidden;
}
.export-page .page-plan-2d {
  display: flex;
  flex-direction: column;
}
.export-page .page-plan-2d__content {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}
.export-page .page-plan-2d__content #viewer-2d {
  width: 100%;
  height: 100%;
}
.export-page .page-plan-2d__content.locked #viewer-2d {
  pointer-events: none;
}
.export-page .page-plan-2d__content.locked .page-plan-hud {
  display: none;
}
.export-page .page-areas {
  display: flex;
  flex-direction: column;
}
.export-page .page-areas__content {
  flex-grow: 1;
  display: flex;
  padding: 20px 50px;
  align-items: start;
  gap: 40px;
}
.export-page .page-quantities {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.export-page .page-quantities__room {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}
.export-page .page-quantities__content-half-page {
  padding: 0px 40px;
  width: 400px;
}
.export-page .page-quantities__content-full-page {
  padding: 0px 40px;
}
.export-page .page-closing {
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-page .page-closing .company-info__address {
  font-size: 16px;
  line-height: 20px;
}
.export-page .page-closing .company-info__address h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}
.export-page .company-info {
  display: flex;
  gap: 30px;
}
.export-page .company-info__logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-page .company-info__logo img {
  max-height: 90px;
  max-width: 150px;
}
.export-page .company-info__address {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 16px;
}
.export-page .company-info__address span {
  display: block;
}
.export-page__subscribe {
  height: 100%;
}
.export-page__subscribe .add-page-popup__content .subscribe__text p {
  font-size: 20px;
  white-space: nowrap;
}
.export-page__subscribe .add-page-popup__content .subscribe__image {
  display: none;
}
.export-page__subscribe .add-page-popup__content .view-pricing {
  display: none;
}
.export-page .layouts,
.export-page-popup .layouts,
.layout-choices .layouts {
  display: flex;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  padding: 20px;
}
.export-page .layouts .layout__group,
.export-page-popup .layouts .layout__group,
.layout-choices .layouts .layout__group {
  display: flex;
  flex-grow: 1;
  flex-basis: 50%;
  gap: 20px;
}
.export-page .layouts .layout__group.horizontal,
.export-page-popup .layouts .layout__group.horizontal,
.layout-choices .layouts .layout__group.horizontal {
  flex-direction: row;
}
.export-page .layouts .layout__group.vertical,
.export-page-popup .layouts .layout__group.vertical,
.layout-choices .layouts .layout__group.vertical {
  flex-direction: column;
}
.export-page .layouts .layout__group.vertical > .layout__item,
.export-page-popup .layouts .layout__group.vertical > .layout__item,
.layout-choices .layouts .layout__group.vertical > .layout__item {
  height: 0;
}
.export-page .layouts .layout__item,
.export-page-popup .layouts .layout__item,
.layout-choices .layouts .layout__item {
  flex-grow: 1;
  flex-basis: 50%;
  position: relative;
}
.export-page .layouts .layout__item.centerize,
.export-page-popup .layouts .layout__item.centerize,
.layout-choices .layouts .layout__item.centerize {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.export-page .layouts .placeholder-asset,
.export-page-popup .layouts .placeholder-asset,
.layout-choices .layouts .placeholder-asset {
  border: 3px solid var(--dark);
  border-radius: 6px;
}
.layout-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  margin: 20px 40px;
}
.layout-choices .layouts {
  padding: 0;
}
.layout-choices .layouts .layout__group,
.layout-choices .layouts .layout__group {
  gap: 10px;
}
.layout-choices__example {
  cursor: pointer;
  width: 300px;
  height: 180px;
}
.layout-choices__example:hover .placeholder-asset,
.layout-choices__example.selected .placeholder-asset,
.layout-choices__example:hover .placeholder-comment,
.layout-choices__example.selected .placeholder-comment,
.layout-choices__example:hover .placeholder-plan,
.layout-choices__example.selected .placeholder-plan {
  border-color: var(--primary);
}
.layout-choices__example .layout__item {
  padding: 3px;
}
.layout-choices__example .placeholder-asset {
  height: 100%;
  box-sizing: border-box;
  margin: 0;
}
.layout-choices .placeholder-comment {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid var(--grey);
}
.layout-choices .placeholder-plan {
  border: 1px solid transparent;
  background-image: url(/assets/icons/icon-plan.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  width: 100%;
  height: 100px;
  background-color: var(--lightGrey);
  border-radius: 6px;
}
.export-page-popup h3 {
  margin-top: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.export-page-popup .popup-component__content {
  height: unset;
}
.export-page-popup .asset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 20px;
  overflow: auto;
}
.export-page-popup .asset-grid img {
  border-radius: 5px;
  width: 45%;
  object-fit: contain;
  flex: 0 1 40%;
  cursor: pointer;
}
.export-page-popup .asset-grid img:hover {
  opacity: 0.8;
}
.add-page-popup .popup-component__content {
  position: relative;
  display: block;
  max-width: 100%;
  width: 800px;
  max-height: 100%;
}
.add-page-popup__close {
  position: absolute;
  top: 15px;
  right: 25px;
  width: 30px;
  height: 30px;
  background-image: url('/assets/icons/icon-close.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  cursor: pointer;
}
.add-page-popup__content {
  display: block;
  padding: 40px;
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.add-page-popup__content .subscribe {
  height: auto;
  padding: 30px;
}
.add-page-popup__content .subscribe__image {
  margin: 0px;
}
.add-page-popup__content .subscribe__text {
  padding: 10px;
}
.add-page-popup__content .subscribe__text p {
  font-size: 28px;
}
.add-page-popup__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.add-page-popup__pages.disabled {
  opacity: 0.5;
}
.add-page-popup__pages.disabled .add-page-popup__page-type:hover {
  background-color: transparent;
  cursor: default;
}
.add-page-popup__page-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  transition: background-color 100ms linear;
}
.add-page-popup__page-type .thumbnail {
  width: 283px;
  height: 200px;
  border-radius: 5px;
  background-color: var(--lightGrey);
  border: 1px solid var(--lightGrey);
}
.add-page-popup__page-type:hover {
  background-color: #dae6f9;
}
@media (max-width: 650px) {
  .add-page-popup .popup-component__content {
    height: 100%;
  }
  .export-page__add-page {
    display: none;
  }
  .export-page__page-ui {
    display: none;
  }
  .export-page__page-ui-top {
    display: none;
  }
  .export-page__document {
    width: 29.7cm;
  }
}

/** @format */
[data-editable] {
  white-space: pre-wrap;
}

/** @format */
.import-page {
  width: 100%;
  height: 100%;
}
.import-page__header {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  box-shadow: 0px 0px 10px #0001;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  z-index: 1000;
}
.import-page__footer {
  position: absolute;
  bottom: 60px;
  left: 50%;
  width: 420px;
  translate: -50%;
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  border: 1px solid var(--lightGrey);
  border-radius: 8px;
  gap: 10px;
  background-color: var(--light);
  box-sizing: border-box;
  max-width: 95%;
}
.import-page__footer-checkbox {
  margin-bottom: 5px;
}
.import-page__footer-checkbox input {
  vertical-align: middle;
  margin-right: 5px;
  cursor: pointer;
}
.import-page__footer-checkbox label {
  font-size: 13px;
  cursor: pointer;
}
.import-page.is-new .import-page__header {
  top: auto;
  bottom: 0px;
  width: auto;
  background: transparent;
  box-shadow: none;
}
.import-page.is-new .import-page__header .usermenu {
  margin-left: 0px;
}
.import-page.is-new .import-page__header .usermenu__dropdown {
  top: auto;
  right: auto;
  left: 0px;
  bottom: 120%;
}
.import-page.is-new .import-page__title {
  display: none;
}
.import-page__title {
  display: flex;
  gap: 10px;
  align-items: center;
}
.import-page__title .svg {
  cursor: pointer;
}
.import-page__title .svg:hover path {
  fill: var(--darkGrey);
}
.import-page__title .dropdown__back .svg {
  padding: 10px;
}
.import-page__title .dropdown__back .svg svg {
  width: 18px;
  height: 15px;
}
.import-page .body {
  position: absolute;
  top: 68px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.import-page .viewer {
  width: 100%;
  height: 100%;
}
.import-page .viewer .norms-panel {
  display: none;
}
.import-page__error {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}
.import-page__save {
  color: var(--light);
  display: flex;
  justify-content: flex-start;
  background-color: var(--dark);
  text-align: center;
  align-items: center;
  padding: 15px 20px;
  border-radius: 50px;
  font-weight: 600;
}
.import-page__save p {
  margin: auto;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}
.import-page__save .svg {
  max-height: unset;
  width: unset;
}
.import-success {
  display: flex;
  height: 100%;
}
.import-success__left {
  max-width: 50%;
  box-sizing: border-box;
  padding: 4%;
  background-color: var(--success);
  color: white;
  font-weight: 600;
  width: 600px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
.import-success__left .svg {
  margin-bottom: 30px;
}
.import-success__left h1 {
  font-size: 30px;
  margin: 0px 0px 25px 0px;
  width: 90%;
}
.import-success__left p {
  font-size: 17px;
  width: 500px;
  max-width: 90%;
}
.import-success__left a {
  background-color: var(--light);
  color: var(--success);
  text-decoration: none;
  padding: 15px 20px;
  border-radius: 5px;
  display: block;
  margin-top: 90px;
  margin-bottom: 10px;
  text-align: center;
}
.import-success__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  padding: 40px 10px;
}
.import-success__right h1 {
  text-align: center;
  font-size: 30px;
  margin: 0px 0px 25px 0px;
  width: 90%;
}
.import-success__right p {
  font-size: 17px;
  max-width: 560px;
  text-align: center;
  margin-bottom: 20px;
  width: 90%;
}
.import-success__right p span {
  display: block;
}
.import-success__right p .link {
  color: var(--success);
  margin: 10px;
  font-size: 20px;
}
.import-success__right a {
  color: var(--primary);
  text-decoration: none;
}
@media (max-aspect-ratio: 1/1) {
  .import-success {
    flex-direction: column;
    width: 100%;
  }
  .import-success__left {
    width: 100%;
    max-width: 100%;
    align-items: center;
    height: 40%;
  }
  .import-success__left h1 {
    text-align: center;
  }
  .import-success__left p {
    text-align: center;
  }
  .import-success__left a {
    margin-top: 40px;
  }
  .import-success__right {
    justify-content: start;
  }
}

/** @format */
.captureview {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}
.captureview__hud {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.captureview__hud-menus {
  position: fixed;
  bottom: 190px;
  left: 50%;
  flex-direction: column;
  padding: 20px 30px;
  border: 1px solid var(--lightGrey);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  background-color: var(--light);
  box-sizing: border-box;
  width: 420px;
  translate: -50%;
  max-width: 95%;
}
.captureview__total-surface {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.captureview__total-surface .surface {
  font-family: sans-serif;
  color: var(--primary);
  font-weight: 600;
}
.captureview__include-holes {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.captureview__toggle {
  cursor: pointer;
}
.captureview__toggle svg {
  width: 12px;
  height: 12px;
  padding: 2px;
  border-radius: 3px;
  border: 1px transparent;
}
.captureview__toggle.none svg {
  border: 1px solid grey;
}
.captureview__toggle.some svg {
  border: 1px solid grey;
}
.captureview__toggle.all svg {
  border: 1px solid transparent;
  background-color: var(--primary);
}
.captureview__toggle.all svg path {
  fill: white;
}
.nocapture {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.nocapture__content {
  height: auto;
  max-width: 500px;
}
.nocapture__content > p {
  color: var(--lightPrimary);
  font-size: 32px;
  text-align: center;
  margin-bottom: 30px;
  text-transform: uppercase;
  font-weight: 500;
}
.nocapture__content button {
  width: 100%;
}
#capture3d {
  width: 100%;
  height: 100%;
}

.visuaryapp .norms-config .actions {
  z-index: 7;
}
.visuaryapp .norms-config .right-panel {
  top: 65px;
}
.norms__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.norms__content {
  overflow-y: auto;
  flex-grow: 1;
}
.norms__head {
  display: flex;
  gap: 20px;
  padding: 30px 5%;
  border-bottom: 1px solid #e8e8e9;
}
.norms__head button {
  background-color: var(--primary);
  color: var(--light);
  font-size: 16px;
  font-weight: 600;
  padding: 11px 30px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.norms__head button:hover {
  opacity: 0.8;
}
.norms__disabled .norms-config .table {
  pointer-events: none;
  opacity: 0.6;
}

/** @format */
.norms-config {
  overflow-y: auto;
  padding: 0px 5%;
  padding-top: 25px;
}
.norms-config .right-panel.open {
  width: 45%;
  min-width: 400px;
}
.norms-config textarea {
  width: 100%;
  resize: vertical;
  font-size: 14px;
  font-weight: 400;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid var(--grey);
}
.norms-config input {
  border-radius: 5px;
  border: 1px solid var(--grey);
  padding: 5px;
}
.norms-config .actions {
  display: flex;
  gap: 20px;
  position: fixed;
  top: 80px;
  right: 28px;
  z-index: 100;
}
.norms-config .actions button {
  background-color: var(--primary);
  color: var(--light);
  font-size: 16px;
  font-weight: 600;
  padding: 11px 30px;
  border-radius: 5px;
  cursor: pointer;
}
.norms-config .actions button:hover {
  opacity: 0.8;
}
.norms-config .actions .save-btn.needs-save:after {
  content: '';
  position: absolute;
  display: block;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background-color: red;
}
.norms-config .drawer {
  max-width: 1200px;
  margin: 0px auto;
}
.norms-config .table__row {
  cursor: pointer;
}
.norms-config .table__row.selected {
  background-color: #e1e1e1;
}
.norms-config .table__row.disabled {
  opacity: 0.5;
}
.norms-config .table__row.needs-save .description:after {
  content: '';
  margin-left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background-color: red;
}
.norms-config .table__row .actions_btns {
  visibility: hidden;
}
.norms-config .table__row:hover .actions_btns {
  visibility: visible;
}
.norms-config .table__row.creator,
.norms-config .table__row.promoter,
.norms-config .table__row.editor {
  color: var(--darkGrey);
}
.norms-config .table__column.enabled {
  max-width: 70px;
  padding: 0px;
  justify-content: center;
}
.norms-config .table__column.enabled input {
  accent-color: #8c8c8c;
}
.norms-config .table__column.description {
  flex-basis: 40%;
  padding: 0px 20px 0px 0px;
}
.norms-config .table__column.description span {
  text-align: start;
  line-height: 16px;
}
.norms-config .table__column.creator,
.norms-config .table__column.promoter,
.norms-config .table__column.editor {
  justify-content: center;
}
.norms-config .table__column.actions_btns {
  border: none;
}
.norms-config .table__column.actions_btns svg {
  width: 12px;
}
.norms-config .table__column.actions_btns .action-btns {
  display: flex;
  flex-wrap: nowrap;
  width: 100px;
}
.norms-config .table__column.actions_btns .table__column-name {
  width: 100px;
}
.norms-config .import-norms {
  flex-direction: column;
}
.norms-config .import-norms__title {
  font-weight: 600;
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.norms-config .norm-rule {
  padding: 20px 40px;
  border-radius: 4px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
.norms-config .norm-rule.closed {
  display: flex;
  gap: 20px;
  align-content: center;
  cursor: pointer;
}
.norms-config .norm-rule.closed:not(:hover) .btns {
  opacity: 0;
}
.norms-config .norm-rule.disabled {
  opacity: 0.5;
}
.norms-config .norm-rule__content {
  flex-grow: 1;
}
.norms-config .norm-rule .icon {
  align-self: center;
}
.norms-config .norm-rule .icon svg {
  fill: var(--warning);
}
.norms-config .norm-rule .label {
  align-self: flex-start;
  flex-basis: 80%;
}
.norms-config .norm-rule .label__description {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}
.norms-config .norm-rule .label__id {
  font-size: 11px;
  font-weight: 500;
  color: var(--darkGrey);
}
.norms-config .norm-rule .btns {
  margin-left: auto;
  display: flex;
  position: absolute;
  right: 20px;
  top: 5px;
}
.norms-config .norm-rule .btns__edit {
  width: 50px;
}
.norms-config .norm-rule .btns__disabled {
  margin-right: 1ch;
}
.norms-config .norm-rule .btns button {
  background-color: transparent;
  padding: 10px;
}
.norms-config .norm-rule .btns button svg {
  width: 23px;
  height: 23px;
}
.norms-config .norm-rule .btns svg path {
  fill: var(--darkGrey);
}
.norms-config .norm-rule .btns svg:hover path {
  fill: var(--primary);
}
.norms-config .norm-rule__options {
  padding: 20px 50px;
  margin: 0px -50px 20px;
  box-shadow: inset 0px 0px 10px #0001;
  display: flex;
  gap: 50px;
}
.norms-config .norm-rule__options-title {
  font-size: 13px;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--grey);
}
.norms-config .norm-rule__options-body {
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.norms-config .norm-rule__options .opt__title {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}
.norms-config .norm-rule__options .opt__description {
  font-size: 12px;
  color: var(--grey);
  margin-right: 20px;
}
.norms-config .norm-rule__validator {
  padding-bottom: 10px;
}
.norms-config .norm-rule__validator-head {
  display: flex;
  align-items: center;
}
.norms-config .norm-rule__validator-head p {
  font-size: 14px;
  margin-right: 10px;
  text-transform: uppercase;
}
.norms-config .norm-rule__validator-head select {
  max-width: 340px;
}
.norms-config .norm-rule .params {
  margin: 10px 0px;
}
.norms-config .norm-rule .params__description {
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 30px;
}
.norms-config .norm-rule .params__condition {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}
.norms-config .norm-rule .visibility-row {
  display: flex;
  width: 250px;
  justify-content: space-between;
  margin-bottom: 26px;
}
.norms-config .norm-rule .visibility-row > p {
  font-size: 13px;
  font-weight: 500;
  color: #2d3446;
}
.norms-config .norm-rule .row {
  margin-bottom: 10px;
  display: flex;
  justify-content: start;
}
.norms-config .norm-rule .row.id span:hover,
.norms-config .norm-rule .row.group span:hover,
.norms-config .norm-rule .row.description span:hover {
  color: var(--primary);
}
.norms-config .norm-rule .row.description p {
  font-weight: 600;
  font-size: 18px;
  width: 100%;
}
.norms-config .norm-rule .row.description p input {
  margin: -10px -5px;
  width: 100%;
}
.norms-config .norm-rule .row > p {
  font-size: 13px;
  font-weight: 500;
  color: #2d3446;
  margin-bottom: 10px;
  padding-right: 10px;
}
.norms-config .norm-rule .subrow {
  flex-direction: column;
  margin-bottom: 15px;
  display: flex;
}
.norms-config .norm-rule .subrow input {
  align-self: baseline;
}
.norms-config .norm-rule .param__text {
  width: 100%;
}
.norms-config .norm-rule .param__subtext {
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 10px;
  margin-top: 5px;
}
.norms-config .norm-rule .selector {
  margin-left: 25px;
  flex-wrap: wrap;
}
.norms-config .norm-rule .second__title {
  font-weight: 600;
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.norms-config .arrow {
  width: 16px;
}
.norms-config .flip {
  transform: rotate(180deg);
}
.norms-config .selector.room_selector .selector__item {
  background-color: var(--secondary);
}
.norms-config .selector.item_selector .selector__item {
  background-color: var(--primary);
}
.norms-config .norm-rule-actions {
  display: flex;
  gap: 4px;
}

/** @format */
.drawer {
  margin: 10px 0px;
  border-radius: 5px;
  box-shadow: 0px 2px 12px rgba(28, 40, 63, 0.05);
}
.drawer.closed .drawer__head .svg {
  transform: rotate(90deg);
}
.drawer.closed .drawer__body {
  overflow: hidden;
  max-height: 0px;
}
.drawer__head {
  height: 45px;
  line-height: 35px;
  padding: 0px 20px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
}
.drawer__head .svg {
  display: flex;
  width: 8px;
  height: 8px;
  transform: rotate(0deg);
  transition: transform 0.1s linear;
  margin-left: 10px;
}
.drawer__body {
  max-height: none;
  box-sizing: border-box;
}
.section__head {
  font-size: 17px;
  font-weight: 500;
  padding: 30px 0px 20px 0px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.section__head .svg {
  display: flex;
  width: 10px;
  height: 10px;
  transform: rotate(0deg);
  transition: transform 0.1s linear;
}
.section__body {
  display: block;
}
.section.closed .section__head .svg {
  transform: rotate(90deg);
}
.section.closed .section__body {
  display: none;
}
.right-panel {
  position: fixed;
  top: 137px;
  right: -600px;
  width: 600px;
  bottom: 0px;
  background-color: white;
  z-index: 8;
  border-left: 1px solid var(--lightGrey);
  transition: transform 500ms;
  transform: translateX(0px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.right-panel.open {
  transform: translateX(-600px);
}
.right-panel__close {
  position: absolute;
  top: 11px;
  left: 6px;
  font-size: 25px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 100;
  text-align: center;
}
.right-panel__close:after {
  content: '\00D7';
}
.right-panel__close:hover {
  color: var(--primary);
}
.right-panel__content {
  overflow: auto;
}

/** @format */
.jsoneditor button {
  width: 100%;
  border: var(--primary) 2px solid;
  color: var(--primary);
  font-weight: 600;
  background-color: transparent;
}
.jsoneditor textarea {
  font-family: monospace;
  height: 500px;
  font-size: 12px;
}
.jsoneditor__error {
  margin-top: 5px;
  font-size: 14px;
  color: red;
}

.table {
  padding-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.table__head {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  font-weight: 600;
  color: #9ca6af;
  height: 40px;
}
.table__head .table__column .asc .svg {
  transform: rotateZ(90deg);
}
.table__head .table__column .desc .svg {
  transform: rotateZ(-90deg);
}
.table__column {
  display: flex;
  font-size: 13px;
  align-items: center;
  flex: 1 1 0;
  padding: 0px 20px;
}
.table__column.active {
  color: var(--primary);
}
.table__column.active .svg svg path {
  fill: var(--primary);
}
.table__column-name {
  position: relative;
}
.table__column-name .svg {
  position: absolute;
  right: -15px;
  top: 0;
  cursor: pointer;
}
.table__column-name .svg svg path {
  fill: var(--grey);
}
.table__column-name .svg:hover svg path {
  fill: var(--primary);
}
.table__rows {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.table__row {
  display: flex;
  flex-direction: row;
  min-height: 33px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 1px 0px;
}
.table__row:hover {
  background-color: var(--lightGrey);
}
.table__row:hover .ellipsis {
  background-color: var(--lightGrey);
}
.table__row:hover .buyer.small {
  display: block;
}
.table__row:hover .edit-buyer {
  display: block;
}
.table__row .table__column {
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 12px;
  color: var(--dark);
  text-align: center;
  border-left: 1px solid #eee;
}
.table .table__row + .table__row {
  margin-top: 1px;
}

/** @format */
.catalog-selector {
  padding: 40px 40px 20px 40px;
  margin: 0px auto;
  width: 85%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.catalog-selector__catalog {
  position: relative;
  display: flex;
  flex: 1 1 380px;
  max-width: 380px;
  height: 80px;
  border-radius: 5px;
  border: 2px solid var(--lightGrey);
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: 10px;
}
.catalog-selector__catalog.enabled {
  border-color: var(--primary);
}
.catalog-selector__catalog.enabled .catalog-selector__catalog-categories {
  display: block;
}
.catalog-selector__catalog.enabled .catalog-selector__catalog-checkbox {
  border-color: var(--primary);
}
.catalog-selector__catalog.enabled .catalog-selector__catalog-checkbox:after {
  content: '\2713';
}
.catalog-selector__catalog-logo {
  height: 64px;
  width: 64px;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 5px;
}
.catalog-selector__catalog-categories {
  display: none;
  color: var(--grey);
  font-size: 13px;
  margin-top: 3px;
  cursor: pointer;
}
.catalog-selector__catalog-categories-label {
  max-width: 240px;
  line-height: 16px;
}
.catalog-selector__catalog-categories-label span.category {
  background-color: var(--lightGrey);
  border-radius: 3px;
  padding: 2px 4px;
  margin: 0px 2px;
}
.catalog-selector__catalog-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--lightGrey);
  border-radius: 4px;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -10px;
  text-align: center;
  line-height: 20px;
  color: var(--primary);
  font-size: 26px;
  cursor: pointer;
}
.pick-categories-popup .pick-categories-popup__content_ {
  padding: 0px;
  padding-top: 30px;
}
.pick-categories-popup .pick-categories-popup__cross_ {
  z-index: 10;
}
.pick-categories-popup .select-category__header {
  padding: 10px 40px 20px 40px;
}
.pick-categories-popup .select-category__list {
  padding: 10px 40px;
  border-bottom: 1px solid var(--lightGrey);
}
#main.visuaryapp .products-page {
  height: 100%;
}
#main.visuaryapp .products-page__using-external {
  text-align: center;
  padding: 200px 60px;
}
#main.visuaryapp .products-page__body {
  padding-top: 0px;
}
#main.visuaryapp .products-page__head {
  position: relative;
  top: auto;
  right: auto;
  margin: 0px auto;
  width: 85%;
  max-width: 1200px;
  padding: 40px 40px 20px 40px;
  align-items: center;
  justify-content: space-between;
  z-index: 0;
}
@media (max-width: 650px) {
  #main.visuaryapp .products-page__head {
    padding: 40px 0px 20px 0px;
  }
  .catalog-selector {
    padding: 40px 0px 20px 0px;
  }
}

/** @format */
.models-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 200000;
  display: flex;
  flex-direction: column;
}
.models-popup.loading .models-popup__header {
  opacity: 0.8;
  pointer-events: none;
}
.models-popup__content {
  width: 100%;
  height: 0px;
  flex-grow: 1;
  display: flex;
}
.models-popup__content .select-category {
  flex: 0 0 auto;
  width: 230px;
  height: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--lightGrey);
}
.models-popup__content .select-category__header {
  padding: 10px 20px;
}
.models-popup__content .select-category__list {
  max-height: none;
}
.models-popup__content .models-list {
  overflow: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.models-popup__content .models-list__content {
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.models-popup__content .models-list .product-card-comp {
  cursor: pointer;
}
.models-popup__content .models-list .product-card-comp.selected {
  border-color: var(--primary);
}
.models-popup__content .models-list .product-card-comp.selected .product-card-comp__name {
  color: var(--primary);
}
.models-popup__header {
  height: 40px;
  padding: 10px 15px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  background-color: white;
  align-items: center;
  border-bottom: 1px solid var(--lightGrey);
  flex: 0 0 auto;
}
.models-popup__footer {
  border-top: 1px solid var(--lightGrey);
  height: 50px;
  display: flex;
  justify-content: center;
  gap: 20px;
  align-items: center;
}
.models-popup__cancel-btn {
  border: 1px solid var(--lightGrey);
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
}
.models-popup__cancel-btn:hover {
  border-color: var(--boxShadow);
}
.models-popup__done-btn {
  background-color: var(--primary);
  color: white;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
}
.models-popup__done-btn:hover {
  opacity: 0.8;
}
.models-popup__close-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 50px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
.models-popup__close-btn:after {
  content: '\00d7';
}
.models-popup__tab {
  padding: 20px 50px;
  position: relative;
  cursor: pointer;
  font-size: 15px;
}
.models-popup__tab.selected {
  font-weight: 500;
  color: var(--primary);
}
.models-popup__tab.selected:after {
  content: '';
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
}
.models-popup__tab:hover {
  color: var(--primary);
}
.models-popup .generator-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  overflow-y: auto;
}
.models-popup .generator-panel .row {
  display: flex;
  flex-direction: row;
  padding: 10px 0px;
  align-items: center;
}
.models-popup .generator-panel .choice-input {
  display: inline-block;
  width: fit-content;
}
.models-popup .generator-panel .material-input .choice-input__item {
  display: flex;
  align-items: center;
}
.models-popup .generator-panel .material-input .colour-input {
  margin-left: 10px;
  width: 100px;
}
.models-popup .generator-panel .railingType .choice-input__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.models-popup .generator-panel .railingType .choice-input__item p {
  text-align: center;
  font-size: 10px;
}
.models-popup .generator-panel .railingType .choice-input__item p.none {
  margin: auto;
}
.models-popup .generator-panel select {
  cursor: pointer;
  margin-left: 10px;
  border: 1px solid var(--lightGrey);
  background-color: white;
  border-radius: 5px;
  padding: 5px;
  font-size: 13px;
}
.models-popup .generator-panel select:hover {
  border-color: var(--boxShadow);
}
.models-popup .generator-panel .checkmark:hover {
  border-color: var(--boxShadow);
}
.models-popup .generator-panel input {
  box-sizing: border-box;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 13px;
}
.models-popup .generator-panel input[type='range'] {
  padding: 0px;
  width: 200px;
}
.models-popup .generator-panel input[type='color'] {
  cursor: pointer;
  padding: unset;
}
.models-popup .generator-panel span.label {
  width: 20%;
}
.models-popup .generator-panel span.postfix {
  margin-left: 10px;
}
.models-popup .generator-panel span {
  font-size: 13px;
  margin-bottom: 5px;
  font-weight: 600;
}
.models-popup .choice-input__content {
  display: flex;
  border-radius: 4px;
  background-color: var(--lightGrey);
}
.models-popup .choice-input__item:hover {
  background-color: var(--boxShadow);
}
.models-popup .choice-input__item.selected {
  background-color: var(--light);
}
.models-popup .choice-input__item {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  margin: 1px;
  font-size: 14px;
  font-weight: 400;
  font-family: monospace;
}
.products-page {
  position: relative;
  height: calc(100% - 69px);
}
.products-page__scroller {
  overflow: auto;
  height: 100%;
}
.products-page button:hover {
  opacity: 0.8;
}
.products-page__import-panel {
  padding: 50px 20px;
}
.products-page__import-panel textarea {
  width: 100%;
  box-sizing: border-box;
}
.products-page__head {
  display: flex;
  position: fixed;
  z-index: 100;
  right: 15px;
  top: 83px;
  gap: 20px;
}
.products-page__add {
  position: absolute;
  bottom: 40px;
  width: 300px;
  left: 50%;
  margin-left: -150px;
  transform: translateZ(1px);
  z-index: 7;
  padding: 15px 20px;
  background-color: var(--primary);
  border-radius: 50px;
  color: var(--light);
  font-weight: 600;
}
.products-page__import {
  background-color: #377ded;
  color: white;
  font-size: 16px;
  font-weight: 600;
  padding: 11px 30px;
  border-radius: 5px;
  cursor: pointer;
}
.products-page__import {
  margin-left: auto;
}
.products-page__body {
  margin: 0px auto;
  width: 85%;
  max-width: 1200px;
  padding: 40px 40px 120px 40px;
}
.products-page .category-group__title {
  font-size: 17px;
  font-weight: 500;
  padding: 30px 0px 20px 0px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.products-page .category-group__title .svg {
  display: flex;
  width: 10px;
  height: 10px;
  transform: rotate(90deg);
  transition: transform 0.1s linear;
}
.products-page .category-group__content {
  display: none;
}
.products-page .category-group.open .category-group__title .svg {
  transform: rotate(0deg);
}
.products-page .category-group.open .category-group__content {
  display: block;
}
.products-page__save {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  background-color: var(--primary);
  border: none;
  position: fixed;
  bottom: 24px;
  right: 130px;
  z-index: 10;
}
.products-page .products-panel {
  position: absolute;
  top: 0px;
  right: -700px;
  width: 700px;
  bottom: 0px;
  background-color: white;
  z-index: 8;
  border-left: 1px solid var(--lightGrey);
  transition: transform 500ms;
  transform: translateX(0px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 100%;
}
.products-page .products-panel.open {
  transform: translateX(-700px);
}
.products-page .products-panel.hide-reset .reset-btn,
.products-page .products-panel.readonly .reset-btn {
  display: none;
}
.products-page .products-panel.hide-reset .reset-text,
.products-page .products-panel.readonly .reset-text {
  display: none;
}
.products-page .products-panel.readonly .products-panel__save,
.products-page .products-panel.readonly .products-panel__delete {
  display: none;
}
.products-page .products-panel .reset-btn {
  opacity: 0.5;
  cursor: pointer;
  position: relative;
  left: -18px;
  height: 0px;
}
.products-page .products-panel .reset-btn svg {
  width: 10px;
  height: 13px;
}
.products-page .products-panel .reset-text {
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  display: inline;
  margin-right: 10px;
}
.products-page .products-panel__header {
  height: 40px;
  padding: 10px 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: white;
  z-index: 10;
  align-items: center;
  border-bottom: 1px solid var(--lightGrey);
  flex: 0 0 auto;
}
.products-page .products-panel__media {
  position: relative;
}
.products-page .products-panel__media-toggle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--lightGrey);
}
.products-page .products-panel__media-toggle .svg {
  width: 17px;
  height: 17px;
  padding: 5px;
  cursor: pointer;
}
.products-page .products-panel__media-toggle .svg.selected {
  background-color: var(--dark);
}
.products-page .products-panel__media-toggle .svg.selected svg path {
  fill: white;
}
.products-page .products-panel__tabs {
  display: flex;
  gap: 10px;
  background-color: #fff;
  position: relative;
  border-top: 1px solid var(--lightGrey);
  border-bottom: 1px solid var(--lightGrey);
}
.products-page .products-panel__tab {
  cursor: pointer;
  padding: 12px 15px;
  color: #848484;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  flex-grow: 1;
  text-align: center;
}
.products-page .products-panel__tab.active {
  border-bottom-color: var(--primary);
  color: var(--primary);
}
.products-page .products-panel__tab:hover {
  color: var(--primary);
}
.products-page .products-panel__content {
  height: 100%;
  overflow: auto;
}
.products-page .products-panel__actions {
  display: flex;
}
.products-page .products-panel__actions button {
  margin-left: 10px;
}
.products-page .products-panel__delete {
  height: 35px;
  width: 35px;
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 6px;
  background-color: white;
  border: none;
  opacity: 0.5;
}
.products-page .products-panel__delete .svg {
  width: 100%;
  height: 100%;
}
.products-page .products-panel__delete .svg svg {
  height: 100%;
  width: 100%;
}
.products-page .products-panel__preview {
  z-index: 10;
  border: 1px solid var(--lightGrey);
  color: var(--dark);
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 15px;
}
.products-page .products-panel__duplicate {
  z-index: 10;
  border: 1px solid var(--lightGrey);
  color: var(--dark);
  background-color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 15px;
}
.products-page .products-panel__save {
  z-index: 10;
  background-color: #377ded;
  color: white;
  font-size: 15px;
  font-weight: 500;
  padding: 0px 20px;
  position: relative;
}
.products-page .products-panel__save.draft:after {
  content: '';
  position: absolute;
  display: block;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background-color: red;
}
.products-page .products-panel__close {
  font-size: 25px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 100;
  text-align: center;
}
.products-page .products-panel__close:after {
  content: '\00D7';
}
.products-page .products-panel__close:hover {
  color: var(--primary);
}
.products-page .products-panel__thumbnail {
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: white;
}
.products-page .products-panel__thumbnail .editable-thumbnail-component {
  width: 100%;
}
.products-page .products-panel__thumbnail .editable-thumbnail-component canvas {
  width: 100%;
  box-sizing: border-box;
}
.products-page .products-panel .preview-3d {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.products-page .products-panel .preview-3d__no-model {
  flex-grow: 1;
}
.products-page .products-panel .preview-3d button {
  background-color: #d3d3d3;
  color: var(--light);
  font-weight: 500;
  padding: 15px;
  border-radius: 0px;
  box-shadow: 0px 0px 10px #0001;
  z-index: 5;
}
.products-page .products-panel .preview-3d__action {
  white-space: nowrap;
  padding: 5px 20px;
  cursor: pointer;
}
.products-page .products-panel .preview-3d__action:hover {
  background-color: var(--dark);
  color: var(--light);
}
.products-page .products-panel .preview-3d__action a {
  text-decoration: auto;
  color: inherit;
}
.products-page .products-panel .preview-3d .dropdown {
  position: absolute;
  left: 0px;
  bottom: 0px;
  overflow: visible;
}
.products-page .products-panel .preview-3d .dropdown__button {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.products-page .products-panel .preview-3d .dropdown__button .svg {
  width: 100%;
  height: 100%;
  display: flex;
}
.products-page .products-panel .preview-3d .dropdown__button .svg svg {
  width: 20px;
  height: 20px;
  margin: 10px auto;
}
.products-page .products-panel .preview-3d .dropdown__content {
  position: absolute;
  right: auto;
  top: auto;
  bottom: 100%;
  left: 5px;
  padding: 10px 0px;
  background-color: var(--light);
  box-shadow: 0px 0px 10px #0002;
  border-radius: 5px;
}
.products-page .products-panel__body {
  padding: 18px 30px;
  z-index: 10;
  position: relative;
}
.products-page .products-panel__body.advanced {
  padding-bottom: 100px;
}
.products-page .products-panel__creator-only {
  margin: 30px 0px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.products-page .products-panel__creator-only .checkbox .label {
  font-size: 12px;
}
.products-page .products-panel__row {
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 13px;
}
.products-page .products-panel__row .reset-btn {
  margin-right: -10px;
  top: -6px;
}
.products-page .products-panel__row label {
  display: block;
  width: 200px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey);
}
.products-page .products-panel__row .model {
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
  margin: 0px -5px;
}
.products-page .products-panel__row .model span {
  display: inline-block;
  white-space: nowrap;
  max-width: 180px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.products-page .products-panel__row .model .svg {
  display: flex;
  width: 10px;
  height: 10px;
}
.products-page .products-panel__row .model:hover {
  border-color: var(--boxShadow);
}
.products-page .products-panel__row .select-unit {
  margin: 0px;
}
.products-page .products-panel__name {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
}
.products-page .products-panel__name-en p {
  vertical-align: middle;
}
.products-page .products-panel .lang {
  margin: 0px 10px;
  font-size: 10px;
  color: var(--grey);
  vertical-align: middle;
}
.products-page .products-panel .lang:before {
  content: '[';
}
.products-page .products-panel .lang:after {
  content: ']';
}
.products-page .products-panel__colour-mode {
  margin-top: 10px;
}
.products-page .products-panel__price-type,
.products-page .products-panel__colour-mode {
  font-size: 12px;
  margin-bottom: 5px;
}
.products-page .products-panel__price-type select,
.products-page .products-panel__colour-mode select {
  margin-left: 10px;
  border: 1px solid var(--lightGrey);
  background-color: white;
  border-radius: 5px;
  padding: 5px;
}
.products-page .products-panel__description {
  font-size: 13px;
  padding: 0px 200px 0px 0px;
  white-space: pre-wrap;
  min-height: 40px;
  margin: 20px 0px;
}
.products-page .products-panel__description label {
  display: block;
  width: 200px;
  font-size: 13px;
  font-weight: 500;
  color: var(--grey);
  margin-bottom: 10px;
}
.products-page .products-panel__datasheet .form__row-label {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--grey);
  font-weight: 500;
}
.products-page .products-panel__options-add {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 15px;
  display: inline-block;
  background-color: var(--dark);
  border-radius: 5px;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}
.products-page .products-panel .product-option {
  position: relative;
  margin-left: -15px;
  padding-left: 15px;
}
.products-page .products-panel .product-option__subtitle {
  font-size: 14px;
  margin-top: 10px;
  color: var(--darkGrey);
  font-weight: 500;
}
.products-page .products-panel .product-option.showid {
  margin-top: 40px;
}
.products-page .products-panel .product-option.showid .product-option__choices-add {
  margin-top: 20px;
}
.products-page .products-panel .product-option:hover .product-option__remove {
  display: block;
}
.products-page .products-panel .product-option__id {
  position: absolute;
  top: -20px;
  left: 15px;
  color: #ababab;
  font-size: 13px;
}
.products-page .products-panel .product-option__remove {
  display: none;
  position: absolute;
  top: -2px;
  left: 0px;
  line-height: 12px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  font-size: 20px;
}
.products-page .products-panel .product-option__remove:after {
  content: '\00D7';
}
.products-page .products-panel .product-option__remove:hover {
  color: var(--secondary);
}
.products-page .products-panel .product-option__name {
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
  color: #6f777e;
  margin-top: 20px;
}
.products-page .products-panel .product-option__creator-only {
  margin-top: 5px;
}
.products-page .products-panel .product-option__creator-only .checkbox .checkmark {
  width: 14px;
  height: 14px;
  line-height: 10px;
}
.products-page .products-panel .product-option__creator-only .checkbox .label {
  font-size: 11px;
  color: #777;
  margin: 0px 7px;
}
.products-page .products-panel .product-option__choices {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  gap: 10px;
}
.products-page .products-panel .product-option__choices-add {
  cursor: pointer;
  width: 60px;
  font-size: 11px;
  text-align: center;
}
.products-page .products-panel .product-option__choices-add:after {
  content: '+';
  display: block;
  width: 60px;
  height: 90px;
  line-height: 90px;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
  color: #d8dadb;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
}
.products-page .products-panel .product-option__choice {
  position: relative;
  border-radius: 5px;
  display: flex;
  border: 1px solid var(--lightGrey);
}
.products-page .products-panel .product-option__choice.showid {
  margin-top: 20px;
}
.products-page .products-panel .product-option__choice.selected {
  background-color: #ececec;
  color: #377ded;
}
.products-page .products-panel .product-option__choice:hover .product-option__choice-remove {
  display: block;
}
.products-page .products-panel .product-option__choice-id {
  position: absolute;
  top: -20px;
  left: 0px;
  color: #ababab;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
.products-page .products-panel .product-option__choice-id:after {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 30px;
  background: #ffffff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}
.products-page .products-panel .product-option__choice-remove {
  display: none;
  position: absolute;
  top: 8px;
  left: 10px;
  line-height: 12px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  font-size: 20px;
  z-index: 10;
}
.products-page .products-panel .product-option__choice-remove:after {
  content: '\00D7';
}
.products-page .products-panel .product-option__choice-remove:hover {
  color: var(--secondary);
}
.products-page .products-panel .product-option__choice-thumbnail {
  width: 90px;
  height: 90px;
  border-radius: 5px;
  overflow: hidden;
  border-radius: 5px 0px 0px 5px;
  position: relative;
}
.products-page .products-panel .product-option__choice-name {
  font-size: 13px;
  text-align: left;
  font-weight: 500;
  width: 90px;
  margin-bottom: 10px;
  flex-grow: 1;
  max-height: 40px;
  overflow: hidden;
}
.products-page .products-panel .product-option__choice-name input {
  width: 80px;
}
.products-page .products-panel .product-option__choice-hiddencolour {
  cursor: pointer;
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.products-page .products-panel .product-option__choice-displaycolour {
  width: 100%;
  height: 100%;
}
.products-page .products-panel .product-option__choice-colourtext {
  margin-top: 4px;
  color: var(--grey);
  font-size: 12px;
}
.products-page .products-panel .product-option__choice-prices {
  display: flex;
}
.products-page .products-panel .product-option__choice-price {
  color: var(--primary);
}
.products-page .products-panel .product-option__choice-price,
.products-page .products-panel .product-option__choice-purchase-price {
  font-size: 11px;
  text-align: left;
  width: 90px;
  line-height: 12px;
}
.products-page .products-panel .product-option__choice-purchase-price {
  display: none;
}
.products-page .products-panel .product-option__choice-body {
  display: flex;
  flex-direction: column;
  padding: 10px 15px;
  box-sizing: border-box;
  height: 90px;
}
.products-page .products-panel .toggles__label {
  font-size: 13px;
  margin-bottom: 5px;
  color: #626262;
  font-weight: 600;
}
.products-page .products-panel .toggles__list {
  margin: 10px 0px;
}
.products-page .products-panel .toggles__list .toggle {
  display: inline;
  font-size: 12px;
  padding: 5px 10px;
  background-color: var(--lightGrey);
  border-radius: 5px;
}
.products-page .products-panel .toggles__list .toggle span {
  color: var(--darkGrey);
  margin-left: 5px;
}
.products-page .products-panel .toggles .placeholder-material {
  font-size: 12px;
}
.products-page .products-panel .toggles .placeholder-material .editable-text {
  margin-left: 10px;
  background-color: var(--lightGrey);
  text-align: center;
}
.products-page .products-panel .textarea.json textarea {
  height: 500px;
}
.products-page .products-panel .set-json-btn {
  border-radius: 5px;
  border: 1px solid var(--lightGrey);
  padding: 7px 20px;
  font-size: 13px;
  display: inline-block;
  cursor: pointer;
}
.products-page .products-panel .set-json-btn.success {
  border-color: var(--success);
  color: var(--success);
}
.products-page .products-panel .set-json-btn.error {
  border-color: var(--warning);
  color: var(--warning);
}
.products-page .products-panel .settings {
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.products-page .products-panel .settings__shape-opts {
  padding: 10px 0px;
}
.products-page .products-panel .settings__toggle-measure {
  padding: 10px 0px 0px;
}
.products-page .products-panel .settings__content {
  width: 100%;
  z-index: 10;
  box-shadow: 0px 0px 10px #0001;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px 30px;
  box-sizing: border-box;
}
.products-page .products-panel .settings__content.advanced .settings__advanced-options {
  display: block;
}
.products-page .products-panel .settings__content.advanced .settings__show-advanced:before {
  transform: rotate(90deg);
}
.products-page .products-panel .settings__show-advanced {
  font-size: 13px;
  margin-bottom: 5px;
  color: #626262;
  font-weight: 600;
  margin-top: 10px;
  position: relative;
  cursor: pointer;
}
.products-page .products-panel .settings__show-advanced:before {
  content: '';
  display: block;
  width: 0px;
  height: 0px;
  border: 5px solid transparent;
  border-left-color: #626262;
  position: absolute;
  left: -12px;
  top: 3px;
  border-width: 4px 6px;
  transform: rotate(0deg);
  transition: transform 0.1s linear;
  transform-origin: 25% 50%;
}
.products-page .products-panel .settings__advanced-options {
  display: none;
}
.products-page .products-panel .settings__submit {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--primary);
  color: var(--light);
  font-weight: 600;
}
.products-page .products-panel .inwall-options {
  margin-top: 30px;
}
.products-page .products-panel .inwall-options__title {
  font-size: 13px;
  margin-bottom: 10px;
  color: #626262;
  font-weight: 600;
}
.products-page .products-panel .inwall-options__align label {
  font-size: 12px;
  margin-right: 10px;
}
.products-page .products-panel .inwall-options__align select {
  font-size: 12px;
}
.products-page .products-panel .inwall-options__offset .number {
  display: flex;
  align-items: center;
  gap: 10px;
}
.products-page .products-panel .inwall-options__offset .form__row-label {
  margin: 0;
}
.products-page .products-drawer {
  margin: 10px 0px 20px 10px;
  border-radius: 5px;
  overflow: hidden;
}
.products-page .products-drawer.closed .products-drawer__head .svg {
  transform: rotate(90deg);
}
.products-page .products-drawer.closed .products-drawer__body {
  max-height: 0px;
}
.products-page .products-drawer__head {
  height: 45px;
  line-height: 35px;
  padding: 0px 20px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  border: 1px solid var(--lightGrey);
  border-radius: 6px;
}
.products-page .products-drawer__head .svg {
  display: flex;
  width: 8px;
  height: 8px;
  transform: rotate(0deg);
  transition: transform 0.1s linear;
  margin-left: 10px;
}
.products-page .products-drawer__add-btn {
  display: none;
  cursor: pointer;
  border-radius: 5px;
  height: 20px;
  width: 20px;
  margin: 0px 15px;
  text-align: center;
  line-height: 20px;
  font-size: 25px;
  color: #959595;
  background-color: var(--lightGrey);
}
.products-page .products-drawer__add-btn:after {
  content: '+';
}
.products-page .products-drawer__body {
  overflow: hidden;
  max-height: none;
  box-sizing: border-box;
}
.products-page .products-table__head {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  font-weight: 600;
  color: #9ca6af;
  height: 40px;
}
.products-page .products-table__body {
  padding-bottom: 10px;
}
.products-page .products-table__body .column.name {
  color: #2d3446;
  font-size: 13px;
  font-weight: 500;
}
.products-page .products-table__body .column.name span {
  margin-left: 10px;
  font-weight: 400;
  color: #6b7280;
}
.products-page .products-table__body .column.price {
  width: 100px;
}
.products-page .products-table__body .column.price,
.products-page .products-table__body .column.brand,
.products-page .products-table__body .column.margin,
.products-page .products-table__body .column.purchasePrice,
.products-page .products-table__body .column.installationPrice {
  font-size: 13px;
}
.products-page .products-table__row {
  display: flex;
  flex-direction: row;
  height: 33px;
  cursor: pointer;
  position: relative;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.products-page .products-table__row:hover {
  background-color: #f7f7f7;
}
.products-page .products-table__row:hover .products-table__order-buttons {
  opacity: 0.5;
}
.products-page .products-table__row:hover .products-table__action-btns .arrow {
  display: block;
}
.products-page .products-table__row.selected {
  background-color: var(--lightGrey);
}
.products-page .products-table__row.readonly {
  opacity: 0.5;
}
.products-page .products-table__row[data-insert='after'] {
  border-bottom-color: var(--primary);
}
.products-page .products-table__row[data-insert='before'] {
  border-top-color: var(--primary);
}
.products-page .products-table__action-btns .arrow {
  display: none;
  width: 16px;
}
.products-page .products-table__action-btns svg {
  width: 12px;
}
.products-page .products-table__order-buttons {
  opacity: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 120px;
  height: 100%;
}
.products-page .products-table__order-btn {
  position: absolute;
  left: 4px;
  top: 0px;
  width: 15px;
  font-size: 12px;
  height: 6px;
  overflow: hidden;
}
.products-page .products-table__order-btn:hover {
  color: var(--primary);
  font-weight: 600;
}
.products-page .products-table__order-btn.top {
  top: 3px;
  line-height: 3px;
}
.products-page .products-table__order-btn.top:after {
  content: '\FE3D';
}
.products-page .products-table__order-btn.up {
  top: 10px;
  line-height: 3px;
}
.products-page .products-table__order-btn.up:after {
  content: '\FE3F';
}
.products-page .products-table__order-btn.down {
  top: 19px;
  line-height: 15px;
}
.products-page .products-table__order-btn.down:after {
  content: '\FE40';
}
.products-page .products-table__order-btn.bottom {
  top: 26px;
  line-height: 15px;
}
.products-page .products-table__order-btn.bottom:after {
  content: '\FE3E';
}
.products-page .products-table .column {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 100px;
}
.products-page .products-table .column.name {
  text-align: left;
  justify-content: left;
  padding-left: 20px;
  flex: 1 1 100px;
}
.products-page .products-table .column.price {
  color: var(--primary);
}
.products-page .products-table .column.items,
.products-page .products-table .column.floorMaterials,
.products-page .products-table .column.wallMaterials {
  width: 200px;
}
.products-page .products-table .column.actions {
  width: 25px;
  flex: 0 1 10px;
}
.products-page .products-table .column .checkbox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1415px) {
  .products-table .column.brand,
  .products-table .column.margin,
  .products-table .column.actions,
  .products-table .column.purchasePrice,
  .products-table .column.installationPrice {
    display: none;
  }
  .products-page__body {
    padding: 40px 0px 120px 0px;
  }
}

/** @format */
.form__row {
  padding: 10px 0px;
}
.form__row.error input,
.form__row.error textarea {
  border-color: red;
}
.form__row input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 13px;
}
.form__row input:focus,
.form__row input:active {
  outline: none;
}
.form__row textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 14px;
  height: 100px;
  font-family: sans-serif;
}
.form__row textarea:focus,
.form__row textarea:active {
  outline: none;
}
.form__row.vec3 {
  padding-bottom: 0px;
}
.form__row.vec3 .form__row-body {
  display: flex;
  gap: 15px;
}
.form__row.range {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.form__row.range .form__row-body {
  display: flex;
  gap: 20px;
  width: 65%;
}
.form__row.range .form__row.number {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0px;
}
.form__row-label {
  font-size: 13px;
  margin-bottom: 5px;
  color: #626262;
  font-weight: 600;
}
.form__row-label input {
  display: inline-block;
  width: 45px;
  height: 23px;
  margin-left: 10px;
}
.form__row-description {
  font-size: 12px;
  margin-top: 20px;
  color: #626262;
}
.form__row-button {
  display: inline-block;
  padding: 7px 20px;
  background-color: #d3d3d3;
  color: white;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.form__row-link {
  display: block;
  font-size: 14px;
  margin: 10px 0px;
  color: #5a5a5a;
  font-weight: 600;
}
.form-slider {
  position: relative;
  height: 8px;
  background-color: #eee;
  border-radius: 5px;
  margin: 10px 7px;
  cursor: pointer;
}
.form-slider__progress {
  height: 100%;
  background-color: var(--primary);
  border-radius: 5px;
  width: 0%;
}
.form-slider__handle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 10px;
  background-color: var(--primary);
  margin: -7px 0px 0px -7px;
}

/** @format */
.dropzone {
  position: relative;
}
.dropzone__overlay {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffffc7;
  z-index: 10;
}
.dropzone__overlay .svg {
  border: 2px dashed var(--grey);
  border-radius: 10px;
  width: 50%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffffc7;
}
.dropzone__overlay .svg svg path {
  fill: var(--grey);
}
body.dragging .dropzone__overlay {
  display: flex;
}

/** @format */
.product-card-comp {
  width: 120px;
  height: 160px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--lightGrey);
}
.product-card-comp:hover {
  overflow: visible;
  border-color: #d4e0ed;
}
.product-card-comp .thumbnail-component {
  width: 120px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.product-card-comp__no-product-img {
  width: 120px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #e7e7e7;
}
.product-card-comp__body {
  font-size: 14px;
  padding: 10px 10px;
  box-shadow: 0px 0px 10px #0001;
  height: 40px;
  position: relative;
}
.product-card-comp__brand {
  text-transform: uppercase;
  font-size: 12px;
  color: #9b9b9b;
  margin-bottom: 4px;
}
.product-card-comp__name {
  font-size: 13px;
  background-color: white;
  padding: 10px;
  margin: -10px;
}
.product-card-comp__notes {
  position: absolute;
  bottom: 100%;
  padding: 5px 10px;
  left: 0px;
  font-size: 12px;
  color: var(--primary);
  background-color: #fffc;
  border-radius: 5px;
}

/** @format */
.quote {
  align-self: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  overflow: hidden;
}
.quote__save-btn {
  position: absolute;
  left: 50%;
  bottom: 60px;
  width: 260px;
  margin-left: -130px;
  background-color: var(--primary);
  color: var(--light);
  border-radius: 50px;
  padding: 15px 20px;
  box-sizing: border-box;
  font-weight: 600;
  z-index: 1000;
}
.quote__import-btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  border-radius: 50px;
  z-index: 1000;
  background-color: var(--primary);
  color: var(--light);
  font-weight: 600;
  padding: 12px 20px;
}
.quote h3 {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
}
.quote h2 {
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  gap: 5px;
}
.quote .right-panel {
  top: 60px;
}
.quote .right-panel__content {
  height: 100%;
}
.quote__head {
  border-bottom: #e8e8e9 1px solid;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  position: sticky;
  left: 0px;
  max-width: 100vw;
  box-sizing: border-box;
  padding: 40px 20px;
}
.quote__head .actions {
  display: flex;
  gap: 20px;
}
.quote__head .actions button {
  background-color: var(--primary);
  color: var(--light);
  font-size: 16px;
  font-weight: 600;
  padding: 11px 30px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.quote__head .actions button:hover {
  opacity: 0.8;
}
.quote__head .actions .save-btn.needs-save:after {
  content: '';
  position: absolute;
  display: block;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background-color: red;
}
.quote__toggle {
  display: flex;
  align-items: center;
  gap: 30px;
}
.quote__toggle span,
.quote__toggle select {
  font-weight: 500;
}
.quote__toggle select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--boxShadow);
  background-color: transparent;
  cursor: pointer;
}
.quote__toggle select:hover {
  background-color: var(--darkerLight);
}
.quote__toggle h3 {
  margin: 0;
}
.quote__content {
  min-width: 800px;
  max-width: 1200px;
  margin: 0px auto 140px auto;
}
.quote__wrapper {
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: none;
}
.quote__right {
  width: 500px;
  position: fixed;
  right: 0px;
  height: 100%;
  z-index: 1000;
  max-width: 100%;
  box-sizing: border-box;
  border-left: 1px solid var(--lightGrey);
  background-color: var(--light);
}
.quote__right textarea {
  width: 100%;
  height: 100%;
  resize: none;
  font-family: monospace;
  font-size: 12px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  border: none;
  padding: 20px;
  box-sizing: border-box;
}
.quote__right-header {
  height: 40px;
  border-bottom: 1px solid var(--lightGrey);
}
.quote__right-header .close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.quote__error {
  color: red;
  position: absolute;
  bottom: 5px;
  left: 5px;
}
.quote__advanced {
  display: flex;
  align-items: center;
  font-weight: 600;
}
.quote__advanced input {
  width: 30px;
  height: 18px;
}
.quote-settings__body {
  display: flex;
  flex-direction: column;
  padding: 25px 100px;
  border: 1px solid var(--boxShadow);
  gap: 20px;
}
.quote-settings__body input,
.quote-settings__body select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--boxShadow);
}
.quote-settings__body select {
  background-color: transparent;
}
.quote-settings__body .dropdown__button {
  display: flex;
  padding: 4px;
  border-radius: 4px;
  border: 1px solid var(--boxShadow);
  height: 100%;
}
.quote-settings__body .multi-select__value {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
}
.quote-settings__body .multi-select__value span {
  font-size: 14px;
  font-weight: 400;
  min-width: 100px;
}
.quote-settings__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.quote-settings__info p {
  color: var(--grey);
  font-size: 12px;
}
.quote-settings__row {
  display: flex;
  justify-content: space-between;
}
.quote-config-table h2,
.quote-config-table h3 {
  margin: 0;
}
.quote-config-table__row,
.quote-config-table__head {
  display: flex;
  font-size: 14px;
  border-bottom: 1px solid var(--boxShadow);
  border-left: 1px solid var(--boxShadow);
  border-right: 1px solid var(--boxShadow);
}
.quote-config-table__row .quote-config-table__col:not(:last-child),
.quote-config-table__head .quote-config-table__col:not(:last-child) {
  border-right: 1px solid var(--boxShadow);
  border-radius: 0;
  padding: 3px 0px;
}
.quote-config-table__row .label,
.quote-config-table__head .label {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-basis: 350px;
  line-height: 20px;
  margin: 0px 5px;
}
.quote-config-table__row .price,
.quote-config-table__head .price,
.quote-config-table__row .purchasePrice,
.quote-config-table__head .purchasePrice,
.quote-config-table__row .installationPrice,
.quote-config-table__head .installationPrice,
.quote-config-table__row .movementPrice,
.quote-config-table__head .movementPrice,
.quote-config-table__row .deletionPrice,
.quote-config-table__head .deletionPrice {
  flex-basis: 160px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 10px;
}
.quote-config-table__row .price input,
.quote-config-table__head .price input,
.quote-config-table__row .purchasePrice input,
.quote-config-table__head .purchasePrice input,
.quote-config-table__row .installationPrice input,
.quote-config-table__head .installationPrice input,
.quote-config-table__row .movementPrice input,
.quote-config-table__head .movementPrice input,
.quote-config-table__row .deletionPrice input,
.quote-config-table__head .deletionPrice input {
  width: 100%;
  border: none;
}
.quote-config-table__row .enabled,
.quote-config-table__head .enabled {
  display: flex;
  flex-basis: 70px;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.quote-config-table__row .tax,
.quote-config-table__head .tax {
  flex-basis: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 10px;
  align-self: center;
}
.quote-config-table__row .tax.undefined > span,
.quote-config-table__head .tax.undefined > span {
  opacity: 0.6;
}
.quote-config-table__row .tax input,
.quote-config-table__head .tax input {
  width: 100%;
}
.quote-config-table__head {
  font-size: 13px;
  background-color: var(--lightGrey);
  border-top: 1px solid var(--boxShadow);
  min-height: 35px;
  position: sticky;
  top: 0px;
  z-index: 1000;
}
.quote-config-table__row {
  display: flex;
  font-size: 12px;
}
.quote-config-table__row .unitPrice,
.quote-config-table__row .price,
.quote-config-table__row .purchasePrice,
.quote-config-table__row .installationPrice,
.quote-config-table__row .movementPrice,
.quote-config-table__row .deletionPrice {
  color: var(--primary);
}
.quote-config-table__row .tax {
  height: 22px;
}
.quote-config-table__row .tax span {
  background-color: #6e50ff;
  color: var(--light);
  padding: 2px 10px;
  border-radius: 10px;
  margin: 2px 0;
}
.quote-config-table__row a.help {
  margin-left: auto;
  display: flex;
  padding: 0;
}
.quote-config-table__row a.help > .svg {
  display: flex;
  height: 18px;
}
.quote-config-table__dropdown-btn.open .dropdown__button svg path {
  fill: var(--dark);
}
.quote-config-table__dropdown-btn .dropdown__content {
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
  width: 600px;
}
.quote-config-table__dropdown-btn .dropdown__content h3 {
  font-size: 16px;
}
.quote-config-table__tabs-wrapper {
  position: sticky;
  left: 0px;
  max-width: 100vw;
  overflow: auto;
  overscroll-behavior: none;
}
.quote-config-table__tabs {
  display: flex;
  font-size: 14px;
  font-weight: 600;
}
.quote-config-table__tab {
  padding: 15px 25px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.quote-config-table__tab.selected {
  background-color: var(--lightGrey);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-top: 1px solid var(--boxShadow);
  border-left: 1px solid var(--boxShadow);
  border-right: 1px solid var(--boxShadow);
}
.quote-config-table__tab:not(.selected) {
  cursor: pointer;
}
.quote-config-table__tab:not(.selected):hover {
  color: var(--primary);
}
.quote-config-table__tab:not(.selected):active {
  color: var(--lightPrimary);
}
.quote-config-table__category-leaf {
  margin-left: 5px;
}
.quote-config-table__category-branch {
  cursor: pointer;
  user-select: none;
}
.quote-config-table__category-branch svg {
  transition: transform 0.1s linear;
  transform: rotate(90deg);
}
.quote-config-table__category-branch.open svg {
  transform: rotate(180deg);
}
.quote-config-table .price-input__included,
.quote-config-table .price-input__inherit,
.quote-config-table .price-input__unknown {
  width: 100%;
  box-shadow: 0px 4px 12px 0 rgba(232, 232, 237, 0.5);
}
.quote-config-table.template-prices .quote-config-table__col {
  line-height: 20px;
}
.quote-config-table.template-prices .quote-config-table__col.name {
  display: flex;
  align-items: center;
  padding: 4px 10px !important;
  flex-grow: 1;
}
.quote-config-table.template-prices .quote-config-table__col.name p {
  flex-grow: 1;
}
.quote-config-table.template-prices .quote-config-table__col.name input {
  width: 100%;
  border: none;
  box-sizing: border-box;
  padding: 0;
}
.quote-config-table.template-prices .quote-config-table__col.name .editable-text span:hover {
  text-decoration: underline;
}
.quote-config-table.template-prices .quote-config-table__col.name p.manual span {
  color: var(--primary);
}
.quote-config-table.template-prices .quote-config-table__col.unit {
  flex: 0 0 60px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 4px 10px !important;
}
.quote-config-table.template-prices .quote-config-table__col.unitPrice {
  display: flex;
  flex: 0 0 10%;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 4px 10px !important;
}
.quote-config-table.template-prices .quote-config-table__col.unitPrice input {
  width: 100%;
  border: none;
}
.quote-config-table.template-prices .quote-config-table__col.enabled {
  display: flex;
  flex: 0 0 70px;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.quote-config-table.template-prices .price-input__included,
.quote-config-table.template-prices .price-input__inherit,
.quote-config-table.template-prices .price-input__unknown {
  padding: 0;
  color: var(--primary);
}

/** @format */
.edit-template .quote-selector .selector__item,
.template .quote-selector .selector__item {
  background-color: var(--price);
  margin: 2px;
}
.edit-template .quote-selector .selector__item select,
.template .quote-selector .selector__item select {
  font-size: 12px;
  padding: 0px;
  border-radius: 3px;
}
.edit-template .quote-selector .selector__and,
.template .quote-selector .selector__and {
  display: none;
}
.right-panel__content {
  display: flex;
  flex-direction: column;
}
.edit-template {
  padding: 20px 40px;
}
.edit-template input,
.edit-template select {
  font-size: 14px;
}
.edit-template h3 {
  display: flex;
  align-items: center;
}
.edit-template h3 .id {
  font-size: 12px;
  font-weight: 500;
  margin-left: auto;
  color: var(--grey);
}
.edit-template .quote-selector .selector__clause,
.edit-template .quote-selector .selector__item.add {
  margin-left: 0;
}
.edit-template__footer {
  display: flex;
  flex-direction: row;
  gap: 20px;
  border-top: 1px solid var(--boxShadow);
  padding-top: 20px;
}
.edit-template__footer button {
  flex-grow: 1;
}
.edit-template__wrapper {
  display: flex;
  flex-direction: column;
}
.edit-template__head {
  padding: 20px 40px;
  border-bottom: 1px solid #e8e8e9;
}
.edit-template__head .edit-template__line {
  margin-bottom: 0;
}
.edit-template__warning {
  font-size: 12px;
  color: var(--warning);
}
.edit-template__warning .attribute {
  margin-right: 4px;
  background-color: var(--warning);
  color: var(--light);
  padding: 3px;
  border-radius: 4px;
}
.edit-template__warning .attribute.available {
  background-color: var(--primary);
}
.edit-template__action-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 40px;
}
.edit-template__actiongrp .drawer__head {
  font-weight: 600;
  padding: 0;
  font-size: 16px;
}
.edit-template__action {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  margin-bottom: 5px;
  gap: 5px;
  padding: 5px;
  border-radius: 4px;
}
.edit-template__action:hover {
  background-color: var(--darkerLight);
}
.edit-template__action.selected {
  background-color: var(--darkerLight);
  border: var(--grey) 1px solid;
}
.edit-template__action__title {
  font-size: 14px;
  font-weight: 500;
}
.edit-template__action__description {
  font-size: 12px;
  color: var(--grey);
}
.edit-template__action__attributes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 12px;
  border-radius: 4px;
}
.edit-template__action__attributes .attribute {
  margin-right: 4px;
  background-color: var(--primary);
  color: var(--light);
  padding: 3px;
  border-radius: 4px;
}
.edit-template__groups__btn {
  border: 1px solid var(--lightGrey);
  background-color: white;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  margin: 20px;
}
.edit-template__splitter {
  margin: 22px 0px;
  border-bottom: #e8e8e9 1px solid;
}
.edit-template__line {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 10px;
}
.edit-template__line.vertical {
  flex-direction: column;
}
.edit-template__line span.prop {
  font-weight: 500;
}
.edit-template__line p.prop {
  font-size: 12px;
  color: var(--grey);
  margin-right: 20px;
  margin-top: 4px;
}
.edit-template__line.start {
  justify-content: flex-start;
  gap: 30px;
}
.edit-template__line input[type="text"],
.edit-template__line textarea {
  border: 1px solid var(--lightGrey);
  border-radius: 5px;
  padding: 8px 10px;
  font-size: 13px;
  min-width: 200px;
  box-sizing: border-box;
  resize: vertical;
}
.edit-template__line select,
.edit-template__line .select-action-btn {
  border: 1px solid var(--lightGrey);
  background-color: white;
  border-radius: 5px;
  padding: 5px;
  min-width: 200px;
  max-width: 200px;
  cursor: pointer;
}
.edit-template__line select:hover,
.edit-template__line .select-action-btn:hover {
  background-color: var(--darkerLight);
}
.edit-template__line__edit {
  padding: 0;
  margin-left: 6px;
}
.edit-template__grp-line {
  padding: 10px 30px;
  margin: 0;
  align-items: center;
}
.edit-template__grp-line .edit-template__name__wrapper {
  flex-grow: 1;
}
.edit-template__grp-line__remove {
  height: 100%;
}
.edit-template__grp-line__remove:hover {
  background-color: var(--boxShadow);
  color: red;
}
.edit-template__name {
  width: 100%;
  box-sizing: border-box;
}
.edit-template__name__prop {
  align-self: baseline;
}
.edit-template__name__wrapper {
  display: flex;
  flex-grow: 0.9;
  margin-left: 10px;
  flex-direction: column;
  gap: 5px;
}
.edit-template__name__subtext {
  font-size: 12px;
  font-weight: 500;
  color: var(--grey);
}
.edit-template__name__translation {
  display: flex;
  gap: 5px;
}
.edit-template__name__translation > span {
  width: 20px;
  align-self: center;
}
.edit-template__name__translation button:hover {
  background-color: var(--boxShadow);
}
.edit-template__name__variable {
  cursor: pointer;
}
.edit-template__name__variable:hover {
  color: var(--primary);
}
.edit-template__groupBy {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  gap: 5px;
  font-size: 16px;
}
.edit-template__groupBy__attr:hover {
  background-color: red;
}
.edit-template__groupBy__attr,
.edit-template__groupBy__add {
  cursor: pointer;
  background-color: var(--svgHover);
  border-radius: 5px;
  padding: 5px;
  font-weight: 500;
  color: var(--light);
}
.edit-template__groupBy__attr select,
.edit-template__groupBy__add select {
  margin-right: 5px;
  padding: 0;
}
.edit-template__groupBy__attr.adder,
.edit-template__groupBy__add.adder {
  opacity: 0.7;
  background-color: var(--secondary);
}
.edit-template__groupBy__attr.adder:hover,
.edit-template__groupBy__add.adder:hover {
  opacity: 1;
}
.edit-template__groupBy__none {
  color: var(--grey);
  align-self: center;
}
.edit-template__groupBy__add {
  color: black;
}
.edit-template__groupBy__add:hover {
  color: var(--light);
}
.template-table h2,
.template-table h3 {
  margin: 0;
}
.template-table__row,
.template-table__head,
.template-table__section {
  display: flex;
  font-size: 14px;
  position: relative;
  border-bottom: 1px solid var(--boxShadow);
  border-left: 1px solid var(--boxShadow);
  border-right: 1px solid var(--boxShadow);
}
.template-table__row .template-table__col:not(:last-child),
.template-table__head .template-table__col:not(:last-child),
.template-table__section .template-table__col:not(:last-child) {
  border-right: 1px solid var(--boxShadow);
  border-radius: 0;
  padding: 3px 0px;
}
.template-table__row,
.template-table__section {
  cursor: pointer;
}
.template-table__head {
  font-size: 13px;
  background-color: var(--lightGrey);
  border-top: 1px solid var(--boxShadow);
  min-height: 35px;
}
.template-table__head__value {
  font-weight: 600;
  margin-left: 5px;
}
.template-table__row {
  display: flex;
  font-size: 12px;
}
.template-table__row .unitPrice {
  color: var(--primary);
}
.template-table__row:hover,
.template-table__row.selected {
  background-color: #f5f5f5;
}
.template-table__row .template-table__col.action-btns .action-btns__content {
  background-color: #f5f5f5;
}
.template-table__section {
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  background-color: #fffbd9;
}
.template-table__section.top {
  background-color: #fef397;
}
.template-table__section.top:hover,
.template-table__section.top.selected {
  background-color: #ffef6c;
}
.template-table__section.top .template-table__col.action-btns .action-btns__content {
  background-color: #ffef6c;
}
.template-table__section svg {
  margin-right: 5px;
  transition: transform 0.1s linear;
  transform: rotate(90deg);
}
.template-table__section.open svg {
  transform: rotate(180deg);
}
.template-table__section:hover,
.template-table__section.selected {
  background-color: #fff7b3;
}
.template-table__section .template-table__col.action-btns .action-btns__content {
  background-color: #fff7b3;
}
.template-table__footer {
  margin-top: 20px;
}
.template-table__footer button {
  border: var(--boxShadow) 1px solid;
}
.template-table__footer button:hover {
  background-color: var(--boxShadow);
}
.template-table__col {
  line-height: 20px;
}
.template-table__col.enabled {
  display: flex;
  flex-basis: 70px;
  align-items: center;
  text-align: center;
  justify-content: center;
}
.template-table__col.default {
  color: var(--grey);
}
.template-table__col.group-by {
  display: flex;
  flex-basis: 30%;
  align-items: center;
  padding: 4px 10px !important;
}
.template-table__col.action {
  display: flex;
  align-items: center;
  text-align: center;
  padding: 4px 10px !important;
  flex-basis: 150px;
}
.template-table__col.action-btns {
  display: flex;
  flex-basis: 30px;
  align-items: center;
  justify-content: space-around;
  gap: 5px;
  margin: 0 5px;
}
.template-table__col.action-btns .action-btns__more {
  display: flex;
  text-align: center;
  width: 100%;
  font-size: 20px;
  align-items: center;
  justify-content: center;
}
.template-table__col.action-btns .action-btns__content {
  display: none;
  position: absolute;
  right: 0;
  height: 100%;
  background-color: var(--light);
  margin: 0;
  padding: 0 10px;
  border-left: 1px solid var(--boxShadow);
  gap: 5px;
}
.template-table__col.action-btns:hover .action-btns__content {
  display: flex;
  align-items: center;
}
.template-table__col.action-btns button {
  border: var(--boxShadow) 1px solid;
  white-space: nowrap;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 14px;
}
.template-table__col.action-btns button:hover {
  background-color: var(--boxShadow);
}
.template-table__col.action-btns button:hover.remove-btn {
  color: red;
}
.template-table__col.name {
  display: flex;
  align-items: center;
  padding: 4px 10px !important;
  flex-grow: 1;
  flex-basis: 200px;
}
.template-table__col.name p {
  flex-grow: 1;
}
.template-table__col.name input {
  width: 100%;
  border: none;
  box-sizing: border-box;
  padding: 0;
}
.template-table__col.name p.manual span {
  color: var(--primary);
}
.template-table__col.unit {
  flex-basis: 60px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 4px 10px !important;
}
.template-table__col.unitPrice {
  display: flex;
  flex-basis: 80px;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 4px 10px !important;
}
.template-table__col.unitPrice input {
  width: 100%;
  border: none;
}
.template-table__col.unitPrice .default {
  color: var(--grey);
}
.template-table__col.filter {
  display: flex;
  align-items: center;
  padding: 4px 10px !important;
  flex-basis: 30%;
  max-width: 30%;
  overflow-x: auto;
}
.template-table__col.grp {
  font-weight: bold;
}
.template-table .price-input__included,
.template-table .price-input__inherit,
.template-table .price-input__unknown {
  width: 100%;
  box-shadow: 0px 4px 12px 0 rgba(232, 232, 237, 0.5);
}
.template-table .quote-selector {
  display: flex;
  align-items: center;
}
.template-table .quote-selector .selector__clause {
  margin: 0;
  height: fit-content;
  flex-wrap: nowrap;
}
.template-table .quote-selector .selector__item {
  min-width: 1em;
  background-color: var(--price);
}
.template-table .quote-selector .selector__and {
  position: unset;
}
.template-table__filter {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.template-table__filter__clause {
  display: flex
;
  flex-direction: row;
  gap: 2px;
  background-color: var(--darkGrey);
  border-radius: 6px;
  width: fit-content;
  padding: 2px;
  height: fit-content;
}
.template-table__filter__term {
  background-color: var(--price);
  color: var(--light);
  border-radius: 4px;
  padding: 3px 10px;
  width: fit-content;
  font-weight: 600;
  font-size: 12px;
  width: auto;
  margin: 0;
  gap: 5px;
}

/** @format */
.workspace-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  height: 100%;
}
.workspace-settings__body {
  display: flex;
  width: 70%;
  margin-top: 50px;
}
.workspace-settings__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
}
.workspace-settings__content {
  padding-bottom: 50px;
}
.workspace-settings__content h4 {
  font-weight: 600;
  margin-bottom: 10px;
}
.workspace-settings__content p {
  font-size: 10pt;
  color: #8c909a;
}
.workspace-settings__content input {
  outline: 0;
  filter: none;
  border: 1px solid var(--lightGrey);
  border-radius: 4px;
  padding: 0 10px;
  height: 40px;
}
.workspace-settings__content select {
  border: 1px solid var(--lightGrey);
  border-radius: 4px;
  padding: 0px 12px;
  background-color: white;
  cursor: pointer;
  height: 40px;
  max-width: 200px;
}
.workspace-settings__content textarea {
  width: 330px;
  height: 100px;
  border: 1px solid var(--lightGrey);
  border-radius: 7px;
  padding: 15px 20px;
  font-size: 12px;
}
.workspace-settings__content__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px;
  gap: 30px;
}
.workspace-settings__content__row.subrow {
  padding-left: 20px;
}
.workspace-settings__content__row.disabled {
  opacity: 0.5;
}
.workspace-settings__content .members {
  overflow: visible;
  height: auto;
  padding-bottom: 0px;
}
.workspace-settings__section-title {
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 15px;
}
.workspace-settings__section-title.selected {
  color: var(--primary);
}
.workspace-settings__footer {
  display: flex;
  justify-content: center;
  padding-top: 30px;
}
.workspace-settings__save {
  min-width: fit-content;
  width: 40%;
  align-self: center;
}
.workspace-settings .submit {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  background-color: var(--primary);
  padding: 15px 30px;
  width: 230px;
}
.workspace-settings .submit.loading {
  background-color: var(--light);
}
.workspace-settings .submit.success {
  background-color: var(--success);
}
.workspace-settings .submit.error {
  background-color: var(--warning);
}
.workspace-settings .image-input,
.workspace-settings .grid-input {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 10px;
}
.workspace-settings .image-input .input-container,
.workspace-settings .grid-input .input-container {
  border: 1px solid var(--lightGrey);
  max-width: 100%;
}
.workspace-settings .image-input input,
.workspace-settings .grid-input input {
  border: none;
  padding: 0px;
  height: auto;
}
.workspace-settings .image-input input::file-selector-button,
.workspace-settings .grid-input input::file-selector-button {
  background-color: #fff;
  color: #000;
  border: 0px;
  border-right: 1px solid var(--lightGrey);
  padding: 10px 15px;
  margin-right: 20px;
}
.workspace-settings .image-input input::file-selector-button:hover,
.workspace-settings .grid-input input::file-selector-button:hover {
  background-color: #eee;
}
.workspace-settings .image-input img {
  max-width: 150px;
  max-height: 90px;
}
.workspace-settings .grid-input img {
  max-width: min(500px, 100%);
  max-height: 110px;
}
@media (max-width: 1200px) {
  .workspace-settings__body {
    flex-direction: column;
    width: 90%;
  }
  .workspace-settings__sidepanel__sections {
    display: none;
  }
  .workspace-settings__wrapper {
    margin: 10px 0px;
  }
}
@media (max-width: 650px) {
  .workspace-settings__body {
    width: 100%;
    margin-top: 0px;
  }
  .workspace-settings__content__row:not(.nowrap) {
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
  .workspace-settings__content__row p {
    display: none;
  }
  .workspace-settings__content__row h4 {
    margin-bottom: 0px;
  }
  .workspace-settings__content__row input:not([type=checkbox]) {
    width: 100%;
    box-sizing: border-box;
  }
  .workspace-settings__content__row textarea {
    width: 100%;
    box-sizing: border-box;
  }
}

/** @format */
.members {
  overflow-y: auto;
  height: 100%;
  position: relative;
  padding-bottom: 100px;
}
.members button:hover,
.members a:hover {
  opacity: 0.8;
}
.members button[disabled] {
  background-color: var(--lightGrey);
  cursor: initial;
}
.members button[disabled]:hover {
  opacity: 1;
}
.members__content {
  width: 100%;
  max-width: 1200px;
  margin: 0px auto;
}
.members__content .drawer {
  box-shadow: none;
  margin: 10px -5px;
}
.members__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
}
.members__actions-left,
.members__actions-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.members__actions .create-access {
  color: white;
  background-color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  padding: 15px 30px;
  width: 230px;
}
.members__actions .create-access-link {
  padding: 10px 20px;
  background-color: white;
  color: var(--primary);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid var(--primary);
}
.members__limit-reached {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.members__limit-reached span {
  font-size: 14px;
}
.members__limit-reached a,
.members__limit-reached button {
  padding: 5px 20px;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  background: none;
  border: 1px solid var(--darkGrey);
  color: var(--darkGrey);
}
.members .section.company-users {
  opacity: 0.3;
  cursor: default;
}
.members .section.company-users .table__row:hover {
  background-color: transparent;
}
.members .table {
  min-width: 500px;
}
.members .table__column.name {
  text-align: start;
}
.members .table__column.token {
  flex: 2 1 0;
  padding-right: 60px;
}
.members .table__column.token a {
  color: #737373;
}
.members .table__column.token a:visited {
  color: #737373;
}
.members .table__column.more {
  flex: 0 0 60px;
  padding: 0px;
  position: relative;
}
.members .table__column.more .more-btn {
  cursor: pointer;
  width: 60px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.members .table__column.more .dropdown {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  border: 0.5px solid #f5f7f7;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: 0 3px 24px 0 rgba(48, 48, 49, 0.14);
  z-index: 1000;
  padding: 16px 15px 14px;
  width: 130px;
  right: 0px;
  top: 35px;
  text-align: right;
}
.members .table__column.more .dropdown a + a {
  margin-top: 3px;
}
.members .table__column.more .dropdown a {
  padding-top: 2px;
  padding-bottom: 2px;
  cursor: pointer;
  margin: 0px;
  text-decoration: none;
  font-size: 14px;
  color: #20232c;
  line-height: 26px;
}
.members .table__column.more .dropdown a:hover {
  text-decoration: underline;
}
.input-form.error > div {
  border: 2px solid var(--warning);
}
.popup-access .input-form + .input-form {
  margin-top: 17px;
}
.popup-access > div {
  padding: 30px 40px;
  width: 450px;
  max-height: 80%;
}
.popup-access > div > span {
  display: none;
}
.popup-access > div > div:last-child {
  justify-content: center;
  margin-top: 50px;
}
.popup-access .input-form {
  display: flex;
  flex-direction: row;
  align-items: start;
}
.popup-access .input-form .input-form__label {
  width: 25%;
  margin: 17px 0px;
  border: none;
  font-size: 12px;
  font-weight: 500;
}
.popup-access .input-form .input-form__value {
  margin: 14px 15px;
  border: none;
  font-size: 14px;
  color: #666;
}
.popup-access .input-form > div {
  width: 50%;
  border: 2px solid #ccd2d7;
  box-shadow: none;
}
.popup-access .input-form label {
  width: 25%;
  margin: 17px 0px;
}
.popup-access .input-form input {
  min-height: 40px;
}
.popup-access .input-form input::placeholder {
  color: #888;
}
.popup-access .input-form textarea {
  padding: 12px 16px;
}
.popup-access .input-form textarea::placeholder {
  color: #888;
}
@media (max-width: 880px) {
  .members .table__column.profession {
    display: none;
  }
}
@media (max-width: 700px) {
  .members .table__column.name {
    display: none;
  }
}

/** @format */
.drawer {
  margin: 10px 0px;
  border-radius: 5px;
  box-shadow: 0px 2px 12px rgba(28, 40, 63, 0.05);
}
.drawer.closed .drawer__head .svg {
  transform: rotate(90deg);
}
.drawer.closed .drawer__body {
  overflow: hidden;
  max-height: 0px;
}
.drawer__head {
  height: 45px;
  line-height: 35px;
  padding: 0px 20px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
}
.drawer__head .svg {
  display: flex;
  width: 8px;
  height: 8px;
  transform: rotate(0deg);
  transition: transform 0.1s linear;
  margin-left: 10px;
}
.drawer__body {
  max-height: none;
  box-sizing: border-box;
}
.section__head {
  font-size: 17px;
  font-weight: 500;
  padding: 30px 0px 20px 0px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.section__head .svg {
  display: flex;
  width: 10px;
  height: 10px;
  transform: rotate(0deg);
  transition: transform 0.1s linear;
}
.section__body {
  display: block;
}
.section.closed .section__head .svg {
  transform: rotate(90deg);
}
.section.closed .section__body {
  display: none;
}
.right-panel {
  position: fixed;
  top: 137px;
  right: -600px;
  width: 600px;
  bottom: 0px;
  background-color: white;
  z-index: 8;
  border-left: 1px solid var(--lightGrey);
  transition: transform 500ms;
  transform: translateX(0px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.right-panel.open {
  transform: translateX(-600px);
}
.right-panel__close {
  position: absolute;
  top: 11px;
  left: 6px;
  font-size: 25px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 100;
  text-align: center;
}
.right-panel__close:after {
  content: '\00D7';
}
.right-panel__close:hover {
  color: var(--primary);
}
.right-panel__content {
  overflow: auto;
}

.input-form__wrapper {
  -moz-box-align: center;
  transition: all 0.7s ease 0s;
  position: relative;
  min-width: 220px;
  min-height: 45px;
  background-color: var(--light);
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 1px;
  border: 2px solid #ccd2d7;
  box-shadow: none;
}
.input-form__input {
  border: medium none;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  color: var(--dark);
  padding-left: 16px;
  padding-right: 16px;
  outline: currentcolor none medium;
  border-radius: 4px;
}

.roles-field {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 5px 10px;
  padding: 5px 0px;
  border: none !important;
  position: relative;
}
.roles-field__role {
  padding: 10px 20px;
  border-radius: 3px;
  color: white;
  font-weight: 500;
  white-space: nowrap;
}
.roles-field__role.owner-role {
  background-color: #d86f6f;
}
.roles-field__role.admin-role {
  background-color: #d86f6f;
}
.roles-field__role.editor-role {
  background-color: #f1ae00;
}
.roles-field__role.viewer-role {
  background-color: #bdbdbd;
}
.roles-field__role-description {
  font-size: 13px;
}
.roles-field__del-role {
  display: inline-block;
  margin-left: 15px;
  cursor: pointer;
}
.roles-field__del-role:hover .svg path {
  fill: var(--light);
}
.roles-field__del-role .svg {
  width: 10px;
  height: 10px;
}
.roles-field__add-role-btn {
  padding: 10px 15px;
  font-size: 30px;
  line-height: 16px;
  background-color: #e3e3e3;
  border-radius: 3px;
  color: white;
  cursor: pointer;
}
.roles-field__add-role-btn:hover {
  background-color: var(--boxShadow);
}
.roles-field__add-role-popup {
  display: none;
  position: absolute;
  width: 440px;
  bottom: 53px;
  left: -125px;
  background-color: white;
  border-radius: 3px;
  padding: 20px 0px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.roles-field__add-role-popup.open {
  display: block;
}
.roles-field__role-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 20px;
}
.roles-field__role-row:hover {
  background-color: #f0f0f0;
}
.roles-field__role-row-left {
  display: flex;
  justify-content: end;
  flex: 0 0 110px;
}
.roles-input label {
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
}

.table {
  padding-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.table__head {
  display: flex;
  flex-direction: row;
  font-size: 11px;
  font-weight: 600;
  color: #9ca6af;
  height: 40px;
}
.table__head .table__column .asc .svg {
  transform: rotateZ(90deg);
}
.table__head .table__column .desc .svg {
  transform: rotateZ(-90deg);
}
.table__column {
  display: flex;
  font-size: 13px;
  align-items: center;
  flex: 1 1 0;
  padding: 0px 20px;
}
.table__column.active {
  color: var(--primary);
}
.table__column.active .svg svg path {
  fill: var(--primary);
}
.table__column-name {
  position: relative;
}
.table__column-name .svg {
  position: absolute;
  right: -15px;
  top: 0;
  cursor: pointer;
}
.table__column-name .svg svg path {
  fill: var(--grey);
}
.table__column-name .svg:hover svg path {
  fill: var(--primary);
}
.table__rows {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.table__row {
  display: flex;
  flex-direction: row;
  min-height: 33px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 1px 0px;
}
.table__row:hover {
  background-color: var(--lightGrey);
}
.table__row:hover .ellipsis {
  background-color: var(--lightGrey);
}
.table__row:hover .buyer.small {
  display: block;
}
.table__row:hover .edit-buyer {
  display: block;
}
.table__row .table__column {
  height: 100%;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 12px;
  color: var(--dark);
  text-align: center;
  border-left: 1px solid #eee;
}
.table .table__row + .table__row {
  margin-top: 1px;
}

.loading-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
button.offline-capture-button {
  padding: 10px 20px;
  border: 1px solid var(--primary);
  color: var(--primary);
  background: white;
  font-size: 14px;
  margin: 20px 20px;
}
.error-page__content {
  display: flex;
  flex-direction: column;
}