@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Black.ttf") format("truetype");
  font-weight: 900;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-ExtraBold.ttf") format("truetype");
  font-weight: 800;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-ExtraLight.ttf") format("truetype");
  font-weight: 200;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Light.ttf") format("truetype");
  font-weight: 300;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-SemiBold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-Thin.ttf") format("truetype");
  font-weight: 100;
}

body {
  font-family: "Outfit", sans-serif;
}

.court_main {
  display: flex;
  align-items: flex-start;
}

.court_left h2 {
  font-family: "Outfit", sans-serif !important;
  background-color: #1b355e;
  margin: 0;
  padding: 15px 15px;
  /* border-radius: 5px 5px 0px 0px; */
  color: white !important;
  font-size: 1.4em;
}

.court_left_content {
  margin: 0;
  padding: 0;
}

.court_left_content h4 {
  font-family: "Outfit", sans-serif !important;
  font-size: 20px;
  padding: 10px 15px;
  margin: 0;
  background: #b9c4cb;
  margin-bottom: 0 !important;
}

.court_right {
  flex-grow: 1;
  background-color: white;
  /*border: 1px solid black;
    border-radius: 5px;*/
  display: flex;
  flex-direction: column;
}

.successmsg {
  display: none;
  text-align: center;
  color: green;
  padding: 48px 0;
}

#tennis {
  border-radius: 5px;
}

.court_right h2 {
  font-family: "Outfit", sans-serif !important;
  margin: 0;
  color: #fff !important;
  font-size: 1.5em;
  display: inline-block;
  position: relative;
  top: -5px;
}

.divider {
  background-color: #ba181b;
  height: 5px;
  margin: 5px 0 0;
}

.tennis {
  display: none;
}

#tennis {
  display: none;
}

.pickleball {
  display: none;
}

#pickleball {
  display: none;
}

#basketball {
  display: none;
}

#basketballhalfcourt {
  display: none;
}

#tennispickleball {
  display: none;
}

.court_left {
  background-color: #f1f1f1;
  min-width: 250px;
  margin-right: 5px;
  width: 430px;
  flex: 0 0 430px;
  position: relative;
}

.filterarea span input {
  border-radius: 0 !important;
  width: 138px;
  flex: 0 0 100px;
  height: 20px;
  border: 1px solid #131313 !important;
  padding: 15px 4px !important;
  outline: none;
  margin-left: -10px;
}

.filterarea span {
  display: inline-block;
  margin-bottom: 5px;
  width: 40%;
  vertical-align: middle;
}

.filterarea {
  padding-left: 15px;
}

.filterarearight {
  width: 190px !important;
}

.export-btn {
  text-align: center;
  position: relative;
}

canvas {
  /* border: 2px solid #000; */
  border-radius: 5px;
  max-width: 100%;
}

.color-wrapper {
  position: relative;
  min-width: 150px;
  /* margin: 5px auto; */
  max-width: 250px;
  width: 100%;
}

.color-picker {
  width: 100%;
  background: #f3f3f3;
  height: 230px;
  padding: 5px;
  border: 5px solid #fff;
  box-shadow: 0px 0px 3px 1px #ddd;
  position: absolute;
  top: 35px;
  left: 6px;
  z-index: 9;
  overflow: auto;
  width: 250px;
}

.color-picker ul {
  margin: 0;
}

.color-holder {
  background: #005490;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  /* float: left; */
  margin-left: 5px;
}

.color-picker::-webkit-scrollbar {
  width: 5px;
}

.color-picker::-webkit-scrollbar-track {
  background-color: rgba(100, 100, 100, 0.5);
  width: 5px;
}

.color-picker::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 9px;
  width: 5px;
}

input.call-picker-lines {
  border: 1px solid #aaa;
  color: #666;
  text-transform: uppercase;
  /*float: left;*/
  outline: none;
  padding: 10px;
  text-transform: uppercase;
  width: 85px;
}

