h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--bcot-opp-text) !important;
}

a {
    text-decoration: none !important;
}

a.text-dark:hover,
a.text-dark:focus {
    color: var(--bcot-secondary) !important;
}

.bg-primary,
.btn-primary,
.badge-primary {
    background-color: var(--bcot-primary) !important;
    color: var(--bcot-light-text) !important;
}

.bg-secondary,
.btn-secondary,
.badge-secondary {
    background-color: var(--bcot-secondary) !important;
    color: var(--bcot-light-text) !important;
}

.bg-success,
.btn-success,
.badge-success {
    background-color: var(--bcot-success) !important;
    color: var(--bcot-light-text) !important;
}

.bg-danger,
.btn-danger,
.badge-danger {
    background-color: var(--bcot-danger) !important;
    color: var(--bcot-light-text) !important;
}

.bg-warning,
.btn-warning,
.badge-warning {
    background-color: var(--bcot-warning) !important;
    color: var(--bcot-opp-text) !important;
}

.bg-info,
.btn-info,
.badge-info {
    background-color: var(--bcot-info) !important;
    color: var(--bcot-light-text) !important;
}

.bg-light,
.btn-light,
.badge-light {
    background-color: var(--bcot-light) !important;
    color: var(--bcot-dark) !important;
}

.bg-dark,
.btn-dark,
.badge-dark {
    background-color: var(--bcot-dark) !important;
    color: var(--bcot-light-text) !important;
}

.bg-lightpurple,
.btn-lightpurple,
.badge-lightpurple {
    background-color: var(--bcot-lightpurple) !important;
    color: var(--bcot-light-text) !important;
}

.bg-darkblue,
.btn-darkblue,
.badge-darkblue {
    background-color: var(--bcot-darkblue) !important;
    color: var(--bcot-light-text) !important;
}

/* Dark Mode - Darker
   Main Theme - Lighter
*/
.bg-opp,
.btn-opp,
.badge-opp {
    background-color: var(--bcot-opp-background) !important;
    color: var(--bcot-opp-text) !important;
}

/* Dark Mode - Lighter Dark
   Main Theme - Lighter
*/
.bg-opp-light,
.btn-opp-light,
.badge-opp-light {
    background-color: var(--bcot-opp-light-background) !important;
    color: var(--bcot-opp-text) !important;
}

.btn-primary:hover { background-color: var(--bcot-primary-hover) !important; }
.btn-secondary:hover { background-color: var(--bcot-secondary-hover) !important; }
.btn-success:hover { background-color: var(--bcot-success-hover) !important; }
.btn-danger:hover { background-color: var(--bcot-danger-hover) !important; }
.btn-warning:hover { background-color: var(--bcot-warning-hover) !important; }
.btn-info:hover { background-color: var(--bcot-info-hover) !important; }
.btn-dark:hover { background-color: var(--bcot-dark-hover) !important; }
.btn-light:hover { background-color: var(--bcot-light-hover) !important; }
.btn-lightpurple:hover { background-color: var(--bcot-lightpurple-hover) !important; }
.btn-darkblue:hover { background-color: var(--bcot-darkblue-hover) !important; }
.btn-opp:hover { background-color: var(--bcot-opp-hover) !important; }
.btn-opp-light:hover { background-color: var(--bcot-opp-light-hover) !important; }

.border-primary { border-color: var(--bcot-primary); }
.border-secondary { border-color: var(--bcot-secondary); }
.border-success { border-color: var(--bcot-success); }
.border-danger { border-color: var(--bcot-danger); }
.border-warning { border-color: var(--bcot-warning); }
.border-info { border-color: var(--bcot-info); }
.border-dark { border-color: var(--bcot-dark); }
.border-lightpurple { border-color: var(--bcot-lightpurple); }
.border-opp { border-color: var(--bcot-opp-background) !important; }
.border-opp-light { border-color: var(--bcot-opp-light-background) !important; }

.alert-primary {
    background-color: var(--bcot-alert-primary) !important;
    border-color: var(--bcot-alert-primary-border) !important;
    color: var(--bcot-alert-primary-color) !important;
}

.alert-secondary {
    background-color: var(--bcot-alert-secondary) !important;
    border-color: var(--bcot-alert-secondary-border) !important;
    color: var(--bcot-alert-secondary-color) !important;
}

.alert-success {
    background-color: var(--bcot-alert-success) !important;
    border-color: var(--bcot-alert-success-border) !important;
    color: var(--bcot-alert-success-color) !important;
}

.alert-danger {
    background-color: var(--bcot-alert-danger) !important;
    border-color: var(--bcot-alert-danger-border) !important;
    color: var(--bcot-alert-danger-color) !important;
}

.alert-warning {
    background-color: var(--bcot-alert-warning) !important;
    border-color: var(--bcot-alert-warning-border) !important;
    color: var(--bcot-alert-warning-color) !important;
}

.alert-info {
    background-color: var(--bcot-alert-info) !important;
    border-color: var(--bcot-alert-info-border) !important;
    color: var(--bcot-alert-info-color) !important;
}

.alert-light {
    background-color: var(--bcot-alert-light) !important;
    border-color: var(--bcot-alert-light-border) !important;
    color: var(--bcot-alert-light-color) !important;
}

.alert-dark {
    background-color: var(--bcot-alert-dark) !important;
    border-color: var(--bcot-alert-dark-border) !important;
    color: var(--bcot-alert-dark-color) !important;
}

.text-primary {
    color: var(--bcot-primary) !important;
}

.text-info {
    color: var(--bcot-info) !important;
}

.text-secondary {
    color: var(--bcot-secondary) !important;
}

.text-success {
    color: var(--bcot-success) !important;
}

.text-danger {
    color: var(--bcot-danger) !important;
}

