*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  height: 100%;
  font-size: 62.5%;
}
body {
  font-family: var(--font-stack);
  background: var(--bg);
  height: 100%;
  overflow: hidden;
  font-size: 1.6rem;
}
a {
  text-decoration: none;
  color: #2a5db0;
  cursor: pointer;
}
button {
  cursor: pointer;
}
img,
iframe {
  display: block;
}
input[type='text'],
input[type='password'],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 0;
  border: 1px solid #dddddd;
  border-radius: 1px;
  font-family: var(--font-stack);
}

button svg {
  vertical-align: top;
}
:global(#react-root),
div.appThemeContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

div.layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 300px repeat(12, 1fr);
  grid-template-rows: 65px calc(100vh - 65px);
  grid-template-areas:
    'nav nav nav nav nav nav nav nav nav nav nav nav nav'
    'sBar app app app app app app app app app app app app';
}

header.header {
  background: var(--bg);
  z-index: 1;
  grid-area: nav;
}
div.main-header {
  height: 64px;
  background: var(--bg);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}
div.main-header > .wordmark {
  color: var(--fg);
  padding-left: 34px;
  font-family: var(--font-logo);
  line-height: var(--line-height-text);
  font-weight: var(--semi-bold);
  font-size: var(--logo-font-22);
  margin-right: 40px;
}
div.main-header > .wordmark-macos {
  padding-left: 92px;
}
.wordmark > a {
  color: inherit;
}
.electron-draggable {
  -webkit-app-region: drag;
}
.electron-non-draggable {
  -webkit-app-region: no-drag;
}

div.main-content-container {
  position: relative;
  grid-area: app;
  display: flex;
  overflow: hidden;
}
div.main-content-container-column {
  flex-direction: column;
}
div.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.switcher {
  border-right: 1px solid var(--separator-background-primary-default);
}

div.upper-right {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px 16px;
}
.sidebar {
  display: flex;
  grid-area: sBar;
}
span.loading-indicator-loading {
  display: inline-block;
}
@keyframes loading-indicator-loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
span.loading-indicator-loading-medium:after {
  content: ' ';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation-name: loading-indicator-loading;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
span.loading-indicator-loading-large:after {
  content: ' ';
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation-name: loading-indicator-loading;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
span.loading-indicator-loading-x-large:after {
  content: ' ';
  display: block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 3px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation-name: loading-indicator-loading;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
span.loading-indicator-loading-small:after {
  content: ' ';
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation-name: loading-indicator-loading;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
span.loading-indicator-black:after {
  border-color: #000 transparent #000 transparent;
}
span.loading-indicator-error {
  font-weight: bold;
  color: white;
  line-height: 0;
}
span.loading-indicator-error-black {
  font-weight: bold;
  color: red;
  line-height: 0;
}

.hidden {
  display: none;
}
.italic {
  font-style: italic;
}

span.page-loading {
  margin-top: 5px;
  margin-right: 12px;
  float: left;
}
span.page-error {
  margin: 15px;
  font-size: 42px;
  float: left;
  color: red;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 320dpi),
  only screen and (min-resolution: 2dppx) {
  header.header,
  header.main-header,
  div.splash-header-container,
  div.splash-top-container,
  div.splash-bottom,
  div.calendar-filters-container {
    background: var(--bg);
  }
}

@media (hover: none) {
  div.splash-header-container,
  div.splash-top-container,
  div.splash-bottom {
    background-attachment: initial;
  }
}
