:root{
    --bs-primary: #1365a8;
    --cf-brand-color1: #009f3b;
    --cf-brand-color2: #1365a8;
    --cf-clay-color: #C46316;
    --cf--ball: #dfff4f;
}
.bg-primary{background-color: var(--bs-primary) !important}
.opacity-gradient{
   
        background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    
}
.topnav-public{

    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

}
.topnav-members{

    background: linear-gradient(to left, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 1));
  
}

.clubnav {
    min-width: 200px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.text-clay{
    color: #C46316;
}

.hgmain {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}
.footer{
    clear: both;
    position: relative;
    
}

.navbar-toggler:focus {
      box-shadow: 0 0 0 .15rem;
}

.semitransparent{
    background-color: rgba(255, 255, 255, 0.3);
}
.winner {
    background: #b0f78b !important;
}
.score-input-row {
    display: flex;
    justify-content: space-between;
}
.player-vs-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.messagescontainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 90%; /* This ensures the div takes up the full height of its parent */
    background-color: rgb(137, 171, 181);
    padding: 0.5rem 1.5rem;
    row-gap: 1rem;
}
.hidden {
    display: none;
}

.message-balloon {
    border-radius: 1.15rem;
    line-height: 1.25;
    
    padding: 0.5rem .875rem;
    background-color: #e5e5ea;
    color: #000;
    position: relative;
    align-items: flex-start;
}

.message-balloon::after {
    bottom: -0.1rem;
    content: "";
    height: 1rem;
    position: absolute;
    background-color: rgb(137, 171, 181);
    border-bottom-right-radius: 0.5rem;
    left: 20px;
    transform: translate(-30px, -2px);
    width: 10px;
}

.message-balloon::before {
    bottom: -0.1rem;
    content: "";
    height: 1rem;
    position: absolute;
    border-bottom-right-radius: 0.8rem 0.7rem;
    border-left: 1rem solid #e5e5ea;
    left: -0.35rem;
    transform: translate(0, -0.1rem);
}




.message-header {
    font-size: 0.8em;
    color: #888;
    display: flex;
    justify-content: space-between;
}

.message-content {
    margin-top: 5px;
}

.message-image img {
    max-width: 150px;
    max-height: 150px;
    height: auto;
}

.miniavatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    
}


.freecourtslot {
    background-color: #9ffa749e; // #9ffa74; //#9ffa749e
    color: #88cf0b;
    height: 100%;
   
}
.bookedslot {
    background-color: #C46316 !important;
    color: #000;


}

.recursivebookedslot {
    background-color: #169cc4 !important;
    color: #000;


}

.narrow-column {
    white-space: nowrap;
    
}

.nopadding {
    padding: 0 !important;
    
}
td.nopadding {
    height: 100%;
}

div.freecourtslot {
    height: 40px;
    margin-right: 3px;
}

.slot-lafix {
    border-bottom: 1px dotted gainsboro;
    border-left: 1px dotted darkgray;
    border-right: 1px dotted darkgray;
    border-top: 1px dotted darkgray;
}
.slot-lajuma {
    border-top: 0;
    border-left: 1px dotted darkgray;
    border-right: 1px dotted darkgray;
    border-bottom: 1px dotted darkgray;
}
.dotted-border {
    border-bottom: 1px dotted black;
}
.timeslot {
    vertical-align: top;
    padding: 0 !important;
}
.addbook{

    width: 24px;
    height: 24px;
    padding: 0;
    background-color: #a9f3ca; // #66eba1;
    color: white;
    border-radius: 50% !important;
}
.editbook{

    width: auto;
    height: 24px;
    padding: 0;
    background-color: #C46316;
    color: white;
    border-radius: 12px !important;
}
.delbook{

    width: 24px;
    height: 24px;
    padding: 0;
    background-color: lightpink;
    color: white;
    border-radius: 50% !important;
}
.full-width-height {
    width: 100%;
    height: 100%;
}