:root {
    --b-bar-horizontal-height: 60px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.pre-loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .pre-loading-progress circle {
        fill: none;
        stroke: #a07b24;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .pre-loading-progress circle:last-child {
            stroke: #003b77;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.pre-loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .pre-loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

.training-watermark {
    background: url("../_content/Client.UI.Shared/images/training-watermark.png") repeat !important;
}

/* Generally buttons don't always have margins which can look a little strange if they're right next to, or on top off, each other - need a little margin all around */
.btn {
    margin: 1px;
}

/* Smaller blue labels/captions on forms */
label.form-label {
    font-size: small;
    color: blue;
    margin-bottom: 0;
}

/* Reduce the margin between form groups */
div.form-group {
    margin-bottom: 0;
}

/* Ensure that Rich Text Editors look more like other fields, including focus being shown */
div.rte-editor {
    border-radius: 2px;
}

    div.rte-editor:focus-within {
        color: #212529;
        background-color: #fff;
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
    }

div.rte-toolbar {
    border: none !important;
}

/* Change colour of Field label to denote it is a required field. */
label.waec-required-field {
    font-weight: bold;
}

    /* Add an asterisk after the Field label to denote it is a required field. */
    label.waec-required-field:after {
        content: '*';
        color: red;
    }


/* Better responsive formatting of videos and images embedded in the Quill Editor and help content */
iframe.ql-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

iframe.ql-video-4-3 {
    aspect-ratio: 4 / 3;
    width: 100%;
}

.help-content img {
    max-width: 100%;
}


/* Better formatting in the Quill Editor for the Basic format - so that when you're editing the text  */
.ql-format-Basic p {
    margin: 5px 0px 0px 0px !important;
    font-family: Arial;
    font-size: 14pt;
}

/* formatting for the free from contacts on the profile page */
div.profile-contacts {
    font-family: Arial;
    font-size: 14pt;
}