@keyframes flash {
  0% { background-color: transparent; }
  50% { background-color: white; }
  100% { background-color: transparent; }
}

/* global system warning css*/
.system-warning {
  background-color: var(--warning-color);
  color: white;
  padding: 0.7em 5.5em;
  position: fixed;
  z-index: 99;
  width: 100vw;
  height: 50px;
  top: 0px;
  left: 0px;
  font-size: 90%;
  font-weight: normal;
  transition: top 0.7s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.system-warning.show { top: 55px; }
.system-warning.dismissed { top: 0px !important; }
.system-warning button {
  background-color: transparent;
  border: 2px solid white;
  outline: none;
  padding: 0.4em 1em;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  margin: 0 0 0 1.5em;
  animation-duration: 500ms;
  animation-iteration-count: 3;
  transition: 400ms all;
}
.system-warning button:hover {
  background-color: white;
  color: var(--piano-color);
  cursor: pointer;
}

/* CUSTOM system warning css. Styles that override the global "blue" system warning banner*/
.system-warning.assignment-banner{
  background-color: var(--drum-color);
  padding-left: 5.5em;
  padding-right: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.system-warning.assignment-banner #content-left,
.system-warning.student-assignment-banner #content-left,
.system-warning.attempt-banner #content-left{
  width: 75%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.system-warning.assignment-banner #content-right,
.system-warning.student-assignment-banner #content-right,
.system-warning.attempt-banner #content-right{
  display: none;
}

.system-warning.assignment-banner #content-right.show,
.system-warning.student-assignment-banner #content-right.show,
.system-warning.attempt-banner #content-right.show{
  display: block;
}

.system-warning.assignment-banner .divider,
.system-warning.student-assignment-banner .divider,
.system-warning.attempt-banner .divider{
  height: 30px;
  width: 1px;
  margin: 0 10px;
  background-color: white;
}

.system-warning.assignment-banner button,
.system-warning.student-assignment-banner button
.system-warning.attempt-banner button{
  max-width: 180px;
  margin: unset;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 5px;
  height: 30px;
}

.system-warning.assignment-banner #content-left .divider{display: none;}
.system-warning.assignment-banner #content-left .divider.show{display: block;}
.system-warning.student-assignment-banner #content-left .divider{display: none;}
.system-warning.student-assignment-banner #content-left .divider.show{display: block;}

.system-warning.assignment-banner button:hover {
  background-color: white;
  color: var(--drum-color);
}

.system-warning.student-assignment-banner {
  background-color: var(--drum-color);
}

.system-warning.student-assignment-banner button:hover {
  background-color: white;
  color: var(--drum-color);
}


.system-warning.attempt-banner{
  background-color: var(--drum-color);
  padding-left: 5.5em;
  padding-right: 1em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.system-warning.attempt-banner #content-left{
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.system-warning.attempt-banner button{
  max-width: 180px;
  margin: unset;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 5px;
}

.system-warning.attempt-banner button:hover {
  background-color: white;
  color: var(--drum-color);
}

.system-warning.attempt-banner #content-right{
  display: block;
}

.system-warning.course-collection-banner{
  height: 45px;
  padding: 5px;
  background: transparent;
  /*background: linear-gradient(90deg, rgba(213, 51, 105, 0.85) 0%, rgba(218, 174, 81, 0.85) 100%);*/
}
.system-warning.course-collection-banner.show{
  top: 0;
}

.system-warning .course-nav-wrapper{
  padding: 10px;
  max-width: 370px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  margin: 0 auto;
  background-color: rgba(255,255,255,0.85);
  color: var(--text-primary-color);
  border-radius: 25px;
}

.system-warning .course-nav-wrapper .action-btn.nav-button{
  height: 30px;
  margin-left: 13px;
  width: 100px;
}

#edu-signup{
  background-color: #D96877;
}

#edu-signup:hover{
  background-color: #FFF;
  color: #D96877;
  border-color: #D96877;
}

.responsive{
  display: none;
}

.show{
  display: block;
}

@media only screen and (max-width: 600px){
  .edu-content #attempt-banner-text{
    font-weight: 600;
  }

  .edu-content .system-warning.student-assignment-banner{
    padding-left: 3.5em;
  }

  .edu-content .system-warning.attempt-banner,
  .edu-content .system-warning.assignment-banner{
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: unset;
  }

  .edu-content .system-warning #content-left div{
    margin: 0 auto;
  }
  .edu-content .system-warning.attempt-banner #content-left,
  .edu-content .system-warning.assignment-banner #content-left{
    margin-bottom: 15px;
    width: 100%;
    height: 100%;
  }

  .edu-content .system-warning.attempt-banner #content-right,
  .edu-content .system-warning.assignment-banner #content-right{
    display: flex;
    flex-direction: row;
    height: 100%;
  }

  .edu-content .divider, #banner-submit-button, .banner-course-link, #assignment-settings-button{
    display: none;
  }

  .edu-content #banner-submit-button.responsive,
  .edu-content .banner-course-link.responsive,
  .edu-content #assignment-settings-button.responsive{
    display: block;
  }

  .edu-content .responsive{
    display: block;
  }
}