.inaadressSearchContainer {
  z-index: 999;
}

.highlight {
  color: #F80000;
  font-size: 14px;
}

.sign-help {
  margin: 10px 0;
  font-size: 12px;
  color: #BB2222;
  font-weight: bold;
}

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.alert.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  background-image: -webkit-linear-gradient(top, #fcf8e3 0, #f8efc0 100%);
  background-image: -o-linear-gradient(top, #fcf8e3 0, #f8efc0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
  background-image: linear-gradient(to bottom, #fcf8e3 0, #f8efc0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffcf8e3", endColorstr="#fff8efc0", GradientType=0);
  background-repeat: repeat-x;
  border-color: #f5e79e;
}
.alert.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  background-image: -webkit-linear-gradient(top, #f2dede 0, #e7c3c3 100%);
  background-image: -o-linear-gradient(top, #f2dede 0, #e7c3c3 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
  background-image: linear-gradient(to bottom, #f2dede 0, #e7c3c3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff2dede", endColorstr="#ffe7c3c3", GradientType=0);
  background-repeat: repeat-x;
  border-color: #dca7a7;
}
.alert.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  background-image: -webkit-linear-gradient(top, #dff0d8 0, #c8e5bc 100%);
  background-image: -o-linear-gradient(top, #dff0d8 0, #c8e5bc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
  background-image: linear-gradient(to bottom, #dff0d8 0, #c8e5bc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffdff0d8", endColorstr="#ffc8e5bc", GradientType=0);
  background-repeat: repeat-x;
  border-color: #b2dba1;
}
.alert.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  background-image: -webkit-linear-gradient(top, #d9edf7 0, #b9def0 100%);
  background-image: -o-linear-gradient(top, #d9edf7 0, #b9def0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
  background-image: linear-gradient(to bottom, #d9edf7 0, #b9def0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffd9edf7", endColorstr="#ffb9def0", GradientType=0);
  background-repeat: repeat-x;
  border-color: #9acfea;
}

.form-group {
  margin-bottom: 15px;
}

.control-label {
  font-weight: bold;
  text-align: right;
  font-size: 14px;
  padding-top: 2px;
  padding-right: 15px;
  box-sizing: border-box;
}
.control-label.required:after {
  content: ' *';
  color: #a94442;
}
.required-marker {
  color: #a94442;
}

/* Two fields on one row still have to end where every one-field row ends, so the pair
   takes the width a lone .form-control would have taken and splits it. */
.field-pair {
  display: flex;
  gap: 12px;
  width: 90%;
}
.field-pair .form-control {
  width: 100%;
}

/* A third of the page is far more than the longest label needs, and the labels are set
   right, so short ones drifted to the middle of the page and left the form looking
   indented from the heading above it. The column is sized to the longest label instead
   (232px for "Residentuuris omandatav eriala") and the fields keep the width they had.
   Below the breakpoint every column is already 100% and stacks, which this leaves be. */
@media (min-width: 1025px) {
  .join-form .column-container > .third {
    width: 250px;
  }
  .join-form .column-container > .twothirds {
    width: 695px;
  }
  .join-form .form-control,
  .join-form .field-pair,
  .join-form .twothirds > .input-group,
  .join-form #aadress_otsi .inads-input-div,
  .join-form #aadress_otsi .inads-result-container {
    width: 100%;
  }
}
@media (max-width: 900px) {
  .control-label {
    text-align: left;
    margin-bottom: 5px;
  }
}

.form-control {
  display: block;
  width: 90%;
  border: 1px solid #cccccc;
  height: 34px;
  padding: 6px 12px;
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 2px;
}

textarea.form-control {
  height: 100px;
}

/* A fixed height cuts the last row of a multiple select in half, which reads as a
   rendering fault rather than as a list that scrolls. */
select[multiple].form-control {
  height: auto;
}

.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
.input-group .input-group-addon {
  display: table-cell;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 2px 0 0 2px;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}
.input-group .form-control {
  display: table-cell;
  position: relative;
  z-index: 2;
  float: left;
  width: 90%;
  margin-bottom: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}

/* An input-group is a shrink-to-fit table, so the 90% its control asks for is 90% of
   whatever the addon leaves rather than of the column the other fields line up in. */
.twothirds > .input-group {
  width: 90%;
}
.twothirds > .input-group .form-control {
  width: 100%;
}

.help-block {
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
  font-size: 12px;
}
.help-block a,
.help-inline a {
  color: #265a88;
}
.help-inline {
  color: #737373;
  font-size: 12px;
}
.button-row-help-inline {
  color: #737373;
  font-size: 12px;
  line-height: 34px;
}
.table-basic .help-inline {
  color: #737373;
  font-size: 12px;
  line-height: 12px;
}
.error-highlight {
  color: #F80000 !important;
}
.warning-highlight {
  color: orange !important;
}

.in-address-container {
  width: 90%;
}
.in-address-container .ui-listview {
  padding: 0;
}

.field-error {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 2px;
  background-color: #a94442;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: normal;
}
.checkbox-inline input[type="checkbox"] {
  margin: 0;
  flex: none;
}

/* The In-AKS address search ships its own markup and sizes its outer div from its own
   JavaScript. Its text box, clear, search and apartment controls share one flex row, so
   the row is what gets narrowed to the width of the column and the controls divide it
   between themselves — put a width on any one of them and it pushes the rest out of the
   box. The member form has a second copy of this widget in a different layout, which
   these widths are not written for. */
#aadress_otsi .inads-input-div {
  width: 90%;
  height: auto !important;
}
#aadress_otsi .inads-result-container {
  width: 90%;
}

/* The result list is drawn 5px below a container the attribution line had pushed down,
   so the attribution showed through the gap under an open dropdown. */
#aadress_otsi .inads-result {
  top: 0;
}
#aadress_otsi .inads-copyright {
  position: absolute;
  top: 100%;
  left: 0;
}

/* The apartment popup is appended to the body with no stacking of its own, so the
   widget's own result list draws over it. */
.in-ads-popup {
  z-index: 1002;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  text-decoration: none;
}
.btn:hover {
  background-color: #cccccc;
  background-position: 0 -15px;
}

.btn.btn-primary {
  color: white;
  background-image: -webkit-linear-gradient(top, #337ab7 0, #265a88 100%);
  background-image: -o-linear-gradient(top, #337ab7 0, #265a88 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
  background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
  background-repeat: repeat-x;
  border-color: #245580;
}
.btn.btn-primary:hover {
  background-color: #265a88;
}
.btn.btn-disabled {
  background-color: #DADADA;
  background-position: 0 -15px;
  color: #999999;
  cursor: not-allowed;
}
.btn.btn-disabled:hover {
  background-color: #DADADA;
  background-position: 0 -15px;
}
.btn.btn-info {
  color: white;
  background-image: -webkit-linear-gradient(top, #5bc0de 0, #2aabd2 100%);
  background-image: -o-linear-gradient(top, #5bc0de 0, #2aabd2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
  background-image: linear-gradient(to bottom, #5bc0de 0, #2aabd2 100%);
  background-repeat: repeat-x;
  border-color: #28a4c9;
}
.btn.btn-info:hover {
  background-color: #2aabd2;
}
.btn.btn-success {
  color: white;
  background-image: -webkit-linear-gradient(top, #5cb85c 0, #419641 100%);
  background-image: -o-linear-gradient(top, #5cb85c 0, #419641 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
  background-image: linear-gradient(to bottom, #5cb85c 0, #419641 100%);
  background-repeat: repeat-x;
  border-color: #3e8f3e;
}
.btn.btn-success:hover {
  background-color: #419641;
  background-position: 0 -15px;
}
.btn.btn-warning {
  color: white;
  background-image: -webkit-linear-gradient(top, #f0ad4e 0, #eb9316 100%);
  background-image: -o-linear-gradient(top, #f0ad4e 0, #eb9316 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
  background-image: linear-gradient(to bottom, #f0ad4e 0, #eb9316 100%);
  background-repeat: repeat-x;
  border-color: #e38d13;
}
.btn.btn-warning:hover {
  background-color: #eb9316;
  background-position: 0 -15px;
}
.btn.btn-default {
  color: #333;
  background-image: -webkit-linear-gradient(top, #fafafa 0, #e0e0e0 100%);
  background-image: -o-linear-gradient(top, #fafafa 0, #e0e0e0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e0e0e0));
  background-image: linear-gradient(to bottom, #fafafa 0, #e0e0e0 100%);
  background-repeat: repeat-x;
  border-color: #e0e0e0;
}
.btn.btn-default:hover {
  background-image: none;
  background-color: #d0d0d0;
  border-color: #d0d0d0;
}

.table-basic, .table-basic * {
  font-size: 14px;
}

.table-basic th {
  background-image: -webkit-linear-gradient(top, #fafafa 0, #e0e0e0 100%);
  background-image: -o-linear-gradient(top, #fafafa 0, #e0e0e0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e0e0e0));
  background-image: linear-gradient(to bottom, #fafafa 0, #e0e0e0 100%);
  background-repeat: repeat-x;
  text-align: left;
}

.table-basic a {
  color: #666;
}

.table-basic th a {
  color: #333;
}

.table-basic th a:hover {
  color: #666;
}

.table-basic th.sort {
  background-image: -webkit-linear-gradient(top, #5bc0de 0, #2aabd2 100%);
  background-image: -o-linear-gradient(top, #5bc0de 0, #2aabd2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
  background-image: linear-gradient(to bottom, #5bc0de 0, #2aabd2 100%);
  border-color: #28a4c9;
}

.table-basic th.sort-asc::after {
   font-family: 'Font Awesome 5 Free', sans-serif;
   content: "\00a0\f062";
}
.table-basic th.sort-desc::after {
   font-family: 'Font Awesome 5 Free', sans-serif;
   content: "\00a0\f063";
}

.table-basic th.sort a:hover {
  color: white;
}

.table-basic tfoot td {
  font-size: 12px;
  color: #999;
  font-style: italic;
  border: none;
}

select[multiple], select[size] {
  height: auto;
}

.table-basic {
  border-collapse: collapse;
  margin-bottom: 15px;
}
.table-basic th, .table-basic td {
  padding: 4px;
  border: 1px solid #dadada;
}

.inaadressSearchContainer .ui-listview {
  margin-top: 0 !important;
  box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

.inaadressSearchContainer .ui-listview li {
  padding-bottom: 0 !important;
}

.inAdsCopyright {
  display: none;
}

[hidden] {
  display: none !important;
}

@media screen and (max-width: 600px) {
  .no-mobile {
    display: none !important;
  }
}

@media screen and (min-width: 601px) {
  .mobile-only {
    display: none !important;
  }
}

ul.action-buttons, ul.pagination {
  padding: 0;
  margin: 10px 0 0 0;
  overflow: auto;
  height: inherit;
  list-style: none;
}
ul.pagination li, ul.action-buttons li {
  float: left;
  margin-bottom: 10px;
}

ul.pagination li + li, ul.action-buttons li + li {
  margin-left: 10px;
}

.list-unstyled {
  list-style: none;
}

.form-error ul {
  color: #ee0000;
}

.form-error ul li {
  line-height: 14px;
  padding-bottom: 0;
}

.al-menu a {
  color: black;
  padding: 10px 10px 4px 10px;
}

.al-menu > ul {
  display: inline-block;
  background-image: -webkit-linear-gradient(top, #ffffff 0, #f0f0f0 100%);
  background-image: -o-linear-gradient(top, #ffffff 0, #f0f0f0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f0f0f0));
  background-image: linear-gradient(to bottom, #ffffff 0, #f0f0f0 100%);
  background-repeat: repeat-x;
}

.al-menu > ul > li > a {
  border-bottom: 3px solid rgba(0,0,0,0);
}

.al-menu > ul > li > a:hover {
  border-bottom: 3px solid #5bc2ef;
}

.al-menu .sub-menu {
  min-width: 150px;
  border: 1px solid #dadada;
  padding: 5px 0 0 0;
}

.al-title {
  padding: 0 0 10px 0;
}

tr.inactive {
  background-color: #efefef;
  color: #999999;
}

.table-basic ul li {
  padding-bottom: 0;
  line-height: 18px;
}

.table-basic ul li ul li {
  padding-left: 25px;
}

.expanded-helper {
  font-size: 12px;
}

.al-info-box {
  border: 1px solid #dadada;
  font-size: 14px;
  padding: 4px;
  display: table;
  margin-bottom: 4px;
  width: 100%;
}

.al-info-box .al-row {
  display: table-row;
}

.al-info-box .al-row > div {
  display: table-cell;
  padding-right: 10px;
  padding-top: 2px;
}

.al-info-box .al-row:not(:last-child) > div {
  border-bottom: 1px dashed #7193b33d;
}

.al-info-box .al-label {
  color: #7193b3;
  width: 160px;
}

.al-info-box .al-content {
  min-width: 300px;
}

.al-form-grid {
  display: flex;
  flex-wrap: wrap;
}
.al-form-column-wide {
  min-width: 60%;
  flex-grow: 1;
}
.al-form-column-narrow {
  width: 320px;
  padding-left: 10px;
}

@media only screen and (min-width: 900px) {
  .form-basic.search, .form-basic.search .form-inline {
    display: flex;
  }
}

.form-basic.search div:not(:last-child) {
  padding-right: 3px;
}

.form-basic.search .form-control {
  padding: 3px;
  line-height: 20px;
  width: 100%;
  min-width: 95px;
}

.form-basic.search .btn {
  margin-bottom: 2px;
  margin-top: 17px;
}

.form-basic.search .help-block {
  font-size: 12px;
  margin: 0 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#addressSearch {
  z-index: 999;
  min-height: 32px;
}
.meeting-title {
  font-size: 18px;
  color: #333333;
}

.registration-warning {
  font-weight: bold;
  color: #b81900;
}

em.action {
  color: #1c94c4;
  font-size: 16px;
  font-weight: bold;
  font-style: normal;
}

/* The e-ID ceremony modal, worn by Smart-ID and Mobiil-ID alike.
   Dark surface on purpose: the white QR card is the one thing the member has to aim a
   camera at, and maximum contrast around it is what a phone camera locks onto fastest.
   Every colour pair below is measured against #0e1b23 and clears WCAG AA. */
.ceremony-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100100;
  background: rgba(4, 14, 20, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 16px;
}
.ceremony-modal {
  position: relative;
  width: 100%;
  max-width: 468px;
  background: #0e1b23;
  border-radius: 18px;
  padding: 26px 24px 18px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(3, 12, 18, 0.5);
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}
.ceremony-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6d8894;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.ceremony-close:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.ceremony-close[disabled] {
  opacity: 0.3;
  cursor: default;
}
.ceremony-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5bc2ef;
  font-weight: 700;
  margin: 0 0 14px;
}
.ceremony-title {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  color: #fff;
  margin: 0 0 20px;
}
.ceremony-title-error {
  color: #ffb3ad;
}

/* The QR is fixed at the size SK's 6px-per-module minimum requires for a ~200 character
   device link (65 modules). A CSS-resized QR is what stops phone cameras locking on, so
   the modal is sized to hold it whole, and on a viewport too narrow for that the card
   goes edge to edge rather than scaling inside the modal's padding as well. Under about
   410px there is no width left to give and the code does drop below the floor, which is
   survivable because a coarse pointer defaults to the app and keeps it one tap away. */
.ceremony-qrcard {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin: 0 0 18px;
}
.ceremony-qr,
.ceremony-qr-placeholder {
  width: 390px;
  height: 390px;
  max-width: 100%;
  margin: 0 auto;
}
.ceremony-qr svg {
  width: 100%;
  height: 100%;
  display: block;
  /* The renderer emits no fill attributes, so the modal's white text colour would
     otherwise inherit down and leave a white code on a white card. */
  fill: #111;
}
.ceremony-qr-placeholder {
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, #eee, #eee 8px, #f6f6f6 8px, #f6f6f6 16px);
}
.ceremony-qr-help {
  font-size: 13px;
  color: #5c6d76;
  margin: 12px 0 0;
}

/* With linked signing there is no verification code, so this string is the only thing
   tying the phone's PIN prompt to this site. It gets the screen, not a footnote. */
.ceremony-verify {
  border: 1.5px solid #5bc2ef;
  border-radius: 14px;
  background: rgba(91, 194, 239, 0.07);
  padding: 20px 18px;
  margin: 0 0 18px;
}
.ceremony-verify-label {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #5bc2ef;
  font-weight: 700;
  margin: 0 0 10px;
}
.ceremony-verify-value {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: 0 0 12px;
}
.ceremony-verify-warning {
  font-size: 13px;
  color: #9fb8c4;
  margin: 0;
}
.ceremony-signer {
  font-size: 13px;
  color: #9fb8c4;
  margin: 0 0 16px;
}

/* Mobiil-ID's control code is the whole of that ceremony's security: the member's only
   check that the PIN prompt now on their phone belongs to this signature. It is read off
   one screen while looking at another, so it is set at a size that survives that. */
.ceremony-verify-code {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 14px;
}

.ceremony-form {
  text-align: left;
  margin: 0 0 18px;
}
.ceremony-field {
  margin: 0 0 14px;
}
.ceremony-label {
  display: block;
  font-size: 13px;
  color: #9fb8c4;
  margin: 0 0 6px;
}
.ceremony-group {
  display: flex;
  align-items: stretch;
}
.ceremony-prefix {
  display: flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #9fb8c4;
  font-size: 16px;
}
.ceremony-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  /* Under 16px iOS Safari zooms the page in on the focused field and does not zoom back
     out, which leaves the rest of the ceremony off screen. */
  font-size: 16px;
  line-height: 1.4;
}
.ceremony-group .ceremony-input {
  border-radius: 0 10px 10px 0;
}
.ceremony-input:focus {
  border-color: #5bc2ef;
}
.ceremony-input[readonly] {
  color: #9fb8c4;
  background: rgba(255, 255, 255, 0.03);
}

.ceremony-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  padding: 8px 17px;
  margin: 0;
  font-size: 14px;
  color: #cfe3ec;
}
/* Clipped rather than hidden: display:none or [hidden] drops the node out of the
   accessibility tree and the state change stops being announced at all. */
.ceremony-pill-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}
.ceremony-progress {
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin: 18px 0 0;
}
.ceremony-progress i {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: 4px;
  background: #5bc2ef;
  animation: ceremony-slide 1.6s ease-in-out infinite;
}
@keyframes ceremony-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(240%); }
}

.ceremony-primary {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #5bc2ef;
  color: #06212e;
  font-size: 16px;
  font-weight: 700;
  line-height: 48px;
  min-height: 48px;
  padding: 0 20px;
  margin: 0 0 6px;
  cursor: pointer;
  text-decoration: none;
}
.ceremony-primary:hover,
.ceremony-primary:focus {
  background: #7fd0f4;
  color: #06212e;
  text-decoration: none;
}

.ceremony-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 22px;
  margin: 16px -24px -18px;
  padding: 8px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.ceremony-foot a,
.ceremony-foot button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: #8fb0bd;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.ceremony-foot a:hover,
.ceremony-foot button:hover:not([disabled]) {
  color: #fff;
  text-decoration: underline;
}
.ceremony-foot button[disabled] {
  opacity: 0.35;
  cursor: default;
}

.ceremony-modal :focus-visible {
  outline: 2px solid #5bc2ef;
  outline-offset: 2px;
}

@media (max-width: 500px) {
  .ceremony-backdrop {
    padding: 0;
    align-items: stretch;
  }
  .ceremony-modal {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    padding: 22px 12px 14px;
  }
  .ceremony-qrcard {
    padding: 6px;
    margin: 0 -12px 18px;
    border-radius: 0;
  }
  .ceremony-foot {
    margin: 16px -12px -14px;
    padding: 8px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ceremony-progress i {
    animation: none;
    width: 100%;
  }
}