.chat-container {
   position: relative;
}

.chat-label {
   width: 64px;
   height: 64px;
   border-radius: 25%;
   background-color: var(--color-background);
   box-shadow: 10px 10px 15px rgba(73, 78, 92, 0.1);
   cursor: pointer;

   position: fixed;
   right: 20px;
   bottom: 70px;
   z-index: 999;

   display: flex;
   align-items: center;
   justify-content: center;

   transition: all 1s ease;
}

.chat-box {
   display: block;
   background-color: aliceblue;
   border: 1px solid var(--color-secondary);
   border-radius: 1rem;
   box-shadow: 10px 10px 15px rgba(73, 78, 92, 0.1);
   width: min( 90vw, 375px);
   height: 540px;
   overflow: hidden;
   position: fixed;
   bottom: -400px;
   right: -100%;
   z-index: 998;
   opacity: 0;
   transition: all 1s ease;
}

.chat-header {
   display: flex;
   padding: 20px 15px;
   align-items: baseline;
   justify-content: space-between;
   border-bottom: 1px solid var(--color-secondary);
   color: var(--color-background);
   background-color: #394b7c;
}

.chat-header h5 {
   margin: 0;
}

.close-label {
   cursor: pointer;
   margin: 0;
}

#chat-icon {
   display: none;
}

#chat-icon:checked ~ .chat-box {
   right: 20px;
   bottom: 70px;
   z-index: 999;
   opacity: 1;
}

#chat-icon:checked ~ .chat-label {
   opacity: 0;
}

@media (max-width: 768px) {
   .chat-label {
      width: 56px;
      height: 56px;
   }
}