.curve-graph-container { display: flex; flex-direction: column; align-items: center; // width: 100vh; margin: 1px 0rem; font-family: 'Gilroy' !important; .grtooltip { background-color: #e33333; } .benchmark-labels { display: flex; flex-direction: column; // justify-content: space-between; gap: 11px; height: inherit; font-size: 11px; text-align: right; margin-right: 10px; font-weight: 500 !important; } .ttlAmntMas { display: flex; flex-direction: column; font-size: 10px; } .ttlAmnt { font-size: 35px; font-family: 'Gilroy'; color: #242424; font-weight: 600; } .benchmark-label { color: #333; font-weight: 600 !important; } .curve-graph-container svg { // background: repeating-linear-gradient( // 90deg, // rgb(255, 255, 255), // rgb(255, 255, 255) 10px, // #ecb7b7 1px, // #f8e3e3 11px // ); // background-image: linear-gradient(90deg, #f8e3e3 20%, #ffffff 20%, #ffffff 50%, #f8e3e3 50%, #f8e3e3 70%, #ffffff 70%, #ffffff 100%); // background-size: 10.00px 10.00px; background-image: linear-gradient( 90deg, #ebebeb 20%, #ffffff 20%, #ffffff 50%, #ebebeb 50%, #ebebeb 70%, #ffffff 70%, #ffffff 100% ); background-size: 10px 10px; // border: 1px solid #ccc; position: relative; } .labels { display: flex; justify-content: space-between; width: inherit; margin-top: 10px; .labelss { font-size: 11px; font-family: 'Poppins'; color: #000000; font-weight: 400; } } .tabs { display: flex; margin-bottom: 20px; flex-direction: column; row-gap: 0.5rem; width: max-content; button { .valperamt { display: flex; align-items: center; flex-direction: column; width: 100%; a { font-size: 10.5px; text-wrap: nowrap; } span { font-size: 19px; font-weight: 600; width: 99%; text-overflow: ellipsis; overflow: hidden; } } } } .tab { display: flex; align-items: center; // margin-right: 15px; padding: 5px 10px; cursor: pointer; border: none; font-family: 'Gilroy'; background: none; font-size: 16px; &.active { // font-weight: bold; color: #e33333; // border-bottom: 2px solid #333; // Example of active tab styling } &:hover { opacity: 0.8; // Add some hover effect } } .inrKtabMaster { display: flex; } .inrKtab { display: flex; align-items: center; // margin-right: 15px; padding: 5px 10px; height: 30px; cursor: pointer; background-color: #ffffff3f; border-radius: 6px; border: none; font-family: 'Gilroy'; font-size: 14px; font-weight: 500; &.active { // font-weight: bold; color: #e33333; background-color: #e333331c; // border-bottom: 2px solid #333; // Example of active tab styling } &:hover { opacity: 0.8; // Add some hover effect } } text { font-size: 13px; } .area { animation: rise 1s forwards; /* Animate background fill */ } } @keyframes rise { from { transform: translateY(100%); /* Start from the bottom */ } to { transform: translateY(0); /* Rise to the final position */ } } .curve { animation: draw 3s forwards; /* Animate curved line drawing */ } @keyframes draw { from { stroke-dashoffset: 1000; /* Start from the right */ } to { stroke-dashoffset: 0; /* Complete the drawing */ } } @media (max-width: 768px) { .curve-grp-head { justify-content: unset !important; gap: 5rem; } .cruvGrphSwitchtabs { flex-wrap: wrap; row-gap: 1rem; .tabs { flex-direction: row !important; } } } @media (max-width: 500px) { .curve-grp-head { flex-direction: column !important; gap: 0.5rem; align-items: flex-start !important; } }