:root {
    --other-position-color-2: #00EFFF;
    --other-position-color-1: #22FF00;
    --other-position-color-0: #2D2D2D;
    --ability-color-1: #FF0000;
    --ability-color-2: #FF9A00;
    --ability-color-3: #FFE600;
    --ability-color-4: #22FF00;
    --ability-color-5: #00EFFF;
    --secondary-title-color: #8a8a8a;
}

@font-face {
    font-family: 'eFootball22-stencil-card';
    font-style: normal;
    font-weight: 100;
    src: url('/fonts/eFootballStencil-Regular.woff');
}

@font-face {
    font-family: 'eFootball22-card';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/eFootballSans-Regular.woff');
}

@font-face {
    font-family: 'Pes21-card';
    font-style: normal;
    font-weight: 400;
    src: url('/fonts/pes21-card.woff');
}

@font-face {
    font-family: 'Atlanta-regular';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/BRATLRS0.woff');
}

@font-face {
    font-family: 'Atlanta-bold';
    font-style: normal;
    font-weight: 300;
    src: url('/fonts/BRATLBS0.woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4EsA.woff2) format('woff2');
}

/**********************************************************
|
| Fonts
|
**********************************************************/
.efootball22-stencil-font{
    font-family: eFootball22-stencil-card;
}

.efootball22-card{
    font-family: eFootball22-card;
}

.pes21-font{
    font-family: Pes21-card;
}

.main-font23-bold{
    /* font-family: Roboto; */
     font-family: Atlanta-bold;
 }

.main-font23{
   /* font-family: Roboto; */
    font-family: Atlanta-regular;
}

.fnt-12{
    font-size: 12px;
}

.fnt-14{
    font-size: 14px;
}

.fnt-16{
    font-size: 16px;
}

.montserrat-normal {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400; /* Normal weight */
    font-style: normal;
  }
  
  .montserrat-bold {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700; /* Bold weight */
    font-style: normal;
  }

/**********************************************************
|
| Text
|
**********************************************************/
.team-card-main .ellipsis{
    white-space: nowrap;
    overflow: hidden;
    width: 130px;
    text-overflow: ellipsis;
}

/**********************************************************
|
| General
|
**********************************************************/

body a:hover {
    text-decoration: none;
}

.empty-div {
    height: 80vh;
    line-height: 80vh;
    text-align: center;
    font-size: 2rem;
    color: #5D5D5D;
}

.attribute-group {
    display: table;
    width: 100%;
    margin-bottom: 0;
}

.attribute-group>.control-label {
    margin-bottom: 0;
    display: table-cell;
    vertical-align: middle;
}

.vertical-div {
    width: 100%;
}

.vertical-value {
    margin-bottom: 0;
    vertical-align: middle;
}

.small-card {
    padding: 20px;
    margin: auto;
}

.small-card-group {
    display: table;
    width: 100%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0px 20px;
}

.small-card-group>.control-label {
    margin-bottom: 0;
    display: table-cell;
    vertical-align: middle;
}

.small-card-group>.check-right {
    right: 0;
    margin-right: 20px;
    display: table-cell;
}

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

@media (max-width: 768px) {
    .small-card {
        width: 300px;
    }
}

@media (min-width: 769px) {
    .small-card {
        width: 600px;
    }
}

@media (min-width: 1200px) {
    .small-card {
        width: 800px;
    }
}

/**********************************************************
|
| Home
|
**********************************************************/

.home-container{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  /* three js */
  .home-container canvas{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: block;
  }
  
  .home-container htmlContent{
    position: relative;
    max-width: 1800px;
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns:  repeat(10, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  
  .home-container .logo {
    grid-row: 1;
    grid-column: 2 / 8; 
    padding: 20px 100px 20px 100px;
    font-size: 2.25rem;
    line-height: 1.5;
    }
  
  .home-container #logo-home{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
    }
  
    @keyframes fadein {
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  @-moz-keyframes fadein { /* Firefox */
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  @-webkit-keyframes fadein { /* Safari and Chrome */
      from {
          opacity:0;
      }
      to {
          opacity:1;
      }
  }
  @-o-keyframes fadein { /* Opera */
      from {
          opacity:0;
      }
      to {
          opacity: 1;
      }
  }
  
  .home-container .game-artwork-nav{
    object-fit: cover;
    width: 100%;
    max-height: 100%;
    }
  
  .home-container .pes21 {
      /*grid-row: 12/16;*/
      grid-row: 8/12;
      grid-column: 2/4;
      background-color: #ffffff;
      font-size: 2.25rem;
      line-height: 1.5;
      margin-bottom: 20px;
      transition:  transform 300ms ease;
    }
  
    .home-container .pes21-mobile {
        /*grid-row: 12/16;*/
        grid-row: 1/5;
        grid-column: 3/5;
        background-color: #ffffff;
        font-size: 2.25rem;
        line-height: 1.5;
        margin-bottom: 20px;
        transition:  transform 300ms ease;
      }
  
      .home-container .efootball22 {
        /*grid-row: 12/16;*/
        grid-row: 1/5;
        grid-column: 5/7;
        background-color: #ffffff;
        font-size: 2.25rem;
        line-height: 1.5;
        margin-bottom: 20px;
        transition:  transform 300ms ease;
      }
  
  .home-container .pes21:hover{
      transform: scale(1.05);
      /*left: 0%;*/
    }
  
  .home-container .pes21-mobile:hover{
      transform: scale(1.05);
      /*left: 0%;*/
  }
  
  .home-container .efootball22:hover{
      transform: scale(1.05);
      /*left: 0%;*/
  }
  
  @media (max-width: 900px) {
    .home-container htmlContent{
      position: relative;
      max-width: 1800px;
      display: grid;
      align-items: center;
      justify-content: center;
      /*grid-template-columns: repeat(12, 1fr);*/

      grid-template-columns:  repeat(10, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }

    .home-container .logo {
    grid-row: 3 / 5;
    grid-column: 1 / 11; 
   /* grid-column: 2 / 12;*/
    padding: 0px;
    padding: 1rem;
    font-size: 2.25rem;
    line-height: 1.5;
    /*margin-bottom: 20px;*/
  }

  .home-container .pes21 {
    /*grid-row: 14/18;*/
    grid-row: 8/12;
    grid-column: 3/9;
    margin-bottom: 20px;
  }

  .home-container .pes21-mobile {
    /*grid-row: 18/22;*/
    grid-row: 5/8;
    grid-column: 4/8;
    margin-bottom: 20px;
  }

  .home-container .efootball22 {
   /* grid-row: 22/26; */
    grid-row: 1/4;
    grid-column: 4/8;
    margin-bottom: 20px;
  }
}
  
/**********************************************************
|
| Navbar
|
**********************************************************/

@media (max-width: 500px) {
    #navbar-app #peshub-logo{
        /*width:200px;*/
    }
}

.navbar-app {
    z-index: 98;
}

.navbar-brand {
    width: 60px;
    padding: 0px;
}

.navbar-app .nav-link {
    /*font-size: 1.2em;*/
    font-weight: bold;
}

.navbar-app input[type=text] {
    /*font-size: 1.2em;*/
    font-weight: bold;
    line-height: 1.6;
    /* width: 500px; */
    border-radius: 40px;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media (max-width: 1200px) {
    .navbar-app input[type=text] {
        width: 100%;
        /* width: calc(100% - 500px); */
    }
}

.navbar-app input[type=text]::placeholder {
    /*font-size: 1.0em;*/
    font-weight: bold;
}

.navbar-app select {
    border: none;
    cursor: pointer;
}

.navbar-app .btn {
    line-height: 1.6;
    font-size: 0.8em;
    border-radius: 20px;
    margin: 10px;
}

.btn-dark-light-mode {
    position: relative;
    width: 24px;
    height: 24px;
}

.dark-light-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 22px;
    content: "";
    background: 50%/100% 100% no-repeat;
}

.dropdown:hover .dropdown-menu {display: block;}

.dropdown:hover > .nav-link{
    /*color:red;*/
    color: #23CAD9;
}

.dropdown > .nav-link{
    transition: all .5s ease;
}

.dropdown-menu{
    top: 30px;
}

/**********************************************************
|
| Side Navbar
|
**********************************************************/

body{position:relative}
.overlay,.sideMenu{position:fixed;bottom:0}
.overlay{top:0;left:-100%;right:100%;margin:auto;background-color:rgba(0,0,0,.5);z-index:998;transition:all ease 0.2s}
.overlay.open{left:0;right:0}
.sidebarNavigation{margin-bottom:0;z-index:999;justify-content:flex-start;}
.sidebarNavigation .leftNavbarToggler{margin-right:10px;order:-1}
.sideMenu{left:-100%;top:52px;transition:all ease 0.5s;overflow:hidden;width:100%;z-index:999;max-width:80%;margin-bottom:0;padding:1rem; background-color: black; height: 100vh;}
.sideMenu.open{left:0;display:block;overflow-y:auto}
 .sideMenu ul{margin:0;padding:0 15px;}

 
 .sideMenu .dropdown{
    flex-direction: column;
    width: 100%;
    background-color: black;
}

.sideMenu .dropdown-menu{
     display: block;
     background-color: black;
 }

 .sideMenu .nav-link{
     font-weight: 900;
     font-size: 18px;
 }

/**********************************************************
|
|  Nav Bar Search Input
|
**********************************************************/

*, *::before, *::after {
    /* box-sizing: border-box;*/
   }
   
   .nav-search {
     /*background: white;*/
     width: 40%;
    /* padding: 3em;*/
     box-shadow: 0 0 3em rgba(0,0,0,.15);
     position: relative;
     z-index: 2;
   }

   .nav-search .fa-search{
       color: black;
   }
   
   .nav-search .search {
     --size: 45px;
     border: 2px solid white;
     background-color: black;
     display: flex;
     border-radius: 100px;
     overflow: hidden;
     font-size: 1em;
     position: relative;
     width: var(--size);
     height: var(--size);
     /* margin-left: auto;*/
    /* transition: width 450ms cubic-bezier(0.18, 0.89, 0.32, 1.28);*/
     transition: width 450ms cubic-bezier(0.1, 0.1, 0.1, 0.9);
     padding: 3px;
   }
   
   .nav-search .search__input {
     border: 0;
     padding: .25em 1.5em;
     flex-grow: 1;
     outline: 0;
    /* z-index: 2;*/
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     width: 100%;
     background: transparent;
     opacity: 0;
     cursor: pointer;
     color: white;
   }
   
   .nav-search .search__submit {
     font-size: 1rem;
     margin-left: auto;
     background: 0;
     border: 0;
     cursor: pointer;
     border-radius: 50%;
     transition: background 200ms ease-out;
     width: calc(var(--size) - 10px);
     height: calc(var(--size) - 10px);
     color: white;
   }
   
   .nav-search .search:focus-within {
     /* box-shadow: 0 0 5px white;*/
     width: 100%;
   }
     
   .nav-search .search__input {
       opacity: 1;
       z-index: initial;
       cursor: initial;
       width: calc(100% - var(--size));
   }
     
   .nav-search .search__submit {
       background: white;
       color: white;
       box-shadow: 0 0 10px rgba(0,0,0,.15);
           transition: transform 500ms ease-out;

        &:hover, 
       &:focus {
        outline: 0;
        /*transform: rotate(1turn);*/
        box-shadow: 0 0 10px rgba(0,0,0,.65);
       }
   }

   @media (max-width: 1000px) {
       .nav-search .search:focus-within {
          width: 250%; 
       }
   }

   @media (max-width: 769px) {
       .nav-search {
           left: 70px;
           /*width: 70%;*/
           width: 50px;
           position: absolute;
       }

       .nav-search .search:focus-within {
           width: 280px;
       }
   }

/**********************************************************
|
| Live Update
|
**********************************************************/

.live-update-container{
    display: flex;
    flex-direction: column;
    gap: 30px 0px;
    padding-top: 25px;;
}

.player-condition-teams-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
   /* height: 500px; */
}

.player-condition-teams-container .skewed-pitch{
   background-image: url('/pes21-mobile/images/other/skewed-pitch.png');
   background-repeat: no-repeat;
   background-position: center center;
   position: relative;
}

.player-condition-teams-container .skewed-pitch .position-image{
    position: absolute;
    width: 100px;
    height: 100px;
}

/*
.player-condition-teams-container .team-position-image{
    position: absolute;
    height: 90px;
    width: 90px;
}*/

.player-condition-teams-container .team-position-image .player-condition{
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 16px;
    font-weight: 900;
}

.player-condition-teams-container .team-position-image .player-name{
    bottom: -20px;
    font-size: 10px;
}

.player-condition-teams-container .team-pitch-image{
    filter: brightness(20%);
}

@media (max-width: 768px) {
    .player-condition-teams-container{
        flex-direction: column;
    }
}

/**********************************************************
|
| Card
|
**********************************************************/

.card-app {
  /*  margin: 10px 0px; */
    border: none;
}

.card-app .card-header {
    padding: 0px;
    border: none;
   /* background: linear-gradient(135deg, rgba(93,37,201, 1) 20%, rgba(20, 20, 20, 1) 25%, rgba(20, 20, 20, 1) 100%);*/
   /* background: linear-gradient(135deg, rgba(93,37,201, 1) 20%, rgba(20, 20, 20, 1) 25%, rgba(20, 20, 20, 1) 100%); */
  /* background: linear-gradient(135deg, rgba(93,37,201,1) 0%, rgba(93,37,201,1) 15%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(93,37,201,1) 85%, rgba(93,37,201,1) 100%); */
   transition:  transform 500ms ease;
}

.card-header:hover{
    /*transform: scaleY(1.1);*/
}

.card-header:hover  > .card-header-text{
    transform: scale(1.1);
    color: #23CAD9;
    /*left: 0%;*/
}

.card-header-text{
    position: relative;
    /*left: 0%;*/
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all .5s ease;
    max-width: 450px;
    border-radius: 25px;
    background: linear-gradient(270deg, rgba(255,0,0,1) 0%, rgba(6,0,221,1) 80%);
}

.card-app .card-body {
    border: none;
    padding: 0;
}

@media (max-width: 968px) {
    .card-app .card-header {
        padding: 0px;
        border: none;
        /* background: linear-gradient(135deg, rgba(93,37,201, 1) 30%, rgba(20, 20, 20, 1) 60%, rgb(20, 20, 20)0%); */
    }
}

/**********************************************************
|
| Admin
|
**********************************************************/

.admin-card {
    padding: 20px;
    margin: 5px;
    border: 1px solid black;
}

@media (min-width: 1600px) {
    .admin-col1 {
        flex: 0 0 33%;
        max-width: 33%;
    }
    .admin-col2 {
        flex: 0 0 67%;
        max-width: 67%;
    }
}

@media (max-width: 1600px) {
    .admin-col1 {
        width: 100%;
    }
    .admin-col2 {
        width: 100%;
    }
}

/**********************************************************
|
| Admin layout
|
**********************************************************/

.sidebar {
    height: 100%;
    /* Full-height: remove this if you want "auto" height */
    width: 250px;
    /* Set the width of the sidebar */
    position: fixed;
    /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1;
    /* Stay on top */
    top: 0;
    /* Stay at the top */
    left: 0;
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 20px;
}

.sidebar .nav-link {
    display: block;
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    /* font-size: 25px; */
    color: #818181;
}

.sidebar .nav-link:hover {
    color: #f1f1f1;
}

.sidebar-expand-md .navbar-toggler {
    display: none;
}

.sidebar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.app-admin main {
    margin-left: 250px;
    /* Same as the width of the sidebar */
    width: calc(100% - 250px);
    height: auto;
}

.admin-title {
    width: 100%;
    text-align: center;
    background-color: #38c172;
}

@media (max-width: 1018px) {
    .sidebar {
        width: calc(100% - 768px);
    }
    .app-admin main {
        margin-left: calc(100% - 768px);
    }
}

@media (max-width: 968px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        display: block;
        padding: 10px;
    }
    .sidebar .nav-link {
        display: block;
    }
    .sidebar-expand-md .navbar-toggler {
        display: inline;
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.25rem 0.75rem;
        font-size: 1.125rem;
        line-height: 1;
        background-color: transparent;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }
    .sidebar-expand-md .sidebar-item {
        display: block;
    }
    .app-admin main {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 968px) and (min-width: 769px) {
    .app-admin .container {
        width: 768px;
    }
}

@media (min-width: 969px) {
    .sidebar-expand-md .sidebar-collapse {
        display: block;
    }
}

/**********************************************************
|
| Icons
|
**********************************************************/

.down-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: 50%/100% 100% no-repeat;
}

.navbar-light .down-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='rgba(0, 0, 0, 0.5)' d='m2 2l2 2l2 -2z'/></svg>");
}

.navbar-dark .down-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='rgba(255, 255, 255, 0.5)' d='m2 2l2 2l2 -2z'/></svg>");
}

a>.down-icon {
    outline: none;
}

.down-icon-light {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='rgba(255, 255, 255, 0.8)' d='m2 2l2 2l2 -2z'/></svg>");
}

.down-icon-dark {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='rgba(0, 0, 0, 0.8)' d='m2 2l2 2l2 -2z'/></svg>");
}

.level-excellent-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
}

