.main-container {
    padding: 2px 12px 0 12px
}

html:not(root) body .table-responsive {
}

.main .navbar-brand {
    display: inline-block;
    padding: 5px 15px;
    height: 50px;
    color: #fff
}

.main .navbar-brand img {
    width: auto;
    max-height: 40px
}

.main .navbar,
.main .list-group-item {
    border-radius: 0
}

.main #menu {
    padding: 0;
    overflow-y: auto;
}

#menu #collapseIcon{
    background: #444;
    color:#fff;
    text-align: right;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
}

#menu #collapseIcon .glyphicon:before {
    content: "\e079";
}

#menu.min{
    width: 25px;
    position: absolute;
    z-index: 10000;
}

#menu.min #accordion{
    display: none;
}

#menu.min #collapseIcon .glyphicon:before {
    content: "\e080";
}

#tab.max{
    width: 100%;
}

html,
body,
.main,
.main .row {
    height: 100%
}
  
#flow .tab-content{
    height: auto !important;
}

#flowPageTab .tab-content {
    min-height: 120px;
    padding-left: 12px;
    padding-right: 12px
}

#fgImportantUrgent {
    padding: 0px 20px
}

#fgImportantUrgent label+label {
    margin-left: 15px
}

.main .panel-group .panel {
    margin-top: 0;
    border-radius: 0;
    border: 0
}

.main .panel-group .panel-body {
    padding: 0;
    border: 0;
    border-top: 0 !important
}

.main .panel-group .panel-heading {
    background: #333;
    color: #fff;
    border: 0;
    border-radius: 0;
    font-weight: bold
}

.main .list-group,
.main .panel-group {
    margin-bottom: 0
}

.main .list-group-item {
    display: block;
    padding: 10px 20px;
    color: #aaa;
    border-bottom: 1px solid #222;
    border-right: 1px solid #222;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 7px solid #555;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    background: #222;
}

.main .panel-child .list-group-item {
    padding: 8px 30px;
}

.main .list-group-item[aria-expanded="true"] .glyphicon:before {
    content: "\2212";
}

.main .list-group-item[aria-expanded="false"] .glyphicon:before {
    content: "\002b";
}

.main .list-group-item:hover,
.main .list-group-item:focus,
.main .list-group-item.selected {
    color: #fbff52;
    background-color: #3a3a3a;
    border-left: 7px solid #0bc7b6
}

#accordion .panel {
    border-bottom: 1px solid #222
}

.main #btn-user {
    background: transparent;
    color: #fff;
    float: right;
    margin-right: 10px;
}

.main #btn-user .btn-text {
    margin-left: 5px
}

.pagination > li > a,
.sort-btn,
.datagrid-btn,
.datagrid-btn:hover,
.datagrid-btn:focus,
.form-btn,
.form-btn:hover,
.form-btn:focus,
.form-btn.active {
    color: #4b8df8
}

