/* Search box and filter by department */
.directory-search input, 
select.cwf-form__input {
    font-size: .8rem;
}
/* Faculty Only toggle switch */
.gui-switch {
    --thumb-size: 2rem;
    --thumb: hsl(0 0% 100%);
    --thumb-highlight: hsl(0 0% 0% / 25%);
    --track-size: calc(var(--thumb-size) * 2);
    --track-padding: 2px;
    --track-inactive: hsl(80 0% 80%);
    --track-active: var(--vcu-gold);
    --thumb-color: var(--thumb);
    --thumb-color-highlight: var(--thumb-highlight);
    --track-color-inactive: var(--track-inactive);
    --track-color-active: var(--track-active);
    --isLTR: 1;
    display: flex;
    align-items: center;
    gap: 2ch;
    justify-content: space-between;
    margin-top: 1rem;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) {
    .dept-directory .gui-switch {
        justify-content: space-evenly;
    }
  	.dept-directory button.cwf-button {
        max-width: 60%;
    }
}
  
[dir="rtl"] .gui-switch {
    --isLTR: -1;
}
.gui-switch > input {
    --thumb-position: 0%;
    --thumb-transition-duration: 0.25s;
    padding: var(--track-padding);
    background: var(--track-color-inactive);
    inline-size: var(--track-size);
    block-size: var(--thumb-size);
    border-radius: var(--track-size);
    appearance: none;
    pointer-events: none;
    touch-action: pan-y;
    border: none;
    outline-offset: 5px;
    box-sizing: content-box;
    flex-shrink: 0;
    display: grid;
    align-items: center;
    grid: [track] 1fr / [track] 1fr;
    transition: background-color 0.25s ease;
}
.gui-switch > input::before {
    --highlight-size: 0;
    content: "";
    cursor: pointer;
    pointer-events: auto;
    grid-area: track;
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
    background: var(--thumb-color);
    box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
    border-radius: 50%;
    transform: translateX(var(--thumb-position));
    transition: transform var(--thumb-transition-duration) ease, box-shadow 0.25s ease;
}
.gui-switch > input:not(:disabled):hover::before {
    --highlight-size: 0.5rem;
}
.gui-switch > input:checked {
    background: var(--track-color-active);
    --thumb-position: calc((var(--track-size) - 100%) * var(--isLTR));
}
.gui-switch > input:focus:not(:checked) {  /* Added 4/17/2024 */
    background: var(--track-color-inactive);
    --thumb-position: 0%;
}
.gui-switch > input:indeterminate {
    --thumb-position: calc((calc(var(--track-size) / 2) - calc(var(--thumb-size) / 2)) * var(--isLTR));
}
.gui-switch > input:disabled {
    cursor: not-allowed;
    --thumb-color: transparent;
}
.gui-switch > input:disabled::before {
    cursor: not-allowed;
    box-shadow: inset 0 0 0 2px hsl(0 0% 100% / 50%);
}
@media (prefers-color-scheme: dark) {
    .gui-switch > input:disabled::before {
        box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%);
    }
}


/* Button */
  
