body {
    font-family: 'Roboto';
    font-size: 20px;
    background-color: rgba(244, 238, 223, 0.8);
}

h1 {
    font-family: 'Acme';
    text-align: center;
    font-size: 38px;
    text-decoration: none;
}

hr {
    height: 2px;
    border: none;
    background-color: #000; /* You can customize the color here */
    margin: 15px 0; /* Adjust the margin as needed */
}

body a {
    color: #4A8C68; /* Darker link color */
}

body a:hover {
    color: #558A6B; /* Hovered link color */
}

body a:active,
body a:focus {
    color: #2F5840; /* Clicked link color */
}

footer {
    background-color: rgba(220, 208, 192, 0.7);
}
.card-header {
    font-size: 23px;
}

.card-body {
    font-size: 18px;
}


.hole_header {
    background-color: darkgreen;
    width: 100%;
    color: white;
}

.blue_yardage {
    background-color: blue;
    width: 100%;
    color: white;
}

.white_yardage {
    background-color: white;
    width: 100%;
}

.par {
    background-color: lightgrey;
}

#hole_num {
    color: white;
    display: inline;
    width: 100%;
}

.bold {
    font-weight: bold;
}

.column {
    border-style: solid;
    border-width: 2px;
    border-color: black;
    background-color: orange;
}

.alert {
    font-size: 18px;
    font-style: italic;
    text-align: center;
}


.table-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .table-container table {
    flex: 1;
    margin: 0 10px;
    max-width: calc(50% - 20px);
    overflow-x: auto; /* Add this line to enable horizontal scrolling on mobile */
  }
  

  .help-block {
    color: red !important;
}

.imgset {
    width: 350px;
    height: 200px;
}

.maxsize {
    max-width: 350px;
    max-height: 200px;
}

.score-container {
    display: inline-block;
}

.score {
    display: inline-block;
    width: 30px; /* Set the desired width for the score element */
    height: 30px; /* Set the desired height for the score element */
    text-align: center;
    line-height: 30px; /* Vertically center the score text */
    margin: 2px;
    font-weight: bold;
}

.score-over-par {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 30px; /* Set the desired width for the circular score element */
    height: 30px; /* Set the desired height for the circular score element */
    border-radius: 50%; /* Make it circular */
    background-color: #ffa500; /* Orange for scores under hole_par */
    color: #000;
    
}

.score-under-par {
    color: #fff;
    background-color: #007bff; /* Light blue for scores over hole_par */
}

.score-equal-par {
    border: black;

}

.clickable-row:hover {
    background-color: #f2f2f2;
    cursor: pointer;
    text-align: middle;
}

.scrollable {
    overflow-x: auto;
}

.navbar-nav .nav-link, 
footer a {
    color: #4A5568; /* Unclicked link color */
    text-decoration: none;
}

.navbar-nav .nav-link:hover,
footer a:hover {
    color: #64748B; /* Hovered link color */
}

.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus,
footer a:active,
footer a:focus {
    color: #2A2F3A; /* Clicked link color */
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="black" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M0 11.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"/></svg>');
    background-size: 30px 30px;
}

.btn-outline-custom {
    color: #4A8C68; /* Text color */
    border-color: #4A8C68; /* Outline color */
}

.btn-outline-custom:hover {
    background-color: #4A8C68; /* Background color on hover */
    color: #fff; /* Text color on hover */
}

/* Optionally, you can style the active and focus states as well */
.btn-outline-custom:active,
.btn-outline-custom:focus {
    background-color: #4A8C68; /* Background color on click/focus */
    color: #fff; /* Text color on click/focus */
}

.btn-primary-custom,
.announcement-link {
    /*background-color: #41985D; */
    background-color: #44865F;
    border-color: #44865F; /* Border color */
    color: #FFFFFF; /* Text color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Text shadow for depth */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Box shadow for elevation */
    transition: background-color 0.3s ease; /* Transition effect */
    font-size: 18px;
    border: 5px solid rgba(243, 224, 224, 0.562);
}

.btn-primary-custom:hover,
.announcement-link:hover {
    background-color: #3A7150; /* Darker background color on hover */
    color: #FFFFFF;
}

