.tpl-vp-sections {
background-color: #f8f9fa;
border: 1px solid #a2a9b1;
border-bottom: 0;
clear: none;
float: left;
margin: 0 auto;
text-align: center;
}
.tpl-vp-sections.tpl-vp-colors {
background-color: #fffaea;
border:2px solid #bfb1a3;
}
.tpl-vp-heading {
background-color: #eaecf0;
font-size: 140%;
font-weight: bold;
}
.tpl-vp-colors .tpl-vp-heading,
.tpl-vp-colors .tpl-vp-footer {
background-color: #eee9d9
}
.tpl-vp-blocks {
border: 1px solid #a2a9b1;
border-bottom: 0;
border-right: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -1px;
}
.tpl-vp-block {
border-bottom: 1px solid #a2a9b1;
border-right: 1px solid #a2a9b1;
display: flex;
flex: 1 1;
flex-direction: column;
padding: 1em .5em;
text-align: center;
min-width: 8em;
}
.tpl-vp-block > div:nth-child(2) {
font-size: larger;
font-weight: bold;
}
.tpl-vp-all {
padding: .5em 0;
}
.tpl-vp-footer {
align-items: center;
background-color: #eaecf0;
border-top: 1px solid #a2a9b1;
display: flex;
padding: .5em;
}
@media screen and (max-width: 720px) {
.tpl-vp-footer input {
max-width: 15em;
white-space: normal;
}
}
@media screen {
html.skin-theme-clientpref-night .tpl-vp-sections,
html.skin-theme-clientpref-night .tpl-vp-footer,
html.skin-theme-clientpref-night .tpl-vp-heading {
background-color: var( --background-color-neutral-subtle );
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .tpl-vp-sections,
html.skin-theme-clientpref-os .tpl-vp-footer,
html.skin-theme-clientpref-os .tpl-vp-heading {
background-color: var( --background-color-neutral-subtle );
}
}