@import "patPortal_depr.css";

/* font */
@font-face {
    font-family: 'MetaPro Regular';
    src: url('./fonts/meta-pro/FFMetaProRegular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'MetaPro Bold';
    src: url('./fonts/meta-pro/FFMetaProBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/***********************************************************/
/** region root */
:root {
    /* font definition */
    --font-text: 'MetaPro Regular';
    --font-headline: 'MetaPro Bold';

    /* color name definition */
    --primary: #00a24c; /*-- rgb (0,162,76)  grün--*/
    --primary-hover: #56b977; /*-- rgb (86, 185, 119) hell grün--*/
    --primary-active: var(--primary-hover);
    --primary-active-border:  var(--primary-hover);
    --primary-checked: var(--primary);
    --primary-checked-hover: var(--primary);
    --primary-disabled: #00a24c66; /*-- primary mit opacity 0,4 rgba (0,162,76,0.4)--*/
    --primary-text: #fefefe;

    --secondary: var(--primary);
    --secondary-hover: var(--primary-hover); /*-- rgb (86, 185, 119) hell grün--*/
    --secondary-active: var(--secondary-hover);
    --secondary-disabled: var(--primary-disabled); /*-- primary mit opacity 0,4 rgba (0,162,76,0.4)--*/
    --secondary-text: #fefefe;

    --third: var(--primary);
    --third-hover: var(--primary-hover);
    --third-active: var(--third-hover);
    --third-disabled: var(--primary-disabled); /*--hell grau--*/
    --third-text: var(--third);

    --accordion: var(--primary);
    --accordion-hover: var(--primary-hover);
    --accordion-active:  var(--primary);
    --accordion-disabled: var(--primary-disabled);

    --header-bg: #fff;

    --btn-primary-text: var(--primary-text);
    --btn-primary-active-text: var(--primary-text);
    --btn-primary-hover-text: var(--primary-text);
    --btn-primary-hover-bg: var(--primary-hover); /* also valid for :focus */
    --btn-primary-hover-border: var(--primary-hover); /* 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: var(--secondary) ;
    --btn-secondary-hover-text: var(--secondary-text);
    --btn-secondary-bg: var(--secondary-text);
    --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:var(--secondary-text); /* 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: var(--secondary-disabled); /* also valid for :checked */
    --btn-secondary-disabled-bg: var(--secondary-text); /* also valid for :checked */
    --btn-secondary-disabled-border: var(--secondary-disabled); /* also valid for :checked */

    --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='%2300a24c'%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);
    --accordion-secondary-bg: var(--accordion-bg);
    --accordion-secondary-border: var(--secondary-active);
    --accordion-secondary-hover-text: var(--secondary-text); /* also valid for :focus */
    --accordion-secondary-hover-bg: var(--secondary-hover); /* also valid for :focus */
    --accordion-secondary-hover-border: var(--secondary-hover); /* 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, Arial, sans-serif!important;
}

h3,
#navbarSupportedContent a {
    font-family: var(--font-headline), Helvetica, Arial, sans-serif!important;
}

/***********************************************************/
/** region Navbar */

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

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

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

#navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link {
    font-size: 18px!important;
    border-bottom: 2px solid transparent;
}

#navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link.activated,
#navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link:hover {
    color: var(--primary);
    border-color: transparent;
    border-radius: 0px;
    border-bottom: 2px solid var(--primary);
}
/** endregion */
/***********************************************************/

/***********************************************************/
/** region Footer */
#footerBar {
    border-top: 2px solid var(--primary);
}

/*--Logo in Footer--*/
footer#footerBar::before {
    content: '';
    background-image: url('../images/custom-waldfriede-EU-Logo-blau-vertical.png');
    display: block;
    width: 120px;
    height: 140px;
    background-size: contain; /* Make sure the image fits within the specified width */
    background-repeat: no-repeat; /* Prevent repeating the image */
    background-position: center;
}

footer#footerBar ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
/** endregion */
/***********************************************************/

/***********************************************************/
/** region Behandlungen */
a.fc-event {
    color: var(--primary)!important;
}

