:root {
    --bg-color: #0D1013;
    --white-color: #FDFEFE;
    --match-card-color: #121517;
    --live-bg-color: #007231;
    --match-card-border-color: #202526;
    --footer-bg-color: #121517;
    --foter-border-color: #202526;
    --page-bg-color: #F4F6F9;
    --login-body-color: #FFFFFF;
    --login-title-color: #343A40;
    --login-input-bg-color: #F4F6F9;
    --login-input-border-color: #343A40;
    --login-input-text-color: #1D1D1B;
    --login-btn-bg-color: #343A40;
    --login-btn-bg-hover-color: #262d33;
    --login-btn-text-color: #FFFFFF;
    --menu-bg-color: #343A40;
    --nav-bg-color: #FFFFFF;
    --nav-text-color: #BBBBBB;
    --nav-user-text-color: #717070;
    --menu-stick-color: #424A51;
    --menu-user-border-color: #424A51;
    --menu-text-color: #E3E3E3;
    --menu-hover-color: #2a3035;
    --link-blue-color: #8BB7FC;
    --link-grey-color: #BBBBBB;
    --table-border-color: #707070;
    --table-title-stick-color: #c7c7c7;
    --table-extract-btn-bg-color: #6C757D;
    --table-extract-btn-text-color: #F2F2F2;
    --table-search-text-color: #8B8B8B;
    --table-search-border-color: #8B8B8B;
    --table-delete-btn-border-color: #DC3142;
    --table-delete-btn-hover-bg-color: #ff9da7;
    --add-btn-text-color: #F6F6F6;
    --add-btn-bg-color: #1EA33C;
    --add-btn-hover-bg-color: #1C9838;
    --table-row-dark-bg-color: #e4e4e4;
    --table-records-text-color: #333333;
    --table-records-hover-text-color: #e5e5e5;
    --table-selected-page-bg-color: #007BFF;
    --table-selected-page-hover-bg-color: #036cdb;
    --table-unselected-page-hover-bg-color: #007BFF;
    --table-edit-btn-bg-color: #FFC107;
    --table-edit-btn-hover-bg-color: #eab105;
    --table-edit-btn-text-color: #756828;
    --popup-bg-color: #505050;
    --delete-popup-text-color: #8B8B8B;
    --delete-popup-btn-close-bg-color: #6C757D;
    --delete-popup-btn-close-hover-bg-color: #5e656c;
    --delete-popup-btn-delete-bg-color: #DC3545;
    --delete-popup-btn-delete-hover-bg-color:#cd3343;
    --delete-popup-btn-text-color: #F6F6F6;
    --popup-stick-bg-color: #e4e4e4;
    --white-color: #FFFFFF;
    --add-popup-title-bg-color: #1EA33C;
    --edit-popup-title-bg-color: #EEB200;
    --popup-input-text-color: #9CA1A6;
    --popup-input-border-color: #9CA1A6;
    --popup-add-btn-bg-color: #1EA33C;
    --popup-add-btn-hover-bg-color: #1C9838;
    --popup-edit-btn-bg-color: #FFC107;
    --popup-edit-btn-hover-bg-color: #eab105;
    --popup-edit-btn-text-color: #756828;
    --navigation-text-color: #E3E3E3;
    --navigation-btn-bg-color: #DC3545;
    --navigation-btn-bg-hover-color: #C8303F;
    --active-color: #63C48A;
    --passive-color: #C46363;
    --categories-bg-color: #25272D;
}

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

/* Web Css Settings */
.body-web {
    background-color: var(--bg-color);
    width: 100%;
    min-height: 100vh;
    height: auto;
    text-align: center;
}

.header {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    color: var(--white-color);
    padding: 1.5rem 0;
}

.header .title {
    margin-left: 6rem;
    position: relative;
    font-size: 2.75rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--white-color);
}

.menus {
    margin-right: 6rem;
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
}

.menus li h4 {
    position: relative;
    margin-right: 8rem;
    font-weight: 600;
    font-size: 1.25rem;
    cursor: pointer;
    padding: .25rem .75rem;
    transition: .2s all ease-in;
}

.menus li:last-child { margin-right: 0; }

.category-menu.visible {
    background-color: var(--categories-bg-color);
    border-radius: .5rem .5rem 0 0;
}

.menu-categories {
    position: absolute;
    z-index: 1;
    list-style: none;
    opacity: 0;
    transition: .2s all ease-in;
    padding: .5rem 3rem .5rem 1rem;
    border-radius: 0 0 .25rem .25rem;
}

