.article-sidebar .wsc-icon.wsc-icon-sm{height: .8rem;}
.text-gray-2 { color: #636363 !important; }
a.text-gray-2:hover { color: #3A14C0 !important; }
.article-nav-title::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    left: -1.5rem;
    background: #5E37EA;
}
#accordionTop [data-parent="#accordionTop"] a,
#accordionBottom [data-parent="#accordionBottom"] a  {
    color: #636363 !important;
}
#accordionTop [data-parent="#accordionTop"] a:hover,
#accordionBottom [data-parent="#accordionBottom"] a:hover {
    color: #7B57EE !important;
}
#accordionTop .subtitle.active:not(.collapsed), #accordionBottom .subtitle.active:not(.collapsed) { color: #7B57EE; }
#accordionTop .subtitle.active:not(.collapsed) i, #accordionBottom .subtitle.active:not(.collapsed) i { transform: rotate(90deg); transition: .2s; }
.article-author, .article-content { padding-left: 3.625rem; padding-right: 3.625rem; }
.article-content { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.article-author { border-bottom: 1px solid #F8F8F8; }
.comment { padding: 3.25rem 4.375rem 4.125rem 4.375rem; }
#starLook .wsc-icon [class^=wsc-svg],
#starLook i { height: 1rem; color: #fed022; vertical-align: middle;}
.article-content p { margin-bottom: 1.875rem; }
.article-content .article-bg { background: #F9F9FF; padding: 2rem; margin-bottom: 1.875rem; }
.article-content .article-bg:nth-of-type(1) { border-left: 2px solid #7B57EE; padding: 1.5rem; }
.article-content .article-bg ul { list-style: none; margin-bottom: 0; padding-left: 0; color: #7B58EE; }
.article-content .article-bg ul li { padding-bottom: 1.5rem; }
.article-content .article-bg ul li:last-of-type { padding-bottom: 0; }
.article-content h1 { font-size: 2.25rem; font-weight: 500; margin-bottom: 1.875rem;}
.article-content h2, .article-content .steps { font-size: 1.5rem; font-weight: 500; margin-bottom: 1.875rem;}
.article-content .steps{display: flex; align-items: center;}
.article-content .steps span { background: #7B57EE; border-radius: 3px; padding: 0.375rem 0.625rem; font-size: 0.75rem; font-weight: normal; color: #fff; margin-right: 0.625rem; flex-shrink: 0;}
.article-content img { margin-bottom: 1.875rem; max-width: 100%; height: auto; }
.article-content .article-bg.reminder div { font-weight: 500; color: #7B57EE; margin-bottom: 0.75rem; }
.article-content .article-bg.reminder img { margin-right: .5rem; margin-bottom: 0; vertical-align: bottom; }
.article-content .article-bg.reminder p { margin-bottom: 0; }
.article-content table { border: 1px solid #CDCDFF; width: 100%; table-layout: fixed; margin-bottom: 2rem; }
.article-content table thead tr th { padding: 1.5rem; vertical-align: middle; text-align: center; background: #CDCDFF; border-right: 1px solid #FFFFFF; }
.article-content table thead tr th:last-of-type { border-right: 0; }
.article-content table tbody tr td { padding: 0.75rem; vertical-align: middle; text-align: center; }
.article-content table tbody tr:nth-child(even) td { background: rgba(205, 205, 255, .2); }
.article-content .next-article{display: flex;justify-content: flex-end;}
.hot-article { border: 1px solid #F5F5F5; margin-bottom: 1.875rem; }
.hot-article-title { border-bottom: 1px solid rgba(135, 137, 151, .2); padding: 2rem 0 2rem 3.625rem; }
.hot-article-title h4 { position: relative; margin: 0; }
.hot-article-title h4::after { content: ''; position: absolute; width: 3px; height: 100%; background: #7B57EE; left: -3.625rem;}
.hot-article-content { padding: 1.5rem 3.625rem; }
.hot-article-content div { padding: 1rem 0; }
.hot-article-content div a { font-size: 1.125rem; font-weight: 500; color: #000; }
.hot-article-content div a:hover { color: #7B57EE; }
.hot-article-content div p { margin: 0.5rem 0 0 0; font-size: 0.875rem; color: #636363; }
@media (max-width: 1200px) {
    .article-content table thead tr th { padding: .75rem 0; }
    .article-content table tbody tr td { padding: .5rem 0; }
    .hot-article-content { padding: 1.5rem; }
}
@media (max-width: 1200px) {
    .article-author, .article-content { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (max-width: 768px) {
    .article-nav-title::after {
    content: '+';
    position: absolute;
    right: 5%;
    font-size: 1.5625rem;
    top: -6px;
    color: #0d0752;
    transition: .5s;
    }
    .article-nav-title.spin::after {
    transform: rotate(45deg);
    }
}
@media (max-width: 576px) {
    h1 { font-size: 2.5rem !important; }
    section:nth-of-type(1) .container li { justify-content: center; }
}