/*[ FONT ]*/
/*@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/poppins/Poppins-Regular.ttf');
}*/
.navbar-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: contents;
}

/*font-face {
  font-family: Poppins-Medium;
  src: url('../fonts/poppins/Poppins-Medium.ttf');
}*/

/*@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}*/

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body, html {
  /*	height: 100%;*/
}
.bg-color{
  background: #f6f6f6;
}


form {
    padding: 50px;
}

a {
  font-size: 14px;
  line-height: 1.7;
  color: #666666;
  margin: 0px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
  outline: none !important;
}

a:hover {
  text-decoration: none;
  color: #5795cb;
  color: -webkit-linear-gradient(left, #5795cb, #0760ac);
  color: -o-linear-gradient(left, #5795cb, #0760ac);
  color: -moz-linear-gradient(left, #5795cb, #0760ac);
  color: linear-gradient(left, #5795cb, #0760ac);
}


.form-control.is-invalid, .was-validated .form-control:invalid {
    background-size: calc(2.0em + .375rem) calc(.75em + .375rem);
}


thead th.orderable a {
    color: #fff;
    font-weight: normal;
}

td img {
    max-width:29px;
    height:auto;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0px;
}

p {
  font-family: Poppins-Regular;
  font-size: 14px;
  line-height: 1.7;
  color: #666666;
  margin: 0px;
}

ul, li {
  margin: 0px;
  list-style-type: none;
}


input {
  outline: none;
  border: none;
}

textarea {
  outline: none;
  border: none;
}

textarea:focus, input:focus {
  border-color: transparent !important;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }

input::-webkit-input-placeholder { color: #adadad;}
input:-moz-placeholder { color: #adadad;}
input::-moz-placeholder { color: #adadad;}
input:-ms-input-placeholder { color: #adadad;}

textarea::-webkit-input-placeholder { color: #adadad;}
textarea:-moz-placeholder { color: #adadad;}
textarea::-moz-placeholder { color: #adadad;}
textarea:-ms-input-placeholder { color: #adadad;}

button, .submit-btn {
  outline: none !important;
  border: none;
  background: transparent;
}

button:hover, .submit-btn:hover {
  cursor: pointer;
}

iframe {
  border: none !important;
}


/*[ Utility ]*/
.txt1 {
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
}

.txt2 {
  font-size: 13px;
  color: #333333;
  line-height: 1.5;
}

/***********************[ login ]***********************************/

#infoMessage {
    margin-top: 20px;
    text-align: center;
}

#infoMessage p{
  color: green;
  font-weight:bold;
}

#infoMessageRed p{
  color: red;
  font-weight:bold;
}

.hidden{
display: none;
}

.container-login100 {
  width: 100%;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
  background: #f2f2f2;
}

.wrap-login100 {
  width: 390px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  padding: 77px 55px 33px 55px;

  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}


#qrcode-container>img {
  width: auto%;
  height: 50%;
}
#qrcode-container{
  width: 100%;
  height: auto;
}
/*[ Form ]*/

.login100-form {
  width: 100%;
}

.login100-form-title {
  display: block;
  font-size: 30px;
  color: #333333;
  line-height: 1.2;
  text-align: center;
}
.login100-form-title i {
  font-size: 60px;
}

.wrap-input100 {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #adadad;
  margin-bottom: 37px;
  margin-top: 37px;
}

.input100 {
  font-size: 15px;
  color: #555555;
  line-height: 1.2;

  display: block;
  width: 100%;
  height: 45px;
  background: transparent;
  padding: 0 5px;
}

.focus-input100 {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

.focus-input100::before {
  content: "";
  display: block;
  position: absolute;
  top: 45px;
  left: 0;
  width: 0;
  height: 2px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  background: #6a7dfe;
  background: -webkit-linear-gradient(left, #5795cb, #0760ac);
  background: -o-linear-gradient(left, #5795cb, #0760ac);
  background: -moz-linear-gradient(left, #5795cb, #0760ac);
  background: linear-gradient(left, #5795cb, #0760ac);
}
.focus-input100::after {
  font-size: 15px;
  color: #999999;
  line-height: 1.2;
  content: attr(data-placeholder);
  display: block;
  width: 100%;
  position: absolute;
  bottom: 30px;
  left: 0px;
  padding-left: 5px;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.input100:focus + .focus-input100::after {
  top: -15px;
}

.input100:focus + .focus-input100::before {
  width: 100%;
}

.has-val.input100 + .focus-input100::after {
  top: -15px;
}

.has-val.input100 + .focus-input100::before {
  width: 100%;
}

.btn-show-pass {
  font-size: 15px;
  color: #999999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  padding-right: 5px;
  cursor: pointer;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.btn-show-pass:hover {
  color: #0760ac;
  color: -webkit-linear-gradient(left, #5795cb, #0760ac);
  color: -o-linear-gradient(left, #5795cb, #0760ac);
  color: -moz-linear-gradient(left, #5795cb, #0760ac);
  color: linear-gradient(left, #5795cb, #0760ac);
}

.btn-show-pass.active {
  color: #6a7dfe;
  color: -webkit-linear-gradient(left, #5795cb, #0760ac);
  color: -o-linear-gradient(left, #5795cb, #0760ac);
  color: -moz-linear-gradient(left, #5795cb, #0760ac);
  color: linear-gradient(left, #5795cb, #0760ac);
}

/*[ Button ]*/

.container-login100-form-btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 13px;
}

.wrap-login100-form-btn {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
  margin: 0 auto;
}

.login100-form-bgbtn {
  position: absolute;
  z-index: -1;
  width: 300%;
  height: 100%;
  background: #a64bf4;
  background: -webkit-linear-gradient(right, #5795cb, #0760ac, #5795cb, #0760ac);
  background: -o-linear-gradient(right, #5795cb, #0760ac, #5795cb, #0760ac);
  background: -moz-linear-gradient(right, #5795cb, #0760ac, #5795cb, #0760ac);
  background: linear-gradient(right, #5795cb, #0760ac, #5795cb, #0760ac);
  top: 0;
  left: -100%;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.login100-form-btn {
  font-size: 15px;
  color: #fff;
  line-height: 1.2;
  text-transform: uppercase;

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  height: 50px;
}

.wrap-login100-form-btn:hover .login100-form-bgbtn {
  left: 0;
}


/*[ Responsive ]*/

@media (max-width: 576px) {
  .wrap-login100 {
    padding: 77px 15px 33px 15px;
  }
}



/*[ Alert validate ]*/

.validate-input {
  position: relative;
}


.login form{
padding:0px;

}


.alert-validate::before {
  content: attr(data-validate);
  position: absolute;
  max-width: 70%;
  background-color: #fff;
  border: 1px solid #c80000;
  border-radius: 2px;
  padding: 4px 25px 4px 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 0px;
  pointer-events: none;

  color: #c80000;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;

  visibility: hidden;
  opacity: 0;

  -webkit-transition: opacity 0.4s;
  -o-transition: opacity 0.4s;
  -moz-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.alert-validate::after {
  content: "\f06a";
  font-family: FontAwesome;
  font-size: 16px;
  color: #c80000;

  display: block;
  position: absolute;
  background-color: #fff;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 5px;
}

.alert-validate:hover:before {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 992px) {
  .alert-validate::before {
    visibility: visible;
    opacity: 1;
  }
}

/************* HEADER ****************/
.navbar-brand {
  margin-right: 3rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 1rem;
  padding-left: 1rem;
}
#navbarResponsive a.nav-link {
  /*  font-weight:600;*/
  font-size:15px;  
}
/************* TABELLA **************/
.table {
  border: 1px solid #dfdfdf;
  font-size: 0.9rem;
}

table.table thead {
  background-color: #0760ac;
  color: #fff;
  font-size: initial;
}
.table td, .table th {
  border-right: 1px solid #dee2e6;
    text-align: center;
}
.table tr:nth-child(2n) {
  background-color: #fff;
}
.table tbody tr{
  background-color: #f2f2f2;
}
.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #5795cb;
  border-color: #5795cb;
}
.page-link {
  color: #5795cb;
}
.message {
  position: relative;
  left: -8px;
  border-radius: 100%;
  background: #FF0017;
  color: #ffffff;
  font-size: 11px;
  top: -11px;
  font-weight: 600;
  line-height: 1rem;
  border: none;
  padding: 2px 5px 2px 5px;
  border: 2px solid #343a40;
}
.navbar-nav .fa-bell{
  color:#fff;
  font-size: 1.5rem;
}
a#navbarDropdown{
  font-size: 12px;
  color: #888;
}
.fa-user-circle{
  color:#fff;
  font-size: 1.7rem;  
  padding-right:5px;
}
.dropdown-menu {
  position: absolute;
  top: auto;
  left: auto;
  min-width: 12.2rem;
  background-color: #fbfbfb;
  margin-left: 30px;
  margin-top: -10px;
}
.dropdown-toggle::after {
  vertical-align: .655em;
}
.dropdown-toggle span{
  font-size:13px;
  vertical-align: top;
}
.dropdown-item {
  color: #343a40;
  font-size:13px;
}
.btn{  
  background: #93bee4;
  color: #fff;
  border-radius: 1.25rem;
  margin: 5px;
  border: none;
}


.btn-green{
  background: green;
  color: #fff;
  border-radius: 1.25rem;
  margin-right: 10px;
  border: none;
}


.btn-red{
  background: red;
  color: #fff;
  border-radius: 1.25rem;
  margin-right: 10px;
  border: none;
}
.btn-info{
  background: #72a8d7;
  color: #fff;
}
.btn:focus, .btn:hover {
  text-decoration: none;
  background: -moz-linear-gradient(right, #5795cb, #0760ac);
  color: #fff;
}
.btn-show,.btn-edit,.btn-delete{
  font-size: 0.73rem;
  padding: .25rem .75rem;
}

.btn-call::before {
  content: "\f095";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

.btn-close-call::before {
  content: "\f3dd";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

.btn-accept::before {
  content: "\f095";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

.btn-ignore::before {
  content: "\f3dd";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

.btn-token::before {
  content: "\f0fe";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

.btn-copy::before {
  content: "\f0c5";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}

.btn-send-mail::before {
  content: "\f199";
  font-weight: 600;
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}


.btn-show::before {
  content: "\f06e";
  font-family: "Font Awesome 5 Free";
  padding-right: 5px;
}
.btn-edit::before {
  content: "\f5a1";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 5px;

}
.btn-delete::before {
  content: "\f2ed";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 5px;
}
.btn-new-user::before {
  content: "\f234";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 5px;
}
.btn-new-smartglass::before {
  content: "\f530";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 5px;
}
.btn-new-ext-user::before {
  content: "\f4fd";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 5px;
}
.btn-new-zone::before {
  content: "\f494";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 5px;
}
.btn-register::before {
  content: "\f055";
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  padding-right: 5px;

.btn-info{
  border-radius: 2.25rem;
}
.btn-info {
  border: 2px solid #96c8f3;
}
.btn-info:hover {
  border: 2px solid #5695cb;
}

/*************** DETTAGLIO *****************/

.row > [class^="col-"] {
  padding-top: .75rem;
  padding-bottom: .75rem;
  //background-color: #f2f2f2;
 // border: 1px solid #dee2e6;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  font-weight: bold;
  padding-top: 2px;
}
h1.title {
  border-bottom: 2px solid #edeff2;
  padding-bottom: 5px;
}

/************ PAGINA CHIAMATA ************/
#tools{
  height: auto;
}


#tools {
  background-color: transparent;
  border: none;
  width: 100%;
  margin-right: 0;
  text-align: center;
}    
#mute {
}  
#mute .fa-phone{ 
  transform: rotate(90deg);
  font-size:24px;
  color:#fff;
  background: #40a83d;
  border-radius: 50px;
  padding: 10px;
}

.unmute {
 /* background-image: url('../images/unmute.png');
     -webkit-filter: hue-rotate(360deg) invert(100%);
  filter: hue-rotate(360deg) invert(100%);*/
}
.unmute .fa-phone{
    font-size:24px;
  color:#fff;
  background: #40a83d;
  border-radius: 50px;
  padding: 10px;
  transform: rotate(225deg);
}
#textchat {
  background-color: #fff;
}
.btn-tools {
  display: inline-block;
  float: none;
}   
.btn-go{
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .35rem!important;
  position: relative;
  top: 10px;
}
#select-form{
  top: 10px;
}
select#list-rooms{
  height: calc(1.8125rem + 2px);
  top: 10px;
  position: relative;
  margin-left: 10px;
}
.triangle-right {
  position: relative;
  padding: 15px;
  margin: 1em 1em 3em;
  color: #021d35;
  background: #93d3ff;
  /*background: -webkit-gradient(linear, 0 0, 0 100%, from(#93d3ff), to(#93d3ff));
  background: -moz-linear-gradient(#93d3ff, #93d3ff);
  background: -o-linear-gradient(#93d3ff, #93d3ff);
  background: linear-gradient(#93d3ff, #93d3ff);*/
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.triangle-right::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 30px;
  border-width: 20px 20px 0 0px;
  border-style: solid;
  border-color: #93d3ff transparent;
  display: block;
  width: 0;
}




/************* RESPONSIVE ***************/
@media(max-width: 991px) {
  #navbarResponsive{
    background: #454a4e;
    padding: 0 .75rem;
    z-index: 1000;

  }
  .navbar-brand {
    margin-right: 1rem;
  }
  table.table .btn{
    margin-bottom: 4px;
  }
  .table {
    font-size: 0.8rem;
  }
  .btn-show, .btn-edit, .btn-delete {
    font-size: 0.7rem;
  }
  .navbar-dark .navbar-nav .nav-link {
    border-bottom: 1px solid #3d434a;
  }
}


.btn a {
	color : white;
	font-size: 0.8rem;
}

.error {
	color: red;
    padding: 10px;
}