.menu-categories li {
    text-align: start;
    position: relative;
    margin-top: .15rem;
}

.menu-categories li a {
    text-decoration: none;
    color: var(--white-color);
    transition: .2s all ease-in;
}

.menu-categories li a:hover {
    font-size: 1.1rem;
}

.menu-categories.visible {
    opacity: 1;
    background-color: var(--categories-bg-color);
}

.video-player {
    width: 90%;
    height: 50rem;
    position: relative;
    margin-top: 1.5rem;
    object-fit: fill;
}

.live-matches {
    width: 100%;
    margin-top: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-matches-body {
    width: 90%;
    text-align: start;
    color: var(--white-color);
}

.live-matches-body h2 {
    font-weight: 600;
    font-size: 2.35rem;
}

.live-matches-body ul {
    position: relative;
    list-style: none;
    margin-top: 1rem;
}

.match-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--match-card-color);
    padding: 2.25rem;
    border: .1rem solid var(--match-card-border-color);
}

.match-card h4 {
    font-size: 1.5rem;
    font-weight: 500;
}

.match-card h4:nth-child(2) {
    position: relative;
    background-color: var(--live-bg-color);
    padding: .25rem 1.5rem;
}

.match-card:first-child { border-radius: .5rem .5rem 0 0; }

.match-card:last-child { border-radius: 0 0 .5rem .5rem; }

.footer {
    position: relative;
    margin-top: 7rem;
    display: flex;
    justify-content: space-between;
    color: var(--white-color);
    border: .1rem solid var(--foter-border-color);
    padding: 4rem 6rem;
}

.maps h3, .categories h3 {
    font-size: 2rem;
    font-weight: 600;
}

.maps-list {
    list-style: none;
    position: relative;
    text-align: start;
    margin-top: 1.5rem;
}

.maps-list li {
    font-size: 1.25rem;
    position: relative;
    margin-top: 1rem;
    font-weight: 300;
    cursor: pointer;
    transition: .2s ease-in font-weight;
}

.maps-list li:hover { font-weight: 400; }

.maps-list li:first-child { margin-top: 0; }

.categories-body {
    display: flex;
    justify-content: space-between;
}

.categories-list {
    list-style: none;
    position: relative;
    text-align: start;
    margin-top: 1.5rem;
}

.categories-body .categories-list:last-child { margin-left: 5rem; }

.categories-list li {
    font-size: 1.25rem;
    position: relative;
    margin-top: 1rem;
    cursor: pointer;
}

.categories-list li:first-child { margin-top: 0; }

.categories { text-align: start; }

/* Web Css Settings */

/* ---------------------------------------------------------- */

