/* Eléments principaux de la page */
/*body
{ background-image : url('../img/Alveoles-Mini.jpg'); 
  background-repeat : repeat;
  overflow: hidden;
}*/
body
{ background-image : url('../img/BG_Disconnect.jpg'); 
  background-repeat : no-repeat;
  background-size: 100%;
  overflow: hidden;
}
.toast
{ font-size: 2.5em !important; 
  width: 100% !important;
  justify-content: center !important;
  margin-left: -36% !important;
}
#toast-container
{  width: 50% !important;
}
#Le_Mot_De_Passe, #Txt_Le_Login
{ background-color: white !important;
  border: solid black !important;
  color: black;
}
.row .col
{   padding: 0 .05rem !important;
    min-height: 50px !important;
}
.container
{ margin-top: 20% !important;
}
.card
{ background-color: #e65247!important;
  border-radius: 15px !important;
  height: 230px !important;
  margin-top: 20% !important;
}
#Img_Ok
{ border-radius: 10px;
  margin-right: -80% !important;
}
#Img_Place_Password
{ margin-top: 10px;
}
img#Img_Place_Logo
{   margin-left: 72px;
    position: absolute;
    top: 22%;
}
img#Oublie
{   position: absolute;
    top: 70%;
    right: 45%;
}

/*------------------------------------------------------------------------------------------------------------Portrait--------------------------------------------------------------------------------------*/
/*Phone Normal (320 or 640)*/
@media only screen and (min-device-width : 320px) and (max-device-width : 640px) and (orientation : portrait)  {
    body
    {background-size: 385%;
     background-position: 60% 0% ;
    }
    .container
    { margin-top: 10% !important;
      margin-left: -13% !important;
    }
    .card
    { height: 430px !important;
      margin-top: 5%;
    }
    img#Img_Place_Logo
    {   width: 100%;
        margin-left: 0px;
        position: relative;
        top: 22%;
    }

    .row .col.s6 {
        width: 100%;
    }

    img#Oublie
    { width: 62%;
      top: 78%;
      right: 35%;
    }
    #Le_Mot_De_Passe, #Txt_Le_Login
    { 
        height: 5rem !important;
        font-size: 4em !important;
    }
    #Img_Ok
    { border-radius: 20px;
      margin-top: 1.5%;
      width: 20%;
    }
}

/*Tablette Normal*/
@media only screen and (min-device-width :641px) and (max-device-width : 2600px) and (orientation : portrait)  {
    .container
    {
        margin-left: -13% !important;
        width: 85%;
    }
    .card
    { height: 480px !important;
      margin-top: 5%;
    }

    @media only screen and (min-device-width :700px) and (max-device-width : 1024px) and (orientation : portrait)  {
        .container
        {
            margin-left: -14% !important;
            margin-top: 5% !important;
        }
        .card
        { height: 430px !important;
          margin-top: 15% !important;
        }

    }
    img#Img_Place_Logo
    {   width: 100%;
        margin-left: 0px;
        position: relative;
    }

    .row .col.s6 {
        width: 100%;
    }

    img#Oublie
    { width: 12%;
      top: 77%;
    }
    #Le_Mot_De_Passe, #Txt_Le_Login
    { 
        height: 5rem !important;
        font-size: 4em !important;
    }
    #Img_Ok
    { border-radius: 20px;
      margin-top: 1.5%;
      width: 20%;
    }
}



/*------------------------------------------------------------------------------------------------------------Landscape--------------------------------------------------------------------------------------*/
/*Phone (1024 or 768) Landscape*/
@media only screen and (min-device-width :320px) and (max-device-width : 1024px) and (orientation : landscape) {
    html{
        overflow-y: hidden;
    }
    .container
    { margin-top: 10.5% !important;
      margin-left: 4.5% !important;
    }
    .card
    { height: 210px !important;
      left: 9% !important;
    }
    img#Img_Place_Logo
    {  margin-left: 0px;
       top: 2%;
    }
    #Img_Ok
    {   margin-right: -79% !important;
        width: 27%;
    }
    img#Oublie
    {   top: 75%;
        width: 66%;
        right: 33%;
    }
}

/*Tablette Normal */
@media only screen and (min-device-width :1024px) and (max-device-width : 1150px) and (orientation : landscape)  {
    .container
    {
        margin-left: 17% !important;
        width: 50%;
        margin-top: 2% !important;
    }
    .card
    { height: 400px !important;
      margin-top: 10% !important;
    }

    @media only screen and (min-device-width :1024px) and (max-device-width : 1080px) and (orientation : landscape)  {
        .container
        {
            margin-left: 14% !important;

        }
        .card
        {
            margin-top: 15% !important;
            left :0% !important;
        }
        img#Oublie
        { width: 12%;
          top: 77%;
        }

    }
    img#Img_Place_Logo
    {   width: 100%;
        margin-left: 0px;
        position: relative;
    }

    .row .col.s6 {
        width: 100%;
    }

    img#Oublie
    { width: 12%;
      top: 83%;
    }
    #Le_Mot_De_Passe, #Txt_Le_Login
    { 
        height: 5rem !important;
        font-size: 4em !important;
    }
}