body {
    background: #f5f5f5;
    padding: 20px;
  }

  .case-preview {
    position: relative;
    width: 300px;
    height: 600px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
  }

  .camera-lens {
    position: absolute;
    top: 45px;
    left: 30px;
    width: 100px;
    height: 100px;
    background: no-repeat center/contain;
    z-index: 2;
  }

  .image-tile {
    background-size: cover;
    background-position: center;
    /*border-radius: 5px;*/
    overflow: hidden;
    cursor: pointer;
  }

  .color-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    margin: 8px;
    border: 2px solid #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  }

  #colorOptions {
    max-width: 360px;
  }

  #colorOptions .color-dot:nth-child(n+7) {
    margin-top: 10px;
  }

  .dropzone .dz-preview .dz-details,
  .dropzone .dz-preview .dz-progress {
    display: none !important;
  }

  .dropzone .dz-preview {
    position: relative;
  }

  .dropzone .dz-preview .dz-image {
    border-radius: 6px;
    width: 60px;
    height: 60px;
    transition: none;
  }

  .dropzone .dz-preview:hover .dz-image {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .preview-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    margin: 5px;
  }

  .dropzone {
    min-height: 100px;
    border: 2px dashed #ccc;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .dropzone .dz-message {
    margin: 0;
    width: 100%;
  }

  .hidden-file-input {
    display: none;
  }
  
  .color-dot.selected {
    border: 2px solid #000;
    box-shadow: 0 0 0 2px #fff;
  }

  /* Frame layouts */
  .frame-1 { display: none; }
  .frame-1.active { display: block; }
  .frame-1 .tile-1-0 {
    position: absolute;
    top: 34px;
    left: 22px;
    width: 253px;
    height: 523px;
    border-radius: 40px;
  }

  .frame-2 { display: none; }
  .frame-2.active { display: block; }
  .frame-2 .tile-2-0 {
    position: absolute;
    top: 155px;
    left: 24px;
    width: 250px;
    height: 195px;
  }
  .frame-2 .tile-2-1 {
    position: absolute;
    top: 362px;
    left: 25px;
    width: 248px;
    height: 195px;
    border-bottom-left-radius: 41px;
    border-bottom-right-radius: 41px;
  }

  .frame-3 { display: none; }
  .frame-3.active { display: block; }
  .frame-3 .tile-3-0 {
    position: absolute;
    top: 152px;
    left: 24px;
    width: 249px;
    height: 130px;
  }
  .frame-3 .tile-3-1 {
    position: absolute;
    top: 291px;
    left: 25px;
    width: 248px;
    height: 130px;
  }
  .frame-3 .tile-3-2 {
    position: absolute;
    top: 428px;
    left: 25px;
    width: 248px;
    height: 130px;
    border-bottom-left-radius: 41px;
    border-bottom-right-radius: 41px;
  }

  .frame-4 { display: none; }
  .frame-4.active { display: block; }
  .frame-4 .tile-4-0 {
    position: absolute;
    top: 153px;
    left: 24px;
    width: 120px;
    height: 200px;
  }
  .frame-4 .tile-4-1 {
    position: absolute;
    top: 153px;
    left: 153px;
    width: 120px;
    height: 200px;
  }
  .frame-4 .tile-4-2 {
    position: absolute;
    top: 360px;
    left: 25px;
    width: 120px;
    height: 196px;
    border-bottom-left-radius: 37px;
  }
  .frame-4 .tile-4-3 {
    position: absolute;
    top: 360px;
    left: 153px;
    width: 120px;
    height: 197px;
    border-bottom-right-radius: 39px;
  }

  .frame-5 { display: none; }
  .frame-5.active { display: block; }
  .frame-5 .tile-5-0 {
    position: absolute;
    top: 155px;
    left: 24px;
    width: 120px;
    height: 130px;
  }
  .frame-5 .tile-5-1 {
    position: absolute;
    top: 155px;
    left: 154px;
    width: 120px;
    height: 130px;
  }
  .frame-5 .tile-5-2 {
    position: absolute;
    top: 295px;
    left: 24px;
    width: 120px;
    height: 130px;
  }
  .frame-5 .tile-5-3 {
    position: absolute;
    top: 295px;
    left: 154px;
    width: 119px;
    height: 130px;
  }
  .frame-5 .tile-5-4 {
    position: absolute;
    top: 435px;
    left: 26px;
    width: 246px;
    height: 122px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .frame-6 { display: none; }
  .frame-6.active { display: block; }
  .frame-6 .tile-6-0 {
    position: absolute;
    top: 155px;
    left: 24px;
    width: 120px;
    height: 130px;
  }
  .frame-6 .tile-6-1 {
    position: absolute;
    top: 155px;
    left: 154px;
    width: 120px;
    height: 130px;
  }
  .frame-6 .tile-6-2 {
    position: absolute;
    top: 295px;
    left: 24px;
    width: 120px;
    height: 130px;
  }
  .frame-6 .tile-6-3 {
    position: absolute;
    top: 295px;
    left: 154px;
    width: 120px;
    height: 130px;
  }
  .frame-6 .tile-6-4 {
    position: absolute;
    top: 435px;
    left: 25px;
    width: 120px;
    height: 121px;
    border-bottom-left-radius: 40px;
  }
  .frame-6 .tile-6-5 {
    position: absolute;
    top: 435px;
    left: 154px;
    width: 120px;
    height: 121px;
    border-bottom-right-radius: 40px;
  }

  .frame-7 { display: none; }
  .frame-7.active { display: block; }
  .frame-7 .tile-7-0 {
    position: absolute;
    top: 35px;
    left: 136px;
    width: 138px;
    height: 115px;
    border-top-right-radius: 45px;
  }
  .frame-7 .tile-7-1 {
    position: absolute;
    top: 158px;
    left: 25px;
    width: 120px;
    height: 130px;
  }
  .frame-7 .tile-7-2 {
    position: absolute;
    top: 158px;
    left: 154px;
    width: 120px;
    height: 130px;
  }
  .frame-7 .tile-7-3 {
    position: absolute;
    top: 297px;
    left: 25px;
    width: 120px;
    height: 130px;
  }
  .frame-7 .tile-7-4 {
    position: absolute;
    top: 297px;
    left: 153px;
    width: 120px;
    height: 130px;
  }
  .frame-7 .tile-7-5 {
    position: absolute;
    top: 437px;
    left: 25px;
    width: 120px;
    height: 120px;
    border-bottom-left-radius: 40px;
  }
  .frame-7 .tile-7-6 {
    position: absolute;
    top: 437px;
    left: 153px;
    width: 120px;
    height: 120px;
    border-bottom-right-radius: 40px;
  }

  .frame-8 { display: none; }
  .frame-8.active { display: block; }
  .frame-8 .tile-8-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 115px;
  border-top-right-radius: 45px;
  }
  .frame-8 .tile-8-1 {
    position: absolute;
    top: 158px;
    left: 25px;
    width: 120px;
    height: 130px;
  }
  .frame-8 .tile-8-2 {
    position: absolute;
    top: 158px;
    left: 154px;
    width: 120px;
    height: 130px;
  }
  .frame-8 .tile-8-3 {
    position: absolute;
    top: 295px;
    left: 25px;
    width: 78px;
    height: 130px;
  }
  .frame-8 .tile-8-4 {
    position: absolute;
    top: 295px;
    left: 111px;
    width: 78px;
    height: 130px;
  }
  .frame-8 .tile-8-5 {
    position: absolute;
    top: 295px;
    left: 196px;
    width: 78px;
    height: 130px;
  }
  .frame-8 .tile-8-6 {
    position: absolute;
    top: 433px;
    left: 26px;
    width: 120px;
    height: 123px;
    border-bottom-left-radius: 40px;
  }
  .frame-8 .tile-8-7 {
    position: absolute;
    top: 433px;
    left: 153px;
    width: 120px;
    height: 124px;
    border-bottom-right-radius: 40px;
  }

  .frame-9 { display: none; }
  .frame-9.active { display: block; }
  .frame-9 .tile-9-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 115px;
  border-top-right-radius: 45px;
  }
  .frame-9 .tile-9-1 {
    position: absolute;
    top: 158px;
    left: 25px;
    width: 78px;
    height: 130px;
  }
  .frame-9 .tile-9-2 {
    position: absolute;
    top: 158px;
    left: 111px;
    width: 78px;
    height: 130px;
  }
  .frame-9 .tile-9-3 {
    position: absolute;
    top: 158px;
    left: 196px;
    width: 78px;
    height: 130px;
  }
  .frame-9 .tile-9-4 {
    position: absolute;
    top: 295px;
    left: 25px;
    width: 120px;
    height: 130px;
  }
  .frame-9 .tile-9-5 {
    position: absolute;
    top: 295px;
    left: 154px;
    width: 120px;
    height: 130px;
  }
  .frame-9 .tile-9-6 {
    position: absolute;
    top: 433px;
    left: 26px;
    width: 78px;
    height: 122px;
    border-bottom-left-radius: 36px;
  }
  .frame-9 .tile-9-7 {
    position: absolute;
    top: 433px;
    left: 111px;
    width: 78px;
    height: 123px;
  }
  .frame-9 .tile-9-8 {
    position: absolute;
    top: 433px;
    left: 195px;
    width: 78px;
    height: 123px;
    border-bottom-right-radius: 40px;
  }

  .frame-10 { display: none; }
  .frame-10.active { display: block; }
  .frame-10 .tile-10-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 115px;
  border-top-right-radius: 45px;
  }
  .frame-10 .tile-10-1 {
    position: absolute;
    top: 155px;
    left: 25px;
    width: 120px;
    height: 100px;
  }
  .frame-10 .tile-10-2 {
    position: absolute;
    top: 155px;
    left: 154px;
    width: 120px;
    height: 100px;
  }
  .frame-10 .tile-10-3 {
    position: absolute;
    top: 260px;
    left: 25px;
    width: 78px;
    height: 100px;
  }
  .frame-10 .tile-10-4 {
    position: absolute;
    top: 260px;
    left: 111px;
    width: 78px;
    height: 100px;
  }
  .frame-10 .tile-10-5 {
    position: absolute;
    top: 260px;
    left: 196px;
    width: 78px;
    height: 100px;
  }
  .frame-10 .tile-10-6 {
    position: absolute;
    top: 366px;
    left: 25px;
    width: 120px;
    height: 100px;
  }
  .frame-10 .tile-10-7 {
    position: absolute;
    top: 366px;
    left: 152px;
    width: 120px;
    height: 100px;
  }
  .frame-10 .tile-10-8 {
    position: absolute;
    top: 472px;
    left: 25px;
    width: 120px;
    height: 85px;
    border-bottom-left-radius: 40px;
  }
  .frame-10 .tile-10-9 {
    position: absolute;
    top: 472px;
    left: 152px;
    width: 120px;
    height: 85px;
    border-bottom-right-radius: 40px;
  }

  .frame-11 { display: none; }
  .frame-11.active { display: block; }
  .frame-11 .tile-11-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 115px;
  border-top-right-radius: 45px;
  }
  .frame-11 .tile-11-1 {
    position: absolute;
    top: 155px;
    left: 25px;
    width: 121px;
    height: 100px;
  }
  .frame-11 .tile-11-2 {
    position: absolute;
    top: 155px;
    left: 152px;
    width: 122px;
    height: 100px;
  }
  .frame-11 .tile-11-3 {
    position: absolute;
    top: 260px;
    left: 25px;
    width: 78px;
    height: 100px;
  }
  .frame-11 .tile-11-4 {
    position: absolute;
    top: 260px;
    left: 110px;
    width: 80px;
    height: 100px;
  }
  .frame-11 .tile-11-5 {
    position: absolute;
    top: 260px;
    left: 196px;
    width: 78px;
    height: 100px;
  }
  .frame-11 .tile-11-6 {
    position: absolute;
    top: 367px;
    left: 26px;
    width: 78px;
    height: 100px;
  }
  .frame-11 .tile-11-7 {
    position: absolute;
    top: 367px;
    left: 110px;
    width: 80px;
    height: 100px;
  }
  .frame-11 .tile-11-8 {
    position: absolute;
    top: 367px;
    left: 195px;
    width: 78px;
    height: 100px;
  }
  .frame-11 .tile-11-9 {
    position: absolute;
    top: 472px;
    left: 25px;
    width: 121px;
    height: 84px;
    border-bottom-left-radius: 40px;
  }
  .frame-11 .tile-11-10 {
    position: absolute;
    top: 472px;
    left: 152px;
    width: 121px;
    height: 84px;
    border-bottom-right-radius: 40px;
  }

  .frame-12 { display: none; }
  .frame-12.active { display: block; }
  .frame-12 .tile-12-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 125px;
  border-top-right-radius: 45px;
  }
  .frame-12 .tile-12-1 {
    position: absolute;
    top: 165px;
    left: 25px;
    width: 121px;
    height: 100px;
  }
  .frame-12 .tile-12-2 {
    position: absolute;
    top: 165px;
    left: 152px;
    width: 122px;
    height: 100px;
  }
  .frame-12 .tile-12-3 {
    position: absolute;
    top: 270px;
    left: 25px;
    width: 78px;
    height: 100px;
  }
  .frame-12 .tile-12-4 {
    position: absolute;
    top: 270px;
    left: 110px;
    width: 80px;
    height: 100px;
  }
  .frame-12 .tile-12-5 {
    position: absolute;
    top: 270px;
    left: 196px;
    width: 78px;
    height: 100px;
  }
  .frame-12 .tile-12-6 {
    position: absolute;
    top: 377px;
    left: 26px;
    width: 78px;
    height: 100px;
  }
  .frame-12 .tile-12-7 {
    position: absolute;
    top: 377px;
    left: 110px;
    width: 80px;
    height: 100px;
  }
  .frame-12 .tile-12-8 {
    position: absolute;
    top: 377px;
    left: 195px;
    width: 78px;
    height: 100px;
  }
  .frame-12 .tile-12-9 {
    position: absolute;
    top: 482px;
    left: 26px;
    width: 78px;
    height: 75px;
    border-bottom-left-radius: 40px;
  }
  .frame-12 .tile-12-10 {
    position: absolute;
    top: 482px;
    left: 110px;
    width: 78px;
    height: 75px;
  }
  .frame-12 .tile-12-11 {
    position: absolute;
    top: 482px;
    left: 195px;
    width: 78px;
    height: 75px;
    border-bottom-right-radius: 40px;
  }

  .frame-13 { display: none; }
  .frame-13.active { display: block; }
  .frame-13 .tile-13-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 125px;
  border-top-right-radius: 45px;
  }
  .frame-13 .tile-13-1 {
    position: absolute;
    top: 165px;
    left: 25px;
    width: 78px;
    height: 100px;
  }
  .frame-13 .tile-13-2 {
    position: absolute;
    top: 165px;
    left: 110px;
    width: 80px;
    height: 100px;
  }
  .frame-13 .tile-13-3 {
    position: absolute;
    top: 165px;
    left: 196px;
    width: 78px;
    height: 100px;
  }
  .frame-13 .tile-13-4 {
    position: absolute;
    top: 271px;
    left: 25px;
    width: 78px;
    height: 100px;
  }
  .frame-13 .tile-13-5 {
    position: absolute;
    top: 271px;
    left: 110px;
    width: 80px;
    height: 100px;
  }
  .frame-13 .tile-13-6 {
    position: absolute;
    top: 271px;
    left: 196px;
    width: 78px;
    height: 100px;
  }
  .frame-13 .tile-13-7 {
    position: absolute;
    top: 377px;
    left: 25px;
    width: 78px;
    height: 100px;
  }
  .frame-13 .tile-13-8 {
    position: absolute;
    top: 377px;
    left: 110px;
    width: 80px;
    height: 100px;
  }
  .frame-13 .tile-13-9 {
    position: absolute;
    top: 377px;
    left: 195px;
    width: 78px;
    height: 100px;
  }
  .frame-13 .tile-13-10 {
    position: absolute;
    top: 482px;
    left: 25px;
    width: 78px;
    height: 75px;
    border-bottom-left-radius: 40px;
  }
  .frame-13 .tile-13-11 {
    position: absolute;
    top: 482px;
    left: 110px;
    width: 80px;
    height: 75px;
  }
  .frame-13 .tile-13-12 {
    position: absolute;
    top: 482px;
    left: 195px;
    width: 78px;
    height: 75px;
    border-bottom-right-radius: 40px;
  }

  .frame-14 { display: none; }
  .frame-14.active { display: block; }
  .frame-14 .tile-14-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 125px;
  border-top-right-radius: 45px;
  }
  .frame-14 .tile-14-1 {
    position: absolute;
    top: 165px;
    left: 25px;
    width: 121px;
    height: 75px;
  }
  .frame-14 .tile-14-2 {
    position: absolute;
    top: 165px;
    left: 152px;
    width: 122px;
    height: 75px;
  }
  .frame-14 .tile-14-3 {
    position: absolute;
    top: 245px;
    left: 25px;
    width: 78px;
    height: 75px;
  }
  .frame-14 .tile-14-4 {
    position: absolute;
    top: 245px;
    left: 110px;
    width: 80px;
    height: 75px;
  }
  .frame-14 .tile-14-5 {
    position: absolute;
    top: 245px;
    left: 196px;
    width: 78px;
    height: 75px;
  }
  .frame-14 .tile-14-6 {
    position: absolute;
    top: 325px;
    left: 26px;
    width: 78px;
    height: 75px;
  }
  .frame-14 .tile-14-7 {
    position: absolute;
    top: 325px;
    left: 110px;
    width: 80px;
    height: 75px;
  }
  .frame-14 .tile-14-8 {
    position: absolute;
    top: 325px;
    left: 195px;
    width: 78px;
    height: 75px;
  }
  .frame-14 .tile-14-9 {
    position: absolute;
    top: 405px;
    left: 26px;
    width: 78px;
    height: 75px;
  }
  .frame-14 .tile-14-10 {
    position: absolute;
    top: 405px;
    left: 110px;
    width: 80px;
    height: 75px;
  }
  .frame-14 .tile-14-11 {
    position: absolute;
    top: 405px;
    left: 195px;
    width: 78px;
    height: 75px;
  }
  .frame-14 .tile-14-12 {
    position: absolute;
    top: 484px;
    left: 25px;
    width: 121px;
    height: 73px;
    border-bottom-left-radius: 40px;
  }
  .frame-14 .tile-14-13 {
    position: absolute;
    top: 484px;
    left: 152px;
    width: 121px;
    height: 73px;
    border-bottom-right-radius: 40px;
  }

  .frame-15 { display: none; }
  .frame-15.active { display: block; }
  .frame-15 .tile-15-0 {
  position: absolute;
  top: 35px;
  left: 136px;
  width: 138px;
  height: 125px;
  border-top-right-radius: 45px;
  }
  .frame-15 .tile-15-1 {
    position: absolute;
    top: 165px;
    left: 25px;
    width: 121px;
    height: 75px;
  }
  .frame-15 .tile-15-2 {
    position: absolute;
    top: 165px;
    left: 152px;
    width: 122px;
    height: 75px;
  }
  .frame-15 .tile-15-3 {
    position: absolute;
    top: 245px;
    left: 25px;
    width: 78px;
    height: 75px;
  }
  .frame-15 .tile-15-4 {
    position: absolute;
    top: 245px;
    left: 110px;
    width: 80px;
    height: 75px;
  }
  .frame-15 .tile-15-5 {
    position: absolute;
    top: 245px;
    left: 196px;
    width: 78px;
    height: 75px;
  }
  .frame-15 .tile-15-6 {
    position: absolute;
    top: 325px;
    left: 26px;
    width: 78px;
    height: 75px;
  }
  .frame-15 .tile-15-7 {
    position: absolute;
    top: 325px;
    left: 110px;
    width: 80px;
    height: 75px;
  }
  .frame-15 .tile-15-8 {
    position: absolute;
    top: 325px;
    left: 195px;
    width: 78px;
    height: 75px;
  }
  .frame-15 .tile-15-9 {
    position: absolute;
    top: 405px;
    left: 26px;
    width: 78px;
    height: 75px;
  }
  .frame-15 .tile-15-10 {
    position: absolute;
    top: 405px;
    left: 110px;
    width: 80px;
    height: 75px;
  }
  .frame-15 .tile-15-11 {
    position: absolute;
    top: 405px;
    left: 195px;
    width: 78px;
    height: 75px;
  }
  .frame-15 .tile-15-12 {
    position: absolute;
    top: 484px;
    left: 25px;
    width: 78px;
    height: 72px;
    border-bottom-left-radius: 40px;
  }
  .frame-15 .tile-15-13 {
    position: absolute;
    top: 484px;
    left: 110px;
    width: 80px;
    height: 72px;
  }
  .frame-15 .tile-15-14 {
    position: absolute;
    top: 484px;
    left: 195px;
    width: 78px;
    height: 73px;
    border-bottom-right-radius: 40px;
  }

  /* Spinner alignment */
#addToCartSpinner {
    vertical-align: middle;
}