.color-holderlines {
  background: #fff;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

input.call-picker-outofbounds {
  border: 1px solid #aaa;
  color: #666;
  text-transform: uppercase;
  float: left;
  outline: none;
  padding: 10px;
  text-transform: uppercase;
  width: 85px;
}

.color-holderoutofbounds {
  background: #ef5296;
  cursor: pointer;
  border: 1px solid #aaaaaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-picker .color-item {
  cursor: pointer;
  width: 40px;
  height: 40px;
  list-style-type: none;
  float: left;
  margin: 2px;
  border: 1px solid #131313;
  border-radius: 40px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.color-picker .color-item:hover {
  border: 1px solid #666;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter: alpha(opacity=8);
}

.color-holderpickleballlines {
  background: #ffffff;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holderkitchen {
  background: #38603e;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holderbasketballine {
  background: #ffffff;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holderbasketballoutofbounds {
  background: #ef5296;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holderbasketballkey {
  background: #005490;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

/* .call-picker-halfbasketball{
    background:#fdb714;
} */
.color-holderhalfbasketballoutofbounds {
  background: #38603e;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holderhalfbasketballkey {
  background: #005490;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holdertennis {
  background: #005490;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holderpickleball1 {
  background: #9d684e;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holdertennispickleballplayingarea {
  background: #005490;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holdertennispickleballline {
  background: #ffffff;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holdertpballline {
  background: #ffffff;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

.color-holdertennispickleballkitchen {
  background: #38603e;
  cursor: pointer;
  border: 1px solid #aaa;
  width: 40px;
  height: 36px;
  float: left;
  margin-left: 5px;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.6);
}

.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px #2e93e6 solid;
  border-radius: 50%;
  animation: sp-anime 0.8s infinite linear;
}

/**********J*************/
.container.main-content {
  max-width: 100%;
  padding: 0 30px;
}

.pickleballplayerimg {
  background: url(../images/picalbal-droneview.png);
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 9;
  background-repeat: no-repeat;
  background-size: contain;
  left: 27%;
  top: 34%;
  filter: drop-shadow(-12px -4px 11px black);
}

.pickleballplayerimg1 {
  background: url(../images/picalbal-droneview.png);
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 9;
  background-repeat: no-repeat;
  background-size: contain;
  left: 26%;
  top: 56%;
  filter: drop-shadow(-12px -4px 11px black);
}

.pickleballplayerimg2 {
  background: url(../images/picalbal-droneview.png);
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 9;
  background-repeat: no-repeat;
  background-size: contain;
  left: 73%;
  transform: rotate(105deg);
  top: 56%;
  filter: drop-shadow(-12px -4px 11px black);
}

.pickleballplayerimg3 {
  background: url(../images/picalbal-droneview.png);
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 9;
  background-repeat: no-repeat;
  background-size: contain;
  left: 70%;
  top: 34%;
  transform: rotate(92deg);
  filter: drop-shadow(-12px -4px 11px black);
}

.pickleball-cover {
  justify-content: center;
  flex-direction: column;
  position: relative;
  margin: auto;
  width: 100%;
}

div#pickleball {
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  flex-direction: column;
  display: none;
}

.pickleball-cover canvas {
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-49%, -50%);
  width: 100% !important;
  height: 90%;
  background-color: transparent !important;
}

.pickleball-cover img.net_img {
  position: absolute;
  top: 0;
  z-index: 1;
  left: 0;
  width: 100%;
}

.pickleball-cover .img-div {
  position: relative;
}

.tennis-cover {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  /* min-width: 1156px; */
  margin: auto;
}

.tennis-cover canvas {
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-49%, -50%);
  width: 100% !important;
  height: 90%;
  background-color: transparent !important;
}

/* tennis ball court end */
/* Basket ball court */
.bakset-ball-cover {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  /* min-width: 1156px; */
  margin: auto;
  line-height: 0;
}

.bakset-ball-cover canvas {
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-49%, -50%);
  width: 100% !important;
  height: 90%;
  background-color: transparent !important;
}

/* 2D court stack (1500×750 = 2:1): give covers a real block height so canvas % / resize observers work.
   Without this, height:90% resolves against an indefinite parent and the court “sticks” when the viewport changes. */
#court_right_content_forCanvas .tennis-cover,
#court_right_content_forCanvas .pickleball-cover,
#court_right_content_forCanvas .bakset-ball-cover {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 2 / 1;
  box-sizing: border-box;
}

#court_right_content_forCanvas .tennis-cover canvas,
#court_right_content_forCanvas .pickleball-cover canvas,
#court_right_content_forCanvas .bakset-ball-cover canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background-color: transparent !important;
}

