@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";

:root{
    --background-color: #1E1E1E;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
   /* color: #999;*/
}






a{
    color:#64b5f6;
    text-decoration:  underline;
}


a:hover{
    color: #38BDF9 ;

}

.row{
    margin-right: 5px;
    margin-left:5px;
}
body{
    font-family: 'Poppins', sans-serif;
    padding-left:100px;
    padding-right:100px;
    background: #FFF;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}



.flex-fill {
    flex: 1;
}


.content{
    padding: 30px;
    background-color: #ffffff;
    flex: 1;
}



/* Flex container to ensure footer sticks to the bottom */
.flex-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

iframe{
    display: block;
    margin: 0 auto;
}

.full-width-container {
    width: calc(100% + 200px); /* Adjust width to account for the body padding */
    margin-left: -100px; /* Apply negative margins to extend to the edges */
    margin-right: -100px; /* Apply negative margins to extend to the edges */
}

@media (max-width: 1255px) {
    body {
      padding-left:0;
      padding-right:0;
    }
    /*.cover-heading{
      font-size:4vw;
    }*/
    .navbar-brand{
      font-size:1vw;
    }
    .carousel-inner, .carousel-item{
        height:300px !important;
    }
    .menu-button{
        display: block;
        width: 18px;
        height: 1px;
        border-radius: 1px;

    }

    .full-width-container {
        width: 100%; /* No need to adjust width */
        margin-left: 0; /* Remove negative margins */
        margin-right: 0; /* Remove negative margins */
    }


}
@media(max-width: 789px){
     #project_table tr td {
      padding: 20px 40px;
      display: block;
    }

    .full-width-container {
        width: 100%; /* No need to adjust width */
        margin-left: 0; /* Remove negative margins */
        margin-right: 0; /* Remove negative margins */
    }
}


#ucsf {
	background: #000000;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

#ucsf #topbar-wrapper {
	font-family: "Helvetica", sans-serif;
	font-size: 16px;
}

#ucsf #topbar {
	max-width: 940px;
	margin: 0 auto;
}

#ucsf #topbar ul {
	line-height: 1em;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #000033;
    text-align: center;
}

#ucsf #topbar ul li {
	display: inline;
  	font-size: .75em;
  	border-left: 1px solid #FFF;
}

#topbar-wrapper #topbar ul li:first-child {
  	margin-right: 0;
	border-left: none;
}

#topbar-wrapper #topbar ul, #topbar-wrapper #topbar ul li, #topbar-wrapper #topbar ul li a {
  line-height: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

#topbar-wrapper #topbar ul li:first-child a {
	background: transparent url(http://pharmchem.ucsf.edu/sites/all/themes/pharmacyoa/images/logo-ucsf.png) no-repeat left 3px;
	display: inline-block;
	margin-left: 0;
	min-height: 28px;
	padding-left: 5.5em;
}

#topbar-wrapper #topbar ul li a {
  color: #FFF;
  margin: 0 .5em;
  padding: 9px 0 0 .5em;
  white-space: nowrap;
}

/*carousel*/



.carousel-caption {
   background:rgba(0,0,0,0.5);
   background:transparent;
   padding:1em;
   position: relative;
   /*bottom:auto;*/

   bottom:-10%;
   color:#669999;
    margin:0;
   left:auto;
   right:auto;

    }
.carousel-inner, .carousel-item{
  height:650px;
}

.carousel-item > img, video {
    top:10%;
    position:relative;
    margin:auto;
    max-height:500px;
    max-width: 70%;

}

.navbar-nav .nav-item.dropdown .nav-link {
    white-space: nowrap;  /* Prevent text wrapping */
    display: flex;        /* Ensure the text and icon are on the same line */
    align-items: center;  /* Vertically align the text and icon */
}

/* Force dropdowns to always show in mobile view */
@media (max-width: 1254px) {
    .navbar-nav .dropdown-menu {
        display: block;
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: none;
        box-shadow: none;
    }
    /* Remove the dropdown caret arrows in mobile view */
    .navbar-nav .dropdown-toggle::after{
        display: none;
    }

    .dropdown-item {
        color: #006666 !important;
    }

    /* Remove background change on hover for dropdown items */
    /*
    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-menu:hover,
    .navbar-nav .nav-link:hover {
        background-color: transparent !important;
        color: inherit !important;
    }
    */

    /* Remove background color for dropdown menu */
    .navbar-nav .dropdown-menu {
        background-color: transparent !important;
    }

}

