@import url(https://fonts.googleapis.com/css?family=Montserrat|Vollkorn|Nova+Square);

/* Major+Mono+Display */

:root {

    --pg-nav: rgb(255, 255, 255, 0.1);

    --pg-navB: rgb(255, 255, 255, 0.92);

    --pg-txt: rgb(20, 20, 20);

    --pg-bg: rgb(250, 250, 250);

    --pg-bgB: rgb(246, 246, 249);

    --pg-bgC: rgb(250, 250, 250);

    --pg-bgD: rgb(240, 240, 240);

    --pg-bgE: transparent;

    --pg-bgF: transparent;

    --pg-bgG: rgb(255, 255, 255);

    --pg-bgH: transparent;

    --pg-bgI: rgba(200, 200, 200, 0.7);

    --pg-invert: rgba(20, 24, 31, 0.12);

    --pg-transp-bg: rgba(255, 255, 255, 0.5);

    --pg-transp-bgB: rgba(20, 20, 20, 0.2);

    --pg-transp-bgC: rgba(20, 20, 20, 0.5);

    --pg-svg: rgb(20, 20, 20);

    --pg-highlight: rgb(229, 233, 241);

    --pg-highlightB: rgb(241, 241, 241);

    --pg-border: 1px solid rgb(230, 230, 230);

    --pg-borderB: 1px solid rgb(240, 242, 245);

    --pg-borderC: 1px solid rgb(229, 233, 241);

    --pg-borderD: 1px solid rgb(230, 230, 230);

    --pg-borderE: 1px solid rgb(229, 233, 241);

    --pg-borderF: 1px solid rgb(20, 20, 20);

    --pg-grey: rgb(229, 233, 241);

    --pg-greyB: rgb(102, 102, 102);

    --pg-greyC: rgb(200, 200, 200);

    --pg-link: rgb(61, 135, 245);

    --pg-i-border: rgb(225, 228, 235);

    --pg-thead: rgb(246, 246, 249);

    --pg-trabsp-box-shadow: rgba(20, 20, 20, 0.03);

    --pg-trabsp-box-shadowB: rgba(20, 20, 20, 0.06);

    --pg-sep: rgb(230, 230, 230);

    --pg-success: rgb(54, 179, 126);

    --pg-error: rgb(249, 58, 55);

    --pg-red: rgb(238, 49, 43);

    --pg-purple: rgb(81, 69, 132);

    --pg-lime: rgb(173, 250, 29);

    --JavaBlue: rgb(58, 117, 176);

    --VueBlue: rgb(33, 53, 71);

    --Ink: rgb(63, 81, 181);

    --BaseBlue: rgb(0, 70, 130);

    --MercBlu: rgb(23, 109, 183);

    --OmenXBlue: rgb(0, 150, 214);

    --MichelinBlue: rgb(39, 80, 155);

    --RadE: rgb(185, 1, 3);

    --JavaGreen: rgb(25, 135, 84);

    --VueGreen: rgb(66, 184, 131);

    --Verify: rgb(23, 191, 99);

    --lightteal: rgb(30, 181, 137);

    --orange: rgb(255, 153, 70);

    --yellow: rgb(255, 217, 100);

    --boomYellow: rgb(212, 207, 134);

    --chestnut: rgb(242, 204, 142);

    --JavaGrey: rgb(122, 115, 110);

    --white: rgb(255, 255, 255);

    --black: rgb(0, 0, 0);

    --RadBlack: rgb(20, 20, 20);

    --baseFont: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    --subFont: 'Vollkorn', Georgia, 'Times New Roman', Times, serif;

    --monoFont: 'Nova Square', 'Courier New', Courier, monospace;

}

/* Darkmode */

@media screen and (prefers-color-scheme: dark) {

    .darkmode {

        --pg-nav: rgb(20, 20, 20, 0.1);

        --pg-navB: rgb(20, 20, 20, 0.92);

        --pg-txt: rgb(250, 250, 250);

        --pg-bg: rgb(20, 20, 20);

        --pg-bgB: rgb(30, 30, 30);

        --pg-bgC: rgb(25, 25, 25);

        --pg-bgD: rgb(30, 30, 30);

        --pg-bgE: rgb(35, 35, 35);

        --pg-bgF: rgb(25, 25, 25);

        --pg-bgG: rgb(20, 20, 20);

        --pg-bgH: rgb(20, 20, 20);

        --pg-bgI: rgba(7, 7, 7, 0.7);

        --pg-thead: rgb(46, 46, 49);

        --pg-transp-bg: rgba(55, 55, 55, 0.5);

        --pg-transp-bgB: rgba(255, 255, 255, 0.2);

        --pg-transp-bgC: rgba(255, 255, 255, 0.5);

        --pg-invert: rgba(220, 224, 231, 0.12);

        --pg-svg: rgb(250, 250, 250);

        --pg-highlight: rgb(229, 233, 241, 0.07);

        --pg-highlightB: rgba(241, 241, 241, 0.1);

        --pg-border: none;

        --pg-borderB: 1px solid rgb(102, 102, 102);

        --pg-borderC: none;

        --pg-borderD: 1px solid transparent;

        --pg-borderE: 1px solid rgb(102, 102, 102);

        --pg-borderF: 1px solid rgb(102, 102, 102);

        --pg-i-border: none;

        --pg-trabsp-box-shadow: rgba(250, 250, 250, 0.03);

        --pg-trabsp-box-shadowB: rgba(250, 250, 250, 0.06);

        --pg-sep: rgb(102, 102, 102);

    }
    
}

/* Defaults */

*, *::before, *::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    /* outline: 1px dotted rgb(225, 13, 3); */

}

html {

    font-family: var(--baseFont);

    font-size: 100%;

    scroll-behavior: smooth;

}

a {

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}

img {

    max-width: 100%;

    height: auto;

    vertical-align: middle;

}

abbr {

    text-decoration: none;

}

svg {

    max-width: 100%;

    height: auto;

    display: block;

}

button, input[type*="button"], input[type*="submit"], *[role*="switch"], input[type="checkbox"], input[type="range"], input[type="radio"] {

    cursor: pointer;

}

input:disabled, button:disabled:not(button#authorizer) {

    opacity: 0.5;

}

.darkmode input:disabled, .darkmode button:disabled:not(button#authorizer) {

    opacity: 0.1;

}

*[role*="presentation"] {

    user-select: none;

    cursor: none;

}

input, textarea, button {

    font-family: inherit;

}

textarea {

    line-height: 1.5;

}

::-webkit-file-upload-button {

    display: none;

    background-color: transparent;

    border: 1px solid var(--pg-txt);

    color: var(--pg-txt);

    padding: 0.2em 1em;

    border-radius: 0.5em;

    font-size: 0.8rem;

    font-family: inherit;

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

}

:checked {

    accent-color: var(--OmenXBlue);

}

*:focus-visible {

    outline: thin dotted var(--pg-red);

}

*[iQ-target] {

    cursor: pointer;

    user-select: none;

}

/* Translation Stuff */

font {

    vertical-align: baseline !important;

}

/* Selection & Scrollbar */

::selection {

    background-color: rgb(179, 212, 252);

    text-shadow: none;

}

::-webkit-scrollbar {

    width: .75em;

    height: .75em;

}

::-webkit-scrollbar-track {

    background-color: var(--pg-invert);

    /* border-radius: 2em; */

}

::-webkit-scrollbar-thumb {

    background-color: rgb(23, 109, 183, 0.3);

    border-radius: 2em;

}

::-webkit-scrollbar-thumb:hover {

    background-color: rgb(23, 109, 183, 0.5);

}

.noScrollBar::-webkit-scrollbar {

    display: none;
}

.noScrollBar {

    scrollbar-width: none;

}

body *::-webkit-scrollbar {

    width: .52em;

    height: .52em;

}

body *::-webkit-scrollbar-track {

    background-color: transparent;

}

@media screen and (max-width: 63.9em) {

    body.access {

        overflow-y: hidden;

        user-select: none;

    }
    
}

body {

    background-color: var(--pg-bg);

    color: var(--pg-txt);

}

body.deactivate {

    overflow-y: hidden;

    user-select: none;

}

/* body * {

    transition: 0.8s ease-out;

} */

.fd_tx {

    color: var(--pg-greyB);

    text-align: center;

}

.bl {

    font-weight: 300;

}

.b {

    font-weight: 500;

}

.dft_link {

    color: var(--pg-txt);

    transition-property: text-decoration, color;

    transition-duration: 0.8s, 1.2s;

    transition-timing-function: ease-in-out;

}

.dft_link:focus, .dft_link:hover {

    text-decoration: underline;

    color: var(--pg-link);

}

/* Overflow Handlers */

.overflow_con {

    overflow: auto;

    width: 100%;

}

.overflow_con.x-axis {

    overflow-x: auto;

}

.overflow_con > *:last-child {

    margin-bottom: 0.5em;

}

.overflow_con.noScrollBar > *:last-child {

    margin-bottom: 0;

}

.logo svg path {

    fill: var(--pg-svg);

}

/* ViewBox */

@media screen and (max-width: 23.2em) {
    
    .viewBox {

        padding: 1.2em !important;

    }

}

@media screen and (max-width: 37.5em) {
    
    .viewBox.v2 {

        padding: 0em !important;

    }

}

.viewBox {

    display: flex;

    flex-flow: column nowrap;

    justify-content: center;

    align-items: center;

    gap: 2em;

    padding: 2em;

}

.viewBox.reg {

    background-color: var(--pg-bgF);

}

@media screen and (min-width: 93.8em) {
    
    .vbox_item {

        min-width: 35% !important;

    }

}

.vbox_item {

    width: 100%;

    /* min-width: 50%; */

    display: flex;

    justify-content: center;

    max-width: 500px;

}

.viewBox.text .vbox_item {

    max-width: 700px;

    flex-direction: column;

}

.viewBox.text .vbox_item p {

    margin: 0.5em 0;

    text-align: justify;

    line-height: 1.5;

}

.viewBox.text a {

    color: var(--pg-link);

}

.vbox_item.header {

    padding: 0.7em 0;

    align-items: center;

}

.vbox_item.main {

    /* min-width: 50%; */

    display: flex;

    flex-flow: column;

    gap: 1.06em;

    flex: 1 1 auto;

}

/* FORMS */

.form_con {

    border: var(--pg-borderE);

    border-radius: 0.5em;

    background-color: var(--pg-bgG);

    flex: 1 1 auto;

}

.form_con > * {

    padding: 1em 1.5em;

}

.form_title {

    font-family: var(--subFont);

    font-style: italic;

    font-size: 1.35rem;

    font-weight: 500;

    border-bottom: var(--pg-borderE);

}

.form_title.v2 {

    font-family: var(--baseFont);

    color: var(--pg-txt);

    font-style: normal;

    font-weight: 700;

}

.form_con form {

    padding-top: 2em;

}

.form_item {

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    padding-bottom: 1.2em;

    gap: 0.4em;
    
}

@media screen and (min-width: 768px) {

    .form_item.db {

        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    }
    
}

.form_item.db {

    display: grid;

    gap: 0.4em 1em;

}

.form_item.req {

    flex-flow: column nowrap;

    align-items: flex-start;

    gap: 1em;

    border-top: 1px solid var(--pg-greyC);

    padding: 1.2em 0;

    margin: 1em 0;

}

.form_item.req span {

    text-transform: uppercase;

}

.form_item.req .req_map {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5em;

    font-family: var(--monoFont);

}

.form_item.req .req_map .req_key {

    padding: 0.5em 0.7em;

    border-radius: 2em;

    border: 1px dashed var(--pg-greyC);

    font-size: 0.8rem;

    margin: 0.2em;

    display: flex;

    align-items: center;

    gap: 0.3em;

}

.form_item.req .req_map .req_key > svg.icon {

    display: none;

}

.form_item.req .req_map .req_key.active {

    border: 1px solid var(--pg-success);

    background-color: rgba(54, 179, 126, 0.12);

}

.form_item.req .req_map .req_key.active > svg.icon {

    display: block;

}

.form_item.mltpl {

    flex-wrap: nowrap;

    justify-content: space-between;

    padding: 1em 0;

    margin: 1.2em 0;

}

.form_field, .form_fieldS7, .form_btn {

    width: 100%;

    flex: 1 1 auto;

    border-radius: 0.5em;

    border: none;

    padding: 1em 0.75em;

    font-size: 0.875rem;

    transition: all 1.2s ease 0s;

    outline: none;
    
}

.form_item.mltpl .form_field {

    text-align: center;

    font-size: 1rem;

    padding: 0.3em;

    height: 3rem;

}

.form_item.checkbox_con {

    display: flex;

    align-items: baseline;

    flex-wrap: nowrap;

    gap: 0.25em;

}

.form_field {

    border: 1px solid var(--pg-i-border);
    
    background-color: var(--pg-transp-bg);

    color: var(--pg-txt);

}

.form_field[type="range"] {

    padding: 1em 0;

}

.form_field.err {

    border: 1px solid red;
    
}

.form_field:focus, .form_field.pseudoField.active {

    border: 1px solid var(--OmenXBlue);

}

.form_field:hover {

    /* opacity: 0.35; */

    border: 1px solid var(--pg-greyB);

}

.form_link {

    color: var(--pg-link);

}

.form_link:focus, .form_link:hover {

    text-decoration: underline;

}

.form_btn {

    background-color: var(--JavaBlue);

    color: var(--white);

    text-align: center;

    text-transform: uppercase;

    font-size: 0.8rem;

    margin: 0.2em 0 0;

    transition: none;

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    padding: 1.15em 0.75em;

}

.form_btn.v2 {

    max-width: fit-content;

    margin: auto;

    min-width: 5em;

    padding: 0.5em;

}

.form_btn.green {

    background-color: rgb(54, 179, 126);

}

.form_btn.red {

    background-color: rgb(255, 70, 70);

}

.form_btn.v2.green {

    color: rgb(54, 179, 126);

    background-color: transparent;

    border: 1px solid currentColor;

}

.form_btn.v2.red {

    color: rgb(255, 70, 70);

    background-color: transparent;

    border: 1px solid currentColor;

}

.form_btn:hover {

    opacity: 0.75;

}

/* .form_btn:focus, .form_btn:active {

    transform: translate(-5px, 10px) scaleX(0.98);

} */

.form_radio {

    width: 100%;

    flex: 1 1 auto;

    font-size: 0.875rem;

    display: grid;

    align-items: center;

    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

    gap: 0.5em;
    
}

.formRadio_item {

    background-color: var(--pg-bgI);

    padding: 0.5em 0.25em;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.4em;

    border-radius: 0.25em;

    cursor: pointer;

    user-select: none;

    font-weight: 600;

}

.formRadio_item input[type="radio"] {

    display: none;

}

.formRadio_item img {

    display: block;

    width: 1.5em;

    height: 1.5em;

    object-fit: contain;

}

.formRadio_item.selected {

    background-color: var(--pg-txt);

    color: var(--pg-bg);

}

.action_btn {

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    gap: 0.5em;

    background-color: transparent;

    border: none;

    outline: none;

    font-size: 0.8rem;

    font-weight: 600;

    margin: 1em auto;

    padding: 0.5em;

    color: var(--pg-txt);

    white-space: nowrap;

}

.action_btn:active {

    outline: thin dotted var(--MercBlu);

    border: none;

}

.action_btn svg path {

    fill: var(--pg-svg);

}

.form_info {

    font-size: 0.9rem;

    text-align: center;

    margin: 1em auto;

}

/* Landing Pages */

/* @media screen and (min-width: 1440px) {
    .sec_con .container {
        padding: 5em 7% !important;
    }
} */

