/* To customize the header in further we need to be on the business plan for custom HTML and Javascript */

.masthead-container {
  width: 100% !important;
  height: 25vw;
  min-height: 300px;
  max-height: 450px;
  margin-bottom: 70px !important;
  max-width: initial !important;
  background: radial-gradient(circle at 0% 0%, rgba(7,24,54,100), rgba(0,0,0,0%) 85%), radial-gradient(circle at 50% 15%, rgba(0,99,201,0.5), rgba(0,0,0,0) 40%), radial-gradient(circle at 90% 0%, rgba(88,56,171,0.9), rgba(0,0,0,0) 50%), radial-gradient(circle at 50% 50%, rgba(12,99,170,100), rgba(0,0,0,0) 80%), radial-gradient(circle at 0% 100%, rgba(4,99,153,100), rgba(0,0,0,0) 40%), radial-gradient(circle at 100% 80%, rgba(7,125,146,100%), rgba(9,80,144,100%) 120%) beige
}

.masthead-container.basic .updates-dropdown-container {
  position: absolute !important;
  right: 0;
  top: 20px !important;
}


.masthead {
  max-width: 850px;
  margin-bottom: 0px !important;
  margin: 0px auto;
  padding-top: 0 !important;
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  justify-content: center; 
}

.masthead .text-container {
  top: 0;
  bottom: initial !important;
  background-color: transparent !important;
}

.masthead .text-container .page-name {
  display: none !important;
}


.masthead.has-logo .logo-container {
   max-width: 70% !important;
}

.masthead.has-logo .logo-container img {
   max-height: 40% !important;
}


/* Button styles to roughly match Polaris */
.flat-button, #show-updates-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  box-shadow: none;
  border-radius: 4px;
  padding: 6px 33px;
  height: 32px;
  text-shadow: initial;
}

.flat-button:hover, #show-updates-dropdown:hover {
  background-color: #12abbb;
}

.page-status {
  text-shadow: none !important;
}

/* Polaris callout styles. Colors where indicated are duplicated between here and the colors configuration in statuspage */
.page-status.status-none {
  /* green-color .08% opacity */
  background-color: rgba(33, 221, 170, 0.08) !important;
  /* green-color */
  border: 1px solid #21DDAA !important;
}

.page-status.status-critical {
  /* red-color .08% opacity */
  background-color: rgba(231, 76, 60, 0.08) !important;
  /* red-color */
  border: 1px solid #E74C3C !important;
}

.page-status.status-major {
  /* orange-color .08% opacity */
  background-color: rgba(255, 183, 33, 0.08) !important;
  /* orange-color */
  border: 1px solid #FFB721 !important;
}

.page-status.status-minor {
  /* yellow-color .08% opacity */
  background-color: rgba(255, 235, 47, 0.08) !important;
  /* yellow-color */
  border: 1px solid #FFEB2F !important;
}

.page-status .status.font-large {
  /* font-color */
  color: #172B4D !important;
  font-weight: 400;
}