html {
  min-height: 100vh;
}

body {
  width: 100vw;
  min-height: 100vh;
}

.main-nav button.active {
    background-image: url(icons/btn_selected_bg.png);
    background-position: center 53%;
    background-repeat: no-repeat;
    background-size: auto 150%;
}

.three-d-viewer {
  height: 100%;
    width: 100%;
    min-height: 500px;
    min-width: 97vw;
    max-width: 100%;
  background: radial-gradient(circle, rgba(175,175,175,0.24702380952380953) 0%, rgba(0,0,0,0.050945378151260545) 80%, rgba(255,255,255,0) 100%);
}

.three-d-controls {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 1rem;
    top: 25%;
}

.three-d-control {
  font-size: 1.5rem;
  background: rgb(17, 24, 39);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-bottom: .5rem;
  border: none;
  line-height: 1;
}

.three-d-control-zoom-out {
  font-size: 2rem;
}

.three-d-control-rotate img {
  width: 15px;
  vertical-align: baseline;
}

#main-nav > .row {
  column-gap: .5rem;
  @media (max-width: 991px) {  
    padding: 0 20%;
  }
}

.carport-configurator {
  position: absolute;
  top: 6rem;
  right: 1rem;
  padding: 1.2rem;
  background: #0d0d0db5;
  width: 350px;
  z-index: 5;
}

@media (max-width: 767px) {  
  .carport-configurator {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top:auto;
    width: 100%;
    max-width: 100%;
    border-top: 1px solid #ffc107;
    background: #0d0d0d;
    padding-top: 0.2rem;
  }
}


.carport-confiurator__step {
  background: none;
  border: 0;
  padding: 0;
  cursor: default !important;
}



.carport-configurator button.color-btn {
  width: 3rem;
  height: 3rem;
  border: 0;
}

.ccm-widget-colorpicker.shamsia-color-picker {
  min-height: 3.5rem;
  min-width: 8rem;
  border-color: #929292;;
}

.ccm-widget-colorpicker.shamsia-color-picker .sp-dd {
  background-color: #00000059;
}