:root {
    --base-color: #233348FF;
    --base-color-light: #314763;
    --base-color-lighter: #3F5A7D;

    --weak-blue: rgb(236,247,247);
    --weak-gray: rgb(249,249,250);
    --weak-yellow: rgb(254,250,229);

    --button-green: #46716E;
    --custom-primary: #4C7B77;
    --custom-primary-text: #355553;
    --custom-primary-50percent: rgba(76, 123, 119, 0.5);
    --custom-primary-15percent: rgba(56, 143, 143, 0.15);
    --custom-primary-10percent: rgba(56, 143, 143, 0.1);
    --custom-primary-05percent: rgba(56, 143, 143, 0.05);
    --custom-primary-contrast: #FFFFFF;
    --custom-secondary: #F7DE52;
    --custom-secondary-10percent: rgba(247, 222, 82, 0.1);
}

html {
  --lumo-required-field-indicator-color: var(--button-green);
}

vaadin-app-layout::part(drawer) {
    background-color: var(--custom-primary-15percent);
}

vaadin-side-nav-item {
    color: black;
    text-decoration: none;
    border-radius: 8px;
}

vaadin-side-nav-item[current]::part(content) {
    background-color: var(--custom-primary-10percent);
    color: black;
}

vaadin-side-nav-item[current] {
    background-color: var(--custom-primary-10percent);
    color: black;
}

vaadin-side-nav-item[current]::part(link) {
    font-weight: bold;
}

vaadin-side-nav-item::part(content):hover,
vaadin-side-nav-item::part(link):hover,
vaadin-side-nav-item[slot="children"]:hover {
    background-color: var(--custom-primary-05percent);
    color: black;
    border-radius: 8px;
}

vaadin-side-nav-item > vaadin-icon {
    color: black;
}

vaadin-side-nav-item::part(toggle-button) {
    color: black;
}

.starred-icon {
    color: var(--lumo-primary-color);
}

.app-title,
.dialog-header,
.navbar-title {
    font-size: var(--lumo-font-size-l);
    font-weight: bold;
}



.drawer-header[slot="drawer"] {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding-left: var(--lumo-space-m);

    * {
        color: black;
    }

    div {
        display: flex;
        align-items: center;
    }

    .back-button {
        margin: 0 0 0 -10px;
        color: black;
        cursor: pointer;
    }
}

.drawer-content[slot="drawer"] {
    flex-grow: 1;
    overflow: auto;
    padding-left: var(--lumo-space-s);
    padding-right: var(--lumo-space-s);
}

.drawer-footer[slot="drawer"] {
    padding: var(--lumo-space-m);
}

.navbar-right-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: var(--lumo-space-m);
}

.side-dialog[role="dialog"] {
    top: 0;
    bottom: 0;
    right: 0;
}

.side-dialog::part(overlay) {
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 0;
}

.toggle {
    color: gray;
}

.view-selector {
    color: var(--lumo-primary-color);
}

.view-selector::part(toggle-button) {
    color: var(--lumo-primary-color);
    fill: var(--lumo-primary-color);
}


.form {
    vaadin-checkbox {
        padding-top: var(--lumo-space-m);
    }

    vaadin-checkbox::part(checkbox){
        margin-left: 0;
    }

    padding-bottom: var(--lumo-space-m);
}


.form-section-header {
    font-size: large;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-top: 1.5em;
    border-top: 1px solid var(--lumo-contrast-10pct);
    width: 100%;
}

.form-subsection-header {
    font-size: medium;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: var(--lumo-primary-text-color);
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    width: 100%;
}

.father-section-header {
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #2585a3;
    width: 100%;
}

.mother-section-header {
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: #e44f6a;
    width: 100%;
}

.project-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.custom-context-menu-item {
    padding: var(--lumo-space-s);
}

.custom-context-menu-item:hover {
    background-color: var(--lumo-primary-color-10pct);
    cursor: pointer;
}

.clickable-projects-title {
    color: var(--lumo-primary-color);
    text-decoration: underline;
    cursor: pointer;
}
.clickable-projects-title:hover {
    color: var(--lumo-primary-color);
}

.disabled-menu-item {
    cursor: default !important;
    pointer-events: none !important;
    background-color: transparent !important;
}

.disabled-menu-item:hover {
    background-color: transparent !important;
}

