/* Color Variables */
:root {
  --pure-white: #ffffff;
  
  /* Primary Colors */
  --navy-dark: #002240;
  --blue-hov: #013967;
  --blue-primary: #005daa;
  --green-primary: #7fab6e;
  --green-dark: #6e9a5d;
  --green-darker: #0c2a0e;
  
  /* Grays */
  --gray-light: #f8f8f8;
  --gray-medium: #f0f0f0;
  --gray-border: #ddd;
  --gray-border-light: #eee;
  --gray-text: #666;
  --gray-text-light: #999;
  --gray-placeholder: #666;
  --gray-hover: #e0e0e0;
  --gray-back-btn: #f0f0f0;
  
  /* Blacks */
  --black-text: #333;
  --black-resident: #111;
  --black-resident-medium: #222;
  
  /* Resident Theme Colors */
  --resident-card-bg: #b9d6f5;
  --resident-description-bg: #d9e9fb;
  --resident-tag-bg: #eaf3ff;
  --resident-tag-text: #0b2540;
  
  /* Alert Colors */
  --error-red: #e74c3c;
  
  /* Shadows */
  --shadow-light: rgba(0,0,0,0.05);
  --shadow-medium: rgba(0,0,0,0.08);
  --shadow-hover: rgba(0,0,0,0.12);
  --shadow-modal: rgba(0,0,0,0.5);
  --shadow-toast: rgba(0,0,0,0.2);
  --shadow-box: rgba(0,0,0,0.1);
  --shadow-blue: rgba(1, 57, 103, 0.5);
  
  /* Borders */
  --border-resident: rgba(0,93,170,0.35);
  --border-resident-expanded: rgba(0,0,0,0.12);
  
  /* Transparent */
  --resident-empty-text: rgba(255, 255, 255, 0.8);

  /* Logos */
  --yahoo-color: #5F01D1;
  --google-color-blue: #4285F4;
  --google-color-red: #EA4335;
  --google-color-yellow: #FBBC05;
  --google-color-green: #34A853;
}
.signup-btn{
    background-color: var(--green-primary);
}
.apply-filters-btn{
    background-color: var(--blue-primary) !important;
    color: var(--pure-white) !important;
}


.clear-filters-btn:hover{
    background-color: var(--gray-hover) !important;
    border-color: var(--gray-text) !important;
}
.blue{
    background-color: var(--gray-light);
    border-color: --border-resident;
    border-width: 3px;
}
.form-input {
   border-color: --gray-border-light;
}

.student .normal, .green .normal, .student .tag.selected {
  /* Background and border are primary, color is darker */
  background-color: var(--green-primary) !important;
  border-color: var(--green-primary) !important;
  color: var(--green-darker) !important;
}

.resident .blue-normal, .blue .normal, .resident .tag.selected, .resident .radio-option.selected {
  /* Background and border are primary, color is pure white */
  background-color: var(--blue-primary) !important;
  border-color: var(--blue-primary) !important;
  color: var(--pure-white) !important;
}

.gray.normal, .gray .normal {
  /*
   * Background, border, and color are gray. This is applicable to
   * a normal block either inside a gray theme or with a gray tag
   */
  background-color: var(--gray-border);
  border-color: var(--gray-border);
  color: var(--gray-text);
}

.gray.contrast, .gray .contrast {
  /*
   * Background is pure white, border is gray, and color is black. This is
   * applicable to a high contrast block either inside a gray theme
   * or with a gray tag
   */
  background-color: var(--pure-white);
  border-color: var(--gray-text);
  color: var(--black-text);
}

.gray.contrast.hoverable:hover, .gray .contrast.hoverable:hover {
  /*
   * On hover, background is light gray, border is gray, and color is black.
   * This is applicable to a high contrast block either inside a gray theme
   * or with a gray tag
   */
  background-color: var(--black-text);/*var(--pure-white);*/
  border-color: var(--black-text);
  color: var(--pure-white);/*var(--black-text);*/
}
.transparent{
     background-color: var(--pure-white) !important;
     border-color: var(--pure-white) !important;
 }
 .vertical-line{
    background-color: var(--gray-border);
}