* {
    font-size: 14px;
    font-family: 'Open Sans', sans-serif !important;
}

.custom-cursor {
    position: fixed;
    width: 12px; /* Size of red circle */
    height: 12px;
    background-color: #E3473B !important;
    border: 1px solid #E3473B !important; /* Red circle */
    border-radius: 50%;
    pointer-events: none; /* Ensures it doesn’t interfere with clicks */
    transform: translate(-50%, -50%);
    z-index: 1500;
    opacity: 0.7;
}

.clsPageTitle {
    padding-top: 15px;
    padding-bottom: 5px;
    margin-left: 0px;
    width: auto;
}

.clsPageTitleText {
    font-size: 25px;
    color: #000;
}

.clsPageDesc {
    padding-top: 25px;
    /*padding-bottom: 30px;*/
    padding-bottom: 6px;
    margin-left: 0px;
    width: auto;
}

.clsPageDescText {
}

.clsPageNotice {
    padding-top: 25px;
    padding-bottom: 30px;
    margin-left: 1px;
    width: auto;
}

.clsPageNoticeText {
    font-size: 84%;
    font-style: italic;
    color: #908D8E;
}

.clsPageButtonGroup {
    padding-right: 2px;
}

.clsPageButton
{
    width: 40px !important;
    margin-left: 10px;
}

.clsSection {
    font-size: 17px;
    padding-top: 25px;
    padding-bottom: 15px;
    font-weight: bold;
    color: #585859;
    padding-left: 8px;
}

.clsMenuItem {
    color: #585859 !important;
    padding-left: 8px;
    padding-right: 10px;
    padding-top: 10px;
    cursor: pointer;
    font-size: 14px;
}

.clsMenuItem:hover {
    color: #E3473B !important;
    text-decoration: none !important;
}

.clsMenuItemActive
{
    font-weight: bold;
    text-decoration: underline !important;
}

.clsLinkItem {
    color: #585859 !important;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}

.clsLinkItem:hover {
    color: #E3473B !important;
    text-decoration: none !important;
}

.clsLinkItemActive {
    font-weight: bold;
    text-decoration: underline !important;
}

.clsMemberOnlyImg {
    width: 115px;
    height: 200px;
}

.clsMemberOnlyImgCell {
    text-align: center;
}

.clsSystemName {
    font-size: 20px !important;
    margin-left: 7px !important;
    margin-right: 3px !important;
    white-space: nowrap !important;
    color: #585859 !important;
    padding-top: 3px !important;
}

.clsSystemName:hover {
    text-decoration: none !important;
}

.clsSystemNameActive {
    font-weight: bold;
}

.clsContent, .clsHeader {
    margin: auto;
    width: 99%;
    max-width: 1200px !important;
}

.clsHeader .mud-image
{
    margin-top: 3px;
}

.clsContent {
    min-height: 500px;
}

.clsContentCell
{
    padding-left: 0px !important;
}

.clsTopBar {
    height: 50px;
    padding-top: 0px;
    background: #fff;
}

.clsMainContainer {
    padding-left: 0px;
    padding-right: 0px;
}

.mud-avatar {
    background-color: transparent;
    height: 90px !important;
    width: 110px !important;
    border-radius: 0%;
}

.clsCompareLogo {
    background-color: transparent;
    height: 39px !important;
    width: 50px !important;
    position: relative;
    top: 13px;
    margin-right: 5px;
    margin-top: -20px;
}

.clsAvatarLarge {
    height: 200px !important;
    width: 250px !important;
}

.clsAvatarLarge img {
    height: 180px !important;
    width: 250px !important;
}

.clsIPOCard {
    margin: 5px 5px 5px 0px;
    min-height: 680px;
}

.clsIPOCard .mud-tabs-panels {
    min-height: 495px;
    padding-bottom: 10px !important;
}

.clsIPOCard .mud-card-header {
/*    background-color: #fdfdfd;
    background-image: linear-gradient(#fdfdfd, #fff);*/
    padding: 7px 16px 5px 16px;
}

.clsIPOCard .mud-typography-h6 {
    font-size: 15px;
    margin-bottom: 0px;
}

.clsIPOCard .mud-grid-item {
    padding-left: 0px;
    padding-right: 10px;
    padding-top: 10px;
}

.clsIPOContent {
    padding-top: 2px !important;
}

.clsIPOCardDetail .clsSection {
    padding-top: 40px;
    padding-bottom: 30px;
    margin-left: -8px;
}

.clsIPOCardDetail .clsSection:first-child {
    padding-top: 0px;
}

.clsApplyGrid .mud-grid-item {
    padding-left: 0px;
    padding-top: 15px;
}

.clsCompanyName {
    font-size: 18px;
    color: #585859;
}

.clsCompanyNameBold {
    font-weight: bold;
}

.clsStockName {
    font-size: 15px;
    color: #908D8E;
}

.clsCardLabel {
    color: #908D8E;
}

.clsCardText {
    color: #585859;
}

.clsCardText .mud-input {
    color: #585859;
}

.clsIssuePrice {
    font-size: 18px;
    color: #585859;
    width: fit-content;
}

.clsActivity {
    color: #585859;
    font-size: 14px;
    margin-top: 30px;
    margin-bottom: 15px;
    padding-right: 15px;
    line-height: 19px !important;
    width: 99%;
    white-space: pre-line !important;
}

.clsMarketImg
{
    width: 90px;
    height: 33px;
}

.clsAceImg {
    width: 90px;
    height: 33px;
}

.clsMarketGrid {
    margin-top: 0px;
    margin-left: 0px;
    height: 33px;
}

.mud-tab {
    text-transform: none;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 0px solid #ddd;
    color: #585859;
    justify-content: flex-start;
    min-width: 92px !important;
    opacity: 0.8;
    font-size: 14px;
}

.mud-tab:not(.mud-tabs-vertical), .mud-tabs-toolbar:not(.mud-tabs-vertical) {
    min-height: 38px;
}

.mud-tabs-toolbar:not(.mud-tabs-vertical), .mud-tabs-tabbar {
    height: 38px;
}

.mud-tab svg {
    margin-top: 0px;
}

.clsTabFirst {
/*    border-top: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;*/
}

.clsTabLast {
    border-top: 1px solid #ddd !important;
    border-left: 1px solid #ddd !important;
    border-right: 1px solid #ddd !important;
}

.mud-tab-active {
    opacity: 1;
    /*    background-color: #ddd !important;
    background-image: linear-gradient(#eee, #fff);
    color: #908D8E !important;
    border-top-color: #ccc !important;*/

    background-color: #E3473B !important;
    background-image: linear-gradient(#E3473B, #E36161);
    color: #FFF !important;
    border-top-color: #E3473B !important;
    /*    background: #aaa;
    background-image: linear-gradient(#ddd, #aaa);
    color: #FFF !important;*/
    /*    background: #DF6666;
    background-image: linear-gradient(#DF6666, #DF635D);
    color: #FFF !important;*/
}

.mud-tab:not(.mud-tab-active) svg {
    color: #585859 !important;
}

.mud-tab-slider {
    background-color: #ddd !important;
    height: 1px !important;
}

.mud-tabs-tabbar
{
    border-bottom: 1px solid #eee;
}

.clsShareDetail {
    white-space: pre-line !important;
    font-size: 14px;
    line-height: 18px !important;
    color: #585859;
    padding-right: 15px !important;
    padding-top: 30px !important;
    margin-bottom: 15px;
}

.clsNote {
    white-space: pre-line !important;
    color: #908D8E;
    font-size: 14px;
    padding-left: 10px;
/*    line-height: 22px !important;*/    
    margin-top: -20px;
    font-weight: bold;
}

.clsNoteBackground {
    margin-top: -8px;
    min-height: 44px;
    justify-self: center;
    align-content: center;
    background-color: #fff0ea;
}

.clsNoteBackground .clsNote {
    /*color: #ff1000;*/
    color: #ff2525;
    padding-bottom: 4px;
}

.clsPaymentProcessingNoteBackground {
    /*margin-top: -8px;*/
    margin-left: -10px;
    margin-right: 10px;
    padding-left: 21px;
    min-height: 135px;
    justify-self: center;
    align-content: center;
    background-color: #fff0ea;
}

.clsPaymentProcessingTitle {
    font-size: 21px;
    text-shadow: 1px 0 0 currentColor;
}

.clsPaymentProcessingCompletedDate {
    font-size: 21px;
}

.clsPaymentProcessingInsufficientFundRemind {
    font-size: 18px;
    color: #ff2525;
}

.clsTimelineBlur {
    opacity: 0.8;
}

.clsTimelineBlur .mud-timeline-item-dot {
    height: 10px;
    width: 10px;
}

.clsFileName {
    font-size: 15px;
    color: #0256C2 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(2, 86, 194, 0.5) !important;
}

.clsLink {
    color: #0256C2 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(2, 86, 194, 0.5) !important;
}

.clsFileName:hover, .clsLink:hover {
    color: #E3473B !important;
    /*    text-decoration: none !important;*/
    text-decoration-color: rgba(227, 71, 59, 0.5) !important;
}

.clsFileSize {
    font-size: 12px;
    color: #908D8E;
    font-style: italic;
}

button, .mud-button {
    text-transform: none !important;
}

.clsFileIcon
{
    margin-bottom: -12px !important;
    position: relative;
    left: 5px;
}

.clsFileCell .clsFileIcon {
    left: -10px;
}

.clsResearchIcon {
    margin-bottom: -8px !important;
    margin-right: 10px !important;
}

.clsBursaImg {
    width: 20px;
    height: 20px;
    margin-bottom: -7px !important;
    margin-right: 10px !important;
}

.clsNotFoundImg {
    width: 375px;
    height: 231px;
    margin-top: 50px;
}

.clsErrorImg {
    width: 350px;
    height: 297px;
    margin-top: 20px;
}

.clsError
{
    height: 500px;
}

.clsError p {
    font-size: 22px;
    padding: 100px 50px;
    line-height: 35px;
}

.clsError a {
    font-size: 22px;
}

.clsErrorPaper {
    width: 1200px;
    margin: auto;
}

/*footer start*/
.clsFooterSpace {
    height: 200px;
}

.clsFooterBar {
    background: #161a1d;
    color: #8c8c8c;
    font-size: 12px;
    width: 100%;
    margin: 0px;
}

.main-footer, .footer-bottom {
    display: block;
    width: 100%;
}

.main-footer .container, .footer-bottom .container {
    max-width: 1140px;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}

.main-footer {
    padding: 15px 0;
    background: #2f383d;
    color: #FFFFFF;
    border-top: 3px solid #c33b32;
    margin: 0px;
}

.main-footer a {
    color: #FFFFFF;
}

.main-footer p {
    font-size: 10px;
    color: #FFFFFF;
    margin: 12px 0;
    line-height: 12px;
}

.main-footer h3 {
    font-weight: bold;
    margin: 0;
    margin-bottom: 16px;
    font-size: 14px;
}

.main-footer .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}

.main-footer .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}