.three-months-per-row .fc-calendar-month-container {
    width: 33.333% !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

.three-months-per-row .fc-calendar-month-container:nth-child(3n+1) {
    clear: both;
}

.three-months-per-row .fc-calendar-month-container {
    padding: 5px;
}

/*vaadin-side-nav-item[path="patients"],*/
/*vaadin-side-nav-item a[href="patients"] {*/
/*    background-color: var(--weak-blue);*/
/*}*/

/*vaadin-side-nav-item[path="calendar"],*/
/*vaadin-side-nav-item a[href="calendar"] {*/
/*    background-color: var(--weak-gray);*/
/*}*/

/*vaadin-side-nav-item[path="archived-patients"],*/
/*vaadin-side-nav-item a[href="archived-patients"] {*/
/*    background-color: var(--weak-yellow);*/
/*}*/

vaadin-side-nav-item[current] {
    filter: brightness(0.9);
    color: black;
}

vaadin-side-nav-item::part(content):hover,
vaadin-side-nav-item::part(link):hover,
vaadin-side-nav-item[slot="children"]:hover {
    filter: brightness(0.95);
    color: black;
    border-radius: 8px;
}

.archived-list-view {
    background-color: var(--weak-yellow);
}

.colored-grid::part(yellow-row) {
    background-color: var(--weak-yellow);
}

.colored-grid::part(blue-row) {
    background-color: var(--weak-blue);
}

.colored-grid::part(gray-row) {
    background-color: var(--weak-gray);
}

vaadin-grid {
    background-color: inherit;
}

vaadin-grid::part(row) {
    background-color: inherit;
}

.yellow-vaadin-grid::part(cell) {
    background-color: var(--weak-yellow);
}

.blue-vaadin-grid::part(cell) {
    background-color: var(--weak-blue);
}

.gray-vaadin-grid::part(cell) {
    background-color: var(--weak-gray);
}

.session-description::part(label) {
    font-weight: bold;
    color: var(--lumo-body-text-color);
}

.appointments-grid::part(status-success) {
    color: var(--lumo-success-color);
}

.appointments-grid::part(status-error) {
    color: var(--lumo-error-color);
}

.appointments-grid::part(status-normal) {
    color: var(--lumo-primary-color);
}

.green-radio-button-group vaadin-radio-button[checked]::part(radio) {
      background-color: var(--button-green);
}

.green-radio-button-group::part(label) {
      color: var(--button-green);
}

.green-radio-button-group[focused]::part(label) {
      font-weight: bold;
}

.green-checkbox[checked]::part(checkbox) {
    background-color: var(--button-green);
}

vaadin-tab::before {
    background-color: var(--button-green);
}

.list-view vaadin-grid::part(selected-row) {
    background-color: var(--custom-primary-05percent);
    background-image: none;
}

.list-view vaadin-grid::part(selected-row-cell) {
    background-color: var(--custom-primary-05percent);
    background-image: none;
}

.list-view vaadin-grid::part(details-cell) {
    background-color: var(--custom-primary-05percent);
    background-image: none;
}

.list-view vaadin-grid::part(details-opened-row-cell) {
    background-color: var(--custom-primary-05percent);
    background-image: none;
}

vaadin-login-form vaadin-button[theme~="submit"] {
    background-color: var(--button-green);
    color: white;
    font-weight: bold;
}

vaadin-login-form vaadin-button[theme~="submit"]:hover {
    background-color: var(--button-green);
}

vaadin-login-form-wrapper label {
    color: var(--button-green);
    font-weight: 500;
}

vaadin-login-form-wrapper::part(form-title) {
    color: var(--button-green);
    font-size: 1.5em;
    font-weight: bold;
}

vaadin-combo-box-item::part(checkmark)::before {
    color: var(--button-green);
}

vaadin-combo-box::part(label) {
    color: var(--button-green);
}

vaadin-combo-box[focused]::part(label) {
    font-weight: bold;
}


vaadin-text-field::part(label) {
    color: var(--button-green);
}

vaadin-text-field[focused]::part(label) {
    font-weight: bold;
}

vaadin-text-area::part(label) {
    color: var(--button-green);
}

vaadin-text-area[focused]::part(label) {
    font-weight: bold;
}

vaadin-email-field::part(label) {
    color: var(--button-green);
}

vaadin-email-field[focused]::part(label) {
    font-weight: bold;
}

vaadin-number-field::part(label) {
    color: var(--button-green);
}

vaadin-number-field[focused]::part(label) {
    font-weight: bold;
}

vaadin-password-field::part(label) {
    color: var(--button-green);
}

vaadin-password-field[focused]::part(label) {
    font-weight: bold;
}

vaadin-integer-field::part(label) {
    color: var(--button-green);
}

vaadin-integer-field[focused]::part(label) {
    font-weight: bold;
}

vaadin-time-picker::part(label) {
    color: var(--button-green);
}

vaadin-time-picker[focused]::part(label) {
    font-weight: bold;
}

vaadin-date-picker::part(label) {
    color: var(--button-green);
}

vaadin-date-picker[focused]::part(label) {
    font-weight: bold;
}

vaadin-date-picker-overlay [slot="today-button"] {
    color: var(--button-green);
}

vaadin-date-picker-overlay [slot="cancel-button"] {
    color: var(--button-green);
}

vaadin-month-calendar::part(today date) {
    color: white;
    background-color: var(--button-green);
    border-radius: 3px;
}

vaadin-menu-bar-item[menu-item-checked]::part(checkmark)::before {
    color: var(--button-green);
}

vaadin-menu-bar-item:hover {
    background-color: var(--custom-primary-10percent);
}

vaadin-multi-select-combo-box-item::part(checkmark)::before {
    color: var(--button-green);
}

vaadin-multi-select-combo-box::part(label) {
    color: var(--button-green);
}

vaadin-multi-select-combo-box[focused]::part(label) {
    font-weight: bold;
}

vaadin-notification-card[theme="success"]::part(overlay) {
    background-color: var(--button-green);
}