:root {
  --dtsb-modal_top: 20%;
  --dtsb-modal_left: 50%;
  --dtsb-modal_width: 500px;
  --dtsb-modal_margin-left: -250px;
  --dtsb-modal_width-wide: 800px;
  --dtsb-modal_margin-left-wide: -400px;
  --dtsb-modal_background: white;
  --dtsb-modal_box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  --dtsb-modal_border: 1px solid rgba(255, 255, 255, 0.15);
  --dtsb-modal_border-radius: 5px;
  --dtsb-modal_padding: 2em;
  --dtsb-modal-background_background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  --dtsb-modal-button_background: #f6f6f6;
  --dtsb-modal-button_background-hover: #ebebeb;
  --dtsb-modal-button_border: 1px solid rgba(0, 0, 0, 0.175);
}
:root.dark {
  --dtsb-modal_background: rgb(33, 37, 41);
  --dtsb-modal_border: 1px solid rgb(255, 255, 255, 0.2);
  --dtsb-modal-background_background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
  --dtsb-modal-button_background: rgb(47, 52, 56);
  --dtsb-modal-button_background-hover: rgb(64, 69, 73);
  --dtsb-modal-button_border: 1px solid rgba(255, 255, 255, 0.175);
}

div.dtsb-modal {
  position: fixed;
  top: var(--dtsb-modal_top);
  left: var(--dtsb-modal_left);
  width: var(--dtsb-modal_width);
  margin-left: var(--dtsb-modal_margin-left);
  background-color: var(--dtsb-modal_background);
  border-radius: var(--dtsb-modal_border-radius);
  border: var(--dtsb-modal_border);
  box-shadow: var(--dtsb-modal_box-shadow);
  z-index: 2003;
  box-sizing: border-box;
  padding: var(--dtsb-modal_padding);
}
div.dtsb-modal.dtsb-modal_wide {
  width: var(--dtsb-modal_width-wide);
  margin-left: var(--dtsb-modal_margin-left-wide);
}
div.dtsb-modal button.dtsb-modal-close {
  position: absolute;
  top: 1em;
  right: 1em;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}
div.dtsb-modal p {
  margin: 1em 0 3em;
}
div.dtsb-modal div.dtsb-modal-header {
  font-size: 1.3em;
  font-weight: bold;
}
div.dtsb-modal div.dtsb-modal-body {
  margin: 2em 0 0 0;
}
div.dtsb-modal div.dtsb-modal-buttons {
  text-align: right;
  margin-top: 2em;
}
div.dtsb-modal div.dtsb-modal-buttons button {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: var(--dtsb-modal_border-radius);
  color: inherit;
  border: var(--dtsb-modal-button_border);
  background: var(--dtsb-modal-button_background);
  cursor: pointer;
}
div.dtsb-modal div.dtsb-modal-buttons button:hover {
  background-color: var(--dtsb-modal-button_background-hover);
}

div.dtsb-modal-background {
  z-index: 2002;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dtsb-modal-background_background);
}

div.dtsb-field {
  display: grid;
  grid-template-columns: 30% 70%;
  gap: 1em;
  margin-top: 1em;
}
div.dtsb-field:first-child {
  margin-top: 0;
}
div.dtsb-field div.dtsb-field-value > div {
  margin-bottom: 0.5em;
}
div.dtsb-field div.dtsb-field-info {
  font-size: 0.8em;
  line-height: 1.3em;
  margin: 0.5em 0 0 0;
}
div.dtsb-field div.dtsb-field-info:empty {
  margin: 0;
}
div.dtsb-field div.dtsb-field-error {
  font-size: 0.8em;
  line-height: 1.3em;
  margin: 0.5em 0 0 0;
}
div.dtsb-field div.dtsb-field-error:empty {
  margin: 0;
}
div.dtsb-field span {
  display: inline-block;
  padding-left: 1em;
}
div.dtsb-field input[type=text] {
  border: var(--dt-input_border);
  border-radius: var(--dt-input_border-radius);
  padding: var(--dt-input_padding);
  background-color: var(--dt-input_background);
  color: var(--dt-input_color);
  width: 96%;
  box-sizing: border-box;
  margin-top: -6px;
}
div.dtsb-field input[type=checkbox] {
  border: var(--dt-input_border);
  margin: 0 0.75em 0 0;
}

button.dtsb-button {
  padding: 0.25em 1em;
  cursor: pointer;
  border: var(--dtb-button_border);
  border-radius: var(--dtb-button_border-radius);
  box-shadow: var(--dtb-button_box-shadow);
  background: var(--dtb-button_background);
  color: var(--dtb-button_color);
}
button.dtsb-button:hover {
  border: var(--dtb-button_border-hover);
  border-radius: var(--dtb-button_border-radius-hover);
  box-shadow: var(--dtb-button_box-shadow-hover);
  background: var(--dtb-button_background-hover);
  color: var(--dtb-button_color-hover);
}

div.dtsr-jqui-modal div.dtsr-jqui-modal-content {
  padding-top: 1em;
}
div.dtsr-jqui-modal div.dtsb-modal-buttons {
  padding-top: 1em;
  text-align: right;
}