:root {

    --blue-100: #d0e3f9;
    --blue-200: #a1c8f3;
    --blue-300: #72aced;
    --blue-400: #4391e7;
    --blue-500: #1475e1;
    --blue-600: #105eb4;
    --blue-700: #0c4687;
    --blue-800: #082f5a;
    --blue-900: #04172d;
    --red-100: #fbcfd8;
    --red-200: #f6a0b1;
    --red-300: #f2708a;
    --red-400: #ed4163;
    --red-500: #e9113c;
    --red-600: #ba0e30;
    --red-700: #8c0a24;
    --red-800: #5d0718;
    --red-900: #2f030c;
    --purple-100: #dcccff;
    --purple-200: #be8fff;
    --purple-300: #b061ff;
    --purple-400: #962eff;
    --purple-500: #9000ff;
    --purple-600: #7100c7;
    --purple-700: #590099;
    --purple-800: #2d004d;
    --purple-900: #1e0132;
    --green-100: #ccffcc;
    --green-200: #8fff8f;
    --green-300: #57ff57;
    --green-400: #1fff20;
    --green-500: #00e701;
    --green-600: #00b801;
    --green-700: #008a01;
    --green-800: #004d00;
    --green-900: #013e01;
    --yellow-100: #fff2dd;
    --yellow-200: #ffdeaa;
    --yellow-300: #ffcc7b;
    --yellow-400: #ffb949;
    --yellow-500: #ff9d00;
    --yellow-600: #cd7f01;
    --yellow-700: #9c6000;
    --yellow-800: #633d00;
    --yellow-900: #301d00;
    --grey-100: #d5dceb;
    --grey-200: #b1bad3;
    --grey-300: #557086;
    --grey-400: #2f4553;
    --grey-500: #213743;
    --grey-600: #1a2c38;
    --grey-700: #0f212e;
    --grey-800: #071d2a;
    --grey-900: #071824;

    --color-subHeading: grey;
    --dark-Gray-1: rgba(142, 142, 147, 1);
    --dark-Gray-2: rgba(99, 99, 102, 1);
    --dark-Gray-3: rgba(72, 72, 74, 1);
    --dark-Gray-4: rgba(58, 58, 60, 1);
    --dark-Gray-5: rgba(44, 44, 46, 1);
    --dark-Gray-6: rgba(28, 28, 30, 1);

    --background-blue: #5D3FD3;
    --background-blue-hover: #6d4fd9;
    --background-blue-active: #543abf;
    --background-gray-ultraLine: rgba(117, 134, 150, 0.1);
    --background-gray-line: rgba(117, 134, 150, 0.2);
    --background-gray-ultraThin: rgba(117, 134, 150, 0.3);
    --background-gray-thin: rgba(117, 134, 150, 0.4);
    --background-gray-ultraLight: rgba(117, 134, 150, 0.5);
    --background-gray-light: rgba(117, 134, 150, 0.6);
    --background-gray-medium: rgba(117, 134, 150, 0.7);
    --background-gray-bold: rgba(117, 134, 150, 0.8);
    --background-gray-strong: rgba(117, 134, 150, 0.9);
    --background-gray: #758696;
    --background-hover-default01: rgba(0, 0, 0, 0.03);
    --background-hover-default02: rgba(0, 0, 0, 0.05);

    --button-delete: rgba(240, 14, 14, 0.9);
    --button-delete-hover: rgba(240, 14, 14, 1);
    --button-delete-active: rgba(240, 14, 14, 0.8);

    --text-title-medium: #636363;

    --boxshadow-05: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    --boxshadow-06old: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    --boxshadow-06: 0px 1px 2px 0px rgba(60, 64, 67, .30),
        0px 2px 6px 2px rgba(60, 64, 67, .15);
    /* --color-subHeading: #758696; */
    --background-default04: rgba(0, 0, 0, 0.1);
    --background-default02: #2962ff;

    --background-primaryMobile: #4EACF8;
    --universal-primary: #4EACF8;
    --universal-primary-selected: #4EACF850;
    --background-primary: #4EACF8;
    --background-primary-hover: #3492DE;
    --background-primary-active: #3082E6;
    --background-primary-30: #4EACF830;

    --background-yellow: #FFA500;
    --background-yellow-hover: #FF8C00;
    --background-yellow-active: #E59400;

    --background-secondary: rgba(234, 241, 251, 1);

    --notification-red: #FE3B30;
    --notification-green: #34C759;

    --universal-red: #FE3B30;
    --universal-red-30: #FE3B3030;
    --universal-red-20: #FE3B3020;
    --universal-red-10: #FE3B3010;
    --universal-green: #34C759;
    --universal-green-30: #34C75930;
    --universal-green-20: #34C75920;
    --universal-green-10: #34C75910;
    --universal-green-5: rgba(35, 197, 82, 0.5);

    --universal-buy-dim: rgba(65, 132, 243, 0.3);
    --universal-buy-line: rgba(65, 132, 243, 0.1);
    --universal-buy: rgb(36, 160, 237);
    /* DARK rgb(52, 199, 89) */
    --universal-buy-10: #24a0ed10;
    --universal-buy-20: #24a0ed20;
    --universal-buy-30: #24a0ed30;
    --universal-buy-40: #24a0ed40;
    --universal-buy-50: #24a0ed50;
    --universal-buy-60: #24a0ed60;
    --universal-buy-70: #24a0ed70;
    --universal-buy-80: #24a0ed80;
    --universal-buy-90: #24a0ed90;

    --universal-buy-hover: #1589F0;
    --universal-buy-active: #1a76d2;

    --universal-sell-dim: rgba(255, 87, 34, 0.3);
    --universal-sell-line: rgba(255, 87, 34, 0.1);
    --universal-sell: rgb(254, 59, 48);
    --universal-sell-10: #FE3B3010;
    --universal-sell-20: #FE3B3020;
    --universal-sell-30: #FE3B3030;
    --universal-sell-40: #FE3B3040;
    --universal-sell-50: #FE3B3050;
    --universal-sell-60: #FE3B3060;
    --universal-sell-70: #FE3B3070;
    --universal-sell-80: #FE3B3080;
    --universal-sell-90: #FE3B3090;

    --universal-sell-hover: #E62E1C;
    --universal-sell-active: #CC2918;

    --universal-f5: #FF5F1F;
    --universal-f5-hover: #E5551B;
    --universal-f5-active: #CC4C17;

    --universal-delete: #FF3131;
    --universal-delete-hover: #E62B2B;
    --universal-delete-active: #CC2626;

    --hover-default01: #f3f5f9 !important;
    --hover-light: rgba(30, 71, 185, 0.1) !important;
    --hover-medium: rgba(30, 71, 185, 0.2) !important;
    --hover-strong: #9B9B9B !important;

    --universal-border: #e0e3eb;
    --border-universal: #e0e3eb;

    --border-default01: #e0e3eb;
    --border-thin: rgba(218, 220, 224);
    --border-light: rgba(30, 71, 185, 0.1);
    --border-medium: rgba(30, 71, 185, 0.2);
    --border-bold: rgba(30, 71, 185, 0.3);
    --border-strong: rgba(30, 71, 185, 0.4);
    --border-mobile: #323232;

    --background-mobileMain: #4EACF8;
    --background-mobilePrimary: #323232;
    --background-mobileSecondary: #161618;
    --background-mobileTertiary: #212124;
    --background-mobilePrimaryLight: #818181;
    --background-mobileSecondaryLight: #BFBFBF;
    --background-mobileLight: rgba(255, 255, 255, 0.1);

    --background-body: #F7F8FC;

    --universal-height: 60px;
    --universal-gap0x: 2px;
    --universal-gap: 4px;
    --universal-gap1x: 4px;
    --universal-gap2x: 8px;
    --universal-gap3x: 12px;
    --universal-gap4x: 16px;
    --universal-gap5x: 20px;

    --universal-subHeading: #758696;

    --universal-pad_LR2x: 0px 8px;

    --color-default01: #484949;

    --bg-input-disabled: url("data:image/svg+xml;charset=utf-8,<svg width='6' height='6' xmlns='http://www.w3.org/2000/svg'><path d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/></svg>");

    --universal-back: #a6d8ff;
    --universal-backLight: #dbefff;
    --universal-backActive: #85adcc;
    --universal-lay: #fac9d1;
    --universal-layLight: #feeaee;
    --universal-layActive: #e0b4bb;

    /* THEME BASED COLOR */
    /* rgb(40,40,40) DARKER */
    --universal-BWbody: rgb(240, 240, 240);
    --universal-BWbase: rgb(255, 255, 255);

    /* rgb(80, 80, 80) DARKER */
    --universal-mobilePicker: rgb(220, 220, 220);

    /* rgb(160,160,160) DARKER */
    --universal-mobilePickerSlider: rgb(255, 255, 255);

    --boxshadow-04: rgba(0, 0, 0, 0.16) 0px 1px 4px;


    --universal-colorWTB: rgb(240, 240, 240);
    --universal-colorBTW: rgb(40, 40, 40);
    --universal-colorBTB: rgb(32, 32, 32);
}

