#search {
    color: #fff;
}


/*/////////////////////////////////////////////////////////*/
/*-------table--------*/
/*/////////////////////////////////////////////////////////*/

.no_bg {}

.no_bg table {
    width: 100%;
    margin: 0 auto;
    border-radius: 0.1875em;
    overflow: hidden;
    font-size: 0.9375rem;
    line-height: 1.1;
    color: #333;
}

/* 表格_標題 */
.no_bg caption {}

/* 表格_表頭 */
.no_bg thead {}

.no_bg thead tr {}

.no_bg thead th {
    text-align: center;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
    padding: 10px 15px;
    box-sizing: border-box;
    background: var(--second_color);
    min-width: 68px;
    font-weight: normal;
}

.no_bg thead th:first-of-type {
    border-top-left-radius: 0.3125em;
}

.no_bg thead th:last-of-type {
    width: 35%;
}

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px) and (min-height: 500px) and (max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
only screen and (min-resolution: 150dpi) and (max-resolution: 174dpi) {
    .no_bg thead th:last-of-type {
        width: 25%;
    }
}

/* 表格_表身 */
.no_bg tbody {}

.no_bg td {
    text-align: center;
    vertical-align: middle;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #333;
    padding: 15px 10px;
    box-sizing: border-box;
    border-bottom: 0.0625em solid #cccccc;
    border-right: 0.125em dashed #e6e6e6;
    background: #f5f5f5;
}

.no_bg td a {
    color: inherit;
    display: inline-block;
    text-decoration: none;
}

.no_bg td a:hover {
    opacity: 0.5;
}

.no_bg tbody tr td:first-of-type {
    border-left: 0.0625em solid #cccccc;
}

.no_bg tbody tr td:last-of-type {
    border-right: 0.0625em solid #cccccc;
}

.no_bg tbody tr:nth-child(2n + 1) td {
    background: #fff;
}

/* 表格_表尾 */
.no_bg tfoot {}

.no_bg tfoot td {}

/* 表格_按鈕 */
.no_bg input[type="button"] {
    background: var(--second_color);
    color: #ffffff;
    color: var(--dark_color);
    border: 0.0625em solid var(--second_color);
    height: 40px;
    line-height: normal;
    width: 100px;
    box-sizing: border-box;
    border-radius: 1.875em;
    margin: 0.1vw;
}

.no_bg .cPL_twoBtn {
    /* display: flex;
    		justify-content: center; */
}

.no_bg .cPL_twoBtn input[type="button"] {
    /* width: 49%; */
    max-width: 100px;
    margin: 5px 2.5px;
}

/* .no_bg .cPL_twoBtn input[type='button']:nth-child(2n+1) {
				background: #c6000b;
				border-color:#c6000b;
			} */
/* .no_bg .cPL_twoBtn input[type='button']:nth-child(2n) {
				background: var(--second_color);
				border: 0.0625em solid var(--second_color);
			}					 */
/* .no_bg .cPL_twoBtn input[type='button']:nth-child(3n) {
				background: var(--fourth_color);
				border: 0.0625em solid var(--fourth_color);
			} */

.no_bg .cPL_twoBtn input.cancel_Btn {
    background: #555;
    border-color: #555;
    color: #fff;
}

.no_bg .cPL_twoBtn input.edit_Btn {
    background: var(--primary_color);
    border-color: var(--primary_color);
    color: #fff;
}

.no_bg .cPL_twoBtn input.receiptBtn {
    background: var(--second_color);
    border-color: var(--second_color);
    color: var(--dark_color);
}

.htmlFontSizeC .no_bg .cPL_twoBtn input[type="button"] {
    /*Judy修改20240329*/
    max-width: unset;
    width: fit-content;
    padding: 0 10px;
    margin: 5px 2.5px;
}

.no_bg .cPL_twoBtn input:disabled {
    cursor: default;
    color: #fff;
    background-color: #ccc;
    border-color: #ccc;
}

.no_bg .notice {
    font-size: 0.875rem;
    /*14px*/
    color: #d9001a;
    padding: 10px 0 0;
}



@media (max-width: 768px) {

    /*第一組tr*/
    /* .no_bg tr:first-of-type  */
    .no_bg thead {
        display: none;
    }

    /*第一個td*/
    .no_bg tr td:first-of-type {
        width: auto;
        padding: 10px 14px;
        border-top: solid 0 #adabab;
    }

    .no_bg tr:first-of-type td:first-of-type {
        border-top: solid 0.0625em #adabab;
    }

    /*最後一個td*/
    .no_bg td:last-of-type {
        border-bottom: solid 0.0625em #adabab;
        padding: 5px 14px 10px 14px;
    }

    .no_bg tr:last-of-type td:last-of-type {
        border-bottom: solid 0.0625em #adabab;
    }

    /*第五個td*/
    /* .no_bg td:nth-of-type(5) {
	padding: 5px 14px 10px 14px;
}
	.no_bg td:nth-of-type(5):before {
		display:none;
	} */

    .no_bg table {
        border-radius: 0;
    }

    .no_bg td {
        display: block;
        border: none;
        text-align: left;
        border-left: solid 0.0625em #bebebe;
        border-right: solid 0.0625em #bebebe;
        padding: 5px 14px;
    }

    .no_bg td:before {
        color: #7b7b7b;
        content: attr(data-name);
    }

    /*商品名稱*/
    /* .cPL_product {
			padding:0px 0px 15px 0px;  
		} */

    /* .no_bg table input {
			height:40px;
			line-height:2.5em;
		}
			.no_bg table input[type='button'] {
				width:100%;
				height:2.625em;
			} */

    /*兩個按鍵時*/
    /* .no_bg table .cPL_twoBtn input[type='button'] {
					float:left;
				}
				.no_bg table .cPL_twoBtn input[type='button']:nth-of-type(2) {
					float:right;
				} */

    /* 表格_按鈕 */
    .no_bg input[type="button"] {
        width: 100%;
    }
}

/*未付款*/
.unpaid {
    color: #7f7f7f;
    display: inline-block;
}

/*已付款 / 報名成功*/
.no_shipping {
    color: #40ae57;
    display: inline-block;
}

/*付款失敗 / 報名失敗*/
.failed {
    color: #ff1515;
    display: inline-block;
}

/*已退款 / 取消報名*/
.cancel {
    color: #555;
    display: inline-block;
}

/*已報名*/
.registered {
    color: var(--second_color);
    display: inline-block;
}

/*剩餘點數*/
.remaining_points {
    text-align: right;
    font-size: 0.9375rem;
    padding: 0px 0 25px;
}

.remaining_points strong {
    font-size: 1.25rem;
    color: #d03529;
}

/*時間搜尋區*/
/*.rB_time{
	margin-bottom: 20px;
}*/
.timeSearch_area {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 25px;
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.time_range {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
}

.timeSearch_area span {
    font-size: 0.9375rem;
    display: inline-block;
    /* padding: 0px 20px 4px 0px; */
    padding: 0 5px;
    vertical-align: middle;
    font-size: 0.75rem;
}

.timeSearch_area select {
    font-size: 0.9rem;
}

.timeSearch_area label.timeSearch_btn {
    width: 42px;
    height: 38px;
    line-height: 2.375em;
    display: inline-block;
    overflow: hidden;
    border-radius: 0.3125em;
    background: var(--second_color);
    text-align: center;
    transition: 0.3s ease all;
    letter-spacing: 0px;
    margin-left: 15px;
}

.timeSearch_area label.timeSearch_btn:hover {
    background: var(--fourth_color);
}

.timeSearch_btn button {
    position: relative;
    color: #fff0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: var(--primary_color);
    border: var(--primary_color) 0.0625em solid;
    cursor: pointer;
}

.timeSearch_btn button:before {
    position: absolute;
    transition: 0.3s ease all;
    font-family: "Bootstrap-icons";
    content: " \F52A";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.25rem;
}

@media (max-width: 1400px) and (min-width: 991px) {
    .timeSearch_area .time_range>select {
        width: 62px;
    }
}

/* @media screen and (min-width: 991px) and (min-height: 500px) and (max-height: 740px) and 
(-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 150/100){ */

/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px) and (min-height: 500px) and (max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74),
only screen and (min-resolution: 150dpi) and (max-resolution: 174dpi) {
    .timeSearch_area {
        font-size: 0.65rem;
    }

    .timeSearch_area span {
        font-size: inherit;
        /* font-size:calc(0.9375em / 1.5); */
    }

    .timeSearch_area .time_range>select {
        /* font-size:0.65em; */
        font-size: inherit;

        width: auto;
        font-size: 0.65rem;
    }
}

@media (max-width: 640px) {

    /*時間搜尋區*/
    .timeSearch_area {
        flex-direction: column;
    }

    .time_range {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .time_range label {
        flex: 1;
    }

    .timeSearch_area select {
        width: 100%;
        max-width: unset;
    }

    .timeSearch_area span {
        margin: 5px 0;
    }

    .timeSearch_area label.timeSearch_btn {
        width: 100%;
        margin: 15px 0 0;
    }
}

/* @media (max-width: 780px){
					.timeSearch_area {
						letter-spacing:1px;
					}
						.time_search {
							padding: 0px 10px 0px 0px;
						}
						.time_search_area span {
							padding: 0px 10px 4px 0px;
						}
				}
					@media (max-width: 680px){
						.timeSearch_area {
							text-align:center;
							letter-spacing: 0;
						}
							.time_search {
								padding: 5px 10px 5px 0px;
							}
							.time_search_area span {
								padding: 0px 10px 4px 0px;
							}
							.time_search_area label.timeSearch_btn {
								margin: 3px 0px 0px 0px;
							}
					}
						@media (max-width: 415px){
							.timeSearch_area {
								padding:0px;
								margin:0px;
							}
							.time_search, .time_search_area span {
								display:block;
								padding: 0px 0px 10px 0px;
							}
							.timeSearch_area label.timeSearch_btn {
								width:100%;
								height:42px;
								margin:10px 0px 0px 0px;
							}
							.timeSearch_area span {
								text-align:center;
							}
						}
							@media (max-width: 350px){
								.time_search {
									letter-spacing:0;
									white-space:nowrap;
								}
									.time_search select {
										width:68px;
									}
							} */
/*=========================================================*/
/*------- 芳名錄_篩選 --------*/
/*=========================================================*/

.directory_filter_area {
    flex-wrap: wrap;
    display: grid;

    /* display: block; */
    grid-template-columns: 2fr 1fr 1fr;
    /* grid-template-columns: 1fr 1fr; */
    gap: 5px 10px;
    margin-bottom: 15px;
    align-items: flex-end;
}

.directory_filter_area2 {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 15px;
}

.directory_filter_area .form_list {
    box-sizing: border-box;
}

.solicitationList {}

.directory_filter_area .form_list .fL_info {
    padding-bottom: 0px;
}

.solicitationList:first-of-type {
    /* margin-bottom: 15px; */
}

/*================================================================*/
/*------- 芳名錄_時間區間 --------*/
/*================================================================*/

.courseDateRange {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    /*12px*/
    margin: -5px 0;
}

.courseDateRange span {
    box-sizing: border-box;
}

.courseDateRange select {
    width: 95px;
    /* width: calc(50% - 10px) ; */
    width: 165px;
    box-sizing: border-box;
    margin: 0 5px;
    font-size: 0.75rem;
    /*12px*/
    line-height: 1.41;
    /*17px*/
}

.courseDateRange input[type="text"] {
    width: 115px;
    box-sizing: border-box;
    margin: 0 5px;
}

/* 開始 */
/* 結束 */
.courseDateRange .start,
.courseDateRange .finish {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 0;
    width: calc(50% - 10px);
}

.courseDateRange .start {
    margin-left: -5px;
}

@media (max-width: 1250px) {
    .directory_filter_area,
    .directory_filter_area2 {
        display: block;
        grid-template-columns: unset;
        gap: unset;
        margin-bottom: 20px;
    }
    
    .fL_info label {
        width: 100%;
    }
}


@media (max-width: 990px) {

    .directory_filter_area .form_list {
        width: 100%;
        padding: 5px 0px;
        padding: 0;
        margin-bottom: 15px;
    }

    .directory_filter_area .form_list .fL_info {
        /* margin-bottom: 15px; */
    }
}

@media (max-width: 550px) {
    .directory_filter_area .form_list .fL_info {
        /* padding-bottom: 5px; */
        padding: 0;

        display: grid;
        gap: 0 2px;
        grid-template-columns: 1fr 5px 1fr;
    }

    .directory_filter_area .form_list.solicitationList .fL_info {
        display: block;
    }

    .courseDateRange .start,
    .courseDateRange .finish {
        letter-spacing: -2px;

        display: grid;
        gap: 0 5px;
        grid-template-columns: repeat(2, 1fr);
        width: auto;
    }

    .courseDateRange select {
        width: 60px;
        font-size: 0.75rem;
        /*12px*/
        padding: 9px 0px 10px 2px;

        width: 100%;
        margin: 0;
    }

    .courseDateRange input[type="text"] {
        width: 90px;
        font-size: 0.75rem;
        /*12px*/
        padding: 9px 0px 10px 2px;
    }

    .directory_filter_area2 .form_list .fL_info {
        display: block;
        gap: unset;
        grid-template-columns: unset;
    }
}

@media (max-width: 385px) {
    .courseDateRange select {
        font-size: 0.625rem;
        /*10px*/
    }
}

/*================================*/
/* 實際上課日_新增------------------------------------ */
/*================================*/
.form_list.actual_date {
    display: grid;
    grid-template-columns: auto 60px;
    gap: 0 10px;
}

.form_list.actual_date .fL_info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    /* display: grid; */
    grid-column-start: 1;
    grid-column-end: 2;
}

.form_list.actual_date input[type="text"],
.form_list.actual_date input[type="password"] {
    /* max-width: calc(100% - 70px); */
    box-sizing: border-box;
}

/* 實際上課日_新增按鈕 */
/* .form_list.actual_date input[type="button"].newBtn  , */
.form_list.actual_date .newBtn {
    cursor: pointer;
    font-size: 1rem;
    width: 60px;
    box-sizing: border-box;
    background: var(--primary_color);
    border-radius: 0.3125em;
    /* border-bottom: none; */
    border: var(--primary_color) solid 0.0625em;
    color: #fff;
    font-weight: 600;
    padding: 0;
    grid-column-start: 2;
    grid-column-end: auto;
    /* 20241002 start */
    max-height: 42px;
    height: 100%;
    /* 20241002 end */
}

/* 20241002 */
.form_list.actual_date label {
    height: 42px;
}

.form_list.password.actual_date i#check_eye,
.form_list.password.actual_date i#check_eye2 {
    -webkit-transform: translate(0, calc(-50% - 0px));
    transform: translate(0, calc(-50% + 0px));
}

/* 解決查詢btn上下偏移 modify by peggy 20241002*/
@media (max-width: 801px) {

    /* 20241002 */
    .form_list.actual_date label {
        position: relative;
    }

    .form_list.actual_date .newBtn {
        /* 20241002 start */
        position: absolute;
        top: 5px;
        /* 20241002 end */
    }
}

.hide_word {
    display: none !important;
}

label:focus {
    background-color: var(--fourth_color) !important;
    color: #fff !important;
    box-sizing: border-box;
}