.sqc-top, .sqc-center,  .sqc-bottom {
    max-width: 880px;
    margin: auto;
}

.sqc-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    font-family: 'Jost';
    font-weight: 500;
    color: var(--text-color);
}

.sqc-circles {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sqc-circles ol {
    display: flex;
    gap: 4px;
    list-style-type: none;
    font-size: 13px;
}

.sqc-circles li {
    width: 26px;
    height: 26px;
    border: 1px dashed var(--bg-color-s-light);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.sqc-circles li.current {
    border: 1px solid var(--text-color);
    border-style:solid !important;
}

.sqc-circles li.ig {
    border: 1px dashed var(--text-color);
    background-color: #a8a8a845;
    color: var(--text-color);
}

.sqc-circles li.c {
    border: 1px dashed #00c571;
    background-color: #00c57117;
    color: #00c571;
}

.sqc-circles li.w {
    border: 1px dashed #ff375d;
    background-color: #ff375d17;
    color: #ff375d;
}

.sqc-inner-content {
    margin: 40px 0;
}

.sqc-question {
    background-color: var(--bg-color-light);
    padding: 15px;
    font-size: 16px;
    color: var(--text-color);
    border-radius: 10px;
}

.sqc-explanation {
    border: 1px dashed #8080803b;
    padding: 15px;
    font-size: 15px;
    color: var(--text-color);
    border-radius: 10px;
    overflow: hidden;
    display:none;
}

.sqc-explanation.act-wro, .sqc-explanation.act-cor {
    display:block;
}

.sqc-explanation.act-cor h3.wro-label,
.sqc-explanation.act-wro h3.cor-label{
    display:none;
}

.sqc-explanation h3 {
    margin: 0;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: -16px;
}

.sqc-explanation h3.wro-label {
    color: #ff375d;
}
.sqc-explanation h3.cor-label{
    color:#00c571;
}

.sqc-explanation h3::before {
    content: "";
    width: 5px;
    height: 14px;
    display: block;
    background-color: #ff375d;
    border-radius: 3px;
    box-shadow: 10px 0px 20px 20px #ff375d47;
}
.sqc-explanation h3.wro-label::before {
    background-color: #ff375d;
    box-shadow: 10px 0px 20px 20px #ff375d47;
}

.sqc-explanation h3.cor-label::before {
    background-color: #00c571;
    box-shadow: 10px 0px 20px 20px #00c57138;
}

.sqc-inner-content te {
    color: #E91E63;
    cursor: pointer;
}

.over-window .sqc-tran, .over-window.translated .sqc-org{
    display:none;
}
.over-window.translated .sqc-tran{
    display:block !important;
}

.sqc-inner-content .sqc-options {
    display: flex;
    padding: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.sqc-inner-content.answered .sqc-options::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    cursor: not-allowed;
    z-index:1;
}

.sqc-inner-content .s-option {
    color: var(--text-color) ;
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    line-height: 20px;
}

.sqc-inner-content .s-option .checkbox {
    min-width: 20px;
    max-height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--text-color);
}

.sqc-inner-content .s-option.correct .checkbox{
    background-color: #00c57117;
    border-color: #00c571;
}
.sqc-inner-content .s-option.correct .checkbox path{
    stroke: #00c571;
}

.sqc-inner-content .s-option.wrong .checkbox{
    background-color: #ff375d17;
    border-color: #ff375d;
}
.sqc-inner-content .s-option.wrong .checkbox path{
    stroke: #ff375d;
}

.sqc-inner-content .s-option .checkbox svg{
    opacity: 0;
}

.sqc-inner-content .s-option.active .checkbox svg{
    opacity: 1;
}

.sqc-inner-content .s-option .checkbox svg path{
    stroke: var(--text-color);
}

.sqc-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.sqc-pagination .prev svg path, .sqc-pagination .next svg{
    fill: var(--text-color);
}

.sqc-pagination.first-item .prev,
.sqc-pagination.last-item .next.n-enabled,
.sqc-pagination .next .s-complete {
    display: none;
}
.sqc-pagination .prev, .sqc-pagination .next {
    color: var(--text-color);
    display: inline-flex;
    background-color: var(--bg-color-light);
    gap: 10px;
    min-width: 130px;
    min-height: 36px;
    border-radius: 30px;
    align-items: center;
    justify-content: flex-start;
    cursor:pointer;
    user-select: none;
}
.sqc-pagination .next .s-next,
.sqc-pagination .next .s-check,
.sqc-pagination .next.v-enabled .s-skip, 
.sqc-pagination .next.v-enabled .s-next,
.sqc-pagination .next.n-enabled .s-skip,
.sqc-pagination .next.d-enabled .s-skip,
.sqc-pagination .next.n-enabled .s-check{
    display: none;
}
.sqc-pagination .next.n-enabled .s-next,
.sqc-pagination .next.v-enabled .s-check,
.sqc-pagination .next.d-enabled .s-complete{
    display:block !important;
}

.sqc-pagination .next.d-enabled {
    padding: 0 16px;
    color: #00c571;
    background-color: #00ff921c;
    font-size: 15px;
}

.sqc-pagination .next.v-enabled, 
.sqc-pagination .next.n-enabled{
    background-color: #FF9800;
    color:#fff !important;
}
.sqc-pagination .next.n-enabled svg{
    background-color: #e18600;
    fill:#fff !important;
}
.sqc-pagination .next.v-enabled svg,
.sqc-pagination .next.d-enabled svg{
    display:none;
}
.sqc-pagination .next.v-enabled .s-check, .sqc-pagination .next .s-complete{
    margin:0;
}

.sqc-pagination .prev svg, .sqc-pagination .next svg {
    background-color: var(--bg-color-s-light);
    width: 36px;
    aspect-ratio: 1;
    padding: 11px;
    border-radius: 30px;
}

.sqc-pagination .next svg {
    transform: rotate(180deg);
}

.sqc-pagination .prev span.s-prev{
    flex-grow: 1;
    text-align: center;
    margin-right: 20px;
}

.sqc-pagination .next span{
    flex-grow: 1;
    text-align: center;
    margin-left: 20px;
}