/****** general ******/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-sizing: padding-box;
  -moz-box-sizing: padding-box;
  box-sizing: padding-box
}

body { width: 100%; background-color:#f7f7f7; }

a { text-decoration: none }

ul, li {
  list-style: none;
  padding: 0
}

button, input[type=text] { outline: none }

.clear { clear: both }

hr {
    border: 0;
    width: 30px;
    height: 4px;
    background: #aad04f;
    float: left;
}

.container {
    max-width: 1200px;
    margin: 150px auto;
    padding: 0 !important;
    position: relative;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    display: block; /* For Firefox */
}

/* */

div[contenteditable=true] {
    border: 1px solid #5d5d5d;
    border-radius: 5px 0px 0px 5px;
    width: 290px;
    padding: 5px;
}

pre {
    background: #EEE;
    padding: 5px;
    width: 290px;
}

.emotion {
    position: relative;
    width: 326px;
    height: 40px;
    display: flex;
}

.emotion-Icon {
    position: relative;
    right: 24px;
    top: 5px;
    cursor: pointer;
}

.ShowImotion { display: flex !important; }

.emotion-area {
    background: #fff;
    position: absolute;
    bottom: 58px;
    display: none;
    border-radius: 5px;
    right: 0;
    width: 246px;
    flex-wrap: wrap;
    overflow-y: scroll;
    height: 150px;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
}

.top {
    top: 130%;
    bottom: auto
}

.emotion-area img {
    margin: 4px;
    cursor: pointer;
}
#btn-input img {
    width: 26px;
    height: 26px;
    margin-top: -4px;
}
/****** end general ******/


#canvas {
    border: 1px solid red;
    margin: auto
}


/**** start madia Query ****/

@media only screen and (max-width : 1200px) {
}

    /* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

    /* Small Devices, Tablets */
 @media only screen and (max-width : 768px) {
}

    /* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */ 

@media only screen and (max-width : 320px) {
}