/* input(80,1): run-time error CSS1019: Unexpected token, found '@import'
input(80,9): run-time error CSS1019: Unexpected token, found 'url('../_content/Credentium.Shared.Web/css/open-iconic/font/css/open-iconic-bootstrap.min.css?v=DeXka_Sk-WFEdNqO7GVrBUS6Qbg')'
input(544,31): run-time error CSS1047: Expected number or percentage value in rgb function, found 'from'
input(544,60): run-time error CSS1046: Expect comma, found 'r'
input(544,62): run-time error CSS1047: Expected number or percentage value in rgb function, found 'g'
input(544,64): run-time error CSS1046: Expect comma, found 'b'
input(544,66): run-time error CSS1047: Expected number or percentage value in rgb function, found '/'
input(544,68): run-time error CSS1034: Expected closing parenthesis, found '10%'
input(544,68): run-time error CSS1042: Expected function, found '10%'
input(544,71): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(567,31): run-time error CSS1047: Expected number or percentage value in rgb function, found 'from'
input(567,60): run-time error CSS1046: Expect comma, found 'r'
input(567,62): run-time error CSS1047: Expected number or percentage value in rgb function, found 'g'
input(567,64): run-time error CSS1046: Expect comma, found 'b'
input(567,66): run-time error CSS1047: Expected number or percentage value in rgb function, found '/'
input(567,68): run-time error CSS1034: Expected closing parenthesis, found '10%'
input(567,68): run-time error CSS1042: Expected function, found '10%'
input(567,71): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(788,38): run-time error CSS1047: Expected number or percentage value in rgb function, found 'from'
input(788,67): run-time error CSS1046: Expect comma, found 'r'
input(788,69): run-time error CSS1047: Expected number or percentage value in rgb function, found 'g'
input(788,71): run-time error CSS1046: Expect comma, found 'b'
input(788,73): run-time error CSS1047: Expected number or percentage value in rgb function, found '/'
input(788,75): run-time error CSS1034: Expected closing parenthesis, found '25%'
input(788,75): run-time error CSS1042: Expected function, found '25%'
input(788,78): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
input(900,38): run-time error CSS1047: Expected number or percentage value in rgb function, found 'from'
input(900,67): run-time error CSS1046: Expect comma, found 'r'
input(900,69): run-time error CSS1047: Expected number or percentage value in rgb function, found 'g'
input(900,71): run-time error CSS1046: Expect comma, found 'b'
input(900,73): run-time error CSS1047: Expected number or percentage value in rgb function, found '/'
input(900,75): run-time error CSS1034: Expected closing parenthesis, found '25%'
input(900,75): run-time error CSS1042: Expected function, found '25%'
input(900,78): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' */
:root {
    --cr-font-color: #18181b;
    --cr-primary-color: #477e2d;
    /* Use as a contrast to base color. */
    --cr-primary-content-color: #fff;
    /* Use for hover, focus and etc. never as a base color. */
    --cr-primary-hover-color: #2b4b1b;

    --cr-secondary-color: #919191;

    --cr-danger-color: #b70000;
    /* Use as a contrast to danger color. */
    --cr-danger-content-color: #fff;
    /* Use for hover, focus and etc. never as a base color. */
    --cr-danger-hover-color: #630000;

    --cr-background-color: #f6f6f6;

    --cr-error: #c12727;
    /* It's halfway between white and black and barely complies with WCAG AA, be careful on what background you're using this color on. */
    --cr-placeholder-color: #757575;
    --cr-disabled-color: #757575;
    --cr-light-gray: #e5e5e5;
    --cr-gray: #b3b3b8;
}


@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-Thin.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 100;
}
@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-ExtraLight.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 200;
}

@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-Light.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 300;
}

@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-Regular.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-Medium.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-SemiBold.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 600;
}

@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-Bold.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 700;
}

@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-ExtraBold.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 800;
}