* {
    padding: 0px;
    margin: 0px;
    letter-spacing: 0.50px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    box-sizing: border-box;
    max-width: 100%;

    font-family: -apple-system,
        BlinkMacSystemFont,
        Trebuchet MS,
        Roboto,
        Ubuntu,
        sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    flex-direction: column;
    background-color: white;
    overflow: hidden;
}

body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

button {
    -webkit-tap-highlight-color: transparent;
}

.darkView {
    color: white;
}

input {
    all: unset;
}

.flex1 {
    flex: 1;
}

.absolute {
    position: absolute !important;
}

.fixed {
    position: fixed !important;
}

ul {
    list-style-type: none;
}

.pointer {
    cursor: pointer;
}

.auto {
    width: auto !important;
    height: auto !important;
}

.auto_ {
    width: auto;
    height: auto;
}

.autoH {
    height: auto !important;
}

.autoW {
    width: auto !important;
}

.h0 {
    height: 0px !important;
    min-height: 0px !important;
    max-height: 0px !important;
}

.lineh15 {
    line-height: 15px !important;
}

.h14 {
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
}

.h15 {
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
}

.h16 {
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
}

.lineh20 {
    line-height: 20px !important;
}

.h18 {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
}

.h20 {
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
}

.h21 {
    height: 21px !important;
    min-height: 21px !important;
    max-height: 21px !important;
}

.h22 {
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

.h23 {
    height: 23px !important;
    min-height: 23px !important;
    max-height: 23px !important;
}

.h24 {
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
}

.h25 {
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
}

.h26 {
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
}

.h27 {
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
}

.h28 {
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
}

.h29 {
    height: 29px !important;
    min-height: 29px !important;
    max-height: 29px !important;
}

.h30 {
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
}

.h31 {
    height: 31px !important;
    min-height: 31px !important;
    max-height: 31px !important;
}

.h32 {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
}

.h33 {
    height: 33px !important;
    min-height: 33px !important;
    max-height: 33px !important;
}

.h34 {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
}

.lineh35 {
    line-height: 35px !important;
}

.h35 {
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
}

.h35 {
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
}

.h36 {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}

.h38 {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
}

.h40 {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
}

.h41 {
    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;
}

.h42 {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
}

.h43 {
    height: 43px !important;
    min-height: 43px !important;
    max-height: 43px !important;
}

.h44 {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

.h45 {
    height: 45px !important;
    min-height: 45px !important;
    max-height: 45px !important;
}

.h46 {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
}

.h48 {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
}

.h50 {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

.h51 {
    height: 51px !important;
    min-height: 51px !important;
    max-height: 51px !important;
}

.h56 {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
}

.h59 {
    height: 59px !important;
    min-height: 59px !important;
    max-height: 59px !important;
}

.h60 {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
}

.h64 {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

.h68 {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
}

.h70 {
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
}

.h71 {
    height: 71px !important;
    min-height: 71px !important;
    max-height: 71px !important;
}

.h84 {
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
}

.h90 {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
}

.h100 {
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
}

.h101 {
    height: 101px !important;
    min-height: 101px !important;
    max-height: 101px !important;
}

.h160 {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
}

.w20 {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
}

.w24 {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
}

.w30 {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
}

.w32 {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
}

.w34 {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
}

.w36 {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
}

.w38 {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
}

.w40 {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
}

.w43 {
    width: 43px !important;
    min-width: 43px !important;
    max-width: 43px !important;
}

.w50 {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
}

.w51 {
    width: 51px !important;
    min-width: 51px !important;
    max-width: 51px !important;
}

.w60 {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

.w64 {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
}

.w68 {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
}

.w70 {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
}

.w80 {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
}

.w84 {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
}

.w100 {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}

.w120 {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
}

.h80 {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
}

.h82 {
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
}

.h92 {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 92px !important;
}

.h50p {
    height: 50%;
    min-height: 50%;
    max-height: 50%;
}

.gap5 {
    gap: 5px;
}

.medium {
    font-weight: 500;
}

.bold {
    font-weight: 600;
}

.strong {
    font-weight: 700;
}


button {
    white-space: nowrap;
}

button,
input[type="submit"],
input[type="reset"],
select {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
}

input {
    appearance: none;
    outline: none;
    border: 0px;
    font-size: 16px;
    background-color: inherit;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.di {
    width: auto !important;
    height: auto !important;
    position: relative;

    display: block;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
}

.div {
    width: 100%;
    height: 100%;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    -webkit-user-select: none;
    -webkit-moz-select: none;
    user-select: none;
}

div {
    width: 100%;
    height: 100%;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    -webkit-user-select: none;
    -webkit-moz-select: none;
    user-select: none;
}

.F {
    display: flex !important;
}

.JC_SB {
    justify-content: space-between !important;
}

.row {
    flex-direction: row !important;
}

.column {
    flex-direction: column !important;
}

.flex1 {
    flex: 1;
}

.row.ltr {
    justify-content: flex-start;
}

.row.rtl {
    justify-content: flex-end;
}

.row.ttb {
    align-items: flex-start !important;
}

.row.btt {
    align-items: flex-end !important;
}

.column.ttb {
    justify-content: flex-start !important;
}

.column.btt {
    justify-content: flex-end !important;
}

.boxShadow04 {
    box-shadow: var(--boxshadow-04);
}

.boxShadow05 {
    box-shadow: var(--boxshadow-05);
}

.boxShadow06 {
    box-shadow: var(--boxshadow-06);
}

.fs10 {
    font-size: 10px !important;
}

.fs11 {
    font-size: 11px !important;
}

.fs12 {
    font-size: 12px !important;
}

.fs13 {
    font-size: 13px !important;
}

.fs14 {
    font-size: 14px !important;
}

.fs15 {
    font-size: 15px !important;
}

.fs16 {
    font-size: 16px !important;
}

.fs17 {
    font-size: 17px !important;
}

.fs18 {
    font-size: 18px !important;
}

.fs1x {
    font-size: 1.1rem;
}

.fs2x {
    font-size: 1.2rem;
}

.fs3x {
    font-size: 1.3rem;
}

.fsUltraLine {
    font-size: 10px;
}

.fsUltraThin {
    font-size: 11px;
}

.fsUltraLight {
    font-size: 12px;
}

.fsLine {
    font-size: 13px;
}

.fsThin {
    font-size: 14px;
}

.fsLight {
    font-size: 15px;
}

.fsRegular {
    font-size: 16px;
}

.fsMedium {
    font-size: 17px;
}

.fsSemiBold {
    font-size: 18px;
}

.fsBold {
    font-size: 19px;
}

.fsStrong {
    font-size: 20px;
}

.fsHeavy {
    font-size: 21px;
}

#MODAL {

    width: auto;
    min-width: 300px;
    max-width: 90%;
    height: auto;
    max-height: calc(100% - 60px);

    top: 30px;
    left: 50%;
    transform: translateX(-50%);

    border-radius: 8px;

    display: none;

    background-color: white;
    position: absolute;
    z-index: 999;
}

#MODAL .header {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    border-bottom: 1px solid var(--universal-border);
}

.overflow {
    overflow: auto;
}

.overflowX {
    overflow-x: auto;
}

.overflowY {
    overflow-y: auto;
}

.overflowHidden {
    overflow: hidden;
}

.overflow_hidden {
    overflow: hidden;
}

#MODAL .content {
    overflow: auto;
}

#MODAL .footer {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    border-top: 1px solid #e6eaef;
}

#MODAL_BACK {
    display: none;

    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;

    z-index: 100;
}

#DD {
    position: absolute;
    height: auto;
    width: auto;
    background-color: white;
    z-index: 199;
}

