@import "/css/fonts.css";
:root {
    --primary: #2D7EFF;
    --primary-light: rgba(45, 126, 255, 0.15);
    --primary-hover: #60A5FA;
    /* Background COLORS */
    --bg-base: rgb(11, 21, 38);
    --bg-card: rgba(255, 255, 255, 0.07);
    --bg-input: rgba(255, 255, 255, 0.06);
    --bg-overlay: rgba(255, 255, 255, 0.08);
    /* TEXT COLORS */
    --text-primary: rgba(255, 252, 242, 0.96);
    --text-secondary: rgba(183, 201, 207, 0.65);
    --text-muted: rgba(220, 215, 200, 0.85);
    --text-tertiary: #F3F5F7;
    /* STATUS COLORS */
    --error-text: #F87171;
    --error-bg: rgba(248, 113, 113, 0.08);
    --success-text: var(--primary);

    /* header */
    --color-white-9: rgba(255, 255, 255, 0.09);
    --color-white-12: rgba(255, 255, 255, 0.12);
    --color-azure-1097: rgba(11, 21, 38, 0.97);
    --stroke-weight-1: 1px;
    --inner-padding-left: 40px;
    --inner-padding-right: 40px;
    --inner-padding-top: 40px;
    --inner-padding-bottom: 40px;

    /* container width */
    --content-center: 1243px;

    /* typography */
    --body-font: 'Roboto', sans-serif;
    --heading-font: 'Dr', sans-serif;
    --font-inter: 'Inter', sans-serif;
    --font-roboto-mono: 'Roboto Mono', sans-serif;
    --font-poppins: 'Poppins', sans-serif;

    /* extra colors */
    --color-white-7: var(--bg-base);
    --color-white-4: rgba(255, 255, 255, 0.04);
    --color-azure-5920: rgba(45, 126, 255, 0.20);
    --color-azure-5930: rgba(45, 126, 255, 0.30);
    --color-orange-5915: rgba(255, 187, 46, 0.15);
    --color-grey-9790: rgba(255, 252, 242, 0.90);
    --color-azure-7655: rgba(183, 201, 207, 0.55);
    --color-grey-9785: rgba(255, 252, 242, 0.85);
    --color-white-solid: #ffffff;
    --color-azure-59: var(--primary);
    --RVLVR-Black: var(--Black, #000);
    --color-white-86: rgba(255, 252, 242, 0.86);
    --footer-bg: #0B1525;
    --Gray-3: #828282;
    --color-blue-85: rgba(183, 201, 207, 0.85);
    --color-blue-65: var(--text-secondary);
    --color-azure-7610: rgba(183, 201, 207, 0.10);
    --color-grey-9792: rgba(255, 252, 242, 0.92);
    --color-azure-7645: rgba(183, 201, 207, 0.45);
    --color-grey-96: #F3F5F7;
    --color-grey-9795: rgba(255, 252, 242, 0.95);
    --color-azure-60: rgba(45, 126, 255, 0.60);
    --color-white-16: rgba(255, 255, 255, 0.16);
    --color-azure-5932: rgba(45, 126, 255, 0.32);
    --color-azure-18: rgba(45, 126, 255, 0.18);
    --color-azure-7665: var(--text-secondary);
    --color-orange-8285: rgba(220, 215, 200, 0.85);
    --color-white-10: rgba(255, 255, 255, 0.10);
    --color-white-20: rgba(255, 255, 255, 0.20);
    --color-white-8: rgba(255, 255, 255, 0.08);
    --btn-outline-bg-10: rgba(45, 126, 255, 0.10);
    --color-spring-green-5212: rgba(52, 211, 153, 0.12);
    --color-spring-green-5225: rgba(52, 211, 153, 0.25);
    --color-grey-9796: var(--text-primary);
    --trade-in-cta-shadow: 0 10px 15px -3px rgba(45, 126, 255, 0.30), 0 4px 6px -4px rgba(45, 126, 255, 0.30);
    --trade-in-form-placeholder: rgba(255, 252, 242, 0.48);
    --trade-in-card-bg: rgba(0, 0, 0, 0.25);
    --trade-in-process-card-bg: rgba(52, 211, 153, 0.10);
    --color-azure-5912: rgba(45, 126, 255, 0.12);
    --color-azure-68: var(--primary-hover);
    --color-spring-green-52: #34D399;
    --color-spring-green-5240: rgba(52, 211, 153, 0.40);
    --color-spring-green-5210: var(--trade-in-process-card-bg);
    --color-grey-46: #6B7280;
    --alternate-color: rgba(45, 126, 255, 0.50);
    --alternate-color-2: rgba(255, 255, 255, 0.03);
    --alternate-color-3: rgba(183, 201, 207, 0.03);
    --alternate-color-4: var(--color-spring-green-52);
    --alternate-color-5: rgba(52, 211, 153, 0.70);
    --alternate-color-6: rgba(248, 113, 113, 0.30);
    --alternate-color-7: rgba(0, 132, 214, 0.10);
    --alternate-color-8: rgba(0, 201, 167, 0.30);
    --alternate-color-9: rgba(0, 201, 167, 0.10);
    --alternate-color-10: rgba(255, 252, 242, 0.77);
    --alternate-color-11: #4f8cff;
    --alternate-color-12: #2f6ee6;
    --alternate-color-13: rgba(183, 201, 207, 0.80);
    --alternate-color-14: rgba(255, 255, 255, 0.60);
    --alternate-color-15: rgba(255, 255, 255, 0.15);
    --alternate-color-16: rgba(183, 201, 207, 0.50);
    --alternate-color-17: rgba(183, 201, 207, 0.75);
    --alternate-color-18: rgba(255, 252, 242, 0.88);
    --alternate-color-19:rgba(183, 201, 207, 0.02);
    --alternate-color-20: rgba(11, 21, 38, 0.98);
    --alternate-color-21: rgba(0, 0, 0, 0.50);
    --alternate-color-22: #152847;
}


a {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--heading-font);
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0;
    padding: 0;
}

.gap-12{gap: 12px;}
.gap-11{gap: 11px;}
.gap-10{gap: 10px;}
.gap-16{gap: 16px;}
.gap-20{gap: 20px;}
.gap-24{gap: 24px;}
.gap-32{gap: 32px;}
.gap-40{gap: 40px;}
.gap-50{gap: 50px;}

.border-radius-12{border-radius: 12px;}
.border-radius-15{border-radius: 15px;}

.flex-1 {flex: 1;}

.d-grid{display: grid;}
.two-cols-grid{grid-template-columns: repeat(2, 1fr);}
.three-cols-grid{grid-template-columns: repeat(3, 1fr);}
.four-cols-grid{grid-template-columns: repeat(4, 1fr);}
.five-cols-grid{grid-template-columns: repeat(5, 1fr);}


@media screen and (max-width: 992px) {
    .five-cols-grid{grid-template-columns: repeat(4, 1fr);}
}


@media screen and (max-width: 767px) {
    .two-cols-grid,
    .three-cols-grid,
    .five-cols-grid{grid-template-columns: repeat(1, 1fr);}
    .four-cols-grid{grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 640px) {
    .three-cols-grid,
    .four-cols-grid,
    .five-cols-grid{grid-template-columns: repeat(1, 1fr);}
}


.card-deck {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (min-width: 576px) {
     .card-deck {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .card-deck .card{
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
    }
}

.btn,
.btn-medium,
.btn-small,
.button-as-link {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    line-height: 150%;
    border-radius: 8px;
    text-decoration: none;
    position: relative;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-transform: none !important;
}

.btn {
    padding: 10px 24px;
}

.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--color-white-solid);
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--body-font);
    color: var(--text-primary);
    background-image: linear-gradient(48deg, #152847 28.41%, #000 87.76%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.container {
    max-width: calc(var(--content-center) + var(--inner-padding-left) + var(--inner-padding-right));
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: var(--inner-padding-left);
    padding-right: var(--inner-padding-right);
}


.inner-container {
    padding: var(--inner-padding-top) var(--inner-padding-right) var(--inner-padding-bottom) var(--inner-padding-left);
}


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

    .container,
    .inner-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}



