/* Full Page Layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    text-decoration: none;
}

body {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    font-family: Inter, sans-serif;
    color: #0B1320;
}

a {
    color: #0B1320;
    text-decoration: none;
}

a.link {
    text-decoration: underline !important;
    color: #0079bf !important;
}

button {
    cursor: pointer;
}

main {
    margin-top: 60px;
}

.container {
    width: 100%;
    max-width: 1440px;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
    margin-right: auto;
    margin-left: auto;
}

/* Book List */
.book-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    column-gap: 2em;
    row-gap: 2em;
    margin-top: 1.5em;
}
.book-list .book img{transition:.8s}
.book-list .book:hover img{opacity:.8}
.book p {
    margin-bottom: 0;
}

.book img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    background: #eee;
	border-radius:3px
}

p.book-name,h3.book-name {
    font-size: 14px;
    font-weight: 500;
	text-transform:capitalize;
    width: 159px;
    margin: 10px 0;
    color: #0B1320;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}
p.book-name:hover,h3.book-name:hover{color:#1a78f1}
.book-genre span {
    font-size: 11px !important;
    letter-spacing: 0px;
    display: inline-block;
    color: #333 !important;
    border-radius: 12px;
    padding: 0 8px;
    margin-bottom: 3px;
    background-color:#e7ecf2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 159px;
    cursor: pointer;transition:.8s !important
}
p.book-genre span:hover{background:#ccc  !important}
span.view-count {
    color: #69717E;
    font-size: 12px;
    padding-left: 4px;
}

/* End Book List */

/* Star Rating */
.star-container {
    display: flex;
    column-gap: 2px;
    align-items: center;
}

.star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background-color: #C0D1DA;
    border-radius: 10px;
    display: block;
    position: relative;
    overflow: hidden;
}

.star.size-xlg {
    width: 36px;
    height: 36px;
}

.star.size-lg {
    width: 26px;
    height: 26px;
}

.star.size-md {
    width: 20px;
    height: 20px;
}

.star.size-sm {
    width: 14px;
    height: 14px;
}

.rating-count.size-xlg {
    font-size: 24px;
    font-weight: 600;
    margin-left: 0.6rem;
}

.rating-count.size-lg {
    font-size: 20px;
    font-weight: 600;
    margin-left: 0.6rem;
}

.rating-count.size-md {
    font-size: 14px;
    font-weight: 500;
    margin-left: 0.3rem;
}

.rating-count.size-sm {
    font-size: 12px;
    font-weight: 400;
    margin-left: 0.2rem;
}

.star_overlay {
    width: 100%;
    height: 100%;
    background-color: #FBC316;
    position: absolute;
    left: 0;
}

.form-input-container {
    gap: 10px;
    display: flex;
    align-items: flex-start;
}

.form-input {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 10px;
    flex: 1;
}

.form-input label,
.form-input .error-msg {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
}

.form-input input,
.form-input button {
    flex: 1;
    margin: 3px 0;
    padding: 9px;
    font-size: 14px;
    border-radius: 4px;
    width: 100%
}

.form-input input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

.form-input input[type=text],
.form-input input[type=email],
.form-input input[type=password] {
    border: 1px solid #C0D1DA;
}

.form-input input[type=text].error,
.form-input input[type=password].error {
    border: 1px solid #d02d3e;
}

.form-input .error-msg {
    color: #d02d3e;
}

.form-input input:hover,
.form-input input:focus,
.form-input input:visited {
    border-color: #1877f2;
    outline: none;
    transition: all .2s ease;
}

.form-input button[type=submit] {
    border: none;
    width: auto;
    background: #1877f2;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-input button[type=submit]:hover {
    background: #0358c4;
    color: #fff;
}

.form-input button[type=submit]:disabled {
    opacity: 0.9;
    pointer-events: none;
}

.form-input .password {
    width: 100%;
    position: relative;
}

.form-input .eye_password {
    position: relative;
}

.form-input .eye_password input {
    padding-right: 40px;
}

.form-input .eye_password .eye_icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    cursor: pointer;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-input .eye_password .eye_icon svg {
    width: 18px;
}

section.content-area {
    padding: 1em 0;
}

/* added for nav-bar profile-image */
.profile-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 5px;
}

.loader_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin: 0 5px;
}

