p
{
    margin: 0;
}

.sacdiv, .sacdivf /* icon du chat' fermer */
{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 90;
    height: 50px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color: rgb(255 255 255);
    box-shadow: 0px 10px 10px 0px rgba(158, 157, 157, 0.445);
    overflow: hidden;
}

@media screen and (min-width: 150px) and (max-width: 600px)
{  
    .sacdivf /* icon du chat' fermer */
    {
        position: fixed;
        bottom: 0;
        right: 0;
        z-index: 90;
        width: 100%;
        height: 50px;
        margin-right: 0px;
        margin-bottom: 0px;
        background-color: rgb(255 255 255);
        box-shadow: 0;
        overflow: hidden;
    }
}

.sacdiv
{
    width: 50px;
    border-radius: 100%;
    color: transparent;
    transition: all 0.3s ease-in-out 1s;
}

.sacdiv:hover
{
    width: 170px;
    border-radius: 25px;
    color: rgb(0, 0, 0);
    transition: all 0.3s ease-in-out 0s;
}

.sacdivf
{
    width: 170px;
    border-radius: 25px;
    color: rgb(0, 0, 0);
}

@media screen and (min-width: 150px) and (max-width: 600px)
{  
    .sacdivf
    {
        width: 100%;
        border-radius: 0;
    }
}

.sacimg
{
    position: absolute;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-right: 10px;
    margin-top: 10px;
}

.sacp
{
    font: 400 15px arial;
    float: left;
    margin-left: 15px;
    margin-top: 17.5px;
}

/* ------- Focus div -------- */

.sacfocusdivcentral
{
    z-index: 2147483000;
    position: fixed;
    bottom: 84px;
    right: 20px;
    height: min(700px, 100% - 104px);
    min-height: 80px;
    width: 400px;
    max-height: 700px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
    border-radius: 16px;
    overflow: hidden;
    opacity: 1;
    background-color: rgb(255, 255, 255);
}

@media screen and (min-width: 150px) and (max-width: 600px)
{  
    .sacfocusdivcentral
    {
        z-index: 2147483000;
        position: fixed;
        bottom: 50px;
        right: 0px;
        height: calc(100% - 50px);
        width: 100%;
        max-height: 900px;
        box-shadow: 0;
        border-radius: 0px;
    }
}

/* --- header --- */

.sac_focus_logo_avatars /* => header top */
{
    position: absolute;
    width: 100%;
    height: 90px;
    background-color: rgb(0, 87, 255);
    z-index: 2;
}

.sac_focus_avatars
{
    float: left;
    width: 40px;
    height: 40px;
    background-color: transparent;
    margin-top: 31px;
    margin-left: 31px;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 100%;
    overflow: hidden;
}

.sac_focus_nom
{
    margin-top: 50px;
    float: left;
    width: auto;
    height: 20px;
    border: 0;
    font: 500 20px arial;
    margin-left: 7px;
    color: rgb(255, 255, 255)
}

.sac_focus_logo
{
    float: right;
    width: 40px;
    height: 40px;
    background-color: transparent;
    margin-top: 31px;
    margin-right: 31px;
    background-size: 100%;
    background-repeat: no-repeat;
}

/* --- Iframe --- */

.sacfocusiframe
{
    position: absolute;
    margin-top: 90px;
    height: calc(100% - 180px);
    width: 400px;
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: transparent;
    padding: 0;
    border: 0;
    margin-left: 0;
    margin-bottom: 0;
}

@media screen and (min-width: 150px) and (max-width: 600px)
{  
    .sacfocusiframe
    {
        height: calc(100% - 180px);
        width: 100%;
        max-height: 2500px;
    }
}

/* --- Body --- */

.sac_focus_body
{
    float: left;
    margin-top: 0px;
    /*height: min(520px, 100% - 100px); *//* 700 | 90 + 90 = 180 | 700 - 180 = 520*/
    height: auto;
    min-height: 520px;
    width: 100%;
    z-index: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: transparent;
    padding: 0;
    margin-bottom: 0px;
}

/* --- Dégradé --- */

.sac_focus_degrade
{
    height: 250px;
    width: 100%;
    background-image: linear-gradient(117.67deg, rgb(27, 59, 102), rgb(0, 87, 255), rgb(202, 244, 247));
    z-index: -1;
    opacity: 1;
}

/* --- Fin de Dégradé --- */

.sac_focus_bienvenue
{
    float: left;
    width: calc(100% - 60px);
    margin-left: 25px;
    margin-top: 70px;
    border: 0;
    font: 700 28px Arial, Helvetica, sans-serif;
    color: rgb(255, 255, 255);
    background-color: transparent;
}

.pf1, .pf2, .pf3
{
    margin-left: 0;
    padding: 0;
}

.pf1
{
    margin-top: 5px;
}

.pf2
{
    margin-top: 5px;
}

.pf3
{
    margin-top: 5px;
}

.sac_focus_msg_dl /* >= Div pour msg deja la */
{
    float: left;
    height: auto;
    width: calc(100% - 80px);
    margin-top: 15px;
    margin-left: 25px;
    background-color: rgb(244, 244, 244);
    border-radius: 20px;
}

.sac_focus_msg_dl_d1, .sac_focus_msg_dl_d2
{
    background-color: transparent;
}

