/*Done By: Emmanuel James
 Last Modified: 2024/01/23
/*Genereic Css*/
html {
    font-size: 14px;
}

@media (min-width: 1299px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

.display-4 {
    font-family: 'Arial', sans-serif;
    color: #333;
    font-size: 18px;
}

.img-player {
    height: 300px;
    width: 380px;
}

@media only screen and (min-width: 320px) and (max-width: 769px) {
    nav.navbar .nav-link {
        font-size: 12px;
    }
}
/*Genereic Css End*/
/*Welland Minor Css Home Page Start*/
body {
    margin: 0;
    overflow-y: auto;
    padding-bottom: 50px;
}


.navbar {
    background-color: #17254c;
}



    .navbar a {
        font-size: 20px;
    }

li a:hover {
    color: white;
}

.dropdown-menu a:hover {
    background-color: #2e8b43;
    color: #fff;
}


/********Logo********/
.logo {
    width: 150px;
    height: 200px;
}



.secondLogo {
    width: 100px;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}


@media only screen and (min-width: 320px) and (max-width: 769px) {


    .error {
        padding-top: 80px;
        font-size: 14px;
    }

        .error h1 {
            font-size: 12px;
        }
}

/********Logo Ends********/



/******Header Starts**********/
.header {
    background-color: #fff;
    color: #17254C;
    padding: 4px 12px;
    margin: 4px;
    font-size: 20px;
    font-weight: 700;
    height: 40px;
    margin-top: 100px;
    margin-left: 30px;
    margin-right: 30px;
}


.banner {
    margin-bottom: 30px;
}

.header {
    animation: fadeIn 1s ease-in-out;
}


.text-center {
    text-align: center;
    background-color: #fff;
}


.uploadData {
    float: left;
}

.arrow {
    font-size: 22px;
}


.gameStyle {
    border-radius: 5px;
    max-height: 516px;
    max-width: 700px;
    overflow-y: auto;
    border: 2px solid #2e8b43;
    padding: 10px;
    margin-top: -15px;
    margin: 0 auto;
    position: relative;
    top: 2px;
    right: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}



    .gameStyle h1 {
        background-color: #17254c;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
    }

.row #gameBtn {
    background-color: #17254c;
    border-radius: 5px;
    margin: 0 auto;
    max-width: 700px;
    padding: 26px;
    position: relative;
    top: 2px;
    right: 25px;
}


.col-md-12 {
    display: inline-flex;
}




@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


.header {
    font-size: 2.5rem;
    margin-bottom: 10px;
}



.logo {
    margin: 10px 0;
}


@media only screen and (max-width: 1299px) {
    .header {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
}


@media only screen and (min-width: 320px) and (max-width: 769px) {
    .header {
        font-size: 10px;
        margin-bottom: 10px;
        text-align: center;
        border-radius: 5px;
        padding: 50px;
    }

    form .impTeams {
        font-size: 14px;
    }

    .activeParent .activeHeading, filSearch {
        font-size: 18px;
    }

    .form-horizontal .filSearch {
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .text-nowrap {
        font-size: 12px !important;
        /
    }
}




@media only screen and (min-width: 320px) and (max-width: 1299px) {
    h1 {
        font-size: 15px;
    }

    .logo {
        width: 60px;
        height: 60px;
    }



    .header {
        background-color: #17254c;
        color: #17254C;
        padding: 4px 12px 51px;
        margin: 4px;
        height: 40px;
        margin-top: 10px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 40px;
    }

        .header h1 {
            font-size: 10px;
        }
}



/******Header and Icon Ends**********/



/******Context help starts*********/
.help-icon-container,
.gameHelp-icon-container {
    align-items: center;
    background-color: #2e8b43;
    border: 2px solid #FFF;
    border-radius: 100%;
    cursor: pointer;
    height: 40px;
    justify-content: center;
    margin: 3px;
    width: 40px;
    z-index: 1000;
}

.help-icon {
    font-size: 30px;
    color: #fff;
    padding: 1px;
    margin: 3px 0 0 7px;
}

.gameHelp-icon {
    font-size: 30px;
    color: #fff;
    padding: 1px;
    margin: 3px 0 0 7px;
}

.icon {
    font-size: 70px;
    color: #fff;
    padding: 1px;
}

.icons {
    font-size: 70px;
    margin-top: 90px;
    margin-bottom: 10px;
    color: #fff;
    padding: 1px;
}

.icon {
    margin-top: 50px;
    margin-bottom: 10px;
}

.iconP {
    font-size: 70px;
}

.first-section, .second-section, a {
    text-decoration: none;
    color: #fff;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        right: -300px;
    }

    100% {
        opacity: 1;
        right: -140px;
    }
}

.help-box {
    background-color: #FFF;
    border: solid 3px #000;
    border-radius: 9px;
    box-shadow: 0 0 1px rgba(4, 98, 251);
    display: none;
    right: -140px;
    padding: 17px;
    position: fixed;
    top: 105px;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 300px;
    z-index: 1000;
    animation: fadeIn 0.4s;
}

#nextBtn,
#skipBtn {
    background-color: rgba(255, 255, 255, 1.0);
    border-radius: 6px;
    color: rgb(0, 0, 0);
    cursor: pointer;
    margin-right: 10px;
    padding: 5px 10px;
}

