body {
  font-size: 1em;
}

#chat {
  position: relative;
  width: 99%;
  margin-bottom: 1em;
  padding-bottom: 1px;
  font-size: 1em;
}

#toolbar-userlist {
  display: none !important;
}

/* login */

#loginbox {
	text-align: center;
	padding: 1em;
}

#secureswitch {
  display: none;
}

/* layout chat */

#chatbox {
  display: none;
  width: 100%;
  position: relative;
  border: 1px solid #008000;
  background-color: #FFF1C9;
}

#chatmsgs {
  position: relative;
  float: left;
  width: 82%;
  height: 75vh;
  margin: 0;
  padding: 0;
  line-height: 120%;
  overflow-x: hidden;
  overflow-y: scroll;
  white-space: pre-wrap;
  background-color: #fff;
  border-right: 1px solid #000;
}

#userbox {
  position: relative;
  display: block;
  float: left;
  width: 17.5%;
  height: 75vh;
  margin: 0;
  padding: 0;
  background-color: #FFF1C9;
  overflow: visible;
}

#userbox.hide {
  display: block;
}

#userlist {
	margin: 2px 0;
  max-height: 65vh;
  overflow-y: auto;
	padding: 0 4px;
  height: 100%;
}

#toolbox {
  position: absolute;
  top: 74vh;
  right: 0;
  padding: 0 0 1px 0;
  margin: 0;
  width: 18%;
  background-color: #ffac00;
  border-top: 1px solid #000;
  text-align: center;
}

#toolbox #emoji-widget {
  display: inline;
  margin: 0 auto;
}

#messagebox {
  width: 100%;
  margin: 0;
  padding: 0;
  clear: both;
  overflow-x: hidden;
  border-top: 1px solid #000;
  background-color: #efefef;
}

#toolbar {
  height: 35px;
  margin-top: -1px;
  padding: 0 5px;
  vertical-align: top;
  background-color: #ffac00;
  border: 1px outset #ff750f;
}


/* classi elementi */

#toolbar div {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 5px;
  padding-top: 0;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#toolbar div:last-child {
  padding-right: 0;
}

#toolbar-color {
  width: 35px;
  height: 35px;
  margin: 0 5px 0 0;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-position: center;
}

#toolbar-prefs    { background: transparent url('../assets/img/toolbar/impostazioni.png'); }
#toolbar-fs       { background: transparent url('../assets/img/toolbar/schermo_intero.png'); }
#toolbar-extra    { background: transparent url('../assets/img/toolbar/extra.png'); }
#toolbar-styles   { background: transparent url('../assets/img/toolbar/stili.png'); }
#toolbar-help     { background: transparent url('../assets/img/toolbar/guida.png'); cursor: help !important; }
#toolbar-hide     { background: transparent url('../assets/img/toolbar/invisibile.png'); }

#toolbar-userlist { background: transparent url('../assets/img/toolbar/lista_utenti.png'); float: right; }
#toolbar-away     { background: transparent url('../assets/img/toolbar/assente.png'); float: right; }
#toolbar-logout   { background: transparent url('../assets/img/toolbar/uscita.png'); float: right; margin-right: 0; padding-right: 0; }

.toolbar-selecteditem {
  border: 1px solid #000;
}

#messagebox {
  width: 100%;
  overflow: hidden;
}

textarea:focus {
  border: 0 !important;
  outline: 0 !important;
}

textarea {
  display: inline-block;
  float: left;
  width: 84% !important;
  font-size: 100%;
  height: 4em;
  margin: 0 -1px 0 0;
  border: 0 !important;
  padding: 0;
  resize: none;
}

#messagebox #send-button {
  display: inline-block;
  float: left;
  width: 15%;
  height: 4em;
  margin: 0 0 -1px 0;
  padding: 0;
  font-size: small;
  border: 0;
  border-left: 1px solid #000;
  background-color: #efefef;
}

#statusbox {
  margin: 0.5em auto;
  text-align: center;
  color: red;
}

#statusbox2 {
  margin: 0.5em auto;
  text-align: center;
}

.chatevent {
  color: blue;
}

.msgnick, #userlist span, #toolbar div, #toolbar input, #send-button, .quotenick {
  cursor: pointer;
}

.msgavatar {
  margin-bottom: 0.2em;
  margin-right: 0.2em;
  vertical-align: middle;
}

.nickhighlight {
  background-color: #fff;
  color: red;
}

.msgavatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%
}

.msgavatar img:hover {
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg);
}

.msgavatar img, #toolbar {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.msgmeta {
  float: right;
  display: inline-block;
}

.msgtime {
  float: right;
  display: inline;
}

.msgrecpt {
  float: right;
  display: inline;
  padding-left: 0.2em;
  margin-right: 0.3em;
  font-size: small;
  letter-spacing: -3px;
}

.quotemsg {
  margin: 0.2em 0 0.1em 0;
  font-size: 85%;
  font-style: italic;
  color: #666665;
  border-left: 3px solid;
  vertical-align: top;
}

.quotenick {
  text-decoration: none;
  color: #000;
  font-weight: bold;
}

/* userlist */

#userlist span {
	display: block;
  color: #e85d0e;
  background-repeat: no-repeat !important;
  background-position: left top;
  font-size: 95%;
}

#userlist span:hover {
  text-decoration: underline !important;
}

#userlist .admin {
  color: red;
}

#userlist .me {
  color: purple;
}

#userlist .user-hidden {
  color: blue !important;
}

#userlist .user-hidden:after {
  content: " 👻";
}

#userlist .user-requiressupervision {
  color: green !important;
}

