/**
 * !Important note:
 *
 * * Every page have (#headToFoot) & (.profile-one)
 *
 * * #headToFoot make sure Responsive when the page (min-width: 576px) and also make center position
 *
 * * (.head-of-section) make sure all pages left and right margin 0, 12px
 *
 *  */

@import url("https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Ga+Maamli&family=Playwrite+FR+Moderne:wght@100..400&display=swap");

/* @import url('https://fonts.googleapis.com/css2?family=Ga+Maamli&family=Playwrite+FR+Moderne:wght@100..400&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Ga+Maamli&display=swap'); */

/* todo =****= FANT FAMILY IMPORTED =****=  */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Inter";
}

html,
body {
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
    background-color: var(--white-color);
}

body {
    background: var(--white-color) !important;
}

/**
  * !Important note:
  *
  * * primary-color, secondary-color
  *
  *
  * */

/* For WebKit browsers (Chrome, Brave, Safari) */

/* Width of the scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

/* Background of the track (scrollbar background) */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Scrollbar handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Scrollbar handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* For Firefox */
html {
    scrollbar-width: thin;
    /* Sets the width of the scrollbar to thin */
    scrollbar-color: #888 #f1f1f1;
    /* Sets the color of the scrollbar handle (#888) and track (#f1f1f1) */
}


#headToFoot {
    background-color: var(--white-color);
    min-height: 100%;
}

#Layer_1 .cls-1 {
    fill: var(--secondary-color);
}

/* todo =****= ALL CUSTOM BUTTON =****=  */

.myBtn {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 40px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    cursor: pointer;
}

.grayBtn {
    background-color: var(--alt-color) !important;
    color: var(--primary-button-text) !important;
}

.blueBtn {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
}

.redBtn {
    background-color: var(--secondary-color) !important;
    color: var(--secondary-button-text) !important;
}

.add-btn {
    border: none;
    width: 80px;
    padding: 0px 5px;
    height: 25px;
    font-size: 14px;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    text-transform: capitalize;
}

.remove-btn {
    border: none;
    width: 75px;
    height: 25px;
    font-size: 14px;
    border-radius: 4px;
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    transition: 0.3s;
    text-transform: capitalize;
}

.modal-content {
    background-color: var(--white-color);
    border: 1px solid var(--trans-border) !important;
}

.modal-content:not(.dark-mode) {
    background-color: var(--white-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

/* todo =****= INPUT NUMBER TYPE UP & DOWN KEY REMOVE =****=  */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* todo =****= forBackground is to determine the background white neither all pages background (#f8f8f8) =****=  */

#forBackground {
    /* background-color: var(--white-color) !important;  */
}

/* todo =****= Its class is to determine the margins on both sides =****=  */

.head-of-section {
    margin: 0px 12px !important;
    padding-bottom: 10px;
}

/* ! =****= PROFILE PAGE =****=  */
.bg_gray {
    background-color: var(--bg-gray);
}

.profile-one {
    width: 100%;
    padding: 0px 0px;
    position: relative;
}

.profile-one .head {
    position: relative;
}

.profile-one .head img {
    width: 100%;
}

.profile-one .head .cover-photo-btn {
    position: absolute;
    right: 10px;
    top: 20px;
    border: none;
    border-radius: 4px;
    width: 130px;
    height: 26px;
    font-size: 12px;
    text-transform: capitalize;
    color: var(--text-color);
    background-color: var(--white-color);
}

.profile-one .head .cover-photo-btn i {
    padding-right: 6px;
    font-size: 12px;
    color: var(--text-color);
}

/* todo =****= NAME SECTION =****=  */

.name-section {
    padding-top: 10px;
    display: flex;
    height: 70px;
    justify-content: space-between;
}

.name-section .name {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--head-text);

    font-weight: bold;
}

.name-section .title {
    font-size: 16px;
    text-transform: capitalize;
    color: var(--text-color);
}

.name-section .right .profile-pic {
    height: 90px;
    width: 90px;
    position: relative;
    top: -50px;
    left: 0;
}

.name-section .right .img {
    height: 85px;
    width: 85px;
    background-color: var(--white-color);
    border-radius: 50%;
    text-align: center;
    border: 3px solid #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.name-section .right .img img {
    object-fit: cover;
    height: 100%;
}

.name-section .right .profile-pic i {
    position: absolute;
    left: -8px;
    bottom: 22px;
    background-color: var(--white-color);
    height: 24px;
    width: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 12px;
}

/* todo =****= GAME-HISTORY-SECTION =****=  */

.game-history {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 5px;
}

.game-history .game-title {
    margin-bottom: 15px;
    margin-top: 5px;
}

.game-history .left {
    position: relative;
    left: -2px;
    text-align: center;
    border: none;
    text-decoration: none;
    cursor: pointer;
    background-image: url("../assets/history-bg-big.svg");
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border-color);
    height: 110px;
    padding: 0;
    width: 125px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.game-history .left .history {
    position: absolute;
    color: #fff;
    top: -20px;
    left: 10px;
    z-index: 258;
    line-height: 5px;
    text-align: center;
}

.game-history .left .history img {
    height: 80px;
}

.game-history .left img {
    width: 100%;
    height: 100%;
    position: relative;
    left: 0px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.game-history .total-following,
.game-history .total-follower {
    font-weight: 700;
    font-size: 18px;
    color: var(--head-text);
    /* padding-left: 15px; */
    text-align: center;
    line-height: 0px;
    cursor: pointer;
    margin-bottom: 15px;
}

.game-history .follower-btn {
    font-size: 16px;
    padding: 1px 10px;
    border-radius: 4px;
    color: var(--text-color);
    border: none;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
}

.game-history .following-btn {
    font-size: 16px;
    padding: 1px 12px;
    border-radius: 4px;
    color: var(--text-color);
    background-color: var(--white-color);
    border: none;
    border: 1px solid var(--border-color);
}

/* todo =****= UPCOMING GAME SECTION =****=  */

.upcoming-game .head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.upcoming-game .head h4 {
    text-transform: capitalize;
    color: var(--head-text);
    font-size: 18px;
    font-weight: bold;
}

.upcoming-game .left {
    display: flex;
    gap: 8px;
}

.upcoming-game .left .count {
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    font-size: 14px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border-radius: 50%;
    margin-top: 2px;
}

.upcoming-game .head .right .view-btn {
    height: 22px;
    width: 68px;
    border-radius: 3px;
    line-height: 20px;
    color: var(--text-color);
    border: none;
    font-size: 14px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
}

.upcoming-game .swiper {
    height: 100%;
    padding: 5px 0px;
}

.swiper {
    overflow: clip;
}

.upcoming-game .swiper-slidecustom {
    text-align: center;
    font-size: 18px;
    background: var(--card-bg);
    display: flex;
    width: 155px !important;
    height: 100px !important;
    /* margin-left: 0px; */
    justify-content: space-between;
    flex-direction: column;
    padding-top: 4px;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.upcoming-game .single {
    text-align: center;
    align-items: center;
    width: 105px !important;
}

.upcoming-game .swiper-slidecustom .head {
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: center;
    height: 20%;
    color: var(--text-color);
    text-transform: capitalize;
}

.upcoming-game .swiper-slidecustom .body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 10px;
    /* margin-top: 5px; */
}

.upcoming-game .swiper-slidecustom .body img {
    width: 37px;
    height: 37px;
    border-radius: 50%;
    object-fit: cover;
}

.upcoming-game .swiper-slidecustom .body .center {
    border-radius: 0;
}

.upcoming-game .swiper-slidecustom .body .center img {
    border-radius: 0px;
}

.upcoming-game .swiper-slidecustom .body .center svg {
    width: 20px;
    border-radius: 0;
}

.upcoming-game .swiper-slidecustom .foot .date p {
    text-transform: capitalize;
    color: var(--text-color);
    font-size: 14px;
    padding-top: 5px;
    margin: 0;
    padding-bottom: 3px;
}

/* todo =****= EDIT & SHARE PROFILE BUTTON =****=  */

.btn-section {
    display: flex;
    gap: 10px;
    margin: 13px 0px;
}

.btn-section .edit-pro-btn {
    background-color: var(--white-color);
    border-radius: 4px;
    width: 140px;
    height: 38px;
    text-transform: capitalize;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0px;
    transition: 0.3s;
    border: none;
    border: 1px solid var(--border-color);
}

/* .btn-section .edit-pro-btn:hover {
   background-color: var(--primary-color);
   color: var(--white-color);
   transition: 0.3s;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   -ms-transition: 0.3s;
   -o-transition: 0.3s;
 } */

/* .btn-section .edit-pro-btn:hover svg path,
 .share-pro-btn:hover svg path {
   fill: var(--white-color);
   transition: 0.3s;
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   -ms-transition: 0.3s;
   -o-transition: 0.3s;
 } */

.btn-section .edit-pro-btn svg,
.share-pro-btn svg {
    margin-right: 3px;
}

.btn-section .edit-pro-btn svg path,
.share-pro-btn svg path {
    fill: var(--text-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.btn-section .share-pro-btn {
    border: transparent;
    background-color: var(--white-color);
    border-radius: 4px;
    width: 160px;
    height: 38px;
    text-transform: capitalize;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0px;
    transition: 0.3s;
    border: 1px solid var(--border-color);
}

/* .btn-section .share-pro-btn:hover {
   background-color: var(--primary-color);
   color: var(--white-color);
   transition: 0.3s;
 } */

.active {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
    border: 1px solid transparent !important;
}

.active svg path {
    fill: var(--primary-button-text) !important;
}

/* todo =****= SHARE PROFILE MODAL =****=  */

.myAnimation {
    animation: myAnimation 0.35s linear;
    -webkit-animation: myAnimation 0.35s linear;
    transition: 0.15s;
    -webkit-transition: 0.15s;
    -moz-transition: 0.15s;
    -ms-transition: 0.15s;
    -o-transition: 0.15s;
}

@keyframes myAnimation {
    0% {
        opacity: 0.5;
        transform: translateY(150px);
        -webkit-transform: translateY(150px);
        -moz-transform: translateY(150px);
        -ms-transform: translateY(150px);
        -o-transform: translateY(150px);
    }
}

#shareProfileModal .modal-dialog {
    padding: 0;
    margin: 0 auto;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 0;
}

#shareProfileModal .modal-content {
    width: 100%;
    min-height: 300px;
    border-radius: 8px 8px 0px 0px;
    -webkit-border-radius: 8px 8px 0px 0px;
    -moz-border-radius: 8px 8px 0px 0px;
    -ms-border-radius: 8px 8px 0px 0px;
    -o-border-radius: 8px 8px 0px 0px;
    margin: 0;
    padding: 0;
}

#shareProfileModal .modal-body .heading {
    display: flex;
    gap: 10px;
    align-items: center;
}

#shareProfileModal .modal-body .heading .img {
    height: 50px;
    width: 50px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#shareProfileModal .modal-body .heading .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#shareProfileModal .modal-body .heading .name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

#shareProfileModal .modal-body {
    padding: 10px;
    padding-bottom: 0;
    border: none;
}

#shareProfileModal .modal-body .text {
    margin: 10px 0px;
}

#shareProfileModal .modal-body .text textarea {
    min-height: 80px;
    max-height: 150px;
    width: 100%;
    resize: none;
    padding: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--gray-bg);
    outline: none;
    color: var(--text-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#shareProfileModal .modal-body .text {
    display: block;
    text-align: right;
}

#shareProfileModal .modal-footer {
    border: none;
    margin: 0px;
    padding-top: 0;
}

#shareProfileModal .modal-footer .all-icons {
    width: 400px;
    overflow: hidden;
    /* overflow-x: scroll; */
    margin: 10px 0px;
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    white-space: nowrap;
    border: 1px solid var(--trans-border);
    background-color: var(--gray-bg);
}

#shareProfileModal .modal-footer .all-icons::-webkit-scrollbar {
    display: none;
}

#shareProfileModal .modal-footer .all-icons .icon-part {
    display: flex;
    white-space: nowrap;
    gap: 18px;
    width: 750px;
}

#shareProfileModal .modal-footer .box {
    height: 60px;
    width: 60px;
    background-color: var(--white-color);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    line-height: 56px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.shareIconSelect {
    border: 2px solid var(--primary-color) !important;
}

#shareProfileModal .shareBtn {
    padding: 8px 40px;
    border: none;
    width: 100%;
    border-radius: 4px;
    text-transform: capitalize;
    font-weight: 500;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

/* todo =****= PROFILE DASHBOARD =****=  */

.dashboard-section {
    min-height: 75px;
    background-color: var(--dashboard-bg);
    border-radius: 4px;
    line-height: 15px;
    padding: 10px;
}

.dashboard-section h4 {
    color: var(--head-text);
    text-transform: capitalize;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0.5rem;
}

.dashboard-section p {
    color: var(--text-color);
    /* text-transform: capitalize; */
    font-size: 14px;
}

/* todo =****= BIO SECTION =****=  */

.bio-section {
    margin-top: 12px;
    word-wrap: break-word;
}

.bio-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--head-text);
}

.bio-section p {
    font-family: inter;
    text-align: justify;
    font-size: 17px;
    padding-bottom: 30px;
    line-height: 22px;
    padding-top: 5px;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
}

.bio-read-more {
    color: var(--primary-color) !important;
    cursor: pointer;
}

.bio-more-text {
    display: none;
}

/* todo =****= FOLLOWERS SLIDER SECTION =****=  */

.follower-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--head-text);

    text-transform: capitalize;
}

.follower-section .swiper {
    width: 100%;
    margin-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid var(--border-color);
}

.follower-section .swiper-slidecustom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.follower-section .swiper a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
}

.follower-section .swiper .name {
    color: var(--text-color);
    font-size: 13px;
    text-transform: capitalize;
}

.cropi {
    background: var(--gray-bg) !important;
    height: 35px !important;
    width: 35px !important;
    padding: 3px !important;
    font-size: 22px !important;
}

.follower-section .border-part {
    height: 57px;
    width: 57px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

.follower-section .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 2px;
    top: 2px;
}

.follower-section .border-part .img-part img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* todo =****= MEDIA( PHOTOS, FRIEDNS, VIDEOS) BUTOTN =****=  */

.media-section .btn-section {
    display: flex;
    gap: 10px;
}

.media-section .btn-section .photos-btn {
    border: none;
    background-color: var(--white-color);
    color: var(--text-color);
    width: 105px;
    height: 35px;
    border-radius: 4px;
    text-transform: capitalize;
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.media-section .btn-section .videos-btn {
    border: none;
    background-color: var(--white-color);
    color: var(--text-color);
    width: 105px;
    height: 35px;
    font-weight: 600;
    text-transform: capitalize;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.media-section .btn-section .friends-btn {
    border: none;
    background-color: var(--white-color);
    color: var(--text-color);
    width: 105px;
    height: 35px;
    text-transform: capitalize;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.myStyle {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
    box-shadow: none;
    border: none !important;
}

/* todo =****= GALLERY SECTION (PHOTOS) =****=  */

.gallery-head .back-btn-section .right {
    width: 50%;
    display: flex;
}

.gallery-head .back-btn-section .right .add-btn {
    width: 100px;
    height: 30px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    line-height: 30px;
    text-transform: capitalize;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.profile-html-page .photos-section {
    display: none;
}

.photos-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--head-text);

    position: relative;
    top: 5px;
}

.photos-section .box {
    margin: 10px 0px;
}

.image-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.first {
    grid-area: first;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
}

.seven {
    grid-area: seven;
}

.eight {
    grid-area: eight;
}

.nine {
    grid-area: nine;
}

.image-box img {
    width: 100%;
    height: 114px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.videos-box {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

.videos-box .box {
    border-radius: 4px;
    height: 114px;
    overflow: hidden;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.videos-box .box video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#galleryPage .item {
    position: relative;
}

#galleryPage .cancel-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#galleryPage .cancel-btn svg circle {
    fill: #0e1727;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

#galleryPage .cancel-btn:hover svg path {
    transition: 0.2s;
    fill: var(--secondary-color);
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

#galleryImageModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#galleryImageModal .modal-content {
    width: 95%;
    border-radius: 6px;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

#galleryImageModal .modal-body {
    text-align: center;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

#galleryImageModal .edit-btn {
    width: 150px;
    padding: 0px 10px;
    border: none;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    text-transform: capitalize;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    height: 40px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#galleryImageModal .edit-btn svg path {
    fill: var(--primary-button-text);
}

#galleryImageModal .delete-btn {
    width: 150px;
    padding: 0px 10px;
    border: none;
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    text-transform: capitalize;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    height: 40px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#galleryImageModal .delete-btn svg path {
    fill: var(--secondary-button-text);
}

/* todo =****= LIGHTBOX =****=  */

#lightbox .lb-image {
    border: none;
}

/* todo =****= GALLERY SECTION (VIDEOS) =****=  */

.all-media-section .videos-section {
    display: none;
}

.videos-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--head-text);

    position: relative;
    top: 5px;
    text-transform: capitalize;
}

/* todo =****= GALLERY SECTION (FRIENDS) =****=  */

.all-media-section .friends-section {
    display: none;
}

.friends-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--head-text);

    position: relative;
    top: 5px;
    text-transform: capitalize;
}

.friends-section .box-all {
    margin: 10px 0px;
}

.friends-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* grid-template-rows: auto auto auto; */
    gap: 12px;
    /* grid-auto-flow: row; */
    /* grid-template-areas:
         "first two three"
         "four five six"; */
}

.friends-box .card {
    margin: 0;
    padding: 0;
    border: none;
    border: 1px solid var(--border-color);
    overflow: hidden;
    background-color: transparent !important;
}

.friends-box .card .card-head {
    margin: 0;
    padding: 0;
    /* border-radius: 4px; */
    position: relative;
    /* -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px; */
    height: 85px;
    width: 100%;
}

.friends-box .card .card-head img {
    /* border-radius: 4px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.friends-box .card .card-head .add-friend {
    position: absolute;
    height: 22px;
    width: 22px;
    background-color: #1a365780;
    border-radius: 50%;
    right: 4px;
    z-index: 1;
    top: 4px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.friends-box .card .card-head .add-friend .add-icon {
    position: relative;
    top: 4px;
    left: 6px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.friends-box .card .card-head .add-friend:hover {
    background-color: var(--primary-color);
}

.friends-box .card .card-head img {
    width: 100%;
}

.friends-box .card .card-body {
    padding: 5px;
    padding-bottom: 12px;
    background-color: var(--white-color);
}

.friends-box .card .card-body h6 {
    color: var(--head-text);
    font-size: 13px;
    margin-bottom: 3px;
    font-weight: normal;
}

.friends-box .card .card-body p {
    color: var(--primary-color);
    font-size: 12px;
    line-height: 16px;
}

.first {
    grid-area: first;
}

.two {
    grid-area: two;
}

.three {
    grid-area: three;
}

.four {
    grid-area: four;
}

.five {
    grid-area: five;
}

.six {
    grid-area: six;
}

.image-box img {
    width: 100%;
}

.see-all-btn {
    width: 100%;
    height: 38px;
    text-transform: capitalize;
    background-color: var(--primary-color);
    border-radius: 4px;
    border: none;
    transition: 0.3s;
    font-weight: 600;
    color: var(--primary-button-text);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

/* .see-all-btn:hover {
   color: var(--white-color) !important;
   transition: 0.3s;
   background-color: var(--primary-color);
   -webkit-transition: 0.3s;
   -moz-transition: 0.3s;
   -ms-transition: 0.3s;
   -o-transition: 0.3s;
 } */

/* ! =****= PROFILE TWO PAGE =****=  */

.btn-section .plus-following {
    border: none;
    padding: 7px 7px;
    background-color: var(--white-color);
    color: var(--text-color);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
    font-size: 16px;
    font-weight: 500;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.btn-section .invite {
    border: none;
    padding: 7px 24px;
    background-color: var(--white-color);
    color: var(--text-color);
    text-transform: capitalize;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 16px;
    transition: 0.3s;
    font-weight: 500;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.btn-section .invite span {
    padding-right: 5px;
}

.btn-section .contact {
    background-color: var(--white-color);
    border-radius: 4px;
    border: none;
    border: 1px solid var(--border-color);
    text-align: center;
    width: 55px;
    overflow: hidden;
    transition: 0.3s;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.btn-section .contact svg {
    border: none;
    width: 20px;
    height: 20px;
}

.btn-section .contact svg path {
    fill: var(--text-color);
}

/* This is custom class for button active  */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    z-index: 1000;
}

.no-scroll {
    overflow: hidden;
}

.plusStyle {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
    border: 1px solid var(--primary-color) !important;
}

.plusStyle svg path {
    fill: var(--primary-button-text) !important;
}

/* ! =****= ALL FRIENDS PAGE =****=  */

.each-friends .border-part {
    height: 55px;
    width: 55px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
}

.each-friends .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 1.5px;
    top: 1px;
}

.each-friends .border-part .img-part img {
    text-align: center;
    object-fit: cover;
    position: relative;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
}

.friends-details .each-friends {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.friends-details .each-friends .left {
    display: flex;
    align-items: center;
}

.friends-details .each-friends .left .profile-details p {
    line-height: 20px;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    text-transform: capitalize;
    color: var(--primary-color);
    font-size: 14px;
}

.friends-details .each-friends .left .profile-details .name {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    padding-left: 5px;
    color: var(--text-color);
}

.friends-details .each-friends .right {
    display: flex;
    gap: 0px;
    padding-top: 0px;
    align-items: center;
    justify-content: center;
    position: relative;
}

#friendSec .icon {
    cursor: pointer;
    width: 20px;
    padding-right: 3px;
    text-align: right;
}

#friendSec .icon svg circle {
    fill: var(--alt-color);
}

#friendSec .dropstart .dropdown-toggle::before {
    display: none;
}

#friendSec .dropdown-menu {
    min-width: 5rem;
    margin: 0;
    padding: 0;
}

#friendSec .dropdown-menu li {
    border-bottom: 1px solid var(--border-color) !important;
    padding: 3px 12px;
    color: var(--secondary-color);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

#friendSec .dropdown-menu li:hover {
    background-color: #f1f1f1;
}

