html {
    cursor: url(Jeelh-Cursor-Light/Alternate\ Select\ Light.cur), auto;
}

body {
    background-color: #008080;
    overflow: hidden;
    font-family: "Courier New", monospace;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    user-select: none;
}

html.busy,
html.busy * {
    cursor: url('Jeelh-Cursor-Light/busy_m.cur'), auto !important;
}

/* Ablak */
.window {
    min-width: 420px;
    background-color: #c0c0c0;
    border: 2px solid #000;
    box-shadow:
        inset -2px -2px 0 #808080,
        inset 2px 2px 0 #ffffff;
    margin: 10px;
}

/* Címsor */
.title-bar {
    background-color: navy;
    color: white;
    padding: 5px;
    font-weight: bold;
    font-size: 14px;
}

.title-bar-btn {
    top: -15px;
    float: right;
    margin-left: 5px;
    position: relative;
    height: 15px;
    width: 18px;
    background-color: #c0c0c0;
    border: 2px outset #ffffff;
    cursor: url(Jeelh-Cursor-Light/Select\ Light.cur), auto;
    font-weight: bold;
    line-height: 0px;
    padding: 0px 1px;
}

.close {
    font-size: 19px;
}

.minimize {
    font-size: 24px;
}

.btn:active {
    border: 2px inset #808080;
}

/* Tartalom */
.content {
    padding: 15px;
}

/* Fieldset */
fieldset {
    border: 2px groove #808080;
    padding: 10px;
}

legend {
    padding: 0 5px;
}

/* Form elemek */
label {
    display: block;
    margin-top: 10px;
}

select,
input {
    margin-top: 3px;
    padding: 3px;
    border: 2px inset #808080;
    background-color: white;
    font-family: inherit;
}

.time-input {
    display: flex;
    gap: 5px;
}

#ora {
    width: 70px;
}

#perc {
    width: 70px;
}

/* Checkbox igazítás */
.checkbox {
    margin-top: 10px;
}

/* 3D gomb */
.btn {
    margin-top: 15px;
    padding: 5px 10px;
    background-color: #c0c0c0;
    border: 2px outset #ffffff;
    cursor: url(Jeelh-Cursor-Light/Select\ Light.cur), auto;
    font-weight: bold;
}

.btn:active {
    border: 2px inset #808080;
}

.printer-text h1 {
    margin: 0px;
    margin-bottom: 10px;
    font-size: 24px;
    width: 280px;
    background-color: rgb(189, 189, 189);
    padding: 5px;
    border: 3px groove;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

/* Kuka */
.trash-box {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 300px;
    height: 300px;
    background-color: #8080807e;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.trash-box.active .trash-top {
    transform: rotate(-60deg);
    transform-origin: left center;
}

.trash {
    top: 190px;
    left: 30px;
    position: absolute;
    background-color: wheat;
    height: 50px;
    width: 50px;
    float: left;
    z-index: -2;
    transform: rotate(35deg);
    border-radius: 10px;
}

.trash-top {
    position: relative;
    background: #5c5c5c;
    background: linear-gradient(180deg, rgba(92, 92, 92, 1) 0%, rgba(128, 128, 128, 1) 50%, rgba(92, 92, 92, 1) 100%);
    border: 2px black solid;
    width: 80px;
    height: 15px;
    margin-right: auto;
    margin-left: auto;
    bottom: -171px;
    left: -95px;
}

.trash-top::before {
    border-radius: 10px;
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 10px;
    border: 6px solid rgb(0, 0, 0);
    z-index: -1;
}

.trash-btm {
    position: relative;
    background: #5c5c5c;
    background: linear-gradient(90deg, rgba(92, 92, 92, 1) 0%, rgba(128, 128, 128, 1) 50%, rgba(92, 92, 92, 1) 100%);
    border: 2px black solid;
    border-radius: 0px 0px 10px 10px;
    width: 70px;
    height: 90px;
    margin-right: auto;
    margin-left: auto;
    left: -95px;
    bottom: -170px;
}

.trash-line {
    height: 75px;
    background-color: rgb(112, 112, 112);
    width: 15px;
    margin: 8px;
    float: left;
    border: 2px solid rgb(153, 151, 151);
    border-radius: 60px;
}

/* Eltűnik a jegy */
.ticket-wrapper.deleting {
    animation: trashDisappear 0.3s ease forwards;
}

@keyframes trashDisappear {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.3) rotate(-20deg);
    }
}

