/* -- FluentUI Theme -----------------------------------------------------------
https://developer.microsoft.com/en-us/fluentui#/styles/web
https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots
https://aka.ms/themedesigner
https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html
Primary #0078d4 Text #323130 Background #ffffff
themePrimary #0078d4
    Fabric Core: $ms-color-themePrimary
    Theme slot: themePrimary
neutralPrimary #323130 gray160
    Fabric Core: $ms-color-neutralPrimary
    Fabric React: NeutralColors.gray160
    Theme slot: neutralPrimary

SharePoint #0078d4 primary
    Fabric Core: $ms-color-communicationPrimary
    Fabric React: CommunicationColors.primary
PowerPoint #b7472a
*/
:root {
    --themePrimary: #0078d4;
    --themeLighterAlt: #eff6fc;
    --themeLighter: #deecf9;
    --themeLight: #c7e0f4;
    --themeTertiary: #71afe5;
    --themeSecondary: #2b88d8;
    --themeDarkAlt: #106ebe;
    --themeDark: #005a9e;
    --themeDarker: #004578;
    --neutralLighterAlt: #faf9f8;
    --neutralLighter: #f3f2f1;
    --neutralLight: #edebe9;
    --neutralQuaternaryAlt: #e1dfdd;
    --neutralQuaternary: #d0d0d0;
    --neutralTertiaryAlt: #c8c6c4;
    --neutralTertiary: #a19f9d;
    --neutralSecondary: #605e5c;
    --neutralSecondaryAlt: #8a8886;
    --neutralPrimaryAlt: #3b3a39;
    --neutralPrimary: #323130;
    --neutralDark: #201f1e;
    --black: #000000;
    --white: #ffffff;
    --footer-height: 21px;
    --message-height: 21px;
    --message-show: 5;
}

/*-- general -----------------------------------------------------------------*/
body {
    margin: 0;
}

main, div {
    box-sizing: border-box;
}

main {
  display: flex;
  flex-flow: column nowrap;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.hide {
    display: none;
}

.section {
    width: 100%;
}

.section * {
    margin: 2px 10px;
}

.section form {
    margin: 0;
}

.section-title {
    margin: 0;
    width: 100%;
    padding: 2px;
    background-color: var(--neutralTertiaryAlt);
}

#footer {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0;
    background-color: var(--neutralLight);
}

#footer *:last-child {
    text-align: right;
    font-size: 0.8em;
}

.working-overlay {
    background-color: rgba(0, 96, 0, 0.3);
    background-color: rgba(189, 183, 107, 0.5); /* DarkKhaki #BDB76B */
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
/* -- FluentUI Button ----------------------------------------------------------
https://developer.microsoft.com/en-us/fluentui#/controls/web/button
https://fluentuipr.z22.web.core.windows.net/heads/master/theming-designer/index.html
------------------------------------------------------------------------------*/
.ms-Button {
    outline: transparent;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 0px 16px;
    text-decoration: none;
    text-align: center;
    min-width: 80px;
    height: 32px;
}

.ms-Button.ms-Button--default, .root-249 {
    border: 1px solid rgb(138, 136, 134);
    border: 1px solid var(--neutralSecondaryAlt);
    background-color: rgb(255, 255, 255);
    background-color: var(--white);
    color: rgb(50, 49, 48);
    color: var(--neutralPrimary);
}

.ms-Button.ms-Button--default:hover, .root-249:hover {
    background-color: rgb(243, 242, 241);
    background-color: var(--neutralLighter);
    color: rgb(32, 31, 30);
    color: var(--neutralDark);
}

.ms-Button.ms-Button--primary, .root-250 {
    background-color: #0078d4;
    background-color: var(--themePrimary);
    border: 1px solid rgb(0, 120, 212);
    border: 1px solid var(--themePrimary);
    color: rgb(255, 255, 255);
    color: var(--white);
}

.ms-Button.ms-Button--primary:hover, .root-250:hover {
    background-color: rgb(16, 110, 190);
    background-color: var(--themeDarkAlt);
    border: 1px solid rgb(16, 110, 190);
    border: 1px solid var(--themeDarkAlt);
    color: rgb(255, 255, 255);
    color: var(--white);
}

.ms-Button .ms-Button-label, .label-190 {
    margin: 0px 4px;
    line-height: 100%;
    display: block;
    font-weight: 600;
}

.ms-Button.ms-Button--default:disabled,
.ms-Button.ms-Button--default:hover:disabled,
.ms-Button.ms-Button--primary:disabled,
.ms-Button.ms-Button--primary:hover:disabled,
.ms-Button:disabled, .root-278 {
    border: 1px solid rgb(243, 242, 241);
    border: var(--neutralLighter);
    background-color: rgb(243, 242, 241);
    background-color: var(--neutralLighter);
    color: rgb(161, 159, 157);
    color: var(--neutralTertiary);
    cursor: default;
}

.ms-textAlignRight {
    text-align: right
}

label[for=price] {
    margin-right: 5px;
}

.price {
    margin-left: 0;
    width: 75px;
}
/*-- ux ----------------------------------------------------------------------*/
#ux, #dev {
    padding-bottom: 10px;
}

/*-- spacer ------------------------------------------------------------------*/
#spacer {
 display: none;
}

main.no-msgs #spacer {
  display: block;
  flex-grow: 100;
}

/*-- messages ----------------------------------------------------------------*/
main.no-msgs #messages {
    flex-grow: 1;
    height: 19px;
}

main.no-msgs .message {
    display: none;
}

#messages {
    flex-grow: 1;
}

#messages .message {
    border-bottom: 1px solid silver;
    margin: 0;
    padding: 2px 5px;
    background-color: white;
}

#messages .message:before {
    content: '\2022  ';
}

#messages .problem {
    background-color: pink;
    background-color: MistyRose;
}

#messages {
   overflow-y: scroll;
}