html,
body {
  height: 100%;
}

body {
  /* display: flex; */
  align-items: center;
  padding-top: 10px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
}
.modal-dialog {pointer-events: all;}

.bg-secondary {background-color: #ccc!important;}

.clock-in-style {width: 120px;     height: 120px; border: 12px solid #0f70b7; background-color:#fff;    padding: 0px; }
.clock-in-style span { display: block;     border-radius: 50%!important;     width: 90px;    height: 90px;
    background: linear-gradient(to right, #ccc, #fff);    border: 5px solid #e5e5e5;margin: 3px; font-size: 1rem;     font-weight: bold;}
.clock-in-style span img {width: 100%;border-radius: 50%!important;}
.clock-in-style:hover {width: 120px;  height: 120px; border: 12px solid #0e65a5; background-color:#fff;    padding: 0px;}

.clock-in-style.clock-style2 { line-height: 25x; border: 12px solid #ff5f1f;}
.clock-in-style.clock-style2 svg { font-size: 2rem; color:#ef5a1e;margin-top: 5px;}
.clock-in-style.clock-style2 span p { margin-bottom: 0px; ; color:#ef5a1e}
.clock-in-style.clock-style2:hover {border: 12px solid #ef5a1e; }

.clock-in-style.clock-style3 { line-height: 80px; border: 12px solid #ff0000;}
.clock-in-style.clock-style3 span p{ margin-bottom: 0px; ; color:#ef0404}
.clock-in-style.clock-style3:hover {border: 12px solid #ef0404 }

.clock-in-style.clock-style4 { line-height: 25px; border: 12px solid #016f19;}
.clock-in-style.clock-style4 span p{ margin-bottom: 0px; ; color:#016f19}
.clock-in-style.clock-style4 span p:first-child {margin-top: 15px;}
.clock-in-style.clock-style4:hover {border: 12px solid #035a16 }

.clock-in-style.clock-style12 { line-height: 25x; border: 12px solid #016f19;}
.clock-in-style.clock-style12 svg { font-size: 2rem; color:#016f19;margin-top: 5px;}
.clock-in-style.clock-style12 span p { margin-bottom: 0px; ; color:#016f19}
.clock-in-style.clock-style12:hover {border: 12px solid #016f19; }