@keyframes okMarcaAguaVideo {
  0% {
    opacity: 0;
    font-size: 0.2rem;
  }
  20% {
    opacity: 0;
    font-size: 0.2rem;
  }
  30% {
    opacity: 1;
    font-size: 2rem;
  }
  50% {
    font-size: 2rem;
  }
  80% {
    opacity: 1;
    font-size: 2rem;
  }
  100% {
    opacity: 0;
    font-size: 0.2rem;
  }
}
body{
  .contenedor-checkbox{
    .texto-marca-agua-logotipo{
      display: block;
      font-size: 80%;
      padding-left: 22px;
      .texto-posicion-marca-agua{
        font-weight: 700;
        font-style: italic;
      }
    }
    .enlace-posicion-marca-agua-logotipo{
      font-weight: 700;
      display: inline-flex;
      align-items: baseline;
      gap: 3px;
      text-decoration: underline;
      position: relative;
      svg{
        fill: var(--azul-1);
        width: 14px;
        height: 14px;
      }
      &:not(.active){
        .container-posicion-marca-agua-logotipo{
          transform: translate(-50%, -2px) scale(0.2);
          opacity: 0;
          pointer-events: none;
          filter: blur(2px);
        }
      }
      .ok-posicion-marca-agua-video {
        text-decoration: none !important;
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        transform-origin: center bottom;
        font-size: 2rem;
        color: var(--primario-2);
        opacity: 0;
        &.ok{
          animation-name: okMarcaAguaVideo;
          animation-duration: 1.2s;
        }
      }
    }
  }
  .container-posicion-marca-agua-logotipo{
    cursor: default;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, -2px);
    width: 120px;
    height: 85px;
    background-size: contain;
    background-image: url(../_recursos/img/reproductor.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: white;
    outline: 2px solid var(--gris-3) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    padding: 3px;
    padding-bottom: 15px;
    transform-origin: center bottom;
    transition: all 0.2s ease-in-out;
    &.big{

    }
    .posicion{
      cursor: pointer;
      width: 26%;
      height: 24%;
      position: absolute;
      transition: all 0.2s ease-in-out;
      border: 2px solid black !important;
      &.active{
        background-color: rgba(248, 147, 6, 0.7);
      }
      &:not(.active){
        &:hover{
          background-color: rgba(25, 105, 255, 0.5);
          &:after{
            opacity: 1;
          }
        }
      }
      &.posicion-top-left,
      &.posicion-top-right{
        top: 6px;
      }
      &.posicion-bottom-left,
      &.posicion-bottom-right{
        bottom: 20px;
      }
      &.posicion-top-left,
      &.posicion-bottom-left{
        left: 6px;
      }
      &.posicion-top-right,
      &.posicion-bottom-right{
        right: 5px;
      }
      &.posicion-top-left,
      &.posicion-top-right,
      &.posicion-bottom-left,
      &.posicion-bottom-right{
        &:before{
          content: "";
          position: absolute;
          width: 50%;
          height: 50%;
        }
      }
      &.posicion-top-left{
        &:before{
          left: 50%;
          top: 50%;
          border-right: 1px solid;
          border-bottom: 1px solid;
          border-color: rgba(255,255,255,0.25);
        }
      }
      &.posicion-top-right{
        &:before{
          right: 50%;
          top: 50%;
          border-left: 1px solid;
          border-bottom: 1px solid;
          border-color: rgba(255,255,255,0.25);
        }
      }
      &.posicion-bottom-left{
        &:before{
          left: 50%;
          bottom: 50%;
          border-right: 1px solid;
          border-top: 1px solid;
          border-color: rgba(255,255,255,0.25);
        }
      }
      &.posicion-bottom-right{
        &:before{
          right: 50%;
          bottom: 50%;
          border-left: 1px solid;
          border-top: 1px solid;
          border-color: rgba(255,255,255,0.25);
        }
      }
    }
  }
}