/* Fullscreen: JS gives #court_right_content_forCanvas explicit px size — fill it (drop aspect-ratio on cover). */
.court_right.fullscreen #court_right_content_forCanvas > .cdcourt {
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
}

.court_right.fullscreen #court_right_content_forCanvas .tennis-cover,
.court_right.fullscreen #court_right_content_forCanvas .pickleball-cover,
.court_right.fullscreen #court_right_content_forCanvas .bakset-ball-cover {
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
}

.bakset-ball-cover img.net_img {
  position: absolute;
  top: 0;
  z-index: 1;
  left: 0;
  width: 100%;
}

.bakset-ball-cover .img-div {
  position: relative;
}

.bakset-ball-cover img.net_img-rt {
  position: absolute;
  right: 10.6%;
  z-index: 999999;
  top: 45.8%;
  transform: rotate(180deg);
  height: 92px;
}

/* Basket ball court end */

/* Basket ball half court */
.bakset-ball-half-cover {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  /* min-width: 1156px; */
  margin: auto;
}

.bakset-ball-half-cover canvas {
  position: absolute;
  top: 9.5%;
  left: 4.5%;
  width: 91% !important;
}

.halfbasket-ball-net {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
}

.halfbasket-ball-net img {
  width: 100%;
}

/* Basket ball half court end */
/* Tennis pickle ball court */
.tennispickleball-cover {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: relative;
  /* min-width: 1156px; */
  margin: auto;
}

.tennispickleball-cover canvas {
  position: absolute;
  top: 50%;
  left: 49%;
  transform: translate(-49%, -50%);
  width: 71% !important;
  height: 70%;
}

/* Tennis pickle ball end */
.is-hide {
  display: none;
}

/*Email popup*/
#court_email_popup {
  width: 40%;
  position: absolute;
  z-index: 999;
  top: 16%;
  left: 33%;
  background: #fff;
}

#court_email_popup form {
  padding: 30px;
  border: 1px solid #888;
}

#court_email_popup span#close_popup {
  text-align: right;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 21px;
  font-weight: bold;
  color: #aaa;
  padding: 5px 15px;
  cursor: pointer;
}

#court_email_popup #close_popup:hover {
  cursor: pointer;
}

#court_email_popup #court_image {
  margin-top: 30px;
}

#court_email_popup input#imputEmailforsend {
  padding: 8px 0px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  font-size: 16px;
  text-align: center;
  background-color: #f2f2f2;
}

#court_email_popup .divInputs {
  display: flex;
  width: 90%;
  justify-content: space-evenly;
  margin: auto;
}

#court_email_popup input#emailSendBtn {
  width: 20%;
  border-radius: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  background: #ba181b;
}

#court_email_popup .divInputs span {
  position: absolute;
  bottom: -25px;
  left: 0px;
  font-size: 12px;
  color: #ba181b;
  right: 106px;
  margin: 0 auto;
  display: block;
  text-align: center;
}

#court_email_popup .divInputs {
  position: relative;
}

#court_email_popup .inputEmailcont {
  width: 70%;
}

.court_image_overlay {
  width: 100%;
  height: 100%;
  background: #0000008c;
  position: absolute;
  top: 0;
}

@keyframes sp-anime {
  100% {
    transform: rotate(360deg);
  }
}

/* added media query css */
@media screen and (max-width: 1780px) {
  canvas {
    width: 100% !important;
  }

  .court-right {
    width: 100%;
  }

  .court_left {
    flex: 0 0 430px;
    width: 100%;
  }

  .court_left h2,
  .court_right h2 {
    font-size: 23px;
  }

  /* .court_left_content label, .filterarea span {
        font-size: 14px;
    } */
  .court_left h2 {
    padding: 5px 5px;
  }

  .color-holderoutofbounds,
  .color-holderlines,
  .color-holder {
    height: 32px !important;
  }

  /* .filterarea span input {
        width: 70px;
    } */
  body[data-form-style="minimal"] input[type="text"] {
    font-size: 10px !important;
  }
}

