/*****************************
	本日の空席状況	
        &
	パスワード変更画面
	passchange
******************************/

    .passchange_a {
		position:relative;
		width:100%;
		height:100%;
	}

	.passchange_a div.body {
		position:relative;
		margin-left:auto;
		margin-right:auto;
		width:100%;
	}


	.passchange_a div.notice {
		text-align: center;
		font-size: 16pt;
		color: #d1411a;
    }
    @media (max-width: 768px) {
        .passchange_a div.notice {
            text-align: center;
            font-size: 14pt;
            color: #d1411a;
        }
    }

	.passchange_a table{
		width:auto;
		text-align:center;
		margin-top:10px;
	}
    .passchange_a table.seat tr {
        border-bottom: 1px solid #dfe6ec;
    }

        .passchange_a table.seat tr.seat_col_name {
            background-color: #dfe6ec;
        }
        .passchange_a table.seat tr.bottom_info {
            /* background-color: #dfe6ec; */
        }

		.passchange_a th{
			text-align:center;
			/* font-weight: bold; */
			font-size: 100%;
			padding-top: 5px;
			color:#003366;
		}

		.passchange_a th.item{
			color:#003366;
            font-size:26px;
		}
	    .passchange_a th.seat_type {
            padding-left:10px;
            font-size: 1.2rem;
            width: 240px;
            padding: 0.5rem;
	    }
        .passchange_a th.seat_col {
            font-size: 1.2rem;
            width: 150px;
        }
        .passchange_a td {
            text-align: left;
            font-size: 20px;
            padding: 5px;
            color: #003366;
        }
        @media (max-width: 576px) {
            .passchange_a table{
                width:100%
            }
            .passchange_a th.seat_type {
                padding-left: 10px;
                font-size: 12px;
                width: 40%;
            }

            .passchange_a th.seat_col {
                font-size: 12px;
                padding: 0.4rem;
                width: 30%;
            }
            .passchange_a td {
                text-align: left;
                font-size: 12px;
                padding: 5px;
                color: #003366;
            }
        }

        .passchange_a td.corner_name {
            padding-left:10px;
        }


	.passchange_a .passchange_box input {
		width: 200px;
		height: 30px;
        font-size:20px;
        line-height: 1;
        padding: 0;
        margin: 0;
    }
    @media (max-width: 576px) {
        .passchange_a .passchange_box input {
            width: 200px;
            height: 35px;
            font-size: 18px;
        }
    }

    input::placeholder {
        color: transparent;
        padding-left: 5px;
    }
    input:-ms-input-placeholder {
        color: transparent;
        padding-left: 5px;
    }
    input::-ms-input-placeholder {
        color: transparent;
        padding-left: 5px;
    }
    @media (max-width: 576px) {
        input::placeholder {
            color: grey;
        }
        input:-ms-input-placeholder {
            color: grey;
        }
        input::-ms-input-placeholder {
            color: grey;
        }
    }

        .passchange_a th.message{
        }

	.passchange_a div.vacant_info {
/*		padding-top: 30px;
*/	}


    .passchange_a div.vacant_info table td {
        height:40px;
	}

	.passchange_a div.vacant_info div.seats_num {
		text-align:center;
        /*width:80px;*/
	}
    .passchange_a div.vacant_info div.closing_or_full {
         /* background: #F7F0E6; */
         text-align: center;
         font-weight: bold;
         font-size: larger;
         color: #d1411a;
    }

    .passchange_a th.all_seats{
    }

    .passchange_a td.empty_count{
    }

    .passchange_a td.closing_or_full{
        width:100px;
        background: #F7F0E6;
        text-align:center;
    }


div.passchange_title {
    font-weight: 600;
    letter-spacing: 5px;
    font-size: 46px;
    color: rgba(18, 69, 116);
    text-shadow: 2px 2px 1px white,
    -2px 2px 1px white,
    2px -2px 1px white,
    -2px -2px 1px white,
    2px 2px 1px white,
    -2px 2px 1px white,
    2px -2px 1px white,
    -2px -2px 1px white,
    5px 5px 5px #696969;
}


.passchange_box {
    border:5px solid #3679b6;
    background-color:#e7f3ff;
    border-radius:20px;
    text-align:center;
}
.check_date{
    color: #d1411a;
}

@media (max-width: 768px) {
    .check_date{
        font-size: 0.8rem;
    }
    .vacant_info_title{
        font-size: 1.25rem !important;
    }
}

.passchange_a div.top_info {
    word-wrap: break-word;
    font-size: 16pt;
    color: #d1411a;
}
@media (max-width: 768px) {
    .passchange_a div.top_info {
        font-size: 12pt;
    }
}

#usercode-error,#password-error,#new_password_error,#again_new_password_error{
    margin-bottom: 0px;
    font-size: 14px;
    color: #d1411a;
    font-weight: bold;
}



.lineheight_1{
    line-height: 1;
    padding: 0;
}
/* WEB空席を非表示 none */
.web_count_disp {
    display:none;
}

#select_area_button{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color:#003366;
    background-color: #dfe6ec;
    font-size: 1rem;
}

.transition_button{
    border: 3px solid white;
    border-radius: 20px;
    background-color: #22ac38;
    box-shadow: 0px 5px 8px 0px rgba(37,53,69,0.65);
    font-size: 1.4em;
    min-width: 150px;
    font-weight: bold;
    color: white;
    padding: 0.375rem 0.75rem;
}

.transition_button:hover{
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

#select_area{
    /* height: 100%;
    align-items: stretch; */
    font-size: 1rem;
}
@media (max-width: 576px) {
    #select_area_button{
        font-size: 0.9rem;
    }
    #select_area{
        font-size: 0.9rem;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active
{
 -webkit-box-shadow: 0 0 0 30px #FFFFCC inset !important;
}