@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    /*  Colors  */
    --color-primary-light: #BCCBFF;
    --color-primary-light1: #F6F7FE; /* Primary/primary-200 */
    --color-primary-250: #EEF1FD;
    --color-primary-300: #D8DFFA; /* Primary/primary-300 */
    --color-primary-400: #9CAFF2; /* Primary/primary-400 */
    --color-primary: #6280EB; /* Primary/primary-500 */
    --color-primary-mod: #6280EB;
    --color-primary-mod-contrast: #FFFFFF;
    --color-primary1: #3C4AC8;
    --color-primary-700: #4A60B0;

    --color-secondary-gradient: #62EBCD;
    --color-status-02: #62EBE1; /* Status/status-02 */
    --color-status-03: #68D6CE; /* Status/status-03 */

    --color-gradient-03-1: #BA62EB;
    --color-gradient-03-2: #6280EB;
    --color-gradient-04-1: #0F152B;
    --color-gradient-04-2: #3C179A;

    --color-danger-100: #FDEFF2;
    --color-danger-500: #EB6280;

    --color-white: #FFFFFF;
    --color-white-mod: #FFFFFF;
    --color-white0: #FFFFFF14;
    --color-white1: #FBFBFD;
    --color-white2: #FFFFFFFA;
    --color-white3: #FFFFFFCC;

    --color-grey1: #FAFAFA;
    --color-grey2: #F7F7F7; /* Neutral/neutral-01 */
    --color-grey3: #EBEBEB; /* Border/border-light */ /* Neutral/neutral-200 */
    --color-grey4: #0000001A;
    --color-grey5: #B0B0B0; /* Neutral/light/neutral-600 */
    --color-grey6: #22222261;
    --color-grey7: #22222273;
    --color-grey8-mod: #222222BD;
    --color-grey8: #5E5E5E;
    --color-grey9: #222222BD; /* Text/Black/black-text-02 */

    --color-grey-light: #22222280; /* Text/Black/black-text-03 */
    --color-grey-lighter: #D3D3D3; /* Neutral/neutral-400 */

    --color-black: #222222;
    --color-black-mod: #222222;
    --color-black2: #000000;
    --color-neutral-09: #3a3a3a; /* Neutral/neutral-09 */ /* Neutral/neutral-900 */

    /* Box shadow colors */
    --color-box-shadow3: #19213D1A;

    /*  Mobile colors  */
    --color-mobile_primary: #5671CF; /* Primary/primary-600 */
    --color-mobile-grey: #FFFFFF33;

    --color-mobile-card: #22222212;

    --color-border-strong: #DDDDDD;

    /*  Filters  */
    --filter-primary: invert(50%) sepia(92%) saturate(2064%) hue-rotate(206deg) brightness(94%) contrast(97%);
    --filter-gradient-03: invert(45%) sepia(85%) saturate(467%) hue-rotate(233deg) brightness(93%) contrast(98%);

    --filter-white: invert(100%) sepia(1%) saturate(7496%) hue-rotate(153deg) brightness(102%) contrast(101%);

    --filter-grey1: invert(49%) sepia(0%) saturate(1724%) hue-rotate(194deg) brightness(87%) contrast(78%);
    --filter-grey5: invert(75%) sepia(0%) saturate(99%) hue-rotate(155deg) brightness(99%) contrast(80%);
    --filter-grey7: invert(67%) sepia(0%) saturate(116%) hue-rotate(141deg) brightness(91%) contrast(85%);
    --filter-grey8: invert(38%) sepia(0%) saturate(0%) hue-rotate(2deg) brightness(93%) contrast(90%);
    --filter-grey8-mod: invert(38%) sepia(0%) saturate(0%) hue-rotate(2deg) brightness(93%) contrast(90%);
    œ: invert(46%) sepia(28%) saturate(0%) hue-rotate(210deg) brightness(90%) contrast(93%);

    --filter-grey-717171: invert(46%) sepia(28%) saturate(0%) hue-rotate(210deg) brightness(90%) contrast(93%); /* neutral-07 neutral-700 */

    --filter-grey-light: invert(59%) sepia(2%) saturate(0%) hue-rotate(191deg) brightness(99%) contrast(80%);
    --filter-grey-lighter: invert(89%) sepia(0%) saturate(0%) hue-rotate(223deg) brightness(95%) contrast(93%);

    --filter-black: invert(9%) sepia(1%) saturate(0%) hue-rotate(142deg) brightness(94%) contrast(88%);

    --filter-neutral-09: invert(15%) sepia(0%) saturate(400%) hue-rotate(135deg) brightness(99%) contrast(77%);

    /*  Mobile filters  */
    --filter-mobile-primary: invert(43%) sepia(47%) saturate(674%) hue-rotate(189deg) brightness(94%) contrast(96%);
    --filter-primary-700: invert(39%) sepia(69%) saturate(556%) hue-rotate(190deg) brightness(80%) contrast(86%);

    /*  Fonts  */
    --font-inter: "Inter", sans-serif;
    --font-poppins: "Poppins", sans-serif;

    /*  Border-radius  */
    --border-radius-xsmall: 4px;
    --border-radius-small: 6px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;
    --border-radius-xlarge: 16px;
    --border-radius-xxlarge: 24px;
    --border-radius-xxxlarge: 32px;
}