.main-footer .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}

.main-footer .get-in-touch li {
    list-style-type: none;
    margin-bottom: 10px;
    font-size: 12px;
}

.main-footer .get-in-touch li svg {
    font-size: 10px;
    margin-right: 10px;
    translate: 0px 0px;  /* sometimes the logo might went a bit higher or lower in y-axis, can use the second argument to adjust, e.g. 0px 2px*/
}

.clsFooterSvg {
    max-height: 11px;
    max-width: 11px;
}

.footer-bottom {
    padding: 10px 10px;
    background: #161a1d;
}

.footer-bottom a, .get-in-touch ul a {
    color: #c33b32;
    font-size: 12px;
}

.footer-bottom a:hover, .get-in-touch ul a:hover {
    color: #FFFFFF;
}

.footer-bottom p {
    color: #8c8c8c;
    margin: 0;
    font-size: 12px;
}

.footer-bottom u {
    font-size: 12px;
}

/*footer end*/

.clsButton {
    background: #E3473B;
    background-image: linear-gradient(#E3473B, #E36161);
    color: #FFF;
    border: 1px solid #E36161;
    height: 35px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 85px;
    font-weight: bold;
}

.clsButton span {
    font-size: 13px;
}

/* when hover is supported */
@media (hover: hover) {
    .clsButton:hover {
        background: #FFF;
        color: #E3473B;
        border: 1px solid #E36161;
    }
}


.clsButtonLong {
    width: 120px !important;
}

.clsGetStarted {
    width: 130px !important;
    white-space: nowrap;
}

.clsViewMoreButton a {
    /*width: 130px !important;*/

    min-width: 130px !important;
}

.clsViewMoreText .mud-button-label{
    text-wrap: nowrap;
    justify-content: flex-start;
}

.clsButtonApply {
    width: 150px !important;
    text-wrap: nowrap;
}

.clsButtonVLong {
    width: 250px !important;
}


.clsGreenButton {
    background: #049621;
    background-image: linear-gradient(#049621, #06C42C);
    border: 1px solid #06C42C;
    color: #FFF;
    font-weight: bold;
    width: 85px;
}

@media (hover: hover) {
    .clsGreenButton:hover {
        background: #FFF;
        color: #049621;
        border: 1px solid #049621;
    }
}

.clsGreenButton.clsCompareIPOApply {
    width: 100%;
    max-width: 85px;
}

.clsGreyButton {
    background: #888;
    background-image: linear-gradient(#888, #AAA);
    border: 1px solid #999;
    color: #FFF;
    font-weight: bold;
    width: 85px;
}

@media (hover: hover) {
    .clsGreyButton:hover {
        background: #FFF;
        color: #888;
        border: 1px solid #999;
    }
}

.clsWhiteButton {
    background: #F0F0F0;
    background-image: linear-gradient(#F0F0F0, #FFF);
    border: 1px solid #CCC;
    color: #888;
    font-weight: bold;
    width: 85px;
}

@media (hover: hover) {
    .clsWhiteButton:hover {
        background: #888;
        color: #FFF;
        border: 1px solid #AAA;
    }
}

.clsApplyButton {    
    margin-left: 10px;
}

.clsApplyButton span {
    word-break: normal;
}

.clsApplyButton svg {
    height: 25px;
    width: 25px;
}

.clsBackButtonPanel {
    top: 0px;
    position: relative;
}

.clsApplyButtonPanel {
    top: -40px;
    position: relative;
}

.clsGridButtonPanel {
    top: -110px;
    left: 720px;
    width: 230px;
    position: relative;
}

.clsIPOGridLogo {
    background-color: transparent;
    height: 50px !important;
    width: 60px !important;
    position: relative;
    top: 5px;
}

.clsShariahGrid .clsShariahImg {
    height: 13px;
    width: 13px;
}

.clsIPOGrid {
    padding: 5px;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    margin: 0px;
}

.clsIPOGridHeader {
    padding: 5px 5px 5px 5px;
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: #f3f3f3;
}

.clsIPOGrid, .clsIPOGridHeader {
    margin-left: 0px;
}

.clsIPOGrid .mud-grid-item, .clsIPOGridHeader .mud-grid-item {
    padding: 5px 2px 5px 2px;
}

.clsSwitchViewButton
{
    position: relative;
    top: -30px;
    /*left: 5px;*/
}

.clsSVBIPOList {
    top: 0px;
}

.clsSVBIPOCard {
    top: 0px;
}

.clsSVBFutureIPOList {
    top: 0px;
}

.clsSVBFutureIPOCard {
    top: 0px;
}

/*.clsIPOGrid:nth-child(odd) {
    background: #f3f3f3;
}*/
.clsIPOGridInternal {
    margin: 0px;
    width: 100%;
}

.clsIPOGridInternal .mud-grid-item {
    padding: 1px;

    /* for small screen */
    min-width: 60px;
}

.clsShariahGrid .mud-grid-item {
    min-width: unset;
}

.clsButtonPanelGrid
{
    min-width: 100px;
}

.clsButtonPanelGrid .clsApplyButton {
    position: relative;
    top: 5px;
    margin-left: 0px;
    width: 85px;
    margin-bottom: 10px;
}

.clsButtonPanelGrid .clsWhiteButton, .clsButtonPanelGrid .clsGreyButton {
    position: relative;
    top: 0px;
    width: 85px;
}

.clsButtonPanelGrid {
    margin: 0px;
}

.clsSwitchViewButton a {
    padding: 6px;
}

.clsButtonPanelGrid .clsApplyButton span, .clsButtonPanelGrid .clsWhiteButton span, .clsButtonPanelGrid .clsGreyButton span, .clsSwitchViewButton span {
    font-size: 13px;
}

.clsButtonPanelGrid .clsApplyButton svg {
    height: 20px;
    width: 20px;
}

.clsIPOCardDetail .mud-timeline {
    width: 500px;
}

.clsLoading {
    padding-top: 150px;
    padding-bottom: 500px;
}

.clsApplyGrid
{
    padding: 20px !important;
}

/*.clsLoginUser {
    padding-left: 0px;
    padding-top: 10px;
    color: #585859;
    font-size: 14px;
    font-weight: bold;
    min-width: 233px;
    text-align: center;
}*/

.clsLoginUser {
    padding-left: 0px;
    padding-right: 5px;
    /*padding-top: 10px;*/
    color: #585859;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    /*min-width: 233px;*/
    max-width: 233px;
    min-width: 150px;
    width:auto;
    flex-grow: 1;
    flex-shrink: 1;
    text-wrap: wrap;
    align-content: center;
}


/*.clsLogoutButton {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 3px;
    padding: 6px 0px;
    left: 18px;
    min-width: 85px;
}*/

.clsLogoutButton {
    /*margin-left: 20px;*/
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 3px;
    padding: 6px 6px;
    /*min-width: 85px;*/
    min-width: 147px;
    width: auto;
}

.clsLogoutButton .mud-button-icon-start {
    margin-left: 0px;
    margin-right: 4px;
}

.clsLoginButton {
    margin-left: 5px;
    margin-right: 0px;
    margin-top: 3px;
    padding: 6px 0px;
    /*left: 22px;*/
    min-width: 85px;
}

.mud-table-toolbar .mud-input-control-input-container {
    width: 400px;
}

.clsSelectShort {
    width: 200px !important;
    margin-top: -5px;
}

.clsSelectShort .mud-input-control-input-container {
    width: 200px !important;
}

.clsPaymentMethod .clsSelectShort .mud-input-control-input-container .mud-input-text {
    font-size: 16px;
}

.clsPaymentMethod .clsSelectShort .mud-input-control-input-container .mud-input-label {
    font-size: 16px;
    height: 18px !important;
}

.clsPaymentMethod .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol, .clsPaymentMethod .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, 1.5px) scale(0.875);
}

.clsSelect {
    width: 300px !important;
    margin-top: -5px;
}

.mud-select {
    max-width: 320px !important;
}

.clsCardText .mud-input-control-input-container {
    width: 300px !important;
}

.mud-step-label-content-title {
    font-size: 17px !important;
    font-weight: bold;
    color: #585859;
}

.mud-step-label .mud-typography-caption {
    font-size: 14px;
}

.mud-input-underline:before {
    border-bottom: 1px solid #ddd !important;
}

.mud-input-underline:after {
    border-bottom: 1px solid #DB8A88 !important;
}

.clsProspectusList
{
    padding: 15px;
    max-width: 500px;
}

.clsTotalFigure {
    font-size: 19px;
    color: #585859;
    font-weight: bold;
}

.mud-timeline-item
{
    padding-bottom: 40px !important;
}

.mud-timeline-item-opposite {
    margin-top: -5px;
}

.clsLoginCard .mud-card-header {
    padding: 0px;
    background-image: url('../img/prod-futures.gif');
    /*    background-image: url('../img/background2.jpg');*/
    background-size: cover;
    height: 250px;
}

.clsLoginCard .mud-card-content {
    background-image: linear-gradient(#E0E3EB, #fff);
}

.clsLoginCard {
    margin: auto;
    max-width: 550px;
    margin-top: 25px;
    padding: 0px 0px 25px 0px;
}

.clsLoginCard .mud-input {
    margin-bottom: 15px !important;
}

.mud-card-content .mud-grid:not(.clsTableList) {
    margin-left: 0px !important;
}

.clsLoginButtonMain {
    width: 100%;
    margin-top: 50px !important;
    margin-left: 0px !important;
    margin-right: 24px;
}

.clsSignInWelcome {
    color: #585859;
    font-size: 40px;
    margin-left: 50px;
    margin-top: -10px !important;
}

.clsSignIn {
    color: #585859;
    font-size: 30px;
    margin-top: 50px !important;
    margin-left: 50px;
}

.clsUsrIDTextbox .mud-input-slot {
    text-transform: uppercase;
}

.clsNoFound
{
    margin-top: 100px;
    text-align: center;
}

.clsNoFound span {
    font-size: 17px;
    color: #585859;
    top: -7px;
    left: 10px;
    position: relative;
}

.mud-timeline-item-content
{
    padding-left: 80px;
}

.mud-timeline-item-content h6, .mud-timeline-item-opposite h6 {
    font-size: 15px !important;
}

.mud-timeline-item-opposite p:not(.clsCountDown) {
    font-size: 15px !important;
    color: #585859;
}

.clsNoFoundFile {
    padding-left: 10px;
    padding-top: 5px;
    color: #908D8E;
    font-size: 13px;
}

.clsDocTabSpacing {
    margin-top: -20px !important;
}

.clsMemberOnly {
    margin-top: 0px;
    padding-bottom: 150px;
}

.clsMemberOnly p {
    color: #585859;
    font-size: 15px;
    text-align: center;
}

.clsMemberOnly .mud-link {
    font-weight: bold;
}

.mud-stepper-content {
    /*width: 95%;*/
}

.clsCompareCard .mud-grid {
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
}

.clsCompareCard .clsSection {
    padding-top: 20px;
    padding-bottom: 5px;
    margin-left: 3px;
}

.clsCompareCard .mud-paper .mud-grid:nth-child(even) {
    background: #f3f3f3;
}

.clsCompareCard .mud-grid {
    width: 100%;
}

.clsCompareCard .mud-grid-item {
    padding-left: 12px;
    padding-top: 12px;
}

.clsStickyCompareHeader {
    position: sticky !important;
    background: #fff;
    top: 50px;
    border-bottom: 1px solid #eee;
    z-index: 1000;
}

.clsSelectLarge {
    width: 600px !important;
    margin-top: -7px;
}

.clsSelectLarge .mud-input-control-input-container {
    width: 600px !important;
}

.clsSelectLarge .mud-input > input.mud-input-root, .clsSelectLarge div.mud-input-slot.mud-input-root {
    /*color: #594AE2;*/
    color: #C33B32;
}

.clsSelectLarge .mud-input-slot::placeholder {
    opacity: 0.65 !important;
}

.clsSelectLarge svg {
    /*color: #594AE2;*/
    color: #C33B32;
}

.clsSelectLarge .mud-input.mud-input-underline:before {
    /*border-bottom: 1px solid #594AE2;*/
    border-bottom: 1px solid #C33B32 !important;
}

.clsSelectLarge .mud-input.mud-input-underline:after {
    /*border-bottom: 2px solid #594AE2;*/
    border-bottom: 2px solid #C33B32 !important;
}

.clsCompletedDate {
    color: #C33B32;
}

.mud-list .clsCompareLogo {
    margin-right: 20px;
}

.clsTextInsideDropDown
{
    display: none;
}

.mud-list .clsTextInsideDropDown {
    display: block;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #908D8E;
    font-size: 15px;
}

.mud-list .clsTextInsideDropDown:not(:first-child) {
    border-top: 1px solid #ccc;
}

.clsFileSizeCell
{
    padding-top: 2px !important;
}

.clsIPOCard .mud-card-content {
    padding: 6px 16px 16px 16px;
}

.clsIPOCardScroll .mud-tabs-panels {
    overflow-y: auto;
    overflow-x: hidden;
    height: 450px;
}

.clsIPOStatusGrid .mud-table-cell img {
    /*height: 25px !important;*/
    width: 30px !important;
    position: relative;
    /*top: 7px;*/
    top: 3px;
}

.clsIPOStatusGrid .mud-table-cell
{
    padding: 10px;
    font-size: 14px;
    vertical-align: top;
}

.clsIPOStatusGrid tr th {
    padding-top: 2px !important;
    padding-bottom: 0px !important;
    font-weight: normal !important;
}

.clsIPOStatusGrid tr th:not(.mud-table-empty-row) {
    background-color: #F4F6F7 !important;
}

.clsIPOStatusGrid tr th span {
    color: #777 !important;
}

.mud-table-empty-row {
    background-color: #FFF !important;
}

.clsIPOStatusGrid .clsCompanyCell {
    min-width: 280px;
}

.clsIPOStatusGrid .clsClntNameCell {
    min-width: 150px;
}

.clsIPOListGrid .mud-drop-container {
    overflow-x: hidden;
    min-height: 330px;
}

.clsIPOListGrid .mud-table-cell {
    padding: 2px 5px;
    font-size: 14px;
    vertical-align: top;
}

.clsIPOListGrid tr th {
    padding-top: 2px !important;
    padding-bottom: 0px !important;
    font-weight: normal !important;
    border-top: 1px solid #E7E7E7;
}

.clsIPOListGrid tr th:not(.mud-table-empty-row) {
    background-color: #F4F6F7 !important;
}

.clsIPOListGrid tr th span {
    color: #777 !important;
}

.clsTableList {
    border: 1px solid #E7E7E7;
    margin: 20px !important;
    width: 96%;
}

.clsTableList .clsTableHeader {
    font-weight: normal !important;
    border-bottom: 1px solid #E7E7E7;
    background-color: #F4F6F7 !important;
    color: #777 !important;
}

.clsTableList .mud-grid-item {
    padding: 2px 5px 2px 5px !important;
    font-size: 14px;
    vertical-align: top;
    color: #585859;
}

.clsNoPadding
{
    padding: 0px !important;
}

.clsSectionDetail {
    font-size: 17px;
    padding-top: 10px;
    font-weight: bold;
    color: #585859;
    margin-left: -4px;
}

.clsGridActionCell {
    max-width: 110px;
}

.clsGridActionCell .clsButton {
    margin: 5px;
}

.clsGridStockName {
    color: #908D8E;
    font-size: 12px;
}

.clsGrid .mud-table-cell {
    padding: 10px 10px 10px 10px;
}

.clsUobkhPrimaryRed {
    color: #D55C4D !important;
}

.clsUobkhSecondaryRed {
    color: #C33B32 !important;
}

.clsRed {
    color: red !important;
}

.clsGreen
{
    color: green !important;
}

.clsBlue {
    color: #155E99 !important;
}

.clsOrange {
    color: #FF7109 !important;
}

.clsGrey {
    color: #888 !important;
}

.clsSearch {
    max-width: 320px !important;
}

.clsSearch .mud-input-control-input-container {
    width: 300px !important;
}

.clsSearch .mud-input > input.mud-input-root, .clsSearch div.mud-input-slot.mud-input-root {
    /*color: #594AE2;*/
    color: #C33B32;
}

.clsSearch .mud-input-slot::placeholder {
    opacity: 0.65 !important;
}

.clsSearch svg {
    /*color: #594AE2;*/
    color: #C33B32;
}

.clsSearch .mud-input.mud-input-underline:before {
    /*border-bottom: 1px solid #594AE2;*/
    border-bottom: 1px solid #C33B32 !important;
}

.clsSearch .mud-input.mud-input-underline:after {
    /*border-bottom: 2px solid #594AE2;*/
    border-bottom: 2px solid #C33B32 !important;
}

.clsDetailGrid
{
    padding-left: 5px;
    margin-left: 0px;
    margin-top: 5px;
}

.clsShariahImg {
    height: 15px;
    width: 15px;
}

.clsShariah {
    color: #00A516;
    margin-top: -3px;
    margin-left: 5px;
}

.clsNonShariah {
    color: #908D8E;
    margin-top: -3px;
    margin-left: 0px;
}

.clsShariahGrid {
    width: 200px;
    margin-left: 0px;
    margin-top: 5px;
}

.clsShariahGrid .mud-grid-item {
    padding-top: 0px;
    padding-left: 0px;
}

.clsPageViewLink
{
    margin-bottom: -12px;
    margin-right: 10px;
}

.clsComingSoon {
    padding-top: 50px;
    padding-left: 25px;
}

.clsCountDown
{
    font-size: 12px;
    padding-top: 5px;
}

.clsPaymentMethod {
    padding-top: 70px;
    padding-bottom: 100px;
    width: 400px;
}

.clsProceedPayment {
    font-size: 15px;
    padding-bottom: 100px;
}

.clsIPOEmpty {
    text-align: center;
}

.clsIPOEmpty p {
    line-height: 40px;
    color: #908D8E;
}

.clsIPOEmptyImg
{
    width: 300px;
    opacity: 0.7;
    margin-bottom: 30px;
}

.clsHomePage
{
    max-width: 970px;
}

.clsHomeTitle p {
    font-size: 22px !important;
    font-weight: 300 !important;
}

.clsHomeNewTitle {
    color: #595959;
    font-size: 56px;
    font-weight: bolder;
    line-height: 70px;
}

.clsHomeRedTitle {
    color: #E3473B;
    font-size: 56px;
    font-weight: bolder;
    line-height: 70px;
}

.clsHomeMainText {
    font-size: 25px;
    color: #595959;
}

.clsHomeSubText {
    font-size: 20px;
    color: #595959;
}

.clsHomeSubText a {
    font-size: 20px !important;
}

.clsHomeSection {
    margin-top: 20px;
}

.clsHomeCell {
    padding: 20px !important;
    margin-bottom: -150px;
}

.clsHomeImg {
    height: 360px;
    width: calc(100% + 24px);
    border-radius: 15px;
}

.clsHomeImgLink {
    color: #000;
    border: 1px solid #ccc;
    transition: transform 0.3s, box-shadow 0.3s;
    margin-bottom: 10px;
    border-radius: 15px;
    /*    max-width: -moz-available;
    max-width: -webkit-fill-available;
    max-width: fill-available;*/
    height: 150px;
    width: 300px;
    padding: 0px;
}

.clsHomeImgLink:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.clsHomeImgLink span {
    font-size: 22px;
}

.clsHomeImgLink_List {
    background-image: url('../img/istock_ipo.jpg');
    background-size: cover;
}

.clsHomeImgLink_Compare {
    background-image: url('../img/istock_compare.jpg');
    background-size: cover;
}

.clsHomeImgLink_FAQ {
    background-image: url('../img/istock_faq.jpg');
    background-size: cover;
}

.clsHomeImgText {
    font-size: 14px;
    color: #fff;
    top: -300px;
    left: 170px;
    position: relative;
    /*line-height: 0px;*/
}

.clsHomeImgLargeText {
    font-size: 60px;
    font-weight: bold;
    color: #fff;
    top: -330px;
    left: 170px;
    position: relative;
    /*line-height: 0px;*/
}

.clsHomeLinkText {
    position: relative;
    color: #fff;
    top: 30px;
    left: 0px;
    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    height: 40px;
    width: 100%;
    align-items: center;
    padding: 8px 10px;
    text-align: left;
}

.clsHomeLinkText p {
    font-size: 16px;
}

.clsFAQHeader svg {
    height: 32px;
    width: 32px;
    position: relative;
    left: -15px;
    color: #CCCCCC;
}

.clsFAQHeader {
    padding: 0px !important;
}

.clsFAQHeader div {
    font-size: 22px !important;
    font-weight: 300 !important;
    padding: 24px 72px 24px 24px;
}

.clsFAQHeaderHighlight div {
    font-weight: bold !important;
    color: #E3473B;
}

.mud-expand-panel {
    margin-bottom: 10px;
}

.clsHeader .mud-tooltip-root {
    top: 15px;
    position: relative;
    height: 25px;
}

.clsFAQGroup
{
    height: 100px;
    padding: 30px;
}

.clsFAQGroup a {
    font-weight: bold;
    font-size: 18px;
    text-decoration: none !important;
    color: #585859 !important;
}

.clsFAQGroupName {
    font-weight: bold;
    font-size: 22px;
    text-decoration: none !important;
    color: #585859 !important;
    margin-bottom: 10px;
}

.clsFloatRight {
    float: right;
}

.clsFAQBack
{

}

.clsCountDownGrid
{
    margin-top: 5px;
    margin-left: -5px;
}

.clsCountDownPaper {
    margin: 5px;
    height: 50px;
    width: 50px;
}

.clsCountDownFigure {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

.clsCountDownUnit {
    text-align: center;
    font-size: 10px;
    color: #888;
}

.clsCountDownGridMini {
    margin-top: 3px;
    margin-left: -5px;
}

.clsCountDownPaperMini {
    margin: 2px 5px;
    height: 35px;
    width: 35px;
}

.clsCountDownFigureMini {
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    margin-top: 3px;
}

.clsCountDownUnitMini {
    text-align: center;
    font-size: 10px;
    color: #888;
    margin-top: -3px;
}

/*only apply to large screen*/
/*@media only screen and (min-width: 1000px) {
    .clsIPOCard .mud-tabs * {
        scrollbar-color: rgba(227, 71, 59, 0.5) #eee;*/
/*        scrollbar-width: initial;
*/    /*}
}*/

/* width */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar:horizontal {
    height: 10px; /* Adjust scrollbar height */
}

.clsHeader ::-webkit-scrollbar:horizontal {
    height: 5px; /* Adjust scrollbar height */
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #f8f8f8;
    border-radius: 20px;
    border: 1px solid #ddd;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgba(227, 71, 59, 0.4);
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: rgba(227, 71, 59, 0.6);
}

/* css hack for firefox, else will impact Chrome-scrollbars. */
@-moz-document url-prefix() {
    /* For Firefox */
    * {
        scrollbar-width: auto; /* Options: auto, thin, none */
        scrollbar-color: rgba(227, 71, 59, 0.4) #f8f8f8; /* thumb color, track color */
    }
}

.mud-timeline-item:not(.clsTimelineBlur) .mud-timeline-item-dot, .mud-timeline-item:not(.clsTimelineBlur) svg {
    height: 16px !important;
    width: 16px !important;
}

.mud-timeline-item:not(.clsTimelineBlur) svg {
    height: 14px !important;
    width: 14px !important;
}

.clsIPOCardScroll .mud-card-header {
    align-items: flex-start;
}

.clsClientDropDown .mud-select-input .mud-input-slot {
    white-space: normal !important;
    height: auto !important;
}

.clsApplShares {
    width: fit-content;
    margin-right: 5px;
}

.clsMinApplShares {
    text-wrap-mode: nowrap;
    min-width: 40px;
    text-align: center;
}

.clsMinApplShares .mud-typography {
    margin-left: 5px;
}

.clsTotalShareQty {
    min-width: 76px;
    max-width: fit-content;
}

/* tnc start*/
 .custom-paper {
    width: 100%;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

.custom-iframe {
    border: none;
    /*height: 100%;*/
    /*width: 100%;*/
    /*overflow-y: hidden;*/
    overflow: hidden;
    /*scrollbar-width: none;*/
    min-height: 2280px;
}

.tncLogo {
    margin-left: 26px;
}

.tncFooter {
    margin-left: 30px;
}

/*.custom-paper {
    width: 100%;
    height: 500px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.custom-content-wrapper {
    display: flex;
    flex-direction: column;
    height: auto;
}

.custom-iframe {
    border: none;
    width: 100%;
    overflow-y: hidden;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tncLogo {
    margin-left: 26px;
}

.tncFooter {
    margin-left: 30px;
    margin-bottom: 20px;
}*/
/* tnc end */

.clsExpandHideAll {
    text-wrap-mode: nowrap;
    padding-left: 12px !important;
    padding-right: 2px;
}

.clsNarrowScreenShow {
    display: none !important;
}

.clsApplyDoneTitle {
    font-size: 25px;
}

.clsApplyDoneSubtitle {
    font-size: 14.5px;
}

.clsCompareIPOBtns {
    width: 98% !important;
}

.clsIPOStatusCompanyLogo {
    align-content: center;
    flex-basis: auto;
}

.clsRemindInfoValid {
    max-width: 350px;
}

.clsScreenNarrowHide {
    display: flex;
}

.clsScreenNarrowShow {
    display: none;
}

/* START For beta testing */
.clsNoAccessBetaDialog {
    height: 270px;
    padding-top: 15px;
    padding-bottom: 32px;
}

.clsBetaDialogContent {
    /*padding: 0px 40px !important;*/
    /*color: #908D8E;*/
    color: #595959;
}

/*   END For beta testing */

.clsFontBold {
    font-weight: bold;
}

.clsHomeImgLinkAlign {
    text-align: right;
}

@media (min-width: 1001px) and (max-width: 1046px) {
    .clsScreenNarrowHide {
        display: none;
    }

    .clsScreenNarrowShow {
        display: flex;
        min-width: auto;
    }
}

@media (max-width: 1000px) {
    .clsPageButtonGroup {
        padding-right: 8px;
    }

    .clsHomeImgLinkAlign {
        text-align: center;
    }
}


/* 
    mobile CSS starts here
*/

.clsHeaderMobile {
    display: none !important;
}

.clsMobileShow {
    display: none !important;
}

@media only screen and (min-width: 1001px) and (max-width: 1201px) {
    .clsLoginUser {
        display: none;
    }
}

@media only screen and (min-width: 601px) and (max-width: 1000px) {
    * {
        font-size: 12px;
    }

    .mud-timeline-item-content {
        padding-left: 10px;
    }

    .clsHeader {
        display: none !important;
    }

    .clsHeaderMobile {
        display: flex !important;
        margin: auto;
        width: 99%;
    }

    .clsMobileShow {
        display: flex !important;
    }

    .mud-toolbar-appbar {
    }

    .clsTopBar {
        height: 50px;
    }

    .clsLoginUser {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: -5px;
        font-size: 10px;
        width: 140px;
        min-width: 140px;
    }

    .clsSystemName {
        margin-left: 1px !important;
        padding-right: 0px;
        margin-top: -3px;
        font-size: 16px !important;
    }

    .clsButton {
        /*        height: 25px */
        padding-left: 5px;
        padding-right: 5px;
    }

    .clsPreviousButton .mud-button-label .mud-button-icon-start {
        margin-right: 2px;
        margin-inline-end: 0px;
    }

    .mud-button-label {
        font-size: 12px;
    }

    .clsPageTitle {
        padding-top: 10px;
    }

    .clsPageTitleText {
        font-size: 18px;
        padding-left: 10px;
    }

    .clsIPOCard {
        margin: 20px 7px;
    }

    .clsIPOCard .mud-grid-item {
        padding-top: 10px;
    }

    .clsApplyGrid .mud-grid-item {
        padding-top: 10px;
    }

    .clsContent {
        width: 97%;
    }

    .clsMainContainer {
    }

    .mud-main-content {
    }

    .mud-tab {
        min-width: 54px !important;
        padding: 6px 6px 6px 12px;
        font-size: 12px;
    }

    .mud-tab svg {
        display: none;
    }

    .clsActivity {
        font-size: 12px;
        margin-top: 25px;
    }

    .mud-tab-icon-text {
        margin-right: 5px !important;
    }

    .clsCardLabel {
        font-size: 12px;
    }

    .clsShareDetail {
        font-size: 12px;
        padding-top: 20px !important;
    }

    .clsFileName {
        font-size: 12px;
    }

    .clsFileSize {
        font-size: 11px;
    }

    .clsFooterBar {
        margin: 0px;
    }

    .clsIPOCard {
        min-height: 400px;
    }

    .clsIPOCard .mud-tabs-panels {
        min-height: 220px;
    }

    .clsCompanyName {
        font-size: 16px;
    }

    .mud-card-header {
        padding: 2px 10px;
    }

    .mud-timeline-item {
        padding-bottom: 25px !important;
    }

    .mud-timeline {
        padding-top: 10px;
    }

    .mud-tabs .pa-6 {
        padding: 10px 20px !important;
    }

    .clsFooterSpace {
        height: 50px;
    }

    .clsMenuItemMobile {
        width: 220px;
    }

    .clsMenuItemMobile p {
        font-size: 16px !important;
        color: #908D8E !important;
        margin-left: 10px;
    }

    .clsMobileMenu {
        margin-top: -5px;
        margin-left: -20px;
        margin-right: 20px;
        height: 24px;
        width: 24px;
    }

    .clsLogoutMobile svg {
        height: 15px;
        width: 15px;
    }

    .clsSelect, clsSelectShort {
        width: 150px !important;
    }

    .clsSelectShort .mud-input-control-input-container {
        width: 97% !important;
    }

    .clsSearch .mud-input-control-input-container {
        width: 97% !important;
    }

    .clsCardText .mud-input-control-input-container {
        width: 150px !important;
    }

    .clsSection {
        font-size: 14px;
        padding-top: 20px;
        font-weight: bold;
        margin-left: -10px;
    }

    .clsSectionDetail {
        font-size: 14px;
    }

    .clsLoginRight {
        display: none;
    }

    .clsLoginButton {
        margin: 3px auto auto auto;
    }

    .clsSignInWelcome {
        font-size: 30px;
    }

    .clsSignIn {
        font-size: 25px;
    }

    .clsMemberOnly {
        margin-left: -12px;
    }

    .clsMemberOnly p {
        font-size: 12px;
    }

    .clsMemberOnly .mud-link {
        font-size: 12px;
    }

    .mud-timeline-item-content h6, .mud-timeline-item-opposite h6 {
        font-size: 12px !important;
    }

    .mud-timeline-item-opposite p {
        font-size: 12px !important;
    }

    .clsApplyButton span {
        font-size: 14px;
    }

    .clsApplyButton svg {
        height: 20px;
        width: 20px;
    }

    .clsApplyButton {
        top: -55px;
    }

    .mud-avatar {
        height: 70px !important;
        width: 90px !important;
    }

    .clsIssuePrice {
        font-size: 16px;
    }

    .clsStockName {
        font-size: 13px;
    }

    .clsApplyButtonPanel {
        top: -30px;
    }

    .clsCompareCard .mud-grid-item {
        padding-top: 4px;
        padding-left: 4px;
    }

    .clsCompareCard .clsSection {
        margin-left: -5px;
    }

    .clsCompareCard .clsCardLabel {
        font-size: 12px;
    }

    .clsIPOCard .clsCardText, .clsCompareCard .clsCardText {
        word-break: break-word;
    }

    .clsCompareCard .clsApplyButton {
        margin-left: 0px;
        top: 0px;
    }

    .clsStickyCompareHeader {
        top: 50px;
    }

    .clsFileCell {
        display: none;
    }

    .clsCompareLogo {
        height: 25px !important;
        width: 30px !important;
        top: 6px;
    }

    .clsSelectLarge {
        width: 230px !important;
    }

    .clsSelectLarge .mud-input-control-input-container {
        width: 230px !important;
    }

    /*    .mud-list-item-text
{
    margin-left: -30px;
}*/

    a .mud-list-item-text {
        margin-left: 0px;
    }

    .mud-list .mud-list-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .clsCompareCard .mud-card-content {
        padding: 7px 10px;
    }

    .clsIPOCard .mud-card-content {
        padding: 5px;
    }

    html, body {
        max-width: 100%;
        overflow-x: clip;
    }

    .clsGridCompanyName {
        font-size: 13px;
    }

    .clsGridStockName {
        font-size: 12px;
    }

    .clsCompanyCell {
        flex-direction: column;
        align-items: start !important;
    }

    .clsCompanyCell:before {
        display: none;
    }

    .clsIPOStatusGrid .mud-table-cell:before {
        min-width: 120px;
    }

    .clsIPOStatusGrid .mud-table-cell {
        font-size: 12px;
        max-width: 370px;
    }

    .clsGridActionCell.clsMobileShow {
        height: 100%;
        display: revert !important;
    }

    .clsGridActionCell .clsButton {
        left: -10px;
    }

    .clsGridActionCell {
        max-width: none;
    }

    .clsDetailGrid {
        padding-left: 15px;
    }

    .clsTotalFigure {
        font-size: 14px;
    }

    .clsSwitchViewButton {
        display: none;
    }

    .clsMobileHide {
        display: none !important;
    }

    .clsMobileHide.clsCompareIPOStatus, .clsMobileHide.clsCompareIPOStatusCell {
        display: revert !important;
    }

    .clsMenuItemMobile .mud-list-item-text {
        margin-left: 0px;
    }

    .clsPageDescText {
        /*width: 350px;*/ /*or probably make it max-width: 350px or other value? */
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0px;
    }

    .clsPageNoticeText {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0px;
    }

    .mud-expand-panel-content img {
        height: 300px;
        width: 300px;
    }

    .main-footer .col-md-9 {
        width: 100%;
    }

    .main-footer .col-md-3 {
        width: 100%;
    }

    .mud-timeline-item-opposite p:not(.clsCountDown) {
        font-size: 12px !important;
        color: #585859;
    }

    .main-footer p {
        font-size: 12px;
    }

    .mud-table-toolbar .mud-input-control-input-container {
        width: 200px;
    }

    .mud-xs-table .mud-table-cell:before {
        color: #908D8E !important;
    }

    .clsCompareGrid .mud-table-toolbar {
        height: 200px;
    }

    .clsCompareGridCompany {
        top: 18px;
        position: relative;
    }

    .clsCompareGrid .mud-table-cell {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
    }

    .clsCompareGrid .clsShariahGrid {
        text-align: right;
        margin-right: -18px;
    }

    .clsCompareGrid .mud-input-control-boolean-input {
        top: 25px;
        position: relative;
        padding-bottom: 20px;
    }

    .clsCompareGrid .mud-table-row .mud-table-cell:first-child {
        padding-bottom: 0px;
        margin-top: -20px;
    }

    .clsCompareGrid .mud-table-row:nth-child(even) {
        background: #f3f3f3;
    }

    .clsCompareGrid .clsIPOGridLogo {
        top: -8px;
    }

    .mud-step, .mud-stepper-nav-connector {
        display: none;
    }

    .active {
        display: flex;
    }

    .clsViewIPOMobileBtn {
        margin-top: 50px;
    }

    .clsIPOCardScroll .mud-tabs-panels {
        min-height: 290px;
        height: auto;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .clsCountDown {
        padding-top: 2px;
    }

    .clsErrorPaper {
        width: 98%;
    }

    .clsFAQHeader div {
        font-size: 14px !important;
        font-weight: 300 !important;
        padding: 10px 20px 10px 10px;
    }

    .clsFAQGroup a {
        font-size: 14px;
    }

    .clsFAQGroup {
        height: 60px;
        padding: 10px;
    }

    .clsFAQGroupName {
        font-size: 18px;
    }

    .clsButtonLong {
        width: 110px !important;
    }

    .clsIPOEmptyImg {
        width: 250px;
    }

    /* Homepage banner */
    .clsHomeImgText {
        font-size: 14px;
        color: #fff;
        top: -140px;
        left: 46px;
        position: relative;
        /*line-height: 0px;*/
    }
    .clsHomeImgLargeText {
        font-size: 50px;
        color: #fff;
        top: -160px;
        left: 46px;
        position: relative;
        /*line-height: 0px;*/
        width: fit-content;
    }

    .clsHomeTitle p {
        font-size: 20px !important;
        font-weight: 300 !important;
    }

    .clsHomeImg {
        height: 220px;
    }

    .clsHomeImgLink {
        /*transform: scale(0.85);*/
        height: 120px;
        width: 240px;
    }

    .clsHomeImgLink span {
        font-size: 20px;
    }

    .clsNotFoundImg {
        width: 250px;
        height: 154px;
        margin-left: 30px;
    }

    .clsErrorImg {
        width: 250px;
        height: 212px;
        margin-left: 30px;
    }

    .clsError p {
        font-size: 18px;
        padding: 0px 30px;
        line-height: 30px;
        margin-top: -120px;
    }

    .clsError a {
        font-size: 18px;
    }

    .clsCountDownPaper {
        height: 40px;
        width: 40px;
    }

    .clsCountDownFigure {
        text-align: center;
        font-weight: bold;
        font-size: 12px;
    }

    .clsCountDownUnit {
        text-align: center;
        font-size: 8px;
        color: #888;
    }

    .clsMarketImg {
        width: 70px;
        height: 26px;
    }

    .clsAceImg {
        width: 70px;
        height: 26px;
    }

    .clsFileIcon {
        left: -5px;
    }

    .clsFileCell .clsFileIcon {
        left: -10px;
    }

    .mud-tabs-tabbar {
        margin-bottom: 15px;
    }

    .clsNoSelect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
    }
}

/*@media only screen and (min-width: 271px) and (max-width: 600px) {*/
/*@media only screen and (min-width: 352px) and (max-width: 600px) {*/
@media only screen and (min-width: 352px) and (max-width: 600px) {

    * {
        font-size: 12px;
    }

    .clsHomeNewTitle {
        font-size: 42px;
        line-height: 50px;
    }

    .clsHomeRedTitle {
        font-size: 42px;
        line-height: 50px;
    }

    .mud-timeline-item-content {
        padding-left: 10px;
    }

    .clsHeader {
        display: none !important;
    }

    .clsHeaderMobile {
        display: flex !important;
        margin: auto;
        width: 99%;
    }

    .clsMobileShow {
        display: flex !important;
    }

    .mud-toolbar-appbar {
    }

    .clsTopBar {
        height: 50px;
    }

    .clsLoginUser {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: -5px;
        font-size: 10px;
        width: 140px;
        min-width: 140px;
    }

    .clsLoginUserEmpty {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: -5px;
        font-size: 10px;
        width: 140px;
        min-width: 140px;
    }

    .clsSystemName {
        margin-left: 1px !important;
        padding-right: 0px;
        margin-top: -3px;
        font-size: 16px !important;
    }

    .clsButton {
        /*        height: 25px */
        padding-left: 5px;
        padding-right: 5px;
    }

    .clsPreviousButton .mud-button-label .mud-button-icon-start {
        margin-right: 2px;
        margin-inline-end: 0px;
    }

    .mud-button-label {
        font-size: 12px;
    }

    .clsPageTitle {
        padding-top: 10px;
        width: auto;
    }

    .clsPageTitleText {
        font-size: 18px;
        padding-left: 10px;
    }

    .clsIPOCard {
        margin: 20px 7px;
    }

    .clsIPOCard .mud-grid-item {
        padding-top: 10px;
    }

    .clsApplyGrid .mud-grid-item {
        padding-top: 10px;
    }

    .clsContent {
        width: 97%;
    }

    .clsMainContainer {
    }

    .mud-main-content {
    }

    .mud-tab {
        min-width: 54px !important;
        padding: 6px 6px 6px 12px;
        font-size: 12px;
    }

    .mud-tab svg {
        display: none;
    }

    .clsActivity {
        font-size: 12px;
        margin-top: 25px;
    }

    .mud-tab-icon-text {
        margin-right: 5px !important;
    }

    .clsCardLabel {
        font-size: 12px;
    }

    .clsShareDetail {
        font-size: 12px;
        padding-top: 20px !important;
    }

    .clsFileName {
        font-size: 12px;
    }

    .clsFileSize {
        font-size: 11px;
    }

    .clsFooterBar {
        margin: 0px;
    }

    .clsIPOCard {
        min-height: 400px;
    }

    .clsIPOCard .mud-tabs-panels {
        min-height: 220px;
    }

    .clsCompanyName {
        font-size: 16px;
    }

    .mud-card-header {
        padding: 2px 10px;
    }

    .mud-timeline-item {
        padding-bottom: 25px !important;
    }

    .mud-timeline {
        padding-top: 10px;
    }

    .mud-tabs .pa-6 {
        padding: 10px 20px !important;
    }

    .clsFooterSpace {
        height: 50px;
    }

    .clsMenuItemMobile {
        width: 220px;
    }

    .clsMenuItemMobile p {
        font-size: 16px !important;
        color: #908D8E !important;
        margin-left: 10px;
    }

    .clsMobileMenu {
        margin-top: -5px;
        margin-left: -20px;
        margin-right: 20px;
        height: 24px;
        width: 24px;
    }

    .clsLogoutMobile svg {
        height: 15px;
        width: 15px;
    }

    .clsSelect, clsSelectShort {
        width: 150px !important;
    }

    .clsCardText .mud-input-control-input-container {
        /*width: 150px !important;*/
        width: 91% !important;
        min-width: 80px !important;
    }

    .clsSection {
        font-size: 14px;
        padding-top: 20px;
        font-weight: bold;
        margin-left: -10px;
    }

    .clsSectionDetail {
        font-size: 14px;
    }

    .clsIPOStatusNarrow {
        /*max-width: 100%;*/
    }

    .clsIPOStatusNarrow .clsCardLabel {
        padding-right: 5px;
    }

    .clsIPOStatusNarrow .clsCardText {
        width: auto;
        overflow-wrap: break-word;
    }

    .clsLoginRight {
        display: none;
    }

    .clsLoginButton {
        margin: 3px auto auto auto;
    }

    .clsSignInWelcome {
        font-size: 30px;
    }

    .clsSignIn {
        font-size: 25px;
    }

    .clsMemberOnly {
        margin-left: -12px;
    }

    .clsMemberOnly p {
        font-size: 12px;
    }

    .clsMemberOnly .mud-link {
        font-size: 12px;
    }

    .mud-timeline-item-content h6, .mud-timeline-item-opposite h6 {
        font-size: 12px !important;
    }

    .mud-timeline-item-opposite p {
        font-size: 12px !important;
    }

    .clsApplyButton span {
        font-size: 14px;
    }

    .clsApplyButton svg {
        height: 20px;
        width: 20px;
    }

    .clsApplyButton {
        top: -55px;
    }

    .mud-avatar {
        height: 70px !important;
        width: 90px !important;
    }

    .clsIssuePrice {
        font-size: 16px;
    }

    .clsStockName {
        font-size: 13px;
    }

    .clsApplyButtonPanel {
        top: -30px;
    }

    .clsCompareCard .mud-grid-item {
        padding-top: 4px;
        padding-left: 4px;
    }

    .clsCompareCard .clsSection {
        margin-left: -5px;
    }

    .clsCompareCard .clsCardLabel {
        font-size: 12px;
    }

    .clsIPOCard .clsCardText, .clsCompareCard .clsCardText {
        word-break: break-word;
    }

    .clsCompareCard .clsApplyButton {
        margin-left: 0px;
        top: 0px;
    }

    .clsStickyCompareHeader {
        top: 50px;
    }

    .clsFileCell {
        display: none;
    }

    .clsCompareLogo {
        height: 25px !important;
        width: 30px !important;
        top: 6px;
    }

    .clsSelectLarge {
        width: 230px !important;
    }

    .clsSelectLarge .mud-input-control-input-container {
        width: 230px !important;
    }

    /*    .mud-list-item-text
{
    margin-left: -30px;
}*/

    a .mud-list-item-text {
        margin-left: 0px;
    }

    .mud-list .mud-list-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .clsCompareCard .mud-card-content {
        padding: 7px 10px;
    }

    .clsIPOCard .mud-card-content {
        padding: 5px;
    }

    .clsIPOCard .mud-stepper-actions {
        flex-direction: column;
    }

    .clsIPOCard .mud-stepper-actions .mud-grid {
        flex-wrap: nowrap;
    }

    html, body {
        max-width: 100%;
        overflow-x: clip;
    }

    .clsGridCompanyName {
        font-size: 13px;
    }

    .clsGridStockName {
        font-size: 12px;
    }

    .clsCompanyCell {
        flex-direction: column;
        align-items: start !important;
    }

    .clsCompanyCell:before {
        display: none;
    }

    .clsIPOStatusGrid .mud-table-container {
        max-width: 100%;
        min-width: 100px;
        width: 100% !important;
    }

    .clsIPOStatusGrid .mud-table-body {
        width: 100%;
    }

    .clsIPOStatusGrid .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .clsIPOStatusGrid .mud-table-cell:before {
        min-width: 120px;
    }

    .clsIPOStatusGrid .mud-table-cell {
        font-size: 12px;
        max-width: 370px;
    }

    .clsIPOStatusGrid .clsCompanyCell {
        min-width: 280px;
        /*min-width: 99%;*/
    }

    .clsIPOStatusGrid .clsClntNameCell {
        min-width: 150px;
    }

    /*.clsGridActionCell.clsMobileShow {
    height: 100%;*/
    /*display: flex !important;*/
    /*}*/

    .clsGridActionCell .clsButton {
        left: -25px;
    }
    
    .clsApplStatus {
        flex-direction: row-reverse;
    }

    .clsApplStatusButton {
        left: -22px !important;
    }

    .clsGridActionCell {
        max-width: none;
    }

    .clsDetailGrid {
        padding-left: 15px;
        width: auto;
    }

    .clsTotalFigure {
        font-size: 14px;
    }

    .clsSwitchViewButton {
        display: none;
    }

    .clsMobileHide {
        display: none !important;
    }

    .clsMenuItemMobile .mud-list-item-text {
        margin-left: 0px;
    }

    .clsPageDescText {
        /*width: 350px;*/
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0px;
    }

    .clsPageNoticeText {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0px;
    }

    .mud-expand-panel-content img {
        height: 300px;
        width: 300px;
    }

    .main-footer .col-md-9 {
        width: 100%;
    }

    .main-footer .col-md-3 {
        width: 100%;
    }

    .mud-timeline-item-opposite p:not(.clsCountDown) {
        font-size: 12px !important;
        color: #585859;
    }

    .main-footer p {
        font-size: 12px;
    }

    .mud-table-toolbar .mud-input-control-input-container {
        width: 200px;
    }

    .mud-xs-table .mud-table-cell:before {
        color: #908D8E !important;
    }

    .clsCompareGrid .mud-table-toolbar {
        height: 200px;
    }

    .clsCompareGridCompany {
        top: 18px;
        position: relative;
    }

    .clsCompareGrid .mud-table-cell {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
    }

    .clsCompareGrid .clsShariahGrid {
        text-align: right;
        margin-right: -18px;
    }

    .clsCompareGrid .mud-input-control-boolean-input {
        top: 25px;
        position: relative;
        padding-bottom: 20px;
    }

    .clsCompareGrid .mud-table-row .mud-table-cell:first-child {
        padding-bottom: 0px;
        margin-top: -20px;
    }

    .clsCompareGrid .mud-table-row:nth-child(even) {
        background: #f3f3f3;
    }

    .clsCompareGrid .clsIPOGridLogo {
        top: -8px;
    }

    .mud-step, .mud-stepper-nav-connector {
        display: none;
    }

    .active {
        display: flex;
    }

    .clsViewIPOMobileBtn {
        margin-top: 50px;
    }

    .clsIPOCardScroll .mud-tabs-panels {
        min-height: 290px;
        height: auto;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .clsCountDown {
        padding-top: 2px;
    }

    .clsErrorPaper {
        width: 98%;
    }

    .clsFAQHeader div {
        font-size: 14px !important;
        font-weight: 300 !important;
        padding: 10px 20px 10px 10px;
    }

    .clsFAQGroup a {
        font-size: 14px;
    }

    .clsFAQGroup {
        height: 60px;
        padding: 10px;
    }

    .clsFAQGroupName {
        font-size: 18px;
    }

    .clsButtonLong {
        width: 110px !important;
    }

    .clsIPOEmptyImg {
        width: 250px;
    }

    /* Homepage banner */
    .clsHomeImgText {
        font-size: 14px;
        color: #fff;
        top: -140px;
        left: 46px;
        position: relative;
        /*line-height: 0px;*/
    }
    .clsHomeImgLargeText {
        font-size: 50px;
        color: #fff;
        top: -160px;
        left: 46px;
        position: relative;
        /*line-height: 0px;*/
        width: fit-content;
    }

    .clsHomeTitle p {
        font-size: 18px !important;
        font-weight: 300 !important;
        margin-top: 10px;
    }

    .clsHomeImg {
        height: 220px;
    }

    .clsHomeImgLink {
        /*transform: scale(0.85);*/
        height: 100px;
        width: 200px;
    }

    .clsHomeImgLink span {
        font-size: 18px;
    }

    .clsNotFoundImg {
        width: 250px;
        height: 154px;
        margin-left: 30px;
    }

    .clsErrorImg {
        width: 250px;
        height: 212px;
        margin-left: 30px;
    }

    .clsError p {
        font-size: 18px;
        padding: 0px 30px;
        line-height: 30px;
        margin-top: -120px;
    }

    .clsError a {
        font-size: 18px;
    }

    .clsCountDownPaper {
        height: 40px;
        width: 40px;
    }

    .clsCountDownFigure {
        text-align: center;
        font-weight: bold;
        font-size: 12px;
    }

    .clsCountDownUnit {
        text-align: center;
        font-size: 8px;
        color: #888;
    }

    .clsMarketImg {
        width: 70px;
        height: 26px;
    }

    .clsAceImg {
        width: 70px;
        height: 26px;
    }

    .clsFileIcon {
        left: -5px;
    }

    .clsFileCell .clsFileIcon {
        left: -10px;
    }

    .mud-tabs-tabbar {
        margin-bottom: 15px;
    }

    .clsNoSelect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
    }

    .clsMinApplShares .mud-typography {
        margin-left: 21px;
    }

    .clsTotalShareQty {
        margin-left: 5px;
    }

    .clsAlignStatus {
        text-align: end;
    }
}

/*@media only screen and (min-width: 268px) and (max-width: 351px) {*/
/*@media only screen and (max-width: 270px) {*/
@media only screen and (max-width: 351px) {
    * {
        font-size: 12px;
    }

    .clsMainLayout {
        overflow-x: scroll;
        /*min-width: 267px;*/
        /*min-width: 351px;*/
        width: auto;
        /*max-width: 351px;*/
        display: flex;
    }

    .clsMainLayout::-webkit-scrollbar {
        display: none;
    }

    .clsMainLayoutContent {
        /*min-width: 270px;*/
        max-width: 351px;
        width: 100%;
    }

    .mud-timeline-item-content {
        padding-left: 10px;
    }

    .clsHeader {
        display: none !important;
    }

    .clsHeaderMobile {
        display: flex !important;
        margin: auto;
        width: 99%;
    }

    .clsMobileShow {
        display: flex !important;
    }

    .mud-toolbar-appbar {
    }

    /* TODO: TEST UI */
    .clsTopBar {
        height: 50px;
        /*min-width: 267px;*/
        /*min-width: 320px;*/
        /*min-width: 240px;*/
        min-width: 214px;
        width: 100%;
        position: revert !important;
    }

    .clsLoginUser {
        padding-left: 0px;
        padding-right: 0px;
        margin-top: -5px;
        font-size: 10px;
        width: 140px;
        /*min-width: 140px;*/
    }

    .clsSystemName {
        margin-left: 1px !important;
        padding-right: 0px;
        margin-top: -3px;
        font-size: 16px !important;
    }

    .clsButton {
        /*        height: 25px */
        padding-left: 5px;
        padding-right: 5px;
    }

    .clsPreviousButton .mud-button-label .mud-button-icon-start {
        margin-right: 2px;
        margin-inline-end: 0px;
    }

    .mud-button-label {
        font-size: 12px;
    }

    .clsPageTitle {
        padding-top: 10px;
        width: auto;
    }

    .clsPageTitleText {
        font-size: 18px;
        padding-left: 10px;
    }

    .clsIPOCard {
        margin: 20px 7px;
        width: auto;
        display: flex;
        flex-direction: column;
    }

    .clsIPOCard .mud-card-header {
        flex-direction: column;
    }

    .clsIPOCard .mud-grid-item {
        padding-top: 10px;
        width: auto;
    }

    .clsApplyGrid .mud-grid-item {
        padding-top: 10px;
    }

    .clsContent {
        width: 99%;
    }

    /* TODO: TEST UI */
    .clsMainContainer {
        /*min-width: 320px;*/
        min-width: 100px;
        width: auto;
    }

    .mud-main-content {
        /*overflow-x: hidden;*/
        padding-top: 0px !important;
    }

    .mud-tab {
        min-width: 54px !important;
        padding: 6px 6px 6px 12px;
        font-size: 12px;
    }

    .mud-tab svg {
        display: none;
    }

    .clsActivity {
        font-size: 12px;
        margin-top: 25px;
    }

    .mud-tab-icon-text {
        margin-right: 5px !important;
    }

    .clsCardLabel {
        font-size: 12px;
    }

    .clsShareDetail {
        font-size: 12px;
        padding-top: 20px !important;
    }

    .clsFileName {
        font-size: 12px;
    }

    .clsFileSize {
        font-size: 11px;
    }

    .clsFooterBar {
        margin: 0px;
    }

    .clsIPOCard {
        min-height: 400px;
    }

    .clsIPOCard .mud-tabs-panels {
        min-height: 220px;
    }

    .clsCompanyName {
        font-size: 16px;
    }

    .mud-card-header {
        padding: 2px 10px;
    }

    .mud-timeline-item {
        padding-bottom: 25px !important;
    }

    .mud-timeline {
        padding-top: 10px;
    }

    .mud-tabs .pa-6 {
        padding: 10px 20px !important;
    }

    .clsFooterSpace {
        height: 50px;
    }

    .clsMenuItemMobile {
        width: 220px;
    }

    .clsMenuItemMobile p {
        font-size: 16px !important;
        color: #908D8E !important;
        margin-left: 10px;
    }

    .clsMobileMenu {
        margin-top: -5px;
        margin-left: -20px;
        margin-right: 20px;
        height: 24px;
        width: 24px;
    }

    .clsLogoutMobile svg {
        height: 15px;
        width: 15px;
    }

    .clsSelect, clsSelectShort {
        width: 129px !important;
    }

    .clsCardText .mud-input-control-input-container {
        /*width: 150px !important;*/
        width: 91% !important;
        min-width: 80px !important;
    }

    .clsSection {
        font-size: 14px;
        padding-top: 20px;
        font-weight: bold;
        margin-left: -10px;
    }

    .clsSectionDetail {
        font-size: 14px;
    }

    .clsIPOStatusNarrow {
        /*max-width: 100%;*/
    }

    .clsIPOStatusNarrow .clsCardLabel {
        padding-right: 5px;
    }

    .clsIPOStatusNarrow .clsCardText {
        width: auto;
        overflow-wrap: break-word;
    }

    .clsLoginRight {
        display: none;
    }

    .clsLoginButton {
        margin: 3px auto auto auto;
    }

    .clsSignInWelcome {
        font-size: 30px;
    }

    .clsSignIn {
        font-size: 25px;
    }

    .clsMemberOnly {
        margin-left: -12px;
    }

    .clsMemberOnly p {
        font-size: 12px;
    }

    .clsMemberOnly .mud-link {
        font-size: 12px;
    }

    .mud-timeline-item-content h6, .mud-timeline-item-opposite h6 {
        font-size: 12px !important;
    }

    .mud-timeline-item-opposite p {
        font-size: 12px !important;
    }

    .clsApplyButton span {
        font-size: 14px;
    }

    .clsApplyButton svg {
        height: 20px;
        width: 20px;
    }

    .clsApplyButton {
        top: -55px;
    }

    .mud-avatar {
        height: 70px !important;
        width: 90px !important;
    }

    .clsIssuePrice {
        font-size: 16px;
    }

    .clsStockName {
        font-size: 13px;
    }

    .clsApplyButtonPanel {
        top: -30px;
        /*padding-right: 15px;*/
        padding-right: 32px;
    }

    .clsCompareCard .mud-grid-item {
        padding-top: 4px;
        padding-left: 4px;
    }

    .clsCompareCard .clsSection {
        margin-left: -5px;
    }

    .clsCompareCard .clsCardLabel {
        font-size: 12px;
    }

    .clsIPOCard .clsCardText, .clsCompareCard .clsCardText {
        word-break: break-word;
    }

    .clsCompareCard .clsApplyButton {
        margin-left: 0px;
        top: 0px;
    }

    .clsStickyCompareHeader {
        top: 50px;
    }

    .clsFileCell {
        display: none;
    }

    .clsCompareLogo {
        height: 25px !important;
        width: 30px !important;
        top: 6px;
    }

    .clsSelectLarge {
        width: 230px !important;
    }

    .clsSelectLarge .mud-input-control-input-container {
        width: 230px !important;
    }

    /*    .mud-list-item-text
{
    margin-left: -30px;
}*/

    a .mud-list-item-text {
        margin-left: 0px;
    }

    .mud-list .mud-list-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    .clsCompareCard .mud-card-content {
        padding: 7px 10px;
    }

    .clsIPOCard .mud-card-content {
        padding: 5px;
    }

    .clsIPOCard .mud-stepper-actions {
        flex-direction: column;
    }

    .clsIPOCard .mud-stepper-actions .mud-grid {
        /*flex-wrap: nowrap;*/
    }

    html, body {
        max-width: 100%;
        overflow-x: clip;
    }

    .clsGridCompanyName {
        font-size: 13px;
    }

    .clsGridStockName {
        font-size: 12px;
    }

    .clsCompanyCell {
        flex-direction: column;
        align-items: start !important;
    }

    .clsCompanyCell:before {
        display: none;
    }

    .clsIPOStatusGrid {
        max-width: 100%;
        min-width: 100px;
        width: 99%;
    }

    .clsIPOStatusGrid .mud-table-container {
        max-width: 100%;
        min-width: 100px;
        width: 100% !important;
    }

    .clsIPOStatusGrid .mud-table-root {
        display: flex;
        width: 100%;
    }

    .clsIPOStatusGrid .mud-table-body {
        width: 100%;
    }

    .clsIPOStatusGrid .mud-table-row {
        display: flex;
        flex-direction: column;
    }

    .clsIPOStatusGrid .mud-table-cell:before {
        min-width: 120px;
    }

    .clsIPOStatusGrid .mud-table-cell {
        font-size: 12px;
        max-width: 370px;
    }

    .clsIPOStatusGrid .clsCompanyCell {
        /*min-width: 280px;*/
        min-width: 99%;
    }

    /*.clsGridActionCell.clsMobileShow {
    height: 100%;*/
    /*display: flex !important;*/
    /*}*/

    .clsGridActionCell .clsButton {
        left: -25px;
    }

    .clsApplStatus {
        flex-direction: row-reverse;
    }

    .clsApplStatusButton {
        left: -22px !important;
        min-width: 84px;
    }

    .clsGridActionCell {
        max-width: none;
    }

    .clsDetailGrid {
        padding-left: 15px;
        width: auto;
    }

    .clsTotalFigure {
        font-size: 14px;
    }

    .clsSwitchViewButton {
        display: none;
    }

    .clsMobileHide {
        display: none !important;
    }

    .clsMenuItemMobile .mud-list-item-text {
        margin-left: 0px;
    }

    .clsPageDescText {
        /*width: 324px;*/
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0px;
    }

    .clsPageNoticeText {
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 0px;
    }

    .mud-expand-panel-content img {
        height: 300px;
        width: 300px;
    }

    .main-footer .col-md-9 {
        width: 100%;
    }

    .main-footer .col-md-3 {
        width: 100%;
    }

    .mud-timeline-item-opposite p:not(.clsCountDown) {
        font-size: 12px !important;
        color: #585859;
    }

    .main-footer p {
        font-size: 12px;
    }

    /*.mud-table-toolbar .mud-input-control-input-container {*/
        /*width: 200px !important;*/
        /*width: 98% !important;
    }*/

    .clsSearch .mud-input-control-input-container {
        /*width: 200px !important;*/
        width: 98% !important;
    }

    .mud-table-toolbar .clsSelectShort .mud-input-control-input-container {
        /*width: 200px !important;*/
        width: 88% !important;
    }

    .mud-xs-table .mud-table-cell:before {
        color: #908D8E !important;
    }

    .clsCompareGrid .mud-table-toolbar {
        height: 200px;
    }

    .clsCompareGridCompany {
        top: 18px;
        position: relative;
    }

    .clsCompareGrid .mud-table-cell {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
    }

    .clsCompareGrid .clsShariahGrid {
        text-align: right;
        margin-right: -18px;
    }

    .clsCompareGrid .mud-input-control-boolean-input {
        top: 25px;
        position: relative;
        padding-bottom: 20px;
    }

    .clsCompareGrid .mud-table-row .mud-table-cell:first-child {
        padding-bottom: 0px;
        margin-top: -20px;
    }

    .clsCompareGrid .mud-table-row:nth-child(even) {
        background: #f3f3f3;
    }

    .clsCompareGrid .clsIPOGridLogo {
        top: -8px;
    }

    .mud-step, .mud-stepper-nav-connector {
        display: none;
    }

    .active {
        display: flex;
    }

    .clsViewIPOMobileBtn {
        margin-top: 50px;
    }

    .clsIPOCardScroll .mud-tabs-panels {
        min-height: 290px;
        height: auto;
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .clsCountDown {
        padding-top: 2px;
    }

    .clsErrorPaper {
        width: 98%;
    }

    .clsFAQHeader div {
        font-size: 14px !important;
        font-weight: 300 !important;
        padding: 10px 20px 10px 10px;
    }

    .clsFAQGroup a {
        font-size: 14px;
    }

    .clsFAQGroup {
        /*height: 60px;*/
        height: auto;
        padding: 10px;
    }

    .clsFAQGroupName {
        font-size: 18px;
    }

    .clsButtonLong {
        width: 110px !important;
    }

    .clsIPOEmptyImg {
        /*width: 250px;*/
        width: 170px;
    }

    .clsHomeImgLink {
        height: 80px;
        max-width: 160px;
        width: 100%;
    }

    .clsHomeImgLink span {
        font-size: 16px;
    }

    .clsNotFoundImg {
        width: 250px;
        height: 154px;
        margin-left: 30px;
    }

    .clsErrorImg {
        width: 250px;
        height: 212px;
        margin-left: 30px;
    }

    .clsError p {
        font-size: 18px;
        padding: 0px 30px;
        line-height: 30px;
        margin-top: -120px;
    }

    .clsError a {
        font-size: 18px;
    }

    .clsCountDownPaper {
        height: 40px;
        width: 40px;
    }

    .clsCountDownFigure {
        text-align: center;
        font-weight: bold;
        font-size: 12px;
    }

    .clsCountDownUnit {
        text-align: center;
        font-size: 8px;
        color: #888;
    }

    .clsMarketImg {
        width: 70px;
        height: 26px;
    }

    .clsAceImg {
        width: 70px;
        height: 26px;
    }

    .clsFileIcon {
        left: -5px;
    }

    .clsFileCell .clsFileIcon {
        left: -10px;
    }

    .mud-tabs-tabbar {
        margin-bottom: 15px;
    }

    .clsNoSelect {
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
    }

    .clsMinApplShares {
        margin-left: 10px;
    }

    .clsMinApplShares .mud-typography {
        margin-left: 21px;
    }

    .clsTotalShareQty {
        margin-left: 5px;
    }

    .clsAlignStatus {
        text-align: end;
    }

}

@media only screen and (max-width: 318px) {
    .clsIPOCard .mud-card-header {
        flex-direction: column;
    }
    
    .clsApplyButtonPanel {
        padding-right: 0px;
    }

    .clsSearchFAQ, .clsSearchFAQ .mud-input-control-input-container {
        width: auto !important;
    }
}

@media only screen and (max-width: 294px) {
    .clsMinApplShares {
        margin-left: 10px;
    }

    .clsMinApplShares .mud-typography {
        margin-left: -15px;
        padding-bottom: 4px;
    }

    .clsApplStatus {
        display: block !important;
    }

    .clsApplStatusButton {
        left: -37px !important;
    }

    .clsCompareCardText {
        padding-left: 3px !important;
        padding-right: 3px;
    }
}

@media only screen and (max-width: 242px) {
    .clsCompareCardText .clsApplyButton span {
        font-size: 12px;
    }
}

@media (max-width: 696px){

}

@media (max-width: 600px) {
    .clsHomeImgText {
        font-size: 14px;
        color: #fff;
        top: -130px;
        left: 18px;
        position: relative;
        /*line-height: 0px;*/
    }
    .clsHomeImgLargeText {
        font-size: 40px;
        top: -150px;
        left: 18px;
        position: relative;
        width: fit-content;
    }
}

@media (max-width: 514px) {
    .clsNarrowScreenShow {
        display: flex !important;
    }

    .clsNarrowScreenHide {
        display: none !important;
    }
}

@media (max-width: 396px) {
    .clsCompareIPOBtn1, .clsCompareIPOBtn2, clsCompareIPOBtn3 {
        margin-bottom: 10px;
    }
}

@media (max-width: 373px) {
    .clsHomeImgText {
        font-size: 14px;
        color: #fff;
        top: -120px;
        left: 18px;
        position: relative;
        /*line-height: 0px;*/
    }
    .clsHomeImgLargeText {
        font-size: 30px;
        top: -140px;
        left: 18px;
        padding-right: 80px;
    }

    .clsHomeTitle p {
        font-size: 18px !important;
        font-weight: 300 !important;
        margin-top: 30px;
    }
}

@media (max-width: 361px) {
    .clsHomeImgText {
        font-size: 14px;
        color: #fff;
        top: -125px;
        position: relative;
        /*line-height: 0px;*/
    }
    .clsHomeImgLargeText {
        font-size: 25px;
        top: -145px;
    }

    .clsHomeTitle p {
        font-size: 18px !important;
        font-weight: 300 !important;
        margin-top: 35px;
    }

    .clsHomeImg {
        height: 200px;
    }
}

@media (max-width: 334px) {
    .clsNarrowScreenShow .clsButton.clsGreyButton {
        margin-bottom: 10px;
    }
}

@media (max-width: 312px) {
    .clsHomeTitle p {
        margin-top: -5px;
    }
}