#box-configurator {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
}

#sidebar-configurator {
  width: 30%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#sidebar-configurator.hidden {
  /* width: 0;
  height: 0;
  visibility: hidden;
  opacity: 0; */
  display: none;
}

#sidebar-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  padding: var(--margin-4) var(--margin-3);
  align-items: center;
  background-color: var(--secondary-color);
}

#sidebar-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--margin-3);
  padding: var(--margin-4);
  overflow-y: auto;
}

#box-dimensions-container {
  display: flex;
  flex-direction: column;
  gap: var(--margin-3);
}

#input-params,
#select-params {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--margin-3);
}

.field {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--margin-1);
}

.field label {
  font-weight: 500;
}

#sidebar-footer {
  padding: var(--margin-4);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--margin-1);
}

#product-title {
  grid-column: 2 / 3;
  font-size: var(--font-size-2);
  font-weight: 600;
  text-align: center;
}

#element-configurator {
  position: relative;
  display: flex;
  flex: 1;
  overflow: hidden;
  outline: none;
  background-color: var(--secondary-color);
}

#canvas-error {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--secondary-color);
  justify-content: center;
  align-items: center;
  gap: 1rem;
  z-index: 3;
}

/* #element-configurator canvas {
  z-index: 1;
} */

#top-menu-overlay {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--margin-3);
  padding: var(--margin-5);
  /* z-index: 2; */
}

/*editor 2d*/
#box-editor2d-container {
  position: relative;
  display: none;
  z-index: 9;
  width: 50%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--primary-color);
}

#box-editor2d-container.expand {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

/*Drag to interact*/
@keyframes changewidth {
  from {
    transform: translate(-10%);
  }
  to {
    transform: translate(10%);
  }
}

#drag-to-interact {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  --c3d-icon-color: var(--primary-color);
  animation-duration: 2s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  pointer-events: none;
}

/* background logo */
#bg-3d {
  position: absolute;
  left: 0;
  width: 20%;
  padding-bottom: 20%;
  bottom: 0;
  margin: var(--margin-5);
  pointer-events: none;
  max-width: 15rem;
  background-size: contain;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  z-index: 4;
}

/* info msg */
#info-msg {
  position: absolute;
  bottom: 0;
  z-index: 4;
  width: 50%;
  padding-bottom: var(--margin-5);
  margin-left: 25%;
  text-align: center;
  pointer-events: none;
}

/* powered logo */
#powered-logo {
  position: absolute;
  right: 0;
  width: 20%;
  padding-bottom: 20%;
  bottom: 0;
  margin: var(--margin-5);
  pointer-events: none;
  max-width: 7.5rem;
  background-size: contain;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  z-index: 4;
}

/* override select2 style */
.select2-container--default .select2-selection--multiple {
  background-color: var(--secondary-color);
  border: none;
  border-radius: var(--small-round);
  cursor: pointer;
  min-height: 3rem;
  display: flex;
  align-items: center;
  padding: var(--margin-1) var(--margin-3);
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: none;
  outline: 0;
  box-shadow: 0 0 0 2px black;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin-1);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #212121;
  border: none;
  border-radius: var(--small-round);
  color: var(--primary-color);
  margin: 0;
  padding: var(--margin-0) var(--margin-1);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary-color);
  margin-right: var(--margin-1);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--tertiary-color);
  color: var(--branding-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--branding-color);
}

.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
  background-color: var(--quaternary-color);
}

/*Media queries*/
@media (max-width: 992px) {
  html,
  body {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  html,
  body {
    font-size: 12px;
  }

  #input-params,
  #select-params {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 576px) {
  html,
  body {
    font-size: 10px;
  }
}

@media (orientation: portrait) {
  #box-configurator {
    flex-direction: column-reverse;
  }

  #sidebar-configurator {
    /* overflow-y: auto;
    font-size: 1rem;
    vertical-align: top; */
    width: 100%;
    /* pointer-events: all;
    background-color: #e6e6e6;
    display: inline-block;
    padding: 1.5rem;
    position: fixed;
    top: 50%; */
    /* height: 50vh; */
    flex: 1;
  }

  #element-configurator {
    /* position: relative; */
    width: 100%;
    /* height: 50vh; */
    flex: 1;
    /*background-color: white; */
    /* display: inline-block;
    position: fixed;
    top: 0%; */
  }

  #box-editor2d-container {
    /* overflow: hidden; */
    width: 100%;
    /* height: 50vh; */
    flex: 1;
    /* position: fixed;
    top: 50%; */
  }

  #box-editor2d-container #editor2d {
    height: 50vh;
  }

  #box-editor2d-container.expand #editor2d {
    height: 100vh;
  }

  #element-configurator.editor2d {
    width: 100%;
  }

  #input-params,
  #select-params {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /*#box-editor2d-container.editor2d {
		display: inline-block;
	}

	#element-configurator.editor2d {
		display: none;
	}*/
}