/* ==========================================================================
   INAIVOM - CSS Reset
   File: app/static/css/reset.css
   Production Ready
   ========================================================================== */


/* ==========================================================================
   1. BOX SIZING
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================================
   2. DOCUMENT
   ========================================================================== */

html {
    margin: 0;
    padding: 0;

    font-size: 100%;

    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    scroll-behavior: smooth;

    tab-size: 4;
}

html:focus-within {
    scroll-behavior: smooth;
}


/* ==========================================================================
   3. BODY
   ========================================================================== */

body {
    min-width: 320px;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    background: #ffffff;
    color: #2d282b;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   4. MAIN STRUCTURAL ELEMENTS
   ========================================================================== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;

    border: 0;

    font: inherit;
    font-size: 100%;

    vertical-align: baseline;
}


/* ==========================================================================
   5. HTML5 DISPLAY
   ========================================================================== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block;
}


/* ==========================================================================
   6. HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;

    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}


/* ==========================================================================
   7. PARAGRAPHS
   ========================================================================== */

p {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   8. LINKS
   ========================================================================== */

a {
    background-color: transparent;
    color: inherit;

    text-decoration: none;

    cursor: pointer;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

a:not([href]):not([class]) {
    color: inherit;

    cursor: default;
}


/* ==========================================================================
   9. LISTS
   ========================================================================== */

ol,
ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

li {
    margin: 0;
    padding: 0;
}


/* ==========================================================================
   10. IMAGES
   ========================================================================== */

img,
picture,
svg,
canvas {
    display: block;

    max-width: 100%;
}

img {
    height: auto;

    border-style: none;
}

img:not([src]),
img[src=""] {
    visibility: hidden;
}


/* ==========================================================================
   11. SVG
   ========================================================================== */

svg {
    overflow: hidden;

    vertical-align: middle;
}

svg:not(:root) {
    overflow: hidden;
}


/* ==========================================================================
   12. MEDIA
   ========================================================================== */

audio,
video {
    display: block;

    max-width: 100%;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

video {
    object-fit: cover;
}


/* ==========================================================================
   13. FIGURE
   ========================================================================== */

figure {
    margin: 0;
}


/* ==========================================================================
   14. FORMS
   ========================================================================== */

button,
input,
optgroup,
select,
textarea {
    margin: 0;

    border-radius: 0;

    color: inherit;

    font: inherit;
    line-height: inherit;

    text-transform: none;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}


/* ==========================================================================
   15. BUTTON RESET
   ========================================================================== */

button {
    padding: 0;

    border: 0;

    background: none;

    cursor: pointer;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    padding: 0;

    border-style: none;
}


/* ==========================================================================
   16. DISABLED ELEMENTS
   ========================================================================== */

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

[disabled] {
    cursor: not-allowed;
}


/* ==========================================================================
   17. INPUT
   ========================================================================== */

input {
    min-width: 0;
}

input::-ms-clear,
input::-ms-reveal {
    display: none;
}


/* ==========================================================================
   18. SEARCH INPUT
   ========================================================================== */

[type="search"] {
    outline-offset: -2px;

    -webkit-appearance: textfield;
    appearance: textfield;
}

[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}


/* ==========================================================================
   19. NUMBER INPUT
   ========================================================================== */

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


/* ==========================================================================
   20. CHECKBOX / RADIO
   ========================================================================== */

input[type="checkbox"],
input[type="radio"] {
    padding: 0;
}


/* ==========================================================================
   21. FILE INPUT
   ========================================================================== */

input[type="file"] {
    max-width: 100%;
}


/* ==========================================================================
   22. DATE / TIME INPUTS
   ========================================================================== */

input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"] {
    min-height: 1.5em;
}


/* ==========================================================================
   23. TEXTAREA
   ========================================================================== */

textarea {
    overflow: auto;

    resize: vertical;
}


/* ==========================================================================
   24. SELECT
   ========================================================================== */

select {
    word-wrap: normal;
}

select:disabled {
    opacity: 1;
}


/* ==========================================================================
   25. LABEL
   ========================================================================== */

label {
    display: inline-block;
}


/* ==========================================================================
   26. FIELDSET
   ========================================================================== */

fieldset {
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
}


/* ==========================================================================
   27. LEGEND
   ========================================================================== */

legend {
    display: block;

    width: 100%;
    max-width: 100%;

    padding: 0;

    color: inherit;

    white-space: normal;
}


/* ==========================================================================
   28. PLACEHOLDER
   ========================================================================== */

::placeholder {
    color: inherit;

    opacity: 0.55;
}


/* ==========================================================================
   29. TABLES
   ========================================================================== */

table {
    width: 100%;

    border-collapse: collapse;
    border-spacing: 0;

    text-indent: 0;

    border-color: inherit;
}

caption {
    text-align: left;
}

th {
    font-weight: inherit;

    text-align: inherit;
    text-align: -webkit-match-parent;
}

td,
th {
    padding: 0;

    vertical-align: inherit;
}


/* ==========================================================================
   30. BLOCKQUOTE / QUOTES
   ========================================================================== */

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
    content: none;
}


/* ==========================================================================
   31. HORIZONTAL RULE
   ========================================================================== */

hr {
    height: 0;

    margin: 0;

    overflow: visible;

    border: 0;
    border-top: 1px solid currentColor;

    color: inherit;
}


/* ==========================================================================
   32. CODE ELEMENTS
   ========================================================================== */

pre,
code,
kbd,
samp {
    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 1em;
}

pre {
    overflow: auto;

    white-space: pre;
}


/* ==========================================================================
   33. TEXT FORMATTING
   ========================================================================== */

b,
strong {
    font-weight: bolder;
}

em,
i {
    font-style: italic;
}

small {
    font-size: 80%;
}

mark {
    background: transparent;
    color: inherit;
}


/* ==========================================================================
   34. ABBREVIATIONS
   ========================================================================== */

abbr[title] {
    border-bottom: 0;

    text-decoration: underline dotted;
    text-decoration-skip-ink: none;

    cursor: help;
}


/* ==========================================================================
   35. SUBSCRIPT / SUPERSCRIPT
   ========================================================================== */

sub,
sup {
    position: relative;

    font-size: 75%;
    line-height: 0;

    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}


/* ==========================================================================
   36. DETAILS / SUMMARY
   ========================================================================== */

details {
    display: block;
}

summary {
    display: list-item;

    cursor: pointer;
}


/* ==========================================================================
   37. TEMPLATE
   ========================================================================== */

template {
    display: none;
}


/* ==========================================================================
   38. HIDDEN
   ========================================================================== */

[hidden] {
    display: none !important;
}

.hidden {
    display: none !important;
}


/* ==========================================================================
   39. IFRAME
   ========================================================================== */

iframe {
    display: block;

    max-width: 100%;

    border: 0;
}


/* ==========================================================================
   40. OBJECT / EMBED
   ========================================================================== */

object,
embed {
    max-width: 100%;
}


/* ==========================================================================
   41. ADDRESS
   ========================================================================== */

address {
    font-style: normal;
}


/* ==========================================================================
   42. FOCUS
   ========================================================================== */

:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid rgba(128, 0, 32, 0.3);
    outline-offset: 2px;
}