.closeModalHeader {
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.closeModalHeader:hover {
    background-color: #f0f3fa;
}

.createModalFooter {
    line-height: 34px;
    padding: 0px 16px;
    border-radius: 6px;
    background-color: #2962ff;
    color: white;
}

.createModalFooter:hover {
    background-color: #1e53e5;
}

.cancelModalFooter {
    line-height: 32px;
    padding: 0px 16px;
    border-radius: 6px;
    border: 1px solid #e0e3eb;
    color: black;
}

.cancelModalFooter:hover {
    background-color: #e0e3eb;
}

.gap12 {
    gap: 12px;
}

.TA_CE {
    text-align: center;
}

.TA_RI {
    text-align: right;
}

.TA_LE {
    text-align: left;
}

.column.rtl {
    align-items: flex-end !important;
}

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

.tableTitle {
    color: #2962ff;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
}

.tableSubTitle {
    color: #4f5966;
    display: block;
    font-size: 11px;
    letter-spacing: .3px;
    margin-top: 2px;
    text-transform: uppercase;
}

.filterRoutePath {
    white-space: nowrap;
    line-height: 26px;
    flex-direction: row;
}

.filterRoutePath::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid var(--background-gray);
    left: 0px;
    cursor: pointer;
}

.filterRoutePath::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    border-right: 13px solid white;
    position: absolute;
    z-index: 2;
    right: 0;
}

.inside {
    padding-left: 8px;
    padding-right: 21px;
    font-size: 16px;
    background-color: var(--background-gray);
    color: white;
    cursor: pointer;
}

.yatanm {
    width: 100%;
    min-height: 56px;
    max-height: 56px;
    height: 56px;
    border: 1px solid rgba(0, 0, 0, .42);
    border-radius: 4px;
    text-indent: 12px;
}

.helperText {
    width: auto;
    height: auto;
    font-size: 12px;
    color: rgba(0, 0, 0, .6);
    margin-top: 3px;
}

.noBackgroud {
    background: none !important;
}

input+label {
    position: absolute;
    line-height: 20px;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    padding: 0px 4px;
    transition: 0.3s all;
    pointer-events: none;
    font-size: 14px;
}

input:focus+label {
    top: 0px;
    background-color: white;
    font-size: 12px;
}

input:not(:placeholder-shown)+label {
    top: 0px;
    background-color: white;
    font-size: 12px;
}

.inputValidation:invalid {
    border: 1px solid red;
    outline: 1px solid red;
}

.pickerBox {
    height: 28px;
    width: 100%;
}

.pickerHolder {
    background: rgb(240, 240, 240);
    min-height: 30px;
}

.picker_Slider {
    position: absolute;
    background-color: white;
    border-radius: 3px;
    width: 25%;
    height: 22px;
    z-index: 1;
}

.br0 {
    border-radius: 0px !important;
}

.br1 {
    border-radius: 1px;
}

.br2 {
    border-radius: 2px;
}

.br3 {
    border-radius: 3px;
}

.br4 {
    border-radius: 4px;
}

.br6 {
    border-radius: 6px;
}

.br8 {
    border-radius: 8px;
}

.br100 {
    border-radius: 100px;
}

.brLEFT1x {
    border-radius: 4px 0px 0px 4px;
}

.brLEFT2x {
    border-radius: 8px 0px 0px 8px;
}

.backWhite {
    background: white;
}

.zIndex2 {
    z-index: 2;
    border-left: 1px solid #949494;
}

.z1 {
    z-index: 1 !important;
}

.z2 {
    z-index: 2 !important;
}

.z3 {
    z-index: 3 !important;
}

.z100 {
    z-index: 100;
}

.z199 {
    z-index: 199;
}

.z201 {
    z-index: 201;
}

.z999 {
    z-index: 999;
}

.zIndex2:nth-child(1) {
    border: 0px;
}

.toggleBox {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    border-radius: 100px;
    cursor: pointer;
}

.toggleBox:active .toggleDice {
    width: 30px;
}

.toggleBox:active .toggleLeft {
    left: 27px !important;
}

.toggleDice {
    width: 24px;
    height: 24px;
    position: absolute;
    border-radius: 100px;
    background-color: white;
    transition: 0.2s all;
    float: right;
}

.toggle2Dice {
    width: 14px;
    height: 14px;
    position: absolute;
    border-radius: 100px;
    background-color: white;
    transition: 0.2s all;
}

.toggle2Box:active .toggle2Dice {
    width: 20px;
}

.toggle2Box:active .toggleLeft {
    left: 37px !important;
}

.hoverBorder:hover {
    background-color: var(--universal-border);
}

.hover01:hover {
    background-color: var(--hover-medium);
}

.hover01:active {
    background-color: var(--hover-light);
}

.hover02:hover {
    background-color: #e2ebf9 !important;
}

.hover02:active {
    background-color: #d8e4f7 !important;
}

.hover03:hover {
    background-color: #fafafb !important;
}

.hover03:active {
    background-color: #fafafb !important;
}

.submitButton:disabled {
    background-color: #e0e3eb;
}

.submitButton {
    height: 40px;
    padding: 0px 12px;
    border-radius: 4px;
    background-color: var(--background-blue);
    color: white;
    white-space: nowrap;
}

.submitButton:hover {
    background-color: var(--background-blue-hover);
}

.submitButton:active {
    background-color: var(--background-blue-active);
}

.secondaryButton {
    height: 40px;
    padding: 0px 12px;
    border-radius: 4px;
    background-color: var(--background-blue);
    color: white;
    white-space: nowrap;
}

.secondaryButton:hover {
    background-color: var(--background-blue-hover);
    color: white;
}

.secondaryButton:active {
    background-color: var(--background-blue-active);
    color: white;
}

.secondaryButton:disabled {
    background-color: #e0e3eb;
}

.primaryButtonGHOST {
    height: 40px;
    padding: 0px 12px;
    border-radius: 4px;
    background-color: white;
    color: var(--background-primary);
    white-space: nowrap;
    border: 1px solid var(--background-primary);
}

.primaryButtonGHOST:hover {
    background-color: var(--background-primary-hover);
    color: white;
}

.primaryButtonGHOST:active {
    background-color: var(--background-primary-active);
    color: white;
}

.primaryButtonGHOST:disabled {
    /* background-color: #e0e3eb; */
    border: 1px solid #e0e3eb;
    color: white;
}

.primaryButton:disabled {
    background-color: #e0e3eb;
    color: rgba(0, 0, 0, 0.25);
    font-weight: bold;
}

.primaryButton {
    height: 40px;
    padding: 0px 12px;
    border-radius: 4px;
    background-color: var(--background-primary);
    color: white;
    white-space: nowrap;
}

.primaryButton:hover {
    background-color: var(--background-primary-hover);
}

.primaryButton:active {
    background-color: var(--background-primary-active);
}

.yellowButton:disabled {
    background-color: #e0e3eb;
    color: rgba(0, 0, 0, 0.25);
    font-weight: bold;
}

.yellowButton {
    height: 40px;
    padding: 0px 12px;
    border-radius: 4px;
    background-color: var(--background-yellow);
    color: white;
    white-space: nowrap;
}

.yellowButton:hover {
    background-color: var(--background-yellow-hover);
}

.yellowButton:active {
    background-color: var(--background-yellow-active);
}

/* TABLE BUTTON */
/* NEXT BUTTON */
.nextTableButton {
    height: 40px;
    padding: 0px 12px;
    background-color: var(--background-primary);
    color: white;
    white-space: nowrap;
}

.nextTableButton:hover {
    background-color: var(--background-primary-hover);
}

.nextTableButton:active {
    background-color: var(--background-primary-active);
}

.notAllowed {
    cursor: not-allowed;
}

.noClick {
    pointer-events: none;
}

.cancelButton {
    padding: 0px 12px;
    border-radius: 4px;
    color: var(--background-gray);
    border: 1px solid var(--background-gray);
}

