/* =========================================================
   ARCHER PRASANTA
   CUSTOMER PORTAL
   FINAL CSS
   PREMIUM DARK / CYAN DESIGN
   + 4 TAB DASHBOARD NAVIGATION
   + SERVICE HISTORY
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

.apc-portal{

    --apc-cyan:#6FEFFF;
    --apc-bg:#05090a;
    --apc-panel:#081012;
    --apc-border:#1b3033;
    --apc-text:#f2f5f5;
    --apc-muted:#858f91;

    position:relative !important;
    isolation:isolate !important;

    display:block !important;

    width:calc(100% - 84px) !important;
    max-width:1380px !important;

    margin:0 auto !important;

    padding:70px 0 80px !important;

    color:var(--apc-text) !important;

    background:transparent !important;

    font-family:inherit !important;

    box-sizing:border-box !important;

    min-height:0 !important;
    height:auto !important;
}


/* =========================================================
   GLOBAL RESET
========================================================= */

.apc-portal *,
.apc-portal *::before,
.apc-portal *::after{

    box-sizing:border-box !important;
}


.apc-portal h1,
.apc-portal h2,
.apc-portal h3,
.apc-portal h4,
.apc-portal h5,
.apc-portal h6,
.apc-portal p,
.apc-portal ul,
.apc-portal ol,
.apc-portal li,
.apc-portal form{

    margin-top:0 !important;
}


/* =========================================================
   HEADING
========================================================= */

.apc-heading{

    display:grid !important;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(300px,1fr) !important;

    gap:80px !important;

    align-items:end !important;

    width:100% !important;

    margin:0 !important;

    padding:0 0 55px !important;

    border-bottom:1px solid
        var(--apc-border) !important;

    min-height:0 !important;
}


.apc-heading-left{

    margin:0 !important;
    padding:0 !important;
}


.apc-heading-right{

    margin:0 !important;
    padding:0 0 5px !important;
}


.apc-eyebrow,
.apc-small-label{

    display:flex !important;

    align-items:center !important;

    gap:12px !important;

    margin:0 !important;
    padding:0 !important;

    color:#737d7f !important;

    font-size:10px !important;
    line-height:1 !important;

    font-weight:700 !important;

    letter-spacing:3px !important;

    text-transform:uppercase !important;
}


.apc-eyebrow::before,
.apc-small-label::before{

    content:"" !important;

    display:block !important;

    width:35px !important;
    min-width:35px !important;

    height:1px !important;

    margin:0 !important;
    padding:0 !important;

    background:var(--apc-cyan) !important;
}


.apc-heading h1{

    display:block !important;

    width:auto !important;

    margin:24px 0 0 !important;
    padding:0 !important;

    color:#f2f5f5 !important;

    font-size:
        clamp(64px,7.2vw,112px) !important;

    line-height:.82 !important;

    letter-spacing:-5px !important;

    font-weight:900 !important;

    text-transform:uppercase !important;
}


.apc-heading h1 span{

    color:var(--apc-cyan) !important;
}


.apc-heading-right p{

    max-width:390px !important;

    margin:0 !important;
    padding:0 !important;

    color:#777f81 !important;

    font-size:13px !important;
    line-height:1.9 !important;
}


/* =========================================================
   MAIN FRAME
========================================================= */

.apc-frame{

    position:relative !important;

    display:block !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:40px 0 0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:#081012 !important;

    border:1px solid #1b3033 !important;

    box-shadow:none !important;
}


.apc-track{

    position:relative !important;

    display:block !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
}


/* =========================================================
   VIEW SYSTEM
========================================================= */

.apc-frame .apc-view{

    position:relative !important;

    display:block !important;

    width:100% !important;

    height:0 !important;

    min-height:0 !important;

    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    transform:translateX(25px) !important;

    transition:
        opacity .35s ease,
        transform .45s ease,
        visibility 0s linear .45s !important;
}


.apc-frame .apc-view.is-active{

    position:relative !important;

    display:block !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    margin:0 !important;

    padding:55px !important;

    overflow:visible !important;

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

    transform:none !important;

    transition:
        opacity .35s ease,
        transform .45s ease,
        visibility 0s linear 0s !important;
}


/* =========================================================
   AUTH
========================================================= */

.apc-login-view,
.apc-register-view,
.apc-forgot-view,
.apc-reset-view{

    min-height:0 !important;
}


/* =========================================================
   AUTH GRID
   ORIGINAL SINGLE BOX DESIGN
========================================================= */

.apc-auth-grid{

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        minmax(360px,520px) !important;

    gap:90px !important;

    align-items:center !important;

    width:100% !important;

    max-width:1100px !important;

    min-height:0 !important;

    height:auto !important;

    margin:0 auto !important;

    padding:0 !important;

    border:0 !important;

    background:transparent !important;
}


/* =========================================================
   AUTH COPY
========================================================= */

.apc-auth-copy{

    display:block !important;

    width:100% !important;
    max-width:470px !important;

    margin:0 !important;
    padding:0 !important;
}


.apc-auth-copy h2{

    display:block !important;

    margin:22px 0 !important;
    padding:0 !important;

    color:#f2f5f5 !important;

    font-size:
        clamp(42px,5vw,72px) !important;

    line-height:.9 !important;

    letter-spacing:-3px !important;

    font-weight:900 !important;

    text-transform:uppercase !important;
}


.apc-auth-copy h2 span{

    color:var(--apc-cyan) !important;
}


.apc-auth-copy p{

    max-width:430px !important;

    margin:0 !important;
    padding:0 !important;

    color:#858f91 !important;

    font-size:13px !important;
    line-height:1.9 !important;
}


/* =========================================================
   FORM
========================================================= */

.apc-form{

    display:block !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
}


.apc-field{

    display:block !important;

    width:100% !important;

    margin:0 0 23px !important;
    padding:0 !important;
}


.apc-field-row{

    display:grid !important;

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

    gap:15px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;
}


.apc-field label{

    display:block !important;

    margin:0 0 9px !important;
    padding:0 !important;

    color:#8a9496 !important;

    font-size:10px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;

    line-height:1.2 !important;

    text-transform:uppercase !important;
}


.apc-field input{

    display:block !important;

    width:100% !important;

    height:55px !important;

    margin:0 !important;

    padding:0 17px !important;

    border:1px solid #203235 !important;

    border-radius:0 !important;

    outline:none !important;

    background:#050a0b !important;

    color:#ffffff !important;

    font-family:inherit !important;

    font-size:14px !important;

    line-height:55px !important;

    box-shadow:none !important;

    appearance:none !important;

    -webkit-appearance:none !important;
}


.apc-field input:hover{

    border-color:#345054 !important;
}


.apc-field input:focus{

    border-color:
        var(--apc-cyan) !important;

    background:#050a0b !important;

    color:#ffffff !important;

    box-shadow:
        0 0 0 1px
        rgba(111,239,255,.12) !important;
}


.apc-field input::placeholder{

    color:#566164 !important;

    opacity:1 !important;
}


