html {
    height: 100%;
}

body {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

h1:focus {
    outline: none;
}

.required {
    color: crimson;
}

.list-group, .list-group-item {
    border: none !important;
    border-radius: 0 !important;
}


.option-item:hover,
.option-item.active,
.option-item.correct,
.option-item.incorrect {
    border-radius: 10px !important; /* Adjust the value as needed */
}


.option-item {
    transition: all 0.1s ease-in-out;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    border: 2px solid transparent !important;
    /* Set a transparent border for the normal state */
    line-height: 2;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
}

    .option-item:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border: 2px solid rgba(0, 0, 0, 0.1);
    }

    .option-item.active {
        color: initial !important;
        background-color: #e6f7ff !important;
        border: 2px solid #00aaff !important; /* Only change the border color */
        box-shadow: 0 0 3px #00aaff !important; /* Adjust if necessary */
    }

    .option-item.correct {
        background-color: #28a745; /* Green for correct */
        border-color: #28a745;
        color: white;
    }

    .option-item.incorrect {
        background-color: #dc3545; /* Red for incorrect */
        border-color: #dc3545;
        color: white;
    }


main > .container {
    padding: 100px 15px 0;
}


.list-group-item {
    margin-bottom: 15px; /* Adjust the value as needed */
}


.related-info p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Custom style for the radio button itself (outer circle) */
input[type="radio"] {
    -webkit-appearance: none; /* for Safari */
    -moz-appearance: none; /* for Firefox */
    appearance: none; /* Removes default browser styling */
    width: 14px;
    height: 14px;
    transform: scale(1.5); /* Increase the size of the button */
    border: 1px solid #000; /* Default Border color of the outer circle */
    border-radius: 50%; /* Makes it circular */
    background-color: #fff; /* Background color of the outer circle */
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer; /* To indicate that the element is clickable */
    outline: none; /* Removes the default focus outline */
    margin: 10px; /* Provide some spacing around the radio button */
}

    /* Blue border for the checked radio button */
    input[type="radio"]:checked {
        border-color: #00aaff; /* Blue border color for the outer circle when checked */
    }

        /* Inner circle when radio button is checked */
        input[type="radio"]:checked::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 7px; /* Size of inner circle, should be half of the outer circle's size to fit inside when scaled */
            height: 7px;
            background-color: #00aaff; /* Blue color of the inner circle when checked */
            border-radius: 50%; /* Makes it circular */
            transform: translate(-50%, -50%); /* Center the inner circle */
        }



/* Custom button styles */
.btn-custom {
    background-color: #e6f7ff; /* Light blue background */
    border-color: #00aaff; /* Blue border */
    color: #007bff; /* Choose a color that ensures text is readable on light blue background */
}

    .btn-custom:hover, .btn-custom:focus {
        background-color: #00aaff; /* Blue background on hover/focus */
        border-color: #007bff; /* Slightly darker blue border for a subtle effect */
        color: #ffffff; /* White text color on hover/focus for better readability */
    }

    /* Optional: Custom styles for other states like active or disabled */
    .btn-custom:active {
        background-color: #0088cc; /* Even darker blue for active state */
        border-color: #005577;
    }

    .btn-custom:disabled {
        background-color: #b3d7ff; /* Lighter blue for disabled state */
        border-color: #7cabd6;
    }


/* Custom Progress Bar Color */
.progress-bar-custom {
    background-color: #007bff; /* Your desired color */
}


/* Blazor Server */



.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}