:root {

}

html {
    background-color:#F3F4F6;
    font-family: -apple-system-ui, "Helvetica Neue", Helvetica, sans-serif;
}

body {
    margin: 0;
}

@font-face {
    font-family: "OCR-A";
    src: local("OCR-A"), url("Resources/OCRA.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: 'Biro';
    font-style: normal;
    font-weight: 400;
    src: local('Biro'), url('Resources/Biro.otf') format('opentype');
}

view.ticket-floating-action {
    z-index: 1;
    transition: border-bottom 300ms, box-shadow 300ms;
    border-bottom: 1px solid rgba(204, 204, 204, 0);
}

view.ticket-floating-action.overlay {
    border-bottom: 1px solid rgba(204, 204, 204, 0.55);
    background-color: rgba(243, 244, 246, 0.6);
    box-shadow: 0 3px 22px rgba(0, 0, 0, 0.16);
}

.warning-message {
    background: #ffc9c9;
    padding: 20px;
    border-radius: 5px;
    color: #7c0101;
    border: 1.5px solid #7c0101;
    margin-bottom: 15px;
}

receipt .comment {
    font-family: 'Biro', cursive, monospace;
    line-height: 21pt;
    font-size: 20pt;
    width: 80%;
    padding-top: 30pt;
    padding-bottom: 20pt;
    margin: auto;
    transform: rotate(-6deg);
    color: #477fd5;
}

ticket-review-view {
    padding-bottom: 100pt;
}

receipt {
    width: 85%;
    background-color: white;
    display: flex;
    max-width: 400px;
    box-sizing: border-box;
    margin: 24px auto auto;
    padding: 60px 30px 35px;
    font-family: "Consolas", monospace;
    font-size: 11pt;

    box-shadow: -7px 10px 33px -4px rgba(0, 0, 0, 0.2);

    -webkit-user-select: none;
    user-select: none;
}

receipt .printed-part {
    filter: url(#rugged);
}

receipt .selectable {
    -webkit-user-select: text;
    user-select: text;
}

receipt.animate {
    animation-duration: 1s;
    animation-name: slide-in;
}

@keyframes slide-in {
    from {
        translate: 0 150vh;
        scale: 150%;
    }

    to {
        translate: 0 0;
        scale: 1 1;
    }
}

receipt .stretch {
    transform: scale(1,1.5);
    transform-origin: 0;
    font-size: 17pt;
    font-weight: 1000;
    padding: 4px 0;
}

receipt .header {
}

receipt .header .logo {
    filter: grayscale(1) contrast(20);
}

receipt .header .commercial-name {
    font-weight: 1000;
    font-size: 14pt;
    align-self: center;
    text-align: center;
}
receipt .header .legal-data,
receipt .header .contact-data,
receipt .ticket-data {
    font-size: 80%;
}

receipt .header .legal-data > *,
receipt .header .contact-data > *
{
    align-self: center;
    text-align: center;
}

receipt .link {
    text-decoration: underline;
    color: #477fd5;
}

receipt .items {
    letter-spacing: -0.8px;
    display: grid;
    grid-template-columns: min-content 1fr repeat(2, min-content);
    gap: 5px 10px;
}

receipt .items .header {
    font-weight: 1000;
    justify-self: end;
}

receipt .items .expanded {
    grid-column: span 2;
    justify-self: right;
}
receipt .line {
    grid-column: span 4;
    border-top: 1px solid black;
}

receipt .line.thick {
    border-top-width: 4px;
}

receipt .items .price {
    justify-self: right;
}

receipt .items .line.first {
    margin-bottom: 2px;
}

receipt .items .line.last {
    margin-top: 2px;
}

receipt .key-value {
    justify-content: space-between;
    padding: 5px 0;
}

thinking-button {
    display: inline-block;
    padding: 16px 24px;
    background-color: rgb(0, 135, 255);
    color: white;
    border-radius: 50px;
    font-family: -apple-system-ui, sans-serif;
    text-align: center;
    transition: background-color 300ms, color 300ms, width 300ms;
}

thinking-button.thinking {
    background-color: rgb(227, 227, 227);
    color: #414141;
}

thinking-button.warning {
    background-color: #CA0A1C;
    color: rgb(255 255 255);
}

thinking-button.saved {
    background-color: #42a802 !important;
    color: rgb(255 255 255) !important;
}

named-input {
    flex: 1;
}

data-input, country-input {
    display: flex;
}

data-input input,
country-input select {
    appearance: none;
    border: 1px solid #d9d9d9;
    padding: 8px;
    font-size: 11pt;
    border-radius: 8px;
    box-shadow: 1px 1px 7px -1px #0000004F;
    outline: none;
    flex-grow: 1;
    width: 1px;
    background: white;
    transition: background-color 300ms, border 300ms;
}

data-input input:disabled,
country-input select:disabled {
    background-color: #d9d9d9;
    opacity: 0.6;
    color: black;
}

data-input input:focus,
country-input select:focus {
    border: 1px solid #0087ff;
}

named-input .title {
    font-size: smaller;
    color: #555;
    padding-bottom: 4px;
    padding-top: 8px;
    transition: color 300ms;
}

named-input:focus-within .title {
    color: #0087ff;
}

named-input.invalid .title {
    color: #cb0808!important;
}

named-input.invalid data-input input,
named-input.invalid country-input select {
    background: #ffb3b3;
    border: 1px solid #cb0808;
}

data-form-view {
    animation-duration: 1s;
    animation-name: unfold;}

@keyframes unfold {
    from {
        max-height: 0;
        opacity: 0;
    }

    to {
        max-height: 100vh;
        opacity: 1;
    }
}
view, row, column {
    display: flex;
}

view.row, row { flex-direction: row; }
view.column, column { flex-direction: column; }
view.row-reverse, row.reverse { flex-direction: row-reverse; }
view.column-reverse, column.reverse { flex-direction: column-reverse; }

image > img { width: 100%; }