.help-box p {
    font-size: 14px;
}

.help-content {
    margin-bottom: 10px;
}

.help-actions {
    text-align: right;
}

.context-help {
    background-color: #38F;
    color: #FFF;
    cursor: help;
    display: inline;
    padding: 1px 5px;
    border-radius: 100%;
}

/******Context help ends*********/







/*Dashboard and Game table On Home page starts*/


.center-container {
    text-align: center;
}

.startGame, .startGames {
    background-color: #2e8b43;
    margin: 0 auto;
    padding: 19px;
    margin-bottom: 40px;
    max-width: 300px;
    border-radius: 5px;
    gap: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}


.startGame, .dashboards {
    display: block;
}


@media only screen and (max-width: 768px) {
    .startGame {
        display: none; /* Hide on tablets and phones */
    }

    .dashboards {
        display: flex;
        flex-direction: column;
    }


    .gameStyle {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }


    .dashboard {
        display: none;
    }

    .gameStyle {
        border: 2px solid #2e8b43;
    }
}

.styleGameTbl table {
    text-align: left;
}


@media only screen and (min-width: 320px ) and (max-width: 590px) {

    .styleGameTbl {
        height: 250px;
    }

    .dashboards {
        height: 300px;
    }



    .yemiNav {
        position: fixed;
        z-index: 900;
        width: 100%;
    }
}




@media only screen and (min-width: 590px) and (max-width: 767px) {


    .gameStyle {
        width: 100%;
        max-width: 580px;
        margin: 0 auto;
    }


    .hideGameBtnLaptop p {
        margin-top: 32px;
    }
}





.container-fluid {
    padding-bottom: 30px;
}

.dashboard {
    margin: 0 auto;
    border-radius: 5px;
    padding: 15px;
    /* height: 577px;*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
}


/*Dashboard and Game table On Home page ends*/


/*Import Starts*/
.import {
    margin-bottom: 30px;
    margin-top: 20px;
    height: 280px;
}


/*Import Ends*/
.parent {
    gap: 7px;
    padding-top: 70px;
}



#btnBck {
    text-align: center;
}


.hover:hover {
    background-color: #2e8b43;
    border-color: #17254C;
}








/* Layout Styles, Generic Nanigation Bar, forms, sections */
@media (min-width: 992px) {
    .yemiNav {
        position: fixed;
        z-index: 600;
        width: 100%;
    }

    main {
        position: relative;
        top: 190px;
    }
}


