@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap");

:root {
    --transroc-font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --transroc-primary: #356d31;
    --transroc-primary-hover: #244e24;
    --transroc-primary-active: #1f421f;
    --transroc-primary-rgb: 53, 109, 49;
    --transroc-primary-focus-rgb: 80, 132, 75;
    --bs-body-font-family: var(--transroc-font-family);
    --bs-btn-font-family: var(--transroc-font-family);
    --bs-font-sans-serif: var(--transroc-font-family);
    --bs-primary: var(--transroc-primary);
    --bs-primary-rgb: var(--transroc-primary-rgb);
    --bs-link-color: var(--transroc-primary);
    --bs-link-hover-color: var(--transroc-primary-hover);
}

html,
body,
.nk-body,
.nk-app-root,
.nk-main,
.nk-wrap,
.nk-content,
.dropdown-menu,
.form-control,
.form-select,
.btn,
button,
input,
select,
textarea {
    font-family: var(--transroc-font-family) !important;
}

body :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span,
    strong,
    b,
    small,
    label,
    button,
    input,
    select,
    textarea,
    table,
    th,
    td,
    li,
    div
):not(.ni):not(.icon) {
    font-family: var(--transroc-font-family) !important;
    letter-spacing: 0;
}

.ni,
.icon.ni {
    font-family: Nioicon !important;
}

::selection {
    background: rgba(var(--transroc-primary-rgb), 0.22);
    color: #17211b;
}

.text-primary,
.link-primary,
a.link-primary {
    color: var(--transroc-primary) !important;
}

.link-primary:hover,
.link-primary:focus,
.link-on-primary:hover,
a.link-primary:hover,
a.link-primary:focus {
    color: var(--transroc-primary-hover) !important;
}

.bg-primary {
    background-color: var(--transroc-primary) !important;
}

.border-primary {
    border-color: var(--transroc-primary) !important;
}

.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: var(--transroc-primary);
    --bs-btn-border-color: var(--transroc-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--transroc-primary-hover);
    --bs-btn-hover-border-color: var(--transroc-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--transroc-primary-focus-rgb);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--transroc-primary-active);
    --bs-btn-active-border-color: var(--transroc-primary-active);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--transroc-primary);
    --bs-btn-disabled-border-color: var(--transroc-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--transroc-primary);
    --bs-btn-border-color: var(--transroc-primary);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--transroc-primary);
    --bs-btn-hover-border-color: var(--transroc-primary);
    --bs-btn-focus-shadow-rgb: var(--transroc-primary-focus-rgb);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--transroc-primary-active);
    --bs-btn-active-border-color: var(--transroc-primary-active);
    --bs-btn-disabled-color: var(--transroc-primary);
    --bs-btn-disabled-border-color: var(--transroc-primary);
}