@charset "utf-8";

*[onclick], a, :is(*[onclick], a) *, button, select, label {
    cursor: pointer;
    
    -webkit-tap-highlight-color: rgba(153, 153, 153, 0.2);
}

*[onclick]:hover, *[onclick]:hover *, a:hover, a:hover *, button:hover, select:hover, label:hover {
    text-decoration: none !important;
}

input, textarea {
    cursor: text;
}

.menu_button_active {
    background-color: #555555 !important;
    
    .dark_mode & {
        background-color: #444444 !important;
    }
}

.menu_button_with_notification:before {
    content: "";
    
    display: block;
    
    position: absolute;
    top: 4px;
    right: 10px;
    
    padding: 6px;
    
    border-radius: 6px;
    
    background-color: #ee3333;
}

#menu {
    opacity: 0.5;
    
    background-color: #ffffff;
    
    line-height: 40px;
    
    overflow-y: scroll;
    
    z-index: 35;
    
    transition-duration: 0.25s;
    transition-property: all;
    
    .dark_mode & {
        border-color: #444444;
        
        background-color: #666666;
    }
    
    div {
        display: none;
    }
    
    b {
        display: block;
        
        width: 90%;
        height: 30px;
        
        margin: 0 5% 10px 5%;
        
        background-color: #eeeeee;
        
        line-height: 30px;
        text-align: center;
        
        .dark_mode & {
            background-color: #777777;
        }
    }
    
    hr {
        width: 90%;
        height: 2px;
        
        margin: 9px auto;
        
        border: none;
        
        background-color: #cccccc;
        
        .dark_mode & {
            background-color: #999999;
        }
    }
}

.menu_open {
    max-height: calc(100% - 60px) !important;
    
    opacity: 1.0 !important;
    
    padding: 9px 0;

    border: 1px solid #555555;
    
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

#menu button, #menu a {
    display: block;
    
    width: 100%;
    height: 40px;
    
    line-height: 40px;
    font-size: 15px;
    color: inherit;
    text-align: center;
    text-decoration: none;
    
    .dark_mode & {
        color: #eeeeee;
    }
    
    .enlarge & {
        height: 50px;
        
        line-height: 50px;
        font-size: 16px;
    }
}

.beginner:before {
    content: "";
    
    display: inline-block;
    
    width: 12px;
    height: 1lh;
    
    margin-right: 3px;
    
    background-image: url(data:image/webp;base64,UklGRtYAAABXRUJQVlA4TMkAAAAvF8AIEN9AkG3T+avd6RoE2TY90/3ZZiBtm2z+DdzsxzCSJCXvj5N/BMREEO7wMgGxH0gAEwAAGQAy8MuXko0ICBRYWGy1pqYQENBTcMORJLltgwUk55zD/z9qYhc4+hjRf4NJ26QJ7IBd8Zqni5X7Lte3BeCHiqsDa2AHf2vugTQbFhFJGZMVCUhKwaYkwl8NbA93VPCJJvZnscK+x/rp2Hfwr90D25L0ZMoiqU4rK6Q+pnYccnqPwH4QD6t2DL4bpjo7rTdnYwwA);
    background-repeat: no-repeat;
    background-size: 12px 18px;
    background-position: center;
    
    vertical-align: top;
}

.enlarge .category_index {
    line-height: 32px;
}

.enlarge .subcategory_index {
    line-height: 30px;
    
    &:before {
        top: 23px;
    }
    
    &.active_index:before {
        top: 22px;
    }
}

.enlarge #icon_area {
    a {
        width: 90px;
        height: 100px;
        
        margin: 5px 0;
        
        font-size: 15px;
        line-height: 18px;
    }
    
    img {
        width: 40px;
    }
}

.enlarge .railroad_link {
    width: calc(100% - 60px) !important;
    
    padding: 5px 0 5px 50px !important;
    
    img {
        width: 30px !important;
    }
}