/* header start here */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--stroke-weight-1) solid var(--color-white-9);
    background: var(--color-azure-1097);
    position: relative;
    z-index: 2;
    -webkit-animation: blur(10px);
    backdrop-filter: blur(10px);

}

.header-sub-domain {
    color: var(--color-azure-7655);
    font-size: 11.5px;
    font-style: normal;
    font-weight: 700;
    line-height: 133.565%;
    letter-spacing: 3.226px;
    text-transform: uppercase;
    text-decoration: dashed;
    font-family: var(--font-roboto-mono);
    text-decoration: none;
}

.right-menu-item,
.profile-menu-item > .btn,
.profile-menu-item .dropdown-menu{
    border-radius: 8px;
    border: var(--stroke-weight-1) solid var(--color-white-12);
    background: var(--color-white-7);
    padding: 6px 12px;
    min-height: 40px;
    -webkit-backdrop-filter: blur(100px);    
    backdrop-filter: blur(100px);
    font-size: 14px;
}


.right-menu-item,
.profile-menu-item .dropdown-menu .dropdown-item{
    color: var(--color-grey-9790);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
 
}

.profile-pane .btn-primary-rvlvr{font-size: inherit;}

.profile-menu-item .dropdown-menu .dropdown-item{
       text-transform: uppercase;
}


.profile-menu-item .dropdown-menu .dropdown-item{
    min-height: 40px;
    padding: 0.6rem 1.4rem;
    font-size: 0.85rem;
}

.profile-menu-item > .btn:hover,
.profile-menu-item .dropdown-menu .dropdown-item:hover,
.profile-menu-item > .btn:hover:active,
.profile-menu-item > .btn:active,
.profile-menu-item > .btn:focus,
.profile-menu-item > .btn:focus-visible,
.nav-right a:hover,
.nav-right a:hover:active,
.nav-right a:active,
.nav-right a:focus,
.nav-right a:focus-visible,
.right-menu-item:hover,
.right-menu-item:hover:active,
.right-menu-item:active,
.right-menu-item:focus,
.right-menu-item:focus-visible,
.profile-menu-item .dropdown-menu .dropdown-item:hover{
    background: var(--bg-card);
    color: var(--color-grey-9790);  
    border-color: var(--rvlvr-slate);
}

.profile-menu-item .dropdown-menu{
    background: var(--alternate-color-22);
    min-width: 187px;
}
.profile-menu-item .dropdown-menu .dropdown-item{color: var(--color-white-solid); font-size: 14px;
    padding: 6px 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: var(--stroke-weight-1) solid var(--color-white-12);
    color: var(--color-white-solid);
}

.profile-menu-item .dropdown-item:focus, 
.profile-menu-item .dropdown-item:hover,
.profile-menu-item .dropdown-item:active,
.profile-menu-item .dropdown-item:active:hover,
.profile-menu-item .dropdown-item:focus-visible{background-color: var(--bg-base); color: var(--color-white-solid); border-radius: 4px;}

.profile-menu-item > .btn.dropdown-toggle::after{
    border: none;
    content: "";
    width: 13px;
    height: 13px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(/images/down-arrow.svg);
}

