/* @import url('https://fonts.googleapis.com/css2?family=Bitter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */




.secondary-nav__item {
    display: flex;
    font-family: Inter, sans-serif;
    font-weight: 500;
    align-items: center;
    gap: .625rem;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    margin-left: -.875rem;
    margin-right: -.875rem;
}

.secondary-nav__item:not(.secondary-nav__item.active, .secondary-nav__item--disabled):hover :after {
    content: "";
    position: absolute;
    left: .375rem;
    top: -.375rem;
    width: calc(100% - .75rem);
    height: 100%;
    background: var(--color-nav-secondary--hover-background);
    border-radius: 6px;
    z-index: -1;
}

.secondary-nav__link {
    transition: color .15s;
    display: flex;
    position: relative;
    color: var(--color-text);
    padding-bottom: .875rem;
    line-height: 1;
    padding-left: .875rem;
    padding-right: .875rem;
    -webkit-user-select: none;
    user-select: none;
}

.secondary-nav__item.active a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: .875rem;
    width: calc(100% - 1.75rem);
    height: 2px;
    background-color: var(--color-primary);
}

.secondary-nav__item.active .secondary-nav__link,
.secondary-nav__item.active .secondary-nav__link:hover {
    color: var(--color-primary--link);
}

rx-top-bar-divider {
    width: 1px;
    background-color: var(--color-background--layer-40);
    box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
    height: 2rem;
    border-right: 1px solid var(--color-border);
    margin: 0px 5px;
    display: block;
}

rx-main-nav-divider {
    box-shadow: 0 1px 3px #0000001a, 0 1px 2px #0000000f;
    /* border-top: 1px solid var(--color-background--layer-40); */
    margin: 10px 0px;
    display: block;
    height: 1px;
    background: var(--color-border);
    opacity: .6;
}

:root {
    --primary: #100f0f;
    --second: #fcfcfc;
    --primary-grey: #16191c;
    --secondary-grey: #9aa4af;
    --grey: #5c5e5f;
    --border: #2d3032;
    --main: #d50c2d;
    --purple: rgb(114, 64, 200);
    --pink: #bf1879;
    --green: rgb(46, 153, 128);
    --orange: #ef8b09;
    --nav: rgba(16, 15, 15, 0.5);
    --primary-op: #100f0f10;
    --nav-text: rgb(76, 76, 76);
}

[data-theme="light"] {
    --primary: rgb(255, 255, 255);
    --second: #100f0f;
    --secondary-grey: #8494a1;
    --primary-grey: #f8fafc;
    --border: #e2e3e3;
    --grey: #5c5e5f;
    --main: #3C8CE6;
    --purple: rgb(114, 64, 200);
    --pink: #bf1879;
    --green: rgb(46, 153, 128);
    --orange: #ef8b09;
    --nav: rgba(255, 255, 255, 0.5);
    --primary-op: rgba(255, 255, 255, 0.1);
    --nav-text: rgb(184, 184, 184);

}

._cw {
    color: rgb(255, 255, 255);
}

._bgw {
    background-color: rgb(255, 255, 255);
}

._cb {
    color: #100f0f;
}

._bgb {
    background-color: #100f0f;
}

._cg {
    color: #f8fafc;
}

._bgg {
    background-color: #f8fafc;
}

._cmain {
    color: #3C8CE6;
}

._bgmain {
    background-color: #3C8CE6;
}

._cgreen {
    color: rgb(46, 153, 128);
}

._bggreen {
    background-color: rgb(46, 153, 128);
}

._cpurple {
    color: rgb(114, 64, 200);
}

._bgpurple {
    background-color: rgb(114, 64, 200);
}

._cpink {
    color: #bf1879;
}

._bgpink {
    background-color: #bf1879;
}

._corange {
    color: #ef8b09;
}

._bgorange {
    background-color: #ef8b09;
}

._cdg {
    color: #6a7782;
}

._bdg {
    background-color: #8494a1;
}

._border {
    border: 1px solid var(--border) !important;
}

._border-right {
    border-right: 1px solid var(--border) !important;
}

.hide {
    display: none !important;
}

html,
body {
    background-color: var(--primary);
    color: var(--second);
    font-family: 'Hind Siliguri', sans-serif;
}

body.light-theme .nav-logo {
    filter: brightness(1) invert(0) !important;
}

/* body.light-theme .nav-admin-logo {
    filter: brightness(0) invert(1) !important;
} */
body.light-theme .imgs-invert {
    filter: brightness(0.5) invert(0) !important;
}

.sbtn {
    border-radius: 0.5rem !important;
    color: #f8fafc;
}

.sbtn.dark {
    background-color: #100f0f;
}

.sbtn.primary {
    background-color: #3C8CE6;
}

.sbtn.light {
    color: #100f0f;
}

body.light-theme .sbtn.light {
    border: 1px solid #e2e3e3 !important;
}

.sbtn.purple {
    background-color: rgb(114, 64, 200);
}

.sbtn.purple:hover {
    background-color: rgb(84, 47, 148);
}

.sbtn.green {
    background-color: rgb(46, 153, 128);
}

.sbtn.green:hover {
    background-color: rgb(34, 113, 95);
}

.sbtn.outline {
    border: 1px solid #f8fafc;
}

.sbtn.sm {
    font-size: 12px;
    line-height: 30px;
}

.gen-modal pop-h {
    background-color: var(--primary-grey) !important;
    color: var(--second);
}

.gen-modal pop-x {
    color: var(--second);
}

.gen-modal pop-t {
    font-weight: 600;
    font-size: 18px;
}

.gen-modal pop-c {
    border-radius: 1rem;
    background-color: var(--primary);
}

.gen-modal pop-b {
    border-radius: 0 0 16px 16px;
    background-color: var(--primary);
    color: var(--second);
}

.sh-main:hover {
    box-shadow: 0px 12px 30px -15px #3C8CE6;
}

.gen-modal pop-d {
    color: #8494a1;
}

@keyframes overEffect {
    from {
        visibility: hidden;
        opacity: 0;
        border: 1px dashed white;
        top: 5px;
        right: 5px;
        bottom: 5px;
        left: 5px;
        z-index: 10;
    }

    to {
        visibility: visible !important;
        opacity: 1;
        border: 1px dashed #8494a176;
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px;
        z-index: 10;
    }
}

@keyframes radioEffect {
    from {
        visibility: hidden;
        opacity: 0;
        border: 1px dashed white;
    }

    to {
        visibility: visible !important;
        opacity: 1;
        border: 1px dashed #8494a176;
    }
}