.write_button {
    position: fixed;
    bottom: 20px;
    left: max(25px, calc(50% - 225px));
    
    width: calc(100% - 50px) !important;
    
    max-width: 450px;
    
    padding: 5px 10px;
    
    background-color: rgba(255, 255, 255, 0.9);
    background-image: linear-gradient(315deg, #666666 10px, transparent 10px) !important;
    
    border: 1px solid #666666;
    border-radius: 6px;
    
    line-height: 26px;
    color: #333333;
    
    z-index: 2;
    
    .dark_mode & {
        background-color: rgba(68, 68, 68, 0.85);
        background-image: linear-gradient(315deg, #cccccc 10px, transparent 10px) !important;
        
        border-color: #cccccc;
        
        color: #ffffff;
    }
    
    .dark_mode .preview_popup & {
        background-color: rgba(102, 102, 102, 0.85);
    }
    
    &:before {
        content: "";
        
        display: inline-block;
        
        height: 26px;
        width: 26px;
        
        margin-right: 4px;
        
        background-image: url(data:image/webp;base64,UklGRsoBAABXRUJQVlA4TL0BAAAvM8AMELXIkWzbdao3H0JC+3h3XQkbaj7MHWkHGxMfIm8O9gi+qQg4tG2bdr5tW7GTzjY62zYrO52qjLS2bVW2bdu+ExDXR+LbMFlbRDs8AZlcEHAG8zrFcQQ4z1wzsiIvV9J5IPH55n1V8kayDfH8C5nYuAzQyZg5ZQr2WMDJGjkVhHC5gsdDpkcPT17XI6ZGwprPJT0pLA9Jb5nJDq4DtLoCDZnJ7iHag6JcylDTrMKS5WyOA8RyX4nvZfnbS+e02kA15/DsPQCRu/+byPCc7FIn1eOJTe220T1aYuo9PCx/eND66ojwoDz1ZhWWXZtfjabwZCxlPufyHt0l9ZYflg/tQHv79GjpqeMblhOfV43ZM5gHVSnzj2FYorvWqAjLAdqnUuYNkUf3T/0mLO840zg6xXlQCNBxCktkfGhMlkdrAcj8zrXCcmaeOmVhuYCzpH3/eLTI1P+H5TGVG42NTaRHLwXok11YosK3Rld40pvy77PHzDh1isKzRWlcjxSTSV8jNDwH6IjgXmFhAfeoKlqVbhI2NwL1A8S2muIqzmdCnyiWz3FFTQu6DednGmgnBZ0BVhXuVVVxAS0AAA==);
        background-size: 26px;
        
        vertical-align: top;
    }
    
    .dark_mode &:before {
        background-image: url(data:image/webp;base64,UklGRtYBAABXRUJQVlA4TMkBAAAvM8AMENXIrW1btRuVrnrUhBpQqpjM772zj6CAzzvYhvhY2TZlDCHTccQwIqBAAEDAedu2Oa/ZRrNtM9lrSrtV27aSbdu2NwF15xhxMRSZI1YOHvi3cZ7+M5DWVRQOvYpZGEoh1xvRkQKdL3jbZLyOSTJP8UfYN6xVtoCD0SNmDNKYge8fMHoHPAbnxQY8nFM1EGa83D9A9D7mPj7WRGJJBu6pbWwPLt2DNOttY2cG18hCr43BGxrdkwWWDIeSHOX4WudXUXKJ1Puwwak00W0StxG3By1N2JqfUjRmUGxw38/IGpFgHmEl+RL3HFZmEA2UmQ/Lkkwt/HDZWJoYNf3/VKIRzuaRV5IfsM/lReA0Ms18+pTkxL7LYWYG0kClafzBoCRD5zmH8pKcAXPS9DfwNNLPPFJKcsDglMPhGw0UmA/HkjwR4Z3DxH2NaDaNn9QsyRMz8ygtyRkYi9zjc6oGIsxnXEmeEHHNYX0G1fhqHrYlOSnxxaGzNNFj+tWFRhqZz8LSnCI5XCVB5IYeh5DS3ALuQnDHYP6jRnejhUnjknlNoK5ke5Rtwllwdap/r8QlqofAA0IpX2Q92sbkQXsb1F3q3d11E0oAAA==);
    }
}

.enlarge #timetable_area a, .enlarge .timetable_train {
    padding: 10px 8px;
}

.enlarge #timetable_area a b {
    font-size: 20px;
}

.enlarge input[type="checkbox"] + label.drop_down {
    line-height: 30px;
}

.enlarge #operation_data_area {
    th {
        padding: 12px 0;
        
        font-size: 17px;
    }

    td {
        padding: 10px 0;
        
        font-size: 17px;
    }
}

.enlarge .formation_table h5 {
    font-size: 16px;
    
    a {
        font-size: 18px;
    }
}

.enlarge .formation_table div {
    line-height: 28px;
    font-size: 17px;
    
    padding: 1px 5px;
}

#popup_background {
    position: fixed;
    top:0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    background-color: #ffffff;
    
    z-index: 50;
    
    .dark_mode & {
        background-color: #444444;
    }
}

.popup_active {
    display: block !important;
    
    opacity: 1;
}

@keyframes fade_in {
    0% {
        opacity: 0;
    }
    
    100% {
        opacity: 1;
    }
}

.popup {
    position: fixed;
    top: 0;
    
    display: none;
    
    width: 100%;
    height: 100%;
    
    box-sizing: border-box;
    
    padding: 50px max(10px, calc(50% - 240px));
    
    background-color: #ffffff;
    
    overflow: scroll;
    
    z-index: 51;
    
    .dark_mode & {
        background-color: #444444;
    }
    
    &.popup_active {
        animation: fade_in 0.3s ease-out, popup_up 0.05s ease-out;
    }
    
    .popup_close_button, .screenshot_button {
        top: 10px;
        
        animation: popup_up 0.05s ease-out;
        
        .dark_mode & {
            background-color: rgba(68, 68, 68, 0.85);
        }
    }
    
    h3 {
        background-color: #444444;
        
        color: #ffffff;
        
        .dark_mode & {
            background-color: #808080;
        }
    }
    
    h4 {
        border-color: #666666;
        
        line-height: 32px;
        font-size: 18px;
        
        .dark_mode & {
            border-left-color: #cccccc;
        }
    }
    
    h5 {
        margin: 20px 0 0 0;
        
        font-size: 16px;
    }
    
    input {
        display: block;
        
        width: calc(90% - 4px);
        
        margin: 10px auto;
        
        padding-block: 0;
        padding-inline: 2px;
        
        background-color: transparent;
        
        font-size: 18px;
    }
}

@keyframes popup_up {
    0% {
        top: 50px;
    }
    
    100% {
        top: 0;
    }
}

