.bar { position: relative; width: 290px; height: 48px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.msg { position:absolute; top:50%; transform:translateY(-50%); background:#111827; color:#fff; padding:6px 12px; border-radius:999px; white-space:nowrap; }

.side-by-side{
    display:inline-block;
    vertical-align:top;
}

.overlay-container {
    position: fixed; /* Positions the overlay relative to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex; /* Enables Flexbox for centering */
    justify-content: center; /* Centers horizontally */
    align-items: center; /* Centers vertically */
    z-index: 1000; /* Ensures the overlay is on top of other content */
}

.overlay-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Optional: Set a max-width and max-height for responsiveness */
    max-width: 90%;
    max-height: 90%;
    overflow: auto; /* Adds scrollbars if content exceeds max-height */
}

.week_name{
    font-size:18px;
    font-weight:bold;
    color: #8c8c8c;    
}

.page_title{
    font-size:16px;
    text-transform:uppercase;
    font-weight:bold;
    color:#00008f;
}

.team_selectable_box{
    display:inline-block;
    vertical-align:middle;
    width:110px;
    padding:10px;
    text-align:center;
    border:2px solid #ccc;
    cursor:pointer;
    border-radius:5px;
}

.team_unselectable_box{
    display:inline-block;
    vertical-align:middle;
    width:110px;
    padding:10px;
    text-align:center;
    border:2px solid #ccc;
    background-color: #ff0000;
    color:#ffffff;
    border-radius:5px;
}