@media screen and (min-width: 77em) and (max-width: 1320px) {

    .sec_con .container {

        padding: 5em 5% !important; 

    }
    
}

@media screen and (max-width: 767px) {

    .sec_con .container {

        padding: 5em 1em !important;

        flex-direction: column !important;

    }
}

@media screen and (max-width: 991px) {
    .sec_con .container {

        padding: 5em 1.5em !important;
        
    }
}

.container {

    max-width: 77em;

    margin: 0 auto;

}

.sec_con .container {

    display: flex;

    gap: 2em;

    padding: 5em 0;

}

.sec_con.col .container {

    flex-direction: column;

}

.sec_con .container > * {

    flex: 1 1 45%;

}

.sec_con .container .txBox {

    padding: 0.3em;

}

.sec_con .container .txBox.center {

    text-align: center;

}

.secCon_title {

    font-weight: 700;

    font-size: 2.5rem;

    margin-bottom: 0.3em;

}

.secCon_title.center {

    text-align: center;

}

.sec_con .container .txBox p:not(.secCon_title) {

    line-height: 1.8;

}


@media screen and (max-width: 950px) {

    .cells_box {

        flex-wrap: wrap;

    }

    .cells_box > .cell {

        flex: 1 1 0% !important;

        min-width: 45%;

    }

}

@media screen and (max-width: 767px) {

    .cells_box.x4 > .cell {

        flex: 1 1 auto !important;

    }

}

@media screen and (max-width: 620px) {

    .cells_box {

        flex-direction: column !important;

    }

}

.cells_box {

    display: flex;

    justify-content: center;

    gap: 1em;

    margin: 1em 0;

}

.cells_box.x3 {

    flex-flow: row wrap;

}

.cells_box.x3 .cell {
    
    flex: 0 1 30%;

}

.cells_box.x3.ex .cell {
    
    flex: 1 1 30%;

}

.cell .icon {

    width: 100%;

    max-width: 3em;

}

.cell img.icon {

    max-width: 3em;

    object-fit: cover;

}

.icon.round {

    border-radius: 100%;

}

.cells_box.grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(4.5em, 1fr));

}

.cells_box.cells_box.grid > .cell {

    justify-content: center;

    padding: 0.5em;

    border-radius: 0.25em;

}

.cells_box.cells_box.grid > .cell img {

    width: 8em;

    object-fit: cover;

}

.cells_box.x4 > .cell {

    flex: 1 1 25%;

}

.cell {

    padding: 2em 1em;

    border-radius: 1.2em;

    background-color: var(--pg-bgB);

    display: flex;

    flex-direction: column;
    
    align-items: center;

    gap: 2em;

}

.cell.aLeft {

    align-items: flex-start;

}

.cell .title {

    font-size: 1.2rem;

    font-weight: 600;
    
}

.center {

    text-align: center;

}

.lHeader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 5;
    
    background-color: var(--pg-nav);

    transition: background-color 0.5s, transform 0.5s;

}

body:not(body.darkmode) .lHeader.prime:not(.lHeader.show) {

    color: var(--white);

}

body:not(body.darkmode) .lHeader.prime:not(.lHeader.show):hover {

    color: var(--pg-txt);

}

body:not(body.darkmode) .lHeader.prime:not(.lHeader.show) .logo .light, body:not(body.darkmode) .lHeader.prime:not(.lHeader.show):hover .logo .dark {

    display: none;

}

body:not(body.darkmode) .lHeader.prime:not(.lHeader.show) .logo .dark, body:not(body.darkmode) .lHeader.prime:not(.lHeader.show):hover .logo .light {

    display: block;

}

.lHeader.hide {

    transform: translateY(-100%);

}

.lHeader.show {

    transform: translateY(0%);

    background-color: var(--pg-navB);

}

.lHeader:not(.lHeader.mobile):hover {

    background-color: var(--pg-navB);

}

@media screen and (max-width: 770px) {

    .lH_con {

        flex-direction: column !important;

        justify-content: flex-start !important;

    }

    .escMobile {

        display: flex !important;

    }

    .lH_navBar.secondary {

        display: none !important;

    }

    .lHeader.mobile .lH_navBar.secondary {

        width: 100% !important;

        display: flex !important;

    }

    .lHeader.mobile .lH_navBar.secondary .lH_navCon {

        flex-direction: column !important;

        width: 100% !important;

        align-items: flex-start !important;

    }

    .lHeader.mobile {

        min-height: 100vh;

        background-color: var(--pg-bg) !important;

        color: var(--pg-txt) !important;

    }

}

.lH_con {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1em 1.5em;

    gap: 2em;

}

.lH_navBar {

    display: flex;

    align-items: center;

    gap: 2em;

}

.lH_navBar.primary {

    width: 100%;

}

.lH_navCon {

    list-style-type: none;

    display: flex;

    align-items: center;

    gap: 2em;

}

.escMobile {

    display: none;

}

.escMobile svg {

    min-width: 1.5em;

    fill: currentColor;

}

.escMobile svg.close {

    display: none;

}

.escMobile svg.close path {

    stroke: var(--pg-error);

}

.escMobile.active svg {

    display: none;

}

.escMobile.active svg.close {

    display: block;

}

.darkmode img.integrate {

    filter: invert(1);

}

img.fi_invert {

    filter: invert(1);

}

.logo {

    font-size: 1.2rem;

    font-weight: 600;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* Section ~ Genesis */

.genesis {

    position: relative;

}

.genesis_con {

    max-width: 77em;

    margin: 0 auto;

    height: 100vh;

    max-height: 1200px;

    position: relative;

}

.genesis_underlay, .genesis_overlay {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    height: 100%;

    width: 100%;

    z-index: 1;

}

.genesis_overlay {

    z-index: 3;

    color: var(--white);

}

.ambassador_data {

    color: var(--white);

}

.ambassador_data * {

    z-index: 2;

}

@media screen and (max-width: 424px) {

    .ambassador_badge {

        display: none !important;

    }

} 

.ambassador_badge {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.25em;

    padding: 0.35em 0.5em;

    border-radius: 120px;

    font-weight: 500;

    font-size: 0.8rem;

    background-color: rgba(20, 20, 20, 0.5);

    position: absolute;

    right: 1.5em;

    bottom: 7em;

}

.ambassador_badge .icon {

    width: 2em;

}

/* .ambassador_badge span {

    background-image: linear-gradient(158deg, rgb(248, 69, 0) 0%, rgb(173, 250, 29) 90%);

    background-clip: text;

    -webkit-text-fill-color: transparent;

} */

@media screen and (max-width: 991px) {
    .ambassador {
        z-index: 2;

        object-position: 100% 100% !important;

        width: 100% !important;

        height: 90% !important;

        /* right: -20% !important; */

    }
}

@media screen and (max-width: 767px) {
    .ambassador {
        z-index: 0;

        /* object-fit: contain !important; */

        /* object-position: 50% 100% !important; */

        width: 100%;

        height: 95% !important;

        /* inset: auto auto 0% !important; */

    }
}

/* @media (min-width: 480px) and (orientation: landscape) {

    .ambassador {

        object-position: 75% 20% !important;

    }

} */

@media screen and (max-width: 479px) {
    .ambassador {

        object-fit: cover !important;

        object-position: 50% 100% !important;

        /* height: 90% !important; */

    }
}

.ambassador {

    z-index: 1;

    object-fit: contain;

    object-position: /* -70% */ 50% 100%;

    width: auto;

    height: 87%;

    position: absolute;

    inset: auto 0% 0% auto;

    pointer-events: none;

    user-select: none;

}

.genesis_underlay .screen, .genesis_underlay .screen_video {

    position: absolute;

    width: 100%;

    height: 100%;

    overflow: hidden;

    left: 0;

    top: 0;

    right: 0;

    pointer-events: none;

}

.genesis_underlay .screen {

    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 6%, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, 0.5) 42%, rgba(0, 0, 0, 0.7) 52%, rgba(0, 0, 0, 0.8));

}

.genesis_underlay .screen_video {

    object-fit: cover;

}

.genesis_text {
    
    padding: 5em 0 5.5em;

    padding-inline-start: 1.5em;

    padding-inline-end: 1.5em;

    height: 100%;

    display: flex;

    direction: ltr;

    text-shadow: -1px -1px 0px var(--black);

}

@media screen and (max-height: 580px) and (orientation: landscape) {

    .genesisText_con {

        padding-bottom: 0 !important;

    }

    .genesis .secCon_title, .closure.secCon_title {

        padding-top: 3em !important;

        font-size: 1.7rem !important;

    }

}

@media screen and (max-height: 368px) and (orientation: landscape) {

    .genesisText_con p:not(.secCon_title) {

        display: none;

    }

}

@media screen and (max-width: 499px) {

    .genesis .secCon_title, .closure.secCon_title {

        padding-top: 3em !important;

        font-size: 1.7rem !important;

    }

}

.genesis_text p:not(.secCon_title) {

    line-height: 1.8;

}

@media screen and (min-width: 960px) {

    .genesisText_con {

        align-self: center !important;

    }

}

.genesisText_con {

    align-self: flex-end;

}

@media screen and (min-width: 1920px) {

    .genesis .ticker {

        max-width: 77em !important;

        margin: 0 auto !important;

    }
    
}

.genesis .ticker {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 3;

}

.closure_image {

    max-height: 35em;

    width: 100%;

    margin: 0 auto;

    object-fit: contain;

}

.landing_footer {

    background-color: var(--black);

    color: var(--white);

    padding: 2em 1em;

    background-image: url(assets/images/landing/bg-grid.svg);

    background-size: cover;

    background-repeat: no-repeat;

}

.landing_footer .footer_container {

    display: flex;

    flex-direction: column;

    gap: 1em;

    max-width: 77em;

    width: 100%;

    margin: 0 auto;

}

.footer_sect:not(.footer_sect:first-child) {

    border-top: 1px solid rgb(102, 102, 102);

}    

.footer_sect {

    padding: 2em 1em;

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: space-between;

    gap: 1.5em;

}

.footer_sect .mNav {

    display: flex;

    align-items: center;

    flex-flow: row wrap;

    gap: 1.5em;

}

.footer_sect .disclaimer {

    font-size: 0.7rem;

    color: var(--pg-error);

}

.footer_sect .disclaimer p:not(p:last-child) {

    margin-bottom: 1em;

}

/* Cookie Banner */

#cookieBox {

    background-color: var(--black);

    color: white;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

}

.cookieBox_con {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1em;

    max-width: 77em;

    margin: 0 auto;

    padding: 1em;

}

.cookieBox_con .icon {

    min-width: 1.5em;

}

#cookieConsent {

    background-color: var(--white);

    color: var(--black);

    padding: 0.5em 1em;

    border-radius: 0.25em;

} 

.tFeatures_nav {

    display: flex;

    align-items: center;

    justify-content: center;
    
    width: 100%;

    margin: 0 auto;

    padding: 0 1em;

    overflow: auto;

}

.tFeatures_nav .navSwitch {

    padding: 1em 1.5em;
    
    border-bottom: var(--pg-borderE);

}

.tFeatures_nav .navSwitch.active {

    border-bottom: 2px solid currentColor;

}

.link_btn {

    display: block;

    border: 1px solid currentColor;

    padding: 0.5em 0.8em;

    border-radius: 0.35em;

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    text-align: center;

    max-width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

/* FAQ Pages */

.faq_start {

    background-color: var(--black);

    color: var(--white);

    background-image: url(../images/landing/bg-grid.svg);

    background-repeat: no-repeat;

    background-size: cover;

}

.appBtn_con {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 2em;

    padding: 2em 1em 1em;

}

.appBtn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    max-width: 8em;

    height: 4em;

}

.appBtn img {

    object-fit: contain;

}

.faq_grp {

    border-radius: 0.25em;

    border: var(--pg-borderE);

    display: flex;

    flex-direction: column;

    gap: 2em;

    padding: 1em;

}

.faq_header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1em;

}

.faq_header .title {

    font-size: 1.5rem;

    font-weight: 600;
    
    text-transform: uppercase;

}

@media screen and (max-width: 1099px) {

    .faqBody_con {

        grid-template-columns: repeat(3, 1fr) !important;

    }

}

@media screen and (max-width: 769px) {

    .faqBody_con {

        grid-template-columns: repeat(2, 1fr) !important;

    }

}

@media screen and (max-width: 580px) {

    .faqBody_con {

        display: flex !important;

        flex-flow: row wrap;

    }

}

.faqBody_con {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 2em;

}

@media screen and (max-width: 580px) {

    .faqBody_item {

        flex-direction: column-reverse !important;

        flex: 1 1 auto;

    }


}

.faqBody_item {

    border: var(--pg-borderE);

    border-radius: 0.25em;

    padding: 1em;

    display: flex;

    flex-direction: column;

    gap: 2em;

}

.faqBody_item .img_box {

    align-self: center;

}

.faq_txBox {

    display: flex;

    flex-direction: column;

    gap: 1em;

}

.faq_txBox .title {

    font-weight: 600;

}

.faq_txBox p:not(p.title) {

    line-height: 2;

    text-align: justify;

}

.faq_info {

    margin: 0 1em 2em;

    font-weight: 600;

}

/* Page: Register */

.reg_con {

    display: flex;

    flex-flow: row nowrap;

    justify-content: center;

    min-height: 100vh;

}

@media screen and (min-width: 80em) {

    .reg_con .vbox_item {

        min-width: 57% !important;

    }
    
}

@media screen and (max-width: 80em) {

    .reg_con .viewBox {

        margin-inline-start: 0 !important;

    }
    
}

.reg_con .viewBox {

    flex: 1 1 auto;

    gap: 1.4em;

    margin-inline-start: 32%;

}

.reg_con .vbox_item.header {

    display: flex;

    flex-direction: column;

}

@media screen and (min-width: calc(80em + 1px)) {

    .reg_con .vbox_item.header .logo {

        display: none;
    
    }

}

.reg_map {

    border: var(--pg-borderC);

    border-radius: 0.5em;

    background-color: var(--pg-bgG);

    padding: 1em;

    display: flex;

    align-items: center;

    width: 100%;

}

.back_ctrl {

    display: block;

    border-right: 2px solid var(--pg-greyC);

    padding: 0.5em;

}

.reg_con .vbox_item.main {

    flex: 0 0 auto;

}

.lang_sel {

    display: flex;

    align-items: center;

    gap: 0.5em;

}

/* Sidebar */

@media screen and (max-width: 80em) {

    .sidebar {

        display: none !important;

    }
    
}

.sidebar {

    background-color: var(--pg-bgG);

    width: 32%;

    min-height: 100vh;

    display: flex;

    flex-flow: column nowrap;

    justify-content: center;

    align-items: center;

    padding: 1.2em 0.7em;

    gap: 1em;

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

}

.sb_controls {

    display: flex;

    flex-flow: row nowrap;

    align-items: center;

    padding: 0 0.5em 1em;

    gap: 0.5em;

    width: 100%;

}

.sb_control {

    height: 0.3em;

    border-radius: 0.25em;

    background-color: var(--pg-transp-bgB);

    min-width: 30%;

    flex: 1 1 auto;

}