#railroad_select_popup h2 {
    width: 100%;
    height: 40px;
    
    max-width: 100%;
    
    margin: 0;
    
    padding: 50px 0 0 0;
    
    background-size: 60px;
    background-position: 50% 0;
    background-color: #f7f7f7;
    
    .dark_mode & {
        background-color: #808080;
        
        color: #ffffff;
    }
}

#railroad_select_popup_inner {
    height: calc(100% - 90px);
}

.descriptive_text a {
    color: inherit;
}

.external_link:after {
    content: "";
    
    display: inline-block;
    
    width: 18px;
    height: 1lh;
    
    margin-left: 2px;
    
    background-image: url(data:image/webp;base64,UklGRqYAAABXRUJQVlA4TJkAAAAvI8AIEDdAkG2z+hMc9h4Ekjazf4KHPRBI2sz+CR72QCRAAs1HVv+fMiq2HfsvilTCUSNJjlR77n0ptQbHQfAAhkEffxhjas4AiOj/BEiila70ZxQLrjOb+rHguiA7bDPFS7ziJV5pXlMJUBUzpTnqOpEAVVKMSnOSlIMLwFvtQAEcjStUGQqO1rXK0q5zZqb//+xvsb/E/RoA);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
    
    vertical-align: top;
}

:is(.popup, .square_popup) input[type="number"] {
    display: inline-block;
    
    width: 50px;
    
    margin-left: 20px;
    
    font-size: 18px;
}

#line_select_popup h4 {
    margin: 20px auto 15px auto;
}

.connecting_railroad_link {
    display: block;
    
    width: 300px;
    
    margin: 5px auto;
    padding: 10px 8px 10px 16px;
    
    border-left: 6px solid #999999;
    
    color: inherit;
    text-align: left;
    
    a {
        display: block;
        
        padding-left: 10px;
        
        line-height: 36px;
        color: inherit;
    }
    
    small {
        margin-left: 5px;
        
        color: #666666;
        font-size: 14px;
        
        .dark_mode & {
            color: #cccccc;
        }
    }
}

div.connecting_railroad_link h5 {
    margin: -5px 0 10px 0;
    
    color: #999999;
    font-size: 16px;
}

a.connecting_railroad_link h5, .connecting_railroad_link a {
    margin: 0;
    
    color: inherit !important;
    font-size: 18px;
}

#diagram_list_popup .wide_button {
    background-image: linear-gradient(315deg, #ffffff 14px, transparent 14px) !important;
    
    .dark_mode & {
        background-image: linear-gradient(315deg, #666666 14px, transparent 14px) !important;
    }
}

#screenshot_preview {
    position: relative;
    
    height: 480px;
    
    margin-bottom: 20px;
    
    padding: 10px;
    
    background-color: rgba(0, 0, 0, 0.6);
    
    &:empty:before {
        position: absolute !important;
        
        top: 190px !important;
        left: calc(50% - 60px) !important;
    }
    
    img {
        display: block;
        
        max-width: 100%;
        max-height: 480px;
        
        margin: 0 auto;
    }
}

#popup_screen, #wait_screen {
    position: fixed;
    top:0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    background-color: rgba(0, 0, 0, 0.75);
    
    overflow: hidden;
    
    z-index: 200;
}

.popup_screen_active {
    display: block !important;
    
    animation: fade_in 0.75s ease-out;
}

#popup_screen_blank_area {
    width: 100%;
    height: 100%;
    
    z-index: 201;
    
    cursor: default;
}

.square_popup, .preview_popup {
    display: none;
    
    position: fixed;
    top: calc(50% - 160px);
    left: calc(50% - 160px);
    
    width: 310px;
    height: 280px;
    
    z-index: 202;
    
    padding: 40px 5px 0 5px;
    
    background-color: #ffffff;
    
    text-align: center;
    
    .dark_mode & {
        background-color: #666666;
        
        .operation_data_detail button {
            background-color: rgba(102, 102, 102, 0.85) !important;
        }
    }
    
    input {
        display: block;
        
        width: 235px;
        
        margin: 0 auto;
        
        padding-block: 0;
        
        line-height: 24px;
        font-size: 18px;
        text-align: center;
    }
    
    button {
        line-height: 22px;
        
        .dark_mode & {
            background-color: rgba(102, 102, 102, 0.85);
            
            color: #ffffff;
        }
    }
    
    .popup_close_button {
        top: calc(50% - 150px);
        right: calc(50% - 150px);
    }
}

.square_popup.popup_active {
    animation: square_popup_up 0.05s ease-out;
    
    .popup_close_button, .screenshot_button {
        animation: square_popup_close_button_up 0.05s ease-out;
    }
}

@keyframes square_popup_up {
    0% {
        top: calc(50% - 110px);
    }
    
    100% {
        top: calc(50% - 160px);
    }
}

@keyframes square_popup_close_button_up {
    0% {
        top: calc(50% - 100px);
    }
    
    100% {
        top: calc(50% - 150px);
    }
}

.preview_popup {
    width: calc(100% - 50px);
    height: calc(100% - 70px);
    
    max-width: 450px;
    
    padding: 40px 10px 0 10px;
    
    top: 15px;
    left: max(15px, calc(50% - 235px));
    
    overflow: scroll;
    
    .popup_close_button {
        top: 20px;
        right: max(20px, calc(50% - 230px));
    }
    
    .screenshot_button {
        top: 20px;
        right: max(75px, calc(50% - 175px));
    }
}

