/* Fonts */

.text-xm {
    font-size: 12px;
}

.text-sm {
    font-size: 15px;
}

.text-md {
    font-size: 18px;
}

.text-lg {
    font-size: 21px;
}

.text-expanded {
    font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;
    font-stretch: expanded;
}

.sales-overview-email {
    font-size: 12px!important;
    font-weight:200;
}

/* Navbar */

.nav-bar-link:hover {
    color: rgb(255, 255, 0, 0.75) !important; 
}

.nav-match-login:hover {
    color: rgb(135, 135, 0)!important;
}

.nav-footer-link:hover {
    color: #007bff !important; 
}

.modal-announcement {
    color: black;
    text-align: left;
}

.modal-announcement .modal-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 8%;
    left: 0;
    max-height: 90vh;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.25);
}

.modal-announcement .modal-body {
    overflow-y: auto;
}

.announcement-sidebar {
    height: 65vh;
    overflow-y: auto;
    /* padding: 20px; */
    font-family: 'Arial', sans-serif;
}

@media (max-width: 767.98px) { /* Media query for screens smaller than 768px */

    .modal-announcement .modal-content {
        top: 0;
    }

    .announcement-sidebar {
        height: auto; /* Ensures height is still auto */
        padding-bottom: 5px; /* Maintain 5px padding */
    }

    .announcement-present {
        height: 15vh; /* Set height to accommodate the first announcement item */
        overflow-y: auto; /* Enable scrolling if necessary */
        padding-bottom: 5px;
    }

}

.announcement-header {

    background-color: #212529;
    color: rgba(255, 255, 0, 0.75);
    text-align: center;
    padding: 10px;
    font-size: 1.2em;
}

.announcement-item {
    background-color: #ffffff;
    /* color: #ffcc00; */
    color: rgba(0, 0, 0, 0.75)!important;
    border: 2px solid #444;
    padding: 10px;
    margin-bottom: 5px;
    text-align: center;
}

.announcement-content {
    height: 64vh;
    overflow-y: auto;
    background-color: #ffffff;
    color: black;
    padding: 20px;
    border: 2px solid #444;
    /* margin-left: 15px; */
    /* width: 100%; */
}

.announcement-item.active {
    background-color: rgba(13, 110, 253);
    color: white!important;
}

/* All Tables */
.table-responsive {
    max-height:600px;
}

.dashboard-table {
    max-height: 400px; 
    overflow-y: auto;
}

#dashboardBody {
    max-height: 100vh; /* Set a maximum height equal to the viewport height */
    overflow-y: auto; /* Add a vertical scrollbar when content overflows */
    font-size: 80%; /* Reduce font size by 20% */
}

/* LeagueInfo */
.jumbo-bg-image {
    position:relative;
    top: 0;
    right: 0;
    width: 115%; /* Display half of the image */
    height: 100vh; /* Full viewport height */
    background-image: url('/media/leagueinfo/nanoflare_1000_z.png');
    background-size: cover; /* Stretch the image */
    /* margin: 0;
    padding: 0; */
    /* overflow: hidden; */
}

.bg-image {
    background-image: url('/media/leagueinfo/group_2.jpg');
    background-size: cover; /* Maintain aspect ratio */
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    height: 575px;
    min-height: 50vh; /* Adjust height relative to viewport height for responsiveness */
}