.sb_control.active {

    background-image: -webkit-linear-gradient(left,var(--MercBlu) 0%, var(--MercBlu) 50%, var(--pg-transp-bgB) 50.001%, var(--pg-transp-bgB) 100%);

    background-repeat: no-repeat;

    background-size: 200%;

    transition-property: background-position;

    transition-duration: 1.2s 1s;

    transition-timing-function: linear ease;

    animation-name: fluid-fill;

    animation-duration: 3.5s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

.sb_control.track {

    background-image: -webkit-linear-gradient(left,var(--MercBlu), var(--MercBlu));
    
}

.sb_tbox {

    overflow: hidden;

    margin: auto 0;

    display: flex;

    align-items: center;
    
}

.sb_tbox_con {

    display: flex;

    align-items: center;

    max-width: 100%;

    overflow: visible;

}

.transbox {

    display: flex;

    flex: 1 1 auto;

    flex-flow: column nowrap;

    justify-content: center;

    align-items: center;

    gap: 2.5em;

    text-align: center;

    min-width: 100%;

    padding-top: 1em;

}

@media screen and (max-width: 1600px) {

    .transbox img {

        height: 230px;

    }

}

.transbox img {

    width: 65%;

    flex: 1 1 auto;

    object-fit: contain;

}

.transbox .title {

    font-family: var(--subFont);

    font-size: 2rem;

    font-style: italic;

    padding: 0.3em 0;

}

.transbox .desc {

    color: var(--pg-greyB);

    font-size: 1.05rem;

    padding: 1em;

}


.sb_ft_con {

    color: var(--pg-greyB);

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    justify-content: center;

    gap: 1.5em;

}

.sb_ft_con a:active {

    outline: thin dotted var(--MercBlu);

    border: none;

}

/* Aux Sidebar */

.aux_sidebar {

    position: fixed;

    right: 0;

    top: calc(49% - 0.3em);

    width: 0;

    border: var(--pg-borderE);

    border-right: unset;

    border-top-left-radius: 0.2em;

    border-bottom-left-radius: 0.2em;

    background-color: var(--pg-bgI);

    padding: 1em;

    z-index: 3000;

    display: flex;

    flex-direction: column;

    justify-content: center;

    transition: width 0.5s;

}

.aux_sidebar.access {

    width: 3.5em;

}

/* Aux Device */

.aux_device {

    position: fixed;

    top: 49%;

    right: 0.7em;

    padding: 0.5em 0.8em;

    cursor: pointer;

}

.aux_device.access {

    right: 4em;

}

.deviceA, .deviceB {

    width: 0.3em;

    height: 1.2em;

    border-radius: 99999px;

    background-color: rgb(50, 50, 50);

    transition: all 0.25s ease-in-out;
    
}

.deviceA {

    margin-bottom: -4px;

}

.deviceB {

    margin-top: -4px;

}

.aux_device:hover .deviceA {

    transform: translateY(0.15rem) rotate(15deg) translateZ(0px);

}

.aux_device:hover .deviceB {

    transform: translateY(0.15rem) rotate(-15deg) translateZ(0px);

}

.aux_device.access .deviceA {

    transform: translateY(0.15rem) rotate(-15deg) translateZ(0px);

}

.aux_device.access .deviceB {

    transform: translateY(0.15rem) rotate(15deg) translateZ(0px);

}


.link_btn {

    display: block;

    border: 1px solid currentColor;

    padding: 0.5em 0.8em;

    border-radius: 0.35em;

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    text-align: center;

    max-width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.tick {

    line-height: 1.5;

    padding: 0.3em 0;

    display: flex;

    gap: 0.3em;

}

.tick::before {

    content: url(../images/icons/tick.svg);

    height: 1em;

}

.tick.lime::before {

    content: url(../images/icons/tick-lime.svg);

    height: 1em;

}

.tick.orange::before {

    content: url(../images/icons/tick-orange.svg);

    height: 1em;

}

.tick.purple::before {

    content: url(../images/icons/tick-purple.svg);

    height: 1em;

}

.landing-title {

    font-size: 2rem;

    font-weight: 600;

}

.landing-title.v2 {

    text-align: center;

    margin: 0 auto;

}

.flxGroup {

    display: flex;

    flex-flow: row wrap;

    align-self: center;

    justify-content: center;

    gap: 1em;

    padding: 2.5em 0 0;

}

@media screen and (max-width: 700px) {

    .flxG_item {

        flex: 1 1 auto !important;

    }
    
}

@media screen and (min-width: 520px) and (max-width: 540px) {

    .flxG_item {

        flex: 1 1 30% !important;

    }
    
}

.flxG_item {

    border: 1px solid var(--pg-txt);

    padding: 2em 1em;

    display: flex;

    flex-direction: column;

    gap: 1.2em;

    align-items: center;

    justify-content: center;

    text-align: center;

    flex: 1 1 30%;

    line-height: 1.5;

    position: relative;
}

.flxG_item img {

    width: 5em;

}

.darkmode .image.integrate {

    filter: invert(1);

}

.flxG_item .title {

    font-size: 1.25rem;

}

.flxG_item .number {

    position: absolute;

    left: 0;

    top: 0;

    padding: 1em;

    font-size: 1.2rem;

    user-select: none;

}

.stat_banner {

    background-color: var(--black);

    color: var(--pg-lime);

    display: flex;

    flex-flow: row wrap;

    align-self: center;

    justify-content: center;

    gap: 1.2em;

    text-align: center;

}

.stat_banner div {

    flex: 1 1 30%;

}

.stat_banner div .landing-title {

    font-size: 2.5rem;

}

.landing_footer {

    background-color: var(--RadBlack);

    color: var(--white);

    padding: 1.5em 2em;

    padding-bottom: 2.5em;

}

.landing_footer .logo path {

    fill: var(--white);

}

.landing_footer .footer_con {

    display: flex;

    justify-content: space-evenly;

    flex-wrap: wrap;

    align-items: center;

    gap: 1em;

}

.landing_footer .footer_con .link_con {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 1.5em;

    margin-inline-start: auto;

}

/* Dashboard */

@media screen and (max-width: 63.9em) {
    
    .dash_grid {

        grid-template-areas: "header header" "main main" !important;

    }

    .mobile_ctrl {

        display: block !important;
    
    }

}

.dash_grid {

    display: grid;

    grid-template-columns: 23% 77%;

    grid-template-areas: "header header" "sidebar main";

    transition-property: grid-template-columns, grid-template-areas;

    transition-duration: 0.5s, 0.5s;

}

@media screen and (max-width: 63.9em) {

    .dash_grid.access {

        grid-template-areas: "header header" "sidebar main" !important;
    
    }
    
}

@media screen and (min-width: 63.9em) {

    .dash_grid.min {

        grid-template-columns: 3rem calc(100% - 3rem) !important;
    
    }
    
}

#dashHeader {

    grid-area: header;

    position: sticky;

    top: 0;

    z-index: 3;

}

#dashMain {

    grid-area: main;

}

#dashSidebar {

    grid-area: sidebar;

    user-select: none;

}

.dash_hbanner, .dash_sidebar {

    display: flex;
    
}

@media screen and (max-width: 375px) {

    .dash_hbanner.swap {

        gap: 1em !important;

    }
    
}

.dash_hbanner {

    background-color: var(--pg-transp-bg);

    border-bottom: var(--pg-border);

    padding: 1em 2em;

    align-items: center;

    justify-content: center;

    gap: 3em;

    height: 85px;

    /* transition: background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1); */

    transition: 0.7s ease-in-out;

}

.dash_hbanner.scrolled {

    background-color: var(--pg-bgC);

    /* padding: 0.5em 2em; */

    height: 70px;

}

@media screen and (max-width: 56.3em) {

    .dash_hbanner .logo.swap {

        display: none;
    
    }

}


.dash_hbanner .logo {

    min-width: 4.5em;

}

.dash_banner .logo .img {

    object-fit: cover;

}

@media screen and (max-width: 56.3em) {

    .salutation {

        display: none;

    }

    .salutation.swap {

        display: block;

    }
    
}

.salutation {

    margin-inline-end: auto;

}

.salutation p {

    color: var(--pg-greyB);

}

 /* App Menu */

 @media screen and (max-width: 600px) {
                
    #mobile-appMenu {

        display: block !important;

    }

}

#mobile-appMenu {

    display: none;

    position: fixed;

    bottom: 0;

    right: 0;

    left: 0;

    top: calc(100% - 3.5em);

    z-index: 2;

    background-color: var(--pg-bgC);

    border-top-left-radius: 1.25em;

    border-top-right-radius: 1.25em;

    padding: 0 1em;

    transition: 0.5s;

}

#mobile-appMenu.n_displ {

    display: none !important;

}

#mobile-appMenu.max {

    top: 45%;

    box-shadow: 4px 2px 20px 0px var(--MercBlu);

    overflow: auto;

}

#mobile-appMenu .maximizer {

    background-color: var(--pg-bgC);

    position: fixed;

    left: 5%;

    right: 5%;

}

#mobile-appMenu .maximizer_device {

    width: 2.3em;

    height: 0.8em;

    /* margin: 0.3em auto; */

    border-radius: 5em;

    background-color: var(--pg-transp-bgC);

    display: flex;

    align-items: center;

    justify-content: center;

    position: absolute;

    top: -0.25em;

    left: calc(50% - 1.25em);

    right: calc(50% - 1.25em);

    cursor: grab;

}

.appMenu {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    align-items: center;

    gap: 1em;

    margin-top: 1em;

}

.appMenu_item {

    padding: 0 0.5em 0.5em;

    flex: 1 1 auto;

    text-align: center;

    user-select: none;

    min-width: 2em;

}

.appMenu_link {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.appMenu_link .icon {

    /* width: 1.32em; */

    position: relative;

    display: flex;

}

.appMenu_link .icon .label {

    position: absolute;

    top: -10%;

    left: 120%;

}

.appMenu_link .icon svg{

    width: inherit;

    width: 1.32em;

    height: 1.2em;

}

.appMenu_link .icon svg path {

    stroke: var(--pg-greyB);

}

.appMenu_link .icon.noStroke svg path {

    fill: var(--pg-greyB);

    stroke: none;

}

.appMenu_item.active .appMenu_link .icon svg path {

    stroke: var(--MercBlu);

}

.appMenu_item.active .appMenu_link .icon.noStroke svg path {

    fill: var(--MercBlu);

    stroke: none;

}

.appMenu_item.active .appMenu_link {

    color: var(--MercBlu);

}

.appMenu_link .icon.fill svg path {

    fill: var(--pg-greyB);

    stroke: none;

}

.appMenu_item.red {

    color: var(--pg-red);

}

.appMenu_item.red svg path {

    stroke: var(--pg-red);

}

.appMenu_title {

    font-size: 0.8rem;

    max-width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}

.dash_hbanner .action_btn.rate {

    margin-inline-end: 0;

    color: var(--MercBlu);

    font-weight: 500;

}

.dash_hbanner .action_btn.rate:active svg {

    animation: none;

}

.dash_hbanner .action_btn.rate svg path {

    fill: none;

}

@media screen and (max-width:499px) {

    .ctrl_shrt {

        display: none !important;

    }
    
}

.ctrl_shrt {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 1.5em;

}

.radial_link {

    padding: 0.5em;

    border: 1px solid var(--pg-greyB);

    border-radius: 100%;

    height: 2.5rem;

    width: 2.5rem;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;

    white-space: nowrap;

}

.ctrl_shrt > a:hover {

    background-color: var(--pg-invert);

}

.ctrl_shrt .settings svg path {

    stroke: var(--pg-svg);

}

#profile_popup {

    background-color: var(--pg-bgC);

    border-radius: 0.5em;

    position: fixed;

    top: 5.5em;

    right: 2em;

    z-index: 5;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 0.25em;

    box-shadow: 0px 0px 16px 2px var(--pg-invert);

    min-width: 16em;

}

body[dir="rtl"] #profile_popup {

    right: auto;

    left: 2em;

}

#profile_popup > *:first-child {

    border-top-right-radius: inherit;

    border-top-left-radius: inherit;

}

#profile_popup *:last-child {

    border-bottom-right-radius: inherit;

    border-bottom-left-radius: inherit;

}

.pPopup_box {

    display: flex;
    
    padding: 1em 1.5em;

    gap: 0.8em;

    border-bottom: var(--pg-borderB);

}

.pPopup_box * + * * + * {

    color: var(--pg-greyB);

    font-family: monospace;

    text-transform: uppercase;

}

#profile_popup a {

    display: block;

    padding: 1em 2em;

    display: flex;

    gap: 1.3em;

}

#profile_popup a.pPopup_link {

    color: var(--RadE);

    border-top: var(--pg-borderB);

}

#profile_popup a:hover {

    background-color: var(--pg-highlightB);

}

#profile_popup a svg path {

    stroke: var(--pg-svg);

}

#profile_popup a.pPopup_link svg path {

    stroke: var(--RadE);

}

.mobile_ctrl {

    display: none;

    cursor: pointer;

}

.mobile_ctrl svg {

    min-width: 1.5em;

    fill: var(--pg-greyC);

}

.mobile_ctrl .icon {

    stroke: var(--RadE);

    display: none;

}

.mobile_ctrl.access svg {

    display: none;

}

.mobile_ctrl.access .icon {

    display: block;

}

.overflow_con.dashNav {

    height: 100%;

    margin-bottom: 15%;

}

@media screen and (min-width: 63.9em) {

    .dash_sidebar.min .overflow_con.dashNav {

        overflow: hidden;

    }

    .dash_sidebar.min:hover .overflow_con.dashNav {

        overflow: auto;

    }
}    

@media screen and (max-width: 63.9em) {

    .dash_sidebar.access {

        width: 42% !important;
    
    }
    
}

@media screen and (max-width: 60em) {
    
    .dash_sidebar.access {

        width: 77% !important;
    
    }

}

@media screen and (max-width: 30em) {
    
    .dash_sidebar.access {

        width: 92% !important;
    
    }

}

@media screen and (min-width: 63.9em) {

    .dash_sidebar.min {

        width: 3rem !important;
    
    }

    .dash_sidebar.min:hover {

        width: 23% !important;
    
    }
    
}

.dash_sidebar {

    flex-direction: column;

    position: fixed;

    width: 23%;

    background-color: var(--pg-bgC);

    border-right: var(--pg-border);

    height: 100%;

    z-index: 2;

    transition: width 0.5s;

}

.dash_sidebar nav {

    display: flex;

    flex-direction: column;

    height: 100%;

}

@media screen and (min-width: 63.9em) {

    .dash_sidebar.min .dash_nav {

        padding: 2em 0.5em !important;
    
    }

    .dash_sidebar.min:hover .dash_nav {

        padding: 2em 0.5em 2em 2em !important;
    
    }
    
}

.dash_nav {

    margin-top: 1.5em;

    list-style-type: none;

    display: flex;

    flex-flow: column nowrap;

    justify-content: center;

    gap: 1em;

    align-items: center;

    padding: 2em 0.5em 2em 2em;

}

.theme_btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1em;

    padding: 0.7em;

    margin: auto 0 0;

    position: sticky;

    bottom: 0;

    color: var(--JavaBlue);

    font-size: 0.77em;

    background-color: var(--pg-bgD);

    -webkit-tap-highlight-color: transparent;

}

@media screen and (min-width: 63.9em) {

    .dash_sidebar.min #theme span {

        display: none !important;
    
    }
    
    .dash_sidebar.min:hover #theme span {

        display: block !important;
    
    }
}

#theme svg {

    width: 1.5em;

    height: 1.5em;
    
}

#theme svg path {

    stroke: var(--pg-greyB);

    fill: var(--pg-greyB);
    
}

#theme span {

    padding: 1.2em;

    border-radius: 0.2em;

    transition: 2s;

    max-width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-wrap: nowrap;

    text-overflow: ellipsis;

}

.theme_indicator.active {

    background-color: rgb(23, 109, 183, 0.2);

}