.preview_popup.popup_active {
    animation: preview_popup_up 0.05s ease-out;
    
    .popup_close_button, .screenshot_button {
        animation: preview_popup_close_button_up 0.05s ease-out;
    }
}

@keyframes preview_popup_up {
    0% {
        top: 65px;
    }
    
    100% {
        top: 15px;
    }
}

@keyframes preview_popup_close_button_up {
    0% {
        top: 70px;
    }
    
    100% {
        top: 20px;
    }
}

.link_block {
    padding: 15px 0 10px 0;
    
    text-align: center;
}

.link_block a, h4 a {
    color: #666666;
    
    .dark_mode & {
        color: #cccccc;
    }
}

.warning_text {
    .key_and_value & {
        padding: 0;
    }
    
    a {
        color: #663333;
        
        .dark_mode & {
             color: #ff9999;
        }
    }
}

#announcements_heading, #railroad_announcements_heading, #off_line_message_popup h3 {
    width: calc(100% - 40px);
    height: 32px;
    
    margin: -20px auto 20px auto;
    
    padding-top: 54px;
    
    background-size: 36px;
    background-position: 50% 10px;
    background-color: #808080;
    
    border-radius: 10px;
    
    color: #ffffff;
}

.announcements_heading_important {
    background-color: #ee3333 !important;
}

#railroad_announcements_heading {
    font-size: 16px;
}

#announcements_area input[type="checkbox"] + label.drop_down {
    width: calc(100% - 80px);
    
    padding: 10px 40px;
}

.important_announcement {
    background-image: url(data:image/webp;base64,UklGRnIBAABXRUJQVlA4TGYBAAAvNUANELfBKpJkJ/3IGQQggT/8K0trg1EbSY68EcDy53i6/wRWkSQ76UfOIAAJ/OFfWVpWsW0ruffh/kskshKCCJRwd7cToHRwubTBAJ8bAHAAAIACAAySwkgMDIaEA7dBi7BmIi4KIBflj6SA9mWETVFR8PtFRqavv7aN1q+6+i0KvDLKJimly1Tfun3iCZe3BMM/POMYqdXSMQ5ax0rnOuneN8G1bdtms5PL1LZtt///bw1OTo2HiP5PAAKnnU3KyFhNatOZIuIwJ5nW5mFEU0m2qiUC1gXJOj/2EXnJvOheNSX7OoClojkcfQ80qg/kJe3F8b3QyCom8hbktH0bvc1tVLK3kbS3YeVt0P9HOZ19T9xeQI9qt/fdUSUyVBfH90KVqt5GqXMb3dFtrJC7hSqw0DSHo++BRvUBtGjibQCAyHErulcY53nlxvAXdcVHN7YIOStzqQ4QcdSrpGw8Nl3qjRAI);
    background-repeat: no-repeat;
    background-size: 27px;
    background-position: 9px 50%;
}

.new_icon:before, .new_icon_red:before {
    content: "";
    
    display: inline-block;
    
    margin: calc(0.5lh - 5px) 5px calc(0.5lh - 5px) 0;
    
    padding: 5px;
    
    border-radius: 5px;
    
    background-color: #33cc99;
    
    vertical-align: top;
}

.new_icon_red:before {
    background-color: #ee3333;
}

.announcement {
    padding: 15px;
    
    background-color: #eeeeee;
    
    font-size: 18px;
    text-align: left;
    word-break: break-all;
    
    .dark_mode & {
        background-color: #777777;
    }
    
    small {
        display: block;
        
        margin-top: 10px;
        
        font-size: 16px;
        color: #666666;
        text-align: right;
        
        .dark_mode & {
            color: #cccccc;
        }
    }
}

#about_railroad_data_popup, #about_popup, :is(#about_popup, #about_railroad_data_popup) .informational_text {
    text-align: center;
    
    h4 {
        padding: none;
        
        border: none;
    }
}

#about_railroad_data_popup {
    h2 {
        font-size: 20px;
        color: #ffffff;
    }
    
    img {
        display: block;
        
        width: 40px;
        
        margin: 5px auto;
    }
}

.long_text {
    margin: 20px 5px 40px 5px;
    
    line-height: 1.8em;
    text-align: left;
    word-break: break-all;
}

#captcha_popup h3 {
    margin-top: -10px;
}

#captcha_area {
    margin-bottom: 20px;
    
    button {
        min-width: 0 !important;
        
        border-radius: 0;
    }
}

