/* Fonts */
.system-uicons--arrow-right {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath fill='none' stroke='%236F6F71' stroke-linecap='round' stroke-linejoin='round' d='m13.5 6.497l4 4.002l-4 4.001m-9-4h13' stroke-width='1'/%3E%3C/svg%3E");
  vertical-align: middle;
}

.iconamoon--zoom-in {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21l-4.343-4.343m0 0A8 8 0 1 0 5.343 5.343a8 8 0 0 0 11.314 11.314M11 8v6m-3-3h6'/%3E%3C/svg%3E");
}

.weui--search-outlined {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236F6F71' fill-rule='evenodd' d='m16.31 15.561l4.114 4.115l-.848.848l-4.123-4.123a7 7 0 1 1 .857-.84M16.8 11a5.8 5.8 0 1 0-11.6 0a5.8 5.8 0 0 0 11.6 0' stroke-width='0.5' stroke='%236F6F71'/%3E%3C/svg%3E");
}

.iconamoon--arrow-down-2-thin {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='m7 10l5 5l5-5' stroke-width='1'/%3E%3C/svg%3E");
}

.material-symbols-light--logout {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5.616 20q-.691 0-1.153-.462T4 18.384V5.616q0-.691.463-1.153T5.616 4h6.403v1H5.616q-.231 0-.424.192T5 5.616v12.769q0 .23.192.423t.423.192h6.404v1zm10.846-4.461l-.702-.72l2.319-2.319H9.192v-1h8.887l-2.32-2.32l.702-.718L20 12z' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
  opacity: 0.7;
}

.material-symbols-light--close-rounded {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m12 12.708l-5.246 5.246q-.14.14-.344.15t-.364-.15t-.16-.354t.16-.354L11.292 12L6.046 6.754q-.14-.14-.15-.344t.15-.364t.354-.16t.354.16L12 11.292l5.246-5.246q.14-.14.345-.15q.203-.01.363.15t.16.354t-.16.354L12.708 12l5.246 5.246q.14.14.15.345q.01.203-.15.363t-.354.16t-.354-.16z' stroke-width='0.5' stroke='%23fff'/%3E%3C/svg%3E");
}


/* Maine Design START */
:root {
  --sidebar-width: 260px;
  --accent: #2563eb;
  --card: #ffffff;
  --muted: #6b7280;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #161B21;
  position: relative;
}

/* Circle highlight */
/* Bottom-to-top linear gradient */
body::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* background: linear-gradient(to top,
      rgba(195, 23, 255, 0.1),
      rgba(22, 27, 33, 1)
    ); */
    background: linear-gradient(to bottom,
      rgba(0, 16, 68, 0),
      rgba(195, 23, 255, 0.2)
    );
    /* linear-gradient(180deg, rgba(195, 23, 255, 0.29) 0%, rgba(0, 16, 68, 0.01) 100%); */
  pointer-events: none;
  z-index: -2;
}



/* Radial purple circle glow */
body::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  top: 120px;
  right: 120px;
  background: radial-gradient(circle,
      rgba(195, 23, 255, 0.15) 0%,
      rgba(195, 23, 255, 0.02) 50%,
      rgba(22, 27, 33, 0) 80%
    );
  pointer-events: none;
  z-index: -1;
}

.app {
  display: flex;
  min-height: 100vh;
  transition: 0.25s ease;
}

/* MAIN AREA */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  width: 100%;
}

/* CONTENT GRID */
.content {
  padding: 10px 0px;
  /*    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;*/
}

.card {
  background: var(--card);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}







/*CSS za onClick image flip*/
.flip-container {
  width: 100%;
  height: 65vh;
  position: relative;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}

.flipcard {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}

