#lfaReleasesListMount {
  &.loading {
    min-height:100px;
    position:relative;
    
    &::before {
      width: 100%;
      height: 100px;
      text-align: center;
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      content: "Loading ...";
      font-size: 1.2rem;
      line-height: 100px;
      color: var(--lfa-gray-2);
    }
  }
}
.lfa-releases {
  max-width: 768px;

  > .wrap {
    position:relative;

    > ul {
      border-bottom:var(--lfa-border);

      > li {
        display:block;
        position:relative;
        margin: 0;

        .v-info {
          display: block;
          position: absolute;
          top: 50px;
          left: 0;
          width: 100px;
          height: 30px;
          white-space: nowrap;

          > .wrap {
            display:flex;
            flex-direction:row;
            flex-wrap:nowrap;
            border-radius:5px;

            .v-phase {
              flex: 0 0 30px;
              height:30px;
              position:relative;
              border-radius: 5px 0 0 5px;

              img {
                display:block;
                width:20px;
                height:20px;
                margin:5px auto;
              }
            }
            .v-num {
              flex: 0 0 70px;
              text-align:center;
              font-weight:700;
              height:30px;
              line-height:28px;
              border-radius:0 5px 5px 0;
              font-size: 1rem;
            }
          }
        }
        .v-title {
          cursor: pointer;
          outline: none;
          border: 0;
          transition: .4s;
          display: block;
          width: 100%;
          text-align: left;
          padding: 0 45px 0 0;
          margin: 0;
          background-color: transparent;
          position: relative;

          .arrow {
            display:block;
            position:absolute;
            top:0;
            right:0;
            width:30px;
            height:30px;
            box-shadow:var(--lfa-shadow-1);
            border-radius:50%;
            transform:rotate(0deg);
            transition: all 320ms;

            > img {
              display:block;
              width:20px;
              height:20px;
              margin:5px auto;
              filter:var(--lfa-f-gray-3);
            }

            &:hover {
              background-color:var(--lfa-body);

              > img {
                filter: var(--lfa-f-white);
              }
            }
          }

          h3 {
            display: block;
            color: var(--lfa-body);
            margin: 0;
            font-size:1.2rem;
            padding-right: 40px;
          }

          .lead {
            margin:0;
            font-size:1.1rem;
            color:var(--lfa-gray-2);
          }

          &.active .arrow {
            transform:rotate(180deg);
            transition: all 320ms;
          }
        }
        .v-details {
          display:none;
          font-size: 1.1rem;

          > p {
            margin: 10px 0;
            font-size: 1.1rem;

            > a {
              font-size: 1.1rem;
              font-weight:500;
            }
          }

          > ul {
            margin: 0;
            padding:0 0 0 20px;
            list-style-type:none;
            font-size: 1.1rem;

            > li {
              font-size: 1.1rem;

              > span { 
                font-size: 1.1rem;

                > a {
                  font-size: 1.1rem;
                  font-weight:500;
                }

                &:first-of-type {
                  display:inline-block;
                  font-weight:500;
                  position:relative;
                  
                  &::before {
                    display:block;
                    position:absolute;
                    content:"";
                    left:-15px;
                    top:8.5px;
                    border-radius: 2px;
                    width:7px;
                    height:7px;
                    background:var(--lfa-body);
                  }
                }
                &[data-update-type="1"]::before {
                  background:var(--lfa-green-2);
                }
                &[data-update-type="2"]::before {
                  background:var(--lfa-blue-2);
                }
                &[data-update-type="3"]::before {
                  background:var(--lfa-red-2);
                }
              }
            }
          }
        }
      }

      > li.i-phase {
        &:last-of-type {
          padding: 50px 0 50px 130px;
        }
        .v-info {
          > .wrap {
            .v-phase {
              background-color: var(--lfa-version-bg-1);

             &::before {
               display:block;
               position:absolute;
               content:"";
               top:-5px;
               left:0;
               width:30px;
               height:5px;
               background-color: var(--lfa-bg-2);
             }
            }
            .v-num {
              font-size: 1rem;
              background-color: var(--lfa-version-bg-2);
            }
          }
        }
      }
      
      > li.i-release, > li.i-phase {
        padding: 50px 0 0 130px;
      }
      
      > li.i-current {
        border-top:var(--lfa-border);
        padding: 50px 0 50px 130px;

        .v-title h3:first-letter {
          text-transform:uppercase;
        }
      }

      > li.i-release {
        &::before {
          display:block;
          content:"";
          width:4px;
          height:calc(100%);
          position:absolute;
          top:60px;
          left:14px;
          background-color:#cdcdcd;
        }

        .v-info > .wrap > .v-phase::before {
          position:absolute;
          display:block;
          top:8px;
          left:9px;
          width:12px;
          height:12px;
          content:"";
          border-radius:50%;
          background-color:var(--lfa-gray-2);
          border:1px solid var(--lfa-black);
          outline:5px solid var(--lfa-bg-2);
        }
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  .lfa-releases {
    > .wrap {
      > ul > li {
        padding-left: 0 !important;
        padding-top:100px !important;
        
        &.i-release {
          &::before {
            display:none;
          }
          .v-info {
            > .wrap {
              .v-num {
                background-color: var(--lfa-version-bg-2);
              }
              .v-phase {
                background-color: var(--lfa-version-bg-1);
                &::before {outline:0;}
              }
            }
          }
        }
      }
    }
  }
}