button:has(abbr) {
    width: 316px;
    
    margin: 5px auto;
    
    padding: 6px;
    border-radius: 4px;
    
    background-image: linear-gradient(315deg, #999999 14px, transparent 14px);
    
    line-height: 32px !important;
    font-size: 18px;
    text-align: left;
    
    .dark_mode & {
        border-color: #cccccc;
        
        background-image: linear-gradient(315deg, #cccccc 14px, transparent 14px);
    }
    
    abbr {
        width: 32px;
        
        line-height: 32px;
    }
}

.operation_data_detail {
    margin: 0 5px;
    
    padding: 5px 0;
    
    line-height: 24px;
    text-align: left;
    
    &:not(:last-child) {
        border-bottom: 1px solid #dddddd;
    }
    
    .dark_mode & {
        border-bottom-color: #808080;
    }
    
    &:after {
        content: "";
        
        display: block;
        
        clear: both;
    }
    
    b {
        display: block;
        
        line-height: 24px;
        font-size: 18px;
        
        small {
            display: inline-block;
            
            margin-right: 10px;
            
            padding-top: 4px;
            
            line-height: 24px;
            font-size: 15px;
            font-weight: normal;
        }
    }
    
    small {
        font-size: 14px;
        color: #666666;
        
        .dark_mode & {
            color: #cccccc;
        }
    }
    
    span {
        float: right;
        
        font-size: 16px;
        font-weight: normal;
    }
    
    a small {
        color: inherit !important;
    }
    
    .descriptive_text {
        padding: 0 5px;
    }
    
    .warning_sentence {
        text-align: center;
    }
}

.operation_data_detail button, .key_and_value button {
    display: inline-block;
    
    margin: 0 0 0 10px;
    padding: 0 6px;
    
    line-height: 22px;
    font-size: 14px;
    vertical-align: top;
}

.formation_data_area {
    margin-top: 5px;
    
    font-weight: bold;
}

.formation_data_area a, #semifixed_formation_area a {
    color: inherit;
    white-space: nowrap;
}

.train_detail_day {
    position: absolute;
    top: 12px;
    left: 16px;
    
    padding: 4px 20px;
    
    border-radius: 4px;
    
    line-height: 24px;
    font-size: 16px;
}

#train_operation_detail_area, #operation_data_detail_area {
    margin-top: 15px;
}

#train_detail_popup h4, #operation_detail_popup h4 {
    margin-top: 30px;
    
    line-height: 18px;
    font-size: 18px;
}

.station_times {
    width: min(100%, 360px);
    
    margin: 0 auto 60px auto;
    
    border-collapse: collapse;
    
    font-size: 18px;
    text-align: left;
    
    tr:nth-child(2n) {
        background-color: #f7f7f7;
        
        .dark_mode & {
            background-color: #777777;
        }
    }
    
    tr td {
        height: 44px;
        
        padding: 0;
        
        &:first-child {
            position: relative;
            
            width: 50px;
            
            .connecting_railroads_button {
                top: 6px;
                left: 6px;
                
                width: 30px;
                height: 30px;
                
                border-width: 1px;
                
                background-color: #ffffff;
                background-size: 30px;
                
                .dark_mode & {
                    background-color: #666666;
                }
            }
        }
        
        &:nth-child(2) {
            position: relative;
            
            width: 20px;
            
            &:before {
                content: "";
                
                position: absolute;
                top: 16px;
                left: 6px;
                
                width: 8px;
                height: 8px;
                
                background-color: #ffffff;
                
                border-radius: 4px;
                
                .dark_mode & {
                    background-color: #eeeeee;
                }
            }
        }
        
        &:nth-child(3) {
            width: 80px;
            
            time, small {
                display: block;
                
                line-height: 20px;
                text-indent: 5px;
            }
            
            small {
                font-size: 15px;
                color: #666666;
                
                .dark_mode & {
                    color: #cccccc;
                }
            }
        }
        
        &:last-child {
            width: calc(100% - 150px);
        }
    }
    
    .train_detail_departure_time_highlight {
        font-weight: bold;
        
        td:nth-child(2):before {
            top: 13px;
            left: 3px;
            
            width: 12px;
            height: 12px;
            
            background-color: #ffff33;
            
            border: 1px solid #ffffff;
            border-radius: 7px;
            
            .dark_mode & {
                background-color: #cccc33;
                
                border-color: #eeeeee;
            }
        }
    }
    
    .deadhead_train_departure_time time {
        &:before {
            content: "(";
            
            color: #999999;
        }
        
        &:after {
            content: ")";
            
            color: #999999;
        }
    }
}

#train_detail_popup .informational_text {
    margin-top: 20px;
    margin-bottom: 80px;
}

.train_overview, .operation_table_train, .location_overview {
    position: relative;
    
    margin-bottom: 14px;
    
    padding: 0 15px;
    
    font-size: 18px;
    
    &:after {
        content: "";
        
        display: block;
        
        position: absolute;
        bottom: -10px;
        left: calc(50% - 12px);
        
        width: 0;
        
        border: 12px solid transparent;
        border-top: 6px solid #dddddd;
        border-bottom: none;
        
        .dark_mode & {
            border-top-color: #808080;
        }
    }
    
    &:last-of-type:after {
        border-top: none;
    }
}

#operation_detail_popup_inner {
    text-align: center;
    
    .heading_wrapper :is(.previous_button, .next_button) {
        height: 60px;
    }
}

#operation_trains_area {
    margin: 20px 0 80px 0;
}

