/* main style cc */
*:not(i){border-radius:0 !important;}
html{margin:0; padding:0; width:100%; height:100%; overflow:hidden; font-family:'Quicksand', sans-serif !important;}
body{margin:0; padding:0;}
::-webkit-scrollbar {width: .6em;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}
::-webkit-scrollbar-thumb {background-color: darkgrey; outline: 1px solid slategrey;}
a:hover{text-decoration:none;}
*:focus-visible{border:0px !important; outline:none;}
button:focus, a:focus, input:focus{outline:none !important;}

.row{margin-right:0px; margin-left:0px;}
.row.reset{margin-right:-10px; margin-left:-10px;}
.no-padding{padding:0;}
.no-padding-left{padding-left:0;}
.no-padding-right{padding-right:0;}

.no-margin{margin:0;}
.no-margin-left{margin-left:0;}
.no-margin-right{margin-right:0;}

.padding10{padding:10px;}

.margin-top5     { margin-top:5px; }
.margin-top10    { margin-top:10px; }
.margin-top15    { margin-top:15px; }
.margin-top20    { margin-top:20px; }
.margin-top30    { margin-top:30px; }
.margin-bottom5  { margin-bottom:5px; }
.margin-bottom10 { margin-bottom:10px; }
.margin-bottom15 { margin-bottom:15px; }
.margin-bottom20 { margin-bottom:20px; }
.margin-bottom30 { margin-bottom:30px; }
.margin-left5    { margin-left:5px; }
.margin-left10   { margin-left:10px; }
.margin-left15   { margin-left:15px; }
.margin-left20   { margin-left:20px; }
.margin-left30   { margin-left:30px; }
.margin-right5  { margin-right:5px; }
.margin-right10 { margin-right:10px; }
.margin-right15 { margin-right:15px; }
.margin-right20 { margin-right:20px; }
.margin-right30 { margin-right:30px; }

.padding-top5     { padding-top:5px; }
.padding-top10    { padding-top:10px; }
.padding-top15    { padding-top:15px; }
.padding-top20    { padding-top:20px; }
.padding-bottom5  { padding-bottom:5px; }
.padding-bottom10 { padding-bottom:10px; }
.padding-bottom15 { padding-bottom:15px; }
.padding-bottom20 { padding-bottom:20px; }
.padding-left5    { padding-left:5px; }
.padding-left10   { padding-left:10px; }
.padding-left15   { padding-left:15px; }
.padding-left20   { padding-left:20px; }
.padding-right5  { padding-right:5px; }
.padding-right10 { padding-right:10px; }
.padding-right15 { padding-right:15px; }
.padding-right20 { padding-right:20px; }

