css/cygnet/cygnet--prefixed-for-drupal.css
#drupal-off-canvas [data-theme=cygnet] {
  font-family: 'RedHatText', Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: #151515;
  margin-top: 32px;
}

#drupal-off-canvas [data-theme=cygnet] a {
  color: #0066cc;
}

#drupal-off-canvas [data-theme=cygnet] h3 {
  margin: 0 0 16px 0;
  font-weight: 300;
  font-size: 18px;
}

#drupal-off-canvas [data-theme=cygnet] h3 > label {
  position: relative;
  top: 4px;
  margin-right: 16px;
}

#drupal-off-canvas [data-theme=cygnet] p {
  margin-top: 0;
  margin-left: 20px;
}

/* Set largest font-size for top level titles. */

#drupal-off-canvas [data-theme=cygnet] [data-schemapath=root] > h3 {
  font-size: 28px;
}

#drupal-off-canvas .je-cygnet-form-input-label {
  display: block;
  font-family: 'RedHatDisplay', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding-bottom: 4px;
}

#drupal-off-canvas [data-theme=cygnet] p.je-cygnet-form-input-label {
  font-weight: 300;
}

#drupal-off-canvas .je-cygnet-indented-panel {
  margin-bottom: 16px;
}

#drupal-off-canvas [data-theme=cygnet] input[type=text],
#drupal-off-canvas [data-theme=cygnet] input[type=url],
#drupal-off-canvas [data-theme=cygnet] select,
#drupal-off-canvas [data-theme=cygnet] textarea {
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid #d2d2d2;
  border-bottom: 1px solid #6a6e73;
  margin-left: 0 !important;
  margin-bottom: 4px !important;
  padding: 4px 8px !important;
  background-color: #fff !important;
  font-family: 'RedHatText', Helvetica, Arial, sans-serif;
  font-size: 16px;
}

#drupal-off-canvas [data-theme=cygnet] select {
  font-style: normal !important;
  font-size: 16px !important;
}

#drupal-off-canvas [data-theme=cygnet] input[type=text],
#drupal-off-canvas [data-theme=cygnet] input[type=url] {
  width: 80%;
}

#drupal-off-canvas .je-cygnet-indented-panel {
  border-radius: 3px;
}

/* Gray background on second-level objects and arrays. */

#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] .je-cygnet-indented-panel,
#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=array] .je-cygnet-indented-panel {
  border: 1px solid #d2d2d2 !important;
  padding: 16px 16px 0 16px !important;
  background-color: #f0f0f0;
  border-radius: 3px;
}

/* White background on objects beneath the second-level objects and arrays. */

#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] .je-cygnet-indented-panel .je-cygnet-indented-panel,
#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=array] .je-cygnet-indented-panel .je-cygnet-indented-panel {
  background-color: #fff;
}

#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] > .je-cygnet-indented-panel .je-cygnet-indented-panel,
#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=array] > .je-cygnet-indented-panel .je-cygnet-indented-panel {
  padding: 16px 16px 0 16px !important;
  background-color: #ffffff;
}

/* Objects and arrays nested two layers beneath the second level have no padding or borders.  */

#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] > .je-cygnet-indented-panel .je-cygnet-indented-panel .je-cygnet-indented-panel,
#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=array] > .je-cygnet-indented-panel .je-cygnet-indented-panel .je-cygnet-indented-panel {
  padding: 0 !important;
  border: 0 !important;
}

#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=array] > .je-cygnet-indented-panel > div > .je-cygnet-indented-panel {
  background-color: transparent;
}

/* Indent objects and arrays on the second level. */

#drupal-off-canvas [data-schematype=object] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object],
#drupal-off-canvas [data-schematype=object] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=array] {
  margin-left: 20px;
}

#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=array] .je-cygnet-indented-panel > .je-cygnet-indented-panel {
  border: 0 !important;
  margin-left: 0 !important;
}

/* Indent second-level rows. */

#drupal-off-canvas [data-theme=cygnet] > [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row {
  margin-left: 20px;
}

#drupal-off-canvas [data-theme=cygnet] > [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] {
  margin-left: 0;
}

/* Indent top-level string fields. */

#drupal-off-canvas [data-schemapath=root] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=string] {
  margin-left: 36px;
}


/* White background on second-level objects */

#drupal-off-canvas [data-schematype=object] > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] > .je-cygnet-indented-panel > [data-schematype=object] > .je-cygnet-indented-panel > div > div > .row > div > .je-cygnet-indented-panel {
  border: 1px solid #d2d2d2 !important;
  background-color: #ffffff;
  border-radius: 3px;
  margin-left: 20px !important;
}

#drupal-off-canvas .je-cygnet-indented-panel .je-cygnet-indented-panel h3 {
  font-size: 20px;
}

/* Indent panels adjacent to clickable panes. */
#drupal-off-canvas .je-cygnet-indented-panel div div .row [data-schematype=object] .patternkit-jsoneditor-clickable ~ .je-cygnet-indented-panel {
  margin-left: 20px;
}