/* Ensure dropdowns behave normally in desktop view */
@media (min-width: 1255px) {
    .navbar-nav .dropdown-menu {
        display: none;

    }
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown:hover > .dropdown-menu{
        display: block;
        background: transparent;

    }

    /* Base styles for nav-link */
    .nav-link {
        border-radius: 8px;
        transition: background-color 0.3s ease; /* Smooth transition for background color */
        padding: 12px;
    }

    /* Hover state for nav-link */
    /*
    .nav-link:hover {
        background-color: #EEEEEE;
    }

    .dropdown-menu a:hover{
        color: #ff9900;
        background: #EEEEEE;
        border-radius: 8px;
    }
    */

    /*@media (prefers-color-scheme: dark) {*/
        .dropdown-menu a:hover {
            background: #333333;
        }
        .nav-link:hover {
            background-color: #333333;
        }

        .dropdown-menu {
            background: var(--background-color);
        /*}*/
    }
}

/*.carousel-control-prev .carousel-control-next {
  top:300px;
}
*/
.carousel-inner{
    background: #000033;
   /* height:650px;*/
}

/*navbar menus*/
@media (min-width: 1275px){
    .navbar-expand-custom {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;

    }
    .navbar-expand-custom .navbar-nav .nav-link{
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
    .navbar-expand-custom .dropdown{
        width:auto !important;
    }


}

.footer-content{
    margin-bottom:0;
}

.cover-heading{
    padding-top:10px;
    color:#ff9900 !important;
    margin-bottom:0;
    font-size:2vw;
}
.body-home{
    background: #052049 !important;
}





/* Base styles for dropdown menu */
.dropdown-menu {
    transform: translateY(0); /* No offset by default */
    transition: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    border-radius: 5px; /* Rounded corners */
    position: absolute; /* Ensure the dropdown doesn't affect layout on large screens */
    z-index: 1000; /* Keep it above other elements */
    top: 100%; /* Position below the parent */
}



/* Show dropdown immediately on small screens when the navbar is expanded */
@media (max-width: 1254px) {
    .navbar-collapse.show .dropdown-menu {
        visibility: visible !important; /* Ensure it’s visible */
        opacity: 1 !important; /* Ensure full opacity */
        position: relative; /* Change position to relative for mobile view */
        transform: none; /* Reset any transform */
        display: block !important; /* Ensure the dropdown is displayed */
        box-shadow: none; /* Optional: remove shadow for a simpler look */
        top: auto; /* Remove top positioning */
        left: auto; /* Remove left positioning */
    }

    /* Ensure dropdown items are properly displayed */
    .navbar-collapse.show .dropdown-menu a {
        display: block;
        width: 100%; /* Ensure full-width for easier tapping */
    }
}

/* Enable transitions and animations on larger screens and non-collapsed navbar */
@media (min-width: 1254px) {
    .dropdown-menu {
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px); /* Slight downward offset for animation */
        transition: opacity 0.3s ease, transform 0.3s ease; /* Enable transitions on larger screens */
    }

    /* Ensure dropdown appears smoothly on hover */
    .dropdown:hover > .dropdown-menu {
        visibility: visible; /* Make visible */
        opacity: 1; /* Fully opaque */
        transform: translateY(0); /* Move into place */
        transition-delay: 1s; /* No delay on hover */
        background: #FFFFFF;
    }

    /*@media (prefers-color-scheme: dark) {*/
       .dropdown:hover > .dropdown-menu {
            background: var(--background-color) !important;
        }
    /*}*/
}

/* Smooth hover effect for links */
.dropdown-menu a:hover {
    color: #ff9900;
    transition: background 0.3s ease, color 0.3s ease !important;
}

.green-text-format{
    color: #006666;
    font-size: 1.5rem;
}
.blue-text-format{
    color: #052049;
    font-size: 2rem;
}

.menu-brand{
    color:#ff9900 !important;
}

