:root {
    --bs-cyan: #00A7A1;
    --bs-primary: #00A7A1;
    --bs-primary-rgb: 0,167,161;
    --bs-light: #EEEFEF;
    --bs-light-rgb: 238,239,239;
    --bs-dark: #4C4A4A;
}

body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
embed,object {
	padding: 0;
	vertical-align: baseline;
	font-size: 100%;
	margin: 0;
	/*font-family: 'Noto Sans TC';*/
	font-family: 'Noto Sans CJK TC', 'Noto Sans TC', sans-serif;
    background: none;
}
html body *{
	font-family: 'Noto Sans CJK TC', 'Noto Sans TC', sans-serif;
	word-wrap: break-word;
}
body { 
    color: var(--bs-dark); 
}

body:before {
    content: ' ';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image: url("/static/img/favicon.png");
    background-repeat: repeat;
    background-size: 32px 32px;
    background-position: center;
    z-index: -100;
}


.bg-cyan {
    background-color: var(--bs-cyan);
    color: var(--bs-white);
}

.border-cyan {
    --bs-border-color: var(--bs-cyan);
}

.btn-cyan {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-cyan);
    --bs-btn-border-color: var(--bs-cyan);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-teal);
    --bs-btn-hover-border-color: var(--bs-teal);
    --bs-btn-focus-shadow-rgb: var(--bs-cyan-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-teal);
    --bs-btn-active-border-color: var(--bs-teal);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-gray);
    --bs-btn-disabled-border-color: var(--bs-gray);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-cyan);
    --bs-link-color: var(--bs-cyan);
    --bs-link-hover-color: var(--bs-cyan);
}

@media(max-width: 767.98px) {
    .station-scroll {
        overflow-x: visible;
        overflow-y: auto;
        height: calc(100vh - 350px);
        width: 100%;
    }
    .railway-display {
        padding-left: 1.5em;
    }
}

@media(min-width: 767.98px) {
    .station-scroll {
        overflow-x: visible;
        overflow-y: auto;
        height: calc(100vh - 250px);
        width: max(50vw, 600px);
    }
    .railway-display {
        padding-left: 15vw;
    }
}

.railway-display li {
    list-style: none;
    height: 50px;
    width: clamp(270px, 85%, 500px);
    border-color: var(--bs-cyan);
    border-width: 0 0 0 2px;
    border-style: dashed;
    padding-left: 15px;
    margin-left: 4rem;
    position: relative
}

.railway-display .powerplant h3, 
.railway-display .station-detail h3, 
.railway-display .station h3 {
    position: absolute;
    text-align: end;
    color: var(--bs-cyan);
    left: -6rem;
    right: calc(100% + 1rem);
    top: 0.15rem;
}

.railway-display .non-station h3 {
    display: none;
}

.railway-display .powerplant:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    left: -6px;
    top: calc(0.15rem + 3px);
    background: var(--bs-red);
    border-width: 2px;
    border-style: solid;
    border-color: var(--bs-red);
}

.railway-display .station:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    left: -8px;
    top: calc(0.15rem + 2px);
    background: var(--bs-cyan);
    border-width: 0px;
    border-style: solid;
    border-color: var(--bs-cyan);
}

.railway-display .station-detail:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    left: -6px;
    top: calc(0.15rem + 5px);
    background: var(--bs-cyan);
    border-width: 2px;
    border-style: solid;
    border-color: var(--bs-cyan);
}

.railway-display .non-station:before {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    left: -6px;
    top: calc(0.15rem + 3px);
    background: var(--bs-cyan);
    border-width: 2px;
    border-style: solid;
    border-color: var(--bs-cyan);
}

.railway-display .blank {
    border-style: dotted;
}