/* Mobile screens - targeting devices with a max width of 767px */
@media ( max-width : 767px) {
}
/* Mobile screens - targeting devices with a max width of 767px */
@media (max-width : 767px) {
#complaintform label {
margin-top: 10px;
}
}
}
.form-row {
.form-row {
margin-bottom: 20px;
}
}
.form-step {
.form-step {
display: none;
}
}
.form-step.active {
.form-step.active {
display: block;
}
}
.container {
.container {
max-width: 100%;
}
}
/*css for step 3*/
.complaint-icons {
/*css for step 3*/
.complaint-icons {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
}
.complaint-icon {
.complaint-icon {
text-align: center;
cursor: pointer;
}
}
.complaint-icon img {
.complaint-icon img {
width: 50px;
height: 50px;
}
}
.complaint-fields {
.complaint-fields {
display: none;
}
}
.complaint-fields.active {
.complaint-fields.active {
display: block;
}
}
/*for radio button style*/
.radio-group {
/*for radio button style*/
.radio-group {
display: flex;
align-items: center;
/* Ensures all items are aligned to the center */
}
}
.radio-item {
.radio-item {
display: flex;
align-items: center;
margin-right: 20px;
/* Adds space between each radio item */
}
}
.radio-item input[type="radio"] {
.radio-item input[type="radio"] {
margin-right: 10px;
/* Adds space between the radio button and its label */
vertical-align: middle;
/* Ensures vertical alignment */
}
}
.radio-item label {
.radio-item label {
margin: 0;
/* Removes any default margins that might affect alignment */
}
}
.back-button {
.back-button {
background: none;
border: none;
color: #000;
@ -96,17 +98,17 @@
padding: 0;
margin-right: auto;
/* Align the button to the left */
}
}
.title {
.title {
text-align: center;
flex-grow: 1;
font-size: 24px;
font-weight: bold;
margin: 0;
}
}
/*css for map in step2*/
/*css for map in step2*/
#googleMap {
height: 300px;
@ -116,7 +118,7 @@
max-width: 100%;
}
#pac-input {
/* #pac-input {
position: absolute;
top: 10px;
left: 50%;
@ -127,7 +129,7 @@
border: 1px solid #ccc;
background-color: white;
border-radius: 4px;
}
} */
/* Media query for mobile devices */
@ -138,7 +140,7 @@
}
}
#search-container {
/* #search-container {
position: absolute;
top: 10px;
left: 50%;
@ -149,8 +151,7 @@
background-color: white;
border-radius: 4px;
padding: 0;
/* Removed extra padding to match the input width */
}
}*/
#search-box {
width: 100%;
@ -164,7 +165,7 @@
/* Makes sure padding is considered in width */
}
#suggestions {
/* #suggestions {
border: 1px solid #ccc;
border-radius: 4px;
max-height: 200px;
@ -173,9 +174,7 @@
background-color: white;
display: none;
width: 100%;
/* Matches the width of the container and input */
box-sizing: border-box;
/* Ensures the width includes borders and padding */
}
#suggestions ul {
@ -191,15 +190,16 @@
#suggestions ul li:hover {
background-color: #f0f0f0;
}
} */
#reader-btn, #invertColorBtn {
#reader-btn,
#invertColorBtn {
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
}
}
.loader {
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
@ -217,7 +217,7 @@
/* Ensure it's on top of everything */
display: none;
/* Initially hidden */
}
}
.row {
display: flex;
@ -246,18 +246,17 @@
border: 1px solid #ccc;
}
@keyframes spin { 0%
{
@keyframes spin {
0% {
transform: rotate(0deg);
}
}
100%
{
transform:rotate(360deg);
}
}
100% {
transform: rotate(360deg);
}
}
#snackbar {
#snackbar {
visibility: hidden;
min-width: 250px;
background-color: #333;
@ -280,54 +279,131 @@ transform:rotate(360deg);
}
@-webkit-keyframes fadein {from { bottom:0;
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
}
to {
to {
bottom: 30px;
opacity: 1;
}
}
}
@keyframes fadein {from { bottom:0;
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
}
to {
to {
bottom: 30px;
opacity: 1;
}
}
}
}
@-webkit-keyframes fadeout {from { bottom:30px;
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
}
to {
to {
bottom: 0;
opacity: 0;
}
}
}
}
@keyframes fadeout {from { bottom:30px;
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
}
to {
to {
bottom: 0;
opacity: 0;
}
}
}
}
.input-error {
.input-error {
border: 1px solid red !important;
}
}
#pac-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 15px;
box-sizing: border-box;
}
#suggestions {
width: 100%;
display: none;
background: #fff;
border: 1px solid #ccc;
border-top: none;
max-height: 220px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
#suggestions ul {
margin: 0;
padding: 0;
list-style: none;
}
#suggestions li {
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
#suggestions li:hover {
background: #f5f5f5;
}
#search-container {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 420px;
z-index: 1000;
}
/*for snack bar*/
/*for snack bar*/
</style>
<body>
<divid="snackbar"></div>
<divid="snackbar"></div>
<!--[if lt IE 8]>
<pclass="browserupgrade">You are using an <strong>outdated</strong> browser. Please <ahref="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
/* Mobile screens - targeting devices with a max width of 767px */
@media ( max-width : 767px) {
}
/* Mobile screens - targeting devices with a max width of 767px */
@media (max-width : 767px) {
#complaintform label {
margin-top: 10px;
}
}
}
.form-row {
.form-row {
margin-bottom: 20px;
}
}
.form-step {
.form-step {
display: none;
}
}
.form-step.active {
.form-step.active {
display: block;
}
}
.container {
.container {
max-width: 100%;
}
}
/*css for step 3*/
.complaint-icons {
/*css for step 3*/
.complaint-icons {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
}
.complaint-icon {
.complaint-icon {
text-align: center;
cursor: pointer;
}
}
.complaint-icon img {
.complaint-icon img {
width: 50px;
height: 50px;
}
}
.complaint-fields {
.complaint-fields {
display: none;
}
}
.complaint-fields.active {
.complaint-fields.active {
display: block;
}
}
/*for radio button style*/
.radio-group {
/*for radio button style*/
.radio-group {
display: flex;
align-items: center;
/* Ensures all items are aligned to the center */
}
}
.radio-item {
.radio-item {
display: flex;
align-items: center;
margin-right: 20px;
/* Adds space between each radio item */
}
}
.radio-item input[type="radio"] {
.radio-item input[type="radio"] {
margin-right: 10px;
/* Adds space between the radio button and its label */
vertical-align: middle;
/* Ensures vertical alignment */
}
}
.radio-item label {
.radio-item label {
margin: 0;
/* Removes any default margins that might affect alignment */
}
}
.back-button {
.back-button {
background: none;
border: none;
color: #000;
@ -96,17 +98,17 @@
padding: 0;
margin-right: auto;
/* Align the button to the left */
}
}
.title {
.title {
text-align: center;
flex-grow: 1;
font-size: 24px;
font-weight: bold;
margin: 0;
}
}
/*css for map in step2*/
/*css for map in step2*/
#googleMap {
height: 300px;
@ -116,7 +118,7 @@
max-width: 100%;
}
#pac-input {
/* #pac-input {
position: absolute;
top: 10px;
left: 50%;
@ -127,7 +129,7 @@
border: 1px solid #ccc;
background-color: white;
border-radius: 4px;
}
} */
/* Media query for mobile devices */
@ -138,7 +140,7 @@
}
}
#search-container {
/* #search-container {
position: absolute;
top: 10px;
left: 50%;
@ -149,7 +151,18 @@
background-color: white;
border-radius: 4px;
padding: 0;
/* Removed extra padding to match the input width */
} */
#search-container {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 420px;
z-index: 1000;
}
#search-box {
@ -164,18 +177,17 @@
/* Makes sure padding is considered in width */
}
#suggestions {
/* #suggestions {
border: 1px solid #ccc;
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
margin-top: 5px;
background-color: white;
display: none;
width: 100%;
/* Matches the width of the container and input */
box-sizing: border-box;
/* Ensures the width includes borders and padding */
}
#suggestions ul {
@ -191,15 +203,16 @@
#suggestions ul li:hover {
background-color: #f0f0f0;
}
} */
#reader-btn, #invertColorBtn {
#reader-btn,
#invertColorBtn {
padding: 5px 10px;
font-size: 14px;
cursor: pointer;
}
}
.loader {
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #3498db;
@ -217,7 +230,7 @@
/* Ensure it's on top of everything */
display: none;
/* Initially hidden */
}
}
.row {
display: flex;
@ -246,18 +259,17 @@
border: 1px solid #ccc;
}
@keyframes spin { 0%
{
@keyframes spin {
0% {
transform: rotate(0deg);
}
}
100%
{
transform:rotate(360deg);
}
}
100% {
transform: rotate(360deg);
}
}
#snackbar {
#snackbar {
visibility: hidden;
min-width: 250px;
background-color: #333;
@ -280,54 +292,119 @@ transform:rotate(360deg);
}
@-webkit-keyframes fadein {from { bottom:0;
@-webkit-keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
}
to {
to {
bottom: 30px;
opacity: 1;
}
}
}
}
@keyframes fadein {from { bottom:0;
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
}
to {
to {
bottom: 30px;
opacity: 1;
}
}
}
}
@-webkit-keyframes fadeout {from { bottom:30px;
@-webkit-keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
}
to {
to {
bottom: 0;
opacity: 0;
}
}
}
@keyframes fadeout {from { bottom:30px;
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
}
to {
to {
bottom: 0;
opacity: 0;
}
}
}
}
.input-error {
.input-error {
border: 1px solid red !important;
}
}
#pac-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 15px;
box-sizing: border-box;
}
#suggestions {
width: 100%;
display: none;
background: #fff;
border: 1px solid #ccc;
border-top: none;
max-height: 220px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
#suggestions ul {
margin: 0;
padding: 0;
list-style: none;
}
#suggestions li {
padding: 10px 12px;
cursor: pointer;
/*for snack bar*/
border-bottom: 1px solid #eee;
}
#suggestions li:hover {
background: #f5f5f5;
}
/*for snack bar*/
</style>
<body>
<divid="snackbar"></div>
<divid="snackbar"></div>
<!--[if lt IE 8]>
<pclass="browserupgrade">You are using an <strong>outdated</strong> browser. Please <ahref="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
nextStep(); // Skip duplicate check if mobile not shared
return;
} */
@ -2142,4 +2376,5 @@ to {
/* html: `Your complaint has been submitted successfully. Your Complaint Number is <strong>${complaintNumber}</strong>. It will be sent to your mobile number.`, */
KaNi-04
2 months ago