/*
   CSS styling examples for the Vaadin app.
   Visit https://vaadin.com/docs/flow/theme/theming-overview.html and
   https://vaadin.com/themes/lumo for more information.
*/


html {
    --lumo-font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

    /* Base (background) */
    --lumo-base-color: #fff;
    --lumo-body-color: var(--lumo-primary-color);
    /* Tint */
    --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
    --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
    --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
    --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
    --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
    --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
    --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
    --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
    --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
    --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
    --lumo-tint: #fff;

    /* Shade */
    --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
    --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
    --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
    --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
    --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
    --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
    --lumo-shade: hsl(214, 35%, 15%);

    /* Contrast */
    --lumo-contrast-5pct: var(--lumo-shade-5pct);
    --lumo-contrast-10pct: var(--lumo-shade-10pct);
    --lumo-contrast-20pct: var(--lumo-shade-20pct);
    --lumo-contrast-30pct: var(--lumo-shade-30pct);
    --lumo-contrast-40pct: var(--lumo-shade-40pct);
    --lumo-contrast-50pct: var(--lumo-shade-50pct);
    --lumo-contrast-60pct: var(--lumo-shade-60pct);
    --lumo-contrast-70pct: var(--lumo-shade-70pct);
    --lumo-contrast-80pct: var(--lumo-shade-80pct);
    --lumo-contrast-90pct: var(--lumo-shade-90pct);
    --lumo-contrast: var(--lumo-shade);

    /* Text */
    --lumo-header-text-color: var(--lumo-contrast);
    --lumo-body-text-color: var(--lumo-contrast-90pct);
    --lumo-secondary-text-color: var(--lumo-contrast-70pct);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);

    /* Primary */
    --lumo-primary-color: hsl(213, 56%, 45%);
    --lumo-primary-color-50pct: rgba(50, 108, 179, 0.5);
    --lumo-primary-color-10pct: rgba(50, 108, 179, 0.1);
    --lumo-primary-text-color: rgb(50, 108, 179);
    --lumo-primary-contrast-color: #fff;

    /* Error */
    --lumo-error-color: hsl(3, 85%, 48%);
    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
    --lumo-error-text-color: hsl(3, 89%, 42%);
    --lumo-error-contrast-color: #fff;

    /* Success */
    --lumo-success-color: hsl(145, 72%, 30%);
    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
    --lumo-success-text-color: hsl(145, 85%, 25%);
    --lumo-success-contrast-color: #fff;

    /* Warning */
    --lumo-warning-color: 	hsl(42, 66%, 55%);
    --lumo-warning-color-50pct: hsla(42, 66%, 55%, 0.5);
    --lumo-warning-color-10pct: hsla(42, 66%, 55%, 0.1);
    --lumo-warning-text-color: hsl(42, 66%, 55%);
    --lumo-warning-contrast-color: #fff;

}

.h-no-margin {
    margin: 0;
}

/* Example: CSS class name to center align the content . */
.centered-content {
    margin: 0 auto;
    max-width: 500px;
}


.login-box {
    /*outline: 1px solid blue;*/
    padding: 0 !important;
    margin-top: 3rem;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.login-box header{
    margin: 0;
    padding: 0;
    height: 200px;
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    /*background: var(--lumo-primary-color);*/
    background: rgb(34,72,119);
    background: linear-gradient(90deg, rgba(34,72,119,1) 0%, rgba(50,108,179,1) 72%, rgba(68,128,202,1) 100%);
    display: flex;
    flex-direction: column;
}

.login-box .logo {
    height: 100%;
    width: 100%;
    margin: 1rem;
    margin-bottom: 0;
    background-image: url("./images/rzv_sw_neg.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}

.login-box .logo .kerckhoff {
    height: 100%;
    width: 100%;
    margin: 1rem;
    margin-bottom: 0;
    background-image: url("./images/logo_kerckhoff.png");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
}

.login-box main{
    padding: 1rem;
    width: calc(100% - 2rem);
}

.login-box h1{
    color: white;
    font-size: 2rem;
    padding: 1rem;
    margin-top: auto !important;
    font-weight: lighter;
    /*line-height: 2em !important;*/
}


.login footer{
    text-align: center;
    padding-bottom: 0.5rem;
}

/*.login-box h1:before {*/
/*    !*background-color: mediumseagreen;*!*/
/*    background-image: url("./images/rzv_claim_rgb.png");*/
/*    background-size: contain;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*    !*margin-top: 8px;*!*/
/*    !*width: calc(100% - 16px);*!*/
/*    width: 200px;*/
/*    height: 200px;*/
/*    box-sizing: border-box;*/
/*}*/

vaadin-app-layout::part(navbar) {
    min-height: 0;
}

.content {
    /*background-color: var(--lumo-body-color);*/
    /*padding-top: 1em;*/
    padding-bottom: 1em;
}

.drawer-layout {
    /*color: white;*/
    overflow: hidden;
    background-color: #fff;
}

.drawer-item {
    /*color: white;*/
}

.grid-dl-icon {
    color: var(--lumo-primary-color-50pct);
    cursor: pointer;
}

.grid-dl-icon:hover {
    color: var(--lumo-primary-color);
}

.rzv-logo {

    /*background-color: mediumseagreen;*/
    background-image: url("./images/rzv_claim_rgb.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 8px;
    /*width: calc(100% - 16px);*/
    width: 100%;
    height: 55px;
    box-sizing: border-box;
}

.row {
    border-top: 1px solid var(--lumo-primary-color-10pct);
}

.row:nth-child(odd) {
    background: var(--lumo-shade-10pct);
}

.row:hover, .row:focus {
    background: var(--lumo-primary-color-10pct);
}

.row:focus {
    outline: var(--lumo-shade-50pct) outset 2px;
}

.row:nth-child(even) {

}

.doc-grid-active {
    border: 2px solid green;
}

.holder-placeholder {
    background: var(--lumo-shade-10pct);
    padding: 1rem;
    display: flex;
    justify-content: center;
}

.holder-placeholder:hover, .row:focus {
    background: var(--lumo-primary-color-10pct);
}

.holder-content {
    background: var(--lumo-shade-10pct);
    display: flex;
    justify-content: center;
}

.holder-content:hover, .row:focus {
    background: var(--lumo-primary-color-10pct);
}


@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
.icon-rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}