@media only screen and (min-width: 320px) and (max-width: 768px) {
    .parent {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .import {
        max-width: 80%;
    }

    footer {
        bottom: 40px;
    }

    .wmba {
        text-align: center;
        bottom: 60px;
        margin-top: 0px;
    }

        .wmba h1 {
            font-size: 30px;
        }





    .dashboards {
        margin-bottom: 40px;
        border: 5px solid #2e8b43;
    }

    .clickable-header {
        display: none;
    }


    .view {
        position: relative;
        left: 0px;
    }


    .modal {
        width: 150px;
    }
}



@media (min-width: 780px) {

    main {
        position: relative;
        top: 120px;
    }
}

/* Styles for smaller screens (phone) */
@media (max-width: 770px) {

    main {
        position: relative;
        top: 190px;
    }
}


.yemiNav {
    position: fixed;
    z-index: 600;
    width: 100%;
    margin-bottom: 120px;
}
/* Layout Styles, Generic Nanigation Bar, forms, sections Ends*/





/********Forms Classes Starts*/
.custom-fieldset {
    border: 2px solid #000;
    border-radius: 5px;
    margin-bottom: 32px;
    padding: 15px;
}

.custom-legend {
    font-size: 24px;
    font-weight: 600;
    color: #000;
}

.required-label::after {
    content: ' *';
    color: red;
    margin-left: 10px;
}

form {
    margin-bottom: 80px;
}

.form-group {
    margin-bottom: 30px;
}

.activeView {
    padding: 10px;
}
/********Forms Classes Ends*/









/************Phone and ScoreKeeping Navigation************/

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    .scoreKeepingNav {
        display: flex;
        flex-wrap: nowrap;
    }

    #hideStats {
        display: none;
    }
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .scoreKeepingNav {
        display: flex;
        flex-wrap: nowrap;
    }
}


@media only screen and (max-width: 1200px) {
    .teamImport {
        display: flex;
        flex-direction: column;
    }

    .phoneNav,
    .scoreKeepingNav {
        display: flex;
    }
}

/* Default styles for tablets and phones */
.phoneNav {
    background-color: #f7F7f7;
}


.phoneNav,
.scoreKeepingNav {
    border-radius: 10px 10px 0 0;
    bottom: 0;
    position: fixed;
    width: 103%;
    z-index: 100;
    margin-left: -7px;
}


    .scoreKeepingNav a {
        background-color: #f7F7f7;
        color: rgb(57, 69, 64);
        float: left;
        font-size: 10px;
        padding: 12px 0;
        text-align: center;
        text-decoration: none;
        width: 20%;
        display: inline-block;
    }

    .phoneNav a {
        color: rgb(57, 69, 64);
        float: left;
        font-size: 10px;
        padding: 12px 0;
        text-align: center;
        text-decoration: none;
        width: 25%;
        display: inline-block;
    }

    .phoneNav i,
    .scoreKeepingNav i {
        font-size: 20px;
    }

    .phoneNav a:hover,
    .scoreKeepingNav a:hover {
        color: #e7995e;
    }

.phoneNav,
.scoreKeepingNav {
    display: flex;
}


@media only screen and (min-width: 769px) {
    .phoneNav,
    .scoreKeepingNav, .wmba {
        display: none; /* hide the navigation bar */
    }
}
/************Phone and ScoreKeeping Navigation Ends************/








.editform, .games-editform {
    border: 1px solid black;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

.editform {
    height: 600px;
}

.games-editform {
    height: 900px;
}

.details-appearance {
    appearance: none;
    border: none;
    color: black;
    background-color: white;
    font-size: 18px;
    padding: 5px;
}

    .details-appearance::-ms-expand {
        display: none;
    }

partial {
    margin: 0 auto;
    text-align: center;
}

legend {
    text-align: center;
    font-weight: 500;
}


fieldset {
    padding: 20px;
}

#saveCheck, #error {
    font-size: 60px;
    padding-bottom: 10px;
}

#bck {
    margin-top: 10px;
}

.modal-content {
    padding-top: 10px;
}












#customModal {
    display: none;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    padding: 20px;
    max-width: 400px;
    width: 100%;
    border-radius: 8px;
    height: 250px;
}

