* {
    box-sizing: border-box;
}

html {
    height: 100%;
    width: 100%;
    overflow-y: hidden;
}

body{
    font-family: ff-clan-web-pro, "Helvetica Neue", Helvetica, sans-serif;
    font-size:14px;
    margin:auto;
    min-height: 100%;
    min-width:100%;
    padding:10px;
    line-height: 1.6em;
}
.map{
    z-index:9;
}

.button {
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    height: 25px;
    width: 55px;
    border: none;
    border-radius: 0;
}

.button:hover{
    background: #FF5F1F;
    color: white;
}

.tooltip {
    pointer-events: none;
    position: absolute;
    z-index: 9;
    font-size: 12px;
    padding: 10px;
    background: #000;
    color: #fff;
    min-width: 160px;
    max-height: 240px;
    overflow-y: hidden;
}

.control{
    border-radius: 6px;
    line-height: 1.2;
    min-width: 240px;
    width:240px;
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 8px;
    background: white;
    z-index: 10;
}

.control p{
    margin:0;
    padding:0;
}

.control .newtime-box{
    text-align:center;
    width: 80px;
    height: 25px;
    border-radius: 0;
}

.control a{
    text-decoration:  none;
    color: #C28E0E;
    line-height: 0;
    font:  normal 20px Arial, Helvetica, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.control a:hover{
    color: blue;
}

.layer-control{
    line-height: 1.2;
}

.layer-control #play{
    float: left;
    width: 45%;
    margin-top:5px;
    margin-bottom:5px;
}

.layer-control #speed{
    float: left;
    width: 55%;
    margin-top:5px;
    margin-bottom:10px;
}

.form-control{
    background-color: #333;
    color:#fff;
    width: 220px;
    height:25px;
}

.layer-setting{
    display: inline-block;
    float: right;
    visibility: hidden;
}

.chart{
    background-color:white;
    border-radius: 6px;
    line-height: 1.8333;
    height: 300px;
    padding: 10px;
    position: absolute;
    left: 5px;
    bottom: 5px;
    width: 400px;
    z-index: 10;
    font-size:12px;
}

.plot{
    height: 260px;
    width: 380px;
    left: 5px;
    bottom: 5px;
    right: 5px;
    z-index: 10;
    font-size:12px;
}

.legend{
    background: white;
    border-radius: 6px;
    line-height: 0.8;
    width: 287px;
    height: 140px;
    padding: 10px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 10;
}

.legend h2{
    text-align: left;
    font-size: 16px;
    font-style: italic;
    margin:0;
    padding:0;
}

.legend .cell-legend{
    height: 60px;
}

.legend .speed-legend{
    width: 240px;
    font-size:11px;
    height: 60px;
}

.legend .station-legend{
    font-size:11px;
}

.legend .vehicle-legend{
    font-size:11px;
}

.client{
    background: white;
    line-height: 1.2;
    border-radius: 6px;
    width: 276px;
    height: 200px;
    padding: 10px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
}

.client .url-box{
    border-radius: 0;
    width: 200px;
}

.client .client-instruction ul {
    color:#333;
    padding-left: 10px;
    padding-bottom: 0;
    padding-top: 0;
}

.react-vis-magic-css-import-rule {
    display: inherit;
}

.rv-treemap {
    font-size: 12px;
    position: relative;
}

.rv-treemap__leaf {
    overflow: hidden;
    position: absolute;
}

.rv-treemap__leaf--circle {
    align-items: center;
    border-radius: 100%;
    display: flex;
    justify-content: center;
}

.rv-treemap__leaf__content {
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
}

.rv-xy-plot {
    color: #c3c3c3;
    position: relative;
}

.rv-xy-plot canvas {
    pointer-events: none;
}

.rv-xy-plot .rv-xy-canvas {
    pointer-events: none;
    position: absolute;
}

.rv-xy-plot__inner {
    display: block;
}

.rv-xy-plot__axis__line {
    fill: none;
    stroke-width: 2px;
    stroke: #e6e6e9;
}

.rv-xy-plot__axis__tick__line {
    stroke: #e6e6e9;
}

.rv-xy-plot__axis__tick__text {
    fill: #6b6b76;
    font-size: 11px;
}

.rv-xy-plot__axis__title text {
    fill: #6b6b76;
    font-size: 11px;
}

