mat-sidenav-container {
    height: 100%;
    max-width: 768px;
    margin: auto
}

mat-sidenav-container .left-sidemenu {
    min-width: 285px;
    width: calc(100% - 45px);
    max-width: 300px;
    background: var(--grey-00)
}

mat-sidenav-container .left-sidemenu .sidemenu-header {
    background: var(--black-color)
}

mat-sidenav-container .left-sidemenu .sidemenu-header .logo {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

mat-sidenav-container .left-sidemenu .sidemenu-header .logo .closeMenu button {
    box-shadow: unset;
    font-size: 18px
}

mat-sidenav-container .left-sidemenu .sidemenu-header .logo .closeMenu button mat-icon {
    color: var(--primary-color);
    background-color: var(--white-color);
    font-size: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

mat-sidenav-container .left-sidemenu .sidemenu-header .logo .img-wrap {
    height: 100%
}

mat-sidenav-container .left-sidemenu .sidemenu-header .logo .img-wrap img {
    width: 100%;
    height: unset;
    max-width: 150px;
    max-height: 70px;
    display: block;
    padding: 10px 0 10px 15px;
    margin-top: auto;
    object-fit: contain
}

mat-sidenav-container .left-sidemenu .sidemenu-header .user-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin: auto;
    padding: 5px 15px;
    background: var(--grey-75);
    border-radius: 0;
    color: var(--black-color);
    min-height: 35px;
    height: 35px;
    width: 100%
}

mat-sidenav-container .left-sidemenu .sidemenu-header .user-details p {
    margin: 0;
    font-size: 12px;

    color: var(--white-color);
    display: flex;
    column-gap: 4px;
    align-items: center;
    text-transform: capitalize;
    width: 100%
}

mat-sidenav-container .left-sidemenu .sidemenu-header .user-details p.user-number {
    justify-content: flex-end;
    text-wrap: nowrap
}

mat-sidenav-container .left-sidemenu .sidemenu-header .user-details p img {
    width: 22px;
    max-height: 22px;
    border-radius: 4px
}

mat-sidenav-container .left-sidemenu .sidemenu-header .user-details p mat-icon {
    width: 18px;
    height: 18px;
    font-size: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0
}

mat-sidenav-container .left-sidemenu .sidemenu-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(var(--vh, 1vh) * 100 - 110px);
    overflow: hidden;
    position: relative
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap {
    padding: 0;
    list-style: none
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.top {
    overflow-y: auto;
    margin-top: 10px;
    height: 100%;
    margin-bottom: 0;
    max-height: calc(100% - 165px)
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.top.full-mHeight {
    max-height: calc(100% - 110px)
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.bottom {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.bottom .smenu-item {
    margin: 0 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.bottom .smenu-link {
    border: 1px solid var(--grey-50)
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.bottom .social-links-wrap label {
    font-size: 10px;

    padding: 5px 10px;
    display: inline-block
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.bottom .social-links-wrap .social-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    padding: 5px 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap.bottom .social-links-wrap .social-links img {
    width: 20px;
    height: 20px;
    filter: invert(1)
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item {
    margin: 2px 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .refer-code {
    position: relative
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .refer-code input {
    width: 100%;
    border: 0;
    border-radius: 8px;
    height: 40px;
    padding-left: 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .refer-code p {
    position: absolute;
    font-size: 12px;
    top: 0;
    right: 10px;
    height: 40px;
    margin: 0;
    display: flex;
    align-items: center;

}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .refer-code button {
    position: absolute;
    font-size: 12px;
    top: 5px;
    right: 5px;
    height: 30px;
    margin: 0;
    display: flex;
    align-items: center;

    width: auto;
    justify-content: center;
    border-radius: 8px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .action-btn {
    margin-top: 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .action-btn button {
    min-height: 40px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .action-btn button.app-dwnld-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 6px;
    background: transparent
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link {
    display: flex;
    column-gap: 10px;
    align-items: center;
    line-height: 1;
    text-decoration: none;
    color: var(--grey-900);
    padding: 8px 10px;
    font-size: 12px;

    border-radius: 6px;
    cursor: pointer;
    position: relative
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link .badge {
    position: absolute;
    right: 0
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link .rules-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grey-50);
    border-radius: 6px;
    width: 22px;
    height: 22px;
    z-index: 100
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link .rules-text {
    position: absolute;
    right: 75px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    text-decoration: underline;
    border-radius: 3px;
    width: auto;
    height: 22px;
    z-index: 100
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link .rules-text.statement {
    right: 10px;
    background: var(--grey-50);
    padding: 0 4px;
    text-decoration: none
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link.username {
    padding: 6px 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link.username img {
    width: 30px;
    filter: none
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .smenu-item .smenu-link img {
    width: 16px;
    filter: invert(1)
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .smenu-link {
    background: var(--black-color);
    border-radius: 10px 10px 0 0
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-wrap {
    background: var(--black-color);
    color: var(--black-color);
    display: flex;
    align-items: center;
    border-radius: 0 0 10px 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-wrap label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-wrap .action-icons {
    display: flex;
    align-items: center;
    column-gap: 10px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-wrap .action-icons mat-icon {
    margin: 0 !important;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--grey-75);
    color: var(--grey-900);
    padding: 4px;
    border: none
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-wrap mat-icon {
    margin-right: 10px;
    border-radius: 50%;
    border: 1px solid var(--grey-900);
    padding: 3px;
    width: 14px;
    height: 14px;
    color: var(--grey-900)
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-details {
    background: var(--black-color);
    padding: 5px 0;
    max-width: calc(100% - 20px);
    margin: auto;
    width: 100%;
    border-top: 1px solid var(--grey-75)
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-details .bonus-info p {
    margin: 0;
    font-size: 10px;
    color: var(--grey-900);
    line-height: 1.25;

}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-details .bonus-info p.n-msg {
    background: var(--black-color);
    border-radius: 0 0 6px 6px;
    margin: 0;
    border-top: 1px solid var(--grey-75);
    color: var(--grey-900);
    font-size: 10px;
    opacity: .5;
    padding: 5px 0;
    font-weight: 400;
    margin-top: 5px !important
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-details .claim-btn {
    display: flex;
    align-items: center;
    justify-content: space-between
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-details .claim-btn button {
    max-height: 30px;
    border-radius: 6px;
    font-size: 10px;
    text-transform: capitalize;
    max-width: 45px
}

mat-sidenav-container .left-sidemenu .sidemenu-list .smenu-wrap .nav-bonus .bonus-details .claim-btn button:disabled {
    opacity: .5;
    cursor: not-allowed
}

@media only screen and (max-width: 320px) {
    mat-sidenav-container .left-sidemenu {
        min-width: 245px;
        width: calc(100% - 45px);
        max-width: calc(100% - 45px)
    }
}

/* SideBar Style Css end*/

@media print {
    .MuiDialog-root {
        position: absolute !important;
    }
}

.MuiDialog-scrollPaper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.MuiDialog-scrollBody {
    overflow-x: hidden;
    overflow-y: auto;
    text-align: center;
}

.MuiDialog-scrollBody:after {
    width: 0;
    height: 100%;
    content: "";
    display: inline-block;
    vertical-align: middle;
}

.MuiDialog-container {
    height: 100%;
    outline: 0;
}

@media print {
    .MuiDialog-container {
        height: auto;
    }
}

.MuiDialog-paper {
    margin: 32px;
    position: relative;
    overflow-y: auto;
}

@media print {
    .MuiDialog-paper {
        box-shadow: none;
        overflow-y: visible;
    }
}

.MuiDialog-paperScrollPaper {
    display: flex;
    max-height: calc(100% - 64px);
    flex-direction: column;
}

.MuiDialog-paperScrollBody {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

.MuiDialog-paperWidthFalse {
    max-width: calc(100% - 64px);
}

.MuiDialog-paperWidthXs {
    max-width: 444px;
}

@media (max-width:507.95px) {
    .MuiDialog-paperWidthXs.MuiDialog-paperScrollBody {
        max-width: calc(100% - 64px);
    }
}

.MuiDialog-paperWidthSm {
    max-width: 600px;
}

@media (max-width:663.95px) {
    .MuiDialog-paperWidthSm.MuiDialog-paperScrollBody {
        max-width: calc(100% - 64px);
    }
}

.MuiDialog-paperWidthMd {
    max-width: 960px;
}

@media (max-width:1023.95px) {
    .MuiDialog-paperWidthMd.MuiDialog-paperScrollBody {
        max-width: calc(100% - 64px);
    }
}

.MuiDialog-paperWidthLg {
    max-width: 1280px;
}

@media (max-width:1343.95px) {
    .MuiDialog-paperWidthLg.MuiDialog-paperScrollBody {
        max-width: calc(100% - 64px);
    }
}

.MuiDialog-paperWidthXl {
    max-width: 1920px;
}

@media (max-width:1983.95px) {
    .MuiDialog-paperWidthXl.MuiDialog-paperScrollBody {
        max-width: calc(100% - 64px);
    }
}

.MuiDialog-paperFullWidth {
    width: calc(100% - 64px);
}

.MuiDialog-paperFullScreen {
    width: 100%;
    height: 100%;
    margin: 0;
    max-width: 100%;
    max-height: none;
    border-radius: 0;
}

.MuiDialog-paperFullScreen.MuiDialog-paperScrollBody {
    margin: 0;
    max-width: 100%;
}


.mat-drawer-container {
    position: relative;
    z-index: 1;
    color: var(--mat-sidenav-content-text-color);
    background-color: var(--mat-sidenav-content-background-color);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    display: block;
    overflow: hidden
}

.mat-drawer-container[fullscreen] {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute
}

.mat-drawer-container[fullscreen].mat-drawer-container-has-open {
    overflow: hidden
}

.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side {
    z-index: 3
}

.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,
.mat-drawer-container.ng-animate-disabled .mat-drawer-content,
.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,
.ng-animate-disabled .mat-drawer-container .mat-drawer-content {
    transition: none
}

.mat-drawer-backdrop {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: block;
    z-index: 3;
    visibility: hidden
}

.mat-drawer-backdrop.mat-drawer-shown {
    visibility: visible;
    background-color: var(--mat-sidenav-scrim-color)
}

.mat-drawer-transition .mat-drawer-backdrop {
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: background-color, visibility
}

.cdk-high-contrast-active .mat-drawer-backdrop {
    opacity: .5
}

.mat-drawer-content {
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
    overflow: auto
}

.mat-drawer-transition .mat-drawer-content {
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: transform, margin-left, margin-right
}

.mat-drawer {
    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 4;
    --mat-sidenav-container-shape: 0;
    color: var(--mat-sidenav-container-text-color);
    background-color: var(--mat-sidenav-container-background-color);
    border-top-right-radius: var(--mat-sidenav-container-shape);
    border-bottom-right-radius: var(--mat-sidenav-container-shape);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    outline: 0;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translate3d(-100%, 0, 0)
}

.cdk-high-contrast-active .mat-drawer,
.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end {
    border-right: solid 1px currentColor
}

.cdk-high-contrast-active [dir=rtl] .mat-drawer,
.cdk-high-contrast-active .mat-drawer.mat-drawer-end {
    border-left: solid 1px currentColor;
    border-right: none
}

.mat-drawer.mat-drawer-side {
    z-index: 2
}

.mat-drawer.mat-drawer-end {
    right: 0;
    transform: translate3d(100%, 0, 0);
    border-top-left-radius: var(--mat-sidenav-container-shape);
    border-bottom-left-radius: var(--mat-sidenav-container-shape);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

[dir=rtl] .mat-drawer {
    border-top-left-radius: var(--mat-sidenav-container-shape);
    border-bottom-left-radius: var(--mat-sidenav-container-shape);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    transform: translate3d(100%, 0, 0)
}

[dir=rtl] .mat-drawer.mat-drawer-end {
    border-top-right-radius: var(--mat-sidenav-container-shape);
    border-bottom-right-radius: var(--mat-sidenav-container-shape);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    left: 0;
    right: auto;
    transform: translate3d(-100%, 0, 0)
}

.mat-drawer[style*="visibility: hidden"] {
    display: none
}

.mat-drawer-side {
    box-shadow: none;
    border-right-color: var(--mat-sidenav-container-divider-color);
    border-right-width: 1px;
    border-right-style: solid
}

.mat-drawer-side.mat-drawer-end {
    border-left-color: var(--mat-sidenav-container-divider-color);
    border-left-width: 1px;
    border-left-style: solid;
    border-right: none
}

[dir=rtl] .mat-drawer-side {
    border-left-color: var(--mat-sidenav-container-divider-color);
    border-left-width: 1px;
    border-left-style: solid;
    border-right: none
}

[dir=rtl] .mat-drawer-side.mat-drawer-end {
    border-right-color: var(--mat-sidenav-container-divider-color);
    border-right-width: 1px;
    border-right-style: solid;
    border-left: none
}

.mat-drawer-inner-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.mat-sidenav-fixed {
    position: fixed
}


.mdc-touch-target-wrapper {
    display: inline
}

.mdc-elevation-overlay {
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--mdc-elevation-overlay-opacity);
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--mdc-elevation-overlay-color)
}

.mdc-fab {
    position: relative;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    padding: 0;
    border: none;
    fill: currentColor;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    overflow: visible;
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms 0ms cubic-bezier(0, 0, 0.2, 1)
}

.mdc-fab .mdc-elevation-overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.mdc-fab[hidden] {
    display: none
}

.mdc-fab::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mdc-fab:hover {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
}

.mdc-fab.mdc-ripple-upgraded--background-focused,
.mdc-fab:not(.mdc-ripple-upgraded):focus {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
}

.mdc-fab .mdc-fab__focus-ring {
    position: absolute
}

.mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring,
.mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring {
    pointer-events: none;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 4px);
    width: calc(100% + 4px)
}

@media screen and (forced-colors: active) {

    .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring,
    .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring {
        border-color: CanvasText
    }
}

.mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring::after,
.mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring::after {
    content: "";
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 4px);
    width: calc(100% + 4px)
}

@media screen and (forced-colors: active) {

    .mdc-fab.mdc-ripple-upgraded--background-focused .mdc-fab__focus-ring::after,
    .mdc-fab:not(.mdc-ripple-upgraded):focus .mdc-fab__focus-ring::after {
        border-color: CanvasText
    }
}

.mdc-fab:active,
.mdc-fab:focus:active {
    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
}

.mdc-fab:active,
.mdc-fab:focus {
    outline: none
}

.mdc-fab:hover {
    cursor: pointer
}

.mdc-fab>svg {
    width: 100%
}

.mdc-fab--mini {
    width: 40px;
    height: 40px
}

.mdc-fab--extended {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--mdc-typography-button-font-family);
    font-size: var(--mdc-typography-button-font-size);
    line-height: var(--mdc-typography-button-line-height);
    font-weight: var(--mdc-typography-button-font-weight);
    letter-spacing: var(--mdc-typography-button-letter-spacing);
    text-decoration: var(--mdc-typography-button-text-decoration);
    text-transform: var(--mdc-typography-button-text-transform);
    border-radius: 24px;
    padding-left: 20px;
    padding-right: 20px;
    width: auto;
    max-width: 100%;
    height: 48px;
    line-height: normal
}

.mdc-fab--extended .mdc-fab__ripple {
    border-radius: 24px
}

.mdc-fab--extended .mdc-fab__icon {
    margin-left: calc(12px - 20px);
    margin-right: 12px
}

[dir=rtl] .mdc-fab--extended .mdc-fab__icon,
.mdc-fab--extended .mdc-fab__icon[dir=rtl] {
    margin-left: 12px;
    margin-right: calc(12px - 20px)
}

.mdc-fab--extended .mdc-fab__label+.mdc-fab__icon {
    margin-left: 12px;
    margin-right: calc(12px - 20px)
}

[dir=rtl] .mdc-fab--extended .mdc-fab__label+.mdc-fab__icon,
.mdc-fab--extended .mdc-fab__label+.mdc-fab__icon[dir=rtl] {
    margin-left: calc(12px - 20px);
    margin-right: 12px
}

.mdc-fab--touch {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    margin-left: 4px
}

.mdc-fab--touch .mdc-fab__touch {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 50%;
    width: 48px;
    transform: translate(-50%, -50%)
}

.mdc-fab::before {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: inherit;
    content: "";
    pointer-events: none
}

@media screen and (forced-colors: active) {
    .mdc-fab::before {
        border-color: CanvasText
    }
}

.mdc-fab__label {
    justify-content: flex-start;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible
}

.mdc-fab__icon {
    transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
    fill: currentColor;
    will-change: transform
}

.mdc-fab .mdc-fab__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.mdc-fab--exited {
    transform: scale(0);
    opacity: 0;
    transition: opacity 15ms linear 150ms, transform 180ms 0ms cubic-bezier(0.4, 0, 1, 1)
}

.mdc-fab--exited .mdc-fab__icon {
    transform: scale(0);
    transition: transform 135ms 0ms cubic-bezier(0.4, 0, 1, 1)
}

.mat-mdc-fab,
.mat-mdc-mini-fab {
    background-color: var(--mdc-fab-container-color);
    --mdc-fab-container-shape: 50%;
    --mdc-fab-icon-size: 24px
}

.mat-mdc-fab .mdc-fab__icon,
.mat-mdc-mini-fab .mdc-fab__icon {
    width: var(--mdc-fab-icon-size);
    height: var(--mdc-fab-icon-size);
    font-size: var(--mdc-fab-icon-size)
}

.mat-mdc-fab:not(:disabled) .mdc-fab__icon,
.mat-mdc-mini-fab:not(:disabled) .mdc-fab__icon {
    color: var(--mdc-fab-icon-color)
}

.mat-mdc-fab:not(.mdc-fab--extended),
.mat-mdc-mini-fab:not(.mdc-fab--extended) {
    border-radius: var(--mdc-fab-container-shape)
}

.mat-mdc-fab:not(.mdc-fab--extended) .mdc-fab__ripple,
.mat-mdc-mini-fab:not(.mdc-fab--extended) .mdc-fab__ripple {
    border-radius: var(--mdc-fab-container-shape)
}

.mat-mdc-extended-fab {
    font-family: var(--mdc-extended-fab-label-text-font);
    font-size: var(--mdc-extended-fab-label-text-size);
    font-weight: var(--mdc-extended-fab-label-text-weight);
    letter-spacing: var(--mdc-extended-fab-label-text-tracking)
}

.mat-mdc-fab,
.mat-mdc-mini-fab {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
    color: var(--mat-mdc-fab-color, inherit);
    flex-shrink: 0
}

.mat-mdc-fab .mat-mdc-button-ripple,
.mat-mdc-fab .mat-mdc-button-persistent-ripple,
.mat-mdc-fab .mat-mdc-button-persistent-ripple::before,
.mat-mdc-mini-fab .mat-mdc-button-ripple,
.mat-mdc-mini-fab .mat-mdc-button-persistent-ripple,
.mat-mdc-mini-fab .mat-mdc-button-persistent-ripple::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    border-radius: inherit
}

.mat-mdc-fab .mat-mdc-button-ripple,
.mat-mdc-mini-fab .mat-mdc-button-ripple {
    overflow: hidden
}

.mat-mdc-fab .mat-mdc-button-persistent-ripple::before,
.mat-mdc-mini-fab .mat-mdc-button-persistent-ripple::before {
    content: "";
    opacity: 0;
    background-color: var(--mat-mdc-button-persistent-ripple-color)
}

.mat-mdc-fab .mat-ripple-element,
.mat-mdc-mini-fab .mat-ripple-element {
    background-color: var(--mat-mdc-button-ripple-color)
}

.mat-mdc-fab .mdc-button__label,
.mat-mdc-mini-fab .mdc-button__label {
    z-index: 1
}

.mat-mdc-fab .mat-mdc-focus-indicator,
.mat-mdc-mini-fab .mat-mdc-focus-indicator {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute
}

.mat-mdc-fab:focus .mat-mdc-focus-indicator::before,
.mat-mdc-mini-fab:focus .mat-mdc-focus-indicator::before {
    content: ""
}

.mat-mdc-fab .mat-mdc-button-touch-target,
.mat-mdc-mini-fab .mat-mdc-button-touch-target {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 50%;
    width: 48px;
    transform: translate(-50%, -50%)
}

.mat-mdc-fab._mat-animation-noopable,
.mat-mdc-mini-fab._mat-animation-noopable {
    transition: none !important;
    animation: none !important
}

.mat-mdc-fab:hover,
.mat-mdc-fab:focus,
.mat-mdc-mini-fab:hover,
.mat-mdc-mini-fab:focus {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
}

.mat-mdc-fab:active,
.mat-mdc-fab:focus:active,
.mat-mdc-mini-fab:active,
.mat-mdc-mini-fab:focus:active {
    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12)
}

.mat-mdc-fab[disabled],
.mat-mdc-mini-fab[disabled] {
    cursor: default;
    pointer-events: none;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)
}

.mat-mdc-fab:not(.mdc-ripple-upgraded):focus::before,
.mat-mdc-mini-fab:not(.mdc-ripple-upgraded):focus::before {
    background: rgba(0, 0, 0, 0);
    opacity: 1
}

.mat-mdc-fab .mat-icon,
.mat-mdc-fab .material-icons,
.mat-mdc-mini-fab .mat-icon,
.mat-mdc-mini-fab .material-icons {
    transition: transform 180ms 90ms cubic-bezier(0, 0, 0.2, 1);
    fill: currentColor;
    will-change: transform
}

.mat-mdc-fab .mat-mdc-focus-indicator::before,
.mat-mdc-mini-fab .mat-mdc-focus-indicator::before {
    margin: calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)
}

.mat-mdc-extended-fab>.mat-icon,
.mat-mdc-extended-fab>.material-icons {
    margin-left: calc(12px - 20px);
    margin-right: 12px
}

[dir=rtl] .mat-mdc-extended-fab>.mat-icon,
[dir=rtl] .mat-mdc-extended-fab>.material-icons,
.mat-mdc-extended-fab>.mat-icon[dir=rtl],
.mat-mdc-extended-fab>.material-icons[dir=rtl] {
    margin-left: 12px;
    margin-right: calc(12px - 20px)
}

.mat-mdc-extended-fab .mdc-button__label+.mat-icon,
.mat-mdc-extended-fab .mdc-button__label+.material-icons {
    margin-left: 12px;
    margin-right: calc(12px - 20px)
}

[dir=rtl] .mat-mdc-extended-fab .mdc-button__label+.mat-icon,
[dir=rtl] .mat-mdc-extended-fab .mdc-button__label+.material-icons,
.mat-mdc-extended-fab .mdc-button__label+.mat-icon[dir=rtl],
.mat-mdc-extended-fab .mdc-button__label+.material-icons[dir=rtl] {
    margin-left: calc(12px - 20px);
    margin-right: 12px
}

.mat-mdc-extended-fab .mat-mdc-button-touch-target {
    width: 100%
}


mat-icon,
mat-icon.mat-primary,
mat-icon.mat-accent,
mat-icon.mat-warn {
    color: var(--mat-icon-color)
}

.mat-icon {
    -webkit-user-select: none;
    user-select: none;
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
    overflow: hidden
}

.mat-icon.mat-icon-inline {
    font-size: inherit;
    height: inherit;
    line-height: inherit;
    width: inherit
}

.mat-icon.mat-ligature-font[fontIcon]::before {
    content: attr(fontIcon)
}

[dir=rtl] .mat-icon-rtl-mirror {
    transform: scale(-1, 1)
}

.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon {
    display: block
}

.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,
.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon {
    margin: auto
}

/* Home CSS Style Body */
.translator-wrap .skiptranslate.goog-te-gadget,
.translator-wrap .skiptranslate.goog-te-gadget>div {
    display: inline-block
}

.translator-wrap mat-icon,
.translator-wrap lottie-player,
.translator-wrap div#google_translate_element {
    right: 15px;
    top: 8px;
    max-width: 30px;
    z-index: 10000
}

.main .container {
    background: var(--secondary-color)
}

.page-header {
    margin-bottom: 0 !important;
    min-height: auto;
    max-height: unset;
    background-color: var(--secondary-color);
    background-size: auto 360px;
    background-repeat: repeat
}

.page-header .header-wrapper.top-header {
    /* background: transparent; */
    border: none
}

.page-header .logo img {
    height: 34px;
    width: auto
}

.page-header .logo mat-icon {
    color: var(--secondary-color);
    background: var(--white-color);
    border: none
}

.page-header .header-right-cont {
    margin-right: 35px
}

.page-header .header-right-cont .selected-lang {
    margin: 1px 0 0;
    font-size: 10px;
    line-height: 1;
    color: var(--white-color);

    text-transform: uppercase;
    position: absolute;
    right: 18px;
    top: 28px
}

.page-header .header-right-cont .bal-cont {
    display: flex;
    align-items: center;
    flex-direction: column
}

.top-header .header-right-cont .bal-cont .bal-amount {
    position: relative !important;
    cursor: pointer;
    width: 100% !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center;
    column-gap: 4px;
    padding-right: 0px !important;
}

.page-header .header-right-cont .bal-cont .bal-amount.show-bal .content {
    display: flex;
    flex-direction: row-reverse;
    column-gap: 4px;
    align-items: center
}

.page-header .header-right-cont .bal-cont .bal-amount.show-bal mat-icon {
    font-size: 21px;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-header .header-right-cont .bal-cont .bal-amount.exp-bal {
    position: relative;
    cursor: pointer;
    width: 100%;
    flex-direction: row-reverse;
    justify-content: flex-start
}

.page-header .header-right-cont .bal-cont .bal-amount.exp-bal:before {
    content: "";
    background: var(--black-color);
    width: 1px;
    height: 90%;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    display: none
}

.page-header .header-right-cont .bal-cont .bal-amount mat-label,
.page-header .header-right-cont .bal-cont .bal-amount p {
    font-size: 10px;
    color: var(--black-color);
    text-align: right;
    margin: 0;
    min-width: 18px;
    line-height: 1.2;
    text-transform: capitalize
}

.page-header .header-right-cont .bal-cont .bal-amount mat-label {
    font-size: 10px;
    text-align: left
}

.page-header .header-right-cont .deposit-btn {
    width: auto;
    height: 25px;
    min-width: 45px;
    font-size: 10px;
    background: var(--white-color);
    color: var(--black-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    column-gap: 3px;
    padding: 0 5px;
    text-transform: capitalize
}

.page-header .header-right-cont .deposit-btn mat-icon {
    margin: 0;
    color: var(--black-color)
}

.page-header .header-right-cont .not-loggedIn button {
    min-width: auto;
    width: auto;
    height: 25px;
    max-width: 90px;
    font-size: 10px;
    background: var(--white-color);
    color: var(--black-color);
    border-radius: 5px;
    border: 1px solid var(--white-color);
}


.page-header .header-right-cont .not-loggedIn button.demo-btn {
    min-width: 30px;
    max-width: 65px
}

.page-header .wallet-wrapper {
    background: transparent;
    padding: 0 0 30px;
    position: relative;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-header .wallet-wrapper.not-loggedIn {
    background: transparent;
    padding: 10px 0;
    position: relative;
    height: calc(10rem + 20px);
    display: flex;
    align-items: center;
    justify-content: center
}

.page-header .wallet-wrapper .wallet-grid {
    background: var(--grey-75);
    margin: 5px auto 0;
    border-radius: 15px;
    padding: 0;
    width: 300px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    justify-content: center;
    align-items: center
}

.page-header .wallet-wrapper .wallet-grid .wa-item {
    flex-grow: 1;
    position: relative
}

.page-header .wallet-wrapper .wallet-grid .wa-item .deposit-wrap,
.page-header .wallet-wrapper .wallet-grid .wa-item .withdraw-wrap {
    min-height: 6.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.page-header .wallet-wrapper .wallet-grid .wa-item .deposit-wrap p,
.page-header .wallet-wrapper .wallet-grid .wa-item .withdraw-wrap p {
    margin: 0 0 5px;
    font-size: 10px;
    text-align: center
}

.page-header .wallet-wrapper .wallet-grid .wa-item .deposit-wrap .img-wrap img,
.page-header .wallet-wrapper .wallet-grid .wa-item .withdraw-wrap .img-wrap img {
    width: 30px;
    display: block;
    margin: auto
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance {
    position: absolute;
    width: 100%;
    min-height: 10rem;
    border-radius: 15px;
    inset: 50% 0;
    margin: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    background: var(--grey-75);
    box-shadow: 0 1px 15px 1px #330d0099
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .logo-wrap {
    width: 100%
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .logo-wrap .logo {
    width: 55%;
    padding-top: 5px;
    display: block;
    margin: auto
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .balance-info h3 {
    color: var(--white-color);
    text-transform: uppercase;
    margin: 0 0 5px;
    font-size: 10px;
    text-align: center
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .balance-info p {
    font-size: 18px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    column-gap: 5px
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .balance-info p img {
    width: 18px
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .exp-wrap {
    width: 100%
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .exp-wrap .exp-label {
    display: inline-flex;
    column-gap: 2px;
    align-items: center;
    justify-content: center
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .exp-wrap p {
    margin: 0;
    font-size: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-header .wallet-wrapper .wallet-grid .wa-item .wallet-balance .exp-wrap p mat-icon {
    color: var(--white-color);
    font-size: 16px;
    width: 16px;
    height: 16px
}

.page-header .wallet-wrapper .wallet-grid .wa-item .withdraw-wrap {
    min-height: 6rem
}

.page-header .wallet-wrapper .wallet-grid .wa-item .withdraw-wrap p {
    margin: 0 0 5px;
    font-size: 10px;
    text-align: center
}

.page-header .wallet-wrapper .wallet-grid .wa-item .withdraw-wrap .img-wrap img {
    width: 30px;
    display: block;
    margin: auto
}

.container {
    overflow: unset;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.container .page-header {
    margin-bottom: 0 !important;
    max-height: unset !important;
    min-height: auto !important;
}

.page-body.homepage {
    background: var(--grey-00) !important;
    height: 100% !important;
    padding-bottom: 45px !important;
    margin-bottom: 0 !important;
    padding-top: 10px !important;
}

.page-body {
    background: var(--grey-00);
    height: auto;
    padding: 0;
    /* margin-bottom: 70px;
    max-height: calc(100% - 110px); */
    overflow-y: auto
}

.page-body.demoID ion-content {
    min-height: calc(var(--vh, 1vh) * 100 - 260px)
}

.page-body.homepage .pagetab-wrapper {
    position: unset
}

.page-body .page-banner {
    margin: 10px 0;
    padding: 0 10px
}

.page-body .page-banner swiper-container::part(bullet-active) {
    background: var(--secondary-color);
    width: 15px;
    border-radius: 0;
    height: 3px
}

.page-body .page-banner swiper-container::part(bullet) {
    background: var(--black-color);
    opacity: 1;
    width: 15px;
    border-radius: 0;
    height: 3px;
    margin: 0 2px
}

.page-body .page-banner img {
    width: 100%;
    border-radius: 5px;
    cursor: grab
}

.page-body .create-acc {
    margin-bottom: 15px
}

.page-body .create-acc .active-acc-tab .btnWrap {
    min-height: 45px;
    display: grid;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    grid-template-columns: 1fr;
    position: relative
}

.page-body .create-acc .active-acc-tab .btnWrap:has(:last-child.jetBtnWrap) {
    grid-template-columns: 1fr 1fr
}

.page-body .create-acc .active-acc-tab .btnWrap:has(:only-child.jetBtnWrap) {
    grid-template-columns: 1fr
}

.page-body .create-acc .active-acc-tab .btnWrap:has(:only-child.jetBtnWrap) .jetBtnWrap {
    width: 100%
}

.page-body .create-acc .active-acc-tab .jetBtnWrap {
    position: absolute;
    overflow: hidden;
    z-index: 0;
    width: calc(50% - 5px);
    right: 0;
    height: 100%;
    border-radius: 10px
}

.page-body .create-acc .active-acc-tab .jetBtnWrap:before,
.page-body .create-acc .active-acc-tab .jetBtnWrap .jetxBtn:before {
    content: "";
    z-index: -2;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    position: absolute;
    width: 1000px;
    height: 1000px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(rgba(70, 121, 223, .7) 0, var(--secondary-color), rgba(70, 121, 223, .7) 45%);
    animation: _ngcontent-ng-c122799433_rotate 4s linear infinite;
    -webkit-animation: _ngcontent-ng-c122799433_rotate 4s linear infinite;
    will-change: transform
}

.page-body .create-acc .active-acc-tab .jetBtnWrap .jetxBtn {
    background: #292a2e;
    height: 100%;
    max-height: 45px;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 8px;
    padding-right: 5px;
    width: 100%
}

.page-body .create-acc .active-acc-tab .jetBtnWrap .jetxBtn.animated-border-box-glow {
    overflow: hidden;
    z-index: 1000;
    border-radius: 10px
}

.page-body .create-acc .active-acc-tab .jetBtnWrap .jetxBtn .mdc-button__label {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.page-body .create-acc .active-acc-tab .jetBtnWrap .jetxBtn img {
    height: calc(100% - 12px);
    z-index: 11;
    position: relative
}

.page-body .create-acc .active-acc-tab .jetBtnWrap .jetxBtn:after {
    background-image: url(bg_jetx.a07d70557650f895.png);
    background-size: 100%;
    background-color: #4679df;
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border-radius: 7px
}

.page-body .create-acc .create-btn {
    width: 100%;
    background: var(--secondary-color);
    border: none;
    color: var(--secondary-color-contrast);
    min-height: 45px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px
}

.page-body .create-acc .create-btn .create-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px
}

.page-body .create-acc .create-btn mat-icon[name=east] {
    font-size: 20px;
    width: 20px;
    height: 20px
}

.page-body .ids-slider-wrapper {
    margin-bottom: 15px
}

.page-body .ids-slider-wrapper .custom-id-slider {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: grid;
    grid-auto-flow: column;
    background-color: var(--grey-75);
    border-radius: 8px;
    padding: 5px
}

.page-body .ids-slider-wrapper .custom-id-slider::-webkit-scrollbar {
    width: 0px;
    height: 5px
}

.page-body .ids-slider-wrapper .custom-id-slider::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.page-body .ids-slider-wrapper .custom-id-slider:has(.grid-acc-wrapper:only-child) {
    grid-template-columns: 1fr
}

.page-body .ids-slider-wrapper .custom-id-slider:has(.grid-acc-wrapper:only-child) .grid-acc-wrapper {
    width: 100%
}

.page-body .ids-slider-wrapper .custom-id-slider:has(.grid-acc-wrapper:only-child) .grid-acc-wrapper .id-card .id-card-content .site-under-maintenance {
    justify-content: flex-end
}

.page-body .ids-slider-wrapper .custom-id-slider:has(.grid-acc-wrapper:only-child) .grid-acc-wrapper .id-card .id-card-content .site-under-maintenance p {
    align-items: center
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper {
    background: var(--grey-50);
    border-radius: 5px;
    position: relative;
    height: 100%;
    flex: 1;
    min-height: 100%;
    min-width: calc((100vw - 35px)/2)
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper:only-child {
    width: 100%
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card {
    text-align: center;
    background-repeat: no-repeat;
    background-size: 106%;
    background-position: 100% 0;
    color: var(--white-color);
    margin-top: 0;
    margin-bottom: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    border-radius: 8px;
    height: 100%
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content {
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    height: 100%;
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding-top: 0;
    padding-bottom: 0;
    justify-content: space-between
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column !important;
    width: 100%;
    padding-bottom: 0;
    height: calc(100% - 70px)
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding: 10px 5px;
    width: 100%;
    min-height: 85px;
    border-radius: 0;
    margin: 0 5px;
    width: calc(100% - 10px);
    height: 100%
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header button.view-details-btn {
    width: 100%;
    margin-top: 5px;
    border: 1px solid var(--grey-100);
    background: transparent;
    height: 27px;
    color: var(--white-color);
    font-size: 10px;
    border-radius: 5px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header p {
    margin: 0;
    column-gap: 5px;
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .id-info-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px;
    width: 100%
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .id-info-section .img-wrap {
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    width: 35px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .id-info-section .img-wrap img {
    margin-bottom: 0;
    min-height: 35px;
    max-height: 35px;
    object-fit: cover;
    border-radius: 10px;
    width: 35px;
    min-width: 35px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .id-info-section .id-info-wrap {
    display: flex;
    row-gap: 5px;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .id-info-section .id-info-wrap .info-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    column-gap: 5px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .id-info-section .id-info-wrap .info-wrap .ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 90%;
    overflow: hidden;
    display: block;
    text-align: left
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .id-info-section .id-info-wrap .info-wrap .site-url mat-icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
    color: var(--grey-900)
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .user-detail-wrap {
    display: flex;
    column-gap: 20px;
    flex-direction: column
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .icon {
    height: 18px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .icon mat-icon {
    width: 18px;
    height: 18px;
    font-size: 18px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .card-wrapper .card-header .help-text p {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    color: var(--white-color);
    opacity: .7;
    font-size: 10px;
    text-align: left
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .deposit-withdraw-btn {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 6px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 6px;
    border-radius: 8px;
    background: var(--grey-00)
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .deposit-withdraw-btn button {
    height: 55px;
    text-transform: capitalize;
    color: var(--white-color) !important;
    font-size: .7rem;
    position: relative;
    width: 100%;
    border-radius: 6px;
    margin: 0;
    border: none;
    background: var(--grey-50);
    cursor: pointer
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .deposit-withdraw-btn button:disabled {
    opacity: .5
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .deposit-withdraw-btn button .btn-text {
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 5px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .deposit-withdraw-btn button .btn-text .up-arrow {
    color: var(--green-color)
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .id-card .id-card-content .deposit-withdraw-btn button .btn-text .down-arrow {
    color: var(--red-color)
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .site-under-maintenance {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 10px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 10px;
    border: 1px solid var(--grey-100);
    border-radius: 8px;
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgb(0, 0, 0) 100%);
    z-index: 100
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .site-under-maintenance.close-id-overlay {
    background: rgba(var(--black-color-rgb), .5)
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .site-under-maintenance mat-icon {
    color: var(--yellow-color);
    width: 30px;
    font-size: 30px;
    margin-right: 10px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .site-under-maintenance p {
    font-size: 10px;
    color: var(--white-color);
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .site-under-maintenance p span {
    color: var(--white-color);
    font-size: 10px;
    opacity: .7;

}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .remark-section {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    background: #1b1a1b;
    border-radius: 0 0 10px 10px
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .remark-section.hide-remark {
    display: none
}

.page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper .remark-section p {
    margin: 6px 8px !important;
    font-size: 11px !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: 100% !important
}



.page-body .pagetab-body .pagetab-content .game-play-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1px 5px
}

.page-body .pagetab-body .pagetab-content .game-play-heading h2 {
    font-size: 12px;
    color: var(--grey-500);
    margin: 0 0 5px;
    padding-bottom: 3px;
    position: relative;

}

.page-body .pagetab-body .pagetab-content .game-play-heading h2:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: calc(100% - 10px);
    border-radius: 0 0 10px;
    background: var(--secondary-color);
    height: 2px
}

.page-body .pagetab-body .pagetab-content .game-play-heading .action-btns {
    display: flex;
    align-items: center;
    column-gap: 10px
}

.page-body .pagetab-body .pagetab-content .game-play-heading .view-all-link,
.page-body .pagetab-body .pagetab-content .game-play-heading .createID-link {
    font-size: 12px;
    font-weight: 400;
    color: var(--grey-500);
    text-decoration: unset;
    cursor: pointer;
    white-space: nowrap
}

.page-body .pagetab-body .pagetab-content .game-play-heading .createID-link {
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    column-gap: 2px
}

.page-body .pagetab-body .pagetab-content .game-play-heading .createID-link mat-icon {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab {
    margin-bottom: 15px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card {
    background: var(--black-color);
    border-radius: 10px;
    padding: 0 7px 7px;
    margin-bottom: 10px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card:last-child {
    margin: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-header {
    display: grid;
    grid-template-columns: 4fr 2fr;
    column-gap: 5px;
    row-gap: 5px;
    padding: 0;
    min-height: 30px;
    align-items: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-header .lay-back-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-header h3 {
    margin: 0;
    text-align: center;

    color: var(--grey-300);
    font-size: 10px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-header h3.team-title {
    font-size: .75rem;
    color: var(--dark-text);
    text-transform: capitalize
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-header h3.card-title {
    text-align: left;
    position: relative;
    padding: 0 10px 0 0;

    color: var(--black-color);
    display: flex;
    align-items: center;
    column-gap: 8px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-header h3 mat-icon {
    width: 12px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    border: 1px solid var(--red-color);
    color: var(--red-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap {
    display: grid;
    grid-template-columns: 4fr 2fr;
    column-gap: 5px;
    row-gap: 5px;
    padding: 0;
    min-height: 25px;
    margin-bottom: 6px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap:last-child {
    margin: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .teamlist-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px 0 0;
    column-gap: 8px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .teamlist-info span {
    width: 12px;
    height: 12px;
    background: var(--grey-75);
    border-radius: 50%;
    border: 2px solid var(--black-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .teamlist-info span.playing {
    background: var(--green-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .teamlist-info .team-title {
    text-transform: capitalize;
    font-size: 10px;

    line-height: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    color: var(--grey-300);
    margin: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .teamlist-info .flag-wrap {
    display: flex;
    align-items: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .teamlist-info p {
    margin: 0;
    line-height: 1.2;
    font-size: .625rem
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .suspended-wrap {
    border-radius: 4px;
    min-height: 25px;
    position: relative;
    display: flex;
    align-items: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .suspended-wrap:before {
    content: "";
    background: var(--back-color);
    width: 50%;
    position: absolute;
    height: 100%;
    z-index: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .suspended-wrap:after {
    content: "";
    background: var(--lay-color);
    width: 50%;
    position: absolute;
    height: 100%;
    z-index: 0;
    right: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .suspended-wrap h4 {
    text-align: center;
    margin: 0 auto;
    text-transform: capitalize;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, .7);
    z-index: 1;
    color: var(--grey-700);
    font-size: 10px;
    border-radius: 4px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-v-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value {
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    border: none;
    min-width: auto;
    min-height: 25px;
    max-height: 25px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value.back-count {
    background: var(--back-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value.lay-count {
    background: var(--lay-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value.sBtn-suspended {
    background: var(--grey-75)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value.sBtn-suspended h4 {
    font-size: 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    color: var(--grey-500);

}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value .mat-button-focus-overlay,
.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value .mat-ripple {
    display: none
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value .mat-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 4px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value h4 {
    text-align: center;
    margin: 0 auto;
    font-size: 12px;

    line-height: 14px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-card .card-body .data-wrap .count-value p {
    text-align: center;
    max-width: 30px;
    margin: 0 auto;
    line-height: normal;

    font-size: 8px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table {
    background: var(--white-color);
    border-radius: 5px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-header {
    display: grid;
    grid-template-columns: 5fr 2fr;
    column-gap: 5px;
    row-gap: 5px;
    min-height: 30px;
    align-items: center;
    padding: 5px;
    border-bottom: .5px solid var(--footer-grey-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-header .lay-back-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-header h3 {
    margin: 0;
    text-align: center;

    color: var(--grey-50);
    font-size: 10px;
    font-weight: unset
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-header h3.card-title {
    text-align: left;
    position: relative;
    padding: 0;

    color: var(--grey-50);
    display: flex;
    align-items: center;
    column-gap: 4px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-header h3.card-title mat-icon {
    width: 50px;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item {
    display: grid;
    grid-template-columns: 5fr 2fr;
    column-gap: 5px;
    row-gap: 5px;
    min-height: 45px;
    margin-bottom: 0;
    padding: 0 2px;
    border-bottom: .5px solid var(--footer-grey-color);
    align-items: center;
    cursor: pointer
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item:last-child {
    margin: 0;
    border-bottom: none
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    column-gap: 4px;
    height: 100%;
    position: relative
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .inplay-wrap {
    display: flex;
    align-items: center;
    column-gap: 7px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .inplay-wrap .inplay {
    font-size: 8px;
    background: var(--green-color);
    padding: 1px 4px;
    border-radius: 2px;
    color: var(--white-color);
    text-align: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .inplay-wrap .bookmaker-icon {
    height: 16px;
    line-height: normal;
    width: 16px;
    display: flex;
    justify-content: center;
    align-items: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .inplay-wrap .bookmaker-icon img {
    max-width: 100%
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .inplay-wrap mat-icon {
    width: 15px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    border: 1px solid var(--green-color);
    color: var(--green-color);
    border-radius: 2px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time {
    min-width: 60px;
    max-width: 60px;
    padding: 0 4px 0 0;
    border-right: .5px solid var(--footer-grey-color);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time .inplay {
    font-size: 8px;
    background: var(--green-color);
    padding: 1px 4px;
    border-radius: 2px;
    color: var(--white-color);
    text-align: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time .stumps-wrap {
    display: flex;
    flex-direction: column;
    row-gap: 3px;
    align-items: center;
    justify-content: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time .stumps-wrap .delayed-raining {
    background: var(--red-color);
    color: var(--grey-900);
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 2px;
    text-align: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time .stumps-wrap .stumps {
    background: var(--yellow-color);
    color: var(--black-color);
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 2px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time .stumps-wrap .break {
    background: var(--grey-800);
    color: var(--black-color);
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 2px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time .stumps-wrap .interrupted {
    background: var(--yellow-color);
    color: var(--black-color);
    font-size: 8px;
    padding: 2px 4px;
    border-radius: 2px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time .stumps-wrap .day {
    text-align: center;
    font-size: 8px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .match-time p {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 8px;
    text-align: center;
    margin: 0;
    color: var(--grey-50)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .team-title {
    text-transform: capitalize;
    font-size: 10px;

    line-height: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
    row-gap: 0px;
    color: var(--grey-300);
    margin: 0;
    max-width: calc(100% - 90px)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .team-title p {
    margin: 0;
    column-gap: 4px;

    color: var(--grey-50);
    padding-left: 13px;
    position: relative;
    display: flex;
    align-items: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .team-title p span.team-name {
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: normal
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .team-title p mat-icon {
    font-size: 10px;
    width: auto;
    height: auto;
    margin: 0;
    line-height: 1;
    color: var(--black-color);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .teamlist-info .team-title p img {
    width: 12px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .suspended-wrap {
    border-radius: 0;
    min-height: 43px;
    max-height: 43px;
    position: relative;
    display: flex;
    align-items: center
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .suspended-wrap:before {
    content: "";
    background: var(--back-color);
    width: 50%;
    position: absolute;
    height: 100%;
    z-index: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .suspended-wrap:after {
    content: "";
    background: var(--lay-color);
    width: 50%;
    position: absolute;
    height: 100%;
    z-index: 0;
    right: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .suspended-wrap h4 {
    text-align: center;
    margin: 0 auto;
    text-transform: capitalize;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, .7);
    z-index: 1;
    color: #ca0b0b;
    font-size: 10px;
    border-radius: 0;
    height: 43px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-v-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value {
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    align-self: center;
    justify-content: center;
    border: none;
    min-width: auto;
    min-height: 43px;
    max-height: 43px;
    border-radius: 0
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value.back-count {
    background: var(--back-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value.lay-count {
    background: var(--lay-color)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value.sBtn-suspended {
    background: var(--grey-75)
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value.sBtn-suspended h4 {
    font-size: 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    color: var(--grey-500);

}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value .mat-button-focus-overlay,
.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value .mat-ripple {
    display: none
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value .mat-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 4px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value h4 {
    text-align: center;
    margin: 0 auto;
    font-size: 12px;

    line-height: 14px
}

.page-body .pagetab-body .pagetab-content .cricket-tab .cricket-table .table-body .table-item .count-value p {
    text-align: center;
    max-width: 35px;
    margin: 0 auto;
    line-height: normal;

    font-size: 8px;
    color: var(--grey-50)
}

.page-body .pagetab-body .pagetab-content .casino-section {
    margin-bottom: 15px
}

.page-body .pagetab-body .pagetab-content .casino-section.go-casino .game-type-list ul li a img {
    height: 170px;
    object-position: top;
    object-fit: cover;
    background: var(--black-color)
}

.page-body .pagetab-body .pagetab-content .casino-section.go-casino .game-type-list ul li a:after {
    background: transparent
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list {
    margin: 0
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 8px;
    width: 100%
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li {
    margin-left: 0;
    position: relative;
    cursor: pointer
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li .total-players {
    background: var(--header-dark-color);
    border-radius: 6px;
    border: 1px solid var(--grey-600);
    color: var(--white-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 5px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 999;
    opacity: 1;
    column-gap: 5px;
    font-size: 10px;
    opacity: .9
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li .total-players mat-icon {
    font-size: 12px;
    width: auto;
    height: auto
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li .game-detail {
    background: var(--grey-100);
    padding: 25px 10px 8px;
    margin-top: -20px;
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    min-height: 80px
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li .game-detail p {
    padding-left: 0
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li .game-detail p.game-name {
    font-size: 12px;

    color: var(--white-color);
    opacity: 1
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li .game-detail p.company-type,
.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li .game-detail p.coins-limit {
    font-size: 10px;
    color: var(--white-color);
    opacity: .6;

}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li img.game-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 101;
    width: 70px;
    opacity: .7
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li ion-button {
    position: absolute;
    bottom: 3px;
    right: 6px;
    --padding-start: 0;
    --padding-end: 0;
    height: auto
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li ion-button ion-icon {
    color: var(--white-color);
    font-size: 22px
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li ion-button ion-icon.red-text {
    color: var(--red-color)
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 10
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li a p {
    font-size: 14px;
    color: var(--white-color);
    position: absolute;
    bottom: 1px;
    left: 0;
    padding-left: 12px;
    z-index: 101;
    opacity: 1;
    box-shadow: inset 0 -60px 21px -12px #000000b3;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
    border-radius: 8px
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li a.active:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: inset 0 0 30px var(--grey-75);
    z-index: 100
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li a:after {
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: rgba(0, 0, 0, .4);
    z-index: 99
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li a img {
    width: 100%;
    height: 150px;
    object-position: top center;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    border: 0px solid transparent
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li a img:hover {
    background: red
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li h3 {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    padding-left: 8px;
    line-height: normal
}

.page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul li p {
    font-size: 12px;
    margin: 0;
    padding-left: 8px;
    opacity: .6
}

.page-body .pagetab-body .nodata-wrap {
    min-height: 120px;
    background: var(--black-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.page-body .pagetab-body .nodata-wrap .game-icon {
    min-width: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--black-color);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .pagetab-body .nodata-wrap .game-icon mat-icon {
    width: 100%;
    color: var(--black-color);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .pagetab-body .nodata-wrap .game-icon img {
    width: 100%
}

.page-body .pagetab-body .nodata-wrap button {
    max-width: calc(100% - 20px);
    height: 35px;
    margin-top: 10px
}

.page-body .pagetab-body .nodata-wrap p {
    font-size: 12px;
    margin: 4px 0 0
}

.gWrap {
    position: relative
}

.gameUM {
    min-height: 250px;
    background: rgba(255, 255, 255, .85);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.gameUM p {
    font-size: 12px;
    color: var(--black-color)
}

.gameUM mat-icon {
    font-size: 40px;
    width: auto;
    height: auto;
    opacity: .7
}

.floating-btns {
    position: absolute;
    bottom: 70px;
    right: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 7px;
    z-index: 1000
}

.floating-btns.active-download {
    bottom: 125px
}

.floating-btns .btn-item {
    position: relative
}

.floating-btns .btn-item .close-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-weight: 900
}

.floating-btns .btn-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.floating-btns .btn-wrap mat-icon {
    color: var(--white-color)
}

.floating-btns .btn-wrap img {
    width: 24px;
    height: 24px
}

.floating-btns .btn-wrap.chat {
    background: var(--secondary-color);
    color: var(--secondary-color-contrast);
    width: 36px;
    height: 36px;
    margin-right: 3px
}

.floating-btns .btn-wrap.chat mat-icon {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color-contrast)
}

.floating-btns .btn-wrap.whatsapp img {
    width: 40px;
    height: 40px
}

.floating-btns .btn-wrap.whatsapp-id-btn {
    width: auto;
    height: 40px;
    column-gap: 4px;
    background: var(--header-dark-color);
    border-radius: 7px;
    padding: 0 25px 0 7px;
    border: 2px solid #01e676
}

.floating-btns .btn-wrap.whatsapp-id-btn p {
    font-size: 8px;
    max-width: 75px;
    color: var(--white-color);
    margin: 0
}

.download-btn {
    width: 100%;
    background: var(--black-color);
    border: none;
    color: var(--secondary-color);
    min-height: 45px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--secondary-color)
}

.download-btn.active-download {
    position: fixed;
    bottom: 70px;
    left: 50%;
    max-width: calc(100% - 15px);
    transform: translate(-50%);
    z-index: 9999;
    padding: 0 10px
}

.download-btn .create-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px
}

.download-btn mat-icon[name=close] {
    font-size: 20px;
    width: 20px;
    height: 20px
}

.page-body .pagetab-header .pagetab-item .newgame {
    margin: 0;
    position: absolute;
    font-size: 8px;
    background: var(--green-color);
    color: var(--black-color);
    padding: 3px 5px;
    border-radius: 3px;
    left: 50%;
    top: -7px;
    transform: translate(-50%);
    z-index: 1;
    text-align: center;
    line-height: 1
}

ion-content {
    --background: transparent;
    min-height: calc(var(--vh, 1vh) * 100 - 230px)
}

ion-content ion-refresher {
    z-index: 1;
    background: transparent
}

ion-content ion-refresher .refresher-pulling-icon ion-icon {
    color: var(--secondary-color)
}

ion-content ion-refresher .refresher-refreshing-icon ion-spinner {
    color: var(--secondary-color)
}

@media all and (min-width: 768px) {
    .page-body .pagetab-body .pagetab-content .casino-section .game-type-list ul {
        grid-template-columns: repeat(4, 1fr)
    }

    .download-btn.active-download {
        max-width: 650px
    }
}

@media all and (min-width: 480px) {
    .page-body .ids-slider-wrapper .custom-id-slider .grid-acc-wrapper {
        min-width: 180px;
        max-width: 180px
    }
}

@keyframes _ngcontent-ng-c122799433_rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0)
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

/* Home CSS Style Body End */

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    min-height: 44px;
    padding: 0 10px
}

.page-title {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0
}

.page-title h2 {
    margin: 0;
    color: var(--secondary-color-contrast);
    font-size: 16px
}

.logo {
    display: flex;
    align-items: center;
    column-gap: 6px;
    z-index: 100
}

.logo img {
    height: 34px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    cursor: pointer
}

.logo mat-icon {
    cursor: pointer;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    width: 26px;
    height: 26px;
    border: 1px solid var(--secondary-color)
}

.user-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 0
}

.user-info p {
    margin-bottom: 0;
    color: var(--black-color)
}

.user-info button {
    width: auto;
    height: auto
}

.top-header .header-right-cont .selected-lang {
    margin: 1px 0 0;
    font-size: 10px;
    line-height: 1;
    color: var(--white-color) !important;
    text-transform: uppercase;
    position: absolute;
    right: 18px;
    top: 28px
}

.top-header .header-right-cont .bal-cont {
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: flex-end !important;
    column-gap: 4px
}

.header-right-cont .bal-cont button {
    width: auto;
    height: auto;
    min-width: auto;
    padding: 0;
    box-shadow: unset;
    margin: 0;
    line-height: 1;
    display: flex
}

.header-right-cont .bal-cont button mat-icon {
    font-size: 16px;
    color: var(--white-color);
    width: auto;
    height: auto;
    margin-bottom: -2px;
    margin-right: 0
}

.header-right-cont .bal-cont bal-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.header-right-cont .bal-cont .bal-amount {
    position: relative;
    cursor: pointer;
    width: 100%;
    flex-direction: row-reverse;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    column-gap: 4px
}

.header-right-cont .bal-cont .bal-amount.show-bal .content {
    display: flex;
    flex-direction: row-reverse;
    column-gap: 4px;
    align-items: center
}

.header-right-cont .bal-cont .bal-amount.show-bal mat-icon {
    font-size: 21px;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center
}

.header-right-cont .bal-cont .bal-amount.exp-bal {
    position: relative;
    cursor: pointer;
    width: 100%;
    flex-direction: row-reverse;
    justify-content: flex-start
}

.header-right-cont .bal-cont .bal-amount.exp-bal:before {
    content: "";
    background: var(--black-color);
    width: 1px;
    height: 90%;
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    display: none
}

.header-right-cont .bal-cont .bal-amount.exp-bal p {
    text-decoration: underline
}

.top-header .header-right-cont .bal-cont .bal-amount mat-label,
.top-header .header-right-cont .bal-cont .bal-amount p {
    font-size: 10px !important;
    color: var(--white-color) !important;
    text-align: right;
    margin: 0;
    min-width: 18px;
    line-height: 1.2;
    text-transform: capitalize
}

.header-right-cont .bal-cont .bal-amount mat-label {
    font-size: 10px;
    text-align: left
}

.header-right-cont .deposit-btn {
    width: auto;
    height: 25px;
    min-width: 55px;
    font-size: 11px;
    background: var(--white-color);
    color: var(--black-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    column-gap: 3px;
    padding: 0 5px;
    text-transform: capitalize
}

.header-right-cont .deposit-btn mat-icon {
    margin: 0;
    color: var(--black-color)
}

.header-right-cont .not-loggedIn button {
    min-width: auto;
    width: auto;
    height: 25px;
    max-width: 90px;
    font-size: 10px;
    background: var(--white-color);
    color: var(--black-color);
    border-radius: 5px
}

.header-right-cont .not-loggedIn button.demo-btn {
    min-width: 30px;
    max-width: 65px;
    background: var(--secondary-color);
    color: var(--secondary-color-contrast);
    padding: 0 10px
}

.header-right-cont {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 10px;
    min-width: 30px
}

.header-right-cont .loggedIn {
    display: flex;
    align-items: center;
    column-gap: 5px
}

.header-right-cont .loggedIn mat-icon {
    color: var(--black-color);
    cursor: pointer
}

.header-right-cont .not-loggedIn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px
}

.header-right-cont .not-loggedIn button {
    height: 28px;
    max-width: 110px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 5px
}

.header-right-cont button {
    background: transparent;
    color: var(--black-color);
    font-weight: 400;
    font-size: 12px;
    border-radius: 7px !important
}

h1 {
    font-size: clamp(18px, 2vw, 20px);
    margin-bottom: 0
}

.not-loggedIn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px
}

.not-loggedIn button {
    height: 28px;
    max-width: 110px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding: 0 5px;
    color: var(--black-color);
    border: 1px solid var(--white-color)
}

.global-search .global-btn {
    padding: 0;
    min-width: 0;
    display: flex;
    width: auto;
    height: auto
}

.global-search .global-btn mat-icon {
    color: var(--secondary-color-contrast);
    cursor: pointer;
    z-index: 1
}

.exp-info {
    background-color: var(--grey-00);
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    color: var(--white-color)
}

.exp-bal {
    position: relative
}

.exp-bal .show-exp {
    position: absolute;
    top: 25px;
    right: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--grey-00);
    border-radius: 5px;
    padding: 10px;
    white-space: nowrap;
    z-index: 10000;
    min-width: 150px
}

.exp-bal .show-exp:before {
    content: "";
    position: absolute;
    top: -5px;
    right: 15px;
    background-color: var(--grey-00);
    width: 15px;
    height: 15px;
    border-radius: 0;
    transform: rotate(135deg);
    display: flex
}

.exp-bal .show-exp ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 5px
}

.exp-bal .show-exp ul li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.exp-bal .show-exp ul li label {
    font-size: 10px
}

.exp-bal .show-exp ul li p {
    margin: 0;
    font-size: 10px;
    text-decoration: none !important
}

@media only screen and (max-width: 320px) {
    .logo img {
        max-width: 75px
    }

    .header-wrapper .header-right-cont .not-loggedIn button {
        height: 20px;
        padding: 0 5px;
        font-size: 8px
    }
}


/* ====== */
.container {
    overflow: hidden
}

.page-header {
    max-height: -moz-fit-content;
    max-height: fit-content;
    margin: 0;
    min-height: auto
}

.page-header .balance-info {
    /* display: flex; */
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    /* height: 40px;
    border-top: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color); */
    background: var(--primary-color-90);
    position: sticky;
    top: 55px;
    z-index: 9999
}

.page-header .balance-info .show-bal-exp {
    margin-right: 5px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    color: var(--primary-color-contrast);
    font-weight: 300
}

.page-header .balance-info .show-bal-exp mat-label {
    margin-bottom: 2px;
    color: var(--primary-color-contrast);
    font-size: 10px;
    opacity: 1;
    line-height: 1;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    text-transform: capitalize
}

.page-header .balance-info .show-bal-exp h3 {
    line-height: 1;
    color: var(--primary-color-contrast);
    font-size: 12px;
    margin: 0
}

.page-header .balance-info .show-bal-exp .exp-bal,
.page-header .balance-info .show-bal-exp .bonus-bal,
.page-header .balance-info .show-bal-exp .current-bal {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: 5px;
    padding: 0 10px;
    text-align: right;
    flex-direction: column;
    row-gap: 2px
}

.page-header .balance-info .show-bal-exp .exp-bal {
    border-right: 1px var(--primary-color-contrast);
    border-left: 0
}

.page-header .balance-info .show-bal-exp .bonus-bal {
    border-right: 1px var(--primary-color-contrast)
}

.page-header .balance-info .show-bal-exp .current-bal {
    position: relative;
    padding-right: 35px;
    margin-left: 0;
    cursor: pointer
}

.page-header .balance-info .show-bal-exp .current-bal:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 40px;
    width: 100%;
    z-index: -1;
    transform: translate(-50%, -50%);
    border-radius: 4px
}

.page-header .balance-info .show-bal-exp .current-bal .add-btn {
    color: var(--primary-color-contrast);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%)
}

.page-body.not-loggedIn {
    height: calc(100% - 103px)
}

.page-body.not-loggedIn .mat-mdc-tab-group .mat-mdc-tab-body-wrapper {
    height: calc(100% - 40px)
}

.page-body.demoID {
    height: calc(100% - 120px)
}

.page-body.demoID .mat-mdc-tab-group .mat-mdc-tab-body-wrapper {
    height: calc(100% - 50px)
}

.page-body .pagetab-wrapper {
    margin: 0
}

.page-body .inplay-page-wrap {
    height: 100%
}

.page-body .inplay-page-wrap .special-wrapper {
    padding: 0 10px 10px;
    overflow-y: auto;
    max-height: calc(100% - 135px)
}

.page-body .inplay-page-wrap .special-wrapper .sw-item {
    background: var(--white-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 10px;
    margin: 0 0 10px;
    cursor: pointer
}

.page-body .inplay-page-wrap .special-wrapper .sw-item .title-details {
    max-width: 70%
}

.page-body .inplay-page-wrap .special-wrapper .sw-item .title-details h2 {
    font-size: 12px;

    margin: 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.page-body .inplay-page-wrap .special-wrapper .sw-item .title-details p {
    margin: 0;
    font-size: 10px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.page-body .inplay-page-wrap .special-wrapper .sw-item .title-details .highlight {
    color: var(--secondary-color);

}

.page-body .inplay-page-wrap .special-wrapper .sw-item .date-time {
    max-width: 30%
}

.page-body .inplay-page-wrap .special-wrapper .sw-item .date-time p {
    font-size: 10px;
    margin: 0;
    text-align: right;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.page-body .mat-mdc-tab-group {
    height: 100%
}

.page-body .mat-mdc-tab-group mat-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list .mat-mdc-tab-labels .mdc-tab .mdc-tab__content .mdc-tab__text-label {
    column-gap: 10px
}

.page-body .mat-mdc-tab-group .mat-mdc-tab-body-wrapper {
    height: calc(100% - 55px);
    padding: 0
}

.page-body .mat-mdc-tab-group.not-loggedIn .mat-mdc-tab-header {
    top: 44px
}

.page-body .mat-mdc-tab-group .mat-mdc-tab-header {
    position: sticky;
    /* top: 44px; */
    width: 100%;
    z-index: 1000
}

.page-body .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab {
    width: 33.3333333333%;
    position: relative
}

.page-body .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 25px;
    right: 0;
    z-index: 1;
    background: var(--white-color);
    top: 50%;
    transform: translateY(-50%);
    opacity: .5
}

.page-body .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab:last-child {
    border: none
}

.page-body .mat-mdc-tab-group .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab:last-child:after {
    display: none
}

.page-body .matches-wrap {
    padding: 10px 10px 30px
}

.page-body .matches-wrap .title-bar {
    padding: 0
}

.page-body .matches-wrap .title-bar:first-child {
    margin-top: 0
}

.page-body .matches-wrap .title-bar:not(:first-child) {
    margin-top: 20px
}

.page-body .matches-wrap .game-card {
    padding: 10px;
    border-radius: 10px;
    background: var(--white-color);
    margin-bottom: 10px;
    overflow: hidden;
    z-index: 100
}

.page-body .matches-wrap .game-card .match-status-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.page-body .matches-wrap .game-card .match-status-img img {
    width: 60px;
    background: var(--white-color)
}

.page-body .matches-wrap .game-card.ipl-league,
.page-body .matches-wrap .game-card.icc-league {
    background-size: 100px;
    background-position: center;
    background-repeat: no-repeat
}

.page-body .matches-wrap .game-card.ipl-league:before,
.page-body .matches-wrap .game-card.icc-league:before {
    content: "";
    width: 25%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: -55px;
    aspect-ratio: 3/1;
    transform: rotate(140deg);
    z-index: 1;
    min-width: 120px
}

.page-body .matches-wrap .game-card.ipl-league:after,
.page-body .matches-wrap .game-card.icc-league:after {
    content: "";
    width: 25%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    top: -18px;
    right: -42px;
    aspect-ratio: 3/1;
    transform: rotate(140deg);
    z-index: 1;
    min-width: 120px
}

.page-body .matches-wrap .game-card.ipl-league .teams-wrap .img-wrap,
.page-body .matches-wrap .game-card.icc-league .teams-wrap .img-wrap {
    background-color: var(--white-color);
    border-radius: 50%;
    border: 2px solid #19398A;
    padding: 8px;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    position: relative;
    z-index: 100
}

.page-body .matches-wrap .game-card.ipl-league .teams-wrap .img-wrap img,
.page-body .matches-wrap .game-card.icc-league .teams-wrap .img-wrap img {
    width: 100%;
    height: auto
}

.page-body .matches-wrap .game-card.icc-league {
    background-image: url(icc-logo.ca46bb0b94d87db3.svg)
}

.page-body .matches-wrap .game-card.icc-league:before {
    background-image: url(icc-pattern.5aed659ebf3466bb.svg);
    width: 35%;
    transform: rotate(-10deg);
    left: -3px;
    opacity: .5
}

.page-body .matches-wrap .game-card.icc-league:after {
    background-image: url(icc-pattern.5aed659ebf3466bb.svg);
    top: 20px;
    right: -8px;
    opacity: .5;
    transform: rotate(168deg);
    width: 35%
}

.page-body .matches-wrap .game-card.ipl-league {
    background-image: url(ipl-logo.2d4cfed0a6b78ee0.svg)
}

.page-body .matches-wrap .game-card.ipl-league:before {
    background-image: url(ipl-pattern.53ab9bf596cb89cf.svg)
}

.page-body .matches-wrap .game-card.ipl-league:after {
    background-image: url(ipl-pattern_r.54a4172ab17ef787.svg);
    top: 20px;
    right: -65px;
    opacity: 1;
    transform: rotate(70deg);
    width: 35%
}

.page-body .matches-wrap .game-card.wc-t20 {
    background-image: url(wc-logo.8b26fd49763134d4.svg);
    background-size: 60px;
    background-position: center;
    background-repeat: no-repeat;
    border-left: 2px solid;
    border-image: linear-gradient(to top, transparent 25%, #3c27ff 25%, #3C27FF 50%, #ff0088 50%, #ff0088 75%, transparent 75%) 1
}

.page-body .matches-wrap .game-card.wc-t20:after {
    content: "";
    width: auto;
    background-image: url(wc_side_icon.ef08b8889dcbcb4f.svg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 65px;
    position: absolute;
    bottom: -5px;
    right: -55px;
    aspect-ratio: 2/1;
    z-index: -3;
    min-width: 120px
}

.page-body .matches-wrap .game-card.wc-t20 .teams-wrap .img-wrap {
    background-color: var(--white-color);
    border-radius: 50%;
    border: 2px solid #19398A;
    padding: 8px;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    position: relative;
    z-index: 100
}

.page-body .matches-wrap .game-card.wc-t20 .teams-wrap .img-wrap img {
    width: 100%;
    height: auto
}

.page-body .matches-wrap .game-card.list-view h2 {
    font-size: 12px;
    margin-bottom: 2px;
    padding: 0 4px;
    font-weight: 400
}

.page-body .matches-wrap .game-card.list-view .game-card-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--light-grey);
    column-gap: 10px
}

.page-body .matches-wrap .game-card.list-view .game-card-title h3 {
    flex-direction: column;
    align-items: flex-start;
    font-size: 11px;
    line-height: normal;
    margin: 0;
    display: flex
}

.page-body .matches-wrap .game-card.list-view .game-card-title h3 .tournament-name {
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .8;

    font-weight: 300
}

.page-body .matches-wrap .game-card.list-view .game-card-title h3 .match-name {
    font-weight: 700;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

}

.page-body .matches-wrap .game-card.list-view .game-card-title p {
    margin: 0;
    color: var(--dark-text);
    font-size: 10px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 25%
}

.page-body .matches-wrap .game-card.list-view .game-card-title p.time {
    text-overflow: unset;
    min-width: 125px;
    text-align: right;
    max-width: unset
}

.page-body .matches-wrap .game-card.w-icon-view {
    position: relative;
    padding: 10px 5px;
    cursor: pointer;
    min-height: 140px;
    align-items: center;
    display: flex;
    flex-direction: column
}

.page-body .matches-wrap .game-card.w-icon-view .tournament-title {
    margin: 0 0 5px;
    text-align: center;
    font-size: 10px;
    opacity: .5;
    line-height: 1
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
    margin: auto 0;
    width: 100%
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap .team-item {
    margin-bottom: 15px
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap .team-item h2 {
    font-size: 12px;
    margin: 0;
    text-align: center
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap .img-wrap {
    margin-bottom: 5px
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap .img-wrap img {
    width: 40px;
    height: 40px;
    max-width: 75px;
    max-height: 75px;
    object-fit: contain;
    display: block;
    margin: auto
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap .score-info {
    display: flex;
    flex-direction: column;
    align-items: center
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap .score-info h3 {
    font-size: 10px;
    margin: 0;
    text-align: center;
    max-width: 120px
}

.page-body .matches-wrap .game-card.w-icon-view .teams-wrap .score-info p {
    font-size: 10px;
    margin: 0;
    text-align: center;
    opacity: .5;
    max-width: 120px
}

.page-body .matches-wrap .game-card.w-icon-view .schedule-time {
    margin: 0;
    font-size: 10px;
    text-align: center;
    padding: 3px 10px;
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    white-space: nowrap;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border-radius: 6px 6px 0 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    line-height: 1;
    min-width: 150px
}

.page-body .matches-wrap .game-card.tennis-cards {
    position: relative;
    padding: 10px 5px;
    cursor: pointer
}

.page-body .matches-wrap .game-card.tennis-cards .tournament-title {
    margin: 0 0 5px;
    text-align: center;
    font-size: 10px;
    opacity: .5;
    line-height: 1
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
    min-height: 45px;
    column-gap: 7px
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .team-item {
    margin-bottom: 15px
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .team-item .player-wrap .player-initials {
    min-width: 30px;
    min-height: 30px;
    border-radius: 5px;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    aspect-ratio: 1/1
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .team-item .player-wrap .player-initials p {
    font-size: 10px;
    color: var(--secondary-color-contrast);
    margin: 0;
    line-height: 1;
    text-transform: uppercase
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .team-item h2 {
    font-size: 12px;
    margin: 0;
    text-align: center
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .team-item h2.vs-text {
    text-align: center !important
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .img-wrap img {
    width: auto;
    height: 34px;
    max-width: 75px;
    max-height: 75px;
    object-fit: contain;
    display: block;
    margin: auto
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .img-wrap .p-initials {
    width: 40px;
    height: 40px
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .score-info {
    display: flex;
    flex-direction: column;
    align-items: center
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .score-info h3 {
    font-size: 10px;
    margin: 0;
    text-align: center;
    max-width: 120px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.page-body .matches-wrap .game-card.tennis-cards .teams-wrap .score-info p {
    font-size: 10px;
    margin: 0;
    text-align: center;
    opacity: .5;
    max-width: 120px;
    color: var(--black-color)
}

.page-body .matches-wrap .game-card.tennis-cards .schedule-time {
    margin: 0;
    font-size: 10px;
    text-align: center;
    padding: 3px 10px;
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border-radius: 6px 6px 0 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    line-height: 1
}

.page-body .no-data {
    height: calc(100% - 80px);
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .no-data p {
    margin: 0;
    font-size: 12px;
    opacity: .5
}

.page-body .predict-winner {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    max-width: 740px;
    background: var(--grey-00);
    border-radius: 6px;
    z-index: 1;
    padding: 5px 10px 15px
}

.page-body .predict-winner .row-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 5px;
    padding: 5px 10px;
    background: var(--grey-100);
    border-radius: 6px
}

.page-body .predict-winner .row-wrap .pw-title {
    display: flex;
    align-items: center;
    column-gap: 5px
}

.page-body .predict-winner .row-wrap .pw-title img {
    max-width: 25px
}

.page-body .predict-winner .row-wrap .pw-title h3 {
    margin: 0;
    font-size: .75rem;
    font-weight: 500
}

.page-body .predict-winner .row-wrap button {
    background: var(--primary-color);
    font-size: 10px;
    max-height: 30px;
    display: flex;
    align-items: center;
    color: var(--primary-color-contrast)
}

.coming-soon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(100% - 160px)
}

.coming-soon .img-wrap img {
    max-width: 70px;
    display: block;
    margin: auto;
    width: 70px
}

.coming-soon p.text {
    margin: 5px 0 0;
    font-size: 12px
}

.floating-btns {
    position: absolute;
    bottom: 70px;
    right: 5px;
    z-index: 1000
}

.floating-btns .btn-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%
}

.floating-btns .btn-wrap.whatsapp img {
    width: 40px;
    height: 40px;
    filter: drop-shadow(0px 0px 5px var(--grey-200))
}

.special-market {
    max-height: calc(100% - 15px);
    overflow-y: auto;
    padding: 10px
}

.special-market .market-card {
    border-radius: 10px;
    background: var(--white-color);
    margin-bottom: 10px;
    height: 120px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    padding: 0 15px
}

.special-market .market-card .img-wrap {
    width: 75px;
    min-width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center
}

.special-market .market-card .img-wrap .mkt-img {
    width: 100%;
    height: auto;
    object-fit: contain
}

.special-market .market-card .event-title h2 {
    font-size: 12px;
    margin: 0;
    text-align: left;

}

.special-market .market-card .event-title p {
    font-size: 10px;
    color: var(--black-text);
    opacity: .8;
    margin: 2px 0 0;

}

.special-market .game-card {
    padding: 10px;
    border-radius: 10px;
    background: var(--white-color);
    margin-bottom: 10px;
    overflow: hidden;
    z-index: 100;
    height: 120px
}

.special-market .game-card.ipl-league {
    background-size: 100px;
    background-position: center;
    background-repeat: no-repeat
}

.special-market .game-card.ipl-league:before {
    content: "";
    width: 25%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: -65px;
    aspect-ratio: 3/1;
    transform: rotate(140deg);
    z-index: 1;
    min-width: 120px
}

.special-market .game-card.ipl-league:after {
    content: "";
    width: 25%;
    background-position: 0 0;
    background-repeat: no-repeat;
    position: absolute;
    top: -18px;
    right: -42px;
    aspect-ratio: 3/1;
    transform: rotate(140deg);
    z-index: 1;
    min-width: 120px
}

.special-market .game-card.ipl-league .teams-wrap .img-wrap {
    background-color: var(--white-color);
    border-radius: 50%;
    border: 2px solid #19398A;
    padding: 8px;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    position: relative;
    z-index: 100
}

.special-market .game-card.ipl-league .teams-wrap .img-wrap img {
    width: 100%;
    height: auto
}

.special-market .game-card.list-view h2 {
    font-size: 12px;
    margin-bottom: 2px;
    padding: 0 4px;
    font-weight: 400
}

.special-market .game-card.list-view .game-card-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--light-grey);
    column-gap: 10px
}

.special-market .game-card.list-view .game-card-title h3 {
    flex-direction: column;
    align-items: flex-start;
    font-size: 11px;
    line-height: normal;
    margin: 0;
    display: flex
}

.special-market .game-card.list-view .game-card-title h3 .tournament-name {
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: .8;

    font-weight: 300
}

.special-market .game-card.list-view .game-card-title h3 .match-name {
    font-weight: 700;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

}

.special-market .game-card.list-view .game-card-title p {
    margin: 0;
    color: var(--dark-text);
    font-size: 10px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 25%
}

.special-market .game-card.list-view .game-card-title p.time {
    text-overflow: unset;
    min-width: 125px;
    text-align: right;
    max-width: unset
}

.special-market .game-card.w-icon-view {
    position: relative;
    padding: 10px 5px;
    cursor: pointer
}

.special-market .game-card.w-icon-view .tournament-title {
    margin: 0 0 5px;
    text-align: center;
    font-size: 10px;
    opacity: .5;
    line-height: 1
}

.special-market .game-card.w-icon-view .teams-wrap {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 12px
}

.special-market .game-card.w-icon-view .teams-wrap .team-item h2 {
    font-size: 12px;
    margin: 0;
    text-align: center
}

.special-market .game-card.w-icon-view .teams-wrap .img-wrap {
    margin-bottom: 5px
}

.special-market .game-card.w-icon-view .teams-wrap .img-wrap img {
    width: 40px;
    height: 40px;
    max-width: 75px;
    max-height: 75px;
    object-fit: contain;
    display: block;
    margin: auto
}

.special-market .game-card.w-icon-view .teams-wrap .score-info {
    display: flex;
    flex-direction: column;
    align-items: center
}

.special-market .game-card.w-icon-view .teams-wrap .score-info h3 {
    font-size: 10px;
    margin: 0;
    text-align: center;
    max-width: 120px;

}

.special-market .game-card.w-icon-view .teams-wrap .score-info p {
    font-size: 10px;
    margin: 0;
    text-align: center;
    opacity: .5;
    max-width: 120px
}

.special-market .game-card.w-icon-view .schedule-time {
    margin: 0;
    font-size: 10px;
    text-align: center;
    padding: 3px 10px;
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    white-space: nowrap;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border-radius: 6px 6px 0 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    line-height: 1;
    min-width: 150px
}

.special-market .game-card.tennis-cards {
    position: relative;
    padding: 10px 5px;
    cursor: pointer
}

.special-market .game-card.tennis-cards .tournament-title {
    margin: 0 0 5px;
    text-align: center;
    font-size: 10px;
    opacity: .5;
    line-height: 1
}

.special-market .game-card.tennis-cards .teams-wrap {
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: repeat(3, 1fr);
    min-height: 45px;
    column-gap: 7px
}

.special-market .game-card.tennis-cards .teams-wrap .team-item {
    margin-bottom: 15px
}

.special-market .game-card.tennis-cards .teams-wrap .team-item .player-wrap .player-initials {
    min-width: 30px;
    min-height: 30px;
    border-radius: 5px;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    aspect-ratio: 1/1
}

.special-market .game-card.tennis-cards .teams-wrap .team-item .player-wrap .player-initials p {
    font-size: 10px;
    color: var(--secondary-color-contrast);
    margin: 0;
    line-height: 1;
    text-transform: uppercase
}

.special-market .game-card.tennis-cards .teams-wrap .team-item h2 {
    font-size: 12px;
    margin: 0;
    text-align: center
}

.special-market .game-card.tennis-cards .teams-wrap .team-item h2.vs-text {
    text-align: center !important
}

.special-market .game-card.tennis-cards .teams-wrap .img-wrap img {
    width: auto;
    height: 34px;
    max-width: 75px;
    max-height: 75px;
    object-fit: contain;
    display: block;
    margin: auto
}

.special-market .game-card.tennis-cards .teams-wrap .img-wrap .p-initials {
    width: 40px;
    height: 40px
}

.special-market .game-card.tennis-cards .teams-wrap .score-info {
    display: flex;
    flex-direction: column;
    align-items: center
}

.special-market .game-card.tennis-cards .teams-wrap .score-info h3 {
    font-size: 10px;
    margin: 0;
    text-align: center;
    max-width: 120px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.special-market .game-card.tennis-cards .teams-wrap .score-info p {
    font-size: 10px;
    margin: 0;
    text-align: center;
    opacity: .5;
    max-width: 120px
}

.special-market .game-card.tennis-cards .schedule-time {
    margin: 0;
    font-size: 10px;
    text-align: center;
    padding: 3px 10px;
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    background: var(--primary-color);
    color: var(--primary-color-contrast);
    border-radius: 6px 6px 0 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    line-height: 1
}


.demoid-marquee[_ngcontent-ng-c3660323651] {
    background: var(--red-color);
    color: var(--black-color);
    font-size: 10px;
    padding: 5px 10px;
    bottom: 0;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.demoid-marquee[_ngcontent-ng-c3660323651] marquee[_ngcontent-ng-c3660323651] {
    display: none
}

.demoid-marquee[_ngcontent-ng-c3660323651] p.marquee[_ngcontent-ng-c3660323651] {
    display: block;
    margin: 0;
    color: var(--black-color);
    font-size: 10px;
    text-align: center
}

app-footer app-demoid-marquee .demoid-marquee {
    position: static !important;
    padding: 7px 10px 20px !important;
    margin-bottom: -18px !important
}

@media only screen and (max-width: 340px) {
    .demoid-marquee[_ngcontent-ng-c3660323651] marquee[_ngcontent-ng-c3660323651] {
        display: block
    }

    .demoid-marquee[_ngcontent-ng-c3660323651] p.marquee[_ngcontent-ng-c3660323651] {
        display: none
    }
}


.demoid-marquee[_ngcontent-ng-c3080817936] {
    background: var(--primary-color-tint);
    color: var(--white-color);
    font-size: 10px;
    padding: 5px 10px;
    bottom: 0;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.demoid-marquee[_ngcontent-ng-c3080817936] marquee[_ngcontent-ng-c3080817936] {
    display: none
}

.demoid-marquee[_ngcontent-ng-c3080817936] p.marquee[_ngcontent-ng-c3080817936] {
    display: block;
    margin: 0;
    color: var(--white-color);
    font-size: 10px;
    text-align: center
}

app-footer app-demoid-marquee .demoid-marquee {
    position: static !important;
    padding: 7px 10px 20px !important;
    margin-bottom: -18px !important
}

@media only screen and (max-width: 340px) {
    .demoid-marquee[_ngcontent-ng-c3080817936] marquee[_ngcontent-ng-c3080817936] {
        display: block
    }

    .demoid-marquee[_ngcontent-ng-c3080817936] p.marquee[_ngcontent-ng-c3080817936] {
        display: none
    }
}

/* Footer Style */

.tab-navigation {
    border-radius: 20px 20px 0 0;
    padding: 6px 0;
    background: var(--black-color);
    height: 60px;
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 100
}

.tab-navigation button {
    width: 100%;
    min-width: auto;
    padding: 0
}

.tab-navigation button .mdc-button__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 5px
}

.tab-navigation button .mdc-button__label span[class^=ai-] {
    font-size: 18px;
    color: var(--grey-300)
}

.tab-navigation button .mdc-button__label img {
    width: 30px;
    max-height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 35px;
    margin: 0 auto
}

.tab-navigation button .mdc-button__label p {
    margin: 0;
    font-size: 10px;
    text-transform: capitalize;
    color: var(--grey-300);
    white-space: nowrap
}

.tab-navigation button.active-link .mdc-button__label span[class^=ai-] {
    color: var(--secondary-color)
}

.tab-navigation button.active-link p {
    color: var(--secondary-color)
}

.tab-navigation button.home img {
    background-repeat: no-repeat;
    background-position: center -40px
}

.tab-navigation button.home.active-link img {
    background-repeat: no-repeat;
    background-position: center -5px
}

.tab-navigation button.cricket img {
    background-repeat: no-repeat;
    background-position: center -110px
}

.tab-navigation button.cricket.active-link img {
    background-repeat: no-repeat;
    background-position: center -75px
}

.tab-navigation button.casino img {
    background-repeat: no-repeat;
    background-position: center -180px
}

.tab-navigation button.casino.active-link img {
    background-repeat: no-repeat;
    background-position: center -145px
}

.tab-navigation button.profile img {
    background-repeat: no-repeat;
    background-position: center -250px
}

.tab-navigation button.profile.active-link img {
    background-repeat: no-repeat;
    background-position: center -215px
}

.tab-navigation button.market img {
    background-repeat: no-repeat;
    background-position: center -320px
}

.tab-navigation button.market.active-link img {
    background-repeat: no-repeat;
    background-position: center -285px
}

.tab-navigation button.offers img {
    background-repeat: no-repeat;
    background-position: center -390px
}

.tab-navigation button.offers.active-link img {
    background-repeat: no-repeat;
    background-position: center -355px
}

.tab-navigation button.refer img {
    background-repeat: no-repeat;
    background-position: center -460px
}

.tab-navigation button.refer.active-link img {
    background-repeat: no-repeat;
    background-position: center -425px
}

.tab-navigation button.passbook img {
    background-repeat: no-repeat;
    background-position: center -530px
}

.tab-navigation button.passbook.active-link img {
    background-repeat: no-repeat;
    background-position: center -495px
}

#menu {
    height: 230px;
    margin-bottom: -10px;
    border-radius: 50% 50% 0 0;
    padding: 0
}

.menu-item {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 50%;
    line-height: 5px;
    bottom: 0;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    background-color: #424242;
    transform: translate(0);
    transition: transform .5s;
    z-index: 2;
    transition: .5s;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.menu-item img {
    width: 20px;
    height: 20px
}

.menu-item:hover {
    opacity: .5;
    box-shadow: 0 5px 10px #000
}

.container-menu ul:has(> :last-child:nth-child(3)) .menu-item:nth-child(4) {
    transform: rotate(60deg) translateY(-150px) rotate(300deg);
    transition-delay: 0s
}

.container-menu ul:has(> :last-child:nth-child(3)) .menu-item:nth-child(3) {
    transform: rotate(20deg) translateY(-155px) rotate(-20deg);
    transition-delay: .1s
}

.container-menu ul:has(> :last-child:nth-child(3)) .menu-item:nth-child(2) {
    transform: rotate(-20deg) translateY(-155px) rotate(20deg);
    transition-delay: .2s
}

.container-menu ul:has(> :last-child:nth-child(3)) .menu-item:nth-child(1) {
    transform: rotate(-60deg) translateY(-150px) rotate(60deg);
    transition-delay: .3s
}

.container-menu ul:has(> :last-child:nth-child(4)) .menu-item:nth-child(4) {
    transform: rotate(60deg) translateY(-150px) rotate(300deg);
    transition-delay: 0s
}

.container-menu ul:has(> :last-child:nth-child(4)) .menu-item:nth-child(3) {
    transform: rotate(20deg) translateY(-155px) rotate(-20deg);
    transition-delay: .1s
}

.container-menu ul:has(> :last-child:nth-child(4)) .menu-item:nth-child(2) {
    transform: rotate(-20deg) translateY(-155px) rotate(20deg);
    transition-delay: .2s
}

.container-menu ul:has(> :last-child:nth-child(4)) .menu-item:nth-child(1) {
    transform: rotate(-60deg) translateY(-150px) rotate(60deg);
    transition-delay: .3s
}

.container-menu ul:has(> :last-child:nth-child(6)) .menu-item:nth-child(6) {
    transform: rotate(64deg) translateY(-150px) rotate(-64deg);
    transition-delay: 0s
}

.container-menu ul:has(> :last-child:nth-child(6)) .menu-item:nth-child(5) {
    transform: rotate(37deg) translateY(-150px) rotate(-38deg);
    transition-delay: 0s
}

.container-menu ul:has(> :last-child:nth-child(6)) .menu-item:nth-child(4) {
    transform: rotate(12deg) translateY(-155px) rotate(-12deg);
    transition-delay: 0s
}

.container-menu ul:has(> :last-child:nth-child(6)) .menu-item:nth-child(3) {
    transform: rotate(-12deg) translateY(-155px) rotate(12deg);
    transition-delay: .1s
}

.container-menu ul:has(> :last-child:nth-child(6)) .menu-item:nth-child(2) {
    transform: rotate(-37deg) translateY(-155px) rotate(35deg);
    transition-delay: .2s
}

.container-menu ul:has(> :last-child:nth-child(6)) .menu-item:nth-child(1) {
    transform: rotate(-65deg) translateY(-150px) rotate(65deg);
    transition-delay: .3s
}

.container-menu.listview ul#menu {
    margin-bottom: 0;
    width: -moz-fit-content;
    width: fit-content;
    position: absolute;
    left: calc(25% + 25px);
    bottom: 75px;
    background: var(--grey-50);
    padding: 5px;
    border-radius: 5px;
    height: auto
}

.container-menu.listview ul#menu .menu-item {
    width: 60px;
    height: 60px;
    position: unset;
    left: calc(25% + 25px);
    line-height: 5px;
    bottom: 60px;
    background-color: #424242;
    transform: unset !important;
    transition: transform .5s;
    z-index: 2;
    transition: .5s;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 5px;
    border-radius: 0
}

.container-menu.listview ul#menu .menu-item:last-child {
    margin-bottom: 0
}

.menu-item a {
    color: #fff;
    position: relative;
    left: 0;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.menu-item a p {
    margin: 5px 0 0;
    font-size: 9px;
    text-align: center;
    line-height: 1;
    padding: 0 5px
}

.footer-subMenu.mat-mdc-menu-panel {
    background: var(--grey-75);
    min-width: 160px;
    margin-bottom: 15px;
    border-radius: 10px
}

.footer-subMenu.mat-mdc-menu-panel .fs-menu-item {
    min-height: auto;
    height: 40px;
    padding: 0 5px;
    max-width: calc(100% - 15px);
    margin: auto auto 10px;
    background: var(--grey-100);
    border: 1px solid var(--grey-100);
    border-radius: 10px
}

.footer-subMenu.mat-mdc-menu-panel .fs-menu-item:hover {
    border: 1px solid var(--grey-100)
}

.footer-subMenu.mat-mdc-menu-panel .fs-menu-item.active-link {
    background: var(--grey-00);
    border: 1px solid var(--secondary-color)
}

.footer-subMenu.mat-mdc-menu-panel .fs-menu-item:last-child {
    margin-bottom: 0
}

.footer-subMenu.mat-mdc-menu-panel .fs-menu-item .mat-mdc-menu-item-text {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 5px
}

.footer-subMenu.mat-mdc-menu-panel .fs-menu-item .mat-mdc-menu-item-text img {
    width: 20px;
    height: 20px
}

.footer-subMenu.mat-mdc-menu-panel .fs-menu-item .mat-mdc-menu-item-text p {
    font-size: 12px
}

.plt-pwa .tab-navigation {
    height: 70px;
    padding-bottom: 15px
}

/* Footer End  */

.floating-btns2[_ngcontent-ng-c2345734034] {
    position: absolute;
    bottom: 120px;
    right: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 7px;
    z-index: 1000
}

.floating-btns2[_ngcontent-ng-c2345734034] .btn-item[_ngcontent-ng-c2345734034] {
    position: relative
}

.floating-btns2[_ngcontent-ng-c2345734034] .btn-wrap[_ngcontent-ng-c2345734034] {
    background: var(--primary-color);
    width: 36px;
    height: 36px;
    margin-right: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.floating-btns2[_ngcontent-ng-c2345734034] .btn-wrap[_ngcontent-ng-c2345734034] mat-icon[_ngcontent-ng-c2345734034] {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color-contrast)
}

.badge[_ngcontent-ng-c2345734034] {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center
}

.d-none[_ngcontent-ng-c2345734034] {
    display: none !important
}


mat-menu {
    display: none
}

.mat-mdc-menu-content {
    margin: 0;
    padding: 8px 0;
    list-style-type: none
}

.mat-mdc-menu-content:focus {
    outline: none
}

.mat-mdc-menu-content,
.mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    white-space: normal;
    font-family: var(--mat-menu-item-label-text-font);
    line-height: var(--mat-menu-item-label-text-line-height);
    font-size: var(--mat-menu-item-label-text-size);
    letter-spacing: var(--mat-menu-item-label-text-tracking);
    font-weight: var(--mat-menu-item-label-text-weight)
}

.mat-mdc-menu-panel {
    --mat-menu-container-shape: 4px;
    min-width: 112px;
    max-width: 280px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    outline: 0;
    border-radius: var(--mat-menu-container-shape);
    background-color: var(--mat-menu-container-color);
    will-change: transform, opacity
}

.mat-mdc-menu-panel.ng-animating {
    pointer-events: none
}

.cdk-high-contrast-active .mat-mdc-menu-panel {
    outline: solid 1px
}

.mat-mdc-menu-item {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    outline: none;
    border: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    color: inherit;
    font-size: inherit;
    background: none;
    text-decoration: none;
    margin: 0;
    align-items: center;
    min-height: 48px
}

.mat-mdc-menu-item:focus {
    outline: none
}

[dir=rtl] .mat-mdc-menu-item,
.mat-mdc-menu-item[dir=rtl] {
    padding-left: 16px;
    padding-right: 16px
}

.mat-mdc-menu-item::-moz-focus-inner {
    border: 0
}

.mat-mdc-menu-item,
.mat-mdc-menu-item:visited,
.mat-mdc-menu-item:link {
    color: var(--mat-menu-item-label-text-color)
}

.mat-mdc-menu-item .mat-icon-no-color,
.mat-mdc-menu-item .mat-mdc-menu-submenu-icon {
    color: var(--mat-menu-item-icon-color)
}

.mat-mdc-menu-item[disabled] {
    cursor: default;
    opacity: .38
}

.mat-mdc-menu-item[disabled]::after {
    display: block;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.mat-mdc-menu-item .mat-icon {
    margin-right: 16px
}

[dir=rtl] .mat-mdc-menu-item {
    text-align: right
}

[dir=rtl] .mat-mdc-menu-item .mat-icon {
    margin-right: 0;
    margin-left: 16px
}

.mat-mdc-menu-item.mat-mdc-menu-item-submenu-trigger {
    padding-right: 32px
}

[dir=rtl] .mat-mdc-menu-item.mat-mdc-menu-item-submenu-trigger {
    padding-right: 16px;
    padding-left: 32px
}

.mat-mdc-menu-item:not([disabled]):hover {
    background-color: var(--mat-menu-item-hover-state-layer-color)
}

.mat-mdc-menu-item:not([disabled]).cdk-program-focused,
.mat-mdc-menu-item:not([disabled]).cdk-keyboard-focused,
.mat-mdc-menu-item:not([disabled]).mat-mdc-menu-item-highlighted {
    background-color: var(--mat-menu-item-focus-state-layer-color)
}

.cdk-high-contrast-active .mat-mdc-menu-item {
    margin-top: 1px
}

.mat-mdc-menu-submenu-icon {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 5px;
    height: 10px;
    fill: currentColor
}

[dir=rtl] .mat-mdc-menu-submenu-icon {
    right: auto;
    left: 16px;
    transform: translateY(-50%) scaleX(-1)
}

.cdk-high-contrast-active .mat-mdc-menu-submenu-icon {
    fill: CanvasText
}

.mat-mdc-menu-item .mat-mdc-menu-ripple {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none
}


.mdc-touch-target-wrapper {
    display: inline
}

.mdc-elevation-overlay {
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--mdc-elevation-overlay-opacity, 0);
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)
}

.mdc-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 64px;
    border: none;
    outline: none;
    line-height: inherit;
    user-select: none;
    -webkit-appearance: none;
    overflow: visible;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0)
}

.mdc-button .mdc-elevation-overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.mdc-button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mdc-button:active {
    outline: none
}

.mdc-button:hover {
    cursor: pointer
}

.mdc-button:disabled {
    cursor: default;
    pointer-events: none
}

.mdc-button[hidden] {
    display: none
}

.mdc-button .mdc-button__icon {
    margin-left: 0;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    vertical-align: top
}

[dir=rtl] .mdc-button .mdc-button__icon,
.mdc-button .mdc-button__icon[dir=rtl] {
    margin-left: 8px;
    margin-right: 0
}

.mdc-button .mdc-button__progress-indicator {
    font-size: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    line-height: initial
}

.mdc-button .mdc-button__label {
    position: relative
}

.mdc-button .mdc-button__focus-ring {
    pointer-events: none;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 4px);
    width: calc(100% + 4px);
    display: none
}

@media screen and (forced-colors: active) {
    .mdc-button .mdc-button__focus-ring {
        border-color: CanvasText
    }
}

.mdc-button .mdc-button__focus-ring::after {
    content: "";
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 4px);
    width: calc(100% + 4px)
}

@media screen and (forced-colors: active) {
    .mdc-button .mdc-button__focus-ring::after {
        border-color: CanvasText
    }
}

@media screen and (forced-colors: active) {

    .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__focus-ring,
    .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__focus-ring {
        display: block
    }
}

.mdc-button .mdc-button__touch {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.mdc-button__label+.mdc-button__icon {
    margin-left: 8px;
    margin-right: 0
}

[dir=rtl] .mdc-button__label+.mdc-button__icon,
.mdc-button__label+.mdc-button__icon[dir=rtl] {
    margin-left: 0;
    margin-right: 8px
}

svg.mdc-button__icon {
    fill: currentColor
}

.mdc-button--touch {
    margin-top: 6px;
    margin-bottom: 6px
}

.mdc-button {
    padding: 0 8px 0 8px
}

.mdc-button--unelevated {
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 16px 0 16px
}

.mdc-button--unelevated.mdc-button--icon-trailing {
    padding: 0 12px 0 16px
}

.mdc-button--unelevated.mdc-button--icon-leading {
    padding: 0 16px 0 12px
}

.mdc-button--raised {
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 16px 0 16px
}

.mdc-button--raised.mdc-button--icon-trailing {
    padding: 0 12px 0 16px
}

.mdc-button--raised.mdc-button--icon-leading {
    padding: 0 16px 0 12px
}

.mdc-button--outlined {
    border-style: solid;
    transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1)
}

.mdc-button--outlined .mdc-button__ripple {
    border-style: solid;
    border-color: rgba(0, 0, 0, 0)
}

.mat-mdc-button {
    height: var(--mdc-text-button-container-height, 36px);
    border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))
}

.mat-mdc-button:not(:disabled) {
    color: var(--mdc-text-button-label-text-color, inherit)
}

.mat-mdc-button:disabled {
    color: var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mat-mdc-button .mdc-button__ripple {
    border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px))
}

.mat-mdc-unelevated-button {
    height: var(--mdc-filled-button-container-height, 36px);
    border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))
}

.mat-mdc-unelevated-button:not(:disabled) {
    background-color: var(--mdc-filled-button-container-color, transparent)
}

.mat-mdc-unelevated-button:disabled {
    background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12))
}

.mat-mdc-unelevated-button:not(:disabled) {
    color: var(--mdc-filled-button-label-text-color, inherit)
}

.mat-mdc-unelevated-button:disabled {
    color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mat-mdc-unelevated-button .mdc-button__ripple {
    border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px))
}

.mat-mdc-raised-button {
    height: var(--mdc-protected-button-container-height, 36px);
    border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));
    box-shadow: var(--mdc-protected-button-container-elevation, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12))
}

.mat-mdc-raised-button:not(:disabled) {
    background-color: var(--mdc-protected-button-container-color, transparent)
}

.mat-mdc-raised-button:disabled {
    background-color: var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12))
}

.mat-mdc-raised-button:not(:disabled) {
    color: var(--mdc-protected-button-label-text-color, inherit)
}

.mat-mdc-raised-button:disabled {
    color: var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mat-mdc-raised-button .mdc-button__ripple {
    border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px))
}

.mat-mdc-raised-button.mdc-ripple-upgraded--background-focused,
.mat-mdc-raised-button:not(.mdc-ripple-upgraded):focus {
    box-shadow: var(--mdc-protected-button-focus-container-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12))
}

.mat-mdc-raised-button:hover {
    box-shadow: var(--mdc-protected-button-hover-container-elevation, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12))
}

.mat-mdc-raised-button:not(:disabled):active {
    box-shadow: var(--mdc-protected-button-pressed-container-elevation, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12))
}

.mat-mdc-raised-button:disabled {
    box-shadow: var(--mdc-protected-button-disabled-container-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12))
}

.mat-mdc-outlined-button {
    height: var(--mdc-outlined-button-container-height, 36px);
    border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));
    padding: 0 15px 0 15px;
    border-width: var(--mdc-outlined-button-outline-width, 1px)
}

.mat-mdc-outlined-button:not(:disabled) {
    color: var(--mdc-outlined-button-label-text-color, inherit)
}

.mat-mdc-outlined-button:disabled {
    color: var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38))
}

.mat-mdc-outlined-button .mdc-button__ripple {
    border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px))
}

.mat-mdc-outlined-button:not(:disabled) {
    border-color: var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12))
}

.mat-mdc-outlined-button:disabled {
    border-color: var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12))
}

.mat-mdc-outlined-button.mdc-button--icon-trailing {
    padding: 0 11px 0 15px
}

.mat-mdc-outlined-button.mdc-button--icon-leading {
    padding: 0 15px 0 11px
}

.mat-mdc-outlined-button .mdc-button__ripple {
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-width: var(--mdc-outlined-button-outline-width, 1px)
}

.mat-mdc-outlined-button .mdc-button__touch {
    left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
    width: calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px))
}

.mat-mdc-button,
.mat-mdc-unelevated-button,
.mat-mdc-raised-button,
.mat-mdc-outlined-button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.mat-mdc-button .mat-mdc-button-ripple,
.mat-mdc-button .mat-mdc-button-persistent-ripple,
.mat-mdc-button .mat-mdc-button-persistent-ripple::before,
.mat-mdc-unelevated-button .mat-mdc-button-ripple,
.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple,
.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,
.mat-mdc-raised-button .mat-mdc-button-ripple,
.mat-mdc-raised-button .mat-mdc-button-persistent-ripple,
.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,
.mat-mdc-outlined-button .mat-mdc-button-ripple,
.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple,
.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    border-radius: inherit
}

.mat-mdc-button .mat-mdc-button-ripple,
.mat-mdc-unelevated-button .mat-mdc-button-ripple,
.mat-mdc-raised-button .mat-mdc-button-ripple,
.mat-mdc-outlined-button .mat-mdc-button-ripple {
    overflow: hidden
}

.mat-mdc-button .mat-mdc-button-persistent-ripple::before,
.mat-mdc-unelevated-button .mat-mdc-button-persistent-ripple::before,
.mat-mdc-raised-button .mat-mdc-button-persistent-ripple::before,
.mat-mdc-outlined-button .mat-mdc-button-persistent-ripple::before {
    content: "";
    opacity: 0;
    background-color: var(--mat-mdc-button-persistent-ripple-color)
}

.mat-mdc-button .mat-ripple-element,
.mat-mdc-unelevated-button .mat-ripple-element,
.mat-mdc-raised-button .mat-ripple-element,
.mat-mdc-outlined-button .mat-ripple-element {
    background-color: var(--mat-mdc-button-ripple-color)
}

.mat-mdc-button .mdc-button__label,
.mat-mdc-unelevated-button .mdc-button__label,
.mat-mdc-raised-button .mdc-button__label,
.mat-mdc-outlined-button .mdc-button__label {
    z-index: 1
}

.mat-mdc-button .mat-mdc-focus-indicator,
.mat-mdc-unelevated-button .mat-mdc-focus-indicator,
.mat-mdc-raised-button .mat-mdc-focus-indicator,
.mat-mdc-outlined-button .mat-mdc-focus-indicator {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute
}

.mat-mdc-button:focus .mat-mdc-focus-indicator::before,
.mat-mdc-unelevated-button:focus .mat-mdc-focus-indicator::before,
.mat-mdc-raised-button:focus .mat-mdc-focus-indicator::before,
.mat-mdc-outlined-button:focus .mat-mdc-focus-indicator::before {
    content: ""
}

.mat-mdc-button[disabled],
.mat-mdc-unelevated-button[disabled],
.mat-mdc-raised-button[disabled],
.mat-mdc-outlined-button[disabled] {
    cursor: default;
    pointer-events: none
}

.mat-mdc-button .mat-mdc-button-touch-target,
.mat-mdc-unelevated-button .mat-mdc-button-touch-target,
.mat-mdc-raised-button .mat-mdc-button-touch-target,
.mat-mdc-outlined-button .mat-mdc-button-touch-target {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.mat-mdc-button._mat-animation-noopable,
.mat-mdc-unelevated-button._mat-animation-noopable,
.mat-mdc-raised-button._mat-animation-noopable,
.mat-mdc-outlined-button._mat-animation-noopable {
    transition: none !important;
    animation: none !important
}

.mat-mdc-button>.mat-icon {
    margin-left: 0;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-size: 1.125rem;
    height: 1.125rem;
    width: 1.125rem
}

[dir=rtl] .mat-mdc-button>.mat-icon,
.mat-mdc-button>.mat-icon[dir=rtl] {
    margin-left: 8px;
    margin-right: 0
}

.mat-mdc-button .mdc-button__label+.mat-icon {
    margin-left: 8px;
    margin-right: 0
}

[dir=rtl] .mat-mdc-button .mdc-button__label+.mat-icon,
.mat-mdc-button .mdc-button__label+.mat-icon[dir=rtl] {
    margin-left: 0;
    margin-right: 8px
}

.mat-mdc-unelevated-button>.mat-icon,
.mat-mdc-raised-button>.mat-icon,
.mat-mdc-outlined-button>.mat-icon {
    margin-left: 0;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    font-size: 1.125rem;
    height: 1.125rem;
    width: 1.125rem;
    margin-left: -4px;
    margin-right: 8px
}

[dir=rtl] .mat-mdc-unelevated-button>.mat-icon,
[dir=rtl] .mat-mdc-raised-button>.mat-icon,
[dir=rtl] .mat-mdc-outlined-button>.mat-icon,
.mat-mdc-unelevated-button>.mat-icon[dir=rtl],
.mat-mdc-raised-button>.mat-icon[dir=rtl],
.mat-mdc-outlined-button>.mat-icon[dir=rtl] {
    margin-left: 8px;
    margin-right: 0
}

[dir=rtl] .mat-mdc-unelevated-button>.mat-icon,
[dir=rtl] .mat-mdc-raised-button>.mat-icon,
[dir=rtl] .mat-mdc-outlined-button>.mat-icon,
.mat-mdc-unelevated-button>.mat-icon[dir=rtl],
.mat-mdc-raised-button>.mat-icon[dir=rtl],
.mat-mdc-outlined-button>.mat-icon[dir=rtl] {
    margin-left: 8px;
    margin-right: -4px
}

.mat-mdc-unelevated-button .mdc-button__label+.mat-icon,
.mat-mdc-raised-button .mdc-button__label+.mat-icon,
.mat-mdc-outlined-button .mdc-button__label+.mat-icon {
    margin-left: 8px;
    margin-right: -4px
}

[dir=rtl] .mat-mdc-unelevated-button .mdc-button__label+.mat-icon,
[dir=rtl] .mat-mdc-raised-button .mdc-button__label+.mat-icon,
[dir=rtl] .mat-mdc-outlined-button .mdc-button__label+.mat-icon,
.mat-mdc-unelevated-button .mdc-button__label+.mat-icon[dir=rtl],
.mat-mdc-raised-button .mdc-button__label+.mat-icon[dir=rtl],
.mat-mdc-outlined-button .mdc-button__label+.mat-icon[dir=rtl] {
    margin-left: -4px;
    margin-right: 8px
}

.mat-mdc-outlined-button .mat-mdc-button-ripple,
.mat-mdc-outlined-button .mdc-button__ripple {
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border-width: -1px
}

.mat-mdc-unelevated-button .mat-mdc-focus-indicator::before,
.mat-mdc-raised-button .mat-mdc-focus-indicator::before {
    margin: calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 2px) * -1)
}

.mat-mdc-outlined-button .mat-mdc-focus-indicator::before {
    margin: calc(calc(var(--mat-mdc-focus-indicator-border-width, 3px) + 3px) * -1)
}


.cdk-high-contrast-active .mat-mdc-button:not(.mdc-button--outlined),
.cdk-high-contrast-active .mat-mdc-unelevated-button:not(.mdc-button--outlined),
.cdk-high-contrast-active .mat-mdc-raised-button:not(.mdc-button--outlined),
.cdk-high-contrast-active .mat-mdc-outlined-button:not(.mdc-button--outlined),
.cdk-high-contrast-active .mat-mdc-icon-button {
    outline: solid 1px
}


.mdc-icon-button {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    fill: currentColor;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    z-index: 0;
    overflow: visible
}

.mdc-icon-button .mdc-icon-button__touch {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 50%;
    width: 48px;
    transform: translate(-50%, -50%)
}

@media screen and (forced-colors: active) {

    .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,
    .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring {
        display: block
    }
}

.mdc-icon-button:disabled {
    cursor: default;
    pointer-events: none
}

.mdc-icon-button[hidden] {
    display: none
}

.mdc-icon-button--display-flex {
    align-items: center;
    display: inline-flex;
    justify-content: center
}

.mdc-icon-button__focus-ring {
    pointer-events: none;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    display: none
}

@media screen and (forced-colors: active) {
    .mdc-icon-button__focus-ring {
        border-color: CanvasText
    }
}

.mdc-icon-button__focus-ring::after {
    content: "";
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 4px);
    width: calc(100% + 4px)
}

@media screen and (forced-colors: active) {
    .mdc-icon-button__focus-ring::after {
        border-color: CanvasText
    }
}

.mdc-icon-button__icon {
    display: inline-block
}

.mdc-icon-button__icon.mdc-icon-button__icon--on {
    display: none
}

.mdc-icon-button--on .mdc-icon-button__icon {
    display: none
}

.mdc-icon-button--on .mdc-icon-button__icon.mdc-icon-button__icon--on {
    display: inline-block
}

.mdc-icon-button__link {
    height: 100%;
    left: 0;
    outline: none;
    position: absolute;
    top: 0;
    width: 100%
}

.mat-mdc-icon-button {
    height: var(--mdc-icon-button-state-layer-size);
    width: var(--mdc-icon-button-state-layer-size);
    color: var(--mdc-icon-button-icon-color);
    --mdc-icon-button-state-layer-size: 48px;
    --mdc-icon-button-icon-size: 24px;
    --mdc-icon-button-disabled-icon-color: black;
    --mdc-icon-button-disabled-icon-opacity: 0.38
}

.mat-mdc-icon-button .mdc-button__icon {
    font-size: var(--mdc-icon-button-icon-size)
}

.mat-mdc-icon-button svg,
.mat-mdc-icon-button img {
    width: var(--mdc-icon-button-icon-size);
    height: var(--mdc-icon-button-icon-size)
}

.mat-mdc-icon-button:disabled {
    opacity: var(--mdc-icon-button-disabled-icon-opacity)
}

.mat-mdc-icon-button:disabled {
    color: var(--mdc-icon-button-disabled-icon-color)
}

.mat-mdc-icon-button {
    padding: 12px;
    font-size: var(--mdc-icon-button-icon-size);
    border-radius: 50%;
    flex-shrink: 0;
    text-align: center;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.mat-mdc-icon-button svg {
    vertical-align: baseline
}

.mat-mdc-icon-button[disabled] {
    cursor: default;
    pointer-events: none;
    opacity: 1
}

.mat-mdc-icon-button .mat-mdc-button-ripple,
.mat-mdc-icon-button .mat-mdc-button-persistent-ripple,
.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none;
    border-radius: inherit
}

.mat-mdc-icon-button .mat-mdc-button-ripple {
    overflow: hidden
}

.mat-mdc-icon-button .mat-mdc-button-persistent-ripple::before {
    content: "";
    opacity: 0;
    background-color: var(--mat-mdc-button-persistent-ripple-color)
}

.mat-mdc-icon-button .mat-ripple-element {
    background-color: var(--mat-mdc-button-ripple-color)
}

.mat-mdc-icon-button .mdc-button__label {
    z-index: 1
}

.mat-mdc-icon-button .mat-mdc-focus-indicator {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute
}

.mat-mdc-icon-button:focus .mat-mdc-focus-indicator::before {
    content: ""
}

.mat-mdc-icon-button .mat-mdc-button-touch-target {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 50%;
    width: 48px;
    transform: translate(-50%, -50%)
}

.mat-mdc-icon-button._mat-animation-noopable {
    transition: none !important;
    animation: none !important
}

.mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
    border-radius: 50%
}

.mat-mdc-icon-button.mat-unthemed:not(.mdc-ripple-upgraded):focus::before,
.mat-mdc-icon-button.mat-primary:not(.mdc-ripple-upgraded):focus::before,
.mat-mdc-icon-button.mat-accent:not(.mdc-ripple-upgraded):focus::before,
.mat-mdc-icon-button.mat-warn:not(.mdc-ripple-upgraded):focus::before {
    background: rgba(0, 0, 0, 0);
    opacity: 1
}


.page-header[_ngcontent-ng-c3570614727] {
    max-height: -moz-fit-content;
    max-height: fit-content;
    margin: 0;
    min-height: auto
}

.page-header[_ngcontent-ng-c3570614727] .header-right-cont[_ngcontent-ng-c3570614727] {
    min-width: auto
}

.page-wrap.no-internet[_ngcontent-ng-c3570614727] {
    height: calc(100vh - 55px);
    display: flex;
    align-items: center;
    justify-content: center
}

.page-wrap.no-internet[_ngcontent-ng-c3570614727] .page-content[_ngcontent-ng-c3570614727] .page-loader-wrap[_ngcontent-ng-c3570614727] {
    background: unset;
    position: static;
    transform: none;
    min-height: auto
}

.page-wrap.no-internet[_ngcontent-ng-c3570614727] .page-content[_ngcontent-ng-c3570614727] img[_ngcontent-ng-c3570614727] {
    max-width: 300px;
    display: block;
    margin: 0 auto
}

.page-wrap.no-internet[_ngcontent-ng-c3570614727] .page-content[_ngcontent-ng-c3570614727] p[_ngcontent-ng-c3570614727] {
    font-size: .875rem;
    text-align: center;
    opacity: .6
}

.page-wrap.no-internet[_ngcontent-ng-c3570614727] .page-content[_ngcontent-ng-c3570614727] button[_ngcontent-ng-c3570614727] {
    min-width: 90px;
    border-radius: 4px;
    background: var(--black-color);
    color: var(--white-color);
    display: block;
    margin: 15px auto
}

.app-logo[_ngcontent-ng-c3570614727] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    max-width: 100%;
    top: 50%;
    height: 100%;
    transform: translateY(-50%)
}

.app-logo[_ngcontent-ng-c3570614727] img[_ngcontent-ng-c3570614727] {
    width: auto;
    max-width: 75px;
    max-height: 45px;
    margin-left: 5px;
    border-radius: 4px;
    padding: 3px
}

.no-internet-container[_ngcontent-ng-c3570614727] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background-color: #000000b3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.no-internet-container[_ngcontent-ng-c3570614727] .no-internet-icon[_ngcontent-ng-c3570614727] mat-icon[_ngcontent-ng-c3570614727] {
    font-size: 5rem;
    font-weight: 100;
    width: auto;
    height: auto;
    color: var(--white-color)
}

.no-internet-container[_ngcontent-ng-c3570614727] h3[_ngcontent-ng-c3570614727] {
    font-size: 14px;
    font-weight: 600;
    color: var(--white-color);
    margin-bottom: 0
}

.no-internet-container[_ngcontent-ng-c3570614727] p[_ngcontent-ng-c3570614727] {
    font-size: 12px;
    color: var(--white-color);
    margin-top: 4px
}


.page-header {
    min-height: auto;
    margin: 0
}

.page-header .user-payment-info {
    width: calc(100% - 20px);
    margin: auto
}

.page-header .user-payment-info .card-wrapper {
    background: var(--grey-200);
    position: relative;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    min-height: 95px
}

.page-header .user-payment-info .card-wrapper .payment-timer {
    font-size: 12px;
    margin: 0;
    background: var(--grey-00);
    width: 100%;
    padding: 5px;
    border-radius: 0 0 10px 10px
}

.page-header .user-payment-info .payment-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.page-header .user-payment-info .payment-cont .show-payment {
    color: var(--grey-500)
}

.page-header .user-payment-info .payment-cont .show-payment.avl-payment {
    text-align: center;
    margin-bottom: 5px
}

.page-header .user-payment-info .payment-cont .show-payment mat-label {
    font-size: 12px;
    font-weight: 500
}

.page-header .user-payment-info .payment-cont .show-payment p {
    font-size: 18px;
    font-weight: 700;
    margin: 0
}

.page-header .user-payment-info .balance-share {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px;
    border-top: 1px solid var(--grey-50);
    column-gap: 6px;
    justify-content: center
}

.page-header .user-payment-info .balance-share .exp-balance {
    font-size: 12px;
    text-align: center;
    margin: 0;
    color: var(--black-color);
    cursor: pointer
}

.page-header .user-payment-info .balance-share:only-child {
    border: none
}

.page-header .user-payment-info .balance-share .main-bal,
.page-header .user-payment-info .balance-share .exposure-bal {
    width: 100%
}

.page-header .user-payment-info .balance-share .main-bal p,
.page-header .user-payment-info .balance-share .exposure-bal p {
    font-size: 12px;
    margin: 5px 0 0;
    font-weight: 500
}

.page-header .user-payment-info .balance-share .main-bal p.bal-amnt,
.page-header .user-payment-info .balance-share .exposure-bal p.bal-amnt {
    min-height: 30px;
    color: var(--white-color);
    background: var(--black-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300
}

.page-body {
    height: calc(100% - 155px);
    overflow-y: auto;
    padding-bottom: 45px
}

.page-body.demoID {
    height: calc(100% - 185px)
}

.page-body .user-details-wrap {
    border-radius: 10px;
    background: var(--grey-75);
    margin-top: 10px;
    padding: 10px 0
}

.page-body .user-details-wrap .actions-wrap {
    text-align: right
}

.page-body .user-details-wrap .actions-wrap button {
    background: var(--grey-00);
    color: var(--grey-800);
    font-size: 10px;
    padding: 0;
    min-width: 110px;
    border-radius: 8px
}

.page-body .user-details {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-bottom: 10px
}

.page-body .user-details.guest-user {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75px
}

.page-body .user-details p.signup-code {
    margin: 5px 0;
    font-size: 12px;

}

.page-body .user-details p {
    margin: 0;
    font-size: 14px;
    color: var(--grey-800);
    display: flex;
    align-items: center;
    column-gap: 6px;

}

.page-body .user-details p:last-child {
    border-radius: 6px;
    margin-top: 6px;
    font-size: 12px;

    color: var(--grey-500)
}

.page-body .user-details p img {
    width: 22px;
    max-height: 22px;
    border-radius: 4px
}

.page-body .user-details p mat-icon {
    width: 18px;
    height: 18px;
    background: var(--white-color);
    color: var(--black-color);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.page-body .user-bal-info {
    width: calc(100% - 20px);
    margin: auto
}

.page-body .user-bal-info .card-wrapper {
    background: var(--grey-200);
    position: relative;
    padding: 0 10px;
    margin-top: 0;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    min-height: 120px
}

.page-body .user-bal-info .card-wrapper .d-w-btn {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    width: 100%;
    column-gap: 10px;
    padding-top: 5px;
    margin-top: 5px;
    position: relative
}

.page-body .user-bal-info .card-wrapper .d-w-btn button {
    background: var(--black-color);
    color: var(--white-color);
    font-weight: 200;
    font-size: 12px;
    width: 100%;
    height: 30px
}

.page-body .user-bal-info .bal-cont {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    width: 100%
}

.page-body .user-bal-info .bal-cont .show-bal {
    color: var(--grey-500)
}

.page-body .user-bal-info .bal-cont .show-bal.avl-bal {
    text-align: left;
    margin-bottom: 0
}

.page-body .user-bal-info .bal-cont .show-bal.avl-bal p {
    text-align: left
}

.page-body .user-bal-info .bal-cont .show-bal mat-label {
    font-size: 12px;
    font-weight: 500
}

.page-body .user-bal-info .bal-cont .show-bal p {
    font-size: 18px;
    font-weight: 700;
    margin: 0
}

.page-body .user-bal-info .bal-cont .exp-balance {
    font-size: 12px;
    text-align: right;
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: flex-end
}

.page-body .user-bal-info .bal-cont .exp-balance mat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    opacity: .9
}

.page-body .menu-items-wrap .smenu-wrap {
    padding: 0;
    list-style: none;
    margin: 10px 0
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item {
    margin: 0;
    cursor: pointer
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link {
    display: flex;
    column-gap: 10px;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    text-decoration: none;
    color: var(--grey-900);
    padding: 8px 10px;
    font-size: 12px;

    border-radius: 6px;
    cursor: pointer;
    position: relative;
    background: var(--grey-75);
    margin-bottom: 8px;
    min-height: 40px
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link .label-wrap {
    display: flex;
    align-items: center;
    column-gap: 10px
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link .badge {
    position: absolute;
    right: 10px
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link.username {
    padding: 6px 10px
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link.username img {
    width: 30px;
    filter: none
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link img {
    width: 16px;
    filter: invert(1)
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link .extra-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap: 5px;

}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link .extra-info p {
    margin: 0;
    white-space: nowrap
}

.page-body .menu-items-wrap .smenu-wrap .smenu-item .smenu-link .extra-info .action-btn {
    cursor: pointer;
    color: var(--secondary-color)
}

.page-body .menu-items-wrap .social-links-wrap {
    display: flex;
    align-items: center;
    column-gap: 8px
}

.page-body .menu-items-wrap .social-links-wrap label {
    font-size: 10px;

    padding: 5px;
    display: inline-block
}

.page-body .menu-items-wrap .social-links-wrap .social-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    padding: 0
}

.page-body .menu-items-wrap .social-links-wrap .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.page-body .menu-items-wrap .social-links-wrap .social-links img {
    width: 18px;
    height: 18px;
    filter: invert(1)
}


.skeleton-img[_ngcontent-ng-c1308154342] {
    height: 100%;
    opacity: 1;
    background-size: contain;
    background-repeat: repeat;
    background: #1c1c1c
}

.skeleton-img[_ngcontent-ng-c1308154342]:after {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    background-size: 100vw auto;
    height: 100%;
    animation: _ngcontent-ng-c1308154342_shimmer 3s reverse infinite linear;
    content: ""
}

@keyframes _ngcontent-ng-c1308154342_shimmer {
    to {
        background-position: -100vw 80%
    }
}

.fullpage-skeleton[_ngcontent-ng-c1308154342] {
    height: calc(var(--vh, 1vh) * 100)
}

.main[_ngcontent-ng-c1308154342] {
    position: absolute;
    width: 100%;
    margin: auto;
    top: 44px;
    z-index: 10000;
    left: 50%;
    transform: translate(-50%);
    max-height: calc(var(--vh, 1vh) * 100 - 101px)
}

.main[_ngcontent-ng-c1308154342] .container[_ngcontent-ng-c1308154342] {
    height: 100%
}

.page-header[_ngcontent-ng-c1308154342] {
    min-height: 55px;
    background: var(--black-color);
    margin: 0
}

.page-header[_ngcontent-ng-c1308154342] .header-wrapper[_ngcontent-ng-c1308154342] {
    height: 55px
}

.page-body[_ngcontent-ng-c1308154342] {
    padding: 10px
}

.page-body[_ngcontent-ng-c1308154342] .topbox[_ngcontent-ng-c1308154342] {
    width: 100%;
    margin: auto;
    height: 120px;
    border-radius: 10px
}

.page-body[_ngcontent-ng-c1308154342] .list[_ngcontent-ng-c1308154342] ul[_ngcontent-ng-c1308154342] {
    list-style: none;
    padding: 0
}

.page-body[_ngcontent-ng-c1308154342] .list[_ngcontent-ng-c1308154342] ul[_ngcontent-ng-c1308154342] li[_ngcontent-ng-c1308154342] {
    display: flex;
    width: 100%;
    align-items: center;
    column-gap: 10px;
    margin: 10px 0
}

.page-body[_ngcontent-ng-c1308154342] .list[_ngcontent-ng-c1308154342] ul[_ngcontent-ng-c1308154342] li[_ngcontent-ng-c1308154342] .img[_ngcontent-ng-c1308154342] {
    width: 50px;
    height: 50px;
    min-width: 50px
}

.page-body[_ngcontent-ng-c1308154342] .list[_ngcontent-ng-c1308154342] ul[_ngcontent-ng-c1308154342] li[_ngcontent-ng-c1308154342] .content[_ngcontent-ng-c1308154342] {
    width: 100%
}

.page-body[_ngcontent-ng-c1308154342] .list[_ngcontent-ng-c1308154342] ul[_ngcontent-ng-c1308154342] li[_ngcontent-ng-c1308154342] p[_ngcontent-ng-c1308154342] {
    height: 14px;
    width: 100%
}

.page-footer[_ngcontent-ng-c1308154342] {
    height: 45px;
    border-radius: 20px 20px 0 0;
    padding: 6px 0;
    background: var(--footer-grey-color);
    margin: 0
}

.sl-item[_ngcontent-ng-c1308154342] {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin: 10px 0 5px
}

.sl-item[_ngcontent-ng-c1308154342] .sl-img[_ngcontent-ng-c1308154342] {
    min-width: 35px;
    height: 35px;
    border-radius: 50%
}

.sl-item[_ngcontent-ng-c1308154342] .sl-team[_ngcontent-ng-c1308154342] {
    width: 70%
}

.sl-item[_ngcontent-ng-c1308154342] p[_ngcontent-ng-c1308154342] {
    height: 10px;
    width: 100%;
    margin: 0 0 4px;
    border-radius: 2px
}

.sl-item[_ngcontent-ng-c1308154342] p[_ngcontent-ng-c1308154342]:nth-child(2) {
    width: 60%
}

.sl-item[_ngcontent-ng-c1308154342] .sl-chip[_ngcontent-ng-c1308154342] {
    width: 15%;
    height: 35px
}


.mdc-elevation-overlay {
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--mdc-elevation-overlay-opacity, 0);
    transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1)
}

.mdc-dialog,
.mdc-dialog__scrim {
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%
}

.mdc-dialog {
    display: none;
    z-index: var(--mdc-dialog-z-index, 7)
}

.mdc-dialog .mdc-dialog__content {
    padding: 20px 24px 20px 24px
}

.mdc-dialog .mdc-dialog__surface {
    min-width: 280px
}

@media(max-width: 592px) {
    .mdc-dialog .mdc-dialog__surface {
        max-width: calc(100vw - 32px)
    }
}

@media(min-width: 592px) {
    .mdc-dialog .mdc-dialog__surface {
        max-width: 560px
    }
}

.mdc-dialog .mdc-dialog__surface {
    max-height: calc(100% - 32px)
}

.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
    max-width: none
}

@media(max-width: 960px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
        max-height: 560px;
        width: 560px
    }

    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
        right: -12px
    }
}

@media(max-width: 720px)and (max-width: 672px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
        width: calc(100vw - 112px)
    }
}

@media(max-width: 720px)and (min-width: 672px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
        width: 560px
    }
}

@media(max-width: 720px)and (max-height: 720px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
        max-height: calc(100vh - 160px)
    }
}

@media(max-width: 720px)and (min-height: 720px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
        max-height: 560px
    }
}

@media(max-width: 720px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
        right: -12px
    }
}

@media(max-width: 720px)and (max-height: 400px), (max-width: 600px), (min-width: 720px)and (max-height: 400px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
        height: 100%;
        max-height: 100vh;
        max-width: 100vw;
        width: 100vw;
        border-radius: 0
    }

    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
        order: -1;
        left: -12px
    }

    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__header {
        padding: 0 16px 9px;
        justify-content: flex-start
    }

    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__title {
        margin-left: calc(16px - 2 * 12px)
    }
}

@media(min-width: 960px) {
    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
        width: calc(100vw - 400px)
    }

    .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
        right: -12px
    }
}

.mdc-dialog.mdc-dialog__scrim--hidden .mdc-dialog__scrim {
    opacity: 0
}

.mdc-dialog__scrim {
    opacity: 0;
    z-index: -1
}

.mdc-dialog__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    height: 100%;
    transform: scale(0.8);
    opacity: 0;
    pointer-events: none
}

.mdc-dialog__surface {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
    pointer-events: auto;
    overflow-y: auto;
    outline: 0
}

.mdc-dialog__surface .mdc-elevation-overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

[dir=rtl] .mdc-dialog__surface,
.mdc-dialog__surface[dir=rtl] {
    text-align: right
}

@media screen and (forced-colors: active),
(-ms-high-contrast: active) {
    .mdc-dialog__surface {
        outline: 2px solid windowText
    }
}

.mdc-dialog__surface::before {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: inherit;
    content: "";
    pointer-events: none
}

@media screen and (forced-colors: active) {
    .mdc-dialog__surface::before {
        border-color: CanvasText
    }
}

@media screen and (-ms-high-contrast: active),
screen and (-ms-high-contrast: none) {
    .mdc-dialog__surface::before {
        content: none
    }
}

.mdc-dialog__title {
    display: block;
    margin-top: 0;
    position: relative;
    flex-shrink: 0;
    box-sizing: border-box;
    margin: 0 0 1px;
    padding: 0 24px 9px
}

.mdc-dialog__title::before {
    display: inline-block;
    width: 0;
    height: 40px;
    content: "";
    vertical-align: 0
}

[dir=rtl] .mdc-dialog__title,
.mdc-dialog__title[dir=rtl] {
    text-align: right
}

.mdc-dialog--scrollable .mdc-dialog__title {
    margin-bottom: 1px;
    padding-bottom: 15px
}

.mdc-dialog--fullscreen .mdc-dialog__header {
    align-items: baseline;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    display: inline-flex;
    justify-content: space-between;
    padding: 0 24px 9px;
    z-index: 1
}

@media screen and (forced-colors: active) {
    .mdc-dialog--fullscreen .mdc-dialog__header {
        border-bottom-color: CanvasText
    }
}

.mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close {
    right: -12px
}

.mdc-dialog--fullscreen .mdc-dialog__title {
    margin-bottom: 0;
    padding: 0;
    border-bottom: 0
}

.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__title {
    border-bottom: 0;
    margin-bottom: 0
}

.mdc-dialog--fullscreen .mdc-dialog__close {
    top: 5px
}

.mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions {
    border-top: 1px solid rgba(0, 0, 0, 0)
}

@media screen and (forced-colors: active) {
    .mdc-dialog--fullscreen.mdc-dialog--scrollable .mdc-dialog__actions {
        border-top-color: CanvasText
    }
}

.mdc-dialog--fullscreen--titleless .mdc-dialog__close {
    margin-top: 4px
}

.mdc-dialog--fullscreen--titleless.mdc-dialog--scrollable .mdc-dialog__close {
    margin-top: 0
}

.mdc-dialog__content {
    flex-grow: 1;
    box-sizing: border-box;
    margin: 0;
    overflow: auto
}

.mdc-dialog__content>:first-child {
    margin-top: 0
}

.mdc-dialog__content>:last-child {
    margin-bottom: 0
}

.mdc-dialog__title+.mdc-dialog__content,
.mdc-dialog__header+.mdc-dialog__content {
    padding-top: 0
}

.mdc-dialog--scrollable .mdc-dialog__title+.mdc-dialog__content {
    padding-top: 8px;
    padding-bottom: 8px
}

.mdc-dialog__content .mdc-deprecated-list:first-child:last-child {
    padding: 6px 0 0
}

.mdc-dialog--scrollable .mdc-dialog__content .mdc-deprecated-list:first-child:last-child {
    padding: 0
}

.mdc-dialog__actions {
    display: flex;
    position: relative;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    min-height: 52px;
    margin: 0;
    padding: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0)
}

@media screen and (forced-colors: active) {
    .mdc-dialog__actions {
        border-top-color: CanvasText
    }
}

.mdc-dialog--stacked .mdc-dialog__actions {
    flex-direction: column;
    align-items: flex-end
}

.mdc-dialog__button {
    margin-left: 8px;
    margin-right: 0;
    max-width: 100%;
    text-align: right
}

[dir=rtl] .mdc-dialog__button,
.mdc-dialog__button[dir=rtl] {
    margin-left: 0;
    margin-right: 8px
}

.mdc-dialog__button:first-child {
    margin-left: 0;
    margin-right: 0
}

[dir=rtl] .mdc-dialog__button:first-child,
.mdc-dialog__button:first-child[dir=rtl] {
    margin-left: 0;
    margin-right: 0
}

[dir=rtl] .mdc-dialog__button,
.mdc-dialog__button[dir=rtl] {
    text-align: left
}

.mdc-dialog--stacked .mdc-dialog__button:not(:first-child) {
    margin-top: 12px
}

.mdc-dialog--open,
.mdc-dialog--opening,
.mdc-dialog--closing {
    display: flex
}

.mdc-dialog--opening .mdc-dialog__scrim {
    transition: opacity 150ms linear
}

.mdc-dialog--opening .mdc-dialog__container {
    transition: opacity 75ms linear, transform 150ms 0ms cubic-bezier(0, 0, 0.2, 1)
}

.mdc-dialog--closing .mdc-dialog__scrim,
.mdc-dialog--closing .mdc-dialog__container {
    transition: opacity 75ms linear
}

.mdc-dialog--closing .mdc-dialog__container {
    transform: none
}

.mdc-dialog--open .mdc-dialog__scrim {
    opacity: 1
}

.mdc-dialog--open .mdc-dialog__container {
    transform: none;
    opacity: 1
}

.mdc-dialog--open.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim {
    opacity: 1
}

.mdc-dialog--open.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {
    transition: opacity 75ms linear
}

.mdc-dialog--open.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim {
    transition: opacity 150ms linear
}

.mdc-dialog__surface-scrim {
    display: none;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1
}

.mdc-dialog__surface-scrim--shown .mdc-dialog__surface-scrim,
.mdc-dialog__surface-scrim--showing .mdc-dialog__surface-scrim,
.mdc-dialog__surface-scrim--hiding .mdc-dialog__surface-scrim {
    display: block
}

.mdc-dialog-scroll-lock {
    overflow: hidden
}

.mdc-dialog--no-content-padding .mdc-dialog__content {
    padding: 0
}

.mdc-dialog--sheet .mdc-dialog__container .mdc-dialog__close {
    right: 12px;
    top: 9px;
    position: absolute;
    z-index: 1
}

.mdc-dialog__scrim--removed {
    pointer-events: none
}

.mdc-dialog__scrim--removed .mdc-dialog__scrim,
.mdc-dialog__scrim--removed .mdc-dialog__surface-scrim {
    display: none
}

.mat-mdc-dialog-content {
    max-height: 65vh
}

.mat-mdc-dialog-container {
    position: static;
    display: block
}

.mat-mdc-dialog-container,
.mat-mdc-dialog-container .mdc-dialog__container,
.mat-mdc-dialog-container .mdc-dialog__surface {
    max-height: inherit;
    min-height: inherit;
    min-width: inherit;
    max-width: inherit
}

.mat-mdc-dialog-container .mdc-dialog__surface {
    display: block;
    width: 100%;
    height: 100%
}

.mat-mdc-dialog-container {
    --mdc-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
    --mdc-dialog-container-shadow-color: #000;
    --mdc-dialog-container-shape: 4px;
    --mdc-dialog-container-elevation: var(--mdc-dialog-container-elevation-shadow);
    outline: 0
}

.mat-mdc-dialog-container .mdc-dialog__surface {
    background-color: var(--mdc-dialog-container-color, white)
}

.mat-mdc-dialog-container .mdc-dialog__surface {
    box-shadow: var(--mdc-dialog-container-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12))
}

.mat-mdc-dialog-container .mdc-dialog__surface {
    border-radius: var(--mdc-dialog-container-shape, 4px)
}

.mat-mdc-dialog-container .mdc-dialog__title {
    font-family: var(--mdc-dialog-subhead-font, Roboto, sans-serif);
    line-height: var(--mdc-dialog-subhead-line-height, 1.5rem);
    font-size: var(--mdc-dialog-subhead-size, 1rem);
    font-weight: var(--mdc-dialog-subhead-weight, 400);
    letter-spacing: var(--mdc-dialog-subhead-tracking, 0.03125em)
}

.mat-mdc-dialog-container .mdc-dialog__title {
    color: var(--mdc-dialog-subhead-color, rgba(0, 0, 0, 0.87))
}

.mat-mdc-dialog-container .mdc-dialog__content {
    font-family: var(--mdc-dialog-supporting-text-font, Roboto, sans-serif);
    line-height: var(--mdc-dialog-supporting-text-line-height, 1.5rem);
    font-size: var(--mdc-dialog-supporting-text-size, 1rem);
    font-weight: var(--mdc-dialog-supporting-text-weight, 400);
    letter-spacing: var(--mdc-dialog-supporting-text-tracking, 0.03125em)
}

.mat-mdc-dialog-container .mdc-dialog__content {
    color: var(--mdc-dialog-supporting-text-color, rgba(0, 0, 0, 0.6))
}

.mat-mdc-dialog-container .mdc-dialog__container {
    transition-duration: var(--mat-dialog-transition-duration, 0ms)
}

.mat-mdc-dialog-container._mat-animation-noopable .mdc-dialog__container {
    transition: none
}

.mat-mdc-dialog-content {
    display: block
}

.mat-mdc-dialog-actions {
    justify-content: start
}

.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-center,
.mat-mdc-dialog-actions[align=center] {
    justify-content: center
}

.mat-mdc-dialog-actions.mat-mdc-dialog-actions-align-end,
.mat-mdc-dialog-actions[align=end] {
    justify-content: flex-end
}

.mat-mdc-dialog-actions .mat-button-base+.mat-button-base,
.mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base {
    margin-left: 8px
}

[dir=rtl] .mat-mdc-dialog-actions .mat-button-base+.mat-button-base,
[dir=rtl] .mat-mdc-dialog-actions .mat-mdc-button-base+.mat-mdc-button-base {
    margin-left: 0;
    margin-right: 8px
}


[_ngcontent-ng-c3674886643]:root {
    --grey-00: #111111;
    --grey-50: #171717;
    --grey-75: #1e1e1e;
    --grey-100: #393939;
    --grey-200: #5f5f5f;
    --grey-300: #858585;
    --grey-400: #a1a1a1;
    --grey-500: #bebebe;
    --grey-600: #c4c4c4;
    --grey-700: #cdcdcd;
    --grey-800: #d5d5d5;
    --grey-900: #e3e3e3;
    --header-dark-color: #181E25;
    --footer-grey-color: #D9D9D9;
    --primary-color: #ffffff;
    --primary-color-shade: #ffffff;
    --primary-color-tint: #ffffff;
    --primary-color-contrast: #ffffff;
    --black-color: #000;
    --black-color-rgb: 0, 0, 0;
    --bg-grey: #f7f9f9;
    --red-color: #C44141;
    --marquee-red: #F44242;
    --green-color: #138807;
    --yellow-color: #E7A22A;
    --bg-grey-5: #C7C7C7;
    --card-background: #EAEAEA;
    --input-background: #E8E8E8;
    --chip-border: #FEAFB2;
    --lay-color: #FDC9D4;
    --lay-color-light: #fff3f4;
    --back-color: #A0D8FB;
    --back-color-light: #f2f9ff;
    --reset-background: #C13F50;
    --white-color: #ffffff;
    --back-light: #D4E8F8;
    --lay-light: #F7E7EB;
    --blue-color: #31a8df;
    --tabIcon-filter: invert(1);
    --d-color: #11833e;
    --w-color: #dd514a;
    --dark-blue-color: #1F6EE7
}

body[color-theme=default][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFC629;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFC629;
    --tabIcon-filter: invert(0)
}

body[color-theme=water-blue][_ngcontent-ng-c3674886643] {
    --secondary-color: #1E64CE;
    --secondary-color-contrast: #ffffff;
    --primary-color: #1E64CE;
    --primary-color-shade: #1F6EE7;
    --primary-color-tint: #2081e7;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ffffff;
    --tabIcon-filter: invert(0)
}

body[color-theme=sunglow][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFC629;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFC629;
    --tabIcon-filter: invert(0)
}

body[color-theme=gopunt][_ngcontent-ng-c3674886643] {
    --secondary-color: #feb912;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #feb912;
    --tabIcon-filter: invert(0)
}

body[color-theme=raspberry-pink][_ngcontent-ng-c3674886643] {
    --secondary-color: #db469a;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #db469a;
    --tabIcon-filter: invert(0)
}

body[color-theme=bright-gold][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFCB00;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFCB00;
    --tabIcon-filter: invert(0)
}

body[color-theme=saffron][_ngcontent-ng-c3674886643] {
    --secondary-color: #FF671F;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FF671F;
    --tabIcon-filter: invert(0)
}

body[color-theme=firebush][_ngcontent-ng-c3674886643] {
    --secondary-color: #ff8e2a;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ff8e2a;
    --tabIcon-filter: invert(0)
}

body[color-theme=darkorange][_ngcontent-ng-c3674886643] {
    --secondary-color: #F78A02;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #F78A02;
    --tabIcon-filter: invert(0)
}

body[color-theme=brightorange][_ngcontent-ng-c3674886643] {
    --secondary-color: #ff6600;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ff6600;
    --tabIcon-filter: invert(0)
}

body[color-theme=rubyred][_ngcontent-ng-c3674886643] {
    --secondary-color: #e82127;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #e82127;
    --tabIcon-filter: invert(0)
}

body[color-theme=ferrarired][_ngcontent-ng-c3674886643] {
    --secondary-color: #ff2800;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ff2800;
    --tabIcon-filter: invert(0)
}

body[color-theme=brickred][_ngcontent-ng-c3674886643] {
    --secondary-color: #C32034;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #C32034;
    --tabIcon-filter: invert(0)
}

body[color-theme=dustyred][_ngcontent-ng-c3674886643] {
    --secondary-color: #c14646;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #c14646;
    --tabIcon-filter: invert(0)
}

body[color-theme=lavared][_ngcontent-ng-c3674886643] {
    --secondary-color: #d72c0a;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #d72c0a;
    --tabIcon-filter: invert(0)
}

body[color-theme=orangyred][_ngcontent-ng-c3674886643] {
    --secondary-color: #b01d0b;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #b01d0b;
    --tabIcon-filter: invert(0)
}

body[color-theme=supernova][_ngcontent-ng-c3674886643] {
    --secondary-color: #fdcf13;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #fdcf13;
    --tabIcon-filter: invert(0)
}

body[color-theme=orangeyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #feba0d;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #feba0d;
    --tabIcon-filter: invert(0)
}

body[color-theme=amberyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #ffb80c;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ffb80c;
    --tabIcon-filter: invert(0)
}

body[color-theme=sunshade][_ngcontent-ng-c3674886643] {
    --secondary-color: #FF9934;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FF9934;
    --tabIcon-filter: invert(0)
}

body[color-theme=deepsaffron][_ngcontent-ng-c3674886643] {
    --secondary-color: #f79333;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #f79333;
    --tabIcon-filter: invert(0)
}

body[color-theme=cadmiumorange][_ngcontent-ng-c3674886643] {
    --secondary-color: #ea9624;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ea9624;
    --tabIcon-filter: invert(0)
}

body[color-theme=fadedorange][_ngcontent-ng-c3674886643] {
    --secondary-color: #F88651;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #F88651;
    --tabIcon-filter: invert(0)
}

body[color-theme=granolagold][_ngcontent-ng-c3674886643] {
    --secondary-color: #ba9445;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ba9445;
    --tabIcon-filter: invert(0)
}

body[color-theme=eucalyptusgreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #159365;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #159365;
    --tabIcon-filter: invert(0)
}

body[color-theme=venomgreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #659910;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #659910;
    --tabIcon-filter: invert(0)
}

body[color-theme=peagreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #A6CE39;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #A6CE39;
    --tabIcon-filter: invert(0)
}

body[color-theme=vibrantgreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #00BC00;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #00BC00;
    --tabIcon-filter: invert(0)
}

body[color-theme=pinegreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #14795a;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #14795a;
    --tabIcon-filter: invert(0)
}

body[color-theme=fountainblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #5dade2;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #5dade2;
    --tabIcon-filter: invert(0)
}

body[color-theme=crystalblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #3bc6f3;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #3bc6f3;
    --tabIcon-filter: invert(0)
}

body[color-theme=darkcyan][_ngcontent-ng-c3674886643] {
    --secondary-color: #149897;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #149897;
    --tabIcon-filter: invert(0)
}

body[color-theme=frenchblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #0075DB;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #0075DB;
    --tabIcon-filter: invert(0)
}

body[color-theme=silkblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #3F77D9;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #3F77D9;
    --tabIcon-filter: invert(0)
}

body[color-theme=veniceblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #005b96;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #005b96;
    --tabIcon-filter: invert(0)
}

body[color-theme=midnightblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #0285c8;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #0285c8;
    --tabIcon-filter: invert(0)
}

body[color-theme=mineralgreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #3d5566;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #3d5566;
    --tabIcon-filter: invert(0)
}

body[color-theme=warmpurple][_ngcontent-ng-c3674886643] {
    --secondary-color: #7e1fac;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #7e1fac;
    --tabIcon-filter: invert(0)
}

body[color-theme=cobaltblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #1A3DA6;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #1A3DA6;
    --tabIcon-filter: invert(0)
}

body[color-theme=pacificblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #04A1A6;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #04A1A6;
    --tabIcon-filter: invert(0)
}

body[color-theme=fuelyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #f6ae2d;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #f6ae2d;
    --tabIcon-filter: invert(0)
}

body[color-theme=brightyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #f3e819;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #f3e819;
    --tabIcon-filter: invert(0)
}

body[color-theme=osgbook][_ngcontent-ng-c3674886643] {
    --secondary-color: #1A3DA6;
    --secondary-color-contrast: #ffffff;
    --primary-color: #1A3DA6;
    --primary-color-shade: #0f2462;
    --primary-color-tint: #0f2462;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ffffff;
    --tabIcon-filter: invert(0)
}

body[color-theme=tuliporange][_ngcontent-ng-c3674886643] {
    --secondary-color: #F6A237;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #F6A237;
    --tabIcon-filter: invert(0)
}

body[color-theme=winered][_ngcontent-ng-c3674886643] {
    --secondary-color: #A00000;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #A00000;
    --tabIcon-filter: invert(0)
}

body[color-theme=cranberry][_ngcontent-ng-c3674886643] {
    --secondary-color: #D84396;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #D84396;
    --tabIcon-filter: invert(0)
}

body[color-theme=marine][_ngcontent-ng-c3674886643] {
    --secondary-color: #0B2972;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #0B2972;
    --tabIcon-filter: invert(0)
}

body[color-theme=candlelight][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFE001;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFE001;
    --tabIcon-filter: invert(0)
}

body[color-theme=beeyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #EBB023;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #EBB023;
    --tabIcon-filter: invert(0)
}

body[color-theme=orangepeel][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFA800;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFA800;
    --tabIcon-filter: invert(0)
}

body[color-theme=azureblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #007ACC;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #007ACC;
    --tabIcon-filter: invert(0)
}

body[color-theme=chromeorange][_ngcontent-ng-c3674886643] {
    --secondary-color: #FF9600;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FF9600;
    --tabIcon-filter: invert(0)
}

body[color-theme=vibrantyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #F8FF13;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #F8FF13;
    --tabIcon-filter: invert(0)
}

body[color-theme=shyam365][_ngcontent-ng-c3674886643],
body[color-theme=newlotus][_ngcontent-ng-c3674886643],
body[color-theme=lotus365s][_ngcontent-ng-c3674886643],
body[color-theme=gamblerid365][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFE001;
    --secondary-color-contrast: #000000;
    --primary-color: #1e8067;
    --primary-color-shade: #1a715b;
    --primary-color-tint: #358d76;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFE001;
    --tabIcon-filter: invert(0)
}

body[color-theme=driftwood][_ngcontent-ng-c3674886643] {
    --secondary-color: #b4833e;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #b4833e;
    --tabIcon-filter: invert(0)
}

body[color-theme=darkpink][_ngcontent-ng-c3674886643] {
    --secondary-color: #B6277B;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #B6277B;
    --tabIcon-filter: invert(0)
}

body[color-theme=cherryred][_ngcontent-ng-c3674886643] {
    --secondary-color: #C10930;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #C10930;
    --tabIcon-filter: invert(0)
}

body[color-theme=electricblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #0088CC;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #0088CC;
    --tabIcon-filter: invert(0)
}

body[color-theme=matchpari][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFC629;
    --secondary-color-contrast: #000000;
    --primary-color: #8000FF;
    --primary-color-shade: #7100e0;
    --primary-color-tint: #8d1aff;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFC629;
    --tabIcon-filter: invert(0)
}

body[color-theme=dustyorange][_ngcontent-ng-c3674886643] {
    --secondary-color: #EE8C31;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #EE8C31;
    --tabIcon-filter: invert(0)
}

body[color-theme=artyred][_ngcontent-ng-c3674886643] {
    --secondary-color: #FD0000;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FD0000;
    --tabIcon-filter: invert(0)
}

body[color-theme=goldenbell][_ngcontent-ng-c3674886643] {
    --secondary-color: #ED8929;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #ED8929;
    --tabIcon-filter: invert(0)
}

body[color-theme=brightaqua][_ngcontent-ng-c3674886643] {
    --secondary-color: #00FFFC;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #00FFFC;
    --tabIcon-filter: invert(0)
}

body[color-theme=sandyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #E9C869;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #E9C869;
    --tabIcon-filter: invert(0)
}

body[color-theme=darkblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #183787;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #183787;
    --tabIcon-filter: invert(0)
}

body[color-theme=funbuzz][_ngcontent-ng-c3674886643] {
    --secondary-color: #FFCC00;
    --secondary-color-contrast: #000000;
    --primary-color: #184438;
    --primary-color-shade: #153c31;
    --primary-color-tint: #2f574c;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FFCC00;
    --tabIcon-filter: invert(0)
}

body[color-theme=tiger11][_ngcontent-ng-c3674886643] {
    --secondary-color: #FF9700;
    --secondary-color-contrast: #000000;
    --primary-color: #205685;
    --primary-color-shade: #1c4c75;
    --primary-color-tint: #366791;
    --primary-color-contrast: #ffffff;
    --highlight-color: #FF9700;
    --tabIcon-filter: invert(0)
}

body[color-theme=brightblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #0052ED;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #0052ED;
    --tabIcon-filter: invert(0)
}

body[color-theme=brightgreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #55FE43;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #55FE43;
    --tabIcon-filter: invert(0)
}

body[color-theme=yaleblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #17459A;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #17459A;
    --tabIcon-filter: invert(0)
}

body[color-theme=hukumid][_ngcontent-ng-c3674886643] {
    --secondary-color: #17459A;
    --secondary-color-contrast: #ffffff;
    --primary-color: #1e8067;
    --primary-color-shade: #1a715b;
    --primary-color-tint: #358d76;
    --primary-color-contrast: #ffffff;
    --highlight-color: #17459A;
    --tabIcon-filter: invert(0)
}

body[color-theme=vividpurple][_ngcontent-ng-c3674886643] {
    --secondary-color: #8000FF;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #8000FF;
    --tabIcon-filter: invert(0)
}

body[color-theme=lightyellow][_ngcontent-ng-c3674886643] {
    --secondary-color: #F7C528;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #F7C528;
    --tabIcon-filter: invert(0)
}

body[color-theme=dodgerblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #1A88F3;
    --secondary-color-contrast: #000000;
    --primary-color: #090f1e;
    --primary-color-shade: #080d1a;
    --primary-color-tint: #222735;
    --primary-color-contrast: #ffffff;
    --highlight-color: #1A88F3;
    --tabIcon-filter: invert(0)
}

body[color-theme=neonblue][_ngcontent-ng-c3674886643] {
    --secondary-color: #00CCFF;
    --secondary-color-contrast: #000000;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #00CCFF;
    --tabIcon-filter: invert(0)
}

body[color-theme=olivegreen][_ngcontent-ng-c3674886643] {
    --secondary-color: #6B8834;
    --secondary-color-contrast: #ffffff;
    --primary-color: #000000;
    --primary-color-shade: #141414;
    --primary-color-tint: #222222;
    --primary-color-contrast: #ffffff;
    --highlight-color: #6B8834;
    --tabIcon-filter: invert(0)
}

.login-section[_ngcontent-ng-c3674886643] {
    background: var(--grey-75);
    background-image: none !important
}

.login-section[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643] {
    flex-direction: column;
    justify-content: center;
    min-height: 145px;
    padding: 15px;
    box-sizing: border-box;
    position: sticky;
    top: 0
}

.login-section[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643]:before {
    content: "";
    position: absolute;
    background-color: var(--secondary-color);
    left: 50%;
    top: 0;
    transform: translate(-50%);
    width: 60%;
    height: 6px;
    border-radius: 0 0 15px 15px
}

.login-section[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643] .logo[_ngcontent-ng-c3674886643] {
    align-self: unset;
    margin: 15px 0
}

.login-section[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643] .page-back-btn[_ngcontent-ng-c3674886643] {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    column-gap: 4px;
    color: var(--white-color);
    padding: 0;
    cursor: pointer
}

.login-section[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643] .welcome-text[_ngcontent-ng-c3674886643] p[_ngcontent-ng-c3674886643] {
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: normal;
    color: var(--grey-600)
}

.login-section[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643] .welcome-text[_ngcontent-ng-c3674886643] h2[_ngcontent-ng-c3674886643] {
    color: var(--white-color);
    font-size: 22px;
    font-weight: 500;
    font-family: open sans, sans-serif;
    margin-bottom: 0;
    margin-top: 0
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] {
    background: var(--grey-50);
    border-radius: 15px 15px 0 0;
    height: calc(100% - 180px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] form[_ngcontent-ng-c3674886643] {
    width: 100%
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] {
    padding: 15px;
    padding-bottom: 15px !important;
    margin-top: 10px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1001
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] p.error[_ngcontent-ng-c3674886643] {
    position: absolute;
    left: 0;
    bottom: 15px;
    margin: 0;
    font-size: 12px;
    padding: 0 5px;
    color: var(--primary-color-contrast)
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] {
    min-width: calc(100% - 100px);
    max-width: -moz-fit-content;
    max-width: fit-content
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper {
    background: var(--card-background) !important;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0 10px 10px 0;
    border: none;
    color: var(--black-color)
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix {
    display: flex;
    column-gap: 4px;
    align-items: center;
    cursor: pointer
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix img {
    max-width: 25px;
    border-radius: 3px;
    width: 25px;
    height: 100%
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix p {
    margin: 0;
    font-size: 14px;
    color: var(--black-color);
    min-width: -moz-fit-content;
    min-width: fit-content
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper mat-select {
    max-width: calc(100% - 28px);
    display: flex
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-trigger {
    justify-content: flex-end
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-arrow-wrapper {
    margin-left: 0
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-value {
    display: none
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-value .mat-mdc-select-value-text {
    font-size: 14px;
    display: none
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper .mdc-line-ripple {
    display: none
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input {
    font-size: 14px;
    border: none;
    outline: none;
    border-radius: 6px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field.select-menu[_ngcontent-ng-c3674886643] {
    min-width: 100px;
    width: 100px;
    position: relative
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field.select-menu[_ngcontent-ng-c3674886643]:before {
    content: "";
    width: 2px;
    background: var(--grey-600);
    height: 30px;
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 1;
    opacity: .6
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-list[_ngcontent-ng-c3674886643] mat-form-field.select-menu[_ngcontent-ng-c3674886643] .mat-mdc-text-field-wrapper {
    border-radius: 10px 0 0 10px;
    position: relative;
    padding: 0 8px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] {
    width: 100%
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .otpBTNs[_ngcontent-ng-c3674886643] {
    display: flex;
    width: 100%;
    column-gap: 5px;
    row-gap: 5px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .otpBTNs[_ngcontent-ng-c3674886643] button[_ngcontent-ng-c3674886643] {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .otpBTNs[_ngcontent-ng-c3674886643] button[_ngcontent-ng-c3674886643] img[_ngcontent-ng-c3674886643] {
    width: 18px;
    margin-right: 5px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .otpBTNs[_ngcontent-ng-c3674886643] button[_ngcontent-ng-c3674886643] mat-icon[_ngcontent-ng-c3674886643] {
    margin-right: 5px;
    font-size: 18px;
    width: 18px;
    height: 18px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] p[_ngcontent-ng-c3674886643] {
    margin: 0;
    color: var(--white-color);
    font-size: 10px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] p.separator[_ngcontent-ng-c3674886643] {
    text-align: center;
    margin: 10px 0
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .extra-btns[_ngcontent-ng-c3674886643] {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .extra-btns[_ngcontent-ng-c3674886643] button[_ngcontent-ng-c3674886643] {
    min-height: 40px;

}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .extra-btns[_ngcontent-ng-c3674886643] .whatsapp-id-btn[_ngcontent-ng-c3674886643] {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    background: var(--header-dark-color);
    border: 1px solid #01e676;
    color: var(--white-color)
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .extra-btns[_ngcontent-ng-c3674886643] .whatsapp-id-btn[_ngcontent-ng-c3674886643] img[_ngcontent-ng-c3674886643] {
    width: 25px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .extra-btns[_ngcontent-ng-c3674886643] .whatsapp-id-btn[_ngcontent-ng-c3674886643] p[_ngcontent-ng-c3674886643] {
    color: var(--white-color)
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] button[_ngcontent-ng-c3674886643] {
    width: 100%;
    min-height: 45px
}

.login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .terms[_ngcontent-ng-c3674886643] {
    font-size: 12px;
    opacity: .6;
    cursor: pointer;
    position: absolute;
    bottom: 10px
}

.login-section.login-page[_ngcontent-ng-c3674886643] {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.login-section.login-page[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643] {
    height: 100%;
    align-items: center;
    position: relative
}

.login-section.login-page[_ngcontent-ng-c3674886643] .login-header-section[_ngcontent-ng-c3674886643] .welcome-text[_ngcontent-ng-c3674886643] {
    display: none
}

.login-section.login-page[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] {
    height: auto
}

.login-section.login-page[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .welcome-text[_ngcontent-ng-c3674886643] {
    width: 100%
}

.login-section.login-page[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .welcome-text[_ngcontent-ng-c3674886643] p[_ngcontent-ng-c3674886643] {
    font-family: Open Sans, sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: normal
}

.login-section.login-page[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .welcome-text[_ngcontent-ng-c3674886643] h2[_ngcontent-ng-c3674886643] {
    font-size: 18px;
    font-weight: 500;
    font-family: open_Bold;
    margin-bottom: 0;
    margin-top: 0
}

.login-section.login-page[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] p.separator[_ngcontent-ng-c3674886643] {
    color: var(--grey-900)
}

@media all and (max-width: 360px) {
    .login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] {
        padding: 5px
    }

    .login-section[_ngcontent-ng-c3674886643] .body-section[_ngcontent-ng-c3674886643] .login-form[_ngcontent-ng-c3674886643] .form-btn[_ngcontent-ng-c3674886643] .extra-btns[_ngcontent-ng-c3674886643] {
        flex-direction: column;
        row-gap: 10px
    }

    .otpBTNs[_ngcontent-ng-c3674886643] {
        display: flex;
        flex-direction: column;
        width: 100%;
        column-gap: 5px;
        row-gap: 5px
    }

    .otpBTNs[_ngcontent-ng-c3674886643] button[_ngcontent-ng-c3674886643] {
        min-width: 100%
    }
}


.mdc-text-field {
    border-top-left-radius: 4px;
    border-top-left-radius: var(--mdc-shape-small, 4px);
    border-top-right-radius: 4px;
    border-top-right-radius: var(--mdc-shape-small, 4px);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    display: inline-flex;
    align-items: baseline;
    padding: 0 16px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    will-change: opacity, transform, color
}

.mdc-text-field .mdc-floating-label {
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
}

.mdc-text-field__input {
    height: 28px;
    width: 100%;
    min-width: 0;
    border: none;
    border-radius: 0;
    background: none;
    appearance: none;
    padding: 0
}

.mdc-text-field__input::-ms-clear {
    display: none
}

.mdc-text-field__input::-webkit-calendar-picker-indicator {
    display: none
}

.mdc-text-field__input:focus {
    outline: none
}

.mdc-text-field__input:invalid {
    box-shadow: none
}

@media all {
    .mdc-text-field__input::placeholder {
        opacity: 0
    }
}

@media all {
    .mdc-text-field__input:-ms-input-placeholder {
        opacity: 0
    }
}

@media all {

    .mdc-text-field--no-label .mdc-text-field__input::placeholder,
    .mdc-text-field--focused .mdc-text-field__input::placeholder {
        opacity: 1
    }
}

@media all {

    .mdc-text-field--no-label .mdc-text-field__input:-ms-input-placeholder,
    .mdc-text-field--focused .mdc-text-field__input:-ms-input-placeholder {
        opacity: 1
    }
}

.mdc-text-field__affix {
    height: 28px;
    opacity: 0;
    white-space: nowrap
}

.mdc-text-field--label-floating .mdc-text-field__affix,
.mdc-text-field--no-label .mdc-text-field__affix {
    opacity: 1
}

@supports(-webkit-hyphens: none) {
    .mdc-text-field--outlined .mdc-text-field__affix {
        align-items: center;
        align-self: center;
        display: inline-flex;
        height: 100%
    }
}

.mdc-text-field__affix--prefix {
    padding-left: 0;
    padding-right: 2px
}

[dir=rtl] .mdc-text-field__affix--prefix,
.mdc-text-field__affix--prefix[dir=rtl] {
    padding-left: 2px;
    padding-right: 0
}

.mdc-text-field--end-aligned .mdc-text-field__affix--prefix {
    padding-left: 0;
    padding-right: 12px
}

[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--prefix,
.mdc-text-field--end-aligned .mdc-text-field__affix--prefix[dir=rtl] {
    padding-left: 12px;
    padding-right: 0
}

.mdc-text-field__affix--suffix {
    padding-left: 12px;
    padding-right: 0
}

[dir=rtl] .mdc-text-field__affix--suffix,
.mdc-text-field__affix--suffix[dir=rtl] {
    padding-left: 0;
    padding-right: 12px
}

.mdc-text-field--end-aligned .mdc-text-field__affix--suffix {
    padding-left: 2px;
    padding-right: 0
}

[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__affix--suffix,
.mdc-text-field--end-aligned .mdc-text-field__affix--suffix[dir=rtl] {
    padding-left: 0;
    padding-right: 2px
}

.mdc-text-field--filled {
    height: 56px
}

.mdc-text-field--filled::before {
    display: inline-block;
    width: 0;
    height: 40px;
    content: "";
    vertical-align: 0
}

.mdc-text-field--filled .mdc-floating-label {
    left: 16px;
    right: initial
}

[dir=rtl] .mdc-text-field--filled .mdc-floating-label,
.mdc-text-field--filled .mdc-floating-label[dir=rtl] {
    left: initial;
    right: 16px
}

.mdc-text-field--filled .mdc-floating-label--float-above {
    transform: translateY(-106%) scale(0.75)
}

.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
    height: 100%
}

.mdc-text-field--filled.mdc-text-field--no-label .mdc-floating-label {
    display: none
}

.mdc-text-field--filled.mdc-text-field--no-label::before {
    display: none
}

@supports(-webkit-hyphens: none) {
    .mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__affix {
        align-items: center;
        align-self: center;
        display: inline-flex;
        height: 100%
    }
}

.mdc-text-field--outlined {
    height: 56px;
    overflow: visible
}

.mdc-text-field--outlined .mdc-floating-label--float-above {
    transform: translateY(-37.25px) scale(1)
}

.mdc-text-field--outlined .mdc-floating-label--float-above {
    font-size: .75rem
}

.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    transform: translateY(-34.75px) scale(0.75)
}

.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    font-size: 1rem
}

.mdc-text-field--outlined .mdc-text-field__input {
    height: 100%
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
    border-top-left-radius: 4px;
    border-top-left-radius: var(--mdc-shape-small, 4px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-left-radius: var(--mdc-shape-small, 4px)
}

[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl] {
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-top-right-radius: var(--mdc-shape-small, 4px);
    border-bottom-right-radius: 4px;
    border-bottom-right-radius: var(--mdc-shape-small, 4px);
    border-bottom-left-radius: 0
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
        width: max(12px, var(--mdc-shape-small, 4px))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
        max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px))*2)
    }
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-top-right-radius: var(--mdc-shape-small, 4px);
    border-bottom-right-radius: 4px;
    border-bottom-right-radius: var(--mdc-shape-small, 4px);
    border-bottom-left-radius: 0
}

[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl] {
    border-top-left-radius: 4px;
    border-top-left-radius: var(--mdc-shape-small, 4px);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-left-radius: var(--mdc-shape-small, 4px)
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined {
        padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined {
        padding-right: max(16px, var(--mdc-shape-small, 4px))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined+.mdc-text-field-helper-line {
        padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined+.mdc-text-field-helper-line {
        padding-right: max(16px, var(--mdc-shape-small, 4px))
    }
}

.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
    padding-left: 0
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
        padding-right: max(16px, var(--mdc-shape-small, 4px))
    }
}

[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,
.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
    padding-right: 0
}

@supports(top: max(0%)) {

    [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,
    .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
        padding-left: max(16px, var(--mdc-shape-small, 4px))
    }
}

.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
    padding-right: 0
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
        padding-left: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
    }
}

[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
    padding-left: 0
}

@supports(top: max(0%)) {

    [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,
    .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
        padding-right: max(16px, calc(var(--mdc-shape-small, 4px) + 4px))
    }
}

.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
    padding-left: 0;
    padding-right: 0
}

.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
    padding-top: 1px
}

.mdc-text-field--outlined .mdc-floating-label {
    left: 4px;
    right: initial
}

[dir=rtl] .mdc-text-field--outlined .mdc-floating-label,
.mdc-text-field--outlined .mdc-floating-label[dir=rtl] {
    left: initial;
    right: 4px
}

.mdc-text-field--outlined .mdc-text-field__input {
    display: flex;
    border: none !important;
    background-color: rgba(0, 0, 0, 0)
}

.mdc-text-field--outlined .mdc-notched-outline {
    z-index: 1
}

.mdc-text-field--textarea {
    flex-direction: column;
    align-items: center;
    width: auto;
    height: auto;
    padding: 0
}

.mdc-text-field--textarea .mdc-floating-label {
    top: 19px
}

.mdc-text-field--textarea .mdc-floating-label:not(.mdc-floating-label--float-above) {
    transform: none
}

.mdc-text-field--textarea .mdc-text-field__input {
    flex-grow: 1;
    height: auto;
    min-height: 1.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    resize: none;
    padding: 0 16px
}

.mdc-text-field--textarea.mdc-text-field--filled::before {
    display: none
}

.mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {
    transform: translateY(-10.25px) scale(0.75)
}

.mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {
    margin-top: 23px;
    margin-bottom: 9px
}

.mdc-text-field--textarea.mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
    margin-top: 16px;
    margin-bottom: 16px
}

.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
    padding-top: 0
}

.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
    transform: translateY(-27.25px) scale(1)
}

.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
    font-size: .75rem
}

.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    transform: translateY(-24.75px) scale(0.75)
}

.mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    font-size: 1rem
}

.mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {
    margin-top: 16px;
    margin-bottom: 16px
}

.mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label {
    top: 18px
}

.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field__input {
    margin-bottom: 2px
}

.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter {
    align-self: flex-end;
    padding: 0 16px
}

.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::after {
    display: inline-block;
    width: 0;
    height: 16px;
    content: "";
    vertical-align: -16px
}

.mdc-text-field--textarea.mdc-text-field--with-internal-counter .mdc-text-field-character-counter::before {
    display: none
}

.mdc-text-field__resizer {
    align-self: stretch;
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    max-height: 100%;
    max-width: 100%;
    min-height: 56px;
    min-width: fit-content;
    min-width: -moz-available;
    min-width: -webkit-fill-available;
    overflow: hidden;
    resize: both
}

.mdc-text-field--filled .mdc-text-field__resizer {
    transform: translateY(-1px)
}

.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input,
.mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter {
    transform: translateY(1px)
}

.mdc-text-field--outlined .mdc-text-field__resizer {
    transform: translateX(-1px) translateY(-1px)
}

[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer,
.mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl] {
    transform: translateX(1px) translateY(-1px)
}

.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter {
    transform: translateX(1px) translateY(1px)
}

[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input,
[dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter,
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl],
.mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl] {
    transform: translateX(-1px) translateY(1px)
}

.mdc-text-field--with-leading-icon {
    padding-left: 0;
    padding-right: 16px
}

[dir=rtl] .mdc-text-field--with-leading-icon,
.mdc-text-field--with-leading-icon[dir=rtl] {
    padding-left: 16px;
    padding-right: 0
}

.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label {
    max-width: calc(100% - 48px);
    left: 48px;
    right: initial
}

[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label,
.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label[dir=rtl] {
    left: initial;
    right: 48px
}

.mdc-text-field--with-leading-icon.mdc-text-field--filled .mdc-floating-label--float-above {
    max-width: calc(100% / 0.75 - 64px / 0.75)
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label {
    left: 36px;
    right: initial
}

[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label,
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label[dir=rtl] {
    left: initial;
    right: 36px
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
    max-width: calc(100% - 60px)
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
    transform: translateY(-37.25px) translateX(-32px) scale(1)
}

[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above,
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl] {
    transform: translateY(-37.25px) translateX(32px) scale(1)
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
    font-size: .75rem
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    transform: translateY(-34.75px) translateX(-32px) scale(0.75)
}

[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
[dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl],
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl] {
    transform: translateY(-34.75px) translateX(32px) scale(0.75)
}

.mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above,
.mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    font-size: 1rem
}

.mdc-text-field--with-trailing-icon {
    padding-left: 16px;
    padding-right: 0
}

[dir=rtl] .mdc-text-field--with-trailing-icon,
.mdc-text-field--with-trailing-icon[dir=rtl] {
    padding-left: 0;
    padding-right: 16px
}

.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
    max-width: calc(100% - 64px)
}

.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
    max-width: calc(100% / 0.75 - 64px / 0.75)
}

.mdc-text-field--with-trailing-icon.mdc-text-field--outlined :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
    max-width: calc(100% - 60px)
}

.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
    padding-left: 0;
    padding-right: 0
}

.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label {
    max-width: calc(100% - 96px)
}

.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon.mdc-text-field--filled .mdc-floating-label--float-above {
    max-width: calc(100% / 0.75 - 96px / 0.75)
}

.mdc-text-field-helper-line {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box
}

.mdc-text-field+.mdc-text-field-helper-line {
    padding-right: 16px;
    padding-left: 16px
}

.mdc-form-field>.mdc-text-field+label {
    align-self: flex-start
}

.mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--focused .mdc-notched-outline__trailing {
    border-width: 2px
}

.mdc-text-field--focused+.mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
    opacity: 1
}

.mdc-text-field--focused.mdc-text-field--outlined .mdc-notched-outline--notched .mdc-notched-outline__notch {
    padding-top: 2px
}

.mdc-text-field--focused.mdc-text-field--outlined.mdc-text-field--textarea .mdc-notched-outline--notched .mdc-notched-outline__notch {
    padding-top: 0
}

.mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
    opacity: 1
}

.mdc-text-field--disabled {
    pointer-events: none
}

@media screen and (forced-colors: active) {
    .mdc-text-field--disabled .mdc-text-field__input {
        background-color: Window
    }

    .mdc-text-field--disabled .mdc-floating-label {
        z-index: 1
    }
}

.mdc-text-field--disabled .mdc-floating-label {
    cursor: default
}

.mdc-text-field--disabled.mdc-text-field--filled .mdc-text-field__ripple {
    display: none
}

.mdc-text-field--disabled .mdc-text-field__input {
    pointer-events: auto
}

.mdc-text-field--end-aligned .mdc-text-field__input {
    text-align: right
}

[dir=rtl] .mdc-text-field--end-aligned .mdc-text-field__input,
.mdc-text-field--end-aligned .mdc-text-field__input[dir=rtl] {
    text-align: left
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,
[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix {
    direction: ltr
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {
    padding-left: 0;
    padding-right: 2px
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {
    padding-left: 12px;
    padding-right: 0
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--leading,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--leading {
    order: 1
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--suffix,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--suffix {
    order: 2
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__input,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__input {
    order: 3
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__affix--prefix,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__affix--prefix {
    order: 4
}

[dir=rtl] .mdc-text-field--ltr-text .mdc-text-field__icon--trailing,
.mdc-text-field--ltr-text[dir=rtl] .mdc-text-field__icon--trailing {
    order: 5
}

[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__input,
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__input {
    text-align: right
}

[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--prefix,
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--prefix {
    padding-right: 12px
}

[dir=rtl] .mdc-text-field--ltr-text.mdc-text-field--end-aligned .mdc-text-field__affix--suffix,
.mdc-text-field--ltr-text.mdc-text-field--end-aligned[dir=rtl] .mdc-text-field__affix--suffix {
    padding-left: 2px
}

.mdc-floating-label {
    position: absolute;
    left: 0;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    line-height: 1.15rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
    overflow: hidden;
    will-change: transform
}

[dir=rtl] .mdc-floating-label,
.mdc-floating-label[dir=rtl] {
    right: 0;
    left: auto;
    -webkit-transform-origin: right top;
    transform-origin: right top;
    text-align: right
}

.mdc-floating-label--float-above {
    cursor: auto
}

.mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after {
    margin-left: 1px;
    margin-right: 0px;
    content: "*"
}

[dir=rtl] .mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)::after,
.mdc-floating-label--required:not(.mdc-floating-label--hide-required-marker)[dir=rtl]::after {
    margin-left: 0;
    margin-right: 1px
}

.mdc-notched-outline {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    text-align: left;
    pointer-events: none
}

[dir=rtl] .mdc-notched-outline,
.mdc-notched-outline[dir=rtl] {
    text-align: right
}

.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
    box-sizing: border-box;
    height: 100%;
    pointer-events: none
}

.mdc-notched-outline__trailing {
    flex-grow: 1
}

.mdc-notched-outline__notch {
    flex: 0 0 auto;
    width: auto
}

.mdc-notched-outline .mdc-floating-label {
    display: inline-block;
    position: relative;
    max-width: 100%
}

.mdc-notched-outline .mdc-floating-label--float-above {
    text-overflow: clip
}

.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    max-width: 133.3333333333%
}

.mdc-notched-outline--notched .mdc-notched-outline__notch {
    padding-left: 0;
    padding-right: 8px;
    border-top: none
}

[dir=rtl] .mdc-notched-outline--notched .mdc-notched-outline__notch,
.mdc-notched-outline--notched .mdc-notched-outline__notch[dir=rtl] {
    padding-left: 8px;
    padding-right: 0
}

.mdc-notched-outline--no-label .mdc-notched-outline__notch {
    display: none
}

.mdc-line-ripple::before,
.mdc-line-ripple::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom-style: solid;
    content: ""
}

.mdc-line-ripple::before {
    z-index: 1
}

.mdc-line-ripple::after {
    transform: scaleX(0);
    opacity: 0;
    z-index: 2
}

.mdc-line-ripple--active::after {
    transform: scaleX(1);
    opacity: 1
}

.mdc-line-ripple--deactivating::after {
    opacity: 0
}

.mdc-floating-label--float-above {
    transform: translateY(-106%) scale(0.75)
}

.mdc-notched-outline__leading,
.mdc-notched-outline__notch,
.mdc-notched-outline__trailing {
    border-top: 1px solid;
    border-bottom: 1px solid
}

.mdc-notched-outline__leading {
    border-left: 1px solid;
    border-right: none;
    width: 12px
}

[dir=rtl] .mdc-notched-outline__leading,
.mdc-notched-outline__leading[dir=rtl] {
    border-left: none;
    border-right: 1px solid
}

.mdc-notched-outline__trailing {
    border-left: none;
    border-right: 1px solid
}

[dir=rtl] .mdc-notched-outline__trailing,
.mdc-notched-outline__trailing[dir=rtl] {
    border-left: 1px solid;
    border-right: none
}

.mdc-notched-outline__notch {
    max-width: calc(100% - 12px * 2)
}

.mdc-line-ripple::before {
    border-bottom-width: 1px
}

.mdc-line-ripple::after {
    border-bottom-width: 2px
}

.mdc-text-field--filled {
    --mdc-filled-text-field-active-indicator-height: 1px;
    --mdc-filled-text-field-focus-active-indicator-height: 2px;
    --mdc-filled-text-field-container-shape: 4px;
    border-top-left-radius: var(--mdc-filled-text-field-container-shape);
    border-top-right-radius: var(--mdc-filled-text-field-container-shape);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input {
    caret-color: var(--mdc-filled-text-field-caret-color)
}

.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input {
    caret-color: var(--mdc-filled-text-field-error-caret-color)
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: var(--mdc-filled-text-field-input-text-color)
}

.mdc-text-field--filled.mdc-text-field--disabled .mdc-text-field__input {
    color: var(--mdc-filled-text-field-disabled-input-text-color)
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label,
.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-floating-label--float-above {
    color: var(--mdc-filled-text-field-label-text-color)
}

.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label,
.mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label--float-above {
    color: var(--mdc-filled-text-field-focus-label-text-color)
}

.mdc-text-field--filled.mdc-text-field--disabled .mdc-floating-label,
.mdc-text-field--filled.mdc-text-field--disabled .mdc-floating-label--float-above {
    color: var(--mdc-filled-text-field-disabled-label-text-color)
}

.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label,
.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label--float-above {
    color: var(--mdc-filled-text-field-error-label-text-color)
}

.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label,
.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label--float-above {
    color: var(--mdc-filled-text-field-error-focus-label-text-color)
}

.mdc-text-field--filled .mdc-floating-label {
    font-family: var(--mdc-filled-text-field-label-text-font);
    font-size: var(--mdc-filled-text-field-label-text-size);
    font-weight: var(--mdc-filled-text-field-label-text-weight);
    letter-spacing: var(--mdc-filled-text-field-label-text-tracking)
}

@media all {
    .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
        color: var(--mdc-filled-text-field-input-text-placeholder-color)
    }
}

@media all {
    .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
        color: var(--mdc-filled-text-field-input-text-placeholder-color)
    }
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: var(--mdc-filled-text-field-container-color)
}

.mdc-text-field--filled.mdc-text-field--disabled {
    background-color: var(--mdc-filled-text-field-disabled-container-color)
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
    border-bottom-color: var(--mdc-filled-text-field-active-indicator-color)
}

.mdc-text-field--filled:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-line-ripple::before {
    border-bottom-color: var(--mdc-filled-text-field-hover-active-indicator-color)
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
    border-bottom-color: var(--mdc-filled-text-field-focus-active-indicator-color)
}

.mdc-text-field--filled.mdc-text-field--disabled .mdc-line-ripple::before {
    border-bottom-color: var(--mdc-filled-text-field-disabled-active-indicator-color)
}

.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
    border-bottom-color: var(--mdc-filled-text-field-error-active-indicator-color)
}

.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-line-ripple::before {
    border-bottom-color: var(--mdc-filled-text-field-error-hover-active-indicator-color)
}

.mdc-text-field--filled.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
    border-bottom-color: var(--mdc-filled-text-field-error-focus-active-indicator-color)
}

.mdc-text-field--filled .mdc-line-ripple::before {
    border-bottom-width: var(--mdc-filled-text-field-active-indicator-height)
}

.mdc-text-field--filled .mdc-line-ripple::after {
    border-bottom-width: var(--mdc-filled-text-field-focus-active-indicator-height)
}

.mdc-text-field--outlined {
    --mdc-outlined-text-field-outline-width: 1px;
    --mdc-outlined-text-field-focus-outline-width: 2px;
    --mdc-outlined-text-field-container-shape: 4px
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input {
    caret-color: var(--mdc-outlined-text-field-caret-color)
}

.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__input {
    caret-color: var(--mdc-outlined-text-field-error-caret-color)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: var(--mdc-outlined-text-field-input-text-color)
}

.mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input {
    color: var(--mdc-outlined-text-field-disabled-input-text-color)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-floating-label--float-above {
    color: var(--mdc-outlined-text-field-label-text-color)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label--float-above {
    color: var(--mdc-outlined-text-field-focus-label-text-color)
}

.mdc-text-field--outlined.mdc-text-field--disabled .mdc-floating-label,
.mdc-text-field--outlined.mdc-text-field--disabled .mdc-floating-label--float-above {
    color: var(--mdc-outlined-text-field-disabled-label-text-color)
}

.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label--float-above {
    color: var(--mdc-outlined-text-field-error-label-text-color)
}

.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label--float-above {
    color: var(--mdc-outlined-text-field-error-focus-label-text-color)
}

.mdc-text-field--outlined .mdc-floating-label {
    font-family: var(--mdc-outlined-text-field-label-text-font);
    font-size: var(--mdc-outlined-text-field-label-text-size);
    font-weight: var(--mdc-outlined-text-field-label-text-weight);
    letter-spacing: var(--mdc-outlined-text-field-label-text-tracking)
}

@media all {
    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
        color: var(--mdc-outlined-text-field-input-text-placeholder-color)
    }
}

@media all {
    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
        color: var(--mdc-outlined-text-field-input-text-placeholder-color)
    }
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
    border-top-left-radius: var(--mdc-outlined-text-field-container-shape);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--mdc-outlined-text-field-container-shape)
}

[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading[dir=rtl] {
    border-top-left-radius: 0;
    border-top-right-radius: var(--mdc-outlined-text-field-container-shape);
    border-bottom-right-radius: var(--mdc-outlined-text-field-container-shape);
    border-bottom-left-radius: 0
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
        width: max(12px, var(--mdc-outlined-text-field-container-shape))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
        max-width: calc(100% - max(12px, var(--mdc-outlined-text-field-container-shape))*2)
    }
}

.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
    border-top-left-radius: 0;
    border-top-right-radius: var(--mdc-outlined-text-field-container-shape);
    border-bottom-right-radius: var(--mdc-outlined-text-field-container-shape);
    border-bottom-left-radius: 0
}

[dir=rtl] .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing,
.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing[dir=rtl] {
    border-top-left-radius: var(--mdc-outlined-text-field-container-shape);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: var(--mdc-outlined-text-field-container-shape)
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined {
        padding-left: max(16px, calc(var(--mdc-outlined-text-field-container-shape) + 4px))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined {
        padding-right: max(16px, var(--mdc-outlined-text-field-container-shape))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined+.mdc-text-field-helper-line {
        padding-left: max(16px, calc(var(--mdc-outlined-text-field-container-shape) + 4px))
    }
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined+.mdc-text-field-helper-line {
        padding-right: max(16px, var(--mdc-outlined-text-field-container-shape))
    }
}

.mdc-text-field--outlined.mdc-text-field--with-leading-icon {
    padding-left: 0
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined.mdc-text-field--with-leading-icon {
        padding-right: max(16px, var(--mdc-outlined-text-field-container-shape))
    }
}

[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,
.mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
    padding-right: 0
}

@supports(top: max(0%)) {

    [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-leading-icon,
    .mdc-text-field--outlined.mdc-text-field--with-leading-icon[dir=rtl] {
        padding-left: max(16px, var(--mdc-outlined-text-field-container-shape))
    }
}

.mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
    padding-right: 0
}

@supports(top: max(0%)) {
    .mdc-text-field--outlined.mdc-text-field--with-trailing-icon {
        padding-left: max(16px, calc(var(--mdc-outlined-text-field-container-shape) + 4px))
    }
}

[dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,
.mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
    padding-left: 0
}

@supports(top: max(0%)) {

    [dir=rtl] .mdc-text-field--outlined.mdc-text-field--with-trailing-icon,
    .mdc-text-field--outlined.mdc-text-field--with-trailing-icon[dir=rtl] {
        padding-right: max(16px, calc(var(--mdc-outlined-text-field-container-shape) + 4px))
    }
}

.mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-text-field--with-trailing-icon {
    padding-left: 0;
    padding-right: 0
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--mdc-outlined-text-field-outline-color)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: var(--mdc-outlined-text-field-hover-outline-color)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-outlined-text-field-focus-outline-color)
}

.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--disabled .mdc-notched-outline__trailing {
    border-color: var(--mdc-outlined-text-field-disabled-outline-color)
}

.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--mdc-outlined-text-field-error-outline-color)
}

.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: var(--mdc-outlined-text-field-error-hover-outline-color)
}

.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-outlined-text-field-error-focus-outline-color)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
    border-width: var(--mdc-outlined-text-field-outline-width)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing {
    border-width: var(--mdc-outlined-text-field-focus-outline-width)
}

.mat-mdc-form-field-textarea-control {
    vertical-align: middle;
    resize: vertical;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    overflow: auto
}

.mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    border: none
}

.mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    line-height: normal;
    pointer-events: all
}

.mdc-text-field--no-label:not(.mdc-text-field--textarea) .mat-mdc-form-field-input-control.mdc-text-field__input,
.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control {
    height: auto
}

.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control.mdc-text-field__input[type=color] {
    height: 23px
}

.mat-mdc-text-field-wrapper {
    height: auto;
    flex: auto
}

.mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
    padding-left: 0;
    --mat-mdc-form-field-label-offset-x: -16px
}

.mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
    padding-right: 0
}

[dir=rtl] .mat-mdc-text-field-wrapper {
    padding-left: 16px;
    padding-right: 16px
}

[dir=rtl] .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
    padding-left: 0
}

[dir=rtl] .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
    padding-right: 0
}

.mat-form-field-disabled .mdc-text-field__input::placeholder {
    color: var(--mat-form-field-disabled-input-text-placeholder-color)
}

.mat-form-field-disabled .mdc-text-field__input::-moz-placeholder {
    color: var(--mat-form-field-disabled-input-text-placeholder-color)
}

.mat-form-field-disabled .mdc-text-field__input::-webkit-input-placeholder {
    color: var(--mat-form-field-disabled-input-text-placeholder-color)
}

.mat-form-field-disabled .mdc-text-field__input:-ms-input-placeholder {
    color: var(--mat-form-field-disabled-input-text-placeholder-color)
}

.mat-mdc-form-field-label-always-float .mdc-text-field__input::placeholder {
    transition-delay: 40ms;
    transition-duration: 110ms;
    opacity: 1
}

.mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label {
    left: auto;
    right: auto
}

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-text-field__input {
    display: inline-block
}

.mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field .mdc-notched-outline__notch {
    padding-top: 0
}

.mat-mdc-text-field-wrapper::before {
    content: none
}

.mat-mdc-form-field-subscript-wrapper {
    box-sizing: border-box;
    width: 100%;
    position: relative
}

.mat-mdc-form-field-hint-wrapper,
.mat-mdc-form-field-error-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 0 16px
}

.mat-mdc-form-field-subscript-dynamic-size .mat-mdc-form-field-hint-wrapper,
.mat-mdc-form-field-subscript-dynamic-size .mat-mdc-form-field-error-wrapper {
    position: static
}

.mat-mdc-form-field-bottom-align::before {
    content: "";
    display: inline-block;
    height: 16px
}

.mat-mdc-form-field-bottom-align.mat-mdc-form-field-subscript-dynamic-size::before {
    content: unset
}

.mat-mdc-form-field-hint-end {
    order: 1
}

.mat-mdc-form-field-hint-wrapper {
    display: flex
}

.mat-mdc-form-field-hint-spacer {
    flex: 1 0 1em
}

.mat-mdc-form-field-error {
    display: block
}

.mat-mdc-form-field-focus-overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    pointer-events: none
}

select.mat-mdc-form-field-input-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, 0);
    display: inline-flex;
    box-sizing: border-box
}

select.mat-mdc-form-field-input-control:not(:disabled) {
    cursor: pointer
}

.mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-infix::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-top: 5px solid;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -2.5px;
    pointer-events: none
}

[dir=rtl] .mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-infix::after {
    right: auto;
    left: 0
}

.mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-input-control {
    padding-right: 15px
}

[dir=rtl] .mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-input-control {
    padding-right: 0;
    padding-left: 15px
}

.cdk-high-contrast-active .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper {
    outline: solid 1px
}

.cdk-high-contrast-active .mat-form-field-appearance-fill.mat-form-field-disabled .mat-mdc-text-field-wrapper {
    outline-color: GrayText
}

.cdk-high-contrast-active .mat-form-field-appearance-fill.mat-focused .mat-mdc-text-field-wrapper {
    outline: dashed 3px
}

.cdk-high-contrast-active .mat-mdc-form-field.mat-focused .mdc-notched-outline {
    border: dashed 3px
}

.mat-mdc-form-field-input-control[type=date],
.mat-mdc-form-field-input-control[type=datetime],
.mat-mdc-form-field-input-control[type=datetime-local],
.mat-mdc-form-field-input-control[type=month],
.mat-mdc-form-field-input-control[type=week],
.mat-mdc-form-field-input-control[type=time] {
    line-height: 1
}

.mat-mdc-form-field-input-control::-webkit-datetime-edit {
    line-height: 1;
    padding: 0;
    margin-bottom: -2px
}

.mat-mdc-form-field {
    --mat-mdc-form-field-floating-label-scale: 0.75;
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: var(--mat-form-field-container-text-font);
    line-height: var(--mat-form-field-container-text-line-height);
    font-size: var(--mat-form-field-container-text-size);
    letter-spacing: var(--mat-form-field-container-text-tracking);
    font-weight: var(--mat-form-field-container-text-weight)
}

[dir=rtl] .mat-mdc-form-field {
    text-align: right
}

.mat-mdc-form-field .mdc-text-field--outlined .mdc-floating-label--float-above {
    font-size: calc(var(--mat-form-field-outlined-label-text-populated-size) * var(--mat-mdc-form-field-floating-label-scale))
}

.mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    font-size: var(--mat-form-field-outlined-label-text-populated-size)
}

.mat-mdc-form-field-flex {
    display: inline-flex;
    align-items: baseline;
    box-sizing: border-box;
    width: 100%
}

.mat-mdc-text-field-wrapper {
    width: 100%
}

.mat-mdc-form-field-icon-prefix,
.mat-mdc-form-field-icon-suffix {
    align-self: center;
    line-height: 0;
    pointer-events: auto;
    position: relative;
    z-index: 1
}

.mat-mdc-form-field-icon-prefix,
[dir=rtl] .mat-mdc-form-field-icon-suffix {
    padding: 0 4px 0 0
}

.mat-mdc-form-field-icon-suffix,
[dir=rtl] .mat-mdc-form-field-icon-prefix {
    padding: 0 0 0 4px
}

.mat-mdc-form-field-icon-prefix>.mat-icon,
.mat-mdc-form-field-icon-suffix>.mat-icon {
    padding: 12px;
    box-sizing: content-box
}

.mat-mdc-form-field-subscript-wrapper .mat-icon,
.mat-mdc-form-field label .mat-icon {
    width: 1em;
    height: 1em;
    font-size: inherit
}

.mat-mdc-form-field .mdc-notched-outline__notch {
    margin-left: -1px;
    -webkit-clip-path: inset(-9em -999em -9em 1px);
    clip-path: inset(-9em -999em -9em 1px)
}

[dir=rtl] .mat-mdc-form-field .mdc-notched-outline__notch {
    margin-left: 0;
    margin-right: -1px;
    -webkit-clip-path: inset(-9em 1px -9em -999em);
    clip-path: inset(-9em 1px -9em -999em)
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input {
    transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)
}

@media all {
    .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input::placeholder {
        transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1)
    }
}

@media all {
    .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input:-ms-input-placeholder {
        transition: opacity 67ms 0ms cubic-bezier(0.4, 0, 0.2, 1)
    }
}

@media all {

    .mdc-text-field--no-label .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input::placeholder,
    .mdc-text-field--focused .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input::placeholder {
        transition-delay: 40ms;
        transition-duration: 110ms
    }
}

@media all {

    .mdc-text-field--no-label .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input:-ms-input-placeholder,
    .mdc-text-field--focused .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__input:-ms-input-placeholder {
        transition-delay: 40ms;
        transition-duration: 110ms
    }
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field__affix {
    transition: opacity 150ms 0ms cubic-bezier(0.4, 0, 0.2, 1)
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple::before,
.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple::before {
    transition-duration: 75ms
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--outlined .mdc-floating-label--shake {
    animation: mdc-floating-label-shake-float-above-text-field-outlined 250ms 1
}

@keyframes mdc-floating-label-shake-float-above-text-field-outlined {
    0% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    33% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
        transform: translateX(calc(4% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    66% {
        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
        transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    100% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 34.75px)) scale(0.75)
    }
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--textarea {
    transition: none
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {
    animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1
}

@keyframes mdc-floating-label-shake-float-above-textarea-filled {
    0% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75)
    }

    33% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
        transform: translateX(calc(4% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75)
    }

    66% {
        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
        transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75)
    }

    100% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 10.25px)) scale(0.75)
    }
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--shake {
    animation: mdc-floating-label-shake-float-above-textarea-outlined 250ms 1
}

@keyframes mdc-floating-label-shake-float-above-textarea-outlined {
    0% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75)
    }

    33% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
        transform: translateX(calc(4% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75)
    }

    66% {
        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
        transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75)
    }

    100% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 24.75px)) scale(0.75)
    }
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake {
    animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1
}

@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
    0% {
        transform: translateX(calc(0% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    33% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
        transform: translateX(calc(4% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    66% {
        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
        transform: translateX(calc(-4% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    100% {
        transform: translateX(calc(0% - 32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }
}

[dir=rtl] .mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--shake,
.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-text-field--with-leading-icon.mdc-text-field--outlined[dir=rtl] .mdc-floating-label--shake {
    animation: mdc-floating-label-shake-float-above-text-field-outlined-leading-icon 250ms 1
}

@keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
    0% {
        transform: translateX(calc(0% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    33% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
        transform: translateX(calc(4% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    66% {
        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
        transform: translateX(calc(-4% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }

    100% {
        transform: translateX(calc(0% - -32px)) translateY(calc(0% - 34.75px)) scale(0.75)
    }
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-floating-label {
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1)
}

.mdc-floating-label--shake {
    animation: mdc-floating-label-shake-float-above-standard 250ms 1
}

@keyframes mdc-floating-label-shake-float-above-standard {
    0% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75)
    }

    33% {
        animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
        transform: translateX(calc(4% - 0%)) translateY(calc(0% - 106%)) scale(0.75)
    }

    66% {
        animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
        transform: translateX(calc(-4% - 0%)) translateY(calc(0% - 106%)) scale(0.75)
    }

    100% {
        transform: translateX(calc(0% - 0%)) translateY(calc(0% - 106%)) scale(0.75)
    }
}

.mat-mdc-form-field:not(.mat-form-field-no-animations) .mdc-line-ripple::after {
    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)
}

.mdc-notched-outline .mdc-floating-label {
    max-width: calc(100% + 1px)
}

.mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    max-width: calc(133.3333333333% + 1px)
}


.mat-mdc-select {
    display: inline-block;
    width: 100%;
    outline: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: var(--mat-select-enabled-trigger-text-color);
    font-family: var(--mat-select-trigger-text-font);
    line-height: var(--mat-select-trigger-text-line-height);
    font-size: var(--mat-select-trigger-text-size);
    font-weight: var(--mat-select-trigger-text-weight);
    letter-spacing: var(--mat-select-trigger-text-tracking)
}

.mat-mdc-select-disabled {
    color: var(--mat-select-disabled-trigger-text-color)
}

.mat-mdc-select-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    width: 100%
}

.mat-mdc-select-disabled .mat-mdc-select-trigger {
    -webkit-user-select: none;
    user-select: none;
    cursor: default
}

.mat-mdc-select-value {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.mat-mdc-select-value-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mat-mdc-select-arrow-wrapper {
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center
}

.mat-form-field-appearance-fill .mat-mdc-select-arrow-wrapper {
    transform: translateY(-8px)
}

.mat-form-field-appearance-fill .mdc-text-field--no-label .mat-mdc-select-arrow-wrapper {
    transform: none
}

.mat-mdc-select-arrow {
    width: 10px;
    height: 5px;
    position: relative;
    color: var(--mat-select-enabled-arrow-color)
}

.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
    color: var(--mat-select-focused-arrow-color)
}

.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-invalid .mat-mdc-select-arrow {
    color: var(--mat-select-invalid-arrow-color)
}

.mat-mdc-form-field .mat-mdc-select.mat-mdc-select-disabled .mat-mdc-select-arrow {
    color: var(--mat-select-disabled-arrow-color)
}

.mat-mdc-select-arrow svg {
    fill: currentColor;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.cdk-high-contrast-active .mat-mdc-select-arrow svg {
    fill: CanvasText
}

.mat-mdc-select-disabled .cdk-high-contrast-active .mat-mdc-select-arrow svg {
    fill: GrayText
}

div.mat-mdc-select-panel {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-height: 275px;
    outline: 0;
    overflow: auto;
    padding: 8px 0;
    border-radius: 4px;
    box-sizing: border-box;
    position: static;
    background-color: var(--mat-select-panel-background-color)
}

.cdk-high-contrast-active div.mat-mdc-select-panel {
    outline: solid 1px
}

.cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transform-origin: top center
}

.mat-mdc-select-panel-above div.mat-mdc-select-panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform-origin: bottom center
}

.mat-mdc-select-placeholder {
    transition: color 400ms 133.3333333333ms cubic-bezier(0.25, 0.8, 0.25, 1);
    color: var(--mat-select-placeholder-text-color)
}

._mat-animation-noopable .mat-mdc-select-placeholder {
    transition: none
}

.mat-form-field-hide-placeholder .mat-mdc-select-placeholder {
    color: rgba(0, 0, 0, 0);
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    transition: none;
    display: block
}

.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mat-mdc-floating-label {
    max-width: calc(100% - 18px)
}

.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-fill .mdc-floating-label--float-above {
    max-width: calc(100% / 0.75 - 24px)
}

.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-notched-outline__notch {
    max-width: calc(100% - 60px)
}

.mat-mdc-form-field-type-mat-select.mat-form-field-appearance-outline .mdc-text-field--label-floating .mdc-notched-outline__notch {
    max-width: calc(100% - 24px)
}

.mat-mdc-select-min-line:empty::before {
    content: " ";
    white-space: pre;
    width: 1px;
    display: inline-block;
    visibility: hidden
}


.mat-mdc-option {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding: 0;
    padding-left: 16px;
    padding-right: 16px;
    -webkit-user-select: none;
    user-select: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    color: var(--mat-option-label-text-color);
    font-family: var(--mat-option-label-text-font);
    line-height: var(--mat-option-label-text-line-height);
    font-size: var(--mat-option-label-text-size);
    letter-spacing: var(--mat-option-label-text-tracking);
    font-weight: var(--mat-option-label-text-weight);
    min-height: 48px
}

.mat-mdc-option:focus {
    outline: none
}

[dir=rtl] .mat-mdc-option,
.mat-mdc-option[dir=rtl] {
    padding-left: 16px;
    padding-right: 16px
}

.mat-mdc-option:hover:not(.mdc-list-item--disabled) {
    background-color: var(--mat-option-hover-state-layer-color)
}

.mat-mdc-option:focus.mdc-list-item,
.mat-mdc-option.mat-mdc-option-active.mdc-list-item {
    background-color: var(--mat-option-focus-state-layer-color)
}

.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
    color: var(--mat-option-selected-state-label-text-color)
}

.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
    background-color: var(--mat-option-selected-state-layer-color)
}

.mat-mdc-option.mdc-list-item {
    align-items: center
}

.mat-mdc-option.mdc-list-item--disabled {
    cursor: default;
    pointer-events: none
}

.mat-mdc-option.mdc-list-item--disabled .mat-mdc-option-pseudo-checkbox,
.mat-mdc-option.mdc-list-item--disabled .mdc-list-item__primary-text,
.mat-mdc-option.mdc-list-item--disabled>mat-icon {
    opacity: .38
}

.mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple) {
    padding-left: 32px
}

[dir=rtl] .mat-mdc-optgroup .mat-mdc-option:not(.mat-mdc-option-multiple) {
    padding-left: 16px;
    padding-right: 32px
}

.mat-mdc-option .mat-icon,
.mat-mdc-option .mat-pseudo-checkbox-full {
    margin-right: 16px;
    flex-shrink: 0
}

[dir=rtl] .mat-mdc-option .mat-icon,
[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-full {
    margin-right: 0;
    margin-left: 16px
}

.mat-mdc-option .mat-pseudo-checkbox-minimal {
    margin-left: 16px;
    flex-shrink: 0
}

[dir=rtl] .mat-mdc-option .mat-pseudo-checkbox-minimal {
    margin-right: 16px;
    margin-left: 0
}

.mat-mdc-option .mat-mdc-option-ripple {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    pointer-events: none
}

.mat-mdc-option .mdc-list-item__primary-text {
    white-space: normal;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    font-family: inherit;
    text-decoration: inherit;
    text-transform: inherit;
    margin-right: auto
}

[dir=rtl] .mat-mdc-option .mdc-list-item__primary-text {
    margin-right: 0;
    margin-left: auto
}

.cdk-high-contrast-active .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 10px;
    height: 0;
    border-bottom: solid 10px;
    border-radius: 10px
}

[dir=rtl] .cdk-high-contrast-active .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple)::after {
    right: auto;
    left: 16px
}

.mat-mdc-option-active .mat-mdc-focus-indicator::before {
    content: ""
}


.mat-select-search-hidden[_ngcontent-ng-c3516116704] {
    visibility: hidden
}

.mat-select-search-inner[_ngcontent-ng-c3516116704] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    font-size: inherit;
    box-shadow: none
}

.mat-select-search-inner.mat-select-search-inner-multiple.mat-select-search-inner-toggle-all[_ngcontent-ng-c3516116704] {
    display: flex;
    align-items: center
}

.mat-select-search-input[_ngcontent-ng-c3516116704] {
    box-sizing: border-box;
    width: 100%;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: currentColor;
    outline: none;
    background: none;
    padding: 0 44px 0 16px;
    height: calc(3em - 1px);
    line-height: calc(3em - 1px)
}

[dir=rtl][_nghost-ng-c3516116704] .mat-select-search-input[_ngcontent-ng-c3516116704],
[dir=rtl] [_nghost-ng-c3516116704] .mat-select-search-input[_ngcontent-ng-c3516116704] {
    padding-right: 16px;
    padding-left: 44px
}

.mat-select-search-inner-toggle-all[_ngcontent-ng-c3516116704] .mat-select-search-input[_ngcontent-ng-c3516116704] {
    padding-left: 5px
}

.mat-select-search-no-entries-found[_ngcontent-ng-c3516116704] {
    padding-top: 8px
}

.mat-select-search-clear[_ngcontent-ng-c3516116704] {
    position: absolute;
    right: 4px;
    top: 0
}

[dir=rtl][_nghost-ng-c3516116704] .mat-select-search-clear[_ngcontent-ng-c3516116704],
[dir=rtl] [_nghost-ng-c3516116704] .mat-select-search-clear[_ngcontent-ng-c3516116704] {
    right: auto;
    left: 4px
}

.mat-select-search-spinner[_ngcontent-ng-c3516116704] {
    position: absolute;
    right: 16px;
    top: calc(50% - 8px)
}

[dir=rtl][_nghost-ng-c3516116704] .mat-select-search-spinner[_ngcontent-ng-c3516116704],
[dir=rtl] [_nghost-ng-c3516116704] .mat-select-search-spinner[_ngcontent-ng-c3516116704] {
    right: auto;
    left: 16px
}

.mat-mdc-option[aria-disabled=true].contains-mat-select-search {
    position: sticky;
    top: -8px;
    z-index: 1;
    opacity: 1;
    margin-top: -8px;
    pointer-events: all
}

.mat-mdc-option[aria-disabled=true].contains-mat-select-search .mat-icon {
    margin-right: 0;
    margin-left: 0
}

.mat-mdc-option[aria-disabled=true].contains-mat-select-search mat-pseudo-checkbox {
    display: none
}

.mat-mdc-option[aria-disabled=true].contains-mat-select-search .mdc-list-item__primary-text {
    opacity: 1
}

.mat-select-search-toggle-all-checkbox[_ngcontent-ng-c3516116704] {
    padding-left: 5px
}

[dir=rtl][_nghost-ng-c3516116704] .mat-select-search-toggle-all-checkbox[_ngcontent-ng-c3516116704],
[dir=rtl] [_nghost-ng-c3516116704] .mat-select-search-toggle-all-checkbox[_ngcontent-ng-c3516116704] {
    padding-left: 0;
    padding-right: 5px
}


.mat-divider {
    --mat-divider-width: 1px;
    display: block;
    margin: 0;
    border-top-style: solid;
    border-top-color: var(--mat-divider-color);
    border-top-width: var(--mat-divider-width)
}

.mat-divider.mat-divider-vertical {
    border-top: 0;
    border-right-style: solid;
    border-right-color: var(--mat-divider-color);
    border-right-width: var(--mat-divider-width)
}

.mat-divider.mat-divider-inset {
    margin-left: 80px
}

[dir=rtl] .mat-divider.mat-divider-inset {
    margin-left: auto;
    margin-right: 80px
}


.mat-pseudo-checkbox {
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    transition: border-color 90ms cubic-bezier(0, 0, 0.2, 0.1), background-color 90ms cubic-bezier(0, 0, 0.2, 0.1)
}

.mat-pseudo-checkbox::after {
    position: absolute;
    opacity: 0;
    content: "";
    border-bottom: 2px solid currentColor;
    transition: opacity 90ms cubic-bezier(0, 0, 0.2, 0.1)
}

.mat-pseudo-checkbox._mat-animation-noopable {
    transition: none !important;
    animation: none !important
}

.mat-pseudo-checkbox._mat-animation-noopable::after {
    transition: none
}

.mat-pseudo-checkbox-disabled {
    cursor: default
}

.mat-pseudo-checkbox-indeterminate::after {
    left: 1px;
    opacity: 1;
    border-radius: 2px
}

.mat-pseudo-checkbox-checked::after {
    left: 1px;
    border-left: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 1;
    box-sizing: content-box
}

.mat-pseudo-checkbox-full {
    border: 2px solid
}

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
    border-color: rgba(0, 0, 0, 0)
}

.mat-pseudo-checkbox {
    width: 18px;
    height: 18px
}

.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
    width: 14px;
    height: 6px;
    transform-origin: center;
    top: -4.2426406871px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

.mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {
    top: 8px;
    width: 16px
}

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after {
    width: 10px;
    height: 4px;
    transform-origin: center;
    top: -2.8284271247px;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto
}

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate::after {
    top: 6px;
    width: 12px
}

.modal-header[_ngcontent-ng-c3794543714] {
    background: var(--header-dark-color);
    color: var(--white-color)
}

.modal-header[_ngcontent-ng-c3794543714] .action-btns[_ngcontent-ng-c3794543714] {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px
}

.modal-header[_ngcontent-ng-c3794543714] mat-icon[_ngcontent-ng-c3794543714] {
    font-size: .875rem;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--white-color)
}

.modal-header[_ngcontent-ng-c3794543714] button[_ngcontent-ng-c3794543714] {
    min-width: auto;
    width: 25px;
    max-height: 25px;
    background: var(--black-color) !important;
    border-radius: 50%;
    padding: 0
}

.modal-header[_ngcontent-ng-c3794543714] button[_ngcontent-ng-c3794543714]:focus-visible {
    border: 0 !important;
    outline: none
}

.modal-header[_ngcontent-ng-c3794543714] button[_ngcontent-ng-c3794543714] span[_ngcontent-ng-c3794543714] {
    color: var(--white-color);
    font-size: 16px;
    max-width: 24px
}

.editvalue-wrap[_ngcontent-ng-c3794543714] {
    margin: 0;
    padding: 0;
    border-radius: 0
}

.editvalue-wrap[_ngcontent-ng-c3794543714] p.input-msg[_ngcontent-ng-c3794543714] {
    font-size: .75rem;
    margin: 0 0 5px;
    opacity: .8
}

.editvalue-wrap[_ngcontent-ng-c3794543714]:last-child {
    grid-column-start: 1;
    grid-column-end: 3
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .amt-chip-grid[_ngcontent-ng-c3794543714] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 5px;
    row-gap: 5px;
    margin-bottom: 10px
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .amt-chip-grid.end-row[_ngcontent-ng-c3794543714] {
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--header-dark-color);
    padding-bottom: 10px
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .amt-chip-grid[_ngcontent-ng-c3794543714] .chip-grid-item[_ngcontent-ng-c3794543714] {
    text-align: center;
    min-width: auto;
    padding: 5px 6px;
    border-radius: 0;
    border: 1px solid var(--header-dark-color);
    background: var(--grey-00);
    font-weight: 500;
    line-height: 1;
    min-height: 30px;
    width: 100%;
    font-size: 10px;
    color: var(--white-color)
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .amt-chip-grid[_ngcontent-ng-c3794543714] .chip-grid-item.error[_ngcontent-ng-c3794543714] {
    border-color: var(--danger-color);
    border-width: 2px
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .amt-chip-grid[_ngcontent-ng-c3794543714] .chip-grid-item[_ngcontent-ng-c3794543714]:last-child {
    margin-right: 0
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .accept-checkwrap[_ngcontent-ng-c3794543714] p[_ngcontent-ng-c3794543714] {
    font-size: .75rem;
    font-weight: 500;
    color: var(--dark-text);
    margin: 0
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .accept-checkwrap[_ngcontent-ng-c3794543714] .checkitems[_ngcontent-ng-c3794543714] {
    display: flex;
    align-items: center;
    column-gap: 10px
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .accept-checkwrap[_ngcontent-ng-c3794543714] .accept-checkbox[_ngcontent-ng-c3794543714] {
    margin: 5px 0;
    display: block;
    border-radius: 0;
    padding: 0;
    font-weight: 300;
    color: var(--dark-text);
    font-size: .75rem;
    font-weight: 500
}

.editvalue-wrap .accept-checkwrap .accept-checkbox.mat-checkbox-disabled .mat-checkbox-inner-container {
    opacity: .6
}

.editvalue-wrap .accept-checkwrap .accept-checkbox.mat-checkbox-disabled .mat-checkbox-label {
    color: var(--text-color);
    opacity: .6
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .accept-checkwrap[_ngcontent-ng-c3794543714] .accept-checkbox[_ngcontent-ng-c3794543714] .mat-checkbox-frame {
    border-color: var(--card-background)
}

.editvalue-wrap .accept-checkwrap .accept-checkbox.mat-checkbox-checked .mat-checkbox-background {
    background: var(--card-background)
}

.editvalue-wrap .accept-checkwrap .accept-checkbox.mat-checkbox-checked .mat-checkbox-background .mat-checkbox-checkmark-path {
    stroke: var(--text-color) !important
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .action-btns[_ngcontent-ng-c3794543714] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    margin-top: 10px
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .action-btns[_ngcontent-ng-c3794543714] button[_ngcontent-ng-c3794543714] {
    font-size: .75rem;
    max-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .action-btns[_ngcontent-ng-c3794543714] button.cancel-btn[_ngcontent-ng-c3794543714] {
    border: .55px solid var(--grey-400);
    background: transparent
}

.editvalue-wrap[_ngcontent-ng-c3794543714] .action-btns[_ngcontent-ng-c3794543714] button.save-btn[_ngcontent-ng-c3794543714] {
    border: 1px solid var(--black-color);
    background: var(--black-color);
    color: var(--white-color)
}

.error-msg[_ngcontent-ng-c3794543714] {
    font-size: .625rem;
    color: var(--danger-color)
}

.mdc-touch-target-wrapper {
    display: inline
}

@keyframes mdc-checkbox-unchecked-checked-checkmark-path {

    0%,
    50% {
        stroke-dashoffset: 29.7833385
    }

    50% {
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1)
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {

    0%,
    68.2% {
        transform: scaleX(0)
    }

    68.2% {
        animation-timing-function: cubic-bezier(0, 0, 0, 1)
    }

    100% {
        transform: scaleX(1)
    }
}

@keyframes mdc-checkbox-checked-unchecked-checkmark-path {
    from {
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
        opacity: 1;
        stroke-dashoffset: 0
    }

    to {
        opacity: 0;
        stroke-dashoffset: -29.7833385
    }
}

@keyframes mdc-checkbox-checked-indeterminate-checkmark {
    from {
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
        transform: rotate(0deg);
        opacity: 1
    }

    to {
        transform: rotate(45deg);
        opacity: 0
    }
}

@keyframes mdc-checkbox-indeterminate-checked-checkmark {
    from {
        animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        transform: rotate(360deg);
        opacity: 1
    }
}

@keyframes mdc-checkbox-checked-indeterminate-mixedmark {
    from {
        animation-timing-function: mdc-animation-deceleration-curve-timing-function;
        transform: rotate(-45deg);
        opacity: 0
    }

    to {
        transform: rotate(0deg);
        opacity: 1
    }
}

@keyframes mdc-checkbox-indeterminate-checked-mixedmark {
    from {
        animation-timing-function: cubic-bezier(0.14, 0, 0, 1);
        transform: rotate(0deg);
        opacity: 1
    }

    to {
        transform: rotate(315deg);
        opacity: 0
    }
}

@keyframes mdc-checkbox-indeterminate-unchecked-mixedmark {
    0% {
        animation-timing-function: linear;
        transform: scaleX(1);
        opacity: 1
    }

    32.8%,
    100% {
        transform: scaleX(0);
        opacity: 0
    }
}

.mdc-checkbox {
    display: inline-block;
    position: relative;
    flex: 0 0 18px;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    line-height: 0;
    white-space: nowrap;
    cursor: pointer;
    vertical-align: bottom
}

.mdc-checkbox[hidden] {
    display: none
}

.mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring,
.mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring {
    pointer-events: none;
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    box-sizing: content-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%
}

@media screen and (forced-colors: active) {

    .mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring,
    .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring {
        border-color: CanvasText
    }
}

.mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring::after,
.mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring::after {
    content: "";
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 8px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 4px);
    width: calc(100% + 4px)
}

@media screen and (forced-colors: active) {

    .mdc-checkbox.mdc-ripple-upgraded--background-focused .mdc-checkbox__focus-ring::after,
    .mdc-checkbox:not(.mdc-ripple-upgraded):focus .mdc-checkbox__focus-ring::after {
        border-color: CanvasText
    }
}

@media all and (-ms-high-contrast: none) {
    .mdc-checkbox .mdc-checkbox__focus-ring {
        display: none
    }
}

@media screen and (forced-colors: active),
(-ms-high-contrast: active) {
    .mdc-checkbox__mixedmark {
        margin: 0 1px
    }
}

.mdc-checkbox--disabled {
    cursor: default;
    pointer-events: none
}

.mdc-checkbox__background {
    display: inline-flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    will-change: background-color, border-color;
    transition: background-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), border-color 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1)
}

.mdc-checkbox__checkmark {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1)
}

.mdc-checkbox--upgraded .mdc-checkbox__checkmark {
    opacity: 1
}

.mdc-checkbox__checkmark-path {
    transition: stroke-dashoffset 180ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
    stroke: currentColor;
    stroke-width: 3.12px;
    stroke-dashoffset: 29.7833385;
    stroke-dasharray: 29.7833385
}

.mdc-checkbox__mixedmark {
    width: 100%;
    height: 0;
    transform: scaleX(0) rotate(0deg);
    border-width: 1px;
    border-style: solid;
    opacity: 0;
    transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1)
}

.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__background,
.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__background,
.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__background,
.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__background {
    animation-duration: 180ms;
    animation-timing-function: linear
}

.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__checkmark-path {
    animation: mdc-checkbox-unchecked-checked-checkmark-path 180ms linear 0s;
    transition: none
}

.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__mixedmark {
    animation: mdc-checkbox-unchecked-indeterminate-mixedmark 90ms linear 0s;
    transition: none
}

.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__checkmark-path {
    animation: mdc-checkbox-checked-unchecked-checkmark-path 90ms linear 0s;
    transition: none
}

.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__checkmark {
    animation: mdc-checkbox-checked-indeterminate-checkmark 90ms linear 0s;
    transition: none
}

.mdc-checkbox--anim-checked-indeterminate .mdc-checkbox__mixedmark {
    animation: mdc-checkbox-checked-indeterminate-mixedmark 90ms linear 0s;
    transition: none
}

.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__checkmark {
    animation: mdc-checkbox-indeterminate-checked-checkmark 500ms linear 0s;
    transition: none
}

.mdc-checkbox--anim-indeterminate-checked .mdc-checkbox__mixedmark {
    animation: mdc-checkbox-indeterminate-checked-mixedmark 500ms linear 0s;
    transition: none
}

.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__mixedmark {
    animation: mdc-checkbox-indeterminate-unchecked-mixedmark 300ms linear 0s;
    transition: none
}

.mdc-checkbox__native-control:checked~.mdc-checkbox__background,
.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background,
.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background {
    transition: border-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1), background-color 90ms 0ms cubic-bezier(0, 0, 0.2, 1)
}

.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark-path,
.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__checkmark-path,
.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__checkmark-path {
    stroke-dashoffset: 0
}

.mdc-checkbox__native-control {
    position: absolute;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: inherit
}

.mdc-checkbox__native-control:disabled {
    cursor: default;
    pointer-events: none
}

.mdc-checkbox--touch {
    margin: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2)
}

.mdc-checkbox--touch .mdc-checkbox__native-control {
    top: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2);
    right: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2);
    left: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2);
    width: var(--mdc-checkbox-state-layer-size);
    height: var(--mdc-checkbox-state-layer-size)
}

.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark {
    transition: opacity 180ms 0ms cubic-bezier(0, 0, 0.2, 1), transform 180ms 0ms cubic-bezier(0, 0, 0.2, 1);
    opacity: 1
}

.mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__mixedmark {
    transform: scaleX(1) rotate(-45deg)
}

.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__checkmark,
.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__checkmark {
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1), transform 90ms 0ms cubic-bezier(0.4, 0, 0.6, 1)
}

.mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background .mdc-checkbox__mixedmark,
.mdc-checkbox__native-control[data-indeterminate=true]~.mdc-checkbox__background .mdc-checkbox__mixedmark {
    transform: scaleX(1) rotate(0deg);
    opacity: 1
}

.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background,
.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark,
.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__checkmark-path,
.mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__mixedmark {
    transition: none
}

.mdc-form-field {
    display: inline-flex;
    align-items: center;
    vertical-align: middle
}

.mdc-form-field[hidden] {
    display: none
}

.mdc-form-field>label {
    margin-left: 0;
    margin-right: auto;
    padding-left: 4px;
    padding-right: 0;
    order: 0
}

[dir=rtl] .mdc-form-field>label,
.mdc-form-field>label[dir=rtl] {
    margin-left: auto;
    margin-right: 0
}

[dir=rtl] .mdc-form-field>label,
.mdc-form-field>label[dir=rtl] {
    padding-left: 0;
    padding-right: 4px
}

.mdc-form-field--nowrap>label {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.mdc-form-field--align-end>label {
    margin-left: auto;
    margin-right: 0;
    padding-left: 0;
    padding-right: 4px;
    order: -1
}

[dir=rtl] .mdc-form-field--align-end>label,
.mdc-form-field--align-end>label[dir=rtl] {
    margin-left: 0;
    margin-right: auto
}

[dir=rtl] .mdc-form-field--align-end>label,
.mdc-form-field--align-end>label[dir=rtl] {
    padding-left: 4px;
    padding-right: 0
}

.mdc-form-field--space-between {
    justify-content: space-between
}

.mdc-form-field--space-between>label {
    margin: 0
}

[dir=rtl] .mdc-form-field--space-between>label,
.mdc-form-field--space-between>label[dir=rtl] {
    margin: 0
}

.mdc-checkbox {
    padding: calc((var(--mdc-checkbox-state-layer-size) - 18px) / 2);
    margin: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2)
}

.mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-disabled-unselected-icon-color);
    background-color: transparent
}

.mdc-checkbox .mdc-checkbox__native-control[disabled]:checked~.mdc-checkbox__background,
.mdc-checkbox .mdc-checkbox__native-control[disabled]:indeterminate~.mdc-checkbox__background,
.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true][disabled]~.mdc-checkbox__background {
    border-color: transparent;
    background-color: var(--mdc-checkbox-disabled-selected-icon-color)
}

.mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
    color: var(--mdc-checkbox-selected-checkmark-color)
}

.mdc-checkbox .mdc-checkbox__native-control:enabled~.mdc-checkbox__background .mdc-checkbox__mixedmark {
    border-color: var(--mdc-checkbox-selected-checkmark-color)
}

.mdc-checkbox .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__checkmark {
    color: var(--mdc-checkbox-disabled-selected-checkmark-color)
}

.mdc-checkbox .mdc-checkbox__native-control:disabled~.mdc-checkbox__background .mdc-checkbox__mixedmark {
    border-color: var(--mdc-checkbox-disabled-selected-checkmark-color)
}

.mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-unselected-icon-color);
    background-color: transparent
}

.mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,
.mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-selected-icon-color);
    background-color: var(--mdc-checkbox-selected-icon-color)
}

@keyframes mdc-checkbox-fade-in-background-8A000000FFF4433600000000FFF44336 {
    0% {
        border-color: var(--mdc-checkbox-unselected-icon-color);
        background-color: transparent
    }

    50% {
        border-color: var(--mdc-checkbox-selected-icon-color);
        background-color: var(--mdc-checkbox-selected-icon-color)
    }
}

@keyframes mdc-checkbox-fade-out-background-8A000000FFF4433600000000FFF44336 {

    0%,
    80% {
        border-color: var(--mdc-checkbox-selected-icon-color);
        background-color: var(--mdc-checkbox-selected-icon-color)
    }

    100% {
        border-color: var(--mdc-checkbox-unselected-icon-color);
        background-color: transparent
    }
}

.mdc-checkbox.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,
.mdc-checkbox.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background {
    animation-name: mdc-checkbox-fade-in-background-8A000000FFF4433600000000FFF44336
}

.mdc-checkbox.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,
.mdc-checkbox.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background {
    animation-name: mdc-checkbox-fade-out-background-8A000000FFF4433600000000FFF44336
}

.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-unselected-hover-icon-color);
    background-color: transparent
}

.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,
.mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-selected-hover-icon-color);
    background-color: var(--mdc-checkbox-selected-hover-icon-color)
}

@keyframes mdc-checkbox-fade-in-background-FF212121FFF4433600000000FFF44336 {
    0% {
        border-color: var(--mdc-checkbox-unselected-hover-icon-color);
        background-color: transparent
    }

    50% {
        border-color: var(--mdc-checkbox-selected-hover-icon-color);
        background-color: var(--mdc-checkbox-selected-hover-icon-color)
    }
}

@keyframes mdc-checkbox-fade-out-background-FF212121FFF4433600000000FFF44336 {

    0%,
    80% {
        border-color: var(--mdc-checkbox-selected-hover-icon-color);
        background-color: var(--mdc-checkbox-selected-hover-icon-color)
    }

    100% {
        border-color: var(--mdc-checkbox-unselected-hover-icon-color);
        background-color: transparent
    }
}

.mdc-checkbox:hover.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,
.mdc-checkbox:hover.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background {
    animation-name: mdc-checkbox-fade-in-background-FF212121FFF4433600000000FFF44336
}

.mdc-checkbox:hover.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,
.mdc-checkbox:hover.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background {
    animation-name: mdc-checkbox-fade-out-background-FF212121FFF4433600000000FFF44336
}

.mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-unselected-pressed-icon-color);
    background-color: transparent
}

.mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,
.mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,
.mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-selected-pressed-icon-color);
    background-color: var(--mdc-checkbox-selected-pressed-icon-color)
}

@keyframes mdc-checkbox-fade-in-background-8A000000FFF4433600000000FFF44336 {
    0% {
        border-color: var(--mdc-checkbox-unselected-pressed-icon-color);
        background-color: transparent
    }

    50% {
        border-color: var(--mdc-checkbox-selected-pressed-icon-color);
        background-color: var(--mdc-checkbox-selected-pressed-icon-color)
    }
}

@keyframes mdc-checkbox-fade-out-background-8A000000FFF4433600000000FFF44336 {

    0%,
    80% {
        border-color: var(--mdc-checkbox-selected-pressed-icon-color);
        background-color: var(--mdc-checkbox-selected-pressed-icon-color)
    }

    100% {
        border-color: var(--mdc-checkbox-unselected-pressed-icon-color);
        background-color: transparent
    }
}

.mdc-checkbox:not(:disabled):active.mdc-checkbox--anim-unchecked-checked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,
.mdc-checkbox:not(:disabled):active.mdc-checkbox--anim-unchecked-indeterminate .mdc-checkbox__native-control:enabled~.mdc-checkbox__background {
    animation-name: mdc-checkbox-fade-in-background-8A000000FFF4433600000000FFF44336
}

.mdc-checkbox:not(:disabled):active.mdc-checkbox--anim-checked-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background,
.mdc-checkbox:not(:disabled):active.mdc-checkbox--anim-indeterminate-unchecked .mdc-checkbox__native-control:enabled~.mdc-checkbox__background {
    animation-name: mdc-checkbox-fade-out-background-8A000000FFF4433600000000FFF44336
}

.mdc-checkbox .mdc-checkbox__background {
    top: calc((var(--mdc-checkbox-state-layer-size) - 18px) / 2);
    left: calc((var(--mdc-checkbox-state-layer-size) - 18px) / 2)
}

.mdc-checkbox .mdc-checkbox__native-control {
    top: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2);
    right: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2);
    left: calc((var(--mdc-checkbox-state-layer-size) - var(--mdc-checkbox-state-layer-size)) / 2);
    width: var(--mdc-checkbox-state-layer-size);
    height: var(--mdc-checkbox-state-layer-size)
}

.mdc-checkbox .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-unselected-focus-icon-color)
}

.mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,
.mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background {
    border-color: var(--mdc-checkbox-selected-focus-icon-color);
    background-color: var(--mdc-checkbox-selected-focus-icon-color)
}

.mdc-checkbox:hover .mdc-checkbox__ripple {
    opacity: var(--mdc-checkbox-unselected-hover-state-layer-opacity);
    background-color: var(--mdc-checkbox-unselected-hover-state-layer-color)
}

.mdc-checkbox:hover .mat-mdc-checkbox-ripple .mat-ripple-element {
    background-color: var(--mdc-checkbox-unselected-hover-state-layer-color)
}

.mdc-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__ripple {
    opacity: var(--mdc-checkbox-unselected-focus-state-layer-opacity);
    background-color: var(--mdc-checkbox-unselected-focus-state-layer-color)
}

.mdc-checkbox .mdc-checkbox__native-control:focus~.mat-mdc-checkbox-ripple .mat-ripple-element {
    background-color: var(--mdc-checkbox-unselected-focus-state-layer-color)
}

.mdc-checkbox:active .mdc-checkbox__native-control~.mdc-checkbox__ripple {
    opacity: var(--mdc-checkbox-unselected-pressed-state-layer-opacity);
    background-color: var(--mdc-checkbox-unselected-pressed-state-layer-color)
}

.mdc-checkbox:active .mdc-checkbox__native-control~.mat-mdc-checkbox-ripple .mat-ripple-element {
    background-color: var(--mdc-checkbox-unselected-pressed-state-layer-color)
}

.mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
    opacity: var(--mdc-checkbox-selected-hover-state-layer-opacity);
    background-color: var(--mdc-checkbox-selected-hover-state-layer-color)
}

.mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mat-mdc-checkbox-ripple .mat-ripple-element {
    background-color: var(--mdc-checkbox-selected-hover-state-layer-color)
}

.mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple {
    opacity: var(--mdc-checkbox-selected-focus-state-layer-opacity);
    background-color: var(--mdc-checkbox-selected-focus-state-layer-color)
}

.mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mat-mdc-checkbox-ripple .mat-ripple-element {
    background-color: var(--mdc-checkbox-selected-focus-state-layer-color)
}

.mdc-checkbox:active .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple {
    opacity: var(--mdc-checkbox-selected-pressed-state-layer-opacity);
    background-color: var(--mdc-checkbox-selected-pressed-state-layer-color)
}

.mdc-checkbox:active .mdc-checkbox__native-control:checked~.mat-mdc-checkbox-ripple .mat-ripple-element {
    background-color: var(--mdc-checkbox-selected-pressed-state-layer-color)
}

html {
    --mdc-checkbox-disabled-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-state-layer-opacity: 0.16;
    --mdc-checkbox-selected-hover-state-layer-opacity: 0.04;
    --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16;
    --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16;
    --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04;
    --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16
}

.mat-mdc-checkbox {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.mat-mdc-checkbox .mdc-checkbox__background {
    -webkit-print-color-adjust: exact;
    color-adjust: exact
}

.mat-mdc-checkbox._mat-animation-noopable *,
.mat-mdc-checkbox._mat-animation-noopable *::before {
    transition: none !important;
    animation: none !important
}

.mat-mdc-checkbox label {
    cursor: pointer
}

.mat-mdc-checkbox.mat-mdc-checkbox-disabled label {
    cursor: default
}

.mat-mdc-checkbox label:empty {
    display: none
}

.cdk-high-contrast-active .mat-mdc-checkbox.mat-mdc-checkbox-disabled {
    opacity: .5
}

.cdk-high-contrast-active .mat-mdc-checkbox .mdc-checkbox__checkmark {
    --mdc-checkbox-selected-checkmark-color: CanvasText;
    --mdc-checkbox-disabled-selected-checkmark-color: CanvasText
}

.mat-mdc-checkbox .mdc-checkbox__ripple {
    opacity: 0
}

.mat-mdc-checkbox-ripple,
.mdc-checkbox__ripple {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    border-radius: 50%;
    pointer-events: none
}

.mat-mdc-checkbox-ripple:not(:empty),
.mdc-checkbox__ripple:not(:empty) {
    transform: translateZ(0)
}

.mat-mdc-checkbox-ripple .mat-ripple-element {
    opacity: .1
}

.mat-mdc-checkbox-touch-target {
    position: absolute;
    top: 50%;
    height: 48px;
    left: 50%;
    width: 48px;
    transform: translate(-50%, -50%)
}

.mat-mdc-checkbox-ripple::before {
    border-radius: 50%
}

.mdc-checkbox__native-control:focus~.mat-mdc-focus-indicator::before {
    content: ""
}


.page-header {
    max-height: -moz-fit-content;
    max-height: fit-content;
    margin: 0;
    min-height: auto
}


.rules-page-wrap {
    padding: 0 !important;
    padding: 0 10px !important;
}

.rules-page-wrap .content-setting {
    padding: 10px 0 !important;
    border-radius: 10px !important;
}

.rules-page-wrap p {
    font-size: 12px !important;
    margin: 0 0 10px !important;
    text-align: justify !important;
}

.rules-page-wrap ul {
    padding-left: 15px !important;
    text-align: justify !important;
}

.rules-page-wrap ul li {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: normal;
    margin-bottom: 5px;
    font-size: 12px
}

.rules-page-wrap ul li:last-child {
    margin-bottom: 0
}

.rules-page-wrap ul li:before {
    content: "\2022";
    font-weight: 700;
    display: inline-block;
    width: auto;
    margin-left: -1.5em;
    margin-right: .5rem
}

.page-header {
    margin-bottom: 0 !important;
    min-height: auto
}

.page-header .logo img {
    width: 75px
}

.page-header .header-right-cont .selected-lang {
    margin: 1px 0 0;
    font-size: 10px;
    line-height: 1;
    color: var(--black-color);

    text-transform: uppercase;
    position: absolute;
    right: 18px;
    top: 28px
}


.page-header .header-right-cont .bal-cont .bal-amount {
    display: flex;
    flex-direction: column
}

.page-header .header-right-cont .bal-cont .bal-amount.show-bal {
    padding-right: 6px
}

.page-header .header-right-cont .bal-cont .bal-amount.exp-bal {
    padding-left: 6px;
    position: relative;
    cursor: pointer
}

.page-header .header-right-cont .bal-cont .bal-amount.exp-bal:before {
    content: "";
    background: var(--black-color);
    width: 1px;
    height: 90%;
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%)
}

.page-header .header-right-cont .bal-cont .bal-amount mat-label,
.page-header .header-right-cont .bal-cont .bal-amount p {
    font-size: 12px;
    color: var(--black-color);
    text-align: right;
    margin: 0
}

.page-header .header-right-cont .bal-cont .bal-amount mat-label {
    font-size: 8px
}

/* .page-header .header-right-cont .not-loggedIn button {
    min-width: auto;
    width: auto;
    height: 25px;
    max-width: 90px;
    font-size: 10px;
    background: var(--black-color);
    color: var(--black-color);
    border-radius: 5px
} */

.page-header .header-right-cont .not-loggedIn button.demo-btn {
    min-width: 30px;
    max-width: 65px
}

.filter-wrapper {
    position: sticky;
    /* top: 45px; */
    z-index: 1000;
    background: var(--grey-00);
    padding-top: 5px
}

.filter-wrapper .filter-search {
    display: grid;
    margin-bottom: 5px;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    column-gap: 10px;
    position: sticky;
    top: 44px;
    z-index: 1000
}

.filter-wrapper .filter-search .select-wrap {
    display: flex;
    flex-direction: column
}

.filter-wrapper .filter-search .select-wrap .label-cont {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4px
}

.filter-wrapper .filter-search .select-wrap .label-cont span {
    text-decoration: unset;
    font-size: 10px;
    cursor: pointer;
    color: var(--white-color)
}

.filter-wrapper .filter-search .select-wrap .label-cont label {
    font-size: 10px;
    color: var(--white-color);
    opacity: 1
}

.filter-wrapper .filter-search .select-wrap mat-form-field {
    max-width: 100%
}

.filter-wrapper .filter-search .select-wrap mat-form-field .mat-mdc-text-field-wrapper {
    background: var(--grey-75);
    min-height: 36px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    border: none
}

.filter-wrapper .filter-search .select-wrap mat-form-field .mat-mdc-text-field-wrapper .mdc-line-ripple {
    opacity: 0
}

.filter-wrapper .filter-search .select-wrap mat-form-field .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-trigger {
    font-size: 12px;
    color: var(--white-color)
}

.filter-wrapper .filter-search .select-wrap mat-form-field .mat-mdc-form-field-subscript-wrapper {
    display: none
}

.default-select {
    height: 40px;
    border-radius: 5px;
    background: var(--grey-75) !important;
    border: 0;
    padding: 0 8px;
    font-size: 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 99%;
    background-position-y: 8px
}

.gc-filter-select {
    background: var(--grey-75) !important;
    box-shadow: none !important;
    margin-top: 5px
}

.gc-filter-select mat-option {
    font-size: 12px;
    min-height: 45px !important;
    padding: 0 10px;
    max-width: calc(100% - 14px);
    border-radius: 10px;
    background: var(--black-color) !important;
    margin: 7px auto
}

.gc-filter-select mat-option .mdc-list-item__primary-text {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    column-gap: 5px;
    margin: 0;
    width: 100%;
    position: relative;
    text-transform: capitalize
}

.gc-filter-select mat-option .mdc-list-item__primary-text .p-logo {
    width: 30px;
    height: 30px;
    background: var(--white-color);
    border-radius: 5px
}

.gc-filter-select mat-option .mdc-list-item__primary-text .p-logo.all-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent
}

.gc-filter-select mat-option .mdc-list-item__primary-text .p-logo.all-icon svg path {
    stroke: var(--white-color)
}

.gc-filter-select mat-option .mdc-list-item__primary-text .p-logo img {
    width: 100%;
    padding: 0;
    height: 100%;
    display: block;
    margin: auto;
    object-fit: contain;
    border-radius: 5px
}

.gc-filter-select mat-option .mdc-list-item__primary-text .count {
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 1px 3px;
    width: auto;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.gc-filter-select mat-option.mat-mdc-option-active.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
    background: var(--secondary-color) !important;
    color: var(--secondary-color-contrast)
}

.gc-filter-select mat-option.mdc-list-item--selected {
    background: var(--secondary-color) !important;
    color: var(--secondary-color-contrast)
}

.gc-filter-select mat-option.mdc-list-item--selected .mdc-list-item__primary-text .p-logo.all-icon svg path {
    stroke: var(--secondary-color-contrast)
}

.gc-filter-select mat-option .mat-pseudo-checkbox {
    opacity: 1;
    border-color: var(--grey-900);
    border-width: 1px;
    margin-right: 12px;
    width: 16px;
    height: 16px;
    display: none
}

.gc-filter-select mat-option .mat-pseudo-checkbox:after {
    border-left: 1px solid currentColor;
    border-bottom: 1px solid var(--grey-900)
}

.cdk-overlay-pane:has(.gc-filter-select) {
    left: 50% !important;
    transform: translate(-50%) !important;
    max-height: calc(100% - 145px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 15px) !important;
    overflow-x: auto
}

.cdk-overlay-pane:has(.gc-filter-select) .gc-filter-select {
    position: relative;
    border-radius: 7px !important;
    max-width: 748px;
    min-width: 280px !important;
    max-height: calc(var(--vh, 1vh) * 100 - 330px);
    padding: 0
}

.cdk-overlay-pane:has(.gc-filter-select) .gc-filter-select.select-gType:before {
    content: "\a";
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #dd4397 transparent transparent;
    position: absolute;
    left: -15px
}

.page-body .pagetab-wrapper {
    top: 44px;
    margin-bottom: 0
}

.page-body .pagetab-wrapper .pagetab-header {
    margin-bottom: 0
}

.page-body.demoID .pagetab-wrapper {
    top: 74px
}

.page-body.demoID .filter-wrapper {
    top: 75px
}

.page-body .game-play-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1px 5px
}

.page-body .game-play-heading h2 {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-500);
    margin: 0;
    position: relative;
    text-transform: capitalize;
    padding-bottom: 3px
}

.page-body .game-play-heading h2:before {
    content: "";
    position: absolute;
    bottom: 0;
    width: calc(100% - 10px);
    border-radius: 0 0 10px;
    background: var(--secondary-color);
    height: 2px
}

.page-body .game-play-heading .view-all-link {
    font-size: 12px;
    font-weight: 400;
    color: var(--grey-500);
    text-decoration: unset;
    cursor: pointer
}

.page-body .casino-section {
    margin: 15px 0;
    padding: 0 10px 25px
}

.page-body .casino-section.go-casino .game-type-list ul li a:after {
    background: transparent
}

.page-body .casino-section .game-type-list {
    margin: 0
}

.page-body .casino-section .game-type-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 8px;
    width: 100%
}

.page-body .casino-section .game-type-list ul li {
    margin-left: 0;
    position: relative
}

.page-body .casino-section .game-type-list ul li .total-players {
    background: var(--header-dark-color);
    border-radius: 6px;
    border: 1px solid var(--grey-600);
    color: var(--white-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 5px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 999;
    opacity: 1;
    column-gap: 5px;
    font-size: 10px;
    opacity: .9
}

.page-body .casino-section .game-type-list ul li .total-players mat-icon {
    font-size: 12px;
    width: auto;
    height: auto
}

.page-body .casino-section .game-type-list ul li .game-detail {
    background: var(--grey-100);
    padding: 25px 10px 8px;
    margin-top: -20px;
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    min-height: 80px
}

.page-body .casino-section .game-type-list ul li .game-detail p {
    padding-left: 0
}

.page-body .casino-section .game-type-list ul li .game-detail p.game-name {
    font-size: 12px;

    color: var(--white-color);
    opacity: 1
}

.page-body .casino-section .game-type-list ul li .game-detail p.company-type,
.page-body .casino-section .game-type-list ul li .game-detail p.coins-limit {
    font-size: 10px;
    color: var(--white-color);
    opacity: .6;

}

.page-body .casino-section .game-type-list ul li img.game-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 101;
    width: 70px;
    opacity: .7
}

.page-body .casino-section .game-type-list ul li ion-button {
    position: absolute;
    bottom: 3px;
    right: 6px;
    --padding-start: 0;
    --padding-end: 0;
    height: auto
}

.page-body .casino-section .game-type-list ul li ion-button ion-icon {
    color: var(--black-color);
    font-size: 22px
}

.page-body .casino-section .game-type-list ul li ion-button ion-icon.red-text {
    color: var(--red-color)
}

.page-body .casino-section .game-type-list ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 10
}

.page-body .casino-section .game-type-list ul li a p {
    font-size: 14px;
    color: var(--black-color);
    position: absolute;
    bottom: 1px;
    left: 0;
    padding-left: 12px;
    z-index: 101;
    opacity: 1;
    box-shadow: inset 0 -60px 21px -12px #000000b3;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
    border-radius: 8px
}

.page-body .casino-section .game-type-list ul li a.active:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 30px var(--grey-100);
    z-index: 100;
    border-radius: 10px 10px 0 0
}

.page-body .casino-section .game-type-list ul li a:after {
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    background: rgba(0, 0, 0, .4);
    z-index: 99
}

.page-body .casino-section .game-type-list ul li a img {
    width: 100%;
    height: 150px;
    object-position: top center;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    border: 0px solid transparent
}

.page-body .casino-section .game-type-list ul li a img:hover {
    background: red
}

.page-body .casino-section .game-type-list ul li h3 {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    padding-left: 8px;
    line-height: normal
}

.page-body .casino-section .game-type-list ul li p {
    font-size: 12px;
    margin: 0;
    padding-left: 8px;
    opacity: .6
}

.page-body .nodata-wrap {
    min-height: 120px;
    background: var(--black-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: calc(100% - 20px);
    margin: auto
}

.page-body .nodata-wrap .game-icon {
    min-width: 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--black-color);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .nodata-wrap .game-icon mat-icon {
    width: 100%;
    color: var(--black-color);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-body .nodata-wrap .game-icon img {
    width: 100%
}

.page-body .nodata-wrap button {
    max-width: calc(100% - 20px);
    height: 35px;
    margin-top: 10px
}

.page-body .nodata-wrap p {
    font-size: 12px;
    margin: 4px 0 0
}

p.report-issue {
    margin: 0;
    font-size: 12px;
    text-align: center;
    margin-top: 10px !important
}

p.report-issue .link-text {
    color: var(--secondary-color)
}

@media all and (min-width: 768px) {
    .page-body .casino-section .game-type-list ul {
        grid-template-columns: repeat(4, 1fr)
    }
}

.casino-section {
    margin-bottom: 15px
}

.casino-section.go-casino .game-type-list ul li a img {
    height: 170px;
    object-position: top;
    object-fit: cover;
    background: #000
}

.casino-section.go-casino .game-type-list ul li a:after {
    background: transparent
}

.casino-section .game-type-list {
    margin: 0
}

.casino-section .game-type-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 8px;
    row-gap: 8px;
    width: 100%
}

.casino-section .game-type-list ul li {
    margin-left: 0;
    position: relative;
    cursor: pointer
}

.casino-section .game-type-list ul li .total-players {
    background: var(--header-dark-color);
    border-radius: 6px;
    border: 1px solid var(--grey-600);
    color: var(--white-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 5px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 999;
    opacity: 1;
    column-gap: 5px;
    font-size: 10px;
    opacity: .9
}

.casino-section .game-type-list ul li .total-players mat-icon {
    font-size: 12px;
    width: auto;
    height: auto
}

.casino-section .game-type-list ul li .game-detail {
    background: var(--grey-100);
    padding: 25px 10px 8px;
    margin-top: -20px;
    border-radius: 0 0 10px 10px;
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    min-height: 80px
}

.casino-section .game-type-list ul li .game-detail p {
    padding-left: 0
}

.casino-section .game-type-list ul li .game-detail p.game-name {
    font-size: 12px;

    color: var(--white-color);
    opacity: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.casino-section .game-type-list ul li .game-detail p.company-type,
.casino-section .game-type-list ul li .game-detail p.coins-limit {
    font-size: 10px;
    color: var(--white-color);
    opacity: .6;

}

.casino-section .game-type-list ul li img.game-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 101;
    width: 70px;
    opacity: .7
}

.casino-section .game-type-list ul li ion-button {
    position: absolute;
    bottom: 3px;
    right: 6px;
    --padding-start: 0;
    --padding-end: 0;
    height: auto
}

.casino-section .game-type-list ul li ion-button ion-icon {
    color: var(--black-color);
    font-size: 22px
}

.casino-section .game-type-list ul li ion-button ion-icon.red-text {
    color: var(--red-color)
}

.casino-section .game-type-list ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 10
}

.casino-section .game-type-list ul li a p {
    font-size: 14px;
    color: var(--black-color);
    position: absolute;
    bottom: 1px;
    left: 0;
    padding-left: 12px;
    z-index: 101;
    opacity: 1;
    box-shadow: inset 0 -60px 21px -12px #000000b3;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
    border-radius: 8px
}

.casino-section .game-type-list ul li a.active:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: inset 0 0 30px var(--grey-100);
    z-index: 100
}

.casino-section .game-type-list ul li a:after {
    content: "";
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: rgba(0, 0, 0, .4);
    z-index: 99
}

.casino-section .game-type-list ul li a img {
    width: 100%;
    height: 150px;
    object-position: top center;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    border: 0px solid transparent
}

.casino-section .game-type-list ul li a img:hover {
    background: red
}

.casino-section .game-type-list ul li h3 {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    padding-left: 8px;
    line-height: normal
}

.casino-section .game-type-list ul li p {
    font-size: 12px;
    margin: 0;
    padding-left: 8px;
    opacity: .6
}

@media all and (max-width: 400px) {
    .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
        max-width: 100%
    }
}



/*  Otp */

.modal-footer button.change-v-otp {
    color: var(--black-color);
    font-size: 12px
}

.otp-field {
    font-size: 14px;
    text-align: center;
    letter-spacing: 20px
}

.form-links p {
    cursor: not-allowed;
    color: var(--white-color) !important;
    opacity: .75
}

.form-links p.active {
    color: var(--white-color);
    cursor: pointer
}

.modal-header {
    position: relative;
    padding: 10px 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-header h2 {
    font-size: 14px;
    margin: 0;
    text-align: center
}

.modal-header .modal-close-btn {
    min-width: auto;
    width: 25px;
    max-height: 25px;
    background: var(--black-color) !important;
    border-radius: 50%;
    padding: 0;
    position: absolute;
    right: 10px;
    top: 10px
}

.modal-header .modal-close-btn span {
    color: var(--white-color);
    font-size: 16px
}

.modal-body {
    padding: 10px
}

.modal-body .card-wrap {
    background: var(--grey-00);
    border-radius: 10px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center
}

.modal-body .card-wrap.ww-card-wrap {
    min-height: 40px !important;
    margin: 10px 0
}

.modal-body .card-wrap.ww-card-wrap .withdrawal-coins {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px
}

.modal-body .card-wrap.ww-card-wrap .withdrawal-coins p {
    font-size: 10px;
    margin: 0
}

.modal-body .card-wrap.ww-card-wrap .withdrawal-coins mat-icon {
    position: relative;
    cursor: pointer
}

.modal-body .card-wrap .show-bal {
    color: var(--grey-700)
}

.modal-body .card-wrap .show-bal.avl-bal {
    text-align: center;
    margin-bottom: 5px
}

.modal-body .card-wrap .show-bal mat-label {
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 6px
}

.modal-body .card-wrap .show-bal p {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    color: var(--grey-700)
}

.modal-body .form-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 15px
}

.modal-body .form-wrap label {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 4px
}

.modal-body .form-wrap input {
    min-height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--grey-00);
    padding: 0 10px;
    font-size: 10px
}

.modal-body .form-wrap .note-message {
    margin: 5px 0 0;
    font-size: 10px;
    opacity: .8
}

.modal-body .withdraw-bankDetails {
    margin-top: 15px
}

.modal-body .withdraw-bankDetails .bankDetails-list {
    background: var(--grey-00);
    border-radius: 10px;
    padding: 10px
}

.modal-body .withdraw-bankDetails .bankDetails-list .pref-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    font-size: 10px;
    border-bottom: 1px solid var(--grey-75)
}

.modal-body .withdraw-bankDetails .bankDetails-list .bankinfo-list {
    padding: 0;
    list-style: none;
    font-size: 10px
}

.modal-body .withdraw-bankDetails .bankDetails-list .bankinfo-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 8px;
    padding: 4px 0
}

.modal-body .withdraw-bankDetails .bankDetails-list .bankinfo-list li label {
    max-width: 35%;
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.modal-body .withdraw-bankDetails .bankDetails-list .bankinfo-list li p {
    margin: 0;
    max-width: 65%;
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.modal-footer {
    padding: 10px
}

.modal-footer button {
    width: 100%
}

.pref-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.pref-head mat-form-field {
    max-width: 50%
}

.pref-head mat-form-field .mat-mdc-text-field-wrapper {
    padding: 0 5px;
    border: 1px solid var(--grey-700);
    border-radius: 10px
}

.pref-head mat-form-field .mat-mdc-text-field-wrapper .mdc-line-ripple {
    display: none
}

.pref-head mat-form-field .mat-mdc-form-field-bottom-align {
    display: none
}

.pref-head mat-form-field .mat-mdc-form-field-bottom-align:before {
    height: auto
}

.select-preffered-bank.mat-mdc-select-panel {
    background: var(--grey-100)
}

.select-preffered-bank.mat-mdc-select-panel .bank-option {
    min-height: 25px;
    font-size: 10px;
    background: var(--black-color)
}

.select-preffered-bank.mat-mdc-select-panel .bank-option .mat-pseudo-checkbox {
    visibility: hidden
}

.select-preffered-bank.mat-mdc-select-panel .bank-option:focus.mdc-list-item,
.select-preffered-bank.mat-mdc-select-panel .bank-option.mat-mdc-option-active.mdc-list-item {
    background: var(--grey-00)
}

.deposit-system-modal {
    overflow: auto;
    max-height: calc(var(--vh, 1vh) * 100 - 120px)
}

.deposit-system-modal .modal-header {
    background: var(--grey-00);
    position: sticky;
    top: 0;
    z-index: 10
}

.deposit-system-modal .modal-header h2 .amount {}

.deposit-system-modal .modal-body {
    padding: 10px 5px
}

.deposit-system-modal .modal-body .timerWrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 10px
}

.deposit-system-modal .modal-body .timer {
    background-color: var(--grey-50);
    border-radius: 10px 4px 4px 10px;
    font-size: 10px;
    margin-left: 0;
    padding: 1px 5px 1px 1px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    border: 1px solid var(--grey-100)
}

.deposit-system-modal .modal-body .timer mat-icon {
    font-size: 18px;
    width: unset;
    height: unset;
    color: var(--grey-600)
}

.deposit-system-modal .modal-body .pay-methods-wrap .pay-item {
    background: var(--grey-75);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
    min-height: 55px;
    padding: 0 10px;
    cursor: pointer
}

.deposit-system-modal .modal-body .pay-methods-wrap .pay-item .title h2 {
    font-size: 10px;
    margin: 0
}

.deposit-system-modal .modal-body .pay-methods-wrap .pay-item .img-wrap {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.deposit-system-modal .modal-body .pay-methods-wrap .pay-item .img-wrap img {
    width: 100%;
    height: 100%;
    background: var(--grey-75);
    padding: 2px;
    border-radius: 50%
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details {
    padding: 10px;
    background: var(--black-color);
    border-radius: 10px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details .card-title {
    border-bottom: 1px solid var(--grey-50);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details .card-title .img-wrap {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 50%;
    background: var(--grey-50)
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details .card-title .img-wrap img {
    width: 100%
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details .card-title .change-method-btn {
    background: var(--grey-100);
    color: var(--grey-800);
    font-size: 10px;
    padding: 0;
    min-width: 110px;
    border-radius: 25px;
    border: none;
    height: 30px;
    cursor: pointer
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details h4 {
    font-size: 10px;
    font-weight: 400;
    display: flex;
    align-items: center;
    column-gap: 5px;
    margin: 0;
    padding-bottom: 10px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.upi-details-section ul li .list-left-side {
    display: grid;
    justify-content: flex-start;
    align-items: center;
    grid-template-columns: 40px auto;
    column-gap: 6px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul {
    display: grid;
    grid-template-columns: auto;
    column-gap: 10px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li.qr-img {
    padding: 10px;
    border-radius: 10px;
    justify-content: center;
    height: 100%;
    background: var(--grey-00)
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li.qr-img img {
    width: 100%;
    max-width: 300px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li.qr-img p {
    margin: 10px 0 0;
    text-align: center;
    font-size: 10px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li .qr-details {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    margin-bottom: 5px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li .qr-details p {
    border-radius: 8px;
    width: 100%;
    padding: 8px 10px;
    margin-top: 8px;
    background: var(--grey-00)
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li button {
    color: var(--black-color) !important;
    text-transform: capitalize;
    font-size: 10px;
    padding: 8px 10px;
    width: 100%;
    margin-top: 4px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li button mat-icon,
.deposit-system-modal .modal-body .payment-wrap .payment-type-details.qr-code-payment ul li button span[class^=appico-] {
    margin-right: 5px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul {
    list-style: none;
    margin: 0;
    background: var(--grey-75);
    padding: 5px;
    border-radius: 10px
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li>*:first-child {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li>*:first-child .pay-mode.img-wrap {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--grey-50);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: var(--black-color);
    margin: auto
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li>*:first-child .pay-mode.img-wrap img {
    display: block;
    margin: auto;
    width: 100%;
    max-height: 100%
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li>*:last-child {
    justify-self: end
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li.list-heading {
    margin-bottom: 5px;
    border-bottom: 1px solid var(--grey-100)
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li.list-heading p {
    font-size: 10px;
    margin: 0;
    padding: 0;
    font-weight: 500
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li label {
    font-size: 10px;
    font-weight: 600
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li p {
    margin: 0;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    text-align: right
}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li p a {
    position: relative;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    color: var(--white-color);

}

.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li p a mat-icon,
.deposit-system-modal .modal-body .payment-wrap .payment-type-details ul li p a span[class^=appico-] {
    color: var(--white-color);
    font-size: 14px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap {
    min-height: auto;
    margin-top: 0;
    border-radius: 10px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper {
    width: 100%;
    height: 100%
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap {
    position: relative
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap.disabled {
    filter: grayscale(1);
    opacity: .5;
    cursor: not-allowed
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap.disabled:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: #e5e5f7;
    opacity: .3;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #000000 0, #000000 1px, #e5e5f7 0, #e5e5f7 50%)
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap label {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap label .instant-note {
    display: flex;
    align-items: center
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap label .instant-note mat-icon,
.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap label .instant-note span[class^=appico-] {
    width: 16px;
    height: 16px;
    font-size: 16px
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap input {
    min-height: 40px;
    border-radius: 10px;
    border: 1px solid var(--grey-50);
    padding: 0 10px;
    font-size: 10px;
    width: 100%;
    background-color: var(--grey-75);
    color: var(--white-color)
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap .paste-icon {
    position: absolute;
    right: 5px;
    bottom: 10px;
    display: flex;
    font-size: 10px;
    line-height: 1.5;
    color: var(--white-color);
    cursor: pointer;

}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap .paste-icon mat-icon,
.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .utr-wrapper .input-wrap .paste-icon span[class^=appico-] {
    width: 18px;
    height: 18px;
    font-size: 16px;
    color: var(--white-color)
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .seprator {
    font-size: 12px;
    text-align: center;
    text-transform: uppercase
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot {
    position: relative
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot.disabled {
    filter: grayscale(1);
    opacity: .5;
    cursor: not-allowed
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot.disabled:after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: #e5e5f7;
    opacity: .3;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #000000 0, #000000 1px, #e5e5f7 0, #e5e5f7 50%)
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot label {
    width: 100%;
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    border: 1px solid var(--grey-50);
    border-radius: 10px;
    column-gap: 5px;
    padding: 0 5px
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot label a {
    display: flex;
    align-items: center;
    justify-content: center
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot label mat-icon,
.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot label span[class^=appico-] {
    color: var(--grey-900)
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot label p {
    margin: 0;
    font-size: 10px
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot .image-container {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    border: 1px solid var(--grey-50);
    border-radius: 10px;
    column-gap: 5px;
    padding: 15px;
    position: relative
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot .image-container img {
    height: 120px;
    width: 120px;
    object-fit: cover
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot .image-container a {
    width: 25px;
    height: 25px;
    position: absolute;
    right: 5px;
    top: 5px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--secondary-color-contrast);
    display: flex;
    align-items: center;
    justify-content: center
}

.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot .image-container a mat-icon,
.deposit-system-modal .modal-body .payment-wrap .upload-screenshot-wrap .screenshot-wrapper .upload-screenshot .image-container a span[class^=appico-] {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap {
    margin-top: 0;
    padding: 10px 0;
    border-radius: 10px;
    max-height: 280px;
    overflow-y: auto
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap h2 {
    font-size: 10px;
    font-weight: 600;
    margin: 0 0 6px
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--grey-75);
    border-radius: 10px;
    padding: 3px 6px;
    margin-bottom: 5px;
    border: 1px solid var(--grey-50)
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list .left-text {
    display: flex;
    align-items: center;
    column-gap: 6px
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list .left-text p {
    margin: 0;
    font-size: 10px
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list .img-wrap {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grey-50);
    padding: 0
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list .img-wrap.utr-img {
    padding: 5px
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list .img-wrap.utr-img img {
    display: block;
    margin: auto;
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    object-fit: contain;
    padding: 3px
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list .img-wrap img {
    width: 100%;
    display: block;
    max-height: 100%;
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    cursor: pointer
}

.deposit-system-modal .modal-body .payment-wrap .uploaded-img-wrap .uploaded-img-list .remove-btn {
    font-size: 10px;
    cursor: pointer;
    color: var(--red-color)
}

.deposit-system-modal .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(100% - 120px);
    min-height: 360px
}

.deposit-system-modal .no-data p {
    color: var(--text-color);
    font-weight: 300;
    margin: 0;
    font-size: 12px
}

.deposit-system-modal .modal-footer .input-wrap {
    position: relative
}

.deposit-system-modal .modal-footer .input-wrap label {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 5px;
    display: block
}

.deposit-system-modal .modal-footer .input-wrap input {
    min-height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--grey-00);
    padding: 0 75px 0 10px;
    font-size: 10px;
    width: 100%
}

.deposit-system-modal .modal-footer .input-wrap button {
    position: absolute;
    right: 0;
    max-width: 70px;
    bottom: 0;
    height: 40px;
    margin: 0
}

.deposit-system-modal .modal-footer p {
    margin: 5px 0;
    font-size: 10px;
    text-align: center
}

.deposit-system-modal .modal-footer p .link-text {
    color: var(--secondary-color);
    cursor: pointer
}

.deposit-system-modal .modal-footer button {
    height: 40px;
    margin: 5px 0
}

.page-loader-wrap {
    min-height: 100%;
    background: rgba(30, 30, 30, .75)
}

.pay-wallet {
    padding: 0 5px 10px
}

.pay-wallet .cust-checkbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px
}

.pay-wallet .cust-checkbox mat-checkbox .mdc-form-field .mdc-checkbox .mdc-checkbox__background {
    border-width: 1px
}

.pay-wallet .cust-checkbox h2 {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    color: var(--white-color)
}

.pay-wallet .cust-checkbox h2 p {
    font-size: 12px;
    margin: 0
}

.pay-wallet .cust-checkbox h2 span {
    font-size: 10px
}

@media all and (max-width: 320px) {
    .upi-details-section ul li {
        column-gap: 10px
    }

    .upi-details-section ul li .list-left-side {
        grid-template-columns: 30px auto !important
    }

    .upi-details-section ul li p {
        word-break: break-all
    }
}

.highlight,
.highlight span {
    color: var(--secondary-color) !important
}



.add-bank-modal .address-wrap {
    display: flex;
    width: 100%;
    column-gap: 10px
}

.add-bank-modal .address-wrap .input-wrap {
    flex-grow: 1
}

.add-bank-modal .input-wrap,
.add-bank-modal .input-wrap .field_wrap {
    position: relative
}

.add-bank-modal .input-wrap .field_wrap input {
    width: 100%
}

.add-bank-modal .input-wrap .field_wrap .check-icon {
    position: absolute;
    right: 0;
    bottom: 4px;
    font-size: 18px
}

.add-bank-modal .input-wrap .field_wrap .check-icon.verified {
    color: var(--green-color)
}

.add-bank-modal .input-wrap .field_wrap .check-icon.not-verified {
    color: var(--red-color)
}

.add-bank-modal .input-wrap input.ifsc-input {
    text-transform: uppercase
}

.add-bank-modal .input-wrap input.ifsc-input::placeholder {
    text-transform: capitalize
}

.modal-header .page-back-btn {
    position: absolute;
    left: 10px;
    background-color: transparent;
    border-radius: 0;
    color: var(--grey-900);
    display: flex;
    align-items: center;
    column-gap: 5px
}

.modal-body {
    padding: 10px 15px !important
}

.modal-body .form-wrap label {
    font-weight: unset
}

.modal-body .form-wrap .form-title {
    font-size: 12px;
    width: 100%;
    margin: 7px 0
}

.modal-body .form-wrap .form-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1001
}

.modal-body .form-wrap .form-list mat-form-field {
    max-width: 100%
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper {
    background: var(--grey-00);
    height: 45px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0 10px 10px 0;
    border: none
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix {
    display: flex;
    column-gap: 4px;
    align-items: center;
    cursor: pointer
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix img {
    max-width: 25px;
    border-radius: 3px;
    width: 25px;
    height: 100%
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix p {
    margin: 0;
    font-size: 14px;
    min-width: -moz-fit-content;
    min-width: fit-content
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper mat-select {
    max-width: calc(100% - 28px);
    display: flex
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-trigger {
    justify-content: flex-end
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-arrow-wrapper {
    margin-left: 0
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-value {
    display: none
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper mat-select .mat-mdc-select-value .mat-mdc-select-value-text {
    font-size: 14px;
    display: none
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper .mdc-line-ripple {
    display: none
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix input {
    font-size: 12px;
    border: none;
    outline: none;
    border-radius: 6px;
    background: transparent
}

.modal-body .form-wrap .form-list mat-form-field .mat-mdc-form-field-subscript-wrapper {
    display: none
}

.modal-body .form-wrap .form-list mat-form-field.select-menu {
    min-width: 100px;
    width: 100px;
    position: relative
}

.modal-body .form-wrap .form-list mat-form-field.select-menu:before {
    content: "";
    width: 2px;
    background: var(--grey-600);
    height: 25px;
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 1;
    opacity: .6
}

.modal-body .form-wrap .form-list mat-form-field.select-menu .mat-mdc-text-field-wrapper {
    border-radius: 10px 0 0 10px;
    position: relative;
    padding: 0 8px
}

.form-btn {
    width: 100%
}

.form-btn .otpBTNs {
    display: flex;
    width: 100%;
    column-gap: 5px;
    row-gap: 5px
}

.form-btn .otpBTNs button {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.form-btn .otpBTNs button img {
    width: 18px;
    margin-right: 5px
}

.form-btn .otpBTNs button mat-icon {
    margin-right: 5px;
    font-size: 18px;
    width: 18px;
    height: 18px
}

.form-btn p {
    margin: 0;
    color: var(--white-color);
    font-size: 10px
}

.form-btn p.separator {
    text-align: center;
    margin: 10px 0
}

.form-btn .extra-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px
}

.form-btn .extra-btns button {
    min-height: 40px;

}

.form-btn .extra-btns .whatsapp-id-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px;
    background: var(--header-dark-color);
    border: 1px solid #01e676
}

.form-btn .extra-btns .whatsapp-id-btn img {
    width: 25px
}

.form-btn button {
    width: 100%;
    min-height: 45px
}

.form-wrap {
    position: relative
}

.error {
    color: var(--marquee-red);
    font-size: 12px;
    margin-bottom: 0
}

@media screen and (max-width: 380px) {
    .form-btn .otpBTNs {
        flex-direction: column;
        gap: 5px
    }
}

<style>.page-header {
    max-height: -moz-fit-content;
    max-height: fit-content;
    margin: 0;
    min-height: auto
}

.page-tabheader {
    display: flex;
    column-gap: 2px;
    width: 100%;
    background: var(--primary-color-shade);
    color: var(--white-color);
    height: 40px;
    margin-top: 0;
    position: sticky;
    top: 44px;
    z-index: 100;
    align-items: center
}

.page-tabheader button {
    width: 50%;
    border-radius: 0;
    background: transparent;
    height: 40px;
    position: relative;
    font-size: 10px;

    text-transform: uppercase
}

.page-tabheader button.active:before {
    content: "";
    background: var(--black-color);
    opacity: .5;
    width: 45%;
    height: 4px;
    position: absolute;
    bottom: 0;
    border-radius: 6px 6px 0 0
}

.page-body p,
.page-body h1,
.page-body h2,
.page-body h3,
.page-body h4 {
    padding: 0;
    margin: 0;
    line-height: normal
}

.bonus-body {
    padding: 0 10px
}

.bonus-amt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 20px;
    min-height: 90px
}

.bonus-amt h2 {
    color: var(--black-color);
    font-size: 18px;

    margin-bottom: 0
}

.bonus-amt p {
    margin: 0;
    font-size: 12px
}

.card-wrapper {
    padding-bottom: 15px
}

.bonus-card {
    background: var(--black-color);
    border-radius: 10px;
    margin-bottom: 8px
}

.bonus-card.bonus-claimed,
.bonus-card.bonus-expired {
    opacity: .5;
    cursor: not-allowed
}

.bonus-card.claim-done {
    filter: grayscale(1);
    opacity: .5;
    cursor: not-allowed
}

.bonus-card .bonus-info {
    padding: 5px 10px;
    display: grid;
    align-items: center;
    justify-content: space-between;
    grid-template-columns: 3fr 1fr;
    column-gap: 8px
}

.bonus-card .bonus-info .bonus-detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px
}

.bonus-card .bonus-info .bonus-detail .bonus-coin {
    background: var(--grey-50);
    border-radius: 10px;
    min-width: 45px;
    min-height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    position: relative;
    font-size: 12px;

}

.bonus-card .bonus-info .bonus-detail .bonus-coin img {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 15px;
    height: 15px
}

.bonus-card .bonus-info .bonus-detail .bonus-title h2 {
    font-size: 12px;

    margin-bottom: 2px
}

.bonus-card .bonus-info .bonus-detail .bonus-title p {
    opacity: .6;
    font-size: 10px
}

.bonus-card .bonus-info .bonus-status {
    align-self: center;
    justify-self: flex-end;
    width: 100%
}

.bonus-card .bonus-info .bonus-status button {
    width: 100%;
    min-width: unset;
    font-size: 10px;
    border-radius: 10px;
    min-height: 32px;
    color: var(--white-color)
}

.bonus-card .bonus-info .bonus-status button p {
    color: var(--white-color)
}

.bonus-card .bonus-info .bonus-status button.claim-now {
    background: var(--black-color);
    color: var(--white-color)
}

.bonus-card .bonus-info .bonus-status button:disabled {
    cursor: not-allowed
}

.bonus-card .bonus-info .bonus-status button.tb-claimed p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: .8
}

.bonus-card .bonus-info .bonus-status button.tb-claimed .mat-ripple {
    display: none
}

.bonus-card .msg-text {
    background: var(--grey-75);
    padding: 4px 15px;
    border-radius: 0 0 10px 10px;
    font-size: 10px
}

.bonus-type-3 .card-wrapper {
    padding-bottom: 150px
}

.bonus-type-3 .card-wrapper .bonus-card .bonus-info {
    grid-template-columns: auto
}

.claim-floater {
    background: var(--black-color);
    border-radius: 10px;
    padding: 10px;
    position: fixed;
    width: calc(100% - 15px);
    max-width: 753px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    box-shadow: 0 -15px 15px var(--grey-75)
}

.claim-floater .claim-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 15px
}

.claim-floater .claim-info .ci-text p {
    margin-bottom: 2px;
    font-size: 12px
}

.claim-floater .claim-info .ci-text p:last-child {
    opacity: .6;
    font-size: 10px
}

.claim-floater .claim-info .ci-coins {
    color: var(--black-color);
    font-size: 12px;

}

.claim-floater button {
    width: 100%
}

.claim-floater .t3-button-claim {
    background: var(--black-color);
    color: var(--dark-text);
    width: 100%
}

.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100 - 90px)
}

.no-data p {
    font-weight: 300;
    font-size: 12px;
    opacity: .6
}

.modal-body {
    max-height: calc(var(--vh, 1vh) * 100 - 205px);
    overflow: auto;
    /* padding: 0 5px !important */
}

.page-tabheader {
    display: flex;
    column-gap: 2px;
    width: 100%;
    height: 49px;
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 5px auto 10px
}

.page-tabheader button {
    width: 50%;
    border-radius: 6px 6px 0 0;
    background: var(--grey-50);
    max-height: 48px;
    color: var(var(--grey-700));
    border-bottom: 2px solid var(--ion-color-step-50);
    font-size: 12px
}

.page-tabheader button.active {
    border-bottom: 2px solid var(--secondary-color)
}


.bonus-amt {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
    min-height: 70px;
    margin-bottom: 10px;
    border-radius: 8px;
    text-align: center;
    column-gap: 5px;
    margin-top: 10px
}

.bonus-amt .amt-wrap {
    background: var(--ion-color-step-50);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px
}

.bonus-amt h2 {
    color: var(--secondary-color);
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0
}

.bonus-amt p {
    margin: 0;
    font-size: .875rem
}

.card-wrapper {
    padding-bottom: 15px;
    min-height: 360px
}

.bonus-card {
    background: var(--grey-50);
    border-radius: 8px;
    margin-bottom: 8px
}

.bonus-card.bonus-claimed,
.bonus-card.bonus-expired {
    opacity: .75;
    cursor: not-allowed
}

.bonus-card.claim-done {
    filter: grayscale(1);
    opacity: .75;
    cursor: not-allowed
}

.bonus-card .bonus-info {
    padding: 5px;
    display: block;
    column-gap: 8px
}

.bonus-card .bonus-info.expired .bonus-detail {
    filter: opacity(.5)
}

.bonus-card .bonus-info.expired .bonus-exp {
    display: flex
}

.bonus-card .bonus-info .bonus-detail {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 10px
}

.bonus-card .bonus-info .bonus-detail.claim-history {
    display: flex;
    justify-content: space-between;
    column-gap: 5px
}

.bonus-card .bonus-info .bonus-detail.claim-history .bonus-title {
    max-width: 65%
}

.bonus-card .bonus-info .bonus-detail.claim-history .bonus-title p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bonus-card .bonus-info .bonus-detail.claim-history .coin-info {
    text-align: right
}

.bonus-card .bonus-info .bonus-detail.claim-history .coin-info p {
    font-size: 12px
}

.bonus-card .bonus-info .bonus-detail.claim-history .coin-info .claimable-coins,
.bonus-card .bonus-info .bonus-detail.claim-history .coin-info .approved-coins {
    color: var(--secondary-color)
}

.bonus-card .bonus-info .bonus-detail .bonus-coin {
    background: var(--secondary-color);
    border-radius: 6px;
    min-width: 45px;
    min-height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 8px;
    color: var(--secondary-color-contrast);
    position: relative;
    font-size: 10px
}

.bonus-card .bonus-info .bonus-detail .bonus-coin img {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 15px;
    height: 15px
}

.bonus-card .bonus-info .bonus-detail .bonus-title h2 {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 2px
}

.bonus-card .bonus-info .bonus-detail .bonus-title p {
    opacity: .6;
    font-size: 10px
}

.bonus-card .bonus-info .bonus-status {
    align-self: center;
    justify-self: flex-end;
    width: 100%
}

.bonus-card .bonus-info .bonus-status button {
    width: 100%;
    min-width: unset;
    font-size: .75rem;
    border-radius: 6px
}

.bonus-card .bonus-info .bonus-status button.claim-now {
    background: var(--secondary-color);
    color: var(--secondary-color-contrast)
}

.bonus-card .bonus-info .bonus-status button:disabled {
    cursor: not-allowed
}

.bonus-card .bonus-info .bonus-status button.tb-claimed .mat-ripple {
    display: none
}

.bonus-card .bonus-info .bonus-exp {
    display: none;
    margin-right: 10px
}

.bonus-card .bonus-info .bonus-exp img {
    max-width: 65px
}

.bonus-card .msg-text {
    background: var(--secondary-color-90);
    padding: 6px 15px;
    border-radius: 0 0 10px 10px;
    font-size: .75rem
}

.bonus-type-3 .card-wrapper .bonus-card .bonus-info.expired {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(100% - 120px);
    min-height: 360px
}

.no-data p {
    color: var(--text-color);
    font-weight: 300;
    margin: 0
}

.skeleton-cont {
    padding: 0 10px;
    background: transparent
}

.skeleton-cont ion-list {
    background: transparent
}

.skeleton-cont ion-list ion-item {
    border-radius: 6px;
    min-height: 70px;
    background: var(--ion-color-step-50);
    display: flex
}

.page-header {
    max-height: -moz-fit-content;
    max-height: fit-content;
    margin: 0;
    min-height: auto
}

.page-body .title-bar {
    flex-direction: column;
    align-items: flex-start
}

.page-body .title-bar h2 {
    padding: 0 5px;
    color: var(--white-color)
}

.page-body .title-bar p {
    font-size: 10px;
    opacity: .8;
    margin: 0;
    padding: 0 5px
}

.page-body .banking-page-wrap .banking-tabs-group mat-tab-header {
    background: var(--grey-75);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--grey-00)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper {
    padding: 10px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .user-details {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 10px 0;
    background: var(--grey-75);
    border-radius: 10px;
    color: var(--white-color);
    min-height: 85px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .user-details p {
    margin: 0 0 6px;
    font-size: 14px;
    color: var(--white-color);
    display: flex;
    column-gap: 4px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .user-details p img {
    width: 22px;
    max-height: 22px;
    border-radius: 4px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .user-details p mat-icon {
    width: 18px;
    height: 18px;
    background: var(--black-color);
    color: var(--black-color);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .action-btn {
    margin-top: 10px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .action-btn button {
    min-height: 40px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .del-wrap {
    cursor: pointer;
    position: relative
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .delete-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--grey-50);
    border-radius: 50%;
    font-size: 18px;
    position: absolute;
    right: 35px;
    z-index: 9999;
    overflow: hidden;
    top: 10px;
    color: var(--red-color)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap mat-icon {
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap mat-accordion {
    position: relative
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item {
    box-shadow: none;
    margin-bottom: 10px;
    margin-top: 0
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item.mat-expanded .mat-expansion-panel-header {
    border-radius: 10px 10px 0 0;
    height: 50px;
    border-bottom: 1px solid var(--grey-50)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-header {
    background: var(--grey-75);
    border-radius: 10px;
    height: 50px;
    padding: 0 0 0 10px;
    transition: none
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-header .mat-expansion-panel-header-title {
    column-gap: 6px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-header .mat-expansion-panel-header-title .img-wrap {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    background: var(--grey-00)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-header .mat-expansion-panel-header-title .img-wrap img {
    width: 100%;
    border-radius: 50%;
    object-fit: contain
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-header .mat-expansion-panel-header-title h2 {
    font-size: 12px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    color: var(--white-color)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-header .mat-expansion-panel-header-title h2 span {
    font-size: 10px;
    color: var(--secondary-color)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-header .mat-expansion-panel-header-description {
    flex-grow: 0;
    margin: 0
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-body {
    padding: 0
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-body .banks-details {
    padding: 10px;
    background: var(--grey-75);
    border-radius: 0 0 10px 10px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-body .banks-details ul {
    list-style: none;
    padding-left: 0;
    margin: 0
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-body .banks-details ul li {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-body .banks-details ul li label {
    font-size: 12px;
    color: var(--grey-900)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .banks-list-wrap .mat-exp-bank-item .mat-expansion-panel-body .banks-details ul li p {
    margin: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 4px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item {
    background: var(--grey-75);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li p {
    margin: 0;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    width: 100%
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li p span {
    font-size: 10px;
    color: var(--white-color)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li p.bank-info {
    align-items: flex-start
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li p.date-time {
    align-items: flex-end
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li p.date-time span.Add {
    color: var(--green-color)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li p.date-time span.Delete {
    color: var(--red-color)
}

.page-body .banking-page-wrap .banking-tabs-group .mat-mdc-tab-body-wrapper .bank-log-wrap .log-item ul li p.date-time span.Default {
    color: var(--white-color)
}

.page-body .no-data p {
    font-size: 10px;
    opacity: .6;
    margin-top: 10px;
    padding: 0 5px
}

.page-body .bank-log-wrap .no-data,
.page-body .deleted-banks .no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100 - 110px)
}

.page-body .bank-log-wrap .no-data p,
.page-body .deleted-banks .no-data p {
    font-size: 12px;
    opacity: .6
}

ion-content {
    --background: transparent
}

ion-content ion-refresher .refresher-pulling-icon ion-icon {
    color: var(--secondary-color)
}

ion-content ion-refresher .refresher-refreshing-icon ion-spinner {
    color: var(--secondary-color)
}

.mdc-tab {
    min-width: 90px;
    padding-right: 24px;
    padding-left: 24px;
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    outline: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    z-index: 1
}

.mdc-tab::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mdc-tab[hidden] {
    display: none
}

.mdc-tab--min-width {
    flex: 0 1 auto
}

.mdc-tab__content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: inherit;
    pointer-events: none
}

.mdc-tab__text-label {
    transition: 150ms color linear;
    display: inline-block;
    line-height: 1;
    z-index: 2
}

.mdc-tab__icon {
    transition: 150ms color linear;
    z-index: 2
}

.mdc-tab--stacked .mdc-tab__content {
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.mdc-tab--stacked .mdc-tab__text-label {
    padding-top: 6px;
    padding-bottom: 4px
}

.mdc-tab--active .mdc-tab__text-label,
.mdc-tab--active .mdc-tab__icon {
    transition-delay: 100ms
}

.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label {
    padding-left: 8px;
    padding-right: 0
}

[dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label,
.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon+.mdc-tab__text-label[dir=rtl] {
    padding-left: 0;
    padding-right: 8px
}

.mdc-tab-indicator {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1
}

.mdc-tab-indicator__content {
    transform-origin: left;
    opacity: 0
}

.mdc-tab-indicator__content--underline {
    align-self: flex-end;
    box-sizing: border-box;
    width: 100%;
    border-top-style: solid
}

.mdc-tab-indicator__content--icon {
    align-self: center;
    margin: 0 auto
}

.mdc-tab-indicator--active .mdc-tab-indicator__content {
    opacity: 1
}

.mdc-tab-indicator .mdc-tab-indicator__content {
    transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1)
}

.mdc-tab-indicator--no-transition .mdc-tab-indicator__content {
    transition: none
}

.mdc-tab-indicator--fade .mdc-tab-indicator__content {
    transition: 150ms opacity linear
}

.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content {
    transition-delay: 100ms
}

.mat-mdc-tab-ripple {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none
}

.mat-mdc-tab {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-decoration: none;
    background: none;
    font-family: var(--mat-tab-header-label-text-font);
    font-size: var(--mat-tab-header-label-text-size);
    letter-spacing: var(--mat-tab-header-label-text-tracking);
    line-height: var(--mat-tab-header-label-text-line-height);
    font-weight: var(--mat-tab-header-label-text-weight)
}

.mat-mdc-tab .mdc-tab-indicator__content--underline {
    border-color: var(--mdc-tab-indicator-active-indicator-color)
}

.mat-mdc-tab .mdc-tab-indicator__content--underline {
    border-top-width: var(--mdc-tab-indicator-active-indicator-height)
}

.mat-mdc-tab .mdc-tab-indicator__content--underline {
    border-radius: var(--mdc-tab-indicator-active-indicator-shape)
}

.mat-mdc-tab:not(.mdc-tab--stacked) {
    height: var(--mdc-secondary-navigation-tab-container-height)
}

.mat-mdc-tab:not(:disabled).mdc-tab--active .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:not(:disabled):hover.mdc-tab--active .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:not(:disabled):focus.mdc-tab--active .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:not(:disabled):active.mdc-tab--active .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:disabled.mdc-tab--active .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:not(:disabled):not(.mdc-tab--active) .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:not(:disabled):hover:not(.mdc-tab--active) .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:not(:disabled):focus:not(.mdc-tab--active) .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:not(:disabled):active:not(.mdc-tab--active) .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab:disabled:not(.mdc-tab--active) .mdc-tab__icon {
    fill: currentColor
}

.mat-mdc-tab.mdc-tab {
    flex-grow: 0
}

.mat-mdc-tab:hover .mdc-tab__text-label {
    color: var(--mat-tab-header-inactive-hover-label-text-color)
}

.mat-mdc-tab:focus .mdc-tab__text-label {
    color: var(--mat-tab-header-inactive-focus-label-text-color)
}

.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
    color: var(--mat-tab-header-active-label-text-color)
}

.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,
.mat-mdc-tab.mdc-tab--active .mat-ripple-element {
    background-color: var(--mat-tab-header-active-ripple-color)
}

.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label {
    color: var(--mat-tab-header-active-hover-label-text-color)
}

.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline {
    border-color: var(--mat-tab-header-active-hover-indicator-color)
}

.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label {
    color: var(--mat-tab-header-active-focus-label-text-color)
}

.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline {
    border-color: var(--mat-tab-header-active-focus-indicator-color)
}

.mat-mdc-tab.mat-mdc-tab-disabled {
    opacity: .4;
    pointer-events: none
}

.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content {
    pointer-events: none
}

.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,
.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element {
    background-color: var(--mat-tab-header-disabled-ripple-color)
}

.mat-mdc-tab .mdc-tab__ripple::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    background-color: var(--mat-tab-header-inactive-ripple-color)
}

.mat-mdc-tab .mdc-tab__text-label {
    color: var(--mat-tab-header-inactive-label-text-color);
    display: inline-flex;
    align-items: center
}

.mat-mdc-tab .mdc-tab__content {
    position: relative;
    pointer-events: auto
}

.mat-mdc-tab:hover .mdc-tab__ripple::before {
    opacity: .04
}

.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,
.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before {
    opacity: .12
}

.mat-mdc-tab .mat-ripple-element {
    opacity: .12;
    background-color: var(--mat-tab-header-inactive-ripple-color)
}

.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab {
    flex-grow: 1
}

.mat-mdc-tab-group {
    display: flex;
    flex-direction: column;
    max-width: 100%
}

.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination {
    background-color: var(--mat-tab-header-with-background-background-color)
}

.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label {
    color: var(--mat-tab-header-with-background-foreground-color)
}

.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline {
    border-color: var(--mat-tab-header-with-background-foreground-color)
}

.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
    color: var(--mat-tab-header-with-background-foreground-color)
}

.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline {
    border-color: var(--mat-tab-header-with-background-foreground-color)
}

.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-focus-indicator::before,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-focus-indicator::before {
    border-color: var(--mat-tab-header-with-background-foreground-color)
}

.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before {
    background-color: var(--mat-tab-header-with-background-foreground-color)
}

.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,
.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron {
    color: var(--mat-tab-header-with-background-foreground-color)
}

.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header {
    flex-direction: column-reverse
}

.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline {
    align-self: flex-start
}

.mat-mdc-tab-body-wrapper {
    position: relative;
    overflow: hidden;
    display: flex;
    transition: height 500ms cubic-bezier(0.35, 0, 0.25, 1)
}

.mat-mdc-tab-body-wrapper._mat-animation-noopable {
    transition: none !important;
    animation: none !important
}

.mat-mdc-tab-header {
    display: flex;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    --mdc-tab-indicator-active-indicator-height: 2px;
    --mdc-tab-indicator-active-indicator-shape: 0;
    --mdc-secondary-navigation-tab-container-height: 48px
}

.mdc-tab-indicator .mdc-tab-indicator__content {
    transition-duration: var(--mat-tab-animation-duration, 250ms)
}

.mat-mdc-tab-header-pagination {
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    display: none;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    cursor: pointer;
    z-index: 2;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    touch-action: none;
    box-sizing: content-box;
    background: none;
    border: none;
    outline: 0;
    padding: 0
}

.mat-mdc-tab-header-pagination::-moz-focus-inner {
    border: 0
}

.mat-mdc-tab-header-pagination .mat-ripple-element {
    opacity: .12;
    background-color: var(--mat-tab-header-inactive-ripple-color)
}

.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination {
    display: flex
}

.mat-mdc-tab-header-pagination-before,
.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after {
    padding-left: 4px
}

.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,
.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {
    transform: rotate(-135deg)
}

.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,
.mat-mdc-tab-header-pagination-after {
    padding-right: 4px
}

.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,
.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {
    transform: rotate(45deg)
}

.mat-mdc-tab-header-pagination-chevron {
    border-style: solid;
    border-width: 2px 2px 0 0;
    height: 8px;
    width: 8px;
    border-color: var(--mat-tab-header-pagination-icon-color)
}

.mat-mdc-tab-header-pagination-disabled {
    box-shadow: none;
    cursor: default;
    pointer-events: none
}

.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {
    opacity: .4
}

.mat-mdc-tab-list {
    flex-grow: 1;
    position: relative;
    transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1)
}

._mat-animation-noopable .mat-mdc-tab-list {
    transition: none
}

._mat-animation-noopable span.mdc-tab-indicator__content,
._mat-animation-noopable span.mdc-tab__text-label {
    transition: none
}

.mat-mdc-tab-label-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    z-index: 1
}

.mat-mdc-tab-labels {
    display: flex;
    flex: 1 0 auto
}

[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels {
    justify-content: center
}

[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels {
    justify-content: flex-end
}

.mat-mdc-tab::before {
    margin: 5px
}

.cdk-high-contrast-active .mat-mdc-tab[aria-disabled=true] {
    color: GrayText
}

.mat-mdc-tab-body {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: block;
    overflow: hidden;
    outline: 0;
    flex-basis: 100%
}

.mat-mdc-tab-body.mat-mdc-tab-body-active {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1;
    flex-grow: 1
}

.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active {
    overflow-y: hidden
}

.mat-mdc-tab-body-content {
    height: 100%;
    overflow: auto
}

.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content {
    overflow: hidden
}

.mat-mdc-tab-body-content[style*="visibility: hidden"] {
    display: none
}

.mat-expansion-panel {
    --mat-expansion-container-shape: 4px;
    box-sizing: content-box;
    display: block;
    margin: 0;
    overflow: hidden;
    transition: margin 225ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background: var(--mat-expansion-container-background-color);
    color: var(--mat-expansion-container-text-color);
    border-radius: var(--mat-expansion-container-shape)
}

.mat-expansion-panel:not([class*=mat-elevation-z]) {
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
}

.mat-accordion .mat-expansion-panel:not(.mat-expanded),
.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
    border-radius: 0
}

.mat-accordion .mat-expansion-panel:first-of-type {
    border-top-right-radius: var(--mat-expansion-container-shape);
    border-top-left-radius: var(--mat-expansion-container-shape)
}

.mat-accordion .mat-expansion-panel:last-of-type {
    border-bottom-right-radius: var(--mat-expansion-container-shape);
    border-bottom-left-radius: var(--mat-expansion-container-shape)
}

.cdk-high-contrast-active .mat-expansion-panel {
    outline: solid 1px
}

.mat-expansion-panel.ng-animate-disabled,
.ng-animate-disabled .mat-expansion-panel,
.mat-expansion-panel._mat-animation-noopable {
    transition: none
}

.mat-expansion-panel-content {
    display: flex;
    flex-direction: column;
    overflow: visible;
    font-family: var(--mat-expansion-container-text-font);
    font-size: var(--mat-expansion-container-text-size);
    font-weight: var(--mat-expansion-container-text-weight);
    line-height: var(--mat-expansion-container-text-line-height);
    letter-spacing: var(--mat-expansion-container-text-tracking)
}

.mat-expansion-panel-content[style*="visibility: hidden"] * {
    visibility: hidden !important
}

.mat-expansion-panel-body {
    padding: 0 24px 16px
}

.mat-expansion-panel-spacing {
    margin: 16px 0
}

.mat-accordion>.mat-expansion-panel-spacing:first-child,
.mat-accordion>*:first-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing {
    margin-top: 0
}

.mat-accordion>.mat-expansion-panel-spacing:last-child,
.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing {
    margin-bottom: 0
}

.mat-action-row {
    border-top-style: solid;
    border-top-width: 1px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 16px 8px 16px 24px;
    border-top-color: var(--mat-expansion-actions-divider-color)
}

.mat-action-row .mat-button-base,
.mat-action-row .mat-mdc-button-base {
    margin-left: 8px
}

[dir=rtl] .mat-action-row .mat-button-base,
[dir=rtl] .mat-action-row .mat-mdc-button-base {
    margin-left: 0;
    margin-right: 8px
}

.mat-expansion-panel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 24px;
    border-radius: inherit;
    transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
    height: var(--mat-expansion-header-collapsed-state-height);
    font-family: var(--mat-expansion-header-text-font);
    font-size: var(--mat-expansion-header-text-size);
    font-weight: var(--mat-expansion-header-text-weight);
    line-height: var(--mat-expansion-header-text-line-height);
    letter-spacing: var(--mat-expansion-header-text-tracking)
}

.mat-expansion-panel-header.mat-expanded {
    height: var(--mat-expansion-header-expanded-state-height)
}

.mat-expansion-panel-header[aria-disabled=true] {
    color: var(--mat-expansion-header-disabled-state-text-color)
}

.mat-expansion-panel-header:not([aria-disabled=true]) {
    cursor: pointer
}

.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
    background: var(--mat-expansion-header-hover-state-layer-color)
}

@media(hover: none) {
    .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover {
        background: var(--mat-expansion-container-background-color)
    }
}

.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]).cdk-keyboard-focused,
.mat-expansion-panel .mat-expansion-panel-header:not([aria-disabled=true]).cdk-program-focused {
    background: var(--mat-expansion-header-focus-state-layer-color)
}

.mat-expansion-panel-header._mat-animation-noopable {
    transition: none
}

.mat-expansion-panel-header:focus,
.mat-expansion-panel-header:hover {
    outline: none
}

.mat-expansion-panel-header.mat-expanded:focus,
.mat-expansion-panel-header.mat-expanded:hover {
    background: inherit
}

.mat-expansion-panel-header.mat-expansion-toggle-indicator-before {
    flex-direction: row-reverse
}

.mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-expansion-indicator {
    margin: 0 16px 0 0
}

[dir=rtl] .mat-expansion-panel-header.mat-expansion-toggle-indicator-before .mat-expansion-indicator {
    margin: 0 0 0 16px
}

.mat-content {
    display: flex;
    flex: 1;
    flex-direction: row;
    overflow: hidden
}

.mat-content.mat-content-hide-toggle {
    margin-right: 8px
}

[dir=rtl] .mat-content.mat-content-hide-toggle {
    margin-right: 0;
    margin-left: 8px
}

.mat-expansion-toggle-indicator-before .mat-content.mat-content-hide-toggle {
    margin-left: 24px;
    margin-right: 0
}

[dir=rtl] .mat-expansion-toggle-indicator-before .mat-content.mat-content-hide-toggle {
    margin-right: 24px;
    margin-left: 0
}

.mat-expansion-panel-header-title {
    color: var(--mat-expansion-header-text-color)
}

.mat-expansion-panel-header-title,
.mat-expansion-panel-header-description {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    margin-right: 16px;
    align-items: center
}

[dir=rtl] .mat-expansion-panel-header-title,
[dir=rtl] .mat-expansion-panel-header-description {
    margin-right: 0;
    margin-left: 16px
}

.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title,
.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description {
    color: inherit
}

.mat-expansion-panel-header-description {
    flex-grow: 2;
    color: var(--mat-expansion-header-description-color)
}

.mat-expansion-indicator::after {
    border-style: solid;
    border-width: 0 2px 2px 0;
    content: "";
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    vertical-align: middle;
    color: var(--mat-expansion-header-indicator-color)
}

.cdk-high-contrast-active .mat-expansion-panel-content {
    border-top: 1px solid;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.modal-header {
    display: flex;
    flex-direction: column
}

.modal-header p {
    font-size: 12px;
    text-align: center;
    margin: 6px 0 0;
    opacity: .8
}

.help-page-wrap button {
    min-height: 40px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 10px;

}

.help-page-wrap button img {
    width: 24px;
    height: 24px
}

.page-header {
    max-height: -moz-fit-content;
    max-height: fit-content;
    margin: 0;
    min-height: auto
}

.page-body.demoID {
    height: calc(100% - 75px)
}

.page-body .passbook-page-wrap,
.page-body .passbook-page-wrap .passbook-tabs-group {
    height: 100%
}

.page-body .passbook-page-wrap .passbook-tabs-group mat-tab-header {
    background: var(--grey-75);
    position: sticky;
    /* top: 44px; */
    z-index: 1000;
    border-bottom: 2px solid var(--grey-00)
}

.page-body .passbook-page-wrap .passbook-tabs-group mat-tab-header .mat-mdc-tab-label-container .mat-mdc-tab {
    min-width: 25%;
    padding: 0
}

.page-body .passbook-page-wrap .passbook-tabs-group .mat-mdc-tab-body-wrapper {
    padding: 0;
    height: 100%
}

.page-body .passbook-page-wrap .passbook-tabs-group .mat-mdc-tab-body-wrapper .mat-mdc-tab-body-content {
    overflow: hidden
}

.d-none {
    display: none !important
}

.transactions-wrap {
    padding: 10px 10px 90px;
    overflow-y: auto;
    height: 100%;
}

.transactions-wrap .title h2 {
    margin: 5px 0;
    padding: 0 5px;
    font-size: 12px;

    color: var(--white-color)
}

.transactions-wrap .link-txn {
    position: relative;
    background-color: var(--grey-75);
    border-radius: 10px
}

.transactions-wrap .link-txn .link-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.transactions-wrap .link-txn .link-icon:before {
    content: "";
    position: absolute;
    width: calc(100% - 60px);
    height: 1px;
    background-color: var(--grey-200);
    left: 50%;
    top: 51%;
    transform: translate(-50%)
}

.transactions-wrap .link-txn .link-icon mat-icon {
    background-color: var(--grey-300);
    border-radius: 50%;
    color: var(--white-color);
    padding: 3px;
    font-size: 18px;
    transform: rotate(135deg);
    width: auto;
    height: auto;
    border: 5px solid var(--grey-75)
}

.transactions-wrap .transaction-item {
    background: var(--grey-75);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 8px
}

.transactions-wrap .transaction-item.demoEntry li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.transactions-wrap .transaction-item.demoEntry li p {
    margin: 0;
    font-size: 10px;

    display: flex;
    flex-direction: column;
    width: 100%
}

.transactions-wrap .transaction-item.demoEntry li p span {
    font-size: 10px;

    opacity: .7
}

.transactions-wrap .transaction-item.demoEntry li p.txn-type {
    align-items: flex-start
}

.transactions-wrap .transaction-item.demoEntry li p.amount {
    align-items: flex-end
}

.transactions-wrap .transaction-item.demoEntry li p.amount span {
    opacity: 1
}

.transactions-wrap .transaction-item .wrapper {
    padding-right: 30px;
    position: relative;
    cursor: pointer
}

.transactions-wrap .transaction-item .wrapper mat-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--grey-200)
}

.transactions-wrap .transaction-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: pointer
}

.transactions-wrap .transaction-item ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.transactions-wrap .transaction-item ul li p {
    margin: 0;
    font-size: 10px;

    display: flex;
    flex-direction: column;
    width: 100%
}

.transactions-wrap .transaction-item ul li p span {
    font-size: 10px;

    opacity: .7
}

.transactions-wrap .transaction-item ul li p.txn-type {
    align-items: flex-start
}

.transactions-wrap .transaction-item ul li p.amount {
    align-items: flex-end
}

.transactions-wrap .transaction-item ul li p.amount span {
    opacity: 1
}

.transactions-wrap .transaction-item .txn-detail {
    background: var(--grey-50);
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-header {
    padding-bottom: 5px
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-header:only-child {
    padding-bottom: 0
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-header p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 4px;
    font-size: 10px
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-header p:last-child {
    margin-bottom: 0
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-header p span {
    display: flex;
    align-items: center;
    column-gap: 2px
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-header p span mat-icon {
    font-size: 16px;
    height: 16px;
    width: 16px;
    color: var(--yellow-color);
    display: flex;
    align-items: center;
    justify-content: center
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-body {
    border-top: 1px solid var(--grey-75)
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-body p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 4px;
    font-size: 10px
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-body p span {
    display: flex;
    align-items: center;
    column-gap: 2px;
    text-wrap: nowrap
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-body p span mat-icon {
    font-size: 16px;
    height: 16px;
    width: 16px;
    color: var(--yellow-color);
    display: flex;
    align-items: center;
    justify-content: center
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid var(--grey-75)
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot:last-child {
    border-bottom: 0
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap {
    width: 45px;
    height: 45px;
    max-width: 45px;
    position: relative;
    border-radius: 4px;
    cursor: zoom-in;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 5px
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap.Added.UTR {
    width: 100%;
    max-width: max-content;
    height: auto
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin: auto;
    min-width: 43px
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap.Rejected,
.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap.rejected {
    border: 1px solid var(--red-color)
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap.Approved,
.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap.approved {
    border: 1px solid var(--green-color)
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap.Pending,
.transactions-wrap .transaction-item .txn-detail .txn-screenshot .img-wrap.pending {
    border: 1px solid var(--yellow-color)
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 10px;
    max-width: calc(100% - 50px);
    width: 100%;
    text-align: right;
    margin: 0 0 0 auto
}

.transactions-wrap .transaction-item .txn-detail .txn-screenshot .status span {
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-footer {
    border-top: 1px solid var(--grey-75)
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-footer .form-wrap {
    display: flex;
    flex-direction: column;
    margin-top: 5px
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-footer .form-wrap .input-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 2px;
    position: relative
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-footer .form-wrap label {
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 4px;
    color: var(--grey-900);
    padding-left: 2px
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-footer .form-wrap input {
    min-height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--grey-200);
    padding: 0 10px;
    font-size: 12px;
    color: var(--white-color)
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-footer .form-wrap input::placeholder {
    color: var(--white-color)
}

.transactions-wrap .transaction-item .txn-detail .txn-detail-footer button {
    min-height: 34px;
    margin-top: 6px;

    font-size: 10px
}

.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100 - 240px)
}

.no-data p {
    font-weight: 300;
    font-size: 12px;
    opacity: .6
}

.bet-statement .betslip-card {
    padding: 0 0 60px;
    color: var(--text-color);
    min-height: calc(var(--vh, 1vh) * 100 - 170px);
    position: relative
}

.bet-statement .betslip-card .betslip-data-wrap {
    padding: 0;
    border-radius: 6px
}

.bet-statement .betslip-card .betslip-data-wrap h3 {
    font-weight: 500;
    font-size: 10px;
    margin: 0
}

.bet-statement .betslip-card .betslip-data-wrap .odds-stake-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    align-items: center;
    font-weight: 500
}

.bet-statement .betslip-card .betslip-data-wrap .odds-stake-wrap h3 {
    text-align: center;
    font-weight: 500;
    font-size: 10px
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-title {
    background: var(--grey-75);
    display: grid;
    grid-template-columns: 4fr 2fr;
    column-gap: 10px;
    padding: 5px 10px;
    margin: 10px auto auto;
    max-width: calc(100% - 10px);
    border-radius: 6px
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-title h3 {
    color: var(--white-color);
    font-weight: 400;
    font-size: 10px
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody {
    max-height: calc(var(--vh, 1vh) * 100 - 250px);
    overflow-y: auto
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist {
    border-bottom: 1px solid var(--grey-00);
    display: grid;
    grid-template-columns: 4fr 2fr;
    column-gap: 10px;
    padding: 5px 10px
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist.forlay {
    background: var(--lay-color)
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist.forback {
    background: var(--back-color)
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist:first-child {
    border-radius: 8px 8px 0 0
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist:last-child {
    border-radius: 0 0 8px 8px
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo {
    display: flex;
    align-items: center;
    column-gap: 8px
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo .game-type {
    align-self: center
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo .game-type p {
    opacity: .8;
    font-size: .75rem;
    background: #ebebeb;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-color)
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo .bs-content p.game-title {
    margin: 0;
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-content: space-between;
    align-items: center;
    column-gap: 2px
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo .bs-content p.game-title span {
    width: auto;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: var(--black-color)
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo .bs-content p.game-title span:nth-child(2) {
    max-width: unset;
    text-overflow: unset;
    min-width: 15px;
    text-align: center
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo h3 {
    text-transform: capitalize;
    line-height: normal;
    font-size: 10px;
    font-weight: 500
}

.bet-statement .betslip-card .betslip-data-wrap .betslip-databody .betslip-datalist .bs-gameinfo p {
    font-size: 10px;
    margin: 0;
    font-weight: 400;
    line-height: 1.2
}

.bet-statement .betslip-card .betslip-data-wrap .user-msg {
    text-align: center;
    font-size: 10px;
    line-height: normal;
    padding: 0 15px;
    margin-top: 10px !important;
    color: var(--text-color)
}

.bet-statement .loadingbar-container {
    top: 0 !important
}

p.user-msg {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    text-align: center;
    opacity: .6;
    margin: 0;
    padding: 15px 0;
    font-size: 10px
}

.top-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
    min-height: 35px;
    position: sticky;
    top: 0;
    z-index: 1
}

.top-filter h3 {
    margin: 0;
    font-size: 10px;
    font-weight: 500;
    color: var(--white-color)
}

.top-filter .filter-col {
    max-width: 180px
}

.top-filter .filter-col .mat-form-field {
    max-width: 100%
}

.top-filter .filter-col .mat-form-field .mat-form-field-wrapper {
    padding: 0
}

.top-filter .filter-col .mat-form-field .mat-form-field-wrapper mat-label {
    font-weight: 500;
    font-size: 10px
}

.top-filter .filter-col .mat-form-field .mat-form-field-wrapper mat-select {
    color: var(--white-color)
}

.top-filter .filter-col .mat-form-field .mat-form-field-wrapper mat-select .mat-mdc-select-trigger {
    color: var(--white-color)
}

.top-filter .filter-col .mat-form-field .mat-form-field-wrapper mat-select .mat-select-value {
    font-size: .75rem
}

.top-filter .filter-col .mat-form-field .mat-form-field-wrapper .mat-form-field-underline {
    display: none
}

.top-filter .filter-col .mat-form-field .mat-form-field-flex {
    padding-top: 0 !important
}

.top-filter .filter-col .mat-form-field .mat-form-field-infix {
    padding-bottom: 0 !important
}

.bet-history-accordion .mat-expansion-panel {
    background: var(--grey-75);
    border-radius: 10px;
    box-shadow: none;
    max-width: calc(100% - 10px);
    margin: 8px auto 0
}

.bet-history-accordion .mat-expansion-panel.mat-expanded {
    background: var(--grey-75)
}

.bet-history-accordion .mat-expansion-panel .mat-expansion-panel-body {
    padding: 0
}

.bet-history-accordion .mat-expansion-panel-header {
    padding: 5px 10px;
    min-height: 40px;
    height: auto
}

.bet-history-accordion .mat-expansion-panel-header .mat-content.mat-content-hide-toggle {
    margin-right: 0
}

.bet-history-accordion .mat-expansion-panel-header.mat-expanded {
    min-height: 40px;
    height: auto
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-title {
    flex-direction: column;
    font-size: 10px;
    justify-content: center;
    align-items: flex-start
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-title h3 {
    font-weight: 600;
    font-size: 10px;
    margin: 0;
    line-height: normal;

    color: var(--white-color)
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-title p {
    margin: 3px 0 0;
    line-height: normal;
    opacity: .7
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-title p.win-team {
    margin: 0;
    line-height: normal;
    font-size: 10px
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-title p.win-team span {
    padding-left: 4px;
    font-weight: 500
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-description {
    justify-content: flex-end;
    margin: auto;
    flex-grow: 0
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-description span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600
}

.bet-history-accordion .mat-expansion-panel-header .mat-expansion-panel-header-description mat-icon {
    color: var(--white-color)
}

.no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(var(--vh, 1vh) * 100 - 180px)
}

.no-data p {
    font-weight: 300;
    font-size: 12px;
    opacity: .6
}

.bs-gameinfo .bs-content p.placed span {
    color: var(--yellow-color) !important
}

.bs-gameinfo .bs-content p.void span {
    color: var(--overlay-gray) !important
}

.bs-gameinfo .bs-content p.won span {
    color: var(--green-color) !important
}

.bs-gameinfo .bs-content p.loss span {
    color: var(--red-color) !important
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header {
    position: sticky;
    top: 0 !important;
    z-index: 100;
    background: var(--grey-75) !important;
    color: var(--white-color)
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab {
    width: 50%;
    justify-content: space-around;
    column-gap: 2px;
    background: var(--black-color)
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab .mdc-tab__ripple {
    display: none
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab .mdc-tab__text-label {
    text-transform: capitalize;
    min-width: auto;
    padding: 0 15px;
    color: var(--white-color);
    opacity: 1;

    font-size: 10px
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab .mdc-tab-indicator__content--underline {
    max-width: 100%;
    border-radius: 0;
    border-color: var(--highlight-color);
    border-width: 2px
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab.mdc-tab--active {
    background: var(--grey-50)
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
    color: var(--white-color)
}

.cricket-bets-wrap .betstatement-tabs mat-tab-header.mat-mdc-tab-header .mat-mdc-tab-label-container .mat-ink-bar {
    background: var(--highlight-color)
}

.cricket-bets-wrap .betstatement-tabs .mat-mdc-tab-body-wrapper .mat-mdc-tab-body-content {
    height: calc(100% - 50px);
    padding-bottom: 70px
}

.child-accordion {
    padding: 5px 0 15px;
    margin-top: 5px
}

.child-accordion .mat-expansion-panel {
    background: var(--grey-50);
    border-radius: 10px
}

.child-accordion .mat-expansion-panel.mat-expanded {
    background: var(--grey-50)
}

.child-accordion .mat-expansion-panel .mat-expansion-panel-header {
    padding: 5px 10px;
    height: 40px
}

.child-accordion .mat-expansion-panel .mat-expansion-panel-header.mat-expanded {
    height: 40px
}

.allbet-datawrap {
    max-height: calc(var(--vh, 1vh) * 100 - 250px);
    overflow-y: auto
}

.allbet-datawrap .allbet-datalist,
.allbet-datawrap .allbet-header {
    display: grid;
    align-items: center;
    grid-template-columns: 4fr 5fr;
    column-gap: 4px;
    min-height: 25px;
    padding: 3px 0
}

.allbet-datawrap .allbet-datalist h3,
.allbet-datawrap .allbet-header h3 {
    text-transform: capitalize;
    line-height: normal;
    font-size: 10px;
    font-weight: 500;
    margin: 0
}

.allbet-datawrap .allbet-datalist p,
.allbet-datawrap .allbet-header p {
    font-size: 10px;
    margin: 0;
    font-weight: 400;
    line-height: 1.2;
    color: var(--black-color)
}

.allbet-datawrap .allbet-datalist .allbet-gameinfo,
.allbet-datawrap .allbet-header .allbet-gameinfo {
    padding: 0 5px 0 10px
}

.allbet-datawrap .allbet-datalist .allbet-gameinfo .allbet-content h3,
.allbet-datawrap .allbet-header .allbet-gameinfo .allbet-content h3 {
    line-height: 1;
    margin-bottom: 2px
}

.allbet-datawrap .allbet-datalist {
    border-bottom: 1px solid var(--black-color)
}

.allbet-datawrap .allbet-datalist:last-child {
    border-bottom: 0
}

.allbet-datawrap .allbet-datalist.forlay {
    background: var(--lay-color)
}

.allbet-datawrap .allbet-datalist.forback {
    background: var(--back-color)
}

.allbet-datawrap .allbet-odds-stake-wrap,
.allbet-datawrap .allbet-headcol {
    display: grid;
    grid-template-columns: 60px repeat(3, 1fr);
    column-gap: 3px;
    align-items: center;
    justify-content: center
}

.allbet-datawrap .allbet-odds-stake-wrap h3,
.allbet-datawrap .allbet-headcol h3 {
    text-align: center;
    font-weight: 600
}

.allbet-datawrap .allbet-header {
    background: var(--grey-00)
}

.allbet-datawrap .allbet-header h3 {
    font-weight: 600;
    color: var(--white-color)
}

.allbet-datawrap .allbet-title {
    padding: 0 5px 0 10px
}

.allbet-datawrap .allbet-title h3 {
    font-weight: 600;
    color: var(--white-color)
}

.Placed,
.Matched {
    color: var(--yellow-color) !important
}

.Void {
    color: var(--grey-200) !important
}

.Win,
.WIN,
.Won,
.WON,
.won {
    color: var(--green-color) !important
}

.Lost,
.LOST,
.Loss,
.LOSS,
.loss {
    color: var(--red-color) !important
}

.filter-col mat-form-field {
    max-width: 180px;
    font-size: 10px
}

.filter-col mat-form-field .mat-mdc-text-field-wrapper {
    padding: 0 5px;
    border: 1px solid var(--white-color);
    border-radius: 10px;
    font-size: 10px;
    color: var(--white-color)
}

.filter-col mat-form-field .mat-mdc-text-field-wrapper .mdc-line-ripple {
    display: none
}

.filter-col mat-form-field .mat-mdc-form-field-bottom-align {
    display: none
}

.filter-col mat-form-field .mat-mdc-form-field-bottom-align:before {
    height: auto
}

.filter-match.mat-mdc-select-panel {
    background: var(--black-color)
}

.filter-match.mat-mdc-select-panel .game-option {
    min-height: 25px;
    font-size: 10px;
    background: var(--black-color)
}

.filter-match.mat-mdc-select-panel .game-option .mdc-list-item__primary-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.filter-match.mat-mdc-select-panel .game-option .mat-pseudo-checkbox {
    visibility: hidden
}

.filter-match.mat-mdc-select-panel .game-option:focus.mdc-list-item,
.filter-match.mat-mdc-select-panel .game-option.mat-mdc-option-active.mdc-list-item {
    background: var(--grey-00)
}