* {
  box-sizing: border-box;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* Fluent UI does not have a concept of a title font, so we need to override the default font styles */
.fui-Display,
.fui-LargeTitle,
.fui-Title1,
.fui-Title2,
.fui-Title3 {
  font-family: 'Lora', serif;
  font-weight: 400;
}

/* Design team wants all cards to be outlined with a thin border, no shadow */
/* The outline appearance does not contain the interactive states, or the background desired */
.fui-Card {
  box-shadow: none;
  &:hover {
    box-shadow: none;
  }
  &:active {
    box-shadow: none;
  }
  &:after {
    position: absolute;
    inset: 0px;
    content: '';
    pointer-events: none;
    border-style: solid;
    border-top-width: var(--strokeWidthThin);
    border-right-width: var(--strokeWidthThin);
    border-bottom-width: var(--strokeWidthThin);
    border-left-width: var(--strokeWidthThin);
    border-radius: var(--fui-Card--border-radius);
    border-color: var(--colorNeutralStroke1);
  }
  &:hover:after {
    border-color: var(--colorNeutralStroke1Hover);
  }
  &:active:after {
    border-color: var(--colorNeutralStroke1Pressed);
  }
}

/* TODO: This is a temporary fix, once we replace deltaview.js with new viewer this can be removed */
/* Note: This is to reset the font size to initial, this is required because one of the
dependency deltaview.js is setting the font size to 75% */
html {
  font-size: 100% !important;
}