.parallax {
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Add responsive behavior for mobile views */
@media (max-width: 768px) {
    .bg-image {
        background-attachment: scroll; /* Disable fixed background for smoother mobile scrolling */
        height: 300px; /* Adjust height for smaller screens */
    }

    .parallax::before {
        background: rgba(0, 0, 0, 0.3); /* Optionally reduce overlay opacity for smaller screens */
    }
}

.league-image-sm {
    width: 100px;
}

.fill-image {
    height: 100%; 
    width: auto;
}

.fill-row {
    width: 100%!important;
}

.testimonial-comment {
    font-size: 24px;
    font-style: italic;
}

/* League page */

.league-event-dropdown-desc {
    font-size: 12px;
}

.league-event-date {
    border: 1px solid #000;
}

.league-event-date-month {
    font-size: 16px;
    font-weight: bold;
}

.league-event-date-day {
    font-size: 24px;
    font-weight: bold;
}

.league-event-date-dow {
    font-size: 12px;
}

.league-filter-results {
    font-size: 13px;
}

.league-event-title {
    font-size: 12px;
    color:rgb(165, 165, 165);
}

.league-event-registration {
    font-size: 13px!important;
}
.league-event-registration-open {
    font-size: 13px!important;
    color: green!important;
}

.league-event-registration-closed {
    font-size: 13px!important;
    color: red!important;
}

.league-event-time {
    font-size: 13px!important;
}

.league-event-rec-skill-level {
    font-size: 13px!important;
}

.league-event-gp-token-mobile {
    font-size: 13px!important;
}

.league-event-gp-token {
    font-size: 13px!important;
    font-weight: bold!important;
}

.league-event-rules-register {
    font-size: 10px!important;
}

.league-event-modal-text {
    font-size: 14px!important;
}

/* matches */
.fixed-form {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    gap: 10px; /* Add space between form items */
}

/* other */
.table td.ma-team-column {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Optionally add ellipsis for long text */
}

.table td.ms-team-column {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Optionally add ellipsis for long text */
}

.bordered-badge {
    display: inline-block;
    padding: 0.3em 0.5em;
    border: 1px solid black;
    border-radius: 4px;
    color: black;
}

.dash-side-panel-height {
    min-height: 300px;
}

.form-layout {
    border-radius: 15px;
    width: 475px;
}

.billing-layout {
    position: relative;
    background-color: #f7f7f7;
}

.billing-layout-content {
    flex: 0 0 365px;
    padding-left: 24px!important;
    padding-right: 24px!important;
}

.terms-display {
    font-size: .75rem;
    color: #666;
}

.scrollable-table {
    max-height: 100vh;
    overflow-y: auto;
}

.row-playing {
    background-color: rgb(255, 255, 0)!important; /* Choose your desired color */
}

.row-finished {
    background-color: rgba(128, 128, 128, 0.250)!important; /* Choose your desired color */
}

.league-dropdown {
    width: 175px!important;
}

a.disabled {
    /* Make the disabled links grayish*/
    color: gray;
    /* And disable the pointer events */
    pointer-events: none;
}

.filter-skill-level-rating-sm {
    display: inline!important;
    font-size: 13px;
    
}

.yellow-text {
    color: rgba(255, 255, 0, 0.75)!important;
}

.leaderboard-name {
    white-space: nowrap;
}

/* Match Assistant header sticky when scrolling */
.match-assistant-table .table thead th {
    position: sticky;
    top: 0;
    background-color: rgb(245, 245, 245); /* Ensure it stays visible */
    z-index: 2; /* Make sure it's on top of the table rows */
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.3); /* Shadow for separation */
    border-bottom: 2px solid #ddd; /* Optional: Solid border for better visibility */
}

/* Make leaderboard header stick when scrolling */
.leaderboard-table .table thead th {
    position: sticky;
    top: 0;
    background-color: rgb(245, 245, 245); /* Ensure it stays visible */
    z-index: 2; /* Make sure it's on top of the table rows */
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.3); /* Shadow for separation */
    border-bottom: 2px solid #ddd; /* Optional: Solid border for better visibility */
}

/* Make Player column stick when scrolling */
.table thead th.player-column,
.table tbody td.player-column {
    position: sticky;
    left: 0;
    z-index: 1;
    border-right: 2px solid #ddd;
}

.table thead th.player-column {
    z-index: 3; /* Ensure it stays above the other sticky elements */
}

/* Match History */
.matchhistory-name {
    white-space: nowrap;
}

/* About League Matches */
.about-league-matches-title {
    font-size: 48px;
    font-weight: bold;

}

.about-league-matches-descriptor {
    font-size: 24px;

}