.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;
}
}