.mfloginform{border-radius:40px;border:5px solid #fff;box-shadow:inset 2px 2px 5px rgba(0,0,0,0.2), 2px 2px 5px rgba(0,0,0,0.5); }
        .added .btn_addtocart{filter:grayscale(1);}
        .mytab2 li:not(:last-child){border-right:1px solid #ccc;}
        
        .mytab2 .tabbutton{background:transparent;border:0;border-bottom:3px solid transparent;width:100%;outline:0;}
        .mytab2 .tabbutton.active{color:var(--color1);border-bottom:3px solid var(--color1);}
        
        .shownewcart1{position:absolute;right:20px;transform:translateY(-40%);}
        .shownewcart1 .cart-icon{transition:all 0.3s;background:var(--color1);color:#fff;border-radius:1rem;font-weight:600;font-size:1rem;padding:0.4rem 1.2rem;}
       
        .scheme-cartname{width:38%;}
        .separator {min-width: 95px;}
       
        
        @media (max-width:768px)
        {
            .mytab2 .tabicon,.mytab2 .tab-text{font-size:0.8rem;}
            .shownewcart1{position:fixed;bottom:15px;right:unset;left:20px;z-index:99;}
            
            .scheme-name, .scheme-cartname {
                width: 100%;
                margin-bottom: 10px;
            }
        }
         .tab-button {
      padding: 2px 8px;
    margin: 4px;
    border: none;
    background-color: #ffffff;
    color: #000;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s, box-shadow 0.3s;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }

    .tab-button:hover {
        background-color: #dcdcdc;
    }
     .tab-button2 {
      padding: 2px 8px;
    margin: 4px;
    border: none;
    background-color: #000;
    color: #ffffff;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s, box-shadow 0.3s;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
    }
    
    .tab-button2:hover {color: #ffffff;background-color: #000;border:none;cursor:default;}
    .radio-list{background:#222;border-radius:50px;}
    .radio-list label{clip-path:unset;padding:4px 25px;color:#fff;border-radius:0;font-size:18px;min-width:120px;text-align:center;}
    .radio-list li:first-child label{border-radius:50px 0 0 50px;} 
    .radio-list li:last-child label{border-radius:0 50px 50px 0;} 
    .radio-list input:checked + label:before{content:none;}
    @media (max-width:420px)
    {
        .radio-list label{padding:4px 10px; font-size:16px;min-width:110px;}
    }
    
    
    .card {
      border-radius: 20px;
    }
    .card-header {
      border-radius: 20px 20px 0 0 !important;
    }
    .tab-radio .btn {
      border-radius: 20px;
      width:120px;
      padding: 5px 25px;
      margin: 1px;
      font-weight: 600;
      color:#fff;
      background:#111;
    }
    .range-box {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .range-box input[type="number"] {
      width: 120px;
      text-align: right;
    }
    /* Custom filled range style */
    input[type=range] {
      height: 6px;
      width:100%;
      border-radius: 5px;
      background: linear-gradient(to right, #0d6efd 0%, #0d6efd 0%, #dee2e6 0%, #dee2e6 100%);
      appearance: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 0 2px rgba(0,0,0,0.7);
    }
    input[type=range]::-moz-range-thumb {
      height: 25px;
      width: 25px;
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 0 2px rgba(0,0,0,0.7);
    }
    
    /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{background-color:#ec2723;border-color:#ec2723;}
.btn-outline-primary{border-color:#222;color:#222;}
.btn-check:not(:checked)+.btn:hover{border-color:#222;color:#fff;background:#222;}

.sip-container {
      display: flex;
      align-items: center;
      gap: 40px;
      font-family: Arial, sans-serif;
    }

    .donut-chart {
      width: 150px;
      height: 150px;
      overflow: visible; /* prevent trimming */
    }

    .legend {
      font-size: 14px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }

    .legend-color {
      width: 14px;
      height: 14px;
      margin-right: 8px;
    }

    .legend-text strong {
      display: block;
      font-size: 16px;
      margin-top: 3px;
    }
    
     .ui-widget.ui-widget-content {
                border-radius: 1rem;
                padding: 1rem 0;
            }

            .ui-menu-item {
                font-size: 0.9rem;
                font-weight: 600;
            }

            .ui-menu-item:not(:last-child) {
                border-bottom: 1px solid rgba(0,0,0,0.1);
            }

            .ui-menu .ui-menu-item-wrapper {
                padding: 8px 1.5em 8px 1em;
            }

            .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
                background: var(--color1);
                border-color: transparent;
                font-weight: 600;
            }
    
    .loadersmall {
            border: 5px solid #f3f3f3;
            -webkit-animation: spin 1s linear infinite;
            animation: spin 1s linear infinite;
            border-top: 5px solid #555;
            border-radius: 50%;
            width: 50px;
            height: 50px;
        }
        
        @keyframes spin
        {
            0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }