:root {
    /* Header brand logo image  */
    --brand-logo: url('../app/resources/logo-ca-dmv-white.png');
    /* Header brand logo background color */
    --brand-logo-background: transparent;
    /* Application background color */
    --app-bg-primary-color: #0079C2;

    /* Background color for Services,Branches,delay time, appointment arrival, ticket layout in waiting page, etc */
    --primary-bg-color: #DEEDF6;
    /* Text colour for Services,Branches,delay time, appointment arrival, ticket layout in waiting page, etc */
    --primary-text-color: #000000;
    /* Background color for Services,Branches,delay time when selected and ticket layout in calling page, etc */
    --secondary-bg-color: #023e78;
    /* Text color for Services,Branches,delay time when selected and ticket layout in calling page, etc */
    --secondary-text-color: #FFFFFF;
    /* Service Groups text color */
    --service-group-text-color: #175A83;
    /* 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: #000000;

    /* 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: #0079C2;

    /* Bottom button/get in line button background color */
    --get-in-line-btn-bg-color: #ffd152;
    /* Bottom button/get in line text color*/
    --get-in-line-btn-text-color: #000000;
    /* Bottom button leave the line color*/
    --leave-button-text-color: #d30000;
    /* Secondary button text color which is blue by default */
    --secondary-btn-text-color: #000000;

     --leave_button_background: white !important;
    
}


/* @#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$% */
/* CUSTOM CADMV EW */
/* @#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$%@#$% */

.bottom_button {
    background: #ffd152 !important;
    border-color: #ffd152 !important;
    color: #000000 !important;
}
.customer-phone .customer-otp-heading {
    background: white !important;
    border-radius: 10px;
}
main {
    background: white !important;
}

.customer-otp-heading, .customer-phone {
    color: #000000 !important;
}
.send_button{
    background-color: #ffd152;
}
.appointment-container {
    margin-left: 50px !important;
    margin-right: 50px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.custom.accent-bg-color {
    padding: 20px 50px !important;
}

.popup {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 120; /* Sit on top */
			left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
			filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, .25));
        }

        .popup-content {
			font-size: 16px;
			font-family: Roboto-Regular;
			border-radius: 5px;
			z-index: 120; /* Sit on top */
            background-color: #fefefe;
			max-width: 431px;
            width: calc(88.5vw + 21px);
            padding: 20px;
			border: 1px solid #888;
			margin: auto;  /* 15% from the top and centered */
            width: 95%; /* Could be more or less, depending on screen size */
			animation-name: fadein_popup;
			animation-duration: 0.5s;
			animation-timing-function: ease;
			animation-delay: 0s;
			animation-iteration-count: 1;
			animation-direction: normal;
			animation-fill-mode: none;
/*			animation-play-state: running;
			animation-timeline: auto;
			animation-range-start: normal;
			animation-range-end: normal;*/
			}

			@keyframes fadein_popup {
				from{margin: -30px auto; opacity: 0;}
				to{margin: 0% auto; opacity: 1;}
			}
        
		.popup-top-wrapper {
			padding 16px 16px 0;
			display: flex;
		    align-items: center;
			overflow: hidden; /* will contain if #first is longer than #second */
		}
		.popup-top-icon {
			float:left; /* add this */
		}
		.popup-top-content {
			
			padding: 0 10px;
			overflow: hidden; /* if you don't want #second to wrap below #first */
		}
		
		li {
			padding-bottom: 12px;
		}
		
		.popup-bottom-wrapper {
			padding 16px 16px 0;
			display: flex;
			justify-content: flex-end;
		    align-items: center;
		}
		.popup-bottom-buttons {
			float:left; /* add this */
		}
		.popup-button{
			border-radius: 100px;
			width: 100px;
			font-family: Roboto-Regular;
			padding: 7px;
			background: white;
			height: 44px;
			border: none;
			color: #323232;
			font-weight: 500;
			font-size: 16px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.popup-button-primary {
			background: #DCF7CF;
			width: 150px;
		}