.flipcard div {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flipcard img {
  width: 100%;
  height: 100%;
}

.flipcard .back {

  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipcard.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-button {
  border: none;
  position: absolute;
  right: 35px;
  background: no-repeat;
  bottom: 25px;
}

.flip-button span {
  width: 30px;
  height: 30px;
}

.mobileModelzoom_button {
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50px;
  position: absolute;
  bottom: 15px;
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mobileModelzoom_button span {
  width: 24px;
  height: 24px;
}

.model-popup-box .modal-content {
  border: 2px solid #6C089F;
}

.model-popup-box .modal-content .modal-title {
  color: #6C089F;
}

.model-popup-box .rightproductname .flip-container {
  max-width: 100%;
  height: 100%;
}

.common-btn {
  border-radius: 11px;
  color: #fff;
  font-weight: 500;
  padding: 8px 16px;
}


.suspend-btn {
  border: 1px solid #481364;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  /* background: linear-gradient(180deg, rgba(114, 4, 4, 0.29) 8%, rgba(0, 16, 68, 0.01) 100%); */
  background: linear-gradient(180deg, rgba(114, 4, 4, 0.29) 0%, rgba(0, 16, 68, 0.01) 100%);

  &:hover {
    color: #fff;
    border: 1px solid #481364;
    background: linear-gradient(-90deg, rgba(114, 4, 4, 0.29) 8%, rgba(0, 16, 68, 0.01) 100%);
  }
}

.abanded-btn {
  border: 1px solid #7C0101;
  background: linear-gradient(90deg,
      rgba(255, 30, 23, 0.29) 0%,
      rgba(255, 30, 23, 0.29) 100%);
  transition: 0.25s ease-in-out;

  &:hover {
    background: linear-gradient(90deg,
        rgba(255, 30, 23, 0.45) 0%,
        rgba(255, 30, 23, 0.45) 100%);
    color: #fff;
  }
}

.result-btn {
  border: 1px solid #481364;
  background: linear-gradient(180deg, rgba(7, 251, 68, 0.29) 0%, rgba(0, 16, 68, 0.01) 100%);
  transition: background 0.3s ease-in-out;

  &:hover {
    color: #fff;
    border: 1px solid #481364;
    background: linear-gradient(-90deg, rgba(7, 251, 68, 0.29) 0%, rgba(0, 16, 68, 0.01) 100%);
  }
}

.circle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
}

.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring__circle {
  stroke-dasharray: 377;
  /* calculated: 2 * π * r (r=60) */
  stroke-dashoffset: 377;
  transition: stroke-dashoffset 0.1s linear;
}

.percent-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: bold;
  color: #fff;
}

.flip-btn {
  border: none;
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: #fff;
  border-radius: 50px;
  width: 30px;
  height: 30px;
  line-height: 10px;
}

.flip-btn span {
  width: 18px;
  height: 18px;
}

.model-flip-btn {
  right: 20px;
  bottom: 20px;
}

.mobileModelzoom_button.position_icon_left {
  right: inherit;
  left: 5px;
  bottom: 5px;
  /* width: 24px;
        height: 24px; */
}

.proceed-btn{
  display: inline-block;
}
.flip-modal-content{
 
  .modal-content{
    .modal-body{
      padding: 10px;
    }
  }
}

.card-active{
  img{
         border: 2px solid #BA1EFF !important;
  }
}
.card-hover{
  img{
        border: 2px solid #1D212D;
  }
  &:hover{
    img{
       border: 2px solid #BA1EFF;
    }
  }
}



/* RESPONSIVE */
@media (max-width: 1024px) {
  .content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {


  .flip-btn {
    width: 24px;
    height: 24px;
    right: 5px;
    bottom: 5px;
  }

  .flip-btn span {
    width: 14px;
    height: 14px;
  }

  .model-flip-btn {
    right: 20px;
    bottom: 20px;
  }

  .mobileModelzoom_button.position_icon_left {
    width: 24px;
    height: 24px;
  }

  .mobileModelzoom_button.position_icon_left span {
    width: 18px;
    height: 18px;
  }

  .content {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-110%);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: 0px 0px 20px 4px #000000a6;
    background: linear-gradient(180deg, #1F2433 0%, #151a28 100%);
  }

  .logo img {
    width: 170px;
  }

  .main {
    width: 100%;
  }
  .mobileModelzoom_button.position_icon_left {
    right: inherit;
    left: 5px;
    bottom: 5px;
    width: 24px;
    height: 24px;
  }

  .mobileModelzoom_button.position_icon_left span {
    width: 18px;
    height: 18px;
  }
}