/* Sidebar style starts */

.sidebar {
    width: 76px;
    height: 100vh;
    background: var(--bg-cool-gray-10);
    position: absolute; 
    left: 0;
    top: 0;
    z-index: 200;
    transition: width 0.3s ease, left 0.3s ease, box-shadow 0.3s ease;
    overflow-y: auto;
    padding: 8px;
    padding-left: 0;
    overflow-x: hidden;
}

.sidebar.expanded {
    flex-shrink: 0;
    width: 300px; 
    transition: width 0.3s ease, box-shadow 0.3s ease;
    left: 0;
    -webkit-box-shadow: 10px 1px 54px -8px rgba(0,0,0,0.11);
    -moz-box-shadow: 10px 1px 54px -8px rgba(0,0,0,0.11);
    box-shadow: 10px 1px 54px -8px rgba(0,0,0,0.11);
}

.sidebar.expanded.pinned{
    box-shadow: none;
}

.sidebar-header {
    display: flex;
    justify-content: start;
    align-items: center;
    margin-top: 4px;
}

.sidebar.expanded .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.brand-img {
    width: 36px;
    margin-left: 4px;
}

.brand-img img {
    width: 100%;
}

.nav-item {
    margin-bottom: 8px;
}

.nav-link i {
    font-size: var(--font-20);
    margin-left: 3px;
    color: var(--text-gray-1);
}

.nav-section{
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background-color: var(--bg-gray-9);
    padding-left: 12px;
    padding-right: 6px !important;
    height: calc(100vh - 76px);
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding-top: 12px;
}

.sidebar.expanded .nav-section{
    padding-right: 12px;
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 14px 4px 10px;
    color: var(--text-gray-10);
    border-radius: 4px;
    overflow: hidden;
    cursor : pointer;

}

.sidebar.expanded .nav-link {
    justify-content: start;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    border-radius: var(--b-r-24);
    color: var(--text-gray-1);
}

.nav-link[aria-expanded="true"] #chev-icon {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.sidebar .nav-link:hover {
    background: var(--bg-gray-7);
}

.sidebar .nav-link.active {
    background: var(--bg-primary-7);
    color: var(--text-gray-1);
    width: 100%;
}

.sidebar .nav-link.active:hover {
    background: var(--bg-primary-6);
    color: var(--text-white);
    cursor: default;
}

.link-text {
    display: none;
    text-wrap: nowrap;
    transition: none;
}

.sidebar.expanded .nav-link.drop-down.active {
    background: var(--bg-gray-8);
    color: var(--text-gray-1);
}



#chev-icon {
    display: none;
}

.sidebar.expanded #chev-icon {
    display: inline;
    font-size: var(--font-14);
}

#pin-btn, .brand-text {
    display: none;
}

.sidebar.expanded #pin-btn, .sidebar.expanded .brand-text {
    display: flex;
    color: var(--text-gray-1);
}

.sidebar.expanded .link-text {
    display: inline;
    margin-left: 8px;
    font-size: var(--font-14);
    text-wrap: nowrap;
}


.sidebar .dropdown-item {
    font-size: var(--font-14);
    padding: 8px 16px;
    margin-bottom: 4px;
    border-radius: 4px;
    width: 100%;
    color: var(--text-gray-1);
    border-radius: var(--b-r-24);
}

.sidebar.expanded .nav-link.active, .sidebar .dropdown-item.active, .sidebar .dropdown-item:active {
    background: var(--bg-primary-7);
    color: var(--text-white);
    border-radius: var(--b-r-24);
}

.sidebar .dropdown-item.active:focus{
	background: var(--bg-primary-7);
	    color: var(--text-white);
	    border-radius: var(--b-r-24);
}


.sidebar .dropdown-item.active:hover{
    background: var(--bg-primary-7);
    cursor: default;
}

.sidebar .dropdown-item:hover, .sidebar .dropdown-item:focus  {
    background: var(--bg-gray-8);
    color: var(--text-white);
}

.sidebar .submenu {
    border-left: 1px dashed var(--gray-500);
    margin-left: 21px;
    padding: 8px 0px 8px 8px;
    position: relative;
    margin-top: 4px;
}