.dashed{border:1px dashed #ccc; line-height:1.56em; color:#ccc;}

.container-loader > div {position:fixed; z-index:999999999; width:100%; height:100%; opacity:0.6; background:#333;}

.spinner {width:40px; height:40px; position:fixed; margin:auto; top:0; left:0; bottom:0; right: 0; text-align: center; -webkit-animation: sk-rotate 2.0s infinite linear; animation: sk-rotate 2.0s infinite linear;}
.dot1, .dot2 {width:60%; height:60%; display: inline-block; position:absolute; top:0; background-color:#fff; border-radius:100% !important; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation:sk-bounce 2.0s infinite ease-in-out;}
.dot2 {top:auto; bottom:0; -webkit-animation-delay:-1.0s; animation-delay:-1.0s;}
@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes sk-bounce {0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) }}
@keyframes sk-bounce {0%, 100% {transform:scale(0.0); -webkit-transform: scale(0.0);} 50% {transform: scale(1.0); -webkit-transform: scale(1.0);}}

.alert.error{color:#fff; padding:10px 5px; border:2px solid #C80606; background:#CA4343; opacity:0.8;}
.alert.success{color:#fff; padding:10px 5px; border:2px solid #2EA45D; background:#89CA43; opacity:0.8;}

.no-contents{margin: 2em 0; padding:20px;}

.checkbox.checkbox-switch {
  padding-left: 0;
  margin:0;
}

.checkbox.checkbox-switch label,
.checkbox-inline.checkbox-switch {
  display: inline-block;
  position: relative;
  padding-left: 0;
  margin-top:0px;
}
.checkbox.checkbox-switch label input,
.checkbox-inline.checkbox-switch input {
  display: none;
}
.checkbox.checkbox-switch label span,
.checkbox-inline.checkbox-switch span {
  width: 35px;
  border-radius: 20px;
  height: 18px;
  border: 1px solid #dbdbdb;
  background-color: rgb(255, 255, 255);
  border-color: rgb(223, 223, 223);
  box-shadow: rgb(223, 223, 223) 0px 0px 0px 0px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s;
  display: inline-block;
  vertical-align: middle;
}
.checkbox.checkbox-switch label span:before,
.checkbox-inline.checkbox-switch span:before {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: rgb(255,255,255);
  content: " ";
  top: 0;
  position: relative;
  left: 0;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.checkbox.checkbox-switch label > input:checked + span:before,
.checkbox-inline.checkbox-switch > input:checked + span:before {
  left: 17px;
}


/* Switch Default */
.checkbox.checkbox-switch label > input:checked + span,
.checkbox-inline.checkbox-switch > input:checked + span {
  background-color: rgb(180, 182, 183);
  border-color: rgb(180, 182, 183);
  box-shadow: rgb(180, 182, 183) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch label > input:checked:disabled + span,
.checkbox-inline.checkbox-switch > input:checked:disabled + span {
  background-color: rgb(220, 220, 220);
  border-color: rgb(220, 220, 220);
  box-shadow: rgb(220, 220, 220) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch label > input:disabled + span,
.checkbox-inline.checkbox-switch > input:disabled + span {
  background-color: rgb(232,235,238);
  border-color: rgb(255,255,255);
}
.checkbox.checkbox-switch label > input:disabled + span:before,
.checkbox-inline.checkbox-switch > input:disabled + span:before {
  background-color: rgb(248,249,250);
  border-color: rgb(243, 243, 243);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Switch Light */
.checkbox.checkbox-switch.switch-light label > input:checked + span,
.checkbox-inline.checkbox-switch.switch-light > input:checked + span {
  background-color: rgb(248,249,250);
  border-color: rgb(248,249,250);
  box-shadow: rgb(248,249,250) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Dark */
.checkbox.checkbox-switch.switch-dark label > input:checked + span,
.checkbox-inline.checkbox-switch.switch-dark > input:checked + span {
  background-color: rgb(52,58,64);
  border-color: rgb(52,58,64);
  box-shadow: rgb(52,58,64) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch.switch-dark label > input:checked:disabled + span,
.checkbox-inline.checkbox-switch.switch-dark > input:checked:disabled + span {
  background-color: rgb(100, 102, 104);
  border-color: rgb(100, 102, 104);
  box-shadow: rgb(100, 102, 104) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Success */
.checkbox.checkbox-switch.switch-success label > input:checked + span,
.checkbox-inline.checkbox-switch.switch-success > input:checked + span {
  background-color: rgb(40, 167, 69);
  border-color: rgb(40, 167, 69);
  box-shadow: rgb(40, 167, 69) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch.switch-success label > input:checked:disabled + span,
.checkbox-inline.checkbox-switch.switch-success > input:checked:disabled + span {
  background-color: rgb(153, 217, 168);
  border-color: rgb(153, 217, 168);
  box-shadow: rgb(153, 217, 168) 0px 0px 0px 8px inset;
}

/* Switch Danger */
.checkbox.checkbox-switch.switch-danger label > input:checked + span,
.checkbox-inline.checkbox-switch.switch-danger > input:checked + span {
  background-color: rgb(200, 35, 51);
  border-color: rgb(200, 35, 51);
  box-shadow: rgb(200, 35, 51) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch.switch-danger label > input:checked:disabled + span,
.checkbox-inline.checkbox-switch.switch-danger > input:checked:disabled + span {
  background-color: rgb(216, 119, 129);
  border-color: rgb(216, 119, 129);
  box-shadow: rgb(216, 119, 129) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Primary */
.checkbox.checkbox-switch.switch-primary label > input:checked + span,
.checkbox-inline.checkbox-switch.switch-primary > input:checked + span {
  background-color: rgb(0, 105, 217);
  border-color: rgb(0, 105, 217);
  box-shadow: rgb(0, 105, 217) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch.switch-primary label > input:checked:disabled + span,
.checkbox-inline.checkbox-switch.switch-primary > input:checked:disabled + span {
  background-color: rgb(109, 163, 221);
  border-color: rgb(109, 163, 221);
  box-shadow: rgb(109, 163, 221) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Info */
.checkbox.checkbox-switch.switch-info label > input:checked + span,
.checkbox-inline.checkbox-switch.switch-info > input:checked + span {
  background-color: rgb(23, 162, 184);
  border-color: rgb(23, 162, 184);
  box-shadow: rgb(23, 162, 184) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch.switch-info label > input:checked:disabled + span,
.checkbox-inline.checkbox-switch.switch-info > input:checked:disabled + span {
  background-color: rgb(102, 192, 206);
  border-color: rgb(102, 192, 206);
  box-shadow: rgb(102, 192, 206) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}

/* Switch Warning */
.checkbox.checkbox-switch.switch-warning label > input:checked + span,
.checkbox-inline.checkbox-switch.switch-warning > input:checked + span {
  background-color: rgb(255, 193, 7);
  border-color: rgb(255, 193, 7);
  box-shadow: rgb(255, 193, 7) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}
.checkbox.checkbox-switch.switch-warning label > input:checked:disabled + span,
.checkbox-inline.checkbox-switch.switch-warning > input:checked:disabled + span {
  background-color: rgb(226, 195, 102);
  border-color: rgb(226, 195, 102);
  box-shadow: rgb(226, 195, 102) 0px 0px 0px 8px inset;
  transition: border 0.4s ease 0s, box-shadow 0.4s ease 0s, background-color 1.2s ease 0s;
}


.input-group-addon {background-color: #fff;}
input{border-radius:0 !important;}
label{display:inline-block; max-width:100%; margin-top:10px; font-weight:700; margin-bottom:0px;}
label[for="attachment"]{width:100%}
div.ticket-attachment.doc-icon{padding:7px 5px; background:#8A95BF; margin-top:0px; margin-bottom:0px;}
div.ticket-attachment.doc-icon .fa-paperclip{width:100%; text-align:center;}
label[for="attachment"]{margin-top:0;}
label[for="attachment"]:hover{border-color:#6C7496; cursor:pointer; opacity:.8; background-color: #f3f3f3; margin-top:0;}
input#attachment{display:none;}
.vcard > legend > input{border:0; background:none; width:calc(100% - 170px);}
.vcard > legend > input:focus-within{outline:none;}

.full-height{height:100%;}
.full-width{width:100%;}

.border-dark{border:1px solid #9B9B9B;}
.bg-white{background-color: #fff;}

body.nice.auth, body.nice.auth > .wrapper, body.nice.auth > .wrapper > section,
body.nice.auth > .wrapper > section .container-fluid.auth-page, body.nice.auth > .wrapper > section .container-fluid.auth-page .row, body.nice.auth > .wrapper > section .container-fluid.auth-page .row > .col-md-6,
body.nice.auth > .wrapper > section .container-fluid.auth-page > .row > .col-md-6 > .row > .col-md-8, body.nice.auth > .wrapper > section .container-fluid.auth-page > .row > .col-md-6 > .row > .col-md-8 > .flex-container{height:100%;}
body.nice.auth > .wrapper > section .container-fluid.auth-page{padding:50px; background: linear-gradient(315deg, #ffffff 50%, #92e3a9 0);}
body.nice.auth > .wrapper > section .container-fluid.auth-page > .row{box-shadow:0 0 10px #333; background-color:#fff;}
.auth-page{width:100vw; height:100%;}
.auth-page .login-bg{background-image:url(../img/login-bg.png); background-repeat:no-repeat; background-size:contain; background-position-y:bottom; background-position-x: right; /*background-color: aquamarine;*/}
.auth-page .flex-container{display:flex; width:100%; align-items:center; align-content:center; justify-content: center;}
.auth-page .flex-item{}
.auth-page .flex-item:nth-child(2){align-self:center; min-height:250px;}
.auth-page .login-box{border:0px solid #ccc; padding: 15px;}

aside.sidebar.left{width:15%; height:100vh; border-right:1px solid #ccc; box-shadow:0px 0px 1px #ccc; background:#fff; float:left; display:inline-block; position:relative;}
.logo-container{height:100px; border-bottom:2px solid #ccc; padding: 3px 17px; display:flex; flex-wrap: nowrap; align-content: center; justify-content:flex-start; align-items: center; flex-direction:row;}
.logo-container.auth{border-bottom:0px;}
.logo-container div:not(.percentage-space-size){align-self:center; font-size: 12px; width:100%;}
.logo-container a{background:url(/img/logo_nice.png); height:50px; width:61px; background-size: contain; background-repeat: no-repeat; background-position: left; padding:0 61px 0 0;}
.logo-container.auth a{height:87px; width:100%;}

.percentage-space-size{height:5px; width:0%; background:#1b7bfd; transition: width 2s;}

aside.sidebar.left ul{list-style:none; margin-left:0px; padding:10px 0px 0px 0px;}
aside.sidebar.left ul li{border-bottom:1px dashed #ccc; cursor:pointer;}
aside.sidebar.left ul li > span:hover, aside.sidebar.left ul li > a:hover, aside.sidebar.left ul li > ul li:hover{background:#E9E9E9; opacity:0.8;}
aside.sidebar.left ul li:first-child{border-top:1px dashed #ccc;}

aside.sidebar.left ul li ul{list-style:none; padding:0px;}
aside.sidebar.left ul li ul li{padding:5px 10px; border-bottom:0px; cursor:pointer;}
aside.sidebar.left ul li ul.sub-menu{padding:0px 0px 5px 0px;}
aside.sidebar.left ul li ul.sub-menu li{padding:0px 30px;}
aside.sidebar.left ul li ul.sub-menu li > small > i{padding:0px 10px;}
aside.sidebar.left ul li ul li:hover{background:#E9E9E9; opacity:0.8;}
aside.sidebar.left ul li ul li:first-child{border-top:0px solid #ccc;}

aside.sidebar.left ul#main-menu li a, aside.sidebar.left ul#main-menu li a:hover, aside.sidebar.left ul#main-menu li a:active, aside.sidebar.left ul#main-menu li a:visited{color:#333; display: block; height:100%; width:100%; padding:10px 20px;}
aside.sidebar.left ul li span, aside.sidebar.left ul li a{color:#333; display: block; height:100%; width:100%; padding:10px 20px;}

aside.sidebar.left > div:last-child{position:absolute; bottom:0; right:0; left:0;}
aside.sidebar.left > div:last-child > footer{background-color: #f1f1f1; color:gray; border-top:1px solid #ccc; padding:0px 5px;}
#side-menu{display:flex; margin-bottom:0; align-items:center; align-content:center; justify-content: center; border-top:1px solid #ccc; padding-top:0; background:#fff;}
#side-menu li{border-bottom:0px; border-left:1px solid #ccc; cursor:pointer; flex-grow:5;}
#side-menu li:first-child{border:0px;}
#side-menu li span, #side-menu li a{padding:10px; text-align:center;}

aside.sidebar.right{height:100vh; border-left:1px solid #ccc; position:relative;}
aside.sidebar.right .form{position:absolute; bottom:0; left:0; height:250px; }
aside.sidebar.right .form .box{position:relative;}

#notifier-details{display:none; width:100%; height:calc(100% - 520px); overflow-y:auto; background:#f0f0f0; opacity:.8;}

/* section.right-side{float:right; overflow-y:auto; width:85%; height:100vh; background:#f1f1f1; display:inline-block; padding:0 5px 20px;} */
section.right-side{float:right; overflow:auto; width:85%; height:100vh; background:#f2f2f2; display:inline-block; padding:0 10px;}
header.header{border-bottom:1px solid #ccc; box-shadow:0px 0px 1px #ccc; height:60px; background:#fff;}
.panel-body{padding:0px 0 0 0;}

.dashboard{display:flex; flex-wrap:wrap; gap:10px;}
.dashboard > div:first-child{flex-basis:100%;}
.dashboard > div:first-child h1{background:#d7e7f5; border:1px solid #94d1ff; padding:10px;}
.dashboard > div{flex-grow:1; box-sizing:border-box; flex-basis:20%;}
.dashboard .card:not(.welcome){background:#fff; border:#f3f3f3; box-shadow:0 0 3px #ccc; padding:10px; min-height:200px;}
.dashboard .card.agency{background:aquamarine;}
.dashboard .card.adv.three-quarters{flex-basis:60% !important;}
.dashboard .card.advertising{background: #337ab7; min-height:20px;}
.dashboard .card.full{flex-basis:100% !important;}
.card{}

div.dataTables_processing, div.dataTables_processing div, #table_processing{display:none !important;}
.dt-search label::before{content: "\eb1c"; font-family:"tabler-icons" !important; padding-right:5px;} 
div.dt-container .dt-search input, div.dt-container .dt-search input:focus-visible{background:none; border:none; box-shadow:none; border-bottom: 2px solid #ddd !important;}
#table_wrapper{}
#table_wrapper div.dt-search {text-align: right;}
#table_wrapper thead{display:none;}
#table_wrapper .single-row{display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:stretch}
#table_wrapper .single-row > div{position:relative; display: flex; flex-direction:column; flex-wrap:wrap; align-content:space-between; justify-content:space-between; align-items:flex-end;}
#table_wrapper .single-row > div > div {display:flex; flex-direction:row; align-content:space-around; flex-wrap:wrap; justify-content:flex-start; align-items:center;}
#table_wrapper .single-row > div > div.label-container {flex-direction:row-reverse; align-items:flex-start;}
#table_wrapper .single-row > div > div > div.flag-incall{display:none;}
#table_wrapper .single-row > div > div > div.flag-incall.calling{display:block; background:#ff7b59; background:linear-gradient(225deg, #ff7b59 47%, rgba(0,0,0, 0) 2%); padding:5px 5px 20px 20px; animation: blinker 1s linear infinite;}
#table_wrapper .single-row > div > div.action-container{padding:0 5px 5px; flex-direction:row}
#table_wrapper .single-row > div:first-child {margin-top:10px; font-size:16px; display:inline-block;}
#table_wrapper .single-row > div:first-child i{padding:3px 5px 4px;}
#table_wrapper .single-row > div:first-child span{color:#7B7B7B; padding:2px 5px; margin-left:0px; margin-right:5px;}
#table_wrapper .single-row > div:first-child small{font-size:65%; background:#73b1ab; background:linear-gradient(to right, #73b1ab, #cecece); border-radius: 50px !important; padding:2px 10px; display:inline-block; margin:15px 5px 5px 0;}
#table_wrapper .single-row > div:first-child small:hover{opacity:.8;}
#table_wrapper .single-row > div:first-child small:first-child{position:absolute; top:-26px; left:-6px; border-radius:0px !important; font-weight:900; padding-right:30px;}
#table_wrapper .single-row > div:first-child small:first-child.status.active{background:#8ff487;background:linear-gradient(120deg, #8ff487 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.new{background:#ff7b59;background:linear-gradient(120deg, #ff7b59 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.under-processing{color:#ccc; padding-right:40px; background:#5983b0;background:linear-gradient(120deg, #5983b0 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.pause{color:#ccc; background:#5a4a4a;background:linear-gradient(120deg, #5a4a4a 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.won{color:#ccc; background:#1e6a39;background:linear-gradient(120deg, #1e6a39 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.lost{color:#ccc; background:#800080;background:linear-gradient(120deg, #800080 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.unworkable{padding-right:40px; background:#808080;background:linear-gradient(120deg, #808080 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.canceled{color:#ccc; background:#840000;background:linear-gradient(120deg, #840000 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.abandoned{color:#ccc; padding-right:40px; background:#362413;background:linear-gradient(120deg, #362413 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child small:first-child.status.answer-waiting{color: #666666; padding-right:50px; background:#fdfd00;background:linear-gradient(120deg, #fdfd00 75%, rgba(0,0,0, 0) 75%); }
#table_wrapper .single-row > div:first-child > div:last-child{font-size:55%; background:#cecece; border-radius:50px !important; padding:2px 10px; display:inline-block;}
#table_wrapper .table-striped > tbody > tr td .flag-assignation{background:transparent; width:25px; height:30px; margin-right:15px;}
#table_wrapper .table-striped > tbody > tr td .flag-assignation:hover{background:rgb(94, 94, 94); width:25px; height:30px; margin-right:15px;}
#table_wrapper .table-striped > tbody > tr td .flag-assignation.assigned{background:rgb(214, 7, 7); width:25px; height:30px; margin-right:15px;}
#table_wrapper .table-striped > tbody > tr:nth-of-type(odd) td .flag-assignation:hover > .square{background:#f9f9f9; width:18px; height:18px; transform:rotate(45deg); bottom:0px; position:relative; top:21px; left:4px; box-shadow:inset 1px 1px 1px #ccc;}
#table_wrapper .table-striped > tbody > tr:nth-of-type(odd) td .flag-assignation.assigned > .square{background:#f9f9f9; width:18px; height:18px; transform:rotate(45deg); bottom:0px; position:relative; top:21px; left:4px; box-shadow:inset 1px 1px 1px #ccc;}
#table_wrapper .table-striped > tbody > tr:nth-of-type(even) td .flag-assignation:hover > .square{background:#ebebeb; width:18px; height:18px; transform:rotate(45deg); bottom:0px; position:relative; top:21px; left:4px; box-shadow:inset 1px 1px 1px #ccc;}
#table_wrapper .table-striped > tbody > tr:nth-of-type(even) td .flag-assignation.assigned > .square{background:#ebebeb; width:18px; height:18px; transform:rotate(45deg); bottom:0px; position:relative; top:21px; left:4px; box-shadow:inset 1px 1px 1px #ccc;}
#table_wrapper .row > .col-md-6.col-sm-12{padding-right:0px;}
#table_wrapper .row > .col-md-7.col-sm-12{padding-right:0px;}
table.dataTable{width: 100% !important;}
.table-striped>tbody>tr:nth-of-type(odd) {background-color:transparent;}
.table > tbody > tr > td{padding:5px 6px;}
#table_wrapper tr td:last-child{padding:0 0px 5px 5px;}
.action-container > .btn-sm{padding:2px 3px; background:#56a16f; color:#fff; padding:5px 10px; font-weight:600;}
.action-container > .btn-sm:hover{opacity:.8;}
.action-container .btn-sm.azioni-delete{background: #a50023;}
.action-container .btn-sm.azioni-edit{background: #46627b;}
.action-container .btn-group, .action-container .btn-sm.azioni-sms, .action-container .btn-sm.azioni-mail{background-color: #337ab7; border-color: #2e6da4;}
.action-container .btn-group .dropdown-item.azioni-call{padding:5px;}
.action-container .btn-sm:hover > span.caret ~ ul.dropdown-menu {display:inline-block; min-width:100px;}
.action-container .btn-sm > a{color:#fff;}
.btn-recordings i{vertical-align:middle;}
.table-scrollable ~ .row > .col-md-5.col-sm-12{padding-left:0px;}
#table_wrapper .dt-layout-row:first-child{position:sticky; width:100%; top:0; background:#f1f1f1; z-index:2; margin-top:0; padding:10px 0 5px 0;}
#table_wrapper .dt-layout-row:first-child > .dt-layout-start > div > span:first-child{background:#fff; padding:11px 8px 14px; font-weight:800;}
#table_wrapper .dt-layout-row:first-child > .dt-layout-start > div > span:first-child a{color:#000 !important;}
#table_wrapper .dt-layout-row:last-child{position:sticky; width:100%; bottom:0; background:#f1f1f1; padding-top:5px;}
table.dataTable tbody td {border-bottom-width:1px; margin:1px 0; border:1px solid #ccc; display:block; cursor:pointer; box-shadow:0; transition: 0.5s; background-color:#ebebeb;}
table.dataTable tbody td:hover {box-shadow: 0 0 5px #999; }
.table-striped>tbody>tr:nth-of-type(odd) td{background-color: #f9f9f9;}
.btn-group .fa-volume-control-phone small, .notes-view .fa-commenting-o small, .azioni-notes .fa-sticky-note-o small{position:absolute; border-radius:50% !important; background:#ebb757; color:#454545; padding: 3px 5px 3px 5px; margin-top:-15px; margin-left:-20px; font-size:100%; font-weight:bolder;}
.fa-bell-o small, .ti-bell small{font-family:'Quicksand', sans-serif; position:absolute; border-radius:50% !important; background:#920f0f; color:#fff; padding:3px 4px; margin-top:-8px; margin-right:-4px; font-size:70%; font-weight:bold;}
#table_wrapper div.dt-paging {margin:0; white-space:nowrap; text-align:right;}
div.dt-container .dt-info{margin:8px 0px}
div.dt-container .dt-paging .dt-paging-button{padding:5px 10px}
div.dt-container .dt-paging .dt-paging-button:hover {
  padding:5px 11px;
  color: #fff !important;
  border: 0px solid #8ff487;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #8ff487));
  background: -webkit-linear-gradient(top, #fafafa 0%, #8ff487 100%);
  background: -moz-linear-gradient(top, #fafafa 0%, #8ff487 100%);
  background: -ms-linear-gradient(top, #fafafa 0%, #8ff487 100%);
  background: -o-linear-gradient(top, #fafafa 0%, #8ff487 100%);
  background: linear-gradient(to bottom, #fafafa 0%, #8ff487 100%);
  background: #4e4e4e;
  opacity: 0.8;
}
div.dt-container .dt-paging .dt-paging-button.current{border: 0px solid #8ff487; background: #4e4e4e; color:#fff !important; padding:5px 11px;}
div.dt-container .dt-paging .dt-paging-button.current:hover{border:0px; background: #4e4e4e; opacity: .8; color:#fff !important; padding:5px 11px;}
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {padding: 5px 11px;}

/* Import modal */
#percentuale-operazione{width:100%; border:1px solid #ccc; padding:4px; height:40px; margin:10px 0;}
.bar-loader{background:#0040D0; height:30px; display:inline-block;}

/*************** ALERT MESSAGES ********************/
#container-notifications{position:fixed; top:0; right:0; width:100%; z-index:99999;}
.alert{margin-top:5px; margin-right:5px; margin-bottom:0px; display:inline-block; padding:10px 30px; float:right; clear:both;}
.alert-default{background-color: #8aa0b6; color: #fff;}
.alert-info{background-color: #D1D3D4; color: #515763;}
.alert-warning{background-color: #FFB819; color: #fff;}
.alert-danger{background-color: #D91E18 !important; color: #fff;}
.alert-error{background-color: #ecc4c2; border:3px solid #D91E18; color: #D91E18; position: fixed; top: 0; right: 0; z-index: 99999;}
.alert-error > button.close:hover { color: #D91E18;}
.alert-success { background-color: #61c061; color: #fff;}

input.form-control {height:43px !important;}
textarea{width:100%; max-width:868px !important; height:165px !important; max-height:165px !important; font-size:14px; line-height:18px; border:1px solid #dddddd; padding:10px;}

.form .box .row{background:#f1f1f1}
.history{height:calc(100vh - 365px); overflow:auto;}
.note-container{}
.message-container.row:before{content:'';transform:rotate(45deg); background:#fff; position:relative; z-index:2; height:15px; width:15px; top:-18px; display:inline-block; border-top:1px solid #eaeaea; border-left:1px solid #eaeaea;}
.message-container.row{background:#fff; margin-top:10px; border:1px solid #eaeaea; box-shadow:.5px .5px 0px #ccc; padding:10px;}
.message-container.row > .col-md-12{margin-top:-20px;}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{background:#f1f1f1; border-top-color:transparent;}

.dropzone {border:0px solid rgba(0,0,0,0.3) !important; background: none !important; height: calc(100vh - 120px);}
.dz-default.dz-message{height:100%;}

label[for="picture"] {float:right; position:absolute; bottom:-15px; right:-10px; cursor:pointer;}
label[for="picture"] input[type="file"]{display:none;}

.vcard{background:#9B9B9B; border-radius:2px !important;}
.vcard legend{color:#EAEAEA;}
.vcard legend a.prefer-vcard, .vcard legend a.preferred-vcard{color:#FFB819;}
.vcard legend a.elimina-vcard{color:#ad4e4e;}

.buttons-group{position:absolute; height:60px; bottom:0; right:0; width:100%; background-color: #f1f1f1;}
.btn-rounded{border: 1px solid #ccc; border-radius:50% !important; padding:2px 9px; color:#666;}

.main-content{}
.main-content.customers, .main-content.calendar, .main-content.profile{height:100vh;}
.profile-fields-container{height: calc(100vh - 70px); overflow-y: scroll;}

.variable_tag{border-radius:3px !important; background:#7B7B7B; border:1px solid #9B9B9B; padding:3px 5px; color:#fff; margin:2px 4px 2px 0px; display:inline-block;}

#calendar{height:calc(100vh - 20px)}

.select2.select2-container > span.selection{height:43px;}
.select2-container .select2-selection--single{height:43px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 43px;}
.select2-container .select2-selection--single .select2-selection__rendered {padding-left: 10px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 40px;}

/* webphone */
#container-notifications .fa{margin:0 5px 0 0;}
#container-notifications .fa-phone, #connectCall .fa-phone, #inCallButtons .fa-phone, #inCallButtons .fa-microphone{padding: 5px 6px; border: 0px solid #fff; border-radius: 50% !important; background: #389400; color:#fff;}
#container-notifications .fa-phone-close, #inCallButtons .fa-phone-close{transform:rotate(135deg); padding:0 5px; padding: 5px 6.5px; background: #a01414 !important;}
#inCallButtons .fa-microphone{padding:0 5px; padding: 5px 6.5px; background:#ccc !important;}
#webphone-label{border:0; width:80px; height:30px; transform:rotate(-90deg); box-shadow:1px 1px 1px #ccc; background:#333; color:#fff; padding:5px 10px; position:absolute; bottom:100px; left:-54px;}
#webphone-shadower {width:100%; height:100%; padding:80px 20px; box-shadow:0px 3px 10px #ccc;}
#webphone {width:0px;
  margin: 0 auto;
  height: 50vh;
  min-height:550px;
  margin-top:40vh;
  border: 1px solid #ccc;
  float: right;
  display: inline-block;
  position: absolute;
  z-index: 9;
  background: #fff; top: 0; right: 0; bottom: 0; box-shadow: -3px 3px 10px #ccc;}
.callInfo {width: 100%; height:70px;}
#connectedCall .callInfo {}
#mute {margin-left: 4px;}
#dialPad div {-moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.callInfo h3 {
          color: #389400;
          margin: 10px 0 10px 0;
        }

        .callInfo p {
          margin: 0px 25px 0px 0px;
          float: left;
        }


        #mute:active,
        #connectCall:active,
        #reject:active,
        #hangUp:active,
        #answer:active {
          background-color: #B6B6B6;
          -webkit-box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.45);
          box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.45);
          border: none;
        }

#reject {-ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg);}
#hangUp{width: calc(50% - 12px);}
#connectCall{width:24px; margin:0 auto;}
#connectCall, #hangUp, #mute {cursor:pointer;}
#inCallButtons{display:flex; flex-wrap: nowrap; align-content: center; justify-content:space-around; flex-direction:row; align-items: center;}
.muteActive {
          color: #FFF;
          background-color: #389400;
        }

#to {border-bottom:2px solid #BBBBBB;}
#toField {border:0px solid #B8B8B8; background:none; width:100%;}
#dialPad { width: 240px; height: 308px; margin: 0 auto;}

        #dialPad div {
          float: left;
          width: 43px;
          height: 45px;
          text-align: center;
          font-size: 23px;
          margin: 25px 15px 0px 15px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          border-radius: 25px 25px 25px 25px;
          -moz-border-radius: 25px 25px 25px 25px;
          -webkit-border-radius: 25px 25px 25px 25px;
          border: 1px solid #E8E8E8;
          padding-top: 5px;
        }

        #dialPad div:hover {
          background-color: #389400;
          color: #FFF;
          cursor: pointer;
          cursor: hand;
        }

        #dialPad div:active {
          background-color: #B2B2B2;
          -webkit-box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.45);
          -moz-box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.45);
          box-shadow: 0px 1px 7px 2px rgba(0, 0, 0, 0.45);
          border: none;
        }

@-webkit-keyframes callp {
  from {
    color: #FFF;
  }

  to {
    color: #389400;
  }
}

@keyframes callp {
  from {
    color: #FFF;
  }

  to {
    color: #389400;
  }
}

#answer {
  -webkit-animation: call 1s;
  animation: call 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

@-webkit-keyframes call {
  from {
    background: #389400;
  }

  to {
    background: #FFF;
  }
}

@keyframes call {
  from {
    background: #389400;
  }

  to {
    background: #FFF;
  }
}

#localFeed,
#remoteFeed{display:none;}

[class^='gg-']{display: inline-block; vertical-align: text-bottom;}