@import url('lumo-css-framework/all-classes.css');

/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,400&display=swap');

html {
    --lumo-font-family: 'Lato', sans-serif;
    /*--lumo-font-family: 'Roboto', sans-serif;*/
    /*--lumo-font-family: 'Open Sans', sans-serif;*/
    --lumo-base-color: #fafafa;
    --lumo-primary-text-color: rgb(41, 128, 185);
    --lumo-primary-color-50pct: rgba(41, 128, 185, 0.5);
    --lumo-primary-color-10pct: rgba(41, 128, 185, 0.1);
    --lumo-primary-color: #2980b9;
    --lumo-font-size: 1rem;
    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.6875rem;
    --lumo-line-height-m: 1.4;
    --lumo-line-height-s: 1.2;
    --lumo-line-height-xs: 1.1;
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;
    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;
}

.bo-top-layout {
    background: #44596e;
}

.bo-top-tabs {
    padding-top: 5px;
    background: #eee;
    max-height: 35px;
    min-height: 35px;
    height: 35px;
    border-bottom: 1px solid #ccc;
}

.bo-top-tab {
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    color: #666;
    margin-right: 5px;
}

.bo-top-tab[selected] {
    background: #fafafa;
    color: rgb(41, 128, 185);
}

.bo-top-tab span {
    color: #aaa;
    display: inline-block;
    padding: 5px;
    margin-left: 3px;
}

.bo-top-tab span:hover {
    color: blue;
    display: inline-block;
    background: #fafafa;
}

.bg-light-gray {
    background-color: #f6f6f6;
}

.bo-grid-action-btn {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

.bo-grid-icon-btn {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

.bo-prop-layout-item {
    border-bottom: 1px solid red;
}


.bo-cover-image-bg {
    background-image: url("./images/login-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.bo-login-form-holder {
    background-color: var(--lumo-base-color);
    border-radius: var(--lumo-border-radius-s);
    box-shadow: var(--lumo-box-shadow-s);
    padding: 20px;
}

.bo-login-form-holder vaadin-button {
    margin-top: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-m);
}

.bo-google-login-btn {
    padding: 0;
}

.bo-login-error {
    font-size: var(--lumo-font-size-xs);
    color: var(--lumo-error-text-color);
}

.bo-label {
    margin-top: 5px;
    margin-bottom: 5px;
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    margin-left: calc(var(--lumo-border-radius-m) / 4);
}