/* Import fonts */

@font-face {
  font-family: "MatterSQ";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/matter/MatterSQ-Regular.woff") format("woff");
}


@font-face {
  font-family: "MatterSQ";
  font-style: italic;
  font-weight: 400;
  src: url("fonts/matter/MatterSQ-RegularItalic.woff") format("woff");
}


@font-face {
  font-family: "MatterSQ";
  font-style: normal;
  font-weight: 600;
  src: url("fonts/matter/MatterSQ-SemiBold.woff") format("woff");
}


@font-face {
  font-family: "MatterSQ";
  font-style: italic;
  font-weight: 600;
  src: url("fonts/matter/MatterSQ-SemiBoldItalic.woff") format("woff");
}


:root {
    /* Base variables */
    --brand-white: #ffffff;
    /* Procurement placeholder colors  */
    --brand-rodeo-dust: #07744c;
    --brand-1: #e6f2fb;
    --brand-black-100: #1c1c1f;
    --brand-black-16: rgba(24, 32, 37, 0.16);
    --brand-black-12: rgba(24, 32, 37, 0.12);
    --brand-black-8: rgba(24, 32, 37, 0.08);
    --brand-grey-N80: #353638;
    --brand-grey-N70: #46494a;
    --brand-navheader: #1c1c1f;
    /* ui colors */

    --brand-alert-red-10: #F4E9E9;
    --brand-alert-red-20: #EACCCA;
    --brand-alert-red-30: hsl(0, 47%, 77%);
    --brand-alert-red-40: hsl(0, 50%, 68%);
    --brand-alert-red-50: #C3534B;
    --brand-alert-red-60: hsl(3, 49%, 45%);
    --brand-alert-red-70: #863832;
    /* Fix the real colors */
    --brand-alert-green-10: #E9F4E9;
    --brand-alert-green-20: #CCEACD;
    --brand-alert-green-30: hsl(120, 47%, 77%);
    --brand-alert-green-40: hsl(120, 50%, 68%);
    --brand-alert-green-50: #4BC353;
    --brand-alert-green-60: hsl(123, 49%, 45%);
    --brand-alert-green-70: #328638;
    /* Max-width wrappers */
    --max-width-XXL: 110rem;
    --max-width-XL: 82rem;
    --max-width-text: 50em;
    --header-height: 6rem;
    --negative-header-height: calc(var(--header-height) * -1);
    /* The smallest outer margin - should not scale to prevent shrinking horizontal space when user changes browser default font-size  */
    --imutable-outer-margin: 24px;
    /* negative margins with custom properties */
    --negative-imutable-outer-margin: calc(var(--imutable-outer-margin) * -1);
    /*
    * Fluid Typography & space scales:
    *
    * All values below start scale from 480px and scale up to 1400px
    *
    * Since we are using the min-max pixel values in the variable names,
    * it is a good idea to update and do a find replace on the variable names if you change the actual clamp values.
    * Might seem counter intuitive, but it is a good idea to keep the variable names in sync with the values.
    *
    * I found these variable names more intuitive than '--fluid-text-S' etc.
    */
    /* Typography scales Screen width: 480-1600px */
    --fluid-text-18-20: clamp(1.125rem, 1.071rem + 0.18vw, 1.25rem);
    --fluid-text-20-24: clamp(1.25rem, 1.143rem + 0.36vw, 1.5rem);
    /* Fluid margin/padding scales Screen width: 480-1600px */
    --fluid-space-16-24: clamp(1rem, 0.739rem + 0.87vw, 1.5rem);
    --fluid-space-40-72: clamp(2.5rem, 1.643rem + 2.86vw, 4.5rem);
    --fluid-space-24-32: clamp(1.5rem, 1.239rem + 0.87vw, 2rem);
    --fluid-space-32-64: clamp(2rem, 0.957rem + 3.48vw, 4rem);
    --fluid-space-32-96: clamp(2rem, -1.13rem + 10.43vw, 8rem);
    --fluid-space-64-128: clamp(4rem, 1.913rem + 6.96vw, 8rem);
    --body-font: "MatterSQ", sans-serif;
    --header-font: "MatterSQ", sans-serif;
    --button-text-color: white;
    --button-text-transform: none;
    --button-font-size: inherit;
    --app-item-height: 6.5rem;
    --app-item-padding: 0 1.5rem;
    --app-item-radius: 9px;
    /* Values for dotnetfront's shared admin components (css/components.css) */
    --primary-hover: #1b8159;
    --radius-pill: 100px;
}

form input[type="password"], input[type="text"], input[type="number"], form input[type="email"], form select, form textarea {
  border-radius: 9px
}