#friendSec .dropdown-menu li:last-child {
    border: none;
}

/* ! --> FOR GALLERY HTML SECTION  --> */

.back-btn-section {
    display: flex;
    height: 45px;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    /* margin-bottom: 10px; */
    position: sticky;
    z-index: 777;
    top: 0;
    padding-left: 10px;
    justify-content: center;
    background-color: var(--white-color);
}

.back-btn-section .left {
    /* width: 10%; */
    text-align: center;
    height: 100%;
    line-height: 35px;
}

.menuBarLeft .left {
    width: 10% !important;
}

.back-btn-section .center {
    width: 80%;
    text-align: center;
    justify-content: center;
    font-weight: 610;
    font-size: 18px;
    margin-bottom: 0;
    color: var(--head-text);
    text-transform: capitalize;
}

.back-btn {
    background-color: var(--white-color);
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.join-chat-btn {
    padding: 0px 0px;
    height: 30px;
    width: 75px;
    border: none;
    margin: 0;
    border-radius: 4px;
    text-align: center;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    cursor: pointer;
    line-height: 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.back-btn:focus {
    background-color: var(--white-color);
}

.back-btn svg path {
    /* fill: var(--alt-color); */
}

.back-btn:focus svg path {
    fill: var(--primary-color);
}

.back-btn-section .right svg {
    width: 25px;
}

.back-btn-section .right svg path {
    fill: var(--alt-color);
}

/* ! --> FOR FOLLOWER HTML SECTION  --> */

.anchor-section {
    display: flex;
    gap: 0px 35px;
    margin-top: 8px;
    border-bottom: 1px solid var(--border-color);
    height: 40px;
}

.anchor-section p {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    text-transform: capitalize;
    cursor: pointer;
    padding: 8px;
    padding-right: 15px;
    padding-left: 0;
}

.anchor-section .active-follow {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: capitalize;
    cursor: pointer;
    padding: 8px;
    padding-right: 15px;
    padding-left: 0;
}

.active-follow {
    position: relative;
}

.active-follow::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: var(--primary-color);
    color: var(--primary-color) !important;
    left: 0;
    bottom: 0px;
    transition: 0.3s;
}

.follower-html {
    min-height: 100vh;
}

.follower-html h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--head-text);

    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.each-followers .border-part {
    height: 56px;
    width: 56px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

.each-followers .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 2px;
    top: 2px;
}

.each-followers .border-part .img-part img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.follower-details .each-followers {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
}

.each-followers .follow-link {
    font-size: 14px;
    color: var(--primary-color);
    margin-left: 3px;
    cursor: pointer;
    font-weight: normal;
}

#removeModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#removeModal .modal-content {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#removeModal .modal-body {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    padding: 10px;
}

#removeModal .modal-body .img {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#removeModal .modal-body .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#removeModal .modal-body .name {
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 500;
}

#removeModal .modal-footer {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#removeModal .modal-footer .removeBtn,
#removeModal .modal-footer .blockBtn {
    width: 80%;
    height: 35px;
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    border: none;
    text-transform: capitalize;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#removeModal .modal-footer .cancelBtn {
    width: 80%;
    height: 35px;
    background-color: var(--alt-color);
    color: #ffffff;
    border: none;
    text-transform: capitalize;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#removeModal .modal-body .cancelBtn {
    position: absolute;
    right: 10px;
    top: 10px;
}

#removeModal .modal-footer .all-btn {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

#removeModal .modal-footer .all-btn button {
    width: 80%;
    padding: 10px;
    border: none;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin-top: 5px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#removeModal .modal-footer button svg {
    margin-right: 5px;
}

#removeModal .modal-footer button svg path {
    fill: var(--alt-color);
}

#removeModal .modal-body button .name {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    text-transform: uppercase;
}

#removeModal .modal-body button .person-name {
    color: var(--primary-color);
    font-size: 15px;
    margin-left: 5px;
}

.follower-details .each-followers .left {
    display: flex;
    align-items: center;
}

.follower-details .each-followers .left .profile-details p {
    line-height: 20px;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    text-transform: capitalize;
    color: var(--alt-color);
    font-size: 14px;
}

.follower-details .each-followers .left .profile-details .name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    padding-left: 5px;
    color: var(--text-color);
}

.follower-details .each-followers .right {
    display: flex;
    gap: 0px 10px;
    justify-content: center;
    align-items: center;
}

.follower-details .each-followers .right .icon {
    cursor: pointer;
    width: 15px;
    text-align: right;
}

#following .sort-by {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

#following .sort-by .sort-icon {
    padding-top: 8px;
    cursor: pointer;
}

.each-followers .following-btn {
    width: 80px;
    border: none;
    height: 25px;
    font-size: 14px;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
}

/* .each-followers .following-btn:hover {
   background-color: var(--primary-color);
   color: var(--white-color);
   transition: 0.3s;
   border: 1px solid transparent;
 } */

/* todo --> REVIEWS-SECTION   --> */

.reviews-section {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.reviews-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--head-text);
}

.review-container {
    display: flex;
    flex-direction: column;
}

.review-item {
    display: flex;
    align-items: center;
    margin: 0;
    height: 22px;
}

.rating-number {
    width: 15px;
    text-align: left;
    margin-right: 0px;
    font-weight: normal;
    color: var(--text-color);
}

.rating-bar {
    width: 180px;
    height: 7px;
    background-color: #e0e0e0;
    border-radius: 5px;
}

.rating-progress {
    height: 100%;
    background-color: var(--rating-color);
    border-radius: 10px;
    margin-left: 0;
}

.review-count {
    margin-left: 10px;
    margin-top: 4px;
    margin-right: 0px;
    color: var(--text-color);
    font-size: 14px;
}

.overall-rating {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    margin-left: 5px;
    color: var(--text-color);
}

.overall-rating span {
    color: var(--rating-color);
    font-size: 15px;
}

.review-text {
    text-align: left;
    font-size: 13px;
    margin-left: 10px !important;
    color: var(--text-color);
}

.review-item .persent {
    font-size: 18px;
    font-weight: 610;
}

/* todo --> TOTAL-REVIEWS-SECTION   --> */

.total-reviews-section {
    margin-top: 5px;
}

.total-reviews-section h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--head-text);
    margin-bottom: 0;
}

.total-reviews-section .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-reviews-section .dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.total-reviews-section .dropdown ul li {
    position: relative;
    display: inline-block;
    padding: 8px;
    color: var(--alt-color);
    cursor: pointer;
    text-transform: capitalize;
}

.total-reviews-section .dropdown .sublist {
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 1;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
}

.total-reviews-section .dropdown .sublist li {
    padding: 5px;
    color: var(--alt-color);
    cursor: pointer;
    text-align: center;
    padding-left: 5px !important;
    font-size: 16px;
    position: relative;
    left: 4px;
    border-bottom: 1px solid #798ca460;
    text-transform: capitalize;
}

.total-reviews-section .dropdown .sublist li:last-child {
    border-bottom: none;
}

/* todo --> Comment-post-SECTION   --> */

.post {
    background-color: var(--white-color);
    border-radius: 4px;
    padding-bottom: 5px;
    margin-bottom: 12px;
    position: relative;
    margin-top: 5px;
}

.header {
    display: flex;
    gap: 0px;
}

.header img {
    height: 25px;
    width: 25px;
    border-radius: 50%;
}

.header .info {
    margin-bottom: 5px;
    line-height: 20px;
    padding-left: 10px;
}

.header .info .name {
    margin: 0;
    color: var(--head-text);
    font-size: 16px;
    font-weight: bold;
}

.header .info .game-name {
    color: var(--primary-color);
    margin-bottom: 0;
}

.header .info p {
    margin-bottom: 0;
    margin: 0 !important;
    padding: 0;
    font-size: 15px;
    color: var(--text-color);
}

.header .info .team-name {
    color: var(--text-color);
    margin-top: 5px;
}

.header .stars {
    display: flex;
    align-items: center;
    color: var(--rating-color);
    margin-top: 5px;
    gap: 5px;
    justify-content: space-between;
}

.header .stars .star {
    display: inline-block;
    font-size: 22px !important;
}

.header .stars .breaker {
    color: var(--text-color);
}

.header .date {
    font-size: 13px;
    color: var(--text-color);
    position: absolute;
    right: 10px;
    padding-top: 20px;
}

.header .weeks {
    font-size: 13px;
    color: var(--text-color);
    position: relative;
    left: 5px;
}

.first-content {
    padding-left: 35px;
}

.first-content p {
    text-align: justify;
    line-height: 20px;
    font-size: 16px;
    padding-right: 7px;
    padding-top: 5px;
    color: var(--text-color);
}

.read-more {
    color: var(--primary-color) !important;
    cursor: pointer;
}

.post .more-text {
    display: none;
}

.post .comment {
    display: flex;
    align-items: center;
    padding-top: 0px;
    padding-left: 35px;
    margin-right: 0;
}

.post .comment .name {
    margin: 0;
    color: var(--head-text);
    font-size: 16px;
    font-weight: bold;
    margin-left: 5px;
    padding-left: 5px;
}

.post .comment img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
}

.post .comment p {
    line-height: 1.6;
    color: #444;
    margin-bottom: 0;
}

.post .more-text {
    display: none;
}

.post .read-more {
    color: var(--primary-color) !important;
    cursor: pointer;
}

.post .comment-content {
    padding-left: 70px;
}

.post .comment-content p {
    color: var(--text-color);
}

.hidden-post {
    display: none;
}

.visible-post {
    display: block;
    transition: opacity 0.3s ease-in-out;
}

/* todo --> MENU-BAR-SECTION   --> */

.menu-section {
    position: sticky !important;
    bottom: 0;
    width: 100%;
    /* background-color: var(--white-color); */
    z-index: 999;
    max-width: 100%;
    /* margin: 0 auto !important; */
    left: 0px;
    /* transform: translateX(-50%); */
    /* padding-bottom: var(--safe-bottom, 0); */
    /* will-change: transform; */
    /* backface-visibility: hidden; */
    /* bottom: var(--safe-bottom, 0); */
}

/* .menu-section {
    position: fixed;
    inset: auto 0 0 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--white-color);
    z-index: 999;
    padding-bottom: env(safe-area-inset-bottom);
  } */

@media screen and (min-width: 576px) {
    .menu-section {
        max-width: 434px;
        left: 0px;
        /* transform: translateX(-50%); */
    }
}


/* @media screen and (min-width: 576px) {
    .menu-section {
        max-width: 434px;
        margin: 0 auto !important;
        left: 50%;
        transform: translateX(-50%);
    }
} */

.menu-section .all-menu {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 55px;
    padding-bottom: 3px;
    justify-content: center;
    text-align: center;
    gap: 8px;
    border-top: 1px solid var(--border-color);
    bottom: 0;
}

.menu-section .all-menu .bars {
    width: 18%;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

.menu-section .all-menu .bars:hover .text,
.menu-section .all-menu .bars:hover .icon svg path {
    fill: var(--primary-color);
    color: var(--primary-color);
    transition: 0.3s;
}

.menu-section .all-menu .message-board {
    width: 20%;
    position: relative;
    /* top: -15px; */
}

.menu-section .all-menu .menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.menu-section .all-menu .icon svg {
    height: 22px;
    width: 22px;
    text-align: center;
    transition: 0.3s;
}

.menu-section .all-menu .icon svg path {
    fill: var(--alt-color);
    transition: 0.3s;
}

/* .menu-section .all-menu .message-board .icon {
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);   
    transition: all 0.3s ease;
    margin: 0 auto;
    margin-top: 0px;
    border: 2px solid var(--border-color);
} */


.activeBarmessageBoardBar {
    /* border-radius: 50%;
    border: 4px solid var(--primary-color) !important; */
}

/* .menu-section .all-menu .message-board .icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}   

.menu-section .all-menu .message-board .icon svg {
    height: 22px;
    width: 22px;
    position: relative;
    top: 0;
}

.menu-section .all-menu .message-board .icon svg path {
    fill: white !important;
} */

.menu-section .all-menu .notification .icon {
    position: relative;
}

.menu-section .all-menu .notification .icon .badge {
    width: 6px;
    height: 15px;
    position: absolute;
    background-color: var(--secondary-color);
    border-radius: 50%;
    top: 1px;
    right: 15px;
    z-index: 2;
    text-align: left;
    line-height: 10px;
    color: var(--secondary-button-text);
}

.menu-section .all-menu .notification .icon .badge span {
    position: relative;
    left: -4px;
    top: -1.2px;
}

.menu-section .all-menu .text {
    font-size: 10px;
    color: var(--text-color);
    transition: 0.3s;
}

/* .menu-section .all-menu .message-board .text {
    margin-top: 20px;
} */

.menu-section .all-menu .menu .icon {
    position: relative;
    top: 2px;
}

.menu-section .all-menu .menu .img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--alt-color);
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.menu-section .all-menu .menu .img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    object-fit: cover;
    /* top: -1.5px;
     left: -2px; */
}

.menu-section .all-menu .menu .profile {
    display: flex;
    position: relative;
}

.menu-section .all-menu .menu .profile .icon-bar {
    height: 12px;
    width: 12px;
    position: absolute;
    background-color: var(--alt-color);
    border-radius: 50%;
    cursor: pointer;
    right: -5px;
    border: 1px solid var(--white-color);
    text-align: center;
    line-height: 10px;
    bottom: 0;
}

.menu-section .all-menu .menu .profile .icon-bar i {
    color: var(--white-color);
    font-size: 8px;
    position: relative;
    top: -2.5px;
    left: 0px;
    font-weight: bolder;
}

.activeBar .text,
.activeBar .icon svg path {
    fill: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.activeBar::before {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    left: 0;
    top: 2px;
    background-color: var(--primary-color);
    animation: barAnime 0.3s ease-in-out;
}

@keyframes barAnime {
    0% {
        opacity: 0;
    }
}

/* ! =========== FOR SIGN PAGE =========  ===== */

.sign-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
}

.sign-page .head img {
    width: 230px;
}

.sign-page .head a {
    display: block;
    text-decoration: none;
    color: var(--primary-color);
    text-align: center;
    font-size: 18px;
    margin-top: 10px;
    transition: 0.3s;
}

.sign-page .head a:hover {
    text-decoration: underline;
}

.sign-page .body {
    margin-top: 20px;
}

.sign-page .body .btn-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sign-page .body .btn-section a {
    width: 50%;
    background-color: var(--primary-color);
    border: none;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary-button-text);
    line-height: 40px;
    transition: 0.3s;
    cursor: pointer;
    text-align: center;
}

.sign-page .body .social {
    margin-top: 20px;
}

.sign-page .body .social button {
    width: 100%;
    background-color: var(--white-color);
    color: var(--text-color);
    margin-top: 15px;
    border: none;
    border-radius: 4px;
    line-height: 40px;
    display: flex;
    gap: 10px;
    font-size: 18px;
    align-items: center;
    padding-left: 10px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.3s;
    font-weight: 500;
}

.sign-page .body .social button span svg {
    position: relative;
    /* top: 7px; */
}

.sign-page .body .foot p {
    text-align: center;
    margin-top: 25px;
    font-size: 13px;
    color: var(--text-color);
}

.sign-page .body .foot p a {
    text-decoration: none;
    color: var(--secondary-color);
}

.sign-page .body .foot p a:hover {
    text-decoration: underline;
}

/* ! =========== FOR SIGN-IN PAGE =========  ===== */

.sign-in-page,
.sign-up-page,
.forget-page {
    height: calc(100vh - 45px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    background-color: var(--bg-gray);
}

.forget-page {
    height: 100vh;
}

.sign-in-page .head img,
.sign-up-page .head img,
.forget-page .head img {
    width: 230px;
}

.sign-in-page .input-section,
.sign-up-page .input-section,
.forget-page .input-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;
    gap: 10px 0px;
}

.input-section .input-name,
.input-section .input-email,
.input-section .input-passwords {
    width: 100%;
    height: 50px;
    border: none;
    line-height: 50px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    margin-top: 15px;
    background-color: var(--white-color);
}

.input-section .input-name .logo,
.input-section .input-email .logo,
.input-section .input-passwords .logo {
    width: 10%;
    height: auto !important;
    padding: 0;
    margin: 0 !important;
    padding-top: 3px;
    padding-left: 10px;
}

/* todo *** SIGN IN, SIGN UP PAGE LOGO   *** */

.input-section .input-name .logo svg path,
.showIcon .logo svg path,
.hideIcon .logo svg path,
.input-email .logo svg path,
.input-passwords .logo svg path {
    fill: var(--alt-color);
}

.input-section .input-passwords .showIcon {
    position: relative;
    right: 20px;
    height: 100%;
    margin: 0;
    cursor: pointer;
    display: none;
}

.input-section .input-passwords .hideIcon {
    position: relative;
    right: 20px;
    height: 100%;
    cursor: pointer;
}

.input-section .input-name input,
.input-section .input-email input,
.input-section .input-passwords input {
    width: calc(100% - 10%);
    padding: 0px 5px;
    border: none;
    position: relative;
    line-height: 40px;
    font-size: 16px;
    border-radius: 4px;
    color: var(--text-color);
    background-color: var(--white-color);
}

.input-section input::placeholder {
    color: var(--alt-color);
    font-weight: 500;
    text-transform: capitalize;
}

.input-section input:focus {
    outline: none;
}

.sign-in-page .input-section .sign-in {
    width: 100%;
    line-height: 40px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 15px;
    border: none;
    color: var(--primary-button-text);
    font-weight: 600;
    background-color: var(--primary-color);
    cursor: pointer;
    transition: 0.3s;
}

.sign-in-page .input-section .sign-up {
    width: 100%;
    line-height: 40px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 15px;
    border: none;
    color: var(--primary-button-text);
    font-weight: 600;
    background-color: var(--primary-color);
    cursor: pointer;
    transition: 0.3s;
}

.input-section .not-account {
    font-size: 13px;
    text-align: center;
    margin-top: 10px;
    color: var(--text-color);
}

.input-section .forget-password {
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    color: var(--text-color);
}

.input-section .forget-password a {
    font-weight: 500;
    color: var(--secondary-color);
    text-decoration: none;
}

/* Social login buttons styling for sign-in page */
.sign-in-page .input-section .social {
    margin-top: 20px;
}

.sign-in-page .input-section .social button {
    width: 100%;
    background-color: var(--white-color);
    color: var(--text-color);
    margin-top: 15px;
    border: none;
    border-radius: 4px;
    line-height: 40px;
    display: flex;
    gap: 10px;
    font-size: 18px;
    align-items: center;
    padding-left: 10px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: 0.3s;
    font-weight: 500;
}

.sign-in-page .input-section .social button span svg {
    position: relative;
}

/* ! =========== FOR SIGN-UP PAGE =========  ===== */

.sign-up-page {
    /* min-height: 100vh !important;  */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
}

.sign-up-page .input-section .sign-up {
    width: 100%;
    line-height: 40px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 15px;
    border: none;
    color: var(--primary-button-text);
    font-weight: 600;
    background-color: var(--primary-color);
    cursor: pointer;
    transition: 0.3s;
}

.sign-up-page .input-section .sign-in {
    width: 100%;
    line-height: 40px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 18px;
    margin-top: 15px;
    border: none;
    color: var(--primary-button-text);
    font-weight: 600;
    background-color: var(--primary-color);
    cursor: pointer;
    transition: 0.3s;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    -webkit-filter: invert(0.6);
}

input[type="date"] {
    color: var(--alt-color) !important;
}

#editProfile .relationship {
    width: 100%;
    height: 100%;
    padding: 5px;
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--alt-color);
    padding-right: 10px;
    border-radius: 4px;
    background-color: var(--white-color);
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--white-color);
    background-image: url("../assets/downIcon.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    cursor: pointer;
}

#editProfile .relationship option {
    color: var(--text-color);
}

#editProfile textarea {
    margin-top: 15px;
    min-width: 100%;
    min-height: 150px;
    font-size: 16px;
    color: var(--text-color);
    padding: 10px;
    border: none;
    outline: none;
    max-width: 100%;
    max-height: 200px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: var(--card-bg);
}

#editProfile textarea::placeholder {
    text-transform: capitalize;
    color: var(--alt-color);
    font-weight: 500;
}

/* ! =========== FOR FORGET PASSWORD PAGE =========  ===== */

.forget-page .head {
    position: relative;
    top: -80px;
}

.forget-page .head .forget-password {
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

.forget-page .head .forget-password a {
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
}

.forget-page .input-section .reset-link {
    width: 100%;
    line-height: 40px;
    border-radius: 4px;
    text-transform: capitalize;
    font-size: 16px;
    margin-top: 15px;
    border: none;
    color: var(--primary-button-text);
    background-color: var(--primary-color);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

/* .forget-page .input-section .reset-link:hover {
   background-color: var(--primary-color);
   color: var(--white-color);
   transition: 0.3s;
   border: 1px solid var(--border-color);
 } */

/* ! =========== FOR OTP VERIFY PAGE =========  ===== */

.otp-verify {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--bg-gray);
}

.otp-verify .head {
    text-align: center;
    position: relative;
    top: -100px;
}

.otp-verify .head .title {
    font-size: 22px;
    color: var(--text-color);
    font-weight: 500;
}

.otp-verify .head .sub-title {
    padding-top: 15px;
    color: var(--text-color);
}

.otp-verify .input-section {
    width: 100%;
}

.otp-verify .otp-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
}

.otp-verify .otp-box .otp-item {
    width: 40px;
    height: 45px;
    /* padding: 0px 5px; */
    border-radius: 4px;
    border: 1px solid var(--border-color);
    color: var(--text-color);

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    font-size: 16px;
    text-align: center;
    line-height: 45px;
}

.otp-verify .otp-box .otp-item input {
    color: var(--text-color);
    height: 100%;

    background-color: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-weight: 500;
}

.otp-verify .resend-otp {
    text-align: center;
    margin: 0;
    margin-top: 10px;
}

.otp-verify .resend-otp a {
    text-decoration: none;
    color: var(--text-color);
    text-transform: capitalize;
}