@media screen and (max-width: 768px) {
  .court_main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* Mobile: show design canvas above specifications */
  .court_right {
    order: 1;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
  }

  .court_left {
    order: 2;
    width: 100%;
    margin-bottom: 12px;
  }

  canvas {
    width: 100%;
  }

  .color-holderoutofbounds,
  .color-holderlines,
  .color-holder {
    height: 32px !important;
  }

  body[data-form-style="minimal"] input[type="text"] {
    font-size: 12px !important;
  }

  #court_email_popup {
    width: 100%;
    left: 0;
  }

  #court_email_popup form {
    padding: 10px;
  }

  #court_email_popup .divInputs {
    width: 100%;
    margin-top: 25px;
  }

  #court_email_popup span#close_popup {
    font-size: 16px;
    padding: 0px 10px;
  }

  #court_email_popup input#emailSendBtn {
    width: 20%;
  }
}

/* Mobile landscape (e.g. iPhone ~844px wide): still stack + show canvas first */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  .court_main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .court_right {
    order: 1;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
  }

  .court_left {
    order: 2;
    width: 100%;
    margin-bottom: 12px;
  }
}

@media (max-width: 1200px) {
  .pickleballplayerimg2,
  .pickleballplayerimg3,
  .pickleballplayerimg1,
  .pickleballplayerimg {
    width: 32px;
  }
}

.base_image {
  width: 100%;
}

#uploadContainer {
  border: 2px dashed #ccc;
  padding: 15px 20px 10px 20px;
  cursor: pointer;
  display: inline-block;
  min-height: 70px;
  font-size: 24px;
  width: 90%;
}

.imageWrapper {
  position: absolute;
  width: auto;
  height: auto;
  cursor: grab;
  /* border: 2px solid #ccc; */
  display: inline-block;
  /* overflow: hidden; */
  padding: 5px;
  text-align: center;
  z-index: 2;
}

.imageWrapper button {
  position: relative;
  z-index: 1;
}

.imageContainer {
  max-width: 250px;
  max-height: 250px;
  display: block;
  transform: rotate(0deg);
  position: relative;
  z-index: 1;
}

.custom-image-buttons {
  position: block;
  color: #9e2a2b;
  width: 100%;
  font-size: 15px;
}

.custom-image-buttons button {
  margin: 5px;
  padding: 8px;
  cursor: pointer;
}

.color-group {
  display: block;
  width: 95%;
  clear: both;
  padding: 5px;
  background-color: #e8e8e8;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid #696c6f;
  text-align: center;
}

.color-picker ul {
  padding: 0;
}

.atscd-drpdwn,
.pickballcourt-drpdwn {
  padding: 10px 45px;
  padding-top: 0;
}

.atscd-drpdwn select,
.pickballcourt-drpdwn select {
  padding: 10px 5px;
  font-size: 16px;
  min-width: 200px;
}

#tennisbballcourts,
#picklebballcourts {
  padding: 10px 5px;
  font-size: 16px;
  min-width: 200px;
}

#popupForm h2 {
  margin: 0;
}

#popupForm p {
  margin-top: 0;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#popupForm.modal {
  /* Ensure the confirmation form is above the floating 3D controls */
  z-index: 10020 !important;
}

#popupForm.modal .atscd-modal__content {
  position: relative;
  z-index: 10021;
}

.atscd-modal__content {
  background-color: white;
  /* Center on screen consistently (independent of viewport/mobile rotation) */
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 20px;
  width: 35%;
  /* desktop default */
  max-height: 90vh;
  overflow-y: auto;
  /* hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.atscd-modal__content::-webkit-scrollbar {
  display: none;
}

.close {
  float: right;
  font-size: 28px;
  cursor: pointer;
}

.input-label {
  display: block;
  font-weight: bold;
}

.form-input {
  display: block;
  font-size: 16px;
  padding: 10px 15px;
  border: 1px solid #bbb;
  width: 100%;
}

.submit-button {
  border: 0;
  background-color: #ba181b !important;
  padding: 10px 20px;
  font-size: 18px;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

.disclaimer {
  color: #696c6f;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}

.sidenav-section {
  padding: 10px 30px;
  font-family: "Outfit";
  font-size: 18px;
  font-weight: 500;
}

/* Customize the label (the ats-container) */
.ats-container {
  display: block;
  position: relative;
  padding-left: 25px;
  /* margin-bottom: 12px; */
  cursor: pointer;
  font-size: 20px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.ats-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 7px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #d0d0d0;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.ats-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.ats-container input:checked ~ .checkmark {
  background-color: #3f525d;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.ats-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.ats-container .checkmark:after {
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* Create the indicator (dot/circle - always visible) */
.checkmark:after {
  content: "";
  position: absolute;
  display: block;
  /* Make it always visible */
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  opacity: 1;
  /* Optional: Adjust visibility for unselected state */
}

/* Show the indicator (dot/circle) with full opacity when checked */
.ats-container input:checked ~ .checkmark:after {
  opacity: 1;
}

.color-section-title {
  font-size: 18px !important;
  padding-left: 30px !important;
  background: #e2e2e2 !important;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #e4e4e4;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.color-selected {
  border: 1px solid #131313;
  width: 30px;
  height: 30px !important;
  margin-right: 15px;
  border-radius: 50px;
  flex-shrink: 0;
}

.m-0 {
  margin: 0 !important;
}

.kitchen-color,
.kitchen-number {
  width: 5px !important;
  vertical-align: middle;
}

.kitchen-color-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 10px;
  margin-bottom: 15px;
}

.kitchen-group {
  width: 25%;
}

#clearBtn {
  color: #9e2a2b;
  text-decoration: none;
  cursor: pointer;
}

