body {
    font-family: Arial;
    padding-top: 66px;
}

.popover-body {
    font-family: Arial;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
}

.col {
    padding: 0 5px;
}

.wordHover:hover {
    background-color: #dfedf0;
}

.popover-body {
    padding: 5px 10px;
    font-size: 1.5rem;
}

.popover-body {
    display: flex;
    align-items: center;
}

.a-disabled {
    pointer-events: none;
    color: #8f8f8f !important;
}

.row {
    padding-left: 12px;
    padding-right: 12px;
}

.grammer {
    padding-top: 20px;
}

.grammer div {
    line-height: 1.75 !important;
}

#tipContent {
    margin-bottom: 20px;
}

.tip>div {
    line-height: 1.75;
}

.tip>div:first-child {
    padding-right: 5px;
}

.tip {
    margin-top: 20px;
    display: flex;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.wordBgGreen {
    background-color: #acff93;
    transition: .7s;
}

.wordBgWhite {
    background-color: #fff;
}

.grammerBoxColor>div {
    border-left: solid 3px #FFF;
    background-color: #ffeced;

}

#articleContainer {
    background-color: #fff;
    position: relative;
}

#explanation {
    margin: 16px auto 40px;
    background-color: #ffffec;
    border-radius: 10px;
    padding: 25px 20px 1px 20px;
    letter-spacing: 2px;
    line-height: 1.75;
}

.adjustContentTittle {
    width: 100%;
    max-width: 800px;
    padding-bottom: 10px;
}

#articleContent .adjustContentTittle {
    color: #2d939e;
    border-bottom: #2d939e 2px solid;
}

#grammerContent .adjustContentTittle {
    color: #9e2d4f;
    border-bottom: #9e2d4f 2px solid;
}

.adjustContantDetail {
    padding: 5px 20px 5px 20px;
    border-radius: 10px;
}

#articleContent .adjustContantDetail {
    background-color: #f1fdff;
}

.paragraph {
    margin: 10px 0px 20px 0px;
    padding-top: 10px;
}

#tipContent .adjustContentTittle {
    color: #2d9e49;
    border-bottom: #2d9e49 2px solid;
    margin-bottom: 30px;
}

#tipContent .adjustContantDetail {
    background-color: #f0fff2;
}

.wrapContent {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    margin-right: 5px;
}

.wrapContentBox2>div {
    width: 50%;
    padding-left: 10px;
    margin-bottom: .5rem;
}

.wrapContentBox4>div {
    width: 25%;
    padding: 0px 0px 0px 10px;
    margin-bottom: .5rem;
}

.wrapContentBox8>div {
    width: 12.5%;
    padding: 0px;
    text-align: center;
    margin-bottom: .5rem;
}

/* RWD */
@media (max-width: 991px) {
    .wrapContentBox2>div {
        width: 100%;
    }

    .wrapContentBox4>div {
        width: 50%;
    }

    .wrapContentBox8>div {
        width: 25%;
    }
}

#grammerContent .wrapContentTittle {
    color: #9e2d4f;
    margin-left: 15px;
    margin-bottom: .1rem;
}

#articleContent .wrapContentTittle {
    margin-left: 15px;
    color: #2d939e;
    margin-top: 35px;
}

.sentence {
    padding: 10px 5px;
}

.chineseMeaning {
    position: relative;
    padding: 10px 2px 15px 2px;
    line-height: 1.75;
}

.chineseMeaning p {
    margin-top: .5rem;
    margin-bottom: 0rem;
    padding-bottom: .75rem;
}

.hideChineseMeaning {
    position: absolute;
    width: 100.6%;
    height: 100%;
    left: -0.3%;
    background-color: #f1fdff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    border: #83d1da dashed 4px;
    color: #66b1ba;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

#articleTittle {
    max-width: 90%;
    margin: auto;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
}

.sentence>.row {
    padding-top: .85rem;
    padding-bottom: .75rem;
}

.sentence>div>div {
    padding: 0 4px;
    margin-bottom: .5rem;
}

#linkContent {
    margin-bottom: 20px;
}

#linkContent .adjustContentTittle {
    color: #9e692d;
    border-bottom: #9e692d 2px solid;
    margin-bottom: 30px;
}

#linkContent .adjustContantDetail {
    background-color: #fff2e6;
    margin-top: 20px;
}

#linkContent a {
    display: flex;
    text-decoration: none;
    color: #212529;
    width: fit-content;
    margin-top: .75rem;
    margin-bottom: .75rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    line-height: 1.5;
}

#linkContent a:hover {
    color: #684823;
}

#linkContent a span:nth-child(2) {
    margin-left: 10px;
}

@media (min-width: 720px) {
    body {
        padding-bottom: 30px;
    }
}

.tittleAd {
    width: 300px;
    height: 250px;
    margin: auto;
}

@media(min-width: 800px) {
    .tittleAd {
        width: 728px;
        height: 90px;
    }
}

#explanation p,
#explanation ul,
#explanation ol {
    margin-bottom: 2rem;
}

#explanation li,
#explanation .pForList {
    margin-bottom: 1rem;
}