#controls {
      margin-bottom: 10px;
    }

#scaled-wrapper {
  width: 330px;
  height: 165px;
  overflow: visible;
  position: relative;
}

#table-container {
  width: 800px;
  height: 400px;
  transform: scale(0.4125); /* 330 / 800 */
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

#table-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}

#table {
  width: 100%;
  height: 100%;
  background-color: #006400;
  border: 5px solid #333;
  position: relative;
  transform-origin: center center;
}


    .ball {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      position: absolute;
      cursor: grab;
      touch-action: none;
      z-index: 10;
      box-sizing: border-box;
    }
    .selected {
      outline: 3px solid white;
    }
    .red { background-color: red; }
    .yellow { background-color: yellow; }
    .blue { background-color: blue; }
    .black { background-color: black; }
    .white { background-color: white; border: 1px solid #aaa; }
    .pink { background-color: #ff69b4; }
    .brown { background-color: #8B4513; }
    .green { background-color: #009900; }

    .baulk-line {
      position: absolute;
      top: 0;
      left: 25%;
      width: 0;
      height: 100%;
      border-left: 2px solid white;
    }

    /* Half-circle "D" */
    .d-half-circle {
      position: absolute;
      left: calc(25% - 70px);
      top: calc(50% - 70px);
      width: 140px;
      height: 140px;
      border: 2px solid white;
      border-right: none;
      border-radius: 140px 0 0 140px;
      background: transparent;
    }

    .spot {
      width: 4px;
      height: 4px;
      background: white;
      border-radius: 50%;
      position: absolute;
      z-index: 1;
    }

    .pocket {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: black;
      position: absolute;
      z-index: 5;
    }

    /* Pockets positions */
    .pocket.tl { top: -10px; left: -10px; }
    .pocket.tr { top: -10px; right: -10px; }
    .pocket.bl { bottom: -10px; left: -10px; }
    .pocket.br { bottom: -10px; right: -10px; }
    .pocket.ml { top: -10px; left: calc(50% - 10px); }
    .pocket.mr { bottom: -10px; left: calc(50% - 10px); }

.no-border {
  border: none; /* Removes the border */
  outline: none; /* Removes the focus outline */
  resize: none; /* Optional: Prevent resizing of the textarea */
}

.no-border:focus {
  outline: none; /* Ensures no border or outline appears on focus */
}

.diary-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 350px; /* Fixed height */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Optional: Disable horizontal scrolling */  
}

.calendar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 550px; /* Fixed height */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Optional: Disable horizontal scrolling */  
}

.month {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  width: calc(100% - 0px);
}
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.day {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
}
	.day-name {
	  font-size: 0.8em;
	  color: gray;
	  text-align: center;
	}

	.header {
	  display: grid;
	  grid-template-columns: repeat(7, 1fr);
	  gap: 5px;
	  font-weight: bold;
	  text-align: center;
	  margin-bottom: 5px;
	}
	
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content div {
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
}

.special-day {
  color: black;
  font-weight: bold;
}

.special-day.tournament {
  background-color: #FFD700; /* Gold */
  color: black;
}

.special-day.practice {
  background-color: #013220; /* Dark Green */
  color: white;
}

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

.content-button {
  width: 60px; 
  height: 30px; 
  font-size: 12px;
  background-color:#ddd;
}

.content-button:active {
    background-color: #c7dcff;
}

.rounded-table {
  width: 100%;
  border-radius: 10px; /* Adjust the radius as needed */
  border: 2px solid #18325e;
  padding: 2px;
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 6px;
  font-size: 12px;
  border: none;
  cursor: pointer;
  min-width: 150px;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 7px 14px;
  transition: 0.3s;
  font-size: 14px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #c7dcff;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #c7dcff;
}

/* Style ttabcontenthe tab content */
.tabcontent {
  display: none;
  padding: 0px 0px;
  border: 0px solid #ccc;
  border-top: none;
}

/* Style ttabcontenthe tab content */
.subtabcontent {
  display: none;
  padding: 0px 0px;
  border: 0px solid #ccc;
  border-top: none;
}

.mover { overflow: hidden; display: block; width: 100%; height: 300px; position: relative; } 

.move { position: absolute; width: 150px; height: 150px; left: 20px; top: 20px; background-color: #333; } 

.ball_button {
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  margin: 4px 2px;
  cursor: pointer;
}


.ball_button1 {
	background-color: #ff0000; /* Red */
	border-radius: 50%;
}

.ball_button2 {
	background-color: #ffbc03; /* Yellow */
	border-radius: 50%;
  opacity: 0.5;
}

.ball_button3 {
	background-color: #04AA6D; /* Green */
	border-radius: 50%;
}

.ball_button4 {
	background-color: #662601; /* Brown */
	border-radius: 50%;
}

.ball_button5 {
	background-color: #0230ba; /* Blue */
	border-radius: 50%;
}

.ball_button6 {
	background-color: #ba02ab; /* Pink */
	border-radius: 50%;
}

.ball_button7 {
	background-color: #000000; /* Black */
	border-radius: 50%;
}

.slidecontainer {
  width: 340px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}