/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

.page-content {
    padding-top: 55px;
    padding-bottom: 50px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Reset padding and margin on the jQuery UI widget header (tabs list) */
.ui-widget-header {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important; /* Remove any borders */
}

body {
    margin: 0;
}

/* 1. Ensure tab-content takes available height */
.tab-content {
    height: 100%; /* Important for filling vertical space */
    flex-grow: 1; /* Allow it to expand vertically */
    display: flex;
    flex-direction: column;
}

/* 2. Make the tab-pane fill the available height */
.tab-pane {
    height: 100%; /* Important for filling vertical space */
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Arrange content vertically */
}

    /* 3. Make the iframes fill the tab-pane */
    .tab-pane iframe {
        height: 100%; /* Fill the height of the tab-pane */
        width: 100%; /* Ensure it fills the width as well */
        border: none; /* Remove the border if you don't want it */
    }


    .card-body.bg-marketplace.d-flex {
        height: 100%; /* Make the card-body fill available height */
        flex-direction: row; /* Ensure horizontal layout */
        align-items: center; /* Vertically center content */
    }

    /* Make the text area fill remaining height, pushing image to the right */
    .card-body.bg-marketplace.d-flex > div {
        flex-grow: 1; /* Let the text area expand */
    }

    /* Ensure the image doesn't overflow and maintains aspect ratio */
    .card-body.bg-marketplace.d-flex img.img-fluid {
        max-width: 100%; /* Limit image width */
        max-height: 100%; /* Limit image height */
        object-fit: contain; /* Maintain aspect ratio, fit inside container */
    }

/* Make each tab-pane take up full available height. */
.tab-pane {
    height: 100%;
}

/* Customizing the Topbar Height */
#page-topbar {
    height: 50px; /* Or your preferred height */
    margin-bottom: 0;
}

    #page-topbar .layout-width {
        height: 100%; /* Ensure the inner container fills the header */
        vertical-align: central; /* Vertically center the content */
    }

    /* Adjust logo container if needed (example) */
    #page-topbar .navbar-brand-box {
        height: auto; /* Adjust if necessary, may need to remove height */
    }

    #page-topbar .navbar-header {
        height: 100%; /* Ensure the navbar-header fills the header */

        vertical-align: central; /* Vertically center the content */
    }

    #page-topbar .layout-width {
        height: 100%;
    }

    #page-topbar .navbar-header {
        height: 100%; /* Make the header fill the container */
        display: flex; /* Use flexbox */
        align-items: center; /* Vertically center content */
    }

#page-header-user-dropdown {
    height: 45px; /* Or your desired height */
    padding-top: 0; /* Remove default padding */
    padding-bottom: 0; /* Remove default padding */
}

    /* Vertically center the content within the button */
    #page-header-user-dropdown .d-flex.align-items-center {
        height: 100%;
        align-items: center !important; /* Override inline styles if needed */
    }

    /* Adjust image size (optional) */
    #page-header-user-dropdown .header-profile-user {
        height: 25px; /* Or your preferred image size */
        width: 25px; /* Keep it a square */
    }

    /* Adjust text spacing */
    #page-header-user-dropdown .text-start.ms-xl-2 {
        margin-left: 0.5rem !important; /* Adjust text spacing */
    }

    /* Adjust text size */
    #page-header-user-dropdown .user-name-text {
        font-size: 14px; /* Adjust the font size of the user name */
    }

    #page-header-user-dropdown .user-name-sub-text {
        font-size: 11px; /* Adjust the font size of the sub-text */
    }



/* Customize the footer height */
.footer {
    height: 45px; /* Adjust to your preferred height */
}

/* Adjust padding (optional) */
.footer {
    padding-top: 15px; /* Adjust as needed */
    padding-bottom: 15px; /* Adjust as needed */
}

.customizer-setting {
    bottom: 25px; /* Distance from the bottom */
    right: 25px; /* Distance from the right */
    top: auto; /* Reset the top property */
    left: auto; /* Reset the left property */
}


#inner-content {
    width: 99.5%; /* Take full width of its parent */
    height: 100%; /* Take full height of its parent */
    background-size: cover; /* Ensure background covers the entire area */
    
}



/*Target list items inside tabs */
.nav-pills .nav-link {
    border: 1px solid navy; /* Add a border */
    border-radius: 5px; /*Make them pill shaped*/
}

.nav-pills .nav-item {
    position: relative; /*Needed for the button*/
}