.modal-content {
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}




/* Button Styles */




.backBtn {
    width: 120px;
}

.btn-outline-dark:hover,
.btn-primary:hover {
    color: white;
    background-color: #2e8b43;
}

.btn-outline-dark,
.btn-primary {
    background-color: transparent;
    color: #666362;
    border: 1px solid #2e8b43;
    width: 12em;
}

.labRequred {
    margin-bottom: 35px;
}

.custom-file-label {
    font-size: 25px;
    font-weight: 500;
}


.non-button-input {
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
    color: #333;
}


.lbl {
    position: relative;
    right: 149px;
}

.btnFilterActions {
    padding-top: 12px;
}

button.btn.btn-left {
    width: 200px; /* Adjust the width as needed */
}


.form-horizontal button {
    height: 40px;
}

.view {
    position: relative;
    right: 150px;
}


/**************Menu Bar Classes*************/
.custom-hover-effect:hover {
    color: #fff !important;
    text-decoration: underline;
}

.menuEffect.active {
    color: rgba(4, 98, 251) !important;
    text-decoration: underline;
}

.secondLogo:hover {
    background-color: #fff !important;
}

.menu:hover {
    color: #fff !important;
    text-decoration: underline;
}




.custom-hover-effect.active {
    color: #2e8b43 !important;
}


.phoneIcon.active {
    color: rgba(4, 98, 251);
}



.activeHeading {
    font-size: 32px;
    font-weight: 500;
    margin-top: 55px;
    margin-left: 5px;
}


#heading {
    margin-bottom: 2px;
}


.collapse {
    margin-top: 10px;
}
/**************Menu Bar Classes Ends*************/






/*Divisiom Table Starts*/


@media only screen and (min-width: 320px) and (max-width: 768px) {
    th .division {
        position: relative;
        top: 20px;
        right: 10px;
    }

    th #moveDiv {
        position: relative;
        left: 60px;
    }
}


.divisionTable {
    width: 40%;
    margin: 0 auto;
}

/*Divisiom Table Ends*/


.playerTable {
    width: 60%;
    margin: 0 auto;
}








/******Button Starts**********/
.btn {
    --c: #2e8b43;
    color: var(--c);
    font-size: 13px;
    border: 0.3em solid var(--c);
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 2em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
}

.gameStyle .btn {
    position: relative;
    top: -65px;
    left: 450px;
}

.btn span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}

.btn:hover {
    color: #fff;
}

    .btn:hover span {
        transform: translateY(0) scale(2);
    }

        .btn:hover span:nth-child(1) {
            --n: 1;
        }

        .btn:hover span:nth-child(2) {
            --n: 2;
        }

        .btn:hover span:nth-child(3) {
            --n: 3;
        }

        .btn:hover span:nth-child(4) {
            --n: 4;
        }

@media (max-width: 767px) {
    .btn {
        width: 100%; /* Full width on phones */
        margin: 1em 0; /* Adjust margin for spacing */
    }
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .btnStyle {
        width: 90px;
        font-size: 12px;
    }

    .link a {
        font-size: 13px;
    }

    form .btnFilter {
        width: 150px; /* Adjust the width for smaller screens */
    }

    th .gameCreateBtn {
        position: relative;
        top: 10px;
        left: -53px;
    }
}

.btn-green {
    background-color: #2e8b43;
    border: solid 2px #000;
}

.btn-center {
    display: block;
    margin: 0 auto;
    width: 282px;
}





th .gameCreateBtn {
    position: relative;
    top: 10px;
    right: 213px;
}



.hideGameBtnLaptop {
    width: 700px;
}

.viewBtn {
    position: relative;
    left: 570px;
    bottom: 100px;
}




/*Link-Container*/

.link-container {
    width: 450px; /* Set a default width for the link container */
}

.link-container {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
}

    .link-container::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: transparent;
        z-index: -1;
    }

    .link-container:hover::before {
        background: rgba(0, 0, 0, 0.1); /* Adjust as needed */
    }

