﻿:root {
    --bs-body-bg: #c3c0c1; /* Stonewall Grey */

    --bs-primary: #265ef5; /*Yinmn Blue*/ /*#75aaee*/ /* Greek Sea */
    --bs-primary-rgb: rgb(38, 94, 245);
    --bs-secondary: #6a826a; /* Christmas Holly */ /*#0F5132;*/ /*Order Green*/ /*#00897B;*/ /* Mystic Turquoise */
    --bs-secondary-rgb: rgb(106, 130, 106);
    --bs-tertiary: #aacbc4; /* Baby Aqua */
    --bs-tertiary-rgb: rgb(170, 203, 196);
    --bs-quaternary: #ffdd66; /* Lemon Tart */ /*#DDD407;*/ /*Chartreuse Shot*/ /*#F0E68C;*/ /* CornFlake */
    --bs-quaternary-rgb: rgb(255, 221, 102);
    --bs-contentBackground: #f2f2f2; /*Bleached Silk*/ /*#f8f8f8;*/ /*Traffic white*/

    --bs-selectActiveBackground: #767676;
    --bs-highlight: rgba(254, 216, 0);
    --bs-highlightIcon: rgba(233, 198, 0);
    --bs-markWebHighlight: rgba(255, 255, 0, 0.4);
    --bs-deleteColor: red;
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.bg-tertiary {
    background-color: var(--bs-tertiary) !important;
}

.text-tertiary {
    color: var(--bs-tertiary) !important;
}

.bg-quaternary {
    background-color: var(--bs-quaternary);
}

.bg-contentBackground {
    background-color: var(--bs-contentBackground);
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
}

.markWebHighlight {
    background-color: var(--bs-markWebHighlight);
} 

.highlight {
    background-color: var(--bs-highlight);
}

.highlightIcon {
    color: var(--bs-highlightIcon);
}

.hyperlinkIcon {
    color: var(--bs-primary);
}

.bookmarkIcon {
    color: var(--bs-black);
}

.download {
    color: green;
}


/* Forms */

input, select {
    background-color: var(--bs-contentBackground) !important;
}


.form-check-input {
    background-color: var(--bs-primary) !important;
}


/* Tom Select overrides*/
.ts-wrapper.multi, .ts-wrapper .option {
    background-color: var(--bs-contentBackground) !important;
}

.ts-dropdown-content {
    padding: 0;
}

.ts-wrapper .option.active {
    color: white;
    background-color: var(--bs-selectActiveBackground) !important;
}

.ts-wrapper .item {
    border: solid !important;
    border-width: 1px !important;
    border-color: var(--bs-primary) !important;
    padding: 0 !important;
    padding-left: 3px !important;
}

.ts-wrapper.plugin-remove_button .item .remove {
    color: white;
    background-color: var(--bs-primary);
}

.ts-wrapper.plugin-remove_button .item .remove:hover {
    background: var(--bs-deleteColor);
}

/* Datepicker custom styling */
.datepicker-dropdown {
    background-color: var(--bs-contentBackground) !important;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
    background-color: var(--bs-selectActiveBackground) !important;
    color: white !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active:focus {
    background-color: var(--bs-primary) !important;
    color: white !important;
}

.datepicker table tr td.today {
    background-color: var(--bs-highlight);
    background-image: none;/*Remove default gradient image*/
}

.datepicker table tr td.active {
    background-image: none; /*Remove default gradient image*/
}