.cancelButton:hover {
    background-color: var(--background-gray);
    color: white;
}

.cancelButton:active {
    background-color: var(--background-gray-strong);
    color: white;
}


.resetButton {
    height: 40px;
    padding: 0px 12px;
    border-radius: 4px;
    background-color: var(--background-gray);
    color: white;
}

.resetButton:active {
    background-color: var(--background-gray-strong);
    color: white;
}

.viewButton {
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--background-gray);
    color: var(--background-gray);
}

.viewButton:hover {
    background-color: var(--background-gray);
    color: white;
}

.viewButton:active {
    background-color: var(--background-gray-strong);
}

.editButton {
    border: 1px solid var(--background-blue);
    color: var(--background-blue);
    padding: 4px 8px;
    border-radius: 4px;
}

.editButton:hover {
    background-color: var(--background-blue);
    color: white;
}

.deleteButton {
    border: 1px solid var(--button-delete);
    padding: 0px 8px;
    border-radius: 4px;
    color: red;
}

.deleteButton:hover {
    background-color: var(--button-delete-hover);
    color: white;
}

.deleteButton:active {
    background-color: var(--button-delete-active);
    color: white;
}

button:disabled {
    pointer-events: none;
    background-color: #e0e3eb;
}

.deleteButtonFull:disabled {
    background-color: #e0e3eb;
    color: rgba(0, 0, 0, 0.25);
    font-weight: bold;
}

.deleteButtonFull {
    background: var(--button-delete);
    padding: 0px 8px;
    border-radius: 4px;
    color: white;
}

.deleteButtonFull:hover {
    background-color: var(--button-delete-hover);
}

.deleteButtonFull:active {
    background-color: var(--button-delete-active);
    color: white;
}

.okayButton {
    border: 1px solid red;
    padding: 4px 8px;
    border-radius: 4px;
    color: red;
}

.okayButton:hover {
    background-color: red;
    color: white;
}

.hoverRed_Text:hover {
    color: red;
}

.redText {
    color: var(--universal-sell) !important;
}

.hoverDefault01_Back:hover {
    background-color: var(--background-hover-default01);
}

.hoverDefault02_Back:hover {
    background-color: var(--background-hover-default02);
}

.inputWithFloatingLabel {
    border: 1px solid var(--background-default04);
    border-radius: 4px;
    height: 100%;
    width: 100%;
}

.inputWithFloatingLabel input {
    height: 100%;
}

.inputWithFloatingLabel:disabled {
    color: var(--color-subHeading);
}

.inputWithFloatingLabel:disabled~label {
    color: var(--color-subHeading);
}

.pickerSlider {
    background-color: white;
    height: 34px;
    border-radius: 4px;
    position: absolute;
    width: calc(100% - 6px);
}

.picker {
    width: 100%;
    cursor: pointer;
}

#active {
    pointer-events: none;
}

.gap0x {
    gap: var(--universal-gap0x);
}

.gap {
    gap: var(--universal-gap);
}

.gap1x {
    gap: var(--universal-gap1x);
}

.gap2x {
    gap: var(--universal-gap2x);
}

.gap3x {
    gap: var(--universal-gap3x);
}

.gap4x {
    gap: var(--universal-gap4x);
}

.gap5x {
    gap: var(--universal-gap5x);
}

form {
    display: flex;
}

.pad0x {
    padding: 2px;
}

.pad1x {
    padding: 4px;
}

.pad2x {
    padding: 8px;
}

.pad3x {
    padding: 12px;
}

.pad4x {
    padding: 16px;
}

.pad5x {
    padding: 20px;
}

.pad_LR0x {
    padding-left: 2px;
    padding-right: 2px;
}

.pad_LR {
    padding-left: 4px;
    padding-right: 4px;
}

.pad_LR1x {
    padding-left: 4px;
    padding-right: 4px;
}

.pad_LR2x {
    padding-left: 8px;
    padding-right: 8px;
}

.pad_LR3x {
    padding-left: 12px;
    padding-right: 12px;
}

.pad_LR4x {
    padding-left: 16px;
    padding-right: 16px;
}

.pad_LR5x {
    padding-left: 20px;
    padding-right: 20px;
}

.pad_R0x {
    padding-right: 2px;
}

.pad_R {
    padding-right: 4px;
}

.pad_R1x {
    padding-right: 4px;
}

.pad_R2x {
    padding-right: 8px;
}

.pad_R3x {
    padding-right: 12px;
}

.pad_R4x {
    padding-right: 16px;
}

.pad_R5x {
    padding-right: 20px;
}

.pad_L0x {
    padding-left: 2px;
}

.pad_L1x {
    padding-left: 4px;
}

.pad_L2x {
    padding-left: 8px;
}

.pad_L3x {
    padding-left: 12px;
}

.pad_L4x {
    padding-left: 16px;
}

.pad_L5x {
    padding-left: 20px;
}

.pad_TB0x {
    padding-top: 2px;
    padding-bottom: 2px;
}

.pad_TB1x {
    padding-top: 4px;
    padding-bottom: 4px;
}

.pad_TB2x {
    padding-top: 8px;
    padding-bottom: 8px;
}

.pad_TB3x {
    padding-top: 12px;
    padding-bottom: 12px;
}

.pad_TB4x {
    padding-top: 16px;
    padding-bottom: 16px;
}

.pad_TB5x {
    padding-top: 20px;
    padding-bottom: 20px;
}

.pad_T0x {
    padding-top: 2px;
}

.pad_T1x {
    padding-top: 4px;
}

.pad_T2x {
    padding-top: 8px;
}

.pad_T3x {
    padding-top: 12px;
}

.pad_T4x {
    padding-top: 16px;
}

.pad_T5x {
    padding-top: 20px;
}

.pad_B0x {
    padding-bottom: 2px;
}

.pad_B1x {
    padding-bottom: 4px;
}

.pad_B2x {
    padding-bottom: 8px;
}

.pad_B3x {
    padding-bottom: 12px;
}

.pad_B4x {
    padding-bottom: 16px;
}

.pad_B5x {
    padding-bottom: 20px;
}

.mar_L1x {
    margin-left: 4px;
}

.mar_L2x {
    margin-left: 8px;
}

.mar_L3x {
    margin-left: 12px;
}

.mar_L4x {
    margin-left: 16px;
}

.mar_L5x {
    margin-left: 20px;
}

.bor1x {
    border: 1px solid var(--border-universal);
}

.bor_TB1x {
    border-top: 1px solid var(--border-universal);
    border-bottom: 1px solid var(--border-universal);
}

.bor_T1x {
    border-top: 1px solid var(--border-universal);
}

.bor_B1x {
    border-bottom: 1px solid var(--border-universal);
}

.bor_B2x {
    border-bottom: 2px solid var(--border-universal);
}

.bor_L1x {
    border-left: 1px solid var(--border-universal);
}

.bor_R1x {
    border-right: 1px solid var(--border-universal);
}

.bor_R4x {
    border-right: 4px solid var(--border-universal);
}

.pathButtonFirst {
    display: inline-block;
    position: relative;
    padding: 6px 6px 6px 6px;
    font-size: 18px;
    line-height: 18px;
    font-family: arial, helvetica, sans-serif;
    border: 2px solid rgb(0, 0, 0);
    border-right: none;
    border-radius: 5px 0 0 5px;
    background-color: black;
    color: white;
    z-index: 2;
}

.pathButtonFirst::before {
    content: '';
    position: absolute;
    display: inline-block;
    top: 3px;
    right: -12px;
    width: 12px;
    height: 12px;
    border-top: 12px solid rgb(0, 0, 0);
    border-right: 12px solid rgb(0, 0, 0);
    transform: rotate(45deg);
    background-color: rgba(0, 0, 0, 0);
    color: white;
    z-index: 1;
}

.pathButton {
    display: inline-block;
    position: relative;
    padding: 6px 6px 6px 24px;
    font-size: 18px;
    line-height: 18px;
    font-family: arial, helvetica, sans-serif;
    border: 2px solid rgb(0, 0, 0);
    border-right: none;
    border-radius: 5px 0 0 5px;
    background-color: black;
    color: white;
    z-index: 2;
}

