.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: #8fc3ff; }

.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: .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: .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; } }