:root,
[data-theme=dark] {
    --textPrimaryColor: #A760FF
}

:root {
    --textPrimary: #252724;
    --bgColor: #FFFFFF;
    --bgColor-4: #FFFFFF;
    --greys: #E5E5E5;
    --brown: #616B83
}

[data-theme=dark] {
    --textPrimary: #FFFFFF;
    --bgColor: #121126;
    --bgColor-4: #2A263E;
    --greys: #534C73
}

.text-breadcrumb-active,
.text-breadcrumb-active:hover {
    color: var(--textPrimary) !important
}

.text-breadcrumb {
    font-weight: 500 !important
}

.text-breadcrumb-active {
    font-weight: 600 !important
}

.text-breadcrumb,
.text-breadcrumb:hover {
    color: var(--brown)
}

.breadcrumb-item>img {
    margin-bottom: 3px;
    margin-right: 5px;
    margin-left: -2px
}

.div-detail-surah {
    width: 100%;
    padding: 18px 20px 19px;
    align-items: center;
    background: var(--textPrimaryColor);
    border-radius: 10px
}

.div-detail-surah>h4 {
    margin-bottom: 0 !important
}

.section-1 {
    margin: 30px 0
}

.div-surah-selected {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: var(--bgColor);
    padding: 10px 15px 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--greys)
}

.text-surah-selected {
    margin-right: 20px
}

.surah-dropdown {
    height: 300px;
    padding: 0 !important;
    overflow-y: auto;
    background-color: var(--bgColor-4)
}

.all-data-detail-quran-baitullah {
    background: var(--bgColor);
    cursor: pointer;
    width: 100%;
    display: flex;
    border-radius: 12px;
    flex-wrap: wrap
}

.row1-detail-quran-baitullah {
    margin-bottom: 15px
}

.data-detail-quran-baitullah,
.data-detail-quran-baitullah-2 {
    padding: 25px 0;
    display: block;
    align-items: center;
    width: 100%
}

.data-detail-quran-baitullah {
    margin: 30px 40px
}

.title-detail-quran-baitullah2:hover,
.title-detail-quran-baitullah:hover {
    color: var(--textPrimary)
}

.title-detail-quran-baitullah,
.title-detail-quran-baitullah2,
.title-detail-quran-word {
    color: var(--textPrimary);
    font-family: LPMQ;
    line-height: 200%
}

.title-detail-quran-baitullah,
.title-detail-quran-baitullah2 {
    text-align: -webkit-right
}

.title-latin-detail-quran-baitullah {
    font-size: 15px;
    width: 100%;
    margin-bottom: 15px !important
}

.title-translate-detail-quran-baitullah {
    font-size: 15px
}

@media (max-width:576px) {
    .detailClass {
        padding: 6rem 1.5rem 3rem !important
    }
}