@font-face {
    font-family: OnestRegular ;
    src: url('/include/font/OnestRegular1602-hint.ttf') ;
}
@font-face {
    font-family: OnestMedium ;
    src: url('/include/font/OnestMedium1602-hint.ttf') ;
}
@font-face {
    font-family: OnestBold ;
    src: url('/include/font/OnestBold1602-hint.ttf') ;
}
body {
    font-family: "OnestRegular" ;
    font-size: 16px ;
    height: 100% ;
}
p {
    font-size: 1.125rem ;
}
.ha-answers, 
.ha-searchresults,
.web-search,
.form-control,
.form-select,
.ha-question-header {
    font-family: "OnestMedium" ;
    font-size: 1rem ;
}
h1, h2, h3, h4, h5,
.ha-button, .btn, .button, button {
    font-family: "OnestBold" ;
}
h1 {
    font-size: 2.375rem !important ;
}
h2 {
    font-size: 1.5rem !important ;
    padding-bottom: 1rem ;
    padding-top: 1rem ;
}
h3 {
    font-size: 1rem !important ;
}
a {
    text-decoration: none ;
}
.show-link,
.show-link:hover,
.show-link:visited {
    color: var(--ha-colour-primary-hover) ;
}
textarea {
    resize: none ;
}
.ha-button {
    width: 100% ;
    border-radius: 2rem ;
    --bs-btn-padding-y: .5rem ;
}
.web-app { 
    background: var(--ha-colour-app-bg) ;
    color: var(--ha-colour-text) ;
    height: 100% ;
}
.title-icon {
    color: var(--ha-colour-primary) ;
}
.pwa-container {
    padding: 0 0 ;
    max-width: 900px ;
    height: 100% ;
}
.user-menu-options-container {
    display: flex;
    justify-content: flex-end ;
}
.user-menu-options-container a,
.btn-close.offcanvas-title,
.offcanvas.offcanvas-end {
    color: var(--ha-colour-app-title) ;
    background-color: var(--ha-colour-app-bg) ;
}
.btn-close.offcanvas-title {
    background: none ;
}
.user-menu-options-container:hover,
.nav-link:focus,
.user-menu-options-container a:hover {
    color: var(--ha-colour-primary-hover) ;
    background: transparent ;
}
.nav-link {
    color: var(--ha-colour-text) ;
}
.nav-link:hover {
    background-color: var(--ha-colour-primary) ;
    color: var(--ha-colour-app-main-bg) ;
}
.pwa-name {
    font-size: 1.5rem ;
}
.pwa-name a:hover,
.pwa-name a:visited {
    color: var(--ha-colour-app-title) ;
}
.web-header {
    color: var(--ha-colour-app-title) ;
    height: 80px ;
    padding-top: 1rem ;
}
.web-main-header {
    color: var(--ha-colour-text) ;
    margin-left: 1rem ;
    margin-right: 1rem ;
}
.web-main-header h2 {
    padding-top: 0 ;
    padding-bottom: 0 ;
    margin-bottom: 0 ;
}
.web-main {
    background-color: var(--ha-colour-app-main-alt-bg) ;
    border-radius: 30px ;
    margin-top: .5rem ;
    margin-bottom: .5rem ;
    height: calc(100% - 150px) ;
    border: 2px solid var(--ha-colour-app-main-border) ;
    position: relative ;
}
.web-footer {
    height: 54px ;
    display: flex ;
    align-items: center ;
}
.web-content {
    padding: 1rem ;
    height: 100% ;
    overflow-y: auto ;
    border-radius: 30px ;
}
/* CSS for the search box in the webapp */
.searchContainer {
    position: relative ;
    margin-left: -1rem ;
    margin-right: -1rem ;
}
.ha-termSearch {
    margin: .5em 0 ;
    display: none ;
    list-style: none ;
    border: 2px solid var(--ha-colour-app-main-bg) ;
    width: 100%;
    background-color: var(--ha-colour-app-main-bg) ;
    position: absolute ;
    text-align: left ;
    z-index: 99 ;
    border-radius: 8px ;
    border: var(--ha-colour-border) solid 2px ;
    top: 46px ;
}
.ha-termSearch li {
    padding: .5rem 0rem ;
    margin: 0 1rem ;
    border-bottom: solid 1px var(--bs-border-color) ;
}
.ha-termSearch li:last-child,
.ha-searchresults a.ha-search:last-child,
li.question-bottom-border:last-child, 
.ha-answer:last-child {
    border-bottom: none ;
}
li.question-bottom-border{
   display: block ;
   border-bottom:  var(--bs-border-width) var(--bs-border-style) var(--ha-colour-border) ;
   margin-left: 2rem ;
   margin-right: 2rem ;
}
.web-searchbox {
    padding-top: .25rem ;
    padding-bottom: .25rem ;
}
.web-search {
    position: relative ;
    color: var(--ha-colour-app-form-field-text) ;
}
.web-search input {
    text-indent: 1.5rem ;
    border: 2px solid var(--ha-colour-border) ;
}
.web-search input:focus {
    box-shadow: 0px 0px 5px var(--ha-colour-primary-focus)  ;
    border: 2px solid var(--ha-colour-border) ;
}
.web-search .fa-search {
    position: absolute ;
    bottom: 12px ;
    left: 16px ;
}
.web-search button {
    position: absolute ;
    bottom: 0 ;
    right: 0 ;
    height: 40px ;
    border-radius: 0 var(--bs-btn-border-radius) var(--bs-btn-border-radius) 0 ;
}
.ha-questions, 
.ha-searchresults {
    background-color: var(--ha-colour-app-main-bg) ;
    margin-left: -1rem ;
    margin-right: -1rem ;
}
.ha-question,
.ha-search {
    padding: .5rem 0rem ;
    --bs-gutter-x: 0 ;
    background-color: var(--ha-colour-app-main-bg) ;    
} 
.ha-search:hover {
    background-color: var(--ha-colour-question-hover) !important ;
}
.ha-question:hover {
    background-color: var(--ha-colour-question-hover) !important ;
}
.ha-question-header {
    margin: 1rem ;
    position:  relative ;
}
.ha-question .ha-nav-link a:focus {
    box-shadow: 0px 0px 5px var(--ha-colour-primary-focus) ;
}
.ha-menu {
    color: var(--ha-colour-app-title) ;
    font-size: 1.5rem ;
}
.ha-nav-link {
    text-align: right ;
    color: var(--ha-colour-primary) ;
}
.ha-nav-link a {
    color: var(--ha-colour-primary) ;
}
.ha-nav-link:hover,
.ha-nav-link a:hover {
    color: var(--ha-colour-primary-hover) ;
}
.ha-nav-link:focus,
.ha-nav-link a:focus {
    box-shadow: 0px 0px 5px var(--ha-colour-primary-focus) ;
}
.related-topic {
    padding: 2rem ;
    background-color: var(--ha-colour-app-main-alt-bg) ;
}
.ha-answers {
   margin-left: 2rem ;
   margin-right: 2rem ;
   padding-top: 1rem ;
}
.ha-answer a {
    color: var(--ha-colour-nav-link) ;
}
.ha-answer{
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--ha-colour-border) ;
    padding: 1rem 0rem ; 
    position: relative ;
}
.form-control,
.form-select,
.input-group-text {
    background-color: var(--ha-colour-app-form-field-bg) ;
    color: var(--ha-colour-app-form-field-text) ;
    background-image: none!important ;
    margin: 0.6rem 0rem ;
}
img#__lpform_email_icon, 
img#__lpform_password_icon, 
img#__lpform_verify_icon, 
img#__lpform_firstname_icon {
    display: none !important ;
}
.form-control:focus {
    box-shadow: 0px 0px 5px var(--ha-colour-primary-hover) ;
    border: 1px solid var(--ha-colour-primary) ;
    background-color: var(--ha-colour-app-form-field-bg) ;
    color: var(--ha-colour-app-form-field-text) ;
}
.form-control:disabled {
    background-color: var(--ha-colour-app-form-field-bg);
    opacity: .6;
}
.form-control option {
    background-color: var(--ha-colour-app-main-bg) ;
    color: var(--ha-colour-text) ;
}
option:hover {
    background-color: var(--ha-colour-primary-hover) ;
    color: var(--ha-colour-text) ;
}
.ha-history {
    left: 2rem ;
}
.ha-history span {
    color: var(--ha-colour-app-title) ;
}
.ha-results {
    padding: 0.5rem 0 ;
    margin-left: 1rem ;
    margin-right: 1rem ;
}
.ha-history-list,
.ha-history-list li,
.ha-history-list li a {
    background-color: var(--ha-colour-app-main-bg) ;
    color: var(--ha-colour-text) ;
}
.ha-history-list li {
    padding: .25rem 0 ;
}
.ha-history-list li a:hover {
    background-color: var(--ha-colour-app-main-alt-bg) !important ;
    color: var(--ha-colour-nav-link) ;
}
.ha-history-list li a i {
    font-size: .75rem ;
}
.ha-Login-title {
    text-align: center ;
}
.ha-Login-message {
    text-align: center ;
}
.text-muted{
    font-size: 0.8rem ;
    text-align: right ;
}
.ha-password-reset-app-title ,
.text-center{
    font-size: 0.8rem ;
}
.ha-login {
    border: 1px solid var(--ha-colour-border) ;
    border-radius: 2rem ;
    text-align: start ;
    padding: 1.5rem ;
    background-color: var(--ha-colour-app-main-alt-bg) ;
}
.ha-login-container {
    display: flex ;
    flex-direction: column ;
    justify-content: center ;
}
.ha-offline {
    border: 2px solid var(--ha-colour-app-main-alt-bg) ;
    border-radius: 1.5rem ;
    padding: 1rem ;
    text-align: center ;
    background-color: var(--ha-colour-app-main-bg) ;
    color: var(--ha-colour-app-bg) ;
}
.message-container {
    border-radius: 2rem ;
    border: solid var(--ha-colour-border) 1px ;
    padding: 1rem ;
    display: block ;
    position: absolute ;
    bottom: 0 ;
    background-color: var(--ha-colour-app-main-bg) ;
    max-width: 900px ;
    width: 100% ; 
    margin-bottom: 0 ;
    z-index: 99999 ;
}
.message {
    padding-left: 1rem ;
    padding-right: 1rem ;
    border-radius: 10px ;
}
.fa-solid, 
.fa-regular {
    font-size: 1.5rem ;
}
.ha-reset-password-title,
.ha-password-reset-app-title ,
.ha-register,
.ha-register-text,
.ha-termsconditions,
.ha-got-account,
.ha-form-smalltext {
    text-align: center ;
} 
.ha-password-reset-app-title,   
.ha-termsconditions,
.ha-got-account,
.ha-form-smalltext {
    font-size: .75rem ;
    margin-top: 1rem ;
}
.ha-form-subtitle {
    margin: 1rem 1.2rem 1.5rem ;
    color: var(--ha-colour-primary) ;
}
.has-speech {
    position: absolute ;
    right: -1rem ;
    top: -1.5rem ;
}
.page-hasanswers {
    height: calc(50% - 75px) ;
    text-align: center ;
}
.page-landingpage {
    height: calc(50% - 75px) ;
    padding: 1rem ;
    text-align: center ;
    color: var(--ha-colour-app-title) ;
}
.page-landingpage p {
    font-size: 1.5rem ;
}
.job-icon {
    width: 2rem !important;
    font-size: 1.2rem;
}
.emp-searchContainer {
    position: fixed ;
    top: 0 ;
    left:0 ;
    width:100% ;
    z-index:9999 ;
    margin:0 ;
}
.emp-search {
    height:1.5rem ;
    width:160px ;
    color: var(--ha-colour-primary-text) ;
    background-color: var(--ha-colour-primary) ;
    margin-left:auto ;
    margin-right:auto ;
    border-radius: 0 0 3rem 3rem ;
    text-align: center ;
    position: absolute ;
    left: calc(50% - 80px) ;
}
.emp-searchdropdown .fa-solid {
    font-size: .75rem ;
}
.emp-searchpanel {
    background-color:var(--ha-colour-app-main-alt-bg) ;
    border-radius: 0 0 1rem 1rem ;
    padding: .5rem ;
    max-width: 900px ;
    margin-left: auto ;
    margin-right: auto ;
}
.emp-container {
    margin-top: .75rem ;
}
.emp-logo {
    position: absolute ;
    width: 100% ;
    text-align: end ;
}
.emp-logo img {
    width: 25% ;
}
.star-icon {
    margin-left: 1rem ;
    color: var(--ha-colour-primary) ;
}