.btn-primary-custom:focus,
.btn-primary-custom:active,
.announcement-link:focus,
.announcement-link:active {
    background-color: #2E573F; /* Even darker background color on focus/active */
    outline: none; /* Remove the default focus outline */
    color: #FFFFFF;
}

#alert-div {
    display: none;
}

.status-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px; /* Optional: Add some space between the circle and the text */
  }


  /* newest CSS 12/10/23 don't remove */

  .alert-dark {
    background-color: rgb(169, 169, 169, 0.4);
  }

  .alert-danger {
    background-color: rgba(240, 40, 40, 0.4);
  }
  
  .alert-success {
    background-color: rgba(15, 156, 15, 0.4);
  }

  .alert-info {
    background-color: rgba(68, 202, 255, 0.4);
  }

  .alert-warning {
    background-color: rgba(255, 165, 0, 0.4);
  }

  .red-alert-circle {
    background-color: red;
    display: inline-block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 3px;
  }

  .sand {
    background: url('../img/sandy2.webp');
    background-size: cover; 
    background-position: center;
  }

  .grass {
    background: url('../img/fairway2.png');
    background-size: cover; 
    background-position: center;
    text-align: center;
  }

  .ball {
    background: url('../img/ball_pattern.png');
    background-size: cover; 
    background-position: center;
  }

  .text-block {
    display: inline-block; 
    background-color: rgba(58, 113, 80, 0.5); 
    padding: 2px; 
    border-radius: 3px;
    color: white;
  }

.text-block-header {
    display: inline-block; 
    background-color: rgba(255, 255, 255, 0.6); 
    padding: 2px; 
    border-radius: 3px;
    color: black;
}

.close {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 5px;
    cursor: pointer;
}

.navbar-toggler .red-dot {
    position: absolute;
    top: 12px; /* Adjust these values as needed to position the dot */
    right: 5px; /* Adjust these values as needed to position the dot */
    width: 10px; /* Size of the dot */
    height: 10px; /* Size of the dot */
    background-color: red; /* Color of the dot */
    border-radius: 50%; /* Makes it circular */
    display: inline-block;
}

/* CHAT CSS */
/* Chat window styles */
/* Style the chat window */
.chat-window {
    max-height: 320px; /* Set a maximum height for the chat window */
    min-height: 320px;
    overflow-y: auto; /* Enable vertical scroll if content overflows */
    border: 1px solid #ccc; /* Add a border for aesthetics */
    padding: 10px;
    display: flex;
    min-width: 320px;
    flex-direction: column; /* Stack messages vertically */
}

/* Individual message styles */
.message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 10px;
}

/* Sender's message styles */
.sent {
    align-self: flex-end; /* Align sent messages to the right */
    background-color: #007bff; /* Add a background color for sent messages */
    color: #fff; /* Set text color for sent messages */
    border-radius: 10px; /* Add rounded corners for sent messages */
    margin: 5px; /* Add some margin for spacing */
    padding: 10px; /* Add padding to the message content */
    max-width: 70%; /* Set a maximum width for sent messages */
    word-wrap: break-word; /* Wrap long words if needed */
}

/* Receiver's message styles */
.received {
    align-self: flex-start; /* Align received messages to the left */
    background-color: #f2f2f2; /* Add a background color for received messages */
    color: #333; /* Set text color for received messages */
    border-radius: 10px; /* Add rounded corners for received messages */
    margin: 5px; /* Add some margin for spacing */
    padding: 10px; /* Add padding to the message content */
    max-width: 70%; /* Set a maximum width for received messages */
    word-wrap: break-word; /* Wrap long words if needed */
}

/* Timestamp styles */
.timestamp {
    font-size: 12px;
    color: #fff;
}

.striped-list .row:nth-child(odd) {
    background-color: #f8f9fa; /* Alternate row background color */
}

.navbar-brand a, .navbar-brand a:hover, .navbar-brand a:active {
    color: #000;
    text-decoration: none;
}

.card-header a, .card-header a:hover, .card-header a:active {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}