.DEBUG {
    border: 2px dotted red;
}

/** Disable features  **/
/* To disable pull to refresh on Android devices */
html, body {
    overscroll-behavior: none;
}

/* To disable text selection */
*:not(input):not(select):not(code):not(textarea):not([contenteditable]) {
    webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Start Bootstrap overrides */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.search-input {
    width: 100%;
    height: 100%;
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: var(--color-black);
    border-left: none;
}

.search-input::placeholder {
    color: var(--color-grey9);
}

.btn {
    border: none !important;
    transition: all 250ms;
}

.btn:hover {
    opacity: 0.8;
    background: var(--color-primary-light1);
}

/*.btn:not(:disabled):not(:disabled):active {*/
/*    border: none !important;*/
/*}*/

.btn:disabled {
    border-color: var(--color-grey3);
    background: var(--color-grey2);
}

.form-control {
    border-color: #0d6efd;
}


.form-floating > input + label:after {
    background: none !important;
}

.form-floating > input:not(:focus):placeholder-shown + label {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-grey-light);
    background: none;
}

.form-floating > input:focus + label {
    color: var(--color-mobile_primary) !important;
}

.form-floating > .form-control:focus {
    background: var(--color-primary-light1) !important;
    border: 1px solid var(--color-primary-400) !important;
    box-shadow: none !important;
}

.form-floating.error > input:focus + label {
    color: var(--color-danger-500) !important;
}

.form-floating.error > .form-control:focus {
}

.form-floating.error > .form-control:focus {
    background: var(--color-danger-100) !important;
    border: 1px solid var(--color-danger-500) !important;
    box-shadow: none !important;
}


textarea:focus, input:focus {
    outline: none;
}

/* End Bootstrap overrides */

body {
    background: var(--color-grey1);
}

ul {
    padding: 0;
}

li {
    list-style-type: none;
}

button {
    background: none;
    border: none;
}

/* Start fonts mobile landing page  */
.font-landing-mobile-xxxlarge {
    margin-bottom: 0.5rem;
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 40px;
    line-height: 56px;
    color: var(--color-black);
}

.font-landing-mobile-xxlarge {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    color: var(--color-black);
}

.font-landing-mobile-xlarge-xxlarge {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: var(--color-black);
}

.font-landing-mobile-xlarge-plus {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 28px;
    line-height: 42px;
    color: var(--color-black);
}

.font-landing-mobile-xlarge {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-primary)
}

.font-landing-mobile-large {
    font-family: var(--font-inter);
    font-weight: 300;
    font-size: 20px;
    line-height: 32px;
    color: var(--color-white);
    text-align: center;
}

.font-landing-mobile-medium {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    color: var(--color-white);
}

.font-landing-mobile-small {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
}

.font-landing-mobile-xsmall {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--color-black);
}

.font-landing-mobile-xxsmall {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var(--color-white);
}

/* End fonts mobile landing page */

/* Start fonts desktop landing page */
.font-landing-desktop-xxxlarge {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 61px;
    line-height: 84px;
    color: var(--color-black);
}

.font-landing-desktop-xxlarge {
    font-family: var(--font-poppins);
    font-weight: 700;
    font-size: 40px;
    line-height: 54px;
    color: var(--color-black);
}

.font-landing-desktop-xlarge-xxlarge {
    font-family: var(--font-inter);
    font-weight: 300;
    font-size: 28px;
    line-height: 44px;
    color: var(--color-white);
    text-align: center;
}

.font-landing-desktop-xlarge {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    color: var(--color-white);
}

