.elementor-1437 .elementor-element.elementor-element-89f6e63{--display:flex;--position:fixed;--min-height:100;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;top:0px;--z-index:9;}.elementor-1437 .elementor-element.elementor-element-89f6e63:not(.elementor-motion-effects-element-type-background), .elementor-1437 .elementor-element.elementor-element-89f6e63 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F5F6F8;}.elementor-1437 .elementor-element.elementor-element-89f6e63.e-con{--flex-grow:0;--flex-shrink:0;}body:not(.rtl) .elementor-1437 .elementor-element.elementor-element-89f6e63{left:0px;}body.rtl .elementor-1437 .elementor-element.elementor-element-89f6e63{right:0px;}.elementor-1437 .elementor-element.elementor-element-6ce1ec9{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 0px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D5D6D8;--border-color:#D5D6D8;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1437 .elementor-element.elementor-element-6b02ce7{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-1437 .elementor-element.elementor-element-6b02ce7 > .elementor-widget-container{margin:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-1437 .elementor-element.elementor-element-6b02ce7.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:1;}.elementor-1437 .elementor-element.elementor-element-89be4b3{width:100%;max-width:100%;}@media(min-width:769px){.elementor-1437 .elementor-element.elementor-element-89f6e63{--width:270px;}}/* Start custom CSS for html, class: .elementor-element-6b02ce7 *//* ==========================================================
   STAKLEMEET SELLER SIDEBAR
   PART 1 - BASE LAYOUT
========================================================== */

/* ==========================
   LOGO
========================== */



.sidebar-header{
    padding:22px 24px 14px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.user-dashboard{
    width:100%;
    height:100vh;
    background: #1B1B38;
    border-radius:0;
    padding:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    font-family:Inter,sans-serif;
}

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

.sidebar-header{

    padding:18px 20px 12px;

   background:#1B1B38;
    border-top:3px solid #D0AB5A;

}

/* ==========================================================
   SELLER BADGE
========================================================== */

.portal-badge-container{
    padding: 20px;
}

.portal-badge{
    width:100%;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#453948;
    color:#D6B164;
    border-radius:8px;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.portal-icon{

    font-size:9px;

}

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

.sidebar-section{

    display:flex;
    flex-direction:column;

}

.sidebar-title{

    padding:14px 16px 8px;

    color:#7F87BE;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.sidebar-title:nth-of-type(2){

    color:#4C8BFF;

}

.sidebar-title:nth-of-type(3){

    color:#57E37E;

}

.sidebar-title:nth-of-type(4){

    color:#A878FF;

}

.sidebar-title:nth-of-type(5){

    color:#7382A8;

}

/* ==========================================================
   MENU ITEM
========================================================== */

.sidebar-item{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:13px 20px;
    color:#F5F5FD;
    font-size:14px;
    font-weight:500;
    cursor:pointer;
    transition:.25s;
}

.sidebar-item span:first-child{

    white-space:nowrap;

}

.sidebar-item:hover{
    background:rgba(255,255,255,.04);
}

.sidebar-item.active{
    background:#D0AB5A;
    color:#111;
    font-weight:700;
}
.sidebar-item.active .menu-count{

    background:#E45555;

    color:#fff;

}

/* ==========================================================
   MENU COUNT
========================================================== */

.menu-count{
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#EB5B5B;
    color:#fff;
    font-size:10px;
    font-weight:700;
}
/* ==========================================================
   FOOTER
========================================================== */

.sidebar-footer{
    margin-top:auto;
    padding:18px 16px;
}

/* ==========================================================
   SUBSCRIPTION CARD
========================================================== */

.subscription-card{
    background:#322A3F;
    border:1px solid rgba(214,177,100,.35);
    border-radius:12px;
    padding:14px;
}

.subscription-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:10px;

}

.subscription-tag{

    color:#D6B164;

    font-size:9px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

}

.subscription-badge{

    background:#ECECF3;

    color:#5F6270;

    padding:2px 6px;

    border-radius:20px;

    font-size:8px;

    font-weight:700;

}

.subscription-status{

    color:#FFFFFF;

    font-size:12px;

    font-weight:600;

    margin-bottom:8px;

}

.subscription-status strong{

    color:#FFFFFF;

}

.subscription-progress{

    width:100%;

    height:4px;

    border-radius:999px;

    background:rgba(255,255,255,.12);

    overflow:hidden;

    margin-bottom:14px;

}

.subscription-progress-fill{

    width:0%;

    height:100%;

    background:#D6B164;

    transition:.35s;

}

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

.upgrade-btn{

    width:100%;
    height:36px;
    border:none;
    border-radius:8px;
    background:#D0AB5A;
    color:#171717;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;

}

.upgrade-btn:hover{

    background:#E5BE6A;

}

/* ==========================================================
   SWITCH PORTAL
========================================================== */

.switch-portal{

    margin-top:18px;

    border-top:1px solid rgba(255,255,255,.06);

    padding-top:18px;

}

.switch-btn{
    width:100%;
    height:44px;
    border-radius:10px;
    background:#27345C;
    border:1px solid #5568A5;
    color:#FFFFFF;
    font-size:12px;
    font-weight:600;
    cursor:pointer;

    transition:.25s;

}

.switch-btn:hover{

    background:#34355C;

}

.switch-text{

    margin-top:4px;

    text-align:center;

    color:#7F87BE;

    font-size:10px;

}

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

@media(max-width:768px){

.sidebar-item{

    padding:11px 16px;

    font-size:13px;

}

.sidebar-title{

    padding-left:16px;

}

}

/* ==========================================================
   PART 2 - PREMIUM FINISHING
========================================================== */

/* Sidebar Smooth Scroll */

.sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
/* ------------------------------
   Logo Hover
------------------------------ */

.sidebar-logo img{
    transition:.25s ease;
    margin-bottom: 0px;
}

.sidebar-logo:hover img{
    transform:scale(1.02);
}

.sidebar-logo{
    padding: 20px 0px 0px 20px;
}

/* ------------------------------
   Menu Animation
------------------------------ */

.sidebar-item{
    transition:
        background .25s ease,
        color .25s ease,
        transform .2s ease;
}

.sidebar-item:hover{
    transform:translateX(4px);
}

.sidebar-item.active{
    transform:none;
}

/* ------------------------------
   Section Spacing
------------------------------ */

.sidebar-section{
    margin-bottom:4px;
}

.sidebar-title:first-of-type{
    margin-top:8px;
}

/* ------------------------------
   Notification Badge
------------------------------ */

.menu-count{

    min-width:18px;
    padding:0 5px;

    box-shadow:
    0 3px 8px rgba(228,85,85,.25);

}

/* ------------------------------
   Subscription Card
------------------------------ */

.subscription-card{

    position:relative;

    overflow:hidden;

}

.subscription-card::before{

    content:"";

    position:absolute;

    right:-45px;
    top:-45px;

    width:90px;
    height:90px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

}

.subscription-card::after{

    content:"";

    position:absolute;

    left:-25px;
    bottom:-25px;

    width:55px;
    height:55px;

    border-radius:50%;

    background:rgba(214,177,100,.05);

}

/* ------------------------------
   Progress
------------------------------ */

.subscription-progress{

    position:relative;

}

.subscription-progress-fill{

    border-radius:999px;

}

/* ------------------------------
   Upgrade Button
------------------------------ */

.upgrade-btn{

    box-shadow:

    0 10px 18px rgba(214,177,100,.18);

}

.upgrade-btn:hover{

    transform:translateY(-1px);

}

.upgrade-btn:active{

    transform:scale(.98);

}

/* ------------------------------
   Switch Card
------------------------------ */

.switch-portal{

    margin-top:16px;

}

.switch-btn{

    transition:
    background .25s,
    border-color .25s,
    transform .2s;

}

.switch-btn:hover{

    border-color:#6C7BC2;

}

.switch-btn:active{

    transform:scale(.98);

}

.switch-text{

    opacity:.75;

}

/* ------------------------------
   Active Dashboard
------------------------------ */
.userhome.active{
    background:#D0AB5A;
    color:#111;
}

/* ------------------------------
   Focus Accessibility
------------------------------ */

.sidebar-item:focus,
.upgrade-btn:focus,
.switch-btn:focus{

    outline:none;

    box-shadow:
    0 0 0 3px rgba(212,175,99,.25);

}

/* ------------------------------
   Better Typography
------------------------------ */

.subscription-status{

    display:flex;

    align-items:center;

    gap:4px;

    flex-wrap:wrap;

}

.subscription-status strong{

    font-size:13px;

}

/* ------------------------------
   Better Button Fonts
------------------------------ */

.upgrade-btn,
.switch-btn{

    font-family:inherit;

    letter-spacing:.2px;

}

/* ------------------------------
   Mobile
------------------------------ */

@media(max-width:768px){

.user-dashboard{

    border-radius:0;

}

.sidebar-header{

    padding:16px 14px 8px;

}

.portal-badge{

    height:26px;

    font-size:9px;

}

.sidebar-title{

    font-size:9px;

}

.subscription-card{

    padding:10px;

}

.subscription-status{

    font-size:11px;

}

.upgrade-btn{

    height:32px;

}

.switch-btn{

    height:38px;

}

}

/* ------------------------------
   Large Screens
------------------------------ */

@media(min-width:1200px){

.sidebar-item{

    padding:13px 18px;

}

}

/* ------------------------------
   Future Dynamic Progress
------------------------------ */

.subscription-progress-fill[data-value="0"]{

    width:0%;

}

.subscription-progress-fill[data-value="1"]{

    width:20%;

}

.subscription-progress-fill[data-value="2"]{

    width:40%;

}

.subscription-progress-fill[data-value="3"]{

    width:60%;

}

.subscription-progress-fill[data-value="4"]{

    width:80%;

}

.subscription-progress-fill[data-value="5"]{

    width:100%;

}/* End custom CSS */