@-moz-document url-prefix() {

    .theme_btn {

        position: fixed;
    
        bottom: 0;
    
        left: 0;
    
        display: flex;
    
        align-items: center;
    
        background-color: var(--pg-bg);
    
        border-top-right-radius: 32em;
    
        border-bottom-right-radius: 32em;
    
        overflow: hidden;
    
        color: var(--JavaBlue);
    
        font-size: 0.77em;
    
        border: 1px solid currentColor;
    
        border-left: unset;
    
        user-select: none;
    
    }
    
    .theme_btn div:first-child {
    
        width: 0.7em;

        margin-inline-start: 0.5em;
    
    }
    
    .theme_btn {
    
        display: flex;
    
        align-items: center;
    
        justify-content: center;
    
        gap: 1em;

        padding: 0;
    
    }
    
    .theme_btn#theme span {
    
        padding: 0.5em;
    
    }

    #theme svg {
        
        margin-inline-start: 0.9em;
        
    }

}

@media screen and (min-width: 63.9em) {

    .minMenu_toggle {

        position: absolute;

        top: 0.5em;

        right: 0;

        display: flex !important;

        justify-content: center;

        width: 3rem;

        padding: 0.5em 0.7em;

        cursor: pointer;

        background-color: inherit;

    }

    .minMenu_toggle svg.icon path {

        fill: var(--pg-svg);

    } 
    
}

.minMenu_toggle {

    display: none;

}

.dash_nItem {

    width: 100%;

    min-width: 2em;

}

.dash_nItem svg.icon {

    width: 1.2em;

    height: 1.2em;

}

.dash_nItem svg.icon * {

    stroke: #A3ADC2;

    stroke-width: 2px;

}

.dash_nItem svg.icon.noStroke * {

    fill: #A3ADC2;

    stroke-width: 0px;

}

@media screen and (min-width: 63.9em) {

    .dash_sidebar.min .dash_nlink span {

        display: none !important;
    
    }

    .dash_sidebar.min:hover .dash_nlink span {

        display: block !important;
    
    }
    
}

.dash_nlink {
    
    border-radius: 0.5em;

    padding: 0.5em;

    display: flex;

    gap: 0.8em;

    color: var(--pg-greyB);

    transition: 0.3s;

}

.dash_nlink.active {

    color: var(--MercBlu);

    background-color: var(--pg-highlightB);

}

.dash_nlink:hover {

    background-color: var(--pg-highlight);

}

.dash_nlink:hover svg {

    animation: axial-flip;

    animation-duration: 1.01s;

}

.dash_nlink:active {

    outline: thin dotted var(--MercBlu);

}

.label {

    font-size: 0.625rem;

    /* padding: 0.5em 0.3em; */

    padding: 0.2em 0.3em;

    margin: 0.15em;

    white-space: nowrap;

    font-weight: 700;

    border-radius: 0.25em;

    text-transform: uppercase;

    color: var(--pg-bg);

    background-color: var(--pg-txt);

}

.label.image {

    background-color: transparent;

    /* padding: 0 0.3em; */

}

.label.image img {

    height: 1.7em;

    object-fit: fill;

}

.label.green {

    background-color: var(--Verify);

}

.label.red {

    background-color: var(--pg-red);

}

.label.orange {

    background-color: var(--orange);

}

.label.blue {

    background-color: var(--JavaBlue);

}

.label.lime {

    background-color: var(--pg-lime);

    color: var(--RadBlack);
    
}

.label.v2 {

    background-color: transparent;

    border: 1px solid currentColor;

}

.label.v2.green {

    color: var(--Verify);

}

.label.v2.red {

    color: var(--pg-red);

}

.label.v2.gold {

    color: var(--orange);

}

@media screen and (max-width: 37.5em) {

    .dash_con {

        padding: 2em 0.5em !important;

    }
    
}

.dash_con {

    background-color: var(--pg-bgB);

    padding: 2em;

    min-height: 100vh;

}

@media screen and (max-width: 63.9em) {

    .dash_con.access {

        filter: blur(7.2px);

    }
    
}

@media screen and (max-width: 619px) {

    .dash_banner:not(.dash_banner.v4, .dash_banner.p-0) {

        padding: 2em 1.25em !important;

    }

}

.dash_banner {

    border: var(--pg-border);

    padding: 2em;

    margin: 3em auto;

    background-color: var(--pg-bgC);

    border-radius: 0.75em;

}

.dash_banner.v2{

    padding: 1.2em;

    margin: 2em auto;

}

.dash_banner:first-child {

    margin-top: 0;

}

.dash_banner.invisible:first-child {

    padding: 1em 2em;

    margin-bottom: 0;

}

.dash_banner.invisible:first-child .dashBanner_con.v2 {

    padding-bottom: 0;

}

.dash_banner.jzzvt {

    color: var(--white);

    border: none;

    display: flex;

    flex-direction: column;

    gap: 1.5em;

    background: url(../../assets/images/banner-gradient.svg) right bottom no-repeat rgb(26, 26, 26);

    background-size: cover;

}

.jzzvt_box.txt h4 {

    font-size: 1.7rem;

    margin-bottom: 0.25em;

}

.jzzvt_box.prime a {

    display: block;

    width: fit-content;

    padding: 0.8em 1em;

    color: var(--pg-greyB);

    background-color: var(--white);

    border-radius: 0.25em;

    margin-bottom: -3em;

    text-align: center;

}

.jzzvt_box.prime a:hover {

    background-color: rgba(241, 241, 241, 0.15);

}

.jzzvt_box.prime a:active {

    outline: thin dotted var(--MercBlu);

}

.jzzvt_icon {

    max-width: 10.5em;

    height: 6em;

    margin: auto 0 0 auto;

    background-image: url(../../assets/images/verify-crop.png);

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 0 -9%;

    position: relative;

    bottom: -2em;

    right: -2.5em;

}

/* Popup Window */

.popup_window {

    position: fixed;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    z-index: 10000000;

    background-color: var(--pg-transp-bgB);

    backdrop-filter: blur(7px);

    height: 100vh;

}

.popup_con {

    display: flex;

    justify-content: center;

    padding: 0.5em;

    height: 100vh;

}

.popup_box {

    background-color: var(--pg-bg);

    border-radius: 0.75em;

    max-width: 32em;

    /* max-height: calc(100vh - 1em); */

    /* height: 100%; */
    
    max-height: 650px;

    overflow: auto;

    position: relative;

    margin: auto;

    width: 100%;

}

@-moz-document url-prefix() {

    .popup_box:not(.noScrollBar) {

        scrollbar-width: thin;

    }
  
}

.popupBox_header {

    position: sticky;
    
    top: 0;
    
    background-color: inherit;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.popupBox_header.v2 {

    border-bottom: var(--pg-borderE);

}

.iQ_terminator {

    align-self: flex-end;
    
    cursor: pointer; 

}

.iQ_terminator:not(.iQ_terminator.wConn_navBtn) {

    background-color: var(--pg-invert); 

}

#kyc .popup_box {

    color: var(--white);

    background: url(../../assets/images/modal-gradient.svg) center bottom / cover no-repeat rgb(0, 0, 0);

}

.popup_box > * {

    padding: 1em 2em;

}

.popup_box .modal_box {

    display: flex;

    flex-direction: column;

    gap: 1em;

    padding: 1.5em 2em 0;

}

.popup_box > *:last-child {

    padding-bottom: 2.5em;

}

.modal_box .txbox > div {

    display: flex;

    gap: 0.5em;

    font-size: 1.02rem;

    margin: 0.8em 0;

}

.radial_icon {

    border-radius: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 1.8em;

    height: 1.8em;

}

.radial_icon:not(.radial_icon.iQ_terminator) {

    background-color: rgba(241, 241, 241, 0.1);

}

/* Popup ~  Support */

.supportBox_header {

    display: flex;

    align-items: center;

    font-size: 1.5rem;

    font-weight: 600;

    height: 200px;

    color: var(--white);

    background: url(../../assets/images/banner-gradient.svg) no-repeat var(--RadBlack);

}

.supportBox_peripheral {

    display: flex;

    flex-direction: column;

    gap: 1em;

    padding: 2em;

}

.periPh_box {

    background-color: var(--pg-bgD);

    border-radius: 0.25em;

    text-decoration: underline;

}

.periPh_box a {

    display: flex;

    align-items: center;

    gap: 1em;

    padding: 0.5em;

}

.periPh_box .icon {

    width: 1em;

}

.periPh_box a .dot {

    /* margin-inline-start: auto; */

    animation: 3s ease 0s infinite normal none running livePulse;

    background-color: var(--Verify);

    width: 0.5em;

    height: 0.5em;

    border-radius: 100%;

}

.periPh_box.chat {

    /* background-color: var(--JavaBlue); */

    background-color: var(--RadBlack);

    color: var(--pg-lime);

    text-transform: uppercase;

    text-decoration: none;

    font-size: 0.8rem;

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    padding: 1em 0.5em;

}

.periPh_box.chat a {

    justify-content: center;

}

.periPh_box.chat a p {

    margin: 0 auto;

}

/* Popup ~ WalletConnect */

@media screen and (max-width: 430px) {

    .popup_con.wConnector {

        align-items: flex-end !important;

        padding: 0 !important;

    }

}

.popup_con.wConnector {

    background-color: rgba(20, 20, 20, 0.8);

    align-items: center;

    /* padding: 0; */

}

@media screen and (max-width: 430px) {


    #iQ_wConnector.popup_box {

        max-width: 100% !important;

        border-bottom-left-radius: 0 !important;

        border-bottom-right-radius: 0 !important;

        margin: 0 !important;

        padding-bottom: 2em;

    }

    
}

@media (max-height: 700px) and (min-width: 431px) {

    #iQ_wConnector.popup_box {

        margin: 24px 0 !important;

    }

}    

#iQ_wConnector.popup_box {

    /* background-color: var(--black); */

    background-color: color-mix(in srgb, #fff 0%, #121313);

    /* background-color: unset; */

    color: #e4e7e7;

    border-radius: clamp(0px, calc(4px * 9), 44px);

    box-shadow: 0 0 0 1px rgba(225, 255, 255, 0.05);

    max-width: 360px;

}

#iQ_wConnector .popup_boxHeader {

    position: sticky;
    
    top: 0;
    
    background-color: inherit;
    
    display: flex;
    
    align-items: center;

    justify-content: space-between;

    padding: 1em 1.5em;

    z-index: 1;

}

#iQ_wConnector .popup_boxHeader .wConn_navBtn {

    padding: 7px;

    border-radius: calc(4px * 3);

    color: #e4e7e7;

    cursor: pointer;

}

#iQ_wConnector .popup_boxHeader .wConn_navBtn svg {

    width: 1em;

    height: 1em;

}

/* #iQ_wConnector .popup_boxHeader .wConn_navBtn.back svg {

    transform: rotate(180deg);
} */

#iQ_wConnector.popup_box .router_portal {

    /* background-color: inherit; */

    padding: 0;

    max-height: 451px;

    /* display: flex;

    transform: translateX(-100%); */
    
    overflow-x: clip;
    
    transform: translateY(0);

}

#iQ_wConnector.popup_box .router_portal[view-direction='prev'] {
    animation:
        slide-left-out 150ms forwards ease,
        slide-left-in 150ms forwards ease;
    animation-delay: 0ms, 200ms;
}

#iQ_wConnector.popup_box .router_portal[view-direction='next'] {
    animation:
        slide-right-out 150ms forwards ease,
        slide-right-in 150ms forwards ease;
    animation-delay: 0ms, 200ms;
}
@keyframes slide-left-out {
    from {
        transform: translateX(0px);
        opacity: 1;
    }

    to {
        transform: translateX(10px);
        opacity: 0;
    }
}

@keyframes slide-left-in {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-right-out {
    from {
        transform: translateX(0px);
        opacity: 1;
    }

    to {
        transform: translateX(-10px);
        opacity: 0;
    }
}

@keyframes slide-right-in {
    from {
        transform: translateX(10px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

#iQ_wConnector.popup_box .router_portal .router_track {

    display: flex;

    /* transform: translateX(-100%); */

}

.router_box.inactive * {

    display: none;

}

#iQ_wConnector.popup_box .router_portal .router_box {

    /* background-color: inherit; */

    padding: 1em;

    min-width: 100%;

}

/* #iQ_wConnector.popup_box .router_portal > * {

    background-color: inherit;

} */

#walletSrch_preloader, #wallet_srch .queryEmpty {

    height: 360px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.8em;

}

#walletSrch_preloader .loading_spinner {

    width: 2em;

    height: 2em;

    animation: 2s infinite linear rotate;

}

#walletSrch_preloader .loading_spinner svg circle {

    fill: none;

    stroke: color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent );

    stroke-width: 4px;

    stroke-dasharray: 1, 124;

    stroke-dashoffset: 0;

    stroke-linecap: round;
    
    animation: 1.5s ease-in-out 0s infinite normal none running radialDash;

}

#wallet_srch .queryEmpty {

    flex-direction: column;

    color: #949e9e;

}

#wallet_srch .queryEmpty .icon_box {

    background-color: color-mix(in srgb, #6e7777 12%, transparent);

    color: var(--white);

    border-radius: calc(4px * 3);

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

}

#wallet_srch .queryEmpty .icon_box svg {

    width: 20px;

    height: 20px;

}

/* .wallets {

    background-color: inherit;

    padding: 1.25em;

    padding: 1em;

} */

.wallet_header {

    padding: 0.5em 0;

    background-color: color-mix(in srgb, #fff 0%, #121313);

    position: sticky;

    top: 3.8em;

    /* top: 0; */

}

.wallet_header .search_bar {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 1em;

    padding: 0.18em 0.8em;

    /* background-color: rgba(20, 20, 20, 0.77); */

    /* border-radius: 25em; */

    border-radius: 0.7em;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);

    background-color: rgba(255, 255, 255, 0.05);

}

.wallet_header .search_bar .icon {

    width: 1em;

}

.wallet_header .search_bar .icon svg * {

    fill: #788181;

    /* stroke: var(--OmenXBlue); */

    /* stroke-width: 2px; */

}

.wallet_header .search_bar input {

    flex: 1 1 auto;

    padding: 0.3em 0; 

    font-size: 1em;

    background-color: transparent;

    border: none;

    outline: none;

    color: var(--pg-grey);

}

.wallet_group {

    /* padding: 1em 0.5em; */

    padding: 1em 0;

}

@media screen and (max-width: 435px) {

    .wallet_box, #walletLoader {

        grid-template-columns: repeat(auto-fill, 77px) !important;

    }
    
}

.wallet_box, #walletLoader{

    display: grid;

    grid-template-columns: repeat(auto-fill, 72px);

    /* grid-template-columns: repeat(auto-fit, minmax(4.4em, 1fr)); */

    gap: 0.7em;

    margin: 1em 0;

    max-height: clamp(360px, 400px, 80vh);

    justify-content: space-between;

}

#iQ_wConnector:not(.noScrollBar) .wallet_box, #iQ_wConnector:not(.noScrollBar)  #walletLoader {

    grid-template-columns: repeat(auto-fill, 70px);

}

.wallet {

    max-width: 10em;

    cursor: pointer;

    text-align: center;

}

.wallet .wallet_con, .pseudoWallet .wallet_con {

    border: none;

    background-color: transparent;

    color: var(--white);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-around;

    /* justify-content: stretch; */

    gap: 0.5em;

    width: 100%;

    height: 100%;

}

.wallet .wallet_con img {

    width: inherit;

    max-width: 7em;

    /* padding: 0.85em; */

    object-fit: contain;

    border-radius: 0.6em;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    padding: 0.035em;

    min-height: 3.5em;

    pointer-events: none;

}

.wallet_name {

    overflow: hidden;
    
    white-space: nowrap;
    
    overflow-wrap: break-word;

    /* text-wrap: no-wrap; */
    
    text-overflow: ellipsis;
    
    width: 100%;

    direction: ltr;

}

