.lp-episode-preview-container{
    position: relative;
    width: 320px;
    height: 228px;
}

.lp-episode-preview-container:hover > span > img{
    outline: 1px solid var(--blue-3);
}

.lp-episode-preview-watched-label{
    position: absolute;
    top: 28%;
    left: 34%;
    z-index: 2;
    font-size: 2.5rem !important;
    pointer-events: none;
}

.lp-episode-preview-style-container{
    position: absolute;
    pointer-events: none;
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.lp-episode-preview-style-image{
    transition: outline 0.3s;
}

.lp-episode-preview-style-title{
    width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-episode-preview-button{
    width: inherit;
    height: inherit;
    border: 0;
    background-color: transparent;

    &:hover{
        cursor: pointer;
    }
}.lp-game-preview-container{
    position: relative;
    width: 200px;
    height: 313px;
}

.lp-game-preview-container:hover > span > img{
    outline: 1px solid var(--blue-3);
}

.lp-game-preview-style-container{
    position: absolute;
    pointer-events: none;
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.lp-game-preview-style-image{
    transition: outline 0.3s;
}

.lp-game-preview-style-title{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lp-game-preview-button{
    width: inherit;
    height: inherit;
    border: 0;
    background-color: transparent;

    &:hover{
        cursor: pointer;
    }
}.lp-header-summary-container{
    display: flex;
    gap: 1rem;
    margin: 1rem;
}

.lp-header-summary-clickable-container{
    position: relative;
    width: 1040px;
    height: 182px;

    &:hover{
        outline: 1px solid var(--blue-3);
    }
}

.lp-header-summary-info{
    display: flex;
    flex-direction: column;
}

.lp-header-summary-button{
    position: absolute;
    width: inherit;
    height: inherit;
    border: 0;
    background-color: transparent;

    &:hover{
        cursor: pointer;
    }
}.lp-game-selector{
  display: flex;
  gap: 1rem;

  & .gs-image{
    width: 70px;
    height: 93px;
  }

  & .gs-content{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;

    & .gs-synopsis{
      display: none;
    }

    & .gs-buttons-desktop {
      display: none;
    }
    & .gs-buttons-mobile{
        display: flex;
        justify-content: flex-start;
        gap: 2rem;
    }
  }

  @media (min-width: 992px) {
    & .gs-image {
      width: 200px;
      height: 266px;
    }

    & .gs-content{


      & .gs-synopsis{
        display: block;
      }

      & .gs-buttons-desktop{
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
        flex-wrap: wrap;
      }
      & .gs-buttons-mobile{
        display: none;
      }
    }
  }
}.lp-sidebar{
  display: flex;
  flex-direction: column;
  background-color: var(--grey-4);
  height: 100%;
}.lp-admin-page{
  margin: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  & .search-game{
    display: flex;
    flex-direction: column;
    gap: 3rem;

    & .controls{
      display: flex;
      gap: 1rem;
    }

    & .basic-info{
      display: flex;
      flex-direction: column;
      gap: 1rem;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 1rem;

      & .info{
        display: flex;
        gap: 1rem;

        & .inputs{
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        & .synopsis{
          display: flex;
          flex-direction: column;
          gap: 1rem;
          padding-right: 1rem;

          & .header{
            display: flex;
            gap: 1rem;
          }

          & .input{
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            & .label{
              padding-left: 1rem;
            }
          }
        }
      }
    }

    & .media{
      display: flex;
      flex-direction: column;
      gap: 1rem;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 1rem;

      & .inputs{
        display: flex;
        gap: 1rem;

        & .banner{
          display: flex;
          flex-direction: column;
          gap: 1rem;

          & .inputs{
            display: flex;
            gap: 1rem;
            align-items: center;

            & .image{
              max-width: 480px;
              max-height: 300px;
            }
          }
        }

        & .trailer{
          display: flex;
          flex-direction: column;
          gap: 1rem;

          & .inputs{
            display: flex;
            gap: 1rem;
            align-items: center;
          }
        }
      }
    }

    & .version{
      display: flex;
      flex-direction: column;
      gap: 1rem;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 1rem;

      & .item{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 1rem;
        margin-bottom: 2rem;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

        & .header{
          display: flex;
          gap: 1rem;
          align-items: baseline;
        }

        & .search{
          display: flex;
          gap: 1rem;
        }

        & .videos{
          display: flex;
          flex-wrap: wrap;
          gap: 2rem;
          justify-content: center;

          & .video{
            display: flex;
            gap: 1rem;
            flex-direction: column;
            border: 1px solid var(--blue-3);
            padding: 1rem;

            & .inputs{
              display: flex;
              gap: 1rem;
            }
          }
        }
      }
    }

    & .confirm{
      display: flex;
      gap: 1rem;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      padding: 1rem;
    }
  }
}.lp-body{
  background-color: var(--grey-4);

  & .external{
    display: flex;
    width: 100%;
    flex-grow: 1;

    & .internal{
      width: inherit;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    & .internal > form {
      display: flex;
      flex-direction: column;
    }
  }
}

.lp-game-result{
  margin-bottom: 2rem;

  & .content {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;

    & .item {
      margin-bottom: 1rem;
    }
  }
}.lp-discovery{
  display: flex;
  flex-direction: column;
  gap: 1rem;

  & .content{
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .item{
      margin-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      & .link{
        display: flex;
      }
    }
  }
}.lp-game-page {
  gap: 1rem;

  & .info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.8);
    background-blend-mode: overlay;

    & .title {
      text-align: center;
    }

    & .info-and-tools {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2rem;

      & .image {

      }

      & .content {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        & .tools {
          display: flex;
          justify-content: center;
          gap: 3rem;

          & .trailer {
            width: 100%;
            aspect-ratio: 16 / 9;
          }
        }

        & .desktop-synopsis {
          display: none;
        }
      }
    }
  }

  & .mobile-synopsis{
    text-align: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  & .select-version{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
    margin-bottom: 2rem;
    gap: 1rem;
    text-align: center;
  }

  & .select-version-modal {
    & .game-info{
      display: none;
    }

    & .content {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-top: 2rem;
      margin: 1rem;
      text-align: center;

      & .list {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;

        & .version {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          border: 1px solid var(--grey-1);
          border-radius: 10px;
          width: 195px;
          padding: 1rem;
          text-align: left;

          &.selected {
            border: 1px solid var(--blue-3);
          }

          & .title {
            display: flex;
            justify-content: space-between;
          }

          & .line {
            display: flex;
            gap: 0.5rem;
          }

          & .button {
            margin-top: 1rem;
          }
        }
      }
    }
  }

  & .episodes {
    margin-top: 2rem;
    text-align: center;

    & .title {
      display: flex;
      align-items: baseline;
      gap: 1rem;
    }

    & .list {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
      flex-wrap: wrap;
      column-gap: 4rem;
      padding-left: 0.2rem;
      row-gap: 2rem;
    }
  }

  & .episode-modal {
    & .episode-info {
      display: none;
    }

    & .plans {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: 1rem;
      margin: 1rem;

      & .waiting-text {
        text-align: center;
      }
    }

    & .counter {
      margin-top: 4rem;
      margin-bottom: 4rem;
      text-align: center;
      width: 100%;

      & .button {
        display: none;
      }
    }

    & .player {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      & .header {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 1rem;
      }

      & .video {
        width: 100%;
        aspect-ratio: 16 / 9;
      }

      & .time {
        display: none;
      }

      & .button {
        display: none;
      }
    }
  }

  @media (min-width: 992px) {
    & .info {
      & .title {
        text-align: left;
      }

      & .info-and-tools {
        flex-direction: row;

        & .content {
          & .tools {
            justify-content: left;

            & .trailer {
                width: 850px;
              }
          }

          & .desktop-synopsis{
            display: block;
          }
        }
      }
    }

    & .mobile-synopsis {
      display: none;
    }

    & .select-version-modal {
      & .game-info{
        display: block;
      }

      & .content {
        text-align: left;

        & .list {
          justify-content: flex-start;
        }
      }
    }

    & .episodes {
      text-align: left;

      & .list {
        justify-content: flex-start;
      }
    }

    & .episode-modal {
      & .episode-info {
        display: block;
      }

      & .plans {
        text-align: left;

        & .waiting-text{
          text-align: left;
        }
      }

      & .player {
        width: 850px;
      }
    }
  }
}.lp-landing {
  padding: 1em;

  & .section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    overflow: auto;

    & .title {
      display: flex;
      align-items: baseline;
      gap: 1rem;
    }

    & .preview {
      display: flex;
      gap: 2rem;
      margin-top: 1rem;
    }
  }
}.lp-pending-container{
    margin-bottom: 2rem;
}

.lp-pending-item-container{
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}