|
: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; |
|
} |
|
|
|
p { |
|
font-weight: 400; |
|
font-size: 16px; |
|
line-height: 24px; |
|
} |
|
|
|
.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 1rem 0 0; |
|
background: rgba(247, 249, 250, 1); |
|
display: flex; |
|
justify-content: center; |
|
height: 35rem; |
|
} |
|
|
|
.image-container img { |
|
align-self: start; |
|
width: 100%; |
|
height: auto; |
|
} |
|
|
|
.image-container .placeholder, |
|
.image-container .spinner { |
|
width: 48px; |
|
height: 48px; |
|
align-self: center; |
|
} |
|
|
|
#body .container > .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; |
|
} |
|
|
|
label.form-check-label { |
|
font-weight: 400; |
|
} |
|
|
|
.btn-primary { |
|
width: 100%; |
|
} |
|
|
|
.display-verify { |
|
display: none; |
|
} |
|
|
|
img.thumbnail { |
|
width:100px; |
|
height:100px; |
|
} |
|
|
|
#original-image { |
|
border-bottom: 1px solid rgba(227, 234, 240, 1); |
|
display: none; |
|
} |
|
|
|
#resultLabel { |
|
display:none; |
|
} |
|
|
|
.action-menu { |
|
display: none; |
|
} |
|
|
|
.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); |
|
} |