body {
            font-family: Arial, sans-serif;
            margin: 0px;
            background-color: #121212;
            color: white;
            justify-content: space-between;
            
        }


/* navbar */

    .navbar {
            display: flex;
            background-color: transparent;
            padding: 20px 0px;
            align-items: center;
            justify-content: space-between;
             width:100%;
             height:100%;
        }
.logy{color:blue}
    .nav-center-notice {  
            flex: 1;  
            display: flex;  
            justify-content: center;  
            position: relative;  
        }  
  
        .notification-notice {  
            position: relative;  
            cursor: pointer;  
            transition: transform 0.2s ease-in-out;  
        }  
  
        .notification-notice svg {  
            width: 32px;  
            height: 32px;  
            stroke: #fff;  
            stroke-width: 1.1;  
            fill: none;  
            transition: stroke 0.3s ease;  
        }  
  
        .notification-notice:hover svg {  
            stroke: #3498db;  
        }  
  
        .badge-notice {  
            position: absolute;  
            top: 2px;  
            right: 4px;  
            width: 16px;  
            height: 16px;  
            background: red;  
            color: white;  
            font-size: 12px;  
            display: flex;  
            align-items: center;  
            justify-content: center;  
            border-radius: 50%;  
            font-weight: bold;  
            box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);  
            text-align: center;  
        }  
  
        .dropdown-notice {  
            display:none;  
            position: absolute;  
            top: 50px;  
            left: 80px;  
            transform: translateX(-50%);  
            background: #252525;  
            width: 320px;  
            border-radius: 8px;  
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);  
            z-index: 1000;  
            overflow: hidden;  
            transition: all 0.3s ease;  
        }  
  
        .dropdown-notice.show { display: block; }  
  
        .dropdown-header-notice {  
            background: #3498db;  
            color: white;  
            padding: 12px;  
            font-size: 16px;  
            text-align: center;  
            font-weight: bold;  
        }  
  
        .dropdown-notice ul {  
            list-style: none;  
            padding: 0;  
            margin: 0;  
            max-height: 250px;  
            overflow-y: auto;  
        }  
  
        .dropdown-notice ul li {  
            padding: 15px;  
            border-bottom: 1px solid #444;  
            cursor: pointer;  
            transition: background 0.3s;  
            font-size: 14px;  
            display: flex;  
            align-items: center;  
        }  
  
        .dropdown-notice ul li.unread-notice {  
            font-weight: bold;  
            background: #333;  
        }  
  
        .see-all-notice {  
            display: block;  
            text-align: center;  
            padding: 12px;  
            background: #303030;  
            text-decoration: none;  
            color: #ddd;  
            font-weight: bold;  
            border-top: 1px solid #444;  
        }  
  
        .see-all-notice:hover { background: #3a3a3a; }  
  .logy{color:blue}

.logz-auth-buttons {
            display: flex;
            gap: 15px;
        }

        .logz-auth-buttons a {
            text-decoration: none;
            padding: 8px 10px;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            transition: 0.3s ease-in-out;
            border: 2px solid #007bff;
        }

        .logz-login {
            background: #007bff;
            color: white;
        }

        .logz-register {
            background: white;
            color: #007bff;
        }

        .logz-auth-buttons a:hover {
            box-shadow: 0px 0px 10px rgba(0, 123, 255, 0.7);
        }

        /* Active button styles */
        .logz-active {
            background: #007bff !important;
            color: white !important;
        }

        .logz-inactive {
            background: white !important;
            color: #007bff !important;
        }


        .menu-icon {
                    padding: 10px;
            font-size: 54px;
            color: #333;
            cursor: pointer;
        }
        .right-section {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .badge {
            position: absolute;
            top: -5px;
            right: -10px;
            background-color: red;
            color: white;
            border-radius: 50%;
            padding: 2px 6px;
            font-size: 12px;
        }
        .account {
            display: flex;
            align-items: center;
            color: whitesmoke; /* Teal color */
            font-size: 16px;
            font-weight:bold;
                    padding: 10px;
        }

    .logys-popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
        }

        .logys-login-container {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 400px;
            padding: 20px;
            background: #1e1e2d;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            text-align: center;
            z-index: 1000;
        }

        .logys-close-btn {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 22px;
            color: white;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
        }

        .logys-close-btn:hover {
            color: red;
        }

        /* Input Fields - Fixed Spacing */
        .logys-form-group {
            margin-bottom: 15px;
            text-align: left;
        }

        .logys-form-control {
            background: #333 !important;
            color: white !important;
            border: 1px solid #555 !important;
            padding: 12px !important;
            font-size: 16px !important;
            border-radius: 5px;
            width:93%;
        }

        .logys-form-control::placeholder {
            color: #bbb !important;
        }

        .logys-password-container {
            position: relative;
        }

        .logys-toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #bbb;
            font-size: 18px;
        }

        /* Buttons - Fixed Spacing */
        .logys-btn-login, .logys-btn-register {
            width: 100%;
            padding: 12px;
            border-radius: 5px;
            font-size: 16px;
            margin-top: 15px;
        }

        .logys-btn-login {
            background-color: #007bff;
            color: white;
            border: none;
        }

        .logys-btn-login:hover {
            background-color: #0056b3;
        }

        .logys-btn-register {
            background-color: #6c757d;
            color: white;
            border: none;
        }

        .logys-btn-register:hover {
            background-color: #5a6268;
        }

        .logys-alert {
            text-align: center;
            font-size: 14px;
        }

        /* Smooth Animation */
        .logys-login-container {
            opacity: 0;
            transform: translate(-50%, -60%);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .logys-popup-overlay.show {
            display: block;
        }

        .logys-login-container.show {
            display: block;
            opacity: 1;
            transform: translate(-50%, -50%);
        }
        


/* deleted */
        .logpop-popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #1e1e2d;
            padding: 20px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            width: 300px;
            text-align: center;
            z-index: 1000;
        }

        .logpop-popup h2 {
            margin-bottom: 15px;
        }

        .logpop-popup input {
            
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
                    width: 94%;
        }

        .logpop-popup button {
            background: #007bff;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }

        .logpop-popup button:hover {
            background: #0056b3;
        }

        /* Close X Icon */
        .logpop-close {
            background: transparent;
            color: #333;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            position: absolute;
            top: 5px;
            right: 10px;
            border: none;
        }

        .logpop-close:hover {
            color: red;
        }

        /* Background overlay */
        .logpop-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }


        .dropdown-icon {
            width: 42px; /* Enlarged width */
            height: 42px; /* Enlarged height */
            stroke: white;
            fill: transparent;
            cursor: pointer;
            stroke-width: 2;
        }
    
        .circle-container {
            background-color: #21252E; /*background */
            padding: 5px;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* Ensure the circles are centered */
            align-items: center; /* Center vertically */
            height:350px;
            flex-wrap: wrap; /* Wrap circles properly */
            width: 100%; /* Ensure the container spans the full width */
            box-sizing: border-box; /* Include padding in the width calculation */
        }

 


   .button-container {
            display: flex;
            gap: 10px; 
                 height: 50px; /* Space between buttons */
        }

        .btn {
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
                    font-weight:Bold;
                  font-family: san-serif; 
            transition: background-color 0.3s;
        }

      .derel-dropdown-container  {
                  
            position: relative;
            display: inline-block;
        }
        .derel-dropdown-button {
            padding: 10px 20px;
            font-size: 20px;
            background-color: #fff;
            border: 2px solid #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: bolder;
            gap: 10px;
            outline: none;
            transition: box-shadow 0.2s ease, border 0.2s ease;
            border-radius: 15px;
        }
        .derel-dropdown-button:focus, .derel-dropdown-button:active {
            border: 2px solid #0056b3;
            box-shadow: 0 0 8px rgba(0, 86, 179, 0.8);
        }
        .derel-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            border: 3px solid #007bff;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            display: none;
            min-width: 100%;
            z-index: 10;
            border-radius: 10px;
            overflow: hidden;
        }
        .derel-dropdown-menu a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: black;
            cursor: pointer;
            font-family: serif;
                    font-weight: bold;
                    font-size: 26px;
        }
        .derel-dropdown-menu a:hover {
            background-color: #007bff;
            color: white;
        }
        .derel-arrow {
            transition: transform 0.3s ease;
        }
        .derel-rotate {
            transform: rotate(180deg);
        }

        /* Default active selection (Red) */
        .derel-active {
            background-color: #007bff !important;
            color: #21252E !important;
        }

        /* 🔹 Glowing Blue Text Effect */
        #derel-selectedText {
            color: #007bff;
            font-weight: bold;
            text-shadow: 0 0 8px rgba(0, 123, 255, 0.8);
        }