.sac_focus_msg_dl_d1 /* Div top left */
{
    float: left;
    height: auto;
    min-height: 12px;
    width: auto;
    min-width: 20px;
    margin-left: 10px;
    margin-top: 10px;
    font: 300 12px arial;
}

.sac_focus_msg_dl_d2 /* Div left center */
{
    float: left;
    height: auto;
    min-height: 12px;
    width: auto;
    min-width: 20px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    font: 400 16px arial;
}

/* --- While Msg fx --- */

.sac_focus_msg_fx, .sac_focus_mf_avatar_agent, .sac_focus_mf_nom_agent, .sac_focus_mf_global2_agent
{
    background-color: transparent;
}

.sac_focus_msg_fx, .sac_focus_mf_avatar_agent, .sac_focus_mf_nom_agent, .sac_focus_mf_global2_agent,
.sac_focus_mf_divext_agent, .sac_focus_mf_divdate_agent
{
    float: left;
}

.sac_focus_msg_fx /* => Div global 1 (Absolu) et (Non visible) pour Agent et Client */
{
    height: auto;
    min-height: 50px;
    width: calc(100% - 60px);
    margin-top: 15px;
    margin-left: 25px;
    border-radius: 0px;
}

.sac_focus_mf_avatar_img /* => Image en soit dans div avatar pour agent et client */
{
    height: 40px;
    width: 40px;
}

/* -- Pour agent --- */

.sac_focus_mf_avatar_agent /* => Div pour avatar */
{
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: rgb(236, 236, 236);
    overflow: hidden;
}

.sac_focus_mf_nom_agent /* => Div pour nom  */
{
    height: auto;
    min-height: 10px;
    width: auto;
    min-width: 30px;
    font: 200 12px arial;
    margin-left: 5px;
}

.sac_focus_mf_global2_agent /* => Div pour le conteneure absolu du text */
{
    height: auto;
    min-height: 50px;
    width: 275px;
    margin-top: 5px;
    margin-left: 5px;
    border-radius: 15px;
    background-color: rgb(244, 244, 244);
}

.sac_focus_mf_divext_agent /* => Div pour vrai global du text interieur */
{
    height: auto;
    min-height: 15px;
    width: 250px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
    font: 400 16px arial;
}

.sac_focus_mf_divdate_agent /* => Div pour la date */
{
    height: auto;
    width: 250px;
    margin-top: 7px;
    margin-left: 10px;
    margin-bottom: 10px;
    text-align: right;
    font: 400 12px arial;
}

/* --- Pour client --- */

/* (!) Tout les instruictions pour client sont presque pareils 
(A quelleque "margin-right/left" et "float: left/right; etc...") */

.sac_focus_mf_nom_client, .sac_focus_mf_divext_client, .sac_focus_mf_divdate_client
{
    background-color: transparent;
}

.sac_focus_mf_avatar_client
{
    float: right;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: rgb(236, 236, 236);
    overflow: hidden;
}

.sac_focus_mf_nom_client
{
    float: right;
    height: auto;
    min-height: 10px;
    width: auto;
    min-width: 30px;
    font: 200 12px arial;
    margin-right: 5px;
    text-align: right;
}

.sac_focus_mf_global2_client
{
    float: left;
    height: auto;
    min-height: 50px;
    width: 275px;
    margin-top: 5px;
    margin-left: 0px;
    margin-right: 5px;
    border-radius: 15px;
    background-color: rgb(54, 127, 238);
}

.sac_focus_mf_divext_client
{
    float: left;
    height: auto;
    min-height: 15px;
    width: 250px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: left;
    font: 400 16px arial;
    color: rgb(255, 255, 255);
    overflow: hidden;

}

.sac_focus_mf_divext_mix_p
{
    width: 250px;
    height: auto;
    word-wrap: break-word;
}

.sac_focus_mf_divdate_client
{
    float: left;
    height: auto;
    width: 250px;
    margin-top: 7px;
    margin-left: 10px;
    margin-bottom: 10px;
    text-align: left;
    font: 400 12px arial;
    color: rgb(255, 255, 255);
}

/* --- footer --- */

input{
    outline: none!important;
}

.sac_focus_footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
    background-color: rgb(255, 255, 255);
    z-index: 4;
    margin: 0;
}

.sac_focus_footer_1
{
    float: left;
    width: 100%;
    height: 50px;
    background-color: transparent;
}

.sac_focus_footer_input_1
{
    float: left;
    width: calc(100% - 85px);
    height: 49px;
    background-color: transparent;
    margin-left: 0px;
    margin-right: 0px;
    border: 0;
    border-top: 1px solid rgb(197, 197, 197);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    padding-left: 15px;
    padding-right: 70px;
    font: 400 14px arial;;
}

.sac_focus_footer_input_2
{
    position: absolute;
    right: 0;
    margin-right: 25px;
    margin-top: 10px;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    background-color: rgb(227, 227, 227);
    border: 0;
}

.sac_focus_footer_2
{
    float: left;
    height: 40px;
    width: 100%;
    background-color: rgb(227, 227, 227);
    text-align: center;
    font: 400 16px arial;
}

.sac_focus_footer_2_text
{
    margin-top: 11px;
}