:root {
    --blue: #071E24;
    --white: #ffffff;
  }
.app{
width: fit-content;
    margin: 0 auto;

}
p{
    color: var(--white);
}
h5{
    color: var(--white);
}
.close-button{
    display: none;
}
.navbar-dark .navbar-toggler {
    color: var(--white) !important;
    background-color: #155464 !important;
}
@media (max-width: 576px) {

    .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
        color: #fff;
        background: #102930;
        }
    .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-nav .show.nav-link {
        color: #fff;
        background: #21424b;
        border-top: 2px solid #21424b;
        border-right: 2px solid #21424b;
        border-left: 2px solid #21424b
        }
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #21424b; /* Adjust the background color as needed */
        z-index: 9999; /* Make it appear above everything else */
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        float: left;
        margin-top: 30px;
        width: 100% !important;
        margin-left: -134px;
        background: #21424b;
    }

    .navbar-toggler {
        position: fixed;
        top: 10px; /* Adjust the position as needed */
        right: 10px; /* Adjust the position as needed */
    }

    .navbar-toggler-icon {
        color: white; /* Adjust the icon color as needed */
    }

    /* Style the close button */
    .close-button {
        position: absolute;
    top: 25px;
    right: 81px;
    display: block;
    z-index: 10000;
    background-color: #21424b;
    border: 2px solid #21424b;
    font-size: 16px;
    color: var(--white);
    }
}
@media screen and (max-width: 2200px) {
    .app{
        height: auto;
        background-color: var(--blue);
    }
    .navbar-nav{
        width: 100% !important;
    }
    .nav-item-main{
        width: 140px;
        margin: 0 !important;
    }
    .nav-link-main{
        background-color: #0a252c;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .nav-link-main:hover{
        background-color: #0e3039;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .monitor{
        background: black !important;
        height: 400px;
        margin-left: 47px !important;
        margin-top: 30px;
    }
    .login-form{
        background: #104b5b !important;
        height: 400px;
        margin-top: 30px;
        margin-right: 47px;
        color: var(--white);
    }
  }

@media screen and (max-width: 1400px) {
    .app{
        height: auto;
        background-color: var(--blue);
    }
    .navbar-nav{
        width: 100% !important;
    }
    .nav-item-main{
        width: 150px;
        margin: 0 !important;
    }
    .nav-link-main{
        background-color: #0a252c;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .nav-link-main:hover{
        background-color: #0e3039;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .monitor{
        background: black !important;
        height: 400px;
        margin-left: 47px !important;
        margin-top: 30px;
    }
    .login-form{
        background: #104b5b !important;
        height: 400px;
        margin-top: 30px;
        margin-right: 47px;
        color: var(--white);
    }
  }

@media screen and (max-width: 1200px) {
    .app{
        height: auto;
        background-color: var(--blue);
    }
    .navbar-nav{
        width: 100% !important;
    }
    .nav-item-main{
        width: 130px;
        margin: 0 !important;
    }
    .nav-link-main{
        background-color: #0a252c;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .nav-link-main:hover{
        background-color: #0e3039;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .monitor{
        background: black !important;
        height: 400px;
        margin-left: 47px !important;
        margin-top: 30px;
    }
    .login-form{
        background: #104b5b !important;
        height: 400px;
        margin-top: 30px;
        margin-right: 47px;
        color: var(--white);
    }
  }

@media screen and (max-width: 991px) {
    .app{
        height: auto;
        background-color: var(--blue);
    }
    .navbar-nav{
        width: 100% !important;
    }
    .nav-item-main{
        width: 120px;
        margin: 0 !important;
    }
    .nav-link-main{
        background-color: #0a252c;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .nav-link-main:hover{
        background-color: #0e3039;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .monitor{
        background: black !important;
        height: 400px;
        margin-left: 10px !important;
        margin-top: 30px;
    }
    .login-form{
        background: #104b5b !important;
        height: 400px;
        margin-top: 30px;
        margin-right: -100px;
        color: var(--white);
    }
  }

@media screen and (max-width: 765px) {
    .app{
        height: auto;
        background-color: var(--blue);
    }
    .navbar-nav{
        width: 100% !important;
    }
    .nav-item-main{
        width: 120px;
        margin: 0 !important;
    }
    .nav-link-main{
        background-color: #0a252c;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .nav-link-main:hover{
        background-color: #0e3039;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .monitor{
       display: none;
    }
    .login-form{
        background: #104b5b !important;
        height: 400px;
        margin-top: 30px;
        color: var(--white);
    }
  }

@media screen and (max-width: 500px) {
    .app{
        height: auto;
        background-color: var(--blue);
    }
    .navbar-nav{
        width: 100% !important;
    }
    .nav-item-main{
        width: 120px;
        margin: 0 !important;
    }
    .nav-link-main{
        background-color: #0a252c;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .nav-link-main:hover{
        background-color: #0e3039;
        border: 2px solid #15373f;
        border-radius: 1px;
        text-align: center;
        color: var(--white);
    }
    .monitor{
       display: none;
    }
    .login-form{
        background: #104b5b !important;
        height: 400px;
        margin-top: 30px;
        color: var(--white);
    }
    .card-body{
        padding-right: -10px;
    }
  }

  /* Home */
  .content-head .left-name p{
    margin-left: 30px;
  }
  .content-head .right-date p{
    margin-right: 35px !important;
  }
.content-summery{
    background-color: #114957;
    height: auto;
    margin: 20px !important;
    color: var(--white);
    font-size: 14px;
}

.content-summery h5{

    margin-top: 20px;
    margin-left: 5px;

}
.left-menu {
    background-color: #114957;
    min-height: 450px;
}
.left-menu ul li{
    list-style: none;
}
.custom-button-list {
    padding-left: 100px;
    padding-right: 100px;
  }

  .custom-button-list li {
    margin-bottom: 10px; /* Adjust the spacing between buttons as needed */
  }
.right-user-create {
    background-color: #114957;
    min-height: 450px;
}
.right-user-create .col-md-6 a{
    margin-left: 5px;
    margin-right: 5px;
}
.content-summery .row .table-borderless{
    background-color: #114957;

}

.nav-item-summary{
    width: 80px;
    color: var(--white);
    background-color: #104b5b;
}
.label-name{
    color: var(--white);
    padding-right: 10px;
}
.create-user{
    float: right;
    margin-top: 20px;
}
.sports-batting-select-menu{
    float: right;

}
.sports-batting-select-menu ul{
    list-style: none;
}

.sports-batting-select-menu li{
    float: left;

}

.sports-batting-select-menu li a{
margin-right: 5px;
}
.sports-batting-select-games{
    background-color: #104b5b ;
}
.sports-batting-select-games .card{
    background-color: #666666 ;
}

.sports-batting-select-games .card-body {
    padding: 0.5rem 0.5rem !important;
}
.sports-batting-select-games .card-body table{
    background-color: #104b5b ;
    margin-bottom: -2px !important;
    color: var(--white);
}
.sports-batting-select-games .card-body thead{
    background-color: #165e71 ;
    margin-bottom: -2px !important;
    color: var(--white);
    border: 2px solid #165e71;
}
.sports-batting-select-games .card-body tbody{
    background-color: #0b2e37 ;
    margin-bottom: -2px !important;
    color: var(--white);
    border: 2px solid #0b2e37;
}


 .pagination{
     float: right !important;
     margin-top: 20px;
     marginl-left:40px;
 }