.level-good-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
}

/* .level-normal-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
} */

.level-regular-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
}

.level-bad-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
}

/**********************************************************
|
| Leagues - Main
|
**********************************************************/

.leagues-main-container .cards-row-container {
    flex-wrap: wrap;
    align-content: flex-start!important;
    height: calc(100vh - 120px);
}

.leagues-main-container .highlights ._scorebatEmbeddedPlayer_ {
    width: 100%;
    height: calc(100vh - 160px);
}

/**********************************************************
|
| Show League
|
**********************************************************/

.leagues-container .standings-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.leagues-container .standings-table {
    flex-grow: 1;
    margin: 10px 25px 50px 25px;
}

.leagues-container .standings {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-direction: column;
    margin: 50px 10px 10px 10px;
font-family: eFootball22-card;
}

.leagues-container .top-scorers-and-fixtures-container {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    margin: 10px 10px 10px 10px;
}

.leagues-container .fixtures {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-direction: column;
    margin: 10px 10px 10px 10px;
    padding: 20px;
}

.leagues-container .top-scorers {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-direction: column;
    margin: 10px 10px 10px 10px;
    padding: 20px;
}

.leagues-container .highlights {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-direction: column;
    margin: 50px 10px 10px 10px;
font-family: eFootball22-card;
}

.leagues-container .league-table td{
     border-bottom: 1px solid #3F3F3F;
     padding-top: 10px;
}