#clearBtn:hover {
  text-decoration: underline;
}

#exportandsend {
  width: 100%;
  font-size: 18px;
  color: #ffffff;
  background-color: #9e2a2b;
  border: none;
  padding: 15px;
}

/* The ats-container */
.chckbx-cntnr {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.chckbx-cntnr input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.chckbx-checkmark {
  position: absolute;
  top: 4px;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #d0d0d0;
}

/* On mouse-over, add a grey background color */
.ats-container:hover input ~ .chckbx-checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.chckbx-cntnr input:checked ~ .chckbx-checkmark {
  background-color: #3f525d;
}

/* Create the checkmark/indicator (hidden when not checked) */
.chckbx-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.chckbx-cntnr input:checked ~ .chckbx-checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.chckbx-cntnr .chckbx-checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.controlPanel button {
  margin: 4px;
}

.imageWrapper {
  position: absolute;
  user-select: none;
  display: inline-block;
}

.imageContainer {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.resizer {
  width: 12px;
  height: 12px;
  background: #3498db;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: se-resize;
  z-index: 2;
}

#confirmationForm {
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .court_main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0 -30px;
  }

  /* Mobile: show design canvas above specifications */
  .court_right {
    order: 1;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
  }

  .court_left {
    order: 2;
    width: 100%;
    margin-bottom: 12px;
  }

  canvas {
    width: 100%;
  }

  .color-holderoutofbounds,
  .color-holderlines,
  .color-holder {
    height: 32px !important;
  }

  body[data-form-style="minimal"] input[type="text"] {
    font-size: 12px !important;
  }

  #court_email_popup {
    width: 100%;
    left: 0;
  }

  #court_email_popup form {
    padding: 10px;
  }

  #court_email_popup .divInputs {
    width: 100%;
    margin-top: 25px;
  }

  #court_email_popup span#close_popup {
    font-size: 16px;
    padding: 0px 10px;
  }

  #court_email_popup input#emailSendBtn {
    width: 20%;
  }
}

@media (max-width: 1200px) {
  .pickleballplayerimg2,
  .pickleballplayerimg3,
  .pickleballplayerimg1,
  .pickleballplayerimg {
    width: 32px;
  }
}

@media screen and (max-width: 767px) {
  .atscd-modal__content {
    width: 80% !important;
    max-height: 80vh !important;
    top: 57% !important;
  }
}

@media screen and (max-width: 424px) {
  .filterarealeft {
    display: block !important;
    width: 100% !important;
  }

  .kitchen-group .filterarealeft {
    display: inline-block !important;
    width: 10% !important;
  }

  .atscd-modal__content {
    width: 90% !important;
  }
}

/* <=1024px: stack with canvas first (mobile + small tablets) */
@media (max-width: 1024px) and (min-width: 769px) {
  .court_main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .court_right {
    order: 1;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
  }

  .court_left {
    order: 2;
    width: 100%;
    margin-bottom: 12px;
  }

  .atscd-modal__content {
    width: 60%;
    max-height: calc(100vh - 100px);
    margin: 0;
  }

  /* #pctpp-group-two .color-picker {
		left: -110px;
	}

	#pctpp-group-three .color-picker {
		left: -160px;
	}

	#pctpp-group-four .color-picker {
		left: -180px;
	}

	#pctp-group-one .color-picker {
		left: -65px;
	}

	#pctp-group-two .color-picker {
		left: -97px;
	}

	#pctp-group-three .color-picker {
		left: -160px;
	}

	#pctp-group-four .color-picker {
		left: -180px;
	} */
}