/* ==========================================================================
   43. MOUSE FOCUS
   ========================================================================== */

:focus:not(:focus-visible) {
    outline: none;
}


/* ==========================================================================
   44. TEXT SELECTION
   ========================================================================== */

::selection {
    background: rgba(128, 0, 32, 0.14);
    color: #650019;
}

::-moz-selection {
    background: rgba(128, 0, 32, 0.14);
    color: #650019;
}


/* ==========================================================================
   45. TAP HIGHLIGHT
   ========================================================================== */

a,
button,
input,
select,
textarea,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   46. INTERACTIVE ELEMENTS
   ========================================================================== */

button,
a,
input,
select,
textarea,
summary,
[role="button"],
[tabindex] {
    touch-action: manipulation;
}


/* ==========================================================================
   47. CURSOR
   ========================================================================== */

a[href],
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
summary,
[role="button"] {
    cursor: pointer;
}


/* ==========================================================================
   48. ARIA DISABLED
   ========================================================================== */

[aria-disabled="true"] {
    cursor: not-allowed;

    pointer-events: none;
}


/* ==========================================================================
   49. CONTENT EDITABLE
   ========================================================================== */

[contenteditable="true"] {
    outline: none;
}


/* ==========================================================================
   50. SCREEN READER ACCESSIBILITY
   ========================================================================== */