.rv-xy-plot__grid-lines__line {
    stroke: #e6e6e9;
}

.rv-xy-plot__circular-grid-lines__line {
    fill-opacity: 0;
    stroke: #e6e6e9;
}

.rv-xy-plot__circular-grid-lines__line {
    fill-opacity: 0;
    stroke: #e6e6e9;
}

.rv-xy-plot__series,
.rv-xy-plot__series path {
    pointer-events: all;
}

.rv-xy-plot__series--line {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
}

.rv-crosshair {
    position: absolute;
    font-size: 11px;
    pointer-events: none;
}

.rv-crosshair__line {
    background: #47d3d9;
    width: 1px;
}

.rv-crosshair__inner {
    position: absolute;
    text-align: left;
    top: 0;
}

.rv-crosshair__inner__content {
    border-radius: 4px;
    background: #3a3a48;
    color: #fff;
    font-size: 12px;
    padding: 7px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.rv-crosshair__inner--left {
    right: 4px;
}

.rv-crosshair__inner--right {
    left: 4px;
}

.rv-crosshair__title {
    font-weight: bold;
    white-space: nowrap;
}

.rv-crosshair__item {
    white-space: nowrap;
}

.rv-hint {
    position: absolute;
    pointer-events: none;
}

.rv-hint__content {
    border-radius: 4px;
    padding: 7px 10px;
    font-size: 12px;
    background: #3a3a48;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    color: #fff;
    text-align: left;
    white-space: nowrap;
}

.rv-discrete-color-legend {
    box-sizing: border-box;
    overflow-y: auto;
    font-size: 12px;
}

.rv-discrete-color-legend.horizontal {
    white-space: nowrap;
}

.rv-discrete-color-legend-item {
    color: #3a3a48;
    border-radius: 1px;
    padding: 9px 10px;
}

.rv-discrete-color-legend-item.horizontal {
    display: inline-block;
}

.rv-discrete-color-legend-item.horizontal .rv-discrete-color-legend-item__title {
    margin-left: 0;
    display: block;
}

.rv-discrete-color-legend-item__color {
    background: #dcdcdc;
    display: inline-block;
    height: 2px;
    vertical-align: middle;
    width: 14px;
}

.rv-discrete-color-legend-item__title {
    margin-left: 10px;
}

.rv-discrete-color-legend-item.disabled {
    color: #b8b8b8;
}

.rv-discrete-color-legend-item.clickable {
    cursor: pointer;
}

.rv-discrete-color-legend-item.clickable:hover {
    background: #f9f9f9;
}

.rv-search-wrapper {
    display: flex;
    flex-direction: column;
}

.rv-search-wrapper__form {
    flex: 0;
}

.rv-search-wrapper__form__input {
    width: 100%;
    color: #a6a6a5;
    border: 1px solid #e5e5e4;
    padding: 7px 10px;
    font-size: 12px;
    box-sizing: border-box;
    border-radius: 2px;
    margin: 0 0 9px;
    outline: 0;
}

.rv-search-wrapper__contents {
    flex: 1;
    overflow: auto;
}

.rv-continuous-color-legend {
    font-size: 12px;
}

.rv-continuous-color-legend .rv-gradient {
    height: 4px;
    border-radius: 2px;
    margin-bottom: 5px;
}

.rv-continuous-size-legend {
    font-size: 12px;
}

.rv-continuous-size-legend .rv-bubbles {
    text-align: justify;
    overflow: hidden;
    margin-bottom: 5px;
    width: 100%;
}

.rv-continuous-size-legend .rv-bubble {
    background: #d8d9dc;
    display: inline-block;
    vertical-align: bottom;
}

.rv-continuous-size-legend .rv-spacer {
    display: inline-block;
    font-size: 0;
    line-height: 0;
    width: 100%;
}

.rv-legend-titles {
    height: 16px;
    position: relative;
}

.rv-legend-titles__center,
.rv-legend-titles__left,
.rv-legend-titles__right {
    position: absolute;
    white-space: nowrap;
    overflow: hidden;
}

.rv-legend-titles__center {
    display: block;
    text-align: center;
    width: 100%;
}

.rv-legend-titles__right {
    right: 0;
}

.rv-radial-chart .rv-xy-plot__series--label {
    pointer-events: none;
}