#wConn_initiator {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1.8em;

    padding: 40px 0 20px;

}

#wConn_initiator .loaderBox {

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;

}

#wConn_initiator .loaderBox .loader {

    position: relative;

    width: 80px;

    height: 80px;

}

#wConn_initiator .loaderBox .pseudoLoader rect {

    stroke: color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent);

}

.statusIcon {

    width: 24px;

    height: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0.25em;

    border-radius: 100%;

}

.statusIcon.error {

    background-color: color-mix(in srgb, color-mix(in srgb, #fff 0%, #4b181c) 100%, transparent);

    color: color-mix(in srgb, #fff 0%, #f25a67);

}

.statusIcon.success {

    background-color: color-mix(in srgb, #fff 0%, #1f3a28);

    color: color-mix(in srgb, #fff 0%, #26d962);

}

#wConn_initiator .loaderBox .loader .statusIcon {

    position: absolute;

    right: calc(4px * -1);

    bottom: calc(4px * -1);

    border: 2px solid #191a1a;

    width: 24px;

    height: 24px;

    opacity: 0;

    transform: scale(0.5);

    transition-property: opacity, transform;

    transition-duration: 200ms;

    transition-timing-function: cubic-bezier(0, 0, 0.22, 1);

    will-change: opacity, transform;

}

#wConn_initiator.error .loaderBox .loader .statusIcon.error {

    opacity: 1;

    transform: scale(1);

}

#wConn_initiator.error .loaderBox .loader .pseudoLoader {

    display: none;

}

/* #wConn_initiator .loaderBox .loader .icon_error svg {

    width: 14px;

} */

#wConn_initiator .loaderBox .loaderIcon {

    height: inherit;

    width: inherit;

    object-fit: contain;

    border-radius: calc(4px * 7);

    display: block;

    padding: 0;

    /* box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); */

    border: 1px solid rgba(255, 255, 255, 0.1);

}

/* #wConn_initiator .loaderBox .loaderIcon::after {

    content: "";
  position: absolute;
  inset: 0px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
} */

#wConn_initiator .txBox {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 0.5em;

    padding: 0 1em;

}

#wConn_initiator .txBox .title {

    font-size: 1.2rem;

    font-weight: 500;

}

#wConn_initiator.error .title {

    color: color-mix( in srgb, #fff 0%, #f25a67 );

}

#wConn_initiator .txBox .message {

    color: #949e9e;

    text-align: center;

    font-size: 0.85rem;

}

#wConn_initiator .altBtn_box {

    display: none;

}

#wConn_initiator.error .altBtn_box {

    display: block;

}

#wConn_initiator .wConnAlt_box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.5em 0.8em;

    border-radius: calc(4px * 4);

    background-color: rgba(225, 255, 255, 0.02);

    color: #e4e7e7;

    width: 100%;

}

.wConn_btn {

    outline: none;

    border: none;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.5em;

    padding: 0 12px;

    height: 32px;

    color: color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent);

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    background-color: transparent;

    font-size: 0.8rem;

    font-weight: 600;

    border-radius: calc(4px * 20);

}

.wConn_btn svg {

    width: 12px;

    height: 12px;

}

.snackbar_con {

    display: flex;

    justify-content: center;

    width: 100%;

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

}

.snackbar {

    display: flex;

    align-items: center;

    gap: 0.5em;

    padding: 0.35em 0.8em 0.35em 0.5em;

    box-shadow: rgba(0, 0, 0, 0.15) 0px 14px 64px -4px, rgba(0, 0, 0, 0.15) 0px 8px 22px -6px;

    border-radius: calc(4px * 20);

    border: 1px solid rgba(225, 255, 255, 0.05);

    background-color: #222525;

    width: fit-content;

    margin: 0.5em auto;

}

.snackbar_con.integrate .snackbar {

    background-color: var(--pg-bg);

    color: var(--pg-txt);

}

.snackbar[variant="error"] .statusIcon {

    background-color: color-mix(in srgb, color-mix(in srgb, #fff 0%, #4b181c) 100%, transparent);

    color: color-mix(in srgb, #fff 0%, #f25a67);

}

.snackbar[variant="success"] .statusIcon {

    background-color: color-mix(in srgb, #fff 0%, #1f3a28);

    color: color-mix(in srgb, #fff 0%, #26d962);

}

.snackbar .statusIcon::after {

    content: "";

    background-repeat: no-repeat;

    /* background-attachment: fixed; */

    background-size: contain;

    display: block;

    width: 1em;

    height: 1em;

}

.snackbar[variant="success"] .statusIcon::after {

    background-image: url(../images/icons/checkmark.svg);

}

.snackbar[variant="error"] .statusIcon::after {

    background-image: url(../images/icons/error.svg);

}

@media screen and (min-width: 34em) {

    .wallet_connPrelude{

        width: 32em;

    }

}

.panel_switches {

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    gap: 2em;

    margin: 0.5em 0;

}

.panelSwitch {

    padding: 0 1em;

    cursor: pointer;

}

.panelSwitch.active {

    border-bottom: 2px solid color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent);

    font-weight: 600;

}

.wConn_field {

    outline: none;

    border: none;

    width: 100%;

    flex: 1 1 auto;

    border-radius: 0.7em;

    padding: 1em 0.8em;

    border: 1px solid rgba(255, 255, 255, 0.07);

    background-color: rgba(255, 255, 255, 0.05);

    color: #e4e7e7;

    caret-color: color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent);

    scrollbar-width: none;


}

.mltpl .wConn_field {

    text-align: center;

}

.wConn_field.pseudoField {

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5em;

}

.wConn_field.pseudoField input {

    outline: none;

    border: none;

    width: 100%;

    flex: 1 1 auto;

    padding: 1em 0.8em;

    background-color: transparent;

    color: #e4e7e7;

    caret-color: color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent);

}

.wConn_field:focus, .wallet_header .search_bar.active, .wConn_field.pseudoField.active {

    box-shadow: inset 0 0 0 1px color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent), 0px 0px 0px 4px color-mix(in srgb, color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent) 20%, transparent);

}

.iQ_veiler {

    padding: 0.5em;

}

.iQ_veiler .toggle, .iQ_veiler.active .default {

    display: none;

}

.iQ_veiler.active .toggle {

    display: block;

}

#iQ_wConn .partB {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 1em;

}

.wallet_connPrelude {

    background-color: var(--pg-white);

    padding: 0 !important;
    
    min-width: 300px;

}

#iQ_wConnector *:checked {

    accent-color: color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent);

}

.wConn_btn.form {

    outline: none;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5em;

    padding: 1em;

    color: color-mix(in srgb, hsla(230, 100%, 67%, 1) 100%, transparent);

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    background-color: transparent;

    font-size: 0.8rem;

    text-transform: uppercase;

    font-weight: 600;

    border-radius: 0.7em;

    flex: 1 1 auto;

    width: 100%;

    height: auto;

}

.wConn_btn:hover {

    background: linear-gradient(120deg, #272a2a2f 5%, #272a2a3f 48%, #3b404049 60%, #272a2a48 70%, #272a2a57 100%);

}

#response {

    min-height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.wCP_header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1.2em;

    background-color: var(--pg-highlight);

    text-transform: uppercase;

    font-size: 0.85rem;

}

.wCP_header div:first-child {

    color: var(--pg-link);

    cursor: pointer;

    user-select: none;

}

.wCP_header div:last-child {

    color: var(--pg-red);

    cursor: pointer;

    user-select: none;

}

.wallet_preludeInfo {

    display: flex;

    flex-direction: column;

    padding: 2em 1em;

    gap: 1.5em;

}

.wPI_item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.6em;

    padding: 1em 0.5em;

    border-radius: 0.7em;

    border: 1px solid var(--pg-greyC);

}

.wPI_item.wConnStatus {

    border-color: var(--pg-red);

    color: var(--pg-red);

}

.wPI_item .wTitle {

    font-size: 0.8rem;

    margin-bottom: 1.2em;

}

.wPI_item .txLittle {

    color: var(--pg-greyB);

    font-size: 0.7rem;

}

.wPI_item .wIcon {

    width: 2em;

}

.connForm_header {

    display: flex;

    align-items: center;

    gap: 1em;

}

.connForm_header .wIcon {

    width: 2.5em;

}

#iQ_hourglass span {

    display: inline-block;

    vertical-align: bottom;

    overflow: hidden;

    animation-name: loading;

    animation-duration: 0.75s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

}

/* Ghost Wallets */

.pseudoWallet.ghost, .wallet {

    background-color: rgba(255, 255, 255, 0.02);

    border-radius: 0.8em;

    padding: 0.5em;

    max-width: 5em;

}

.pseudoWallet.ghost .glass {

    border-radius: 0.6em;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);

    background: linear-gradient(120deg, #272a2a2f 5%, #272a2a3f 48%, #3b404050 55%, #3b4040 60%, #3b404049 calc(60% + 10px), #272a2a48 calc(60% + 12px), #272a2a57 100%);

    background-size: 250%;

    animation: 3s linear 0s infinite reverse none running shimmer;

    min-height: 0.7em;

    width: 100%;

}

.pseudoWallet.ghost .img_box {

    height: 3.5em;

}

.pseudoWallet.ghost .wallet_con {

    gap: 1em;

}

.dashBanner_header {

    display: flex;

    flex-flow: row wrap;

    justify-content: space-between;

    align-items: center;

    gap: 1em;

    margin-bottom: 1.5em;

}

.dashBanner_title {

    font-size: 1.15rem;

}

.dashBanner_title span {

    color: var(--pg-greyB);

    font-size: 0.8rem;

    vertical-align: middle;

}

.dashBanner_con {

    display: flex;

    flex-flow: row nowrap;

    gap: 1.5em 1em;

    overflow-y: auto;

    padding: 1.5em 0;

}

.dashBanner_con.pdr {

    padding-right: 0.5em;

}

.dashBanner_con.wrap {

    flex-wrap: wrap;

}

/* Section ~ OVERVIEW */

.dashBanner_con.grid, .dashBanner_con.grid_2, .dashBanner_con.grid_3 {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}

.dashBanner_con.grid_2 {

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

.dashBanner_con.v2 {

    padding: 1.5em 0.5em;

}

.dashBanner_con.v3 {

    padding: 1.5em;

}

.dash_banner.invisible {

    background-color: transparent;

    border: none;

}

.option_btn {

    display: block;

    font-size: 0.8rem;

    border: none;

    padding: 0.6em 1.2em;

    border-radius: 0.25em;

    color: var(--white);

    background-color: var(--RadBlack);

    outline: none;

}

.option_btn.green {

    background-color: rgb(54, 179, 126);

}

.option_btn.red {

    background-color: rgb(255, 70, 70);

}

.option_btn.red.v2 {

    background-color: transparent;

    border: 1px solid var(--pg-red);

    color: var(--pg-red);

}

.option_btn.blue {

    background-color: var(--BaseBlue);

}

.dashB_gridItem {

    background-color: var(--pg-bgC);

    padding: 1em;

    border-radius: 0.25em;

    display: flex;

    gap: 1em;

    align-items: center;

    box-shadow: 2px 6px 15px 0 var(--pg-invert);

    animation-name: fade;

    animation-duration: 1.2s;

    transition: opacity 0.15s linear;

}

.dashB_gridItem .img_box {

    min-width: 3em;

    max-width: 3em;

    height: 3em;

    border-radius: 0.25em;

    display: flex;

}

.dashB_gridItem .img_box * {

    margin: auto;

    border-radius: inherit;

    height: 100%;

}

.dashB_gridItem .img_box img {

    object-fit: contain;

}

.dashB_gridItem .img_box svg {

    width: 2em;

}

.dashB_gridItem .img_box svg.icon {

    min-width: 2em;

    width: 100%;

}

.dashB_gridItem .img_box svg:not(svg.colorDefined, svg.rev) path {

    fill: var(--white);

}

.dashB_gridItem .img_box svg path {

    stroke: none;

}

.dashB_gridItem .img_box svg.rev path {

    stroke: var(--white);

    fill: none;

}

.dashB_gridItem .desc .title {

    color: var(--pg-greyB);

    font-size: 0.8rem;

    margin-bottom: 0.2em;

}

.dashB_gridItem .desc .cont {

    font-size: 1rem;

    font-weight: 500;

    display: flex;

    align-items: self-start;

    gap: 0.15em;

    word-break: break-all;



}

.dashB_gridItem .desc .cont .icon {

    width: 1.2em;

}

.dashB_gridItem .desc .cont .icon.noFill.red svg path {

    stroke: rgb(255, 70, 70) ;

}

.dashB_gridItem .desc .cont .icon.noFill.green svg path {

    stroke: rgb(54, 179, 126);

}

.dashBanner_con.lg .dashB_gridItem {

    min-height: 9.5em;

    flex-direction: row-reverse;

    flex-wrap: wrap;

    justify-content: space-around;

}

/* Section ~ TECHNICAL */

.dash_banner.v3 {

    padding: 0 2em;

}

@media screen and (max-width: 550px) {

    .dash_banner.v4 > *:not(.dashBanner_header) {

        padding: 2em 1em !important;

    }
    
}

.dash_banner.v4 {

    padding: 0;
    
    margin-top: 1em;

}

.dash_banner.v4 > * {

    padding: 2em;

}

.dash_banner.v4 .dashBanner_header {

    padding: 0.8em 2em;

    border-bottom: var(--pg-borderE);

    margin: 0;

}

.panels {

    width: 100%;

    overflow-x: auto;

}

.panel_con {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-bottom: 1em;

    width: 100%;

    overflow-x: auto;

}

.panel_tab {

    display: flex;

    align-items: flex-end;

    margin-bottom: 1.5em !important;

    border-bottom: var(--pg-borderE);

    min-width: 100%;

    width: fit-content;

}

.panel_trigger {

    text-align: center;

    font-size: 0.8rem;

    padding: 0.5em 1.2em;

    border-top-left-radius: 0.25em;

    border-top-right-radius: 0.25em;

    cursor: pointer;

    user-select: none;

    display: flex;

    gap: 0.3em;

    align-items: center;

}

.panel_trigger:hover {

    border: var(--pg-borderE);

    border-bottom: none;

    background-color: var(--pg-bg);

}

.panel_trigger.active {

    border: var(--pg-borderE);

    border-bottom-color: transparent;

    background-color: var(--pg-bgC);

    margin-bottom: -1px;

}

.panel_trigger .icon {

    max-width: 1.2em;

    height: 1.2em;

    object-fit: cover;

}

.panel_trigger .icon.integrate {

    fill: var(--pg-txt);

}

.panel_displ {

    /* border: var(--pg-borderE); */

    width: 100%;

    display: flex;

}

.panel {

    min-width: 100%;

    min-height: 50vh;

}

@media screen and (max-width: 550px) {

    .panel_box {

        padding: 0 !important;

    }
    
}

.panel_box {

    display: flex;

    padding: 1em;

    gap: 1em;

    justify-content: center;

}

.panel_box.grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    align-items: start;

}

.panel_box .form_con {

    max-width: 500px;

}

@media screen and (max-width: 45em) {

    .dashBanner_item {

        min-width: 42% !important;

    }
    
}

@media screen and (max-width: 31.25em) {

    .dashBanner_item {

        min-width: 72% !important;

    }
    
}

.dashBanner_item {

    border-radius: 0.6em;

    border: var(--pg-borderD);

    background-color: var(--pg-bg);

    min-width: 30%;

    flex: 1 1 auto;

    color: var(--pg-greyB);
    
    position: relative;

}

.dashBanner_con.wrap .dashBanner_item {

    width: 17rem;

    max-width: 100%;

}

