@media only screen and (max-width: 800px) {
  body {
    background-color: lightblue;
    zoom:80%;
  }

  .rounded {
    max-width: 200px;
  }
}

body {
    margin: 0; 
    height: 100%; 
    overflow: hidden;
    cursor: none;
}

.terminalButton:hover {
    background-color: #1B3835;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.5fr 1fr 1fr 1fr 0.5fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
     "cTimeLogo currentDate currentDate"
    "areaComing areaPause areaGoing"
    "areaIllness areaCompany areaTrip"
    "areaHoliday areaCompany areaTimes"
    "areaFooter areaFooter areaFooter";
}


.cTimeLogo { grid-area: cTimeLogo; }
.currentDate { grid-area: currentDate; }
.areaIllness { grid-area: areaIllness; }
.areaTrip { grid-area: areaTrip; }
.areaHoliday { grid-area: areaHoliday; }
.areaTimes { grid-area: areaTimes; }
.areaComing { grid-area: areaComing; }
.areaPause { grid-area: areaPause; }
.areaGoing { grid-area: areaGoing; }
.areaCompany { grid-area: areaCompany; }
.areaFooter { grid-area: areaFooter; }

.bg-ct-1 {
    background-color: #5CB9AE
}
.cornerButton {
    position: fixed; 
    bottom: 30px; 
    right: 20px; 
    z-index: 900;
}

.ct-bg {
    background-color:#1B3835;
}

.bg-info2 {
    background-color: brown;
}

.ct-color {
    background-color:#1B3835;
}

.btn {
    line-height: 3rem;
}

.ct-text-color {
    color: white;
}

.ct-btn-circle {
    border-radius: 50%;
    line-height: 2rem;
    color: white;
}

.masterData {
    height: 0px;
}

input#currentRFID {
    position: fixed; 
    top: -200px;
}

.imageCenter {
    margin: auto;
}

.progressbar {
    display: none;
    position: fixed;
    width: 30px;
    top:0px;
    height: 100%;
    background: rgb(99,208,197);
    background: linear-gradient(90deg, rgba(99,208,197,1) 0%, rgba(63,132,125,1) 41%, rgba(27,56,53,1) 100%);
}

.base-timer {
    display: none;
    position: fixed;
    top:45%;
    left: 40px;
    width: 100px;
    height: 100px;
  }
  
  .base-timer__svg {
    transform: scaleX(-1);
  }
  
  .base-timer__circle {
    fill: none;
    stroke: none;
  }
  
  .base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: #1B3835;
  }
  
  .base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
  }
  
  .base-timer__path-remaining.green {
    color: rgb(63, 132, 125);
  }
  
  .base-timer__path-remaining.orange {
    color: orange;
  }
  
  .base-timer__path-remaining.red {
    color: red;
  }
  
  .base-timer__label {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: gray;
  }