/* stylings for website sidebar - starts */

#webNavBar {
  z-index:100000;
}

#sidebar-header {
}

#websiteSidebar p {
  padding-left:27px;
  color:grey;
  font-size:1.2rem;
  font-family:"PT Sans", Helvetica, Arial, sans-serif;
  font-size:23px;
  line-height:34px;
  font-weight:300;
  color:#909090;
}
#websiteSidebar {
  z-index:10000;
}
#websiteSidebar .hasSubMenu li {
  padding-left:45px;
  font-weight:normal;
}

#websiteSidebar h1 {
  padding-left: 27px;
  /*font-size:2.0rem;*/
  font-size:59px;
  font-size:46px;
  font-weight:700;
  font-family:"PT Sans", Helvetica, Arial, sans-serif;
  line-height:73px;
}

#websiteSidebar .sidebar-links {
  line-height: 2rem;
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 27px;
  background-position-y:center;
  background-size:16px 16px;
  font-family:"PT Sans", Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:18px;
  line-height:32px;
}
#websiteSidebar .sidebar-links-top-icon {
  background-repeat: no-repeat;
  background-position: top;
  padding-top: 20px;
  background-position-y:top;
  text-align:center;
}

#websiteSidebar .dashboard-link:hover {
  /*filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);*/
}

/* Make the whole sidebar a flex container */
#websiteSidebar {
    display: flex !important;
    flex-direction: column;
    height: 100vh; /* full height */
    min-width: 325px;
    max-width: 325px;
    background: #212121 !important;
    box-shadow: 3px 3px #f0f0f0;
    /*position: fixed;*/ /* keep it fixed */
}

/* When sidebar is open */
#websiteSidebar.show {
    display: flex !important;         /* Flex layout only when open */
    flex-direction: column;
    height: 100vh;
}

/* Content wrapper takes up remaining space */
#websiteSidebar .sidebar-content {
    /*flex: 1;*/ /* pushes footer to bottom */
    /*overflow-y: auto;*/ /* if menu is long, scroll */
    flex: 1 1 auto; 
}

#websiteSidebar .sidebar-footer {
    flex-shrink: 0;
}

#websiteSidebar.active {
    margin-left: -250px;
}

#websiteSidebar a[data-toggle="collapse"], #websiteSidebar a {
    position: relative;
    font-weight:normal;
}

#websiteSidebar a[data-toggle="collapse"]:hover, #websiteSidebar ul li a:hover {
  text-decoration:underline;
}

#websiteSidebar a {
  /*color: grey;*/
  color:#fff;
  opacity:1;
  line-height:2.75 rem !important;
  display:block;
  font-size: 18px;
  text-decoration:none;
}

#websiteSidebar li {
    /*border-bottom: 1px solid #212121;*/
}

#websiteSidebar li:focus {
    /*background-color: #212121;*/
    border:none !important;
}
#websiteSidebar a:focus {
    /*background-color: #212121;*/
    border:none !important;
}

#websiteSidebar li:hover {
    /*background-color: #212121;*/
    cursor:pointer;
}

/* #login-show-hide .show-link { */
 .show-link {
   /* color: grey;*/
    background-image: url("../images/icons/eye-open.png");
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 22px;
    background-position-y: center;
    background-size: 16px 16px;
    float: right;
}
 .hide-link {
   /* color: grey;*/
    background-image: url("../images/icons/eye-hide.png");
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 22px;
    background-position-y: center;
    background-size: 16px 16px;
    float: right;
}


/* ===== FOOTER ===== */
.sidebar-footer {
  /*margin-top: auto;
  text-align: left;*/
  padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Social icons */
.footer-social {
  margin-bottom: 6px;
}

.footer-icon {
  display: inline-block !important;
  font-size: 1rem !important;
  margin-right: 10px !important;
  color: #bbb !important;
  transition: color 0.2s ease !important;
}

.footer-icon:hover {
  color: #fff;
}

/* Policy links */
.footer-links-wrap {
  margin-bottom: 8px;
}

.footer-link {
    display: inline-block !important;
    margin: 0 5px !important;
    font-size: 0.75rem !important;
    color: #bbb !important;
    text-decoration: none !important;
}

.footer-link:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

.footer-sep {
  display: inline-block;
  color: #555;
  margin: 0 3px;
  font-size: 0.75rem;
}

/* Copyright */
.footer-copy {
  font-size: 0.7rem;
  color: #999;
  line-height: 1.4;
}


/* Make active menu bold */
#websiteSidebar .sidebar-links.active,
#websiteSidebar .sidebar-links.router-link-exact-active {
  font-weight: 700 !important;
  color: #fff !important;
}

/* For desktop: always open, flex layout */
@media (max-width: 767px) {
    #websiteSidebar {
        display: none !important; /* important: collapse anim works */
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* no fixed height */
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: #000 !important;
        box-shadow: none !important;
    }

    #websiteSidebar .sidebar-content {
      padding: 15px; /* compact padding for mobile */
    }

    #websiteSidebar .sidebar-links {
      padding-left: 15px; /* tighter left alignment */
      font-size: 16px; /* smaller text for mobile */
    }

    #websiteSidebar .sidebar-footer {
      padding: 15px;
      text-align: left;
    }

    /* Reset flex in mobile so collapse anim works */
    #websiteSidebar .sidebar-content,
    #websiteSidebar .sidebar-footer {
        flex: none !important;
    }


}