/*
    This is the Bittner + Krull standard styles CSS file.
    If you want to use custom styles, copy this file to customStyles.css (or
    any other name), adjust CSS styles and set the filename of the new CSS
    file in appsettings.json, in the "CustomStylesFilename" key of the
    appointment management module.

    Style will not change?
    - Try adding ' !important' behind it.
    - The css selector may change in the application lifetime. So please
      check if css selector is sill correct (e. g. with browser development tools).
*/
body {
    height: 100% !important;
    background-color: #fff !important;
}

/*
    Logo position

    left   = flex-start
    middle = center
    right  = flex-end
*/
bk-appointment-management div.bk-padding-default div.form-group.logo-container {
    justify-content: /*flex-start*/ /*center*/ flex-end;
}

/* Page title */
.custom-title {
    font-size: 2rem !important;
    color: #194e6e !important;
}

/* Text below page title */
.custom-p {
    font-size: 1.75rem ;
    color: black !important;
    margin-bottom: .7em;
}

.bk-selected .custom-subtitle {
    font-size: 1.75rem;
    color: #ffffff;
}

.custom-h5 {
    font-size: 1.25rem;
    color: #282828;
}

/* Title font settings */
.custom-title, .custom-subtitle, .bk-selected .custom-subtitle, .custom-h5, bk-footerLinks span, .appVersion {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
}

/* Settings for labels, text, paragraphs */
.custom-label, .custom-p, .custom-span {
    color: #282828;
}

/* Settings for selected labels, text, paragraphs */
.bk-selected .custom-label, .bk-selected .custom-p, .bk-selected .custom-span {
    color: #fff;
}

/* Styles success text on the last page */
.custom-success {
    color: #7cb342;
    margin-bottom: 0.5rem;
    line-height: 1.3rem;
    letter-spacing: 0.01rem;
}

/* Styles of warning or error text */
.custom-error {
    color: #f41e1e;
    margin-bottom: 0.5rem;
    line-height: 1.3rem;
    letter-spacing: 0.01rem;
}

/* Font settings */
.custom-label, .custom-p, .custom-span, .custom-error, .custom-success, .bk-custom-button, .bk-elevated-button, .bk-icon-button, .form-control {
    font-family: "Source Sans Pro", Helvetica, sans-serif !important;
    font-size: 1rem;
}

/* Input fields */
.bk-input-filled, .bk-input-filled option, .p-inputtext {
	color: #4c90c3 !important;
}

/* Required fields star color */
[bk-asterisk]:after, .bk-asterisk:after {
    color: #f4511e !important;
}