.hamburger-menu{cursor: pointer;}
.header-nav-user-photo {
    border-radius: 8px;
    border: var(--stroke-weight-1) solid var(--color-azure-5920);
    background: var(--color-orange-5915);
}
.logged-user {
    color: var(--color-grey-9790);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px;
    text-overflow: ellipsis;
    width: 93px;
    max-width: 93px;
    overflow: hidden;
}
.logged-user-company:empty{display: none;}
.logged-user-company {
    color: var(--color-azure-7655);
    font-size: 11.2px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

.header-nav-user-photo {
    color: var(--color-azure-59);
    text-align: center;
    font-size: 11.2px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: 0.448px;
    height: 30px;
    width: 30px;
    min-width: 30px;
}

.offer-header-item .offer-label {
    color: var(--color-grey-9785);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
}

.offer-header-item .offer-notification {
    display: flex;
    height: 20px;
    width: 20px;
    padding: 0 7.01px;
    justify-content: center;
    align-items: center;
    border-radius: 16777200px;
    background: var(--color-azure-59);
    color: var(--color-white-solid);
    text-align: center;
    font-size: 10.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
}

@media screen and (max-width:767px){
    .header .inner-container{padding-top: 20px; padding-bottom: 20px;}
    .header .inner-container .brand-logo img,
    .footer .brand-logo img{max-width: 50px; width: 100%; height: auto;}
    .profile-pane{width: 100%;}
}
/* header start here */

/* main start here */

.max-w-670 {
    max-width: 670px;
}

/* home-search-wrapper start*/
.home-search-wrapper {
    padding-top: 60px;
    padding-bottom: 50px;
}

.home-search-wrapper h1 {
    font-size: 80px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -1.6px;

}

.home-search-wrapper h1 span {
    color: var(--primary);

}

.home-search-wrapper .home-search-info {
    color: var(--color-grey-50, #7F7F7F);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
    font-family: var(--font-roboto-mono);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-search-wrapper .home-search-info p {
    margin: 0;
    padding: 0;
}

.home-search-wrapper .home-search {
    min-height: 68px;
    padding: 16px;
    background-color: var(--color-white-solid);
    border-width:2px;
    border-style: solid;
    border-color: transparent;
}


.home-search-wrapper .home-search input[type=text] {
    color: var(--RVLVR-Black);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
    padding: 10px;
}

.home-search-wrapper .home-search input[type=text]::placeholder,
.home-search-wrapper .home-search input[type=text]::-webkit-input-placeholder {
    color: var(--RVLVR-Black);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border: none;
}

.home-search .btn-primary-rvlvr{padding: 10px 24px;}

@media screen and (max-width:767px){
    .home-search-wrapper h1{font-size: 40px;}
}

/* home-search-wrapper end*/


/* .home-feature-card start */

.home-feature-card {
    border: 1px solid var(--primary);
    background: var(--color-azure-5920);
    min-height: 180px;
    padding: 34px 33px;
    text-align: left;
    font-family: var(--body-font);
    color: var(--color-white-86);
    font-family: var(--font-inter);
}

.home-feature-card h2 {
    font-family: inherit;
    color: inherit;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 116.667%;
    letter-spacing: -0.439px;
}

.home-feature-card p {
    font-family: inherit;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 175%;
    letter-spacing: -0.439px;
    color: var(--color-blue-85);
}

.home-feature-card .card-body {
    padding: 0;
}

/* home-feature-card start */


/* footer */
footer {
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: var(--footer-bg);
    font-family: var(--font-poppins);
    color: var(--Gray-3);
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 114.286%;
    letter-spacing: 0.42px;

}

footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 48px;
    row-gap: 16px;
}

footer ul li {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 157.143%;
    letter-spacing: 0.42px;
}

footer ul li a {
    color: inherit;
    text-decoration: none;
}

footer ul li a:hover {
    color: var(--color-white-solid);
}

.footer-right {
    max-width: 221px;
    width: 100%;
}

.footer-left-menu p {
    margin: 0;
    padding: 0;
}

.footer-header {
    color: var(--color-white-solid);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.footer-social-media>li img {
    opacity: 0.3;
}

.footer-social-media>li>a:hover img {
    opacity: 1;
}

/* footer */



/* trusted-partner-wrapper start here */

/* trusted-partner-card */
.trusted-partner-wrapper {
    padding-top: 50px;
    padding-bottom: 107px;
}

.trusted-partner-card {
    height: 137px;
    height: 137px;
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--bg-card);
    background: var(--alternate-color-2);
}

.sub-header {
    color: var(--primary);
    text-align: center;
    font-family: var(--font-roboto-mono);
    font-size: 9.9px;
    font-style: normal;
    font-weight: 700;
    line-height: 150.303%;
    letter-spacing: 1.984px;
    text-transform: uppercase;
}

.circular-icon {
    width: 4px;
    height: 4px;
    background: var(--color-azure-5920);
    box-shadow: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.circular-icon::after {
    content: "";
    background-color: var(--color-azure-5930);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    border-radius: 100%;
    box-shadow:
        0 0 30px rgba(59, 130, 246, 0.6),
        0 0 80px rgba(59, 130, 246, 0.4),
        0 0 140px rgba(59, 130, 246, 0.2);

}

.trusted-partner-wrapper h2 {
    font-size: 26.4px;
    font-weight: 800;
    line-height: 115%;
    letter-spacing: -0.528px;
    font-family: var(--body-font);
}

.muted-text {
    color: var(--color-blue-65);
    text-align: center;
    font-size: 13.1px;
    font-weight: 400;
    line-height: 150.229%;
}

.muted-text a {
    color: inherit;
    text-decoration: none;
}

.trusted-partner-body {
    max-width: 1100px;
}

@media screen and (max-width:767px){
    .trusted-partner-wrapper{padding-bottom: 60px;}
}

/* trusted-partner-wrapper end here */

/* moving-ticker-wrapper start */
.moving-ticker-wrapper .moving-ticker-header {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hr-wrapper hr {
    margin: 0;
    padding: 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: var(--color-azure-7610);
}

.moving-ticker-header>div {
    white-space: nowrap;
}

.moving-ticker-header .sub-header {
    color: var(--color-blue-65);
}

.moving-ticker-header .trade-in-indicator ul>li {
    list-style: none;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.moving-ticker-header .trade-in-indicator ul>li+li {
    padding-left: 9px;
}

.moving-ticker-header .trade-in-indicator ul>li+li::before {
    width: 4px;
    height: 4px;
    border-radius: 100px;
    content: "";
    display: flex;
    background-color: var(--color-blue-65);
    top: 6px;
    left: 0;
    position: absolute;
}

.moving-ticker-header .circular-icon {
    background-color: var(--primary);
}

.moving-ticker-item {
    padding: 14px 20px;
    justify-content: space-between;
    min-width: 342px;
    border-radius: 12px;
    border: var(--stroke-weight-1) solid var(--bg-card);
    background: var(--color-white-4);

}

.moving-ticker-header {
    color: var(--color-grey-9792);
    font-size: 13.1px;
    font-weight: 600;
    line-height: 150.229%;
}

.moving-ticker-item-code {
    color: var(--color-azure-7645);
    font-family: var(--font-roboto-mono);
    font-size: 9.3px;
    font-style: normal;
    font-weight: 400;
    line-height: 149.677%;
    letter-spacing: 0.464px;
}

.moving-ticker-item-product {
    color: var(--color-grey-96);
    font-size: 9px;
    font-weight: 600;
    line-height: 149.333%;
    letter-spacing: 0.448px;
}

.mt-analytics-body-graph-data {
    color: var(--color-azure-59);
    font-family: var(--font-roboto-mono);
    font-size: 10.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.mt-analytics-header {
    color: var(--color-grey-9795);
    font-family: var(--font-roboto-mono);
    font-size: 16px;
    font-weight: 700;
    line-height: 150%;
}

.moving-ticker-body {
    position: relative;
    min-height: 86px;
}


.moving-ticker-body::after,
.moving-ticker-body::before{content: ""; display: inline; height: 100%; width: 300px; position: absolute; top: 0; z-index: 1;}

.moving-ticker-body::before{
    background: linear-gradient(90deg, rgba(21, 40, 71, 1) 0%, rgba(255, 255, 255, 0) 100%);
    left: 0;
}

.moving-ticker-body::after{
    background: linear-gradient(-90deg, rgba(16, 25, 40, 1) 0%, rgba(255, 255, 255, 0) 100%);
    right: 0;
}

@media screen and (max-width:992px) {
    .moving-ticker-body::before{
        background: linear-gradient(90deg, rgba(19, 35, 63, 1) 0%, rgba(255, 255, 255, 0) 100%);
    }
}

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

.moving-ticker-body::after,
.moving-ticker-body::before{ width: 150px;}

    .moving-ticker-body::before{
        background: linear-gradient(90deg, rgba(16, 25, 40, 1) 0%, rgba(255, 255, 255, 0) 100%);
        left: 0;
    }
    .moving-ticker-body::after{
        background: linear-gradient(-90deg, rgba(16, 25, 40, 1) 0%, rgba(255, 255, 255, 0) 100%);
        right: 0;
    }  
}

.moving-ticker-inner {
    overflow: visible;
}

.ticker-item {
    animation: bannermove 120s linear infinite;
    animation-play-state: running;
    position: absolute;
    top: 0px;
    left: 0px;
}


.running-animation .ticker-item {
    animation-play-state: running;
}

.pause-animation .ticker-item {
    animation-play-state: paused !important;
    ;
}

@media(hover: hover) {
    .ticker-hover .ticker-item:hover {
        animation-play-state: paused !important;
    }
}

@keyframes bannermove {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-50%, 0);
    }
}


/* moving-ticker-wrapper end */



/* result page */
.estimation-price-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
}

.estimation-price-wrapper .estimates-card {
    display: flex;
    max-width: 700px;
    min-height: 213px;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--item-spacing-15_99, 15.99px);
    border-radius: 16px;
    border: var(--stroke-weight-1) solid var(--color-azure-5932);
    background: var(--color-white-7);
    box-shadow: 0 0 40px 0 var(--color-azure-18);
}

.estimates-header-estimate {
    color: var(--color-azure-7665);
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.estimates-header-estimate p {
    margin: 0;
    padding: 0;
}

.estimates-header-price .estimated-price {
    color: var(--color-azure-59);
    font-family: Dr;
    font-size: 60.8px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0.608px;
}

.estimates-header-cta .btn {
    width: 170px;
    padding: 16px 32px;
    gap: 8px;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 112.5%;    
}

.mid-estimate-price {
    color: var(--color-orange-8285);
    font-family: var(--font-roboto-mono);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 149.76%;
    text-align: center;
}

.mid-estimate-price .mid-estimate-header {
    color: var(--color-azure-7665);
}

.mid-estimate-price .mid-estimate-range {
    color: var(--color-orange-8285);
    font-size: 12.5px;
}

.link-btn {
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 133.333%;
}

.link-primary {
    color: var(--primary);
}

.btn-primary {
    background-color: var(--primary);
    font-weight: 800;
    color: var(--color-white-solid);
}

.estimates-info-right .link-btn {
    white-space: nowrap;
}

.estimates-info-content .estimates-header-estimate {
    text-transform: none;
    letter-spacing: normal;
    max-width: 438px;
}

.hr-wrapper hr {
    margin: 0;
    padding: 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: var(--color-azure-7610)
}


.estimates-card-table {
    max-width: 700px;
    width: 100%;
}

.estimates-card-table .table-wrap{border-radius: 12px;}

table>thead>tr>th {
    stroke-width: 1px;
    stroke: var(--color-white-10);
    text-align: left;
    color: var(--color-azure-7665);
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 133.333%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    vertical-align: middle;
    background-color: var(--alternate-color-2);
    /* border: 1px solid var(--color-white-10); */

    border-collapse: collapse;
}

table>thead>tr>th,
table>tbody>tr>td {
    padding: 12px 9px;
}

table>tbody>tr>td {
    color: rgba(243, 245, 247, 0.50);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 142.857%;
}

table>tbody>tr+tr>td {
    border-top: 1px solid var(--color-white-10);
}
.table-wrap table>tbody>tr>td:first-child,
.table-wrap table>thead>tr>th:first-child{
padding-left: 16px;
}
.table-wrap table>tbody>tr>td:last-child,
.table-wrap table>thead>tr>th:last-child{
   padding-right: 22px; 
}

.tb-cat-badge {
    border-radius: 16777200px;
    background: var(--primary-light);
    display: inline-flex;
    padding: 2px 8px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-azure-60);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 133.333%;
}

table>tbody>tr>td.tb-estimate-col .tb-estimate-price {
    text-align: right;
    font-family: var(--font-roboto-mono);
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 142.857%;
    white-space: nowrap;
    color: var(--color-grey-9796);
}

table>tbody>tr>td.tb-estimate-col .tb-estimate-sub {
    color: var(--color-azure-7665);
    text-align: right;
    font-family: var(--body-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 133.333%;
}



.tb-estimate-price-col {
    color: var(--color-azure-60);
    font-family: var(--font-roboto-mono);
}

.estimates-card-table .product-description {max-width: 180px; display: block;}

.estimates-card-table .product-description,
.estimates-card-table .tb-cat-badge,
.estimates-card-table .toggle-ico {
    opacity: 0.5;
}
.estimates-card-table table input[type="number"],
table>tbody>tr>td.tb-estimate-col .tb-estimate-price,
table>tbody>tr>td.tb-estimate-col .tb-estimate-sub,
.estimates-card-table .td-total-price{opacity: 0.3;}

.estimates-card-table tbody > tr.active > td input[type="number"],
.estimates-card-table tbody > tr.active > td .tb-estimate-price,
.estimates-card-table tbody > tr.active > td .tb-estimate-sub,
.estimates-card-table tbody > tr.active > td .td-total-price,
.estimates-card-table tbody > tr.active > td .product-description,
.estimates-card-table tbody > tr.active > td .tb-cat-badge,
.estimates-card-table tbody > tr.active > td .toggle-ico{opacity:1;}

table>tbody>tr>td input[type="number"] {
    border-radius: 8px;
    border: var(--stroke-weight-1, 1px) solid var(--color-white-10);
    background: var(--bg-input);
    color: rgba(var(--text-primary), 0.96);
    text-align: center;
    font-family: var(--font-roboto-mono);
    font-size: 12.8px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}


table>tbody>tr.active>td {
    background-color: var(--color-white-16);
    color: var(--color-white-solid);
    border-color: var(--color-white-16);
}


table>tbody>tr.active>td .tb-cat-badge {
    color: var(--color-azure-68);
}

table>tbody>tr.active>td.tb-estimate-price-col {
    color: var(--primary);
}

table>tbody>tr>td.tb-estimate-col .tb-estimate-sub {

    color: var(--color-azure-7665);
}


.form-check:not(.form-switch) .form-check-input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;

}


.form-check:not(.form-switch) {
    padding-left: 18px;
    min-height: auto;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.form-check:not(.form-switch) .form-check-label {
    display: flex;
    align-items: center;
}

.form-check:not(.form-switch) .form-check-input {
    margin-left: -18px;
    border-radius: 4px;
    margin-top: 0;
    width: auto;
    padding: 0;
}

.form-check:not(.form-switch) input.form-check-input {
    border-color: var(--color-white-20);
    background: var(--color-white-8);
}

.form-check:not(.form-switch) .form-check-input {
    padding: 0;
}

.form-check:not(.form-switch) .form-check-input:checked[type=checkbox],
table .form-check:not(.form-switch) .form-check-input:checked[type=radio] {
    background-image: url(/images/circle-checkbox.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
    background-color: var(--primary);
    border-color: var(--primary);
}

table thead>tr>th input.form-check-input {
    border-color: var(--color-azure-59);
    background: var(--color-azure-5930);
}


.form-group label,
table .form-header {
    color: var(--color-blue-65);
    font-size: 12px;
    font-weight: 400;
    line-height: 133.333%;
    letter-spacing: 0.6px;
    margin: 0 0 8px 0;
    padding: 0;
    text-transform: uppercase;
}

table .form-intro {
    color: var(--color-white-solid);
    font-size: 12px;
    font-weight: 400;
    line-height: 133.333%;
    letter-spacing: 0.6px;
}

.form-check:not(.form-switch) .form-check-label {
    color: var(--color-white-solid);
    text-transform: none;
    font-weight: 500;
    margin: 0;
}

table .fmv-note {
    color: var(--color-azure-7665);
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
    max-width: 350px;
}

table .fmv-note > a{color: inherit; font-family: inherit;}
table .fmv-note > a:hover{color: var(--primary);}

.device-estimate {
    padding: 12px 0 18px 0;
    max-width: 100%;
}

.device-estimate .form-footer {
    margin-top: 43px;
}

.device-estimate .container {
    padding-left: 16px;
    padding-right: 16px;
}

/* fields global style */


/* Buttons */
.btn-primary-rvlvr {
    background: var(--rvlvr-purple);
    color: var(--color-white-solid);
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: normal;
    text-transform: uppercase;
    padding: 0.6rem 1.4rem;
    /* border-radius: 3px; */
    cursor: pointer;
    transition: opacity 0.15s;
    display: inline-block;
}

.btn-primary-rvlvr:hover,
.btn-primary-rvlvr:hover,
.btn-primary-rvlvr:focus,
.btn-primary-rvlvr:active,
.btn-primary-rvlvr:active:hover,
.btn-primary-rvlvr:focus-visible{
    opacity: 0.88;
    color: var(--color-white-solid);
}

.btn-ghost-rvlvr {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.55rem 1.2rem;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    display: inline-block;
}

.btn-ghost-rvlvr:hover,
.btn-black-rvlvr:hover,
.btn-black-rvlvr:focus,
.btn-black-rvlvr:active,
.btn-black-rvlvr:active:hover,
.btn-black-rvlvr:focus-visible{
    border-color: var(--rvlvr-black);
    color: var(--rvlvr-black);
    background-color: var(--color-white-solid);
}

.btn-black-rvlvr:hover svg path,
.btn-black-rvlvr:focus svg path,
.btn-black-rvlvr:active svg path,
.btn-black-rvlvr:active:hover svg path,
.btn-black-rvlvr:focus-visible svg path{
    stroke: var(--rvlvr-black);
}

.profile-common-design .form-control,
input[type="text"].form-control,
input[type="date"].form-control,
input[type="time"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="password"].form-control,
textarea.form-control,
select.form-control{
    border-radius: 12px;
    border: 1px solid var(--bg-card);
    background-color: var(--color-white-4);
    color: var(--color-white-solid);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 142.857%;
    outline: none;
    transition: all .25s ease;
    appearance: none;
}


/* Date icon */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

/* textarea specific */
textarea.form-control {
    min-height: 100px;
    resize: none;
    overflow: auto;
}

/* placeholder styling */
input.form-control::placeholder,
textarea.form-control::placeholder,
input[type="date"].form-control::placeholder {
    color: rgba(183, 201, 207, 0.33);
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

/* focus state */
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
input[type="date"].form-control:focus {
    border-color: var(--form-border-focus);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
    background-color: rgba(11, 21, 38, 0.50);
    color: inherit;
}

/* disabled */
input.form-control:disabled,
textarea.form-control:disabled,
select.form-control:disabled,
input[type="date"].form-control:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.btn-outline-primary-rvlvr {
    border-radius: 12px;
    border: 1px solid var(--color-azure-5930);
    background: var(--btn-outline-bg-10);
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 142.857%;
    border-radius: 12px;
    border: 1px solid var(--color-azure-5930);
    background: var(--btn-outline-bg-10);
}

.btn-outline-primary-rvlvr:hover {
    background: var(--primary);
    color: var(--color-white-solid);
    border-color: var(--primary);
}

.btn-outline-primary-rvlvr:hover svg path {
    stroke: white;
}

.btn-primary-rvlvr:hover,
.btn-primary-rvlvr:focus,
.btn-primary-rvlvr:active,
.btn-primary-rvlvr:active:hover,
.btn-primary-rvlvr:focus-visible {
    background: var(--primary-hover) !important;    
    border-color: var(--primary-hover) !important;
}

.btn-black-rvlvr {
    /* background: var(--primary-hover);
    border-color: var(--primary-hover);      */
    background: var(--color-azure-7610);
    color: var(--color-white-solid);
}

.table-data-info,
.price-range {
    color: var(--color-azure-7665);
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
}

.min-estimate-price-range {
    color: var(--primary);
    text-align: right;
    font-family: var(--font-roboto-mono);
    font-size: 17.6px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.estimates-card-table table > tfoot>tr>td{
    background-color: var(--alternate-color-2);
    border: 1px solid var(--color-white-10);
    border-collapse: collapse;
     padding: 23px 30px;
}
.estimates-card-table table > tfoot>tr>td:first-child{border-right: 0;}
.estimates-card-table table > tfoot>tr>td:last-child{border-left: 0;}
/* fields global style */

/* result page */



/* trade-in page start */
.trade-in-process-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
}

.trade-in-process-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16777200px;
    background: var(--color-spring-green-5212);
}

.trade-in-process-card {
    background: var(--trade-in-process-card-bg);
    border: 1px solid var(--color-spring-green-5225);
    padding: 24px;
    border-radius: 16px;
}

.trade-in-process-card-header {
    color: var(--color-grey-50);
    font-family: var(--heading-font);
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 140%;
    letter-spacing: 0.2px;
}

.trade-in-process-card-body {
    color: var(--color-azure-7665);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
}

.trade-in-process-card-body ul>li,
.trade-in-stepper-nav ul>li {
    margin: 0;
    list-style: none;
    position: relative;
}

.trade-in-process-card-body ul>li+li {
    padding-left: 5px;
    margin-left: 5px;
}

.trade-in-process-card-body ul>li+li::before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-azure-7665);
}

.ref-no-label {
    font-family: var(--font-roboto-mono);
    color: var(--primary);
}

.trade-in-process-inner {
    max-width: 544px;
}


.trade-in-stepper-nav ul>li {
    display: inline-flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
    justify-content: center;
}

.trade-in-stepper-nav .step-icon {
    display: flex;
    width: 48px;
    min-height: 48px;
    padding: 0;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    color: var(--color-blue-65);
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: -0.312px;
    border-radius: 16777200px;
    border: 1px solid var(--bg-card);
    background: var(--color-azure-7610);
}

.trade-in-stepper-nav .step-label {
    color: var(--color-blue-65);
    text-align: center;
    font-family: var(--font-inter);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
}


.trade-in-stepper-nav ul>li.active .step-icon {
    background-color: var(--primary);
    color: var(--color-white-solid);
    box-shadow: 0 10px 15px -3px var(--alternate-color), 0 4px 6px -4px var(--alternate-color);
}

.trade-in-stepper-nav ul>li.active .step-label {
    color: var(--color-white-solid);
}


.trade-in-stepper-nav ul>li.completed .step-icon {
    border: 1px solid var(--alternate-color);
    background: var(--color-azure-5930);
    color: var(--primary);
}


.trade-in-stepper-nav ul>li.completed {
    cursor: pointer;
}

.trade-in-stepper-nav ul>li.completed.inactive{
    pointer-events: none;
    opacity: 0.5;    
}


.trade-in-stepper-nav>ul>li {
    position: relative;
    max-width: 67px;
    width: 100%;
}

.trade-in-stepper-nav>ul>li+li::before {
    content: "";
    background: var(--color-white-20);
    display: inline-block;
    height: 2px;
    max-width: 63px;
    width: 100%;
    position: absolute;
    right: 125%;
    top: 50%;
    transform: translateY(50%);
}

.trade-in-stepper-card {
    padding: 33px;
    border-radius: 16px;
    border: 1px solid var(--bg-card);
    background: var(--color-white-4);
    box-shadow: 0 25px 50px -12px var(--trade-in-card-bg);
    color: var(--color-white-solid);
}

.trade-in-stepper-card input[type="text"].form-control,
.trade-in-stepper-card input[type="email"].form-control,
.trade-in-stepper-card input[type="tel"].form-control,
.trade-in-stepper-card input[type="password"].form-control,
.trade-in-stepper-card input[type="date"].form-control,
.trade-in-stepper-card input[type="time"].form-control,
.trade-in-stepper-card textarea.form-control,
.trade-in-stepper-card select.form-control {
    padding: 15px 16px;
    font-family: var(--font-inter);
}

.trade-in-stepper-card .btn {
    display: inline-flex;
    padding: 11.5px 31.945px 12.5px 31px !important;
    font-family: var(--body-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.312px;
    /* color: var(--color-white-solid); */
}

.reconciliation-inner .trade-in-stepper-card .btn {
    min-height: 88px;
}

.trade-in-stepper-card .settlement-subtext {
    font-size: 30px;
    line-height: 30px;
}

.trade-in-stepper-card .btn-primary-rvlvr {
    box-shadow: var(--trade-in-cta-shadow);
}

.settlement-common-cta {
    border-radius: 12px;
    border-style: solid;
    border-color: var(--bg-card);
    background: var(--color-azure-7610);
    color: var(--text-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    gap: 12px;
    padding: 14px 15px;
}

.payment-ready-btn {
    border: 1px solid var(--alternate-color-8);
    background: var(--alternate-color-9);
}

.stat-card .stat-card-header {
    color: var(--alternate-color-10);
    text-align: center;
    font-family: var(--heading-font);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
}

.stat-card .stat-card-text-muted {
    color: var(--text-secondary);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
}


.stat-card-variance .stat-card-header {
    color: var(--error-text);
}

.stat-card-trade-in .stat-card-header {
    color: var(--primary);
}

.stat-card-trade-in {
    border: 1px solid var(--color-azure-5930);
    background: var(--color-white-4);
    box-shadow: 0 0 20px 0 var(--btn-outline-bg-10);
}


.asset-line-wrapper .card {
    background-color: transparent;
}

.asset-line-wrapper .common-table-design>:not(caption)>*>* {
    background-color: transparent;
}

.asset-line-wrapper .common-table-design>tbody>tr>td {
    border: none;
}

.reconciliation-inner .section-title {
    color: var(--text-secondary);
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 133.333%;
    letter-spacing: 0.6px;
}

.asset-line-wrapper .common-table-design>tbody>tr>td .badge-grade {
    width: 25px;
    height: 30px;
    border-radius: 12px;
    border: 1px solid var(--color-azure-5930);
    background: var(--btn-outline-bg-10);
    color: var(--primary);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.asset-line-wrapper .common-table-design>tbody>tr>td.color-primary {
    color: var(--primary);
}

.asset-line-wrapper .common-table-design>tbody>tr>td.color-error {
    color: var(--error-text);
}

.asset-line-wrapper .common-table-design>tbody>tr>td.estimate-price {
    color: var(--alternate-color-10);
}

.asset-line-wrapper .common-table-design>tbody>tr>td {
    border: none;
    color: var(--color-white-solid);
    color: var(--text-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
}

.asset-line-wrapper .common-table-design>thead>tr>th {
    padding: 12px;
}

.asset-line-wrapper .common-table-design>tbody>tr>td:first-child {
    padding-left: 0;
    padding-right: 0;
}

.asset-line-wrapper .common-table-design>thead>tr>th:first-child {
    padding-left: 24px;
    padding-right: 24px;
}

.asset-line-wrapper .common-table-design>tbody>tr>td {
    padding: 16px 12px;
}

.asset-line-wrapper .section-title,
.asset-line-wrapper .common-table-design>thead>tr>th {
    color: var(--text-secondary);
    font-family: var(--font-roboto-mono);
}

.asset-line-wrapper .section-title {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 133.333%;
    letter-spacing: 0.6px;
}

.asset-line-wrapper .common-table-design>thead>tr>th {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 133.333%;
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--bg-card);


}

/* placeholder styling */
.trade-in-stepper-card input.form-control::placeholder,
.trade-in-stepper-card textarea.form-control::placeholder,
.trade-in-stepper-card select.form-control::placeholder {
    color: var(--trade-in-form-placeholder);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.312px;
}

.trade-in-stepper-card-header {
    font-family: var(--font-inter);
}
.trade-in-stepper .form-label{
    color: var(--color-white-86);
    font-family: var(--font-inter);
    font-size: 16px;
    font-weight: 500;
    line-height: 150%; 
    letter-spacing: -0.312px;    
    text-transform: none;
}

.trade-in-stepper-card-header .trade-in-header {
    font-family: inherit;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.396px;
}

.trade-in-stepper-card-header .trade-in-subheader {

    color: var(--color-blue-65);
    font-family: inherit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.312px;
}

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

.color-text-primary{
    color: var(--text-primary);
}

@media screen and (max-width:556px) {
    .trade-in-stepper-nav>ul>li+li::before {
        display: none;
    }
}

.almost-done-header .almost-done-icon {

    display: inline-flex;
    width: 80px;
    height: 80px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;

    border-radius: 16777200px;
    background: var(--color-azure-5920);
}

.almost-done-desc {
    text-align: center;
    font-family: var(--font-inter);
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: 0.396px;
}

.shipping-common-card {
    border-radius: 12px;
    background: var(--alternate-color-3);
}

.shipping-common-card {
    color: var(--color-white-solid);
    font-family: var(--font-inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
    letter-spacing: -0.15px;
}

.shipping-details-des ul>li,
.almost-question-card ul>li {
    color: inherit;
    list-style: none;
}

.shipping-details-label {
    color: var(--text-secondary);
}

.almost-done-body-header {
    font-family: var(--font-inter);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 155.556%;
    letter-spacing: -0.439px;
}

.almost-question-card {
    border-radius: 16px;
    border: 1px solid var(--color-azure-5930);
    background: var(--btn-outline-bg-10);
    color: var(--color-white-solid);

}

.almost-question-card>.card-body {
    padding: 25px;
    font-family: var(--font-inter);
}

.almost-question-card .almost-question-header {
    font-family: inherit;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.449px;
}

.almost-question-sub-header {
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
    letter-spacing: -0.15px;
}

.almost-question-sub-header span {
    color: var(--color-white-solid);
}

.almost-question-card>.card-body ul>li>a {
    color: var(--color-white-solid);
}

.step-return-request .almost-done-cta>button {
    max-width: 233px;
    width: 100%;
}

.what-next-item {
    position: relative;
    z-index: 1;
}

.what-next-item-icon {
    display: flex;
    width: 40px;
    min-width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 16777200px;
    border: var(--stroke-weight-2, 2px) solid var(--color-white-10);
    background: var(--color-white-4);
}

.what-next-item-header {
    color: var(--color-azure-7665);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.what-next-item-content .sub-item {
    color: var(--color-azure-7665);
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
}

.what-next-item-content ul>li {
    list-style: none;
    position: relative;
}

.what-next-item-content ul>li+li {
    padding-left: 8px;
}

.what-next-item-content ul>li+li::before {
    content: "";
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    max-width: 3px;
    min-width: 3px;
    height: 3px;
    border-radius: 4px;
    background-color: var(--text-secondary);
    position: absolute;
    left: 0;
}

.what-next-item-content .badge {
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
    display: flex;
    padding: 2px 8px;
    align-items: center;
    gap: 4px;
    background: var(--color-white-4);
    border-radius: 30px;
    color: var(--color-azure-7665);
}

.what-next-wrapper .completed .what-next-item-header,
.what-next-wrapper .active .what-next-item-header {
    color: var(--color-white-solid);
}

.what-next-wrapper .completed .what-next-item-icon {
    border-color: var(--color-spring-green-5240);
    background: var(--color-spring-green-5212);
}

.what-next-wrapper .completed .badge {
    background: var(--color-spring-green-5210);
    color: var(--color-spring-green-52);
}

.what-next-wrapper .active .what-next-item-icon {
    border-color: var(--color-azure-5930);
    background: var(--btn-outline-bg-10);
}

.what-next-wrapper .active .badge {
    color: var(--color-azure-59);
    background: var(--color-azure-5912);
}

.what-next-wrapper .badge svg rect {
    fill: var(--color-azure-7665);
}

.what-next-wrapper .completed .what-next-item-icon svg path {
    stroke: var(--alternate-color-4);
}

.what-next-wrapper .active .what-next-item-icon svg path {
    stroke: var(--primary);
}

.what-next-wrapper .active .badge svg rect {
    fill: var(--primary);
}

.what-next-header {
    color: var(--color-grey-9796);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 142.857%;
}

.trade-in-what-next-container {
    max-width: 672px;
}

.what-next-item-content-cta {
    max-width: 167px;
    width: 100%;
}

.what-next-wrapper .what-next-body {
    position: relative;
}

.what-next-wrapper .what-next-body::after {
    width: 1px;
    top: 20px;
    height: calc(100% - 40px);
    left: 20px;
    position: absolute;
    content: "";
    background: var(--color-white-10);
}

.trade-in-what-next-wrapper {
    padding-top: 60px;
    padding-bottom: 60px;
}

.what-next-bottom-cta .btn-primary-rvlvr {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* trade-in page end */



/* Reconciliation page start */
.section-title {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.timeline-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.timeline-dot {
    width: 20px;
    height: 20px;
    background: var(--color-white-solid);
    border-radius: 50%;
    margin-top: 6px;
    border: 6px solid var(--primary);
}

.timeline-text small {
    display: block;
    color: var(--text-muted);
}

.btn-primary-custom {
    background: linear-gradient(180deg, var(--alternate-color-11), var(--alternate-color-12));
    border: none;
    padding: 20px;
    font-size: 18px;
    border-radius: 12px;
    width: 100%;
}


.timeline-text {
    color: var(--text-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 142.857%;

}

.timeline-text-sub {
    color: var(--text-secondary);
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
}

.reconciliation-header-wrapper .h2 {
    color: var(--text-primary);
    font-family: var(--heading-font);
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: 120%;
}


.reconciliation-sub-header {
    font-family: var(--font-roboto-mono);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 142.857%;
    color: var(--text-secondary);
}


.reconciliation-sub-header .reconciliation-number {
    color: var(--primary);
}

.reconciliation-wrapper .timeline-item {
    position: relative;
}

.reconciliation-wrapper .timeline-item::after {
    content: "";
    width: 1px;
    position: absolute;
    height: 60%;
    background: var(--bg-card);
    left: 10px;
    top: 100%;
}

.reconciliation-wrapper .timeline-item:last-child::after {
    display: none;
}

.reconciliation-inner {
    max-width: 700px;
}

/* Reconciliation page end */



/* order start here */
.order-status-card {
    background-color: transparent;
    color: var(--color-white-solid);
    max-width: 163px;
    cursor: pointer;
}

.order-status-card .card-body {
    border-radius: 12px;
    padding: 15px;
    border: 1px solid var(--color-white-9);
    background: var(--color-white-4);
}
.order-status-card.active .card-body{
    border-color: var(--primary);
    box-shadow: 0 0 8px var(--primary-hover);
    background: var(--color-white-10);
}
.card-order-value {
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.card-order-subtext {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.card-order-icon {
    border-radius: 8px;
    border: 1px solid var(--color-azure-5920);
    background: var(--primary-light);
    display: flex;
    width: 32px;
    height: 32px;
    padding: 0 7px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.card-order-right {
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.order-inner-wrapper {
    max-width: 672px;
}

.card-order-status {
    color: var(--color-grey-9785);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.order-open .card-order-value,
.order-in-process .card-order-value {
    color: var(--primary-hover);
}

.order-paid .card-order-value {
    color: var(--color-white-solid);
}

.order-open .card-order-icon svg path,
.order-in-process .card-order-icon svg path,
.order-paid .card-order-icon svg path {
    color: var(--primary-hover);
}

.order-expired .card-order-value {
    color: var(--error-text);
}

.order-expired .card-order-icon svg path {
    stroke: var(--error-text);
}

.offer-item-card {
    color: var(--color-white-solid);
    border-radius: 16px;
    border: 2px solid var(--alternate-color);
    background: var(--color-white-10);
}



.offer-item-card ul>li {
    list-style: none;
    font-family: var(--font-roboto-mono);
    color: var(--text-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
    position: relative;
}

.offer-item-card ul>li+li {
    padding-left: 12px;
}

.offer-item-card ul>li+li::before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 6px;
    background-color: var(--text-secondary);
    border-radius: 100px;
    display: inline-block;
}

.offer-item-card ul>li span {
    font-weight: 500;
}

.card-header-left-subtext {
    color: var(--text-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
}

.offer-card-cta .btn {
    max-width: 262px;
    width: 100%;
}

.order-estimation-price {
    font-family: var(--heading-font);
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--primary);
}

.order-estimation-status .badge {
    color: var(--primary);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 133.333%;
    border-radius: 16777200px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--primary);
    background: var(--alternate-color-7);
}

.order-status-icon {
    border-radius: 16777200px;
    border: 1px solid var(--bg-card);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.order-status-items {
    counter-reset: my-sec-counter;
}

.order-status-item>.order-status-icon::before {
    counter-increment: my-sec-counter;
    content: counter(my-sec-counter);
    color: var(--text-secondary);
    text-align: center;
    font-size: 8.8px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.order-status-item {
    border-bottom: 2px solid var(--color-white-10);
}

/* order item status start */
.offer-item-card .order-status-item.active,
.offer-item-card-estimates-open .order-status-item.active,
.offer-item-card-estimates-open .order-status-item-estimated,
.order-status-item-expired .order-status-item-estimated, 
.offer-item-card-submitted .order-status-item-estimated,
.offer-item-card-submitted .order-status-item-in-process, 
.offer-item-card-return-confirmed .order-status-item-estimated,
.offer-item-card-return-confirmed .order-status-item-in-process,
.offer-item-card-received .order-status-item-estimated,
.offer-item-card-received .order-status-item-in-process,
.offer-item-card-graded .order-status-item-estimated,
.offer-item-card-graded .order-status-item-in-process,
.offer-item-card-graded .order-status-item-grading, 
.offer-item-card-settled .order-status-item,
.offer-item-card-cancelled .order-status-item-estimated{
    border-color: var(--primary);
}

.offer-item-card .order-status-item.active .order-status-icon,
.offer-item-card-estimates-open .order-status-item-estimated .order-status-icon,
.order-status-item-expired .order-status-item-estimated .order-status-icon,
.offer-item-card-submitted .order-status-item-estimated .order-status-icon,
.offer-item-card-submitted .order-status-item-in-process .order-status-icon,
.offer-item-card-return-confirmed .order-status-item-estimated .order-status-icon,
.offer-item-card-return-confirmed .order-status-item-in-process .order-status-icon,
.offer-item-card-received .order-status-item-estimated .order-status-icon,
.offer-item-card-received .order-status-item-in-process .order-status-icon,
.offer-item-card-graded .order-status-item-estimated .order-status-icon,
.offer-item-card-graded .order-status-item-in-process .order-status-icon,
.offer-item-card-graded .order-status-item-grading .order-status-icon, 
.offer-item-card-settled .order-status-item .order-status-icon,
.offer-item-card-cancelled .order-status-item-estimated .order-status-icon{
    border-color: var(--primary);
    color: var(--color-white-solid);
    background-color: var(--primary);
}
.offer-item-card .order-status-item.active .order-status-icon::before,
.offer-item-card-estimates-open .order-status-item-estimated .order-status-icon::before,
.order-status-item-expired .order-status-item-estimated .order-status-icon::before,
.offer-item-card-submitted .order-status-item-estimated .order-status-icon::before,
.offer-item-card-submitted .order-status-item-in-process .order-status-icon::before,
.offer-item-card-return-confirmed .order-status-item-estimated .order-status-icon::before,
.offer-item-card-return-confirmed .order-status-item-in-process .order-status-icon::before,
.offer-item-card-received .order-status-item-estimated .order-status-icon::before,
.offer-item-card-received .order-status-item-in-process .order-status-icon::before,
.offer-item-card-graded .order-status-item-estimated .order-status-icon::before,
.offer-item-card-graded .order-status-item-in-process .order-status-icon::before,
.offer-item-card-graded .order-status-item-grading .order-status-icon::before, 
.offer-item-card-settled .order-status-item .order-status-icon::before,
.offer-item-card-cancelled .order-status-item-estimated .order-status-icon::before{
    color: var(--color-white-solid);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    background-image: url(../images/offer-status-check.svg);
    content: " ";
}

/* expired */
.offer-item-card-expired .order-estimation-price{
    color: var(--error-text);
}
.offer-item-card-expired .order-estimation-status .badge{
    border-color: var(--error-text);
    color: var(--error-text);
    background-color: var(--alternate-color-6);
}

/* graded */
.offer-item-card-graded {
    border-color: var(--alternate-color-5);
    background: var(--trade-in-process-card-bg);
}
.offer-item-card-graded .order-estimation-price {
    color: var(--color-spring-green-52);
}
.offer-item-card-graded .order-estimation-status .badge {
    border-color: var(--color-spring-green-52);
    color: var(--color-spring-green-52);
    background-color: var(--trade-in-process-card-bg);
}

/* order item status end */

.status-label {
    color: var(--text-secondary);
    text-align: center;
    font-size: 9.6px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

@media screen and (max-width:767px) {
    .order-status-items-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .order-status-items-wrapper .order-status-card{min-width: 156px;}
    .order-status-card {
        max-width: 100%;
    }
    .order-status-items-wrapper {overflow: auto;}
}
/* order end here */

/* The loop is complete start */
.loop-completed-inner {
    max-width: 672px;
}

.loop-completed-card {
    border-radius: 16px;
    border: var(--stroke-weight-1, 1px) solid var(--color-azure-5932);
    background: var(--bg-card);
    box-shadow: 0 0 60px 0 var(--color-azure-18);
    color: var(--color-white-solid);
}

.loop-completed-card .loop-completed-card-cta>.btn {
    max-width: 312px;
    width: 100%;
}

.loop-completed-card .lc-info-value {


    color: var(--text-primary);
    font-family: var(--font-roboto-mono);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
}

.loop-completed-card .available-balance-text {
    color: var(--text-secondary);
    text-align: center;
    font-family: var(--font-roboto-mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 133.333%;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.loop-completed-card .available-balance {
    color: var(--primary);
    text-align: center;
    font-family: var(--heading-font);
    font-size: 88px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
    letter-spacing: 1.76px;
}


.loop-completed-card .available-balance-subtext {

    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;

}

.loop-completed-info-card {
    border-radius: 12px;
    border: var(--stroke-weight-1, 1px) solid var(--color-white-10);
    background: var(--color-white-4);
    color: var(--text-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 142.857%;
}

.card-header-subtext {
    color: var(--color-grey-9796);
    text-align: center;
    font-family: var(--heading-font);
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
    letter-spacing: 0.8px;
}

.card-header-muted-text {
    color: var(--color-azure-7665);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

/* The loop is complete end */


/* help page start */

.help-wrapper .help-inner-wrapper {
    max-width: 700px;
    width: 100%;
}

.help-wrapper .help-inner-wrapper h1 {
    color: var(--text-primary);
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: 112.5%;
    letter-spacing: -1.6px;
}

.help-wrapper .help-inner-wrapper h2 {
    color: var(--color-grey-9792);
    font-family: var(--font-inter);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%;
}

.help-wrapper .help-header-subtext {
    color: var(--alternate-color-13);
    text-align: center;
    font-family: var(--font-inter);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 144.444%;
}

.help-header-search .input-group-text,
.help-header-search input[type="text"].form-control {
    background-color: var(--alternate-color-15);
}

.help-header-search .input-group-text {
    border: none;
}

.help-header-search input[type="text"].form-control {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 17px;
}

.help-header-search .input-group-text {
    border-radius: 12px 0 0 12px;
    padding-left: 20px;
}

.help-header-search ::-webkit-input-placeholder,
.help-header-search ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: var(--alternate-color-16);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.browse-item-card {
    border-radius: 12px;
    background: var(--color-white-4);
    color: var(--alternate-color-17);
    font-family: var(--font-inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 142.857%;
}

.browse-item-card .browse-item-icon {
    width: 48px;
    min-width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--primary-light);
}

.browse-item-card h3 {

    color: var(--color-grey-9790);
    font-family: var(--font-inter);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

.help-wrapper .faq-card,
.help-wrapper .accordion-item{
    border-radius: 8px;
    background: var(--alternate-color-2);
    color: var(--alternate-color-18);
    font-family: var(--font-inter);
    border: 1px solid var(--color-white-8);

}

.help-wrapper .faq-card>.card-header {
    border: none;
}

.help-wrapper .faq-card h3,
.help-wrapper .accordion-button {
    color: var(--alternate-color-18);
    font-size: 15px;
    font-family: var(--font-inter);
    font-weight: 500;
    line-height: 146.667%;
    background-color: transparent;
}


.help-wrapper .accordion-button:not(.collapsed){box-shadow: none;}
.help-wrapper .accordion-button{color: inherit;}
.help-wrapper .accordion-button:focus{box-shadow: none;}
.help-wrapper .accordion-button::after{ background-image: url(/images/accordion-right-icon.svg);}
.help-wrapper .accordion-button:not(.collapsed)::after{transform: rotate(90deg);}
.help-wrapper .accordion-body{
    color: var(--alternate-color-18);
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: 500;
    line-height: 146.667%;
}
.faq-wrapper .faq-inner,
.faq-wrapper .accordion{
    max-width: 672px;
    width: 100%;
}


.need-help-wrapper .need-help-subtext {
    max-width: 494px;
    width: 100%;
}

.need-help-wrapper .need-help-icon {
    max-width: 64px;
    width: 100px;
    height: 64px;
    border-radius: 16777200px;
    background: var(--primary-light);
}

.need-help-wrapper h2 {
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 128.571%;
}

.need-help-wrapper p {
    color: var(--alternate-color-13);
    text-align: center;
    font-family: var(--font-inter);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
}

.need-help-wrapper .btn {
    color: var(--color-white-solid);
    font-size: 14.4px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}
.need-help-wrapper .btn-black-rvlvr:hover,
.need-help-wrapper .btn-black-rvlvr:active,
.need-help-wrapper .btn-black-rvlvr:active:hover,
.need-help-wrapper .btn-black-rvlvr:focus-visible,
.need-help-wrapper .btn-black-rvlvr:focus{color: var(--rvlvr-black); background-color: var(--color-white-solid);}

/* help page end */
/* trade-in-link start */
.star-trade-in-link {
    color: var(--alternate-color-14);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
}

.star-trade-in-link:hover {
    color: var(--primary);
}

.star-trade-in-link:hover svg path {
    stroke: var(--primary);
}

/* trade-in-link end */




/* profile page start */
.profile-inner-wrapper {
    max-width: 700px;
}

.profile-inner-wrapper h1 {
    color: var(--text-primary);
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
}

.profile-common-design {
    border-radius: 16px;
    background: var(--color-white-4);
    border: none;
}

.profile-common-design {
    color: var(--text-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.profile-common-design .user-app-text-muted {
    font-size: 12px;
}

.profile-common-design .user-app-value {
    color: var(--primary);
    font-family: var(--heading-font);
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.profile-common-design .badge {
    border-radius: 16777200px;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile-common-design .badge.active,
.profile-wrapper .scroll-section-cta .nav-item.active,
.profile-common-card-icon {
    border-radius: 16777200px;
    border: 1px solid var(--color-azure-5930);
    background: var(--btn-outline-bg-10);
    color: var(--primary);

}
.profile-wrapper .scroll-section-cta .nav-item svg path{stroke:var(--color-grey-46);}
.profile-wrapper .scroll-section-cta .nav-item.active svg path{stroke:var(--primary);}
 
.profile-wrapper .scroll-section-cta .nav-item,
 .profile-wrapper .scroll-section-cta ul>li > a{
    color: var(--color-grey-46);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 142.857%;
}

.profile-wrapper .scroll-section-cta .badge.active,
.profile-common-card-icon {
    border-radius: 12px;
}

.address-info-list>li {
    list-style: none;
}

.address-info-list>li,
.address-info-list>li>a {
    display: inline-flex;
    color: inherit;
    align-items: center;
    gap: 8px;
}

.profile-common-card-icon {
    max-width: 40px;
    width: 100%;
    height: 40px;
}

.profile-common-card-description h2 {
    color: var(--text-primary);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    font-family: var(--body-font);
}

.profile-common-card-description p {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.profile-common-design .form-control,
.profile-common-design input[type="text"].form-control,
.profile-common-design input[type="date"].form-control,
.profile-common-design input[type="email"].form-control,
.profile-common-design input[type="tel"].form-control,
.profile-common-design input[type="password"].form-control,
.profile-common-design textarea.form-control,
.profile-common-design select.form-control{
    padding: 14px 18px;
}
.forgot-password-link{color: inherit; cursor: pointer;}

.profile-common-design .form-control{    
    font-size: inherit;
    background: inherit;
    color: inherit;
}

.profile-common-design .body-card .input-group-text{min-width: 44px; width: 44px; }
.profile-common-design .form-control,
.profile-common-design .body-card .input-group input[type="email"],
.profile-common-design .body-card .input-group input[type="tel"],
.profile-common-design .body-card .input-group input.form-control{border-radius: 12px !important;}
.profile-common-design .body-card .input-group-text{background-color: transparent; border:none; border-radius: 0; padding: 0;}
.profile-common-design .body-card .form-check-input{margin-left: 0;height: 24px; width: 44px;}
.profile-common-design .body-card .form-check-input{border-color: var(--color-azure-5930); background-color: var(--color-azure-5930);}

.reset-password-modal .modal-content{
    border-radius: 24px;
    border: 1px solid var(--color-white-10);
    background: var(--alternate-color-20);
    box-shadow: 0 20px 60px 0 var(--alternate-color-21);
    color: var(--text-secondary);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.reset-password-modal .modal-title{
    color: var(--text-primary);
    font-family: var(--heading-font);
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 150%;
}

.reset-password-modal .btn{
    padding: 13px 10px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    max-width: 210px;
    width: 100%;
}

.reset-password-modal  .input-group>.form-control{padding: 16px 17px;}


.reset-password-modal  .input-group>.form-control,
.reset-password-modal .input-group-text{
    border-color: var(--bg-card);
    background-color: var(--alternate-color-19);
}
.reset-password-modal .input-group-text{border-left: 0;}
.reset-password-modal .btn-black-rvlvr{
    border: 1px solid var(--color-white-10);
    background-color: var(--bg-input);    
    color: var(--color-grey-9785);
}
.reset-password-modal .modal-close-btn{max-width: 24px; width: 100%; height: 24px;}



/* profile page end*/
.form-label{text-transform: uppercase;}
.form-switch .form-check-input:checked,
.form-switch .form-check-input{ background-repeat: no-repeat; background-size: 21px;}
.form-switch .form-check-input{margin-top: 0;}
.form-switch .form-check-input:checked{background-image:url(../images/switch-primary.svg); background-position: calc(100% - 2px) center;}
.form-switch .form-check-input{background-image:url(../images/switch-disabled.svg); background-position: 2px center;}
.label-input-style{padding: 14px 18px; border-radius: 12px; border-width: 1px; border-style: solid; border-color: transparent;}
.bg-alternate-19{background: var(--alternate-color-19);}
.border-color-bg-card{border: 1px solid var(--bg-card);}


/* auth start */
.auth-card{
    border-radius: 16px;
    border: 1px solid var(--bg-card);
    background: var(--color-white-4);
    box-shadow: 0 25px 50px -12px var(--trade-in-card-bg);
    color: var(--color-white-solid);
}


.profile-pane .trade-in-stepper-card{
    border-radius: 16px;
    border: 1px solid var(--bg-card);
    background:transparent;
    box-shadow: 0 25px 50px -12px var(--trade-in-card-bg);
    color: var(--color-white-solid);
}

.auth-card h1,
.auth-card .auth-sub,
.auth-divider,
.auth-links{color: inherit;}
.auth-divider::before, 
.auth-divider::after{    
    background: var(--bg-card);;
}
.profile-pane{
    background: var(--rvlvr-slate);
    -webkit-animation: blur(10px);
    -webkit-backdrop-filter: blur(10px);   
    backdrop-filter: blur(10px);
}
.profile-pane .profile-pane-header{ color: var(--color-white-solid); background: var(--color-azure-1097);}
.profile-pane{
    background-image: linear-gradient(48deg, #152847 28.41%, #000 87.76%);
}
.profile-pane .trade-in-stepper-card .btn-primary-rvlvr,
.auth-card .btn-primary-rvlvr,
.auth-card .btn-ghost-rvlvr{border-radius: 8px; padding: 0.78rem 1.4rem;}
.profile-pane .right-menu-item, 
.profile-pane .profile-menu-item > .btn, .profile-menu-item .dropdown-menu{padding: 15px;}
.profile-pane .btn-primary-rvlvr{padding: 12px 15px 13px; font-size: 14px;}
.col-gap-24{column-gap: 24px;}
.header .right-menu-item.nav-admin-link{text-transform: none !important; letter-spacing: 0; font-weight: 500 !important;}

/* auth end */
/* main end here */