.root {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#pagina-login {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pagina {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

}

.hide {
  display: none !important;
}

/* .container-player {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .75);
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
} */

/* .container-player-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} */

/* .container-player {
  box-sizing: border-box;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .75);
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  background: #000;
  text-align: center;
  padding: 0;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  font-family: 'Open Sans', sans-serif;
  padding-bottom: 56.25%;
}

.container-player-iframe {
  position: absolute;
  top: -3000px;
  bottom: -3000px;
  left: 0px;
  right: 0px;
  transform: scale(1);
  width: 100%;
  height: calc(100% + 6000px);
  margin: auto;
}


.container-player-transparency {
  position: absolute;
  z-index: 10;
  height: 100%;
  width: 100%;
} */

/* utils > videoPlayerCreator > videoPlayerCreator.js */
.container-player {
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  padding: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .75);
  background-size: cover;
}

.container-player-iframe {
  position: absolute !important;
/*   top: -3000px;
  bottom: -3000px; */
  width: 100%;
  /* height: calc(100% + 6000px); */
  margin: auto;
}

.container-player-capa {
    position: absolute;
    top: -3000px;
    bottom: -3000px;
    width: 100%;
    margin: auto;
    cursor: pointer;
}

.video-controls {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
    color: #EBEAE9;
    padding: 0 1rem;
    background-color: #00000033;
}

.video-controls-unhide-temp {
    z-index: 200 !important;    
}

.progress-bar-container {
    display: flex;
    align-items: center;
    width: 100%;
}

.progress-bar-container input {
    flex-grow: 1;
}

.time-display {
    min-width: fit-content;
}

.loading-spinner-el {
    width: 20vw;
    max-width: 140px;
    height: 20vw;
    max-height: 140px;
    display: block;
    border: solid 0.5vw;
    border-color: #6c757d #6c757d #6c757d transparent;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    animation: ani-load 1s linear infinite;  
  }
  
  @keyframes ani-load {
    100% {
        transform: rotate(360deg)
    }
  }

.text-small-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5rem;
}

.container-rodape-botoes {
  background: none !important;
  padding: 0;
  font-size: 12px;
}

.botao {
  align-self: center;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  width: fit-content;
  color: white;
}

.botao-modal {
  border: none !important;
}

.botao-modal:focus {
  outline: none !important;
  box-shadow: none !important;
}

@media (min-width: 30rem) {
  .text-small-container {
    font-size: 18px;
    line-height: 1.7rem;
  }

  .container-rodape-botoes {
    font-size: 14px;
  }


}