@import "../bootstrap/variables";

.ticket-details-card {
    width: 440px;

    @media (max-width: $screen-xs-max) {
        width: 100%;
    }

    &__mask {
        position: absolute;
        inset: 8px;
        bottom: -8px;
        border-radius: 24px;
        opacity: 0.5;
        background-color: var(--white);
        z-index: 1;
    }

    &__thumbnail {
        width: 100%;
        height: 224px;
    }

    &__details {
        position: relative;

        .circle-1, .circle-2 {
            position: absolute;
            top: -12px;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: var(--gray);
            z-index: 2;
        }

        .circle-1 {
            left: -28px;
        }

        .circle-2 {
            right: -28px;
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 12px;
            right: 12px;
            border-top: 1px dashed var(--gray-200);
            z-index: 2;
        }
    }
}

@media print {
    #appTopFloatingBarArea,
    #appHeaderArea,
    #appFooterArea,
    #appBottomFloatingBarArea {
        display: none !important;
    }

}