.skeleton{
   margin-bottom: 20px;
}

.section-line, .section__heading-line{
   height: 25px;
   width: 90%;
   margin: 3px 0;
}

.section__heading-line{
   width: 87%;
}

.profile-container{
   display: flex;
   flex-direction: column;
   width: 250px;
   align-items: flex-start;
   margin-bottom: 20px;

   .lines{   
      display: inline-flex;
      height: 100px;
      width: 100%;
      flex-direction: column;
      justify-content: center;

      span, .line {
         width: 70%;
         height: 15%;
         margin: 3px 0;
      }
   }

   .box{
      width: 150px;
      height: 150px;
   }
}

.profile-container--inline {
   display: flex;
   margin-bottom: 20px;

   .box {
      height: 150px;
      width: 150px;
   }

   .lines {
      display: inline-flex;
      height: 100px;
      padding: 25px 0;
      margin-left: 10px;
      width: calc(100% - 100px);
      flex-direction: column;
      justify-content: center;

      span, .line {
         width: 70%;
         height: 15%;
         margin: 3px 0;
      }
   }
}

.skeleton__container {
   border: 2px solid var(--tisc-border-primary);//rgb(229, 231, 235);
   padding: 20px;
   margin-bottom: 20px;
}

.search-line {
   margin: 2.5px 0 0 0;
   height: 25px;

   &:first-of-type {
      width: 100%;
   }

   &:nth-child(2) {
      width: 25px;
      margin-right: 5px;
   }

   &:nth-child(3) {
      width: 60%;
   }
}

.shine {
   background: var(--tisc-bg-third);//#f1f1f1;
   display: inline-block;
   position: relative;
   overflow: hidden;

   &::after {
      display: block;
      position: absolute;
      content: '';
      background: linear-gradient(90deg,
            rgba(#fff, 0) 0,
            rgba(#fff, 0.2) 20%,
            rgba(#fff, 0.5) 60%,
            rgba(#fff, 0));
      width: 600px;
      height: 100%;
      animation: shimmer 1.5s infinite;
      transform: translateX(-200%);
   }
}

.dark-theme .shine::after{
   background: linear-gradient(90deg,
            rgba(#567, 0) 0,
            rgba(#567, 0.2) 20%,
            rgba(#567, 0.5) 60%,
            rgba(#567, 0));
}

@keyframes shimmer {
   0% {
      transform: translateX(-200%);
   }

   100% {
      transform: translateX(200%);
   }
}