body.office-focus {

   header,
   footer,
   #notif-box {
      opacity: 0;
      pointer-events: none;
   }

}

#office-wrapper {
   display: grid;
   place-items: center;
}

#office {
   display: grid;
   place-items: center;

   background-color: var(--bl);
   box-shadow: var(--shd);

   border: var(--brd);
   border-radius: 1rem;

   width: calc(100% - 30vw);
   max-width: 50em;
   height: 100%;
   max-height: 80vh;
}

#office::after {
   content: '';
   position: absolute;

   border: var(--brd);
   border-radius: 1rem;
   background-color: var(--vdg);
   box-shadow: 0 0 1em .75em var(--dg) inset;

   z-index: -1;
   right: -4rem;
   left: calc((10vw + 2em) * -1);



   height: calc(100% - 6em);
}

#office::before {
   z-index: 0;
}

#office>.inner {
   display: grid;
   padding: 1rem;
   height: 100%;
   width: 100%;
   overflow-y: auto;
   transition: opacity .2s ease-out;

   >* {
      width: 100%;
   }

   &::before {
      z-index: 0;
   }
}

.office-menu {

   position: absolute;
   display: flex;
   width: 15vw;

   flex-direction: column;

}

#right-menu {
   right: calc(100% + 1rem);
   width: 10vw;
   height: calc(100% - 8em);
   top: 4em;

   gap: .5em;

   button {
      box-shadow: var(--shd);
      background-color: var(--bl);
   }

   span.bottom {
      position: absolute;
      bottom: 0;
      text-transform: uppercase;
      font-weight: bold;
      color: var(--pk);
      opacity: .6;

      text-shadow: 2px 2px 2px var(--bl), -2px -2px 2px var(--bl);


      align-self: flex-end;
   }
}

#inter-menu {
   left: calc(100% + 1.5em);
   top: 1.5em;
   gap: 2rem;
}

.section.msg-style {
   display: flex;
   padding: 0;

   border: var(--brd);
   border-radius: .5rem;
   width: inherit;
   background-color: var(--bl);
   filter: drop-shadow(0 0 .25em var(--bl)) drop-shadow(0 0 .25em var(--bl));

   h4 {
      border-bottom: 1px solid;
   }

   a {
      padding: .5rem 1rem;
   }

}


#contacts:empty::after {
   content: 'No contacts';
   padding: .5rem 1rem;
   opacity: .5;
}

#inter-choice:empty {
   display: none;
}

#office.interacting {

   #right-menu,
   #inter-menu {
      cursor: not-allowed;
   }

   #right-menu>button,
   #inter-menu a {
      color: var(--gr);
      pointer-events: none;
   }
}

label[data-setting] {
   display: flex;
   gap: 1em;
   margin-bottom: 1em;
}

#sys-info {
   position: absolute;
   bottom: 0;
   right: 0;
   font-size: .65em;
   opacity: .5;
   text-align: right;

   p {
      margin: .2em;
   }
}