/* Colors mirror frontend-v2/public/sass/abstracts/_variables.scss */
:root {
    --font-primary: "Jost", sans-serif;
    --color-dark-1: #051036;
    --color-dark-2: #0d2857;
    --color-light-1: #697488;
    --color-light-2: #f5f5f5;
    --color-blue-1: #3554d1;
    --color-blue-2: #e5f0fd;
    --color-green-2: #008009;
    --color-red-1: #d93025;
    --color-yellow-1: #f8d448;
    --color-border: #dddddd;

    --bs-font-sans-serif: var(--font-primary);
    --bs-body-color: var(--color-dark-1);
    --bs-body-color-rgb: 5, 16, 54;
    --bs-primary: var(--color-blue-1);
    --bs-primary-rgb: 53, 84, 209;
    --bs-dark-rgb: 5, 16, 54;
    --bs-light-rgb: 245, 245, 245;
    --bs-secondary-color: var(--color-light-1);
    --bs-secondary-bg: var(--color-light-2);
    --bs-link-color: var(--color-blue-1);
    --bs-link-color-rgb: 53, 84, 209;
    --bs-link-hover-color: var(--color-dark-1);
    --bs-link-hover-color-rgb: 5, 16, 54;
    --bs-list-group-active-bg: var(--color-blue-1);
    --bs-list-group-active-border-color: var(--color-blue-1);
    --bs-nav-link-hover-color: var(--color-dark-1);
    --bs-border-color: var(--color-border);
    --bs-grey-300: var(--color-border);
    --bs-card-cap-bg: var(--color-light-2);
    --bs-red: var(--color-red-1);
    --bs-danger-rgb: 217, 48, 37;
    --bs-green: var(--color-green-2);
    --bs-success-rgb: 0, 128, 9;
    --bs-warning-rgb: 248, 212, 72;
    --bs-border-radius: 4px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-box-shadow: 2px 1px 3px 3px rgba(0, 0, 0, 0.05);
}

body {
    font-family: var(--font-primary);
    color: var(--color-dark-1);
}

.text-muted {
    color: var(--color-light-1) !important;
}

.pagination {
    --bs-pagination-color: var(--color-blue-1);
    --bs-pagination-hover-color: var(--color-dark-1);
    --bs-pagination-focus-color: var(--color-dark-1);
    --bs-pagination-active-bg: var(--color-blue-1);
    --bs-pagination-active-border-color: var(--color-blue-1);
}

.hidden {
    display: none !important;
}

.btn {
    position: relative;
    overflow: visible;
    transition: none;
    font-weight: 500;
    --bs-btn-hover-bg: var(--color-dark-1);
    --bs-btn-hover-border-color: var(--color-dark-1);
}

.btn.has-icon>.icontainer {
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

/* frontend-v2: .button.-dark-1.bg-blue-1 (blue, dark on hover) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--color-blue-1);
    --bs-btn-border-color: var(--color-blue-1);
    --bs-btn-hover-color: #fff;
    --bs-btn-focus-shadow-rgb: 53, 84, 209;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-dark-1);
    --bs-btn-active-border-color: var(--color-dark-1);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--color-blue-1);
    --bs-btn-disabled-border-color: var(--color-blue-1);
}

/* frontend-v2: .button.-outline-blue-1.text-blue-1 */
.btn-secondary {
    --bs-btn-color: var(--color-blue-1);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--color-blue-1);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--color-blue-1);
    --bs-btn-hover-border-color: var(--color-blue-1);
    --bs-btn-focus-shadow-rgb: 53, 84, 209;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--color-blue-1);
    --bs-btn-active-border-color: var(--color-blue-1);
    --bs-btn-disabled-color: var(--color-blue-1);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--color-blue-1);
}

.list-group {
    --bs-list-group-active-border-color: var(--color-blue-1);
    --bs-list-group-hover-bg: var(--color-light-2);
    --bs-list-group-active-bg: var(--color-blue-1);
    --bs-list-group-active-color: #fff;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-blue-1);
    box-shadow: 0 0 0 0.2rem rgba(53, 84, 209, 0.15);
}

.form-check-input:checked {
    background-color: var(--color-blue-1);
    border-color: var(--color-blue-1);
}

.bg-primary {
    background-color: var(--color-blue-2) !important;
    color: var(--color-dark-1) !important;
}

#xt-breadcrumb>.btn {
    position: relative;
    border-radius: 0;
    overflow: visible;
    transition: none;
}


#xt-breadcrumb>.btn.btn-primary::before {
    background-color:#f1416c;
}

#xt-breadcrumb>.btn.btn-primary {
    --bs-btn-bg: #f1416c;
}

#xt-breadcrumb>.btn-primary:not(:last-child):after, #xt-breadcrumb>.btn-primary:not(:last-child):before {
    bottom: -1px;
    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
    content: "";
    left: 100%;
    position: absolute;
    top: -1px;
    width: 1.8rem;
    z-index: 2;
}

#xt-breadcrumb>.btn.btn-primary:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 1.8rem;
    height: 100%;
    background-color: #fff;
    background-color: var(--bs-border-color);
    -webkit-clip-path: polygon(50% 50%, -50% -50%, 0 100%);
    clip-path: polygon(50% 50%, -50% -50%, 0 100%);
    margin-left: 2px;
    z-index: 1;
}

#hp-container .h1, #hp-container h1{
    font-size: 1.4rem;
}

#hp-container .h2, #hp-container h2{
    font-size: 1.3rem;
}
