@media (max-width: 420px) {
    /** Really small screen devices */
    .arrow-green, .arrow-blue {
        display: none;
    }
    /**
    .place-logo, .queue-logo, .ticket-logo {
        clip-path: inset(0px 38px 0px 0px);
    }
    */
    .d-xs { display: block; }
    .d-xs-none { display: none; }
    .rounded-pill { border-radius: 18px!important; }
}

@media (min-width: 421px) and (max-width: 576px) {
    .d-xs { display: none; }
}

@media (max-width: 576px) {
    .take-ticket-ui .left-side, .ticket-ui .left-side {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
    .take-ticket-ui .right-side, .ticket-ui .right-side, .access-code-ui .right-side {
        border: none;
    }
}

@media (min-width: 576px) {
    .d-xs { display: none; }
    .take-ticket-ui .left-side, .ticket-ui .left-side {
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
    .take-ticket-ui .right-side, .ticket-ui .right-side, .access-code-ui .right-side {
        border: none;
    }
}

@media (min-width: 768px) {
    .d-xs { display: none; }
    .take-ticket-ui .left-side, .ticket-ui .left-side {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
    .take-ticket-ui .right-side, .ticket-ui .right-side, .access-code-ui .right-side {
        border-left: dashed;
        border-width: 1px;
    }
    #fetchingContent { width: 40%; }
}

@media (min-width: 994px) {
    .d-xs { display: none; }
    #fetchingContent { width: 30%; }
}

@media (min-width: 1140px) {
    .d-xs { display: none; }
    #fetchingContent { width: 20%; }
}