body {
    background-color: #0686d6;
}

h2 {
    background-color: #087CC7;
    width: 200px;
    border: 4px solid white;
    border-radius: 10px;
    padding: 1px;
    color: white;
    text-align: center;

}

h3 {
    inline-size: auto;
}

.liste-des-tags-existants {
    width: 45%;
    min-width: 210px;
    height: 450px;
    float: left;
    background-color: #D5D5D5;
    border-radius: 1%;
    padding: 1%;
    margin-left: 5px;
    text-align: center;

}

.frameList {
    width:350px;
    height: 50px;
    margin: 2px;

}



.video-player {
    width: auto;
    height: 450px;
    float: left;
    background-color:  #D5D5D5;
    padding: 10px;
    border-radius: 2%;
}

.pistes {
    width: 20%;
    float: left;
    background-color: #D5D5D5;
    border-radius: 1%;
    padding: 0.5%;
    min-width: 300px;


}

.tags{
    height: 200px;
    border-radius: 3%;
    background-color: darkgray;
    margin: 1%;
    padding: 1%;
}

.mitag {
    border-radius: 2%;
    margin: 1%;
    border-radius: 10px;
    padding: 1%;
    background-color: rgb(240, 240, 240);
    height: 50px;
    /* min-height: 150px; */

}

.mini-block {
    width: 100%;
    height: 10px;
}

.hangy {
    background-color: rgb(240, 240, 240);
    padding: 1%;
    text-align: center;
    width: 90%;
    margin: 5%;
    border-radius: 1%;
}

.hangy2 {
    background-color: rgb(240, 240, 240);
    padding: 1%;
    text-align: center;
    width: 90%;
    min-width: 90px;
    margin: 1%;
    margin-left: 5%;
    border-radius: 1%;
    border-radius: 10px;
}

/* Canvas */

.outsideWrapper{
    width: 400x; height:225px; 
}
.insideWrapper{ 
    width:100%; height:100%; 
    position:relative;
    }
.coveredImage{ 
    width:100%; height:100%; 
    position:absolute; 
    top:0px; left:0px;
    z-index:1;
}
.coveringCanvas{ 
    /* width:100%;height:100%;  */
    position:absolute; 
    top:0px; left:0px;
    background-color: rgba(255,0,0,0);
    z-index:2;

}


.navbar {
    background-color: blue;
}

.LoginTitle {
    background-color: #348EEF;
    color:white;
    transition-duration: 1s;
    font-size: 40px;
    width: 100%;
    margin-bottom: 10px;
    padding-top: 100px;
    font-style: normal;
    font-weight: 200px;
    font-family: "Source Sans Pro";
}

button {
	font:bold 13px Arial;
	background:#33C0FF;
	color:#fff;
    border:none;
    margin: 1%;
}

.selection {
    background-color:  #D5D5D5;
    padding: 10px;
    border-radius: 10px;
    /* height: 100px; */

}

.contain {
    width: 100%;
    height: 100%;
    padding-bottom: 563px;
    padding-top: 0;
    margin-top: 0;
    text-align: center;
    background-color: #2B7FE8;
}

.formulaireSession {
    text-align: center;
    width: 20%;
    min-width: 250px;
    border: 1px solid white;
    margin: 1px;
    color: white;
}

.formulaire {

    width: 250px;
    margin: 0 auto 10px auto;
    padding: 10px 15px;
    border :1px solid rgba(255, 255, 255, 0.4);
    background-color:#83B8F4 ;
    color: white;
    font-size: 18px;
    box-sizing: border-box;
    text-align: center;
}

.formulaireSession input{
    color:black
}

.formulaireSession select{
    color:black
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: white;
    /* opacity: 1; Firefox */
  }

.btn-info:hover{
    background-color: rgb(143, 219, 255);
}