body.signedIn #mainMenuSignIn,
body.signedIn #mainMenuSignUp {
  display: none;
}
body.signedIn[backend="Ilograph"]:not(.enterpriseFederated) #mainMenu #ilographStacks {
  display: initial;
}
body.signedIn[backend="Ilograph"] #mainMenu.hasTeams #myTeams {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.own:not(.untitled) #mainMenu #ilographStacks .stack.opened i.history {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.own:not(.untitled) #mainMenu #ilographStacks .stack.opened i.visibility {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.own:not(.untitled) #mainMenu #ilographStacks .stack.opened i.delete {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.own:not(.untitled):not(.team):not(.presentation) #share {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.own:not(.untitled) #history {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.team:not(.untitled) #history {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.team:not(.untitled)[teampermission="own"] #deleteDiagram {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.team:not(.untitled)[teampermission="own"] #renameDiagram {
  display: initial;
}
body.signedIn[backend="Ilograph"].loaded.team:not(.untitled)[teampermission="edit"] #renameDiagram {
  display: initial;
}
body.signedIn[backend="Ilograph"]:not(.federated) #userMenu #startChangePassword {
  display: initial;
}
body.signedIn[backend="Ilograph"]:not(.enterpriseFederated) #createWorkspace {
  display: initial;
}
body.signedIn[backend="Ilograph"]:not(.enterpriseFederated) #menuConfluence {
  display: initial;
}
body.signedIn[backend="Ilograph"]:not(.enterpriseFederated) #menuDesktop {
  display: initial;
}
body.signedIn[backend="Ilograph"].enterpriseFederated #createOpen {
  display: none;
}
body.signedIn:not([backend="Ilograph"]).userHasStacks #mainMenu #recentStacks {
  display: initial;
}
body.signedIn.loaded.canEdit #mainMenu .stacks .stack.opened .stackNamespace {
  display: none;
}
body.signedIn #userCircle {
  display: none;
}
body.presentation #userCircle,
body.presentation #userLoggedIn {
  display: none;
}
body[backend="Ilograph"].loaded.own:not(.untitled):not(.team):not(.linked) #mainMenu #ilographStacks .stack.opened i.visibility,
body:not([backend]).loaded.own:not(.untitled):not(.team):not(.linked) #mainMenu #ilographStacks .stack.opened i.visibility {
  display: initial;
}
body[backend="Ilograph"].loaded.own:not(.untitled):not(.team):not(.linked):not(.presentation) #share,
body:not([backend]).loaded.own:not(.untitled):not(.team):not(.linked):not(.presentation) #share {
  display: initial;
}
body:not(.signedIn) #userLoggedIn {
  display: none;
}
body.loaded:not(.signedIn):not(.untitled):not(.linked):not(.presentation) #topbarNewDiagram {
  display: initial;
}
body.loaded.signedIn.userHasStacks:not(.untitled):not(.hasTeams):not(.presentation):not(.freemail) #topbarNewTeam {
  display: initial;
}
body.loaded.signedIn.userHasStacks.own:not(.untitled):not(.hasTeams):not(.presentation).freemail #topbarShare {
  display: initial;
}
body.loaded:not(.hasTeams):not(.presentation).canEdit #topbarDesktop,
body.loaded:not(.hasTeams):not(.presentation).signedIn #topbarDesktop {
  display: initial;
}
body.loaded.canEdit.unsavedChanges:not(.presentation) #topbarSave {
  display: initial;
}
body:not(.signedIn).loaded.own:not(.presentation) #share {
  display: initial;
}
body.historical #navSpace {
  pointer-events: none;
  cursor: default;
}
body.historical.loaded #historyNotice {
  display: initial;
}
body .createTeamLink {
  color: blue;
  cursor: pointer;
}
body .createTeamLink:hover {
  text-decoration: underline;
}
body #expireScrim {
  color: black;
}
body #expireScrim i {
  margin-bottom: 10px;
  font-size: 48pt;
}
body #expireScrim div {
  font-size: 18pt;
}
body #expireScrim .explainer {
  font-size: 12pt;
}
body .teamBanner .restoreAccess {
  color: white;
  cursor: pointer;
}
body .teamBanner .restoreAccess:not(:hover) {
  text-decoration: underline;
}
body .banner {
  display: none;
  position: absolute;
  top: 0;
  height: 45px;
  width: 100%;
  z-index: 3;
  color: rgba(255, 255, 255, 0.87);
  background-color: orangered;
  align-items: center;
  justify-content: center;
  border-top: 1px dashed rgba(255, 255, 255, 0.68);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
body .banner .closeButton {
  font-size: 15pt;
  opacity: 0.68;
  color: inherit;
}
body #infoBanner {
  height: 28px;
  background-color: darkolivegreen;
}
body #infoBanner a {
  color: #ffffff;
}
body #infoBanner #infoBannerClose {
  color: rgba(255, 255, 255, 0.87);
  margin-left: 10px;
  text-decoration: underline;
}
body #infoBanner #infoBannerClose:hover {
  color: white;
}
body #expiringBanner {
  background-color: darkolivegreen;
}
body.team[teamStatus="expired"] #expireNoticePanel {
  display: initial;
}
body.team[teamStatus="expired"][teamPermission="read"] #expireScrim,
body.team[teamStatus="expired"][teamPermission="edit"] #expireScrim {
  opacity: 1;
  pointer-events: initial;
  z-index: 999;
}
body.team[teamStatus="expired"][teamPermission="own"]:not(.hideLicenseBanner) #expiredBanner {
  display: flex;
}
body.team[teamStatus="probation"][teamPermission="own"]:not(.hideLicenseBanner) #expiredBanner {
  display: flex;
}
body.team[teamStatus="expiring"][teamPermission="own"]:not(.hideLicenseBanner) #expiringBanner {
  display: flex;
}
#share {
  font-size: 20px;
  margin-right: 6px;
  margin-top: 2px;
  display: none;
}
#userCircle {
  font-size: 30px;
  cursor: pointer;
  margin-right: 7px;
}
#userLoggedIn {
  height: 30px;
  cursor: pointer;
  margin-right: 7px;
  margin-left: 5px;
}
#userLoggedIn img {
  height: 30px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  border-radius: 10%;
}
#ctaButtons {
  margin-right: 50px;
  display: flex;
  flex-direction: row;
}
.cta {
  margin-left: 20px;
  line-height: 16pt;
  box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.06);
  padding-left: 20px;
  padding-right: 20px;
  display: none;
  background: linear-gradient(45deg, #006fc7, #2196F3);
}
#topbarDesktop {
  background: linear-gradient(45deg, deeppink, magenta);
}
#twitter {
  display: none;
  width: 30px;
  height: 30px;
  margin-right: 7px;
  visibility: hidden;
}
.github {
  aspect-ratio: 1;
  display: none;
}
.github * {
  pointer-events: none;
}
#topbar .github {
  height: 30px;
  filter: invert(1);
  margin-right: 7px;
}
#topbar .github svg {
  transform: scale(0.93);
}
#perspectiveTray .github {
  background-color: white;
  position: absolute;
  right: 0;
  margin: 0;
  z-index: 2;
  padding: 7px;
  height: 25px;
  border-left: 1px solid lightgray;
}
.z-depth-half {
  box-shadow: 0 1px 2.5px 0 rgba(0, 0, 0, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.06);
}
.z-depth-1 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.z-depth-2 {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#historyNotice {
  display: none;
  z-index: 3;
  position: absolute;
  top: 0;
  width: 100%;
  margin-top: -1px;
  text-align: center;
}
#historyNotice > span {
  padding: 2px 10px;
  background: whitesmoke;
}
#historyNotice #seeCurrent {
  cursor: pointer;
  color: #2196F3;
}
#historyNotice #seeCurrent:hover {
  text-decoration: underline;
}
body.loaded.presentation #brand {
  display: flex;
  opacity: 1 !important;
}
body.loaded.presentation #menuButton {
  display: none;
}
body.loaded.presentation #navSpace {
  margin-left: 7px;
}
#brand {
  display: none;
  align-items: center;
  margin-right: 46px;
  filter: drop-shadow(0 1px 2px #00000040);
}
#brand img {
  height: 20pt;
  width: 20pt;
  margin-right: 4px;
}
#brand div {
  color: white;
  font-size: 22pt;
  font-weight: bold;
}
#brand span:last-child {
  opacity: 0.9;
}
#architectureCenter {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  max-width: 700px;
  margin-top: 20px;
}
#architectureCenter .intro {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  color: rgba(0, 0, 0, 0.68);
}
#architectureCenter .row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#architectureCenter .row:not(:last-child) {
  margin-bottom: 20px;
}
#architectureCenter .image {
  width: 25%;
  margin-right: 10px;
  align-self: flex-start;
  cursor: pointer;
}
#architectureCenter .name {
  margin-top: 0;
  margin-bottom: 7px;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  align-items: center;
}
#architectureCenter .description {
  line-height: 1.25;
  font-size: 10pt;
  color: rgba(0, 0, 0, 0.68);
  margin-top: 0;
  margin-bottom: 10px;
}
#architectureCenter .name button {
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
}
#architectureCenter .name button:hover {
  text-decoration: underline;
}
#architectureCenter .architecture {
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#architectureCenter .architectureMain {
  display: flex;
}
#architectureCenter .prose {
  display: flex;
  flex-direction: column;
}
#architectureCenter .technology {
  padding: 1px 6px;
  border-radius: 100px;
  font-size: 9pt;
  color: #606060;
  border: 1px solid #606060;
  background-color: #60606010;
  white-space: nowrap;
  margin-left: 7px;
}
#architectureCenter .aws {
  color: #E4750E;
  border: 1px solid #E4750E;
  background-color: #E4750E10;
}
#architectureCenter .azure {
  color: #0078d4;
  border: 1px solid #0078d4;
  background-color: #0078d410;
}
@media screen and (min-width: 1100px) {
  #perspectiveTray .github {
    display: initial;
  }
}