/*** Custom Colors ***/
:root {
    --config-primary: #f59221;
    --config-primary-hover: #f17023;
    --config-primary-contrast: #fff;
    --config-text: #333;
}
/*** That's it: Stop Editing! ***/

:root {
    --color-panel-background: rgba(5,5,5,0.501961) !important;
    --color-title-background-selected: rgba(120,120,120,1) !important;
    --color-title-background-hover: rgba(80,80,80,1) !important;
    --color-thumbnail-border-hover: rgba(80,80,80,1) !important;
    --color-thumbnail-background-selected: rgba(80,80,80,0.300008) !important;
    --color-thumbnail-border-selected: var(--config-primary-contrast) !important;
    --color-thumbnail-background-hover: rgba(80,80,80,0.300008) !important;
}

/*** Configurator ***/
/* Toolbar */
#toolbar-savecfg {
    display: none;
}

.toolbarbutton:hover,
.toolbarbutton.selected {
    color: var(--config-primary);
}

/* Panel Area */
.panelarea {
    --flowwidget-first-size: 65;
    --flowwidget-second-size: 35;
}
.panelarea.layouthorizontal {
    height: calc(var(--touch-ui-height) * 2%);
}

/* Download + Request Buttons */
#download,
#request {
    padding: 0;
    display: inline-block;
    vertical-align: bottom;
    margin-left:1px;
}

#download .btn.img-download,
#request .btn.frm-request {
    display:block;
    float:right;
    width:auto;
    background: var(--config-primary);
    border:1px solid var(--config-primary);
    color: var(--config-primary-contrast);
    padding:.45em .75em;
    text-decoration: none;
}

#download .btn.img-download:hover,
#request .btn.frm-request:hover {
    background: var(--config-primary-contrast);
    color:var(--config-primary);
}

/* Selections */
.flowheadertextbox:hover,
.flowselectionheaderscrollbox>div:hover,
.flowthumbnailitem>div:hover {
    cursor: pointer !important;
}
.flowthumbnailitem>div.selected:after {
    content: "\f00c";
    font-family: 'Font Awesome 6 Free';
    display: block;
    width: 25px;
    height: 25px;
    padding-right:5px;
    padding-left:5px;
    position: absolute;
    color: var(--config-primary-contrast);
    background-color: var(--config-primary);
    border-radius: 100%;
    margin-right: calc(var(--current-thumbnail-width) / -1.6);
    margin-top: calc(var(--current-thumbnail-height) / 2.5);
}

/* Contact Form */
body.content form legend small,
body.content form label small {
    color: var(--config-primary);
    font-size:.66rem;
}

/* Tooltip */
.hidethumbnailtext .flowthumbnailitem > div > span {
    display:block;
}
.flowthumbnailitem > div > span {
    display:block;
    visibility: hidden;
    width: auto;
    min-width:100px;
    max-width: 100% !important;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-size: 14px;
    overflow: visible;
    
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    margin-left: calc(var(--current-thumbnail-width) * 2.25);
}
.hidethumbnailtext .flowthumbnailitem > div > span::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}
.flowthumbnailitem:hover > div > span {
  visibility: visible;
}

/* Panel on mobile */
@media screen and (max-width: 768px) {
  .flowselectionheaderbox {
    font-size: calc(var(--size-titles-font) * .9pt);
  }
  .flowwidget.flowselection:last-child > .flowselectionheaderbox {
    z-index: -1;
  }
  .flowwidget.flowselection:last-child .flowheadertextbox.selected {
    display: none;
  }
}