/* reset */
html { height:100%; }
html,body { background:#fff; color:#222; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,button,textarea,p,th,td,header,nav,menu,menuitem,section,main,footer { margin:0; padding:0; }
menu,menuitem,section,main,footer { display:block; }
img { display:block; border:0; }
iframe, textarea { border:none; display:block; }
input, textarea, select { outline:none; }
input, textarea, select, button { font-weight:normal; }
table { border-collapse:collapse; border-spacing:0; font-size:inherit; font-size:100%; margin-bottom:14px; }
th { font-weight:500; }
tr > *:not(:last-child) { padding-right:20px; }
p, ol { margin-bottom:14px; }
ul { list-style:none; }
ol { margin-left:1.6em; }
small { font-size:12px; }
b { font-weight:700; }
strong { font-weight:700; }
svg { display:block; }
label { cursor:default; }
object { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

:root {
--blue:hsl(212,100%,40%);
--blue-hover:hsl(212,100%,50%);
  
--red:hsl(5,93%,49%);
--red-bright:hsl(5,100%,51%);
--red-dark:hsl(5,100%,46%);
  
--bluegrey-bg:hsl(210,8%,96%);
--bluegrey-bg-dark:hsl(210,8%,94%);
--bluegrey-bg-darker:hsl(210,8%,92%);

--input-hover:hsla(210,10%,65%);
--input-focus:hsl(215 75% 65%);

}

a { text-decoration:none; color:var(--blue); }
a:focus, a:hover { color:var(--red-dark) !important; }

body { display:flex; flex-direction:column; align-items:center; font-size:16px; line-height:1.5; text-align:center; position:relative; min-height:100%; min-width:100%; -webkit-font-smoothing:antialiased; }

/*@font-face { font-family:'abb-header'; src:url('/assets/fonts/factor-a/factor-ami-bold-1.2.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:fallback; }*/
@font-face { font-family:'abb-header'; src:url('/assets/fonts/factor-a/factor-a-bold-1.2-intervaltype.com.woff') format('woff'); font-weight:700; font-style:normal; font-display:fallback; }

@font-face { font-family:'abb'; src:url('/assets/fonts/hauss/als-hauss-regular-2.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:fallback; }
@font-face { font-family:'abb'; src:url('/assets/fonts/hauss/als-hauss-medium-2.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:fallback; }
@font-face { font-family:'abb'; src:url('/assets/fonts/hauss/als-hauss-bold-1.1.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:fallback; }

/*
@font-face { font-family:'abb'; src:url('/assets/fonts/graphik/graphik-Regular.woff'); font-weight:400; font-style:normal; font-display:fallback; }
@font-face { font-family:'abb'; src:url('/assets/fonts/graphik/graphik-Semi-Bold.woff'); font-weight:700; font-style:normal; font-display:fallback; }
*/

body, input, button, select, textarea { font-family:'abb',sans-serif; }

h1,h2,h3 { font-family:'abb-header'; font-variation-settings: "wght" 600; }
h1,h2 { font-feature-settings:'liga'; }
h1 { font-size:32px; line-height:1.2; margin-bottom:16px; font-weight:700; }
h2 { font-size:28px; line-height:30px; margin-bottom:14px; font-weight:700; }
h3 { font-size:16px; line-height:22px; margin-bottom:14px; font-weight:700; }
h4 { font-size:16px; line-height:20px; margin-bottom:12px; font-weight:700; }

/* label */
label input, label textarea { margin-top:9px; }

/* initial colors */
input, textarea, select, button { color:inherit; }

/* input, textarea */
input::-ms-clear { display:none; }

input[type=text], input[type=email], input[type=password], textarea { border:1px solid rgba(0,0,0,.15); border-radius:4px; -webkit-appearance:none; font-size:inherit; line-height:20px; -webkit-transition:all .1s; -o-transition:all .1s; transition:all .1s; }
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, textarea:hover { border-color:var(--input-hover) !important; }
*:not(.chosen-search) > input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus { border-color:var(--input-focus) !important; -webkit-box-shadow:inset 0 0 0 1px var(--input-focus); box-shadow:inset 0 0 0 1px var(--input-focus); }

input[type=text], input[type=email], input[type=password] { background:#fff; padding:8px 12px; height:42px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; max-width:100%; }
textarea { background:#fff; padding:10px 11px; box-sizing:border-box; max-width:100%; }

input[type=text][disabled], input[type=text][readonly], input[type=text][disabled=disabled], input[type=email][disabled], input[type=email][disabled=disabled], input[type=password][disabled], input[type=password][disabled=disabled] { background:hsl(210,11%,97%); border-color:hsl(210,11%,97%); color:rgba(0,0,0,.3); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

/* buttons */
input[type=button], input[type=submit], button { -webkit-appearance:none; cursor:pointer; overflow:visible; padding:0 12px; border-radius:5px; border:1px solid rgba(0,0,0,.2); background:#fff;
-webkit-transition:all .1s; -o-transition:all .1s; transition:all .1s; }

input[type=button], input[type=submit] { padding:9px 11px; font-size:16px; line-height:18px; position:relative; /* IE10 fix */ }

button { font-size:inherit; line-height:35px; white-space:nowrap; text-decoration:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
button > span { position:relative; pointer-events:none; }
button::-moz-focus-inner { padding:0; border:0; } /* fix Firefox padding */

input[type=button]:hover, input[type=submit]:hover, button:hover { border-color:rgba(0,0,0,.35) !important; }
input[type=button]:focus, input[type=submit]:focus, button:focus { border-color:rgba(0,0,0,.35) !important; }
button.clean:hover { background:#fff; }
input[type=button]:active, input[type=submit]:active, button:active { border-color:rgba(0,0,0,.2) !important; background:#f9f9f9; }

input[type=submit][disabled], input[type=button][disabled], input[type=submit][disabled=disabled] { background:hsl(210,11%,97%); border-color:hsl(210,11%,97%); color:rgba(150,160,170,.7) !important; cursor:default; }
button[disabled], button[disabled=disabled] { background:hsl(210,11%,97%); border-color:hsl(210,11%,97%) !important; color:hsla(215,5%,60%); cursor:default; }

/* button - vivid */
.vivid button, .vivid button:hover { color:#fff; -webkit-box-shadow:none; box-shadow:none; -webkit-transition:all .1s; -o-transition:all .1s; transition:all .1s; }
.vivid button { background:var(--red); border:none; line-height:42px; border-radius:5px; }
.vivid button:hover { background:var(--red-bright) !important; }
.vivid button:focus { background:var(--red-dark) !important; }
.vivid button:active { transform:scale(.97); }
.vivid button[disabled=disabled], .vivid button[disabled] { background:hsl(2,15%,97%); color:hsl(2,5%,60%) !important; cursor:default; }

.vivid-link { display:flex; }
.vivid-link a { display:block; background:var(--red); color:#fff; line-height:42px; border-radius:5px; padding:0 14px; -webkit-transition:all .1s; -o-transition:all .1s; transition:all .1s; -webkit-user-drag:none; -ms-user-drag:none; user-drag:none; }
.vivid-link a:hover { background:var(--red-bright) !important; color:#fff !important; }
.vivid-link a:focus { background:var(--red-dark) !important; color:#fff !important; }
.vivid-link a:active { transform:scale(.97); }

.vivid.loading button { position:relative; padding-left:28px; }
.vivid.loading button:before { content:''; position:absolute; top:calc(50% - 10px); left:12px; width:18px; height:18px; border:2px solid hsl(220,25%,50%,.3); border-left-color:transparent; border-bottom-color:transparent; border-radius:50%; box-sizing:border-box;
-webkit-animation:loadingbtn .7s linear infinite; animation:loadingbtn .7s linear infinite; }

@-webkit-keyframes loadingbtn { 50% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } }
@keyframes loadingbtn { 50% { transform:rotate(180deg); } 100% { transform:rotate(360deg); } }

/* placeholder */
::-webkit-input-placeholder { color:hsl(0,0%,70%); opacity:1; } /* WebKit, Blink, Edge */
::-moz-placeholder { color:hsl(0,0%,70%); opacity:1; } /* Mozilla Firefox 19+ */
:-moz-placeholder { color:hsl(0,0%,70%); opacity:1; } /* Mozilla Firefox 4 to 18 */
:-ms-input-placeholder { color:hsl(0,0%,70%); opacity:1; } /* Internet Explorer 10-11 */
:placeholder-shown { color:hsl(0,0%,70%); opacity:1; } /* Standard */

/* checkbox */
.checkbox, .radio { padding-left:27px; position:relative; }
.checkbox input[type=checkbox], .radio input[type=radio] { float:left; top:2px; margin:0 0 0 -27px; }

.checkbox label, .radio label { cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }

input[type=checkbox], input[type=radio] { position:relative; width:16px; height:16px; box-sizing:border-box; border:1px solid #bbb; cursor:pointer; display:flex; align-items:center; justify-content:center;
-webkit-appearance:none; -moz-appearance:none; appearance:none;
-webkit-transition:all .1s; -o-transition:all .1s; transition:all .1s; }
input[type=checkbox] { border-radius:2px; }
input[type=radio] { border-radius:50%; }

/* checkbox - tick */
input[type=checkbox]:after, input[type=radio]:after { flex-shrink:0; content:''; opacity:0; }
input[type=checkbox]:after { width:16px; height:16px; background:url('/assets/svg/common/checkbox.svg'); }
input[type=radio]:after { width:8px; height:8px; background:hsl(220,100%,50%); border-radius:50%; }

/* checkbox - checked */
input[type=checkbox]:checked { border-color:hsl(228,100%,60%); background:hsl(220,100%,50%); }
input[type=radio]:checked { border-color:hsl(228,100%,60%); }
input[type=checkbox]:checked:after, input[type=radio]:checked:after { opacity:1; }

/* checkbox - hover, focus, active */
input[type=checkbox]:hover, input[type=radio]:hover { -webkit-transition:none; -o-transition:none; transition:none; }

input[type=checkbox]:not(:checked):hover, input[type=radio]:not(:checked):hover { border-color:#888; }
input[type=checkbox]:not(:checked):focus, input[type=radio]:not(:checked):focus { border-color:#888; }
input[type=checkbox]:not(:checked):active, input[type=radio]:not(:checked):active { border-color:#ccc; }

input[type=checkbox]:checked:hover { border-color:hsl(220,100%,40%); background:hsl(220,100%,40%); }
input[type=radio]:checked:hover { border-color:hsl(220,100%,40%); }
input[type=radio]:checked:hover:after { background:hsl(220,100%,40%); }

input[type=checkbox]:checked:focus { border-color:hsl(220,100%,40%); background:hsl(220,100%,40%); }
input[type=radio]:checked:focus { border-color:hsl(220,100%,40%); }
input[type=radio]:checked:active:focus { background:hsl(220,100%,40%); }

input[type=checkbox]:checked:active { border-color:hsl(220,100%,60%); background:hsl(220,100%,60%); }
input[type=radio]:checked:active { border-color:hsl(220,100%,60%); }
input[type=radio]:checked:active:after { background:hsl(220,100%,60%); }

/* interactive */
.success, .error, .report { margin-bottom:20px; }
.success { background:hsl(140,100%,96%); color:hsl(140,100%,27%); padding:12px 18px; -webkit-animation:success 1s forwards; animation:success 1s forwards; }
.error { background:hsl(0,100%,98%); color:#f00; padding:12px 18px; -webkit-animation:error 2s forwards; animation:error 2s forwards; }
.report { background:hsl(50,100%,95%); color:rgba(0,0,0,.8); padding:12px 18px; -webkit-animation:report 2s forwards; animation:report 2s forwards; }

@-webkit-keyframes success { from { background-color:hsl(130,65%,75%); } to { background-color:hsl(140,100%,96%); } }
@keyframes success { from { background-color:hsl(130,65%,75%); } to { background-color:hsl(140,100%,96%); } }

@-webkit-keyframes error { from { background-color:hsl(0,100%,92%); } to { background-color:hsl(0,100%,98.5%); } }
@keyframes error { from { background-color:hsl(0,100%,92%); } to { background-color:hsl(0,100%,98.5%); } }

@-webkit-keyframes report { from { background-color:hsl(45,100%,80%); } to { background-color:hsl(45,100%,95%); } }
@keyframes report { from { background-color:hsl(45,100%,80%); } to { background-color:hsl(45,100%,95%); } }

/* inline errors */
.form-error { color:hsl(0,100%,45%); margin-top:-2px; }

/* others */
.list { margin-bottom:14px; margin-left:26px; list-style:disc; }

.hidden { display:none }

@media screen and (max-width:760px) {
h1 { font-size:24px; line-height:30px; margin-bottom:14px; }
}
