.lock-screen
{
  background: linear-gradient(355deg, rgba(2,0,36,1) 0%, rgb(43 43 43) 55%, rgb(33 33 33) 100%);
  background-size: cover;
  height: 100vh;
  width: 100vw;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  overflow: hidden;
}


.lock-screen header
{
  color: #fff;
  /**position: absolute;*/
  top: 0;
  left: 0;
  height: max-content;
  z-index: 50;
  margin: 0 2vw 0 2vw;
  /**width: calc(100vw - 3vw);*/

    position: relative;
    width: calc(100vw - 4vw);
    z-index: 22;
    background-color: transparent;
    padding-bottom: 2vw;
    padding-top: 1vw;
}

.lock-screen header .status-bar
{
  display: flex;
  width: calc(100vw - 3vw);
}

.lock-screen header .status-bar .right
{
  margin-right: 0;
  margin-left: 0.3vw;
}

.lock-screen header .status-bar .first
{
  margin-left: auto;
}

.lock-screen header .status-bar .text
{
  font-size: 3.6vw;
}

.lock-screen header .status-bar .ico
{
  font-size: 4vw;
  margin-top: 0;
}

.lock-screen content
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 10;
  height: calc (100vh - 3vw);
  margin-top: 3vw;
}

.lock-screen content .info
{
  color: #fff;
  width: 100vw;
  text-align: center;
  margin-top: 7vh;
}

.lock-screen content .notifications-container
{
  position: absolute;
  top: 8vh;
  left: 0;
  width: 100vw;
  height: max-content;
}

.lock-screen footer
{
  color: #fff;
  position: absolute;
  display: flex;
  bottom: 4vw;
  left: 0;
  margin: 4vw 5vw;
  width: 90vw;
  z-index: 51;
}

.lock-screen footer .left
{
  margin-left: 0;
  margin-right: auto;
}

.lock-screen footer .right
{
  margin-left: auto;
  margin-right: 0;
  margin-top: auto;
}

.lock-screen content .hour,
.lock-screen footer .hour
{
  font-size: 18vw;
  font-family: "Roboto Light";
}

.lock-screen content .date,
.lock-screen footer .date
{
  font-size: 6vw;
  font-family: "Roboto Light";
  padding-left: 2vw;
  line-height: 10px;
  margin-right: 0;
  margin-left: auto;
}