/* Header */

.mast {

text-overflow: ellipsis;
width: 100%;
z-index: 19999;

}

.bar {

clear: both;
position: relative;
width: 100%;
height: 45px;
margin: 0 auto;

}

.sprite-up {

background-image: url(images/logo.svg);
background-position: 44px 44px;

}

.logo {

background-repeat: no-repeat;
height: 44px;
width: 65px;
background-position: center;

}

/* In-logo Ajax loader */

.loader {

animation: loading 1s linear infinite;
box-sizing: content-box;
width: 20px;
height: 20px;
border: 5px solid;
border-top-color: #f9ff00;
border-left-color: #ef730c;
border-bottom-color: #445aff;
border-right-color: #0da;
border-radius: 50%;
margin: 32px -44px;

}

@keyframes loading {

0% {
    transform: translate(-9px, -25px) rotate(0deg);
}
100% {
    transform: translate(-9px, -25px) rotate(360deg);
}

}

.offline {

-webkit-filter: grayscale(1);
filter: grayscale(1);

}

.offline.logo {

animation: loading 2s linear infinite;
box-sizing: content-box;
width: 20px;
height: 20px;
border: 5px solid;
border-left-color: transparent;
border-right-color: transparent;
border-radius: 50%;
margin: 32px 8px 0 24px;

}

.beta-label {

margin: 8px 0 0 -16px;
transform: rotate(90deg);
color: #777;

}

.page-label {

padding: 11px 15px;
width: 90px;

}

.navi-menu {

li {
    a:hover,
    &#active a:hover,
    &.selected a:hover {
        color: #1177ff;
    }
}
>menu li a {
    display: block;
}
white-space: nowrap;
menu {
    white-space: nowrap;
    height: 45px;
}
li {
    &#active {
        background-position: left center;
        background-repeat: no-repeat;
    }
    a {
        /* font-weight: 700; */
        line-height: 44px;
        padding: 13px 20px;
        color: #555;
    }
}

}

.bar-line {

border-bottom: 1px solid #eaeaea;

}

.element {

display: flex;
height: 44px;
padding: 0 10px;
align-items: center;
justify-content: center;

}

.divider {

border-left: 1px solid #eaeaea;

}

.transparent-white {

background-color: rgba(255, 255, 255, 0.85);

}

.super-small {

font-size: 70%;

}

.search {

width: 130px;
margin: 1px auto auto 9px;
padding: 0 0 0 26px;
height: 44px;
outline: 0 !important;
border: none;
display: block;
background: transparent none;
background-image: url(images/search.svg);
background-position-x: left;
background-position-y: center;
background-repeat: no-repeat;
background-size: 24px 24px;

}

ul#results-container {

position: absolute;
top: 45px;
left: 0;
background: aliceblue;
li {
    width: inherit;
    display: flex;
    margin-bottom: 1px;
    background: aliceblue;
    a {
        color: #444;
        padding: 7px 10px;
        width: inherit;
        &:hover {
            color: #1177FF;
            border-color: #1177FF;
            background-color: aliceblue;
        }
    }
}

}

@media (orientation: portrait) {

body {
    ul#results-container {
        margin: 0 5vw;
        width: 90vw;
    }
}

}

@media (orientation: landscape) {

body {
    ul#results-container {
        margin: 0 85px;
        width: 500px;
    }
}

}

a.gray {

color: #777 !important;
font-style: italic;
pointer-events: none;

}