@font-face {

  font-family: 'Comfortaa Light';

  font-style: normal;

  font-weight: normal;

  src: local('Comfortaa Light'), url('/fonts/Comfortaa-Light.woff') format('woff');

}



body, html {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    font-family: 'Comfortaa Light';

    font-size: 30px;

    font-weight: normal;

}





#cameraFeed {

    position: fixed;

    top: 0;

    left: 0;

    /* width: 100%;

    height: 100%; */

    width: 100vw;

    height: 100vh;

    z-index: 1;

    /* background-color: #000; */

}

#cameraFeed video {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



#detectionPanel {

    /* display: none; */



    display: inline-block;

    position: fixed;

    text-align: center;

    padding: 5px;

    right: 0;

    bottom: 0%; 

    /*height: 10%;*/

    width: 100%; /*calc(4 * 20%);*/

    z-index: 2;

    background-color: rgba(112, 112, 21); 

    box-shadow: 0px 0px 10px 3px rgb(40, 40, 0); 



    border: 2px solid #D0AA60;

    

    transform: translateX(100%); 

    transition: transform 0.5s ease-in-out;

    

    font-family: 'Comfortaa Light';

    font-size: 30px;

    font-weight: normal;

    /* overflow-y: auto; 

    padding: 10px;*/

}

#detectionPanel.show {

  transform: translateX(0);

}



.detected-item {

  margin-bottom: 2px;

  padding-left: 10px;

  padding-right: 10px;

  background-color: rgba(112, 112, 21);

  border: 0px solid #D0AA60;

  font-size: 40px; 

}



.detected-item,

.detected-item * {

  color: white;

}



.detected-item a {

  color: #ffffff;

  text-decoration: none;

}



@keyframes pulse {

  0% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.1);

    opacity: 0.7;

  }

  100% {

    transform: scale(1);

    opacity: 1;

  }

}



.waiting-message {

    padding: 10px;

    font-size: 20px; 

    text-align: center;

    color: #ffffff;

    animation: pulse 2s infinite;

}

.loader-container {

    display: flex;

    justify-content: center;

    align-items: center;

    position: fixed; 

    top: 5%;

    left: 0;

    width: 100%;

    height: 100%;

}

.loader {

    display: inline-flex;

    gap: 10px;

  }

  .loader:before,

  .loader:after {

    content: "";

    height: 20px;

    aspect-ratio: 1;

    border-radius: 50%;

    background:

      linear-gradient(#222 0 0) top/100% 0% no-repeat,

      radial-gradient(farthest-side,#000 95%,#0000) 50%/8px 8px no-repeat

      #fff;

    animation: l9 4s infinite ease-in;

  }

  @keyframes l9 {

    0%  {background-size:100% 0%,8px 8px;background-position:top, 50% 50%}

    80% {background-size:100% 70%,8px 8px;background-position:top, 50% 70%}

    84%,

    100%{background-size:100% 0%,8px 8px;background-position:top, 50% 50%}

  }