h3 {font-size:1.1rem; margin:0;}
h4 {margin-top:1rem; margin-bottom:0.5rem; font-weight:500;}
ul {list-style-type:none;}

span.a {cursor:pointer; color:var(--blue-normal);}
.search {margin-bottom:0.5rem; padding:0 !important;}
.search input {text-indent:0.15rem; border-radius:4px; background:#fff url(/img/common/bx-icons/search-alt-2_gray.svg) no-repeat 97% center;}

#menu-view {position:absolute; right:1rem; width:calc(100% - var(--left-menu-width) - 3rem); top:3.5rem; z-index:99; background:#fff; color:var(--text-color); box-shadow:0 0 5px #ccc;}
#menu-view > .close {position:absolute; top:0.75rem; right:1rem; cursor:pointer;}
#menu-view > .next {position:absolute; bottom:0.75rem; right:1rem; cursor:pointer;}
#menu-view > div {display:flex; flex-direction:column; box-shadow:0.2rem 0.2rem 0.4rem var(--gray-medium);}
#menu-view .view > h3 {padding:0.75rem 1rem; border-bottom:1px solid var(--gray-normal);}
#menu-view .view > div {padding:1rem;}
#menu-view .buttons {margin-top:1rem; display:flex; gap:0.5rem; align-items:center;}

#img-frame {display:none; position:absolute; z-index:99; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; color:#fff; cursor:pointer;}
#img-frame img {max-height:95vh; border-radius:4px;}

/* shared styles */
.itemlist:not(.full-page) {
  position:absolute; padding:1rem; 
  max-width:min(600px, 80vw); min-width:min(400px, 90vw); max-height:calc(70 * var(--vh)); overflow:auto; 
  background:#fff; border:1px solid var(--gray-normal); border-radius:4px; box-shadow:1px 1px 5px var(--gray-medium);
}
.itemlist > div {text-align:left;}
.itemlist h4 {margin:0 0 0.6rem 0;}
.itemlist div + h4 {margin-top:0.5rem;}
/*.itemlist p:not(:last-child) {margin-bottom:0.5rem;}*/
.itemlist > .items {display:flex; flex-wrap:wrap; gap:0.25rem; padding-bottom:1px;}
.itemlist > .items > * {overflow:hidden; text-overflow:ellipsis;}
.itemlist > .items.per-row-1 > * {width:100%; padding-left:0.5rem;}
.itemlist > .items.per-row-2 > * {width:calc((100% - 1 * 0.25rem) / 2);}
.itemlist > .items.per-row-3 > * {width:calc((100% - 2 * 0.25rem) / 3);}
.itemlist > .items.per-row-4 > * {width:calc((100% - 3 * 0.25rem) / 4);}
.itemlist > .items.per-row-5 > * {width:calc((100% - 4 * 0.25rem) / 5);}
.itemlist:not(.full-page) > .items.per-row-1 > * {text-align:left;}

.itemlist a, .itemlist span {display:block; text-align:center; padding:0.4rem 0.4rem; border-radius:4px;}
.itemlist a {background:var(--gray-light); border:1px solid var(--gray-normal);}
.itemlist a:hover {background:var(--blue-bright); color:#fff;}
.itemlist > .items span {background:var(--blue-bright); color:#fff;}

#siblings .search-input {width:100%;}
#siblings.itemlist {width:700px;}

.alert > button.close {padding:unset; background:unset; color:unset; float:right;}

/* index view */

/* directory view */
div.dir {display:flex; flex-direction:column; gap:0.25rem; width:100%; overflow:visible !important;} /* overflow:visible safari/chrome fix */
div.dir .search {margin-top:-2rem; text-align:right;}
.dir-tabs {display:flex; gap:0.25rem;}
.dir-tabs > a {width:calc((100% - 4 * 0.25rem) / 5); text-align:center; background:var(--gray-darker); color:#fff; padding:0.5rem 0; border-radius:4px;}
.dir-tabs > a:hover {background:var(--blue-normal) !important;}

.aggr > a {display:flex; gap:0.5rem; align-items:center; width:100%; font-size:1.1rem; line-height:1.3rem; padding:0.5rem 0.5rem; background:var(--gray-light); border:1px solid var(--gray-normal); border-radius:4px;}
.documentation.html .bordered {display:flex; gap:0.25rem; width:100%; padding:0.5rem; margin:0.25rem 0; border:1px solid var(--gray-normal); border-radius:4px;}
.documentation.html .bordered.column { flex-direction:column; align-items:flex-start; gap:0.5rem;}
.documentation.html .simple {margin:0.5rem 0;} 
.documentation .disabled { text-decoration: none; }

#history table {width:100%; border-collapse:collapse;}
#history table td {border:1px solid var(--gray-darker); padding:0.25rem;}
#history table > thead td {background: var(--gray-light); font-weight:bold; font-size:0.8rem;}
#history table > tbody td {vertical-align:top;}
#history table > tbody td:first-child {text-wrap:nowrap; width:5rem;}

.documentation .show-on-print { display: none; }
.documentation.html .aggr > a:hover {box-shadow:#aaa 0 0 3px;}
.documentation.html.xml > .aggr > a:hover {box-shadow:unset;}

.modal-dialog { width: 80%; max-width: 1000px; }

.aggr > a > span:first-child {width:3.5rem;} /*tag-name*/
.aggr > a > span:nth-child(2) {flex:1;} /*desc*/
.aggr.grp > a > span:nth-child(2) {display:flex; align-items:center; flex-wrap: wrap; gap:0.25rem;} /*desc*/
.aggr > a > span:nth-child(3) {width:3rem; min-width:fit-content; text-align:left;} /*sts rpt*/

div.seg > a, .g_s {background:var(--blue-normal); color:#fff;}
div.grp > a, .g_g {background:var(--blue-light); color:var(--blue-normal); border-color:var(--blue-medium);}
div.grp.custom > a { background:var(--orange-bright); }
.accordion-structure.documentation.html { margin-bottom: 0.25rem; }

.doc-dropdown { border: none; background-color: inherit; padding: 0px; color: var(--blue-normal); }
.doc-dropdown:hover { background-color: inherit; color: var(--blue-bright); }

.g_g, .g_s {padding:0 0.3rem; border-radius:4px;}
.g_g {border-width:1px; border-style:solid;}
div.aggr > div {display:flex; flex-direction:column;}
div.aggr > div > div:first-child {min-height:40px; line-height:1.4rem; margin:0 0.25rem 0 0.5rem; padding:0.5rem; border-width:0 1px 1px 1px; border-style:solid; border-radius:0 0 3px 3px;}
div.grp > div > div:first-child {border-color:var(--blue-medium);}
div.seg > div > div:first-child {border-color:var(--blue-normal);}
div.grp > div > div:first-child, div.seg > div > div:first-child {padding-left:0.5rem;}
div.aggr > div > div:first-child > span {float: right; margin-left: 0.25rem;}
div.aggr > div > div:first-child > span {padding:0 0.6rem; line-height:1.4rem; font-size:0.85em; background:var(--gray-light); color:#333; border-radius:12px; border:1px solid var(--gray-normal);}
/*
div.aggr > div > div:first-child > span.path { font-size: 0.8em; margin-bottom: 1em; }
div.aggr > div > div:first-child > span.path::after{ content: "\a"; white-space: pre; }
*/
div.aggr.ubl > div > div:first-child > span:first-child:before,
div.aggr.edi > div > div:first-child > span:first-child:before {content:"Max repeat: ";}

div.aggr > div > div:nth-child(2) {display:flex; flex-direction:column; padding:0.5rem 0 0.1rem 0.5rem; margin:0 0 0.1rem 1rem; border-left-width:1px; border-left-style:solid; border-color:var(--blue-medium);}
div.grp > div > div:nth-child(2) {display:flex; flex-direction:column; gap:0.25rem; border-color:var(--blue-medium);}

/* message view */  
.documentation.html, #view-message, #view-segment, .accordion-structure {display:flex; flex-direction:column; gap:0.25rem;}
#view-message { margin-bottom: 0.25em; }
.documentation.html .xml-path {font-size:80%; color:#666; margin-bottom:0.5rem; word-break:break-word;}
.documentation.html div.aggr > a + div {display:none;}
.documentation.html div.aggr > a + div {display:none;}
.documentation.html .aggr.at > a {border-color:var(--yellow-normal); background-color: #fffff3; color: #333;}
.documentation.html.xml .aggr a span:first-child {width:auto;}
.documentation.html.xml .aggr a span:last-child {flex:none; margin-left:auto; min-width:2rem;}
.documentation.html.xml > .aggr:first-child > a span:last-child {display:none;}/* no status&repeat for the root element */
.documentation.html div.group > a { background: var(--gray-light); }

.documentation.html div.elm > div:first-child {width:auto;}
/*.documentation.html div.elm > div:nth-child(2) {padding-left:0.5rem;}*/ /*name*/
.documentation.html table td {padding:0.3rem 0 0.3rem 0.4rem;}

.documentation.html .special-char-font { font-size: 1rem; }

/* codelist view */
.codes {margin-top:20px;}
.codelist table {width:auto;}
.codelist td {padding-bottom:0.5rem;}
.codelist .cd {padding-right:0.5rem; vertical-align:top; font-weight:500; color:var(--gray-darkest);}
.codelist .name {color:var(--green-dark);}
.codelist .desc {margin-top:0.25rem; font-size:90%;}
.codelist .desc:empty {display:none;}

/* banner styles */ 
#layer-ad {position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
#layer-ad > .bg {position:fixed; background:#333; opacity:0.85; width:100%; height:100%; z-index:101; cursor:pointer;}
#layer-ad > .ad {position:fixed; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; width:100%; z-index:102; backdrop-filter: blur(2px);}
#layer-ad > .ad > div {position:relative; max-width:720px; background:#fff; box-shadow:5px 5px 10px #222;}
#layer-ad > .ad .close {cursor:pointer; position:absolute; z-index:99; right:0.5rem; top:0.5rem; display:flex; align-items:center; justify-content:center; height:25px; width:25px; font-size:1rem; background:#fff; color:#333; border:1px solid var(--gray-darker);}
#layer-ad > .ad .close:hover {background:var(--raspberry-dark); color:#fff;}
#layer-ad > .ad img {display:block; width:100%;}
#layer-ad > .ad .btn-wrapper {position:absolute; display:flex; justify-content:center;}
#layer-ad > .ad .rounded-btn {display:flex; width:fit-content; align-items:center; justify-content:center; height:2.5rem !important; border-radius:1.25rem; padding:0 2rem; font-weight:bold; color:#fff; background-color:var(--green-normal); border:2px solid #fff; text-shadow:-1px -1px 0 rgb(0,0,0,0.25);}
#layer-ad > .ad .footer {width:100%; border-top:1px solid var(--gray-normal); background:#fff; text-align:center; font-size:0.8rem; padding:0.5rem;}

#magicbox {display:flex; padding:0.25rem; border:2px solid var(--gray-normal); border-radius:4px;}
#magicbox > div {padding:0.5rem 0.25rem; text-align:center; font-size:0.8rem; color:var(--gray-darker); border:2px dashed var(--gray-normal); border-radius:4px; line-height:150%;}
#magicbox > div:hover {background:#fff; color:var(--text-color);}

#demo-box {width:100%;}
#demo-box > button {max-width:unset; width:100%;}
#demo-box > div {position:absolute;}
#demo-box > div > div {position:relative; display:flex; flex-direction:column; width:fit-content; background:#fff; border:1px solid var(--gray-normal); box-shadow:1px 1px 5px #aaa;}
#demo-box > div a {line-height:1rem; padding:0.5rem 1rem;}
#demo-box > div a:hover {background:var(--blue-light);}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus, textarea:focus, input:focus {font-size: 16px;}
}
/* mobile styles */
@media all and (max-width:768px){
#menu-view {width:calc(100% - 1rem); right:0.5rem;}
#layer-ad > .ad a {font-size:1rem !important;}
.itemlist:not(.full-page) {left:0.5rem; width:calc(100% - 1rem) !important; max-width:unset !important;}
#siblings.itemlist {left:0; width:100% !important;}
.itemlist:not(.full-page) a {font-size:0.9rem;}
.itemlist.full-page a {font-size:0.95rem; padding:0.4rem 0.3rem;}
/* message view  */
div.aggr > div > div:nth-child(2) {margin-left:0.4rem; padding-left:0.5rem; border-left:0;}
/* directory view */
div.dir-tabs {font-size:0.9rem; word-wrap:normal;}
/* codelist view */
div.codelist {padding-left:0.5rem;}
}


@media all and (max-width:480px){
div.dir-tabs {font-size:0.8rem;}
.itemlist:not(.full-page) a {font-size:0.85rem;}
}

@media print {
  .documentation .show-on-print { display: block; }
  .documentation .hide-on-print, .documentation #container.hide-on-print { display: none; }
}