@font-face {
  font-family: Digital;
  src: url('Fontes/digital.ttf');
}

@font-face {
  font-family: Product-sans;
  src: url(/Fontes/Product-sans.ttf);
}

@font-face {
  font-family: Material Icon Outline;
  src: url('Fontes/Material-Icon-Outlined.ttf');
}

body {
    background: #18191A;
}

.box.virar .relogio
{
  z-index: 10;
}

.box.crm .cronometro
{
  z-index: 10;
}

.cronometro
{
  z-index: -10;
}

.box
{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 200px;
  font-family: Digital;
}

.relogio,
.relogio-analogico,
.cronometro
{
  background: conic-gradient(#111,#222);
  height: 180px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px #5705FF solid;
  border-radius: 60%;
  animation: sombra 1s linear infinite alternate;
  position: absolute!important;
}

.relogio
{
  z-index: -15;
}

.relogio:after,
.relogio-analogico:after
.cronometro:after
{
  content: '';
  position: absolute;
  height: 94%;
  width: 94%;
  border-radius: 70%;
  border: 4px #099FFF solid;
  box-shadow: 0 0 10px #099FFF
}


@keyframes sombra
{
  0%
  {
    box-shadow: 0 0 10px #5705FF
  }
  100%
  {
    box-shadow: 0 0 40px #5705FF
  }
}

.relogio #horas,
.cronometro #cm

{
  color: #06A8FF;
  font-size: 55px;
  font-weight: bold;
  text-shadow: 0 0 10px #06A8FF
}

.relogio #segundos,
.cronometro #ms
{
  margin-top: 10px;
  color: #5D99FF;
  font-size: 35px;
  text-shadow: 0 0 10px #5D99FF;
}

.relogio #data
{
  margin-top: 10px;
  color: #5DC6FF;
  font-size: 17px;
  font-family: Digital;
  text-shadow: 0 0 10px #5DC6FF;
}


.relogio-analogico
{
  overflow: hidden;
}

.relogio-analogico .ponteiros
{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.relogio-analogico .ponteiros span
{
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}


.relogio-analogico .ponteiros #hr
{
  height: 50%;
}

.relogio-analogico .ponteiros #hr:after
{
  content: '';
  border: 2px #5705FF solid;
  width: 4px;
  height: 60%;
  -webkit-border-radius: 70%;
  -moz-border-radius: 70%;
  border-radius: 70%;
  box-shadow: 0 0 10px #5705FF;
}

.relogio-analogico .ponteiros #mn
{
  height: 70%;
  transform: rotate(45deg)
}

.relogio-analogico .ponteiros #mn:after
{
  content: '';
  border: 2px #047CFF solid;
  box-shadow: 0 0 10px #047CFF;
  width: 3px;
  height: 60%;
  -webkit-border-radius: 70%;
  -moz-border-radius: 70%;
  border-radius: 70%;
}



.relogio-analogico .ponteiros #sg
{
  height: 90%;
  transform: rotate(90deg)
}

.relogio-analogico .ponteiros #sg:after
{
  content: '';
  border: 1px #04BBFF solid;
  box-shadow: 0 0 10px #04BBFF;
  width: 2px;
  height: 60%;
  -webkit-border-radius: 70%;
  -moz-border-radius: 70%;
  border-radius: 70%;
}


.relogio-analogico .ponteiros #dot
{
  height: 10px;
  width: 10px;
  background: #000;
  border-radius: 10px;
}

.cronometro .botoes
{
  width: 40%;
  margin-top: 10px;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cronometro .botoes span
{
  font-family: Material Icon Outline;
  color: #047CFF;
  text-shadow: 0 0 10px #047CFF;
  -webkit-border-radius: 60%;
  -moz-border-radius: 60%;
  border-radius: 60%;
  padding: 2px;
  width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.cronometro .botoes span.hide
{
  display: none;
}