diff --git a/min/basic.min.css b/min/basic.min.css index 3fc36ff..4435b68 100644 --- a/min/basic.min.css +++ b/min/basic.min.css @@ -1 +1 @@ -*{box-sizing:border-box}:root{--sans:1em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;--mono:'Courier New',Courier,'Ubuntu Mono','Liberation Mono',monospace;--c1:#0074d9;--c2:#eee;--c3:#fff;--c4:#000;--c5:#fff;--m1:8px;--rc:8px}@media(prefers-color-scheme:dark){:root{--c2:#333;--c3:#1e1f20;--c4:#fff}}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;font:var(--sans);font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background-color:var(--c3);color:var(--c4)}img,iframe{border:0;max-width:100%}a{color:var(--c1);text-decoration:none}a:hover{color:var(--c1);text-decoration:underline}pre{font:1em/1.6 var(--mono);background:var(--c2);padding:1em;overflow:auto}code{font:1em/1.6 var(--mono)}blockquote{border-left:5px solid var(--c2);padding:1em 1.5em;margin:0}hr{border:0;border-bottom:1px solid var(--c4)}h1,h2,h3,h4,h5,h6{margin:.6em 0;font-weight:normal}h1{font-size:2.625em;line-height:1.2}h2{font-size:1.625em;line-height:1.2}h3{font-size:1.3125em;line-height:1.24}h4{font-size:1.1875em;line-height:1.23}h5,h6{font-size:1em;font-weight:bold}table{border-collapse:collapse;border-spacing:0;margin:1em 0}th,td{text-align:left;vertical-align:top;border:1px solid;padding:.4em}thead,tfoot{background:var(--c2)}pre,code,input,select,textarea,button,img{border-radius:var(--rc)}input,select,textarea{font-size:1em;color:var(--c4);background:var(--c2);border:0;padding:.6em}button,input[type=submit],input[type=reset],input[type="button"]{-webkit-appearance:none;font-size:1em;display:inline-block;color:var(--c5);background:var(--c1);border:0;margin:4px;padding:.6em;cursor:pointer;text-align:center}button:hover,button:focus,input:hover,textarea:hover,select:hover{opacity:.8}section{display:flex;flex-flow:row wrap}[style*="--c:"],section>section,aside,article{flex:var(--c,1);margin:var(--m1)}article{background:var(--c2);border-radius:var(--rc);padding:1em;box-shadow:0 1px 0 rgba(0,0,0,0.3)}[style*="--c:"]:first-child,section>section:first-child,article:first-child{margin-left:0} \ No newline at end of file +*{box-sizing:border-box}:root{--sans:1em/1.6 system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Droid Sans,Helvetica Neue,Fira Sans,sans-serif;--mono:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,'Courier New',monospace;--c1:#0074d9;--c2:#eee;--c3:#fff;--c4:#000;--c5:#fff;--m1:8px;--rc:8px}@media(prefers-color-scheme:dark){:root{--c2:#333;--c3:#1e1f20;--c4:#fff}}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0;font:var(--sans);font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background-color:var(--c3);color:var(--c4)}img,iframe{border:0;max-width:100%}a{color:var(--c1);text-decoration:none}a:hover{color:var(--c1);text-decoration:underline}pre{font:1em/1.6 var(--mono);background:var(--c2);padding:1em;overflow:auto}code{font:1em/1.6 var(--mono)}blockquote{border-left:5px solid var(--c2);padding:1em 1.5em;margin:0}hr{border:0;border-bottom:1px solid var(--c4)}h1,h2,h3,h4,h5,h6{margin:.6em 0;font-weight:normal}h1{font-size:2.625em;line-height:1.2}h2{font-size:1.625em;line-height:1.2}h3{font-size:1.3125em;line-height:1.24}h4{font-size:1.1875em;line-height:1.23}h5,h6{font-size:1em;font-weight:bold}table{border-collapse:collapse;border-spacing:0;margin:1em 0}th,td{text-align:left;vertical-align:top;border:1px solid;padding:.4em}thead,tfoot{background:var(--c2)}pre,code,input,select,textarea,button,img{border-radius:var(--rc)}input,select,textarea{font-size:1em;color:var(--c4);background:var(--c2);border:0;padding:.6em}button,input[type=submit],input[type=reset],input[type="button"]{-webkit-appearance:none;font-size:1em;display:inline-block;color:var(--c5);background:var(--c1);border:0;margin:4px;padding:.6em;cursor:pointer;text-align:center}button:hover,button:focus,input:hover,textarea:hover,select:hover{opacity:.8}section{display:flex;flex-flow:row wrap}[style*="--c:"],section>section,aside,article{flex:var(--c,1);margin:var(--m1)}article{background:var(--c2);border-radius:var(--rc);padding:1em;box-shadow:0 1px 0 rgba(0,0,0,0.3)}[style*="--c:"]:first-child,section>section:first-child,article:first-child{margin-left:0} \ No newline at end of file diff --git a/min/bonsai.min.css b/min/bonsai.min.css index 185846a..bc70e56 100644 --- a/min/bonsai.min.css +++ b/min/bonsai.min.css @@ -1 +1 @@ -:root{--white:#fff;--grey:#e6e6e6;--black:#262626;--green:#06847d;--blue:#4a69bd;--orange:#a46313;--red:#e02e06;--primary:var(--blue);--secondary:var(--green);--background:#fff;--background-alt:#f8fafc;--selection:#9e9e9e;--text-main:#4a4a4a;--text-bright:#000;--text-muted:#707070;--links:var(--primary);--focus:rgba(74,105,189,.35);--border:rgba(0,0,0,.2);--border-radius:4px;--code:#000;--animation-duration:.1s;--button-hover:#ddd;--form-placeholder:#949494;--form-text:#000;--variable:#39a33c;--highlight:#ff0;--select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvgxmlns='http://www.w3.org/2000/svg'height='62.5'width='116.9'fill='%23161f27'%3E%3Cpathd='M115.31.6c-1.6-1.6-4.2-1.6-5.80l-5151.1L7.41.6C5.803.201.61.603.205.81.67.4l53.953.9c.8.81.81.22.91.2102.1-.42.9-1.2l53.9-53.9c1.7-1.61.7-4.2.1-5.8z'/%3E%3C/svg%3E");--heading-margin:.5rem 0 .75rem;--typo-size-1:2.8rem;--typo-size-2:2.2rem;--typo-size-3:1.8rem;--typo-size-4:1.4rem;--typo-size-5:1.2rem;--typo-size-6:1rem;--accent-border:0;--accent-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}*,::before,::after{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:15px;line-height:1.6;font-weight:400;color:var(--text-main);background:var(--background-body);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility}body{margin:0;font-size:1em}code,samp,time{background:var(--background);color:var(--code);padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:var(--variable);font-style:normal;font-family:monospace}kbd{background:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-main);padding:2px 4px 2px 4px}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,transform var(--animation-duration) ease}button,select,input[type="submit"],input[type="button"],input[type="checkbox"],input[type="range"],input[type="radio"]{cursor:pointer}input:not([type="checkbox"]):not([type="radio"]),select{display:block}input,button,textarea,select,details>summary,.tag{color:var(--form-text);background-color:var(--background);font-family:inherit;font-size:inherit;white-space:nowrap;position:relative;margin:.5rem .5rem .5rem 0;padding:10px 12px;width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--border-radius);outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}select{background:var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;padding-right:35px}select::-ms-expand{display:none}select[multiple]{padding-right:10px;background-image:none;overflow-y:auto}button,input[type="submit"],input[type="button"],input[type="reset"]{padding-right:28px;padding-left:28px;width:auto;background-color:var(--btn-bg,var(--primary));color:var(--btn-c,var(--white));box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}button:hover,input[type="submit"]:hover,input[type="button"]:hover{box-shadow:inset 0 0 2rem rgba(0,0,0,.25)}input:not([readonly]):hover,select:not([readonly]):hover,textarea:not([readonly]):hover{border-color:rgba(100,100,100,.75)}input[type='checkbox']:active,input[type='radio']:active,input[type='submit']:active,input[type='button']:active,input[type='range']:active,button:active{background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1))}input:focus,select:focus,button:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--focus)}input:invalid,select:invalid,button:invalid,textarea:invalid{border-color:var(--red)}input[type="checkbox"],input[type="radio"]{position:relative;width:20px;min-width:auto;height:20px;display:inline-block;vertical-align:middle;padding:1px;margin:0;margin-right:2px}input[type="radio"]{border-radius:50%;box-shadow:inset 0 0 2px rgba(0,0,0,.4),inset 0 0 0 4px #fff}input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--primary)}input[type="checkbox"]:checked::before{display:flex;justify-content:center;content:"✔";color:white;font-size:.8rem}input[type="range"]{padding:0}input[type="color"]{padding:2px;width:5rem;height:2.5rem}input:disabled,select:disabled,button:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}::-moz-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}legend{font-size:.9em;font-weight:600}fieldset{border:1px var(--border) solid;border-radius:var(--border-radius);margin:0;-webkit-margin-after:.5rem;margin-block-end:.5rem;padding:.75rem 1.5rem}fieldset>legend:first-of-type{padding:0 .5rem;font-size:1.1rem;font-weight:normal}.tag{align-items:center;display:inline-flex;font-size:.8rem;color:var(--tag-c,var(--white));background-color:var(--tag-bg,var(--primary));width:auto;height:2em;justify-content:center;padding:0 .75em 2px;border:0;box-shadow:none}.group{display:inline-flex;justify-self:flex-start;margin:.5rem 1rem .5rem 0}.group>*{margin:0}.group:not(.vertical)>*+*{-webkit-margin-start:-1px;margin-inline-start:-1px}.group:not(.vertical)>*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.group:not(.vertical)>*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.group.vertical{flex-direction:column}.group.vertical>*+*{-webkit-margin-before:-1px;margin-block-start:-1px}.group.vertical>*:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.group.vertical>*:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.grid{display:grid;grid-template-columns:repeat(var(--col,1),1fr);grid-gap:var(--gap,1rem)}img{max-width:100%;height:auto}hr{border:0;border-top:1px solid var(--border)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}footer{font-size:.8em;color:var(--text-muted)}svg{display:inline-block;font-size:inherit;height:1.2em;vertical-align:-.2em;overflow:visible}figure{display:inline-flex;flex-direction:column;margin:0}figure figcaption{padding:.75rem 1.5rem;margin:0}table{border-collapse:collapse;margin-bottom:10px;width:100%}caption{padding:.5rem 0;text-align:start;caption-side:top}td,th{padding:.5rem;text-align:start}th{background:rgba(100,100,100,.025)}thead{border-bottom:1px solid rgba(100,100,100,.2)}tr+tr,tfoot{border-top:1px solid rgba(100,100,100,.2)}h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:1.3em;margin:var(--heading-margin);color:var(--text-c,inherit)}h1{font-size:var(--typo-size-1)}h2{font-size:var(--typo-size-2)}h3{font-size:var(--typo-size-3)}h4{font-size:var(--typo-size-4)}h5{font-size:var(--typo-size-5)}h6{font-size:var(--typo-size-6);line-height:1.6em}p,table{margin:0 0 1rem}a{color:var(--links);text-decoration:none}b,strong,th{font-weight:bold}blockquote{border-left:4px solid var(--primary);background-color:#fff;margin:1.5rem 0;padding:1rem 1.5rem;font-style:italic}blockquote>footer{font-style:normal;border:0}blockquote cite{font-style:normal}ul,ol{padding:0;-webkit-padding-start:2rem;padding-inline-start:2rem}ul{list-style:disc}dt{font-weight:bold}dd{margin:0 1rem}address{font-style:normal}mark{background-color:var(--highlight);border-radius:2px;padding:0 2px 0 2px}.primary{--text-c:var(--primary);--btn-bg:var(--primary);--tag-bg:var(--primary);--accent-bg:var(--primary)}.secondary{--text-c:var(--secondary);--btn-bg:var(--secondary);--tag-bg:var(--secondary);--accent-bg:var(--secondary)}.green{--text-c:var(--green);--btn-bg:var(--green);--tag-bg:var(--green);--accent-bg:var(--green)}.blue{--text-c:var(--blue);--btn-bg:var(--blue);--tag-bg:var(--blue);--accent-bg:var(--blue)}.orange{--text-c:var(--orange);--btn-bg:var(--orange);--tag-bg:var(--orange);--accent-bg:var(--orange)}.red{--text-c:var(--red);--btn-bg:var(--red);--tag-bg:var(--red);--accent-bg:var(--red)}.white{--text-c:var(--white);--btn-bg:var(--white);--btn-c:var(--text-main);--tag-bg:var(--white);--tag-c:var(--text-main);--accent-bg:var(--white)}.grey{--text-c:var(--grey);--btn-bg:var(--grey);--btn-c:var(--text-main);--tag-bg:var(--grey);--tag-c:var(--text-main);--accent-bg:var(--grey)}.black{--text-c:var(--black);--btn-bg:var(--black);--tag-bg:var(--black);--accent-bg:var(--black)}.accent{color:var(--accent-c,var(--text-main));background-color:var(--accent-bg,var(--white));border:var(--accent-border,0);border-radius:var(--border-radius,0);box-shadow:var(--accent-shadow,none);overflow:hidden}.accent.primary,.accent.secondary,.accent.green,.accent.blue,.accent.red,.accent.orange,.accent.black{--accent-c:var(--white);--text-c:var(--white)}[style*="--bg:"]{background:var(--bg) !important}[style*="--bga:"]{background-attachment:var(--bga) !important}[style*="--bgc:"]{background-color:var(--bgc) !important}[style*="--bgi:"]{background-image:var(--bgi) !important}[style*="--bgp:"]{background-position:var(--bgp) !important}[style*="--bgr:"]{background-repeat:var(--bgr) !important}[style*="--bgs:"]{background-size:var(--bgs) !important}[style*="--hvr-bg:"]:hover{background:var(--hvr-bg,var(--background))}[style*="--hvr-bgc:"]:hover{background-color:var(--hvr-bgc,var(--background-color))}[style*="--grad-top:"]{background-image:linear-gradient(0,transparent,var(--grad-bottom))}[style*="--grad-bottom:"]{background-image:linear-gradient(180deg,transparent,var(--grad-bottom))}[style*="--b:"]{border:var(--b) !important}[style*="--bc:"]{border-color:var(--bc) !important}[style*="--bs:"]{border-style:var(--bs) !important}[style*="--bw:"]{border-width:var(--bw) !important}[style*="--br:"]{border-radius:var(--br) !important}[style*="--radius:"]{border-radius:var(--radius) !important}[style*="--bt:"]{border-top:var(--bt) !important}[style*="--bl:"]{border-left:var(--bl) !important}[style*="--br:"]{border-right:var(--br) !important}[style*="--bb:"]{border-bottom:var(--bb) !important}[style*="--btlr:"]{border-top-left-radius:var(--btlr) !important}[style*="--btrr:"]{border-top-right-radius:var(--btrr) !important}[style*="--bblr:"]{border-bottom-left-radius:var(--bblr) !important}[style*="--bbrr:"]{border-bottom-right-radius:var(--bbrr) !important}[style*="--hvr-b:"]:hover{border:var(--hvr-b,var(--border))}[style*="--hvr-bc:"]:hover{border-color:var(--hvr-bc,var(--border-color))}[style*="--fx:"]{flex:var(--fx) !important}[style*="--fd:"]{flex-direction:var(--fd) !important}[style*="--fw:"]{flex-wrap:var(--fw) !important}[style*="--ac:"]{align-content:var(--ac) !important}[style*="--ai:"]{align-items:var(--ai) !important}[style*="--as:"]{align-self:var(--as) !important}[style*="--jc:"]{justify-content:var(--jc) !important}[style*="--fw:"]{flex-grow:var(--fw) !important}[style*="--fs:"]{flex-shrink:var(--fs) !important}[style*="--fb:"]{flex-basis:var(--fb) !important}[style*="--o:"]{order:var(--o) !important}[style*="--gtc:"]{grid-template-columns:var(--gtc) !important}[style*="--gtr:"]{grid-template-rows:var(--gtr) !important}[style*="--gac:"]{grid-auto-columns:var(--gac) !important}[style*="--gar:"]{grid-auto-rows:var(--gar) !important}[style*="--gc:"]{grid-column:var(--gc) !important}[style*="--gr:"]{grid-row:var(--gr) !important}[style*="--gg:"]{grid-gap:var(--gg) !important}[style*="--ps:"]{place-self:var(--ps) !important}[style*="--grid-cols:"]{grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr))}[style*="--us:"]{-webkit-user-select:var(--us) !important;-moz-user-select:var(--us) !important;-ms-user-select:var(--us) !important;user-select:var(--us) !important}[style*="--oe:"]{outline:var(--oe) !important}[style*="--pe:"]{pointer-events:var(--pe) !important}[style*="--sb:"]{scroll-behavior:var(--sb) !important}[style*="--cur:"]{cursor:var(--cur) !important}[style*="--cur:"]:hover{cursor:var(--cur,var(--cursor))}[style*="--d:"]{display:var(--d) !important}[style*="--ft:"]{float:var(--ft) !important}[style*="--pos:"]{position:var(--pos) !important}[style*="--top:"]{top:var(--top) !important}[style*="--left:"]{left:var(--left) !important}[style*="--right:"]{right:var(--right) !important}[style*="--bottom:"]{bottom:var(--bottom) !important}[style*="--objf:"]{-o-object-fit:var(--objf) !important;object-fit:var(--objf) !important}[style*="--objp:"]{-o-object-position:var(--objp) !important;object-position:var(--objp) !important}[style*="--v:"]{visibility:var(--v) !important}[style*="--z:"]{z-index:var(--z) !important}[style*="--of:"]{overflow:var(--of) !important}[style*="--ofx:"]{overflow-x:var(--ofx) !important}[style*="--ofy:"]{overflow-y:var(--ofy) !important}[style*="--w:"]{width:var(--w) !important}[style*="--h:"]{height:var(--h) !important}[style*="--minw:"]{min-width:var(--minw) !important}[style*="--minh:"]{min-height:var(--minh) !important}[style*="--maxw:"]{max-width:var(--maxw) !important}[style*="--maxh:"]{max-height:var(--maxh) !important}[style*="--bxs:"]{box-sizing:var(--bxs) !important}[style*="--p:"]{padding:var(--p) !important}[style*="--pl:"]{padding-left:var(--pl) !important}[style*="--pr:"]{padding-right:var(--pr) !important}[style*="--pt:"]{padding-top:var(--pt) !important}[style*="--pb:"]{padding-bottom:var(--pb) !important}[style*="--m:"]{margin:var(--m) !important}[style*="--ml:"]{margin-left:var(--ml) !important}[style*="--mr:"]{margin-right:var(--mr) !important}[style*="--mt:"]{margin-top:var(--mt) !important}[style*="--mb:"]{margin-bottom:var(--mb) !important}[style*="--c:"]{color:var(--c) !important}[style*="--ff:"]{font-family:var(--ff) !important}[style*="--size:"]{font-size:var(--size) !important}[style*="--fs:"]{font-style:var(--fs) !important}[style*="--weight:"]{font-weight:var(--weight) !important}[style*="--ls:"]{letter-spacing:var(--ls) !important}[style*="--lh:"]{line-height:var(--lh) !important}[style*="--lis:"]{list-style:var(--lis) !important}[style*="--list:"]{list-style-type:var(--list) !important}[style*="--lisp:"]{list-style-position:var(--lisp) !important}[style*="--ta:"]{text-align:var(--ta) !important}[style*="--td:"]{-webkit-text-decoration:var(--td) !important;text-decoration:var(--td) !important}[style*="--ts:"]{text-shadow:var(--ts) !important}[style*="--tt:"]{text-transform:var(--tt) !important}[style*="--wm:"]{-webkit-writing-mode:var(--wm) !important;-ms-writing-mode:var(--wm) !important;writing-mode:var(--wm) !important}[style*="--va:"]{vertical-align:var(--va) !important}[style*="--ws:"]{white-space:var(--ws) !important}[style*="--wb:"]{word-break:var(--wb) !important}[style*="--cc:"]{-moz-column-count:var(--cc) !important;column-count:var(--cc) !important}[style*="--cg:"]{-moz-column-gap:var(--cg) !important;column-gap:var(--cg) !important}[style*="--cr:"]{-moz-column-rule:var(--cr) !important;column-rule:var(--cr) !important}[style*="--cs:"]{-moz-column-span:var(--cs) !important;column-span:var(--cs) !important}[style*="--dir:"]{direction:var(--dir) !important}[style*="--bi:"]{page-break-inside:var(--bi);-moz-column-break-inside:var(--bi);break-inside:var(--bi)}[style*="--t:"]{transform:var(--t) !important}[style*="--to:"]{transform-origin:var(--to) !important}[style*="--tc:"]{transform-style:var(--tc) !important}[style*="--tn:"]{transition:var(--tn) !important}[style*="--td:"]{transition-delay:var(--td) !important}[style*="--tdn:"]{transition-duration:var(--tdn) !important}[style*="--tp:"]{transition-property:var(--tp) !important}[style*="-ttf:"]{transition-timing-function:var(-ttf) !important}[style*="--all:"]{all:var(--all) !important}[style*="--ct:"]{content:var(--ct) !important}[style*="--op:"]{opacity:var(--op) !important}[style*="--bs:"]{box-shadow:var(--bs) !important}[style*="--cr:"]{clear:var(--cr) !important}[style*="--ct:"]{content:var(--ct) !important}[style*="--fr:"]{-webkit-filter:var(--fr) !important;filter:var(--fr) !important}[style*="--grad:"]{background-image:linear-gradient(var(--grad),rgba(0,0,0,0),var(--grad-color,rgba(0,0,0,1)))}[style*="--grad-vars:"]{background-image:linear-gradient(var(--grad-vars),var(--primary),var(--secondary))}[style*="--bg-pattern-squares:"]{background-image:repeating-linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%,currentColor),repeating-linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%,currentColor);background-position:0 0,calc(var(--bg-pattern-squares) * 1px) calc(var(--bg-pattern-squares) * 1px);background-size:calc(var(--bg-pattern-squares) * 2px) calc(var(--bg-pattern-squares) * 2px)}[style*="--inset:"]{top:var(--inset);left:var(--inset);right:var(--inset);bottom:var(--inset)}[style*="--inset-top:"]{top:var(--inset-top);left:var(--inset-top);right:var(--inset-top)}[style*="--inset-bottom:"]{left:var(--inset-bottom);right:var(--inset-bottom);bottom:var(--inset-bottom)}[style*="--inset-top-left:"]{top:var(--inset-top-left);left:var(--inset-top-left)}[style*="--inset-top-right:"]{top:var(--inset-top-right);right:var(--inset-top-right)}[style*="--inset-bottom-left:"]{bottom:var(--inset-bottom-left);left:var(--inset-bottom-left)}[style*="--inset-bottom-right:"]{bottom:var(--inset-bottom-right);right:var(--inset-bottom-right)}[style*="--levitate:"]{box-shadow:0 calc(var(--levitate) * .5px) calc(var(--levitate) * .6px) rgba(0,0,0,calc(var(--levitate) * .013)),0 calc(var(--levitate) * 1px) calc(var(--levitate) * 1.2px) rgba(0,0,0,calc(var(--levitate) * .013)),0 calc(var(--levitate) * 2px) calc(var(--levitate) * 2.4px) rgba(0,0,0,calc(var(--levitate) * .013)),0 calc(var(--levitate) * 4px) calc(var(--levitate) * 4.4px) rgba(0,0,0,calc(var(--levitate) * .013));transform:translateY(calc(var(--levitate) * -1.2px))}[style*="--levitate-hvr:"]{transition:all .4s ease}[style*="--levitate-hvr:"]:hover,[style*="--levitate-hvr:"]:focus{box-shadow:0 calc(var(--levitate-hvr) * .5px) calc(var(--levitate-hvr) * .6px) rgba(0,0,0,calc(var(--levitate-hvr) * .013)),0 calc(var(--levitate-hvr) * 1px) calc(var(--levitate-hvr) * 1.2px) rgba(0,0,0,calc(var(--levitate-hvr) * .013)),0 calc(var(--levitate-hvr) * 2px) calc(var(--levitate-hvr) * 2.4px) rgba(0,0,0,calc(var(--levitate-hvr) * .013)),0 calc(var(--levitate-hvr) * 4px) calc(var(--levitate-hvr) * 4.4px) rgba(0,0,0,calc(var(--levitate-hvr) * .013));transform:translateY(calc(var(--levitate-hvr) * -1.2px))}[style*="--shadow:"]{box-shadow:0 calc(var(--shadow) * .1px) calc(var(--shadow) * .2px) rgba(0,0,0,calc(var(--shadow) * .02)),0 calc(var(--shadow) * .2px) calc(var(--shadow) * .4px) rgba(0,0,0,calc(var(--shadow) * .02)),0 calc(var(--shadow) * .4px) calc(var(--shadow) * .8px) rgba(0,0,0,calc(var(--shadow) * .02)),0 calc(var(--shadow) * .8px) calc(var(--shadow) * 1.6px) rgba(0,0,0,calc(var(--shadow) * .02))}[style*="--shadow-soft:"]{box-shadow:0 calc(var(--shadow-soft) * .3px) calc(var(--shadow-soft) * 1.1px) rgba(0,0,0,.1),0 calc(var(--shadow-soft) * .6px) calc(var(--shadow-soft) * 1.2px) rgba(0,0,0,.1),0 calc(var(--shadow-soft) * 1.2px) calc(var(--shadow-soft) * 1.4px) rgba(0,0,0,.1),0 calc(var(--shadow-soft) * 2.4px) calc(var(--shadow-soft) * 1.6px) rgba(0,0,0,.1)}[style*="--shadow-hard:"]{box-shadow:0 calc(var(--shadow-hard) * .75px) calc(var(--shadow-hard) * 1.3px) rgba(0,0,0,calc(var(--shadow-hard) * .12))}[style*="--shadow-vert:"]{box-shadow:0 calc(var(--shadow-vert) * 1.4px) calc(var(--shadow-vert) * 2px) calc(var(--shadow-vert) * -1.7px) rgba(0,0,0,calc(var(--shadow-vert) * .12))}[style*="--shadow-inset:"]{box-shadow:inset 0 calc(var(--shadow-inset) * .1px) calc(var(--shadow-inset) * .2px) rgba(0,0,0,calc(var(--shadow-inset) * .02)),inset 0 calc(var(--shadow-inset) * .2px) calc(var(--shadow-inset) * .4px) rgba(0,0,0,calc(var(--shadow-inset) * .02)),inset 0 calc(var(--shadow-inset) * .4px) calc(var(--shadow-inset) * .8px) rgba(0,0,0,calc(var(--shadow-inset) * .02)),inset 0 calc(var(--shadow-inset) * .8px) calc(var(--shadow-inset) * 1.6px) rgba(0,0,0,calc(var(--shadow-inset) * .02))}[style*="--shadow-hvr:"]{transition:all .4s ease}[style*="--shadow-hvr:"]:hover,[style*="--shadow-hvr:"]:focus{box-shadow:0 calc(var(--shadow-hvr) * .1px) calc(var(--shadow-hvr) * .2px) rgba(0,0,0,calc(var(--shadow-hvr) * .02)),0 calc(var(--shadow-hvr) * .2px) calc(var(--shadow-hvr) * .4px) rgba(0,0,0,calc(var(--shadow-hvr) * .02)),0 calc(var(--shadow-hvr) * .4px) calc(var(--shadow-hvr) * .8px) rgba(0,0,0,calc(var(--shadow-hvr) * .02)),0 calc(var(--shadow-hvr) * .8px) calc(var(--shadow-hvr) * 1.6px) rgba(0,0,0,calc(var(--shadow-hvr) * .02))}[style*="--px:"]{-webkit-padding-start:var(--px);padding-inline-start:var(--px);-webkit-padding-end:var(--px);padding-inline-end:var(--px)}[style*="--py:"]{-webkit-padding-before:var(--py);padding-block-start:var(--py);-webkit-padding-after:var(--py);padding-block-end:var(--py)}[style*="--mx:"]{-webkit-margin-start:var(--mx);margin-inline-start:var(--mx);-webkit-margin-end:var(--mx);margin-inline-end:var(--mx)}[style*="--my:"]{-webkit-margin-before:var(--my);margin-block-start:var(--my);-webkit-margin-after:var(--my);margin-block-end:var(--my)}[style*="--line-clamp:"]{display:-webkit-box;-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical;overflow:hidden}[style*="--text-3d:"]{text-shadow:6px 6px 10px rgba(255,255,255,.1),6px 6px var(--text-3d),5.75px 5.75px var(--text-3d),5.5px 5.5px var(--text-3d),5.25px 5.25px var(--text-3d),5px 5px var(--text-3d),4.75px 4.75px var(--text-3d),4.5px 4.5px var(--text-3d),4.25px 4.25px var(--text-3d),4px 4px var(--text-3d),3.75px 3.75px var(--text-3d),3.5px 3.5px var(--text-3d),3.25px 3.25px var(--text-3d),3px 3px var(--text-3d),2.75px 2.75px var(--text-3d),2.5px 2.5px var(--text-3d),2.25px 2.25px var(--text-3d),2px 2px var(--text-3d),1.75px 1.75px var(--text-3d),1.5px 1.5px var(--text-3d),1.25px 1.25px var(--text-3d),1px 1px var(--text-3d),.75px .75px var(--text-3d),.5px .5px var(--text-3d),.25px .25px var(--text-3d)}@media only screen and (min-width:440px){.grid[style*="--col-xs:"]{grid-template-columns:repeat(var(--col-xs,1),1fr)}.grid>[style*="--sc-xs:"]{grid-column:span var(--sc-xs,1)}.grid>[style*="--sr-xs:"]{grid-row:span var(--sr-xs,1)}}@media only screen and (min-width:640px){.grid[style*="--col-sm:"]{grid-template-columns:repeat(var(--col-sm,1),1fr)}.grid>[style*="--sc-sm:"]{grid-column:span var(--sc-sm,1)}.grid>[style*="--sr-sm:"]{grid-row:span var(--sr-sm,1)}[style*="--bg-sm:"]{background:var(--bg-sm) !important}[style*="--bga-sm:"]{background-attachment:var(--bga-sm) !important}[style*="--bgc-sm:"]{background-color:var(--bgc-sm) !important}[style*="--bgi-sm:"]{background-image:var(--bgi-sm) !important}[style*="--bgp-sm:"]{background-position:var(--bgp-sm) !important}[style*="--bgr-sm:"]{background-repeat:var(--bgr-sm) !important}[style*="--bgs-sm:"]{background-size:var(--bgs-sm) !important}[style*="--b-sm:"]{border:var(--b-sm) !important}[style*="--bc-sm:"]{border-color:var(--bc-sm) !important}[style*="--bs-sm:"]{border-style:var(--bs-sm) !important}[style*="--bw-sm:"]{border-width:var(--bw-sm) !important}[style*="--br-sm:"]{border-radius:var(--br-sm) !important}[style*="--radius-sm:"]{border-radius:var(--radius-sm) !important}[style*="--bt-sm:"]{border-top:var(--bt-sm) !important}[style*="--bl-sm:"]{border-left:var(--bl-sm) !important}[style*="--br-sm:"]{border-right:var(--br-sm) !important}[style*="--bb-sm:"]{border-bottom:var(--bb-sm) !important}[style*="--btlr-sm:"]{border-top-left-radius:var(--btlr-sm) !important}[style*="--btrr-sm:"]{border-top-right-radius:var(--btrr-sm) !important}[style*="--bblr-sm:"]{border-bottom-left-radius:var(--bblr-sm) !important}[style*="--bbrr-sm:"]{border-bottom-right-radius:var(--bbrr-sm) !important}[style*="--fx-sm:"]{flex:var(--fx-sm) !important}[style*="--fd-sm:"]{flex-direction:var(--fd-sm) !important}[style*="--fw-sm:"]{flex-wrap:var(--fw-sm) !important}[style*="--ac-sm:"]{align-content:var(--ac-sm) !important}[style*="--ai-sm:"]{align-items:var(--ai-sm) !important}[style*="--as-sm:"]{align-self:var(--as-sm) !important}[style*="--jc-sm:"]{justify-content:var(--jc-sm) !important}[style*="--fw-sm:"]{flex-grow:var(--fw-sm) !important}[style*="--fs-sm:"]{flex-shrink:var(--fs-sm) !important}[style*="--fb-sm:"]{flex-basis:var(--fb-sm) !important}[style*="--o-sm:"]{order:var(--o-sm) !important}[style*="--gtc-sm:"]{grid-template-columns:var(--gtc-sm) !important}[style*="--gtr-sm:"]{grid-template-rows:var(--gtr-sm) !important}[style*="--gac-sm:"]{grid-auto-columns:var(--gac-sm) !important}[style*="--gar-sm:"]{grid-auto-rows:var(--gar-sm) !important}[style*="--gc-sm:"]{grid-column:var(--gc-sm) !important}[style*="--gr-sm:"]{grid-row:var(--gr-sm) !important}[style*="--gg-sm:"]{grid-gap:var(--gg-sm) !important}[style*="--ps-sm:"]{place-self:var(--ps-sm) !important}[style*="--d-sm:"]{display:var(--d-sm) !important}[style*="--ft-sm:"]{float:var(--ft-sm) !important}[style*="--pos-sm:"]{position:var(--pos-sm) !important}[style*="--top-sm:"]{top:var(--top-sm) !important}[style*="--left-sm:"]{left:var(--left-sm) !important}[style*="--right-sm:"]{right:var(--right-sm) !important}[style*="--bottom-sm:"]{bottom:var(--bottom-sm) !important}[style*="--objf-sm:"]{-o-object-fit:var(--objf-sm) !important;object-fit:var(--objf-sm) !important}[style*="--objp-sm:"]{-o-object-position:var(--objp-sm) !important;object-position:var(--objp-sm) !important}[style*="--v-sm:"]{visibility:var(--v-sm) !important}[style*="--z-sm:"]{z-index:var(--z-sm) !important}[style*="--w-sm:"]{width:var(--w-sm) !important}[style*="--h-sm:"]{height:var(--h-sm) !important}[style*="--minw-sm:"]{min-width:var(--minw-sm) !important}[style*="--minh-sm:"]{min-height:var(--minh-sm) !important}[style*="--maxw-sm:"]{max-width:var(--maxw-sm) !important}[style*="--maxh-sm:"]{max-height:var(--maxh-sm) !important}[style*="--p-sm:"]{padding:var(--p-sm) !important}[style*="--pl-sm:"]{padding-left:var(--pl-sm) !important}[style*="--pr-sm:"]{padding-right:var(--pr-sm) !important}[style*="--pt-sm:"]{padding-top:var(--pt-sm) !important}[style*="--pb-sm:"]{padding-bottom:var(--pb-sm) !important}[style*="--m-sm:"]{margin:var(--m-sm) !important}[style*="--ml-sm:"]{margin-left:var(--ml-sm) !important}[style*="--mr-sm:"]{margin-right:var(--mr-sm) !important}[style*="--mt-sm:"]{margin-top:var(--mt-sm) !important}[style*="--mb-sm:"]{margin-bottom:var(--mb-sm) !important}[style*="--c-sm:"]{color:var(--c-sm) !important}[style*="--size-sm:"]{font-size:var(--size-sm) !important}[style*="--ls-sm:"]{letter-spacing:var(--ls-sm) !important}[style*="--lh-sm:"]{line-height:var(--lh-sm) !important}[style*="--ta-sm:"]{text-align:var(--ta-sm) !important}[style*="--wm-sm:"]{-webkit-writing-mode:var(--wm-sm) !important;-ms-writing-mode:var(--wm-sm) !important;writing-mode:var(--wm-sm) !important}[style*="--ws-sm:"]{white-space:var(--ws-sm) !important}[style*="--wb-sm:"]{word-break:var(--wb-sm) !important}[style*="--cc-sm:"]{-moz-column-count:var(--cc-sm) !important;column-count:var(--cc-sm) !important}[style*="--cg-sm:"]{-moz-column-gap:var(--cg-sm) !important;column-gap:var(--cg-sm) !important}[style*="--cr-sm:"]{-moz-column-rule:var(--cr-sm) !important;column-rule:var(--cr-sm) !important}[style*="--cs-sm:"]{-moz-column-span:var(--cs-sm) !important;column-span:var(--cs-sm) !important}[style*="--dir-sm:"]{direction:var(--dir-sm) !important}[style*="--t-sm:"]{transform:var(--t-sm) !important}[style*="--to-sm:"]{transform-origin:var(--to-sm) !important}[style*="--tc-sm:"]{transform-style:var(--tc-sm) !important}[style*="--tn-sm:"]{transition:var(--tn-sm) !important}[style*="--td-sm:"]{transition-delay:var(--td-sm) !important}[style*="--tdn-sm:"]{transition-duration:var(--tdn-sm) !important}[style*="--tp-sm:"]{transition-property:var(--tp-sm) !important}[style*="-ttf-sm:"]{transition-timing-function:var(-ttf-sm) !important}[style*="--ct-sm:"]{content:var(--ct-sm) !important}[style*="--op-sm:"]{opacity:var(--op-sm) !important}[style*="--bs-sm:"]{box-shadow:var(--bs-sm) !important}}@media only screen and (min-width:960px){.grid[style*="--col-md:"]{grid-template-columns:repeat(var(--col-md,1),1fr)}.grid>[style*="--sc-md:"]{grid-column:span var(--sc-md,1)}.grid>[style*="--sr-md:"]{grid-row:span var(--sr-md,1)}}@media only screen and (min-width:1280px){.grid[style*="--col-lg:"]{grid-template-columns:repeat(var(--col-lg,1),1fr)}.grid>[style*="--sc-lg:"]{grid-column:span var(--sc-lg,1)}.grid>[style*="--sr-lg:"]{grid-row:span var(--sr-lg,1)}[style*="--bg-xl:"]{background:var(--bg-xl) !important}[style*="--bga-xl:"]{background-attachment:var(--bga-xl) !important}[style*="--bgc-xl:"]{background-color:var(--bgc-xl) !important}[style*="--bgi-xl:"]{background-image:var(--bgi-xl) !important}[style*="--bgp-xl:"]{background-position:var(--bgp-xl) !important}[style*="--bgr-xl:"]{background-repeat:var(--bgr-xl) !important}[style*="--bgs-xl:"]{background-size:var(--bgs-xl) !important}[style*="--b-xl:"]{border:var(--b-xl) !important}[style*="--bc-xl:"]{border-color:var(--bc-xl) !important}[style*="--bs-xl:"]{border-style:var(--bs-xl) !important}[style*="--bw-xl:"]{border-width:var(--bw-xl) !important}[style*="--br-xl:"]{border-radius:var(--br-xl) !important}[style*="--radius-xl:"]{border-radius:var(--radius-xl) !important}[style*="--bt-xl:"]{border-top:var(--bt-xl) !important}[style*="--bl-xl:"]{border-left:var(--bl-xl) !important}[style*="--br-xl:"]{border-right:var(--br-xl) !important}[style*="--bb-xl:"]{border-bottom:var(--bb-xl) !important}[style*="--btlr-xl:"]{border-top-left-radius:var(--btlr-xl) !important}[style*="--btrr-xl:"]{border-top-right-radius:var(--btrr-xl) !important}[style*="--bblr-xl:"]{border-bottom-left-radius:var(--bblr-xl) !important}[style*="--bbrr-xl:"]{border-bottom-right-radius:var(--bbrr-xl) !important}[style*="--fx-xl:"]{flex:var(--fx-xl) !important}[style*="--fd-xl:"]{flex-direction:var(--fd-xl) !important}[style*="--fw-xl:"]{flex-wrap:var(--fw-xl) !important}[style*="--ac-xl:"]{align-content:var(--ac-xl) !important}[style*="--ai-xl:"]{align-items:var(--ai-xl) !important}[style*="--as-xl:"]{align-self:var(--as-xl) !important}[style*="--jc-xl:"]{justify-content:var(--jc-xl) !important}[style*="--fw-xl:"]{flex-grow:var(--fw-xl) !important}[style*="--fs-xl:"]{flex-shrink:var(--fs-xl) !important}[style*="--fb-xl:"]{flex-basis:var(--fb-xl) !important}[style*="--o-xl:"]{order:var(--o-xl) !important}[style*="--gtc-xl:"]{grid-template-columns:var(--gtc-xl) !important}[style*="--gtr-xl:"]{grid-template-rows:var(--gtr-xl) !important}[style*="--gac-xl:"]{grid-auto-columns:var(--gac-xl) !important}[style*="--gar-xl:"]{grid-auto-rows:var(--gar-xl) !important}[style*="--gc-xl:"]{grid-column:var(--gc-xl) !important}[style*="--gr-xl:"]{grid-row:var(--gr-xl) !important}[style*="--gg-xl:"]{grid-gap:var(--gg-xl) !important}[style*="--ps-xl:"]{place-self:var(--ps-xl) !important}[style*="--d-xl:"]{display:var(--d-xl) !important}[style*="--ft-xl:"]{float:var(--ft-xl) !important}[style*="--pos-xl:"]{position:var(--pos-xl) !important}[style*="--top-xl:"]{top:var(--top-xl) !important}[style*="--left-xl:"]{left:var(--left-xl) !important}[style*="--right-xl:"]{right:var(--right-xl) !important}[style*="--bottom-xl:"]{bottom:var(--bottom-xl) !important}[style*="--objf-xl:"]{-o-object-fit:var(--objf-xl) !important;object-fit:var(--objf-xl) !important}[style*="--objp-xl:"]{-o-object-position:var(--objp-xl) !important;object-position:var(--objp-xl) !important}[style*="--v-xl:"]{visibility:var(--v-xl) !important}[style*="--z-xl:"]{z-index:var(--z-xl) !important}[style*="--w-xl:"]{width:var(--w-xl) !important}[style*="--h-xl:"]{height:var(--h-xl) !important}[style*="--minw-xl:"]{min-width:var(--minw-xl) !important}[style*="--minh-xl:"]{min-height:var(--minh-xl) !important}[style*="--maxw-xl:"]{max-width:var(--maxw-xl) !important}[style*="--maxh-xl:"]{max-height:var(--maxh-xl) !important}[style*="--p-xl:"]{padding:var(--p-xl) !important}[style*="--pl-xl:"]{padding-left:var(--pl-xl) !important}[style*="--pr-xl:"]{padding-right:var(--pr-xl) !important}[style*="--pt-xl:"]{padding-top:var(--pt-xl) !important}[style*="--pb-xl:"]{padding-bottom:var(--pb-xl) !important}[style*="--m-xl:"]{margin:var(--m-xl) !important}[style*="--ml-xl:"]{margin-left:var(--ml-xl) !important}[style*="--mr-xl:"]{margin-right:var(--mr-xl) !important}[style*="--mt-xl:"]{margin-top:var(--mt-xl) !important}[style*="--mb-xl:"]{margin-bottom:var(--mb-xl) !important}[style*="--c-xl:"]{color:var(--c-xl) !important}[style*="--size-xl:"]{font-size:var(--size-xl) !important}[style*="--ls-xl:"]{letter-spacing:var(--ls-xl) !important}[style*="--lh-xl:"]{line-height:var(--lh-xl) !important}[style*="--ta-xl:"]{text-align:var(--ta-xl) !important}[style*="--wm-xl:"]{-webkit-writing-mode:var(--wm-xl) !important;-ms-writing-mode:var(--wm-xl) !important;writing-mode:var(--wm-xl) !important}[style*="--ws-xl:"]{white-space:var(--ws-xl) !important}[style*="--wb-xl:"]{word-break:var(--wb-xl) !important}[style*="--cc-xl:"]{-moz-column-count:var(--cc-xl) !important;column-count:var(--cc-xl) !important}[style*="--cg-xl:"]{-moz-column-gap:var(--cg-xl) !important;column-gap:var(--cg-xl) !important}[style*="--cr-xl:"]{-moz-column-rule:var(--cr-xl) !important;column-rule:var(--cr-xl) !important}[style*="--cs-xl:"]{-moz-column-span:var(--cs-xl) !important;column-span:var(--cs-xl) !important}[style*="--dir-xl:"]{direction:var(--dir-xl) !important}[style*="--t-xl:"]{transform:var(--t-xl) !important}[style*="--to-xl:"]{transform-origin:var(--to-xl) !important}[style*="--tc-xl:"]{transform-style:var(--tc-xl) !important}[style*="--tn-xl:"]{transition:var(--tn-xl) !important}[style*="--td-xl:"]{transition-delay:var(--td-xl) !important}[style*="--tdn-xl:"]{transition-duration:var(--tdn-xl) !important}[style*="--tp-xl:"]{transition-property:var(--tp-xl) !important}[style*="-ttf-xl:"]{transition-timing-function:var(-ttf-xl) !important}[style*="--ct-xl:"]{content:var(--ct-xl) !important}[style*="--op-xl:"]{opacity:var(--op-xl) !important}[style*="--bs-xl:"]{box-shadow:var(--bs-xl) !important}}@media only screen and (min-width:768px){[style*="--bg-md:"]{background:var(--bg-md) !important}[style*="--bga-md:"]{background-attachment:var(--bga-md) !important}[style*="--bgc-md:"]{background-color:var(--bgc-md) !important}[style*="--bgi-md:"]{background-image:var(--bgi-md) !important}[style*="--bgp-md:"]{background-position:var(--bgp-md) !important}[style*="--bgr-md:"]{background-repeat:var(--bgr-md) !important}[style*="--bgs-md:"]{background-size:var(--bgs-md) !important}[style*="--b-md:"]{border:var(--b-md) !important}[style*="--bc-md:"]{border-color:var(--bc-md) !important}[style*="--bs-md:"]{border-style:var(--bs-md) !important}[style*="--bw-md:"]{border-width:var(--bw-md) !important}[style*="--br-md:"]{border-radius:var(--br-md) !important}[style*="--radius-md:"]{border-radius:var(--radius-md) !important}[style*="--bt-md:"]{border-top:var(--bt-md) !important}[style*="--bl-md:"]{border-left:var(--bl-md) !important}[style*="--br-md:"]{border-right:var(--br-md) !important}[style*="--bb-md:"]{border-bottom:var(--bb-md) !important}[style*="--btlr-md:"]{border-top-left-radius:var(--btlr-md) !important}[style*="--btrr-md:"]{border-top-right-radius:var(--btrr-md) !important}[style*="--bblr-md:"]{border-bottom-left-radius:var(--bblr-md) !important}[style*="--bbrr-md:"]{border-bottom-right-radius:var(--bbrr-md) !important}[style*="--fx-md:"]{flex:var(--fx-md) !important}[style*="--fd-md:"]{flex-direction:var(--fd-md) !important}[style*="--fw-md:"]{flex-wrap:var(--fw-md) !important}[style*="--ac-md:"]{align-content:var(--ac-md) !important}[style*="--ai-md:"]{align-items:var(--ai-md) !important}[style*="--as-md:"]{align-self:var(--as-md) !important}[style*="--jc-md:"]{justify-content:var(--jc-md) !important}[style*="--fw-md:"]{flex-grow:var(--fw-md) !important}[style*="--fs-md:"]{flex-shrink:var(--fs-md) !important}[style*="--fb-md:"]{flex-basis:var(--fb-md) !important}[style*="--o-md:"]{order:var(--o-md) !important}[style*="--gtc-md:"]{grid-template-columns:var(--gtc-md) !important}[style*="--gtr-md:"]{grid-template-rows:var(--gtr-md) !important}[style*="--gac-md:"]{grid-auto-columns:var(--gac-md) !important}[style*="--gar-md:"]{grid-auto-rows:var(--gar-md) !important}[style*="--gc-md:"]{grid-column:var(--gc-md) !important}[style*="--gr-md:"]{grid-row:var(--gr-md) !important}[style*="--gg-md:"]{grid-gap:var(--gg-md) !important}[style*="--ps-md:"]{place-self:var(--ps-md) !important}[style*="--d-md:"]{display:var(--d-md) !important}[style*="--ft-md:"]{float:var(--ft-md) !important}[style*="--pos-md:"]{position:var(--pos-md) !important}[style*="--top-md:"]{top:var(--top-md) !important}[style*="--left-md:"]{left:var(--left-md) !important}[style*="--right-md:"]{right:var(--right-md) !important}[style*="--bottom-md:"]{bottom:var(--bottom-md) !important}[style*="--objf-md:"]{-o-object-fit:var(--objf-md) !important;object-fit:var(--objf-md) !important}[style*="--objp-md:"]{-o-object-position:var(--objp-md) !important;object-position:var(--objp-md) !important}[style*="--v-md:"]{visibility:var(--v-md) !important}[style*="--z-md:"]{z-index:var(--z-md) !important}[style*="--w-md:"]{width:var(--w-md) !important}[style*="--h-md:"]{height:var(--h-md) !important}[style*="--minw-md:"]{min-width:var(--minw-md) !important}[style*="--minh-md:"]{min-height:var(--minh-md) !important}[style*="--maxw-md:"]{max-width:var(--maxw-md) !important}[style*="--maxh-md:"]{max-height:var(--maxh-md) !important}[style*="--p-md:"]{padding:var(--p-md) !important}[style*="--pl-md:"]{padding-left:var(--pl-md) !important}[style*="--pr-md:"]{padding-right:var(--pr-md) !important}[style*="--pt-md:"]{padding-top:var(--pt-md) !important}[style*="--pb-md:"]{padding-bottom:var(--pb-md) !important}[style*="--m-md:"]{margin:var(--m-md) !important}[style*="--ml-md:"]{margin-left:var(--ml-md) !important}[style*="--mr-md:"]{margin-right:var(--mr-md) !important}[style*="--mt-md:"]{margin-top:var(--mt-md) !important}[style*="--mb-md:"]{margin-bottom:var(--mb-md) !important}[style*="--c-md:"]{color:var(--c-md) !important}[style*="--size-md:"]{font-size:var(--size-md) !important}[style*="--ls-md:"]{letter-spacing:var(--ls-md) !important}[style*="--lh-md:"]{line-height:var(--lh-md) !important}[style*="--ta-md:"]{text-align:var(--ta-md) !important}[style*="--wm-md:"]{-webkit-writing-mode:var(--wm-md) !important;-ms-writing-mode:var(--wm-md) !important;writing-mode:var(--wm-md) !important}[style*="--ws-md:"]{white-space:var(--ws-md) !important}[style*="--wb-md:"]{word-break:var(--wb-md) !important}[style*="--cc-md:"]{-moz-column-count:var(--cc-md) !important;column-count:var(--cc-md) !important}[style*="--cg-md:"]{-moz-column-gap:var(--cg-md) !important;column-gap:var(--cg-md) !important}[style*="--cr-md:"]{-moz-column-rule:var(--cr-md) !important;column-rule:var(--cr-md) !important}[style*="--cs-md:"]{-moz-column-span:var(--cs-md) !important;column-span:var(--cs-md) !important}[style*="--dir-md:"]{direction:var(--dir-md) !important}[style*="--t-md:"]{transform:var(--t-md) !important}[style*="--to-md:"]{transform-origin:var(--to-md) !important}[style*="--tc-md:"]{transform-style:var(--tc-md) !important}[style*="--tn-md:"]{transition:var(--tn-md) !important}[style*="--td-md:"]{transition-delay:var(--td-md) !important}[style*="--tdn-md:"]{transition-duration:var(--tdn-md) !important}[style*="--tp-md:"]{transition-property:var(--tp-md) !important}[style*="-ttf-md:"]{transition-timing-function:var(-ttf-md) !important}[style*="--ct-md:"]{content:var(--ct-md) !important}[style*="--op-md:"]{opacity:var(--op-md) !important}[style*="--bs-md:"]{box-shadow:var(--bs-md) !important}}@media only screen and (min-width:1024px){[style*="--bg-lg:"]{background:var(--bg-lg) !important}[style*="--bga-lg:"]{background-attachment:var(--bga-lg) !important}[style*="--bgc-lg:"]{background-color:var(--bgc-lg) !important}[style*="--bgi-lg:"]{background-image:var(--bgi-lg) !important}[style*="--bgp-lg:"]{background-position:var(--bgp-lg) !important}[style*="--bgr-lg:"]{background-repeat:var(--bgr-lg) !important}[style*="--bgs-lg:"]{background-size:var(--bgs-lg) !important}[style*="--b-lg:"]{border:var(--b-lg) !important}[style*="--bc-lg:"]{border-color:var(--bc-lg) !important}[style*="--bs-lg:"]{border-style:var(--bs-lg) !important}[style*="--bw-lg:"]{border-width:var(--bw-lg) !important}[style*="--br-lg:"]{border-radius:var(--br-lg) !important}[style*="--radius-lg:"]{border-radius:var(--radius-lg) !important}[style*="--bt-lg:"]{border-top:var(--bt-lg) !important}[style*="--bl-lg:"]{border-left:var(--bl-lg) !important}[style*="--br-lg:"]{border-right:var(--br-lg) !important}[style*="--bb-lg:"]{border-bottom:var(--bb-lg) !important}[style*="--btlr-lg:"]{border-top-left-radius:var(--btlr-lg) !important}[style*="--btrr-lg:"]{border-top-right-radius:var(--btrr-lg) !important}[style*="--bblr-lg:"]{border-bottom-left-radius:var(--bblr-lg) !important}[style*="--bbrr-lg:"]{border-bottom-right-radius:var(--bbrr-lg) !important}[style*="--fx-lg:"]{flex:var(--fx-lg) !important}[style*="--fd-lg:"]{flex-direction:var(--fd-lg) !important}[style*="--fw-lg:"]{flex-wrap:var(--fw-lg) !important}[style*="--ac-lg:"]{align-content:var(--ac-lg) !important}[style*="--ai-lg:"]{align-items:var(--ai-lg) !important}[style*="--as-lg:"]{align-self:var(--as-lg) !important}[style*="--jc-lg:"]{justify-content:var(--jc-lg) !important}[style*="--fw-lg:"]{flex-grow:var(--fw-lg) !important}[style*="--fs-lg:"]{flex-shrink:var(--fs-lg) !important}[style*="--fb-lg:"]{flex-basis:var(--fb-lg) !important}[style*="--o-lg:"]{order:var(--o-lg) !important}[style*="--gtc-lg:"]{grid-template-columns:var(--gtc-lg) !important}[style*="--gtr-lg:"]{grid-template-rows:var(--gtr-lg) !important}[style*="--gac-lg:"]{grid-auto-columns:var(--gac-lg) !important}[style*="--gar-lg:"]{grid-auto-rows:var(--gar-lg) !important}[style*="--gc-lg:"]{grid-column:var(--gc-lg) !important}[style*="--gr-lg:"]{grid-row:var(--gr-lg) !important}[style*="--gg-lg:"]{grid-gap:var(--gg-lg) !important}[style*="--ps-lg:"]{place-self:var(--ps-lg) !important}[style*="--d-lg:"]{display:var(--d-lg) !important}[style*="--ft-lg:"]{float:var(--ft-lg) !important}[style*="--pos-lg:"]{position:var(--pos-lg) !important}[style*="--top-lg:"]{top:var(--top-lg) !important}[style*="--left-lg:"]{left:var(--left-lg) !important}[style*="--right-lg:"]{right:var(--right-lg) !important}[style*="--bottom-lg:"]{bottom:var(--bottom-lg) !important}[style*="--objf-lg:"]{-o-object-fit:var(--objf-lg) !important;object-fit:var(--objf-lg) !important}[style*="--objp-lg:"]{-o-object-position:var(--objp-lg) !important;object-position:var(--objp-lg) !important}[style*="--v-lg:"]{visibility:var(--v-lg) !important}[style*="--z-lg:"]{z-index:var(--z-lg) !important}[style*="--w-lg:"]{width:var(--w-lg) !important}[style*="--h-lg:"]{height:var(--h-lg) !important}[style*="--minw-lg:"]{min-width:var(--minw-lg) !important}[style*="--minh-lg:"]{min-height:var(--minh-lg) !important}[style*="--maxw-lg:"]{max-width:var(--maxw-lg) !important}[style*="--maxh-lg:"]{max-height:var(--maxh-lg) !important}[style*="--p-lg:"]{padding:var(--p-lg) !important}[style*="--pl-lg:"]{padding-left:var(--pl-lg) !important}[style*="--pr-lg:"]{padding-right:var(--pr-lg) !important}[style*="--pt-lg:"]{padding-top:var(--pt-lg) !important}[style*="--pb-lg:"]{padding-bottom:var(--pb-lg) !important}[style*="--m-lg:"]{margin:var(--m-lg) !important}[style*="--ml-lg:"]{margin-left:var(--ml-lg) !important}[style*="--mr-lg:"]{margin-right:var(--mr-lg) !important}[style*="--mt-lg:"]{margin-top:var(--mt-lg) !important}[style*="--mb-lg:"]{margin-bottom:var(--mb-lg) !important}[style*="--c-lg:"]{color:var(--c-lg) !important}[style*="--size-lg:"]{font-size:var(--size-lg) !important}[style*="--ls-lg:"]{letter-spacing:var(--ls-lg) !important}[style*="--lh-lg:"]{line-height:var(--lh-lg) !important}[style*="--ta-lg:"]{text-align:var(--ta-lg) !important}[style*="--wm-lg:"]{-webkit-writing-mode:var(--wm-lg) !important;-ms-writing-mode:var(--wm-lg) !important;writing-mode:var(--wm-lg) !important}[style*="--ws-lg:"]{white-space:var(--ws-lg) !important}[style*="--wb-lg:"]{word-break:var(--wb-lg) !important}[style*="--cc-lg:"]{-moz-column-count:var(--cc-lg) !important;column-count:var(--cc-lg) !important}[style*="--cg-lg:"]{-moz-column-gap:var(--cg-lg) !important;column-gap:var(--cg-lg) !important}[style*="--cr-lg:"]{-moz-column-rule:var(--cr-lg) !important;column-rule:var(--cr-lg) !important}[style*="--cs-lg:"]{-moz-column-span:var(--cs-lg) !important;column-span:var(--cs-lg) !important}[style*="--dir-lg:"]{direction:var(--dir-lg) !important}[style*="--t-lg:"]{transform:var(--t-lg) !important}[style*="--to-lg:"]{transform-origin:var(--to-lg) !important}[style*="--tc-lg:"]{transform-style:var(--tc-lg) !important}[style*="--tn-lg:"]{transition:var(--tn-lg) !important}[style*="--td-lg:"]{transition-delay:var(--td-lg) !important}[style*="--tdn-lg:"]{transition-duration:var(--tdn-lg) !important}[style*="--tp-lg:"]{transition-property:var(--tp-lg) !important}[style*="-ttf-lg:"]{transition-timing-function:var(-ttf-lg) !important}[style*="--ct-lg:"]{content:var(--ct-lg) !important}[style*="--op-lg:"]{opacity:var(--op-lg) !important}[style*="--bs-lg:"]{box-shadow:var(--bs-lg) !important}} \ No newline at end of file +:root{--white:#fff;--grey:#e6e6e6;--black:#262626;--green:#06847d;--blue:#4a69bd;--orange:#a46313;--red:#e02e06;--primary:var(--blue);--secondary:var(--green);--background:#fff;--background-alt:#f8fafc;--selection:#9e9e9e;--text-main:#4a4a4a;--text-bright:#000;--text-muted:#707070;--links:var(--primary);--focus:rgba(74,105,189,.35);--border:rgba(0,0,0,.2);--border-radius:4px;--code:#000;--animation-duration:.1s;--button-hover:#ddd;--form-placeholder:#949494;--form-text:#000;--variable:#39a33c;--highlight:#ff0;--select-arrow:url("data:image/svg+xml;charset=utf-8,%3Csvgxmlns='http://www.w3.org/2000/svg'height='62.5'width='116.9'fill='%23161f27'%3E%3Cpathd='M115.31.6c-1.6-1.6-4.2-1.6-5.80l-5151.1L7.41.6C5.803.201.61.603.205.81.67.4l53.953.9c.8.81.81.22.91.2102.1-.42.9-1.2l53.9-53.9c1.7-1.61.7-4.2.1-5.8z'/%3E%3C/svg%3E");--heading-margin:.5rem 0 .75rem;--typo-size-1:2.8rem;--typo-size-2:2.2rem;--typo-size-3:1.8rem;--typo-size-4:1.4rem;--typo-size-5:1.2rem;--typo-size-6:1rem;--accent-border:0;--accent-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}*,::before,::after{box-sizing:border-box}html{font-family:-apple-system,BlinkMacSystemFont,Avenir,"Avenir Next","Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:15px;line-height:1.6;font-weight:400;color:var(--text-main);background:var(--background-body);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizeLegibility}body{margin:0;font-size:1em}code,samp,time{background:var(--background);color:var(--code);padding:2.5px 5px;border-radius:6px;font-size:1em}pre>code{padding:10px;display:block;overflow-x:auto}var{color:var(--variable);font-style:normal;font-family:monospace}kbd{background:var(--background);border:1px solid var(--border);border-radius:2px;color:var(--text-main);padding:2px 4px 2px 4px}button,input,textarea{transition:background-color var(--animation-duration) linear,border-color var(--animation-duration) linear,color var(--animation-duration) linear,transform var(--animation-duration) ease}button,select,input[type="submit"],input[type="button"],input[type="checkbox"],input[type="range"],input[type="radio"]{cursor:pointer}input:not([type="checkbox"]):not([type="radio"]),select{display:block}input,button,textarea,select,details>summary,.tag{color:var(--form-text);background-color:var(--background);font-family:inherit;font-size:inherit;white-space:nowrap;position:relative;margin:.5rem .5rem .5rem 0;padding:10px 12px;width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--border-radius);outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}select{background:var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;padding-right:35px}select::-ms-expand{display:none}select[multiple]{padding-right:10px;background-image:none;overflow-y:auto}button,input[type="submit"],input[type="button"],input[type="reset"]{padding-right:28px;padding-left:28px;width:auto;background-color:var(--btn-bg,var(--primary));color:var(--btn-c,var(--white));box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}button:hover,input[type="submit"]:hover,input[type="button"]:hover{box-shadow:inset 0 0 2rem rgba(0,0,0,.25)}input:not([readonly]):hover,select:not([readonly]):hover,textarea:not([readonly]):hover{border-color:rgba(100,100,100,.75)}input[type='checkbox']:active,input[type='radio']:active,input[type='submit']:active,input[type='button']:active,input[type='range']:active,button:active{background-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1))}input:focus,select:focus,button:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--focus)}input[type="checkbox"],input[type="radio"]{position:relative;width:20px;min-width:auto;height:20px;display:inline-block;vertical-align:middle;padding:1px;margin:0;margin-right:2px}input[type="radio"]{border-radius:50%;box-shadow:inset 0 0 2px rgba(0,0,0,.4),inset 0 0 0 4px #fff}input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--primary)}input[type="checkbox"]:checked::before{display:flex;justify-content:center;content:"✔";color:white;font-size:.8rem}input[type="range"]{padding:0}input[type="color"]{padding:2px;width:5rem;height:2.5rem}input:disabled,select:disabled,button:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:var(--form-placeholder)}::-moz-placeholder{color:var(--form-placeholder)}:-ms-input-placeholder{color:var(--form-placeholder)}::-ms-input-placeholder{color:var(--form-placeholder)}::placeholder{color:var(--form-placeholder)}legend{font-size:.9em;font-weight:600}fieldset{border:1px var(--border) solid;border-radius:var(--border-radius);margin:0;-webkit-margin-after:.5rem;margin-block-end:.5rem;padding:.75rem 1.5rem}fieldset>legend:first-of-type{padding:0 .5rem;font-size:1.1rem;font-weight:normal}.tag{align-items:center;display:inline-flex;font-size:.8rem;color:var(--tag-c,var(--white));background-color:var(--tag-bg,var(--primary));width:auto;height:2em;justify-content:center;padding:0 .75em 2px;border:0;box-shadow:none}.group{display:inline-flex;justify-self:flex-start;margin:.5rem 1rem .5rem 0}.group>*{margin:0}.group:not(.vertical)>*+*{-webkit-margin-start:-1px;margin-inline-start:-1px}.group:not(.vertical)>*:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.group:not(.vertical)>*:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.group.vertical{flex-direction:column}.group.vertical>*+*{-webkit-margin-before:-1px;margin-block-start:-1px}.group.vertical>*:not(:last-child){border-bottom-left-radius:0;border-bottom-right-radius:0}.group.vertical>*:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.grid{display:grid;grid-template-columns:repeat(var(--col,1),1fr);grid-gap:var(--gap,1rem)}img{max-width:100%;height:auto}hr{border:0;border-top:1px solid var(--border)}::-moz-selection{background-color:var(--selection)}::selection{background-color:var(--selection)}footer{font-size:.8em;color:var(--text-muted)}svg{display:inline-block;font-size:inherit;height:1.2em;vertical-align:-.2em;overflow:visible}figure{display:inline-flex;flex-direction:column;margin:0}figure figcaption{padding:.75rem 1.5rem;margin:0}table{border-collapse:collapse;margin-bottom:10px;width:100%}caption{padding:.5rem 0;text-align:start;caption-side:top}td,th{padding:.5rem;text-align:start}th{background:rgba(100,100,100,.025)}thead{border-bottom:1px solid rgba(100,100,100,.2)}tr+tr,tfoot{border-top:1px solid rgba(100,100,100,.2)}h1,h2,h3,h4,h5,h6{font-weight:normal;line-height:1.3em;margin:var(--heading-margin);color:var(--text-c,inherit)}h1{font-size:var(--typo-size-1)}h2{font-size:var(--typo-size-2)}h3{font-size:var(--typo-size-3)}h4{font-size:var(--typo-size-4)}h5{font-size:var(--typo-size-5)}h6{font-size:var(--typo-size-6);line-height:1.6em}p,table{margin:0 0 1rem}a{color:var(--links);text-decoration:none}b,strong,th{font-weight:bold}blockquote{border-left:4px solid var(--primary);background-color:#fff;margin:1.5rem 0;padding:1rem 1.5rem;font-style:italic}blockquote>footer{font-style:normal;border:0}blockquote cite{font-style:normal}ul,ol{padding:0;-webkit-padding-start:2rem;padding-inline-start:2rem}ul{list-style:disc}dt{font-weight:bold}dd{margin:0 1rem}address{font-style:normal}mark{background-color:var(--highlight);border-radius:2px;padding:0 2px 0 2px}.primary{--text-c:var(--primary);--btn-bg:var(--primary);--tag-bg:var(--primary);--accent-bg:var(--primary)}.secondary{--text-c:var(--secondary);--btn-bg:var(--secondary);--tag-bg:var(--secondary);--accent-bg:var(--secondary)}.green{--text-c:var(--green);--btn-bg:var(--green);--tag-bg:var(--green);--accent-bg:var(--green)}.blue{--text-c:var(--blue);--btn-bg:var(--blue);--tag-bg:var(--blue);--accent-bg:var(--blue)}.orange{--text-c:var(--orange);--btn-bg:var(--orange);--tag-bg:var(--orange);--accent-bg:var(--orange)}.red{--text-c:var(--red);--btn-bg:var(--red);--tag-bg:var(--red);--accent-bg:var(--red)}.white{--text-c:var(--white);--btn-bg:var(--white);--btn-c:var(--text-main);--tag-bg:var(--white);--tag-c:var(--text-main);--accent-bg:var(--white)}.grey{--text-c:var(--grey);--btn-bg:var(--grey);--btn-c:var(--text-main);--tag-bg:var(--grey);--tag-c:var(--text-main);--accent-bg:var(--grey)}.black{--text-c:var(--black);--btn-bg:var(--black);--tag-bg:var(--black);--accent-bg:var(--black)}.accent{color:var(--accent-c,var(--text-main));background-color:var(--accent-bg,var(--white));border:var(--accent-border,0);border-radius:var(--border-radius,0);box-shadow:var(--accent-shadow,none);overflow:hidden}.accent.primary,.accent.secondary,.accent.green,.accent.blue,.accent.red,.accent.orange,.accent.black{--accent-c:var(--white);--text-c:var(--white)}[style*="--bg:"]{background:var(--bg) !important}[style*="--bga:"]{background-attachment:var(--bga) !important}[style*="--bgc:"]{background-color:var(--bgc) !important}[style*="--bgi:"]{background-image:var(--bgi) !important}[style*="--bgp:"]{background-position:var(--bgp) !important}[style*="--bgr:"]{background-repeat:var(--bgr) !important}[style*="--bgs:"]{background-size:var(--bgs) !important}[style*="--hvr-bg:"]:hover{background:var(--hvr-bg,var(--background))}[style*="--hvr-bgc:"]:hover{background-color:var(--hvr-bgc,var(--background-color))}[style*="--grad-top:"]{background-image:linear-gradient(0,transparent,var(--grad-bottom))}[style*="--grad-bottom:"]{background-image:linear-gradient(180deg,transparent,var(--grad-bottom))}[style*="--b:"]{border:var(--b) !important}[style*="--bc:"]{border-color:var(--bc) !important}[style*="--bs:"]{border-style:var(--bs) !important}[style*="--bw:"]{border-width:var(--bw) !important}[style*="--br:"]{border-radius:var(--br) !important}[style*="--radius:"]{border-radius:var(--radius) !important}[style*="--bt:"]{border-top:var(--bt) !important}[style*="--bl:"]{border-left:var(--bl) !important}[style*="--br:"]{border-right:var(--br) !important}[style*="--bb:"]{border-bottom:var(--bb) !important}[style*="--btlr:"]{border-top-left-radius:var(--btlr) !important}[style*="--btrr:"]{border-top-right-radius:var(--btrr) !important}[style*="--bblr:"]{border-bottom-left-radius:var(--bblr) !important}[style*="--bbrr:"]{border-bottom-right-radius:var(--bbrr) !important}[style*="--hvr-b:"]:hover{border:var(--hvr-b,var(--border))}[style*="--hvr-bc:"]:hover{border-color:var(--hvr-bc,var(--border-color))}[style*="--fx:"]{flex:var(--fx) !important}[style*="--fd:"]{flex-direction:var(--fd) !important}[style*="--fw:"]{flex-wrap:var(--fw) !important}[style*="--ac:"]{align-content:var(--ac) !important}[style*="--ai:"]{align-items:var(--ai) !important}[style*="--as:"]{align-self:var(--as) !important}[style*="--jc:"]{justify-content:var(--jc) !important}[style*="--fw:"]{flex-grow:var(--fw) !important}[style*="--fs:"]{flex-shrink:var(--fs) !important}[style*="--fb:"]{flex-basis:var(--fb) !important}[style*="--o:"]{order:var(--o) !important}[style*="--gtc:"]{grid-template-columns:var(--gtc) !important}[style*="--gtr:"]{grid-template-rows:var(--gtr) !important}[style*="--gac:"]{grid-auto-columns:var(--gac) !important}[style*="--gar:"]{grid-auto-rows:var(--gar) !important}[style*="--gc:"]{grid-column:var(--gc) !important}[style*="--gr:"]{grid-row:var(--gr) !important}[style*="--gg:"]{grid-gap:var(--gg) !important}[style*="--ps:"]{place-self:var(--ps) !important}[style*="--grid-cols:"]{grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr))}[style*="--us:"]{-webkit-user-select:var(--us) !important;-moz-user-select:var(--us) !important;-ms-user-select:var(--us) !important;user-select:var(--us) !important}[style*="--oe:"]{outline:var(--oe) !important}[style*="--pe:"]{pointer-events:var(--pe) !important}[style*="--sb:"]{scroll-behavior:var(--sb) !important}[style*="--cur:"]{cursor:var(--cur) !important}[style*="--cur:"]:hover{cursor:var(--cur,var(--cursor))}[style*="--d:"]{display:var(--d) !important}[style*="--ft:"]{float:var(--ft) !important}[style*="--pos:"]{position:var(--pos) !important}[style*="--top:"]{top:var(--top) !important}[style*="--left:"]{left:var(--left) !important}[style*="--right:"]{right:var(--right) !important}[style*="--bottom:"]{bottom:var(--bottom) !important}[style*="--objf:"]{-o-object-fit:var(--objf) !important;object-fit:var(--objf) !important}[style*="--objp:"]{-o-object-position:var(--objp) !important;object-position:var(--objp) !important}[style*="--v:"]{visibility:var(--v) !important}[style*="--z:"]{z-index:var(--z) !important}[style*="--of:"]{overflow:var(--of) !important}[style*="--ofx:"]{overflow-x:var(--ofx) !important}[style*="--ofy:"]{overflow-y:var(--ofy) !important}[style*="--w:"]{width:var(--w) !important}[style*="--h:"]{height:var(--h) !important}[style*="--minw:"]{min-width:var(--minw) !important}[style*="--minh:"]{min-height:var(--minh) !important}[style*="--maxw:"]{max-width:var(--maxw) !important}[style*="--maxh:"]{max-height:var(--maxh) !important}[style*="--bxs:"]{box-sizing:var(--bxs) !important}[style*="--p:"]{padding:var(--p) !important}[style*="--pl:"]{padding-left:var(--pl) !important}[style*="--pr:"]{padding-right:var(--pr) !important}[style*="--pt:"]{padding-top:var(--pt) !important}[style*="--pb:"]{padding-bottom:var(--pb) !important}[style*="--m:"]{margin:var(--m) !important}[style*="--ml:"]{margin-left:var(--ml) !important}[style*="--mr:"]{margin-right:var(--mr) !important}[style*="--mt:"]{margin-top:var(--mt) !important}[style*="--mb:"]{margin-bottom:var(--mb) !important}[style*="--c:"]{color:var(--c) !important}[style*="--ff:"]{font-family:var(--ff) !important}[style*="--size:"]{font-size:var(--size) !important}[style*="--fs:"]{font-style:var(--fs) !important}[style*="--weight:"]{font-weight:var(--weight) !important}[style*="--ls:"]{letter-spacing:var(--ls) !important}[style*="--lh:"]{line-height:var(--lh) !important}[style*="--lis:"]{list-style:var(--lis) !important}[style*="--list:"]{list-style-type:var(--list) !important}[style*="--lisp:"]{list-style-position:var(--lisp) !important}[style*="--ta:"]{text-align:var(--ta) !important}[style*="--td:"]{-webkit-text-decoration:var(--td) !important;text-decoration:var(--td) !important}[style*="--ts:"]{text-shadow:var(--ts) !important}[style*="--tt:"]{text-transform:var(--tt) !important}[style*="--wm:"]{-webkit-writing-mode:var(--wm) !important;-ms-writing-mode:var(--wm) !important;writing-mode:var(--wm) !important}[style*="--va:"]{vertical-align:var(--va) !important}[style*="--ws:"]{white-space:var(--ws) !important}[style*="--wb:"]{word-break:var(--wb) !important}[style*="--cc:"]{-moz-column-count:var(--cc) !important;column-count:var(--cc) !important}[style*="--cg:"]{-moz-column-gap:var(--cg) !important;column-gap:var(--cg) !important}[style*="--cr:"]{-moz-column-rule:var(--cr) !important;column-rule:var(--cr) !important}[style*="--cs:"]{-moz-column-span:var(--cs) !important;column-span:var(--cs) !important}[style*="--dir:"]{direction:var(--dir) !important}[style*="--bi:"]{page-break-inside:var(--bi);-moz-column-break-inside:var(--bi);break-inside:var(--bi)}[style*="--t:"]{transform:var(--t) !important}[style*="--to:"]{transform-origin:var(--to) !important}[style*="--tc:"]{transform-style:var(--tc) !important}[style*="--tn:"]{transition:var(--tn) !important}[style*="--td:"]{transition-delay:var(--td) !important}[style*="--tdn:"]{transition-duration:var(--tdn) !important}[style*="--tp:"]{transition-property:var(--tp) !important}[style*="-ttf:"]{transition-timing-function:var(-ttf) !important}[style*="--all:"]{all:var(--all) !important}[style*="--ct:"]{content:var(--ct) !important}[style*="--op:"]{opacity:var(--op) !important}[style*="--bs:"]{box-shadow:var(--bs) !important}[style*="--cr:"]{clear:var(--cr) !important}[style*="--ct:"]{content:var(--ct) !important}[style*="--fr:"]{-webkit-filter:var(--fr) !important;filter:var(--fr) !important}[style*="--grad:"]{background-image:linear-gradient(var(--grad),rgba(0,0,0,0),var(--grad-color,rgba(0,0,0,1)))}[style*="--grad-vars:"]{background-image:linear-gradient(var(--grad-vars),var(--primary),var(--secondary))}[style*="--bg-pattern-squares:"]{background-image:repeating-linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%,currentColor),repeating-linear-gradient(45deg,currentColor 25%,transparent 25%,transparent 75%,currentColor 75%,currentColor);background-position:0 0,calc(var(--bg-pattern-squares) * 1px) calc(var(--bg-pattern-squares) * 1px);background-size:calc(var(--bg-pattern-squares) * 2px) calc(var(--bg-pattern-squares) * 2px)}[style*="--inset:"]{top:var(--inset);left:var(--inset);right:var(--inset);bottom:var(--inset)}[style*="--inset-top:"]{top:var(--inset-top);left:var(--inset-top);right:var(--inset-top)}[style*="--inset-bottom:"]{left:var(--inset-bottom);right:var(--inset-bottom);bottom:var(--inset-bottom)}[style*="--inset-top-left:"]{top:var(--inset-top-left);left:var(--inset-top-left)}[style*="--inset-top-right:"]{top:var(--inset-top-right);right:var(--inset-top-right)}[style*="--inset-bottom-left:"]{bottom:var(--inset-bottom-left);left:var(--inset-bottom-left)}[style*="--inset-bottom-right:"]{bottom:var(--inset-bottom-right);right:var(--inset-bottom-right)}[style*="--levitate:"]{box-shadow:0 calc(var(--levitate) * .5px) calc(var(--levitate) * .6px) rgba(0,0,0,calc(var(--levitate) * .013)),0 calc(var(--levitate) * 1px) calc(var(--levitate) * 1.2px) rgba(0,0,0,calc(var(--levitate) * .013)),0 calc(var(--levitate) * 2px) calc(var(--levitate) * 2.4px) rgba(0,0,0,calc(var(--levitate) * .013)),0 calc(var(--levitate) * 4px) calc(var(--levitate) * 4.4px) rgba(0,0,0,calc(var(--levitate) * .013));transform:translateY(calc(var(--levitate) * -1.2px))}[style*="--levitate-hvr:"]{transition:all .4s ease}[style*="--levitate-hvr:"]:hover,[style*="--levitate-hvr:"]:focus{box-shadow:0 calc(var(--levitate-hvr) * .5px) calc(var(--levitate-hvr) * .6px) rgba(0,0,0,calc(var(--levitate-hvr) * .013)),0 calc(var(--levitate-hvr) * 1px) calc(var(--levitate-hvr) * 1.2px) rgba(0,0,0,calc(var(--levitate-hvr) * .013)),0 calc(var(--levitate-hvr) * 2px) calc(var(--levitate-hvr) * 2.4px) rgba(0,0,0,calc(var(--levitate-hvr) * .013)),0 calc(var(--levitate-hvr) * 4px) calc(var(--levitate-hvr) * 4.4px) rgba(0,0,0,calc(var(--levitate-hvr) * .013));transform:translateY(calc(var(--levitate-hvr) * -1.2px))}[style*="--shadow:"]{box-shadow:0 calc(var(--shadow) * .1px) calc(var(--shadow) * .2px) rgba(0,0,0,calc(var(--shadow) * .02)),0 calc(var(--shadow) * .2px) calc(var(--shadow) * .4px) rgba(0,0,0,calc(var(--shadow) * .02)),0 calc(var(--shadow) * .4px) calc(var(--shadow) * .8px) rgba(0,0,0,calc(var(--shadow) * .02)),0 calc(var(--shadow) * .8px) calc(var(--shadow) * 1.6px) rgba(0,0,0,calc(var(--shadow) * .02))}[style*="--shadow-soft:"]{box-shadow:0 calc(var(--shadow-soft) * .3px) calc(var(--shadow-soft) * 1.1px) rgba(0,0,0,.1),0 calc(var(--shadow-soft) * .6px) calc(var(--shadow-soft) * 1.2px) rgba(0,0,0,.1),0 calc(var(--shadow-soft) * 1.2px) calc(var(--shadow-soft) * 1.4px) rgba(0,0,0,.1),0 calc(var(--shadow-soft) * 2.4px) calc(var(--shadow-soft) * 1.6px) rgba(0,0,0,.1)}[style*="--shadow-hard:"]{box-shadow:0 calc(var(--shadow-hard) * .75px) calc(var(--shadow-hard) * 1.3px) rgba(0,0,0,calc(var(--shadow-hard) * .12))}[style*="--shadow-vert:"]{box-shadow:0 calc(var(--shadow-vert) * 1.4px) calc(var(--shadow-vert) * 2px) calc(var(--shadow-vert) * -1.7px) rgba(0,0,0,calc(var(--shadow-vert) * .12))}[style*="--shadow-inset:"]{box-shadow:inset 0 calc(var(--shadow-inset) * .1px) calc(var(--shadow-inset) * .2px) rgba(0,0,0,calc(var(--shadow-inset) * .02)),inset 0 calc(var(--shadow-inset) * .2px) calc(var(--shadow-inset) * .4px) rgba(0,0,0,calc(var(--shadow-inset) * .02)),inset 0 calc(var(--shadow-inset) * .4px) calc(var(--shadow-inset) * .8px) rgba(0,0,0,calc(var(--shadow-inset) * .02)),inset 0 calc(var(--shadow-inset) * .8px) calc(var(--shadow-inset) * 1.6px) rgba(0,0,0,calc(var(--shadow-inset) * .02))}[style*="--shadow-hvr:"]{transition:all .4s ease}[style*="--shadow-hvr:"]:hover,[style*="--shadow-hvr:"]:focus{box-shadow:0 calc(var(--shadow-hvr) * .1px) calc(var(--shadow-hvr) * .2px) rgba(0,0,0,calc(var(--shadow-hvr) * .02)),0 calc(var(--shadow-hvr) * .2px) calc(var(--shadow-hvr) * .4px) rgba(0,0,0,calc(var(--shadow-hvr) * .02)),0 calc(var(--shadow-hvr) * .4px) calc(var(--shadow-hvr) * .8px) rgba(0,0,0,calc(var(--shadow-hvr) * .02)),0 calc(var(--shadow-hvr) * .8px) calc(var(--shadow-hvr) * 1.6px) rgba(0,0,0,calc(var(--shadow-hvr) * .02))}[style*="--px:"]{-webkit-padding-start:var(--px);padding-inline-start:var(--px);-webkit-padding-end:var(--px);padding-inline-end:var(--px)}[style*="--py:"]{-webkit-padding-before:var(--py);padding-block-start:var(--py);-webkit-padding-after:var(--py);padding-block-end:var(--py)}[style*="--mx:"]{-webkit-margin-start:var(--mx);margin-inline-start:var(--mx);-webkit-margin-end:var(--mx);margin-inline-end:var(--mx)}[style*="--my:"]{-webkit-margin-before:var(--my);margin-block-start:var(--my);-webkit-margin-after:var(--my);margin-block-end:var(--my)}[style*="--line-clamp:"]{display:-webkit-box;-webkit-line-clamp:var(--line-clamp);-webkit-box-orient:vertical;overflow:hidden}[style*="--text-3d:"]{text-shadow:6px 6px 10px rgba(255,255,255,.1),6px 6px var(--text-3d),5.75px 5.75px var(--text-3d),5.5px 5.5px var(--text-3d),5.25px 5.25px var(--text-3d),5px 5px var(--text-3d),4.75px 4.75px var(--text-3d),4.5px 4.5px var(--text-3d),4.25px 4.25px var(--text-3d),4px 4px var(--text-3d),3.75px 3.75px var(--text-3d),3.5px 3.5px var(--text-3d),3.25px 3.25px var(--text-3d),3px 3px var(--text-3d),2.75px 2.75px var(--text-3d),2.5px 2.5px var(--text-3d),2.25px 2.25px var(--text-3d),2px 2px var(--text-3d),1.75px 1.75px var(--text-3d),1.5px 1.5px var(--text-3d),1.25px 1.25px var(--text-3d),1px 1px var(--text-3d),.75px .75px var(--text-3d),.5px .5px var(--text-3d),.25px .25px var(--text-3d)}@media only screen and (min-width:440px){.grid[style*="--col-xs:"]{grid-template-columns:repeat(var(--col-xs,1),1fr)}.grid>[style*="--sc-xs:"]{grid-column:span var(--sc-xs,1)}.grid>[style*="--sr-xs:"]{grid-row:span var(--sr-xs,1)}}@media only screen and (min-width:640px){.grid[style*="--col-sm:"]{grid-template-columns:repeat(var(--col-sm,1),1fr)}.grid>[style*="--sc-sm:"]{grid-column:span var(--sc-sm,1)}.grid>[style*="--sr-sm:"]{grid-row:span var(--sr-sm,1)}[style*="--bg-sm:"]{background:var(--bg-sm) !important}[style*="--bga-sm:"]{background-attachment:var(--bga-sm) !important}[style*="--bgc-sm:"]{background-color:var(--bgc-sm) !important}[style*="--bgi-sm:"]{background-image:var(--bgi-sm) !important}[style*="--bgp-sm:"]{background-position:var(--bgp-sm) !important}[style*="--bgr-sm:"]{background-repeat:var(--bgr-sm) !important}[style*="--bgs-sm:"]{background-size:var(--bgs-sm) !important}[style*="--b-sm:"]{border:var(--b-sm) !important}[style*="--bc-sm:"]{border-color:var(--bc-sm) !important}[style*="--bs-sm:"]{border-style:var(--bs-sm) !important}[style*="--bw-sm:"]{border-width:var(--bw-sm) !important}[style*="--br-sm:"]{border-radius:var(--br-sm) !important}[style*="--radius-sm:"]{border-radius:var(--radius-sm) !important}[style*="--bt-sm:"]{border-top:var(--bt-sm) !important}[style*="--bl-sm:"]{border-left:var(--bl-sm) !important}[style*="--br-sm:"]{border-right:var(--br-sm) !important}[style*="--bb-sm:"]{border-bottom:var(--bb-sm) !important}[style*="--btlr-sm:"]{border-top-left-radius:var(--btlr-sm) !important}[style*="--btrr-sm:"]{border-top-right-radius:var(--btrr-sm) !important}[style*="--bblr-sm:"]{border-bottom-left-radius:var(--bblr-sm) !important}[style*="--bbrr-sm:"]{border-bottom-right-radius:var(--bbrr-sm) !important}[style*="--fx-sm:"]{flex:var(--fx-sm) !important}[style*="--fd-sm:"]{flex-direction:var(--fd-sm) !important}[style*="--fw-sm:"]{flex-wrap:var(--fw-sm) !important}[style*="--ac-sm:"]{align-content:var(--ac-sm) !important}[style*="--ai-sm:"]{align-items:var(--ai-sm) !important}[style*="--as-sm:"]{align-self:var(--as-sm) !important}[style*="--jc-sm:"]{justify-content:var(--jc-sm) !important}[style*="--fw-sm:"]{flex-grow:var(--fw-sm) !important}[style*="--fs-sm:"]{flex-shrink:var(--fs-sm) !important}[style*="--fb-sm:"]{flex-basis:var(--fb-sm) !important}[style*="--o-sm:"]{order:var(--o-sm) !important}[style*="--gtc-sm:"]{grid-template-columns:var(--gtc-sm) !important}[style*="--gtr-sm:"]{grid-template-rows:var(--gtr-sm) !important}[style*="--gac-sm:"]{grid-auto-columns:var(--gac-sm) !important}[style*="--gar-sm:"]{grid-auto-rows:var(--gar-sm) !important}[style*="--gc-sm:"]{grid-column:var(--gc-sm) !important}[style*="--gr-sm:"]{grid-row:var(--gr-sm) !important}[style*="--gg-sm:"]{grid-gap:var(--gg-sm) !important}[style*="--ps-sm:"]{place-self:var(--ps-sm) !important}[style*="--d-sm:"]{display:var(--d-sm) !important}[style*="--ft-sm:"]{float:var(--ft-sm) !important}[style*="--pos-sm:"]{position:var(--pos-sm) !important}[style*="--top-sm:"]{top:var(--top-sm) !important}[style*="--left-sm:"]{left:var(--left-sm) !important}[style*="--right-sm:"]{right:var(--right-sm) !important}[style*="--bottom-sm:"]{bottom:var(--bottom-sm) !important}[style*="--objf-sm:"]{-o-object-fit:var(--objf-sm) !important;object-fit:var(--objf-sm) !important}[style*="--objp-sm:"]{-o-object-position:var(--objp-sm) !important;object-position:var(--objp-sm) !important}[style*="--v-sm:"]{visibility:var(--v-sm) !important}[style*="--z-sm:"]{z-index:var(--z-sm) !important}[style*="--w-sm:"]{width:var(--w-sm) !important}[style*="--h-sm:"]{height:var(--h-sm) !important}[style*="--minw-sm:"]{min-width:var(--minw-sm) !important}[style*="--minh-sm:"]{min-height:var(--minh-sm) !important}[style*="--maxw-sm:"]{max-width:var(--maxw-sm) !important}[style*="--maxh-sm:"]{max-height:var(--maxh-sm) !important}[style*="--p-sm:"]{padding:var(--p-sm) !important}[style*="--pl-sm:"]{padding-left:var(--pl-sm) !important}[style*="--pr-sm:"]{padding-right:var(--pr-sm) !important}[style*="--pt-sm:"]{padding-top:var(--pt-sm) !important}[style*="--pb-sm:"]{padding-bottom:var(--pb-sm) !important}[style*="--m-sm:"]{margin:var(--m-sm) !important}[style*="--ml-sm:"]{margin-left:var(--ml-sm) !important}[style*="--mr-sm:"]{margin-right:var(--mr-sm) !important}[style*="--mt-sm:"]{margin-top:var(--mt-sm) !important}[style*="--mb-sm:"]{margin-bottom:var(--mb-sm) !important}[style*="--c-sm:"]{color:var(--c-sm) !important}[style*="--size-sm:"]{font-size:var(--size-sm) !important}[style*="--ls-sm:"]{letter-spacing:var(--ls-sm) !important}[style*="--lh-sm:"]{line-height:var(--lh-sm) !important}[style*="--ta-sm:"]{text-align:var(--ta-sm) !important}[style*="--wm-sm:"]{-webkit-writing-mode:var(--wm-sm) !important;-ms-writing-mode:var(--wm-sm) !important;writing-mode:var(--wm-sm) !important}[style*="--ws-sm:"]{white-space:var(--ws-sm) !important}[style*="--wb-sm:"]{word-break:var(--wb-sm) !important}[style*="--cc-sm:"]{-moz-column-count:var(--cc-sm) !important;column-count:var(--cc-sm) !important}[style*="--cg-sm:"]{-moz-column-gap:var(--cg-sm) !important;column-gap:var(--cg-sm) !important}[style*="--cr-sm:"]{-moz-column-rule:var(--cr-sm) !important;column-rule:var(--cr-sm) !important}[style*="--cs-sm:"]{-moz-column-span:var(--cs-sm) !important;column-span:var(--cs-sm) !important}[style*="--dir-sm:"]{direction:var(--dir-sm) !important}[style*="--t-sm:"]{transform:var(--t-sm) !important}[style*="--to-sm:"]{transform-origin:var(--to-sm) !important}[style*="--tc-sm:"]{transform-style:var(--tc-sm) !important}[style*="--tn-sm:"]{transition:var(--tn-sm) !important}[style*="--td-sm:"]{transition-delay:var(--td-sm) !important}[style*="--tdn-sm:"]{transition-duration:var(--tdn-sm) !important}[style*="--tp-sm:"]{transition-property:var(--tp-sm) !important}[style*="-ttf-sm:"]{transition-timing-function:var(-ttf-sm) !important}[style*="--ct-sm:"]{content:var(--ct-sm) !important}[style*="--op-sm:"]{opacity:var(--op-sm) !important}[style*="--bs-sm:"]{box-shadow:var(--bs-sm) !important}}@media only screen and (min-width:960px){.grid[style*="--col-md:"]{grid-template-columns:repeat(var(--col-md,1),1fr)}.grid>[style*="--sc-md:"]{grid-column:span var(--sc-md,1)}.grid>[style*="--sr-md:"]{grid-row:span var(--sr-md,1)}}@media only screen and (min-width:1280px){.grid[style*="--col-lg:"]{grid-template-columns:repeat(var(--col-lg,1),1fr)}.grid>[style*="--sc-lg:"]{grid-column:span var(--sc-lg,1)}.grid>[style*="--sr-lg:"]{grid-row:span var(--sr-lg,1)}[style*="--bg-xl:"]{background:var(--bg-xl) !important}[style*="--bga-xl:"]{background-attachment:var(--bga-xl) !important}[style*="--bgc-xl:"]{background-color:var(--bgc-xl) !important}[style*="--bgi-xl:"]{background-image:var(--bgi-xl) !important}[style*="--bgp-xl:"]{background-position:var(--bgp-xl) !important}[style*="--bgr-xl:"]{background-repeat:var(--bgr-xl) !important}[style*="--bgs-xl:"]{background-size:var(--bgs-xl) !important}[style*="--b-xl:"]{border:var(--b-xl) !important}[style*="--bc-xl:"]{border-color:var(--bc-xl) !important}[style*="--bs-xl:"]{border-style:var(--bs-xl) !important}[style*="--bw-xl:"]{border-width:var(--bw-xl) !important}[style*="--br-xl:"]{border-radius:var(--br-xl) !important}[style*="--radius-xl:"]{border-radius:var(--radius-xl) !important}[style*="--bt-xl:"]{border-top:var(--bt-xl) !important}[style*="--bl-xl:"]{border-left:var(--bl-xl) !important}[style*="--br-xl:"]{border-right:var(--br-xl) !important}[style*="--bb-xl:"]{border-bottom:var(--bb-xl) !important}[style*="--btlr-xl:"]{border-top-left-radius:var(--btlr-xl) !important}[style*="--btrr-xl:"]{border-top-right-radius:var(--btrr-xl) !important}[style*="--bblr-xl:"]{border-bottom-left-radius:var(--bblr-xl) !important}[style*="--bbrr-xl:"]{border-bottom-right-radius:var(--bbrr-xl) !important}[style*="--fx-xl:"]{flex:var(--fx-xl) !important}[style*="--fd-xl:"]{flex-direction:var(--fd-xl) !important}[style*="--fw-xl:"]{flex-wrap:var(--fw-xl) !important}[style*="--ac-xl:"]{align-content:var(--ac-xl) !important}[style*="--ai-xl:"]{align-items:var(--ai-xl) !important}[style*="--as-xl:"]{align-self:var(--as-xl) !important}[style*="--jc-xl:"]{justify-content:var(--jc-xl) !important}[style*="--fw-xl:"]{flex-grow:var(--fw-xl) !important}[style*="--fs-xl:"]{flex-shrink:var(--fs-xl) !important}[style*="--fb-xl:"]{flex-basis:var(--fb-xl) !important}[style*="--o-xl:"]{order:var(--o-xl) !important}[style*="--gtc-xl:"]{grid-template-columns:var(--gtc-xl) !important}[style*="--gtr-xl:"]{grid-template-rows:var(--gtr-xl) !important}[style*="--gac-xl:"]{grid-auto-columns:var(--gac-xl) !important}[style*="--gar-xl:"]{grid-auto-rows:var(--gar-xl) !important}[style*="--gc-xl:"]{grid-column:var(--gc-xl) !important}[style*="--gr-xl:"]{grid-row:var(--gr-xl) !important}[style*="--gg-xl:"]{grid-gap:var(--gg-xl) !important}[style*="--ps-xl:"]{place-self:var(--ps-xl) !important}[style*="--d-xl:"]{display:var(--d-xl) !important}[style*="--ft-xl:"]{float:var(--ft-xl) !important}[style*="--pos-xl:"]{position:var(--pos-xl) !important}[style*="--top-xl:"]{top:var(--top-xl) !important}[style*="--left-xl:"]{left:var(--left-xl) !important}[style*="--right-xl:"]{right:var(--right-xl) !important}[style*="--bottom-xl:"]{bottom:var(--bottom-xl) !important}[style*="--objf-xl:"]{-o-object-fit:var(--objf-xl) !important;object-fit:var(--objf-xl) !important}[style*="--objp-xl:"]{-o-object-position:var(--objp-xl) !important;object-position:var(--objp-xl) !important}[style*="--v-xl:"]{visibility:var(--v-xl) !important}[style*="--z-xl:"]{z-index:var(--z-xl) !important}[style*="--w-xl:"]{width:var(--w-xl) !important}[style*="--h-xl:"]{height:var(--h-xl) !important}[style*="--minw-xl:"]{min-width:var(--minw-xl) !important}[style*="--minh-xl:"]{min-height:var(--minh-xl) !important}[style*="--maxw-xl:"]{max-width:var(--maxw-xl) !important}[style*="--maxh-xl:"]{max-height:var(--maxh-xl) !important}[style*="--p-xl:"]{padding:var(--p-xl) !important}[style*="--pl-xl:"]{padding-left:var(--pl-xl) !important}[style*="--pr-xl:"]{padding-right:var(--pr-xl) !important}[style*="--pt-xl:"]{padding-top:var(--pt-xl) !important}[style*="--pb-xl:"]{padding-bottom:var(--pb-xl) !important}[style*="--m-xl:"]{margin:var(--m-xl) !important}[style*="--ml-xl:"]{margin-left:var(--ml-xl) !important}[style*="--mr-xl:"]{margin-right:var(--mr-xl) !important}[style*="--mt-xl:"]{margin-top:var(--mt-xl) !important}[style*="--mb-xl:"]{margin-bottom:var(--mb-xl) !important}[style*="--c-xl:"]{color:var(--c-xl) !important}[style*="--size-xl:"]{font-size:var(--size-xl) !important}[style*="--ls-xl:"]{letter-spacing:var(--ls-xl) !important}[style*="--lh-xl:"]{line-height:var(--lh-xl) !important}[style*="--ta-xl:"]{text-align:var(--ta-xl) !important}[style*="--wm-xl:"]{-webkit-writing-mode:var(--wm-xl) !important;-ms-writing-mode:var(--wm-xl) !important;writing-mode:var(--wm-xl) !important}[style*="--ws-xl:"]{white-space:var(--ws-xl) !important}[style*="--wb-xl:"]{word-break:var(--wb-xl) !important}[style*="--cc-xl:"]{-moz-column-count:var(--cc-xl) !important;column-count:var(--cc-xl) !important}[style*="--cg-xl:"]{-moz-column-gap:var(--cg-xl) !important;column-gap:var(--cg-xl) !important}[style*="--cr-xl:"]{-moz-column-rule:var(--cr-xl) !important;column-rule:var(--cr-xl) !important}[style*="--cs-xl:"]{-moz-column-span:var(--cs-xl) !important;column-span:var(--cs-xl) !important}[style*="--dir-xl:"]{direction:var(--dir-xl) !important}[style*="--t-xl:"]{transform:var(--t-xl) !important}[style*="--to-xl:"]{transform-origin:var(--to-xl) !important}[style*="--tc-xl:"]{transform-style:var(--tc-xl) !important}[style*="--tn-xl:"]{transition:var(--tn-xl) !important}[style*="--td-xl:"]{transition-delay:var(--td-xl) !important}[style*="--tdn-xl:"]{transition-duration:var(--tdn-xl) !important}[style*="--tp-xl:"]{transition-property:var(--tp-xl) !important}[style*="-ttf-xl:"]{transition-timing-function:var(-ttf-xl) !important}[style*="--ct-xl:"]{content:var(--ct-xl) !important}[style*="--op-xl:"]{opacity:var(--op-xl) !important}[style*="--bs-xl:"]{box-shadow:var(--bs-xl) !important}}@media only screen and (min-width:768px){[style*="--bg-md:"]{background:var(--bg-md) !important}[style*="--bga-md:"]{background-attachment:var(--bga-md) !important}[style*="--bgc-md:"]{background-color:var(--bgc-md) !important}[style*="--bgi-md:"]{background-image:var(--bgi-md) !important}[style*="--bgp-md:"]{background-position:var(--bgp-md) !important}[style*="--bgr-md:"]{background-repeat:var(--bgr-md) !important}[style*="--bgs-md:"]{background-size:var(--bgs-md) !important}[style*="--b-md:"]{border:var(--b-md) !important}[style*="--bc-md:"]{border-color:var(--bc-md) !important}[style*="--bs-md:"]{border-style:var(--bs-md) !important}[style*="--bw-md:"]{border-width:var(--bw-md) !important}[style*="--br-md:"]{border-radius:var(--br-md) !important}[style*="--radius-md:"]{border-radius:var(--radius-md) !important}[style*="--bt-md:"]{border-top:var(--bt-md) !important}[style*="--bl-md:"]{border-left:var(--bl-md) !important}[style*="--br-md:"]{border-right:var(--br-md) !important}[style*="--bb-md:"]{border-bottom:var(--bb-md) !important}[style*="--btlr-md:"]{border-top-left-radius:var(--btlr-md) !important}[style*="--btrr-md:"]{border-top-right-radius:var(--btrr-md) !important}[style*="--bblr-md:"]{border-bottom-left-radius:var(--bblr-md) !important}[style*="--bbrr-md:"]{border-bottom-right-radius:var(--bbrr-md) !important}[style*="--fx-md:"]{flex:var(--fx-md) !important}[style*="--fd-md:"]{flex-direction:var(--fd-md) !important}[style*="--fw-md:"]{flex-wrap:var(--fw-md) !important}[style*="--ac-md:"]{align-content:var(--ac-md) !important}[style*="--ai-md:"]{align-items:var(--ai-md) !important}[style*="--as-md:"]{align-self:var(--as-md) !important}[style*="--jc-md:"]{justify-content:var(--jc-md) !important}[style*="--fw-md:"]{flex-grow:var(--fw-md) !important}[style*="--fs-md:"]{flex-shrink:var(--fs-md) !important}[style*="--fb-md:"]{flex-basis:var(--fb-md) !important}[style*="--o-md:"]{order:var(--o-md) !important}[style*="--gtc-md:"]{grid-template-columns:var(--gtc-md) !important}[style*="--gtr-md:"]{grid-template-rows:var(--gtr-md) !important}[style*="--gac-md:"]{grid-auto-columns:var(--gac-md) !important}[style*="--gar-md:"]{grid-auto-rows:var(--gar-md) !important}[style*="--gc-md:"]{grid-column:var(--gc-md) !important}[style*="--gr-md:"]{grid-row:var(--gr-md) !important}[style*="--gg-md:"]{grid-gap:var(--gg-md) !important}[style*="--ps-md:"]{place-self:var(--ps-md) !important}[style*="--d-md:"]{display:var(--d-md) !important}[style*="--ft-md:"]{float:var(--ft-md) !important}[style*="--pos-md:"]{position:var(--pos-md) !important}[style*="--top-md:"]{top:var(--top-md) !important}[style*="--left-md:"]{left:var(--left-md) !important}[style*="--right-md:"]{right:var(--right-md) !important}[style*="--bottom-md:"]{bottom:var(--bottom-md) !important}[style*="--objf-md:"]{-o-object-fit:var(--objf-md) !important;object-fit:var(--objf-md) !important}[style*="--objp-md:"]{-o-object-position:var(--objp-md) !important;object-position:var(--objp-md) !important}[style*="--v-md:"]{visibility:var(--v-md) !important}[style*="--z-md:"]{z-index:var(--z-md) !important}[style*="--w-md:"]{width:var(--w-md) !important}[style*="--h-md:"]{height:var(--h-md) !important}[style*="--minw-md:"]{min-width:var(--minw-md) !important}[style*="--minh-md:"]{min-height:var(--minh-md) !important}[style*="--maxw-md:"]{max-width:var(--maxw-md) !important}[style*="--maxh-md:"]{max-height:var(--maxh-md) !important}[style*="--p-md:"]{padding:var(--p-md) !important}[style*="--pl-md:"]{padding-left:var(--pl-md) !important}[style*="--pr-md:"]{padding-right:var(--pr-md) !important}[style*="--pt-md:"]{padding-top:var(--pt-md) !important}[style*="--pb-md:"]{padding-bottom:var(--pb-md) !important}[style*="--m-md:"]{margin:var(--m-md) !important}[style*="--ml-md:"]{margin-left:var(--ml-md) !important}[style*="--mr-md:"]{margin-right:var(--mr-md) !important}[style*="--mt-md:"]{margin-top:var(--mt-md) !important}[style*="--mb-md:"]{margin-bottom:var(--mb-md) !important}[style*="--c-md:"]{color:var(--c-md) !important}[style*="--size-md:"]{font-size:var(--size-md) !important}[style*="--ls-md:"]{letter-spacing:var(--ls-md) !important}[style*="--lh-md:"]{line-height:var(--lh-md) !important}[style*="--ta-md:"]{text-align:var(--ta-md) !important}[style*="--wm-md:"]{-webkit-writing-mode:var(--wm-md) !important;-ms-writing-mode:var(--wm-md) !important;writing-mode:var(--wm-md) !important}[style*="--ws-md:"]{white-space:var(--ws-md) !important}[style*="--wb-md:"]{word-break:var(--wb-md) !important}[style*="--cc-md:"]{-moz-column-count:var(--cc-md) !important;column-count:var(--cc-md) !important}[style*="--cg-md:"]{-moz-column-gap:var(--cg-md) !important;column-gap:var(--cg-md) !important}[style*="--cr-md:"]{-moz-column-rule:var(--cr-md) !important;column-rule:var(--cr-md) !important}[style*="--cs-md:"]{-moz-column-span:var(--cs-md) !important;column-span:var(--cs-md) !important}[style*="--dir-md:"]{direction:var(--dir-md) !important}[style*="--t-md:"]{transform:var(--t-md) !important}[style*="--to-md:"]{transform-origin:var(--to-md) !important}[style*="--tc-md:"]{transform-style:var(--tc-md) !important}[style*="--tn-md:"]{transition:var(--tn-md) !important}[style*="--td-md:"]{transition-delay:var(--td-md) !important}[style*="--tdn-md:"]{transition-duration:var(--tdn-md) !important}[style*="--tp-md:"]{transition-property:var(--tp-md) !important}[style*="-ttf-md:"]{transition-timing-function:var(-ttf-md) !important}[style*="--ct-md:"]{content:var(--ct-md) !important}[style*="--op-md:"]{opacity:var(--op-md) !important}[style*="--bs-md:"]{box-shadow:var(--bs-md) !important}}@media only screen and (min-width:1024px){[style*="--bg-lg:"]{background:var(--bg-lg) !important}[style*="--bga-lg:"]{background-attachment:var(--bga-lg) !important}[style*="--bgc-lg:"]{background-color:var(--bgc-lg) !important}[style*="--bgi-lg:"]{background-image:var(--bgi-lg) !important}[style*="--bgp-lg:"]{background-position:var(--bgp-lg) !important}[style*="--bgr-lg:"]{background-repeat:var(--bgr-lg) !important}[style*="--bgs-lg:"]{background-size:var(--bgs-lg) !important}[style*="--b-lg:"]{border:var(--b-lg) !important}[style*="--bc-lg:"]{border-color:var(--bc-lg) !important}[style*="--bs-lg:"]{border-style:var(--bs-lg) !important}[style*="--bw-lg:"]{border-width:var(--bw-lg) !important}[style*="--br-lg:"]{border-radius:var(--br-lg) !important}[style*="--radius-lg:"]{border-radius:var(--radius-lg) !important}[style*="--bt-lg:"]{border-top:var(--bt-lg) !important}[style*="--bl-lg:"]{border-left:var(--bl-lg) !important}[style*="--br-lg:"]{border-right:var(--br-lg) !important}[style*="--bb-lg:"]{border-bottom:var(--bb-lg) !important}[style*="--btlr-lg:"]{border-top-left-radius:var(--btlr-lg) !important}[style*="--btrr-lg:"]{border-top-right-radius:var(--btrr-lg) !important}[style*="--bblr-lg:"]{border-bottom-left-radius:var(--bblr-lg) !important}[style*="--bbrr-lg:"]{border-bottom-right-radius:var(--bbrr-lg) !important}[style*="--fx-lg:"]{flex:var(--fx-lg) !important}[style*="--fd-lg:"]{flex-direction:var(--fd-lg) !important}[style*="--fw-lg:"]{flex-wrap:var(--fw-lg) !important}[style*="--ac-lg:"]{align-content:var(--ac-lg) !important}[style*="--ai-lg:"]{align-items:var(--ai-lg) !important}[style*="--as-lg:"]{align-self:var(--as-lg) !important}[style*="--jc-lg:"]{justify-content:var(--jc-lg) !important}[style*="--fw-lg:"]{flex-grow:var(--fw-lg) !important}[style*="--fs-lg:"]{flex-shrink:var(--fs-lg) !important}[style*="--fb-lg:"]{flex-basis:var(--fb-lg) !important}[style*="--o-lg:"]{order:var(--o-lg) !important}[style*="--gtc-lg:"]{grid-template-columns:var(--gtc-lg) !important}[style*="--gtr-lg:"]{grid-template-rows:var(--gtr-lg) !important}[style*="--gac-lg:"]{grid-auto-columns:var(--gac-lg) !important}[style*="--gar-lg:"]{grid-auto-rows:var(--gar-lg) !important}[style*="--gc-lg:"]{grid-column:var(--gc-lg) !important}[style*="--gr-lg:"]{grid-row:var(--gr-lg) !important}[style*="--gg-lg:"]{grid-gap:var(--gg-lg) !important}[style*="--ps-lg:"]{place-self:var(--ps-lg) !important}[style*="--d-lg:"]{display:var(--d-lg) !important}[style*="--ft-lg:"]{float:var(--ft-lg) !important}[style*="--pos-lg:"]{position:var(--pos-lg) !important}[style*="--top-lg:"]{top:var(--top-lg) !important}[style*="--left-lg:"]{left:var(--left-lg) !important}[style*="--right-lg:"]{right:var(--right-lg) !important}[style*="--bottom-lg:"]{bottom:var(--bottom-lg) !important}[style*="--objf-lg:"]{-o-object-fit:var(--objf-lg) !important;object-fit:var(--objf-lg) !important}[style*="--objp-lg:"]{-o-object-position:var(--objp-lg) !important;object-position:var(--objp-lg) !important}[style*="--v-lg:"]{visibility:var(--v-lg) !important}[style*="--z-lg:"]{z-index:var(--z-lg) !important}[style*="--w-lg:"]{width:var(--w-lg) !important}[style*="--h-lg:"]{height:var(--h-lg) !important}[style*="--minw-lg:"]{min-width:var(--minw-lg) !important}[style*="--minh-lg:"]{min-height:var(--minh-lg) !important}[style*="--maxw-lg:"]{max-width:var(--maxw-lg) !important}[style*="--maxh-lg:"]{max-height:var(--maxh-lg) !important}[style*="--p-lg:"]{padding:var(--p-lg) !important}[style*="--pl-lg:"]{padding-left:var(--pl-lg) !important}[style*="--pr-lg:"]{padding-right:var(--pr-lg) !important}[style*="--pt-lg:"]{padding-top:var(--pt-lg) !important}[style*="--pb-lg:"]{padding-bottom:var(--pb-lg) !important}[style*="--m-lg:"]{margin:var(--m-lg) !important}[style*="--ml-lg:"]{margin-left:var(--ml-lg) !important}[style*="--mr-lg:"]{margin-right:var(--mr-lg) !important}[style*="--mt-lg:"]{margin-top:var(--mt-lg) !important}[style*="--mb-lg:"]{margin-bottom:var(--mb-lg) !important}[style*="--c-lg:"]{color:var(--c-lg) !important}[style*="--size-lg:"]{font-size:var(--size-lg) !important}[style*="--ls-lg:"]{letter-spacing:var(--ls-lg) !important}[style*="--lh-lg:"]{line-height:var(--lh-lg) !important}[style*="--ta-lg:"]{text-align:var(--ta-lg) !important}[style*="--wm-lg:"]{-webkit-writing-mode:var(--wm-lg) !important;-ms-writing-mode:var(--wm-lg) !important;writing-mode:var(--wm-lg) !important}[style*="--ws-lg:"]{white-space:var(--ws-lg) !important}[style*="--wb-lg:"]{word-break:var(--wb-lg) !important}[style*="--cc-lg:"]{-moz-column-count:var(--cc-lg) !important;column-count:var(--cc-lg) !important}[style*="--cg-lg:"]{-moz-column-gap:var(--cg-lg) !important;column-gap:var(--cg-lg) !important}[style*="--cr-lg:"]{-moz-column-rule:var(--cr-lg) !important;column-rule:var(--cr-lg) !important}[style*="--cs-lg:"]{-moz-column-span:var(--cs-lg) !important;column-span:var(--cs-lg) !important}[style*="--dir-lg:"]{direction:var(--dir-lg) !important}[style*="--t-lg:"]{transform:var(--t-lg) !important}[style*="--to-lg:"]{transform-origin:var(--to-lg) !important}[style*="--tc-lg:"]{transform-style:var(--tc-lg) !important}[style*="--tn-lg:"]{transition:var(--tn-lg) !important}[style*="--td-lg:"]{transition-delay:var(--td-lg) !important}[style*="--tdn-lg:"]{transition-duration:var(--tdn-lg) !important}[style*="--tp-lg:"]{transition-property:var(--tp-lg) !important}[style*="-ttf-lg:"]{transition-timing-function:var(-ttf-lg) !important}[style*="--ct-lg:"]{content:var(--ct-lg) !important}[style*="--op-lg:"]{opacity:var(--op-lg) !important}[style*="--bs-lg:"]{box-shadow:var(--bs-lg) !important}} \ No newline at end of file diff --git a/min/bullframe.min.css b/min/bullframe.min.css index 334dcdb..f346125 100644 --- a/min/bullframe.min.css +++ b/min/bullframe.min.css @@ -1 +1 @@ -@charset "UTF-8";/*! bullframe.css v3.1.0 | MIT License | https://github.com/marcop135/bullframe.css */*,*:before,*:after{box-sizing:border-box}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,menu,nav,section,details{display:block}template{display:none}[hidden]{display:none !important}@-ms-viewport{width:device-width}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:62.5%;color:#222;font-family:sans-serif;line-height:1.15;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0;line-height:1.5;font-size:17px;font-size:1.7rem;font-weight:400;text-align:left;font-family:BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";text-rendering:optimizeLegibility;word-wrap:break-word;background-color:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden}h1,h2,h3,h4,h5,h6{font-weight:700;font-weight:600}h1,h2,h3,h4,h5,h6{margin-top:0}h1,h2,h3,h4,h5,h6{font-family:inherit;color:inherit;line-height:1.2;margin-bottom:24px;margin-bottom:24px}h1,h2,h3{margin-bottom:24px;margin-bottom:24px}h4,h5,h6{margin-bottom:12px;margin-bottom:12px}h1{font-size:36px;font-size:3.6rem}h2{font-size:30px;font-size:3rem}h3{font-size:24px;font-size:2.4rem}h4{font-size:20px;font-size:2rem}h5,h6{font-size:17px;font-size:1.7rem}blockquote{margin:0 0 24px 0;margin-bottom:2.4rem;padding-left:0;font-style:italic}blockquote p{margin-bottom:0}blockquote small{color:#999;display:block}blockquote small:before{content:"\2014 \00A0"}q{quotes:"“" "”" "‘" "’"}pre{margin:0 0 24px 0;margin:0 0 2.4rem 0}pre{overflow:auto;word-break:break-all;word-wrap:break-word;white-space:pre;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;-ms-overflow-style:auto;display:block}pre,code,kbd,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.875em}code{word-wrap:break-word}pre code{font-size:inherit;word-break:normal}p{margin:0 0 24px 0;margin:0 0 2.4rem 0}abbr[title],abbr[data-original-title]{cursor:help;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration-skip:none}mark{background-color:#ff0;color:#000;font-weight:700;font-weight:600}ins{background-color:#ff9;color:#000;text-decoration:none}b,strong{font-weight:inherit}b,strong{font-weight:700;font-weight:600}dfn{font-style:italic}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-8px;top:-0.8rem}sub{bottom:-4px;bottom:-0.4rem}small{font-size:80%}hr{box-sizing:content-box;display:block;height:1px;border:0;border-top:1px solid #999;margin:24px 0;margin:2.4rem 0;padding:0;overflow:visible}address{font-style:normal;margin-bottom:12px;margin-bottom:1.2rem;line-height:inherit}summary{display:list-item;cursor:pointer}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;-webkit-text-decoration-skip-ink:objects;text-decoration-skip-ink:objects}a:hover,a:focus{text-decoration:underline;color:#0056b3}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}:focus:not(:focus-visible){outline:0}[tabindex="-1"]:focus:not(:focus-visible){outline:0 !important}a:focus,input:focus{outline:2px solid orange}:focus-visible{outline:2px solid orange}button:focus,[type="button"]:focus,[type="reset"]:focus,[type="submit"]:focus,[type="email"]:focus,[type="number"]:focus,[type="password"]:focus,[type="tel"]:focus,[type="search"]:focus,[type="text"]:focus,[type="date"]:focus,[type="datetime-local"]:focus,[type="month"]:focus,[type="time"]:focus,[type="week"]:focus,[type="time"]:focus,[type="url"]:focus,[type="radio"]:focus,[type="checkbox"]:focus,select:focus,textarea:focus{outline:0}menu,ol,ul,dl{margin:0 0 24px 0;margin:0 0 2.4rem 0;padding:0}menu ul,menu ol,ul ul,ul ol,ol ol,ol ul,dd{margin-bottom:0}ul,ol{margin-left:24px;margin-left:2.4rem}nav ol,nav ul{list-style:none;list-style-image:none;margin-left:0}dt{font-weight:700}dd{margin-left:0}audio,canvas,progress,video{display:inline-block}img,canvas,audio,video,iframe,object,embed{max-width:100%}audio,video,canvas,img,svg{vertical-align:middle}img{height:auto;border-style:none}figure{margin:0}figure,figcaption{display:block}video{height:auto}audio{width:100%}audio:not([controls]){display:none;height:0}svg:not(:root){overflow:hidden}progress,meter{display:inline-block;vertical-align:baseline;width:100%;max-width:100%}iframe{border:0}html input,button,select,optgroup,textarea{color:inherit;font-family:inherit;font-size:inherit;line-height:inherit}html input,button,[type="radio"],[type="checkbox"],select,optgroup,textarea{margin:0}html input,select,textarea,legend{width:100%}html label,button,[type="image"],[type="submit"],[type="reset"],html [type="button"],[type="radio"],[type="checkbox"]{width:auto}html input,label,select,textarea,button,html [type="button"],[type="reset"],[type="submit"],output{display:inline-block}[type="file"]{display:block;background-color:transparent}::-webkit-file-upload-button{font:inherit}button,html input,select,textarea{background-image:none}input,select,textarea{vertical-align:baseline}form{margin:0}fieldset{border:0;padding:0;margin:0;min-width:0}legend{display:block;display:table \9;max-width:100%;white-space:normal;border:0;padding:0;font-weight:400;margin-bottom:6px;margin-bottom:.6rem;font-size:inherit;line-height:inherit;color:inherit}label{font-weight:700;font-weight:600;font-size:90%;margin-bottom:6px;margin-bottom:.6rem}label input,label select,label textarea{font-size:110%}[type="number"]::-webkit-outer-spin-button,[type="number"]::-webkit-inner-spin-button{height:auto}[type="search"]{outline-offset:-3px;outline-offset:-0.3rem}output{vertical-align:middle}button,select{text-transform:none}select{word-wrap:normal}optgroup{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:700;font-weight:600}button,html [type="button"],[type="reset"],[type="submit"],[type="email"],[type="number"],[type="text"],[type="tel"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="url"],[type="image"],[type="password"],[type="search"],[type="search"]::-webkit-search-decoration,[type="search"]::-webkit-search-cancel-button,textarea{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="date"],[type="time"],[type="datetime-local"],[type="month"]{-webkit-appearance:listbox;-moz-appearance:listbox;appearance:listbox}button,input,select,textarea{border-radius:3px;border-radius:.3rem}[type="radio"]{border-radius:50%}[type="checkbox"]{border-radius:6px;border-radius:.6rem}[type="radio"],[type="checkbox"]{background-color:#fff}[type="range"]{background-color:transparent}select[size],select[multiple]{height:auto}select[multiple]{background-image:none}optgroup::-moz-focus-inner{border:0;padding:0}textarea{height:auto;min-height:60px;min-height:6rem;overflow:auto;vertical-align:top;resize:vertical}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{padding:0;border-style:none}button,[type="button"],[type="reset"],[type="submit"]{line-height:normal;text-align:center;margin:0;background-clip:padding-box;vertical-align:baseline;overflow:visible;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;background-image:none}button:hover,button:active,button:focus,[type="button"]:hover,[type="button"]:active,[type="button"]:focus,[type="reset"]:hover,[type="reset"]:active,[type="reset"]:focus,[type="submit"]:hover,[type="submit"]:active,[type="submit"]:focus{text-decoration:none;color:#222}button,select,input[type="submit"],input[type="button"],[type="checkbox"],[type="range"],[type="radio"],[role="button"]{cursor:pointer}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#666}input::-moz-placeholder,textarea::-moz-placeholder{color:#666}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#666}input::placeholder,textarea::placeholder{color:#666}input:invalid,select:invalid,textarea:invalid,input:invalid:focus,select:invalid:focus,textarea:invalid:focus{color:red;border-color:red;box-shadow:0 0 0 3px rgba(255,0,0,0.25)}fieldset[disabled] button,fieldset[disabled] input,fieldset[disabled] input:after,fieldset[disabled] input:before,fieldset[disabled] input:checked,fieldset[disabled] select,fieldset[disabled] textarea,fieldset[disabled] label,button[disabled],input[disabled],input[disabled]:after,input[disabled]:before,input[disabled]:checked,select[disabled],textarea[disabled]{cursor:default !important;cursor:not-allowed !important;pointer-events:none !important;box-shadow:none !important;opacity:.5 !important}[type="email"],[type="number"],[type="password"],[type="tel"],[type="search"],[type="text"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"],[type="time"],[type="url"],[type="range"],select,textarea{background-color:#fff;border:1px solid #999;padding:6px 9px;padding:.6rem 9px}@media \0creen{[type="email"],[type="number"],[type="password"],[type="tel"],[type="search"],[type="text"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"],[type="time"],[type="url"],[type="range"]{padding-top:0;padding-bottom:0;height:38px;line-height:38px}}@media screen and (min-width:0\0) and (-webkit-min-device-pixel-ratio:.75),screen and (min-width:0\0) and (min-resolution:72dpi){[type="email"],[type="number"],[type="password"],[type="tel"],[type="search"],[type="text"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"],[type="time"],[type="url"],[type="range"]{line-height:1.2}}[type="email"]:active,[type="email"]:focus,[type="number"]:active,[type="number"]:focus,[type="password"]:active,[type="password"]:focus,[type="tel"]:active,[type="tel"]:focus,[type="search"]:active,[type="search"]:focus,[type="text"]:active,[type="text"]:focus,[type="date"]:active,[type="date"]:focus,[type="datetime-local"]:active,[type="datetime-local"]:focus,[type="month"]:active,[type="month"]:focus,[type="time"]:active,[type="time"]:focus,[type="week"]:active,[type="week"]:focus,[type="time"]:active,[type="time"]:focus,[type="url"]:active,[type="url"]:focus,select:active,select:focus,textarea:active,textarea:focus,[type="radio"]:active,[type="radio"]:focus,[type="checkbox"]:active,[type="checkbox"]:focus{transition:border .2s,background-color .2s,box-shadow .2s;border-color:#007bff;box-shadow:0 0 0 3px rgba(0,86,179,0.25)}button,[type="button"],[type="reset"],[type="submit"]{color:#222;padding:8px 16px;padding:.8rem 1.6rem;background:#ccc;transition:color .2s,background .2s,box-shadow .2s}button:hover,button:active,button:focus,[type="button"]:hover,[type="button"]:active,[type="button"]:focus,[type="reset"]:hover,[type="reset"]:active,[type="reset"]:focus,[type="submit"]:hover,[type="submit"]:active,[type="submit"]:focus{text-decoration:none;color:#222;background:#b3b3b3}button:active,button:focus,[type="button"]:active,[type="button"]:focus,[type="reset"]:active,[type="reset"]:focus,[type="submit"]:active,[type="submit"]:focus{box-shadow:0 0 0 3px rgba(0,0,0,0.15)}select:not([size]):not([multiple]){-webkit-appearance:none;-moz-appearance:none;appearance:none}select::-ms-expand{display:none}select:not([size]):not([multiple]){background:#fff url("data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'width='4'height='5'viewBox='0045'%3e%3cpathfill='%23343a40'd='M20L02h4zm05L03h4z'/%3e%3c/svg%3e") no-repeat right .85rem center/8px 10px;padding-right:24px;padding-right:2.4rem}@media all and (min-width:0\0) and (min-resolution:.001dpcm){select{padding-right:6px;background-image:none;background-repeat:repeat}}@supports((-webkit-appearance:none) or(-moz-appearance:none) or(appearance:none)){[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2.8rem;width:2.8rem;vertical-align:top;position:relative;border:1px solid #999}[type="checkbox"]+label,[type="radio"]+label{line-height:2.8rem;vertical-align:top;margin-left:6px;margin-left:.6rem}[type="checkbox"]:after,[type="radio"]:after{content:"";display:block;position:absolute}[type="checkbox"]:checked,[type="radio"]:checked{background-color:#007bff;border-color:#000}[type="checkbox"]:after{width:.6rem;height:1rem;border:2px solid #fff;border-top:0;border-left:0;left:1rem;top:.7rem;-webkit-transform:rotate(43deg);transform:rotate(43deg)}[type="radio"]:after{width:2.8rem;height:2.8rem;left:0;top:0;border-radius:50%;background:#fff;-webkit-transform:scale(0.35);transform:scale(0.35)}}@supports((-webkit-appearance:none) or(-moz-appearance:none) or(appearance:none)){@media screen and (-webkit-min-device-pixel-ratio:0){[type="radio"]:after{left:-0.05rem;top:-0.05rem}}}table{max-width:100%;border-collapse:collapse}thead th{vertical-align:bottom}th,td{vertical-align:top}th{text-align:inherit}caption{padding-top:6px;padding-top:.6rem;padding-bottom:6px;padding-bottom:.6rem;color:#999;text-align:left;caption-side:bottom}th{font-weight:700;font-weight:600}.bf-container,.bf-container--fluid{box-sizing:content-box;display:block;margin-right:auto;margin-left:auto;padding-left:12px;padding-left:1.2rem;padding-right:12px;padding-right:1.2rem}@media(min-width:768px){.bf-container,.bf-container--fluid{padding-left:24px;padding-left:2.4rem;padding-right:24px;padding-right:2.4rem}}.bf-container:before,.bf-container:after,.bf-container--fluid:before,.bf-container--fluid:after{display:table;content:" "}.bf-container:after,.bf-container--fluid:after{clear:both}.bf-container{max-width:1152px;max-width:115.2rem}.bf-row{display:block;margin-left:-12px;margin-left:-1.2rem;margin-right:-12px;margin-right:-1.2rem}@media(min-width:768px){.bf-row{margin-left:-24px;margin-left:-2.4rem;margin-right:-24px;margin-right:-2.4rem}}.bf-row:before,.bf-row:after{content:" ";display:table}.bf-row:after{clear:both}[class^="bf-col-"]{float:left;position:relative;min-height:1px;padding-left:12px;padding-left:1.2rem;padding-right:12px;padding-right:1.2rem}@media(min-width:768px){[class^="bf-col-"]{padding-left:24px;padding-left:2.4rem;padding-right:24px;padding-right:2.4rem}}.bf-no-gutters{margin-right:0;margin-left:0}.bf-no-gutters>[class^="bf-col"]{padding-right:0;padding-left:0}.bf-col-12{width:100%}.bf-col-11{width:91.66666666666666%}.bf-col-10{width:83.33333333333334%}.bf-col-9{width:75%}.bf-col-8{width:66.66666666666666%}.bf-col-7{width:58.333333333333336%}.bf-col-6{width:50%}.bf-col-5{width:41.66666666666667%}.bf-col-4{width:33.33333333333333%}.bf-col-3{width:25%}.bf-col-2{width:16.666666666666664%}.bf-col-1{width:8.3333%}@media(max-width:575px){.bf-container--break-xs .bf-row{margin-left:0;margin-right:0}.bf-container--break-xs [class^="bf-col"]{width:100%;float:none;margin-left:0;padding-left:0;padding-right:0}}@media(max-width:767px){.bf-container--break-md .bf-row{margin-left:0;margin-right:0}.bf-container--break-md [class^="bf-col"]{width:100%;float:none;margin-left:0;padding-left:0;padding-right:0}}@media(max-width:991px){.bf-container--break-lg .bf-row{margin-left:0;margin-right:0}.bf-container--break-lg [class^="bf-col"]{width:100%;float:none;margin-left:0;padding-left:0;padding-right:0}}table td[class^="bf-col"],table th[class^="bf-col"]{position:static}.bf-clearfix:before,.bf-clearfix:after{content:" ";display:table}.bf-clearfix:after{clear:both}.bf-hide{display:none !important}.bf-hidden{display:none !important;visibility:hidden !important}.bf-text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;margin:0;padding:0}.bf-sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.bf-sr-only.focusable:active,.bf-sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.bf-invisible{visibility:hidden}.bf-visible{visibility:visible}.bf-display-block{display:block}.bf-display-block-center{display:block;margin-left:auto;margin-right:auto}.bf-display-inline{display:inline}.bf-display-inline-block{display:inline-block}.bf-display-flex{display:-webkit-flex !important;display:flex !important}.bf-display-inline-flex{display:-webkit-inline-flex !important;display:inline-flex !important}.bf-float-right{float:right}.bf-float-left{float:left}.bf-position-fixed{position:fixed}.bf-align-center-unknown{display:table;width:100%}.bf-align-center-unknown--item{display:table-cell;text-align:center;vertical-align:middle}.bf-m-0{margin:0 !important}.bf-m-t-0{margin-top:0 !important}.bf-m-b-0{margin-bottom:0 !important}.bf-m-l-0{margin-left:0 !important}.bf-m-r-0{margin-right:0 !important}.bf-m-b-6{margin-bottom:6px !important;margin-bottom:.6rem !important}.bf-m-b-12{margin-bottom:12px !important;margin-bottom:1.2rem !important}.bf-m-b-24{margin-bottom:24px !important;margin-bottom:2.4rem !important}.bf-m-b-36{margin-bottom:36px !important;margin-bottom:3.6rem !important}.bf-p-0{padding:0 !important}.bf-p-t-0{padding-top:0 !important}.bf-p-b-0{padding-bottom:0 !important}.bf-p-l-0{padding-left:0 !important}.bf-p-r-0{padding-right:0 !important}.bf-p-t-6{padding-top:6px !important;padding-top:.6rem !important}.bf-p-t-12{padding-top:12px !important;padding-top:1.2rem !important}.bf-p-t-24{padding-top:24px !important;padding-top:2.4rem !important}.bf-p-t-36{padding-top:36px !important;padding-top:3.6rem !important}.bf-p-b-6{padding-bottom:6px !important;padding-bottom:.6rem !important}.bf-p-b-12{padding-bottom:12px !important;padding-bottom:1.2rem !important}.bf-p-b-24{padding-bottom:24px !important;padding-bottom:2.4rem !important}.bf-p-b-36{padding-bottom:36px !important;padding-bottom:3.6rem !important}.bf-t-transform-uppercase{text-transform:uppercase}.bf-t-transform-none{text-transform:none}.bf-t-left{text-align:left}.bf-t-center{text-align:center}.bf-t-right{text-align:right}.bf-t-shadow{text-shadow:0 0 .2rem #222}.bf-t-italic{font-style:italic}.bf-t-style-normal{font-style:normal}.bf-t-weight-400{font-weight:400}.bf-t-weight-500{font-weight:500}.bf-t-weight-600{font-weight:600}.bf-t-weight-700{font-weight:700}.bf-text-break{word-wrap:break-word}.bf-t-truncate{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.bf-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none}.bf-font-sans-serif{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"}.bf-font-serif{font-family:Georgia,Times,"Times New Roman",serif}.bf-font-monospace{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}.bf-h1,.bf-h2,.bf-h3,.bf-h4,.bf-h5,.bf-h6{font-weight:700;font-weight:600;margin-top:0}.bf-h1,.bf-h2,.bf-h3{margin-bottom:24px;margin-bottom:24px}.bf-h4,.bf-h5,.bf-h6{margin-bottom:12px;margin-bottom:12px}.bf-h1{font-size:36px;font-size:3.6rem}.bf-h2{font-size:30px;font-size:3rem}.bf-h3{font-size:24px;font-size:2.4rem}.bf-h4{font-size:20px;font-size:2rem}.bf-h5,.bf-h6{font-size:17px;font-size:1.7rem}p.bf-lead{font-size:120%}@supports((-webkit-appearance:none) or(-moz-appearance:none) or(appearance:none)){@media(min-width:320px){body.bf-responsive-typography{font-size:calc(1.7rem+3 *((100vw - 320px) / 680))}}@media(min-width:1000px){body.bf-responsive-typography{font-size:2rem}}}.bf-btn{display:inline-block;cursor:pointer;color:#222;padding:8px 16px;padding:.8rem 1.6rem;line-height:normal;text-align:center;margin:0;background-clip:padding-box;vertical-align:baseline;overflow:visible;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px;border-radius:.3rem;border:0;background-image:none;background:#ccc;transition:all .2s}.bf-btn:hover,.bf-btn:active,.bf-btn:focus{text-decoration:none;color:#222;background:#b3b3b3}.bf-btn:active,.bf-btn:focus{box-shadow:0 0 0 3px rgba(0,0,0,0.15)}.bf-btn:focus{outline:0}.bf-btn.bf-btn--primary{color:#fff;background:#007bff}.bf-btn.bf-btn--primary:hover,.bf-btn.bf-btn--primary:active,.bf-btn.bf-btn--primary:focus{color:#fff;background:#0062cc}.bf-btn.bf-btn--primary:active,.bf-btn.bf-btn--primary:focus{box-shadow:0 0 0 3px rgba(0,86,179,0.25)}fieldset[disabled] .bf-btn,.bf-btn[disabled],.bf-btn.bf-disabled{cursor:default !important;cursor:not-allowed !important;pointer-events:none;opacity:.5 !important;box-shadow:none}.bf-focused{transition:border .2s,background-color .2s,box-shadow .2s;border-color:#007bff;box-shadow:0 0 0 3px rgba(0,86,179,0.25)}.bf-disabled{cursor:default !important;cursor:not-allowed !important;pointer-events:none !important;box-shadow:none !important;opacity:.5 !important}.bf-invalid,.bf-invalid:focus{color:red;border-color:red;box-shadow:0 0 0 3px rgba(255,0,0,0.25)}.bf-list-unstyled,menu ul.bf-list-unstyled,menu ol.bf-list-unstyled,ul.bf-list-unstyled ul,ul.bf-list-unstyled ol,ol.bf-list-unstyled ol,ol.bf-list-unstyled ul,dd.bf-list-unstyled{margin:0;padding:0;list-style:none}.bf-embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.bf-embed-responsive::before{display:block;content:"";padding-top:56.25%}.bf-embed-responsive.bf-embed-responsive--4-3::before{padding-top:75%}.bf-embed-responsive .bf-embed-responsive--item,.bf-embed-responsive iframe,.bf-embed-responsive embed,.bf-embed-responsive object,.bf-embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.bf-table th,.bf-table td{padding:4px;padding:.4rem;border-bottom:1px solid #999;margin-bottom:6px;margin-bottom:.6rem}.bf-table-responsive{overflow-x:auto;overflow-y:hidden;-ms-overflow-style:scrollbar}.bf-table-responsive table{width:100%;margin-bottom:6px;margin-bottom:.6rem}.bf-table-responsive.scrollbar{-webkit-overflow-scrolling:auto}@media print{*,*:before,*:after{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap !important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}@media print{body,.bf-container{min-width:992px !important}.bf-table-responsive{overflow:auto}.bf-table-responsive table{width:auto}.bf-table-responsive table,.bf-table{border-collapse:collapse !important}}@media(prefers-reduced-motion:reduce){.bf-reduced-motion,.bf-reduced-motion *{-webkit-animation-duration:.01ms !important;animation-duration:.01ms !important;-webkit-animation-iteration-count:1 !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}} \ No newline at end of file +/*! bullframe.css v3.2.0 | MIT License | https://github.com/marcop135/bullframe.css */*,*:before,*:after{box-sizing:border-box}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,menu,nav,section,details{display:block}template{display:none}[hidden]{display:none !important}@-ms-viewport{width:device-width}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;font-size:62.5%;color:#222;font-family:sans-serif;line-height:1.15;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{margin:0;font-size:17px;font-size:1.7rem;line-height:1.5;font-weight:400;text-align:left;font-family:BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";text-rendering:optimizeLegibility;word-wrap:break-word;background-color:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden}h1,h2,h3,h4,h5,h6{font-weight:700;font-weight:600}h1,h2,h3,h4,h5,h6{margin-top:0}h1,h2,h3,h4,h5,h6{font-family:inherit;color:inherit;line-height:1.25;margin-bottom:12px;margin-bottom:1.2rem}h1{font-size:36px;font-size:3.6rem}h2{font-size:30px;font-size:3rem}h3{font-size:24px;font-size:2.4rem}h4{font-size:20px;font-size:2rem}h5,h6{font-size:17px;font-size:1.7rem}blockquote{margin:0 0 24px 0;margin-bottom:2.4rem;padding-left:0;font-style:italic}blockquote p{margin-bottom:0}blockquote small{color:#999;display:block}blockquote small:before{content:"\2014 \00A0"}q{quotes:"“" "”" "‘" "’"}pre{margin:0 0 24px 0;margin:0 0 2.4rem 0}pre{overflow:auto;word-break:break-all;word-wrap:break-word;white-space:pre;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;-ms-overflow-style:auto;display:block}pre,code,kbd,samp{font-family:"Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:.875em}code{word-wrap:break-word}pre code{font-size:inherit;word-break:normal}p{margin:0 0 24px 0;margin:0 0 2.4rem 0}abbr[title],abbr[data-original-title]{cursor:help;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;text-decoration-skip:none}mark{background-color:#ff0;color:#000}ins{background-color:#ff9;color:#000;text-decoration:none}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-8px;top:-0.8rem}sub{bottom:-4px;bottom:-0.4rem}small{font-size:80%}hr{box-sizing:content-box;display:block;height:0;border-style:solid;border-width:1px 0 0;color:inherit;margin:24px 0;margin:2.4rem 0;padding:0;overflow:visible}address{font-style:normal;margin-bottom:12px;margin-bottom:1.2rem;line-height:inherit}summary{display:list-item;cursor:pointer}a{color:#007bff;text-decoration:none;background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration-skip:objects;-webkit-text-decoration-skip-ink:objects;text-decoration-skip-ink:objects}a:hover,a:focus{text-decoration:underline;color:#0056b3}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):hover,a:not([href]):not([tabindex]):focus{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}:focus:not(:focus-visible){outline:0}[tabindex="-1"]:focus:not(:focus-visible){outline:0 !important}a:focus,input:focus{outline:2px solid orange}:focus-visible{outline:2px solid orange}button:focus,[type="button"]:focus,[type="reset"]:focus,[type="submit"]:focus,[type="email"]:focus,[type="number"]:focus,[type="password"]:focus,[type="tel"]:focus,[type="search"]:focus,[type="text"]:focus,[type="date"]:focus,[type="datetime-local"]:focus,[type="month"]:focus,[type="time"]:focus,[type="week"]:focus,[type="time"]:focus,[type="url"]:focus,[type="radio"]:focus,[type="checkbox"]:focus,input[list]:focus,select:focus,textarea:focus{outline:0}menu,ol,ul,dl{margin:0 0 24px 0;margin:0 0 2.4rem 0;padding:0}menu ul,menu ol,ul ul,ul ol,ol ol,ol ul,dd{margin-bottom:0}ul,ol{margin-left:24px;margin-left:2.4rem}nav ol,nav ul{list-style:none;list-style-image:none;margin-left:0}dt{font-weight:700}dd{margin-left:0}nav li:before{content:"\200B";position:absolute}audio,canvas,progress,video{display:inline-block}img,canvas,audio,video,iframe,object,embed{max-width:100%}audio,video,canvas,img,svg{vertical-align:middle}img{height:auto;border-style:none}figure{margin:0}figure,figcaption{display:block}figcaption{line-height:1.375;font-size:90%}video{height:auto}audio{width:100%}audio:not([controls]){display:none;height:0}svg:not(:root){overflow:hidden}svg:not([fill]){fill:currentColor}progress,meter{display:inline-block;vertical-align:baseline;width:100%;max-width:100%}progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;height:20px;height:2rem;background:#ccc;color:#007bff}progress[value]::-webkit-progress-bar{background:#ccc}progress[value]::-webkit-progress-value{background:#007bff}iframe{border-style:none}html input,button,select,optgroup,textarea{color:inherit;font-family:inherit;font-size:inherit;line-height:inherit}html input,button,[type="radio"],[type="checkbox"],select,optgroup,textarea{margin:0}html input,select,textarea,legend{width:100%}html label,button,[type="image"],[type="submit"],[type="reset"],html [type="button"],[type="radio"],[type="checkbox"]{width:auto}html input,label,select,textarea,button,html [type="button"],[type="reset"],[type="submit"],output{display:inline-block}[type="file"]{display:block;background-color:transparent}button,html input,select,textarea{background-image:none}input,select,textarea{vertical-align:baseline}form{margin:0}fieldset{border:0;padding:0;margin:0;min-width:0}legend{display:table;max-width:100%;white-space:normal;border:0;padding:0;font-weight:400;margin-bottom:6px;margin-bottom:.6rem;font-size:inherit;line-height:1.375;color:inherit}label{font-weight:700;font-size:90%;line-height:1.375;margin-bottom:6px;margin-bottom:.6rem}label input,label select,label textarea{font-size:110%}[type="number"]::-webkit-outer-spin-button,[type="number"]::-webkit-inner-spin-button{height:auto}[type="search"]{outline-offset:-3px;outline-offset:-0.3rem}output{vertical-align:middle}button,select{text-transform:none}select{word-wrap:normal}optgroup{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:700;font-weight:600}button,html [type="button"],[type="reset"],[type="submit"],[type="email"],[type="number"],[type="text"],[type="tel"],[type="date"],[type="datetime-local"],[type="month"],[type="week"],[type="url"],[type="image"],[type="password"],[type="search"],[type="search"]::-webkit-search-decoration,[type="search"]::-webkit-search-cancel-button,input[list],textarea{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="date"],[type="time"],[type="datetime-local"],[type="month"]{-webkit-appearance:listbox;-moz-appearance:listbox;appearance:listbox}button,input,select,textarea{border-radius:3px;border-radius:.3rem}[type="radio"]{border-radius:50%}[type="checkbox"]{border-radius:6px;border-radius:.6rem}[type="radio"],[type="checkbox"]{padding:0;background-color:#fff}[type="range"]{background-color:transparent}select[size],select[multiple]{height:auto}select[multiple]{background-image:none}textarea{height:auto;min-height:60px;min-height:6rem;overflow:auto;vertical-align:top;resize:vertical}::-moz-focus-inner{padding:0;border-style:none}button,[type="button"],[type="reset"],[type="submit"]{line-height:normal;text-align:center;margin:0;background-clip:padding-box;vertical-align:baseline;overflow:visible;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;background-image:none}button:hover,button:active,button:focus,[type="button"]:hover,[type="button"]:active,[type="button"]:focus,[type="reset"]:hover,[type="reset"]:active,[type="reset"]:focus,[type="submit"]:hover,[type="submit"]:active,[type="submit"]:focus{text-decoration:none;color:#222}button,select,input[type="submit"],input[type="button"],[type="checkbox"],[type="range"],[type="radio"],[role="button"]{cursor:pointer}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#666}input::-moz-placeholder,textarea::-moz-placeholder{color:#666}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#666}input::placeholder,textarea::placeholder{color:#666}:-moz-ui-invalid{box-shadow:none}[type="email"],[type="number"],[type="password"],[type="tel"],[type="search"],[type="text"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"],[type="time"],[type="url"],[type="range"],input[list],select,textarea{background-color:#fff;border:1px solid #999;padding:6px 9px;padding:.6rem .9rem}@media \0creen{[type="email"],[type="number"],[type="password"],[type="tel"],[type="search"],[type="text"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"],[type="time"],[type="url"],[type="range"],input[list]{padding-top:0;padding-bottom:0;height:38px;line-height:38px}}@media screen and (min-width:0\0) and (-webkit-min-device-pixel-ratio:.75),screen and (min-width:0\0) and (min-resolution:72dpi){[type="email"],[type="number"],[type="password"],[type="tel"],[type="search"],[type="text"],[type="date"],[type="datetime-local"],[type="month"],[type="time"],[type="week"],[type="time"],[type="url"],[type="range"],input[list]{line-height:1.2}}[type="email"]:active,[type="email"]:focus,[type="number"]:active,[type="number"]:focus,[type="password"]:active,[type="password"]:focus,[type="tel"]:active,[type="tel"]:focus,[type="search"]:active,[type="search"]:focus,[type="text"]:active,[type="text"]:focus,[type="date"]:active,[type="date"]:focus,[type="datetime-local"]:active,[type="datetime-local"]:focus,[type="month"]:active,[type="month"]:focus,[type="time"]:active,[type="time"]:focus,[type="week"]:active,[type="week"]:focus,[type="time"]:active,[type="time"]:focus,[type="url"]:active,[type="url"]:focus,input[list]:active,input[list]:focus,select:active,select:focus,textarea:active,textarea:focus,[type="radio"]:active,[type="radio"]:focus,[type="checkbox"]:active,[type="checkbox"]:focus{transition:border .2s,background-color .2s,box-shadow .2s;border-color:#007bff;box-shadow:0 0 0 3px rgba(0,86,179,0.25)}button,[type="button"],[type="reset"],[type="submit"]{color:#222;padding:8px 16px;padding:.8rem 1.6rem;background:#ccc;transition:color .2s,background .2s,box-shadow .2s}button:hover,button:active,button:focus,[type="button"]:hover,[type="button"]:active,[type="button"]:focus,[type="reset"]:hover,[type="reset"]:active,[type="reset"]:focus,[type="submit"]:hover,[type="submit"]:active,[type="submit"]:focus{text-decoration:none;color:#222;background:#b3b3b3}button:active,button:focus,[type="button"]:active,[type="button"]:focus,[type="reset"]:active,[type="reset"]:focus,[type="submit"]:active,[type="submit"]:focus{box-shadow:0 0 0 3px rgba(0,0,0,0.15)}fieldset[disabled] button,fieldset[disabled] input,fieldset[disabled] input:after,fieldset[disabled] input:before,fieldset[disabled] input:checked,fieldset[disabled] select,fieldset[disabled] textarea,fieldset[disabled] label,button[disabled],input[disabled],input[disabled]:after,input[disabled]:before,input[disabled]:checked,select[disabled],textarea[disabled],label[disabled],button:disabled,input:disabled,input:disabled:after,input:disabled:before,input:disabled:checked,select:disabled,textarea:disabled,label:disabled,button[aria-disabled="true"],input[aria-disabled="true"],input[aria-disabled="true"]:after,input[aria-disabled="true"]:before,input[aria-disabled="true"]:checked,select[aria-disabled="true"],textarea[aria-disabled="true"],label[aria-disabled="true"]{cursor:default !important;cursor:not-allowed !important;pointer-events:none !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;box-shadow:none !important;opacity:.5 !important}select:not([size]):not([multiple]){-webkit-appearance:none;-moz-appearance:none;appearance:none}select::-ms-expand{display:none}select:not([size]):not([multiple]){background:#fff url("data:image/svg+xml,%3csvgxmlns='http://www.w3.org/2000/svg'width='4'height='5'viewBox='0045'%3e%3cpathfill='%23343a40'd='M20L02h4zm05L03h4z'/%3e%3c/svg%3e") no-repeat right .85rem center/8px 10px;padding-right:24px;padding-right:2.4rem}*[dir="rtl"] select:not([size]):not([multiple]),select[dir="rtl"]:not([size]):not([multiple]){background-position:left .85rem top 50%;padding-right:9px;padding-right:.9rem;padding-left:24px;padding-left:2.4rem}@media screen and (min-width:0\0) and (min-resolution:.001dpcm){select:not([size]):not([multiple]){padding-right:9px}*[dir="rtl"] select:not([size]):not([multiple]),select[dir="rtl"]:not([size]):not([multiple]){padding-left:9px}select:not([size]):not([multiple]),*[dir="rtl"] select:not([size]):not([multiple]),select[dir="rtl"]:not([size]):not([multiple]){background-image:none;background-repeat:repeat}}@supports((-webkit-appearance:none) or(-moz-appearance:none) or(appearance:none)){[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2rem;width:2rem;vertical-align:top;position:relative;border:1px solid #999}[type="checkbox"]+label,[type="radio"]+label{line-height:2rem;vertical-align:top;margin-left:6px;margin-left:.6rem}*[dir="rtl"] [type="checkbox"]+label,[type="checkbox"][dir="rtl"]+label,*[dir="rtl"] [type="radio"]+label,[type="radio"][dir="rtl"]+label{margin-left:0;margin-right:6px;margin-right:.6rem}[type="checkbox"]:after,[type="radio"]:after{content:"";display:block;position:absolute}[type="checkbox"]:checked,[type="radio"]:checked{background-color:#007bff;border-color:#000}[type="radio"]:after{width:2rem;height:2rem;left:-0.05rem;top:-0.05rem;border-radius:50%;background:#fff;-webkit-transform:scale(0.35);transform:scale(0.35)}[type="checkbox"]:after{width:.6rem;height:.8rem;border:2px solid #fff;border-top:0;border-left:0;left:35%;top:20%;-webkit-transform:rotate(43deg);transform:rotate(43deg)}}table{max-width:100%;border-collapse:collapse}thead th{vertical-align:bottom}th,td{vertical-align:top}th{text-align:inherit}caption{padding-top:6px;padding-top:.6rem;padding-bottom:6px;padding-bottom:.6rem;color:#999;text-align:left;caption-side:bottom;line-height:1.375;font-size:90%}th{font-weight:700}.bf-container,.bf-container--fluid{box-sizing:content-box;display:block;margin-right:auto;margin-left:auto;padding-left:15px;padding-left:1.5rem;padding-right:15px;padding-right:1.5rem}.bf-container:before,.bf-container:after,.bf-container--fluid:before,.bf-container--fluid:after{display:table;content:" "}.bf-container:after,.bf-container--fluid:after{clear:both}.bf-container{max-width:1152px;max-width:115.2rem}.bf-row{display:block;margin-left:-15px;margin-left:-1.5rem;margin-right:-15px;margin-right:-1.5rem}.bf-row:before,.bf-row:after{content:" ";display:table}.bf-row:after{clear:both}[class^="bf-col-"]{float:left;position:relative;min-height:1px;padding-left:15px;padding-left:1.5rem;padding-right:15px;padding-right:1.5rem}.bf-no-gutters{margin-right:0;margin-left:0}.bf-no-gutters>[class^="bf-col"]{padding-right:0;padding-left:0}.bf-col-12{width:100%}.bf-col-11{width:91.66666666666666%}.bf-col-10{width:83.33333333333334%}.bf-col-9{width:75%}.bf-col-8{width:66.66666666666666%}.bf-col-7{width:58.333333333333336%}.bf-col-6{width:50%}.bf-col-5{width:41.66666666666667%}.bf-col-4{width:33.33333333333333%}.bf-col-3{width:25%}.bf-col-2{width:16.666666666666664%}.bf-col-1{width:8.3333%}@media(max-width:575px){.bf-container--break-xs .bf-row{margin-left:0;margin-right:0}.bf-container--break-xs [class^="bf-col"]{width:100%;float:none;margin-left:0;padding-left:0;padding-right:0}}@media(max-width:767px){.bf-container--break-md .bf-row{margin-left:0;margin-right:0}.bf-container--break-md [class^="bf-col"]{width:100%;float:none;margin-left:0;padding-left:0;padding-right:0}}@media(max-width:991px){.bf-container--break-lg .bf-row{margin-left:0;margin-right:0}.bf-container--break-lg [class^="bf-col"]{width:100%;float:none;margin-left:0;padding-left:0;padding-right:0}}table td[class^="bf-col"],table th[class^="bf-col"]{position:static}.bf-clearfix:before,.bf-clearfix:after{content:" ";display:table}.bf-clearfix:after{clear:both}.bf-hide{display:none !important}.bf-hidden{display:none !important;visibility:hidden !important}.bf-text-hide{font:0/0 a !important;color:transparent !important;text-shadow:none !important;background-color:transparent !important;border:0 !important;margin:0 !important;padding:0 !important}.bf-sr-only{border:0 !important;clip:rect(0,0,0,0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;white-space:nowrap !important;width:1px !important}.bf-sr-only.focusable:active,.bf-sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.bf-invisible{visibility:hidden !important}.bf-visible{visibility:visible !important}.bf-display-block{display:block !important}.bf-display-block-center{display:block !important;margin-left:auto !important;margin-right:auto !important}.bf-display-inline{display:inline !important}.bf-display-inline-block{display:inline-block !important}.bf-display-flex{display:-webkit-flex !important;display:flex !important}.bf-display-inline-flex{display:-webkit-inline-flex !important;display:inline-flex !important}.bf-float-right{float:right !important}.bf-float-left{float:left !important}.bf-position-fixed{position:fixed !important}.bf-align-center-unknown{position:relative !important}.bf-align-center-unknown--item{position:absolute !important;top:50% !important;left:50% !important;-webkit-transform:translate(-50%,-50%) !important;transform:translate(-50%,-50%) !important}.bf-m-0{margin:0 !important}.bf-m-t-0{margin-top:0 !important}.bf-m-b-0{margin-bottom:0 !important}.bf-m-l-0{margin-left:0 !important}.bf-m-r-0{margin-right:0 !important}.bf-m-b-6{margin-bottom:6px !important;margin-bottom:.6rem !important}.bf-m-b-12{margin-bottom:12px !important;margin-bottom:1.2rem !important}.bf-m-b-24{margin-bottom:24px !important;margin-bottom:2.4rem !important}.bf-m-b-36{margin-bottom:36px !important;margin-bottom:3.6rem !important}.bf-p-0{padding:0 !important}.bf-p-t-0{padding-top:0 !important}.bf-p-b-0{padding-bottom:0 !important}.bf-p-l-0{padding-left:0 !important}.bf-p-r-0{padding-right:0 !important}.bf-p-t-6{padding-top:6px !important;padding-top:.6rem !important}.bf-p-t-12{padding-top:12px !important;padding-top:1.2rem !important}.bf-p-t-24{padding-top:24px !important;padding-top:2.4rem !important}.bf-p-t-36{padding-top:36px !important;padding-top:3.6rem !important}.bf-p-b-6{padding-bottom:6px !important;padding-bottom:.6rem !important}.bf-p-b-12{padding-bottom:12px !important;padding-bottom:1.2rem !important}.bf-p-b-24{padding-bottom:24px !important;padding-bottom:2.4rem !important}.bf-p-b-36{padding-bottom:36px !important;padding-bottom:3.6rem !important}.bf-t-transform-uppercase{text-transform:uppercase !important}.bf-t-transform-none{text-transform:none !important}.bf-t-left{text-align:left !important}.bf-t-center{text-align:center !important}.bf-t-right{text-align:right !important}.bf-t-shadow{text-shadow:0 0 .2rem #222 !important}.bf-t-italic{font-style:italic !important}.bf-t-style-normal{font-style:normal !important}.bf-t-weight-400{font-weight:400 !important}.bf-t-weight-500{font-weight:500 !important}.bf-t-weight-600{font-weight:600 !important}.bf-t-weight-700{font-weight:700 !important}.bf-text-break{word-wrap:break-word !important}.bf-t-truncate{max-width:100% !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;word-wrap:normal !important}.bf-no-select{-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-touch-callout:none !important}.bf-font-sans-serif{font-family:Catamaran,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important}.bf-font-serif{font-family:Georgia,Times,"Times New Roman",serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important}.bf-font-monospace{font-family:"Menlo","Consolas","Roboto Mono","Ubuntu Monospace","Noto Mono","Oxygen Mono","Liberation Mono",monospace,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important}.bf-h1,.bf-h2,.bf-h3,.bf-h4,.bf-h5,.bf-h6{font-weight:700 !important;font-weight:600 !important;margin-top:0 !important;line-height:1.2 !important;margin-bottom:12px !important;margin-bottom:1.2rem !important}.bf-h1{font-size:36px !important;font-size:3.6rem !important}.bf-h2{font-size:30px !important;font-size:3rem !important}.bf-h3{font-size:24px !important;font-size:2.4rem !important}.bf-h4{font-size:20px !important;font-size:2rem !important}.bf-h5,.bf-h6{font-size:17px !important;font-size:1.7rem !important}p.bf-lead{font-size:120% !important}body.bf-responsive-typography{--body-rt-font-size-flex:calc(1.7rem+3 *((100vw - 320px) / 680));--body-rt-font-size-max:2rem}@media(min-width:320px){body.bf-responsive-typography{font-size:var(--body-rt-font-size-flex)}}@media(min-width:1000px){body.bf-responsive-typography{font-size:var(--body-rt-font-size-max)}}.bf-btn{display:inline-block;cursor:pointer;color:#222;padding:8px 16px;padding:.8rem 1.6rem;line-height:normal;text-align:center;margin:0;background-clip:padding-box;vertical-align:baseline;overflow:visible;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:3px;border-radius:.3rem;border:0;background-image:none;background:#ccc;transition:all .2s}.bf-btn:hover,.bf-btn:active,.bf-btn:focus{text-decoration:none;color:#222;background:#b3b3b3}.bf-btn:active,.bf-btn:focus{box-shadow:0 0 0 3px rgba(0,0,0,0.15)}.bf-btn:focus{outline:0}.bf-btn.bf-btn--primary{color:#fff;background:#007bff}.bf-btn.bf-btn--primary:hover,.bf-btn.bf-btn--primary:active,.bf-btn.bf-btn--primary:focus{color:#fff;background:#0062cc}.bf-btn.bf-btn--primary:active,.bf-btn.bf-btn--primary:focus{box-shadow:0 0 0 3px rgba(0,86,179,0.25)}fieldset[disabled] .bf-btn,.bf-btn[disabled],.bf-btn:disabled .bf-btn[aria-disabled="true"]{cursor:default !important;cursor:not-allowed !important;pointer-events:none !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;box-shadow:none !important;opacity:.5 !important}.bf-focused{transition:border .2s,background-color .2s,box-shadow .2s !important;border-color:#007bff !important;box-shadow:0 0 0 3px rgba(0,86,179,0.25) !important}.bf-disabled,.bf-disabled:hover,.bf-disabled:active,.bf-disabled:focus,.bf-disabled:after,.bf-disabled:before,.bf-disabled:invalid,.bf-disabled:checked{cursor:default !important;cursor:not-allowed !important;pointer-events:none !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;box-shadow:none !important;opacity:.5 !important;background-color:#fff;border-color:#999}label.bf-disabled{background-color:transparent;border-color:transparent}button.bf-disabled,[type="button"].bf-disabled,[type="reset"].bf-disabled,[type="submit"].bf-disabled,.bf-btn.bf-disabled{cursor:default;cursor:not-allowed;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-shadow:none;opacity:.5;color:#222;background:#ccc}button.bf-disabled:hover,button.bf-disabled:active,button.bf-disabled:focus,[type="button"].bf-disabled:hover,[type="button"].bf-disabled:active,[type="button"].bf-disabled:focus,[type="reset"].bf-disabled:hover,[type="reset"].bf-disabled:active,[type="reset"].bf-disabled:focus,[type="submit"].bf-disabled:hover,[type="submit"].bf-disabled:active,[type="submit"].bf-disabled:focus,.bf-btn.bf-disabled:hover,.bf-btn.bf-disabled:active,.bf-btn.bf-disabled:focus{box-shadow:none;color:#222;background:#ccc}.bf-btn--primary.bf-disabled{cursor:default;cursor:not-allowed;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-shadow:none;opacity:.5;color:#fff;background:#007bff}.bf-btn--primary.bf-disabled:hover,.bf-btn--primary.bf-disabled:active,.bf-btn--primary.bf-disabled:focus{box-shadow:none;color:#fff;background:#007bff}.bf-invalid,.bf-invalid:focus{color:#f00 !important;border-color:#f00 !important;box-shadow:0 0 0 3px rgba(255,0,0,0.25) !important}.bf-list-unstyled,menu ul.bf-list-unstyled,menu ol.bf-list-unstyled,ul.bf-list-unstyled ul,ul.bf-list-unstyled ol,ol.bf-list-unstyled ol,ol.bf-list-unstyled ul,dd.bf-list-unstyled{margin:0;padding:0;list-style:none}dt{font-weight:700}.bf-embed-responsive{position:relative;display:block;width:100%;padding:0;overflow:hidden}.bf-embed-responsive::before{display:block;content:"";padding-top:56.25%}.bf-embed-responsive.bf-embed-responsive--4-3::before{padding-top:75%}.bf-embed-responsive .bf-embed-responsive--item,.bf-embed-responsive iframe,.bf-embed-responsive embed,.bf-embed-responsive object,.bf-embed-responsive video{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;border:0}.bf-table th,.bf-table td{padding:4px;padding:.4rem;border-bottom:1px solid #999;margin-bottom:6px;margin-bottom:.6rem}.bf-table-responsive{overflow-x:auto;overflow-y:hidden;-ms-overflow-style:scrollbar}.bf-table-responsive table{width:100%;margin-bottom:6px;margin-bottom:.6rem}.bf-table-responsive.scrollbar{-webkit-overflow-scrolling:auto}@media print{*,*::before,*::after{background:#fff !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}a,a:visited{text-decoration:underline}a[href]::after{content:" (" attr(href) ")"}abbr[title]::after{content:" (" attr(title) ")"}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}pre{white-space:pre-wrap !important}pre,blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}}@media print{body,.bf-container{min-width:992px !important}.bf-table-responsive{overflow:auto}.bf-table-responsive table{width:auto}.bf-table-responsive table,.bf-table{border-collapse:collapse !important}}@media(prefers-reduced-motion:reduce){.bf-reduced-motion,.bf-reduced-motion::before,.bf-reduced-motion::after,.bf-reduced-motion *,.bf-reduced-motion *::before,.bf-reduced-motion *::after{-webkit-animation-delay:-1ms !important;animation-delay:-1ms !important;-webkit-animation-duration:1ms !important;animation-duration:1ms !important;-webkit-animation-iteration-count:1 !important;animation-iteration-count:1 !important;background-attachment:initial !important;scroll-behavior:auto !important;transition-delay:0 !important;transition-duration:0 !important}} \ No newline at end of file diff --git a/min/cirrus.min.css b/min/cirrus.min.css index d3e9624..ab51505 100644 --- a/min/cirrus.min.css +++ b/min/cirrus.min.css @@ -1 +1 @@ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");*{margin:0;padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;border:0;height:100%}body{letter-spacing:.01rem;line-height:1.8;font-size:1rem;font-weight:400;font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";letter-spacing:.01rem;text-shadow:1px 1px 1px rgba(0,0,0,0.004);color:var(--cirrus-fg)}ul{list-style:none}img,embed,object,audio,video{max-width:100%;height:auto}.hero.fullscreen video{height:100%;object-fit:fill;position:absolute;width:100%;z-index:-1}iframe{outline:0;border:1px solid rgba(0,0,0,0.1);border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,0.05)}article,aside,figure,footer,header,hgroup,section{display:block}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit}label{display:inline-block;margin:.25rem 0}[hidden]{display:none !important}::selection{background-color:var(--cirrus-select-bg)}:focus{box-shadow:0 0 .1rem .15rem rgba(240,61,77,0.13);outline:0}@-webkit-keyframes loading{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes loading{from{transform:rotate(0)}to{transform:rotate(359deg)}}.hover-grow{transition-duration:.32s}.hover-grow:hover{transform:scale(1.1);transition-duration:.08s}.animated.loading{display:block;position:relative}.animated.loading::after{border:2px solid #ccc;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:1rem;width:1rem;left:calc(50% -(1em / 1.25));top:calc(50% -(1em / 1.35));position:absolute;-webkit-animation:loading 500ms infinite linear;animation:loading 500ms infinite linear}.animated.loading.loading-white::after{border-left-color:#fff;border-bottom-color:#fff}.animated.loading.loading-left::after{left:2rem;right:auto}.animated.loading.loading-left{padding-left:4rem}.animated.loading.loading-right::after{left:auto;right:2rem}.animated.loading.loading-right{padding-right:4rem}.animated.loading.hide-text{color:transparent !important}@-webkit-keyframes pound{to{transform:scale(1.1)}}@keyframes pound{to{transform:scale(1.1)}}.animated.pulse{animation:pound .35s infinite alternate;-webkit-animation:pound .35s infinite alternate;vertical-align:baseline}@-webkit-keyframes bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.animated.bounce{animation-name:bounce;-webkit-animation-name:bounce;transform-origin:center bottom;-webkit-transform-origin:center bottom}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}.animated.bounceIn{animation-name:bounceIn}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.animated.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.infinite.alternate{animation-direction:alternate}.animated.paused{-webkit-animation-play-state:paused !important;animation-play-state:paused !important}.avatar{border-radius:50%;position:relative;display:block;margin:auto;font-size:1rem;font-weight:lighter;width:3.2rem;height:3.2rem;background-color:var(--cirrus-primary);overflow:hidden}.avatar::before{content:attr(data-text);color:#fff;left:50%;top:50%;position:absolute;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.avatar.avatar--xsmall{font-size:.8rem;width:1.6rem;height:1.6rem}.avatar.avatar--small{font-size:1rem;height:2.4rem;width:2.4rem}.avatar.avatar--large{font-size:2rem;height:4.8rem;width:4.8rem}.avatar.avatar--xlarge{font-size:2.6rem;height:6.4rem;width:6.4rem}.avatar img.padded{padding:.5rem;width:100%}.card{background-color:#fff;border-radius:5px;position:relative;overflow:hidden;transition:all .3s;backface-visibility:hidden;box-shadow:0 5px 12px 0 rgba(42,51,83,0.12),0 0 5px rgba(0,0,0,0.06);margin-bottom:1rem}.card:hover{transition:all .3s;box-shadow:0 8px 20px 0 rgba(42,51,83,0.12),0 5px 5px rgba(0,0,0,0.06)}.slide-up:hover .card-image{transform:translateY(-40px)}.card:hover .card-image::after{opacity:0}.card-image{bottom:0;left:0;position:absolute;right:0;top:0;border-radius:5px 5px 0 0;background-size:cover;background-repeat:no-repeat;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card-image::after{content:'';display:block;position:absolute;background-color:rgba(0,0,0,0.1);top:0;left:0;right:0;-webkit-transition:all 500ms;transition:all 500ms;bottom:0}.card-container{display:block;position:relative;height:40%;min-height:332px}.card .title-container .title,.card .title-container .subtitle{color:#fff;margin:1rem auto}.card .title-container{position:absolute;bottom:1rem;width:100%;padding:0 1rem}.card .title-container .title{font-weight:300;font-size:1.5rem;margin-bottom:0;text-shadow:0 1px 2px rgba(0,0,0,0.25)}.card.u-flex .content{flex-grow:1}.card .action-bar{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:.5rem;border-top:1px solid #e0e0e0;box-sizing:border-box;-webkit-transition:left 200ms cubic-bezier(0.075,0.82,0.165,1);transition:left 200ms cubic-bezier(0.075,0.82,0.165,1)}.card .action-bar button,.card .action-bar .btn,.card .action-bar [type='submit']{margin:0 .5rem}.card .action-bar+.card-footer{padding:1rem 0;border-top:1px solid #e0e0e0}.card button,.card .btn{display:inline-block;border-color:transparent}.card button:hover,.card .btn:hover{-webkit-transform:none;transform:none}.card button:focus,.card .btn:focus{-webkit-transform:none;transform:none}.mobile-title{position:absolute;left:0;background-color:var(--cirrus-bg);-moz-transition:.3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:.3s ease-in-out;width:100%;padding:2rem 0 0 0;backface-visibility:hidden}.card:hover .mobile-title{margin-top:-7rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card:hover .card-body{opacity:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card-body{opacity:0;-webkit-transition:all var(--animation-duration) ease-in-out;-moz-transition:all var(--animation-duration) ease-in-out;-ms-transition:all var(--animation-duration) ease-in-out;transition:all var(--animation-duration) ease-in-out}.card-footer{position:relative;font-size:.75rem;color:#9fa5a8}.card p{margin:1rem 0}.card-head{align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;display:flex;display:-webkit-box;display:-ms-flexbox;border-bottom:1px solid #e0e0e0}.card-head-title{align-items:center;-webkit-box-align:center;-ms-flex-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-weight:700;padding:0 1rem}.form-ext-control{display:block;min-height:1.5rem;padding-left:1.5rem;position:relative}.form-ext-input{opacity:0;position:absolute;z-index:-1}.form-ext-input:disabled ~ .form-ext-label{opacity:.4}.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label:before{background-color:var(--cirrus-success)}.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label{color:var(--cirrus-success)}.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label:before{background-color:var(--cirrus-danger)}.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label{color:var(--cirrus-danger)}.form-ext-label{margin-bottom:0;position:relative}.form-ext-label:before,.form-ext-label:after{content:"";display:block;height:1rem;left:-1.5rem;position:absolute;top:.3rem;transition:all var(--animation-duration);width:1rem}.form-ext-label:before{background-color:var(--cirrus-light);border:1px solid #d5d7dc;border-radius:.25rem;pointer-events:none;user-select:none;box-sizing:border-box}.form-ext-label:after{background-position:center;background-repeat:no-repeat;background-size:50% 50%}.form-ext-control .form-ext-input:checked ~ .form-ext-label:before{background-color:var(--cirrus-primary)}.form-ext-control.form-ext-checkbox .form-ext-input:checked ~ .form-ext-label:after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='0088'%3E%3Cpathfill='%23fff'd='M6.564.75l-3.593.612-1.538-1.55L04.262.9747.2582.193z'/%3E%3C/svg%3E")}.form-ext-checkbox .form-ext-label:before{border-radius:.25rem}.form-ext-control.form-ext-radio .form-ext-input:checked ~ .form-ext-label:after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='-4-488'%3E%3Ccircler='3'fill='%23fff'/%3E%3C/svg%3E")}.form-ext-radio .form-ext-label:before{border-radius:50%}.form-ext-toggle{cursor:pointer;position:relative}.form-ext-toggle input[type="checkbox"],.form-ext-toggle input[type="radio"]{opacity:0;position:absolute;z-index:-1}.form-ext-toggle__label{align-items:center;display:flex;justify-content:space-between}.form-ext-toggle__toggler{border:1px solid var(--cirrus-gray);border-radius:6.25rem;color:var(--cirrus-gray);display:block;font-size:9px;height:1.5rem;position:relative;width:3rem}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler{background-color:var(--cirrus-primary);border-color:var(--cirrus-primary);color:#fff;position:relative;transition:all .4s ease}.form-ext-toggle i{display:inline-block}.form-ext-input:disabled ~ .form-ext-toggle__toggler{opacity:.5}.form-ext-toggle__toggler i::before,.form-ext-toggle__toggler i::after{content:"";display:block;position:absolute}.form-ext-toggle__toggler i::before{content:attr(data-uncheck-icon);padding:2px 7px;line-height:18px;text-align:right;top:0;width:65%;font-size:12px}.form-ext-toggle__toggler i::after{background-color:var(--cirrus-gray);border-radius:50%;height:16px;left:4px;width:16px;transform:translateY(-50%);transition:left var(--animation-duration) ease;text-align:left}.form-ext-control .form-ext-input:checked ~ .form-ext-label:before{border:0}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler i::after{background-color:#fff;left:calc(100% - 20px)}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler i::before,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler i::before,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler i::before,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler i::before{color:#fff;content:attr(data-check-icon);text-align:left}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler i::after{background-color:#fff;left:calc(100% - 20px)}.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked+* .form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked+* .form-ext-toggle__toggler{background-color:var(--cirrus-danger);border-color:var(--cirrus-danger)}.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler{border-color:var(--cirrus-danger);color:var(--cirrus-danger)}.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler i::after{background-color:var(--cirrus-danger)}.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked+* .form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked+* .form-ext-toggle__toggler{background-color:var(--cirrus-success);border-color:var(--cirrus-success)}.form-ext-toggle--success .form-ext-toggle__toggler{border-color:var(--cirrus-success);color:var(--cirrus-success)}.form-ext-toggle--success .form-ext-toggle__toggler i::after{background-color:var(--cirrus-success)}.form-ext-toggle .form-ext-input:focus+.form-ext-toggle__toggler,.form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before{box-shadow:0 0 0 .2rem rgba(var(--cirrus-primary-rgb),var(--focus-opacity)),inset 0 1px 8px rgba(0,0,0,0.07)}.form-ext-toggle.form-ext-toggle--success .form-ext-input:focus+.form-ext-toggle__toggler{box-shadow:0 0 0 .2rem rgba(var(--cirrus-success-rgb),var(--focus-opacity)),inset 0 1px 8px rgba(34,197,127,0.13)}.form-ext-input.form-ext-input--success:focus ~ .form-ext-label:before{border-color:inherit;box-shadow:0 0 0 .2rem rgba(var(--cirrus-success-rgb),var(--focus-opacity)),inset 0 1px 8px rgba(0,0,0,0.07)}:root{--gap-0:0;--gap-1:.25rem;--gap-2:.5rem;--gap-3:1rem;--gap-4:1.25rem;--gap-5:1.5rem;--gap-6:3rem;--gap-7:6rem;--gap-8:9rem;--gap-9:12rem}.grid{--grid-gap:--gap-2;--grid-template-column:repeat(12,minmax(0,1fr));--grid-column-start:auto;--grid-column-end:auto;--grid-row-start:auto;--grid-row-end:auto;display:grid;grid-gap:var(--grid-gap);grid-template-columns:var(--grid-template-column)}.grid .c{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end)}.grid.grid-cols-1{--grid-template-column:repeat(1,minmax(0,1fr))}.grid.grid-cols-2{--grid-template-column:repeat(2,minmax(0,1fr))}.grid.grid-cols-3{--grid-template-column:repeat(3,minmax(0,1fr))}.grid.grid-cols-4{--grid-template-column:repeat(4,minmax(0,1fr))}.grid.grid-cols-5{--grid-template-column:repeat(5,minmax(0,1fr))}.grid.grid-cols-6{--grid-template-column:repeat(6,minmax(0,1fr))}.grid.grid-cols-7{--grid-template-column:repeat(7,minmax(0,1fr))}.grid.grid-cols-8{--grid-template-column:repeat(8,minmax(0,1fr))}.grid.grid-cols-9{--grid-template-column:repeat(9,minmax(0,1fr))}.grid.grid-cols-10{--grid-template-column:repeat(10,minmax(0,1fr))}.grid.grid-cols-11{--grid-template-column:repeat(11,minmax(0,1fr))}.grid.grid-cols-12{--grid-template-column:repeat(12,minmax(0,1fr))}.grid.grid-gap-0{--grid-gap:var(--gap-0)}.grid.grid-gap-1{--grid-gap:var(--gap-1)}.grid.grid-gap-2{--grid-gap:var(--gap-2)}.grid.grid-gap-3{--grid-gap:var(--gap-3)}.grid.grid-gap-4{--grid-gap:var(--gap-4)}.grid.grid-gap-5{--grid-gap:var(--gap-5)}.grid.grid-gap-6{--grid-gap:var(--gap-6)}.grid.grid-gap-7{--grid-gap:var(--gap-7)}.grid.grid-gap-8{--grid-gap:var(--gap-8)}.grid.grid-gap-9{--grid-gap:var(--gap-9)}.grid .grid-c-1{grid-column:span 1}.grid .grid-c-2{grid-column:span 2}.grid .grid-c-3{grid-column:span 3}.grid .grid-c-4{grid-column:span 4}.grid .grid-c-5{grid-column:span 5}.grid .grid-c-6{grid-column:span 6}.grid .grid-c-7{grid-column:span 7}.grid .grid-c-8{grid-column:span 8}.grid .grid-c-9{grid-column:span 9}.grid .grid-c-10{grid-column:span 10}.grid .grid-c-11{grid-column:span 11}.grid .grid-c-12{grid-column:span 12}.grid .grid-r-1{grid-row:span 1}.grid .grid-r-2{grid-row:span 2}.grid .grid-r-3{grid-row:span 3}.grid .grid-r-4{grid-row:span 4}.grid .grid-r-5{grid-row:span 5}.grid .grid-r-6{grid-row:span 6}.grid .grid-r-7{grid-row:span 7}.grid .grid-r-8{grid-row:span 8}.grid .grid-r-9{grid-row:span 9}.grid .grid-r-10{grid-row:span 10}.grid .grid-r-11{grid-row:span 11}.grid .grid-r-12{grid-row:span 12}.grid .grid-cs-1{grid-column-start:1}.grid .grid-cs-2{grid-column-start:2}.grid .grid-cs-3{grid-column-start:3}.grid .grid-cs-4{grid-column-start:4}.grid .grid-cs-5{grid-column-start:5}.grid .grid-cs-6{grid-column-start:6}.grid .grid-cs-7{grid-column-start:7}.grid .grid-cs-8{grid-column-start:8}.grid .grid-cs-9{grid-column-start:9}.grid .grid-cs-10{grid-column-start:10}.grid .grid-cs-11{grid-column-start:11}.grid .grid-cs-12{grid-column-start:12}.grid .grid-cs-end{grid-column-end:-1}.grid .grid-ce-1{grid-column-end:2}.grid .grid-ce-2{grid-column-end:3}.grid .grid-ce-3{grid-column-end:4}.grid .grid-ce-4{grid-column-end:5}.grid .grid-ce-5{grid-column-end:6}.grid .grid-ce-6{grid-column-end:7}.grid .grid-ce-7{grid-column-end:8}.grid .grid-ce-8{grid-column-end:9}.grid .grid-ce-9{grid-column-end:10}.grid .grid-ce-10{grid-column-end:11}.grid .grid-ce-11{grid-column-end:12}.grid .grid-ce-12{grid-column-end:13}.grid .grid-rs-1{grid-row-start:1}.grid .grid-rs-2{grid-row-start:2}.grid .grid-rs-3{grid-row-start:3}.grid .grid-rs-4{grid-row-start:4}.grid .grid-rs-5{grid-row-start:5}.grid .grid-rs-6{grid-row-start:6}.grid .grid-rs-7{grid-row-start:7}.grid .grid-rs-8{grid-row-start:8}.grid .grid-rs-9{grid-row-start:9}.grid .grid-rs-10{grid-row-start:10}.grid .grid-rs-11{grid-row-start:11}.grid .grid-rs-12{grid-row-start:12}.grid .grid-rs-end{grid-row-end:-1}.grid .grid-re-1{grid-row-end:2}.grid .grid-re-2{grid-row-end:3}.grid .grid-re-3{grid-row-end:4}.grid .grid-re-4{grid-row-end:5}.grid .grid-re-5{grid-row-end:6}.grid .grid-re-6{grid-row-end:7}.grid .grid-re-7{grid-row-end:8}.grid .grid-re-8{grid-row-end:9}.grid .grid-re-9{grid-row-end:10}.grid .grid-re-10{grid-row-end:11}.grid .grid-re-11{grid-row-end:12}.grid .grid-re-12{grid-row-end:13}@media screen and (max-width:768px){.grid{--grid-template-column:repeat(1,minmax(0,1fr))}}.u,.utb{display:inline;position:relative}.u::after{content:"";transition:all .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;height:.1rem;width:0;background:var(--cirrus-link-dark);bottom:-0.25em}.u:hover::after{width:100%}.u-LR::after{left:0}.u-RL::after{right:0}.u-RL:hover::after{width:100%}.u-C::after{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.utb::before,.utb::after{content:"";transition:all .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;height:.1rem;width:0;background:var(--cirrus-link-dark)}.utb::before{top:-0.25em}.utb::after{bottom:-0.25em}.utb:hover::before,.utb:hover::after{width:100%}.utb-LR::before,.utb-LR::after{left:0}.utb-RL::before,.utb-RL::after{right:0}.utb-C::before,.utb-C::after{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.utb-OLR::before{left:0}.utb-OLR::after{right:0}.utb-ORL::before{right:0}.utb-ORL::after{left:0}.usquare{margin-left:.4rem;position:relative;overflow:hidden}.usquare a{position:static;padding:.2rem .4rem}.usquare::before,.usquare::after{content:"";transition:.25s all ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;width:2px;width:.1 rem;height:0;background:var(--cirrus-link-dark)}.usquare::before{left:0;bottom:-0.2rem}.usquare.delay::before{transition-delay:.6s}.usquare::after{right:0;top:-0.2rem}.usquare.delay::after{transition-delay:var(--animation-duration)}.usquare a::before{left:0;transition:.25s all ease}.usquare a::after{right:0;transition:.25s all ease}.usquare.delay a::after{transition:.25s all ease .4s}.usquare:hover::before,.usquare:hover::after{height:calc(100%+0.4rem)}.usquare:hover a::before,.usquare:hover a::after{width:100%}.modal{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;padding:1rem;display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.modal:target,.modal.shown{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;z-index:999;pointer-events:auto}.modal:target .modal-overlay,.modal.shown .modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:block;background-color:rgba(54,59,68,0.5)}.modal-content{background-color:var(--cirrus-bg);padding:0;display:block;border-radius:3px;box-shadow:0 .4rem 1rem rgba(54,59,68,0.3);z-index:1;color:var(--cirrus-fg);max-width:40rem}.modal.modal-small .modal-content{max-width:20rem}.modal.modal-large .modal-content{max-width:60rem}.modal-content h1,.modal-content h2,.modal-content h3,.modal-content h4,.modal-content h5,.modal-content h6{color:var(--cirrus-fg)}.modal:target .modal-container,.modal.shown .modal-container{-webkit-animation:slide-down var(--animation-duration) ease 1;animation:slide-down var(--animation-duration) ease 1;z-index:1}.modal-content.small{max-width:32rem}.modal-content .modal-header{padding:1rem 3rem}.modal-content .modal-header .modal-title{font-weight:bolder;font-size:1.4rem}.modal-content .modal-body{padding:1rem 3rem;overflow-y:auto;max-height:50vh;position:relative}.modal-content .modal-footer{padding:1rem 3rem;text-align:right}.modal.modal-animated--dropdown{-webkit-animation:slide-down var(--animation-duration) ease 1;animation:slide-down var(--animation-duration) ease 1}.modal.modal-animated--zoom-in,.modal.modal-animated--zoom-out{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:0;transition:300ms all ease}.modal:target.modal-animated--zoom-in,.modal:target.modal-animated--zoom-out{opacity:1;transition:300ms all ease}.modal.modal-animated--zoom-in .modal-content{transform:scale(0.8);transition:300ms all ease}.modal:target.modal-animated--zoom-in .modal-content,.modal:target.modal-animated--zoom-out .modal-content{transform:scale(1);transition:300ms all ease}.modal.modal-animated--zoom-out .modal-content{transform:scale(1.2);transition:300ms all ease}@-webkit-keyframes slide-down{0{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-down{0{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@media only screen and (max-width:768px){.modal-content{max-width:90%}}.btn.btn--pilled,[class^="btn-"].btn--pilled,[class*=" btn-"].btn--pilled{border-radius:6.25rem;padding-left:1.25rem;padding-right:1.25rem}.btn.btn--circle,[class^="btn-"].btn--circle,[class*=" btn-"].btn--circle{border-radius:100%;height:3.125rem;line-height:3.125rem;padding:0;width:3.125rem}.input-control--pilled{border-radius:6.25rem !important}.bg-primary{background-color:var(--cirrus-primary) !important}.bg-success{background-color:var(--cirrus-success) !important}.bg-warning{background-color:var(--cirrus-warning) !important}.bg-danger{background-color:var(--cirrus-danger) !important}.bg-light{background-color:var(--cirrus-light) !important}.bg-dark{background-color:var(--cirrus-dark) !important}.bg-link{background-color:var(--cirrus-link) !important}.bg-link-dark{background-color:var(--cirrus-link-dark) !important}.bg-info{background-color:var(--cirrus-info) !important}.text-primary{color:var(--cirrus-primary) !important}.text-success{color:var(--cirrus-success) !important}.text-warning{color:var(--cirrus-warning) !important}.text-danger{color:var(--cirrus-danger) !important}.text-light{color:var(--cirrus-light) !important}.text-dark{color:var(--cirrus-dark) !important}.text-link{color:var(--cirrus-link) !important}.text-link-dark{color:var(--cirrus-link-dark) !important}.text-info{color:var(--cirrus-info) !important}.pagination{display:flex;display:-ms-flexbox}.pagination-item{-webkit-flex:1 0 50%;-ms-flex:1 0 50%;flex:1 0 50%}.pagination a{color:#5d6c7b}.pagination .pagination-item a[disabled]{cursor:pointer;opacity:.5;pointer-events:none;user-select:none}.pagination .pagination-item{margin:1rem .1rem;transition:all .3s}.pagination .pagination-item.pagination-next{text-align:right}.pagination .pagination-item.pagination-prev{text-align:left}.pagination-item-subtitle{opacity:.7;margin:0}.pagination .pagination-item.short.selected{background-color:var(--cirrus-primary);color:#fff}.pagination .pagination-item.short.selected a{color:#fff}.pagination .pagination-item.short a{display:inline-block;line-height:1.25;padding:.5rem .75rem}.pagination .pagination-item.short{border-radius:.1rem;margin:.2rem 0;-webkit-flex:0;-ms-flex:0;flex:0}.pagination .pagination-item.short:first-child a{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.pagination .pagination-item.short:last-child a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pagination .pagination-item.short:not(.selected):hover{background-color:rgba(0,0,0,0.1)}.pagnation .pagination-item.ellipses{color:#b5b5b5;pointer-events:none}.pagination.pagination-bordered .pagination-item.short a{border:1px solid #dedede;border-radius:0;margin-left:-1px}.pagination .pagination-item:hover p,.pagination .pagination-item:hover h1,.pagination .pagination-item:hover h2,.pagination .pagination-item:hover h3,.pagination .pagination-item:hover h4,.pagination .pagination-item:hover h5,.pagination .pagination-item:hover h6,.pagination .pagination-item:not(.selected):hover *:not([disabled]):not(.ellipses){transition:all .3s;color:var(--cirrus-primary)}.placeholder{background-color:rgba(231,234,241,0.5);border-radius:3px;text-align:center;padding:3rem 2rem;color:#6c7892;display:block}.placeholder-icon{text-align:center}.placeholder .placeholder-title,.placeholder .placeholder-subtitle{margin:1rem auto}.placeholder .placeholder-subtitle{opacity:.7;margin:0}.placeholder .placeholder-commands{margin-top:1rem}.tab-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;overflow-x:auto;user-select:none;white-space:nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;font-size:var(--font-size-s)}.tab-container ul{display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:.5rem;border-bottom:1px solid #eee;flex-grow:1;list-style:none;padding-inline-start:0}.tab-container li{display:block;cursor:pointer;margin:0;text-align:center}.tab-container li a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid #eee;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.5rem 1rem;transition:all .3s;color:var(--cirrus-fg);border-bottom-color:rgba(197,197,197,0.63);border-width:2px;margin-bottom:-1px;background-color:var(--cirrus-bg)}.tab-container li:hover a{border-bottom-color:rgba(240,61,77,0.6);transition:all .3s}.tab-container li.selected a{border-bottom-color:var(--cirrus-primary);color:var(--cirrus-primary);border-width:2px;transition:all .3s}.tab-container.tabs-center ul{justify-content:center;-webkit-box-pack:center;-ms-flex-pack:center}.tab-container.tabs-right ul{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.tab-container.tabs-depth ul{box-shadow:0 2px 3px rgba(10,10,10,0.1);border-bottom:0}.tab-container.tabs-classic ul{border-bottom-color:#dbdbdb;border-bottom-style:solid;border-bottom-width:1px;border-radius:3px 3px 0 0;transition:all .3s}.tab-container.tabs-classic li:not(.selected) a:hover{background-color:#f0f0f0;transition:all .3s}.tab-container.tabs-classic li a{border:1px solid transparent;border-bottom-color:#dbdbdb;border-radius:3px 3px 0 0;transition:all .3s}.tab-container.tabs-classic li.selected a{color:var(--cirrus-primary);border-color:#dbdbdb;border-bottom-color:transparent !important}.tab-container.tabs-fill li{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;flex-basis:0}.tab-container.tabs-fill ul{display:flex}.tab-container.tabs-xsmall{font-size:.6rem}.tab-container.tabs-small{font-size:.75rem}.tab-container.tabs-large{font-size:1.25rem}.tab-container.tabs-xlarge{font-size:1.5rem}.tab-container .icon:first-child{margin-right:.75rem}.tab-container .icon:last-child{margin-left:.75rem}.tag{align-items:center;background-color:var(--cirrus-light);border-radius:.25rem;color:var(--cirrus-fg);display:inline-flex;font-size:75%;line-height:1.5;min-height:1.5rem;padding:0 .5rem;white-space:nowrap}.tag.tag--large{font-size:100%}.tag.tag--xlarge{font-size:150%}.tag.tag--rounded{border-radius:290486px}.tag.tag--delete{background-color:rgba(10,10,10,0.2);border-radius:290486px;cursor:pointer;pointer-events:auto;display:inline-block;height:20px;max-height:20px;max-width:20px;min-height:20px;min-width:20px;position:relative}.tag--delete:hover{background-color:rgba(10,10,10,0.3)}.tag.tag--delete::before,.tag.tag--delete::after{background-color:var(--cirrus-light);content:"";display:block;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}.tag.tag--delete::before{height:1px;width:50%}.tag.tag--delete::after{height:50%;width:1px}.tag.tag--delete{margin-left:.25rem;margin-right:-0.375rem}.tag.tag--white{background-color:#fff;color:var(--cirrus-dark)}.tag.tag--black{background-color:#000;color:#fff}.tag.tag--dark{background-color:var(--cirrus-dark);color:#fff}.tag.tag--primary{background-color:var(--cirrus-primary);color:#fff}.tag.tag--link{background-color:var(--cirrus-link);color:#fff}.tag.tag--info{background-color:var(--cirrus-info);color:#fff}.tag.tag--success{background-color:var(--cirrus-success);color:#fff}.tag.tag--warning{background-color:var(--cirrus-warning);color:var(--cirrus-fg)}.tag.tag--danger{background-color:var(--cirrus-danger);color:#fff}.tag-container{display:flex;flex-wrap:wrap}.tag-container:not(:last-child){margin-bottom:1rem}.tag-container .tag{margin-bottom:.5rem}.tag-container .tag:not(:last-child){margin-right:.5rem}.tag-container.group-tags .tag{margin-right:0}.tag-container.group-tags .tag:first-child{border-radius:.25rem 0 0 .25rem}.tag-container.group-tags .tag:not(:first-child):not(:last-child){border-radius:0}.tag-container.group-tags .tag:last-child{border-radius:0 .25rem .25rem 0}.tag.tag__close-btn{padding:0;position:relative;width:1.5rem}.tag.tag__close-btn::before,.tag.tag__close-btn::after{background-color:var(--cirrus-fg);content:"";display:block;left:50%;top:50%;position:absolute;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}.tag.tag__close-btn::before{height:1px;width:50%}.tag.tag__close-btn::after{height:50%;width:1px}a.tag:hover{text-decoration:underline}.tag-container.tag-container--grouped .tag:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tag-container.tag-container--grouped .tag:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tag-container.tag-container--centered{justify-content:center}.tag-container.tag-container--centered .tag{margin:0 .25rem}.tag-container.tag-container--right{justify-content:flex-end}.tag-container.tag-container--right .tag:not(:first-child){margin-left:.5rem}.tag-container.tag-container--right .tag:not(:last-child){margin-right:0}.tile{display:flex;display:-ms-flexbox;align-content:space-between;-webkit-align-content:space-between;-ms-flex-line-pack:justify}.tile p{font-size:.95rem}.tile .tile__icon,.tile .tile__buttons{flex:0 0 auto;-webkit-flex:0 0 auto;-ms-flex:0 0 auto}.tile .tile__buttons button,.tile .tile__buttons .btn,.tile .tile__buttons [type="submit"]{display:inline-block;margin:.1rem}.tile .tile__container{flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto}.tile .tile__container:not(:first-child){padding-left:1rem}.tile .tile__container:not(:last-child){padding-right:1rem}.tile .tile__title{line-height:2rem;font-weight:bolder;margin:.1rem auto}.tile .tile__subtitle{line-height:1.25rem;opacity:.7;margin:.1rem auto}.tile.tile--center{align-items:center;-webkit-align-items:center;-ms-flex-align:center}.tile.tile--center .tile__container{overflow:hidden}.tile.tile--center .tile__title,.tile.tile--center .tile__subtitle.no-wrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:0}.toast{display:block;width:100%;padding:.75rem 1.25rem;background-color:var(--toast-primary-bg);border:1px solid var(--toast-primary-bg);border-radius:2px;color:#fff;position:relative;margin:.5rem}.toast .toast__title{margin:0;margin-top:1rem}.toast p{margin:0}.toast.toast--translucent{opacity:.5}.toast.toast--translucent:hover{opacity:1}.toast .btn-close{position:absolute;right:1rem;top:1rem}.toast.toast--primary{background-color:var(--toast-primary-bg);border-color:var(--toast-primary-bg)}.toast.toast--success{background-color:var(--cirrus-success);border-color:var(--cirrus-success)}.toast.toast--warning{background-color:var(--cirrus-warning);border-color:var(--cirrus-warning)}.toast.toast--error{background-color:var(--cirrus-danger);border-color:var(--cirrus-danger)}.toast.toast--info{background-color:var(--cirrus-info);border-color:var(--cirrus-info)}.toast.toast--link{background-color:var(--cirrus-link);border-color:var(--cirrus-link)}.toast.toast--primary{background-color:var(--cirrus-primary);border-color:var(--cirrus-primary)}.toast a{color:var(--cirrus-light);transition:all .3s}.toast a:hover{opacity:.8;transition:all .3s}.tooltip{position:relative;overflow:visible;white-space:nowrap}.tooltip::after,.tooltip.tooltip--top::after{-webkit-appearance:none;-moz-appearance:none;position:absolute;color:#fff;font-size:.6rem;background-color:rgba(69,77,93,0.9);content:attr(data-tooltip);display:block;line-height:1rem;text-transform:none;overflow:hidden;padding:.4rem .8rem;opacity:0;text-overflow:ellipsis;max-width:15rem;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);transition:all var(--animation-duration) ease;z-index:200;pointer-events:none;bottom:100%;left:50%;border-radius:.2rem}.tooltip:focus::after,.tooltip:hover::after{opacity:1;-webkit-transform:translate(-50%,-0.5rem);transform:translate(-50%,-0.5rem);transition:all var(--animation-duration) ease}.tooltip.tooltip--top-left::after{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.tooltip.tooltip--top-left:hover::after,.tooltip.tooltip--top-left:focus::after{left:0;-webkit-transform:translate(-100%,-0.5rem);transform:translate(-100%,-0.5rem)}.tooltip.tooltip--top-right::after{left:auto;-webkit-transform:translate(15%,0);transform:translate(15%,0)}.tooltip.tooltip--top-right:hover::after,.tooltip.tooltip--top-right:focus::after{right:0;-webkit-transform:translate(100%,-0.5rem);transform:translate(100%,-0.5rem)}.tooltip.tooltip--bottom::after{top:100%;transform:translate(-50%,-1rem);-webkit-transform:translate(-50%,-1rem);-moz-transform:translate(-50%,-1rem);-ms-transform:translate(-50%,-1rem);bottom:auto}.tooltip.tooltip--bottom:hover::after,.tooltip.tooltip--bottom:focus::after{transform:translate(-50%,0.5rem);-webkit-transform:translate(-50%,0.5rem);-moz-transform:translate(-50%,0.5rem);-ms-transform:translate(-50%,0.5rem);bottom:auto}.tooltip.tooltip--bottom-left::after{top:100%;-webkit-transform:translate(-65%,-1rem);transform:translate(-65%,-1rem);bottom:auto}.tooltip.tooltip--bottom-left:hover::after,.tooltip.tooltip--bottom-left:focus::after{left:0;-webkit-transform:translate(-100%,0.5rem);transform:translate(-100%,0.5rem)}.tooltip.tooltip--bottom-right::after{left:auto;top:100%;-webkit-transform:translate(0,-1rem);transform:translate(0,-1rem);bottom:auto}.tooltip.tooltip--bottom-right:hover::after,.tooltip.tooltip--bottom-right:focus::after{right:0;-webkit-transform:translate(100%,0.5rem);transform:translate(100%,0.5rem)}.tooltip.tooltip--right::after{left:100%;bottom:50%;transform:translate(-1rem,50%);-webkit-transform:translate(-1rem,50%);-moz-transform:translate(-1rem,50%);-ms-transform:translate(-1rem,50%)}.tooltip.tooltip--right:hover::after,.tooltip.tooltip--right:focus::after{transform:translate(0.5rem,50%);-webkit-transform:translate(0.5rem,50%);-moz-transform:translate(0.5rem,50%);-ms-transform:translate(0.5rem,50%)}.tooltip.tooltip--left::after{right:100%;bottom:50%;left:auto;transform:translate(1rem,50%);-webkit-transform:translate(1rem,50%);-moz-transform:translate(1rem,50%);-ms-transform:translate(1rem,50%)}.tooltip.tooltip--left:hover::after,.tooltip.tooltip--left:focus::after{transform:translate(-0.5rem,50%);-webkit-transform:translate(-0.5rem,50%);-moz-transform:translate(-0.5rem,50%);-ms-transform:translate(-0.5rem,50%)}button,.btn,[type='submit']{line-height:2rem;overflow:hidden;padding:.5rem 1.5rem;border:1px solid transparent;border-radius:.25rem;cursor:pointer;text-align:center;transition:all 0var --animation-duration;background-color:var(--btn-color);border-color:var(--btn-border-color);color:var(--btn-fg);font-size:.75rem;letter-spacing:.03rem;text-transform:uppercase;font-family:Montserrat;min-width:2rem;user-select:none;margin-bottom:1rem;outline:0;--btn-color:#fefefe;--btn-fg:#737373;--btn-border-color:#d9d9d9}button:hover,.btn:hover,[type='submit']:hover{transition:all var(--animation-duration)}.btn:active,button:active,[type='submit']:active{transition:var(--animation-duration) ease}button:hover,.btn:hover,[type='submit']:hover{background-color:#eee;--btn-color:#eee}.btn.loading:active::after,button.loading:active::after,[type='submit'].loading:active::after{transition:var(--animation-duration) ease;border-radius:50%;border-right-color:transparent;border-top-color:transparent}button.btn-animated,[type='submit'].btn-animated,.btn.btn-animated{transition:calc(var(--animation-duration) / 2) ease}button.btn-animated:active,[type='submit'].btn-animated:active,.btn.btn-animated:active{-webkit-transform:scale(0.98);transform:inherit,scale(0.98);transition:calc(var(--animation-duration) / 2) ease}.btn:focus,button:focus,input[type='submit']:focus{outline:0}.btn:disabled,button:disabled,[type='submit']:disabled{cursor:not-allowed;opacity:.5}button.btn-close{background-color:rgba(10,10,10,0.2);border:0;border-radius:290486px;cursor:pointer;display:inline-block;flex-grow:0;flex-shrink:0;font-size:0;height:20px;outline:0;position:relative;vertical-align:top;width:20px;padding:0;min-width:20px}button.btn-close:hover{background-color:rgba(10,10,10,0.3)}button.btn-close::before,button.btn-close::after{background-color:var(--cirrus-bg);content:'';display:block;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}button.btn-close::before{height:2px;width:50%}button.btn-close::after{height:50%;width:2px}.btn-container{margin:.5rem;overflow:visible}.btn-transparent{--btn-color:transparent;--btn-fg:var(--cirrus-dark);--btn-border-color:transparent}.btn-transparent.outline{--btn-color:var(--cirrus-dark)}.btn-transparent:hover{--btn-color:rgba(0,0,0,0.1)}.btn-transparent:focus{box-shadow:0 0 0 .2rem rgba(246,249,252,0.5)}.btn-light{--btn-color:var(--cirrus-light);--btn-fg:var(--cirrus-dark);--btn-border-color:var(--cirrus-light)}.btn-light:hover{--btn-color:var(--cirrus-light-hover)}.btn-light:focus{box-shadow:0 0 0 .2rem rgba(246,249,252,0.5)}.btn-dark{--btn-color:var(--cirrus-dark);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-dark)}.btn-dark:hover{--btn-color:var(--cirrus-dark-hover)}.btn-dark.outline:hover{--btn-color:var(--cirrus-dark)}.btn-dark:focus{box-shadow:0 0 0 .2rem rgba(54,54,54,0.5)}.btn-black{--btn-color:#000;--btn-fg:var(--cirrus-light);--btn-border-color:#000}.btn-black:hover{--btn-color:#000}.btn-black:focus{box-shadow:0 0 0 .2rem rgba(54,54,54,0.5)}.btn-primary{--btn-color:var(--cirrus-primary);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-accent-border)}.btn-primary:hover{--btn-color:var(--cirrus-accent-hover)}.btn-primary.outline:hover{--btn-color:var(--cirrus-primary)}.btn-primary:focus{box-shadow:0 0 0 .2rem rgba(240,61,76,0.5)}.btn-info{--btn-color:var(--cirrus-info);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-info)}.btn-info:hover{--btn-color:var(--cirrus-info-hover)}.btn-info.outline:hover{--btn-color:var(--cirrus-info)}.btn-info:focus{box-shadow:0 0 0 .2rem rgba(41,114,250,0.5)}.btn-link{--btn-color:var(--cirrus-link);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-link)}.btn-link.outline{--btn-fg:var(--cirrus-link);border:1px solid transparent}.btn-link:hover{--btn-color:var(--cirrus-link-dark)}.btn-link.outline:hover{--btn-color:var(--cirrus-link-hover);border:1px solid transparent;text-decoration:underline}.btn-link:focus{box-shadow:0 0 0 .2rem rgba(94,92,199,0.5)}.btn-success{--btn-color:var(--cirrus-success);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-success)}.btn-success:hover{--btn-color:var(--cirrus-success-hover)}.btn-success.outline:hover{--btn-color:var(--cirrus-success)}.btn-success:focus{box-shadow:0 0 0 .2rem rgba(13,210,89,0.5)}.btn-warning{--btn-color:var(--cirrus-warning);--btn-fg:var(--cirrus-dark);--btn-border-color:var(--cirrus-warning)}.btn-warning:hover{--btn-color:var(--cirrus-warning-hover)}.btn-warning.outline:hover{--btn-color:var(--cirrus-warning)}.btn-warning:focus{box-shadow:0 0 0 .2rem rgba(250,180,51,0.5)}.btn-danger{--btn-color:var(--cirrus-danger);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-danger)}.btn-danger:hover{--btn-color:var(--cirrus-danger-hover)}.btn-danger.outline:hover{--btn-color:var(--cirrus-danger)}.btn-danger:focus{box-shadow:0 0 0 .2rem rgba(251,65,68,0.5)}[class^='btn-'],[class*=' btn-']{background-color:var(--btn-color);border:1px solid var(--btn-border-color);color:var(--btn-fg);transition:all var(--animation-duration)}[class^='btn-']:hover,[class*=' btn-']:hover{background-color:var(--btn-color);border-color:var(--btn-border-color);transition:all var(--animation-duration)}[class^='btn-'].outline,[class*=' btn-'].outline{background-color:transparent;color:var(--btn-color)}[class^='btn-'].outline:hover,[class*=' btn-'].outline:hover{background-color:var(--btn-color);color:var(--btn-fg);transition:all var(--animation-duration)}.has-controls.input:not([class*='left action'])>button:last-child,.has-controls.input:not([class*='left action'])>.btn:last-child>.btn{border-radius:0 .28571429rem .28571429rem 0}.has-controls.input:not([class*='right action'])>button:last-child,.has-controls.input:not([class*='right action'])>.btn:last-child>.btn{border-radius:.28571429rem 0 0 .28571429rem}.btn-xsmall{padding:0 .5rem;font-size:50%}.btn-small{padding:.25rem 1rem;font-size:70%}.btn-large{padding:.75rem 2rem;font-size:90%}.btn-xlarge{padding:1rem 2.5rem;font-size:110%}.loading.btn-accent:after{border:2px solid #fff;border-right-color:transparent;border-top-color:transparent}button .fa-wrapper,.btn .fa-wrapper,[type='submit'] .fa-wrapper{vertical-align:baseline}button .fa-wrapper.pad-right,.btn .fa-wrapper.pad-right,[type='submit'] .fa-wrapper.pad-right{margin-right:.4rem}button .fa-wrapper.pad-left,.btn .fa-wrapper.pad-left,[type='submit'] .fa-wrapper.pad-left{margin-left:.4rem}button span:first-child,.btn span:first-child,[type='submit'] span:first-child{margin-right:.2rem}button span:last-child,.btn span:last-child,[type='submit'] span:last-child{margin-left:.2rem}.btn-group{display:-webkit-inline-box;display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex}.btn-group.btn-group-fill{display:-webkit-box;display:flex;display:-ms-flexbox}.btn-group .btn,.btn-group button,.btn-group [type='submit']{-ms-flex:1 0 auto;-webkit-box-flex:1;flex:1 0 auto;margin:0}.btn-group.btn-group-fill .btn,.btn-group.btn-group-fill button,.btn-group.btn-group-fill [type='submit']{-ms-flex:1 0;-webkit-box-flex:1;flex:1 0}.btn-group .btn:first-child:not(:last-child),.btn-group button:first-child:not(:last-child),.btn-group [type='submit']:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .btn:last-child:not(:first-child),.btn-group button:last-child:not(:first-child),.btn-group [type='submit']:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}.btn-group .btn:not(:first-child):not(:last-child),.btn-group button:not(:first-child):not(:last-child),.btn-group [type='submit']:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem}@media screen and (max-width:768px){.btn-group{display:flex;flex-direction:column}.btn-group .btn,.btn-group button,.btn-group [type='submit']{margin-bottom:-1px}.btn-group .btn:first-child:not(:last-child),.btn-group button:first-child:not(:last-child),.btn-group [type='submit']:first-child:not(:last-child){border-radius:.25rem .25rem 0 0}.btn-group .btn:not(:first-child):not(:last-child),.btn-group button:not(:first-child):not(:last-child),.btn-group [type='submit']:not(:first-child):not(:last-child){margin-left:0}.btn-group .btn:last-child:not(:first-child),.btn-group button:last-child:not(:first-child),.btn-group [type='submit']:last-child:not(:first-child){border-radius:0 0 .25rem .25rem;margin-left:0}}code{padding:.3rem;margin:.5em 0;overflow:auto;background-color:var(--cirrus-code-bg);color:var(--cirrus-code-fg);border-radius:3px}code.dark{background-color:var(--cirrus-dark);color:#fff}code:before{color:#acb3c2;content:attr(data-lang);font-size:.9rem;position:absolute;right:1rem;top:.7rem}pre>code{font-size:14px;display:block;padding:2rem 1.5rem 1rem;white-space:pre-wrap;word-wrap:break-word;font-family:Consolas,Monaco,"Andale Mono",monospace;text-align:left;line-height:1.5;-moz-tab-size:4;tab-size:4;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-left:.3rem solid var(--cirrus-primary);margin:0;position:relative;color:#222}@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");h1,h2,h3,h4,h5,h6{font-family:"Montserrat",sans-serif;font-weight:700;line-height:1.2}h1 .silent,h2 .silent,h3 .silent,h4 .silent,h5 .silent,h6 .silent{color:#788196}h1{font-size:3rem;letter-spacing:.025rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.75rem}h5{font-size:1.5rem}h6{font-size:1.25rem}.headline-1{font-size:6.5rem;letter-spacing:.05rem}.headline-2{font-size:5.5rem;letter-spacing:.05rem}.headline-3{font-size:4.5rem;letter-spacing:.05rem}.headline-4{font-size:3.5rem;letter-spacing:.025rem}strong{font-weight:700}.font-alt{font-family:"Nunito Sans"}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{line-height:1.125em;margin:1rem 0}.title{font-weight:bolder}.title:not(:last-child),.subtitle:not(:last-child){margin-bottom:1rem}.title+.subtitle{margin-top:-0.75rem}p,article,blockquote{font-size:1rem;line-height:2;margin-bottom:1rem}p.lead{font-size:1.2rem}blockquote{margin-bottom:1rem;font-size:1.25rem}blockquote{background-color:#f5f5f5;border-left:5px solid #dbdbdb;padding:1rem 2rem;border-radius:3px}blockquote p{margin:0;font-size:.95rem}.card-tile p,.card-tile article,.card-tile blockquote{line-height:inherit}cite{opacity:.7}mark,.mark{padding:.2em;background-color:#f0e8c4}.font-thin{font-weight:200}.font-light{font-weight:300}.font-normal{font-weight:400}.font-semibold{font-weight:600}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.rtl{direction:rtl}.white{color:#fff !important}.faded{opacity:.75}.font-italic{font-style:italic}.icon{display:inline-block;text-align:center;width:1.5rem;vertical-align:baseline}.icon .fa-wrapper{font-size:inherit;vertical-align:middle}.icon.x-small{margin:.55rem 0 0 .1rem}.icon.small{margin:.95rem 0 0 .1rem}.info{display:block;font-size:var(--font-size-s);margin-top:.25rem;color:#979797}.info.inline{display:inline-block;margin-left:.5rem}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}abbr[title]{border-bottom:.1rem dotted;cursor:help;text-decoration:none}kbd{background-color:var(--cirrus-fg);border-radius:.2rem;color:#fff;display:inline-block;line-height:1;padding:.5rem;vertical-align:baseline}@media(max-width:650px){h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}.headline-1{font-size:3rem;letter-spacing:.05rem}.headline-2{font-size:2.75rem;letter-spacing:.05rem}.headline-3{font-size:2.5rem;letter-spacing:.05rem}.headline-4{font-size:2.25rem;letter-spacing:.025rem}p,article,blockquote{margin:1rem 0}}footer{width:100%;padding:6rem 0;background-color:#111;text-align:center;margin-top:5rem}footer a{font-weight:bolder;color:#fff}footer p{color:#848484}footer ul{margin:.5rem 0}footer h6{text-align:center;letter-spacing:6px;position:relative;padding-bottom:10px}footer .footer-list-title{font-size:75%;text-transform:uppercase;font-weight:bolder;color:#ddd}footer .footer-list-title::after{content:"";display:block;width:10%;margin:auto;border-bottom:2px solid;border-color:#343b49}footer ul a .list-item,footer .list-item{margin:.1rem;color:#888;transition:all .3s;font-size:75%;text-transform:uppercase}footer.footer-fixed{bottom:0;position:fixed}input:not([type=checkbox]):not([type=radio]):not([type=submit]),select{width:100%;border:1px solid #ddd;border-radius:3px;color:#5a5a5a;font-family:"Nunito Sans";font-size:var(--font-size-m);letter-spacing:.02rem;transition:all .3s;outline:0;padding:.85rem 1.1rem}input[type="search"]{-webkit-appearance:none}textarea,textarea[type="text"]{width:100%;border:1px solid #ddd;padding:.8rem;border-radius:3px;font-family:"Nunito Sans";font-size:var(--font-size-m);letter-spacing:.02rem;transition:all .3s;outline:0;margin:.5rem 0;padding:1rem 1.3rem;min-height:8rem;line-height:1.5rem;resize:vertical}input[type="color"]{box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);box-sizing:border-box;transition:.3s;outline:0;position:relative;height:3rem;background-color:#fff;padding:.55rem .8rem !important}input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,select:focus,textarea:focus,textarea[type=text]:focus,input[type=text].input-focused,.input-focused{border-color:#3dabf0;box-shadow:0 0 0 .2rem rgba(61,171,240,var(--focus-opacity)),inset 0 1px 8px rgba(0,0,0,0.07)}select{background-color:#fff;border:1px solid #ddd}select[multiple] option{padding:.2rem .4rem}select.select:not([size]):not([multiple]){background:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .85rem center/0.5rem .6rem no-repeat;-webkit-appearance:none}input[type="search"],input.search{background-repeat:no-repeat;background-position:left .6rem center;background-image:url('data:image/svg+xml;utf8,');padding-left:2rem !important}input:not([class*="btn-"]):disabled,input:not([class*=" btn-"]):disabled:hover,select:disabled,textarea:disabled{background-color:#f3f3f6;cursor:not-allowed;border:1px solid #f3f3f6}label:first-child:not(:last-child):not(.form-group-label){margin-right:.5rem}label:not(:first-child):not(:last-child):not(.form-group-label){margin:0 .5rem}label:last-child:not(:first-child):not(.form-group-label){margin-left:.5rem}.required{position:relative;top:1px;font-weight:bold;color:#f03c69;padding-left:.1rem}.label:not(:last-child){margin-bottom:0}.label{color:#4a4a4a;display:inline-block;font-weight:bold;margin-top:.8rem}.input-success{background-color:rgba(0,224,0,0.05) !important;border-color:var(--cirrus-success) !important}.input-success:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,.btn-success:focus{box-shadow:0 0 0 .2rem rgba(76,175,80,var(--focus-opacity)),inset 0 1px 8px rgba(0,0,0,0.07)}.input-error{background-color:rgba(244,67,54,0.05) !important;border-color:var(--cirrus-danger) !important}.input-error:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,.btn-error:focus{box-shadow:0 0 0 .2rem rgba(244,67,54,var(--focus-opacity)),inset 0 1px 8px rgba(0,0,0,0.07)}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-xsmall,select.input-xsmall{font-size:var(--font-size-xs);padding:.35rem .9rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-small,select.input-small{font-size:var(--font-size-s);padding:.55rem 1rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-large,select.input-large{font-size:var(--font-size-l)}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-xlarge,select.input-xlarge{font-size:var(--font-size-xl)}select.input-xsmall{padding:.65rem .9rem}select.input-small{padding:.75rem 1rem}select.input-large{padding:.95rem 1.2rem}select.input-xlarge{padding:1.05rem 1.3rem}.input-control{position:relative;margin:.5rem 0}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left{padding-left:2.75rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right{padding-right:2.75rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xsmall,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xsmall{padding-left:2rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xsmall ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-xsmall ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xsmall ~ .icon.icon-right{line-height:1.75rem;width:1.75rem;font-size:7px}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-small,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-small{padding-left:2.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-small ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-small ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-small ~ .icon.icon-right{line-height:2rem;width:2.5rem;font-size:14px}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-large,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-large{padding-left:3.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-large ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-large ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-large ~ .icon.icon-right{line-height:3.5rem;width:3.5rem;font-size:28px}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xlarge,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xlarge{padding-left:4rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xlarge ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-xlarge ~ .icon,input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xlarge ~ .icon.icon-right{line-height:2.5rem;width:3.75rem;font-size:35px}.input-contains-icon ~ .icon{display:flex;align-items:center;justify-content:center;height:100%}.input-contains-icon ~ .icon:not(.icon-right),.input-contains-icon-left ~ .icon.icon-left{position:absolute;left:0;top:0;width:3rem;z-index:1}.input-contains-icon-right ~ .icon.icon-right{position:absolute;pointer-events:none;line-height:2.75rem;vertical-align:baseline;top:0;right:0;width:3rem;z-index:1}.form-section:not(:last-child){margin-bottom:.5rem}.form-section.section-inline{display:flex}.form-section.section-inline label:not(.form-group-label),.form-section.section-inline button{align-items:center;flex-grow:0;display:flex;flex-shrink:0}.form-section.section-inline input,.form-section.section-inline .section-body{align-items:center;flex-grow:1}.form-group{display:flex;display:-ms-flexbox;margin:.5rem 0}.form-group .form-group-btn{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;margin-bottom:0}.form-group .form-group-label:first-child:not(:last-child),.form-group .form-group-input:first-child:not(:last-child),.form-group .form-group-btn:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.form-group .form-group-label:not(:first-child):not(:last-child),.form-group .form-group-input:not(:first-child):not(:last-child),.form-group .form-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem;margin-right:-0.1rem}.form-group .form-group-label:last-child:not(:first-child),.form-group .form-group-input:last-child:not(:first-child),.form-group .form-group-btn:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}.form-group-label{background-color:var(--cirrus-form-group-bg);border:1px solid #ddd;border-radius:.2rem;color:var(--cirrus-form-group-fg);margin:0;padding:.8rem;user-select:none}.form-group-label.label-xsmall{font-size:.55rem;padding:.5rem .9rem}.form-group-label.label-small{font-size:.75rem;padding:.55rem 1rem}.form-group-label.label-large{font-size:1.5rem}.form-group-label.label-xlarge{font-size:2rem}.form-group-input{z-index:1}::-moz-placeholder{color:#a9a9a9}::-webkit-input-placeholder{color:#a9a9a9}@media screen and (max-width:768px){.form-section.section-inline{display:inherit}}.frame{display:flex;display:-ms-flexbox;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;border-radius:3px;box-shadow:0 .2rem 1.25rem 0 rgba(27,30,36,0.07)}.frame .frame__header,.frame .frame__footer{flex:0 0 auto;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;padding:1rem}.frame .frame__nav{flex:0 0 auto;-webkit-flex:0 0 auto;-ms-flex:0 0 auto}.frame .frame__body{flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;overflow-y:auto;padding:0 1.5rem}.frame .frame__title{color:var(--cirrus-fg);font-size:var(--font-size-m);margin:.75rem auto 0}.frame .frame__subtitle{color:rgba(55,64,84,0.6);font-size:var(--font-size-s);margin:.25rem auto .75rem}.header{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;width:100%;z-index:100;margin-bottom:20px;box-shadow:0 3px 15px rgba(57,63,72,0.1);background-color:var(--cirrus-bg);max-height:100vh;padding:0 2rem;transition:all .3s}.header a{color:#8292a2}.header a:hover{color:#697888}.header-dark{background-color:rgba(0,0,0,0.87);color:#fff}.header-clear{background-color:transparent;box-shadow:none}.header.header-animated .header-nav{-webkit-transition:background .4s ease,height .4s ease;transition:background .4s ease,height .4s ease;-webkit-transition-property:background,height;transition-property:background,height;-webkit-transition-duration:.4s,0.4s;transition-duration:.4s,0.4s;-webkit-transition-timing-function:ease,ease;transition-timing-function:ease,ease;-webkit-transition-delay:initial,initial;transition-delay:initial,initial;-webkit-transition:all .3s;transition:all .3s}.header-brand{-webkit-overflow-scrolling:touch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;max-width:100vw;min-height:3.25rem;overflow-x:auto;overflow-y:hidden}.header-nav{overflow:auto}.nav-menu{-webkit-transition:all .3s;transition:all .3s}.nav-item.has-sub{position:relative}.nav-overflow-x{-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;overflow-x:scroll}.header-fixed{position:fixed;top:0}.nav-item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all .3s;transition:all .3s;padding:0 .3rem;cursor:pointer}.nav-item a{align-items:center;display:flex}.header:not(.header-clear) .nav-item:not(.no-hover):hover,.header:not(.header-clear) .nav-item:not(.no-hover).hovered{-webkit-transition:all .3s;transition:all .3s;background-color:rgba(216,216,216,0.15)}.header:not(.header-clear) .nav-item.active,.header:not(.header-clear) .nav-item.active:hover{background-color:rgba(216,216,216,0.35)}.nav-item .dropdown-menu{background-color:var(--cirrus-bg);position:absolute;top:95%;z-index:1000;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-clip:padding-box;border:1px solid #eee;border-radius:0 0 4px 4px;box-shadow:0 .5rem 1rem rgba(10,10,10,0.1)}.header.header-clear .nav-item .dropdown-menu{border-radius:4px}.nav-item .dropdown-menu.dropdown-animated{-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.nav-item.has-sub .nav-dropdown-link::after{border:2px solid var(--cirrus-primary);border-right:0;border-top:0;display:block;height:.5em;width:.5em;content:" ";-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none;margin-top:-0.435em;right:1.125em;top:50%;position:absolute}.nav-item.has-sub .nav-dropdown-link{padding-right:2.5rem;position:relative}.nav-item .dropdown-menu.dropdown-dark,.header-dark .dropdown-menu{background-color:rgba(0,0,0,0.87);border:1px solid #333;color:#fff}.dropdown-menu.dropdown-shown,.nav-item.active{opacity:1}.dropdown-menu>li>a{display:block;padding:.5rem 1rem;clear:both;line-height:1.42857143;white-space:nowrap}.header-dark .nav-item a,.header-dark .dropdown-menu>li>a{color:#fff}.dropdown-menu>li{margin:0;-webkit-transition:all .3s;transition:all .3s}.dropdown-menu>li:hover{-webkit-transition:all .3s;transition:all .3s;background-color:rgba(216,216,216,0.15)}.dropdown-menu>li:active{-webkit-transition:all .3s;transition:all .3s;background-color:rgba(216,216,216,0.25)}.dropdown-menu>li:last-child{margin-bottom:0}.dropdown-menu .dropdown-menu-divider{border:0;background-color:rgba(216,216,216,0.15);height:1px;margin:.5rem 0}.nav-btn{cursor:pointer;display:block;height:3.5rem;position:relative;width:3.5rem}.header .btn,.header button,.header input[type="submit"]{margin:0}@media screen and (min-width:769px){.header{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox}.header-nav{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;text-align:center;width:100%;top:0;overflow:visible}.nav-left,.nav-right{-webkit-box-align:stretch;-ms-flex-align:stretch;-ms-grid-row-align:stretch;align-items:stretch;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0}.nav-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;white-space:nowrap}.nav-right{display:-webkit-box;display:-ms-flexbox;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;white-space:nowrap}.nav-center{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-left:auto;margin-right:auto}.nav-btn{display:none}.nav-item a{padding:.5rem 1rem}.nav-item .dropdown-menu{opacity:0;pointer-events:none}.nav-item .dropdown-menu.dropdown-animated{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.nav-item .dropdown-menu.dropdown-shown,.nav-item.toggle-hover:hover .dropdown-menu,.nav-item .dropdown-menu.dropdown-animated.dropdown-shown,.nav-item.toggle-hover:hover .dropdown-animated.dropdown-menu{opacity:1;-webkit-transform:none;transform:none;pointer-events:auto}.nav-left .has-sub .dropdown-menu{left:0;right:auto}.nav-right .has-sub .dropdown-menu{left:auto;right:0}}@media screen and (max-width:768px){.header{display:flex;flex-direction:column}.header-brand .nav-item:first-child{padding:0 1rem}.header-nav{height:0}.header-nav.active{height:100vh}.nav-item.has-sub{display:block}.nav-item.has-sub .dropdown-menu.dropdown-shown{border-radius:0;box-shadow:none;display:block;position:relative;top:1rem;float:none;border:0;background-color:transparent;margin-bottom:1rem}.nav-item.has-sub .dropdown-menu.dropdown-dark{background-color:rgba(0,0,0,0.17);border:0;color:#fff}.nav-item.has-sub .dropdown-menu{display:none}.header-nav .nav-item{padding:1rem}.header-nav .nav-item>a{padding:0;width:100%}.nav-btn{cursor:pointer;display:block;position:relative;margin-left:auto}.nav-btn span{background-color:#4d565f;display:block;height:2px;left:50%;margin-left:-7px;position:absolute;top:50%;-webkit-transition:none 86ms ease-out;transition:none 86ms ease-out;-webkit-transition-property:background,left,opacity,-webkit-transform;transition-property:background,left,opacity,-webkit-transform;transition-property:background,left,opacity,transform;transition-property:background,left,opacity,transform,-webkit-transform;width:15px}.header-dark .nav-btn span{background-color:#fff}.nav-btn span:nth-child(1){margin-top:-6px}.nav-btn span:nth-child(2){margin-top:-1px}.nav-btn span:nth-child(3){margin-top:4px}.nav-btn.active span:nth-child(1){margin-left:-5px;transform:rotate(45deg);transform-origin:left top}.nav-btn.active span:nth-child(2){opacity:0}.nav-btn.active span:nth-child(3){margin-left:-5px;transform:rotate(-45deg);transform-origin:left bottom}.nav-left,.nav-center,.nav-right{overflow:hidden}}@media screen and (min-width:1023px){.header{padding:0 2rem}}.content{max-width:60em;margin:0 auto 1.5em;width:80%}.fullscreen{top:0;right:0;bottom:0;left:0;height:100vh}section{display:block}.panel{padding:2.5em 0}.divider{border-top:.05rem solid rgba(173,173,173,0.5);height:.1rem;margin:1.8rem 0 1.6rem}.divider[data-content]{margin:.8rem 0}.divider--v[data-content]{display:block;padding:.8rem}.divider--v::before{border-left:.05rem solid rgba(173,173,173,0.5);bottom:.4rem;content:'';display:block;left:50%;position:absolute;top:0;transform:translateX(-50%)}.divider--v[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);left:50%;display:inline-block;padding:0 .4rem;position:absolute;transform:translate(-50%,-50%);top:50%}.divider--v[data-content]{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.hero-img{background-size:cover}.parallax-img{background-attachment:fixed !important}.hero{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.hero-body{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;padding:3rem 1.5rem;align-items:center;display:-ms-flexbox;display:flex;width:100%}.space{display:block;width:100%;height:1rem}.space.large{padding:1rem 0}.space.x-large{padding:2rem 0}.row{-ms-flex:1;flex:1;flex-wrap:wrap;padding:.5rem 0}.r{max-width:100%;padding:.5rem}.row.row--no-wrap{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.row::after{content:'';clear:both;display:table}.row .col{display:block;flex:1;padding:.15rem .75rem}.row .col-1{width:8.33333333%}.row .col-2{width:16.66666667%}.row .col-3{width:25%}.row .col-4{width:33.33333333%}.row .col-5{width:41.66666667%}.row .col-6{width:50%}.row .col-7{width:58.33333333%}.row .col-8{width:66.66666667%}.row .col-9{width:75%}.row .col-10{width:83.33333333%}.row .col-11{width:91.66666667%}.row .col-12{width:100%}.row .offset-1{margin-left:8.33333333%}.row .offset-2{margin-left:16.66666667%}.row .offset-3{margin-left:25%}.row .offset-4{margin-left:33.33333333%}.row .offset-5{margin-left:41.66666667%}.row .offset-6{margin-left:50%}.row .offset-7{margin-left:58.33333333%}.row .offset-8{margin-left:66.66666667%}.row .offset-9{margin-left:75%}.row .offset-10{margin-left:83.33333333%}.row .offset-11{margin-left:91.66666667%}.row .offset-12{margin-left:100%}.row .offset-right{margin-left:0;margin-right:auto}.row .offset-center{margin-left:auto;margin-right:auto}.row .offset-left{margin-left:auto;margin-right:0}.row [class^='col-'],.row [class*=' col-']{float:left;padding:0 .5rem}.row.no-space [class^='col-'],.row.no-space [class*=' col-']{padding:0}.row.has-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.level{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.level-left{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-right:1rem}.level-right{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.level-item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.level-content{-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-align:left;width:100%}.w-10{width:10%}.w-20{width:20%}.w-30{width:30%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-auto{width:auto}.h-10{height:10%}.h-20{height:20%}.h-30{height:30%}.h-40{height:40%}.h-50{height:50%}.h-60{height:60%}.h-70{height:70%}.h-80{height:80%}.h-90{height:90%}.h-100{height:100%}.h-auto{height:auto}@media screen and (min-width:769px){.row{display:flex}.level-right{margin-left:1rem}.level.fill-height{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (max-width:768px){.container{width:100%}.row{margin-top:0}.row [class^='col-']:not(.ignore-screen),.row [class*=' col-']:not(.ignore-screen){width:100%;margin-left:0;padding:0}.divided>.row [class^='col-'],.divided>.row [class*=' col-']{box-shadow:0 -1px 0 0 rgba(34,36,38,0.15)}.level.ignore-screen,.level-left.ignore-screen,.level-right.ignore-screen{display:-webkit-box;display:-ms-flexbox;display:flex}.level.fill-height{display:inherit}.hero-body{padding:0}}a{color:var(--cirrus-link);font-weight:600;padding:2px;text-decoration:none;transition:all .3s}a:hover{color:var(--cirrus-link-dark);transition:all .3s}a:visited,a:hover,a:active{backface-visibility:hidden;text-decoration:none}.subtitle a{padding:0}a.underline{text-decoration:underline}p a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,blockquote a,article a{display:inline}a .btn,a button,[type='submit'] a{margin-bottom:0}ul,ol{margin:1rem 0 1rem 1rem;padding-inline-start:.5rem}ul{list-style:disc}ul ul,ol ul,ul ol,ol ol{margin:0 0 0 1rem}ul ul{list-style-type:circle}ul ul ul{list-style-type:square}ol ol{list-style:lower-alpha}ol ol ol{list-style:upper-roman}dl{margin:1rem 0}dt{font-weight:700}dd{margin-bottom:.5rem}li{margin:.25rem 0}li:not(.dropdown-menu>li):last-child{margin-bottom:1rem}ul.no-bullets{list-style:none}.menu{font-size:1rem}ul.menu{list-style:none;margin:.5rem 0}.menu-title:not(:first-child){margin-bottom:1rem}.menu-title:not(:last-child){margin-top:1rem}.menu .menu-item a{color:#555;display:block;padding:.5em .75em;border-radius:3px;font-size:var(--font-size-s);cursor:pointer;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item:hover>a{background-color:rgba(208,208,208,0.3);color:#d43644;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item.selected>a{color:#fff;background-color:var(--cirrus-primary)}.menu .menu-item .menu-addon{padding:.3rem;z-index:1;position:relative;color:var(--cirrus-fg);cursor:pointer;float:left;margin-right:.1rem;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item .menu-addon .icon{font-size:inherit}.menu .menu-item .menu-addon:hover{background-color:rgba(60,60,60,0.25);-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item .menu-addon.right{float:right;margin-right:0;margin-left:.1rem}.menu .menu-item.selected .menu-addon{color:#fff}.menu .menu-item ul{border-left:1px solid #dbdbdb;margin:.75rem;padding-left:.75rem}.menu .divider{border-top:.1rem solid #eee;height:.1rem;margin:1rem 0}.menu .divider::after{content:attr(data-label);background-color:var(--cirrus-bg);color:#b7b7b7;display:inline-block;padding:0 .7rem;margin:.5rem;font-size:.7rem;-webkit-transform:translateY(-1.1rem);transform:translateY(-1.1rem)}.list-dropdown{display:inline-block;position:relative}.list-dropdown .menu{position:absolute;top:75%;left:0;-webkit-animation:slide-down var(--animation-duration) ease 1;animation:slide-down .1s ease 1;background-color:var(--cirrus-bg);border-radius:.2rem;box-shadow:0 .1rem .4rem rgba(69,77,93,0.3);margin:0;opacity:0;min-width:15rem;padding:.25rem .5rem;-webkit-transform:translateY(0.5rem);transform:translateY(0.5rem);z-index:10;pointer-events:none;overflow:hidden;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.list-dropdown.dropdown-right .menu{left:auto;right:0}.list-dropdown.shown .menu,.list-dropdown .btn-dropdown:focus+.menu,.list-dropdown .menu:hover{display:block;opacity:1;top:100%;z-index:100;pointer-events:auto;height:auto;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.list-dropdown .btn-group .btn-dropdown:nth-last-child(2){border-bottom-right-radius:3px;border-top-right-radius:3px}.tree{margin:0}.tree .tree-item .tree-item-header{display:block;padding:.25rem .5rem;cursor:pointer;font-size:.95rem;font-weight:600}.tree .tree-item .tree-item-header .icon{-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.tree .tree-item input:checked ~ .tree-item-body{max-height:100vh}.tree .tree-item input:checked ~ .tree-item-header .icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tree .tree-item .tree-item-body{max-height:0;margin-left:1.5rem;overflow:hidden;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.tree-nav-body{display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.tree-nav{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;padding:2rem 1rem 2rem 2rem;min-width:15rem;height:100vh;overflow:auto}.tree-nav .tree-nav-container{overflow-y:auto;top:4rem;bottom:1rem}.tree-nav+.tree-nav-close{display:none}.tree-nav+.tree-nav-content{max-width:100%;padding:2rem;-ms-flex:1 0 auto;-webkit-box-flex:1;flex:1 0 auto;overflow:auto;margin:0}.tree-nav-content{width:100%;overflow:auto;margin:0;padding:2rem}.tree-item-body .menu .menu-item a{font-weight:400}@media screen and (max-width:768px){.tree-nav{height:100%;left:0;overflow-y:auto;padding:3rem 1.5rem;position:fixed;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:transform var(--animation-duration) ease,-webkit-transform var(--animation-duration) ease;-webkit-transition:-webkit-transform var(--animation-duration) ease;transition:transform var(--animation-duration) ease;transition:-webkit-transform var(--animation-duration) ease;z-index:400}.tree-nav:target{-webkit-transform:translateX(0);transform:translateX(0);transition:transform var(--animation-duration) ease,-webkit-transform var(--animation-duration) ease;-webkit-transition:-webkit-transform var(--animation-duration) ease;transition:-webkit-transform var(--animation-duration) ease;transition:transform var(--animation-duration) ease}.tree-nav .tree-nav-close{background-color:rgba(0,0,0,0.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}.tree-nav:target+.tree-nav-close{display:block;background-color:rgba(0,0,0,0.15);height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}.tree-nav+.tree-nav-body{max-width:inherit}.tree-nav-header{position:fixed;top:0;left:0;right:0;background-color:rgba(248,249,250,0.8);height:3.5rem;padding:.75rem .5rem;text-align:center;z-index:300}.nav-item.has-sub .list-dropdown{width:100%}.nav-item.has-sub .list-dropdown .btn-group{width:100%}.nav-item.has-sub .list-dropdown .btn-group .btn-dropdown{flex-grow:0}.list-dropdown .btn-dropdown:focus+.menu{position:relative;width:100%}}video.video-fullscreen{position:absolute;height:100vh;object-fit:cover;width:100%;z-index:-1}.media-stretch{display:block;padding:0;overflow:hidden;width:100%;position:relative}.media-stretch::before{content:"";display:block;padding-bottom:56.25%}.media-stretch iframe,.media-stretch embed,.media-stretch object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.media-stretch video{height:auto;max-width:100%;width:100%}.media-stretch.rat-4-3::before{padding-bottom:75%}.media-stretch.rat-1-1::before{padding-bottom:100%}.fig{margin:0 0 .5rem 0}.fig .fig-caption{margin-top:1rem}.img-stretch{max-width:100%;height:auto;display:block}.img-cover{object-fit:cover}.img-contain{object-fit:contain}.m-0{margin:0 !important}.m-1{margin:calc(var(--space-size) * 1) !important}.m-2{margin:calc(var(--space-size) * 2) !important}.m-3{margin:calc(var(--space-size) * 3) !important}.m-4{margin:calc(var(--space-size) * 4) !important}.m-5{margin:calc(var(--space-size) * 5) !important}.mt-0,.my-0{margin-top:0 !important}.mt-1,.my-1{margin-top:calc(var(--space-size) * 1) !important}.mt-2,.my-2{margin-top:calc(var(--space-size) * 2) !important}.mt-3,.my-3{margin-top:calc(var(--space-size) * 3) !important}.mt-4,.my-4{margin-top:calc(var(--space-size) * 4) !important}.mt-5,.my-5{margin-top:calc(var(--space-size) * 5) !important}.mb-0,.my-0{margin-bottom:0 !important}.mb-1,.my-1{margin-bottom:calc(var(--space-size) * 1) !important}.mb-2,.my-2{margin-bottom:calc(var(--space-size) * 2) !important}.mb-3,.my-3{margin-bottom:calc(var(--space-size) * 3) !important}.mb-4,.my-4{margin-bottom:calc(var(--space-size) * 4) !important}.mb-5,.my-5{margin-bottom:calc(var(--space-size) * 5) !important}.ml-0,.mx-0{margin-left:0 !important}.ml-1,.mx-1{margin-left:calc(var(--space-size) * 1) !important}.ml-2,.mx-2{margin-left:calc(var(--space-size) * 2) !important}.ml-3,.mx-3{margin-left:calc(var(--space-size) * 3) !important}.ml-4,.mx-4{margin-left:calc(var(--space-size) * 4) !important}.ml-5,.mx-5{margin-left:calc(var(--space-size) * 5) !important}.mr-0,.mx-0{margin-right:0 !important}.mr-1,.mx-1{margin-right:calc(var(--space-size) * 1) !important}.mr-2,.mx-2{margin-right:calc(var(--space-size) * 2) !important}.mr-3,.mx-3{margin-right:calc(var(--space-size) * 3) !important}.mr-4,.mx-4{margin-right:calc(var(--space-size) * 4) !important}.mr-5,.mx-5{margin-right:calc(var(--space-size) * 5) !important}.p-0{padding:0 !important}.p-1{padding:calc(var(--space-size) * 1) !important}.p-2{padding:calc(var(--space-size) * 2) !important}.p-3{padding:calc(var(--space-size) * 3) !important}.p-4{padding:calc(var(--space-size) * 4) !important}.p-5{padding:calc(var(--space-size) * 5) !important}.pt-0,.py-0{padding-top:0 !important}.pt-1,.py-1{padding-top:calc(var(--space-size) * 1) !important}.pt-2,.py-2{padding-top:calc(var(--space-size) * 2) !important}.pt-3,.py-3{padding-top:calc(var(--space-size) * 3) !important}.pt-4,.py-4{padding-top:calc(var(--space-size) * 4) !important}.pt-5,.py-5{padding-top:calc(var(--space-size) * 5) !important}.pb-0,.py-0{padding-bottom:0 !important}.pb-1,.py-1{padding-bottom:calc(var(--space-size) * 1) !important}.pb-2,.py-2{padding-bottom:calc(var(--space-size) * 2) !important}.pb-3,.py-3{padding-bottom:calc(var(--space-size) * 3) !important}.pb-4,.py-4{padding-bottom:calc(var(--space-size) * 4) !important}.pb-5,.py-5{padding-bottom:calc(var(--space-size) * 5) !important}.pl-0,.px-0{padding-left:0 !important}.pl-1,.px-1{padding-left:calc(var(--space-size) * 1) !important}.pl-2,.px-2{padding-left:calc(var(--space-size) * 2) !important}.pl-3,.px-3{padding-left:calc(var(--space-size) * 3) !important}.pl-4,.px-4{padding-left:calc(var(--space-size) * 4) !important}.pl-5,.px-5{padding-left:calc(var(--space-size) * 5) !important}.pr-0,.px-0{padding-right:0 !important}.pr-1,.px-1{padding-right:calc(var(--space-size) * 1) !important}.pr-2,.px-2{padding-right:calc(var(--space-size) * 2) !important}.pr-3,.px-3{padding-right:calc(var(--space-size) * 3) !important}.pr-4,.px-4{padding-right:calc(var(--space-size) * 4) !important}.pr-5,.px-5{padding-right:calc(var(--space-size) * 5) !important}.table{margin-bottom:1.5rem;width:100%;border-collapse:collapse;border-spacing:0;text-align:center}.table td,.table th{border:1px solid rgba(219,219,219,0.5);border-width:0 0 1px;padding:.75rem;vertical-align:top;text-align:inherit;margin:0}.table tr{transition:all .3s}.table caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}.table tr:hover,.table.striped tbody tr:nth-child(even):hover{background-color:rgba(216,216,216,0.15)}.table thead th,.table thead{border-bottom:2px solid rgba(219,219,219,0.49)}.table.bordered thead th,.table.bordered thead{border-bottom:1px solid rgba(219,219,219,0.5)}.table thead th,.table tfoot th{padding:1rem}.table tfoot th{border-top:2px solid rgba(219,219,219,0.5);border-bottom:0}.table.bordered td,.table.bordered th{border:1px solid rgba(219,219,219,0.5)}.table.bordered thead td,.table.borderd thead{border-width:1px}.table.striped tbody tr:nth-child(even){background-color:rgba(0,0,0,0.05)}.table.small td,.table.small th{padding:.25rem .75rem}.table.fixed-head thead{position:relative;display:block}.table.fixed-head tbody{height:200px;display:block;overflow:auto}.table.fixed-head tr{display:table;width:100%}.table tr.selected{background-color:var(--cirrus-primary);color:#fff}.table.borderless thead th,.table.borderless th,.table.borderless td{border:0}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d9e6f2;--cirrus-dark-hover:#424242;--cirrus-info-hover:#2368e9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#00b147;--cirrus-warning-hover:#f9a90e;--cirrus-danger-hover:#f1393c;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.4;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem;--pink-100:#f8e7f1;--pink-200:#f3d2e3;--pink-300:#ecb7d3;--pink-400:#eb8cbc;--pink-500:#dd5a9c;--pink-600:#d12e81;--pink-700:#a21f61;--pink-800:#831b50;--pink-900:#741648;--red-100:#fde7e9;--red-200:#fbd4d5;--red-300:#f7b1b1;--red-400:#f19393;--red-500:#e85c61;--red-600:#db3839;--red-700:#b31e1d;--red-800:#9b1313;--red-900:#890e10;--orange-100:#fdeed1;--orange-200:#fbdbaa;--orange-300:#f6b65c;--orange-400:#f19736;--orange-500:#e4771c;--orange-600:#c45307;--orange-700:#9b3908;--orange-800:#842b09;--orange-900:#890e10;--yellow-100:#fffde4;--yellow-200:#f9e978;--yellow-300:#f6da52;--yellow-400:#e8bb24;--yellow-500:#d29507;--yellow-600:#9d6b0c;--yellow-700:#7c4d09;--yellow-800:#6c3e0c;--yellow-900:#5d320f;--green-100:#e1f7eb;--green-200:#c2ecd6;--green-300:#98d9b7;--green-400:#64c192;--green-500:#44a675;--green-600:#33855d;--green-700:#27684a;--green-800:#275440;--green-900:#234535;--teal-100:#ddf2f5;--teal-200:#b5e6eb;--teal-300:#7fced5;--teal-400:#59bac3;--teal-500:#1e9ca8;--teal-600:#0f7d8a;--teal-700:#0a616a;--teal-800:#105157;--teal-900:#114448;--blue-100:#e1effc;--blue-200:#bfdcfc;--blue-300:#8bc2f8;--blue-400:#5fa7f3;--blue-500:#3c91ec;--blue-600:#1b74d9;--blue-700:#1e5898;--blue-800:#1e4c80;--blue-900:#1c3c63;--indigo-100:#e2efff;--indigo-200:#c4dbfd;--indigo-300:#a1befa;--indigo-400:#89a3f7;--indigo-500:#6c83e9;--indigo-600:#5966d9;--indigo-700:#4c4f9e;--indigo-800:#42417b;--indigo-900:#3a3462;--purple-100:#f0e9fb;--purple-200:#e2d4f8;--purple-300:#cbb2f6;--purple-400:#b89af4;--purple-500:#9c73ed;--purple-600:#8256e1;--purple-700:#6340b6;--purple-800:#50388e;--purple-900:#413170;--gray-000:#f8f9fa;--gray-100:#f1f3f5;--gray-200:#e9ecef;--gray-300:#dee2e6;--gray-400:#ced4da;--gray-500:#adb5bd;--gray-600:#868e96;--gray-700:#495057;--gray-800:#343a40;--gray-900:#212529}.u-hidden{display:none !important}.u-block{display:block !important}.u-inline{display:inline !important}.u-inline-block{display:inline-block !important}.u-flex{display:flex !important}.u-flex.u-flex-column{flex-direction:column !important}.u-flex.u-flex-row{flex-direction:row !important}.u-inline-flex{display:-ms-inline-flexbox !important;display:inline-flex !important}.u-table{display:table !important}.u-table-row{display:table-row !important}.u-position-static{position:static !important}.u-position-relative{position:static !important}.u-position-absolute{position:absolute !important}.u-position-fixed{position:fixed !important}.u-position-sticky{position:sticky !important}.u-clearfix:after{clear:both !important;content:" ";display:table !important}.u-clear-left{clear:left !important}.u-clear-right{clear:right !important}.u-clear-both{clear:both !important}.u-pull-left{float:left !important}.u-pull-right{float:right !important}.u-text-center{text-align:center !important}.u-text-justify{text-align:justify !important}.u-text-ellipsis{text-overflow:ellipsis}.u-text-break{hyphens:auto;word-break:break-word;word-wrap:break-word}.u-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 auto;flex-wrap:wrap}.u-center-alt,.u-center-alt:hover,.u-center-alt:active{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.u-vertical-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;align-items:center;vertical-align:middle}.u-horizontal-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.u-overlay{bottom:0;left:0;right:0;top:0;position:absolute}.u-hide-overflow{overflow:hidden !important;overflow-x:hidden;overflow-y:hidden}.u-text-center{text-align:center !important}.u-text-left{text-align:left !important}.u-text-right{text-align:right !important}.u-hide{display:none !important}.u-disabled{cursor:not-allowed !important}.u-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.u-margin-auto{margin:0 auto !important}.u-round{border-radius:.1rem}.u-circle{border-radius:50%}.u-no-shadow{box-shadow:none}@media screen and (min-width:769px){.level,.level-left,.level-right{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (max-width:768px){.u-hide-mobile{display:none !important}}@media screen and (min-width:768px){.u-hide-tablet{display:none !important}}@media screen and (min-width:769px) and (max-width:1023px){.u-hide-tablet-only{display:none !important}}@media screen and (min-width:1024px){.u-hide-desktop{display:none !important}} \ No newline at end of file +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Nunito+Sans:400,700");*{margin:0;padding:0;box-sizing:border-box;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;border:0;height:100%}body{letter-spacing:.01rem;line-height:1.8;font-size:1rem;font-weight:400;font-family:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";letter-spacing:.01rem;text-shadow:1px 1px 1px rgba(0,0,0,0.004);color:var(--cirrus-fg)}ul{list-style:none}img,embed,object,video{max-width:100%;height:auto}.hero.fullscreen video{height:100%;object-fit:fill;position:absolute;width:100%;z-index:-1}iframe{outline:0;border:1px solid rgba(0,0,0,0.1);border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,0.05)}article,aside,figure,footer,header,hgroup,section{display:block}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit}label{display:inline-block;margin:.25rem 0}fieldset{padding:1rem}fieldset legend{font-weight:bold}[hidden]{display:none !important}::selection{background-color:var(--cirrus-select-bg)}:focus{box-shadow:0 0 .1rem .15rem rgba(240,61,77,0.13);outline:0}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}button,.btn,[type='submit']{line-height:2rem;overflow:hidden;padding:.5rem 1.5rem;border:1px solid transparent;border-radius:.25rem;cursor:pointer;text-align:center;transition:all var(--animation-duration);background-color:var(--btn-color);border-color:var(--btn-border-color);color:var(--btn-fg);font-size:.75rem;letter-spacing:.03rem;text-transform:uppercase;font-family:Montserrat;min-width:2rem;user-select:none;margin-bottom:1rem;outline:0;--btn-color:#f8f9fa;--btn-fg:#495057;--btn-border-color:#dee2e6}button:hover,.btn:hover,[type='submit']:hover{transition:all var(--animation-duration);--btn-color:#e9ecef}button:active,.btn:active,[type='submit']:active{transition:var(--animation-duration) ease}button:focus,.btn:focus,[type='submit']:focus{outline:0}button:disabled,.btn:disabled,[type='submit']:disabled{cursor:not-allowed;opacity:.5}button.loading:active::after,.btn.loading:active::after,[type='submit'].loading:active::after{border-radius:50%;border-right-color:transparent;border-top-color:transparent;transition:var(--animation-duration) ease}button.btn-animated,.btn.btn-animated,[type='submit'].btn-animated{transition:calc(var(--animation-duration) / 2) ease}button.btn-animated:active,.btn.btn-animated:active,[type='submit'].btn-animated:active{-webkit-transform:scale(0.98);transform:inherit,scale(0.98);transition:calc(var(--animation-duration) / 2) ease}button.btn-close,.btn.btn-close,[type='submit'].btn-close{background-color:rgba(10,10,10,0.2);border:0;border-radius:290486px;cursor:pointer;display:inline-block;flex-grow:0;flex-shrink:0;font-size:0;height:20px;outline:0;position:relative;vertical-align:top;width:20px;padding:0;min-width:20px}button.btn-close:hover,.btn.btn-close:hover,[type='submit'].btn-close:hover{background-color:var(--gray-900)}button.btn-close::before,.btn.btn-close::before,[type='submit'].btn-close::before{background-color:var(--cirrus-bg);content:'';display:block;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}button.btn-close::after,.btn.btn-close::after,[type='submit'].btn-close::after{background-color:var(--cirrus-bg);content:'';display:block;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}button.btn-transparent,.btn.btn-transparent,[type='submit'].btn-transparent{--btn-color:transparent;--btn-fg:var(--cirrus-dark);--btn-border-color:transparent}button.btn-transparent:focus,.btn.btn-transparent:focus,[type='submit'].btn-transparent:focus{box-shadow:0 0 0 .2rem rgba(246,249,252,0.5)}button.btn-transparent:hover,.btn.btn-transparent:hover,[type='submit'].btn-transparent:hover{--btn-color:rgba(0,0,0,0.1)}button.btn-transparent.outline,.btn.btn-transparent.outline,[type='submit'].btn-transparent.outline{--btn-color:var(--cirrus-dark)}button.btn-light,.btn.btn-light,[type='submit'].btn-light{--btn-color:var(--cirrus-light);--btn-fg:var(--cirrus-dark);--btn-border-color:var(--cirrus-light)}button.btn-light:hover,.btn.btn-light:hover,[type='submit'].btn-light:hover{--btn-color:var(--cirrus-light-hover)}button.btn-light:focus,.btn.btn-light:focus,[type='submit'].btn-light:focus{box-shadow:0 0 0 .2rem rgba(246,249,252,0.5)}button.btn-dark,.btn.btn-dark,[type='submit'].btn-dark{--btn-color:var(--cirrus-dark);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-dark)}button.btn-dark:focus,.btn.btn-dark:focus,[type='submit'].btn-dark:focus{box-shadow:0 0 0 .2rem rgba(54,54,54,0.5)}button.btn-dark:hover,.btn.btn-dark:hover,[type='submit'].btn-dark:hover{--btn-color:var(--cirrus-dark-hover)}button.btn-dark.outline:hover,.btn.btn-dark.outline:hover,[type='submit'].btn-dark.outline:hover{--btn-color:var(--cirrus-dark)}button.btn-black,.btn.btn-black,[type='submit'].btn-black{--btn-color:#000;--btn-fg:var(--cirrus-light);--btn-border-color:#000}button.btn-black:focus,.btn.btn-black:focus,[type='submit'].btn-black:focus{box-shadow:0 0 0 .2rem rgba(54,54,54,0.5)}button.btn-black:hover,.btn.btn-black:hover,[type='submit'].btn-black:hover{--btn-color:#000}button.btn-primary,.btn.btn-primary,[type='submit'].btn-primary{--btn-color:var(--cirrus-primary);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-accent-border)}button.btn-primary:focus,.btn.btn-primary:focus,[type='submit'].btn-primary:focus{box-shadow:0 0 0 .2rem rgba(240,61,77,0.5)}button.btn-primary:hover,.btn.btn-primary:hover,[type='submit'].btn-primary:hover{--btn-color:var(--cirrus-accent-hover)}button.btn-primary.outline:hover,.btn.btn-primary.outline:hover,[type='submit'].btn-primary.outline:hover{--btn-color:var(--cirrus-primary)}button.btn-info,.btn.btn-info,[type='submit'].btn-info{--btn-color:var(--cirrus-info);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-info)}button.btn-info:focus,.btn.btn-info:focus,[type='submit'].btn-info:focus{box-shadow:0 0 0 .2rem rgba(41,114,250,0.5)}button.btn-info:hover,.btn.btn-info:hover,[type='submit'].btn-info:hover{--btn-color:var(--cirrus-info-hover)}button.btn-info.outline:hover,.btn.btn-info.outline:hover,[type='submit'].btn-info.outline:hover{--btn-color:var(--cirrus-info)}button.btn-link,.btn.btn-link,[type='submit'].btn-link{--btn-color:var(--cirrus-link);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-link)}button.btn-link:focus,.btn.btn-link:focus,[type='submit'].btn-link:focus{box-shadow:0 0 0 .2rem rgba(94,92,199,0.5)}button.btn-link:hover,.btn.btn-link:hover,[type='submit'].btn-link:hover{--btn-color:var(--cirrus-link-dark)}button.btn-link.outline,.btn.btn-link.outline,[type='submit'].btn-link.outline{--btn-fg:var(--cirrus-link);border:1px solid transparent}button.btn-link.outline:hover,.btn.btn-link.outline:hover,[type='submit'].btn-link.outline:hover{--btn-color:var(--cirrus-link-hover);border:1px solid transparent;text-decoration:underline}button.btn-success,.btn.btn-success,[type='submit'].btn-success{--btn-color:var(--cirrus-success);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-success)}button.btn-success:focus,.btn.btn-success:focus,[type='submit'].btn-success:focus{box-shadow:0 0 0 .2rem rgba(13,209,87,0.5)}button.btn-success:hover,.btn.btn-success:hover,[type='submit'].btn-success:hover{--btn-color:var(--cirrus-success-hover)}button.btn-success.outline:hover,.btn.btn-success.outline:hover,[type='submit'].btn-success.outline:hover{--btn-color:var(--cirrus-success)}button.btn-warning,.btn.btn-warning,[type='submit'].btn-warning{--btn-color:var(--cirrus-warning);--btn-fg:var(--cirrus-dark);--btn-border-color:var(--cirrus-warning)}button.btn-warning:focus,.btn.btn-warning:focus,[type='submit'].btn-warning:focus{box-shadow:0 0 0 .2rem rgba(250,182,51,0.5)}button.btn-warning:hover,.btn.btn-warning:hover,[type='submit'].btn-warning:hover{--btn-color:var(--cirrus-warning-hover)}button.btn-warning.outline:hover,.btn.btn-warning.outline:hover,[type='submit'].btn-warning.outline:hover{--btn-color:var(--cirrus-warning)}button.btn-danger,.btn.btn-danger,[type='submit'].btn-danger{--btn-color:var(--cirrus-danger);--btn-fg:var(--cirrus-light);--btn-border-color:var(--cirrus-danger)}button.btn-danger:focus,.btn.btn-danger:focus,[type='submit'].btn-danger:focus{box-shadow:0 0 0 .2rem rgba(251,65,67,0.5)}button.btn-danger:hover,.btn.btn-danger:hover,[type='submit'].btn-danger:hover{--btn-color:var(--cirrus-danger-hover)}button.btn-danger.outline:hover,.btn.btn-danger.outline:hover,[type='submit'].btn-danger.outline:hover{--btn-color:var(--cirrus-danger)}button.btn-xsmall,.btn.btn-xsmall,[type='submit'].btn-xsmall{padding:0 .5rem;font-size:50%}button.btn-small,.btn.btn-small,[type='submit'].btn-small{padding:.25rem 1rem;font-size:70%}button.btn-large,.btn.btn-large,[type='submit'].btn-large{padding:.75rem 2rem;font-size:90%}button.btn-xlarge,.btn.btn-xlarge,[type='submit'].btn-xlarge{padding:1rem 2.5rem;font-size:110%}button.btn-success,.btn.btn-success,[type='submit'].btn-success{border-color:var(--cirrus-success) !important}button.btn-success:focus,.btn.btn-success:focus,[type='submit'].btn-success:focus{box-shadow:0 0 0 .2rem rgba(13,209,87,0.55),inset 0 1px 8px rgba(0,0,0,0.07)}button.btn-error,.btn.btn-error,[type='submit'].btn-error{border-color:var(--cirrus-danger) !important}button.btn-error:focus,.btn.btn-error:focus,[type='submit'].btn-error:focus{box-shadow:0 0 0 .2rem rgba(251,65,67,0.55),inset 0 1px 8px rgba(0,0,0,0.07)}button .fa-wrapper,.btn .fa-wrapper,[type='submit'] .fa-wrapper{vertical-align:baseline}button .fa-wrapper.pad-right,.btn .fa-wrapper.pad-right,[type='submit'] .fa-wrapper.pad-right{margin-right:.4rem}button .fa-wrapper.pad-left,.btn .fa-wrapper.pad-left,[type='submit'] .fa-wrapper.pad-left{margin-left:.4rem}button span:first-child,.btn span:first-child,[type='submit'] span:first-child{margin-right:.2rem}button span:last-child,.btn span:last-child,[type='submit'] span:last-child{margin-left:.2rem}[class^='btn-'],[class*=' btn-']{background-color:var(--btn-color);border:1px solid var(--btn-border-color);color:var(--btn-fg);transition:all var(--animation-duration)}[class^='btn-']:hover,[class*=' btn-']:hover{background-color:var(--btn-color);border-color:var(--btn-border-color);transition:all var(--animation-duration)}[class^='btn-'].outline,[class*=' btn-'].outline{background-color:transparent;color:var(--btn-color)}[class^='btn-'].outline:hover,[class*=' btn-'].outline:hover{background-color:var(--btn-color);color:var(--btn-fg);transition:all var(--animation-duration)}.loading.btn-accent:after{border:2px solid #fff;border-right-color:transparent;border-top-color:transparent}.btn-group{display:-webkit-inline-box;display:inline-flex;display:-ms-inline-flexbox;display:-webkit-inline-flex}.btn-group .btn{-ms-flex:1 0 auto;-webkit-box-flex:1;flex:1 0 auto;margin:0}.btn-group .btn:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group .btn:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}.btn-group .btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem}.btn-group button{-ms-flex:1 0 auto;-webkit-box-flex:1;flex:1 0 auto;margin:0}.btn-group button:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group button:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}.btn-group button:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem}.btn-group [type="submit"]{-ms-flex:1 0 auto;-webkit-box-flex:1;flex:1 0 auto;margin:0}.btn-group [type="submit"]:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.btn-group [type="submit"]:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}.btn-group [type="submit"]:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem}.btn-group.btn-group-fill{display:-webkit-box;display:flex;display:-ms-flexbox}.btn-group.btn-group-fill .btn{-ms-flex:1 0;-webkit-box-flex:1;flex:1 0}.btn-group.btn-group-fill button{-ms-flex:1 0;-webkit-box-flex:1;flex:1 0}.btn-group.btn-group-fill [type="submit"]{-ms-flex:1 0;-webkit-box-flex:1;flex:1 0}@media screen and (max-width:768px){.btn-group{display:flex;flex-direction:column}.btn-group .btn{margin-bottom:-1px}.btn-group .btn:first-child:not(:last-child){border-radius:.25rem .25rem 0 0}.btn-group .btn:not(:first-child):not(:last-child){margin-left:0}.btn-group .btn:last-child:not(:first-child){border-radius:0 0 .25rem .25rem;margin-left:0}.btn-group button{margin-bottom:-1px}.btn-group button:first-child:not(:last-child){border-radius:.25rem .25rem 0 0}.btn-group button:not(:first-child):not(:last-child){margin-left:0}.btn-group button:last-child:not(:first-child){border-radius:0 0 .25rem .25rem;margin-left:0}.btn-group [type="submit"]{margin-bottom:-1px}.btn-group [type="submit"]:first-child:not(:last-child){border-radius:.25rem .25rem 0 0}.btn-group [type="submit"]:not(:first-child):not(:last-child){margin-left:0}.btn-group [type="submit"]:last-child:not(:first-child){border-radius:0 0 .25rem .25rem;margin-left:0}}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}code{padding:.3rem;margin:.5em 0;overflow:auto;background-color:var(--cirrus-code-bg);color:var(--cirrus-code-fg);border-radius:3px}code:before{color:#acb3c2;content:attr(data-lang);font-size:.9rem;position:absolute;right:1rem;top:.7rem}code.dark{background-color:#363636;color:#fff}pre>code{font-size:14px;display:block;padding:2rem 1.5rem 1rem;white-space:pre-wrap;word-wrap:break-word;font-family:Consolas,Monaco,'Andale Mono',monospace;text-align:left;line-height:1.5;-moz-tab-size:4;tab-size:4;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-left:.3rem solid #f03d4d;margin:0;position:relative;color:#222}@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700");@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}h1{font-family:'Montserrat',sans-serif;font-size:2.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem}h2{font-family:'Montserrat',sans-serif;font-size:2.25rem;font-weight:700;line-height:1.2;margin-bottom:1rem}h3{font-family:'Montserrat',sans-serif;font-size:2rem;font-weight:700;line-height:1.2;margin-bottom:1rem}h4{font-family:'Montserrat',sans-serif;font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:1rem}h5{font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:700;line-height:1.2;margin-bottom:1rem}h6{font-family:'Montserrat',sans-serif;font-size:1.25rem;font-weight:700;line-height:1.2;margin-bottom:1rem}h1{letter-spacing:.025rem}p,article,blockquote{font-size:1rem;line-height:2;margin-bottom:1rem}p.lead{font-size:1.2rem}blockquote{background-color:#f5f5f5;border-left:5px solid #dbdbdb;border-radius:3px;font-size:1.15rem;margin-bottom:1rem;padding:1rem 2rem}blockquote p{margin:0;font-size:.95rem}cite{opacity:.7}mark,.mark{padding:.2em;background-color:#f0e8c4}.headline-1{font-size:8.5rem;letter-spacing:.05rem}.headline-2{font-size:7.5rem;letter-spacing:.05rem}.headline-3{font-size:6.5rem;letter-spacing:.05rem}.headline-4{font-size:5.5rem;letter-spacing:.05rem}.font-alt{font-family:'Nunito Sans'}.content h1{line-height:1.125em;margin:1rem 0}.content h2{line-height:1.125em;margin:1rem 0}.content h3{line-height:1.125em;margin:1rem 0}.content h4{line-height:1.125em;margin:1rem 0}.content h5{line-height:1.125em;margin:1rem 0}.content h6{line-height:1.125em;margin:1rem 0}.title{font-weight:bold}.title:not(:last-child),.subtitle:not(:last-child){margin-bottom:1rem}.title+.subtitle{margin-top:-0.75rem}.card-tile p,.card-tile article,.card-tile blockquote{line-height:inherit}.font-thin{font-weight:200}.font-light{font-weight:300}.font-normal{font-weight:400}.font-semibold{font-weight:600}.font-bold{font-weight:700}.uppercase{text-transform:"uppercase"}.lowercase{text-transform:"lowercase"}.capitalize{text-transform:"capitalize"}.rtl{direction:rtl}.white{color:#fff !important}.faded{opacity:.75}.font-italic{font-style:italic}.icon{display:inline-block;text-align:center;width:1.5rem;vertical-align:baseline}.icon.x-small{margin:.55rem 0 0 .1rem}.icon.small{margin:.95rem 0 0 .1rem}.icon .fa-wrapper{font-size:inherit;vertical-align:middle}.info{display:block;font-size:var(--font-size-s);margin-top:.25rem;color:#868e96}.info.inline{display:inline-block;margin-left:.5rem}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid\9;border-right:4px solid transparent;border-left:4px solid transparent}abbr[title]{border-bottom:.1rem dotted;cursor:help;text-decoration:none}kbd{background-color:var(--cirrus-fg);border-radius:.2rem;color:#fff;display:inline-block;line-height:1;padding:.5rem;vertical-align:baseline}@media(max-width:650px){h1{font-size:2.25rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}.headline-1{font-size:3.75rem}.headline-2{font-size:3.5rem}.headline-3{font-size:3.25rem}.headline-4{font-size:3rem}p,article,blockquote{margin:1rem 0}}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}.footer{background-color:#212529;padding:6rem 0;text-align:center;margin-top:5rem;width:100%}.footer.footer--fixed{bottom:0;position:fixed}.footer a{color:#fff;font-weight:bolder}.footer p{color:#868e96}.footer ul{margin:.5rem 0}.footer .footer__title{text-align:center;letter-spacing:6px;position:relative;padding-bottom:10px}.footer .footer__list-title{font-size:75%;text-transform:uppercase;font-weight:bolder;color:#ddd}.footer .footer__list-title::after{content:'';display:block;width:10%;margin:auto;border-bottom:2px solid;border-color:#343b49}.footer ul a .footer__list-item,.footer .footer__list-item{margin:.1rem;color:#868e96;transition:all var(--animation-duration);font-size:75%;text-transform:uppercase}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']){width:100%;border:1px solid #dee2e6;border-radius:3px;font-family:'Nunito Sans';font-size:var(--font-size-m);letter-spacing:.02rem;transition:all .3s;outline:0;padding:.85rem 1.1rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xsmall,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xsmall{font-size:var(--font-size-xs);padding:.35rem .9rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-small,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-small{font-size:var(--font-size-s);padding:.55rem 1rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-large,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-large{font-size:var(--font-size-l)}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xlarge,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xlarge{font-size:var(--font-size-xl)}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left{padding-left:2.75rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right{padding-right:2.75rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall{padding-left:2rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xsmall ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall ~ .icon.icon-right{line-height:1.75rem;width:1.75rem;font-size:7px}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small{padding-left:2.5rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-small ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small ~ .icon.icon-right{line-height:2rem;width:2.5rem;font-size:14px}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large{padding-left:3.5rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-large ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large ~ .icon.icon-right{line-height:3.5rem;width:3.5rem;font-size:28px}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge{padding-left:4rem}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xlarge ~ .icon,input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge ~ .icon.icon-right{line-height:2.5rem;width:3.75rem;font-size:35px}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='search'],input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).search{background-repeat:no-repeat;background-position:left .6rem center;background-image:url('data:image/svg+xml;utf8,');padding-left:2rem !important;-webkit-appearance:none}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='color']{box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);box-sizing:border-box;transition:.3s;outline:0;position:relative;height:3rem;background-color:#fff;padding:.55rem .8rem !important}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success{border-color:var(--cirrus-success) !important;background-color:rgba(0,224,0,0.05) !important}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success:focus{box-shadow:0 0 0 .2rem rgba(13,209,87,0.55),inset 0 1px 8px rgba(0,0,0,0.07)}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error{border-color:var(--cirrus-danger) !important;background-color:rgba(244,67,54,0.05) !important}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error:focus{box-shadow:0 0 0 .2rem rgba(251,65,67,0.55),inset 0 1px 8px rgba(0,0,0,0.07)}textarea,textarea[type='text']{width:100%;border:1px solid #dee2e6;border-radius:3px;font-family:'Nunito Sans';font-size:var(--font-size-m);letter-spacing:.02rem;transition:all .3s;outline:0;padding:.85rem 1.1rem;margin:.5rem 0;padding:1rem 1.3rem;min-height:8rem;line-height:1.5rem;resize:vertical}textarea.input-xsmall,textarea select.input-xsmall,textarea[type='text'].input-xsmall,textarea[type='text'] select.input-xsmall{font-size:var(--font-size-xs);padding:.35rem .9rem}textarea.input-small,textarea select.input-small,textarea[type='text'].input-small,textarea[type='text'] select.input-small{font-size:var(--font-size-s);padding:.55rem 1rem}textarea.input-large,textarea select.input-large,textarea[type='text'].input-large,textarea[type='text'] select.input-large{font-size:var(--font-size-l)}textarea.input-xlarge,textarea select.input-xlarge,textarea[type='text'].input-xlarge,textarea[type='text'] select.input-xlarge{font-size:var(--font-size-xl)}textarea.input-contains-icon,textarea.input-contains-icon-left,textarea[type='text'].input-contains-icon,textarea[type='text'].input-contains-icon-left{padding-left:2.75rem}textarea.input-contains-icon-right,textarea[type='text'].input-contains-icon-right{padding-right:2.75rem}textarea.input-contains-icon.input-xsmall,textarea.input-contains-icon-right.input-xsmall,textarea[type='text'].input-contains-icon.input-xsmall,textarea[type='text'].input-contains-icon-right.input-xsmall{padding-left:2rem}textarea.input-contains-icon.input-xsmall ~ .icon,textarea.input-contains-icon-left.input-xsmall ~ .icon,textarea.input-contains-icon-right.input-xsmall ~ .icon.icon-right,textarea[type='text'].input-contains-icon.input-xsmall ~ .icon,textarea[type='text'].input-contains-icon-left.input-xsmall ~ .icon,textarea[type='text'].input-contains-icon-right.input-xsmall ~ .icon.icon-right{line-height:1.75rem;width:1.75rem;font-size:7px}textarea.input-contains-icon.input-small,textarea.input-contains-icon-right.input-small,textarea[type='text'].input-contains-icon.input-small,textarea[type='text'].input-contains-icon-right.input-small{padding-left:2.5rem}textarea.input-contains-icon.input-small ~ .icon,textarea.input-contains-icon-left.input-small ~ .icon,textarea.input-contains-icon-right.input-small ~ .icon.icon-right,textarea[type='text'].input-contains-icon.input-small ~ .icon,textarea[type='text'].input-contains-icon-left.input-small ~ .icon,textarea[type='text'].input-contains-icon-right.input-small ~ .icon.icon-right{line-height:2rem;width:2.5rem;font-size:14px}textarea.input-contains-icon.input-large,textarea.input-contains-icon-right.input-large,textarea[type='text'].input-contains-icon.input-large,textarea[type='text'].input-contains-icon-right.input-large{padding-left:3.5rem}textarea.input-contains-icon.input-large ~ .icon,textarea.input-contains-icon-left.input-large ~ .icon,textarea.input-contains-icon-right.input-large ~ .icon.icon-right,textarea[type='text'].input-contains-icon.input-large ~ .icon,textarea[type='text'].input-contains-icon-left.input-large ~ .icon,textarea[type='text'].input-contains-icon-right.input-large ~ .icon.icon-right{line-height:3.5rem;width:3.5rem;font-size:28px}textarea.input-contains-icon.input-xlarge,textarea.input-contains-icon-right.input-xlarge,textarea[type='text'].input-contains-icon.input-xlarge,textarea[type='text'].input-contains-icon-right.input-xlarge{padding-left:4rem}textarea.input-contains-icon.input-xlarge ~ .icon,textarea.input-contains-icon-left.input-xlarge ~ .icon,textarea.input-contains-icon-right.input-xlarge ~ .icon.icon-right,textarea[type='text'].input-contains-icon.input-xlarge ~ .icon,textarea[type='text'].input-contains-icon-left.input-xlarge ~ .icon,textarea[type='text'].input-contains-icon-right.input-xlarge ~ .icon.icon-right{line-height:2.5rem;width:3.75rem;font-size:35px}input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus,select:focus,textarea:focus,textarea[type='text']:focus,input[type='text'].input-focused,.input-focused{border-color:#3dabf0;box-shadow:0 0 0 .2rem rgba(61,171,240,0.45),inset 0 1px 8px rgba(0,0,0,0.07)}select{width:100%;border:1px solid #dee2e6;border-radius:3px;font-family:'Nunito Sans';font-size:var(--font-size-m);letter-spacing:.02rem;transition:all .3s;outline:0;padding:.85rem 1.1rem;background-color:#fff;border:1px solid #ddd}select.input-xsmall,select select.input-xsmall{font-size:var(--font-size-xs);padding:.35rem .9rem}select.input-small,select select.input-small{font-size:var(--font-size-s);padding:.55rem 1rem}select.input-large,select select.input-large{font-size:var(--font-size-l)}select.input-xlarge,select select.input-xlarge{font-size:var(--font-size-xl)}select.input-contains-icon,select.input-contains-icon-left{padding-left:2.75rem}select.input-contains-icon-right{padding-right:2.75rem}select.input-contains-icon.input-xsmall,select.input-contains-icon-right.input-xsmall{padding-left:2rem}select.input-contains-icon.input-xsmall ~ .icon,select.input-contains-icon-left.input-xsmall ~ .icon,select.input-contains-icon-right.input-xsmall ~ .icon.icon-right{line-height:1.75rem;width:1.75rem;font-size:7px}select.input-contains-icon.input-small,select.input-contains-icon-right.input-small{padding-left:2.5rem}select.input-contains-icon.input-small ~ .icon,select.input-contains-icon-left.input-small ~ .icon,select.input-contains-icon-right.input-small ~ .icon.icon-right{line-height:2rem;width:2.5rem;font-size:14px}select.input-contains-icon.input-large,select.input-contains-icon-right.input-large{padding-left:3.5rem}select.input-contains-icon.input-large ~ .icon,select.input-contains-icon-left.input-large ~ .icon,select.input-contains-icon-right.input-large ~ .icon.icon-right{line-height:3.5rem;width:3.5rem;font-size:28px}select.input-contains-icon.input-xlarge,select.input-contains-icon-right.input-xlarge{padding-left:4rem}select.input-contains-icon.input-xlarge ~ .icon,select.input-contains-icon-left.input-xlarge ~ .icon,select.input-contains-icon-right.input-xlarge ~ .icon.icon-right{line-height:2.5rem;width:3.75rem;font-size:35px}select[multiple] option{padding:.2rem .4rem}select.select:not([size]):not([multiple]){background:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .85rem center/0.5rem .6rem no-repeat;-webkit-appearance:none}select.input-xsmall{padding:.65rem .9rem}select.input-small{padding:.75rem 1rem}select.input-large{padding:.95rem 1.2rem}select.input-xlarge{padding:1.05rem 1.3rem}input:not([class*='btn-']):disabled,input:not([class*=' btn-']):disabled:hover,select:disabled,textarea:disabled{background-color:#f1f3f5;cursor:not-allowed;border:1px solid #f1f3f5}label.label{color:#495057;display:inline-block;font-weight:bold;margin-top:.8rem}label.label:not(:last-child){margin-bottom:0}label:first-child:not(:last-child):not(.form-group-label){margin-right:.5rem}label:not(:first-child):not(:last-child):not(.form-group-label){margin:0 .5rem}label:last-child:not(:first-child):not(.form-group-label){margin-left:.5rem}.required{position:relative;top:1px;font-weight:bold;color:#db3839;padding-left:.1rem}.input-control{position:relative;margin:.5rem 0}.input-contains-icon ~ .icon{display:flex;align-items:center;justify-content:center;height:100%}.input-contains-icon ~ .icon:not(.icon-right),.input-contains-icon-left ~ .icon.icon-left{position:absolute;left:0;top:0;width:3rem;z-index:1}.input-contains-icon-right ~ .icon.icon-right{position:absolute;pointer-events:none;line-height:2.75rem;vertical-align:baseline;top:0;right:0;width:3rem;z-index:1}.form-section:not(:last-child){margin-bottom:.5rem}.form-section.section-inline{display:flex}.form-section button{align-items:center;flex-grow:0;display:flex;flex-shrink:0}.form-section input,.form-section .section-body{align-items:center;flex-grow:1}.form-group{display:flex;display:-ms-flexbox;margin:.5rem 0}.form-group .form-group-btn{-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;margin-bottom:0}.form-group .form-group-btn:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.form-group .form-group-btn:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem;margin-right:-0.1rem}.form-group .form-group-btn:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}.form-group .form-group-label{background-color:var(--cirrus-form-group-bg);border:1px solid #dee2e6;border-radius:.2rem;color:var(--cirrus-form-group-fg);margin:0;padding:.8rem;user-select:none;z-index:1}.form-group .form-group-label:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.form-group .form-group-label:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem;margin-right:-0.1rem}.form-group .form-group-label:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}.form-group .form-group-label.label-xsmall{font-size:.55rem;padding:.5rem .9rem}.form-group .form-group-label.label-small{font-size:.75rem;padding:.55rem 1rem}.form-group .form-group-label.label-large{font-size:1.5rem}.form-group .form-group-label.label-xlarge{font-size:2rem}.form-group .form-group-input:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.form-group .form-group-input:not(:first-child):not(:last-child){border-radius:0;margin-left:-0.1rem;margin-right:-0.1rem}.form-group .form-group-input:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-0.1rem}::-moz-placeholder{color:#a9a9a9}::-webkit-input-placeholder{color:#a9a9a9}@media screen and (max-width:768px){.form-section.section-inline{display:inherit}}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}.frame{border-radius:3px;box-shadow:0 .2rem 1.25rem 0 rgba(27,30,36,0.07);display:flex;display:-ms-flexbox;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column}.frame .frame__header,.frame .frame__footer{flex:0 0 auto;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;padding:1rem}.frame .frame__nav{flex:0 0 auto;-webkit-flex:0 0 auto;-ms-flex:0 0 auto}.frame .frame__body{flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;overflow-y:auto;padding:0 1.5rem}.frame .frame__title{color:#374054;font-size:1rem;margin:.75rem auto 0}.frame .frame__subtitle{color:rgba(55,64,84,0.6);font-size:1rem;margin:0 auto .75rem}.header{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;width:100%;z-index:100;margin-bottom:20px;box-shadow:0 3px 15px rgba(57,63,72,0.1);background-color:var(--cirrus-bg);max-height:100vh;padding:0 2rem;transition:all .3s}.header h1{margin:0}.header h2{margin:0}.header h3{margin:0}.header h4{margin:0}.header h5{margin:0}.header h6{margin:0}.header a{color:#8292a2}.header a:hover{color:#697888}.header-dark{background-color:rgba(0,0,0,0.87);color:#fff}.header-clear{background-color:transparent;box-shadow:none}.header.header-animated .header-nav{-webkit-transition:background .4s ease,height .4s ease;transition:background .4s ease,height .4s ease;-webkit-transition-property:background,height;transition-property:background,height;-webkit-transition-duration:.4s,0.4s;transition-duration:.4s,0.4s;-webkit-transition-timing-function:ease,ease;transition-timing-function:ease,ease;-webkit-transition-delay:initial,initial;transition-delay:initial,initial;-webkit-transition:all .3s;transition:all .3s}.header-brand{-webkit-overflow-scrolling:touch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;max-width:100vw;min-height:3.25rem;overflow-x:auto;overflow-y:hidden}.header-nav{overflow:auto}.nav-menu{-webkit-transition:all .3s;transition:all .3s}.nav-item.has-sub{position:relative}.nav-overflow-x{-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;overflow-x:scroll}.header-fixed{position:fixed;top:0}.nav-item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all .3s;transition:all .3s;padding:0 .3rem;cursor:pointer}.nav-item a{align-items:center;display:flex}.header:not(.header-clear) .nav-item:not(.no-hover):hover,.header:not(.header-clear) .nav-item:not(.no-hover).hovered{-webkit-transition:all .3s;transition:all .3s;background-color:rgba(216,216,216,0.15)}.header:not(.header-clear) .nav-item.active,.header:not(.header-clear) .nav-item.active:hover{background-color:rgba(216,216,216,0.35)}.nav-item .dropdown-menu{background-color:var(--cirrus-bg);position:absolute;top:95%;z-index:1000;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-clip:padding-box;border:1px solid #eee;border-radius:0 0 4px 4px;box-shadow:0 .5rem 1rem rgba(10,10,10,0.1)}.header.header-clear .nav-item .dropdown-menu{border-radius:4px}.nav-item .dropdown-menu.dropdown-animated{-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.nav-item.has-sub .nav-dropdown-link::after{border:2px solid var(--cirrus-primary);border-right:0;border-top:0;display:block;height:.5em;width:.5em;content:" ";-webkit-transform:rotate(-45deg);transform:rotate(-45deg);pointer-events:none;margin-top:-0.435em;right:1.125em;top:50%;position:absolute}.nav-item.has-sub .nav-dropdown-link{padding-right:2.5rem;position:relative}.nav-item .dropdown-menu.dropdown-dark,.header-dark .dropdown-menu{background-color:rgba(0,0,0,0.87);border:1px solid #333;color:#fff}.dropdown-menu.dropdown-shown,.nav-item.active{opacity:1}.dropdown-menu>li>a{display:block;padding:.5rem 1rem;clear:both;line-height:1.42857143;white-space:nowrap}.header-dark .nav-item a,.header-dark .dropdown-menu>li>a{color:#fff}.dropdown-menu>li{margin:0;-webkit-transition:all .3s;transition:all .3s}.dropdown-menu>li:hover{-webkit-transition:all .3s;transition:all .3s;background-color:rgba(216,216,216,0.15)}.dropdown-menu>li:active{-webkit-transition:all .3s;transition:all .3s;background-color:rgba(216,216,216,0.25)}.dropdown-menu>li:last-child{margin-bottom:0}.dropdown-menu .dropdown-menu-divider{border:0;background-color:rgba(216,216,216,0.15);height:1px;margin:.5rem 0}.nav-btn{cursor:pointer;display:block;height:3.5rem;position:relative;width:3.5rem}.header .btn,.header button,.header input[type="submit"]{margin:0}@media screen and (min-width:769px){.header{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox}.header-nav{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;text-align:center;width:100%;top:0;overflow:visible}.nav-left,.nav-right{-webkit-box-align:stretch;-ms-flex-align:stretch;-ms-grid-row-align:stretch;align-items:stretch;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0}.nav-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;white-space:nowrap}.nav-right{display:-webkit-box;display:-ms-flexbox;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;white-space:nowrap}.nav-center{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-left:auto;margin-right:auto}.nav-btn{display:none}.nav-item a{padding:.5rem 1rem}.nav-item .dropdown-menu{opacity:0;pointer-events:none}.nav-item .dropdown-menu.dropdown-animated{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.nav-item .dropdown-menu.dropdown-shown,.nav-item.toggle-hover:hover .dropdown-menu,.nav-item .dropdown-menu.dropdown-animated.dropdown-shown,.nav-item.toggle-hover:hover .dropdown-animated.dropdown-menu{opacity:1;-webkit-transform:none;transform:none;pointer-events:auto}.nav-left .has-sub .dropdown-menu{left:0;right:auto}.nav-right .has-sub .dropdown-menu{left:auto;right:0}}@media screen and (max-width:768px){.header{display:flex;flex-direction:column}.header-brand .nav-item:first-child{padding:0 1rem}.header-nav{height:0}.header-nav.active{height:100vh}.nav-item.has-sub{display:block}.nav-item.has-sub .dropdown-menu.dropdown-shown{border-radius:0;box-shadow:none;display:block;position:relative;top:1rem;float:none;border:0;background-color:transparent;margin-bottom:1rem}.nav-item.has-sub .dropdown-menu.dropdown-dark{background-color:rgba(0,0,0,0.17);border:0;color:#fff}.nav-item.has-sub .dropdown-menu{display:none}.header-nav .nav-item{padding:1rem}.header-nav .nav-item>a{padding:0;width:100%}.nav-btn{cursor:pointer;display:block;position:relative;margin-left:auto}.nav-btn span{background-color:#4d565f;display:block;height:2px;left:50%;margin-left:-7px;position:absolute;top:50%;-webkit-transition:none 86ms ease-out;transition:none 86ms ease-out;-webkit-transition-property:background,left,opacity,-webkit-transform;transition-property:background,left,opacity,-webkit-transform;transition-property:background,left,opacity,transform;transition-property:background,left,opacity,transform,-webkit-transform;width:15px}.header-dark .nav-btn span{background-color:#fff}.nav-btn span:nth-child(1){margin-top:-6px}.nav-btn span:nth-child(2){margin-top:-1px}.nav-btn span:nth-child(3){margin-top:4px}.nav-btn.active span:nth-child(1){margin-left:-5px;transform:rotate(45deg);transform-origin:left top}.nav-btn.active span:nth-child(2){opacity:0}.nav-btn.active span:nth-child(3){margin-left:-5px;transform:rotate(-45deg);transform-origin:left bottom}.nav-left,.nav-center,.nav-right{overflow:hidden}}@media screen and (min-width:1023px){.header{padding:0 2rem}}.content{max-width:60em;margin:0 auto 1.5em;width:80%}.fullscreen{top:0;right:0;bottom:0;left:0;height:100vh}section{display:block}.panel{padding:2.5em 0}.divider{border-top:.05rem solid rgba(173,173,173,0.5);height:.1rem;margin:1.8rem 0 1.6rem}.divider[data-content]{margin:.8rem 0}.divider--v[data-content]{display:block;padding:.8rem}.divider--v::before{border-left:.05rem solid rgba(173,173,173,0.5);bottom:.4rem;content:'';display:block;left:50%;position:absolute;top:0;transform:translateX(-50%)}.divider--v[data-content]::after,.divider[data-content]::after{background:#fff;color:#bcc3ce;content:attr(data-content);left:50%;display:inline-block;padding:0 .4rem;position:absolute;transform:translate(-50%,-50%);top:50%}.divider--v[data-content]{left:50%;padding:.2rem 0;position:absolute;top:50%;transform:translate(-50%,-50%)}.hero-img{background-size:cover}.parallax-img{background-attachment:fixed !important}.hero{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.hero-body{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;padding:3rem 1.5rem;align-items:center;display:-ms-flexbox;display:flex;width:100%}.space{display:block;width:100%;height:1rem}.space.large{padding:1rem 0}.space.xlarge{padding:2rem 0}.row{-ms-flex:1;flex:1;flex-wrap:wrap;padding:.5rem 0}.r{max-width:100%;padding:.5rem}.row.row--no-wrap{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;overflow-x:auto}.row::after{content:'';clear:both;display:table}.row .col{display:block;flex:1;padding:.15rem .75rem}.row .col-1{width:8.33333333%}.row .col-2{width:16.66666667%}.row .col-3{width:25%}.row .col-4{width:33.33333333%}.row .col-5{width:41.66666667%}.row .col-6{width:50%}.row .col-7{width:58.33333333%}.row .col-8{width:66.66666667%}.row .col-9{width:75%}.row .col-10{width:83.33333333%}.row .col-11{width:91.66666667%}.row .col-12{width:100%}.row .offset-1{margin-left:8.33333333%}.row .offset-2{margin-left:16.66666667%}.row .offset-3{margin-left:25%}.row .offset-4{margin-left:33.33333333%}.row .offset-5{margin-left:41.66666667%}.row .offset-6{margin-left:50%}.row .offset-7{margin-left:58.33333333%}.row .offset-8{margin-left:66.66666667%}.row .offset-9{margin-left:75%}.row .offset-10{margin-left:83.33333333%}.row .offset-11{margin-left:91.66666667%}.row .offset-12{margin-left:100%}.row .offset-right{margin-left:0;margin-right:auto}.row .offset-center{margin-left:auto;margin-right:auto}.row .offset-left{margin-left:auto;margin-right:0}.row [class^='col-'],.row [class*=' col-']{float:left;padding:0 .5rem}.row.no-space [class^='col-'],.row.no-space [class*=' col-']{padding:0}.row.has-controls{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.level{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.level-left{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-right:1rem}.level-right{-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.level-item{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.level-content{-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-align:left;width:100%}.w-10{width:10%}.w-20{width:20%}.w-30{width:30%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-auto{width:auto}.h-10{height:10%}.h-20{height:20%}.h-30{height:30%}.h-40{height:40%}.h-50{height:50%}.h-60{height:60%}.h-70{height:70%}.h-80{height:80%}.h-90{height:90%}.h-100{height:100%}.h-auto{height:auto}@media screen and (min-width:769px){.row{display:flex}.level-right{margin-left:1rem}.level.fill-height{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (max-width:768px){.container{width:100%}.row{margin-top:0}.row [class^='col-']:not(.ignore-screen),.row [class*=' col-']:not(.ignore-screen){width:100%;margin-left:0;padding:0}.divided>.row [class^='col-'],.divided>.row [class*=' col-']{box-shadow:0 -1px 0 0 rgba(34,36,38,0.15)}.level.ignore-screen,.level-left.ignore-screen,.level-right.ignore-screen{display:-webkit-box;display:-ms-flexbox;display:flex}.level.fill-height{display:inherit}.hero-body{padding:0}}a{color:var(--cirrus-link);font-weight:600;padding:2px;text-decoration:none;transition:all .3s}a:hover{color:var(--cirrus-link-dark);transition:all .3s}a:visited,a:hover,a:active{backface-visibility:hidden;text-decoration:none}.subtitle a{padding:0}a.underline{text-decoration:underline}p a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,blockquote a,article a{display:inline}a .btn,a button,[type='submit'] a{margin-bottom:0}ul,ol{margin:1rem 0 1rem 1rem;padding-inline-start:.5rem}ul{list-style:disc}ul ul,ol ul,ul ol,ol ol{margin:0 0 0 1rem}ul ul{list-style-type:circle}ul ul ul{list-style-type:square}ol ol{list-style:lower-alpha}ol ol ol{list-style:upper-roman}dl{margin:1rem 0}dt{font-weight:700}dd{margin-bottom:.5rem}li{margin:.25rem 0}li:not(.dropdown-menu>li):last-child{margin-bottom:1rem}ul.no-bullets{list-style:none}.menu{font-size:1rem}ul.menu{list-style:none;margin:.5rem 0}.menu-title:not(:first-child){margin-bottom:1rem}.menu-title:not(:last-child){margin-top:1rem}.menu .menu-item a{color:#555;display:block;padding:.5em .75em;border-radius:3px;font-size:var(--font-size-s);cursor:pointer;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item:hover>a{background-color:rgba(208,208,208,0.3);color:#d43644;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item.selected>a{color:#fff;background-color:var(--cirrus-primary)}.menu .menu-item .menu-addon{padding:.3rem;z-index:1;position:relative;color:var(--cirrus-fg);cursor:pointer;float:left;margin-right:.1rem;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item .menu-addon .icon{font-size:inherit}.menu .menu-item .menu-addon:hover{background-color:rgba(60,60,60,0.25);-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.menu .menu-item .menu-addon.right{float:right;margin-right:0;margin-left:.1rem}.menu .menu-item.selected .menu-addon{color:#fff}.menu .menu-item ul{border-left:1px solid #dbdbdb;margin:.75rem;padding-left:.75rem}.menu .divider{border-top:.1rem solid #eee;height:.1rem;margin:1rem 0}.menu .divider::after{content:attr(data-label);background-color:var(--cirrus-bg);color:#b7b7b7;display:inline-block;padding:0 .7rem;margin:.5rem;font-size:.7rem;-webkit-transform:translateY(-1.1rem);transform:translateY(-1.1rem)}.list-dropdown{display:inline-block;position:relative}.list-dropdown .menu{position:absolute;top:75%;left:0;-webkit-animation:slide-down var(--animation-duration) ease 1;animation:slide-down .1s ease 1;background-color:var(--cirrus-bg);border-radius:.2rem;box-shadow:0 .1rem .4rem rgba(69,77,93,0.3);margin:0;opacity:0;min-width:15rem;padding:.25rem .5rem;-webkit-transform:translateY(0.5rem);transform:translateY(0.5rem);z-index:10;pointer-events:none;overflow:hidden;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.list-dropdown.dropdown-right .menu{left:auto;right:0}.list-dropdown.shown .menu,.list-dropdown .btn-dropdown:focus+.menu,.list-dropdown .menu:hover{display:block;opacity:1;top:100%;z-index:100;pointer-events:auto;height:auto;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.list-dropdown .btn-group .btn-dropdown:nth-last-child(2){border-bottom-right-radius:3px;border-top-right-radius:3px}.tree{margin:0}.tree .tree-item .tree-item-header{display:block;padding:.25rem .5rem;cursor:pointer;font-size:.95rem;font-weight:600}.tree .tree-item .tree-item-header .icon{-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.tree .tree-item input:checked ~ .tree-item-body{max-height:100vh}.tree .tree-item input:checked ~ .tree-item-header .icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.tree .tree-item .tree-item-body{max-height:0;margin-left:1.5rem;overflow:hidden;-webkit-transition:all var(--animation-duration);transition:all var(--animation-duration)}.tree-nav-body{display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.tree-nav{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:1;flex-shrink:1;padding:2rem 1rem 2rem 2rem;min-width:15rem;height:100vh;overflow:auto}.tree-nav .tree-nav-container{overflow-y:auto;top:4rem;bottom:1rem}.tree-nav+.tree-nav-close{display:none}.tree-nav+.tree-nav-content{max-width:100%;padding:2rem;-ms-flex:1 0 auto;-webkit-box-flex:1;flex:1 0 auto;overflow:auto;margin:0}.tree-nav-content{width:100%;overflow:auto;margin:0;padding:2rem}.tree-item-body .menu .menu-item a{font-weight:400}@media screen and (max-width:768px){.tree-nav{height:100%;left:0;overflow-y:auto;padding:3rem 1.5rem;position:fixed;top:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);transition:transform var(--animation-duration) ease,-webkit-transform var(--animation-duration) ease;-webkit-transition:-webkit-transform var(--animation-duration) ease;transition:transform var(--animation-duration) ease;transition:-webkit-transform var(--animation-duration) ease;z-index:400}.tree-nav:target{-webkit-transform:translateX(0);transform:translateX(0);transition:transform var(--animation-duration) ease,-webkit-transform var(--animation-duration) ease;-webkit-transition:-webkit-transform var(--animation-duration) ease;transition:-webkit-transform var(--animation-duration) ease;transition:transform var(--animation-duration) ease}.tree-nav .tree-nav-close{background-color:rgba(0,0,0,0.15);display:none;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}.tree-nav:target+.tree-nav-close{display:block;background-color:rgba(0,0,0,0.15);height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:300}.tree-nav+.tree-nav-body{max-width:inherit}.tree-nav-header{position:fixed;top:0;left:0;right:0;background-color:rgba(248,249,250,0.8);height:3.5rem;padding:.75rem .5rem;text-align:center;z-index:300}.nav-item.has-sub .list-dropdown{width:100%}.nav-item.has-sub .list-dropdown .btn-group{width:100%}.nav-item.has-sub .list-dropdown .btn-group .btn-dropdown{flex-grow:0}.list-dropdown .btn-dropdown:focus+.menu{position:relative;width:100%}}video.video-fullscreen{position:absolute;height:100vh;object-fit:cover;width:100%;z-index:-1}.media-stretch{display:block;padding:0;overflow:hidden;width:100%;position:relative}.media-stretch::before{content:"";display:block;padding-bottom:56.25%}.media-stretch iframe,.media-stretch embed,.media-stretch object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.media-stretch video{height:auto;max-width:100%;width:100%}.media-stretch.rat-4-3::before{padding-bottom:75%}.media-stretch.rat-1-1::before{padding-bottom:100%}.fig{margin:0 0 .5rem 0}.fig .fig-caption{margin-top:1rem}.img-stretch{max-width:100%;height:auto;display:block}.img-cover{object-fit:cover}.img-contain{object-fit:contain}.m-0{margin:0 !important}.m-1{margin:calc(var(--space-size) * 1) !important}.m-2{margin:calc(var(--space-size) * 2) !important}.m-3{margin:calc(var(--space-size) * 3) !important}.m-4{margin:calc(var(--space-size) * 4) !important}.m-5{margin:calc(var(--space-size) * 5) !important}.mt-0,.my-0{margin-top:0 !important}.mt-1,.my-1{margin-top:calc(var(--space-size) * 1) !important}.mt-2,.my-2{margin-top:calc(var(--space-size) * 2) !important}.mt-3,.my-3{margin-top:calc(var(--space-size) * 3) !important}.mt-4,.my-4{margin-top:calc(var(--space-size) * 4) !important}.mt-5,.my-5{margin-top:calc(var(--space-size) * 5) !important}.mb-0,.my-0{margin-bottom:0 !important}.mb-1,.my-1{margin-bottom:calc(var(--space-size) * 1) !important}.mb-2,.my-2{margin-bottom:calc(var(--space-size) * 2) !important}.mb-3,.my-3{margin-bottom:calc(var(--space-size) * 3) !important}.mb-4,.my-4{margin-bottom:calc(var(--space-size) * 4) !important}.mb-5,.my-5{margin-bottom:calc(var(--space-size) * 5) !important}.ml-0,.mx-0{margin-left:0 !important}.ml-1,.mx-1{margin-left:calc(var(--space-size) * 1) !important}.ml-2,.mx-2{margin-left:calc(var(--space-size) * 2) !important}.ml-3,.mx-3{margin-left:calc(var(--space-size) * 3) !important}.ml-4,.mx-4{margin-left:calc(var(--space-size) * 4) !important}.ml-5,.mx-5{margin-left:calc(var(--space-size) * 5) !important}.mr-0,.mx-0{margin-right:0 !important}.mr-1,.mx-1{margin-right:calc(var(--space-size) * 1) !important}.mr-2,.mx-2{margin-right:calc(var(--space-size) * 2) !important}.mr-3,.mx-3{margin-right:calc(var(--space-size) * 3) !important}.mr-4,.mx-4{margin-right:calc(var(--space-size) * 4) !important}.mr-5,.mx-5{margin-right:calc(var(--space-size) * 5) !important}.p-0{padding:0 !important}.p-1{padding:calc(var(--space-size) * 1) !important}.p-2{padding:calc(var(--space-size) * 2) !important}.p-3{padding:calc(var(--space-size) * 3) !important}.p-4{padding:calc(var(--space-size) * 4) !important}.p-5{padding:calc(var(--space-size) * 5) !important}.pt-0,.py-0{padding-top:0 !important}.pt-1,.py-1{padding-top:calc(var(--space-size) * 1) !important}.pt-2,.py-2{padding-top:calc(var(--space-size) * 2) !important}.pt-3,.py-3{padding-top:calc(var(--space-size) * 3) !important}.pt-4,.py-4{padding-top:calc(var(--space-size) * 4) !important}.pt-5,.py-5{padding-top:calc(var(--space-size) * 5) !important}.pb-0,.py-0{padding-bottom:0 !important}.pb-1,.py-1{padding-bottom:calc(var(--space-size) * 1) !important}.pb-2,.py-2{padding-bottom:calc(var(--space-size) * 2) !important}.pb-3,.py-3{padding-bottom:calc(var(--space-size) * 3) !important}.pb-4,.py-4{padding-bottom:calc(var(--space-size) * 4) !important}.pb-5,.py-5{padding-bottom:calc(var(--space-size) * 5) !important}.pl-0,.px-0{padding-left:0 !important}.pl-1,.px-1{padding-left:calc(var(--space-size) * 1) !important}.pl-2,.px-2{padding-left:calc(var(--space-size) * 2) !important}.pl-3,.px-3{padding-left:calc(var(--space-size) * 3) !important}.pl-4,.px-4{padding-left:calc(var(--space-size) * 4) !important}.pl-5,.px-5{padding-left:calc(var(--space-size) * 5) !important}.pr-0,.px-0{padding-right:0 !important}.pr-1,.px-1{padding-right:calc(var(--space-size) * 1) !important}.pr-2,.px-2{padding-right:calc(var(--space-size) * 2) !important}.pr-3,.px-3{padding-right:calc(var(--space-size) * 3) !important}.pr-4,.px-4{padding-right:calc(var(--space-size) * 4) !important}.pr-5,.px-5{padding-right:calc(var(--space-size) * 5) !important}.table{margin-bottom:1.5rem;width:100%;border-collapse:collapse;border-spacing:0;text-align:center}.table td,.table th{border:1px solid rgba(219,219,219,0.5);border-width:0 0 1px;padding:.75rem;vertical-align:top;text-align:inherit;margin:0}.table tr{transition:all .3s}.table caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}.table tr:hover,.table.striped tbody tr:nth-child(even):hover{background-color:rgba(216,216,216,0.15)}.table thead th,.table thead{border-bottom:2px solid rgba(219,219,219,0.49)}.table.bordered thead th,.table.bordered thead{border-bottom:1px solid rgba(219,219,219,0.5)}.table thead th,.table tfoot th{padding:1rem}.table tfoot th{border-top:2px solid rgba(219,219,219,0.5);border-bottom:0}.table.bordered td,.table.bordered th{border:1px solid rgba(219,219,219,0.5)}.table.bordered thead td,.table.borderd thead{border-width:1px}.table.striped tbody tr:nth-child(even){background-color:rgba(0,0,0,0.05)}.table.small td,.table.small th{padding:.25rem .75rem}.table.fixed-head thead{position:relative;display:block}.table.fixed-head tbody{height:200px;display:block;overflow:auto}.table.fixed-head tr{display:table;width:100%}.table tr.selected{background-color:var(--cirrus-primary);color:#fff}.table.borderless thead th,.table.borderless th,.table.borderless td{border:0}:root{--cirrus-fg:#374054;--cirrus-bg:#fff;--cirrus-primary:#f03d4d;--cirrus-primary-rgb:240,61,77;--cirrus-primary-light:#ffdadd;--cirrus-accent-hover:#d62939;--cirrus-accent-border:#c21b2b;--cirrus-light:#f6f9fc;--cirrus-light-gray:#f8f9fa;--cirrus-gray:#d5d7dc;--cirrus-dark-gray:#909090;--cirrus-dark:#363636;--cirrus-link:#5e5cc7;--cirrus-link-dark:#4643e2;--cirrus-info:#2972fa;--cirrus-success:#0dd157;--cirrus-success-rgb:13,209,87;--cirrus-warning:#fab633;--cirrus-danger:#fb4143;--cirrus-light-hover:#d0e0ef;--cirrus-dark-hover:#505050;--cirrus-info-hover:#1062f9;--cirrus-link-hover:#f8f7ff;--cirrus-success-hover:#0cb94d;--cirrus-warning-hover:#f9ad1a;--cirrus-danger-hover:#eb0507;--cirrus-select-bg:rgba(0,161,255,0.2);--cirrus-code-bg:var(--cirrus-primary-light);--cirrus-code-fg:#dc4753;--cirrus-form-group-bg:var(--cirrus-light-gray);--cirrus-form-group-fg:var(--cirrus-dark-gray);--toast-primary-bg:rgba(49,59,80,0.9);--animation-duration:.2s;--focus-opacity:.55;--space-size:.5rem;--font-size-xs:.7rem;--font-size-s:.85rem;--font-size-m:1rem;--font-size-l:1.35rem;--font-size-xl:1.75rem}.u-hidden{display:none !important}.u-block{display:block !important}.u-inline{display:inline !important}.u-inline-block{display:inline-block !important}.u-flex{display:flex !important}.u-flex.u-flex-column{flex-direction:column !important}.u-flex.u-flex-row{flex-direction:row !important}.u-inline-flex{display:-ms-inline-flexbox !important;display:inline-flex !important}.u-table{display:table !important}.u-table-row{display:table-row !important}.u-position-static{position:static !important}.u-position-relative{position:static !important}.u-position-absolute{position:absolute !important}.u-position-fixed{position:fixed !important}.u-position-sticky{position:sticky !important}.u-clearfix:after{clear:both !important;content:" ";display:table !important}.u-clear-left{clear:left !important}.u-clear-right{clear:right !important}.u-clear-both{clear:both !important}.u-pull-left{float:left !important}.u-pull-right{float:right !important}.u-text-center{text-align:center !important}.u-text-justify{text-align:justify !important}.u-text-ellipsis{text-overflow:ellipsis}.u-text-break{hyphens:auto;word-break:break-word;word-wrap:break-word}.u-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 auto;flex-wrap:wrap}.u-center-alt,.u-center-alt:hover,.u-center-alt:active{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.u-vertical-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;align-items:center;vertical-align:middle}.u-horizontal-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.u-overlay{bottom:0;left:0;right:0;top:0;position:absolute}.u-hide-overflow{overflow:hidden !important;overflow-x:hidden;overflow-y:hidden}.u-text-center{text-align:center !important}.u-text-left{text-align:left !important}.u-text-right{text-align:right !important}.u-hide{display:none !important}.u-disabled{cursor:not-allowed !important}.u-unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.u-margin-auto{margin:0 auto !important}.u-round{border-radius:.1rem}.u-circle{border-radius:50%}.u-no-shadow{box-shadow:none}@media screen and (min-width:769px){.level,.level-left,.level-right{display:-webkit-box;display:-ms-flexbox;display:flex}}@media screen and (max-width:768px){.u-hide-mobile{display:none !important}}@media screen and (min-width:768px){.u-hide-tablet{display:none !important}}@media screen and (min-width:769px) and (max-width:1023px){.u-hide-tablet-only{display:none !important}}@media screen and (min-width:1024px){.u-hide-desktop{display:none !important}}@-webkit-keyframes loading{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes loading{from{transform:rotate(0)}to{transform:rotate(359deg)}}.hover-grow{transition-duration:.32s}.hover-grow:hover{transform:scale(1.1);transition-duration:.08s}.animated.loading{display:block;position:relative}.animated.loading::after{border:2px solid #ccc;border-radius:50%;border-right-color:transparent;border-top-color:transparent;content:"";display:block;height:1rem;width:1rem;left:calc(50% -(1em / 1.25));top:calc(50% -(1em / 1.35));position:absolute;-webkit-animation:loading 500ms infinite linear;animation:loading 500ms infinite linear}.animated.loading.loading-white::after{border-left-color:#fff;border-bottom-color:#fff}.animated.loading.loading-left::after{left:2rem;right:auto}.animated.loading.loading-left{padding-left:4rem}.animated.loading.loading-right::after{left:auto;right:2rem}.animated.loading.loading-right{padding-right:4rem}.animated.loading.hide-text{color:transparent !important}@-webkit-keyframes pound{to{transform:scale(1.1)}}@keyframes pound{to{transform:scale(1.1)}}.animated.pulse{animation:pound .35s infinite alternate;-webkit-animation:pound .35s infinite alternate;vertical-align:baseline}@-webkit-keyframes bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{from,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.animated.bounce{animation-name:bounce;-webkit-animation-name:bounce;transform-origin:center bottom;-webkit-transform-origin:center bottom}@keyframes bounceIn{from,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}0{opacity:0;transform:scale3d(0.3,0.3,0.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(0.9,0.9,0.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(0.97,0.97,0.97)}to{opacity:1;transform:scale3d(1,1,1)}}.animated.bounceIn{animation-name:bounceIn}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.animated.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.infinite.alternate{animation-direction:alternate}.animated.paused{-webkit-animation-play-state:paused !important;animation-play-state:paused !important}.avatar{border-radius:50%;position:relative;display:block;margin:auto;font-size:1rem;font-weight:lighter;width:3.2rem;height:3.2rem;background-color:var(--cirrus-primary);overflow:hidden}.avatar::before{content:attr(data-text);color:#fff;left:50%;top:50%;position:absolute;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.avatar.avatar--xsmall{font-size:.8rem;width:1.6rem;height:1.6rem}.avatar.avatar--small{font-size:1rem;height:2.4rem;width:2.4rem}.avatar.avatar--large{font-size:2rem;height:4.8rem;width:4.8rem}.avatar.avatar--xlarge{font-size:2.6rem;height:6.4rem;width:6.4rem}.avatar img.padded{padding:.5rem;width:100%}.card{background-color:#fff;border-radius:5px;position:relative;overflow:hidden;transition:all .3s;backface-visibility:hidden;box-shadow:0 5px 12px 0 rgba(42,51,83,0.12),0 0 5px rgba(0,0,0,0.06);margin-bottom:1rem}.card:hover{transition:all .3s;box-shadow:0 8px 20px 0 rgba(42,51,83,0.12),0 5px 5px rgba(0,0,0,0.06)}.slide-up:hover .card-image{transform:translateY(-40px)}.card:hover .card-image::after{opacity:0}.card-image{bottom:0;left:0;position:absolute;right:0;top:0;border-radius:5px 5px 0 0;background-size:cover;background-repeat:no-repeat;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card-image::after{content:'';display:block;position:absolute;background-color:rgba(0,0,0,0.1);top:0;left:0;right:0;-webkit-transition:all 500ms;transition:all 500ms;bottom:0}.card-container{display:block;position:relative;height:40%;min-height:332px}.card .title-container .title,.card .title-container .subtitle{color:#fff;margin:1rem auto}.card .title-container{position:absolute;bottom:1rem;width:100%;padding:0 1rem}.card .title-container .title{font-weight:300;font-size:1.5rem;margin-bottom:0;text-shadow:0 1px 2px rgba(0,0,0,0.25)}.card.u-flex .content{flex-grow:1}.card .action-bar{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:.5rem;border-top:1px solid #e0e0e0;box-sizing:border-box;-webkit-transition:left 200ms cubic-bezier(0.075,0.82,0.165,1);transition:left 200ms cubic-bezier(0.075,0.82,0.165,1)}.card .action-bar button,.card .action-bar .btn,.card .action-bar [type='submit']{margin:0 .5rem}.card .action-bar+.card-footer{padding:1rem 0;border-top:1px solid #e0e0e0}.card button,.card .btn{display:inline-block;border-color:transparent}.card button:hover,.card .btn:hover{-webkit-transform:none;transform:none}.card button:focus,.card .btn:focus{-webkit-transform:none;transform:none}.mobile-title{position:absolute;left:0;background-color:var(--cirrus-bg);-moz-transition:.3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:.3s ease-in-out;width:100%;padding:2rem 0 0 0;backface-visibility:hidden}.card:hover .mobile-title{margin-top:-7rem;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card:hover .card-body{opacity:1;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}.card-body{opacity:0;-webkit-transition:all var(--animation-duration) ease-in-out;-moz-transition:all var(--animation-duration) ease-in-out;-ms-transition:all var(--animation-duration) ease-in-out;transition:all var(--animation-duration) ease-in-out}.card-footer{position:relative;font-size:.75rem;color:#9fa5a8}.card p{margin:1rem 0}.card-head{align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;display:flex;display:-webkit-box;display:-ms-flexbox;border-bottom:1px solid #e0e0e0}.card-head-title{align-items:center;-webkit-box-align:center;-ms-flex-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-weight:700;padding:0 1rem}.form-ext-control{display:block;min-height:1.5rem;padding-left:1.5rem;position:relative}.form-ext-input{opacity:0;position:absolute;z-index:-1}.form-ext-input:disabled ~ .form-ext-label{opacity:.4}.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label:before{background-color:var(--cirrus-success)}.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label{color:var(--cirrus-success)}.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label:before{background-color:var(--cirrus-danger)}.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label{color:var(--cirrus-danger)}.form-ext-label{margin-bottom:0;position:relative}.form-ext-label:before,.form-ext-label:after{content:"";display:block;height:1rem;left:-1.5rem;position:absolute;top:.3rem;transition:all var(--animation-duration);width:1rem}.form-ext-label:before{background-color:var(--cirrus-light);border:1px solid #d5d7dc;border-radius:.25rem;pointer-events:none;user-select:none;box-sizing:border-box}.form-ext-label:after{background-position:center;background-repeat:no-repeat;background-size:50% 50%}.form-ext-control .form-ext-input:checked ~ .form-ext-label:before{background-color:var(--cirrus-primary)}.form-ext-control.form-ext-checkbox .form-ext-input:checked ~ .form-ext-label:after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='0088'%3E%3Cpathfill='%23fff'd='M6.564.75l-3.593.612-1.538-1.55L04.262.9747.2582.193z'/%3E%3C/svg%3E")}.form-ext-checkbox .form-ext-label:before{border-radius:.25rem}.form-ext-control.form-ext-radio .form-ext-input:checked ~ .form-ext-label:after{background-image:url("data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='-4-488'%3E%3Ccircler='3'fill='%23fff'/%3E%3C/svg%3E")}.form-ext-radio .form-ext-label:before{border-radius:50%}.form-ext-toggle{cursor:pointer;position:relative}.form-ext-toggle input[type="checkbox"],.form-ext-toggle input[type="radio"]{opacity:0;position:absolute;z-index:-1}.form-ext-toggle__label{align-items:center;display:flex;justify-content:space-between}.form-ext-toggle__toggler{border:1px solid var(--cirrus-gray);border-radius:6.25rem;color:var(--cirrus-gray);display:block;font-size:9px;height:1.5rem;position:relative;width:3rem}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler{background-color:var(--cirrus-primary);border-color:var(--cirrus-primary);color:#fff;position:relative;transition:all .4s ease}.form-ext-toggle i{display:inline-block}.form-ext-input:disabled ~ .form-ext-toggle__toggler{opacity:.5}.form-ext-toggle__toggler i::before,.form-ext-toggle__toggler i::after{content:"";display:block;position:absolute}.form-ext-toggle__toggler i::before{content:attr(data-uncheck-icon);padding:2px 7px;line-height:18px;text-align:right;top:0;width:65%;font-size:12px}.form-ext-toggle__toggler i::after{background-color:var(--cirrus-gray);border-radius:50%;height:16px;left:4px;width:16px;transform:translateY(-50%);transition:left var(--animation-duration) ease;text-align:left}.form-ext-control .form-ext-input:checked ~ .form-ext-label:before{border:0}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler i::after{background-color:#fff;left:calc(100% - 20px)}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler i::before,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler i::before,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler i::before,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler i::before{color:#fff;content:attr(data-check-icon);text-align:left}.form-ext-toggle input[type="checkbox"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="checkbox"]:checked+* .form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+.form-ext-toggle__toggler i::after,.form-ext-toggle input[type="radio"]:checked+* .form-ext-toggle__toggler i::after{background-color:#fff;left:calc(100% - 20px)}.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked+* .form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked+* .form-ext-toggle__toggler{background-color:var(--cirrus-danger);border-color:var(--cirrus-danger)}.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler{border-color:var(--cirrus-danger);color:var(--cirrus-danger)}.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler i::after{background-color:var(--cirrus-danger)}.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked+* .form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked+.form-ext-toggle__toggler,.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked+* .form-ext-toggle__toggler{background-color:var(--cirrus-success);border-color:var(--cirrus-success)}.form-ext-toggle--success .form-ext-toggle__toggler{border-color:var(--cirrus-success);color:var(--cirrus-success)}.form-ext-toggle--success .form-ext-toggle__toggler i::after{background-color:var(--cirrus-success)}.form-ext-toggle .form-ext-input:focus+.form-ext-toggle__toggler,.form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before{box-shadow:0 0 0 .2rem rgba(var(--cirrus-primary-rgb),var(--focus-opacity)),inset 0 1px 8px rgba(0,0,0,0.07)}.form-ext-toggle.form-ext-toggle--success .form-ext-input:focus+.form-ext-toggle__toggler{box-shadow:0 0 0 .2rem rgba(var(--cirrus-success-rgb),var(--focus-opacity)),inset 0 1px 8px rgba(34,197,127,0.13)}.form-ext-input.form-ext-input--success:focus ~ .form-ext-label:before{border-color:inherit;box-shadow:0 0 0 .2rem rgba(var(--cirrus-success-rgb),var(--focus-opacity)),inset 0 1px 8px rgba(0,0,0,0.07)}:root{--gap-0:0;--gap-1:.25rem;--gap-2:.5rem;--gap-3:1rem;--gap-4:1.25rem;--gap-5:1.5rem;--gap-6:3rem;--gap-7:6rem;--gap-8:9rem;--gap-9:12rem}.grid{--grid-gap:--gap-2;--grid-template-column:repeat(12,minmax(0,1fr));--grid-column-start:auto;--grid-column-end:auto;--grid-row-start:auto;--grid-row-end:auto;display:grid;grid-gap:var(--grid-gap);grid-template-columns:var(--grid-template-column)}.grid .c{grid-column-start:var(--grid-column-start);grid-column-end:var(--grid-column-end)}.grid.grid-cols-1{--grid-template-column:repeat(1,minmax(0,1fr))}.grid.grid-cols-2{--grid-template-column:repeat(2,minmax(0,1fr))}.grid.grid-cols-3{--grid-template-column:repeat(3,minmax(0,1fr))}.grid.grid-cols-4{--grid-template-column:repeat(4,minmax(0,1fr))}.grid.grid-cols-5{--grid-template-column:repeat(5,minmax(0,1fr))}.grid.grid-cols-6{--grid-template-column:repeat(6,minmax(0,1fr))}.grid.grid-cols-7{--grid-template-column:repeat(7,minmax(0,1fr))}.grid.grid-cols-8{--grid-template-column:repeat(8,minmax(0,1fr))}.grid.grid-cols-9{--grid-template-column:repeat(9,minmax(0,1fr))}.grid.grid-cols-10{--grid-template-column:repeat(10,minmax(0,1fr))}.grid.grid-cols-11{--grid-template-column:repeat(11,minmax(0,1fr))}.grid.grid-cols-12{--grid-template-column:repeat(12,minmax(0,1fr))}.grid.grid-gap-0{--grid-gap:var(--gap-0)}.grid.grid-gap-1{--grid-gap:var(--gap-1)}.grid.grid-gap-2{--grid-gap:var(--gap-2)}.grid.grid-gap-3{--grid-gap:var(--gap-3)}.grid.grid-gap-4{--grid-gap:var(--gap-4)}.grid.grid-gap-5{--grid-gap:var(--gap-5)}.grid.grid-gap-6{--grid-gap:var(--gap-6)}.grid.grid-gap-7{--grid-gap:var(--gap-7)}.grid.grid-gap-8{--grid-gap:var(--gap-8)}.grid.grid-gap-9{--grid-gap:var(--gap-9)}.grid .grid-c-1{grid-column:span 1}.grid .grid-c-2{grid-column:span 2}.grid .grid-c-3{grid-column:span 3}.grid .grid-c-4{grid-column:span 4}.grid .grid-c-5{grid-column:span 5}.grid .grid-c-6{grid-column:span 6}.grid .grid-c-7{grid-column:span 7}.grid .grid-c-8{grid-column:span 8}.grid .grid-c-9{grid-column:span 9}.grid .grid-c-10{grid-column:span 10}.grid .grid-c-11{grid-column:span 11}.grid .grid-c-12{grid-column:span 12}.grid .grid-r-1{grid-row:span 1}.grid .grid-r-2{grid-row:span 2}.grid .grid-r-3{grid-row:span 3}.grid .grid-r-4{grid-row:span 4}.grid .grid-r-5{grid-row:span 5}.grid .grid-r-6{grid-row:span 6}.grid .grid-r-7{grid-row:span 7}.grid .grid-r-8{grid-row:span 8}.grid .grid-r-9{grid-row:span 9}.grid .grid-r-10{grid-row:span 10}.grid .grid-r-11{grid-row:span 11}.grid .grid-r-12{grid-row:span 12}.grid .grid-cs-1{grid-column-start:1}.grid .grid-cs-2{grid-column-start:2}.grid .grid-cs-3{grid-column-start:3}.grid .grid-cs-4{grid-column-start:4}.grid .grid-cs-5{grid-column-start:5}.grid .grid-cs-6{grid-column-start:6}.grid .grid-cs-7{grid-column-start:7}.grid .grid-cs-8{grid-column-start:8}.grid .grid-cs-9{grid-column-start:9}.grid .grid-cs-10{grid-column-start:10}.grid .grid-cs-11{grid-column-start:11}.grid .grid-cs-12{grid-column-start:12}.grid .grid-cs-end{grid-column-end:-1}.grid .grid-ce-1{grid-column-end:2}.grid .grid-ce-2{grid-column-end:3}.grid .grid-ce-3{grid-column-end:4}.grid .grid-ce-4{grid-column-end:5}.grid .grid-ce-5{grid-column-end:6}.grid .grid-ce-6{grid-column-end:7}.grid .grid-ce-7{grid-column-end:8}.grid .grid-ce-8{grid-column-end:9}.grid .grid-ce-9{grid-column-end:10}.grid .grid-ce-10{grid-column-end:11}.grid .grid-ce-11{grid-column-end:12}.grid .grid-ce-12{grid-column-end:13}.grid .grid-rs-1{grid-row-start:1}.grid .grid-rs-2{grid-row-start:2}.grid .grid-rs-3{grid-row-start:3}.grid .grid-rs-4{grid-row-start:4}.grid .grid-rs-5{grid-row-start:5}.grid .grid-rs-6{grid-row-start:6}.grid .grid-rs-7{grid-row-start:7}.grid .grid-rs-8{grid-row-start:8}.grid .grid-rs-9{grid-row-start:9}.grid .grid-rs-10{grid-row-start:10}.grid .grid-rs-11{grid-row-start:11}.grid .grid-rs-12{grid-row-start:12}.grid .grid-rs-end{grid-row-end:-1}.grid .grid-re-1{grid-row-end:2}.grid .grid-re-2{grid-row-end:3}.grid .grid-re-3{grid-row-end:4}.grid .grid-re-4{grid-row-end:5}.grid .grid-re-5{grid-row-end:6}.grid .grid-re-6{grid-row-end:7}.grid .grid-re-7{grid-row-end:8}.grid .grid-re-8{grid-row-end:9}.grid .grid-re-9{grid-row-end:10}.grid .grid-re-10{grid-row-end:11}.grid .grid-re-11{grid-row-end:12}.grid .grid-re-12{grid-row-end:13}@media screen and (max-width:768px){.grid{--grid-template-column:repeat(1,minmax(0,1fr))}}.u,.utb{display:inline;position:relative}.u::after{content:"";transition:all .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;height:.1rem;width:0;background:var(--cirrus-link-dark);bottom:-0.25em}.u:hover::after{width:100%}.u-LR::after{left:0}.u-RL::after{right:0}.u-RL:hover::after{width:100%}.u-C::after{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.utb::before,.utb::after{content:"";transition:all .3s;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;height:.1rem;width:0;background:var(--cirrus-link-dark)}.utb::before{top:-0.25em}.utb::after{bottom:-0.25em}.utb:hover::before,.utb:hover::after{width:100%}.utb-LR::before,.utb-LR::after{left:0}.utb-RL::before,.utb-RL::after{right:0}.utb-C::before,.utb-C::after{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.utb-OLR::before{left:0}.utb-OLR::after{right:0}.utb-ORL::before{right:0}.utb-ORL::after{left:0}.usquare{margin-left:.4rem;position:relative;overflow:hidden}.usquare a{position:static;padding:.2rem .4rem}.usquare::before,.usquare::after{content:"";transition:.25s all ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;width:2px;width:.1 rem;height:0;background:var(--cirrus-link-dark)}.usquare::before{left:0;bottom:-0.2rem}.usquare.delay::before{transition-delay:.6s}.usquare::after{right:0;top:-0.2rem}.usquare.delay::after{transition-delay:var(--animation-duration)}.usquare a::before{left:0;transition:.25s all ease}.usquare a::after{right:0;transition:.25s all ease}.usquare.delay a::after{transition:.25s all ease .4s}.usquare:hover::before,.usquare:hover::after{height:calc(100%+0.4rem)}.usquare:hover a::before,.usquare:hover a::after{width:100%}.modal{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;padding:1rem;display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none}.modal:target,.modal.shown{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1;z-index:999;pointer-events:auto}.modal:target .modal-overlay,.modal.shown .modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:block;background-color:rgba(54,59,68,0.5)}.modal-content{background-color:var(--cirrus-bg);padding:0;display:block;border-radius:3px;box-shadow:0 .4rem 1rem rgba(54,59,68,0.3);z-index:1;color:var(--cirrus-fg);max-width:40rem}.modal.modal-small .modal-content{max-width:20rem}.modal.modal-large .modal-content{max-width:60rem}.modal-content h1,.modal-content h2,.modal-content h3,.modal-content h4,.modal-content h5,.modal-content h6{color:var(--cirrus-fg)}.modal:target .modal-container,.modal.shown .modal-container{-webkit-animation:slide-down var(--animation-duration) ease 1;animation:slide-down var(--animation-duration) ease 1;z-index:1}.modal-content.small{max-width:32rem}.modal-content .modal-header{padding:1rem 3rem}.modal-content .modal-header .modal-title{font-weight:bolder;font-size:1.4rem}.modal-content .modal-body{padding:1rem 3rem;overflow-y:auto;max-height:50vh;position:relative}.modal-content .modal-footer{padding:1rem 3rem;text-align:right}.modal.modal-animated--dropdown{-webkit-animation:slide-down var(--animation-duration) ease 1;animation:slide-down var(--animation-duration) ease 1}.modal.modal-animated--zoom-in,.modal.modal-animated--zoom-out{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:0;transition:300ms all ease}.modal:target.modal-animated--zoom-in,.modal:target.modal-animated--zoom-out{opacity:1;transition:300ms all ease}.modal.modal-animated--zoom-in .modal-content{transform:scale(0.8);transition:300ms all ease}.modal:target.modal-animated--zoom-in .modal-content,.modal:target.modal-animated--zoom-out .modal-content{transform:scale(1);transition:300ms all ease}.modal.modal-animated--zoom-out .modal-content{transform:scale(1.2);transition:300ms all ease}@-webkit-keyframes slide-down{0{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slide-down{0{opacity:0;-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@media only screen and (max-width:768px){.modal-content{max-width:90%}}.btn.btn--pilled,[class^="btn-"].btn--pilled,[class*=" btn-"].btn--pilled{border-radius:6.25rem;padding-left:1.25rem;padding-right:1.25rem}.btn.btn--circle,[class^="btn-"].btn--circle,[class*=" btn-"].btn--circle{border-radius:100%;min-width:60px;overflow:hidden;padding:0;text-align:center}.btn.btn--circle:before,[class^="btn-"].btn--circle:before,[class*=" btn-"].btn--circle:before{content:'';display:inline-block;vertical-align:middle;padding-top:100%}.btn.btn--circle *,[class^="btn-"].btn--circle *,[class*=" btn-"].btn--circle *{max-width:90%;vertical-align:middle;white-space:pre-wrap}.input-control--pilled{border-radius:6.25rem !important}.bg-primary{background-color:var(--cirrus-primary) !important}.text-primary{color:var(--cirrus-primary) !important}.bg-success{background-color:var(--cirrus-success) !important}.text-success{color:var(--cirrus-success) !important}.bg-warning{background-color:var(--cirrus-warning) !important}.text-warning{color:var(--cirrus-warning) !important}.bg-danger{background-color:var(--cirrus-danger) !important}.text-danger{color:var(--cirrus-danger) !important}.bg-light{background-color:var(--cirrus-light) !important}.text-light{color:var(--cirrus-light) !important}.bg-dark{background-color:var(--cirrus-dark) !important}.text-dark{color:var(--cirrus-dark) !important}.bg-link{background-color:var(--cirrus-link) !important}.text-link{color:var(--cirrus-link) !important}.bg-link-dark{background-color:var(--cirrus-link-dark) !important}.text-link-dark{color:var(--cirrus-link-dark) !important}.bg-info{background-color:var(--cirrus-info) !important}.text-info{color:var(--cirrus-info) !important}.pagination{display:flex;display:-ms-flexbox}.pagination-item{-webkit-flex:1 0 50%;-ms-flex:1 0 50%;flex:1 0 50%}.pagination a{color:#5d6c7b}.pagination .pagination-item a[disabled]{cursor:pointer;opacity:.5;pointer-events:none;user-select:none}.pagination .pagination-item{margin:1rem .1rem;transition:all .3s}.pagination .pagination-item.pagination-next{text-align:right}.pagination .pagination-item.pagination-prev{text-align:left}.pagination-item-subtitle{opacity:.7;margin:0}.pagination .pagination-item.short.selected{background-color:var(--cirrus-primary);color:#fff}.pagination .pagination-item.short.selected a{color:#fff}.pagination .pagination-item.short a{display:inline-block;line-height:1.25;padding:.5rem .75rem}.pagination .pagination-item.short{border-radius:.1rem;margin:.2rem 0;-webkit-flex:0;-ms-flex:0;flex:0}.pagination .pagination-item.short:first-child a{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.pagination .pagination-item.short:last-child a{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.pagination .pagination-item.short:not(.selected):hover{background-color:rgba(0,0,0,0.1)}.pagnation .pagination-item.ellipses{color:#b5b5b5;pointer-events:none}.pagination.pagination-bordered .pagination-item.short a{border:1px solid #dedede;border-radius:0;margin-left:-1px}.pagination .pagination-item:hover p,.pagination .pagination-item:hover h1,.pagination .pagination-item:hover h2,.pagination .pagination-item:hover h3,.pagination .pagination-item:hover h4,.pagination .pagination-item:hover h5,.pagination .pagination-item:hover h6,.pagination .pagination-item:not(.selected):hover *:not([disabled]):not(.ellipses){transition:all .3s;color:var(--cirrus-primary)}.placeholder{background-color:rgba(231,234,241,0.5);border-radius:3px;text-align:center;padding:3rem 2rem;color:#6c7892;display:block}.placeholder-icon{text-align:center}.placeholder .placeholder-title,.placeholder .placeholder-subtitle{margin:1rem auto}.placeholder .placeholder-subtitle{opacity:.7;margin:0}.placeholder .placeholder-commands{margin-top:1rem}.tab-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;overflow-x:auto;user-select:none;white-space:nowrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;font-size:var(--font-size-s)}.tab-container ul{display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:.5rem;border-bottom:1px solid #eee;flex-grow:1;list-style:none;padding-inline-start:0}.tab-container li{display:block;cursor:pointer;margin:0;text-align:center}.tab-container li a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:1px solid #eee;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:.5rem 1rem;transition:all .3s;color:var(--cirrus-fg);border-bottom-color:rgba(197,197,197,0.63);border-width:2px;margin-bottom:-1px;background-color:var(--cirrus-bg)}.tab-container li:hover a{border-bottom-color:rgba(240,61,77,0.6);transition:all .3s}.tab-container li.selected a{border-bottom-color:var(--cirrus-primary);color:var(--cirrus-primary);border-width:2px;transition:all .3s}.tab-container.tabs-center ul{justify-content:center;-webkit-box-pack:center;-ms-flex-pack:center}.tab-container.tabs-right ul{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.tab-container.tabs-depth ul{box-shadow:0 2px 3px rgba(10,10,10,0.1);border-bottom:0}.tab-container.tabs-classic ul{border-bottom-color:#dbdbdb;border-bottom-style:solid;border-bottom-width:1px;border-radius:3px 3px 0 0;transition:all .3s}.tab-container.tabs-classic li:not(.selected) a:hover{background-color:#f0f0f0;transition:all .3s}.tab-container.tabs-classic li a{border:1px solid transparent;border-bottom-color:#dbdbdb;border-radius:3px 3px 0 0;transition:all .3s}.tab-container.tabs-classic li.selected a{color:var(--cirrus-primary);border-color:#dbdbdb;border-bottom-color:transparent !important}.tab-container.tabs-fill li{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;flex-basis:0}.tab-container.tabs-fill ul{display:flex}.tab-container.tabs-xsmall{font-size:.6rem}.tab-container.tabs-small{font-size:.75rem}.tab-container.tabs-large{font-size:1.25rem}.tab-container.tabs-xlarge{font-size:1.5rem}.tab-container .icon:first-child{margin-right:.75rem}.tab-container .icon:last-child{margin-left:.75rem}.tag{align-items:center;background-color:var(--cirrus-light);border-radius:.25rem;color:var(--cirrus-fg);display:inline-flex;font-size:75%;line-height:1.5;min-height:1.5rem;padding:0 .5rem;white-space:nowrap}.tag.tag--large{font-size:120%}.tag.tag--xlarge{font-size:150%}.tag.tag--rounded{border-radius:290486px}.tag.tag--delete{background-color:rgba(10,10,10,0.2);border-radius:290486px;cursor:pointer;pointer-events:auto;display:inline-block;height:20px;max-height:20px;max-width:20px;min-height:20px;min-width:20px;position:relative}.tag--delete:hover{background-color:rgba(10,10,10,0.3)}.tag.tag--delete::before,.tag.tag--delete::after{background-color:var(--cirrus-light);content:"";display:block;left:50%;position:absolute;top:50%;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}.tag.tag--delete::before{height:1px;width:50%}.tag.tag--delete::after{height:50%;width:1px}.tag.tag--delete{margin-left:.25rem;margin-right:-0.375rem}.tag.tag--white{background-color:#fff;color:var(--cirrus-dark)}.tag.tag--black{background-color:#000;color:#fff}.tag.tag--dark{background-color:var(--cirrus-dark);color:#fff}.tag.tag--primary{background-color:var(--cirrus-primary);color:#fff}.tag.tag--link{background-color:var(--cirrus-link);color:#fff}.tag.tag--info{background-color:var(--cirrus-info);color:#fff}.tag.tag--success{background-color:var(--cirrus-success);color:#fff}.tag.tag--warning{background-color:var(--cirrus-warning);color:var(--cirrus-fg)}.tag.tag--danger{background-color:var(--cirrus-danger);color:#fff}.tag-container{display:flex;flex-wrap:wrap}.tag-container:not(:last-child){margin-bottom:1rem}.tag-container .tag{margin-bottom:.5rem}.tag-container .tag:not(:last-child){margin-right:.5rem}.tag-container.group-tags .tag{margin-right:0}.tag-container.group-tags .tag:first-child{border-radius:.25rem 0 0 .25rem}.tag-container.group-tags .tag:not(:first-child):not(:last-child){border-radius:0}.tag-container.group-tags .tag:last-child{border-radius:0 .25rem .25rem 0}.tag.tag__close-btn{padding:0;position:relative;width:1.5rem}.tag.tag__close-btn::before,.tag.tag__close-btn::after{background-color:var(--cirrus-fg);content:"";display:block;left:50%;top:50%;position:absolute;-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);-webkit-transform-origin:center center;transform-origin:center center}.tag.tag__close-btn::before{height:1px;width:50%}.tag.tag__close-btn::after{height:50%;width:1px}a.tag:hover{text-decoration:underline}.tag-container.tag-container--grouped .tag:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.tag-container.tag-container--grouped .tag:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.tag-container.tag-container--centered{justify-content:center}.tag-container.tag-container--centered .tag{margin:0 .25rem}.tag-container.tag-container--right{justify-content:flex-end}.tag-container.tag-container--right .tag:not(:first-child){margin-left:.5rem}.tag-container.tag-container--right .tag:not(:last-child){margin-right:0}.tile{display:flex;display:-ms-flexbox;align-content:space-between;-webkit-align-content:space-between;-ms-flex-line-pack:justify}.tile p{font-size:.95rem}.tile .tile__icon,.tile .tile__buttons{flex:0 0 auto;-webkit-flex:0 0 auto;-ms-flex:0 0 auto}.tile .tile__buttons button,.tile .tile__buttons .btn,.tile .tile__buttons [type="submit"]{display:inline-block;margin:.1rem}.tile .tile__container{flex:1 1 auto;-webkit-flex:1 1 auto;-ms-flex:1 1 auto}.tile .tile__container:not(:first-child){padding-left:1rem}.tile .tile__container:not(:last-child){padding-right:1rem}.tile .tile__title{line-height:2rem;font-weight:bolder;margin:.1rem auto}.tile .tile__subtitle{line-height:1.25rem;opacity:.7;margin:.1rem auto}.tile.tile--center{align-items:center;-webkit-align-items:center;-ms-flex-align:center}.tile.tile--center .tile__container{overflow:hidden}.tile.tile--center .tile__title,.tile.tile--center .tile__subtitle.no-wrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:0}.toast{display:block;width:100%;padding:.75rem 1.25rem;background-color:var(--toast-primary-bg);border:1px solid var(--toast-primary-bg);border-radius:2px;color:#fff;position:relative;margin:.5rem}.toast .toast__title{margin:0;margin-top:1rem}.toast p{margin:0}.toast.toast--translucent{opacity:.5}.toast.toast--translucent:hover{opacity:1}.toast .btn-close{position:absolute;right:1rem;top:1rem}.toast.toast--primary{background-color:var(--toast-primary-bg);border-color:var(--toast-primary-bg)}.toast.toast--success{background-color:var(--cirrus-success);border-color:var(--cirrus-success)}.toast.toast--warning{background-color:var(--cirrus-warning);border-color:var(--cirrus-warning)}.toast.toast--error{background-color:var(--cirrus-danger);border-color:var(--cirrus-danger)}.toast.toast--info{background-color:var(--cirrus-info);border-color:var(--cirrus-info)}.toast.toast--link{background-color:var(--cirrus-link);border-color:var(--cirrus-link)}.toast.toast--primary{background-color:var(--cirrus-primary);border-color:var(--cirrus-primary)}.toast a{color:var(--cirrus-light);transition:all .3s}.toast a:hover{opacity:.8;transition:all .3s}.tooltip{position:relative;overflow:visible;white-space:nowrap}.tooltip::after,.tooltip.tooltip--top::after{-webkit-appearance:none;-moz-appearance:none;position:absolute;color:#fff;font-size:.6rem;background-color:rgba(69,77,93,0.9);content:attr(data-tooltip);display:block;line-height:1rem;text-transform:none;overflow:hidden;padding:.4rem .8rem;opacity:0;text-overflow:ellipsis;max-width:15rem;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);transition:all var(--animation-duration) ease;z-index:200;pointer-events:none;bottom:100%;left:50%;border-radius:.2rem}.tooltip:focus::after,.tooltip:hover::after{opacity:1;-webkit-transform:translate(-50%,-0.5rem);transform:translate(-50%,-0.5rem);transition:all var(--animation-duration) ease}.tooltip.tooltip--top-left::after{-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}.tooltip.tooltip--top-left:hover::after,.tooltip.tooltip--top-left:focus::after{left:0;-webkit-transform:translate(-100%,-0.5rem);transform:translate(-100%,-0.5rem)}.tooltip.tooltip--top-right::after{left:auto;-webkit-transform:translate(15%,0);transform:translate(15%,0)}.tooltip.tooltip--top-right:hover::after,.tooltip.tooltip--top-right:focus::after{right:0;-webkit-transform:translate(100%,-0.5rem);transform:translate(100%,-0.5rem)}.tooltip.tooltip--bottom::after{top:100%;transform:translate(-50%,-1rem);-webkit-transform:translate(-50%,-1rem);-moz-transform:translate(-50%,-1rem);-ms-transform:translate(-50%,-1rem);bottom:auto}.tooltip.tooltip--bottom:hover::after,.tooltip.tooltip--bottom:focus::after{transform:translate(-50%,0.5rem);-webkit-transform:translate(-50%,0.5rem);-moz-transform:translate(-50%,0.5rem);-ms-transform:translate(-50%,0.5rem);bottom:auto}.tooltip.tooltip--bottom-left::after{top:100%;-webkit-transform:translate(-65%,-1rem);transform:translate(-65%,-1rem);bottom:auto}.tooltip.tooltip--bottom-left:hover::after,.tooltip.tooltip--bottom-left:focus::after{left:0;-webkit-transform:translate(-100%,0.5rem);transform:translate(-100%,0.5rem)}.tooltip.tooltip--bottom-right::after{left:auto;top:100%;-webkit-transform:translate(0,-1rem);transform:translate(0,-1rem);bottom:auto}.tooltip.tooltip--bottom-right:hover::after,.tooltip.tooltip--bottom-right:focus::after{right:0;-webkit-transform:translate(100%,0.5rem);transform:translate(100%,0.5rem)}.tooltip.tooltip--right::after{left:100%;bottom:50%;transform:translate(-1rem,50%);-webkit-transform:translate(-1rem,50%);-moz-transform:translate(-1rem,50%);-ms-transform:translate(-1rem,50%)}.tooltip.tooltip--right:hover::after,.tooltip.tooltip--right:focus::after{transform:translate(0.5rem,50%);-webkit-transform:translate(0.5rem,50%);-moz-transform:translate(0.5rem,50%);-ms-transform:translate(0.5rem,50%)}.tooltip.tooltip--left::after{right:100%;bottom:50%;left:auto;transform:translate(1rem,50%);-webkit-transform:translate(1rem,50%);-moz-transform:translate(1rem,50%);-ms-transform:translate(1rem,50%)}.tooltip.tooltip--left:hover::after,.tooltip.tooltip--left:focus::after{transform:translate(-0.5rem,50%);-webkit-transform:translate(-0.5rem,50%);-moz-transform:translate(-0.5rem,50%);-ms-transform:translate(-0.5rem,50%)} \ No newline at end of file diff --git a/min/holiday.min.css b/min/holiday.min.css index e793d2e..41acb82 100644 --- a/min/holiday.min.css +++ b/min/holiday.min.css @@ -1 +1 @@ -/*! modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,*::before,*::after{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}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:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}abbr{cursor:help}button,summary,[type="button"],[type="reset"],[type="submit"],[type="color"],[type="file"],[type="range"],label>[type="checkbox"]:enabled,label>[type="radio"]:enabled{cursor:pointer}[readonly]{cursor:default}:disabled,[type="checkbox"][id]:disabled+label[for],[type="radio"][id]:disabled+label[for]{cursor:not-allowed}:root{--max-body-width:48rem}html{height:100%;line-height:1.4}h1,h2,h3{line-height:1.15}body{margin:0 auto;width:calc(100% - 1rem);max-width:var(--max-body-width);overflow-wrap:break-word;display:flex;flex-direction:column;min-height:100%}main{flex-grow:1}img{max-width:100%;max-height:100vh}table{display:block;overflow-x:auto}pre{overflow-x:auto;line-height:1.15}code{padding:.25rem}pre code{display:inline-block;min-width:100%;padding:1rem}kbd{padding:0 .25rem;min-width:1.5rem;min-height:1.5rem;display:inline-flex;align-items:center;justify-content:center;margin:0 .1rem;max-width:100%;overflow:hidden}kbd kbd{margin:0;padding:0;min-width:unset;min-height:unset}kbd kbd:not(:first-child){padding-left:.25rem}kbd kbd:not(:last-child){padding-right:.25rem}iframe{border:0;width:100%}dialog{border:0;overflow-y:auto;max-height:calc(100% - 1rem)}audio,video,embed,object{width:100%}meter,progress{height:2.25rem;display:block;width:100%}input:not([type="button"]):not([type="checkbox"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]){height:2.25rem}input:not([type="button"]):not([type="checkbox"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="color"]),output{display:block;width:100%}button,[type="button"],[type="reset"],[type="submit"],input:not([type="checkbox"]):not([type="image"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="date"]):not([type="datetime-local"]):not([type="time"]):not([type="month"]):not([type="week"]):not([type="range"]){padding:.5rem}[type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]{padding:.4rem .5rem}textarea{min-height:8em;display:block;width:100%;padding:.5rem}select{min-height:2.25rem;display:block;width:100%;padding:.45rem .5rem}summary{min-height:2.25rem;display:flex;align-items:center}[type="image"]{vertical-align:bottom}[type="color"]{vertical-align:top}fieldset{padding:.75rem}label>[type="color"]{margin-left:.25rem}label{display:flex;flex-wrap:wrap;align-items:center;margin-top:1rem;width:100%}legend+label{margin-top:0}[type="checkbox"]+label,[type="radio"]+label{display:inline-flex;vertical-align:text-bottom;width:unset}fieldset>label:first-child{margin-top:0}label>[type="checkbox"],label>[type="radio"]{margin-right:.25rem;min-height:1rem}[type="file"]{padding-top:.35rem}blockquote{margin-left:0;margin-right:0;padding:1rem 2rem}blockquote>p:first-child{margin-top:0}blockquote>p:last-child{margin-bottom:0}footer{margin-top:1rem}body>header,body>footer{text-align:center}body>footer{padding-bottom:1rem}td,th{padding:.5rem}figure{margin-left:0;margin-right:0;text-align:center}figure>figcaption{text-align:center}figure>*{text-align:initial}dt{font-weight:bold}dd{margin-bottom:1rem}li{margin-top:.5rem;margin-bottom:.5rem}picture{width:100vw;position:relative;left:calc(-50vw+50%);display:block;text-align:center}@media(max-width:50rem){table{width:calc(100%+1rem);margin-left:-0.5rem}video{width:calc(100%+1rem);margin-left:-0.5rem;max-height:100vh}pre{width:calc(100%+1rem);margin-left:-0.5rem;padding-left:.5rem;padding-right:.5rem}pre code{border-left:.5rem solid transparent;border-right:.5rem solid transparent;box-sizing:content-box;margin-left:-0.5rem;margin-right:-0.5rem;padding-left:0;padding-right:0}}@media(hover:hover){body{overflow-x:hidden}nav{border-bottom:var(--border-width) solid var(--border-color);background-color:var(--background-color);display:flex}body>nav{width:100vw;position:relative;left:calc(-50vw+50%)}nav ul{padding-left:0}body>nav>ul{width:calc(var(--max-body-width)+2rem);margin:.5rem auto;padding-left:.5rem;padding-right:.5rem}nav ul li{display:inline-block;position:relative}nav>ul>li{padding:.5rem;margin:0}nav ul li a{text-decoration:none;white-space:nowrap}nav ul li ul{position:absolute;left:-9999px;z-index:1;background-color:var(--background-color);border-radius:var(--border-radius);border:var(--border-width) solid var(--border-color);margin-left:calc(-0.5rem - var(--border-width));margin-top:.5rem;padding:.25rem .5rem;min-width:calc(100%+var(--border-width) * 2)}nav ul li ul li{width:100%}nav ul li ul li ul{min-width:calc(100%+1rem+var(--border-width) * 2);margin-top:.75rem}nav :focus ~ ul,nav :focus ~ ul ul,nav ul ul:focus-within,nav ul li:hover ul{left:initial}nav li>*:not(ul):not(a):not(:only-child){cursor:default}nav li>*:not(ul):not(:only-child)::after{content:" ▾"}}@media not all and (hover:hover){nav{padding-top:2rem;border-bottom:var(--border-width) solid var(--border-color);background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:top;width:100vw;position:relative;left:calc(-50vw+50%)}nav>*{display:none}nav:hover>ul{display:inherit}nav:hover>*:not(ul){display:unset}@media(prefers-color-scheme:dark){nav{background-image:url('data:image/svg+xml;utf8,')}}}:root{color-scheme:light dark;--border-color:#dbdbdb;--border-hover-color:#b5b5b5;--background-color:#fff;--highlighted-background-color:#f5f5f5;--text-color:#363636;--danger-color:#f14668;--danger-text-color:#fff;--danger-hover-color:#f03a5f;--success-color:#48c774;--success-text-color:#fff;--success-hover-color:#3ec46d;--danger-text-background-color:#fde0e6;--success-text-background-color:#effaf3;--border-radius:.25rem;--border-width:1px;--code-text-color:#f14668;--code-background-color:#f5f5f5;--link-color:#3273dc;--link-visited-color:#b86bff;--link-hover-color:#363636;--link-active-color:#363636}@media(prefers-color-scheme:dark){:root{--border-color:#5f6267;--border-hover-color:#bcbebd;--background-color:#202124;--highlighted-background-color:#292b2e;--text-color:#fff;--danger-color:#770018;--danger-text-color:#fff;--danger-hover-color:#6b0015;--success-color:#006624;--success-text-color:#fff;--success-hover-color:#006122;--danger-text-background-color:#770018;--success-text-background-color:#006624;--code-text-color:#f1a0b0;--code-background-color:#292b2e;--link-color:#90b3ed;--link-visited-color:#cb93ff;--link-hover-color:#fff;--link-active-color:#fff}}body{background-color:var(--background-color);color:var(--text-color)}code{background-color:var(--code-background-color);border-color:var(--code-background-color);color:var(--code-text-color)}a,a code{color:var(--link-color);text-decoration:none}a:visited,a:visited code{color:var(--link-visited-color)}a:hover,a:hover code{color:var(--link-hover-color)}a:active,a:active code{color:var(--link-active-color)}button,input,textarea,select,fieldset{border-radius:var(--border-radius)}[type="image"]:hover:enabled{filter:brightness(95%)}button,[type="button"],[type="color"]{border:var(--border-width) solid var(--border-color);background-color:var(--background-color);color:var(--text-color)}[type="reset"]{border:var(--border-width) solid transparent;background-color:var(--danger-color);color:var(--danger-text-color)}[type="submit"],button:not([type]){border:var(--border-width) solid transparent;background-color:var(--success-color);color:var(--success-text-color)}button:hover:enabled,[type="button"]:hover:enabled,[type="color"]:hover:enabled{border-color:var(--border-hover-color)}[type="reset"]:hover:enabled{border-color:transparent;background-color:var(--danger-hover-color)}[type="submit"]:hover:enabled,button:not([type]):hover:enabled{border-color:transparent;background-color:var(--success-hover-color)}input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([type="range"]),textarea,select{background-color:var(--background-color);color:var(--text-color)}input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([type="range"]):not(:invalid),textarea,select,fieldset{border:var(--border-width) solid var(--border-color)}select:enabled,[type="date"]:enabled,[type="datetime-local"]:enabled,[type="time"]:enabled,[type="month"]:enabled,[type="week"]:enabled{background-color:var(--background-color)}input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([type="range"]):disabled,textarea:disabled,select:disabled{background-color:var(--highlighted-background-color)}input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):hover:enabled:not(:invalid),textarea:hover:enabled,select:hover:enabled{border-color:var(--border-hover-color)}table{border-collapse:collapse}caption{font-weight:bold}thead{border-bottom:calc(var(--border-width) * 2) solid var(--border-color)}tfoot{border-top:calc(var(--border-width) * 2) solid var(--border-color)}thead>tr:not(:first-child),tbody>tr:not(:first-child),tfoot>tr:not(:first-child){border-top:var(--border-width) solid var(--border-color)}thead>tr:nth-child(even),tbody>tr:nth-child(even),tfoot>tr:nth-child(even){background-color:var(--highlighted-background-color)}kbd{background-color:var(--highlighted-background-color);border:var(--border-width) solid var(--border-hover-color);border-radius:var(--border-radius);box-shadow:inset 0 0 0 .2rem var(--background-color)}kbd kbd{border:unset;box-shadow:inset 0 -0.2rem 0 0 var(--background-color),inset 0 .2rem 0 0 var(--background-color);border-radius:0}dialog{border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--text-color)}details[open],details:not([open]) summary{border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);padding:.5rem}details[open]{padding-top:0}details[open] summary{margin-bottom:.5rem}details:not([open]) summary:hover{border-color:var(--border-hover-color)}del{background-color:var(--danger-text-background-color)}ins{background-color:var(--success-text-background-color);text-decoration:none}blockquote{border-left:.5rem solid var(--border-color);background-color:var(--highlighted-background-color)}body>footer{border-top:var(--border-width) solid var(--border-color);padding-top:1rem}hr{border-width:var(--border-width) 0 0;border-style:solid;border-color:var(--border-color)}:disabled,[type="checkbox"][id]:disabled+label[for],[type="radio"][id]:disabled+label[for]{opacity:.5}:invalid:not(form){border-color:var(--danger-color);outline-color:var(--danger-color);border-width:var(--border-width);border-style:solid}:disabled :disabled{opacity:unset}:invalid:not(form):hover:enabled{border-color:var(--danger-hover-color)} \ No newline at end of file +/*! modern-normalize v0.6.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,*::before,*::after{box-sizing:border-box}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}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:-moz-focusring,[type='button']:-moz-focusring,[type='reset']:-moz-focusring,[type='submit']:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}html{height:100%;line-height:1.4}h1,h2,h3{line-height:1.15}body{min-height:100%;overflow-wrap:break-word}main{flex-grow:1}img{max-width:100%;max-height:100vh}table{display:block;overflow-x:auto}pre{padding:1rem;overflow-x:auto;line-height:1.15}code{padding:.25rem}pre code{padding:unset}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;max-width:calc(100% - .1rem * 2);min-height:1.5rem;padding:0 .25rem;margin:0 .1rem;overflow:hidden}kbd kbd{min-width:unset;min-height:unset;padding:0;margin:0}kbd kbd:not(:first-child){padding-left:.25rem}kbd kbd:not(:last-child){padding-right:.25rem}iframe{width:100%;border:0}dialog{max-height:calc(100% - 1rem);overflow-y:auto;border:0}audio,video,embed,object{width:100%}[type="range"],meter,progress{display:block;width:100%;height:2.25rem}[type="color"]{height:2.25rem;vertical-align:top}td,th,details,button,[type="button"],[type="reset"],[type="submit"]{padding:.5rem}input:not([type]),[type="email"],[type="hidden"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="url"]{display:block;width:100%;height:2.25rem;padding:.5rem}[type="file"]{display:block;width:100%;height:2.25rem;padding-top:.35rem}[type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]{display:block;width:100%;height:2.25rem;padding:.4rem .5rem}output{display:block;width:100%}textarea{display:block;width:100%;min-height:8em;padding:.5rem}select{display:block;width:100%;min-height:2.25rem;padding:.45rem .5rem}summary{padding:.5rem;margin:-0.5rem}[type="image"]{vertical-align:bottom}fieldset{padding:.75rem}label>[type="color"]{margin-left:.25rem}label{display:flex;flex-wrap:wrap;align-items:center;width:100%;margin-top:1rem}legend+label{margin-top:0}[type="checkbox"]+label,[type="radio"]+label{display:inline-flex;width:unset;vertical-align:text-bottom}blockquote>p:first-child,fieldset>label:first-child{margin-top:0}label>[type="checkbox"],label>[type="radio"]{min-height:1rem;margin-right:.25rem}blockquote{padding:1rem 2rem;margin-right:0;margin-left:0}blockquote>p:last-child{margin-bottom:0}footer{margin-top:1rem}figure>figcaption{text-align:center}body>footer{padding-bottom:1rem}figure{margin-right:0;margin-left:0;text-align:center}figure>*{text-align:initial}dt{font-weight:bold}dd{margin-bottom:1rem}li{margin-top:.5rem;margin-bottom:.5rem}picture{display:block;text-align:center}abbr{cursor:help}button,summary,[type="button"],[type="reset"],[type="submit"],[type="color"],[type="file"],[type="range"],label>[type="checkbox"]:enabled,label>[type="radio"]:enabled{cursor:pointer}[readonly]{cursor:default}:disabled,[type="checkbox"][id]:disabled+[for],[type="radio"][id]:disabled+[for]{cursor:not-allowed}:root{--max-body-width:48rem}html{height:100%;line-height:1.4}h1,h2,h3{line-height:1.15}body{display:flex;flex-direction:column;width:calc(100% - 1rem);max-width:var(--max-body-width);min-height:100%;margin:0 auto;overflow-wrap:break-word}main{flex-grow:1}img{max-width:100%;max-height:100vh}table{display:block;overflow-x:auto}pre{padding:1rem;margin-top:1rem !important;margin-bottom:1rem !important;overflow-x:auto;line-height:1.15}code{padding:.25rem}pre code{padding:unset}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;max-width:calc(100% - .1rem * 2);min-height:1.5rem;padding:0 .25rem;margin:0 .1rem;overflow:hidden}kbd kbd{min-width:unset;min-height:unset;padding:0;margin:0}kbd kbd:not(:first-child){padding-left:.25rem}kbd kbd:not(:last-child){padding-right:.25rem}iframe{width:100%;border:0}dialog{max-height:calc(100% - 1rem);overflow-y:auto;border:0}audio,video,embed,object{width:100%}[type="range"],meter,progress{display:block;width:100%;height:2.25rem}[type="color"]{height:2.25rem;vertical-align:top}td,th,details,button,[type="button"],[type="reset"],[type="submit"]{padding:.5rem}input:not([type]),[type="email"],[type="hidden"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="url"]{display:block;width:100%;height:2.25rem;padding:.5rem}[type="file"]{display:block;width:100%;height:2.25rem;padding-top:.35rem}[type="date"],[type="datetime-local"],[type="time"],[type="month"],[type="week"]{display:block;width:100%;height:2.25rem;padding:.4rem .5rem}output{display:block;width:100%}textarea{display:block;width:100%;min-height:8em;padding:.5rem}select{display:block;width:100%;min-height:2.25rem;padding:.45rem .5rem}summary{padding:.5rem;margin:-0.5rem}[type="image"]{vertical-align:bottom}fieldset{padding:.75rem}label>[type="color"]{margin-left:.25rem}label{display:flex;flex-wrap:wrap;align-items:center;width:100%;margin-top:1rem}legend+label{margin-top:0}[type="checkbox"]+label,[type="radio"]+label{display:inline-flex;width:unset;vertical-align:text-bottom}blockquote>p:first-child,fieldset>label:first-child{margin-top:0}label>[type="checkbox"],label>[type="radio"]{min-height:1rem;margin-right:.25rem}blockquote{padding:1rem 2rem;margin-right:0;margin-left:0}blockquote>p:last-child{margin-bottom:0}footer{margin-top:1rem}figure>figcaption,body>header{text-align:center}body>footer{padding-bottom:1rem;text-align:center}figure{margin-right:0;margin-left:0;text-align:center}figure>*{text-align:initial}dt{font-weight:bold}dd{margin-bottom:1rem}li{margin-top:.5rem;margin-bottom:.5rem}picture{position:relative;left:calc(-50vw+50%);display:block;width:100vw;text-align:center}.hljs{padding:1rem !important;margin:-1rem}@media(max-width:50rem){table{width:calc(100%+1rem);margin-left:-0.5rem}video{width:calc(100%+1rem);max-height:100vh;margin-left:-0.5rem}pre{width:calc(100%+1rem);padding-right:.5rem !important;padding-left:.5rem !important;margin-left:-0.5rem !important}.hljs{padding-right:.5rem !important;padding-left:.5rem !important;margin:-1rem -0.5rem}}@media(hover:hover){body{overflow-x:hidden}nav{display:flex;background-color:var(--background-color);border-bottom:var(--border-width) solid var(--border-color)}body>nav{position:relative;left:calc(-50vw+50%);width:100vw}nav ul{padding-left:0}body>nav>ul{width:calc(var(--max-body-width)+2rem);padding-right:.5rem;padding-left:.5rem;margin:.5rem auto}nav ul li{position:relative;display:inline-block}nav>ul>li{padding:.5rem;margin:0}nav ul li a{text-decoration:none;white-space:nowrap}nav ul li ul{position:absolute;left:-9999px;z-index:1;min-width:calc(100%+var(--border-width) * 2);padding:.25rem .5rem;margin-top:.5rem;margin-left:calc(-0.5rem - var(--border-width));background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius)}nav ul li ul li{width:100%}nav ul li ul li ul{min-width:calc(100%+1rem+var(--border-width) * 2);margin-top:.75rem}nav :focus ~ ul,nav :focus ~ ul ul,nav ul ul:focus-within,nav ul li:hover ul{left:initial}nav li>*:not(ul):not(a):not(:only-child){cursor:default}nav li>*:not(ul):not(:only-child)::after{content:" ▾"}}@media not all and (hover:hover){nav{position:relative;left:calc(-50vw+50%);width:100vw;padding-top:2rem;background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:top;border-bottom:var(--border-width) solid var(--border-color)}nav>*{display:none}nav:hover>ul{display:inherit}nav:hover>*:not(ul){display:unset}@media(prefers-color-scheme:dark){nav{background-image:url('data:image/svg+xml;utf8,')}}}:root{color-scheme:light dark;--border-color:#dbdbdb;--border-hover-color:#b5b5b5;--background-color:#fff;--highlighted-background-color:#f5f5f5;--text-color:#363636;--danger-color:#f14668;--danger-text-color:#fff;--danger-hover-color:#f03a5f;--success-color:#48c774;--success-text-color:#fff;--success-hover-color:#3ec46d;--danger-text-background-color:#fde0e6;--success-text-background-color:#effaf3;--border-radius:.25rem;--border-width:1px;--code-text-color:#f14668;--code-background-color:#f5f5f5;--link-color:#3273dc;--link-visited-color:#b86bff;--link-hover-color:#363636;--link-active-color:#363636}@media(prefers-color-scheme:dark){:root{--border-color:#5f6267;--border-hover-color:#bcbebd;--background-color:#202124;--highlighted-background-color:#292b2e;--text-color:#fff;--danger-color:#770018;--danger-text-color:#fff;--danger-hover-color:#6b0015;--success-color:#006624;--success-text-color:#fff;--success-hover-color:#006122;--danger-text-background-color:#770018;--success-text-background-color:#006624;--code-text-color:#f1a0b0;--code-background-color:#292b2e;--link-color:#90b3ed;--link-visited-color:#cb93ff;--link-hover-color:#fff;--link-active-color:#fff}input::-webkit-calendar-picker-indicator{filter:invert()}}input{border-radius:var(--border-radius)}body{color:var(--text-color);background-color:var(--background-color)}pre{background-color:var(--code-background-color);border-radius:0 !important}code{color:var(--code-text-color);background-color:var(--code-background-color)}pre code{background-color:inherit}a,a code{color:var(--link-color);text-decoration:none}a:visited,a:visited code{color:var(--link-visited-color)}a:hover,a:hover code{color:var(--link-hover-color)}a:active,a:active code{color:var(--link-active-color)}button,dialog,textarea,select{color:var(--text-color);background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius)}fieldset,details{border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius)}summary{margin:calc(-0.5rem - var(--border-width));border:var(--border-width) solid transparent;border-radius:var(--border-radius)}input:not([type]),[type="date"],[type="datetime-local"],[type="email"],[type="hidden"],[type="month"],[type="number"],[type="password"],[type="search"],[type="tel"],[type="text"],[type="time"],[type="url"],[type="week"],[type="button"],[type="color"]{color:var(--text-color);background-color:var(--background-color);border:var(--border-width) solid var(--border-color)}[type="reset"]{color:var(--danger-text-color);background-color:var(--danger-color);border:var(--border-width) solid transparent}[type="submit"],button:not([type]){color:var(--success-text-color);background-color:var(--success-color);border:var(--border-width) solid transparent}input:not([type]):disabled,[type="date"]:disabled,[type="datetime-local"]:disabled,[type="email"]:disabled,[type="hidden"]:disabled,[type="month"]:disabled,[type="number"]:disabled,[type="password"]:disabled,[type="search"]:disabled,[type="tel"]:disabled,[type="text"]:disabled,[type="time"]:disabled,[type="url"]:disabled,[type="week"]:disabled,textarea:disabled,select:disabled{background-color:var(--highlighted-background-color)}select:enabled,[type="date"]:enabled,[type="datetime-local"]:enabled,[type="time"]:enabled,[type="month"]:enabled,[type="week"]:enabled{background-color:var(--background-color)}button:focus,[type="button"]:focus,[type="color"]:focus,[type="reset"]:focus,[type="submit"]:focus,button:not([type]):focus,input:not([type]):focus,[type="date"]:focus,[type="datetime-local"]:focus,[type="email"]:focus,[type="hidden"]:focus,[type="image"]:focus,[type="month"]:focus,[type="number"]:focus,[type="password"]:focus,[type="search"]:focus,[type="tel"]:focus,[type="text"]:focus,[type="time"]:focus,[type="url"]:focus,[type="week"]:focus,textarea:focus,select:focus,summary:focus{border-color:var(--border-hover-color);outline:0;box-shadow:0 0 .2rem .01rem var(--border-hover-color)}[type="image"]:enabled:hover{filter:brightness(95%)}button:enabled:hover,[type="button"]:enabled:hover,[type="color"]:enabled:hover,input:not([type]):enabled:hover,[type="date"]:enabled:hover,[type="datetime-local"]:enabled:hover,[type="email"]:enabled:hover,[type="hidden"]:enabled:hover,[type="month"]:enabled:hover,[type="number"]:enabled:hover,[type="password"]:enabled:hover,[type="range"]:enabled:hover,[type="search"]:enabled:hover,[type="tel"]:enabled:hover,[type="text"]:enabled:hover,[type="time"]:enabled:hover,[type="url"]:enabled:hover,[type="week"]:enabled:hover,textarea:enabled:hover,select:enabled:hover,summary:hover{border-color:var(--border-hover-color)}[type="reset"]:enabled:hover{background-color:var(--danger-hover-color);border-color:transparent}[type="submit"]:enabled:hover,button:not([type]):enabled:hover{background-color:var(--success-hover-color);border-color:transparent}table{border-collapse:collapse}caption{font-weight:bold}thead{border-bottom:calc(var(--border-width) * 2) solid var(--border-color)}tfoot{border-top:calc(var(--border-width) * 2) solid var(--border-color)}thead>tr:not(:first-child),tbody>tr:not(:first-child),tfoot>tr:not(:first-child){border-top:var(--border-width) solid var(--border-color)}thead>tr:nth-child(even),tbody>tr:nth-child(even),tfoot>tr:nth-child(even){background-color:var(--highlighted-background-color)}kbd{background-color:var(--highlighted-background-color);border:var(--border-width) solid var(--border-hover-color);border-radius:var(--border-radius);box-shadow:inset 0 0 0 .2rem var(--background-color)}kbd kbd{border:unset;border-radius:0;box-shadow:inset 0 -0.2rem 0 0 var(--background-color),inset 0 .2rem 0 0 var(--background-color)}[open] summary{margin-bottom:.5rem}del{background-color:var(--danger-text-background-color)}ins{text-decoration:none;background-color:var(--success-text-background-color)}blockquote{background-color:var(--highlighted-background-color);border-left:.5rem solid var(--border-color)}body>footer{padding-top:1rem;border-top:var(--border-width) solid var(--border-color)}hr{border-color:var(--border-color);border-style:solid;border-width:var(--border-width) 0 0}:disabled,[type="checkbox"][id]:disabled+[for],[type="radio"][id]:disabled+[for]{opacity:.5}:invalid:not(form){border-color:var(--danger-color);border-style:solid;border-width:var(--border-width)}:disabled :disabled{opacity:unset}:invalid:not([type="checkbox"]):focus{border-color:var(--danger-hover-color);outline:0;box-shadow:0 0 .2rem .05rem var(--danger-hover-color)}:invalid:not([type="checkbox"]):not(:focus){box-shadow:none}:invalid:not(form):enabled:hover{border-color:var(--danger-hover-color)} \ No newline at end of file diff --git a/min/marx.min.css b/min/marx.min.css index 78e5d70..1785289 100644 --- a/min/marx.min.css +++ b/min/marx.min.css @@ -1 +1 @@ -/*! sanitize.css v7.0.3 | CC0 License | github.com/csstools/sanitize.css */*,::before,::after{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}::before,::after{text-decoration:inherit;vertical-align:inherit}html{cursor:default;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:break-word}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{height:0;overflow:visible}main{display:block}nav ol,nav ul{list-style:none}pre{font-family:Menlo,Consolas,Roboto Mono,Ubuntu Monospace,Noto Mono,Oxygen Mono,Liberation Mono,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:Menlo,Consolas,Roboto Mono,Ubuntu Monospace,Noto Mono,Oxygen Mono,Liberation Mono,monospace;font-size:1em}small{font-size:80%}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}button,input,select{margin:0}button{overflow:visible;text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}fieldset{padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type="checkbox"],[type="radio"]{padding:0}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}details{display:block}dialog{background-color:white;border:solid;color:black;display:block;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}a,area,button,input,label,select,summary,textarea,[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy="true"]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled="true"],[disabled]{cursor:not-allowed}[aria-hidden="false"][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}/*! Marx v3.0.6 - The classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */main,header,footer,article,section,aside,details,summary{margin:0 auto;margin-bottom:16px;width:100%}main{display:block;margin:0 auto;max-width:768px;padding:0 16px 16px}footer{border-top:1px solid rgba(0,0,0,0.12);padding:16px 0;text-align:center}footer p{margin-bottom:0}hr{border:0;border-top:1px solid rgba(0,0,0,0.12);display:block;margin-top:16px;margin-bottom:16px;width:100%;-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}img{height:auto;max-width:100%;vertical-align:baseline}@media screen and (max-width:400px){article,section,aside{clear:both;display:block;max-width:100%}img{margin-right:16px}}embed,iframe,video{border:0}body{color:rgba(0,0,0,0.8);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;line-height:1.5}p{margin:0;margin-bottom:16px}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;line-height:1.2;font-weight:500}h1{font-size:40px;margin:20px 0 16px}h2{font-size:32px;margin:20px 0 16px}h3{font-size:28px;margin:16px 0 4px}h4{font-size:24px;margin:16px 0 4px}h5{font-size:20px;margin:16px 0 4px}h6{font-size:16px;margin:16px 0 4px}small{color:rgba(0,0,0,0.54);vertical-align:bottom}pre{background:#f7f7f9;color:rgba(0,0,0,0.8);display:block;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:16px;margin:16px 0;padding:16px;white-space:pre-wrap;overflow-wrap:break-word}code{color:rgba(0,0,0,0.8);font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:16px;line-height:inherit;margin:0;padding:0;vertical-align:baseline;word-break:break-all;word-wrap:break-word}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover,a:focus{color:#0062cc;text-decoration:underline}dl{margin-bottom:16px}dd{margin-left:40px}ul,ol{margin-bottom:8px;padding-left:40px;vertical-align:baseline}blockquote{border-left:2px solid rgba(0,0,0,0.8);font-family:Georgia,Times,"Times New Roman",serif;font-style:italic;margin:16px 0;padding-left:16px}figcaption{font-family:Georgia,Times,"Times New Roman",serif}u{text-decoration:underline}s{text-decoration:line-through}sup{font-size:14px;vertical-align:super}sub{font-size:14px;vertical-align:sub}mark{background:#ffeb3b}input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="week"],input[type="number"],input[type="search"],input[type="tel"],select,textarea{background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.12);border-radius:4px;color:rgba(0,0,0,0.8);display:block;width:100%;padding:8px 16px;line-height:1.5;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}input[type="color"]{background:#fff;border:1px solid rgba(0,0,0,0.12);border-radius:4px;display:inline-block;vertical-align:middle}input:not([type]){-webkit-appearance:none;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.12);border-radius:4px;color:rgba(0,0,0,0.8);display:block;width:100%;padding:8px 16px;line-height:1.5;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;text-align:left}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,select:focus,textarea:focus{background-color:#fff;border-color:#80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}input:not([type]):focus{background-color:#fff;border-color:#80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:1px thin rgba(0,0,0,0.12)}input[type="text"][disabled],input[type="password"][disabled],input[type="email"][disabled],input[type="url"][disabled],input[type="date"][disabled],input[type="month"][disabled],input[type="time"][disabled],input[type="datetime"][disabled],input[type="datetime-local"][disabled],input[type="week"][disabled],input[type="number"][disabled],input[type="search"][disabled],input[type="tel"][disabled],input[type="color"][disabled],select[disabled],textarea[disabled]{background-color:rgba(0,0,0,0.12);color:rgba(0,0,0,0.54);cursor:not-allowed;opacity:1}input:not([type])[disabled]{background-color:rgba(0,0,0,0.12);color:rgba(0,0,0,0.54);cursor:not-allowed;opacity:1}input[readonly],select[readonly],textarea[readonly]{border-color:rgba(0,0,0,0.12);color:rgba(0,0,0,0.54)}input:focus:invalid,textarea:focus:invalid,select:focus:invalid{border-color:#ea1c0d;color:#f44336}input[type="file"]:focus:invalid:focus,input[type="radio"]:focus:invalid:focus,input[type="checkbox"]:focus:invalid:focus{outline-color:#f44336}select{border:1px solid rgba(0,0,0,0.12);vertical-align:sub}select:not([size]):not([multiple]){height:-webkit-calc(2.25rem+2px);height:calc(2.25rem+2px)}select[multiple]{height:auto}label{display:inline-block;line-height:2}fieldset{border:0;margin:0;padding:8px 0}legend{border-bottom:1px solid rgba(0,0,0,0.12);color:rgba(0,0,0,0.8);display:block;margin-bottom:8px;padding:8px 0;width:100%}textarea{overflow:auto;resize:vertical}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;display:inline}input[type=submit],input[type=reset],input[type=button],button{background-color:#007bff;border:#007bff;border-radius:4px;color:#fff;padding:8px 16px;display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-size:1rem;line-height:1.5;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}input[type=submit]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,button::-moz-focus-inner{padding:0}input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover,button:hover{background-color:#0069d9;border-color:#0062cc;color:#fff}input[type=submit]:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=button]:not(:disabled):active,button:not(:disabled):active{background-color:#0062cc;border-color:#005cbf;color:#fff}input[type=submit]:focus,input[type=reset]:focus,input[type=button]:focus,button:focus{outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.5);box-shadow:0 0 0 .2rem rgba(0,123,255,0.5)}input[type=submit]:disabled,input[type=reset]:disabled,input[type=button]:disabled,button:disabled{opacity:.65;cursor:not-allowed;background-color:#007bff;border-color:#007bff;color:#fff}table{border-top:1px solid rgba(0,0,0,0.12);margin-bottom:16px}caption{padding:8px 0}thead th{border:0;border-bottom:2px solid rgba(0,0,0,0.12);text-align:left}tr{margin-bottom:8px}th,td{border-bottom:1px solid rgba(0,0,0,0.12);padding:16px;vertical-align:inherit}tfoot tr{text-align:left}tfoot td{color:rgba(0,0,0,0.54);font-size:8px;font-style:italic;padding:16px 4px} \ No newline at end of file +*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box}::before,::after{text-decoration:inherit;vertical-align:inherit}html{cursor:default;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:break-word}body{margin:0}h1{font-size:2em;margin:.67em 0}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}hr{height:0;overflow:visible}main{display:block}nav ol,nav ul{list-style:none;padding:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select{margin:0}button{overflow:visible;text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}fieldset{border:1px solid #a0a0a0;padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type="checkbox"],[type="radio"]{padding:0}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}details{display:block}dialog{background-color:white;border:solid;color:black;display:block;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}a,area,button,input,label,select,summary,textarea,[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy="true"]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled="true"],[disabled]{cursor:not-allowed}[aria-hidden="false"][hidden]{display:initial}[aria-hidden="false"][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}/*! Marx v3.0.6 - The classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */main,header,footer,article,section,aside,details,summary{margin:0 auto;margin-bottom:16px;width:100%}main{display:block;margin:0 auto;max-width:768px;padding:0 16px 16px}footer{border-top:1px solid rgba(0,0,0,0.12);padding:16px 0;text-align:center}footer p{margin-bottom:0}hr{border:0;border-top:1px solid rgba(0,0,0,0.12);display:block;margin-top:16px;margin-bottom:16px;width:100%;-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}img{height:auto;max-width:100%;vertical-align:baseline}@media screen and (max-width:400px){article,section,aside{clear:both;display:block;max-width:100%}img{margin-right:16px}}embed,iframe,video{border:0}body{color:rgba(0,0,0,0.8);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;line-height:1.5}p{margin:0;margin-bottom:16px}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;line-height:1.2;font-weight:500}h1{font-size:40px;margin:20px 0 16px}h2{font-size:32px;margin:20px 0 16px}h3{font-size:28px;margin:16px 0 4px}h4{font-size:24px;margin:16px 0 4px}h5{font-size:20px;margin:16px 0 4px}h6{font-size:16px;margin:16px 0 4px}small{color:rgba(0,0,0,0.54);vertical-align:bottom}pre{background:#f7f7f9;color:rgba(0,0,0,0.8);display:block;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:16px;margin:16px 0;padding:16px;white-space:pre-wrap;overflow-wrap:break-word}code{color:rgba(0,0,0,0.8);font-family:Menlo,Monaco,Consolas,"Courier New",monospace;font-size:16px;line-height:inherit;margin:0;padding:0;vertical-align:baseline;word-break:break-all;word-wrap:break-word}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover,a:focus{color:#0062cc;text-decoration:underline}dl{margin-bottom:16px}dd{margin-left:40px}ul,ol{margin-bottom:8px;padding-left:40px;vertical-align:baseline}blockquote{border-left:2px solid rgba(0,0,0,0.8);font-family:Georgia,Times,"Times New Roman",serif;font-style:italic;margin:16px 0;padding-left:16px}figcaption{font-family:Georgia,Times,"Times New Roman",serif}u{text-decoration:underline}s{text-decoration:line-through}sup{font-size:14px;vertical-align:super}sub{font-size:14px;vertical-align:sub}mark{background:#ffeb3b}input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="date"],input[type="month"],input[type="time"],input[type="datetime"],input[type="datetime-local"],input[type="week"],input[type="number"],input[type="search"],input[type="tel"],select,textarea{background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.12);border-radius:4px;color:rgba(0,0,0,0.8);display:block;width:100%;font-size:1rem;padding:8px 16px;line-height:1.5;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}input[type="color"]{background:#fff;border:1px solid rgba(0,0,0,0.12);border-radius:4px;display:inline-block;vertical-align:middle}input:not([type]){-webkit-appearance:none;background:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,0.12);border-radius:4px;color:rgba(0,0,0,0.8);display:block;width:100%;padding:8px 16px;line-height:1.5;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;text-align:left}input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,select:focus,textarea:focus{background-color:#fff;border-color:#80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}input:not([type]):focus{background-color:#fff;border-color:#80bdff;outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.25);box-shadow:0 0 0 .2rem rgba(0,123,255,0.25)}input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus{outline:1px thin rgba(0,0,0,0.12)}input[type="text"][disabled],input[type="password"][disabled],input[type="email"][disabled],input[type="url"][disabled],input[type="date"][disabled],input[type="month"][disabled],input[type="time"][disabled],input[type="datetime"][disabled],input[type="datetime-local"][disabled],input[type="week"][disabled],input[type="number"][disabled],input[type="search"][disabled],input[type="tel"][disabled],input[type="color"][disabled],select[disabled],textarea[disabled]{background-color:rgba(0,0,0,0.12);color:rgba(0,0,0,0.54);cursor:not-allowed;opacity:1}input:not([type])[disabled]{background-color:rgba(0,0,0,0.12);color:rgba(0,0,0,0.54);cursor:not-allowed;opacity:1}input[readonly],select[readonly],textarea[readonly]{border-color:rgba(0,0,0,0.12);color:rgba(0,0,0,0.54)}input:focus:invalid,textarea:focus:invalid,select:focus:invalid{border-color:#ea1c0d;color:#f44336}input[type="file"]:focus:invalid:focus,input[type="radio"]:focus:invalid:focus,input[type="checkbox"]:focus:invalid:focus{outline-color:#f44336}select{border:1px solid rgba(0,0,0,0.12);vertical-align:sub}select:not([size]):not([multiple]){height:-webkit-calc(2.25rem+2px);height:calc(2.25rem+2px)}select[multiple]{height:auto}label{display:inline-block;line-height:2}fieldset{border:0;margin:0;padding:8px 0}legend{border-bottom:1px solid rgba(0,0,0,0.12);color:rgba(0,0,0,0.8);display:block;margin-bottom:8px;padding:8px 0;width:100%}textarea{overflow:auto;resize:vertical}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;display:inline}input[type=submit],input[type=reset],input[type=button],button{background-color:#007bff;border:#007bff;border-radius:4px;color:#fff;padding:8px 16px;display:inline-block;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-size:1rem;line-height:1.5;-webkit-transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}input[type=submit]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=button]::-moz-focus-inner,button::-moz-focus-inner{padding:0}input[type=submit]:hover,input[type=reset]:hover,input[type=button]:hover,button:hover{background-color:#0069d9;border-color:#0062cc;color:#fff}input[type=submit]:not(:disabled):active,input[type=reset]:not(:disabled):active,input[type=button]:not(:disabled):active,button:not(:disabled):active{background-color:#0062cc;border-color:#005cbf;color:#fff}input[type=submit]:focus,input[type=reset]:focus,input[type=button]:focus,button:focus{outline:0;-webkit-box-shadow:0 0 0 .2rem rgba(0,123,255,0.5);box-shadow:0 0 0 .2rem rgba(0,123,255,0.5)}input[type=submit]:disabled,input[type=reset]:disabled,input[type=button]:disabled,button:disabled{opacity:.65;cursor:not-allowed;background-color:#007bff;border-color:#007bff;color:#fff}table{border-top:1px solid rgba(0,0,0,0.12);margin-bottom:16px}caption{padding:8px 0}thead th{border:0;border-bottom:2px solid rgba(0,0,0,0.12);text-align:left}tr{margin-bottom:8px}th,td{border-bottom:1px solid rgba(0,0,0,0.12);padding:16px;vertical-align:inherit}tfoot tr{text-align:left}tfoot td{color:rgba(0,0,0,0.54);font-size:8px;font-style:italic;padding:16px 4px} \ No newline at end of file diff --git a/min/milligram.min.css b/min/milligram.min.css index 0eab45a..290588c 100644 --- a/min/milligram.min.css +++ b/min/milligram.min.css @@ -1,5 +1,5 @@ /*! - * Milligram v1.4.0 + * Milligram v1.4.1 * https://milligram.io * * Copyright (c) 2020 CJ Patoilo diff --git a/min/new.min.css b/min/new.min.css index 819932a..ffdc13f 100644 --- a/min/new.min.css +++ b/min/new.min.css @@ -1 +1 @@ -:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#000;--nc-tx-2:#1a1a1a;--nc-bg-1:#fff;--nc-bg-2:#f6f8fa;--nc-bg-3:#e5e7eb;--nc-lk-1:#0070f3;--nc-lk-2:#0366d6;--nc-lk-tx:#fff;--nc-ac-1:#79ffe1;--nc-ac-tx:#0c4047}@media(prefers-color-scheme:dark){:root{--nc-tx-1:#fff;--nc-tx-2:#eee;--nc-bg-1:#000;--nc-bg-2:#111;--nc-bg-3:#222;--nc-lk-1:#3291ff;--nc-lk-2:#0070f3;--nc-lk-tx:#fff;--nc-ac-1:#7928ca;--nc-ac-tx:#fff}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,input,iframe,img,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}html,input,select,button{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote *:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0 -(50vw - 50%)) 2rem}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>*:first-child{margin-top:0;padding-top:0}header>*:last-child{margin-bottom:0}a button,button,input[type="submit"],input[type="reset"],input[type="button"]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5;cursor:not-allowed}.button:focus,.button:enabled:hover,button:focus,button:enabled:hover,input[type="submit"]:focus,input[type="submit"]:enabled:hover,input[type="reset"]:focus,input[type="reset"]:enabled:hover,input[type="button"]:focus,input[type="button"]:enabled:hover{background:var(--nc-lk-2)}code,pre,kbd,samp{font-family:var(--nc-font-mono)}code,samp,kbd,pre{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:bold}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>*:last-child{margin-bottom:0}dt{font-weight:bold}dd::before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:bold;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}textarea,select,input{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%} \ No newline at end of file +:root{--nc-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";--nc-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;--nc-tx-1:#000;--nc-tx-2:#1a1a1a;--nc-bg-1:#fff;--nc-bg-2:#f6f8fa;--nc-bg-3:#e5e7eb;--nc-lk-1:#0070f3;--nc-lk-2:#0366d6;--nc-lk-tx:#fff;--nc-ac-1:#79ffe1;--nc-ac-tx:#0c4047;--nc-d-tx-1:#fff;--nc-d-tx-2:#eee;--nc-d-bg-1:#000;--nc-d-bg-2:#111;--nc-d-bg-3:#222;--nc-d-lk-1:#3291ff;--nc-d-lk-2:#0070f3;--nc-d-lk-tx:#fff;--nc-d-ac-1:#7928ca;--nc-d-ac-tx:#fff}@media(prefers-color-scheme:dark){:root{--nc-tx-1:var(--nc-d-tx-1);--nc-tx-2:var(--nc-d-tx-2);--nc-bg-1:var(--nc-d-bg-1);--nc-bg-2:var(--nc-d-bg-2);--nc-bg-3:var(--nc-d-bg-3);--nc-lk-1:var(--nc-d-lk-1);--nc-lk-2:var(--nc-d-lk-2);--nc-lk-tx:var(--nc--dlk-tx);--nc-ac-1:var(--nc-d-ac-1);--nc-ac-tx:var(--nc--dac-tx)}}*{margin:0;padding:0}address,area,article,aside,audio,blockquote,datalist,details,dl,fieldset,figure,form,input,iframe,img,meter,nav,ol,optgroup,option,output,p,pre,progress,ruby,section,table,textarea,ul,video{margin-bottom:1rem}html,input,select,button{font-family:var(--nc-font-sans)}body{margin:0 auto;max-width:750px;padding:2rem;border-radius:6px;overflow-x:hidden;word-break:break-word;overflow-wrap:break-word;background:var(--nc-bg-1);color:var(--nc-tx-2);font-size:1.03rem;line-height:1.5}::selection{background:var(--nc-ac-1);color:var(--nc-ac-tx)}h1,h2,h3,h4,h5,h6{line-height:1;color:var(--nc-tx-1);padding-top:.875rem}h1,h2,h3{color:var(--nc-tx-1);padding-bottom:2px;margin-bottom:8px;border-bottom:1px solid var(--nc-bg-2)}h4,h5,h6{margin-bottom:.3rem}h1{font-size:2.25rem}h2{font-size:1.85rem}h3{font-size:1.55rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}a{color:var(--nc-lk-1)}a:hover{color:var(--nc-lk-2)}abbr:hover{cursor:help}blockquote{padding:1.5rem;background:var(--nc-bg-2);border-left:5px solid var(--nc-bg-3)}abbr{cursor:help}blockquote *:last-child{padding-bottom:0;margin-bottom:0}header{background:var(--nc-bg-2);border-bottom:1px solid var(--nc-bg-3);padding:2rem 1.5rem;margin:-2rem calc(0 -(50vw - 50%)) 2rem}header h1,header h2,header h3{padding-bottom:0;border-bottom:0}header>*:first-child{margin-top:0;padding-top:0}header>*:last-child{margin-bottom:0}a button,button,input[type="submit"],input[type="reset"],input[type="button"]{font-size:1rem;display:inline-block;padding:6px 12px;text-align:center;text-decoration:none;white-space:nowrap;background:var(--nc-lk-1);color:var(--nc-lk-tx);border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;color:var(--nc-lk-tx)}a button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5;cursor:not-allowed}.button:focus,.button:enabled:hover,button:focus,button:enabled:hover,input[type="submit"]:focus,input[type="submit"]:enabled:hover,input[type="reset"]:focus,input[type="reset"]:enabled:hover,input[type="button"]:focus,input[type="button"]:enabled:hover{background:var(--nc-lk-2)}code,pre,kbd,samp{font-family:var(--nc-font-mono)}code,samp,kbd,pre{background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px;padding:3px 6px;font-size:.9rem}kbd{border-bottom:3px solid var(--nc-bg-3)}pre{padding:1rem 1.4rem;max-width:100%;overflow:auto}pre code{background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}code pre{display:inline;background:inherit;font-size:inherit;color:inherit;border:0;padding:0;margin:0}details{padding:.6rem 1rem;background:var(--nc-bg-2);border:1px solid var(--nc-bg-3);border-radius:4px}summary{cursor:pointer;font-weight:bold}details[open]{padding-bottom:.75rem}details[open] summary{margin-bottom:6px}details[open]>*:last-child{margin-bottom:0}dt{font-weight:bold}dd::before{content:'→ '}hr{border:0;border-bottom:1px solid var(--nc-bg-3);margin:1rem auto}fieldset{margin-top:1rem;padding:2rem;border:1px solid var(--nc-bg-3);border-radius:4px}legend{padding:auto .5rem}table{border-collapse:collapse;width:100%}td,th{border:1px solid var(--nc-bg-3);text-align:left;padding:.5rem}th{background:var(--nc-bg-2)}tr:nth-child(even){background:var(--nc-bg-2)}table caption{font-weight:bold;margin-bottom:.5rem}textarea{max-width:100%}ol,ul{padding-left:2rem}li{margin-top:.4rem}ul ul,ol ul,ul ol,ol ol{margin-bottom:0}mark{padding:3px 6px;background:var(--nc-ac-1);color:var(--nc-ac-tx)}textarea,select,input{padding:6px 12px;margin-bottom:.5rem;background:var(--nc-bg-2);color:var(--nc-tx-2);border:1px solid var(--nc-bg-3);border-radius:4px;box-shadow:none;box-sizing:border-box}img{max-width:100%} \ No newline at end of file diff --git a/min/sakura.min.css b/min/sakura.min.css index d37d080..cb4833d 100644 --- a/min/sakura.min.css +++ b/min/sakura.min.css @@ -1 +1 @@ -html{font-size:62.5%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}body{font-size:1.8rem;line-height:1.618;max-width:38em;margin:auto;color:#4a4a4a;background-color:#f9f9f9;padding:13px}@media(max-width:684px){body{font-size:1.53rem}}@media(max-width:382px){body{font-size:1.35rem}}h1,h2,h3,h4,h5,h6{line-height:1.1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-weight:700;margin-top:3rem;margin-bottom:1.5rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}h1{font-size:2.35em}h2{font-size:2.00em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1em}p{margin-top:0;margin-bottom:2.5rem}small,sub,sup{font-size:75%}hr{border-color:#2c8898}a{text-decoration:none;color:#2c8898}a:hover{color:#982c61;border-bottom:2px solid #4a4a4a}ul{padding-left:1.4em;margin-top:0;margin-bottom:2.5rem}li{margin-bottom:.4em}blockquote{font-style:italic;margin-left:1.5em;padding-left:1em;border-left:3px solid #2c8898}img{height:auto;max-width:100%;margin-top:0;margin-bottom:2.5rem}pre{background-color:#f1f1f1;display:block;padding:1em;overflow-x:auto;margin-top:0;margin-bottom:2.5rem}code{font-size:.9em;padding:0 .5em;background-color:#f1f1f1;white-space:pre-wrap}pre>code{padding:0;background-color:transparent;white-space:pre}table{text-align:justify;width:100%;border-collapse:collapse}td,th{padding:.5em;border-bottom:1px solid #f1f1f1}input,textarea{border:1px solid #4a4a4a}input:focus,textarea:focus{border:1px solid #2c8898}textarea{width:100%}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;padding:5px 10px;text-align:center;text-decoration:none;white-space:nowrap;background-color:#2c8898;color:#f9f9f9;border-radius:1px;border:1px solid #2c8898;cursor:pointer;box-sizing:border-box}.button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5}.button:focus,.button:hover,button:focus,button:hover,input[type="submit"]:focus,input[type="submit"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="button"]:focus,input[type="button"]:hover{background-color:#982c61;border-color:#982c61;color:#f9f9f9;outline:0}textarea,select,input[type]{color:#4a4a4a;padding:6px 10px;margin-bottom:10px;background-color:#f1f1f1;border:1px solid #f1f1f1;border-radius:4px;box-shadow:none;box-sizing:border-box}textarea:focus,select:focus,input[type]:focus{border:1px solid #2c8898;outline:0}input[type="checkbox"]:focus{outline:1px dotted #2c8898}label,legend,fieldset{display:block;margin-bottom:.5rem;font-weight:600} \ No newline at end of file +html{font-size:62.5%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}body{font-size:1.8rem;line-height:1.618;max-width:38em;margin:auto;color:#4a4a4a;background-color:#f9f9f9;padding:13px}@media(max-width:684px){body{font-size:1.53rem}}@media(max-width:382px){body{font-size:1.35rem}}h1,h2,h3,h4,h5,h6{line-height:1.1;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-weight:700;margin-top:3rem;margin-bottom:1.5rem;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}h1{font-size:2.35em}h2{font-size:2.00em}h3{font-size:1.75em}h4{font-size:1.5em}h5{font-size:1.25em}h6{font-size:1em}p{margin-top:0;margin-bottom:2.5rem}small,sub,sup{font-size:75%}hr{border-color:#2c8898}a{text-decoration:none;color:#2c8898}a:hover{color:#982c61;border-bottom:2px solid #4a4a4a}ul{padding-left:1.4em;margin-top:0;margin-bottom:2.5rem}li{margin-bottom:.4em}blockquote{font-style:italic;margin-left:1.5em;padding-left:1em;border-left:3px solid #2c8898}img{height:auto;max-width:100%;margin-top:0;margin-bottom:2.5rem}pre{background-color:#f1f1f1;display:block;padding:1em;overflow-x:auto;margin-top:0;margin-bottom:2.5rem}code{font-size:.9em;padding:0 .5em;background-color:#f1f1f1;white-space:pre-wrap}pre>code{padding:0;background-color:transparent;white-space:pre}table{text-align:justify;width:100%;border-collapse:collapse}td,th{padding:.5em;border-bottom:1px solid #f1f1f1}input,textarea{border:1px solid #4a4a4a}input:focus,textarea:focus{border:1px solid #2c8898}textarea{width:100%}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;padding:5px 10px;text-align:center;text-decoration:none;white-space:nowrap;background-color:#2c8898;color:#f9f9f9;border-radius:1px;border:1px solid #2c8898;cursor:pointer;box-sizing:border-box}.button[disabled],button[disabled],input[type="submit"][disabled],input[type="reset"][disabled],input[type="button"][disabled]{cursor:default;opacity:.5}.button:focus:enabled,.button:hover:enabled,button:focus:enabled,button:hover:enabled,input[type="submit"]:focus:enabled,input[type="submit"]:hover:enabled,input[type="reset"]:focus:enabled,input[type="reset"]:hover:enabled,input[type="button"]:focus:enabled,input[type="button"]:hover:enabled{background-color:#982c61;border-color:#982c61;color:#f9f9f9;outline:0}textarea,select,input[type]{color:#4a4a4a;padding:6px 10px;margin-bottom:10px;background-color:#f1f1f1;border:1px solid #f1f1f1;border-radius:4px;box-shadow:none;box-sizing:border-box}textarea:focus,select:focus,input[type]:focus{border:1px solid #2c8898;outline:0}input[type="checkbox"]:focus{outline:1px dotted #2c8898}label,legend,fieldset{display:block;margin-bottom:.5rem;font-weight:600} \ No newline at end of file diff --git a/src/basic.css b/src/basic.css index ff0493a..1cba85d 100644 --- a/src/basic.css +++ b/src/basic.css @@ -3,8 +3,8 @@ * {box-sizing: border-box} :root{ ---sans:1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif; ---mono:'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace; +--sans: 1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif; +--mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, 'Courier New', monospace; --c1:#0074d9; --c2:#eee; --c3:#fff; @@ -15,7 +15,7 @@ } @media (prefers-color-scheme: dark) { - :root { + :root { --c2:#333; --c3:#1e1f20; --c4:#fff; @@ -84,7 +84,7 @@ pre,code,input,select,textarea,button,img {border-radius: var(--rc)} /* Forms */ input, select, textarea {font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em} - + button, input[type=submit], input[type=reset], input[type="button"] { -webkit-appearance: none; font-size: 1em; display: inline-block; color: var(--c5); background: var(--c1); border: 0; margin: 4px; padding: 0.6em; cursor: pointer; text-align: center} button:hover, button:focus, input:hover, textarea:hover, select:hover {opacity: 0.8} diff --git a/src/bonsai.css b/src/bonsai.css index 0904cac..5eafa74 100644 --- a/src/bonsai.css +++ b/src/bonsai.css @@ -195,12 +195,6 @@ textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); } -input:invalid, -select:invalid, -button:invalid, -textarea:invalid { - border-color: var(--red); -} input[type="checkbox"], input[type="radio"] { position: relative; diff --git a/src/bullframe.css b/src/bullframe.css index 5467a4d..5e97a27 100644 --- a/src/bullframe.css +++ b/src/bullframe.css @@ -1,5 +1,4 @@ -@charset "UTF-8"; -/*! bullframe.css v3.1.0 | MIT License | https://github.com/marcop135/bullframe.css */ +/*! bullframe.css v3.2.0 | MIT License | https://github.com/marcop135/bullframe.css */ *, *:before, *:after { @@ -41,9 +40,9 @@ html { body { margin: 0; - line-height: 1.5; font-size: 17px; font-size: 1.7rem; + line-height: 1.5; font-weight: 400; text-align: left; font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; @@ -78,21 +77,9 @@ h5, h6 { font-family: inherit; color: inherit; - line-height: 1.2; - margin-bottom: 24px; - margin-bottom: 24px; } - -h1, -h2, -h3 { - margin-bottom: 24px; - margin-bottom: 24px; } - -h4, -h5, -h6 { + line-height: 1.25; margin-bottom: 12px; - margin-bottom: 12px; } + margin-bottom: 1.2rem; } h1 { font-size: 36px; @@ -153,7 +140,7 @@ pre, code, kbd, samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.875em; } code { @@ -182,9 +169,7 @@ abbr[data-original-title] { mark { background-color: #ff0; - color: #000; - font-weight: 700; - font-weight: 600; } + color: #000; } ins { background-color: #ff9; @@ -197,8 +182,7 @@ strong { b, strong { - font-weight: 700; - font-weight: 600; } + font-weight: bolder; } dfn { font-style: italic; } @@ -224,9 +208,10 @@ small { hr { box-sizing: content-box; display: block; - height: 1px; - border: 0; - border-top: 1px solid #999; + height: 0; + border-style: solid; + border-width: 1px 0 0; + color: inherit; margin: 24px 0; margin: 2.4rem 0; padding: 0; @@ -298,6 +283,7 @@ button:focus, [type="url"]:focus, [type="radio"]:focus, [type="checkbox"]:focus, +input[list]:focus, select:focus, textarea:focus { outline: 0; } @@ -336,6 +322,10 @@ dt { dd { margin-left: 0; } +nav li:before { + content: "\200B"; + position: absolute; } + audio, canvas, progress, @@ -369,6 +359,10 @@ figure, figcaption { display: block; } +figcaption { + line-height: 1.375; + font-size: 90%; } + video { height: auto; } @@ -382,6 +376,9 @@ audio:not([controls]) { svg:not(:root) { overflow: hidden; } +svg:not([fill]) { + fill: currentColor; } + progress, meter { display: inline-block; @@ -389,8 +386,24 @@ meter { width: 100%; max-width: 100%; } +progress[value] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + height: 20px; + height: 2rem; + background: #ccc; + color: #007bff; } + +progress[value]::-webkit-progress-bar { + background: #ccc; } + +progress[value]::-webkit-progress-value { + background: #007bff; } + iframe { - border: 0; } + border-style: none; } html input, button, @@ -442,9 +455,6 @@ output { display: block; background-color: transparent; } -::-webkit-file-upload-button { - font: inherit; } - button, html input, select, @@ -466,8 +476,7 @@ fieldset { min-width: 0; } legend { - display: block; - display: table \9; + display: table; max-width: 100%; white-space: normal; border: 0; @@ -476,13 +485,13 @@ legend { margin-bottom: 6px; margin-bottom: 0.6rem; font-size: inherit; - line-height: inherit; + line-height: 1.375; color: inherit; } label { font-weight: 700; - font-weight: 600; font-size: 90%; + line-height: 1.375; margin-bottom: 6px; margin-bottom: 0.6rem; } @@ -534,6 +543,7 @@ html [type="button"], [type="search"], [type="search"]::-webkit-search-decoration, [type="search"]::-webkit-search-cancel-button, +input[list], textarea { -webkit-appearance: none; } @@ -565,6 +575,7 @@ textarea { [type="radio"], [type="checkbox"] { + padding: 0; background-color: #fff; } [type="range"] { @@ -577,10 +588,6 @@ select[multiple] { select[multiple] { background-image: none; } -optgroup::-moz-focus-inner { - border: 0; - padding: 0; } - textarea { height: auto; min-height: 60px; @@ -589,10 +596,7 @@ textarea { vertical-align: top; resize: vertical; } -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +::-moz-focus-inner { padding: 0; border-style: none; } @@ -649,36 +653,8 @@ input::placeholder, textarea::placeholder { color: #666; } -input:invalid, -select:invalid, -textarea:invalid, -input:invalid:focus, -select:invalid:focus, -textarea:invalid:focus { - color: #ff0000; - border-color: #ff0000; - box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25); } - -fieldset[disabled] button, -fieldset[disabled] input, -fieldset[disabled] input:after, -fieldset[disabled] input:before, -fieldset[disabled] input:checked, -fieldset[disabled] select, -fieldset[disabled] textarea, -fieldset[disabled] label, -button[disabled], -input[disabled], -input[disabled]:after, -input[disabled]:before, -input[disabled]:checked, -select[disabled], -textarea[disabled] { - cursor: default !important; - cursor: not-allowed !important; - pointer-events: none !important; - box-shadow: none !important; - opacity: 0.5 !important; } +:-moz-ui-invalid { + box-shadow: none; } [type="email"], [type="number"], @@ -694,12 +670,13 @@ textarea[disabled] { [type="time"], [type="url"], [type="range"], +input[list], select, textarea { background-color: #fff; border: 1px solid #999; padding: 6px 9px; - padding: 0.6rem 9px; } + padding: 0.6rem 0.9rem; } @media \0screen { [type="email"], @@ -715,7 +692,8 @@ textarea { [type="week"], [type="time"], [type="url"], - [type="range"] { + [type="range"], + input[list] { padding-top: 0; padding-bottom: 0; height: 38px; @@ -735,7 +713,8 @@ textarea { [type="week"], [type="time"], [type="url"], - [type="range"] { + [type="range"], + input[list] { line-height: 1.2; } } [type="email"]:active, [type="email"]:focus, @@ -763,6 +742,8 @@ textarea { [type="time"]:focus, [type="url"]:active, [type="url"]:focus, +input[list]:active, +input[list]:focus, select:active, select:focus, textarea:active, @@ -806,6 +787,48 @@ button, [type="submit"]:focus { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); } +fieldset[disabled] button, +fieldset[disabled] input, +fieldset[disabled] input:after, +fieldset[disabled] input:before, +fieldset[disabled] input:checked, +fieldset[disabled] select, +fieldset[disabled] textarea, +fieldset[disabled] label, +button[disabled], +input[disabled], +input[disabled]:after, +input[disabled]:before, +input[disabled]:checked, +select[disabled], +textarea[disabled], +label[disabled], +button:disabled, +input:disabled, +input:disabled:after, +input:disabled:before, +input:disabled:checked, +select:disabled, +textarea:disabled, +label:disabled, +button[aria-disabled="true"], +input[aria-disabled="true"], +input[aria-disabled="true"]:after, +input[aria-disabled="true"]:before, +input[aria-disabled="true"]:checked, +select[aria-disabled="true"], +textarea[aria-disabled="true"], +label[aria-disabled="true"] { + cursor: default !important; + cursor: not-allowed !important; + pointer-events: none !important; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; + box-shadow: none !important; + opacity: 0.5 !important; } + select:not([size]):not([multiple]) { -webkit-appearance: none; -moz-appearance: none; @@ -819,9 +842,23 @@ select:not([size]):not([multiple]) { padding-right: 24px; padding-right: 2.4rem; } -@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) { - select { - padding-right: 6px; +*[dir="rtl"] select:not([size]):not([multiple]), +select[dir="rtl"]:not([size]):not([multiple]) { + background-position: left 0.85rem top 50%; + padding-right: 9px; + padding-right: 0.9rem; + padding-left: 24px; + padding-left: 2.4rem; } + +@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + select:not([size]):not([multiple]) { + padding-right: 9px; } + *[dir="rtl"] select:not([size]):not([multiple]), + select[dir="rtl"]:not([size]):not([multiple]) { + padding-left: 9px; } + select:not([size]):not([multiple]), + *[dir="rtl"] select:not([size]):not([multiple]), + select[dir="rtl"]:not([size]):not([multiple]) { background-image: none; background-repeat: repeat; } } @@ -831,17 +868,24 @@ select:not([size]):not([multiple]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; - height: 2.8rem; - width: 2.8rem; + height: 2rem; + width: 2rem; vertical-align: top; position: relative; border: 1px solid #999; } [type="checkbox"] + label, [type="radio"] + label { - line-height: 2.8rem; + line-height: 2rem; vertical-align: top; margin-left: 6px; margin-left: 0.6rem; } + *[dir="rtl"] [type="checkbox"] + label, + [type="checkbox"][dir="rtl"] + label, *[dir="rtl"] + [type="radio"] + label, + [type="radio"][dir="rtl"] + label { + margin-left: 0; + margin-right: 6px; + margin-right: 0.6rem; } [type="checkbox"]:after, [type="radio"]:after { content: ""; @@ -851,31 +895,25 @@ select:not([size]):not([multiple]) { [type="radio"]:checked { background-color: #007bff; border-color: #000; } + [type="radio"]:after { + width: 2rem; + height: 2rem; + left: -0.05rem; + top: -0.05rem; + border-radius: 50%; + background: #fff; + -webkit-transform: scale(0.35); + transform: scale(0.35); } [type="checkbox"]:after { width: 0.6rem; - height: 1rem; + height: 0.8rem; border: 2px solid #fff; border-top: 0; border-left: 0; - left: 1rem; - top: 0.7rem; + left: 35%; + top: 20%; -webkit-transform: rotate(43deg); - transform: rotate(43deg); } - [type="radio"]:after { - width: 2.8rem; - height: 2.8rem; - left: 0; - top: 0; - border-radius: 50%; - background: #fff; - -webkit-transform: scale(0.35); - transform: scale(0.35); } } - -@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) { - @media screen and (-webkit-min-device-pixel-ratio: 0) { - [type="radio"]:after { - left: -0.05rem; - top: -0.05rem; } } } + transform: rotate(43deg); } } table { max-width: 100%; @@ -898,11 +936,12 @@ caption { padding-bottom: 0.6rem; color: #999; text-align: left; - caption-side: bottom; } + caption-side: bottom; + line-height: 1.375; + font-size: 90%; } th { - font-weight: 700; - font-weight: 600; } + font-weight: 700; } .bf-container, .bf-container--fluid { @@ -910,17 +949,10 @@ th { display: block; margin-right: auto; margin-left: auto; - padding-left: 12px; - padding-left: 1.2rem; - padding-right: 12px; - padding-right: 1.2rem; } - @media (min-width: 768px) { - .bf-container, - .bf-container--fluid { - padding-left: 24px; - padding-left: 2.4rem; - padding-right: 24px; - padding-right: 2.4rem; } } + padding-left: 15px; + padding-left: 1.5rem; + padding-right: 15px; + padding-right: 1.5rem; } .bf-container:before, .bf-container:after, .bf-container--fluid:before, .bf-container--fluid:after { @@ -936,16 +968,10 @@ th { .bf-row { display: block; - margin-left: -12px; - margin-left: -1.2rem; - margin-right: -12px; - margin-right: -1.2rem; } - @media (min-width: 768px) { - .bf-row { - margin-left: -24px; - margin-left: -2.4rem; - margin-right: -24px; - margin-right: -2.4rem; } } + margin-left: -15px; + margin-left: -1.5rem; + margin-right: -15px; + margin-right: -1.5rem; } .bf-row:before, .bf-row:after { content: " "; display: table; } @@ -956,16 +982,10 @@ th { float: left; position: relative; min-height: 1px; - padding-left: 12px; - padding-left: 1.2rem; - padding-right: 12px; - padding-right: 1.2rem; } - @media (min-width: 768px) { - [class^="bf-col-"] { - padding-left: 24px; - padding-left: 2.4rem; - padding-right: 24px; - padding-right: 2.4rem; } } + padding-left: 15px; + padding-left: 1.5rem; + padding-right: 15px; + padding-right: 1.5rem; } .bf-no-gutters { margin-right: 0; @@ -1064,13 +1084,13 @@ table th[class^="bf-col"] { visibility: hidden !important; } .bf-text-hide { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; - margin: 0; - padding: 0; } + font: 0/0 a !important; + color: transparent !important; + text-shadow: none !important; + background-color: transparent !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; } /* // taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css @@ -1083,15 +1103,15 @@ table th[class^="bf-col"] { * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe */ .bf-sr-only { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; } + border: 0 !important; + clip: rect(0, 0, 0, 0) !important; + height: 1px !important; + margin: -1px !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 1px !important; } /* // taken from https://github.com/h5bp/html5-boilerplate/blob/v7.3.0/dist/css/main.css @@ -1111,24 +1131,24 @@ table th[class^="bf-col"] { width: auto; } .bf-invisible { - visibility: hidden; } + visibility: hidden !important; } .bf-visible { - visibility: visible; } + visibility: visible !important; } .bf-display-block { - display: block; } + display: block !important; } .bf-display-block-center { - display: block; - margin-left: auto; - margin-right: auto; } + display: block !important; + margin-left: auto !important; + margin-right: auto !important; } .bf-display-inline { - display: inline; } + display: inline !important; } .bf-display-inline-block { - display: inline-block; } + display: inline-block !important; } .bf-display-flex { display: -webkit-flex !important; @@ -1139,22 +1159,23 @@ table th[class^="bf-col"] { display: inline-flex !important; } .bf-float-right { - float: right; } + float: right !important; } .bf-float-left { - float: left; } + float: left !important; } .bf-position-fixed { - position: fixed; } + position: fixed !important; } .bf-align-center-unknown { - display: table; - width: 100%; } + position: relative !important; } .bf-align-center-unknown--item { - display: table-cell; - text-align: center; - vertical-align: middle; } + position: absolute !important; + top: 50% !important; + left: 50% !important; + -webkit-transform: translate(-50%, -50%) !important; + transform: translate(-50%, -50%) !important; } .bf-m-0 { margin: 0 !important; } @@ -1235,70 +1256,66 @@ table th[class^="bf-col"] { padding-bottom: 3.6rem !important; } .bf-t-transform-uppercase { - text-transform: uppercase; } + text-transform: uppercase !important; } .bf-t-transform-none { - text-transform: none; } + text-transform: none !important; } .bf-t-left { - text-align: left; } + text-align: left !important; } .bf-t-center { - text-align: center; } + text-align: center !important; } .bf-t-right { - text-align: right; } + text-align: right !important; } .bf-t-shadow { - text-shadow: 0 0 0.2rem #222; } + text-shadow: 0 0 0.2rem #222 !important; } .bf-t-italic { - font-style: italic; } + font-style: italic !important; } .bf-t-style-normal { - font-style: normal; } + font-style: normal !important; } .bf-t-weight-400 { - font-weight: 400; } + font-weight: 400 !important; } .bf-t-weight-500 { - font-weight: 500; } + font-weight: 500 !important; } .bf-t-weight-600 { - font-weight: 600; } + font-weight: 600 !important; } .bf-t-weight-700 { - font-weight: 700; } + font-weight: 700 !important; } .bf-text-break { - word-wrap: break-word; } + word-wrap: break-word !important; } .bf-t-truncate { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - word-wrap: normal; } + max-width: 100% !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + word-wrap: normal !important; } .bf-no-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-touch-callout: none; } + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; + -webkit-touch-callout: none !important; } .bf-font-sans-serif { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; } + font-family: Catamaran, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .bf-font-serif { - font-family: Georgia, Times, "Times New Roman", serif; } + font-family: Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .bf-font-monospace { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", - "Courier New", monospace; } + font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; } .bf-h1, .bf-h2, @@ -1306,53 +1323,48 @@ table th[class^="bf-col"] { .bf-h4, .bf-h5, .bf-h6 { - font-weight: 700; - font-weight: 600; - margin-top: 0; } - -.bf-h1, -.bf-h2, -.bf-h3 { - margin-bottom: 24px; - margin-bottom: 24px; } - -.bf-h4, -.bf-h5, -.bf-h6 { - margin-bottom: 12px; - margin-bottom: 12px; } + font-weight: 700 !important; + font-weight: 600 !important; + margin-top: 0 !important; + line-height: 1.2 !important; + margin-bottom: 12px !important; + margin-bottom: 1.2rem !important; } .bf-h1 { - font-size: 36px; - font-size: 3.6rem; } + font-size: 36px !important; + font-size: 3.6rem !important; } .bf-h2 { - font-size: 30px; - font-size: 3rem; } + font-size: 30px !important; + font-size: 3rem !important; } .bf-h3 { - font-size: 24px; - font-size: 2.4rem; } + font-size: 24px !important; + font-size: 2.4rem !important; } .bf-h4 { - font-size: 20px; - font-size: 2rem; } + font-size: 20px !important; + font-size: 2rem !important; } .bf-h5, .bf-h6 { - font-size: 17px; - font-size: 1.7rem; } + font-size: 17px !important; + font-size: 1.7rem !important; } p.bf-lead { - font-size: 120%; } + font-size: 120% !important; } -@supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) { - @media (min-width: 320px) { - body.bf-responsive-typography { - font-size: calc(1.7rem + 3 * ((100vw - 320px) / 680)); } } - @media (min-width: 1000px) { - body.bf-responsive-typography { - font-size: 2rem; } } } +body.bf-responsive-typography { + --body-rt-font-size-flex: calc(1.7rem + 3 * ((100vw - 320px) / 680)); + --body-rt-font-size-max: 2rem; } + +@media (min-width: 320px) { + body.bf-responsive-typography { + font-size: var(--body-rt-font-size-flex); } } + +@media (min-width: 1000px) { + body.bf-responsive-typography { + font-size: var(--body-rt-font-size-max); } } .bf-btn { display: inline-block; @@ -1396,30 +1408,102 @@ p.bf-lead { fieldset[disabled] .bf-btn, .bf-btn[disabled], -.bf-btn.bf-disabled { +.bf-btn:disabled +.bf-btn[aria-disabled="true"] { cursor: default !important; cursor: not-allowed !important; - pointer-events: none; - opacity: 0.5 !important; - box-shadow: none; } + pointer-events: none !important; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; + box-shadow: none !important; + opacity: 0.5 !important; } .bf-focused { - transition: border 0.2s, background-color 0.2s, box-shadow 0.2s; - border-color: #007bff; - box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25); } - -.bf-disabled { + transition: border 0.2s, background-color 0.2s, box-shadow 0.2s !important; + border-color: #007bff !important; + box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.25) !important; } + +.bf-disabled, +.bf-disabled:hover, +.bf-disabled:active, +.bf-disabled:focus, +.bf-disabled:after, +.bf-disabled:before, +.bf-disabled:invalid, +.bf-disabled:checked { cursor: default !important; cursor: not-allowed !important; pointer-events: none !important; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; box-shadow: none !important; - opacity: 0.5 !important; } + opacity: 0.5 !important; + background-color: #fff; + border-color: #999; } + +label.bf-disabled { + background-color: transparent; + border-color: transparent; } + +button.bf-disabled, +[type="button"].bf-disabled, +[type="reset"].bf-disabled, +[type="submit"].bf-disabled, +.bf-btn.bf-disabled { + cursor: default; + cursor: not-allowed; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-shadow: none; + opacity: 0.5; + color: #222; + background: #ccc; } + button.bf-disabled:hover, button.bf-disabled:active, button.bf-disabled:focus, + [type="button"].bf-disabled:hover, + [type="button"].bf-disabled:active, + [type="button"].bf-disabled:focus, + [type="reset"].bf-disabled:hover, + [type="reset"].bf-disabled:active, + [type="reset"].bf-disabled:focus, + [type="submit"].bf-disabled:hover, + [type="submit"].bf-disabled:active, + [type="submit"].bf-disabled:focus, + .bf-btn.bf-disabled:hover, + .bf-btn.bf-disabled:active, + .bf-btn.bf-disabled:focus { + box-shadow: none; + color: #222; + background: #ccc; } + +.bf-btn--primary.bf-disabled { + cursor: default; + cursor: not-allowed; + pointer-events: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + box-shadow: none; + opacity: 0.5; + color: #fff; + background: #007bff; } + .bf-btn--primary.bf-disabled:hover, .bf-btn--primary.bf-disabled:active, .bf-btn--primary.bf-disabled:focus { + box-shadow: none; + color: #fff; + background: #007bff; } .bf-invalid, .bf-invalid:focus { - color: #ff0000; - border-color: #ff0000; - box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25); } + color: #ff0000 !important; + border-color: #ff0000 !important; + box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.25) !important; } .bf-list-unstyled, menu ul.bf-list-unstyled, @@ -1433,6 +1517,9 @@ dd.bf-list-unstyled { padding: 0; list-style: none; } +dt { + font-weight: 700; } + .bf-embed-responsive { position: relative; display: block; @@ -1479,6 +1566,7 @@ dd.bf-list-unstyled { .bf-table-responsive.scrollbar { -webkit-overflow-scrolling: auto; } +/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */ /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: @@ -1486,9 +1574,9 @@ dd.bf-list-unstyled { ========================================================================== */ @media print { *, - *:before, - *:after { - background: transparent !important; + *::before, + *::after { + background: #fff !important; color: #000 !important; /* Black prints faster */ box-shadow: none !important; @@ -1496,16 +1584,16 @@ dd.bf-list-unstyled { a, a:visited { text-decoration: underline; } - a[href]:after { + a[href]::after { content: " (" attr(href) ")"; } - abbr[title]:after { + abbr[title]::after { content: " (" attr(title) ")"; } /* - * Don't show links that are fragment identifiers, - * or use the `javascript:` pseudo protocol - */ - a[href^="#"]:after, - a[href^="javascript:"]:after { + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]::after, + a[href^="javascript:"]::after { content: ""; } pre { white-space: pre-wrap !important; } @@ -1514,9 +1602,9 @@ dd.bf-list-unstyled { border: 1px solid #999; page-break-inside: avoid; } /* - * Printing Tables: - * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables - */ + * Printing Tables: + * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables + */ thead { display: table-header-group; } tr, @@ -1545,10 +1633,18 @@ dd.bf-list-unstyled { @media (prefers-reduced-motion: reduce) { .bf-reduced-motion, - .bf-reduced-motion * { - -webkit-animation-duration: 0.01ms !important; - animation-duration: 0.01ms !important; + .bf-reduced-motion::before, + .bf-reduced-motion::after, + .bf-reduced-motion *, + .bf-reduced-motion *::before, + .bf-reduced-motion *::after { + -webkit-animation-delay: -1ms !important; + animation-delay: -1ms !important; + -webkit-animation-duration: 1ms !important; + animation-duration: 1ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; } } + background-attachment: initial !important; + scroll-behavior: auto !important; + transition-delay: 0s !important; + transition-duration: 0s !important; } } diff --git a/src/cirrus.css b/src/cirrus.css index f5bb401..f3778ab 100644 --- a/src/cirrus.css +++ b/src/cirrus.css @@ -44,7 +44,6 @@ ul { img, embed, object, -audio, video { max-width: 100%; height: auto; } @@ -83,6 +82,11 @@ label { display: inline-block; margin: 0.25rem 0; } +fieldset { + padding: 1rem; } + fieldset legend { + font-weight: bold; } + [hidden] { display: none !important; } @@ -95,5302 +99,5904 @@ label { box-shadow: 0 0 0.1rem 0.15rem rgba(240, 61, 77, 0.13); outline: none; } -/* ANIMATIONS */ -/* Spinning loading animation */ -@-webkit-keyframes loading { - from { - transform: rotate(0deg); } - to { - transform: rotate(359deg); } } - -@keyframes loading { - from { - transform: rotate(0deg); } - to { - transform: rotate(359deg); } } - -/* Hover animation */ -.hover-grow { - /* Mouse leave */ - transition-duration: 0.32s; } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -.hover-grow:hover { - /* Mouse enter */ - transform: scale(1.1); - transition-duration: 0.08s; } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -/* Loading button position relatively for loading spinner location */ -.animated.loading { - display: block; - position: relative; } +/* + Global Mixins +*/ +/* BUTTONS */ +/* Button styling */ +/* Un-themed */ +button, +.btn, +[type='submit'] { + line-height: 2rem; + overflow: hidden; + padding: 0.5rem 1.5rem; + border: 1px solid transparent; + border-radius: 0.25rem; + cursor: pointer; + text-align: center; + transition: all var(--animation-duration); + background-color: var(--btn-color); + border-color: var(--btn-border-color); + color: var(--btn-fg); + font-size: 0.75rem; + letter-spacing: 0.03rem; + text-transform: uppercase; + font-family: Montserrat; + min-width: 2rem; + user-select: none; + margin-bottom: 1rem; + outline: none; + --btn-color: #f8f9fa; + --btn-fg: #495057; + --btn-border-color: #dee2e6; + /* Base States */ + /* Loading Button*/ + /* Make the loading circle, if present, white when button is active */ + /* Animated Button */ + /* Close Button */ + /* BUTTON STYLES */ + /* Regular */ + /* Extra small button */ + /* Small button */ + /* Big button */ + /* STATES */ + /* GLYPHS */ + /* Alternatives to pad-left and pad-right */ } + button:hover, + .btn:hover, + [type='submit']:hover { + transition: all var(--animation-duration); + --btn-color: #e9ecef; } + button:active, + .btn:active, + [type='submit']:active { + transition: var(--animation-duration) ease; } + button:focus, + .btn:focus, + [type='submit']:focus { + outline: none; } + button:disabled, + .btn:disabled, + [type='submit']:disabled { + cursor: not-allowed; + opacity: 0.5; } + button.loading:active::after, + .btn.loading:active::after, + [type='submit'].loading:active::after { + border-radius: 50%; + border-right-color: transparent; + border-top-color: transparent; + transition: var(--animation-duration) ease; } + button.btn-animated, + .btn.btn-animated, + [type='submit'].btn-animated { + transition: calc(var(--animation-duration) / 2) ease; } + button.btn-animated:active, + .btn.btn-animated:active, + [type='submit'].btn-animated:active { + -webkit-transform: scale(0.98); + transform: inherit, scale(0.98); + transition: calc(var(--animation-duration) / 2) ease; } + button.btn-close, + .btn.btn-close, + [type='submit'].btn-close { + background-color: rgba(10, 10, 10, 0.2); + border: none; + border-radius: 290486px; + cursor: pointer; + display: inline-block; + flex-grow: 0; + flex-shrink: 0; + font-size: 0; + height: 20px; + outline: 0; + position: relative; + vertical-align: top; + width: 20px; + padding: 0; + min-width: 20px; + /* Render the x in the close button */ } + button.btn-close:hover, + .btn.btn-close:hover, + [type='submit'].btn-close:hover { + background-color: var(--gray-900); } + button.btn-close::before, + .btn.btn-close::before, + [type='submit'].btn-close::before { + background-color: var(--cirrus-bg); + content: ''; + display: block; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + -webkit-transform-origin: center center; + transform-origin: center center; } + button.btn-close::after, + .btn.btn-close::after, + [type='submit'].btn-close::after { + background-color: var(--cirrus-bg); + content: ''; + display: block; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + -webkit-transform-origin: center center; + transform-origin: center center; } + button.btn-transparent, + .btn.btn-transparent, + [type='submit'].btn-transparent { + --btn-color: transparent; + --btn-fg: var(--cirrus-dark); + --btn-border-color: transparent; } + button.btn-transparent:focus, + .btn.btn-transparent:focus, + [type='submit'].btn-transparent:focus { + box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); } + button.btn-transparent:hover, + .btn.btn-transparent:hover, + [type='submit'].btn-transparent:hover { + --btn-color: rgba(0, 0, 0, 0.1); } + button.btn-transparent.outline, + .btn.btn-transparent.outline, + [type='submit'].btn-transparent.outline { + --btn-color: var(--cirrus-dark); } + button.btn-light, + .btn.btn-light, + [type='submit'].btn-light { + --btn-color: var(--cirrus-light); + --btn-fg: var(--cirrus-dark); + --btn-border-color: var(--cirrus-light); } + button.btn-light:hover, + .btn.btn-light:hover, + [type='submit'].btn-light:hover { + --btn-color: var(--cirrus-light-hover); } + button.btn-light:focus, + .btn.btn-light:focus, + [type='submit'].btn-light:focus { + box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); } + button.btn-dark, + .btn.btn-dark, + [type='submit'].btn-dark { + --btn-color: var(--cirrus-dark); + --btn-fg: var(--cirrus-light); + --btn-border-color: var(--cirrus-dark); } + button.btn-dark:focus, + .btn.btn-dark:focus, + [type='submit'].btn-dark:focus { + box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); } + button.btn-dark:hover, + .btn.btn-dark:hover, + [type='submit'].btn-dark:hover { + --btn-color: var(--cirrus-dark-hover); } + button.btn-dark.outline:hover, + .btn.btn-dark.outline:hover, + [type='submit'].btn-dark.outline:hover { + --btn-color: var(--cirrus-dark); } + button.btn-black, + .btn.btn-black, + [type='submit'].btn-black { + --btn-color: #000; + --btn-fg: var(--cirrus-light); + --btn-border-color: #000; } + button.btn-black:focus, + .btn.btn-black:focus, + [type='submit'].btn-black:focus { + box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); } + button.btn-black:hover, + .btn.btn-black:hover, + [type='submit'].btn-black:hover { + --btn-color: #000; } + button.btn-primary, + .btn.btn-primary, + [type='submit'].btn-primary { + --btn-color: var(--cirrus-primary); + --btn-fg: var(--cirrus-light); + --btn-border-color: var(--cirrus-accent-border); } + button.btn-primary:focus, + .btn.btn-primary:focus, + [type='submit'].btn-primary:focus { + box-shadow: 0 0 0 0.2rem rgba(240, 61, 77, 0.5); } + button.btn-primary:hover, + .btn.btn-primary:hover, + [type='submit'].btn-primary:hover { + --btn-color: var(--cirrus-accent-hover); } + button.btn-primary.outline:hover, + .btn.btn-primary.outline:hover, + [type='submit'].btn-primary.outline:hover { + --btn-color: var(--cirrus-primary); } + button.btn-info, + .btn.btn-info, + [type='submit'].btn-info { + --btn-color: var(--cirrus-info); + --btn-fg: var(--cirrus-light); + --btn-border-color: var(--cirrus-info); } + button.btn-info:focus, + .btn.btn-info:focus, + [type='submit'].btn-info:focus { + box-shadow: 0 0 0 0.2rem rgba(41, 114, 250, 0.5); } + button.btn-info:hover, + .btn.btn-info:hover, + [type='submit'].btn-info:hover { + --btn-color: var(--cirrus-info-hover); } + button.btn-info.outline:hover, + .btn.btn-info.outline:hover, + [type='submit'].btn-info.outline:hover { + --btn-color: var(--cirrus-info); } + button.btn-link, + .btn.btn-link, + [type='submit'].btn-link { + --btn-color: var(--cirrus-link); + --btn-fg: var(--cirrus-light); + --btn-border-color: var(--cirrus-link); } + button.btn-link:focus, + .btn.btn-link:focus, + [type='submit'].btn-link:focus { + box-shadow: 0 0 0 0.2rem rgba(94, 92, 199, 0.5); } + button.btn-link:hover, + .btn.btn-link:hover, + [type='submit'].btn-link:hover { + --btn-color: var(--cirrus-link-dark); } + button.btn-link.outline, + .btn.btn-link.outline, + [type='submit'].btn-link.outline { + --btn-fg: var(--cirrus-link); + border: 1px solid transparent; } + button.btn-link.outline:hover, + .btn.btn-link.outline:hover, + [type='submit'].btn-link.outline:hover { + --btn-color: var(--cirrus-link-hover); + border: 1px solid transparent; + text-decoration: underline; } + button.btn-success, + .btn.btn-success, + [type='submit'].btn-success { + --btn-color: var(--cirrus-success); + --btn-fg: var(--cirrus-light); + --btn-border-color: var(--cirrus-success); } + button.btn-success:focus, + .btn.btn-success:focus, + [type='submit'].btn-success:focus { + box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.5); } + button.btn-success:hover, + .btn.btn-success:hover, + [type='submit'].btn-success:hover { + --btn-color: var(--cirrus-success-hover); } + button.btn-success.outline:hover, + .btn.btn-success.outline:hover, + [type='submit'].btn-success.outline:hover { + --btn-color: var(--cirrus-success); } + button.btn-warning, + .btn.btn-warning, + [type='submit'].btn-warning { + --btn-color: var(--cirrus-warning); + --btn-fg: var(--cirrus-dark); + --btn-border-color: var(--cirrus-warning); } + button.btn-warning:focus, + .btn.btn-warning:focus, + [type='submit'].btn-warning:focus { + box-shadow: 0 0 0 0.2rem rgba(250, 182, 51, 0.5); } + button.btn-warning:hover, + .btn.btn-warning:hover, + [type='submit'].btn-warning:hover { + --btn-color: var(--cirrus-warning-hover); } + button.btn-warning.outline:hover, + .btn.btn-warning.outline:hover, + [type='submit'].btn-warning.outline:hover { + --btn-color: var(--cirrus-warning); } + button.btn-danger, + .btn.btn-danger, + [type='submit'].btn-danger { + --btn-color: var(--cirrus-danger); + --btn-fg: var(--cirrus-light); + --btn-border-color: var(--cirrus-danger); } + button.btn-danger:focus, + .btn.btn-danger:focus, + [type='submit'].btn-danger:focus { + box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.5); } + button.btn-danger:hover, + .btn.btn-danger:hover, + [type='submit'].btn-danger:hover { + --btn-color: var(--cirrus-danger-hover); } + button.btn-danger.outline:hover, + .btn.btn-danger.outline:hover, + [type='submit'].btn-danger.outline:hover { + --btn-color: var(--cirrus-danger); } + button.btn-xsmall, + .btn.btn-xsmall, + [type='submit'].btn-xsmall { + padding: 0 0.5rem; + font-size: 50%; } + button.btn-small, + .btn.btn-small, + [type='submit'].btn-small { + padding: 0.25rem 1rem; + font-size: 70%; } + button.btn-large, + .btn.btn-large, + [type='submit'].btn-large { + padding: 0.75rem 2rem; + font-size: 90%; } + button.btn-xlarge, + .btn.btn-xlarge, + [type='submit'].btn-xlarge { + padding: 1rem 2.5rem; + font-size: 110%; } + button.btn-success, + .btn.btn-success, + [type='submit'].btn-success { + border-color: var(--cirrus-success) !important; } + button.btn-success:focus, + .btn.btn-success:focus, + [type='submit'].btn-success:focus { + box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } + button.btn-error, + .btn.btn-error, + [type='submit'].btn-error { + border-color: var(--cirrus-danger) !important; } + button.btn-error:focus, + .btn.btn-error:focus, + [type='submit'].btn-error:focus { + box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } + button .fa-wrapper, + .btn .fa-wrapper, + [type='submit'] .fa-wrapper { + /* Override default behavior of aligning font awesome icons to the top */ + vertical-align: baseline; } + button .fa-wrapper.pad-right, + .btn .fa-wrapper.pad-right, + [type='submit'] .fa-wrapper.pad-right { + margin-right: 0.4rem; } + button .fa-wrapper.pad-left, + .btn .fa-wrapper.pad-left, + [type='submit'] .fa-wrapper.pad-left { + margin-left: 0.4rem; } + button span:first-child, + .btn span:first-child, + [type='submit'] span:first-child { + margin-right: 0.2rem; } + button span:last-child, + .btn span:last-child, + [type='submit'] span:last-child { + margin-left: 0.2rem; } + +/* Deprecated 0.5.6, use m-1 instead */ +[class^='btn-'], +[class*=' btn-'] { + background-color: var(--btn-color); + border: 1px solid var(--btn-border-color); + color: var(--btn-fg); + transition: all var(--animation-duration); + /* Outline Variants */ } + [class^='btn-']:hover, + [class*=' btn-']:hover { + background-color: var(--btn-color); + border-color: var(--btn-border-color); + transition: all var(--animation-duration); } + [class^='btn-'].outline, + [class*=' btn-'].outline { + background-color: transparent; + color: var(--btn-color); } + [class^='btn-'].outline:hover, + [class*=' btn-'].outline:hover { + background-color: var(--btn-color); + color: var(--btn-fg); + transition: all var(--animation-duration); } -/* Loading Spinner, align center by default */ -.animated.loading::after { - border: 2px solid #ccc; - border-radius: 50%; +/* Make the loader white so it is visible */ +.loading.btn-accent:after { + border: 2px solid #fff; border-right-color: transparent; - border-top-color: transparent; - content: ""; - display: block; - height: 1rem; - width: 1rem; - left: calc(50% - (1em / 1.25)); - top: calc(50% - (1em / 1.35)); - position: absolute; - -webkit-animation: loading 500ms infinite linear; - animation: loading 500ms infinite linear; } - -.animated.loading.loading-white::after { - border-left-color: #fff; - border-bottom-color: #fff; } + border-top-color: transparent; } -/* Align spinner left */ -.animated.loading.loading-left::after { - left: 2rem; - right: auto; } +/* BUTTON GROUPS */ +/* Will group buttons with components in a single component */ +.btn-group { + /* -ms-flex-wrap: wrap; Deprecated 0.5.6, allow for overflow + flex-wrap: wrap; Wrap contents to next row on overflow */ + display: -webkit-inline-box; + display: inline-flex; + display: -ms-inline-flexbox; + display: -webkit-inline-flex; } + .btn-group .btn { + -ms-flex: 1 0 auto; + -webkit-box-flex: 1; + flex: 1 0 auto; + margin: 0; } + .btn-group .btn:first-child:not(:last-child) { + /* Style the first child in group > 1 buttons */ + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .btn-group .btn:last-child:not(:first-child) { + /* Style the last child in group > 1 buttons */ + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -0.1rem; } + .btn-group .btn:not(:first-child):not(:last-child) { + /* Style button in middle of group */ + border-radius: 0; + /* Remove roundness from center buttons */ + margin-left: -0.1rem; } + .btn-group button { + -ms-flex: 1 0 auto; + -webkit-box-flex: 1; + flex: 1 0 auto; + margin: 0; } + .btn-group button:first-child:not(:last-child) { + /* Style the first child in group > 1 buttons */ + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .btn-group button:last-child:not(:first-child) { + /* Style the last child in group > 1 buttons */ + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -0.1rem; } + .btn-group button:not(:first-child):not(:last-child) { + /* Style button in middle of group */ + border-radius: 0; + /* Remove roundness from center buttons */ + margin-left: -0.1rem; } + .btn-group [type="submit"] { + -ms-flex: 1 0 auto; + -webkit-box-flex: 1; + flex: 1 0 auto; + margin: 0; } + .btn-group [type="submit"]:first-child:not(:last-child) { + /* Style the first child in group > 1 buttons */ + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .btn-group [type="submit"]:last-child:not(:first-child) { + /* Style the last child in group > 1 buttons */ + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -0.1rem; } + .btn-group [type="submit"]:not(:first-child):not(:last-child) { + /* Style button in middle of group */ + border-radius: 0; + /* Remove roundness from center buttons */ + margin-left: -0.1rem; } + .btn-group.btn-group-fill { + /* Makes the button group fill the width and proportion the buttons to fill the space */ + display: -webkit-box; + display: flex; + display: -ms-flexbox; } + .btn-group.btn-group-fill .btn { + -ms-flex: 1 0; + -webkit-box-flex: 1; + flex: 1 0; + /* Make the buttons fill the available width and proportion themselves */ } + .btn-group.btn-group-fill button { + -ms-flex: 1 0; + -webkit-box-flex: 1; + flex: 1 0; + /* Make the buttons fill the available width and proportion themselves */ } + .btn-group.btn-group-fill [type="submit"] { + -ms-flex: 1 0; + -webkit-box-flex: 1; + flex: 1 0; + /* Make the buttons fill the available width and proportion themselves */ } -.animated.loading.loading-left { - padding-left: 4rem; } +@media screen and (max-width: 768px) { + .btn-group { + display: flex; + flex-direction: column; } + .btn-group .btn { + margin-bottom: -1px; } + .btn-group .btn:first-child:not(:last-child) { + border-radius: 0.25rem 0.25rem 0 0; } + .btn-group .btn:not(:first-child):not(:last-child) { + margin-left: 0; } + .btn-group .btn:last-child:not(:first-child) { + border-radius: 0 0 0.25rem 0.25rem; + margin-left: 0; } + .btn-group button { + margin-bottom: -1px; } + .btn-group button:first-child:not(:last-child) { + border-radius: 0.25rem 0.25rem 0 0; } + .btn-group button:not(:first-child):not(:last-child) { + margin-left: 0; } + .btn-group button:last-child:not(:first-child) { + border-radius: 0 0 0.25rem 0.25rem; + margin-left: 0; } + .btn-group [type="submit"] { + margin-bottom: -1px; } + .btn-group [type="submit"]:first-child:not(:last-child) { + border-radius: 0.25rem 0.25rem 0 0; } + .btn-group [type="submit"]:not(:first-child):not(:last-child) { + margin-left: 0; } + .btn-group [type="submit"]:last-child:not(:first-child) { + border-radius: 0 0 0.25rem 0.25rem; + margin-left: 0; } } -/* Align spinner right */ -.animated.loading.loading-right::after { - left: auto; - right: 2rem; } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -.animated.loading.loading-right { - padding-right: 4rem; } +/* CODE */ +code { + padding: 0.3rem; + margin: 0.5em 0; + overflow: auto; + background-color: var(--cirrus-code-bg); + color: var(--cirrus-code-fg); + border-radius: 3px; + /* Dark theme for code */ } + code:before { + color: #acb3c2; + content: attr(data-lang); + font-size: 0.9rem; + position: absolute; + right: 1rem; + top: 0.7rem; } + code.dark { + background-color: #363636; + color: #fff; } -/* Hide text in loading button */ -.animated.loading.hide-text { - color: transparent !important; } +pre > code { + font-size: 14px; + display: block; + padding: 2rem 1.5rem 1rem; + white-space: pre-wrap; + word-wrap: break-word; + font-family: Consolas, Monaco, 'Andale Mono', monospace; + text-align: left; + line-height: 1.5; + -moz-tab-size: 4; + tab-size: 4; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + border-left: 0.3rem solid #f03d4d; + margin: 0; + position: relative; + color: #222; } -/* Heart animation */ -@-webkit-keyframes pound { - to { - transform: scale(1.1); } } - -@keyframes pound { - to { - transform: scale(1.1); } } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700"); +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -.animated.pulse { - animation: pound 0.35s infinite alternate; - -webkit-animation: pound 0.35s infinite alternate; - vertical-align: baseline; } +/* FONT */ +/* Constants */ +/* Headers */ +h1 { + font-family: 'Montserrat', sans-serif; + font-size: 2.5rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1rem; } -/* Bounce animations */ -@-webkit-keyframes bounce { - from, - 20%, - 53%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - /* Ease-out based on power of four */ - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - 40%, - 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); } - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); } - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); } } +h2 { + font-family: 'Montserrat', sans-serif; + font-size: 2.25rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1rem; } -@keyframes bounce { - from, - 20%, - 53%, - 80%, - to { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - /* Ease-out based on power of four */ - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - 40%, - 43% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -30px, 0); - transform: translate3d(0, -30px, 0); } - 70% { - -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - -webkit-transform: translate3d(0, -15px, 0); - transform: translate3d(0, -15px, 0); } - 90% { - -webkit-transform: translate3d(0, -4px, 0); - transform: translate3d(0, -4px, 0); } } +h3 { + font-family: 'Montserrat', sans-serif; + font-size: 2rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1rem; } -.animated.bounce { - animation-name: bounce; - -webkit-animation-name: bounce; - transform-origin: center bottom; - -webkit-transform-origin: center bottom; } +h4 { + font-family: 'Montserrat', sans-serif; + font-size: 1.75rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1rem; } -@keyframes bounceIn { - from, - 20%, - 40%, - 60%, - 80%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); } - 20% { - transform: scale3d(1.1, 1.1, 1.1); } - 40% { - transform: scale3d(0.9, 0.9, 0.9); } - 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); } - 80% { - transform: scale3d(0.97, 0.97, 0.97); } - to { - opacity: 1; - transform: scale3d(1, 1, 1); } } +h5 { + font-family: 'Montserrat', sans-serif; + font-size: 1.5rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1rem; } -.animated.bounceIn { - animation-name: bounceIn; } +h6 { + font-family: 'Montserrat', sans-serif; + font-size: 1.25rem; + font-weight: 700; + line-height: 1.2; + margin-bottom: 1rem; } -@-webkit-keyframes fadeIn { - from { - opacity: 0; } - to { - opacity: 1; } } +/* Silent header Deprecated 0.5.6 +h1 .silent, +h2 .silent, +h3 .silent, +h4 .silent, +h5 .silent, +h6 .silent { + color: #788196; +} */ +h1 { + letter-spacing: 0.025rem; } -@keyframes fadeIn { - from { - opacity: 0; } - to { - opacity: 1; } } +p, +article, +blockquote { + font-size: 1rem; + line-height: 2; + margin-bottom: 1rem; } -.animated.fadeIn { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; } +p.lead { + font-size: 1.2rem; } -.animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; } +blockquote { + background-color: #f5f5f5; + border-left: 5px solid #dbdbdb; + border-radius: 3px; + font-size: 1.15rem; + margin-bottom: 1rem; + padding: 1rem 2rem; } + blockquote p { + margin: 0; + font-size: 0.95rem; } -.animated.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; } +cite { + opacity: 0.7; } -.animated.infinite.alternate { - animation-direction: alternate; } +mark, +.mark { + padding: 0.2em; + background-color: #f0e8c4; } -.animated.paused { - -webkit-animation-play-state: paused !important; - /* Safari 4.0 - 8.0 */ - animation-play-state: paused !important; } +/* Headlines (for larger titles) */ +.headline-1 { + font-size: 8.5rem; + letter-spacing: 0.05rem; } -/* Avatar */ -.avatar { - border-radius: 50%; - position: relative; - display: block; - margin: auto; - font-size: 1rem; - font-weight: lighter; - width: 3.2rem; - height: 3.2rem; - background-color: var(--cirrus-primary); - overflow: hidden; } +.headline-2 { + font-size: 7.5rem; + letter-spacing: 0.05rem; } -/* Draw text on image just like in Gmail */ -.avatar::before { - content: attr(data-text); - color: #fff; - /* Removed z-index: 1, makes text blurry */ - left: 50%; - top: 50%; - position: absolute; - transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - -moz-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); } +.headline-3 { + font-size: 6.5rem; + letter-spacing: 0.05rem; } -.avatar.avatar--xsmall { - font-size: 0.8rem; - width: 1.6rem; - height: 1.6rem; } +.headline-4 { + font-size: 5.5rem; + letter-spacing: 0.05rem; } -.avatar.avatar--small { - font-size: 1rem; - height: 2.4rem; - width: 2.4rem; } +/* Deprecated, use font-bold */ +.font-alt { + font-family: 'Nunito Sans'; } -.avatar.avatar--large { - font-size: 2rem; - height: 4.8rem; - width: 4.8rem; } +.content h1 { + line-height: 1.125em; + margin: 1rem 0; } -.avatar.avatar--xlarge { - font-size: 2.6rem; - height: 6.4rem; - width: 6.4rem; } +.content h2 { + line-height: 1.125em; + margin: 1rem 0; } -.avatar img.padded { - padding: 0.5rem; - width: 100%; } +.content h3 { + line-height: 1.125em; + margin: 1rem 0; } -/* CARDS */ -.card { - background-color: #fff; - border-radius: 5px; - position: relative; - overflow: hidden; - transition: all .3s; - backface-visibility: hidden; - box-shadow: 0px 5px 12px 0 rgba(42, 51, 83, 0.12), 0px 0px 5px rgba(0, 0, 0, 0.06); - margin-bottom: 1rem; } +.content h4 { + line-height: 1.125em; + margin: 1rem 0; } -.card:hover { - transition: all .3s; - box-shadow: 0px 8px 20px 0 rgba(42, 51, 83, 0.12), 0 5px 5px rgba(0, 0, 0, 0.06); } +.content h5 { + line-height: 1.125em; + margin: 1rem 0; } -.slide-up:hover .card-image { - transform: translateY(-40px); } +.content h6 { + line-height: 1.125em; + margin: 1rem 0; } -.card:hover .card-image::after { - opacity: 0; } +/* TODO: To deprecate */ +.title { + font-weight: bold; } -.card-image { - bottom: 0; - left: 0; - position: absolute; - right: 0; - top: 0; - border-radius: 5px 5px 0 0; - background-size: cover; - background-repeat: no-repeat; - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; } +.title:not(:last-child), +.subtitle:not(:last-child) { + margin-bottom: 1rem; } -.card-image::after { - content: ''; - display: block; - position: absolute; - background-color: rgba(0, 0, 0, 0.1); - top: 0; - left: 0; - right: 0; - -webkit-transition: all 500ms; - transition: all 500ms; - bottom: 0; } +.title + .subtitle { + /* Make the subtitlte closer to the title */ + margin-top: -0.75rem; } -.card-container { - display: block; - position: relative; - height: 40%; - min-height: 332px; - /* So it appears in html5 standards mode */ } +/* Use default line-height for these texts and when line-height-inherit is specified */ +.card-tile p, +.card-tile article, +.card-tile blockquote { + line-height: inherit; } -.card .title-container .title, -.card .title-container .subtitle { - color: #fff; - margin: 1rem auto; } +/* Weights */ +.font-thin { + font-weight: 200; } -.card .title-container { - position: absolute; - bottom: 1rem; - width: 100%; - padding: 0 1rem; } +.font-light { + font-weight: 300; } -.card .title-container .title { - font-weight: 300; - font-size: 1.5rem; - margin-bottom: 0; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } +.font-normal { + font-weight: 400; } -/* Allow for the cards to have the same height when u-flex is used on the card */ -.card.u-flex .content { - flex-grow: 1; } +.font-semibold { + font-weight: 600; } -.card .action-bar { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - padding: 0.5rem; - border-top: 1px solid #e0e0e0; - box-sizing: border-box; - -webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1); - transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1); } +.font-bold { + font-weight: 700; } -/* Add some padding to the buttons */ -.card .action-bar button, -.card .action-bar .btn, -.card .action-bar [type='submit'] { - margin: 0 0.5rem; } +/* Text Transformations */ +.uppercase { + text-transform: "uppercase"; } -.card .action-bar + .card-footer { - padding: 1rem 0; - border-top: 1px solid #e0e0e0; } +.lowercase { + text-transform: "lowercase"; } -.card button, -.card .btn { - display: inline-block; - border-color: transparent; } +.capitalize { + text-transform: "capitalize"; } -.card button:hover, -.card .btn:hover { - -webkit-transform: none; - transform: none; } +.rtl { + direction: rtl; } -.card button:focus, -.card .btn:focus { - -webkit-transform: none; - transform: none; } +.white { + color: #fff !important; } -/* More card components in second example */ -.mobile-title { - position: absolute; - left: 0; - background-color: var(--cirrus-bg); - -moz-transition: .3s ease-in-out; - -ms-transition: all .3s ease-in-out; - transition: .3s ease-in-out; - width: 100%; - padding: 2rem 0 0 0; - backface-visibility: hidden; } +.faded { + opacity: 0.75; } -.card:hover .mobile-title { - margin-top: -7rem; - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; } +.font-italic { + font-style: italic; } -.card:hover .card-body { - opacity: 1; - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -ms-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; } +/* Font Awesome */ +.icon { + /* Usually used in spans */ + display: inline-block; + /* font-size: 21px; Allow font sizes for icons to be overwritten */ + /* line-height: 1.5rem; Allow line height to be inherited or overwritten */ + text-align: center; + width: 1.5rem; + vertical-align: baseline; } + .icon.x-small { + margin: 0.55rem 0 0 0.1rem; } + .icon.small { + margin: 0.95rem 0 0 0.1rem; } + .icon .fa-wrapper { + font-size: inherit; + vertical-align: middle; } -.card-body { - opacity: 0; - -webkit-transition: all var(--animation-duration) ease-in-out; - -moz-transition: all var(--animation-duration) ease-in-out; - -ms-transition: all var(--animation-duration) ease-in-out; - transition: all var(--animation-duration) ease-in-out; } +.info { + display: block; + font-size: var(--font-size-s); + margin-top: 0.25rem; + color: #868e96; } + .info.inline { + /* Keeps the extra info inline */ + display: inline-block; + margin-left: 0.5rem; } -.card-footer { - position: relative; - font-size: 0.75rem; - color: #9fa5a8; } +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: 4px dashed; + border-top: 4px solid\9; + border-right: 4px solid transparent; + border-left: 4px solid transparent; } -.card p { - margin: 1rem 0; - /*max-height: 8rem; /* Prevents ridiculously looking cards */ } +/* Other text elements */ +abbr[title] { + border-bottom: 0.1rem dotted; + cursor: help; + text-decoration: none; } + +kbd { + background-color: var(--cirrus-fg); + border-radius: 0.2rem; + color: #fff; + display: inline-block; + line-height: 1; + padding: 0.5rem; + vertical-align: baseline; } + +/* MOBILE */ +@media (max-width: 650px) { + h1 { + font-size: 2.25rem; } + h2 { + font-size: 2rem; } + h3 { + font-size: 1.75rem; } + h4 { + font-size: 1.5rem; } + h5 { + font-size: 1.25rem; } + h6 { + font-size: 1rem; } + .headline-1 { + font-size: 3.75rem; } + .headline-2 { + font-size: 3.5rem; } + .headline-3 { + font-size: 3.25rem; } + .headline-4 { + font-size: 3rem; } + p, + article, + blockquote { + margin: 1rem 0; } } /* - NOTE: To have cards with the same height, place the card class with col-x classes and have the parent have fluid-container. + Functions */ -/* Card Title Bar */ -.card-head { - align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - display: flex; - display: -webkit-box; - display: -ms-flexbox; - border-bottom: 1px solid #e0e0e0; } - -.card-head-title { - align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - font-weight: 700; - padding: 0 1rem; } - -/* EXTENDED FORM */ -/* Base class layout for extended form */ -.form-ext-control { - display: block; - min-height: 1.5rem; - padding-left: 1.5rem; - position: relative; } - -/* Hides the original input */ -.form-ext-input { - opacity: 0; - position: absolute; - z-index: -1; } - -.form-ext-input:disabled ~ .form-ext-label { - opacity: 0.4; } - -.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label:before { - background-color: var(--cirrus-success); } - -.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label { - color: var(--cirrus-success); } +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label:before { - background-color: var(--cirrus-danger); } +/* FOOTER */ +.footer { + background-color: #212529; + padding: 6rem 0; + text-align: center; + margin-top: 5rem; + width: 100%; } + .footer.footer--fixed { + bottom: 0; + position: fixed; } + .footer a { + color: #fff; + font-weight: bolder; } + .footer p { + color: #868e96; } + .footer ul { + margin: 0.5rem 0; + /* Remove the left margin seen in global style */ } + .footer .footer__title { + text-align: center; + letter-spacing: 6px; + position: relative; + padding-bottom: 10px; } + .footer .footer__list-title { + font-size: 75%; + text-transform: uppercase; + font-weight: bolder; + color: #ddd; } + .footer .footer__list-title::after { + content: ''; + display: block; + width: 10%; + margin: auto; + border-bottom: 2px solid; + border-color: #343b49; } + .footer ul a .footer__list-item, + .footer .footer__list-item { + margin: 0.1rem; + color: #868e96; + transition: all var(--animation-duration); + font-size: 75%; + text-transform: uppercase; } -.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label { - color: var(--cirrus-danger); } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -.form-ext-label { - margin-bottom: 0; - position: relative; } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -/* Base of custom form inputs */ -.form-ext-label:before, -.form-ext-label:after { - content: ""; - display: block; - height: 1rem; - left: -1.5rem; - position: absolute; - top: .3rem; - transition: all var(--animation-duration); - width: 1rem; } +/* + Global Mixins +*/ +/* FORMS */ +/* + Mixins +*/ +/* + Styles +*/ +input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) { + width: 100%; + border: 1px solid #dee2e6; + border-radius: 3px; + font-family: 'Nunito Sans'; + font-size: var(--font-size-m); + letter-spacing: 0.02rem; + transition: all 0.3s; + outline: none; + padding: 0.85rem 1.1rem; + /* Input Field Sizes */ + /* Hold Font Awesome glyphs inside input fields */ + /* More sizes coming soon */ + /* Search field */ } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xsmall, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xsmall { + font-size: var(--font-size-xs); + padding: 0.35rem 0.9rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-small, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-small { + font-size: var(--font-size-s); + padding: 0.55rem 1rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-large, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-large { + font-size: var(--font-size-l); } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-xlarge, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']) select.input-xlarge { + font-size: var(--font-size-xl); } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left { + padding-left: 2.75rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right { + padding-right: 2.75rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall { + padding-left: 2rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xsmall ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xsmall ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xsmall ~ .icon.icon-right { + line-height: 1.75rem; + width: 1.75rem; + font-size: 7px; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small { + padding-left: 2.5rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-small ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-small ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-small ~ .icon.icon-right { + line-height: 2rem; + width: 2.5rem; + font-size: 14px; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large { + padding-left: 3.5rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-large ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-large ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-large ~ .icon.icon-right { + line-height: 3.5rem; + width: 3.5rem; + font-size: 28px; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge, input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge { + padding-left: 4rem; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon.input-xlarge ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-left.input-xlarge ~ .icon, + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-contains-icon-right.input-xlarge ~ .icon.icon-right { + line-height: 2.5rem; + width: 3.75rem; + font-size: 35px; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='search'], input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).search { + background-repeat: no-repeat; + background-position: left 0.6rem center; + background-image: url('data:image/svg+xml;utf8,'); + /* NEEDS FIXING */ + padding-left: 2rem !important; + -webkit-appearance: none; + /* Fix Safari issue */ } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset'])[type='color'] { + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); + box-sizing: border-box; + transition: 0.3s; + outline: 0; + position: relative; + height: 3rem; + background-color: #fff; + padding: 0.55rem 0.8rem !important; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success { + border-color: var(--cirrus-success) !important; + background-color: rgba(0, 224, 0, 0.05) !important; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-success:focus { + box-shadow: 0 0 0 0.2rem rgba(13, 209, 87, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error { + border-color: var(--cirrus-danger) !important; + background-color: rgba(244, 67, 54, 0.05) !important; } + input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']).input-error:focus { + box-shadow: 0 0 0 0.2rem rgba(251, 65, 67, 0.55), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } -.form-ext-label:before { - background-color: var(--cirrus-light); - border: 1px solid #d5d7dc; - border-radius: .25rem; - pointer-events: none; - user-select: none; - box-sizing: border-box; } +textarea, +textarea[type='text'] { + width: 100%; + border: 1px solid #dee2e6; + border-radius: 3px; + font-family: 'Nunito Sans'; + font-size: var(--font-size-m); + letter-spacing: 0.02rem; + transition: all 0.3s; + outline: none; + padding: 0.85rem 1.1rem; + /* Input Field Sizes */ + /* Hold Font Awesome glyphs inside input fields */ + /* More sizes coming soon */ + margin: 0.5rem 0; + padding: 1rem 1.3rem; + min-height: 8rem; + line-height: 1.5rem; + resize: vertical; } + textarea.input-xsmall, + textarea select.input-xsmall, + textarea[type='text'].input-xsmall, + textarea[type='text'] select.input-xsmall { + font-size: var(--font-size-xs); + padding: 0.35rem 0.9rem; } + textarea.input-small, + textarea select.input-small, + textarea[type='text'].input-small, + textarea[type='text'] select.input-small { + font-size: var(--font-size-s); + padding: 0.55rem 1rem; } + textarea.input-large, + textarea select.input-large, + textarea[type='text'].input-large, + textarea[type='text'] select.input-large { + font-size: var(--font-size-l); } + textarea.input-xlarge, + textarea select.input-xlarge, + textarea[type='text'].input-xlarge, + textarea[type='text'] select.input-xlarge { + font-size: var(--font-size-xl); } + textarea.input-contains-icon, textarea.input-contains-icon-left, + textarea[type='text'].input-contains-icon, + textarea[type='text'].input-contains-icon-left { + padding-left: 2.75rem; } + textarea.input-contains-icon-right, + textarea[type='text'].input-contains-icon-right { + padding-right: 2.75rem; } + textarea.input-contains-icon.input-xsmall, textarea.input-contains-icon-right.input-xsmall, + textarea[type='text'].input-contains-icon.input-xsmall, + textarea[type='text'].input-contains-icon-right.input-xsmall { + padding-left: 2rem; } + textarea.input-contains-icon.input-xsmall ~ .icon, + textarea.input-contains-icon-left.input-xsmall ~ .icon, + textarea.input-contains-icon-right.input-xsmall ~ .icon.icon-right, + textarea[type='text'].input-contains-icon.input-xsmall ~ .icon, + textarea[type='text'].input-contains-icon-left.input-xsmall ~ .icon, + textarea[type='text'].input-contains-icon-right.input-xsmall ~ .icon.icon-right { + line-height: 1.75rem; + width: 1.75rem; + font-size: 7px; } + textarea.input-contains-icon.input-small, textarea.input-contains-icon-right.input-small, + textarea[type='text'].input-contains-icon.input-small, + textarea[type='text'].input-contains-icon-right.input-small { + padding-left: 2.5rem; } + textarea.input-contains-icon.input-small ~ .icon, + textarea.input-contains-icon-left.input-small ~ .icon, + textarea.input-contains-icon-right.input-small ~ .icon.icon-right, + textarea[type='text'].input-contains-icon.input-small ~ .icon, + textarea[type='text'].input-contains-icon-left.input-small ~ .icon, + textarea[type='text'].input-contains-icon-right.input-small ~ .icon.icon-right { + line-height: 2rem; + width: 2.5rem; + font-size: 14px; } + textarea.input-contains-icon.input-large, textarea.input-contains-icon-right.input-large, + textarea[type='text'].input-contains-icon.input-large, + textarea[type='text'].input-contains-icon-right.input-large { + padding-left: 3.5rem; } + textarea.input-contains-icon.input-large ~ .icon, + textarea.input-contains-icon-left.input-large ~ .icon, + textarea.input-contains-icon-right.input-large ~ .icon.icon-right, + textarea[type='text'].input-contains-icon.input-large ~ .icon, + textarea[type='text'].input-contains-icon-left.input-large ~ .icon, + textarea[type='text'].input-contains-icon-right.input-large ~ .icon.icon-right { + line-height: 3.5rem; + width: 3.5rem; + font-size: 28px; } + textarea.input-contains-icon.input-xlarge, textarea.input-contains-icon-right.input-xlarge, + textarea[type='text'].input-contains-icon.input-xlarge, + textarea[type='text'].input-contains-icon-right.input-xlarge { + padding-left: 4rem; } + textarea.input-contains-icon.input-xlarge ~ .icon, + textarea.input-contains-icon-left.input-xlarge ~ .icon, + textarea.input-contains-icon-right.input-xlarge ~ .icon.icon-right, + textarea[type='text'].input-contains-icon.input-xlarge ~ .icon, + textarea[type='text'].input-contains-icon-left.input-xlarge ~ .icon, + textarea[type='text'].input-contains-icon-right.input-xlarge ~ .icon.icon-right { + line-height: 2.5rem; + width: 3.75rem; + font-size: 35px; } + +input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='reset']):focus, +select:focus, +textarea:focus, +textarea[type='text']:focus, +input[type='text'].input-focused, +.input-focused { + border-color: #3dabf0; + box-shadow: 0 0 0 0.2rem rgba(61, 171, 240, 0.45), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } -.form-ext-label:after { - background-position: center; - background-repeat: no-repeat; - background-size: 50% 50%; } +select { + width: 100%; + border: 1px solid #dee2e6; + border-radius: 3px; + font-family: 'Nunito Sans'; + font-size: var(--font-size-m); + letter-spacing: 0.02rem; + transition: all 0.3s; + outline: none; + padding: 0.85rem 1.1rem; + /* Input Field Sizes */ + /* Hold Font Awesome glyphs inside input fields */ + /* More sizes coming soon */ + background-color: #fff; + border: 1px solid #ddd; + /* Fixes for Safari and other browsers for consistent UI */ + /* Select sizes */ } + select.input-xsmall, + select select.input-xsmall { + font-size: var(--font-size-xs); + padding: 0.35rem 0.9rem; } + select.input-small, + select select.input-small { + font-size: var(--font-size-s); + padding: 0.55rem 1rem; } + select.input-large, + select select.input-large { + font-size: var(--font-size-l); } + select.input-xlarge, + select select.input-xlarge { + font-size: var(--font-size-xl); } + select.input-contains-icon, select.input-contains-icon-left { + padding-left: 2.75rem; } + select.input-contains-icon-right { + padding-right: 2.75rem; } + select.input-contains-icon.input-xsmall, select.input-contains-icon-right.input-xsmall { + padding-left: 2rem; } + select.input-contains-icon.input-xsmall ~ .icon, + select.input-contains-icon-left.input-xsmall ~ .icon, + select.input-contains-icon-right.input-xsmall ~ .icon.icon-right { + line-height: 1.75rem; + width: 1.75rem; + font-size: 7px; } + select.input-contains-icon.input-small, select.input-contains-icon-right.input-small { + padding-left: 2.5rem; } + select.input-contains-icon.input-small ~ .icon, + select.input-contains-icon-left.input-small ~ .icon, + select.input-contains-icon-right.input-small ~ .icon.icon-right { + line-height: 2rem; + width: 2.5rem; + font-size: 14px; } + select.input-contains-icon.input-large, select.input-contains-icon-right.input-large { + padding-left: 3.5rem; } + select.input-contains-icon.input-large ~ .icon, + select.input-contains-icon-left.input-large ~ .icon, + select.input-contains-icon-right.input-large ~ .icon.icon-right { + line-height: 3.5rem; + width: 3.5rem; + font-size: 28px; } + select.input-contains-icon.input-xlarge, select.input-contains-icon-right.input-xlarge { + padding-left: 4rem; } + select.input-contains-icon.input-xlarge ~ .icon, + select.input-contains-icon-left.input-xlarge ~ .icon, + select.input-contains-icon-right.input-xlarge ~ .icon.icon-right { + line-height: 2.5rem; + width: 3.75rem; + font-size: 35px; } + select[multiple] option { + padding: 0.2rem 0.4rem; } + select.select:not([size]):not([multiple]) { + background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right 0.85rem center/0.5rem 0.6rem no-repeat; + -webkit-appearance: none; } + select.input-xsmall { + padding: 0.65rem 0.9rem; } + select.input-small { + padding: 0.75rem 1rem; } + select.input-large { + padding: 0.95rem 1.2rem; } + select.input-xlarge { + padding: 1.05rem 1.3rem; } + +input:not([class*='btn-']):disabled, +input:not([class*=' btn-']):disabled:hover, +select:disabled, +textarea:disabled { + background-color: #f1f3f5; + cursor: not-allowed; + border: 1px solid #f1f3f5; } -/* Checked state */ -.form-ext-control .form-ext-input:checked ~ .form-ext-label:before { - background-color: var(--cirrus-primary); } +label.label { + color: #495057; + display: inline-block; + /* changed from block */ + font-weight: bold; + margin-top: 0.8rem; } -/* Checkbox */ -.form-ext-control.form-ext-checkbox .form-ext-input:checked ~ .form-ext-label:after { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); } +label.label:not(:last-child) { + margin-bottom: 0; } -.form-ext-checkbox .form-ext-label:before { - border-radius: .25rem; } +label:first-child:not(:last-child):not(.form-group-label) { + margin-right: 0.5rem; } -/* Radio Button */ -.form-ext-control.form-ext-radio .form-ext-input:checked ~ .form-ext-label:after { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); } +label:not(:first-child):not(:last-child):not(.form-group-label) { + margin: 0 0.5rem; } -.form-ext-radio .form-ext-label:before { - border-radius: 50%; } +label:last-child:not(:first-child):not(.form-group-label) { + margin-left: 0.5rem; } -/* Toggle Switches */ -.form-ext-toggle { - cursor: pointer; - position: relative; } +/* Required asterisk */ +.required { + /* Use this in a span or a div */ + position: relative; + top: 1px; + font-weight: bold; + color: #DB3839; + padding-left: 0.1rem; } -.form-ext-toggle input[type="checkbox"], -.form-ext-toggle input[type="radio"] { - opacity: 0; - position: absolute; - z-index: -1; } +/* Used for when the input controls have another control adjacent to it but we want to position it inside the input field like font-awesome glyphs. As of 0.5.2, it is the default container for input fields. */ +.input-control { + position: relative; + margin: 0.5rem 0; } -.form-ext-toggle__label { - align-items: center; +.input-contains-icon ~ .icon { display: flex; - justify-content: space-between; } + align-items: center; + justify-content: center; + height: 100%; } -.form-ext-toggle__toggler { - border: 1px solid var(--cirrus-gray); - border-radius: 6.25rem; - color: var(--cirrus-gray); - display: block; - font-size: 9px; - height: 1.5rem; - position: relative; - width: 3rem; } +.input-contains-icon ~ .icon:not(.icon-right), +.input-contains-icon-left ~ .icon.icon-left { + /* Nomral input only */ + position: absolute; + left: 0; + top: 0; + width: 3rem; + z-index: 1; } -.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler, -.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler, -.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler, -.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler { - background-color: var(--cirrus-primary); - border-color: var(--cirrus-primary); - color: #fff; - position: relative; - transition: all .4s ease; } +.input-contains-icon-right ~ .icon.icon-right { + position: absolute; + pointer-events: none; + line-height: 2.75rem; + vertical-align: baseline; + top: 0; + right: 0; + width: 3rem; + z-index: 1; } -.form-ext-toggle i { - display: inline-block; } +/* Form section just adds extra spacing between form elements tiled vertically */ +.form-section { + /* A flexbox version of form-section for inline forms */ } + .form-section:not(:last-child) { + margin-bottom: 0.5rem; } + .form-section.section-inline { + display: flex; } + .form-section button { + align-items: center; + flex-grow: 0; + /* Keep it from taking up extra space */ + display: flex; + flex-shrink: 0; } + .form-section input, + .form-section .section-body { + align-items: center; + flex-grow: 1; } -.form-ext-input:disabled ~ .form-ext-toggle__toggler { - opacity: 0.5; } +/* Form groups that group inputs with other controls. */ +.form-group { + /* This is just an extended portion of an input which is just like a label and is read only */ + /* This will style the controls if they are the leftmost control in the form group for labels, inputs, and buttons. */ + display: flex; + display: -ms-flexbox; + margin: 0.5rem 0; + /* Add margin to the container since they have been removed from children */ + /* Fixes the text width being cut off */ + /* Form group controls */ + /* Keeps inputs in form group above other components */ } + .form-group .form-group-btn { + -webkit-flex: 1 0 auto; + -ms-flex: 1 0 auto; + flex: 1 0 auto; + margin-bottom: 0; + /* Style the front controls */ + /* Style the middle controls */ + /* Handles right most control in form group */ } + .form-group .form-group-btn:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .form-group .form-group-btn:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -0.1rem; + margin-right: -0.1rem; + /* Remove spacing in middle controls */ } + .form-group .form-group-btn:last-child:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -0.1rem; } + .form-group .form-group-label { + background-color: var(--cirrus-form-group-bg); + border: 1px solid #dee2e6; + border-radius: 0.2rem; + color: var(--cirrus-form-group-fg); + margin: 0; + padding: 0.8rem; + user-select: none; + z-index: 1; + /* Style the front controls */ + /* Style the middle controls */ + /* Handles right most control in form group */ } + .form-group .form-group-label:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .form-group .form-group-label:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -0.1rem; + margin-right: -0.1rem; + /* Remove spacing in middle controls */ } + .form-group .form-group-label:last-child:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -0.1rem; } + .form-group .form-group-label.label-xsmall { + font-size: 0.55rem; + padding: 0.5rem 0.9rem; } + .form-group .form-group-label.label-small { + font-size: 0.75rem; + padding: 0.55rem 1rem; } + .form-group .form-group-label.label-large { + font-size: 1.5rem; } + .form-group .form-group-label.label-xlarge { + font-size: 2rem; } + .form-group .form-group-input { + /* Style the front controls */ + /* Style the middle controls */ + /* Handles right most control in form group */ } + .form-group .form-group-input:first-child:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + .form-group .form-group-input:not(:first-child):not(:last-child) { + border-radius: 0; + margin-left: -0.1rem; + margin-right: -0.1rem; + /* Remove spacing in middle controls */ } + .form-group .form-group-input:last-child:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + margin-left: -0.1rem; } -.form-ext-toggle__toggler i::before, -.form-ext-toggle__toggler i::after { - content: ""; - display: block; - position: absolute; } +/* Change place holder color */ +::-moz-placeholder { + color: #a9a9a9; + /* Lighter than the default */ } -.form-ext-toggle__toggler i::before { - /* TODO SET CONTENT */ - content: attr(data-uncheck-icon); - padding: 2px 7px; - line-height: 18px; - text-align: right; - top: 0; - width: 65%; - font-size: 12px; } +::-webkit-input-placeholder { + color: #a9a9a9; + /* Lighter than the default */ } -.form-ext-toggle__toggler i::after { - background-color: var(--cirrus-gray); - border-radius: 50%; - height: 16px; - left: 4px; - width: 16px; - transform: translateY(-50%); - transition: left var(--animation-duration) ease; - text-align: left; } +@media screen and (max-width: 768px) { + /* Remove flex in form-section */ + .form-section.section-inline { + display: inherit; } } -.form-ext-control .form-ext-input:checked ~ .form-ext-label:before { - border: none; } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler i::after, -.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler i::after, -.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler i::after, -.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler i::after { - background-color: #fff; - left: calc(100% - 20px); } +/* Separate CSS file, but same part as Layout */ +/* The base container that is similar in structure to a card but more flexible */ +.frame { + border-radius: 3px; + box-shadow: 0 0.2rem 1.25rem 0 rgba(27, 30, 36, 0.07); + display: flex; + display: -ms-flexbox; + flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + /* For the frame header and footer, use flex display */ + /* The frame navbar can be used with level or header classes to create a navigation menu */ } + .frame .frame__header, + .frame .frame__footer { + flex: 0 0 auto; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + padding: 1rem; } + .frame .frame__nav { + flex: 0 0 auto; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; } + .frame .frame__body { + flex: 1 1 auto; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + overflow-y: auto; + /* Show the scrollbar when needed */ + padding: 0 1.5rem; } + .frame .frame__title { + color: #374054; + font-size: 1rem; + margin: .75rem auto 0; } + .frame .frame__subtitle { + color: rgba(55, 64, 84, 0.6); + font-size: 1rem; + margin: 0 auto .75rem; } -.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler i::before, -.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler i::before, -.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler i::before, -.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler i::before { - color: #fff; - content: attr(data-check-icon); - text-align: left; } +/* HEADER */ +.header { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 0; + width: 100%; + z-index: 100; + margin-bottom: 20px; + box-shadow: 0 3px 15px rgba(57, 63, 72, 0.1); + background-color: var(--cirrus-bg); + max-height: 100vh; + padding: 0 2rem; + transition: all .3s; + /* Remove any padding set for headers in default.scss */ } + .header h1 { + margin: 0; } + .header h2 { + margin: 0; } + .header h3 { + margin: 0; } + .header h4 { + margin: 0; } + .header h5 { + margin: 0; } + .header h6 { + margin: 0; } -.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler i::after, -.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler i::after, -.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler i::after, -.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler i::after { - background-color: #fff; - left: calc(100% - 20px); } +.header a { + color: #8292a2; } -.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked + .form-ext-toggle__toggler, -.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked + * .form-ext-toggle__toggler, -.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked + .form-ext-toggle__toggler, -.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked + * .form-ext-toggle__toggler { - background-color: var(--cirrus-danger); - border-color: var(--cirrus-danger); } +.header a:hover { + color: #697888; } -.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler { - border-color: var(--cirrus-danger); - color: var(--cirrus-danger); } +/* Header dark theme */ +.header-dark { + background-color: rgba(0, 0, 0, 0.87); + color: #fff; } -.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler i::after { - background-color: var(--cirrus-danger); } +.header-clear { + background-color: transparent; + box-shadow: none; } -.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked + .form-ext-toggle__toggler, -.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked + * .form-ext-toggle__toggler, -.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked + .form-ext-toggle__toggler, -.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked + * .form-ext-toggle__toggler { - background-color: var(--cirrus-success); - border-color: var(--cirrus-success); } +/* Add transition to nav menu when it drops down */ +.header.header-animated .header-nav { + -webkit-transition: background 0.4s ease, height 0.4s ease; + transition: background 0.4s ease, height 0.4s ease; + -webkit-transition-property: background, height; + transition-property: background, height; + -webkit-transition-duration: 0.4s, 0.4s; + transition-duration: 0.4s, 0.4s; + -webkit-transition-timing-function: ease, ease; + transition-timing-function: ease, ease; + -webkit-transition-delay: initial, initial; + transition-delay: initial, initial; + -webkit-transition: all 0.3s; + transition: all 0.3s; } -.form-ext-toggle--success .form-ext-toggle__toggler { - border-color: var(--cirrus-success); - color: var(--cirrus-success); } +.header-brand { + -webkit-overflow-scrolling: touch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-negative: 0; + flex-shrink: 0; + max-width: 100vw; + min-height: 3.25rem; + overflow-x: auto; + overflow-y: hidden; } -.form-ext-toggle--success .form-ext-toggle__toggler i::after { - background-color: var(--cirrus-success); } +/* The container that contains all the header menu components. Child of header */ +.header-nav { + /* Flex display 768px and higher */ + overflow: auto; } -/** - * Accessibility - */ -.form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler, -.form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before { - box-shadow: 0 0 0 0.2rem rgba(var(--cirrus-primary-rgb), var(--focus-opacity)), inset 0 1px 8px rgba(0, 0, 0, 0.07); } +/* Styles for header menu (aka the nav bar) */ +.nav-menu { + -webkit-transition: all 0.3s; + transition: all 0.3s; } -.form-ext-toggle.form-ext-toggle--success .form-ext-input:focus + .form-ext-toggle__toggler { - box-shadow: 0 0 0 0.2rem rgba(var(--cirrus-success-rgb), var(--focus-opacity)), inset 0 1px 8px rgba(34, 197, 127, 0.13); } +.nav-item.has-sub { + position: relative; } -.form-ext-input.form-ext-input--success:focus ~ .form-ext-label:before { - border-color: inherit; - box-shadow: 0 0 0 0.2rem rgba(var(--cirrus-success-rgb), var(--focus-opacity)), inset 0 1px 8px rgba(0, 0, 0, 0.07); } +/* Allow the user to scroll through navbar items if it exceeds nav-left, nav-center, or nav-right widths */ +.nav-overflow-x { + -webkit-box-pack: inherit; + -ms-flex-pack: inherit; + justify-content: inherit; + overflow-x: scroll; } -/* GRID */ -:root { - --gap-0: 0; - --gap-1: 0.25rem; - --gap-2: 0.5rem; - --gap-3: 1rem; - --gap-4: 1.25rem; - --gap-5: 1.5rem; - --gap-6: 3rem; - --gap-7: 6rem; - --gap-8: 9rem; - --gap-9: 12rem; } - -.grid { - --grid-gap: --gap-2; - --grid-template-column: repeat(12, minmax(0, 1fr)); - --grid-column-start: auto; - --grid-column-end: auto; - --grid-row-start: auto; - --grid-row-end: auto; - display: grid; - grid-gap: var(--grid-gap); - grid-template-columns: var(--grid-template-column); } - -/* Styling grid cells */ -.grid .c { - grid-column-start: var(--grid-column-start); - grid-column-end: var(--grid-column-end); } - -/* Templates */ -.grid.grid-cols-1 { - --grid-template-column: repeat(1, minmax(0, 1fr)); } - -.grid.grid-cols-2 { - --grid-template-column: repeat(2, minmax(0, 1fr)); } - -.grid.grid-cols-3 { - --grid-template-column: repeat(3, minmax(0, 1fr)); } - -.grid.grid-cols-4 { - --grid-template-column: repeat(4, minmax(0, 1fr)); } - -.grid.grid-cols-5 { - --grid-template-column: repeat(5, minmax(0, 1fr)); } - -.grid.grid-cols-6 { - --grid-template-column: repeat(6, minmax(0, 1fr)); } - -.grid.grid-cols-7 { - --grid-template-column: repeat(7, minmax(0, 1fr)); } - -.grid.grid-cols-8 { - --grid-template-column: repeat(8, minmax(0, 1fr)); } - -.grid.grid-cols-9 { - --grid-template-column: repeat(9, minmax(0, 1fr)); } - -.grid.grid-cols-10 { - --grid-template-column: repeat(10, minmax(0, 1fr)); } - -.grid.grid-cols-11 { - --grid-template-column: repeat(11, minmax(0, 1fr)); } - -.grid.grid-cols-12 { - --grid-template-column: repeat(12, minmax(0, 1fr)); } - -.grid.grid-gap-0 { - --grid-gap: var(--gap-0); } - -.grid.grid-gap-1 { - --grid-gap: var(--gap-1); } - -.grid.grid-gap-2 { - --grid-gap: var(--gap-2); } - -.grid.grid-gap-3 { - --grid-gap: var(--gap-3); } - -.grid.grid-gap-4 { - --grid-gap: var(--gap-4); } +/* Static header at the top of the screen */ +.header-fixed { + position: fixed; + top: 0; + /* Change this if you want to float the header somewhere else */ } -.grid.grid-gap-5 { - --grid-gap: var(--gap-5); } +/* Wrapper to vertically center header items */ +.nav-item { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: all 0.3s; + transition: all 0.3s; + padding: 0 0.3rem; + cursor: pointer; } -.grid.grid-gap-6 { - --grid-gap: var(--gap-6); } +.nav-item a { + align-items: center; + display: flex; } -.grid.grid-gap-7 { - --grid-gap: var(--gap-7); } +/* Hover effect for header elements when appropriate */ +.header:not(.header-clear) .nav-item:not(.no-hover):hover, +.header:not(.header-clear) .nav-item:not(.no-hover).hovered { + -webkit-transition: all 0.3s; + transition: all 0.3s; + background-color: rgba(216, 216, 216, 0.15); } -.grid.grid-gap-8 { - --grid-gap: var(--gap-8); } +.header:not(.header-clear) .nav-item.active, +.header:not(.header-clear) .nav-item.active:hover { + background-color: rgba(216, 216, 216, 0.35); } -.grid.grid-gap-9 { - --grid-gap: var(--gap-9); } +/* HEADER DROP DOWN MENU */ +.nav-item .dropdown-menu { + background-color: var(--cirrus-bg); + position: absolute; + top: 95%; + /*right: 0; /* Unable to solve problem when we have multiple drop down menus */ + z-index: 1000; + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; + font-size: 14px; + text-align: left; + list-style: none; + background-clip: padding-box; + border: 1px solid #eee; + border-radius: 0 0 4px 4px; + box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.1); } -/* Column expansion */ -.grid .grid-c-1 { - grid-column: span 1; } +/* Add border radius to whole menu with clear header */ +.header.header-clear .nav-item .dropdown-menu { + border-radius: 4px; } -.grid .grid-c-2 { - grid-column: span 2; } +/* Just add a transition in general */ +.nav-item .dropdown-menu.dropdown-animated { + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -.grid .grid-c-3 { - grid-column: span 3; } +/* Dropdown menu location adjustment located below for sizes above phones */ +/* Dropdown menu indicator */ +.nav-item.has-sub .nav-dropdown-link::after { + border: 2px solid var(--cirrus-primary); + /* Must be first to create the triangle shape */ + border-right: 0; + /* Create the triangle effect */ + border-top: 0; + display: block; + height: 0.5em; + width: 0.5em; + content: " "; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + pointer-events: none; + margin-top: -0.435em; + right: 1.125em; + top: 50%; + position: absolute; } -.grid .grid-c-4 { - grid-column: span 4; } +/* Add room for the dropdown chevron pseudoelement */ +.nav-item.has-sub .nav-dropdown-link { + padding-right: 2.5rem; + position: relative; + /* Needed for hiding glyphs in mobile header */ } -.grid .grid-c-5 { - grid-column: span 5; } +/* Dark dropdown menu theme */ +.nav-item .dropdown-menu.dropdown-dark, +.header-dark .dropdown-menu { + background-color: rgba(0, 0, 0, 0.87); + border: 1px solid #333; + color: #fff; } -.grid .grid-c-6 { - grid-column: span 6; } +.dropdown-menu.dropdown-shown, +.nav-item.active { + opacity: 1; } -.grid .grid-c-7 { - grid-column: span 7; } +.dropdown-menu > li > a { + display: block; + padding: 0.5rem 1rem; + clear: both; + line-height: 1.42857143; + white-space: nowrap; } -.grid .grid-c-8 { - grid-column: span 8; } +/* Theme for dark menu */ +.header-dark .nav-item a, +.header-dark .dropdown-menu > li > a { + color: #fff; } -.grid .grid-c-9 { - grid-column: span 9; } +.dropdown-menu > li { + margin: 0; + -webkit-transition: all 0.3s; + transition: all 0.3s; } -.grid .grid-c-10 { - grid-column: span 10; } +.dropdown-menu > li:hover { + -webkit-transition: all 0.3s; + transition: all 0.3s; + background-color: rgba(216, 216, 216, 0.15); } -.grid .grid-c-11 { - grid-column: span 11; } +.dropdown-menu > li:active { + -webkit-transition: all 0.3s; + transition: all 0.3s; + background-color: rgba(216, 216, 216, 0.25); } -.grid .grid-c-12 { - grid-column: span 12; } +.dropdown-menu > li:last-child { + margin-bottom: 0; } -/* Row expansion */ -.grid .grid-r-1 { - grid-row: span 1; } +.dropdown-menu .dropdown-menu-divider { + border: none; + background-color: rgba(216, 216, 216, 0.15); + height: 1px; + margin: 0.5rem 0; } -.grid .grid-r-2 { - grid-row: span 2; } +.nav-btn { + cursor: pointer; + display: block; + height: 3.5rem; + position: relative; + width: 3.5rem; } -.grid .grid-r-3 { - grid-row: span 3; } +.header .btn, +.header button, +.header input[type="submit"] { + margin: 0; } -.grid .grid-r-4 { - grid-row: span 4; } - -.grid .grid-r-5 { - grid-row: span 5; } - -.grid .grid-r-6 { - grid-row: span 6; } - -.grid .grid-r-7 { - grid-row: span 7; } - -.grid .grid-r-8 { - grid-row: span 8; } - -.grid .grid-r-9 { - grid-row: span 9; } - -.grid .grid-r-10 { - grid-row: span 10; } - -.grid .grid-r-11 { - grid-row: span 11; } - -.grid .grid-r-12 { - grid-row: span 12; } - -/* Cell Column Start/End */ -.grid .grid-cs-1 { - grid-column-start: 1; } - -.grid .grid-cs-2 { - grid-column-start: 2; } - -.grid .grid-cs-3 { - grid-column-start: 3; } - -.grid .grid-cs-4 { - grid-column-start: 4; } - -.grid .grid-cs-5 { - grid-column-start: 5; } - -.grid .grid-cs-6 { - grid-column-start: 6; } - -.grid .grid-cs-7 { - grid-column-start: 7; } - -.grid .grid-cs-8 { - grid-column-start: 8; } - -.grid .grid-cs-9 { - grid-column-start: 9; } - -.grid .grid-cs-10 { - grid-column-start: 10; } - -.grid .grid-cs-11 { - grid-column-start: 11; } - -.grid .grid-cs-12 { - grid-column-start: 12; } - -.grid .grid-cs-end { - grid-column-end: -1; } - -.grid .grid-ce-1 { - grid-column-end: 2; } - -.grid .grid-ce-2 { - grid-column-end: 3; } - -.grid .grid-ce-3 { - grid-column-end: 4; } - -.grid .grid-ce-4 { - grid-column-end: 5; } - -.grid .grid-ce-5 { - grid-column-end: 6; } - -.grid .grid-ce-6 { - grid-column-end: 7; } - -.grid .grid-ce-7 { - grid-column-end: 8; } - -.grid .grid-ce-8 { - grid-column-end: 9; } - -.grid .grid-ce-9 { - grid-column-end: 10; } - -.grid .grid-ce-10 { - grid-column-end: 11; } - -.grid .grid-ce-11 { - grid-column-end: 12; } - -.grid .grid-ce-12 { - grid-column-end: 13; } - -/* Cell Row Start/End */ -.grid .grid-rs-1 { - grid-row-start: 1; } - -.grid .grid-rs-2 { - grid-row-start: 2; } - -.grid .grid-rs-3 { - grid-row-start: 3; } - -.grid .grid-rs-4 { - grid-row-start: 4; } - -.grid .grid-rs-5 { - grid-row-start: 5; } - -.grid .grid-rs-6 { - grid-row-start: 6; } - -.grid .grid-rs-7 { - grid-row-start: 7; } - -.grid .grid-rs-8 { - grid-row-start: 8; } - -.grid .grid-rs-9 { - grid-row-start: 9; } - -.grid .grid-rs-10 { - grid-row-start: 10; } - -.grid .grid-rs-11 { - grid-row-start: 11; } - -.grid .grid-rs-12 { - grid-row-start: 12; } - -.grid .grid-rs-end { - grid-row-end: -1; } - -.grid .grid-re-1 { - grid-row-end: 2; } - -.grid .grid-re-2 { - grid-row-end: 3; } - -.grid .grid-re-3 { - grid-row-end: 4; } - -.grid .grid-re-4 { - grid-row-end: 5; } - -.grid .grid-re-5 { - grid-row-end: 6; } - -.grid .grid-re-6 { - grid-row-end: 7; } - -.grid .grid-re-7 { - grid-row-end: 8; } - -.grid .grid-re-8 { - grid-row-end: 9; } - -.grid .grid-re-9 { - grid-row-end: 10; } - -.grid .grid-re-10 { - grid-row-end: 11; } - -.grid .grid-re-11 { - grid-row-end: 12; } - -.grid .grid-re-12 { - grid-row-end: 13; } +@media screen and (min-width: 769px) { + .header { + -webkit-box-align: stretch; + /* Box Align and align items to stretch to make nav-items fill up parent height */ + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; } + .header-nav { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 0; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + /* Make items fill up all available space regardless of width https://drafts.csswg.org/css-align/ */ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + text-align: center; + width: 100%; + top: 0; + overflow: visible; + /* Only visible for showing dropdown menus, hidden for mobile */ } + /* These styles can also be used on menus in the body */ + .nav-left, + .nav-right { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + -ms-grid-row-align: stretch; + align-items: stretch; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 0; + flex-shrink: 0; + /*overflow: hidden;*/ } + /* Align items to the left */ + .nav-left { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + /*overflow: hidden; + overflow-x: auto;*/ + white-space: nowrap; } + /* Align items to the right */ + .nav-right { + display: -webkit-box; + display: -ms-flexbox; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + /*overflow: hidden; + overflow-x: auto;*/ + white-space: nowrap; } + /* Centering items, best used when nav-brand is not used to prevent offset */ + .nav-center { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin-left: auto; + margin-right: auto; } + /* Hide hamburger button */ + .nav-btn { + display: none; } + /* .nav-item { + position: relative; /* Include for helping dropdown menu positioning Deprecated 0.5.6 + } */ + /* Expand link area for desktop views so it is easier to click */ + .nav-item a { + padding: 0.5rem 1rem; } + .nav-item .dropdown-menu { + opacity: 0; + pointer-events: none; + /* Make cursor not respond to menu links when not displayed */ } + .nav-item .dropdown-menu.dropdown-animated { + -webkit-transform: translateY(-5px); + /* Used for transitional drop down effect */ + transform: translateY(-5px); } + .nav-item .dropdown-menu.dropdown-shown, + .nav-item.toggle-hover:hover .dropdown-menu, + .nav-item .dropdown-menu.dropdown-animated.dropdown-shown, + .nav-item.toggle-hover:hover .dropdown-animated.dropdown-menu { + opacity: 1; + -webkit-transform: none; + /* Used for transitional drop down effect */ + transform: none; + pointer-events: auto; } + /* Align dropdown menu to the left side of the parent nav-item for header-left */ + .nav-left .has-sub .dropdown-menu { + left: 0; + right: auto; } + /* Align dropdown menu to the right side of the parent nav-item for header-right */ + .nav-right .has-sub .dropdown-menu { + left: auto; + right: 0; } } @media screen and (max-width: 768px) { - .grid { - --grid-template-column: repeat(1, minmax(0, 1fr)); } } - -/* EXTENDED LINKS */ -/* Animated links */ -.u, -.utb { - display: inline; - position: relative; - /* So the psuedo-elements are positioned correctly */ } - -/* Underline */ -.u::after { - content: ""; - transition: all 0.3s; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - position: absolute; - height: 0.1rem; - width: 0; - background: var(--cirrus-link-dark); - bottom: -0.25em; } - -.u:hover::after { - width: 100%; } - -.u-LR::after { - /* Left to Right */ - left: 0; } - -.u-RL::after { - /* Right to Left */ - right: 0; } - -.u-RL:hover::after { - width: 100%; } - -.u-C::after { - /* Center Outwards */ - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); } - -/* Underline top and bottom */ -.utb::before, -.utb::after { - content: ""; - transition: all 0.3s; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - position: absolute; - height: 0.1rem; - width: 0; - background: var(--cirrus-link-dark); } - -.utb::before { - top: -0.25em; } - -.utb::after { - bottom: -0.25em; } - -.utb:hover::before, -.utb:hover::after { - width: 100%; } - -.utb-LR::before, -.utb-LR::after { - left: 0; } - -.utb-RL::before, -.utb-RL::after { - right: 0; } - -.utb-C::before, -.utb-C::after { - left: 50%; - -webkit-transform: translateX(-50%); - transform: translateX(-50%); } - -/* Opposite start */ -.utb-OLR::before { - /* Suffix denotes border transition direction for the top border (left to right). Bottom border will be the opposite direction */ - left: 0; } - -.utb-OLR::after { - right: 0; } - -.utb-ORL::before { - right: 0; } - -.utb-ORL::after { - left: 0; } - -/* Links with square borders */ -/* Please note that usquare is the parent span (not div) which would create the left and right borders. The link (.utb-OLR) gets nested within this */ -.usquare { - margin-left: 0.4rem; - position: relative; - overflow: hidden; } - -.usquare a { - position: static; - padding: 0.2rem 0.4rem; } - -.usquare::before, -.usquare::after { - content: ""; - transition: 0.25s all ease; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - position: absolute; - width: 2px; - width: 0.1 rem; - height: 0; - background: var(--cirrus-link-dark); } - -.usquare::before { - left: 0; - bottom: -0.2rem; } - -.usquare.delay::before { - transition-delay: 0.6s; } - -.usquare::after { - right: 0; - top: -0.2rem; } - -.usquare.delay::after { - transition-delay: var(--animation-duration); } - -.usquare a::before { - left: 0; - transition: 0.25s all ease; } - -.usquare a::after { - right: 0; - transition: 0.25s all ease; } - -.usquare.delay a::after { - transition: 0.25s all ease 0.4s; } + /* Add scrolling support in header */ + .header { + display: flex; + flex-direction: column; } + .header-brand .nav-item:first-child { + padding: 0 1rem; + /* Add padding to the first child, usually the logo */ } + /* Hide dropdon menu on mobile */ + .header-nav { + height: 0; } + /* Show the dropdown */ + .header-nav.active { + height: 100vh; } + /* Remove flex for mobile devices */ + .nav-item.has-sub { + display: block; } + .nav-item.has-sub .dropdown-menu.dropdown-shown { + border-radius: 0; + box-shadow: none; + display: block; + position: relative; + top: 1rem; + float: none; + border: none; + background-color: transparent; + margin-bottom: 1rem; } + .nav-item.has-sub .dropdown-menu.dropdown-dark { + background-color: rgba(0, 0, 0, 0.17); + border: 0; + color: #fff; } + /* Hide the menu by default in mobile view (overflow on header-right can expose it) */ + .nav-item.has-sub .dropdown-menu { + display: none; } + /* Make the menu items larger in the dropdown menu */ + .header-nav .nav-item { + padding: 1rem; } + /* Get rid of extra spaces */ + .header-nav .nav-item > a { + padding: 0; + width: 100%; + /* Stretch the link to span the entire list item */ } + /* Hamburger button */ + .nav-btn { + cursor: pointer; + display: block; + position: relative; + margin-left: auto; } + .nav-btn span { + background-color: #4d565f; + display: block; + height: 2px; + left: 50%; + margin-left: -7px; + position: absolute; + top: 50%; + -webkit-transition: none 86ms ease-out; + transition: none 86ms ease-out; + -webkit-transition-property: background, left, opacity, -webkit-transform; + transition-property: background, left, opacity, -webkit-transform; + transition-property: background, left, opacity, transform; + transition-property: background, left, opacity, transform, -webkit-transform; + width: 15px; } + .header-dark .nav-btn span { + background-color: #fff; } + /* Line spacing in hamburger button */ + .nav-btn span:nth-child(1) { + margin-top: -6px; } + .nav-btn span:nth-child(2) { + margin-top: -1px; } + .nav-btn span:nth-child(3) { + margin-top: 4px; } + /* Hamburger button on active */ + .nav-btn.active span:nth-child(1) { + margin-left: -5px; + transform: rotate(45deg); + transform-origin: left top; } + .nav-btn.active span:nth-child(2) { + opacity: 0; } + .nav-btn.active span:nth-child(3) { + margin-left: -5px; + transform: rotate(-45deg); + transform-origin: left bottom; } + /* Hide drop down menu items */ + .nav-left, + .nav-center, + .nav-right { + overflow: hidden; } } -.usquare:hover::before, -.usquare:hover::after { - height: calc(100% + 0.4rem); - /* Makes the left and right borders */ } +@media screen and (min-width: 1023px) { + .header { + padding: 0 2rem; } } -.usquare:hover a::before, -.usquare:hover a::after { - width: 100%; } +/* HEADER */ +.content { + max-width: 60em; + margin: 0 auto 1.5em; + width: 80%; } -/* The base of the modal dialog, which is an overlay of the webpage */ -.modal { - position: fixed; - /* Scrolls with the user */ +/* .content-no-padding { Removed 0.5.5 + max-width: 60em; + margin: 0 auto; + width: 80%; +} */ +/* Content that centers in parent and fills parent div without the extra vertical margin */ +/* .content-fluid { Removed 0.5.5 + width: 100%; + margin: 0 auto; +} */ +.fullscreen { top: 0; - left: 0; right: 0; bottom: 0; - opacity: 0; - /* Initially hidden */ - padding: 1rem; - display: none; - /* Doesn't block the elements underneath */ - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - /* Vertical centering */ - pointer-events: none; - /* Prevent any pointer events made to modal while hidden */ } - -/* When the modal dialog is visible */ -.modal:target, .modal.shown { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - opacity: 1; - z-index: 999; - pointer-events: auto; - /* Re-enable pointer events */ } - -/* The div in the modal dialpog used to create the translucent background */ -.modal:target .modal-overlay, -.modal.shown .modal-overlay { - position: absolute; - /* Absolute inside of the modal container */ - top: 0; left: 0; - right: 0; - bottom: 0; - display: block; - background-color: rgba(54, 59, 68, 0.5); } - -/* The modal dialog body with the text itself */ -.modal-content { - background-color: var(--cirrus-bg); - padding: 0; - display: block; - border-radius: 3px; - box-shadow: 0 0.4rem 1rem rgba(54, 59, 68, 0.3); - z-index: 1; - color: var(--cirrus-fg); - max-width: 40rem; - /* 640px */ } - -/* Different size modals */ -.modal.modal-small .modal-content { - max-width: 20rem; - /* 320px */ } - -.modal.modal-large .modal-content { - max-width: 60rem; - /* 960px */ } - -.modal-content h1, -.modal-content h2, -.modal-content h3, -.modal-content h4, -.modal-content h5, -.modal-content h6 { - color: var(--cirrus-fg); } - -.modal:target .modal-container, -.modal.shown .modal-container { - -webkit-animation: slide-down var(--animation-duration) ease 1; - animation: slide-down var(--animation-duration) ease 1; - z-index: 1; } - -/* Restrict width */ -.modal-content.small { - max-width: 32rem; } - -.modal-content .modal-header { - padding: 1rem 3rem; } - -.modal-content .modal-header .modal-title { - font-weight: bolder; - font-size: 1.4rem; } - -.modal-content .modal-body { - padding: 1rem 3rem; - overflow-y: auto; - max-height: 50vh; - /* Max height is 50% of viewport height which prevents dialog from extetnding past screen */ - position: relative; } - -.modal-content .modal-footer { - padding: 1rem 3rem; - text-align: right; } - -/* MODAL ANIMATIONS */ -.modal.modal-animated--dropdown { - -webkit-animation: slide-down var(--animation-duration) ease 1; - animation: slide-down var(--animation-duration) ease 1; } - -/* Visible state */ -.modal.modal-animated--zoom-in, .modal.modal-animated--zoom-out { - display: -webkit-box; - /* Force dialog to appear in the center */ - display: -ms-flexbox; - display: flex; - opacity: 0; - transition: 300ms all ease; } + height: 100vh; } -.modal:target.modal-animated--zoom-in, .modal:target.modal-animated--zoom-out { - opacity: 1; - transition: 300ms all ease; } +/* This works well with panel */ +section { + display: block; } -.modal.modal-animated--zoom-in .modal-content { - transform: scale(0.8); - transition: 300ms all ease; } +.panel { + padding: 2.5em 0; } -.modal:target.modal-animated--zoom-in .modal-content, .modal:target.modal-animated--zoom-out .modal-content { - transform: scale(1); - transition: 300ms all ease; } +/* This works well with spans and maybe even hr */ +.divider { + border-top: 0.05rem solid rgba(173, 173, 173, 0.5); + height: 0.1rem; + margin: 1.8rem 0 1.6rem; } -.modal.modal-animated--zoom-out .modal-content { - transform: scale(1.2); - transition: 300ms all ease; } +.divider[data-content] { + margin: 0.8rem 0; } -/* Keyframes for slide down animation */ -@-webkit-keyframes slide-down { - 0% { - opacity: 0; - -webkit-transform: translateY(-3rem); - transform: translateY(-3rem); } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } +.divider--v[data-content] { + display: block; + padding: 0.8rem; } -@keyframes slide-down { - 0% { - opacity: 0; - -webkit-transform: translateY(-3rem); - transform: translateY(-3rem); } - 100% { - opacity: 1; - -webkit-transform: translateY(0); - transform: translateY(0); } } +.divider--v::before { + border-left: 0.05rem solid rgba(173, 173, 173, 0.5); + bottom: 0.4rem; + content: ''; + display: block; + left: 50%; + position: absolute; + top: 0; + transform: translateX(-50%); } -@media only screen and (max-width: 768px) { - .modal-content { - max-width: 90%; } } +.divider--v[data-content]::after, +.divider[data-content]::after { + background: #fff; + color: #bcc3ce; + content: attr(data-content); + left: 50%; + display: inline-block; + padding: 0 0.4rem; + position: absolute; + transform: translate(-50%, -50%); + top: 50%; } -/* A collection of modifiers that extend control styling */ -.btn.btn--pilled, -[class^="btn-"].btn--pilled, -[class*=" btn-"].btn--pilled { - border-radius: 6.25rem; - padding-left: 1.25rem; - padding-right: 1.25rem; } +.divider--v[data-content] { + left: 50%; + padding: 0.2rem 0; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); } -.btn.btn--circle, -[class^="btn-"].btn--circle, -[class*=" btn-"].btn--circle { - border-radius: 100%; - height: 3.125rem; - line-height: 3.125rem; - padding: 0; - width: 3.125rem; } +/* Removed 0.5.5 */ +/* .divider-short { + max-width: 15rem; + width: 100%; +} */ +/* Hero image div */ +.hero-img { + /* Specify the backgroud image yourself */ + background-size: cover; } -/* Input (primary text-based) controls apply to inputs */ -.input-control--pilled { - border-radius: 6.25rem !important; } +.parallax-img { + background-attachment: fixed !important; } -/* Theme modifiers */ -/* GLOBAL THEME SELECTORS */ -.bg-primary { - background-color: var(--cirrus-primary) !important; } +.hero { + /* Parent of hero-body */ + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + /* Important to stretch height of hero-body */ + -webkit-box-orient: vertical; + /* -webkit-box-direction: normal; /* Deprecated 0.5.5 + -ms-flex-direction: column; + flex-direction: column; Stack the items in the container */ + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } -.bg-success { - background-color: var(--cirrus-success) !important; } +.hero-body { + -ms-flex-positive: 1; + flex-grow: 1; + /* Tells the hero-body to take up the entire space */ + -ms-flex-negative: 0; + flex-shrink: 0; + padding: 3rem 1.5rem; + align-items: center; + display: -ms-flexbox; + display: flex; + width: 100%; } -.bg-warning { - background-color: var(--cirrus-warning) !important; } +.space { + display: block; + width: 100%; + height: 1rem; } -.bg-danger { - background-color: var(--cirrus-danger) !important; } +.space.large { + padding: 1rem 0; } -.bg-light { - background-color: var(--cirrus-light) !important; } +.space.xlarge { + padding: 2rem 0; } -.bg-dark { - background-color: var(--cirrus-dark) !important; } +/* Use for spacing out elements vertically */ +.row { + -ms-flex: 1; + flex: 1; + /* max-width: 100%; */ + flex-wrap: wrap; + padding: 0.5rem 0; } -.bg-link { - background-color: var(--cirrus-link) !important; } +.r { + /* Legacy row pre 0.5.5 */ + max-width: 100%; + padding: 0.5rem; } -.bg-link-dark { - background-color: var(--cirrus-link-dark) !important; } +.row.row--no-wrap { + -webkit-flex-wrap: nowrap; + /* Remove wrapping of the columns by default */ + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + overflow-x: auto; + /* Can be disabled to remove scroll bar */ } -.bg-info { - background-color: var(--cirrus-info) !important; } +.row::after { + content: ''; + clear: both; + display: table; } -.text-primary { - color: var(--cirrus-primary) !important; } +/* GRID */ +.row .col { + display: block; + flex: 1; + padding: 0.15rem 0.75rem; } -.text-success { - color: var(--cirrus-success) !important; } +.row .col-1 { + width: 8.33333333%; } -.text-warning { - color: var(--cirrus-warning) !important; } +.row .col-2 { + width: 16.66666667%; } -.text-danger { - color: var(--cirrus-danger) !important; } +.row .col-3 { + width: 25%; } -.text-light { - color: var(--cirrus-light) !important; } +.row .col-4 { + width: 33.33333333%; } -.text-dark { - color: var(--cirrus-dark) !important; } +.row .col-5 { + width: 41.66666667%; } -.text-link { - color: var(--cirrus-link) !important; } +.row .col-6 { + width: 50%; } -.text-link-dark { - color: var(--cirrus-link-dark) !important; } +.row .col-7 { + width: 58.33333333%; } -.text-info { - color: var(--cirrus-info) !important; } +.row .col-8 { + width: 66.66666667%; } -/* PAGINATION */ -/* Parent contianer for page navigation */ -.pagination { - display: flex; - display: -ms-flexbox; } +.row .col-9 { + width: 75%; } -/* Use for the major pagination meant to display about 2 items */ -.pagination-item { - -webkit-flex: 1 0 50%; - /* Flex to fill */ - -ms-flex: 1 0 50%; - flex: 1 0 50%; } +.row .col-10 { + width: 83.33333333%; } -.pagination a { - color: #5d6c7b; } +.row .col-11 { + width: 91.66666667%; } -.pagination .pagination-item a[disabled] { - cursor: pointer; - opacity: 0.5; - pointer-events: none; - user-select: none; } +.row .col-12 { + width: 100%; } -.pagination .pagination-item { - margin: 1rem 0.1rem; - transition: all 0.3s; } +/* Column offsets on the left side */ +.row .offset-1 { + margin-left: 8.33333333%; } -.pagination .pagination-item.pagination-next { - text-align: right; } +.row .offset-2 { + margin-left: 16.66666667%; } -.pagination .pagination-item.pagination-prev { - text-align: left; } +.row .offset-3 { + margin-left: 25%; } -/* Pagination Item */ -.pagination-item-subtitle { - opacity: 0.7; - margin: 0; - /* Needed to override style after formatting paragraph update */ } +.row .offset-4 { + margin-left: 33.33333333%; } -/* Color the selected pagination item with accent color */ -.pagination .pagination-item.short.selected { - background-color: var(--cirrus-primary); - color: #fff; } +.row .offset-5 { + margin-left: 41.66666667%; } -.pagination .pagination-item.short.selected a { - color: #fff; } +.row .offset-6 { + margin-left: 50%; } -.pagination .pagination-item.short a { - display: inline-block; - line-height: 1.25; - padding: 0.5rem 0.75rem; } +.row .offset-7 { + margin-left: 58.33333333%; } -/* Used to display many pagination items */ -.pagination .pagination-item.short { - border-radius: 0.1rem; - margin: 0.2rem 0; - -webkit-flex: 0; - /* Flex to fill */ - -ms-flex: 0; - flex: 0; } +.row .offset-8 { + margin-left: 66.66666667%; } -.pagination .pagination-item.short:first-child a { - border-top-left-radius: .25rem; - border-bottom-left-radius: .25rem; } +.row .offset-9 { + margin-left: 75%; } -.pagination .pagination-item.short:last-child a { - border-top-right-radius: .25rem; - border-bottom-right-radius: .25rem; } +.row .offset-10 { + margin-left: 83.33333333%; } -.pagination .pagination-item.short:not(.selected):hover { - background-color: rgba(0, 0, 0, 0.1); } +.row .offset-11 { + margin-left: 91.66666667%; } -.pagnation .pagination-item.ellipses { - color: #b5b5b5; - pointer-events: none; } +.row .offset-12 { + margin-left: 100%; } -/* Bordered pagination */ -.pagination.pagination-bordered .pagination-item.short a { - border: 1px solid #dedede; - border-radius: 0; - margin-left: -1px; } +/* Auto align col to left in row */ +.row .offset-right { + margin-left: 0; + margin-right: auto; } -/* Not good but CSS does not have heading selectors. Need to move to SASS */ -.pagination .pagination-item:hover p, -.pagination .pagination-item:hover h1, -.pagination .pagination-item:hover h2, -.pagination .pagination-item:hover h3, -.pagination .pagination-item:hover h4, -.pagination .pagination-item:hover h5, -.pagination .pagination-item:hover h6, -.pagination .pagination-item:not(.selected):hover *:not([disabled]):not(.ellipses) { - transition: all 0.3s; - color: var(--cirrus-primary); } +/* Auto align col to middle in row */ +.row .offset-center { + margin-left: auto; + margin-right: auto; } + +/* Auto align col to right in row */ +.row .offset-left { + margin-left: auto; + margin-right: 0; } -/* PLACEHOLDER */ -/* Designed to be embedded in any parent container as placeholder when content is absent. */ -.placeholder { - background-color: rgba(231, 234, 241, 0.5); - border-radius: 3px; - text-align: center; - padding: 3rem 2rem; - color: #6c7892; - /* Lighter than original text color */ - display: block; } +/* Use in parent div of fluid col Deprecated in 0.5.6, use .row +.fluid-container { + display: flex; + overflow: auto; +} -/* Not sure if needed */ -.placeholder-icon { - text-align: center; } +/* Wrap controls instead on overflow +.fluid-container.wrap { + -webkit-align-items: center; + align-items: center; + display: flex; + display: -ms-flexbox; + -ms-flex-align: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} -.placeholder .placeholder-title, -.placeholder .placeholder-subtitle { - margin: 1rem auto; } +/* Resizes elements in a row equally given the number of elements located in it +.fluid-container .col-fluid { + display: block; + -ms-flex-preferred-size: 0; + flex-basis: 0; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 1; + flex-shrink: 1; +} -.placeholder .placeholder-subtitle { - opacity: 0.7; - margin: 0; } +/* No expansion for specific col-fluid columns +.fluid-container .col-fluid.no-flex { + flex-grow: 0; + flex-shrink: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + -ms-flex-negative: 0; +} */ +/* Some offset values */ +.row [class^='col-'], +.row [class*=' col-'] { + float: left; + /* Keeps the elements in 1 row */ + padding: 0 0.5rem; } -/* Place buttons here for the placeholder */ -.placeholder .placeholder-commands { - margin-top: 1rem; } +/* Columns without the spacing */ +.row.no-space [class^='col-'], +.row.no-space [class*=' col-'] { + padding: 0; } -/* TABS AND TAB CONTAINER */ -.tab-container { +/* Ignore overflow in columns */ +/* .row.expand { DEPRECATED 0.5.5 + -webkit-flex-wrap: nowrap; /* Remove wrapping of the columns by default + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + overflow-x: auto; /* Can be disabled to remove scroll bar +} */ +/* Only for divs with .expand so they can go past the parent div width */ +/* .row.expand [class^="col-"], DEPRECATED 0.5.5, no use +.row.expand [class*=" col-"] { + -webkit-flex: none; + -ms-flex: none; + flex: none; +} */ +/* Used for aligning controls next to each other */ +.row.has-controls { display: -webkit-box; display: -ms-flexbox; display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + +/* Divider for multiple elements in a div */ +/* .divided > .fluid-container:not(.row), +.divided > .row [class^="col-"], .divided > .row [class*=" col-"] { DEPRECATED 0.5.5 + box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); +} */ +/* Remove border in first child */ +/* .divided > .row [class^="col-"]:first-child, +.divided > .row [class*=" col-"]:first-child { + box-shadow: none; DEPRECATED 0.5.5 +} */ +.level { + -webkit-box-align: center; + -ms-flex-align: center; + -ms-grid-row-align: center; + align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; - justify-content: space-between; - overflow: hidden; - overflow-x: auto; - /* Allow scrollbar to be visible if the width of the tabs exceeds container */ - user-select: none; - white-space: nowrap; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - font-size: var(--font-size-s); } + justify-content: space-between; } -/* Tabs are embedded inside an unordered list */ -.tab-container ul { - display: flex; +.level-left { + -webkit-box-align: center; + -ms-flex-align: center; + -ms-grid-row-align: center; + align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; - /* Move tab items to left side */ - margin: 0.5rem; - /* Override the behavior for standard ul and add equal padding */ - border-bottom: 1px solid #eee; - /* Bottom border of tabs */ - flex-grow: 1; - list-style: none; - padding-inline-start: 0; } - -.tab-container li { - display: block; - /* Keep the tabs from extending too far */ - cursor: pointer; - margin: 0; - text-align: center; } + /* Start for left */ + margin-right: 1rem; } -.tab-container li a { - display: -webkit-box; - display: -ms-flexbox; - display: flex; +.level-right { -webkit-box-align: center; -ms-flex-align: center; + -ms-grid-row-align: center; align-items: center; - border-bottom: 1px solid #eee; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - padding: 0.5rem 1rem; - transition: all .3s; - color: var(--cirrus-fg); - border-bottom-color: rgba(197, 197, 197, 0.63); - border-width: 2px; - margin-bottom: -1px; - /* Get rid of any remaining border lines */ - background-color: var(--cirrus-bg); } - -.tab-container li:hover a { - border-bottom-color: rgba(240, 61, 77, 0.6); - transition: all .3s; } - -.tab-container li.selected a { - border-bottom-color: var(--cirrus-primary); - color: var(--cirrus-primary); - border-width: 2px; - transition: all .3s; } - -/* Shift tabs to the center */ -.tab-container.tabs-center ul { - justify-content: center; - -webkit-box-pack: center; - -ms-flex-pack: center; } - -/* Shift tabs to the right */ -.tab-container.tabs-right ul { -webkit-box-pack: end; -ms-flex-pack: end; - justify-content: flex-end; } - -/* Depth tab styles */ -.tab-container.tabs-depth ul { - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); - border-bottom: 0; } - -/* Classic tab styles */ -.tab-container.tabs-classic ul { - border-bottom-color: #dbdbdb; - border-bottom-style: solid; - border-bottom-width: 1px; - border-radius: 3px 3px 0 0; - /* Only round the top left and right corners */ - transition: all .3s; } - -.tab-container.tabs-classic li:not(.selected) a:hover { - background-color: #f0f0f0; - transition: all .3s; } - -.tab-container.tabs-classic li a { - border: 1px solid transparent; - border-bottom-color: #dbdbdb; - border-radius: 3px 3px 0 0; - transition: all .3s; } - -.tab-container.tabs-classic li.selected a { - color: var(--cirrus-primary); - border-color: #dbdbdb; - border-bottom-color: transparent !important; } - -/* Tabs that fill the width */ -.tab-container.tabs-fill li { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - /* Disable shrinking to original width */ - flex-basis: 0; } + justify-content: flex-end; + /* End for right */ } -/* Override the -webkit-box display that sizes tab items based on text */ -.tab-container.tabs-fill ul { +.level-item { + /* Centers items */ + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; display: flex; - /* Equal size tabs */ } - -/* Different tab sizes */ -.tab-container.tabs-xsmall { - font-size: 0.6rem; } - -.tab-container.tabs-small { - font-size: 0.75rem; } - -.tab-container.tabs-large { - font-size: 1.25rem; } - -.tab-container.tabs-xlarge { - font-size: 1.5rem; } - -/* Font Awesome Integration */ -.tab-container .icon:first-child { - /* Left icon */ - margin-right: .75rem; } + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } -.tab-container .icon:last-child { - /* Right icon */ - margin-left: .75rem; } +/* Used to stretch the contents of div in level to fill */ +.level-content { + -ms-flex-preferred-size: auto; + flex-basis: auto; + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + text-align: left; + width: 100%; } -/* TAGS */ -.tag { - align-items: center; - background-color: var(--cirrus-light); - border-radius: 0.25rem; - color: var(--cirrus-fg); - display: inline-flex; - font-size: 75%; - line-height: 1.5; - min-height: 1.5rem; - padding: 0 0.5rem; - white-space: nowrap; } +/* Width CSS */ +.w-10 { + width: 10%; } -.tag.tag--large { - font-size: 100%; } +.w-20 { + width: 20%; } -.tag.tag--xlarge { - font-size: 150%; } +.w-30 { + width: 30%; } -.tag.tag--rounded { - border-radius: 290486px; } +.w-40 { + width: 40%; } -/* Delete button for tag */ -.tag.tag--delete { - background-color: rgba(10, 10, 10, 0.2); - border-radius: 290486px; - cursor: pointer; - pointer-events: auto; - display: inline-block; - height: 20px; - max-height: 20px; - max-width: 20px; - min-height: 20px; - min-width: 20px; - position: relative; } +.w-50 { + width: 50%; } -.tag--delete:hover { - background-color: rgba(10, 10, 10, 0.3); } +.w-60 { + width: 60%; } -/* Draw the delete button */ -.tag.tag--delete::before, -.tag.tag--delete::after { - background-color: var(--cirrus-light); - content: ""; - display: block; - left: 50%; - position: absolute; - top: 50%; - -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform: translateX(-50%) translateY(-50%) rotate(45deg); - -webkit-transform-origin: center center; - transform-origin: center center; } +.w-70 { + width: 70%; } -.tag.tag--delete::before { - height: 1px; - width: 50%; } +.w-80 { + width: 80%; } -.tag.tag--delete::after { - height: 50%; - width: 1px; } +.w-90 { + width: 90%; } -/* TAG THEMES */ -.tag.tag--delete { - margin-left: 0.25rem; - margin-right: -0.375rem; } +.w-100 { + width: 100%; } -.tag.tag--white { - background-color: #fff; - color: var(--cirrus-dark); } +.w-auto { + width: auto; } -.tag.tag--black { - background-color: #000; - color: #fff; } +/* Height CSS */ +.h-10 { + height: 10%; } -.tag.tag--dark { - background-color: var(--cirrus-dark); - color: #fff; } +.h-20 { + height: 20%; } -.tag.tag--primary { - background-color: var(--cirrus-primary); - color: #fff; } +.h-30 { + height: 30%; } -.tag.tag--link { - background-color: var(--cirrus-link); - color: #fff; } +.h-40 { + height: 40%; } -.tag.tag--info { - background-color: var(--cirrus-info); - color: #fff; } +.h-50 { + height: 50%; } -.tag.tag--success { - background-color: var(--cirrus-success); - color: #fff; } +.h-60 { + height: 60%; } -.tag.tag--warning { - background-color: var(--cirrus-warning); - color: var(--cirrus-fg); } +.h-70 { + height: 70%; } -.tag.tag--danger { - background-color: var(--cirrus-danger); - color: #fff; } +.h-80 { + height: 80%; } -/* TAG CONTAINER */ -.tag-container { - display: flex; - flex-wrap: wrap; } +.h-90 { + height: 90%; } -/* Add margin in between tag containers */ -.tag-container:not(:last-child) { - margin-bottom: 1rem; } +.h-100 { + height: 100%; } -.tag-container .tag { - margin-bottom: 0.5rem; } +.h-auto { + height: auto; } -.tag-container .tag:not(:last-child) { - margin-right: 0.5rem; } +@media screen and (min-width: 769px) { + .row { + display: flex; } + .level-right { + margin-left: 1rem; } + /* Keep all level children the same height */ + .level.fill-height { + -webkit-box-align: stretch; + /* Box Align and align items to stretch to make nav-items fill up parent height */ + -ms-flex-align: stretch; + align-items: stretch; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } } -/* Used for grouping tags together */ -.tag-container.group-tags .tag { - margin-right: 0; } +/* MOBILE */ +@media screen and (max-width: 768px) { + .container { + width: 100%; } + .row { + margin-top: 0; } + .row [class^='col-']:not(.ignore-screen), + .row [class*=' col-']:not(.ignore-screen) { + /* Remove the grid structure for smaller screens */ + width: 100%; + margin-left: 0; + padding: 0; } + /* Dividers for mobile layout */ + .divided > .row [class^='col-'], + .divided > .row [class*=' col-'] { + box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); } + .level.ignore-screen, + .level-left.ignore-screen, + .level-right.ignore-screen { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .level.fill-height { + display: inherit; + /* Allow children to expand */ } + .hero-body { + padding: 0; } } -.tag-container.group-tags .tag:first-child { - border-radius: .25rem 0 0 .25rem; } +/* LINKS */ +a { + color: var(--cirrus-link); + font-weight: 600; + padding: 2px; + text-decoration: none; + transition: all 0.3s; } -.tag-container.group-tags .tag:not(:first-child):not(:last-child) { - border-radius: 0; } +a:hover { + color: var(--cirrus-link-dark); + transition: all 0.3s; } -.tag-container.group-tags .tag:last-child { - border-radius: 0 .25rem .25rem 0; } +a:visited, +a:hover, +a:active { + backface-visibility: hidden; + text-decoration: none; } -/* Tag close button */ -.tag.tag__close-btn { +.subtitle a { padding: 0; - position: relative; - width: 1.5rem; } - -.tag.tag__close-btn::before, -.tag.tag__close-btn::after { - background-color: var(--cirrus-fg); - content: ""; - display: block; - left: 50%; - top: 50%; - position: absolute; - -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform: translateX(-50%) translateY(-50%) rotate(45deg); - -webkit-transform-origin: center center; - transform-origin: center center; } + /* Removes weird offset in subtitle links */ } -.tag.tag__close-btn::before { - height: 1px; - width: 50%; } +/* a.display-block { Deprecated 0.5.5 + display: block; +} */ +a.underline { + text-decoration: underline; } -.tag.tag__close-btn::after { - height: 50%; - width: 1px; } +p a, +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a, +blockquote a, +article a { + display: inline; } -/* MISC */ -a.tag:hover { - text-decoration: underline; } +a .btn, +a button, +[type='submit'] a { + margin-bottom: 0; + /* Remove random excess space */ } -.tag-container.tag-container--grouped .tag:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; } +/* LISTS */ +ul, +ol { + margin: 1rem 0 1rem 1rem; + padding-inline-start: 0.5rem; } -.tag-container.tag-container--grouped .tag:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } +ul { + list-style: disc; } -/* Tag positioning */ -.tag-container.tag-container--centered { - justify-content: center; } +/* Handle nesting */ +ul ul, +ol ul, +ul ol, +ol ol { + margin: 0 0 0 1rem; } -.tag-container.tag-container--centered .tag { - margin: 0 0.25rem; } +/* Nested list bullet types */ +ul ul { + list-style-type: circle; } -.tag-container.tag-container--right { - justify-content: flex-end; } +ul ul ul { + list-style-type: square; } -.tag-container.tag-container--right .tag:not(:first-child) { - margin-left: 0.5rem; } +ol ol { + list-style: lower-alpha; } -.tag-container.tag-container--right .tag:not(:last-child) { - margin-right: 0; } +ol ol ol { + list-style: upper-roman; } -/* TILES */ -.tile { - display: flex; - display: -ms-flexbox; - align-content: space-between; - /* Ensure space between child elements of card tile */ - -webkit-align-content: space-between; - /* align-items: flex-start; Push elements to the top of container instead of center/bottom (removed since unneeded */ - -ms-flex-line-pack: justify; - /* Evenly distribute lines */ } +/* Description lists */ +dl { + margin: 1rem 0; } -.tile p { - font-size: 0.95rem; } +/* Detail title */ +dt { + font-weight: 700; } -.tile .tile__icon, -.tile .tile__buttons { - flex: 0 0 auto; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; } +dd { + margin-bottom: 0.5rem; } -/* Override the default behavior where buttons display as blocks */ -.tile .tile__buttons button, -.tile .tile__buttons .btn, -.tile .tile__buttons [type="submit"] { - display: inline-block; - margin: 0.1rem; - /* Reduce space used by buttons, default .5rem */ } +li { + margin: 0.25rem 0; } -.tile .tile__container { - flex: 1 1 auto; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; } +/* Exclude margin in menus */ +li:not(.dropdown-menu > li):last-child { + margin-bottom: 1rem; } -/* Add spacing between the elements in between */ -.tile .tile__container:not(:first-child) { - padding-left: 1rem; } +/* MISC */ +ul.no-bullets { + list-style: none; } -.tile .tile__container:not(:last-child) { - padding-right: 1rem; } +/* MENU LISTS */ +.menu { + font-size: 1rem; } -.tile .tile__title { - line-height: 2rem; - font-weight: bolder; - margin: 0.1rem auto; } +ul.menu { + list-style: none; + margin: 0.5rem 0; } -.tile .tile__subtitle { - line-height: 1.25rem; - opacity: 0.7; - margin: 0.1rem auto; } +/* Style headers to have even space distribution. */ +.menu-title:not(:first-child) { + margin-bottom: 1rem; } -/* Force elements to align at the center vertical height */ -.tile.tile--center { - align-items: center; - -webkit-align-items: center; - -ms-flex-align: center; } +.menu-title:not(:last-child) { + margin-top: 1rem; } -.tile.tile--center .tile__container { - /* Shrink the text to fit inside the tile */ - overflow: hidden; } +/* Style menu items */ +.menu .menu-item a { + color: #555; + display: block; + padding: 0.5em 0.75em; + border-radius: 3px; + font-size: var(--font-size-s); + cursor: pointer; + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -/* Keep the text from overflowing */ -.tile.tile--center .tile__title, -.tile.tile--center .tile__subtitle.no-wrap { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - margin-bottom: 0; } +.menu .menu-item:hover > a { + background-color: rgba(208, 208, 208, 0.3); + color: #d43644; + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -.toast { - display: block; - width: 100%; - padding: .75rem 1.25rem; - background-color: var(--toast-primary-bg); - border: 1px solid var(--toast-primary-bg); - border-radius: 2px; +.menu .menu-item.selected > a { color: #fff; + background-color: var(--cirrus-primary); } + +.menu .menu-item .menu-addon { + padding: 0.3rem; + z-index: 1; position: relative; - margin: 0.5rem; } + color: var(--cirrus-fg); + cursor: pointer; + float: left; + margin-right: 0.1rem; + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -/* .toast h1, .toast h2, .toast h3, .toast h4, .toast h5, .toast h6 { - margin: 0; - margin-top: 1rem; -} (Deprecated 0.5.5) */ -.toast .toast__title { - margin: 0; - margin-top: 1rem; } +.menu .menu-item .menu-addon .icon { + font-size: inherit; } -.toast p { - margin: 0; } +/* Darken on hover to differentiate from menu-item */ +.menu .menu-item .menu-addon:hover { + background-color: rgba(60, 60, 60, 0.25); + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -.toast.toast--translucent { - opacity: .5; } +.menu .menu-item .menu-addon.right { + float: right; + margin-right: 0; + margin-left: 0.1rem; } -.toast.toast--translucent:hover { - opacity: 1; } +.menu .menu-item.selected .menu-addon { + color: #fff; } -.toast .btn-close { - position: absolute; - right: 1rem; - top: 1rem; } +/* Style sub menus inside a menu */ +.menu .menu-item ul { + border-left: 1px solid #dbdbdb; + margin: 0.75rem; + padding-left: 0.75rem; } -/* TOAST TYPES */ -.toast.toast--primary { - background-color: var(--toast-primary-bg); - border-color: var(--toast-primary-bg); } +/* Menu item divider */ +.menu .divider { + border-top: 0.1rem solid #eee; + height: 0.1rem; + margin: 1rem 0; } -.toast.toast--success { - background-color: var(--cirrus-success); - border-color: var(--cirrus-success); } +/* Title for the section separated by the divider */ +.menu .divider::after { + content: attr(data-label); + /* Text that will be displayed */ + background-color: var(--cirrus-bg); + color: #b7b7b7; + display: inline-block; + padding: 0 0.7rem; + margin: 0.5rem; + font-size: 0.7rem; + -webkit-transform: translateY(-1.1rem); + transform: translateY(-1.1rem); } + +/* Dropdown menu for dropdown buttons */ +.list-dropdown { + display: inline-block; + position: relative; } + +.list-dropdown .menu { + position: absolute; + top: 75%; + left: 0; + -webkit-animation: slide-down var(--animation-duration) ease 1; + animation: slide-down 0.1s ease 1; + background-color: var(--cirrus-bg); + border-radius: 0.2rem; + box-shadow: 0 0.1rem 0.4rem rgba(69, 77, 93, 0.3); + margin: 0; + opacity: 0; + min-width: 15rem; + padding: 0.25rem 0.5rem; + -webkit-transform: translateY(0.5rem); + transform: translateY(0.5rem); + z-index: 10; + pointer-events: none; + /* Remove pointer events to prevent mouse hover to show menu even though it is not visible */ + overflow: hidden; + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -.toast.toast--warning { - background-color: var(--cirrus-warning); - border-color: var(--cirrus-warning); } +.list-dropdown.dropdown-right .menu { + left: auto; + right: 0; } -.toast.toast--error { - background-color: var(--cirrus-danger); - border-color: var(--cirrus-danger); } +/* Allow for shown and :focus selectors for JS and native CSS transitions */ +.list-dropdown.shown .menu, +.list-dropdown .btn-dropdown:focus + .menu, +.list-dropdown .menu:hover { + display: block; + opacity: 1; + top: 100%; + z-index: 100; + pointer-events: auto; + /* Restore pointer events */ + height: auto; + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -.toast.toast--info { - background-color: var(--cirrus-info); - border-color: var(--cirrus-info); } +.list-dropdown .btn-group .btn-dropdown:nth-last-child(2) { + border-bottom-right-radius: 3px; + border-top-right-radius: 3px; } -.toast.toast--link { - background-color: var(--cirrus-link); - border-color: var(--cirrus-link); } +/* TREE */ +/* Tree Navigation Menu */ +.tree { + margin: 0; } -.toast.toast--primary { - background-color: var(--cirrus-primary); - border-color: var(--cirrus-primary); } +/* The title of the tree menu */ +.tree .tree-item .tree-item-header { + display: block; + padding: 0.25rem 0.5rem; + cursor: pointer; + font-size: 0.95rem; + font-weight: 600; + /* Keep styling consistent with menu-items */ } -/* Add the rest later */ -.toast a { - color: var(--cirrus-light); - transition: all .3s; } +/* The dropdown glyph of the tree menu */ +.tree .tree-item .tree-item-header .icon { + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -.toast a:hover { - opacity: .8; - transition: all .3s; } +/* Expand the tree-item-body (has menu-items) */ +.tree .tree-item input:checked ~ .tree-item-body { + max-height: 100vh; } -/* TOOLTIPS */ -.tooltip { - position: relative; - /* let's the pseudoelement that we are displaying relative to the button. */ - overflow: visible; - /* Allows the pseudoelement to be shown */ - white-space: nowrap; - /* Keeps the button text from wrapping and getting too large */ } +/* Rotate the dropdown glyph */ +.tree .tree-item input:checked ~ .tree-item-header .icon { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); } -/* This is the psuedoelement that creates the tooltip */ -.tooltip::after, -.tooltip.tooltip--top::after { - -webkit-appearance: none; - -moz-appearance: none; - position: absolute; - color: #fff; - font-size: 0.6rem; - background-color: rgba(69, 77, 93, 0.9); - content: attr(data-tooltip); - /* Retrieves the data specified in this element property and displays it as text */ - display: block; - line-height: 1rem; - text-transform: none; +/* Container for the menu-items of the tree menu */ +.tree .tree-item .tree-item-body { + max-height: 0; + /* Hidden at first */ + margin-left: 1.5rem; overflow: hidden; - padding: 0.4rem 0.8rem; - opacity: 0; - /* Hide the element */ - text-overflow: ellipsis; - max-width: 15rem; - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); - transition: all var(--animation-duration) ease; - z-index: 200; - pointer-events: none; - bottom: 100%; - /* Pushes the tooltip above the button */ - left: 50%; - /* Horizontally center it */ - border-radius: 0.2rem; } + -webkit-transition: all var(--animation-duration); + transition: all var(--animation-duration); } -/* Handles the on hover event of the button and then modifies the associated tooltip accordingly. */ -.tooltip:focus::after, -.tooltip:hover::after { - opacity: 1; - -webkit-transform: translate(-50%, -0.5rem); - transform: translate(-50%, -0.5rem); - transition: all var(--animation-duration) ease; } +/* TODO: Docs */ +/* The body that will encompass the tree-nav and tree-nav-content */ +.tree-nav-body { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 100vh; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } -/* Tooltip top left */ -.tooltip.tooltip--top-left::after { - -webkit-transform: translate(-50%, 0); - transform: translate(-50%, 0); } +/* A fixed menu on the side with a tree component */ +.tree-nav { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -ms-flex-negative: 1; + flex-shrink: 1; + padding: 2rem 1rem 2rem 2rem; + min-width: 15rem; + height: 100vh; + overflow: auto; } -.tooltip.tooltip--top-left:hover::after, -.tooltip.tooltip--top-left:focus::after { - left: 0; - -webkit-transform: translate(-100%, -0.5rem); - transform: translate(-100%, -0.5rem); } +/* The container for the tree component to prevent it from overflowing */ +.tree-nav .tree-nav-container { + overflow-y: auto; + top: 4rem; + bottom: 1rem; } -/* Tooltip top right */ -.tooltip.tooltip--top-right::after { - left: auto; - -webkit-transform: translate(15%, 0); - transform: translate(15%, 0); } +/* Darkened area that will close the navbar when clicked for mobile only */ +.tree-nav + .tree-nav-close { + display: none; + /* Not needed in desktop */ } -.tooltip.tooltip--top-right:hover::after, -.tooltip.tooltip--top-right:focus::after { - right: 0; - -webkit-transform: translate(100%, -0.5rem); - transform: translate(100%, -0.5rem); } +/* Push document body further right to account for sidebar space */ +.tree-nav + .tree-nav-content { + max-width: 100%; + padding: 2rem; + -ms-flex: 1 0 auto; + -webkit-box-flex: 1; + flex: 1 0 auto; + overflow: auto; + margin: 0; } + +/* The body where all other HTML components are entered if a tree-nav is used */ +.tree-nav-content { + width: 100%; + overflow: auto; + margin: 0; + padding: 2rem; } + +/* Decrease font-weight in tree-nav menu-items */ +.tree-item-body .menu .menu-item a { + font-weight: 400; } + +@media screen and (max-width: 768px) { + /* Hide the menu to the side by default */ + .tree-nav { + height: 100%; + left: 0; + overflow-y: auto; + padding: 3rem 1.5rem; + position: fixed; + top: 0; + -webkit-transform: translateX(-100%); + transform: translateX(-100%); + transition: transform var(--animation-duration) ease, -webkit-transform var(--animation-duration) ease; + -webkit-transition: -webkit-transform var(--animation-duration) ease; + transition: transform var(--animation-duration) ease; + transition: -webkit-transform var(--animation-duration) ease; + z-index: 400; } + /* Open the menu from the side */ + /* Use a link and add the id of this element as the url */ + .tree-nav:target { + -webkit-transform: translateX(0); + transform: translateX(0); + transition: transform var(--animation-duration) ease, -webkit-transform var(--animation-duration) ease; + -webkit-transition: -webkit-transform var(--animation-duration) ease; + transition: -webkit-transform var(--animation-duration) ease; + transition: transform var(--animation-duration) ease; } + /* Create the area to click to close the menu */ + .tree-nav .tree-nav-close { + background-color: rgba(0, 0, 0, 0.15); + display: none; + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; + z-index: 300; } + /* Show the darkened area when the tree nav menu is clicked */ + .tree-nav:target + .tree-nav-close { + display: block; + background-color: rgba(0, 0, 0, 0.15); + height: 100%; + left: 0; + position: fixed; + right: 0; + top: 0; + width: 100%; + z-index: 300; } + /* Reset max-width in mobile */ + .tree-nav + .tree-nav-body { + max-width: inherit; } + /* Header bar for mobile websites with the tree-nav */ + .tree-nav-header { + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: rgba(248, 249, 250, 0.8); + height: 3.5rem; + padding: 0.75rem 0.5rem; + text-align: center; + z-index: 300; } + /* For dropdown menu used in header (different from header dropdown) */ + .nav-item.has-sub .list-dropdown { + width: 100%; } + .nav-item.has-sub .list-dropdown .btn-group { + width: 100%; } + .nav-item.has-sub .list-dropdown .btn-group .btn-dropdown { + flex-grow: 0; } + /* Show the dropdown menu in mobile hamburger menu relative with the header menu */ + .list-dropdown .btn-dropdown:focus + .menu { + position: relative; + width: 100%; } } -/* Tooltip bottom */ -.tooltip.tooltip--bottom::after { - top: 100%; - transform: translate(-50%, -1rem); - /* Moves tooltip to the center horizontally and shifts tooltip down */ - -webkit-transform: translate(-50%, -1rem); - -moz-transform: translate(-50%, -1rem); - -ms-transform: translate(-50%, -1rem); - bottom: auto; } +/* MEDIA CSS */ +/* Handles images, videos, figures, etc */ +/* Altered, originally just video in 0.4.6 */ +video.video-fullscreen { + position: absolute; + height: 100vh; + object-fit: cover; + width: 100%; + z-index: -1; } -.tooltip.tooltip--bottom:hover::after, -.tooltip.tooltip--bottom:focus::after { - transform: translate(-50%, 0.5rem); - -webkit-transform: translate(-50%, 0.5rem); - -moz-transform: translate(-50%, 0.5rem); - -ms-transform: translate(-50%, 0.5rem); - bottom: auto; } +/* Add to parent container to make media child fill container */ +.media-stretch { + display: block; + padding: 0; + overflow: hidden; + width: 100%; + position: relative; } -/* Tooltip bottom left */ -.tooltip.tooltip--bottom-left::after { - top: 100%; - -webkit-transform: translate(-65%, -1rem); - transform: translate(-65%, -1rem); - bottom: auto; } +/* Add pseudoclass to allow media to have height (default height is 0) */ +.media-stretch::before { + content: ""; + display: block; + padding-bottom: 56.25%; + /* 9 / 16 for 16:9 ratio */ } -.tooltip.tooltip--bottom-left:hover::after, -.tooltip.tooltip--bottom-left:focus::after { +/* Force media embed to fill parent container */ +.media-stretch iframe, +.media-stretch embed, +.media-stretch object { + position: absolute; + top: 0; + right: 0; + bottom: 0; left: 0; - -webkit-transform: translate(-100%, 0.5rem); - transform: translate(-100%, 0.5rem); } + width: 100%; + /* Make sure media does exceed or go under boundary limit */ + height: 100%; } -/* Tooltip bottom right */ -.tooltip.tooltip--bottom-right::after { - left: auto; - top: 100%; - -webkit-transform: translate(0%, -1rem); - transform: translate(0%, -1rem); - bottom: auto; } +/* For HTML5 video objects */ +.media-stretch video { + height: auto; + max-width: 100%; + width: 100%; } -.tooltip.tooltip--bottom-right:hover::after, -.tooltip.tooltip--bottom-right:focus::after { - right: 0; - -webkit-transform: translate(100%, 0.5rem); - transform: translate(100%, 0.5rem); } +/* Alternate media ratios */ +.media-stretch.rat-4-3::before { + padding-bottom: 75%; } -/* Tooltip right */ -.tooltip.tooltip--right::after { - left: 100%; - bottom: 50%; - transform: translate(-1rem, 50%); - -webkit-transform: translate(-1rem, 50%); - -moz-transform: translate(-1rem, 50%); - -ms-transform: translate(-1rem, 50%); } +.media-stretch.rat-1-1::before { + padding-bottom: 100%; } -.tooltip.tooltip--right:hover::after, -.tooltip.tooltip--right:focus::after { - transform: translate(0.5rem, 50%); - -webkit-transform: translate(0.5rem, 50%); - -moz-transform: translate(0.5rem, 50%); - -ms-transform: translate(0.5rem, 50%); } +/* FIGURES */ +/* For flexible media display */ +.fig { + margin: 0 0 0.5rem 0; + /* Small margin at the bottom */ } -/* Tooltip Left */ -.tooltip.tooltip--left::after { - right: 100%; - bottom: 50%; - left: auto; - /* Needed to work */ - transform: translate(1rem, 50%); - -webkit-transform: translate(1rem, 50%); - -moz-transform: translate(1rem, 50%); - -ms-transform: translate(1rem, 50%); } +.fig .fig-caption { + margin-top: 1rem; } -.tooltip.tooltip--left:hover::after, -.tooltip.tooltip--left:focus::after { - transform: translate(-0.5rem, 50%); - -webkit-transform: translate(-0.5rem, 50%); - -moz-transform: translate(-0.5rem, 50%); - -ms-transform: translate(-0.5rem, 50%); } +/* IMAGES */ +.img-stretch { + max-width: 100%; + height: auto; + display: block; } -/* BUTTONS */ -/* Button styling */ -/* Un-themed */ -button, -.btn, -[type='submit'] { - line-height: 2rem; - overflow: hidden; - padding: 0.5rem 1.5rem; - border: 1px solid transparent; - border-radius: 0.25rem; - cursor: pointer; - text-align: center; - transition: all 0var --animation-duration; - background-color: var(--btn-color); - border-color: var(--btn-border-color); - color: var(--btn-fg); - font-size: 0.75rem; - letter-spacing: 0.03rem; - text-transform: uppercase; - font-family: Montserrat; - min-width: 2rem; - user-select: none; - margin-bottom: 1rem; - outline: none; - --btn-color: #fefefe; - --btn-fg: #737373; - --btn-border-color: #d9d9d9; } +.img-cover { + object-fit: cover; } -button:hover, -.btn:hover, -[type='submit']:hover { - transition: all var(--animation-duration); } +.img-contain { + object-fit: contain; } -.btn:active, -button:active, -[type='submit']:active { - transition: var(--animation-duration) ease; } - -/* Default button colors */ -button:hover, -.btn:hover, -[type='submit']:hover { - background-color: #eee; - --btn-color: #eee; } - -/* Make the loading circle, if present, white when button is active */ -.btn.loading:active::after, -button.loading:active::after, -[type='submit'].loading:active::after { - transition: var(--animation-duration) ease; - border-radius: 50%; - border-right-color: transparent; - border-top-color: transparent; } +/* Margin */ +.m-0 { + margin: 0 !important; } -button.btn-animated, -[type='submit'].btn-animated, -.btn.btn-animated { - transition: calc(var(--animation-duration) / 2) ease; } - -button.btn-animated:active, -[type='submit'].btn-animated:active, -.btn.btn-animated:active { - -webkit-transform: scale(0.98); - transform: inherit, scale(0.98); - transition: calc(var(--animation-duration) / 2) ease; } - -.btn:focus, -button:focus, -input[type='submit']:focus { - outline: none; } +.m-1 { + margin: calc(var(--space-size) * 1) !important; } -.btn:disabled, -button:disabled, -[type='submit']:disabled { - cursor: not-allowed; - opacity: 0.5; } +.m-2 { + margin: calc(var(--space-size) * 2) !important; } -button.btn-close { - background-color: rgba(10, 10, 10, 0.2); - border: none; - border-radius: 290486px; - cursor: pointer; - display: inline-block; - flex-grow: 0; - flex-shrink: 0; - font-size: 0; - height: 20px; - outline: 0; - position: relative; - vertical-align: top; - width: 20px; - padding: 0; - min-width: 20px; } +.m-3 { + margin: calc(var(--space-size) * 3) !important; } -button.btn-close:hover { - background-color: rgba(10, 10, 10, 0.3); } +.m-4 { + margin: calc(var(--space-size) * 4) !important; } -/* Render the x in the close button */ -button.btn-close::before, -button.btn-close::after { - background-color: var(--cirrus-bg); - content: ''; - display: block; - left: 50%; - position: absolute; - top: 50%; - -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); - transform: translateX(-50%) translateY(-50%) rotate(45deg); - -webkit-transform-origin: center center; - transform-origin: center center; } +.m-5 { + margin: calc(var(--space-size) * 5) !important; } -button.btn-close::before { - height: 2px; - width: 50%; } +.mt-0, .my-0 { + margin-top: 0 !important; } -button.btn-close::after { - height: 50%; - width: 2px; } +.mt-1, .my-1 { + margin-top: calc(var(--space-size) * 1) !important; } -/* Adds small margin around buttons */ -.btn-container { - margin: 0.5rem; - overflow: visible; } +.mt-2, .my-2 { + margin-top: calc(var(--space-size) * 2) !important; } + +.mt-3, .my-3 { + margin-top: calc(var(--space-size) * 3) !important; } + +.mt-4, .my-4 { + margin-top: calc(var(--space-size) * 4) !important; } -/* BUTTON STYLES */ -/* Regular */ -.btn-transparent { - --btn-color: transparent; - --btn-fg: var(--cirrus-dark); - --btn-border-color: transparent; } +.mt-5, .my-5 { + margin-top: calc(var(--space-size) * 5) !important; } -.btn-transparent.outline { - --btn-color: var(--cirrus-dark); } +.mb-0, .my-0 { + margin-bottom: 0 !important; } -.btn-transparent:hover { - --btn-color: rgba(0, 0, 0, 0.1); } +.mb-1, .my-1 { + margin-bottom: calc(var(--space-size) * 1) !important; } -.btn-transparent:focus { - box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); } +.mb-2, .my-2 { + margin-bottom: calc(var(--space-size) * 2) !important; } -.btn-light { - --btn-color: var(--cirrus-light); - --btn-fg: var(--cirrus-dark); - --btn-border-color: var(--cirrus-light); } +.mb-3, .my-3 { + margin-bottom: calc(var(--space-size) * 3) !important; } -.btn-light:hover { - --btn-color: var(--cirrus-light-hover); } +.mb-4, .my-4 { + margin-bottom: calc(var(--space-size) * 4) !important; } -.btn-light:focus { - box-shadow: 0 0 0 0.2rem rgba(246, 249, 252, 0.5); } +.mb-5, .my-5 { + margin-bottom: calc(var(--space-size) * 5) !important; } -.btn-dark { - --btn-color: var(--cirrus-dark); - --btn-fg: var(--cirrus-light); - --btn-border-color: var(--cirrus-dark); } +.ml-0, .mx-0 { + margin-left: 0 !important; } -.btn-dark:hover { - --btn-color: var(--cirrus-dark-hover); } +.ml-1, .mx-1 { + margin-left: calc(var(--space-size) * 1) !important; } -.btn-dark.outline:hover { - --btn-color: var(--cirrus-dark); } +.ml-2, .mx-2 { + margin-left: calc(var(--space-size) * 2) !important; } -.btn-dark:focus { - box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); } +.ml-3, .mx-3 { + margin-left: calc(var(--space-size) * 3) !important; } -.btn-black { - --btn-color: #000; - --btn-fg: var(--cirrus-light); - --btn-border-color: #000; } +.ml-4, .mx-4 { + margin-left: calc(var(--space-size) * 4) !important; } -.btn-black:hover { - --btn-color: #000; } +.ml-5, .mx-5 { + margin-left: calc(var(--space-size) * 5) !important; } -.btn-black:focus { - box-shadow: 0 0 0 0.2rem rgba(54, 54, 54, 0.5); } +.mr-0, .mx-0 { + margin-right: 0 !important; } -.btn-primary { - --btn-color: var(--cirrus-primary); - --btn-fg: var(--cirrus-light); - --btn-border-color: var(--cirrus-accent-border); } +.mr-1, .mx-1 { + margin-right: calc(var(--space-size) * 1) !important; } -.btn-primary:hover { - --btn-color: var(--cirrus-accent-hover); } +.mr-2, .mx-2 { + margin-right: calc(var(--space-size) * 2) !important; } -.btn-primary.outline:hover { - --btn-color: var(--cirrus-primary); } +.mr-3, .mx-3 { + margin-right: calc(var(--space-size) * 3) !important; } -.btn-primary:focus { - box-shadow: 0 0 0 0.2rem rgba(240, 61, 76, 0.5); } +.mr-4, .mx-4 { + margin-right: calc(var(--space-size) * 4) !important; } -.btn-info { - --btn-color: var(--cirrus-info); - --btn-fg: var(--cirrus-light); - --btn-border-color: var(--cirrus-info); } +.mr-5, .mx-5 { + margin-right: calc(var(--space-size) * 5) !important; } -.btn-info:hover { - --btn-color: var(--cirrus-info-hover); } +/* Padding */ +.p-0 { + padding: 0 !important; } -.btn-info.outline:hover { - --btn-color: var(--cirrus-info); } +.p-1 { + padding: calc(var(--space-size) * 1) !important; } -.btn-info:focus { - box-shadow: 0 0 0 0.2rem rgba(41, 114, 250, 0.5); } +.p-2 { + padding: calc(var(--space-size) * 2) !important; } -.btn-link { - --btn-color: var(--cirrus-link); - --btn-fg: var(--cirrus-light); - --btn-border-color: var(--cirrus-link); } +.p-3 { + padding: calc(var(--space-size) * 3) !important; } -.btn-link.outline { - --btn-fg: var(--cirrus-link); - border: 1px solid transparent; } +.p-4 { + padding: calc(var(--space-size) * 4) !important; } -.btn-link:hover { - --btn-color: var(--cirrus-link-dark); } +.p-5 { + padding: calc(var(--space-size) * 5) !important; } -.btn-link.outline:hover { - --btn-color: var(--cirrus-link-hover); - border: 1px solid transparent; - text-decoration: underline; } +.pt-0, .py-0 { + padding-top: 0 !important; } -.btn-link:focus { - box-shadow: 0 0 0 0.2rem rgba(94, 92, 199, 0.5); } +.pt-1, .py-1 { + padding-top: calc(var(--space-size) * 1) !important; } -.btn-success { - --btn-color: var(--cirrus-success); - --btn-fg: var(--cirrus-light); - --btn-border-color: var(--cirrus-success); } +.pt-2, .py-2 { + padding-top: calc(var(--space-size) * 2) !important; } -.btn-success:hover { - --btn-color: var(--cirrus-success-hover); } +.pt-3, .py-3 { + padding-top: calc(var(--space-size) * 3) !important; } -.btn-success.outline:hover { - --btn-color: var(--cirrus-success); } +.pt-4, .py-4 { + padding-top: calc(var(--space-size) * 4) !important; } -.btn-success:focus { - box-shadow: 0 0 0 0.2rem rgba(13, 210, 89, 0.5); } +.pt-5, .py-5 { + padding-top: calc(var(--space-size) * 5) !important; } -.btn-warning { - --btn-color: var(--cirrus-warning); - --btn-fg: var(--cirrus-dark); - --btn-border-color: var(--cirrus-warning); } +.pb-0, .py-0 { + padding-bottom: 0 !important; } -.btn-warning:hover { - --btn-color: var(--cirrus-warning-hover); } +.pb-1, .py-1 { + padding-bottom: calc(var(--space-size) * 1) !important; } -.btn-warning.outline:hover { - --btn-color: var(--cirrus-warning); } +.pb-2, .py-2 { + padding-bottom: calc(var(--space-size) * 2) !important; } -.btn-warning:focus { - box-shadow: 0 0 0 0.2rem rgba(250, 180, 51, 0.5); } +.pb-3, .py-3 { + padding-bottom: calc(var(--space-size) * 3) !important; } -.btn-danger { - --btn-color: var(--cirrus-danger); - --btn-fg: var(--cirrus-light); - --btn-border-color: var(--cirrus-danger); } +.pb-4, .py-4 { + padding-bottom: calc(var(--space-size) * 4) !important; } -.btn-danger:hover { - --btn-color: var(--cirrus-danger-hover); } +.pb-5, .py-5 { + padding-bottom: calc(var(--space-size) * 5) !important; } -.btn-danger.outline:hover { - --btn-color: var(--cirrus-danger); } +.pl-0, .px-0 { + padding-left: 0 !important; } -.btn-danger:focus { - box-shadow: 0 0 0 0.2rem rgba(251, 65, 68, 0.5); } +.pl-1, .px-1 { + padding-left: calc(var(--space-size) * 1) !important; } -[class^='btn-'], -[class*=' btn-'] { - background-color: var(--btn-color); - border: 1px solid var(--btn-border-color); - color: var(--btn-fg); - transition: all var(--animation-duration); } +.pl-2, .px-2 { + padding-left: calc(var(--space-size) * 2) !important; } -[class^='btn-']:hover, -[class*=' btn-']:hover { - background-color: var(--btn-color); - border-color: var(--btn-border-color); - transition: all var(--animation-duration); } +.pl-3, .px-3 { + padding-left: calc(var(--space-size) * 3) !important; } -/* Outline Variants */ -[class^='btn-'].outline, -[class*=' btn-'].outline { - background-color: transparent; - color: var(--btn-color); } +.pl-4, .px-4 { + padding-left: calc(var(--space-size) * 4) !important; } -[class^='btn-'].outline:hover, -[class*=' btn-'].outline:hover { - background-color: var(--btn-color); - color: var(--btn-fg); - transition: all var(--animation-duration); } +.pl-5, .px-5 { + padding-left: calc(var(--space-size) * 5) !important; } -/* Right of input */ -.has-controls.input:not([class*='left action']) > button:last-child, -.has-controls.input:not([class*='left action']) > .btn:last-child > .btn { - border-radius: 0 0.28571429rem 0.28571429rem 0; } +.pr-0, .px-0 { + padding-right: 0 !important; } -.has-controls.input:not([class*='right action']) > button:last-child, -.has-controls.input:not([class*='right action']) > .btn:last-child > .btn { - border-radius: 0.28571429rem 0 0 0.28571429rem; } +.pr-1, .px-1 { + padding-right: calc(var(--space-size) * 1) !important; } -/* Extra small button */ -.btn-xsmall { - padding: 0 0.5rem; - font-size: 50%; } +.pr-2, .px-2 { + padding-right: calc(var(--space-size) * 2) !important; } -/* Small button */ -.btn-small { - padding: .25rem 1rem; - font-size: 70%; } +.pr-3, .px-3 { + padding-right: calc(var(--space-size) * 3) !important; } -/* Big button */ -.btn-large { - padding: .75rem 2rem; - font-size: 90%; } +.pr-4, .px-4 { + padding-right: calc(var(--space-size) * 4) !important; } -.btn-xlarge { - padding: 1rem 2.5rem; - font-size: 110%; } +.pr-5, .px-5 { + padding-right: calc(var(--space-size) * 5) !important; } -/* Make the loader white so it is visible */ -.loading.btn-accent:after { - border: 2px solid #fff; - border-right-color: transparent; - border-top-color: transparent; } +/* TABLE */ +.table { + margin-bottom: 1.5rem; + width: 100%; + border-collapse: collapse; + /* Allows us to set 0 margin in table cells */ + border-spacing: 0; + text-align: center; + /* Text center by default */ } -/* Override default behavior of aligning font awesome icons to the top */ -button .fa-wrapper, -.btn .fa-wrapper, -[type='submit'] .fa-wrapper { - vertical-align: baseline; } +.table td, +.table th { + border: 1px solid rgba(219, 219, 219, 0.5); + border-width: 0 0 1px; + padding: 0.75rem; + vertical-align: top; + text-align: inherit; + margin: 0; } -button .fa-wrapper.pad-right, -.btn .fa-wrapper.pad-right, -[type='submit'] .fa-wrapper.pad-right { - margin-right: 0.4rem; } +.table tr { + transition: all 0.3s; } -button .fa-wrapper.pad-left, -.btn .fa-wrapper.pad-left, -[type='submit'] .fa-wrapper.pad-left { - margin-left: 0.4rem; } +.table caption { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + color: #6c757d; + text-align: left; + caption-side: bottom; } -/* Alternatives to pad-left and pad-right */ -button span:first-child, -.btn span:first-child, -[type='submit'] span:first-child { - margin-right: 0.2rem; } +.table tr:hover, +.table.striped tbody tr:nth-child(even):hover { + background-color: rgba(216, 216, 216, 0.15); } -button span:last-child, -.btn span:last-child, -[type='submit'] span:last-child { - margin-left: 0.2rem; } +/* Thicker border for table header */ +.table thead th, +.table thead { + border-bottom: 2px solid rgba(219, 219, 219, 0.49); } -/* BUTTON GROUPS */ -/* Will group buttons with components in a single component */ -.btn-group { - /* -ms-flex-wrap: wrap; Deprecated 0.5.6, allow for overflow - flex-wrap: wrap; Wrap contents to next row on overflow */ - display: -webkit-inline-box; - display: inline-flex; - display: -ms-inline-flexbox; - display: -webkit-inline-flex; } +.table.bordered thead th, +.table.bordered thead { + border-bottom: 1px solid rgba(219, 219, 219, 0.5); } -.btn-group.btn-group-fill { - /* Makes the button group fill the width and proportion the buttons to fill the space */ - display: -webkit-box; - display: flex; - display: -ms-flexbox; } +.table thead th, +.table tfoot th { + padding: 1rem; } -.btn-group .btn, -.btn-group button, -.btn-group [type='submit'] { - -ms-flex: 1 0 auto; - -webkit-box-flex: 1; - flex: 1 0 auto; - margin: 0; } +.table tfoot th { + border-top: 2px solid rgba(219, 219, 219, 0.5); + border-bottom: none; } -.btn-group.btn-group-fill .btn, -.btn-group.btn-group-fill button, -.btn-group.btn-group-fill [type='submit'] { - -ms-flex: 1 0; - -webkit-box-flex: 1; - flex: 1 0; - /* Make the buttons fill the available width and proportion themselves */ } +/* CUSTOM STYLES */ +/* All borders */ +.table.bordered td, +.table.bordered th { + border: 1px solid rgba(219, 219, 219, 0.5); } -.btn-group .btn:first-child:not(:last-child), -.btn-group button:first-child:not(:last-child), -.btn-group [type='submit']:first-child:not(:last-child) { - /* Style the first child in group > 1 buttons */ - border-top-right-radius: 0; - border-bottom-right-radius: 0; } +.table.bordered thead td, +.table.borderd thead { + border-width: 1px; } -.btn-group .btn:last-child:not(:first-child), -.btn-group button:last-child:not(:first-child), -.btn-group [type='submit']:last-child:not(:first-child) { - /* Style the last child in group > 1 buttons */ - border-top-left-radius: 0; - border-bottom-left-radius: 0; - margin-left: -0.1rem; } +/* Striped table */ +.table.striped tbody tr:nth-child(even) { + background-color: rgba(0, 0, 0, 0.05); } -.btn-group .btn:not(:first-child):not(:last-child), -.btn-group button:not(:first-child):not(:last-child), -.btn-group [type='submit']:not(:first-child):not(:last-child) { - /* Style button in middle of group */ - border-radius: 0; - /* Remove roundness from center buttons */ - margin-left: -0.1rem; } +/* Decrease padding */ +.table.small td, +.table.small th { + padding: 0.25rem 0.75rem; } -@media screen and (max-width: 768px) { - .btn-group { - display: flex; - flex-direction: column; } - .btn-group .btn, - .btn-group button, - .btn-group [type='submit'] { - margin-bottom: -1px; } - .btn-group .btn:first-child:not(:last-child), - .btn-group button:first-child:not(:last-child), - .btn-group [type='submit']:first-child:not(:last-child) { - border-radius: 0.25rem 0.25rem 0 0; } - .btn-group .btn:not(:first-child):not(:last-child), - .btn-group button:not(:first-child):not(:last-child), - .btn-group [type='submit']:not(:first-child):not(:last-child) { - margin-left: 0; } - .btn-group .btn:last-child:not(:first-child), - .btn-group button:last-child:not(:first-child), - .btn-group [type='submit']:last-child:not(:first-child) { - border-radius: 0 0 0.25rem 0.25rem; - margin-left: 0; } } +/* Fixed title table */ +.table.fixed-head thead { + position: relative; + display: block; } -/* CODE */ -code { - padding: 0.3rem; - margin: 0.5em 0; +.table.fixed-head tbody { + height: 200px; + /* Set the height you want */ + display: block; + /* Needed */ overflow: auto; - background-color: var(--cirrus-code-bg); - color: var(--cirrus-code-fg); - border-radius: 3px; } - -/* Dark theme for code */ -code.dark { - background-color: var(--cirrus-dark); - color: #fff; } + /* Shows scrollbars */ } -code:before { - color: #acb3c2; - content: attr(data-lang); - font-size: 0.9rem; - position: absolute; - right: 1rem; - top: 0.7rem; } +.table.fixed-head tr { + display: table; + width: 100%; + /* Forces row to span container */ } -pre > code { - font-size: 14px; - display: block; - padding: 2rem 1.5rem 1rem; - white-space: pre-wrap; - word-wrap: break-word; - font-family: Consolas,Monaco,"Andale Mono",monospace; - text-align: left; - line-height: 1.5; - -moz-tab-size: 4; - tab-size: 4; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; - border-left: 0.3rem solid var(--cirrus-primary); - margin: 0; - position: relative; - color: #222; } +.table tr.selected { + /* Style a selected row */ + background-color: var(--cirrus-primary); + color: #fff; } -/* FONT */ -@import url("https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700"); -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Montserrat", sans-serif; - font-weight: 700; - line-height: 1.2; } +/* Borderless Table (for inner cells) */ +.table.borderless thead th, +.table.borderless th, +.table.borderless td { + border: none; } -/* Silent header */ -h1 .silent, -h2 .silent, -h3 .silent, -h4 .silent, -h5 .silent, -h6 .silent { - color: #788196; } +/* + Functions +*/ +/* + Converts a given hex value to RGB. +*/ +/* Color scheme for Cirrus */ +/* TODO: Move to dimensions.scss */ +/* v2 Colors */ +/* TODO: Deprecate CSS Vars */ +:root { + /* v1 Colors */ + --cirrus-fg: #374054; + --cirrus-bg: #fff; + --cirrus-primary: #f03d4d; + --cirrus-primary-rgb: 240, 61, 77; + --cirrus-primary-light: #ffdadd; + --cirrus-accent-hover: #d62939; + --cirrus-accent-border: #c21b2b; + --cirrus-light: #f6f9fc; + --cirrus-light-gray: #f8f9fa; + --cirrus-gray: #d5d7dc; + --cirrus-dark-gray: #909090; + --cirrus-dark: #363636; + --cirrus-link: #5e5cc7; + --cirrus-link-dark: #4643e2; + --cirrus-info: #2972fa; + --cirrus-success: #0dd157; + --cirrus-success-rgb: 13, 209, 87; + --cirrus-warning: #fab633; + --cirrus-danger: #fb4143; + --cirrus-light-hover: #d0e0ef; + --cirrus-dark-hover: #505050; + --cirrus-info-hover: #1062f9; + --cirrus-link-hover: #f8f7ff; + --cirrus-success-hover: #0cb94d; + --cirrus-warning-hover: #f9ad1a; + --cirrus-danger-hover: #eb0507; + --cirrus-select-bg: rgba(0, 161, 255, 0.2); + --cirrus-code-bg: var(--cirrus-primary-light); + --cirrus-code-fg: #dc4753; + --cirrus-form-group-bg: var(--cirrus-light-gray); + --cirrus-form-group-fg: var(--cirrus-dark-gray); + --toast-primary-bg: rgba(49, 59, 80, 0.9); + --animation-duration: 0.2s; + --focus-opacity: 0.55; + --space-size: 0.5rem; + --font-size-xs: 0.7rem; + --font-size-s: 0.85rem; + --font-size-m: 1rem; + --font-size-l: 1.35rem; + --font-size-xl: 1.75rem; } -h1 { - font-size: 3rem; - letter-spacing: 0.025rem; } +/* UTILS */ +/* Utility classes to help solve some very annoying issues */ +.u-hidden { + display: none !important; } -h2 { - font-size: 2.5rem; } +.u-block { + display: block !important; } -h3 { - font-size: 2rem; } +.u-inline { + display: inline !important; } -h4 { - font-size: 1.75rem; } +.u-inline-block { + display: inline-block !important; } -h5 { - font-size: 1.5rem; } +.u-flex { + display: flex !important; } -h6 { - font-size: 1.25rem; } +.u-flex.u-flex-column { + flex-direction: column !important; } -/* Headlines (for larger titles) */ -.headline-1 { - font-size: 6.5rem; - letter-spacing: 0.05rem; } +.u-flex.u-flex-row { + flex-direction: row !important; } -.headline-2 { - font-size: 5.5rem; - letter-spacing: 0.05rem; } +.u-inline-flex { + display: -ms-inline-flexbox !important; + display: inline-flex !important; } -.headline-3 { - font-size: 4.5rem; - letter-spacing: 0.05rem; } +.u-table { + display: table !important; } -.headline-4 { - font-size: 3.5rem; - letter-spacing: 0.025rem; } +.u-table-row { + display: table-row !important; } -strong { - font-weight: 700; } +.u-position-static { + position: static !important; } -.font-alt { - font-family: "Nunito Sans"; } +.u-position-relative { + position: static !important; } -.content h1, -.content h2, -.content h3, -.content h4, -.content h5, -.content h6 { - line-height: 1.125em; - margin: 1rem 0; } +.u-position-absolute { + position: absolute !important; } -.title { - font-weight: bolder; } +.u-position-fixed { + position: fixed !important; } -.title:not(:last-child), -.subtitle:not(:last-child) { - margin-bottom: 1rem; } +.u-position-sticky { + position: sticky !important; } -.title + .subtitle { - /* Make the subtitlte closer to the title */ - margin-top: -0.75rem; } +/* + When using floats, clearfix allows the container to automatically resize so that + other elements are not blocked by children. +*/ +.u-clearfix:after { + clear: both !important; + content: " "; + display: table !important; } -p, -article, -blockquote { - font-size: 1rem; - line-height: 2; - margin-bottom: 1rem; } +/* This is mainly to keep elements from overlapping when using floats */ +.u-clear-left { + clear: left !important; } -p.lead { - font-size: 1.2rem; } +.u-clear-right { + clear: right !important; } -blockquote { - margin-bottom: 1rem; - font-size: 1.25rem; } +.u-clear-both { + clear: both !important; } -blockquote { - background-color: #f5f5f5; - border-left: 5px solid #dbdbdb; - padding: 1rem 2rem; - border-radius: 3px; } +.u-pull-left { + float: left !important; } -blockquote p { - margin: 0; - font-size: 0.95rem; } +.u-pull-right { + float: right !important; } -/* Use default line-height for these texts and when line-height-inherit is specified */ -.card-tile p, -.card-tile article, -.card-tile blockquote { - line-height: inherit; } +.u-text-center { + text-align: center !important; } -cite { - opacity: 0.7; } +.u-text-justify { + text-align: justify !important; } -mark, -.mark { - padding: 0.2em; - background-color: #f0e8c4; } +.u-text-ellipsis { + text-overflow: ellipsis; } -/* Weights */ -.font-thin { - font-weight: 200; } +.u-text-break { + hyphens: auto; + word-break: break-word; + word-wrap: break-word; } -.font-light { - font-weight: 300; } +/* Center element - best used for hero bodies or text */ +.u-center { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin: 0 auto; + flex-wrap: wrap; } -.font-normal { - font-weight: 400; } +.u-center-alt, +.u-center-alt:hover, +.u-center-alt:active { + /* If flexbox method fails, this works for elements with unknown dimensions */ + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } -.font-semibold { - font-weight: 600; } +.u-vertical-center { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + align-items: center; + vertical-align: middle; } -.font-bold { - font-weight: 700; } +.u-horizontal-center { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } -.uppercase { - text-transform: uppercase; } +.u-overlay { + bottom: 0; + left: 0; + right: 0; + top: 0; + position: absolute; } -.lowercase { - text-transform: lowercase; } +.u-hide-overflow { + overflow: hidden !important; + overflow-x: hidden; + overflow-y: hidden; } -.rtl { - direction: rtl; } +.u-text-center { + text-align: center !important; } -.white { - color: #fff !important; } +.u-text-left { + text-align: left !important; } -.faded { - opacity: 0.75; } +.u-text-right { + text-align: right !important; } -.font-italic { - font-style: italic; } +.u-hide { + display: none !important; } -/* Font Awesome */ -.icon { - /* Usually used in spans */ - display: inline-block; - /* font-size: 21px; Allow font sizes for icons to be overwritten */ - /* line-height: 1.5rem; Allow line height to be inherited or overwritten */ - text-align: center; - width: 1.5rem; - vertical-align: baseline; } +.u-disabled { + cursor: not-allowed !important; } -.icon .fa-wrapper { - font-size: inherit; - vertical-align: middle; } +.u-unselectable { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; } -.icon.x-small { - margin: 0.55rem 0 0 0.1rem; } +/* Deprecated 0.5.6 */ +/* .u-box { + background-color: white; + border-radius: 3px; + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + display: block; + padding: 1rem; +} -.icon.small { - margin: 0.95rem 0 0 0.1rem; } +.u-box:not(:last-child) { + margin-bottom: 1rem; +} */ +/* Deprecated 0.5.6 */ +/* .u-fill-width { + width: 100% !important; +} */ +/* Deprecated 0.5.6 */ +/* +.u-no-margin { + margin: 0 !important; +} -.info { - display: block; - font-size: var(--font-size-s); - margin-top: 0.25rem; - color: #979797; } +.u-no-padding { + padding: 0 !important; +} +*/ +.u-margin-auto { + margin: 0 auto !important; } -.info.inline { - /* Keeps the extra info inline */ - display: inline-block; - margin-left: 0.5rem; } +/* Round the corners of the element */ +.u-round { + border-radius: 0.1rem; } -.caret { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 4px dashed; - border-top: 4px solid\9; - border-right: 4px solid transparent; - border-left: 4px solid transparent; } +/* Turns element into a circle */ +.u-circle { + border-radius: 50%; } -/* Other text elements */ -abbr[title] { - border-bottom: 0.1rem dotted; - cursor: help; - text-decoration: none; } +/* Remove outline or drop shadow when element is focused */ +.u-no-shadow { + box-shadow: none; } -kbd { - background-color: var(--cirrus-fg); - border-radius: 0.2rem; - color: #fff; - display: inline-block; - line-height: 1; - padding: 0.5rem; - vertical-align: baseline; } +/* Responsiveness and Element Hiding */ +/* Do the actual balancing only on larger screens */ +@media screen and (min-width: 769px) { + .level, + .level-left, + .level-right { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } } -/* MOBILE */ -@media (max-width: 650px) { - h1 { - font-size: 2.5rem; } - h2 { - font-size: 2rem; } - h3 { - font-size: 1.75rem; } - h4 { - font-size: 1.5rem; } - h5 { - font-size: 1.25rem; } - h6 { - font-size: 1rem; } - .headline-1 { - font-size: 3rem; - letter-spacing: 0.05rem; } - .headline-2 { - font-size: 2.75rem; - letter-spacing: 0.05rem; } - .headline-3 { - font-size: 2.5rem; - letter-spacing: 0.05rem; } - .headline-4 { - font-size: 2.25rem; - letter-spacing: 0.025rem; } - p, - article, - blockquote { - margin: 1rem 0; } } +/* Hide elements based on screen size */ +@media screen and (max-width: 768px) { + .u-hide-mobile { + display: none !important; } } -/* FOOTER */ -footer { - width: 100%; - padding: 6rem 0; - background-color: #111; - text-align: center; - margin-top: 5rem; } +@media screen and (min-width: 768px) { + /* Hide on devices that are tablets or larger */ + .u-hide-tablet { + display: none !important; } } -footer a { - font-weight: bolder; - color: #fff; } +@media screen and (min-width: 769px) and (max-width: 1023px) { + .u-hide-tablet-only { + display: none !important; } } -footer p { - color: #848484; } +@media screen and (min-width: 1024px) { + /* Hide element on laptops, desktops, etc */ + .u-hide-desktop { + display: none !important; } } -footer ul { - margin: 0.5rem 0; - /* Remove the left margin seen in global style */ } +/* ANIMATIONS */ +/* Spinning loading animation */ +@-webkit-keyframes loading { + from { + transform: rotate(0deg); } + to { + transform: rotate(359deg); } } -footer h6 { - text-align: center; - letter-spacing: 6px; - position: relative; - padding-bottom: 10px; } +@keyframes loading { + from { + transform: rotate(0deg); } + to { + transform: rotate(359deg); } } -footer .footer-list-title { - font-size: 75%; - text-transform: uppercase; - font-weight: bolder; - color: #ddd; } +/* Hover animation */ +.hover-grow { + /* Mouse leave */ + transition-duration: 0.32s; } -footer .footer-list-title::after { - content: ""; - display: block; - width: 10%; - margin: auto; - border-bottom: 2px solid; - border-color: #343b49; } +.hover-grow:hover { + /* Mouse enter */ + transform: scale(1.1); + transition-duration: 0.08s; } -footer ul a .list-item, footer .list-item { - margin: 0.1rem; - color: #888; - transition: all .3s; - font-size: 75%; - text-transform: uppercase; } +/* Loading button position relatively for loading spinner location */ +.animated.loading { + display: block; + position: relative; } -footer.footer-fixed { - bottom: 0; - position: fixed; } +/* Loading Spinner, align center by default */ +.animated.loading::after { + border: 2px solid #ccc; + border-radius: 50%; + border-right-color: transparent; + border-top-color: transparent; + content: ""; + display: block; + height: 1rem; + width: 1rem; + left: calc(50% - (1em / 1.25)); + top: calc(50% - (1em / 1.35)); + position: absolute; + -webkit-animation: loading 500ms infinite linear; + animation: loading 500ms infinite linear; } -/* FORMS */ -input:not([type=checkbox]):not([type=radio]):not([type=submit]), -select { - width: 100%; - border: 1px solid #ddd; - border-radius: 3px; - color: #5a5a5a; - font-family: "Nunito Sans"; - font-size: var(--font-size-m); - letter-spacing: 0.02rem; - transition: all 0.3s; - outline: none; - padding: 0.85rem 1.1rem; } +.animated.loading.loading-white::after { + border-left-color: #fff; + border-bottom-color: #fff; } -input[type="search"] { - -webkit-appearance: none; - /* Fix Safari issue */ } +/* Align spinner left */ +.animated.loading.loading-left::after { + left: 2rem; + right: auto; } -textarea, -textarea[type="text"] { - width: 100%; - border: 1px solid #ddd; - padding: 0.8rem; - border-radius: 3px; - font-family: "Nunito Sans"; - font-size: var(--font-size-m); - letter-spacing: 0.02rem; - transition: all 0.3s; - outline: none; - margin: 0.5rem 0; - padding: 1rem 1.3rem; - min-height: 8rem; - line-height: 1.5rem; - resize: vertical; } +.animated.loading.loading-left { + padding-left: 4rem; } -input[type="color"] { - box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); - box-sizing: border-box; - transition: .3s; - outline: 0; - position: relative; - height: 3rem; - background-color: #fff; - padding: .55rem .8rem !important; } +/* Align spinner right */ +.animated.loading.loading-right::after { + left: auto; + right: 2rem; } -input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, -select:focus, -textarea:focus, -textarea[type=text]:focus, -input[type=text].input-focused, -.input-focused { - border-color: #3dabf0; - box-shadow: 0 0 0 0.2rem rgba(61, 171, 240, var(--focus-opacity)), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } +.animated.loading.loading-right { + padding-right: 4rem; } -select { - background-color: #fff; - border: 1px solid #ddd; } +/* Hide text in loading button */ +.animated.loading.hide-text { + color: transparent !important; } -select[multiple] option { - padding: 0.2rem 0.4rem; } +/* Heart animation */ +@-webkit-keyframes pound { + to { + transform: scale(1.1); } } -/* Fixes for Safari and other browsers for consistent UI */ -select.select:not([size]):not([multiple]) { - background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right 0.85rem center/0.5rem 0.6rem no-repeat; - -webkit-appearance: none; } +@keyframes pound { + to { + transform: scale(1.1); } } -/* Search field */ -input[type="search"], -input.search { - background-repeat: no-repeat; - background-position: left 0.6rem center; - background-image: url('data:image/svg+xml;utf8,'); - /* NEEDS FIXING */ - padding-left: 2rem !important; } +.animated.pulse { + animation: pound 0.35s infinite alternate; + -webkit-animation: pound 0.35s infinite alternate; + vertical-align: baseline; } -input:not([class*="btn-"]):disabled, input:not([class*=" btn-"]):disabled:hover, select:disabled, textarea:disabled { - background-color: #f3f3f6; - cursor: not-allowed; - border: 1px solid #f3f3f6; } +/* Bounce animations */ +@-webkit-keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + /* Ease-out based on power of four */ + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); } + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); } + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); } } -label:first-child:not(:last-child):not(.form-group-label) { - margin-right: 0.5rem; } +@keyframes bounce { + from, + 20%, + 53%, + 80%, + to { + -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + /* Ease-out based on power of four */ + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + 40%, + 43% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -30px, 0); + transform: translate3d(0, -30px, 0); } + 70% { + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-transform: translate3d(0, -15px, 0); + transform: translate3d(0, -15px, 0); } + 90% { + -webkit-transform: translate3d(0, -4px, 0); + transform: translate3d(0, -4px, 0); } } -label:not(:first-child):not(:last-child):not(.form-group-label) { - margin: 0 0.5rem; } +.animated.bounce { + animation-name: bounce; + -webkit-animation-name: bounce; + transform-origin: center bottom; + -webkit-transform-origin: center bottom; } -label:last-child:not(:first-child):not(.form-group-label) { - margin-left: 0.5rem; } +@keyframes bounceIn { + from, + 20%, + 40%, + 60%, + 80%, + to { + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } + 0% { + opacity: 0; + transform: scale3d(0.3, 0.3, 0.3); } + 20% { + transform: scale3d(1.1, 1.1, 1.1); } + 40% { + transform: scale3d(0.9, 0.9, 0.9); } + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); } + 80% { + transform: scale3d(0.97, 0.97, 0.97); } + to { + opacity: 1; + transform: scale3d(1, 1, 1); } } -/* Required asterisk */ -.required { - /* Use this in a span or a div */ - position: relative; - top: 1px; - font-weight: bold; - color: #f03c69; - padding-left: 0.1rem; } +.animated.bounceIn { + animation-name: bounceIn; } -.label:not(:last-child) { - margin-bottom: 0; } +@-webkit-keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } -.label { - color: #4a4a4a; - display: inline-block; - /* changed from block */ - font-weight: bold; - margin-top: 0.8rem; } +@keyframes fadeIn { + from { + opacity: 0; } + to { + opacity: 1; } } -.input-success { - background-color: rgba(0, 224, 0, 0.05) !important; - border-color: var(--cirrus-success) !important; } +.animated.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; } -.input-success:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, .btn-success:focus { - box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, var(--focus-opacity)), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } -.input-error { - background-color: rgba(244, 67, 54, 0.05) !important; - border-color: var(--cirrus-danger) !important; } +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; } -.input-error:not([type=checkbox]):not([type=radio]):not([type=submit]):focus, .btn-error:focus { - box-shadow: 0 0 0 0.2rem rgba(244, 67, 54, var(--focus-opacity)), inset 0px 1px 8px rgba(0, 0, 0, 0.07); } +.animated.infinite.alternate { + animation-direction: alternate; } -/* Input Field Sizes */ -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-xsmall, -select.input-xsmall { - font-size: var(--font-size-xs); - padding: 0.35rem 0.9rem; } +.animated.paused { + -webkit-animation-play-state: paused !important; + /* Safari 4.0 - 8.0 */ + animation-play-state: paused !important; } -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-small, -select.input-small { - font-size: var(--font-size-s); - padding: 0.55rem 1rem; } +/* Avatar */ +.avatar { + border-radius: 50%; + position: relative; + display: block; + margin: auto; + font-size: 1rem; + font-weight: lighter; + width: 3.2rem; + height: 3.2rem; + background-color: var(--cirrus-primary); + overflow: hidden; } -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-large, -select.input-large { - font-size: var(--font-size-l); } +/* Draw text on image just like in Gmail */ +.avatar::before { + content: attr(data-text); + color: #fff; + /* Removed z-index: 1, makes text blurry */ + left: 50%; + top: 50%; + position: absolute; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); } -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-xlarge, -select.input-xlarge { - font-size: var(--font-size-xl); } +.avatar.avatar--xsmall { + font-size: 0.8rem; + width: 1.6rem; + height: 1.6rem; } -/* Select sizes */ -select.input-xsmall { - padding: 0.65rem 0.9rem; } +.avatar.avatar--small { + font-size: 1rem; + height: 2.4rem; + width: 2.4rem; } -select.input-small { - padding: 0.75rem 1rem; } +.avatar.avatar--large { + font-size: 2rem; + height: 4.8rem; + width: 4.8rem; } -select.input-large { - padding: 0.95rem 1.2rem; } +.avatar.avatar--xlarge { + font-size: 2.6rem; + height: 6.4rem; + width: 6.4rem; } -select.input-xlarge { - padding: 1.05rem 1.3rem; } +.avatar img.padded { + padding: 0.5rem; + width: 100%; } -/* Used for when the input controls have another control adjacent to it but we want to position it inside the input field like font-awesome glyphs. As of 0.5.2, it is the default container for input fields. */ -.input-control { +/* CARDS */ +.card { + background-color: #fff; + border-radius: 5px; position: relative; - margin: 0.5rem 0; } + overflow: hidden; + transition: all .3s; + backface-visibility: hidden; + box-shadow: 0px 5px 12px 0 rgba(42, 51, 83, 0.12), 0px 0px 5px rgba(0, 0, 0, 0.06); + margin-bottom: 1rem; } -/* Hold Font Awesome glyphs inside input fields */ -/* More sizes coming soon */ -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left { - padding-left: 2.75rem; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right { - padding-right: 2.75rem; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xsmall, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xsmall { - padding-left: 2rem; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xsmall ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-xsmall ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xsmall ~ .icon.icon-right { - line-height: 1.75rem; - width: 1.75rem; - font-size: 7px; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-small, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-small { - padding-left: 2.5rem; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-small ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-small ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-small ~ .icon.icon-right { - line-height: 2rem; - width: 2.5rem; - font-size: 14px; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-large, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-large { - padding-left: 3.5rem; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-large ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-large ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-large ~ .icon.icon-right { - line-height: 3.5rem; - width: 3.5rem; - font-size: 28px; } - -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xlarge, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xlarge { - padding-left: 4rem; } +.card:hover { + transition: all .3s; + box-shadow: 0px 8px 20px 0 rgba(42, 51, 83, 0.12), 0 5px 5px rgba(0, 0, 0, 0.06); } -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon.input-xlarge ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-left.input-xlarge ~ .icon, -input:not([type=checkbox]):not([type=radio]):not([type=submit]).input-contains-icon-right.input-xlarge ~ .icon.icon-right { - line-height: 2.5rem; - width: 3.75rem; - font-size: 35px; } +.slide-up:hover .card-image { + transform: translateY(-40px); } -.input-contains-icon ~ .icon { - display: flex; - align-items: center; - justify-content: center; - height: 100%; } +.card:hover .card-image::after { + opacity: 0; } -.input-contains-icon ~ .icon:not(.icon-right), -.input-contains-icon-left ~ .icon.icon-left { - /* Nomral input only */ - position: absolute; +.card-image { + bottom: 0; left: 0; + position: absolute; + right: 0; top: 0; - width: 3rem; - z-index: 1; } + border-radius: 5px 5px 0 0; + background-size: cover; + background-repeat: no-repeat; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } -.input-contains-icon-right ~ .icon.icon-right { +.card-image::after { + content: ''; + display: block; position: absolute; - pointer-events: none; - line-height: 2.75rem; - vertical-align: baseline; + background-color: rgba(0, 0, 0, 0.1); top: 0; + left: 0; right: 0; - width: 3rem; - z-index: 1; } - -/* Form section just adds extra spacing between form elements tiled vertically */ -.form-section:not(:last-child) { - margin-bottom: 0.5rem; } - -/* A flexbox version of form-section for inline forms */ -.form-section.section-inline { - display: flex; } - -.form-section.section-inline label:not(.form-group-label), -.form-section.section-inline button { - align-items: center; - flex-grow: 0; - /* Keep it from taking up extra space */ - display: flex; - flex-shrink: 0; } - -.form-section.section-inline input, -.form-section.section-inline .section-body { - align-items: center; - flex-grow: 1; } - -/* Form groups that group inputs with other controls. */ -.form-group { - display: flex; - display: -ms-flexbox; - margin: 0.5rem 0; - /* Add margin to the container since they have been removed from children */ } - -/* Fixes the text width being cut off */ -.form-group .form-group-btn { - -webkit-flex: 1 0 auto; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - margin-bottom: 0; } - -/* This is just an extended portion of an input which is just like a label and is read only */ -/* This will style the controls if they are the leftmost control in the form group for labels, inputs, and buttons. */ -.form-group .form-group-label:first-child:not(:last-child), -.form-group .form-group-input:first-child:not(:last-child), -.form-group .form-group-btn:first-child:not(:last-child) { - border-top-right-radius: 0; - border-bottom-right-radius: 0; } - -/* Style the middle controls */ -.form-group .form-group-label:not(:first-child):not(:last-child), -.form-group .form-group-input:not(:first-child):not(:last-child), -.form-group .form-group-btn:not(:first-child):not(:last-child) { - border-radius: 0; - margin-left: -0.1rem; - margin-right: -0.1rem; - /* Remove spacing in middle controls */ } - -/* Handles right most control in form group */ -.form-group .form-group-label:last-child:not(:first-child), -.form-group .form-group-input:last-child:not(:first-child), -.form-group .form-group-btn:last-child:not(:first-child) { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - margin-left: -0.1rem; } - -/* Form group controls */ -.form-group-label { - background-color: var(--cirrus-form-group-bg); - border: 1px solid #ddd; - border-radius: 0.2rem; - color: var(--cirrus-form-group-fg); - margin: 0; - padding: 0.8rem; - user-select: none; } - -.form-group-label.label-xsmall { - font-size: 0.55rem; - padding: 0.5rem 0.9rem; } - -.form-group-label.label-small { - font-size: 0.75rem; - padding: 0.55rem 1rem; } - -.form-group-label.label-large { - font-size: 1.5rem; } + -webkit-transition: all 500ms; + transition: all 500ms; + bottom: 0; } -.form-group-label.label-xlarge { - font-size: 2rem; } +.card-container { + display: block; + position: relative; + height: 40%; + min-height: 332px; + /* So it appears in html5 standards mode */ } -/* Keeps inputs in form group above other components */ -.form-group-input { - z-index: 1; } +.card .title-container .title, +.card .title-container .subtitle { + color: #fff; + margin: 1rem auto; } -/* Change place holder color */ -::-moz-placeholder { - color: #a9a9a9; - /* Lighter than the default */ } +.card .title-container { + position: absolute; + bottom: 1rem; + width: 100%; + padding: 0 1rem; } -::-webkit-input-placeholder { - color: #a9a9a9; - /* Lighter than the default */ } +.card .title-container .title { + font-weight: 300; + font-size: 1.5rem; + margin-bottom: 0; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } -@media screen and (max-width: 768px) { - /* Remove flex in form-section */ - .form-section.section-inline { - display: inherit; } } +/* Allow for the cards to have the same height when u-flex is used on the card */ +.card.u-flex .content { + flex-grow: 1; } -/* Separate CSS file, but same part as Layout */ -/* The base container that is similar in structure to a card but more flexible */ -.frame { - display: flex; - display: -ms-flexbox; - flex-direction: column; - -webkit-flex-direction: column; - -ms-flex-direction: column; - border-radius: 3px; - box-shadow: 0 0.2rem 1.25rem 0 rgba(27, 30, 36, 0.07); } +.card .action-bar { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding: 0.5rem; + border-top: 1px solid #e0e0e0; + box-sizing: border-box; + -webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1); + transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1); } -/* For the frame header and footer, use flex display */ -.frame .frame__header, -.frame .frame__footer { - flex: 0 0 auto; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - padding: 1rem; } +/* Add some padding to the buttons */ +.card .action-bar button, +.card .action-bar .btn, +.card .action-bar [type='submit'] { + margin: 0 0.5rem; } -/* The frame navbar can be used with level or header classes to create a navigation menu */ -.frame .frame__nav { - flex: 0 0 auto; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; } +.card .action-bar + .card-footer { + padding: 1rem 0; + border-top: 1px solid #e0e0e0; } -.frame .frame__body { - flex: 1 1 auto; - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - overflow-y: auto; - /* Show the scrollbar when needed */ - padding: 0 1.5rem; } +.card button, +.card .btn { + display: inline-block; + border-color: transparent; } -.frame .frame__title { - color: var(--cirrus-fg); - font-size: var(--font-size-m); - margin: .75rem auto 0; } +.card button:hover, +.card .btn:hover { + -webkit-transform: none; + transform: none; } -.frame .frame__subtitle { - color: rgba(55, 64, 84, 0.6); - font-size: var(--font-size-s); - margin: .25rem auto .75rem; } +.card button:focus, +.card .btn:focus { + -webkit-transform: none; + transform: none; } -/* HEADER */ -.header { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - width: 100%; - z-index: 100; - margin-bottom: 20px; - box-shadow: 0 3px 15px rgba(57, 63, 72, 0.1); +/* More card components in second example */ +.mobile-title { + position: absolute; + left: 0; background-color: var(--cirrus-bg); - max-height: 100vh; - padding: 0 2rem; - transition: all .3s; } + -moz-transition: .3s ease-in-out; + -ms-transition: all .3s ease-in-out; + transition: .3s ease-in-out; + width: 100%; + padding: 2rem 0 0 0; + backface-visibility: hidden; } -.header a { - color: #8292a2; } +.card:hover .mobile-title { + margin-top: -7rem; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } -.header a:hover { - color: #697888; } +.card:hover .card-body { + opacity: 1; + -webkit-transition: all 0.3s ease-in-out; + -moz-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; } -/* Header dark theme */ -.header-dark { - background-color: rgba(0, 0, 0, 0.87); - color: #fff; } +.card-body { + opacity: 0; + -webkit-transition: all var(--animation-duration) ease-in-out; + -moz-transition: all var(--animation-duration) ease-in-out; + -ms-transition: all var(--animation-duration) ease-in-out; + transition: all var(--animation-duration) ease-in-out; } -.header-clear { - background-color: transparent; - box-shadow: none; } +.card-footer { + position: relative; + font-size: 0.75rem; + color: #9fa5a8; } -/* Add transition to nav menu when it drops down */ -.header.header-animated .header-nav { - -webkit-transition: background 0.4s ease, height 0.4s ease; - transition: background 0.4s ease, height 0.4s ease; - -webkit-transition-property: background, height; - transition-property: background, height; - -webkit-transition-duration: 0.4s, 0.4s; - transition-duration: 0.4s, 0.4s; - -webkit-transition-timing-function: ease, ease; - transition-timing-function: ease, ease; - -webkit-transition-delay: initial, initial; - transition-delay: initial, initial; - -webkit-transition: all 0.3s; - transition: all 0.3s; } +.card p { + margin: 1rem 0; + /*max-height: 8rem; /* Prevents ridiculously looking cards */ } -.header-brand { - -webkit-overflow-scrolling: touch; +/* + NOTE: To have cards with the same height, place the card class with col-x classes and have the parent have fluid-container. +*/ +/* Card Title Bar */ +.card-head { + align-items: stretch; -webkit-box-align: stretch; -ms-flex-align: stretch; - align-items: stretch; + display: flex; display: -webkit-box; display: -ms-flexbox; - display: flex; - -ms-flex-negative: 0; - flex-shrink: 0; - max-width: 100vw; - min-height: 3.25rem; - overflow-x: auto; - overflow-y: hidden; } - -/* The container that contains all the header menu components. Child of header */ -.header-nav { - /* Flex display 768px and higher */ - overflow: auto; } - -/* Styles for header menu (aka the nav bar) */ -.nav-menu { - -webkit-transition: all 0.3s; - transition: all 0.3s; } - -.nav-item.has-sub { - position: relative; } - -/* Allow the user to scroll through navbar items if it exceeds nav-left, nav-center, or nav-right widths */ -.nav-overflow-x { - -webkit-box-pack: inherit; - -ms-flex-pack: inherit; - justify-content: inherit; - overflow-x: scroll; } - -/* Static header at the top of the screen */ -.header-fixed { - position: fixed; - top: 0; - /* Change this if you want to float the header somewhere else */ } + border-bottom: 1px solid #e0e0e0; } -/* Wrapper to vertically center header items */ -.nav-item { +.card-head-title { + align-items: center; -webkit-box-align: center; -ms-flex-align: center; - align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-transition: all 0.3s; - transition: all 0.3s; - padding: 0 0.3rem; - cursor: pointer; } - -.nav-item a { - align-items: center; - display: flex; } - -/* Hover effect for header elements when appropriate */ -.header:not(.header-clear) .nav-item:not(.no-hover):hover, -.header:not(.header-clear) .nav-item:not(.no-hover).hovered { - -webkit-transition: all 0.3s; - transition: all 0.3s; - background-color: rgba(216, 216, 216, 0.15); } - -.header:not(.header-clear) .nav-item.active, -.header:not(.header-clear) .nav-item.active:hover { - background-color: rgba(216, 216, 216, 0.35); } - -/* HEADER DROP DOWN MENU */ -.nav-item .dropdown-menu { - background-color: var(--cirrus-bg); - position: absolute; - top: 95%; - /*right: 0; /* Unable to solve problem when we have multiple drop down menus */ - z-index: 1000; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - font-size: 14px; - text-align: left; - list-style: none; - background-clip: padding-box; - border: 1px solid #eee; - border-radius: 0 0 4px 4px; - box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.1); } - -/* Add border radius to whole menu with clear header */ -.header.header-clear .nav-item .dropdown-menu { - border-radius: 4px; } - -/* Just add a transition in general */ -.nav-item .dropdown-menu.dropdown-animated { - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } - -/* Dropdown menu location adjustment located below for sizes above phones */ -/* Dropdown menu indicator */ -.nav-item.has-sub .nav-dropdown-link::after { - border: 2px solid var(--cirrus-primary); - /* Must be first to create the triangle shape */ - border-right: 0; - /* Create the triangle effect */ - border-top: 0; - display: block; - height: 0.5em; - width: 0.5em; - content: " "; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - pointer-events: none; - margin-top: -0.435em; - right: 1.125em; - top: 50%; - position: absolute; } - -/* Add room for the dropdown chevron pseudoelement */ -.nav-item.has-sub .nav-dropdown-link { - padding-right: 2.5rem; - position: relative; - /* Needed for hiding glyphs in mobile header */ } - -/* Dark dropdown menu theme */ -.nav-item .dropdown-menu.dropdown-dark, -.header-dark .dropdown-menu { - background-color: rgba(0, 0, 0, 0.87); - border: 1px solid #333; - color: #fff; } - -.dropdown-menu.dropdown-shown, -.nav-item.active { - opacity: 1; } - -.dropdown-menu > li > a { - display: block; - padding: 0.5rem 1rem; - clear: both; - line-height: 1.42857143; - white-space: nowrap; } - -/* Theme for dark menu */ -.header-dark .nav-item a, -.header-dark .dropdown-menu > li > a { - color: #fff; } + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-weight: 700; + padding: 0 1rem; } -.dropdown-menu > li { - margin: 0; - -webkit-transition: all 0.3s; - transition: all 0.3s; } +/* EXTENDED FORM */ +/* Base class layout for extended form */ +.form-ext-control { + display: block; + min-height: 1.5rem; + padding-left: 1.5rem; + position: relative; } -.dropdown-menu > li:hover { - -webkit-transition: all 0.3s; - transition: all 0.3s; - background-color: rgba(216, 216, 216, 0.15); } +/* Hides the original input */ +.form-ext-input { + opacity: 0; + position: absolute; + z-index: -1; } -.dropdown-menu > li:active { - -webkit-transition: all 0.3s; - transition: all 0.3s; - background-color: rgba(216, 216, 216, 0.25); } +.form-ext-input:disabled ~ .form-ext-label { + opacity: 0.4; } -.dropdown-menu > li:last-child { - margin-bottom: 0; } +.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label:before { + background-color: var(--cirrus-success); } -.dropdown-menu .dropdown-menu-divider { - border: none; - background-color: rgba(216, 216, 216, 0.15); - height: 1px; - margin: 0.5rem 0; } +.form-ext-control .form-ext-input.form-ext-input--success:checked ~ .form-ext-label { + color: var(--cirrus-success); } -.nav-btn { - cursor: pointer; - display: block; - height: 3.5rem; - position: relative; - width: 3.5rem; } +.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label:before { + background-color: var(--cirrus-danger); } -.header .btn, -.header button, -.header input[type="submit"] { - margin: 0; } +.form-ext-control .form-ext-input.form-ext-input--error:checked ~ .form-ext-label { + color: var(--cirrus-danger); } -@media screen and (min-width: 769px) { - .header { - -webkit-box-align: stretch; - /* Box Align and align items to stretch to make nav-items fill up parent height */ - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; } - .header-nav { - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - /* Make items fill up all available space regardless of width https://drafts.csswg.org/css-align/ */ - display: -webkit-box; - display: -ms-flexbox; - display: flex; - position: relative; - text-align: center; - width: 100%; - top: 0; - overflow: visible; - /* Only visible for showing dropdown menus, hidden for mobile */ } - /* These styles can also be used on menus in the body */ - .nav-left, - .nav-right { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - -ms-grid-row-align: stretch; - align-items: stretch; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - /*overflow: hidden;*/ } - /* Align items to the left */ - .nav-left { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - /*overflow: hidden; - overflow-x: auto;*/ - white-space: nowrap; } - /* Align items to the right */ - .nav-right { - display: -webkit-box; - display: -ms-flexbox; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - /*overflow: hidden; - overflow-x: auto;*/ - white-space: nowrap; } - /* Centering items, best used when nav-brand is not used to prevent offset */ - .nav-center { - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin-left: auto; - margin-right: auto; } - /* Hide hamburger button */ - .nav-btn { - display: none; } - /* .nav-item { - position: relative; /* Include for helping dropdown menu positioning Deprecated 0.5.6 - } */ - /* Expand link area for desktop views so it is easier to click */ - .nav-item a { - padding: 0.5rem 1rem; } - .nav-item .dropdown-menu { - opacity: 0; - pointer-events: none; - /* Make cursor not respond to menu links when not displayed */ } - .nav-item .dropdown-menu.dropdown-animated { - -webkit-transform: translateY(-5px); - /* Used for transitional drop down effect */ - transform: translateY(-5px); } - .nav-item .dropdown-menu.dropdown-shown, - .nav-item.toggle-hover:hover .dropdown-menu, - .nav-item .dropdown-menu.dropdown-animated.dropdown-shown, - .nav-item.toggle-hover:hover .dropdown-animated.dropdown-menu { - opacity: 1; - -webkit-transform: none; - /* Used for transitional drop down effect */ - transform: none; - pointer-events: auto; } - /* Align dropdown menu to the left side of the parent nav-item for header-left */ - .nav-left .has-sub .dropdown-menu { - left: 0; - right: auto; } - /* Align dropdown menu to the right side of the parent nav-item for header-right */ - .nav-right .has-sub .dropdown-menu { - left: auto; - right: 0; } } +.form-ext-label { + margin-bottom: 0; + position: relative; } -@media screen and (max-width: 768px) { - /* Add scrolling support in header */ - .header { - display: flex; - flex-direction: column; } - .header-brand .nav-item:first-child { - padding: 0 1rem; - /* Add padding to the first child, usually the logo */ } - /* Hide dropdon menu on mobile */ - .header-nav { - height: 0; } - /* Show the dropdown */ - .header-nav.active { - height: 100vh; } - /* Remove flex for mobile devices */ - .nav-item.has-sub { - display: block; } - .nav-item.has-sub .dropdown-menu.dropdown-shown { - border-radius: 0; - box-shadow: none; - display: block; - position: relative; - top: 1rem; - float: none; - border: none; - background-color: transparent; - margin-bottom: 1rem; } - .nav-item.has-sub .dropdown-menu.dropdown-dark { - background-color: rgba(0, 0, 0, 0.17); - border: 0; - color: #fff; } - /* Hide the menu by default in mobile view (overflow on header-right can expose it) */ - .nav-item.has-sub .dropdown-menu { - display: none; } - /* Make the menu items larger in the dropdown menu */ - .header-nav .nav-item { - padding: 1rem; } - /* Get rid of extra spaces */ - .header-nav .nav-item > a { - padding: 0; - width: 100%; - /* Stretch the link to span the entire list item */ } - /* Hamburger button */ - .nav-btn { - cursor: pointer; - display: block; - position: relative; - margin-left: auto; } - .nav-btn span { - background-color: #4d565f; - display: block; - height: 2px; - left: 50%; - margin-left: -7px; - position: absolute; - top: 50%; - -webkit-transition: none 86ms ease-out; - transition: none 86ms ease-out; - -webkit-transition-property: background, left, opacity, -webkit-transform; - transition-property: background, left, opacity, -webkit-transform; - transition-property: background, left, opacity, transform; - transition-property: background, left, opacity, transform, -webkit-transform; - width: 15px; } - .header-dark .nav-btn span { - background-color: #fff; } - /* Line spacing in hamburger button */ - .nav-btn span:nth-child(1) { - margin-top: -6px; } - .nav-btn span:nth-child(2) { - margin-top: -1px; } - .nav-btn span:nth-child(3) { - margin-top: 4px; } - /* Hamburger button on active */ - .nav-btn.active span:nth-child(1) { - margin-left: -5px; - transform: rotate(45deg); - transform-origin: left top; } - .nav-btn.active span:nth-child(2) { - opacity: 0; } - .nav-btn.active span:nth-child(3) { - margin-left: -5px; - transform: rotate(-45deg); - transform-origin: left bottom; } - /* Hide drop down menu items */ - .nav-left, - .nav-center, - .nav-right { - overflow: hidden; } } +/* Base of custom form inputs */ +.form-ext-label:before, +.form-ext-label:after { + content: ""; + display: block; + height: 1rem; + left: -1.5rem; + position: absolute; + top: .3rem; + transition: all var(--animation-duration); + width: 1rem; } -@media screen and (min-width: 1023px) { - .header { - padding: 0 2rem; } } +.form-ext-label:before { + background-color: var(--cirrus-light); + border: 1px solid #d5d7dc; + border-radius: .25rem; + pointer-events: none; + user-select: none; + box-sizing: border-box; } -/* HEADER */ -.content { - max-width: 60em; - margin: 0 auto 1.5em; - width: 80%; } +.form-ext-label:after { + background-position: center; + background-repeat: no-repeat; + background-size: 50% 50%; } -/* .content-no-padding { Removed 0.5.5 - max-width: 60em; - margin: 0 auto; - width: 80%; -} */ -/* Content that centers in parent and fills parent div without the extra vertical margin */ -/* .content-fluid { Removed 0.5.5 - width: 100%; - margin: 0 auto; -} */ -.fullscreen { - top: 0; - right: 0; - bottom: 0; - left: 0; - height: 100vh; } +/* Checked state */ +.form-ext-control .form-ext-input:checked ~ .form-ext-label:before { + background-color: var(--cirrus-primary); } -/* This works well with panel */ -section { - display: block; } +/* Checkbox */ +.form-ext-control.form-ext-checkbox .form-ext-input:checked ~ .form-ext-label:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); } -.panel { - padding: 2.5em 0; } +.form-ext-checkbox .form-ext-label:before { + border-radius: .25rem; } -/* This works well with spans and maybe even hr */ -.divider { - border-top: 0.05rem solid rgba(173, 173, 173, 0.5); - height: 0.1rem; - margin: 1.8rem 0 1.6rem; } +/* Radio Button */ +.form-ext-control.form-ext-radio .form-ext-input:checked ~ .form-ext-label:after { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); } -.divider[data-content] { - margin: 0.8rem 0; } +.form-ext-radio .form-ext-label:before { + border-radius: 50%; } -.divider--v[data-content] { +/* Toggle Switches */ +.form-ext-toggle { + cursor: pointer; + position: relative; } + +.form-ext-toggle input[type="checkbox"], +.form-ext-toggle input[type="radio"] { + opacity: 0; + position: absolute; + z-index: -1; } + +.form-ext-toggle__label { + align-items: center; + display: flex; + justify-content: space-between; } + +.form-ext-toggle__toggler { + border: 1px solid var(--cirrus-gray); + border-radius: 6.25rem; + color: var(--cirrus-gray); display: block; - padding: 0.8rem; } + font-size: 9px; + height: 1.5rem; + position: relative; + width: 3rem; } + +.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler, +.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler, +.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler, +.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler { + background-color: var(--cirrus-primary); + border-color: var(--cirrus-primary); + color: #fff; + position: relative; + transition: all .4s ease; } + +.form-ext-toggle i { + display: inline-block; } + +.form-ext-input:disabled ~ .form-ext-toggle__toggler { + opacity: 0.5; } + +.form-ext-toggle__toggler i::before, +.form-ext-toggle__toggler i::after { + content: ""; + display: block; + position: absolute; } + +.form-ext-toggle__toggler i::before { + /* TODO SET CONTENT */ + content: attr(data-uncheck-icon); + padding: 2px 7px; + line-height: 18px; + text-align: right; + top: 0; + width: 65%; + font-size: 12px; } + +.form-ext-toggle__toggler i::after { + background-color: var(--cirrus-gray); + border-radius: 50%; + height: 16px; + left: 4px; + width: 16px; + transform: translateY(-50%); + transition: left var(--animation-duration) ease; + text-align: left; } + +.form-ext-control .form-ext-input:checked ~ .form-ext-label:before { + border: none; } + +.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler i::after, +.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler i::after, +.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler i::after, +.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler i::after { + background-color: #fff; + left: calc(100% - 20px); } + +.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler i::before, +.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler i::before, +.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler i::before, +.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler i::before { + color: #fff; + content: attr(data-check-icon); + text-align: left; } + +.form-ext-toggle input[type="checkbox"]:checked + .form-ext-toggle__toggler i::after, +.form-ext-toggle input[type="checkbox"]:checked + * .form-ext-toggle__toggler i::after, +.form-ext-toggle input[type="radio"]:checked + .form-ext-toggle__toggler i::after, +.form-ext-toggle input[type="radio"]:checked + * .form-ext-toggle__toggler i::after { + background-color: #fff; + left: calc(100% - 20px); } + +.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked + .form-ext-toggle__toggler, +.form-ext-toggle.form-ext-toggle--error input[type="checkbox"]:checked + * .form-ext-toggle__toggler, +.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked + .form-ext-toggle__toggler, +.form-ext-toggle.form-ext-toggle--error input[type="radio"]:checked + * .form-ext-toggle__toggler { + background-color: var(--cirrus-danger); + border-color: var(--cirrus-danger); } + +.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler { + border-color: var(--cirrus-danger); + color: var(--cirrus-danger); } + +.form-ext-toggle.form-ext-toggle--error .form-ext-toggle__toggler i::after { + background-color: var(--cirrus-danger); } + +.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked + .form-ext-toggle__toggler, +.form-ext-toggle.form-ext-toggle--success input[type="checkbox"]:checked + * .form-ext-toggle__toggler, +.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked + .form-ext-toggle__toggler, +.form-ext-toggle.form-ext-toggle--success input[type="radio"]:checked + * .form-ext-toggle__toggler { + background-color: var(--cirrus-success); + border-color: var(--cirrus-success); } + +.form-ext-toggle--success .form-ext-toggle__toggler { + border-color: var(--cirrus-success); + color: var(--cirrus-success); } + +.form-ext-toggle--success .form-ext-toggle__toggler i::after { + background-color: var(--cirrus-success); } + +/** + * Accessibility + */ +.form-ext-toggle .form-ext-input:focus + .form-ext-toggle__toggler, +.form-ext-toggle .form-ext-input:focus ~ .form-ext-label:before { + box-shadow: 0 0 0 0.2rem rgba(var(--cirrus-primary-rgb), var(--focus-opacity)), inset 0 1px 8px rgba(0, 0, 0, 0.07); } + +.form-ext-toggle.form-ext-toggle--success .form-ext-input:focus + .form-ext-toggle__toggler { + box-shadow: 0 0 0 0.2rem rgba(var(--cirrus-success-rgb), var(--focus-opacity)), inset 0 1px 8px rgba(34, 197, 127, 0.13); } + +.form-ext-input.form-ext-input--success:focus ~ .form-ext-label:before { + border-color: inherit; + box-shadow: 0 0 0 0.2rem rgba(var(--cirrus-success-rgb), var(--focus-opacity)), inset 0 1px 8px rgba(0, 0, 0, 0.07); } + +/* GRID */ +:root { + --gap-0: 0; + --gap-1: 0.25rem; + --gap-2: 0.5rem; + --gap-3: 1rem; + --gap-4: 1.25rem; + --gap-5: 1.5rem; + --gap-6: 3rem; + --gap-7: 6rem; + --gap-8: 9rem; + --gap-9: 12rem; } + +.grid { + --grid-gap: --gap-2; + --grid-template-column: repeat(12, minmax(0, 1fr)); + --grid-column-start: auto; + --grid-column-end: auto; + --grid-row-start: auto; + --grid-row-end: auto; + display: grid; + grid-gap: var(--grid-gap); + grid-template-columns: var(--grid-template-column); } + +/* Styling grid cells */ +.grid .c { + grid-column-start: var(--grid-column-start); + grid-column-end: var(--grid-column-end); } + +/* Templates */ +.grid.grid-cols-1 { + --grid-template-column: repeat(1, minmax(0, 1fr)); } + +.grid.grid-cols-2 { + --grid-template-column: repeat(2, minmax(0, 1fr)); } + +.grid.grid-cols-3 { + --grid-template-column: repeat(3, minmax(0, 1fr)); } + +.grid.grid-cols-4 { + --grid-template-column: repeat(4, minmax(0, 1fr)); } + +.grid.grid-cols-5 { + --grid-template-column: repeat(5, minmax(0, 1fr)); } + +.grid.grid-cols-6 { + --grid-template-column: repeat(6, minmax(0, 1fr)); } + +.grid.grid-cols-7 { + --grid-template-column: repeat(7, minmax(0, 1fr)); } -.divider--v::before { - border-left: 0.05rem solid rgba(173, 173, 173, 0.5); - bottom: 0.4rem; - content: ''; - display: block; - left: 50%; - position: absolute; - top: 0; - transform: translateX(-50%); } +.grid.grid-cols-8 { + --grid-template-column: repeat(8, minmax(0, 1fr)); } -.divider--v[data-content]::after, -.divider[data-content]::after { - background: #fff; - color: #bcc3ce; - content: attr(data-content); - left: 50%; - display: inline-block; - padding: 0 0.4rem; - position: absolute; - transform: translate(-50%, -50%); - top: 50%; } +.grid.grid-cols-9 { + --grid-template-column: repeat(9, minmax(0, 1fr)); } -.divider--v[data-content] { - left: 50%; - padding: 0.2rem 0; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); } +.grid.grid-cols-10 { + --grid-template-column: repeat(10, minmax(0, 1fr)); } -/* Removed 0.5.5 */ -/* .divider-short { - max-width: 15rem; - width: 100%; -} */ -/* Hero image div */ -.hero-img { - /* Specify the backgroud image yourself */ - background-size: cover; } +.grid.grid-cols-11 { + --grid-template-column: repeat(11, minmax(0, 1fr)); } -.parallax-img { - background-attachment: fixed !important; } +.grid.grid-cols-12 { + --grid-template-column: repeat(12, minmax(0, 1fr)); } -.hero { - /* Parent of hero-body */ - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - /* Important to stretch height of hero-body */ - -webkit-box-orient: vertical; - /* -webkit-box-direction: normal; /* Deprecated 0.5.5 - -ms-flex-direction: column; - flex-direction: column; Stack the items in the container */ - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } +.grid.grid-gap-0 { + --grid-gap: var(--gap-0); } -.hero-body { - -ms-flex-positive: 1; - flex-grow: 1; - /* Tells the hero-body to take up the entire space */ - -ms-flex-negative: 0; - flex-shrink: 0; - padding: 3rem 1.5rem; - align-items: center; - display: -ms-flexbox; - display: flex; - width: 100%; } +.grid.grid-gap-1 { + --grid-gap: var(--gap-1); } -.space { - display: block; - width: 100%; - height: 1rem; } +.grid.grid-gap-2 { + --grid-gap: var(--gap-2); } -.space.large { - padding: 1rem 0; } +.grid.grid-gap-3 { + --grid-gap: var(--gap-3); } -.space.x-large { - padding: 2rem 0; } +.grid.grid-gap-4 { + --grid-gap: var(--gap-4); } -/* Use for spacing out elements vertically */ -.row { - -ms-flex: 1; - flex: 1; - /* max-width: 100%; */ - flex-wrap: wrap; - padding: 0.5rem 0; } +.grid.grid-gap-5 { + --grid-gap: var(--gap-5); } -.r { - /* Legacy row pre 0.5.5 */ - max-width: 100%; - padding: 0.5rem; } +.grid.grid-gap-6 { + --grid-gap: var(--gap-6); } -.row.row--no-wrap { - -webkit-flex-wrap: nowrap; - /* Remove wrapping of the columns by default */ - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - overflow-x: auto; - /* Can be disabled to remove scroll bar */ } +.grid.grid-gap-7 { + --grid-gap: var(--gap-7); } -.row::after { - content: ''; - clear: both; - display: table; } +.grid.grid-gap-8 { + --grid-gap: var(--gap-8); } -/* GRID */ -.row .col { - display: block; - flex: 1; - padding: 0.15rem 0.75rem; } +.grid.grid-gap-9 { + --grid-gap: var(--gap-9); } -.row .col-1 { - width: 8.33333333%; } +/* Column expansion */ +.grid .grid-c-1 { + grid-column: span 1; } -.row .col-2 { - width: 16.66666667%; } +.grid .grid-c-2 { + grid-column: span 2; } -.row .col-3 { - width: 25%; } +.grid .grid-c-3 { + grid-column: span 3; } -.row .col-4 { - width: 33.33333333%; } +.grid .grid-c-4 { + grid-column: span 4; } -.row .col-5 { - width: 41.66666667%; } +.grid .grid-c-5 { + grid-column: span 5; } -.row .col-6 { - width: 50%; } +.grid .grid-c-6 { + grid-column: span 6; } -.row .col-7 { - width: 58.33333333%; } +.grid .grid-c-7 { + grid-column: span 7; } -.row .col-8 { - width: 66.66666667%; } +.grid .grid-c-8 { + grid-column: span 8; } -.row .col-9 { - width: 75%; } +.grid .grid-c-9 { + grid-column: span 9; } -.row .col-10 { - width: 83.33333333%; } +.grid .grid-c-10 { + grid-column: span 10; } -.row .col-11 { - width: 91.66666667%; } +.grid .grid-c-11 { + grid-column: span 11; } -.row .col-12 { - width: 100%; } +.grid .grid-c-12 { + grid-column: span 12; } -/* Column offsets on the left side */ -.row .offset-1 { - margin-left: 8.33333333%; } +/* Row expansion */ +.grid .grid-r-1 { + grid-row: span 1; } -.row .offset-2 { - margin-left: 16.66666667%; } +.grid .grid-r-2 { + grid-row: span 2; } -.row .offset-3 { - margin-left: 25%; } +.grid .grid-r-3 { + grid-row: span 3; } -.row .offset-4 { - margin-left: 33.33333333%; } +.grid .grid-r-4 { + grid-row: span 4; } -.row .offset-5 { - margin-left: 41.66666667%; } +.grid .grid-r-5 { + grid-row: span 5; } -.row .offset-6 { - margin-left: 50%; } +.grid .grid-r-6 { + grid-row: span 6; } -.row .offset-7 { - margin-left: 58.33333333%; } +.grid .grid-r-7 { + grid-row: span 7; } -.row .offset-8 { - margin-left: 66.66666667%; } +.grid .grid-r-8 { + grid-row: span 8; } -.row .offset-9 { - margin-left: 75%; } +.grid .grid-r-9 { + grid-row: span 9; } -.row .offset-10 { - margin-left: 83.33333333%; } +.grid .grid-r-10 { + grid-row: span 10; } -.row .offset-11 { - margin-left: 91.66666667%; } +.grid .grid-r-11 { + grid-row: span 11; } -.row .offset-12 { - margin-left: 100%; } +.grid .grid-r-12 { + grid-row: span 12; } -/* Auto align col to left in row */ -.row .offset-right { - margin-left: 0; - margin-right: auto; } +/* Cell Column Start/End */ +.grid .grid-cs-1 { + grid-column-start: 1; } -/* Auto align col to middle in row */ -.row .offset-center { - margin-left: auto; - margin-right: auto; } +.grid .grid-cs-2 { + grid-column-start: 2; } -/* Auto align col to right in row */ -.row .offset-left { - margin-left: auto; - margin-right: 0; } +.grid .grid-cs-3 { + grid-column-start: 3; } -/* Use in parent div of fluid col Deprecated in 0.5.6, use .row -.fluid-container { - display: flex; - overflow: auto; -} +.grid .grid-cs-4 { + grid-column-start: 4; } + +.grid .grid-cs-5 { + grid-column-start: 5; } -/* Wrap controls instead on overflow -.fluid-container.wrap { - -webkit-align-items: center; - align-items: center; - display: flex; - display: -ms-flexbox; - -ms-flex-align: center; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} +.grid .grid-cs-6 { + grid-column-start: 6; } -/* Resizes elements in a row equally given the number of elements located in it -.fluid-container .col-fluid { - display: block; - -ms-flex-preferred-size: 0; - flex-basis: 0; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; -} +.grid .grid-cs-7 { + grid-column-start: 7; } -/* No expansion for specific col-fluid columns -.fluid-container .col-fluid.no-flex { - flex-grow: 0; - flex-shrink: 0; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - -ms-flex-negative: 0; -} */ -/* Some offset values */ -.row [class^='col-'], -.row [class*=' col-'] { - float: left; - /* Keeps the elements in 1 row */ - padding: 0 0.5rem; } +.grid .grid-cs-8 { + grid-column-start: 8; } -/* Columns without the spacing */ -.row.no-space [class^='col-'], -.row.no-space [class*=' col-'] { - padding: 0; } +.grid .grid-cs-9 { + grid-column-start: 9; } -/* Ignore overflow in columns */ -/* .row.expand { DEPRECATED 0.5.5 - -webkit-flex-wrap: nowrap; /* Remove wrapping of the columns by default - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - overflow-x: auto; /* Can be disabled to remove scroll bar -} */ -/* Only for divs with .expand so they can go past the parent div width */ -/* .row.expand [class^="col-"], DEPRECATED 0.5.5, no use -.row.expand [class*=" col-"] { - -webkit-flex: none; - -ms-flex: none; - flex: none; -} */ -/* Used for aligning controls next to each other */ -.row.has-controls { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; } +.grid .grid-cs-10 { + grid-column-start: 10; } -/* Divider for multiple elements in a div */ -/* .divided > .fluid-container:not(.row), -.divided > .row [class^="col-"], .divided > .row [class*=" col-"] { DEPRECATED 0.5.5 - box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); -} */ -/* Remove border in first child */ -/* .divided > .row [class^="col-"]:first-child, -.divided > .row [class*=" col-"]:first-child { - box-shadow: none; DEPRECATED 0.5.5 -} */ -.level { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; } +.grid .grid-cs-11 { + grid-column-start: 11; } -.level-left { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; - /* Start for left */ - margin-right: 1rem; } +.grid .grid-cs-12 { + grid-column-start: 12; } -.level-right { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; - /* End for right */ } +.grid .grid-cs-end { + grid-column-end: -1; } -.level-item { - /* Centers items */ - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; } +.grid .grid-ce-1 { + grid-column-end: 2; } -/* Used to stretch the contents of div in level to fill */ -.level-content { - -ms-flex-preferred-size: auto; - flex-basis: auto; - -webkit-box-flex: 1; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-negative: 1; - flex-shrink: 1; - text-align: left; - width: 100%; } +.grid .grid-ce-2 { + grid-column-end: 3; } -/* Width CSS */ -.w-10 { - width: 10%; } +.grid .grid-ce-3 { + grid-column-end: 4; } -.w-20 { - width: 20%; } +.grid .grid-ce-4 { + grid-column-end: 5; } -.w-30 { - width: 30%; } +.grid .grid-ce-5 { + grid-column-end: 6; } -.w-40 { - width: 40%; } +.grid .grid-ce-6 { + grid-column-end: 7; } -.w-50 { - width: 50%; } +.grid .grid-ce-7 { + grid-column-end: 8; } -.w-60 { - width: 60%; } +.grid .grid-ce-8 { + grid-column-end: 9; } -.w-70 { - width: 70%; } +.grid .grid-ce-9 { + grid-column-end: 10; } -.w-80 { - width: 80%; } +.grid .grid-ce-10 { + grid-column-end: 11; } -.w-90 { - width: 90%; } +.grid .grid-ce-11 { + grid-column-end: 12; } -.w-100 { - width: 100%; } +.grid .grid-ce-12 { + grid-column-end: 13; } -.w-auto { - width: auto; } +/* Cell Row Start/End */ +.grid .grid-rs-1 { + grid-row-start: 1; } -/* Height CSS */ -.h-10 { - height: 10%; } +.grid .grid-rs-2 { + grid-row-start: 2; } -.h-20 { - height: 20%; } +.grid .grid-rs-3 { + grid-row-start: 3; } -.h-30 { - height: 30%; } +.grid .grid-rs-4 { + grid-row-start: 4; } -.h-40 { - height: 40%; } +.grid .grid-rs-5 { + grid-row-start: 5; } -.h-50 { - height: 50%; } +.grid .grid-rs-6 { + grid-row-start: 6; } -.h-60 { - height: 60%; } +.grid .grid-rs-7 { + grid-row-start: 7; } -.h-70 { - height: 70%; } +.grid .grid-rs-8 { + grid-row-start: 8; } -.h-80 { - height: 80%; } +.grid .grid-rs-9 { + grid-row-start: 9; } -.h-90 { - height: 90%; } +.grid .grid-rs-10 { + grid-row-start: 10; } -.h-100 { - height: 100%; } +.grid .grid-rs-11 { + grid-row-start: 11; } -.h-auto { - height: auto; } +.grid .grid-rs-12 { + grid-row-start: 12; } -@media screen and (min-width: 769px) { - .row { - display: flex; } - .level-right { - margin-left: 1rem; } - /* Keep all level children the same height */ - .level.fill-height { - -webkit-box-align: stretch; - /* Box Align and align items to stretch to make nav-items fill up parent height */ - -ms-flex-align: stretch; - align-items: stretch; - display: -webkit-box; - display: -ms-flexbox; - display: flex; } } +.grid .grid-rs-end { + grid-row-end: -1; } -/* MOBILE */ -@media screen and (max-width: 768px) { - .container { - width: 100%; } - .row { - margin-top: 0; } - .row [class^='col-']:not(.ignore-screen), - .row [class*=' col-']:not(.ignore-screen) { - /* Remove the grid structure for smaller screens */ - width: 100%; - margin-left: 0; - padding: 0; } - /* Dividers for mobile layout */ - .divided > .row [class^='col-'], - .divided > .row [class*=' col-'] { - box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); } - .level.ignore-screen, - .level-left.ignore-screen, - .level-right.ignore-screen { - display: -webkit-box; - display: -ms-flexbox; - display: flex; } - .level.fill-height { - display: inherit; - /* Allow children to expand */ } - .hero-body { - padding: 0; } } +.grid .grid-re-1 { + grid-row-end: 2; } -/* LINKS */ -a { - color: var(--cirrus-link); - font-weight: 600; - padding: 2px; - text-decoration: none; - transition: all 0.3s; } +.grid .grid-re-2 { + grid-row-end: 3; } -a:hover { - color: var(--cirrus-link-dark); - transition: all 0.3s; } +.grid .grid-re-3 { + grid-row-end: 4; } -a:visited, -a:hover, -a:active { - backface-visibility: hidden; - text-decoration: none; } +.grid .grid-re-4 { + grid-row-end: 5; } -.subtitle a { - padding: 0; - /* Removes weird offset in subtitle links */ } +.grid .grid-re-5 { + grid-row-end: 6; } -/* a.display-block { Deprecated 0.5.5 - display: block; -} */ -a.underline { - text-decoration: underline; } +.grid .grid-re-6 { + grid-row-end: 7; } -p a, -h1 a, -h2 a, -h3 a, -h4 a, -h5 a, -h6 a, -blockquote a, -article a { - display: inline; } +.grid .grid-re-7 { + grid-row-end: 8; } -a .btn, -a button, -[type='submit'] a { - margin-bottom: 0; - /* Remove random excess space */ } +.grid .grid-re-8 { + grid-row-end: 9; } -/* LISTS */ -ul, -ol { - margin: 1rem 0 1rem 1rem; - padding-inline-start: 0.5rem; } +.grid .grid-re-9 { + grid-row-end: 10; } -ul { - list-style: disc; } +.grid .grid-re-10 { + grid-row-end: 11; } -/* Handle nesting */ -ul ul, -ol ul, -ul ol, -ol ol { - margin: 0 0 0 1rem; } +.grid .grid-re-11 { + grid-row-end: 12; } -/* Nested list bullet types */ -ul ul { - list-style-type: circle; } +.grid .grid-re-12 { + grid-row-end: 13; } -ul ul ul { - list-style-type: square; } +@media screen and (max-width: 768px) { + .grid { + --grid-template-column: repeat(1, minmax(0, 1fr)); } } -ol ol { - list-style: lower-alpha; } +/* EXTENDED LINKS */ +/* Animated links */ +.u, +.utb { + display: inline; + position: relative; + /* So the psuedo-elements are positioned correctly */ } -ol ol ol { - list-style: upper-roman; } +/* Underline */ +.u::after { + content: ""; + transition: all 0.3s; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: absolute; + height: 0.1rem; + width: 0; + background: var(--cirrus-link-dark); + bottom: -0.25em; } -/* Description lists */ -dl { - margin: 1rem 0; } +.u:hover::after { + width: 100%; } -/* Detail title */ -dt { - font-weight: 700; } +.u-LR::after { + /* Left to Right */ + left: 0; } -dd { - margin-bottom: 0.5rem; } +.u-RL::after { + /* Right to Left */ + right: 0; } -li { - margin: 0.25rem 0; } +.u-RL:hover::after { + width: 100%; } -/* Exclude margin in menus */ -li:not(.dropdown-menu > li):last-child { - margin-bottom: 1rem; } +.u-C::after { + /* Center Outwards */ + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } -/* MISC */ -ul.no-bullets { - list-style: none; } +/* Underline top and bottom */ +.utb::before, +.utb::after { + content: ""; + transition: all 0.3s; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: absolute; + height: 0.1rem; + width: 0; + background: var(--cirrus-link-dark); } -/* MENU LISTS */ -.menu { - font-size: 1rem; } +.utb::before { + top: -0.25em; } -ul.menu { - list-style: none; - margin: 0.5rem 0; } +.utb::after { + bottom: -0.25em; } -/* Style headers to have even space distribution. */ -.menu-title:not(:first-child) { - margin-bottom: 1rem; } +.utb:hover::before, +.utb:hover::after { + width: 100%; } -.menu-title:not(:last-child) { - margin-top: 1rem; } +.utb-LR::before, +.utb-LR::after { + left: 0; } -/* Style menu items */ -.menu .menu-item a { - color: #555; - display: block; - padding: 0.5em 0.75em; - border-radius: 3px; - font-size: var(--font-size-s); - cursor: pointer; - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } +.utb-RL::before, +.utb-RL::after { + right: 0; } -.menu .menu-item:hover > a { - background-color: rgba(208, 208, 208, 0.3); - color: #d43644; - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } +.utb-C::before, +.utb-C::after { + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } -.menu .menu-item.selected > a { - color: #fff; - background-color: var(--cirrus-primary); } +/* Opposite start */ +.utb-OLR::before { + /* Suffix denotes border transition direction for the top border (left to right). Bottom border will be the opposite direction */ + left: 0; } -.menu .menu-item .menu-addon { - padding: 0.3rem; - z-index: 1; +.utb-OLR::after { + right: 0; } + +.utb-ORL::before { + right: 0; } + +.utb-ORL::after { + left: 0; } + +/* Links with square borders */ +/* Please note that usquare is the parent span (not div) which would create the left and right borders. The link (.utb-OLR) gets nested within this */ +.usquare { + margin-left: 0.4rem; position: relative; - color: var(--cirrus-fg); - cursor: pointer; - float: left; - margin-right: 0.1rem; - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } + overflow: hidden; } + +.usquare a { + position: static; + padding: 0.2rem 0.4rem; } + +.usquare::before, +.usquare::after { + content: ""; + transition: 0.25s all ease; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + position: absolute; + width: 2px; + width: 0.1 rem; + height: 0; + background: var(--cirrus-link-dark); } -.menu .menu-item .menu-addon .icon { - font-size: inherit; } +.usquare::before { + left: 0; + bottom: -0.2rem; } -/* Darken on hover to differentiate from menu-item */ -.menu .menu-item .menu-addon:hover { - background-color: rgba(60, 60, 60, 0.25); - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } +.usquare.delay::before { + transition-delay: 0.6s; } -.menu .menu-item .menu-addon.right { - float: right; - margin-right: 0; - margin-left: 0.1rem; } +.usquare::after { + right: 0; + top: -0.2rem; } -.menu .menu-item.selected .menu-addon { - color: #fff; } +.usquare.delay::after { + transition-delay: var(--animation-duration); } -/* Style sub menus inside a menu */ -.menu .menu-item ul { - border-left: 1px solid #dbdbdb; - margin: 0.75rem; - padding-left: 0.75rem; } +.usquare a::before { + left: 0; + transition: 0.25s all ease; } -/* Menu item divider */ -.menu .divider { - border-top: 0.1rem solid #eee; - height: 0.1rem; - margin: 1rem 0; } +.usquare a::after { + right: 0; + transition: 0.25s all ease; } -/* Title for the section separated by the divider */ -.menu .divider::after { - content: attr(data-label); - /* Text that will be displayed */ - background-color: var(--cirrus-bg); - color: #b7b7b7; - display: inline-block; - padding: 0 0.7rem; - margin: 0.5rem; - font-size: 0.7rem; - -webkit-transform: translateY(-1.1rem); - transform: translateY(-1.1rem); } +.usquare.delay a::after { + transition: 0.25s all ease 0.4s; } -/* Dropdown menu for dropdown buttons */ -.list-dropdown { - display: inline-block; - position: relative; } +.usquare:hover::before, +.usquare:hover::after { + height: calc(100% + 0.4rem); + /* Makes the left and right borders */ } -.list-dropdown .menu { - position: absolute; - top: 75%; +.usquare:hover a::before, +.usquare:hover a::after { + width: 100%; } + +/* The base of the modal dialog, which is an overlay of the webpage */ +.modal { + position: fixed; + /* Scrolls with the user */ + top: 0; left: 0; - -webkit-animation: slide-down var(--animation-duration) ease 1; - animation: slide-down 0.1s ease 1; - background-color: var(--cirrus-bg); - border-radius: 0.2rem; - box-shadow: 0 0.1rem 0.4rem rgba(69, 77, 93, 0.3); - margin: 0; + right: 0; + bottom: 0; opacity: 0; - min-width: 15rem; - padding: 0.25rem 0.5rem; - -webkit-transform: translateY(0.5rem); - transform: translateY(0.5rem); - z-index: 10; + /* Initially hidden */ + padding: 1rem; + display: none; + /* Doesn't block the elements underneath */ + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + /* Vertical centering */ pointer-events: none; - /* Remove pointer events to prevent mouse hover to show menu even though it is not visible */ - overflow: hidden; - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } - -.list-dropdown.dropdown-right .menu { - left: auto; - right: 0; } + /* Prevent any pointer events made to modal while hidden */ } -/* Allow for shown and :focus selectors for JS and native CSS transitions */ -.list-dropdown.shown .menu, -.list-dropdown .btn-dropdown:focus + .menu, -.list-dropdown .menu:hover { - display: block; +/* When the modal dialog is visible */ +.modal:target, .modal.shown { + display: -webkit-box; + display: -ms-flexbox; + display: flex; opacity: 1; - top: 100%; - z-index: 100; + z-index: 999; pointer-events: auto; - /* Restore pointer events */ - height: auto; - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } - -.list-dropdown .btn-group .btn-dropdown:nth-last-child(2) { - border-bottom-right-radius: 3px; - border-top-right-radius: 3px; } + /* Re-enable pointer events */ } -/* TREE */ -/* Tree Navigation Menu */ -.tree { - margin: 0; } +/* The div in the modal dialpog used to create the translucent background */ +.modal:target .modal-overlay, +.modal.shown .modal-overlay { + position: absolute; + /* Absolute inside of the modal container */ + top: 0; + left: 0; + right: 0; + bottom: 0; + display: block; + background-color: rgba(54, 59, 68, 0.5); } -/* The title of the tree menu */ -.tree .tree-item .tree-item-header { +/* The modal dialog body with the text itself */ +.modal-content { + background-color: var(--cirrus-bg); + padding: 0; display: block; - padding: 0.25rem 0.5rem; - cursor: pointer; - font-size: 0.95rem; - font-weight: 600; - /* Keep styling consistent with menu-items */ } + border-radius: 3px; + box-shadow: 0 0.4rem 1rem rgba(54, 59, 68, 0.3); + z-index: 1; + color: var(--cirrus-fg); + max-width: 40rem; + /* 640px */ } -/* The dropdown glyph of the tree menu */ -.tree .tree-item .tree-item-header .icon { - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } +/* Different size modals */ +.modal.modal-small .modal-content { + max-width: 20rem; + /* 320px */ } -/* Expand the tree-item-body (has menu-items) */ -.tree .tree-item input:checked ~ .tree-item-body { - max-height: 100vh; } +.modal.modal-large .modal-content { + max-width: 60rem; + /* 960px */ } -/* Rotate the dropdown glyph */ -.tree .tree-item input:checked ~ .tree-item-header .icon { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); } +.modal-content h1, +.modal-content h2, +.modal-content h3, +.modal-content h4, +.modal-content h5, +.modal-content h6 { + color: var(--cirrus-fg); } -/* Container for the menu-items of the tree menu */ -.tree .tree-item .tree-item-body { - max-height: 0; - /* Hidden at first */ - margin-left: 1.5rem; - overflow: hidden; - -webkit-transition: all var(--animation-duration); - transition: all var(--animation-duration); } +.modal:target .modal-container, +.modal.shown .modal-container { + -webkit-animation: slide-down var(--animation-duration) ease 1; + animation: slide-down var(--animation-duration) ease 1; + z-index: 1; } -/* TODO: Docs */ -/* The body that will encompass the tree-nav and tree-nav-content */ -.tree-nav-body { +/* Restrict width */ +.modal-content.small { + max-width: 32rem; } + +.modal-content .modal-header { + padding: 1rem 3rem; } + +.modal-content .modal-header .modal-title { + font-weight: bolder; + font-size: 1.4rem; } + +.modal-content .modal-body { + padding: 1rem 3rem; + overflow-y: auto; + max-height: 50vh; + /* Max height is 50% of viewport height which prevents dialog from extetnding past screen */ + position: relative; } + +.modal-content .modal-footer { + padding: 1rem 3rem; + text-align: right; } + +/* MODAL ANIMATIONS */ +.modal.modal-animated--dropdown { + -webkit-animation: slide-down var(--animation-duration) ease 1; + animation: slide-down var(--animation-duration) ease 1; } + +/* Visible state */ +.modal.modal-animated--zoom-in, .modal.modal-animated--zoom-out { display: -webkit-box; + /* Force dialog to appear in the center */ display: -ms-flexbox; display: flex; - height: 100vh; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; } + opacity: 0; + transition: 300ms all ease; } -/* A fixed menu on the side with a tree component */ -.tree-nav { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -ms-flex-negative: 1; - flex-shrink: 1; - padding: 2rem 1rem 2rem 2rem; - min-width: 15rem; - height: 100vh; - overflow: auto; } +.modal:target.modal-animated--zoom-in, .modal:target.modal-animated--zoom-out { + opacity: 1; + transition: 300ms all ease; } -/* The container for the tree component to prevent it from overflowing */ -.tree-nav .tree-nav-container { - overflow-y: auto; - top: 4rem; - bottom: 1rem; } +.modal.modal-animated--zoom-in .modal-content { + transform: scale(0.8); + transition: 300ms all ease; } -/* Darkened area that will close the navbar when clicked for mobile only */ -.tree-nav + .tree-nav-close { - display: none; - /* Not needed in desktop */ } +.modal:target.modal-animated--zoom-in .modal-content, .modal:target.modal-animated--zoom-out .modal-content { + transform: scale(1); + transition: 300ms all ease; } -/* Push document body further right to account for sidebar space */ -.tree-nav + .tree-nav-content { - max-width: 100%; - padding: 2rem; - -ms-flex: 1 0 auto; - -webkit-box-flex: 1; - flex: 1 0 auto; - overflow: auto; - margin: 0; } +.modal.modal-animated--zoom-out .modal-content { + transform: scale(1.2); + transition: 300ms all ease; } -/* The body where all other HTML components are entered if a tree-nav is used */ -.tree-nav-content { - width: 100%; - overflow: auto; - margin: 0; - padding: 2rem; } +/* Keyframes for slide down animation */ +@-webkit-keyframes slide-down { + 0% { + opacity: 0; + -webkit-transform: translateY(-3rem); + transform: translateY(-3rem); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } -/* Decrease font-weight in tree-nav menu-items */ -.tree-item-body .menu .menu-item a { - font-weight: 400; } +@keyframes slide-down { + 0% { + opacity: 0; + -webkit-transform: translateY(-3rem); + transform: translateY(-3rem); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); } } -@media screen and (max-width: 768px) { - /* Hide the menu to the side by default */ - .tree-nav { - height: 100%; - left: 0; - overflow-y: auto; - padding: 3rem 1.5rem; - position: fixed; - top: 0; - -webkit-transform: translateX(-100%); - transform: translateX(-100%); - transition: transform var(--animation-duration) ease, -webkit-transform var(--animation-duration) ease; - -webkit-transition: -webkit-transform var(--animation-duration) ease; - transition: transform var(--animation-duration) ease; - transition: -webkit-transform var(--animation-duration) ease; - z-index: 400; } - /* Open the menu from the side */ - /* Use a link and add the id of this element as the url */ - .tree-nav:target { - -webkit-transform: translateX(0); - transform: translateX(0); - transition: transform var(--animation-duration) ease, -webkit-transform var(--animation-duration) ease; - -webkit-transition: -webkit-transform var(--animation-duration) ease; - transition: -webkit-transform var(--animation-duration) ease; - transition: transform var(--animation-duration) ease; } - /* Create the area to click to close the menu */ - .tree-nav .tree-nav-close { - background-color: rgba(0, 0, 0, 0.15); - display: none; - height: 100%; - left: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 300; } - /* Show the darkened area when the tree nav menu is clicked */ - .tree-nav:target + .tree-nav-close { - display: block; - background-color: rgba(0, 0, 0, 0.15); - height: 100%; - left: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 300; } - /* Reset max-width in mobile */ - .tree-nav + .tree-nav-body { - max-width: inherit; } - /* Header bar for mobile websites with the tree-nav */ - .tree-nav-header { - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: rgba(248, 249, 250, 0.8); - height: 3.5rem; - padding: 0.75rem 0.5rem; - text-align: center; - z-index: 300; } - /* For dropdown menu used in header (different from header dropdown) */ - .nav-item.has-sub .list-dropdown { - width: 100%; } - .nav-item.has-sub .list-dropdown .btn-group { - width: 100%; } - .nav-item.has-sub .list-dropdown .btn-group .btn-dropdown { - flex-grow: 0; } - /* Show the dropdown menu in mobile hamburger menu relative with the header menu */ - .list-dropdown .btn-dropdown:focus + .menu { - position: relative; - width: 100%; } } +@media only screen and (max-width: 768px) { + .modal-content { + max-width: 90%; } } -/* MEDIA CSS */ -/* Handles images, videos, figures, etc */ -/* Altered, originally just video in 0.4.6 */ -video.video-fullscreen { - position: absolute; - height: 100vh; - object-fit: cover; - width: 100%; - z-index: -1; } +/* A collection of modifiers that extend control styling */ +.btn.btn--pilled, +[class^="btn-"].btn--pilled, +[class*=" btn-"].btn--pilled { + border-radius: 6.25rem; + padding-left: 1.25rem; + padding-right: 1.25rem; } -/* Add to parent container to make media child fill container */ -.media-stretch { - display: block; - padding: 0; +/* btn--circle: contents must be placed inside child element */ +.btn.btn--circle, +[class^="btn-"].btn--circle, +[class*=" btn-"].btn--circle { + border-radius: 100%; + min-width: 60px; overflow: hidden; - width: 100%; - position: relative; } + padding: 0; + text-align: center; } + .btn.btn--circle:before, + [class^="btn-"].btn--circle:before, + [class*=" btn-"].btn--circle:before { + content: ''; + display: inline-block; + vertical-align: middle; + padding-top: 100%; } + .btn.btn--circle *, + [class^="btn-"].btn--circle *, + [class*=" btn-"].btn--circle * { + max-width: 90%; + vertical-align: middle; + white-space: pre-wrap; } -/* Add pseudoclass to allow media to have height (default height is 0) */ -.media-stretch::before { - content: ""; - display: block; - padding-bottom: 56.25%; - /* 9 / 16 for 16:9 ratio */ } +/* Input (primary text-based) controls apply to inputs */ +.input-control--pilled { + border-radius: 6.25rem !important; } -/* Force media embed to fill parent container */ -.media-stretch iframe, -.media-stretch embed, -.media-stretch object { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - /* Make sure media does exceed or go under boundary limit */ - height: 100%; } +/* Theme modifiers */ +/* GLOBAL THEME SELECTORS */ +.bg-primary { + background-color: var(--cirrus-primary) !important; } -/* For HTML5 video objects */ -.media-stretch video { - height: auto; - max-width: 100%; - width: 100%; } +.text-primary { + color: var(--cirrus-primary) !important; } -/* Alternate media ratios */ -.media-stretch.rat-4-3::before { - padding-bottom: 75%; } +.bg-success { + background-color: var(--cirrus-success) !important; } -.media-stretch.rat-1-1::before { - padding-bottom: 100%; } +.text-success { + color: var(--cirrus-success) !important; } -/* FIGURES */ -/* For flexible media display */ -.fig { - margin: 0 0 0.5rem 0; - /* Small margin at the bottom */ } +.bg-warning { + background-color: var(--cirrus-warning) !important; } -.fig .fig-caption { - margin-top: 1rem; } +.text-warning { + color: var(--cirrus-warning) !important; } -/* IMAGES */ -.img-stretch { - max-width: 100%; - height: auto; - display: block; } +.bg-danger { + background-color: var(--cirrus-danger) !important; } -.img-cover { - object-fit: cover; } +.text-danger { + color: var(--cirrus-danger) !important; } -.img-contain { - object-fit: contain; } +.bg-light { + background-color: var(--cirrus-light) !important; } -/* Margin */ -.m-0 { - margin: 0 !important; } +.text-light { + color: var(--cirrus-light) !important; } -.m-1 { - margin: calc(var(--space-size) * 1) !important; } +.bg-dark { + background-color: var(--cirrus-dark) !important; } -.m-2 { - margin: calc(var(--space-size) * 2) !important; } +.text-dark { + color: var(--cirrus-dark) !important; } -.m-3 { - margin: calc(var(--space-size) * 3) !important; } +.bg-link { + background-color: var(--cirrus-link) !important; } + +.text-link { + color: var(--cirrus-link) !important; } + +.bg-link-dark { + background-color: var(--cirrus-link-dark) !important; } + +.text-link-dark { + color: var(--cirrus-link-dark) !important; } + +.bg-info { + background-color: var(--cirrus-info) !important; } -.m-4 { - margin: calc(var(--space-size) * 4) !important; } +.text-info { + color: var(--cirrus-info) !important; } -.m-5 { - margin: calc(var(--space-size) * 5) !important; } +/* PAGINATION */ +/* Parent contianer for page navigation */ +.pagination { + display: flex; + display: -ms-flexbox; } -.mt-0, .my-0 { - margin-top: 0 !important; } +/* Use for the major pagination meant to display about 2 items */ +.pagination-item { + -webkit-flex: 1 0 50%; + /* Flex to fill */ + -ms-flex: 1 0 50%; + flex: 1 0 50%; } -.mt-1, .my-1 { - margin-top: calc(var(--space-size) * 1) !important; } +.pagination a { + color: #5d6c7b; } -.mt-2, .my-2 { - margin-top: calc(var(--space-size) * 2) !important; } +.pagination .pagination-item a[disabled] { + cursor: pointer; + opacity: 0.5; + pointer-events: none; + user-select: none; } -.mt-3, .my-3 { - margin-top: calc(var(--space-size) * 3) !important; } +.pagination .pagination-item { + margin: 1rem 0.1rem; + transition: all 0.3s; } -.mt-4, .my-4 { - margin-top: calc(var(--space-size) * 4) !important; } +.pagination .pagination-item.pagination-next { + text-align: right; } -.mt-5, .my-5 { - margin-top: calc(var(--space-size) * 5) !important; } +.pagination .pagination-item.pagination-prev { + text-align: left; } -.mb-0, .my-0 { - margin-bottom: 0 !important; } +/* Pagination Item */ +.pagination-item-subtitle { + opacity: 0.7; + margin: 0; + /* Needed to override style after formatting paragraph update */ } -.mb-1, .my-1 { - margin-bottom: calc(var(--space-size) * 1) !important; } +/* Color the selected pagination item with accent color */ +.pagination .pagination-item.short.selected { + background-color: var(--cirrus-primary); + color: #fff; } -.mb-2, .my-2 { - margin-bottom: calc(var(--space-size) * 2) !important; } +.pagination .pagination-item.short.selected a { + color: #fff; } -.mb-3, .my-3 { - margin-bottom: calc(var(--space-size) * 3) !important; } +.pagination .pagination-item.short a { + display: inline-block; + line-height: 1.25; + padding: 0.5rem 0.75rem; } -.mb-4, .my-4 { - margin-bottom: calc(var(--space-size) * 4) !important; } +/* Used to display many pagination items */ +.pagination .pagination-item.short { + border-radius: 0.1rem; + margin: 0.2rem 0; + -webkit-flex: 0; + /* Flex to fill */ + -ms-flex: 0; + flex: 0; } -.mb-5, .my-5 { - margin-bottom: calc(var(--space-size) * 5) !important; } +.pagination .pagination-item.short:first-child a { + border-top-left-radius: .25rem; + border-bottom-left-radius: .25rem; } -.ml-0, .mx-0 { - margin-left: 0 !important; } +.pagination .pagination-item.short:last-child a { + border-top-right-radius: .25rem; + border-bottom-right-radius: .25rem; } -.ml-1, .mx-1 { - margin-left: calc(var(--space-size) * 1) !important; } +.pagination .pagination-item.short:not(.selected):hover { + background-color: rgba(0, 0, 0, 0.1); } -.ml-2, .mx-2 { - margin-left: calc(var(--space-size) * 2) !important; } +.pagnation .pagination-item.ellipses { + color: #b5b5b5; + pointer-events: none; } -.ml-3, .mx-3 { - margin-left: calc(var(--space-size) * 3) !important; } +/* Bordered pagination */ +.pagination.pagination-bordered .pagination-item.short a { + border: 1px solid #dedede; + border-radius: 0; + margin-left: -1px; } -.ml-4, .mx-4 { - margin-left: calc(var(--space-size) * 4) !important; } +/* Not good but CSS does not have heading selectors. Need to move to SASS */ +.pagination .pagination-item:hover p, +.pagination .pagination-item:hover h1, +.pagination .pagination-item:hover h2, +.pagination .pagination-item:hover h3, +.pagination .pagination-item:hover h4, +.pagination .pagination-item:hover h5, +.pagination .pagination-item:hover h6, +.pagination .pagination-item:not(.selected):hover *:not([disabled]):not(.ellipses) { + transition: all 0.3s; + color: var(--cirrus-primary); } -.ml-5, .mx-5 { - margin-left: calc(var(--space-size) * 5) !important; } +/* PLACEHOLDER */ +/* Designed to be embedded in any parent container as placeholder when content is absent. */ +.placeholder { + background-color: rgba(231, 234, 241, 0.5); + border-radius: 3px; + text-align: center; + padding: 3rem 2rem; + color: #6c7892; + /* Lighter than original text color */ + display: block; } -.mr-0, .mx-0 { - margin-right: 0 !important; } +/* Not sure if needed */ +.placeholder-icon { + text-align: center; } -.mr-1, .mx-1 { - margin-right: calc(var(--space-size) * 1) !important; } +.placeholder .placeholder-title, +.placeholder .placeholder-subtitle { + margin: 1rem auto; } -.mr-2, .mx-2 { - margin-right: calc(var(--space-size) * 2) !important; } +.placeholder .placeholder-subtitle { + opacity: 0.7; + margin: 0; } -.mr-3, .mx-3 { - margin-right: calc(var(--space-size) * 3) !important; } +/* Place buttons here for the placeholder */ +.placeholder .placeholder-commands { + margin-top: 1rem; } -.mr-4, .mx-4 { - margin-right: calc(var(--space-size) * 4) !important; } +/* TABS AND TAB CONTAINER */ +.tab-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + overflow: hidden; + overflow-x: auto; + /* Allow scrollbar to be visible if the width of the tabs exceeds container */ + user-select: none; + white-space: nowrap; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + font-size: var(--font-size-s); } -.mr-5, .mx-5 { - margin-right: calc(var(--space-size) * 5) !important; } +/* Tabs are embedded inside an unordered list */ +.tab-container ul { + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + /* Move tab items to left side */ + margin: 0.5rem; + /* Override the behavior for standard ul and add equal padding */ + border-bottom: 1px solid #eee; + /* Bottom border of tabs */ + flex-grow: 1; + list-style: none; + padding-inline-start: 0; } -/* Padding */ -.p-0 { - padding: 0 !important; } +.tab-container li { + display: block; + /* Keep the tabs from extending too far */ + cursor: pointer; + margin: 0; + text-align: center; } -.p-1 { - padding: calc(var(--space-size) * 1) !important; } +.tab-container li a { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom: 1px solid #eee; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 0.5rem 1rem; + transition: all .3s; + color: var(--cirrus-fg); + border-bottom-color: rgba(197, 197, 197, 0.63); + border-width: 2px; + margin-bottom: -1px; + /* Get rid of any remaining border lines */ + background-color: var(--cirrus-bg); } -.p-2 { - padding: calc(var(--space-size) * 2) !important; } +.tab-container li:hover a { + border-bottom-color: rgba(240, 61, 77, 0.6); + transition: all .3s; } -.p-3 { - padding: calc(var(--space-size) * 3) !important; } +.tab-container li.selected a { + border-bottom-color: var(--cirrus-primary); + color: var(--cirrus-primary); + border-width: 2px; + transition: all .3s; } -.p-4 { - padding: calc(var(--space-size) * 4) !important; } +/* Shift tabs to the center */ +.tab-container.tabs-center ul { + justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; } -.p-5 { - padding: calc(var(--space-size) * 5) !important; } +/* Shift tabs to the right */ +.tab-container.tabs-right ul { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } -.pt-0, .py-0 { - padding-top: 0 !important; } +/* Depth tab styles */ +.tab-container.tabs-depth ul { + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); + border-bottom: 0; } -.pt-1, .py-1 { - padding-top: calc(var(--space-size) * 1) !important; } +/* Classic tab styles */ +.tab-container.tabs-classic ul { + border-bottom-color: #dbdbdb; + border-bottom-style: solid; + border-bottom-width: 1px; + border-radius: 3px 3px 0 0; + /* Only round the top left and right corners */ + transition: all .3s; } -.pt-2, .py-2 { - padding-top: calc(var(--space-size) * 2) !important; } +.tab-container.tabs-classic li:not(.selected) a:hover { + background-color: #f0f0f0; + transition: all .3s; } -.pt-3, .py-3 { - padding-top: calc(var(--space-size) * 3) !important; } +.tab-container.tabs-classic li a { + border: 1px solid transparent; + border-bottom-color: #dbdbdb; + border-radius: 3px 3px 0 0; + transition: all .3s; } -.pt-4, .py-4 { - padding-top: calc(var(--space-size) * 4) !important; } +.tab-container.tabs-classic li.selected a { + color: var(--cirrus-primary); + border-color: #dbdbdb; + border-bottom-color: transparent !important; } -.pt-5, .py-5 { - padding-top: calc(var(--space-size) * 5) !important; } +/* Tabs that fill the width */ +.tab-container.tabs-fill li { + -webkit-box-flex: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-negative: 0; + flex-shrink: 0; + /* Disable shrinking to original width */ + flex-basis: 0; } -.pb-0, .py-0 { - padding-bottom: 0 !important; } +/* Override the -webkit-box display that sizes tab items based on text */ +.tab-container.tabs-fill ul { + display: flex; + /* Equal size tabs */ } -.pb-1, .py-1 { - padding-bottom: calc(var(--space-size) * 1) !important; } +/* Different tab sizes */ +.tab-container.tabs-xsmall { + font-size: 0.6rem; } -.pb-2, .py-2 { - padding-bottom: calc(var(--space-size) * 2) !important; } +.tab-container.tabs-small { + font-size: 0.75rem; } -.pb-3, .py-3 { - padding-bottom: calc(var(--space-size) * 3) !important; } +.tab-container.tabs-large { + font-size: 1.25rem; } -.pb-4, .py-4 { - padding-bottom: calc(var(--space-size) * 4) !important; } +.tab-container.tabs-xlarge { + font-size: 1.5rem; } -.pb-5, .py-5 { - padding-bottom: calc(var(--space-size) * 5) !important; } +/* Font Awesome Integration */ +.tab-container .icon:first-child { + /* Left icon */ + margin-right: .75rem; } -.pl-0, .px-0 { - padding-left: 0 !important; } +.tab-container .icon:last-child { + /* Right icon */ + margin-left: .75rem; } -.pl-1, .px-1 { - padding-left: calc(var(--space-size) * 1) !important; } +/* TAGS */ +.tag { + align-items: center; + background-color: var(--cirrus-light); + border-radius: 0.25rem; + color: var(--cirrus-fg); + display: inline-flex; + font-size: 75%; + line-height: 1.5; + min-height: 1.5rem; + padding: 0 0.5rem; + white-space: nowrap; } -.pl-2, .px-2 { - padding-left: calc(var(--space-size) * 2) !important; } +.tag.tag--large { + font-size: 120%; } -.pl-3, .px-3 { - padding-left: calc(var(--space-size) * 3) !important; } +.tag.tag--xlarge { + font-size: 150%; } -.pl-4, .px-4 { - padding-left: calc(var(--space-size) * 4) !important; } +.tag.tag--rounded { + border-radius: 290486px; } -.pl-5, .px-5 { - padding-left: calc(var(--space-size) * 5) !important; } +/* Delete button for tag */ +.tag.tag--delete { + background-color: rgba(10, 10, 10, 0.2); + border-radius: 290486px; + cursor: pointer; + pointer-events: auto; + display: inline-block; + height: 20px; + max-height: 20px; + max-width: 20px; + min-height: 20px; + min-width: 20px; + position: relative; } -.pr-0, .px-0 { - padding-right: 0 !important; } +.tag--delete:hover { + background-color: rgba(10, 10, 10, 0.3); } -.pr-1, .px-1 { - padding-right: calc(var(--space-size) * 1) !important; } +/* Draw the delete button */ +.tag.tag--delete::before, +.tag.tag--delete::after { + background-color: var(--cirrus-light); + content: ""; + display: block; + left: 50%; + position: absolute; + top: 50%; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + -webkit-transform-origin: center center; + transform-origin: center center; } -.pr-2, .px-2 { - padding-right: calc(var(--space-size) * 2) !important; } +.tag.tag--delete::before { + height: 1px; + width: 50%; } -.pr-3, .px-3 { - padding-right: calc(var(--space-size) * 3) !important; } +.tag.tag--delete::after { + height: 50%; + width: 1px; } -.pr-4, .px-4 { - padding-right: calc(var(--space-size) * 4) !important; } +/* TAG THEMES */ +.tag.tag--delete { + margin-left: 0.25rem; + margin-right: -0.375rem; } -.pr-5, .px-5 { - padding-right: calc(var(--space-size) * 5) !important; } +.tag.tag--white { + background-color: #fff; + color: var(--cirrus-dark); } -/* TABLE */ -.table { - margin-bottom: 1.5rem; - width: 100%; - border-collapse: collapse; - /* Allows us to set 0 margin in table cells */ - border-spacing: 0; - text-align: center; - /* Text center by default */ } +.tag.tag--black { + background-color: #000; + color: #fff; } -.table td, -.table th { - border: 1px solid rgba(219, 219, 219, 0.5); - border-width: 0 0 1px; - padding: 0.75rem; - vertical-align: top; - text-align: inherit; - margin: 0; } +.tag.tag--dark { + background-color: var(--cirrus-dark); + color: #fff; } -.table tr { - transition: all 0.3s; } +.tag.tag--primary { + background-color: var(--cirrus-primary); + color: #fff; } -.table caption { - padding-top: 0.75rem; - padding-bottom: 0.75rem; - color: #6c757d; - text-align: left; - caption-side: bottom; } +.tag.tag--link { + background-color: var(--cirrus-link); + color: #fff; } -.table tr:hover, -.table.striped tbody tr:nth-child(even):hover { - background-color: rgba(216, 216, 216, 0.15); } +.tag.tag--info { + background-color: var(--cirrus-info); + color: #fff; } -/* Thicker border for table header */ -.table thead th, -.table thead { - border-bottom: 2px solid rgba(219, 219, 219, 0.49); } +.tag.tag--success { + background-color: var(--cirrus-success); + color: #fff; } -.table.bordered thead th, -.table.bordered thead { - border-bottom: 1px solid rgba(219, 219, 219, 0.5); } +.tag.tag--warning { + background-color: var(--cirrus-warning); + color: var(--cirrus-fg); } -.table thead th, -.table tfoot th { - padding: 1rem; } +.tag.tag--danger { + background-color: var(--cirrus-danger); + color: #fff; } -.table tfoot th { - border-top: 2px solid rgba(219, 219, 219, 0.5); - border-bottom: none; } +/* TAG CONTAINER */ +.tag-container { + display: flex; + flex-wrap: wrap; } -/* CUSTOM STYLES */ -/* All borders */ -.table.bordered td, -.table.bordered th { - border: 1px solid rgba(219, 219, 219, 0.5); } +/* Add margin in between tag containers */ +.tag-container:not(:last-child) { + margin-bottom: 1rem; } -.table.bordered thead td, -.table.borderd thead { - border-width: 1px; } +.tag-container .tag { + margin-bottom: 0.5rem; } -/* Striped table */ -.table.striped tbody tr:nth-child(even) { - background-color: rgba(0, 0, 0, 0.05); } +.tag-container .tag:not(:last-child) { + margin-right: 0.5rem; } -/* Decrease padding */ -.table.small td, -.table.small th { - padding: 0.25rem 0.75rem; } +/* Used for grouping tags together */ +.tag-container.group-tags .tag { + margin-right: 0; } -/* Fixed title table */ -.table.fixed-head thead { - position: relative; - display: block; } +.tag-container.group-tags .tag:first-child { + border-radius: .25rem 0 0 .25rem; } -.table.fixed-head tbody { - height: 200px; - /* Set the height you want */ - display: block; - /* Needed */ - overflow: auto; - /* Shows scrollbars */ } +.tag-container.group-tags .tag:not(:first-child):not(:last-child) { + border-radius: 0; } -.table.fixed-head tr { - display: table; - width: 100%; - /* Forces row to span container */ } +.tag-container.group-tags .tag:last-child { + border-radius: 0 .25rem .25rem 0; } -.table tr.selected { - /* Style a selected row */ - background-color: var(--cirrus-primary); - color: #fff; } +/* Tag close button */ +.tag.tag__close-btn { + padding: 0; + position: relative; + width: 1.5rem; } -/* Borderless Table (for inner cells) */ -.table.borderless thead th, -.table.borderless th, -.table.borderless td { - border: none; } +.tag.tag__close-btn::before, +.tag.tag__close-btn::after { + background-color: var(--cirrus-fg); + content: ""; + display: block; + left: 50%; + top: 50%; + position: absolute; + -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); + transform: translateX(-50%) translateY(-50%) rotate(45deg); + -webkit-transform-origin: center center; + transform-origin: center center; } -/* Color scheme for Cirrus */ -:root { - /* v1 Colors */ - --cirrus-fg: #374054; - --cirrus-bg: #fff; - --cirrus-primary: #f03d4d; - --cirrus-primary-rgb: 240,61,77; - --cirrus-primary-light: #ffdadd; - --cirrus-accent-hover: #d62939; - --cirrus-accent-border: #c21b2b; - --cirrus-light: #f6f9fc; - --cirrus-light-gray: #f8f9fa; - --cirrus-gray: #d5d7dc; - --cirrus-dark-gray: #909090; - --cirrus-dark: #363636; - --cirrus-link: #5e5cc7; - --cirrus-link-dark: #4643e2; - --cirrus-info: #2972fa; - --cirrus-success: #0dd157; - --cirrus-success-rgb: 13,209,87; - --cirrus-warning: #fab633; - --cirrus-danger: #fb4143; - --cirrus-light-hover: #d9e6f2; - --cirrus-dark-hover: #424242; - --cirrus-info-hover: #2368e9; - --cirrus-link-hover: #f8f7ff; - --cirrus-success-hover: #00b147; - --cirrus-warning-hover: #f9a90e; - --cirrus-danger-hover: #f1393c; - --cirrus-select-bg: rgba(0, 161, 255, 0.2); - --cirrus-code-bg: var(--cirrus-primary-light); - --cirrus-code-fg: #dc4753; - --cirrus-form-group-bg: var(--cirrus-light-gray); - --cirrus-form-group-fg: var(--cirrus-dark-gray); - --toast-primary-bg: rgba(49, 59, 80, 0.9); - --animation-duration: .2s; - --focus-opacity: 0.4; - --space-size: 0.5rem; - --font-size-xs: .7rem; - --font-size-s: .85rem; - --font-size-m: 1rem; - --font-size-l: 1.35rem; - --font-size-xl: 1.75rem; - /* v2 Colors */ - --pink-100: #F8E7F1; - --pink-200: #F3D2E3; - --pink-300: #ECB7D3; - --pink-400: #EB8CBC; - --pink-500: #DD5A9C; - --pink-600: #D12E81; - --pink-700: #A21F61; - --pink-800: #831B50; - --pink-900: #741648; - --red-100: #FDE7E9; - --red-200: #FBD4D5; - --red-300: #F7B1B1; - --red-400: #F19393; - --red-500: #E85C61; - --red-600: #DB3839; - --red-700: #B31E1D; - --red-800: #9B1313; - --red-900: #890E10; - --orange-100: #FDEED1; - --orange-200: #FBDBAA; - --orange-300: #F6B65C; - --orange-400: #F19736; - --orange-500: #E4771C; - --orange-600: #C45307; - --orange-700: #9B3908; - --orange-800: #842B09; - --orange-900: #890E10; - --yellow-100: #FFFDE4; - --yellow-200: #F9E978; - --yellow-300: #F6DA52; - --yellow-400: #E8BB24; - --yellow-500: #D29507; - --yellow-600: #9D6B0C; - --yellow-700: #7C4D09; - --yellow-800: #6C3E0C; - --yellow-900: #5D320F; - --green-100: #E1F7EB; - --green-200: #C2ECD6; - --green-300: #98D9B7; - --green-400: #64C192; - --green-500: #44A675; - --green-600: #33855D; - --green-700: #27684A; - --green-800: #275440; - --green-900: #234535; - --teal-100: #DDF2F5; - --teal-200: #B5E6EB; - --teal-300: #7FCED5; - --teal-400: #59BAC3; - --teal-500: #1E9CA8; - --teal-600: #0F7D8A; - --teal-700: #0A616A; - --teal-800: #105157; - --teal-900: #114448; - --blue-100: #E1EFFC; - --blue-200: #BFDCFC; - --blue-300: #8BC2F8; - --blue-400: #5FA7F3; - --blue-500: #3C91EC; - --blue-600: #1B74D9; - --blue-700: #1E5898; - --blue-800: #1E4C80; - --blue-900: #1C3C63; - --indigo-100: #E2EFFF; - --indigo-200: #C4DBFD; - --indigo-300: #A1BEFA; - --indigo-400: #89A3F7; - --indigo-500: #6C83E9; - --indigo-600: #5966D9; - --indigo-700: #4C4F9E; - --indigo-800: #42417B; - --indigo-900: #3A3462; - --purple-100: #F0E9FB; - --purple-200: #E2D4F8; - --purple-300: #CBB2F6; - --purple-400: #B89AF4; - --purple-500: #9C73ED; - --purple-600: #8256E1; - --purple-700: #6340B6; - --purple-800: #50388E; - --purple-900: #413170; - --gray-000: #f8f9fa; - --gray-100: #f1f3f5; - --gray-200: #e9ecef; - --gray-300: #dee2e6; - --gray-400: #ced4da; - --gray-500: #adb5bd; - --gray-600: #868e96; - --gray-700: #495057; - --gray-800: #343a40; - --gray-900: #212529; } +.tag.tag__close-btn::before { + height: 1px; + width: 50%; } -/* UTILS */ -/* Utility classes to help solve some very annoying issues */ -.u-hidden { - display: none !important; } +.tag.tag__close-btn::after { + height: 50%; + width: 1px; } -.u-block { - display: block !important; } +/* MISC */ +a.tag:hover { + text-decoration: underline; } -.u-inline { - display: inline !important; } +.tag-container.tag-container--grouped .tag:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } -.u-inline-block { - display: inline-block !important; } +.tag-container.tag-container--grouped .tag:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } -.u-flex { - display: flex !important; } +/* Tag positioning */ +.tag-container.tag-container--centered { + justify-content: center; } -.u-flex.u-flex-column { - flex-direction: column !important; } +.tag-container.tag-container--centered .tag { + margin: 0 0.25rem; } -.u-flex.u-flex-row { - flex-direction: row !important; } +.tag-container.tag-container--right { + justify-content: flex-end; } -.u-inline-flex { - display: -ms-inline-flexbox !important; - display: inline-flex !important; } +.tag-container.tag-container--right .tag:not(:first-child) { + margin-left: 0.5rem; } -.u-table { - display: table !important; } +.tag-container.tag-container--right .tag:not(:last-child) { + margin-right: 0; } -.u-table-row { - display: table-row !important; } +/* TILES */ +.tile { + display: flex; + display: -ms-flexbox; + align-content: space-between; + /* Ensure space between child elements of card tile */ + -webkit-align-content: space-between; + /* align-items: flex-start; Push elements to the top of container instead of center/bottom (removed since unneeded */ + -ms-flex-line-pack: justify; + /* Evenly distribute lines */ } -.u-position-static { - position: static !important; } +.tile p { + font-size: 0.95rem; } -.u-position-relative { - position: static !important; } +.tile .tile__icon, +.tile .tile__buttons { + flex: 0 0 auto; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; } -.u-position-absolute { - position: absolute !important; } +/* Override the default behavior where buttons display as blocks */ +.tile .tile__buttons button, +.tile .tile__buttons .btn, +.tile .tile__buttons [type="submit"] { + display: inline-block; + margin: 0.1rem; + /* Reduce space used by buttons, default .5rem */ } -.u-position-fixed { - position: fixed !important; } +.tile .tile__container { + flex: 1 1 auto; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; } -.u-position-sticky { - position: sticky !important; } +/* Add spacing between the elements in between */ +.tile .tile__container:not(:first-child) { + padding-left: 1rem; } -/* - When using floats, clearfix allows the container to automatically resize so that - other elements are not blocked by children. -*/ -.u-clearfix:after { - clear: both !important; - content: " "; - display: table !important; } +.tile .tile__container:not(:last-child) { + padding-right: 1rem; } -/* This is mainly to keep elements from overlapping when using floats */ -.u-clear-left { - clear: left !important; } +.tile .tile__title { + line-height: 2rem; + font-weight: bolder; + margin: 0.1rem auto; } -.u-clear-right { - clear: right !important; } +.tile .tile__subtitle { + line-height: 1.25rem; + opacity: 0.7; + margin: 0.1rem auto; } -.u-clear-both { - clear: both !important; } +/* Force elements to align at the center vertical height */ +.tile.tile--center { + align-items: center; + -webkit-align-items: center; + -ms-flex-align: center; } -.u-pull-left { - float: left !important; } +.tile.tile--center .tile__container { + /* Shrink the text to fit inside the tile */ + overflow: hidden; } -.u-pull-right { - float: right !important; } +/* Keep the text from overflowing */ +.tile.tile--center .tile__title, +.tile.tile--center .tile__subtitle.no-wrap { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + margin-bottom: 0; } -.u-text-center { - text-align: center !important; } +.toast { + display: block; + width: 100%; + padding: .75rem 1.25rem; + background-color: var(--toast-primary-bg); + border: 1px solid var(--toast-primary-bg); + border-radius: 2px; + color: #fff; + position: relative; + margin: 0.5rem; } -.u-text-justify { - text-align: justify !important; } +/* .toast h1, .toast h2, .toast h3, .toast h4, .toast h5, .toast h6 { + margin: 0; + margin-top: 1rem; +} (Deprecated 0.5.5) */ +.toast .toast__title { + margin: 0; + margin-top: 1rem; } -.u-text-ellipsis { - text-overflow: ellipsis; } +.toast p { + margin: 0; } -.u-text-break { - hyphens: auto; - word-break: break-word; - word-wrap: break-word; } +.toast.toast--translucent { + opacity: .5; } -/* Center element - best used for hero bodies or text */ -.u-center { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - margin: 0 auto; - flex-wrap: wrap; } +.toast.toast--translucent:hover { + opacity: 1; } -.u-center-alt, -.u-center-alt:hover, -.u-center-alt:active { - /* If flexbox method fails, this works for elements with unknown dimensions */ +.toast .btn-close { position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); } + right: 1rem; + top: 1rem; } -.u-vertical-center { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; - align-items: center; - vertical-align: middle; } +/* TOAST TYPES */ +.toast.toast--primary { + background-color: var(--toast-primary-bg); + border-color: var(--toast-primary-bg); } -.u-horizontal-center { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } +.toast.toast--success { + background-color: var(--cirrus-success); + border-color: var(--cirrus-success); } -.u-overlay { - bottom: 0; - left: 0; - right: 0; - top: 0; - position: absolute; } +.toast.toast--warning { + background-color: var(--cirrus-warning); + border-color: var(--cirrus-warning); } -.u-hide-overflow { - overflow: hidden !important; - overflow-x: hidden; - overflow-y: hidden; } +.toast.toast--error { + background-color: var(--cirrus-danger); + border-color: var(--cirrus-danger); } -.u-text-center { - text-align: center !important; } +.toast.toast--info { + background-color: var(--cirrus-info); + border-color: var(--cirrus-info); } -.u-text-left { - text-align: left !important; } +.toast.toast--link { + background-color: var(--cirrus-link); + border-color: var(--cirrus-link); } -.u-text-right { - text-align: right !important; } +.toast.toast--primary { + background-color: var(--cirrus-primary); + border-color: var(--cirrus-primary); } -.u-hide { - display: none !important; } +/* Add the rest later */ +.toast a { + color: var(--cirrus-light); + transition: all .3s; } -.u-disabled { - cursor: not-allowed !important; } +.toast a:hover { + opacity: .8; + transition: all .3s; } -.u-unselectable { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; } +/* TOOLTIPS */ +.tooltip { + position: relative; + /* let's the pseudoelement that we are displaying relative to the button. */ + overflow: visible; + /* Allows the pseudoelement to be shown */ + white-space: nowrap; + /* Keeps the button text from wrapping and getting too large */ } -/* Deprecated 0.5.6 */ -/* .u-box { - background-color: white; - border-radius: 3px; - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); +/* This is the psuedoelement that creates the tooltip */ +.tooltip::after, +.tooltip.tooltip--top::after { + -webkit-appearance: none; + -moz-appearance: none; + position: absolute; + color: #fff; + font-size: 0.6rem; + background-color: rgba(69, 77, 93, 0.9); + content: attr(data-tooltip); + /* Retrieves the data specified in this element property and displays it as text */ display: block; - padding: 1rem; -} + line-height: 1rem; + text-transform: none; + overflow: hidden; + padding: 0.4rem 0.8rem; + opacity: 0; + /* Hide the element */ + text-overflow: ellipsis; + max-width: 15rem; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); + transition: all var(--animation-duration) ease; + z-index: 200; + pointer-events: none; + bottom: 100%; + /* Pushes the tooltip above the button */ + left: 50%; + /* Horizontally center it */ + border-radius: 0.2rem; } -.u-box:not(:last-child) { - margin-bottom: 1rem; -} */ -/* Deprecated 0.5.6 */ -/* .u-fill-width { - width: 100% !important; -} */ -/* Deprecated 0.5.6 */ -/* -.u-no-margin { - margin: 0 !important; -} +/* Handles the on hover event of the button and then modifies the associated tooltip accordingly. */ +.tooltip:focus::after, +.tooltip:hover::after { + opacity: 1; + -webkit-transform: translate(-50%, -0.5rem); + transform: translate(-50%, -0.5rem); + transition: all var(--animation-duration) ease; } -.u-no-padding { - padding: 0 !important; -} -*/ -.u-margin-auto { - margin: 0 auto !important; } +/* Tooltip top left */ +.tooltip.tooltip--top-left::after { + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); } -/* Round the corners of the element */ -.u-round { - border-radius: 0.1rem; } +.tooltip.tooltip--top-left:hover::after, +.tooltip.tooltip--top-left:focus::after { + left: 0; + -webkit-transform: translate(-100%, -0.5rem); + transform: translate(-100%, -0.5rem); } -/* Turns element into a circle */ -.u-circle { - border-radius: 50%; } +/* Tooltip top right */ +.tooltip.tooltip--top-right::after { + left: auto; + -webkit-transform: translate(15%, 0); + transform: translate(15%, 0); } -/* Remove outline or drop shadow when element is focused */ -.u-no-shadow { - box-shadow: none; } +.tooltip.tooltip--top-right:hover::after, +.tooltip.tooltip--top-right:focus::after { + right: 0; + -webkit-transform: translate(100%, -0.5rem); + transform: translate(100%, -0.5rem); } -/* Responsiveness and Element Hiding */ -/* Do the actual balancing only on larger screens */ -@media screen and (min-width: 769px) { - .level, - .level-left, - .level-right { - display: -webkit-box; - display: -ms-flexbox; - display: flex; } } +/* Tooltip bottom */ +.tooltip.tooltip--bottom::after { + top: 100%; + transform: translate(-50%, -1rem); + /* Moves tooltip to the center horizontally and shifts tooltip down */ + -webkit-transform: translate(-50%, -1rem); + -moz-transform: translate(-50%, -1rem); + -ms-transform: translate(-50%, -1rem); + bottom: auto; } -/* Hide elements based on screen size */ -@media screen and (max-width: 768px) { - .u-hide-mobile { - display: none !important; } } +.tooltip.tooltip--bottom:hover::after, +.tooltip.tooltip--bottom:focus::after { + transform: translate(-50%, 0.5rem); + -webkit-transform: translate(-50%, 0.5rem); + -moz-transform: translate(-50%, 0.5rem); + -ms-transform: translate(-50%, 0.5rem); + bottom: auto; } -@media screen and (min-width: 768px) { - /* Hide on devices that are tablets or larger */ - .u-hide-tablet { - display: none !important; } } +/* Tooltip bottom left */ +.tooltip.tooltip--bottom-left::after { + top: 100%; + -webkit-transform: translate(-65%, -1rem); + transform: translate(-65%, -1rem); + bottom: auto; } -@media screen and (min-width: 769px) and (max-width: 1023px) { - .u-hide-tablet-only { - display: none !important; } } +.tooltip.tooltip--bottom-left:hover::after, +.tooltip.tooltip--bottom-left:focus::after { + left: 0; + -webkit-transform: translate(-100%, 0.5rem); + transform: translate(-100%, 0.5rem); } -@media screen and (min-width: 1024px) { - /* Hide element on laptops, desktops, etc */ - .u-hide-desktop { - display: none !important; } } +/* Tooltip bottom right */ +.tooltip.tooltip--bottom-right::after { + left: auto; + top: 100%; + -webkit-transform: translate(0%, -1rem); + transform: translate(0%, -1rem); + bottom: auto; } + +.tooltip.tooltip--bottom-right:hover::after, +.tooltip.tooltip--bottom-right:focus::after { + right: 0; + -webkit-transform: translate(100%, 0.5rem); + transform: translate(100%, 0.5rem); } + +/* Tooltip right */ +.tooltip.tooltip--right::after { + left: 100%; + bottom: 50%; + transform: translate(-1rem, 50%); + -webkit-transform: translate(-1rem, 50%); + -moz-transform: translate(-1rem, 50%); + -ms-transform: translate(-1rem, 50%); } + +.tooltip.tooltip--right:hover::after, +.tooltip.tooltip--right:focus::after { + transform: translate(0.5rem, 50%); + -webkit-transform: translate(0.5rem, 50%); + -moz-transform: translate(0.5rem, 50%); + -ms-transform: translate(0.5rem, 50%); } + +/* Tooltip Left */ +.tooltip.tooltip--left::after { + right: 100%; + bottom: 50%; + left: auto; + /* Needed to work */ + transform: translate(1rem, 50%); + -webkit-transform: translate(1rem, 50%); + -moz-transform: translate(1rem, 50%); + -ms-transform: translate(1rem, 50%); } + +.tooltip.tooltip--left:hover::after, +.tooltip.tooltip--left:focus::after { + transform: translate(-0.5rem, 50%); + -webkit-transform: translate(-0.5rem, 50%); + -moz-transform: translate(-0.5rem, 50%); + -ms-transform: translate(-0.5rem, 50%); } diff --git a/src/holiday.css b/src/holiday.css index d35060c..11fd2ff 100644 --- a/src/holiday.css +++ b/src/holiday.css @@ -283,6 +283,274 @@ Add the correct display in Chrome and Safari. summary { display: list-item; } +html { + height: 100%; + line-height: 1.4; +} + +h1, +h2, +h3 { + line-height: 1.15; +} + +body { + min-height: 100%; + overflow-wrap: break-word; +} + +main { + flex-grow: 1; +} + +img { + max-width: 100%; + max-height: 100vh; +} + +table { + display: block; + overflow-x: auto; +} + +pre { + padding: 1rem; + overflow-x: auto; + line-height: 1.15; +} + +code { + padding: 0.25rem; +} + +pre code { + padding: unset; +} + +kbd { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 1.5rem; + max-width: calc(100% - 0.1rem * 2); + min-height: 1.5rem; + padding: 0 0.25rem; + margin: 0 0.1rem; + overflow: hidden; +} + +kbd kbd { + min-width: unset; + min-height: unset; + padding: 0; + margin: 0; +} + +kbd kbd:not(:first-child) { + padding-left: 0.25rem; +} + +kbd kbd:not(:last-child) { + padding-right: 0.25rem; +} + +iframe { + width: 100%; + border: none; +} + +dialog { + max-height: calc(100% - 1rem); + overflow-y: auto; + border: none; +} + +audio, +video, +embed, +object { + width: 100%; +} + +[type="range"], +meter, +progress { + display: block; + width: 100%; + height: 2.25rem; +} + +[type="color"] { + height: 2.25rem; + vertical-align: top; +} + +td, +th, +details, +button, +[type="button"], +[type="reset"], +[type="submit"] { + padding: 0.5rem; +} + +input:not([type]), +[type="email"], +[type="hidden"], +[type="number"], +[type="password"], +[type="search"], +[type="tel"], +[type="text"], +[type="url"] { + display: block; + width: 100%; + height: 2.25rem; + padding: 0.5rem; +} + +[type="file"] { + display: block; + width: 100%; + height: 2.25rem; + + /* Works in Chrome (but poorly), doesn't work in Firefox */ + padding-top: 0.35rem; +} + +[type="date"], +[type="datetime-local"], +[type="time"], +[type="month"], +[type="week"] { + display: block; + width: 100%; + height: 2.25rem; + + /* 0.4rem is a hack for mobile Chrome */ + padding: 0.4rem 0.5rem; +} + +output { + display: block; + width: 100%; +} + +textarea { + display: block; + width: 100%; + min-height: 8em; + padding: 0.5rem; +} + +select { + display: block; + width: 100%; + min-height: 2.25rem; + + /* "padding: 0.5rem;" messes up the height of selects */ + padding: 0.45rem 0.5rem; +} + +summary { + padding: 0.5rem; + margin: -0.5rem; +} + +[type="image"] { + vertical-align: bottom; +} + +fieldset { + padding: 0.75rem; +} + +label > [type="color"] { + margin-left: 0.25rem; +} + +label { + display: flex; + flex-wrap: wrap; + align-items: center; + width: 100%; + margin-top: 1rem; +} + +legend + label { + margin-top: 0; +} + +[type="checkbox"] + label, +[type="radio"] + label { + display: inline-flex; + width: unset; + vertical-align: text-bottom; +} + +/* stylelint-disable-next-line plugin/stylelint-group-selectors */ +blockquote > p:first-child, +fieldset > label:first-child { + margin-top: 0; +} + +label > [type="checkbox"], +label > [type="radio"] { + min-height: 1rem; + margin-right: 0.25rem; +} + +blockquote { + padding: 1rem 2rem; + margin-right: 0; + margin-left: 0; +} + +blockquote > p:last-child { + margin-bottom: 0; +} + +footer { + margin-top: 1rem; +} + +figure > figcaption { + text-align: center; +} + +body > footer { + padding-bottom: 1rem; +} + +figure { + margin-right: 0; + margin-left: 0; + text-align: center; +} + +/* stylelint-disable-next-line selector-max-universal */ +figure > * { + text-align: initial; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1rem; +} + +li { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + +picture { + display: block; + text-align: center; +} abbr { cursor: help; } @@ -304,13 +572,12 @@ label > [type="radio"]:enabled { cursor: default; } -/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable-next-line selector-max-specificity */ :disabled, -[type="checkbox"][id]:disabled + label[for], -[type="radio"][id]:disabled + label[for] { +[type="checkbox"][id]:disabled + [for], +[type="radio"][id]:disabled + [for] { cursor: not-allowed; } -/* stylelint-enable */ :root { --max-body-width: 48rem; } @@ -327,13 +594,13 @@ h3 { } body { - margin: 0 auto; - width: calc(100% - 1rem); - max-width: var(--max-body-width); - overflow-wrap: break-word; display: flex; flex-direction: column; + width: calc(100% - 1rem); + max-width: var(--max-body-width); min-height: 100%; + margin: 0 auto; + overflow-wrap: break-word; } main { @@ -351,6 +618,13 @@ table { } pre { + padding: 1rem; + + /* Prism hack */ + /* stylelint-disable declaration-no-important */ + margin-top: 1rem !important; + margin-bottom: 1rem !important; + /* stylelint-enable */ overflow-x: auto; line-height: 1.15; } @@ -360,28 +634,26 @@ code { } pre code { - display: inline-block; - min-width: 100%; - padding: 1rem; + padding: unset; } kbd { - padding: 0 0.25rem; - min-width: 1.5rem; - min-height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; + min-width: 1.5rem; + max-width: calc(100% - 0.1rem * 2); + min-height: 1.5rem; + padding: 0 0.25rem; margin: 0 0.1rem; - max-width: 100%; overflow: hidden; } kbd kbd { - margin: 0; - padding: 0; min-width: unset; min-height: unset; + padding: 0; + margin: 0; } kbd kbd:not(:first-child) { @@ -393,14 +665,14 @@ kbd kbd:not(:last-child) { } iframe { - border: none; width: 100%; + border: none; } dialog { - border: none; - overflow-y: auto; max-height: calc(100% - 1rem); + overflow-y: auto; + border: none; } audio, @@ -410,70 +682,96 @@ object { width: 100%; } +[type="range"], meter, progress { - height: 2.25rem; display: block; width: 100%; -} - -input:not([type="button"]):not([type="checkbox"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]) { height: 2.25rem; } -input:not([type="button"]):not([type="checkbox"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="color"]), -output { - display: block; - width: 100%; +[type="color"] { + height: 2.25rem; + vertical-align: top; } +td, +th, +details, button, [type="button"], [type="reset"], -[type="submit"], -input:not([type="checkbox"]):not([type="image"]):not([type="radio"]):not([type="color"]):not([type="file"]):not([type="date"]):not([type="datetime-local"]):not([type="time"]):not([type="month"]):not([type="week"]):not([type="range"]) { +[type="submit"] { + padding: 0.5rem; +} + +input:not([type]), +[type="email"], +[type="hidden"], +[type="number"], +[type="password"], +[type="search"], +[type="tel"], +[type="text"], +[type="url"] { + display: block; + width: 100%; + height: 2.25rem; padding: 0.5rem; } +[type="file"] { + display: block; + width: 100%; + height: 2.25rem; + + /* Works in Chrome (but poorly), doesn't work in Firefox */ + padding-top: 0.35rem; +} + [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"] { + display: block; + width: 100%; + height: 2.25rem; + /* 0.4rem is a hack for mobile Chrome */ padding: 0.4rem 0.5rem; } +output { + display: block; + width: 100%; +} + textarea { - min-height: 8em; display: block; width: 100%; + min-height: 8em; padding: 0.5rem; } select { - min-height: 2.25rem; display: block; width: 100%; + min-height: 2.25rem; /* "padding: 0.5rem;" messes up the height of selects */ padding: 0.45rem 0.5rem; } summary { - min-height: 2.25rem; - display: flex; - align-items: center; + padding: 0.5rem; + margin: -0.5rem; } [type="image"] { vertical-align: bottom; } -[type="color"] { - vertical-align: top; -} - fieldset { padding: 0.75rem; } @@ -486,8 +784,8 @@ label { display: flex; flex-wrap: wrap; align-items: center; - margin-top: 1rem; width: 100%; + margin-top: 1rem; } legend + label { @@ -497,33 +795,26 @@ legend + label { [type="checkbox"] + label, [type="radio"] + label { display: inline-flex; - vertical-align: text-bottom; width: unset; + vertical-align: text-bottom; } +/* stylelint-disable-next-line plugin/stylelint-group-selectors */ +blockquote > p:first-child, fieldset > label:first-child { margin-top: 0; } label > [type="checkbox"], label > [type="radio"] { - margin-right: 0.25rem; min-height: 1rem; -} - -[type="file"] { - /* Works in Chrome (but poorly), doesn't work in Firefox */ - padding-top: 0.35rem; + margin-right: 0.25rem; } blockquote { - margin-left: 0; - margin-right: 0; padding: 1rem 2rem; -} - -blockquote > p:first-child { - margin-top: 0; + margin-right: 0; + margin-left: 0; } blockquote > p:last-child { @@ -534,27 +825,19 @@ footer { margin-top: 1rem; } -body > header, -body > footer { +figure > figcaption, +body > header { text-align: center; } body > footer { padding-bottom: 1rem; -} - -td, -th { - padding: 0.5rem; + text-align: center; } figure { - margin-left: 0; margin-right: 0; - text-align: center; -} - -figure > figcaption { + margin-left: 0; text-align: center; } @@ -577,13 +860,21 @@ li { } picture { - width: 100vw; position: relative; left: calc(-50vw + 50%); display: block; + width: 100vw; text-align: center; } +/* highlight.js hack */ +/* stylelint-disable-next-line selector-max-class */ +.hljs { + /* stylelint-disable-next-line declaration-no-important */ + padding: 1rem !important; + margin: -1rem; +} + @media (max-width: 50rem) { table { width: calc(100% + 1rem); @@ -592,25 +883,30 @@ picture { video { width: calc(100% + 1rem); - margin-left: -0.5rem; max-height: 100vh; + margin-left: -0.5rem; } pre { width: calc(100% + 1rem); - margin-left: -0.5rem; - padding-left: 0.5rem; - padding-right: 0.5rem; + + /* !important is Prism hack */ + /* stylelint-disable declaration-no-important */ + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + margin-left: -0.5rem !important; + /* stylelint-enable */ } - pre code { - border-left: 0.5rem solid transparent; - border-right: 0.5rem solid transparent; - box-sizing: content-box; - margin-left: -0.5rem; - margin-right: -0.5rem; - padding-left: 0; - padding-right: 0; + /* highlight.js hack */ + /* stylelint-disable-next-line selector-max-class */ + .hljs { + /* stylelint-disable declaration-no-important */ + padding-right: 0.5rem !important; + padding-left: 0.5rem !important; + /* stylelint-enable */ + + margin: -1rem -0.5rem; } } @media (hover: hover) { @@ -619,15 +915,15 @@ picture { } nav { - border-bottom: var(--border-width) solid var(--border-color); - background-color: var(--background-color); display: flex; + background-color: var(--background-color); + border-bottom: var(--border-width) solid var(--border-color); } body > nav { - width: 100vw; position: relative; left: calc(-50vw + 50%); + width: 100vw; } nav ul { @@ -636,14 +932,14 @@ picture { body > nav > ul { width: calc(var(--max-body-width) + 2rem); - margin: 0.5rem auto; - padding-left: 0.5rem; padding-right: 0.5rem; + padding-left: 0.5rem; + margin: 0.5rem auto; } nav ul li { - display: inline-block; position: relative; + display: inline-block; } nav > ul > li { @@ -660,13 +956,13 @@ picture { position: absolute; left: -9999px; z-index: 1; + min-width: calc(100% + var(--border-width) * 2); + padding: 0.25rem 0.5rem; + margin-top: 0.5rem; + margin-left: calc(-0.5rem - var(--border-width)); background-color: var(--background-color); - border-radius: var(--border-radius); border: var(--border-width) solid var(--border-color); - margin-left: calc(-0.5rem - var(--border-width)); - margin-top: 0.5rem; - padding: 0.25rem 0.5rem; - min-width: calc(100% + var(--border-width) * 2); + border-radius: var(--border-radius); } nav ul li ul li { @@ -699,14 +995,14 @@ picture { @media not all and (hover: hover) { nav { + position: relative; + left: calc(-50vw + 50%); + width: 100vw; padding-top: 2rem; - border-bottom: var(--border-width) solid var(--border-color); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: top; - width: 100vw; - position: relative; - left: calc(-50vw + 50%); + border-bottom: var(--border-width) solid var(--border-color); } /* stylelint-disable-next-line selector-max-universal */ @@ -777,17 +1073,36 @@ picture { --link-hover-color: #fff; --link-active-color: #fff; } + + input::-webkit-calendar-picker-indicator { + filter: invert(); + } +} + +input { + border-radius: var(--border-radius); } body { - background-color: var(--background-color); color: var(--text-color); + background-color: var(--background-color); } -code { +pre { background-color: var(--code-background-color); - border-color: var(--code-background-color); + + /* Prism Dracula theme hack */ + /* stylelint-disable-next-line declaration-no-important */ + border-radius: 0 !important; +} + +code { color: var(--code-text-color); + background-color: var(--code-background-color); +} + +pre code { + background-color: inherit; } a, @@ -812,67 +1127,78 @@ a:active code { } button, -input, +dialog, textarea, -select, -fieldset { +select { + color: var(--text-color); + background-color: var(--background-color); + border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius); } -[type="image"]:hover:enabled { - filter: brightness(95%); +fieldset, +details { + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); } -button, +summary { + margin: calc(-0.5rem - var(--border-width)); + border: var(--border-width) solid transparent; + border-radius: var(--border-radius); +} + +input:not([type]), +[type="date"], +[type="datetime-local"], +[type="email"], +[type="hidden"], +[type="month"], +[type="number"], +[type="password"], +[type="search"], +[type="tel"], +[type="text"], +[type="time"], +[type="url"], +[type="week"], [type="button"], [type="color"] { - border: var(--border-width) solid var(--border-color); - background-color: var(--background-color); color: var(--text-color); + background-color: var(--background-color); + border: var(--border-width) solid var(--border-color); } [type="reset"] { - border: var(--border-width) solid transparent; - background-color: var(--danger-color); color: var(--danger-text-color); + background-color: var(--danger-color); + border: var(--border-width) solid transparent; } [type="submit"], button:not([type]) { - border: var(--border-width) solid transparent; - background-color: var(--success-color); color: var(--success-text-color); + background-color: var(--success-color); + border: var(--border-width) solid transparent; } -button:hover:enabled, -[type="button"]:hover:enabled, -[type="color"]:hover:enabled { - border-color: var(--border-hover-color); -} - -[type="reset"]:hover:enabled { - border-color: transparent; - background-color: var(--danger-hover-color); -} - -[type="submit"]:hover:enabled, -button:not([type]):hover:enabled { - border-color: transparent; - background-color: var(--success-hover-color); -} - -input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([type="range"]), -textarea, -select { - background-color: var(--background-color); - color: var(--text-color); -} - -input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([type="range"]):not(:invalid), -textarea, -select, -fieldset { - border: var(--border-width) solid var(--border-color); +input:not([type]):disabled, +[type="date"]:disabled, +[type="datetime-local"]:disabled, +[type="email"]:disabled, +[type="hidden"]:disabled, +[type="month"]:disabled, +[type="number"]:disabled, +[type="password"]:disabled, +[type="search"]:disabled, +[type="tel"]:disabled, +[type="text"]:disabled, +[type="time"]:disabled, +[type="url"]:disabled, +[type="week"]:disabled, +textarea:disabled, +select:disabled { + background-color: var(--highlighted-background-color); } select:enabled, @@ -884,18 +1210,76 @@ select:enabled, background-color: var(--background-color); } -input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):not([type="range"]):disabled, -textarea:disabled, -select:disabled { - background-color: var(--highlighted-background-color); +button:focus, +[type="button"]:focus, +[type="color"]:focus, +[type="reset"]:focus, +[type="submit"]:focus, +button:not([type]):focus, +input:not([type]):focus, +[type="date"]:focus, +[type="datetime-local"]:focus, +[type="email"]:focus, +[type="hidden"]:focus, +[type="image"]:focus, +[type="month"]:focus, +[type="number"]:focus, +[type="password"]:focus, +[type="search"]:focus, +[type="tel"]:focus, +[type="text"]:focus, +[type="time"]:focus, +[type="url"]:focus, +[type="week"]:focus, +textarea:focus, +select:focus, +summary:focus { + border-color: var(--border-hover-color); + outline: none; + box-shadow: 0 0 0.2rem 0.01rem var(--border-hover-color); +} + +[type="image"]:enabled:hover { + filter: brightness(95%); } -input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="image"]):not([type="radio"]):not([type="reset"]):not([type="submit"]):not([type="file"]):hover:enabled:not(:invalid), -textarea:hover:enabled, -select:hover:enabled { +/* stylelint-disable-next-line selector-max-specificity */ +button:enabled:hover, +[type="button"]:enabled:hover, +[type="color"]:enabled:hover, +input:not([type]):enabled:hover, +[type="date"]:enabled:hover, +[type="datetime-local"]:enabled:hover, +[type="email"]:enabled:hover, +[type="hidden"]:enabled:hover, +[type="month"]:enabled:hover, +[type="number"]:enabled:hover, +[type="password"]:enabled:hover, +[type="range"]:enabled:hover, +[type="search"]:enabled:hover, +[type="tel"]:enabled:hover, +[type="text"]:enabled:hover, +[type="time"]:enabled:hover, +[type="url"]:enabled:hover, +[type="week"]:enabled:hover, +textarea:enabled:hover, +select:enabled:hover, +summary:hover { border-color: var(--border-hover-color); } +[type="reset"]:enabled:hover { + background-color: var(--danger-hover-color); + border-color: transparent; +} + +/* stylelint-disable-next-line selector-max-specificity */ +[type="submit"]:enabled:hover, +button:not([type]):enabled:hover { + background-color: var(--success-hover-color); + border-color: transparent; +} + table { border-collapse: collapse; } @@ -918,6 +1302,7 @@ tfoot > tr:not(:first-child) { border-top: var(--border-width) solid var(--border-color); } +/* stylelint-disable-next-line plugin/stylelint-group-selectors */ thead > tr:nth-child(even), tbody > tr:nth-child(even), tfoot > tr:nth-child(even) { @@ -933,84 +1318,69 @@ kbd { kbd kbd { border: unset; + border-radius: 0; box-shadow: inset 0 -0.2rem 0 0 var(--background-color), inset 0 0.2rem 0 0 var(--background-color); - border-radius: 0; -} - -dialog { - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); - background-color: var(--background-color); - color: var(--text-color); -} - -/* stylelint-disable-next-line selector-no-qualifying-type */ -details[open], -details:not([open]) summary { - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); - padding: 0.5rem; -} - -/* stylelint-disable-next-line selector-no-qualifying-type */ -details[open] { - padding-top: 0; } -/* stylelint-disable-next-line selector-no-qualifying-type */ -details[open] summary { +[open] summary { margin-bottom: 0.5rem; } -details:not([open]) summary:hover { - border-color: var(--border-hover-color); -} - del { background-color: var(--danger-text-background-color); } ins { - background-color: var(--success-text-background-color); text-decoration: none; + background-color: var(--success-text-background-color); } blockquote { - border-left: 0.5rem solid var(--border-color); background-color: var(--highlighted-background-color); + border-left: 0.5rem solid var(--border-color); } body > footer { - border-top: var(--border-width) solid var(--border-color); padding-top: 1rem; + border-top: var(--border-width) solid var(--border-color); } hr { - border-width: var(--border-width) 0 0; - border-style: solid; border-color: var(--border-color); + border-style: solid; + border-width: var(--border-width) 0 0; } -/* stylelint-disable selector-no-qualifying-type */ +/* stylelint-disable-next-line selector-max-specificity */ :disabled, -[type="checkbox"][id]:disabled + label[for], -[type="radio"][id]:disabled + label[for] { +[type="checkbox"][id]:disabled + [for], +[type="radio"][id]:disabled + [for] { opacity: 0.5; } -/* stylelint-enable */ :invalid:not(form) { border-color: var(--danger-color); - outline-color: var(--danger-color); - border-width: var(--border-width); border-style: solid; + border-width: var(--border-width); } :disabled :disabled { opacity: unset; } -:invalid:not(form):hover:enabled { +:invalid:not([type="checkbox"]):focus { + border-color: var(--danger-hover-color); + outline: none; + box-shadow: 0 0 0.2rem 0.05rem var(--danger-hover-color); +} + +/* Firefox hack */ +:invalid:not([type="checkbox"]):not(:focus) { + box-shadow: none; +} + +/* stylelint-disable-next-line selector-max-pseudo-class, selector-max-specificity */ +:invalid:not(form):enabled:hover { border-color: var(--danger-hover-color); } diff --git a/src/marx.css b/src/marx.css index 04275af..32ec273 100644 --- a/src/marx.css +++ b/src/marx.css @@ -1,18 +1,13 @@ -/*! sanitize.css v7.0.3 | CC0 License | github.com/csstools/sanitize.css */ /* Document * ========================================================================== */ /** - * 1. Remove repeating backgrounds in all browsers (opinionated). - * 2. Add border box sizing in all browsers (opinionated). + * Add border box sizing in all browsers (opinionated). */ *, ::before, ::after { - background-repeat: no-repeat; - /* 1 */ -webkit-box-sizing: border-box; - box-sizing: border-box; - /* 2 */ } + box-sizing: border-box; } /** * 1. Add text decoration inheritance in all browsers (opinionated). @@ -27,9 +22,9 @@ /** * 1. Use the default cursor in all browsers (opinionated). - * 2. Use the default user interface font in all browsers (opinionated). - * 3. Correct the line height in all browsers. - * 4. Use a 4-space tab width in all browsers (opinionated). + * 2. Change the line height in all browsers (opinionated). + * 3. Use a 4-space tab width in all browsers (opinionated). + * 4. Remove the grey highlight on links in iOS (opinionated). * 5. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. * 6. Breaks words to prevent overflow in all browsers (opinionated). @@ -37,15 +32,14 @@ html { cursor: default; /* 1 */ - font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + line-height: 1.5; /* 2 */ - line-height: 1.15; - /* 3 */ -moz-tab-size: 4; - /* 4 */ + /* 3 */ -o-tab-size: 4; tab-size: 4; - /* 4 */ + /* 3 */ + -webkit-tap-highlight-color: transparent; -ms-text-size-adjust: 100%; /* 5 */ -webkit-text-size-adjust: 100%; @@ -63,7 +57,7 @@ body { /** * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. + * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { font-size: 2em; @@ -71,9 +65,28 @@ h1 { /* Grouping content * ========================================================================== */ +/** + * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. + */ +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; } + +/** + * Remove the margin on nested lists in Edge 18- and IE. + */ +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } + /** * 1. Add the correct sizing in Firefox. - * 2. Show the overflow in Edge and IE. + * 2. Show the overflow in Edge 18- and IE. */ hr { height: 0; @@ -92,15 +105,15 @@ main { */ nav ol, nav ul { - list-style: none; } + list-style: none; + padding: 0; } /** - * 1. Use the default monospace user interface font - * in all browsers (opinionated). + * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { - font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -114,7 +127,7 @@ a { background-color: transparent; } /** - * Add the correct text decoration in Edge, IE, Opera, and Safari. + * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { text-decoration: underline; @@ -129,14 +142,13 @@ strong { font-weight: bolder; } /** - * 1. Use the default monospace user interface font - * in all browsers (opinionated). + * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { - font-family: Menlo, Consolas, Roboto Mono, Ubuntu Monospace, Noto Mono, Oxygen Mono, Liberation Mono, monospace; + font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } @@ -147,29 +159,10 @@ samp { small { font-size: 80%; } -/* - * Remove the text shadow on text selections in Firefox 61- (opinionated). - * 1. Restore the coloring undone by defining the text shadow - * in all browsers (opinionated). - */ -::-moz-selection { - background-color: #b3d4fc; - /* 1 */ - color: #000; - /* 1 */ - text-shadow: none; } - -::selection { - background-color: #b3d4fc; - /* 1 */ - color: #000; - /* 1 */ - text-shadow: none; } - /* Embedded content * ========================================================================== */ /* - * Change the alignment on media elements in all browers (opinionated). + * Change the alignment on media elements in all browsers (opinionated). */ audio, canvas, @@ -194,7 +187,13 @@ audio:not([controls]) { height: 0; } /** - * Remove the border on images inside links in IE 10-. + * Remove the border on iframes in all browsers (opinionated). + */ +iframe { + border-style: none; } + +/** + * Remove the border on images within links in IE 10-. */ img { border-style: none; } @@ -222,18 +221,7 @@ table { /* Forms * ========================================================================== */ /** - * Inherit styling in all browsers (opinionated). - */ -button, -input, -select, -textarea { - font-family: inherit; - font-size: inherit; - line-height: inherit; } - -/** - * Remove the margin in Safari. + * Remove the margin on controls in Safari. */ button, input, @@ -242,7 +230,7 @@ select { /** * 1. Show the overflow in IE. - * 2. Remove the inheritance of text transform in Edge, Firefox, and IE. + * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { overflow: visible; @@ -251,7 +239,7 @@ button { /* 2 */ } /** - * Correct the inability to style clickable types in iOS and Safari. + * Correct the inability to style buttons in iOS and Safari. */ button, [type="button"], @@ -260,19 +248,23 @@ button, -webkit-appearance: button; } /** - * Correct the padding in Firefox. + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Correct the padding in Firefox. */ fieldset { - padding: 0.35em 0.75em 0.625em; } + border: 1px solid #a0a0a0; + /* 1 */ + padding: 0.35em 0.75em 0.625em; + /* 2 */ } /** - * Show the overflow in Edge and IE. + * Show the overflow in Edge 18- and IE. */ input { overflow: visible; } /** - * 1. Correct the text wrapping in Edge and IE. + * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { @@ -286,8 +278,8 @@ legend { /* 1 */ } /** - * 1. Add the correct display in Edge and IE. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + * 1. Add the correct display in Edge 18- and IE. + * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { display: inline-block; @@ -304,7 +296,7 @@ select { /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. - * 3. Change the resize direction on textareas in all browsers (opinionated). + * 3. Change the resize direction in all browsers (opinionated). */ textarea { margin: 0; @@ -322,7 +314,7 @@ textarea { padding: 0; } /** - * 1. Correct the odd appearance in Chrome and Safari. + * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { @@ -346,13 +338,13 @@ textarea { opacity: 0.54; } /** - * Remove the inner padding in Chrome and Safari on macOS. + * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** - * 1. Correct the inability to style clickable types in iOS and Safari. + * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { @@ -374,16 +366,22 @@ textarea { :-moz-focusring { outline: 1px dotted ButtonText; } +/** + * Remove the additional :invalid styles in Firefox. + */ +:-moz-ui-invalid { + box-shadow: none; } + /* Interactive * ========================================================================== */ /* - * Add the correct display in Edge and IE. + * Add the correct display in Edge 18- and IE. */ details { display: block; } /* - * Add the correct styles in Edge, IE, and Safari. + * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { background-color: white; @@ -478,9 +476,11 @@ textarea, * Change the display on visually hidden accessible elements * in all browsers (opinionated). */ +[aria-hidden="false"][hidden] { + display: initial; } + [aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); - display: inherit; position: absolute; } /*! Marx v3.0.6 - The classless CSS reset (perfect for Communists) | MIT License | https://github.com/mblode/marx */ @@ -681,6 +681,7 @@ textarea { color: rgba(0, 0, 0, 0.8); display: block; width: 100%; + font-size: 1rem; padding: 8px 16px; line-height: 1.5; -webkit-transition: border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out; diff --git a/src/milligram.css b/src/milligram.css index 78b75ac..aa6693f 100644 --- a/src/milligram.css +++ b/src/milligram.css @@ -1,5 +1,5 @@ /*! - * Milligram v1.4.0 + * Milligram v1.4.1 * https://milligram.io * * Copyright (c) 2020 CJ Patoilo diff --git a/src/new.css b/src/new.css index c157369..92d891b 100644 --- a/src/new.css +++ b/src/new.css @@ -1,6 +1,8 @@ :root { --nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace; + + /* Light theme */ --nc-tx-1: #000000; --nc-tx-2: #1A1A1A; --nc-bg-1: #FFFFFF; @@ -10,21 +12,33 @@ --nc-lk-2: #0366D6; --nc-lk-tx: #FFFFFF; --nc-ac-1: #79FFE1; - --nc-ac-tx: #0C4047; + --nc-ac-tx: #0C4047; + + /* Dark theme */ + --nc-d-tx-1: #ffffff; + --nc-d-tx-2: #eeeeee; + --nc-d-bg-1: #000000; + --nc-d-bg-2: #111111; + --nc-d-bg-3: #222222; + --nc-d-lk-1: #3291FF; + --nc-d-lk-2: #0070F3; + --nc-d-lk-tx: #FFFFFF; + --nc-d-ac-1: #7928CA; + --nc-d-ac-tx: #FFFFFF; } @media (prefers-color-scheme: dark) { :root { - --nc-tx-1: #ffffff; - --nc-tx-2: #eeeeee; - --nc-bg-1: #000000; - --nc-bg-2: #111111; - --nc-bg-3: #222222; - --nc-lk-1: #3291FF; - --nc-lk-2: #0070F3; - --nc-lk-tx: #FFFFFF; - --nc-ac-1: #7928CA; - --nc-ac-tx: #FFFFFF; + --nc-tx-1: var(--nc-d-tx-1); + --nc-tx-2: var(--nc-d-tx-2); + --nc-bg-1: var(--nc-d-bg-1); + --nc-bg-2: var(--nc-d-bg-2); + --nc-bg-3: var(--nc-d-bg-3); + --nc-lk-1: var(--nc-d-lk-1); + --nc-lk-2: var(--nc-d-lk-2); + --nc-lk-tx: var(--nc--dlk-tx); + --nc-ac-1: var(--nc-d-ac-1); + --nc-ac-tx: var(--nc--dac-tx); } } diff --git a/src/sakura.css b/src/sakura.css index 9a1f7eb..c15806c 100644 --- a/src/sakura.css +++ b/src/sakura.css @@ -149,7 +149,7 @@ textarea { .button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] { cursor: default; opacity: .5; } - .button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover { + .button:focus:enabled, .button:hover:enabled, button:focus:enabled, button:hover:enabled, input[type="submit"]:focus:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:focus:enabled, input[type="reset"]:hover:enabled, input[type="button"]:focus:enabled, input[type="button"]:hover:enabled { background-color: #982c61; border-color: #982c61; color: #f9f9f9;