.menuu{justify-content: center; font-weight: bolder;
            padding: 30px 25px;
            display: flex;
            align-items: center;
            font-size: 40px;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease-in-out;
            border-radius: 5px;
}

    .sidebar-header {
            text-align: center;
            font-size: 22px;
            font-weight: bold;
            padding: 15px;
      /*      background: rgba(255, 255, 255, 0.1);*/
            border-radius: 10px;
            margin-bottom: 10px;
            color: #ffcc00;
        }
        .sidebar {
            height: 100vh;
            width: 75%;
            max-width: 300px;
            position: fixed;
            top: 0;
            left: -100%;
            background: rgba(20, 20, 20, 0.9); /* Glass effect */
            backdrop-filter: blur(50px);
            transition: left 0.5s ease-in-out;
            padding: 20px;
            box-shadow: 4px 0 10px rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow-y: auto;
            border-right: 2px solid rgba(255, 255, 255, 0.2);
        }

        .sidebar ul {
            list-style-type: none;
        }

        .sidebar a {
             font-weight: bold;       
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 18px;
            color: white;
            padding: 15px 5px;
            text-decoration: none;
            transition: all 0.3s;
            border-radius: 8px;
            position: relative;
                 right: 15%;
        }
        .sidebar a:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #ffcc00;
            transform: translateX(5px);
        }

        /* Sidebar Icons */
        .sidebar a .icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
        }

        /* Close Button */
        .close-btn {
            font-size: 35px;
            position: absolute;
            top: 4px;
            right: 6px;
            cursor: pointer;
            color: white;
            transition: 0.3s;
        }
#snipepr{
            display: none;
            
}

        .close-btn:hover {
            color: #ff4444;
        }

        /* Submenu Styling */
       .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out;
            background-color: rgba(40, 40, 40, 0.7);
            border-left: 3px solid #ffcc00;
            margin-left: 30px;
            padding-left: 45px;
            border-radius: 5px;
        }


        .submenu a {
            font-size: 16px;
            padding: 12px;
            display: block;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .submenu a:hover {
            background-color: #444;
            color: #ffcc00;
            padding-left: 20px;
        }

        .dropdown-icon {
            transition: transform 0.3s ease-in-out;
        }

        .rotate {
            transform: rotate(180deg);
        }

        /* Neon Effect */
        .sidebar a:hover::before {
            content: '';
            position: absolute;
            height: 3px;
            width: 100%;
            background: #ffcc00;
            bottom: 0;
            left: 0;
            border-radius: 50px;
            transition: 0.3s;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .sidebar {
                width: 80%;
            }
        }

        @media (max-width: 480px) {
            .sidebar {
                width: 90%;
            }
        }

 


        .btn-light {
            background-color: #007bff; /* Light blue */
            color: #000; /* Text color */
        }

        .btn-dark {
            background-color: #333; /* Dark gray */
            color: #fff; /* Text color */
        }

.diginp{font-family: serif; font-size: 30px; }
        .digit-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr); /* 5 columns */
            gap: 2px;
            justify-items: center;
            margin-top: 5px;
            width: 100%; /* Ensure it takes the full width of the parent container */
            box-sizing: border-box; /* Include padding in the width calculation */
        }
        .digit-box {
            text-align: center;
            padding: 1px;
            width: 100px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }
    
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background: conic-gradient(#444 0%, #999 0%);
            transition: background 0.2s ease;
        }
        .circle::after {
            content: "";
            width: 80px;
            height: 80px;
            background: #121212;
            position: absolute;
            border-radius: 50%;
        }
        .circle.selected::after {
            background: #0B53F7;
                    
        }

  .circle.selectedsnp::after {
            background: rebeccapurple;
        }
     .circle.over-highlight::after {
            background: #33DFD3;
        }
    
    
        .digit-number {
            font-size: 1.8em;
            font-weight: bold;
            color: white;
            z-index: 2;
        }
        .digit-percent {
            font-size: 1em;
            color: #ccc;
            z-index: 2;
            margin-top: 5px;
        }
        .pointer {
            position: absolute;
            bottom: -5px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 15px solid yellow;
            visibility: hidden;
        }
       .dropdown {
            position: relative;
            width: 100%;
                   z-index: 9;
                   
        }

        /* Dropdown Button */
        .dropbtn {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(100px);
            color: white;
            padding: 15px 20px;
            font-size: 20px;
            border: none;
            cursor: pointer;
            border-radius: 12px;
            
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: 0.3s ease;
        }

        .dropbtn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Dropdown Menu */
        .dropdown-content {
            display: none;
            position: absolute;
            width: 90%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(100px);
            border-radius: 12px;
            overflow: hidden;
            opacity: 0;
                    z-index: 102;
                    border: 2px solid white;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }


.dropdown-contentt{display: none;
            position: absolute;
            width: 90%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(100px);
            border-radius: 12px;
            overflow: hidden;
            opacity: 0;
                    z-index: 102;
                    border: 2px solid white;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   }
.dropdown-contentt .active{
            opacity: 1;
            display: block;
}
        /* Dropdown Items */
        .dropdown-content a {
            color: white;
            padding: 15px 20px;
            text-decoration: none;
            display: block;
            font-size: 18px;
            transition: 0.3s ease;
        }

        .dropdown-content a:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Show dropdown when active */
        .dropdown.active  {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

.dropdown-content.active{
            display: block;
            opacity: 1;
                 }

        /* Arrow Icon Rotation */
        .dropdown.active .arrow {
            transform: rotate(180deg);
        }

    .carett{
            border: solid white;
            border-width: 0 8px 8px 0;
            display: inline-block;
            padding: 6px 6px;
            gap:70px;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            
        }
    /**over and under paet*/
       .containerxv {
           
            background-color: #21252E;
            padding: 10px;
            border-radius: 10px;
            width: 98%;
        }
        .headerxv {
           
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: #121212;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            height:80px;
            font-size:45px;
            font-style:bold;
            
        }
        .sub-headerxv {
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: #121212;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            height:80px;
            font-size:45px;
            font-style:bold;
        }
        .footerxv {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
            background-color:  #21252E;
            border-radius: 5px;
            margin-top: 10px;
        }
        .buttonxv {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 35px;
            border-radius: 15px;
            width: 67%;
            cursor: pointer;
            margin: 0 20px;
            font-size:45px;
            
        }
        .over {
                    font-weight: bold;
                    height: 40px;
            background-color: #01C38F;
                    
        }
#overrsnp  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #43B825;
                    
        }

#overrsnpg  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #43B825;
                    
        }


#underrsnp  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #DF0041;
                    
        }

        #wheel {
                    display: none;
            width: 40px;
            height: 40px;
            animation: rotate 1s linear infinite; /* Faster rotation */
        }

#play {
            display: flex;
            
}

#wheelg {
                    display: none;
            width: 40px;
            height: 40px;
            animation: rotate 1s linear infinite; /* Faster rotation */
        }

#playg {
            display: flex;
            
}

#wheel2 {
                    display: none;
            width: 40px;
            height: 40px;
            animation: rotate 1s linear infinite; /* Faster rotation */
        }

#play2 {
            display: flex;
            
}
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

@keyframes borderAnimation {
  0% {
    border-color: red;
  }
  25% {
    border-color: blue;
  }
  50% {
    border-color: orangered;
  }
  75% {
    border-color: greenyellow;
  }
  100% {
    border-color: blueviolet;
  }
}




        .under {
                    
                    font-weight: bold;
                    height: 40px;
            background-color: #DF0041;
        }
    

    .vaton{padding: 15px; 
           font-size:45px; 
           border-radius:5px;
           background:#333;
           width:75%;
           height:65%;
        justify-content: space-between;
        align-items: center;
        display:flex;
           
    }
    
    
   .vatonsd{padding: 15px; 
           font-size:45px; 
           border-radius:5px;
           background:#333;
           width:50%;
           flex-direction: column;
            justify-content: center;
            align-items: center;
       display:flex;
   }
    
      .popup-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
        }
        .popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background:  #21252E;
            padding: 22px; /* Increase padding */
            border-radius: 10px;
                    border:3px #007bff solid ;
            box-shadow: 0 0 11px rgba(0, 0, 0, 0.2); /* Increase shadow */
            z-index: 1000;
            display: none;
              font-weight: bold;
            text-align: center;
            font-size: 1.1em; /* Increase font size */
        }
#mini{
             font-size:15px;
            margin-bottom: 18.5px; /* Increase margin */
           
}

#lossst{color:red}
#lossst{color:greenyellow}



  .pointext {
            display: block;
            font-size:20px;
            gap: 25px; /* Increase gap */
            margin-bottom: 28.5px; /* Increase margin */
            justify-content: center;
              font-weight: bold;
        }
.stsa{display:block}
        .textpop {
            margin-bottom: 11px; /* Increase margin */
            color:white;
            font-size:25px;
              font-weight: bold;
        }
        .buttonpop {
            margin: 5.5px; /* Increase margin */
            padding: 20px 50px; /* Increase padding */
            background-color: #007BFF;
            color: white;
            border: none;
            font-size:25px;
              font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .buttonpop:hover {
            background-color: #0056b3;
        }



        .popclose {
            background-color: red;
            margin-top: 22px; /* Increase margin */
        }
        .popclose:hover {
            background-color: #c82333;
        }
        .numberButtons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .numberButtons div {
            display: flex;
            justify-content: center;
            width: 100%;
        }
.bvg {
            width: 30px;
            height: 30px;
            fill: green;
        }
.demori{display: flex;
            border-radius: 5px;
            padding: 10px 0 10px ;
            gap: 2%;
            background: #21252E;
}
        .numberButtons button {
            width: 49.5px; /* Increase width */
            margin: 5.5px; /* Increase margin */
        }
        #stakeAmount, #stakeAmountprofit,
        #duration, #stakeAmountloss{
            text-align: center;
            height: 22px; /* Increase height */
            padding: 11px; /* Adjust padding */
            font-size: 1.1em; /* Increase font size */
        }
    .amalt{color:red; font-weight:bold;font-size:30px}
    .stakeside input{width:225px;   font-weight: bold;}
    .popclose{  font-weight: bold;}
    .vatontx{}
    #vvik{height:100px}
