body {
    background: #2b668d;

}

#PINform input:focus,
#PINform select:focus,
#PINform textarea:focus,
#PINform button:focus {
    outline: none;
}

#PINform {

    background: #ededed;
    border-radius: 25px;
    position: absolute;
    width: 300px;
    height: 400px;
    left: 50%;
    margin-left: -180px;
    top: 50%;
    margin-top: -215px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
}

.white-box-form {
    background: #ededed;
    border-radius: 25px;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 25%;
    margin-left: -180px;
    top: 50%;
    margin-top: -215px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
}

.rbr {
    border-radius: 25px 0px 0px 25px;

}

.rbl {
    border-radius: 0px 25px 25px 0px;

}

.interface {
    top: 25%;
    left: 25%;
}

.white-box-form-side {
    transition: all 0.3s ease;
    opacity: 0.0;
    background: #b4b3b3;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 490px;
    margin-left: 350px;
    top: 50%;
    margin-top: -215px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
}

#back-card {

    background: #ededed;
    border-radius: 25px;
    position: absolute;
    width: 300px;
    height: 400px;
    left: 50%;
    margin-left: -180px;
    top: 50%;
    margin-top: -215px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
}

#PINbox {
    background: #ededed;
    margin: 3.5%;
    width: 92%;
    font-size: 5em;
    text-align: center;
    border: 0px solid #d5d5d5;

}

.white-box {
    background: #ededed;
    margin: 3.5%;
    width: 92%;
    font-size: 5em;
    text-align: center;
    border: 0px solid #d5d5d5;

}

.PINbutton {
    background: #dad8d8;
    color: #7e7e7e;
    border: none;
    background: linear-gradient(to bottom, #fafafa, #eaeaea);
    -webkit-box-shadow: 0px 2px 2px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 2px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px -0px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    font-size: 1.5em;
    text-align: center;
    width: 60px;
    height: 60px;
    margin: 7px 20px;
    padding: 0;
}

.clear,
.enter {
    font-size: 1em;
}

.PINbutton:hover {
    box-shadow: #506CE8 0 0 1px 1px;
}

.PINbutton:active {
    background: #506CE8;
    color: #fff;
}

.clear:hover {
    box-shadow: #ff3c41 0 0 1px 1px;
}

.clear:active {
    background: #ff3c41;
    color: #fff;
}

.enter:hover {
    box-shadow: #47cf73 0 0 1px 1px;
}

.enter:active {
    background: #47cf73;
    color: #fff;
}

.shadow {
    -webkit-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
}

/* The flip card container - set the width and height to whatever you want.
 We have added the border property to demonstrate that the flip itself goes 
 out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: transparent;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-it {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
/*
.flip-card-front {


}
*/
#clock {
	position: absolute;
	top: 10%;
	text-align: center;
	width: 100%;
	height: 100%;

}
/* Style the back side */
.flip-card-back h3 {
	font-size: 40;
}
.flip-card-back {
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

.btn-check-in {
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-family: Arial Black;
    font-size: 25px;
    border-radius: 25px;
    border: solid 1px #3866a3;
    background: linear-gradient(180deg, #65ee63 5%, #0d732c 100%);
    text-shadow: 1px 1px 0px #528ecc;
    box-shadow: inset 1px 1px 0px 0px #bbdaf7;
}

.btn-check-in:hover {
    background: linear-gradient(180deg, #0d732c 5%, #65ee63 100%);
}

.btn-check-in:active {
    position: relative;
    top: 1px;
}

.btn-check-in-text {
    padding: 18px 31px;
    float: left;
}

.btn-check-in-icon {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: rgba(0, 0, 0, 0.14) -1px 0px 0px inset;
    border-radius: 25px 0 0 25px;
    padding: 18px 10px;
    float: left;
}

.btn-check-out {
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-family: Arial Black;
    font-size: 25px;
    border-radius: 25px;
    border: solid 1px #3866a3;
    background: linear-gradient(180deg, #6563ee 5%, #0d1773 100%);
    text-shadow: 1px 1px 0px #528ecc;
    box-shadow: inset 1px 1px 0px 0px #bbdaf7;
}

.btn-check-out:hover {
    background: linear-gradient(180deg, #0d1773 5%, #6563ee 100%);
}

.btn-check-out:active {
    position: relative;
    top: 1px;
}

.btn-check-out-text {
    padding: 18px 31px;
    float: left;
}

.btn-check-out-icon {
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: rgba(0, 0, 0, 0.14) -1px 0px 0px inset;
    border-radius: 25px 0 0 25px;
    padding: 18px 10px;
    float: left;
}