.operation_table_train {
    margin-bottom: 32px;
    
    padding: 7px 11px;
    
    border: 1px solid #dddddd;
    border-radius: 4px;
    
    .dark_mode & {
        border-color: #666666;
    }
    
    &:first-child, &:last-child {
        border-color: transparent !important;
    }
    
    &.operation_table_deposited_train {
        background-color: #eeeeee;
        
        .dark_mode & {
            background-color: #555555;
        }
    }
    
    &:after {
        bottom: -21px;
        left: calc(50% - 16px);
        
        border-width: 16px;
        border-top-width: 8px;
    }
    
    b:not(.train_overview_location) {
        display: block;
        
        width: 100%;
        
        padding-bottom: 8px;
        
        text-align: left;
        
        small {
            float: right;
        }
    }
    
    span:not(.search_highlight) {
        display: inline-block;
        
        width: 45%;
    }
    
    .coupling_info {
        padding: 8px 8px 0 0;
        
        text-align: right;
        color: #666666;
        
        .dark_mode & {
            color: #cccccc;
        }
        
        u {
            color: #333333;
            text-decoration: underline;
            
            .dark_mode & {
                color: #ffffff;
            }
        }
        
        small {
            color: #999999;
            font-size: 16px;
        }
    }
}

.train_overview {
    b {
        display: inline-block;
        
        width: 38%;
    }
    
    .train_overview_location, time {
        width: fit-content !important;
    }
    
    span:not(.search_highlight), time {
        display: inline-block;
        
        width: 26%;
    }
}

.location_overview b {
    margin-right: 40px;
}

:is(.train_overview, .operation_table_train) b small {
    font-size: 16px;
    color: #999999;
    font-weight: normal;
}

.train_overview div div, .operation_table_train div div, .operation_table_deposited_train div {
    display: inline;
}

.train_overview span:nth-of-type(2), .operation_table_train div div span:nth-child(2) {
    width: 10%;
}

.train_overview time, .operation_table_train time {
    margin-left: 16px;
}

#operation_data_formation {
    width: calc(100% - 90px);
    
    margin: 10px auto 0 auto;
    
    padding: 8px 55px 0 5px;
    
    line-height: 28px;
}

#car_number_suggest_mode_button {
    display: block;
    
    width: 36px;
    height: 36px;
    
    margin: -38px 0 0 calc(100% - 51px);
    
    border: none;
    
    background-image: url(data:image/webp;base64,UklGRiQCAABXRUJQVlA4TBcCAAAvR8ARENXIkiRZtRst/a1AkvnUHD0vQJs03DlzjuBXEWNmdpuZmRkjoAAAQLCZbW+3bdu2bds2km1FG8nJSrZt+xOQW8/OICW4NBSLTaHylBn+xZ9pbQJFjxtJ4syK9yhusBmoxPKtJrtkV/YuU6Dc8nZxRHaSLcBCq+Q4dFhRmB/r36MWMzHeJW6vtl5wIT2ldBAU2tV9wkxClEgS15XeIFlTMoYUTc7l81Virf+pJ6ZCLE9EZMOinBtVbsA+4Hf5vBbTzD0yrA7YTeTXoaAB34uJmB3wVT5HyGZmEuaRH3krF4dGUuMIs74rzx1G7+bUmpxvVSRy3eFtjm3tYvDsMNGX91/zLy6Le7pV94RDWwZXwb8cmjNoFc5ThPvSBEkw50VkupXnGP/TE88ixVguspEq5+jagCCc7MulOaM24jCdYTYdFtegsrMrl73tuIhJP3WwjtHoPD09bM5iS+4NU10ARK9reiHj5uuoeI7axcGG/GsZXeE/4XzqqHIeBYPM6Il8Ws6EqNf0Z3bOsU+d0jpkJ5lKfuXTuArO6K17k3uVpyc5dQgZcIs47uXzUWIzXlQ0Ne/sZmzC4a2uvVSyuVLzqkln5xz7S+K3pGf/fb6kk0Uq4zNIsS+9t9V8UQpvZfcKqfgR9CFHXiLMAg5np6WozR89COdGtqYGT9RXydzYd7iTeGPRas0SVG74W7t5/+8D5tasAA==);
    background-repeat: no-repeat;
    background-size: 36px;
    
    &.car_number_suggest_mode {
        background-image: url(data:image/webp;base64,UklGRkYCAABXRUJQVlA4TDkCAAAvR8ARECY51ba9f2I9Cnp7n/eXREBMUr73e78vZc05bySgoHnIYc+KABT8Z07mGIgENmYMIIG1PQJoG3HwWxEAKydzJuKEg4C0CQV/EbS5m8BAddHrjAWm/gcUAAAINrPt7bZt27Zt20ayrWgjOVnJtm1/AmL+2R6IBEuDWMwJDY/M4J/4U605QPRwQ5I40+IxxVnWA5JYfDOLXWQ37EWqgHLNG+HwDJM1QEMbyXrQwQrd+NH+MTWfiuGdxO2FXBcX5BZKK4GCdhZ31MSFEpLEdUPPIJkpMqqIJs5p42vx9JZFTLmwnBCRGY0y1hq5CvuA/2jjVUwjxmSwWmGUiF8DBRnwdRNitsJn2jiCbEQEwizke57ThEMmUGMQZmXnHxoYvRupNhl/GxHPTQNvE9jcCAPPBibKYuMZiUtxD7PR7RhoC+cUeMFAczi1wtiCcFmoIBLUuRcZ5u+TTDt7HjGmedSzbPBKBSc4sU/zcHh1xMB0uLFpYHEaVs7QxN4gzqPSWwasfWg0tlaqTbCwRXNNVcN7g+nZ8KuvQfGsNcKBDdpXwjvO3zE+FSxbhyqp0X3aaFl1oZ7p/yjc3DKktcoSKv/SvvczvO16sv67JHBqIKRCizjc08bHYvhFhal6RzHGEhy2RZPUB7hi9sKbKNxcIP9KepRv4Is8JVLhfyf20nuL2a4UtlE8ThI/BL2NmudO/FiKQk1hfgs9ezGb72TwdLyRjNl9G3fks0daq5ZAxaxvR3mPrcb8rAA=);
    }
}