.leagues-container .league-table tr{background-color: #000000;}
.leagues-container .league-table th, .leagues-container tr:nth-child(even){background-color: #000000;}

.leagues-container .league-table tr:hover {
    background-color: #FFFFFF;
    color: #000000;
}

.leagues-container hr {
border: 0;
clear:both;
display:block;
width: 96%;               
background-color:#000000;
height: 1px;
}

.league-table .form-column{
    display: flex;
    flex-direction: row;
    column-gap: 5px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.league-table span{
    display: flex; 
    justify-content: center;
    float: left;
    width:20px;
    font-weight:900;
    align-items: center;
    border-radius: 1px;
    color: black;
}

.fixtures .home-team{
    text-align: right;
}

.fixtures .away-team{
    text-align: left;
}

.fixtures .fixture-score{
    background-color:#8CD583;
    height: 25px;
    font-weight: bold;
}

@media (max-width: 700px){
    .league-table .league-table-column{
        display: none;
    }
}

/**********************************************************
|
| Responsive - Show players efootball 23
|
**********************************************************/

.player-header-body-container23{
    height: 292px;
    max-width: 1500px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
   /* padding: 0px 100px 0px 100px; */
    gap: 45px;
    white-space: nowrap;
}

.player-card-panel{
    background-color: rgb(0, 0, 0, 0.5);
    z-index: 1;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0px;
}

.player-image-container-parent-23{
    flex-basis: 162px;
    transform: scale(1.2) !important;
}

.player-card-right-info{
    width: 172px;
    margin-left: 1.5rem;
}

@media (max-width: 1280px){
    .player-header-body-container23{
       /* height: 284px;*/
        justify-content: center;
    }
}

@media (max-width: 992px) {
    .player-header-body-container23{
      /*  padding-bottom: 20px; */
       /*  padding: 46px; */
    }
}

@media(max-width: 768px)
{
    
}

@media (max-width: 576px) {
    .player-header-body-container23{
        height: 284px;
        gap: 30px;
    }

    .player-card-panel{
        padding-top: 0.25rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .player-image-container-parent-23{
        transform: scale(1.1) !important;
    }
    
    .player-card-right-info{
        margin-left: 0.75rem;
    }
}

/**********************************************************
|
| Responsive - Show players efootball 22
|
**********************************************************/

.player-image-container-parent-22{
    flex-basis: 162px;
}

    .player-image-container-parent-22{
        transform: scale(1.2) !important;
    }

    .level-slider-container{
        position: relative;
    }
    .progression-system-container {
        position: relative;
    }

     .progression-slider-container {
       /* position: relative;
        width: 100%;
        height: 40px;*/
        margin: 0px 10px 6px 10px;
        padding: 1px 5px 5px 5px;
        border-radius: 5px;
        background-color: #121212;
        width: 250px; 
    } 
    
    .progression-indicator {
        position: absolute;
        bottom: 5px;
        left: 10px;
        width: 100px;
        height: 40px;
        line-height: 2.5;
        font-weight: 900;
        font-size: 18px;
    }

    .progression-body {
        position: relative;
        /* width: calc(100vw - 40px);
        height: 80px; */
    }

    .btn-progression{
        min-width: 80px;
        max-width: 80px;
	background: linear-gradient(1deg, rgb(2, 0, 36) 0%, rgb(9, 9, 121) 35%, rgb(0 8 255) 100%);
    	font-family: eFootball22-card;
	font-size: 12px;
    }

.ui-slider-horizontal {
    height: 8px;
    margin: 0px 0px 0px 0px;
}

    /* test sliders */
    .slider .ui-slider-handle {
    outline: 0;
    background: #3400ff !important;
    border-radius: 50%;
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-align: center !important;
        line-height: 1.6em !important;
    font-family: eFootball22-card;
    border: 1px solid black !important;
    }
    #sliders .slider{
    outline: 0;
    background: rgb(52, 0, 255) !important;
    border-radius: 6px;
    }

    .slider .ui-widget-header{
        background: rgb(0, 0, 0);
    }

    .ui-widget.ui-widget-content {
    border: 1px solid #363636 !important;
}

    #sliders {
        margin: 0px 20px 20px 20px;
    }
    .sliders li {
        margin-bottom: 10px;
    }
    .sliders div {
        margin-bottom: 5px;
    }
    .ui-slider-handle {
     /*   width: 3em;
        height: 1.6em;
        top: 50%;
        text-align: center;
        line-height: 1.6em; */
        
    }
    /* test sliders */

    @media(max-width: 768px)
    {

        .level-slider-container {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 100%;
            background-color: #000000;
            height: 90px;
            z-index: 100;
        }

        .progression-system-container {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        background-color: #000000;
        z-index: 100;
    }

    .progression-slider-container {
       /* position: relative;
        width: 100%;
        height: 40px;*/
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        border-radius: 5px;
        background-color: #000000;
        width: 100%; 
    } 

    .ui-slider-horizontal {
        height: 16px;
    }

    .slider .ui-slider-handle {
    outline: 0;
    background: #3400ff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 1.6em;
    border: 1px solid black !important;
    }
    }


/**********************************************************
|
| Responsive - Show players
|
**********************************************************/

.player-buttons-panel .btn-primary:not(:disabled):not(.disabled).active {
    background-color: rgb(100, 62, 253);
    color: #ffffff;
    border-color: #a3a3a3;
}

.player-header-container{
    border-radius: 4px;
   /* overflow: hidden; */
}

.player-header-container .background-team-logo{
    position: absolute;
    top: calc(50% - 250px);
    left: calc(50% - 250px);
}

.player-header-container .team-logo{
    position: relative;
    overflow: hidden;
    width:500px;
    height: 500px;
}

.player-header-container .team-logo img{
    position: absolute;
    width:100%;
    opacity: 0.1;
}

.player-header-body-container{
    max-width: 1500px;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    padding: 0px 100px 0px 100px;
    gap: 45px;
    white-space: nowrap;
}

.player-body-container {
    max-width: 1500px;
    margin: 30px auto;
    align-items: start;
    justify-content: center;
    line-height: 1.4;
}

.player-category-header{
   /* color: var(--secondary-title-color); */
   color: white;
    font-size: 0.95rem;
    font-weight: 900;
    text-transform: uppercase;
   /* margin-bottom: 15px; */
   /* padding-left: 10px; */
   /* background: linear-gradient(135deg, rgba(93,37,201, 1) 10%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);*/
    font-family: eFootball22-card;
}

.ability-table th {
    font-weight: 300;
}

.ability-table td {
    font-size: 17px;
    font-weight: 900;
    font-family: efootball22-card;
}

.player-left-container {
    margin: 0px 0px 0px 0px;
}

.player-right-container {
    /*width: calc(100% - 200px);*/
    width: 1000px;
   /* gap: 40px; */
   row-gap: 30px;
    z-index: 1;
}

.player-image-container-parent{
    flex-basis: 200px;
    margin: 0 auto;
}

.player-image-container {
    width: 182px;
    height: 256px;
    margin: 10px;
    filter: drop-shadow(9px 10px 5px black);
}

.player-general-container {
    /*width: calc(100% - 600px);
    max-width: 250px;
    padding: 10px;*/
    color: white;
    flex-basis: 200px;
    z-index: 1;
}

.player-general-container th{
    font-weight: 300;
}

.player-radar-chart-container {
   /* width: 226px;
    padding: 10px;*/
    background:rgb(31, 31, 31);
    border-radius: 50%;
    border: 1px solid rgb(90, 90, 90);
   /* filter: drop-shadow(9px 10px 5px black); */
    flex-basis: 200px;
}

.player-condition-history-container {
   /* width: 300px;
    padding: 10px; */
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
  /*  border: 1px solid rgb(90, 90, 90); */
  /*  filter: drop-shadow(9px 10px 5px black); */
    flex-basis: 200px;
    z-index: 1;
}

.player-buttons-panel{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    font-family: eFootball22-card;
}

.player-overall-pitch-container {
    width: 300px;
   /* padding: 80px 10px;*/
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
}

.player-stats-container {
    width: 33%;
    min-width: 200px;
    max-width: 280px;
    padding: 10px;
}

.player-colored-container-background{
    border-radius: 10px;
    background-color: rgb(18, 18, 18);
  /*  border: solid 1px rgb(65, 65, 65); */
}

.player-abiliies2 {
    padding-top: 52px;
}

.player-inspire-contract-experience-container{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.player-container{
    overflow-x: hidden;
    max-width: 1100px;
}

.player-container .other-versions-container{
    max-width: 1275px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px auto;
    align-items: start;
}

.player-container .other-versions{
    width: 100%;
}

.player-container .table_data_container {
    /* overflow-y: scroll; */
    height: auto;
    overflow: auto;
    max-width: 1500px;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .player-header-body-container{
        padding-bottom: 20px;
    }
    .player-header-body-container22{
        padding: 46px;
    }
    .player-body-container {
       /* flex-direction: column; */
       /* align-items: center; */
    }
    .player-left-container {
        flex-direction: column;
    }
    .player-right-container {
        width: 100%;
    }
    .player-image-container {
       /* margin: auto; */
        /*width: 50%;*/
        order: 1;
    }
    .player-general-container {
       /* max-width: 992px;
        width: 100%;*/
       /* min-width: 300px; */
        order: 2;
    }
    .player-radar-chart-container {
       /* width: 50%; */
        order: 4;
        z-index: 1;
    }
    .player-overall-pitch-container {
       /* width: 50%; */
    }
    .player-condition-history-container {
        /* width: 50%; */
        order: 3;
    }
    .player-condition-history-container .player-condition-history-parent {
        /*padding-top: 80px;*/
    }
}

@media (max-width: 768px) {
    .player-header-container .background-team-logo{
        top: calc(50% - 250px);
    }

    .player-right-container {
        width: 100%;
        gap: 10px 10px;
    }

    .player-stats-container {
        max-width: 768px;
        min-width: 100px;
       /* width: 100%; */
        padding-top: 0px;
        padding-bottom: 0px;
        padding: 0px;
        flex-grow: 1;
    }

    .player-overall-pitch-container {
        margin-top: 30px;
    }

    .player-radar-chart-container{
        margin-top: 30px;
    }

    .player-condition-history-container{
        margin-top: 30px;
    }
}

@media (max-width: 576px) {
    .player-header-body-container{
        gap: 30px;
    }
    .player-image-container {
        /*margin: auto;*/
    }
    .player-general-container {
        order: 2;
    }
    .ability-field th{
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 140px;
    }
    .player-radar-chart-container {
       /* width: 100%; */
        order: 3;
    }
    .player-left-container {
        flex-direction: column;
    }
    .player-overall-pitch-container {
        width: 100%;
    }
    .player-condition-history-container {
       /* width: 100%; */
        order: 4;
    }
    .player-container .other-versions-container{
        width: 100%;
        margin: 30px auto;
    }

    .player-container .table_data_container {
        /* overflow-y: scroll; */
        /*height: auto;
        overflow: auto;
        /*width: 350px;*/
        margin-bottom: 20px;
    }
}

/**********************************************************
|
| Responsive - Show players 2 - Compare 2 players
|
**********************************************************/

.compare-2-players-container {
    max-width: 1200px;
}

.compare-2-players-container .compare-general {
    width: 30%;
    height: 100%;
    margin: 10px 20px 10px 20px;
}

.compare-2-players-container .players-abilities-container {
    width: 40%;
    margin: 10px 0px 10px 0px;
}

.compare-2-players-container .player-image-container {
    margin: auto;
}

.compare-2-players-container .ability-table {  
    width: 100%;
}

.compare-2-players-container th, .compare-2-players-container td {
    text-align: center;
}

.compare-2-players-container .level-tab {
    width: 100%;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
}

.compare-2-players-container .lbl-block {
    text-align: center;
}

.compare-2-players-container .player-radar-chart-container {
    margin: auto;
}

.compare-2-players-container .player-card-overall-field {
    border: 1px solid black;
    width: 190px;
    height: 235px;
    position: relative;
    top: 0;
    left: 0;
    max-width: 300px;
    margin: 0 auto;
    padding: 0;
    background-color: black;
}

@media (max-width: 1200px) {
    .compare-2-players-container .compare-general {
        margin-left: 8px;
        margin-right: 8px;
    }    
}

@media (max-width: 992px) {
    .compare-2-players-container .compare-general {
        margin-left: 5px;
        margin-right: 5px;
    }

    .compare-2-players-container .ability-table td {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .compare-2-players-container {
        flex-wrap: wrap;
    }

    .compare-2-players-container .compare-general {
        display: contents;
    }

    .compare-2-players-container .player1-main-container {
        order: 1;
        width: 50%;
    }

    .compare-2-players-container .player2-main-container {
        order: 2;
        width: 50%;
    }
    
    .compare-2-players-container .players-abilities-container {
        order: 3;
        width: 100%;
    }

    .compare-2-players-container .player1-skills-container {
        order: 4;
        width: 50%;
    }

    .compare-2-players-container .player2-skills-container {
        order: 5;
        width: 50%;
    }

    .compare-2-players-container .player-image-team-logo {
        display: none;
    }
}

/**********************************************************
|
| Responsive Create/edit players
|
**********************************************************/

.player-edit-general-container {
    width: 40%;
    padding: 10px;
    order: 1;
}

.player-edit-positions-container {
    width: 40%;
    padding: 10px;
    order: 4;
}

/* .player-edit-others-container {
  width: 600px;
  padding: 10px;
  order: 3;
} */

.player-edit-abilities-container {
    width: 40%;
    padding: 10px;
    order: 2;
}

.player-edit-overall-container {
    width: 40%;
    padding: 10px;
    order: 5;
}

.player-edit-com-skills-container {
    width: 20%;
    padding: 10px;
    order: 6;
}

.player-edit-skills-container {
    width: 20%;
    padding: 10px;
    order: 3;
}

@media (max-width: 1450px) {
    .player-edit-general-container {
        width: 50%;
        order: 1;
    }
    .player-edit-positions-container {
        width: 20%;
        order: 3;
    }
    .player-edit-abilities-container {
        width: 50%;
        order: 2;
    }
    .player-edit-overall-container {
        width: 40%;
        order: 4;
    }
    .player-edit-com-skills-container {
        width: 20%;
        order: 6;
    }
    .player-edit-skills-container {
        width: 20%;
        order: 5;
    }
}

@media (max-width: 900px) {
    .player-edit-general-container {
        width: 100%;
        order: 1;
    }
    .player-edit-positions-container {
        width: 100%;
        order: 3;
    }
    .player-edit-abilities-container {
        width: 100%;
        order: 2;
    }
    .player-edit-overall-container {
        width: 100%;
        order: 4;
    }
    .player-edit-com-skills-container {
        width: 100%;
        order: 6;
    }
    .player-edit-skills-container {
        width: 100%;
        order: 5;
    }
}

/**********************************************************
|
| Responsive - Show coaches
|
**********************************************************/

.coach-container{
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    font-family: eFootball22-card;
}

.coach-header-container {
    /* width: 100%; */
    background: linear-gradient(135deg, rgba(93,37,201, 1) 10%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
font-family: eFootball22-card;
}

.coach-name-title{
    max-width: 350px;
    position: relative;
    left: 10%;
    text-align: left;
    text-shadow: 2px 3px #000000;
    font-size: 29px;
}

.coach-teamname-title{
    max-width: 350px;
    position: relative;
    left: 10%;
    text-align: left;
    text-shadow: 2px 3px #000000;
    font-size: 15px;
}

.coach-body-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
}

.coach-body-container .container-backgroud-colored{
    border-radius: 10px;
    background-color: rgb(18, 18, 18);
}

.coach-header-body-container {
    /* Only to test */
    max-width: 800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

.coach-strategy-attack-container, .coach-strategy-defense-container {
    max-width: 800px;
    padding: 20px;
}

.coach-strategy-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.coach-image-container {
    width: 280px;
    padding: 10px;
}

.coach-general-container {
   /* width: calc(100% - 300px);*/
    width: 100%;
    padding: 20px;
}

.coach-field-container {
    /* width: 280px; */
    width: 380px;
    padding: 10px;
}

.coach-instructions-container {
    /*width: calc(100% - 300px);*/
    width: 100%;
    padding: 10px;
}

.coach-body-container .progress-bar-container{
}

.coach-body-container .progress-bar {
    padding: 4px;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(
        to right,
        rgb(48, 48, 48),
        rgb(46, 46, 46) 4%,
        transparent 4%,
        transparent 5%
      ),
      repeating-linear-gradient(
        to right,
        rgb(40, 197, 53),
        rgb(40, 197, 53) 8%,
        transparent 8%,
        transparent 10%
      );
  
    background-size: 200%, 100%;
    background-position: -100%;
    background-repeat: repeat-y;
  }

@media (max-width: 992px) {
    .coach-body-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .coach-header-body-container {
        flex-direction: row;
    }
    .coach-strategy-container.efootball22 {
        flex-direction: column;
    }
    .coach-strategy-container{
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .coach-body-container {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    .coach-header-body-container {
        flex-direction: column;
    }
    .coach-strategy-attack-container, .coach-strategy-defense-container {
        /* max-width: auto; */
        max-width: 400px;
        width: 100%;
        padding: 10px;
    }
    .coach-strategy-container{
        flex-direction: column;
    }
    .coach-image-container {
        width: 100%;
        padding: 20px;
    }
    .coach-general-container {
        width: 100%;
        padding: 20px;
    }

    .coach-field-container {
        width: 100%;
    }
    .coach-instructions-container {
        width: 100%;
        padding: 20px;
    }
}


/*

.coach-formation-parent {
    position: relative;
    top: 0;
    left: 0;
    max-width: 250px;
    margin-bottom: 50px;
  }
  .pitch-image {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
  }
  .position-image {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #000000;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .position-txt {
    width: 100%;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    line-height: 100%;
  }
  .tactics-bar {
    width: 140px;
    height: 5px;
    background: repeating-linear-gradient(to right, #303030, #696969 4%, transparent 4%, transparent 5%), repeating-linear-gradient(to right, #04ff00,#04ff00 8%, transparent 8%, transparent 10%);
  
    background-size: 200%, 100%;
    background-position: -100%;
    background-repeat: repeat-y;
  }
  
  
  .coach-container{
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    margin: 0px auto;
    overflow: hidden;
font-family: eFootball22-card;
  }
  .coach-general{
    margin: 0px auto;
    margin-bottom: 50px;
  }
  .tactics-container{
    margin: 0px auto;
  }
  .tactic{
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
  }
  .tactic-stats{
    margin: auto;
  }
  @media (min-width: 40em) {
    .tactic {
          flex-direction: row;
          margin-bottom: 0px;
      }
    .coach-formation-parent {
      margin-right: 50px;
    }
  }
  @media (min-width: 60em) {
      .coach-container{
          display: flex;
          flex-direction: row;
      }
  }*/

/**********************************************************
|
| Coaches - Image
|
**********************************************************/

.coach-image-parent, .coach-image-parent img {
    width: 106px;
}

.coach-image-parent {
    margin: 0 auto;
  /*  background-color: black;
    border: 2px solid black;
    border-radius: 4px; */
}

/**********************************************************
|
| Coaches - Formations
|
**********************************************************/

.coach-field {
    text-align: center;
}

.coach-formation-parent {
    position: relative;
    top: 0;
    left: calc((100% - 254px) / 2);
    width: 254px;
    height: 326px;
}

.coach-pitch-image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
}

.coach-position-image {
    position: absolute;
    width: 48px;
}

.coach-position-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    color: white;
    font-weight: 100;
    font-size: 16px;
    text-align: center;
    transform: translate(-50%, -50%);
}

/**********************************************************
|
| Responsive - Show teams
|
**********************************************************/

.team-header-container {
   /* background: linear-gradient(135deg, rgba(93,37,201, 1) 10%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);*/
    background: linear-gradient(135deg, rgba(93,37,201,1) 0%, rgba(93,37,201,1) 15%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 60%, rgba(93,37,201,1) 85%, rgba(93,37,201,1) 100%);
}

.team-header-body-container {
    /*max-width: 800px;
    margin: 0 auto;*/
    /*max-width: 400px;*/
    position: relative;
    /*left: 10%;*/
    text-align: center;
    /*text-shadow: 2px 3px #000000;*/
    font-size: 15px;
	font-family: eFootball22-card;
}

.team-header-body-container .team-logo{
    width: 70px;
    padding: 5px;
}

.team-header-body-container .team-name-title{
    font-size: 29px;
}

.team-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
font-family: eFootball22-card;
}

.team-body-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.team-info-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-manager-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.team-manager-container .team-coach-general-container{
    flex-grow: 1;
    padding: 20px;
    min-width: 300px;
    /*width: 250px;*/
}

.team-manager-container .team-coach-general-container table{
    /*width: 250px;*/
    /*width: 100%;*/
    /*max-width: 700px;*/
    min-width: 250px;
    padding: 20px;
    width: 100%;
}

.team-manager-container .team-coach-instructions-container{
    padding: 20px;
    flex-grow: 4;
    min-width: 300px;
   /* width: 500px;*/
}

.team-manager-container .team-coach-instructions-container table{
    
   /* max-width: 700px;*/
  /* width: 500px; */
   width: 100%;
    padding: 20px;
}

.team-manager-container .team-coach-general-container td, .team-coach-instructions-container td{
    width: 50%;
    text-align: right;
}

.team-manager-container .coach-image-container {
    width: auto;
    padding: 10px;
}

.team-manager-container .progress-bar {
    padding: 4px;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(
        to right,
        rgb(48, 48, 48),
        rgb(46, 46, 46) 4%,
        transparent 4%,
        transparent 5%
      ),
      repeating-linear-gradient(
        to right,
        rgb(40, 197, 53),
        rgb(40, 197, 53) 8%,
        transparent 8%,
        transparent 10%
      );
  
    background-size: 200%, 100%;
    background-position: -100%;
    background-repeat: repeat-y;
  }

.team-players-container {
    /* width: calc(100% - 300px);*/
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px auto;
    align-items: start;
 }

 .team-players-container .all-players{
    width: 100%;
}

.team-body-container .table_data_container {
    /* overflow-y: scroll; */
    height: calc(100vh - 300px);
}

.team-container .team-formation-container{
    padding: 20px;
}

.team-container .team-formation-parent {
    position: relative;
    top: 0;
    /*left: calc((100% - 254px) / 2);
    width: 254px;
    height: 326px;*/
}

.team-container .team-pitch-image{
    width: 100%;
    max-height: 500px;
}

.team-container .team-position-image{
    position: absolute;
    width: 60px;
    height: 60px;
}

.team-container .player-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: left;
}

.team-container .info-holder{
    position: absolute;
    bottom: -25px;
    width: 100%;
    height: 25px;
    border-radius: 4px;
    background-color: #000000;
}

.team-formation-parent .player-name{
    position: absolute;
    bottom: -42px;
    text-align: center;
    font-size: 12px;
    white-space: nowrap;

    overflow: hidden;
    width: 65px;
    text-overflow: ellipsis;
}

.team-position-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    color: white;
    font-weight: 100;
    font-size: 16px;
    text-align: center;
    transform: translate(-50%, -50%);
}

.team-container .container-backgroud-colored{
    border-radius: 10px;
    background-color: rgb(27, 27, 27);
}

.team-container .card-grid-parent{
    height: auto; /* ADDED */
}

@media (max-width: 992px) {
}

@media (max-width: 768px) {

}

/**********************************************************
|
| Cards
|
**********************************************************/

.cards-row-container {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 0px 10px 0px;
}

.cards-row-container a {
    text-decoration: none;
}

.cards-row-container a:hover {
    color: currentColor;
}

/**********************************************************
|
| Player Card
|
**********************************************************/

.player-card {
    display: flex;
    flex-direction: row;
    height: 230px;
    background: #000000;
    border: 1px solid #000000;
}

.player-card .player-stats {
    margin-left: 10px;
    min-width: 170px;
}

.player-stat-white {
    color: white;
}

.player-card-min {
    width: 164px;
}

/**********************************************************
|
| Player Card PES 21
|
**********************************************************/

.player-card-21{
    position: relative;
    width: 162px;
    overflow: hidden; 
    font-family: Pes21-card;
  /*  filter: drop-shadow(9px 10px 5px black); */
    transition: transform 300ms ease; 
}

.player-card-21:hover{
    transform: scale(1.03);
}

.player-card-21 .card-slide-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    background: linear-gradient(
    hsl(0 0% 0% / 0.9),
    hsl(0 0% 0% / 0.9)
    );
    width: 100%;
    height: 100%;
    bottom: 0;
    color: rgb(0, 255, 242);
    transform: translateY(100%);
    transition:  transform 400ms ease;
    margin: 0 auto;
}

.player-card-21:hover .card-slide-content{
    transform: translateY(0%);
}

.player-card-21 .player-card-overall-field {
    width: 80px;
    height: 90px;
}

.player-card-21 .player-stats{
    font-size: 12px;
}

.player-stats td{
    padding: 0px 5px 0px 5px;
}

.player-card-overall-field .overall-field-image {
    height: 90px;
}

.player-card-overall-field .overall-field-image {
    height: 100%;
}

.player-card-overall-field {
    border: 1px solid black;
    width: 120px;
    height: 135px;
    position: relative;
    top: 0;
    left: 0;
    max-width: 300px;
    margin: 0 auto;
    padding: 0;
    background-color: black;
font-family: eFootball22-card;
}

/**********************************************************
|
| Player Card eFootball 22
|
**********************************************************/

.player-card-22{
    position: relative;
    width: 162px;
    overflow: hidden;
    font-family: eFootball22-card;
    transition: transform 300ms ease; 
}

.player-card-22:hover{
transform: scale(1.03);
}

.player-card-22 .card-slide-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    background: linear-gradient(
    hsl(0 0% 0% / 0.9),
    hsl(0 0% 0% / 0.9)
    );
    width: 100%;
    height: 100%;
    bottom: 0;
    color: rgb(0, 255, 242);
    transform: translateY(100%);
    transition:  transform 500ms ease;
    margin: 0 auto;
}

