/* ================================
    _overrides.scss
================================ */
body {
    background-color: var(--raisin-400);
}

a {
    color: var(--platinum-800);
}

a:hover {
    color: var(--yale-500);
}

details[open] {
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}

details[open] > summary {
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}





/* ================================
    _zendesk-overrides.scss
================================ */
.wysiwyg-color-blue,
.wysiwyg-color-blue70,
.wysiwyg-color-blue80,
.wysiwyg-color-blue90,
.wysiwyg-color-blue110,
.wysiwyg-color-blue120,
.wysiwyg-color-blue130 {
    color: var(--yale-500);
}





/* ================================
    _layout.scss
================================ */
.row-light {
    color: var(--platinum-800);
    background-color: var(--raisin-400);
}

.row-dark {
    color: var(--platinum-800);
    background-color: var(--raisin-500);
}





/* ================================
    _animations.scss
================================ */
.loading-container {
    border-bottom: 2px solid var(--yale-400);
}

.loading-container::before {
    border-bottom: 2px solid var(--raisin-400);
}





/* ================================
    _buttons.scss
================================ */
.button {
    color: var(--platinum-800);
    background-color: var(--yale-400);
}

.button:hover {
    color: var(--platinum-800);
    background-color: var(--saffron-400);
}

.button--active {
    color: var(--platinum-800);
    background-color: var(--saffron-400);
}

.button--active:hover {
    color: var(--platinum-800);
    background-color: var(--saffron-500);
}

.button--subscribe button[data-selected="true"] {
    width: 100%;
    height: 100%;
    color: var(--platinum-800);
    background-color: var(--saffron-400);
}

.button--subscribe button[data-selected="true"]:hover {
    color: var(--platinum-800);
    background-color: var(--saffron-500);
}

.button--success {
    background-color: var(--jungle-400);
}

.button--success:hover {
    background-color: var(--jungle-500);
}

.button--alert {
    background-color: var(--crimson-400);
}

.button--alert:hover {
    background-color: var(--crimson-500);
}




/* ================================
    _callouts.scss
================================ */
.banner-callout__info {
    color: var(--platinum-800);
    background-color: var(--yale-300);
}

.banner-callout__warning {
    color: var(--platinum-800);
    background-color: var(--saffron-300);
}

.banner-callout__alert {
    color: var(--platinum-800);
    background-color: var(--crimson-300);
}





.inline-callout__info {
    color: var(--platinum-800);
    background-color: var(--yale-300);
    border-left: 24px solid var(--yale-400);
}

.inline-callout__success {
    color: var(--platinum-800);
    background-color: var(--jungle-300);
    border-left: 24px solid var(--jungle-400);
}

.inline-callout__warning {
    color: var(--platinum-800);
    background-color: var(--saffron-300);
    border-left: 24px solid var(--saffron-400);
}

.inline-callout__alert {
    color: var(--platinum-800);
    background-color: var(--crimson-300);
    border-left: 24px solid var(--crimson-400);
}





/* ================================
    _cards.scss
================================ */
.card {
    color: var(--platinum-800);
    background-color: var(--raisin-400);
}

.card__cap {
    color: var(--platinum-800);
    background-color: var(--yale-400);
}

a.card__title {
    color: var(--platinum-800);
}

a.card__title:hover {
    color: var(--yale-500);
}

.sub-navigation {
    background-color: var(--raisin-500);
}

.sub-navigation:hover {
    background-color: var(--raisin-300);
}





/* ================================
    _pagination.scss
================================ */
.pagination > ul > li > a {
    color: var(--platinum-800);
    background-color: var(--yale-400);
}

.pagination > ul > li > a:hover {
    color: var(--platinum-800);
    background-color: var(--yale-500);
}





/* ================================
    _search.scss
================================ */
.search {
    color: var(--platinum-200);
    background-color: var(--raisin-400);
    border: 1px solid var(--platinum-200);
}