@media (max-width: 1024px) {
  #pctpp-group-one .color-picker,
  #pctpp-group-two .color-picker,
  #pctpp-group-three .color-picker,
  #pctpp-group-four .color-picker {
    left: -25px;
  }

  #pctp-group-one .color-picker,
  #pctp-group-two .color-picker,
  #pctp-group-three .color-picker,
  #pctp-group-four .color-picker {
    left: -25px;
  }
}

@media (max-width: 620px) {
  #pctpp-group-two .color-picker,
  #pctpp-group-four .color-picker {
    left: -95px;
  }

  #pctp-group-two .color-picker,
  #pctp-group-four .color-picker {
    left: -95px;
  }

  .color-picker {
    left: -95px;
  }
}

@media (max-width: 424px) {
  #pctpp-group-two .color-picker,
  #pctpp-group-four .color-picker {
    left: -35px;
  }

  #pctp-group-two .color-picker,
  #pctp-group-four .color-picker {
    left: -35px;
  }

  .color-picker {
    left: -25px;
  }
}

.color-wrapper {
  position: relative;
  display: flex;
}

.color-wrapper .color-picker {
  position: absolute;
  z-index: 9999;
}

.tennis-basketball-court,
.pickleball-basketball-court {
  padding: 10px 45px;
  margin-top: 0px !important;
}

.controlsThreeDee {
  display: flex;
  position: absolute;
  top: 70px;
  z-index: 1000;
  gap: 5px;
  pointer-events: auto;
}

/* Mobile Safari/Chrome: use <img> icons instead of <use> */
.controlsThreeDee button img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
  /* Make black SVG icons appear white (mobile-safe) */
  filter: brightness(0) invert(1);
}

.controlsThreeDee #toggle,
.controlsThreeDee #expand {
  width: 45px;
  height: 45px;
}

@media screen and (min-width: 1800px) {
  .controlsThreeDee {
    top: 100px;
  }
}

@media screen and (max-width: 1799px) {
  .controlsThreeDee {
    top: 100px;
  }
}

@media screen and (max-width: 1300px) {
  .controlsThreeDee {
    top: 85px;
  }
}

.atscd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14.5px 15px;
  background: #1b355e;
  position: relative;
}

.controlsThreeDee button {
  font-size: 16px;
  font-weight: 600;
  font-family: "Outfit", sans-serif !important;
  padding: 5px;
  color: #9e2a2b;
  background: #fff;
  border: none;
  cursor: pointer;
}

.controlsThreeDee button {
  font-size: 20px;
  font-weight: 600;
  font-family: "Outfit", sans-serif !important;
  padding: 10px;
  color: #ffffff;
  background: #9e2a2b;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

/* Header hint button matches other red buttons */
.controlsThreeDee #hint {
  line-height: 1;
  padding: 10px 16px;
  display: inline-block; /* visible on desktop + mobile */
}

/* 3D controls help modal */
.atscd-help-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(7, 15, 26, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 180ms ease;
}

.atscd-help-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Flex centering avoids large top margins that push the dialog past the
     bottom edge in mobile landscape (short viewports). */
  padding: max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
}

.atscd-help-modal__dialog {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  width: min(600px, calc(100% - 28px));
  margin: 0 auto;
  flex-shrink: 0;
  border-radius: 14px;
  padding: 20px 20px 16px;
  /* Cap height — slightly below 80vh so landscape / small viewports don’t feel oversized */
  max-height: min(
    70vh,
    calc(
      100vh - max(40px, env(safe-area-inset-top)) -
        max(40px, env(safe-area-inset-bottom))
    )
  );
  max-height: min(
    70vh,
    calc(
      100dvh - max(40px, env(safe-area-inset-top)) -
        max(40px, env(safe-area-inset-bottom))
    )
  );
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 2px 10px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(27, 53, 94, 0.1);
  transform: translateY(12px) scale(0.985);
  opacity: 0;
  transition:
    transform 180ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 180ms ease;
}

.atscd-help-modal.is-open .atscd-help-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.atscd-help-modal.is-open.is-closing .atscd-help-modal__dialog {
  transform: translateY(10px) scale(0.985);
  opacity: 0;
}