.ios-table-wrapper {
    position: fixed !important;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.table-responsive {
    margin-bottom: 10px;
    /* background: #eee; */
}

.modal .table-responsive {
    -webkit-overflow-scrolling: auto
}

.datagrid-toolitem,
.gantt-toolitem,
.dataform-toolitem {
    padding: 5px;
    width: 100%;
}

.datagrid-title {
    padding: 5px;
    background-color: #428bca;
    color: #fff;
    font-size: 18px;
}

.datagrid-toolitem .btn .btn-text,
.gantt-toolitem .btn .btn-text,
.dataform-toolitem .btn .btn-text {
    margin-left: 5px
}

.datagrid-toolitem .btn .btn-text + .glyphicon,
.gantt-toolitem .btn .btn-text + .glyphicon,
.dataform-toolitem .btn .btn-text + .glyphicon {
    margin-left: 5px
}

.datagrid-toolitem .btn,
.gantt-toolitem .btn,
.dataform-toolitem .btn {
    margin-right: 4px
}

.datagrid-toolitem .datagrid-btn,
.gantt-toolitem .gantt-btn,
.dataform-toolitem .dataform-btn {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd
}

.datagrid-toolitem .datagrid-btn:hover,
.datagrid-toolitem .datagrid-btn:focus,
.gantt-toolitem .gantt-btn:hover,
.gantt-toolitem .gantt-btn:focus,
.dataform-toolitem .dataform-btn:hover,
.dataform-toolitem .dataform-btn:focus {
    color: #fff;
    background-color: #3071a9;
    border-color: #285e8e
}

div.page {
    width: 100%;
    background: #fff
}

.bootstrap-datagrid {
    background: #fff;
    margin-bottom: 0
}

.table-responsive {
    -ms-overflow-style: scrollbar
}

td.hidden,
th.hidden {
    display: none
}

td.nowrap,
th.nowrap {
    white-space: nowrap
}

.pagination {
    margin-top: 5px
}

.btn > .btn-text {
    margin-left: 2px
}

.bootstrap-datagrid .table-cell-label {
    padding: .4em;
    min-width: 30%;
    margin: -.4em 1em -.4em -.4em;
    display: none
}

td.datagrid-command {
    text-align: left;
    width: 25px
}

.table > tbody > tr > td.datagrid-command {
    padding: 5px
}

td.datagrid-rownumber {
    text-align: center;
    width: 15px
}

td.datagrid-checkbox {
    text-align: center;
    width: 25px
}

td.datagrid-command > .datagrid-btn {
    padding: 0;
    margin: 0 2px;
    outline: none;
    width: 20px
}

td.datagrid-command > .datagrid-btn:hover {
    color: #3071a9
}

.bootstrap-datagrid.table-simple > tbody > tr > td.datagrid-command > .datagrid-btn{
    display: none ! important;
}

.bootstrap-datagrid.table-simple > tbody > tr > td.datagrid-command > .datagrid-btn[command="showCommand"]{
    display: inline-block ! important;
}

.bootstrap-datagrid tbody input:focus,
.bootstrap-datagrid tbody input.focus,
.bootstrap-datagrid tbody select:focus{
    min-width: 80px;
}

.bootstrap-datagrid tbody input[type="checkbox"]:focus{
    min-width: 0;
}

td.datagrid-command > .datagrid-btn[command="viewRow"] {
}

td.datagrid-command > .datagrid-btn[command="edit_row"] {
}

td.datagrid-command > .datagrid-btn[command="delete_row"] {
}

.datagrid-mask {
    display: block;
    background: #c0c0c0;
    opacity: 0.3;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1038
}

.datagrid-mask-msg {
    position: absolute;
    left: 40%;
    top: 30px;
    z-index: 1039
}

.bootstrap-editgrid > .bootstrap-datagrid > thead > tr{
    background-color:#4b8df8;
    color:#fff;
    height:40px;
}

.bootstrap-form.fit > .modal-dialog,
.refval-modal.fit > .modal-dialog{
    width: auto;
    margin: 0px;
}

.bootstrap-form .modal-header,
.refval-modal .modal-header {
    border-radius: 5px 5px 0 0;
    background: #4b8df8;
    padding: 8px 15px;
}

.bootstrap-form .panel-heading {
    background: #4b8df8
}

.bootstrap-form .form-group {
    margin-bottom: 0
}

.bootstrap-form .form-editor {
    margin-bottom: 15px
}

.bootstrap-form.panel-group {
    margin-bottom: 0
}

.bootstrap-form fieldset{
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

.bootstrap-form legend{
    font-size: 14px;
    width: auto;
    margin-bottom: 0;
    border: 0;
}

.bootstrap-datalist .datagrid-btn {
    outline: none
}

div.fuzzy {
    display: none
}

.list-item.selected {
    background: #d9edf7
}

.tab-content {
    padding-top: 15px
}

.list-bordered > .list-item {
    border: 1px solid #ddd
}

.checkbox-inline,
.radio-inline {
    margin-right: 15px
}

.checkbox-inline+.checkbox-inline,
.radio-inline+.radio-inline {
    margin-left: 0px
}

.refval-modal .bootstrap-datagrid {
    margin-bottom: 0
}

.refval-modal .pagination {
    margin: 0
}

.refval-table td.datagrid-command {
    width: auto
}

.options-div .btn.active {
    background-color: #3071a9;
    color: #fff;
    text-shadow: none;
}

.options-text {
    display: inline;
    width: 120px;
}

.btn + .options-text {
    margin-left: 5px;
}

.slider-horizontal .slider-selection {
    background: #89cdef
}

.bootstrap-form .signature-btn {
    outline: none;
    text-decoration: none
}

/*.form-group .lcs_switch{
    width: 105px;
}

.form-group .lcs_label{
    width: 65px;
}

.form-group .lcs_switch.lcs_on .lcs_cursor{
     left: 80px; 
}*/

.icon-loading {
    background-image: url('../images/loading.gif');
    background-repeat: no-repeat;
    background-position: 0 0;
    height: 35px
}

.bootstrap-form a[data-toggle="collapse"] {
    text-decoration: none
}

.bootstrap-form a[data-toggle="collapse"]:before {
    content: "\e113"
}

.bootstrap-form a[data-toggle="collapse"][aria-expanded="false"]:before {
    content: "\e114"
}

.sort-btn.asc:before {
    content: "\e253"
}

.sort-btn.desc:before {
    content: "\e252"
}

.bootstrap-tree .node-selected{
    background-color: #428bca;
    color: #fff;
}

.bootstrap-menulist{
    overflow: hidden;
}

.bootstrap-menulist ul {
  padding-left: 0;
  list-style: none;
}

.bootstrap-menulist li{
  float: left;
  text-align: center;
  border-width: 1px;
  border-style: solid;
}

.bootstrap-menulist .icon{
  display: block;
}

.bootstrap-menulist .text{
  margin-top: 10px;
  font-size: 14px;
  color: #000;
}

.bootstrap-menulist .roundSquare li,
.bootstrap-menulist .circle li{
   border-radius: 10px;
}

.bootstrap-menulist .circle .icon{
   border-radius: 50%;
}

/*.bootstrap-datagrid.table-readonly th.command,
.bootstrap-datagrid.table-readonly td.datagrid-command,*/
.bootstrap-datagrid.table-hidecommand th.command,
.bootstrap-datagrid.table-hidecommand td.datagrid-command {
    display: none
}

.dropover {
     outline: 1px solid #333 !important;
     outline-offset:2px;
}

.options-item,
.options-add{
    margin-bottom: 5px;
}

.no-spiner::-webkit-outer-spin-button,
.no-spiner::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    margin: 0; 
}

.icongo{
    background-image: url(../../../../images/go.png);
    background-repeat: no-repeat;
    width: 16px;
}

.flow-status{
    border: 3px solid #000;
    border-radius: 7px;
    padding: 5px 2px;
    font-weight: 700;
    font-size: 16px;
    white-space:nowrap;
}

.flow-status.flow-paused{
    border-color: #999;
    color:#999;
}

.flow-status.flow-approved{
    border-color: #ff0000;
    color:#ff0000;
}

.flow-status.flow-approving{
    border-color: #007f00;
    color:#007f00;
    word-wrap: nowrap;
}

.flow-status.flow-rejected{
    border-color: #0000bf;
    color:#0000bf;
}

.sw>.tab-content{
    overflow-y: auto;
    padding: 0 10px;
}

.navbar .navbar-brand {
    padding: 10px 15px;
}

.image-box{
    margin: 0 0 15px;
    padding: 0;
    border: 1px solid #eee;
    cursor: pointer;
    z-index: 1038;
    overflow:hidden;
}

.image-text {
    display: block;
    text-align: center;
    font-size: 20px;
    font-family: 'arial';
    line-height: 40px;
    background-color: white;
    color: #004ea2;
    cursor: pointer;
    transition: all .4s ease;
}

.image-box.shadow:hover,
.bootstrap-image.shadow:hover{
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.image-box.transform:hover,
.bootstrap-image.transform:hover{
    transform: scale(1.1);
    transition: all .5s ease 0s;
    z-index: 1039;
}

.image-box.transform-fixed:hover img {
    transform: scale(1.1);
    transition: all .5s ease 0s;
}

.image-box.transform-fixed:hover .image-text {
    transform: translate3d(0, 0, 0);
}

.image-box:hover .image-text {
    color: white;
    background-color: #4a8bd1;
}

.thumbelina-but.horiz{    
    background-color:transparent;
    height: 32px;
    width: 22px;
    margin: 24px 0;
    border: 1px solid #fff;
    box-shadow: none;
    /*background: url(../../../../images/thumbelina.png) no-repeat;*/
}

.thumbelina-but.left{
    background: url(../../../../images/prev.png) no-repeat;
}

.thumbelina-but.right{
    background: url(../../../../images/next.png) no-repeat;
}

.thumbelina-but.left.disabled{
    background: url(../../../../images/disabled-prev.png) no-repeat;
}

.thumbelina-but.right.disabled{
    background: url(../../../../images/disabled-next.png) no-repeat;
}

.thumbelina-but.left:hover {
    background: url(../../../../images/hover-prev.png) no-repeat;
}

.thumbelina-but.right:hover {
    background: url(../../../../images/hover-next.png) no-repeat;
}

.bootstrap-shoppingcart{
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd
}
.bootstrap-shoppingcart:hover{
    color: #fff;
    background-color: #3071a9;
    border-color: #285e8e;
}
.bootstrap-shoppingcart .badge{
    color: #428bca;
    background-color: #fff;
}

.cart-group{
    width: 380px;
}

.cart-group li{
   min-height: 60px;
}

.cart-popover{
    max-width: 420px;
}

.cart-popover .popover-title{
    padding: 5px;
    background-color: #428bca;
    color: #fff;
    font-size: 18px;
}

.cart-popover .input-group-addon{
    cursor: pointer;
    background-color: #428bca;
    color: #fff;
}

.cart-popover .input-group-addon.disabled{
    cursor: default;
    background-color: #eee;
    color: #000;
}


.cart-popover .popover-content{
    padding: 5px;
    overflow-y: auto;
}

.cart-popover .popover-footer{
    padding: 5px;
}

.cart-image{
    width: 20%;
    display: inline-block;
}

.cart-image img{
    width: 100%;
}

.cart-name{
    width: 50%;
    padding: 0 10px;
    display: inline-block;
    vertical-align: top;
}

.cart-desc{
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

/*
inspired from https://codepen.io/Rowno/pen/Afykb 
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/*zoom*/
@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.5, 1.5);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.5, 1.5);
  }
}

