@import '_variables.css';
/* @import url('https://fonts.googleapis.com/css?family=Open+Sans:regular,bold,italic&subset=latin,latin-ext'); */

:root {
  --app-color-bg: var(--app-color-grey-light);
  --navbar-height: var(--app-navbar-height);
}

html {
  /* font-family: 'Open Sans'; */
}

body {
  margin: 0;
  padding: 0;
}

body * {
  transition: 0.2s;
}

/* *:focus {
  outline: none;
} */

.rt-th:focus {
  outline: none;
}

/* The default React app root div */
#root {
  margin: inherit;
}

/* #appContainer {
  // Comment the following out, if enabling this class
  margin: 1em;
} */

/* a {
  cursor: pointer;
  // color: unset;
  color: var(--app-link-color);
  text-decoration: none;
} */

/* a:hover {
  // color: unset;
  color: var(--app-link-color);
  text-decoration: underline;
} */

/* This for indicating unimplemented sections of the UI. Visually obvious, and all pointer events are disabled to discourage messing with it. */
.TODO {
  opacity: 0.6;
  padding: 0.5em;
  margin: 1em 0em !important;
  color: black;
  background: rgba(255, 105, 180, 0.5);
  display: inline-block;
  border: 0.2em dashed hotpink;
  box-sizing: border-box;
  border-radius: 0.3em !important;
  pointer-events: none; /* Don't allow any interaction with this class. */
  cursor: not-allowed;
}

.viewContainer {
  position: relative;
}

.busy-blockingContainer {
  position: relative;
  height: calc(100vh - var(--navbar-height) - 120px);
  overflow: hidden;
}

.busy-blocking::after {
  /* background: linear-gradient(45deg, var(--app-color-bg), rgba(255,255,255,0) 50%),
              linear-gradient(135deg, var(--app-color-bg), rgba(255,255,255,0) 50%), 
              linear-gradient(225deg, var(--app-color-bg), rgba(255,255,255,0) 50%), 
              linear-gradient(315deg, var(--app-color-bg), rgba(255,255,255,0) 50%),
              url('../images/loading.gif') no-repeat center center; */
  /* background: linear-gradient(45deg, var(--app-color-bg), rgba(255,255,255,0) 50%),
              linear-gradient(135deg, var(--app-color-bg), rgba(255,255,255,0) 50%), 
              linear-gradient(225deg, var(--app-color-bg), rgba(255,255,255,0) 50%), 
              linear-gradient(315deg, var(--app-color-bg), rgba(255,255,255,0) 50%),
              url('../images/loading.gif') no-repeat center center; */
  /* background: linear-gradient(45deg, rgba(255,255,255,.8), rgba(255,255,255,0) 50%),
              linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,0) 50%), 
              linear-gradient(225deg, rgba(255,255,255,.8), rgba(255,255,255,0) 50%), 
              linear-gradient(315deg, rgba(255,255,255,.8), rgba(255,255,255,0) 50%),
              url('../images/loading.gif') no-repeat center center; */
  background: rgba(255,255,255,0.90) url('../images/loading.gif') no-repeat 50% 2%;

  /* z-index: 9999; */
  /* display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center; */

  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: wait !important;
  /* pointer-events: none !important; */ /* Don't allow any interaction with this class. */
  /* -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none !important; */
  /* user-select: none !important; */
  /* cursor: not-allowed !important; */
}

.element-padding .left {
  padding: 0 6px 0 0;
}
.element-padding .right {
  padding: 0 0 0 6px;
}
.element-padding .middle {
  padding: 0 6px 0 6px;
}
.element-padding .horizontal {
  padding-left: 6px !important;
  padding-right: 6px !important;
}
.element-padding .vertical {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.element-padding .all-sides {
  padding: 6px !important;
}
.element-padding .horiz-top {
  padding-left: 6px !important;
  padding-right: 6px !important;
  padding-top: 6px !important;
}