:root {
    /*  Talk to team about 70-20-10  */
    --neutral-color: #f4f4f5;
    --primary-color: #245699;
    --accent-color: #e4e4e7;

    /* muted colors */
    --neutral-color-muted: #d1d5db;
    --primary-color-muted: #165c94;
    --accent-color-muted: #4f86b2;

    /* Default Font Colors */
    --main-text-dk: #18181b;
    --alt-text-dk: #27272a;
    --main-text-lt: #f4f4f5;
    --alt-text-lt: #e4e4e7;

    /* Default background color */
    --background-gray: #d4d4d8;
    --background-drk: #18181b;

    /* Other Default */
    --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --border-radius: 16px;
    --border-radius-btn: 6px;
}


/************************/
/*      Over-rides      */
/************************/

:focus {
    outline-color: #FF0000 !important;
    outline-style: solid !important;
    outline-width: 2px !important;
}

input:focus {
    outline: 2px solid var(--primary-color-muted) !important;
    outline-offset: 2px !important;
}

a:focus {
    outline: 2px solid var(--primary-color-muted) !important;
    outline-offset: 2px !important;
}

side-nav a:focus,
side-nav a:active {
    border-radius: 0.5rem !important;
    outline-color: rgba(255, 255, 255, 0.15) !important;
    outline-offset: unset !important;
    text-decoration: none !important;
}

recruiter-header #layout-header-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'logo custom'
}

recruiter-header #layout-header-container #layout-header-custom {
    justify-self: end;
}

recruiter-header #layout-header-container ul#hdr_nav_links {
    display: none;
}

 /* Font Family Override */
body { font-family: 'Roboto', 'Poppins', 'Open Sans', Arial, sans-serif }

p, h1, h2, h3, h4, h5 {
    color: var(--main-text-dk);
    margin: 0;
}

.route_volunteer_home h1,
.route_volunteer_home h2,
.route_volunteer_home h3,
.route_volunteer_home h4,
.route_volunteer_home h5 {
    color: var(--primary-color-muted);
}

h2 {
    font-size: 1.75em;
}

a { color: var(--primary-color-muted) }

.heading-h1 {
    background: var(--primary-color);
    color: var(--main-text-lt);
}

/* Primary button */
/*Note: #field_selection is a class on the admin panel*/
.btn-primary:not(#field_selection .btn-primary) {
    background-color: var(--primary-color-muted);
    border-color: var(--primary-color-muted);
    /*color: ;*/
}

.btn-primary:hover:not(#field_selection .btn-primary) {
    background-color: var(--accent-color-muted);
    border-color: var(--accent-color-muted);
}

.btn-primary:active:focus:not(#field_selection .btn-primary) {

}

.btn-primary:focus:not(#field_selection .btn-primary),
.btn-secondary:focus:not(#field_selection .btn-secondary)  {
    outline: 2px solid var(--primary-color) !important;
    outline-offset: 2px !important;
}


/* Button Link */
.btn-link:not(#field_selection .btn-link) {
    color: var(--primary-color-muted);
}

.btn-link:hover:not(#field_selection .btn-link) {

}

.btn-link:active:focus:not(#field_selection .btn-link) {

}

.btn-link:focus:not(#field_selection .btn-link)  {

}

/************************/
/*    Utility Classes   */
/************************/

.text-main { color: var(--main-text-dk)}
.text-alt { color: var(--alt-text-dk)}
.text-primary { color: var(--primary-color)}


.bold { font-weight: bold; }
.p1rem { padding: 1rem; }
.grid { display: grid; }
.col-2 { grid-template-columns: 1fr 1fr; }
.col-gap-2rem { column-gap: 2rem }
.span-1-2-col { grid-column: 1/3; }
.gap-1rem { gap: 1rem; }
.flx { display: flex; }
.flx-col { flex-direction: column; }
.flx-grow-1 { flex-grow:1; }
.jc-start { justify-content: start; }
.jc-space-between { justify-content: space-between; }
.in-block { display: inline-block; }
.no-underline { text-decoration: none; }