.web-modal-list-item {
    border-bottom: 1px solid #ddd;
    padding: 5px 5px;
    margin: 3px 0;
    position: relative;
}

.custom-checkbox {
    margin-top: 10px;
}

/*
    原本的checkbox被smart_style.css的樣式影響(滿意度那邊有用到)，這裡訂製一個樣式來用
*/
.custom-checkbox input[type=checkbox] {
    display: inline-block;
    opacity: 1;
    cursor: pointer;
    z-index: auto;
    position: relative;
    width: auto;
    height: auto;
    vertical-align: middle; /* 垂直對齊 */
    margin: 0;
    /* 其他需要的樣式 */
}

.custom-checkbox label input[type=checkbox] {
    margin-right: 5px; /* 在 checkbox 和文字之間添加一些間距 */
}

.time-table-component .custom-checkbox input[type=checkbox] {
    display: inline-block;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 27px;
    width: 27px;
    z-index: 1;
}

.custom-checkbox-label {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
}

.custom-checkbox-label-selected {
    background-color: #DB5009;
    border-color: #DB5009;
}

.checkbox-number {
    /*display: none;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
    color: white;
    font-weight: bold;
}

.checkbox-number-selected {
    /*display: block;*/
}

.custom-checkbox input[type=checkbox]:checked .custom-checkbox-label .checkbox-number {
    display: block;
}

/* 添加焦點樣式 */
.custom-checkbox-input:focus + .custom-checkbox-label {
    box-shadow: 0 0 0 3px rgba(219, 80, 9, 0.3);
}

.hint-color {
    color: #ca4f0f;
}

.inline-container {
    display: flex;
    justify-content: flex-start;
}

.inline-container label {
    flex-shrink: 0; /* 這將確保標籤不會收縮 */
    margin: 5px 5px;
}

/*AccessibleBookingModal*/
.accessible-booking-component .cathay_smart_input {
    font-size: 15px;
    outline: none;
    background-color: #f5f5f5;
    border: 0;
}

.accessible-booking-component .cathay_smart textarea {
    outline: none;
    background-color: #f5f5f5;
    border: 0;
}

.accessible-booking-component .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    min-width: 80px;
}

/*.accessible-booking-component .active {*/
/*    background-color: rgba(255, 255, 255, 0.7);*/
/*    color: #db5009;*/
/*    border-color: #db5009;*/
/*}*/

/*.ticket-category-btn {*/
/*    transition: background-color 0.3s ease;*/
/*}*/

.ticket-category-btn {
    transition: all 0.3s ease;
    font-weight: bold;
    border-radius: 4px;
    background-color: #f8f9fa; /* 默認背景色 */
    color: #333; /* 默認文字顏色 */
}

.ticket-category-btn:hover {
    background-color: #db5009; /* 橘色 */
    color: white; /* 可選：改變文字顏色以增加對比度 */
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ticket-category-btn.active {
    background-color: #db5009; /* 橘色 */
    color: white;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* 選中按鈕的 hover 效果 */
.ticket-category-btn.active:hover {
    background-color: #db5009; /* 橘色 */
    color: white; /* 可選：改變文字顏色以增加對比度 */
}

.auto-resize-textarea {
    min-height: 45px; /* 設置為與原 input 相同的高度 */
    overflow-y: hidden;
    transition: height 0.2s ease;
}

.accessible-booking-component .label-text {
    font-size: 13px;
    color: #666;
    font-weight: bold;
}

.accessible-booking-component .hint-text-sm {
    font-size: 11px;
    color: #666;
}

.accessible-booking-component .input-text {
    font-weight: bold;
}

.accessible-booking-component .select-input {
    display: block;
    width: 100%;
    background-color: white;
    font-size: 14px;
    line-height: 1.42857143;
    padding: 6px 12px;
    margin: 0;
    border: 1px solid #ccc;
    background-image: none;
    border-right-style: hidden !important;
    border-bottom-left-radius: 5px !important;
    border-top-left-radius: 5px !important;
    -webkit-border-bottom-left-radius: 5px !important;
    -webkit-border-top-left-radius: 5px !important;
}

.mb7 {
    margin-bottom: 7px;
}

.accessible-booking-component .has-error .select-input {
    border: 1px solid #E65310 !important;
    border-right-style: hidden !important;
}

.accessible-booking-component .has-error select {
    border: 1px solid #E65310 !important;
}

.accessible-booking-component .select-addon {
    background-color: white;
    border-left-style: hidden !important;
    border-bottom-right-radius: 5px !important;
    border-top-right-radius: 5px !important;
    -webkit-border-bottom-right-radius: 5px !important;
    -webkit-border-top-right-radius: 5px !important;
}

.accessible-booking-component .has-error .select-addon {
    border: 1px solid #E65310 !important;
    border-left-style: hidden !important;
}

textarea::placeholder {
    font-weight: normal;
}

.accessible-booking-component .btn:focus {
    outline: none; /* 移除焦點時的輪廓 */
    box-shadow: none; /* 如果有的話，移除陰影效果 */
}

.accessible-booking-component .table-info {
    font-size: 13px;
    width: 100%;
}

.accessible-booking-component .form-group {
    position: relative;
}

.stop-station-table > thead > tr > th
    /*.stop-station-table > tbody > tr > th,*/
    /*.stop-station-table > tfoot > tr > th,*/
    /*.stop-station-table > thead > tr > td,*/
    /*.stop-station-table > tbody > tr > td,*/
    /*.stop-station-table > tfoot > tr > td */
{
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
}

.stop-station-table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

.accessible-booking-component .table-info > thead > tr > th,
.accessible-booking-component .table-info > tbody > tr > th,
.accessible-booking-component .table-info > tfoot > tr > th,
.accessible-booking-component .table-info > thead > tr > td,
.accessible-booking-component .table-info > tbody > tr > td,
.accessible-booking-component .table-info > tfoot > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-bottom: 1px solid #ddd;
}

.accessible-booking-component .table-info > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

.accessible-booking-component .table-info td:first-child {
    white-space: nowrap; /* 防止第一個 td 換行 */
}

.accessible-booking-component .table-info td:nth-child(2) {
    white-space: normal; /* 允許第二個 td 換行，這是預設行為，所以也可以不寫 */
}

.accessible-booking-component .hint-label {
    font-size: 13px;
    color: #Db5009;
    font-weight: bold;
}

.accessible-booking-component .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
    /*align-items: center;*/
    /*border: 1px solid #ccc; !* 邊框顏色可以根據需要調整 *!*/
    /*border-radius: 4px; !* 邊框圓角 *!*/
    /*padding: 10px;*/
}

