/* track-viewer.css */

.track-scope {
    position: relative;
    z-index: 0;
    max-width: 100%;
    min-height: 60vmin;
    border: solid 1px #666;
}

.track-scopeX {
    width: 100%;
    height: 100%;
    border: initial;
    max-width: initial;
    min-height: initial;
}

.track-scopeT {
    width: 160px;
    height: 160px;
    max-width: initial;
    min-height: initial;
}

.track-scopeS {
    width: 320px;
    height: 320px;
    max-width: initial;
    min-height: initial;
}

.track-scopeM {
    width: 640px;
    height: 640px;
    max-width: initial;
    min-height: initial;
}

.track-scopeL {
    width: 960px;
    height: 960px;
    max-width: initial;
    min-height: initial;
}

.track-scopeH {
    width: 1280px;
    height: 1280px;
    max-width: initial;
    min-height: initial;
}

.track-frame {
    position: absolute;
    width: 100%;
    height: 100%;
}

.track-screen {
    position: fixed;
    z-index: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.track-control-mode {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-color: rgba(255, 255, 255, 0.7);
    background-image: url(/_img/track-screen.png);
    cursor: pointer!important;
}

.track-control-mode:hover {
    background-color: rgba(240, 240, 255, 0.7);
}

.track-screen .track-control-mode {
    width: 36px;
    height: 36px;
    background-color: #FFF;
    background-image: url(/_img/track-window.png);
}

.track-screen .track-control-mode:hover {
    background-color: #EEF;
}

.track-control-world {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-size: 24px 24px;
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/_img/track-japan.png);
    cursor: pointer!important;
}

.track-control-world.enabled {
    background-size: 28px 28px;
    background-image: url(/_img/track-world.png);
}

.track-control-world:hover {
    background-color: #EEF;
}

.track-control-world:hover:after {
    content: "to World Map";
    position: absolute;
    right: 40px;
    bottom: -8px;
    padding: 2px 4px;
    color: #FFF;
    background: #333;
    white-space: nowrap;
}

.track-control-world.enabled:hover:after {
    content: "to Japan Map";
}

/* customize */
.leaflet-control-zoom a {
    color: #666!important;
}

/* for diary */
#page[data-id^="diary-"] .track-scope {
    float: left;
    margin-right: 1em;
    margin-bottom: 1ex;
}