/* Shell Grid */
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;

  color: rgb(192, 192, 192);
  font-size: 12px;
  font-family: sans-serif;
  background: rgb(24, 24, 24);

  /*display: grid;*/
  /*grid-template-rows: auto 1fr auto; *//* Top bar, main content, bottom bar */
}

header, footer {
  z-index: 1;
}

/* Main layout grid: activity-bar on the left, tab-bar on the right */
main {
  height: 100%;
  overflow: hidden;

  display: grid;
  grid-template-columns: auto 1fr; /* first column for activity-bar, second for tab-bar */
}

/* Logo and login link as splash screen */
.logo {
  width: 100%;
  height: 100%;
  
  display: absolute;
  z-index: 1000;
}

.view {
  width: 100%;
  height: 100%;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.layout {
  gap: 0;
  width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 300px auto;
  grid-template-rows: auto auto;
}

.logo-box {
  width: 300px;
  height: 300px;
}

.text-box {
  width: 800px;
  height: 300px;

  font-size: 13em;
  text-align: left;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.message-box {
  padding-top: 20px;

  text-align: left;

  grid-column: 1 / 3;
}

.signin-link {
  color: #287DC5;
  background: transparent;
  text-decoration: none;
  transition: color 0.2s ease;
}

.signin-link:hover,
.signin-link:active {
  color: #F49B3F;
}

.signin-link:focus {
  color: #FFFFFF;
  outline: 2px solid #F49B3F;
  outline-offset: 2px;
}

.signin-link[disabled] {
  color: #4D4C4C;
  pointer-events: none;
}

/* Red Dot Indicator */
.indicator { /* Host container must be position: relative */
  position: relative;
}

.indicator-dot { /* Indicator positioned top-left */
  --dot-size: 8px; /* Default size, override per instance */
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%) translateY(-100%);
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: red;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}