@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: "Open Sans", Sans-serif;
}

h1:focus {
    outline: none;
}
.k-tooltip {
    color: black!important;
}

.k-tooltip {
    color: black !important;
}
.mobile-textbox {
    font-size: 2.0rem !important;
    padding-block: var(--kendo-spacing-1, 0.25rem);
    padding-inline: var(--kendo-spacing-2, 0.5rem);
}
#IconRed {
    color: #E5332C !important;
    width: 15px !important;
    margin-left: 2%;
}
/* hide labels */
.no-labels .k-floating-label {
    font-size: 0;
    color: transparent;
}
html {
    background-color: rgb(var(--primaryBackgroundColor));
    /* Single point where the portal theme scales typography. 100% honours the browser's own font
       preference; --fontScale is set per portal by the theme (see :root, .auxil below). */
    font-size: calc(100% * var(--fontScale, 1));
}

body {
    font-size: 1rem;
}
.k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
    color: rgb(var(--primaryButtonFontColor)) !important;
    border-color: rgb(var(--primaryButtonColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
    color: rgb(var(--primaryButtonFontColor)) !important;
    border-color: rgb(var(--primaryButtonColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.k-tabstrip-items-wrapper .k-item.k-active::after {
    border: none !important;
}

.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected {
    border: none !important;
    background-color: var(--kendo-color-surface-alt, #ffffff) !important;
}

/* Active/hovered tab text and underline indicator follow the portal's primary button colour instead of the theme's primary. */
.k-tabstrip-items-wrapper .k-item.k-active,
.k-tabstrip-items-wrapper .k-item.k-selected,
.k-tabstrip-items-wrapper .k-item.k-active > .k-link,
.k-tabstrip-items-wrapper .k-item:hover > .k-link,
.k-tabstrip-items-wrapper .k-item.k-hover > .k-link,
.k-tabstrip-items-wrapper .k-item:focus > .k-link,
.k-tabstrip-items-wrapper .k-item.k-focus > .k-link {
    color: rgb(var(--primaryButtonColor)) !important;
}

.k-tabstrip-items-wrapper .k-item.k-active .k-link::after {
    background: rgb(var(--primaryButtonColor)) !important;
}
/* Transparency only on the background (rgba), not via opacity: opacity would also fade the text. */
.k-tabstrip-items-wrapper .k-link {
    background-color: rgba(var(--primaryButtonColor), 0.1) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
}
.k-segmented-control-button k-selected k-hover {
    background-color: rgba(var(--primaryButtonColor),0.5) !important;
}
.k-tabstrip-items-wrapper .k-link-text {
    color: rgb(var(--primaryFontColor)) !important;
}
.k-button.k-button-primary, .k-button.k-button-solid.k-button-primary {
    border-color: rgba(var(--primaryButtonColor),0.5) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgba(var(--primaryButtonColor)) !important;
}
.k-button-flat-primary, .k-button-flat.k-button-primary {
    color: rgb(var(--primaryButtonFontColor)) !important;
}
/* A focused or hovered dropdown keeps a light background, so its text stays in the normal font colour -
   the button font colour is meant for a filled button and is usually white. */
.k-picker-solid:focus-within, .k-picker:focus-within {
    border-color: rgb(var(--primaryButtonColor)) !important;
    background-color: rgb(var(--PortalsFilterContainerColor),0.5) !important;
    background-image: none;
    color: rgb(var(--primaryFontColor)) !important;
    box-shadow: unset;
}
    .listbox-container {
        display: flex;
        justify-content: center; /* Horizontally center the list boxes */
        align-items: center; /* Vertically center the list boxes */
        height: 100%; /* Take full height of the TelerikWindow content */
    }

    .listbox-container > * {
        margin: 0 10px; /* Add spacing between the two list boxes */
    }
    .k-listbox {
        width: 500px;
    }

.k-picker-solid:hover, .k-picker-solid.k-hover, .k-picker:hover, .k-picker.k-hover {
    border-color: rgb(var(--primaryButtonColor),1) !important;
    background-color: rgb(var(--PortalsFilterContainerColor),0.5) !important;
    background-image: none;
    box-shadow: unset;
}
.k-input-solid, .k-input {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    color: var(--kendo-color-on-app-surface, #3d3d3d);
    background-color: rgb(var(--PortalsFilterContainerColor)) !important;
}
.PortalsFilterContainer .k-input-solid, .PortalsFilterContainer .k-input {
    background-color: white !important; /* Background color is white if inside PortalContainer */
}
.TelerikTabStrip .k-input-solid, .TelerikTabStrip .k-input {
    background-color: rgb(var(--PortalsFilterContainerColor)) !important;
}

.k-tabstrip-items-wrapper .k-item > .k-link {
    z-index: 1;
    color: black;
}
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body {
    color: rgb(var(--primaryFontColor));
}

.k-notification-error {
    border-color: #f31700;
    color: white !important;
    background-color: #f31700;
}
.k-window {
    width: 500px ; /* Set the width */
    height: 600px ; /* Set the height */
}

.k-window .k-window-content {
    overflow: auto; /* Add scrolling if content overflows */
}
.k-notification-success {
    border-color: #37b400;
    color: white !important;
    background-color: #37b400;
}

.background {
    align-content: center;
    justify-content: center;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
    margin: 5px;
}

.align-right {
    text-align: right;
}

.k-grid .align-right {
    text-align: right;
}

.align-right .k-cell-inner > .k-link {
    justify-content: right;
}
.k-button.k-button-xs.k-icon-button {
    padding: var(--kendo-spacing-0\.5);
    color: rgb(var(--primaryButtonFontColor)) !important;
}

.k-actions .k-button, .k-edit-buttons .k-button, .k-action-buttons .k-button, .k-columnmenu-actions .k-button, .k-form-buttons .k-button {
    box-shadow: none;
    margin-bottom: 5px !important;
    border-color: rgb(var(--primaryButtonColor));
    color: rgb(var(--primaryButtonFontColor)) !important;
}
/*.settings-button {
    margin-bottom: 5px !important;
}*/
.k-button, .k-button.k-button-base, .k-button.k-button-solid, .k-button.k-button-solid.k-button-base {
    background-color: rgb(var(--primaryButtonColor)) !important;
    border-color: rgb(var(--primaryButtonColor)) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
}
.k-button-solid-primary:hover, .k-button-solid-primary.k-hover, .k-button-primary:hover, .k-button-primary.k-hover {
    background-color: rgb(var(--primaryButtonColor)) !important;
    border-color: rgb(var(--primaryButtonColor)) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
    filter: brightness(85%);
}


.k-breadcrumb-link {
    color: rgb(var(--primaryButtonColor)) !important;
}

.k-breadcrumb-item-text {
    color: rgb(var(--primaryButtonColor)) !important;
}

.white-container--dropshadow .form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 75%;
}

.white-container--dropshadow .text {
    display: flex;
    justify-content: start;
    flex-direction: column;
}

.white-container--dropshadow .title {
    font-size: 30px;
    font-weight: 700;
}

.loginTextBox {
    height: 3.5rem
}
.mobileloginTextBox {
    height: 5.5rem
}

.white-container--dropshadow .explanation {
    font-size: 18px;
    font-weight: 400;
}

.white-container--dropshadow .normal-link {
    color: rgb(var(--primaryFontColor));
    margin-top: 20px;
    text-decoration: none;
    background-color: transparent;
}

    .white-container--dropshadow .normal-link:hover {
        text-decoration: underline;
    }

.white-container--dropshadow img {
    margin-bottom: 30px;
    max-width: 200px;
    max-height: 100px;
}

.white-container--dropshadow .input-field {
    width: 99%;
    padding-top: 30px;
}

.PortalsFilterContainerValue {
    font-family: var(--TitleFont);
    color: rgb(var(--PortalsFilterContainerValue));
}

.white-container--dropshadow .input-field .valid-email {
    display: hidden;
}

.stockNumber {
    font-weight: bold;
    font-family: var(--TitleFont);
    color: white;
    font-size: 2.0rem;
}

.white-container--dropshadow .text-input {
    width: 100% !important;
    padding: 10px;
    border: solid 1px var(--platinum);
    border-radius: 5px;
    color: rgb(var(--primaryButtonFontColor)) !important;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: rgb(var(--primaryButtonFontColor)) !important;
    border-color: rgb(var(--primaryButtonColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}
.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    color: rgb(var(--primaryButtonFontColor)) !important;
    border-color: rgb(var(--primaryButtonColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.k-avatar-solid-primary, .k-avatar {
    border-color: rgb(var(--primaryButtonColor)) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.mobile-section-subtitle {
    font-size: 2.5rem !important;
}
.white-container--dropshadow .text-input:focus-visible {
    outline: none;
    border: 2px solid var(--blue);
}

/* ===== Shared login / forgot / reset / set-password split-screen layout =====
   Single source used by the standalone login MVC view AND the Blazor
   forgot/set/reset pages (all render the same split screen). Selectors are
   login-specific ids/classes; `.card` is scoped under `.white-container--dropshadow`
   so it never leaks onto Bootstrap cards elsewhere in the app. */
#loginBackground {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    padding-top: 2rem !important;
    padding-left: 17rem !important;
    z-index: 100 !important;
    overflow: hidden !important;
}

#leftContainer {
    display: flex;
    flex-direction: column;
    width: 60%;
    justify-content: space-between;
}

#greetingText {
    display: flex;
    flex-direction: column;
    padding-top: 75px;
}

#fadedWelcome {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 200px;
    font-weight: 900;
    opacity: 0.05;
    transform: translateY(50px);
}

#letterW {
    font-size: 150px;
}

#leftBottomContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-bottom: 100px;
}

.white-container--dropshadow {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    padding: 0px;
    gap: 60px;
    width: 40%;
    height: 90%;
    text-align: center;
}

.white-container--dropshadow .card {
    position: relative;
    background-color: transparent;
    width: 100%;
    padding: 50px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
}

.white-container--dropshadow .copyright {
    margin-top: 120px;
}

.auxil-login-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transform: perspective(1000px) rotateY(0deg);
    box-sizing: border-box;
    transition: transform 0.5s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    background: rgb(var(--navbarBackgroundColor));
    border-radius: 5px;
    width: 100%;
    padding: 10%;
    height: 100%;
    box-shadow: 5px 6px 20px rgba(46, 41, 35, .5);
}

.auxil-login-card.flipped {
    transform: perspective(1000px) rotateY(-180deg);
    animation: hideBackCard 1s;
}

.exact-login-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: perspective(1000px) rotateY(180deg);
    box-sizing: border-box;
    transition: transform 0.5s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    background: rgb(var(--navbarBackgroundColor));
    border-radius: 5px;
    width: 100%;
    padding: 10%;
    height: 100%;
    box-shadow: 5px 6px 20px rgba(46, 41, 35, .5);
}

.exact-login-card.flipped {
    transform: perspective(1000px) rotateY(0deg);
    animation: hideBackCard 1s;
}

.exact-mobile-login-card {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5%;
    height: auto;
    position: relative;
    box-shadow: 5px 6px 20px rgba(46, 41, 35, .5);
    margin-top: 30%;
}


.auxil-tricolor-shape {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 1.5%;
}

#AuxilTricolorShapeGreen {
    background-color: rgb(var(--trioColor1));
}

.auxil-tricolor-shape--green {
    overflow: visible;
    width: 100%;
    height: 100%;
}

#AuxilTricolorShapeOrange {
    background-color: rgb(var(--trioColor2));
}

