#snk-info {
    line-height: 1.5;
}

#snk-info li {
    margin: 0.5rem 0;
}

#snk-info p{
    margin: 0.5rem 0;
}

#snk-info li.semibold::marker {
    font-weight: 500;
}

#snk-info .list-alpha{
    list-style-type: lower-alpha;
}
#snk-info .list-disc{
    list-style-type: disc;
}

#snk-info .list-circle{
    list-style-type: circle;
}

.pl-5{
    padding-left: calc(var(--spacing) * 5);
}

.custom-table-container{
    overflow-x: auto;
    margin: 1rem 0 1.5rem -2.5rem;
}
.custom-table {
    width: 100%;
    border-collapse: collapse; /* Merges borders into single lines */
    font-size: .85rem;
    background-color: white;
}

.custom-table th,
.custom-table td {
    border: 1px solid #cbd5e1; /* slate-300 */
    padding: 8px 16px;
    text-align: left;
}

.custom-table thead {
    background-color: #012f2c; /* slate-50 */
}

.custom-table th {
    font-weight: 600;
    color: white; /* slate-900 */
    text-align: center;
}

.custom-table tbody tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Hover Effect */
.custom-table tbody tr:hover {
    background-color: #f1f5f9; /* slate-100 */
    transition: background-color 0.2s ease;
}

.bg-gray-300{
    background-color: oklch(87.2% 0.01 258.338);
}
.border-gray-700{
    border-color: oklch(37.3% 0.034 259.733);
}

.input-answer {
    padding: 0.5em 1em !important;
    border: none;
    margin: 1rem auto 1rem auto;
    width: 70%;
    display: block;
    border-radius: 6px;
    box-shadow: inset 1px 1px 4px 0px #22222259;
    background-color: white !important;
    color: black;
    font-family: 'ooredoo-heavy', sans-serif;
    font-size: 1.6rem;
    line-height: 1.2;
}

.input-answer:focus {
    border: none;
    box-shadow: inset 1px 1px 4px 0px rgba(240, 226, 255, 0.89);
}

.q-square {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.q-item {
    flex: 0 30%;
    height: 3em;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 1px 1px 3px 2px #00000017;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 500;
}

.qs-content {
    font-size: 1.6em;
}

.has-input{
    font-weight: bold;
}

.btn-input{
    background-image: linear-gradient(101deg, #FFFDB8, #71FFFF);
}

.loading-wrap{
    background: #000000B3;
}
.loading{
    width: 5rem;
    color: #5FD9D0;
    pointer-events: none;
    display: inline-block;
    aspect-ratio: 1 / 1;
    background-color: currentColor;
    -webkit-mask-size: 100%;
    mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.loading-dots {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E");
}