.peopleNavbar {
    background:#226666;
}

.peopleNavbar ul {
text-align: center;
}

.peopleNavbar li {
display: inline-block;
}


/*table format*/

table{
    margin-left:auto;
    margin-right:auto;

}

.table-format{
    border-collapse: collapse;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;

}

.table-format td, .table-format th {
    border: 1px solid #ddd;
    padding: 8px;
}

.table-format tr:nth-child(even){
    background-color: #f2f2f2;
}

.table-format tr:hover {
    background-color: #ddd;
}

/*@media (prefers-color-scheme: dark) {*/
        .table-format td, .table-format th {
            border: 1px solid #666666;
            padding: 8px;
        }

        .table-format tr:nth-child(even){
            background-color: #666666;
        }

        .table-format tr:hover {
            background-color: #666666;
        }


        .table th,
        .table td {
          padding: 0.75rem;
          vertical-align: top;
          border-top: 1px solid #666666;
        }

        .table thead th {
          vertical-align: bottom;
          border-bottom: 2px solid #666666;
        }

        .table tbody + tbody {
          border-top: 2px solid #666666;
        }

        .table .table {
          background-color: #fff;
        }

        .table-sm th,
        .table-sm td {
          padding: 0.3rem;
        }

        .table-bordered {
          border: 1px solid #666666;
        }

        .table-bordered th,
        .table-bordered td {
          border: 1px solid #666666;
        }
/*}*/

.table-format th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    style:bold;
    color:white;
    background-color: #052049;
}

.table-format td {
    white-space: normal;
    word-break: normal;

}

#takeaways-nav{
    position: relative;
}


.footer{
    background:transparent;
    position : relative;
    border-top-style: dashed;
    border-top-width: 2px;
    border-top-color: #EEEEEE;
}

/*@media (prefers-color-scheme: dark) {*/
   .footer {
        border-top-color: #666666;
    }
/*}*/

.col-item{

    margin-left: 20%;
}

.affix {
      top: 20px;
      z-index: 9999 !important;
  }

.sidebar {
  position: fixed;
  top: 100px;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background:#000033;
  border-right: 1px solid #eee;
  height: 600px;
}

.takeaway-content{
    padding:5px;

}
.btn{
    white-space: normal;
    word-break: normal;
    text-decoration: none;
}
.btn-link{
    width:100%;
    display:block;
}
.btn-info{
    color:#FFF;
    background: #052049;

}
#background-img{
    background: url(https://neuroresidency.ucsf.edu/sites/neuroresidency.ucsf.edu/files/styles/flexslider_full/public/field/image/slider/Sandler%20night.jpg?itok=kSp3dYA9) center center;
     height: 100%;
    width: 100%;
    opacity:.50;
    filter:alpha(opacity=50);
}

#text{
    position: absolute;

}

/* photo customizations */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

}

.photo-format {
    max-height:300px;
    padding: 4px;
}

#data{
  margin: 0 auto;
}
.img-container img{
    max-width: 100%;
    max-height: 100%;
}
.app-description-display{
    height: 220px;
}
.app-display{
    padding: 20px;
}
.app-img{
    display: block;
    margin: auto;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    background: #052049;
    /*max-width: 140px;*/
    /*max-height: 140px;*/
    text-align: center;
}


/*@media (prefers-color-scheme: dark) {*/
    .content{
        background-color: var(--background-color);
    }

    p {
        color: #FFF;
    }

    #navbarCollapse > ul > li > a{
        color: #999999;
    }
    #navbarCollapse > ul > li.nav-item.active > a{
        color: white;
    }






    body {
        background-color: var(--background-color);
        background: var(--background-color);
        color: white;
    }

    header {
        background: var(--background-color);
    }

    nav {
        background: var(--background-color);
    }

    body {
        background: var(--background-color);
    }

    .content {
        .content {
            background-color: var(--background-color);
        }

        .dropdown-menu {
            background: var(--background-color);
        }

        .dropdown-menu a:hover {
            background: #333333;
        }

        .dropdown-menu a:hover {
            color: #ff9900;
            background: #333333;
        }

        .blue-text-format{
            color: #0A4E87;
            font-size: 2rem;
        }
    }
/*}*/