* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: "Times New Roman", Times, serif;
       font-weight: normal;
       --sb-track-color: transparent;
       --sb-thumb-color: blueviolet;
       --sb-size: 5px;
       
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       -webkit-tap-highlight-color: transparent;
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
     }

     html {
       height: 100% !important;
       margin: 0;
       padding: 0;
       overflow: hidden;
     }


     body {
       height: 100% !important;
       margin: 0;
       padding: 5px;
       user-select: none;
       width: 100%;
       height: 100vh;
       /* background-color: #00000000;
            background: #00000000; */
       background-color: #0d0f13;
       font-family: "Times New Roman", Times, serif;
       font-weight: normal;
       overflow: hidden;

     }

     *::-webkit-scrollbar {
       width: 5px;
     }

     ::-webkit-scrollbar-corner {
       background: rgba(0, 0, 0, 0);
       border-radius: 5px;
     }


     ::-webkit-scrollbar-track {
       background: transparent;
       border-radius: 15px;
       margin-top: 30px;
       margin-bottom: 30px;
       width: 5px;
     }

     *::-webkit-scrollbar-thumb {
       background: var(--sb-thumb-color);
       border-radius: 15px;
       width: 5px;
     }

     .bartext {

       font-size: 1.5rem;
     }

     /* Small screens (up to 768px) */
     @media screen and (max-width: 768px) {
       body {
         background-size: auto;
         /* Adjust as needed */
       }

       .bartext {
         font-size: 1.2rem;
       }

       .left-panel {
         transform: translateX(-100%);
         top: 189px;
         /* Hide the left panel */
       }

       .menu-button {
         display: block;
         /* Show the menu button */
       }

       .tab {
         font-size: 12px;
         /* Reduce tab font size */
         background-color: #fff;
         color: #2cb4e3;
       }

       .navtool {
         flex-wrap: nowrap;
         justify-content: space-evenly;
         font-size: 0.8rem;
         /* transition: all 0.5s ease-in-out 0s; */
       }

       /* Add more responsive styles as needed */
     }

     .sub-tab {
       font-size: 12px;
       background-color: #0d0f13;
       color: #fff;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding-left: 27px;
       padding-top: 10px;
       margin: 1px;
       flex-wrap: wrap;
       cursor: pointer;
     }



     /* Define styles for the navbar */
     .navbar {
       background-color: #0d0f13;
       display: flex;
       background: linear-gradient(#0d0f13, #0d0f13) padding-box, linear-gradient(349deg, transparent 1%, blueviolet, #40c9ff) border-box;
       border: 2px solid transparent;

       border-radius: 20px;
       color: white;
       background-size: 200% 100%;
       /* animation: gradient 10s ease infinite; */
       margin-top: 1px;
       width: 100%;
       height: 82px;
       justify-content: space-between;
       align-items: center;

     }

     .title {
       flex: 0;
     }

     .navtools {
       flex: 1;
       flex-basis: 500px;
       background-color: transparent;
       padding: 3px;
       display: flex;
       align-items: center;
       margin-top: 1px;
       width: 10%;
       flex-wrap: nowrap;
       justify-content: flex-end;
       gap: 5px;
     }

     .navtool {
       background: linear-gradient(to top,
           rgba(40, 94, 141, 0.3),
           rgba(204, 104, 96, 0.3));
       backdrop-filter: blur(1px);
       color: #fff;
       padding: 10px;
       display: flex;
       flex-wrap: nowrap;
       justify-content: space-evenly;
       align-items: center;
       margin-top: 10px;
       border-radius: 10px;
     }

     .topicon {
       color: #2cb4e3;
       background-color: #00000000;
     }

     .box-icon-left {
       color: #2cb4e3;
       background-color: #00000000;
     }

     .box-icon-left-sub {
       color: #fff;
       background-color: #00000000;
     }

     /* Define styles for the title and logo */
     .title {
       display: flex;
       align-items: center;
       background-color: transparent;
     }

     .logo {
       width: 180px;
       height: auto;
     }

     .usrwall {
       width: 35px;
       height: 35px;
       border-radius: 50%;
     }

     /* Define styles for the content panel */
     .content {
       max-height: 100%;
       display: flex;
       justify-content: space-between;

     }

     /* Define styles for the left panel with buttons (tabs) */
     .left-panel {
       z-index: 1010;
       transform: translateX(-150%);
       position: fixed;
       max-height: 71vh;
       overflow-y: auto;
       top: 139px;
       left: 0;
       height: 100vh;
       color: #2cb4e3;
       font-size: 5vh;
       transition: all 0.7s ease-in-out 0s;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: flex-start;
       background: linear-gradient(#0d0f13, #0d0f13) padding-box, linear-gradient(349deg, transparent 1%, blueviolet, #40c9ff) border-box;
       border: 2px solid transparent;
       border-radius: 20px;
       background-size: 200% 100%;
     }

     .left-panel-open {
       /* ... (other styles) */
       overflow-y: hidden;
       /* Disable body scrolling when the left panel is open */
     }

     /* Define styles for the center panel */
     .center-panel {
       flex: 6;
       /* background-color: rgba(11, 10, 12, 0.5);
            backdrop-filter: blur(10px); */
       color: #fff;
       padding: 5px;
       max-height: 100%;
       height: 100%;
       position: relative;
     }

     /* Define styles for the buttons (tabs) */
     .tab {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-direction: row;
       column-gap: 14px;
       position: relative;
       letter-spacing: 0.05em;
       margin-bottom: 1px;
       padding: 10px;
       background-color: #fff;
       color: #fff;
       text-align: center;
       text-decoration: none;
       cursor: pointer;
       transition: background-color 0.3s;
       overflow: hidden;
     }

     .tab:hover {
       background-color: rgba(11, 10, 12, 0.3);
       color: #fff;
     }

     .filesrow:hover {
       background-color: rgba(11, 10, 12, 0.7);
       color: lime;
     }

     /* Style the active tab */
     .tab.active {
       background-color: #000;
       color: #2cb4e3;
     }

     .tab::before,
     .tab::after {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       z-index: 0;
     }

     .tab::before {
       content: "";
       background-color: transparent;
       color: #fff;
       width: 120%;
       left: -10%;
     }

     .tab:hover::before {
       transform: translate3d(100%, 0, 0);
     }

     /* Style the menu button */
     .menu-button {
       display: none;
       background-color: #333;
       color: #fff;
       padding: 10px;
       cursor: pointer;
       text-align: center;
     }

     .lefttoper {
       width: 100%;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       gap: 15px;
       margin-right: 20px;
     }


     @media screen and (min-width: 720px) {

       /* Additional styles for screens with a width greater than or equal to 720px */
       .navbar,
       .navtool {
         height: 82px !important;
       }


     }



     /* Hide the buttons (tabs) on small screens */
     @media screen and (max-width: 720px) {

       .navbar,
       .navtool {
         display: flex;
         width: 100%;
         box-sizing: border-box;
         flex-wrap: nowrap;
         justify-content: space-between;

         gap: 10px;
         transition: all 0.5s ease-in-out 0s;
         /* using js i need to set the heigth = 140px */
         height: 80px;

       }




       .left-panel {
         transform: translateX(-150%);
         max-height: 65vh;
         /* top: 189px; */
       }

       .center-panel {
         width: 100%;
         height: 100%;
         padding: 3px;
       }

       .menu-button {
         display: block;
       }

       .tab {
         font-size: 12px;
         background-color: #fff;
         color: #2cb4e3;
       }

       .navtools {
         justify-content: center;
       }

       .navtool {
         flex-wrap: nowrap;
         justify-content: space-between;
       }
     }

     .tab {
       font-size: 12px;
       background: #0d0f13;
       color: #2cb4e3;
     }

     /* .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #0d0f13;
      color: white;
      text-align: center;
      padding: 1px 0;
      display: flex;
      gap: 10px;
      justify-content: space-between;
      align-items: center;
      z-index: 1009;

    } */
     h1 {
       font-size: 2.5vw;
       text-align: center;
       color: #37d2f9;
     }

     h2 {
       font-size: 3.0vh;

     }


     p {
       font-size: 2.6vmin;
       line-height: 30px;
     }

     #checkbox {
       display: none;
     }

     .toggle {
       position: relative;
       width: 40px;
       height: 40px;
       cursor: pointer;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 10px;
       transition-duration: 0.5s;
     }

     .bars {
       width: 100%;
       height: 4px;
       background-color: rgb(176, 92, 255);
       border-radius: 4px;
     }

     #bar2 {
       transition-duration: 0.8s;
     }

     #bar1,
     #bar3 {
       width: 70%;
     }

     #checkbox:checked+.toggle .bars {
       position: absolute;
       transition-duration: 0.5s;
     }

     #checkbox:checked+.toggle #bar2 {
       transform: scaleX(0);
       transition-duration: 0.5s;
     }

     #checkbox:checked+.toggle #bar1 {
       width: 100%;
       transform: rotate(45deg);
       transition-duration: 0.5s;
     }

     #checkbox:checked+.toggle #bar3 {
       width: 100%;
       transform: rotate(-45deg);
       transition-duration: 0.5s;
     }

     #checkbox:checked+.toggle {
       transition-duration: 0.5s;
       transform: rotate(180deg);
     }

     .button {
       width: 78px;
       position: relative;
       border: none;
       background-color: #0d0f13;
       flex-wrap: nowrap;
       color: #000;
       padding: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.1rem;
       font-weight: normal;
       gap: 3px;
       border-radius: 15px;
       transition: transform 3s ease;
       cursor: pointer;
       overflow: hidden;
       border-bottom: 1px solid aqua;
       border-top: 2px solid aqua;
       flex-direction: row;

     }

     @media screen and (max-width:780px) {
       .button {
         padding: 7px;
         font-size: 0.8rem;
         width: 78px;
       }

       h1 {
         font-size: 5.9vw;
         text-align: center;
         color: #37d2f9;
       }

       h2 {
         font-size: 3.0vh;

       }


       p {
         font-size: 2.6vmin;
         line-height: 30px;
       }
     }


     .button span {
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       /* z-index: 1; */
     }

     .button::before {
       content: "";
       position: absolute;
       background-color: transparent;
       border-bottom: 2px solid aqua;
       border-top: 2px solid aqua;
       width: 100%;
       height: 100%;
       left: 0%;
       bottom: 0%;
       transform: translate(-100%, 100%);
       border-radius: inherit;
       transition: transform 3s ease;
     }

     .button svg {
       fill: #2cb4e3;
       transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     }

     .button:hover::before {
       animation: shakeBack 0.4s forwards;
     }

     .button:hover svg {
       fill: white;
       transform: scale(1.3);
     }

     .button:active {
       box-shadow: none;
     }

     @keyframes shakeBack {
       0% {
         transform: translate(0px, +98px);
       }

       /* 50% {
        transform: translate(20%, -20%);
      } */

       100% {
         transform: translate(0%, 0%);
       }
     }


     #loading-screen-store {
       position: absolute;
       display: none;
       width: 100%;
       height: 100%;
       background-color: rgba(13, 15, 19, 0.8);
       backdrop-filter: blur(9px);
       /* Semi-transparent black background */

       justify-content: center;
       align-items: center;
       z-index: 9999;
       flex-direction: column;
       gap: 15px;
     }

     #loading-screen {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(13, 15, 19, 0.8);
       backdrop-filter: blur(9px);
       /* Semi-transparent black background */
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       flex-direction: column;
       gap: 15px;
       /* Ensure the loading screen is on top */
     }

     .spin-logo {
       width: 144px;
       height: auto;
       position: fixed;
       z-index: 1;
     }

     /* Your spinner styles */
     .spinner {
       background-image: linear-gradient(rgb(186, 66, 255) 35%,
           rgb(0, 225, 255));
       width: 100px;
       height: 100px;
       animation: spinning82341 0.9s linear infinite;
       text-align: center;
       border-radius: 50px;
       filter: blur(1px);
       box-shadow: 0px -1px 10px 0px rgb(186, 66, 255),
         0px 1px 10px 0px rgb(0, 225, 255);
     }

     .spinner1 {
       background-color: transparent;
       width: 20px;
       height: 20px;
       border-radius: 50px;
       filter: blur(10px);
     }

     @keyframes spinning82341 {
       to {
         transform: rotate(360deg);
       }
     }

     /* Style for the grid container */
     .dashboard-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       /* 2 columns */
       grid-gap: 20px;
       /* Spacing between boxes */
     }

     /* Style for each box */
     .dashboard-box {
       background: #0d0f13;
       border-radius: 10px;
       padding: 20px;
       border: 1px solid #ab0ff7;
       text-align: center;
       position: relative;
       overflow: hidden;
       margin-top: 10px;
       cursor: pointer;
     }

     .dashboard-box:hover {
       border: 1px solid aqua;
     }

     /* Style for the image in the top-left corner */
     .dashboard-box .box-icon {
       position: absolute;
       top: 10px;
       left: 10px;
       color: #2cb4e3;
       font-size: 64px;
     }

     .material-icons .box-icon {
       position: absolute;
       top: 10px;
       left: 10px;
       color: #2cb4e3;
       font-size: 64px;
     }

     /* Style for the text in the center */
     .dashboard-box .box-text {
       color: white;
       font-size: 24px;
     }

     .dashboard-box .box-text-title {
       color: #2cb4e3;
       font-size: 1.2rem;
       font-weight: normal;
     }

     /* Responsive styles */
     @media screen and (max-width: 768px) {
       .dashboard-grid {
         grid-template-columns: 1fr;
         /* Single column on smaller screens */
       }

       .dashboard-box .box-text {
         color: white;
         font-size: 16px;
       }

       .dashboard-box .box-icon {
         position: absolute;
         top: 5px;
         left: 5px;
         color: white;
         font-size: 24px;
       }

       .dashboard-box .box-text {
         color: white;
         font-size: 14px;
       }

       .dashboard-box .box-text-title {
         color: #2cb4e3;
         font-size: 0.5rem;
         font-weight: normal;
       }
     }





     @keyframes spin {
       0% {
         transform: rotate(-45deg);
       }

       50% {
         transform: rotate(-360deg);
         border-radius: 50%;
       }

       100% {
         transform: rotate(-45deg);
       }
     }

     table {
       overflow-y: scroll;
       white-space: nowrap;
       width: 100%;
       border-collapse: collapse;
       background: transparent;
     }

     th,
     td {
       padding: 10px;
       text-align: center;
       color: #fff;
     }

     th {
       background-color: rgba(0, 0, 0, 0.3);
       color: #2cb4e3;
     }


     a {
       color: #2cb4e3;
       text-decoration: none;
     }

     .label {
       font-weight: normal;
       display: block;
       width: 100px;
       font-size: 16px;
     }

     /* Style for value */
     .value {
       display: inline-block;
       margin-left: 10px;
       color: #fff;
       font-size: 0.8rem;
     }

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


       table,
       tbody,
       th,
       td {
         display: flex;
         align-items: center;
         align-content: stretch;
         font-size: 9px;
         width: 100%;
         justify-content: flex-start;
         flex-wrap: wrap;
         flex-direction: column;
       }

       thead {
         text-align: Center;
         display: flex;
         margin-bottom: 10px;
         flex-direction: row;
         flex-wrap: nowrap;
         width: 100%;
       }

       table {
         width: 100%;
         border-collapse: collapse;
       }

       th,
       td {
         padding: 8px;
         text-align: left;

       }



       /* th {
          text-align: Center;
          display: flex;
          margin-bottom: 10px;
          flex-direction: row;
          flex-wrap: nowrap;
          width: 100%;
        } */

       tr,
       th {
         display: flex;
         margin-bottom: 10px;
         flex-direction: row;
         flex-wrap: nowrap;
         width: 100%;
       }

       td {
         text-align: Center;
         height: 45px;
         width: 100%;
       }

       select {
         font-size: 12px;
       }

       .usrwall {
         width: 40px;
         height: 40px;
       }

       .label {

         font-size: 1rem;
       }

       /* Style for value */
       .value {

         font-size: 0.8rem;
       }
     }


     #clientstitle {
       color: #2cb4e3;
       font-size: 1rem;
       padding-top: 8px;
     }

     .Cardselect {
       background-color: #2cb4e3;
       color: #000;
       border: none;
       padding: 5px;
       border-radius: 5px;
       width: 80%;
       text-align: center;
     }

     .logsselect {
       background-color: #2cb4e3;
       color: #000;
       border: none;
       padding: 5px;
       border-radius: 5px;
       width: 300px;
       text-align: center;
     }

     .logged-in {
       color: green;
       cursor: pointer;
       font-size: 25px;
     }

     .logged-out {
       color: red;
       cursor: pointer;
       font-size: 25px;
     }

     /* Style for the container */
     .user-panel {
       width: 100%;
       border: 1px solid aqua;
       padding: 20px;
       margin: 9px;
       border-radius: 5px;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
       display: flex;
       align-items: center;
       justify-content: space-between;
     }

     .centerPanelhome {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-content: center;
       align-items: center;
       flex-direction: column;
     }

     /* Style for label */

     #imageContainer {
       width: 100%;
       max-height: 60vh;
       /* Adjust this value as needed */
       overflow: hidden;
     }

     #imageElement {
       max-width: 400px;
       height: auto;
       transform-origin: center center;
     }

     #controls {
       margin-top: 20px;
       margin-bottom: 70px;
       display: flex;
       flex-direction: column;
       align-items: center;
     }


     .btn {
       display: flex;
       align-items: flex-start;
       justify-content: center;
       align-self: flex-start;
       font-family: inherit;
       color: #fff;
       font-weight: normal;
       width: 160px;
       background: #313131;
       border: 1px solid #414141;
       padding: 12px 16px;
       font-size: inherit;
       gap: 8px;
       margin-top: 8px;
       cursor: pointer;
       border-radius: 6px;
     }

     .btn:active {
       transform: scale(0.92);
     }

     .btn:hover {
       background-color: transparent;
       border-color: aqua;

     }

     .overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(11, 11, 11, 0.78);
       /* Semi-transparent background */
       backdrop-filter: blur(5px);
       /* Apply a blur effect */
       z-index: 9999;
       /* Below the message box but above other elements */
     }

     .message-box {
       /* background-color: rgba(11, 10, 12, 0.3); */
       border-radius: 10px;
       font-size: 4vh;
       color: #fff;
       /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
       text-align: center;
       padding: 20px;
       position: fixed;
       /* Change to fixed */
       top: 50%;
       /* Center vertically */
       left: 50%;
       /* Center horizontally */
       transform: translate(-50%, -50%);
       /* Center the box */
       z-index: 9999;
       /* Set a high z-index to ensure it's on top */
       width: 90%;
     }

     .icon {
       font-size: 24px;

     }

     .button-container {
       padding: 10px 0;
       display: flex;
       justify-content: space-between;
       max-width: 400px;
       margin: 0 auto;
     }

     .boxbutton {
       width: 100px;
       padding: 10px;
       border-radius: 15px;
       border: 0;
       background-color: white;
       box-shadow: rgb(164 0 255) 0 0 7px 2px;
       text-transform: uppercase;
       font-size: 1rem;
       transition: all 0.5s ease;
     }

     .ok_input2 {
       box-shadow: rgb(0, 255, 72) 0 0 7px 2px;
       float: right;
       position: fixed;
       right: 0px;
     }

     .no_input2 {
       box-shadow: rgb(255, 0, 0) 0 0 7px 2px;
       float: left;
       position: fixed;
       left: 0px;
     }

     .boxbutton:hover {
       background-color: hsl(261deg 80% 48%);
       color: hsl(0, 0%, 100%);
       box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
     }

     .boxbutton:active {
       background-color: hsl(261deg 80% 48%);
       color: hsl(0, 0%, 100%);
       box-shadow: rgb(93 24 220) 0px 0px 0px 0px;
       transform: translateY(10px);
       transition: 100ms;
     }

     .boxbuttonfiles .close-btn {
       background-color: #00000000;
       color: #fff;
     }

     .boxbuttonfiles {
       width: 28px;
       height: 27px;
       border-radius: 50px;
       border: 0;

       box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       font-size: 0px;

       transition: all 0.5s ease;

       background: transparent;
       color: aqua;

       cursor: pointer;
       transition: all 0.3s ease-in 0s;
     }

     .boxbuttonfiles:hover {

       color: white;
     }


     .bigboxdiv {
       background-color: #0d0f13;
       backdrop-filter: blur(10px);
       gap: 5px;
       height: auto;
       overflow: auto;
       height: 85vh;

     }

     /* @media screen and (max-width: 780px) {

       .bigboxdiv {
         height: 100vh;

       }
     } */

     .center-panel>div {
       transition: opacity 0.5s ease-in-out;
     }


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

       .bigboxdiv {

         padding: 3px;

       }
     }

     .input {
       color: #fff;
       border: 2px solid #2cb4e3;
       border-radius: 10px;
       font-size: 1em;
       padding: 10px 25px;
       background: transparent;
       width: 100%;
       text-align: center;
     }

     .input:active {
       box-shadow: 2px 2px 15px #2cb4e3 inset;
     }

     .cardstable {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
       padding: 20px;
       gap: 25px;
       flex-direction: row;
     }

     @media screen and (max-width: 880px) {
       #clientstitle {
         color: #2cb4e3;
         font-size: 1rem;

       }

       .cardstable {
         justify-content: center;
       }

       /* p,
      span,
      img,
      td {
        background-color: transparent;
        font-size: 0.5rem;
      } */
     }

     /* cards */
     .myCard {

       background-color: transparent;
       width: 190px;
       height: 254px;
       flex-grow: 1;
       max-width: 150px;

     }



     .title {

       font-size: 1em;
       font-weight: normal;
       text-align: center;
       margin: 0;
       display: flex;
       width: 100%;
       justify-content: center;
     }

     .innerCard {
       font-size: 0.9rem;
       position: relative;
       width: 100%;
       height: 100%;
       text-align: center;

       cursor: pointer;
       background-color: transparent;
     }

     /* .myCard:hover .innerCard {
      transform: rotateY(180deg);
    } */

     .frontSide {
       transition: all 0.9s ease 0s;
       position: absolute;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-evenly;
       width: 100%;
       height: 100%;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       border: 1px solid #2cb4e3;
       border-radius: 1rem;
       color: #fff;
       /* box-shadow: 0px 0px 9px 3px #2cb4e3; */
       font-weight: normal;
     }

     .backSide {
       transition: all 0.9s ease 0s;
       position: absolute;
       display: flex;
       align-items: center;
       width: 100%;
       height: 100%;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden;
       border: 1px solid #2cb4e3;
       border-radius: 1rem;
       color: #fff;
       /* box-shadow: 0px 0px 9px 3px #2cb4e3; */
       font-weight: normal;
       justify-content: center;
       flex-direction: column;
     }

     /* p,
    span,
    img,
    td {
      background-color: transparent;
      font-size: 0.8rem;
    }

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

      p,
      span,
      img
       {
        background-color: transparent;
        font-size: 0.4rem;

      }
    } */


     /* Add this CSS to style the infoElement */
     .infoElement {
       display: flex;
       /* Use flexbox */
       align-items: center;
       /* Vertically center the content */
       padding: 10px;
       font-size: 1em;
       background-color: transparent;
     }

     @media screen and (max-width: 768px) {
       .infoElement {
         display: flex;
         /* Use flexbox */
         align-items: center;
         flex-wrap: wrap;
         /* Vertically center the content */
         padding: 10px;
         font-size: 0.5em;
       }

       .myCard {
         max-width: 141px;
         width: 140px;
       }
     }

     /* Style the icon span */
     .material-icons {
       font-size: 20px;
       /* Adjust the icon size as needed */
       /* margin-right: 10px; */
       /* Add spacing between icon and text */
     }

     .backSide,
     .backSide::before {
       background-color: #0d0f13;
     }

     /* .frontSide,
.backSide {
  position: relative;
} */

     .backSide {
       opacity: 0;
       visibility: hidden;
       transition: all 0.9s ease 0s;
     }

     .innerCard:hover .frontSide {
       opacity: 0;
       visibility: hidden;
     }

     .innerCard:hover .backSide {
       opacity: 1;
       visibility: visible;
     }

     .frontSide::before,
     .backSide::before {

       transition: all 0.8s ease-out 0s;
       /* transform: translate(-50%, -50%); */
       content: "";
       width: 110%;
       height: 110%;
       position: absolute;
       z-index: -1;
       border-radius: 1em;
       filter: blur(20px);

       /* animation: animate 5s linear infinite; */
     }

     /* @keyframes animate {
      0% {
        opacity: 0.3;
      }

      80% {
        opacity: 1;
      }

      100% {
        opacity: 0.3;
      }
    } */

     table {
       width: 100%;
       border-collapse: collapse;
       margin-top: 3px;
     }

     th,
     td {
       padding: 10px;
       text-align: left;
     }

     th {
       background-color: #2cb4e3;
       color: black;
     }

     /* Icon column */
     td img {
       max-width: 20px;
       max-height: 20px;
       display: block;
       margin: 0 auto;
     }




     /* Responsive styles */
     @media screen and (max-width: 768px) {
       table {
         font-size: 14px;
       }

       td {
         padding: 5px;
       }

       /* h1 {
        font-size: 24px;
        text-align: center;
      } */

       .stngbtn b {
         display: none;
       }



       .unlockbtn b {
         display: none;
       }

       .topicon {
         font-size: 1.7rem;
       }
     }

     .falgico {
       width: 25px;
       border-radius: 50%;
     }

     .context-menu {
       position: absolute;
       list-style-type: none;
       background-color: #fff;
       border: 1px solid #ccc;
       padding: 5px;
       display: none;
       z-index: 100;
     }

     .context-menu li {
       cursor: pointer;
     }

     .context-menu li:hover {
       background-color: #f0f0f0;
     }

     #toolbarfiles {
       background-color: rgb(44, 180, 227, 0.9);
       padding: 12px;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       gap: 5px;
       flex-wrap: wrap;
       margin-top: 10px;
       align-content: space-around;
     }

     #toolbarfiles .material-icons {
       color: #fff;
       /* #2cb4e3 icon color */
       font-size: 24px;
     }

     @media screen and (max-width: 768px) {
       #toolbarfiles {
         padding: 5px;
       }

       #toolbarfiles .material-icons {
         color: #fff;
         /* #2cb4e3 icon color */
         font-size: 18px;
       }
     }

     @media only screen and (max-width: 970px) {
       .dashboard-box .box-text-title {
         color: #2cb4e3;
         font-size: 16px;
         font-weight: normal;
       }
     }

     @media only screen and (max-width: 800px) {
       .dashboard-box .box-text-title {
         color: #2cb4e3;
         font-size: 16px;
         font-weight: normal;
       }

       #unseen table td:nth-child(2),
       #unseen table th:nth-child(2) {
         display: none;
       }
     }

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

       #unseen table td:nth-child(4),
       #unseen table th:nth-child(4),
       #unseen table td:nth-child(7),
       #unseen table th:nth-child(7),
       #unseen table td:nth-child(8),
       #unseen table th:nth-child(8) {
         display: none;
       }
     }

     .tab-nav-bar {
       display: flex;
       padding: 10px;
       flex-wrap: wrap;
       flex-direction: row;
       width: 100%;
       row-gap: 10px;
     }

     .sms-tab-nav-bar {
       display: flex;
       align-content: center;
       flex-wrap: wrap;
       justify-content: space-between;
       align-items: center;
       width: 100%;
     }

     .tab-title {
       gap: 6px;
       padding: 5px;
       display: flex;
       flex-direction: row-reverse;
       align-items: center;
       cursor: pointer;
       white-space: nowrap;
       justify-content: center;
       flex-wrap: wrap;
       width: 83px;
       align-content: space-between;
     }

     .tab-title:hover {

       background: rgb(15, 15, 15, 0.4);

     }

     .selected-tab .usrwall {
       box-shadow: 0px 0px 14px 3px #2cb4e3;
       background: transparent;
       backdrop-filter: blur(1px);
     }


     /* CSS for the dropdown */

     /* CSS for the dropdown */
     .dropdown {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
     }

     .tab-group {
       padding: 7px;
       width: 100%;
       background-color: transparent;
     }

     .tab-group.active .dropdown {
       max-height: 300px;
       /* Adjust the height as needed */
     }

     /* CSS for the arrow icon */
     .arrow {
       transition: transform 0.3s ease;
     }

     .tab-group.active .arrow {
       transform: rotate(90deg);
     }

     /* Specific CSS for the custom button */
     .custom-button {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       padding: 7px;

       background-color: #2cb4e3;
       outline: 3px #2cb4e3 solid;
       outline-offset: -3px;
       border-radius: 5px;
       border: none;
       cursor: pointer;
       transition: 400ms;
       width: 100px;
     }

     .custom-button-shorts {
       display: flex;
       justify-content: flex-start;
       align-items: center;
       padding: 7px;
       margin-right: 10px;
       margin-top: 10px;
       background-color: #2cb4e3;
       outline: 3px #2cb4e3 solid;
       outline-offset: 1px;
       border-radius: 19px;
       border: none;
       cursor: pointer;
       transition: 400ms;
       width: 100px;
       font-size: 0.8rem;
       flex-direction: column;
       align-content: center;
       flex-wrap: wrap;
     }

     .custom-button-shorts:hover {
       background-color: transparent;
       color: #2cb4e3;
     }

     @media screen and (max-width : 740px) {
       .custom-button-shorts p {
         font-size: 0.8rem;
       }

       /* .footer p {
        font-size: 0.5rem;
      } */
     }

     .custom-button svg {
       width: 18px;
       height: 18px;
     }

     .custom-button .custom-text {
       color: #000;
       font-weight: normal;
       font-size: 1em;
       transition: 400ms;
     }

     .custom-button svg path {
       transition: 400ms;
     }

     .custom-button:hover {
       background-color: transparent;
     }

     .custom-button:hover .custom-text {
       color: #2cb4e3;
     }

     @media screen and (max-width: 768px) {
       .custom-button .custom-text {
         color: #000;
         font-weight: normal;
         font-size: 1em;
         transition: 400ms;
       }

       .custom-button svg {
         width: 14px;
         height: 14px;
       }
     }

     .custom-button:hover svg path {
       fill: transparent;
       color: #2cb4e3;
     }

     /* Hide the default checkbox */
     .checkboxcontainer input {
       position: absolute;
       opacity: 0;
       cursor: pointer;
       height: 0;
       width: 0;
     }

     .checkboxcontainer {
       display: flex;
       position: relative;
       cursor: pointer;
       font-size: 20px;
       user-select: none;
       justify-content: center;
     }

     /* Create a custom checkbox */
     .checkmark {
       max-width: 20px;
       max-height: 20px;
       position: relative;
       top: 0;
       left: 0;
       height: 1.3em;
       width: 1.3em;
       background: #606062;
       border-radius: 7px;
       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
     }

     /* When the checkbox is checked, add a blue background */
     .checkboxcontainer input:checked~.checkmark {
       background-image: linear-gradient(#255CD2, #1D52C1)
     }

     /* Create the checkmark/indicator (hidden when not checked) */
     .checkmark:after {
       content: "";
       position: absolute;
       display: none;
     }

     /* Show the checkmark when checked */
     .checkboxcontainer input:checked~.checkmark:after {
       display: block;
     }

     /* Style the checkmark/indicator */
     .checkboxcontainer .checkmark:after {
       left: 0.45em;
       top: 0.20em;
       width: 0.24em;
       height: 0.6em;
       border: solid white;
       border-width: 0 0.15em 0.15em 0;
       transform: rotate(45deg);
     }

     .filesrow td {
       max-width: 150px;
       /* Adjust the maximum width as needed */
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       word-wrap: break-word;
       font-size: 0.8rem;
       /* To allow word wrap for long words */
     }

     .select-and-button {
       display: flex;
       align-items: center;
       gap: 10px;
       flex-wrap: wrap;
       justify-content: center;
       align-content: center;
       margin-bottom: 10px;
       width: 100%;
       /* Adjust the gap as needed */
     }


     .shortstools {
       padding-right: 10px;
       display: flex;
       justify-content: center;
       align-content: center;
       align-items: center;
       flex-wrap: nowrap;
       flex-direction: row;
       gap: 5px;
     }

     .notifi {
       display: flex;
       position: relative;

       border: none;
       color: aqua;
       border-radius: 50%;
       width: 50px;
       height: 50px;
       cursor: pointer;
       transition: background-color 0.3s linear 0s;
       z-index: 998;
       background-color: #0d0f13;
       border-bottom: 2px solid aqua;
       border-top: 2px solid rgb(154, 1, 219);

       background-size: 200% 100%;

       align-items: center;
       justify-content: center;
     }

     .menuhover {
       position: relative;

       border: none;
       color: aqua;
       border-radius: 9px;
       width: 30px;
       height: 30px;
       cursor: pointer;
       transition: all 0.6s ease-out 0s;
       z-index: 998;
       background-color: #0d0f13;
       border-bottom: 2px solid aqua;
       border-top: 2px solid rgb(154, 1, 219);
       /* border: 2px solid transparent; */

       /* border-radius: 20px; */
       background-size: 200% 100%;
       /* animation: gradient 5s ease infinite; */
     }

     @media screen and (max-width: 780px) {
       .notifi {
         width: 45px;
         height: 45px;
       }

       .menuhover {
         width: 45px;
         height: 45px;
       }
     }





     .panel {
       z-index: 1000;
       position: fixed;
       top: -100%;
       right: 0;
       width: 35%;
       height: 80%;
       background-color: #0d0f13;
       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
       transition: top 0.3s;
       overflow: hidden;
     }

     @media screen and (max-width: 880px) {
       .panel {
         width: 100%;
         height: 80%;
       }

       .filesrow td {

         font-size: 0.66rem;

       }

       .innerCard {
         font-size: 0.9rem;
       }

       #notificationPanel {
         width: 100%;
         height: 80%;
       }
     }

     .close-button {
       position: absolute;
       top: 2px;
       right: 2px;
       background-color: transparent;
       border: none;
       color: aqua;
       font-size: 20px;
       cursor: pointer;
     }

     /* styles.css */
     /* ... (previous styles) */

     .remove-button {
       background: none;
       border: none;
       cursor: pointer;
     }

     #notificationPanel {
       overflow-y: scroll;
       /* height:400px; */
       background: linear-gradient(#0d0f13, #0d0f13) padding-box,
         linear-gradient(349deg, transparent 1%, blueviolet, #40c9ff) border-box;
       border: 2px solid transparent;
       color: white;
       border-radius: 20px;
       background-size: 200% 100%;
       z-index: 1111;
       /* animation: gradient 5s ease infinite; */
     }

     /* @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    } */



     .notification {

       display: flex;
       gap: 5px;
       padding: 10px;
       color: #00dbde;
       border-bottom: 1px solid aqua;
     }

     .icon-tabler-trash {
       width: 25px;
       height: 40px;
       color: aqua;
       margin-right: 10px;
     }

     .notification-icon {
       width: 40px;
       height: 40px;
       color: #00dbde;
       margin-right: 10px;
       border-radius: 50%;
     }

     .notification-content {
       flex: 1;
     }

     .notification-name {
       font-weight: normal;
     }

     .notification-message {
       color: #fff;
     }

     /* styles.css */

     @keyframes myAnim {

       0%,
       100% {
         transform: rotate(0deg);
         transform-origin: 50% 50%;
       }

       10% {
         transform: rotate(8deg);
       }

       20%,
       40%,
       60% {
         transform: rotate(-10deg);
       }

       30%,
       50%,
       70% {
         transform: rotate(10deg);
       }

       80% {
         transform: rotate(-8deg);
       }

       90% {
         transform: rotate(8deg);
       }
     }

     .shake {
       animation: myAnim 0.7s ease-in-out infinite;
     }

     @keyframes slidemeani {
       to {
         transform: translate(900px, 0px);
       }
     }

     .slideme {
       animation: slidemeani 0.4s ease 0s 1 normal forwards;
     }

     /* styles.css */
     /* ... (previous styles) */

     .notification-tab {
       padding: 20px;
       cursor: pointer;
       padding: 10px;
       background-color: transparent;
       border-radius: 4px;
       margin-right: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-bottom: 2px solid aqua;
     }

     .notification-tabs {
       padding-top: 25px;
     }

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

       .notification-tab {
         width: 88px;
         font-size: 0.9rem;
         padding: 2px;

       }

     }

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

       .notification-tab {
         width: 66px;
         font-size: 0.8rem;
         padding: 2px;

       }

       #notificationPanel {
         border-radius: 0px;
       }
     }

     .notification-tab.active {
       background-color: aqua;
       color: #000;
     }


     .notification.notseen {
       border-left: 4px solid #33ff57;
       border-radius: 15px;
     }

     .notification.seen {
       border-left: 4px solid aqua;
       border-radius: 15px;
     }

     .notification-tabs {
       display: flex;
       align-items: center;
       align-content: center;
       justify-content: center;
     }

     /* .custom-search-container {
      position: relative;
      --size-button: 40px;
      color: white;
    }

    .custom-search-input {
      padding-left: var(--size-button);
      height: var(--size-button);
      font-size: 15px;
      border: none;
      color: #fff;
      outline: none;
      width: var(--size-button);
      transition: all ease 0.3s;
      background-color: #191A1E;
      box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e;
      border-radius: 50px;
      cursor: pointer;
    }

    .custom-search-input:focus,
    .custom-search-input:not(:invalid) {
      width: 250px;
      cursor: text;
      box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e;
    }

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

      .custom-search-input:focus,
      .custom-search-input:not(:invalid) {
        width: 200px;

      }

    }

    .custom-search-input:focus+.custom-search-icon,
    .custom-search-input:not(:invalid)+.custom-search-icon {
      pointer-events: all;
      cursor: pointer;
    }

    .custom-search-icon {
      position: absolute;
      width: var(--size-button);
      height: var(--size-button);
      top: 0;
      left: 0;
      padding: 8px;
      pointer-events: none;
    }

    .custom-search-icon .custom-search-svg {
      width: 100%;
      height: 100%;
    }

  

    /* CSS for the close button */

     .floating-image-container {
       position: fixed;
       bottom: 10px;
       right: 10px;
       z-index: 9999;

       display: none;


     }

     #displayedImage {
       float: right;
       width: 150px;
     }

     #imageContainerview {
       width: 150px;
       max-height: 60vh;
       /* Adjust this value as needed */
       overflow: hidden;
     }

     .button-container {
       position: sticky;
       top: 0;
       left: 0;
       display: flex;
       justify-content: space-between;
       width: 100%;
       padding: 5px;
       /* Adjust as needed */
       background: transparent;
       /* Background color for the button container */
       z-index: 1;
       /* Ensure the buttons are on top of the image */
     }

     .centerselect {
       width: 100%;
     }

     .scrolling {
       position: sticky;
       border-radius: 15px;
       top: 0;
       width: 100%;
       z-index: 1;
       /* Adjust the z-index as needed */
       overflow: auto;
       /* Allow content to be scrollable */
       max-height: 100vh;
       /* Restrict the height to the viewport height */
     }

     .custom-notification-new {
       position: fixed;
       top: -100px;
       /* Initially hidden above the viewport */
       z-index: 8888;
       left: 0;
       width: 100%;
       background-color: #0d0f13;
       background: linear-gradient(#0d0f13, #0d0f13) padding-box,
         linear-gradient(349deg, transparent 1%, blueviolet, #40c9ff) border-box;
       color: #fff;
       display: flex;
       border: 2px solid transparent;
       padding: 10px;
       border-radius: 20px;
       align-items: center;
       cursor: pointer;
       transition: top 0.5s;
     }

     .notification-image {
       width: 50px;
       /* Adjust the image size as needed */
       height: 50px;
       /* Adjust the image size as needed */
       margin-right: 10px;

       border-radius: 50%;
     }

     .notification-content-new {
       flex: 1;
     }

     .custom-notification-new.active {
       top: 0;
       /* Slide down to the top of the screen */
     }

     .custom-notification-new:hover {
       background: #2980b9;
     }

     .notsearch {
       display: none;
     }

     /* add this to your :root variables */
     .custom-checkbox-holder {
       display: flex;
       gap: 10px;
       padding: 10px;
     }

     .custom-checkbox {
       --custom-light: transparent;
       --custom-primary-color: #2cb4e3;
       --custom-duration: 0.3s;
       --custom-ease: ease-in-out;
     }

     /* hide checkbox */
     .custom-checkbox input[type="checkbox"] {
       display: none;
     }

     .custom-checkbox label {
       align-items: center;
       cursor: pointer;
       display: flex;
       white-space: nowrap;
     }

     .custom-checkbox label span {
       margin-left: 8px;
     }

     .custom-checkbox svg {
       height: 20px;
       width: 20px;
       border: 1px solid #2cb4e3;
     }

     /* svg rectangle property */
     .custom-checkbox svg>rect {
       fill: var(--custom-light);
       stroke: #2cb4e3;
       /* responsive values */
       stroke-dasharray: 400%;
       stroke-dashoffset: 400%;
       transition: var(--custom-duration) stroke-dashoffset var(--custom-ease);
     }

     /* svg check property */
     .custom-checkbox svg path {
       stroke: var(--custom-primary-color);
       /* responsive values */
       stroke-dasharray: 100%;
       stroke-dashoffset: 100%;
       transition: var(--custom-duration) stroke-dashoffset var(--custom-ease);
     }

     .custom-checkbox input[type="checkbox"]:checked+label svg>rect,
     .custom-checkbox input[type="checkbox"]:checked+label svg path {
       stroke-dashoffset: 0;
     }

     .titleandchecks {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
     }


     .navuser {
       display: flex;
       align-items: center;
       gap: 11px;
     }

     .logours,
     .stnpic {
       width: 65px;
       height: auto;
       border-radius: 50%;

     }

     .navuser-title {
       font-size: 0.9rem;
       overflow: hidden;
       display: flex;
       flex-wrap: wrap;
       align-content: center;
       justify-content: flex-start;
       align-items: center;
       flex-direction: column;
       white-space: break-spaces;
     }

     .navuser-title p {
       color: #4c4c4c;
       font-family: "Times New Roman", Times, serif;
       font-weight: normal;
     }

     .settings-contener {
       background-color: transparent;
       width: 100%;


     }

     .settings-options {
       display: flex;
       padding: 10px;
       gap: 15px;
     }

     .unlockbtn {
       border-radius: 15px;
       cursor: pointer;
       background-color: transparent;
       border: 0;
       width: 100%;
       font-size: large;
       color: white;
       padding: 5px;
       transition: all 0.3s ease 0s;
       display: flex;
       align-content: center;
       text-align: center;
       align-items: center;
       justify-content: center;
     }

     .stngbtn {
       border-radius: 15px;
       cursor: pointer;
       background-color: transparent;
       border: 0;
       max-width: 200px;
       font-size: 0.9rem;
       color: white;
       padding: 5px;
       transition: all 0.3s ease 0s;
       display: flex;
       align-content: center;
       text-align: center;
       align-items: center;
       justify-content: center;
       border-bottom: 3px solid purple;
     }

     .topbtn {
       cursor: pointer;
       background-color: transparent;
       border: 0;
       width: 130px;
       font-size: 18px;
       color: white;
       padding: 5px;
       transition: all 0.3s ease 0s;
       display: flex;
       align-content: center;
       text-align: center;
       align-items: center;
       justify-content: center;
       border-bottom: 3px solid purple;
       gap: 5px;
       padding: 20px;
       margin: 10px;
       border-radius: 20px;
     }

     .stngbtn svg {
       padding-right: 5px;
     }

     .topbtn svg {
       padding-right: 5px;
     }

     .unlockbtn svg {
       padding-right: 5px;
     }

     .stngbtn:hover {
       box-shadow: 0px 5px 7px 0.5px #008a94;
     }

     .topbtn:hover {
       box-shadow: 0px 5px 7px 0.5px #008a94;
     }

     .unlockbtn:hover {
       box-shadow: 0px 5px 7px 0.5px #008a94;
     }

     .active {
       border-bottom: 4px solid aqua;
       border-color: aqua;
       font-size: large;
       color: #fff;
     }

     .contentsetn {
       border-radius: 10px;
       background-color: #0d0f13;
       height: auto;
       padding: 20px;
       padding-bottom: 50px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;

     }

     .namebox {
       width: 100%;
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: flex-start;
       gap: 10px;
       flex-wrap: wrap;
       padding: 10px;
     }

     .namebox input {
       background: black;
       border: 0;
       color: #afafaf;
       border-bottom: 1px solid blueviolet;
       font-size: 2vh;
       width: 180px;
       cursor: not-allowed;
       padding: 5px;
       margin: auto 0;
       border-radius: 10px;
     }

     .hideit {
       display: none;
     }

     .stn-propic {
       border: 1px solid aqua;
       border-radius: 15px;
       border-bottom: 0px;
       border-left: 0px;
       border-right: 0px;
       padding: 10px;
       display: flex;
       flex-wrap: wrap;
       align-items: flex-start;
       align-content: flex-start;
       gap: 3px;
       width: 100%;
       flex-direction: column;
     }

     .logoursthumb {
       width: 30px;
       height: 30px;
       opacity: 0.7;
       cursor: pointer;
       background-color: transparent;
     }

     .logoursthumb:hover {
       opacity: 1;
       width: 33px;
       height: 33px;
     }

     /* Styles for Drag Handles and Floating Dock */
     .floating-dock {
       position: fixed;
       bottom: 10px;
       left: 50%;
       transform: translateX(-50%);
       background-color: #0d0f13;
       background: linear-gradient(#0d0f13, #0d0f13) padding-box, linear-gradient(349deg, transparent 1%, blueviolet, #40c9ff) border-box;
       border: 2px solid transparent;
       background-size: 200% 100%;
       /* animation: gradient 10s ease infinite; */
       margin-top: 1px;
       width: 100%;
       flex-wrap: nowrap;
       padding: 5px;
       display: flex;
       justify-content: space-around;
       width: 40%;
       /* Adjust the width as needed */
       border-radius: 15px;
       box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
       z-index: 999;
       transition: all 0.7s ease-in-out 0s;
       /* Ensure the dock is above other elements */
     }

     @media (max-width: 768px) {
       .floating-dock {
         width: 70%;
       }
     }

     /* Styles for the Dock Buttons */


     /* Responsive Styles */

     /* Styles for Drag Handles and Floating Dock */

     .drag-handles {
       display: flex;
       justify-content: flex-end;
       background-color: transparent;
       padding: 5px;
       width: 50px;
       position: fixed;
       bottom: 12px;
       right: 5px;
       cursor: pointer;
     }

     /* @media screen and (max-width: 767px) {
      .drag-handles {
        display: none;
      }

    } */

     .drag-line {
       height: 2px;
       background-color: #fff;
       width: 20px;
       cursor: pointer;
     }

     .form-container {
       width: 100%;
       padding: 20px;
     }



     .form-container button:active {
       transform: scale(0.95);
     }

     .form-container .form {
       display: flex;
       flex-direction: column;
       gap: 20px;

       padding-bottom: 15px;
     }

     .form-container ul {
       list-style-type: none;

       padding: 5px;

       margin: 0;

       font-size: 1rem;
     }

     .form-container ul li {
       display: flex;

       align-items: center;
     }

     .tippass-off {
       width: 25px;
       height: 25px;
       color: red;
     }

     .tippass-on {
       width: 25px;
       height: 25px;
       color: lime;
     }

     @media screen and (max-width: 780px) {
       .form-container ul {
         font-size: 0.8rem;
       }
     }

     .form-container .form-group {
       display: flex;
       flex-direction: column;
       gap: 2px;
     }

     .form-container .form-group label {
       display: block;
       margin-bottom: 5px;
       color: #717171;
       font-weight: normal;
       font-size: 12px;
     }

     .form-container .form-group input {
       width: 300px;
       padding: 12px 16px;
       border-radius: 8px;
       color: #fff;
       font-family: inherit;
       background-color: transparent;
       border: 1px solid #414141;
     }

     .fanotactive input {
       width: 80%;
       padding: 12px 16px;
       border-radius: 8px;
       color: #fff;
       font-family: inherit;
       background-color: transparent;
       border: 1px solid #414141;
     }




     .fagood {
       display: none;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
       align-content: center;
       flex-wrap: wrap;
       gap: 20px;
     }

     .fanotactive {
       display: none;
       text-align: center;
       max-width: 600px;
       margin: 0 auto;
       gap: 45px;
       align-content: center;
       justify-content: center;
       align-items: center;
       flex-wrap: wrap;
     }

     #qrimg {
       width: 144px;
       height: 144px;
     }

     .fanotactive img {
       max-width: 100%;
       height: auto;
       margin-bottom: 20px;
     }

     .fanotactive ol {
       list-style: none;
       padding: 0;
       margin: 0;
     }



     .fanotactive li {
       margin-bottom: 10px;
       font-size: 0.8rem;
       text-align: left;
     }

     .fanotactive input[type="text"] {
       width: 100%;
       padding: 10px;
       box-sizing: border-box;
     }

     .confbtn {
       background-color: #4CAF50;
       color: white;
       padding: 10px;
       border: none;
       cursor: pointer;
     }

     /* Add a media query for smaller screens */
     @media screen and (max-width: 600px) {
       .fanotactive {
         padding: 20px;
       }
     }

     .confbtn {
       border-radius: 15px;
       cursor: pointer;
       background-color: transparent;
       border: 0;
       font-size: large;
       color: white;
       padding: 5px;
       transition: all 0.3s ease 0s;
       border-bottom: 4px solid aqua;
       border-color: aqua;
       font-size: large;
       color: #fff;
     }

     .tiplist {
       display: none;
     }

     .line-container {
       position: relative;
       width: 100%;
       height: 30px;
       /* Set your desired height */
     }

     .line {
       position: absolute;
       top: 50%;
       width: 100%;
       height: 2px;
       /* Set your desired thickness */
       background: linear-gradient(to right, transparent 0%, #a709c7 20%, aqua 80%, transparent 100%);
       content: '';
     }

     .MessagesContener {
       display: flex;
       justify-content: center;
       padding: 5px;
       align-items: center;
       text-align: center;
       flex-wrap: wrap;
       align-content: center;
     }

     /* Styles for the left data container */
     .data-container {

       padding: 10px;
       box-sizing: border-box;
       flex: 1;
       flex-basis: 400px;
       transition: all 0.3s ease 0s;
     }

     /* Styles for individual data items */
     .data-item {
       margin-bottom: 1px;
       background: #181818;
       padding: 10px;
       cursor: pointer;
       font-size: 0.9rem;
       color: white;
       border-radius: 15px;
     }

     .data-item-1 {
       margin-bottom: 3px;
       background: #181818;
       padding: 10px;

       color: aqua;
       font-size: 1rem;
       text-align: left;
       font-style: normal;
       border-radius: 25px;
     }

     .smstools-header {
       display: flex;
       justify-content: flex-start;
       margin-bottom: 10px;
       gap: 15px;
     }

     .smstools-header button {
       background: transparent;
       color: aqua;
       border: 0px;
       cursor: pointer;
       transition: all 0.3s ease-in 0s;

     }

     .smstools-header button:hover {
       color: white;
     }



     .smstypes {
       display: flex;
       background: transparent;
       align-items: center;
       justify-content: center;
       padding: 5px;
       flex: 1;

       gap: 20px;
     }

     .smstypes svg {
       width: 25px;
       height: 25px;
     }

     .sms-left-tools {
       display: flex;
       background: transparent;
       align-items: center;
       justify-content: center;
       padding: 5px;
       flex: 1;

       gap: 20px;
     }

     .sms-left-tools svg {
       width: 25px;
       height: 25px;
     }

     .smstypsbtns {
       background-color: transparent;
       border-radius: 6px;
       padding: 3px;
       width: 40px;
       text-align: center;
       border: 1px solid #c500c2;
       border-top: 0px;
       border-left: 0px;
       border-right: 0px;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       cursor: pointer;
       gap: 5px;
       transition: all 0.5s ease-out 0s;
     }

     .smstoolsbtns {
       background-color: transparent;
       border-radius: 6px;
       padding: 3px;
       width: 40px;
       text-align: center;
       border: 1px solid #c500c2;
       color: aqua;
       border-top: 0px;
       border-left: 0px;
       border-right: 0px;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       cursor: pointer;
       gap: 5px;
       transition: all 0.1s ease-out 0s;
     }

     .smstoolsbtns:active {
       border-bottom: 2px solid aqua;
       color: #c500c2;
     }

     .smstypsbtns svg {
       width: 25px;
       height: 25px;
     }

     .smsall {
       border-bottom: 1px solid #c500c2;
       color: white;
     }

     .smsinbox {
       border-bottom: 1px solid #c500c2;
       color: white;
     }

     .smsSent {
       border-bottom: 1px solid #c500c2;
       color: white;
     }

     .smsactive {
       border-bottom: 2px solid aqua;
       color: aqua;
     }



     .ms-pr {
       position: relative
     }

     .ms-dd:focus-visible {
       box-shadow: 0 1px 5px aqua;
       outline: none;
       outline-width: 0
     }

     .ms-dd {
       background: transparent;
       display: inline-block;
       font-family: "Times New Roman", Times, serif;
       font-weight: normal;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       vertical-align: top;
       width: 260px;

     }

     .ms-dd button:focus,
     .ms-dd input:focus,
     .ms-dd select:focus,
     .ms-dd textarea:focus {
       outline: none
     }

     .ms-dd .ms-value-input {
       border: 0;
       left: 20px;
       position: absolute;
       top: 10px;
       width: 50%
     }

     .ms-dd .ms-dd-header {
       border: 1px solid #c500c2;
       border-bottom: none;
       border-radius: 2px;
       cursor: pointer;
       min-height: 35px;
       position: relative;
       width: 100%;
       border-radius: 15px;
     }

     .ms-dd .ms-dd-header .option-selected {
       color: #000;
       display: block;
       font-weight: normal;
       overflow: hidden;
       padding: 10px 20px 10px 10px;
       pointer-events: none
     }

     .ms-dd .ms-dd-header a {
       display: block
     }

     .ms-dd .ms-dd-header .ms-list-counter,
     .ms-dd .ms-dd-header input[type=checkbox] {
       display: none
     }

     .ms-dd .ms-dd-header .ms-header-counter {
       color: #0e76a8;
       font-weight: normal;
     }

     .ms-dd .ms-dd-header .ms-filter-box {
       border-bottom: 1px solid #c500c2;
       box-sizing: border-box;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       padding: 6px 10px
     }

     .ms-dd .ms-dd-header .ms-filter-box input,
     .ms-dd .ms-dd-header .ms-filter-box input:focus,
     .ms-dd .ms-dd-header .ms-filter-box input:focus-visible {
       border: 1px solid aqua;
       box-sizing: border-box;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       height: 25px;
       padding-left: 6px;
       width: 100%
     }

     .ms-dd .ms-dd-header .ms-filter-box input:focus-visible {
       outline: 1px solid transparent
     }

     .ms-dd .ms-dd-option-image,
     .ms-dd .ms-dd-selected-img {
       margin-right: 5px;
       max-width: 64px;
       vertical-align: middle;
       border-radius: 50%;
     }

     .ms-dd .ms-dd-arrow {
       height: 0;
       margin-top: -3px;
       position: absolute;
       right: 10px;
       top: 50%;
       width: 0
     }

     .ms-dd .ms-dd-arrow.ms-dd-pointer-down {
       border: 5px solid aqua;
       border-top-color: #000
     }

     .ms-dd .ms-dd-arrow.ms-dd-pointer-up {
       border: 5px solid aqua;
       border-bottom-color: #000;
       margin-top: -8px
     }

     .ms-dd .ms-options {
       background: #0d0f13;
       border: 1px solid rgb(159, 0, 167);
       border-top: none;
       box-shadow: 0 1px 5px aqua;
       display: none;
       list-style: none;
       margin: 0;
       overflow: auto;
       padding: 0;
       position: absolute;
       width: 100%;
       z-index: 999;
     }

     .ms-dd .ms-list-option,
     .ms-dd .ms-optgroup ul .ms-list-option {
       align-items: center;
       border-bottom: 1px solid aqua;
       color: white;
       cursor: pointer;
       display: flex;
       justify-content: flex-start;
       overflow: hidden;
       padding: 10px;
       position: relative;
       text-decoration: none
     }

     .ms-dd .ms-list-option input[type=checkbox],
     .ms-dd .ms-optgroup ul .ms-list-option input[type=checkbox] {
       margin-right: 5px;
       vertical-align: middle
     }

     .ms-dd .ms-list-option:last-child,
     .ms-dd .ms-optgroup ul .ms-list-option:last-child {
       border-bottom: none
     }

     .ms-dd .ms-list-option:hover,
     .ms-dd .ms-optgroup ul .ms-list-option:hover {
       background: #0d0f13;
       color: aqua;
     }

     .ms-dd .ms-list-option.option-selected,
     .ms-dd .ms-optgroup ul .ms-list-option.option-selected {
       background: #0d0f13;
       color: aqua;
       border-radius: 15px;
     }

     .ms-dd .ms-list-option.ico-align-right .ms-dd-option-image,
     .ms-dd .ms-list-option.ico-align-right .ms-dd-selected-img,
     .ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-option-image,
     .ms-dd .ms-optgroup ul .ms-list-option.ico-align-right .ms-dd-selected-img {
       order: 2
     }

     .ms-dd .ms-list-option.disabled,
     .ms-dd .ms-list-option:disabled,
     .ms-dd .ms-optgroup ul .ms-list-option.disabled,
     .ms-dd .ms-optgroup ul .ms-list-option:disabled {
       cursor: default;
       opacity: .4
     }

     .ms-dd .ms-list-option .ms-dd-desc,
     .ms-dd .ms-optgroup ul .ms-list-option .ms-dd-desc {
       color: rgb(149, 149, 149);
       display: block;
       font-weight: normal;
       line-height: 1.5em;
       overflow: hidden;
     }

     .ms-dd .ms-header-middle-content,
     .ms-dd .ms-middle {
       display: flex;
       justify-content: flex-start;
       width: 100%
     }

     .ms-dd.disabled,
     .ms-dd:disabled {
       cursor: default;
       opacity: .4;
       pointer-events: none
     }

     .ms-dd .ms-optgroup-padding {
       font-weight: normal;
       padding: 10px 10px 0
     }

     .ms-dd .ms-optgroup {
       display: block
     }

     .ms-dd .ms-optgroup:hover {
       background: transparent;
       color: #000
     }

     .ms-dd .ms-optgroup ul {
       margin: 0;
       padding: 0
     }

     .ms-dd .ms-optgroup ul .ms-list-option {
       padding-left: 20px
     }

     .ms-dd .ms-optgroup ul:last-child {
       border-bottom: 1px solid aqua;
     }

     .ms-dd .ms-dd-option-content {
       width: 100%
     }

     :focus {
       outline: none
     }

     .contacts-window {

       padding: 20px;
       border: 0px;
       border-radius: 15px;
       background-color: #0d0f13;
       width: 100%;
       height: 100vh;
       overflow: auto;
       scroll-behavior: auto;
     }

     .cntc-tools {
       flex-wrap: wrap;
       background-color: #0d0f13;
       padding: 15px;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
       width: 100%;
     }

     .cntc-tools button {
       padding: 8px;
       text-align: center;
       display: flex;
       align-items: center;
       gap: 5px;
       background-color: #0d0f13;
       font-size: 1rem;
       border: 1px solid aqua;
       color: white;
       cursor: pointer;
       border-radius: 15px;
       transition: all 0.5s ease 0s;
       font-family: "Times New Roman", Times, serif;
       font-weight: normal;
     }

     .cntc-tools button svg {
       width: 20px;
       height: 20px;
     }

     .cntc-tools button:hover {
       color: aqua;
       border-radius: 3px;
       border: 0px;
       box-shadow: 0 1px 5px aqua;
     }

     .cntc-table {
       background-color: transparent;
       width: 100%;
       display: flex;
       align-items: center;
       flex-wrap: wrap;

     }

     .cntc-table-item {
       text-align: center;
       width: 100%;
       margin-bottom: 5px;
       padding: 5px;
       border-radius: 20px;
       background-color: black;
       color: white;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       gap: 5px;
       flex-wrap: wrap;
     }

     @media screen and (max-width:780px) {
       .cntc-table-item {

         width: 100%;
         flex-direction: column;
       }
     }

     .cntc-table-item span {
       flex: 1;
       word-wrap: break-word;
       width: 100%;
     }

     .contact-icon {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       background-color: transparent;
       border: 1px solid aqua;
       /* You can change the background color as per your preference */
       display: flex;
       justify-content: center;
       align-items: center;
       margin-right: 10px;
       font-size: 18px;
       color: #fff;
       /* You can change the text color as per your preference */

     }

     .copycontact {
       cursor: pointer;
       transition: all 0.4s ease 0s;
     }

     .copycontact:hover {
       color: aqua;
     }

     .clients-searchbox {
       padding: 15px;
       width: 100%;
       color: white;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-wrap: nowrap;
     }

     .clients-searchbox span:hover {
       color: aqua;
       border-radius: 3px;
       border: 0px;

       cursor: pointer;
     }

     .search-input-glop {
       display: flex;
       opacity: 0;
       width: 0%;
       text-align: center;
       box-shadow: 0px 0px 14px 3px #2cb4e3;
       margin: 5px;
       background-color: transparent;
       border: 1px solid aqua;
       color: white;
       border-radius: 20px;
       font-size: medium;
       transition: all 0.4s ease-out 0s;
     }

     .store_phonestabs {
       width: 100%;
       background: linear-gradient(#0d0f13, #0d0f13) padding-box,
         linear-gradient(349deg, transparent 1%, blueviolet, #40c9ff) border-box;
       height: auto;
       display: flex;
       flex-wrap: wrap;
       border: 2px solid transparent;
       border-radius: 20px;
       padding: 5px;
     }

     .store_phonetab {
       width: 120px;
       background-color: #0d0f13;
       color: aqua;
       object-fit: scale-down;
       border-radius: 0px 15px 0 15px;
       padding: 3px;
       margin: 5px;
       display: flex;
       align-items: center;
       overflow: hidden;
       border: 1px solid purple;

       cursor: pointer;
       transition: all 0.6s ease-out 0s;
     }

     @media screen and (max-width: 720px) {
       .store_phonetab {
         width: 40px;
       }
     }

     .store_phonetab:hover {
       border: 1px solid aqua;
       border-radius: 15px 0px 15px 0px;
     }

     .store_phoneico {
       width: 30px;
       height: 30px;
       float: left;
       border-radius: 50%;
     }

     .store_active {
       border: 1px solid aqua;
       width: 120px;
       border-radius: 15px 0px 15px 0px;
     }

     .store_phonetab_info {
       display: flex;
       height: auto;
       flex-direction: column;
       padding-left: 8px;
     }

     .storephonename {
       font-size: 1rem;
     }

     .storephoneip {
       font-size: 0.7rem;
     }

     .store_viewer {
       display: flex;
       flex-wrap: wrap;
       width: 100%;
       background-color: transparent;
       cursor: pointer;
     }

     .store_img_item {
       display: flex;
       flex: 1;
       flex-basis: 200px;
       margin: 5px;
       overflow: hidden;
       position: relative;
       flex-direction: column;
       align-content: center;
       justify-content: center;
       align-items: center;
       gap: 10px;
     }

     .store_img_item img {
       width: 30%;
       height: auto;
       display: block;
     }

     .store_img_item:hover {
       border: 1px solid aqua;
     }

     .img_description {
       padding: 10px;
       text-align: center;
       color: #fff;
       background-color: #0d0f13;
       opacity: 0;
       transition: all 0.8s ease-in 0s;
     }

     .toolbar {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px;
       background-color: transparent;
       width: 100%;
     }

     .toolbar select,
     .previwtools select {
       padding: 5px;
       margin-right: 10px;
       background: #0d0f13;
       color: aqua;
       border: 1px solid aqua;
       height: 28px;
       border-radius: 15px;
       font-family: "Times New Roman", Times, serif;
       font-size: 0.9rem;
       letter-spacing: 1.8px;
       font-weight: normal;
       width: 90px;
     }

     .toolbar button,
     .apps_right_tools button,
     .previwtools button {
       padding: 8px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 10px;
       background: transparent;
       color: aqua;
       border: 1px solid transparent;
       border-radius: 15px;
       /* width: 120px; */
       height: 28px;
       transition: all 0.6s ease-in-out 0s;
       font-size: 0.9rem;

       font-family: "Times New Roman", Times, serif;
       font-weight: normal;
     }

     .toolbar button svg,
     .storage_head button svg,
     .apps_right_tools button svg,
     .previwtools button svg {
       width: 20px;
       height: 20px;
     }

     .storage_head {
       padding: 15px;
     }

     .storage_head button {
       padding: 4px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 10px;
       background: transparent;
       color: aqua;
       border: 1px solid transparent;
       border-radius: 15px;
       width: 100%;
       height: 28px;
       transition: all 0.6s ease-in-out 0s;
       font-size: 0.9rem;

       font-family: "Times New Roman", Times, serif;
       font-weight: normal;
     }

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

       .toolbar button span,
       .apps_right_tools button span,
       .previwtools button span {
         display: none;
       }
     }

     .toolbar button:hover,
     .apps_right_tools button:hover {
       border: 1px solid aqua;
       border-top: 0px;
       border-left: 0px;
       border-right: 0px;
     }

     .previwtools button:hover {
       border: 1px solid aqua;
       border-top: 0px;
       border-left: 0px;
       border-right: 0px;
     }

     .galleryselected {
       border: 1px solid aqua;
     }

     .galleryCheckbox {
       appearance: none;
       -webkit-appearance: none;
       -moz-appearance: none;
       background-color: #60606000;
       border: 1px solid #00ffff;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
         inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
       padding: 9px;
       border-radius: 3px;
       display: inline-block;
       position: relative;
     }

     .galleryCheckbox:active,
     .galleryCheckbox:checked:active {
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
         inset 0px 1px 3px rgba(0, 0, 0, 0.1);
     }

     .galleryCheckbox:checked {
       background-color: transparent;
       border: 1px solid aqua;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
         inset 0 0 10px rgba(0, 0, 0, 0.05),
         inset 15px 10px -12px rgba(255, 255, 255, 0.1);
       color: aqua;
       border: 0;
     }


     .galleryCheckbox:checked:after {
       content: "\2714";
       font-size: 14px;
       position: absolute;
       top: 0px;

       left: 3px;
       color: aqua;
       border: 0;
     }

     .view_overlayGallery {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(13, 15, 19, 0.7);
       backdrop-filter: blur(2px);
       /* Black with 70% transparency */
       z-index: 1;
     }

     .lock_overlayGallery {
       display: flex;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: #0d0f13;
       z-index: 2;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       align-content: center;

     }


     .previwimage {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 100%;
       height: 80%;

     }

     .previwtools {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 10px;
       background-color: rgb(2, 2, 2, 30%);
       gap: 15px;
       backdrop-filter: blur(5px);
       z-index: 2;
     }

     .pvimg {
       position: relative;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: contain;
       transition: all 0.9s ease-in 0s;

     }



     .storagepage {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 100%;
       height: 70vh;
       gap: 10px;
       overflow: scroll;
       flex-wrap: wrap;
       align-content: flex-start;
     }

     #unlockglryimg {
       cursor: pointer;
     }


     .pagination {
       list-style: none;
       padding: 8px;
       top: 50px;
       background-color: rgb(0 0 0 / 30%);
       backdrop-filter: blur(15px);
       display: flex;
       justify-content: center;
       align-items: center;
       flex-wrap: wrap;
       align-content: space-around;
       flex-direction: row;
     }

     .pagination li {
       width: 35px;
       height: 35px;
     }

     .pagination a {
       display: flex;
       width: 30px;
       height: 30px;
       text-decoration: none;
       padding: 10px;
       border: 1px solid aqua;
       color: aqua;
       border-radius: 5px;
       justify-content: center;
       align-items: center;
     }

     a.paginationactiv {
       text-decoration: none;
       padding: 5px 10px;
       border: 1px solid white;
       color: white;
       border-radius: 15px;
     }

     .pagination a:hover {
       background-color: black;
     }

     .dropwifi {
       color: lime;
     }

     .dropwifioff {
       color: red;
     }

     .storage_head button:hover {
       border: 1px solid aqua;
       border-top: 0px;
       border-left: 0px;
       border-right: 0px;
     }

     .apps_contener {
       display: flex;
       flex-direction: row;
     }

     .apps_left {
       width: 20%;

       height: 80vh;
       overflow: hidden;
       overflow-y: scroll;
       display: flex;
       align-content: flex-start;
       flex-wrap: wrap;
       gap: 5px;
       transition: all 0.8s ease-out 0s;
     }

     .apps_ico {
       flex: 1;
       flex-basis: 60px;
       display: flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
       cursor: pointer;
       padding: 5px;
       border-radius: 15px;
       font-size: 2.7vmin;
       /* give the beautiful '...' effect */
     }

     .apps_ico span {
       text-align: center;
       width: 4em;
       overflow: hidden;
       /* make sure it hides the content that overflows */
       white-space: nowrap;
       /* don't break the line */
       text-overflow: ellipsis;
     }

     .apps_ico span:hover {
       white-space: pre-wrap;
     }

     .apps_ico:hover {
       background-color: rgb(255 255 255);
       color: black;
     }

     .apps_ico:hover span {
       white-space: pre-wrap;
     }



     .apps_ico img {
       transition: all 0.8s ease-out 0s;
       width: 45px;
       height: 45px;
       border-radius: 50%;
     }

     .apps_right {
       width: 80%;
       background-color: #0d0f13;
       height: 80vh;
       overflow: hidden;

       transition: all 0.8s ease-out 0s;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
     }

     .apps_right_tools {
       width: 100%;
       display: flex;
       justify-content: center;
       flex-wrap: wrap;
       align-items: center;
     }

     .apps_right_tools_2 {
       width: 100%;
       display: flex;
       justify-content: flex-start;
       background: #0d0f13;

     }

     .apps_right_tools_2 button {
       height: 25px;
       flex: 1;
       background: transparent;
       border: 0px;
       color: purple;
       cursor: pointer;

     }

     .apps_right_tools_2 .activeappstools2 {
       color: aqua;
       background: #292929b5;
     }

     .apps_right_tools button {
       margin: 15px;
       padding: 5px;

     }

     .apps_topinfo {
       width: 100%;

       height: 20vh;
       display: flex;
       justify-content: flex-start;
       flex-wrap: nowrap;
       flex-direction: row;
       padding: 10px;
     }

     .apps_bigimg {
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
     }

     .apps_bigimg img {
       width: 70px;
       height: auto;
     }

     .apps_infostext {
       padding-left: 10px;
       display: flex;
       flex-direction: column;
       align-items: start;
       justify-content: space-between;
       font-size: 2.7vmin;
     }

     .appssettings {
       font-size: 2.7vmin;
     }

     .apps_rgiht_clos {
       width: 100%;
       height: 5vh;

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

     .apps_rgiht_clos button {
       background: transparent;
       border: 0;
       color: aqua;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
     }

     #ClearAppsinfo {
       display: none;
     }

     .apps_rgiht_clos button:hover {
       color: white;
     }

     @media screen and (max-width:767px) {
       .apps_ico span {
         display: none;
       }

       .apps_left {
         width: 20%;

       }

       .apps_ico img {
         width: 35px;
         height: 35px;

       }

       .apps_right {
         width: 80%;

       }
     }

     .appssettings {
       width: 100%;
       background: #0d0f13;
       height: auto;
       text-align: left;
       height: 46vh;
       overflow: hidden;
       overflow-y: scroll;
     }

     .appssettings table {
       width: 100%;

     }

     .appssettings table tr {
       width: 100%;
       display: flex;
       flex-direction: column;
       gap: 5px;
       padding-top: 5px;
     }

     .appslistdata td::before {
       content: '• ';
     }

     .apps_top_tools {
       width: 100%;
       height: 25vh;
       text-align: center;
     }

     .apss_selected {
       background-color: rgb(255 255 255);
       color: black;


     }

     .apss_selected span {
       display: unset;
       white-space: pre-wrap;
       text-overflow: unset;
     }

     table tr:hover td {
       background: #2e2e2e;

     }

     .selectefilerow {
       background: #2e2e2e;
     }

     .pofilebtns:hover {
       border-bottom: 3px solid aqua;
     }



     .pofilebtns {

       cursor: pointer;
       background-color: transparent;
       border: 0;
       font-size: 1.1rem;
       color: white;
       padding: 5px;
       transition: all 0.3s ease 0s;
       display: flex;
       align-content: center;
       text-align: center;
       align-items: center;
       justify-content: center;
       border-bottom: 3px solid purple;

     }

     .probtnactive {
       border-bottom: 3px solid aqua;
     }

     .pofilebtns p {

       height: auto;
       padding: 0;
       margin: 0;

     }



     .overlay_shorts {
       /* display: none; */
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 75vh;
       background-color: rgb(13 15 19 / 80%);
       backdrop-filter: blur(5px);
       align-items: center;
       justify-content: center;
       border-radius: 15px;
       z-index: 1;
       /* width: 0; */
       transform: scaleY(0);
       transition: all 0.3s ease-out 0s;
       border: 3px solid aqua;
       border-left: 0;
       border-right: 0;
     }

     /* Styles for close button */
     .closeshorts {
       padding-left: 15px;
       top: 5px;
       right: 15px;
       cursor: pointer;
       font-size: 30px;
       font-weight: normal;
       color: red;
     }

     /* Styles for icons container */
     .shorts-container {
       display: none;
       text-align: center;
       align-items: center;
       align-content: flex-start;
       flex-wrap: wrap;
       height: 100%;
       width: 100%;
       justify-content: flex-start;
       overflow: scroll;
       font-size: 3.8vmin;
       white-space: nowrap;
       padding: 5px;
     }

     .shorts-container-main {
       display: none;

       flex-wrap: wrap;
       padding: 20px;
       overflow: scroll;
       font-size: 3.8vmin;
       white-space: nowrap;
     }

     .shorts-container-main-itm {
       flex: 1;
       flex-basis: 400px;
       border-radius: 15px;
     }

     .short_active {
       display: flex;
     }

     /* Styles for Material Icons */
     .shorttoolsico {


       display: inline-block;
       margin: 10px;
       cursor: pointer;
       text-align: center;
       display: flex;
       flex-direction: column;
       align-content: center;
       justify-content: center;
       align-items: center;
       flex: 1;
       flex-basis: 100px;

     }

     .shorttoolsico p {
       font-size: 1rem;
     }

     .shorttoolsico:hover {
       color: aqua;
     }

     /* Responsive styles for icons */
     @media (max-width: 768px) {
       .shorttoolsico {
         font-size: 36px;
       }
     }



     .protools {
       display: flex;
       text-align: center;
       align-items: center;
       align-content: flex-start;
       height: auto;
       width: 100%;
       justify-content: center;
       flex-wrap: wrap;
     }

     .proficons {
       font-size: 30px;
     }

     .Prims-container {
       display: flex;
       flex-wrap: wrap;
       width: 100%;
       height: 100%;
       white-space: nowrap;
     }

     .item {
       box-sizing: border-box;
       border: 1px solid #000000;
       border-top: 0px;
       width: 50%;
       display: flex;
       align-items: center;
       padding: 10px;
       justify-content: center;
       align-content: center;
       flex-direction: column;

       position: relative;
     }

     .prims_stats {
       justify-content: flex-start;
       padding-top: 35px;
     }

     @media (max-width: 767px) {

       /* On small screens, make each item take 100% width */
       .item {
         width: 100%;
       }
     }

     .prims_ctrl_top {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       justify-content: flex-end;
       gap: 15px;
       width: 100%;
     }

     .prims_ctrl_top button {
       width: 50px;

     }

     .primes_req_lst {

       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: flex-start;
       gap: 3px;
       height: auto;
     }

     .primes_req_lst span {
       display: flex;
       flex-wrap: nowrap;
       font-size: 3.8vmin;
       align-items: center;
       cursor: pointer;
       gap: 15px;
     }

     .primes_req_lst span:hover {
       color: red;
     }

     .primes_req_lst span::before {
       content: '\2716 ';
     }

     #Primes_select {
       background: transparent;
       border: 0px;
       border-bottom: 1px solid purple;
       color: #f000ff;
       padding: 5px;
       font-size: 20px;
     }

     .highprims {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 15px;
     }

     .primsstates {
       display: flex;
       width: 100%;
       flex-direction: column;
       flex-wrap: nowrap;
       font-size: 3.8vmin;
     }

     .primsstates_item {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 5px;
       border-bottom: 1px solid rgb(0, 225, 255, 0.144);
     }

     .cl-toggle-switch {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
     }

     .cl-switch {
       position: relative;
       display: inline-block;
     }

     /* Input */
     .cl-switch>input {
       appearance: none;
       -moz-appearance: none;
       -webkit-appearance: none;
       z-index: -1;
       position: absolute;
       right: 6px;
       top: -8px;
       display: block;
       margin: 0;
       border-radius: 50%;
       width: 40px;
       height: 40px;
       background-color: aqua;
       outline: none;
       opacity: 0;
       transform: scale(1);
       pointer-events: none;
       transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
     }

     /* Track */
     .cl-switch>span::before {
       content: "";
       /* float: right; */
       display: inline-block;
       margin: 5px 0 5px 10px;
       border-radius: 7px;
       width: 36px;
       height: 14px;
       background-color: purple;
       vertical-align: top;
       transition: background-color 0.2s, opacity 0.2s;
     }

     /* Thumb */
     .cl-switch>span::after {
       content: "";
       position: absolute;
       top: 2px;
       right: 16px;
       border-radius: 50%;
       width: 20px;
       height: 20px;
       background-color: #fff;
       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
       transition: background-color 0.2s, transform 0.2s;
     }

     /* Checked */
     .cl-switch>input:checked {
       right: -10px;
       background-color: white;
     }

     .cl-switch>input:checked+span::before {
       background-color: aqua;
     }

     .cl-switch>input:checked+span::after {
       background-color: #37fffe;
       transform: translateX(16px);
     }

     /* Hover, Focus */
     .cl-switch:hover>input {
       opacity: 0.04;
     }

     .cl-switch>input:focus {
       opacity: 0.12;
     }

     .cl-switch:hover>input:focus {
       opacity: 0.16;
     }

     /* Active */
     .cl-switch>input:active {
       opacity: 1;
       transform: scale(0);
       transition: transform 0s, opacity 0s;
     }

     .cl-switch>input:active+span::before {
       background-color: #8f8f8f;
     }

     .cl-switch>input:checked:active+span::before {
       background-color: #85b8b7;
     }

     /* Disabled */
     .cl-switch>input:disabled {
       opacity: 0;
     }

     .cl-switch>input:disabled+span::before {
       background-color: #ddd;
     }

     .cl-switch>input:checked:disabled+span::before {
       background-color: #bfdbda;
     }

     .cl-switch>input:checked:disabled+span::after {
       background-color: #61b5b4;
     }

     .profinfos,
     .profbtns {
       width: 100%;
       display: flex;
       justify-content: space-around;
       align-items: center;
       padding-bottom: 20px;
       gap: 10px;
       flex-wrap: wrap;

     }

     .profimg {
       width: 100%;
       text-align: center;
     }

     .reqbtncont {
       width: 100%;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       margin-top: 20px;

     }

     .prims_ctrls {
       justify-content: flex-start;
       padding-top: 30px;
     }

     .smalltitleprims {
       position: absolute;
       top: 0;
       left: 10px;
       /* You can adjust the left position as needed */
       margin: 0;
       /* Remove default margin to avoid extra space */
     }

     .titleprim {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: flex-start;
     }

     .tip {
       font-size: 20px;
       padding: 5px;
       cursor: pointer;
     }

     .topslogs {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 15px;
       flex-wrap: wrap;
     }

     .material-icons {
       font-size: 25px;

     }

     .shortstable {
       width: 100%;
       background-color: rgba(0, 0, 0, 0.188);
       table-layout: fixed;
       white-space: normal !important;
       margin: 15px auto;
       font-size: 15px;
     }

     .shortstable th {
       font-size: 4vmin;
     }

     .shortstable td {

       word-wrap: break-word;
       border-top: 1px solid black
     }

     #keylogpage {
       height: 100%;
       overflow: scroll;
     }

     .smalpfoico {
       display: flex;
       align-items: center;
       justify-content: space-around;
       flex-wrap: nowrap;
       flex-direction: column;
     }

     .optionsbox {
       display: flex;
       width: 100%;
       flex-wrap: wrap;
     }

     .highoptns {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       color: rgb(177, 177, 177);
       flex-wrap: wrap;
       padding: 10px;
       flex-direction: column;
       background: rgb(10, 10, 10);
       border: 1px solid black;
       flex: 1;
       flex-basis: 600px;
       border-bottom-color: aqua;
       border-radius: 15px;
     }

     .highoptns h2 {
       color: white;
     }

     .highoptns .material-icons {
       color: rgb(217, 0, 255);
     }

     .keylogstop {
       display: flex;
       width: 100%;
       flex-wrap: nowrap;
       overflow-x: auto;
       flex-direction: row;
     }

     @keyframes flashnew {

       0%,
       100% {
         opacity: 1;
       }

       50% {
         opacity: 0.2;
       }
     }

     .flash-effect {
       animation: flashnew 1.8s infinite;

     }

     .keylogs_clients {
       height: 40px;
       width: auto;
       display: flex;
       align-items: center;
       align-content: center;
       justify-content: flex-start;
       flex-wrap: nowrap;
       padding-right: 5px;
       padding-left: 5px;
       margin-right: 5px;
       gap: 8px;
       flex-direction: row;
       background: transparent;
       border-bottom: 1px solid purple;
       cursor: pointer;
     }

     .keylogs_clients:hover {
       border: 0px;
       border-bottom: 1px solid lime;
     }

     .keylogs_clients h2 {
       color: white;
       font-size: 1.1rem;
     }

     .keylogselected {
       border: 1px solid aqua;
     }

     .klogout:hover {
       color: red;
     }

     .klogbox {
       width: 100%;


     }

     .shortstable {
       width: 100%;
       background-color: rgba(0, 0, 0, 0.188);
       table-layout: fixed;
       white-space: normal !important;
       margin: 15px auto;
       font-size: 15px;
       text-align: left;
       padding: 5px;
     }

     .shortstable th {
       font-size: 4vmin;
     }

     .shortstable td {

       word-wrap: break-word;
       border-top: 1px solid black
     }

     .klogtable {
       position: absolute;

     }

     .klogtableon {
       display: table;
     }

     .klogtableoff {
       display: none;
     }

     .kloginfo {
       width: 100%;
       height: 0;
       overflow: hidden;
       display: flex;
       align-items: center;
       align-content: center;
       justify-content: flex-start;
       gap: 5px;
       transition: height 0.2s ease-out;
     }

     .klogimg {
       width: 65px;
       height: 65px;
       border-radius: 50%;
     }

     .klogtitles {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       flex-wrap: wrap;
     }


     .kloginfo button {
       background: transparent;
       border: 0;
       cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
     }

     .klogtogleon {
       color: lime;

     }

     .klogtogleoff {
       color: red;

     }

     .klogtogleon svg,
     .klogtogleoff svg {
       transition: all 0.2s ease-in-out;
     }

     .emptyklog {
       width: 100%;
       height: auto;
       display: flex;
       justify-content: center;
       align-items: center;
       align-content: center;
       font-size: 7vmin;
       /* white-space: nowrap; */
       text-align: center;
       flex-direction: column;
       color: #247f9e;
     }

     .klogtools {
       width: 100%;
       height: auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
       align-content: center;
       padding-top: 5px;

     }

     .klogtools span {
       display: flex;
       justify-content: space-between;
       align-items: center;
       align-content: center;
       cursor: pointer;
       transition: all 1.7s ease-out;
     }

     .klogtools span:hover {
       border: 1px solid aqua;
       border-top: 0;
       border-right: 0;
       border-left: 0;
     }

     .chat-header {
       text-align: center;
       padding: 10px;
       background-color: #222222;
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
     }

     .chatright {
       width: 90%;
       height: 100%;
       padding-bottom: 75px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }


     .chatsBox {
       width: 90%;
       margin: 0 auto;
       padding: 10px;
       border: 1px solid #ffffff;
       border-radius: 10px;
       overflow-y: auto;
       background-color: #222222;
       height: 75vh;
     }

     .user-message-container {
       display: flex;
       align-items: flex-start;
       justify-content: flex-start;
     }

     .bot-message-container {
       display: flex;
       align-items: flex-start;
       justify-content: flex-end;
     }

     .message {
       margin-bottom: 20px;
       padding: 10px;
       border-radius: 10px;
       max-width: 70%;

     }

     .user-message {
       background-color: #353535;
     }

     .bot-message {
       background-color: #005C4B;
     }

     .user-image {
       margin-right: 10px;

       width: 40px;
       height: 40px;
       border-radius: 50%;
     }

     @media (max-width: 600px) {
       .message {
         max-width: 100%;
       }
     }


     .chatsgroups {

       /* position: static; */
       width: 20%;
       display: none;
       flex-direction: column;
       padding-top: 5px;
       margin-top: 42px;
       padding-right: 10px;
       padding-bottom: 10px;
       background-color: transparent;
       gap: 5px;
       height: 74vh;
       overflow-y: auto;
       border: 1px solid #ffffff;
       border-radius: 10px;
     }

     #toggleChatsGroups {
       background: transparent;
       border: 0;
       font-size: 2rem;
       cursor: pointer;
       color: white;
     }

     #toggleChatsGroups:hover {
       color: aqua;
     }

     @media (min-width: 600px) {
       .chatsgroups {
         display: flex;
         width: 20%;
       }


     }

     .chatsgroups.show {
       display: flex;
       width: 100%;
     }

     .chatsBox.hideit {
       display: none;
     }

     .chatclient {

       display: flex;
       flex-direction: row;
       background: transparent;
       max-width: 90%;
       margin: 5px;
       padding: 5px;
       cursor: pointer;
       border: 0;
       border-bottom: 3px solid black;
       height: 40px;
       align-items: center;
     }

     .chatclient:hover {
       border-bottom: 3px solid purple;
     }

     .chatclient.activenow {
       border-bottom: 3px solid aqua;
     }

     .chatclient h3 {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       /* Add ellipsis if the text overflows */
       margin-left: 10px;
       color: white;
     }


     #chatscontaner {
       display: flex;
       justify-content: center;
       align-items: flex-start;
       flex-wrap: nowrap;
     }

     .Messageboxchat {
       width: 85%;
       height: 40px;
       border-radius: 10px;
       background-color: transparent;
       transform: translate(0px, 0px);
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: baseline;
     }

     .chatright.hideit {
       display: none;
     }


     .MsgInput,
     .Scrinput {
       font-size: 18px;
       padding: 5px;
       background-color: transparent;
       border: 1px solid #ffffff;
       border-radius: 10px;
       outline: none;
       height: 30px;
       transform: translate(5px, -3px);
       color: white;
       font-weight: bold;
       width: 80%;
     }

     .SendSVG,
     .SendSCR {
       width: 30px;
       height: 30px;
       border-width: 50px;
       transform: translate(20px, 5px);
       background-size: 10px;
       border-radius: 10px;
       cursor: pointer;
       transition: 0.3s;
     }

     .SendSVG:hover,
     .SendSCR:hover {
       background-color: #2b2b35;
     }

     .chattopinfo {
       width: 80%;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       flex-direction: row;
       gap: 5px;
     }

     .username-container {
       display: flex;
       align-items: center;

     }

     .username-text {
       width: 140px;
       text-align: center;
       cursor: not-allowed;
       padding: 5px;
       border: none;
       color: rgb(195, 192, 192);
       text-decoration: underline;
       text-decoration-color: rgb(195, 192, 192);
       background-color: transparent;
       outline: none;
       font-size: 3.5vmin;
     }

     .edit-icon {
       cursor: pointer;

     }

     .edit-icon:hover {
       color: rgb(16, 170, 248);
     }

     .topchat {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       align-content: center;
       flex-direction: row;
     }

     .grid_cams {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-wrap: wrap;
       gap: 20px;
     }

     .cam_box {
       width: 230px;
       height: 175px;
       border-radius: 10px;
       background-color: transparent;
       display: flex;
       align-items: center;
       justify-content: center;
       overflow: hidden;
       margin: 0 auto;
     }

     .chat-image {
       width: 85%;
       height: 100%;
       max-width: none;
       max-height: none;
       cursor: pointer;
       border-radius: 10px;
       transform-origin: center;
     }


     .usercam-info {
       background-color: rgba(52, 52, 52, 0.8);
       height: 90%;
       border-radius: 5px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-direction: column;
       padding: 5px;
     }

     .usercam-info img {
       width: 35px;
       height: 35px;
       border-radius: 50%;
     }

     .usercam-info p {
       font-size: 14px;
       max-width: 80px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }


     .usercam-info span {
       display: flex;
       align-content: center;
       justify-content: center;
       align-items: center;
     }


     .Cam_camoverlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.7);
       display: none;
       justify-content: center;
       align-items: center;
       z-index: 999;
       overflow: hidden;
     }

     .Cam_camoverlay-content {
       position: relative;

     }

     .Cam_camoverlay img {
       max-width: 90%;
       max-height: 90%;
     }

     .close {
       position: absolute;
       top: 10px;
       right: 10px;
       color: red;
       font-size: 40px;
       cursor: pointer;
     }

     .camoverlay {
       /* Keep existing styles */
       overflow: auto;
       /* Add scrollbars if content overflows */
     }

     .Cam_camoverlay-content {
       /* Keep existing styles */
       max-width: 90%;
       max-height: 90%;
     }


     .chatico:hover {
       cursor: pointer;
       color: lime;
     }

     .popup_cam {
       display: none;
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background-color: #1b1b1bc7;
       padding: 20px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       z-index: 999;
       max-width: 90%;
       width: 300px;
       backdrop-filter: blur(6px);
       border-radius: 15px;
     }

     .popupselect {
       background: #202020;
       color: aqua;
       border: 1px solid aqua;
     }

     .overlay_cam_optn {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 998;
     }


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


     @media (max-width: 768px) {
       .popup_cam {
         width: 90%;
       }
     }


     .solrbtn {
       width: 80px;
       margin: 10px;
       background: transparent;
       padding: 5px;
       border: 2px solid blueviolet;
       color: blueviolet;
       border-top: 0;
       border-left: 0;
       border-right: 0;
       border-radius: 10px;
       cursor: pointer;
       border-color: blueviolet;
       transition: all 0.4s ease-out 0s;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-wrap: nowrap;
       gap: 3px;
       flex-direction: column;

     }

     .solrbtn span {
       display: none;
     }

     .solrbtn:hover span {
       display: unset;
     }

     .solrbtn:hover {
       border-color: aqua;
       color: aqua;

     }

     .popupbox {
       width: 100%;
       height: auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-direction: column;
     }

     .popupbox label {
       width: 100%;
       height: auto;
       display: flex;
       align-items: stretch;
       flex-direction: row;
       padding: 5px;
       gap: 5px;
       justify-content: flex-start;
     }



     /* Start Live Screen */

     .EmuScreen-container {
       display: flex;
       background-color: #0d0f13;
       flex-wrap: wrap;
       justify-content: space-around;
       width: 95%;
       gap: 20px;
       padding-top: 15px;
       margin: 0 auto;
     }

     .EmuScreen {
       width: 110px;
       padding: 5px;
       text-align: center;
       border: 1px solid #900093;
       box-shadow: 0 0 10px #ae00b1b7;
       border-radius: 10px;
       color: white;
       cursor: pointer;
     }

     .EmuScreen_big {
       width: auto;
       height: calc(100vh - 115px);
       padding: 5px;
       text-align: center;
       border: 1px solid #900093;
       box-shadow: 0 0 10px #ae00b1b7;
       border-radius: 10px;
       color: white;
       cursor: pointer;
     }

     .EmuScreen:hover {
       border: 1px solid #0080ff;
       box-shadow: 0 0 10px rgb(24, 255, 247, 8);
     }

     .EmuScreen img {
       width: 100%;
       height: auto;
       /* Let the height adjust to maintain aspect ratio */
       border-radius: 10px;
     }

     .EmuScreen-info {
       padding: 10px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       color: white;
     }

     .EmuScreen-name {
       font-weight: bold;
     }

     .control-button {
       background-color: transparent;
       color: white;
       border: none;
       padding: 5px;
       display: flex;
       justify-content: center;
       align-content: center;
       border-radius: 50%;
       cursor: pointer;
       text-align: center;
       transition: background-color 0.3s ease;
     }

     .control-button:hover {
       color: #f00;
     }

     .Screenoverlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: auto;
       background-color: #0d0f13;

       z-index: 2;
       overflow: auto;
       justify-content: flex-start;
       align-items: center;
       flex-direction: column;

     }

     .Screenoverlay-content {
       width: 100%;
       display: flex;
       justify-content: center;
       align-items: flex-start;
       height: 100%;
     }

     .Screenoverlay img {
       border-radius: 5px;
       max-width: calc(100vw - 40px);
       max-height: calc(100vh - 170px);
     }

     .close-button {
       font-size: 30px;
       color: white;
       cursor: pointer;
     }

     .optnsctools {
       width: 88%;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       gap: 15px;
       padding: 10px;
       border-bottom: 2px solid #3b3b3b;
     }

     .shortsleft {
       display: flex;
       justify-content: center;
       align-items: center;
     }

     .PB-range-slider {

       color: #333333;
       width: 100%;
       height: 4px;
       border-radius: 5px;
       background: #ffffff;
       outline: none;
       opacity: 0.7;
       -webkit-transition: .2s;
       transition: opacity .2s;
     }

     .PB-range-slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       background-color: #24d7ff;
       cursor: pointer;
       transition: 0.3s ease-in-out;
     }

     .PB-range-slider::-webkit-slider-thumb:hover {
       box-shadow: 0px 0px 0px 8px rgba(170, 0, 232, 0.4);
       transition: 0.3s ease-in-out;
     }

     .PB-range-slider::-moz-range-thumb {
       width: 15px;
       height: 15px;
       border-radius: 50%;
       background-color: #000000;
       cursor: pointer;
     }

     .PB-range-slider-div {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 1rem;
       padding: 1rem;
       border-radius: 6px;
       border: 1px solid #C6CACE;
       box-shadow: 0px 1px 2px 0px #1F1E241F;
     }

     .PB-range-slidervalue {
       color: white;
       font-weight: 600;
     }

     .screenctrls {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
     }

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


     .screenoptns {
       width: 250px;
       height: auto;
       padding: 15px;
       text-align: center;
       border: 1px solid #900093;
       box-shadow: 0 0 10px #ae00b1b7;
       border-left: 0px;
       border-radius: 10px;
       color: white;
       cursor: pointer;
       background-color: rgb(21, 21, 21);

     }

     .Screenoverlay-content-tools {
       transform: translateX(-100%);
       width: auto;
       display: flex;
       justify-content: center;
       align-items: center;
       height: auto;
       position: fixed;
       top: 35px;
       transition: transform 0.3s ease;
       z-index: 9;
     }

     .sidebar-toggle {

       /* position: fixed;
            top: 10px;
            left: 10px; */
       font-size: 30px;
       cursor: pointer;
       background: none;
       border: none;
       color: white;
       z-index: 2;

     }

     .sidebar-toggle:hover svg {
       fill: #900093;
       cursor: pointer;
     }


     @media screen and (max-width: 600px) {
       .Screenoverlay-content-tools {
         transform: translateX(-100%);

       }



     }

     .slidescrtools {

       transform: translateX(0);
     }

     slider-container {
       display: flex;
       flex-direction: column;
       align-items: center;
     }

     #slider {
       width: 75%;
       margin: 20px 0;
     }

     #slider-value {
       font-size: 1.5em;
       margin-top: 10px;
     }

     .slider-container {
       width: 100%;
       display: flex;
       justify-content: flex-start;
       align-items: baseline;
       flex-direction: column;
       text-align: center;
     }

     .sidetoside {
       width: 90%;
       display: flex;
       justify-content: space-between;
       align-items: baseline;
     }

     .titlscrentol {
       width: 100%;
       text-align: center;
     }

     .EmuScreen-container .mobshortsclick {
       display: none;
     }

     .scrshortbtn {
       background-color: transparent;
       border: 1px solid transparent;
       border-radius: 999px;
       box-shadow: 0 0 10px #ae00b1b7;
       cursor: pointer;
     }

     .Screenoverlay-content .mobshortsclick {
       padding-top: 5px;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
       cursor: pointer;
     }

     .Screenoverlay-content .mobshortsclick svg {
       padding-top: 5px;
     }

     .Screenoverlay-content .scrshortbtn:hover svg {
       fill: #900093;
       cursor: pointer;
     }

     .ctrlovlyscr {
       width: 100%;
       display: flex;
       gap: 190px;
       align-items: center;
       justify-content: center;
     }

     .screnbox {

       display: flex;
       width: 100%;
       height: 105vh;
       background-color: #0d0f13;
       /* Semi-transparent black background */
       z-index: 2;
       overflow: auto;
       justify-content: flex-start;
       align-items: center;
     }

     .app-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
     }

     .app {
       flex: 1 1 200px;
       margin: 10px;
       text-align: center;
       padding: 10px;
       border: 1px solid #444;
       border-radius: 5px;
       background-color: transparent;
       cursor: pointer;
       box-shadow: 0 0 5px #a61dbfc9;

     }

     .app_over {
       margin: 10px;
       padding: 10px;
       display: flex;
       width: 100%;
       gap: 5px;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
       flex-wrap: wrap;
     }

     .app_over_statics {

       display: flex;
       width: 100%;
       gap: 25px;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
     }

     .app_over_statics p {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 5px;
       font-size: 3vmin;
     }

     .app_over_btns {
       display: flex;
       width: 100%;
       gap: 15px;
       flex-direction: row;
       justify-content: flex-start;
       align-items: center;
     }

     .app:hover {
       box-shadow: 0 0 7px rgb(24, 255, 247, 8);
       /* background-color: #333; */
     }

     .app img {
       width: 100px;
       height: 100px;
       margin-right: 10px;

     }

     .app-details {
       flex: 1;
     }

     .storebtn {
       padding: 8px 16px;
       margin: 5px;
       background-color: transparent;
       border: 3px solid #9c27b0;
       border-top: 0;
       border-right: 0;
       border-left: 0;
       color: #fff;
       border-radius: unset;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 5px;
       font-size: 3vmin;
     }

     .storebtn:hover {
       border-bottom: 3px solid rgb(24, 255, 247, 8);
     }

     .storebtn.liked {
       color: rgb(24, 255, 247, 8);
       border-bottom: 3px solid rgb(24, 255, 247, 8);
     }

     .stor_overlay {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background-color: rgba(0, 0, 0, 0.1);
       backdrop-filter: blur(3px);
       display: flex;
       justify-content: center;
       align-items: center;
       width: 0;
       height: 0;
       overflow: hidden;
       opacity: 0;
       transition: width 0.6s, height 0.6s, top 0.5s, left 0.5s, opacity 0.3s;
     }

     .stor_overlay.active {
       opacity: 1;
       width: 100%;
       height: 100%;
     }

     .stor_overlay-content {
       background-color: #000000d4;
       backdrop-filter: blur(4px);
       padding: 10px;
       width: 90%;
       height: 70vh;
       overflow-x: hidden;
       overflow-y: scroll;
       border-radius: 5px;
       color: #fff;
       box-shadow: 0 0 5px #a61dbfc9;
     }

     .close_storeover {
       position: absolute;
       top: 10px;
       right: 20px;
       color: #aaa;
       cursor: pointer;
       font-size: 45px;
     }

     .close_storeover:hover {
       color: red;
     }

     .usrapps_card-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
     }

     .usrapps_custom-container {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
     }

     .usrapps_card {
       background-color: transparent;
       border-radius: 10px;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       margin: 10px;
       padding: 5px;
       overflow: hidden;
       width: 200px;
       max-width: 200px;
       text-align: center;
       border: 1px solid aqua;
     }

     .usrapps_card:hover {
       background-color: #0e0e0eb7;
     }

     .usrapps_card img {
       width: 80%;

       height: auto;
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
       object-fit: cover;
       max-height: 150px;
     }

     .usrapps_card-info {
       padding: 20px;
     }

     .usrapps_card-info h2 {
       margin-top: 0;
       font-size: 20px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }

     .usrapps_card-info p {
       margin-bottom: 10px;
       font-size: 16px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     }

     .dwn-userapp {
       background-color: transparent;
       border: 3px solid aqua;
       color: aqua;
       padding: 10px 20px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       border-radius: 5px;
       transition: background-color 0.3s;
       cursor: pointer;
       margin-top: 10px;
       width: 120px;
     }

     .dwn-userapp:hover {
       background-color: rgb(40, 40, 40);
     }

     @media only screen and (max-width: 600px) {
       .usrapps_card {
         max-width: calc(100% - 40px);
       }
     }

     .usrapps-empty {
       width: 95%;
       height: auto;
       position: fixed;
       background-color: transparent;
       display: flex;
       justify-content: center;
       flex-direction: column;
       align-items: center;
       color: white;
       gap: 15px;
     }

     .usrapps-empty span {
       font-size: 145px;
       color: rgb(55, 210, 249);

     }


     .appsbusy {
       border: 3px solid rgb(93, 93, 93);
       cursor: wait;
       background-color: rgb(93, 93, 93);
     }

     .appsfaild {
       border: 3px solid rgb(147, 0, 0);
       cursor: not-allowed;
       background-color: rgb(147, 0, 0);
     }


     .BuildOverOptions {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 110vh;
       background-color: rgb(0 0 0 / 91%);
       /* Dark overlay */
       z-index: 9999;
     }

     .BuildOverOptions-content {
       max-width: 450px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background-color: #333;
       /* Dark background for content */
       padding: 20px;
       border-radius: 10px;
     }

     @media screen and (max-width: 600px) {
       .BuildOverOptions-content {
         width: 100%;
       }
     }

     /* Text box styles */
     .buildoptn {
       width: 95%;
       padding: 10px;
       margin-bottom: 10px;
       border: none;
       border-radius: 5px;
       color: black;
     }

     /* Toggle styles */
     .optnbuildtoggle-container {
       display: flex;
       justify-content: flex-start;
       margin-bottom: 10px;
       gap: 15px;
       align-items: center;
       flex-wrap: wrap;
       border-bottom: 1px solid #000;
     }

     .optnbuildtoggle-label {
       color: #fff;
       font-size: 16px;
       margin-right: 10px;
     }

     .optnbuildtoggle-switch {
       position: relative;
       display: inline-block;
       width: 50px;
       height: 24px;
     }

     .optnbuildtoggle-switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }

     .optnbuildtoggle-slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       border-radius: 34px;
       transition: .4s;
     }

     .optnbuildtoggle-slider:before {
       position: absolute;
       content: "";
       height: 18px;
       width: 18px;
       left: 4px;
       bottom: 3px;
       background-color: white;
       border-radius: 50%;
       transition: .4s;
     }

     .optnbuildtoggle-switch input:checked+.optnbuildtoggle-slider {
       background-color: #2196F3;
     }

     .optnbuildtoggle-switch input:focus+.optnbuildtoggle-slider {
       box-shadow: 0 0 1px #2196F3;
     }

     .optnbuildtoggle-switch input:checked+.optnbuildtoggle-slider:before {
       transform: translateX(26px);
     }

     /* Button styles */
     .buildoverbtn-container {
       display: flex;
       justify-content: space-between;
     }

     .buildoverbtn {
       padding: 10px 20px;
       margin: 0 10px;
       border: none;
       border-radius: 5px;
       background-color: #2196F3;
       color: #fff;
       cursor: pointer;
       transition: background-color 0.3s;
       display: flex;
       flex-wrap: nowrap;
       gap: 5px;
       justify-content: center;
       align-items: center;
     }

     .buildoverbtn:hover {
       background-color: #0b7dda;
     }

     #myCancelButton {
       background-color: #5f5f5f;
     }

     .tippy-content {
       white-space: pre-line;
     }

     .payments-container {
       margin: 0 auto;
       padding: 20px;
       width: 100%;
     }

     #paymentsTable {
       width: 100%;
       border-collapse: collapse;
       margin-top: 20px;
       background-color: #0d0f13;
       color: #ffffff;
     }

     #paymentsTable th,
     #paymentsTable td {
       padding: 10px;
       text-align: left;
       border-bottom: 1px solid #575757;
     }

     #paymentsTable th {
       background-color: #0d0f13;
       color: aqua;
     }

     @media only screen and (max-width: 600px) {
       #paymentsTable table {
         border-collapse: collapse;
       }

       #paymentsTable th,
       td {
         display: block;
         text-align: center;
         border: none;
       }

       #paymentsTable th {
         background-color: #512da8;
       }

       #paymentsTable td {
         background-color: #7c4dff;
         margin-bottom: 10px;
         border-radius: 5px;
       }

       #paymentsTable tr {
         display: block;
         margin-bottom: 20px;
         border: none;
       }

       #paymentsTable td::before {
         content: attr(data-label);
         font-weight: bold;
         display: block;
         margin-bottom: 5px;
       }
     }



     .build_contener {
       border-radius: 10px;
       background: transparent;
       color: white;
       padding-bottom: 90px;
     }

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

     .config-form {
       display: flex;
       flex-wrap: wrap;
       display: flex;
       flex-wrap: wrap;
       gap: 5px;
       justify-content: space-between;
       padding: 20px;
     }

     label {
       font-size: 16px;
     }


     .form-left,
     .form-right {
       width: 100%;
       background-color: #00000000;
       padding: 20px;
       border-radius: 15px;
       box-shadow: 0 0 5px #a61dbfc9;

     }

     @media (min-width: 935px) {

       .form-left,
       .form-right {
         width: 45%;
       }

       label {
         font-size: 16px;
       }
     }

     .apk_bld_grop {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 15px;
       padding: 10px;
       border-bottom: 1px solid #3e3e3e;
     }



     .input-text {

       text-align: center;
       padding: 8px;
       border: 1px solid #ccc;
       border-radius: 5px;
     }

     .input-button {
       display: flex;
       align-items: center;
     }

     .input-button input {
       flex: 1;
       margin-right: 10px;
     }

     .input-button button {

       border: none;
       background-color: transparent;
       color: white;
       border-radius: 5px;
       cursor: pointer;
     }

     .input-button button:hover {
       border-bottom: 1px solid aqua;
     }

     .switch {
       position: relative;
       display: inline-block;
       width: 40px;
       height: 20px;
     }

     .switch input {
       opacity: 0;
       width: 0;
       height: 0;
     }

     .slider {
       position: absolute;
       cursor: pointer;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: #ccc;
       transition: .4s;
       border-radius: 34px;
       width: 40px;
     }

     .slider:before {
       position: absolute;
       content: "";
       height: 14px;
       width: 14px;
       left: 3px;
       bottom: 3px;
       background-color: white;
       transition: .4s;
       border-radius: 50%;
     }

     input:checked+.slider {
       background-color: #007bff;
     }

     input:checked+.slider:before {
       transform: translateX(20px);
     }

     .image-upload {
       position: relative;
       width: 100%;
       text-align: center;
       display: flex;
       justify-content: center;
       gap: 16px;
     }

     .image-upload button {
       padding: 8px 15px;
       border: none;
       background-color: #007bff;
       color: white;
       border-radius: 5px;
       cursor: pointer;
     }

     .image-upload button:hover {
       background-color: #0056b3;
     }

     .builderoverlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgb(0 0 0 / 75%);
       justify-content: center;
       align-items: center;
       z-index: 1;
     }

     .overlay-content {
       background-color: #202020;
       padding: 20px;
       border-radius: 10px;
       text-align: center;
       color: white;
       width: 100%;
       height: 100%;
     }

     .overlay-content input {
       margin-bottom: 15px;
     }

     .overlay-content button {
       margin: 5px;
     }



     #buildappico {
       width: 65px;
       height: 65px;
       display: none;
     }

     .bultactions {
       width: 100%;
       text-align: center;
       display: flex;
       align-items: center;
       gap: 15px;
       justify-content: center;
     }

     .close-button {
       position: absolute;
       top: 10px;
       right: 10px;
       cursor: pointer;
       font-size: 20px;
       font-weight: bold;
     }

     .gallery {
       display: flex;
       gap: 10px;
       margin-top: 20px;
       padding: 10px;
       justify-content: center;
       flex-wrap: wrap;
     }

     .gallery-item {

       width: 90px;
       height: 90px;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       font-size: 24px;
       font-weight: bold;
       border-bottom: 1px solid white;
       flex-direction: column;
     }

     .gallery-item:hover {
       border-bottom: 1px solid aqua;
     }

     .gallery-item img {
       max-width: 65px;
       max-height: 65px;
     }

     .gallery-item span svg:hover {
       fill: red;
     }

     .upload-icon {
       background-color: #000000;
     }

     .tabs {
       overflow: hidden;
       border-bottom: 1px solid #ccc;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       padding: 10px;
       gap: 20px;
     }

     .tablinks {
       background-color: #00000000;
       color: aqua;
       float: left;
       border: 0;
       border-bottom: 1px solid purple;
       outline: none;
       cursor: pointer;
       padding: 14px 16px;
       transition: 0.3s;
       font-size: 17px;
       width: 100px;
       opacity: 0.5;
     }

     .tablinks:hover {
       border-bottom: 1px solid aqua;
     }

     .tablinks.active {
       background-color: #ccc0;
       border-bottom: 1px solid aqua;
       opacity: 1;
     }

     .tabcontent {
       display: none;
       padding: 6px 12px;
       border-top: none;
     }

     .accessbox {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 20px;
       background-color: transparent;
       border-radius: 15px;
       flex-wrap: wrap;
       box-shadow: 0 0 5px #a61dbfc9;
     }

     .iframe-container {
       width: 300px;
       height: 600px;

       overflow: hidden;

       padding: 5px;
     }

     iframe {
       width: 100%;
       height: 100%;
       border: none;
       border-radius: 10px;
       /* Remove iframe border */
     }

     .svbtn {
       border: 0;
       font-size: 18px;
       display: flex;
       gap: 10px;
       justify-content: center;
       align-items: center;
       background: transparent;
       border-bottom: 1px solid blueviolet;
       border-radius: 5px;
       color: white;
       cursor: pointer;
       width: 120px;
     }

     .svbtn:hover {

       border-bottom: 1px solid aqua;
     }

     .accessbox .apk_bld_grop {
       width: 100%;
     }

     .accessbox .apk_bld_grop input {
       color: white;
     }

     .savloginpage {
       width: 100%;
       text-align: center;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 5px;
     }

     .buildlangbox {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 20px;
     }

     .buildlangbox select,
     .storlang select {
       background: transparent;
       font-size: 18px;
       color: white;
       padding: 10px;
       border: 1px solid blueviolet;
     }

     .buildlangbox select option,
     .storlang select option {
       background-color: #202020;
     }

     .storlang {
       width: 100%;
       padding: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
     }

     .optnsund {
       width: 100%;
       display: flex;
       justify-content: flex-start;
       align-items: center;
       gap: 15px;
       padding: 10px;
     }

     /* .user-avatar {
       border: 1px solid blueviolet;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       overflow: hidden;
       cursor: pointer;
       background-color: transparent;
       margin-right: 10px;
     } */

     .user-avatar img {
       width: 100%;
       height: 100%;
     }

     .user-avatar:hover {
       box-shadow: 0 0 10px #a61dbfc9;
     }

     .user-menu {
       position: absolute;
       top: 90px;
       right: 10px;
       background: linear-gradient(#0d0f13, #0d0f13) padding-box, linear-gradient(349deg, transparent 1%, blueviolet, #40c9ff) border-box;
       border: 2px solid transparent;
       border-radius: 4px;
       display: none;
       flex-direction: column;
       z-index: 9999;
       border-radius: 20px;
     }

     .screenshots-gallery-container {
       text-align: center;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       padding: 20px;
     }

     .screenshots-button-container {
       margin-bottom: 20px;
     }

     .screenshots-button-container button {
       padding: 10px 20px;
       margin: 5px;
       font-size: 16px;
       cursor: pointer;
       background: transparent;
       border: 0;
       color: white;
       border-bottom: 1px solid white;
     }

     .screenshots-button-container button:hover {
       border-bottom: 1px solid blueviolet;
     }

     .screenshots-gallery {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 10px;
       padding: 19px;
       width: 100%;
     }

     .screenshots-gallery-image {
       width: 100px;
       height: 170px;
       object-fit: contain;
       cursor: pointer;
       transition: transform 0.3s ease-in-out;
     }

     .screenshots-gallery-image.expanded {
       transform: scale(2);
     }

     @media (max-width: 600px) {
       .screenshots-gallery-image {
         width: 80px;
         height: 120px;
       }
     }

     .screenlayers {
       position: relative;
       display: inline-block;
     }

     .skiltonimg {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       /* Allow events to pass through to image A */
     }

     #colorButton {
       padding: 10px 20px;
       font-size: 16px;
       cursor: pointer;
       border: none;
       border-radius: 5px;
       background-color: #007bff;
       color: white;
       margin-bottom: 10px;
     }