/* ! ********** FOR PROFILE MENU PAGE ******** */

#profileMenu {
    min-height: 100vh;
}

#profileMenu p {
    margin-bottom: 0;
}

#profileHead {
    background: var(--bg-gray);
}

.bg-gray {
    background: var(--bg-gray);
}

#profileHead .back-btn-section .center {
    padding-left: 30px;
    color: var(--head-text);
}

#profileHead .back-btn-section .right {
    display: flex;
    width: 30%;
    gap: 10px;
    margin-right: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

#profileHead .setting,
#profileHead .search {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    /* background-color: var(--input-bg); */
    text-align: center;
    line-height: 27px;
    margin: 0;
    /* border: 1px solid var(--trans-border); */
}

#profileHead .setting svg path,
#profileHead .search svg path {
    fill: var(--primary-color);
}

#profileHead .setting:hover svg path,
#profileHead .search:hover svg path {
    fill: var(--primary-color);
}

#profileHead .dark-icon {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-color: var(--input-bg);
    text-align: center;
    margin: 0;
    cursor: pointer;
    color: var(--alt-color);
    border: 1px solid var(--trans-border);
}

#profileHead .dark-icon i {
    font-size: 17px;
    position: relative;
    top: -7px !important;
    color: var(--primary-color);
}

#profileHead .dark-icon .moon-icon {
    /* display: none; */
}

/* todo ==== PROFILE-DETAILS-SECTION ==== --> */

#profileMenu .box {
    display: flex;
    gap: 5px;
    height: 70px;
    align-items: center;
    padding: 10px;
    padding-right: 0;
    justify-content: space-between;
    border-radius: 6px;
    margin-top: 15px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

#profileMenu .box .pro-img .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
}

#profileMenu .box .pro-img .img-part img {
    width: 100%;
}

#profileMenu .box .name p {
    font-size: 16px;
    line-height: 1.2;
    color: var(--head-text);
    text-transform: capitalize;
    font-weight: 600;
}

#profileMenu .box .btn button {
    border: none;
    background-color: var(--white-color);
    width: 105px;
    height: 30px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#profileMenu .box .btn button {
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    border: 1px solid var(--primary-color);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

/* todo ==== VENUE-DETAILS ==== --> */

#profileMenu .venue-details {
    width: 50%;
    margin-top: 15px;
}

#profileMenu .venue-details .head {
    color: var(--primary-color);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 18px;
}

#profileMenu .venue-details .details {
    text-transform: capitalize;
    font-size: 15px;
    color: var(--text-color);
}

#profileMenu .venue-details .wb-link {
    font-size: 14px;
    color: var(--text-color);
    text-transform: lowercase;
}

/* todo ==== GRID-SECTION ==== --> */

#profileMenu .grid-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* grid-template-rows: 1fr 1fr;  */
    gap: 10px;

    margin-top: 15px;
}

#profileMenu .grid-section p {
    margin: 0;
}

#profileMenu .grid-section .item a {
    text-decoration: none;
}

#profileMenu .grid-section .item {
    padding: 8px;
    border-radius: 4px;
    background-color: var(--card-bg);
    cursor: pointer;
    border: 1px solid var(--border-color);
}

#profileMenu .grid-section .item .item-title {
    text-transform: capitalize;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--head-text);
}

#profileMenu .grid-section .item svg path {
    fill: var(--primary-color);
}

/* todo ==== HELP/SUPPORT-SECTION ==== --> */

#profileMenu .help-section {
    margin-top: 15px;
}

#profileMenu .help-section .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    padding: 0px 5px;
    background-color: var(--white-color);
}

#profileMenu .help-section .header .left {
    display: flex;
    gap: 10px;
    text-transform: capitalize;
    color: var(--text-color);
    font-weight: 600;
}

#profileMenu .help-section .header .left .question {
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background-color: var(--white-color);
    text-align: center;
    line-height: 22px;
    border: 1px solid var(--trans-border);
}

#profileMenu .help-section .header .right i {
    font-size: 18px;
    color: var(--alt-color);
    padding-right: 15px;
}

#profileMenu .collapses .collapse-item {
    padding: 8px 5px;
    margin-top: 10px;
    border-radius: 4px;
    text-transform: capitalize;
    transition: 0.3s;
    font-weight: 500;
    border: 1px solid var(--border-color);
    width: 100%;
    text-align: left;
    color: var(--head-text);
    background-color: var(--white-color);
}

#profileMenu .collapses .collapse-item svg path {
    fill: var(--primary-color);
}

#profileMenu .collapses .collapse-item a {
    text-decoration: none;
    color: var(--text-color);
}

#profileMenu .collapses .collapse-item:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#profileMenu .collapses .collapse-item:hover svg path {
    fill: #fff;
}

#profileMenu .collapses .collapse-item span {
    padding-right: 5px;
}

#profileMenu .log-out {
    width: 100%;
    height: 40px;
    font-size: 18px;
    background-color: var(--primary-color);
    border: none;
    color: var(--primary-button-text);
    border-radius: 4px;
    text-transform: capitalize;
    margin-top: 15px;
    transition: 0.3s;
    font-weight: 500;
    margin-bottom: 10px;
    border: none;
}

/* #profileMenu .log-out:hover {
   background-color: var(--primary-color);
   color: var(--white-color);
   transition: 0.3s;
 } */

#profileMenu .accordion-button:not(.collapsed) {
    background-color: var(--white-color);
}

#profileMenu.accordion-button:not(.collapsed)::after {
    right: 20px;
}

#profileMenu .accordion-button::after {
    position: relative;
    right: 20px;
    rotate: 180deg;
}

#experienceModal .modal-body {
    padding: 10px 0px;
}

#experienceModal .feedback .general,
#experienceModal .feedback .something {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    cursor: pointer;
    align-items: center;
}

#experienceModal .feedback .something {
    border: none;
}

#experienceModal .feedback .name {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

#experienceModal .feedback .title {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 400;
    color: var(--alt-color);
}

#experienceModal .feedback .img {
    height: 50px;
    width: 50px;
    overflow: hidden;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: var(--input-bg);
}

#experienceModal .feedback .img .icon svg path {
    fill: var(--alt-color);
}

/* ! **********  SETTING PAGE ******** */

#setting {
    background-color: var(--white-color);
}

#setting button {
    font-size: 16px;
    text-transform: capitalize;
    color: var(--head-text);
    font-weight: 500;
    padding: 10px;
    background-color: var(--gray-bg);
    display: block;
    border: 1px solid var(--border-color);
    text-align: center;
    cursor: default;
}

#setting .one,
#setting .two,
#setting .three {
    margin-top: 5px;
}

#setting .accordion-header {
    border: none;
}

.accordion-item {
    border: none;
    background-color: var(--white-color);
}

.accordion-button:focus {
    box-shadow: none;
    background-color: #f1f1f1;
}

.accordion-collapse {
    padding: 0;
}

.accordion-body:focus {
    border: none;
}

.accordion-collapse:focus {
    border: none;
}

.accordion-collapse .accordion-body {
    padding: 0px;
}

.accordion-button:not(.collapsed) {
    background-color: var(--white-color);
}

#setting .one,
#setting .two,
#setting .three {
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    font-size: 16px;
    text-transform: capitalize;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#setting svg .second {
    display: none;
}

.accordion-button {
    border: none;
}

#setting .accordion-button::after {
    display: none;
}

.accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* ! ********** FOR NOTIFICATION PAGE ******** */

#notificationMenu {
    min-height: 100vh;
}

#notificationMenu p {
    margin-bottom: 0;
}

.back-btn-section .center {
    padding-left: 68px;
}

.back-btn-section .right {
    display: flex;
    width: 20%;
    gap: 0px;
    margin-right: 10px;
    line-height: 45px;
    align-items: center;
    justify-content: flex-end;
}

.back-btn-section .right svg {
    cursor: pointer;
}

/* todo ==== NOTIFICATION-DETAILS-SECTION ==== --> */

#notificationMenu .box {
    padding: 8px;
    border-radius: 4px;
    margin-top: 10px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

#notificationMenu .box .game-confirmation {
    text-transform: capitalize;
    color: var(--text-color);
}

#notificationMenu .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0px;
}

#notificationMenu .footer .hours {
    font-size: 14px;
    color: var(--alt-color);
}

#notificationMenu .footer .view {
    height: 25px;
    width: 60px;
    border: none;
    font-size: 14px;
    border-radius: 4px;
    color: var(--primary-button-text);
    background-color: var(--primary-color);
    transition: 0.3s;
    font-weight: 500;
}

#notificationMenu .footer .view:disabled {
    background-color: var(--alt-color);
}

/* ! ********** FOR UPCOMING GAME PAGE ******** */

.back-btn-section .right .count {
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    margin: 0;
    border-radius: 50%;
    color: var(--primary-button-text);
    text-align: center;
    line-height: 20px;
}

#upcomingGame .card-section {
    margin-top: 10px;
}

#upcomingGame .card-section .box {
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    margin-top: 15px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

#upcomingGame .card-section .box .head {
    display: flex;
    /* justify-content: space-evenly; */
    justify-content: space-between;
    align-items: center;
}

#upcomingGame .card-section .box .left,
#upcomingGame .card-section .box .right {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 42%;
}

#upcomingGame .card-section .box .left .name {
    font-size: 18px;
    font-weight: 500;
    text-align: right;
    width: calc(100% - 45px) !important;
    line-height: 20px;
    color: var(--text-color);
}

#upcomingGame .card-section .box .right .name {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    width: calc(100% - 45px) !important;
    line-height: 20px;
    color: var(--text-color);
}

.buddies_position {
    position: relative;
    left: -10px;
}

#upcomingGame .card-section .box .img-box {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}

#upcomingGame .card-section .box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#upcomingGame .card-section .box svg {
    width: 20px;
    height: 50px;
}

#upcomingGame .card-section .box svg path {
    fill: var(--secondary-color);
}

#upcomingGame .card-section .box .body {
    margin-top: 10px;
}

#upcomingGame .card-section .box .body .game-details p {
    margin: 0;
    line-height: 20px;
}

#upcomingGame .card-section .box .body .game-details .title {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

#upcomingGame .card-section .box .body .game-details .team {
    text-transform: capitalize;
    color: var(--primary-color);
    font-size: 15px;
}

#upcomingGame .card-section .box .body .game-details .date {
    text-transform: capitalize;
    color: var(--text-color);
    font-size: 15px;
}

#upcomingGame .card-section .box .upcoming-team {
    color: var(--primary-color);
    text-decoration: underline;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
}

#upcomingGame .card-section .box .team-summary {
    color: var(--secondary-color);
}

/* ! ********** FOR MY CHAT PAGE ******** */

#chatMenu a {
    text-decoration: none;
}

#chatMenu .search-bar {
    margin-top: 20px;
}

#chatMenu .search-bar .input {
    display: flex;
    width: 100%;
}

#chatMenu .search-bar .input input {
    width: 100%;
    border: none;
    outline: none;
    border: 1px solid var(--border-color);
    padding: 5px 0px;
    padding-left: 10px;
    padding-right: 30px;
    border-radius: 4px;
    position: relative;
    background-color: var(--card-bg);
    color: var(--text-color);
}

#chatMenu .search-bar .input input::placeholder {
    color: var(--alt-color);
    text-transform: capitalize;
}

#chatMenu .search-bar .input .search-icon {
    position: absolute;
    right: 30px;
    line-height: 30px;
    cursor: pointer;
    z-index: 333;
}

#chatMenu .search-bar .input .search-icon:hover svg path {
    fill: var(--primary-color);
}

#chatMenu .create-group {
    height: 40px;
    width: 100%;
    border: none;
    /* margin-top: -6px; */
    line-height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: 0.3s;
    cursor: pointer;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
}

#chatMenu .create-group .group-person-img {
    width: 30%;
}

#chatMenu .create-group .img-box {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 10px;
}

#chatMenu .create-group .img-box .img {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: var(--white-color);
}

#chatMenu .create-group .img-box .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    vertical-align: top;
}

#chatMenu .create-group .img-box .img:nth-child(2) {
    transform: translateX(-5px);

    -webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    -ms-transform: translateX(-5px);
    -o-transform: translateX(-5px);
}

#chatMenu .create-group .img-box .img:nth-child(3) {
    transform: translateX(-15px);
    -webkit-transform: translateX(-15px);
    -moz-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    -o-transform: translateX(-15px);
}

#chatMenu .create-group .img-box .img:nth-child(4) {
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px);
}

#chatMenu .create-group .text {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 500;
}

#chatMenu .card-section {
    margin-top: 10px;
}

#chatMenu .card-section h4 {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--head-text);
}

#chatMenu .card-section .box {
    padding: 10px;
    background-color: var(--card-bg);
    border-radius: 6px;
    cursor: pointer;
    /* border: 1px solid var(--border-color); */
}

/* #chatMenu .approval-card .left {
     width: 60% !important;
 } */

#chatMenu .card-section .box .head {
    display: flex;
    justify-content: space-between;
}

#chatMenu .card-section .box .head p {
    margin: 0;
    text-transform: capitalize;
    color: var(--primary-color);
    font-size: 14px;
}

#chatMenu .card-section .box .head .left p {
    margin: 0;
    text-transform: capitalize;
    color: var(--primary-color);
    font-size: 14px;
    text-decoration: underline;
}

#chatMenu .card-section .box .body {
    margin: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatMenu .card-section .box .body:first-child {
    border-top: none
}

#chatMenu .card-section .box .body .left {
    /* width: 40%; */
}

#chatMenu .card-section .box .body .right {
    /* width: 40%; */
    display: flex;
    justify-content: flex-end;
}

#chatMenu .card-section .box .body .center {
    /* width: 15%; */
    text-align: left;
}

#chatMenu .card-section .box .body .img-part {
    display: flex;
    align-items: center;
    gap: 7px;
}

#chatMenu .card-section .box .body .img-part .img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
}

#chatMenu .card-section .box .body .img-part .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#chatMenu .card-section .box .body .right .img-part {
    text-align: right;
}

#chatMenu .card-section .box .body .img-part .name {
    text-transform: capitalize;
    font-weight: 500;
    color: var(--text-color);
    font-size: 16px;
    margin: 0;
    width: calc(100% - 65px);
    line-height: 1.2;
}

#chatMenu .card-section .doubleChat .body .left,
#chatMenu .card-section .teamChat .body .left {
    width: 40%;
}

#chatMenu .approval-card .left {
    width: calc(100% - 65px) !important;
}

#chatMenu .card-section .doubleChat .body .right,
#chatMenu .card-section .teamChat .body .right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    overflow-wrap: anywhere;
}

#chatMenu .card-section .box .body .right .view-chat {
    height: 25px;
    width: 60px;
    border-radius: 20px;
    line-height: 20px;
    border: none;
    text-transform: capitalize;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    font-size: 14px;
}

/* todo ==== DOUBLE CHAT-SECTION ==== --> */
/* *-- doubleChat is a common class for more another card Section */

#chatMenu .doubleChat .box .second-part {
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
}

#chatMenu .doubleChat .box .head .count {
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border-radius: 50%;
}

#chatMenu .doubleChat .box .center {
    height: 50px;
    width: 50px;
}

#chatMenu .doubleChat .box .center svg {
    height: 50px;
    width: 50px;
}

#chatMenu .doubleChat .body .userBtn {
    border: none;
    background-color: transparent;
    display: flex;
    position: relative;
    cursor: pointer;
}

#chatMenu .doubleChat .body .userBtn:hover,
.userBtn:focus path {
    background-color: transparent !important;
}

#chatMenu .doubleChat .body .userBtn .count {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    margin: 0;
    line-height: 18px;
    font-size: 12px;
    position: absolute;
    top: 12px;
    left: 13px;
    z-index: 50;
}

#chatMenu .doubleChat .body .userBtn svg path {
    fill: var(--alt-color);
    stroke: var(--white-color);
}

#chatMenu .doubleChat .body .style-text {
    font-size: 22px;
    text-transform: capitalize;
    font-weight: 600;
    font-family: "Black Ops One", system-ui;
    color: var(--alt-color);
}

/* todo ==== PLAYERS MODAL SECTION ==== --> */

.modal-content .modal-header {
    border: none;
    border-bottom: 1px solid var(--border-color);
    padding: 15px 15px;
}

#playersModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#playersModal .modal-content {
    border-radius: 6px;
    width: 95%;
}

#playersModal .box {
    box-shadow: none !important;
    margin-top: 10px !important;
    border-radius: 4px !important;
}

.modal-content .modal-header .header-title {
    color: var(--head-text);
    font-weight: bold;
    font-size: 18px;
    margin: 0;
    text-transform: capitalize;
    font-weight: 600;
}

#playersModal .modal-content .cancelBtn svg path {
    fill: var(--alt-color);
}

#playersModal .modal-content .cancelBtn:hover svg path {
    fill: var(--secondary-color);
}

#playersModal .modal-body {
    padding: 10px;
    height: 370px;
}

#playersModal .modal-body .box {
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    border-radius: 4px;
    padding: 10px 5px;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

#playersModal .modal-body .box .left {
    border-right: 1px solid var(--border-color);
    padding-right: 10px;
}

#playersModal .modal-body .border-part {
    height: 55px;
    width: 55px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

#playersModal .modal-body .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 1.5px;
    top: 1px;
}

#playersModal .modal-body .border-part .img-part img {
    text-align: center;
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    left: 0px;
}

#playersModal .modal-body .box .right {
    padding-left: 10px;
    display: flex;
    align-items: center !important;
    gap: 5px !important;
    justify-content: center !important;
}

#playersModal .modal-body .box .right h4 {
    font-size: 18px;
    color: var(--text-color);

    text-transform: capitalize;
    font-weight: 600;
    margin: 0;
}

/* todo ==== SHARE-MODAL SECTION ==== --> */

#shareModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#shareModal .modal-content {
    border-radius: 6px;
    width: 95%;
}

#shareModal .modal-content .modal-header {
    border: none;
    padding: 5px 12px;
}

#shareModal .modal-content .cancelBtn svg path {
    fill: var(--alt-color);
}

#shareModal .modal-content .cancelBtn:hover svg path {
    fill: var(--secondary-color);
}

#shareModal .modal-body {
    padding: 10px;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    padding-bottom: 30px;
}

#shareModal .modal-body .border-part {
    height: 90px;
    width: 90px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
}

#shareModal .modal-body .border-part .img-part {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 3px;
    top: 3px;
    background-color: #1a3657;
    text-align: center;
    line-height: 80px;
}

#shareModal .modal-body .center .slide {
    height: 100%;
    width: 2px;
    background-color: var(--border-color);
}

#shareModal .modal-body .right .border-part .img-part {
    background-color: var(--primary-color);
}

/* todo ==== DELETE MODAL SECTION ==== --> */
/* todo ==== REPORT MODAL SECTION ==== --> */

#deleteModal .modal-dialog,
#acceptModal .modal-dialog,
#reportModal .modal-dialog,
#interestAlertModal .modal-dialog,
#interestAlertModalTwo .modal-dialog,
#sentModal .modal-dialog,
#editModal .modal-dialog,
#savePostModal .modal-dialog,
#hidePostModal .modal-dialog,
#yesNo .modal-dialog,
#deleteGroupAlert .modal-dialog,
#deleteGroupModal .modal-dialog,
#deletePostModal .modal-dialog,
#errorModal .modal-dialog,
#showInterestModal .modal-dialog,
#menuModal .modal-dialog,
#defenseModal .modal-dialog,
#reportPostModal .modal-dialog,
#editNameModal .modal-dialog,
#experienceModal .modal-dialog,
#hideCommand .modal-dialog,
#shareExperienceModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#deleteModal .modal-content,
#acceptModal .modal-content,
#reportModal .modal-content,
#interestAlertModal .modal-content,
#interestAlertModalTwo .modal-content,
#sentModal .modal-content,
#editModal .modal-content,
#savePostModal .modal-content,
#hidePostModal .modal-content,
#yesNo .modal-content,
#showInterestModal .modal-content,
#savePostModal .modal-content,
#errorModal .modal-content,
#hidePostModal .modal-content,
#yesNo .modal-content,
#deletePostModal .modal-content,
#reportPostModal .modal-content,
#editNameModal .modal-content,
#experienceModal .modal-content,
#hideCommand .modal-dialog,
#shareExperienceModal .modal-content,
#deleteGroupModal .modal-content,
#deleteGroupAlert .modal-content {
    border-radius: 6px;
    border: none;
    overflow: hidden;
    width: 95%;
}

#singleImageModal .modal-dialog,
#teamImageModal .modal-dialog {
    padding: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

#singleImageModal .modal-content,
#teamImageModal .modal-content {
    height: 100%;
    width: 100%;
}

#teamImageModal .name {
    color: #fff;
}

#singleImageModal .name {
    color: #fff;
}

#deleteModal .modal-content .modal-header,
#acceptModal .modal-content .modal-header,
#reportModal .modal-content .modal-header,
#interestAlertModal .modal-content .modal-header,
#interestAlertModalTwo .modal-content .modal-header,
#sentModal .modal-content .modal-header,
#savePostModal .modal-content .modal-header,
#errorModal .modal-content .modal-header,
#deletePostModal .modal-content .modal-header,
#hideCommand .modal-content .modal-header,
#hidePostModal .modal-content .modal-header,
#yesNo .modal-content .modal-header,
#deleteGroupModal .modal-content .modal-header,
#deleteGroupAlert .modal-content .modal-header {
    border: none;
    padding: 10px 10px;
}

#deleteModal .modal-body,
#acceptModal .modal-body,
#reportModal .modal-body,
#interestAlertModal .modal-body,
#interestAlertModalTwo .modal-body,
#sentModal .modal-body,
#savePostModal .modal-body,
#errorModal .modal-body,
#deletePostModal .modal-body,
#hideCommand .modal-body,
#hidePostModal .modal-body,
#deleteGroupAlert .modal-body,
#deleteGroupModal .modal-body,
#yesNo .modal-body {
    padding: 10px;
    border: none;
    text-align: center;
    padding-bottom: 20px;
}