.dashBanner_item > a {

    display: flex;

    flex-flow: column nowrap;

    gap: 1em;

    padding: 1em;

    border-radius: inherit;

    overflow: hidden;

    height: 100%;

}

.dashBanner_item .dshBi_icon {

    width: 2.5em;

    height: 2.5em;

}

.dashBanner_item .flag_icon {

    width: 1.8em;

    height: 1.8em;

    object-fit: cover;

    border-radius: 100%;

}

.dashBanner_item .radial_icon {

    background-color: var(--pg-highlightB);

    width: 3em;

    height: 3em;

}

.dashBanner_item .radial_icon .dshBi_icon {

    width: 1.5em;

    height: 1.5em;

}

.dashBanner_item .acct_desc {

    font-size: 1.2rem;

    animation-name: fade-in;

    animation-duration: 700ms;

}

.dashBanner_item .acct_desc, .dashBanner_item .desc {

    padding: 1em 0 0.5em;

}

.dashBanner_item .acct_desc .txLarge {

    font-size: 1.5rem;

    color: var(--pg-txt);

}

.dashBanner_item .txTitle {

    color: var(--pg-txt);

    text-transform: capitalize;

}

/* Page: Trading */

/* GRID ~ GX */

/* @media screen and (max-width: 850px) {

    .grid_gx {
    
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;    
    
    }

} */

@media screen and (max-width: 767px) {

    .grid_gx.deposit {

        grid-template-columns: 3em 1fr 1fr !important;

    }
    
}


@media screen and (max-width: 899px) {

    .dashBanner_header.mobile-nav {

        display: block !important;

    }

    .grid_gx.trading, .grid_gx.dtrading {

        /* display: grid !important;

        grid-template-columns: repeat(1, 1fr) !important;

        grid-template-areas: none !important;

        gap: 0 !important;

        row-gap: 1em !important; */

        display: flex;

        align-items: flex-start;

        overflow-x: hidden !important;

    }

    .grid_gx.trading .gridGx_box, .grid_gx.dtrading .gridGx_box {

       min-width: 100%;

    }

    .grid_gx.trading .gridGx_box.gx1, .grid_gx.trading .gridGx_box.gx3, .grid_gx.trading .gridGx_box.gx4 {

        display: none !important;
 
    }

    .grid_gx.trading .gridGx_box.gx2 .form_con {

        position: unset !important;

        top: unset !important;

    }

    .grid_gx.dtrading .gridGx_box.gx1 {

        display: none !important;

    }

    .grid_gx.dtrading #switch {

        order: -1;

    }

    #switch.sw-1 {

        order: 1 !important;

    }
    
}

.dashBanner_header.mobile-nav {

    display: none;

}

.grid_gx {

    padding: 1em 0;

    display: grid;

    /* grid-template-columns: minmax(74%, 2fr) minmax(23%, 1fr); */

    grid-template-columns: repeat(3, 1fr);

    grid-template-areas: "gx1 gx1 gx2" "gx3 gx3 gx2" "gx4 gx5 gx2";

    gap: 2em 1em;

}

.grid_gx.v2 {

    grid-template-areas: "gx1 gx2 gx2" "gx1 gx2 gx2" "gx1 gx3 gx3";

}

.gridGx_box {

    /* border: var(--pg-borderE); */

    border-radius: 0.5em;

    background: var(--pg-bgC);

    height: 100%;

    overflow: hidden;

}

.gridGx_box iframe {

    width: 100% !important;

}

.gridGx_box > * {

    border-radius: inherit;

}

.gridGx_box.gx1 {

    grid-area: gx1;

}

.gridGx_box.gx2 {

    grid-area: gx2;

    background-color: transparent;

    overflow: visible;

}

.grid_gx.v2 .gridGx_box.gx2 {

    background-color: var(--pg-bgC);

    position: sticky;

    top: 5em;

}

.gridGx_box.gx2 .form_con {

    position: sticky;

    top: 5em;

}

.gridGx_box.gx3 {

    grid-area: gx3;

}

.gridGx_box.gx4 {

    grid-area: gx4;

}

.gridGx_box.gx5 {

    grid-area: gx5;

    background-color: transparent;

}

.gx_con {

    display: flex;

    flex-flow: row wrap;

    gap: 2em;

    align-items: center;

}

.gxC_box {
    
    flex: 1 1 auto;

}

.gxC_box .cryptInfo {

    background-color: var(--pg-bgG);

    padding: 1em 1.5em;
    
    border-radius: 0.5em;

}

.gxC_box .cryptInfo > div {

    display: flex;

    gap: 0.5em;

    justify-content: space-between;

    align-items: center;

    padding: 0.5em;

    font-size: 0.8rem;

    width: 100%;

}

.gxC_box .cryptInfo > div p + p {

    font-family: var(--monoFont);

}

/* Page: Trading History */

.flx {

    display: flex;

    align-items: center;

    justify-content: center;

}

.flx.jStart {

    justify-content: start;

}

.flx.col {

    flex-direction: column;

}

.status.live {

    margin-inline-end: 0.7em;

}

.status.live .dot {

    background-color: var(--Verify);

    border-radius: 100%;

    height: 0.75em;

    width: 0.75em;

    margin: auto;

    vertical-align: baseline;

    animation: 3s ease 0s infinite normal none running livePulse;

}

/* Page: Plans */

@media screen and (min-width: 600px) {

    .dashBanner_con.grid.plans {

        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;

    }

}

.desc.plan {

    border-block: var(--pg-borderE);

    margin-block: 1em;

}

.desc.plan p {

    margin: 0.5em 0;

    font-size: 0.9rem;

}

.dashBanner_item button.form_btn {
    
    background-color: transparent;

    border: 1px solid var(--pg-txt);

    color: var(--pg-txt);

}

/* Page: Portfolio */

.asset_con {

    display: flex;

    flex-flow: row wrap;

    border-radius: inherit;

    padding: 0.5em;

}

.asset_item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.8em;

    width: 100%;

    flex-wrap: wrap;

    gap: 1em;

    /* border: var(--pg-borderE); */

    background-color: var(--pg-bgC);

    transition: all 2s;

}

.asset_item.active {

    /* background-color: var(--pg-txt);

    color: var(--pg-bg); */

    background-color: var(--pg-bgI);

}

/* .asset_item:hover {

    background-color: var(--OmenXBlue);

} */

.gx_con.v3 .asset_item {

    border-radius: 0.5em;

    background-color: var(--pg-bgC);

}

.asset_item img {

    width: 1.5em;

    height: 1.5em;

}

@media screen and (max-width: 767px) {

    .mobile-0 {

        display: none !important;

    }
    
}

.asset_item div {

    display: flex;

    align-items: center;

    gap: 0.5em;

}

.asset_item div:first-child div {

    display: flex;

    flex-direction: column;

    justify-content: center;

    text-transform: uppercase;

}

.asset_item div + div {

    font-family: var(--monoFont);

    color: var(--pg-greyB);

}

.gx_item.v2 {

    padding: 1em;

    display: flex;

    flex-direction: column;

    justify-content: center;

    /* height: inherit; */

}

.gx_title {

    color: var(--pg-greyB);

    font-style: italic;

}

.gx_con.v2 {

    flex-flow: row nowrap;

    align-items: center;

    justify-content: space-between;

    gap: 2em;

    margin: 1em 0;

}

.gx_con.v3 {

    flex-flow: column nowrap;

    align-items: flex-start;

    justify-content: center;

    gap: 1.2em;

    margin: 1em 0;

}

.asset_details {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 1.5em;

    flex: 1 1 auto;

}

.input_group {

    display: flex;

    align-items: center;

    border-radius: 0.5em;

    overflow: hidden;

    flex: 1 1 auto;

}

.input_group > * {

    padding: 0.8em 1em;

}

.input_group input {

    background-color: var(--pg-transp-bg);

    color: var(--pg-txt);
    
    border: var(--pg-i-border);

    outline: none;

    width: 100%;

    flex: 1 1 auto;

}

.input_group button {

    border: none;

    outline: none;

    background-color: var(--MercBlu);

    color: var(--RadBlack);

}

.qr_code {

    width: 12em;

    height: 12em;

    display: flex;

    align-items: center;

    justify-content: center;

   
}

.qr_code img {

    object-fit: cover;

}

/* Page: Accounts */

@media screen and (max-width: 460px) {

    .dhb_Bitem.btn_con {

        flex: 1 1 auto;

    }

    /* .dhb_Bitem {

        flex: 1 1 auto !important;

    } */

}

.dhb_Bitem {

    display: flex;

    align-items: center;

    gap: 1em;

}

.pg_btn {

    border: none;

    font-weight: 500;

    font-size: 0.8rem;

    text-align: center;

    display: flex;

    gap: 0.5em;

    align-items: center;

    justify-content: center;

    padding: 0.8em 2.2em;

    /* height: 3.5em; */

    border-radius: 0.5em;

    background-color: var(--pg-bg);

    color: var(--pg-txt);

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    flex: 1 1 auto;

}

.pg_btn.variantPlain {
    
    background-color: transparent;

    border: 1px solid var(--pg-txt);

    color: var(--pg-txt);

}

.pg_btn.variantMichb {

    color: var(--white);

    background-color: var(--MichelinBlue);

}

.pgBtn_icon path {

    stroke: var(--pg-txt);

}

.pg_btn.variantMichb .pgBtn_icon path {

    stroke: var(--white);

}

/* .pg_btn:active {

    transform: translate(-5px, 10px) scaleX(0.98);

} */

/* Popup Box ~ VariantB */

.popup_window.variantB {

    display: flex;

    align-items: center;

    justify-content: center;

}

@media screen and (max-width: 30em) {
    
    .popup_con.variantB {

        margin-bottom: 0 !important;
    
    }    
    
}

.popup_con.variantB {

    padding: 0;

    height: auto;

    display: unset;

    position: relative;

    margin: auto;

    width: 436px;

    max-width: 436px;

}

@media screen and (min-width: 768px) {

    .popup_closeBtn {

        top: 0px !important;
    
        left: calc(100% + 12px) !important;
    
    }
    
}

.popup_closeBtn {

    position: absolute;

    top: 13px;

    left: calc(100% - 3.5em);

    z-index: 30;

    background-color: var(--pg-bgI);

}

.popup_box.variantB > *:last-child {

    padding-bottom: 1.5em;

}

.popup_box.popup_box.variantB .form_item {

    gap: 1em;

    padding: 1em;

}

.popup_box.popup_box.variantB .form_item.formBtn_con {

    padding: 1em 0 0;

}

.popup_box.popup_box.variantB .form_item.formBtn_con input {

    text-transform: unset;

    font-weight: 500;

}

.popup_box.popup_box.variantB .form_item .formItem_box {

    display: flex;

    align-items: center;

    gap: 0.5em;

}

.popup_box.popup_box.variantB .form_item img.flag_icon {

    border-radius: 100%;

    width: 1.2em;

    height: 1.2em;

    object-fit: cover;

}

.popup_box.popup_box.variantB .form_item input[type*="checkbox"] {

    flex: 0 0 auto;

}

.popup_box.popup_box.variantB .form_item .formItem_box span {

    color: var(--pg-greyB);

}

.dashBanner_item.ex {

    background-color: var(--pg-bgH);

    padding: 1.2em 0.5em;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1.2em;

    overflow: hidden;

}

.acc_tab {

    display: flex;

    align-items: center;

    gap: 0.5em;

    padding: 0.3em;

    background-color: var(--pg-bgB);

    border-radius: 0.75em;

    overflow-x: auto;

    max-width: 100%;

}

.acc_switch {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5em;

    padding: 0.5em 0.8em;

    border-radius: 0.5em;

    transition: 1.7s;

    user-select: none;

}

.acc_switch:hover {

    background-color: var(--pg-highlight);

}

.acc_switch.active {

    background-color: var(--pg-bgC);

    color: var(--pg-txt);

    font-weight: 500;

    box-shadow: var(--pg-trabsp-box-shadow) 0px -0.5px 2px 0px inset, var(--pg-trabsp-box-shadowB) 0px 1px 3px 0px;

}

.acc_switch .flag_icon {

    width: 1em;

    height: 1em;

}

.acct_details {

    display: flex;

    flex-flow: row wrap;
    
    align-items: center;

    justify-content: center;

    gap: 1em;

    text-align: center;

}

.acct_actions {

    display: flex;

    flex-flow: row wrap;

    align-items: center;

    gap: 1em;

    padding: 1em 0;

}

@media screen and (min-width: 32.25em) {


    .bal_box.bdr::after {

        content: "";

        height: 100%;

        width: 1px;

        background-color: var(--pg-sep);

        position: absolute;

        left: calc(100% + 0.5em);

        top: 0;

    }
    
}

.bal_box {

    min-width: 35%;

    padding: 1em 0.5em;

    position: relative;

}

.bal_box .title::after {

    content: url(../../assets/images/info2.svg);

    margin-inline-start: 5px;

}

/* Page: Cards */

.dash_banner.gradient {

    background-image: url(../images/dashBanner-gradient.png); 
    
    background-position: right bottom; 
    
    background-repeat: no-repeat; 
    
}

.darkmode .dash_banner.gradient {

    background-blend-mode: soft-light;

}

.dashBanner_item.opaque {

    background-color: var(--pg-bg);

}

@media screen and (max-width: 374px) {

    .dashBanner_item.pdex {

        padding: 1.2em !important;
    
    }
    
}

.dashBanner_item.pdex {

    padding: 2em;

}

.dashCarousel {

    overflow: hidden;

}

.dashCarousel_con {

    display: flex;

    overflow: visible;

}

.dashCarousel_item {

    flex: 1 0 auto;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;


}

.dashCarousel_item img {

    width: 80%;

    height: 100%;

    object-fit: contain;

}

.dashCarousel_item .txbox {

    text-align: center;

    font-size: 0.85rem;

    text-transform: uppercase;


}

.carouselInd_con {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 0.5em;

    padding: 1em;

}

.carouselInd {

    height: 0.2em;

    width: 0.7em;

    border-radius: 12em;

    background-color: var(--pg-transp-bgB);

}

