/***************** clock in / out *****************/

.etimeclock-main {
	margin: 0 auto;
	width: 600px;
	border: 1px solid #ccc;
	background-color: #eee;
	padding: 10px;
}

.etimeclock-body {
	width: 100%;
	text-align: center;
}


.etimeclock-date {
	font-size: 18pt;
}

.etimeclock-time {
	font-size: 20pt;
}

.etimeclock-button {
	width: 230px;
	display: inline-block;
	margin-bottom: 15px;
	font-size: 18px;
	text-transform: uppercase;
}

.etimeclock-button a {
	text-decoration-color: unset !important;
	text-decoration: unset !important;
	box-shadow: unset !important;
	-webkit-box-shadow: unset !important;
	display: table-cell;
	vertical-align: middle;
	height: 100px;
	width: 300px;
	font-weight: bold;
	color: #3D3D3D;
}

.etimeclock-text {
	display: inline-block;
}

.etimeclock-input {
	border: 1px solid #ccc !important;
	width: 250px;
	height: 30px !important;
    font-size: 18pt;
}

#etimeclock-response-red {
	font-size: 18pt;
	color: #FF5555;
}

#etimeclock-response-green {
	font-size: 18pt;
	color: #3EBB9C;
}

.etimeclock-in, .etimeclock-break-out {
	margin-right: 15px;
}

@media all and ( max-width: 600px ) {
	.etimeclock-main {
		width: unset;
	}
	
	.etimeclock-button {
		width: 150px;
		margin: 0px;
	}
	
	.etimeclock-input {
		width: 200px;
	}
}


@media all and ( max-width: 400px ) {
	
	.etimeclock-text {
		width: 150px;
		display: inline-block;
	}
	
	.etimeclock-input {
		width: 150px;
	}
}