.assignment-container {
  margin-top: 20px;
  margin-bottom: 20px;
}
div.assignment-content {
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 0 5px #eee;
}
div.assignment-view {
  box-shadow: 0 0 5px #eee;
  color: #000;
  padding: 20px;
  position: relative;
}
.assignment-subheader {
  font-size: 1.25em;
  text-decoration: underline;
}
img.assignment-avatar {
  border-radius: 100px;
}
.assignment-quote-box {
  background-color: #fff;
  border-radius: 10px;
  margin: 40px auto 40px auto;
  position: relative;
}
.assignment-quote-mark {
  height: 62px;
  width: auto;
  background: #fff;
  position: relative;
  top: -25px;
  font-family: "kenyan_coffeebold";
  font-size: 10em;
  color: #ff3a4b;
  float: left;
}
.assignment-quote-text {
  width: 96%;
  margin: 0 auto;
  vertical-align: middle;
  border: 2px solid #ddd;
  padding: 20px;
  box-sizing: border-box;
}
#assignment-sig-avatar {
  position: absolute;
  top: 20px;
  right: 20px;
}
.search-field {
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 20px;
  border: 1px solid #ccd6dd;
  border-radius: 50px;
}
.search-field :first-child {
  margin-right: 10px;
}
.search-field p {
  width: 100%;
  text-align: left;
}
p#song-search-input.show-placeholder:before {
  content: attr(data-placeholder);
  color: #ccd6dd;
}
p#song-search-input:focus {
  outline: none;
}
.assignment-row-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
}
.assignment-row-container p {
  text-align: left;
  margin: 0;
}
#write-up-tools {
  color: #ffffff;
  display: flex;
  justify-content: center;
}
#write-up-tools div {
  cursor: pointer;
  margin: 20px;
}
#write-up-tools div:hover {
  transform: scale(1.2);
}
#write-up-tools .write-up-tool {
  background-color: #ff3a4b;
  padding: 20px;
  border-radius: 100%;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  display: flex;
  align-items: center;
}
#write-up-tools #strum-tool img {
  height: 40px;
}
#write-up-content {
  text-align: left;
}
#write-up-content p {
  margin-block: 12px;
}
#write-up-content hr {
  margin-block: 20px;
}
#write-up-content *:focus {
  outline: none;
}
#write-up-content .focussed {
  background-color: rgba(20, 20, 20, 0.05);
  cursor: auto !important;
}
#write-up-content .container > div.hovered {
  background-color: rgba(26, 143, 204, 0.1);
}
#write-up-content .container div:hover {
  cursor: pointer;
}
#write-up-content .sortable-chosen {
  opacity: 0.85;
}
#write-up-content .sortable-ghost {
  opacity: 0.2;
}
#write-up-content .chord-box {
  display: inline-block;
  width: 220px;
  margin: 0 20px;
  padding: 20px;
}
#write-up-content .chord-box .chord-box-wrapper {
  padding: 0;
}
#write-up-content .container-horizontal {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#write-up-content .container-horizontal .chord-box {
  flex: 1 0 auto;
}
#write-up-content #trash-container {
  position: fixed;
  right: 50px;
  top: 100px;
  padding: 20px;
  transform: scale(0);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#write-up-content #trash-container #trash {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#write-up-content #trash-container #trash .sortable-ghost {
  display: none;
}
#write-up-content #trash-container.visible {
  transform: scale(1);
}
#puff {
  cursor: pointer;
  display: none;
  position: absolute;
  height: 128px;
  width: 128px;
  background: url("textures/puff.png") no-repeat;
}
@media only screen and (max-width: 480px) {
  .assignment-quote-mark {
    font-size: 8em;
    left: -5px;
    height: 55px;
  }
  #assignment-sig-avatar {
    right: 20px;
  }
  div.assignment-view {
    box-shadow: none;
    padding: 0px;
  }
  div.assignment-content {
    padding: 0px;
    box-shadow: none;
  }
}