.sidebar .submenu::before {
  content: "";
  position: absolute;
  left: -4px;  
  top: 0;
  width: 6px;
  height: 6px;
  background: var(--gray-500);
  border-radius: 50%; 
}

/* Ending point (bottom) */
.sidebar .submenu::after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 6px;
  height: 6px;
  background: var(--gray-500);
  border-radius: 50%;
}

/* Instantly hide dropdowns when sidebar is not expanded */
.sidebar:not(.expanded) .collapse, .sidebar:not(.expanded) .collapsing {
    transition: none !important;
    height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
}

/* Sidebar style ends */


/* Header styles starts */

.header{
    height : 60px;
    background: var(--bg-cool-gray-10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}


.custom-drop-container{
    background: var(--bg-neutral-4);
}

.custom-drop-container{
    position: relative;
    display: flex;
    align-items: center;
}

.custom-drop-container .institution-icon{
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-14);
}


.custom-drop-container .form-select{
    padding: 8px 32px 8px 40px !important;
    border: none;
    background-color: var(--bg-gray-8) !important;
    border-radius: var(--b-r-24) !important;
    color: var(--text-gray-1);
}

.dp-container{
    width: 28px;
    height: 28px;
}

.profile-card{
    padding : 6px;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
}

.profile-card:hover{
    background-color: var(--bg-gray-8);
}

.profile-menu {
    position: absolute;
    top: 100%; /* Position it below the profile-card */
    right: 0;
    background-color: var(--bg-white);
    padding: 12px;
    border-radius: 8px;
    color: var(--text-gray-10);
    min-width: 300px;
    z-index: 100;
    -webkit-box-shadow: 3px 11px 40px -8px rgba(0,0,0,0.35);
    -moz-box-shadow: 3px 11px 40px -8px rgba(0,0,0,0.35);
    box-shadow: 3px 11px 40px -8px rgba(0,0,0,0.35);

}

.menu-item {
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;

}
.menu-item:hover {
    background-color: var(--text-gray-3);
}

.menu-item.logout {
    color: var(--red-500) !important;
    background-color: var(--red-50);


}
.menu-item.logout:hover {
    background-color: var(--red-100);

}


/* Header style ends */


/* Main content container starts */

.content-container {
    min-width: 0;
    flex: 1;
    height: 100%;
    margin-left: 76px;
    transition: all 0.1s ease;
}

.content-container.expanded {
    margin-left: 0px;
}

.content-container.expanded.unpinned {
    margin-left: 76px;
}

.main-wrapper{
    background-color: var(--bg-white);
    height: calc(100vh - 76px);
    margin: 12px;
    display: flex;
    flex-direction: column;
    border-radius: var(--b-r-12);
    overflow: hidden;
    margin-top: 0;
    margin-left : 4px;
}

/* Main content container ends */
.scrollable-height{
    overflow-y: auto;
    flex: 1 1 auto;
} 

.level-2-menu{
	    padding: 8px 12px !important;
}

.nav-item a:focus-visible {
    border-color: var(--green-500);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(5, 122, 85, 0.9);
}

a:focus-visible {
    border-color: var(--green-400);
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(5, 122, 85, 0.6);
}

.search-focus[aria-selected="true"] {
    border-color: var(--green-400);
    outline: 0;
    box-shadow: 0 0 0 0.15rem var(--green-500);
}

.sidebar ::-webkit-scrollbar-thumb {
    background-color: var(--bg-gray-7) !important;
    opacity: 0.5;
    border-radius: 10px !important;
    border: transparent !important;
}

.search-focus[aria-selected="true"] {
    border-color: var(--green-500);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(5, 122, 85, 0.6);
    background-color: var(--bg-gray-8);
}


 /* Slide-in from right */

    .modal.right .modal-dialog {
      margin: 0 0 0 auto;
      height: 100%;
      transition: transform 0.2s ease-out;
      transform: translateX(100%);
    }

    .modal.left .modal-dialog {
      margin: 0 0 auto;
      height: 100%;
      transition: transform 0.2s ease-out;
      transform: translateX(-100%);
    }

    .modal.right.show .modal-dialog {
      transform: translateX(0);
    }

    .modal.left.show .modal-dialog {
      transform: translateX(0);
    }

    .modal.right .modal-content, .modal.left .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0;
    }