﻿TimerDisplay {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  
  flex-direction: column;
  flex-shrink: 0;
  
  .mainWrapper {
    display: flex;
    flex-direction: row;
    
    backdrop-filter: blur(6px);
    background-color: rgba(45, 42, 42, 0.6);

    padding: 5px 5px;
    border-radius: 10px;

    .guardWrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      border-radius: 10px;
      
      background-color: rgba(0, 150, 255, 0.1);
      
      .guardLabel {
        font-size: 50px;
        font-weight: bolder;
      }
    }
    
    .wrapper {
      display: flex;
      flex-direction: column;
      
      padding: 0 20px;
      
      font-family: Roboto;
      font-size: 18px;
      font-weight: bolder;
      
      .timeLeftTitle {
        color: #eaeaea;
        font-weight: bolder;
        opacity: 0.6;
        text-align: center;
      }
      
      .timeLeft {
        margin-top: -5px;
        font-size: 48px;
      }
    }
    
    .prisonerWrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      border-radius: 10px;
      
      background-color: rgba(252, 29, 61, 0.1);
      
      .prisonerLabel {
        font-size: 50px;
        font-weight: bolder;
      }
    }
  }
}