.auxil-tricolor-shape--orange {
    overflow: visible;
    width: 100%;
    height: 100%;
}

#AuxilTricolorShapeBlue {
    background-color: rgb(var(--trioColor3));
}

.auxil-tricolor-shape--blue {
    overflow: visible;
    width: 100%;
    height: 100%;
}

.content {
    background: rgb(var(--primaryBackgroundColor));
    background-color: rgb(var(--primaryBackgroundColor));
    max-width: 175rem;
    font-size: 1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#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."
    }

.pagetitle {
    margin: 0px 0px 30px 0px;
    padding: 0px 0px 10px 0px;
    border-style: solid;
    border-width: 0px 0px 8px 0px;
    font-family: var(--TitleFont);
}

.heading-title {
    color: #6A6A6A;
    font-size: 2.5em;
    font-family: var(--TitleFont);
    font-weight: 600;
}

.PortalsFilterContainerTitle {
    font-weight: bold;
    font-family: var(--TitleFont);
    color: rgb(var(--PortalsFilterContainerTitle));
}

/* No spin arrows on numeric textboxes: hide their whole container. Hiding only the arrows
   (.k-spinner-increase/-decrease) kept the container's space, which cut the number off with an
   ellipsis. (.k-select was the pre-Telerik-3 container class - no longer rendered.) */
.k-numerictextbox .k-input-spinner {
    display: none;
}

.numeric-textbox-container {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between the buttons and the numeric textbox */
}
.mobile-section-title {
    font-size: 2.5rem !important;
    font-family: var(--TitleFont);
    color: rgb(var(--TitleColor));
    font-weight: 800;
    padding-bottom: 5px;
    padding-top: 5px;
}
.section-title {
    font-family: var(--TitleFont);
    color: rgb(var(--TitleColor));
    font-size: 1.5rem;
    font-weight: 800;
    padding-bottom: 5px;
    padding-top: 5px;
}

#TitleName {
    font-family: var(--TitleFont);
    color: rgb(var(--primaryButtonColor));
    font-size: 1.0em;
    font-weight: 600;
}

.k-radio:checked, .k-radio.k-checked {
    background-image: none !important;
    background-color: rgb(var(--PortalsFilterContainerTitle)) !important;
    border-color: rgb(var(--PortalsFilterContainerTitle)) !important;
}

