.overlay {
    -webkit-transition: opacity 0.1s ease;
    transition: opacity 0.1s ease;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: transparent;
}

.overlay.open {
    opacity: 1;
}

.overlay:not(.open) {
    opacity: 0;
    pointer-events: none;
}

.overlay.overlayed {
    pointer-events: none;
}

.overlay-content {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: white;
}

.ios-safari .overlay.open:not(.overlayed) .overlay-content {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.ios-safari .overlay:not(.open) .overlay-content,
.ios-safari .overlay.overlayed .overlay-content {
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.overlay:not(.open) .overlay-content {
    opacity: 0;
    -webkit-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.overlay.open .overlay-content {
    opacity: 1;
    -webkit-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.overlay:not(.open) .overlay-content,
.overlay.overlayed .overlay-content {
    /*    overflow-y: hidden;*/
}

.overlay.open:not(.overlayed) .overlay-content {
    /*
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
*/
}

.overlay-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    border-bottom: 1px #999 solid;
    box-sizing: border-box;
    background-color: white;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: 0;
}

.overlay-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
    line-height: 28px;
    font-size: 18px;
    vertical-align: middle;
    overflow: hidden;
    display: inline;
}

.overlay-header-icon {
    font-size: 28px;
    line-height: 56px;
    vertical-align: middle;
}

.overlay:not(.open) .overlay-header {
    opacity: 0;
    -webkit-transition: opacity 0.1s ease-in-out 0.15s;
    transition: opacity 0.1s ease-in-out 0.15s;
}

.overlay.open .overlay-header {
    opacity: 1;
    -webkit-transition: opacity 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out;
}

.overlay:not(.open) .overlay-header-icon {
    opacity: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

.overlay.open .overlay-header-icon {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: opacity 0.1s ease-in-out 0.1s, -webkit-transform 0.1s ease-in-out 0.1s;
    transition: opacity 0.1s ease-in-out 0.1s, transform 0.1s ease-in-out 0.1s;
}

.overlay.stack-1 {
    z-index: 10;
}

.overlay.stack-2 {
    z-index: 20;
}

.overlay.stack-3 {
    z-index: 30;
}

.title-icon {
    display: none;
    margin-left: 0.5em;
}
/*
.context-menu-container {
    background-color: rgba(0, 0, 0, 0.5);
}
*/
/*

.context-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: -webkit-calc(100% - 2em);
    width: calc(100% - 2em);
    max-height: -webkit-calc(100% - 4em);
    max-height: calc(100% - 4em);
    border-radius: 7px;
    background-color: white;
    box-shadow: 1px 1px 3px 3px #606060;
}*/