:root {
    --ha-colour-1: #D81D64 ; 
    --ha-colour-2: #BC1B5C ;
    --ha-colour-3: rgba(188, 27, 92, 0.5) ;
    --ha-colour-4: #83F0F8 ;
    --ha-colour-5: #2BE5F3 ;
    --ha-colour-6: rgba(43, 229, 243, 0.5) ;
    --ha-colour-7: #141E44 ;
    --ha-colour-8: #F3F5F5 ;
    --ha-colour-9: #FFFFFF ;
    --ha-colour-10: #F3F5F5 ;
    --ha-colour-11: #C0C0BF ;
}
:root {
    --ha-colour-primary: var(--ha-colour-1) ;
    --ha-colour-primary-hover: var(--ha-colour-2) ;
    --ha-colour-primary-focus: var(--ha-colour-3) ;
    --ha-colour-primary-text: var(--ha-colour-9) ;
    --ha-colour-secondary: var(--ha-colour-4) ;
    --ha-colour-secondary-hover: var(--ha-colour-5) ;
    --ha-colour-secondary-focus: var(--ha-colour-6) ;
    --ha-colour-secondary-text: var(--ha-colour-7) ;
    --ha-colour-secondary-text-hover: var(--ha-colour-7) ;
    --ha-colour-app-bg: var(--ha-colour-7) ;
    --ha-colour-text: var(--ha-colour-7) ;
    --ha-colour-btn-text: var(--ha-colour-9) ;
    --ha-colour-app-main-bg: var(--ha-colour-9) ;
    --ha-colour-app-main-alt-bg: var(--ha-colour-8) ;
    --ha-colour-border: var(--ha-colour-11) ;
    --ha-colour-app-title: var(--ha-colour-9) ;
    --ha-colour-nav-link: var(--ha-colour-primary) ;
    --ha-colour-menu-close-bg: var(--ha-colour-9) ;
    --ha-colour-app-main-border: transparent ;
    --ha-colour-app-form-field-bg: var(--ha-colour-10) ;
    --ha-colour-app-form-field-text: var(--ha-colour-7) ;
    --ha-colour-question-hover: var(--ha-colour-8) ;
}
:root{
    --bs-primary: var(--ha-colour-primary) ;
    --bs-secondary: var(--ha-colour-secondary) ;
    --bs-secondary-focus: var(--ha-colour-secondary-focus) ;
    --bs-link-color: var(--ha-colour-text) ;
    --bs-link-hover-color: var(--ha-colour-text) !important ;
    --bs-border-color: var(--ha-colour-border) ;
    --bs-navbar-hover-color: var(--ha-colour-nav-item-bg-hover) ; 
}
.btn-primary {
    --bs-btn-color: var(--ha-colour-primary-text) ;
    --bs-btn-hover-color: var(--ha-colour-primary-text) ;
    --bs-btn-border-color: var(--ha-colour-primary) ;
    --bs-btn-bg: var(--ha-colour-primary) ;
    --bs-btn-hover-bg: var(--ha-colour-primary-hover) ;
    --bs-btn-focus-shadow-rgb: 1px solid var(--ha-colour-primary-focus) !important ;
    --bs-btn-hover-border-color: var(--ha-colour-primary-hover) ;
    --bs-btn-active-bg: var(--ha-colour-primary-hover) ;
    --bs-btn-active-border-color: var(--ha-colour-primary-hover) ; 
}

.btn-secondary {
    --bs-btn-color: var(--ha-colour-secondary-text) ;
    --bs-btn-bg: var(--ha-colour-secondary) ;
    --bs-btn-hover-color: var(--ha-colour-secondary-text-hover) ;
    --bs-btn-hover-bg: var(--ha-colour-secondary-hover) ;
    --bs-btn-focus-shadow-rgb: 1px solid var(--ha-colour-secondary-focus) !important ;
    --bs-btn-border-color: var(--ha-colour-secondary) ;
    --bs-btn-hover-border-color: var(--ha-colour-secondary-hover) ;
    --bs-btn-active-border-color: var(--ha-colour-secondary-hover) ; 
    --bs-btn-active-color: var(--ha-colour-text) ;
    --bs-btn-active-bg: var(--ha-colour-secondary-hover) ;
}
button:focus:not(:focus-visible) {
    box-shadow: none ;
}
p a {
    color: var(--ha-colour-primary) ;
}
a:hover {
    color:  var(--ha-colour-primary-hover) ;
}
a:focus {
    color: var(--ha-colour-primary-hover) ;
}
html {
    height: 100% ;
}
.tag-container {
    min-height: 2rem ;
    display: inline-flex ;
    flex-wrap: wrap ;
    gap: .5rem ;
}
.job-tag {
    width: fit-content ;
    width: -moz-fit-content ;
    white-space: nowrap ;
    font-size: .7rem ;
    position: relative ;
    padding: 0.3rem ;
    border-radius: var(--bs-border-radius) ;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) ;
    background-color: var(--ha-colour-app-main-alt-bg) ;
    color: var(--ha-colour-text) ;
}
.form-check-input:checked {
    background-color: var(--ha-colour-primary-focus) ;
    border-color: var(--ha-colour-primary-focus) ;
}
.text-primary {
    color: var(--ha-colour-primary) !important;
}
.text-secondary {
    color: var(--ha-colour-secondary) !important ;
}