/* edifact-specific styles */

div.com + div {padding:0 0 0 0.5rem; margin:0 0 0 50px; border-left:1px solid var(--blue-medium);}
div.elm {margin:0.5rem; min-height:1.25rem;}  /* min-height for custom specs */
div.elm > div:first-child {display:inline-block; width:40px !important; font-weight:500;} /*tag*/
div.elm > div:nth-child(2) {display:inline-block; padding-bottom:0.3rem; color:var(--green-dark);} /*name*/
div.elm.simple > div:nth-child(2) {color: black; display: block;} /*restriction description*/
div.elm.simple > div:first-child {width: auto;}
div.elm.simple.internal { display: none; }
div.elm.simple.internal > div:first-child {color: #b80000;text-decoration: underline;} /*restriction description*/
div.elm > div:nth-child(3) {display:flex; gap:0.5rem; margin-bottom:0.5rem;} /*sts rpt*/

div.elm > div:nth-child(3) > span,
div.aggr > div > div:nth-child(1) > span,
.documentation.html span.bubble,
.documentation.html span.bubble-right {line-height:1.4rem; padding:0 0.5rem; border-radius:0.6rem; font-size:0.85rem; background:var(--gray-light); border:1px solid var(--gray-normal);}
.documentation.html span.bubble, .documentation.html span.bubble-right {float:left; margin-right:0.4rem; margin-bottom:0.2rem;}
.documentation.html span.bubble-right {float: right;}
.documentation.html div.bubbles {display: inline-flex;}
.documentation.html b {font-weight: 500;}

div.elm.e.edi > div:nth-child(3) > span:nth-child(2):before {content:"Type: ";}
div.elm.e.edi > div:nth-child(3) > span:nth-child(3):before {content:"Length: ";}

div.elm > a {clear:left; display:block; margin-top:0.3rem; font-size:90%; color:var(--blue-normal);} /*codelist*/

div.elm > div:nth-child(3),
div.elm > div:nth-child(4), /* purpose*/
div.elm.simple > div:nth-child(2),
div.elm > a {
  margin-left:40px;
}

/* segment view */
#view-segment .aggr > a > span {width:auto !important; display:inline-block !important;}

/* directory view */

#view-directory .search input {width:20%; min-width:150px;}

/* subset-specific styles */

#container.subset header, 
#container.subset #sidebar,
#container.subset #breadcrumbs {display:none !important;}

#container #preview_note {display: none;}
#container.subset.preview #preview_note {display: block; padding:0.5rem 1rem; background:#ff9; color:var(--text-color); border-bottom:1px solid #ff0;}

#container.subset main {padding:1.5rem;}
#container.subset #content {flex: 1; margin: 0 auto; max-width: 1000px;}
div.com2 div.elm { margin-left: 3rem; }

.subset_versions .with_note {display:flex; gap:0.5rem; align-items:center; cursor:pointer; line-height:1.4rem;}
.subset_versions .with_note::after {content:"note"; font-size:80%; color:var(--blue-normal);}
.subset_versions .version_note {display:none; padding:0.5rem 0; font-size:0.9rem;}

div.note {margin-top:0.5rem; margin-bottom:0.5rem; color:var(--text-color); font-style:italic; font-size:90%; background: #fffee3; border: 1px solid #918c00; padding:10px; border-radius:3px; margin-top:10px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);}
div.note > label {font-weight:bold; font-style:normal;}
span.note, li.note {background:var(--yellow-bright) !important; border-color:#918c00 !important; font-weight:bold; color:var(--text-color); cursor:default;}
span.note.o {background:#fdfdfd !important; border-color:var(--gray-normal) !important; font-weight:normal;}

div.seg .example p.data {color:#000; font-family:"Courier new"; margin-bottom:0;}
div.seg .example p.note {color:var(--text-color); font-size:0.95em; padding:0 0 0.5rem 0;}

fieldset {margin-top:0.5rem;}
fieldset legend, .documentation.html .caps {font-weight:bold; font-size:1.1rem; font-variant:small-caps; text-transform:lowercase; margin-bottom: 0px;}

fieldset.constraint > div {color:var(--text-color); background:#fdfdfd; border:1px solid var(--gray-normal); padding:0.5rem; margin-top:0.5rem; border-radius:4px;}

fieldset.constraint.enum > div {display:flex; flex-direction:column; gap:0.3rem;}
fieldset.constraint code, .documentation.html .enumeration code {display:inline-block; width:fit-content; vertical-align:top; padding:0.2rem 0.4rem; min-width:2.5rem; text-align:center; margin:0.15rem; border-radius:0.25rem; background:var(--green-normal); color:#fff;}
.documentation.html .enumeration.gray { background-color:#eee; color:#000; padding:0.25rem 0.5rem;}
.documentation.html .simple.pattern table td:first-child {width:9.5rem; vertical-align:top;} 

fieldset.constraint.pattern code, .documentation.html .pattern code {background:var(--gray-darker); color:#fff;}
fieldset.constraint dfn {display:inline-block; padding:0.15rem 0.4rem; font-style:normal;}
fieldset.constraint dfn > label {display:inline-block; vertical-align:top; margin-left:0.4rem; padding:0.15rem 0.5rem; background:#fff; color:#000; border:1px solid #000; border-radius:0.6rem; font-size:85%; text-transform:uppercase;}
fieldset.constraint dfn > label.R {background:#000; color:#fff;}
fieldset.constraint.enum p:not(:last-child) {margin-bottom:0.5rem;}
fieldset.constraint .footnote {color:#000; font-size:0.85rem;}
fieldset.constraint .cd-note {display:block; margin-top:0.15rem; font-size:90%}
fieldset.constraint .cd-note:before {content:" *** ";}

.disabled {text-decoration: line-through; opacity: 0.6;}

div.elm.X  > div:nth-child(2)::after {content: "Not used"; padding:0.15rem 0.5rem; margin-left:0.5rem; font-weight:bold; color:var(--text-color); font-size:80%; background:var(--raspberry-light); border:1px solid #918c00; border-radius:0.6rem;}
div.elm.X  > div:nth-child(3), div.elm.X  > div:nth-child(4), div.elm.X  > a {display: none;}

/* codelist view */

.codelist table {width:auto;}

/* mobile styles */
@media all and (max-width:768px){
  div.com + div {padding:0; border-left:0; margin-left:45px;}
  div.elm {margin:0.25rem 0.5rem 0.75rem 0;}
  div.elm > div:first-child {width:40px}
  #view-message div.elm > div:first-child, .accordion-structure div.elm > div:first-child {width:45px}
  div.elm > div:nth-child(3),
  div.elm > div:nth-child(4), 
  div.elm > a {
    margin-left:45px;
  }
  div.elm > div:nth-child(3) > span {padding:0 0.25rem;}
}