@font-faceold {
		  /* font-family:"Assistant-Regular"; */
		  /*  src: url("fonts/Assistant-SemiBold.ttf") format("truetype"); */
		}
	@font-face {
		font-family: "Open Sans", sans-serif;
		font-style: normal;
		font-variation-settings:  "wdth" 100;
		}
		
	html{
		font-family: "Open Sans", sans-serif;
		color: #333;
		}
	body{
		font-family: "Open Sans", sans-serif;
		color: #333;
		background-color: var(--bodybkgcolor);
		background-size: cover;
		background-image: var(--bodybkgimg);
	    background-size: cover;
		background-position: center;
	    background-repeat: no-repeat;
		}

	td, th {

		border:none;
		text-align: center;
	   
		vertical-align: middle !important;	
	}

	h3{
		font-weight:900;
	}

	.usekartisoption {
		color:var(--stepcolor);
	}
	
	

	.kartisitemsth {
		text-align:right;
		color:#333 !important;
		vertical-align: bottom !important; 
	}

	[dir="ltr"] .kartisitemsth {
		text-align:left;
	}



	#kdonedetails{
		margin-top:50px;
		margin-bottom:50px;
		border:1px solid #444;
		padding:40px;
	}
	@media screen and (max-width: 768px) {
		#kdonedetails{
			margin-top:30px;
			margin-bottom:20px;
			border:1px solid #444;
			padding:15px;
		}
	}
	
	
	#kpaydiv {
		width:80%;
	}
	@media screen and (max-width: 768px) {
		#kpaydiv{
			width:100%;
		}
	}
	

	.menu-card {
            transition: background-color 0.3s ease;
            cursor: pointer;
        }
        .menu-card:hover {
              background-color: rgba(0, 0, 0, 0.03);
        }

        .card-icon {
            font-size: 1.5rem;
            color: var(--stepcolor);
        }

	
	
	.kartisinstructions {
		margin-bottom:40px;
	}
	@media screen and (max-width: 768px) {
		.kartisinstructions{
			margin-bottom:10px;
		}
	}
	
	.idinstructions {
		margin-bottom:40px;
	}
	@media screen and (max-width: 768px) {
		.idinstructions{
			margin-bottom:10px;
		}
	}
	
	#maindiv {

		margin-bottom:60px;
	}

	.gx-custom {
		--bs-gutter-x: 50px;
     }

	#step3inner {
		width:80%;
		margin: 0 auto;
	}
	@media screen and (max-width: 768px) {
		#step3inner{
			width:90%;
		}
	}
	#kaddfieldsdiv {
		width:80%;
		margin: 0 auto;
	}
	@media screen and (max-width: 768px) {
		#kaddfieldsdiv{
			width:90%;
		}
	}
	#waitfields {
		width:80%;
		margin: 0 auto;
	}
	@media screen and (max-width: 768px) {
		#waitfields{
			width:90%;
		}
	}
	.lngoptions {
		display:inline-block;
		float:left;
	}
	[dir="ltr"] .lngoptions {
	  float: right;
	}

	.usericon {
		margin-top:-5px;
		margin-left:5px;
	}
	[dir="ltr"] .usericon {
		margin-left:0px;
		margin-right:5px;
	}


  #loadingOverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(126, 126, 126, 0.8);
		z-index: 9999;
		display: none;
	}

	.overlay-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: white;
	}


	.rembtnrow{
		margin-bottom:60px;
	}
	@media screen and (max-width: 768px) {
		.rembtnrow{
			margin-bottom:10px;
		}
	}
	.waitbtnrow{
		margin-bottom:60px;
	}
	@media screen and (max-width: 768px) {
		.waitbtnrow{
			margin-bottom:10px;
		}
	}

	.reminstruction{
		margin-top:40px;
	}
	@media screen and (max-width: 768px) {
		.reminstruction{
			margin-top:10px;
		}
	}
	.kartisinstruction{
		margin-top:40px;
	}
	@media screen and (max-width: 768px) {
		.kartisinstruction{
			margin-top:10px;
		}
	}
	.myappt{
		border:1px solid #b9b9b9;
		border-radius:7px;
		padding:30px;
		margin-bottom:20px;
	}
	.text-danger {
		color:darkred !important;
	}

	.no-select {
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.confirmation {
		padding:20px 80px 80px 50px;
	}
	@media screen and (max-width: 768px) {
		.confirmation {
			padding:10px 30px 30px 20px;
		}
	}

	
	 .banner {
		padding: var(--bannerpadding);
		border-radius: var(--containerradius);
		
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}
	.bannertext {
		padding: 0 2.5rem 2.5rem 2.5rem;
	}
	@media screen and (max-width: 768px) {
		.bannertext {
			padding: 0 1rem 1rem 1rem;
		}
	}
	@media screen and (max-width: 768px) {
		.banner {
			flex-direction: column;
			padding: 1rem;
			align-items: start;
			gap: 1rem;
		}
	}
	.banner-container {
		max-width: var(--widgetwidth);
		margin: 15px auto;
		border-radius: var(--containerradius);
		border: 1px solid var(--bordercolor);
		background-color: var(--bannerbkgcolor);
		color:var(--bannertextcolor)
	}

	@media screen and (max-width: 768px) {
		.banner-container {
			margin: 10px 10px;
			
		}
	}

	.actions-container {
		max-width: var(--widgetwidth);
		margin: 10px auto;
		border-radius: var(--actionsradius);
		border: 1px solid var(--bordercolor);
		background-color: var(--areabkgcolor);
		padding: 0.7rem 1.4rem;
		
		
	}

	@media screen and (max-width: 768px) {
		.actions-container {
			margin: 10px 10px;
		}
	}

	.change-container {
		max-width: var(--widgetwidth);
		margin: 10px auto;
		border-radius: var(--actionsradius);
		border: 1px solid var(--bordercolor);
		background-color: var(--areabkgcolor);
		padding: 0.7rem 1.4rem;
		
		
	}

	@media screen and (max-width: 768px) {
		.change-container {
			margin: 10px 10px;
		}
	}
	
	.banner-title {
		width: 100%;
		padding:5px;
	}
	
	.scheduling-title {
		width: 100%;
		padding:5px;
	}

	.form-title {
		width: 100%;
		padding:5px;
	}

	
	.scheduling-container {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 2rem;
        }
	@media screen and (max-width: 768px) {
		.scheduling-container {
			
			margin: 10px 10px;
			 padding: 1rem;
			
		}
	}

	.expired-container {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 2rem;
        }
	@media screen and (max-width: 768px) {
		.expired-container {
			
			margin: 10px 10px;
			 padding: 2rem 1rem;
			
		}
	}

	.reminder-container {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 2rem;
        }
	@media screen and (max-width: 768px) {
		.reminder-container {
			
			margin: 10px 10px;
			 padding: 2rem 1rem;
			
		}
	}

	.wait-container {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 3rem 4rem;
        }
	@media screen and (max-width: 768px) {
		.wait-container {
			
			margin: 10px 10px;
			 padding: 2rem;
			
		}
	}

	.auto-container {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 3rem 4rem;
        }
	@media screen and (max-width: 768px) {
		.auto-container {
			
			margin: 10px 10px;
			 padding: 2rem;
			
		}
	}

	.id-container {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 3rem 4rem;
        }
	@media screen and (max-width: 768px) {
		.id-container {
			
			margin: 10px 10px;
			 padding: 2rem;
			
		}
	}

	.kartis-container {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 3rem 4rem;
        }
	@media screen and (max-width: 768px) {
		.kartis-container {
			
			margin: 10px 10px;
			 padding: 2rem;
			
		}
	}


	.extpwdcontainer {
            max-width: var(--widgetwidth);
            margin: 15px auto;
            background-color: var(--areabkgcolor);
            border-radius: var(--containerradius);
           border: 1px solid var(--bordercolor);
            padding: 2rem 5rem;
        }
	@media screen and (max-width: 768px) {
		.extpwdcontainer {
			
			margin: 10px 10px;
			 padding: 2rem 1rem;
			
		}
	}
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            position: relative;
        }
	@media screen and (max-width: 768px) {
		.step-indicator {
			 margin-bottom: 20px;
		}
	}
        .step-indicator::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background: #e9ecef;
            z-index: 1;
        }
        .step {
            position: relative;
            z-index: 2;
            text-align: center;
            width: 120px;
        }
        .step-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: white;
            border: 1px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.5rem;
			cursor: pointer;
        }
        .step.active .step-icon {
            border-color: var(--stepcolor);
            background: var(--stepcolorlight);
            color: var(--stepcolor);
        }
        .step.completed .step-icon {
            background: var(--stepcolor);
            border-color: var(--stepcolor);
            color: white;
        }


	#optionsdiv {
		margin:0px auto ;
		width: 95%; 
	}

	@media screen and (max-width: 768px) {
		#optionsdiv {
			margin: 0;
			width: 100%; 
			
		}
	}

	@media screen and (max-width: 768px) {
		.optionscol {
			padding-left:3px;
			padding-right:3px;
			
		}
	}

	.hourfull {
		background-color:#fff;color:#ccc;border:1px solid #fff;
	}
	.hourfull:disabled {
		border:1px solid #dcdcdc;
	}


	#houroptions {
		max-height: 320px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	#houroptions::-webkit-scrollbar {
	  width: 6px;
	}

	#houroptions::-webkit-scrollbar-track {
	  background: #f1f1f1;
	}

	#houroptions::-webkit-scrollbar-thumb {
	  background: #ddd;
	  border-radius: 4px;
	  
	}

	#uselist {
		max-height: 435px;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	#uselist::-webkit-scrollbar {
	  width: 6px;
	}

	#uselist::-webkit-scrollbar-track {
	  background: #f1f1f1;
	}

	#uselist::-webkit-scrollbar-thumb {
	  background: #ddd;
	  border-radius: 4px;
	  
	}

	 .hrbtnwrapper {
		width:49%;
		display: inline-block;
		padding:5px;	
	}
	@media screen and (max-width: 768px) {
		.hrbtnwrapper {
			width:auto;
			font-size:80%;
		}
	}

	.hrbtnwrapper:first-of-type {
	  margin-top: 0;
	}
	.hrbtns {
		/* Base styles */
		width:90%;
		background-color: #F8FAFC;
		color: #162538;
		border: 1px solid #E2E8F0;
		border-radius: 4px;
		padding: 8px 12px;
		transition: all 0.2s ease;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	    padding:5px 10px;
		margin:2px 0px 3px 0px;
		font-weight:400;
		font-size: 15px;
		cursor: pointer;
		text-align: center;
	}

	/* Hover state */
	.hrbtns:hover:not(:disabled) {
		background-color: #EFF6FF;
		border-color: #BFDBFE;
		color: #1E40AF;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	/* Selected/Active state */
	.hrbtns.selected,
	.hrbtns:active:not(:disabled) {
		background-color: #F8FAFC;
		color: #162538;
		border-color: #1E40AF;
		box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
	}

	/* Disabled state */
	.hrbtns:disabled {
		background-color: #F1F5F9;
		color: #94A3B8;
		border-color: #E2E8F0;
		cursor: not-allowed;
		opacity: 0.75;
	}

	/* Focus state for accessibility */
	.hrbtns:focus {
		outline: 2px solid #2563EB;
		outline-offset: 2px;
	}


	
	


	.calendar-table {
	  width: 100%;
	  border-collapse: separate;
	  border-spacing: 2px;
	  table-layout: fixed !important;
	  background-color: var(--areabkgcolor);
	}

	.calendar-table td {
	  position: relative;
	  width: 14.28% !important; /* 100% / 7 */
	  padding-bottom: 14.28% !important; /* Makes cells square */
	  text-align: center !important; /* Centers text horizontally */
	  vertical-align: middle !important; /* Centers text vertically */
	  
	}

	.calendar-table td > span {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  display: flex !important;
	  justify-content: center !important;
	  align-items: center !important;
	}

	/* Available days */
	.calendar-table td.calavailable > span {
	  font-weight: bold;
	  color: black;
	}

	/* Unavailable days */
	.calendar-table td.caldays > span {
	  color: #000; 
	font-weight:700;
	  
	}


	/* Unavailable days */
	.calendar-table td.calunavailable > span {
	  color: #999; 
	}

	/* Selected date */
	.calendar-table td.calselected > span {
	  background-color: var(--calselectedbkgcolor); 
	  color: var(--calselectedfontcolor);
	  border-radius: 50%; 
	  width: 80%;
	  height: 80%;
	  margin: 10% auto; 
	  
	}

	/* Available date */
	.calendar-table td.calavailable > span {
	  background-color: var(--calavailablebkgcolor); 
	  color: var(--calavailablefontcolor);
	  border-radius: 50%; 
	  width: 80%;
	  height: 80%;
	  margin: 10% auto; 
	  
	}

	.calendar-table td.calavailable > span:hover {
	  background-color: var(--calavailablehovercolor); 
	  color: var(--calavailablefontcolor);
	  border-radius: 50%; 
	  width: 80%;
	  height: 80%;
	  margin: 10% auto; 
	  
	}

	/* Ensure text is centered for all states */
	.calendar-table td.calavailable,
	.calendar-table td.calunavailable,
	.calendar-table td.calselected,
	.calendar-table td.caldays {
	  text-align: center !important;
	}
	#calmidtitle{
		
		font-weight:500;

	}

	.monthbtn{
		position: relative;
		display: block;
		width: 30px;
		height: 30px;
		margin-right: auto;
		margin-left: auto;
		padding: 1px 0 0;
		 background:transparent;
		
		text-align: center;
		border: 1px solid transparent;
		border-radius: 50%;
		outline: none;
		font-size:16px !important;
		color:var(--stepcolor);
	}
	.monthbtn:hover{
		background-color:var(--stepcolorlight);
	}



	/* Remove validation icons */
	.form-control.is-invalid,
	.form-control.is-valid,
	.form-select.is-invalid,
	.form-select.is-valid {
		background-image: none !important;
	}

	/* Remove green valid state */
	.form-control.is-valid,
	.form-select.is-valid {
		border-color: #ced4da !important;
		padding-right: 0.75rem !important;
	}

	/* Invalid state styling */
	.form-control.is-invalid,
	.form-select.is-invalid {
		border-color: #a94442;
	}

	.invalid-feedback {
		margin-right:0.5rem;
		color:#a94442;
	}
	
	.fv-plugins-message-container:has([data-field="terms"]) {
		margin-right: 1px !important;
	}

	.fv-plugins-icon-container select.is-valid,
	.fv-plugins-icon-container select.is-invalid {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
		background-position: right 0.75rem center !important;
		background-repeat: no-repeat !important;
		background-size: 16px 12px !important;
	}

	[dir="ltr"] .fv-plugins-icon-container select.is-valid,
	.fv-plugins-icon-container select.is-invalid {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
		background-position: left 0.75rem center !important;
		background-repeat: no-repeat !important;
		background-size: 16px 12px !important;
	}

	[dir="rtl"] .fv-plugins-icon-container select.is-valid,
	[dir="rtl"] .fv-plugins-icon-container select.is-invalid {
		background-position: left 0.75rem center !important;
	}

	[dir="ltr"] .fv-plugins-icon-container select.is-valid,
	[dir="ltr"] .fv-plugins-icon-container select.is-invalid {
		background-position: right 0.75rem center !important;
	}

	[dir="ltr"] .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"], .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"] {
		padding-left:12px;
	}
		

	[dir="ltr"] .form-select {
	    padding: .375rem 2.25rem .375rem .75rem ;
	    background-position: right .75rem center;
	}

	.form-control.is-invalid, .was-validated .form-control:invalid {
		padding-right:0.75rem;
		padding-left:0.75rem;
	}
	.form-check-input {
		border-color:#c5c5c5;
	}
	 .form-check-input:checked {
		background-color: #027dcf !important;  
	  }

	[dir="ltr"] .form-check .form-check-input {
		float: left;
	}
	.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label {
		color:darkred;
		border-color:darkred;
	}
	.form-check-input.is-invalid, .was-validated .form-check-input:invalid {
		color:darkred;
		border-color:darkred;
	}
	
	 
	/* Label color for invalid fields */
	.form-control.is-invalid ~ label,
	.form-select.is-invalid ~ label {
		color: #a94442;
	}

   
	/* Datepicker customizations */
	.datepicker-input.in-edit:focus {
		border-color: #0d6efd;
	}

	/* Hide native date input calendar icon */
	input[type="date"]::-webkit-calendar-picker-indicator {
		display: none;
	}
	
	input[type="date"]::-webkit-inner-spin-button,
	input[type="date"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Circular date styling */
	.datepicker-cell.day {
		border-radius: 50%;
	}

	.datepicker-cell.day:not(.disabled):hover {
		background-color: #e9ecef;
		border-radius: 50%;
	}

	.datepicker-cell.day.focused:not(.selected) {
		background-color: #e9ecef;
		border-radius: 50%;
	}

	.datepicker-cell.day.selected,
	.datepicker-cell.day.selected:hover {
		background-color: #0d6efd;
		border-radius: 50%;
		font-weight: 600;
		color: white;
	}

	/* Modified today's date styling */
	.datepicker-cell.day.today:not(.selected) {
		border-radius: 50%;
		background-color: #e9ecef;
		color: #000;
		font-weight: 600;
		border: none;
	}

	.datepicker-cell.day.today.focused:not(.selected) {
		background-color: #dee2e6;
	}

	/* Focus state - default */
	.form-control:focus,
	.form-select:focus,
	.form-check-input:focus {
		border-color: #0d6efd;
		box-shadow: 0 0 0 0.02rem rgba(13, 110, 253, 0.25);
	}

	

	/* Focus state - invalid */
	.form-control.is-invalid:focus,
	.form-select.is-invalid:focus,
	.form-check-input.is-invalid:focus {
		border-color: #a94442;
		box-shadow: 0 0 0 0.02rem rgba(220, 53, 69, 0.25);
	}

	/* Label color on focus - default */
	.form-control:focus ~ label,
	.form-select:focus ~ label {
		opacity: 1;
		color: #0d6efd;
	}

	
	.form-check-input.is-invalid:focus ~ label {
		opacity: 1;
		color: darkred;
	}

	/* Label color on focus - invalid */
	.form-control.is-invalid:focus ~ label,
	.form-select.is-invalid:focus ~ label
	{
		opacity: 1;
		color: #a94442;
	}

	/* Datepicker focus state when invalid */
	.datepicker-input.in-edit.is-invalid:focus {
		border-color: #a94442;
	}
	
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	input:-webkit-autofill:active {
		-webkit-box-shadow: 0 0 0 30px white inset !important;
		-webkit-text-fill-color: inherit !important;
		transition: background-color 5000s ease-in-out 0s;
	}

	.fv-plugins-icon-container.has-error .col-form-label {
		color: #a94442 !important;
	}

	.submitbtn{
		background-color:#027dcf;
		width:100%;
	}
	.submitbtn:hover{
		background-color:#0083db;
	}
	.submitbtn:active{
		background-color:#0083db !important;
	}

	.reminderbtn{
		background-color:#027dcf;
		margin-top:5px;
		width:100%;
	}
	.reminderbtn:hover{
		background-color:#027dcf;
		color:#e7e7e7 !important
	}
	.reminderbtn:active{
		background-color:#027dcf !important;
	}

	.reminderbtn2{
		color:#0c0c0c;
		border-color:#dbdbdb;
		background-color:#f7f7f7;
		margin-top:5px;
		width:100%;
	}
	.reminderbtn2:hover{
		background-color:#f3f3f3;
		border-color:#dbdbdb;
		color:#000 !important
	}
	.reminderbtn2:active{
		background-color:#f7f7f7 !important;
		border-color:#dbdbdb;
	}

	
	.spinner-border-sm {
		animation-duration: 1.2s;
	}

	 .success-icon {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background-color: #e7f5ee;
		color: #198754;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto 2rem;
	}
	.appointment-detail {
		background-color: #f8f9fa;
		border-radius: 0.5rem;
		padding: 1rem;
		margin-bottom: 1rem;
	}
	.appointment-detail i {
		color: #0d6efd;
	}

	.confirmicon {
		color:#027dcf;
		margin-left:25px;
	}

	[dir="ltr"] .confirmicon {
		color:#027dcf;
		margin-left:0px;
		margin-right:25px;
	}

	.optionwrapper {
		background-color: #f8f9fa;
		border-radius: 0.5rem;
		padding: 1rem;
		margin-bottom: 20px;
		min-height:70px;
		 display: flex;
		justify-content: center;
		align-items: center;
	}

	.calempty{
		background-color: var(--calemptybkgcolor);
	}
	.caldate{
		background-color: var(--caldatebkgcolor);
	}
	
	.tdhighlight{
		background-color: var(--caltodaybkgcolor) !important;
	}

	.banner-logo {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	@media screen and (max-width: 768px) {
		.banner-logo {
			
			align-items: start;
			justify-content: right;
			
		}
	}

	.countdown-container {
		width: 100%;
	}

	.countdown-text {
		font-size: 16px;
		color: #666;
		margin-inline-start: 1px;
	}

	.countdown-counter {
		font-weight: bold;
		margin-inline-start: 1px;
	}

	.countdown-progress-container {
		background-color: #c9cbcd;
		border-radius: 4px;
		overflow: hidden;
	}

	.countdown-progress-bar {
		height: 4px;
		background-color: var(--stepcolor);
		transition: width 1s linear;
	}

	/* Desktop Layout */
	.countdown-layout-desktop {
		display: flex;
		align-items: center;
		width: 100%;
		gap: 5px;
	}

	.countdown-layout-desktop .countdown-progress-container {
		flex: 1;
	}

	/* Mobile Layout */
	.countdown-layout-mobile {
		width: 100%;
	}

	.countdown-layout-mobile .countdown-row {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.countdown-layout-mobile .countdown-progress-container {
		width: 100%;
	}

	#timerdiv{
		padding:10px 20px;
		background-color:#f8f9fa;
	}