.vid-card{
    border-radius: 16px;
    direction: rtl;
    text-align: center;
}
.max-lines {
    display: block;/* or inline-block */
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    max-height: 3.6em;
    line-height: 1.8em;
}
.btn-link:visited{
    color: var(--navy);
}
.btn-link{
    font-size: small !important;
    color: var(--primary-color);
}
.btn-link:hover{
    color: var(--primary-color-dark);
    background-color: var(--ice-blue);
}
.vid-card .card-title{
    direction: rtl !important;
    font-size: medium !important;
    color: #4e4e4e  !important;
}
.vid-card .card-body{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.category-badge{
    background-color: var(--ice-blue-bg);
    color: var(--ice-blue);
    position: absolute;
    top: 16px;
    left: 16px;
    font-weight: normal !important;
    font-size: x-small;
    border-radius: 16px;
    z-index: 1000 !important;
}
#category{
    background-color: var(--primary-color);
    color:white;
    padding: 6px 12px;
    display: inline-block;
    font-size: small !important;
}
.filter-btn{
    padding: 6px 12px;
    border: 2px solid var(--navy);
    box-shadow: none !important;
    border-radius: 8px !important;
    font-size: small !important;
}
.filter-btn:hover{
    box-shadow: none !important;
}
.filter-btn.active{
    border: 2px solid var(--navy);
    background-color: var(--navy);
    color: white;
    box-shadow: none !important;
}
.card{
    box-shadow: 0 2px 15px -3px rgba(242, 246, 255, 0.1),0 10px 15px -2px rgba(15,45,81,0.15);
    overflow: hidden;
    border-radius: 16px !important;
}
.card:hover img{
    transform: scale(1.05);
}
.card:hover i{
    margin-left: 12px !important;
}
.card:hover .btn-link{
    background-color: var(--ice-blue);
}
.card:hover{
    box-shadow: 0 2px 15px -3px rgba(13,220,140,0.1),0 10px 20px -2px rgba(13,220,140,0.2);
}
.tag{
    padding: 4px;
    color: var(--ice-blue-bg);
    font-size: small;
    font-family: SiteTypeFace;
    display: inline-block;
}
.tag:hover{
    color: var(--navy);
}
#actionBtn{
    margin-left: auto !important;
    margin-right: auto !important;
}
.related-vid{
    display: flex;
    align-items: start;
    justify-content: start;
}
.related-vid img{
    width: 200px;
    filter: brightness(95%);
    -webkit-filter: brightness(95%);
    -moz-filter: brightness(95%);
}
.related-vid:hover img{
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
}
.related-title{
    color: darkslategrey;
   font-size:small;
    font-weight: bold;
}
.related-cat{
    font-size:small;
}
pre{
    font-family: SiteTypeFace;
    font-size: medium;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: justify;
}

.h_iframe-aparat_embed_frame{position:relative;}
.h_iframe-aparat_embed_frame.ratio{display:block;width:100%;height:auto;}
.h_iframe-aparat_embed_frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

@media (max-width: 425px) {
    .related-title{
margin-top: 16px;
    }
    .related-vid{
        display: flex;
        align-items: start;
        justify-content: start;
        flex-direction: column;
    }
}
@media (max-width: 993px) {
    #vid-content, #related-links{
        width: 100% !important;
    }
    #page-content{
        padding: 16px !important;
    }
    #related-links-header{
        margin-top: 16px !important;
        width: 100% !important;
    }
}