.carousel-zoom .carousel-inner .item > img {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}

/*
    StyleSheet For Responsive Bootstrap Carousel Effect Ken Burns
    Author: Razboynik
    Author URI: http://filwebs.ru
    Description: Bootstrap Carousel Effect Ken Burns
*/
.kb_control_left,.kb_control_right
{
    top:50%;
    z-index:2;
    opacity:0;
    width:55px;
    height:55px;
    text-align:center;
    -webkit-transition:all ease-in-out .3s;
    transition:all ease-in-out .3s
}
.kb_wrapper:hover .kb_control_left,.kb_wrapper:hover .kb_control_right
{
    opacity:.8
}
.kb_icons
{
    line-height:50px;
    font-size:34px!important;
    font-weight:normal!important
}
.kb_control_left
{
    left:1%!important
}
.kb_control_right
{
    right:1%!important
}
.kb_elastic
{
    opacity:1;
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1)
}
.kb_elastic .item
{
    top:0;
    z-index:1;
    opacity:0;
    width:100%;
    position:absolute;
    left:0!important;
    display:block!important;
    -webkit-transform:scale3d(2,1,2);
    transform:scale3d(2,1,2);
    -webkit-transition:-webkit-transform .7s ease-in-out 0s,opacity ease-in-out .7s;
    transition:transform .7s ease-in-out 0s,opacity ease-in-out .7s
}
.kb_elastic .item:first-child
{
    top:auto;
    position:relative
}
.kb_elastic .item.active
{
    opacity:1;
    z-index:2;
    -webkit-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1);
    -webkit-transition:-webkit-transform .7s ease-in-out 0s,opacity ease-in-out .7s;
    transition:transform .7s ease-in-out 0s,opacity ease-in-out .7s
}
.kb_wrapper
{
    overflow:hidden;
    max-height:650px
}
.kb_wrapper>.carousel-inner>.item>img,.kb_wrapper>.carousel-inner>.item>a>img
{
    margin:auto;
    opacity:.8;
    /*width:100%!important;*/
    -webkit-transform-origin:100% 0;
    -moz-transform-origin:100% 0;
    -ms-transform-origin:100% 0;
    -o-transform-origin:100% 0;
    transform-origin:100% 0;
    -webkit-animation:immortalkenburns 20000ms linear 0s infinite alternate;
    animation:immortalkenburns 20000ms linear 0s infinite alternate
}
    @-webkit-keyframes immortalkenburns
{
    0%
{
    -webkit-transform:scale(1);
    -webkit-transition:-webkit-transform 20000ms linear 0s
}
    100%
{
    -webkit-transform:scale(1.2);
    -webkit-transition:-webkit-transform 20000ms linear 0s
}

}
    @-moz-keyframes immortalkenburns
{
    0%
{
    -moz-transform:scale(1);
    -moz-transition:-moz-transform 20000ms linear 0s
}
    100%
{
    -moz-transform:scale(1.2);
    -moz-transition:-moz-transform 20000ms linear 0s
}

}
    @-ms-keyframes immortalkenburns
{
    0%
{
    -ms-transform:scale(1);
    -ms-transition:-ms-transform 20000ms linear 0s
}
    100%
{
    -ms-transform:scale(1.2);
    -ms-transition:-ms-transform 20000ms linear 0s
}

}
    @-o-keyframes immortalkenburns
{
    0%
{
    -o-transform:scale(1);
    -o-transition:-o-transform 20000ms linear 0s
}
    100%
{
    -o-transform:scale(1.2);
    -o-transition:-o-transform 20000ms linear 0s
}

}
    @keyframes immortalkenburns
{
    0%
{
    transform:scale(1);
    transition:transform 20000ms linear 0s
}
    100%
{
    transform:scale(1.2);
    transition:transform 20000ms linear 0s
}

}
.kb_caption
{
    left:10%;
    width:40%;
    bottom:60%;
    text-align:left;
}
.kb_caption_right
{
    left:50%
}
.kb_caption_center
{
    float:none;
    margin:auto
}
.kb_caption h1
{
    font-size:55px;
    font-weight:300;
    text-align: center;
    text-shadow:none;
    padding:5px 0 5px 15px;
    -webkit-animation-delay:1s;
    animation-delay:1s
}
.kb_caption h2
{
    font-size:30px;
    text-align: center;
    text-shadow:none;
    padding-left:15px;
    font-weight:normal;
    -webkit-animation-delay:1.5s;
    animation-delay:1.5s
}
    @media only screen and (max-width:480px)
{
.kb_control_left,.kb_control_right
{
    border:0
}
.kb_icons
{
    font-size:18px!important
}
.kb_caption
{
    left:0;
    width:100%;
    bottom:25%;
    text-align:center
}
.kb_caption h1
{
    font-size:25px
}
.kb_caption h2
{
    font-size:20px
}

}
    @media(min-width:481px) and (max-width:600px)
{
.kb_control_left,.kb_control_right
{
    border:0
}
.kb_caption
{
    left:0;
    width:100%;
    bottom:25%;
    text-align:center
}

}
    @media(min-width:601px) and (max-width:767px)
{
.kb_caption
{
    left:0;
    width:100%;
    bottom:25%;
    text-align:center
}

}
    @media(min-width:768px) and (max-width:991px)
{
.kb_caption
{
    bottom:25%
}

}
    @media(min-width:992px) and (max-width:1199px)
{
.kb_caption
{
    bottom:50%
}

}
.kb_wrapper
{
    background:#000
}
.kb_control_left,.kb_control_left:hover,.kb_control_left:active,.kb_control_left:focus,.kb_control_right,.kb_control_right:hover,.kb_control_right:active,.kb_control_right:focus
{
    color:#000;
    border:2px solid #fff;
    background:#fff !important
}
.kb_caption h1
{
    color:#bf392b;
    background:#fff
}
.kb_caption h2
{
    color:#fff
}
    @media(max-width:600px)
{
.kb_control_left,.kb_control_left:hover,.kb_control_left:active,.kb_control_left:focus,.kb_control_right,.kb_control_right:hover,.kb_control_right:active,.kb_control_right:focus
{
    border:none!important;
    background:transparent!important
}

}

