@charset "UTF-8";
.backScreenshot {
  position: absolute;
  top: 10px;
  left: 8px;
  z-index: 100;
  background: #fff;
  width: 2%;
  border: 1px solid black;
  border-radius: 6px;
}

.screenshot-toolbox button {
  font-family: Corbert-Regular, sans-serif;
}

.screen_shot {
  position: absolute;
  top: 10px;
  right: 8px;
  z-index: 100;
  background: #fff;
  width: 9%;
  border: 1px solid black;
  border-radius: 6px;
  display: none;
}
.screen_shot img {
  width: 32px;
}

.choose_piece {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 100;
}

.create_wall_surface {
  background: red;
  color: #fff;
  padding: 10px 20px;
  border-radius: 10px;
}

.create_wall_surface:hover {
  color: #fff;
  background: rgba(255, 0, 0, 0.86);
}

.panel-body {
  padding: 0 !important;
}

#screenShot #nav-bar {
  position: absolute;
  z-index: 1000;
}
#screenShot .back, #screenShot .remove, #screenShot .edit {
  position: absolute;
  top: 10px;
  left: 8px;
  z-index: 100;
  background: #fff;
  width: 35px;
  border: 1px solid black;
  border-radius: 6px;
}
#screenShot .edit {
  top: 42px;
}
#screenShot .edit img {
  width: 100%;
}
#screenShot .remove {
  top: 76px;
}
#screenShot .remove img {
  width: 100%;
}
#screenShot .frame_list {
  position: absolute;
  top: 10px;
  left: 46%;
  z-index: 10;
  font-size: 18px;
}
#screenShot .frame_list label {
  margin-right: 15px;
}
#screenShot .frame_list select {
  background: none;
  border: none;
  width: 140px;
  position: absolute;
  left: 0;
  top: 4px;
}
#screenShot .wall {
  height: 75vh;
  background-size: cover;
}
#screenShot .wall .exhibit {
  position: absolute;
  top: 20%;
  left: 5%;
  width: 240px;
  height: 215px;
  cursor: pointer;
  z-index: 100;
  background: url(../../public/assets/images/signboard.png);
  background-size: contain;
}
#screenShot .wall .exhibit span {
  position: absolute;
  bottom: 40px;
  left: 34px;
  color: #fff;
  font-size: 22px;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  background: #abfda6;
  padding: 33px 36px 32px;
  transition-property: background;
  border-radius: 4px;
  transition-duration: 0.5s;
}
#screenShot .wall .about_wall {
  position: absolute;
  top: 11%;
  right: 5%;
  width: 250px;
  height: 40%;
  z-index: 100;
}
#screenShot .wall .about_wall div {
  max-height: 100%;
  overflow: auto;
  text-align: center;
  font-size: 18px;
  font-family: Kirvy-Bold, sans-serif;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 5px 1px;
}
#screenShot .wall .about_wall div span {
  font-size: 27px;
}
#screenShot .wall .about_wall div textarea {
  width: 100%;
  min-height: 84px;
  resize: vertical;
}
#screenShot .wall .on {
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
#screenShot .wall .off {
  transform: rotateY(180deg) rotate(18deg);
  -webkit-transform: rotateY(180deg) rotate(18deg);
  -moz-transform: rotateY(180deg) rotate(18deg);
  -ms-transform: rotateY(180deg) rotate(18deg);
  -o-transform: rotateY(180deg) rotate(18deg);
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition: -webkit-transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
}
#screenShot .wall .off span {
  transform: rotateY(180deg) rotate(9deg);
  -webkit-transform: rotateY(180deg) rotate(9deg);
  -moz-transform: rotateY(180deg) rotate(9deg);
  -ms-transform: rotateY(180deg) rotate(9deg);
  -o-transform: rotateY(180deg) rotate(9deg);
  background: #fda6a6;
  padding: 33px 22px 32px;
}
#screenShot .wall .list-walls {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 27px 40px 10px rgba(14, 14, 14, 0.78);
}
#screenShot .wall .list-walls button {
  color: black;
  background: white;
  text-transform: capitalize;
  font-size: 20px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
}
#screenShot .wall .list-walls select {
  width: 200px;
  height: 30px;
  border-color: #000;
}
#screenShot .wall .list-images {
  width: 100%;
  height: 100%;
  box-shadow: 0 27px 40px 10px rgba(14, 14, 14, 0.78);
  text-align: center;
  padding-top: 4%;
}
#screenShot .wall .list-images .walls-image {
  text-align: center;
}
#screenShot .wall .list-images .walls-image p {
  margin-top: 3%;
}
#screenShot .wall .list-images .ps_image {
  position: relative;
}
#screenShot .wall .list-images .ps_image .image {
  background-size: cover;
  background-position: center;
  background-color: #fff;
  width: 100%;
  height: 100%;
}
#screenShot .wall .list-images .ps_image img {
  max-height: 50vh;
  max-width: 80%;
  -webkit-box-shadow: 0 12px 6px 8px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0 12px 6px 8px rgba(0, 0, 0, 0.55);
  box-shadow: 0 12px 6px 8px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  background-color: #000;
  border-image-outset: 1px;
}
#screenShot .wall .list-images .fancy {
  border: 46px solid transparent;
  border-image: url(/public/assets/images/frame/fancy.png) 502 stretch;
}
#screenShot .wall .list-images .silver {
  border: 52px solid transparent;
  border-image: url(/public/assets/images/frame/silver.png) 186 stretch;
}
#screenShot .wall .list-images .wood {
  border: 42px solid transparent;
  border-image: url(/public/assets/images/frame/wood.png) 62 stretch;
}
#screenShot .wall .list-images .red {
  border: 46px solid transparent;
  border-image: url(/public/assets/images/frame/red.png) 170 stretch;
}
#screenShot .wall .list-images .black {
  border: 36px solid transparent;
  border-image: url(/public/assets/images/frame/black.png) 42 stretch;
}
#screenShot .wall .walls-form label {
  font-size: 22px;
  color: #1b1b1b;
  background: rgba(255, 255, 255, 0.54);
  padding: 2px 6px;
}
#screenShot .wall .walls-form textarea {
  height: 100px;
  width: 300px;
  resize: unset;
}
#screenShot .floor {
  height: 25vh;
  box-shadow: 0 -4px 46px 20px rgba(14, 14, 14, 0.78);
  border-top: 1px solid black;
  background-size: 100% 100%;
}
#screenShot .floor .floor_square {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#screenShot .floor .floor_square .dropdown-menu {
  bottom: 100%;
  top: unset;
}
#screenShot .floor .list-floors button {
  color: black;
  background: white;
  text-transform: capitalize;
  font-size: 20px;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
}
#screenShot .floor .list-floors select {
  width: 200px;
  height: 30px;
  border-color: #000;
}
#screenShot #removeImageModal .modal-content {
  font-size: 25px;
  padding: 4% 6% 2%;
  border-radius: unset;
  width: 80%;
  margin: auto;
}
#screenShot #removeImageModal .modal-content .modal-btn {
  text-align: center;
  padding-top: 10px;
}
#screenShot #removeImageModal .modal-content .modal-btn .btn {
  background: #fff;
  border: 2px dashed;
  border-radius: 18px;
  padding: 2px 12px;
  font-size: 15px;
  text-transform: uppercase;
  width: 58px;
  margin: 0 8px;
}

