.article-wrap {
    text-align: left;
}

.article-title{
    text-decoration: underline;
}

.article-title a {
    color: var(--bs-heading-color);
}

.article-subtitle {
    font-size: clamp(16px, 2.2vw, 19px);
    line-height: 1.35;
}

.article-byline{
    border-left: 0.3rem solid blue;
    padding-left: 10px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.article-text{
    text-align: justify;
}

.article-footer {
    padding-top: 20px;
}

.article-tags {
    display: inline-block;
}

.article-tags ul{
    padding: 0px;
}

.article-tags-item{
    display: inline-block;
    border-bottom: 1px dashed darkblue;
    border-right: 1px dashed darkblue;
    padding: 10px;
    margin-right: 20px;
}
.article-tags-item a{
    text-decoration: underline;
    text-decoration-color: lightblue;
    color: var(--ft-body-color);
}
.article-tags-item:hover{
    background-color: bisque;
}



.article-image-default{
    margin-bottom: 16px;
}

.article-text-image-desc {
    color: #6c757d;
    font-size: clamp(0.84rem, 1.6vw, 0.95rem);
    line-height: 1.4;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
}

.article-popover-item {
    font-size: 20px;
    padding: 8px;
    color: var(--ft-body-color);
}

#article-popover-copylink-msg {
    text-align: center;
}

.article-other-section {
    text-align: left;
}

.article-footer-extras {
    display: inline-block;
}

.article-popover-trigger {
    color: var(--ft-body-color) !important;
    font-size: 20px;
    display: inline-block;
}

.article-popover-trigger a{
    display: inline-flex;
    gap: .375rem;
    align-items: center;
    color: var(--ft-body-color) !important;
    text-decoration: none !important;
}

.article-authors-link {
    color: var(--ft-body-color);
    text-decoration: none;
}

.article-authors-link:hover {
    color: var(--ft-body-color-link);
    text-decoration: underline;
}

@media (max-width: 991px) {
    .article-title {
        text-align: center !important;
    }

    .article-image{
        width: 100%;
        height: auto;
    }

    .article-text-image {
        width: 100%;
        height: auto;
    }

    .article-text-image-wrap {
        margin-bottom: 16px;
    }

    .article-image-left{
        margin-bottom: 16px;
    }
    
    .article-image-right{
        margin-bottom: 16px;
    }
    
    .article-image-center{
        margin-bottom: 16px;
    }

    .article-header {
        display: flex;
        flex-direction: column;
    }
    .article-title {
        order: -1;
    }

    .article-popover-trigger {
        padding-top: 10px;
        padding-bottom: 10px;
        display: inline-block;
    }

    .article-robot-popover-trigger-wrap {
        margin-left: 30px;
    }
}


@media (min-width: 992px) {
    .article-image{

    }

    .article-text-image-wrap {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .article-text-image {
        width: 60%;
    }

    .article-text-image-desc {
        max-width: 60%;
        margin-left: 0;
    }

    .article-text p:has(> img) { 
        text-align: center;
    }

    .article-image-left{
        margin-right: 40px;
        margin-bottom: 16px;
        width: 30%;
        height: auto;
    }
    
    .article-image-right{
        margin-left: 50px;
        margin-bottom: 16px;
        width: 45%;
        height: auto;
    }
    
    .article-image-center{
        display:block;
        margin-right: auto;
        margin-bottom: auto;
        margin-bottom: 16px;
        width: 65%;
        height: auto;
    }

    .article-popover-trigger {
        padding: 10px;
    }

    .article-robot-popover-trigger-wrap {
        padding-left: 30px;
        margin-left: 10px;
        position: relative;
    }
      
    .article-robot-popover-trigger-wrap:before {
        content : "";
        position: absolute;
        left    : 0;
        bottom  : 0;
        top: auto;
        bottom: auto;
        width  : 1px;
        height   : 65%;
        border-left: 4px dotted darkblue;
      }
}





/*

LIST

*/

.list-pagenation a {
    color: var(--ft-body-color);
    padding: 20px;
}

.list-pagenation a:first-child {
    padding-left: 0px !important;
}

@media (max-width: 991px) {
    .list-pagenation {
        text-align: center;
    }
}

@media (min-width: 992px) {
    .list-pagenation {
        text-align: left;
    }
}

.topic div{
    padding: 20px;
}

/* .article-wrap table {
    border: none;
  }

th, td {

  } 

 .article-wrap tr {
    border-top:1px solid
}
  .article-wrap tr + tr {
    border-top:1px solid red;
}
  .article-wrap td {
    border-left:1px solid #000;
}
  .article-wrap td + td {border-left:1px solid red;}



.article-wrap th, .article-wrap tr, .article-wrap td {
    vertical-align: top;
  }

.article-wrap thead tr {
    background-color: #d6ebff;
  }

.article-wrap tbody tr:nth-child(odd) {
    background-color: #e3eff9;
  }*/

.ramadan-giving h2, .ramadan-giving h3, .ramadan-giving h4, .ramadan-giving h5 {
text-align: left;
}

.ramadan-giving table a {
    margin-bottom: 12px;
    display: block;
}

.ramadan-giving hr {
    margin: 1.5rem 0 !important;
}

.ramadan-giving h5 {
    font-size: 1.0rem;
}



@media (max-width: 991px) {
    .ramadan-giving h3 {
        font-size: calc(1.13rem + 0.6vw);
    }
}

@media (min-width: 992px) {
    .ramadan-giving h3 {
        font-size: calc(1.2rem + 0.6vw);
    }
}

/*
HOMEPAGE FEATURED ARTICLE LAYOUT
*/

.home-home-featured .article-text {
    /* Justified text looks uneven when wrapping around floated images. */
    text-align: left;
}

.home-home-featured .article-text,
.home-home-featured .article-text p,
.home-home-featured .article-text li {
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.6;
}

@media (min-width: 992px) and (max-width: 1399px) {
    .home-home-featured .article-title {
        font-size: clamp(28px, 1.8vw, 34px);
        line-height: 1.25;
    }

    .home-home-featured .article-subtitle {
        font-size: clamp(17px, 1.2vw, 19px);
        line-height: 1.35;
    }

    .home-home-featured .article-text,
    .home-home-featured .article-text p,
    .home-home-featured .article-text li {
        font-size: 16px;
        line-height: 1.6;
    }

    .home-home-featured .article-byline {
        font-size: 15px;
    }

    .home-home-featured .article-image-left {
        float: none !important;
        display: block;
        width: min(100%, 620px);
        margin: 0 auto 20px auto;
    }
}

@media (min-width: 1400px) {
    .home-home-featured .article-image-left {
        width: clamp(260px, 34%, 380px);
        margin-right: 28px;
    }
}


.img-overlay-container {
    position: relative;
    text-align: center;
    color: white;
  }
.img-overlay-image {
width: 100%;
}
  
/* Centered text */
.img-overlay-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}