.bg-yellow {
    background: #ffc017;
}

.border-bottom-dark {
    border-bottom: 1px solid #414141;
}

#tags {
    transition: 0.5s;
    height: 100px;
}

.btn:hover {
    color: var(--color-just-black) !important;
    background-color: var(--color-surface-white) !important;
}

.text-number {
    color: var(--color-just-black) !important;
    font-weight: 900;
    font-size: medium;
    margin-top: 3px;
}

.color-blue {
    color: var(--color-just-black) !important;
}

.blogHumanName {
    font-size: 13px !important;
    font-weight: 600 !important;
}

.img-area {
    width: 30px;
    height: 30px;
    margin-right: 3px;
}

.img-area-best {
    width: 40px;
    height: 40px;
    margin-right: 3px;
}

.small1 {
    font-size: 16px;
    font-weight: 500;
}

.title-blog {
    font-size: 21px;
    color: var(--color-just-black) !important;
}

.title-blog-trend {
    font-size: 17px;
    color: var(--color-just-black) !important;
}

.buttonbtn:hover {
    color: var(--color-surface-white) !important;
    background-color: var(--color-just-black) !important;
}

.buttonRightPage {
    background: var(--color-surface-white);
    color: #514f4f !important;
    padding: 0.3rem 0.6rem !important;
    font-size: 13px;
    font-weight: 500 !important;
    transition: background 0.5s ease, color 0.5s ease;
}



.header-start-btn {
    border: 2px solid var(--color-surface-white);
    background-color: var(--color-just-black);
    color: var(--color-surface-white);
    padding: 0.5rem 2.3rem;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.5s ease, color 0.5s ease;
}

.header-start-btn:hover {
    background-color: var(--color-surface-white);
    color: var(--color-just-black);
}

.imgBlogPost {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background-position: 50% 50% !important;
}

@media screen and (max-width: 767px) {

    .imgBlogPost {
        height: 230px !important;
    }
}

@media (min-width: 320px) and (max-width: 480px) {

    .imgBlogPost {
        height: 240px !important;
    }

    .blogHumanName {
        font-size: 15px !important;
    }

}

.list-inline-item {
    font-size: 14px;
    font-weight: 600;
    color: #5a59a5;
}

.blog_hr {
    border-color: #c8c8c8;
    margin-right: 50px;
    margin-left: 50px;
}
.content {
    padding: 20px 30px;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

@media (min-width: 1135px) and (max-width: 1400px) {
    .card {
        margin: 19px !important;
        width: 29% !important;
    }
}

@media (min-width: 991px) and (max-width: 1134px) {
    .card {
        width: 28% !important;
    }
}

@media (min-width: 766px) and (max-width: 992px) {
    .card {
        width: 43% !important;
    }
}

@media screen and (max-width: 766px) {
    .card {
        width: 91% !important;
    }

    .desc {
        height: 9.5rem !important;
    }

}


@media screen and (max-width: 1199px) {
    .mangos {
        display: none !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .mangosDesc {
        font-size: 14px;
    }

    .title-blog {
        font-size: 19px;
    }

    .mangosDescRela {
        height: 10.5rem !important;

    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .mangosDesc {
        font-size: 14px;
    }

    .title-blog {
        font-size: 19px;
    }

    .mangosDescRela {
        height: 10.5rem !important;

    }

    .color-blue {
        margin-top: 6px;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .spinner-area {
        height: 1060px !important;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .spinner-area {
        height: 1060px !important;
    }
}

@media (min-width: 992px) {
    .mangosInput1 {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .input-container-none {
        display: none !important;
    }

    .suggestions-container {
        position: unset !important;
        background-color: #fff;
        border: 1px solid #ccc;

        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        border-radius: 10px;
        width: 100% !important;
    }
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.visibleST {
    opacity: 1;
}

@media (min-width: 991px) and (max-width: 1134px) {
    .tag-card.loading .image {
        height: 168px;
    }
}

@media (min-width: 766px) and (max-width: 992px) {
    .tag-card.loading .image {
        height: 168px;
    }
}

@media screen and (max-width: 765px) {
    suggestions-container .tag-card.loading .image {
        height: 168px;
    }
}

.rotate-icon {
    transition: transform 0.3s ease-in-out;
}

.rotate {
    transform: rotate(180deg);
}

#tag-list {
    overflow: hidden;
    transition: height 0.5s ease;
}

@media screen and (max-width: 991px) {

    #blogs {
        order: 2 !important;
    }

    #tag-author-panel {
        order: 1 !important;
    }
}