.font-landing-desktop-large-xlarge {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: var(--color-primary);
}

.font-landing-desktop-large {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: var(--color-black);
}

.font-landing-desktop-medium-large {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-white);
}

.font-landing-desktop-medium {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: var(--color-black);
}

.font-landing-desktop-small {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var(--color-white);
}

/* End fonts desktop landing page */


/* Start register mobile app */

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--color-grey3);
}

.price-card.selected {
    background: var(--color-primary-light1);
    border: 2px solid var(--color-primary);
}

/* End register mobile landing page */


/* Start fonts mobile app */

.font-app-mobile-title-xx-large {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
}

.font-app-mobile-title-x-large {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
}

.font-app-mobile-title-large {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
}

.font-app-mobile-title-medium {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.font-app-mobile-title-small {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.font-app-mobile-title-caption {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.font-app-mobile-body-x-large-semibold {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 18px;
    line-height: 28px;
}

.font-app-mobile-body-x-large-bold {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
}

.font-app-mobile-body-large {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.font-app-mobile-body-large-semibold {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
}

.font-app-mobile-body-large-bold {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.font-app-mobile-body-medium {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.font-app-mobile-body-medium-semibold {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}

.font-app-mobile-body-small {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.font-app-mobile-body-small-bold {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}

.font-app-mobile-body-x-small {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
}

.font-app-mobile-body-x-small-bold {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;
}

/* New landing */
.landing-desktop-width {
    width: 87.5vw;
    max-width: 1040px;
}

/* New landing */


.pill {
    color: var(--color-grey9);
    background: var(--color-grey2);
}

.pill.selected {
    color: var(--color-white);
    background: var(--color-primary);
}

.disabled {
    opacity: 0.4;
}

.modal-parity-card-favorite, #graph-header-favorite {
    filter: var(--filter-grey-lighter);
}

.modal-parity-card-favorite.active, #graph-header-favorite.active {
    filter: var(--filter-mobile-primary)
}

/* section graph */
.graph-timeline {
    color: var(--color-black);
}

.graph-timeline.selected {
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-light1);
}

/* section menu */
/** parameters **/
/*** themes ***/
.menu-parameters-theme-item {
    background: var(--color-grey2);
}

.menu-parameters-theme-item.active {
    background: var(--color-primary-light1);
    border: 1px solid var(--color-primary-400);
}

.modal-menu-install-content-device-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.modal-menu-install-content-device-tab.active {
    border-bottom: 2px solid var(--color-primary);
}

.modal-menu-install-content-device-tab:hover {
    cursor: pointer;
}

.modal-menu-install-content-device-tab p {
    padding: 0 8px;
    color: var(--color-black);
}

.modal-menu-install-content-device-tab p.active {
    color: var(--color-mobile_primary);
}

/* End fonts mobile app */


/* Start fonts desktop app */

.font-app-desktop-xxxlarge {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    color: var(--color-black2);
}

.font-app-desktop-xxlarge {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: var(--color-black2);
}

.font-app-desktop-xlarge {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: var(--color-white);
}

.font-app-desktop-large {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    color: var(--color-black);
}

.font-app-desktop-medium {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: var(--color-black);
}

.font-app-desktop-small {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-grey7);
}

.font-app-desktop-xsmall {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
    color: var(--color-grey9);
}

.font-app-desktop-xxsmall {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: var(--color-grey9);
}

.font-app-desktop-xxxsmall {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 8px;
    line-height: 10px;
    color: var(--color-grey7);
}


.font-app-desktop-title-xx-large {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    color: var(--color-black);
}

.font-app-desktop-title-x-large {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: var(--color-black);
}

.font-app-desktop-title-large {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: var(--color-black);
}

.font-app-desktop-title-small {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
}

.font-app-desktop-title-caption {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 11px;
    line-height: 14px;
    color: var(--color-black);
}

.font-app-desktop-body-large {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-black);
}

.font-app-desktop-body-medium-large-bold {
    font-family: var(--font-inter);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
}

.font-app-desktop-body-medium-semibold {
    font-family: var(--font-inter);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
}

.font-app-desktop-body-medium {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
}

.font-app-desktop-body-small {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-black);
}

/* End fonts desktop app */


/* Start special fonts desktop app */

.parity {
    font-family: var(--font-inter);
    font-weight: 400;
    color: var(--color-black);
}

.parity.active {
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-light1);
}

#analysis-section-user-email::placeholder {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-white2);
}