.tab-close-button {
    position: absolute; /* Position the button absolutely */
    top: 30%; /* Vertically center it */
    transform: translateY(-50%); /* Fine-tune vertical centering */
    right: 5px; /* Position it on the right edge */
    cursor: pointer; /* Change cursor to indicate it's clickable */
    color: whitesmoke; /* whitesmoke color */
    font-size: 18px; /* Adjust size as needed */
    opacity: 0.8; /* Slightly transparent by default */
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}


    .tab-close-button.inactive {
        color: darkblue;
    }

    .tab-close-button:hover {
        opacity: 1; /* Make it fully visible on hover */
        color: #f06548; /* Change color on hover */
    }


.left-flex-alignment {
    justify-content: flex-start; /* Or left, but flex-start is preferred */
    
}

.logo-left {
    margin-left: 0px !important;
}


.page-title-box {
    display: flex;
    align-items: flex-start;
}

.auth-one-bg .bg-overlay {
    opacity: 0.6; /* make overlay lighter (0¨C1) */
    background-color: #000; /* or any color you want */
}

/*Customize height of text box*/
.form-control {
    height: 30px; /* adjust to match your c1-auto-complete */
    padding: 0.25rem 0.5rem; /* optional: reduce padding too */
    font-size: 0.9rem; /* optional */
}

.nav-item {
    cursor: move;
    transition: all 0.3s ease;
}

    .nav-item.dragging {
        opacity: 0.5;
        
    }

    .nav-item.drag-over {
        border-left: 3px solid #007bff;
    }

.tab-close-button {
    cursor: pointer;
    margin-left: 5px;
}

/*iliminate blue border of inactive tab*/
/*.nav-link:not(.active) {
    border: none !important;
    outline: none !important;
}

.nav-link:focus {
    border: none !important;
    outline: none !important;
}*/



/*Size of Customizer*/

/* Default (mobile) */
/*#theme-settings-offcanvas.offcanvas-end {
    width: 100%;
}*/

/* Tablet and up */
/*@media (min-width: 768px) {
    #theme-settings-offcanvas.offcanvas-end {
        width: 90%;
    }
}*/

/* Large screens */
/*@media (min-width: 1200px) {
    #theme-settings-offcanvas.offcanvas-end {
        width: 80%;
    }
}*/


/* Make offcanvas body a vertical flex container */
/*#theme-settings-offcanvas .offcanvas-body,
#theme-settings-offcanvas .offcanvas-body > [data-simplebar],
#theme-settings-offcanvas .offcanvas-body .p-4 {
    height: 100%;
    display: flex;
    flex-direction: column;
}*/


/*custom style of detail button in order enquiry*/
/* Link-content section fills available height */
/*#content-from-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}*/

/* iframe: full width, takes all remaining height */
/*#content-details-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 1px;*/ /* optional */
/*}*/

/* Input row is auto height; iframe takes the rest */
/*#order-id-text {
    margin-bottom: 0.5rem;
}

.offcanvas {
    display: flex;
    flex-direction: column;
}

.offcanvas {
    display: flex;
    flex-direction: column;
}

.offcanvas-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
}

#content-from-link {
    height: 100%;
    display: flex;
}

#content-details-frame {
    flex: 1;
    width: 100%;
    border: 0;
}

#tabs-container {
    display: flex;
    flex-direction: column;
    height: 100vh;*/ /* or 100% if parent has height */
/*}

.card-header {
    flex: 0 0 auto;
}

.card-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#tab-content {
    height: 100%;
    overflow-y: auto;
}*/


/*==========================
  Offcanvas Size
==========================*/

#theme-settings-offcanvas.offcanvas-end {
    width: 100%;
}

@media (min-width:768px) {
    #theme-settings-offcanvas.offcanvas-end {
        width: 90%;
    }
}

@media (min-width:1200px) {
    #theme-settings-offcanvas.offcanvas-end {
        width: 80%;
    }
}

/*==========================
  Offcanvas Layout
==========================*/

#theme-settings-offcanvas {
    display: flex;
    flex-direction: column;
}

    #theme-settings-offcanvas .offcanvas-body {
        flex: 1;
        display: flex;
        overflow: hidden;
        padding: 0;
        min-height: 0;
    }

    #theme-settings-offcanvas .offcanvas-footer {
        flex-shrink: 0;
    }

/*==========================
  IFrame Section
==========================*/

#content-from-link {
    display: flex;
    flex: 1;
    min-height: 0;
}

#content-details-frame {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}



/* Velzon sidebar scrollbar */
#scrollbar .simplebar-scrollbar::before {
    background-color: rgba(180, 180, 180, 0.45);
    opacity: 1;
    border-radius: 4px;
}

#scrollbar .simplebar-scrollbar:hover::before {
    background-color: rgba(180, 180, 180, 0.7);
}

#scrollbar .simplebar-track.simplebar-vertical {
    width: 8px;
}