#prdct{font-weight:bold;font-size:40px; display:none;}

  #lost{ display:none; color: red;
    text-shadow: 0 0 1px rgba(255, 0, 0, 0.8), 0 0 10px rgba(255, 0, 0, 0.6), 0 0 15px rgba(255, 0, 0, 0.4);
}
  #winny{ display:none; color:lime;
    text-shadow: 0 0 1px rgba(0, 255, 0, 0.8), 0 0 10px rgba(0, 255, 0, 0.6), 0 0 15px rgba(0, 255, 0, 0.4);}

.vatontx{width:95%;
            display: block;
            font-weight:bold;
            font-size:40px;
          /*  width:95%; */
            display: block;
            
            padding: 5px; 
           
           border-radius:5px;
           background:#333;
           width:25%;
           height:65%;
            
            
}




@media (max-width: 790px) {
  body {
                margin: 0px;
              background-color: #121212;
            color: white;
             width:100%; 
          
    
  }
              .navbar {
                          
                          border-bottom: 2px solid #333; 
            display: flex;
            background-color: #21252E;
            padding: 0px 0px;
            align-items: center;
            justify-content: space-between;
             width:100%;
             height:50px;
        }
            #prdct{font-weight:bold;font-size:25px; flont-family:serif; display:none;}
             .menu-icon {
            font-size: 30px;
            color: white;
            cursor: pointer;
        }
        .right-section {
            display: flex;
            align-items: center;
            gap: 7px;
        }
            .account {
            padding: 10px;
                        font-family: serif;
                        font-weight: bold;
                        font-size: 20px;
            }
            .derel-dropdown-button {
            padding: 10px 20px;
            font-size: 25px;
            background-color: #21252E;
            border: 2px solid #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: bolder;
            
            outline: none;
            transition: box-shadow 0.2s ease, border 0.2s ease;
            border-radius: 5px;
        }
         
             .button-container {
            display: flex;
            gap: 10px; 
                         width:20px;
                 height: 30px; /* Space between buttons */
        }
               .btn {
            border: none;
            border-radius: 5px;
            padding: 0px 20px;
            font-size: 12px;
            cursor: pointer;
                    font-weight:Bold;
                  font-family: san-serif; 
            transition: background-color 0.3s;
        }
            .demori{display: flex;
            gap: 2%;
                        padding: 10px 2%; 
                        width:96%;
                        height: 50px;
                        
                        
}
            
            
        .dropbtn {
            background-color: #333;
            color: white;
            padding: 0px 6px;
            font-size: 15px;
            border: 2px solid #007bff;
              cursor: pointer;
            border-radius: 5px;
            
               font-weight: bold;     
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
        }
            #current-price{font-size: 12px; padding: 0 0 20px;color:red}
            
              .buttonpop {
            margin:10px; /* Increase margin */
            padding: 0px 10px; /* Increase padding */
            background-color: #007BFF;
            color: white;
            border: none;
            font-size:25px;
              font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
               .circle-container {
            background-color:  #21252E; /*background */
            padding: 0px;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* Ensure the circles are centered */
            align-items: center; /* Center vertically */
            height:200px;
            flex-wrap: wrap; /* Wrap circles properly */
            width: 100%; /* Ensure the container spans the full width */
            box-sizing: border-box; /* Include padding in the width calculation */
        }
            #circle-continer {
            background-color:  #21252E; /*background */
            padding: 1px;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* Ensure the circles are centered */
            align-items: center; /* Center vertically */
            height:250px;
            flex-wrap: wrap; /* Wrap circles properly */
            width: 100%; /* Ensure the container spans the full width */
            box-sizing: border-box; /* Include padding in the width calculation */
        }
            
            .digit-box {
            text-align: center;
            padding: 1px;
            width: 10px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
                        
        }
                .digit-container {
        grid-template-columns: repeat(5, 1fr); /* 5 columns, 2 rows */
        gap: 3px; /* Adjust spacing */
        justify-content: center;
    }


    .digit-box {
        width: 70px; /* Adjusted size */
        height: 70px;
    }

    .circle {
        width: 60px;
        height: 60px;
    }

    .circle::after {
        width: 48px;
        height: 48px;
    }

    .digit-number {
        font-size: 1.2em;
    }

    .digit-percent {
        font-size: 0.8em;
    }

    .pointer {
        bottom: -4px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid yellow;
    }

  .buttonxv {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-radius: 15px;
            width: 45%;
               font-family: "Garamond", serif;
            cursor: pointer;
            margin: 5 5px;
            font-size:20px;
            font-weight: bold;
        }
 
            
            .containerxv {
           
            background-color: #21252E;
            padding: 5px;
            border-radius: 10px;
            width: 97%;
            }
    .headerxv {
           
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: #121212;
            padding: 3px;
            border-radius: 5px;
            margin-bottom: 5px;
            height:40px;
            font-size:15px;
            font-style:bold;
            
        }
            .vatontx{
            display: block;
            font-weight:bold;
            font-size:40px;
          /*  width:95%; */
            display: block;
            
            padding: 5px 5px 0; 
           
           border-radius:5px;
           background:#333;
           width:97.5%;
           height:90%;
            
            
}
 
        .sub-headerxv {
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: aqua;
            padding: 1px;
            border-radius: 5px;
            margin-bottom: 5px;
            height:30px;
            font-size:15px;
            font-style:bold;
        }
            
   
   .vatonsd{padding: 10px; 
           font-size:15px; 
           border-radius:5px;
           background:#333;
           width:50%;
           flex-direction: column;
            justify-content: center;
            align-items: center;
       display:flex;
   }
    
           
            .diginp{font-family: serif; font-size: 15px; }
   .vatondwe{font-size:10px;}
            
            .adapopup {
            display:block;
            position: absolute;
            top:82px;
            left: 115px;
            
            height: 100%;
  justify-content: center;
            align-items: center;
            opacity: 1;
                        z-index: 99;
                   }
            
#dropdown-menu a{
            font-weight: bold;
            border-bottom: 0.5px solid #ddd; 
}
       #underrsn  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #DF0041;
                    
        }
   
            #overrsn  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #43B825;
                    
        }

            
