[data-a11y-dialog-native] .dialog-overlay {
  display: none;
}
dialog[open] {
  display: block;
}
.dialog[aria-hidden="true"] {
  display: none;
}
.dialog-overlay {
  z-index: 2;
  background-color: rgba(0, 0, 0, 0.66);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.66);
}
.dialog-content {
  background-color: rgb(255, 255, 255);
  z-index: 3;
  position: fixed;
  top: 50%;
  left: 50%; 
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);  
  margin: 0;

  padding: 1em;
  max-width: 90%;
  width: 600px;
  border-radius: 6px;
  border:2px solid #000000;
  font-family:'proxima-nova', 'Montserrat', sans-serif; 
  font-size:1.125rem;
  font-weight:400;

  white-space: normal !important;
  word-wrap: break-word !important;
  max-height:100%;
  overflow-y:auto;

  -webkit-font-smoothing: subpixel-antialiased;
}
.dialog h1 {
  color:#0b5584;
  font-family:'proxima-nova', 'Montserrat', sans-serif; 
  font-size:1.125rem;
  font-weight:600;
  line-height:1.5;
  margin: 0;
}

@keyframes fade-in {
  from { opacity: 0;  }
  to { opacity: 1;  }
} 
@keyframes appear { 
  from { transform: translate(-50%, -40%); opacity: 0; }
  to { transform: translate(-50%, -50%); opacity: 1; }
} 
.dialog:not([aria-hidden='true']) > .dialog-overlay {
  animation: fade-in 200ms 1 both;
}
.dialog:not([aria-hidden='true']) > .dialog-content {
  animation: appear 400ms 150ms 1 both;
}

@media screen and (min-width: 700px) {
  .dialog-content {
    padding: 1em 2em 2em 2em;
  }
}
.dialog-overlay {
  background-color: rgba(43, 46, 56, 0.9);
}

.dialog-close {
  float:right;
  margin-top: -.5em;
  margin-right: -.5em;
  border: 0;
  padding: 0;
  background-color: transparent;
  font-weight: bold;
  font-size: 1.25em;
  width: 1.2em;
  height: 1.2em;
  text-align: center;
  cursor: pointer;
  transition: 0.10s;
}
@media screen and (min-width: 700px) {
  .dialog-close {
    margin-right: -1.25em;
  }
}

/* -------------------------------------------------------------------------- *\
 * Helpers
 * -------------------------------------------------------------------------- */

.link-like {
  background-color: transparent;
  text-decoration: underline;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* -------------------------------------------------------------------------- *\
 * Form styling
 * -------------------------------------------------------------------------- */

.dialog-content form {
  margin-top: 2em;
}

@media screen and (min-width: 700px) {
  .dialog-content form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

.dialog-content form label {
  font-weight: bold;
  margin: 5px 10px 5px 0;
  vertical-align: middle;
}

.dialog-content form input {
  font: inherit;
  padding: 0.25em;
  border: 1px solid silver;
  width: 100%;
  margin: 0.25em 0 1em;
}

@media screen and (min-width: 700px) {
  .dialog-content .dialogButtons input
 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    border-right: 0;
    width: auto;
    margin: 0;
  }
}

.dialog-close:hover,
.dialog-close:focus,
.dialog-close:active {
  outline: 3px solid #0b5584 !important;
}

.dialog-content .dialogButtons button
 {
  background-color:#0b5584;
  color:#ffffff;
  font-size: 1.125rem;
  font-weight:600px;
  width: 100%;
  max-width: 245px;
  border-radius: .375rem;
  white-space: normal !important;
  word-wrap: break-word !important;
  padding-top:0.125em;
  padding-bottom:0.125em;
  transition: 0.15s;
  border:2px solid transparent;
  margin:.25rem;
}

.dialog-content .dialogButtons button[disabled]
 {
  background-color: #fff;
  color: #545454;
  border: #545454 1px solid;
  box-shadow:none;
  outline:none;
}

.dialog-content .dialogButtons button:hover,
.dialog-content .dialogButtons button:focus
 {
  border:2px solid #ffffff;
  box-shadow:0 0 0px 3px #0b5584;
  color:#ffffff;
  outline:none;
}

.dialog-content .dialogButtons button[disabled]:hover,
.dialog-content .dialogButtons button[disabled]:focus
 {
  background-color: #fff;
  color: #545454;
  border: #545454 1px solid;
  box-shadow:none;
  outline:none;
}

.dialog-content .dialogButtons button:active
 {
  background-color:#ffffff;
  color:#0b5584;
  border:2px solid #ffffff;
  box-shadow:0 0 0px 3px #0b5584;
  text-shadow: 1px 0 #0b5584;
  outline:none;
}

.dialogButtonsFlexDiv{
  display: block;
}

.dialog-content .dialogButtons
 {
  margin-top: .5em; 
  text-align: right;
  margin-left:-.5rem;
}

@media screen and (min-width: 700px) {
  .dialogButtonsFlexDiv{
    display: flex;
    justify-content: flex-end;
  }

  .dialog-content .dialogButtons
 {
  margin-bottom:-1em;

  width: 50%;
  margin-right: .5rem;
  }
}

.dialog-content #dialogDescription-countdown-timer,
.dialog-content #dialogDescription-alert,
.dialog-content #dialogDescription-ok-cancel {
  margin-top: 0.89em;
}

.dialog-content hr{
  width:100%;
  margin-top:1em;
  margin-left:-1em;
  padding-left:1em;
  padding-right:1em;
  background-color:#ebebec;
  height: .1px;
}
@media screen and (min-width: 700px) {
  .dialog-content hr{
  margin-left:-2em;
  padding-left:2em;
  padding-right:2em;
  }
}