:root {
    --collapsible-bar-color: #5170A6;
    --collapsible-border-color: #5170A6;
}

.collapsible > .bar {
   background-color: #5170A6;
   color: white;
   font-size: 1.1em;
   font-weight: bold;
   height: 1.3em;
   padding: 0.2em;
   margin-top: 0.8em;
   cursor: pointer;
}

.collapsible.waiting > .bar {
   background-color: #FFA;
}

.collapsible.waiting > .bar > .title{
   color: black;
}

.collapsible.error > .bar {
   background-color: red;
}

.collapsible > .bar > .title {
   color: white;
   margin-left: 0.4em;
}

.collapsible > .bar > .toggle {
   float: left;
   margin-right: 0.4em;
}

.collapsible > .content {
   border: 1px solid var(--collapsible-border-color);;
   min-height: 25em;
   padding: 1em 1.4em;
}

.collapsible > .bar .info {
   font-weight: normal;
   padding-left: 1.3em;
   padding-right: 1.3em;
}

.collapsible > .bar .action {
   font-weight: normal;
   font-style: italic;
   padding-left: 1.3em;
   padding-right: 1.3em;
}


/* compact */

.collapsible-compact > .bar {
   background-color: #00aae8;
   margin-top: 0.4em;
   color: white;
   padding: 0.2em;
   font-size: 1.0em;
   cursor: pointer;
}

.collapsible-compact > .bar a {
   color: white;
}

.collapsible-compact > .bar > .title {
   margin-left: 0.2em;
   font-weight: bold;
}

.collapsible-compact > .bar .info {
   font-weight: normal;
   font-style: italic;
   padding-left: 1.3em;
   padding-right: 1.3em;
}

.collapsible-compact > .bar .action {
   font-weight: normal;
   font-style: italic;
   padding-left: 1.3em;
   padding-right: 1.3em;
}

.collapsible-compact > .bar a {
   text-decoration: none;
}

.collapsible-compact > .bar a:hover {
   text-decoration: underline;
}

.collapsible-compact > .bar > .toggle {
   float: left;
   margin-right: 0.4em;
   padding-left: 0.4em;
}

.collapsible-compact > .content {
   border: 1px solid #E5E5E5;
   padding: 0.7em 0.8em;
   margin-bottom: 0.8em;
   overflow: auto;
}