#dropdown-menu a.selected {
            background-color: #FF6200; /* Light blue */
            color: #FFFFFF; 
  font-style: bold;
}
        /* Popup content with green 5px border */
        .adapopup-content {
            background: transparent;
            padding: 3px;
                    font-weight: bolder;
                    font-family: serif;
            border-radius: 8px;
            height:4px;
               justify-content: center;     
            width: 150px;
            border-radius: 5px;
            text-align: center;
      }

        /* Show popup */
        .adapopup.show {
            display: flex;
            opacity: 1;
        }

        .adapopup.show .adapopup-content {
            transform: scale(1)
        }
            #current-price{ font-size: 20px;font-weight: bolder;}
#adaPopup{display: none}
}

/*end of         ##############max*/

.hidden-tfy {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

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

.dropdown-contentt a.selected-tfy {
  background-color: #007bff;
  color: white;
}

#actvrunining{display: none}
.over_payout{ ;font-size: 10px;  position: absolute;bottom: 0;left: 20px;}
.over_payoutt{font-size: 12px;  position: absolute;bottom: 0;right: 20px;}

/* bots */
#dotsTicks {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 2px;
      margin-top: 20px;
      padding: 0;
    }

    #dotsTicks li {
                
      list-style-type: none;
      padding: 2px;
      font-size: 12px;
      width: 28px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      text-align: center;
      border-radius: 4px;
      font-weight: bold;
    }
.dotsGreen2 {
      background-color: #21252E;
      }
    .dotsRed {
      background-color: #00FE19;
                color: black;
    }

    .dotsGreen {
      background-color: #FF1010;
      color: white;
    }

    .dotsDot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-left: 5px;
    }
.snipper{gap:2%; font-style: bold; display: flex; width:99%}
.snpr{width:48%}
.snprb{width:100%}
.snp{width:94%}
.snpt{width:9%}
.running{width:88%;
            display: flex;
    justify-content: center;
    align-items: center;}
.runningtrr{width:94%;
            display: flex;
    justify-content: center;
    align-items: center;}