.carouselInd.active {

    background-image: -webkit-linear-gradient(left,var(--MercBlu) 0%, var(--MercBlu) 50%, var(--pg-transp-bgB) 50.001%, var(--pg-transp-bgB) 100%);

    background-repeat: no-repeat;

    background-size: 200%;

    width: 1.5em;

    transition-property: background-position width;

    transition-duration: 1.2s 1s;

    transition-timing-function: linear ease;

    animation-name: fluid-fill;

    animation-duration: 3.5s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

.carouselInd.track {

    background-image: -webkit-linear-gradient(left,var(--MercBlu), var(--MercBlu));

    width: 1.5em;

}

.def_txt {

    color: var(--pg-txt);

}

.def_title {

    font-size: 1.9rem;

}

.highlights {

    margin-bottom: 4em;

}

.highlights > div {

    display: flex;

    gap: 0.5em;

    align-items: center;

    margin: 1em 0; 

}

.radial_icon.blue {

    background-color: rgb(23, 109, 183, 0.2);

}

.radial_icon.xm {

    max-width: 2em;

    max-height: 2em;

    flex: 1 0 auto;

}

.jzzvt_box.prime.variantBlue a {

    width: 100%;

    background-color: var(--JavaBlue);

    color: var(--pg-bg);

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

}

.jzzvt_box.prime.varB a:active {

    transform: translate(-5px, 10px) scaleX(0.98);

}

/* Page: Reports & Statements*/

.dashBanner_item.blur p, .dashBanner_item.blur .radial_icon, .dashBanner_item.blur .txbox, .dashBanner_item.blur img {

    opacity: 0.4;

}

.state_device {

    background-color: rgba(79, 36, 128, 0.12);

    color: rgb(94, 25, 179);

    text-transform: uppercase;

    font-size: 0.8rem;

    padding: 0.5em 0.8em;

    position: absolute;

    top: 0;

    right: 0;

    border-top-right-radius: inherit;

    border-bottom-left-radius: inherit;

    display: flex;

    align-items: center;

    gap: 0.3em;

}

.state_device.blue {

    color: var(--JavaBlue);

    background-color: rgba(58, 117, 176, 0.3);

}

.state_device.green {

    color: var(--Verify);

    background-color: rgba(23, 191, 99, 0.3);

}

.state_device.gold {

    color: var(--orange);

    background-color: rgba(255, 153, 70, 0.3);

}

.state_device.grey {

    color: var(--pg-greyB);

    background-color: rgba(102, 102, 102, 0.3);

}

.state_device .icon {

    width: 1em;

}

.state_device .icon svg path {

    fill: currentColor;

    stroke: currentColor;

}

.state_device .icon.noFill svg path {

    fill: none;

}

/* Page: Transactions */

.dashBanner_header.space {

    flex-wrap: wrap;

    justify-content: space-between;

}

.dBHeader_item {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0.8em;

    flex: 1 1 auto;

}

.field_group {

    display: flex;

    align-items: center;

    gap: 0.5em;

    flex-wrap: wrap;

    flex: 1 1 auto;

}

.field_item {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    flex: 1 1 auto;

}

.form_field.smPd {

    padding: 0.75em 1em; 

}

.dashBanner_header .form_field {

    min-width: 33%;

    width: 9.5em !important;
    
    max-width: 100%;

}

/* Page: Error */

.error_con {

    min-height: 100vh;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    min-width: 100vw;

    padding: 2em;

    overflow: hidden;

}

.error_box {

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    min-width: 50%;


}

.error_box * {

    margin: 0.5em;

}

.error_box h1 {

    font-size: 5rem;

    background: linear-gradient(158deg, rgb(248, 69, 0) 0%, rgb(67, 78, 220) 90%) text;

    -webkit-text-fill-color: transparent;

}

.error_box p {

    font-family: var(--monoFont);

    max-width: 30em;

}

.error_box button {

    flex: 0 1 auto;

    width: 12.5em;

}

/* Aux Pages */

.aux_header {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    background-color: var(--pg-bg);

    z-index: 5;

}

.aux_main {

    padding-top: 5.2em;

}

.aux_header .progress {

    width: 100%;

    height: 0.25em;

    background-color: var(--pg-highlight);

    box-shadow: unset;

}

.aux_header .progress .track {

    width: 0%;

    height: 100%;

    background-image: linear-gradient(to right, rgb(164, 61, 245), rgb(16, 100, 254));


}

@media screen and (max-width: 32.8em) {

    .auxH_con {

        padding: 1.2em 1em !important;

    }
    
}

.auxH_con {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1.2em 2.5em;

    gap: 0.8em;

    border-bottom: var(--pg-borderE);

}

.auxH_box {

    display: flex;

    align-items: center;

    gap: 0.5em;

    padding: 0.3em;

}

.auxH_box .logo {

    width: 7em;

}

.auxPage_status {

    display: flex;

    align-items: center;

    gap: 0.7em;

}

.auxPage_status .status_desc p:first-child {

    color: var(--pg-greyB);

    font-size: 0.7rem;

    text-transform: uppercase;

}

.auxPage_status .status_desc p:nth-child(2) {

    font-size: 0.8rem;

}

.form_con.v2 {

    border: none;

}

.form_item.v2 {

    flex-flow: column nowrap;

    align-items: flex-start;

}

.form_item.v2 .form_info {

    margin: 0;

    text-align: left;

}

.form_item.v2 ul.form_info {

    margin-inline-start: 2em;

    list-style: square;

    color: var(--pg-greyB);

}

/* Loader */

.loader {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 5em;

    height: 5em;

    user-select: none;

    cursor: default;

}

.loader > * {

    width:  inherit;

    height: inherit;

}

.loaderIcon {

    z-index: 0;

    width: 3.7em;

    height: 3.7em;

    padding: 0.5em;

    /* border-radius: calc(4px * 7); */

}

.pseudoLoader {

    position: absolute;

    z-index: 1;

}

.pseudoLoader rect {

    fill: none;

    stroke: var(--OmenXBlue);

    stroke-width: 4px;

    stroke-linecap: round;

    animation-name: dash;

    animation-timing-function: linear;

    animation-duration: 1s;

    animation-iteration-count: infinite;

}

/* Progress */

.progress {

    width: 100%;

    border-radius: 0.25em;

    overflow: hidden;

    background-color: var(--pg-invert);

    /* box-shadow: 0px 0px 2px 1px var(--pg-txt); */

}

.progress-track {

    width: 0;

    /* height: 0.3em; */

    height: 0.5em;

    background-image: url(../images/icons/loading.gif);

    background-repeat: no-repeat;

    background-size: 112%;

    background-position: center;

    /* background-image: linear-gradient(to right, rgba(17, 27, 33, .5) 0%, rgba(17, 27, 33, .5) 33.33%, rgba(17, 27, 33, 0) 44.1%, rgba(17, 27, 33, 0) 55.8%, rgba(17, 27, 33, .5) 66.66%, rgba(17, 27, 33, .5) 100%);

    animation: 7s linear 0s infinite reverse none running shimmer;

    background-size: 250%; */

    /* border-radius: inherit; */

    user-select: none;

}

.iQ_track.progress {

    transition: width 2s ease-in-out;

}

/* Tables */

.tableSwitch {

    transition: 0.5s;

    border: 1px solid currentColor;

    border-radius: 0.25em;

    padding: 0.25em;

    border-bottom: none;

    flex: 1 1 auto;

    text-align: center;

}

.tableSwitch.active {

    font-weight: 600;

    color: var(--MercBlu);

    border-bottom: 2px solid currentColor;

}

.table_con {

    width: 100%;

    overflow-x: auto;

    border-radius: 0.75em;

    border: var(--pg-borderE);

    background-color: var(--pg-bgE);

}

table {

    width: 100%;

    border-collapse: collapse;

    text-align: center;

}

@media screen and (min-width: 767px) {

    table .flx-cell {

        display: flex;
        
        align-items: center;
        
        justify-content: center;
    
    }    
    
}

thead {

    background-color: var(--pg-thead);

    color: var(--pg-txt);

    /* position: sticky;

    top: 6em; */


}

tbody {

    background-color: var(--pg-bgE);

}

tr {

    border-top: var(--pg-borderE);

    border-bottom: var(--pg-borderE);

}

thead tr:first-child {

    border-top: none;

}

/* tbody tr:last-child {

    border-bottom: none;

} */

tbody tr:hover {

    background-color: var(--pg-highlight);

}

td, th {

    padding: 0.8em 0.5em;

}

td span, td button {

    padding: 0.5em 1em;

    border-radius: 0.25em;

    /* color: var(--white); */

    /* background-color: var(--Ink); */

}

td span.green, td span.red {

    font-size: 0.8rem;

    display: inline-block;

    /* width: 6em; */

    background-color: transparent;

}

td span.green {

    color: rgb(54, 179, 126);

}

td span.red {

    color: rgb(255, 70, 70);

}

td button {
    
    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    outline: none;

    border: none;

}

td button:active {

    transform: translate(-5px, 10px) scaleX(0.98);

}

td:last-child, th:last-child {

    border: 0;

}

/* tbody tr:last-child {

    border: 0;

} */

th {

    padding: 0.7em 0.5em;

    text-transform: uppercase;

    font-weight: 400;

    font-size: 0.8rem;

}

tr.cell_empty {

    height: 50vh;

    color: var(--pg-greyB);

}

tr.cell_empty div {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.5em;

    border-bottom: none;

}

tr.cell_empty svg path {

    fill: var(--pg-greyC);

}

tr.cell_empty div p {

    width: 9em;

}

/* Table Navigation */

.table_nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0.5em 1.2em;

    background-color: var(--pg-bgC);

    width: 100%;

    position: sticky;

    left: 0;

    right: 0;

}

.table_nav button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5em;

    /* width: 7em; */

    border: 1px solid var(--pg-txt);

    color: var(--pg-txt);

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    background-color: transparent;

    padding: 0.6em 0.7em;

    border-radius: 0.5em;

    font-weight: 500;

}

.table_nav button svg path {

    stroke: var(--pg-txt);

}

.table_nav button:disabled {

    opacity: 0.3;

    cursor: none;

}

.darkmode .table_nav button:disabled {

    opacity: 0.1;

}

/* Skeleton Loader ~ Table */

table.skeleton {

    min-height: 50vh;

    user-select: none;

    cursor: none;

}

table.skeleton tr:hover {

    background-color: initial;

}

table.skeleton .skeleton_cell {

    display: block;

    height: 1.2em;

    border-radius: 0.25em;

    background-color: var(--pg-bg);

    background-image: linear-gradient(90deg, var(--pg-bg), var(--pg-highlight), var(--pg-bg)) !important;

    animation-name: skeleton-fluid;

    animation-duration: 1.2s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

}

table.skeleton th, table.skeleton td {

    min-width: 9em;

}

table.skeleton td:last-child, table.skeleton th:last-child {

    min-width: 2.5em;

    width: 2.5em;
    
    max-width: 2.5em;

}

/* Badges */

.badge.pill {

    display: block;

    padding: 0.05em 1em;

    font-size: 0.6rem;

    border-radius: 32em;

    color: var(--MercBlu);

    background-color: rgba(23, 109, 183, 0.2);

    border: 1px solid var(--MercBlu);

    margin: 0 auto;

    width: fit-content;

}

.primeStatus {
    
    /* color: rgb(238, 49, 43); */

    color: rgb(54, 179, 126);
    
    padding: 0.5em 0.25em;
    
    font-size: 0.8rem;
    
    font-family: var(--baseFont);
    
}

.primeStatus.red {
    
    color: rgb(238, 49, 43);
}

/* Animations */

.dots {

    display: inline-block;

    vertical-align: bottom;

    overflow: hidden;

    animation-name: loading;

    animation-duration: 1.8s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-in-out;

    letter-spacing: 3px;

    text-align: start;

}

.spin svg {

    animation: spin;

    animation-duration: 0.8s;

}

.spinn:hover svg {

    animation: spin;

    animation-duration: 1.8s;

}

.rotate {

    animation: rotate;

    animation-duration: 1s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

.axialF:hover svg {

    animation: axial-flip;

    animation-duration: 1.5s;

}

.shake:hover svg {

    animation: shake;

    animation-duration: 1.5s;

}

.fade {

    animation: fade;

    animation-duration: 1.5s;

    transition: opacity 0.15s linear;

}

.fade_in {

    animation-name: fade;

    animation-duration: 1.3s;

}

.float_up {

    animation-name: float;

    animation-duration: 1.3s;

}

@keyframes loading {

    from {

        width: 0;

    }

    to {

        width: 3ch;

    }
    
}

@keyframes spin {

    0% {

        transform: rotate(0deg); 

    }

    5% {

        transform: rotate(90deg);

    }

    10% {

        transform: rotate(180deg);

    }

    20% {

        transform: rotate(270deg);

    }

    25% {

        transform: rotate(360deg);

    }

    100% {

        transform: rotate(-90deg);

    }
    
}

@keyframes axial-flip {

    0% {

        transform: rotate3d(1, 1, 1, 0deg); 

    }

    5% {

        transform: rotate3d(1, 1, 1, 90deg);

    }

    10% {

        transform: rotate3d(1, 1, 1, 180deg);

    }

    20% {

        transform: rotate3d(1, 1, 1, 270deg);

    }

    25% {

        transform: rotate3d(1, 1, 1, 360deg);

    }

}

@keyframes shake {

    0% {

        transform: translateX(0);

    }

    25% {

        transform: translateX(-10px) rotate(-5deg);

    }

    50% {

        transform: translateX(10px) rotate(5deg);

    }

    75% {

        transform: translateX(-10px) rotate(-5deg);

    }

    100% {

        transform: translateX(0);

    }

}

@keyframes fade {

    0% {

        opacity: 0.3;

    }

    50% {

        opacity: 0.7;

    }

    100% {

        opacity: 1;

    }

}

@keyframes float {

    0% {

        transform: translateY(1000%);

    }

    100% {

        transform: translateY(0%);

    }

  
}

@keyframes fade-in {

    0% {

        opacity: 0;

        transform: translateY(1000%);

    }

    100% {

        opacity: 1;

    }

  
}

@keyframes fluid-fill {

    0% {

        background-position: 100% 0;

    }
    
    100% {

        background-position: 0 0;

    }
}

@keyframes skeleton-fluid {

    0% {

        background-position: -200px 0px;

    }

    100% {

        background-position: calc(200px + 100%) 0px;

    }
    
}

@keyframes shimmer {

    0% {

        background-position: -250% 0;
        
    }
    
    100% {

        background-position: 250% 0;
        
    }
    

}

@keyframes rotate {

    /* 0% {

        transform: rotate(0deg);

    } */
    
    100% {

        transform: rotate(360deg);

    }
}

@keyframes radialDash {

    0% {

        stroke-dasharray: 1, 124;

        stroke-dashoffset: 0;

    }
    
    50% {

        stroke-dasharray: 90, 124;

        stroke-dashoffset: -35;

    }
    
    100% {

        stroke-dashoffset: -125;

    }

}

@keyframes live {

    0% {

        transform: scale(0.25);

    }

    50% {

        transform: scale(0.7);

        background-color: unset;

    }
    
    100% {

        transform: scale(1.1);

    }
}

@keyframes dash {

    100% {

        stroke-dashoffset: 0;

    }
    
}

@keyframes livePulse {

    0% {

        box-shadow: 0px 0px 0px 0px var(--Verify);

    }

    70% {

        box-shadow: 0px 0px 0px 7px rgba(23, 191, 99, 0);

    }

    100% {

        box-shadow: 0px 0px 0px 0px rgba(23, 191, 99, 0);

    }
    
}

@keyframes JumpPulse {

    0% {

        opacity: 0;

        transform: translate(0px, 100%)

    }

    70% {

        transform: translate(0px, -10px) rotate(-5deg);

    }

    100% {

        opacity: 1;

        transform: translate(0px, 0) rotate(-5deg);

    }

}

@keyframes negativeFlash {
    
    0%, 100% {

        color: var(--pg-error);

    }

    50% {

        color: inherit;

    }

}

@keyframes positiveFlash {
    
    0%, 100% {

        color: var(--Verify);

    }

    50% {

        color: inherit;

    }

}

/* JS CONTROL IDENTIFIERS */

#iQ_slider {

    transition: 1.2s;

}

.iQ_panelSwitch {

    user-select: none;

    cursor: pointer;

}

.n_displ, *.n_displ {

    display: none !important;

}

.inaccessible {

    opacity: 0.3;

    user-select: none;

    cursor: none;

    pointer-events: none;

}

.form_btn.inaccessible {

    opacity: 0.5;

    outline: 2px solid var(--JavaBlue);

    outline-offset: 0.25em;

    background-color: var(--JavaBlue);

}

.form_btn.green.inaccessible {

    background-color: rgb(54, 179, 126);

    outline: 2px solid rgb(54, 179, 126);

}

.form_btn.red.inaccessible {

    background-color: rgb(255, 70, 70);

    outline: 2px solid rgb(255, 70, 70);

}

.spin_icon {

    margin: auto;

    width: 1.2em;

    height: 1.2em;

    animation-name: rotate;

    animation-duration: 1s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

/* Balance Display Toggle Button */

#iQ_veil svg.toggle, #iQ_veil.active svg.default {

    display: none;

}