/* ================================
    _search-results.scss
================================ */
.search-sidebar {
    background-color: var(--raisin-200);
}





/* ================================
    _tables.scss
================================ */
.table {
    color: var(--platinum-800);
    border-color: var(--yale-500);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    color: var(--platinum-800);
    background-color: var(--raisin-500);
}

.table__sticky-header {
    color: var(--platinum-800);
    background-color: var(--yale-300);
}





/* ================================
    _typography.scss
================================ */
.heading {
    color: var(--platinum-800);
}

.subheading {
    color: var(--platinum-800);
}





/* ================================
    _header.scss
================================ */
.logo path.logo__outer {
    fill: var(--platinum-800);
}

.logo path.logo__inner {
    fill: var(--platinum-800);
}

.logo path.logo__type {
    fill: var(--platinum-800);
}

.site-title {
    color: var(--platinum-800);
}

.subheader {
    background-color: var(--raisin-500);
}





.menu {
    color: var(--platinum-800);
    background-color: var(--raisin-400);
}

.menu a {
    color: inherit;
}

.menu .list-wrapper:nth-child(2).is-visible,
.menu .list-wrapper:nth-child(3).is-visible {
    background-color: var(--raisin-400);
}

.menu-item {
    border-bottom: 1px solid var(--platinum-100);
}

.menu-item:hover {
    background-color: var(--raisin-200);
    transition: all var(--transition-time);
}

.menu-item--user {
    color: var(--platinum-800);
    background-color: var(--yale-400);
    transition: all var(--transition-time);
}

.menu-item--user:hover {
    background-color: var(--yale-300);
    transition: all var(--transition-time);
}





/* ================================
    _articles.scss
================================ */
.article-sidebar {
    background-color: var(--raisin-200);
}

.article-inner img {
    opacity: 0.8;
}

.article-inner pre {
    color: var(--platinum-800);
    background-color: var(--raisin-500);
}

.article-inner code {
    color: var(--crimson-500);
    background-color: var(--raisin-500);
    border: 1px solid var(--platinum-500);
}

.sub-navigation--light {
    background-color: var(--raisin-500);
}

.sub-navigation--light:hover {
    background-color: var(--raisin-400);
}





/* =============================
    _requests.scss
================================ */
ul[data-hc-pills-container] {
    background-color: var(--raisin-400);
}

ul[data-hc-pills-container] li[data-hc-pill="true"] {
    background-color: var(--raisin-400);
}

ul[data-hc-pills-container] li:last-child input {
    color: var(--platinum-800);
    background-color: transparent;
}

#request_organization_id_hint,
#request_description_hint {
    color: var(--platinum-800) !important;
}

.upload-dropzone {
    background-color: var(--raisin-300);
}

.upload-dropzone span {
    color: var(--platinum-800);
}

.request-form > footer > input,
.requests-filter div > button {
    color: var(--platinum-800);
    background-color: var(--yale-400);
}

.requests-filter div > button:hover {
    background-color: var(--yale-500);
}

.nesty-input,
select {
    color: var(--platinum-800);
    background-color: var(--raisin-300);
}

#request_subject,
#request_description {
    color: var(--platinum-800);
    background-color: var(--raisin-400);
    border: 1px solid var(--platinum-800);
}

input[name="commit"] {
    color: var(--platinum-800);
    background-color: var(--yale-400);
    transition: var(--transition-time);
}

input[name="commit"]:hover {
    background-color: var(--yale-500);
    transition: var(--transition-time);
}





/* ================================
    _footer.scss
================================ */
.footer:first-of-type {
    background-color: var(--raisin-400);
}

.footer:last-of-type {
    background-color: var(--raisin-100);
}

.social {
    color: var(--platinum-800);
}





/* =============================
    #Canteen-Overrides
================================ */
.canteen-branded {
    border-color: #a5cf4f;
}

.canteen-branded > a {
    color: #a5cf4f;
}

.canteen-branded > a:hover {
    color: #409f68;
}