@import "patPortal_depr.css";

/* font */
@font-face {
    font-family:'Arial';
    font-style: normal;
    font-weight: 400;
    src: local('Arial'),
    url(fonts/arial/arial.ttf) format('truetype');
}

/***********************************************************/
/** region root */
:root {
    /* font definition */
    --font-text: 'Arial';
    --font-headline: 'Arial';

    /* color name definition */
    --primary: #36a7e9;
    --primary-hover: var(--primary);
    --primary-active: var(--primary-text);
    --primary-active-border:  var(--primary);
    --primary-checked: var(--primary);
    --primary-checked-hover: var(--primary);
    --primary-disabled: #b6b6b6; /*--hell grau--*/
    --primary-text: #fefefe;

    --secondary: #d5d4bf;
    --secondary-hover: var(--primary-hover);
    --secondary-active: var(--primary-active);
    --secondary-disabled: #b6b6b6; /*--hell grau--*/
    --secondary-text: #17202a; /*--dunkel text--*/
    --third: #be0027;
    --third-hover: var(--third);
    --third-active: var(--third);
    --third-disabled: #b6b6b6; /*--hell grau--*/
    --third-text: var(--third);

    --accordion: var(--primary);
    --accordion-hover: #A1D9E8;
    --accordion-active:  var(--primary);
    --accordion-disabled: #b6b6b69;

    --header-bg: #fff;
    --footer-bg: #d5d4bf;

    --btn-primary-text: var(--primary-text);
    --btn-primary-active-text: var(--primary-text);
    --btn-primary-hover-text: var(--primary);
    --btn-primary-hover-bg: var(--primary-text); /* also valid for :focus */
    --btn-primary-hover-border: var(--primary); /* also valid for :focus */
    --btn-primary-checked-text: var(--primary-text);
    --btn-primary-checked-bg: var(--primary-checked);
    --btn-primary-checked-border: var(--primary-checked);
    --btn-primary-checked-hover-text: var(--btn-primary-checked-text);
    --btn-primary-checked-hover-bg: var(--primary-checked);
    --btn-primary-checked-hover-border: var(--primary-checked);
    --btn-primary-disabled-text: var(--btn-primary-text);

    --btn-secondary-text:  #1b4f72 ;
    --btn-secondary-hover-text: var(--primary-text);
    --btn-secondary-bg: var(--secondary);
    --btn-secondary-border: var(--secondary);
    --btn-secondary-hover-bg: var(--secondary-hover); /* also valid for :focus */
    --btn-secondary-hover-border: var(--secondary-hover); /* also valid for :focus */
    --btn-secondary-active-text: #2073ab; /* also valid for :checked */
    --btn-secondary-active-bg: var(--secondary-active); /* also valid for :checked */
    --btn-secondary-active-border: var(--secondary-active); /* also valid for :checked */
    --btn-secondary-disabled-text: #69AFDF; /* also valid for :checked */
    --btn-secondary-disabled-bg: var(--secondary-disabled); /* also valid for :checked */
    --btn-secondary-disabled-border: var(--secondary-disabled); /* also valid for :checked */
    --btn-secondary-shadow: 0 0 0 0.25rem var(--secondary-disabled);

    --btn-third-text: var(--third-text);
    --btn-third-hover-text: #ffffff;
    --btn-third-bg: #ffffff;
    --btn-third-border: var(--third);
    --btn-third-hover-bg: var(--third-hover); /* also valid for :focus */
    --btn-third-hover-border: var(--third-hover); /* also valid for :focus */
    --btn-third-active-text:  #ffffff; /* also valid for :checked */
    --btn-third-active-bg: var(--third-active); /* also valid for :checked */
    --btn-third-active-border: var(--third-active); /* also valid for :checked */
    --btn-third-disabled-text: #b6b6b6; /* also valid for :checked */
    --btn-third-disabled-bg: var(--third-disabled); /* also valid for :checked */
    --btn-third-disabled-border: var(--third-disabled); /* also valid for :checked */

    --accordion-text: var(--accordion);
    --accordion-bg: #fff;
    --accordion-border: var(--accordion);
    /*--accordion-arrow: var(--accordion-active);*/
    --accordion-hover-text: var(--accordion-active); /* also valid for :focus */
    --accordion-hover-bg: var(--accordion-hover); /* also valid for :focus */
    --accordion-hover-border: var(--accordion-hover); /* also valid for :focus */
    --accordion-active-text: #fff; /* also valid for :checked */
    --accordion-active-bg: var(--accordion-active); /* also valid for :checked */
    --accordion-active-border: var(--accordion-active); /* also valid for :checked */
    --accordion-arrow-bs: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2336a7e9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --accordion-active-arrow-bs: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");

    --accordion-secondary-text: var(--secondary-text);
    --accordion-secondary-bg: var(--accordion-bg);
    --accordion-secondary-border: var(--primary-active-border);
    --accordion-secondary-hover-text: var(--accordion-secondary-text); /* also valid for :focus */
    --accordion-secondary-hover-bg: var(--secondary); /* also valid for :focus */
    --accordion-secondary-hover-border: var(--accordion-secondary-border); /* also valid for :focus */
    --accordion-secondary-active-text: #fff; /* also valid for :checked */
    --accordion-secondary-active-bg: var(--third); /* also valid for :checked */
    --accordion-secondary-active-border: var(--accordion-active); /* also valid for :checked */
}
/** endregion */
/***********************************************************/