.pathButton::before {
    content: '';
    position: absolute;
    display: inline-block;
    top: 3px;
    left: -12px;
    width: 10px;
    height: 10px;
    border-top: 14px solid var(--background-body);
    border-right: 14px solid var(--background-body);
    transform: rotate(45deg);
    background-color: rgba(0, 0, 0, 0);
    color: white;
    z-index: 1;
}

.pathButton::after {
    content: '';
    position: absolute;
    display: inline-block;
    top: 3px;
    right: -12px;
    width: 12px;
    height: 12px;
    border-top: 12px solid rgb(0, 0, 0);
    border-right: 12px solid rgb(0, 0, 0);
    transform: rotate(45deg);
    background-color: rgba(0, 0, 0, 0);
    color: white;
    z-index: 1;
}

.editButton_Table {
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    border: 1px solid black;
    padding: 0px 12px;
    height: 30px;
    border-radius: 4px;
}

.editButton_Table:hover {
    background: black;
    color: white;
}

.sub {
    font-size: 0.875rem;
}

.super {
    font-size: 0.75rem;
}

.thin {
    font-size: 0.625rem;
}

.subHeading {
    font-size: 0.875rem;
    color: var(--universal-subHeading);
}

.superHeading {
    font-size: 0.75rem;
    color: gray;
}

.thinHeading {
    font-size: 0.625rem;
    color: gray;
}

.down01 {
    height: auto;
    width: 100%;
    animation-name: down01;
    animation-duration: 2s;
}

.up01 {
    height: auto;
    width: 100%;
    animation-name: up01;
    animation-duration: 2s;
}

.down02 {
    height: auto;
    width: 100%;
    animation-name: down02;
    animation-duration: 2s;
}

.up02 {
    height: auto;
    width: 100%;
    animation-name: up02;
    animation-duration: 2s;
}

@keyframes down01 {
    from {
        background-color: var(--universal-red);
    }

    to {
        background-color: inherit;
    }
}

@keyframes up01 {
    from {
        background-color: var(--universal-green);
    }

    to {
        background-color: inherit;
    }
}

@keyframes down02 {
    from {
        background-color: var(--universal-red);
    }

    to {
        background-color: inherit;
    }
}

@keyframes up02 {
    from {
        background-color: var(--universal-green);
    }

    to {
        background-color: inherit;
    }
}

.down01_mobile {
    animation-name: down01_mobile;
    animation-duration: 4s;
}

.up01_mobile {
    animation-name: up01_mobile;
    animation-duration: 4s;
}

.down02_mobile {
    animation-name: down02_mobile;
    animation-duration: 4s;
}

.up02_mobile {
    animation-name: up02_mobile;
    animation-duration: 4s;
}

@keyframes down01_mobile {
    from {
        color: var(--universal-sell);
    }

    to {
        color: var(--universal-sell);
    }
}

@keyframes up01_mobile {
    from {
        color: var(--universal-buy);
    }

    to {
        color: var(--universal-buy);
    }
}

@keyframes down02_mobile {
    from {
        color: var(--universal-sell);
    }

    to {
        color: var(--universal-sell);
    }
}

@keyframes up02_mobile {
    from {
        color: var(--universal-buy);
    }

    to {
        color: var(--universal-buy);
    }
}

.t_Center_H {
    left: 50%;
    transform: translateX(-50%);
}

.t_Center_V {
    top: 50%;
    transform: translateY(-50%);
}

.t_Center {
    left: 50%;
    top: 50%;
    transform: translateY(-50%, -50%);
}

.center {
    left: 50%;
    top: 50%;
    transform: translateY(-50%, -50%);
}

.centerH {
    left: 50%;
    transform: translateX(-50%);
}

.centerV {
    top: 50%;
    transform: translateY(-50%);
}

.W1p {
    width: 1%;
}

.W2p {
    width: 2%;
}

.W3p {
    width: 3%;
}

.W4p {
    width: 4%;
}

.W5p {
    width: 5%;
}

.W6p {
    width: 6%;
}

.W7p {
    width: 7%;
}

.W8p {
    width: 8%;
}

.W9p {
    width: 9%;
}

.W10p {
    width: 10%;
}

.W11p {
    width: 11%;
}

.W12p {
    width: 12%;
}

.W13p {
    width: 13%;
}

.W14p {
    width: 14%;
}

.W15p {
    width: 15%;
}

.W16p {
    width: 16% !important;
    min-width: 16% !important;
    max-width: 16% !important;
}

.W17p {
    width: 17%;
}

.W18p {
    width: 18%;
}

.W19p {
    width: 19%;
}

.W20p {
    width: 20% !important;
    min-width: 20% !important;
    max-width: 20% !important;
}

.W21p {
    width: 21%;
}

.W22p {
    width: 22%;
}

.W23p {
    width: 23%;
}

.W24p {
    width: 24%;
}

.W25p {
    min-width: 25%;
    max-width: 25%;
    width: 25%;
}

.W26p {
    min-width: 26%;
    max-width: 26%;
    width: 26%;
}

.W27p {
    min-width: 27%;
    max-width: 27%;
    width: 27%;
}

.W28p {
    width: 28%;
}

.W30p {
    min-width: 30% !important;
    max-width: 30% !important;
    width: 30% !important;
}

.W35p {
    width: 35% !important;
}

.W32p {
    width: 32%;
}

.W33p {
    width: 33%;
}

.W34p {
    width: 34%;
}

.W40p {
    width: 40%;
}

.W44p {
    width: 44%;
}

.W45p {
    width: 45%;
}

.W50p {
    min-width: 50%;
    max-width: 50%;
    width: 50%;
}

.W54p {
    width: 54%;
}

.W55p {
    width: 55%;
}

.W60p {
    min-width: 60%;
    max-width: 60%;
    width: 60%;
}

.W64p {
    width: 64%;
}

.W65p {
    width: 65%;
}

.W70p {
    width: 70%;
}

.W75p {
    width: 75%;
}

.W80p {
    min-width: 80%;
    max-width: 80%;
    width: 80%;
}

.W90p {
    min-width: 90%;
    max-width: 90%;
    width: 90%;
}

.W100p {
    width: 100%;
}

.H10p {
    height: 10%;
}

.H15p {
    height: 15%;
    min-height: 15%;
    max-height: 15%;
}

.H20p {
    height: 20%;
}

.H30p {
    height: 30%;
}

.H40p {
    height: 40%;
}

.H50p {
    height: 50%;
}

.H60p {
    height: 60%;
}

.H100p {
    height: 100%;
}

.hoverWithActive01:hover {
    background-color: #949494;
    color: white;
    border: 0px;
}

.hoverWithActive01:active {
    background-color: #808080;
    color: white;
    border: 0px;
}

.inputNew:disabled {
    background-color: white;
    background-image: var(--bg-input-disabled);
    cursor: not-allowed;
    border-color: transparent;
}

.alert_closeButton {
    height: 40px;
    padding: 0px 12px;
    border: 1px solid white;
    border-radius: 4px;
}

.alert_closeButton:hover {
    background-color: white;
    color: black;
    border: 0px;
}

.alert_closeButton:active {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    border: 0px;
}

h4 {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-subHeading);
}

h5 {
    font-weight: 400;
    color: var(--color-subHeading);
}

.modal {
    position: fixed;
    z-index: 101;
    background: white;
    height: auto;
    width: auto;

    max-height: calc(100% - 100px);

    min-width: 500px;
    left: 50%;
    top: 50px;
    transition: 0.3s all;
    transform: translateX(-50%);
    border-radius: 10px;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
}

.modal>.header {
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    border-bottom: 1px solid var(--universal-border);
}

.modal>.content {
    height: 100%;
    flex: 1;
    overflow: auto;
    justify-content: flex-start;
}

.modal>.footer {
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    border-top: 1px solid var(--universal-border);
}

.modalBack {
    left: 0;
    top: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
}

#MODAL_BACK {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 200;
}

#MODALBACK {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 200;
}

.numberFontStyle {
    font-feature-settings: "tnum" on, "lnum" on;
}

table {
    width: 100%;
    border-spacing: 0px;
}

thead {
    border: none;
    color: #6a6d78;
    background-color: white;
}

