@include export-module('co-personal-activity-overview') {
 .co-personal-activity-overview {
   user-select: none;
   display: block;
   background: rgba(255, 255, 255, 0);
   transition: all .2s ease-in-out;
   box-shadow: inset 0 0 1px rgba(1, 1, 1, 0.3);
   padding: 10px;
   overflow: hidden;

   .overview-wrapper {
     display: flex;
     flex-direction: row;
     align-items: baseline;
   }
   .overview-wrapper-icons {
     display: flex;
     align-items: center;
   }
   .overview-wrapper-labels {
     display: flex;
     flex-direction: column;
   }
   .overview-wrapper-date {
     display: flex;
     flex-shrink: 0;
     flex-direction: column;
     margin-left: auto;
   }
   .activity-context-title {
     font-size: 10px;
   }
   .activity-title {
   }
   .date-wrapper {
     font-size: 10px;
     display: flex;
     .icon {
       flex-shrink: 0;
       height: 20px;
       width: 20px;
     }
     &.overdue {
       color: red;
       .co-icon [fill] {
         fill: red;
       }
     }
   }

   .overview-icon {
     .supervisor-icon {
       margin-left: -10px;
     }
   }

   .overview-main {
     display: flex;
     width: 100%;
     flex-direction: row;
     margin-top: 10px;
     flex-wrap: wrap;
     column-gap: 10px;
     row-gap: 5px;
   }

   .button-trigger {
     height: 22px;
     padding: 5px 10px;
     &:after {
       display: none;
     }
   }

   .button-trigger-icon {
     height: 22px;
     padding: 5px 25px 5px 10px;
     &:after {
       display: none;
     }
   }

   .date-divider {
     margin: 0 5px;
     font-weight: bold;
     font-size: 14px;
     line-height: 7px;
   }

   .date {
     min-width: 35px;
   }

   .date, .time {
     flex-shrink: 0;
     font-size: 10px;
     line-height: 10px;
   }

   &:not(.overdue):hover {
     background: #FAFAFA;
     color: #171721;
   }
 }
}
