:root {
  --textalk-regular: { font-weight: 400 }
  --textalk-bold: { font-weight: 700 }
}

:host {
  --textalk-regular-weight: 400;
  --textalk-bold-weight: 700;
}

app-dropdown-menu:not(:defined) {
  visibility: hidden;
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border-top: 1px solid rgba(52, 64, 82, 0.1); /* Will be invisible in most cases */
  overflow: hidden;
}

.col.buttons paper-icon-button:focus {
  border-radius: 50%;
  background-color: #e1e3e5;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

dialog > .buttons, .standard-dialog-child > .buttons, dialog > .content-body, .standard-dialog-child > .content-body {
  contain: layout;
  background: var(--primary-background-color);
  padding: 1rem;
}

dialog > .content-body {
  padding: 0 1rem;
  margin: 0;
}

.standard-dialog-child {
  width: 560px;
}

paper-icon-button:focus {
  border-radius: 50%;
  background-color: rgba(255,255,255,0.25);
}

.cancel_button,
.white_button {
  margin: 10px;
}

.cancel_button:focus,
.white_button:focus {
  margin: 10px;
  background-color: #e1e3e5;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

.app-version {
  color: #c2c2c2;
}

paper-card {
  display: block;
}

paper-button {
  font-weight: var(--textalk-bold-weight);
}

paper-button span,
.paper-button-wrapper-link,
.paper-button-wrapper-link:link,
.paper-button-wrapper-link:hover,
.paper-button-wrapper-link:active,
.paper-button-wrapper-link:focus {
  text-decoration: none;
}

paper-tooltip {
  --paper-tooltip: {
    font-size: 12px;
    font-weight: 400;
  }
}

.large-header {
  background: #354052;
  color: white;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  border-radius: 0;
}

.off-screen {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

.large-header .headerTitle {
  font-size: 16px;
  font-weight: 700;
}

paper-card.large-header div.card-content {
  height: 60px;
  padding: 0px;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.large-header a {
  display: block;
  text-decoration: none;
  color: white;
}

h1,h2 {
  font-size: 16px;
  font-weight: var(--textalk-bold-weight);
}

.action-button {
  min-width: 10px;
  text-transform: none;
  background-color: #4a90e2;
  color: #ffffff;
  font-size: 16px;
  font-weight: var(--textalk-regular-weight);
  border-radius: 0;
  padding: 10px 24px 10px 24px;
}

.action-button:focus {
  background-color: #376ba9;
}

.header-back {
  float: left;
  position: relative;
  left: -16px;
  width: 40px;
  padding: 10px;
  margin-right: 8px;
  border-right: 1px solid rgba(255,255,255,0.3);
  cursor: pointer;
}

.status-button {
  min-width: 10px;
  text-transform: none;
  font-size: 14px;
  font-weight: var(--textalk-regular-weight);
  height: 30px;
  margin: 0 8px 0 0;
  padding: 6px;
}
.status-button-text {
  display: inline-block;
  margin: 0 6px 0 4px;
  white-space:nowrap;
}
.status-button-icon {
  display: block;
  width: 18px;
  height: 18px;
}

@media screen and (max-width: 560px) {
  .standard-dialog-child {
    width: 100%;
  }
}

/**
 * Force hiddenness since Chromium has a bug where css style rule overrides the hidden attribute.
 * https://bugs.chromium.org/p/chromium/issues/detail?id=179220
 */
[hidden] {
  display: none !important;
}