#deleteModal .modal-body .imp-text,
#acceptModal .modal-body .imp-text,
#reportModal .modal-body .imp-text,
#interestAlertModal .modal-body .imp-text,
#interestAlertModalTwo .modal-body .imp-text,
#sentModal .modal-body .imp-text,
#savePostModal .modal-body .imp-text,
#errorModal .modal-body .imp-text,
#deletePostModal .modal-body .imp-text,
#hideCommand .modal-body .imp-text,
#yesNo .modal-body .imp-text,
#deleteGroupAlert .modal-body .imp-text,
#deleteGroupModal .modal-body .imp-text,
#hidePostModal .modal-body .imp-text {
    margin: 0;
    text-transform: none;
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
}

#deleteModal .modal-footer,
#acceptModal .modal-footer,
#reportModal .modal-footer,
#interestAlertModal .modal-footer,
#interestAlertModalTwo .modal-footer,
#sentModal .modal-footer,
#editModal .modal-footer,
#savePostModal .modal-footer,
#errorModal .modal-footer,
#hideCommand .modal-footer,
#hidePostModal .modal-footer,
#yesNo .modal-footer,
#deleteGroupAlert .modal-footer,
#deleteGroupModal .modal-footer,
#deletePostModal .modal-footer,
#reportPostModal .modal-footer,
#shareExperienceModal .modal-footer {
    display: flex;
    justify-content: space-between;
    padding: 0;
    gap: 0;
    border: none;
}

#deleteModal .modal-footer button,
#acceptModal .modal-footer button,
#reportModal .modal-footer button,
#interestAlertModal .modal-footer button,
#interestAlertModalTwo .modal-footer button,
#sentModal .modal-footer button,
#savePostModal .modal-footer button,
#errorModal .modal-footer button,
#deletePostModal .modal-footer button,
#hideCommand .modal-footer button,
#hidePostModal .modal-footer button,
#deleteGroupAlert .modal-footer button,
#deleteGroupModal .modal-footer button,
#yesNo .modal-footer button {
    background-color: var(--white-color);
    text-transform: capitalize;
    border: none;
    border: 1px solid var(--border-color);
    border-right: none;
    width: 50%;
    margin: 0;
    padding: 8px 12px;
    color: var(--primary-color);
    font-weight: 500;
    transition: 0.3s;
}

#sentModal .modal-footer button {
    width: 100%;
}

#deleteModal .modal-footer .cancel-btn:hover,
#acceptModal .modal-footer .cancel-btn:hover,
#reportModal .modal-footer .cancel-btn:hover,
#interestAlertModal .modal-footer .cancel-btn:hover,
#interestAlertModalTwo .modal-footer .cancel-btn:hover,
#savePostModal .modal-footer .cancel-btn:hover,
#errorModal .modal-footer .cancel-btn:hover,
#deletePostModal .modal-footer .cancel-btn:hover,
#savePostModal .modal-footer .cancel-btn:hover,
#errorModal .modal-footer .cancel-btn:hover,
#hideCommand .modal-footer .cancel-btn:hover,
#hidePostModal .modal-footer .cancel-btn:hover,
#deleteGroupAlert .modal-footer .cancel-btn:hover,
#deleteGroupModal .modal-footer .cancel-btn:hover,
#yesNo .modal-footer .cancel-btn:hover {
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    transition: 0.3s;
    border-color: transparent;
}

#deleteModal .modal-footer .ok-btn:hover,
#acceptModal .modal-footer .ok-btn:hover,
#reportModal .modal-footer .ok-btn:hover,
#interestAlertModal .modal-footer .ok-btn:hover,
#interestAlertModalTwo .modal-footer .ok-btn:hover,
#sentModal .modal-footer .ok-btn:hover,
#savePostModal .modal-footer .ok-btn:hover,
#errorModal .modal-footer .ok-btn:hover,
#deletePostModal .modal-footer .ok-btn:hover,
#hideCommand .modal-footer .ok-btn:hover,
#hidePostModal .modal-footer .ok-btn:hover,
#deleteGroupAlert .modal-footer .ok-btn:hover,
#deleteGroupModal .modal-footer .ok-btn:hover,
#yesNo .modal-footer .ok-btn:hover {
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    border-color: transparent;
}

#editModal .modal-content .modal-body textarea,
#reportPostModal .modal-content .modal-body textarea,
#shareExperienceModal .modal-content .modal-body textarea {
    max-width: 100%;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 5px 10px;
    outline: none;
    min-width: 100%;
    min-height: 100px;
    max-height: 300px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#editModal .modal-body,
#reportPostModal .modal-body,
#shareExperienceModal .modal-body {
    padding-bottom: 0;
}

#editModal .modal-footer,
#reportPostModal .modal-footer,
#shareExperienceModal .modal-footer {
    padding: 10px 10px;
    padding-top: 0;
}

/* todo ==== SHOW-INTEREST MODAL SECTION ==== --> */

#showInterestModal .modal-content {
    border-radius: 6px;
}

#showInterestModal .modal-content .modal-header {
    border: none;
    padding: 15px 15px;
    border-bottom: 1px solid var(--border-color);
}

#showInterestModal .modal-content .cancelBtn svg path {
    fill: var(--alt-color);
}

#showInterestModal .modal-content .cancelBtn:hover svg path {
    fill: var(--secondary-color);
}

#showInterestModal .modal-body .box {
    padding: 10px;
    height: auto;
    display: flex;
    justify-content: space-around;
    border: 1px solid var(--border-color);
    margin-top: 15px;
    background-color: var(--white-color);
    border-radius: 6px !important;
    -webkit-border-radius: 6px !important;
    -moz-border-radius: 6px !important;
    -ms-border-radius: 6px !important;
    -o-border-radius: 6px !important;
}

#showInterestModal .modal-body .box:nth-child(1) {
    margin-top: 5px !important;
}

#showInterestModal .modal-body .border-part {
    height: 90px;
    width: 90px;
    border: 2px solid var(--white-color);
    border-radius: 50%;
    cursor: pointer;
    line-height: 90px;
}

#showInterestModal .modal-body .border-part .img-part {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 3px;
    top: 3px;

    text-align: center;
    line-height: 80px;
}

#showInterestModal .modal-body .center .slide {
    height: 100%;
    width: 2px;
    background-color: var(--border-color);
}

#showInterestModal .modal-body .box .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#showInterestModal .modal-body .box .right button {
    padding: 3px 10px;
    border: none;
    border-radius: 25px;
    text-align: center;
    text-transform: capitalize;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    transition: 0.3s;
    position: relative;
    top: 0px;
    font-weight: 500;
    color: var(--alt-color);
}

#showInterestModal .modal-body .box .right button:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    transition: 0.3s;
}

#showInterestModal .modal-body .box .right h4 {
    font-size: 18px;
    color: var(--head-text);

    text-transform: capitalize;
    font-weight: 600;
}

/* todo ==== PERSONAL-TRAINER-SECTION ==== --> */

#chatMenu .personal-trainer .box {
    padding-top: 10px;
    border: 1px solid var(--border-color) !important;
}

#chatMenu .personal-trainer .title {
    font-size: 16px;
    color: var(--primary-color);
}

#chatMenu .personal-trainer .left {
    width: 100% !important;
}

#chatMenu .personal-trainer .second {
    border-top: 1px solid var(--border-color);
    padding: 10px 00px;
    padding-bottom: 0;
}

/* ! ********** FOR PLAYERS PAGE ******** */

#players {
    min-height: 100vh;
}

#players .box {
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--border-color);
}

#players .box .left {
    border-right: 1px solid var(--border-color);
    padding-right: 10px;
}

#players .border-part {
    height: 55px;
    width: 55px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

#players .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 1.5px;
    top: 1px;
}

#players .border-part .img-part img {
    text-align: center;
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    left: 0px;
}

#players .box .right {
    padding-left: 10px;
    display: flex;
    gap: 0px;
    text-align: left;
    flex-direction: column;
}

#players .box .right .name {
    font-size: 16px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 600;
    text-align: left;
    margin: 0;
}

.captain {
    font-weight: 900;
    position: relative;
    color: var(--text-color);
}

#players .box .right .join-time {
    margin: 0;
    font-size: 14px;
    text-transform: capitalize;
    color: var(--primary-color);
}

/* ! ********** FOR MESSAGE BOARD PAGE ******** */

.message-board-head .back-btn-section .create-post {
    padding-right: 5px;
}

.message-board-head .back-btn-section .create-post svg path {
    fill: var(--alt-color);
}

.message-board-head .dropdown-list {
    background-color: var(--white-color);
    margin: 0;
    position: absolute;
    top: 42px;
    display: none;
    right: 12px;
    border-radius: 4px;
    z-index: 1000;
    border: 1px solid var(--border-color);
    animation: dropdownAn 0.2s linear;
    transition: 0.1s;
    -webkit-animation: dropdownAn 0.2s linear;
}

@keyframes dropdownAn {
    0% {
        opacity: 0;
        right: 0;
    }
}

.message-board-head .dropdown-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.message-board-head .dropdown-list ul li {
    padding: 3px 20px;
    text-transform: capitalize;
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
}

.message-board-head .dropdown-list ul li:last-child {
    border: none;
}

.message-board-head .dropdown-list ul li a {
    text-decoration: none;
    color: var(--alt-color);
    transition: 0.3s;
}

.message-board-head .dropdown-list ul li a:hover {
    color: var(--primary-color);
    transition: 0.3s;
}

#messageBoard .card-section {
    margin-top: 0px;
}

#messageBoard .card-section .box {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 15px;
    color: var(--text-color);
}

#messageBoard .card-section .box .head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

#messageBoard .card-section .box .img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
}

#messageBoard .card-section .box .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#messageBoard .card-section .box .head .name {
    font-size: 16px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 600;
}

#messageBoard .card-section .box .head .name span {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
}

#messageBoard .card-section .box .body {
    padding: 10px;
    padding-top: 0;
}

#messageBoard .card-section .box .avator-img {
    display: flex;
    gap: 5px;
}

#messageBoard .card-section .box .avator {
    height: 20px;
    width: 20px;
    background-color: #dadada;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
}

#messageBoard .card-section .box .age {
    font-size: 14px;
    color: var(--alt-color);
    display: flex;
    gap: 10px;
}

#messageBoard .card-section .box .avator img {
    width: 100%;
    object-fit: cover;
}

#messageBoard .card-section .box .star {
    color: var(--rating-color);
    padding: 0;
    font-size: 16px;
    position: relative;
    top: -3px;
}

#messageBoard .card-section .box .title {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
    margin-bottom: 5px;
}

#messageBoard .card-section .box .sub-title {
    color: var(--secondary-color);
}

#messageBoard .card-section .box .read-more {
    color: var(--primary-color);
    cursor: pointer;
}

#messageBoard .card-section .box p {
    margin: 0;
}

#messageBoard .card-section .box .foots {
    padding: 0;
    margin: 0;
    padding-top: 0px;
    display: flex;
    justify-content: space-between;
    background-color: var(--gray-bg);
    padding: 10px 30px;
    border-radius: 8px;
    border-top: 1px solid var(--border-color);
}

#messageBoard .card-section .box .foots .right {
    display: flex;
    gap: 10px;
}

#messageBoard .card-section .box .foots .circle {
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: 0.1s;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#messageBoard .card-section .box .foots .circle svg {
    cursor: pointer;
}

#messageBoard .card-section .box .foots .left .circle svg path {
    stroke: var(--primary-color);
}

#messageBoard .card-section .box .foots .right .circle svg path {
    stroke: transparent;
    fill: var(--alt-color);
    transition: 0.1s;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
}

#messageBoard .card-section .box .foots .right .circle .report path {
    fill: var(--alt-color);
    transition: 0.1s;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
}

#messageBoard .card-section .box .foots .circle i {
    font-size: 20px;
    font-weight: 800;
    position: relative;
    top: 3px;
    color: var(--alt-color);
}

#messageBoard .card-section .box .foots .right .circle .delete-icon:hover path {
    fill: var(--primary-color);
    stroke: transparent;
}

#messageBoard .share-icon {
    position: relative;
    left: -1px;
    top: 1px;
}

/* ! ********** CREATE POST PAGE (TEAMS, DOUBLES) ******** */
/**
  * * 1. Create post page mean doubles page
  *
  * * 2. Double page and Teams Page Similar so No need code again
  *
  * * 3. Same Time create post page css uses all over pages (single, dubbies)
  *
  * * 4. When Need change anything then It will be changes by own ID (#single, #dubbies)
  *
  *
  */

#createPost {
    min-height: 85vh;
    padding-top: 0;
    padding-bottom: 0px;
}

#createPost .post-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid var(--border-color);
}

#createPost .post-item .item {
    font-size: 16px;
    color: var(--head-text);
    text-transform: capitalize;
    padding: 10px;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: 0.3s;
    text-align: center;
}

.activeItem {
    color: var(--primary-color) !important;
    transition: 0.3s;
}

.activeItem::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
    left: 0;
    bottom: -2px;
    transition: 0.3s;
}

#createPost .post-item a {
    text-decoration: none;
}

#createPost .button-container {
    display: flex;
    align-items: center;
    padding-top: 15px;
}

#createPost .button-container .button {
    padding: 10px 3px;
    border: 1px solid var(--primary-color);
    background-color: var(--white-color);
    color: var(--text-color);
    font-weight: 500;
    text-transform: capitalize;
    cursor: pointer;
    border-left: none;
    font-size: 14px;
    width: 32%;
}

#createPost .button-container .button:first-child {
    border-left: 1px solid var(--primary-color);
    border-radius: 4px 0px 0px 4px;
}

#createPost .button-container .button:last-child {
    border-left: 1px solid var(--primary-color);
    border-radius: 0px 4px 4px 0px;
    border-left: none;
    width: 36%;
}

#createPost .activeBtn {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
    position: relative;
}

#createPost .activeBtn::after {
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 42%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--primary-color);
}

#createPost .post-input {
    margin-top: 25px;
}

#createPost .post-input .choose-sport {
    display: flex;
    align-items: center;
}

#createPost .post-input .left {
    width: 40%;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);
    font-weight: 500;
}

#createPost .post-input .choose-sport .right {
    width: 60%;
}

#createPost .post-input .choose-sport .right select {
    width: 100%;
    padding: 5px;
    padding-right: 10px;
    border-radius: 4px;
    background-color: var(--white-color);
    color: var(--alt-color);
    border: 1px solid var(--border-color);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--white-color);
    background-image: url("../assets/downIcon.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    cursor: pointer;
}

#createPost .post-input .group-name {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

#createPost .post-input .left {
    width: 40%;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);
    font-weight: 600;
}

#createPost .post-input .group-name .right {
    width: 60%;
}

#createPost .post-input .group-name .right select {
    width: 100%;
    padding: 5px;
    padding-right: 10px;
    border-radius: 4px;
    background-color: var(--white-color);
    color: var(--alt-color);
    border: 1px solid var(--border-color);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--white-color);
    background-image: url("../assets/downIcon.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    cursor: pointer;
}

#createPost .post-input .my-age {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

#createPost .post-input .my-age .right {
    width: 60%;
}

#createPost .post-input .my-age .right select {
    width: 35%;

    padding: 5px;
    padding-right: 10px;
    border-radius: 4px;
    background-color: var(--white-color);
    color: var(--alt-color);
    border: 1px solid var(--border-color);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--white-color);
    background-image: url("../assets/downIcon.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: 85%;
    background-position-y: 50%;
    cursor: pointer;
}

#createPost .post-input .ability {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

#createPost .post-input .ability .right .star-rating {
    display: flex;
}

#createPost .post-input .ability .right .star-rating .star {
    color: var(--rating-color);
    font-size: 25px;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

#createPost .post-input .gender {
    margin-top: 10px;
    display: flex;
}

#createPost .post-input .gender .right {
    display: flex;
    align-items: center;
    width: 60%;
    gap: 5px;
}

#createPost .post-input .gender .right,
.male,
.female,
.both {
    color: var(--alt-color);
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
}

#createPost .post-input .gender .right svg {
    position: relative;
    top: -1px;
}

#createPost .post-input .gender .right svg .second {
    display: none;
}

.radioSelect {
    color: var(--primary-color);
}

.radioSelect svg circle {
    stroke: var(--primary-color);
}

.radioSelect svg .second {
    fill: var(--primary-color);
    display: block !important;
}

#createPost .message-box {
    margin-top: 15px;
    width: 100%;
    height: 130px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--card-bg);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    overflow: hidden;
}

#createPost .message-box textarea {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    background-color: var(--card-bg);
    padding: 10px;
    color: var(--text-color);
}

#createPost .message-box textarea::placeholder {
    text-transform: capitalize;
}

/* ! ********** FOR GAME WANTED SECTION ******** */

#createPost .my-age .right {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    text-align: center;
}

#createPost .my-age .right .center {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    width: 30%;
}

#createPost .my-age .right .left {
    width: 60%;
}

#createPost .my-age .right .left select {
    width: 100%;
}

#createPost .my-age .right .right select {
    width: 100%;
}

#createPost #doubles #gameWanted {
    display: none;
}

#createPost #doubles #partnerMe {
    display: none;
}

/* ! ********** FOR SINGLE POST PAGE ******** */

#single .game-btn {
    width: 100%;
    padding: 8px 3px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    text-transform: capitalize;
    margin-top: 15px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: relative;
}

#single .game-btn::after {
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 48%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--primary-color);
}

/* ! ********** FOR BUDDIES PAGE ******** */

#buddies .buddies-btn {
    margin-top: 15px;
    display: flex;
}

#buddies .buddies-btn button {
    width: 50%;
    padding: 8px 3px;
    background-color: var(--white-color);
    color: var(--head-text);
    text-transform: capitalize;
    font-weight: 500;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid var(--primary-color);
    position: relative;
}

#buddies .buddies-btn .first {
    border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px 0px 4px;
    -moz-border-radius: 4px 0px 0px 4px;
    -ms-border-radius: 4px 0px 0px 4px;
    -o-border-radius: 4px 0px 0px 4px;
}

#buddies .buddies-btn .last {
    border-radius: 0px 4px 4px 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    -ms-border-radius: 0px 4px 4px 0px;
    -o-border-radius: 0px 4px 4px 0px;
}

#buddies #wantToJoin {
    display: none;
}

#buddies #partnerMe {
    display: block;
}

/* ! ********** FOR APPROVAL AWAIT PAGE ******** */

#approvalAwait {
    min-height: 100vh;
}

#approvalAwait .card-section {
    margin-top: 0px;
}

#approvalAwait .card-section .box {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    border-radius: 8px;
    margin-top: 10px;
}

#approvalAwait .card-section .box .head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

#approvalAwait .card-section .box .img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
}

#approvalAwait .card-section .box .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#approvalAwait .card-section .box .head .name {
    font-size: 16px;
    color: var(--head-text);
    text-transform: capitalize;
    font-weight: 600;
}

#approvalAwait .card-section .box .head .name span {
    color: var(--primary-color);
    font-weight: 500;
    font-size: 14px;
}

#approvalAwait .card-section .box .body {
    padding: 10px;
    padding-top: 0;
    word-wrap: break-word;
}

#approvalAwait .card-section .box .avator-img {
    display: flex;
    gap: 5px;
}

#approvalAwait .card-section .box .avator {
    height: 20px;
    width: 20px;
    background-color: #dadada;
    border-radius: 50%;
    overflow: hidden;
    text-align: center;
}

#approvalAwait .card-section .box .age {
    font-size: 14px;
    color: var(--alt-color);
    display: flex;
    gap: 10px;
}

#approvalAwait .card-section .box .avator img {
    width: 100%;
    object-fit: cover;
}

#approvalAwait .card-section .box .star {
    color: var(--rating-color);
    padding: 0;
    font-size: 16px;
    position: relative;
    top: -3px;
}

#approvalAwait .card-section .box .title {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
    margin-bottom: 5px;
}

#approvalAwait .card-section .box .sub-title {
    color: var(--secondary-color);
}

#approvalAwait .card-section .box .read-more {
    color: var(--primary-color);
    cursor: pointer;
}

#approvalAwait .card-section .box p {
    margin: 0;
    color: var(--text-color);
}

#approvalAwait .share-icon {
    position: relative;
    left: -1px;
    top: 1px;
}

#approvalAwait .await-card .count {
    display: inline-block;
    height: 20px;
    width: 20px;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    line-height: 20px;
    margin-left: 5px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
}

#approvalAwait .await-card .box .head {
    display: flex;
    justify-content: space-between;
}

#approvalAwait .await-card .box .head p {
    margin: 0;
    text-transform: capitalize;
    color: var(--primary-color);
    font-size: 14px;
}

#approvalAwait .await-card .box .head .left p {
    margin: 0;
    text-transform: capitalize;
    color: var(--primary-color);
    font-size: 14px;
    text-decoration: underline;
}

#approvalAwait .await-card .box .body {
    margin: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#approvalAwait .await-card .box .body .img-part {
    display: flex;
    align-items: center;
    gap: 10px;
}

#approvalAwait .await-card .box .body .img-part .img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
}

#approvalAwait .await-card .box .body .img-part .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#approvalAwait .await-card .box .body .img-part .name {
    text-transform: capitalize;
    font-weight: 500;
    color: var(--head-text);
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
}

#approvalAwait .await-card .box .body .right .view-chat {
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 20px;
    border: none;
    text-transform: capitalize;
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    transition: 0.3s;
    font-size: 13px;
}

#approvalAwait .await-card .box .body .right .accept {
    padding: 2px 10px;
    border-radius: 20px;
    line-height: 20px;
    border: none;
    text-transform: capitalize;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    font-size: 13px;
}

/* #approvalAwait .await-card .box .body .right .accept:hover {
   background-color: var(--white-color);
   color: var(--primary-color);
   transition: 0.3s;
 } */

#approvalAwait .await-card .box .body .right .decline {
    padding: 1px 10px;
    border-radius: 20px;
    line-height: 20px;
    border: none;
    text-transform: capitalize;
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    transition: 0.3s;
    font-size: 13px;
}

#approvalAwait .await-card .box .body .right .declined {
    padding: 1px 10px;
    border-radius: 20px;
    line-height: 20px;
    border: none;
    text-transform: capitalize;
    background-color: var(--alt-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    font-size: 13px;
}