.waterMark {
  position: absolute;
  text-align: center;
  background: rgba(255, 255, 255, 0.7411764706);
  color: #7b6c6c;
  padding: 9px 8px;
  border-radius: 22px;
  font-family: Corbert-Regular, sans-serif;
  font-size: 14px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.41), 0 10px 10px rgba(0, 0, 0, 0.39);
}
.waterMark img {
  box-shadow: none;
  border: none;
  margin: 3px 0;
}

.dropdown-menu {
  width: 100%;
}
.dropdown-menu .dropdown-submenu {
  text-align: center;
}
.dropdown-menu .dropdown-submenu .sub-dropdown {
  position: relative;
  max-height: 120px;
  overflow: auto;
}
.dropdown-menu .dropdown-submenu .sub-dropdown .sub-item a:hover {
  background: #ececec;
}

#infoModal .modal-content {
  max-width: 206px;
  margin: 0 auto;
}
#infoModal .modal-content .modal-header {
  border: none;
}
#infoModal .modal-content .modal-body input {
  border-radius: 10px;
}
#infoModal .modal-content .modal-footer {
  border: none;
}
#infoModal .modal-content .modal-footer button {
  background: red;
  color: #fff;
  padding: 2px 6px;
}

#imagesModal .modal-content {
  background: #d6d6d6;
}
#imagesModal .modal-content .modal-body {
  max-height: 395px;
  overflow: auto;
}
#imagesModal .modal-content .imageBox {
  padding: 5px;
  background: white;
}
#imagesModal .modal-content .imageBox .image {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
}
#imagesModal .modal-content .imageBox .image .already-chosen {
  width: 100%;
  height: 100%;
  background: rgba(158, 226, 255, 0.76);
  text-align: center;
  padding: 50px 10px 0;
  font-size: 22px;
}
#imagesModal .modal-content .imageBox .chosen::after {
  content: "✓";
  font-size: 100px;
  text-align: center;
  color: green;
  background: rgba(204, 204, 204, 0.6509803922);
  position: absolute;
  width: 95%;
  height: 95%;
}

.close_screen {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 2px 8px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid black;
  z-index: 100;
  background: rgba(254, 0, 0, 0.6392156863);
  border-radius: 25px;
}

.preview {
  position: absolute;
  top: 5%;
  right: 10%;
  width: 80%;
  height: 80%;
  text-align: center;
}
.preview .loader {
  width: 200px;
  height: 200px;
  margin-top: 10%;
}
.preview .preview_img {
  max-width: 100%;
  height: 100%;
  border: 1px solid #000;
}