.card-header i {
 vertical-align: 1px;
 font-size: 1rem;
 }

 .section .section-header .section-header-breadcrumb {
 flex-basis: 0;
 }

 .wizard-step-active {
 cursor: pointer;
 }

 .btn-quantumult {
 background: linear-gradient(to right, black, black) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px rgba(0, 0, 0, 0.38);
 margin-bottom: 16px;
 }
 
 .btn-shadowrocket {
 background: linear-gradient(to right, #3671b9, #3671b9) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px #3671b99a;
 margin-bottom: 16px;
 }
 
 .btn-kitsunebi {
 background: linear-gradient(to right, #f2885b, #e83c9a) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 4px #ff567885;
 margin-bottom: 16px;
 }
 
 .btn-ssr {
 background: linear-gradient(to right, #e780a3, #e780a3) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px #e780a2b0;
 margin-bottom: 16px;
 }
 
 .btn-v2ray {
 background: linear-gradient(to right, #df268f, #a73178) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px #df268f63;
 margin-bottom: 16px;
 }
 
 .btn-ss {
 background: linear-gradient(to right, #187abb, #187abb) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px #3671b99a;
 margin-bottom: 16px;
 }
 
 .btn-surge {
 background: linear-gradient(to right, #5c97f0, #b769f3) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px #8d7cfab2;
 margin-bottom: 16px;
 }
 
 .btn-clash {
 background: linear-gradient(to right, #49BCFC, #3B92F8) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px rgba(73, 189, 252, 0.521);
 margin-bottom: 16px;
 }
 
 .btn-surfboard {
 background: linear-gradient(to right, #303030, #303030) !important;
 color: white !important;
 border-color: transparent;
 border: none;
 box-shadow: 0 2px 6px #3030306e;
 margin-bottom: 16px;
 }
 
 .wizard-steps .wizard-step .wizard-step-label {
 text-transform: none;
 }
 
 @media screen and (max-width: 1280px) and (max-height: 720px) {
 body {
 zoom: 0.75; /* Zoom out for smaller screens */
 }
 }

 #confettiButton1, #confettiButton2, #confettiButton3 {
 cursor: pointer;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 }

 .confetti-piece {
 position: absolute;
 width: 30px;
 height: 30px;
 background-size: cover;
 opacity: 1;
 transition: transform 1s ease, opacity 1s ease;
 z-index: 1000;
 }

 /* Avatar *************************************************************************************/
 div.Avatar {
 background-repeat: no-repeat;
 background-size: cover;
 background-color:#f1ecae;
 margin: 5px;
 width: 225px;
 height: 300px;
 border: solid 5px #a6daff;
 border-radius: 10px;
 display: flex;
 align-items: center;
 padding: 5px;
 box-sizing: border-box;
 position: relative;
 }
 
 .text-overlay, .slots-overlay {
 position: absolute;
 width: 100%;
 text-align: center;
 color: #cbdbfc;
 font-weight: bold;
 }
 
 .text-overlay {
 top: -50px;
 text-shadow:
 -1px -1px 0 #1a467b,
 0 -1px 0 #1a467b,
 1px -1px 0 #1a467b,
 1px 0 0 #1a467b,
 1px 1px 0 #1a467b,
 0 1px 0 #1a467b,
 -1px 1px 0 #1a467b,
 -1px 0 0 #1a467b;
 }
 
 .slots-overlay {
 bottom: -70px;
 display: flex;
 justify-content: center;
 gap: 20px;
 }
 
 .slot {
 width: 50px;
 height: 50px;
 margin: 5px -5px;
 padding: 5px;
 border: solid 2px black;
 text-align: center;
 border-radius: 5px;
 color: #daa252;
 background: #f2edaf;
 }
 
 .chart-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-right: 10px;
 }
 
 .flexer {
 width: 375px;
 }
 
 .bag-header {
 padding: 10px;
 background-color: #f5f5f5;
 border-bottom: 1px solid #ccc;
 }
 
 .bag-body {
 display: flex;
 align-items: flex-start;
 }

 /* Inventory **************************************************************************************/
 .container {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 }

 .grid-container {
 display: grid;
 grid-template-columns: repeat(12, 50px); /* slot number */
 grid-template-rows: repeat(4, 50px);
 gap: 2px;
 padding: 10px;
 border: solid 3px #81c9f7;
 background-color: #002c51;
 border-radius: 5px;
 }

 .bag-container {
 display: grid;
 grid-template-columns: 1fr;
 gap: 2px;
 padding: 10px;
 border: solid 3px #81c9f7;
 background-color: #002c51;
 border-radius: 5px;
 }

 .grid-item, .bag-slot {
 width: 50px;
 height: 50px;
 border: 2px solid #1b293c;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 14px;
 border-radius: 5px;
 background-color: #324759;
 position: relative;
 }

 .grid-item img, .bag-slot img, .special-slot img {
 width: 40px;
 height: 40px;
 object-fit: cover;
 }

 .tooltiptext {
 visibility: hidden;
 width: 140px;
 background-color: rgba(5, 32, 63, 0.9);
 color: #fff;
 text-align: center;
 padding: 5px 0;
 border-radius: 6px;
 position: absolute;
 z-index: 1;
 bottom: 100%;
 left: 50%;
 margin-left: -70px;
 opacity: 0;
 transition: opacity 0.3s;
 border: 1px solid #0f3b6a;
 }

 .tooltiptext .item-name {
 font-weight: bold;
 display: block;
 }

 .tooltiptext .item-description {
 font-size: 12px;
 display: block;
 }

 .grid-item:hover .tooltiptext, .bag-slot:hover .tooltiptext {
 visibility: visible;
 opacity: 1;
 }

 .grid-item:hover, .bag-slot:hover {
 background-color: rgba(255, 255, 255, 0.2);
 }

 .selected {
 background-color: rgba(255, 255, 255, 0.5) !important;
 }
 .item-img{
 width :'40px';
 height:'40px';
 object-fit : 'cover';
 }