/* Eredmény doboz */
.inner-content {
    padding: 10px;
    border: 2px inset #808080;
    background-color: #d8d8d8;
    min-height: 60px;
    height: 220px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

.printerbox {
    padding: 10px;
    border: 2px inset #808080;
    background-color: #808080;
    min-height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
}

.inner-printerbox {
    margin: 0 auto;
    width: 320px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 10px;
    background-color: #000000;
    height: 5px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
}

.line {
    border-top: 2px solid #8a8a8a;
    border-bottom: 2px solid #8a8a8a;
    background-color: black;
    height: 4px;
    width: 320px;
}

.ticket-wrapper {
    position: absolute;
    margin-left: 50px;
    margin-right: 50px;
    top: 12px;
    height: 320px;
    width: 232px;
    pointer-events: auto;
    overflow: hidden;
    z-index: 1;
    cursor: url(Jeelh-Cursor-Light/Move\ Light.cur);
    transition: transform 0.08s ease;
    transform-origin: center center;
}

.ticket-wrapper.dragging {
    cursor: grabbing;
}

.ticket-wrapper:active {
    cursor: grabbing;
}

.ticket-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ticket {
    z-index: 10;
    border: 1px rgb(78, 78, 78) solid;
    position: absolute;
    top: -305px;
    left: 0;
    width: 230px;
    height: 300px;
    background: #aba1a1;
    background: linear-gradient(180deg, rgb(180, 177, 166) 0%, rgb(255, 255, 255) 20%, rgb(255, 255, 255) 70%, rgb(207, 204, 191) 100%);

    clip-path: polygon(
            /* Top zigzag */
            0% 3%, 2% 0%, 4% 3%, 6% 0%, 8% 3%, 10% 0%, 12% 3%, 14% 0%, 16% 3%, 18% 0%,
            20% 3%, 22% 0%, 24% 3%, 26% 0%, 28% 3%, 30% 0%, 32% 3%, 34% 0%, 36% 3%, 38% 0%,
            40% 3%, 42% 0%, 44% 3%, 46% 0%, 48% 3%, 50% 0%, 52% 3%, 54% 0%, 56% 3%, 58% 0%,
            60% 3%, 62% 0%, 64% 3%, 66% 0%, 68% 3%, 70% 0%, 72% 3%, 74% 0%, 76% 3%, 78% 0%,
            80% 3%, 82% 0%, 84% 3%, 86% 0%, 88% 3%, 90% 0%, 92% 3%, 94% 0%, 96% 3%, 98% 0%, 100% 3%,

            /* Bottom zigzag */
            100% 97%, 98% 100%, 96% 97%, 94% 100%, 92% 97%, 90% 100%, 88% 97%, 86% 100%, 84% 97%, 82% 100%,
            80% 97%, 78% 100%, 76% 97%, 74% 100%, 72% 97%, 70% 100%, 68% 97%, 66% 100%, 64% 97%, 62% 100%,
            60% 97%, 58% 100%, 56% 97%, 54% 100%, 52% 97%, 50% 100%, 48% 97%, 46% 100%, 44% 97%, 42% 100%,
            40% 97%, 38% 100%, 36% 97%, 34% 100%, 32% 97%, 30% 100%, 28% 97%, 26% 100%, 24% 97%, 22% 100%,
            20% 97%, 18% 100%, 16% 97%, 14% 100%, 12% 97%, 10% 100%, 8% 97%, 6% 100%, 4% 97%, 2% 100%, 0% 97%);
}

.ticket-images {
    position: absolute;
    left: 2px;
    bottom: 0;
    width: 220px;
    height: 70px;
}

.barcode-icon {
    position: relative;
    height: 70px;
    top: -10px;
    left: 14px;
}

.ticket-icon {
    position: absolute;
    bottom: 20px;
    right: 13px;
    width: 50px;
    height: 50px;
}

.ticket-text {
    margin-left: auto;
    margin-right: auto;
    width: 175px;
    padding: 10px;
    font-size: 14px;
    line-height: 1.4;
    border: 2px rgba(255, 0, 0, 0.664) dashed;

    margin-top: 15px;
    margin-bottom: 15px;
    height: 245px;
}

.ticket-text h3 {
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 20px;
    text-align: center;
    border-bottom: 1px black solid;
}

.ticket-text p {
    margin: 5px 0;
}

.ticket-number {
    position: absolute;
    bottom: 45%;
    right: -41px;
    font-size: 11px;
    line-height: 0px;
    font-variant: small-caps;
    font-family: quick-sand, sans-serif;
    transform: rotate(-90deg);
}

.ticket-date {
    left: -75px;
    font-size: 11px;
    line-height: 0px;
    position: absolute;
    bottom: 45%;
    transform: rotate(-90deg);
}

#ticket-cost {
    border-top: 1px black solid;
    margin-top: 5px;
    padding-top: 10px;
}

#ticket-cost-value {
    font-size: 19px;
    font-weight: bold;
    color: red;
    text-decoration: wavy underline 1px red;
}

@keyframes print {

    0%,
    6% {
        top: -305px;
    }

    /* small*/
    10%,
    16% {
        top: -260px;
    }

    /* medium*/
    20%,
    26% {
        top: -200px;
    }

    /* small*/
    30%,
    36% {
        top: -170px;
    }

    /* BIG*/
    40%,
    48% {
        top: -100px;
    }

    /* small*/
    52%,
    58% {
        top: -70px;
    }

    /* medium*/
    62%,
    70% {
        top: -30px;
    }

    /*slow*/
    85%,
    90% {
        top: -10px;
    }

    /* release */
    90%,
    100% {
        top: 10px;
    }
}

/* Progress bar animáció */
.progressbar-container {
    margin-bottom: 10px;
    width: 362px;
    height: 11px;
    background-color: #d8d8d8;
    border: 2px inset #808080;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.progress {
    margin: 2px;
    width: 0px;
    height: 4px;
    background-color: #4caf50;
    border: 2px solid #808080;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

#progress-text {
    font-size: 14px;
    margin: 0;
    margin-bottom: 5px;
    font-weight: bold;
}

fieldset {
    height: 280px;
}

@keyframes printProgress {

    0%,
    6% {
        width: 0px;
    }

    10%,
    16% {
        width: 50px;
    }

    20%,
    26% {
        width: 100px;
    }

    30%,
    36% {
        width: 140px;
    }

    40%,
    48% {
        width: 200px;
    }

    52%,
    58% {
        width: 240px;
    }

    62%,
    70% {
        width: 290px;
    }

    85%,
    100% {
        width: 354px;
    }
}