@import "typography.css";
@import "component-styles/badge.css";
@import "component-styles/breadcrumbs.css";
@import "component-styles/card.css";
@import "component-styles/carousel.css";
@import "component-styles/vaadin-accordion.css";
@import "component-styles/vaadin-app-layout.css";
@import "component-styles/vaadin-avatar.css";
@import "component-styles/vaadin-button.css";
@import "component-styles/vaadin-checkbox.css";
@import "component-styles/vaadin-combo-box.css";
@import "component-styles/vaadin-confirm-dialog.css";
@import "component-styles/vaadin-context-menu.css";
@import "component-styles/vaadin-crud.css";
@import "component-styles/vaadin-custom-field.css";
@import "component-styles/vaadin-date-picker.css";
@import "component-styles/vaadin-date-time-picker.css";
@import "component-styles/vaadin-details.css";
@import "component-styles/vaadin-dialog.css";
@import "component-styles/vaadin-email-field.css";
@import "component-styles/vaadin-grid.css";
@import "component-styles/vaadin-grid-pro.css";
@import "component-styles/input-fields.css";
@import "component-styles/vaadin-list-box.css";
@import "component-styles/vaadin-login-form.css";
@import "component-styles/vaadin-menu-bar.css";
@import "component-styles/vaadin-message-input.css";
@import "component-styles/vaadin-message-list.css";
@import "component-styles/vaadin-multi-select-combo-box.css";
@import "component-styles/vaadin-notification.css";
@import "component-styles/vaadin-number-field.css";
@import "component-styles/vaadin-password-field.css";
@import "component-styles/vaadin-progress-bar.css";
@import "component-styles/vaadin-radio-button.css";
@import "component-styles/vaadin-rich-text-editor.css";
@import "component-styles/vaadin-scroller.css";
@import "component-styles/vaadin-select.css";
@import "component-styles/vaadin-side-nav.css";
@import "component-styles/vaadin-side-nav-item.css";
@import "component-styles/vaadin-tabs.css";
@import "component-styles/vaadin-text-area.css";
@import "component-styles/vaadin-text-field.css";
@import "component-styles/vaadin-time-picker.css";
@import "component-styles/vaadin-tooltip.css";
@import "component-styles/vaadin-tree-grid.css";
@import "component-styles/vaadin-upload.css";
@import "oamk-theme.css";
@import "main-layout.css";

.style-oy {
    /* Text */
    --lumo-header-text-color: hsla(0, 0%, 0%, 1);
    --lumo-body-text-color: hsla(0, 0%, 0%, 0.9);
    --lumo-secondary-text-color: hsla(0, 0%, 0%, 0.65);
    --lumo-tertiary-text-color: hsla(0, 0%, 0%, 0.55);
    --lumo-disabled-text-color: hsla(0, 0%, 0%, 0.55);

    /* Shades */
    --lumo-contrast-5pct: hsla(225, 3%, 25%, 0.05);
    --lumo-contrast-10pct: hsla(225, 3%, 24%, 0.1);
    --lumo-contrast-20pct: hsla(225, 3%, 23%, 0.16);
    --lumo-contrast-30pct: hsla(225, 3%, 22%, 0.26);
    --lumo-contrast-40pct: hsla(225, 3%, 21%, 0.38);
    --lumo-contrast-50pct: hsla(225, 3%, 20%, 0.52);
    --lumo-contrast-60pct: hsla(225, 3%, 19%, 0.6);
    --lumo-contrast-70pct: hsla(225, 3%, 18%, 0.69);
    --lumo-contrast-80pct: hsla(225, 3%, 17%, 0.83);
    --lumo-contrast-90pct: hsla(225, 3%, 16%, 0.94);
    --lumo-contrast: hsl(225, 3%, 15%);
    --lumo-base-color: #fff;

    --lumo-tint-5pct: rgba(222, 227, 238, 0.05);
    --lumo-tint-10pct: rgba(222, 227, 238, 0.1);
    /*--^*/
    --lumo-tint-20pct: rgba(222, 227, 238, 0.2);
    --lumo-tint-30pct: rgba(222, 227, 238, 0.3);
    --lumo-tint-40pct: rgba(222, 227, 238, 0.4);
    --lumo-tint-50pct: rgba(222, 227, 238, 0.5);
    --lumo-tint-60pct: rgba(222, 227, 238, 0.6);
    --lumo-tint-70pct: rgba(222, 227, 238, 0.7);
    --lumo-tint-80pct: rgba(222, 227, 238, 0.8);
    --lumo-tint-90pct: rgba(222, 227, 238, 0.9);
    --lumo-tint: #DEE3EE;

    /** Semantic Colors **/
    /* Primary */
    --lumo-primary-color: hsl(224, 61%, 35%);
    --lumo-primary-color-50pct: hsla(224, 61%, 35%, 0.5);
    /*--lumo-primary-color-10pct: hsla(224, 61%, 35%, 0.1);*/
    --lumo-primary-color-10pct: hsl(0, 0%, 100%);
    --lumo-primary-text-color: hsl(224, 61%, 28%);
    --lumo-primary-contrast-color: #fff;

    /* Error */
    --lumo-error-color: hsl(0, 100%, 46%);
    --lumo-error-color-50pct: hsla(0, 100%, 46%, 0.5);
    --lumo-error-color-10pct: hsla(0, 100%, 46%, 0.1);
    --lumo-error-text-color: hsl(0, 100%, 42%);
    --lumo-error-contrast-color: #fff;

    /* Success */
    --lumo-success-color: hsla(134, 100%, 27%, 1);
    --lumo-success-color-50pct: hsla(134, 100%, 27%, 0.5);
    --lumo-success-color-10pct: hsla(134, 100%, 27%, 0.1);
    --lumo-success-text-color: hsl(134, 100%, 20%);
    --lumo-success-contrast-color: #fff;

    /* Warning */
    --lumo-warning-color: hsl(32, 100%, 50%);
    --lumo-warning-color-10pct: hsla(32, 100%, 50%, 0.1);
    --lumo-warning-text-color: hsl(31, 92%, 33%);
    --lumo-warning-contrast-color: var(--lumo-shade-90pct);

    /* Focus */
    --infosys-focus-color: #007DB8;

    /* Border radius */
    --lumo-border-radius: 0.01em;
    --lumo-border-radius-s: 0.01em; /* Checkbox, badge, date-picker year indicator, etc */
    --lumo-border-radius-m: var(--lumo-border-radius, 0); /* Button, text field, menu overlay, etc */
    --lumo-border-radius-l: 0.25em; /* Dialog, notification, etc */

    /* Shadow */
    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
    --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
    --infosys-component-shadow: 0 3px 3px -3px #DDDDDD;

    /* Background */
    --infosys-app-background-color: var(--lumo-contrast-5pct);
    --infosys-overlay-background-color: var(--lumo-base-color);

    /* Used as background for toggle, progress bar e.t.c */
    --infosys-secondary-color: #00AEEF;

    /* Input fields */
    --infosys-field-background-color: var(--lumo-base-color);
    --infosys-field-border-color: var(--lumo-contrast-30pct);
    --infosys-field-border-width: 1px;
    --infosys-field-focus-ring-width: 2px;

    /* Card */
    --infosys-card-header-color: var(--lumo-primary-text-color);

    /* App Layout */
    --infosys-header-background-color: var(--lumo-primary-color);
    --infosys-header-text-color: var(--lumo-primary-contrast-color);
    --infosys-footer-background-color: var(--lumo-primary-color);
    --infosys-footer-text-color: var(--lumo-primary-contrast-color);
    --infosys-footer-position: static; /* Use "sticky" for fixed footer */

    background-color: var(--lumo-tint);
}