#userlist .user-requiressupervision:after {
  content: " 🐣";
}


#userlist .user-away, #userlist .user-silenced {
  height: 32px;
  padding-left: 36px;
  margin-bottom: 3px;
  vertical-align: middle;
  background-repeat: no-repeat !important;
  background-position: left top;
}

#userlist .user-writing {
  padding-left: 1.2em;
  background-repeat: no-repeat !important;
  background-position: left center;
  background-image: url('../assets/img/scrittura2.png') !important;
}

#userlist .user-silenced {
  background-image: url('../assets/img/silenziato.png') !important;
  text-decoration: line-through;
}

.user-highlight {
  font-size: 1.2em !important;
}

.selectedmsg {
}

/* altro */

.cmd, .cmdd {
  color: #3745b6;
  cursor: pointer;
  text-decoration: underline;
  font-weight: bold;
}

.cmd:hover, .cmdd:hover { color: #7c7cff; }

.msgtext[style].nocolors,
.msgtext.nocolors span {
  color: #000 !important;
  font-weight: normal !important;
  font-style: normal !important;
}

.uimgs {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.toggle {
  cursor: pointer;
}

.togglecontent {
  display: none;
  cursor: pointer;
}

#avviso {
  margin-top: 1em;
}

#chatmsgs.bkg {
  background-color: #fff;
}

#newmsgs, #quotemsg {
  display: none;
  position: absolute;
  margin: 0 auto;
  padding: 0.1em;
  right: 25%;
  top: 75vh;
  text-align: center;
  z-index: 99;
  word-break: keep-all;
  background-color: #fff;
  color: red;
  border: 1px solid #000;
  box-shadow: 2px 2px 4px #555555;
}

#newmsgs,
#quotecancel,
#deleteselectedmessage {
  cursor: pointer;
}

#quotemsg {
  max-width: 90%;
  height: 3em;
  padding-right: 2em;
  margin: 0;
  top: 70vh;
  left: 2px;
  text-align: left !important;
  z-index: 98;
  color: #000;
  overflow: hidden;
}

/* menu font e hack per jquery-scrollLock */

.cm-font { padding-left: 1rem; }

.scrollable {
  outline: 0;
}

/* font */

.font-verysmall { font-size: 0.6rem; }
.font-small { font-size: 0.8rem; }
.font-medium { font-size: 1rem; }
.font-large { font-size: 1.2rem; }

.font-georgia   { font-family: Georgia; }
.font-palatino  { font-family: Palatino; }
.font-tnr       { font-family: 'Times New Roman'; }
.font-arial     { font-family: Arial; }
.font-comic     { font-family: 'Comic Sans MS'; }
.font-lucida    { font-family: Lucida; }
.font-tahoma    { font-family: Tahoma; }
.font-trebuchet { font-family: 'Trebuchet MS'; }
.font-verdana   { font-family: Verdana; }

.style-italic    { font-style: italic; }
.style-smallcaps { font-variant: small-caps; }
.style-underline { text-decoration: underline; }
.style-strike    { text-decoration: line-through; }
.style-bold      { font-weight: bold; }

.style-rainbow {
  color: #000;
  font-weight: bold;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) and ((text-fill-color: transparent) or (-webkit-text-fill-color: transparent)) {
  .style-rainbow {
    background: linear-gradient(to right, red 0%, orange 22%, #e5d400 36%, green 50%, blue 64%, indigo 78%, violet 100%);
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .style-rainbow span.nickhighlight {
    color: red !important;
    -webkit-text-fill-color: red;
  }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) and ((text-fill-color: transparent)) {
  .style-rainbow {
    text-fill-color: transparent;
  }
  .style-rainbow span.nickhighlight {
    text-fill-color: red;
  }
}

/* spinner */

.spinnerbox {
  padding-bottom: 0.5em;
  overflow: hidden;
}

.spinner {
  width: 200px;
  height: 200px;
  transition-duration: 4s;
  transition-property: transform;
  transition-timing-function: ease-out;
}


/* Media Query */

/* Cellulari */
@media screen and (max-width: 450px) {
  #toolbar label, #toolbox {
    display: none !important;
  }

  #toolbar {
    overflow: hidden;
    height: 28px;
  }

  #toolbar div, #toolbar-color {
    width: 30px !important;
    height: 30px;
    margin: 0 1px;
  }

  #toolbar-userlist {
    display: block !important;
  }

  #toolbar-hide {
    display: none !important;
  }

  #chatmsgs {
    display: block !important;
    width: 100% !important;
    margin: 0 auto;
    border-right: 0;
    height: 74vh;
  }

  #newmsgs {
    right: 4px;
    top: 72vh;
  }

  #quotemsg {
    width: 99%;
    top: 60vh;
    padding-right: 1px;
  }

  #userbox.hide {
    display: none;
  }

  #userbox {
    position: absolute;
    top: 37px;
    right: 0;
    display: none;
    width: 40%;
    height: 60vh;
    margin: 0;
    padding: 0 1px 1px 1px;
    border: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    box-shadow: 2px 2px 4px #555555;
    z-index: 10;
  }

  #messagebox {
    width: 100% !important;
  }

  #messagebox textarea {
    height: 2em;
  }

  textarea {
    float: left;
    height: 3em;
    width: 88% !important;
    font-size: 100%;
  }

  #send-button {
    float: left;
    height: 3em;
    width: 10% !important;
  }
}

/* Desktop */

@media screen and (max-width: 960px) {
  #messagebox textarea, #messagebox #send-button {
    height: 3em;
  }

  #userbox, #userlist {
    display: block;
  }
}