@charset "utf-8";

html, body {
    margin: 0px;
    height: 100%;
}

#neuer-root {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.neuer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

/* Dialog */
#neuer-modal-base .neuer-dialog-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* PC Dialog */
.n-pc #neuer-modal-base .neuer-modal {
    position: fixed;
    background-color: #fff;
}

.n-pc #neuer-modal-base .neuer-dialog-header {
    display: flex;
    color: #fff;
    background-color: #488;
    padding: 2px 5px;
}

.n-pc #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-return {
    position: absolute;
    right: 5px;
}

.n-pc #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-return:hover {
    cursor : pointer;
}

.n-pc #neuer-modal-base .neuer-dialog-body {
    padding: 5px;
}

/* Mobile Dialog */
.n-mb #neuer-modal-base .neuer-modal {
    position: fixed;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
}

/* Navigation & Mobile Dialog Header */
#neuer-navigate, 
.n-mb #neuer-modal-base .neuer-dialog-header {
    display: flex;
    top: 0px;
    left: 0px;
    align-items: center;
    background-color: #444;
    color: #fff;
    padding-left: 2em;
    font-weight: bold;
    font-size: 1.5em;
    height: 2em;
}

#neuer-navigate .neuer-navigate-menu,
.n-mb #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-return {
    position: absolute;
    display: flex;
    align-items: center;
    left: 0;
}

#neuer-navigate .neuer-navigate-menu .icon,
.n-mb #neuer-modal-base .neuer-dialog-header .icon {
    width: 1.5rem;
    height: 1.5rem;
    padding: 5px;
}

#neuer-navigate .neuer-navigate-button,
.n-mb #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-button {
    display: flex;
    position: absolute;
    right: 0; 
}

#neuer-navigate .neuer-navigate-button-item,
.n-mb #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-button-item {
    display: flex;
    align-items: center;
    border: 1px solid #bbb;
    height: 1.5em;
    border-radius: 5px;
    padding: 0px 6px;
    margin: 0px 4px;
    background-color: #444;
}

#neuer-navigate .neuer-navigate-menu:hover, 
#neuer-navigate .neuer-navigate-button-item:hover,
.n-mb #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-return:hover,
.n-mb #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-button-item:hover {
    cursor: pointer;
}

#neuer-navigate .neuer-navigate-button-text,
.n-mb #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-button-text {
    font-size: 0.8em;
}

#neuer-navigate .neuer-navigate-button-image, 
.n-mb #neuer-modal-base .neuer-dialog-header .neuer-dialog-header-button-image {
    height: 0.8em;
}

/* Mobile Menu */
#neuer-mb-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    display: none;
}

#neuer-mb-menu {
    display: none;
    position: fixed;
    top: 0;
    height: 100vh;
    border: 1px solid #000;
}

#neuer-mb-menu .neuer-mb-menu-header {
    background-color: #666;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
    min-width: 200px;
}

#neuer-mb-menu .neuer-mb-menu-header-return {
    position: absolute;
}

#neuer-mb-menu .neuer-mb-menu-header-return:hover {
    cursor : pointer;
}

#neuer-mb-menu .neuer-mb-menu-body {
    padding: 10px;
    background: #fff;
}

/* Popup Message */
#neuer-message {
	position: fixed;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
    background-color: #444;
    color: #fff;
    padding: 10px 20px;
    display: none;
}