.flowdesign-toolitem{
    width: 120px;
    height: 30px;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    z-index: 3;
    display: inline-block;
    color: #000;
    margin: 0 5px;
}

.flowdesign-item{
    width: 200px;
    height: 30px;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    z-index: 3;
    display: table;
    color: #000;
    margin: 30px auto;
    position: relative;
    cursor: pointer;
}

.flowdesign-item.drag-over {
   opacity: 0.5;
   border: 1px solid #0ff;
}

.flowdesign-item.selected {
   border: 2px solid red;
}

.flowdesign-item + .flowdesign-item .arrow-div
{
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    top: -30px;
    margin-left: -15px;
    background-size: 30px 30px; 
    background: url('../../../../images/arrow.png') no-repeat center center;
}

.flow-up
{
    position: absolute;
    top:115px;
    left:5px;
}

.flow-down
{
    position: absolute;
    top:150px;
    left:5px;
}

.flowdesignDiv .btn-remove
{
    float: right;
}

.StartActivity,
.EndActivity
{
    width: 120px;
}


.StartActivity .btn-remove,
.EndActivity .btn-remove
{
    display: none;
}

.flowdesign-toolitem .item-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    float: left;
}


.flowdesign-item .item-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -8px;
}

.StartActivity > .item-icon {
    background: url('../../../../images/flstart.png') no-repeat center center;
}

