@import "theme-editor.css";

html, :host {
  --lumo-border-radius-m: 0.5em;
  --lumo-font-size-m: 0.9rem;

  --e2-color-jr-background: #16a0cc;
}

.map-layer-picker::part(input-field) {
    background-color: #ffffff80;
}

.selected-equipment {
    box-shadow: 0 2px 8px 4px black;
    -moz-box-shadow: 0 2px 8px 4px black;
    -webkit-box-shadow: 0 2px 8px 4px black;
}

.equipment-view {
    --vaadin-input-field-background: #EEEEEE;
    --vaadin-input-field-value-color: var(--lumo-body-text-color);

    .separator {
        background: #858585;
        color: white;
        text-transform: uppercase;
        padding: 0 5px 0 5px;;
        line-height: 38px;
        box-sizing: border-box;
    }

    .separator > * {
        color: #EEEEEE;
    }

    .top-row {
        padding: 0 5px 0 5px;
        background: linear-gradient(to bottom, #2dbbe8 0%, #16a0cc 40%, #117c9e 100%) #16a0cc;
        transition: background-color 0.3s;
        color: #EEEEEE;
        font-weight: normal;
        font-size: 1.2rem;
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
        gap: 5px;
    }

    .top-row > *{
        color: #EEEEEE;
    }

    .title {
        color: #EEEEEE;
        font-weight: normal;
        font-size: 1.2rem;
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .equipment-panel-wrapper {
        padding: 1rem;
        text-align: center;
        border-radius: 12px;

        :hover {
          filter: brightness(110%);
        }

        .equipment-panel {
            overflow:hidden;
            border-radius: 6px;
            border: solid 1px #DDDDDD;
            background: white;
        }

        .title {
            background-color: #16a0cc;
            transition: background-color 0.3s;
            color: #EEEEEE;
            font-weight: normal;
            font-size: 1.2rem;
            font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;

            .selected-equipment {
                background-color: green;
            }
        }

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .image {
            height: 160px;
            padding: 20px;
        }

        .row-span {
            min-height: 40px;
            width: 100%;
            border-top: dotted 1px #DDDDDD;
            align-content: center;
        }
    }
}