@media (min-width: 320px) and (max-width: 768px) {
    .link-container {
        width: 250px; /* Full width for screens between 320px and 768px */
        max-width: 450px; /* Set a maximum width for larger screens */
        margin: 0 auto; /* Center the link container horizontally */
    }
}
/*Link-Container Ends*/





.first-section a:hover,
.second-section a:hover {
    z-index: 10;
}


.second-section:hover h3,
.first-section:hover h3 {
    transform: scale(1.2);
    transition: transform 0.3s ease;
    color: #2e8b43;
    text-decoration: underline;
}

.second-section:hover h3,
.first-section:hover h3 {
    padding: 0; /* Reset the padding for the <h3> */
}

.second-section a:hover,
.first-section a:hover {
    z-index: 10;
}





.dashboard,
.parent-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.second-section,
.first-section {
    background-color: #17254c;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 13px;
}


.second-section {
    height: 200px;
}

.first-section {
    height: 307px;
}




.hamburger-icon span.navbar-toggler-icon {
    background-color: white;
}

form .deactivate {
    width: 450px;
}

form .deactivateTeam {
    width: 270px;
}

form .btn-active-toggle {
    position: unset;
    width: 300px;
    margin: 0 -5px;
}


/*****Game Page css starts*********/
.gameDetails {
    font-size: 15px;
}


.gameDate {
    font-size: 16px;
}

.gamesHeading h1 {
    font-size: 18px; /* Display the heading on phones and tablets */
}


/*Game Page css Ends*/
@media (max-width: 991px) {
    .layout,
    .parent-section {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .dashboard {
        width: 100%;
        box-shadow: none;
    }

    .gameDetails {
        font-size: 13px;
    }


    .gameDate {
        font-size: 14px;
    }

    .gamesHeading h1 {
        display: block;
        font-size: 15px; /* Display the heading on phones and tablets */
    }

    .gameStyle .btn {
        position: relative;
        top: -0px;
        left: 230px;
        margin: 0 auto;
        font-size: 11px;
    }


    .icon {
        font-size: 40px;
        margin-top: 40px;
        margin-bottom: 10px;
        color: #fff;
        padding: 1px;
    }

    .icons {
        font-size: 40px;
        margin-top: 40px;
        margin-bottom: 10px;
        color: #fff;
        padding: 1px;
    }

    .second-section-container a,
    .first-section-container a {
        margin-bottom: 33px;
        margin-top: 33px;
    }


    .import-container {
        top: 480px;
        position: relative;
    }

    .link-container {
        height: 150px;
    }

    .hideGameBtnLaptop {
        width: 200px;
        margin: 0 auto;
    }

    .gameStyle {
        width: 100%;
        max-width: 450px;
        margin: 0px auto;
        margin-left: 20px;
    }



    .row #gameBtn {
        background-color: #17254c;
        border-radius: 5px;
        margin: 0 auto;
        width: 80px;
        padding: 26px;
        position: relative;
        top: 2px;
        right: 25px;
    }

    .dash {
        border-radius: 5px;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
    }

    .btn {
        width: 70px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 558px) {
    .gameStyle .btn {
        position: relative;
        top: -0px;
        left: 69px;
        margin: 0 auto;
        font-size: 9px;
    }

    .import-container {
        top: -280px;
        position: relative;
    }

    .btn {
        font-size: 10px;
    }

    .playerTable {
        width: 200px;
    }

    .form-group .crud {
        width: 200px;
    }

    .pageBtn {
        width: 60px !important;
    }


    form .deactivate {
        width: 180px;
        /* Adjust the value as needed */
    }

    form .deactivateMain {
        width: 120px;
    }

    form .deactivateTp {
        width: 260px;
    }

    .backMargin {
        margin-bottom: 40px;
    }

    form table .MakeInactive {
        width: 90px;
        position: relative;
        right: 10px;
    }

    form .viewPG {
        width: 120px;
    }

    form .deactivateTeam {
        width: 270px;
    }

    table tbody .GameCrud {
        display: flex;
        flex-direction: column;
    }

    .gameForm table th, .table td {
        padding: 0.25rem;
    }

    .gameForm table th {
        font-size: 0.75rem;
    }

    .table tr {
        width: 140px;
    }


    .table-responsive .gameTable {
        width: 50%;
        margin: 0 auto;
    }

    .table-responsive {
        overflow-x: hidden;
    }

    .createTeam {
        margin-left: -12rem;
    }



    .absolute-top {
        position: fixed;
        top: -11px;
        left: 0;
        z-index: 1000;
    }
}

@media only screen and (min-width: 557px) and (max-width: 998px) {
    .btn {
        font-size: 7px;
    }
}


@media only screen and (min-width: 765px) and (max-width: 1000px) {

    .row #gameBtn {
        background-color: #17254c;
        border-radius: 5px;
        margin: 0 auto;
        width: 250px;
        padding: 66px;
        position: relative;
        top: 20px;
        right: 25px;
        height: 70px;
    }

    .gameStyle .btn {
        position: relative;
        top: 6px;
        left: 166px;
        margin: 0 auto;
        font-size: 11px;
    }

    .dash .btn {
        margin-top: -20px;
    }

    .scoreKeepingNav,
    .phoneNav {
        display: block; /* hide the navigation bar */
    }
}



