.arabic-text {
    font-size: 1.375rem; /* should be bigger than english text */
}
.arabic-text td { /* <td> tags which have class="arabic-text" */
    line-height: 30px;
}

/* Grids (books) */
.grid-container-5cols {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-container-4cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-container-3cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-container-2cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columns */
    gap: 10px;
    width: 100%;
}

.grid-item {
    background-color: white;
}

.grid-item-with-border { /* This border will include the text */
    background-color: white;
    border: 1px solid #ddd;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    padding: 0px;
}

.grid-item .caption {
    padding: 5px 0 5px 0;  /* top, right, bottom, left */
}

.grid-item .caption-ar {
    padding: 5px 0 5px 0;
    direction: rtl;
}

/* Highlight the currently selected book, goes with js/item_grid_highlight.js */
.grid-item.highlighted {
    background-color: #fff000;
    padding: 7px;
}

/* Hymn videos page */
.grid-hymns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.hymn-iframe {
    width: 100%;
    height: 280px;
}

/* Headers */
.toc-header {
    color:black;
}

/* Tables */
.dated-table td {
    /* padding-bottom: 2px; */
    padding-top: 5px;
}

/* This is to color every other line except header */
.dated-table tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

.clear-table {
    width:100%;
    bgcolor:white;
    border-collapse:collapse;
    border-spacing:0px;
    padding:0px;
    cellpadding:0px;
    cellspacing:0px;
}

/* footnotes */
.footnotes {
    margin-top: 40px;
    border-top: 1px solid #ccc;
}

/* Text Dividers */
.text_divider {
    display: block; /*display: block makes the image act like its own line*/
    margin: 0px auto; /*margin: auto horizontally centers it*/
    max-width: 90px; /* You can adjust margin-top / margin-bottom for spacing */
}

/* Images */
.customimg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border: 1px black dotted;
}