*{
    box-sizing:border-box;
}

@font-face {
    /*font-family: 'app';
    src: url('font/app.eot?23297456');
    src: url('font/app.eot?23297456#iefix') format('embedded-opentype'),
    url('font/app.woff?23297456') format('woff'),
    url('font/app.ttf?23297456') format('truetype'),
    url('font/app.svg?23297456#app') format('svg');*/
    font-family: 'PlumBAE';
     url('font/PlumBAE.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="i-"]:before, [class*=" i-"]:before {
    font-family: 'PlumBAE';
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    width: 1.5em;
    margin-right: .2em;
    text-align: center;font-variant: normal;
    text-transform: none;line-height: 1em;
    margin-left: .2em;
    font-size: 150%;
}

.i-user:before { content: '\e801'; } /* '' */
.i-send:before { content: '\e802'; } /* '' */


body{
    font-family: 'PlumBAE';
    margin: 0;
    padding: 0;
    background: url(../img/fond.png);
}
.main{
margin: 0 auto;
    height: 80vh;
    width:680px;
    position:relative;
    top:60px;
    /*padding: 5px 2%;*/
    /*border jl*/
    border:solid 2px #694306;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;}

.container{margin: 0 auto;
    height: 50vh;
    width:600px;
    position:relative;
    top:60px;
    padding: 5px 2%;

    
}

.topbar{
    background-color: hsla(52, 61%, 57%, 0.72);
    height:60px;
    width:600px;
    line-height: 60px;
    padding:0 2%;
    position:fixed;
    top:65px;
    color: #FFF;
    text-shadow:0px 0px 3px #000000;
}

.topbar .app-name{
    color:inherit;
    text-decoration:none;
    font-size:2em;
    font-weight:500;
}

.topbar .menu{
    position:absolute;
    right:10px;
}

.topbar .menu a{
    color:inherit;
    text-decoration:none;
    float:left;
    padding:0 15px;
}

.topbar .menu a:hover{
    background-color: #2c3e50;
}

.topbar .menu a.active{
    background-color: #2c3e50;
}

.field{
    position: relative;
    height: 72px;
    padding: 16px 0 8px 0;
}

.field-label{
    position: relative;
    margin: 0;
    display: block;

    color: red ;/*#bfbfbf*/
    line-height: 16px;
    font-size: 16px;
    font-weight: 400;

    transform: translateY(24px);
    transition: transform 0.3s, color 0.3s;
    transform-origin: 0 50%;
}

.field-input{
    position: relative;
    display: block;
    width: 100%;
    height: 32px;
    padding: 8px 0;

    line-height: 16px;
    font-family: Roboto;
    font-size: 16px;

    background: transparent;
    border: none;
    -webkit-appearance: none;
    outline: none;
}

.field-area{
    height:auto;
    padding-top:5px;
    width:90%;
}

.field::after, .field::before{
    content:'';
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 6px;
    left: 0;

    background-color: #e6e6e6;
}

.field::after{
    background-color: #2195F2;
    transform: scaleX(0);
    transition: transform 0.3s;
}

.has-label .field-label{
    transform: translateY(0) scale(0.75);
}

.is-focused .field-label{
    color: #2195F2;
}
.field.is-focused::after{
    transform: scaleX(1);
}

.field.error .field-label{
    color: #e74c3c;
}

.field.error::after{
    background-color: #e74c3c;
}

button{
    background-color:#34495e;
    border:2px solid #34495e;
    display:block;
    width:100%;
    height:36px;
    color:#fff;
    border-radius:2px;
    cursor:pointer;
    font-size:16px;
    margin:5px 0;
    outline:none;
}

button:hover{
    background:none;
    color:#34495e;
}

.header{
    display: block;
    border-bottom: 2px solid #000;
}

.header.header-form{
    margin-bottom:-8px;
}

p.error{
    color: #e74c3c;
}

.membre{
    display:block;
    background-color:#ccc;
    padding:10px 10px;
    margin-bottom:10px;
    box-shadow:1px 2px 5px 1px rgba(0, 0, 0, 0.4);
    position:relative;
    border-radius:2px;
}

.membre .select{
    position:absolute;
    right: 10px;
    top: 9px;
    background-color:#3498db;
    color:#fff;
    display:block;
    width:40px;
    height:40px;
    border-radius:50%;
    text-align:center;
    line-height:40px;
}

.membre .select:hover{
    background-color:#2980b9;
}

.bottom{
    position:fixed;
    background-color:#fff;
    bottom:50px;
    width:600px;
}

.bottom .send{
    background-color:#34495E;
    color:#fff;
    position:absolute;
    right:0px;
    top:25px;
    width:38px;
    border-radius:50%;
    padding:0;
    font-size:12px;
    outline:none;
}

.bottom .send:hover{
    background-color: #2C3E50;

}

.messages-box{
    position:relative;
    width: 600px;
    background-color:#fff;
    margin-bottom:95px;
}

.messages-box .message{
    padding: 3px 8px;
    margin:3px 0;
    border-radius:12px;
    max-width:75%;
    display:inline-block;
    min-height:25px;
}

.messages-box .message.message-membre{
    background-color:#3498db;
    float:right;
}

.messages-box .message.message-user{
    background-color:#bdc3c7;
}