/*layout*/
body {
    font-family :var(--font-text), Helvetica, sans-serif;
}

/***********************************************************/
/** region Navbar */
img#navbarImg {
    min-width: auto;
}

/*Breadcrumbs*/
/*.breadNav .breadcrumb-item {
    color: var(--primary);
}*/

.breadNav .breadcrumb-item > a,
.breadNav div.breadBack a,
#homeNavLabel {
    color: var(--primary);
    text-decoration: none;
}

.breadNav {
    margin-top: 0!important;
}
/** endregion */
/***********************************************************/

#footerBar {
    background-color: var(--footer-bg);
}

/***********************************************************/
/** region Button */
.btn-warning {
    border-color: var(--primary)!important;
}

#akteOeffnenGui .bg-warning {
    background-color: var(--primary)!important;
    color: var(--primary-text);
}

.btn-third:active, .btn-third.active {
    color: var(--btn-third-active-text)!important;
    background-color: var(--btn-third-active-bg)!important;
    border-color: var(--btn-third-active-border)!important;
}

/** endregion */
/***********************************************************/

/*--FAQ--*/
.tile.FAQ #faqNavbarSupportedContent .btn-outline-secondary.collapsed:hover {
    color: var(--primary-text)!important;
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-hover-border);
}

/***********************************************************/
/** region Accordion */
.timelineAccordionContainer > div.accordion > div.accordion-item > h2.accordion-header > button.accordion-button {
    background-color: var(--accordion-active-bg)!important;
    color: var(--accordion-active-text);
}

.timelineAccordionContainer > div.accordion > div.accordion-item > h2.accordion-header > button.accordion-button.collapsed {
    border: solid 2px var(--accordion-border)!important;
    background-color: var(--accordion-bg)!important;
    color: var(--accordion-text)!important;
}

.timelineAccordionContainer > div.accordion > div.accordion-item > h2.accordion-header > button.accordion-button.collapsed:hover {
    background-color: var(--accordion)!important;
    color: var(--accordion-active-text)!important;
}

/*-- Accordion innerhalb Accordion --*/
.timelineAccordionContainer div.accordion-item div.accordion-collapse button.accordion-button {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

.timelineAccordionContainer div.accordion-item div.accordion-collapse button.accordion-button.collapsed {
    border: solid 2px var(--accordion-secondary-border);
    background-color: var(--accordion-secondary-bg);
    color: var(--accordion-secondary-text);
}

.timelineAccordionContainer div.accordion-item div.accordion-collapse button.accordion-button.collapsed:hover {
    background-color: var(--secondary);
    color: var(--accordion-secondary-text);
}

.timelineAccordionContainer > div.accordion > div.accordion-item {
    margin-bottom: 0.25rem;
}

/*--machen Accordion Arrows weiß--*/
/*--primary accordion--*/
.timelineAccordionContainer > div.accordion > div.accordion-item > h2.accordion-header > button.accordion-button.collapsed:hover:after,
.timelineAccordionContainer > div.accordion > div.accordion-item > h2.accordion-header > button.accordion-button:after {
    background-image: var(--accordion-active-arrow-bs)!important;
}

/*--machen Accordion Arrows dark--*/
/*--primary-accordion--*/
.timelineAccordionContainer > div.accordion > div.accordion-item > h2.accordion-header > button.accordion-button.collapsed::after,
/*--secondary accordion--*/
.timelineAccordionContainer div.accordion-item div.accordion-collapse button.accordion-button.collapsed:hover:after,
.timelineAccordionContainer div.accordion-item div.accordion-collapse button.accordion-button:after
/*.timelineAccordionContainer div.accordion-item div.accordion-collapse button.accordion-button.collapsed:after*/ {
    background-image: var(--accordion-arrow-bs)!important;
}

button.accordion-button:focus {
    box-shadow: none;
}

.accordion-button span.badge {
    vertical-align: text-top!important;
}


/** endregion */
/***********************************************************/

/*--Terminbuchung active Button--*/
.taTerminChoiceOneDayDatesSelectionContainer > .col > .btn-primary.active,
.taTerminChoiceOneDayDatesSelectionContainer > .col > .btn-primary:active {
    color: var(--primary)!important;
    background-color: var(--btn-primary-hover-bg)!important;
    border-color: var(--btn-primary-checked-border)!important;
}

/***********************************************************/
/** region Einstellungen */
.tile.Einstellungen .card-header {
    color: var(--primary-text);
}

.tile.Einstellungen button.accordion-button:hover {
    color: var(--primary);
}
/** endregion */
/***********************************************************/