:root {
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    font-family: "Roboto";
}

.pp-theme.light .bg-white {
    background: var(--color-b\&w-white);
}

.pp-theme.dark .bg-surface-background-dark {
    background: var(--color-surface-dark-background-d);
}

.pp-theme.light .c-gray-700 {
    color: var(--color-isaca-gray-700);
}

.pp-theme.light .c-gray-900 {
    color: var(--color-isaca-gray-900);
}

.pp-theme.dark .c-gray-50 {
    color: var(--color-isaca-gray-50);
}

.pp-theme.dark .c-white {
    color: var(--color-b\&w-white);
}

.pp-theme.dark .c-igray-50 {
    color: var(--color-isaca-gray-50);
}

.pp-theme.dark .c-igray-200 {
    color: var(--color-isaca-gray-200);
}

.pp-theme.dark .c-igray-300 {
    color: var(--color-isaca-gray-300);
}

.pp-theme.light .bg-white-a60 {
    --alpha: 60%;
    background: color-mix(in srgb, var(--color-b\&w-white) var(--alpha), transparent);
}

.pp-theme.dark .bg-gray-800-a80 {
    --alpha: 80%;
    background: color-mix(in srgb, var(--color-isaca-gray-800) var(--alpha), transparent);
}

.pp-theme.dark .bc-igray-500 {
    border-color: var(--color-isaca-gray-500);
}

.pp-theme.dark .bc-igray-300 {
    border-color: var(--color-isaca-gray-300);
}

.pp-theme.dark .bg-igray-100 {
    background: var(--color-isaca-gray-100);
}

.pp-theme.light .bg-igray-300 {
    background: var(--color-isaca-gray-300);
}

.pp-theme.dark .bg-igray-500 {
    background: var(--color-isaca-gray-500);
}

.pp-theme.dark .bg-purple-600 {
    background: var(--color-secondary-purple-600);
}

.pp-theme.dark .bg-orange-600 {
    background: var(--color-tertiary-orange-600);
}

.pp-theme.dark .quiz-track {
    stroke: var(--color-isaca-gray-500);
}
.pp-theme.light .quiz-track {
    stroke: var(--color-isaca-gray-300);
}

.pp-theme.dark .fill-igray-600 {
    fill: var(--color-isaca-gray-600);
}

.pp-theme.dark .fill-igray-300 {
    fill: var(--color-isaca-gray-300);
}

.pp-theme.dark .c-orange-500 {
    color: var(--color-tertiary-orange-500);
}

.pp-theme.dark .c-igray-50 {
    color: var(--color-isaca-gray-50);
}

.pp-theme.dark .button-secondary {    
    border-color: var(--color-isaca-gray-300);
    color: var(--color-isaca-gray-300);
}

.pp-theme.dark .button-secondary:hover {    
    border-color: var(--color-product-button-blue-500);
    color: var(--color-product-button-blue-500);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.20);
}

.pp-theme.dark .scrollable::-webkit-scrollbar {
    width: 8px;
    background: transparent;
}

.pp-theme.dark .scrollable::-webkit-scrollbar-thumb {
    background: var(--color-product-button-blue-500);
    border-radius:var(--radius-sm);
    border: 2px solid transparent;
}

.pp-theme.dark .scrollable::-webkit-scrollbar-track {
    background: var(--color-surface-dark-background-d);
    border-radius: var(--radius-sm);
}

.header-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-16);
}

.preheader {
    align-self: stretch;
    font-size: var(--Header-H6-Font-Size, 1.375rem);
    font-style: normal;
    font-weight: 700;
    line-height: var(--line-height-header-h6);
}

.header-title {
    align-self: stretch;
    font-size: var(--font-size-header-h1);
    font-style: normal;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-header-h1);
    margin: 0;
    font-family: "Roboto";
}

.header-container p.header-description {
    color: var(--color-isaca-gray-200);
    font-size: var(--font-size-body-lg);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-md);
    margin: 0;
}

.pp-theme.dark .retake-btn {
    --slds-c-button-neutral-color-background: var(--color-surface-dark-background-d);
    --slds-c-button-neutral-color-border: var(--color-isaca-gray-300);
    --slds-c-button-neutral-text-color: var(--color-isaca-gray-300);
    --slds-c-button-text-color: var(--color-isaca-gray-300);
}

.pp-theme.light .retake-btn {
    --slds-c-button-neutral-color-background: var(--color-b\&w-white);
    --slds-c-button-neutral-color-border: var(--color-isaca-gray-600);
    --slds-c-button-neutral-text-color: var(--color-isaca-gray-600);
    --slds-c-button-text-color: var(--color-isaca-gray-600);
}