@media only screen and (min-width: 1000px) and (max-width: 1558px) {
    .gameStyle .btn {
        position: relative;
        top: -0px;
        left: 70px;
        margin: 0 auto;
        font-size: 11px;
    }

    .gameDetails {
        font-size: 14px;
    }




    .gameDate {
        font-size: 16px;
    }

    .gamesHeading h1 {
        display: block;
        font-size: 15px; /* Display the heading on phones and tablets */
    }


    .icon {
        font-size: 40px;
        margin-top: 80px;
        margin-bottom: 10px;
        color: #fff;
        padding: 1px;
    }

    .icons {
        font-size: 40px;
        margin-top: 110px;
        margin-bottom: 10px;
        color: #fff;
        padding: 1px;
    }
}




/********* Import Section Starts**********/

.import-container {
    border: dotted;
    background-color: white;
    margin: 50px auto;
    padding: 20px;
    max-width: 900px;
}

    .import-container img {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
    }

.import-guide {
    text-align: center;
    margin-bottom: 20px;
}

    .import-guide img {
        max-width: 100%;
        height: auto;
        border-radius: 5px;
    }

.import-section {
    text-align: center;
}

    .import-section .startGames.import {
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 5px;
    }

    .import-section .form-group {
        margin-bottom: 15px;
    }

    .import-section .custom-file-label.impTeams {
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 10px;
        cursor: pointer;
    }

    .import-section .feedback {
        margin-top: 15px;
    }

    .import-section .btnStyle {
        background-color: #007bff;
        color: #fff;
    }
/********* Import Section Ends**********/






/********Score Keeping Starts***************/

@media only screen and (min-width: 320px) and (max-width: 768px) {
    section .diamond-container .btn-skip-prompt {
        font-size: 10px;
        height: 26px;
        width: 90px;
    }

    #scoreKeepingMain #btnAddToVisitorTeam,
    #scoreKeepingMain #btnUndoLast {
        font-size: 10px;
        height: 26px;
        width: 70px;
    }
}


/********Score Keeping Ends***************/




/********Page Size Starts***************/
@media only screen and (min-width: 320px) and (max-width: 768px) {
    #pageSizeModal {
        width: 100%;
    }
}

/********Page Size Ends***************/


#team-related-content {
    display: none; /* Initially hide the team related content */
}

/******Phone Back Icon Starts********/

