/**
 * !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: 0;
     margin-bottom: 0;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-auto-rows: min-content;
     align-content: start;
     gap: 12px;
 }
 
 #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%);
     }
 }
 .glass-card {
     width: 240px;
     height: 360px;
     background: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(5px);
     -webkit-backdrop-filter: blur(5px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 
       0 8px 32px rgba(0, 0, 0, 0.1),
       inset 0 1px 0 rgba(255, 255, 255, 0.5),
       inset 0 -1px 0 rgba(255, 255, 255, 0.1),
       inset 0 0 0px 0px rgba(255, 255, 255, 0);
     position: relative;
     overflow: hidden;
   }
   
   .glass-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: linear-gradient(
       90deg,
       transparent,
       rgba(255, 255, 255, 0.8),
       transparent
     );
   }
   
   .glass-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 1px;
     height: 100%;
     background: linear-gradient(
       180deg,
       rgba(255, 255, 255, 0.8),
       transparent,
       rgba(255, 255, 255, 0.3)
     );
   }