/* End special fonts desktop app */


.currencies-bottom-margin {
    margin-bottom: 150px;
}

.item-has-trend {
    background: #fff7e0;
}

.trendline-50d {
    background: #fffcf2;
}

#plot {
    position: relative;
}

#curved-arrow {
    position: absolute;
    top: 0;
    left: 0;
    margin: 170px 0 0 46%;
    width: 32%;
    rotate: 4deg;
    max-width: 317px;
}

#plot::before {
    content: '';
    display: block;
    background: linear-gradient(transparent, var(--color-white));
    position: absolute;
    bottom: -10px;
    left: 62px;
    width: calc(100% - 94px);
    height: 25%;
    z-index: 10;
    pointer-events: none;
}

.modal-backdrop {
    background-color: var(--color-grey5);
}

.modal-payments-right-side-create-user-form-label {
    font-family: var(--font-inter);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-grey9);
}

.modal-payments-right-side-create-user-form-input {
    background: var(--color-grey2);
    border: none;
}

.tooltip-inner {
    max-width: 240px;
    padding: 4px 10px;
    font-family: var(--font-inter);
    font-weight: 450;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    white-space: pre-wrap;
    background: var(--color-black);
    color: var(--color-white);
}

.tooltip {
    --bs-tooltip-bg: var(--color-black);
}

.has-opportunity-indicator {
    position: absolute;
    bottom: calc(48% - 6px);
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--color-secondary-gradient);
    border: 2px solid var(--color-white);
    border-radius: 50%;
}

.parities-group > img {
    rotate: -90deg;
    transition: all 350ms;
}

.parities-group.active > img {
    rotate: 0deg;
}

.parity-trash {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 20px;
    height: 20px;
    background: var(--color-grey3);
    border-radius: var(--border-radius-xsmall);
}

.parity:disabled, .markets-modal-search-parity:disabled {
    background: none;
    border: none;
    opacity: 0.4;
}

.parity:disabled > span, .markets-modal-search-parity:disabled > span {
    color: var(--color-black);
}

.markets-modal-search-pill {
    color: var(--color-grey9);
    background: var(--color-grey2);
}

.markets-modal-search-pill.selected {
    color: var(--color-white);
    background: var(--color-primary);
}

#signals-section-pills > button {
    color: var(--color-black);
    background: var(--color-grey2);
}

#signals-section-pills > button.active {
    color: var(--color-white);
    background: var(--color-neutral-09);
}

.signal-parity-button {
    color: var(--color-black);
    background: var(--color-white);
}

.signal-parity-button.active {
    color: var(--color-primary);
    background: var(--color-primary-light1);
    font-weight: 600;
}

.analysis-section-item {
    background: none !important;
}

.analysis-section-item.active {
    background: var(--color-primary-light1) !important;
}

.analysis-section-item:hover {
    background: var(--color-grey2) !important;
}

.analysis-section-item.active:hover {
    background: var(--color-primary-300) !important;
}

.analysis-section-item > p {
    color: var(--color-grey-light);
}

.analysis-section-item.active > p {
    color: var(--color-primary);
}


@keyframes target-bouncing {
    from {
        transform: scale(1, 1);
    }
    to {
        transform: translate(-2.4px, -2.4px) scale(1.2, 1.2);
    }
}

.plot-opportunity {
    animation: 700ms linear infinite alternate target-bouncing;
}

div.plotly-notifier {
    visibility: hidden;
}

.wagtail-analysis-description p {
    color: var(--color-black);
}

/* Text clipping */
.clip-line-tool {
    display: -webkit-box;
    max-width: 200px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: start;
}

.clip-first-line {
    -webkit-line-clamp: 1;
}

.clip-second-line {
    -webkit-line-clamp: 2;
}

.clip-third-line {
    -webkit-line-clamp: 3;
}


/* Alpine.js feature */
[x-cloak] {
    display: none !important;
}


@media screen and (max-width: 1084px) {
    #curved-arrow {
        top: 0;
        left: 0;
        margin: 170px 0 0 41%;
        width: 32%;
        max-width: 350px;
        rotate: 3deg;
    }
}


@media screen and (max-width: 576px) {
    #plot::before {
        content: '';
        display: block;
        background: linear-gradient(transparent, var(--color-white));
        position: absolute;
        bottom: 18px;
        left: 38px;
        width: calc(100% - 50px);
        height: 25%;
        z-index: 10;
        pointer-events: none;
    }
}