/* Panel Css Settings */
.login-body {
    width: 100%;
    height: 100vh;
    background: var(--page-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form {
    width: 30rem;
    padding: 2.5rem 0;
    background-color: var(--login-body-color);
    text-align: center;
    border-radius: 3%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.login-form > h1 {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--login-title-color);
    position: relative;
    width: 70%;
    line-height: 1.25;
    transform: translateX(20%);
    margin-bottom: 1.5rem;
}

.login-form > input {
    width: 75%;
    background-color: var(--login-input-bg-color);
    border: .1rem solid var(--login-input-border-color);
    border-radius: .1rem;
    position: relative;
    margin-top: 1.25rem;
    padding: .5rem .35rem;
    color: var(--login-input-text-color);
    font-size: .9rem;
    font-weight: 600;
}

.multiline-text {
    width: 98%;
    padding: .5rem .35rem;
    height: 6rem;
    color: var(--popup-input-text-color);
    font-weight: 600;
}

.login-form > button {
    width: 45%;
    height: 3rem;
    border: none;
    background-color: var(--login-btn-bg-color);
    font-size: 1rem;
    font-weight: 600;
    color: var(--login-btn-text-color);
    border-radius: .35rem;
    position: relative;
    margin-top: 2.5rem;
    cursor: pointer;
    transition: .2s ease-in-out background-color;
}

.login-form > button:hover { background-color: var(--login-btn-bg-hover-color); }

.body {
    width: 100%;
    min-height: 100vh;
    height: 100%;
    background-color: var(--page-bg-color);
    display: flex;
}

.menu-body {
    width: 20%;
    flex: 0 1 20%;
    background-color: var(--menu-bg-color);
}

.content-body {
    width: 100%;
    min-height: 100vh;
    background-color: var(--page-bg-color);
}

.content-nav {
    width: 100%;
    height: 3.5rem;
    background-color: var(--nav-bg-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.content-nav-left {
    display: flex;
    align-items: center;
}

.content-nav-left > img {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    margin-left: 1.25rem;
    cursor: pointer;
}

.content-nav-left > h3 {
    font-size: 1rem;
    color: var(--nav-text-color);
    font-family: 500;
    position: relative;
    margin-left: 1.25rem;
}

.content-nav > h3 {
    font-size: 1rem;
    color: var(--nav-text-color);
    font-weight: 700;
}

.content-nav-right {
    display: flex;
    align-items: center;
}

.nav-user {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    object-fit: cover;
    border: .15rem solid var(--nav-user-text-color);
    cursor: pointer;
}

.content-nav-right > h4 {
    font-size: 1rem;
    color: var(--nav-user-text-color);
    position: relative;
    margin-left: .75rem;
    margin-right: .75rem;
    font-weight: 500;
}

.content-nav-right > a {
    text-decoration: none;
}

.content-nav-right > a > img {
    position: relative;
    margin-top: .25rem;
}

.nav-exit {
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    position: relative;
    margin-right: 1.25rem;
}

.menu-user {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 1.25rem;
    margin-top: 1.25rem;
}

.menu-user > img {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    border: .25rem solid var(--menu-user-border-color);
    object-fit: cover;
}

.menu-user > h3 {
    font-size: 1.25rem;
    color: var(--menu-text-color);
    font-size: 1.25rem;
    position: relative;
    margin-left: 1rem;
}

.menu-stick {
    position: relative;
    margin-top: 1rem;
    width: 90%;
    height: .4rem;
    background-color: var(--menu-stick-color);
    transform: translateX(5%);
}

.menu-body > ul {
    list-style: none;
    position: relative;
    margin-left: 1.25rem;
    margin-top: 1.5rem;
}

.menu-body > ul > li {
    width: 90%;
    display: flex;
    align-items: center;
    padding: .6rem .35rem;
    position: relative;
    margin-top: .4rem;
    cursor: pointer;
    transition: .2s ease-in-out background-color;
}

.menu-body > ul > li.selected { background-color: var(--menu-hover-color); }

.menu-body > ul > li:hover { background-color: var(--menu-hover-color); }

.menu-body > ul > li > a {
    width: 100%;
    text-decoration: none;
    color: var(--menu-text-color);
    font-weight: 500;
    display: flex;
    align-items: center;
}

.menu-body > ul > li > a > img {
    width: 1.75rem;
    height: 1.75rem;
    position: relative;
    margin-left: .5rem;
}

.menu-body > ul > li > a > h4 {
    font-size: 1.1rem;
    position: relative;
    margin-left: .85rem;
}

.navigation-exit {
    width: 88%;
    height: 2.7rem;
    background-color: var(--navigation-btn-bg-color);
    display: flex;
    align-items: center;
    margin-left: 1rem;
    margin-top: 3rem;
    border-radius: .25rem;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease-in-out all;
}

.navigation-exit > img {
    position: relative;
    margin-left: 1rem;
    width: 1.6rem;
    height: 1.6rem;
}

.navigation-exit > h4 {
    position: relative;
    color: var(--navigation-text-color);
    font-size: 1rem;
    margin-left: .9rem;
}

.navigation-exit:hover { background-color: var(--navigation-btn-bg-hover-color); }

.hide { display: none !important; }

.content-inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.links {
    display: flex;
    align-items: center;
    justify-content: end;
    position: relative;
    margin-top: 1rem;
    margin-right: 1.25rem;
    font-size: .85rem;
}

.link-first {
    color: var(--link-blue-color);
    cursor: pointer;
}

.link-last {
    position: relative;
    color: var(--link-grey-color);
    margin-left: .25rem;
}

.content-inner-body {
    width: 100%;
    max-height: 85vh;
    height: auto;
    position: relative;
    display: flex;
    margin-top: .35rem;
    overflow-y: auto;
}

.content-inner-body.horizontal {
    justify-content: center;
}

.content-inner-body.vertical {
    flex-direction: column;
    align-items: center;
    justify-content: baseline;
}

.content-table-border {
    width: 95%;
    max-height: 89%;
    height: auto;
    padding: 1rem;
    background-color: var(--white-color);
    border: .08rem solid var(--table-border-color);
    border-radius: .25rem;
    overflow-y: auto;
}

.content-table-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-table-title > h4 { font-size: .95rem; }

.content-table-title > button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .45rem .6rem;
    border: none;
    cursor: pointer;
    background-color: var(--add-btn-bg-color);
    transition: .2s ease-in-out all;
}

.content-table-title > button:hover { background-color: var(--add-btn-hover-bg-color); }

.content-table-title > button > h4 {
    font-size: .6rem;
    color: var(--add-btn-text-color);
    position: relative;
    margin-left: .35rem;
}

.content-table-title > button > img {
    width: .9rem;
    height: .9rem;
}

.content-table-title-stick { 
    position: relative;
    margin-top: .75rem;
    width: 100%;
    height: .15rem;
    background-color: var(--table-title-stick-color);
 }

 .content-table-property {
    position: relative;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
 }

 .content-table-extracts {
    width: fit-content;
    display: flex;
    align-items: center;
    padding: .4rem .6rem;
    font-size: .85rem;
    border-radius: .25rem;
    color: var(--table-extract-btn-text-color);
    background-color: var(--table-extract-btn-bg-color);
 }

.content-table-extracts > h4:nth-child(2) {
    position: relative;
    margin-left: 1.25rem;
}

.content-table-extracts > h4 {
    cursor: pointer;
    color: var(--table-extract-btn-text-color);
}

.content-table-search {
    display: flex;
    align-items: center;
}

.content-table-search > h4 {
    font-size: .9rem;
    color: var(--table-search-text-color);
}

.content-table-search > input {
    position: relative;
    margin-left: .5rem;
    width: 8.5rem;
    height: 1.5rem;
    border-radius: .15rem;
    padding: 0 .25rem;
    font-size: .8rem;
    border: .075rem solid var(--table-search-border-color);
}

table {
    position: relative;
    width: 100%;
    text-align: left;
    margin-top: 1rem;
    border-collapse: separate;
    border-collapse: collapse;
    overflow-x: auto;
    border: .1rem solid var(--table-border-color);
}

.td-buttons, .td-edit-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

th { 
    padding: .5rem .4rem; 
    font-size: 1rem;
}

td { 
    padding: .4rem;
    font-size: .9rem;
}

.td-btn-edit {
    width: 43%;
    height: 2.25rem;
    font-size: .75rem;
    cursor: pointer;
    font-weight: 600;
    border: none;
    text-decoration: none;
    color: var(--table-edit-btn-text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--table-edit-btn-bg-color);
    transition: .2s ease-in-out all;
}

.td-btn-edit:hover { background-color: var(--table-edit-btn-hover-bg-color); }

.td-btn-delete {
    position: relative;
    margin-left: .4rem;
    width: 43%;
    height: 2.25rem;
    cursor: pointer;
    border: .08rem solid var(--table-delete-btn-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: .2 ease-in-out all;
}

.td-btn-delete:hover { background-color: var(--table-delete-btn-hover-bg-color); }

.td-btn-delete > img {
    width: .9rem;
    height: .9rem;
    pointer-events: none;
}

.table-dark { background-color: var(--table-row-dark-bg-color); }

.content-table-records {
    position: relative;
    margin-top: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.content-table-records > h4 {
    font-size: .85rem;
    color: var(--table-records-text-color);
}

.content-table-pages {
    display: flex;
    align-items: center;
    font-size: .85rem;
    color: var(--table-records-text-color);
}

.pages {
    width: 4.5rem;
    height: 1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .2s ease-in-out all;
    border: .01rem solid var(--table-records-text-color);
}

.pages:hover { background-color: var(--table-records-hover-text-color); }

.page {
    height: 1.85rem;
    width: 1.75rem;
    background-color: transparent;
    color: var(--table-records-text-color);
    border: .01rem solid var(--table-records-text-color);
    font-size: .9rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .2s ease-in-out all;
    cursor: pointer;
}

.page:hover {
    color: var(--white-color);
    background-color: var(--table-unselected-page-hover-bg-color); 
}

.page.selected {
    background-color: var(--table-selected-page-bg-color);
    color: var(--white-color);
    border: none;
}

.page.selected:hover { background-color: var(--table-selected-page-hover-bg-color); }

.category-state {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.category-state.active { background-color: var(--active-color); }
.category-state.passive { background-color: var(--passive-color); }

.td-category-state {
    display: flex;
    align-items: center;
}

.td-category-state h4 {
    position: relative;
    margin-left: .5rem;
    margin-top: .05rem;
    color: var(--table-search-text-color);
}

.popup {
    width: 100%;
    min-height: 100vh;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: absolute;
    top: 0;
}

.popup-bg {
    width: 100%;
    min-height: 100vh;
    height: auto;
    background-color: var(--popup-bg-color);
    opacity: .55;
}

.popup-delete {
    width: 30rem;
    height: 16rem;
    text-align: center;
    position: absolute;
    background-color: var(--white-color);
}

.popup-delete > img {
    width: 4.5rem;
    height: 4.5rem;
    position: relative;
    margin-top: 1.5rem;
}

.popup-delete > h4 {
    position: relative;
    margin-top: 1.5rem;
    font-size: 1.15rem;
    color: var(--delete-popup-text-color);
}

.popup-stick {
    width: 95%;
    left: 0;
    transform: translateX(2.5%);
    height: .25rem;
    background-color: var(--popup-stick-bg-color);
}

.popup-buttons-form {
    position: relative;
    margin-top: 1.25rem;
    display: flex;
    padding: 0 3rem;
    align-items: center;
    justify-content: space-between;
}

.popup-btn {
    width: 8.5rem;
    height: 2.15rem;
    border: none;
    color: var(--delete-popup-btn-text-color);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.popup-btn-close { 
    background-color: var(--delete-popup-btn-close-bg-color);
    transition: .2s ease-in-out background;
}

.popup-btn-delete { 
    background-color: var(--delete-popup-btn-delete-bg-color);
    transition: .2s ease-in-out background;
}

.popup-btn-close:hover { background-color: var(--delete-popup-btn-close-hover-bg-color); }

.popup-btn-delete:hover { background-color: var(--delete-popup-btn-delete-hover-bg-color); }

.popup-title {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    justify-content: space-between;
}

.popup-title.add { background-color: var(--add-popup-title-bg-color); }

.popup-title.edit { background-color: var(--edit-popup-title-bg-color); }

.popup-title > h3 {
    color: var(--white-color);
    font-size: 1.4rem;
    font-weight: 600;
}

.popup-title > img {
    width: 1rem;
    height: 1rem;
    position: relative;
    margin-top: -.5rem;
    cursor: pointer;
    transition: .2s ease-in-out scale;
}

.popup-title > img:hover { transform: scale(1.07); }

.popup-items {
    width: 100%;
    flex: 0 1 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-top: 1rem;
}

.popup-item {
    text-align: start;
    width: 45%;
    flex: 0 1 45%;
    padding: 0 1.25rem;
    position: relative;
}


.popup-item.single { width: 91%; }

.popup-margin-top { margin-top: 1rem; }

.popup-margin-stick-top { margin-top: 1.5rem; }

.popup-item > h4 {
    font-size: 1rem;
}

.popup-item > input {
    width: 93%;
    height: 2rem;
    position: relative;
    margin-top: .25rem;
    padding: 0 .5rem;
    color: var(--popup-input-text-color);
    font-weight: 600;
    border: .1rem solid var(--popup-input-border-color);
}

.popup-item > select {
    width: 101.5%;
    height: 2.25rem;
    position: relative;
    margin-top: .25rem;
    font-weight: 600;
    padding: 0 .5rem;
    color: var(--popup-input-text-color);
    border: .1rem solid var(--popup-input-border-color);
}

.popup-btn-add { 
    background-color: var(--popup-add-btn-bg-color);
    transition: .2s ease-in-out background;
}

.popup-btn-add:hover { background-color: var(--popup-add-btn-hover-bg-color); }

.popup-edit-user-body, .popup-edit-category-body {
    width: 27rem;
    height: 20.5rem;
    text-align: center;
    position: absolute;
    background-color: var(--white-color);
}

.popup-btn-edit { 
    background-color: var(--popup-edit-btn-bg-color);
    color: var(--popup-edit-btn-text-color);
    transition: .2s ease-in-out background;
}

.popup-btn-edit:hover { background-color: var(--popup-edit-btn-hover-bg-color); }

.popup-add-new-category {
    width: 27rem;
    height: 20.5rem;
    text-align: center;
    position: absolute;
    background-color: var(--white-color);
}

.popup-add-new-live {
    width: 27rem;
    height: 25rem;
    text-align: center;
    position: absolute;
    background-color: var(--white-color);
}

.popup-edit-live-body {
    width: 27rem;
    height: 25rem;
    text-align: center;
    position: absolute;
    background-color: var(--white-color);
}