th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-right: 1px solid var(--border-light);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    font-weight: normal;
    text-transform: uppercase;

    font-size: 14px;
}

td {
    border-bottom: 1px solid var(--border-light);
}

.parentWakeup:hover .childHidden {
    display: flex;
}

.childHidden {
    display: none;
}

.parentWakeup2:hover .childHidden2 {
    display: flex;
}

.childHidden2 {
    display: none;
    transition: 0.3s all;
}

#POPUP_ORDER {
    width: auto;
    height: auto;
    display: none;
    position: absolute;
    background-color: white;
    border-radius: 10px;
    z-index: 202;
    left: 50%;
    transform: translate(-50%);
    box-shadow: var(--boxshadow-06);
}

#POPUPheader {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    height: 60px;
    cursor: move;
}

#POPUP_ORDERheader {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    height: 56px;
    /* cursor: move; */
}

#POPUPfooter {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#POPUP_DEPTH {
    width: auto;
    height: auto;
    display: none;
    position: absolute;
    background-color: white;
    border-radius: 10px;
    z-index: 201;
    left: 50%;
    transform: translate(-50%);
    min-width: 344px;
    max-width: 344px;
    width: 344px;
    box-shadow: var(--boxshadow-06);
}

.absolute_center_Left {
    left: 50%;
    transform: translateX(-50%);
}

.absolute_center_Top {
    top: 50%;
    transform: translateY(-50%);
}

.absolute_center_Both {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#POPUP {
    height: auto;
    width: auto;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: var(--boxshadow-06);
    z-index: 201;
    transition: 0.3s all;
}

.errorText {
    color: var(--universal-red);
}

.buyButton {
    border: 1px solid var(--universal-buy);
    border-radius: 4px;
    background: var(--universal-buy);
    color: white;
}

.buyButton:hover {
    background: var(--universal-buy-hover);
    border-color: var(--universal-buy-hover);
}

.buyButton:active {
    background: var(--universal-buy-active);
    border-color: var(--universal-buy-active);
}

.sellButton {
    border: 1px solid var(--universal-sell);
    border-radius: 4px;
    background: var(--universal-sell);
    color: white;
}

.sellButton:hover {
    background: var(--universal-sell-hover);
    border-color: var(--universal-sell-hover);
}

.sellButton:active {
    background: var(--universal-sell-active);
    border-color: var(--universal-sell-active);
}

.f5Button {
    border: 1px solid var(--universal-f5);
    border-radius: 4px;
    background: var(--universal-f5);
    color: white;
}

.f5Button:hover {
    background: var(--universal-f5-hover);
    border-color: var(--universal-f5-hover);
}

.f5Button:active {
    background: var(--universal-f5-active);
    border-color: var(--universal-f5-active);
}

.removeButton {
    border: 1px solid var(--universal-delete);
    border-radius: 4px;
    background: var(--universal-delete);
    color: white;
}

.removeButton:hover {
    background: var(--universal-delete-hover);
    border-color: var(--universal-delete-hover);
}

.removeButton:active {
    background: var(--universal-delete-active);
    border-color: var(--universal-delete-active);
}

button:disabled {
    pointer-events: none;
}

.deleteButton {
    border: 1px solid var(--button-delete);
    padding: 0px 8px;
    border-radius: 4px;
    color: red;
}

.deleteButton:hover {
    background-color: var(--button-delete-hover);
    color: white;
}

.deleteButton:active {
    background-color: var(--button-delete-active);
    color: white;
}

.depositWithdrawButton {
    background: #007BFF;
    padding: 0px 8px;
    border-radius: 4px;
    color: white;
}

.headerButton {
    border: 1px solid var(--background-primary);
    height: 40px;
    min-width: 100px;
    padding: 0px 12px;
    border-radius: 100px;
    color: var(--background-primary);
}

.headerButton:hover {
    background-color: var(--background-primary-hover);
    color: white;
}

.headerButton:active {
    background-color: var(--background-primary-active);
    color: white;
}

.headerButtonFull:disabled {
    background-color: #e0e3eb;
}

.headerButtonFull {
    background: var(--background-primary);
    height: 40px;
    min-width: 100px;
    padding: 0px 12px;
    border-radius: 100px;
    color: white;
}

.headerButtonFull:hover {
    background-color: var(--background-primary-hover);
}

.headerButtonFull:active {
    background-color: var(--background-primary-active);
    color: white;
}

.transition_delete {
    transition: background 0s, width 0.2s ease-out, min-width 0.2s ease-out, max-width 0.2s ease-out, all 0.2s ease-out;
}

.transition {
    -webkit-transition: 0.2s all;
    -moz-transition: 0.2s all;
    -ms-transition: 0.2s all;
    transition: 0.2s all;
}

.transition_slow {
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    -ms-transition: 0.4s all;
    transition: 0.4s all;
}

.transition_superSlow {
    -webkit-transition: 4s all;
    -moz-transition: 4s all;
    -ms-transition: 4s all;
    transition: 4s all;
}

.transition_transform {
    -webkit-transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out, all .2s ease-in-out;
    transition: transform .2s ease-in-out, all .2s ease-in-out;
}

.transition_transform_slow {
    transition: -webkit-transform .5s ease-in-out, all .5s ease-in-out;
    transition: transform .5s ease-in-out, all .5s ease-in-out;
    transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out, all .5s ease-in-out;
}

.transition_transform_fast {
    transition: -webkit-transform .1s ease-in-out;
    transition: transform .1s ease-in-out;
    transition: transform .1s ease-in-out, -webkit-transform .2s ease-in-out;
}