/* #approvalAwait .await-card .box .body .right .decline:hover {
   border: 1px solid transparent;
   background-color: var(--secondary-color);
   color: var(--white-color);
   transition: 0.3s;
 } */

#approvalAwait .await-card .box .second-part {
    border-top: 1px solid var(--border-color);
}

#approvalAwait .await-card .box .second-part .right {
    display: flex;
}

/* ! ********** FOR HISTORY PAGE ******** */

#historySec .history-head {
    display: flex;
    gap: 5px;
    margin-top: 15px;
}

#historySec .history-head .title {
    font-size: 16px;
    color: var(--text-color);
    margin: 0;
    line-height: 22px;
    text-transform: capitalize;
    font-weight: 500;
}

#historySec .history-head .sub-title {
    font-size: 16px;
    color: var(--primary-color);
}

#historySec .card-section .box {
    margin-top: 10px;
    border-radius: 7px;
    background-color: var(--white-color);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

#historySec .card-section .box .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    height: 40px;
    line-height: 40px;
    background-color: var(--gray-bg);
    border-radius: 26px;
    margin: 10px;
    margin-bottom: 0;
}

#historySec .card-section .box .body {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 10px;
    text-align: center;
    gap: 0px;
    position: relative;
    align-items: center;
    align-items: flex-start;
    padding-top: 30px;
}

#historySec .card-section .box .body .img {
    height: 50px;
    width: 50px;
    overflow: hidden;
    border-radius: 50%;
    display: flex;
    justify-content: center;
}

#historySec .card-section .box .body .img img {
    height: 50px;
    width: 50px;
    object-fit: cover;
}

#historySec .card-section .box .group-icon svg {
    position: relative;
    top: 10px;
}

#historySec .card-section .box .body .center {
    line-height: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-top: 8px;
}

#historySec .card-section .box .center .game-name {
    text-transform: capitalize;
    font-size: 15px;
    color: var(--text-color);
    padding-right: 3px;
}

#historySec .card-section .box .body .center .score {
    font-weight: bold;
    font-size: 32px;
    color: var(--head-text);
    margin: 0;
    white-space: nowrap;
}

#historySec .card-section .box .body .center .line {
    background-color: var(--border-color);
    height: 70px;
    width: 2px;
}

#historySec .card-section .box .body .center .time {
    text-transform: capitalize;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-color);
}

#historySec .card-section .box .circle {
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.1s;
}

#historySec .card-section .box .circle svg path {
    fill: var(--alt-color);
}

#historySec .card-section .box .body .name {
    margin: 0;
    line-height: 17px;
    text-align: center;
    text-transform: capitalize;
    font-weight: 500;
    margin-top: 5px;
    font-size: 14px;
    color: var(--text-color);
    width: 60%;
    overflow-wrap: anywhere;
}

#historySec .card-section .box .body .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40%;
}

#historySec .card-section .box .body .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    align-items: center;
}

#historySec .card-section .box .body a {
    text-decoration: none;
    color: var(--text-color);
}

#historySec .card-section .box .body .left .win-box {
    height: 25px;
    width: 25px;
    background-color: #13ab06;
    color: #fff;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    left: 10px;
    top: 10px;
}

#historySec .card-section .box .body .right .lose-box {
    height: 25px;
    width: 25px;
    background-color: var(--secondary-color);
    color: #fff;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    right: 10px;
    top: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#historySec .card-section .box .body .right .draw-box {
    height: 25px;
    width: 25px;
    background-color: orange;
    color: #fff;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    right: 10px;
    top: 10px;
}

#historySec .card-section .box .body .left .draw-box {
    height: 25px;
    width: 25px;
    background-color: orange;
    color: #fff;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    left: 10px;
    top: 10px;
}

/* !FOR PROFILE PAGE TWO  ===== */

.upcoming-game .swiper-slidecustom .body .center p {
    line-height: 15px !important;
    padding: 0;
    font-size: 12px;
    margin: 0;
    text-transform: capitalize;
    position: relative;
    top: 5px;
}

.upcoming-game .swiper-slidecustom .body .center .team-one,
.upcoming-game .swiper-slidecustom .body .center .team-two,
.upcoming-game .swiper-slidecustom .body .center .vs {
    color: var(--head-text) !important;
    font-size: 22px !important;
}

.upcoming-game .swiper-slidecustom .body .center .time {
    color: var(--text-color);
}

.upcoming-game .swiper-slidecustom .body .center .team-one,
.upcoming-game .swiper-slidecustom .body .center .vs,
.upcoming-game .swiper-slidecustom .body .center .team-two {
    font-size: 18px;
    font-weight: bolder;
    color: var(--text-color);
}

/* ! ==== TIMELINE-SECTION ==== --> */

#timeline {
    min-height: 100vh;
    margin: 0;
}

#timeline .timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 12px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
    gap: 10px;
}

#timeline .timeline-header .left .img {
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    cursor: pointer;
}

#timeline .timeline-header .left .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#timeline .timeline-header .center {
    width: 80%;
    overflow: hidden;
    padding-bottom: 0px;
    margin: 0;
    position: relative;
    padding: 0;
    line-height: 10px;
    /* border: 1px solid var(--border-color); */
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background-color: var(--card-bg);
}

#timeline .timeline-header .center textarea {
    width: 100%;
    line-height: 18px;
    border: none;
    font-size: 16px;
    overflow: hidden;
    background-color: transparent;
    resize: none;
    outline: none;
    appearance: none;
    padding-top: 7px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: var(--text-color);
}

#timeline .timeline-header .center textarea::placeholder {
    color: var(--alt-color);
    text-transform: capitalize;
}

#timeline .timeline-header .right {
    cursor: pointer;
}

#timeline .timeline-header .right .gallery svg path {
    fill: var(--primary-color);
}

/* todo ==== TIMELINE-POST-SECTION ==== --> */

#timeline .timeline-post {
    border-bottom: 2px solid var(--border-color);
}

#timeline .timeline-post video {
    max-height: 560px !important;
    object-fit: cover;
}

#timeline .timeline-post a {
    text-decoration: none;
}

#timeline .timeline-post .post-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 12px;
}

#timeline .timeline-post .post-header .left {
    display: flex;
    gap: 10px;
}

#timeline .timeline-post .post-header .left .img {
    height: 55px;
    width: 55px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#timeline .timeline-post .post-header .left .img img {
    height: 100%;
    width: 100%;
}

#timeline .timeline-post .post-header .left .user {
    line-height: 20px;
}

#timeline .timeline-post .post-header .left .user .name {
    text-transform: capitalize;
    font-size: 17px;
    color: var(--head-text);
    font-weight: 600;
}

#timeline .timeline-post .post-header .left .user .time {
    font-size: 14px;
    color: var(--alt-color);
    text-transform: capitalize;
}

#timeline .timeline-post .post-header .right {
    display: flex;
    gap: 20px;
}

#timeline .timeline-post .post-header .right svg {
    cursor: pointer;
    height: 25px;
}

#timeline .timeline-post .post-content {
    /* padding: 12px; */
    /* text-transform: capitalize; */
    color: var(--text-color);
    font-size: 16px;
    /* padding: 1px 2px 9px; */
}

#timeline .timeline-post .post-content .title {
    /* text-transform: capitalize; */
    font-size: 17px;
    color: var(--text-color);
    font-weight: 500;
}

#timeline .timeline-post .post-image {
    height: 100%;
    width: 100%;
}

#timeline .timeline-post .post-image img {
    max-height: 560px;
    width: 100%;
    object-fit: cover;
}

#timeline .timeline-post .post-reaction {
    padding: 10px 12px;
}

#timeline .timeline-post .post-reaction .reaction-count {
    display: flex;
    padding-bottom: 5px;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

#timeline .timeline-post .reaction-count .left {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#timeline .timeline-post .reaction-count .left .icon {
    display: flex;
    align-items: center;
}

#timeline .timeline-post .reaction-count .left .icon .like {
    z-index: 30;
}

#timeline .timeline-post .reaction-count .left .icon .love {
    position: relative;
    left: -3px;
    z-index: 20;
}

#timeline .timeline-post .reaction-count .left .icon .emoji {
    position: relative;
    left: -6px;
    z-index: 10;
}

#timeline .timeline-post .reaction-count .left .total-like {
    font-size: 14px;
    color: var(--alt-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-count .left .total-like:hover {
    color: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-count .right {
    display: flex;
    gap: 10px;
    cursor: pointer;
    align-items: center;
}

#timeline .timeline-post .reaction-count .right .comments {
    font-size: 14px;
    color: var(--alt-color);
    text-transform: capitalize;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

#timeline .timeline-post .reaction-count .right .comments:hover {
    color: var(--primary-color);
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

#timeline .timeline-post .reaction-count .right .share {
    font-size: 14px;
    color: var(--alt-color);
    text-transform: capitalize;
}

.showless {
    text-decoration: underline;
    color: var(--primary-color);
    margin: 0 20px;
}

.emojiBar svg {
    cursor: pointer;
}

.emojiBar {
    position: relative;
}

.emojiBarBox {
    height: 50px;
    width: 200px;
    top: -42px;
    overflow: hidden;
    left: -202px;
    position: absolute;
    z-index: 1258;
    display: none;
    animation: emojiAn 0.2s ease-in-out;
    justify-content: center;
    border: 1px solid var(--border-color);
    align-items: center;
    background-color: var(--white-color);
    border-radius: 6px 6px 0px 6px;
    -webkit-border-radius: 6px 6px 0px 6px;
    -moz-border-radius: 6px 6px 0px 6px;
    -ms-border-radius: 6px 6px 0px 6px;
    -o-border-radius: 6px 6px 0px 6px;
    -webkit-animation: emojiAn 0.2s ease-in-out;
}

@keyframes emojiAn {
    0% {
        opacity: 0;
        transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
    }
}

.emojiBarBox .swiper {
    height: 100%;
    width: 100%;
}

.emojiBarBox .swiper-wrapper {
    display: flex;
    align-items: center;
    margin: 0px 20px;
}

.emojiBarBox .swiper-wrapper .swiper-slidecustom {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.emojiBarBox .swiper-button-prev,
.emojiBarBox .swiper-button-next {
    width: 8%;
    background-color: var(--white-color);
}

.emojiBarBox .swiper-button-prev {
    left: 0;
    background-color: var(--white-color) !important;
}

.emojiBarBox .swiper-button-next {
    right: 0;
}

.emojiBarBox .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
    color: var(--alt-color);
}

.emojiBarBox .swiper-button-next:after {
    font-size: 18px;
    font-weight: bold;
    color: var(--alt-color);
}

.emojiBarBox .con {
    font-size: 22px;
    cursor: pointer;
}

/* todo REACTION BUTTON */

#timeline .timeline-post .reaction-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#timeline .timeline-post .reaction-btn .left {
    display: flex;
    gap: 5px;
    align-items: center;
    cursor: pointer;
    position: relative;
}

#timeline .timeline-post .reaction-btn .left:hover .text {
    color: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-btn .react-emoji {
    position: absolute;
    top: -45px;
    left: 0;
    width: 280px;
    border: 1px solid var(--trans-border);
    background-color: var(--card-bg);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
        rgba(0, 0, 0, 0.23) 0px 4px 6px;
    z-index: 2585;
    height: 45px;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

#timeline .timeline-post .react-emoji .react-box {
    display: flex;
    gap: 10px;
}

#timeline .timeline-post .react-emoji .react-box .box:nth-child(6) {
    animation: firstEmoji 0.2s linear;
    -webkit-animation: firstEmoji 0.2s linear;
}

@keyframes firstEmoji {
    0% {
        transform: translateY(40px);
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
    }
}

#timeline .timeline-post .react-emoji .react-box .box:nth-child(5) {
    animation: secondEmoji 0.2s linear;
    -webkit-animation: secondEmoji 0.2s linear;
}

@keyframes secondEmoji {
    0% {
        transform: translateY(60px);
        -webkit-transform: translateY(60px);
        -moz-transform: translateY(60px);
        -ms-transform: translateY(60px);
        -o-transform: translateY(60px);
    }
}

#timeline .timeline-post .react-emoji .react-box .box:nth-child(4) {
    animation: threeEmoji 0.2s linear;
    -webkit-animation: threeEmoji 0.2s linear;
}

@keyframes threeEmoji {
    0% {
        transform: translateY(60px);
        -webkit-transform: translateY(60px);
        -moz-transform: translateY(60px);
        -ms-transform: translateY(60px);
        -o-transform: translateY(60px);
    }
}

#timeline .timeline-post .react-emoji .react-box .box:nth-child(3) {
    animation: fourEmoji 0.2s linear;
    -webkit-animation: fourEmoji 0.2s linear;
}

@keyframes fourEmoji {
    0% {
        transform: translateY(60px);
        -webkit-transform: translateY(60px);
        -moz-transform: translateY(60px);
        -ms-transform: translateY(60px);
        -o-transform: translateY(60px);
    }
}

#timeline .timeline-post .react-emoji .react-box .box:nth-child(2) {
    animation: fiveEmoji 0.2s linear;
    -webkit-animation: fiveEmoji 0.2s linear;
}

@keyframes fiveEmoji {
    0% {
        transform: translateY(60px);
        -webkit-transform: translateY(60px);
        -moz-transform: translateY(60px);
        -ms-transform: translateY(60px);
        -o-transform: translateY(60px);
    }
}

#timeline .timeline-post .react-emoji .react-box .box:nth-child(1) {
    animation: sixEmoji 0.2s linear;
    -webkit-animation: sixEmoji 0.2s linear;
}

@keyframes sixEmoji {
    0% {
        transform: translateY(60px);
        -webkit-transform: translateY(60px);
        -moz-transform: translateY(60px);
        -ms-transform: translateY(60px);
        -o-transform: translateY(60px);
    }
}

#timeline .timeline-post .react-emoji .react-box .box {
    height: 35px;
    width: 35px;
    line-height: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#timeline .timeline-post .react-emoji .react-box .box svg {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .react-emoji .react-box .box svg:hover {
    transform: scale(1.2);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}

#timeline .timeline-post .reaction-btn .left .icon svg path {
    stroke: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-btn .left:hover .likeButton path {
    stroke: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-btn .center {
    display: flex;
    gap: 4px;
    align-items: center;
    cursor: pointer;
}

#timeline .timeline-post .reaction-btn .center:hover svg path {
    fill: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-btn .center:hover .text {
    color: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-btn .right {
    display: flex;
    gap: 5px;
    align-items: center;
    cursor: pointer;
}

#timeline .timeline-post .reaction-btn .right:hover .text {
    color: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#timeline .timeline-post .reaction-btn .right:hover svg path {
    /* stroke: var(--primary-color); */
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

/* todo **** TIMELINE HISTORY-POST  **** */

#timeline .history-post .post-content .title {
    color: var(--primary-color);
    font-weight: 500;
}

#timeline .card-section {
    padding: 10px 12px;
}

#timeline .card-section .box {
    border-radius: 7px;
    background-color: var(--white-color);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

#timeline .card-section .box .head {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    justify-content: space-between;
    align-items: center !important;
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    /* height: 40px; */
    /* line-height: 40px; */
    background-color: var(--gray-bg);
    border-radius: 26px;
    margin: 10px;
    margin-bottom: 0;
}

.card-section .box .head .left {
    cursor: pointer;
}

.card-section .box .head .right {
    cursor: pointer;
}

#timeline .card-section .box .body {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 10px;
    text-align: center;
    gap: 0px;
    position: relative;
    align-items: center;
}

#timeline .card-section .box .body .img {
    height: 50px;
    width: 50px;
    overflow: hidden;
    border-radius: 50%;
}

#timeline .card-section .box .body .img img {
    height: 50px;
    width: 50px;
    object-fit: cover;
}

#timeline .card-section .box .group-icon svg {
    position: relative;
    top: 10px;
}

#timeline .card-section .box .body .center {
    line-height: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#timeline .card-section .box .center .game-name {
    text-transform: capitalize;
    font-size: 15px;
    color: var(--text-color);
}

#timeline .card-section .box .body .center .score {
    font-weight: bold;
    font-size: 32px;
    color: var(--head-text);
    margin: 0;
}

#timeline .card-section .box .body .center .line {
    background-color: var(--border-color);
    height: 70px;
    width: 2px;
}

#timeline .card-section .box .body .center .time {
    text-transform: capitalize;
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-color);
}

#timeline .card-section .circle {
    cursor: pointer;
}

#timeline .card-section .circle svg path {
    fill: var(--alt-color);
}

#timeline .card-section .box .body .name {
    margin: 0;
    line-height: 17px;
    text-align: center;
    text-transform: capitalize;
    font-weight: 500;
    margin-top: 5px;
    font-size: 14px;
    color: var(--text-color);
    max-width: 60%;
    overflow-wrap: anywhere;
}

#timeline .card-section .box .body .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#timeline .card-section .box .body .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#timeline .card-section .box .body .left .win-box {
    height: 25px;
    width: 25px;
    background-color: #13ab06;
    color: #fff;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    left: 10px;
    top: 10px;
}

#timeline .card-section .box .body .right .lose-box {
    height: 25px;
    width: 25px;
    background-color: var(--secondary-color);
    color: #fff;

    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    right: 10px;
    top: 10px;
}

#timeline .timeline-post .created-on {
    font-size: 14px;
    color: var(--secondary-color);
    text-transform: capitalize;
    padding: 12px;
    padding-bottom: 0;
}

/* todo **** TIMELINE MENU MODAL  **** */

#menuModal .modal-body {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    margin: 15px;
    padding: 0;
    overflow: hidden;
}

#menuModal .modal-body a {
    display: block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    text-transform: capitalize;
    color: var(--head-text);
    font-weight: 500;
    transition: 0.3s;
    background-color: var(--white-color);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#menuModal .modal-body a:hover {
    color: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#menuModal .modal-body a:last-child {
    border-bottom: none;
}

/* todo **** DEFENSE MODAL  **** */

#defenseModal .modal-body {
    padding: 0;
    padding-bottom: 15px;
}

#defenseModal .box {
    padding: 10px 15px;
    padding-bottom: 5px;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

#defenseModal .box .right .name {
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--head-text);
}

#defenseModal .box .right .details {
    font-size: 15px;
    text-transform: capitalize;
    color: var(--text-color);
}

#defenseModal .box svg {
    position: relative;
    top: 2px;
}

#defenseModal .box svg path {
    fill: var(--primary-color);
}

#timeline .timelineShareModal .modal-dialog {
    display: flex;
    align-items: center;
}

#timeline .timelineShareModal {
    position: relative;
    bottom: auto;
    left: 0;
}

/* todo **** COMMENTS PAGE  **** */

#commentsPage .head {
    display: flex;
    justify-content: space-between;
    height: 0px;
    align-items: center;
    position: sticky;
    /* top: 40px; */
    background-color: var(--white-color);
    border-bottom: 1px solid var(--trans-border);
}

#commentsPage .reaction-count .left a {
    text-decoration: none;
}

#commentsPage .reaction-count .left {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#commentsPage .reaction-count .left .icon {
    display: flex;
    align-items: center;
}

#commentsPage .reaction-count .left .icon .like {
    z-index: 30;
}

#commentsPage .reaction-count .left .icon .love {
    position: relative;
    left: -3px;
    z-index: 20;
}

#commentsPage .reaction-count .left .icon .emoji {
    position: relative;
    left: -6px;
    z-index: 10;
}

#commentsPage .reaction-count .left .total-like {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--alt-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#commentsPage .reaction-count .left .total-like svg {
    margin-left: 8px !important;
}

#commentsPage .reaction-count .left .total-like:hover {
    color: var(--text-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#commentsPage .head .right svg:hover path {
    fill: var(--primary-color);
    stroke: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    cursor: pointer;
}

/* !========= */

#commentsPage .dropdown ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#commentsPage .dropdown ul li {
    position: relative;
    display: inline-block;
    padding: 8px;
    font-size: 16px;
    padding-left: 5px;
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    text-transform: capitalize;
}

#commentsPage .dropdown .sublist {
    /* display: none; */
    position: absolute;
    top: 40px;
    left: 0px;
    z-index: 1;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--white-color);
}

#commentsPage .dropdown .sublist li {
    padding: 5px;
    color: var(--text-color);
    cursor: pointer;
    text-align: center;
    padding-left: 5px;
    font-size: 15px;
    position: relative;
    left: 4px;
    border-bottom: 1px solid var(--border-color);
    text-transform: capitalize;
}

#commentsPage .dropdown .sublist li:last-child {
    border-bottom: none;
}

#commentsPage .comment-box {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    width: 100%;
}

#commentsPage .comment-box .left .img {
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#commentsPage .comment-box .left .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#commentsPage .comment-box .right {
    width: 100%;
}

#commentsPage .comment-box .right .box {
    /* border: 1px solid var(--border-color); */
    border-radius: 4px;
    background-color: var(--gray-bg);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 10px;
    overflow: hidden;
}

#commentsPage .comment-box .right .box .name {
    font-size: 16px;
    color: var(--head-text);
    font-weight: 600;
    text-transform: capitalize;
}

#commentsPage .comment-box .right .box .details {
    font-size: 14px;
    /* text-transform: capitalize; */
    color: var(--text-color);
}

#commentsPage .comment-box .reply-section {
    display: flex;
    gap: 25px;
}

#commentsPage .comment-box .reply-section .time {
    padding: 5px;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);
}

#commentsPage .comment-box .reply-section .like {
    padding: 5px;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);
    cursor: pointer;
}

#commentsPage .comment-box .reply-section .total {
    text-transform: capitalize;
    font-size: 12px;
    color: var(--text-color);
    cursor: pointer;
}

#commentsPage .comment-box .reply-section .reply {
    padding: 5px;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);
    cursor: pointer;
}

#commentsPage .reply-box {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    padding-left: 30px;
    width: 100%;
}

#commentsPage .reply-box .left .img {
    height: 30px;
    width: 30px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#commentsPage .reply-box .left .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#commentsPage .reply-box .right .box {
    /* border: 1px solid var(--border-color); */
    border-radius: 4px;
    background-color: var(--gray-bg);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 10px;
}

