body {
             height: 100vh;
             overflow: hidden;
         }

         input[type=range][orient=vertical] {
             writing-mode: bt-lr;
             -webkit-appearance: slider-vertical;
             width: 8px;
             height: 40vh;
         }

         input[type="range"] {
             -webkit-appearance: none;
             appearance: none;
             width: 100%;
             cursor: pointer;
             outline: none;
             border-radius: 15px;
             height: 30px;
             background: rgb(128, 70, 27);
         }

         /* Thumb: webkit */
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
             appearance: none;
             height: 50px;
             width: 50px;
             background-color: #f50;
             background-image: url("img/uper.png");
             background-size: cover;
             border-radius: 50%;
             border: none;
             transition: .2s ease-in-out;
             /*  rotate thumb  */
             transform: rotateZ(var(--thumb-rotate, 0deg));
         }

         /* Thumb: Firefox */
         input[type="range"]::-moz-range-thumb {
             height: 50px;
             width: 50px;
             background-color: #f50;
             background-image: url("img/uper.png");
             background-size: cover;
             border-radius: 50%;
             border: none;
             transition: .2s ease-in-out;
             /*  rotate thumb  */
             transform: rotateZ(var(--thumb-rotate, 0deg));
         }

         /* Hover, active & focus Thumb: Webkit */
         input[type="range"]::-webkit-slider-thumb:hover {
             box-shadow: 0 0 0 10px rgba(5, 185, 0, 1)
         }

         input[type="range"]:active::-webkit-slider-thumb {
             box-shadow: 0 0 0 10px rgba(5, 185, 0, 1)
         }

         input[type="range"]:focus::-webkit-slider-thumb {
             box-shadow: 0 0 0 10px rgba(5, 185, 0, 1)
         }

         /* Hover, active & focus Thumb: Firfox */

         input[type="range"]::-moz-range-thumb:hover {
             box-shadow: 0 0 0 10px rgba(5, 185, 0, 1)
         }

         input[type="range"]:active::-moz-range-thumb {
             box-shadow: 0 0 0 10px rgba(5, 185, 0, 1)
         }

         input[type="range"]:focus::-moz-range-thumb {
             box-shadow: 0 0 0 10px rgba(5, 185, 0, 1)
         }

         /* Thumb: webkit */
         input[type="range"]::-webkit-slider-thumb {
             /* ... */
             height: 50px;
             width: 50px;
             background-color: green;
             background-image: url("img/uper.png");
             background-size: cover;
         }

         /* Thumb: Firefox */
         input[type="range"]::-moz-range-thumb {
             /* ... */
             height: 50px;
             width: 50px;
             background-color: green;
             background-image: url("img/uper.png");
             background-size: cover;
         }

         .slider1 {
             float: left;
         }

         .slider2 {
             float: right;
         }

         .slider1 input,
         .slider2 input {
             width: 23.5vw;
             height: 8vh;
             border-radius: 3%;
         }

         #takb {
             width: 100%;
             height: 100%;
             font-size: 4vh;
             background-color: green;
	     border-radius: 0%;
         }

         #recvb {
             width: 25%;
             height: 100%;
             font-size: 4vh;
             background-color: red;
         }

         #sendb {
             width: 35%;
             height: 100%;
             font-size: 4vh;
             background-color: blue;
         }

         #mainb {
             width: 20%;
             height: 100%;
             font-size: 3vh;
             background-color: blue;
         }

         .divs {
             width: 100%;
             height: 5vh;
             justify-content: center;
         }

         dialog::backdrop {
             background-image: linear-gradient(to bottom, purple, orange);
         }

         .dislink {
             pointer-events: none;
         }

         #nam {
             font-size: 16px;
         }

         #pack {
             bottom: 20%;
             justify-content: center;
         }

         #unpack {
             bottom: 20%;
         }

         #pack1 {
             margin-left: 5%;
             background-color: purple;
             width: 30%;
             font-size: 3vh;
             border-radius: 0%;
             border: 5px;
             border-color: black;
         }

         #qrcode {
             text-align: center;
             justify-content: center;
             text-wrap: wrap;
             whitespace: normal;
             overflow-wrap: break-word;
         }

         #unpack1 {
             background-color: rgb(250, 125, 18);
             width: 30%;
             font-size: 3vh;
             border-radius: 0%;
         }

         #output {
             width: 30%;
             font-size: 4vh;
             height: 3.6vh;
             transform: translateY(8%);
         }

         .red {
             color: red;
         }

         .blue {
             color: blue;
         }

         #mid {
             justify-content: center;
             text-align: center;
             font-size: 2.375vh;
             position: relative;
             overflow: scroll;
         }

         #update {
             height: 16vh;
             text-align: center;
             justify-content: center;
             font-size: 2.375vh;
             position: relative;
             overflow: scroll;
         }

         .bute {
             width: 30%;
             border-radius: 0px;
             font-size: 2.5vh;
         }

         #diva {
             bottom: 0;
         }

         #div {
             border-style: solid;
             border-color: red;
         }

         button {
             color: white;
             border-radius: 33%;
             outline: none;
             border: none;
         }

         label {
             font-size: 2vh;
         }

         #saved,
         #confirmd,
         #qrcoded {
             font-size: 2vh;
         }

         .clikos:active {
             background-color: black;
         }

         #logtab {
             table-layout: relative;
             width: 100%;
             font-size: 2.375vh;
             background-color: white;
             border-collapse: collapse;
             border: none;
         }

         td,
         th {
             background: linear-gradient(to bottom,
                     rgba(0, 0, 0, 0.1),
                     rgba(0, 0, 0, 0.5));
             border: 2px solid orange;
             text-align: center;
             max-width: 23.5vh;
             height: 7.5vh;
             overflow: hidden;
             text-overflow: ellipsis;
         }

         .send {
             background-color: blue;
             color: white;
             font-size: 2.375vh;
             width: 100%;
         }

         .receive {
             background-color: red;
             color: white;
             font-size: 2.375vh;
             width: 100%;
         }

         .take {
             background-color: green;
             color: white;
             font-size: 2.375vh;
             width: 100%;
         }

         .takee {
             background-color: green;
             color: white;
             border: none;
             padding: 10px 40px;
             font-size: 20px;
             border-radius: 30px;
             /* Ensure rounded edges */
             position: relative;
             display: inline-block;
         }

         #takb::before,
         #takb::after {
             content: "";
             width: 20px;
             height: 20px;
             background-color: white;
             border-radius: 50%;
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
         }

         #takb::before {
             left: -10px;
         }

         #takb::after {
             right: -10px;
         }

	 #takb::hover {
		 background-color: blue;
	 }
         select {
             text-align: center;
             width: 80%;
             height: 2.5vh;
	     font-size: 2.5rem;
	     overflow: hidden;
	     white-space: nowrap;
	     text-overflow: ellipsis;
         }

         input {
             text-align: center;
             width: 80%;
             font-size: 2.375vh;
             height: 2.5vh;
             resize: none;
         }

         dialog {
             width: 100%;
             border: none;
         }

         a {
             text-decoration: none;
             border: none;
             padding: 0px;
             color: white;
             outline: none;
             font-size: 4vh;
         }

         #slipix {
             height: 44vh;
             text-align: center;
             margin: 2%;
         }

         #forms {
             margin-left: 3%;
             margin-right: 3%;
         }

         #forms div {
             margin-top: 2%;
             margin-bottom: 3.3%
         }

         #qrcode {
             height: 16vh;
         }

         #selso {
             width: 68%;
             margin-right: 1%;
             float: right;
             border: none;
             border-radius: 200px;
             border-color: green;
             justify-content: center;
             text-align: left;
             font-size: 2.375vh;
         }

         #selso {
             caret-color: green;
             /* Or any color you want the cursor to be initially */
             animation: blink-caret 0.75s steps(5) infinite;
         }

         @keyframes blink-caret {

             from,
             to {
                 caret-color: transparent;
             }

             50% {
                 caret-color: green;
                 /* Or your desired cursor color */
             }
         }

         #selsel {
             width: 30%;
             margin-left: 1%;
             float: left;
             border: none;
             border-radius: 200px;
             justify-content: center;
             text-align: center;
             font-size: 2.375vh;
         }

         #selso:focus {
             border: 2px solid green;
         }

         #receive input {
             height: 2.5vh;
         }

         #store {
             justify-content: center;
             align-items: center;
         }

         textarea,
         input {
             border: none;
             outline: none;
         }

         span {
             border-radius: 50%;
         }

         .app-layout {
             display: flex;
	     overflow-y: auto;
	     max-height: 100vh;
	     overflow: auto !important;
	     padding-bottom: 50px;
         }

         .sidebar {
             width: 100%;
             border-right: 1px solid #ccc;
             display: flex;
             flex-direction: column;
         }

         .sidebar-header,
         .search-bar {
             padding: 10px;
             border-bottom: 1px solid #eee;
             background-color: #f0f0f0;
         }

         .ssidebar {
	     position: fixed;
	     bottom: 0;
	     width: 100%;                          border-right: 1px solid #ccc;                                 
             display: flex;                        flex-direction: column;           }

         .ssidebari {
             position: fixed;
             bottom: 0;
             width: 100%;
             background-color: #f0f0f0;
             padding: 10px;
             text-align: center;
             border-top: 1px solid #ccc;
         }

         .ssidebar-header {
             padding: 10px;
             border-bottom: 1px solid #eee;
             background-color: #f0f0f0;
         }

         .ssearch-bar {
             padding: 10px;
             border-bottom: 1px solid #eee;
             background-color: #f0f0f0;
             margin-top: auto;
             /* This pushes it to the bottom */
         }

         .chat-list {
             flex-grow: 1;
             overflow-y: auto;
	     padding-bottom: 300px;
         }

         /* Allow scrolling */
         .main-panel {
             flex-grow: 1;
             padding: 20px;
         }

         .chat-item {
		 width: 95vw;
             display: flex;
             padding: 5.0px 8px;
             cursor: pointer;
             border-bottom: 1px solid #eee;
             align-items: center;
	     gap: 8px;
	     border-radius: 8px;
         }

         .chat-item:hover {
             background-color: #f5f5f5;
         }

         .chat-item.selected {
             background-color: #e0e0e0;
         }

         /* Style for selected item */
         .chat-avatar {
             border-radius: 50%;
             margin-right: 10px;
         }

         .chat-details {
             flex-grow: 1;
	     min-width: 0;
         }

         .chat-header {
             display: flex;
             justify-content: space-between;
	     align-items: baseline;
             margin-bottom: 4px;
         }

         .chat-name {
             font-weight: bold;
             font-size: 3.0em;
	     color: #666;
	     white-space: nowrap;
	     overflow: hidden;
	     text-overflow: ellipsis;
	     margin-right: 1.5px;
	     border-radius: 0px;
         }

         .chat-timestamp {
             font-size: 1.5em;
             color: #666;
	     white-space: nowrap;
	     flex-shrink: 0;

         }

         .chat-message-preview {
             display: flex;
             justify-content: space-between;
             align-items: center;
         }

         .chat-last-message {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
	     color: #333;
	     font-size: 2.5em;
	     margin-right: 1.5px;
	     border-radius: 0px;
         }

         /* Prevent long messages overflowing */
         .chat-unread-badge {
             background-color: #25D366;
             color: white;
             border-radius: 50%;
             padding: 2px 6px;
             font-size: 2.0em;
             margin-left: 5px;
	     line-height: 1;
	     font-weight: bold;
	     min-width: 52px;
	     height: 52px;
	     display: inline-flex;
	     justify-content: center;
	     align-items: center;
	     flex-shrink: 0;
         }
	 #righten {
		 color: brown;
		 margin-top: 9px;
		 align-items: center;
		 justify-content: center;
	 }

	 #rightbut {
		 width: 60%;
		 height: 190px;
		 color: white;
		 background-color: green;
		 margin-left:15%;
	 }

	 #statype {
		 display: flex;
		 align-items: center;
		 gap: 4px;
		 margin-left: auto;
	 }
	 #portal {
		 width: 800px;
		 height: 1000px;
	 }
	 .nulb,.nurb {
	 border-radius: 50%;
	 font-size: 2em;
	 background-color: white;
	 }
	 .nulb {
		 color: blue;
	 }
	 .nurb {
		 color: red;
	 }