.sr-only,
.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    border: 0 !important;

    white-space: nowrap !important;
}


/* ==========================================================================
   51. SCREEN READER FOCUSABLE
   ========================================================================== */

.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
    position: static !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    overflow: visible !important;

    clip: auto !important;
    clip-path: none !important;

    white-space: normal !important;
}


/* ==========================================================================
   52. RESPONSIVE MEDIA
   ========================================================================== */

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}


/* ==========================================================================
   53. IMAGE DRAGGING
   ========================================================================== */

img {
    -webkit-user-drag: none;
}


/* ==========================================================================
   54. FORM FONT INHERITANCE
   ========================================================================== */

input,
button,
textarea,
select {
    font: inherit;
}


/* ==========================================================================
   55. AUTOFILL NORMALIZATION
   ========================================================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition:
        background-color 9999s ease-out 0s,
        color 9999s ease-out 0s;
}


/* ==========================================================================
   56. AUTOCOMPLETE
   ========================================================================== */

input:-webkit-autofill {
    -webkit-text-fill-color: inherit;
}


/* ==========================================================================
   57. PROGRESS
   ========================================================================== */

progress {
    vertical-align: baseline;
}


/* ==========================================================================
   58. METER
   ========================================================================== */

meter {
    vertical-align: baseline;
}


/* ==========================================================================
   59. DIALOG
   ========================================================================== */

dialog {
    padding: 0;

    border: 0;

    background: #ffffff;
    color: inherit;
}

dialog:not([open]) {
    display: none;
}


/* ==========================================================================
   60. POPOVER
   ========================================================================== */

[popover] {
    margin: 0;

    border: 0;
}


/* ==========================================================================
   61. WEBKIT DETAILS MARKER
   ========================================================================== */

summary::-webkit-details-marker {
    display: none;
}


/* ==========================================================================
   62. SCROLLBAR BASE
   ========================================================================== */

html {
    scrollbar-color: #c8bec3 #f5f2f3;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f2f3;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #f5f2f3;
    border-radius: 999px;

    background: #c8bec3;
}

::-webkit-scrollbar-thumb:hover {
    background: #aa9da4;
}


/* ==========================================================================
   63. MOBILE SAFE AREA
   ========================================================================== */

@supports (padding: env(safe-area-inset-top)) {

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}


/* ==========================================================================
   64. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   65. HIGH CONTRAST SUPPORT
   ========================================================================== */

@media (prefers-contrast: more) {

    :focus-visible {
        outline-width: 3px;
        outline-style: solid;
        outline-color: currentColor;
    }
}


/* ==========================================================================
   66. PRINT RESET
   ========================================================================== */

@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;

        box-shadow: none !important;
        text-shadow: none !important;
    }

    html,
    body {
        min-width: 0;

        background: #ffffff !important;
        color: #000000 !important;

        font-size: 12pt;
    }

    a,
    a:visited {
        color: #000000;

        text-decoration: underline;
    }

    pre,
    blockquote {
        border: 1px solid #999999;

        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    video,
    audio,
    iframe,
    nav {
        display: none !important;
    }
}