:root {
  --color-primary1: #F5FAF7;
  --color-primary4: #014E25;
  --color-neutral1: #D1D1D1;
  --Shadow1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
  --Shadow8: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
}

/* Color is missing in main.css */
.Icon-primary4 {color: var(--color-primary4);}

/* Set border width on card with shadow component */
.Shadow1.Tile {border-width: 1px;}

/* Basic horizontal rule styles */
hr {width: 95%;margin: 1em auto;color: var(--color-neutral1);border-top: 1px}

/* Adjusts the font size to be more legible. Added padding for increased touch size */
sup {padding: 5px;font-size: revert}

/**  
    Resting and elevated styles are copied from Material Design v2  

    @see https://m2.material.io/design/environment/elevation.html#default-elevations
    @see https://m3.material.io/styles/elevation/tokens
   
    - Card (resting elevation) 	1
    - Contained button (resting elevation) 	2
    - Floating action button (FAB - resting elevation) 	6
    - Contained button (pressed state) 	8
    - Card (when picked up) 	8
    - Floating action button (FAB - pressed) 	12
    - Modal bottom sheet Modal side sheet 	16
     - Dialog 	24
 */
 
/* ----------------------- SHADOWS ----------------------- */
.Box-shadow1,
.Shadow1 {box-shadow: var(--Shadow1)}

.Shadow8 {box-shadow: var(--Shadow8)}

/* ----------------------- PADDING ----------------------- */
/* Applies padding to block (top / bottom) only */
.PaddingB0  {padding-block: 0}
.PaddingB30 {padding-block: 30px}
.PaddingB40 {padding-block: 40px}
.PaddingB50 {padding-block: 50px}

.NoPadding {padding: 0 !important}



/* ----------------------- RESPONSIVE YOUTUBE IFRAME EMBED -----------------------

    - Polyfill until Design System update. 07.30.25 
*/
.Video-parent {width: 100%}

/** 
  Padding-top for various aspect ratios
   
  - 1:1 padding-top: 100%
  - 16:9 padding-top: 56.25%
  - 4:3 padding-top: 75%
 */

.Video-child {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%;
}

.Video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}


/* ----------------------- ITEM CENTER ----------------------- */

/* Covers align-items: center and justify-items: center */
.Items-center, .Columns-centerV {place-items: center} 

/* ----------------------- CONTENT CENTER ----------------------- */

/* Covers align-content: center and justify-content: center */
.Content-center {place-content: center} 

/* ----------------------- MARGIN CENTER ----------------------- */

/* Applies 'auto' to inline (left / right) margin only. 
   :is function does not have the limitations of !important  */
:is(h1).Margin-center, .Margin-center {margin-inline: auto}

/* ----------------------- BORDER RADIUS ----------------------- */

/* Applies a 10px radius to the top / bottom LEFT border only */
.RadiusL-10 {border-top-left-radius: 10px;border-bottom-left-radius: 10px}

/* Applies a 10px radius to the top / bottom RIGHT border only */
.RadiusR-10 {border-top-right-radius: 10px;border-bottom-right-radius: 10px}

/* ----------------------- FONT WEIGHT ----------------------- */

/* Applies bold weight to text. :is function does not have the limitations of !important */
:is(.Font-700) {font-weight: 700}

/* ----------------------- GRID AUTOFIT ----------------------- */

/* Similar to ColumnAuto but uses auto-fit instead of auto-fill */
.ColumnFit {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))}

/* ----------------------- HERO IMAGE POSITION ----------------------- */

/* Removed inline style and placed here. */
.Hero-figure img {object-position: 0 center}

/*\ END POTENTIAL DESIGN SYSTEM STYLES /*\

/* ----------------------- ICONS ----------------------- */

/* Custom class and sizes to match mockups */
.Icon-custom i {flex-basis: 60px;font-size: 3.25em}

/* ----------------------- TOOLTIPS ----------------------- */
.icon-Info {width: 0.7em;height: 0.7em;vertical-align: -0.35em}

.tooltip-Parent {top: -15px;left: 0px}

.tooltip-Parent[data-tooltip] {position: relative;cursor: help}

