/* set the page background color to black */
   body {
       background-color: black;
       /* Replace with your desired color */
       height: 720px;
   }

   .panel-content {
       /* set the font and color of the text */
       font-family: 'Ubuntu', sans-serif;
       color: white;
       position: absolute;
       top: 0;
       left: 0;

   }

   .panel-content-1 {
       background-color: #b224e2 !important;
   }

   .panel-container {
       position: fixed;
       padding: 0;
       margin: 0;
       top: 0;
       left: 0;
       width: 1280px;
       height: 720px;
       overflow: scroll;
   }


   .video-container {
       width: 1280px;
       height: 720px;
   }

   /* Adjust table layout and font size */
   .tennisdata {
       table-layout: fixed;
       font-size: 0.8rem;
       width: 100%;
   }

   /* Adjust column width and word wrapping */
   .tennisdata th,
   .tennisdata td {
       width: calc(100% / 12);
       /* Set the width of each cell */
       word-wrap: break-word;
       /* Enable word wrapping */
       white-space: normal;
       /* Allow multiple lines of text */
       overflow-wrap: break-word;
       /* Alternative word wrap property for older browsers */
       text-overflow: ellipsis;
       /* Add ellipsis (...) when text overflows the cell */

       /*set the border to 1px solid white*/
       border: 1px solid white;
   }

   .red-border-row {
       outline: 2px solid red;
   }

   .green-border-row {
       border: 4px solid green;
   }

   .tennisdata tbody {
       color: black;
   }

   .tennisdata thead {
       color: white;
   }

   .td-input {
       width: 100%;
       height: 100%;
       padding: 0;
       margin: 0;
       border: none;
       background: transparent;
       outline: none;
       /* Removes the default browser outline */
   }

   /* Change cursor on hover */
   .td-input:hover {
       cursor: text;
   }

   /* Add border on focus */
   .td-input:focus {
       border: 3px solid black;
   }



   */ .overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 2000;
       cursor: wait;
       justify-content: center;
       align-items: center;
       color: white;
   }

   .overlay .overlay-spinner {
       background-color: rgb(148, 35, 35, 0.5);
       color: white;
       text-align: center;
       position: absolute;
   }

   .overlay .overlay-message {
       color: white;
       text-align: center;
       position: absolute;
   }



   .td-actions {
       width: auto !important;
       /* Adjust the width as needed */
       height: 100% !important;
       /* Adjust the height as needed */
       padding: 0 !important;
       /* Adjust the padding as needed */

       display: flex;
       justify-content: space-between;
       align-items: center;
       align-content: center;
       vertical-align: middle;
   }


   .pointwinner {
       /* Optic yellow like a tennis ball */
       background-color: #d2eb34;
       font-family: 'Ubuntu', sans-serif;
       font-weight: bold;
       color: black;

   }

   .pointloser {
       /* Optic yellow like a tennis ball */
       background-color: lightgray;
       font-family: 'Ubuntu', sans-serif;
       font-weight: bold;
       color: black;

   }

   .inputbox-width {
       overflow-wrap: break-word;
       word-wrap: break-word;
       white-space: nowrap;
       text-overflow: ellipsis;
   }

   .inputbox-width-5 {
       width: 5%;
   }

   .inputbox-width-10 {
       width: 10%;
   }

   .inputbox-width-15 {
       width: 15%;
   }

   .inputbox-width-20 {
       width: 20%;
   }


   .button-column {
       position: relative;
       min-height: 480px;
       /* Match the height of the video player */
   }

   .button-column-bottom {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
   }

   .no-gutters {
       margin-right: 0;
       margin-left: 0;
   }

   .no-gutters>.col,
   .no-gutters>[class*="col-"] {
       padding-right: 0;
       padding-left: 0;
   }

   .left-justified {
       align-items: start;
   }

   @font-face {
       font-family: 'CurvedSquare';
       src: url('/assets/fonts/CurvedSquare.ttf') format('truetype');
   }

   .navbar-nav .nav-link {
       font-family: 'CurvedSquare', sans-serif;
       color: #d2eb34;
       /* Optic yellow like a tennis ball */
       font-size: 1.5rem;
   }


   /* CSS class for the hideshow-controls div which will be positioned left of the video-controls and turn on/off the display of the video-controls */
   /* CSS class for the hideshow-controls div which will be positioned left of the video-controls and turn on/off the display of the video-controls */
   .hideshow-controls {
       position: absolute;
       bottom: 0px;
       left: 0px;

       color: white;
       z-index: 1001;
       /* Make sure this is higher than video-controls z-index */
       padding: 5px;
       font-size: 1.5em;
       font-weight: bold;
       text-align: center;
       cursor: pointer;
       opacity: 1;
       transition: opacity 0.5s ease-in-out;
       width: 50px;
       /* Adjust the width as per your requirement */
       height: 50px;
       /* Adjust the height as per your requirement */
   }

   video {
       display: block;
       padding: 0;
       margin: 0;
   }

   video {
       display: block;
       padding: 0;
       margin: 0;
   }

   .text-center {
       width: 100%;
       display: flex;
       justify-content: center;
   }





   /* CSS class for the video controls overlay */
   .controls-container {
       position: absolute;
       width: 100%;


       opacity: .75;
       /* Adjust the left as per your requirement. This should be the width of the hideshow-controls */

       display: flex;
       align-items: stretch;
       color: white;
       z-index: 1000;
       padding: 0;
       margin: 0;

       transition: opacity 0.5s ease-in-out;

   }

   .video-player {
       z-index: 1;
       position: absolute;

   }

   .point-number-input,
   .player-control {
       flex: 1;
   }

   .video-controls {

       width: 100%;
       height: 50px;
       left: 0;
       top: 0;
       position: relative;
       padding: 0;
       /* space the controls out evenly */
       display: flex;
       justify-content: space-around;
   }

   .video-container {
       position: relative;
       width: 90%;
       height: 50px;

       overflow: hidden;

   }




   /* add a css class for a semi-transparent input box with small letters, a black background and optic yello text, with a rounded border, and maximum of 4 characters */
   .point-number-input {
       font-size: 0.8rem;
       color: #d2eb34;
       height: 75%;
       background-color: black;
       border-radius: 5px;
       border: 1px solid #d2eb34;
       text-align: center;

       max-width: 4ch;

       padding: 5px;
       /* Adjust padding as needed */
   }

   .player-control {
       font-size: 2rem !important;

       transition: color 0.3s ease-in-out;
       cursor: pointer;
       box-sizing: border-box;
       /* Add box-sizing property */
   }

   .action-button {
       font-size: 2rem !important;

       transition: color 0.3s ease-in-out;
       cursor: pointer;
       box-sizing: border-box;
       /* Add box-sizing property */
   }

   .btn-icon {
       background: none;
       font-size: 2rem;


       color: #d2eb34;
       /* Optic yellow like a tennis ball */

       border-radius: 5px;
       border: 1px solid #d2eb34;
       /* Optic yellow like a tennis ball */
       text-align: center;
   }

   .open-controls {
       color: #f6f7f9;
       opacity: 0.8;
   }

   .close-controls {
       color: #ffffff;
       opacity: 0.8;
   }

   /* Specific styles for each control */
   .skip-back {
       color: #e56b24 !important;
   }



   .play-one-point {
       color: #24e25b !important;
   }

   .play-continuous {
       color: #2470e2 !important;
   }

   .pause {
       color: #b224e2 !important;
   }

   .play-faster {
       color: #e22470 !important;
   }

   .skip-forward {
       color: #e2b224 !important;
   }

   .view-mode {
       color: #e22424 !important;
   }

   /* Mouseover styles for controls */
   .player-control:hover {
       color: #fff;
       /* Change color to white on hover */

       /* Make the icon slightly larger on hover */
   }



   #containerVideoPlayer {
       position: relative;
   }

   #containerVideoPlayer video {
       width: 100%;
       height: 100%;
   }

   .time-display {
       color: #d2eb34;
       /* Optic yellow like a tennis ball */
       font-size: .7rem;
       /* fixed with so that changing time doesn't shift the controls */
       width: 100px;

       height: 75%;
       background-color: black;
   }

   /* add styles for opening and closing the containerVideoPlayer. A   */

   .icon-bar {

       width: calc(100% - 50px);
       /* Adjust the width as per your requirement. Subtract the width of the hideshow-controls */

       left: 50px;
       /* Adjust the left as per your requirement. This should be the width of the hideshow-controls */

       color: white;
       z-index: 1000;
       padding: 0px;
       font-size: 1em;
       font-weight: bold;
       text-align: center;
       cursor: pointer;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
       align-items: center;
       align-content: center;
       flex-wrap: nowrap;
       overflow: hidden;
       border-top: 1px solid white;
       border-radius: 5px;


       transition: opacity 0.5s ease-in-out;
   }

   .icon-bar-small {
       /* Adjust the width as per your requirement. Subtract the width of the hideshow-controls */

       left: 0px;
       /* Adjust the left as per your requirement. This should be the width of the hideshow-controls */

       color: white;

       padding: 0px;

       cursor: pointer;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
       align-items: center;
       align-content: center;
       flex-wrap: nowrap;
       overflow: hidden;

   }

   .btn-icon {
       background: none;
       font-size: 2rem;


       color: #d2eb34;
       /* Optic yellow like a tennis ball */

       border-radius: 5px;
       border: 1px solid #d2eb34;
       /* Optic yellow like a tennis ball */
       text-align: center;
   }


   .btn-icon .btn-hover-text {
       display: none;
   }

   .btn-icon:hover .btn-hover-text {
       display: inline-block;
   }


   .icon-green {
       color: #24e25b;
   }

   .icon-blue {
       color: #2470e2;
   }

   .icon-purple {
       color: #b224e2;
   }

   .icon-pink {
       color: #e22470;
   }

   .icon-gold {
       color: #e2b224;
   }

   .icon-red {
       color: #e22424;
   }

   .icon-white {
       color: white;
   }

   .playlist-card {
       background-color: darkgrey !important;
   }


   .match-card {
       border: 2px solid yellow;
       color: yellow;
       padding: 20px;
       margin-bottom: 20px;
   }

   .match-card .card-body {
       position: relative;
   }

   .match-card .card-body .fa-pen {
       color: black;
   }

   .match-card .card-body .btn-hover-text {
       display: none;
   }

   .match-card:hover .card-body .btn-hover-text {
       display: block;
   }

   .match-card .card-body .btn-hover-text {
       position: absolute;
       bottom: 10px;
       left: 50%;
       transform: translateX(-50%);
       background-color: yellow;
       padding: 5px 10px;
       font-weight: bold;
   }

   .edit-match-data-button {
       position: absolute;
       top: 10px;
       right: 10px;
       border-radius: 50%;
       cursor: pointer;

   }

   .edit-match-lock-button {
       position: absolute;
       top: 10px;
       right: 40px;
       border-radius: 50%;
       cursor: pointer;
   }

   .icon_grey {
       color: grey;
   }

   .icon_white {
       color: white;
   }