.appointment{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}
.appointment table{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
}

.appointment table th:nth-child(1){
    border-top-left-radius: 10px;
}
.appointment table th:nth-last-child(1){
    border-top-right-radius: 10px;
}
.appointment table td{
    padding: 10px;
    border-bottom: solid 1px #00000020;
}

.appointment .search{
    width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.appointment .search i{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--primary-color);
}

.appointment .form-control{
    border: none;
    background: none;
}

.appointment .form-control label{
    min-width: 100px;
}

.appointment .form-control input{
    min-width: 100px;
    padding: 10px;
    border: solid 1px #00000020;
    border-radius: 5px;
}

.appointment .form-control .error{
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

.appointment .wait{
    color: var(--secondary-color);
    /* border: solid; */
    border-radius: 5px;
    text-align: center;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 90px;
}
.appointment .success{
    color: var(--success-color);
    border: solid;
    border-radius: 5px;
    text-align: center;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
}
.appointment .pending{
    color: var(--action-color);
    border: solid;
    border-radius: 5px;
    text-align: center;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
}
.appointment .confirm{
    color: var(--confirm-color);
    border: solid;
    border-radius: 5px;
    text-align: center;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
}
.appointment .cancel{
    color: var(--danger-color);
    border: solid;
    border-radius: 5px;
    text-align: center;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
}

.appointment .การจัดการ,
.appointment .รหัสการรักษา,
.appointment .สถานะ,
.appointment .ชื่อ-สกุล{
    width: 170px;
}
.appointment .วันที่{
    min-width: 120px;
}


#nav-settings .select_calendar_outofservice{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 20px;
}
#nav-settings .container{
    margin-bottom: 50px;
}
#nav-settings label.form-label{
    min-width: 100px;
    font-size: 20px;
    color: var(--secondary-color);
}
#nav-calendar a{
    color: var(--secondary-color);
    cursor: pointer;
}
#nav-calendar .fc .fc-col-header-cell-cushion{
    color:#fff;
}
.btn_addAppointment{
    cursor: pointer;
}

#appointmentTab .nav-item{
    margin:0px;
    padding: 0px;
}
#appointmentTab .nav-item a{
    padding: 10px;
    padding-bottom: 5px;
}