.text-warning {
    color: var(--bcot-warning) !important;
}

.text-dark {
    color: var(--bcot-dark) !important;
}

.text-light {
    color: var(--bcot-light-text) !important;
}

hr {
    border-top: 1px solid var(--bcot-opp-text) !important;
}

.btn-outline-secondary {
    color: var(--bcot-opp-text) !important;
}

/* Addition to bootstrap colours */
.bg-purple {
    background-color: #631d76 !important;
}

/* Addition to bootstrap colours */
.bg-darkBlue {
    background-color: #002c77 !important;
}

.bg-lightYellow {
    background-color: lightyellow !important;
}

.bg-lightGray {
    background-color: lightgray !important;
}

.bg-lightOpaque5 {
    background-color: rgba(255, 255, 255, 0.5);
}

.bg-amber {
    background-color: #e37222 !important;
}

.border-purple {
  border-color: #631d76 !important;
}

.text-purple {
  color: #631d76 !important;
}

.badge {
    white-space: normal;
}

.nav-tabs .nav-link.active {
    background-color: var(--bcot-opp-light-background) !important;
    color: var(--bcot-opp-text) !important;
}

/*
    Set carousel item height in the Assignment card
    Unequal height of the carousel items will cause the next/prev button to misalign
*/
.card .carousel-item {
    height: 90px;
}

/*
    Set carousel prev/next background and size
    Set smaller width to fit in
*/
.card .carousel-control-prev,
.card .carousel-control-next {
    background-color: transparent;
    width: 8%;
}

/* 99% width */
.w-99 {
    width: 99% !important;
}

/* This is used when form-control class is used on checkboxes */
.form-control-none {
    background-color: none !important;
    border: 1px solid transparent !important;
}

.form-control {
    background-color: var(--bcot-light);
    height: calc(2.25rem + 2px);
}

.form-control:focus {
    background-color: var(--bcot-light-text);
}

.form-select {
    height: calc(2.25rem + 2px);
}

/* Set modal to be on top of everything */
.modal {
    z-index: 1130 !important;
}

.modal-content {
    background-color: var(--bcot-opp-light-background) !important;
}

.cursor-default {
    cursor: default !important;
}

.hover-primary:hover {
    background-color: #007bff !important;
}

.hover-secondary:hover {
    background-color: #6c757d !important;
}

.hover-success:hover {
    background-color: #28a745 !important;
}

.hover-danger:hover {
    background-color: #dc3545 !important;
}

.hover-warning:hover {
    background-color: #6c757d !important;
}

.hover-info:hover {
    background-color: #17a2b8 !important;
}

.hover-dark:hover{
    background-color: #343a40 !important;
}

.hover-lightblue:hover {
    background-color: lightblue !important;
}

.availability {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
}

.text-xs {
    font-size: 40% !important;
}

.text-sm {
    font-size: 85% !important;
}

.text-md {
    font-size: 110% !important;
}

.text-lg {
    font-size: 130% !important;
}

.close {
    color: var(--bcot-opp-text) !important;
}

/* Pop Over */
.popover {
    background-color: var(--bcot-opp) !important;
    color: var(--bcot-opp-text) !important;
    border-radius: 5px;
}

.popover-header {
    background-color: var(--bcot-light) !important;
    color: var(--bcot-opp-text) !important;
}

.popover-body {
    background-color: var(--bcot-opp-light-background) !important;
    color: var(--bcot-opp-text) !important;
}

.bs-popover-right .arrow::after {
    border-right-color: var(--bcot-opp-light-background) !important;
}

/* List Group and jumbotron */
.list-group-item, .jumbotron {
    background-color: var(--bcot-opp-light-background) !important;
    color: var(--bcot-opp-text) !important;
}

/*
    Temporary fix of an issue where popup is greyed out when in mobile mode
    Also fix an issue where the pop up appears at the bottom of the mobile screen
*/
@media (max-width: 992px) {
    .card-columns {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .modal-backdrop {
        position: relative !important;
    }

    .modal-dialog-centered {
        align-items: flex-start;
    }

    .card-columns {
        column-count: 1;
    }
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
}

body::before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--bcot-background-url);
}

/* Card Column */
.column-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.column-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.column-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

/* Dropdown toggle */
.bootstrap-select>.dropdown-toggle {
    border: 1px solid lightgray;
}

/* Full Calendar */
/* Display end time when the event is less than an hour */
.fc-time-grid-event.fc-short .fc-time span {
    display: inline-block !important;
}

.fc-time-grid-event.fc-short .fc-time:before {
    content: attr(nodata) !important;
}

.fc-time-grid-event.fc-short .fc-time:after {
    content: ' - ' !important;
}

.fc-timegrid-event .fc-event-main {
    padding: 0px 0px 0px 1px;
}

.fc-timegrid-event .fc-event-time {
    margin-bottom: 0px;
}

.fc-event-title {
    line-height: 1.3;
    font-size: 0.85em;
}

/* Change full calendar today's color */
.fc-day-today {
    background-color: var(--bcot-calendar-today) !important;
}

/* Width */
@media (min-width: 768px) {
    .w-md-50 {
        width: 50% !important;
    }

    .w-md-33 {
        width: 33% !important;
    }

    .w-md-25 {
        width: 25% !important;
    }
}

@media (min-width: 1200px) {
    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-25 {
        width: 25% !important;
    }
}

/* By default, textarea has the same height as input */
textarea {
    height: 100px !important;
}

.form-check td input {
    --bs-form-check-bg: var(--bs-body-bg);
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-form-check-bg);
    background-image: var(--bs-form-check-bg-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.form-check td input:checked[type=radio] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check td input[type=radio] {
    border-radius: 50%;
    margin-right: 0.5em;
    border-color: darkgray;
}

.form-check td {
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: .125em;
}