.accessible-booking-component .input-group .form-control:first-child {
    border: 1px solid #ccc; /* 邊框顏色可以根據需要調整 */
}

.accessible-booking-component .input-group-addon:last-child {
    border-left: 0;
}

.common-login-component .hint-label {
    font-size: 13px;
    color: #Db5009;
    font-weight: bold;
}

.common-login-component .label-text {
    font-size: 14px;
    color: #666;
    font-weight: bold;
}

.ticket-status-component .hint-label {
    font-size: 13px;
    color: #Db5009;
    font-weight: bold;
}

.ticket-status-component .label-text {
    font-size: 14px;
    color: #666;
    font-weight: bold;
}

.grey-text {
    color: #666;
}

.orange-text {
    color: #db5009;
}

.middle-text {
    vertical-align: middle !important;
    text-align: center !important;
}

.align-middle {
    vertical-align: middle;
}

.train-no-title {
    display: inline-block;
    padding-left: 20px;
    font-size: 20px;
    vertical-align: middle;
}

.train-no-title span {
    height: 30px;
}

.train-no-title img {
    width: 30px;
    height: 30px;
    margin: 0 30px;
    vertical-align: middle;
    padding-bottom: 5px;
}

.pick-input {
    outline: none;
    background-color: #f5f5f5;
    border: 0;
    height: 45px;
}

.placeholder {
    color: #9c9c9c;
    font-weight: normal;
    vertical-align: middle;
}

.train_block .train-select {
    height: 48px;
    text-align: center;
    background-image: none;
    font-size: 18px !important;
    /*font-weight: bold !important;*/
    cursor: pointer;
    /*移除select小箭頭*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 20px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-image: url("../images/down.svg");
    text-align-last: center;
    -moz-text-align-last: center;
}

.train_block select option {
    color: black; /* 這是下拉選單中選項的顏色 */
}

.train_block label {
    /*position: absolute;*/
    /*top: 6px;*/
    /*left: 52px;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    font-size: 13px;
    margin-bottom: 5px;
    color: #8d8d8f;
}

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v141/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

/* fallback */
@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v109/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.time-table-component .hint-label {
    text-align: center;
    padding-bottom: 10px;
    font-size: 13px;
    color: #Db5009;
    font-weight: bold;
}

.time-table-component .page-btn {
    margin-top: 5px;
}

/* swal */

.swal2-title {
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
}

/*color: #Db5009;*/
.swal2-x-mark {
    border-color: #Db5009 !important;
    color: #Db5009 !important;
}

.swal2-x-mark .swal2-x-mark-line-left{
    background-color: #Db5009 !important;
}

.swal2-x-mark .swal2-x-mark-line-right{
    background-color: #Db5009 !important;
}

.swal-btn {
    width: 130px;
    margin: 0;
    /*z-index: 100;*/
    background: #434c5d;
    /*padding: 10px 10px;*/
    border-radius: 5px;
    color: #fff;
    border: 1px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 20px;
    padding-left: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
    -webkit-border-radius: 5px;
}

.swal-btn:hover {
    text-decoration: none;
    outline: none;
    background-color: #DC510B;
}

.swal-btn-2 {
    width: 130px;
    margin: 3px;
    background: #434c5d;
    border-radius: 5px;
    color: #fff;
    border: 1px;
    font-size: 15px;
    font-weight: bold;
    -webkit-border-radius: 5px;
}

.swal-btn-2:hover {
    text-decoration: none;
    outline: none;
    background-color: #DC510B;
}

.custom-select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 20px;
    background-color: white;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-image: url("../images/down.svg");
    /*text-align: center;*/
    /*text-align-last: center;*/
    /*-moz-text-align-last: center;*/
}