.hs {padding: 0; width: 987px; background: #fff; margin: 20px auto; }
.hs_left {width: 52.7%;  height: 600px; border-right: 1px solid #dedede; }
.hs_right {width: 461px; float: right; height: 600px; border-left: 4px solid #fafafa; padding: 0; margin: 0;}
.cleaner {clear: both;}

.sidebar {float: left; background: #595959; width: 18%; height: 602px;}
.sidebar ul.calllist {padding: 0; margin: 0; }
.sidebar ul.calllist li{list-style: none;}
.sidebar ul.calllist li a{ background: #616161; width: 100%; height: 70px; display: block; text-align: center;  color: #fff; text-decoration: none; padding-top: 30px;}
.sidebar ul.calllist li a:hover{ background: #62af32;}
.sidebar span.fa{ display: block;}
.sidebar ul.calllist li a.active{ background: #62af32; }
.sidebar ul.calllist li a.sett{ margin-top: 100px; background: #595959; color: #888; font-size: 1em;}

.sidebar span.fa {font-family: 'FontAwesome'; font-size: 3em;}

ul.barSett {padding: 0; margin: 180px 0 0 0;}
ul.barSett li{padding: 0; margin: 0; text-align: center; list-style: none;}
ul.barSett li a {font-size: 0.55em; font-weight: normal; padding: 5px 5px; color: #888; text-decoration: none; background: #616161; display: block; margin: 5px 10px; border-radius: 6px; -o-transition: .2s ease-in;
-ms-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-webkit-transition: .2s ease-in;
transition: .2s ease-in;}
ul.barSett li a {font-size: 0.55em; font-weight: normal; padding: 5px 5px; color: #888; text-decoration: none; background: #616161; display: block; margin: 5px 10px; border-radius: 6px; -o-transition: .2s ease-in;
-ms-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-webkit-transition: .2s ease-in;
transition: .2s ease-in;}
ul.barSett li span.syncoffli {font-size: 0.55em; font-weight: normal; padding: 5px 5px; color: #888; text-decoration: none; background: #616161; display: block; margin: 5px 10px; border-radius: 6px; -o-transition: .2s ease-in;
-ms-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-webkit-transition: .2s ease-in;
transition: .2s ease-in;}

ul.barSett li a:active {
    box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.15); 
    -moz-box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.15);
    text-shadow: none;
    background: #fafafa;
    color: #888;
}


.log {float: left; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; width: 82%; min-height: 600px; overflow: auto;}

.empty-log {background: url(/img/empty-log.png) no-repeat center 20px; text-align: center;float: right;  border: none; width: 100%;}
.empty-log p {font-family: 'helvetica_thin'; color: #fff; padding: 220px 0 0 0; font-size: 22px;}

.nosync-log {background: url(Images/empy-log-sync.png) no-repeat center 20px; text-align: center;float: right;  border: none; width: 100%;}
.nosync-log p {font-family: 'helvetica_thin'; color: #fff; padding: 235px 0 0 0; font-size: 22px;}
.nosync-log a {font-family: arial; color: #fff; font-size: 0.65em; font-weight: bold; text-decoration: none; padding: 5px; background: #616161; display: block; width: 60px; margin: 5px auto; -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;}
.nosync-log a:hover {
background: #dedede;
color: #595959;
border: #616161;
box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0,0,0,0.1);
}
.nosync-log a:active {
box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 2px 0px rgba(0, 0, 0, 0.15);
text-shadow: none;
background: #fafafa;
color: #888;
}
.no-details {margin-top: 200px; text-align: center;}

.sidebar span.fa {font-family: 'FontAwesome'; font-size: 3em;}
span.fa {font-family: 'FontAwesome';}
.row {font-family: arial; border-bottom: 1px solid #fafafa; padding: 10px; color: #888; display: block;  text-decoration: none;}
.row h3{ font-family: arial; padding: 2px 0; margin: 0; font-weight: normal; padding-left: 50px;}
.row p{padding: 0; margin: 0; line-height: 2.0em; padding-left: 50px; padding-right: 35px;}
.row:hover h3{ color: #000;}
.row:hover p{color: #000;}
.hs_left .row:hover {background: #fafafa;}


.row .time{font-family: arial; float: right; font-weight: normal; font-size: 0.8em; color: #888;}
.row .durat{font-family: arial; float: right; font-weight: normal; font-size: 0.9em; color: #888;}
.unreadCall {background-color: #fff; color: #595959; border-bottom: 1px solid #fafafa; display: block; text-decoration: none;}
.unreadCall p{font-weight: bold;}
.unreadCall h3{font-weight: bold;}
.unreadCall p span.fa{font-weight: normal;}
.unread-sms {background-color: #fff; color: #595959; border-bottom: 1px solid #fafafa; display: block; text-decoration: none;}
.unread-sms p{font-weight: bold;}
.unread-sms h3{font-weight: bold;}
.unread-sms p span.fa{font-weight: normal;}
.active {background: #62af32; color: #fff; border: none;  text-decoration: none;}
.active:hover {background: #62af32!important; color: #fff; border: none;  text-decoration: none;}
.active p{font-weight: bold;}
.active h3{font-weight: bold;}
.active:hover p{color: #fff;}
.active:hover h3{color: #fff;}
.active p span.fa{font-weight: normal;}
.active .time{color: #fff;}
.det {background: #fff; color: #595959; border-bottom: 1px solid #fafafa; display: block; text-decoration: none; font-weight: normal;}
.det p{font-weight: normal; font-weight: bold;}
.det h3{font-weight: normal;}
.det p span.fa{font-weight: normal;}
.head {background: #fafafa; padding: 20px;}
.head h3{font-family: arial; padding: 2px 0; margin: 5px 0 12px 0; font-size: 1.5em; color: #595959;}
span.ticket {font-family: arial; background: #62af32; font-size: 0.8em; font-weight: bold; color: #fff; padding: 4px 8px; margin-right: 5px; border-radius: 4px;}
span.ticket a{text-decoration: none;}
span.fa{font-weight: normal;}
span.timeline {width: 30%; height: 18px; margin: 0 auto; font-family: arial; background: #dedede; font-size: 0.9em; font-weight: bold; color: #fff; padding: 4px 30px; border-radius: 4px; text-align: center; }
.logdet {overflow: auto; font-size:14px}
.miss {background: url(/img/icon-missed.png) no-repeat 10px center; display: block;}
.in {background: url(/img/icon-in.png) no-repeat 10px center; display: block;}
.in-read {background: url(/img/icon-in.png) no-repeat 10px center; display: block;}
.out {background: url(/img/icon-out.png) no-repeat 8px center; display: block;}
.out-read {background: url(/img/icon-out.png) no-repeat 8px center; display: block;}
.notif {background: #e53c42;border-radius: 50%;margin: 25px 0 0 60px;height: 25px;width: 25px;text-align: center;color: #fff;display: block;padding: 0;line-height: 2em;font-size: 1em;font-weight: bold;font-family: arial;position: absolute;}

.sms {background: url(Images/icon-sms.png) no-repeat 8px center; display: block;}
.sms-read {background: url(Images/icon-sms-read.png) no-repeat 8px center; display: block;}
.tome.left {margin-left: 20px;background: #62af32;color: #fff;font-family: arial;line-height: 1.5em;width: 70%;}
.tome {position: relative;padding: 15px;margin: 1em 0 3em;color: #000;background: #f3961c;float: left;}
.tome.left:after {top: 16px;left: -10px;bottom: auto;border-width: 10px 10px 10px 0;border-color: transparent #62af32;}
.tome:after {content: "";position: absolute;bottom: -15px;left: -10px;border-width: 2px 2px 0;border-style: solid;border-color: #f3961c transparent;display: block;width: 0;}
.fromme.right {margin-right: 20px;background: #dedede;color: #595959;font-family: arial;line-height: 1.5em;float: right;width: 70%;}
.fromme {position: relative;padding: 15px;margin: 1em 0 3em;color: #000;background: #dedede;}
.fromme.right:after {top: 16px;right: -10px;bottom: auto;left: auto;border-width: 10px 0 10px 10px;
border-color: transparent #dedede;}
.fromme:after {content: "";position: absolute;bottom: -15px;left: 20px;border-width: 2px 2px 0;border-style: solid;border-color: #f3961c transparent;display: block;width: 0;}
.fromme strong, .tome strong{display: block; padding-top: 10px; font-size: 0.9em;}


/* mazani konverzaci */
.mCustomScrollbar .red {
background: #e53c42;
}
.mCustomScrollbar .ed {
border-radius: 50%;
padding-top: 5px;
color: #fff;
font-size: 1.4em;
width: 25px;
height: 20px;
text-align: center;
display: block;
float: right;
clear: both;
margin: -20px 0px 0 0px;
z-index: 99;
}

.mCustomScrollbar .ed_expand {
border-radius: 12px;
color: #fff;
font-size: 1.4em;
text-align: center;
display: block;
float: right;
clear: both;
margin: -20px 0px;
z-index: 99;
padding: 5px 8px;
}

.mCustomScrollbar .ed_expand a{
color: #fff;
text-decoration: none;
}

.mCustomScrollbar .ed_expand .smallfont{
font-size: 0.9em !important;
font-weight: bold;
}