.ngparachat label { font: 15px 'Open Sans',Verdana,Helvetica,sans-serif; color: #333333; letter-spacing: 0px; display: block; box-sizing: border-box; width: 100%; margin: 10px 0 3px 0; } .ngparachat form input[type=text] { border-color: #d3cfd1; border-width: 1px; border-style: solid; padding: 6px; background: #ffffff; font: 15px 'Open Sans',Verdana,Helvetica,sans-serif; color: #333333; letter-spacing: 0px; border-radius: 0; display: block; box-sizing: border-box; width: 100%; margin: 3px 0; -webkit-appearance: none; } .ngparachat form input[type=text]:focus { border-color: #d3cfd1; background: #ffffff; } .ngparachat form .ngparachatconsent { display: block; margin: 15px 0 5px 0; } .ngparachat form input[type=submit] { border-color: #d02e37; border-width: 1px; border-style: solid; padding: 10px 20px 10px 20px; background: #d02e37; font: 15px 'Open Sans',Verdana,Helvetica,sans-serif; color: #ffffff; letter-spacing: 0px; box-shadow: 3px 3px 3px rgba(0,0,0,0.1); border-radius: 2px; display: block; float: right; cursor: pointer; -webkit-appearance: none; } .ngparachat form .ngparachaterror { color: #a65856; } .ngparachat form input[type=submit]:hover { border-color: #333333; background: #333333; font-weight: normal; font-style: normal; text-transform: none; color: #ffffff; } .ngparachat form input[type=submit]:focus { border-color: #d02e37; background: #d02e37; box-shadow: 3px 3px 3px rgba(0,0,0,0.1); font-weight: normal; font-style: normal; text-transform: none; color: #ffffff; outline: none; } .ngparachat .ngparachatoutput { list-style: none; padding: 0; margin: 0; overflow-y: scroll; border-color: #d3cfd1; border-width: 1px; border-style: solid; } .ngparachat .ngparachatoutput .ngparachatemoji { width: 1.2em; height: 1.2em; background-size: 1.2em 1.2em; background-repeat: no-repeat; display: inline-block; vertical-align: -0.3em; } .ngparachat .ngparachatoutput .ngparachatbigemoji { width: 3em; height: 3em; background-size: 3em 3em; background-repeat: no-repeat; display: block; } .ngparachat .ngparachatwink { background-image: url(../img/wink.svg); } .ngparachat .ngparachatsad { background-image: url(../img/sad.svg); } .ngparachat .ngparachatdead { background-image: url(../img/dead.svg); } .ngparachat .ngparachathappy { background-image: url(../img/happy.svg); } .ngparachat .ngparachatlol { background-image: url(../img/lol.svg); } .ngparachat .ngparachatsurprise { background-image: url(../img/surprise.svg); } .ngparachat .ngparachatlove { background-image: url(../img/love.svg); } .ngparachat .ngparachatangry { background-image: url(../img/angry.svg); } .ngparachat .ngparachatoutput li { margin: 10px 20px 10px 10%; padding: 14px 18px; border-radius: 12px; display: block; position: relative; line-height: 16px; transition: opacity 0.5s ease, transform 0.5s ease; } .ngparachat .ngparachatoutput li.ngparachatmy { margin: 10px 10% 10px 20px; } .ngparachat .ngparachatoutput li strong { display: block; font-weight: bold; } .ngparachat .ngparachatoutput li span { display: block; margin-top: 3px; } .ngparachat .ngparachatoutput li small { display: block; margin-bottom: 3px; font-size: 80%; -webkit-text-size-adjust: 100%; text-align: right; } .ngparachat form { display: none; margin: 0; padding: 0; box-sizing: border-box; } .ngparachat form:after { content: ""; display: table; clear: both; } .ngparachat .ngparachatemojis { float: left; margin-bottom: 10px; } .ngparachat>form>div { margin-top: 20px; } .ngparachat .ngparachatemojis a { display: inline-block; width: 20px; height: 20px; background-size: 20px 20px; background-repeat: no-repeat; } .ngparachat .ngparachatemojis a span { display: none; }