/* Global */

:root {
    --primary: #00a1cc;
    --secondary: #606c76;
    --light: #ccc;
    --bright: rgb(247, 247, 247);
}

html {
    /* background-color: #eee; */
    font-size: 55%;
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

.errorlist {
    color: var(--primary);
    font-size: small;
    font-weight: bold;
    list-style-type: square;
}

#page-wrapper {
    position: relative;
    min-height: 100vh;
    z-index: 0;
}

#content-wrapper {
    padding-bottom: 160px; 
}


input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

footer {
    text-align: center;

    margin-bottom: 4px !important;

    border-top: var(--bright) solid 2px;

    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

footer a {
    margin: 0 15px;
    font-size: small;
}

img.emoji {
    height: 20px !important;
    width: 20px !important;
    box-sizing: border-box;
    object-fit: contain;
    position: relative;
    top: 3px;
}

.more-link {
    font-size: small;
    margin-left: 5px;
}

.highlight {
    font-weight: bold;
}

div.dividing-line {
    height: 0;
    width: 100%;
    margin: 40px 0 15px 0;
    border-top: solid 1px var(--light);
}

.icon-lock svg{
    fill: var(--light);
    height: 12px;
    position: relative;
    top: 1px;
    margin-left: 3px;
}

textarea::placeholder {
    color: var(--light);
}

input::placeholder {
    color: var(--light);
}

.spinner {
    transform: scale(0.4);
    margin: auto;
}

.lds-spinner {
    color: official;
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }

  .lds-spinner div {
    transform-origin: 40px 40px;
    animation: lds-spinner 1.2s linear infinite;
  }

  .lds-spinner div:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 37px;
    width: 6px;
    height: 18px;
    border-radius: 20%;
    background: var(--secondary);
  }

  .lds-spinner div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -1.1s;
  }

  .lds-spinner div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -1s;
  }

  .lds-spinner div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.9s;
  }

  .lds-spinner div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.8s;
  }

  .lds-spinner div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.7s;
  }

  .lds-spinner div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.6s;
  }

  .lds-spinner div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.5s;
  }

  .lds-spinner div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.4s;
  }

  .lds-spinner div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.3s;
  }

  .lds-spinner div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.2s;
  }

  .lds-spinner div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.1s;
  }

  .lds-spinner div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
  }

  @keyframes lds-spinner {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

/* overwrite rating-star plugin makes it readonly */
.rating-star .jq-star {
    cursor: unset;
}

/* Nav Bar */

section#navbar {
    background-color: var(--bright);
    box-sizing: border-box;
    padding: 18px 0;
    margin-bottom: 50px;
    border-bottom: var(--light) 0.5px solid;
    
}

.navbar img.logo {
    width: 100px;
    float: left;
}

.navbar .search-box {
    height: 32px;
    margin: 5px 0 0 16px;
    width: 50%;
    float: left;
    background-color: white;
}

.navbar .search-box::placeholder {
    color: var(--light);
}

.navbar a.nav-link, .navbar a.nav-link:visited {
    font-size: 80%;
    float: right;
    margin-top: 10px;
    color: var(--secondary);
    margin-left: 20px;
}

.navbar a.nav-link:hover, .navbar a.nav-link:hover:visited {
    color: var(--primary);
}

/* Main Content Section */

section#content div#main {
    padding: 32px 35px;
    background-color: var(--bright);
    margin-right: 40px;
    width: 75%;
    position: relative;
}

/* Aside Content Section */

section#content div#aside {
    width: 25%;
}

.set {
    margin-bottom: 20px;
}

.set .set-title {
    display: inline-block;
    margin-bottom: 7px;
}
.set .set-empty {
    font-size: small;
    margin: 0;
    padding-left: 20px;
}

.set .set-item-list {
    padding: 8px 25px 0 10px;
}

.set .set-item {
    text-align: center;
    margin-bottom: 0 !important;
}

.set .set-item-image {
    max-width: 90px;
    height: 110px;
    object-fit: contain;
}

.set .set-item-title, .set .set-item-title:visited {
    /* width: 80%; */
    margin: auto;
    line-height: 1.3em;
    font-size: small;
    display: block;
    color: var(--secondary);

}

.set .set-item-title:hover, .set .set-item-title:visited:hover {
    color: var(--primary);
}

.set .set-content {
    font-size: small;
}

 /* Info Card */

.aside-card {
    background-color: var(--bright);
    padding: 20px 24px 15px 24px;
    margin-bottom: 30px;
}

.aside-card .clearfix {
    margin-bottom: 15px;
}

.aside-card .info-avatar {
    width: 72px;
    object-fit: contain;
    float: left;
}

.aside-card .info-name {
    margin: 0;
    max-width: 120px;
    margin-bottom: 12px;
    padding-left: 8px;
    float: left;
}

.aside-card .info-brief {
    line-height: 2rem;
    font-size: small;
    overflow-wrap: break-word;
    hyphens: auto;
}

.aside-card a.report {
    color: var(--light);
    font-size: small;
}

.aside-card a.follow {
    font-size: small;
    color: var(--secondary);
    margin-right: 10px;
}

.aside-card .button.add-button {
    margin-top: 10px;
}

/* Relation Card */

.relation-card {
    padding: 2px;
    margin-bottom: 10px;
}

.relation-card .relation-label {
    margin: 0;
    margin-bottom: 12px;
    display: inline-block;
}