#commentsPage .reply-box .right .box .name {
    font-size: 14px;
    color: var(--head-text);
    font-weight: 600;
    text-transform: capitalize;
}

#commentsPage .reply-box .right .box .details {
    font-size: 13px;
    text-transform: capitalize;
    color: var(--text-color);
}

#commentsPage .reply-box .reply-section {
    display: flex;
    gap: 15px;
}

#commentsPage .reply-box .reply-section .time {
    padding: 5px;
    text-transform: capitalize;
    font-size: 13px;
    color: var(--text-color);
}

#commentsPage .reply-box .reply-section .like {
    padding: 5px;
    text-transform: capitalize;
    font-size: 13px;
    color: var(--text-color);
    cursor: pointer;
}

#commentsPage .reply-box .reply-section .reply {
    padding: 5px;
    text-transform: capitalize;
    font-size: 13px;
    color: var(--text-color);
    cursor: pointer;
}

.comment-btn {
    background-color: var(--white-color);
    position: sticky;
    bottom: 0px;
    padding: 5px 12px;
}

.comment-btn .comment-input {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: var(--input-bg);
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 14px;
    padding-left: 12px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    resize: none;
}

.comment-btn .hide-box {
    padding: 5px 15px;
    padding-top: 0;
    display: flex;
    background-color: var(--input-bg);
    justify-content: space-between;
    display: none;
    padding-bottom: 0;
    line-height: 20px;
    border-radius: 40px;
    align-items: center;
    animation: hideAnime 0.5s linear;
    -webkit-animation: hideAnime 0.5s linear;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

@keyframes hideAnime {
    0% {
        opacity: 0;
    }
}

.comment-btn .hide-box .left {
    display: flex;
    gap: 15px;
    align-items: center;
}

.comment-btn .hide-box .left svg {
    cursor: pointer;
}

.comment-btn .hide-box .left svg path {
    fill: var(--alt-color);
}

.comment-btn .hide-box .right svg {
    cursor: pointer;
}

.comment-btn .hide-box .right svg path {
    stroke: var(--alt-color);
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

.comment-btn .hide-box .right svg:hover path {
    stroke: var(--primary-color);
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

.text-sec {
    margin-top: 10px;
    width: 100%;
    padding: 10px;
    position: sticky;
    bottom: 0;
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: var(--white-color);
}

.text-sec .text-box {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    background-color: var(--gray-bg);
    width: 100%;
    overflow: hidden;
    min-height: 40px;
    justify-content: space-between;
    padding: 0px 10px;

    align-items: flex-end;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}

.text-sec .text-box .left {
    width: 10%;
    position: sticky;
    bottom: 8px;
}

.text-sec .text-box .right {
    display: flex;
    gap: 8px;
    position: sticky;
    bottom: 8px;
    width: 20%;
    justify-content: flex-end;
}

.text-sec .text-box .center {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: baseline;
}

.text-sec .text-box .center textarea {
    width: 100%;
    height: 30px;
    outline: none;
    border: none;
    resize: none;
    appearance: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    padding-left: 5px;
    line-height: 15px;
    background-color: transparent;
    color: var(--text-color);
    position: relative;
    top: 3px;
}

.text-sec .text-box #sendButton path {
    stroke: var(--primary-color);
    fill: transparent;
}

/* todo **** REACTION TOTAL Page  **** */

#allReaction .head-react {
    display: flex;
    gap: 5px;
    align-items: center;

    text-transform: capitalize;
    font-weight: 500;
    font-size: 15px;
    border-bottom: 1px solid var(--border-color);
}

#allReaction .react {
    padding: 10px;
    position: relative;
    cursor: pointer;
    color: var(--text-color);
}

.activeReact .icon svg path {
    fill: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.activeReact::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    left: 0;
    bottom: 0px;
    background-color: var(--primary-color);
    animation: barAnime 0.3s ease-in-out;
    -webkit-animation: barAnime 0.3s ease-in-out;
}

@keyframes barAnime {
    0% {
        opacity: 0;
    }
}

#allReaction .all-reactor {
    margin-top: 20px;
}

#allReaction .all-reactor .reactor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

#allReaction .all-reactor .reactor .name {
    color: var(--text-color);
}

#allReaction .all-reactor .reactor .add-friends-btn {
    padding: 2px 8px;
    background-color: var(--gray-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    font-weight: 500;
    text-transform: capitalize;
    font-size: 14px;
    text-align: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#allReaction .all-reactor .reactor .add-friends-btn:hover {
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    border: 1px solid var(--primary-color);
}

#allReaction .all-reactor .reactor .left {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
}

#allReaction .all-reactor .reactor .left .img {
    height: 40px;
    width: 40px;
    position: relative;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#allReaction .all-reactor .reactor .left .img img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#allReaction .all-reactor .reactor .left .img .circle {
    position: absolute;

    bottom: -5px;
    right: -5px;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
    background-color: var(--white-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/* todo **** NOTICEBOARD Page  **** */

.noticeboard .timeline-post .post-content .title {
    color: var(--primary-color) !important;
    font-size: 16px;
}

/* todo **** SPORTS Page  **** */

#sports {
    min-height: auto;
    padding-bottom: 0px;
}

.sports-head {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    /* overflow: hidden; */
}

.sports-head button {
    color: var(--head-text);
    background-color: var(--white-color);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
    width: 100%;
    border: none;
    border-right: 1px solid var(--primary-color);
}

.sports-head button:first-child {
    border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px 0px 4px;
    -moz-border-radius: 4px 0px 0px 4px;
    -ms-border-radius: 4px 0px 0px 4px;
    -o-border-radius: 4px 0px 0px 4px;
}

.sports-head button:last-child {
    border: none;
    border-radius: 0px 4px 4px 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    -ms-border-radius: 0px 4px 4px 0px;
    -o-border-radius: 0px 4px 4px 0px;
}

.sports-head .activeBtn {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
    position: relative;
}

.sports-head .activeBtn::after {
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 40%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--primary-color);
}

#sports .sports-content {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 20px;
}

#sports .sports-content .box {
    height: 108px;
    border-radius: 4px;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    text-transform: capitalize;
    font-weight: 500;
    background-image: url("../assets/default_cover_image copy.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#sports .sports-content .game-name {
    background-color: #0008;
    display: block;
    width: 100%;
    text-align: center;
    padding: 5px 0px;
    color: #fff;
}

/* todo ==== CLASSES-SECTION ==== --> */

#classes {
    padding-bottom: 0px;
}

#classes a {
    text-decoration: none;
}

#classes button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    background-color: var(--white-color);
    color: var(--text-color);
    border: none;
    padding-left: 0;
    text-transform: capitalize;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

/* todo ==== SPINNING-SECTION ==== --> */

#spinning {
    margin: 0px 12px !important;
}

#spinning .card-section .box {
    width: 100%;
    margin-top: 15px;
    height: auto;
    display: flex;
    background-color: var(--card-bg);
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

#spinning .card-section .box .left {
    text-align: center;
    width: 30%;
}

#spinning .card-section .box .day {
    font-size: 16px;
    text-transform: capitalize;
    color: var(--primary-color);
    font-weight: 500;
}

#spinning .card-section .box .center {
    width: 2px !important;
    height: 70px !important;
    background-color: var(--border-color);
}

#spinning .card-section .box .right {
    width: 60%;
}

#spinning .card-section .box .right .time {
    text-align: center;
    text-transform: uppercase;
    color: var(--text-color);
}

/* todo ==== PT/COACH-SECTION ==== --> */

.pt-coach {
    /* padding-top: 15px;  */
    min-height: 100vh;
}

.pt-coach a {
    text-decoration: none;
}

.pt-coach .card-section .box {
    display: flex;
    align-items: center;
    margin-top: 15px;
    background-color: var(--card-bg);
    gap: 10px;

    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
}

.pt-coach .card-section .box .left .img {
    height: 75px;
    width: 75px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    overflow: hidden;
}

.pt-coach .card-section .box .left .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.pt-coach .card-section .box .right {
    text-align: left;
}

.pt-coach .card-section .box .right .name {
    font-size: 18px;
    color: var(--text-color);
    font-weight: 600;
    text-transform: capitalize;
}

.pt-coach .card-section .box .right .gender {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--text-color);
}

.pt-coach .card-section .box .right .age {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--text-color);
}

.pt-coach .card-section .box .right .title {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 500;
    color: var(--primary-color);
}

/* todo ==== COACH-PROFILE ==== --> */

#coachProfile .card-section .box {
    padding: 10px;
    box-shadow: none;
    position: relative;
    display: flex;
    align-items: center;
    border: none;
    background-color: var(--white-color);
}

#coachProfile .card-section .title {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-top: 10px;
}

#coachProfile .btn .chat {
    border: none;
    position: absolute;
    right: 10px;
    top: 40px;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 20px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#coachProfile .details {
    margin-top: 15px;
    text-transform: capitalize;
    color: var(--text-color);
}

#coachProfile .chat-me {
    width: 100%;
    margin-top: 15px;
    border: none;
    background-color: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--primary-color);
    transition: 0.3s;
    padding: 7px;
    text-transform: capitalize;
    font-weight: 500;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#coachProfile .chat-me:hover {
    background-color: var(--white-color);
    color: var(--primary-color);
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

#coachProfile .total {
    color: var(--primary-color);
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 700;
}

#coachProfile #photosSec {
    display: none;
}

#coachProfile #videosSec {
    display: none;
}

#coachProfile .edit-icon {
    cursor: pointer;
}

/* todo ==== SHOW IMAGE-MODAL ==== --> */

#showImageModal .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#showImageModal .modal-content {
    border-radius: 6px;
    border: none;
    width: 95%;
}

#showImageModal .dropdown-menu {
    min-width: 8rem;
    top: 10px;
}

#showImageModal .dropdown-menu li {
    text-align: center;
    padding: 3px 5px !important;
}

.dropstart .dropdown-toggle::before {
    display: none;
}

#showImageModal .dropdown-menu {
    min-width: 7rem;
    margin: 0;
    padding: 0;
}

#showImageModal .dropdown-menu li {
    color: var(--secondary-color);
    font-size: 15px;
    text-align: center;
    cursor: pointer;
}

#showImageModal .dropdown-menu li:hover {
    background-color: #f1f1f1;
}

#showImageModal .dropdown-menu li:last-child {
    border: none;
}

#showImageModal .modal-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 10px 8px;
}

#showImageModal .modal-header svg {
    cursor: pointer;
}

#showImageModal .modal-header .icon {
    height: 30px;
    width: 30px;
    display: flex;
    text-align: right;
    justify-content: center;
    align-items: center;
}

#showImageModal .modal-content .modal-body {
    overflow: hidden;
}

#showImageModal .modal-content .modal-body img {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

/* todo ==== CONTACT-PAGE ==== --> */

#contactPage {
    margin: 0px 12px !important;
    min-height: auto;
    padding-bottom: 10px;
}

#contactPage .head {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 90px;
}

#contactPage .head .img img {
    height: 100%;
    width: 150px;
}

#contactPage .body {
    margin-top: 20px;
}

#contactPage .body .input-section input,
#contactPage .body .input-section textarea {
    width: 100%;
    display: block;
    padding: 12px 10px;
    border: none;
    outline: none;
    margin-top: 10px;
    font-size: 16px;
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#contactPage .body .input-section input::placeholder,
#contactPage .body .input-section textarea::placeholder {
    color: var(--alt-color);
    text-transform: capitalize;
    font-weight: 500;
}

#contactPage .body .input-section textarea {
    min-height: 120px;
    max-height: 200px;
    min-width: 100%;
    max-width: 100%;
}

/* ! COMPLETE GROUP */

#completeGroup {
    background-color: none;
}

.group-head {
    margin-top: 20px;
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.group-head button {
    color: var(--text-color);
    background-color: var(--white-color);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
    width: 100%;
    border: none;
    border-right: 1px solid var(--primary-color);
}

.group-head button:first-child {
    border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px 0px 4px;
    -moz-border-radius: 4px 0px 0px 4px;
    -ms-border-radius: 4px 0px 0px 4px;
    -o-border-radius: 4px 0px 0px 4px;
}

.group-head button:last-child {
    border: none;
    border-radius: 0px 4px 4px 0px;
    -webkit-border-radius: 0px 4px 4px 0px;
    -moz-border-radius: 0px 4px 4px 0px;
    -ms-border-radius: 0px 4px 4px 0px;
    -o-border-radius: 0px 4px 4px 0px;
}

.group-head .activeBtn {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
    position: relative;
}

.group-head .activeBtn::after {
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 40%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--primary-color);
}

#completeGroup .search-bar {
    margin-top: 30px;
}

#completeGroup .search-bar .input {
    display: flex;
    width: 100%;
}

#completeGroup .search-bar .input input {
    width: 100%;
    text-transform: capitalize;
    border: none;
    outline: none;
    border: 1px solid var(--border-color);
    padding: 5px 0px;
    color: var(--text-color);
    padding-left: 10px;
    padding-right: 30px;
    border-radius: 4px;
    position: relative;
    background-color: var(--white-color);
}

#completeGroup .search-bar .input input::placeholder {
    color: var(--alt-color);
    text-transform: capitalize;
}

#completeGroup .choose-sport {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

#completeGroup .choose-sport .left {
    width: 40%;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);
    font-weight: 500;
}

#completeGroup .choose-sport .right {
    width: 60%;
}

#completeGroup .choose-sport .right select {
    width: 100%;
    padding: 5px;
    padding-right: 10px;
    border-radius: 4px;
    background-color: var(--white-color);
    color: var(--alt-color);
    border: 1px solid var(--border-color);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("../assets/downIcon.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-size: auto;
    background-position-y: 50%;
    cursor: pointer;
}

#completeGroup .group-image {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

#completeGroup .group-image .left {
    width: 40%;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);

    font-weight: 500;
}

#completeGroup .group-image .right {
    width: 60%;
}

#completeGroup .group-image .right .upload {
    padding: 5px 20px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    text-transform: capitalize;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#completeGroup .add-players {
    margin-top: 15px;
}

#completeGroup .add-players .add {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color);

    text-transform: capitalize;
}

#completeGroup .add-players .search-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

#completeGroup .add-players .input {
    display: flex;
    width: 100%;
}

#completeGroup .search .input input {
    width: 100%;
    border: none;
    outline: none;
    border: 1px solid var(--border-color);
    padding: 5px 0px;
    padding-left: 10px;
    padding-right: 30px;
    border-radius: 4px;
    position: relative;
    background-color: var(--white-color);
    color: var(--text-color);
}

#completeGroup .search .input input::placeholder {
    text-transform: capitalize;
    color: var(--alt-color);
}

#completeGroup .add-players .search .input {
    width: 100%;
    position: relative;
}

#completeGroup .add-players .search .input .search-icon {
    position: absolute;
    right: 10px;
    line-height: 30px;
    cursor: pointer;
    z-index: 333;
    /* top: 11px; */
}

#completeGroup .search .input .search-icon:hover svg path {
    fill: var(--primary-color);
}

#completeGroup .players-box {
    margin-top: 15px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    overflow-y: auto;
    height: 300px;
}

#completeGroup .players-box .left {
    display: flex;
    gap: 10px;
    align-items: center;
}

#completeGroup .players-box .left .name {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);

    text-transform: capitalize;
}

#completeGroup .players-box .player {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 10px;
}

#completeGroup .players-box .player .img {
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#completeGroup .players-box .player .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#completeGroup .players-box .player:last-child {
    border-bottom: none;
}

#completeGroup .players-box .player .right {
    align-items: center;
    display: flex;
}

#completeGroup input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
}

#completeGroup input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-color);
    cursor: pointer;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#completeGroup input[type="checkbox"]:checked::before {
    content: "✔";
    display: block;
    text-align: center;
    line-height: 20px;
    font-size: 17px;
    color: #c8c8c8;
}

/* ! PROFILE IMAGE  */

#profileImage .image-select {
    width: 100%;
    height: 70vh;
    position: relative;
}

#profileImage .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#profileImage .img {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

#profileImage .img:after {
    position: absolute;
    content: "";
    width: 300px;
    height: 300px;
    box-shadow: 0 0 0 300px var(--text-color);
    opacity: 0.85;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--white-color);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

#profileImage .foot-box {
    z-index: 25;
    bottom: 55px;
    position: relative;
    padding: 0px 12px;
    text-transform: capitalize;
    color: var(--white-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#profileImage .foot-box .rotate {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    width: 10%;
    text-align: center;
}

#profileImage .foot-box .rotate svg {
    position: relative;
    left: 15px;
}

#profileImage .foot-box .rotate svg path {
    fill: var(--white-color);
}

#profileImage .foot-box .reset {
    cursor: pointer;
}

#profileImage .btn-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

#profileImage .btn-section button {
    width: 100%;
    border: none;
    padding: 10px;
    text-transform: capitalize;
    font-weight: 500;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#profileImage .btn-section .cancel {
    background-color: var(--white-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#profileImage .btn-section .save {
    background-color: var(--primary-color);
    color: var(--white-color);
}

/* todo ==== CHATROOM-HEAD ==== --> */

.chatroomHead .back-btn-section {
    position: static;
    /* or sticky */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /* Ensure consistent box sizing */
    box-sizing: border-box;
}

.chatroomHead .back-btn-section .center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding-left: 0px;
    text-decoration: none;
}

.chatroomHead .back-btn-section .singleCenter {
    display: flex;
    justify-content: start !important;
    align-items: center;
    gap: 5px;
    padding-left: 0px;
    text-decoration: none;
}

.singleCenter a {
    margin-left: 6px;
}

.chatroomHead .back-btn-section .center .img {
    height: 35px;
    overflow: hidden;
    width: 35px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.chatroomHead .back-btn-section .center .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.manageName {
    /* width: calc(100% - 40px); */
    white-space: nowrap;
}

.chatroomHead .back-btn-section .right {
    display: flex;
    gap: 10px;
    width: 30%;
}

.chatroomHead .back-btn-section svg {
    cursor: pointer;
}

.chatroomHead .back-btn-section .right .userBtn {
    border: none;
    background-color: transparent;
    display: flex;
    position: relative;
    cursor: pointer;
}

.chatroomHead .back-btn-section .right .userBtn .count {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
    margin: 0;
    line-height: 18px;
    font-size: 12px;
    position: absolute;
    top: 12px;
    left: 13px;
    z-index: 50;
}

/* .chatroomHead .back-btn-section .center svg path {
   fill: var(--secondary-color);
 } */

.chatroomHead .back-btn-section .right .send-icon path {
    fill: var(--primary-color);
}

.chatroomHead .back-btn-section .right .line-up path {
    fill: var(--alt-color);
}

/* todo ==== CHATROOM-SINGLE ==== --> */

.chatroom .day-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.chatroom .day-line .left {
    width: 28%;
    height: 1px;
    background-color: var(--border-color);
}

.chatroom .day-line .day {
    font-size: 14px;
    text-transform: capitalize;
    color: var(--alt-color);

    text-align: center;
}

.chatroom .day-line .right {
    width: 28%;
    height: 1px;
    background-color: var(--border-color);
}

.chat-box-left {
    display: flex;
    gap: 10px;
    margin-top: 5px;
    padding: 0px 12px;
    width: 90%;
    align-items: flex-start;
}

.chat-box-left .left .img {
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.chat-box-left .left .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-box-left .right .head {
    display: flex;
    gap: 5px;
    font-size: 14px;
    color: var(--alt-color);
    text-transform: lowercase;
}

.chat-box-left .right .main-content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.chat-box-left .right .main-content .text-box {
    padding: 8px;
    text-transform: capitalize;
    font-size: 16px;
    background-color: var(--chat-bg);
    border-radius: 0px 8px 8px 8px;
    -webkit-border-radius: 0px 8px 8px 8px;
    -moz-border-radius: 0px 8px 8px 8px;
    -ms-border-radius: 0px 8px 8px 8px;
    -o-border-radius: 0px 8px 8px 8px;
}

.chat-box-right .left {
    width: 50%;
}

.chat-box-right .time {
    font-size: 14px;
    color: var(--alt-color);
    text-transform: lowercase;
    text-align: right;
}

.chat-box-right .main-content .text-box {
    padding: 8px 8px;
    text-transform: capitalize;
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--chat-bg-sec);
    border-radius: 8px 8px 0px 8px;
    -webkit-border-radius: 8px 8px 0px 8px;
    -moz-border-radius: 8px 8px 0px 8px;
    -ms-border-radius: 8px 8px 0px 8px;
    -o-border-radius: 8px 8px 0px 8px;
}

.chat-box-right .main-content .text-box .files {
    display: flex;
    gap: 10px;
    background-color: var(--chat-bg-sec);
    padding: 5px;
    text-transform: uppercase;
    border: 1px solid var(--trans-border);
}

.chat-box-right .main-content .text-box .file-details {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.chat-box-right .main-content .text-box .file-size {
    text-transform: uppercase;
}

.chat-box-right .main-content .text-box .file-type {
    text-transform: lowercase;
}

.status-bar {
    /* width: 432px !important; */
    position: fixed;
    top: 38px;
    padding: 5px 20px;
    display: flex;
    justify-content: space-between;
    height: 45px;
    margin: 0 auto;
    margin-top: 10px;
    background-color: var(--primary-color);
    color: var(--white-color);
    text-transform: capitalize;
    font-weight: 500;
    font-size: 17px;
    text-align: center;
    align-items: center;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.status-bar .view-btn {
    padding: 5px 15px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    background-color: var(--white-color);
    color: var(--text-color);
    text-transform: capitalize;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.commentaticky {
    /* border-top: 1px solid var(--border-color);
     position: sticky;
     bottom: 0px;
     padding: 10px 12px;
     background-color: var(--white-color); */
    border-top: 1px solid var(--border-color);
    position: fixed;
    bottom: 0px;
    max-width: 432px;
    width: 100%;
    padding: 10px 12px;
    background-color: var(--white-color);
}

.commentaticky span {
    color: var(--head-text);
    font-size: 13px;
}

.chatbox-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 14px 12px;
    padding-bottom: 0px;
    border: none !important;
    gap: 10px;
    /* background-color: var(--white-color); */
    position: sticky;
    bottom: 0px;
    margin-top: 0px;
    width: 100%;
    height: 40px;
}

.chatbox-section .center,
.chatbox-section .center {
    width: 90%;
    overflow: hidden;
    padding-bottom: 0px;
    margin: 0;
    display: flex;
    align-items: flex-end;
    position: relative;
    padding: 0px 10px;
    line-height: 10px;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    background-color: var(--card-bg);
}

.chatbox-section .center .comments-right-icon {
    display: flex;
    gap: 10px;
    position: relative;
    bottom: 10px;
}

.chatbox-section .center .comments-right-icon svg {
    cursor: pointer;
}

.chatbox-section .center .icon svg {
    position: relative;
    bottom: 10px;
    cursor: pointer;
}

.chatbox-section .center textarea {
    width: 100%;
    line-height: 18px;
    border: none;
    font-size: 16px;
    overflow: hidden;
    overflow-y: auto;
    background-color: transparent;
    resize: none;
    outline: none;
    appearance: none;
    padding-top: 12px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    color: var(--text-color);
    height: 2.5rem;
    box-shadow: none !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chatbox-section .center textarea::-webkit-scrollbar {
    display: none;
}

.text {
    color: var(--text-color);
}

.chatbox-section .center textarea::placeholder {
    color: var(--alt-color);
    text-transform: capitalize;
}

.chatbox-section .right {
    cursor: pointer;
}

.chatbox-section .text-box svg {
    cursor: pointer;
}

.chatbox-section .search-box button {
    height: 40px;
    width: 40px;
    border: none;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.chatbox-section #voiceSearch {
    transition: 0.2s;
    animation: anime 0.3s linear;
    -webkit-animation: anime 0.3s linear;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
}

.chatbox-section #sendIcon {
    transition: 0.2s;
    animation: anime 0.3s linear;
    -webkit-animation: anime 0.3s linear;
}

@keyframes anime {
    0% {
        opacity: 1;
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
    }
}

.chatbox-section .text-box svg path {
    fill: var(--alt-color);
}

.chatbox-section .text-box svg circle {
    stroke: var(--alt-color);
}

/* todo ==== GAME-INVITE-PAGE ==== --> */

#gameInvite .team .box {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#gameInvite .team .box .left,
#gameInvite .team .box .right {
    display: flex;
    align-items: center;
    gap: 10px;
    /* padding: 10px; */
}

#gameInvite .team .box .left .name {
    font-size: 18px;
    font-weight: 500;
    text-align: right;
    line-height: 20px;
    color: var(--text-color);
}

#gameInvite .team .box .right .name {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    line-height: 20px;
    color: var(--text-color);
}

