.ngparachat label { font: 15px 'Open Sans',Verdana,Helvetica,sans-serif; color: #9a9795; letter-spacing: 0px; display: block; box-sizing: border-box; width: 100%; margin: 10px 0 3px 0; } .ngparachat form input[type=text] { border-color: #f1eeeb; border-width: 1px; border-style: solid; padding: 4px; background: #ffffff; font: 15px 'Open Sans',Verdana,Helvetica,sans-serif; color: #464646; letter-spacing: 0px; border-radius: 0; display: block; box-sizing: border-box; width: 100%; margin: 3px 0; -webkit-appearance: none; } .ngparachat form .ngparachatconsent { display: block; margin: 15px 0 5px 0; } .ngparachat form input[type=submit] { border-color: #666463; border-width: 1px; border-style: solid; padding: 8px 16px 8px 16px; background: #666463; font: 15px 'Open Sans',Verdana,Helvetica,sans-serif; color: #ffffff; letter-spacing: 0px; text-transform: uppercase; display: block; float: right; cursor: pointer; outline: none; -webkit-appearance: none; } .ngparachat form .ngparachaterror { color: #a65856; } .ngparachat form input[type=submit]:hover { border-color: #7f614c; background: #7f614c; font-weight: normal; font-style: normal; text-transform: uppercase; color: #ffffff; } .ngparachat .ngparachatoutput { list-style: none; padding: 0; margin: 0; overflow-y: scroll; border-color: #f1eeeb; 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; }