#car_number_suggest_mode_info {
    width: calc(100% - 40px);
    
    margin: -5px auto 10px auto;
    
    line-height: 20px;
    font-size: 14px;
    color: #ff9900;
    font-weight: bold;
}

.suggestion_area {
    position: relative;
    
    width: calc(100% - 30px);
    
    margin: 0 auto 10px auto;
    
    div {
        position: absolute;
        top: 0;
        left: 0;
        
        width: calc(100% - 2px);
        max-height: 180px;
        
        background-color: #ffffff;
        
        font-size: 18px;
        
        overflow-y: scroll;
        
        z-index: 2;
        
        &:not(:empty) {
            border: 1px solid #cccccc;
            
            box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
            
            &:before {
                content: "候補:";
                
                display: block;
                
                position: absolute;
                top: 0;
                left: 10px;
                
                line-height: 40px;
                color: #999999;
            }
        }
        
        .dark_mode & {
            background-color: #666666;
            
            border-color: #808080;
        }
        
        button {
            display: block;
            
            width: calc(100% - 60px);
            
            padding: 5px 0 5px 60px;
            
            line-height: 30px;
            font-size: inherit;
            color: inherit;
            
            z-index: 2;
            
            small {
                margin-left: 5px;
                
                font-size: 14px;
                color: #999999;
            }
        }
    }
}

:is(.suggestion_area, #semifixed_formation_area) .train_icon {
    max-width: 30px;
    max-height: 30px;
    
    margin-right: 5px;
    
    vertical-align: top;
}

#operation_data_train_number {
    display: inline-block;
    
    width: 200px;
    
    line-height: 36px;
    font-size: 22px;
    text-align: center;
    
    & + button {
        display: inline-block;
        
        margin: 0;
        
        padding: 4px 24px;
        
        line-height: 26px;
        font-size: 18px;
    }
}

.select_operation_inbound, .select_operation_outbound {
    margin: 0 auto;
    
    border-spacing: 0;
    
    line-height: 60px;
    font-size: 20px;
    
    tr {
        height: 60px;
        
        td {
            padding: 0;
            
            &[onclick] {
                padding-right: 30px;
                
                text-align: left;
                text-decoration: underline;
            }
            
            div {
                display: inline-block;
                
                width: 43px;
                height: 46px;
                
                margin: 2px 10px 2px 0;
                
                padding: 4px 0;
                
                border: 1px solid #999999;
                
                line-height: 22px;
                font-size: 14px;
                color: #444444;
                text-align: center;
                text-decoration: none;
                vertical-align: top;
                
                .dark_mode & {
                    color: #eeeeee;
                }
                
                b {
                    display: block;
                    
                    line-height: 24px;
                    font-size: 16px;
                    white-space: nowrap;
                }
            }
        }
    }
    
    tr:first-child {
        td:first-child {
            width: 35px;
            
            line-height: 0;
            font-size: 16px;
            color: #999999;
            letter-spacing: 0.2em;
            
            span {
                display: inline-block;
                
                line-height: 35px;
                writing-mode: vertical-rl;
                white-space: nowrap;
            }
        }
    }
}

.select_operation_inbound tr:first-child {
    td:first-child {
        vertical-align: top;
        
        span:before {
            content: "▲";
        }
    }
    
    div {
        border-radius: 12px 12px 0 0;
    }
}

.select_operation_outbound tr:first-child td:first-child {
    vertical-align: bottom;
    
    span:after {
        content: "▼";
    }
}

.select_operation_outbound tr:last-child div {
    border-radius: 0 0 12px 12px;
}

#train_number_popup_inner {
    margin-bottom: 50px;
}

#train_number_popup {
    u {
        display: block;
        
        width: 240px;
        
        margin: 15px auto;
        padding: 0 20px;
        
        border-bottom: 1px solid #dddddd;
        
        line-height: 28px;
        font-size: 20px;
        font-weight: bold;
        text-align: left;
        
        .dark_mode & {
            border-color: #999999;
        }
    }
    
    small {
        padding-top: 4px;
        
        line-height: 24px;
        font-size: 16px;
        font-weight: normal;
        color: #666666;
        
        float: right;
        
        .dark_mode & {
            color: #cccccc;
        }
    }
}

#wait_screen {
    background-color: rgba(0, 0, 0, 0.9);
    
    z-index: 301 !important;
}

.screenshot_area {
    position: fixed;
    top: 0;
    left: 100vw;
    
    box-sizing: border-box;
    
    width: 500px;
    
    padding: 20px 10px;
    
    &.popup_screenshot_area {
        width: 400px;
        
        text-align: center;
    }
    
    * {
        text-decoration: none !important;
    }
    
    button, label, label + div, .informational_text, .previous_button, .next_button {
        display: none !important;
    }
    
    .search_highlight, .train_detail_departure_time_highlight {
        background-color: inherit !important;
        
        font-weight: inherit !important;
    }
    
    .train_detail_departure_time_highlight:before {
        top: 14px;
        left: -14px;
        
        width: 8px;
        height: 8px;
        
        background-color: #ffffff;
        
        border: none;
        border-radius: 4px;
        
        .dark_mode & {
            background-color: #eeeeee;
        }
    }
    
    #operation_trains_area {
        margin-bottom: 0;
    }
    
    .train_detail_day {
        top: 10px;
        left: 10px;
        
        & + h3 {
            margin-top: 30px;
        }
    }
    
    .formation_table_series_name {
        display: block;
    }
}