.atscd-help-modal__title {
  margin: 0 0 14px;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #1b355e;
}

.atscd-help-modal__section h4 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1b355e;
  opacity: 0.9;
}

.atscd-help-modal__section ul {
  margin: 0;
  padding-left: 20px;
}

.atscd-help-modal__section li {
  margin: 10px 0;
  line-height: 1.45;
  color: #1b355e;
}

.atscd-help-modal__section {
  padding: 14px 14px 12px;
  border: 1px solid rgba(27, 53, 94, 0.1);
  border-radius: 12px;
  background: rgba(27, 53, 94, 0.03);
}

.atscd-help-modal__section + .atscd-help-modal__section {
  margin-top: 12px;
}

.atscd-help-modal__lead {
  margin: 0;
  line-height: 1.45;
  color: #1b355e;
}

.atscd-help-modal__lead + .atscd-help-modal__lead {
  margin-top: 12px;
}

/* Full-screen / editing reminder — last block in 3D help modal */
.atscd-help-modal__section--editing-notice {
  border: 1px solid rgba(217, 119, 6, 0.38);
  border-left-width: 4px;
  border-left-color: rgba(234, 88, 12, 0.9);
  background: rgba(255, 140, 66, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.atscd-help-modal__lead--notice {
  color: #7a2e0a;
  font-weight: 500;
}

.atscd-help-modal__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: rgba(27, 53, 94, 0.08);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #1b355e;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 140ms ease,
    background 140ms ease;
}

.atscd-help-modal__close:hover {
  background: rgba(27, 53, 94, 0.12);
  transform: translateY(-1px);
}

.atscd-help-modal__close:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .atscd-help-modal,
  .atscd-help-modal__dialog,
  .atscd-help-modal__close {
    transition: none !important;
  }
}

/* Show device-specific instructions */
/* Default: desktop only */
.atscd-help-desktop {
  display: block;
}
.atscd-help-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .atscd-help-modal__dialog {
    /* Add comfortable side gutters (and iOS safe-area support) */
    width: min(
      640px,
      calc(
        100% - max(28px, env(safe-area-inset-left)) -
          max(28px, env(safe-area-inset-right))
      )
    );
    /* margin: no large top margin — parent .atscd-help-modal.is-open is flex-centered */
    padding: 18px 16px 14px;
    border-radius: 16px;
  }

  .atscd-help-modal__title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .atscd-help-modal__section {
    padding: 12px 12px 10px;
  }

  /* Mobile only */
  .atscd-help-desktop {
    display: none;
  }
  .atscd-help-mobile {
    display: block;
  }
}

/* Ensure control icons render + inherit color on mobile (and desktop) */
.controlsThreeDee button svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}

.controlsThreeDee button svg use {
  fill: currentColor;
}

/* 3D canvas wrapper (JS controls height/overflow in 3D mode) */
.ats-3d-canvas-wrapper {
  width: 100%;
  max-width: 100%;
  display: block;
  line-height: 0; /* prevent baseline gaps under canvas */
}

/* Mobile: reserve top space so absolutely positioned .controlsThreeDee (top: 70px) doesn't cover the court */
@media screen and (max-width: 1024px) {
  .court_right,
  .inner-court {
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #court_right_content_forCanvas {
    overflow: visible;
    min-height: 0;
  }

  /* 2D + 3D: same padding — controls sit below header and overlap this area if padding is 0 */
  .inner-court .court_right_content {
    padding-top: 65px;
  }

  /* Light clearance in 3D so controls don’t sit on the court */
  .inner-court.ats-3d-active .court_right_content {
    padding-top: 65px;
  }

  /* 3D fullscreen: header is in-flow on fixed panel — drop extra top padding so canvas uses full height */
  .court_right.fullscreen .inner-court.ats-3d-active .court_right_content {
    padding-top: 0;
  }
}

/* Ensure 2D top padding still applies at 769px+ (mobile landscape / small tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
  .inner-court:not(.ats-3d-active) .court_right_content {
    padding-top: 65px !important;
  }
}

.tennis-additional-courts,
.pickleball-additional-courts,
.basketball-additional-courts {
  padding-left: 15px;
}

.atscd-slider-group-container {
  padding: 10px;
  padding-left: 50px;
}

.atscd-slider-group-input label {
  display: inline-block;
  min-width: 90px;
}

input[type="range"] {
  height: 6px;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

/* WebKit (Chrome, Safari, Edge) */
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #4caf50 0%, #ccc 0%);
}

