:root {

    --color-primary: #011266;
    --color-secondary: #C72026;
    /* Bootstrap */
     --bs-body-bg: var(--color-primary);
     --bs-body-color: #fff;
    /* --bs-body-font-family: inherit; */
    /* --bs-body-font-size: inherit; */
    /* --bs-body-font-weight: inherit; */
    /* --bs-body-line-height: inherit; */
    /* --bs-font-sans-serif: inherit; */
    /* --bs-tooltip-bg: inherit; */
    /* --bs-tooltip-color: inherit; */

    /* Colours */
    /* --color-background: var(--color-primary);*/
    /* --color-black-1: inherit; */
    /* --color-black-2: inherit; */
    /* --color-primary: inherit; */
    /* --color-pulse: inherit; */
    /* --color-secondary: inherit; */

    /* --accordion-body-background: inherit; */
    /* --accordion-body-color: inherit; */
    /* --accordion-border-color: inherit; */
    /* --accordion-divide-color: inherit; */
    /* --accordion-header-background: inherit; */
    /* --accordion-header-color: inherit; */
    /* --accordion-item-background: inherit; */
    /* --accordion-toggle-background-color: inherit; */

    /* --account-bg: inherit; */
    /* --account-update-color: inherit; */

    /* --badge-info-border: inherit; */
    /* --badge-pill-border-radius: inherit; */
    /* --badge-pill-color: inherit; */
    /* --badge-pill-font-size: inherit; */
    /* --badge-pill-line-height: inherit; */
    /* --badge-pill-padding: inherit; */
    /* --badge-pill-vertical-align: inherit; */

    /* --banner-primary-background: inherit; */
    /* --banner-primary-color: inherit; */
    /* --banner-primary-font-size: inherit; */
    /* --banner-primary-font-weight: inherit; */
    /* --banner-primary-padding: inherit; */

    /* --breadcrumb-active-color: inherit; */
    /* --breadcrumb-color: inherit; */
    /* --breadcrumb-seperator-color: inherit; */

    /* --button-action-background-color: inherit; */
    /* --button-action-border-color: inherit; */
    /* --button-action-color: inherit; */
    /* --button-action-font-weight: inherit; */
    /* --button-action-hover-background-color: inherit; */
    /* --button-action-hover-border-color: inherit; */
    /* --button-action-hover-color: inherit; */
    /* --button-border-color: inherit; */
     --button-border-radius: 4px;
    /* --button-lg-border-radius: inherit; */
    /* --button-lg-padding: inherit; */
    /* --button-md-border-radius: inherit; */
    /* --button-md-padding: inherit; */
     --button-primary-background-color: var(--color-secondary);
     --button-primary-border-color: var(--color-secondary);
     --button-primary-color: #fff;
    /* --button-primary-font-weight: inherit; */
    /* --button-primary-hover-background-color: inherit; */
    /* --button-primary-hover-border-color: inherit; */
    /* --button-primary-hover-color: inherit; */
    /* --button-secondary-background-color: inherit; */
    /* --button-secondary-border-color: inherit; */
    /* --button-secondary-border-radius: inherit; */
    /* --button-secondary-color: inherit; */
    /* --button-secondary-font-weight: inherit; */
    /* --button-secondary-hover-background-color: inherit; */
    /* --button-secondary-hover-border-color: inherit; */
    /* --button-secondary-hover-color: inherit; */
    /* --button-sm-border-radius: inherit; */
    /* --button-sm-padding: inherit; */
     --button-submit-background-color: var(--color-secondary);
     --button-submit-border-color: var(--color-secondary);
     --button-submit-color: #fff;
    /* --button-submit-hover-background-color: inherit; */
    /* --button-submit-hover-border-color: inherit; */
    /* --button-submit-hover-color: inherit; */

    /* --card-primary-background-color: inherit; */
    /* --card-primary-background: inherit; */
     --card-primary-border: var(--color-secondary);
    /* --card-primary-hr-border-color: inherit; */
    /* --card-primary-padding: inherit; */
    /* --card-title-font-size: inherit; */

    /* --datepicker-cell-active-background-color: inherit; */
    /* --datepicker-cell-active-color: inherit; */
    /* --datepicker-cell-background-color: inherit; */
    /* --datepicker-cell-color: inherit; */
    /* --datepicker-cell-hover-background-color: inherit; */
    /* --datepicker-cell-hover-color: inherit; */
    /* --datepicker-cell-today-background-color: inherit; */
    /* --datepicker-dropdown-background-color: inherit; */

    /* --dropdown-item-active-background: inherit; */
    /* --dropdown-item-active-color: inherit; */
    /* --dropdown-item-active-hover-background: inherit; */
    /* --dropdown-item-active-hover-color: inherit; */
    /* --dropdown-item-background: inherit; */
    /* --dropdown-item-color: inherit; */
    /* --dropdown-item-hover-background: inherit; */
    /* --dropdown-item-hover-color: inherit; */
    /* --dropdown-menu-background: inherit; */
    /* --dropdown-menu-color: inherit; */

    /* --episode-stack-background-color: inherit; */
    /* --episode-stack-color: inherit; */

    /* --footer-background-color: inherit; */
    /* --footer-social-background-color: inherit; */
    /* --footer-social-border-radius: inherit; */
    /* --footer-social-border: inherit; */
    /* --footer-social-color: inherit; */

    /* --form-control-primary-background-color: inherit; */
    /* --form-control-primary-border-radius: inherit; */
    /* --form-control-primary-border: inherit; */
    /* --form-control-primary-color: inherit; */
    /* --form-select-background-image: inherit; */

    /* --header-background-gradient: inherit; */
    /* --header-nav-toggler-collapsed-color: inherit; */
    /* --header-nav-toggler-color: inherit; */
    /* --header-nav-toggler-open-color: inherit; */

    /* --hero-blur-background: inherit; */
    /* --hero-blur-box-shadow: inherit; */
    /* --hero-bottom-gradient-background: inherit; */
    /* --hero-bottom-nav-text-transform: inherit; */
    /* --hero-image-blur: inherit; */

    /* --img-placeholder: inherit; */
    /* --img-thumbnail-border-radius: inherit; */

    /* --mobile-nav-background: inherit; */
    /* --mobile-nav-color: inherit; */

    /* --modal-body-background-color: inherit; */
    /* --modal-body-border-bottom: inherit; */
    /* --modal-body-border-left: inherit; */
    /* --modal-body-border-radius: inherit; */
    /* --modal-body-border-right: inherit; */
    /* --modal-body-border-top: inherit; */
    /* --modal-body-border: inherit; */
    /* --modal-body-padding: inherit; */
    /* --modal-border-radius: inherit; */
    /* --modal-border: inherit; */
    /* --modal-footer-background-color: inherit; */
    /* --modal-footer-border-bottom: inherit; */
    /* --modal-footer-border-left: inherit; */
    /* --modal-footer-border-radius: inherit; */
    /* --modal-footer-border-right: inherit; */
    /* --modal-footer-border-top: inherit; */
    /* --modal-footer-padding: inherit; */

    /* --nav-active-border-bottom: inherit; */
    /* --nav-dropdown-menu-thumbnail-height: inherit; */
    /* --nav-dropdown-menu-thumbnail-width: inherit; */
    /* --nav-font-size: inherit; */
    /* --nav-font-weight: inherit; */
    /* --nav-hover-font-weight: inherit; */
    /* --nav-link-hover-color: inherit; */
    /* --nav-link-opacity: inherit; */
    /* --nav-search-color: inherit; */

    /* --play-icon-background: inherit; */
    /* --play-icon-border-radius: inherit; */
    /* --play-icon-border: inherit; */
    /* --play-icon-color: inherit; */
    /* --play-icon-height: inherit; */
    /* --play-icon-padding: inherit; */
    /* --play-icon-width: inherit; */

    /* --progress-background: inherit; */
    /* --progress-bar-background: inherit; */

    /* --pulse-background: inherit; */
    /* --pulse-box-shadow: inherit; */

    /* --section-background-color: inherit; */
    /* --section-border-color: inherit; */
    /* --section-title-border-color: inherit; */

    /* --slider-card-sub-margin-bottom: inherit; */
    /* --slider-more-link-color: inherit; */
    /* --slider-more-link-hover-color: inherit; */
    /* --slider-pagination-active-background-color: inherit; */
    /* --slider-pagination-background-color: inherit; */
    /* --slider-pagination-border-radius: inherit; */
    /* --slider-pagination-opacity: inherit; */

    /* --splide-arrow-fill: inherit; */
    /* --splide-default-margin-right: inherit; */
    /* --splide-hero-arrows-background: inherit; */
    /* --splide-hero-arrows-fill: inherit; */
    /* --splide-hero-margin-right: inherit; */
    /* --splide-portrait-margin-right: inherit; */
    /* --splide-track-padding-bottom: inherit; */

    /* --text-color: inherit; */
    /* --text-muted-color: inherit; */
    /* --text-secondary-color: inherit; */

    /* --thumbnail-border-radius: inherit; */
    /* --thumbnail-overlay-background: inherit; */

    /* --timeline-border-color: inherit; */
    /* --timeline-cell-active-background: inherit; */
    /* --timeline-cell-button-background: inherit; */
    /* --timeline-cell-button-color: inherit; */
    /* --timeline-cell-button-hover-background: inherit; */
    /* --timeline-cell-hover-background: inherit; */
    /* --timeline-cell-text-primary-color: inherit; */
    /* --timeline-cell-text-secondary-color: inherit; */
    /* --timeline-header-border-color: inherit; */
    /* --timeline-now-bar-display: inherit; */

    /* --toggle-dot-active-background: inherit; */
    /* --toggle-dot-background: inherit; */

    /* Misc */
    /* --page-title-line-color: inherit; */
    /* --highlight-color: inherit; */
    /* --live-now-color: inherit; */

    /* --notification-background: #fff; */
    /* --notification-color: #000; */
    /* --notification-border: solid 0px #fff; */
}

