* {
    font-family: Arial;
  }

.conteneur {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 55px 280px 55px 260px 30px;
    /* grid-template-rows: 0.2fr 0.3fr 1.8fr 2.2fr 0.1fr; */

    grid-gap: 2px;

    background-color: cadetblue;
    margin: 10px 5px 5px 10px;
    color: white;
}

.box {
    border: 2px whitesmoke solid;
    background-color: black;

    border-radius: 15px;

    display: flex;
    align-items: center;   /* This One Align the items Vertically */
    justify-content: center; /* This One Align the items Horizontally */
}

.element4{
    grid-row: 2 / 6;
}

.element7{
    grid-row: 3 / 4;
    grid-column: 2 / 3;

    justify-content: space-around;
}

.element8{
    grid-row: 3 / 5;
    grid-column: 3 / 4;
}

.element10{
    grid-column: 2 / 4;
}

.element2{
    display: flex;
    flex-direction: row;
    /* justify-content: space-around;  */
    justify-content: center;
    gap: 50px;
}

.element5{
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: center;
    /* Contains videobox */
    
}

.videobox{
    /* display: flex; */
    /* flex-direction: row; */
    /* justify-content: space-between;  */

    border: 2px black solid;
    /* background-color: tan; */
    gap: 12px;

    /* background-color: cadetblue;
    margin: 10px 5px 5px 10px; */
}

.myvideo{
    width: 95%;
    height: 85%;
    margin: auto;
}

.myvideocontrols{
    width: 85%;
    height: 12%;
}

img {
    /* width: 80%;
	height: 60%; */
    width: 100%;
	height: 100%;
    
    background-color: black;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.Music_controls{
	color: lightblue;
    /* color: sienna; */

	font-size: 1rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;	
	margin-top: 3rem;
}
.Music_controls{
	width: 20rem;
	display: flex;
    justify-content: space-between;
    margin: auto;
    margin-top: 4rem;
    margin-bottom: 1rem;
}

#idSetNumber {
	/* color: red; */
	background-color: lightblue;
	height: 22px;
	width: 110px;
	font-size: 0.9rem;
	padding-left: 2px;
	padding-right: 2px;
    /* padding-bottom: 3px; */
	border-radius: 1rem;
	margin-left: 2px;

}

#idSetNumber:hover{
	/* background-color: aliceblue; */
    background-color: sienna;
	color: lightblue;
	/* font-size: 1rem; */
}

#idIngreseNumber {
	/* color: red; */
	/* background-color: red; */
	height: 19px;
	width: 40px;
	padding-left: 2px;
    padding-right: 2px;
	color: black;
	font-weight: 700;
}

.lbl {
	height: 19px;
	width: 150px;
	padding-left: 2px;
	padding-right: 1px;
	font-size: 1.1rem;
	color: lightblue;
	/* color: red; */
}

.element9{
    /* background-color: aquamarine; */
    padding-left: 4px;
    margin-left: 5px;
}

#testTranslation{
    height: 60%;
    /* background-color: brown; */
    margin-left: 14px;
    margin-right: 14px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 1.2rem;
}

.playListContainer{
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    align-items: flex-start;
    gap: 10px;
}

/* #btnSplitWords{
    background-color: lightblue;
} */

#btnShowTranslation:hover{
    background-color: sienna;
    color:aliceblue;
}