/********** LOCK SCREEN **********/
/*
    patternLock.js v 0.5.0
    Author: Sudhanshu Yadav
    Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
    Demo and documentaion on: ignitersworld.com/lab/patternLock.html
*/
.patt-holder{background:#3382c0;-ms-touch-action:none}.patt-wrap{position:relative;cursor:pointer}.patt-wrap li,.patt-wrap ul{list-style:none;margin:0;padding:0}.patt-circ{position:relative;float:left;box-sizing:border-box;-moz-box-sizing:border-box}.patt-circ.hovered{border:3px solid #090}.patt-error .patt-circ.hovered{border:3px solid #BA1B26}.patt-hidden .patt-circ.hovered{border:0}.patt-dots,.patt-lines{border-radius:5px;height:10px;position:absolute}.patt-dots{background:#FFF;width:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px}.patt-lines{background:rgba(255,255,255,.7);transform-origin:5px 5px;-ms-transform-origin:5px 5px;-webkit-transform-origin:5px 5px}.patt-hidden .patt-lines{display:none}

body {
  font-family: 'Muli', sans-serif;
  /*line-height: 35px;*/
  color: #E8E8E8;
}
.thin {
  font-weight: 200;
}
.light {
  font-weight: 300;
}
.regular {
  font-weight: 400;
}
.bold {
  font-weight: 600;
}
.extraBold {
  font-weight: 700;
}
.black {
  font-weight: 800;
}
.extraBlack {
  font-weight: 900;
}

.wrapper{
	height: inherit;
	width: inherit;
}
.fixed{
}
.scrolled{
  position: relative;
  margin-top: 20vh;
}
.topinfo{
  margin-left: auto;
  width: inherit;
  height: 30px;
  padding: 15px 20px;
  font-size: 20px;
  color: #D3D3D3;
  border-bottom: none;
  z-index: 10;
  position: absolute;
  min-width: 240px;
}
.topinfo div {
  float: right;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 0 0 8px;
  font-weight: 600;
}



#datum {
  float:left;
  position: absolute;
  z-index: 10;
  text-align: center;
  width:inherit;
  min-width: 250px;
}



.datum{
  margin: auto;
}
.datum .time{
  font-size: 50px;
}
.datum .date{
  font-size: 15px;
}

.alert{
  margin-top: 50px;
  height: 100%;
  width: 100%;
  background-color: rgb(208,208,208,0.8);
  cursor: pointer;
  animation-duration: 0.4s;
  margin-bottom: 40px;
}
.alert p{
  font-size: 15px;
  margin-left: 20px;
  margin-top: -15px;
  color: #484848;
}
.alert .notification{
  margin-top: 15px;
  font-size: 22px;
  color: black;
}
.introduction{
  margin-top: 10px;
  height: 100%;
  width: 100%;
  background-color: rgb(208,208,208,0.8);
  color: black;
  cursor: pointer;
  animation-duration: 0.4s;
  overflow-y: scroll;
  max-height: 60vh;
}
.introduction p{
  margin-left: 20px;
  margin-top: 15px;
}
.introduction p:first-of-type{
  padding-top: 30px;
}
.introduction p:last-of-type{
  font-size: 15px;
  color: #484848;
  padding-bottom: 30px;
}
#intro{
  animation-delay: 0s;
  animation-duration: 0.8s;
}
#datum{
  animation-duration: 0.3s;
}
.lock-message{
  font-size: 20px;
  color: #E8E8E8;
  animation: fadeInUp .8s;
}

.patternlock {
    margin: auto;
    background: 0 0
}
.patt-wrap {
    margin: auto;
    overflow: hidden
}
.patt-wrap li {
    transition: all .4s ease-in-out 0s
}
.patt-dots,
.patt-lines {
    transition: background .1s ease-in-out 0s
}
.patt-circ {
    border: 3px solid transparent
}
.patt-dots {
    background: rgba(255, 255, 255, .8)
}
.patt-lines {
    background: rgba(255, 255, 255, .4)
}
.patt-circ.hovered {
    border-color: #ddd;
    background: rgba(255, 255, 255, .2)
}
.patt-error .patt-circ.hovered {
    background: rgba(243, 66, 53, .4);
    border-color: rgba(243, 66, 53, .8)
}
.patt-error .patt-lines {
    background: rgba(243, 66, 53, .5)
}
.patt-success .patt-circ.hovered {
    background: rgba(75, 174, 79, .4);
    border-color: rgba(75, 174, 79, .8)
}
.patt-success .patt-lines {
    background: rgba(75, 174, 79, .5)
}
.patt-circ:nth-child(1),
.patt-circ:nth-child(2),
.patt-circ:nth-child(3) {
    animation: fadeInUp .4s
}
.patt-circ:nth-child(4),
.patt-circ:nth-child(5),
.patt-circ:nth-child(6) {
    animation: fadeInUp .6s
}
.patt-circ:nth-child(7),
.patt-circ:nth-child(8),
.patt-circ:nth-child(9) {
    animation: fadeInUp .8s
}


/*Scrollbar (https://css-tricks.com/the-current-state-of-styling-scrollbars)*/
html {
  --scrollbarBG: #f0f0f0;
  --thumbBG: #a4a4a4;
}
.introduction::-webkit-scrollbar {
  width: 12px;
}
.introduction {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.introduction::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
.introduction::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}