/* 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: #9c528b; /* not used? */
    --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;


}

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
}

a.btn.btn-beige.logout-button {
  border-radius: 100px;
  color: inherit !important;
  font-size: 1.25rem;
}


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

.app-item a:hover { background: rgba(0,0,0,0.2); }
.app-item a:hover img {   filter: none !important;}
header div.site-branding img {
  width: 160px;
}

.site-header {
  box-shadow: 0px 2px rgba(255,255,255,0.05);
}

div.menu-container.active {
  margin-block-start: calc(var(--header-block-padding) + 2px);
}