:root {
    --color-white: #fdfdfd;
    --color-gray-1: #f3f2f1;
    --color-gray-2: #d2d0cc;
    --color-gray-5: #797166;
    --color-gray-7: #4c4233;
    --color-black: #060000;

    --color-strawberry-light-2: #fac7c8;
    --color-strawberry-dark-1: #bc1014;

    --color-granny-smith-light-2: #e6f1d9;
    --color-granny-smith: #80ba41;
    --color-granny-smith-dark-1: #4d870e;

    --color-citrus-light-2: #ffeac8;
    --color-citrus-dark-1: #cc8716;

    --color-cocoa-light-2: #ddd9d1;
    --color-cocoa-dark-1: #563f1b;

    --color-auberge-light-2: #e9dcff;
    --color-auberge-light-1: #be97ff;
    --color-auberge-dark-1: #592ea0;

    --color-sky-light-2: #ddecf2;
    --color-sky: #53a2be;
    --color-sky-dark-1: #206f8b;
}

.w-1\/5 { width: 20%; }
.w-1\/6 { width: 16.666667%; }
.w-1\/8 { width: 12.5%; }
.w-1\/10 { width: 10%; }

.bg-green { background-color: var(--color-granny-smith); }
.bg-grey-light { background-color: var(--color-gray-1); }
.bg-grey-dark { background-color: var(--color-gray-7); }

.border-purple-light { border-color: var(--color-auberge-light-1) !important; }
.border-purple-dark { border-color: var(--color-auberge-dark-1) !important; }

.chip {
    background-color: var(--color-gray-5);
    border-radius: 2rem;
    color: var(--color-white);
    display: flex;
    margin-right: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.75rem;
}

.chip:hover {
    background-color: var(--color-gray-7);
}

.chip-button {
    background: transparent;
    border: 0;
    color: var(--color-white);
    line-height: 1rem;
    margin-right: 0.25rem;
}

.dialog-modal {
    border: 0;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,.12);
    height: 65vh;
    min-height: 20rem;
    margin-top: 15vh;
    width: 80vw;
}

.item-mini-card {
    flex-shrink: 0;
    width: 18rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-blue {
    background-color: var(--color-sky-light-2);
    color: var(--color-sky-dark-1);
}

.label-green {
    background-color: var(--color-granny-smith-light-2);
    color: var(--color-granny-smith-dark-1);
}

.label-grey {
    background-color: var(--color-cocoa-light-2);
    color: var(--color-cocoa-dark-1);
}

.label-purple {
    background-color: var(--color-auberge-light-2);
    color: var(--color-auberge-dark-1);
}

.label-red {
    background-color: var(--color-strawberry-light-2);
    color: var(--color-strawberry-dark-1);
}

.label-yellow {
    background-color: var(--color-citrus-light-2);
    color: var(--color-citrus-dark-1);
}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-left:before {
    content: url('../img/icons/page-left.svg');
    position: relative;
    top: 4px;
}

.page-right:after {
    content: url('../img/icons/page-right.svg');
    position: relative;
    top: 4px;
}

.text-sm	{
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}

.text-green { color: var(--color-granny-smith) !important }
.text-grey { color: var(--color-gray-5) !important }
.text-purple-light { color: var(--color-auberge-light-1) !important }
.text-purple-dark { color: var(--color-auberge-dark-1) !important }
.text-red-dark { color: var(--color-strawberry-dark-1) !important }
.text-white { color: var(--color-white) !important }

.table-header {
    align-items: center;
    background-color: var(--color-gray-7);
    border-radius: 8px;
    color: var(--color-white);
    display: flex;
    height: 2rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
    width: 100%;
}

.table-header-icon > svg {
    vertical-align: sub;
}

.table-row {
    align-items: center;
    background-color: var(--color-gray-1);
    border-radius: 8px;
    display: flex;
    height: 2.8rem;
    margin-bottom: 0.8rem;
    padding: 0 1rem;
    width: 100%;
}

/* Bootstrap Overrides */
.btn,
.btn:active,
.btn:focus,
.btn:hover {
    border-radius: 0.375rem;
    box-shadow: none;
}

.form-check-input:checked::before {
    display: none;
}

.form-select {
    appearance: none !important;
}

@media (min-width: 768px) {
    .dialog-modal {
        width: 50vw;
    }
}