.k-avatar-solid-primary, .k-avatar {
    border-color: rgb(var(--primaryButtonColor)) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.section-subtitle {
    font-family: var(--TitleFont);
    color: rgb(var(--TitleColor));
    font-size: 1rem;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Groups the fields of a settings tab under a heading, so a long list of rows reads as sections. */
.settings-section {
    border-bottom: 1px solid rgba(var(--primaryFontColor), 0.2);
    display: block;
    margin-bottom: 6px;
    margin-top: 16px;
    padding-bottom: 4px;
}

h3 {
    margin-top: .5rem;
    margin-bottom: 1rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    width: auto;
}

h3 {
    font-size: 2.5rem;
}


@media print {
    *, :after, :before {
        background: transparent !important;
        color: #000 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}

.WindowFooter {
    bottom: 10px;
    height: 40px;
    position: absolute;
    right: 16px; /*scrollbar*/
}



#margin-bottom {
    margin-bottom: 100px
}

.total-price {
    text-align: right;
}

.notification {
    color: red;
    font-size: 20px
}

.col-md-6 p-1 {
    float: left;
}

.Note {
    background-color: lightgrey;
    border: 1px solid red;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 1px;
    text-align: left;
}

.footer {
    position: fixed;
    left: 0px;
    bottom: 0;
    width: 100%;
    background-color: white;
    color: white;
    -webkit-box-shadow: 0px -4px 30px rgba(50, 50, 50, 0.50);
    -moz-box-shadow: 0px -4px 30px rgba(50, 50, 50, 0.50);
    box-shadow: 0px -4px 30px rgba(50, 50, 50, 0.50);
    text-align: right;
    z-index: 999;
    padding-right: 50px;
}



/*@font-face {
    font-family: 'Uni Sans';
    font-style: normal;
    font-weight: 100;
    font-display: auto;
    src: url('/fonts/unisans/Uni-Sans-Heavy-Italic.ttf') format('truetype');
}*/

@font-face {
    font-family: 'Uni Sans';
    font-style: italic;
    font-weight: 100;
    font-display: auto;
    src: url('/fonts/unisans/Uni-Sans-Heavy.ttf') format('truetype');
}

/*@font-face {
    font-family: 'Uni Sans';
    font-style: normal;
    font-weight: bold;
    font-display: auto;
    src: url('/fonts/unisans/Uni-Sans-Thin-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni Sans';
    font-style: italic;
    font-weight: bold;
    font-display: auto;
    src: url('/fonts/unisans/Uni-Sans-Thin.ttf') format('truetype');*/


.k-loader-custom-color .k-loader-segment {
    background-color: #E5332C;
}

.dex-item {
    color: #000 !important;
}

.dropdown-item:hover {
    background-color: transparent !important;
/*    color: #000 !important;
    color: rgb(var(--primaryButtonFontColor)) !important;*/
}

.dropdown-item, active {
/*    color: #000 !important;*/
}

.dropdown-item {
    padding-bottom: 10px !important;
    padding-left: 0px !important;
}

.Portalscontainer {
    background-color: rgb(var(--PortalsContainerColor));
    border-radius: 0%;
    margin-bottom: 0%;
    font-size: small;
}

.PortalsFilterContainer {
    background-color: rgb(var(--PortalsFilterContainerColor));
    padding: 5px;
    border-radius: 0%;
    margin-bottom: 1%;
    margin-top: 1%;
    box-sizing: border-box;
}

.grid-layout {
    padding-top: 5px !important;
}

.PortalsButtonContainer {
    justify-content: space-between;
    align-items: center;
    display: flex;
    font-size: 0.8em;
}

.PortalsButtonLeftContainer {
    text-align: left;
    padding-bottom: 5px;
}

.PortalsButtonRightContainer {
    text-align: right;
    padding-bottom: 5px;
}

.Portalscontainer-Title {
    background-color: gray;
    padding: 1%;
    border-radius: 2%;
    margin-bottom: 2%;
}

.Loading {
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 5%;
    text-align: center;
    padding-bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.triColorShape {
    width: auto;
    height: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.TelerikBox {
    width: auto;
    height: auto;
    background-color: #6A6A6A;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    padding-top: 5%;
    text-align: center;
    padding-bottom: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.input-field {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 10px 0;
    display: contents
}


    .input-field span {
        font-size: .9vw;
        font-weight: 700;
    }

        .input-field span input::placeholder {
            font-size: .8vw;
            font-weight: 400;
        }

.forgot-password:hover {
    color: gray;
}





/* Telerik (v7) renders the page's `Class` (SupplierNotification, CustomNotification, ...) directly ON
   the fixed notification group element `.k-notification-group`, not on an ancestor and not on
   `.k-notification-container`. That element is position:fixed with an inline top:0, so by default it
   renders under the header (.top-row, ~56px) - generic to every page, regardless of which Class name
   its <TelerikNotification> happens to use (there are 6 distinct ones across the app; only some ever
   had a page-specific fix for this, so the rest shared this same bug). Override the inline top (needs
   !important) and lift the z-index so stacked notifications are never hidden under the header, for
   every notification on every page - no per-Class copy needed. */
.k-notification-group {
    top: 5.5rem !important;
    z-index: 100000 !important;
}

.k-notification-group .k-notification-wrap {
    z-index: 9999999;
}

/* SupplierNotification's own visual styling (bigger, centered text) - unrelated to the positioning
   fix above, which now applies to it generically. */
.k-notification-group.SupplierNotification .k-notification-wrap {
    font-size: 1.5em;
    text-align: center;
    align-items: center;
}

label {
    font-size: 1.0em !important;
}


@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('../fonts/RobotoSlab-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Signika';
    src: url('../fonts/Signika-VariableFont_wght.ttf');
}

@font-face {
    font-family: 'Futura PT';
    font-weight: 400;
    src: url('../fonts/FuturaPTBook.otf');
}

@font-face {
    font-family: 'Futura PT';
    font-weight: 500;
    src: url('../fonts/FuturaPTMedium.otf');
}

@font-face {
    font-family: 'Futura PT';
    font-weight: 600;
    src: url('../fonts/FuturaPTDemi.otf');
}

@font-face {
    font-family: 'Futura PT';
    font-weight: 700;
    src: url('../fonts/FuturaPTHeavy.otf');
}

@font-face {
    font-family: 'Futura PT';
    font-weight: 800;
    src: url('../fonts/FuturaPTExtraBold.otf');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 400;
    src: url('../fonts/Poppins-Regular.ttf');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 500;
    src: url('../fonts/Poppins-Medium.ttf');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 600;
    src: url('../fonts/Poppins-SemiBold.ttf');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 700;
    src: url('../fonts/Poppins-Bold.ttf');
}

@font-face {
    font-family: 'Poppins';
    font-weight: 800;
    src: url('../fonts/Poppins-ExtraBold.ttf');
}

.main-container {
    display: flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10%;
    height: 100%;
    height: 100%;
    background: rgb(var(--primaryBackgroundColor));
}

.page {
    background: rgb(var(--primaryBackgroundColor));
}


:root, .auxil {
    /*Tijdelijk*/
    --primaryBackgroundColor: 255, 0, 0; /*#F9F9F9*/
    --accentColorLight: 249, 249, 249; /*#F9F9F9*/
    --accentColorMedium: 244, 244, 244; /*#F4F4F4*/
    --primaryFontColor: 46, 41, 35; /*#2E2923*/
    /*#E5332C*/
    --bodyFont: 'Arial';
    --NavMenuTextFont: 'Arial';
    --TitleFont: 'Arial';
    --fontScale: 1;
    /*theme*/
    --trioColor1: 121, 182, 54; /*#79B636*/
    --trioColor2: 255, 120, 0; /*#FF7800*/
    --trioColor3: 28, 147, 196; /*#1C93C4*/
    --primaryButtonFontColor: 255, 255, 255; /*#FFFFFF*/
    --primaryButtonColor: 255,255,255;
    --deleteButtonColor: 229, 51, 44;
    --PortalsContainerColor: 235, 235, 235;
    --PortalsFilterContainerColor: 235, 235, 235;
    --TitleColor: 235, 235, 235;
    --PortalsFilterContainerValue: 255, 0, 0;
    --PortalsFilterContainerTitle: 28, 147, 196;
    --navbarBackgroundColor: 255, 0, 255; /*#FFFFFF*/
    --GridColor: 121, 182, 54;
    --NavMenuTextColor: 25, 255, 255;
}

.sidenav-item-name {
    font-family: var(--NavMenuTextFont);
}

.k-grid {
    background-color: rgb(var(--PortalsFilterContainerColor)) !important;
}

.k-tilelayout {
    background-color: rgb(var(--PortalsFilterContainerColor)) !important;
}

/* Tile layout pages (item card, customer card, landings pages) share the same behaviour: the content of a tile follows
   the size of that tile, and as long as the tiles can be dragged their outline is visible. Composing pages add
   my-tilelayout--design next to my-tilelayout. */

/* Telerik pads a tile header 0.75rem and its body 1rem top and bottom, so a title and its value end up some 28px
   apart. Keep the two close together and let the side padding follow the width of the tile, so a narrow tile spends
   its room on content instead of on padding. */
.my-tilelayout .k-tilelayout-item-header,
.my-tilelayout .k-tilelayout-item-body {
    padding: 2px clamp(4px, 1.5%, 12px) !important;
}

/* A tile that is too small for its content scrolls, instead of letting the content run over its border. */
.my-tilelayout .k-tilelayout-item-body {
    overflow: auto;
}

/* Whatever is placed straight into a tile takes the height of that tile, so grids, charts and images follow a resize
   instead of keeping their own height. */
.my-tilelayout .k-tilelayout-item-body > .col-md-12,
.my-tilelayout .k-tilelayout-item-body > .col-md-12 > .PortalsFilterContainer,
.my-tilelayout .k-tilelayout-item-body > .PortalsFilterContainer {
    height: 100%;
}

/* Nothing sticks out sideways: a tile that becomes narrower shrinks its content along with it. */
.my-tilelayout .k-tilelayout-item-body > * {
    max-width: 100%;
}

/* While composing, make it visible that a tile can be grabbed and resized. */
.my-tilelayout--design .k-tilelayout-item {
    border: 1px dashed rgba(var(--PortalsFilterContainerTitle), 0.6);
    cursor: move;
}

.my-tilelayout--design .k-tilelayout-item:hover {
    border-color: rgb(var(--PortalsFilterContainerTitle));
}

/* Stack the tiles on smaller screens instead of squeezing them into six or eight columns. The pages themselves set
   their column count with !important, so this needs the extra class to win. */
@media (max-width: 992px) {
    .k-tilelayout.my-tilelayout {
        grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
    }
}

@media (max-width: 576px) {
    .k-tilelayout.my-tilelayout {
        grid-template-columns: 1fr !important;
    }
}

.label-color {
    color: rgb(var(--PortalsFilterContainerTitle));
}

/* Kept, but as 1rem: it used to pin inputs to the absolute theme size, which is exactly one step
   larger than Telerik's own 0.875rem. Same rendered size as before, and it now scales. */
.k-input-md, .k-input {
    font-size: 1rem !important;
}

#icon-Unlcok {
    background-color: green !important;
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

* {
    --auxilRed: #E5332C;
    --green: #79B636;
    --orange: #FF7800;
    --blue: #1C93C4;
    --black: #2E2923;
    --platinum: #E6E6E6;
    --culturedwhite: #F9F9F9;
    --whitesmoke: #F4F4F4;
    --white: #FFFFFF;
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
    /* --FontSize only still exists on databases without the Portals_ThemeFontScale migration; there
       it keeps working as before. After the migration the 1rem fallback follows --fontScale. */
    font-size: var(--FontSize, 1rem);
    border: none;
    font-family: var(--bodyFont);
}

html, body {
    font-family: var(--bodyFont) !important;
    /*font-family: var(--master-font-family);*/
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: var(--auxilRed);
    position: absolute;
    transform: translateY(-1.5em);
}

#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."
    }

.nav-link {
    color: rgb(var(--NavMenuTextColor)) !important;
}

    .nav-link:hover {
        text-decoration: underline;
    }


.wait {
    cursor: wait;
}

.collapsed-sidenav {
    visibility: hidden;
    opacity: 0;
    width: 0;
    transition: width .5s, visibility .5s, opacity .5s cubic-bezier(.99,-0.05,.59,.71);
}



.horizontal-line {
    border-color: rgb(var(--accentColorLight));
}




.k-button-solid-primary, .k-button-primary {
    color: rgb(var(--primaryButtonFontColor)) !important;
}

    .k-button-solid-primary:focus, .k-button-primary:focus {
        box-shadow: 0 0 0px 2px rgb(var(--accentColorMedium)) !important;
    }

.k-event {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.btn-primary {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
    border: none !important;
    color: rgb(var(--primaryButtonFontColor));
    height: 3em;
    margin-left: 0px;
    padding: 10px 20px;
    width: auto;
    margin-right: 10px
}/*V1.0*/
.k-button-solid-base.k-selected, .k-button.k-selected {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
    border: none !important;
}
/* Telerik 15 keeps flat buttons transparent (".k-button.k-button-flat { background: none !important }"), so the button
   font colour the rules above give every button made them invisible - the pager's page numbers among them. Flat
   buttons take the button colour as their text instead. After the rules above, which they have to win from. Not for
   flat buttons that colour themselves: the green/red lock and eye icons of the display settings carry a meaning. Nor
   for disabled ones, which the disabled rule gives a grey background - white on it, as before, reads best - and not
   for selected ones, which are filled (see the pager rule below). */
.k-button.k-button-flat:not(.green-icon):not(.red-icon):not(.k-disabled):not(:disabled):not(.k-selected) {
    color: rgb(var(--primaryButtonColor)) !important;
}
/* The pager, the same on every page: its arrows and page numbers are flat buttons in the button colour, without a box -
   also on the configuration pages whose own style greys out every disabled button. Disabled arrows (a single page)
   are only faded. The current page is filled. */
.k-pager .k-button.k-button-flat:not(.k-selected) {
    background: none !important;
    color: rgb(var(--primaryButtonColor)) !important;
}
.k-pager .k-button.k-button-flat.k-disabled, .k-pager .k-button.k-button-flat:disabled {
    opacity: 0.35;
}
.k-pager .k-button.k-button-flat.k-selected {
    background: rgb(var(--primaryButtonColor)) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
}
.btn-unllock {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: green !important;
    border: none !important;
    margin-left: 0;
    margin-right: 10px !important;
    margin-bottom: 10px;
    width: auto;
    height: auto;
    padding: 10px 20px;
}

.btn-delete {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--deleteButtonColor)) !important;
    border: none !important;
    height: 3em;
    margin-left: 0px;
    padding: 10px 20px;
    width: auto;
    margin-right: 10px
}
.btn-delete:hover {
    filter: brightness(85%);
}
.mobile-btn-primary {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
    border: none !important;
    color: rgb(var(--primaryButtonFontColor));
    height: 5.5rem;
    margin-left: 0px;
    padding: 10px 20px;
    font-size: 5.5rem;
    width: auto;
    margin-right: 10px;
    margin-top: 10px
}
.mobilePortalsFilterContainer {
    box-sizing: border-box; /* Include padding in height calculation */
    max-height: calc(83vh - 50px); /* Ensure it fits within the window height */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 1rem; /* Add padding for spacing */
    background-color: rgb(var(--PortalsFilterContainerColor));
}

.MobilePortalsFilterContainer::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link {
    border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}
.MobilePortalsFilterContainer::-webkit-scrollbar-thumb {
    background-color: rgb(var(--primaryButtonColor)) !important;
    border-radius: 4px; /* Rounded corners for the thumb */
}

.MobilePortalsFilterContainer::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Background color of the scrollbar track */
}
.k-calendar .k-calendar-view .k-today {
    color: rgb(var(--primaryButtonColor)) !important;
}
.mobileTitle {
    font-weight: bold; /* Optional: Make the title bold */
    white-space: none !important;
    font-size: 2.2rem !important;
    font-weight: 500 !important;
}
.decrement-button {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.increment-button {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.k-button:disabled, .k-button.k-disabled {
    cursor: not-allowed !important;
    z-index: 99;
}

/* .btn-primary forces its colours with !important, so since Telerik 15 a disabled primary button looked exactly like an
   enabled one (just not clickable) - fade it explicitly. Opacity on purpose: keeps the portal colours, only dimmed */
.btn-primary:disabled, .btn-primary.k-disabled {
    opacity: 0.5 !important;
}

#mobile-checkbox {
    height: 3.2rem !important;
    width: 3.2rem !important;
    margin-right: 20px !important;
}

.btn-Badge {
    color: rgb(var(--primaryButtonColor)) !important;
    background-color: rgb(var(--primaryButtonFontColor)) !important;
    border: none !important;
    color: rgb(var(--primaryButtonFontColor));
    height: auto;
    margin-left: 0px;
    padding: 10px 20px;
    width: auto;
    margin-right: 10px
}

.k-upload .k-upload-button {
    color: rgb(var(--primaryButtonFontColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
    border: none !important;
    color: white;
    height: auto;
    margin-left: 0px;
    width: auto;
    margin-right: 10px
}



.btn-primary:hover {
    filter: brightness(85%);
}

.btn-primary:hover {
    filter: brightness(85%);
}
.mobile-label-textbox {
    font-size: 3.5rem !important;
    padding-block: var(--kendo-spacing-1, 0.25rem);
    padding-inline: var(--kendo-spacing-2, 0.5rem);
}
#icon-Delete {
    background-color: rgb(var(--deleteButtonColor)) !important;
    color: rgb(var(--primaryButtonFontColor)) !important;
    width: 25px;
    height: 25px;
/*    margin: 1px;
*/}

#icon {
    width: 25px;
    height: 25px;
}

.navmenu-icon {
    color: rgb(var(--primaryButtonColor)) !important;
    padding-bottom: 5px;
    border: none;
    color: white;
    height: auto;
    margin-left: 0px;
    margin-bottom: 6px !important;
    width: auto;
    margin-right: 10px;
}

    .navmenu-icon:hover {
        text-decoration: none;
    }

.btn-icon {
    background-color: rgb(var(--primaryButtonColor)) !important;
    border: none;
    color: rgb(var(--primaryButtonFontColor)) !important;
    height: 36px;
    margin: 0px;
    width: auto;
    box-shadow: none;
    margin-right: 10px
}


#icon:hover {
    filter: brightness(85%);
}

.iconify {
    /*    width: 1.2em;*/
    color: rgb(var(--NavMenuTextColor)) !important;
    border: none;
    color: white;
    height: 50px;
    margin-left: 0px;
    margin-right: 10px
}

.normal-link {
    color: rgb(var(--NavMenuTextColor)) !important;
    text-decoration: none;
    border: none;
}
.mobile-normal-link {
    color: rgb(var(--NavMenuTextColor)) !important;
    text-decoration: none;
    border: none;
    font-size: 5.5rem;
}

.loginText {
    color: rgb(var(--NavMenuTextColor)) !important;
}

button.normal-link {
    color: rgb(var(--NavMenuTextColor)) !important;
    text-decoration: none;
    margin: 20px;
    background-color: transparent;
}

.copyright {
    color: rgb(var(--NavMenuTextColor)) !important;
}

.logIn {
    color: rgb(var(--NavMenuTextColor)) !important;
    font-size: 1.3rem;
    font-weight: bold;
    text-align: left;
}

.carttable {
    width: 100%;
    line-height: 2em;
    font-size: larger;
    font-weight: bold;
}

.accept {
    color: rgb(var(--NavMenuTextColor)) !important;
    font-weight: bold;
}

#subTitleText {
    font-size: 28px;
    font-weight: 600;
    align-self: end;
    font-family: var(--TitleFont);
    animation: slideRight-b-e52zsrg0ol .5s ease-out;
    color: rgb(var(--TitleColor)) !important;
}

.button-main {
    color: #FFF;
    background-color: rgb(var(--primaryButtonColor)) !important;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    border: none;
}

#titleWelcome {
    font-size: 70px;
    font-weight: 800;
    text-align: right;
    line-height: 100px;
    animation: slideRight-b-e52zsrg0ol .3s ease-out;
}

#RevealPassword {
    width: 11%;
    border: none;
    margin: 2%;
}

