/*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } @font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/plex/IBMPlexMono-Bold.woff2"); src: url("/static/fonts/plex/IBMPlexMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; } @font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/plex/IBMPlexMono-BoldItalic.woff2"); src: url("/static/fonts/plex/IBMPlexMono-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; } @font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/plex/IBMPlexMono-Regular.woff2"); src: url("/static/fonts/plex/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; } @font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/plex/IBMPlexMono-RegularItalic.woff2"); src: url("/static/fonts/plex/IBMPlexMono-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; } @font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/plex/IBMPlexMono-Light.woff2"); src: url("/static/fonts/plex/IBMPlexMono-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; } @font-face { font-family: "IBMPlexMono"; src: url("/static/fonts/plex/IBMPlexMono-LightItalic.woff2"); src: url("/static/fonts/plex/IBMPlexMono-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; } html { --loud: hsl(0, 0%, 0%); --sottovoce: hsl(0, 0%, 40%); --hushed: hsl(0, 0%, 60%); --whisper: hsl(0, 0%, 80%); --quiet: hsl(0, 0%, 90%); --silent: hsl(0, 0%, 100%); --emphasis: hsl(315, 72%, 56%); --danger: hsl(355, 100%, 40%); --warning: hsl(24, 100%, 45%); --strange: hsl(256, 52%, 56%); --success: hsl(90, 100%, 32%); --info: hsl(204, 82%, 45%); --highlight: hsla(204, 82%, 45%, 0.2); --hero: hsl(204, 82%, 45%); --black: hsl(0, 0%, 0%); --gray-1: hsl(0, 0%, 10%); --gray-2: hsl(0, 0%, 20%); --gray-3: hsl(0, 0%, 30%); --gray-4: hsl(0, 0%, 40%); --gray-5: hsl(0, 0%, 50%); --gray-6: hsl(0, 0%, 60%); --gray-7: hsl(0, 0%, 70%); --gray-8: hsl(0, 0%, 80%); --gray-9: hsl(0, 0%, 90%); --gray-95: hsl(0, 0%, 95%); --white: hsl(0, 0%, 100%); --sans-font: sans-serif; --monospace-font: "IBMPlexMono", courier, monospace; --default-font-size: 12px; --bold-weight: 700; --emoji-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --regular-weight: 400; --light-weight: 300; --oblique-style: italic; --default-line-height: 1.5; --compact-line-height: 1.25; --x-large-width: 1440px; --large-width: 960px; --medium-width: 800px; --small-width: 600px; --x-small-width: 480px; --default-transition: 0.2s all ease-in-out; --default-border-radius: 0.25rem; --default-border-width: 1px; font-size: var(--default-font-size); scroll-behavior: smooth; height: 100%; } @media (min-width: 600px) { html { font-size: calc(var(--default-font-size) * 1.1); } } @media (prefers-color-scheme: dark) { html { --loud: hsl(0, 0%, 100%); --sottovoce: hsl(0, 0%, 60%); --hushed: hsl(0, 0%, 50%); --whisper: hsl(0, 0%, 40%); --quiet: hsl(0, 0%, 10%); --silent: hsl(0, 0%, 0%); --emphasis: hsl(315, 72%, 56%); --danger: hsl(355, 100%, 40%); --warning: hsl(24, 100%, 45%); --strange: hsl(256, 52%, 56%); --success: hsl(90, 100%, 32%); --info: hsl(204, 82%, 45%); --highlight: hsla(204, 82%, 45%, 0.2); --hero: hsl(204, 82%, 45%); } } *:focus, *:focus-visible { outline-color: var(--whisper); outline-style: solid; outline-width: 2px; } body { background-color: var(--silent); color: var(--loud); font-family: var(--monospace-font); font-size: 1rem; height: 100%; line-height: var(--default-line-height); margin-inline: auto; max-width: var(--large-width); padding-inline: 1rem; } address, article, aside, div, footer, header, main, nav, search, section { display: block; } details { border: 1px solid var(--whisper); border-radius: var(--default-border-radius); margin-block: 2rem; padding: 1rem; } summary { font-weight: var(--bold-weight); transition: margin 150ms ease-in-out; } summary:before { content: ""; display: inline-block; height: 0.75rem; line-height: 1; margin-inline-end: 0.5rem; width: 0.75rem; background-repeat: no-repeat; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem; background-image: linear-gradient(45deg, var(--loud) 50%, transparent 50%), linear-gradient(135deg, var(--loud) 50%, transparent 50%); background-position: right 0.125rem top 0, right 0.125rem top 0.375rem; } details[open] > summary { margin-block-end: 1rem; } details[open] > summary:before { background-repeat: no-repeat; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem; background-image: linear-gradient(225deg, var(--loud) 50%, transparent 50%), linear-gradient(135deg, var(--loud) 50%, transparent 50%); background-position: right 0.375rem top 0.25rem, right 0 top 0.25rem; } summary::-webkit-details-marker, summary::marker { content: none; display: none; } h1, h2, h3, h4, h5, h6 { font-weight: var(--bold-weight); margin-block: 0.5rem; } h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: inherit; font-weight: var(--light-weight); } h1 a, h1 a:link, h1 a:visited, h2 a, h2 a:link, h2 a:visited, h3 a, h3 a:link, h3 a:visited, h4 a, h4 a:link, h4 a:visited, h5 a, h5 a:link, h5 a:visited, h6 a, h6 a:link, h6 a:visited { color: inherit; } h1, h2, h3 { text-transform: uppercase; } h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; margin-block-start: 1rem; } h3 { font-size: 1rem; } h4 { font-size: 1rem; } h5 { font-size: 0.9rem; } h6 { font-size: 0.8rem; } p:not(:last-child) { margin-block-end: 1rem; } blockquote { background-color: var(--quiet); border-radius: var(--default-border-radius); font-style: var(--oblique-style); margin-block: 1rem; padding: 1rem; } pre { display: block; font-family: var(--monospace-font); } hr { border: none; border-bottom: 1px solid var(--hushed); margin-block: 1rem; } a:link { color: var(--info); text-decoration: none; } a:visited { color: var(--strange); } a:hover { color: var(--hero); transition: var(--default-transition); } a:active { color: var(--success); } strong, b, dfn { font-weight: var(--bold-weight); } em, i, cite, q, var { font-style: var(--oblique-style); } u { text-decoration: underline; } s { text-decoration: line-through; } ins { color: var(--success); text-decoration: underline; } del { color: var(--danger); text-decoration: line-through; } small, sup, sub { font-size: 80%; } sup { vertical-align: super; } sub { vertical-align: sub; } kbd, code, samp { font-family: var(--monospace-font); } mark { background: var(--highlight); } ul ul, ul ol, ul menu, ol ul, ol ol, ol menu, menu ul, menu ol, menu menu { margin-block-end: 0; } ul, ol { margin-block-end: 1rem; margin-inline-start: 3rem; } ul { list-style-type: disc; } ol { counter-reset: revert; list-style-type: auto; } dl { margin-block-end: 1rem; } dt { font-weight: var(--bold-weight); margin-block-start: 2rem; margin-block-end: 0.5rem; } dd { margin-block-end: 1rem; margin-inline-start: 1rem; } table { border: 1px solid var(--quiet); margin-block: 2rem; } table caption { font-weight: var(--bold-weight); text-transform: uppercase; } tr { border-block-end: 1px solid var(--quiet); } td, th { padding: 0.5rem 0.75rem; text-align: start; } td { vertical-align: top; } th { font-weight: var(--bold-weight); vertical-align: bottom; } thead th { border-block-end: 1px solid var(--sottovoce); } tfoot th { border-block-start: 1px solid var(--sottovoce); } form ul { list-style-type: none; margin: 0; } fieldset { background-color: var(--quiet); border-radius: var(--default-border-radius); display: block; margin-block-end: 2rem; margin-block-start: 2rem; padding: 1rem; } legend { background-color: transparent; border: none; border-radius: var(--default-border-radius); font-weight: var(--bold-weight); margin-inline-start: 0; padding: 0.25rem 1rem; } label { display: block; font-weight: var(--bold-weight); } input, textarea, select { background: hsl(0, 0%, 100%); border: 1px solid var(--whisper); } input, textarea, select, option { background-color: var(--silent); border-radius: var(--default-border-radius); box-shadow: 0 0 0; box-sizing: border-box; color: var(--loud); font-family: var(--sans-font); font-size: 1rem; padding: 1rem; } select, option { padding: 0.5rem; } select { appearance: none; background-color: var(--silent); padding-inline-end: 2rem; background-repeat: no-repeat; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem; background-image: linear-gradient(225deg, var(--loud) 50%, transparent 50%), linear-gradient(135deg, var(--loud) 50%, transparent 50%); background-position: right 1.125rem top 1rem, right 0.75rem top 1rem; } input[type=text], input[type=password], input[type=url], input[type=email], input[type=search], input[type=number], input[type=color], input[type=range], input[type=date], input[type=month], input[type=week], input[type=datetime], input[type=datetime-local] { border-color: var(--hushed); border-radius: var(--default-border-radius); border-width: var(--default-border-width); color: var(--loud); padding: 0.3333rem; } input[type=text]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, input[type=email]::placeholder, input[type=search]::placeholder, input[type=number]::placeholder, input[type=color]::placeholder, input[type=range]::placeholder, input[type=date]::placeholder, input[type=month]::placeholder, input[type=week]::placeholder, input[type=datetime]::placeholder, input[type=datetime-local]::placeholder { color: var(--hushed); } input[type=number] { width: 5rem; } input[type=color] { padding: 1px; height: 2rem; width: 2rem; } input[type=range] { -webkit-appearance: none; width: 100%; background: var(--silent); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 1px solid var(--hushed); height: 1rem; width: 1rem; border-radius: 100%; background: var(--whisper); margin-top: 0; } input[type=range]::-ms-thumb { width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent; } input[type=submit] { background-color: var(--info); border: none; border-radius: var(--default-border-radius); color: white !important; display: inline-block; font-weight: var(--bold-weight); padding: 0.25rem 0.5rem; text-decoration: none; text-transform: uppercase; } input[type=submit]:hover { opacity: 0.8; cursor: pointer; transition: var(--default-transition); } input[type=button] { background-color: var(--hushed); border: none; border-radius: var(--default-border-radius); color: white !important; display: inline-block; font-weight: var(--bold-weight); padding: 0.25rem 0.5rem; text-decoration: none; text-transform: uppercase; } input[type=button]:hover { opacity: 0.8; cursor: pointer; transition: var(--default-transition); } input[type=reset] { background-color: var(--danger); border: none; border-radius: var(--default-border-radius); color: white !important; display: inline-block; font-weight: var(--bold-weight); padding: 0.25rem 0.5rem; text-decoration: none; text-transform: uppercase; } input[type=reset]:hover { opacity: 0.8; cursor: pointer; transition: var(--default-transition); } input[type=checkbox], input[type=radio] { padding: 0.5rem; } input[type=checkbox]:checked, input[type=radio]:checked { background: var(--loud); border-color: var(--loud); box-shadow: inset 0 0 0 2px var(--silent); } input[type=radio] { border-radius: 100%; } *[title=Required], .required { color: var(--danger); } .field-container:not(:last-child) { margin-block-end: 1rem; } .is-error { border: 2px solid var(--danger) !important; } .is-error::placeholder { color: var(--danger); } label.error { color: var(--danger); } .is-valid { border: 2px solid var(--success) !important; } .is-valid::placeholder { color: var(--success); } label.valid { color: var(--success); } .options label { font-weight: var(--normal-weight); } .bg-loud { background: var(--loud); } .fg-loud { color: var(--loud) !important; } .bg-sottovoce { background: var(--sottovoce); } .fg-sottovoce { color: var(--sottovoce) !important; } .bg-hushed { background: var(--hushed); } .fg-hushed { color: var(--hushed) !important; } .bg-whisper { background: var(--whisper); } .fg-whisper { color: var(--whisper) !important; } .bg-quiet { background: var(--quiet); } .fg-quiet { color: var(--quiet) !important; } .bg-silent { background: var(--silent); } .fg-silent { color: var(--silent) !important; } .bg-emphasis { background: var(--emphasis); } .fg-emphasis { color: var(--emphasis) !important; } .bg-danger { background: var(--danger); } .fg-danger { color: var(--danger) !important; } .bg-warning { background: var(--warning); } .fg-warning { color: var(--warning) !important; } .bg-strange { background: var(--strange); } .fg-strange { color: var(--strange) !important; } .bg-success { background: var(--success); } .fg-success { color: var(--success) !important; } .bg-info { background: var(--info); } .fg-info { color: var(--info) !important; } .bg-highlight { background: var(--highlight); } .fg-highlight { color: var(--highlight) !important; } .bg-hero { background: var(--hero); } .fg-hero { color: var(--hero) !important; } .bg-black { background: var(--black); } .fg-black { color: var(--black) !important; } .bg-gray-1 { background: var(--gray-1); } .fg-gray-1 { color: var(--gray-1) !important; } .bg-gray-2 { background: var(--gray-2); } .fg-gray-2 { color: var(--gray-2) !important; } .bg-gray-3 { background: var(--gray-3); } .fg-gray-3 { color: var(--gray-3) !important; } .bg-gray-4 { background: var(--gray-4); } .fg-gray-4 { color: var(--gray-4) !important; } .bg-gray-5 { background: var(--gray-5); } .fg-gray-5 { color: var(--gray-5) !important; } .bg-gray-6 { background: var(--gray-6); } .fg-gray-6 { color: var(--gray-6) !important; } .bg-gray-7 { background: var(--gray-7); } .fg-gray-7 { color: var(--gray-7) !important; } .bg-gray-8 { background: var(--gray-8); } .fg-gray-8 { color: var(--gray-8) !important; } .bg-gray-9 { background: var(--gray-9); } .fg-gray-9 { color: var(--gray-9) !important; } .bg-gray-95 { background: var(--gray-95); } .fg-gray-95 { color: var(--gray-95) !important; } .bg-white { background: var(--white); } .fg-white { color: var(--white) !important; } .styleguide-color { background-color: var(--black); color: var(--white); margin-block-end: 0.125rem; padding: 0.25rem; width: 50%; } a.button, button.button { background-color: var(--info); border: none; border-radius: var(--default-border-radius); color: white !important; display: inline-block; font-weight: var(--bold-weight); padding: 0.25rem 0.5rem; text-decoration: none; text-transform: uppercase; } a.button:hover, button.button:hover { opacity: 0.8; cursor: pointer; transition: var(--default-transition); } a.button-hot, button.button-hot { background-color: var(--emphasis); border: none; border-radius: var(--default-border-radius); color: white !important; display: inline-block; font-weight: var(--bold-weight); padding: 0.25rem 0.5rem; text-decoration: none; text-transform: uppercase; } a.button-hot:hover, button.button-hot:hover { opacity: 0.8; cursor: pointer; transition: var(--default-transition); } a.button-cool, button.button-cool { background-color: var(--hushed); border: none; border-radius: var(--default-border-radius); color: white !important; display: inline-block; font-weight: var(--bold-weight); padding: 0.25rem 0.5rem; text-decoration: none; text-transform: uppercase; } a.button-cool:hover, button.button-cool:hover { opacity: 0.8; cursor: pointer; transition: var(--default-transition); } .responsive-image { display: block; margin-inline: auto; max-width: 100%; } .text-align-end { text-align: end; } .text-align-center { text-align: center; } .nowrap { white-space: nowrap; } .float-left { float: left; } .nobullet { list-style-type: none; margin-inline-start: 0; } menu { display: flex; margin-block: 1rem; } menu li { margin-inline-end: 1px; } menu li a.button { border-radius: 0; } menu li:first-child a.button { border-radius: var(--default-border-radius) 0 0 var(--default-border-radius); } menu li:last-child { margin-inline-end: 0; } menu li:last-child a.button { border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0; } td.data, th.data { text-align: end; white-space: nowrap; width: 1%; } .invoice-admin { margin-block-end: 2rem; } @media print { .invoice-admin { display: none; } } .invoice-header { display: flex; margin-block-end: 2rem; justify-content: space-between; } .invoice-info { align-items: flex-start; display: flex; flex-direction: column; justify-content: space-between; } .invoice-logo { display: block; height: auto; margin-block-end: 1rem; margin-inline: auto; width: 110px; } @media print { .invoice-logo { width: 72px; } } .invoice-summary { border-color: var(--highlight); margin-block: 0; } .invoice-summary tr { border-width: 0; } .invoice-lineitems { width: 100%; } .home { align-items: stretch; background-image: url("/static/images/lopez.jpg"); background-color: var(--quiet); background-position: top center; background-size: cover; display: flex; flex-direction: column; justify-content: space-between; } .home-branding { align-items: center; display: flex; flex-direction: column; margin-block-start: 8%; margin-inline-start: 13%; } .home-logo { display: block; height: auto; margin-inline-start: 3rem; width: 200px; } .home-main { align-items: center; display: flex; flex-direction: column; flex: 1 0 90%; justify-content: flex-start; } .home-footer { flex: 0 0 1%; padding-block: 0.5rem; text-align: center; } .emoji { font-family: var(--emoji-font); } /*# sourceMappingURL=screen.css.map */