/* Notification Bar styling */

/* 354 or less */
@media screen and (max-width: 354px) {
  .notification-bar {
    margin-top: 60px !important;
    padding-left: 5px !important;
  }
  .notification-bar .notification-icon,
  .notification-bar .notification-text {
    padding-left: 5px !important;
  }

  .notification-bar .notification-text {
    margin-right: 1rem !important;
  }

  .notification-bar .notification-close-button {
    padding-right: 15px;
    top: 76px !important;
  }
}

@media only screen and (min-width: 355px) and (max-width: 869px) {
  .notification-bar {
    margin-top: 60px !important;
    padding-left: 5px !important;
  }
  .notification-bar .notification-icon,
  .notification-bar .notification-text {
    padding-left: 5px !important;
  }

  .notification-bar .notification-text {
    margin-right: 1rem !important;
  }

  .notification-bar .notification-close-button {
    padding-right: 15px;
    top: 75px !important;
  }
}

@media only screen and (min-width: 870px) and (max-width: 1039px) {
  .notification-bar {
    padding-left: 5px !important;
  }

  .notification-bar .notification-close-button {
    padding-right: 15px;
  }

  .notification-bar .notification-text {
    margin-right: 1rem !important;
  }
}


/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 1149px) {
  .notification-bar {
    width: 100%;
    margin: auto;
    padding-top: 13px;
    padding-right: 13px;
    padding-bottom: 13px;
    padding-left: 5px !important;
  }

  .notification-bar .notification-icon {
    float: left;
  }

  .notification-bar .notification-icon .icon {
    margin-top: 3px;
    padding-right: 5px;
  }

  .notification-bar .notification-text {
    margin-right: 1rem !important;
  }

  .notification-bar .notification-icon .text div {
    padding-right: 4px;
  }

  .notification-bar .notification-close-button {
    float: right;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 1150px) {
  .notification-bar {
    height: 60px;
    width: 100%;
    margin: auto;
    padding: 13px;
  }

  .notification-bar .notification-icon {
    float: left;
  }

  .notification-bar .notification-icon div {
    float: left;
  }

  .notification-bar .notification-icon .icon {
    margin-top: 3px;
    padding-right: 5px;
  }

  .notification-bar .notification-icon .text {
    padding-right: 4px;
  }

  .notification-bar .notification-text {
    margin-right: 1rem !important;
  }

  .notification-bar .notification-close-button {
    float: right;
    padding-right: 15px;
  }
}

.notification-bar {
  font-family: "Roboto Slab", Georgia, Times, "Times New Roman", serif;
  font-weight: 400;
  width: 100%;
  margin: auto;
  display: none;
  height: auto;
  overflow: auto;
  padding-left: 5%;
}

.notification-bar .notification-icon {
  height: 19px;
}

.notification-bar .notification-close-button {
  position: absolute;
  right: 0px;
  cursor: pointer;
  top: 16px;
  width: 35px;
  padding-left: 10px;
}

.notification-bar .material-icons {
  font-size: 20px;
}

.notification-standard {
  background-color: #002856;
  color: #ffffff;
}

.notification-standard a,
.notification-standard a:link,
.notification-standard a:visited,
.notification-standard a:active,
.notification-standard a:hover {
  color: #ffffff;
}

.notification-alert {
  background-color: #8A4DAA;
  color: #ffffff;
}

.notification-alert a,
.notification-alert a:link,
.notification-alert a:visited,
.notification-alert a:active,
.notification-alert a:hover {
  color: #ffffff;
}

/* End of Notification Bar styling */