/* Custom Ellucian Navbar */
.elcn-navbar {
  background-color: #7100EB;
  height: 60px;
  border-radius: 0px;
  box-shadow: none;
  border: 0;
  border-bottom: 4px solid #75C5FF;
  margin-bottom: 0px !important; }
  .elcn-navbar > div {
    height: 60px; }

.advise-navbar-logo {
    background-image: url("../Content/Images/ellucian_logo.svg");
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: 30px;
    width: 300px;
    float: left;
    height: 33px;
    margin-top: 13px;}

.elcn-user-nav {
  float: right;
  padding-right: 10px;
  color: #fff;
  font-size: 0.9em;
  line-height: 40px; }

.elcn-assistance-btn {
  float: right;
  color: #fff;
  line-height: 55px;
  height: 55px;
  font-size: 14px;
  margin-right: 40px;
  display: inline-block;
  width: 140px; }

    .elcn-assistance-btn > a {
        height: 100%;
        display: block;
        text-decoration: none;
        color: white;
        background: #7100EB;
        border-left-color: #4243A0;
        border-left-width: 1px;
        border-left-style: solid;
        background-image: url("../Content/Images/Assistance.png");
        background-repeat: no-repeat;
        background-position-x: 20px;
  background-position-y: 13px; }

.elcn-assistance-btn > a:hover {
  background: #4243A0;
  cursor: pointer;
  background-image: url("../Content/Images/Assistance.png");
  background-repeat: no-repeat;
  background-position-x: 20px;
  background-position-y: 13px; }

.elcn-assistance-btn span {
  margin-left: 60px; }

/*Mobile Header bar*/
.mobile-header-bar {
  margin-bottom: 0px;
  background-color: #7100EB;
  height: 60px;
  border: 0;
  border-bottom: 4px solid #75C5FF; }

.mobile-header {
  font-size: 24px;
  font-weight: 400;
  font-family: Nunito, "Open Sans", Helvetica, sans-serif;
  color: #ffffff;
  text-align: center;
  line-height: 2.5;
  height: 100%; }

/* User Info */
.elcn-username {
  padding: 8px 20px 8px 20px; }

.elcn-navbar-usersettings {
    height: 100%;
    width: 60px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../Content/Images/user_anticon.png") center center no-repeat;
    border-left-color: #4243A0;
    border-left-width: 1px;
    border-left-style: solid;
    background-color: #7100EB;
}

.elcn-navbar-usersettings:hover {
  background-color: #4243A0;
  cursor: pointer; }

.elcn-settings-dropdown {
  margin-top: -5px;
  margin-right: 5px;
  padding-bottom: 15px; }

/*.elcn-settings-dropdown > li > a,
.elcn-settings-dropdown > li > a:hover,
.elcn-settings-dropdown > li > a:focus,
.elcn-settings-dropdown > li > a:active,
.elcn-settings-dropdown > li > a:visited {
    color: $warm-grey;
    text-decoration: underline;
    background-color: $white-four;
    font-size: 12px;
    font-weight: normal;
}*/
#elcn-settings > div {
  width: 100%;
  height: 100%; }

#elcn-settings-link {
  display: block;
  width: 100%;
  height: 100%;
  content: " "; }

.elcn-dropdown-option {
  border: 1px solid transparent;
  /* Transparent border in non-hover so the contents don't jump around on hover when border is added. */ }

.elcn-dropdown-option:hover {
  background-color: #EFF7FF !important;
  border: 1px solid #75C5FF !important; }

.elcn-dropdown-toggle:hover {
  background-color: #F0F6F5; }

/* Fake border trick to yield a tooltip triangle. Blech. */
.elcn-settings-dropdown:after, .elcn-settings-dropdown:before {
  bottom: 100%;
  left: 85%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none; }

.elcn-settings-dropdown:after {
  border-color: transparent;
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px; }

.elcn-settings-dropdown:before {
  border-color: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.15);
  border-width: 11px;
  margin-left: -11px; }

@media (max-width: 767px) {
  .elcn-assistance-btn {
    margin-right: 0px;
    height: 100%;
    width: 55px;
    margin-right: 55px; }
  .elcn-assistance-btn > a,
  .elcn-assistance-btn > a:hover {
    background-position-x: 12px;
    background-position-y: 12px; }
  .elcn-username {
    padding: 5px 20px 0px 20px; } }