.form-control-primary {
    /*background-color: #fff !important;*/
    /*color: #000 !important;*/
}

.form-group-labelled label {
    color: rgba(0, 0, 0, 0.5) !important;
    font-size: 14px !important;
}

/*input:focus {*/
/*    color: #fff;*/
/*    border-color: #fff;*/
/*    box-shadow: 0 0 0 0.2rem rgba(199, 32, 38, 0.25);*/
/*}*/

.form-control:not(.form-control-primary):focus,
.form-control, .form-control:focus{
    --bs-body-bg: #fff !important;
    color: #000 !important;
    background-color: var(--bs-body-bg) !important;
}

.form-control-primary:hover {
    background-color: #fff !important;
    color: #000 !important;
}

#toggle-show-password {
    color: #000;
}

.card-img-top {
    height: 220px !important;
}

.rounded-all {
    border-radius: 1rem !important;
}

.presenter-card .bi-check-circle-fill {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 2;
}

/* Show the icon only when the card is selected */
.presenter-card img.selected + .bi-check-circle-fill,
.presenter-card img.selected ~ .bi-check-circle-fill {
    opacity: 1;
}

.show-card .bi-check-circle-fill {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 2;
}

/* Show the icon only when the card is selected */
.show-card img.selected + .bi-check-circle-fill,
.show-card img.selected ~ .bi-check-circle-fill {
    opacity: 1;
}

.topics-card .bi-check-circle-fill {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 2;
}

/* Show the icon only when the card is selected */
.topics-card img.selected + .bi-check-circle-fill,
.topics-card img.selected ~ .bi-check-circle-fill {
    opacity: 1;
}

.form .otc {
    color: #000;
}

.container-xs {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 400px) {
    .container-xs {
        max-width: 375px; /* You can adjust this as needed */
    }
}