.tooltip-Parent[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 75%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-primary1);
  color: var(--color-neutral4);
  padding: 6px 10px;
  font-size: 0.75rem;
  border: 1px solid var(--color-primary2);
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  box-shadow: 0px 3px 3px -2px rgba(0,0,0,0.2), 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 1px 8px 0px rgba(0,0,0,0.12);
  opacity: 1;
  pointer-events: none;
  z-index: 10;
}

.tooltip-Parent[data-tooltip]::after {opacity: 0;transition: opacity 0.3s ease;
}



/* ----------------------- YOUR SUPPORT TEAM CONTACT BLOCK ----------------------- */
#YourSupportTeam .Btn-group .Btn-link {margin: 0}
#YourSupportTeam li:nth-of-type(2) {margin-inline: 10px}

/*
  ACCESSIBLE CARD WITH LINK AND BOX-SHADOW
  - These styles allow the entire card to be a clickable link. 
  - THIS ONLY WORKS ON A CARD WITH A SINGLE URL
  - Resting and elevated styles are copied from Material Design v2 
*/
.Tile-content {
  box-shadow: var(--Shadow1);
  -webkit-transform-style: flat;
  transform-style: flat;
  transition: box-shadow 400ms ease, border 100ms ease, background 100ms ease, -webkit-transform 250ms ease-in-out;
  transition: transform 250ms ease-in-out, box-shadow 400ms ease, border 100ms ease, background 100ms ease;
  transition: transform 250ms ease-in-out, box-shadow 400ms ease, border 100ms ease, background 100ms ease, -webkit-transform 250ms ease-in-out;
  height: 150px;
}

.Tile-content::before, 
.Tile-content::after {
  content: "";
  position: absolute;
  z-index: -2;
  transition: all 250ms ease-out;
  cursor: pointer;
}

.Tile-content::before {
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Tile-content h3 i {
	margin-inline: 5px 0;
}

.Tile-content:hover::before,
.Shadow1:hover::before,
.Shadow8:hover::before{
  box-shadow: var(--Shadow8);
}

.Tile-content:hover {
  border-color: var(--color-primary4) !important;
  background: var(--color-primary1);
  -webkit-transform: translateY(-0.15rem);
  transform: translateY(-0.15rem);
}

.Tile-content:hover .fa-sm {
  -webkit-transform: translateX(0.3rem);
  transform: translateX(0.3rem);
}

.Tile-content .fa-sm {
-webkit-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.breakout-button:focus {
  outline: none;
}

.breakout-button:focus::before {
  outline: 1px solid white;
  outline-offset: -0.8rem;
}


select#doctoralProgramsDropDown,
select#gradProgramsDropDown {
	border: 1px solid var(--color-neutral4);
	width: 100%;
	font-size: inherit;
	background: var(--color-gray0);
	border-radius: 0.3rem;
	height: 44px;
	padding: 0.5em;
}

/* -----------------------  MEDIA QUERY FOR TOUCHSCREEN DEVICES ONLY ----------------------- */
@media (hover: none) and (pointer: course) {
  #YourSupportTeam h2 {
    margin-block: 25px 5px;
    text-align: center;
  }
  
  .Icon-hidden-sm {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  #YourSupportTeam {
    flex-direction: column;
    align-items: center;
  }

  #YourSupportTeam h2 {
    margin-block: 25px 5px;
    text-align: center;
  }
  
  #YourSupportTeam .Btn-group ul {
    flex-direction: column;
    align-items: center;
  }

  #YourSupportTeam .Btn-group li {
    text-align: center;
    width: 100%;
  }

  #YourSupportTeam li:nth-of-type(2) {
	margin-inline: 0px;
  }
  
  #YourSupportTeam .Btn-group a.Btn-link {
    margin: 0;
    display: block;
    padding: 12px 16px;
  }
  /* ----------------------- HIDE ICON ON MOBILE ----------------------- */

/* Hides Alert box icon on mobile devices */
.Icon-hidden-sm {display: none !important}
}

@media (max-width:993px) {
.Hero,
  .Hero-figure {
    height: 100%;
  }

  .RadiusL-10 {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 10px;
  }

  .RadiusR-10 {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
  }
}