/* COL */
:root{
  --main-color:#37474F;
  --main-light-color:#A3AFB7;
  --red-color:#ff4c52;
  --indigo-color:#3e8ef7;
  --green-color:#11C26D;
  --purple-color:#9463f7;
  --orange-color:#EB6709;
}
body {background:#f6f6f6; font-family: 'Montserrat', sans-serif;}
body.nooverflow {overflow:hidden;}
.reset-padding {padding:0;}
.puntinisospensione {text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
a {color:#0B69E3;}
a:hover {color:#364FF5;}
img {width:100%;}
.ombra100 {display:none; width:100%; height:100vh; background:#00000090; position:fixed; top:0; left:0; z-index:99;}
.loader {display:none; color:#fff; position:fixed; top:50%; left:50%; z-index:99; transform:translate(-50%, -50%); font-size:20px; font-weight:600;}
content {margin-top:41px; padding-top:15px; padding-bottom:15px;}
content h1 {font-size:30px;}
table {margin-bottom:0!important;}
table tr {border-bottom:1px solid #f6f6f6; cursor:pointer;}
table tr:hover {background:#eee;}
table tr td.nomobile {display:none;}
table tr th.nomobile {display:none;}
table tr td {font-size:12px; padding:15px!important;}
table tr td.fontbold {font-weight:600;}
table tr td {white-space:nowrap;}
table tr td font.orange {background:var(--orange-color); padding:3px 10px; border-radius:10px; color:#fff; font-size:11px;}
table tr td font.green {background:var(--green-color); padding:3px 10px; border-radius:10px; color:#fff; font-size:11px;}
table tr td font.red {background:var(--red-color); padding:3px 10px; border-radius:10px; color:#fff; font-size:11px;}
table tr td font.purple {background:var(--purple-color); padding:3px 10px; border-radius:10px; color:#fff; font-size:11px;}
table tr td font.black {background:#000; padding:3px 10px; border-radius:10px; color:#fff; font-size:11px;}
table thead tr {cursor:inherit;}
table thead tr:hover {background:inherit;}
div.boxchat {display:none; position:fixed; bottom:0; right:0; z-index:8; width:100%; height:calc(100vh - 40px); background:#fff; overflow:none;}
div.boxchat p.titolochat {padding:0 15px; margin-bottom:5px; margin-top:20px; font-size:16px; font-weight:600;}
div.boxchat p.descrizionechat {padding:0 15px; margin-bottom:25px; font-size:12px;}
div.boxchat .listachat {z-index:2px;}
div.boxchat .listachat .itemchat {cursor:pointer; border-top:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; padding:15px;}
div.boxchat .listachat .itemchat p {margin-bottom:5px;}
div.boxchat .listachat .itemchat p.data {font-size:10px; color:#969696;}
div.boxchat .listachat .itemchat p.utente img {width:30px; height:30px; border:1px solid #4b4b4b; margin-right:5px; border-radius:100%; margin-top:-5px;}
div.boxchat .listachat .itemchat p.utente {font-size:14px;}
div.boxchat .listachat .itemchat p.utente span {display:inline-block; margin-right:5px; width:10px; height:10px; background:var(--orange-color); border-radius:100%; animation-name:changecolorchat; animation-duration: 2s; animation-iteration-count:infinite;}
div.boxchat .listachat .itemchat p.testo {font-size:12px; color:#4b4b4b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
div.boxchat .thischat {z-index:4px; height:100%; background:#fff; position:absolute; top:0; left:100%; transition:0.2s all;}
div.boxchat .thischat.show {left:0;}
div.boxchat .thischat .goback {cursor:pointer; background:#eee; border-bottom:1px solid #ddd; padding:10px 15px; font-size:12px;}
div.boxchat .thischat .actionbottom {position:absolute; bottom:0; left:0; width:100%;}
div.boxchat .thischat .actionbottom textarea {width:100%; height:100px; border:0; border-top:1px solid #c0c0c0; padding:5px; font-size:14px; resize:none;}
div.boxchat .thischat .actionbottom button {border:0; width:100%; background:var(--indigo-color); color:#fff; font-size:12px; padding:10px; margin-top:-10px;}
div.boxchat .thischat .testochat {height:calc(100% - 160px); overflow:auto; width:100%; padding-bottom:30px;}
div.boxchat .thischat .testochat span.notmessage {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:12px; color:#969696; text-align:center;}
div.boxchat .thischat .testochat .boxsinglemessage {margin-top:20px;}
div.boxchat .thischat .testochat .boxsinglemessage .background {padding:5px; background:#eee; border-radius:3px;}
div.boxchat .thischat .testochat .boxsinglemessage.isadmin .background {background:#c2ffc2}
div.boxchat .thischat .testochat .boxsinglemessage .infomessaggio {font-size:12px; margin-bottom:2px;}
div.boxchat .thischat .testochat .boxsinglemessage .testomessaggio {font-size:16px; margin-bottom:0;}

.setting .form {width:100%; max-width:600px;}
.setting .form .sezione {margin-top:50px; margin-bottom:10px; display:block; font-size:18px; font-weight:600;}
.setting .form .item-form {margin-bottom:30px;}
.setting .form .item-form label {margin:0;}
.setting .form .item-form label span {display:block;}
.setting .form .item-form label span.title {font-size:16px; font-weight:500;}
.setting .form .item-form label span.description {font-size:14px; margin:5px 0;}
.setting .form .item-form input {width:100%; height:40px; border:1px solid #c0c0c0; padding:5px; font.size:14px;}
.setting .form .item-form textarea {width:100%; height:100px; border:1px solid #c0c0c0; padding:5px; font.size:14px;}
.setting .form .item-form select {width:100%; height:40px; border:1px solid #c0c0c0; padding:5px; font.size:14px;}

/* COL-MD */
@media only screen and (min-width: 768px) {

  .loader {font-size:25px;}
  content h1 {font-size:35px;}
  table tr td {font-size:14px;}
  table tr td.nomobile {display:table-cell;}
  table tr th.nomobile {display:table-cell;}
  table tr td font {font-size:12px!important;}
  div.boxchat {width:50%; max-width:300px; border-left:1px solid #c0c0c0;}

}





/* COL-XL */
@media only screen and (min-width: 1200px) {

  .loader {font-size:30px;}
  content {width:calc(100% - 250px)!important;}
  content.fullwidth {width:100%!important;}
  content h1 {font-size:40px;}
  table tr td {font-size:15px;}
  table tr td font {font-size:13px!important;}
  div.boxchat .listachat .itemchat p.data {font-size:12px;}
  div.boxchat .listachat .itemchat p.utente {font-size:16px;}

}

@keyframes changecolorchat {
  0% {background:var(--orange-color);}
  50% {background:var(--indigo-color);}
  100% {background:var(--orange-color);}
}