/* width */

::-webkit-scrollbar {

  width: 10px;

  padding-left: 5px;

}



/* Track */

::-webkit-scrollbar-track {

  background: #fefefe;

}



/* Handle */

::-webkit-scrollbar-thumb {

  background: #888;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #555;

}

.viz-item {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  max-width: 100% !important;

  width: 1200px;

}

.viz-item button,

.viz-item #orderForm input[type="submit"] {

  background-color: #03814a;

  border-style: solid;

  border-color: #03814a;

  border-radius: 0px 0px 0px 0px;

  box-shadow: 11px 11px 28px 1px rgba(0, 0, 0, 0.25);

  color: #fff;

}

.viz-item button:focus,

.viz-item #orderForm input[type="submit"]:focus {

  background-color: #fff;

  color: #03814a;

  outline: none;

}

.viz-item button:hover,

.viz-item #orderForm input[type="submit"]:hover {

  background-color: #fff;

  color: #03814a;

  cursor: pointer;

}

.viz-item #orderForm {

  margin-top: 30px;

}

.viz-item #orderForm input:not([type="submit"]) {

  height: 20px;

  width: 300px;

}

.viz-item #orderForm > div {

  margin-bottom: 15px;

}

.viz-item #orderForm label {

  display: block;

}

.viz-item #orderForm strong {

  margin-bottom: 20px;

}

.viz-item #palettes {

  display: flex;

  flex-wrap: wrap;

  margin: 0 -3px;

  width: 100%;

}

.viz-item #palettes div {

  flex-basis: calc(6.25% - 6px);

  height: 40px;

  margin: 3px;

  position: relative;

}

.viz-item #palettes div:hover {

  cursor: pointer;

}

.viz-item #palettes span {

  display: none;

}

.viz-item #palettes-heading {

  width: 100%;

}

.viz-item .viz-kitchens {

  overflow-y: scroll;

  width: 16%;

}

.viz-item .viz-kitchens img {

  display: block;

  margin-bottom: 10px;

  width: 100%;

}

.viz-item .viz-kitchens-item {

  position: relative;

}

.viz-item .viz-kitchens-item:hover {

  cursor: pointer;

}

.viz-item .viz-name {

  width: 100%;

}

.viz-item .viz-poster {

  height: fit-content;

  width: 83%;

  position: relative;

}

.viz-item .viz-poster #colors {

  position: absolute;

  top: 0;

  height: 100%;

  width: 100%;

  z-index: 100;

}

.viz-item .viz-poster #colors .input-wrapper {

  position: absolute;

}

.viz-item .viz-poster #colors .input-wrapper-top {

  top: 10px;

  right: 10px;

}

.viz-item .viz-poster #colors .color-picker {

  background: #fff;

  display: none;

  flex-wrap: wrap;

  justify-content: space-between;

  padding: 10px;

  width: 200px;

}

.viz-item .viz-poster #colors .color-picker-top {

  position: absolute;

  top: 50px;

  right: 0;

}

.viz-item .viz-poster #colors .color-picker-bottom {

  position: absolute;

  bottom: 50px;

  right: 0;

}

.viz-item .viz-poster #colors .color-picker.visible {

  display: flex;

}

.viz-item .viz-poster #colors .color-picker .color-tile {

  aspect-ratio: 1 / 1;

  border: 1px solid #e5e5e5;

  cursor: pointer;

  margin-bottom: 5px;

  width: calc(20% - 5px);

}

.viz-item .viz-poster #colors .input-wrapper-bottom {

  bottom: 10px;

  right: 10px;

}

.viz-item .viz-poster #colors .repeat_img {

  position: absolute;

  top: 10px;

  left: 10px;

}

.viz-item .viz-poster svg {

  position: absolute;

  height: 100%;

  width: 100%;

  z-index: 20;

}

.viz-item .viz-poster svg:not(.glass) polygon {

  fill: #fff;

}

.viz-item .viz-poster .glass {

  position: absolute;

  background-size: cover !important;

  background-repeat: no-repeat !important;

  background-position: center !important;

  z-index: 1;

}

.viz-item .viz-poster .glass.bg-repeat {

  background-repeat: repeat !important;

  background-size: contain !important;

  background-position: left !important;

}

