* {
	box-sizing: border-box;
}

body {
	font-family: "Chakra Petch", Arial, Helvetica, sans-serif;
	font-size: 16px;
}

input,
a,
h1,
h2,
h3,
h4,
h5,
h6,
p {
	font-family: "Chakra Petch", Arial, Helvetica, sans-serif;
}

input[type="email"],
input[type="number"],
input[type="text"],
input[type="password"] {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
}

label {
	/* padding: 12px 12px 12px 0; */
	display: block;
}

input[type="submit"] {
	background-color: #04aa6d;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	/* float: right; */
}

input[type="submit"]:hover {
	background-color: #45a049;
}

.mot-section {
	padding: 30px 0;
}

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	/* border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px; */
}

.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	padding: 20px 0;
}

/* .col-25 {
	float: left;
	width: 25%;
	margin-top: 6px;
}

.col-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
} */

/* Clear floats after the columns */
/* .row:after {
	content: "";
	display: table;
	clear: both;
} */

.submit-section {
	float: center;
}

input[type="email"],
input[type="number"],
input[type="text"],
input[type="password"] {
	width: 20%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

input[type="submit"] {
	/* width: 10%; */
	background-color: #4caf50;
	color: white;
	padding: 14px 20px;
	margin: 8px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

input[type="submit"]:hover {
	background-color: #45a049;
}

.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	font-size: 14px;
}

.table > tbody > tr:nth-of-type(odd) {
	background-color: #f9f9f9;
}

.table > tbody > tr > td {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
	border-top: 1px solid #ddd;
	color: #86888a;
	overflow: hidden;
	max-width: 400px;
	word-wrap: break-word;
}

.table > tbody > tr > th {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
	border-top: 1px solid #ddd;
	overflow: hidden;
	max-width: 400px;
	word-wrap: break-word;
	text-align: left;
}

.btn {
	background-color: #04aa6d;
	color: white;
	padding: 13px 62px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	margin: 10px 0;
}

.btn:hover {
	background-color: #54d3a3;
}

.add-vehicle-form {
	width: 375px;
	display: block;
	text-align: center;
}

.add-vehicle-form label{
	font-weight: 600;
	margin-bottom: 10px;
	text-align: left;
}

.add-vehicle-form  input {
	width: 100%;
	margin: 0;
}

.add-vehicle-form  .input-field {
margin-bottom: 20px;
}

.add-vehicle-form  label input[type="submit"] {
	width: 100%;
	text-align: center;
	margin: 0;
	margin-top: 20px;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media screen and (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media screen and (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media screen and (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media screen and (max-width: 767px) {
	input[type="number"],
	input[type="email"],
	input[type="text"],
input[type="password"] {
		width: 100%;
	}

	/* .col-25,
	.col-75, */
	input[type="submit"],
	.btn {
		width: 100%;
		margin: 0 !important;
		margin-bottom: 10px !important;
		text-align: center;
	}

	.add-vehicle-form {
		width: 100%;
	}
}