:root{
	--borders-color: #EAECEE;
	--borders-dark-color: #D5D8DC;
	--height-icons: 3vw;
	--width-icons: 3vw;
	--search-text-color: hsl(0, 0%, 6.7%);
	--hover-background: rgba(0, 0, 0, 0.05);
	--active-background: #ccc;
	--height-circles: 3vw;
	--width-circles: 3vw;
}

*{
	font-family: 'Roboto', sans-serif;
}

.cursor-pointer{
	cursor: pointer;
}

.cursor-pointer:active{
	background: var(--active-background);
}

.circles{
	height: var(--height-circles);
	width: var(--width-circles);
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-hidden{
	/* display: inline-block; */
}

.desktop-hidden, 
.hide{
	display: none;
}

.display-flex{
	display: flex;
}

.flex-direction-row{
	flex-direction: row;
}

.flex-direction-column{
	flex-direction: column;
}

.font-size-1vw{
	font-size: 1vw;
}

.font-size-09vw{
	font-size: 0.9vw;
}

.left-6{
	left: 6vw;
}

.left-17{
	left: 17vw;
}

.list-style-type-none{
	list-style-type: none;
}

.padding-left-2vw{
	padding-left: 2vw;
}

.padding-left-0vw{
	padding-left: 0vw;
}

.scroll-y{
	overflow-y: scroll;
}




/*MAIN STRUCTURE*/
body{
	height: 100vh;
}

.container{
	background: transparent;
}

.header{
	/*
	position: fixed = el elemento no permanecera en el flujo natural de la pagina. se posicionara a si mismo de 
	acuerdo al viewport. Debido a que está posicionado, actuará como un punto de anclaje para el siguiente elemento 
	absolutamente posicionado.
	
	z-index = deffine el orden de los elementos en el eje Z, solo funciona en elementos posicionados (cualquiera q 
	no sea stactic). Si el valor es positivo el elemento es movido en frente de los demas elementos, de lo contrario 
	es movido detras del resto de elementos
*/
	position: fixed;
	width: 100%;
	height: 9vh;
	border: 1px solid var(--borders-color);
	z-index: 2;
	transform: translateY(0);
	background: white;
}

.nav-bar{
	height: 9vh;
	padding: 0 1.7vw;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.navbar-left{
	width: 12vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.navbar-left a{
	text-decoration: none;
	color: #030303;
}

.icon-menu{
	/*
	box-sizing = define como se calcula el ancho y alto de un elemento, ya sea q incluyan o no el padding y los 
	borders. 
	border-box = El ancho y alto del elemento aplica a todas las partes del elemento: el contenido, el padding y 
	los borders
	
	Display = establece como se va a visualizar el elemento. 
	inline-block = comparte las propiedades inline y block del elemento. inline xq el elemento se comporta como 
	texto simple y se inserta en un bbloqque de texto; block porque se le puede aplicar un alto y un ancho.
	
	position: relative = el elemento permanecera en el ffluo natural de la pagina. Actuara como un punto de anclaje 
	para los bloques absolutamente posicionados.
	*/
	/*height: 3vw;
	width: 3vw;*/
	height: 1.5vw;
	width: 1.5vw;
}

.youtube-logo{
	width: 7.7vw;
	height: 9vh;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.youtube-logo p{
	font-family: 'Anton', sans-serif;
	font-size: 21px;
}

.navbar-center{
	/*
	flex = es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y 
	llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible 
	proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.
	flex: flex-grow flex-shrin flex-basis;
	
	flex-grow = define la habilidad de crecer para un elemento flex, si es necesario
	flex-shhrink = define la habilidad de un elemento flex de encongerse, si es necesario
	flex-basis = Esto define el tamaño predeterminado de un elemento antes de que se distribuya el espacio restante.
	*/
	flex: 0 1 54vw;
	min-width: 0px;
	height: 9vh;
	margin-left: 3vw;
}

.search-bar{
	height: 9vh;
	/*margin: 0 0 0 3.5vw;*/
    padding: 0 4px;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
    flex-basis: 1e-9px;
}

.search-box{
	height: 5vh;
	text-align: center;
	border: 1px solid var(--borders-dark-color);
	border-right: none;
	border-radius: 2px 0 0 2px;
	box-shadow: inset 0 1px 2px #eee;
	color: black;
	padding: 2px 6px;
	margin-left: 22px;
    flex: 1;
    flex-basis: 1e-9px;
    display: flex;
    flex-direction: row;
}

.icon-search{
	height: 1.5vw;
	width: 1.5vw;
	/*transform: translateY(4px);*/
	margin-top: 1vh;
}

.hidden-icon{
	display: none;
	position: absolute;
}

.icon-content{
	left: 0;
	padding: 0 10px;
	color: #030303;
}

.input-search{
	box-sizing: border-box;
	padding: 1px 0;
	font-size: 16px;
	font-weight: 400;
	width: 100%;
	line-height: 24px;
	border: none;
	box-shadow: none;
	color: var(--search-text-color);
}

.icon-clear{
	height: 1vw;
	width: 1vw;
	/*transform: translateY(7px);*/
	margin-top: 1.5vh;
}

.button-search{
	height: 3vw;
	border: 1px solid #d3d3d3;
	background-color: #f8f8f8;
    border-radius: 0 2px 2px 0;
    margin: 0;
}

.icon-search-2{
	height: 1.8vw;
	width: 3vw;
}

.add-voice-container{	
	background: #f9f9f9;
	margin-left: 10px;
}

.icon-microphone{
	height: 3vw;
	width: 1.2vw;
}

/*LADO DERECHO DE LA NAVBAR*/
.navbar-right{
	width: 16vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.icon-video{
	color: #030303;
}

.notifications{
	position: relative;
	background: white;
	align-items: center;
	/* margin-left: 10px; */
}

.icon-notifications{
	height: 1.8vw;
	width: 1.8vw;
	margin-top: 0px;
}

.notifications-number{
	height: 1.2vw;
	width: 1.6vw;
	background: #c00;
	border-radius: 25px;
	position: absolute;
	top: 6px;
	right: 0px;
	color: white;
	font-size: 2vh;
	font-weight: 100;
}

.notifications-number span{
	margin-left: 2px;
}

.picture-user{
	background: white;
	overflow: hidden;
}

.user-profile{
	/* width: 3vw;
	height: 3vw; */
	width: 100%;
	height: 100%;
}

/* MENU DE NOTIFICACIONES */
.desktop-notifications{
	width: 35vw;
	height: 98vh;
	position: absolute;
	top: 0.7vw;
	right: 12vw;
	/*blanco con transparencia*/
	/*rgba(rojo, verde, azul, transparencia); */
	background: rgba(255, 255, 255, 0.98); 
	border-left: 1px solid var(--borders-color);
	border-right: 1px solid var(--borders-color);
	overflow: hidden;
}

.header-desktop-notifications{
	height: 7.4vh;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--borders-color);
}

.header-desktop-notifications h2{
	font-size: 1.4vw;
	font-weight: 400;
	padding-left: 1vw;
}

.header-desktop-notifications div{
	margin-right: 1vw;
}

.body-desktop-notifications{
	height: 91vh;
}

.menu-ul{
	padding-left: 0vw;
}

.menu-ul li{
	height: 8vw;
	padding: 1vw 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1vw;
}

.menu-ul li:hover{
	background: var(--hover-background);
}

.menu-ul li div:nth-child(1){
	margin-left: 1vw;
}

.title-notification{
	width: 18vw;
}

.title-notification p{
	font-size: 1vw;
	font-weight: 400;
	margin: 0;
	text-align: justify;
}

.title-notification p:nth-child(2){
	font-size: 0.9vw;
	font-weight: 300;
	margin-top: 1vw;
	color: #606060;
}

.notifications-image img{
	width: 7vw;
	height: 9vh;
	object-fit: cover;
}

.menu-ul li div:nth-child(4){
	margin-right: 1vw;
}

.icon-dots-horizontal-triple {
	color: transparent;
}

.icon-dots-horizontal-triple:hover{
	color: #000;
}

/* MENU LATERAL*/
.lateral-menu-bar{
	height: 91vh;
	top: 4vw;
	font-weight: 300;
	position: fixed;
}


.lateral-menu-expanded{
	width: 17vw;
}

.lateral-menu-not-expanded{
	width: 6vw;
}
	
.first-section, 
.second-section, 
.third-section, 
.fourth-section,
.fifth-section, 
.sixth-section{
	border-bottom: 1px solid var(--borders-color);
}

.lateral-menu{
	list-style-type: none;
}

.lateral-menu li{
	display: flex;
	align-items: center;
	gap: 1vw;
}

.flex-direction-column img{
	margin-top: 1vw;
}

.flex-direction-column p{
	margin-top: 1vw;
}

.lateral-menu li img{
	justify-content: flex-start;
}

.lateral-menu li:hover{
	background: var(--hover-background);
}

.lateral-menu li:active{
	background: var(--active-background);
	font-weight: 400;
}

.lateral-menu-icons{
	height: 1.5vw;
    width: 1.5vw;	
}

.lateral-menu h2{
	color: #606060;
	font-size: 1vw;
	font-weight: 400;
}

.arrow-down-icon{
	transform: rotate(90deg);
}

.first-section li:nth-child(1){
	background: var(--active-background);
	font-weight: 400;
}

.visibility-option-menu{
	visibility: visible;
}

.not-visibility-option-menu{
	visibility: hidden;
}


/*BARRA DE BOTONES*/
.buttons-bar{
	position: fixed;
	top: 4.7vw;
	border-left: none;
	border-right: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	z-index: 1;	
}


.left-and-right-arrows{
	height: 100%;
    width: 8vw;
    align-items: center;
    justify-content: center;
}

.left-arrow-buttons-bar{
	position: relative;
	transform: rotate(180deg);
}

.right-arrow-buttons-bar{
	position: relative;
	right: 17vw;
}

.linear-gradient{
	/* degradado */
	background: linear-gradient(-90deg, white 70%, transparent);
}

.buttons-container{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5vw;
}

.width-129{
	width: 129%;
}

.padding-left-right-1{
	padding: 0 1vw;
}

.right-6{
	right: 6vw;
}

.right-17{
	right: 17vw;
}

.buttons-container .button{
	height: 2.4vw;
	min-width: 5vw;
	font-weight: 400;
	font-size: 1vw;
	border-radius: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hover-background);
	border: 1px solid var(--active-background);
}

.padding-buttons{
	padding: 0 0.5vw;
}

.buttons-container .button:hover{
	background: var(--active-background);
}

.buttons-container .button:nth-child(1){
	background:  #030303;
	border: 1px solid  #030303;
	color: white;
}


/* AREA PRINCIPAL - PREVIEWS VIDEOS */
.main{
	width: 83vw;
	position: absolute;
	right: 0;
	top: 17vh;
	background: var(--hover-background);
}

.width-main{
	width: 94vw;
}

.previews-container{
	display: grid;
    grid-template-columns: repeat(auto-fill, 19.6vw);
    gap: 2px;
    place-content: center;
	margin-top: 2vw;
	overflow-y: scroll;
}

.video-information{
	width: 18vw;
	height: 21vw;
	margin-top: 0;
	margin-bottom: 4vw;
}

.preview-video{
	width: 18vw;
	height: 12vw;
}

.preview-video img{
	width: 18vw;
	height: 12vw;
	object-fit: cover;
}

.video-datas{
	position: relative;
	font-size: 1vw;
	text-align: center;
	background: #000;
	color: white;
}

.time{
	width: 2vw;
	top: -3.3vw;
	right: -15.1vw;
	padding: 0.2vw;
}

.tooltip{
	width: 16.1vw;
	right: -1vw;
	top: -5.8vw;
	padding: 0.3vw;
	font-weight: 300;
	display: none;
}

.preview-video:hover > .tooltip{
	display: block;
}

.video-information .picture-user{
	margin-top: 1vw;
}

.about-videos{
	width: 14vw;
	height: 17vh;
	margin-top: -4vw;
	margin-left: 4vw;
}

/* line-clamp= corta un texto que se sale de su contenedor, agregando puntos suspensivos al final
para aplicarla es necesario agregar las propiedades "display: -webkit-box;", "-webkit-line-clamp: Numero de lineas del texto;", 
"-webkit-box-orient: vertical; ", junto con "overflow:hidden;".

Es importante tener en cuenta que line-clamp por defecto se aplica en la primer linea de texto, por esta razón, 
si se quiere tener mas de una linea de texto es necesario aplicar las propiedades mencionadas en el parrafo anterior
 */
.about-videos h5{
	margin-top: 1vw;
	font-weight: 400;
	line-height: 1.4vw;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical; 
	overflow: hidden;
	text-overflow: ellipsis;
}

.channel-data{
	font-size: 1vw;
	font-weight: 300;
	color: #606060;
}

.channel{
	margin-top: -1vw;
}

.views-channel{
	margin-top: -0.6vw;
}

.separator{
	font-size: 1.4vw;
	font-weight: 400;
	position: relative;
	top: 0.2vw;
}





@media screen and (max-width: 1366px) {
	.button-search{
		height: 2.7vw;
	}
	
	.buttons-bar {
    	top: 4.2vw;
	}
}

@media screen and (max-width: 1280px) {
	.button-search{
		height: 3vw;
	}
}
	
@media screen and (max-width: 1024px) {
	/* iPad pro 1024x1366 41% */
	
	.header{
		height: 8vh;
	}

	.mobile-hidden{
		display: none;
	}

	.desktop-hidden{
		display: inline-block;
	}

	.nav-bar{
		height: 8vh;
		padding: 0 5vw;
		box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
	}

	.youtube-logo {
		height: 8vh;
		width: 21vw;
	}

	.youtube-logo img{
		/*height: 28px;
		width: 28px;*/
		height: 6vw;
		width: 6vw;
	}

	.youtube-logo p{
		/*font-size: 19px;*/
		font-size: 4.5vw;
		font-weight: 100;
		margin-left: 1vw;
	}
	
	.circles{
		/*height: 9vw;
		width: 9vw;*/
		height: 8vw;
		width: 8vw;
	}

	.mobile-navbar{
		width: 157vw;
		background: #f1f1f1;
	}

	.background-mobile-header{
		background: #f1f1f1;
	}

	.navbar-right{
		width: 20vw;
	}

	.mobile-button-search{
		margin-right: 2vw;
	}

	.mobile-button-search img{
		height: 100%;
		width: 100%;
		margin-top: 0px;
	}

	.search-box {
		border: none;
		margin-left: 0px;
	}

	.icon-content{
		padding: 0 3px;
	}

	.icon-arrow-back{
		height: 100%;
		width: 90%;
		margin-top: 0vh;
	}

	.input-search-mobile{
		width: 100%;
		font-size: 3vw;
		border: none;
		border-bottom: 1px solid #606060;
		background: #f1f1f1;
	}

	.icon-search{
		height: 100%;
		width: 100%;
	}

	/*BARRA DE BOTONES*/
	.buttons-bar{
		height: 6vh;
		width: 100%;
		top: 11vw;
		overflow-x: scroll;
	}

	.left-17{
		left: 0;
	}

	.explore-mobile{
		min-width: 24vw;
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px solid var(--borders-color);
	}

	.explore-mobile div{
		height: 50%;
		width: 68%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 1vw 2vw;
		background: var(--hover-background);
	}

	.explore-mobile div p{
		font-weight: 400;
	}

	.icon-explore-mobile{
		height: 3.7vw;
		width: 4vw;
	}

	.buttons-container{
		height: 7vw;
		gap: 1vw;
	}

	.buttons-container .button{
		height: 4vw;
		min-width: 12vw;
		box-sizing: border-box;
	}

	.button span{
		width: 90%;
		max-width: 10vw;
		overflow: hidden;
		white-space: nowrap;
		letter-spacing: 0px;
		text-overflow: ellipsis;
		font-size: 2.1vw;
	}

	/* AREA PRINCIPAL - PREVIEWS VIDEOS */
	.main{
		width: 100vw;
		left: 0;
		top: 14vh;
		background: none;
	}

	.previews-container{
		grid-template-columns: repeat(auto-fill, 28vw);
	}

	.video-information{
		width: 25vw;
		height: 32vw;
		margin-bottom: 3vw;
	}

	.preview-video{
		width: 25vw;
		height: 14vw;
	}

	.preview-video img{
		width: 25vw;
		height: 14vw;
	}

	.video-datas{
		font-size: 2vw;
	}

	.time{
		width: 4vw;
		top: -5.3vw;
		right: -20.1vw;
	}

	.circles-mobile{
		width: 6vw;
		height: 6vw;
	}

	.about-videos{
		width: 18vw;
		height: 11vh;
		margin-top: -7vw;
		margin-left: 7vw;
	}

	.about-videos h5{
		line-height: 2vw;
		font-size: 2vw;
	}

	.channel-data{
		font-size: 2vw;
	}

	.channel{
		margin-top: -2vw;
	}

	.views-channel{
		margin-top: -1.5vw;
	}

	.separator{
		font-size: 2vw;
	}

	/* FOOTER MOBILE */
	.footer-mobile{
		height: 8vh;
		width: 100%;
		z-index: 1;
		position: fixed;
		bottom: 0px;
		border-top: 1px solid var(--borders-color);
		background: white;
	}
	
	.navbar-footer{
		height: 8vh;
		width: 70%;
		padding: 0 15vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.icons-footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.icons-footer img{
		height: 5vw;
		width: 5vw;
	}
	
	.label-icon{
		font-size: 2.9vw;
		font-weight: 100;
	}
	
	.icon-shorts{
		height: 5vw;
		width: 5vw;
		top: 2vw;
	}
	
	.position-label{
		position: absolute;
		bottom: 1vw;
	}
}

@media screen and (max-width: 720px) {
	/* redmi note 9c 720x1600 35% */
	
	/*BARRA DE BOTONES*/
	.buttons-bar{
		height: 5vh;
		top: 18vw;
	}

	.explore-mobile{
		min-width: 29vw;
		height: 6vh;
	}

	.explore-mobile div{
		width: 78%;
	}

	.icon-explore-mobile{
		height: 7vw;
		width: 6vw;
	}

	.label-icon{
		font-size: 4vw;
	}

	.buttons-container{
		height: 9vw;
	}

	.buttons-container .button{
		height: 7vw;
		min-width: 19vw;
	}

	.button span{
		width: 100%;
		max-width: 16vw;
		font-size: 4vw;
	}

	/* AREA PRINCIPAL - PREVIEWS VIDEOS */
	.previews-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.video-information{
		width: 72vw;
		height: 55vw;
		margin-bottom: 7vw;
	}

	.preview-video{
		width: 72vw;
		height: 30vw;
	}

	.preview-video img{
		width: 72vw;
		height: 30vw;
	}

	.video-datas{
		font-size: 4vw;
	}

	.time{
		width: 9vw;
		top: -10.3vw;
		right: -61.1vw;
	}

	.circles-mobile{
		width: 10vw;
		height: 10vw;
	}

	.about-videos{
		width: 60vw;
		/* height: 11vh; */
		margin-top: -10vw;
		margin-left: 12vw;
	}

	.about-videos h5{
		line-height: 4vw;
		font-size: 4vw;
	}

	.channel-data{
		font-size: 3.4vw;
	}

	.channel{
		margin-top: -4vw;
	}

	.separator{
		font-size: 4vw;
	}
}

@media screen and (max-width: 280px) {
	/* galaxy fold 280x653 87% */

	.label-icon{
		font-size: 4vw;
	}

	/*BARRA DE BOTONES*/
	.buttons-bar{
		height: 5vh;
		top: 19vw;
	}

	.explore-mobile{
		min-width: 28vw;
	}

	.explore-mobile div{
		height: 51%;
		width: 76%;
	}

	.icon-explore-mobile{
		height: 5vw;
		width: 5vw;
	}

	.buttons-container{
		height: 8vw;
		gap: 2vw;
	}

	.buttons-container .button{
		height: 7vw;
		min-width: 20vw;
	}

	.button span{
		width: 90%;
		max-width: 18vw;
		font-size: 4vw;
	}
}