input[type="range"]::-webkit-slider-thumb {
  background-color: #2196f3;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  margin-top: -5px;
  appearance: none;
}

/* Firefox */
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #ccc;
}

input[type="range"]::-moz-range-progress {
  background-color: #4caf50;
  height: 6px;
  border-radius: 3px;
}

input[type="range"]::-moz-range-thumb {
  background-color: #2196f3;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
}

.court_right {
  transition: all 0.3s ease;
  /* smooth animation */
}

.court_right.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  transition: none;
}

/* Stay above the fixed/rotated 2D canvas layer in portrait fullscreen */
.court_right.fullscreen .atscd-header {
  position: relative;
  z-index: 30;
  flex-shrink: 0;
}

.court_right.fullscreen .inner-court {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow children to size within viewport */
}

.court_right.fullscreen .court_right_content {
  flex: 1 1 auto;
  min-height: 0;
}

.court_right.fullscreen .tennis-cover canvas {
  top: 45%;
}

/* Fullscreen: left 50% + translate(-50%,-50%) matches #court_right_content_forCanvas (logo
   alignment via offsetLeft ignores transform; 49%/-49% broke x). Use top:50% here — not 45%
   like .tennis-cover canvas — because 45% + translate(-50%) pulls the court upward; this
   block’s ID beats the portrait media query, so 45% was also hurting mobile fullscreen. */
.court_right.fullscreen #pickleball .pickleball-cover canvas {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.court_right.fullscreen #basketball .bakset-ball-cover canvas {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Mobile portrait fullscreen 2D: position/size/rotate for #court_right_content_forCanvas is applied in main.js
   (syncPortraitFullscreen2DLayout) using window.innerWidth/innerHeight — CSS vh/vw mismatch mobile toolbars and break centering. */
@media (orientation: portrait) and (max-width: 1024px) {
  .court_right.fullscreen {
    overflow: visible;
  }

  /* Tennis fullscreen used top:45% elsewhere; match pickleball/basketball centering so the court sits in the pink frame when rotated. */
  .court_right.fullscreen .inner-court:not(.ats-3d-active) .tennis-cover canvas,
  .court_right.fullscreen
    .inner-court:not(.ats-3d-active)
    .pickleball-cover
    canvas,
  .court_right.fullscreen
    .inner-court:not(.ats-3d-active)
    .bakset-ball-cover
    canvas {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

.threeCanvasSelector {
  max-width: 100%;
}

.kitchen-group {
  width: 183px !important;
}

.nonadditional-color-selector .kitchen-group .kitchen-number {
  width: 10px !important;
}

.kitchen-group .kitchen-color {
  width: 172px !important;
}

@media screen and (max-width: 424px) {
  .kitchen-color-selector {
    display: inline-block;
  }

  .kitchen-group {
    width: 196px !important;
    margin-bottom: 10px;
  }
}

/* #court_right_content_forCanvas {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}

#imageArea {
	position: absolute;
	width: 1500px;
	height: 850px;
	transform-origin: top left;
	transform: scale(var(--scale-factor));
	z-index: 1;
}

.fullscreen #imageArea {
	width: 1980px;
	height: 925px;
} */

#court_right_content_forCanvas {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

#imageArea {
  position: absolute;
  top: 0;
  left: 0;
  width: 1500px;
  height: 850px;
  transform-origin: top left;
  transform: scale(var(--scale-factor));
  z-index: 1;
}

.color-item {
  width: 30px;
  height: 30px;
  display: inline-block;
  margin: 4px;
  cursor: pointer;
  position: relative;
}

.color-item.no-fill {
  background-color: #fff; /* white background */
  border: 1px solid #ccc; /* optional border */
}

.color-item.no-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    red 45%,
    red 55%,
    transparent 55%
  );
  border-radius: 100px;
  overflow: hidden;
}

.color-selected.no-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    red 45%,
    red 55%,
    transparent 55%
  );
  max-width: 30px;
  max-height: 30px;
  border-radius: 100px;
  overflow: hidden;
  margin-left: 5px;
}

.disabled {
  pointer-events: none; /* blocks clicks */
  opacity: 0.4; /* makes it look inactive */
}