.snipperrun{gap: 0px; width:100%; }
.runningt{width:88%;display: grid;grid-template-columns: repeat(4, 1fr);gap: 60px;background-color: #121212;align-items: center;justify-content: center}
.vatondwer{font-family: serif; color: #00FF02  ; width:30%; justify-content: center; align-items: center;font-size:12px;}
.snprbt{justify-content: center; background: #121212; padding-left: 45px;}
 .vatondwetrr{color: white;font-size:30px;font-family: serif;text-shadow: 
    2px 2px 3px rgba(0, 0, 0, 0.5),      /* Subtle shadow for depth */
    -2px -2px 3px rgba(0, 0, 0, 0.5),     /* Subtle shadow for depth */
    0 0 5px #00FF01,                     /* Glowing green shadow */
    0 0 4px #00FF01,                     /* Glowing green shadow */
    0 0 3px #00FF01,                     /* Glowing green shadow */
    0 0 2px #004DFF,                     /* Glowing blue shadow */
    0 0 4px #004DFF,                     /* Glowing blue shadow */
    0 0 3px #004DFF,                     /* Glowing blue shadow */
    0 0 1px #00FF01,                     /* Extra green glow for richness */
    0 0 3px #004DFF;                     /* Extra blue glow for a more blended effect */
}

.congratulationp{ color: #00FF01}
  .congratulation {
            margin-bottom: 11px; /* Increase margin */
            color:white;
            font-size:25px;
              font-weight: bold;
              text-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.5),      /* Subtle shadow for depth */
    -2px -2px 5px rgba(0, 0, 0, 0.5),     /* Subtle shadow for depth */
    0 0 10px #00FF01,                     /* Glowing green shadow */
    0 0 20px #00FF01,                     /* Glowing green shadow */
    0 0 30px #00FF01,                     /* Glowing green shadow */
    0 0 10px #004DFF,                     /* Glowing blue shadow */
    0 0 20px #004DFF,                     /* Glowing blue shadow */
    0 0 30px #004DFF,                     /* Glowing blue shadow */
    0 0 40px #00FF01,                     /* Extra green glow for richness */
    0 0 50px #004DFF;                     /* Extra blue glow for a more blended effect */

        }
.snprbtrr {flex: 0 0 24%;}
.snprcomb {flex: 0 0 44%;}

@media (min-width: 500px) {
.running {
    width: 90%;
 
}

.runningtrr {
    width: 97%; 
}

.vatontx {
      
        width: 98.5%;
        
    }
}

 .panel {
      
      flex-direction: column;
    }
    
    @media (max-width: 600px) {
    .tit, .tut{width:22%; }
.tkt{width: 54%;}
    
}



@media (min-width: 700px) {


body {
      font-family: Arial, sans-serif;
      background-color: #121212;
      color: #fff;
      width: 100%;
      margin: 0;
    }

   .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns (50%/50%) */
    gap: 20px;
    width: 98%;
  }
  
     .manual, .sniper {
  
  position: relative;
  z-index: 2; /* Above grid-container but below popups */
}   


      
    .panel {
      background-color: #1e1e1e;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 0 8px rgba(255,165,0,0.3);
      display: flex;
      flex-direction: column;
      
    }
    .panel input {
      color: orange !important; /* Force orange color */
      background-color: #121212; /* Keep the original background color */
      border: none;
      border-radius: 4px;
      text-align: center;
      padding: 4px;
    }
    .panel select {
      color: orange !important; /* Set text color to orange */
      background-color: #121212; /* Keep the original background color */
      border: none;
      border-radius: 4px;
      padding: 4px;
      text-align: center;
    }
    .panel > *:not(.panel-controls) {
      flex-shrink: 0;
    }

    .panel-controls {
      margin-top: auto;
    }
      .vatonttx{
            display: block;
            font-weight:bold;
            font-size:40px;
          /*  width:95%; */
            display: block;
            
            padding: 5px 5px 0; 
           
           border-radius:5px;
           background:#333;
           width:95%;
           height:90%;
            
            
}

.dropdown{width:99%;}

.demori{display: flex;
            gap: 2%;
                        
            
                        width:97%;
                        height: 50px;
                    
                        
}
   
.running {
    width: 80%;
    
}
.runningtrr{width:89%}
    .snp{width:88%;}
   .snipper{width: 98%;}
  .snprcomb {flex: 0 0 38%;}
   .vatondwetrr{font-size: 22.5px; }
   .relativve {
  position: relative;
}
.tysp{width:85%;}
.tisp{font-size:19px;}
.absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
  
 
}

.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

#boxxx{
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
  #cirko{
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}
    .divider {
      border-top: 0.01px solid orange;
      margin: 1px 0 0px;
    }
    .button-grid {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    .button-grid button {
      padding: 8px 12px;  /* Reduced padding */
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;  /* Reduced font size */
      box-shadow: 0 0 8px orange;
    }
    .even-odd-bar, .rise-fall-bar, .under-over-bar {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 10px;
      color: orange;
    }
    .button-grid button {
      font-family: 'Poppins', ghetto;  /* Apply the custom font */
      font-weight: bold;  /* Make the text bold */
      font-size: 14px;  /* Adjust font size if needed */
      color: black;  /* Set text color to orange */
    }
    .progress {
      display: flex;
      height: 10px;
      margin-top: 5px;
    }
    .progress div {
      height: 100%;
    }
    .green { background-color: #4CAF50; }
    .red { background-color: #f44336; }
    .blue { background-color: #2196F3; }
    .light-blue { background-color: #81D4FA; }
    .light-red { background-color: #FFCDD2; }
    .panel-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 0.01px solid orange;
      padding-top: 5px;
    }
    .panel-controls label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      font-weight: bold;
    }
    .panel-controls input {
      width: 30px;  /* Reduced width to fit 4 characters */
      padding: 4px;
      background-color: #121212;
      border: none;  /* Removed border */
      color: white;
      border-radius: 4px;
      text-align: center;  /* Centering text */
    }
    .panel-controls button {
      padding: 6px 12px;
      background-color: red;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;  /* Reduced font size */
    }
    .hidden {
      display: none;
    }
    .icon-button {
      display: flex;
      align-items: center;
      gap: 15px; /* Added gap between buttons */
    }
    .icon-button i {
      font-size: 14px;  /* Reduced font size for the icon */
    }
    .icon-button button {
      background-color: transparent;
      color: orange;
      border: none;
      border-radius: 50%;
      width: 30px; /* Reduced size of the button */
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 8px orange;
    }
    .icon-button button:nth-child(1) {
      background-color: transparent;
      box-shadow: 0 0 8px orange;  /* Orange glow for the settings button */
    }
    .icon-button button:nth-child(2) {
      background-color: blue;
      box-shadow: 0 0 8px orange; /* brighter glow */
      animation: pulseGlow 1.5s infinite;
    }

    /* Dialog Styling */
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #1e1e1e;
  padding: 30px;  /* Increased padding for more space */
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 165, 0, 0.6);
  z-index: 9999;
  display: none;
  min-width: 300px;  /* Set a minimum width */
}

.dialog .dialog-title {
  font-size: 16px;
  font-weight: bold;
  color: orange;  /* Set title color to orange */
  margin-bottom: 15px;  /* Add space below title */
}

/* Group the label and input together */
.form-group {
  margin-bottom: 15px;  /* Add space between fields */
}

.form-group label {
  display: block;  /* Make the label block to sit above the input */
  margin-bottom: 5px;  /* Add space between label and input */
  color: white;  /* Set label color */
}



.dialog input {
  margin: 5px 0;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background-color: #121212;
  color: #fff;
  width: 100%;  /* Make inputs stretch to full width of the container */
}

.dialog button {
  background-color: orange;
  color: white;
  border: none;
  padding: 8px 15px;  /* Increased padding */
  border-radius: 4px;
  cursor: pointer;
}

    .glow {
      animation: glowPulse 0.5s infinite ease-in-out;
      box-shadow: 0 0 5px #00ffcc;
    }

    @keyframes glowPulse {
      0% {
        box-shadow: 0 0 5px #00ffcc;
        opacity: 1;
      }
      50% {
        box-shadow: 0 0 20px #00ffcc;
        opacity: 0.4;
      }
      100% {
        box-shadow: 0 0 5px #00ffcc;
        opacity: 1;
      }
    }


    /* Snackbar */
    .snackbar {
      visibility: hidden;
      min-width: 250px;
      margin-left: -125px;
      background-color: #4CAF50;
      color: #fff;
      text-align: center;
      border-radius: 2px;
      padding: 16px;
      position: fixed;
      z-index: 1;
      bottom: 30px;
      left: 50%;
      font-size: 17px;
      box-shadow: 0 0 10px orange;
    }
    .snackbar.show {
      visibility: visible;
      animation: fadein 0.5s, fadeout 0.5s 3s;
    }
    @keyframes fadein {
      from { bottom: 0; opacity: 0; }
      to { bottom: 30px; opacity: 1; }
    }
    @keyframes fadeout {
      from { opacity: 1; }
      to { opacity: 0; }
    }
    
    #slider {
      position: absolute;
      top: 0px; /* set this to match your header's height */
      height: 80%;
      width: 30%;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      z-index: 2;
      transition: transform 0.4s ease;

      background-color: #f0f0f0;
      border: 1px solid #ccc;
      display: none;  
    }

    #slider.left {
      left: 0;
      transform: translateX(-100%);
    }

    #slider.right {
      right: 0;
      transform: translateX(100%);
    }

    #slider.open-left {
      transform: translateX(0);
    }

    #slider.open-right {
      transform: translateX(0);
    }

/*<<<<<<<<<<<<<<<<< start >>>>>>>>>>> */