.EndActivity > .item-icon {
    background: url('../../../../images/flend.png') no-repeat center center;
}

.StandActivity > .item-icon {
    background: url('../../../../images/flstand.png') no-repeat center center;
}

.MultiApproveActivity > .item-icon {
    background: url('../../../../images/fldetail.png') no-repeat center center;
}

/*chat*/
.chat-icon{
    width: 40px;
    height:40px;
    margin:10px;
    padding: 5px;
    font-size: 30px;
    display:inline-block;
}


.chat-message{
    max-width: 70%;
    font-size: 14px;
    margin:10px 0;
    display:inline-block;
    border:1px solid #999;
    vertical-align: top;
    border-radius: 10px;
    padding: 10px;
    position: relative;
}

.chat-time-div{
    position: relative;
    height: 20px;
}

.chat-time{
    font-size: 10px;
    position: absolute;
    top: 2px;
    right: 5px;
    padding: 2px 5px;
    border-radius: 5px;
    background-color:rgb(224, 224, 224);
}

.chat-panel {
    position: relative;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.user div{
  /*  float: right;*/
}

.user .chat-message{
    background-color: rgb(228, 255, 255);
}

/*.deleted .chat-message{
    color: #888;
}
*/
.error .chat-message{
   color: rgb(255, 0, 0);
}

.example .chat-message {
    color: #a7a7a7;
}

.processing .chat-message{
    width: 100px;
    color: #777;
}