.writing-tutor-schedule {
    margin: 2rem 0;
}

.writing-tutor-schedule__filters {
    margin-bottom: 1rem;
}

#writingTutorTable {
    width: 100%;
}

#writingTutorTable.card-view,
#writingTutorTable.card-view thead,
#writingTutorTable.card-view tbody,
#writingTutorTable.card-view tr,
#writingTutorTable.card-view td {
    display: block;
}

#writingTutorTable.card-view thead {
    position: absolute;
    left: -9999px;
}

#writingTutorTable.card-view tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

#writingTutorTable.card-view tbody tr {
    padding: 1rem;

    background: linear-gradient(
        135deg,
        rgba(121,189,233,.08),
        rgba(255,255,255,.7)
    );

    border: 1px solid rgba(0,42,92,.1);
    border-radius: .65rem;

    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

#writingTutorTable.card-view tbody td {
    padding: .35rem 0;
    border: 0;
}

.card-label {
    display: block;
    font-size: .9rem;
    color: #444;
    font-weight: 400;
}

#writingTutorTable.card-view td[data-column="Name"] {
    font-size: 1.5rem;
    font-weight: 700;
}

.writing-tutor-schedule__view-toggle {
    margin-bottom: 1rem;
}

.tutor-column {
    vertical-align: top;
}

.tutor-photo {
    margin-bottom: 10px;
}

.tutor-photo img {
    width: 100px;
    height: 100px;

    object-fit: cover;
    display: block;
}

.tutor-name {
    font-weight: 700;
}

.writing-tutor-schedule .dataTables_filter label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.card-view thead { display: none; }

.tutor-photo img {
    float: right;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-left: 12px;
    margin-bottom: 8px;
}

.card-label {
    display: block;
    font-size: 1.05rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 4px;
}

.tutor-name {
    font-size: 1.5rem;
    font-weight: 700;

    margin-bottom: 0.5rem;
}