form button, form input[type="submit"] {
  border-radius: 100px !important
}

aside.login div.login-logo img {
  height: 3.4rem;
}

/*
 * dotnetfront layout, with the sizes of the Prokur portal (prokur.se).
 *
 * This file loads after dotnetfront's global CSS but before its scoped
 * component CSS (DotNetFront.Web.styles.css). A scoped rule gets an extra
 * attribute selector, so the rules for components start with "body" and
 * one class more than the scoped rule they replace.
 */

/* prokur.se uses a 16px root font size and MatterSQ for all text.
   dotnetfront's app.css sets 14px and Brown. */
html,
body {
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
}

:root {
  --nav-menu-height: 6rem;
}

/* Header: logo 160px wide, content in a 1312px column, a thin line below. */
body .menu-bar {
  box-shadow: 0 2px rgba(255, 255, 255, 0.05);
}

/* The scoped CSS uses this variable for the padding on all four sides and for
   the right offset of the name and the menu button. The column width only
   applies left and right; the content is centred vertically. */
body .menu-bar .navbar-toggler-container {
  --navbar-toggler-container-padding: max(1.5rem, calc((100vw - 82rem) / 2));
  padding-block: 0;
}

/* Pages that mark their content with pk-wide (the configuration tree) use a wider column. */
body .page:has(.pk-wide) .menu-bar .navbar-toggler-container {
  --navbar-toggler-container-padding: max(1.5rem, calc((100vw - 115rem) / 2));
}

body .menu-bar .navbar-brand {
  display: flex;
  align-items: center;
}

body .menu-bar .navbar-brand img {
  width: 160px;
  height: auto;
}

body .menu-bar .user-name {
  font-family: var(--body-font);
  font-size: var(--fluid-text-18-20);
  font-weight: 400;
}

/* Space between the header and the page content. */
body .page .content {
  padding-top: var(--fluid-space-32-96);
}

/* Service tiles: 360px columns, 104px icons, 24px titles, darker on hover. */
body .content .app-list {
  grid-template-columns: repeat(auto-fit, 22.5rem);
}

body .content .app-list .app-item:hover,
body .content .app-list .app-item:active {
  background-color: var(--brand-grey-N80);
}

body main .app-item:hover div {
  background: rgba(0, 0, 0, 0.2);
}

body main .app-item .app-icon {
  width: 6.5rem;
  height: 6.5rem;
}

body main .app-item h2 {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0;
}

/* Menu panel: 560px wide below the header, 24px items, no highlight boxes,
   and "Logga ut" as a green pill button. Bootstrap's px-3 (1rem, !important)
   stays on each item, so the panel padding is 1rem smaller than on prokur.se. */
body .menu-bar .nav-scrollable {
  top: calc(var(--nav-menu-height) + 2px);
  right: var(--navbar-toggler-container-padding);
  height: calc(100vh - var(--nav-menu-height) - 2px);
  padding: 2.75rem 0.5rem 6rem 2.75rem;
  box-shadow: none;
}

/* The overlay still closes the menu on click, but prokur.se does not darken the page. */
body .menu-bar .transparent-overlay {
  top: calc(var(--nav-menu-height) + 2px);
  height: calc(100vh - var(--nav-menu-height) - 2px);
  background-color: transparent;
}

body .nav-scrollable .nav-item {
  font-size: 1.5rem;
  padding-block: 0 1.25rem;
}

body .nav-scrollable .nav-submenu .nav-item {
  font-size: var(--fluid-text-18-20);
  padding-block: 0 0.5rem;
}

body .nav-scrollable .nav-item .nav-link,
body .nav-scrollable .nav-item a.active,
body .nav-scrollable .nav-item .nav-link:hover {
  height: auto;
  line-height: 1.6;
  padding: 0;
  color: var(--brand-white);
  background: none;
}

body .nav-scrollable .nav-item .options-icon {
  width: 1.5rem;
  height: 1.5rem;
}

body .nav-scrollable .nav-item form button.nav-link {
  margin-top: 0.75rem;
  padding: 1.785rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: var(--brand-rodeo-dust);
  border-radius: 100px;
}

/* Login page: 18-20px text in the form, as on prokur.se. */
aside.login form input,
aside.login form button {
  font-family: var(--body-font);
  font-size: var(--fluid-text-18-20);
}

/* Bootstrap floats legend, which makes it a flex item in the fieldset and adds
   the fieldset gap below it. prokur.se does not load Bootstrap. */
aside.login .login-password-panel legend {
  float: none;
}