@font-face {
    font-family: 'Outfit';
    src: url('/_content/Credentium.Shared.Web/font/Outfit/static/Outfit-Black.ttf?v=taRy3GfLEGMOb6t3qm1nO_ckHco') format('woff2');
    font-weight: 900;
}
@import url('../_content/Credentium.Shared.Web/css/open-iconic/font/css/open-iconic-bootstrap.min.css?v=DeXka_Sk-WFEdNqO7GVrBUS6Qbg');

html, body {
    font-family: "Outfit", sans-serif;
    min-height: 100%;

    /* Webkit fix */
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

html {
    font-size: 16px;
}

body {
    color: var(--cr-font-color);
    font-weight: 400;
    font-size: 0.875rem; /*14px */
}

.cr-page {
    min-height: 100vh;
}

    .cr-page main {
        min-height: 100%;
        flex-grow: 1;
        background-color: var(--cr-background-color);
    }

        .cr-page main .cr-main-content {
            min-height: 100%;
            padding: 3rem 2rem;
        }

/* Headings: */
h1, .h1,
h2, .h2,
h3, .h3 {
    font-weight: 500;
}

    :where(h1, .h1, h2, .h2, h3, .h3):focus {
        outline: none;
    }

h1, .h1 {
    font-size: 1.5rem;
    line-height: 1.75rem;
}

h2, .h2 {
    font-size: 1.35rem;
    line-height: 1.5rem;
}

h3, .h3 {
    font-size: 1.15rem;
    line-height: 1.35rem;
}

h6, .h6 {
    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 500;
}

/* Links */
a, .cr-link {
    text-decoration: none;
    color: var(--cr-primary-color);
}

    a:hover, .cr-link:hover {
        color: var(--cr-primary-hover-color);
    }

.cr-link {
    background: none!important;
    border: none;
    padding: 0!important;
    cursor: pointer;
}

pre {
    font-family: "Outfit", sans-serif;
    font-size: 0.875rem;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }


.cr-label-value .cr-label {
    font-weight: 500;
}


.form-control.valid.modified,
.form-select.valid.modified {
    outline: none !important;
}
/* Bootstrap-like styles: */
.text-right {
    text-align: right;
}

.justify-items-center {
    justify-items: center;
}

.ml-3 {
    margin-left: 1rem;
}

.mr-1 {
    margin-right: 0.25rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-3 {
    margin-right: 1rem;
}
.mr-4 {
    margin-right: 1.5rem;
}
.mr-5 {
    margin-right: 3rem;
}

/* Tailwind CSS-like styles: */
.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.font-medium {
    font-weight: 500 !important;
}

/* Responsive utility classes */
@media (max-width: 768px) {
    /* Hide elements on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Stack elements vertically on mobile */
    .stack-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem;
    }
    
    /* Full width on mobile */
    .full-width-mobile {
        width: 100% !important;
    }
}

@media (min-width: 769px) {
    /* Hide elements on desktop */
    .hide-desktop {
        display: none !important;
    }
}
.cr-sr-only {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}

/* ProfileImage component */
.cr-profile-image img,
img.cr-profile-image {
    border-radius: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cr-badge-image img,
img.cr-badge-image {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.cr-separator,
.cr-separator-line {
    border-bottom: 2px solid var(--cr-light-gray);
    width: 100%;
}

.cr-separator-light,
.cr-separator-light-line {
    border-bottom: 1px solid var(--cr-light-gray);
    width: 100%;
}

.cr-separator,
.cr-separator-light {
    margin: 2rem 0;
}

.cr-icon-small {
    height: 10px !important;
    width: 10px !important;
}

.cr-icon-big {
    height: 1.5em !important;
    width: 1.5em !important;
}

.cr-spinner {
    width: 1em;
    height: 1em;
    display:grid;

    -webkit-mask: conic-gradient(from 15deg,#0000,#000);
    animation: cr-spinner-animation 1s infinite steps(12);

    background: url("/_content/Credentium.Shared.Web/icons/spinner.svg?v=ZkXUXBIwkgUSFhasJmG89D6ORGI");
    background-size: contain;
    aspect-ratio: 1;
}

@keyframes cr-spinner-animation {
    100% {transform:rotate(1turn)} 
}

/* Box with white background and gray border */
.cr-box,
.cr-box-light {
    padding: 1rem;
    border-radius: 8px;
    background: #fff;
}

.cr-box {
    border: 2px solid var(--cr-light-gray);
}

.cr-box-light {
    border: 1px solid var(--cr-light-gray);
}

.cr-info-button {
    padding-inline: .2em;
    display: inline-block;
    vertical-align: text-bottom;
}

    .cr-info-button img {
        height: .9em;
        width: .9em;
    }

.cr-tooltip {
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.cr-info-popover {
    max-width: 400px;
}

.cr-info-popover .popover-body {
    font-size: 0.8rem;
    line-height: 1.4;
}

.cr-info-popover .popover-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 0.5rem;
    border: 1px solid #dee2e6;
}
.cr-breadcrumbs {
}

    .cr-breadcrumbs ol {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
    }

    .cr-breadcrumbs .cr-breadcrumb {
        padding: .5rem;
    }

    .cr-breadcrumbs .cr-breadcrumb.active {
        background-color: #fff;
        border-radius: 8px;
    }

    .cr-breadcrumbs img {
        height: 2em;
    }
.cr-btn-primary,
.cr-btn-outline,
.cr-btn-outline-primary,
.cr-btn-danger,
.cr-btn-clear,
.cr-btn-icon,
.cr-btn-link {
    display: inline-block;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
    text-decoration: none;
    cursor: pointer;
    align-content: center;
    font-weight: 500;
}

    .cr-btn-primary:focus,
    .cr-btn-outline:focus,
    .cr-btn-outline-primary:focus,
    .cr-btn-danger:focus,
    .cr-btn-clear:focus,
    .cr-btn-icon:focus,
    .cr-btn-link:focus {
        outline-offset: .25rem;
    }

    .cr-btn-primary img,
    .cr-btn-outline img,
    .cr-btn-outline-primary img,
    .cr-btn-danger img,
    .cr-btn-clear img,
    .cr-btn-icon img,
    .cr-btn-link img {
        height: 1rem;
        width: 1rem;
        margin-right: .5rem;
    }

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

.btn-primary,
.cr-btn-primary {
    background-color: var(--cr-primary-color);
    color: var(--cr-primary-content-color);
    border: none;
}

    .btn-primary:hover,
    .cr-btn-primary:hover {
        background-color: var(--cr-primary-hover-color);
        color: var(--cr-primary-content-color);
    }

    .btn-primary:disabled,
    .cr-btn-primary:disabled {
        background-color: #6c757d;
        color: #ffffff;
        cursor: not-allowed;
        opacity: 0.65;
    }

        .btn-primary:disabled:hover,
        .cr-btn-primary:disabled:hover {
            background-color: #6c757d;
            color: #ffffff;
        }

.btn img {
    height: 1rem;
    width: 1rem;
    margin-right: .5rem;
}

.btn-secondary {
    background-color: var(--cr-secondary-color);
    border: none;
}

    .btn-secondary:hover {
        background-color: var(--cr-secondary-color);
    }

.cr-btn-danger {
    background-color: var(--cr-danger-color);
    color: var(--cr-danger-content-color);
    border: none;
}

    .cr-btn-danger:hover {
        background-color: var(--cr-danger-hover-color);
        color: var(--cr-danger-content-color);
    }

.cr-btn-outline-primary {
    background-color: var(--cr-primary-content-color);
    color: var(--cr-primary-color);
    border: solid 1px var(--cr-primary-color);
}

    .cr-btn-outline-primary:hover {
        background-color: var(--cr-primary-color);
        color: var(--cr-primary-content-color);
    }

.cr-btn-outline {
    background-color: var(--cr-primary-content-color);
    color: var(--cr-font-color);
    border: solid 1px var(--cr-light-gray);
}

    .cr-btn-outline:hover {
        background-color: var(--cr-primary-color);
        color: var(--cr-primary-content-color);
    }

.cr-btn-clear {
    background-color: transparent;
    color: var(--cr-primary-color);
    border: none;
}

    .cr-btn-clear:hover {
        background-color: rgb(from var(--cr-primary-color) r g b / 10%);
        color: var(--cr-primary-hover-color);
    }

.cr-btn-icon {
    background-color: transparent;
    border: none;
    padding: 0;
}

    .cr-btn-icon :where(img, svg) {
        height: 1rem;
        width: 1rem;
    }

.cr-btn-link {
    background-color: transparent;
    color: var(--cr-primary-color);
    border: none;
    padding: .1rem .25rem;
}

    .cr-btn-link:hover {
        background-color: rgb(from var(--cr-primary-color) r g b / 10%);
        color: var(--cr-primary-hover-color);
    }

    .cr-btn-link :where(img, svg) {
        height: 1rem;
        width: 1rem;
    }

/* Responsive button styles */
@media (max-width: 768px) {
    /* Make buttons full width on mobile by default */
    .cr-btn-primary,
    .cr-btn-outline,
    .cr-btn-outline-primary,
    .cr-btn-danger,
    .cr-btn-clear,
    .cr-btn-link {
        width: 100%;
        text-align: center;
    }

    /* Reduce padding on smaller screens */
    .cr-btn-primary,
    .cr-btn-outline,
    .cr-btn-outline-primary,
    .cr-btn-danger,
    .cr-btn-clear,
    .cr-btn-link {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    /* Stack buttons vertically */
    .cr-btn-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Allow inline buttons with specific class */
    .cr-btn-inline {
        width: auto;
        display: inline-block;
    }

    /* Icon buttons should remain small */
    .cr-btn-icon {
        width: auto;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    /* Even smaller padding on very small screens */
    .cr-btn-primary,
    .cr-btn-outline,
    .cr-btn-outline-primary,
    .cr-btn-danger,
    .cr-btn-clear,
    .cr-btn-link {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
}

/* Button group styles for desktop */
@media (min-width: 769px) {
    .cr-btn-group {
        display: flex;
        gap: 1rem;
        align-items: center;
    }
}
.cr-dropdown {
    position: relative;
}

.cr-dropdown-btn {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;

    background-color: transparent;

    border-radius: 8px;
    cursor: pointer;
}

.cr-dropdown-arrow {
    transition: transform ease-in-out 0.3s;
    transform: rotate(180deg);
}

    .cr-dropdown-arrow img {
        width: 2em;
        height: 2em;
    }

.cr-dropdown-content {
    display: grid;

    list-style: none;
    position: absolute;
    min-width: 10rem;
    right: 0;
    visibility: hidden;
    overflow: hidden;
    z-index: 1;

    background-color: #fff;

    border: 2px solid var(--cr-light-gray);
    border-radius: 8px;

    padding: 1rem .5rem;
}

.cr-dropdown-content li {
    border-radius: 0.5em;
    position: relative;
    left: 100%;
}

.cr-dropdown-content.menu-open li {
    left: 0;
}

.cr-dropdown-content.menu-open {
    visibility: visible;
}

.cr-dropdown-arrow.cr-dropdown-arrow-rotate {
    transform: rotate(0deg);
}

.cr-dropdown-item-btn {
    display: inline-flex;

    border-radius: 8px;

    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;

    text-decoration: none;
    cursor: pointer;
    align-content: center;

    font-weight: 500;

    color: var(--cr-font-color);
    background-color: transparent;
    border: none;
    padding: .625rem .5rem;
    width: 100%;
    text-align: justify;
    text-wrap-mode: nowrap;
    align-items: center;
}

    .cr-dropdown-item-btn:hover {
        color: var(--cr-primary-color);
    }

    .cr-dropdown-item-btn img {
        width: 1.25rem;
        height: 1.25rem;
        margin-right: 0.625rem;
    }

.cr-dropdown-separator {
    border: none;
    border-top: 1px solid var(--cr-light-gray);
    margin: 0.5rem 0;
}

.cr-dropdown-item-danger {
    color: #dc2626 !important;
}

    .cr-dropdown-item-danger:hover {
        color: #b91c1c !important;
        background-color: #fee2e2;
    }

    .cr-dropdown-item-danger img {
        filter: brightness(0) saturate(100%) invert(20%) sepia(95%) saturate(3500%) hue-rotate(350deg) brightness(95%) contrast(95%);
    }
label {
    display: unset;
}

.cr-form {
    display: flex;
    flex-direction: column;
}

input::placeholder {
    color: var(--cr-placeholder-color);
}

.form-control,
.form-select {
    font-size: 0.875rem;
    border-radius: 8px;
    border: solid 1px var(--cr-light-gray);
    width: 100%;
    padding: 0.5rem 1rem;
    margin-top: .5rem;
    line-height: 2rem;
}

    .form-control::placeholder {
        color: var(--cr-placeholder-color);
        font-weight: 400;
    }

    .form-control:focus {
        border-color: var(--cr-primary-color);
        box-shadow: 0 0 0 .25rem rgb(from var(--cr-primary-color) r g b / 25%);
    }

.form-label {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.form-group + .form-group,
.multi-form-group + .multi-form-group,
.form-group + .multi-form-group,
.multi-form-group + .form-group {
    margin-top: 2rem;
}

.multi-form-group {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    justify-content: space-evenly;
}

    .multi-form-group > * {
        width: 100%;
    }

.form-control.valid.modified,
.form-select.valid.modified {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--cr-error);
}

/* MVC error message */
.field-validation-error,
/* Blazor error message */
.validation-message {
    color: var(--cr-error);
}

.cr-form-action-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1rem;
}

/* Responsive styles for form action buttons */
@media (max-width: 768px) {
    .cr-form-action-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cr-form-action-buttons > * {
        width: 100%;
    }
}

/* Allow horizontal layout on mobile with specific class */
@media (max-width: 768px) {
    .cr-form-action-buttons.cr-form-action-buttons-inline {
        flex-direction: row;
    }
    
    .cr-form-action-buttons.cr-form-action-buttons-inline > * {
        width: auto;
        flex: 1;
    }
}

/* Expiration-time-component: */
.cr-expiration-time-control {
    display: flex;
    flex-direction: row;

    width: min-content;
    gap: 1rem;

    align-items: center;
    min-height: 4.5em;
}

    .cr-expiration-time-control .cr-switch {
        font-size: 1.5em !important;
    }

    .cr-expiration-time-control input[type='number'] {
        margin: 0;
        width: 8rem;
    }

    .cr-expiration-time-control select {
        width: 8rem;
        /* border-radius: .5rem;
        border-color: var(--cr-light-gray); */
    }

.form-select {
    background-image: url("/_content/Credentium.Shared.Web/icons/triangle-arrow-down.svg?v=F0u9etoTbHH5SLrxyXgtTHO-Nn8");

    padding-right: 2.25rem;

    background-color: #fff;
}

    .form-select:focus {
        border-color: var(--cr-primary-color);
        outline: 1px solid var(--cr-primary-color);
        box-shadow: 0 0 0 .25rem rgb(from var(--cr-primary-color) r g b / 25%);
    }

    .form-select:disabled {
        user-select: text;
    }

    .form-select option:checked {
        background-color: var(--cr-primary-color);
        color: var(--cr-primary-content-color);
    }

    .form-select option:disabled {
        color: var(--cr-placeholder-color);
    }

.form-label + .cr-file-input {
    margin-top: .5rem;
}

.cr-file-input {
    width: 100%;
}

    .cr-file-input .cr-file-input-no-file {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;

        width: fit-content;
        cursor: pointer;
        font-weight: 500;

        margin-top: .375rem;
        padding: .75rem 1rem;
        border-radius: 12px;
        border: 2px solid var(--cr-light-gray);

        background-color: #fff;
    }

        .cr-file-input .cr-file-input-no-file img {
            width: 1.5em;
            height: 1.5em;
            object-fit: contain;
            margin-right:.5rem;
        }

        .cr-file-input .cr-file-input-no-file input[type='file'] {
            display: none;
        }

    .cr-file-input .cr-file-input-file-present {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        padding: .75rem 1rem;
        font-weight: 500;

        border: 2px solid var(--cr-light-gray);
        border-radius: 8px;

        background-color: #fff;
    }

        .cr-file-input .cr-file-input-file-present > * {
            display: flex;
            flex-direction: row;
            gap: 1.5rem;
        }

        .cr-file-input .cr-file-input-file-present img {
            width: 1.25em;
            height: 1.25em;
            object-fit: contain;
        }

input[type="checkbox"].cr-check {
    /* Remove native checkbox: */
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.1em solid var(--cr-placeholder-color);
    border-radius: 0.3em;
    transform: translateY(-0.075em);
    transition: 120ms all ease-in-out;

    display: inline-grid;
    place-content: center;
}

    input[type="checkbox"].cr-check::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        transition: 120ms all ease-in-out;
        box-shadow: inset 1em 1em transparent;

        transform-origin: bottom left;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    input[type="checkbox"].cr-check:checked::before {
        box-shadow: inset 1em 1em var(--cr-primary-color);
    }

    input[type="checkbox"].cr-check:checked {
        border-color: var(--cr-primary-color);
    }

    input[type="checkbox"].cr-check:focus {
        outline-offset: max(4px, 0.15em);
    }

    input[type="checkbox"].cr-check:disabled {
        color: var(--cr-disabled-color);
        cursor: not-allowed;
    }

input[type="checkbox"].cr-switch {
    /* Remove native checkbox: */
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 1.75em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 1000px;

    display: inline-grid;
    place-content: center;
}

    input[type="checkbox"].cr-switch::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        border-radius: 100%;

        transform: translateX(-45%);
        background-color: transparent;
        box-shadow: inset 0px 0px 0 .15em #000;
        transition: 120ms all ease-in-out;
    }

    input[type="checkbox"].cr-switch:checked::before {
        transform: translateX(45%);
        background-color: var(--cr-primary-color);
        box-shadow: none;
    }

    input[type="checkbox"].cr-switch:focus {
        outline-offset: max(4px, 0.15em);
    }

    input[type="checkbox"].cr-switch:disabled {
        color: var(--cr-disabled-color);
        cursor: not-allowed;
    }

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* GeoBar — Apple-style language suggestion banner */

.geobar {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
    background-color: #f5f5f7;
    border-bottom: 1px solid #d2d2d7;
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
}

.geobar--visible {
    max-height: 80px;
    opacity: 1;
}

.geobar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 20px;
    max-width: 960px;
    margin: 0 auto;
    font-size: 14px;
    color: #1d1d1f;
}

.geobar__flag {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    color: #1d1d1f;
    background-color: #e8e8ed;
    border-radius: 4px;
    padding: 4px 6px;
}

.geobar__text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.geobar__btn {
    flex-shrink: 0;
    background-color: #1d1d1f;
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-family: inherit;
    white-space: nowrap;
}

.geobar__btn:hover {
    background-color: #424245;
}

.geobar__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #86868b;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.geobar__close:hover {
    color: #1d1d1f;
}

.geobar__close svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 640px) {
    .geobar__inner {
        padding: 8px 14px;
        gap: 8px;
        font-size: 12px;
    }

    .geobar__btn {
        font-size: 12px;
        padding: 5px 12px;
    }

    .geobar__flag {
        font-size: 10px;
    }
}

.cr-modal {
    backdrop-filter: blur(8px);
}

    .cr-modal .modal-content {
        border: none;
        border-radius: 1rem;
        box-shadow: 0px 0px 16px #444;
        padding: 1.5rem;
        align-items: center;
    }

        .cr-modal .modal-content .modal-header,
        .cr-modal .modal-content .modal-footer,
        .cr-modal .modal-content .modal-body {
            border: none;
        }

        .cr-modal .modal-content .modal-header {
            align-self: flex-start;
        }

            .cr-modal .modal-content .modal-header .modal-icon {
                height: 4rem;
                margin-bottom: 1rem;
            }

                .cr-modal .modal-content .modal-header .modal-icon img {
                    height: 100%;
                    object-fit: contain;
                }

            .cr-modal .modal-content .modal-header .modal-title-bar {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }

            .cr-modal .modal-content .modal-header .modal-title {
                font-size: 1.25em;
                font-weight: 500;
            }

        .cr-modal .modal-content .modal-body {
            width: 100%;
            text-align: center;
        }

        .cr-modal .modal-content .form-group {
            margin-bottom: 1rem;
        }

            .cr-modal .modal-content .form-group .form-label {
                font-weight: 500;
            }

            .cr-modal .modal-content .form-group .form-control {
                border-radius: 0.5rem;
            }

        .cr-modal .modal-content .cr-form-action-buttons {
            justify-content: space-between;
        }

            .cr-modal .modal-content .cr-form-action-buttons button {
                width: 100%;
            }

        .cr-modal .modal-content .modal-body:has(.cr-modal-close-btn) {
            width: min-content;
        }

.cr-modal.cr-small-modal .modal-dialog {
    width: 34rem;
}

    .cr-modal.cr-small-modal .modal-dialog .modal-content {
        padding-left: 3rem;
        padding-right: 3rem;
        text-align: start;
    }

    .cr-modal.cr-small-modal .modal-dialog .modal-header {
        padding: 1rem 0rem;
    }

    .cr-modal.cr-small-modal .modal-dialog .modal-header,
    .cr-modal.cr-small-modal .modal-dialog .modal-title-bar {
        width: 100%;
    }

    .cr-modal.cr-small-modal .modal-dialog .modal-title-bar .modal-title {
        font-size: 1em;
        font-weight: 500;
    }

    .cr-modal.cr-small-modal .modal-dialog .modal-title-bar .btn-close {
        position: relative;
        top: -1rem;
        left: 1.5rem;
    }

    .cr-modal.cr-small-modal .modal-dialog .modal-body {
        padding: 0;
    }

    .cr-modal.cr-small-modal .modal-dialog .cr-form-action-buttons {
        margin-top: 2rem;
    }

        .cr-modal.cr-small-modal .modal-dialog .cr-form-action-buttons button {
            width: unset;
        }

/* Responsive modal styles */
@media (max-width: 768px) {
    .cr-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .cr-modal.cr-small-modal .modal-dialog {
        width: 100%;
    }
    
    .cr-modal .modal-content {
        padding: 1.5rem;
    }
    
    .cr-modal.cr-small-modal .modal-dialog .modal-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Override desktop button width for small modals on mobile */
    .cr-modal.cr-small-modal .modal-dialog .cr-form-action-buttons button {
        width: 100%;
    }
    
    /* Allow inline buttons in modals with specific class */
    .cr-modal .cr-form-action-buttons.cr-form-action-buttons-inline button {
        width: auto;
        flex: 1;
    }
}
.cr-table-container {
    --cr-table-border-radius: 12px;
    width: 100%;

    border-radius: var(--cr-table-border-radius);
    border: solid 1px var(--cr-light-gray);
}

    .cr-table-container thead tr:first-child th:first-child {
        border-top-left-radius: var(--cr-table-border-radius);
    }

    .cr-table-container thead tr:first-child th:last-child {
        border-top-right-radius: var(--cr-table-border-radius);
    }

    .cr-table-container :not(:has(tbody)) thead tr:last-child th:first-child,
    .cr-table-container tbody tr:last-child td:first-child {
        border-bottom-left-radius: var(--cr-table-border-radius);
    }

    .cr-table-container :not(:has(tbody)) thead tr:last-child th:last-child,
    .cr-table-container tbody tr:last-child td:last-child {
        border-bottom-right-radius: var(--cr-table-border-radius);
    }

table.cr-table {
    min-width: 100%;
}

    table.cr-table :where(td, th) {
        padding: .75rem;
    }
    table.cr-table tr :where(td, th) {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

        table.cr-table tr :where(td, th):first-child {
            padding-left: 2rem;
        }
        table.cr-table tr :where(td, th):last-child {
            padding-right: 2rem;
        }

    table.cr-table th {
        font-weight: 500;
    }

    table.cr-table th,
    table.cr-table tr:not(:last-child),
    table.cr-table :has(tbody) :has(th) tr {
        border-bottom: solid 1px var(--cr-light-gray);
    }

    table.cr-table thead,
    table.cr-table tr:nth-child(even) {
        background-color: #fff;
    }

.cr-tabs {
    width: 100%;
}

.cr-tablist {
    --cr-default-tab-color: #70707B;
    --cr-default-tab-line-color: var(--cr-light-gray);
    --cr-active-tab-color: var(--cr-primary-color);
    --cr-disabled-tab-color: #B3B3B8;

    width: 100%;
    display: flex;

    padding-bottom: 1.5rem;
}

    .cr-tablist .cr-tab {
        padding: .5rem 1.5rem;
        align-content: end;

        background-color: transparent;
        color: var(--cr-default-tab-color);

        border: none;
        border-bottom: solid 1px var(--cr-default-tab-line-color);

        font-weight: 500;
    }

        .cr-tablist .cr-tab.selected {
            color: var(--cr-active-tab-color);
            border-bottom: solid 2px var(--cr-active-tab-color);
        }

        .cr-tablist .cr-tab:disabled {
            color: var(--cr-disabled-tab-color);
        }

    .cr-tablist .cr-tablist-padding {
        flex-grow: 1;
        border-bottom: solid 1px var(--cr-default-tab-line-color);
    }

.toastify {
    /* Erase toastify-js default background */
    background: none;
    cursor: auto;
    box-shadow: none;

    border-radius: 8px;

    padding: 1rem 1.5rem;
    min-width: 24rem;
}

    .toastify.toast-success,
    .toastify.toast-status {
        background-color: #fff;
        color: var(--cr-font-color);

        border: solid 1px var(--cr-light-gray);
    }

        .toastify.toast-success .toast-close,
        .toastify.toast-status .toast-close {
            color: var(--cr-font-color);
        }

    .toastify.toast-error {
        background-color: var(--cr-error);
        color: #fff;
    }

    .toastify .toast-close {
        float: right;
        position: relative;
        top: -8px;
        right: -16px;
        font-size: 0.75rem;
    }

.cr-list-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.cr-list-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.cr-search-bar {
    width: 100%;
}

    /* SearchBar styles moved to component-specific CSS */

.cr-paginator {
    margin-top: 1.5rem;
    padding: 0 1rem;
}

.cr-empty-list-message-container {
    padding-top: 6rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .cr-empty-list-message-container .cr-empty-list-message {
        max-width: 36em;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

        .cr-empty-list-message-container .cr-empty-list-message .cr-empty-list-message-header {
            font-size: 1.5rem;
            margin-bottom: .75rem;
            font-weight: 500;
        }

        .cr-empty-list-message-container .cr-empty-list-message button,
        .cr-empty-list-message-container .cr-empty-list-message .cr-btn-primary {
            margin-top: 2rem;
        }
.cr-details-main {
    display: flex;
    gap: 1rem;
}

    .cr-details-main .cr-details-badge {
        flex-shrink: 0;
        width: 24rem;
        aspect-ratio: 1;
        background-color: #fff;
        padding: 2rem;
        border-radius: 32px;
    }

    .cr-details-main .cr-details-content {
        flex-grow: 1;
        background-color: #fff;
        padding: 2rem;
        border-radius: 32px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        height: fit-content;
    }

        .cr-details-main .cr-details-content .cr-details-content-item-label {
            font-weight: 800;
            margin-bottom: .5rem;
        }

        .cr-details-main .cr-details-content .cr-details-content-item-value {
            display: flex;
        }

.cr-details-badge-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.cr-details-action-buttons {
    display: flex;
    justify-content: space-between;
}
.cr-edit-page-content {
    max-width: 48rem;
}