/******************************************/
/* Feuille de style                       */
/******************************************/

/*STYLES GENERAUX ASSOCIES AUX BALISES COMMUNES==================================================================*/
html {
    position: relative;
    min-height: 100%;
}
body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
    font-size: 16px;
}


hbody {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #eee;
}

h1 {
    margin-top : 2px;
    margin-bottom :5px;
}


header
{
    /*  text-align : center;  */
    background-color: #f5f5f5;
}

footer
{
    /* position: fixed;*/
    text-align : center; 
    position: absolute;
    bottom: 0;
    width: 100%; 
    /* Set the fixed height of the footer here */
    height: 60px;
    background-color: #f5f5f5;
}

.error {
    color: red;
}

.mandatoryref
{
    color: red;
}

.disconnect
{
    text-align : right; 
}

div.cadre1{
    background: #FFF779;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 20px;
    width: 400px;
    margin: 15px;
}
div.cadre
{

    background-color: aqua;
    padding : 5px;
    border : 1px solid;
    border-radius: 10px;
    width: 200px;
}
div.arrondi
{
    background-color: #fff;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -khtml-border-radius: 20px;
    -webkit-border-radius: 20px;
}

.logo {
    float: left;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 20px;

}

#language {
    z-index: 0;
    margin-top: 5px;
    margin-right: 25px;
    margin-bottom: 2px;
    float: right;
}

.contactTable > tbody > tr >td{
    padding: 3px 40px 2px 3px; 
}
.navbar-static-top {
    margin-bottom: 19px;
}

.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.error {
    color: red;
}

.margin_top10 {
    margin-top: 10px; 
}

.margin_right10 {
    margin-right: 10px; 
}

.bolder {
    font-weight: bolder;
    font-size: 1.1em;
}

.titre_chant {
   font-size: 1.4em; 
   
   
   
}
.chanteur_chant {
   font-size: 1.2em; 
   
  
   
}
/******************************************************************
/*surcharge bootstap css*/

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
   max-height: 300px; 
    /* Set slide height here */
    //border: 1px solid grey;
}


.carousel-inner{
  max-height: 300px !important;
}


.carousel-inner  button {
    //    margin-top: 2px;
} 

.carousel-caption{
 
}


.width-400 {
   width: 400px; 
}

.height-200 {
    height: 200px;
}



.container p{
    text-align: center;
}



.container-login {
    padding: 25px;
    position: fixed;
}

.container_vignette {
    max-width: 400px;
    max-height: 300px;

}

.marron{
    //background-color: rgba(182,126,101, 1);
    //border-color: rgba(182,126,101, 1);
    opacity: 0.8;

}

.form-login {
    margin-top: 10%;
    background-color: #EDEDED;
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border-color:#d2d2d2;
    border-width: 5px;
    box-shadow:0 1px 0 #cfcfcf;
}

h4 { 
    border:0 solid #fff; 
    border-bottom-width:1px;
    padding-bottom:10px;
    text-align: center;
}

.form-control {
    border-radius: 10px;
}

.wrapper {
    text-align: center;
}


.navbar{
    /*  text-align : center;  */
    background-color: #f5f5f5;
    
}

.navbar-toggler-icon {
background-image: url('https://mdbootstrap.com/img/svg/hamburger6.svg?color=000');
}



/* Custom page CSS
-------------------------------------------------- */


#actu {
    background-color: #f5f5f5;
    padding : 5px;
    border : 2px ridge #f5f5f5;
    border-radius: 10px;
    margin-bottom: 2%;
    margin-top: 2%;
    box-shadow: 10px 10px grey;

}

#actu p{
    text-align: center;
}
table caption
{
    font-size: 2em;
    text-align: center;
}
/*  à utiliser pour les tableaux d'affichage php */
table{
    border-collapse: collapse;
    width : 100%;
    margin : 0 auto;
}

td, th {
    text-align: center;
    padding : 3px;
    border: 1px solid cadetblue;
    color : #777;
    min-width: 20px;



}

#playlist {
    text-align: center;
    //padding : 5px;
    border : 1px solid grey;
    border-radius: 10px;
    margin-bottom: 2%;
    margin-top: 2%;




}

#playlist ul{
    //padding-left : 1%;
    //padding-right :1%;
    display : flex;
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: center ;
    justify-content: space-between;
    align-items: center;
    //clear: both;

}
#playlist li{
    //float: left;
    //min-height : 30px;
    list-style-type: none; 
    //padding-bottom: 1%;
    //padding-top: 1%;  
    //margin : 1%;
    border: 1px solid grey;
    border-radius: 10px;
    background-color: #e3ffff;
    margin-bottom: 10px;


}



.mybutton{
    width: 150px;    
}

.bloc_buttons{
    text-align: center;
}   
.bloc_buttons button {
    margin-top: 2px;
    margin-right: 2px;
}

.bloc_buttons a{
    margin-top: 2px;
    margin-right: 2px;
} 

.accueilDastum {
    margin : 0 auto;
    position : relative;
    height: 636px;
    width : 987px;
    background: url("../media/images/image-de-fond.png") no-repeat center ;
    background-size: 987px 636px;
    background-color: black;
    color : red;
    
}

.player {
    position : absolute  ; 
    left: 18px;
    top: 359px;
    width: 300px;


}

.player2 {
    position : absolute  ; 
    left: 18px;
    top: 400px;
    width: 250px;


}


.player_dastum {
    width: 150px;
}

.btn-info{

}

.background_black {
    background-color: black;
}