*{margin:0;padding:0;box-sizing: border-box;}
body{height:100vh;background:#444548;font-family: Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";}
#page {display:flex;width:100%;height:100vh;background-color:#444548}
#login {margin:auto;max-width:25%}
#login_form input {padding: .3em;border-radius: 4px;width:100%}
#login_form fieldset {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
#login_form fieldset:last-child {margin-bottom: 0;width: 30%;margin-left:auto;}
#login_form label {margin-bottom: .5em}
#fenetre {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
}
#fenetregauche {
    min-width: 100%;
    padding: 0px 0px 0 0px;
    position: relative;
    display: flex;
    flex-direction: column;
}
#slide {
    /* max-height: calc((100vw - 40px) * .69 * .5625); */
    min-width: 100%;
    /* border-radius: 4px;
    box-shadow: 0 0 4px 0 rgba(0,0,0,.14),0 3px 4px 0 rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2); */
}
#slide iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
#presentation {
    padding: 0;
    /* height: 71vh; */
    /* margin-left: 20px; */
    /* height: calc((100vw - 40px) * .69 * .5625); */
    color: rgba(255,255,255,.7);
    overflow-y: auto;
    max-width: 100%;
    margin: 0;
    /* min-height: 100%; */
}
#presentation .card  {
    display: flex;
    /* flex-wrap: wrap; */
    height:100%
}
#presentation .card .card-body {
    overflow:auto
}
.card {
    border-radius: 4px;
    background-color: #242731;
    box-shadow: 0 0 4px 0 rgba(0,0,0,.14),0 3px 4px 0 rgba(0,0,0,.12),0 1px 5px 0 rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    word-wrap: break-word;
}
#sonactive {
    font-size: 1.5em;
    color: red;
    position: absolute;
    top: 2em;
    left: 1.5em;
    line-height: 3em;
}
#sonactive:hover {cursor: pointer}
#sonactive i{font-size: 3em}
#fenetredroite {
    display: flex;
    margin-top: 20px;
    max-width: 100%;
    width: 100%;
    padding: 0 20px;
    /* height: 100%; */
    /* max-height: calc((100vh - 80px) - ((100vw - 80px) * .69 * .5625)); */
}
#tchat {
    max-height: 87%;
    margin-right: 0px;
    color: rgba(255,255,255,.7);
    overflow-y: auto;
    max-width: 100%;
    min-height: 87%;
}
.affichefenetreadmin {
	position: absolute;
	right: 0;
	transform: scale(1.71429) translate(0%, -10%);
    cursor: pointer;
    display:none;
}
#entete {margin-bottom: 1em;}
#logo{max-width:100px;margin-right: 1em;}
#titre {margin: .3em 0;font-size: 1.5em;text-align:center}
#message {
    max-width: 100%;
    padding: 20px 20px 0;
    margin-left: auto;
    margin-right: 0;
}
#mess {width:100%;max-height: 76%;MIN-height: 76%;}
#messenvoi {
    margin: auto;
    padding: .3em;
    border-radius: 4px;
    text-align: center;
    width: 70%;
    display: block;
}
.message{color: #AAA;margin-bottom:.3em ;background-color:#000;padding:.3em;border-radius:4px}
.texte{padding-left:1em}
.moi{color: #FFF;text-align: right;padding-right: .3em;}
.mesgauche {margin-right: 3em;border-radius: 20px 20px 20px 0px;}
.mesdroite {margin-left: 3em;border-radius: 20px 20px 0px 20px;}
/************************************* modif avec tchat */
#fenetredroite {
    flex-direction: column;
    height: 100%
}
#presentation {
    padding: 0;
    color: rgba(255,255,255,.7);
    overflow-y: auto;
    max-width: 100%;
    margin: 0;
    min-height: 35%;
    padding-bottom: 20px;
    flex-direction: row
}
#presentation .card-header{
    width: 100%;
}
#fenetreadmin {
	position: absolute;
	width: 100%;
	height: 100%;
	background: red;
	z-index: 1000;
    display: none;
    color:#2C2C2C;
}
#fenetreadmin i {
	position: absolute;
	right: .3em;
	top: .5em;
    color: black;
    cursor: pointer;
}
.messageadmin, .messagemoi {
	margin-top: 1em;
	background-color: black;
	color: #fff;
	padding: .3em;
    border-radius: 4px;
    text-align: left;
}
.messageadmin {
    margin-right: 2em;
}
.messagemoi {
    margin-left: 2em;
}
#messageadmintexte{width: 100%;}
#envoyermessageperso {
	margin: 0 auto;
	display: block;
}
#com {
    max-height: 65%;
    min-height: unset;
    height: 65%;
    padding-bottom: 20px;
    /* display:none; */
    position: relative;
	margin-top:20px
}
#tchat .card{
    height: 100%;
}
#tchat .card-body {
    overflow: auto;
}
/******* theme clair*/
body.clair {background-color: #FFF !important;}
.cardclair {background-color: #CCC !important;}
.messageclair {background-color: #AAA !important;color: #333 !important}
.presentationclair {color: #333 !important;}
@media screen and (min-width: 835px){
    #fenetre {
        height: 100%;
    }
    #fenetregauche { 
        min-width: 69%;
		max-width: 69%;
        padding: 20px 0px 0 20px;
    }
    #fenetredroite {
        max-width: 31%
    }
}