.title-summary-page .image-container {
  max-width: 100%;
  margin-top: 5%;
}
.title-summary-page .image-container img {
  max-width: 100%;
  max-height: 50vh;
}
.title-summary-page .avatar {
  height: 40px;
  width: 40px;
}

#content-body > .glider-row:last-child {
  margin-bottom: 0 !important;
}

#content-body {
  padding: 0 !important;
  margin-bottom: 88px !important;
}

.book-meta a:hover {
  color: #8495AE;
}

#EditableCastSection > form .card .card .card-content {
  background-color: #FFFFFF;
}

.image-wrapper {
  width: 100%;
  height: 400px;
}

.chaptercards:hover {
  background-color: gainsboro;
}

.bg_white {
  background-color: white;
}

.mb-unset {
  margin-bottom: unset !important;
}

.chapter-list li h4 {
  margin: 10px;
  cursor: pointer;
}

.collapse-icon.card-header {
  background-color: ghostwhite;
}

.tab-pane {
  padding: 20px !important;
}

.margin20 {
  margin: 20px 0px;
}

.pad2 {
  padding: 2px;
}

.content-wrapper::before {
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* opacity: 0.4; */
}

.nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
  color: white;
  border: none;
  border-bottom: 3px solid #007aff;
  background-color: transparent;
}

.tab-content {
  background-color: initial;
  border: none;
  border-top: none;
}

.nav-tabs {
  border-bottom: 1px solid #666;
}

.nav.nav-tabs.nav-top-border .nav-item a {
  color: darkgrey;
}

.nav.nav-tabs.nav-top-border .nav-item a:hover {
  color: rgb(143, 195, 255);
}

.actionIcons ul {
  text-align: justify;
  padding-left: 0px;
}

.actionIcons li {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  text-align: center;
}

.actionIcons li .la {
  font-size: 1.4rem;
  background-color: dimgrey;
  padding: 10px;
  border-radius: 50%;
}

.backgroundImagery {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  /* bottom: 0; */
  z-index: -2;
}

.backgroundImagery .hero {
  height: auto;
  width: 100%;
  left: 0;
  right: 0;
  opacity: 0.3;
}

.backgroundImagery .hero-vignette {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 20, 20, 0)), color-stop(15%, rgba(20, 20, 20, 0.15)), color-stop(29%, rgba(20, 20, 20, 0.35)), color-stop(44%, rgba(20, 20, 20, 0.58)), color-stop(68%, #141414), to(#141414));
  background-image: -webkit-linear-gradient(top, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.15) 15%, rgba(20, 20, 20, 0.35) 29%, rgba(20, 20, 20, 0.58) 44%, #141414 68%, #141414 100%);
  background-image: -moz- oldlinear-gradient(top, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.15) 15%, rgba(20, 20, 20, 0.35) 29%, rgba(20, 20, 20, 0.58) 44%, #141414 68%, #141414 100%);
  background-image: -o-linear-gradient(top, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.15) 15%, rgba(20, 20, 20, 0.35) 29%, rgba(20, 20, 20, 0.58) 44%, #141414 68%, #141414 100%);
  background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.15) 15%, rgba(20, 20, 20, 0.35) 29%, rgba(20, 20, 20, 0.58) 44%, #141414 68%, #141414 100%);
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  background-position: 0 top;
  background-repeat: repeat-x;
  background-color: transparent;
  width: 100%;
  height: 52.8vw;
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: -1vw;
}

.backgroundImagery .hero-vignette-left {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(20, 20, 20, 0)), color-stop(15%, rgba(20, 20, 20, 0.15)), color-stop(29%, rgba(20, 20, 20, 0.35)), color-stop(44%, rgba(20, 20, 20, 0.58)), color-stop(68%, #141414), to(#141414));
  background-image: -webkit-linear-gradient(top, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.15) 15%, rgba(20, 20, 20, 0.35) 29%, rgba(20, 20, 20, 0.58) 44%, #141414 68%, #141414 100%);
  background-image: -moz- oldlinear-gradient(top, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.15) 15%, rgba(20, 20, 20, 0.35) 29%, rgba(20, 20, 20, 0.58) 44%, #141414 68%, #141414 100%);
  background-image: -o-linear-gradient(top, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.15) 15%, rgba(20, 20, 20, 0.35) 29%, rgba(20, 20, 20, 0.58) 44%, #141414 68%, #141414 100%);
  background-image: linear-gradient(to left, rgba(20, 20, 20, 0) 0, rgba(20, 20, 20, 0.09) 15%, rgba(20, 20, 20, 0.15) 29%, rgba(20, 20, 20, 0.28) 44%, #141414 100%, #141414 50%);
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  background-position: 0 top;
  background-repeat: repeat-x;
  background-color: transparent;
  width: 40vw;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -1vw;
}

.categories {
  color: darkgrey;
  margin-top: 20px;
}

.actionIcons li .dropdown-menu .la {
  background-color: initial;
}

.Subtitulo {
  font-weight: 600;
  font-size: 1.2rem;
}

.CastSelectionBar {
  margin-top: 40px;
}

.CastSelectionBar .btn-sm {
  background-color: dimgrey;
  color: white;
}

.CastSelectionBar .btn-sm .la {
  font-size: 2rem;
}

.characterName {
  white-space: normal;
  text-align: center;
  font-size: 0.9rem;
  padding-top: 0px;
  margin: 0;
}

.character-list {
  display: grid;
  grid-template-areas: "a a a a a a";
  grid-gap: 10px;
  grid-auto-columns: auto;
}

.CastPreviewDiv .avatar {
  text-align: center;
  width: 10vw !important;
}

.SeeAllCharacters {
  border-radius: 50%;
  height: 80px;
  width: 80px;
}

.EditButtonsDiv {
  padding: 0px;
}

.CastOptionsDiv {
  /* border-right: 1px solid #007aff;
  padding: 10px 1.5rem; */
  display: inherit;
}

.dropdown-btn {
  background-color: rgba(49, 54, 59, 0.25);
  color: #DADADA;
}

.rounded-edit-btn {
  background-color: white;
  border: none;
  border-radius: 17px;
  color: #007AFF;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  width: 80%;
}

@media (max-width: 768px) {
  #tab-nav {
    padding-left: 0px;
  }
  .logo-img {
    margin-left: 20px;
  }
}
.assesment-settings .literal-select {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .assesment-settings .literal-select {
    width: 216px;
  }
}