.fc-daygrid-event-dot,
fc-list-event-dot {
    border-color: var(--primary)!important;
}

.fc-button-primary {
    background-color: var(--primary-text)!important;
    border-color: var(--primary)!important;
    color: var(--primary)!important;
}

.fc-button-active {
    background-color: var(--primary)!important;
    color: var(--primary-text)!important;
}

.fc-button-primary:hover {
    background-color: var(--primary-hover)!important;
    border-color: var(--primary-hover)!important;
    color: var(--primary-text)!important;
}

.tile.Behandlungen .fc-v-event {
    background-color: var(--primary);
    border-color: var(--primary);
}
/** endregion */
/***********************************************************/

/***********************************************************/
/** region Timeline 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(--accordion-secondary-hover-bg);
    color: var(--accordion-secondary-hover-text);
    border-color: var(--accordion-secondary-hover-border);
}

.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,
    /*--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
{
    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: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 */
/***********************************************************/

/* Timeline check btn*/
#navbarContentFilter .btn-check + .btn,
#navbarContentFilter .btn-check + .btn:hover,
#navbarContentFilter .btn-check + .btn:active,
#navbarContentFilter .btn-check + .btn:focus-visible,
#navbarContentFilter .btn-check:checked + .btn,
#navbarContentFilter .btn-check:checked + .btn:hover,
#navbarContentFilter .btn-check:checked + .btn:active,
#navbarContentFilter .btn-check:checked + .btn:focus-visible {
    color: var(--btn-secondary-text);
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    box-shadow: none;
}

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

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

div.submenu.tile.Einstellungen .accordion-button:not(.collapsed) {
    background-color: var(--accordion);
    border-color: var(--accordion);
    color: var(--accordion-active-text);
}

div.submenu.tile.Einstellungen .accordion-button:not(.collapsed):after {
    background-image: var(--accordion-active-arrow-bs)!important;
}
/** endregion */
/***********************************************************/

/***********************************************************/
/** region Notizen, MyData */
:is(.tile.Notizen, .tile.MyData) .accordion-button.collapsed {
    color: var(--primary);
}


:is(.tile.Notizen, .tile.MyData) .accordion-button.collapsed:hover {
    color: var(--primary-text);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

:is(.tile.Notizen, .tile.MyData) .accordion-button.collapsed:after {
    background-image: var(--accordion-arrow-bs)!important;
}

:is(.tile.Notizen, .tile.MyData) .accordion-button:not(.collapsed) {
    background-color: var(--accordion);
    border-color: var(--accordion);
    color: var(--accordion-active-text);
}

:is(.tile.Notizen, .tile.MyData) .accordion-button.collapsed:hover:after,
:is(.tile.Notizen, .tile.MyData) .accordion-button:not(.collapsed):after {
    background-image: var(--accordion-active-arrow-bs)!important;
}

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

/***********************************************************/
/** region FAQ */
/*.tile.FAQ .accordion-button.collapsed {
    color: var(--primary);
}*/

.tile.FAQ .accordion-button.collapsed:hover {
    color: var(--primary-text);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.tile.FAQ .accordion-button.collapsed:after {
    background-image: var(--accordion-arrow-bs)!important;
}

div.tile.FAQ .accordion-button:not(.collapsed) {
    background-color: var(--accordion);
    border-color: var(--accordion);
    color: var(--accordion-active-text);
}

div.tile.FAQ .accordion-button:not(.collapsed):after,
.tile.FAQ .accordion-button.collapsed:hover:after {
    background-image: var(--accordion-active-arrow-bs)!important;
}

div.tile.FAQ #faq_container + div {
    display: none;
}

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

/***********************************************************/
/** region Terminbuchung */
.tile.TerminAnfrage .card .card-header {
    background-color: var(--primary);
    color: #fff;
    text-align: center;
    border-bottom: none;
}

.tile.TerminAnfrage .card .card-body {
    padding: 0!important;
}

.tile.TerminAnfrage .card .card-footer {
    background-color: #fff;
    border: none;
}
/** endregion */
/***********************************************************/