.topBorderRadius4x {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.bottomBorderRadius4x {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.borderBottom_01 {
    border-bottom: 1px solid var(--border-light);
}

.borderBottom_02 {
    border-bottom: 2px solid var(--background-mobileLight);
}

.borderTopMobile {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.borderBottomMobile {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.gridTR td {
    border-right: 1px solid var(--border-default01);
}

.sticky40 {
    position: sticky;
    top: 40px !important;
    z-index: 2;
}

.searchBox {
    height: 30px;
    width: 100%;
    max-width: 120px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    text-indent: 8px;
    text-transform: none !important;
}

.transparentButton {
    background: rgba(255, 255, 255, 0.35);
    color: white;
    border: 0px;
    padding: 4px 8px;
    border-radius: 4px;
}

.blackButtonGHOST {
    border: 1px solid gray;
    color: black;
    padding: 4px 8px;
    border-radius: 4px;
}

.blackButtonGHOST:hover {
    border: 0px;
    background-color: black;
    color: white;
}

.blackButtonGHOST:active {
    border: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

.MblackButton {
    background: black;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
}

.blackButton {
    background: black;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
}

.blackButton:hover {
    background: rgba(0, 0, 0, 0.85);
}

.blackButton:active {
    background: rgba(0, 0, 0, 0.7);
}

.copyToClipboardAnimation {
    animation: copyToClipboardAnimation 0.2s;
}

@keyframes copyToClipboardAnimation {
    0% {
        top: 20%;
    }

    100% {
        top: 10%;
    }
}


.list:hover {
    background-color: #ffeb3b !important;
}

.list:active {
    background-color: #f44336 !important;
}

.list.selected {
    background-color: #9c27b0 !important;
    color: #fff;
}

.borderRight01 {
    border-right: 1px solid var(--border-light);
}

.borderRightHidden {
    border-right: 0px !important;
}

.baseline_align {
    align-items: baseline;
}

.back_mobileLight {
    background-color: var(--background-mobileLight);
}

.borderBottom_M {
    border-bottom: 1px solid var(--background-mobileLight);
}

.borderTop_M {
    border-top: 1px solid var(--background-mobileLight);
}

.section__holder {
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
}

.section__item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.buttonBuy {
    background-color: #4caf50;
    color: white;
    border: 0px;
    border-radius: 4px;
    padding: 4px 8px;
}

.buttonBack {
    border: 1px solid var(--background-mobilePrimaryLight);
    color: white;
    border-radius: 4px;
    padding: 4px 8px;
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top);
}

.h49 {
    height: 49px !important;
    min-height: 49px !important;
    max-height: 49px !important;
}

html {
    overflow: hidden !important;
}

body {
    position: absolute;
    top: env(safe-area-inset-top);
    overflow: hidden !important;
}

.item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 12px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    gap: 8px;
    border-bottom: 1px solid var(--border-mobile);
    background: black;
}

.buttonNoStyle:disabled {
    background: black;
    color: #666;
    cursor: not-allowed;
}

.neumorphic-button-black {
    border: none;
    background-color: #1f1f1f;
    color: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8),
        inset 0 -2px 20px rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.back1 {
    background-color: var(--dark-Gray-1);
}

.back2 {
    background-color: var(--dark-Gray-2);
}

.back3 {
    background-color: var(--dark-Gray-3);
}

.back4 {
    background-color: var(--dark-Gray-4);
}

.back5 {
    background-color: var(--dark-Gray-5);
}

.back6 {
    background-color: var(--dark-Gray-6);
}

.blinkingCursor::after {
    content: "";
    width: 1px;
    height: 20px;
    background: white;
    display: inline-block;
    -webkit-animation: 1s blink step-end infinite;
    -moz-animation: 1s blink step-end infinite;
    -ms-animation: 1s blink step-end infinite;
    -o-animation: 1s blink step-end infinite;
    animation: 1s blink step-end infinite;
}

@keyframes blink {

    from,
    to {
        background: white;
    }

    50% {
        background: transparent;
    }
}

@-moz-keyframes blink {

    from,
    to {
        background: white;
    }

    50% {
        background: transparent;
    }
}

@-webkit-keyframes blink {

    from,
    to {
        background: white;
    }

    50% {
        background: transparent;
    }
}

@-ms-keyframes blink {

    from,
    to {
        background: white;
    }

    50% {
        background: transparent;
    }
}

@-o-keyframes blink {

    from,
    to {
        background: white;
    }

    50% {
        background: transparent;
    }
}

.primaryCol {
    color: var(--background-primary);
}

.nowrap {
    white-space: nowrap;
}

.wrap {
    white-space: normal;
}

.buyCircle {
    width: 22px;
    height: 22px;
    border-radius: 100px;
    border: 2px solid var(--universal-buy);
    color: var(--universal-buy);
    text-align: center;
    line-height: 22px;
    font-size: 14px;
}

.sellCircle {
    width: 22px;
    height: 22px;
    border-radius: 100px;
    border: 2px solid var(--universal-sell);
    color: var(--universal-sell);
    text-align: center;
    line-height: 22px;
    font-size: 14px;
}

.moveLeftToRight {
    position: absolute;
    z-index: 3;
    width: 0;
    background-color: rgba(0, 0, 0, 0.1);
    animation: increaseWidth 3s forwards;
    border-radius: 8px;
    pointer-events: none;
    top: 0px;
    left: 0px;
}

@keyframes increaseWidth {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.sideMenu {
    width: 300px;
    position: absolute;
    top: 0px;
    /* border-top-left-radius: 10px;
    border-bottom-left-radius: 10px; */
    background: white;
    color: black;
    z-index: 999;
}

.walletViewer {
    height: 45px;
    width: auto;
    overflow: hidden;
    transition: 0.3s all ease-in-out;
}

.walletViewer:hover {
    height: 141px;
    max-height: 141px;
}

.tap01:active {
    background-color: rgba(0, 0, 0, 0.1);
}



/* MAKE THESE FOR MOBILE ONLY, FOR DESKTOP SHOW SCROLLBAR */
*::-webkit-scrollbar {
    display: none;
    /* For Chrome, Safari, Opera */
}

* {
    scrollbar-width: none;
    /* For Firefox */
}


.testing {
    position: fixed;
    background-image: linear-gradient(90deg, #36c, #131313, 33%, #36c);
    left: 0;
    top: 0;
    width: 300px;
    height: 30px;
    z-index: 1000;
    /* Ensure the title bar is on top */
}

#hoverParent {}

#hoverParent:hover #hoverChild {
    display: block;
}

#hoverChild {
    display: none;
    z-index: 2;
}

/* GRID */
.grid3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid3x3.ttb {
    align-items: start;
}

.grid2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid2x2.ttb {
    align-items: start;
}

.hiddenY {
    overflow-y: hidden !important;
}

/* SPINNER */
ui-activity-indicator.standard {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
}

ui-activity-indicator.standard ui-spinner-nib {
    position: absolute;
    left: 50%;
    top: 0;
    width: 3px;
    height: 9px;
    border-radius: 1.5px;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-animation-name: ui-activity-indicator-keyframe-u6aefe6a6;
    animation-name: ui-activity-indicator-keyframe-u6aefe6a6;
    animation-direction: reverse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333);
    animation-timing-function: cubic-bezier(0.33333, 0, 0.66667, 0.33333);
    background-color: #000;
}

ui-activity-indicator.standard ui-spinner-nib:first-of-type {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
    -webkit-transform: translateY(16px) rotate(0deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(0deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(2) {
    -webkit-animation-delay: -0.91667s;
    animation-delay: -0.91667s;
    -webkit-transform: translateY(16px) rotate(30deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(30deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(3) {
    -webkit-animation-delay: -0.83333s;
    animation-delay: -0.83333s;
    -webkit-transform: translateY(16px) rotate(60deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(60deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(4) {
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s;
    -webkit-transform: translateY(16px) rotate(90deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(90deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(5) {
    -webkit-animation-delay: -0.66667s;
    animation-delay: -0.66667s;
    -webkit-transform: translateY(16px) rotate(120deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(120deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(6) {
    -webkit-animation-delay: -0.58333s;
    animation-delay: -0.58333s;
    -webkit-transform: translateY(16px) rotate(150deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(150deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(7) {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    -webkit-transform: translateY(16px) rotate(180deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(180deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(8) {
    -webkit-animation-delay: -0.41667s;
    animation-delay: -0.41667s;
    -webkit-transform: translateY(16px) rotate(210deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(210deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(9) {
    -webkit-animation-delay: -0.33333s;
    animation-delay: -0.33333s;
    -webkit-transform: translateY(16px) rotate(240deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(240deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(10) {
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s;
    -webkit-transform: translateY(16px) rotate(270deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(270deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(11) {
    -webkit-animation-delay: -0.16667s;
    animation-delay: -0.16667s;
    -webkit-transform: translateY(16px) rotate(300deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(300deg) translateY(-16px) translateX(-1.5px);
}

ui-activity-indicator.standard ui-spinner-nib:nth-of-type(12) {
    -webkit-animation-delay: -0.08333s;
    animation-delay: -0.08333s;
    -webkit-transform: translateY(16px) rotate(330deg) translateY(-16px) translateX(-1.5px);
    transform: translateY(16px) rotate(330deg) translateY(-16px) translateX(-1.5px);
}

@-webkit-keyframes ui-activity-indicator-keyframe-ub42b2c63 {
    0% {
        opacity: 0.25;
    }

    to {
        opacity: 1;
    }
}

@keyframes ui-activity-indicator-keyframe-ub42b2c63 {
    0% {
        opacity: 0.25;
    }

    to {
        opacity: 1;
    }
}

ui-activity-indicator.standard ui-spinner-nib {
    -webkit-animation-name: ui-activity-indicator-keyframe-ub42b2c63;
    animation-name: ui-activity-indicator-keyframe-ub42b2c63;
}

/* DEFAULT CSS */
.nowrap {
    white-space: nowrap;
}

/* POSITIONING */

.absolute {
    position: absolute;
}

.absolute.centerLeft {
    left: 50%;
    transform: translateX(-50%);
}

.absolute.centerTop {
    top: 50%;
    transform: translateY(-50%);
}

.absolute.centerBoth {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* HOVER */
.hoverLight:hover {
    background: var(--hover-light) !important;
}

.hoverMedium:hover {
    background: var(--hover-medium) !important;
}

.hoverStrong:hover {
    background: var(--hover-strong) !important;
}


/* CIRCLE ANIMATION */
.circleAnimation {
    width: 62px;
    height: 62px;
    position: relative;
}

.circleAnimation .circleChild {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid transparent;
    border-radius: 50%;
    animation: circleRotateKeyFrame 1.5s linear infinite;
}

@keyframes circleRotateKeyFrame {
    from {
        transform: rotate(0deg);
        border-color: transparent rgba(255, 255, 255, 0.5) transparent transparent;
    }

    to {
        transform: rotate(360deg);
        border-color: transparent rgba(255, 255, 255, 0.5) transparent transparent;
    }
}

/* CIRCLE ANIMATION */
.circleAnimation_50 {
    width: 42px;
    height: 42px;
    position: relative;
}

.circleAnimation_50 .circleChild {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid transparent;
    border-radius: 50%;
    animation: circleRotateKeyFrame 1.5s linear infinite;
}

@keyframes circleRotateKeyFrame {
    from {
        transform: rotate(0deg);
        border-color: transparent rgba(255, 255, 255, 0.5) transparent transparent;
    }

    to {
        transform: rotate(360deg);
        border-color: transparent rgba(255, 255, 255, 0.5) transparent transparent;
    }
}


/* TOAST CSS NOTIFICATION */
#TOAST {
    position: absolute;
    right: 0px;
    top: 66px;
}

.toast {
    border-radius: 4px;
    height: 80px;
    width: 360px;
    background: white;
    z-index: 1000;
    right: -360px;
    animation: slideIn 0.5s forwards;
    background: rgba(250, 250, 250, 1);
}

@keyframes slideIn {
    from {
        right: -360px;
    }

    to {
        right: 12px;
    }
}

@keyframes slideOut {
    from {
        right: 12px;
    }

    to {
        right: -360px;
    }
}

.blinkTextCursor {
    color: black;
    width: auto !important;
}

.blinkTextCursor::after {
    content: '|';
    opacity: 1;
    animation: blinkCursor 1s step-start infinite;
}

@keyframes blinkCursor {
    50% {
        opacity: 0;
    }
}

#progress-container {
    display: block !important;
    width: 100%;
    background-color: #e0e0e0;
    height: 60px;
}

#progress-bar {
    display: block !important;
    height: 100%;
    width: 0;
    background-color: #4caf50;
}

#countdown-text {
    position: absolute;
    top: 0px;
}

.flip-card {
    background-color: transparent;
    width: 60px;
    height: 80px;
    perspective: 1000px;
    z-index: 2;
    border-radius: 4px;
    position: absolute;
    transition: transform 0.6s ease-in-out;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-inner.flip {
    transform: rotateY(180deg);
    /* Automatically apply flip */
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 4px;
}

.flip-card-front {
    background-color: #bbb;
    color: black;
}

.flip-card-back {
    background-color: white;
    transform: rotateY(180deg);
}

.block div {
    display: block;
}

.block {
    display: block;
}

/* .t item means they must be managed by theme for dark and light */
.tModalBoxTitle {
    background: black;
    color: white;
    font-size: 12px;
}

#BOTTOM_MODAL {
    position: absolute;
    z-index: 1111;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    bottom: -100%;
    transition: 0.3s all ease-in-out;
    visibility: hidden;
    opacity: 0;
}

.whitespaceNormal {
    white-space: normal;
}

.verticalText {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}


/* GAMES SLOT MACHINE */

/* GAMES */
.slot-machine {
    perspective: 1000px;
    width: 256px;
    height: 136px;
    overflow: hidden;
    position: relative;
    background-color: rgba(230, 230, 230, 1);
    gap: 2px;
    padding: 8px;
}

.reel-container {
    width: 80px;
    height: 120px;
    margin: 0px;
    overflow: hidden;
    background-color: white;
}

.highligter {
    position: absolute;
    top: 0px;
    height: 120px;
    width: 80px;
    z-index: 2;
}

.highligter .top {
    height: 30px;
    min-height: 30px;
    width: 80px;
    background: linear-gradient(to bottom, rgba(180, 180, 180, 1), transparent);
}

.highligter .bottom {
    height: 30px;
    min-height: 30px;
    width: 80px;
    background: linear-gradient(to top, rgba(180, 180, 180, 1), transparent);
}

#reel1 {
    transform: translateY(-30px);
}

#reel2 {
    transform: translateY(-30px);
}

#reel3 {
    transform: translateY(-30px);
}

.reel {
    display: flex;
    flex-direction: column;
}

.itemView {
    min-width: 80px;
    max-width: 80px;
    width: 80px;
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

@keyframes spinSlow {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-1920px);
    }
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

#result {
    margin-top: 20px;
    font-size: 20px;
}

@keyframes spinFast {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4160px);
    }
}

@keyframes spinMedium {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-4160px);
    }
}

.slotMachineButton {
    background: orange;
    /* background-color: #f44336; */
    color: white;
    border: none;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 8px 6px -6px rgba(180, 180, 180, 1);
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.slotMachineButton:active {
    box-shadow: 0 2px 3px -2px rgba(180, 180, 180, 1);
    /* Shorter shadow simulates pressing */
    transform: translateY(4px) scale(0.98);
    /* Moves button down and scales down to simulate pressing */
}

.slotMachineButton.disabled {
    background-color: #ccc;
    /* Grayed out */
    cursor: default;
    /* Default cursor */
    pointer-events: none;
    /* No further events */
}

/* BUTTON */
.teenPattiSlotBetType {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    padding: 4px 0px;
}

.triangleRight {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-right: 12px solid orange;
    z-index: 200;
    /* Color and size of the triangle */
}

.triangleLeft {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid orange;
    z-index: 200;
    /* Color and size of the triangle */
}

.grid-container {
    display: grid;
    grid-template-columns: 0.9fr 1.2fr 0.9fr;
}

.stakeInput {
    width: 100%;
    height: 40px;
    font-size: 16px;
    background: var(--universal-BWbase);
    border-radius: 4px;
}

.stakeInputHolderItem {
    display: flex;
    background: var(--universal-BWbase);
    border-radius: 4px;
    padding: 0px 8px;
    min-width: 40px;
}

.stakeInputHolder {
    background: rgba(240, 240, 240, 1);
}

.initial-transform {
    transform: translateY(-30px);
}


.winner {
    font-size: 18px;
    font-weight: bold;
    color: orange;
    animation: shake 0.5s infinite;
    text-align: center;
}

@keyframes shake {

    0%,
    100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-5px);
    }

    75% {
        transform: translateY(5px);
    }
}

.selectionItem {
    border-bottom: 1px solid var(--border-universal);
    border-left: 1px solid var(--border-universal);
}

.selectionItem:first-child {
    border-left: none;
}


/* HAZIR WALLI */
.gridContainer4x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    border-collapse: collapse;
}

.gridItem4x3 {
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #000;
    /* bottom border */
    border-right: 1px solid #000;
    /* right border */
}

/* Remove right border from the last column items */
.gridItem4x3:nth-child(3n) {
    border-right: none;
}

/* Remove bottom border from the last row items */
.gridItem4x3:nth-last-child(-n+3) {
    border-bottom: none;
}


.yyy {
    transition: margin 1s;
}

.sports-livescore-wrapper div {
    display: block;
}

.team_name {
    height: auto;
}

.row-ctm {
    display: flex !important;
}

.quickBuyButton {
    background: var(--universal-buy);
    color: white;
    border-radius: 4px;
}

.quickSellButton {
    background: var(--universal-sell);
    color: white;
    border-radius: 4px;
}

.gridContainer3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-collapse: collapse;
    gap: 8px;
    padding: 12px;
    align-items: start;
}

.gridItem3x3 {
    text-align: center;
    display: block;
    height: auto;
    background-color: var(--universal-BWbody);
    border-radius: 4px;
}

/* SCROLL TEXT */

.scrolling-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding-left: 12px;
}

.scrolling-text {
    display: inline-block;
    white-space: nowrap;
    animation: scrollTEXT 4s linear infinite;
    font-size: 16px;
}

@keyframes scrollTEXT {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-150% - 24px));
    }
}


/* FLIP CARD ANIMATION */

.card-container {
    perspective: 90px;
    display: inline-block;
}

.flipped .card {
    transform: rotateY(180deg);
}

.card {
    width: 30px;
    height: 46px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card-front,
.card-back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

.notificationBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.notification-banner {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
    height: auto;
    width: auto;
}

.topTransition {
    transition: all 0.3s ease-in-out;
}

.mainWrapper {
    overflow-x: hidden;
}

.blinkingText {
    animation: blinkText 1s infinite;
}

@keyframes blinkText {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }
}