.relation-card .relation-user .relation-avatar {
    width: 50px;
}

.relation-card .relation-user .relation-name {
    display: block;
    font-size: small;
    line-height: 1.8rem;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    /* max-width: 100px; */
    overflow: hidden;    
}

.relation-user .relation-name .emoji {
    transform: scale(0.8);
}

.relation-card .relation-user-list {
    margin-bottom: 15px;
}

.relation-card .relation-user-list .relation-user {
    list-style-type: none;
    text-align: center;
    margin-bottom: 0px !important;
    justify-items: center;
    padding: 0 3px !important;
}

/* Report Card */

.report-card {
    padding: 2px;
    font-size: small;
}

.report-card .report-label {
    margin: 0;
}

.report-card .report-user-link {
    padding: 0 5px;
}

.report-card .report-message {
    list-style-type: none;
}

/* Search Result */

.result-items .result-item:last-of-type {
    margin-bottom: 50px;
}

.result-item {
    list-style: none;
    margin-bottom: 30px;
}


.result-item .result-info {
    margin-left: 20px;
    float: left;
}

.result-item img.result-book-cover {
    float: left;
    object-fit: contain;
    height: 150px;
    width: 100px;
}

.result-item .result-info .rating-empty {
    font-size: small;
}

.result-item .result-info .rating-star{
    cursor: unset;
    display: inline;
    position: relative;
    top: 3px;
    left: -3px;
}

.result-item .result-info .result-book-info {
    font-size: 80%;
    overflow: hidden;
    width: 420px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    top: .55rem;
}

.result-item .result-info .rating-score {
    font-size: 80%;
    display: inline;
    margin-right: 20px;
}

.result-item .result-info .result-item-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 500px;
    display: block;
    overflow: hidden
}

.result-item .result-info .result-item-brief {
    margin-top: 10px;
    margin-bottom: 0;
    font-size: small;
    width: 565px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    /* white-space: nowrap; */
    height: 90px;
}

.aside-card .add-nav .clearfix {
    margin-bottom: 5px;
}

/* Pagination */
.pagination {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.pagination a {
    display: inline-block;
}

.pagination .button {
    padding: 0 5px;
    height: 2rem;
}

.pagination .page-index {
    font-size: small;
}

/* Display Page */

img.display-image {
    height: 210px;
    object-fit: contain;
    float: left;
    max-width: 200px;
}

.display-info {
    max-width: 530px;
    float: left;
    margin-left: 20px;

    overflow: hidden;
    text-overflow: ellipsis;
}

.display-title {
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
    font-weight: bold;
}

.display-info-detail {
    font-size: small;
    width: 250px;
    display: inline-block;
    vertical-align: top;
}

.display-info-detail .rating-star {
    position: relative;
    left: -5px;
}

.display-info-detail .rating-score {
    position: relative;
    top: -2.5px;
    font-weight: bold;
}

.display-info-detail form, .display-info-detail input[type='submit'] {
    display: inline;
}

.mark {
    font-size: small;
    margin-bottom: 5px;
}

.mark form {
    display: inline;
    /* margin: 0; */
}

.mark .mark-status-label {
    font-weight: bold;
}

.mark .rating-star {
    position: relative;
    top: 1.5px;
}

.mark .icon-lock {
    position: relative;
    top: -0.5px;
}

.mark .clearfix {
    margin-bottom: 5px;
}

.list-item .item-time {
    color: var(--light);
    margin-left: 5px;
    font-size: small;
}

.list-item .mark-text {
    margin: 20px 0 15px 0;
}


.mark .button-group a.button{
    width: 33%;
    box-sizing: border-box;
    display: initial;
    padding: 7px 8%;
    margin: 0 4px;
    font-weight: normal;
}

.review {
    font-size: small;
    margin-bottom: 5px;
}

.review .clearfix {
    margin-bottom: 5px;
}

.review .review-label {
    font-weight: bold;
}

.review .review-time {
    color: var(--light);
}

.review .review-title {
    font-size: small;
    font-weight: bold;
    display: block;
    margin-top: 10px; 
    margin-bottom: 5px;
}

.review .review-head .edit {
    margin-left: 10px;
}

.set .mark {
    font-size: small;
    /* margin-bottom: 3px; */
    padding-left: 20px;
    padding-right: 20px;
}

.list-label .rating-star {
    position: relative;
    top: 3px;
}

.list-label .list-owner-name {
    position: relative;
    top: -1px;
}

.list-label {
    font-size: small;
}

.set .mark-text {
    margin: 0;
}

.set .review-title {
    font-weight: bold;
    font-size: small;
}

.set.result-items .list-item {
    margin-bottom: 10px;
}s

.aside-card .aside-item {
    overflow: hidden;
}

.aside-item .item-image {
    height: 150px;
}

.aside-item div {
    font-size: small;
}

.aside-item .item-title {
    font-weight: bold;
    font-size: small;
    margin-bottom: 5px;
    margin-top: 10px;
}

.aside-item .rating-star {
    position: relative;
    top: 4px;
}

.list-head {
    margin-bottom: 30px;
}

.user {
    font-size: small;
    margin-bottom: 24px;
}

.user .user-info {
    margin-left: 15px;
    max-width: 88%;
}

.user .user-name {
    font-size: small;
    margin-bottom: 5px;
}

.user .user-brief {
    margin: 0;
}

.user .avatar {
    height: 70px;
}

iframe {
    width: 100%;
    height: 500px;
}