input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: none;
   
   width: 25px;
   height: 20px;
   
   margin-right: 0;
   
   background-image: url(data:image/webp;base64,UklGRlQBAABXRUJQVlA4TEcBAAAvMcAJEOdgkG2kvj/Do/5Pw0DaNrl/DZf610DaNrl/DZf6l2kAgEnm7nU4//9DouoBLgGwu7aq//+HQgKdGVz1yIBAQNWPDy8sBvzYqw0vPkwzc/7/X6FqvDsEiG0jOZLqvP3fWm/zj/Smu7ongYj+O3DbxpFke/f6TZ95A0wt7YdBfZ8bbD2YoofJzCRZD49XFq1Bzyz+Sq7MU8GpyadnIuJr91uoHNprd+Dml8Ol9wPcAuX4eU0JcNPLobw2oCiaE0wmPanai8WV1G3H4iSN46ks36SEP2Mm8FAKV4qaAmFH2Xr4pqzBShp3WOOh+pNLhY+gD70rvom9iWQaLMujUxj0pu0ZEIlpm73R41ibyU7RJr8c3mqheBLK4bA3vie/HOFVb5r8clRfWYuX8sE1kRq7UNWdDnMWS/6OPcLWufsPnwraBQAA);
   background-repeat: no-repeat;
   background-size: 25px 20px;
   
   cursor: pointer;
}

textarea {
    display: block;
    
    box-sizing: content-box;
    
    width: calc(100% - 60px);
    height: 60px;
    
    max-width: 440px;
    
    margin: 10px auto;
    padding: 9px;
    
    background-color: transparent;
    
    border: 1px solid #cccccc;
    border-radius: 5px;

    font-size: 16px;
    
    resize: none;
    
    .dark_mode & {
        border-color: #808080;
        
        color: #ffffff;
    }
}

.enlarge .toggle + label {
    padding-bottom: 5px;
}

.wide_select {
    display: block;
    
    width: 300px;
    height: 36px;
    
    margin: 0 auto;
    
    line-height: 36px;
    font-size: 20px;
    text-align: center;
}

.rearrangeable_list {
    position: relative;
    
    width: calc(100% - 20px);
    
    margin: 10px;
    
    padding: 0;
    
    background-color: #eeeeee;
    
    .dark_mode & {
        background-color: #555555;
    }
    
    li {
        width: calc(100% - 100px);
        height: 24px;
        
        padding: 12px 50px 11px 50px;
        
        border-bottom: 1px solid #cccccc;
        
        background-image: url(data:image/webp;base64,UklGRjgAAABXRUJQVlA4TCwAAAAvX8AXEA8wmZM5mWMW8FAUgAykgf4tNRDAzl9E/wUEhR6YgZMy5WyPeXhRAA==);
        background-repeat: no-repeat;
        background-size: 48px;
        background-position: left top;
        background-color: #ffffff;
        
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        
        list-style: none;
        
        .dark_mode & {
            border-color: #666666;
            
            background-color: #444444;
        }
        
        &:last-child {
            padding-bottom: 12px;
            
            border-bottom: none;
        }
        
        small {
            margin-left: 5px;
            
            font-size: 14px;
            color: #999999;
        }
        
        button {
            width: 48px;
            height: 48px;
            
            margin: -12px -50px 0 0;
            
            border: none;
            
            background-image: url(data:image/webp;base64,UklGRn4BAABXRUJQVlA4THEBAAAvX8AXEAehpm0kycOfyWLbcqt7aahpG0ny8Gey2Lbc6l41bSNJHv5MFtuWW93LOJKkNngzT97kH5fLwSNVVJWemfTe4/8PAP9/YGEB+P9LAA0PIAE8dJI/Sb/3NgxcXAyMJAUjSV5r7e7uCgiybadtwsxmtva/y8TS+/JTmZQqov8O3EZSJHf14jH0/kH9pldtpNW/q4664O7asHJ27dwqGq3eQV7h+jje7TqGwL1xMoYT1163Xg1JXseOK9PfhvLDSF7HhqvUZOoe0D7XLLnmkTmy9oFrGoGI2tdc/Q1F0vFEcesSoeD2Z0V2iEyVP+77RO0DWxp5tAnbb9mKCETQfsVWoWnxsAIWbDPYgnRsDew8g2kUu654GKEERZfAYQRz4tujWYez48vArBNkw1eaR6kkS7758I2Y/s7odQS+Wpt5hmmBXkfN198iScGrAvvKYOesHHCwE1yQ2tm6oLCzckFlZ+GCmZ3OBY2dp/r1rjwA);
            background-repeat: no-repeat;
            background-size: 48px;
            
            float: right;
        }
    }
}

.rearrangeable_list_item_moving {
    transition-duration: 0.2s;
    transition-property: top;
}

#unyohub_icon {
    display: block;
    
    width: 96px;
    
    margin: 20px auto;
    
    border-radius: 21px;
    
    filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.25));
}