@media (max-width: 790px) {
  body {
                margin: 0px;
              background-color: #121212;
            color: white;
             width:100%; 
          
    
  }
              .navbar {
                          
                          border-bottom: 2px solid #333; 
            display: flex;
            background-color: #21252E;
            padding: 0px 0px;
            align-items: center;
            justify-content: space-between;
             width:100%;
             height:50px;
        }
            #prdct{font-weight:bold;font-size:25px; flont-family:serif; display:none;}
             .menu-icon {
            font-size: 30px;
            color: white;
            cursor: pointer;
        }
        .right-section {
            display: flex;
            align-items: center;
            gap: 7px;
        }
            .account {
            padding: 10px;
                        font-family: serif;
                        font-weight: bold;
                        font-size: 20px;
            }
            .derel-dropdown-button {
            padding: 10px 20px;
            font-size: 25px;
            background-color: #21252E;
            border: 2px solid #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: bolder;
            
            outline: none;
            transition: box-shadow 0.2s ease, border 0.2s ease;
            border-radius: 5px;
        }
         
             .button-container {
            display: flex;
            gap: 10px; 
                         width:20px;
                 height: 30px; /* Space between buttons */
        }
               .btn {
            border: none;
            border-radius: 5px;
            padding: 0px 20px;
            font-size: 12px;
            cursor: pointer;
                    font-weight:Bold;
                  font-family: san-serif; 
            transition: background-color 0.3s;
        }
            .demori{display: flex;
            gap: 2%;
                        padding: 10px 2%; 
                        width:96%;
                        height: 50px;
                        
                        
}
            
            
        .dropbtn {
            background-color: #333;
            color: white;
            padding: 0px 6px;
            font-size: 15px;
            border: 2px solid #007bff;
              cursor: pointer;
            border-radius: 5px;
            
               font-weight: bold;     
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
        }
            #current-price{font-size: 12px; padding: 0 0 20px;color:red}
            
              .buttonpop {
            margin:10px; /* Increase margin */
            padding: 0px 10px; /* Increase padding */
            background-color: #007BFF;
            color: white;
            border: none;
            font-size:25px;
              font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
               .circle-container {
            background-color:  #21252E; /*background */
            padding: 0px;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* Ensure the circles are centered */
            align-items: center; /* Center vertically */
            height:200px;
            flex-wrap: wrap; /* Wrap circles properly */
            width: 100%; /* Ensure the container spans the full width */
            box-sizing: border-box; /* Include padding in the width calculation */
        }
            #circle-continer {
            background-color:  #21252E; /*background */
            padding: 1px;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* Ensure the circles are centered */
            align-items: center; /* Center vertically */
            height:250px;
            flex-wrap: wrap; /* Wrap circles properly */
            width: 100%; /* Ensure the container spans the full width */
            box-sizing: border-box; /* Include padding in the width calculation */
        }
            
            .digit-box {
            text-align: center;
            padding: 1px;
            width: 10px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
                        
        }
                .digit-container {
        grid-template-columns: repeat(5, 1fr); /* 5 columns, 2 rows */
        gap: 3px; /* Adjust spacing */
        justify-content: center;
    }


    .digit-box {
        width: 70px; /* Adjusted size */
        height: 70px;
    }

    .circle {
        width: 60px;
        height: 60px;
    }

    .circle::after {
        width: 48px;
        height: 48px;
    }

    .digit-number {
        font-size: 1.2em;
    }

    .digit-percent {
        font-size: 0.8em;
    }

    .pointer {
        bottom: -4px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid yellow;
    }

  .buttonxv {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-radius: 15px;
            width: 45%;
               font-family: "Garamond", serif;
            cursor: pointer;
            margin: 5 5px;
            font-size:20px;
            font-weight: bold;
        }
 
            
            .containerxv {
           
            background-color: #21252E;
            padding: 5px;
            border-radius: 10px;
            width: 97%;
            }
    .headerxv {
           
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: #121212;
            padding: 3px;
            border-radius: 5px;
            margin-bottom: 5px;
            height:40px;
            font-size:15px;
            font-style:bold;
            
        }
            .vatontx{
            display: block;
            font-weight:bold;
            font-size:40px;
          /*  width:95%; */
            display: block;
            
            padding: 5px 5px 0; 
           
           border-radius:5px;
           background:#333;
           width:97.5%;
           height:90%;
            
            
}
 
        .sub-headerxv {
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: aqua;
            padding: 1px;
            border-radius: 5px;
            margin-bottom: 5px;
            height:30px;
            font-size:15px;
            font-style:bold;
        }
            
   
   .vatonsd{padding: 10px; 
           font-size:15px; 
           border-radius:5px;
           background:#333;
           width:50%;
           flex-direction: column;
            justify-content: center;
            align-items: center;
       display:flex;
   }
    
           
            .diginp{font-family: serif; font-size: 15px; }
   .vatondwe{font-size:10px;}
            
            .adapopup {
            display:block;
            position: absolute;
            top:82px;
            left: 115px;
            
            height: 100%;
  justify-content: center;
            align-items: center;
            opacity: 1;
                        z-index: 99;
                   }
            
#dropdown-menu a{
            font-weight: bold;
            border-bottom: 0.5px solid #ddd; 
}
       #underrsn  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #DF0041;
                    
        }
   
            #overrsn  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #43B825;
                    
        }

            
#dropdown-menu a.selected {
            background-color: #FF6200; /* Light blue */
            color: #FFFFFF; 
  font-style: bold;
}
        /* Popup content with green 5px border */
        .adapopup-content {
            background: transparent;
            padding: 3px;
                    font-weight: bolder;
                    font-family: serif;
            border-radius: 8px;
            height:4px;
               justify-content: center;     
            width: 150px;
            border-radius: 5px;
            text-align: center;
      }

        /* Show popup */
        .adapopup.show {
            display: flex;
            opacity: 1;
        }

        .adapopup.show .adapopup-content {
            transform: scale(1)
        }
            #current-price{ font-size: 20px;font-weight: bolder;}
#adaPopup{display: none}
}

/*end of         ##############max*/
    



    @media (max-width: 600px) {
      .grid-container {
        grid-template-columns: 1fr; /* Stack panels on smaller screens */
      }
  .top-bar {
        flex-direction: column;
        align-items: stretch;
      }

      .icon-button {
        justify-content: center;
      }

      .top-bar input,
      .top-bar select,
      .top-bar button,
      .panel input,
      .panel select,
      .button-grid button,
      .icon-button button {
        transition: all 0.2s ease;
      }

      body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      input:focus,
      select:focus {
        outline: none;
        box-shadow: 0 0 5px orange;
      }

      
      }
#sntiper {
  display: block;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

}



