bifocal/node_modules/gscan/app/public/gscan.css

2961 lines
52 KiB
CSS

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
big,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline
}
body {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: "";
content: none
}
img {
max-width: 100%
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
*,
:after,
:before {
-webkit-box-sizing: inherit;
box-sizing: inherit
}
a {
background-color: transparent;
color: #30cf43;
font-weight: 500;
text-decoration: none;
-webkit-transition: all .5s ease;
transition: all .5s ease
}
a:active,
a:hover {
outline: 0
}
b,
strong {
font-weight: 700
}
dfn,
em,
i {
font-style: italic
}
h1 {
margin: .67em 0;
font-size: 2em
}
small {
font-size: 80%
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}
sup {
top: -.5em
}
sub {
bottom: -.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
color: inherit;
font: inherit
}
button {
overflow: visible;
border: none;
background: transparent
}
button,
select {
text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
cursor: pointer;
-webkit-appearance: button
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0
}
input {
line-height: normal
}
input:focus {
outline: none
}
input[type=checkbox],
input[type=radio] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
height: auto
}
input[type=search] {
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
input[type=file]::file-selector-button {
padding: 8px 12px;
border: none;
color: #15171A;
font-family: 'Inter', sans-serif;
font-size: 1.45rem;
font-weight: 500;
cursor: pointer;
background: #ebeef0;
border-radius: 3px;
}
legend {
padding: 0;
border: 0
}
textarea {
overflow: auto
}
table {
border-spacing: 0;
border-collapse: collapse
}
td,
th {
padding: 0
}
html {
overflow-y: scroll;
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
body,
html {
overflow-x: hidden
}
body {
color: #434952;
font-family: 'Inter', sans-serif;
font-size: 1.45rem;
line-height: 1.6em;
font-weight: 400;
font-style: normal;
letter-spacing: 0;
text-rendering: optimizeLegibility;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga"on
}
::-moz-selection {
text-shadow: none;
background: #cbeafb
}
::selection {
text-shadow: none;
background: #cbeafb
}
hr {
display: block;
margin: 2em 0;
padding: 0;
height: 1px;
border: 0;
border-top: 1px solid #e5eff5
}
mark {
background-color: #fdffb6
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle
}
fieldset {
margin: 0;
padding: 0;
border: 0
}
blockquote,
dl,
ol,
p,
ul {
margin: 0 0 1.5em
}
ol,
ul {
padding-left: 2.5em
}
ol ol,
ol ul,
ul ol,
ul ul {
margin: .5em 0 1em;
padding-left: 2em
}
ul {
list-style: disc
}
ol {
list-style: decimal
}
li {
margin: .5em 0;
line-height: 1.6em
}
dt {
float: left;
margin: 0 20px 0 0;
width: 120px;
color: #343f44;
font-weight: 500;
text-align: right
}
dd {
margin: 0 0 5px;
text-align: left
}
blockquote {
margin: 1.6em 0;
padding: 0 1.6em;
border-left: .5em solid #e5eff5
}
blockquote p {
margin: .8em 0;
font-size: 1.2em;
line-height: 1.55em;
font-weight: 300
}
blockquote small {
display: inline-block;
margin: .8em 0 .8em 1.5em;
font-size: .9em;
opacity: .8
}
blockquote small:before {
content: "\2014 \00A0"
}
blockquote cite {
font-weight: 700
}
blockquote cite a {
font-weight: 400
}
a:hover {
color: #2bba3c;
text-decoration: none;
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.hidden {
display: none !important
}
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
border: 0
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
position: static;
overflow: visible;
clip: auto;
margin: 0;
width: auto;
height: auto
}
.invisible {
visibility: hidden
}
.sr-only {
position: absolute;
overflow: hidden;
clip: rect(0, 0, 0, 0);
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
border: 0
}
.sr-only-focusable:focus {
z-index: 900;
overflow: visible;
clip: auto;
margin: 0;
padding: 0 10px;
width: auto;
height: auto;
color: #333;
line-height: 49px;
font-weight: 700;
text-decoration: none;
background-color: #f5f5f5
}
.right {
float: right
}
.left {
float: left
}
.clearfix:after,
.clearfix:before {
content: " ";
display: table
}
.clearfix:after {
clear: both
}
.gh-table {
box-sizing: border-box;
margin: 1.6em 0;
max-width: 100%;
width: 100%;
background-color: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box
}
.gh-table td,
.gh-table th {
padding: 8px;
border-top: 1px solid #e2edf2;
line-height: 20px;
text-align: left;
vertical-align: top
}
.gh-table th {
color: #7d878a
}
.gh-table caption+thead tr:first-child td,
.gh-table caption+thead tr:first-child th,
.gh-table colgroup+thead tr:first-child td,
.gh-table colgroup+thead tr:first-child th,
.gh-table thead:first-child tr:first-child td,
.gh-table thead:first-child tr:first-child th {
border-top: 0
}
.gh-table tbody+tbody {
border-top: 2px solid #e2edf2
}
.gh-table .gh-table .gh-table {
background-color: #fff
}
.gh-table tbody>tr:nth-child(odd)>td,
.gh-table tbody>tr:nth-child(odd)>th {
background-color: #f4f8fa
}
.gh-table.plain tbody>tr:nth-child(odd)>td,
.gh-table.plain tbody>tr:nth-child(odd)>th {
background: transparent
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
color: #15171A;
line-height: 1.15;
font-weight: 800;
text-rendering: optimizeLegibility
}
h1 {
margin: 0 0 .5em;
font-size: 2.6rem;
font-weight: 600
}
@media (max-width:500px) {
h1 {
font-size: 2.2rem
}
}
h2 {
margin: 1.5em 0 .5em;
font-size: 2rem;
font-weight: 500
}
@media (max-width:500px) {
h2 {
font-size: 1.8rem
}
}
h3 {
margin: 1.5em 0 .5em;
font-size: 1.8rem;
font-weight: 500
}
@media (max-width:500px) {
h3 {
font-size: 1.7rem
}
}
h4 {
margin: 1.5em 0 .5em;
font-size: 1.6rem;
font-weight: 500
}
h5,
h6 {
margin: 1.5em 0 .5em;
font-size: 1.4rem;
font-weight: 500
}
.supermassive-h1 {
margin-top: 40px;
color: #fa3a57;
font-size: 12vw;
font-weight: 100
}
p code {
padding: 2px 5px;
line-height: 1;
font-weight: 400 !important;
background: #EBEEF0;
border-radius: 3px;
box-shadow: rgba(0,0,0,0.03) 0 0 0 1px inset;
}
.gh-anchor {
color: inherit
}
.gh-anchor,
.gh-anchor:hover {
text-decoration: none
}
.gh-header {
position: relative;
z-index: 999;
max-width: 700px;
margin-right: 4rem;
}
.gh-header h1 {
margin: 0;
font-size: 4.8rem;
font-weight: 700;
letter-spacing: -.035em;
}
.gh-header a {
font-size: 1.5rem;
font-weight: 500;
}
.gh-header a:hover {
color: #2bba3c;
text-decoration: none;
}
.gh-mainhead {
margin: 0;
color: inherit;
font-size: 4.4rem;
font-weight: 300;
letter-spacing: -2px
}
.gh-subhead {
margin: 0;
font-size: 4.4rem;
font-weight: 600;
line-height: 1.25em;
color: rgba(0,0,10,.45);
}
.gh-subhead strong {
color: #111;
}
@media (max-width: 940px) {
.gh-subhead {
max-width: 600px;
font-size: 3.2rem;
text-align: center;
}
.gh-header {
margin-right: 0;
}
}
@media (max-width:660px) {
.gh-header {
padding: 10vw
}
.gh-header h1,
.gh-mainhead {
font-size: 6vw
}
}
p+p>.gh-morelink {
position: relative;
top: -10px
}
.gh-morelink svg {
margin-left: 3px;
height: .5em
}
.gh-badge {
display: inline-block;
padding: 2px 3px 3px;
border: 1px solid #95bc37;
color: #fff;
font-size: .8em;
line-height: 1em;
font-weight: 600;
text-align: center;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: -webkit-gradient(linear, left top, left bottom, from(#a4d037), to(#95bc37));
background: linear-gradient(#a4d037, #95bc37);
border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, .15) 0 1px 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .15)
}
.gh-badge-blue {
border: 1px solid #3ea3db;
background: -webkit-gradient(linear, left top, left bottom, from(#58b9ef), to(#3ea9e5));
background: linear-gradient(#58b9ef, #3ea9e5)
}
.gh-badge-black {
border: 1px solid #343130;
background: -webkit-gradient(linear, left top, left bottom, from(#4e4744), to(#34383a));
background: linear-gradient(#4e4744, #34383a)
}
.gh-badge-outline {
border-color: #d8dfe1;
color: #bbc6cb;
font-weight: 400;
background: transparent;
-webkit-box-shadow: none;
box-shadow: none
}
.gh-customerlogos {
display: block;
opacity: .7
}
.gh-customerlogos img {
width: 100%
}
.gh-signupbox-section {
border-top: 1px solid #ecf4f8;
border-bottom: 1px solid #ecf4f8;
background: -webkit-gradient(linear, left top, left bottom, from(#f7fafc), to(#f4f8fb));
background: linear-gradient(#f7fafc, #f4f8fb)
}
.gh-signupbox {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 -20px;
padding: 20px;
font-size: 1.6rem;
line-height: 1.3em;
background: #fff;
border-radius: 6px;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .03);
box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .03)
}
.gh-signup-actions,
.gh-signupbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.gh-signup-actions {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-negative: 0;
flex-shrink: 0;
margin-left: 20px;
max-width: 300px
}
.gh-signup-actions .gh-btn {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
.gh-signup-actions .gh-btn-blue {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-right: 10px
}
.gh-signup-actions .gh-btn-blue span {
width: 100%;
text-align: center
}
@media (max-width:1040px) {
.gh-signupbox {
margin: 0
}
.gh-signupbox-text-extension {
display: none
}
}
@media (max-width:620px) {
.gh-signupbox {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center
}
.gh-signup-actions {
margin: 15px 0 0;
max-width: none;
width: 100%
}
}
.gh-ghostpro {
display: inline-block;
white-space: nowrap
}
.gh-ghostpro svg {
height: 31px
}
.gh-ghostpro .gh-badge {
margin-left: 4px;
padding-top: 4px;
font-size: 1.2rem;
text-transform: uppercase
}
.gh-btn {
display: inline-block;
outline: none;
border: 1px solid #cbdfeb;
color: #738a94;
text-decoration: none !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
fill: #738a94;
border-radius: 3px;
-webkit-transition: none;
transition: none;
-webkit-font-smoothing: subpixel-antialiased
}
.gh-btn span {
display: block;
padding: 0 14px;
height: 36px;
font-size: 1.5rem;
line-height: 36px;
font-weight: 500;
text-align: center;
border-radius: 4px
}
.gh-btn.disabled,
.gh-btn[disabled],
fieldset[disabled] .gh-btn {
-webkit-box-shadow: none;
box-shadow: none;
opacity: .5;
cursor: not-allowed;
pointer-events: none
}
.gh-btn-green {
padding: 1px;
border: 0;
color: #fff;
background: #30cf43;
-webkit-transition: none !important;
transition: none !important
}
.gh-btn-green:active,
.gh-btn-green:focus {
background: #30cf43
}
.gh-btn-green:active span,
.gh-btn-green:focus span {
background: #30cf43;
-webkit-box-shadow: none;
box-shadow: none
}
.gh-btn-subscribe {
padding: 1px;
border: 0;
color: #B5FF18;
font-weight: 600;
background: none;
-webkit-transition: none !important;
transition: none !important
}
.gh-btn-link {
border-color: transparent
}
.gh-btn-link span {
padding-left: 0;
padding-right: 0
}
.gh-spinner {
position: relative;
display: inline-block;
margin-right: 8px;
width: 18px;
height: 18px;
border: 4px solid rgba(0, 0, 0, .2);
border-radius: 100%;
vertical-align: text-bottom;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite
}
.gh-spinner:before {
content: "";
display: block;
margin-top: 9px;
width: 4px;
height: 4px;
background: rgba(0, 0, 0, .6);
border-radius: 100%
}
.gh-btn-green .gh-spinner {
border-color: hsla(0, 0%, 100%, .2)
}
.gh-btn-green .gh-spinner:before {
background: hsla(0, 0%, 100%, .6)
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
svg.retry-animated {
stroke: #fff;
-webkit-animation: rotate-360 .5s ease-in-out forwards;
animation: rotate-360 .5s ease-in-out forwards
}
@-webkit-keyframes rotate-360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes rotate-360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
.gh-btn-lg {
-webkit-transform: scale(1.25);
transform: scale(1.25)
}
.gh-btn-group {
margin-top: 3rem
}
.gh-btn-group .gh-btn:first-of-type {
margin-right: 15px
}
.gh-btn-group .gh-btn span {
font-size: 1.4rem
}
.gh-form-group {
position: relative;
margin-bottom: 1.6em;
max-width: 500px;
width: 100%;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text
}
.gh-form-group p {
margin: 4px 0 0;
color: #b1b1b1;
font-size: 1.3rem
}
.gh-form-group h3 {
margin-bottom: 1.6em;
font-size: 1.5rem
}
.gh-form-group label {
margin-bottom: 4px
}
.gh-form-group-horizontal {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.gh-form-group-horizontal .gh-form-group+.gh-form-group {
margin-left: 15px
}
@media (max-width:550px) {
.gh-form-group {
max-width: 100%
}
}
.gh-input,
.gh-select,
select {
display: block;
padding: 12px;
width: 100%;
border: 1px solid #dbe3e7;
color: #15171A;
font-size: 1.4rem;
line-height: 1em;
font-weight: 500;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
border-radius: 5px;
-webkit-transition: border-color .15s linear;
transition: border-color .15s linear;
-webkit-appearance: none
}
.gh-select,
select {
cursor: pointer
}
::-webkit-input-placeholder {
color: #a7b5bc;
font-weight: 200
}
:-ms-input-placeholder {
color: #a7b5bc;
font-weight: 200
}
textarea {
min-width: 250px;
min-height: 10rem;
max-width: 500px;
width: 100%;
height: auto;
line-height: 1.5;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
resize: vertical
}
textarea.gh-input {
line-height: 1.5em
}
.gh-input.focus,
.gh-input.stripe-focus,
.gh-input:focus,
.gh-select:focus,
select:focus,
textarea:focus {
outline: 0;
border-color: #bfcdd5
}
.gh-input:-webkit-autofill {
-webkit-transition: background-color 100000000s;
transition: background-color 100000000s;
-webkit-text-fill-color: #677d87;
-webkit-animation: void-animation-out 1ms
}
.gh-input.stripe-autofill {
background-color: #fff !important
}
.gh-input-icon {
position: relative
}
.gh-input-icon input {
padding-left: 35px
}
.gh-input-icon select {
padding-right: 35px
}
.gh-input-icon svg {
position: absolute;
top: 50%;
left: 12px;
z-index: 100;
height: 14px;
fill: #a6bac5;
-webkit-transform: translateY(-7px);
transform: translateY(-7px)
}
.gh-select.gh-input-icon svg {
right: 12px;
left: auto
}
.gh-input-icon-lock svg {
-webkit-transform: translateY(-8px);
transform: translateY(-8px)
}
.gh-input-tooltip {
position: relative
}
.gh-input-tooltip input {
padding-right: 35px
}
.gh-input-tooltip button {
position: absolute;
top: 0;
right: 5px;
z-index: 100;
overflow: hidden;
height: 41px
}
.gh-input-tooltip button svg {
height: 14px;
fill: #a6bac5
}
.for-checkbox label,
.for-radio label {
display: block;
padding-bottom: 4px;
cursor: pointer
}
.for-checkbox label p,
.for-radio label p {
overflow: auto;
color: #000;
font-weight: 400
}
.for-checkbox label:hover p,
.for-radio label:hover p {
color: #738a94
}
.for-checkbox input,
.for-radio input {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -9999px
}
.for-checkbox .input-toggle-component,
.for-radio .input-toggle-component {
position: relative;
top: 1px;
display: inline-block;
float: left;
margin-right: 7px;
width: 18px;
height: 18px;
border: 1px solid #dfe1e3;
background: #f7f7f7
}
.for-checkbox label:hover input:not(:checked)+.input-toggle-component,
.for-radio label:hover input:not(:checked)+.input-toggle-component {
border-color: #c5d2d9
}
.for-checkbox .input-toggle-component {
border-radius: 5px;
-webkit-transition: background .15s ease-in-out, border-color .15s ease-in-out;
transition: background .15s ease-in-out, border-color .15s ease-in-out
}
.for-checkbox .input-toggle-component:before {
content: "";
position: absolute;
top: 4px;
left: 3px;
width: 10px;
height: 6px;
border: 2px solid #fff;
border-top: none;
border-right: none;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.for-checkbox input:checked+.input-toggle-component {
border-color: #86ac28;
background: #a4d037
}
.for-checkbox input:checked+.input-toggle-component:before {
opacity: 1
}
.for-radio .input-toggle-component {
border-radius: 100px;
-webkit-transition: background .15s ease-in-out, border-color .15s ease-in-out;
transition: background .15s ease-in-out, border-color .15s ease-in-out
}
.for-radio .input-toggle-component:before {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
background: #fff;
border-radius: 100%;
opacity: 0;
-webkit-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out
}
.for-radio input:checked+.input-toggle-component {
border-color: #86ac28;
background: #a4d037
}
.for-radio input:checked+.input-toggle-component:before {
opacity: 1
}
.gh-select {
position: relative;
display: block;
overflow: hidden;
padding: 0;
max-width: 100%;
width: 100%;
}
.gh-select select {
padding: 8px 10px;
outline: none;
line-height: normal;
text-indent: .01px;
text-overflow: "";
background: #fff;
appearance: none;
-webkit-appearance: none;
-moz-appearance: window
}
.gh-select select::-ms-expand {
display: none
}
.gh-select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000
}
.gh-error .gh-input,
.gh-error select,
.stripe-error {
border-color: #f05230
}
.gh-error .gh-input-icon svg,
.gh-error .gh-input-tooltip button svg {
fill: #f05230
}
.gh-error-message {
display: block;
margin: 10px 0 0;
color: #f05230;
font-size: 1.2rem;
line-height: 1.4em
}
.gh-form-group .gh-response {
position: absolute;
top: -4px;
right: 0;
margin: 0;
color: #a6b0b3;
font-size: 1.1rem;
font-weight: 400;
text-align: right
}
.gh-form-group.gh-error .gh-response,
.gh-main-error.gh-error {
color: #f05230
}
.gh-flow-loading {
margin-top: 5px;
font-size: 1.4rem
}
.gh-success .gh-input,
.gh-success select {
border-color: #a4d037
}
.gh-success .gh-input-icon svg {
fill: #8cb42a
}
.gh-success .gh-input-tooltip button {
display: none
}
.hamburger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: visible;
margin: 0;
padding: 2px 0;
border: 0;
color: inherit;
font: inherit;
text-transform: none;
background-color: transparent;
cursor: pointer;
-webkit-transition: opacity .15s linear, -webkit-filter .15s linear;
transition: opacity .15s linear, -webkit-filter .15s linear;
transition: opacity .15s linear, filter .15s linear;
transition: opacity .15s linear, filter .15s linear, -webkit-filter .15s linear
}
.hamburger-box {
position: relative;
display: inline-block;
width: 20px;
height: 13px
}
.hamburger-inner {
top: 50%;
display: block;
margin-top: -2px
}
.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
position: absolute;
width: 20px;
height: 1px;
background-color: #738a94;
border-radius: 4px;
-webkit-transition: -webkit-transform .15s ease;
transition: -webkit-transform .15s ease;
transition: transform .15s ease;
transition: transform .15s ease, -webkit-transform .15s ease
}
.hamburger-inner:after,
.hamburger-inner:before {
content: "";
display: block
}
.hamburger-inner:before {
top: -6px
}
.hamburger-inner:after {
bottom: -6px
}
.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 0;
-webkit-transition-delay: .15s;
transition-delay: .15s;
-webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19);
transition-timing-function: cubic-bezier(.55, .055, .675, .19);
-webkit-transition-duration: .15s;
transition-duration: .15s
}
.hamburger--collapse .hamburger-inner:after {
top: -12px;
-webkit-transition: top .3s cubic-bezier(.33333, .66667, .66667, 1) .3s, opacity .1s linear;
transition: top .3s cubic-bezier(.33333, .66667, .66667, 1) .3s, opacity .1s linear
}
.hamburger--collapse .hamburger-inner:before {
-webkit-transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, -webkit-transform .15s cubic-bezier(.55, .055, .675, .19);
transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, -webkit-transform .15s cubic-bezier(.55, .055, .675, .19);
transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, transform .15s cubic-bezier(.55, .055, .675, .19);
transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, transform .15s cubic-bezier(.55, .055, .675, .19), -webkit-transform .15s cubic-bezier(.55, .055, .675, .19)
}
.gh-mobilehead-open .hamburger-inner,
.gh-mobilehead-open .hamburger-inner:after,
.gh-mobilehead-open .hamburger-inner:before {
background-color: #343f44
}
.gh-mobilehead-open .hamburger-inner {
-webkit-transition-delay: .32s;
transition-delay: .32s;
-webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
transition-timing-function: cubic-bezier(.215, .61, .355, 1);
-webkit-transform: translate3d(0, -6px, 0) rotate(-45deg);
transform: translate3d(0, -6px, 0) rotate(-45deg)
}
.gh-mobilehead-open .hamburger-inner:after {
top: 0;
opacity: 0;
-webkit-transition: top .3s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s linear .27s;
transition: top .3s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s linear .27s
}
.gh-mobilehead-open .hamburger-inner:before {
top: 0;
-webkit-transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, -webkit-transform .15s cubic-bezier(.215, .61, .355, 1) .42s;
transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, -webkit-transform .15s cubic-bezier(.215, .61, .355, 1) .42s;
transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, transform .15s cubic-bezier(.215, .61, .355, 1) .42s;
transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, transform .15s cubic-bezier(.215, .61, .355, 1) .42s, -webkit-transform .15s cubic-bezier(.215, .61, .355, 1) .42s;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg)
}
.gh-viewport {
position: relative;
min-height: 100%
}
.inner {
margin: 0 auto;
max-width: 1280px;
width: 100%
}
.inner.flex {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto 10vw;
}
@media (max-width: 940px) {
.inner.flex {
flex-direction: column;
}
}
.gh-head {
position: relative;
z-index: 900;
margin-bottom: 40px;
padding: 0 4vw;
width: 100%;
background: none;
}
@media (max-width:600px) {
.gh-head {
padding-right: 15px;
padding-left: 15px
}
}
.gh-navbar {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 80px;
font-size: 1.4rem;
}
.gh-navbar,
.gh-navbar-left,
.gh-navbar-right {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.gh-nav-logo,
.gh-navbar,
.gh-navbar-left,
.gh-navbar-right {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.gh-nav-logo {
max-width: 176px;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
padding: 0 !important;
opacity: 1 !important;
}
.gh-nav-item.gh-nav-logo:hover {
color: inherit
}
.gh-nav-logo .ghost-svg {
width: auto;
height: 25px
}
.gh-nav-logo-suffix {
position: relative;
margin: 0 0 0 12px;
padding: 0 0 0 11px;
font-size: 1.6rem;
font-weight: 500;
text-shadow: none;
-webkit-transition: none;
transition: none
}
.gh-nav-logo-suffix:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 1px;
height: 23px;
background: #CED4D9;
-webkit-transform: rotate(25deg);
transform: rotate(25deg)
}
.gh-nav-logo .gscan-badge {
height: 36px;
margin: 0 0 2px 5px;
}
.gh-navbar-item {
-ms-flex-negative: 0;
flex-shrink: 0;
display: block;
padding: 10px 15px;
color: #15171a;
font-size: 1.5rem;
font-weight: 500;
text-decoration: none;
opacity: .7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.gh-navbar-item-active,
.gh-navbar-item:hover {
color: #15171a;
text-decoration: none;
opacity: 1;
}
.gh-navbar-item:hover .gh-nav-logo-suffix {
color: inherit
}
.gh-navbar-btn {
margin-left: 1.6rem;
color: #fff;
border: 1px solid #15171a;
background: #15171a;
-webkit-transition: all .5s ease;
transition: all .5s ease
}
.gh-navbar-btn span {
min-width: 66px;
text-align: center;
}
.gh-navbar-btn:hover {
border-color: #15171a;
color: #fff;
-webkit-transition: all .2s ease;
transition: all .2s ease
}
.gh-mobilehead {
position: absolute;
top: 0;
left: 0;
z-index: 200;
display: none;
overflow: hidden;
width: 100%;
height: 48px;
border-bottom: 1px solid rgba(0, 0, 0, .05);
background: #fff;
-webkit-box-shadow: #fff 0 -1px 0 0 inset, rgba(0, 0, 0, .02) 0 1px 5px;
box-shadow: inset 0 -1px 0 0 #fff, 0 1px 5px rgba(0, 0, 0, .02);
-webkit-transition: all .5s ease-out, background 1s ease-out;
transition: all .5s ease-out, background 1s ease-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
-webkit-backdrop-filter: blur(3px);
}
.gh-mobilenavbar {
position: relative;
z-index: 10;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 48px;
font-size: 13px
}
.gh-nav-burger {
display: block;
padding: 15px;
color: #738a94;
font-size: 25px;
line-height: 1
}
.gh-nav-burger,
.gh-nav-burger:hover {
text-decoration: none
}
.gh-mobilenavbar .gh-nav-logo {
position: absolute;
top: 5px;
right: 50%;
display: block;
max-width: 144px;
padding: 13px 0;
-webkit-transform: translateX(50%);
transform: translateX(50%)
}
.gh-mobilenavbar .ghost-svg {
width: auto;
height: 23px
}
.gh-mobilemenu {
padding: 30vh 14vw
}
.gh-mobilemenu a {
display: block;
color: #111;
font-size: 3.6rem;
line-height: 4.8rem;
font-weight: 600;
text-align: center;
opacity: 0;
-webkit-transition: opacity .2s cubic-bezier(.4, .01, .165, .99), -webkit-transform .3s cubic-bezier(.4, .01, .165, .99);
transition: opacity .2s cubic-bezier(.4, .01, .165, .99), -webkit-transform .3s cubic-bezier(.4, .01, .165, .99);
transition: transform .3s cubic-bezier(.4, .01, .165, .99), opacity .2s cubic-bezier(.4, .01, .165, .99);
transition: transform .3s cubic-bezier(.4, .01, .165, .99), opacity .2s cubic-bezier(.4, .01, .165, .99), -webkit-transform .3s cubic-bezier(.4, .01, .165, .99);
-webkit-transition-delay: .4s;
transition-delay: .4s;
-webkit-transform: scale(1.1) translateY(-25px);
transform: scale(1.1) translateY(-25px)
}
.gh-mobilemenu a:first-child {
-webkit-transition-delay: .56s;
transition-delay: .56s
}
.gh-mobilemenu a:nth-child(2) {
-webkit-transition-delay: .49s;
transition-delay: .49s
}
.gh-mobilemenu a:nth-child(3) {
-webkit-transition-delay: .42s;
transition-delay: .42s
}
.gh-mobilemenu a:nth-child(4) {
-webkit-transition-delay: .35s;
transition-delay: .35s
}
.gh-mobilemenu a:nth-child(5) {
-webkit-transition-delay: .28s;
transition-delay: .28s
}
.gh-mobilemenu a:nth-child(6) {
-webkit-transition-delay: .21s;
transition-delay: .21s
}
.gh-mobilemenu a:nth-child(7) {
-webkit-transition-delay: .14s;
transition-delay: .14s
}
.gh-mobilemenu a:nth-child(8) {
-webkit-transition-delay: .07s;
transition-delay: .07s
}
.gh-mobilemenu a:hover {
color: #fb2d8d;
text-decoration: none
}
.gh-mobilehead-open {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 9999;
overflow: hidden;
margin: 0;
height: 100vh;
-webkit-transition: all .3s ease-in, background .5s ease-in;
transition: all .3s ease-in, background .5s ease-in;
-webkit-transition-delay: .3s;
transition-delay: .3s
}
.gh-mobilehead-open .gh-mobilemenu a {
opacity: 1;
-webkit-transition: opacity .9s cubic-bezier(.4, .01, .165, .99), -webkit-transform .6s cubic-bezier(.4, .01, .165, .99);
transition: opacity .9s cubic-bezier(.4, .01, .165, .99), -webkit-transform .6s cubic-bezier(.4, .01, .165, .99);
transition: transform .6s cubic-bezier(.4, .01, .165, .99), opacity .9s cubic-bezier(.4, .01, .165, .99);
transition: transform .6s cubic-bezier(.4, .01, .165, .99), opacity .9s cubic-bezier(.4, .01, .165, .99), -webkit-transform .6s cubic-bezier(.4, .01, .165, .99);
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0)
}
.gh-mobilehead-open .gh-mobilemenu a:nth-child(8) {
-webkit-transition-delay: .56s;
transition-delay: .56s
}
.gh-mobilehead-open .gh-mobilemenu a:nth-child(7) {
-webkit-transition-delay: .49s;
transition-delay: .49s
}
.gh-mobilehead-open .gh-mobilemenu a:nth-child(6) {
-webkit-transition-delay: .42s;
transition-delay: .42s
}
.gh-mobilehead-open .gh-mobilemenu a:nth-child(5) {
-webkit-transition-delay: .35s;
transition-delay: .35s
}
.gh-mobilehead-open .gh-mobilemenu a:nth-child(4) {
-webkit-transition-delay: .28s;
transition-delay: .28s
}
.gh-mobilehead-open .gh-mobilemenu a:nth-child(3) {
-webkit-transition-delay: .21s;
transition-delay: .21s
}
.gh-mobilehead-open .gh-mobilemenu a:nth-child(2) {
-webkit-transition-delay: .14s;
transition-delay: .14s
}
.gh-mobilehead-open .gh-mobilemenu a:first-child {
-webkit-transition-delay: .07s;
transition-delay: .07s
}
@media (max-width:660px) {
.gh-viewport {
padding-top: 68px
}
.gh-head {
display: none
}
.gh-mobilehead {
display: block
}
}
.gh-main {
padding: 0 4vw
}
.inner.flex::before {
position: absolute;
display: block;
content: "";
top: -560px;
right: -160px;
width: 960px;
height: 960px;
border-radius: 50%;
z-index: 0;
background: #f5f6f6;
opacity: 0.5;
}
@media (max-width: 940px) {
.inner.flex::before {
display: none;
}
}
.gh-section {
margin: 0 -4vw;
padding: 60px 4vw
}
@media (max-width:600px) {
.gh-section {
padding: 10vw 4vw
}
}
.gh-section-white {
background: #fff
}
.gh-section-dark {
color: #fff;
text-shadow: rgba(0, 0, 0, .1) 0 1px 2px
}
.gh-section-dark h2 {
color: #fff
}
.gh-section-dark h3 {
color: #fff;
font-size: 1.8rem
}
.gh-section-dark p {
opacity: .8
}
.gh-section-dark a {
color: #5fbdf2
}
.gh-section-dark a.gh-anchor {
color: #fff
}
.gh-section h3 .gh-badge {
margin-left: 4px;
padding: 2px;
font-size: .7em;
vertical-align: top
}
.gh-section-head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 1em;
color: #fff;
text-align: center
}
.gh-section-head h2 {
margin: 1em 0 .3em;
color: #fff;
font-size: 3.6rem;
font-weight: 700;
}
@media (max-width:660px) {
.gh-section-head h2 {
font-size: 4.8vw
}
}
.gh-section-head p {
max-width: 800px;
margin: .8rem 0 0;
color: rgba(255,255,255,.6);
font-size: 2rem;
line-height: 1.4em;
font-weight: 400;
}
@media (max-width:660px) {
.gh-section-head p {
font-size: 1.6rem
}
}
.gh-foot {
padding: 3vw 4vw 5vw;
font-size: 1.3rem;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.gh-foot a {
color: rgba(255,255,255,.8);
text-decoration: none
}
.gh-foot a:hover {
color: #fff;
text-decoration: none
}
.gh-foot-content {
padding-top: 20px;
border-top: 1px solid hsla(0,0%,100%,.11);
}
.gh-foot-content,
.gh-foot-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
}
.gh-foot-nav {
padding-left: 60px;
width: 100%
}
.gh-foot-col {
padding: 0 10px
}
.gh-foot-col h4 {
margin: 5px 0 10px;
font-size: 1.4rem
}
.gh-foot-col ul {
margin: 0;
padding: 0;
list-style: none
}
.gh-foot-col ul a {
display: block;
padding: 3px 0;
min-width: 90px
}
.gh-foot-col li {
margin: 0
}
.gh-foot-col .gh-badge {
position: relative;
top: -1px
}
@media (max-width:965px) {
.gh-foot-col:last-of-type {
display: none
}
}
@media (max-width:800px) {
.gh-foot {
text-align: center
}
.gh-foot-nav {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
padding: 0;
max-width: none
}
.gh-foot-col {
padding: 0 10px
}
.gh-foot-col:last-of-type {
display: block
}
}
@media (max-width:550px) {
.gh-foot-nav {
display: none
}
}
.gh-foot-floating .gh-foot {
padding-top: 2vw
}
.gh-foot-floating .gh-foot-content,
.gh-foot-floating .gh-foot-mast {
border-top: none
}
.gh-foot-min {
padding: 0 4vw 4vw;
}
.gh-foot-min .gh-foot-content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 20px 0;
border-top: none
}
.gh-foot-min-nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-left: -15px
}
.gh-foot-min-logo {
display: flex;
align-items: center;
}
.gh-foot-min-logo .gscan-badge {
height: 22px;
margin: 0 0 2px 4px;
}
.gh-foot-min-back {
margin-right: -15px
}
.gh-foot-min-item {
padding: 0 15px
}
@media (max-width:660px) {
.gh-foot-min .gh-foot-content {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row
}
.gh-foot-min-item:nth-child(1n+2) {
display: none
}
}
pre[class*=language-] {
overflow: auto;
margin: 0;
padding: 2.4rem 3.2rem;
border-radius: 8px
}
:not(pre)>code[class*=language-],
pre[class*=language-] {
border: none;
background: #2a3644
}
:not(pre)>code[class*=language-] {
padding: .3em .4em;
color: #343f44;
font-size: .9em;
text-shadow: none;
white-space: normal;
background: #e5eff5;
border-radius: .3em
}
a>code[class*=language-] {
color: #3eb0ef
}
@-webkit-keyframes bounce {
0%,
5% {
-webkit-transform: translate3d(0, 2px, 0) scale(1);
transform: translate3d(0, 2px, 0) scale(1)
}
to {
background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .75)), to(hsla(0, 0%, 100%, .96)));
background: linear-gradient(180deg, hsla(0, 0%, 100%, .75) 0, hsla(0, 0%, 100%, .96));
-webkit-box-shadow: rgba(0, 0, 0, .35) 0 0 1px, rgba(0, 0, 0, .1) 0 5px 6px;
box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 5px 6px rgba(0, 0, 0, .1);
-webkit-transform: translate3d(0, -2px, 0) scale(1);
transform: translate3d(0, -2px, 0) scale(1)
}
}
@keyframes bounce {
0%,
5% {
-webkit-transform: translate3d(0, 2px, 0) scale(1);
transform: translate3d(0, 2px, 0) scale(1)
}
to {
background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .75)), to(hsla(0, 0%, 100%, .96)));
background: linear-gradient(180deg, hsla(0, 0%, 100%, .75) 0, hsla(0, 0%, 100%, .96));
-webkit-box-shadow: rgba(0, 0, 0, .35) 0 0 1px, rgba(0, 0, 0, .1) 0 5px 6px;
box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 5px 6px rgba(0, 0, 0, .1);
-webkit-transform: translate3d(0, -2px, 0) scale(1);
transform: translate3d(0, -2px, 0) scale(1)
}
}
body {
background: #fff;
}
.gh-nav-logo,
.gh-nav-logo:hover {
color: #30cf43;
}
.gh-gscan-head {
margin-bottom: 6vw;
text-align: center
}
.gh-subhead.warning {
margin-top: .5em;
color: #f05230
}
.gh-input-icon.select-arrow {
position: absolute;
display: none;
bottom: 15px;
right: 38px
}
.gh-input-icon.select-arrow svg {
width: 14px;
height: 8px;
fill: #677d87;
-webkit-transition: all .1s ease-out;
transition: all .1s ease-out
}
.gh-input-icon.select-arrow svg g {
stroke: #677d87
}
.gh-input-icon.select-arrow.active {
display: inherit
}
.report-body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start
}
.gh-section.report {
padding-top: 24px;
}
.report-section {
padding: 0
}
.report-section.results {
width: 60%
}
.report-section.meta,
.report-section.results {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.report-section.meta {
overflow: hidden;
margin-top: 25px;
padding: 20px;
width: 40%;
border: 1px solid #e5eff5;
border-radius: 5px
}
.image-container {
margin: -20px -20px 20px;
border-bottom: 1px solid #e5eff5
}
.info {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
width: 100%
}
.report-meta ul {
margin: 0;
padding: 0;
list-style: none
}
.image-container img {
max-width: 100%
}
.report-heading {
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 4vw;
color: rgba(0,0,10,.45);
margin: 4rem 0 3.2rem;
padding: 0
}
.result-summary .title {
padding-right: 40px;
font-size: 4.4rem;
font-weight: 600;
line-height: 1.6em;
}
.result-summary .title strong {
color: #15171A;
font-weight: 700;
text-transform: capitalize;
}
.result-summary .title span {
text-transform: uppercase;
}
@media (max-width: 940px) {
.result-summary .title {
font-size: 3.2rem;
}
}
@media (max-width: 500px) {
.result-summary .title {
padding-right: 0;
}
}
.result-summary p {
margin: 0 0 .8em;
color: #a0a3b7;
font-size: 1.4rem;
font-weight: 700;
letter-spacing: .015em;
line-height: 1.4em;
text-transform: uppercase;
}
.report h3,
.report h4 {
line-height: 1.6
}
.report h3 {
display: block;
font-size: 2.4rem;
font-weight: 700;
padding: 0;
margin: 0
}
.report h4 {
margin: 0;
font-size: 16px;
font-weight: 400;
opacity: 1
}
.details {
width: 100%;
margin-top: 12px;
margin-bottom: 8px;
padding: 20px;
background: #F9F9FA;
border-radius: 3px;
}
.details,
.details p {
font-size: 1.3rem;
line-height: 1.6em
}
.details p,
.details ul {
margin-bottom: 0
}
.details h4 {
font-size: 1.3rem;
font-weight: 700;
margin-top: 24px;
color: #15171a;
display: inline-block;
}
.level-group {
margin: 8rem 0;
}
.level-group-header p {
font-size: 1.45rem;
font-weight: 500;
}
.level-group.passes {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.level-group.passes .details {
padding-top: 0
}
@media (max-width: 660px) {
.level-group.passes {
flex-direction: column;
}
}
.toggle-details .hide {
display: none
}
.toggle-details {
position: relative;
display: inline-block;
overflow: hidden;
margin-top: 2px;
padding: 0;
height: 20px;
color: #7C8B9A;
font-size: 1.4rem;
font-weight: 500;
opacity: 1;
cursor: pointer
}
.toggle-details:hover {
color: #15171A;
text-decoration: none;
}
.details.hide {
display: none
}
.indicator {
display: inline-block;
margin-right: 6px;
width: 30px;
height: 30px;
color: #fff;
line-height: 1.5;
font-weight: 700;
text-align: center;
background: transparent;
border-radius: 100%
}
.health-meter {
flex-shrink: 0;
}
.score {
display: inline-block;
margin-top: 12px;
padding: 12px 16px;
border-radius: 3px;
color: #111;
font-size: 2rem;
font-weight: 600;
}
.score strong {
font-size: 8rem;
font-weight: 800;
}
@media (max-width: 940px) {
.score {
padding: 12px 0;
}
.score strong {
font-size: 6rem;
}
}
.progress-bar {
width: 100%;
height: 12px;
margin-bottom: 2rem;
border: none;
background: #EBEEF0;
border-radius: 6px;
box-shadow: none;
}
.progress-bar-value {
height: 12px;
overflow: hidden;
color: rgba(255, 255, 255, 0);
white-space: nowrap;
border-radius: 5px;
animation: progress-bar 2s;
}
.progress-bar-value.passing {
background: linear-gradient(135deg,#60d20d 5%,#009b7f);
}
.progress-bar-value.warning {
background: linear-gradient(135deg,#ffca00 5%,#ff8300);
}
.progress-bar-value.error {
background: linear-gradient(135deg,#fb2d8d 5%,#f50b23);
}
@keyframes progress-bar {
0% { width: 0; }
}
.tags li {
display: inline;
list-style-type: none
}
.tags li:after {
content: ","
}
.tags li:last-child:after {
content: "."
}
button[type=submit].button-add:disabled,
button[type=submit].button-add:disabled:hover {
color: #b3b9ba;
background: #eeefef;
cursor: not-allowed
}
.rule-group {
background: #fff;
}
.rule {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 20px 0 16px 24px;
border-bottom: 1px solid #EBEEF0;
background: none;
-webkit-transition: all .3s ease;
transition: all .3s ease
}
.rule-group article:last-of-type {
border-bottom: none
}
.rule>p {
position: relative;
margin: 0 0 .8rem;
color: #15171A;
}
.rule>p:after {
content: "";
position: absolute;
top: 8px;
left: -24px;
display: block;
height: 8px;
width: 8px;
border-radius: 4px;
}
.level-group.errors .rule>p:after {
background: #F50B23
}
.level-group.warnings .rule>p:after {
background: #FFB41F
}
.level-group.recommendations .rule>p:after {
background: #ABB4BE
}
.level-group.passes .rule>p:after {
background: #30CF43;
top: 7px
}
.level-group.passes .details {
padding: 0
}
.gh-section-gscan-uploader {
min-height: 70vh
}
.gh-gscan-uploader {
position: relative;
z-index: 999;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-width: 360px;
margin-top: 2rem;
}
.gh-gscan-uploader,
.gh-gscan-uploader-form {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.gh-gscan-uploader-form {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 400px;
padding: 56px 48px;
background: #fff;
border-radius: 3px;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.024),
0 12.5px 10px rgba(0, 0, 0, 0.032),
0 22.3px 17.9px rgba(0, 0, 0, 0.032),
0 41.8px 56px rgba(0, 0, 0, 0.04),
0 100px 120px rgba(0, 0, 0, 0.06)
;
}
@media (max-width: 500px) {
.gh-gscan-uploader-form {
padding: 40px;
box-shadow: none;
}
}
.gh-gscan-uploader-form .gh-input svg {
margin-bottom: 1rem;
}
.gh-gscan-uploader-form label {
display: block;
margin: 0 0 8px;
font-size: 1.3rem;
line-height: 1.3em;
font-weight: 400
}
.gh-gscan-uploader-form .gh-select {
line-height: 1em;
padding: 12px
}
.gh-gscan-uploader-form .gh-btn {
border: none;
color: #fff;
background: linear-gradient(135deg,#ed26d3 5%,#ff1433);
}
.gh-gscan-uploader-form .gh-btn span {
height: 40px;
font-size: 1.6rem;
font-weight: 600;
line-height: 40px;
background: linear-gradient(135deg,#ed26d3 5%,#ff1433);
}
.gh-gscan-uploader-button {
min-width: 280px;
padding: 32px 12px;
border: 1px dashed #CED4D9;
font-weight: 500 !important;
text-align: center;
background: #F9F9FA;
cursor: pointer;
}
@media (max-width:940px) {
.report-heading {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: flex-start;
}
.result-summary {
-webkit-box-flex: 1;
-ms-flex: 1 1 380px;
flex: 1 1 380px;
margin-bottom: .2em
}
}
.gh-section-themenewsletter {
padding: 6vw 4vw;
background: #000;
}
.newsletter-form-container {
position: relative;
z-index: 900;
width: 85%;
max-width: 400px;
margin: 4vw auto;
color: #7C8B9A;
text-shadow: none;
border-radius: 10px;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
.newsletter-form {
width: 100%
}
.newsletter-form-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #1e2025;
border-radius: 3px;
}
.newsletter-form-group svg {
width: 24px;
height: 24px;
margin: 2px 0 0 12px;
}
.newsletter-form-group svg path {
stroke: rgba(255,255,255,.6);
}
.newsletter-form-group .gh-input {
width: 100%;
padding: 12px 8px;
color: #fff;
background: none;
border: none;
}
.newsletter-form-group .gh-btn {
-ms-flex-negative: 0;
flex-shrink: 0;
margin: 4px;
}
.newsletter-form small {
display: block;
margin: 10px 0 0;
color: rgba(255,255,255,.6);
font-size: 1rem;
line-height: 1.5em;
font-weight: 600;
text-align: center;
}
.newsletter-confirmed-message,
.newsletter-success-message {
display: none;
text-align: center;
border: 1px solid #a4d037;
background: #fff;
border-radius: 10px
}
.successfully-confirmed .newsletter-confirmed-message,
.successfully-subscribed .newsletter-success-message {
display: block
}
.gh-foot {
background: #15171a;
}
.gh-foot-support {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.gh-support-email,
.gh-support-slack {
display: block;
position: relative;
margin: 40px 0;
padding: 25px 80px 55px 0;
width: 50%;
text-align: left
}
.gh-foot-support svg {
position: absolute;
top: 30px;
left: 35px;
width: 50px;
height: auto
}
.gh-support-email svg {
fill: #a4d037
}
.gh-support-slack svg {
fill: #ad26b4
}
.gh-foot-support h4 {
margin-top: 0;
color: #fff;
font-size: 3.2rem;
font-weight: 600;
letter-spacing: -.025em;
line-height: 1.25em;
}
.gh-foot-support p {
margin-bottom: 0;
color: rgba(255,255,255,.6);
font-size: 2rem;
font-weight: 400;
line-height: 1.45em
}
.gh-support-email a {
color: #B5FF18;
font-weight: 700;
}
.gh-support-slack a {
color: #ff247d;
font-weight: 700;
}
.gh-foot-support a:hover {
color: #fff;
}
@media (max-width:800px) {
.gh-foot-support {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column
}
.gh-support-email,
.gh-support-slack {
width: 100%
}
}