/*
    Modify Bootstrap Variables
*/

:root, [data-bs-theme="light"], [data-bs-theme="dark"] {

    --bs-font-sans-serif: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    --bs-primary: var(--theme-color-500);
    --bs-primary-rgb: var(--theme-color-500-rgb);
    --bs-primary-text-emphasis: var(--theme-color-800);
    --bs-primary-bg-subtle: var(--theme-color-100);
    --bs-primary-border-subtle: var(--theme-color-200);

    --bs-link-color: var(--theme-color-500);
    --bs-link-color-rgb: var(--theme-color-500-rgb);
    --bs-link-hover-color: var(--theme-color-600);
    --bs-link-hover-color-rgb: var(--theme-color-600-rgb);
    --bs-focus-ring-color: rgba(var(--theme-color-500-rgb), 0.25);

}

:root, [data-bs-theme="light"] {
    --custom-body-bg: #f2f2f2;
}

[data-bs-theme="dark"] {
    --custom-body-bg: #111111;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--theme-color-500);
    --bs-btn-border-color: var(--theme-color-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--theme-color-550);
    --bs-btn-hover-border-color: var(--theme-color-600);
    --bs-btn-focus-shadow-rgb: var(--theme-color-450-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--theme-color-600);
    --bs-btn-active-border-color: var(--theme-color-650);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--theme-color-500);
    --bs-btn-disabled-border-color: var(--theme-color-500);
}

.btn-outline-primary {
    --bs-btn-color: var(--theme-color-500);
    --bs-btn-border-color: var(--theme-color-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--theme-color-500);
    --bs-btn-hover-border-color: var(--theme-color-500);
    --bs-btn-focus-shadow-rgb: var(--theme-color-450-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--theme-color-500);
    --bs-btn-active-border-color: var(--theme-color-500);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--theme-color-500);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--theme-color-500);
    --bs-gradient: none;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--theme-color-500-rgb), .25);
}

.form-check-input:focus {
    border-color: var(--theme-color-200);
    box-shadow: 0 0 0 .25rem rgba(var(--theme-color-500-rgb), .25);
}
.form-check-input:checked {
    background-color: var(--theme-color-500);
    border-color: var(--theme-color-500);
}

.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394eed3'/%3e%3c/svg%3e")
}

.nav-primary {
    --bs-nav-link-color: var(--theme-color-500);
    --bs-nav-link-hover-color: var(--theme-color-550);
    --bs-nav-pills-link-active-bg: var(--theme-color-600);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--theme-color-500);
}





/*
    Other
*/

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background-color: var(--custom-body-bg);
}

.bg-body {
    background-color: var(--custom-body-bg);
}





/*
    Show Alert Message
*/

.show-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    z-index: 9999;
    box-shadow: var(--bs-box-shadow) !important;
    animation: slideIn 0.3s ease-out forwards;
    transition: top 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .show-alert {
        left: 20px;
        right: 20px;
        min-width: auto;
    }
}