#gameInvite .team .box .img-box {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}

#gameInvite .team .box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#gameInvite .team .box .center svg {
    height: 50px;
    width: 50px;
}

#gameInvite .team .box .center svg path {
    fill: var(--secondary-color);
}

/* add line up */

#gameInvite .add-line-up {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 0px;
    margin-top: 20px;
    padding-bottom: 10px;

    border-bottom: 1px solid var(--border-color);
}

#gameInvite .add-line-up .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

#gameInvite .add-line-up .name {
    font-size: 18px;
    font-weight: 500;
    /* text-align: right; */
    line-height: 20px;
    color: var(--text-color);
}

#gameInvite .add-line-up .img-box {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    overflow: hidden;
}

#gameInvite .add-line-up .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#gameInvite .add-line-up .right {
    display: flex;
    gap: 20px;
}

/* for south-side invite page */
#gameInvite .add-line-up .name-two {
    text-align: left;
}

.line-up-btn {
    border: none;
    background-color: var(--primary-color);
    padding: 6px 22px;
    color: var(--primary-button-text);
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#gameInvite .add-line-up .success-icon {
    font-size: 22px;
    color: green;
    font-weight: 800;
}

.disabled-btn {
    background-color: var(--alt-color) !important;
}

#gameInvite .send-invite {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    background-color: var(--alt-color);
    color: var(--primary-button-text) !important;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    cursor: pointer;
}

/* details box */

#gameInvite .details-box {
    margin-top: 20px;
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

/* ! this is only for invite.html page details box */

.invite .details-box {
    border: 1px solid var(--border-color);
}

.details-box .text {
    background-color: var(--dashboard-bg);
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 500;
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.details-box .name-text {
    color: var(--primary-color);
    text-transform: capitalize;
    font-weight: 500;
}

.details-box .name-text .name {
    color: var(--text-color);
    font-weight: 600;
}

.details-box .game-name {
    font-size: 18px;
    margin-top: 10px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: capitalize;
}

.details-box .specific-input .title {
    font-weight: 500;
    color: var(--text-color);
    font-size: 16px;
    margin-top: 10px;
    text-transform: capitalize;
}

.details-box .specific-input input {
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    outline: none;
    color: var(--text-color);
    margin-top: 10px;
    padding: 5px 10px;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.details-box .date-input,
.time-input {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.details-box .date-input .date,
.details-box .time-input .time {
    text-transform: capitalize;
    color: var(--text-color);
    width: 35%;
}

.details-box .date-input input,
.details-box .time-input input {
    width: 65%;
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    color: var(--text-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    outline: none;
}

.details-box .time-input input::placeholder {
    color: var(--alt-color);
}

/* Venue ==== */

.details-box .venue {
    border-top: 1px solid var(--border-color);
}

.details-box .venue .title {
    font-size: 18px;
    margin-top: 10px;
    font-weight: 500;
    color: var(--primary-color);
    text-transform: capitalize;
}

.details-box .venue .venue-details {
    border: 1px solid var(--border-color);
    margin-top: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.details-box .venue .venue-item {
    display: flex;
    padding: 10px;
    gap: 8px;

    border-bottom: 1px solid var(--border-color);
}

.details-box .venue .venue-item:last-child {
    border: none;
}

.details-box .venue .venue-item .right {
    text-transform: capitalize;
    color: var(--text-color);
}

.details-box .venue .venue-item .right label {
    cursor: pointer;
    font-weight: 550;
    font-size: 16px;
    color: var(--text-color);
}

/* radio styling */

.details-box .venue-item svg .second {
    display: none;
}

.radioSelect svg circle {
    stroke: var(--primary-color);
}

.radioSelect svg .second {
    fill: var(--primary-color);
    display: block !important;
}

.radioSelect label {
    color: var(--primary-color) !important;
}

/* MODAL styling */

#lineUpPlayers .modal-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
}

#lineUpPlayers .modal-body {
    height: 370px;
}

#lineUpPlayers .modal-body .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--border-color);
    margin-top: 10px;
    background-color: var(--card-bg);
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#lineUpPlayers .modal-body .box:nth-child(1) {
    margin: 0;
}

#lineUpPlayers .modal-body .box .left .border-part {
    height: 56px;
    width: 56px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
}

#lineUpPlayers .modal-body .box .left {
    display: flex;
    gap: 10px;
    align-items: center;
}

#lineUpPlayers .modal-body .box .left .name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    text-transform: capitalize;
}

#lineUpPlayers .modal-body .box .left .img {
    height: 50px;
    width: 50px;
    position: relative;
    top: 2px;
    left: 2px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#lineUpPlayers .modal-body .box .left .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    line-height: 55px;
    position: relative;
    /* top: -4px; */
    left: 0px;
}

#lineUpPlayers .add-btn {
    text-transform: capitalize;
    font-weight: 500;
    border-radius: 4px;
    width: 75px;
    border: none;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#lineUpPlayers .modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

#lineUpPlayers .modal-footer .confirm-btn {
    padding: 8px 30px;
    border: none;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    font-weight: 500;
    text-transform: capitalize;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

/* !for invite page */

#gameInvite .details-box .box-header {
    display: flex;
    align-items: center;
    padding: 5px 0px;
    border-bottom: 1px solid var(--border-color);
}

#gameInvite .details-box .box-header .left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.details-box .box-header .name {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 16px;
    color: var(--primary-color);
}

.details-box .box-header .img {
    height: 40px;
    width: 40px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.details-box .box-header .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.details-box .box-body {
    padding: 5px 0px;
}

.details-box .box-body .game-details .details-box .box-body .text {
    color: var(--text-color);
    font-weight: 500;
    text-transform: capitalize;
}

.details-box .game-details .title {
    color: var(--primary-color);
    text-transform: capitalize;
    font-size: 500 !important;
    margin-top: 8px;
    text-decoration: underline;
}

.details-box .game-details .game-name {
    font-size: 16px;
    color: var(--alt-color);
    font-weight: normal;
    margin-top: 8px;
}

.details-box .game-details .sub-name {
    color: var(--secondary-color);
}

.details-box .game-details .date,
.details-box .game-details .time {
    text-transform: capitalize;
    color: var(--text-color);
}

.details-box .game-details .date .location {
    margin-top: 8px;
    text-transform: capitalize;
    color: var(--alt-color);
}

.details-box .box-footer {
    border-top: 1px solid var(--border-color);
    padding: 10px 0px;
    margin-top: 8px;
    display: flex;
    gap: 10px;
}

.details-box .game-details .location {
    color: var(--text-color);
}

.details-box .box-footer button {
    padding: 5px 20px;
    text-transform: capitalize;
    border: none;
    font-weight: 500;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.details-box .box-footer .accept-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.details-box .box-footer .decline-btn {
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
}

/* !for LINE-UP doubles and teams page */

.lineUp .team {
    padding: 10px 0px;
}

.lineUp .team .box {
    display: flex;
    border: 1px solid var(--border-color);
    align-items: center;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    position: relative;
}

.lineUp .team .box .left,
.lineUp .team .box .right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    width: 100%;
    cursor: pointer;
}

/* ! lineUpSingle page only one changes */

#lineUpSingle .team .box .left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    width: 100%;
    cursor: pointer;
    border: none;
}

.lineUp .team .box .right .icon {
    position: absolute;
    right: 8px;
}

.lineUp .team .box .right {
    justify-content: flex-start;
    padding-left: 10px;
}

.lineUp .team .box .left {
    justify-content: flex-end;
    padding-right: 10px;

    border-right: 1px solid var(--border-color);
}

.lineUp .team .box .left .icon {
    position: absolute;
    left: 8px;
}

.lineUp .team .box .left .name {
    font-size: 15px;
    font-weight: 500;
    text-align: right;
    line-height: 20px;
    color: var(--text-color);
}

.lineUp .team .box .right .name {
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    line-height: 20px;
    color: var(--text-color);
}

.lineUp .team .box .img-box {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    overflow: hidden;
}

.lineUp .team .box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lineUp .team .box .center svg {
    height: 40px;
    width: 40px;
}

.lineUp .activeBtn {
    background-color: var(--primary-color) !important;
    color: var(--primary-button-text) !important;
    position: relative;
}

.lineUp .activeBtn::after {
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 42%;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--primary-color);
}

.lineUp .activeBtn .name {
    color: var(--primary-button-text) !important;
}

.lineUp .activeBtn svg path {
    fill: var(--primary-button-text);
}

.lineUp #teamOnePlayers {
    animation: slideAnimationOne 0.3s linear;
    -webkit-animation: slideAnimationOne 0.3s linear;
}

@keyframes slideAnimationOne {
    0% {
        opacity: 0;
        transform: translateX(-30px);
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        -o-transform: translateX(-30px);
    }
}

.lineUp #teamTwoPlayers {
    display: none;
    animation: slideAnimation 0.3s linear;
    -webkit-animation: slideAnimation 0.3s linear;
}

@keyframes slideAnimation {
    0% {
        opacity: 0;
        transform: translateX(30px);
        -webkit-transform: translateX(30px);
        -moz-transform: translateX(30px);
        -ms-transform: translateX(30px);
        -o-transform: translateX(30px);
    }
}

.all-players {
    height: 500px;
    overflow: hidden;
    overflow-y: auto;
}

/* .all-players::-webkit-scrollbar{
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
 } */

.all-players .box {
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.all-players .box .left {
    border-right: 1px solid var(--border-color);
    padding-right: 10px;
}

.all-players .border-part {
    height: 55px;
    width: 55px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

.all-players .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 1.5px;
    top: 1px;
}

.all-players .border-part .img-part img {
    text-align: center;
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    left: 0px;
}

.all-players .box .right {
    padding-left: 10px;
    display: flex;
    gap: 0px;
    text-align: left;
    flex-direction: column;
}

.all-players .box .right .name {
    font-size: 16px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 600;
    text-align: left;
    margin: 0;
}

/* ! team-image page */

.team-image {
    position: relative;
    top: 0;
}

.diagonal-split {
    width: 100%;
    height: 100vh;
    position: relative;
    top: 0;
    z-index: 52855;
    background: linear-gradient(to bottom right, #1a3657 50%, #667c97 50%);
}

.diagonal-split-single {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a3657;
}

.diagonal-split .top {
    position: absolute;
    left: 20%;
    top: 23%;
}

.diagonal-split .name {
    font-size: 16px;
    color: var(--white-color);
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 5px;
}

.diagonal-split-single .name {
    font-size: 16px;
    color: var(--white-color);
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 5px;
    text-align: center;
    position: relative;
}

.diagonal-split .top .img {
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.diagonal-split .top .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.diagonal-split .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: var(--white-color);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.diagonal-split .bottom {
    position: absolute;
    right: 17%;
    bottom: 20%;
}

.diagonal-split-single .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.diagonal-split .bottom .img {
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.diagonal-split-single .bottom .img {
    height: 100px;
    width: 100px;
    overflow: hidden;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.diagonal-split .bottom .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.diagonal-split-single .bottom .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* todo ==== INVITATION-page ==== --> */

#invitation .text {
    color: var(--text-color);
    font-weight: 500;
    background-color: var(--dashboard-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#invitation #ifNoText {
    display: none;
}

#invitation .box {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    margin-top: 20px;
    padding-bottom: 10px;
}

#invitation .box .box-head {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

#invitation .box .box-head .game-name {
    font-size: 16px;
    text-transform: capitalize;
    color: var(--primary-color);
    font-weight: 500;
}

#invitation .box .box-body {
    padding: 10px;
}

#invitation .box .left .box-footer .left {
    width: 40%;
}

#invitation .box .right,
.box-footer .right {
    display: flex;
    justify-content: flex-start;
    width: 60%;
}

#invitation .box .name {
    font-size: 18px;
    color: var(--text-color);
    font-weight: 500;
    text-transform: capitalize;
}

#invitation .box .score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
    padding: 10px;
}

#invitation .box .score .right {
    display: flex;
    gap: 10px;
    align-items: center;
}

#invitation .box .score .right label {
    font-size: 16px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 500;
    cursor: pointer;
}

#invitation .box .score .right input {
    cursor: pointer;
    border: 1px solid var(--alt-color);
    margin-right: 3px;
}

#invitation .btn-part {
    padding: 0px 10px;
}

#invitation .box .box-body .result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#invitation .box .box-body .result .right input {
    width: 100%;
    border: none;
    outline: none;
    padding: 4px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: var(--white-color);
}

#invitation .box .box-body input::placeholder,
.box-footer input::placeholder {
    text-transform: capitalize;
    font-size: 15px;
    font-weight: 500;
    color: var(--alt-color);
}

#invitation .box .vs-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

#invitation .box .vs-icon .left {
    width: 45%;
    height: 1px;
    background-color: var(--border-color);
}

#invitation .box .vs-icon .icon-circle {
    height: 45px;
    width: 45px;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#invitation .box .vs-icon .right {
    width: 45%;
    height: 1px;
    background-color: var(--border-color);
}

#invitation .box .box-body .hello,
.box-footer .kiddos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}

#invitation .box .box-body .hello .right,
.box-footer .kiddos .right {
    display: flex;
    gap: 5px;
}

#invitation .box .box-body .hello .right .one,
.box-footer .kiddos .right .one {
    width: 40%;
}

#invitation .box .box-body .hello .right .two,
.box-footer .kiddos .right .two {
    width: 60%;
}

#invitation .box .box-body .hello .right input,
#invitation .box .box-footer .kiddos .right input {
    width: 100%;
    border: none;
    outline: none;
    padding: 4px;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: var(--white-color);
}

#invitation .box .box-body .hello .right select,
#invitation .box .box-footer .kiddos .right select {
    width: 100%;
    border: none;
    outline: none;
    padding: 5px;
    font-size: 15px;
    color: var(--text-color);
    font-weight: 500;
    text-transform: capitalize;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    background-color: var(--white-color);

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--white-color);
    background-image: url("../assets/downIcon.svg");
    background-size: auto;
    background-repeat: no-repeat;
    background-position-x: 95%;
    background-position-y: 50%;
    cursor: pointer;
}

#invitation .box .box-body .right,
.box-footer .right {
    display: flex;
    gap: 10px;
}

#invitation .box .box-footer {
    padding: 10px;
    padding-top: 0;
}

#invitation .btn-section {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding: 10px;
    padding-top: 0;
}

#invitation .btn-section button {
    width: 100%;
    text-transform: capitalize;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#invitation .btn-section .edit-btn {
    background-color: var(--secondary-color);
    color: var(--secondary-button-text);
}

#invitation .btn-section .confirm-btn {
    background-color: var(--primary-color);
    color: var(--primary-button-text);
}

/* todo ==== BUDDY SCORE ==== --> */

#buddyScore .game-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 8px 0px;
}

#buddyScore .game-name .name {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

#buddyScore .game-name .score {
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
}

#buddyScore #hideResult {
    animation: smooth 0.5s linear;
    -webkit-animation: smooth 0.5s linear;
}

@keyframes smooth {
    0% {
        opacity: 0;
    }
}

#buddyScore .result {
    display: flex;
    margin-top: 15px;
}

#buddyScore .result .left {
    width: 50%;
    text-transform: capitalize;
    color: var(--text-color);
    font-size: 17px;
    font-weight: 500;
}

#buddyScore .result .right {
    width: 50%;
    display: flex;
    gap: 8px;
}

#buddyScore .result-type {
    display: flex;
    margin-top: 15px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

#buddyScore .result-type .left {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 17px;
    color: var(--text-color);
    width: 70%;
}

#buddyScore .result-type .right {
    width: 25%;
}

#buddyScore .result-type .time {
    padding: 3px 20px;
    text-align: center;
    text-transform: capitalize;
    border: 1px solid var(--border-color);
    font-weight: normal;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#buddyScore .result-list .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    cursor: pointer;
}

#buddyScore .result-list .list .left {
    display: flex;
    gap: 20px;
    width: 70%;
    align-items: center;
}

#buddyScore .result-list .list .left .name {
    width: 100%;
    padding: 5px 10px;
    text-transform: capitalize;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#buddyScore .result-list .list .count {
    color: var(--text-color);
}

#buddyScore .result-list .list .right {
    width: 25%;
}

#buddyScore .result-list .list .right .time {
    padding: 5px 25px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#buddyScore .right svg {
    position: relative;
    top: -1px;
}

#buddyScore .right svg .second {
    display: none;
}

.radioSelect {
    color: var(--primary-color);
}

.radioSelect svg circle {
    stroke: var(--primary-color);
}

.radioSelect svg .second {
    fill: var(--primary-color);
    display: block !important;
}

/* todo ==== BUDDIE-RESULT ==== --> */

#buddieResult .activity {
    display: flex;
    justify-content: space-between;
    margin: 15px 0px;
}

#buddieResult .activity .left,
#buddieResult .activity .right {
    text-transform: capitalize;
    font-size: 17px;
    font-weight: 500;
    max-width: 100%;
    color: var(--text-color);
}

#buddieResult .activity .left span {
    color: var(--primary-color);
}

#buddieResult .each-result {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 10px;
}

#buddieResult .each-result .box {
    padding: 10px;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.each-result .box .rank {
    height: 30px;
    width: 30px;
    text-align: center;
    position: absolute;
    font-size: 14px;
    line-height: 30px;
    color: #fff;
    background-color: var(--alt-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#buddieResult .each-result .box .head {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

#buddieResult .each-result .box .head .border-part {
    height: 60px;
    width: 60px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#buddieResult .each-result .box .head .border-part .img {
    height: 54px;
    width: 54px;
    position: relative;
    left: 2px;
    top: 2px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#buddieResult .each-result .box .head .border-part .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.each-result .box .name {
    text-align: center;
    font-weight: 500;
    font-size: 17px;
    color: var(--text-color);
    text-transform: capitalize;
    margin-top: 10px;
}

.each-result .box .time {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
    color: var(--secondary-color);
    text-transform: capitalize;
}

.each-result .box .score {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top: 10px;
}

.each-result .box .value {
    width: 90px;
    height: 25px;
    line-height: 25px;
    font-weight: 500;
    border-radius: 4px;
    text-align: center;
    background-color: var(--primary-color);
    text-transform: capitalize;
    color: var(--primary-button-text);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

/* todo ==== FEEDBACK-PAGE ==== --> */

#feedback .leave-feedback {
    font-size: 18px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 600;
    margin-top: 15px;
}

#feedback .star-rating {
    display: flex;
    height: 40px;
    align-items: center;
}

#feedback .star-rating .star {
    color: var(--rating-color);
    font-size: 35px;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

#feedback .feedback-message {
    margin-top: 10px;
}

#feedback .feedback-message textarea {
    min-width: 100%;
    min-height: 140px;
    max-height: 200px;
    max-width: 100%;
    outline: none;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#feedback .feedback-message textarea::placeholder {
    color: var(--alt-color);
    font-weight: 400;
    font-size: 16px;
}

/* todo ==== FAVOURITE-ACTIVITY ==== --> */

#favActivity .search-bar {
    margin-top: 30px;
    margin-bottom: 20px;
}

#favActivity .search-bar .input {
    display: flex;
    width: 100%;
}

#favActivity .search-bar .input input {
    width: 100%;
    height: 35px;
    line-height: 35px;
    border: none;
    outline: none;
    border: 1px solid var(--border-color);
    padding: 5px 0px;
    padding-left: 10px;
    padding-right: 30px;
    border-radius: 4px;
    position: relative;
    background-color: var(--card-bg);
}

