@use '@carbon/styles/scss/spacing';
@use '@carbon/styles/scss/type';
@import "~@openmrs/esm-styleguide/src/vars";
@import "../root.scss";

.mainWrapper {
  background-color: $ui-background;
  padding: 16px !important;
  margin: auto;
}

@media (max-width: 768px) {
  .mainWrapper {
    max-width: 100%;
    margin-top: 1rem;
  }
}

@media only screen and (min-width: 992px) {
  .mainWrapper {
    max-width: 90%;
  }
}

.headerText {
  font-size: 16px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: normal;
  font-weight: 400;
  padding-bottom: 4px;
  margin: auto;
}

.widgetHeaderContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
}

.widgetHeaderContainer > h4:after {
  content: ' ';
  display: block;
  width: 2rem;
  padding-top: 0.188rem;
  border-bottom: 0.375rem solid var(--brand-01);
}

.toggleButtons {
  width: fit-content;
  margin: 0 spacing.$spacing-03;
}

.formRenderContent {
  height: 84vh;
}

.formRenderContent > div {
  padding: 0;
}

.formRenderContent > div > p {
  padding: 0.5rem;
}

.renderTab > .tab-form {
  border: 0.01rem dotted #6f6f6f !important;
  padding: 0 0 1rem;
}

.formRenderDisplay {
  padding: 0;
  border: 0.01rem dotted #6f6f6f !important;
  margin-top: 0.5rem;
}

.formRenderDisplay > form > .mainContainer > .overflowContent {
  padding-bottom: 1rem !important;
}

.formRenderTitle {
  font-size: 25px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  color: #161616;
  margin-bottom: 16px;
}

.container > #tab-form {
  padding: 0;
}

.renderColumn {
  border-right: 1em;
}

.renderColumn > div > form,
.renderColumn > div > .finalJsonSchema {
  margin: -1rem;
  margin-top: -0.5rem;
}

.renderColumn > div > form .renderField {
  padding-top: 0.8rem;
  width: 400px;
}

.jsonEditor,
.finalJsonSchema {
  border: 0.01rem dotted #6f6f6f !important;
}


.viewMode h4 {
  float: left;
}

.viewMode button {
  float: right;
  display: none;
}

.show {
  display: block !important;
}

.hide {
  display: none;
}