|
:root { |
|
--primary-color: rgba(26, 109, 255, 1); |
|
} |
|
|
|
@import url("https://fonts.cdnfonts.com/css/inter"); |
|
|
|
body { |
|
font-family: "Inter", sans-serif; |
|
} |
|
|
|
#head { |
|
padding-top: 1rem; |
|
border-bottom: 1px solid rgba(227, 234, 240, 1); |
|
} |
|
|
|
h1 { |
|
font-weight: 600; |
|
font-size: 26px; |
|
} |
|
|
|
h2 { |
|
font-weight: 600; |
|
font-size: 18px; |
|
} |
|
|
|
h3 { |
|
font-weight: 600; |
|
font-size: 16px; |
|
} |
|
|
|
h4 { |
|
font-weight: 600; |
|
font-size: 14px; |
|
} |
|
|
|
.small { |
|
font-size: 12px; |
|
} |
|
|
|
p { |
|
font-weight: 400; |
|
font-size: 16px; |
|
line-height: 24px; |
|
color: #56687a; |
|
} |
|
|
|
select, |
|
textarea { |
|
resize: none; |
|
} |
|
|
|
.form-control:focus { |
|
box-shadow: none; |
|
} |
|
|
|
.badge.bg-secondary { |
|
background-color: rgba(247, 249, 250, 1) !important; |
|
border-color: rgba(215, 220, 224, 1); |
|
border: 1px solid rgba(215, 220, 224, 1); |
|
color: rgba(86, 104, 122, 1); |
|
text-transform: uppercase; |
|
font-size: 12px; |
|
padding: 7px; |
|
position: relative; |
|
top: -0.5rem; |
|
left: 1rem; |
|
} |
|
|
|
.tabs div { |
|
margin-right: 1rem; |
|
cursor: pointer; |
|
} |
|
|
|
.tabs div.active { |
|
border-bottom: 3px solid var(--primary-color); |
|
} |
|
|
|
.right-column { |
|
flex: 0 0 465px; |
|
margin: 1rem; |
|
} |
|
|
|
.image-container { |
|
margin: 2rem 2rem 0 0; |
|
background: rgba(247, 249, 250, 1); |
|
display: flex; |
|
justify-content: center; |
|
min-height: 512px; |
|
} |
|
|
|
.image-container img { |
|
align-self: start; |
|
width: 100%; |
|
height: auto; |
|
} |
|
|
|
.image-container .placeholder, |
|
.image-container .spinner img { |
|
width: 48px; |
|
height: 48px; |
|
} |
|
|
|
.image-container .placeholder, |
|
.image-container .spinner { |
|
align-self: center; |
|
} |
|
|
|
.image-container .spinner { |
|
text-align: center; |
|
color: #56687a; |
|
} |
|
|
|
#body .container-xl > .row > .col:first-child { |
|
border-right: 1px solid rgba(227, 234, 240, 1); |
|
} |
|
|
|
.custom-select { |
|
position: relative; |
|
} |
|
|
|
.custom-select::after { |
|
--size: 0.4rem; |
|
content: ""; |
|
position: absolute; |
|
right: 1rem; |
|
pointer-events: none; |
|
border-left: var(--size) solid transparent; |
|
border-right: var(--size) solid transparent; |
|
border-top: var(--size) solid black; |
|
top: 30%; |
|
} |
|
|
|
label { |
|
font-size: 14px; |
|
font-weight: 600; |
|
margin-bottom: 0.5rem; |
|
} |
|
|
|
label.form-check-label { |
|
font-weight: 400; |
|
} |
|
|
|
.display-verify { |
|
display: none; |
|
} |
|
|
|
img.thumbnail { |
|
width: 100px; |
|
height: 100px; |
|
} |
|
|
|
#original-image { |
|
border-bottom: 1px solid rgba(227, 234, 240, 1); |
|
display: none; |
|
flex-direction: column; |
|
} |
|
|
|
#resultLabel { |
|
display: none; |
|
} |
|
|
|
.action-menu { |
|
display: none; |
|
margin: 2rem 2rem 0 0; |
|
} |
|
|
|
.action-menu .row { |
|
align-items: center; |
|
} |
|
|
|
.action-menu button, |
|
.action-menu a.btn { |
|
width: 175px; |
|
} |
|
|
|
.action-menu .btn { |
|
border-radius: 0; |
|
color: var(--primary-color); |
|
border-color: var(--primary-color); |
|
} |
|
|
|
.action-menu .btn:hover { |
|
background-color: transparent; |
|
color: var(--primary-color); |
|
} |
|
|
|
.alert-primary { |
|
border-color: #fef3c7; |
|
background-color: rgba(254, 243, 199, 0.25); |
|
} |
|
|
|
.alert-primary h4, |
|
.alert-primary p { |
|
font-size: 14px; |
|
color: #1f2937; |
|
} |
|
|
|
.alert-primary h4 { |
|
font-weight: 600; |
|
} |
|
|
|
.alert-primary p { |
|
margin-bottom: 0; |
|
} |
|
|
|
.alert-secondary { |
|
border-color: #dde9ff; |
|
background-color: #f4f8ff; |
|
} |
|
|
|
.alert-secondary p { |
|
font-size: 14px; |
|
color: #1f2937; |
|
} |
|
|
|
.how-it-works { |
|
margin-top: 3rem; |
|
font-size: 12px; |
|
color: #56687a; |
|
} |
|
|
|
.how-it-works strong { |
|
font-weight: 600; |
|
color: black; |
|
} |
|
|
|
#verification-output { |
|
height: 480px; |
|
background: #f7f9fa; |
|
border: 1px solid #d8dfe5; |
|
overflow-y: auto; |
|
margin-right: 1rem; |
|
} |
|
|
|
#certificates-h3 { |
|
border-top: 1px solid rgba(227, 234, 240, 1); |
|
} |
|
|
|
.certificate .details { |
|
color: rgba(86, 104, 122, 1); |
|
font-size: 12px; |
|
font-weight: 400; |
|
padding: 1rem; |
|
margin: 0 2rem 0 0; |
|
height: 480px; |
|
background: #f7f9fa; |
|
border: 1px solid #d8dfe5; |
|
overflow-y: auto; |
|
} |
|
|
|
.certificate .details > div { |
|
clear: both; |
|
padding: 0.4rem 0; |
|
} |
|
|
|
.certificate .details strong { |
|
padding: 0.5rem 0; |
|
display: block; |
|
color: black; |
|
} |
|
|
|
.certificate .details div label { |
|
float: left; |
|
width: 175px; |
|
font-size: 12px; |
|
font-weight: 400; |
|
} |
|
|
|
.certificate #certificate-list { |
|
padding: 0; |
|
margin: 0 2rem 32px 0; |
|
border-bottom: 1px solid #d8dfe5; |
|
} |
|
|
|
.certificate #certificate-list li { |
|
border: 1px solid #d8dfe5; |
|
border-bottom: none; |
|
list-style: none; |
|
padding: 0.8rem 0 0.8rem 1.5rem; |
|
font-size: 14px; |
|
} |
|
|
|
.certificate #certificate-list li:not(:first-child) { |
|
background: url(images/li.svg) no-repeat 2.5rem 50%; |
|
padding: 0.8rem 0 0.8rem 4.5rem; |
|
} |
|
|
|
.certificate #certificate-list li.active { |
|
background-color: #f7f9fa; |
|
font-weight: 600; |
|
} |
|
|
|
.certificate #certificate-list li:hover, |
|
.certificate #certificate-list li.active:hover { |
|
background-color: #e9f4ff; |
|
cursor: pointer; |
|
} |
|
|
|
.output-container { |
|
border-top: 1px solid rgba(227, 234, 240, 1); |
|
} |
|
|
|
.alert#verifyResultDescription { |
|
margin-right: 2rem; |
|
} |
|
|
|
#logo { |
|
border-top: 1px solid rgba(227, 234, 240, 1); |
|
} |
|
|
|
#logo img { |
|
width: 156px; |
|
} |
|
|
|
.check-icon, |
|
.x-icon { |
|
width: 16px; |
|
height: 16px; |
|
display: inline-block; |
|
} |
|
|
|
.check-icon { |
|
background-image: url("images/check.svg"); |
|
} |
|
|
|
.x-icon { |
|
background-image: url("images/x.svg"); |
|
} |
|
|
|
.btn-primary { |
|
width: 100%; |
|
background: rgba(206, 206, 206, 1); |
|
color: white; |
|
border-color: rgba(206, 206, 206, 1); |
|
border-radius: 0; |
|
} |
|
|
|
.btn-primary:hover, |
|
.btn-primary:active, |
|
.btn-primary:focus { |
|
background-color: rgba(206, 206, 206, 1); |
|
border-color: rgba(206, 206, 206, 1); |
|
box-shadow: none !important; |
|
} |
|
|
|
.btn-primary.active { |
|
background-color: #1a6dff; |
|
border-color: #1a6dff; |
|
} |
|
|
|
.btn-primary.active:hover { |
|
background-color: #165ad9; |
|
border-color: #165ad9; |
|
} |
|
|
|
.btn-primary.active:active { |
|
background-color: #1247b2; |
|
background-color: #1247b2; |
|
} |
|
|
|
.error { |
|
color: #d8394b; |
|
display: none; |
|
} |
|
|
|
@media screen and (max-width: 1100px) { |
|
.right-column { |
|
flex: 0 0 45%; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 768px) { |
|
#body > .container-xl > .row { |
|
flex-direction: column-reverse; |
|
} |
|
|
|
.tabs { |
|
position: relative !important; |
|
} |
|
|
|
.right-column { |
|
margin: 1rem 0; |
|
} |
|
} |
|
|
|
|