#favActivity .search-bar .input input::placeholder {
    color: var(--alt-color);
    text-transform: capitalize;
}

#favActivity .search-bar .input .search-icon {
    position: absolute;
    right: 30px;
    line-height: 30px;
    cursor: pointer;
    z-index: 333;
}

#favActivity .search-bar .input .search-icon:hover svg path {
    fill: var(--primary-color);
}

#favActivity .all-games {
    margin-top: 10px;
}

#favActivity .all-games .game {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#favActivity .all-games .game .game-name {
    text-transform: capitalize;
    color: var(--text-color);
    font-weight: 500;
}

/* todo ==== SOUTH-SIDE PAGE ==== --> */

#southSide {
    min-height: 100vh;
    margin-top: 20px;
}

#southSide .box {
    padding: 10px;
}

#southSide .box {
    border-radius: 4px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    border: 1px solid var(--border-color);
}

#southSide .box .left {
    display: flex;
    align-items: center;
    gap: 10px;
}

#southSide .box .left .border-part {
    height: 56px;
    width: 56px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
}

#southSide .box .center {
    height: 50px;
    width: 1px;
    background-color: var(--border-color);
}

#southSide .box .left .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    left: 2px;
    top: 2px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#southSide .border-part .img-part img {
    text-align: center;
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: relative;
    left: 0px;
}

#southSide .box .right {
    display: flex;
    gap: 0px;
    text-align: left;
    flex-direction: column;
}

#southSide .box .right .name {
    font-size: 16px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 600;
    text-align: left;
    margin: 0;
}

#editNameModal .modal-body {
    padding: 0;
}

#editNameModal .modal-body .name-sec {
    text-align: right;
    padding: 10px;
}

#editNameModal .modal-body .name-sec .edit-name {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--text-color);
    text-align: left;
}

#editNameModal .modal-body .name-sec textarea {
    width: 100%;
    border: none;
    outline: none;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    background-color: var(--card-bg);
    min-width: 100%;
    padding: 5px 10px;
    margin-top: 10px;
    max-height: 80px;
    min-height: 80px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#editNameModal .modal-body .name-sec textarea::placeholder {
    text-transform: capitalize;
    color: var(--alt-color);
    font-size: 14px;
}

#editNameModal .modal-body .name-sec .save-btn {
    padding: 4px 25px;
    text-transform: capitalize;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border: none;
    font-size: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

#editNameModal .modal-body .image-sec .edit-photo {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--text-color);
    text-align: left;
}

#editNameModal .modal-body .image-sec {
    border-top: 1px solid var(--border-color);
    padding: 10px;
}

#editNameModal .modal-body .edit-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
    gap: 10px;
}

#editNameModal .modal-body .image-sec .img {
    width: 70px;
    height: 70px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#editNameModal .modal-body .image-sec .img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#editNameModal .modal-body .image-sec .upload-img {
    padding: 4px 5px;
    text-transform: capitalize;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border: none;
    font-size: 15px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

/* todo ==== RESPONSIVE-SECTION ==== --> */

@media screen and (min-width: 576px) {
    #headToFoot {
        display: flex;
        justify-content: center;
        min-height: 100vh;
        width: 100%;
        background-color: var(--white-color);
    }

    .profile-one {
        width: 432px !important;
        position: relative;
    }

    /* todo --> REVIEWS-SECTION   --> */
    .rating-bar {
        width: 235px;
    }

    /* todo --> MENU BAR-SECTION   --> */

    .menu-section {
        padding-bottom: 5px;
    }

    .menu-section .all-menu .notification .icon .badge {
        width: 10px;
        height: 15px;
        position: absolute;
        background-color: var(--secondary-color);
        border-radius: 50%;
        top: 2px;
        right: 20px;
        z-index: 2;
        color: var(--secondary-button-text);
    }

    .menu-section .all-menu .notification .icon .badge span {
        position: relative;
        left: -4px;
        top: -1.5px;
    }

    /* todo ==== NOTIFICATION-DETAILS-SECTION ==== --> */

    #notificationMenu .footer {
        margin-top: 10px;
    }

    #notificationMenu .footer .hours {
        font-size: 14px;
        color: var(--alt-color);
    }

    /* todo --> CHAT SECTION MODAL   --> */

    #playersModal .modal-content,
    #shareModal .modal-content,
    #deleteModal .modal-content,
    #acceptModal .modal-content,
    #reportModal .modal-content,
    #showInterestModal .modal-content,
    #interestAlertModal .modal-content,
    #interestAlertModalTwo .modal-content,
    #sentModal .modal-content,
    #menuModal .modal-content,
    #defenseModal .modal-content,
    #lineUpPlayers .modal-content,
    #showImageModal .modal-content,
    #savePostModal .modal-content,
    #errorModal .modal-content,
    #hideCommand .modal-content,
    #hidePostModal .modal-content,
    #yesNo .modal-content,
    #deleteGroupAlert .modal-content,
    #deleteGroupModal .modal-content,
    #deletePostModal .modal-content,
    #deletePostModal .modal-content,
    #reportPostModal .modal-content,
    #editNameModal .modal-content,
    #experienceModal .modal-content,
    #editModal .modal-content,
    #shareExperienceModal .modal-content {
        width: 80%;
        left: -8px;
    }

    #removeModal .modal-content {
        width: 70%;
    }

    #galleryImageModal .modal-content {
        width: 80%;
    }

    #singleImageModal .modal-content,
    #teamImageModal .modal-content {
        width: 85%;
    }

    #shareProfileModal .modal-content {
        width: 85%;
        left: -8px;
    }

    #allReaction .head-react {
        gap: 10px;
    }

    /* todo ==== GAME-INVITE-PAGE ==== --> */

    #gameInvite .team {
        /* padding: 15px 40px; */
    }
}

@media screen and (min-width: 400px) {
    .menu-section .all-menu .notification .icon .badge {
        top: 1px;
        right: 20px;
    }
}

/* .ReactCrop */

.ReactCrop {
    width: 100% !important;
}

.heightMin {
    min-height: calc(100vh - 45px) !important;
}

.heightMinMessageBoard {
    min-height: calc(100vh - 117px) !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.empty-state p {
    color: var(--head-text);
}

.Mbutton {
    padding: 3px 10px;
    border: none;
    border-radius: 25px;
    text-align: center;
    text-transform: capitalize;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    transition: 0.3s;
    position: relative;
    top: 0px;
    font-weight: 500;
    color: var(--alt-color);
}

.primary {
    color: var(--primary-color);
}

#chatMenu .card-section .box.teamChat .body .left {
    width: 40%;
}

#chatMenu .card-section .box.teamChat .body .right {
    width: 40%;
}

#chatMenu .card-section .box.teamChat .body .center {
    width: 15%;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 16px;
    transition: 0.3s;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    background: #e5e5e5;
    border-radius: 16px;
    transition: 0.3s;
}

input[type="range"]::-moz-range-track {
    height: 12px;
    background: #e5e5e5;
    border-radius: 16px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 12px;
    width: 12px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #03abed;
    box-shadow: -1007px 0 0 1000px #03abed;
    transition: 0.3s;
}

input[type="range"]::-moz-range-thumb {
    height: 12px;
    width: 12px;
    background-color: #03abed;
    border-radius: 50%;
    border: 1px solid #03abed;
    box-shadow: -1007px 0 0 1000px #03abed;
}

.timelineSearchHeader .back-btn-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    border-bottom: 1px solid var(--border-color);
}

.timelineSearchHeader .back-btn-section .right input:focus {
    outline: none !important;
    offset: none !important;
    outline-offset: none !important;
    resize: none !important;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.win-box {
    height: 25px !important;
    width: 25px !important;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    left: 10px;
    top: 10px;
}

.lose-box {
    height: 25px !important;
    width: 25px !important;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    right: 10px;
    top: 10px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#historySec .draw-box {
    height: 25px;
    width: 25px;
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    right: 10px;
    top: 10px;
}

#historySec .card-section .box .body .left .draw-box {
    height: 25px;
    width: 25px;
    background-color: orange;
    color: var(--primary-button-text);
    font-size: 8px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    text-transform: uppercase;
    position: absolute;
    left: 10px;
    top: 10px;
}

.win {
    background-color: #13ab06 !important;
    color: #fff !important;
}

.lose {
    background-color: #dd2e44 !important;
    color: #fff !important;
}

.draw {
    background-color: #ff6900 !important;
    color: #fff !important;
}

.btncustom {
    border: none;

    text-transform: capitalize;
    font-size: 14px;
    font-weight: 600;
    padding: 5px 20px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.replies-list {
    height: 94px;
}

.classes-chat .box .first-part:last-child {
    border-bottom: none !important;
    margin-top: 10px;
}

.classes-chat .box {
    border: 1px solid var(--border-color);
}

.classes-chat .left {
    position: relative;
    top: -10px;
    padding: 5px 0px;
}

.classes-chat .box .singleChat {
    border-bottom: 1px solid var(--border-color);
}

.classes-chat .box .singleChat:first-child {
    margin-bottom: 10px;
}

.score-card {
    position: absolute;
    right: 10px;
    top: 80%;
    cursor: pointer;
}

.score-card svg path {
    fill: var(--primary-color) !important;
}

.card-section .box .group-icon svg path {
    fill: var(--alt-color);
}

#historySec .card-section .box .body .center {
    width: 20%;
}

.rc-time-picker-panel {
    left: -1001px;
    top: 562px !important;
}

/* Increase the size of the TimePicker input */
.custom-time-picker .rc-time-picker-input {
    font-size: 18px;
    /* Larger font */
    height: 50px;
    /* Increased height */
    width: 100% !important;
    /* Full width */
    padding: 10px;
    /* Padding for better touch targets */
    border-radius: 8px;
    /* Rounded corners */
}

/* Adjust the popup menu for better visibility */
.custom-time-picker .rc-time-picker-panel {
    font-size: 18px;
    /* Larger font in dropdown */
    width: 100% !important;
    /* Full width of container */
}

/* Increase button size for touch-friendliness */
.custom-time-picker .rc-time-picker-panel-select {
    max-height: 200px;
    /* Limit height for scrollable view */
}

/* Ensure dropdown is touch-friendly */
.rc-time-picker-panel-select li {
    padding: 10px;
    /* Add padding to time options */
    font-size: 18px;
    /* Make options larger */
}

/* Adjust container for mobile */
@media (max-width: 400px) {
    .time-picker-container {
        width: 100% !important;
        /* Ensure it takes the full width */
        padding: 10px;
        /* Add some padding */
    }

    .rc-time-picker-panel {
        width: 80% !important;
    }

    .rc-time-picker-panel-inner {
        width: 100% !important;
    }

    .rc-time-picker-panel-select {
        width: 100px !important;
    }

    .rc-time-picker-panel {
        left: 54px !important;
    }

    .rc-time-picker-panel-select li {
        height: 45px !important;
        line-height: 45px !important;
    }

    .rc-time-picker-panel-input {
        line-height: 2.5 !important;
    }

    .rc-time-picker-panel-select li {
        padding: 10px;
        /* Add padding to time options */
        font-size: 20px;
        /* Make options larger */
    }

    .custom-time-picker .rc-time-picker-panel {
        font-size: 20px;
        /* Larger font in dropdown */
        width: 100% !important;
        /* Full width of container */
    }

    .rc-time-picker-panel-input {
        font-size: 20px !important;
    }
}

/* ========client.css =============================== */

#myClients .box {
    border: 1px solid var(--border-color);
    background-color: var(--card-bg);
    border-radius: 4px;
    padding: 10px 5px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    position: relative;
    cursor: pointer;
}

#myClients .box .left {
    border-right: 1px solid var(--border-color);
    padding-right: 10px;
}

#myClients .border-part {
    height: 55px;
    width: 55px;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#myClients .border-part .img-part {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
}

#myClients .border-part .img-part img {
    text-align: center;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#myClients .box .right {
    padding-left: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

#myClients .box .right h4 {
    font-size: 18px;
    color: var(--text-color);
    text-transform: capitalize;
    font-weight: 600;
    margin: 0;
}

#myClients .total-c {
    position: absolute;
    right: 10px;
    top: 10px;
    padding: 2px 4px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border-radius: 50%;
    font-size: 14px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 15px;
}

/* ~~~~~~~~~~~~~~~~ CLIENTSCHAT ~~~~~~~~~~~~~~~~~~ */

.clientsChat .box .body .left {
    width: 85%;
}

.clientsChat .box {
    border: 1px solid var(--border-color) !important;
}

.clientsChat .box .body .left .img {
    height: 50px !important;
    width: 50px !important;
}

.clientsChat .box .body .left .img:nth-child(2) {
    left: 10%;
    position: absolute;
}

.clientsChat .box .body .left .img:nth-child(3) {
    left: 17%;
    position: absolute;
}

.clientsChat .box .body .left .img:nth-child(4) {
    left: 24%;
    position: absolute;
}

.clientsChat .box .body .left .img:nth-child(5) {
    left: 31%;
    position: absolute;
}

.clientsChat .box .body .left .img:nth-child(6) {
    left: 37%;
    position: absolute;
}

.clientsChat .box .body .left .img:nth-child(7) {
    left: 42%;
    position: absolute;
}

.clientsChat .box .body .left .img:nth-child(8) {
    left: 49%;
    position: absolute;
}

.clientsChat .box .body .left .img:last-child {
    background-color: var(--alt-color);
    /* left: 55%; */
    position: absolute;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.clientsChat .box .body .left .img:last-child span {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    width: 100%;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-color);
    -webkit-box-shadow: 0 0 0 120px var(--white-color) inset !important;
}

.code input {
    text-align: center !important;
    border: none;
    outline: none;
    color: var(--text-color) !important;
    overflow: hidden !important;
    background-color: transparent !important;
    box-shadow: none;
}

.code input:focus {
    box-shadow: none !important;
}



.slider-container {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

.range-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100%;
    height: 8px;
    background: var(--head-text);
    border-radius: 6px;
    outline: none;
    position: relative;
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.range-slider::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(to right, var(--primary-color) 0%, var(--slider-bg) 0%);
    border-radius: 6px;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 24px;
    height: 24px;
    background-color: var(--head-text);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.range-slider::-moz-range-progress {
    background: var(--primary-color);
    height: 8px;
    border-radius: 6px;
}

.range-slider::-moz-range-track {
    height: 8px;
    background: gray;
    border-radius: 6px;
}

.range-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background-color: var(--head-text);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.range-slider::-ms-fill-lower {
    background: var(--primary-color);
    border-radius: 6px;
}

.range-slider::-ms-fill-upper {
    background: var(--slider-bg);
    border-radius: 6px;
}

.range-slider::-ms-thumb {
    width: 24px;
    height: 24px;
    background-color: var(--head-text);
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    cursor: pointer;
    touch-action: pan-x;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Mobile-specific improvements for range slider */
@media (max-width: 768px) {
    .range-slider {
        height: 12px;
        min-height: 17px;
        /* Minimum touch target size */
    }

    .range-slider::-webkit-slider-runnable-track {
        height: 12px;
        min-height: 17px;
    }

    .range-slider::-webkit-slider-thumb {
        width: 28px;
        height: 28px;
        min-height: 17px;
        /* margin-top: -8px; */
    }

    .range-slider::-moz-range-track {
        height: 12px;
        min-height: 17px;
    }

    .range-slider::-moz-range-thumb {
        width: 28px;
        height: 28px;
        min-height: 44px;
    }

    .range-slider::-ms-track {
        height: 12px;
        min-height: 17px;
    }

    .range-slider::-ms-thumb {
        width: 28px;
        height: 28px;
        min-height: 17px;
    }
}

/* Range slider wrapper for better touch handling */
.range-slider-wrapper {
    touch-action: pan-y;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    padding: 10px 0;
}

.range-slider-wrapper input[type="range"] {
    pointer-events: auto;
    touch-action: pan-x;
}


.swiper-slidecustom .date {
    display: flex;
    /* flex-direction: row-reverse; */
    justify-content: center;
    padding: 0px 5px;
}

.swiper-slidecustom .date p {
    font-size: 11px !important;
}

.rc-time-picker-panel {
    z-index: 1070;
    width: 200px;
    position: absolute;
    box-sizing: border-box;
    left: 50% !important;
    top: 0% !important;
    transform: translate(-50%, 150%);
}


/* //progres bar video uplaod  */
.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-bar {
    height: 20px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    line-height: 20px;
    border-radius: 5px;
    transition: width 0.3s ease-in-out;
}

.rc-time-picker-panel * {
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
    background: #fff !important;
}


.lineup-buddis-reverse {
    justify-content: center !important;
    flex-direction: row-reverse !important;
}



.countdown {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 15px;
}

.countdown .item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.countdown .item .digit {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    border: 4px solid var(--primary-color);
    /* border: 4px solid #000; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color);
    position: relative;
}

.countdown .item span {
    color: var(--text-color);
}

.countdown svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    transform: rotateY(-180deg) rotateZ(-90deg);
}

.countdown svg circle {
    stroke-dasharray: 200px;
    stroke-dashoffset: 0px;
    stroke-linecap: round;
    stroke-width: 6px;
    stroke: var(--alt-color);
    fill: none;
    /* animation: countdown 10s linear infinite forwards; */
}

@keyframes countdown {
    from {
        stroke-dashoffset: 0px;
    }

    to {
        stroke-dashoffset: 200px;
    }
}


.ReadMoreWhiteSpace span {
    white-space: pre-line !important;
}

input {
    background-color: var(--card-bg) !important;
}

.circle-rct img {
    width: 12px !important;
    height: 12px !important;
}



/* #timeline .timeline-post .reaction-count .left .reaction-img:nth-child(4),
#timeline .timeline-post .reaction-count .left .reaction-img:nth-child(5){
  display: none;
}  */

.rc-time-picker-panel-combobox {
    display: flex;
    width: 200px;
}

div.rc-time-picker-panel-select:nth-child(1) {
    width: 50%;
}

div.rc-time-picker-panel-select:nth-child(2) {
    width: 50%;
}

.rc-time-picker-panel-input {
    background: #fff !important;
}

.rc-time-picker-panel-narrow {
    max-width: 100% !important;
}

.admin-btn {

    border: none;
    width: 119px;
    height: 25px;
    font-size: 14px;
    border-radius: 4px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    transition: 0.3s;
    text-transform: capitalize;

}


@media screen and (max-width: 375px) {
    #buddyScore .result-list .list .left {
        gap: 10px;
    }

    #buddyScore .result-list .list .left {
        width: 65%;
    }

    #buddyScore .result-list .list .right {
        width: 28%;
    }

    #buddyScore .result-list .list .right .time {
        padding: 5px 5px;
    }
}

.max-width-input {
    max-width: 430px !important;
}


@media screen and (min-width: 577px) {
    .max-width-input {
        max-width: 430px !important;
        width: 100% !important;
    }
}



@media screen and (max-width: 576px) {
    #chatroomDoubles {
        max-width: 100% !important;
    }


    .max-width-input {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 375px) {
    #buddyScore .result-list .list .left {
        gap: 10px;
    }

    #buddyScore .result-list .list .left {
        width: 65%;
    }

    #buddyScore .result-list .list .right {
        width: 28%;
    }

    #buddyScore .result-list .list .right .time {
        padding: 5px 5px;
    }
}

/* Empty Message Board Styles */
.empty-message-board {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 60px 30px;
    background-color: var(--white-color);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}


.empty-message-content {
    text-align: center;
    max-width: 450px;
    position: relative;
    z-index: 2;
}

.empty-message-icon {
    margin-bottom: 32px;
    display: flex;
    justify-content: center;
    position: relative;
}

.empty-message-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.1;
}

.empty-message-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 16px;
    line-height: 1.2;
    text-transform: capitalize;
}

.empty-message-text {
    font-size: 16px;
    color: var(--text-color);
    opacity: 0.8;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 400;
}

.create-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: var(--primary-button-text);
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: capitalize;
    position: relative;
    overflow: hidden;
}

.create-post-btn:hover {
    background-color: var(--primary-color);
    opacity: 0.9;
    transform: translateY(-1px);
}

.create-post-btn:active {
    transform: translateY(0);
}

.create-post-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.create-post-btn:hover svg {
    transform: rotate(90deg);
}

/* Dark mode adjustments */
.dark-mode .empty-message-board {
    background-color: var(--white-color);
    border-color: var(--border-color);
}

/* For WebKit-based browsers (Chrome, Safari, Edge) */
/* Base style for the scrollable container */
#chatroomDoubles {
    overflow: auto;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    /* "auto", "thin", or "none" */
    scrollbar-color: #888 #0000;
    /* thumb color, track color */
}

/* WebKit-based browsers (Chrome, Safari, Edge) */
#chatroomDoubles::-webkit-scrollbar {
    width: 6px;
    /* avoid using 1px, it's too thin for usability */
    height: 6px;
}

#chatroomDoubles::-webkit-scrollbar-track {
    background: #000000;
}

#chatroomDoubles::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

#chatroomDoubles::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}


.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-content {
    background: var(--white-color);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    color: #333;
}

.dark-mode .loading-content {
    background: var(--white-color);
    color: var(--head-text);
}

/* Base style for the scrollable container */
#scrollbar {
    overflow: auto;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    /* "auto", "thin", or "none" */
    scrollbar-color: #888 #0000;
    /* thumb color, track color */
}

/* WebKit-based browsers (Chrome, Safari, Edge) */
#scrollbar::-webkit-scrollbar {
    width: 6px;
    /* avoid using 1px, it's too thin for usability */
    height: 6px;
}

#scrollbar::-webkit-scrollbar-track {
    background: #000000;
}

#scrollbar::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

#scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Custom Progress Bar Styles */
.custom-progress-container {
    width: 100%;
    margin-top: 12px;
}

.custom-progress-bar {
    width: 100%;
    height: 32px;
    background-color: var(--alt-color);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.custom-progress-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 16px;
    transition: width 0.3s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
}

.progress-text {
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}


.blur-menu {
    backdrop-filter: blur(0px) saturate(177%) brightness(150%) blur(4px);
    background-color: var(--manu-blar);
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}