.logo-wrapper .img-fluid{
    height: 75px;
}

#camera-container {
    position: relative;
    width: 100%;
    max-width: 720px;
}
/*
#video, #face-detection-canvas {
    position: absolute;
    top: 15px;
    left: 0;
    width: 100%;
    height: 90%;
    object-fit: cover;
}
*/
#video, #face-detection-canvas {
    width: 100%;
    height: auto;
}
#face-detection-canvas {
    position: absolute;
    top: 0;
    left: 0;
}

.recording {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.capture-preview {
    width: 320px;
    height: 240px;
    position: relative;
}

.captured-image {
    aspect-ratio: 4/3;
    object-fit: cover;
    width: 100%;
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
}

.tab-pane-swiw {
    padding: 10px;
}

.message {
    margin-left: 15px;
}
/*
.nav-tabs {
    border-bottom: 2px solid #ddd;
}

.nav-tabs .nav-link {
    border: 2px solid #ddd
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    border-color: #000;
}

.nav-link:focus, .nav-link:hover {
    border: #ccc;
}
*/
.timeclock-body{
    margin: 25px;
}
.timeclock-header{
    padding: 25px;
}

.timeclock-header .title{
    margin-left:25px;
}