#iQ_veil.active svg.toggle {

    display: block;

}

/* Page: Pay */

@media screen and (max-width: 696px) {

    .pay_con {

        gap: 1.2em !important;

    }

    .pay_box {

        order: 2;

    }

    .pay_box.pay_options {

        order: 1;

    }

    .payOptions_con {

        flex-flow: row wrap !important;

    }

    .pay_option {

        padding: 0.5em !important;

        border: thin solid currentColor;

    }

}

.pay_con {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2em;

    align-items: start;

    justify-content: center;

}

.pay_box {

    padding: 1.2em;

    background-color: var(--pg-transp-bg);

    border-radius: 0.8em;

}

.payBox_header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: var(--pg-borderE);

}

.payBox_header, .payBox_main {

    padding: 0.8em 0.5em;

}

.pBH_item {

    display: flex;

    flex-direction: column;

    gap: 0.5em;

}

.pBH_item .logo {

    max-width: 7em;

}

.pBH_item p {

    text-align: right;

    max-width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}

.pBH_item .price {

    font-size: 1.2rem;

    font-weight: 600;

}

.pay_box.pay_options {

    background-color: var(--pg-bgC);

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

    border: none;

    border-radius: 0.5em;

    padding: 2em;

    position: relative;

}

.pay_help {

    display: flex;

    gap: 0.35em;

    align-items: center;

    margin-inline-start: auto;

    position: absolute;

    top: 0.5em;

    right: 0.5em;

    width: fit-content;

    color: var(--MercBlu);

}

.payBox_con .title {

    text-transform: uppercase;

    text-align: center;

    font-size: 0.8rem;

    padding: 1em;

}


.payOptions_con {

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 1em;

}

.pay_option {

    padding: 1em;

    display: flex;

    align-items: center;

    border-radius: 0.5em;

    cursor: pointer;

}

.pay_option:hover {

    background-color: var(--pg-highlightB);

}

.pay_option.active {

    background-color: rgb(23, 109, 183, 0.2);

    color: var(--MercBlu);

}

.form_field.pseudo, .form_field.pseudoField {

    padding: 0;

    display: flex;

    align-items: center;

    gap: 0.5em;

}

.form_field.pseudo input, .form_field.pseudoField input {

    padding: 1em 0.75em;

    background-color: transparent;

    width: 100%;

    border: none;

    outline: none;

    font-size: 0.875rem;

    color: var(--pg-txt);

}

.form_field.pseudo > *:last-child:not(input) {

    margin-inline-end: 0.25em;

}

.form_field.pseudo .icon {

    min-width: 1.3em;

    width: 3em;

    margin: auto 0.3em;

}

.form_field.pseudo .icon.no_fill svg path {

    stroke: var(--pg-svg);

    fill: none;

}

.form_field.pseudo .icon svg.qr path {

    fill: var(--pg-txt);

}

.address_copy {

    display: flex;

    align-items: center;

    color: var(--white);

    background-color: var(--MercBlu);

    border: none;

    outline: none;

    border-radius: 0.5em;

    padding: 0.1em 0.5em;

    font-size: 0.6rem;

    text-transform: uppercase;

    width: 5em;

    cursor: pointer;

    overflow: hidden;

    max-width: 100%;

    white-space: nowrap;

    text-overflow: ellipsis;

}

.address_copy .icon svg path {

    stroke: currentColor;

}

.form_field.pseudo .address_copy {

    background-color: transparent;
    
    color: var(--pg-txt);
    
    padding: 0.3em;
    
    border: none;
    
    outline: none;
    
    display: flex;
    
    align-items: center;

    font-size: 0.8rem;

}

.payAcc_details {

    display: flex;

    flex-direction: column;

    gap: 1em;

    padding: 2em;

    margin: 0.5em 0;

    background-color: var(--pg-bgC);

    border: var(--pg-borderE);

}

.accDetail_item {

    display: flex;

    align-items: flex-end;

    flex-wrap: wrap;

    gap: 1.2em;

    padding: 1em;

}

.accDetail_item .title {
    
    font-size: 0.8rem;

    text-transform: uppercase;

    padding: 0.5em;

    text-align: start;

}

.accDetail_item .desc {

    font-size: 1.2rem;

    font-weight: 600;

    padding: 0 0.5em;

}

.accDetail_item input.integrate {

    font-size: inherit;
    
    font-weight: inherit;
    
    color: inherit;
    
    background: transparent;
    
    border: none;
    
    width: inherit;
    
    padding: inherit;
    
    text-align: inherit;
    

}

.form_item.v3 {

    flex-wrap: nowrap;
    
    padding: 0;

    width: 100%;

}

.form_item.v3 .form_field.pseudo {

    width: 100%;

    justify-content: space-between;

}

.optBtn_box .opt_btn {

    background-color: black;

    padding: 0.8em 0.5em;

    border-radius: 0.5em;

    display: flex;

    align-items: center;

    justify-content: center;

}

.opt_btn.light {

    background: white;
    
    border: 1px solid;
    
}

.optBtn_box .opt_btn img {

    height: 1.5em;

    object-fit: cover;

}

.optBtn_box .paypal_btn {

    background-color: #ffc439;

}

.opt_btn:active {

    box-shadow: var(--pg-red) 0px 0px 0px 2px inset, var(--pg-bgG) 0px 0px 0px 4px inset;

}

.opt_btn [type="radio"] {

    display: none;

}

.opt_btn.selected {

    outline: 3px solid var(--OmenXBlue);

    outline-offset: 3px;

}

.exx {

    padding: 0.3em;

    display: flex;

    align-items: center;

    gap: 0.5em;

}

.exx::after, .exx::before {

    content: "";

    width: 100%;

    border-bottom: var(--pg-borderE);

}

.exp-time {

    margin: auto;

    font-size: 0.7rem;

    cursor: none;

    background-color: var(--highlight);

}

#proof-displ, #qr-displ {

    width: 100%;

    padding: 0.5em;

    display: flex;

    align-items: center;

    justify-content: center;

}

/* #proof-displ img:not([src='']), #qr-displ img:not([src='']) {

    width: inherit;

    max-height: 15em;

    object-fit: cover;

} */

#qr-displ img:not([src='']), #proof-displ img:not([src='']) {

    width: 15em;

    height: 15em;

    object-fit: contain;

}

#proof-displ img:not([src='']) {

    width: 100%;

}

/* Pages: Profile / Settings */

.dB_boxAccess {

    display: flex;

    align-items: center;

    gap: 0.3em;

    padding: 0.35em 0.5em;

    background: var(--pg-invert);

    width: fit-content;

    font-weight: 600;

    font-size: 0.8rem;

    border-radius: .25em;

    margin: 1.5em 0;

    cursor: pointer;

}

.dB_boxAccess svg {

    width: 1.5em;

}

.dB_boxAccess.inactive {

    user-select: none;

    opacity: 0.5;

}

.dB_boxAccess.status {

    text-transform: uppercase;

}

.dB_boxAccess.status.red {

    color: var(--pg-error);

}

.dB_boxAccess.status.green {

    color: var(--Verify);

}

.page_panelTab {

    display: flex;

    align-items: center;

    gap: 0.8em;

    padding: 0.5em;

    border-radius: 0.5em;

    background-color: var(--pg-bgB);

    overflow-x: auto;

}

.page_panelSwitch{

    padding: 0.5em 0.8em;

    border-radius: 0.5em;

    min-width: fit-content;

    text-align: center;

    cursor: pointer;

}

.page_panelSwitch:hover{

    background-color: var(--pg-highlight);

}

.page_panelSwitch.active{

    background-color: var(--pg-bgC);

    font-weight: 500;

    color: var(--pg-txt);

    box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 2px 0px inset, rgba(255, 255, 255, 0.3) 0px 1px 3px 0px inset;

}

.dashBanner_box{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2em;

    border: var(--pg-borderE);

    border-radius: 0.5em;

    padding: 0.8em;

}

.dashBanner_box.vFlx{

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.8em;

    flex-flow: row wrap;

}

.dB_boxItem.vFlx{

    display: flex;

    align-items: center;

    gap: 0.25em;

    flex-flow: row wrap;

}

.dB_boxItem.user_box .radial_link.variantBlue{

    border: none;

    background-color: var(--BaseBlue);

    color: var(--white);

}

.radial_link.image {

    padding: 0;

}

.radial_link.image img {

    width: inherit;

    height: inherit;

    object-fit: cover;

    border-radius: inherit;

}

.user_box .user_desc p {

    color: var(--pg-greyB);

    font-size: 0.8rem;

    font-family: var(--monoFont);

}

.verif {

    display: flex;

    align-items: center;

    gap: 0.25em;

    font-size: 0.8rem;

    padding: 0.25em 0.5em;

    border-radius: 32em;

    background-color: rgb(23, 109, 183, 0.2);

    color: var(--JavaBlue);

}

.verif .icon {

    width: 1.5em;

}

.verif.verified {

    background-color: rgba(23, 191, 99, 0.2);

    color: var(--Verify);

}

.verif.error {

    background-color: rgb(249, 58, 55, 0.2);

    color: var(--pg-error);

}

.dB_boxHeading {

    text-transform: uppercase;

    color: var(--pg-greyB);

    letter-spacing: 1px;

    font-size: 0.8rem;

    padding: 0.5em 0;

}

.form_item.mn{

    flex-wrap: nowrap;

    align-items: center;

    gap: 1em;

}

.form_item.mn .form_field{

    width: 7em;

    max-width: fit-content;

    padding: 0.5em 0.7em;

}

.form_item.mn .form_btn{

    width: fit-content;

    max-width: fit-content;

    padding: 0.7em;

}

/* Page: Feedback */

.animate-img {

    animation: 2.3s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%) 0s 3 normal none running JumpPulse;

}

.animate-img.shake {

    animation: 2.5s ease 0s 3 normal none running shake;

}

.animate-img svg {

    min-width: 2.5em;

}

.detail_con {

    display: flex;

    flex-flow: column nowrap;

    align-items: center;

    justify-content: center;

    gap: 1.2em;

    /* border-inline: 1px solid currentColor; */

    font-size: 0.8rem;

}

.detail_conBox {

    /* border-block: 1px solid var(--pg-txt); */

    width: 100%;

    /* border-radius: 0.5em;

    overflow: hidden; */

}

.detail_conBox > * {

    padding-inline: 1em;

}

.detail_conBox > .title {

    padding-block: 0.5em;

    /* border-block-end: 1px solid currentColor; */

    background-color: var(--pg-transp-bg);

}

.detail_conBox > .detail_grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 0.5em;

    padding: 1em 0.5em;

}

.detailGrid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 1em;

}

.detailGrid_box {

    padding: 1em;

    border-radius: 0.35em;

    border: var(--pg-borderE);

    background-image: linear-gradient(150deg, var(--pg-transp-bg)50%, var(--pg-transp-bgB) 100%);
    
    backdrop-filter: opacity(0.5) blur(10px);

}

.detailGrid_box .title {

    font-size: 0.8rem;

    text-transform: uppercase;

}

.detailGrid_box .detail_grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));

    gap: 0.5em;

    padding: 1.2em 0.3em;

}

.pointer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.35em;

    text-decoration: 2px underline;

    /* text-decoration-thickness: 2px; */

}

.pointer::before {

    content: url(../images/icons/pointer.svg);

    display: block;

    width: 1.35em;

    animation-name: pointer;

    animation-duration: 1.5s;

    animation-iteration-count: infinite;

    animation-timing-function: ease-out;
    
}

@keyframes pointer {

    100% {

        transform: translateX(-10px);

    }
    
}

/* LOGO */

.dash_hbanner .logo {

    height: 3em;

    transition: 0.5s;

}

.dash_hbanner.scrolled .logo {
 
    height: 2em;

}    

.logo img {

    object-fit: contain;

}

.logo img.dark {

    display: none;

}

.darkmode .logo img.light {

    display: none;

}

.darkmode .logo img.dark {

    display: inline-block;

}

/* PRELOADER */

#preloader {

    position: fixed;

    top: 0;
    
    left: 0;

    right: 0;

    bottom: 0;

    background: var(--pg-bg);
    
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 1em;

    user-select: none;

    cursor: progress;

    z-index: 1000000000000000000000000;

}

.propeller {

    border: 5px solid currentColor;

    border-top-color: transparent;

    border-bottom-color: transparent;

    width: 2.5em;

    height: 2.5em;

    border-radius: 100%;

    animation-name: rotate;

    animation-duration: 1s;

    animation-timing-function: linear;

    animation-iteration-count: infinite;

}

/* Notification Box */

@media screen and (max-width: 639px) {

    .modal_box.notify {

        padding: 1.25em 1.3em 2.5em !important;

    }

} 

.modal_box.notify {

    padding: 1.25em 2em 2.5em;

}

.msgHold {

    display: flex;

    align-items: flex-start;

    gap: 1em;

}

.msgHold .icon {

    color: var(--pg-error);

    min-width: 1.5em;

}

.msgHold .icon svg {

    width: 3em;

    height: 3em;

}

.msgHold .title {

    font-weight: 500;

    font-size: 1.2rem;

    margin-bottom: 0.5em;

}

/* Notification Marquee */

.notification_bar {

    display: flex;

    flex-direction: column;

    gap: 0.5em;

    padding: 0.5em 0;

}

.notification_box {

    color: var(--pg-bg);

    background-color: var(--pg-txt);

    padding: 0.2em 1em;

    border-radius: 0.5em;

    font-size: 0.8rem;

    font-weight: 600;

    font-family: Arial, Helvetica, sans-serif;

}

.notification_box[variant*='warning'] {

    background-color: var(--orange);

    color: var(--RadBlack);

    overflow: hidden;

}

.notification_content {

    display: inline-block;

    padding-left: 100%;

    animation: marquee 40s linear infinite;

    white-space: nowrap;

}

@keyframes marquee {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(-100%);
    }
}

/* Tooltip */

.tooltip {

    position: relative;

    cursor: pointer;

}

.tooltip_con::before {

    content: "";

    position: absolute;

    background-color: inherit;

    clip-path: polygon(0px 0px, 100% 100%, 0px 100%);

    top: -2px;

    left: 50%;

    width: 0.5em;

    height: 0.5em;

    transform: rotate(135deg);

}

.tooltip_con {

    overflow: visible;

    display: none;

    flex-flow: row wrap;

    gap: 0.5em;

    align-items: center;

    background-color: var(--RadBlack);

    /* padding: 0.5em; */

    padding: 0.25em;

    text-align: center;

    position: absolute;

    transform: translateX(50%) translateY(2px);

    border-radius: 0.25em;

    /* width: 100%; */

    width: 5em;

    /* max-width: 200px; */

    z-index: 2;

}

.tooltip_con.visible {

    display: flex;

}

.tooltip_item {

    padding: 0.25em;

    /* background-color: rgba(220, 224, 231, 0.12); */

    color: var(--white);

    font-size: 0.8em;

    border-radius: 0.25em;

    flex: 1 1 auto;

}

.flashPositive, .flashNegative {


    background: linear-gradient(to right, 
    #E40303, /* Red */
    #FF8C00, /* Orange */
    #FFED00, /* Yellow */
    #008026, /* Green */
    #004DFF, /* Blue */
    #8B00FF  /* Purple */
  );

    background-size: 100%;
  
    background-clip: text;

    -webkit-text-fill-color: transparent;

    font-weight: 600;

    font-size: 1rem;

    animation-name: gay;

    animation-duration: 1s;

    animation-iteration-count: infinite;

}

@keyframes gay {

    0% {

        background-size: 50%;

    }

    100% {

        background-size: 100%;

    }
    
}