.player-card-22:hover .card-slide-content{
    transform: translateY(0%);
}

.player-card-22 .player-card-overall-field {
    width: 70px;
    height: 70px;
}

.player-card-22 .player-stats{
    font-size: 12px;
}



.player-card-22 .mini-face-background{
    position: absolute;
    width: 95px;
    height: 95px;
    top: 8px;
    /*right: 0px;*/
    right: 8px;
}

.player-card-22 .player-image-parent .mini-face{
    position: absolute;
    width: 95px;
    height: 95px;
    top: 8px;
    /*right: 0px;*/
    left: 60px;
}

.player-card-22 .player-image-position{
    top: 30px;
    font-size: 22px;
    width: 54px;
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .player-image-overall {
    top: -8px;
    width: 54px;
    font-family: eFootball22-stencil-card;
    font-weight: 300;
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .player-image-overall-potential {
    top: 0px;
    left: 27px;
    width: 54px;
    font-size: 130%;
    position: absolute;
    color: rgb(0, 255, 76);
    font-weight: 100;
    text-align: center;
    width: 60px;
    white-space: nowrap;
    font-family: eFootball22-stencil-card;
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .player-image-team-logo{
    position: absolute;
    top: 62px;
    left: 10px;
    width: 36px;
}

.player-card-22 .player-image-name{
    position: absolute;
    bottom: 88px;
    width: 100%;
    height: 10%;
    font-size: 17px;
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .player-image-name-legend{
    position: absolute;
    bottom: 52px;
    width: 100%;
    height: 10%;
    font-size: 17px;

    color: white;
    font-weight: 900;
    text-align: center;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .player-image-name-featured{
    position: absolute;
    left: -29px;
    bottom: 77px;
    width: 122px;
    height: 10%;
    font-size: 17px;

    color: white;
    font-weight: 900;
    text-align: center;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    transform: rotate(90deg);
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .player-image-name-trending{
    position: absolute;
    bottom: 51px;
    left: 12px;
    width: 100%;
    height: 10%;
    font-size: 17px;

    color: white;
    font-weight: 900;
    text-align: left;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    transform: rotate(350deg);
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .player-image-condition{
    position: absolute;
    bottom: 41px;
    /* left: calc(50% - 0px); */
    font-weight: 900;
    font-size: 24px;
    text-align: center;
    height: 33px;
    width: 100%;
    left: 0px;
    bottom: 5px;
}

.player-card-22 .player-image-condition-nonbase{
    position: absolute;
    bottom: 41px;
    /* left: calc(50% - 0px); */
    font-weight: 900;
    font-size: 22px;
    text-align: center;
    height: 33px;
   /* width: 100%;*/
    right: 6px;
    bottom: 1px;
    text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22  .player-image-info{
    position: absolute;
    bottom: 65px;
    width: 100%;
    height: 10%;
    font-size: 13px;
    text-align: center;
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22  .player-image-level-title{
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: 10%;
    font-size: 15px;
    text-align: center;
    color: #6E6E6E;
}

.player-card-22  .player-image-level{
    position: absolute;
    bottom: 38px;
    width: 100%;
    height: 10%;
    font-size: 20px;
    text-align: center;
	text-shadow: 0.1px 0.1px 3px black;
}

.player-card-22 .star-parent{
    position: absolute;
    bottom: 105px;
    width: 70px;
    height: 15px;
    left: calc(50% - 35px);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.player-card-22 .star-parent-bottom{
    position: absolute;
    bottom: 5px;
    width: 70px;
    height: 15px;
    left: calc(50% - 35px);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.player-card-22 .star{
    width: 13px;
    height: 13px;
}

.player-card-22 .stars{
    width: 65px;
    height: 14px;
}

.player-card-22 .player-image-league{
    position: absolute;
    bottom: 35px;
    left: 19px;
    width: 25px;
    height: 25px;
}

.player-card-22 .player-image-country{
    position: absolute;
    bottom: 35px;
    right: 19px;
    width: 25px;
    height: 25px;
}



/**********************************************************
|
| Players Card - Image
|
**********************************************************/

.player-card-image-container {
    position: relative;
    width: 162px;
    height: 228px;
    top: 0;
    left: 0;
}

.player-card-name-background {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 10%;
}

/* .condition-background {
  position: absolute;
  bottom: 50px;
  left: 80px;
  height: 40px;
  width: 40px;
  background-color: #555;
} */

.player-card .player-image-condition {
    position: absolute;
    /* height: 35px;
    width: 35px; */
    bottom: 40px;
    left: 60px;
    font-weight: 900;
    font-size: 30px;
    text-align: center;
    line-height: 1.4;
    border-radius: 2px;
    padding: 0px 6px 0px 6px;
    background-color: #181818;
}

.player-card-levelcap {
    /* position: absolute;
   top: 30px;
   left: 10px; */
    color: white;
    font-weight: 900;
    font-size: 15px;
    /* font-style: italic; */
    text-align: right;
    padding: 0px 6px 0px 0px;
}

.player-card-potential {
    /*position: absolute;
   top: 30px;
   left: 10px; */
    color: white;
    font-weight: 900;
    font-size: 40px;
    /*font-style: italic;*/
    text-align: right;
    padding: 0px 6px 0px 0px;
}

/**********************************************************
|
| Mini Player Card eFootball 22
|
**********************************************************/
.player-compare-table .mini-face-card22{
    height: 102px;
 }

 .mini-face-card22 .player-image-overall{
    top: 0px;
 }

 .player-search-table .mini-face-card22{
    height: 44px;
 }

 .player-search-table .player-card-image-container{
    width: 68px;
 }

 .player-search-table .player-card-22 .player-image-overall{
    font-size: 20px;
    width: 24px;
    left: 1px;
    top: -3px;
 }

 .player-search-table .player-card-22 .player-image-position{
    font-size: 12px;
    top: 23px;
    width: 24px;
 }

 .player-search-table .player-card-22 .player-image-parent .mini-face{
    width: 40px;
    height: 40px;
    top: 2px;
    left: 26px;
 }

 .league-table .player-card-image-container{
    height: 106px;
 }

/**********************************************************
|
| Player Card Special
|
**********************************************************/

.player-card-special {
    height: 300px;
}

.player-card-special .player-card-image-container {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
}

.player-card-special .player-card-name-background {
    position: absolute;
    bottom: 100px;
}

.special-card-visible {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.special-card-hidden {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    /* transition: visibility 0s, opacity 1s linear; */
    transition: all 2s ease;
    will-change: bottom;
}

.special-card-hidden .player-card-overall-field {
    /* position: absolute;
    top: 0;
    left: 20px; */
}

.player-card-special .player-card-image-container:hover > .special-card-hidden {
    visibility: visible;
    opacity: 0.8;
    top: 0;
    transform: translateY(0%)
}


/**********************************************************
|
| Coach Card
|
**********************************************************/

.coach-card {
    display: flex;
    flex-direction: row;
    border: solid 1px #04a7a5;
    padding: 10px 5px 0px 5px;
    margin: 10px 10px 0 0;
  /*  background: #000000;*/
    background-image: url('https://novasoftwarestudio.online/peshub21/Images/coach-background1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    border-radius: 4px;
    border: 1px solid #000000;
    font-family: Pes21-card;
  /*  filter: drop-shadow(9px 10px 5px black); */
    transition: transform 500ms ease; 
}

.coach-card22 {
    display: flex;
    flex-direction: row;
    border: solid 1px #04a7a5;
    padding: 10px 5px 0px 5px;
    margin: 10px 10px 0 0;
    background: #232323;
  /*  background-image: url('https://novasoftwarestudio.online/peshub21/Images/coach-background1.png'); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    border-radius: 4px;
    border: 1px solid #000000;
    font-family: eFootball22-card;
  /*  filter: drop-shadow(9px 10px 5px black); */
    transition: transform 500ms ease; 
}

.coach-card:hover{
    transform: scale(1.05);
}

.coach-card-main {
    width: 150px;
    padding: 0px;
    margin: 0px;
}

.coach-card .info{
    color:white;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.coach-card-formation {
    width: 100px;
    /* background-color: #000; */
    padding: 0;
    margin: 0;
}

.coach-card .mini-face {
    width: 80px;
    text-align: center;
    padding-right: 5px;
}

.coach-card-formation .formation-parent {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100px;
}

.coach-card-formation .pitch-image {
    position: relative;
    top: 0;
    left: 0;
    max-width: 120px;
    filter: brightness(100%);
}

.coach-card-formation .position-image {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ffffff;
}

.coach-card-formation .formation {
    width: 100%;
}

/**********************************************************
|
| Team Card
|
**********************************************************/

.team-card {
    width: 140px;
    border: solid 1px #04a7a5;
    padding: 10px 5px 10px 5px;
    margin: 10px 10px 0px 0px;
    background: #000000;
    border-radius: 5px;
    border: 1px solid #000000;
    font-family: Pes21-card;
   /* filter: drop-shadow(9px 10px 5px black); */
    transition: transform 500ms ease; 

    background-image: url('https://novasoftwarestudio.online/peshub21/Images/coach-background1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.team-card:hover{
    transform: scale(1.05);
}

.team-card-main {
    width: 140px;
    padding: 0px;
    margin: 0px;
font-family: eFootball22-card;
}

.team-card .mini-logo {
    display: block;
    width: 90px;
    padding: 0;
    margin: 0 auto;
}

/**********************************************************
|
| Admin Cards
|
**********************************************************/

.admin-player-card {
    width: 800px;
    padding: 5px 10px;
    margin: 5px;
    background: #def;
    border-radius: 5px;
    border: solid 1px #04a7a5;
}

.admin-coach-card {
    width: 800px;
    padding: 5px 10px;
    margin: 5px;
    background: #def;
    border-radius: 5px;
    border: solid 1px #04a7a5;
}

/**********************************************************
|
| Players - Image
|
**********************************************************/

.player-image-parent {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: auto;
}

.player-image-background-image, .player-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: left;
}

.player-image-parent .mini-face {
    position: absolute;
    width: 115px;
    height: 115px;
    top: 15px;
    /*right: 0px;*/
    left: 50px;
}

.player-image-team-logo {
    position: absolute;
    top: 70px;
    left: 7px;
    width: 46px;
}

.player-image-position {
    position: absolute;
    top: 0px;
    left: 0px;
    color: white;
    font-weight: 900;
    font-size: 190%;
    text-align: center;
    width: 60px;
    white-space: nowrap;
}

.player-image-overall {
    position: absolute;
    top: 25px;
    left: 0px;
    color: white;
    font-weight: 900;
    font-size: 240%;
    text-align: center;
    width: 60px;
    white-space: nowrap;
}

.player-image-levelcap{
    position: absolute;
    top: 117px;
    left: 0px;
    color: white;
    font-weight: 900;
    font-size: 100%;
    text-align: center;
    width: 60px;
    white-space: nowrap;
}

.player-image-potential {
    position: absolute;
    top: 122px;
    left: 0px;
    color: white;
    font-weight: 900;
    font-size: 240%;
    text-align: center;
    width: 60px;
    white-space: nowrap;
}

.player-image-name {
    position: absolute;
    bottom: 0;
    left: 0px;
    color: white;
    font-weight: 900;
    font-size: 120%;
    text-align: center;
    text-overflow: clip;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.player-image-condition-background{
    position: absolute;
    bottom: 35px;
    left: calc(50% - 20px);
    border-radius: 4px;
    background-color: #181818;
    height: 33px;
    width: 26px;
}

.player-image-condition {
    position: absolute;
    bottom: 41px;
    left: calc(50% - 20px);
    font-weight: 900;
    font-size: 200%;
    text-align: center;
    height: 33px;
    width: 26px;
}

/**********************************************************
|
| Players - General
|
**********************************************************/

.player-general-container{
    color: white;
}

.player-general-container th{
    color: var(--secondary-title-color);
    font-size: 14px;
}

.player-general-container table{
    width: 100%;
}

.player-general-info{
    background-color: #1d1d1d;
    border-radius: 10px;
    padding: 6px;
}

.player-general-container table tr:nth-child(odd) {background-color: #303030;}

.player-general-container table, .player-abilities-container table {
    width: 100%;
}

.strong-foot-image{
    width: 30px;
}

.player-general-container th {
    min-width: 90px;
   /* width: 140px; */
  /*  border-bottom: 1px solid rgb(63, 63, 63);*/
}

.player-general-container td {
   /* border-bottom: 1px solid rgb(63, 63, 63);*/
   min-width: 180px;
}

.player-abilities-container td {
    width: 27px;
    text-align: center;
   /* border: 1px solid #ffffff91; */
}

.ability-table {
    border-collapse: separate;
    border-spacing: 0px 2px;
    font-size: 1rem; 
}

.ability-table tr:nth-child(odd) {background-color: #ffffff17;}

td.ability, td.other-ability {
    border-radius: 4px;
    color: rgb(0, 0, 0);
    font-weight: 900;
}

.lbl-block {
    display: block;
}

/**** Stars of inspire ****/

.icon {
    padding: 5px;
    width: 28px;
    height: 28px;
}

/**********************************************************
|
| Level Slider
|
**********************************************************/

.level-slider-container {
    /* Only to test */
    /*border: solid 1px white;*/
    position: relative;
    width: 100%;
    height: 40px;
}

.level-indicator {
    /* Only to test */
  /*  border: solid 1px white; */
    width: 100px;
    height: 40px;
    line-height: 2.5;
    font-weight: 900;
    font-size: 18px;
}

.level-btn-minus {
    position: absolute;
    top: 40px;
}

.level-btn-plus {
    position: absolute;
    top: 40px;
    left: 40px
}

.level-slider {
    position: absolute;
    top: 10px;
    left: 60px;
    background-color: rgb(63, 63, 63);
    border: 1px solid rgb(112, 111, 111);
    width: calc(100% - 100px);
    height: 20px;
    pointer-events: none;
    -webkit-appearance: none;
    border-radius: 20px;
}

.level-slider::-ms-thumb {
    pointer-events: all;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 1px solid rgb(112, 111, 111);
    background-color: rgb(255, 255, 255);
}

.level-slider::-moz-range-thumb {
    pointer-events: all;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 1px solid rgb(112, 111, 111);
    background-color: rgb(255, 255, 255);
}

.level-slider::-webkit-slider-thumb {
    pointer-events: all;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    border: 1px solid rgb(112, 111, 111);
    background-color: rgb(255, 255, 255);
    -webkit-appearance: none;
}

.level-slider.level-normal::-ms-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
}

.level-slider.level-normal::-webkit-slider-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
}

.level-slider.level-normal::-moz-range-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
}

.level-slider.level-excellent::-ms-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m4,16h8v-4h4L8,0L0,12h4z' stroke='black' stroke-width='1' fill='green /%3E%3C/svg%3E ");
}

.level-slider.level-excellent::-webkit-slider-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m4,16h8v-4h4L8,0L0,12h4z' stroke='black' stroke-width='1' fill='green' /%3E%3C/svg%3E ");
}

.level-slider.level-excellent::-moz-range-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m4,16h8v-4h4L8,0L0,12h4z' stroke='black' stroke-width='1' fill='green' /%3E%3C/svg%3E ");
}

.level-slider.level-bad::-ms-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m12,0h-8v4h-4L8,16L16,4h-4z' stroke='black' stroke-width='1' fill='green /%3E%3C/svg%3E ");
}

.level-slider.level-bad::-webkit-slider-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m12,0h-8v4h-4L8,16L16,4h-4z' stroke='black' stroke-width='1' fill='green' /%3E%3C/svg%3E ");
}

.level-slider.level-bad::-moz-range-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m12,0h-8v4h-4L8,16L16,4h-4z' stroke='black' stroke-width='1' fill='green' /%3E%3C/svg%3E ");
}

/* 
.level-slider.level-normal-arrow::-moz-range-thumb {
    background: transparent 50%/100% 100% no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m0,4v8h4v4L16,8L4,0v4z' stroke='black' stroke-width='1' fill='yellow' /%3E%3C/svg%3E ");
} */

/* .level-slider::-ms-fill-lower {
    border: 0 none;
}

.level-slider::-ms-fill-upper {
    border: 0 none;
}

.level-slider::-ms-tooltip {
    display: none;
} */

/**********************************************************
|
| Players - Overall field
|
**********************************************************/
/*
.player-card-overall-field {
    border: 1px solid black;
    width: 120px;
    height: 135px;
    position: relative;
    top: 0;
    left: 0;
    max-width: 300px;
    margin: 0 auto;
    padding: 0;
    background-color: black;
}
*/
.player-overall-pitch-container .overall-field {
  /*  border: 1px solid black; */
    width: 230px;
    height: 280px;
    position: relative;
    top: 0;
    left: 0;
    max-width: 556px;
    margin: 0 auto;
    padding: 0;
 /*   background-color: black; */
}

.player-overall-pitch-container .overall-field-image {
    width: 232px;
    height: 284px;
    top: -2px;
    left: -2px;
    z-index: 1;
}

.player-overall-pitch-container .overall-value {
    z-index: 5;
}
/*
.player-card-overall-field .overall-field-image {
    height: 135px;
}
*/
.overall-field-image {
    height: 100%;
    width: 100%;
    filter: brightness(100%);
    position: absolute;
    z-index: 1;
}

.overall-position {
    position: absolute;
}

.overall-value {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    background-color: black;
    border: 1px solid black;
    width: 28px;
    height: 20px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    color: white;
}

/**********************************************************
|
| Players - Graphics
|
**********************************************************/

.player-radar-chart-parent {
    max-width: 200px;
    max-height: 240px;
    margin-right: auto;
    margin-left: auto;
}

.player-condition-history-parent {
    max-width: 800px;
    max-height: 400px;
    margin-right: auto;
    margin-left: auto;
}

/**********************************************************
|
| Create/edit players inputs
|
**********************************************************/

.player-edit-general-container .control-label, .player-edit-positions-container .control-label {
    width: 150px;
}

.player-edit-abilities-container .form-control, .player-edit-overall-container .form-control {
    width: 100px;
    text-align: center;
}

.player-edit-abilities-container .control-label, .player-edit-overall-container .control-label {
    width: 80%;
}

@media (max-width: 1450px) {
    .player-edit-positions-container .form-control {
        width: 80px;
    }
    .player-edit-positions-container .control-label {
        width: 50%;
    }
}

@media (max-width: 900px) {
    .player-edit-positions-container .form-control {
        width: 100px;
    }
    .player-edit-positions-container .control-label {
        width: 80%;
    }
}

/**********************************************************
|
| Featured players in home
|
**********************************************************/

.featured-players-container {
   /* border: 1px solid red; */
}

/**********************************************************
|
| Coaches - General
|
**********************************************************/

.coach-general-container table, .coach-instructions-container table, .coach-instructions-container table {
    width: 100%;
    max-width: 700px;
    padding: 20px;
}

.coach-general-container td, .coach-instructions-container td, .coach-instructions-container td {
    width: 50%;
    text-align: right;
}



/**********************************************************
|
| Tables data container: Players, Coaches, Teams
|
**********************************************************/

.table_data_container {
    height: calc(100vh - 200px);
    overflow: auto;
}

.table_data_container table {
    width: 100%;
}

.table_data_container th {
    /* background: white; */
    position: sticky;
    top: 0;
    font-size: 14px;
    font-weight: 300;
    padding: 10px;
    z-index: 1;
    color: var(--secondary-title-color);
   /* box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
}

.table_data_container .headcol {
    border-top-width: 1px;
  /*  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4); */
    display: flex;
    flex-direction: row;
    /*align-items: left;*/
    position: sticky;
    left: 0;
    top: auto;
}

.player-search-table td{
    min-width:80px
}
/*
@media screen and (min-width: 1200px) {
    .table_data_container .headcol {
        position: sticky;
        left: 0;
        top: auto;
    }
}
*/

.player-search-table .player-name{
    margin-left: 4px;
    font-weight: bold;
 }

 .player-search-table td:first-child{
    text-align: left;
 }

 .player-search-table .player-position-playingstyle{
    margin-left: 4px;
    color:rgb(137, 137, 137)
 }

.headcol .mini-face {
    height: 45px;
}

.table_data_container td {
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    vertical-align: middle;
    /*font-size: 1em;*/
    font-weight: 300;
}

.table_data_container .player-table-condition {
   /* position: relative;*/
   /* top: 15%; */
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
    border-radius: 2px;
   /* padding: 0px 6px 0px 6px;
    background-color: #242b2d;
}

.table_data_container .player-name {
    float: left;
    text-align: left;
    white-space: nowrap;
    font-weight: 600;
    /*font-size: 1.1em;*/
}

.table_data_container .player-position-playingstyle {
    float: left;
    text-align: left;
    white-space: nowrap;
}

.table_data_container td .search-ability{
    padding: 0;
    width: 40px;
    height: 28px;
    margin: auto;
    line-height: 28px;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: efootball22-card;
    /*border: solid 1px black;*/
    /*border-radius: 4px;*/
    /*color: rgba(0, 0, 0, 1);*/
}

@media (max-width: 768px) {
    #table-search-players .headcol{
        width:150px;
    }

    #table-search-players .player-table-info{
        width: 79px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #table-search-players .player-name{
        width:80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #table-search-players .player-position-playingstyle{
        width:80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/**********************************************************
|
| Grid data container: Players, Coaches, Teams
|
**********************************************************/

.card-grid-parent{
    height: calc(100vh - 120px); /* ADDED */
    flex-direction: column;
    overflow-y: auto;
}

.cards-grid-container{
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/**********************************************************
|
| Search pages: Players, Coaches
|
**********************************************************/

.filtered-container {
    padding: 5px;
    width: calc(100% - 390px);
}

/*filtered-container-coach needed to maintain container height*/
.filtered-container-coach{
    height:calc(100vh - 80px);
}

.filtered-container .table_data_container {
    height: calc(100vh - 130px);
    overflow: auto;
}

.filter-container {
  /*  padding-right: 8px;
  top: 50px;*/
}

.filters-container {
    height: 30px;
}

.filter-container form {
    /*height: calc(100vh - 100px);*/
    overflow: auto;
}

.btn-filter {
    display: block;
    margin-left: auto;
}

.closebtn {
   /* position: absolute;
    padding: 0px!important;
    top: 0px;
    right: 8px;
    font-size: 20px;
    z-index: 20;*/
}

.compare-filter-container .closebtn {
    visibility: visible;
}

@media screen and (min-width: 769px) {
    .filter-container {
        width: 350px;
    }
    .filter-container form {
       /* height: calc(100vh - 100px);*/
        height: 100%;
        overflow: auto;
    }
    .btn-filter {
        display: none;
    }
    .filter-container .closebtn {
        visibility: hidden;
    }
}

@media screen and (max-width: 768px) {
    .filtered-container {
        width: 100%;
        /*height: calc(100vh - 150px);*/
    }
    .filtered-container .table_data_container {
        height: calc(100vh - 110px);
    }
    .filter-container {
        height: calc(100vh);
        width: 0px;
        position: fixed;
        z-index: 99;
        top: 50px;
        right: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
        box-shadow: 0 10px 10px 5px rgba(0, 0, 0, 0.4);
    }
    .filter-container form {
       /* height: calc(100vh - 10px);*/
        height: 100%;
        overflow: auto;
    }
    .filter-container .closebtn {
        visibility: visible;
    }
}

/**********************************************************
|
| Sidebar search
|
**********************************************************/

.sidebar-search {
    height: 100%;
    padding: 0px 10px 0px 10px;
}

.sidebar-search .container {
    position: relative;
    height: 100%;
    overflow: auto;
}

.sidebar-search-header {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 30px;
    right: 0px;
    overflow: hidden;
}

.sidebar-search-container {
    position: absolute;
    top: 50px;
    bottom: 100px;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.sidebar-search-footer {
    position: absolute;
    bottom: 0px;
    height: 100px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

.sidebar-search .sidebar-search-footer .btn {
    margin: 5px 0;
}

.sidebar-search-container>button {
    text-align: left;
}

@media screen and (max-width: 768px) {
    .sidebar-search-header {
        height: 50px;
    }

    .sidebar-search-container {
        top: 50px;
        bottom: 200px;
    }

    .sidebar-search-container {
        bottom: 200px;
    }

    .sidebar-search-footer {
        height: 200px;
    }

    /*.sidebar-search a {*/
    /*    padding: 8px 8px 8px 8px;*/
    /*    text-decoration: none;*/
    /*    font-size: 25px;*/
    /*    color: #818181;*/
    /*    display: block;*/
    /*    transition: 0.3s;*/
    /*}*/
    /*.sidebar-search a:hover {*/
    /*    color: #f1f1f1;*/
    /*}*/
}

/**********************************************************
|
| Search pages buttons
|
**********************************************************/

.sidebar-search input[type=text] {
    border-radius: 16px;
}

.sidebar-search select {
    border-radius: 16px;
}

.sidebar-search .btn {
    border: none;
    font-size: 1.2em;
    margin: 10px 0;
}

.sidebar-search .btn-primary {
    background-color: rgb(54, 54, 54);
    color: white;
}

.sidebar-search .btn-primary:not(:disabled):not(.disabled):active {
    background-color: rgb(54, 54, 54);
}

.sidebar-search .btn-secondary, .progression-system-container .btn-secondary{
    background-color: rgb(51, 62, 255);
    color: white;
}

.sidebar-search .btn-success {
    background-color: rgb(0, 121, 0);
    color: white;
}

.sidebar-search .btn-danger, .progression-system-container .btn-danger  {
    background-color: rgb(121, 0, 0);
    color: white;
}

.sidebar-search .btn-one, .sidebar-search .btn-two {
    background-color: rgb(54, 54, 54);
    color: white;
}

.sidebar-search .btn-primary:not(:disabled):not(.disabled):active, .sidebar-search .btn-primary:not(:disabled):not(.disabled).active {
    /* background-color: rgb(2, 200, 255);
    color: white; */
 
    background-color: rgb(100, 62, 253);
    color: white;
}

.sidebar-search .btn-one:not(:disabled):not(.disabled):active, .sidebar-search .btn-one:not(:disabled):not(.disabled).active {
    /* background-color: rgb(2, 200, 255);
    color: white; */
 
    background-color: rgb(100, 62, 253);
    color: white;
}

.sidebar-search .btn-two:not(:disabled):not(.disabled):active, .sidebar-search .btn-two:not(:disabled):not(.disabled).active {
   /* background-color: rgb(34, 255, 0);
    color: black;*/

    background-color: rgb(100, 62, 253);
    color: white;
}

/**********************************************************
|
| Search pages main
|
**********************************************************/

.btn-group-type {
    width: 100%;
}

.btn-group-type .btn {
    padding: 5px;
    font-size: 0.8em;
    font-weight: bold;
    flex: none;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 18%;
    margin-right: 2.5%;
    border-radius: 4px;
}

.btn-group-type .btn.btn-type:last-child {
    margin-right: 0;
}

@media screen and (max-width: 768px) {
    .btn.btn-type {
        font-size: 0.6em;
        flex-basis: 18%;
        margin-right: 2.5%;
        border-radius: 4px;
    }
}

.btn-group-skills .btn {
    flex: none;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 48%;
    margin: 1%;
}

.btn-group-skills .btn:not(:first-child) {
    margin-left: 1%;
}

/**********************************************************
|
| Search pages registered position
|
**********************************************************/

.search-position-field {
    position: relative;
    background-color: rgb(0, 0, 0);
    top: 0;
    left: 0;
    margin: 0 auto;
    padding: 0;
}

.search-position-field img {
    position: relative;
    width: 240px;
    height: 328px;
    top: 0;
    left: 0;
    margin: 0 auto;
}

.search-position-field .search-position {
    position: absolute;
}

.search-position-field .search-position .btn {
    width: 60px;
    height: 40px;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* 
.card-search li a:active {
    border: 1px solid #666666 !important;
    background-color: #9d9;
}
.card-search li a:target {
    border: 1px solid #666666 !important;
    background-color: #851;
} */

/**********************************************************
|
| Search pages abilities
|
**********************************************************/

.search-stats-container {
    margin-top: 10px;
    margin-bottom: 10px;
}

.level-tab {
    margin-right: 0;
    width: 300px;
}


/*.sidebar-search-footer li, .level-tab li {
    width: 50%;
}

.sidebar-search-footer .nav-link, .level-tab .nav-link {
    background-color: rgb(50, 50, 50);
    color: white;
}

.sidebar-search-footer .nav-primary.active, .level-tab .nav-primary.active {
    background-color: red;
    color: white;
}

.sidebar-search-footer .nav-secondary.active, .level-tab .nav-secondary.active {
    background-color: rgb(34, 255, 0);
    color: white;
}*/

/* .nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: red;
    border-color: black;
    color: white;
} */

/**********************************************************
|
| Multirange
|
**********************************************************/

[slider] {
    position: relative;
    height: 36px;
    border-radius: 2px;
    text-align: left;
    margin-bottom: 20px;
}

[slider] .title {
    position: absolute;
    top: 0px;
    left: 0;
    text-align: center;
    width: 100%;
}

[slider] .slider-value {
    position: absolute;
    top: 0px;
    z-index: 3;
    /*background-color: #f5f5f5;
    color: #000;*/
    background-color: #000;
    color: white;
    text-align: center;
    width: 40px;
    height: 36px;
    line-height: 34px;
    font-size: 1em;
    font-weight: bold;
}

[slider] .slider-parent {
    position: absolute;
    top: 20px;
    left: 40px;
    right: 40px;
    height: 24px;
    min-height: 24px;
    /* margin-top: 20px; */
}

[slider] .slider-bar {
    position: absolute;
    top: 0px;
    left: 12px;
    right: 12px;
    height: 14px;
}

[slider] [inverse-left] {
    position: absolute;
    top: 8px;
    left: 0;
    height: 8px;
    border-radius: 2px;
   /* background-color: rgb(34, 255, 0);*/
    background-color: #4D4D4D;
    margin: 0 0px;
}

[slider] [inverse-right] {
    position: absolute;
    top: 8px;
    right: 0;
    height: 8px;
    border-radius: 2px;
   /* background-color: rgb(34, 255, 0);*/
    background-color: #4D4D4D;
    margin: 0 0px;
}

[slider] [range] {
    position: absolute;
    left: 0;
    top: 8px;
    height: 8px;
    border-radius: 2px;
   /* background-color: #4D4D4D;*/
    background-color: rgb(100, 62, 253);
}

[slider] [thumb] {
    position: absolute;
    z-index: 2;
    top: 0px;
    height: 24px;
    width: 24px;
    text-align: left;
    margin-left: -12px;
    /*background-color: #4D4D4D;*/
    background-color: white;
    border-radius: 50%;
    outline: none;
}

[slider] input[type=range] {
    position: absolute;
    top: 8px;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 3;
    height: 8px;
    width: 100%;
    /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0; */
    /* background-color: green; */
    opacity: 0;
}

div[slider]>div>input[type=range]::-ms-track {
    -webkit-appearance: none;
    /* background: transparent; */
    /* color: transparent; */
}

div[slider]>div>input[type=range]::-moz-range-track {
    -moz-appearance: none;
    /* background: transparent; */
    /* color: transparent; */
}

div[slider]>div>input[type=range]:focus::-webkit-slider-runnable-track {
    /* background: transparent; */
    border: transparent;
}

div[slider]>div>input[type=range]:focus {
    outline: none;
}

div[slider]>div>input[type=range]::-ms-thumb {
    pointer-events: all;
    width: 24px;
    height: 24px;
    border-radius: 0px;
    border: 0 none;
    background: red;
}

div[slider] input[type=range]::-moz-range-thumb {
    pointer-events: all;
    width: 24px;
    height: 24px;
    border-radius: 0px;
    border: 0 none;
    background: red;
}

div[slider] input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 24px;
    height: 24px;
    border-radius: 0px;
    border: 0 none;
    background: red;
    -webkit-appearance: none;
}

div[slider] input[type=range]::-ms-fill-lower {
    /* background: transparent; */
    border: 0 none;
}

div[slider]>div>input[type=range]::-ms-fill-upper {
    /* background: transparent; */
    border: 0 none;
}

div[slider]>div>input[type=range]::-ms-tooltip {
    display: none;
}

/**********************************************************
|
| Compare players
|
**********************************************************/
.compare-header-container{
    gap: 10px;
}

.compare-header-container .btn{
    margin: 5px 0;
    /*text-align: left;*/
    border: none;
    font-size: 1em;

    background-color: rgb(54, 54, 54);
    color: white;

    height: 40px;
    width: 100px;
}

.compare-header-container .btn-one:not(:disabled):not(.disabled):active, .compare-header-container .btn-one:not(:disabled):not(.disabled).active {
    background-color: rgb(100, 62, 253);
    color: white;
}

.compare-container {
    
    overflow-y: scroll;
    /*height: calc(100vh - 260px);*/
    height: calc(100vh - 130px);
}

.compare-container table { border-collapse: collapse; white-space: nowrap; }
.compare-container tr { display: inline-block; text-align: center; }
.compare-container tbody, .compare-container thead { display: inline-block; vertical-align: top; }
.compare-container th, .compare-container td { 
    display: block;
     border: 1px solid rgb(58, 58, 58); 
     padding: 0;
     height: 32px;
     margin: auto;
    line-height: 32px;
    font-size: 0.9rem;
    font-weight: bold;
    }

.compare-container td .search-ability{
    padding: 0;
    margin: 0 auto;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: efootball22-card;
}

.compare-container td .normal-ability{
    padding: 0;
    width: 40px;
    height: 16px;
    margin: auto;
    line-height: 16px;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0;
    /*border: solid 1px black;*/
    /*border-radius: 4px;*/
    /*color: rgba(0, 0, 0, 1);*/
}

.table-transpose tr {
    display: block;
    float: left;
}

.table-transpose th, .table-transpose td {
    display: block;
    height: 32px;
    line-height: 28px;
    text-align: center;
    padding: 1px 10px 0px 10px;
}

.table-transpose td.wrap {    
    height: auto;
}

th.clean-cells, td.clean-cells {
    /* border: none !important; */
}

.modal .compare-filter-container {
    height: 100%;
    width: 0;
    position: absolute;
    top: 0;
    right: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: 0.3s;
}

.modal-content {
    height: calc(100vh - 40px);
}

.compare-filter-container form {
    height: 100%;
    /* calc(100vh - 200px); */
}

.modal-body {
    overflow-y: scroll;
}

.row-sticky {
    position: sticky;
    top: 0;
    z-index: 2;
    /* height: 200px !important; */
    /* padding-bottom: 10px; */
}

.compare-container .column-sticky {
    position: sticky;
    left: 0px;
    z-index: 2;
    text-align: left;
}

.player-image-cell .player-image-overall{
    font-size: 32;
}




/**********************************************************
|
| Compare players - Image
|
**********************************************************/

.compare-players-image-container {
    width: 160px;
    height: 160px;
    margin-right: -50px;
}

/*.compare-players-image-container .player-image-parent {*/
/*    position: relative;*/
/*    width: auto;*/
/*    height: 100%;*/
/*    top: 0;*/
/*    left: 0;*/
/*}*/

/*.compare-players-image-container .player-image-background-image {*/
/*    width: 160px;*/
/*    position: relative;*/
/*    top: 0;*/
/*    left: 0;*/
/*}*/

.compare-players-image-container .player-card-name-background {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 72%;
    height: 10%;
}

.compare-players-image-container .player-image-position {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 20px;
}
.compare-players-image-container .player-image-overall {
    position: absolute;
    top: 20px;
    left: 2px;
    font-size: 20px;
}

.compare-players-image-container .player-image-condition {
    position: absolute;
    bottom: 10px;
    left: 80px;
    font-size: 20px;
}
.compare-players-image-container .player-image-team-logo {
    position: absolute;
    top: 100px;
    left: 2px;
    width: 40px;
}

.pitch-cell {
    height: 160px!important;
}

.pitch-cell .overall-field-image {
    top: 0px;
    left: 0px;
    height: 135px;
}

.radar-cell {
    height: 160px!important;
}

.compare-container .player-radar-chart-parent {
    max-width: 140px;
    max-height: 140px;
    margin-right: auto;
    margin-left: auto;
}

.player-image-cell {
    height: 140px!important;
}


/**********************************************************
|
| Other
|
**********************************************************/

@media screen and (max-width: 800px) {
    .player-main {
        float: none;
        margin-right: 0;
        width: auto;
        border: 0;
    }
}

.icon {
    padding: 5px;
    width: 28px;
    height: 28px;
}

@media (max-width: 768px) {
    .button-md {
        width: 20px !important;
    }
}

.vertical {
    display: inline;
    vertical-align: middle;
}

/**********************************************************
|
| Light theme
|
**********************************************************/

body.light-theme {
    background-color: rgba(255, 255, 255, 0.92);
    color: rgba(0, 0, 0, 0.92);
}

.light-theme a {
    color: #000;
}

/**** Home ****/

.light-theme .main-pes-logo {
    border: 2px solid #000;
}

.light-theme .main-options a {
    color: #000;
}

.light-theme .home-container .even {
    background-color: white;
}

.light-theme .home-container .odd {
    background-color: rgb(180, 180, 180);
}

/**** Tables ****/


.light-theme table {
    color: rgba(0, 0, 0, 0.92)
}

.light-theme .table-striped>thead>tr>th {
    background-color: rgba(255, 255, 255, 0.8);
}

.light-theme .table-striped>tbody>tr:nth-child(odd)>td, .dark-theme .table-striped>tbody>tr:nth-child(odd)>th {
    background-color: rgba(255, 255, 255, 0.8);
}

.light-theme .table-striped>tbody>tr:nth-child(even)>td, .dark-theme .table-striped>tbody>tr:nth-child(even)>th {
    background-color: rgba(220, 220, 220, 0.4);
}

/**** Navbar ****/

.light-theme .navbar-app {
    background-color: rgba(255, 255, 255, 1);
}

.light-theme .navbar-brand {
    filter: brightness(0%);
}

.dark-theme .dropdown-menu {
    background-color: #fff;
}

.light-theme .navbar-app .navbar-nav input[type=text] {
    border: 2px solid black;
    color: rgba(0, 0, 0, 0.9);
}

.light-theme .navbar-app .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.9);
}

.light-theme .navbar-app .navbar-nav input[type=text]::placeholder {
    color: rgba(0, 0, 0, 0.8);
}

.light-theme .btn-dark-light-mode {
    color: rgba(255, 255, 255, 0);
    background-color: rgba(0, 0, 0, 1);
}

.light-theme .dark-light-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,4v16A5,5 40 1,1 12,4' stroke='white' stroke-width='1' fill='white'/%3E%3C/svg%3E ");
}

.light-theme .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/**** Cards ****/

.light-theme .card-app .card-header, .light-theme .card-app .card-body {
    background-color: white;
    color: black;
}

/**** Scrollbar ****/

.light-theme .cards-row-container {
    color-scheme: light;
}

/**** Search sidebar ****/

.light-theme .card-search {
    background-color: rgba(250, 250, 250, 0.8);
}

.light-theme .sidebar-search input[type=text], .light-theme .sidebar-search select {
    border: 2px solid rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 0.4);
    color: rgba(0, 0, 0, 1);
}

.light-theme .sidebar-search input[type=text]::placeholder {
    color: rgba(143, 122, 122, 0.8);
}

/**** Multirange ****/

.light-theme [slider] {
    background-color: rgba(250, 250, 250, 0.8);
    color: rgba(0, 0, 0, 0.92);
}

/**** Pagination ****/

.light-theme .pagination .page-item .page-link {
    background-color: #fff;
    color: #3490dc;
}

.light-theme .pagination .page-item.active .page-link {
    background-color: #3490dc;
    color: rgb(255, 255, 255);
}

/**** Search Sidebar ****/

@media screen and (max-width: 768px) {
    .light-theme .filter-container {
        background-color: white;
    }
}

/**** Player Show ****/

.player-general-container table {
    color: white;
}

/**** Compare Modal ****/

.light-theme .modal-content {
    background-color: #F0F0F0;
}

.light-theme .modal .compare-filter-container {
    background-color: white;
}

.light-theme .table-transpose th, .light-theme .table-transpose td {
    border: 1px solid black;
}

.light-theme .row-sticky {
    background-color: white;
}

/**********************************************************
|
| Dark theme
|
**********************************************************/

body.dark-theme {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.dark-theme a {
    color: #fff;
}

/**** Home ****/

.dark-theme .main-pes-logo {
    border: 2px solid #fff;
}

.dark-theme .main-options a {
    color: #fff;
}

.dark-theme .home-container.even {
    background-color: black;
}

.dark-theme .home-container.odd {
    background-color: rgb(35, 35, 35);
}

/**** Tables ****/

.dark-theme table {
    color: rgb(255, 255, 255);
}


.dark-theme .table-striped>thead>tr>th {
    background-color: rgb(25, 25, 25);
}

.dark-theme .table-striped>tbody>tr:nth-child(odd)>td, .dark-theme .table-striped>tbody>tr:nth-child(odd)>th {
    background-color: rgb(0, 0, 0);
}

.dark-theme .table-striped>tbody>tr:nth-child(even)>td, .dark-theme .table-striped>tbody>tr:nth-child(even)>th {
    background-color: rgb(25, 25, 25);
}

.dark-theme .table-striped td, .dark-theme .table-striped th {
    border-bottom: 1px solid rgb(66, 66, 66);
    border-top: 1px solid rgb(66, 66, 66);
}


/*--------------------------------------------------------------*/
/* table-striped stops hover so using the below css instead
/*--------------------------------------------------------------*/

.player-search-table  tr:nth-child(even) td:first-child {
    background:#000000
}
.player-search-table  tr:nth-child(odd) td:first-child {
    background:#1a1a1a
}

.dark-theme .player-compare-table td:nth-of-type(odd),.dark-theme .player-compare-table th:nth-of-type(odd){
    background-color: #000000;
}

.dark-theme .player-compare-table td:nth-of-type(even),.dark-theme .player-compare-table th:nth-of-type(even){
    background-color: #000000;
}

.dark-theme .player-search-table tr:nth-child(odd){
    background-color: #1a1a1a;
}

.dark-theme .player-search-table th, .dark-theme .player-search-table tr:nth-child(even){
    background-color: #000000;
}

.dark-theme .player-search-table td, .dark-theme .player-search-table th {
    border-bottom: 1px solid rgb(66, 66, 66);
   /* border-top: 1px solid rgb(66, 66, 66);*/
    border: 1px solid rgb(44, 44, 44);
    /*border-right: solid 1px rgb(36, 36, 36);
    border-left: solid 1px rgb(36, 36, 36);*/
}

.table_data_container #table-search-players tr:hover{
    background-color: #525252;
}

.table_data_container #table-search-players tr:hover td:first-child{
    background-color: #525252;
}

/**** Navbar ****/

.dark-theme .navbar-app {
    background-color: rgb(0, 0, 0);
}

.dark-theme .navbar-brand {
    filter: brightness(100%);
}

.dark-theme .dropdown-menu {
    background-color: #2D2D2D;
}

.dark-theme .navbar-dark {
    background-color: rgb(0, 0, 0);
}

.dark-theme .navbar-app .navbar-nav input[type=text] {
    border: 2px solid white;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
}

.dark-theme .navbar-app .navbar-nav select {
    background-color: rgb(0, 0, 0);
}

.dark-theme .navbar-app .navbar-nav .nav-link {
    /*color: rgb(255, 255, 255);*/
}

.dark-theme .navbar-app .navbar-nav input[type=text]::placeholder {
    color: rgb(255, 255, 255);
}

.dark-theme .btn-dark-light-mode {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.dark-theme .dark-light-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12,4v16A5,5 40 0,0 12,4' stroke='black' stroke-width='1' fill='black'/%3E%3C/svg%3E");
}

.dark-theme .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/**** Cards ****/

.dark-theme .card-app .card-header, .dark-theme .card-app .card-body {
    background-color: rgb(20, 20, 20);
    color: white;
}

/**** Scrollbar ****/

.dark-theme .cards-row-container {
    color-scheme: dark;
}

/**** Search sidebar ****/

.dark-theme .card-search {
    background-color: rgb(45, 45, 45);
}

.dark-theme .sidebar-search input[type=text], .dark-theme .sidebar-search select {
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
}

.dark-theme .sidebar-search input[type=text]::placeholder {
    color: rgb(255, 255, 255);
}

/**** Multirange ****/

.dark-theme [slider] {
    background-color: rgba(45, 45, 45, 0.8);
    color: rgba(255, 255, 255, 0.92);
}

/**** Buttons ****/
.dark-theme .dark-button{
    color: #ffffff;
    background-color: rgb(27, 27, 27);
    border-color: rgb(97, 97, 97);
}

.dark-theme .btn-one, .dark-theme .btn-two {
    background-color: rgb(54, 54, 54);
    color: white;
}

.dark-theme .btn-one:not(:disabled):not(.disabled):active, .dark-theme .btn-one:not(:disabled):not(.disabled).active {
    background-color: rgb(100, 62, 253);
    color: white;
}

/**** Pagination ****/

.dark-theme .pagination .page-item .page-link {
    background-color: rgb(25, 25, 25);
    color: rgb(255, 255, 255);
}

.dark-theme .pagination .page-item.active .page-link {
    background-color: #3490dc;
    color: rgb(255, 255, 255);
}

/**** Search Sidebar ****/

@media screen and (max-width: 768px) {
    .dark-theme .filter-container {
        background-color: black;
    }
}

/**** Compare Modal ****/

.dark-theme .modal-content {
    background-color: #2D2D2D;
}

.dark-theme .modal .compare-filter-container {
    background-color: black;
}

.dark-theme .table-transpose th, .dark-theme .table-transpose td {
    border: 1px solid rgb(73, 73, 73);
}

.dark-theme .row-sticky {
    background-color: #181818;
}

/************** Responsive Pagination ************************/

.pagination{
    margin: 0px;
}

@media screen and ( max-width: 1020px ){

    li.page-item {

        display: none;
    }

    .page-item:first-child,
    .page-item:last-child,
    .page-item.active {

        display: block;
    }
}

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

    li.page-item,
    .page-item:first-child,
    .page-item:last-child,
    .page-item.active {

        display: block;
    }
}

@media screen and ( max-width: 700px ){

    li.page-item {

        display: none;
    }

    .page-item:first-child,
    .page-item:last-child,
    .page-item.active {

        display: block;
    }
}

/************** Loading Indicator ************************/

.filtered-container .loading-icon{
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: rgba(0, 0, 0, 0.5); 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 9; 
    width: 100%; 
    height: 100%;
}

/*!
 * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
 * Copyright 2015 Daniel Cardoso <@DanielCardoso>
 * Licensed under MIT
 */
 .la-ball-running-dots,
 .la-ball-running-dots > div {
     position: relative;
     -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
             box-sizing: border-box;
 }
 .la-ball-running-dots {
     display: block;
     font-size: 0;
     color: #fff;
 }
 .la-ball-running-dots.la-dark {
     color: #333;
 }
 .la-ball-running-dots > div {
     display: inline-block;
     float: none;
     background-color: currentColor;
     border: 0 solid currentColor;
 }
 .la-ball-running-dots {
     width: 10px;
     height: 10px;
 }
 .la-ball-running-dots > div {
     position: absolute;
     width: 10px;
     height: 10px;
     margin-left: -25px;
     border-radius: 100%;
     -webkit-animation: ball-running-dots-animate 2s linear infinite;
        -moz-animation: ball-running-dots-animate 2s linear infinite;
          -o-animation: ball-running-dots-animate 2s linear infinite;
             animation: ball-running-dots-animate 2s linear infinite;
 }
 .la-ball-running-dots > div:nth-child(1) {
     -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
          -o-animation-delay: 0s;
             animation-delay: 0s;
 }
 .la-ball-running-dots > div:nth-child(2) {
     -webkit-animation-delay: -.4s;
        -moz-animation-delay: -.4s;
          -o-animation-delay: -.4s;
             animation-delay: -.4s;
 }
 .la-ball-running-dots > div:nth-child(3) {
     -webkit-animation-delay: -.8s;
        -moz-animation-delay: -.8s;
          -o-animation-delay: -.8s;
             animation-delay: -.8s;
 }
 .la-ball-running-dots > div:nth-child(4) {
     -webkit-animation-delay: -1.2s;
        -moz-animation-delay: -1.2s;
          -o-animation-delay: -1.2s;
             animation-delay: -1.2s;
 }
 .la-ball-running-dots > div:nth-child(5) {
     -webkit-animation-delay: -1.6s;
        -moz-animation-delay: -1.6s;
          -o-animation-delay: -1.6s;
             animation-delay: -1.6s;
 }
 .la-ball-running-dots > div:nth-child(6) {
     -webkit-animation-delay: -2s;
        -moz-animation-delay: -2s;
          -o-animation-delay: -2s;
             animation-delay: -2s;
 }
 .la-ball-running-dots > div:nth-child(7) {
     -webkit-animation-delay: -2.4s;
        -moz-animation-delay: -2.4s;
          -o-animation-delay: -2.4s;
             animation-delay: -2.4s;
 }
 .la-ball-running-dots > div:nth-child(8) {
     -webkit-animation-delay: -2.8s;
        -moz-animation-delay: -2.8s;
          -o-animation-delay: -2.8s;
             animation-delay: -2.8s;
 }
 .la-ball-running-dots > div:nth-child(9) {
     -webkit-animation-delay: -3.2s;
        -moz-animation-delay: -3.2s;
          -o-animation-delay: -3.2s;
             animation-delay: -3.2s;
 }
 .la-ball-running-dots > div:nth-child(10) {
     -webkit-animation-delay: -3.6s;
        -moz-animation-delay: -3.6s;
          -o-animation-delay: -3.6s;
             animation-delay: -3.6s;
 }
 .la-ball-running-dots.la-sm {
     width: 4px;
     height: 4px;
 }
 .la-ball-running-dots.la-sm > div {
     width: 4px;
     height: 4px;
     margin-left: -12px;
 }
 .la-ball-running-dots.la-2x {
     width: 20px;
     height: 20px;
 }
 .la-ball-running-dots.la-2x > div {
     width: 20px;
     height: 20px;
     margin-left: -50px;
 }
 .la-ball-running-dots.la-3x {
     width: 30px;
     height: 30px;
 }
 .la-ball-running-dots.la-3x > div {
     width: 30px;
     height: 30px;
     margin-left: -75px;
 }
 /*
  * Animation
  */
 @-webkit-keyframes ball-running-dots-animate {
     0%,
     100% {
         width: 100%;
         height: 100%;
         -webkit-transform: translateY(0) translateX(500%);
                 transform: translateY(0) translateX(500%);
     }
     80% {
         -webkit-transform: translateY(0) translateX(0);
                 transform: translateY(0) translateX(0);
     }
     85% {
         width: 100%;
         height: 100%;
         -webkit-transform: translateY(-125%) translateX(0);
                 transform: translateY(-125%) translateX(0);
     }
     90% {
         width: 200%;
         height: 75%;
     }
     95% {
         width: 100%;
         height: 100%;
         -webkit-transform: translateY(-100%) translateX(500%);
                 transform: translateY(-100%) translateX(500%);
     }
 }
 @-moz-keyframes ball-running-dots-animate {
     0%,
     100% {
         width: 100%;
         height: 100%;
         -moz-transform: translateY(0) translateX(500%);
              transform: translateY(0) translateX(500%);
     }
     80% {
         -moz-transform: translateY(0) translateX(0);
              transform: translateY(0) translateX(0);
     }
     85% {
         width: 100%;
         height: 100%;
         -moz-transform: translateY(-125%) translateX(0);
              transform: translateY(-125%) translateX(0);
     }
     90% {
         width: 200%;
         height: 75%;
     }
     95% {
         width: 100%;
         height: 100%;
         -moz-transform: translateY(-100%) translateX(500%);
              transform: translateY(-100%) translateX(500%);
     }
 }
 @-o-keyframes ball-running-dots-animate {
     0%,
     100% {
         width: 100%;
         height: 100%;
         -o-transform: translateY(0) translateX(500%);
            transform: translateY(0) translateX(500%);
     }
     80% {
         -o-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
     }
     85% {
         width: 100%;
         height: 100%;
         -o-transform: translateY(-125%) translateX(0);
            transform: translateY(-125%) translateX(0);
     }
     90% {
         width: 200%;
         height: 75%;
     }
     95% {
         width: 100%;
         height: 100%;
         -o-transform: translateY(-100%) translateX(500%);
            transform: translateY(-100%) translateX(500%);
     }
 }
 @keyframes ball-running-dots-animate {
     0%,
     100% {
         width: 100%;
         height: 100%;
         -webkit-transform: translateY(0) translateX(500%);
            -moz-transform: translateY(0) translateX(500%);
              -o-transform: translateY(0) translateX(500%);
                 transform: translateY(0) translateX(500%);
     }
     80% {
         -webkit-transform: translateY(0) translateX(0);
            -moz-transform: translateY(0) translateX(0);
              -o-transform: translateY(0) translateX(0);
                 transform: translateY(0) translateX(0);
     }
     85% {
         width: 100%;
         height: 100%;
         -webkit-transform: translateY(-125%) translateX(0);
            -moz-transform: translateY(-125%) translateX(0);
              -o-transform: translateY(-125%) translateX(0);
                 transform: translateY(-125%) translateX(0);
     }
     90% {
         width: 200%;
         height: 75%;
     }
     95% {
         width: 100%;
         height: 100%;
         -webkit-transform: translateY(-100%) translateX(500%);
            -moz-transform: translateY(-100%) translateX(500%);
              -o-transform: translateY(-100%) translateX(500%);
                 transform: translateY(-100%) translateX(500%);
     }
 }