/* Button styles */
.bk-custom-button, .bk-elevated-button, .bk-icon-button {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    min-width: 80px;
    line-height: 1.5em;
    vertical-align: baseline;
    text-align: center;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
    border: none;
    padding: 8px 10px;
    margin: 3px 6px;
    background: transparent;
    background-clip: padding-box;
    color: currentColor;
    white-space: nowrap;
    font-weight: 500;
    font-size: inherit;
    font-style: inherit;
    font-variant: inherit;
    font-family: inherit;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    clip-path: inset(0 0 0 0);
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Cursor appearance if hovering over disabled button */
.bk-custom-button:disabled, .bk-elevated-button:disabled, .bk-icon-button:disabled {
    cursor: not-allowed;
}

.bk-custom-button ::ng-deep bk-icon, .bk-elevated-button ::ng-deep bk-icon {
    font-size: inherit;
    position: relative;
    bottom: -0.04em;
}

/* Normal disabled button (does not depend on inputs) */
.bk-custom-button[disabled] {
    color: #ddd;
    border: 1px solid rgba(0, 0, 0, .07);
}

/* Normal button (does not depend on inputs) */
.bk-custom-button:not([disabled]) {
    color: #282828;
    border: 1px solid rgba(0, 0, 0, .07);
    background-color: rgba(255, 255, 255, .5);
}

/* Normal button if hovered (does not depend on inputs) */
.bk-custom-button:not([disabled]):hover, .bk-custom-button:not([disabled]):focus {
    background-color: #f2f2f2;
}

/* Normal button color primary (does not depend on inputs) */
.bk-custom-button:not([disabled]).bk-button-theme-primary {
    color: #4c90c3;
}

/*  
    Settings for Normal button (does not depend on inputs) for different scenarios
*/
.bk-custom-button:not([disabled]).bk-button-theme-accent {
    color: #00c7cc;
}

.bk-custom-button:not([disabled]).bk-button-theme-critical {
    color: #f4511e;
}

.bk-custom-button:not([disabled]).bk-button-theme-warn {
    color: #ffc107;
}

.bk-custom-button:not([disabled]).bk-button-theme-success {
    color: #7cb342;
}

/* Disabled button (not active because of invalid inputs) */
.bk-elevated-button[disabled] {
    color: #ddd;
    background: #f5f5f5;
    border: 1px solid transparent;
}

/* Enabled button (active because of valid inputs) */
.bk-elevated-button:not([disabled]) {
    color: #282828;
    background: #eee;
    border: 1px solid transparent;
}

/* Enabled button if hovered (active because of valid inputs) */
.bk-elevated-button:not([disabled]):hover, .bk-elevated-button:not([disabled]):focus {
    background-color: #dcdcdc;
}

/*  
    Settings for Enabled button (active because of valid inputs) for different scenarios
*/
.bk-elevated-button:not([disabled]).bk-button-theme-primary {
    color: #fff;
    background: #4c90c3;
}

.bk-elevated-button:not([disabled]).bk-button-theme-primary:hover, .bk-elevated-button:not([disabled]).bk-button-theme-primary:focus {
    background-color: #3b7eb0;
}

.bk-elevated-button:not([disabled]).bk-button-theme-accent {
    color: #fff;
    background: #00c7cc;
}

.bk-elevated-button:not([disabled]).bk-button-theme-accent:hover, .bk-elevated-button:not([disabled]).bk-button-theme-accent:focus {
    background-color: #00a4a8;
}

.bk-elevated-button:not([disabled]).bk-button-theme-critical {
    color: #fff;
    background: #f4511e;
}

.bk-elevated-button:not([disabled]).bk-button-theme-critical:hover, .bk-elevated-button:not([disabled]).bk-button-theme-critical:focus {
    background-color: #e33f0b;
}

.bk-elevated-button:not([disabled]).bk-button-theme-warn {
    color: #fff;
    background: #ffc107;
}

.bk-elevated-button:not([disabled]).bk-button-theme-warn:hover, .bk-elevated-button:not([disabled]).bk-button-theme-warn:focus {
    background-color: #e2aa00;
}

.bk-elevated-button:not([disabled]).bk-button-theme-success {
    color: #fff;
    background: #7cb342;
}

.bk-elevated-button:not([disabled]).bk-button-theme-success:hover, .bk-elevated-button:not([disabled]).bk-button-theme-success:focus {
    background-color: #6a9938;
    }

.bk-elevated-button:not([disabled]) ::ng-deep bk-spinner .ball-scale-multiple > div {
    background-color: rgba(255, 255, 255, .4) !important;
}

/* Setting for icons which behaves as a button */
.bk-icon-button {
    margin: 0;
    padding: 0.4em;
    min-width: 0;
    font-size: 1.7em;
    line-height: 1em;
    border-radius: 50%;
}

.bk-icon-button[disabled] {
    color: #ddd;
}

.bk-icon-button[disabled].bk-inverted {
    color: rgba(255, 255, 255, .25);
}

.bk-icon-button:not([disabled]) {
    color: #282828;
}

.bk-icon-button:not([disabled]):hover, .bk-icon-button:not([disabled]):focus {
    background-color: rgba(0, 0, 0, .07);
}

.bk-icon-button:not([disabled]).bk-inverted {
    color: rgba(255, 255, 255, .93);
}

.bk-icon-button:not([disabled]).bk-inverted:hover {
    background-color: rgba(255, 255, 255, .07);
}

.bk-icon-button:not([disabled]).bk-button-theme-primary {
    color: #4c90c3;
}

.bk-icon-button:not([disabled]).bk-button-theme-accent {
    color: #00c7cc;
}

.bk-icon-button:not([disabled]).bk-button-theme-critical {
    color: #f4511e;
}

.bk-icon-button:not([disabled]).bk-button-theme-warn {
    color: #ffc107;
}

.bk-icon-button:not([disabled]).bk-button-theme-success {
    color: #7cb342;
}

/* Settings for choosable obects */
bk-list > .bk-list > .bk-list-item.bk-selected {
    background-color: #4c90c3 !important;
}

/* Settings for choosable obects (hover) */
bk-list > .bk-list > .bk-list-item.bk-selected:hover, bk-list > .bk-list > .bk-list-item.bk-selected:focus {
    background-color: #4c90c3 !important;
}

/* Settings for checkbox in chooseable object */
.bk-list .bk-list-item:after {
    color: #4c90c3 !important;
}

/* Settings for checkbox in chooseable object if selected*/
bk-list > .bk-list > .bk-list-item.bk-selected:after {
    color: #fff !important;
}

/* Calendar button settings */
.bk-calendar-container button.p-button {
    background-color: #4c90c3;
    border-color: #4c90c3;
}

/* Calendar button setting (hover) */
.bk-calendar-container button.p-button:hover, .bk-calendar-container button.p-button:focus {
    background-color: #3b7eb0;
    border-color: #3b7eb0;
}

/* Checkbox setting unchecked */
.bk-checkbox-container label.bk-checkbox {
    background-color: #fafafa;
}

/* Checkbox setting checked */
.bk-checkbox-container input[type=checkbox]:not(:disabled):checked + label.bk-checkbox {
    background-color: #4c90c3;
    border-color: #4c90c3;
}

/* Checkbox setting checked (hover) */
.bk-checkbox-container input[type=checkbox]:not(:disabled):checked + label.bk-checkbox:hover {
    background-color: #3b7eb0;
    border-color: #3b7eb0;
}

.bk-checkbox-container input[type=checkbox]:not(:disabled):checked + label.bk-checkbox:after {
    border-color: #fff;
}

/* Checkbox setting checked (focus) */
.bk-checkbox-container input[type=checkbox]:not(:disabled):checked:focus + label.bk-checkbox {
    background-color: #3b7eb0;
    border-color: #3b7eb0;
}

.bk-checkbox-container input[type=checkbox]:not(:disabled).ng-invalid.ng-dirty:not(form) + label.bk-checkbox {
    border-color: #f4511e;
    background-color: rgba(244, 81, 30, .06);
}

/* Checkbox setting disabled */
.bk-checkbox-container input[type=checkbox]:disabled + label.bk-checkbox {
    background-color: #fff;
}

/* Checkbox setting disabled checked */
.bk-checkbox-container input[type=checkbox]:disabled:checked + label.bk-checkbox:after {
    border-color: #4c90c3;
}

/*
    FooterLinks

    Changes here will affect the appearance of the footer and the links inside it.
                               
    Footer position is changable with justify-content:
    left   = flex-start
    middle = center
    right  = flex-end
*/
bk-footerLinks ul {
    list-style-type: none;
    display: flex;
    margin-top: 20px;
    padding: 0px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

bk-footerLinks li {
    margin: 0px 20px;
}

bk-footerLinks li:first-child {
    margin-left: 0px;
}

bk-footerLinks a {
    text-decoration: none;
    color: inherit;
}

bk-footerLinks a:hover {
   text-decoration: none;
}

/* Link text size and color */
bk-footerLinks span {
    font-size: small;
    color: #bdbdbd;
}

a {
    color: #4c90c3;
}

a:hover {
    color: #4c90c3;
}

a.bk-theme-critical {
    color: #f4511e;
}

a.bk-theme-critical:hover {
    color: #f4511e;
}

:host {
    display: inline-block;
}

    :host:first-child > button {
        margin-left: 0;
    }

    :host:last-child > button {
        margin-right: 0;
    }