.cwf-button {
  --cwf-button--background-color:var(--vcu-gold,#ffb300);
  --cwf-button--border-color:rgba(0,0,0,.25);
  --cwf-button--color:var(--vcu-black,#000);
  --cwf-button--active--background-color:var(--vcu-black,#000);
  --cwf-button--active--color:var(--vcu-white,#fff);
  --cwf-button--hover-focus--background-color:var(--vcu-black,#000);
  --cwf-button--hover-focus--color:var(--vcu-white,#fff)
}
.cwf-button,
.t4_button a,
.t4_button button,
.t4_button input[type=button],
.t4_button input[type=reset],
.t4_button input[type=submit] {
  background-color:var(--cwf-button--background-color)!important;
  border:1px solid var(--cwf-button--border-color);
  border-radius:1.5rem;
  color:var(--cwf-button--color)!important;
  display:inline-block;
  font-family:var(--vcu-font-sans-serif,inherit);
  font-weight:700;
  line-height:1.5;
  padding:.5rem 1rem;
  text-decoration:none;
  transition:background-color .1s ease-in-out,color .1s ease-in-out;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none
}
.cwf-button:active,
.t4_button a:active,
.t4_button button:active,
.t4_button input[type=button]:active,
.t4_button input[type=reset]:active,
.t4_button input[type=submit]:active {
  background-color:var(--cwf-button--active--background-color)!important;
  color:var(--cwf-button--active--color)!important
}
.cwf-button:focus,
.cwf-button:hover,
.t4_button a:focus,
.t4_button a:hover,
.t4_button button:focus,
.t4_button button:hover,
.t4_button input[type=button]:focus,
.t4_button input[type=button]:hover,
.t4_button input[type=reset]:focus,
.t4_button input[type=reset]:hover,
.t4_button input[type=submit]:focus,
.t4_button input[type=submit]:hover {
  background-color:var(--cwf-button--hover-focus--background-color)!important;
  color:var(--cwf-button--hover-focus--color)!important
}
  
  
  
/* FULL TEXT LAYOUT */

.person {
  margin-bottom: 1rem;
}

.person h2{
 margin-bottom: 1.25rem;
}

.person h3{
    font-size: 1.1rem;
    font-weight: 80;
}

@media (min-width: 768px) {
  .person__basic {
    padding: 1rem 2rem;
    min-height: 370px;
  }
}

.person__title-primary,
.person__title-additional {
  padding-top: 0;
  margin-bottom: .5rem;
}

.person__contact {
  margin: 1rem auto auto;
}

.person__etc {
  margin-top: .25rem;
}

/* Full Text Email and Phone Icon */

.person__email:before {
    font-family: "Font Awesome 6 Free";
    content: "\f0e0";
    margin-right: 0.25rem;
    font-weight: 900;
    color: var(--vcu-gold);
}

.person__phone:before {
	font-family: "Font Awesome 6 Free";
    content: "\f095";
    margin-right: 0.25rem;
    color: var(--vcu-gold);
    font-weight: 900;
}

/* Image */

.person__img {
  text-align: center;
}
@media (min-width: 768px) {
  .person__img {
    float: left;
    max-width: 300px;
  }
}
.person__img img {
  padding: .3rem;

}


/* Department tags */

.person__dept {
  display: inline-block;
  background: #efefef;
  padding: .5rem;
  margin: 0 .5rem 1rem 0;
  font-weight: 500;
  font-size: .8rem;
  text-transform: uppercase;
  border: 1px dashed #b02e01;
}


/* Text/HTML Layout */

@media (min-width: 768px) {
    .directory {
        gap: 2rem;
    }
    .person__list {
        display: grid;
        grid-template-columns: 33.3% 66.6%;
        gap: 1rem;
    }
}
.person-list__name {
    line-height: 1.5;
}
.person-list__img, 
.person-list__name {
    padding-top: 0;
}
 
.person-list__title-primary, .person-list__title-additional {
    margin-bottom: 0;
  font-size: .8rem;
  line-height: 1.25em;
}
.person-list__title-primary{
  font-weight: 900;
}

.person-list__name {   margin-bottom: 0;}

.person-list__email {
  margin-top: .5rem;
   margin-bottom: 0;
 line-height: 1.25em;
 font-size: .8rem;
}

.person-list__phone {
   margin-bottom: 0;
 line-height: 1.25em;
 font-size: .8rem;
}

.person-list__email__ft {
  margin-top: 1rem;
   margin-bottom: 0;
 line-height: 1.25em;}


/* Email and Phone Icon */
.person-list__email:before {
    font-family: "Font Awesome 6 Free";
    content: "\f0e0";
    margin-right: 0.25rem;
    font-weight: 900;
    color: var(--vcu-gold);
}

.person-list__phone:before {
	font-family: "Font Awesome 6 Free";
    content: "\f095";
    margin-right: 0.25rem;
    color: var(--vcu-gold);
    font-weight: 900;
}