#drupal-off-canvas .je-cygnet-indented-panel [data-schematype=array] > .je-cygnet-indented-panel {
  position: relative;
  margin-bottom: 0;
}

/* Apply gray border to panels inside arrays. */

#drupal-off-canvas [data-schematype=array] > .je-cygnet-indented-panel {
  border: 1px solid #d2d2d2 !important;
}

/* Remove gray border from panels inside arrays. */

#drupal-off-canvas [data-schematype=array] > .je-cygnet-indented-panel [data-schematype=array] > .je-cygnet-indented-panel {
  border: 0 !important;
}

/* Remove margin and padding from panels nested within child-editor. */

#drupal-off-canvas .je-cygnet-child-editor-holder > .je-cygnet-indented-panel {
  margin-bottom: 0;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

#drupal-off-canvas .je-cygnet-child-editor-holder > p {
  margin-left: 36px;
}

#drupal-off-canvas .je-cygnet-child-editor-holder > .je-cygnet-indented-panel > div > div > .row > [data-schematype=object] > .je-cygnet-indented-panel {
  padding: 0 !important;
}

#drupal-off-canvas [data-schematype="array"] .je-cygnet-indented-panel {
  padding-top: 0;
  padding-bottom: 0;
}

#drupal-off-canvas [data-schematype="object"] > .je-cygnet-indented-panel [data-schematype="object"] > .je-cygnet-indented-panel [data-schematype="array"] > .je-cygnet-indented-panel [data-schematype=array] > h3 + .je-cygnet-indented-panel {
  border-top: 0;
}

/* Apply borders to panels inside a nested array. */

#drupal-off-canvas [data-schematype="object"] > .je-cygnet-indented-panel [data-schematype="object"] > .je-cygnet-indented-panel [data-schematype="array"] > .je-cygnet-indented-panel [data-schematype=array] > .je-cygnet-indented-panel > div > .je-cygnet-indented-panel > div > .je-cygnet-child-editor-holder > .je-cygnet-indented-panel {
  padding: 16px !important;
  border: 1px solid #d2d2d2 !important;
  margin-bottom: 16px;
  margin-left: 36px !important;
}

#drupal-off-canvas [data-schematype="object"] > .je-cygnet-indented-panel [data-schematype="object"] > .je-cygnet-indented-panel [data-schematype="array"] > .je-cygnet-indented-panel [data-schematype=array] > .je-cygnet-indented-panel > div > .je-cygnet-indented-panel > div > .je-cygnet-child-editor-holder > .je-cygnet-indented-panel > div > div > .row {
  margin-left: 0;
}

/* Flexbox container query hack. */
/* https://heydonworks.com/article/the-flexbox-holy-albatross/ */

#drupal-off-canvas [data-theme=cygnet] .row {
  display: flex;
  flex-wrap: wrap;
  --multiplier: calc(30rem - 100%);
  gap: 10px;
  margin-left: 20px;
}

#drupal-off-canvas [data-theme=cygnet] .row > div {
  min-width: 48%;
  max-width: 100%;
  flex-grow: 1;
  flex-basis: calc(var(--multiplier) * 999);
  margin-bottom: 8px;
}

#drupal-off-canvas [data-theme=cygnet] .row > div:last-child {
  margin-bottom: 16px;
}

#drupal-off-canvas [data-theme=cygnet] .row > * > span {
  margin-left: 0 !important;
}

#drupal-off-canvas [data-theme=cygnet] .row > .col-md-3 {
  min-width: 23%;
}

#drupal-off-canvas [data-theme=cygnet] .row > .col-md-4 {
  min-width: 31%;
}

/* Button styles. */

#drupal-off-canvas [data-theme=cygnet] button,
#drupal-off-canvas [data-theme=cygnet] button > span {
  cursor: pointer;
}

#drupal-off-canvas [data-theme=cygnet] button {
  font-family: 'RedHatDisplay', Helvetica, Arial, sans-serif;
  color: #0066cc;
  border: 1px solid #0066cc;
  border-radius: 3px;
  background-color: #ffffff;
  font-size: 14px;
  padding: 6px 16px;
}

#drupal-off-canvas [data-theme=cygnet] button:hover {
  background-color: #0066cc;
  color: #ffffff;
}

#drupal-off-canvas [data-theme=cygnet] button[title=Collapse],
#drupal-off-canvas [data-theme=cygnet] button[title=Expand] {
  border: 0;
  border-radius: 3px;
  background-color: transparent;
  padding: 0;
}

#drupal-off-canvas .je-cygnet-header-button-holder {
  padding: 8px 0 0 0;
  margin-left: 20px;
}

#drupal-off-canvas [data-theme=cygnet] .json-editor-btn-add {
  border: 1px solid #0066cc;
  background-color: #0066cc;
  color: #ffffff;
  margin-bottom: 16px;
}

#drupal-off-canvas [data-theme=cygnet] .json-editor-btn-subtract,
#drupal-off-canvas [data-theme=cygnet] .json-editor-btn-delete {
  border: 1px solid #ee0000;
  color: #ee0000;
  margin-left: 16px;
  margin-bottom: 16px;
}

