.header {
    background-color: #b2fff2;
    width: 100%;
    height: 36px;
    margin: 0;
}

.header #logo {
    width: 10%;
    height: 30px;
    margin: 0 0 0 27%;
    display: inline-block;
    align-items: center;
    padding-left: 0.75%;
}

.header #logo a {
    text-decoration-line: none;
    color: black;
    font-weight: 600;
}

nav {
    align-items: center;
    margin: 0.35% 20% 0 0;
    float: right;
    width: 20%;
    height: 30px;
}

nav #navItem {
    float: right;
    width: 20%;
    margin: 0 4% 0 4%;
    text-decoration-line: none;
    color: black;
    font-weight: 600;
}


.search {
    width: 100%;
    height: 200px;
    margin-top: 100px;
    position: fixed;
    display: inline-block;
}


.search div {
    width: 35%;
    height: 45px;
    margin-left: 32.5%;
    position: relative;
}


.search .search_school #search_school_input {
    float: left;
    height: 20px;
    margin-top: 1px;
    width: 85%;
    position: absolute;
}

.search .search_school #search_school_button {
    float: right;
    margin-top: 1px;
    padding: 0px 2% 4px 2%;
}


.search .select_school select {
    float: left;
    height: 25px;
    margin-top: 1px;
    width: 100%;
}


.search .select_form #select_form_grade {
    float: left;
    height: 20px;
    width: 46%;
}

.search .select_form #select_form_class {
    float: right;
    height: 20px;
    width: 46%;
}


.search .select_date #select_date_input_year {
    height: 20px;
    width: 20%;
    display: inline-block;
}

.search .select_date #select_date_input_month {
    height: 20px;
    width: 20%;
    margin-left: 3%;
    display: inline-block;
}

.search .select_date #select_date_input_day {
    height: 20px;
    width: 20%;
    margin-left: 3%;
    display: inline-block;
}

.search .select_date #search_timetable {
    float: right;
    padding: 0px 3% 4px 3%;
}



.seat {
    width: 100%;
    height: 200px;
    margin-top: 50px;
    position: fixed;
    display: inline-block;
}


.seat div {
    width: 35%;
    height: 50px;
    margin-left: 32.5%;
    position: relative;
}


.seat .set_number #set_number_start {
    float: left;
    height: 20px;
    width: 47%;
}

.seat .set_number #set_number_end {
    float: right;
    height: 20px;
    width: 47%;
}


.seat #change_seat_button {
    float: left;
    width: 100%;
    height: 30px;
    padding-bottom: 3px;
}


.seat #exchange_seat_button {
    float: left;
    width: 48%;
    height: 30px;
    padding-bottom: 3px;
}

.seat #pin_seat_button {
    float: right;
    width: 48%;
    height: 30px;
    padding-bottom: 3px;
}


.seat #reset_seat_button {
    float: left;
    width: 35%;
    height: 30px;
    margin: 0 32.5%;
    padding-bottom: 3px;
}


.seat #error {
    color: red;
    font-weight: 500;
    text-align: center;
    margin-top: 7%;
}



.timetable {
    width: 100%;
    margin-top: 300px;
    position: fixed;
    display: inline-block;
}

.timetable #tbl {
    margin: auto;
    width: 35%;
    border: 2px solid #444444;
    border-collapse: collapse;
}

.timetable #tbl th {
    border: 2px solid #444444;
    padding: 15px;
    text-align: center;
    background-color: #ffd767;
}

.timetable #tbl td {
    border: 2px solid #444444;
    padding: 22px 12px;
    text-align: center;
}

.timetable #itm_time {
    background-color: #b2fff2;
    font-weight: 600;
}

.timetable .itm_class {
    background-color: white;
    font-weight: 500;
}


.school_meal {
    width: 100%;
    margin-top: 300px;
    position: fixed;
    display: inline-block;
}

.school_meal #tbl {
    margin: auto;
    width: 35%;
    border: 2px solid #444444;
    border-collapse: collapse;
}

.school_meal #tbl #itm_date {
    border: 2px solid #444444;
    padding: 15px;
    text-align: center;
    background-color: #ffd767;
    font-weight: 900;
}

.school_meal #tbl #itm_explain {
    border: 2px solid #444444;
    padding: 5px 15px;
    text-align: center;
    font-weight: 600;
}

.school_meal .itm_meal {
    border: 2px solid #555555;
    background-color: white;
    font-weight: 500;
    padding: 10px 12px;
}


.seat_change {
    width: 100%;
    margin-top: 300px;
    position: fixed;
    display: inline-block;
}

.seat_change #tbl {
    margin: auto;
    width: 35%;
    border: 2px solid #444444;
    border-collapse: collapse;
}

.seat_change #tbl td {
    border: 2px solid #444444;
    padding: 37px 15px;
    text-align: center;
    width: 12.85%;
}

.seat_change #tbl .enabled, .enabled_ex {
    background-color: #ffd767;
}

.seat_change #tbl .disabled {
    background-color: #888888;
}

.seat_change #tbl #cell_ex:hover {
    background-color: #caff60;
}