@import url('styles.css');
    .employee-frame-content .nav-tabs .nav-link {
        border-color: var(--sh-widget-border);
        color: var(--sh-dark-blue);
        min-width: 7.75rem;
        padding: 0.3125rem 0.5rem;
        font-weight: 600;
        font-size: 1rem;
    }
    
    .employee-frame-content .nav-tabs .nav-link:hover {
        background: var(--sh-dark-blue);
        color: var(--sh-bg-white);
    }
    
    .employee-frame-content .nav-tabs {
        --bs-nav-tabs-border-color: var(--sh-widget-border);
        --bs-nav-tabs-border-radius: 1.5rem;
        --bs-nav-tabs-link-hover-color: var(--sh-bg-white);
        --bs-nav-tabs-link-hover-bg: var(--sh-dark-blue);
        --bs-nav-tabs-link-hover-border-color: var(--sh-dark-blue) var(--sh-dark-blue) var(--sh-dark-blue);
        --bs-nav-tabs-link-active-color: var(--sh-bg-white);
        --bs-nav-tabs-link-active-bg: var(--sh-dark-blue);
        --bs-nav-tabs-link-active-border-color: var(--sh-dark-blue) var(--sh-dark-blue) var(--sh-dark-blue);
    }
    
    .employee-frame-content .nav-tabs .nav-link.active {
        color: var(--sh-bg-white);
    }
    
    .emp-banner {
        min-height: 14.5rem;
        width: 100%;
        background: var(--sh-blue-secondary);
        margin-bottom: 0.25rem;
        padding: 1rem;
    }
    .banner-seprator {
        opacity: 1;
        width: 100%;

    }
    .emp-banner-title {
        color: var(--sh-bg-white);
    }
    
    .employee-frame {

        padding: 1.5rem;
        height: auto;
        margin-bottom: 2rem;
        min-height: calc(100% - 13rem);
        border: 1px solid var(--sh-bg-white-secondary);
        background: var(--sh-bg-white);
        box-shadow: var(--sh-bg-box-shadow);
    }
    
    .employee-frame-sidebar {
        width: 25%;
        border-right: 1px solid var(--sh-widget-border);
    }
    
    .emp-banner-profile {
        color: var(--sh-bg-white);
    }
    .employee-frame-emp-img {
    max-width: 10rem;
    height: 10rem;
    width: 100%;
    margin-bottom: 1rem;
    }
    
    .employee-frame-emp-img img {
        border-radius: 100%;
        width: 100%;
        height: 100%;
        border: 1px solid var(--sh-black);
    }
    
 
    
    .employee-personal-detail label {
        
        margin-bottom: 0.25rem;
    }
    .employee-personal-detail h5, .emp-banner-profile_title,  .employee-personal-detail label, .emp-banner-profile h5 {
     color: var(--sh-bg-white);
    }    

    
    .employee-frame-content .nav-tabs {
        margin-block-end: 1rem;
    }
    
    .emp-acccordion .accordion-body {
        font-size: 0.875rem;
        padding-inline: 0.625rem;
    }
    
    .emp-acccordion .accordion-button {
        font-weight: 500;
        text-transform: uppercase;
    }
    
    .doc-card {
        border: 1px solid var(--sh-dark-blue);
        background: var(--sh-bg-white);
        border-left: 0.25rem solid var(--sh-blue);
        padding: 0.5rem;
        gap: 1rem;
    }
    
    .doc-card-icon {
        width: 1.875rem;
        height: 1.875rem;
    }
    
    .doc-card-icon_img {
        width: 100%;
        height: 100%;
    }
    
    .doc-card-content {
        width: calc(100% - 3rem);
    }
    
    .doc-card-content_title {
        margin-bottom: 0.5rem;
        color: var(--sh-dark-blue);
    }
    
    .doc-card .form-control[type=file] {
        font-size: 0.75rem;
    }
    
    .qualification-card-wrap .doc-card {
        border-left-color: var(--sh-purple);
    }
    
    .address-card-wrap .doc-card {
        border-left-color: var(--sh-light-brown);
    }
    
    .family-card-wrap .doc-card {
        border-left-color: var(--sh-purple);
    }