body{
			background: #F2F3F5;
			margin: 0;
			padding: 0;
			font-family: 'Poppins', sans-serif;
		}
		.background_violet{
			background: #5556CD;
			width: 100vw;
			height: 320px;
			position: fixed;
			top: 0;
			z-index: -1;
		}
		#wave{
			width: 100vw;
			position: absolute;
			bottom: 0;
		}
		.v_main{
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			max-width:900px;
			min-width:300px;
			padding:0 32px 0 32px;
		}
		.card{
			background: white;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			padding: 26px;
			box-sizing: border-box;
		}
		#v_page_title{
			color: white;
			font-size: 20px;
			font-weight: medium;
			position: relative;
			margin-top: 70px;
			width: 100%;
			text-align: center;
		}
		#v_main_search{
			height: 44px;
			border-radius: 4px;
			border: none;
			outline: none;
			line-height: 48px;
			font-size: 14px;
			width: 100%;
			padding-left: 24px;
			font-family: 'Poppins', sans-serif;
			margin-top: 26px;
			box-sizing: border-box;
		}
		input{
			font-family:'Poppins', sans-serif;
		}
		button{
			height: 40px;
			min-width: 130px;
			background: #5556CD;
			color: white;
			outline: none;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			transition: 0.4s;
			font-family: 'Poppins', sans-serif;
		}
		#v_search_btn{
			width: 190px;
			float: right;
			margin-right: 2px;
			transform: translateY(-42px);
			background-image: url('./assets/search.png'); 
			background-position: center; 
			background-size: 24px auto;
			background-repeat: no-repeat;
		}
		#v_main_card{
			position: relative;
			margin-top: 48px;
			width: 100%;
			min-height: 500px;
		}
		.v_dr_card_horizontal_container{
			width: 100%;
			height: 290px;
			overflow-x: scroll;
			overflow-y: hidden;
		}
		.v_dr_card_horizontal_container > div > *{
			display: block;
			float: left;
			width: 177px;
			margin-right: 20px;
		}
		.v_dr_card_horizontal_container > div{
			display: flex;
		}
		.v_dr_card{
			min-height: 205px;
			max-height: 205px;
			min-width: 180px;
			background: white;
			box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			width: 177px;
			transform: translateY(37px);
			padding-top: 1px;
			transition: 0.5s;
		}
		.v_dr_card_active{
			background: #F3F3FF !important;
			box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
			height: 258px;
			max-height: 258px;
		}
		.v_dr_card_active > .v_dr_btn{
			display: none;

		}
		.v_availability_details > div{
			box-sizing: border-box;
			padding: 14px;
		}
		.v_dr_img{
			width: 102px;
			height: 102px;
			border-radius: 50%;
			background-position:center ;
			background-size: cover;
			background-repeat: no-repeat;
			position: absolute;
			left: 50%;
			margin-top: -37px;
			transform: translateX(-50%);
		}
		.v_dr_name{
			font-size: 14px;
			width: 100%;
			text-align: center;
			font-weight: medium;
			position: relative;
			margin-top: 75px;
		}
		.v_dr_details{
			color: #7E7E7E;
			font-size: 12px;
			width: 100%;
			text-align: center;
		}
		.secondary_btn{
			background: white;
			color: #5556CD;
			border: 1px solid #5556CD;
		}
		.v_dr_btn{
			position: relative;
			margin-left: 50%;
			transform: translateX(-50%) translateY(28px);
		}
		.v_dr_btn:hover{
			background: #5556CD;
			color: white;
		}
		.v_availability_details{
			position: relative;
			margin-top: 0px;
			background: #F3F3FF;
			height: 380px;
			width: 100%;
			display: grid;
			grid-template-columns: 43% auto;
		}
		.calandar_area{
			min-height: 250px;
		}
		.slot_area{
		}
		#v_confirmation_ticket{
			box-sizing: border-box;
			padding: 20px;
			padding-top: 1px;
			position: relative;
			max-width: 390px;
			min-height: 507px;
			background: #E7E7FC;
			margin-top: 98px;
			margin-left: 50%;
			transform: translateX(-50%);
		}
		.white_circle{
			position: absolute;
			top: 50%;
			height: 58px;
			width: 58px;
			border-radius: 50%;
			background: white;
			transform: translateX(-80%) translateY(-50%);
		}
		.wc_right{
			right: 0;
			transform: translateX(50%) translateY(-50%);
		}

		.v_line{
			width: 100%;
			border-bottom: 1px solid #5556CD;
			padding-top: 18px;
		}
		.slot_choosing{
			display: block;

		}
		#appointment_date{
			position: relative;
			margin-top: 40px;
			text-align: center;
			font-size: 18px;
			line-height: 24px;
		}
		#appointment_time{
			text-align: center;
			font-size: 16px;
			line-height: 26px;
		}
		#available_slots{
			position: relative;
			margin-top: 10px;
			height: 258px;
			margin-bottom: 20px;
			overflow-y: scroll;

		}
		#v_mb{
			box-sizing: border-box;
			padding: 10px;
			position: relative;
			left: 50%;
			transform: translateX(-50%);
			width: 70%;
			height: 40px;
			line-height: 40px;
			border: 1px solid #B0B0B0;
			outline: none;
		}
		.v_action{
			display: inline-block;
			position: relative;
			margin-top: 80px;
			left: 50%;
			transform: translateX(-50%);
		}
		.v_action > button{
			float: left;
			margin-left: 6px;
			margin-right: 6px;
		}
		.member_grid{
			display: grid;
			grid-template-columns: 1fr;
			position: relative;
			margin-top: 24px;
			padding: 0 10px;
		}
		.member_grid > div{
			display: grid;
			grid-template-columns: 22px auto 22px 22px;
			grid-column-gap: 10px;
			height: 38px;
			line-height: 38px;
			border-bottom: 1px solid #9E9EE4;
		}
		input[type="radio"] {
			height: 18px;
			width: 18px;
			transform: translateY(6px);
		}
		.v_chip{
			display: inline-block;
			height: 40px;
			line-height: 40px;
			width: auto;
			padding: 0 16px;
			border: 1px solid #CFCFCF;
			border-radius: 40px;
			cursor: pointer;
			transition: 0.5s;
			margin-right: 4px;
			margin-bottom: 10px;
		}
		.v_chip:hover{
			background: #5556CD;
			color: white;
		}
		.v_active_chip{
			background: #5556CD;
			color: white;
		}
		#next_slot_btn{
			float: right;
			margin-right: 10px;
		}
		#book_appointment_btn{
			float: right;

		}
		@media only screen and (max-width: 500px) {
			.v_main{
				padding: 0 16px;
			}
			#v_search_btn{
				min-width: 60px;
				width: 60px;
			}
			.card{
				padding: 14px;
				overflow-x: hidden;
			}
			.v_availability_details{
				grid-template-columns: 1fr;
				height: auto;
			}
			#v_confirmation_ticket{
				padding: 16px;
				min-width: 200px;
				width: 100%;
			}
			.white_circle{
				transform: translateX(-75%) translateY(-50%);
			}
			.wc_right{
				right: 0;
				transform: translateX(50%) translateY(-50%);
			}
			.v_action > button{
				margin-left: 4px;
				margin-right: 4px;
			}
			#available_slots{
				margin-top: 24px;
				margin-bottom: 24px;
			}
			button{
				min-width: 100px;
			}
			#next_slot_btn{
				float: none;
				margin-right: 8px;
				width: 100%;
				margin-top: 14px;
			}
			#book_appointment_btn{
				float: none;
				width: 100%;
			}
		}