@media (min-width: 790px) {
  body {
                margin: 0px;
              background-color: #121212;
            color: white;
             width:100%; 
          
    
  }
              .navbar {
                          
                          border-bottom: 2px solid #333; 
            display: flex;
            background-color: #21252E;
            padding: 0px 0px;
            align-items: center;
            justify-content: space-between;
             width:100%;
             height:50px;
        }
            #prdct{font-weight:bold;font-size:25px; flont-family:serif; display:none;}
             .menu-icon {
            font-size: 30px;
            color: white;
            cursor: pointer;
        }
        .right-section {
            display: flex;
            align-items: center;
            gap: 7px;
        }
            .account {
            padding: 10px;
                        font-family: serif;
                        font-weight: bold;
                        font-size: 20px;
            }
            .derel-dropdown-button {
            padding: 10px 20px;
            font-size: 25px;
            background-color: #21252E;
            border: 2px solid #007bff;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
            cursor: pointer;
            display: flex;
            align-items: center;
            font-weight: bolder;
            
            outline: none;
            transition: box-shadow 0.2s ease, border 0.2s ease;
            border-radius: 5px;
        }
         
             .button-container {
            display: flex;
            gap: 10px; 
                         width:20px;
                 height: 30px; /* Space between buttons */
        }
               .btn {
            border: none;
            border-radius: 5px;
            padding: 0px 20px;
            font-size: 12px;
            cursor: pointer;
                    font-weight:Bold;
                  font-family: san-serif; 
            transition: background-color 0.3s;
        }
            .demori{display: flex;
            gap: 2%;
                        padding: 10px 2%; 
                        width:96%;
                        height: 50px;
                        
                        
}
            
            
        .dropbtn {
            background-color: #333;
            color: white;
            padding: 0px 6px;
            font-size: 15px;
            border: 2px solid #007bff;
              cursor: pointer;
            border-radius: 5px;
            
               font-weight: bold;     
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
            
        }
            #current-price{font-size: 12px; padding: 0 0 20px;color:red}
            
              .buttonpop {
            margin:10px; /* Increase margin */
            padding: 0px 10px; /* Increase padding */
            background-color: #007BFF;
            color: white;
            border: none;
            font-size:25px;
              font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
               .circle-container {
            background-color:  #21252E; /*background */
            padding: 0px;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* Ensure the circles are centered */
            align-items: center; /* Center vertically */
            height:200px;
            flex-wrap: wrap; /* Wrap circles properly */
            width: 100%; /* Ensure the container spans the full width */
            box-sizing: border-box; /* Include padding in the width calculation */
        }
            #circle-continer {
            background-color:  #21252E; /*background */
            padding: 1px;
            border-radius: 10px;
            display: flex;
            justify-content: center; /* Ensure the circles are centered */
            align-items: center; /* Center vertically */
            height:250px;
            flex-wrap: wrap; /* Wrap circles properly */
            width: 100%; /* Ensure the container spans the full width */
            box-sizing: border-box; /* Include padding in the width calculation */
        }
            
            .digit-box {
            text-align: center;
            padding: 1px;
            width: 10px;
            height: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
                        
        }
                .digit-container {
        grid-template-columns: repeat(5, 1fr); /* 5 columns, 2 rows */
        gap: 3px; /* Adjust spacing */
        justify-content: center;
    }


    .digit-box {
        width: 70px; /* Adjusted size */
        height: 70px;
    }

    .circle {
        width: 60px;
        height: 60px;
    }

    .circle::after {
        width: 48px;
        height: 48px;
    }

    .digit-number {
        font-size: 1.2em;
    }

    .digit-percent {
        font-size: 0.8em;
    }

    .pointer {
        bottom: -4px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 8px solid yellow;
    }

  .buttonxv {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-radius: 15px;
            width: 45%;
               font-family: "Garamond", serif;
            cursor: pointer;
            margin: 5 5px;
            font-size:20px;
            font-weight: bold;
        }
 
            
            .containerxv {
           
            background-color: #21252E;
            padding: 5px;
            border-radius: 10px;
            width: 97%;
            }
    .headerxv {
           
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: #121212;
            padding: 3px;
            border-radius: 5px;
            margin-bottom: 5px;
            height:40px;
            font-size:15px;
            font-style:bold;
            
        }
            .vatontx{
            display: block;
            font-weight:bold;
            font-size:40px;
          /*  width:95%; */
            display: block;
            
            padding: 5px 5px 0; 
           
           border-radius:5px;
           background:#333;
           width:97.5%;
           height:90%;
            
            
}
 
        .sub-headerxv {
            display: block;
            justify-content: space-between;
            align-items: center;
            background-color: aqua;
            padding: 1px;
            border-radius: 5px;
            margin-bottom: 5px;
            height:30px;
            font-size:15px;
            font-style:bold;
        }
            
   
   .vatonsd{padding: 10px; 
           font-size:15px; 
           border-radius:5px;
           background:#333;
           width:50%;
           flex-direction: column;
            justify-content: center;
            align-items: center;
       display:flex;
   }
    
           
            .diginp{font-family: serif; font-size: 15px; }
   .vatondwe{font-size:10px;}
            
            .adapopup {
            display:block;
            position: absolute;
            top:82px;
            left: 115px;
            
            height: 100%;
  justify-content: center;
            align-items: center;
            opacity: 1;
                        z-index: 99;
                   }
            
#dropdown-menu a{
            font-weight: bold;
            border-bottom: 0.5px solid #ddd; 
}
       #underrsn  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #DF0041;
                    
        }
   
            #overrsn  {
            animation: borderAnimation 4s infinite linear;
position: relative;
            border: 0px solid;
                    font-weight: bold;
                  font-size: 15px;
                    height: 40px;
            background-color: #43B825;
                    
        }

            
#dropdown-menu a.selected {
            background-color: #FF6200; /* Light blue */
            color: #FFFFFF; 
  font-style: bold;
}
        /* Popup content with green 5px border */
        .adapopup-content {
            background: transparent;
            padding: 3px;
                    font-weight: bolder;
                    font-family: serif;
            border-radius: 8px;
            height:4px;
               justify-content: center;     
            width: 150px;
            border-radius: 5px;
            text-align: center;
      }

        /* Show popup */
        .adapopup.show {
            display: flex;
            opacity: 1;
        }

        .adapopup.show .adapopup-content {
            transform: scale(1)
        }
            #current-price{ font-size: 20px;font-weight: bolder;}
#adaPopup{display: none}
}