:root {
    /* Header brand logo image  */
    --brand-logo: url('../app/resources/qmLogo.png');
    /* Header brand logo background color */
    --brand-logo-background: transparent;
    /* Application background color */
    --app-bg-primary-color: #000000;

    /* Background color for Services,Branches,delay time, appointment arrival, ticket layout in waiting page, etc */
    --primary-bg-color: #FF7900;
    /* Text colour for Services,Branches,delay time, appointment arrival, ticket layout in waiting page, etc */
    --primary-text-color: #ffffff;
    /* Background color for Services,Branches,delay time when selected and ticket layout in calling page, etc */
    --secondary-bg-color: #ffffff;
    /* Text color for Services,Branches,delay time when selected and ticket layout in calling page, etc */
    --secondary-text-color: #000000;
    /* Service Groups text color */
    --service-group-text-color: #ffffff;
    /* Service group seperator line color */
    --service-group-line-color: rgba(0, 0, 0, 0.2);


    /* Text color used throughout the application in common areas which are not specific to any UI component.  */
    --general-text-color: #ffffff;

    /* Footer logo */
    --footer-logo: url('../app/resources/brand_logo.png');
    /* Footer text */
    --footer-text-color: #000000;

    /* Privacy & Cookie concent button text color*/
    --pop-up-button-text-color: #000000;

    /* Bottom button/get in line button background color */
    --get-in-line-btn-bg-color: #FF7900;
    /* Bottom button/get in line text color*/
    --get-in-line-btn-text-color: #FFFFFF;
    /* Bottom button leave the line color*/
    --leave-button-text-color: #FF7900;
    /* Secondary button text color which is blue by default */
    --secondary-btn-text-color: rgba(0, 0, 0, 0.9);

    /*custom parameters*/
    /* Bottom button leave the line color*/
    --queue-component-background: #ff7700c7 !important;

    .custom.logo-bg-color {
    background: var(--brand-logo-background)!important;
    margin: 40px !important;
    }

    .button-container {
        position: relative;
        margin: -16px 0 5px !important;
    }

    .ticket_branch {
        display: none;
        position: relative;
        font-family: Roboto-Medium;
        font-size: 20px !important;
        letter-spacing: .2;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin: 1em auto !important;
    }

    .ticket_nmbr {
        line-height: 100%;
        margin-bottom: 32px;
        font-weight: 700;
        font-family: Roboto-Medium;
        color: #185982;
    }

    .ticket-size.fadeIn.ticket-size-4.ticket_nmbr {
        font-size: 100px !important;
    }

    body > app-root > qm-frame-layout > div.bg.full-with > main > app-ticket-info-container > div.inner-margin-separator > div.row > app-queue-container > div > div > h1 > div > svg > path{
        fill: #FF7900 !important;
    }

    .service_name > span {
        font-size: 20px !important;     
    }

    .service-delay-description {
        color: #FFFFFF;
    }

    body > app-root > qm-frame-layout > div.bg.full-with > main > delay-services-container > div > div.table-child-footer > div > div > button:nth-child(2){
        margin-top: 15px !important;     
        color: var(--leave-button-text-color) !important;
        background-color: var(--app-bg-primary-color) !important;
        border: 2px solid var(--leave-button-text-color) !important;
        line-height: 1em;đ
    }

    .ticket-service-name {
        font-weight: 500 !important;
    }

}