@media only screen and (min-width: 320px) and (max-width: 768px) {

    .phoneBack {
        background-color: #F7F7f7;
        border-radius: 10px 10px 0 0;
        top: 84px;
        height: 85px;
        padding-top: 35px;
        position: fixed;
        width: 103%;
        z-index: 100;
        margin-left: -10px;
    }

        .phoneBack a {
            display: flex;
            align-items: center;
            font-size: 10px;
            padding: 12px 0;
            text-decoration: none;
            color: #000;
        }

        .phoneBack i {
            font-size: 20px;
            margin-left: 20px;
            z-index: 500;
            color: #000;
        }

        .phoneBack a:hover {
            color: #e7995e;
        }
}

/* Media query to hide navigation bar on laptops */
@media only screen and (min-width: 769px) {

    .phoneBack {
        display: none;
    }

    .hideGameBtnLaptop {
        display: none;
    }

    .hidden-nav {
        display: none;
    }
}







/******Stats Details**********/

.statsHeader {
    position: relative;
    top: -11px;
}


.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.statsDetails {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.stats-item {
    display: inline-block;
    text-align: left;
    margin: 10px;
}

@media (max-width: 768px) {
    .parentStatHeading {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        align-items: flex-start;
    }

    .statsDetails {
        display: flex;
        flex-direction: column;
    }

    .stats-item {
        margin: 5px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .statsDetails {
        gap: 10px;
    }

    .stats-item {
        margin: 8px;
    }
}

/******Stats  Details End here************/






/**Stats AbbvMeaning Starts*/

.abbvMeaning {
    width: 80%;
    max-width: 600px;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

.center-abbvContent {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.specific-table {
    text-align: left;
    margin-bottom: 40px;
}

    .specific-table tr {
        padding-bottom: 60px;
    }

.statsHeading {
    font-weight: bold;
    font-size: 1.1em;
    gap: 19px;
}


/**Stats AbbvMeaning Ends*/



/* Welcome Login Page */
.welcomeContainer {
    margin: 0 auto;
    width: 90%;
    max-width: 900px;
    background-color: #17254c;
    position: relative;
    top: 50px;
    padding-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
}

.childWelcomeContainer {
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    position: relative;
    top: 40px;
    border-radius: 75px;
    padding: 20px;
    box-sizing: border-box;
    height: 600px;
    overflow: auto;
}

.logo {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
    margin-top: 100px;
}

.loginClass {
    text-align: center;
    margin-top: 60px;
    position: relative;
    top: 38px;
    margin: 0 auto 20px;
}

@media only screen and (max-width: 768px) {
    .welcomeContainer {
        width: 95%;
        position: relative;
        top: 120px;
    }

    .childWelcomeContainer {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        height: auto;
        overflow: visible;
    }

    .logo {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
        margin-top: 30px;
    }

    .loginClass {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    form .btn-active-toggle {
        width: 250px;
    }
}

@media only screen and (min-width: 992px) {
    .logo {
        min-width: 200px;
    }
}

/* Welocme Login Page Ends */


/***Score Keeper Styles Starts+******/


.gameTeamsPlayers {
    display: flex;
    gap: 20px;
    padding-top: 50px;
}

.scoreKeeperTeams {
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    .gameTeamsPlayers {
        flex-direction: column; /* Change to column layout for smaller screens */
        align-items: center; /* Center items vertically */
        gap: 10px; /* Adjust the gap between items */
    }
}





.reAlignGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 100px;
}

@media screen and (max-width: 768px) {
    .reAlignGrid {
        display: flex;
        flex-direction: column;
        margin-top: 20px; /* Adjust the margin-top as needed */
    }
}

/***Score Keeper Styles Ends+******/





/*User Roles Start*/
.userRolesHeading {
    margin-top: 30px;
    text-align: center;
}
/*User Roles Ends*/
.table.userRoles {
    margin-bottom: 30px; /* Add margin-bottom to create space between table and footer */
}






/* Footer Styling */
footer {
    background-color: #17254c;
    height: auto; /* Set height to auto to allow content to expand */
    max-height: 70px; /* Set a maximum height to limit expansion */
    font-weight: 700;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    color: #fff;
}
/******Footer Ends*************/


/* Center content in phone view */
@media (max-width: 767px) {
    .parent-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/*Home Index*/
/* Center content in tablet view */
@media (min-width: 768px) and (max-width: 991px) {
    .parent-section {
        display: flex;
        justify-content: center;
    }

    .col-md-6 {
        flex: 0 0 auto;
    }
}

/*Home Index Ends*/

/*Coach Starts*/

@media (min-width: 320px) and (max-width: 768px) {
    .coachName {
        display: flex;
    }

    .coachIcon {
        position: relative;
        top: 5px;
        left: 5px;
    }
}


/*Coach Ends*/

/*UserVM Starts*/

@media (min-width: 320px) and (max-width: 768px) {
    .userVmText {
        font-size: 14px;
    }
}

/*UserVM Ends*/
@media (min-width: 992px) {
    .gameBtn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .gameCreateBtn {
        margin-right: 20px; /* Adjust as needed */
    }
}

/*******Rating Starts*******/

.ratingHeader {
    position: relative;
    top: -15px;
}

.star {
    cursor: pointer;
    font-size: 20px;
}

    .star.gold {
        color: gold;
    }

/*******Rating Ends*******/


/*******Player Avatar Starts*******/
.playerAvatar {
    height: 200px;
    width: 200px;
    border: 2px solid #fff;
}

@media (min-width: 320px) and (max-width: 768px) {
    .playerAvatar {
        height: 100px;
        width: 100px;
    }
}
/*******Player Avatar Ends*******/


/************Score Keeping Nav Starts*************/
.statsLogo {
    display: none;
}

.img-container img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000; /* Ensure it's above other content */
}

.img-container img {
    width: auto;
    height: 900px;
    max-width: 100%;
}

/************Score Keeping Nav Ends************/



/*User Gear Icon Starts*/

.helloAdmin {
    position: relative;
    bottom: -50px;
}

.lgnBtn {
    position: relative;
    top: -10px;
}

/*User Gear Icon Ends*/

/************StatisticS Edit Starts *************/
.centerRating {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .centerRating .control-label {
        font-size: 30px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .centerRating .star {
        font-size: 40px;
        cursor: pointer;
    }

        .centerRating .star:hover,
        .centerRating .star.active {
            color: gold;
        }

.centerRating {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

    .centerRating .form-group {
        margin-top: 20px;
    }

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .centerRating .control-label {
        font-size: 20px;
    }

    .centerRating .star {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .centerRating .control-label {
        font-size: 18px;
    }

    .centerRating .star {
        font-size: 24px;
    }
}

/**StatisticS Edit Ends *********************/





/*****************Team Comparision Starts***************************/

.team-stats {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.percentage {
    font-size: 18px;
    font-weight: bold;
    color: #17254c;
}

    .percentage span {
        color: #28a745;
    }

/*****************Team Comparision Ends***************************/


/*****************Modal Starts************************/

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .modal-content {
        width: 90%; /* Adjust the width for tablet views */
        max-width: 400px; /* Adjust the maximum width for tablet views */
    }
}

@media (max-width: 576px) {
    .modal-content {
        width: 100%; /* Full width for phone views */
        max-width: none; /* No maximum width for phone views */
        margin: 5% auto; /* Adjust margin for better centering */
    }

    .close {
        font-size: 24px; /* Adjust close button size for phone views */
    }
}
/*****************Modal Enda************************/

.alignPlayers {
    display: flex;
    justify-content: space-between; /* Or any other desired alignment */
}

/* Media query for tablets */
@media only screen and (max-width: 768px) {
    .alignPlayers {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }
}

/* Media query for phones */
@media only screen and (max-width: 480px) {
    .alignPlayers {
        /* Adjust styles for smaller screens if needed */
    }
}

.percentage {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Adjust color as needed */
}

.flex-container {
    display: flex;
    align-items: center; /* Align items vertically in the center */
}

    /* Optional: Adjust spacing between the icon and text */
    .flex-container .arrow {
        margin-left: 5px; /* Adjust as needed */
    }

.triangle{
    color: darkred;
    margin-top: -40px;
}