.viz-item .viz-poster .kitchen-template {

  display: block;

  height: auto;

  position: relative;

  width: 100%;

  z-index: 91;

}

.viz-item .viz-poster img {

  width: 100%;

  height: auto;

}

.viz-item .viz-poster #order-design {

  bottom: 10px;

  left: 10px;

  position: absolute;

}

.viz-item #galleries {

  overflow: hidden;

  width: 100%;

}

.viz-item #galleries .gallery .gallery_item {

  align-content: flex-start;

  display: none;

  width: calc( 100% - 60px);

}

.viz-item #galleries .gallery:first-child .gallery_item:nth-child(2) {

  display: flex;

}

.viz-item #galleries .gallery:not(.active) {

  display: none;

}

.viz-item #galleries .gallery_item {

  display: flex;

  flex-direction: column;

  gap: 5px;

  margin: 30px;

  overflow-y: scroll;

  max-height: 900px;

  flex-wrap: wrap;

}

.viz-item #galleries .gallery_item .gallery_item_color {

  cursor: pointer;

  display: block;

  height: 150px;

  position: relative;

  width: calc(100% / 3 - 5px);

  object-fit: cover;

}

.viz-item #galleries .gallery_item .gallery_item_image {

  box-sizing: border-box;

  cursor: pointer;

  position: relative;

  width: calc(100% / 3 - 5px);

}

.viz-item #galleries .gallery_item .gallery_item_image img {

  display: block;

  height: 150px;

  width: 100%;

  object-fit: cover;

}

.viz-item #galleries .gallery_item .gallery_item_color::before,

.viz-item #galleries .gallery_item .gallery_item_image::before,

.viz-item .viz-kitchens-item::before,

.viz-item #galleries .gallery_item .wp-block-gallery .wp-block-image::before {

  background-color: rgba(0,0,0,0.5);

  content: '';

  height: 100%;

  left: 0;

  opacity: 0;

  pointer-events: none;

  position: absolute;

  top: 0;

  transition: all .2s ease-in-out;

  width: 100%;

}

.viz-item #galleries .gallery_item .gallery_item_color.active::before,

.viz-item #galleries .gallery_item .gallery_item_color:hover::before,

.viz-item #galleries .gallery_item .gallery_item_image.active::before,

.viz-item #galleries .gallery_item .gallery_item_image:hover::before,

.viz-item .viz-kitchens-item.active::before,

.viz-item .viz-kitchens-item:hover::before,

.viz-item #galleries .gallery_item .wp-block-gallery .wp-block-image:hover::before {

  opacity: 1;

}

.viz-item #galleries .gallery_item .gallery_item_color::before,

.viz-item #galleries .gallery_item .gallery_item_image::before {

  height: 100% ;

  width: 100%;

}

.viz-item #galleries .gallery_item .wp-block-gallery .wp-block-image img {

  height: 100%;

  object-fit: cover;

}

.viz-item #gallery_titles {

  display: flex;

  flex-wrap: wrap;

  margin-top: 15px;

}

.viz-item #gallery_titles .gallery_title {

  margin: 5px 0;

  height: 40px;

  width: 16.66%;

}

@media (min-width: 1200px) {



  .viz-item .viz-poster .top_color_container,

  .viz-item .viz-poster .bottom_color_container {

    z-index: 10;

  }

  .viz-item #gallery_titles .gallery_title.active {

    background: #000;

    color: #fff;

  }

}





@media (max-width: 768px) {

  .viz-item #palettes div {

    flex-basis: calc(12.5% - 6px);

    height: 40px;

    margin: 3px;

  }

  .viz-item .viz-kitchens,

  .viz-item .viz-poster {

    width: 100%;

  }

  .viz-item .viz-kitchens {

    display: flex;

    flex-wrap: wrap;

    height: fit-content !important;

    margin-bottom: 30px;

  }

  .viz-item .viz-kitchens img {

    height: 100%;

    object-fit: cover;

  }

  .viz-item .viz-kitchens-item {

    width: 25%;

  }

}



@media (max-width: 540px) {

  .viz-item #galleries .gallery_item {

    max-height: 600px;

  }

  .viz-item #galleries .gallery_item .gallery_item_image img {

    height: 100px;

    width: 150px;

  }

  .viz-item #gallery_titles .gallery_title {

    width: 33.33%;

  }

}