@font-face {
    font-family: 'EricssonCapital';
    src: url(utm-ericsson-capital.ttf);
    font-weight: normal;
    font-style: normal;
}
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
html {
    --ericsson-white: #fafafa;
    --ericsson-grey1: #f1f1f1;
    --ericsson-grey2: #e0e0e0;
    --ericsson-grey3: #9f9f9f;
    --ericsson-grey4: #757575;
    --ericsson-black: #242424;

    --ericsson-yellow: #f8d12c;
    --ericsson-green:  #10c372;
    --ericsson-blue:   #0082ef;
    --ericsson-red:    #fe3030;
    --ericsson-orange: #fe8b0a;
    --ericsson-purple: #ad75ce;
}

h1 {
    font-family: EricssonCapital;
}

svg text {
    font-family: EricssonCapital;
}

.wall {
    fill: var(--ericsson-white);
    fill-rule: evenodd;
    stroke: var(--ericsson-black);
    stroke-width: 0.5;
}
.inner-wall {
    fill: var(--ericsson-white);
    stroke: var(--ericsson-black);
    stroke-width: 0.5;
}
.speedgate { stroke: var(--ericsson-black); stroke-width: 0.5; stroke-dasharray: 2,2; }

.room {
    fill: var(--ericsson-white);
    stroke: var(--ericsson-black);
    stroke-width: 0.5;
    transition-property: fill, fill-opacity;
    transition-duration: 0.25s;
    transition-timing-function: linear;
}
#door-marker {
    z-index: 10;
}
.room ~ .door-marker {
    display: none;
    stroke: var(--ericsson-black);
    stroke-width: 0.5;
    fill: none;
}
.room.hilite ~ .door-marker { display: initial; }

.active .bookable.special { fill: var(--ericsson-blue); }
.active .non-bookable.mini { fill: var(--ericsson-green); }
.active .non-bookable.scrum { fill: var(--ericsson-orange); }
.active .non-bookable.research { fill: var(--ericsson-red); }

svg.hilite .bookable.special:not(.hilite),
svg.hilite .non-bookable.mini:not(.hilite),
svg.hilite .non-bookable.scrum:not(.hilite),
svg.hilite .non-bookable.research:not(.hilite) {
    fill-opacity: .2;
}

.room.hilite {
    animation: colors 0.75s ease-in-out infinite alternate;
}

@keyframes colors {
    from { fill: var(--ericsson-yellow) }
    to { fill: var(--ericsson-red) }
}

.stairs { fill: var(--ericsson-grey2); }
.terrace {
    fill: var(--ericsson-grey3);
    stroke: var(--ericsson-black);
    stroke-width: 0.5;
}
.storage,
.phonebooth {
    stroke: var(--ericsson-black);
    stroke-width: 0.5;
}
.storage { fill: var(--ericsson-grey3); }
.phonebooth { fill: var(--ericsson-grey2); }
.elevator { fill: var(--ericsson-grey2); }
.here-must-be-aliens { fill: var(--ericsson-grey4); }

.controls { height: 110px; padding: 10px; }
.ui.input {
    position: relative;
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    display: inline-flex;
    color: rgba(0,0,0,.87);
}
.ui.input > select,
.ui.input > input {
    margin: 0;
    max-width: 100%;
    flex: 1 0 auto;
    outline: 0;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
    text-align: left;
    line-height: 1.21428571em;
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    padding: .67857143em 1em;
    background: #fff;
    border: 1px solid rgba(34,36,38,.15);
    color: rgba(0,0,0,.87);
    border-radius: .28571429rem;
    transition: box-shadow .1s ease, border-color .1s ease;
    box-shadow: none;
}
.ui.input > select:active,
.ui.input > input:focus {
    color: rgba(0,0,0,.8);
    border-color: #85b7d9;
    background: #fff;
    box-shadow: none;
}
svg.active .room { cursor: pointer; }
svg.active .room:hover { stroke-dasharray: 1 1; }
.svgbox {
    position: relative;
    perspective: 800px;
    transform-style: preserve-3d;
    margin-top: 20%;
    margin-left: 10%;
    margin-right: 10%;
}
.svgbox svg {
    position: absolute;
    transition-property: bottom, transform, z-index;
    transition-duration: 0.35s;
    transition-timing-function: ease-in-out;
    transform: matrix3d(1,  0,      0,      0,
                        0,  0.3048, 0.9524, 0,
                        0, -0.9524, 0.3048, 0,
                        0,  0,   -250,      1);
    bottom: var(--bottom-distance);
}
.svgbox svg.active {
    transform: matrix3d(0.85, 0,    0, 0,
                        0,    0.85, 0, 0,
                        0,    0,    1, 0,
                        0,    0,  200, 1);
}

.svgbox .floor-0 { z-index: 1; --bottom-distance: 0px; }
.svgbox .floor-1 { z-index: 2; --bottom-distance: 20px; }
.svgbox .floor-2 { z-index: 3; --bottom-distance: 40px; }
.svgbox .floor-3 { z-index: 4; --bottom-distance: 60px; }
.svgbox .floor-4 { z-index: 5; --bottom-distance: 80px; }
.svgbox .floor-5 { z-index: 6; --bottom-distance: 100px; }
.svgbox .floor-6 { z-index: 7; --bottom-distance: 120px; }
@media only screen and (max-width: 779px) {
    .svgbox { width: 75%; height: 50%; }
    .svgbox svg.lower { bottom: calc(var(--bottom-distance) - 20%) }
    .svgbox svg.raise { bottom: calc(var(--bottom-distance) + 40%) }
    .legend svg {
        width: 50%;
        height: auto;
        float: left;
    }
}
@media only screen and (min-width: 780px) and (max-width: 1219px) {
    .svgbox { width: 75%; height: 50%; }
    .svgbox svg.lower { bottom: calc(var(--bottom-distance) - 40%) }
    .svgbox svg.raise { bottom: calc(var(--bottom-distance) + 70%) }
    .legend svg {
        width: 33%;
        height: auto;
        float: left;
    }
}
@media only screen and (min-width: 1220px) {
    .svgbox { width: 40%; height: 40%; }
    .svgbox svg.lower { bottom: calc(var(--bottom-distance) - 180px) }
    .svgbox svg.raise { bottom: calc(var(--bottom-distance) + 420px) }
    .legend svg {
        width: 25%;
        height: auto;
        float: left;
    }
}
.legend {
    position: absolute;
    bottom: 0;
    width: calc(100% - 16px);
    padding: 8px;
}