.flex-sb {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.flex-t {
    display: flex !important;
    justify-content: space-between !important;
}

.opacity:hover {
    opacity: 0.7;
}

.opacity-blue:hover {
    color: var(--main);
}

.nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scale-down:hover {
    transform: scale(0.95);
}

.input {
    background-color: var(--primary-grey);
    border: 1px solid var(--border);
    color: var(--secondary-grey);
}

body.light-theme .input {
    background-color: var(--primary);
}

@keyframes animate {
    0% {
        transform: scale(0) translateY(0) rotate(0);
        opacity: 1;
    }

    100% {
        transform: scale(1.2) translateY(-90px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes infinite-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@media all and (max-width:768px) {
    .rotate {
        right: 10px !important;
        top: -100px !important;
    }

    .rotate svg {
        width: 150px;
    }
}

.bfr::before {
    content: '';
    width: 2px;
    background-color: var(--border);
    position: absolute;
    left: 18px;
    top: 18px;
    bottom: 18px;
}

body:after {
    /* background-color: #151226; */
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transform: scale(1);
    transition: opacity 1s ease-in-out 0s, visibility 1s 0s;
    visibility: hidden;
    width: 100%;
    z-index: 1;
}

.trans-top:hover {
    transform: translateY(-10px);
}

@media all and (max-width: 768px) {
    .trans-top:hover {
        transform: translateY(0px);
    }
}

.trans-right:hover {
    transform: translateX(10px);
}

@keyframes animate {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    100% {
        transform: translateY(5px);
        opacity: 1;
    }

}

.inf {
    animation: animate 1.5s linear infinite;
}

.error {
    display: none;
}

/* side nav */

.navigate {
    display: none;
    visibility: hidden;
}

.accordion.active,
.accordion:hover {
    color: var(--main);
    font-weight: 600;
}

.accordion.active+.bfr {
    display: block;
}

.accordion.active .icon {
    transform: rotate(90deg) !important;
}

.drop.active::before,
.drop:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
    background-color: var(--second);
    padding: 3px;
    left: 16px;
    transition: all 1s linear;
}

/* start listing style */
lmlst-footer {
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    lmlst-footer {
        padding-left: 76px !important;
    }
}

lmlst-footer,
lmlst,
lmlst-header,
lmlst-tools,
lmlst-body {
    display: block;
}

lmlst {
    clear: both;
    padding-bottom: 36px;
}

lmlst-header {
    display: block;
    z-index: 10;
    top: 70px;
    line-height: 52px;
    height: 52px;
    background-color: var(--primary-grey);
    border-radius: 0.75rem;
}

lmlst-header.pinned {
    -webkit-box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
    box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
}

lmlst-header ul {
    padding: 0px;
    list-style: none;
    margin: 0px;
    display: block;
}

lmlst-header ul>li,
lmlst-body ul>li {
    display: table;
    width: 100%;
    padding: 0px 20px;
}

lmlst-header ul>li>div,
lmlst-body ul>li>div {
    display: flex;
    align-items: center;
}

lmlst-header ul>li>div>div {
    color: var(--secondary-grey);
    font-weight: 500;

}

lmlst-header ul>li>div>div,
lmlst-body ul>li>div>div {
    padding: 0px 10px;
    text-align: center;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    letter-spacing: -0.5px;
    text-shadow: none;
    text-align: left;

    flex-direction: column;
    flex-grow: 1;
}

lmlst-body ul>li>div>div {
    color: var(--primary);
}

lmlst-header ul>li>div>div:first-of-type,
lmlst-body ul>li>div>div:first-of-type,
lmlst-header ul>li>div>div:last-of-type,
lmlst-body ul>li>div>div:last-of-type {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

/* lmlst-body ul>li>div::before {
        position: absolute;
        background: black;
        border-radius: 0.25rem 0px 0px  0.25rem;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 4px;
        overflow: hidden;
        content: '';
        
    } */

lmlst-body ul>li>div.featured::before {
    background: #ffc107;
}

lmlst ul>li>div.returned {
    background-color: rgb(255 0 0 / 10%);
}

lmlst ul>li>div.cloned {
    background-color: rgb(222 228 255);
}

lmlst ul>li>div.pending {
    background-color: #e9f9f9;
}


lmlst .mini {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

lmlst-body ul>li>div {
    line-height: 60px;
    /* margin-bottom: 10px; */
    box-shadow: none !important;
    border-bottom: 1px solid var(--border) !important;
}

lmlst-body ul>li>div.shrink {
    line-height: 40px;
    margin-bottom: 8px;
}

lmlst-body {
    padding-bottom: 26px;
    display: block;
    overflow-x: auto;
    min-height: 75vh;
}

lmlst.dataGrid lmlst-body {
    /* display: flex; */
    min-height: unset;
    overflow-x: unset;
    padding-bottom: unset;
    /* gap: 20px; */
}

lmlst-footer ul,
lmlst-body ul {
    text-align: right;
    padding: 0px;
}

lmlst-footer li {
    padding: 0px;
    display: inline-block;
    font-size: 13px;
}

[page] {
    width: 25px;
    height: 25px;
    color: var(--second);
    line-height: 25px;
    border-radius: 0.25rem;
    text-align: center;
    margin: 0px 5px;
}

[page].active {
    background-color: rgba(60, 140, 230, 0.1);
    color: #3C8CE6;
}

[order],
[page] {
    cursor: pointer;
}


.title {
    letter-spacing: -0.5px;
}

/* end listing style */

/* start switch input */
.switch-circle:before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    left: 3px;
    top: 50%;
    transform: translate(0px, -50%);
    background-color: white;
    box-shadow: 0 2px 2px #95959555;
    transition: all 0.4s ease-in-out;
    z-index: 10;
}

.switch-input.is-checked {
    background-color: green !important;
}

.switch-input.is-checked .switch-circle:before {
    transform: translate(22px, -50%);
    animation: switchCircleEffect 0.4s ease-in-out;
}

.switch-input.is-checked~.over-effect {
    animation: overEffect 0.3s ease forwards;
}

@keyframes switchCircleEffect {
    0% {
        width: 100%;
    }

    50% {
        width: 140%;
    }

    100% {
        width: 100%;
    }
}

/* end switch input */

/* start inputs */
.input::placeholder {
    color: var(--secondary-grey);
}

.select-field.focused .select-options {
    display: block;
}

.select-field.focused~.over-effect {
    animation: overEffect 0.2s ease forwards;
}

.text.focused~.over-effect {
    animation: overEffect 0.3s ease forwards;
}

.text.focused .iconify {
    color: #3C8CE6;
}

/* end inputs */

/* start tip */
tip.longText span {
    min-width: 200px;
}

/* end tip */







/* 
.passStrength {
    top: auto;
    margin-top: -3px;
} */

/* @import url('https://fonts.googleapis.com/css2?family=Bitter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */


[data-theme="light"] {
    --primary: rgb(255, 255, 255);
    --second: #100f0f;
    --secondary-grey: #8494a1;
    --primary-grey: #f8fafc;
    --border: #e2e3e3;
    --grey: #5c5e5f;
    --main: #3C8CE6;
    --purple: rgb(114, 64, 200);
    --pink: #bf1879;
    --green: #59a219;
    --orange: #ef8b09;
    --nav: rgba(255, 255, 255, 0.5);
    --primary-op: rgba(255, 255, 255, 0.1);
    --nav-text: rgb(184, 184, 184);

}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1
}

.h1 .small,
.h1 small,
.h2 .small,
.h2 small,
.h3 .small,
.h3 small,
.h4 .small,
.h4 small,
.h5 .small,
.h5 small,
.h6 .small,
.h6 small,
h1 .small,
h1 small,
h2 .small,
h2 small,
h3 .small,
h3 small,
h4 .small,
h4 small,
h5 .small,
h5 small,
h6 .small,
h6 small {
    color: #777;
    font-weight: 400;
    line-height: 1
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    margin-bottom: 10px;
    margin-top: 20px
}

.h1 .small,
.h1 small,
.h2 .small,
.h2 small,
.h3 .small,
.h3 small,
h1 .small,
h1 small,
h2 .small,
h2 small,
h3 .small,
h3 small {
    font-size: 65%
}

.h4,
.h5,
.h6,
h4,
h5,
h6 {
    margin-bottom: 10px;
    margin-top: 10px
}

.h4 .small,
.h4 small,
.h5 .small,
.h5 small,
.h6 .small,
.h6 small,
h4 .small,
h4 small,
h5 .small,
h5 small,
h6 .small,
h6 small {
    font-size: 75%
}

.h1,
h1 {
    font-size: 36px
}

.h2,
h2 {
    font-size: 30px
}

.h3,
h3 {
    font-size: 24px
}

.h4,
h4 {
    font-size: 18px
}

.h5,
h5 {
    font-size: 14px
}

.h6,
h6 {
    font-size: 12px
}

p {
    margin: 0 0 10px
}

.lead {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 20px
}

@media (min-width: 768px) {
    .lead {
        font-size: 21px
    }
}

.small,
small {
    font-size: 85%
}

.mark,
mark {
    background-color: #fcf8e3;
    padding: .2em
}

._bgr {
    background: #0073EC;
    background-color: #28A745;
    background-color: #d50c2d;
}

._cr {
    color: #0073EC;
    color: #28A745;
    color: #d50c2d;
}

._cw {
    color: rgb(255, 255, 255);
}

._bgw {
    background-color: rgb(255, 255, 255);
}

._cb {
    color: #100f0f;
}

._bgb {
    background-color: #100f0f;
}

._cg {
    color: #f8fafc;
}

._bgg {
    background-color: #f8fafc;
}

._cmain {
    color: #3C8CE6;
}

._bgmain {
    background-color: #3C8CE6;
}

._cgreen {
    color: #59a219;
}

._bggreen {
    background-color: #59a219;
}

._cpurple {
    color: rgb(114, 64, 200);
}

._bgpurple {
    background-color: rgb(114, 64, 200);
}

._cpink {
    color: #bf1879;
}

._bgpink {
    background-color: #bf1879;
}

._corange {
    color: #ef8b09;
}

._bgorange {
    background-color: #ef8b09;
}

._cdg {
    color: #6a7782;
}

._bdg {
    background-color: #8494a1;
}

._border {
    border: 1px solid var(--border) !important;
}

._border-right {
    border-right: 1px solid var(--border) !important;
}

.hide {
    display: none !important;
}

html,
body {
    background-color: var(--primary);
    color: var(--second);
    font-family: 'Open Sans' !important;
    /* font-family: 'Hind Siliguri', sans-serif; */
}

body.light-theme .nav-logo {
    filter: brightness(1) invert(0) !important;
}

/* body.light-theme .nav-admin-logo {
    filter: brightness(0) invert(1) !important;
} */
body.light-theme .imgs-invert {
    filter: brightness(0.5) invert(0) !important;
}

.sbtn {
    border-radius: 0.2rem !important;
    color: #f8fafc;
    border-width: 2px !important;
}

.sbtn.dark {
    background-color: #100f0f;
}

.sbtn.primary {
    /* background-color: #3C8CE6; */
}

.sbtn.light {
    color: #100f0f;
}

body.light-theme .sbtn.light {
    border: 1px solid #e2e3e3 !important;
}

.sbtn.purple {
    background-color: rgb(114, 64, 200);
}

.sbtn.purple:hover {
    background-color: rgb(84, 47, 148);
}

.sbtn.green {
    background-color: #59a219;
}

.sbtn.green:hover {
    background-color: rgb(34, 113, 95);
}

.sbtn.outline {
    border: 1px solid #f8fafc;
}

.sbtn.sm {
    font-size: 12px;
    line-height: 30px;
}

.gen-modal pop-h {
    background-color: var(--primary-grey) !important;
    color: var(--second);
}

.gen-modal pop-x {
    color: var(--second);
}

.gen-modal pop-t {
    font-weight: 600;
    font-size: 18px;
}

.gen-modal pop-c {
    border-radius: 1rem;
    background-color: var(--primary);
}

.gen-modal pop-b {
    border-radius: 0 0 16px 16px;
    background-color: var(--primary);
    color: var(--second);
}

.sh-main:hover {
    box-shadow: 0px 12px 30px -15px #3C8CE6;
}

.gen-modal pop-d {
    color: #8494a1;
}

@keyframes overEffect {
    from {
        visibility: hidden;
        opacity: 0;
        border: 1px dashed white;
        top: 5px;
        right: 5px;
        bottom: 5px;
        left: 5px;
        z-index: 10;
    }

    to {
        visibility: visible !important;
        opacity: 1;
        border: 1px dashed #8494a176;
        top: -5px;
        right: -5px;
        bottom: -5px;
        left: -5px;
        z-index: 10;
    }
}

@keyframes radioEffect {
    from {
        visibility: hidden;
        opacity: 0;
        border: 1px dashed white;
    }

    to {
        visibility: visible !important;
        opacity: 1;
        border: 1px dashed #8494a176;
    }
}

.flex-sb {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.flex-t {
    display: flex !important;
    justify-content: space-between !important;
}

.opacity:hover {
    opacity: 0.7;
}

.opacity-blue:hover {
    color: var(--main);
}

.nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.scale-down:hover {
    transform: scale(0.95);
}

.input {
    background-color: var(--primary-grey);
    border: 1px solid var(--border);
    color: var(--secondary-grey);
}

body.light-theme .input {
    background-color: var(--primary);
}

@keyframes animate {
    0% {
        transform: scale(0) translateY(0) rotate(0);
        opacity: 1;
    }

    100% {
        transform: scale(1.2) translateY(-90px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes infinite-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@media all and (max-width:768px) {
    .rotate {
        right: 10px !important;
        top: -100px !important;
    }

    .rotate svg {
        width: 150px;
    }
}

.bfr::before {
    content: '';
    width: 2px;
    background-color: var(--border);
    position: absolute;
    left: 18px;
    top: 18px;
    bottom: 18px;
}

.trans-top:hover {
    transform: translateY(-10px);
}

@media all and (max-width: 768px) {
    .trans-top:hover {
        transform: translateY(0px);
    }
}

.trans-right:hover {
    transform: translateX(10px);
}

@keyframes animate {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    100% {
        transform: translateY(5px);
        opacity: 1;
    }

}

.inf {
    animation: animate 1.5s linear infinite;
}

.error {
    display: none;
}

/* side nav */

.navigate {
    display: none;
    visibility: hidden;
}

.accordion.active,
.accordion:hover {
    color: var(--second);
    font-weight: 600;
}

.accordion.active+.bfr {
    display: block;
}

.accordion.active .icon {
    transform: rotate(90deg) !important;
}

.drop.active::before,
.drop:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 100%;
    background-color: var(--second);
    padding: 3px;
    left: 16px;
    transition: all 1s linear;
}

/* start listing style */
lmlst-footer {
    box-shadow: none !important;
}

@media screen and (max-width: 768px) {
    lmlst-footer {
        padding-left: 76px !important;
    }
}

lmlst-footer,
lmlst,
lmlst-header,
lmlst-tools,
lmlst-body {
    display: block;
}

lmlst {
    clear: both;
    padding-bottom: 36px;
}

lmlst-header {
    display: block;
    z-index: 10;
    top: 70px;
    line-height: 52px;
    height: 52px;
    background-color: var(--primary-grey);
    border-radius: 0.75rem;
}

lmlst-header.pinned {
    -webkit-box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
    box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
}

lmlst-header ul {
    padding: 0px;
    list-style: none;
    margin: 0px;
    display: block;
}

lmlst-header ul>li,
lmlst-body ul>li {
    display: table;
    width: 100%;
    padding: 0px 20px;
}

lmlst-header ul>li>div,
lmlst-body ul>li>div {
    display: flex;
    align-items: center;
}

lmlst-header ul>li>div>div {
    color: var(--secondary-grey);
    font-weight: 500;

}

lmlst-header ul>li>div>div,
lmlst-body ul>li>div>div {
    padding: 0px 10px;
    text-align: center;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    letter-spacing: -0.5px;
    text-shadow: none;
    text-align: left;

    flex-direction: column;
    flex-grow: 1;
}

lmlst-body ul>li>div>div {
    color: var(--primary);
}

lmlst-header ul>li>div>div:first-of-type,
lmlst-body ul>li>div>div:first-of-type,
lmlst-header ul>li>div>div:last-of-type,
lmlst-body ul>li>div>div:last-of-type {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

/* lmlst-body ul>li>div::before {
        position: absolute;
        background: black;
        border-radius: 0.25rem 0px 0px  0.25rem;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 4px;
        overflow: hidden;
        content: '';
        
    } */

lmlst-body ul>li>div.featured::before {
    background: #ffc107;
}

lmlst ul>li>div.returned {
    background-color: rgb(255 0 0 / 10%);
}

lmlst ul>li>div.cloned {
    background-color: rgb(222 228 255);
}

lmlst ul>li>div.pending {
    background-color: #e9f9f9;
}


lmlst .mini {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

lmlst-body ul>li>div {
    line-height: 60px;
    /* margin-bottom: 10px; */
    box-shadow: none !important;
    border-bottom: 1px solid var(--border) !important;
}

lmlst-body ul>li>div.shrink {
    line-height: 40px;
    margin-bottom: 8px;
}

lmlst-body {
    padding-bottom: 26px;
    display: block;
    overflow-x: auto;
    min-height: 75vh;
}

lmlst.dataGrid lmlst-body {
    /* display: flex; */
    min-height: unset;
    overflow-x: unset;
    padding-bottom: unset;
    /* gap: 20px; */
}

lmlst-footer ul,
lmlst-body ul {
    text-align: right;
    padding: 0px;
}

lmlst-footer li {
    padding: 0px;
    display: inline-block;
    font-size: 13px;
}

[page] {
    width: 25px;
    height: 25px;
    color: var(--second);
    line-height: 25px;
    border-radius: 0.25rem;
    text-align: center;
    margin: 0px 5px;
}

[page].active {
    background-color: rgba(60, 140, 230, 0.1);
    color: #3C8CE6;
}

[order],
[page] {
    cursor: pointer;
}


.title {
    letter-spacing: -0.5px;
}

/* end listing style */

/* start switch input */
.switch-circle:before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    left: 3px;
    top: 50%;
    transform: translate(0px, -50%);
    background-color: white;
    box-shadow: 0 2px 2px #95959555;
    transition: all 0.4s ease-in-out;
    z-index: 10;
}

.switch-input.is-checked {
    background-color: green !important;
}

.switch-input.is-checked .switch-circle:before {
    transform: translate(22px, -50%);
    animation: switchCircleEffect 0.4s ease-in-out;
}

.switch-input.is-checked~.over-effect {
    animation: overEffect 0.3s ease forwards;
}

@keyframes switchCircleEffect {
    0% {
        width: 100%;
    }

    50% {
        width: 140%;
    }

    100% {
        width: 100%;
    }
}

/* end switch input */

/* start inputs ,
body,
html,
input,
textarea,
select,
button */
::placeholder,
::-webkit-input-placeholder {
    font-size: inherit !important;
}

.select-field.focused .select-options {
    display: block;
}

.select-field.focused~.over-effect {
    animation: overEffect 0.2s ease forwards;
}

.text.focused~.over-effect {
    animation: overEffect 0.3s ease forwards;
}

.text.focused .iconify {
    color: #3C8CE6;
}

/* end inputs */

/* start tip */
tip.longText span {
    min-width: 200px;
}

/* end tip */






/* attribute */


.color-prime {
    background: linear-gradient(90deg, #5c50d9, #d50c2d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


.footer-supplement {
    fill: #ffffff !important;
}

.planbox {
    border: 1px solid #eee;
    border-radius: 5px;
    flex: 1;
}


.product-highlight-label {
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.26px;
    padding: 3px 7px;
    text-align: center;
}

.product-highlight-label-Favorite {
    background: linear-gradient(90deg, #5c50d9, #d50c2d);
    color: #fff;
}

.prime-circle-left,
.prime-circle-right {
    background: var(--blur-radial-purple);
    border-radius: 100%;
    height: var(--blur-radial-size-1);
    opacity: .4;
    position: absolute;
    top: -300px;
    width: var(--blur-radial-size-1);
    z-index: 10;
}

.prime-circle-left {
    left: -350px;
}

.prime-circle-right {
    right: -350px;
}

:root {
    --blur-radial-red: radial-gradient(50% 50% at 50% 50%, rgba(213, 12, 45, .7) 0, rgba(213, 12, 45, 0) 100%);
    --blur-radial-purple: radial-gradient(50% 50% at 50% 50%, rgba(92, 80, 217, .7) 0, rgba(92, 80, 217, 0) 100%);
    --blur-radial-dark-purple: radial-gradient(50% 50% at 50% 50%, rgba(22, 0, 109, .7) 0, rgba(22, 0, 109, 0) 100%);
    --blur-radial-blue: radial-gradient(50% 50% at 50% 50%, rgba(34, 133, 246, .75) 0, rgba(34, 133, 246, 0) 100%);
    --blur-radial-light-blue: radial-gradient(50% 50% at 50% 50%, rgba(103, 171, 249, .7) 0, rgba(152, 198, 251, 0) 100%);
    --blur-radial-green: radial-gradient(50% 50% at 50% 50%, rgba(7, 120, 79, .7) 0, rgba(12, 197, 129, 0) 100%);
    --blur-radial-pink: radial-gradient(50% 50% at 50% 50%, #ee85f6 0, rgba(238, 133, 246, 0) 100%);
    --blur-radial-size-1: 529px;
    --blur-radial-size-2: 696px;
    --blur-radial-size-3: 830px;
    --blur-radial-size-4: 1000px;
    --blur-radial-size-5: 1600px;
    --blur-radial-size-6: 2800px;
}






.list-inline,
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.faq-question {
    color: #d5102d;
    font-weight: 500;
    line-height: 26px;
}

.list-faqs li .collapse {
    display: none;
}

.list-faqs li.active .collapse {
    display: block;
}

.list-faqs li:not(:last-child),
.list-faqs li:not(:last-child) {
    margin-bottom: 20px;
}

.faq-question .iconify {
    margin-right: 5px;
    transition: transform .2s ease-in;
    font-size: 22px;
}


.list-faqs li.active .iconify {
    transform: rotate(90deg);
    transition: transform .2s ease-in;
}

.green-energy {
    background: linear-gradient(89deg, #188480 .82%, #d0ef93 165.88%);
    font-weight: 700;
}







.domain-search-container {
    max-width: 900px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.search-input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.search-input-group input {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.search-input-group input:focus {
    outline: none;
    border-color: #4a90e2;
}

.btn-primary {
    padding: 12px 24px;
    background: #4a90e2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: #357abd;
}

.example-container {
    margin-bottom: 24px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.example-container span {
    color: #666;
    font-size: 14px;
}

.example-btn {
    padding: 4px 12px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 16px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.example-btn:hover {
    background: #e0e0e0;
    border-color: #4a90e2;
}

.domain-results {
    margin-top: 20px;
}

.section {
    margin-bottom: 32px;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 16px;
}

.section h4 {
    margin: 0 0 12px 0;
    color: #333;
}

.domain-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.domain-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.domain-name {
    font-family: monospace;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
}

.domain-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
}

.domain-item.available .domain-status {
    background: #d4edda;
    color: #155724;
}

.domain-item.taken .domain-status {
    background: #f8d7da;
    color: #721c24;
}

.btn-select {
    padding: 4px 12px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.btn-select:hover {
    background: #218838;
}

.domain-suggestion {
    font-size: 11px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
}

.loading,
.error-message {
    text-align: center;
    padding: 40px;
    color: #666;
}

.error-message {
    color: #dc3545;
}

.results-header h3 {
    margin: 0 0 16px 0;
    color: #333;
}

.sliding-bottom-border {
    background: linear-gradient(to right, var(--brand-1) 0, var(--brand-1) 100%) no-repeat right 100%;
    background-size: 0 2px;
    transition: background-size .39s ease;
}

.sliding-bottom-border:hover {
    background-position: left 100%;
    background-size: 100% 2px;
    color: var(--brand-1);
}

.sliding-bottom-border .iconify {
    transition: all .39s ease;
}

.sliding-bottom-border:hover .iconify {
    transform: translateX(5px);
}



.blur-radial {
    height: var(--blur-radial-size-6);
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: -2300px;
    /* margin-top:100px; */
    transform: translateX(-50%);
    width: var(--blur-radial-size-6);
}

.support-background-shadow-blue {
    background: var(--blur-radial-blue);
    top: -2464px;
    transform: translateX(calc(-50% + 150px));
}

.support-background-shadow-pink {
    background: var(--blur-radial-pink);
    top: -2464px;
    transform: translateX(calc(-50% - 150px));
}

.support-background-shadow-purple {
    background: var(--blur-radial-purple);
    top: -2400px;
    transform: translateX(-50%);
}

.support-background-particles {
    height: 75%;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

:root {
    --blur-radial-red: radial-gradient(50% 50% at 50% 50%, rgba(213, 12, 45, .7) 0, rgba(213, 12, 45, 0) 100%);
    --blur-radial-purple: radial-gradient(50% 50% at 50% 50%, rgba(92, 80, 217, .7) 0, rgba(92, 80, 217, 0) 100%);
    --blur-radial-dark-purple: radial-gradient(50% 50% at 50% 50%, rgba(22, 0, 109, .7) 0, rgba(22, 0, 109, 0) 100%);
    --blur-radial-blue: radial-gradient(50% 50% at 50% 50%, rgba(34, 133, 246, .75) 0, rgba(34, 133, 246, 0) 100%);
    --blur-radial-light-blue: radial-gradient(50% 50% at 50% 50%, rgba(103, 171, 249, .7) 0, rgba(152, 198, 251, 0) 100%);
    --blur-radial-green: radial-gradient(50% 50% at 50% 50%, rgba(7, 120, 79, .7) 0, rgba(12, 197, 129, 0) 100%);
    --blur-radial-pink: radial-gradient(50% 50% at 50% 50%, #ee85f6 0, rgba(238, 133, 246, 0) 100%);
    --blur-radial-size-1: 529px;
    --blur-radial-size-2: 696px;
    --blur-radial-size-3: 830px;
    --blur-radial-size-4: 1000px;
    --blur-radial-size-5: 1600px;
    --blur-radial-size-6: 2800px;
}


.color-prime {
    background: linear-gradient(90deg, #5c50d9, #d50c2d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    fill: url(#prime-grad) !important;
}

.color-prime path {
    fill: url(#prime-grad);
}

.footer-supplement {
    fill: #ffffff !important;
}


.whois-special-card-border {
    background: var(--gradient-1-500);
    border-radius: 4px;
    padding: 2px;
}

.whois-special-card-error {
    align-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 2px;
    display: flex;
    gap: 32px;
    justify-content: start;
    padding: 40px;
    word-wrap: anywhere;
}

.product-highlight-label {
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.26px;
    padding: 3px 7px;
    text-align: center;
}

.product-highlight-label-Favorite {
    background: linear-gradient(90deg, #5c50d9, #d50c2d);
    color: #fff;
    font-weight: 400;
}



:root {
    --brand-1: #d50c2d;
    --brand-2: #383838;
    --brand-3: #fff;
    --brand-4: #ae0a25;
    --brand-5: #f5a623;
    --function-1: red;
    --function-2: #fdc400;
    --function-1-dark: --brand-4;
    --function-3: #59a219;
    --function-3-dark: #4d8c16;
    --function-3-bright: #74d421;
    --function-2-dark: #e4b000;
    --function-4: #1979a2;
    --function-4-dark: #16688c;
    --neutrals-900: #484848;
    --neutrals-800: #525252;
    --neutrals-700: #737373;
    --neutrals-600: #a3a3a3;
    --neutrals-500: #d4d4d4;
    --neutrals-400: #e6e6e6;
    --neutrals-300: #ededed;
    --neutrals-200: #f5f5f5;
    --neutrals-100: #fafafa;
    --dark-grey: #5a5a5a;
    --gradient-1-500: linear-gradient(90deg, #5c50d9, #d50c2d);
}

:root {
    --navy: #001f3f;
    --blue: #007bff;
    --red: #d50c2d;
    --green: #28a745;
    --slate: #64748b;
    --border: #e2e8f0;
    --bg-light: #f8fafc;
}


.search-header {
    margin-bottom: 24px;
    padding: 0 10px;
}

.brand-badge {
    font-size: 10px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

#search-title {
    font-size: 20px;
    color: var(--navy);
    margin: 0;
}

#query-display {
    color: var(--red);
}

.results-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.result-item:hover {
    border-color: var(--red);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.info-side .domain-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
}

.info-side .tagline {
    font-size: 12px;
    color: var(--slate);
}

.status-badge {
    font-size: 12px;
    font-weight: 600;
    margin-right: 15px;
}

.status-available {
    color: var(--green);
}

.status-taken {
    color: #ef4444;
}

.deploy-btn {
    background: var(--red);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.deploy-btn:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}

.deploy-btn:hover:not(:disabled) {
    background: #0056b3;
}

/* Skeleton Animation */
.skeleton-line {
    background: #f1f5f9;
    height: 12px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-line.name {
    width: 140px;
}

.skeleton-line.meta {
    width: 80px;
}

.skeleton-btn {
    background: #f1f5f9;
    width: 100px;
    height: 36px;
    border-radius: 6px;
}


.sliding-background {
    background: linear-gradient(to right, var(--brand-2) 0, var(--brand-2) 100%) no-repeat right 100%;
    background-size: 0 100%;
    transition: background-size .5s ease, color .5s ease;
    color: var(--brand-2);
}

.sliding-background:hover {
    background-position: left 100%;
    background-size: 100% 100%;
    color: var(--brand-3);
}

body {
    background-color: #141414;
}



:root {

    /* color-scheme: dark; */
    --color-primary: #d50c2d;
    --color-primary--link: hsl(350, 87%, 53%);
    --color-primary--hover: rgb(237.14, 13.36, 50.1);
    --color-primary--disabled: hsl(350, 62%, 17%);
    --color-primary--disabled-text: hsl(0, 0%, 40%);
    --color-green--light: hsl(143, 76%, 57%);
    --color-green--background: hsl(143, 76%, 87%);
    --color-red-full--background: hsl(0, 100%, 90%);
    --color-red-full--text: hsl(0, 100%, 40%);
    --color-text: hsl(0, 0%, 93%);
    --color-text--disabled: hsl(0, 0%, 54%);
    --color-back-link--hover: hsl(0, 0%, 66%);
    --color-background--layer-0: hsl(0, 0%, 8%);
    --color-background--layer-10: hsl(0, 0%, 15%);
    --color-background--layer-20: hsl(0, 0%, 17%);
    --color-background--layer-30: hsl(0, 0%, 19%);
    --color-background--layer-40: hsl(0, 0%, 22%);
    --color-background--layer-50: hsl(0, 0%, 24%);
    --color-background--gradient-card-0: hsla(0, 0%, 15%, 0);
    --color-background--gradient-card-15: hsla(0, 0%, 15%, .08);
    --color-background--overlay: rgba(0, 0, 0, .7);
    --color-background-empty-state: hsl(0, 0%, 17%);
    --color-background-empty-state--side-sheet: hsl(0, 0%, 22%);
    --color-card-background: hsl(0, 0%, 15%);
    --color-card-background--disabled: hsl(0, 0%, 10%);
    --color-card-background--hover: hsl(0, 0%, 19%);
    --color-card-background--light: hsl(0, 0%, 16%);
    --color-card--disabled-text: hsl(0, 0%, 24%);
    --color-nav-primary-background--hover: hsl(0, 0%, 22%);
    --color-nav-primary-background--hover-mobile: hsl(0, 0%, 15%);
    --color-nav-primary-background--active: hsl(0, 0%, 24%);
    --color-nav-primary-background--active-mobile: hsl(0, 0%, 17%);
    --color-nav-primary--icon: hsl(0, 0%, 72%);
    --color-nav-secondary--hover: hsl(0, 0%, 81%);
    --color-nav-secondary--disabled: hsl(0, 0%, 54%);
    --color-nav-secondary--hover-background: hsl(0, 0%, 24%);
    --color-mobile-menu-background: hsla(0, 0%, 8%, .8);
    --color-form-border: hsl(0, 0%, 35%);
    --color-form-border--disabled: hsl(0, 0%, 24%);
    --color-form-addon-wrapper--background: hsl(0, 0%, 24%);
    --color-input--background: hsl(0, 0%, 13%);
    --color-input--background-dropdown: hsl(0, 0%, 19%);
    --color-input-hover--button: hsl(0, 0%, 24%);
    --color-dropdown-background--hover: hsl(0, 0%, 26%);
    --color-dropdown-background--active: hsl(0, 0%, 24%);
    --color-dropdown-background--header: hsl(0, 0%, 19%);
    --color-dropdown-background--disabled: hsl(0, 0%, 24%);
    --color-dropdown-label-background: hsl(0, 0%, 35%);
    --color-dropdown-button-grey: hsl(0, 0%, 35%);
    --color-dropdown-button-grey--hover: hsl(0, 0%, 38%);
    --color-dropdown-filter--background: hsl(0, 0%, 24%);
    --color-dropdown-filter--hover: hsl(0, 0%, 26%);
    --color-dropdown-filter--active: hsl(0, 0%, 35%);
    --color-border: hsl(0, 0%, 35%);
    --color-border--dark: hsl(0, 0%, 24%);
    --color-button-secondary-background: hsl(0, 0%, 35%);
    --color-button-secondary-background--hover: hsl(0, 0%, 54%);
    --color-button-secondary-background--disabled: hsl(0, 0%, 33%);
    --color-button-secondary-text--disabled: hsl(0, 0%, 54%);
    --color-button-secondary--seperator: hsl(0, 0%, 24%);
    --color-button-vote: hsl(0, 0%, 35%);
    --color-button-vote--hover: hsl(0, 0%, 54%);
    --color-button-vote--voted: hsl(0, 0%, 24%);
    --color-button-switch-background: hsl(0, 0%, 24%);
    --color-button-switch-background--selected: hsl(0, 0%, 35%);
    --color-button-switch-background--hover: hsl(0, 0%, 54%);
    --color-button-switch--text-secondary: hsl(0, 0%, 93%);
    --color-button-dashed-background--hover: hsl(0, 0%, 13%);
    --color-button-dashed-content: hsl(0, 0%, 35%);
    --color-table-background--head: hsl(0, 0%, 19%);
    --color-table-background--highlighted: hsl(0, 0%, 19%);
    --color-badge--grey: hsl(0, 0%, 35%);
    --color-status-badge-grey--background: rgb(48.45, 48.45, 48.45);
    --color-status-badge-grey--color: hsl(0, 0%, 54%);
    --color-status-badge-red--background: rgb(81.6, 51, 51);
    --color-status-badge-red--color: hsl(0, 100%, 50%);
    --color-status-badge-green--background: rgb(51.9792, 77.5608, 61.78548);
    --color-status-badge-green--color: hsl(143, 76%, 57%);
    --color-status-badge-orange--background: rgb(80.5443, 72.36067, 59.1957);
    --color-status-badge-orange--color: hsl(37, 91%, 67%);
    --color-step-header-background: hsla(0, 0%, 8%, .6);
    --color-stepper-sidenav--item-active: hsl(0, 0%, 22%);
    --color-ui-slider-background: hsl(0, 0%, 24%);
    --color-ui-slider-background--limit: hsl(0, 0%, 19%);
    --color-ui-slider-gradient--limit: hsl(0, 0%, 22%);
    --color-ui-slider--handle: hsl(0, 0%, 35%);
    --color-select-box-border--default: hsl(0, 0%, 24%);
    --color-select-box-border--hover: hsl(0, 0%, 35%);
    --color-select-box-border--dropdown: hsl(0, 0%, 15%);
    --color-select-box-border--selected: hsl(350, 87%, 53%);
    --color-select-box-background--default: hsl(0, 0%, 15%);
    --color-select-box-background--hover: hsl(0, 0%, 19%);
    --color-select-box-dropdown--default: hsl(0, 0%, 19%);
    --color-select-box-dropdown--hover: hsl(0, 0%, 24%);
    --color-side-sheet--highlighted-header: hsl(0, 0%, 22%);
    --color-ghost-loading--fill: hsl(0, 0%, 19%);
    --color-ghost-loading-highlight--gradient-0: rgba(61.2, 61.2, 61.2, 0);
    --color-ghost-loading-highlight--gradient-20: rgba(61.2, 61.2, 61.2, .2);
    --color-ghost-loading-highlight--gradient-60: rgba(61.2, 61.2, 61.2, .5);
    --color-modal--background: hsl(0, 0%, 15%);
    --color-modal--overlay-mask: rgba(0, 0, 0, .7);
    --color-modal--footer: hsl(0, 0%, 17%);
    --color-notification--info: hsl(0, 0%, 35%);
    --color-load-mask-background--table: hsla(0, 0%, 15%, .5);
    --color-editable--hover: hsl(0, 0%, 54%);
    --color-spinner: hsl(0, 0%, 24%);
    --color-click-to-copy-label: hsl(0, 0%, 24%);
    --color-click-to-copy-label--snippet: hsl(0, 0%, 15%);
    --color-box-code-background: hsl(0, 0%, 22%);
    --color-label-border: hsl(0, 0%, 35%);
    --color-label-border--hover: hsl(0, 0%, 40%);
    --color-label-key-background: hsl(0, 0%, 35%);
    --color-label-key-background--hover: hsl(0, 0%, 40%);
    --color-label-add-label-background--hover: hsl(0, 0%, 19%);
    --color-tooltip--background: hsl(0, 0%, 35%);
    --color-shadow: rgba(0, 0, 0, .35);
    --color-shadow--hover: rgba(0, 0, 0, .4);
    --color-ui-message-background: hsl(0, 0%, 22%);
    --color-ui-message-background--in-card: hsl(0, 0%, 24%);
    --color-global-search-trigger: hsl(0, 0%, 15%);
    --color-global-search-trigger--hover: hsl(0, 0%, 17%);
    --color-search-result-background: hsl(0, 0%, 15%);
    --color-search-result-background--hover: hsl(0, 0%, 17%);
    --color-search-result-background--selected: #d50c2d;
    --color-search-result-background--busy: #df4861;
    --color-search-result-color: hsl(0, 0%, 22%);
    --color-search-result-color--hover: #fff;
    --color-search-result-color--disabled: hsl(0, 0%, 54%);
    --color-search-result-color--match: #fff;
    --color-search-result-color--match-disabled: hsl(0, 0%, 54%);
    --color-search-result-icon--background: #5b353b;
    --color-search-result-icon--background-hover: #5b353b;
    --color-search-result-icon--background-selected: rgba(255, 255, 255, .3);
    --color-search-result-icon--background-busy: #e2798a;
    --color-search-result-icon--color: #d50c2d;
    --color-search-result-icon--color-hover: #fff;
    --color-dashboard-map: hsl(0, 0%, 22%);
    --color-dashboard-map--connection: hsl(0, 0%, 93%);
    --color-pie-chart--empty: hsl(0, 0%, 24%);
    --color-status-indicator--green: hsl(143, 76%, 57%);
    --color-status-indicator--grey: hsl(0, 0%, 35%);
    --color-status-indicator--orange: hsl(37, 91%, 67%);
    --color-status-indicator--red: hsl(0, 100%, 50%);
    --color-project-list-background--default: hsl(0, 0%, 19%);
    --color-project-list-background--colored: hsl(0, 0%, 9%);
    --color-icon-fill: hsl(0, 0%, 54%);
    --color-icon-list-item--background: hsl(0, 0%, 54%);
    --color-icon-month-select--fill: hsl(0, 0%, 24%);
    --color-icon-checkbox--fill: hsl(0, 0%, 8%);
    --color-icon-checkbox--fill-on-label: hsl(0, 0%, 8%);
    --color-icon-checkbox--stroke: hsl(0, 0%, 35%);
    --color-icon-checkbox--stroke-on-label: hsl(0, 0%, 35%);
    --color-icon-checkbox--hover: hsl(0, 0%, 40%);
    --color-icon--map: hsl(0, 0%, 35%);
    --color-icon-action--fill-active: hsl(0, 0%, 66%);
    --color-icon-action--background: hsl(0, 0%, 23%);
    --color-icon-lock--background: hsl(0, 0%, 22%);
    --color-icon-volume-size-block-outline: hsl(0, 0%, 35%);
    --color-icon-search: hsl(0, 0%, 93%);
    --color-icon-activity--background: hsl(0, 0%, 22%);
    --color-icon-activity--icon: hsl(0, 0%, 93%);
    --color-icon-activity--status: hsl(0, 0%, 35%);
    --color-illustration-snapshot--fill: hsl(0, 0%, 35%);
    --color-illustration-sad-smiley--fill: hsl(0, 0%, 35%);
    --color-logo-text: #fff;
    --color-server-status-indicator-base--fill: hsl(0, 0%, 15%);
    --color-server-status-indicator-base--stroke: hsl(0, 0%, 15%);
    --color-server-status-indicator-off--fill: hsl(0, 0%, 35%);
    --color-server-status-indicator-off--stroke: hsl(0, 0%, 35%);
    --color-usage-preview-item-odd--background: hsl(0, 0%, 22%);
    --color-console--background: hsl(0, 0%, 15%);
    --color-incident--background: hsl(0, 0%, 19%);

}



._cgr {
    color: #666;
}

._cg {
    color: #123C49;
}

._cgl {
    color: #123C49;
}

._bg {
    background-color: #123C49;
}

._bglll {
    background-color: #f3f9ef;
    background-color: #efefef;
}

._bgl {
    background-color: #0b7493;
}

._cp {
    color: #123C49;
}

._bp {
    background-color: #216329;
}

._bl {
    background-color: #f3f4f4;
}

._cicon {
    color: #123C49;
}

._bgsl {
    background-color: #115319;
}

._br {
    background: #c00;
}


.tag-editor {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
}

.tag-editor {
    overflow: hidden;
    padding: 0px;
    line-height: 24px;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.26);
    font-size: 14px;
}

.tag-editor li {
    margin: 1px 0px;
}

.tag-editor .tag-editor-spacer {
    width: 2px;
}

.tag-editor-tag.active {
    padding: 0px;
    padding-left: 5px;
    padding-right: 3px;
}

.is-not-empty~.tag-editor~label,
label[active] {
    top: 0px;
}

.tag-editor div {
    padding: 0px;
}


.tag-editor input {
    height: 24px;
    line-height: 24px;
}

.tag-editor li:nth-child(2) .tag-editor-tag.active {
    padding-left: 0px;
    margin-left: 0px;
}

.tag-editor li:nth-child(2) .tag-editor-spacer {
    width: 0px;
}

.tag-editor-tag.active+.tag-editor-delete {
    display: none;
}



/* surrounding tag container */
.tag-editor {
    list-style-type: none;
    padding: 0 0px 0 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #eee;
    cursor: text;
    font: normal 14px sans-serif;
    color: #555;
    background: #fff;
    line-height: 22px;
}

/* core styles usually need no change */
.tag-editor li {
    display: block;
    float: left;
    overflow: hidden;
    margin: 3px 0;
}

.tag-editor div {
    float: left;
    padding: 0 4px;
}

/*.tag-editor .placeholder { padding: 0 2px; color: #bbb; }*/

.tag-editor .placeholder {
    padding: 0 0px;
    font-family: 'Fira Sans', 'SFP', 'Open Sans', 'tahoma', verdana, arial, sans-serif;
    color: #999;
    font-size: 14px;
    margin-left: -1px;
}

.tag-editor .tag-editor-spacer {
    padding: 0;
    width: 3px;
    overflow: hidden;
    color: transparent;
    background: none;
}

.tag-editor input {
    vertical-align: inherit;
    border: 0;
    outline: none;
    padding: 0;
    margin: 0;
    cursor: text;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    font-style: inherit;
    box-shadow: none;
    background: none;
    color: #444;
}

/* hide original input field or textarea visually to allow tab navigation */
.tag-editor-hidden-src {
    position: absolute !important;
    left: -99999px;
}

/* hide IE10 "clear field" X */
.tag-editor ::-ms-clear {
    display: none;
}

/* tag style */
.tag-editor .tag-editor-tag {
    padding-left: 5px;
    color: #46799b;
    background: #e0eaf1;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px 0 0 2px;
}

/* delete icon */
.tag-editor .tag-editor-delete {
    background: #e0eaf1;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    padding-left: 3px;
    padding-right: 4px;
}

.tag-editor .tag-editor-delete i {
    line-height: 20px;
    display: inline-block;
}

.tag-editor .tag-editor-delete i:before {
    font-size: 16px;
    color: #8ba7ba;
    content: "×";
    font-style: normal;
}

.tag-editor .tag-editor-delete:hover i:before {
    color: #d65454;
}

.tag-editor .tag-editor-tag.active+.tag-editor-delete,
.tag-editor .tag-editor-tag.active+.tag-editor-delete i {
    visibility: hidden;
    cursor: text;
}

.tag-editor .tag-editor-tag.active {
    background: none !important;
}

/* jQuery UI autocomplete - code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css */
.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    font-size: 14px;
}

.ui-front {
    z-index: 9999;
}

.ui-menu {
    list-style: none;
    padding: 1px;
    margin: 0;
    display: block;
    outline: none;
}

.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    padding: 2px .4em;
    line-height: 1.4;
    min-height: 0;
    /* support: IE7 */
}

.ui-widget-content {
    border: 1px solid #bbb;
    background: #fff;
    color: #555;
}

.ui-widget-content a {
    color: #46799b;
}

.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    background: #e0eaf1;
}

.ui-helper-hidden-accessible {
    display: none;
}



.tag-editor input {
    outline: none;
    border-color: transparent;
    -webkit-box-shadow: 0 0 0px #f8b9b7;
    -moz-box-shadow: 0 0 0px #f8b9b7;
    box-shadow: 0 0 0px #f8b9b7;

    outline: 0;
    border-color: #ccc !Important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(102, 175, 233, 0) !Important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(102, 175, 233, 0) !Important;
}

.placeholder {
    height: 55px;
    width: 100%;
    margin-top: 20px;
    border: 1px solid #dadada;
    background-color: #f9fbfc;
    border-radius: 0.5rem !important;
}

.tag-editor .placeholder {
    padding: 0px;
    font-family: 'Fira Sans', 'SFP', 'Open Sans', 'tahoma', verdana, arial, sans-serif;
    color: #999;
    font-size: 14px;
    margin-left: 0px;
    background-color: transparent !important;
    border: 0px solid #aaa !important;
    line-height: 22px !important;
    height: auto;
    margin: 0px;
    width: auto;
    text-align: right;
}


.tag-editor {
    background-color: transparent !important;
    border: 0px solid #aaa !important;
    border-radius: 10px !important;
    padding: 4px 40px;
    line-height: 27px !important;
    text-align: right;
    background-color: #fff !important;
    border: 1px solid rgba(192, 226, 238, 0.8) !important;
    font-size: 0px;
}


.tag-editor li {
    margin: 1px 0px;
    float: none;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    line-height: 28px !important;
}

.tag-editor li:nth-child(2) .tag-editor-spacer {
    width: 3px;
}

.tag-editor .tag-editor-tag {
    padding-left: 5px;
    padding-right: 0px;
    color: #46799b;
    background: #e0eaf1;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px 0 0 2px;
}

.tag-editor .tag-editor-delete {
    background: #e0eaf1;
    cursor: pointer;
    border-radius: 0 2px 2px 0;
    padding-left: 4px;
    padding-right: 5px;
}

.tag-editor-hidden-src {
    position: absolute !important;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    border-radius: 10px;
}

.select2-selection--single {
    background-color: transparent !important;
    border: 0px solid #aaa !important;
    border-radius: 10px !important;
    line-height: 38px !important;
}

.select2-results__option {
    text-align: right;
    text-transform: capitalize !important;
}

.selection,
.select2-container .select2-selection--single,
.select2-selection__arrow,
.select2-selection__placeholder {
    height: 38px !important;
    display: block !important;
    line-height: 36px !important;
}

.select2-selection__placeholder,
.select2-selection__rendered {
    font-family: "GE SS Two Light", sans-serif;
    font-weight: bold !important;
    font-size: 11px !important;
    color: #b7b7b7 !important;
}

.select2-selection__rendered {
    font-family: "GE SS Two Light", sans-serif !important;
    color: #0b7493 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    padding-right: 40px !important;
    line-height: 36px !important;
}

.select2-container {
    z-index: 99;
}

.select2-container--open {
    z-index: 99999;
}

.select2-search__field {
    border-radius: 0px;
}

input,
textarea,
.input,
select,
.select2-selection__rendered,
.btnDiv {
    background-color: #fff;
    height: 38px;
    line-height: 38px;
    padding: 0px 15px;
    border-radius: 8px;
    width: 100%;
    z-index: 10;
}

input:disabled,
textarea:disabled,
.input:disabled,
select:disabled,
.select2-container--disabled.select2 .selection,
.btnDiv:disabled {
    border: 1px solid rgba(211, 215, 211, 0.175) !important;
    opacity: 0.8;
    background-color: #eee;
    /* border: 1px solid #E9F8E6 !important; */
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee !important;
    cursor: default;
}

.ov5:has(+ input:disabled),
.ov5:has(+ select:disabled) {
    background-color: #eee;
    z-index: 110;
}

textarea {
    line-height: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
}

textarea::placeholder {
    line-height: 24px;
}

.select2 .selection {
    border: 1px solid rgba(192, 226, 238, 0.8) !important;
    border-radius: 8px !important;
}

.select2-selection__rendered {
    background-color: #fff;
    border: none !important;
    height: 38px;
    line-height: 38px;
    padding: 0px 15px;
    width: 100%;
}

label .ov5 {
    pointer-events: none;
    background: #fff;
    border-radius: 100%;
}

.select2-selection__arrow {
    width: 38px !important;
    top: -1px !important;
}

.input.asBtn,
.btnDiv {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    background-color: #123C49;
    border: none;
    text-align: center;
}

.btnDiv {
    width: 50%;
    padding: 0px 20px;
}

textarea {
    height: 178px;
    resize: none;
}

.input {
    height: auto;
}

input.variant {
    height: 50px;
    line-height: 50px;
    border: none;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    background-color: #123C49;
    border-radius: 8px;
}

.variant::placeholder {
    font-family: "GE SS Two Light", sans-serif;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.9);
    line-height: 50px;
    font-size: 17px;
}

.social {
    width: 25px;
    height: 25px;
    background-color: #123C49;
    box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.4);
}

label {
    display: block;
}

.Sports.active {
    background-color: #123C49;
    color: #fff;
}

.Sports.full {
    border-color: #a00;
}

@font-face {
    font-family: "GE SS Two Light";
    src: url("/fonts/02f502e5eefeb353e5f83fc5045348dc.eot");
    /* IE9*/
    src: url("/fonts/02f502e5eefeb353e5f83fc5045348dc.eot?#iefix") format("embedded-opentype"),
        /* IE6-IE8 */
        url("/fonts/02f502e5eefeb353e5f83fc5045348dc.woff2") format("woff2"),
        /* chrome firefox */
        url("/fonts/02f502e5eefeb353e5f83fc5045348dc.woff") format("woff"),
        /* chrome firefox */
        url("/fonts/02f502e5eefeb353e5f83fc5045348dc.ttf") format("truetype"),
        /* chrome firefox opera Safari, Android, iOS 4.2+*/
        url("/fonts/02f502e5eefeb353e5f83fc5045348dc.svg#GE SS Two Light") format("svg");
    /* iOS 4.1- */
    /* unicode-range: U+0020-U+0029,U+0040-FEFF; */
    /*unicode-range: U+0030-0039; Numbers Only*/
    unicode-range: U+600-6FF;
}

label.required {
    padding-right: 10px;
}

label.required>* {
    margin-right: -10px;
}

label.required::before {
    content: "*";
    color: red;
    position: absolute;
    right: -5px;
    top: 2px;
}

.serviceRow label.required::before {
    right: 5px;
    top: -28px;
}

.infoRow label.required>* {
    margin-right: 0;
}

.infoRow label.required::before {
    content: "";
    color: transparent;
    position: relative;
    right: 0;
    top: 0;
}

.infoRow label.required {
    padding-right: 0;
}

.error:not(.mobinit) {
    color: red;
    padding: 5px 10px;
    padding-bottom: 0px;
    font-size: 12px;
    display: none;
}

.mobinit {
    /* width: auto; */
    padding-right: 40px !important;
}

.iti {
    width: 100%;
}

.iti--inline-dropdown .iti__dropdown-content {
    z-index: 1000 !important;
}

.is-invalid .error {
    display: block;
}

.is-invalid .red {
    display: block;
}

.is-valid .success {
    display: block;
}


._bgg {
    background: linear-gradient(90deg,
            rgba(23, 35, 80, 1) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.__bgg {
    background: linear-gradient(270deg,
            rgba(23, 35, 80, 1) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.test {
    opacity: 0.2;
}

.select2-dropdown {
    border: 1px solid rgba(192, 226, 238, 0.8);
    border-top: none;
    border-radius: 0px 0px 8px 8px;
    overflow: hidden;
}

/* select2-container--above */
/* select2-container--below */
.select2-container--open .select2-selection__rendered {
    border-bottom: none;
    border-radius: 10px 8px 0px 0px;
}

.select2-search__field {
    border-color: rgba(0, 0, 0, 0.2) !important;
    height: 30px;
    line-height: 30px;
}

.page {
    min-width: 25px;
    height: 25px;
    line-height: 25px;
}

.page.active {
    background-color: #123C49;
    color: white;
}

.infoTable cl {
    padding: 5px;
}

.infoDiv {
    border: 2px solid #58849c;
    color: #0b7493;
    height: 38px;
    line-height: 38px;
    padding: 0px 15px;
    border-radius: 8px;
    white-space: nowrap;
}

.attendance.active,
.is-checked .attendance {
    font-size: 30px !important;
    background-color: #123C49;
}

.progD {
    display: flex;
    border-radius: 50%;
    font-size: 0;
    background: conic-gradient(#0b7493 var(--progress), transparent 0deg);
}

.progD::after {
    content: "";
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: 8px;
    border-radius: 50%;
    background: #eff2f3;
    font-size: 1rem;
    text-align: center;
}

.select2-selection--multiple {
    border: none !important;
}

.select2-selection--multiple .select2-selection__rendered {
    height: auto !important;
    min-height: 38px;
    padding-left: 20px !important;
}

.select2-container--default .select2-selection--multiple {
    padding: 0px;
    background-color: #fff;
    border-radius: 8px;
}

.select2-container .select2-selection--single {
    background-color: #fff !important;
}

.select2-search--inline {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
}

.select2-selection__rendered,
.btnDiv {
    background-color: transparent;
    z-index: 1;
}

.select2-container .select2-search--inline .select2-search__field {
    height: 38px;
    line-height: 38px;
    margin: 0px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    height: 100%;
}

body.rtl .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    border-right: 1px solid #aaa;
    border-left: none;
    z-index: 10000;
}

.selection,
.select2-container .select2-selection--single,
.select2-selection__arrow,
.select2-selection__placeholder {
    min-height: 38px !important;
    height: auto !important;
    display: block !important;
    line-height: 36px !important;
}

.select2-search__field {
    padding: 0px 0px 0px 40px !important;
}

body.rtl .select2-search__field {
    padding: 0px 40px 0px 0px !important;
}

button[disabled],
button[disabled]:hover {
    opacity: 0.5 !important;
    pointer-events: none;
}

[wrapper][vertical]>div,
[wrapper][vertical]>ul {
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0px;
    white-space: normal;
    right: -16px;
    padding-right: 8px !important;
    top: 0px;
    left: 0px;
    bottom: 0px;
    position: absolute;
}

body.rtl [wrapper][vertical]>div,
body.rtl [wrapper][vertical]>ul {
    left: -16px;
    padding-left: 8px !important;
    right: 0px;
    padding-right: unset !important;
}

@-webkit-keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -35px -35px;
    }
}

@keyframes cssProgressActiveRight {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -35px -35px;
    }
}

.cssProgress .cssProgress-active-right {
    background-image: -webkit-linear-gradient(135deg,
            rgba(255, 255, 255, 0.125) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.125) 50%,
            rgba(255, 255, 255, 0.125) 75%,
            transparent 75%,
            transparent);
    background-image: linear-gradient(-45deg,
            rgba(255, 255, 255, 0.125) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.125) 50%,
            rgba(255, 255, 255, 0.125) 75%,
            transparent 75%,
            transparent);
    background-size: 35px 35px;
}

.cssProgress .cssProgress-active-right {
    -webkit-animation: cssProgressActiveRight 2s linear infinite;
    animation: cssProgressActiveRight 2s linear infinite;
}

.cssProgress.DONE .cssProgress-active-right {
    background-image: none;
}

/**************************/
/**** Global Overrides ****/
/**************************/
.prog .spinner-icon {
    border-top-color: #2c7c18;
    border-left-color: #2c7c18;
}

.prog .bar {
    background: #2c7c18;
}

.spinner:before,
[spinner]:before {
    border-color: #2c7c18;
}

.prog .bar::before {
    box-shadow: 0 0 10px #2c7c18, 0 0 5px #2c7c18;
}

.prog .bar::before {
    box-shadow: 0 0 10px #2c7c18, 0 0 5px #2c7c18;
}

[notify] .notify {
    text-align: left !important;
}

[notify] .notify .icon span {
    right: 25px !important;
}

pop-c {
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 3px 0 rgba(60, 64, 67, 0.3),
        0 6px 10px 4px rgba(60, 64, 67, 0.15) !important;
    box-shadow: 0 2px 3px 0 rgba(60, 64, 67, 0.3),
        0 6px 10px 4px rgba(60, 64, 67, 0.15) !important;
    max-width: 850px;
}

.status {
    line-height: 20px;
    padding: 0px 5px;
    vertical-align: middle;
}

.sbtn.primary {
    color: #fff;
    background-color: #2c7c18;
    border-color: #2c7c18;
}

.sbtn.primary:hover {
    color: #fff;
    background-color: #1d4f15;
    border-color: #1d4f15;
}

.status.active {
    font-weight: 900;
    transform: scale(1.1);
    opacity: 1;
    z-index: 10;
}

.status.red.active,
.status.critical.active,
.status.severity4.active,
.status.ongoing.active,
.infoMsg.red.active {
    background: #faeaea;
    color: #d12f2f;
    border: 1px solid #d12f2f;
    border: 1px solid rgba(209, 47, 47, .25);
}

/**************************/
/**************************/

[loader] .wrapper .animation {
    border-top: 4px solid #115319;
}

[loader] .wrapper .text {
    text-align: left;
}

/*******************************/
/**** To Be Added To Mobius ****/
/*******************************/
/* [wrapper] > div, [wrapper] > ul {
      white-space: unset;
  } */
.flip-h {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph;
    /*IE*/
    filter: fliph;
    /*IE*/
}

body.rtl .select2-container {
    z-index: 100;
    text-align: right;
}

body.rtl .select2-container--open {
    z-index: 100;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
    float: none;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 99999999999999;
    width: 38px;
    height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #000 transparent transparent transparent;
}

.select2-container--default .select2-selection--single.select2-selection--clearable .select2-selection__arrow {
    display: none !important;
}

.select2-container--default.select2-container--open .select2-selection--single.select2-selection--clearable .select2-selection__arrow {
    display: block !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #000 transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__clear {
    display: none;
}

body>.select2-container--open {
    z-index: 10000 !important;
}

fieldset {
    border: none;
}

.shimmer {
    font-family: Flow-Block;
    animation: fade 0.6s ease-in infinite alternate forwards;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: block;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-bottom: 5px;
    margin-top: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    line-height: 25px;
    display: inline-block;
}

label:not(.skip).is-checked [data-icon="mdi:checkbox-marked"] {
    display: inline-block;
}

label:not(.skip).is-checked [data-icon="mdi:checkbox-blank-outline"] {
    display: none;
}

label:not(.skip).is-checked {
    color: #123C49;
}

tip.notes span {
    background-color: #254b26 !important;
}

tip.notes>div {
    width: 90px;
    text-align: left;
    letter-spacing: -0.5px;
}

tip.notes>div>span {
    padding: 5px;
}

/* tip.notes>div::after {
    border-right: 6px solid #254b26;
  } */

.jump-anim {
    color: red;
    animation: jump 1s infinite;
}

@keyframes jump {
    50% {
        transform: translateY(-5px);
    }

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

/******************************/
/******************************/

lst-footer,
lst,
lst-header,
lst-tools,
lst-body {
    display: block;
}

lst-footer:not(.inline) {
    right: 60px;
}

body.navActive lst-footer:not(.inline) {
    right: 250px;
}

lmlst-footer {
    right: 60px;
    padding-left: 15px;
    padding-right: 15px;
}

body.navActive lmlst-footer {
    right: 250px;
}

lst .list {
    line-height: 60px;
}

lst .list.inline {
    min-height: 20vh;
}

lst .list.block {
    min-height: 80vh;
}

lst.mini .list {
    line-height: 40px;
}

lst.mini .list li.mb10 {
    margin-bottom: 2px !important;
}

lst-footer {
    height: 36px;
}

lst-footer .mdi-chevron-double-left::before,
lst-footer .mdi-chevron-double-right::before {
    line-height: 42px;
}

lst-footer .mdi-chevron-left::before,
lst-footer .mdi-chevron-right::before {
    line-height: 31px;
}

lst ul li {
    display: table;
}

lmlst-body ul>li>div.rejected,
lst ul li.rejected {
    background-color: rgb(255 0 0 / 30%);
}

lmlst-body ul>li>div.returned,
lst ul li.returned {
    background-color: rgb(255 0 0 / 10%);
}

lmlst-body ul>li>div.cloned,
lst ul li.cloned {
    background-color: rgb(222 228 255);
}

lmlst-body ul>li>div.pending,
lst ul li.pending {
    background-color: #e9f9f9;
}

lst ul {
    padding: 0px 20px;
    list-style: none;
    margin: 0px;
    display: block;
    overflow: auto;
}

popup lst ul {
    padding: 0;
}

lst .opts li {
    display: inline-block;
}

lst .lst-cl {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    padding: 0px 5px;
    direction: ltr;
}

lst .lst-cl:not(.mini):first-of-type {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

lst .lst-cl-mini {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

lst.fixed .head {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    background-color: #f3f9ef;
    -webkit-box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
}

.mdi-view-stream.active::before {
    content: "\F0729";
}

label.is-checked .card-severity,
label.is-checked .card-type {
    border: 1px solid #123C49 !important;
}

label.is-checked .card-severity .md-severity,
label.is-checked .card-type .md-type {
    display: block !important;
}

/* Toggle Switch  */

.toggle-switch {
    border: none;
    appearance: none;
    width: 17px;
    height: 16px;
    background: #ccc;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.4s;
}

.toggle-switch.small {
    width: 22px;
    height: 11px;
    padding: 0;
}

.toggle-switch:checked {
    background: #4cf770;
}

.toggle-switch::after {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transform: scale(1.1);
    transition: 0.4s;
}

.toggle-switch.small::after {
    width: 10px;
    height: 10px;
}

.toggle-switch:checked::after {
    left: 50%;
}

.expired {
    background-color: rgb(255 0 0 / 15%) !important;
}

input.unavailable {
    background-color: rgb(255 96 96 / 15%) !important;
}

.count-badge {
    position: absolute;
    top: -2px;
    right: -5px;
    font-size: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.count-badge.small {
    font-size: 8px;
    width: 9px;
    height: 9px;
}

.socialEdit {
    display: inline-block;
    height: 35px;
    line-height: 30px;
}

.accordion.active .mdi-chevron-down::before {
    transform: rotate(180deg);
}

.mz-button.mz-button-prev,
.mz-button.mz-button-next {
    position: fixed !important;
}

.mz-figure img {
    min-width: 150px;
    min-height: 150px;
}

.magic-thumbs-wrapper img {
    min-width: 60px;
    min-height: 60px;
}

.files-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.files-flex .opt {
    font-weight: normal;
}

.files-flex .opt.active {
    font-weight: bold;
}

.mh350 {
    min-height: 350px;
}

.icon-arrow-right,
.icon-arrow-left {
    vertical-align: baseline;
    line-height: normal;
    vertical-align: middle;
    line-height: initial;
    font-size: 16px;
}

.icon-arrow-right::before,
.icon-arrow-left::before {
    display: inline-block;
    font: normal normal normal 24px/1 "";
    font-size: inherit;
    text-rendering: auto;
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-right::before {
    content: "\25BA";
}

.icon-arrow-left::before {
    content: "\25C4";
}

.sbtn.primary.disabled,
.sbtn.primary:disabled {
    color: #fff !important;
    background-color: #2c7c18 !important;
    border-color: #2c7c18 !important;
}

._cb {
    color: #0069d9;
}

.placeholder {
    height: 55px;
    width: 100%;
    margin-top: 20px;
    border: 1px solid #dadada;
    background-color: #f9fbfc;
    border-radius: 0.5rem !important;
}

input.is-empty,
input.is-invalid {
    border-color: red !important;
}

.filter-system input {
    padding: 3px 15px;
    outline: none;
    border: 1px solid #dadada;
    border-radius: 7px;
    height: 34px !important;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #0069d9;
}

.small .select2-results__option--selectable {
    font-size: 11px !important;
    padding: 2px !important;
}

.filter-system .select2 .select2-selection__arrow {
    display: none !important;
}

.filter-system .select2-selection.select2-selection--single {
    border: 1px solid #dadada;
    border-radius: 7px;
    height: 34px !important;
    padding: 2px 0px !important;
    font-weight: 600;
}

.filter-system .select2-selection__rendered {
    padding: 0 15px !important;
}

.filter-system .and-or {
    width: 40px;
    margin-top: 7px;
    margin-bottom: 7px;
}

.filter-system .and-or::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -7px;
    height: 10px;
    width: 1px;
    background-color: #0069d9;
}

.filter-system .and-or::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    height: 8px;
    width: 1px;
    background-color: #0069d9;
}

.filter-system .and-or .select2-selection.select2-selection--single {
    border-radius: 10px;
    border: 1px solid #0069d9;
    height: 20px !important;
    padding: 0px !important;
    font-size: 11px !important;
    font-weight: 600;
    background-color: #eceffb;
}

.filter-system .and-or .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 19px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    text-align: center;
}

.filter-system .arrow-down {
    z-index: 99999999;
    color: #0069d9;
    pointer-events: none;
}

.filter-system .group {
    border: 1px solid #dadada;
}

.filter-system .group:hover {
    border-color: #0069d9;
}

.filter-system .condition {
    border: 1px solid #dadada;
    background-color: #f9fbfc;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-system .condition:not(:first-of-type) {
    margin-top: 20px;
}

.filter-system .condition .inputs {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-left: 1px solid #dadada;
    border-right: 1px solid #dadada;
}

.filter-system .condition .handler {
    width: 40px;
    color: #92959d;
}

.filter-system .condition .delete {
    width: 35px;
    color: #92959d;
}

.filter-system .actions {
    border-top: 1px solid #dadada;
}

.filter-system .actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-system .and-or .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
}

.main .filters {
    display: none !important;
}

.navActive .main:hover .filters,
.navActive .main.active .filters {
    display: block !important;
}

.list-nb {
    display: none;
}

.navActive .list-nb {
    display: inline-block;
}

.select2-search.select2-search--inline {
    display: none !important;
}

.select2-container--open .select2-search.select2-search--inline {
    display: block !important;
    position: relative !important;
}

.select2-container--open .select2-search__field {
    width: 100% !important;
}

.red15 {
    background-color: rgba(255, 0, 0, 0.15);
}




.togC {
    color: #2c7c18;
}

.togC .round4x {
    border: 1px solid #2c7c18;
}

.togC label.is-checked {
    color: #fff;
}

.tog {
    display: none;
}

.is-checked .tog {
    display: block;
}

.mdi::before,
.mdi-set {
    vertical-align: middle;
}


.sbtn.sm {
    padding: 0 0.5rem;
}

.sbtn {
    letter-spacing: -0.5px;
}



















lmlst-footer,
lmlst,
lmlst-header,
lmlst-tools,
lmlst-body {
    display: block;
}

lmlst {
    clear: both;
    padding-bottom: 36px;
}

lmlst-header {
    display: block;
    z-index: 10;
    top: 50px;
    line-height: 50px;
    height: 50px;
    background-color: #F8FBF6;
    background-color: #efefef;
}

lmlst-header::before {
    position: absolute;
    content: "";
    inset: 0px;
    background-position: center bottom;
    background-size: 30% auto;
    background-repeat: repeat;
    background-image: URL('https://media.istockphoto.com/id/1409701095/vector/vector-vote-pattern-voting-seamless-background.jpg?s=612x612&w=0&k=20&c=xdgUF7Xnqsq9SXmHRWKZBhN23y-We7Gw_jcvzs4jUiI=');
    opacity: 0.05;
}

lmlst-header.pinned {
    -webkit-box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
    box-shadow: 0 2px 2px rgb(0 0 0 / 20%);
}

lmlst-header ul {
    padding: 0px;
    list-style: none;
    margin: 0px;
    display: block;
}

lmlst-header ul>li,
lmlst-body ul>li {
    display: table;
    width: 100%;
    padding: 0px 20px;
}

lmlst-header ul>li>div,
lmlst-body ul>li>div {
    display: flex;
    align-items: center;
}


lmlst-header ul>li>div>div,
lmlst-body ul>li>div>div {
    padding: 0px 5px;
    text-align: center;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    letter-spacing: -0.5px;
    color: #555;
    /* flex-direction: column; */
    flex-grow: 1;
}

lmlst-header ul>li>div>div:nth-child(2),
lmlst-body ul>li>div>div:nth-child(2) {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

lmlst-header ul>li>div>div:first-of-type,
lmlst-body ul>li>div>div:first-of-type,
lmlst-header ul>li>div>div:last-of-type,
lmlst-body ul>li>div>div:last-of-type {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
}

lmlst-body ul>li>div::before {
    position: absolute;
    background: #ccc;
    border-radius: 0px 0.25rem 0.25rem 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 4px;
    overflow: hidden;
    content: '';
}

lmlst-body ul>li>div.featured::before {
    background: #ffc107;
}


lmlst-body ul>li>div.rejected::before {
    background: rgb(200, 0, 0);
}

lmlst-body ul>li>div.returned::before {
    background: rgb(254, 120, 120);
    ;
}

lmlst-body ul>li>div.pending::before {
    background: #7af4f4;
}

lmlst-body ul>li>div.cloned::before {
    background: rgb(83, 115, 255);
}


lmlst ul>li>div.cloned {
    background-color: rgb(222 228 255);
}

lmlst ul>li>div.pending {
    background-color: #e9f9f9;
}

lmlst ul>li>div.returned {
    background-color: rgb(255 0 0 / 10%);
}

lmlst ul>li>div.rejected {
    background-color: rgb(255 0 0 / 30%);
}


lmlst .mini {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
}

lmlst-body ul>li>div {
    line-height: 50px;
    margin-bottom: 10px;
}

lmlst-body ul>li>div.shrink {
    line-height: 40px;
    margin-bottom: 8px;
}

lmlst-body {
    padding-bottom: 26px;
    display: block;
    overflow-x: auto;
    min-height: 80vh;
}

lmlst-footer ul {
    text-align: left;
    padding: 0px;
}

lmlst-footer li {
    padding: 0px 5px;
    display: inline-block;
    font-size: 13px;
    height: 25px;
    min-width: 25px;
    color: #123C49;
    vertical-align: middle;
    line-height: 25px;
    border-radius: 0.9rem;
    text-align: center;
    margin: 0px 2px;
}

lmlst-footer li.active {
    background-color: #123C49;
    color: white;
}

[order],
[page] {
    cursor: pointer;
}


.title {
    letter-spacing: -0.5px;
}




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

.dataList cl.mini {
    max-width: 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    text-align: center;
}






.dataList rw cl {
    border-left: rgba(0, 0, 0, 0.1) solid 1px;
    padding: 0px 5px;
}

.dataList rw cl:last-child {
    border-left: none;
    padding: 0px 5px;
}

.dataList li {
    margin-top: -1px;
}

.ulCont {
    border-radius: 4px;
    overflow: hidden;
    border-top: rgba(0, 0, 0, 0.1) solid 1px;
}

.dataList li {
    border: rgba(0, 0, 0, 0.1) solid 1px;
    border-bottom: none;
}

.dataList li:last-child {
    border: rgba(0, 0, 0, 0.1) solid 1px;
}

.dataList li.active,
.dataList li.activated:hover {
    border: #0b7493 solid 1px;
}

.dataList li.active+li,
.dataList li.activated:hover+li {
    border-top: none;
}

.dataList .head {
    /* background-color: #ddd; */
}

.dataList .head cl {
    border-color: #F3F9EF;
}

.dataList .total cl {
    border-left: 0px;
}

tip>div {
    white-space: nowrap;
}

.floating-btn {
    width: 30px;
    aspect-ratio: 1/1;
    display: block;
    padding: 0;
}

.floating-btn:not(:first-of-type) {
    margin-top: 10px;
}










.passStrength {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    width: auto;
    height: auto;
    border-radius: 8px;
}

.variant .passStrength {
    border-radius: 8px;
}




.DONE .perc {
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    /* Example: Change background to white */
    -webkit-text-fill-color: inherit !important;
    appearance: unset;
    border-radius: 8px;
    background-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
    /* Example: Change text color to black */
    /* Add other desired styles here */
}


.thumbnails-style-shaded.mz-thumb img {
    box-shadow: none !important;
}







popup {
    background-color: var(--color-background--overlay) !important;
    color: #fff;
}

[pop-t] {
    font-weight: 600;
}

[pop-h] {
    background: var(--color-modal--background) !important;
}

[pop-c] {
    background: var(--color-modal--background) !important;
    max-width: 650px;
    max-width: 586px;
}

[pop-f] {
    background: var(--color-modal--footer) !important;
    border-radius: 0 0 6px 6px;
    z-index: 10;
}

.shallow:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, transparent 0%, var(--color-card-background) 100%);
    z-index: 3;
}



.steps {
    /* background-color: #121212; */
}

.step-head {
    cursor: pointer;
    padding: 20px;
    position: sticky;
    top: 64px;
    z-index: 1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: var(--color-step-header-background);
    mask: linear-gradient(black 80%, transparent);
    font-size: 22px;
    color: #ededed;
}

.step-icon {
    color: #d50c2d;
    width: 26px;
    font-size: 26px;
}

.step-icon::before {
    background-color: #fff;
    padding: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    border-radius: 100%;
}

.step-body {
    padding: 4px 21px 40px 21px;
    margin-left: 32px;
    margin-right: 10px;
    border-left: 2px dashed #d50c2d;
}

.step:last-child .step-body {
    border-color: transparent;
}

.bdgc {
    background-color: var(--color-background--layer-20);
    background-color: var(--color-card-background);
    border: 1px solid var(--color-select-box-border--default);
    border-radius: 10px;
}

.bdg {
    font-size: 13px;
    font-weight: 500;
    border-radius: 10px;
    background-color: var(--color-background--layer-20);
    background-color: var(--color-card-background);
    border: 1px solid var(--color-select-box-border--default);
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
}

.bdg:hover {
    border-color: var(--color-select-box-border--hover);
    background-color: var(--color-select-box-background--hover);
    color: #fff;
}

.bdg.active {
    border-color: #d50c2d;
    background-color: #d50c2d;
    color: #fff;
}


.items {}


.item {
    transition: background .25s, background-color .25s, color .25s;
    padding: 5px 15px;
}

.item:not(.head) {
    border-radius: 12px;
    padding: 15px 15px;
    border: 1px solid var(--color-select-box-border--default);
    box-shadow: 0 0 0 1px transparent;
    background: var(--color-select-box-background--default);
}

.item.head {
    color: #aaa;
    font-size: 14px;
}

.item.selectable {
    cursor: pointer;
}

.item:hover:not(.selected):not(.head) {
    background: var(--color-select-box-background--hover);
    border-color: var(--color-select-box-border--hover);
    box-shadow: 0 0 0 1px var(--color-select-box-border--hover);
}

.item.selected {
    border: 1px solid var(--color-select-box-border--selected);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.item.selected:before {
    content: "";
    position: absolute;
    left: -8px;
    top: -8px;
    width: 22px;
    height: 22px;
    background: var(--color-primary);
    border-radius: 50%;
}

.item.selected:after {
    content: "";
    position: absolute;
    left: 0px;
    top: -3px;
    display: inline-block;
    transform: rotate(45deg);
    height: 10px;
    width: 5px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

#card-sdk-id>div {
    margin: -8px !important;
    max-width: unset !important;
    width: unset !important;
}


.field__input-wrap {
    border: 1px solid var(--color-form-border);
    border-radius: 6px;
    background: var(--color-input--background);
    box-shadow: inset 0 2px 4px #0000000d;
    cursor: text;
    overflow: hidden;
    flex: 1 1 0;
    position: relative;
    display: flex;
    line-height: 1.25;
}

.field__input-wrap.focused {
    border-color: var(--color-primary);
}

input.dark {
    color: #fff;
}

input.dark::placeholder,
input.dark::-webkit-input-placeholder {
    color: #666;
}

.sbtn {
    transition: all .15s;
}

.sbtn:disabled {
    cursor: not-allowed;
    color: var(--color-primary--disabled-text);
    background-color: var(--color-primary--disabled);
    border-color: var(--color-primary--disabled);
}


@media (prefers-color-scheme: dark) {
    [data-theme=auto] {
        color-scheme: dark;
        --color-primary: #d50c2d;
        --color-primary--link: hsl(350, 87%, 53%);
        --color-primary--hover: rgb(237.14, 13.36, 50.1);
        --color-primary--disabled: hsl(350, 62%, 17%);
        --color-primary--disabled-text: hsl(0, 0%, 40%);
        --color-green--light: hsl(143, 76%, 57%);
        --color-green--background: hsl(143, 76%, 87%);
        --color-red-full--background: hsl(0, 100%, 90%);
        --color-red-full--text: hsl(0, 100%, 40%);
        --color-text: hsl(0, 0%, 93%);
        --color-text--disabled: hsl(0, 0%, 54%);
        --color-back-link--hover: hsl(0, 0%, 66%);
        --color-background--layer-0: hsl(0, 0%, 8%);
        --color-background--layer-10: hsl(0, 0%, 15%);
        --color-background--layer-20: hsl(0, 0%, 17%);
        --color-background--layer-30: hsl(0, 0%, 19%);
        --color-background--layer-40: hsl(0, 0%, 22%);
        --color-background--layer-50: hsl(0, 0%, 24%);
        --color-background--gradient-card-0: hsla(0, 0%, 15%, 0);
        --color-background--gradient-card-15: hsla(0, 0%, 15%, .08);
        --color-background--overlay: rgba(0, 0, 0, .7);
        --color-background-empty-state: hsl(0, 0%, 17%);
        --color-background-empty-state--side-sheet: hsl(0, 0%, 22%);
        --color-card-background: hsl(0, 0%, 15%);
        --color-card-background--disabled: hsl(0, 0%, 10%);
        --color-card-background--hover: hsl(0, 0%, 19%);
        --color-card-background--light: hsl(0, 0%, 16%);
        --color-card--disabled-text: hsl(0, 0%, 24%);
        --color-nav-primary-background--hover: hsl(0, 0%, 22%);
        --color-nav-primary-background--hover-mobile: hsl(0, 0%, 15%);
        --color-nav-primary-background--active: hsl(0, 0%, 24%);
        --color-nav-primary-background--active-mobile: hsl(0, 0%, 17%);
        --color-nav-primary--icon: hsl(0, 0%, 72%);
        --color-nav-secondary--hover: hsl(0, 0%, 81%);
        --color-nav-secondary--disabled: hsl(0, 0%, 54%);
        --color-nav-secondary--hover-background: hsl(0, 0%, 24%);
        --color-mobile-menu-background: hsla(0, 0%, 8%, .8);
        --color-form-border: hsl(0, 0%, 35%);
        --color-form-border--disabled: hsl(0, 0%, 24%);
        --color-form-addon-wrapper--background: hsl(0, 0%, 24%);
        --color-input--background: hsl(0, 0%, 13%);
        --color-input--background-dropdown: hsl(0, 0%, 19%);
        --color-input-hover--button: hsl(0, 0%, 24%);
        --color-dropdown-background--hover: hsl(0, 0%, 26%);
        --color-dropdown-background--active: hsl(0, 0%, 24%);
        --color-dropdown-background--header: hsl(0, 0%, 19%);
        --color-dropdown-background--disabled: hsl(0, 0%, 24%);
        --color-dropdown-label-background: hsl(0, 0%, 35%);
        --color-dropdown-button-grey: hsl(0, 0%, 35%);
        --color-dropdown-button-grey--hover: hsl(0, 0%, 38%);
        --color-dropdown-filter--background: hsl(0, 0%, 24%);
        --color-dropdown-filter--hover: hsl(0, 0%, 26%);
        --color-dropdown-filter--active: hsl(0, 0%, 35%);
        --color-border: hsl(0, 0%, 35%);
        --color-border--dark: hsl(0, 0%, 24%);
        --color-button-secondary-background: hsl(0, 0%, 35%);
        --color-button-secondary-background--hover: hsl(0, 0%, 54%);
        --color-button-secondary-background--disabled: hsl(0, 0%, 33%);
        --color-button-secondary-text--disabled: hsl(0, 0%, 54%);
        --color-button-secondary--seperator: hsl(0, 0%, 24%);
        --color-button-vote: hsl(0, 0%, 35%);
        --color-button-vote--hover: hsl(0, 0%, 54%);
        --color-button-vote--voted: hsl(0, 0%, 24%);
        --color-button-switch-background: hsl(0, 0%, 24%);
        --color-button-switch-background--selected: hsl(0, 0%, 35%);
        --color-button-switch-background--hover: hsl(0, 0%, 54%);
        --color-button-switch--text-secondary: hsl(0, 0%, 93%);
        --color-button-dashed-background--hover: hsl(0, 0%, 13%);
        --color-button-dashed-content: hsl(0, 0%, 35%);
        --color-table-background--head: hsl(0, 0%, 19%);
        --color-table-background--highlighted: hsl(0, 0%, 19%);
        --color-badge--grey: hsl(0, 0%, 35%);
        --color-status-badge-grey--background: rgb(48.45, 48.45, 48.45);
        --color-status-badge-grey--color: hsl(0, 0%, 54%);
        --color-status-badge-red--background: rgb(81.6, 51, 51);
        --color-status-badge-red--color: hsl(0, 100%, 50%);
        --color-status-badge-green--background: rgb(51.9792, 77.5608, 61.78548);
        --color-status-badge-green--color: hsl(143, 76%, 57%);
        --color-status-badge-orange--background: rgb(80.5443, 72.36067, 59.1957);
        --color-status-badge-orange--color: hsl(37, 91%, 67%);
        --color-step-header-background: hsla(0, 0%, 8%, .6);
        --color-stepper-sidenav--item-active: hsl(0, 0%, 22%);
        --color-ui-slider-background: hsl(0, 0%, 24%);
        --color-ui-slider-background--limit: hsl(0, 0%, 19%);
        --color-ui-slider-gradient--limit: hsl(0, 0%, 22%);
        --color-ui-slider--handle: hsl(0, 0%, 35%);
        --color-select-box-border--default: hsl(0, 0%, 24%);
        --color-select-box-border--hover: hsl(0, 0%, 35%);
        --color-select-box-border--dropdown: hsl(0, 0%, 15%);
        --color-select-box-border--selected: hsl(350, 87%, 53%);
        --color-select-box-background--default: hsl(0, 0%, 15%);
        --color-select-box-background--hover: hsl(0, 0%, 19%);
        --color-select-box-dropdown--default: hsl(0, 0%, 19%);
        --color-select-box-dropdown--hover: hsl(0, 0%, 24%);
        --color-side-sheet--highlighted-header: hsl(0, 0%, 22%);
        --color-ghost-loading--fill: hsl(0, 0%, 19%);
        --color-ghost-loading-highlight--gradient-0: rgba(61.2, 61.2, 61.2, 0);
        --color-ghost-loading-highlight--gradient-20: rgba(61.2, 61.2, 61.2, .2);
        --color-ghost-loading-highlight--gradient-60: rgba(61.2, 61.2, 61.2, .5);
        --color-modal--background: hsl(0, 0%, 15%);
        --color-modal--overlay-mask: rgba(0, 0, 0, .7);
        --color-modal--footer: hsl(0, 0%, 17%);
        --color-notification--info: hsl(0, 0%, 35%);
        --color-load-mask-background--table: hsla(0, 0%, 15%, .5);
        --color-editable--hover: hsl(0, 0%, 54%);
        --color-spinner: hsl(0, 0%, 24%);
        --color-click-to-copy-label: hsl(0, 0%, 24%);
        --color-click-to-copy-label--snippet: hsl(0, 0%, 15%);
        --color-box-code-background: hsl(0, 0%, 22%);
        --color-label-border: hsl(0, 0%, 35%);
        --color-label-border--hover: hsl(0, 0%, 40%);
        --color-label-key-background: hsl(0, 0%, 35%);
        --color-label-key-background--hover: hsl(0, 0%, 40%);
        --color-label-add-label-background--hover: hsl(0, 0%, 19%);
        --color-tooltip--background: hsl(0, 0%, 35%);
        --color-shadow: rgba(0, 0, 0, .35);
        --color-shadow--hover: rgba(0, 0, 0, .4);
        --color-ui-message-background: hsl(0, 0%, 22%);
        --color-ui-message-background--in-card: hsl(0, 0%, 24%);
        --color-global-search-trigger: hsl(0, 0%, 15%);
        --color-global-search-trigger--hover: hsl(0, 0%, 17%);
        --color-search-result-background: hsl(0, 0%, 15%);
        --color-search-result-background--hover: hsl(0, 0%, 17%);
        --color-search-result-background--selected: #d50c2d;
        --color-search-result-background--busy: #df4861;
        --color-search-result-color: hsl(0, 0%, 22%);
        --color-search-result-color--hover: #fff;
        --color-search-result-color--disabled: hsl(0, 0%, 54%);
        --color-search-result-color--match: #fff;
        --color-search-result-color--match-disabled: hsl(0, 0%, 54%);
        --color-search-result-icon--background: #5b353b;
        --color-search-result-icon--background-hover: #5b353b;
        --color-search-result-icon--background-selected: rgba(255, 255, 255, .3);
        --color-search-result-icon--background-busy: #e2798a;
        --color-search-result-icon--color: #d50c2d;
        --color-search-result-icon--color-hover: #fff;
        --color-dashboard-map: hsl(0, 0%, 22%);
        --color-dashboard-map--connection: hsl(0, 0%, 93%);
        --color-pie-chart--empty: hsl(0, 0%, 24%);
        --color-status-indicator--green: hsl(143, 76%, 57%);
        --color-status-indicator--grey: hsl(0, 0%, 35%);
        --color-status-indicator--orange: hsl(37, 91%, 67%);
        --color-status-indicator--red: hsl(0, 100%, 50%);
        --color-project-list-background--default: hsl(0, 0%, 19%);
        --color-project-list-background--colored: hsl(0, 0%, 9%);
        --color-icon-fill: hsl(0, 0%, 54%);
        --color-icon-list-item--background: hsl(0, 0%, 54%);
        --color-icon-month-select--fill: hsl(0, 0%, 24%);
        --color-icon-checkbox--fill: hsl(0, 0%, 8%);
        --color-icon-checkbox--fill-on-label: hsl(0, 0%, 8%);
        --color-icon-checkbox--stroke: hsl(0, 0%, 35%);
        --color-icon-checkbox--stroke-on-label: hsl(0, 0%, 35%);
        --color-icon-checkbox--hover: hsl(0, 0%, 40%);
        --color-icon--map: hsl(0, 0%, 35%);
        --color-icon-action--fill-active: hsl(0, 0%, 66%);
        --color-icon-action--background: hsl(0, 0%, 23%);
        --color-icon-lock--background: hsl(0, 0%, 22%);
        --color-icon-volume-size-block-outline: hsl(0, 0%, 35%);
        --color-icon-search: hsl(0, 0%, 93%);
        --color-icon-activity--background: hsl(0, 0%, 22%);
        --color-icon-activity--icon: hsl(0, 0%, 93%);
        --color-icon-activity--status: hsl(0, 0%, 35%);
        --color-illustration-snapshot--fill: hsl(0, 0%, 35%);
        --color-illustration-sad-smiley--fill: hsl(0, 0%, 35%);
        --color-logo-text: #fff;
        --color-server-status-indicator-base--fill: hsl(0, 0%, 15%);
        --color-server-status-indicator-base--stroke: hsl(0, 0%, 15%);
        --color-server-status-indicator-off--fill: hsl(0, 0%, 35%);
        --color-server-status-indicator-off--stroke: hsl(0, 0%, 35%);
        --color-usage-preview-item-odd--background: hsl(0, 0%, 22%);
        --color-console--background: hsl(0, 0%, 15%);
        --color-incident--background: hsl(0, 0%, 19%);
    }
}

rx-secondary-nav-link {
    display: flex;
}


.indica {
    background-color: var(--color-status-indicator--green);
    border-radius: 100%;
}

.indica:before {
    inset: 0;
    position: absolute;
    background-color: var(--color-status-indicator--green);
    border-radius: 100%;
    animation-iteration-count: infinite;
    will-change: transform, opacity;
    animation-duration: 6s;
    animation-name: statu;
    content: "";
}

@keyframes statu {
    0% {
        transform: scale(1);
        transform-origin: 50% 50%;
        opacity: 1
    }

    25% {
        transform: scale(2);
        transform-origin: 50% 50%;
        opacity: 0
    }

    to {
        transform: scale(2);
        transform-origin: 50% 50%;
        opacity: 0
    }
}

.gridc {
    display: grid;
    /* grid-auto-columns: 100p; */
    grid-template-columns: 12px 200px minmax(0, 1fr) minmax(0, 1fr) 1fr;
    /* 
    grid-auto-flow: column; */
}




:root {
    --columns7:
        12px minmax(0, 2.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 0.6fr);
    --columns6:
        12px minmax(0, 2.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 0.6fr);
    --columns5:
        12px minmax(0, 2.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 0.6fr);
    --columns4:
        12px minmax(0, 2.5fr) minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 0.6fr);
}

.data_list,
lmlst-body {
    display: grid;
    /* gap: 15px; */
    /* max-height: 500px;
    overflow-y: auto; */
}

.data_list_header {
    position: sticky;
    top: 64px;
    z-index: 10;
    display: grid;
    grid-template-columns: var(--columns7);
    background-color: #141414;


    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: var(--color-step-header-background);
    mask: linear-gradient(black 80%, transparent);
}

.data_row {
    display: grid;
    grid-template-columns: var(--columns7);
    align-items: left;
    overflow: visible;
}

.data_row.cl6, .data_list_header.cl6 {
    grid-template-columns: var(--columns6);
}

.data_row.cl5, .data_list_header.cl5 {
    grid-template-columns: var(--columns5);
}

.data_row.cl4, .data_list_header.cl4 {
    grid-template-columns: var(--columns4);
}

.data_row:hover {
    background-color: var(--color-background--layer-10);
}


.data_cell {
    /* overflow: hidden; */
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Responsive */
@media (max-width: 900px) {
    :root {
        --columns7: 12px minmax(0, 2fr) minmax(0, 1fr);
        --columns6: 12px minmax(0, 2fr) minmax(0, 1fr);
        --columns5: 12px minmax(0, 2fr) minmax(0, 1fr);
        --columns4: 12px minmax(0, 2fr) minmax(0, 1fr);
    }

    /* Hide columns */
    .data_row .data_cell:nth-child(3),
    .data_row .data_cell:nth-child(4),
    .data_row:not(.cl4) .data_cell:nth-child(5),
    .data_row:not(.cl5,.cl4) .data_cell:nth-child(6),
    .data_row:not(.cl6,.cl5,.cl4) .data_cell:nth-child(7),
    .data_list_header div:nth-child(3),
    .data_list_header div:nth-child(4),
    .data_list_header:not(.cl4) div:nth-child(5),
    .data_list_header:not(.cl5,.cl4) div:nth-child(6),
    .data_list_header:not(.cl6,.cl5,.cl4) div:nth-child(7) {
        display: none;
    }
}

:root {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-hover: #273549;
    --border: #444;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --radius: 12px;
    --radius-sm: 8px;
    --transition: 0.2s ease;
}

.storage-bar {
    width: 100%;
    max-width: 120px;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.storage-bar-fill {
    height: 6px;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.storage-bar-fill.green {
    background: var(--success);
}

.storage-bar-fill.yellow {
    background: var(--warning);
}

.storage-bar-fill.red {
    background: var(--danger);
}




.sbtn.danger, .sbtn.primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.sbtn.danger:hover, .sbtn.primary:hover {
    color: #fff;
    background-color: var(--color-primary--hover);
    border-color: var(--color-primary--hover);
}




.menu-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 100%;

    border: none;
    background: transparent;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    cursor: pointer;
}

.menu-btn:hover {
    background-color: var(--color-border--dark);
}

.menu-btn.active {
    background-color: var(--color-border--dark);
}

.menu-btn span {
    width: 5px;
    height: 5px;

    border-radius: 999px;
    background: white;

    opacity: .75;
}

/* BACKDROP */

.backdrop {
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, .15);

    opacity: 0;
    display: none;

    transition: .2s;

    z-index: 99999;
}

.backdrop.active {
    opacity: 1;
    display: block;
}

/* MENU */

.menu {
    position: absolute;

    top: 46px;
    right: 0;

    width: 180px;

    background: #1f1f22;

    border: 0px solid rgba(255, 255, 255, .08);

    border-radius: 8px;

    padding: 6px 0px;

    display: flex;
    flex-direction: column;
    gap: 2px;

    opacity: 0;


    transition: .2s;

    z-index: 999999;
    transform: translateY(6px) scale(0);
    transform-origin: top right;
    background-color: var(--color-background--layer-50);
    box-shadow: 0 4px 6px #0000001a, 0 2px 4px #0000000f;
    -webkit-user-select: none;
    user-select: none;
    transition: transform .15s, opacity .15s;
}

.menu.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ITEMS */

.menuItem {
    line-height: 42px;

    border: none;
    background: transparent;

    border-radius: 0px;


    text-align: left;

    padding: 0 14px;

    cursor: pointer;
}

.menuItem:hover {
    background: rgba(255, 255, 255, .05);
}

.danger {
    color: #ff5f57;
}

/* MOBILE */

@media (max-width:767px) {

    .menu {
        position: fixed;

        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;

        width: auto;

        border-radius: 24px;

        padding: 12px;

        transform: translateY(100%);
    }

    .menu.active {
        transform: translateY(0);
    }

    .menuItem {
        height: 52px;
    }

}



.data_list_header {
    border: 1px solid var(--color-border--dark); border-radius: 6px 6px 0 0;
}

.dataGrid lmlst-body {
    border: 1px solid var(--color-border--dark); border-radius: 0 0 6px 6px;
    border-top: 0px solid var(--color-border--dark);
}

.data_row:not(:last-child) {
    border-bottom: 1px solid var(--color-border--dark);
}

.dataGrid lmlst-body {
    border-bottom: 1px solid var(--color-border--dark);
}

.dataGrid lmlst-footer {
    right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0px;
    border: none;
}


lmlst-footer li {
    color: var(--color-border--dark);
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 0.25rem;
    text-align: center;
    margin: 0px 5px;
}

[page] {
    width: 25px;
    height: 25px;
    color: var(--second);
    line-height: 25px;
    border-radius: 0.25rem;
    text-align: center;
    margin: 0px 5px;
    font-weight: 500;
    color: var(--color-text);
}

[page]:hover {
    background-color: var(--color-button-secondary-background--hover);
}

[page].active {
    background-color: var(--color-primary);
    color: #fff;
    cursor: default;
}

lmlst {
    clear: both;
    padding-bottom: 0px;
}

.pie-chart__slice {
    fill: #dbdbdb;
    stroke: var(--color-card-background);
    stroke-width: 2px;
}

.pie-chart__slice--red {
    fill: red;
}

.pie-chart__slice--empty {
    fill: var(--color-pie-chart--empty);
}