.nav-item a {
    color: rgb(var(--NavMenuTextColor)) !important;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    margin-top: 0px;
}

.k-checkbox {
    height: 1.2rem !important;
    width: 1.2rem !important;
    border-color: rgb(var(--PortalsFilterContainerTitle)) !important;
    margin: 1px !important;
    border-width: 3px !important;
    background-color: var(--kendo-color-surface-alt, #ffffff);
}

    .k-checkbox:checked, .k-checkbox.k-checked {
        color: rgb(var(--primaryButtonFontColor)) !important;
        border-color: rgb(var(--primaryButtonColor)) !important;
        background-color: rgb(var(--primaryButtonColor)) !important;
    }

.k-slider .k-slider-selection {
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.k-slider .k-draghandle:hover {
    border-color: rgb(var(--primaryButtonColor)) !important;
    background-color: rgb(var(--primaryButtonColor)) !important;
}

.k-slider .k-draghandle {
    border-color: rgb(var(--primaryButtonColor)) !important;
    color: var(--kendo-color-on-primary, #ffffff);
    background-color: rgb(var(--primaryButtonColor)) !important;
    border-radius: 50%;
}

.k-checkbox:indeterminate.k-checkbox:indeterminate {
    background-color: rgb(var(--primaryButtonColor)) !important;
    border-color: rgb(var(--primaryButtonColor)) !important;
}

.filterbox tr.row td {
    height: 0em;
    padding-bottom: 0.5em !important;
    padding-top: 0.5em !important;
}


div.filterbox {
    border: 1px solid rgb(200, 200, 200);
    border-radius: 2px;
    margin-bottom: 0em;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-top: 0em;
    padding-left: 1em;
}

.statusfilterlist li {
    float: left;
    list-style: none;
    margin-right: 2em;
}

    .statusfilterlist li label, .statusfilterlist li label {
        margin-right: 1em;
    }

.portalstable table {
    margin-bottom: 1em;
}

.itemimageheader {
    width: 50px;
    font-weight: bold;
}

.portalstable table table {
    margin-bottom: 0em;
}

td.itemimagecell {
    width: 50px;
    height: 50px;
    text-align: center !important; /* if we don't important, telerik feels more important... */
}

.bigItemImage {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.k-window-content:has(.bigItemImage) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.itemThumbnail {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: auto;
    /* NOTE: must have fixed parent size otherwise this won't behave as expected! */
}

.itemimageheader {
    width: 50px;
    font-weight: bold
}



.k-grid-table .k-table-td .special-redbackground {
    border: 1px solid red;
    color: #990000;
}

.Status {
    width: 120px !important;
    height: 25px;
    border-radius: 50px / 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-left: 10px;
    align-items: center;
}

.Partial {
    background-color: orange;
    color: white;
    margin-left: 0px;
}

.Open {
    background-color: rgb(229,50,43);
    color: white;
    margin-left: 0px;
}

.CANCELLED {
    background-color: rgb(229,50,43);
    color: white;
    margin-left: 0px;
}

.Cancelled {
    background-color: rgb(229,50,43);
    color: white;
    margin-left: 0px;
}

.Complete {
    background-color: rgb(121,182,54);
    color: white;
    margin-left: 0px;
}

.Draft {
    background-color: gray;
    color: white;
    margin-left: 0px;
}

.Approved {
    background-color: rgb(121,182,54);
    color: white;
    margin-left: 0px;
}

.Processed {
    background-color: rgb(121,182,54);
    color: white;
    margin-left: 0px;
}

.Auto {
    background-color: rgb(121,182,54);
    color: white;
    margin-left: 0px;
}

.AwaitingReview {
    background-color: orange;
    color: white;
    margin-left: 0px;
}

.AwaitingApproval {
    background-color: orange;
    color: white;
    margin-left: 0px;
}

.Awaiting {
    background-color: orange;
    color: white;
    margin-left: 0px;
}

.Rejected {
    background-color: rgb(229,50,43);
    color: white;
    margin-left: 0px;
}

.redstock {
    background-color: rgb(229,50,43);
    margin-left: 0px;
}

.greenstock {
    background-color: rgb(121,182,54);
}


.Processed {
    background-color: green;
    color: white;
    margin-left: 0px;
}

.Accepted {
    background-color: green;
    color: white;
    margin-left: 0px;
}

.Matched {
    background-color: orange;
    color: white;
    margin-left: 0px;
}

.selected {
    background-color: orange;
    color: white;
    margin-left: 0px;
}

.Open {
    background-color: rgb(229,50,43);
    color: white;
    margin-left: 0px;
}

.circle {
    align-items: center;
    border-radius: 50%;
    display: flex;
    height: 120px;
    justify-content: center;
    width: 120px;
}

.redStock {
    background-color: rgb(229, 50, 43);
    ;
}

.greenStock {
    background-color: rgb(121, 182, 54);
}

.center-content {
    align-items: center;
    display: flex;
    justify-content: center;
}

.meth {
    font-family: var(--TitleFont);
    font-size: 2.0rem;
    font-weight: bold;
}
.k-checkbox:indeterminate, .k-checkbox.k-indeterminate {
 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e") !important;
}

.action-button {
    padding-bottom: 5px;
    text-align: left;
}

.k-grid-table .k-table-td .special-orangebackground {
    border: 1px solid orange;
    color: #a56e09;
}

.px-3 {
    padding-right: 0.1rem !important;
    padding-left: 0.1rem !important;
}

.total-price {
    text-align: right;
    justify-content: right;
    display: flex;
    margin-top: 10px;
}

.radio-group-primary .k-radio-label {
    color: rgb(var(--PortalsFilterContainerValue)) !important; /* Replace with your desired color */
}

.fastAccountSelector {
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
    .fastAccountSelector .k-list-container .k-virtual-scroller-size {
        background: repeat-y 1em 1em white url('/Images/dropdownskeleton.svg');
    }
.fastAccountSelector .k-list-container .k-list-ul {
    background-color: rgb(var(--primaryBackgroundColor));
}

.fastStorageLocationSelector {
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
    .fastStorageLocationSelector .k-list-container .k-virtual-scroller-size {
        background: repeat-y 1em 1em white url('/Images/dropdownskeleton.svg');
    }
.fastStorageLocationSelector .k-list-container .k-list-ul {
    background-color: rgb(var(--primaryBackgroundColor));
}

.readonly-view .k-disabled {
    opacity: 1;
    filter: none;
}

.readonly-view .k-input.k-disabled,
.readonly-view .k-picker.k-disabled {
    background-color: rgb(var(--accentColorLight)) !important;
    color: rgb(var(--primaryFontColor));
}

.readonly-view .k-input.k-disabled .k-input-inner,
.readonly-view .k-picker.k-disabled .k-input-value-text {
    color: rgb(var(--primaryFontColor));
    -webkit-text-fill-color: rgb(var(--primaryFontColor));
}

.always-readonly.k-disabled {
    opacity: 1;
    filter: none;
}

.always-readonly.k-input.k-disabled,
.always-readonly.k-picker.k-disabled {
    background-color: rgb(var(--accentColorLight)) !important;
    color: rgb(var(--primaryFontColor));
}

.always-readonly.k-input.k-disabled .k-input-inner,
.always-readonly.k-picker.k-disabled .k-input-value-text {
    color: rgb(var(--primaryFontColor));
    -webkit-text-fill-color: rgb(var(--primaryFontColor));
}

/* Hostnames grid (Portal Settings). All measurements are in rem so they track the user's
   font-size rather than assuming a 16px base - in px, a larger base font reflows the text
   inside fixed columns and clips the headers again, which is the thing these widths exist
   to prevent.

   The wrapper caps the grid instead of the hostname column being given a width. Telerik
   honours every set column width and hands all leftover space to the column without one, so
   the width-less hostname column absorbs whatever the container allows; capping the container
   is what keeps that sane. Giving the hostname a width would flip the grid into the mode where
   *every* column stretches past its setting.

   The min-width is the floor: below it the grid scrolls horizontally rather than squeezing the
   status columns until their headers no longer fit.

   Note the status columns are sized by their HEADINGS, not their contents. Their cells hold a
   single glyph, so sizing to the data truncates every heading - the words above are the widest
   thing in the column. Widths therefore fit the longer of the nl-NL and en-GB label
   ("Standaard" over "Main", "Completed" over "Voltooid", "Gecontroleerd" over "Checked"), so
   neither language clips. Telerik's AutoFitAllColumnsAsync would compute this, but it throws
   on initial load and would need re-running on every language and data change. */
.hostname-grid-wrap {
    max-width: 82rem;
}

.hostname-grid .k-table {
    /* 46rem of set column widths, plus at least 14rem for the hostname. */
    min-width: 60rem;
}

/* Safety net: a heading that outgrows its column wraps to a second line instead of silently
   truncating. Nothing needs it at the current labels, but it means a longer translation degrades
   into a taller header row rather than an unreadable one. */
.hostname-grid .k-column-title {
    white-space: normal;
}

/* The default-hostname tick. Deliberately NOT a disabled button: greying it makes the tick fade
   into the empty boxes beside it, and telling the two apart at a glance is the entire job of this
   column. It stays fully drawn and is made to feel read-only instead - arrow cursor and no hover
   state - so it reads as an indicator rather than a control, without losing contrast.

   pointer-events is left alone on purpose: the tooltip explaining why it cannot be unset needs
   hover to fire. */
.hostname-grid .hostname-default-current,
.hostname-grid .hostname-default-current:hover,
.hostname-grid .hostname-default-current:focus {
    cursor: default;
    background-color: transparent;
    box-shadow: none;
}

/* Telerik draws flat-button hover and focus states with a ::before overlay rather than a
   background, so suppressing the background alone still leaves it lighting up on hover. */
.hostname-grid .hostname-default-current::before {
    opacity: 0;
}

.hostname-grid .hostname-default-set {
    cursor: pointer;
}

/* The action buttons are small, so the tooltip opens close enough to the pointer to land under it.
   Once that happens the tooltip takes the hover, the button gets a mouseleave, the tooltip hides,
   the button is hovered again - and it strobes. Making the popup transparent to the pointer breaks
   that loop at the source, and does so wherever the tooltip ends up, which flipping Position only
   moves around. These tooltips are read, never interacted with, so nothing is lost by it.

   Class lands on .k-animation-container - the positioning wrapper, an ancestor rather than the
   parent of .k-tooltip - so it has to be inherited down rather than set on the tooltip itself. */
.hostname-tooltip,
.hostname-tooltip .k-tooltip {
    pointer-events: none;
}

/* Hostnames tab: the Add action above the grid, and the pending-change marker inside the hostname
   cell. The marker is deliberately in the same cell rather than a column of its own - an edit in
   flight belongs to the hostname it replaces, and giving it a column would suggest otherwise. */
.hostname-grid-toolbar {
    display: flex;
    justify-content: flex-start;
    padding-bottom: 8px;
}

.hostname-pending {
    margin-left: 8px;
    opacity: 0.7;
    font-style: italic;
}


/* Hostname DNS instructions, shared by the instructions window, the edit window and the record
   component they both render.

   The max-height is the fix for a window that ran off the bottom of the screen with no way to
   scroll to the rest: Height="auto" lets a Telerik window grow past the viewport, and the global
   overflow:auto on .k-window-content cannot help while the content box itself has no bound. The
   check result sat below that fold, which is exactly the part somebody opening this needs. */
.hostname-dns-window .k-window-content,
.hostname-edit-window .k-window-content {
    max-height: 70vh;
    overflow-y: auto;
}

.hostname-dns-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.hostname-dns-heading {
    margin: 10px 0 0 0;
}

/* A definition list rather than a <pre> block: the field names are translated now, so they cannot
   be padded to a fixed column width in a monospace string. The grid keeps them aligned whatever
   language they are in, and the values stay selectable for copy-paste - which is the whole point of
   this panel. */
.hostname-dns-record {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 14px;
    row-gap: 2px;
    margin: 0;
    padding: 8px 10px;
    overflow-x: auto;
    background-color: rgba(var(--PortalsFilterContainerColor), 0.6);
}

    .hostname-dns-record dt {
        font-weight: 600;
        opacity: 0.8;
    }

    .hostname-dns-record dd {
        margin: 0;
        font-family: monospace;
        overflow-wrap: anywhere;
    }

.hostname-dns-note {
    margin: 0;
    opacity: 0.8;
}

/* Moved out of a <style> block inside HostnameEditWindow.razor: that component is now rendered
   only while open, so an inline block would be added to and removed from the document on every
   open instead of living in the stylesheet once. */
.hostname-edit-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0;
}

.hostname-edit-hint {
    margin: 0;
    opacity: 0.8;
}

.hostname-edit-error {
    margin: 0;
    color: rgb(var(--deleteButtonColor));
}

.hostname-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 8px;
}

/* The subdomain input and the fixed ".ourdomain.tld" that completes it. The suffix is text rather
   than part of the value, so what is typed is always exactly the label. */
.hostname-edit-suffixed {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .hostname-edit-suffixed > :first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

.hostname-edit-suffix {
    flex: 0 0 auto;
    font-family: monospace;
    opacity: 0.8;
}

/* The "last attempt failed" marker in the Hostnames grid. Deliberately the delete colour rather
   than a new literal: it is the same "something is wrong here" the rest of the screen already
   uses, and CLAUDE.md forbids introducing colour literals outside the theme variables. */
.hostname-last-failed {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
    color: rgb(var(--deleteButtonColor));
    cursor: help;
}

/* Page composing (ItemCard / CustomerCard configuration routes): header hint, chips and empty states. */
.itemcard-header__title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.itemcard-hint {
    color: rgba(var(--primaryFontColor), 0.7);
    font-family: var(--bodyFont);
}

.itemcard-designbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.itemcard-chip {
    align-items: center;
    background-color: rgba(var(--primaryButtonColor), 0.6);
    border-radius: 4px;
    display: inline-flex;
    gap: 6px;
    padding: 4px 10px;
}

.itemcard-chip--warning {
    background-color: rgba(var(--trioColor2), 0.15);
    color: rgb(var(--trioColor2));
    font-weight: bold;
}

.itemcard-empty {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 20px !important;
}

/* ===== Order flow (EditOrder / OrderSummary): shared responsive cart layout =====
   Both pages show the same three things - a line list, a totals card and a set of detail cards - so the
   layout lives here once instead of in a <style> block per page. Everything is fluid: the page is a
   content + sidebar grid that collapses to one column, and a line row folds from a single row of columns
   into a stacked block that carries its own labels (.ordf-label, hidden while the header row is visible). */

/* The page's action buttons: top of the page and left aligned. */
.ordf-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.ordf-page {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
}

.ordf-main,
.ordf-side {
    min-width: 0;
}

/* Two cards side by side (the addresses), dropping to one as soon as both no longer fit. */
.ordf-cols2 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* A card is the themed container with enough padding to let its content breathe. The top margin of
   .PortalsFilterContainer is dropped, because the grid gap already does that spacing. */
.ordf-card {
    box-sizing: border-box;
    margin-bottom: 12px;
    margin-top: 0;
    padding: 12px 14px;
}

.ordf-card > .section-subtitle:first-child {
    margin-top: 0;
}

.ordf-card:last-child {
    margin-bottom: 0;
}

/* Inputs follow the width of their card instead of a fixed pixel width. */
.ordf-field {
    display: block;
    margin-bottom: 6px;
    max-width: 420px;
}

/* A field label sits above its input, so a long or untranslated label cannot widen the card. */
.ordf-field-label {
    display: block;
    margin-bottom: 2px;
}

.ordf-check {
    align-items: center;
    display: flex;
    gap: 10px;
}

.ordf-count {
    color: rgba(var(--primaryFontColor), 0.65);
    font-weight: normal;
}

/* The check-out note reads as a remark next to the flow, not as a boxed-in banner. */
.ordf-note {
    border-left: 5px solid rgb(var(--primaryButtonColor));
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 6px 12px;
}

.ordf-note .section-subtitle {
    margin-bottom: 0;
    margin-top: 0;
}

/* ----- Line list ----- */
.ordf-list {
    border: 1px solid rgba(var(--primaryFontColor), 0.15);
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Telerik's own border and item padding would put the rows out of line with the header row, so the row
   does its own spacing and the list is reduced to a plain wrapper. */
.ordf-list .k-listview {
    background: none;
    border: 0;
}

.ordf-list .k-listview-content {
    display: block;
    padding: 0;
}

.ordf-list .k-listview-item {
    border: 0;
    padding: 0;
}

.ordf-line {
    align-items: center;
    border-bottom: 1px solid rgba(var(--primaryFontColor), 0.1);
    column-gap: 12px;
    display: grid;
    grid-template-areas: "img desc qty act unit total";
    grid-template-columns: 52px minmax(0, 1fr) 170px 40px 110px 120px;
    padding: 8px 12px;
    row-gap: 6px;
}

/* The summary only reads the order back, so it needs neither a stepper nor a delete button. */
.ordf-line--summary {
    grid-template-areas: "img desc qty unit total";
    grid-template-columns: 52px minmax(0, 1fr) 90px 110px 120px;
}

.ordf-list .k-listview-item:last-child .ordf-line {
    border-bottom: 0;
}

/* Stays in view while the rest of the list scrolls underneath it. */
.ordf-line--head {
    background-color: rgb(var(--PortalsFilterContainerColor));
    border-bottom: 1px solid rgba(var(--primaryFontColor), 0.25);
    color: rgb(var(--PortalsFilterContainerTitle));
    font-family: var(--TitleFont);
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 2;
}

.ordf-cell {
    min-width: 0;
}

.ordf-cell--img {
    grid-area: img;
}

.ordf-cell--desc {
    grid-area: desc;
}

.ordf-cell--qty {
    grid-area: qty;
}

.ordf-cell--act {
    grid-area: act;
}

.ordf-cell--unit {
    grid-area: unit;
    text-align: right;
}

.ordf-cell--total {
    grid-area: total;
    text-align: right;
}

.ordf-line-note {
    padding: 0 12px 10px 76px;
}

.ordf-thumb {
    background-color: rgba(var(--primaryFontColor), 0.05);
    border: 1px solid rgba(var(--primaryFontColor), 0.1);
    display: block;
    height: 48px;
    object-fit: contain;
    width: 48px;
}

/* The description is the way to the item card, so it looks and behaves like a link. A button does not
   inherit the page font size on its own, hence the explicit font-size. */
.ordf-desc {
    background: none;
    border: 0;
    color: rgb(var(--primaryFontColor));
    cursor: pointer;
    font-family: var(--TitleFont);
    font-size: inherit;
    font-weight: 600;
    line-height: 1.3;
    padding: 0;
    text-align: left;
    width: 100%;
}

.ordf-desc:hover {
    color: rgb(var(--PortalsFilterContainerTitle));
    text-decoration: underline;
}

.ordf-code {
    color: rgba(var(--primaryFontColor), 0.65);
    display: block;
    font-size: 0.85em;
    font-weight: normal;
}

/* Amounts and quantities line up under each other, whatever digits they hold. */
.ordf-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ordf-label {
    display: none;
}

.ordf-stepper .k-numerictextbox {
    min-width: 0;
}

/* Row buttons are square and tight; the shared button classes are sized for a page action. */
.ordf-icon-btn {
    height: 30px !important;
    margin: 0 !important;
    min-width: 30px;
    padding: 0 !important;
    width: 30px;
}

/* ----- Totals ----- */
.ordf-scroll-x {
    overflow-x: auto;
}

/* Below its minimum the table scrolls inside .ordf-scroll-x instead of squeezing the amounts into
   one digit per line. */
.ordf-totals {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    min-width: 300px;
    width: 100%;
}

.ordf-totals th,
.ordf-totals td {
    padding: 5px 4px;
    vertical-align: top;
}

.ordf-totals thead th {
    border-bottom: 1px solid rgba(var(--primaryFontColor), 0.25);
    text-align: right;
    white-space: nowrap;
}

/* Long (and sometimes untranslated) row labels wrap instead of widening the table past its card. */
.ordf-totals th[scope="row"] {
    font-weight: normal;
    text-align: left;
    white-space: normal;
    word-break: break-word;
}

.ordf-totals td {
    text-align: right;
}

.ordf-totals tfoot th,
.ordf-totals tfoot td {
    border-top: 2px solid rgba(var(--primaryFontColor), 0.3);
    font-weight: bold;
    padding-top: 8px;
}

/* ----- Narrower screens ----- */
@media (max-width: 1200px) {
    .ordf-page {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Only worth pinning the totals when they sit next to the list. */
@media (min-width: 1201px) {
    .ordf-side {
        position: sticky;
        top: 10px;
    }
}

/* No room for six columns: the row becomes a block per item and every value names itself. */
@media (max-width: 860px) {
    .ordf-line--head {
        display: none;
    }

    .ordf-line {
        grid-template-areas:
            "img desc desc"
            "img qty act"
            "img unit total";
        grid-template-columns: 52px minmax(0, 1fr) auto;
    }

    .ordf-line--summary {
        grid-template-areas:
            "img desc desc"
            "img qty qty"
            "img unit total";
    }

    .ordf-cell--img {
        align-self: start;
    }

    .ordf-cell--qty,
    .ordf-cell--act {
        text-align: left;
    }

    .ordf-label {
        color: rgba(var(--primaryFontColor), 0.65);
        display: inline;
        margin-right: 6px;
    }

    .ordf-line-note {
        padding-left: 12px;
    }
}

/* Postal code letters are always written in capitals (e.g. 1234 AB) */
.uppercase-input .k-input-inner {
    text-transform: uppercase;
}

/* Manufacturing tabs (documents/notes): section titles stand out, the item line per material is plain */
.mfg-tab-section-title {
    font-weight: bold;
}

.mfg-tab-item-title {
    font-weight: normal;
}

/* content (notes / attachments) under an item line, indented to show which item it belongs to */
.mfg-tab-item-content {
    padding-left: 1.5rem;
}

/* Compact view/download buttons in the manufacturing documents tab (overrides .btn-primary's 3em height) */
.btn-primary.mfg-doc-btn {
    height: 2em;
    padding: 4px 12px;
}

/* Choice cards: the Page settings popup of the portal overview, and Columns or Filters in the visibility settings. */
.pagesettings-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* Cards above content that starts on the left (Columns or Filters): they start there too. */
.pagesettings-cards--start {
    justify-content: flex-start;
}

.pagesettings-card {
    align-items: center;
    background: rgb(var(--navbarBackgroundColor));
    border: 2px solid rgba(var(--primaryFontColor), 0.15);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 16px;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 230px;
}

.pagesettings-card:hover {
    border-color: rgb(var(--primaryButtonColor));
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

/* A page the portal does not serve reads as unavailable rather than clickable. */
.pagesettings-card--disabled {
    cursor: default;
    opacity: 0.5;
}

.pagesettings-card--disabled:hover {
    border-color: rgba(var(--primaryFontColor), 0.15);
    box-shadow: none;
}

/* The buttons of a card sit next to each other; the card itself stacks its children. */
.pagesettings-card__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.pagesettings-card__actions .btn-primary {
    margin-right: 0;
}

.pagesettings-card__icon {
    align-items: center;
    background: rgba(var(--PortalsFilterContainerTitle), 0.1);
    border-radius: 50%;
    color: rgb(var(--PortalsFilterContainerTitle));
    display: flex;
    height: 56px;
    justify-content: center;
    width: 56px;
}