.grecaptcha-badge {
    visibility: hidden !important;
    display: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Static Pages Design */
h1.static-heading {
    font-size: 34px;
    line-height: 1.5;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 1rem;
}


/* Follow / Following Style */
@-webkit-keyframes follow-animation {
    from {
        background: white;
        color: #1a78f1;
        width: 60px;
        left: 50px;
    }

    to {
        background: #2EB82E;
        border-color: #2EB82E;
        color: #ffffff;
        width: 80px;
        left: 35px;
    }
}

@-webkit-keyframes unfollow-animation {
    from {
        background: #1a78f1;
        color: #ffffff;
        width: 80px;
        left: 35px;
    }

    to {
        background: #ffffff;
        border-color: #1a78f1;
        color: #1a78f1;
        width: 60px;
        left: 50px;
    }
}

@keyframes follow-animation {
    from {
        background: #ffffff;
        color: #1a78f1;
        width: 60px;
        left: 50px;
    }

    to {
        background: #1a78f1;
        border-color: #1a78f1;
        color: #ffffff;
        width: 80px;
        left: 35px;
    }
}

@keyframes unfollow-animation {
    from {
        background: #1a78f1;
        color: #ffffff;
        width: 80px;
        left: 35px;
    }

    to {
        background: #ffffff;
        border-color: #1a78f1;
        color: #1a78f1;
        width: 60px;
        left: 50px;
    }
}

input.author-follow-button {
    appearance: none;
    -webkit-appearance: none;
}

input.author-follow-button:after {
    color: #1a78f1;
    background-color: #ffffff;
    border: 1px solid;
    border-color: #1a78f1;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: 5px;
    content: '+ Follow';
    -webkit-animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-animation-fill-mode: forwards;
    animation: unfollow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
    margin-left: 0.6em;
}
input.author-follow-button:hover:after{color:#fff!important;background-color:#1a78f1!important}
input.author-follow-button:checked:after {
	content: 'Following';
    -webkit-animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-animation-fill-mode: forwards;
    animation: follow-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation-fill-mode: forwards;
}

/* --- Custom Checkbox --- */
.custom-checkbox input[type=checkbox] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.custom-checkbox label {
    position: relative;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    margin: 0 !important;
}

.custom-checkbox label:before {
    content: '';
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    border: 2px solid #0079bf;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 8px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 8px;
}

.custom-checkbox input[type=checkbox]:checked+label:after {
    content: '';
    display: block;
    position: absolute;
    top: 1px;
    left: 7px;
    width: 4px;
    height: 12px;
    border: solid #0079bf;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* for shareIcons */
#st-1 {
    z-index: 5 !important;
}

.swal2-title {
    line-height: 1.2 !important;
    font-size: 24px;
}

.swal2-confirm {
    background-color: #1a78f1 !important;
}

.swal2-styled:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Responsive Design */

/* --- Resolution Sizes 1440 --- */
@media screen and (max-width: 1440px) {
    .container {
        max-width: 1380px;
    }
}

/* --- Resolution Sizes 1366 --- */
@media screen and (max-width: 1366px) {
    .container {
        max-width: 1300px;
    }
}

/* --- Resolution Sizes 1280 --- */
@media screen and (max-width: 1280px) {
    .container {
        max-width: 1220px;
    }
}

/* --- Resolution Sizes 1200 --- */
@media screen and (max-width: 1200px) {
    .container {
        max-width: 1180px;
    }
}

/* --- Resolution Sizes 1024 --- */
@media screen and (max-width: 1024px) {
    .container {
        max-width: 1000px;
    }

    .book-list {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
        column-gap: 1.5em;
    }

    p.book-name,h3.book-name {
        width: 144px;
    }

    p.book-genre span {
        max-width: 144px;
    }
}

/* --- Resolution Sizes 992 --- */
@media screen and (max-width: 992px) {
    body {
        font: normal normal normal 14px/18px Inter;
        letter-spacing: 0;
        color: #0B1320;
    }

    .container {
        max-width: 960px;
    }

    .new-arrival .title h4,
    .most-loved .title h4,
    .most-read .title {
        font-size: 16px;
    }

    .book-list {
        grid-template-columns: repeat(auto-fill, minmax(129px, 1fr));
    }

    .book img {
        width: 118px;
        height: 180px;
    }

    p.book-name,h3.book-name {
        width: 127px;
    }

    p.book-genre span {
        max-width: 127px;
    }
}

/* --- Resolution Sizes 810 --- */
@media screen and (max-width: 810px) {
    .container {
        max-width: 780px;
    }

    .book-list {
        grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    }

    .book img {
        width: 110px;
        height: 170px;
    }

    p.book-name,h3.book-name {
        width: 121px;
        -webkit-line-clamp: 3;
    }

    p.book-genre span {
        max-width: 121px;
    }
}

/* --- Resolution Sizes 768 --- */
@media screen and (max-width: 768px) {
    .container {
        max-width: 700px;
    }

    .book-list {
        column-gap: 1.2em;
    }
}

/* --- Resolution Sizes 600 --- */
@media screen and (max-width: 600px) {
    .container {
        max-width: 580px;
    }
}

/* --- Resolution Sizes 540 --- */
@media screen and (max-width: 540px) {
    body {
        font: normal normal normal 13px/16px Inter;
    }

    .container {
        max-width: 520px;
    }

    .book-list {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    }

    .book img {
        width: 100px;
        height: 150px;
    }

    p.book-name,h3.book-name {
        width: 100px;
        -webkit-line-clamp: 3;
        font-size: 13px;
    }

    p.book-genre span {
        max-width: 100px;
        font-size: 11px;
    }
}

/* --- Resolution Sizes 428 --- */
@media screen and (max-width: 428px) {
    .container {
        max-width: 400px;
    }
}

/* --- Resolution Sizes 414 --- */
@media screen and (max-width: 414px) {
    .container {
        max-width: 390px;
    }
    .slider-area{
        padding: 0 12px;
    }
}

/* --- Resolution Sizes 390 --- */
@media screen and (max-width: 390px) {
    .container {
        max-width: 370px;
    }
}

/* --- Resolution Sizes 375 --- */
@media screen and (max-width: 375px) {
    .container {
        max-width: 350px;
    }
}

/* --- Resolution Sizes 360 --- */
@media screen and (max-width: 360px) {
    .container {
        max-width: 340px;
    }
}

/* --- Resolution Sizes 320 --- */
@media screen and (max-width: 320px) {
    .container {
        max-width: 300px;
    }
}