#drupal-off-canvas [data-theme=cygnet] .json-editor-btn-subtract:hover,
#drupal-off-canvas [data-theme=cygnet] .json-editor-btn-delete:hover {
  background-color: #ee0000;
  color: #ffffff;
}

#drupal-off-canvas [data-theme=cygnet] .json-editor-btn-moveup,
#drupal-off-canvas [data-theme=cygnet] .json-editor-btn-movedown {
  margin-left: 16px;
  margin-bottom: 16px;
}

#drupal-off-canvas [data-theme=cygnet] .json-editor-btntype-toggle {
  margin: 0 10px 0 0;
}

/* Accordion styles. */

#drupal-off-canvas [data-theme=cygnet] button[title=Collapse]::before {
  content: " ";
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: 3px;
  width: 7px;
  height: 7px;
  border: solid #151515;
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#drupal-off-canvas [data-theme=cygnet] button[title=Expand]::before {
  content: " ";
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 7px;
  height: 7px;
  border: solid #151515;
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
}

#drupal-off-canvas [data-theme=cygnet] button[title=Collapse] > span,
#drupal-off-canvas [data-theme=cygnet] button[title=Expand] > span {
  display: none;
}

/* Indent paragraphs inside root. */

#drupal-off-canvas [data-theme=cygnet] [data-schemapath=root] > p {
  margin-left: 20px;
}

#drupal-off-canvas [data-theme=cygnet] [data-schemapath=root] .form-control > p {
  margin-left: 0;
}

#drupal-off-canvas [data-theme=cygnet] [data-schematype="object"] [data-schematype="object"] p {
  font-size: 14px;
}

#drupal-off-canvas [data-theme=cygnet] [data-schematype="object"] [data-schematype="object"] p:last-child {
  margin-bottom: 0;
}

#drupal-off-canvas .je-cygnet-indented-panel > div:empty {
  margin-bottom: 16px;
}

/* Remove margins on embedded forms. */

#drupal-off-canvas [data-theme=cygnet] > div > .je-cygnet-indented-panel div div .row,
#drupal-off-canvas [data-theme=cygnet] > div > .je-cygnet-indented-panel div div .row > [data-schematype="object"],
#drupal-off-canvas [data-theme=cygnet] > div > .je-cygnet-indented-panel div div .row > [data-schematype="array"] {
  margin-left: 0;
}

/* Vertical tab styling. */

#drupal-off-canvas [data-schemapath^="root.header.aside"] > .je-cygnet-tab {
  margin-left: 20px;
}

#drupal-off-canvas [data-schemapath^="root.header.aside"][class^="col-md"] > .je-cygnet-tab,
#drupal-off-canvas [data-theme=cygnet] [data-schemapath^="root.header.aside"] .form-control {
  margin-left: 0;
}

#drupal-off-canvas [data-schemapath^="root.header.aside"] > .je-cygnet-tab > .content {
  margin-left: 165px !important;
}

#drupal-off-canvas .je-cygnet-indented-panel[data-schemapath^="root.header.aside"] {
  border: 1px solid #d2d2d2 !important;
}

#drupal-off-canvas .je-cygnet-indented-panel[data-schemapath^="root.header.aside"] > .je-cygnet-indented-panel > div > div > .row {
  margin-left: 0;
}

#drupal-off-canvas [data-schemapath^="root.header.aside"] > .je-cygnet-indented-panel > span:not(.je-cygnet-header-button-holder) > button:first-child,
#drupal-off-canvas [data-schemapath^="root.body.content"] > .je-cygnet-indented-panel > span:not(.je-cygnet-header-button-holder) > button:first-child {
  margin-left: 16px;
}

#drupal-off-canvas .je-cygnet-tabs {
  display: flex;
  position: relative;
  margin-top: 20px;
  left: 20px;
}
#drupal-off-canvas .je-cygnet-tabs__holder {
  width: 165px;
}
#drupal-off-canvas .je-cygnet-tabs__content {
  width: calc(100% - 185px);
}

#drupal-off-canvas .je-cygnet-tab {
  border: 0 !important;
  border-left: 1px solid #d2d2d2 !important;
  border-radius: 0 !important;
  font-size: 16px;
  font-weight: 300 !important;
  text-align: left !important;
}

#drupal-off-canvas .je-cygnet-tab,
#drupal-off-canvas .je-cygnet-tab > span {
  cursor: pointer !important;
}

#drupal-off-canvas .je-cygnet-tab--active {
  padding: 14px 16px 16px;
  border-left: 2px solid #ee0000 !important;
}

#drupal-off-canvas .je-cygnet-tab--inactive {
  padding: 16px;
}

#drupal-off-canvas [data-theme=cygnet] .patternkit-jsoneditor-clickable {
  cursor: pointer;
}
#drupal-off-canvas [data-theme=cygnet] .patternkit-jsoneditor-clickable label {
  cursor: inherit;
}

#drupal-off-canvas .patternkit-jsoneditor-clickable + div > .tabs {
  margin-left: 40px;
}
