@media (orientation:landscape) {
        :root {--orientation: landscape;}
}
@media (orientation:portrait) {
        :root {--orientation: portrait;}
}

pre {font-family:monospace}
:root {--logo-img-height:4em;}

body { overflow-y:scroll;
    background-color:#eff }

#margins {
    max-width: 200ex;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    background-color: white;
    border-radius: 2em
}
.clear-both {clear:both}
/* arrow 2197.  offset boxes signifying browser windows, 29c9 */
a[target=_blank]::after {display:inline-block; content:"\29c9"; padding-left:0.25ex; white-space:nowrap; text-decoration:none; font-size:80%}
a[target=_blank][download]::after {display:inline-block; content:"\21d3"; padding-left:0.25ex; white-space:nowrap; text-decoration:none}
img.rxmix-logo {max-height:3em}
img#rxmix-logo {max-height:3em; float:left}
.maingrid #mh1 {width:100%; text-align:center}
.maingrid img.rxmix-logo {max-height:var(--logo-img-height)}
div.rxmix-logo a {text-decoration:none}
div.banner-controls {max-width:50%; float:right; padding-top:1ex} /*padding accommodates focus rectangle*/
.maingrid div.banner-controls {max-width:100%; float:right}

fieldset {border: solid thin black; padding-left:1ex ; padding-bottom:1ex}
legend {background-color:#666; color:white; padding-left:1ex; padding-right:1ex; padding-top:1pt; padding-bottom:1pt; margin-left:1ex; margin-right:1ex}

a { text-decoration: underline}

.controls {width:100%; text-align: right; margin-top:0px; padding-top:0px}
.controls button {margin-right:1ex}
.controls a {margin-left:1ex; margin-right:1ex}

.apidocs {position:relative; float: left; margin-bottom:1ex; margin-top:1ex; padding-top:0px}

ul.quick-start {margin-top: 1ex; margin-right:1ex}
ul.quick-start li {border:solid thin gray;
    padding-top: 0.5ex;
    padding-bottom: 0.5ex;
    padding-left: 3pt;
    padding-right: 3pt;
    margin-bottom:1ex;
    border-radius:2px;
}

ul.quick-start li {background-color:white}

div.report-container {
    overflow-x: auto;
}
div.report-stale {
    /*color:gray;*/
    visibility: hidden;
}
table.report {
    background-color:white;
    border: solid medium gray;
    font-family: sans-serif;
    font-size: smaller;
    border-collapse: collapse;
    overflow:scroll;
}
div.report-stale table.report {
    /*border: solid thin lightgray;*/
    visibility: hidden;
}
p.stale {
    visibility: hidden;
}
a.download-link.stale {
    visibility: hidden;
}
table.report th {font-weight:bold;
    padding:0.5ex;
    border: solid thin gray;}
table.report tr.colgroups th {color:#cc00cc; font-size:larger}
table.report td {padding:0.5ex;
        border: solid thin gray;}
table.report .newcolgroup {border-left: solid medium gray;}

.help-step {padding-left:2ex; color: #666666}
/* 2611 is checkmark in box.  2610 is the box without the checkmark */
/*   */
.help-step-completed::marker {content: "\2713 "; color:green; font-size:larger}
.help-step-outstanding::marker {content: "\261E "; color:black; font-size:larger; font-weight:normal}
.help-step-outstanding ~ .help-step-outstanding::marker {content: " "; font-size:larger; font-weight:normal}
/*.help-step-outstanding:first-of-type::marker {content: "\261E "; color:black; font-size:larger; font-weight:normal}
.help-step-outstanding:first-of-type {font-weight:700; color:black}*/
/*.help-step-outstanding + .help-step-outstanding::marker {content: "\2610 "; color:#ccc; font-size:larger}*/
.help-step-outstanding {font-weight:700; color:black}
.help-step-outstanding ~ .help-step-outstanding {font-weight:400}
/*2705,2714*/

.help-list {margin-top: 1ex}
.help-list li + li {margin-top: 1ex}

table.wf-bubble-params {
    margin-top: 1ex;
    background-color:white;
    border: solid thin gray;
    font-family: sans-serif;
    font-size: smaller;
    border-collapse: collapse;
}
table.wf-bubble-params th {font-weight:bold;
    padding:1ex;
    border: solid thin gray;}
table.wf-bubble-params td {padding:1ex;
        border: solid thin gray;
        white-space: wrap;
}




table.fn-config-table {
    background-color:white;
    border: solid thin gray;
    font-family: sans-serif;
    font-size: smaller;
    margin-top: 1ex;
    margin-bottom: 1ex;
    border-collapse: collapse;
}
table.fn-config-table th {font-weight:bold;
    padding:1ex;
    border: solid thin gray;}
table.fn-config-table td {padding:1pt;
        border: solid thin gray;}

dialog h1 {font-family: sans-serif; font-size:larger; font-weight:bold}

details summary { cursor: default}

/* width=100vw states an intention. max-width=100% excludes vert scrollbar */
@media (orientation:landscape) {
 #wrap1 {display:grid;
    gap:1ex;
    margin:0; padding:0;
    overflow-x: hidden;
    min-height:100vh;
    width:100vw;
    max-width:100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2em var(--logo-img-height) min-content max-content auto 1em;
    grid-template-areas: "wf hamburger"
                        "wf mh"
                         "wf h"
                        "in in"
                        "r r"
                        "s s"
    }
#h1 details[open] summary {display:none}
#h1 {margin-left:1em}
}



@media (orientation:portrait) {
    #wrap1 {display:grid;
        gap:1ex;
       margin:0; padding:0;
       overflow-x: hidden;
       min-height:100vh;
       width:100vw;
       max-width:100%;
       grid-template-columns: max(100%);
       grid-template-rows: 2em var(--logo-img-height) min-content minmax(10em,auto) max-content auto 1em;
       grid-template-areas: "hamburger"
                            "mh"
                            "h"
                            "wf"
                           "in"
                           "r"
                           "s"
      }
}
.maingrid #s1 {grid-area: s}

.maingrid #mh1 {grid-area: mh}
.maingrid #hamburg1 {grid-area: hamburger}
.maingrid #wf1 {grid-area: wf}
.maingrid #h1 {grid-area: h}
.maingrid #in1 {grid-area: in}
.maingrid #r1 {grid-area: r}


@media (orientation:landscape) {
    .maingrid .mutex-item {display:inline-block}
    .maingrid .mutex-label {display:inline-block}
    .maingrid .mutex-item + .mutex-item {margin-left:1em}
    .maingrid .mutex-item2 {display:inline-block}
    .maingrid .mutex-label2 {display:inline-block}
    .maingrid .mutex-item2 {margin-left:1ex}
}
@media (orientation:portrait) {
    .maingrid .mutex-item {display:block; height:2em}
}

.maingrid #in1 fieldset legend {margin-bottom:1ex}
.maingrid .mutex-item > input + label + span {display:none}
.maingrid .mutex-item > input:checked + label + span {display:inline}
.maingrid .mutex-item > input + label > span.unchecked-only {display:inline}
.maingrid .mutex-item > input:checked + label > span.unchecked-only {display:none}

.maingrid #in1 .mutex-items {position:relative; float:left}
.maingrid #in1 .input-run {position:relative; float:right; margin-right:2em}
.maingrid #in1 .input-run button + button {margin-left:1em}
#app {background-color:#eff }

.guide .actionclause {white-space: nowrap; color: #326295}
.guide .actionverb {font-family: sans-serif; font-weight: bold}
.guide ul.api-links-list {display: inline}
.guide ul.api-links-list li {display: inline; font-size:14pt}
.guide ul.api-links-list li span {white-space:nowrap}
.guide ul.api-links-list li + li {margin-left:1em}
.guide + details > div {margin-bottom:1em}


p {margin-top:1ex; margin-bottom:1ex}
p.attn::before {content:'\26a0 '; padding-right:1ex; color:orangered}

a#download-report-link:not([href]) { color:gray; text-decoration:none }

/*.fn-select option.api-name-header-option {font-weight:bold; background-color: pink; color:purple}*/
.fn-select option:disabled {font-weight:bold; background-color: pink; color:purple}

.validation-widget {padding-left:1ex; vertical-align:top}
aa.validation-problem::before {content:"\2639"}
aa.validation-valid::before {content:"\2713"}

.validation-problem::before {content:"\26a0"; color:red; font-weight:bold}
.validation-valid::before {content:"\26a0";visibility:hidden}
.validation-problem.validation-msg-required::before {content:"\2731"; color:red}

/* Screen-reader only: from https://webaim.org/techniques/css/invisiblecontent/ */
.sr-only {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }
/* "Skip to main content - from https://webaim.org/techniques/css/invisiblecontent/ */
#skip a
    {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    }

#skip a:focus
    {
    position:static;
    width:auto;
    height:auto;
    }

div.tty-picker2 {display: inline-block}

div.relationship-picker2 {
    display: inline-block
}
div.relationship-picker2 ul {
    margin:0; padding:0;
    display: grid;
    grid-template-columns: repeat(2,min-content);
    gap:1ex;/*10px;*/
}

li.wf-step {white-space:nowrap}

div.wf-step-bubble {
    display: inline-block;
    border: 2pt solid #cc00cc;
    background-color: #fff;
    border-radius: 1em;
    padding: 1ex
}
.wf-diagram .wf-step-bubble {
    max-width:calc(100% - 8em); /* appropriate in wf builder but NOT dataset chooser */
}
span.wf-step-join-field {
    position:absolute;
    padding-left:1ex;
}

span.input-multi-menu-text {white-space:normal}

div.focus-picker {margin-top:1ex; margin-bottom:1ex}

span.input-name {font-weight:bold; font-style:italic}

#all-rxmix.wait * { cursor: wait !important}

#loading-rxmix {padding-top:45vh; min-height: 100%; width: 100%; text-align: center; cursor: default}

.logo-img-button {background-color: inherit; border: none}
.logo-img-button:hover {cursor:pointer}

dialog ul.quick-start2 button {text-align:left}
dialog ul.quick-start2 h2 {font-weight:bold; display:inline}
dialog ul.quick-start2 h2::after {content:'.';padding-right:1em}
dialog ul.quick-start2 p {display:inline}
dialog ul.quick-start2 div {width:100%}
dialog ul.quick-start2 li {margin-top:1em; margin-bottom:1em }

dialog#workflow-library-dialog {max-width:100ex}
dialog#workflow-library-dialog ul.quick-start2 button {margin:0}

div.prior-version-banner { text-align: center; font-family: Arial; font-style: italic; font-size:13pt; padding:1ex; background-color:lightblue}
div.prior-version-banner::before {content:"\2b50"; padding-right:1ex}

div.prior-version-item { display:inline-block; white-space:nowrap }
div.prior-version-item + div.prior-version-item { margin-left:2em }

@media (orientation:portrait) {
    #h1 h2 {display:none}
}
@media (orientation:landscape) {
    #h1 h2 {font-family: inherit;
        font-size: inherit;
        margin-top: 1em}
}

button { padding-left:1ex; padding-right:1ex }
button.scroll-hz {padding-left:2ex; padding-right:2ex}
button.scroll-hz + button.scroll-hz {margin-left:1em}

.haloable.halo {box-shadow: -30px -1px 30px -5px  yellow, 30px 1px 30px -5px  yellow, 30px -1px 30px -5px  yellow, -30px 1px 30px -5px  yellow}
a.halo-trigger {text-decoration:none}
.help-step-outstanding a.halo-trigger:hover {text-decoration:underline}

.dialog-resolution-button-row {margin-top:1em}
.dialog-resolution-button-row button + button {margin-left:1em}

span.fn-doc-info-link::before {content:'\24d8 '; font-size:larger; color:#0d98ba}

dialog.fn-configure h2 {font-weight:bold}