common.css

/* Real micro-frontend would have its own CSS but we are lazy */

iframe#sandbox {
  position: fixed;
  top: 2.5em; 
  bottom: 0px;
  right: 0px;
  width: 100%;
  border-top: 1px solid rgb(245, 84, 89);
  margin: 0;
  padding: 0;
  overflow: hidden;
  z-index: 999999;
  height: 100%;
}
.error_controls {
  width:fit-content;
  margin: auto;
  padding: 1.5em 1.5em 0 1.5em;
  text-align: left;
}

.module_root {
  min-height: content;
  position: absolute;
  padding: 0px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  border-radius:1ex;
  overflow:hidden;
  #box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

#host .module_header {
  background-color: #2f1937;
  color: white;
}
.module_root#host {
  width: 90%;
  height: 70%;
  display: flex;
  flex-direction: column;

  border: 1px #2f1937 solid;
  background: #9586a5;
  color: #2f1937;
}

#micro_mount_point {
  flex-grow: 1;
}
#micro .module_header {
  background-color: rgb(245, 84, 89);
  color: white;
}
.module_root#micro {
  position:relative;
  width: 80%;
  height: 70%;

  border: 1px rgb(245, 84, 89) solid;
  background: rgb(240, 200, 201);
  color: #2f1937;
}

body {
  background: #faf9fb;
  font-family: Rubik,Avenir Next,Helvetica Neue,sans-serif;
}

iframe#sandbox body {
  margin: 0px;
}

.demo_name,.sdk_version {
  color: rgb(245, 84, 89);
  font-size: large;
  margin-top: 0;
  display: inline-block;
} 
label {
  white-space: nowrap;
}

#topbar label {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  margin-left: 2em;
}
.sentry_project,.component_sentry_controls input {
  margin-left: 1em;
}
.sentry_project {
  color:rgb(242, 183, 18);
}

.component_sentry_controls {
  float: right;
  margin-right: 1em;
}
.component_sentry_controls * {
  vertical-align: middle;
  font-size: smaller;
}

.sdk_version {
  float: right;
}

.module_title {
  font-size: 1.2em;
  padding-left: 1ex;
}

.footnote {
  font-size:smaller;
  color: #6e5677;
  padding-left: 1ex;
}