diff --git a/dist/mini-default.css b/dist/mini-default.css
index fbc5745..5289926 100644
--- a/dist/mini-default.css
+++ b/dist/mini-default.css
@@ -257,14 +257,15 @@ a:hover, a:focus {
.col-sm,
.row.cols-sm > * {
+ max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
.col-sm-1,
.row.cols-sm-1 > * {
- flex-basis: 8.33333%;
max-width: 8.33333%;
+ flex-basis: 8.33333%;
}
.col-sm-offset-0 {
@@ -273,8 +274,8 @@ a:hover, a:focus {
.col-sm-2,
.row.cols-sm-2 > * {
- flex-basis: 16.66667%;
max-width: 16.66667%;
+ flex-basis: 16.66667%;
}
.col-sm-offset-1 {
@@ -283,8 +284,8 @@ a:hover, a:focus {
.col-sm-3,
.row.cols-sm-3 > * {
- flex-basis: 25%;
max-width: 25%;
+ flex-basis: 25%;
}
.col-sm-offset-2 {
@@ -293,8 +294,8 @@ a:hover, a:focus {
.col-sm-4,
.row.cols-sm-4 > * {
- flex-basis: 33.33333%;
max-width: 33.33333%;
+ flex-basis: 33.33333%;
}
.col-sm-offset-3 {
@@ -303,8 +304,8 @@ a:hover, a:focus {
.col-sm-5,
.row.cols-sm-5 > * {
- flex-basis: 41.66667%;
max-width: 41.66667%;
+ flex-basis: 41.66667%;
}
.col-sm-offset-4 {
@@ -313,8 +314,8 @@ a:hover, a:focus {
.col-sm-6,
.row.cols-sm-6 > * {
- flex-basis: 50%;
max-width: 50%;
+ flex-basis: 50%;
}
.col-sm-offset-5 {
@@ -323,8 +324,8 @@ a:hover, a:focus {
.col-sm-7,
.row.cols-sm-7 > * {
- flex-basis: 58.33333%;
max-width: 58.33333%;
+ flex-basis: 58.33333%;
}
.col-sm-offset-6 {
@@ -333,8 +334,8 @@ a:hover, a:focus {
.col-sm-8,
.row.cols-sm-8 > * {
- flex-basis: 66.66667%;
max-width: 66.66667%;
+ flex-basis: 66.66667%;
}
.col-sm-offset-7 {
@@ -343,8 +344,8 @@ a:hover, a:focus {
.col-sm-9,
.row.cols-sm-9 > * {
- flex-basis: 75%;
max-width: 75%;
+ flex-basis: 75%;
}
.col-sm-offset-8 {
@@ -353,8 +354,8 @@ a:hover, a:focus {
.col-sm-10,
.row.cols-sm-10 > * {
- flex-basis: 83.33333%;
max-width: 83.33333%;
+ flex-basis: 83.33333%;
}
.col-sm-offset-9 {
@@ -363,8 +364,8 @@ a:hover, a:focus {
.col-sm-11,
.row.cols-sm-11 > * {
- flex-basis: 91.66667%;
max-width: 91.66667%;
+ flex-basis: 91.66667%;
}
.col-sm-offset-10 {
@@ -373,8 +374,8 @@ a:hover, a:focus {
.col-sm-12,
.row.cols-sm-12 > * {
- flex-basis: 100%;
max-width: 100%;
+ flex-basis: 100%;
}
.col-sm-offset-11 {
@@ -404,101 +405,102 @@ a:hover, a:focus {
}
.col-md,
.row.cols-md > * {
+ max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
.col-md-1,
.row.cols-md-1 > * {
- flex-basis: 8.33333%;
max-width: 8.33333%;
+ flex-basis: 8.33333%;
}
.col-md-offset-0 {
margin-left: 0;
}
.col-md-2,
.row.cols-md-2 > * {
- flex-basis: 16.66667%;
max-width: 16.66667%;
+ flex-basis: 16.66667%;
}
.col-md-offset-1 {
margin-left: 8.33333%;
}
.col-md-3,
.row.cols-md-3 > * {
- flex-basis: 25%;
max-width: 25%;
+ flex-basis: 25%;
}
.col-md-offset-2 {
margin-left: 16.66667%;
}
.col-md-4,
.row.cols-md-4 > * {
- flex-basis: 33.33333%;
max-width: 33.33333%;
+ flex-basis: 33.33333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-5,
.row.cols-md-5 > * {
- flex-basis: 41.66667%;
max-width: 41.66667%;
+ flex-basis: 41.66667%;
}
.col-md-offset-4 {
margin-left: 33.33333%;
}
.col-md-6,
.row.cols-md-6 > * {
- flex-basis: 50%;
max-width: 50%;
+ flex-basis: 50%;
}
.col-md-offset-5 {
margin-left: 41.66667%;
}
.col-md-7,
.row.cols-md-7 > * {
- flex-basis: 58.33333%;
max-width: 58.33333%;
+ flex-basis: 58.33333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-8,
.row.cols-md-8 > * {
- flex-basis: 66.66667%;
max-width: 66.66667%;
+ flex-basis: 66.66667%;
}
.col-md-offset-7 {
margin-left: 58.33333%;
}
.col-md-9,
.row.cols-md-9 > * {
- flex-basis: 75%;
max-width: 75%;
+ flex-basis: 75%;
}
.col-md-offset-8 {
margin-left: 66.66667%;
}
.col-md-10,
.row.cols-md-10 > * {
- flex-basis: 83.33333%;
max-width: 83.33333%;
+ flex-basis: 83.33333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-11,
.row.cols-md-11 > * {
- flex-basis: 91.66667%;
max-width: 91.66667%;
+ flex-basis: 91.66667%;
}
.col-md-offset-10 {
margin-left: 83.33333%;
}
.col-md-12,
.row.cols-md-12 > * {
- flex-basis: 100%;
max-width: 100%;
+ flex-basis: 100%;
}
.col-md-offset-11 {
margin-left: 91.66667%;
@@ -525,101 +527,102 @@ a:hover, a:focus {
}
.col-lg,
.row.cols-lg > * {
+ max-width: 100%;
flex-grow: 1;
flex-basis: 0;
}
.col-lg-1,
.row.cols-lg-1 > * {
- flex-basis: 8.33333%;
max-width: 8.33333%;
+ flex-basis: 8.33333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
.col-lg-2,
.row.cols-lg-2 > * {
- flex-basis: 16.66667%;
max-width: 16.66667%;
+ flex-basis: 16.66667%;
}
.col-lg-offset-1 {
margin-left: 8.33333%;
}
.col-lg-3,
.row.cols-lg-3 > * {
- flex-basis: 25%;
max-width: 25%;
+ flex-basis: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66667%;
}
.col-lg-4,
.row.cols-lg-4 > * {
- flex-basis: 33.33333%;
max-width: 33.33333%;
+ flex-basis: 33.33333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-5,
.row.cols-lg-5 > * {
- flex-basis: 41.66667%;
max-width: 41.66667%;
+ flex-basis: 41.66667%;
}
.col-lg-offset-4 {
margin-left: 33.33333%;
}
.col-lg-6,
.row.cols-lg-6 > * {
- flex-basis: 50%;
max-width: 50%;
+ flex-basis: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66667%;
}
.col-lg-7,
.row.cols-lg-7 > * {
- flex-basis: 58.33333%;
max-width: 58.33333%;
+ flex-basis: 58.33333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-8,
.row.cols-lg-8 > * {
- flex-basis: 66.66667%;
max-width: 66.66667%;
+ flex-basis: 66.66667%;
}
.col-lg-offset-7 {
margin-left: 58.33333%;
}
.col-lg-9,
.row.cols-lg-9 > * {
- flex-basis: 75%;
max-width: 75%;
+ flex-basis: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66667%;
}
.col-lg-10,
.row.cols-lg-10 > * {
- flex-basis: 83.33333%;
max-width: 83.33333%;
+ flex-basis: 83.33333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-11,
.row.cols-lg-11 > * {
- flex-basis: 91.66667%;
max-width: 91.66667%;
+ flex-basis: 91.66667%;
}
.col-lg-offset-10 {
margin-left: 83.33333%;
}
.col-lg-12,
.row.cols-lg-12 > * {
- flex-basis: 100%;
max-width: 100%;
+ flex-basis: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66667%;
@@ -718,7 +721,7 @@ a:hover, a:focus {
}
.card > .section.dark {
- --card-back-color: linear-gradient(135deg, #eceff1 10%, #90a4ae 100%);
+ --card-back-color: #e0e0e0;
}
.card > .section.double-padded {
@@ -786,6 +789,7 @@ label {
}
.input-group.fluid > input {
+ max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
@@ -804,6 +808,7 @@ label {
}
.input-group.vertical > input {
+ max-width: 100%;
flex-grow: 1;
flex-basis: 0px;
}
@@ -957,6 +962,7 @@ input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:d
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
.button-group > .button, .button-group > [role="button"] {
margin: 0;
+ max-width: 100%;
flex: 1 1 auto;
text-align: center;
border: 0;
diff --git a/dist/mini-default.min.css b/dist/mini-default.min.css
index 5a04da9..32f6680 100644
--- a/dist/mini-default.min.css
+++ b/dist/mini-default.min.css
@@ -1 +1 @@
-:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%;max-width:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%;max-width:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%;max-width:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%;max-width:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%;max-width:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%;max-width:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%;max-width:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%;max-width:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%;max-width:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%;max-width:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%;max-width:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%;max-width:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%;max-width:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%;max-width:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%;max-width:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%;max-width:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%;max-width:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%;max-width:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%;max-width:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%;max-width:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%;max-width:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%;max-width:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%;max-width:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%;max-width:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%;max-width:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%;max-width:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%;max-width:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%;max-width:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%;max-width:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%;max-width:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%;max-width:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%;max-width:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%;max-width:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%;max-width:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%;max-width:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%;max-width:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#f8f8f8;--card-fore-color:#111;--card-border-color:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:linear-gradient(135deg, #eceff1 10%, #90a4ae 100%)}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#f0f0f0;--form-fore-color:#111;--form-border-color:#ddd;--input-back-color:#f8f8f8;--input-fore-color:#111;--input-border-color:#ddd;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#212121;--button-fore-color:#f8f8f8}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#111}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd;--drawer-close-color:#444}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}
+:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#f8f8f8;--card-fore-color:#111;--card-border-color:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:#e0e0e0}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#f0f0f0;--form-fore-color:#111;--form-border-color:#ddd;--input-back-color:#f8f8f8;--input-fore-color:#111;--input-border-color:#ddd;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#212121;--button-fore-color:#f8f8f8}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#111}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd;--drawer-close-color:#444}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;right:-320px;transition:right 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{right:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}
diff --git a/docs/doc-fragments/cardSections.js b/docs/doc-fragments/cardSections.js
index 55c94d7..bbaea84 100644
--- a/docs/doc-fragments/cardSections.js
+++ b/docs/doc-fragments/cardSections.js
@@ -1,15 +1,71 @@
module.exports = {
id: 'card-sections',
title: 'Card sections',
- keywords: [],
- description: '',
- example: '',
- samples: [],
- notes: [],
- customization: [],
- modifiers: [],
+ keywords: [`card`, `row`, `section`, `container`, `col`, `column`, `media`, `double-padded`, `dark`],
+ description: 'Card content is usually organized in smaller sections (.section) to be more easily digestible. A card section can be any valid HTML5 element with the apropriate class applied to it.
',
+ example: `
+
Title section
This is a section with some textual content.
+
<div class="card">
+ <div class="section"></div>
+ <div class="section"></div>
+</div>
`],
+ notes: [
+ `While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.`,
+ `Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.`,
+ `Media sections have a default height of 200px.`,
+ `Due to the media sections using object-fit, you might want to use a polyfill for better browser support (recommended: image polyfill, video polyfill).`,
+ `Depending on the source website, some embedded videos might not display properly as media sections.`
+ ],
+ customization: [
+ `Text color for cards and card sections can be changed by changing the value of the --card-fore-color variable.`,
+ `Background color for cards and card sections can be changed by changing the value of the --card-back-color variable.`,
+ `Border color for cards and card sections can be changed by changing the value of the --card-border-color variable.`,
+ `Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.`
+ ],
+ modifiers: [
+ {
+ title : 'Media sections',
+ description: 'You can create sections for media (.media), such as images or videos (using an <img> or a <iframe> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.
',
+ example: `
+
Card with image
+
+
<div class="card">
+ <img src="image.png" class="section media"/>
+</div>
`]
+ },
+ {
+ title : 'Color variants',
+ description: 'You can create sections with a darker (.dark) background, by applying the appropriate modifier.
',
+ example: `
+
Normal section
Dark section
+
<div class="card">
+ <div class="section dark"></div>
+</div>
`]
+ },
+ {
+ title : 'Additional spacing',
+ description: 'You can create sections with additional spacing (.double-padded), by applying the appropriate modifier.
',
+ example: `
+
Normal spacing
Additional spacing
+
<div class="card">
+ <div class="section double-padded"></div>
+</div>
`]
+ }
+ ],
dos: [],
- donts: []
+ donts: [
+ {
+ description: `Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.`,
+ sample: `<div class="card">
+ <div class="section"></div>
+ <p>This should have been a section!</p>
+</div>
`
+ }
+ ]
}
/*
diff --git a/docs/doc-fragments/cards.js b/docs/doc-fragments/cards.js
index a375eef..348ff68 100644
--- a/docs/doc-fragments/cards.js
+++ b/docs/doc-fragments/cards.js
@@ -1,8 +1,8 @@
module.exports = {
id: 'cards',
title: 'Cards',
- keywords: [`card`, `row`, `section`, `container`, `col`, `column`],
- description: `mini.css provides you with cards, general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
`,
+ keywords: [`card`, `row`, `section`, `container`, `col`, `column`, `small`, `large`, `fluid`, `warning`, `error`],
+ description: `mini.css provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
`,
example: `
Card 1
This is a basic card with some sample content.
Card 2
This is another card with some sample content.
@@ -16,7 +16,7 @@ module.exports = {
customization: [
`Text color for cards can be changed by changing the value of the
--card-fore-color variable.`,
`Background color for cards can be changed by changing the value of the
--card-back-color variable.`,
- `Border color for caards can be changed by changing the value of the
--card-border-color variable.`,
+ `Border color for cards can be changed by changing the value of the
--card-border-color variable.`,
`Universal margin for elements can be changed globally by changing the value of the
--universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`,
`Universal border radius for elements can be changed globally by changing the value of the
--universal-border-radius variable.`
],
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index ee65db4..d7c418a 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -175,3 +175,4 @@
## 20171117
- Documented `card` and `card section` to complete the `layout` module's docs.
+- Altered the `dark` section colors, didn't really like them.
diff --git a/docs/v3/docs.html b/docs/v3/docs.html
index 784b880..71266e7 100644
--- a/docs/v3/docs.html
+++ b/docs/v3/docs.html
@@ -297,7 +297,7 @@
Customization
- Universal padding for elements can be changed globally by changing the value of the
--universal-padding variable. This only affects the padding of the container.
Cards
-
mini.css provides you with cards, general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
+
mini.css provides you with cards (.card), general-purpose containers that help you organize the content of your web apps. Cards should be used in combination with the grid system, meaning that they need to be placed inside the grid's rows to work properly. Layouts created with cards are responsive, realigning according to the available size on the screen.
Example
Card 1
This is a basic card with some sample content.
Card 2
This is another card with some sample content.
@@ -338,15 +338,37 @@
<div class="card fluid"></div>
</div> Don't: Try not to combine fixed-width and fluid cards. Instead, combine fixed-width cards with columns and place fluid cards inside them.
<div class="card warning error"></div>
Don't: Avoid applying two color modifiers on the same card.
Notes
- Due to the fact that fluid cards stretch to fill their parent container, they might not fully respect their margins sometimes, although this should not cause any noticable problems in your web apps' layouts.
-
Customization
- Text color for cards can be changed by changing the value of the
--card-fore-color variable. - Background color for cards can be changed by changing the value of the
--card-back-color variable. - Border color for caards can be changed by changing the value of the
--card-border-color variable. - Universal margin for elements can be changed globally by changing the value of the
--universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen. - Universal border radius for elements can be changed globally by changing the value of the
--universal-border-radius variable.
+
Customization
- Text color for cards can be changed by changing the value of the
--card-fore-color variable. - Background color for cards can be changed by changing the value of the
--card-back-color variable. - Border color for cards can be changed by changing the value of the
--card-border-color variable. - Universal margin for elements can be changed globally by changing the value of the
--universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen. - Universal border radius for elements can be changed globally by changing the value of the
--universal-border-radius variable.
Card sections
-
-
-
-
-
-
-
+
Card content is usually organized in smaller sections (.section) to be more easily digestible. A card section can be any valid HTML5 element with the apropriate class applied to it.
+
Example
+
Title section
This is a section with some textual content.
+
+
Sample code
<div class="card">
+ <div class="section"></div>
+ <div class="section"></div>
+</div>
+
Modifiers
+
Media sections
You can create sections for media (.media), such as images or videos (using an <img> or a <iframe> element respectively). These sections are styled appropriately for presentation of media content, meaning that the content will scale appropriately to fill up the available space.
Example
+
Card with image
+
+
Sample code
<div class="card">
+ <img src="image.png" class="section media"/>
+</div>
Color variants
You can create sections with a darker (.dark) background, by applying the appropriate modifier.
Example
+
Normal section
Dark section
+
Sample code
<div class="card">
+ <div class="section dark"></div>
+</div>
Additional spacing
You can create sections with additional spacing (.double-padded), by applying the appropriate modifier.
Example
+
Normal spacing
Additional spacing
+
Sample code
<div class="card">
+ <div class="section double-padded"></div>
+</div>
+
Best practices
<div class="card">
+ <div class="section"></div>
+ <p>This should have been a section!</p>
+</div>
Don't: Avoid mixing regular content with content in sections. Instead, wrap all of your card's contents in sections.
+
Notes
- While not mandatory, it is highly suggested that you wrap all of your cards' contents in one or more sections.
- Remember that a section can be any valid HTML5 element, so you can apply them to headings, paragraphs, input elements etc.
- Media sections have a default height of
200px. - Due to the media sections using
object-fit, you might want to use a polyfill for better browser support (recommended: image polyfill, video polyfill). - Depending on the source website, some embedded videos might not display properly as media sections.
+
Customization
- Text color for cards and card sections can be changed by changing the value of the
--card-fore-color variable. - Background color for cards and card sections can be changed by changing the value of the
--card-back-color variable. - Border color for cards and card sections can be changed by changing the value of the
--card-border-color variable. - Universal padding for elements can be changed globally by changing the value of the
--universal-padding variable.