:root {
	--oris-directory-navy: #003b5d;
	--oris-directory-text: #333333;
	--oris-directory-input-text: #000000;
	--oris-directory-white: #ffffff;
	--oris-directory-input-border: #666666;
	--oris-directory-cell-border: rgba(128, 128, 128, 0.5);
	--oris-directory-stripe: rgba(128, 128, 128, 0.07);
}

.oris-directory,
.oris-directory * {
	box-sizing: border-box;
}

.oris-directory {
	width: 100%;
	color: var(--oris-directory-text);
	font-family: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.oris-directory__search-wrap {
	position: relative;
	width: 100%;
	margin: 0 0 20px;
}

.oris-directory__search {
	display: block;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--oris-directory-input-border);
	border-radius: 3px;
	background: var(--oris-directory-white);
	box-shadow: none;
	color: var(--oris-directory-input-text);
	font: 400 16px/24px -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	letter-spacing: normal;
	-webkit-appearance: none;
	appearance: none;
}

.oris-directory__search::-webkit-search-cancel-button {
	display: none;
}

.oris-directory__search:focus {
	outline: 2px solid #2774ae;
	outline-offset: 2px;
}

.oris-directory__clear {
	position: absolute;
	top: 1px;
	right: 1px;
	display: grid;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 9px;
	place-items: center;
	border: 0;
	border-radius: 0 3px 3px 0;
	background: transparent;
	box-shadow: none;
	color: var(--oris-directory-input-border);
	cursor: pointer;
}

.oris-directory__clear[hidden],
.oris-directory [hidden] {
	display: none !important;
}

.oris-directory__clear:hover,
.oris-directory__clear:focus {
	background: rgba(128, 128, 128, 0.1);
	color: var(--oris-directory-text);
}

.oris-directory__clear:focus-visible {
	outline: 2px solid #2774ae;
	outline-offset: 1px;
}

.oris-directory__clear svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.oris-directory__table-wrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.oris-directory__table-wrap:focus-visible {
	outline: 2px solid #2774ae;
	outline-offset: 2px;
}

.oris-directory__table {
	width: 100%;
	margin: 0 0 15px;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: transparent;
	color: var(--oris-directory-text);
	font-size: 16.2px;
	font-weight: 400;
	line-height: 24.3px;
	text-align: left;
}

.oris-directory__table th,
.oris-directory__table td {
	padding: 15px;
	border: 1px solid var(--oris-directory-cell-border);
	vertical-align: top;
	text-align: left;
}

.oris-directory__table th {
	border-color: var(--oris-directory-white);
	background: var(--oris-directory-navy);
	color: var(--oris-directory-white);
	font-weight: 700;
}

.oris-directory__row:nth-child(odd) td,
.oris-directory__row.oris-directory__row--odd td {
	background: var(--oris-directory-stripe);
}

.oris-directory__row:nth-child(even) td,
.oris-directory__row.oris-directory__row--even td {
	background: transparent;
}

.oris-directory__no-results td {
	background: var(--oris-directory-white);
	font-style: italic;
}

.oris-directory__error {
	margin: 0;
	padding: 15px;
	border: 1px solid var(--oris-directory-cell-border);
	background: var(--oris-directory-stripe);
	color: var(--oris-directory-text);
}

.oris-directory__sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* highlight staff row on hover in ucla blue */
/* .oris-directory__table tbody .oris-directory__row:hover > td {
	background-color: rgba(39, 116, 174, 0.14);
	transition: background-color 150ms ease;
} */

/* Match the original table: white rows hover to the existing stripe gray. */
.oris-directory__table tbody .oris-directory__row:hover > td {
	background-color: var(--oris-directory-stripe);
}