/* User colors */
html {
    --vaadin-user-color-0: hsl(31 43% 60%);
    --vaadin-user-color-1: hsl(196 100% 47%);
    --vaadin-user-color-2: hsl(324 100% 46%);
    --vaadin-user-color-3: hsl(349 100% 79%);
    --vaadin-user-color-4: hsl(274 53% 37%);
    --vaadin-user-color-5: hsl(170 46% 52%);
    --vaadin-user-color-6: hsl(57 100% 50%);
}

/* Vaadin Charts */
vaadin-chart {
    --vaadin-charts-color-0: #5ac2f7;
    --vaadin-charts-color-1: #1676f3;
    --vaadin-charts-color-2: #ff7d94;
    --vaadin-charts-color-3: #c5164e;
    --vaadin-charts-color-4: #15c15d;
    --vaadin-charts-color-5: #0e8151;
    --vaadin-charts-color-6: #c18ed2;
    --vaadin-charts-color-7: #9233b3;
    --vaadin-charts-color-8: #fda253;
    --vaadin-charts-color-9: #e24932;
}

:root {
    background-color: var(--infosys-app-background-color);
}

img {
    max-width: 10%;
}

vaadin-vertical-layout.panel
{
    background-color: white;
    padding: 1em;
    border-radius: 0.5em;
}
vaadin-app-layout::part(navbar)
{
    background-color: var(--lumo-primary-color);

}
vaadin-select.languageSelect
{
    margin: 0.5em;
}
vaadin-select.languageSelect::part(input-field)
{
    background-color: white;
}
vaadin-icon
{
    font-size: 1em;
}

a
{
    color: var(--lumo-primary-color);
    
}
.content-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-link {
    margin: 0;
    padding: 0;
    gap: 0;
    justify-content: start;
}
.footer-link-layout {
    margin: 0 5%; 
}
.active-link{
    
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
    margin-block: 0;
    letter-spacing: -0.44px;
    font-size:var(--lumo-font-size-m);
    margin:10px;

}
.active-link:hover{
    
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
    margin-block: 0;
    letter-spacing: -0.44px;
    --lumo-header-text-color: rgb(255, 255, 255);

}
.logo{
    max-height: 3em;
    margin-left: 19px;
    
    margin-top: -10px;
  
}
.oamk-logo{
    margin-top: 3px;
    margin-left: 30px;
    max-height: 40px;
    margin-right: 20px;
}
.haku-oamk{
    font-size: var(--lumo-font-size-m);
    font-weight:400;
}
@media (max-width: 600px) {
    .navBarLeft {
        flex-direction: column; /* Stack items vertically on mobile */
        align-items: flex-start; /* Align items to the start */
        justify-content: flex-start; /* Align items to the start */
        width: 100%; /* Make the navbar full width */
        padding: 10px; /* Add some padding to avoid touching edges */
        padding-bottom: revert-layer;
    }

    .navBarLeft > * { /* Target direct children of navBarLeft */
        margin: -0.1em 0;  
        width: 70%; /* Make items full width */
        text-align: left; /* Align text to the left */
    }
    
}