body {
    background: #282828;
}
.clock {
    width: 18rem;
    height: 18rem;
    position: relative;
    padding: 2rem;
    border: 7px solid #282828;
    box-shadow: -4px -4px 10px rgba(67,67,67,0.5),
                    inset 4px 4px 10px rgba(0,0,0,0.5),
                    inset -4px -4px 10px rgba(67,67,67,0.5),
                    4px 4px 10px rgba(0,0,0,0.3);
    border-radius: 50%;
    margin: 35px auto 60px auto;
    
}

.outer-clock-face {
position: relative;
background: #282828;
overflow: hidden;
width: 100%;
height: 100%;
border-radius: 100%;
}

.outer-clock-face::after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg)
}

.outer-clock-face::after,
.outer-clock-face::before,
.outer-clock-face .marking{
content: '';
position: absolute;
width: 5px;
height: 100%;
background: #1df52f;
z-index: 0;
left: 49%;
}
.outer-clock-face .marking {
background: #bdbdcb;
width: 3px;
}

.outer-clock-face .marking.marking-one {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg)
}

.outer-clock-face .marking.marking-two {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg)
}

.outer-clock-face .marking.marking-three {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
transform: rotate(120deg)
}

.outer-clock-face .marking.marking-four {
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
transform: rotate(150deg)
}

.inner-clock-face {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
background: #282828;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
z-index: 1;
}

.inner-clock-face::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 16px;
border-radius: 18px;
margin-left: -9px;
margin-top: -6px;
background: #4d4b63;
z-index: 11;
}

.hand {
width: 50%;
right: 50%;
height: 6px;
background: #61afff;
position: absolute;
top: 50%;
border-radius: 6px;
transform-origin: 100%;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}

.hand.hour-hand {
width: 30%;
z-index: 3;
}

.hand.min-hand {
height: 3px;
z-index: 10;
width: 40%;
}

.hand.second-hand {
background: #ee791a;
width: 45%;
height: 2px;
}

.log-container {
    box-shadow: 10px 15px 10px rgba(0, 0, 0, 0.4);
    background-color: #F5F5F5;
    padding: 20px;
    border-radius: 5px;
    margin:20px;
    max-height: 750px;
    height: 750px;            
    overflow: hidden;
    
}

.logs {
    position: relative;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    /* margin-top: 10%; */
    max-height: 640px;
    overflow: hidden;
    width: 100%;
}
.logs2 {
    overflow: hidden;
    font-size: 15px;
}

.alert.alert-warning {
    font-size: smaller;
    background-color: pink;
    padding: 5px;
    color: #833030;
}
.alert.alert-success {
    font-size: smaller;
    background-color: #c1eef1;
    padding: 5px;
    color: #46a9b1;
}
a#reader__dashboard_section_swaplink {
    cursor: pointer;
}
.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 140s linear 0s infinite;
}

.marquee:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        top: 20em
    }
    100% {
        top: -300em
    }
}
.login {
    box-shadow: 10px 15px 10px rgba(0, 0, 0, 0.4);
    /* position: absolute; */
    background: #fff;
    /* right: 21%; */
    /* top: 66%; */
    border-radius: 6px;
    font-weight: bold;
}
.input-userpass{
    padding: 5px;
    border:solid;
    border-width: 1px;
    border-color: gray;
    border-radius: 0.5rem;

}
.btn{
    margin-top: 10px;
    padding:8px 35px 8px 35px;
    background-color: #696868;
    font-weight: bold;
    border-radius: 4px;
    border: none;
    color:whitesmoke;
    cursor: pointer;
    transition: background-color 0.20s, color 0.20s, box-shadow 0.20s;
}
.btn:hover{
    color:whitesmoke;
    background: #238DD5;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
    
}
.manual{
    box-shadow: 10px 15px 10px rgba(0, 0, 0, 0.4);
}