.apc-field small{

    display:block !important;

    margin:8px 0 0 !important;
    padding:0 !important;

    color:#626b6d !important;

    font-size:10px !important;

    line-height:1.5 !important;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.apc-button{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    width:100% !important;

    min-height:58px !important;

    height:auto !important;

    margin:0 !important;

    padding:0 20px !important;

    border:1px solid
        var(--apc-cyan) !important;

    border-radius:0 !important;

    outline:none !important;

    background:var(--apc-cyan) !important;

    color:#061012 !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:11px !important;

    font-weight:800 !important;

    letter-spacing:2px !important;

    line-height:1 !important;

    text-align:left !important;

    box-shadow:none !important;

    appearance:none !important;

    -webkit-appearance:none !important;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease !important;
}


.apc-button:hover{

    background:transparent !important;

    color:var(--apc-cyan) !important;
}


.apc-button:disabled{

    opacity:.55 !important;

    cursor:not-allowed !important;
}


.apc-button span{

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:inherit !important;
}


.apc-button i{

    display:block !important;

    margin:0 !important;
    padding:0 !important;

    color:inherit !important;

    font-size:20px !important;

    font-style:normal !important;

    line-height:1 !important;
}


/* =========================================================
   FORM LINKS
========================================================= */

.apc-form-links{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:20px !important;

    width:100% !important;

    margin:20px 0 0 !important;

    padding:0 !important;
}


.apc-link{

    display:inline-block !important;

    width:auto !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 !important;

    border:0 !important;

    outline:none !important;

    background:transparent !important;

    color:#747e80 !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:11px !important;

    line-height:1.5 !important;

    text-align:left !important;

    text-decoration:none !important;

    box-shadow:none !important;
}


.apc-link:hover{

    color:var(--apc-cyan) !important;
}


/* =========================================================
   RESPONSE
========================================================= */

.apc-response{

    display:block !important;

    width:100% !important;

    min-height:0 !important;

    margin:18px 0 0 !important;

    padding:0 !important;

    color:#9aa4a6 !important;

    font-size:12px !important;

    line-height:1.6 !important;
}


.apc-response.apc-error{

    color:#ff8c8c !important;
}


.apc-response.apc-success{

    color:var(--apc-cyan) !important;
}


/* =========================================================
   DASHBOARD
========================================================= */

.apc-dashboard-view{

    display:block !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:55px !important;
}


/* =========================================================
   DASHBOARD TOP
========================================================= */

.apc-dashboard-top{

    display:flex !important;

    align-items:flex-end !important;

    justify-content:space-between !important;

    gap:30px !important;

    width:100% !important;

    margin:0 !important;

    padding:0 0 38px !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-dashboard-top > div{

    margin:0 !important;

    padding:0 !important;
}


.apc-dashboard-top h2{

    display:block !important;

    margin:20px 0 0 !important;

    padding:0 !important;

    color:#f2f5f5 !important;

    font-size:
        clamp(35px,4vw,58px) !important;

    line-height:.9 !important;

    letter-spacing:-2px !important;

    font-weight:900 !important;

    text-transform:uppercase !important;
}


.apc-dashboard-top h2 span{

    color:var(--apc-cyan) !important;
}


/* =========================================================
   LOGOUT
========================================================= */

.apc-logout{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-height:42px !important;

    height:auto !important;

    margin:0 !important;

    padding:13px 20px !important;

    border:1px solid #354346 !important;

    border-radius:0 !important;

    outline:none !important;

    background:transparent !important;

    color:#8c9698 !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:10px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;

    line-height:1 !important;

    box-shadow:none !important;

    transition:
        border-color .25s ease,
        color .25s ease !important;
}


.apc-logout:hover{

    border-color:
        var(--apc-cyan) !important;

    color:var(--apc-cyan) !important;
}


/* =========================================================
   STATS
========================================================= */

.apc-stats{

    display:grid !important;

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

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:0 !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-stat{

    min-width:0 !important;

    height:auto !important;

    margin:0 !important;

    padding:30px 22px !important;

    border-right:1px solid
        var(--apc-border) !important;
}


.apc-stat:last-child{

    border-right:0 !important;
}


.apc-stat span,
.apc-appointment span,
.apc-profile span{

    display:block !important;

    margin:0 0 12px !important;

    padding:0 !important;

    color:#626d6f !important;

    font-size:9px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;

    line-height:1.3 !important;

    text-transform:uppercase !important;
}


.apc-stat strong{

    display:block !important;

    margin:0 !important;

    padding:0 !important;

    color:#ffffff !important;

    font-size:38px !important;

    font-weight:700 !important;

    line-height:1 !important;
}


/* =========================================================
   DASHBOARD NAVIGATION — DESKTOP
   4 TABS
========================================================= */

.apc-dashboard-nav{

    display:grid !important;

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

    width:100% !important;

    margin:25px 0 0 !important;

    padding:0 !important;

    border-top:1px solid
        var(--apc-border) !important;

    border-bottom:1px solid
        var(--apc-border) !important;

    background:#050a0b !important;
}


.apc-dashboard-nav-item{

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    min-width:0 !important;

    min-height:66px !important;

    margin:0 !important;

    padding:0 20px !important;

    border:0 !important;

    border-right:1px solid
        var(--apc-border) !important;

    border-radius:0 !important;

    outline:none !important;

    background:transparent !important;

    color:#626d6f !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:9px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;

    line-height:1 !important;

    text-align:left !important;

    box-shadow:none !important;

    transition:
        color .25s ease,
        background .25s ease !important;
}


.apc-dashboard-nav-item:last-child{

    border-right:0 !important;
}


.apc-dashboard-nav-item::after{

    content:"";

    position:absolute !important;

    left:0 !important;

    right:0 !important;

    bottom:-1px !important;

    height:1px !important;

    background:transparent !important;

    transition:
        background .25s ease !important;
}


.apc-dashboard-nav-item .apc-nav-number{

    color:#445154 !important;

    margin-right:14px !important;
}


.apc-dashboard-nav-item .apc-nav-title{

    flex:1 !important;

    color:inherit !important;
}


.apc-dashboard-nav-item .apc-nav-arrow{

    color:#465356 !important;

    font-size:16px !important;

    line-height:1 !important;

    transition:
        transform .25s ease,
        color .25s ease !important;
}


/* ACTIVE */

.apc-dashboard-nav-item.is-active{

    background:#071012 !important;

    color:var(--apc-cyan) !important;
}


.apc-dashboard-nav-item.is-active::after{

    background:var(--apc-cyan) !important;
}


.apc-dashboard-nav-item.is-active
.apc-nav-number{

    color:var(--apc-cyan) !important;
}


.apc-dashboard-nav-item.is-active
.apc-nav-arrow{

    color:var(--apc-cyan) !important;

    transform:translateX(3px) !important;
}


/* HOVER */

.apc-dashboard-nav-item:hover{

    background:#071012 !important;

    color:#ffffff !important;
}


.apc-dashboard-nav-item:hover
.apc-nav-arrow{

    color:var(--apc-cyan) !important;

    transform:translateX(3px) !important;
}


/* =========================================================
   DASHBOARD PANEL SPACING
========================================================= */

.apc-dashboard-panel[data-dashboard-panel="garage"],
.apc-dashboard-panel[data-dashboard-panel="appointments"],
.apc-dashboard-panel[data-dashboard-panel="history"],
.apc-dashboard-panel[data-dashboard-panel="profile"]{

    padding-top:45px !important;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.apc-section-heading{

    display:flex !important;

    align-items:flex-end !important;

    justify-content:space-between !important;

    gap:30px !important;

    width:100% !important;

    margin:0 0 30px !important;

    padding:0 !important;
}


.apc-section-heading > div{

    margin:0 !important;

    padding:0 !important;
}


.apc-section-heading h3{

    display:block !important;

    margin:15px 0 0 !important;

    padding:0 !important;

    color:#ffffff !important;

    font-size:
        clamp(30px,3vw,46px) !important;

    line-height:.9 !important;

    letter-spacing:-2px !important;

    font-weight:900 !important;

    text-transform:uppercase !important;
}


.apc-section-heading h3 span{

    color:var(--apc-cyan) !important;
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.apc-outline-button{

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-height:44px !important;

    height:auto !important;

    margin:0 !important;

    padding:12px 18px !important;

    border:1px solid #354346 !important;

    border-radius:0 !important;

    background:transparent !important;

    color:#9aa4a6 !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:9px !important;

    font-weight:700 !important;

    letter-spacing:1.5px !important;

    line-height:1 !important;

    text-decoration:none !important;

    box-shadow:none !important;

    transition:
        border-color .25s ease,
        color .25s ease,
        background .25s ease !important;
}


.apc-outline-button:hover{

    border-color:
        var(--apc-cyan) !important;

    color:var(--apc-cyan) !important;

    background:rgba(111,239,255,.03) !important;
}


/* =========================================================
   GARAGE
========================================================= */

.apc-garage-section{

    display:block !important;

    width:100% !important;

    margin:50px 0 0 !important;

    padding:0 !important;
}


.apc-garage-grid{

    display:grid !important;

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

    gap:20px !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;
}


/* =========================================================
   BIKE CARD
========================================================= */

.apc-bike-card{

    display:grid !important;

    grid-template-columns:
        minmax(180px,.85fr)
        minmax(0,1.15fr) !important;

    width:100% !important;

    min-width:0 !important;

    margin:0 !important;

    padding:0 !important;

    border:1px solid
        var(--apc-border) !important;

    background:#050a0b !important;

    overflow:hidden !important;
}


/* =========================================================
   BIKE IMAGE
========================================================= */

.apc-bike-image{

    position:relative !important;

    width:100% !important;

    min-height:230px !important;

    margin:0 !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#ffffff !important;
}


.apc-bike-image img{

    display:block !important;

    width:100% !important;

    height:100% !important;

    min-height:230px !important;

    margin:0 !important;

    padding:0 !important;

    object-fit:cover !important;

    object-position:center !important;
}


.apc-bike-placeholder{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:100% !important;

    min-height:230px !important;

    background:#0b1416 !important;

    color:#6FEFFF !important;

    font-size:48px !important;
}


/* =========================================================
   BIKE CONTENT
========================================================= */

.apc-bike-content{

    display:flex !important;

    flex-direction:column !important;

    min-width:0 !important;

    margin:0 !important;

    padding:25px !important;
}


.apc-bike-label{

    margin:0 0 12px !important;

    color:#626d6f !important;

    font-size:9px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;
}


.apc-bike-content h4{

    margin:0 !important;

    padding:0 !important;

    color:#ffffff !important;

    font-size:25px !important;

    line-height:.95 !important;

    letter-spacing:-1px !important;

    font-weight:900 !important;

    text-transform:uppercase !important;
}


.apc-bike-content h4 span{

    display:block !important;

    color:var(--apc-cyan) !important;
}


/* =========================================================
   BIKE META
========================================================= */

.apc-bike-meta{

    display:grid !important;

    grid-template-columns:1fr !important;

    gap:13px !important;

    margin:25px 0 !important;

    padding:20px 0 !important;

    border-top:1px solid
        var(--apc-border) !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-bike-meta div{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    gap:10px !important;

    margin:0 !important;

    padding:0 !important;
}


.apc-bike-meta span{

    color:#596365 !important;

    font-size:8px !important;

    font-weight:700 !important;

    letter-spacing:1.5px !important;
}


.apc-bike-meta strong{

    color:#dfe5e5 !important;

    font-size:11px !important;

    font-weight:600 !important;

    text-align:right !important;

    word-break:break-word !important;
}


/* =========================================================
   REMOVE BIKE
========================================================= */

.apc-bike-remove{

    display:block !important;

    width:100% !important;

    margin:auto 0 0 !important;

    padding:11px 0 !important;

    border:0 !important;

    border-top:1px solid #273638 !important;

    background:transparent !important;

    color:#667173 !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:8px !important;

    font-weight:700 !important;

    letter-spacing:1.5px !important;

    text-align:left !important;
}


.apc-bike-remove:hover{

    color:#ff8c8c !important;
}


.apc-bike-remove:disabled{

    opacity:.5 !important;

    cursor:not-allowed !important;
}


/* =========================================================
   SEE MORE / SEE LESS
========================================================= */

.apc-garage-grid
.apc-bike-card.apc-bike-hidden{

    display:none !important;
}


.apc-garage-grid.apc-garage-expanded
.apc-bike-card.apc-bike-hidden{

    display:grid !important;
}


.apc-garage-grid:not(.apc-garage-expanded)
.apc-bike-card:nth-child(n+3){

    display:none !important;
}


/* =========================================================
   GARAGE TOGGLE
========================================================= */

.apc-garage-toggle-wrap{

    width:100% !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    margin-top:32px !important;

    padding:0 !important;
}


.apc-garage-toggle{

    appearance:none !important;

    -webkit-appearance:none !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:16px !important;

    min-width:190px !important;

    height:52px !important;

    margin:0 !important;

    padding:0 22px !important;

    border:1px solid #1b3033 !important;

    border-radius:0 !important;

    outline:none !important;

    background:transparent !important;

    color:#ffffff !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:11px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;

    line-height:1 !important;

    box-shadow:none !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease !important;
}


.apc-garage-toggle-text{

    display:inline-block !important;

    color:inherit !important;
}


.apc-garage-toggle i{

    display:block !important;

    font-style:normal !important;

    color:var(--apc-cyan) !important;

    font-size:16px !important;

    line-height:1 !important;

    transition:
        transform .3s ease !important;
}


.apc-garage-toggle:hover{

    background:var(--apc-cyan) !important;

    border-color:var(--apc-cyan) !important;

    color:#061012 !important;
}


.apc-garage-toggle:hover i{

    color:#061012 !important;
}


.apc-garage-grid.apc-garage-expanded
~ .apc-garage-toggle-wrap
.apc-garage-toggle i{

    transform:rotate(180deg) !important;
}


/* =========================================================
   GARAGE EMPTY
========================================================= */

.apc-garage-empty{

    display:flex !important;

    flex-direction:column !important;

    align-items:flex-start !important;

    width:100% !important;

    margin:0 !important;

    padding:45px 0 !important;

    border-top:1px solid
        var(--apc-border) !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-garage-empty-icon{

    margin:0 0 18px !important;

    color:var(--apc-cyan) !important;

    font-size:35px !important;
}


.apc-garage-empty strong{

    margin:0 0 10px !important;

    color:#ffffff !important;

    font-size:18px !important;

    letter-spacing:1px !important;
}


.apc-garage-empty p{

    max-width:550px !important;

    margin:0 0 25px !important;

    color:#777f81 !important;

    font-size:12px !important;

    line-height:1.8 !important;
}


/* =========================================================
   DASHBOARD SECTION
========================================================= */

.apc-dashboard-section{

    display:block !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:50px 0 0 !important;
}


/* =========================================================
   APPOINTMENTS
========================================================= */

.apc-appointments{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:0 !important;
}


.apc-appointment{

    display:grid !important;

    grid-template-columns:
        1.4fr
        1.5fr
        1fr
        1fr
        1fr !important;

    gap:25px !important;

    align-items:center !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:25px 0 !important;

    border-top:1px solid
        var(--apc-border) !important;
}


.apc-appointment:last-child{

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-appointment strong{

    display:block !important;

    margin:0 !important;

    padding:0 !important;

    color:#e9eeee !important;

    font-size:12px !important;

    font-weight:600 !important;

    line-height:1.5 !important;
}


.apc-appointment-id strong{

    color:var(--apc-cyan) !important;
}


/* =========================================================
   SERVICE HISTORY
========================================================= */

.apc-service-history{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:0 !important;
}


.apc-service-history-item{

    display:grid !important;

    grid-template-columns:
        1.2fr
        2fr
        1.2fr
        1fr !important;

    gap:25px !important;

    align-items:center !important;

    width:100% !important;

    min-height:0 !important;

    margin:0 !important;

    padding:25px 0 !important;

    border-top:1px solid
        var(--apc-border) !important;
}


.apc-service-history-item:last-child{

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-service-history-item span{

    display:block !important;

    margin:0 0 10px !important;

    padding:0 !important;

    color:#626d6f !important;

    font-size:9px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;

    line-height:1.3 !important;

    text-transform:uppercase !important;
}


.apc-service-history-item strong{

    display:block !important;

    margin:0 !important;

    padding:0 !important;

    color:#e9eeee !important;

    font-size:12px !important;

    font-weight:600 !important;

    line-height:1.5 !important;
}


.apc-service-history-id strong{

    color:var(--apc-cyan) !important;

    letter-spacing:.5px !important;
}


.apc-service-history-status{

    display:inline-block !important;

    color:#8ff0a7 !important;

    font-size:10px !important;

    font-weight:700 !important;

    letter-spacing:1.5px !important;

    text-transform:uppercase !important;
}


/* =========================================================
   SERVICE HISTORY EMPTY
========================================================= */

.apc-service-history-empty{

    display:block !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:40px 0 !important;

    border-top:1px solid
        var(--apc-border) !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-service-history-empty strong{

    display:block !important;

    margin:0 0 10px !important;

    padding:0 !important;

    color:#ffffff !important;

    font-size:18px !important;

    font-weight:800 !important;

    letter-spacing:1px !important;

    text-transform:uppercase !important;
}


.apc-service-history-empty p{

    max-width:520px !important;

    margin:0 0 25px !important;

    padding:0 !important;

    color:#777f81 !important;

    font-size:12px !important;

    line-height:1.8 !important;
}


/* =========================================================
   STATUS
========================================================= */

.apc-status{

    display:inline-block !important;

    font-size:10px !important;

    letter-spacing:1px !important;
}


.apc-status-pending{

    color:#f1c56a !important;
}


.apc-status-confirmed{

    color:var(--apc-cyan) !important;
}


.apc-status-completed{

    color:#8ff0a7 !important;
}


.apc-status-cancelled{

    color:#ff8c8c !important;
}


/* =========================================================
   EMPTY APPOINTMENTS
========================================================= */

.apc-empty{

    display:block !important;

    width:100% !important;

    height:auto !important;

    min-height:0 !important;

    margin:0 !important;

    padding:40px 0 !important;

    border-top:1px solid
        var(--apc-border) !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-empty strong{

    display:block !important;

    margin:0 0 10px !important;

    color:#ffffff !important;

    font-size:18px !important;

    letter-spacing:1px !important;
}


.apc-empty p{

    max-width:500px !important;

    margin:0 0 25px !important;

    color:#777f81 !important;

    font-size:12px !important;

    line-height:1.8 !important;
}


.apc-empty-button{

    max-width:280px !important;
}


/* =========================================================
   OLD PROFILE RESET
========================================================= */

.apc-profile{

    display:none !important;
}


.apc-profile > div{

    display:none !important;
}


/* =========================================================
   PROFILE VIEW
========================================================= */

.apc-profile-view{

    width:100% !important;

    padding:60px 70px !important;
}


.apc-profile-page{

    width:100% !important;

    max-width:1200px !important;

    margin:0 auto !important;
}


/* =========================================================
   PROFILE PAGE HEADER
========================================================= */

.apc-profile-page-heading{

    display:flex !important;

    align-items:flex-end !important;

    justify-content:space-between !important;

    gap:40px !important;

    padding-bottom:35px !important;

    margin-bottom:45px !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-profile-page-heading h2{

    margin:10px 0 0 !important;

    font-size:46px !important;

    line-height:1 !important;

    letter-spacing:-1.8px !important;

    font-weight:800 !important;

    color:#ffffff !important;
}


.apc-profile-page-heading h2 span{

    color:var(--apc-cyan) !important;
}


.apc-profile-page-heading p{

    margin:16px 0 0 !important;

    color:#7e8b8d !important;

    font-size:14px !important;

    line-height:1.7 !important;
}


.apc-profile-back{

    flex-shrink:0 !important;
}


/* =========================================================
   PROFILE MAIN GRID
========================================================= */

.apc-profile-main-grid{

    display:grid !important;

    grid-template-columns:
        300px
        minmax(0,1fr) !important;

    gap:70px !important;

    align-items:start !important;
}


/* =========================================================
   PROFILE PHOTO
========================================================= */

.apc-profile-photo-column{

    min-width:0 !important;
}


.apc-profile-photo-box{

    margin-top:18px !important;
}


.apc-profile-photo-preview{

    position:relative !important;

    width:220px !important;

    height:220px !important;

    border:1px solid #263b3e !important;

    background:#060b0c !important;

    overflow:hidden !important;
}


.apc-profile-preview-image{

    display:block !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    opacity:0 !important;

    transition:opacity .25s ease !important;
}


.apc-profile-preview-image[src]:not([src=""]){

    opacity:1 !important;
}


.apc-profile-photo-initial{

    position:absolute !important;

    inset:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:72px !important;

    font-weight:800 !important;

    color:var(--apc-cyan) !important;

    background:
        linear-gradient(
            135deg,
            #091417,
            #05090a
        ) !important;

    opacity:0 !important;

    pointer-events:none !important;
}


.apc-profile-photo-initial.is-visible{

    opacity:1 !important;
}


/* =========================================================
   PROFILE PHOTO ACTIONS
========================================================= */

.apc-profile-photo-actions{

    display:flex !important;

    align-items:center !important;

    gap:20px !important;

    margin-top:18px !important;
}


.apc-photo-change{

    position:relative !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-height:40px !important;

    padding:0 16px !important;

    border:1px solid #314548 !important;

    color:#ffffff !important;

    cursor:pointer !important;

    font-size:10px !important;

    font-weight:700 !important;

    letter-spacing:1.5px !important;

    transition:
        border-color .25s ease,
        color .25s ease,
        background .25s ease !important;
}


.apc-photo-change:hover{

    border-color:var(--apc-cyan) !important;

    color:var(--apc-cyan) !important;

    background:rgba(111,239,255,.04) !important;
}


.apc-photo-change input{

    position:absolute !important;

    width:1px !important;

    height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;
}


.apc-photo-remove{

    padding:0 !important;

    border:0 !important;

    background:none !important;

    color:#778385 !important;

    cursor:pointer !important;

    font-size:10px !important;

    font-weight:700 !important;

    letter-spacing:1.5px !important;
}


.apc-photo-remove:hover{

    color:#ffffff !important;
}


.apc-profile-photo-box > small{

    display:block !important;

    margin-top:13px !important;

    color:#626e70 !important;

    font-size:9px !important;

    letter-spacing:1px !important;
}


/* =========================================================
   PROFILE INFORMATION
========================================================= */

.apc-profile-info-column{

    min-width:0 !important;
}


.apc-profile-fields{

    display:grid !important;

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

    gap:28px 22px !important;

    margin-top:18px !important;
}


.apc-profile-fields .apc-field:first-child{

    grid-column:1 / -1 !important;
}


.apc-profile-fields .apc-field{

    margin:0 !important;
}


.apc-profile-fields .apc-field input{

    width:100% !important;
}


.apc-profile-fields .apc-field small{

    display:block !important;

    margin-top:9px !important;

    color:#596769 !important;

    font-size:10px !important;

    line-height:1.5 !important;
}


.apc-readonly{

    cursor:not-allowed !important;

    opacity:.55 !important;
}


/* =========================================================
   SAVE PROFILE
========================================================= */

.apc-profile-save-row{

    display:flex !important;

    align-items:center !important;

    gap:25px !important;

    margin-top:35px !important;

    padding-top:30px !important;

    border-top:1px solid
        var(--apc-border) !important;
}


.apc-profile-save-row .apc-response{

    margin:0 !important;
}


/* =========================================================
   ACCOUNT SUMMARY
========================================================= */

.apc-account-summary{

    margin-top:65px !important;

    padding-top:35px !important;

    border-top:1px solid
        var(--apc-border) !important;
}


.apc-summary-grid{

    display:grid !important;

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

    gap:1px !important;

    margin-top:22px !important;

    background:#1b3033 !important;

    border:1px solid #1b3033 !important;
}


.apc-summary-item{

    min-height:120px !important;

    padding:27px 25px !important;

    background:#081012 !important;
}


.apc-summary-item span{

    display:block !important;

    margin-bottom:14px !important;

    color:#626f71 !important;

    font-size:9px !important;

    font-weight:700 !important;

    letter-spacing:2px !important;
}


.apc-summary-item strong{

    display:block !important;

    color:#ffffff !important;

    font-size:20px !important;

    line-height:1.2 !important;

    font-weight:700 !important;
}


/* =========================================================
   ACCOUNT SECURITY
========================================================= */

.apc-security{

    margin-top:65px !important;

    padding-top:35px !important;

    border-top:1px solid
        var(--apc-border) !important;
}


.apc-security-heading h3{

    margin:10px 0 0 !important;

    font-size:30px !important;

    line-height:1 !important;

    letter-spacing:-1px !important;

    color:#ffffff !important;
}


.apc-security-heading h3 span{

    color:var(--apc-cyan) !important;
}


.apc-password-form{

    margin-top:28px !important;
}


.apc-password-grid{

    display:grid !important;

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

    gap:22px !important;
}


.apc-password-grid .apc-field{

    margin:0 !important;
}


.apc-password-submit{

    display:flex !important;

    align-items:center !important;

    gap:25px !important;

    margin-top:30px !important;
}


.apc-password-submit .apc-response{

    margin:0 !important;
}


.apc-profile-form .apc-response,
.apc-password-form .apc-response{

    min-height:18px !important;
}


/* =========================================================
   PROFILE SUMMARY — PREMIUM
========================================================= */

.apc-profile-section{

    width:100% !important;

    margin-top:65px !important;

    padding-top:0 !important;
}


.apc-profile-section-heading{

    width:100% !important;

    margin-bottom:28px !important;

    padding-bottom:28px !important;

    border-bottom:1px solid
        var(--apc-border) !important;
}


.apc-profile-section-heading h3{

    margin:10px 0 0 !important;

    font-size:30px !important;

    line-height:1 !important;

    letter-spacing:-1px !important;

    font-weight:800 !important;

    color:#ffffff !important;
}


.apc-profile-section-heading h3 span{

    color:var(--apc-cyan) !important;
}


/* =========================================================
   PROFILE SUMMARY CARD
========================================================= */

.apc-profile-summary{

    position:relative !important;

    display:grid !important;

    grid-template-columns:
        150px
        1fr
        1.25fr
        1fr !important;

    min-height:132px !important;

    border:1px solid
        var(--apc-border) !important;

    background:#071012 !important;

    transition:
        border-color .35s ease,
        background .35s ease !important;
}


.apc-profile-summary:hover{

    border-color:#29484c !important;
}


/* =========================================================
   PROFILE SUMMARY PHOTO
========================================================= */

.apc-profile-summary-photo{

    width:120px !important;

    height:120px !important;

    min-width:120px !important;

    margin:auto !important;

    border-radius:50% !important;

    overflow:visible !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    background:#071012 !important;

    border:1px solid #263b3e !important;

    position:relative !important;

    z-index:2 !important;
}


.apc-profile-summary-photo::before{

    content:"" !important;

    position:absolute !important;

    inset:-5px !important;

    border:1px solid
        rgba(111,239,255,.20) !important;

    border-radius:50% !important;

    pointer-events:none !important;

    transition:
        border-color .35s ease !important;
}


.apc-profile-summary:hover
.apc-profile-summary-photo::before{

    border-color:
        rgba(111,239,255,.45) !important;
}


.apc-profile-summary-photo::after{

    content:"" !important;

    position:absolute !important;

    width:7px !important;

    height:7px !important;

    right:5px !important;

    bottom:12px !important;

    border-radius:50% !important;

    background:var(--apc-cyan) !important;

    box-shadow:
        0 0 0 4px #071012,
        0 0 12px rgba(111,239,255,.45) !important;

    z-index:4 !important;
}


.apc-profile-summary-photo img{

    width:100% !important;

    height:100% !important;

    display:block !important;

    object-fit:cover !important;

    object-position:center !important;

    border-radius:50% !important;

    position:relative !important;

    z-index:2 !important;
}


.apc-profile-summary-photo span{

    width:100% !important;

    height:100% !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    border-radius:50% !important;

    background:#0b1517 !important;

    color:var(--apc-cyan) !important;

    font-size:32px !important;

    font-weight:700 !important;

    position:relative !important;

    z-index:2 !important;
}


/* =========================================================
   PROFILE SUMMARY INFO CELLS
========================================================= */

.apc-profile-summary-item{

    min-height:132px !important;

    display:flex !important;

    flex-direction:column !important;

    justify-content:center !important;

    padding:25px 30px !important;

    border-left:1px solid
        var(--apc-border) !important;
}


.apc-profile-summary-item span{

    display:block !important;

    margin-bottom:11px !important;

    font-size:9px !important;

    line-height:1 !important;

    letter-spacing:2.5px !important;

    color:#69777a !important;

    font-weight:700 !important;
}


.apc-profile-summary-item strong{

    display:block !important;

    font-size:14px !important;

    line-height:1.4 !important;

    letter-spacing:.2px !important;

    color:#f2f5f5 !important;

    font-weight:700 !important;

    word-break:break-word !important;
}


/* =========================================================
   PHOTO UPLOAD
========================================================= */

.apc-photo-field{

    margin-bottom:25px !important;
}


.apc-photo-upload{

    position:relative !important;

    display:block !important;

    width:100% !important;

    margin:0 !important;

    padding:0 !important;
}


.apc-bike-photo-input{

    display:block !important;

    width:100% !important;

    height:56px !important;

    margin:0 !important;

    padding:7px !important;

    border:1px solid #203235 !important;

    border-radius:0 !important;

    background:#050a0b !important;

    color:#8b9597 !important;

    font-family:inherit !important;

    font-size:11px !important;

    line-height:40px !important;

    cursor:pointer !important;

    appearance:none !important;

    -webkit-appearance:none !important;
}


.apc-bike-photo-input:hover{

    border-color:#345054 !important;
}


.apc-bike-photo-input:focus{

    border-color:var(--apc-cyan) !important;

    outline:none !important;

    box-shadow:
        0 0 0 1px
        rgba(111,239,255,.12) !important;
}


.apc-bike-photo-input::file-selector-button{

    height:40px !important;

    margin-right:12px !important;

    padding:0 16px !important;

    border:1px solid
        var(--apc-cyan) !important;

    border-radius:0 !important;

    background:var(--apc-cyan) !important;

    color:#061012 !important;

    cursor:pointer !important;

    font-family:inherit !important;

    font-size:9px !important;

    font-weight:800 !important;

    letter-spacing:1.5px !important;
}


.apc-photo-preview{

    position:relative !important;

    display:none !important;

    width:100% !important;

    height:230px !important;

    margin:12px 0 0 !important;

    border:1px solid
        var(--apc-border) !important;

    overflow:hidden !important;

    background:#ffffff !important;
}


.apc-photo-preview.has-image{

    display:block !important;
}


.apc-photo-preview-image{

    display:block !important;

    width:100% !important;

    height:100% !important;

    margin:0 !important;

    padding:0 !important;

    object-fit:cover !important;
}


.apc-photo-preview-placeholder{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex-direction:column !important;

    width:100% !important;

    height:100% !important;

    gap:8px !important;

    background:#071012 !important;

    text-align:center !important;
}


.apc-photo-preview-placeholder strong{

    color:#9aa4a6 !important;

    font-size:10px !important;

    letter-spacing:2px !important;
}


.apc-photo-preview-placeholder small{

    color:#566164 !important;

    font-size:8px !important;

    letter-spacing:1px !important;
}


.apc-photo-icon{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:42px !important;

    height:42px !important;

    border:1px solid
        var(--apc-cyan) !important;

    color:var(--apc-cyan) !important;

    font-size:24px !important;

    line-height:1 !important;
}


.apc-photo-note{

    margin-top:8px !important;

    color:#626b6d !important;

    font-size:9px !important;

    line-height:1.5 !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .apc-auth-grid{

        gap:55px !important;
    }


    .apc-frame .apc-view.is-active{

        padding:45px !important;
    }


    .apc-dashboard-view{

        padding:45px !important;
    }


    .apc-bike-card{

        grid-template-columns:1fr !important;
    }


    .apc-bike-image{

        min-height:250px !important;
    }


    .apc-bike-image img{

        min-height:250px !important;
    }


    .apc-profile-main-grid{

        gap:50px !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:800px){

    .apc-portal{

        width:calc(100% - 34px) !important;

        max-width:none !important;

        padding:55px 0 65px !important;
    }


    .apc-heading{

        grid-template-columns:1fr !important;

        gap:25px !important;

        padding-bottom:40px !important;
    }


    .apc-heading h1{

        font-size:
            clamp(58px,15vw,90px) !important;

        letter-spacing:-3px !important;
    }


    .apc-auth-grid{

        grid-template-columns:1fr !important;

        gap:40px !important;

        padding:0 !important;
    }


    .apc-frame .apc-view.is-active{

        padding:35px 25px !important;
    }


    .apc-dashboard-view{

        padding:35px 25px !important;
    }


    /* =====================================================
       HORIZONTAL DASHBOARD NAVIGATION
    ===================================================== */

    .apc-dashboard-nav{

        display:flex !important;

        width:100% !important;

        overflow-x:auto !important;

        overflow-y:hidden !important;

        scrollbar-width:none !important;

        -webkit-overflow-scrolling:touch !important;
    }


    .apc-dashboard-nav::-webkit-scrollbar{

        display:none !important;
    }


    .apc-dashboard-nav-item{

        flex:0 0 72% !important;

        min-width:72% !important;

        border-right:1px solid
            var(--apc-border) !important;
    }


    /* =====================================================
       PANEL SPACING
    ===================================================== */

    .apc-dashboard-panel[data-dashboard-panel="garage"],
    .apc-dashboard-panel[data-dashboard-panel="appointments"],
    .apc-dashboard-panel[data-dashboard-panel="history"],
    .apc-dashboard-panel[data-dashboard-panel="profile"]{

        padding-top:35px !important;
    }


    /* =====================================================
       STATS
    ===================================================== */

    .apc-stats{

        grid-template-columns:
            1fr 1fr !important;
    }


    .apc-stat{

        border-bottom:1px solid
            var(--apc-border) !important;
    }


    .apc-stat:nth-child(2){

        border-right:0 !important;
    }


    .apc-stat:nth-child(4){

        border-right:0 !important;
    }


    /* =====================================================
       APPOINTMENTS
    ===================================================== */

    .apc-appointment{

        grid-template-columns:
            1fr 1fr !important;
    }


    /* =====================================================
       SERVICE HISTORY
    ===================================================== */

    .apc-service-history-item{

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

        gap:18px !important;

        padding:22px 0 !important;
    }


    .apc-service-history-item > div:nth-child(1){

        grid-column:1 !important;
    }


    .apc-service-history-item > div:nth-child(2){

        grid-column:1 / -1 !important;
    }


    .apc-service-history-item > div:nth-child(3){

        grid-column:1 !important;
    }


    .apc-service-history-item > div:nth-child(4){

        grid-column:2 !important;

        text-align:right !important;
    }


    /* =====================================================
       SECTION HEADING
    ===================================================== */

    .apc-section-heading{

        align-items:flex-start !important;

        flex-direction:column !important;
    }


    .apc-outline-button{

        width:100% !important;
    }


    /* =====================================================
       GARAGE
    ===================================================== */

    .apc-garage-grid{

        grid-template-columns:1fr !important;
    }


    .apc-bike-card{

        grid-template-columns:
            minmax(150px,.8fr)
            minmax(0,1.2fr) !important;
    }


    .apc-bike-image{

        min-height:230px !important;
    }


    .apc-bike-image img{

        min-height:230px !important;
    }


    /* =====================================================
       PROFILE
    ===================================================== */

    .apc-profile-view{

        padding:35px 25px !important;
    }


    .apc-profile-main-grid{

        grid-template-columns:1fr !important;

        gap:45px !important;
    }


    .apc-profile-photo-preview{

        width:180px !important;

        height:180px !important;
    }


    .apc-profile-fields{

        grid-template-columns:1fr !important;
    }


    .apc-profile-fields .apc-field:first-child{

        grid-column:auto !important;
    }


    .apc-password-grid{

        grid-template-columns:1fr !important;
    }


    .apc-summary-grid{

        grid-template-columns:1fr !important;
    }


    .apc-profile-summary{

        grid-template-columns:
            120px
            minmax(0,1fr) !important;
    }


    .apc-profile-summary-photo{

        width:88px !important;

        height:88px !important;

        min-width:88px !important;

        min-height:88px !important;

        max-width:88px !important;

        max-height:88px !important;

        margin:16px auto !important;

        overflow:hidden !important;

        aspect-ratio:1 / 1 !important;
    }


    .apc-profile-summary-photo::before{

        inset:-4px !important;
    }


    .apc-profile-summary-photo::after{

        right:3px !important;

        bottom:8px !important;
    }


    .apc-profile-summary-photo img{

        width:100% !important;

        height:100% !important;

        min-width:100% !important;

        min-height:100% !important;

        max-width:none !important;

        max-height:none !important;
    }


    .apc-profile-summary-photo span{

        font-size:27px !important;
    }


    .apc-profile-summary-item{

        min-height:0 !important;

        padding:24px 20px !important;
    }


    .apc-profile-summary-item:nth-child(2){

        grid-column:2 !important;

        grid-row:1 !important;
    }


    .apc-profile-summary-item:nth-child(3){

        grid-column:1 / -1 !important;

        grid-row:2 !important;

        border-left:0 !important;

        border-top:1px solid
            var(--apc-border) !important;
    }


    .apc-profile-summary-item:nth-child(4){

        grid-column:1 / -1 !important;

        grid-row:3 !important;

        border-left:0 !important;

        border-top:1px solid
            var(--apc-border) !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:520px){

    .apc-heading h1{

        font-size:58px !important;
    }


    .apc-field-row{

        grid-template-columns:1fr !important;
    }


    .apc-form-links{

        align-items:flex-start !important;

        flex-direction:column !important;
    }


    .apc-dashboard-top{

        align-items:flex-start !important;

        flex-direction:column !important;
    }


    .apc-appointment{

        grid-template-columns:1fr !important;

        gap:18px !important;
    }


    .apc-empty-button{

        max-width:none !important;
    }


    .apc-bike-card{

        grid-template-columns:1fr !important;
    }


    .apc-bike-image{

        min-height:240px !important;
    }


    .apc-bike-image img{

        min-height:240px !important;
    }


    .apc-bike-content{

        padding:22px !important;
    }


    .apc-photo-preview{

        height:210px !important;
    }


    /* =====================================================
       SERVICE HISTORY — SMALL MOBILE
    ===================================================== */

    .apc-service-history-item{

        grid-template-columns:1fr !important;

        gap:18px !important;

        padding:20px 0 !important;
    }


    .apc-service-history-item > div{

        grid-column:auto !important;

        text-align:left !important;
    }


    .apc-service-history-item > div:nth-child(4){

        text-align:left !important;
    }


    /* =====================================================
       NAV
    ===================================================== */

    .apc-dashboard-nav-item{

        flex:0 0 82% !important;

        min-width:82% !important;
    }


    /* =====================================================
       PROFILE
    ===================================================== */

    .apc-profile-page-heading{

        align-items:flex-start !important;

        flex-direction:column !important;

        gap:22px !important;
    }


    .apc-profile-page-heading h2{

        font-size:38px !important;
    }


    .apc-profile-photo-preview{

        width:160px !important;

        height:160px !important;
    }


    .apc-profile-save-row,
    .apc-password-submit{

        align-items:flex-start !important;

        flex-direction:column !important;

        gap:15px !important;
    }


    .apc-profile-save-row .apc-button{

        width:100% !important;
    }


    .apc-profile-section{

        margin-top:50px !important;
    }


    .apc-profile-section-heading{

        align-items:flex-start !important;

        gap:20px !important;
    }


    .apc-profile-section-heading h3{

        font-size:27px !important;
    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media(max-width:390px){

    .apc-portal{

        width:calc(100% - 28px) !important;
    }


    .apc-frame .apc-view.is-active{

        padding:30px 20px !important;
    }


    .apc-dashboard-view{

        padding:30px 20px !important;
    }


    .apc-auth-grid{

        padding:0 !important;
    }


    .apc-heading h1{

        font-size:52px !important;

        letter-spacing:-2px !important;
    }


    .apc-profile-view{

        padding:30px 20px !important;
    }


    .apc-profile-page-heading h2{

        font-size:33px !important;
    }


    .apc-profile-photo-preview{

        width:145px !important;

        height:145px !important;
    }


    .apc-dashboard-nav-item{

        flex:0 0 88% !important;

        min-width:88% !important;
    }

}
















/* =========================================================
   ARCHER PRASANTA
   SERVICE HISTORY — PREMIUM RECORD SYSTEM
========================================================= */

.apc-service-history-list{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:34px;
}


/* =========================================================
   OVERVIEW CARD
========================================================= */

.apc-history-card{
    position:relative;
    border:1px solid rgba(111,239,255,.16);
    background:rgba(5,12,14,.58);
    overflow:hidden;
    transition:
        border-color .35s ease,
        background .35s ease,
        transform .35s ease;
}


.apc-history-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:3px;
    height:100%;
    background:#6FEFFF;
    opacity:.45;
    transition:opacity .35s ease;
}


.apc-history-card:hover{
    border-color:rgba(111,239,255,.42);
    background:rgba(7,17,19,.82);
    transform:translateY(-2px);
}


.apc-history-card:hover::before{
    opacity:1;
}


.apc-history-card.is-processing::before{
    opacity:.7;
}


/* =========================================================
   CARD TOP
========================================================= */

.apc-history-card-top{
    display:grid;
    grid-template-columns:58px minmax(0,1fr) 180px;
    align-items:center;
    border-bottom:1px solid rgba(111,239,255,.12);
}


.apc-history-card-number{
    height:100%;
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(111,239,255,.12);
}


.apc-history-card-number span{
    font-size:10px;
    letter-spacing:2px;
    color:#6f8082;
    font-weight:700;
}


.apc-history-card-service{
    padding:22px 28px;
}


.apc-history-label,
.apc-history-card-meta span,
.apc-history-card-payment span{
    display:block;
    font-size:9px;
    letter-spacing:2.4px;
    font-weight:700;
    color:#6f8082;
}


.apc-history-card-service h4{
    margin:7px 0 0;
    font-size:22px;
    line-height:1.1;
    color:#f4f8f8;
    font-weight:700;
}


.apc-history-card-status{
    padding:22px 24px;
    border-left:1px solid rgba(111,239,255,.12);
}


.apc-history-card-status strong{
    display:block;
    margin-top:7px;
    font-size:10px;
    letter-spacing:2px;
    color:#6FEFFF;
}


.apc-history-card.is-processing .apc-history-card-status strong{
    color:#ffffff;
}


/* =========================================================
   META
========================================================= */

.apc-history-card-meta{
    display:grid;
    grid-template-columns:1.2fr 1.4fr 1fr .7fr;
    border-bottom:1px solid rgba(111,239,255,.12);
}


.apc-history-card-meta > div{
    padding:19px 22px;
    border-right:1px solid rgba(111,239,255,.10);
}


.apc-history-card-meta > div:last-child{
    border-right:0;
}


.apc-history-card-meta strong{
    display:block;
    margin-top:7px;
    font-size:12px;
    line-height:1.35;
    color:#edf3f3;
}


.apc-history-booking-id{
    color:#6FEFFF !important;
    letter-spacing:.5px;
}


/* =========================================================
   SUMMARY
========================================================= */

.apc-history-card-summary{
    padding:20px 22px;
    border-bottom:1px solid rgba(111,239,255,.12);
}


.apc-history-card-summary > span{
    display:block;
    font-size:9px;
    letter-spacing:2.4px;
    color:#6f8082;
    font-weight:700;
}


.apc-history-card-summary p{
    max-width:900px;
    margin:9px 0 0;
    color:#b5c0c1;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   CARD FOOTER
========================================================= */

.apc-history-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 22px;
}


.apc-history-card-payment strong{
    display:block;
    margin-top:5px;
    font-size:13px;
    color:#f2f7f7;
}


.apc-history-view-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    border:1px solid rgba(111,239,255,.30);
    background:transparent;
    color:#6FEFFF;
    padding:13px 17px;
    cursor:pointer;
    font-family:inherit;
    font-size:9px;
    letter-spacing:1.8px;
    font-weight:700;
    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}


.apc-history-view-button i{
    font-style:normal;
    font-size:15px;
    transition:transform .3s ease;
}


.apc-history-view-button:hover{
    background:#6FEFFF;
    border-color:#6FEFFF;
    color:#061012;
}


.apc-history-view-button:hover i{
    transform:translateX(5px);
}


/* =========================================================
   FULL HISTORY DASHBOARD PANEL
========================================================= */

.apc-dashboard-panel[data-dashboard-panel="history-detail"]{
    display:none;
    opacity:0;
    transform:translateY(22px);
}


.apc-dashboard-panel[data-dashboard-panel="history-detail"].apc-history-detail-visible{
    display:block !important;
    opacity:1;
    transform:translateY(0);
    animation:apcHistoryDetailIn .55s cubic-bezier(.22,.61,.36,1) both;
}


@keyframes apcHistoryDetailIn{

    from{
        opacity:0;
        transform:translateY(25px);
    }

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

}


/* =========================================================
   BACK BUTTON
========================================================= */

.apc-history-back-button{
    display:inline-flex;
    align-items:center;
    gap:14px;
    margin-bottom:34px;
    padding:0;
    border:0;
    background:transparent;
    color:#6f8082;
    cursor:pointer;
    font-family:inherit;
    font-size:9px;
    letter-spacing:2px;
    font-weight:700;
    transition:
        color .3s ease,
        transform .3s ease;
}


.apc-history-back-button span{
    font-size:16px;
    line-height:1;
    color:#6FEFFF;
    transition:transform .3s ease;
}


.apc-history-back-button:hover{
    color:#6FEFFF;
    transform:translateX(-2px);
}


.apc-history-back-button:hover span{
    transform:translateX(-4px);
}


/* =========================================================
   DETAIL CONTAINER
========================================================= */

.apc-history-detail-container{
    border:1px solid rgba(111,239,255,.16);
    background:rgba(5,12,14,.58);
    overflow:hidden;
}


/* =========================================================
   DETAIL HEADER
========================================================= */

.apc-history-detail-header{
    padding:50px 50px 42px;
    border-bottom:1px solid rgba(111,239,255,.14);
}


.apc-history-detail-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:9px;
    letter-spacing:3px;
    color:#6f8082;
    font-weight:700;
}


.apc-history-detail-eyebrow::before{
    content:"";
    width:36px;
    height:1px;
    background:#6FEFFF;
}


.apc-history-detail-title-row{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-top:20px;
}


.apc-history-detail-title-row h2{
    margin:0;
    color:#f5f8f8;
    font-size:clamp(34px,5vw,62px);
    line-height:.95;
    letter-spacing:-2px;
}


.apc-history-detail-booking{
    margin-top:15px;
    color:#6FEFFF;
    font-size:11px;
    letter-spacing:2px;
    font-weight:700;
}


.apc-history-detail-status{
    flex:0 0 auto;
    min-width:145px;
    padding:15px 18px;
    border:1px solid rgba(111,239,255,.20);
}


.apc-history-detail-status span{
    display:block;
    font-size:8px;
    letter-spacing:2px;
    color:#6f8082;
}


.apc-history-detail-status strong{
    display:block;
    margin-top:6px;
    color:#6FEFFF;
    font-size:10px;
    letter-spacing:1.8px;
}


.apc-history-detail-status.is-processing strong{
    color:#ffffff;
}


/* =========================================================
   DETAIL SECTIONS
========================================================= */

.apc-history-detail-section{
    padding:42px 50px;
    border-bottom:1px solid rgba(111,239,255,.11);
}


.apc-history-detail-section-heading{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:25px;
}


.apc-history-detail-section-heading > span{
    font-size:9px;
    letter-spacing:2px;
    color:#6FEFFF;
    font-weight:700;
}


.apc-history-detail-section-heading h3{
    margin:0;
    color:#f4f7f7;
    font-size:20px;
    letter-spacing:-.3px;
}


.apc-history-detail-section-heading h3 em{
    color:#6FEFFF;
    font-style:normal;
}


/* =========================================================
   OVERVIEW GRID
========================================================= */

.apc-history-overview-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid rgba(111,239,255,.12);
    border-left:1px solid rgba(111,239,255,.12);
}


.apc-history-overview-grid > div{
    min-height:92px;
    padding:18px 20px;
    border-right:1px solid rgba(111,239,255,.12);
    border-bottom:1px solid rgba(111,239,255,.12);
}


.apc-history-overview-grid span,
.apc-history-billing-grid span{
    display:block;
    font-size:8px;
    letter-spacing:2.2px;
    color:#6f8082;
    font-weight:700;
}


.apc-history-overview-grid strong{
    display:block;
    margin-top:9px;
    color:#eaf0f0;
    font-size:13px;
}


/* =========================================================
   LONG TEXT
========================================================= */

.apc-history-long-text{
    padding:25px;
    border:1px solid rgba(111,239,255,.12);
    color:#c1cbcc;
    font-size:14px;
    line-height:1.9;
}


/* =========================================================
   WORK GRID
========================================================= */

.apc-history-work-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1px;
    background:rgba(111,239,255,.12);
    border:1px solid rgba(111,239,255,.12);
}


.apc-history-work-block{
    display:grid;
    grid-template-columns:55px 1fr;
    gap:20px;
    padding:25px;
    background:#081214;
}


.apc-history-work-number{
    color:#6FEFFF;
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:700;
}


.apc-history-work-block span{
    display:block;
    font-size:9px;
    letter-spacing:2px;
    color:#6f8082;
    font-weight:700;
}


.apc-history-work-block p{
    margin:12px 0 0;
    color:#bdc7c8;
    font-size:13px;
    line-height:1.8;
}


/* =========================================================
   GALLERY
========================================================= */

.apc-history-gallery-group + .apc-history-gallery-group{
    margin-top:35px;
}


.apc-history-gallery-label{
    margin-bottom:12px;
    font-size:9px;
    letter-spacing:2.5px;
    color:#6FEFFF;
    font-weight:700;
}


.apc-history-gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}


.apc-history-photo{
    position:relative;
    aspect-ratio:4/3;
    padding:0;
    border:1px solid rgba(111,239,255,.12);
    background:#050a0b;
    overflow:hidden;
    cursor:pointer;
}


.apc-history-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
}


.apc-history-photo span{
    position:absolute;
    inset:auto 10px 10px 10px;
    padding:8px;
    background:rgba(4,9,10,.82);
    color:#6FEFFF;
    font-size:8px;
    letter-spacing:2px;
    font-weight:700;
    opacity:0;
    transform:translateY(5px);
    transition:.3s ease;
}


.apc-history-photo:hover img{
    transform:scale(1.06);
}


.apc-history-photo:hover span{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
   TECHNICIAN NOTE
========================================================= */

.apc-history-note{
    display:grid;
    grid-template-columns:50px 1fr;
    border:1px solid rgba(111,239,255,.12);
    background:rgba(111,239,255,.025);
}


.apc-history-note-mark{
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid rgba(111,239,255,.12);
    color:#6FEFFF;
    font-size:18px;
}


.apc-history-note p{
    margin:0;
    padding:25px;
    color:#c0cbcc;
    font-size:13px;
    line-height:1.85;
}


/* =========================================================
   BILLING
========================================================= */

.apc-history-billing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border:1px solid rgba(111,239,255,.12);
}


.apc-history-billing-grid > div{
    padding:22px;
    border-right:1px solid rgba(111,239,255,.12);
}


.apc-history-billing-grid > div:last-child{
    border-right:0;
}


.apc-history-billing-grid strong{
    display:block;
    margin-top:9px;
    color:#f0f5f5;
    font-size:14px;
}


.apc-history-price{
    color:#6FEFFF !important;
    font-size:20px !important;
}


.apc-history-invoice{
    margin-top:12px;
}


.apc-history-invoice a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 20px;
    border:1px solid rgba(111,239,255,.25);
    color:#6FEFFF;
    text-decoration:none;
    font-size:9px;
    letter-spacing:2px;
    font-weight:700;
    transition:.3s ease;
}


.apc-history-invoice a i{
    font-style:normal;
    font-size:16px;
}


.apc-history-invoice a:hover{
    background:#6FEFFF;
    color:#061012;
}


/* =========================================================
   DETAIL FOOTER
========================================================= */

.apc-history-detail-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 50px;
}


.apc-history-detail-footer span{
    color:#536164;
    font-size:8px;
    letter-spacing:2px;
}


.apc-history-detail-footer strong{
    color:#6FEFFF;
    font-size:9px;
    letter-spacing:1.5px;
}


/* =========================================================
   IMAGE LIGHTBOX
   Only for clicking service photos
========================================================= */

.apc-history-image-lightbox{
    position:fixed;
    inset:0;
    z-index:1000001;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    background:rgba(0,0,0,.96);
    animation:apcHistoryLightboxIn .3s ease both;
}


@keyframes apcHistoryLightboxIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


.apc-history-image-lightbox img{
    max-width:94vw;
    max-height:90vh;
    object-fit:contain;
}


.apc-history-image-lightbox button{
    position:absolute;
    top:25px;
    right:25px;
    width:45px;
    height:45px;
    border:1px solid rgba(111,239,255,.3);
    background:transparent;
    color:#6FEFFF;
    font-size:24px;
    cursor:pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:900px){

    .apc-history-card-top{
        grid-template-columns:45px 1fr;
    }


    .apc-history-card-status{
        grid-column:2;
        border-left:0;
        border-top:1px solid rgba(111,239,255,.10);
    }


    .apc-history-card-meta{
        grid-template-columns:1fr 1fr;
    }


    .apc-history-card-meta > div:nth-child(2){
        border-right:0;
    }


    .apc-history-card-meta > div:nth-child(3),
    .apc-history-card-meta > div:nth-child(4){
        border-top:1px solid rgba(111,239,255,.10);
    }


    .apc-history-card-footer{
        align-items:flex-start;
        flex-direction:column;
    }


    .apc-history-view-button{
        width:100%;
        justify-content:space-between;
    }


    .apc-history-detail-header{
        padding:40px 25px 32px;
    }


    .apc-history-detail-title-row{
        flex-direction:column;
        align-items:flex-start;
    }


    .apc-history-detail-section{
        padding:32px 25px;
    }


    .apc-history-overview-grid{
        grid-template-columns:1fr 1fr;
    }


    .apc-history-work-grid{
        grid-template-columns:1fr;
    }


    .apc-history-gallery{
        grid-template-columns:repeat(2,1fr);
    }


    .apc-history-billing-grid{
        grid-template-columns:1fr;
    }


    .apc-history-billing-grid > div{
        border-right:0;
        border-bottom:1px solid rgba(111,239,255,.12);
    }


    .apc-history-billing-grid > div:last-child{
        border-bottom:0;
    }


    .apc-history-detail-footer{
        padding:22px 25px;
        flex-direction:column;
        align-items:flex-start;
    }

}


@media (max-width:600px){

    .apc-service-history-list{
        margin-top:25px;
    }


    .apc-history-card-service{
        padding:18px 16px;
    }


    .apc-history-card-service h4{
        font-size:18px;
    }


    .apc-history-card-meta{
        grid-template-columns:1fr;
    }


    .apc-history-card-meta > div{
        border-right:0 !important;
        border-top:1px solid rgba(111,239,255,.10);
    }


    .apc-history-card-meta > div:first-child{
        border-top:0;
    }


    .apc-history-card-summary{
        padding:17px;
    }


    .apc-history-card-footer{
        padding:18px;
    }


    .apc-history-detail-header{
        padding:32px 18px 28px;
    }


    .apc-history-detail-section{
        padding:28px 18px;
    }


    .apc-history-detail-title-row h2{
        font-size:36px;
    }


    .apc-history-overview-grid{
        grid-template-columns:1fr;
    }


    .apc-history-work-block{
        grid-template-columns:40px 1fr;
        padding:20px;
    }


    .apc-history-gallery{
        grid-template-columns:1fr 1fr;
        gap:6px;
    }


    .apc-history-detail-footer{
        padding:20px 18px;
    }


    .apc-history-image-lightbox{
        padding:15px;
    }


    .apc-history-image-lightbox button{
        top:12px;
        right:12px;
    }

}