/********** This CSS file is for all User Dashboard UI elements. File is loaded to both editor and front end **********/



/********** User Dashboard Layout **********/

/* ensure 100vh on columns */

.user-dashboard-columns {
    max-height: calc(100vh - var(--header-height-desktop));
    height: 100vh;
    overflow-y: hidden;
    max-width: 100%;
    overflow-x: hidden;
}


/* Allow for wp admin bar with columns */
body.admin-bar .user-dashboard-columns {
    max-height: calc(100vh - var(--header-height-desktop) - 32px);
    height: 100vh;
}


/********** User Sidebar Layout **********/

.user-sidebar-column {
    overflow: auto;
}

/* Allows for sidebar space between */
.user-sidebar-inner-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/********** User Content Layout **********/

/* Makes the user content scrollable on desktop */
.user-outer-wrapper {
height: 100%;
}


/* User page title wrapper */

.user-page-title{
top: 0px!important;
z-index: 1!important;
max-height: 45px;
}

.user-page-title h2{
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif!important;
}


.user-inner-container {
height: calc(100% - 45px)!important;
overflow: auto!important;
}


/* User Dashboard Menu Trigger Wrapper */

.user-dashboard-menu-trigger-wrapper {
    transition: all 0.3s ease-in-out!important;
}

.user-dashboard-menu-trigger-wrapper :hover {
    background-color: var(--wp--preset--color--base-3);
    transition: all 0.3s ease-in-out!important;
}



/* Adds height to template part for editor and front end */

.user-sidebar-template-part {
    height: 100%;
}


/* List */
.user-sidebar-menu ul{
    width:100%;
   }
   
   /* Block navigation item */
   .user-sidebar-menu .wp-block-navigation-item{
    width:100%;
    display: flex;
   }
   
   /* Link */
   .user-sidebar-menu .wp-block-navigation-item__content{
    display:flex;
    align-items:center;
    width:100%;
    padding: 5px 10px 5px 10px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
   }

    /* Link */
   .user-sidebar-menu .wp-block-navigation-item__content:hover{
    background-color: var(--wp--preset--color--base-2);
    transition: all 0.3s ease-in-out;
   }

 /* Active Link Based on Current Page */
.user-sidebar-menu .current-menu-item .wp-block-navigation-item__content,
.user-sidebar-menu .current_page_item .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--base-2) !important;
}


   
/* Span Tag */
   .user-sidebar-menu .wp-block-navigation-item__label{
    display:flex;
    align-items:center;
    gap: 10px;
    width:100%;
}


   
   

/********** Sidebar Menu buttons **********/

.user-sidebar-button .wp-block-button__link {
    display: flex!important;
    gap: 10px!important;
    padding: 5px 5px 5px 5px!important;
    text-align:left!important;
    font-size:14px!important;
    font-weight:400!important;
    color: var(--wp--preset--color--contrast-2)!important;
    background-color: var(--wp--preset--color--base);
    transition: all 0.3s ease-in-out;
}

.user-sidebar-button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--base-2)!important;
}

.current-page-button {
    background-color: var(--wp--preset--color--base-2)!important;
}

/* Styling for icon */

.user-sidebar-button a::before {
    content: '';
    display: inline-block;
    width: 22px; /* Adjust the size of the icon if needed */
    height: 22px;
    background-color: var(--wp--preset--color--contrast-3); /* Apply the preset color */
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: relative;
}

/* Dashboard Icon */
.button-dashboard a::before {
    -webkit-mask-image: url('../icons/squares-four.svg');
    mask-image: url('../icons/squares-four.svg');
}

/* Profile Icon */
.button-profile a::before {
    -webkit-mask-image: url('../icons/user-circle.svg');
    mask-image: url('../icons/user-circle.svg');
}

/* Subscription Icon */
.button-subscription a::before {
    -webkit-mask-image: url('../icons/credit-card.svg');
    mask-image: url('../icons/credit-card.svg');
}

/* Helpdesk Icon */
.button-helpdesk a::before {
    -webkit-mask-image: url('../icons/lifebuoy.svg');
    mask-image: url('../icons/lifebuoy.svg');
}

/* Log out Icon - Horizontal Flip */
.button-logout a::before {
    -webkit-mask-image: url('../icons/sign-out.svg');
    mask-image: url('../icons/sign-out.svg');
}











/* Common icon styling for all links */
.user-sidebar-link-dashboard a::before,
.user-sidebar-link-profile a::before,
.user-sidebar-link-subscription a::before,
.user-sidebar-link-helpdesk a::before,
.user-sidebar-link-logout a::before {
    content: '';
    display: inline-block;
    width: 22px; /* Adjust the size of the icon if needed */
    height: 22px;
    margin-right: 10px;
    vertical-align: middle; /* Ensures the icon is aligned with the text */
    background-color: var(--wp--preset--color--contrast-3); /* Apply the preset color */
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    position: relative;
    top: 2px; /* Adjust this value slightly to fine-tune the alignment */
}

/* Dashboard Icon */
.user-sidebar-link-dashboard a::before {
    -webkit-mask-image: url('../icons/squares-four.svg');
    mask-image: url('../icons/squares-four.svg');
}

/* Profile Icon */
.user-sidebar-link-profile a::before {
    -webkit-mask-image: url('../icons/user-circle.svg');
    mask-image: url('../icons/user-circle.svg');
}

/* Subscription Icon */
.user-sidebar-link-subscription a::before {
    -webkit-mask-image: url('../icons/credit-card.svg');
    mask-image: url('../icons/credit-card.svg');
}

/* Helpdesk Icon */
.user-sidebar-link-helpdesk a::before {
    -webkit-mask-image: url('../icons/lifebuoy.svg');
    mask-image: url('../icons/lifebuoy.svg');
}

/* Log out Icon - Horizontal Flip */
.user-sidebar-link-logout a::before {
    -webkit-mask-image: url('../icons/sign-out.svg');
    mask-image: url('../icons/sign-out.svg');
}





/******************** User Popup Menu ********************/

#tecology-user-popup .tecology-popup-container.tecology-popup-frontend .tecology-popup-overlay{
 justify-content:flex-end;
 align-items:flex-start;
 top: var(--header-height-desktop);
 right: var(--wp--preset--spacing--10);
}

/* Allow for wp admin bar */
body.admin-bar #tecology-user-popup .tecology-popup-container.tecology-popup-frontend .tecology-popup-overlay {
    top: calc(var(--header-height-desktop) + 29px);
} 

/* Allow for wp admin bar responsive */
@media screen and (max-width: 782px) {
body.admin-bar #tecology-user-popup .tecology-popup-container.tecology-popup-frontend .tecology-popup-overlay {
    top: calc(var(--header-height-desktop) + 40px);
} 
    
}




/******************** User Off Canvas Menu ********************/


#user-off-canvas .tecology-off-canvas-button-wrapper {
    display: none;
}


@media screen and (max-width: 1199px) {
 
    #user-sidebar-scroll {
        overflow: auto!important;
        max-height: 100%!important;
    
    }
    
}


@media screen and (max-width: 767px) {
 
    #user-sidebar-scroll {
        overflow: auto!important;
        max-height: 470!important;
    
    }
    
}