/* Perle colors */

:root {
    --perle-blue: #022060;
    --perle-blue-rgb: 2, 32, 96;
    --perle-font-color: #00004d;
    --perle-font-color-rgb: 0, 0, 77;
    --perle-gold: #ffb81c;
    --perle-gold-rgb: 255, 184, 28;
    --perle-green: #006633;
    --perle-green-rgb: 0, 102, 51;
    --perle-grey: #6c757d;
    --perle-grey-rgb: 108, 117, 125;
    --perle-light-grey: #e9ecef;
    --perle-light-grey-rgb: 233, 236, 239;
    --perle-link-color: #006699;
    --perle-link-color-rgb: 0, 102, 153;
    --perle-pale-blue: #dae9f7;
    --perle-pale-blue-rgb: 218, 233, 247;
    --perle-red: #dc3545;
    --perle-red-rgb: 220, 53, 69;
}

/* Common icon colors */

:root {
    --icon-red: var(--perle-red);
    --icon-orange: #ee7030; /* perle-red and perle-gold mixed */
    --icon-yellow: var(--perle-gold);
    --icon-gray: var(--perle-grey);
    --icon-green: var(--perle-green);
    --icon-blue: var(--perle-link-color);
}

/* Bootstrap color changes */

:root {
    --bs-primary: #022060;
    --bs-success: #063;
    --bs-info: #069;
    --bs-warning: #ffb81c;
    --bs-primary-rgb: 2, 32, 96;
    --bs-success-rgb: 0, 102, 51;
    --bs-info-rgb: 0, 102, 153;
    --bs-warning-rgb: 255, 184, 28;
    --bs-body-color: #00004d;
    --bs-body-color-rgb: 0, 0, 77;
    --bs-emphasis-color: #00004d;
    --bs-emphasis-color-rgb: 0, 0, 77;
    --bs-link-color: #022060;
    --bs-link-color-rgb: 2, 32, 96;
    --bs-link-hover-color: #021a4d;
    --bs-link-hover-color-rgb: 2, 26, 77;
}

.form-control, .form-select, .form-check-input {
    border-color: #d0d0d0;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #022060;
    box-shadow: 0 0 0 0.25rem #02206040;
}

.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
    background-color: #022060;
    border-color: #022060;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #022060;
    --bs-btn-border-color: #022060;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #021b52;
    --bs-btn-hover-border-color: #021a4d;
    --bs-btn-focus-shadow-rgb: 40,65,120;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #021a4d;
    --bs-btn-active-border-color: #021848;
    --bs-btn-active-shadow: inset 0 3px 5px #00000020;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #022060;
    --bs-btn-disabled-border-color: #022060;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #063;
    --bs-btn-border-color: #063;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00572b;
    --bs-btn-hover-border-color: #005229;
    --bs-btn-focus-shadow-rgb: 38,125,82;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #005229;
    --bs-btn-active-border-color: #004d26;
    --bs-btn-active-shadow: inset 0 3px 5px #00000020;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #063;
    --bs-btn-disabled-border-color: #063;
}

.btn-warning {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: #ffb81c;
    --bs-btn-border-color: #ffb81c;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: #ffc33e;
    --bs-btn-hover-border-color: #ffbf33;
    --bs-btn-focus-shadow-rgb: 217,156,24;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: #ffc649;
    --bs-btn-active-border-color: #ffbf33;
    --bs-btn-active-shadow: inset 0 3px 5px #00000020;
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: #ffb81c;
    --bs-btn-disabled-border-color: #ffb81c;
}

.dropdown-menu {
    --bs-dropdown-link-color: var(--bs-link-color);
    --bs-dropdown-link-hover-color: var(--bs-link-hover-color);
    --bs-dropdown-link-hover-bg: #e9ecef;
}

.navbar {
    --bs-navbar-color: var(--bs-link-color);
    --bs-navbar-hover-color: var(--bs-link-hover-color);
}