/* base */
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no-overflow {
    overflow: hidden !important;
}

.clickable {
    cursor: pointer;
}

.img-thumbnail {
    position: relative;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-round {
    border-radius: 0 !important;
}

.progress, .progress-bar {
    height: 8px !important;
}

.font-label-grey {
    color: #9ca8b0 !important;
}

.font-azure {
    color: #60acd0 !important;
}

.font-white,
.font-x-white {
    color: white !important;
}

.font-x-green {
    color: #8CC152 !important;
}

.font-x-yellow {
    color: #F6BB42 !important;
}

.font-x-red {
    color: #DA4453 !important;
}

.font-x-rose {
    color: #C28888 !important;
}

.font-x-blue {
    color: #22313F !important;
}

.font-x-cyan {
    color: #2B71B5 !important;
}

.font-x-whitenoise {
    color: #F7F8FF !important;
}

.font-x-black {
    color: #2c2c2c !important;
}

.font-x-grey {
    color: #7F91A0 !important;
}

.red-vodafone {
    background-color: #e60000;
    color: white;
}

.font-red-vodafone {
    color: #e60000 !important;
}

.badge.badge-squared {
    border-radius: 0px !important;
}

.map-background {
    background-color: #f2f3f9;
    background-image: url('../img/background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}

.webapp-fragment .fa-outline,
.webapp-fragment .fa-outline:before {
    text-shadow: -1px -1px white,
    -1px 1px white,
    1px -1px white,
    1px 1px white;
}

.light.webapp-fragment .fa-outline,
.light.webapp-fragment .fa-outline:before {
    text-shadow: -1px -1px #26445D,
    -1px 1px #26445D,
    1px -1px #26445D,
    1px 1px #26445D;
}

.webapp-contentbar .webapp-fragment .fa-outline,
.webapp-contentbar .webapp-fragment .fa-outline:before {
    text-shadow: -1px -1px #CDD5DA,
    -1px 1px #CDD5DA,
    1px -1px #CDD5DA,
    1px 1px #CDD5DA,
    0px -1px #CDD5DA,
    -1px 0px #CDD5DA,
    1px 0px #CDD5DA,
    0 1px #CDD5DA;
}

.btn-icon-only.btn-sm {
    height: 32px;
    width: 32px;
    line-height: 22px;
}

div.error-message {
    background-color: #DA4453;
    color: white;
    padding: 4px 12px;
    border-radius: 2px !important;
    margin-top: 4px;
    margin-bottom: 4px;
}

.form-control {
    border-radius: 2px !important;
}

.label-success {
    background-color: #8CC152;
}

.label-warning {
    background-color: #F6BB42;
}

.label-error {
    background-color: #DA4453;
}

/* input */
.input-icon.dark input.form-control {
    background-color: #444444 !important;
    color: white !important;
}

.input-icon.transparent input.form-control {
    background-color: rgba(0, 0, 0, 0) !important;
    border: none !important;
}

.input-icon.azure-alea input.form-control {
    background-color: #26445d !important;
    color: white;
!important;
}

.input-icon.transparent input.form-control {
    background-color: rgba(0, 0, 0, 0) !important;
    border: none !important;
}

/* portlet */
.portlet.light > .portlet-search {
    padding: 12px 6px;
}

.portlet.light > .portlet-title > .caption {
    position: relative;
}

.portlet.light > .portlet-title > .caption > .x-icon {
    position: absolute;
    top: -2px;
    left: -10px;
}

/* list-group */
.list-group#searchteamlist .list-group-item {
    border: none;
}

/*	background-color: #324256;
	color: #eee;
}
.list-group#searchteamlist .list-group-item:hover{
	background-color: #2d3b4c;
	color: #fff;
}
.list-group#searchteamlist .list-group-item:active,*/
.list-group#searchteamlist .list-group-item.active {
    background-color: #5A7388;
    border-color: #26445d;

    background-color: #2B71B5;
}

.list-group#searchteamlist .list-group-item.active:after {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: -8px;
    border-top: 8px solid rgba(0, 0, 0, 0);
    border-left: 8px solid #5A7388;
    border-left: 8px solid #2B71B5;
    border-bottom: 8px solid rgba(0, 0, 0, 0);
    content: '';
}

/* flashMessage */
.message#flashMessage,
.message#authMessage {
    display: inline-block;
    width: 100%;
    text-align: center;
    position: relative;
    padding: 10px 12px;
    margin: 6px auto;
    background-color: #cdcdcd;
    border-radius: 2px !important;
    line-height: 20px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}

.message#authMessage {
    margin-bottom: 10px;
}

.message#flashMessage,
.message#authMessage,
.message#flashMessage.error-message {
    background-color: #DA4453;
    color: white;
}

.message#flashMessage.success-message {
    background-color: #8CC152;
    color: white;
}

.message#flashMessage.info-message {
    background-color: #2B71B5;
    color: white;
}

.message#flashMessage.warning-message {
    background-color: #F6BB42;
    color: white;
}

/* dropdown */
.dropdown-menu .active > a, .dropdown-menu .active > a:hover {
    background-color: #232C37;
    color: white;
}

.dropdown-menu {
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5) !important;
}

.dropdown-menu .dropdown-header {
    padding-left: 14px;
    padding-right: 14px;
}

.dropdown-menu li.grouped a {
    padding-left: 24px;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.9em;
}

.dropdown-menu li.active {
    position: relative;
}

.dropdown-menu li.active:before {
    font-family: "FontAwesome";
    content: '';
    color: white;
    position: absolute;
    top: 0;
    right: 6px;
    line-height: 32px;
    font-weight: 100;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu.dropdown-below > .dropdown-menu {
    position: absolute;
    left: 0;
    top: 36px;
}

.dropdown-submenu.dropdown-below > a:after {
    content: "\f107";
}

/* dashboard-stat */
.dashboard-stat {
    border-radius: 6px !important;
}

/* btn */
.btn {
    position: relative;
    border-radius: 4px !important;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn > .badge {
    position: absolute;
    top: 3px;
    right: 3px;
}

.btn.btn-no-padding {
    padding: 0 !important;
}

.btn.btn-link-white {
    color: #E6E9ED;
}

.btn.btn-link-white:hover {
    color: #F5F7FA;
}

.btn.btn-link-white:active {
    color: white;
}

.btn.blue-ebonyclay {
    background-color: #2B71B5;
}

.btn.blue-ebonyclay:hover,
.btn.blue-ebonyclay:focus,
.btn.blue-ebonyclay:active:hover,
.btn.blue-ebonyclay.active:hover {
    background-color: #1c60a0;
}

.btn.blue-ebonyclay:active,
.btn.blue-ebonyclay.active {
    background-color: #195fa0;
}

.btn.btn-circle {
    border-radius: 100% !important;
}

.btn.x-color-blue {
    background-color: #4A5E79;
    color: #eeeeee;
}

.btn.x-color-blue:hover {
    background-color: #526884;
    color: #eeeeee;
}

.btn.x-color-blue:active,
.btn.x-color-blue.active {
    background-color: #647993;
    color: #ffffff;
}

.btn.red {
    background-color: #e60000;
}

.btn.btn-rounded {
    border-radius: 24px !important;
}

.btn.btn-lg.btn-rounded {
    border-radius: 32px !important;
}

.btn.btn-semi-block {
    width: 75%;
    min-width: 100px;
}

/* label */
.label {
    border-radius: 2px !important;
    font-weight: 400;
}

.label.label-sm.label-sm-padded {
    padding-left: 8px;
    padding-right: 8px;
}

.label.red-stripe {
    border-left: 3px solid #DA4453;
}

.label.yellow-stripe {
    border-left: 3px solid #F6BB42;
}

.label.green-stripe {
    border-left: 3px solid #8CC152;
}

.label.azure-stripe {
    border-left: 3px solid #60acd0;
}

.label.grey-stripe {
    border-left: 3px solid #C6C6C6;
}

/* form-stuff */
.label-helper {
    display: block;
    font-size: 0.7em;
    color: #777;
    padding-top: 2px;
    text-transform: uppercase;
}

/* button group */
.webapp-button-group {
    display: table;
    position: relative;
    width: 100%;
}

.webapp-button-group .webapp-button {
    width: 50%;
    display: table-cell;
    padding: 3px;
}

/* sidebar */
.sidebar-header-stat {
    min-height: 48px;
    background-color: #111821;
    /*border-bottom: 1px solid #202830;*/
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1) inset,
    0 2px 0 0 rgba(0, 0, 0, 0.1) inset,
    0 3px 0 0 rgba(0, 0, 0, 0.1) inset,
    0 4px 0 0 rgba(0, 0, 0, 0.1) inset;

}

/* sidebar stat */
.webapp-sidebar .stat-element {
    height: 48px;
}

.webapp-sidebar .stat-element .stat-title {
    padding-top: 6px;
    font-size: 10px;
    font-weight: 100;
    color: #E6E9ED;
    line-height: 14px;
}

.webapp-sidebar .stat-element .stat-value {
    font-size: 12px;
    color: white;
    line-height: 20px;
}

.webapp-sidebar .stat-element .stat-value b {
    font-weight: 300;
}

.webapp-sidebar .stat-element.stat-icon .stat-icon {
    padding-top: 16px;
    padding-left: 12px;
    padding-right: 8px;
    display: inline-block;
    float: left;
}

.webapp-sidebar .stat-element.stat-icon .stat-value {
    font-size: 0.8em;
    line-height: 48px;
    display: inline-block;
    float: left;
}

/* sidebar stat rts */
.rts-icon {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 100% !important;
    -webkit-border-radius: 100% !important;
    -moz-border-radius: 100% !important;
}

.rts-icon.green {
    background-color: #8CC152;
}

.rts-icon.red {
    background-color: #DA4453;
}

.rts-icon.yellow {
    background-color: #F6BB42;
}

/* channel-list */
.channels-list {
    list-style: none outside none;
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: hidden;
    overflow-x: auto;
    margin: 0 !important;
    padding: 0 !important;
}

.channels-list .channels-list-item {
    width: 200px;
    height: 100%;
    background-color: #2C3E50;
    display: inline-block;
    list-style: none outside none;
    margin: 0 3px;
    position: relative;
    overflow: hidden;
    color: #eeeeee;
    cursor: pointer;

    transition-property: background-color;
    transition-duration: 0.3s;
}

.channels-list .channels-list-item:hover {
    background-color: #578EBE;
}

.channels-list .channels-list-item:active,
.channels-list .channels-list-item.active {
    background-color: #26C281;
}

.channels-list .channels-list-item:first-child {
    margin-left: 0px;
}

.channels-list .channels-list-item:last-child {
    margin-right: 0px;
}

.channels-list .channels-list-item .name {
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 18px;
    padding: 0 12px;
    line-height: 18px;
    background-color: rgba(0, 0, 0, 0.05);
    overflow: none;
    text-align: right;
    padding:
}

.channels-list .channels-list-item .icon {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: -18px;
    margin-bottom: -6px;
}

.channels-list .channels-list-item .icon i:before {
    font-size: 1.5em;
}

.channels-list .channels-list-item .icon.no-channel-icon i:before {
    color: white;
    opacity: 0.1;
}

.channels-list .channels-list-item .stat {
    position: absolute;
    bottom: 24px;
    right: 0;
    padding: 0 12px;
    line-height: 24px;
    font-size: 18px;
}

/* microphone */
.m-button-container {
    padding: 4px;
    background-color: #ADB8C1 !important;
    display: inline-block;
    position: relative;
    margin: 0 8px;
}

.m-button {
    background-color: #ffffff;
    padding: 4px;
    height: 96px !important;
    width: 96px !important;
    text-align: center;
    vertical-align: middle;
    line-height: 96px;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}

.m-button.active {
    background-color: #26445D;
    box-shadow: 0 0 0 3px #ffffff inset;
}

.m-button.big {
    height: 128px !important;
    width: 128px !important;
    line-height: 120px;
}

.m-button.mini {
    height: 64px !important;
    width: 64px !important;
    line-height: 56px;
}

.m-button i {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -4px;
    margin-top: -4px;
}

.m-button .m-button-content {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100% !important;
    text-align: center;
}

.m-button .m-button-content:hover {
    /*background-color: #EDF1FC;*/
}

.m-button.disabled .m-button-content {
    background: none;
}

.m-button.disabled .x-icon {
    opacity: 0.7;
}

.m-button .m-button-content .m-microphone-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #dddddd;
    box-shadow: 0 0 2px 0 #bbbbbb, 0 0 1px 0 #cccccc inset;
    -webkit-box-shadow: 0 0 2px 0 #bbbbbb, 0 0 1px 0 #cccccc inset;
    border-radius: 100% !important;

    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

.default .m-microphone-status {
    animation: none 0 ease 0 1 normal none running !important;
    -webkit-animation: none 0 ease 0 1 normal none running !important;
}

.font-x-red .m-microphone-status {
    border-color: #EF4836 !important;
    box-shadow: 0 0 2px 0 #EF4836, 0 -2px 3px 0 #E08283 inset, 0 1px 2px 0 #E08283 !important;
    -webkit-box-shadow: 0 0 2px 0 #EF4836, 0 -2px 3px 0 #E08283 inset, 0 1px 2px 0 #E08283 !important;

    animation-name: m-button-rotation;
    -webkit-animation-name: m-button-rotation;
}

.font-x-green .m-microphone-status {
    border-color: #3cb021 !important;
    box-shadow: 0 0 2px 0 #3cb021, 0 -2px 3px 0 #4cc62d inset, 0 1px 2px 0 #4cc62d !important;
    -webkit-box-shadow: 0 0 2px 0 #3cb021, 0 -2px 3px 0 #4cc62d inset, 0 1px 2px 0 #4cc62d !important;

    animation-name: m-button-rotation;
    -webkit-animation-name: m-button-rotation;
}

@-webkit-keyframes m-button-rotation {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes m-button-rotation {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    50% {
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    75% {
        -ms-transform: rotate(270deg);
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes m-button-pulse {
    0% {
        box-shadow: 0 0 2px 0 #2C3E50;
    }
    25% {
        box-shadow: 0 0 3px 0 #2C3E50, 0 0 1px 0px #2C3E50 inset;
    }
    50% {
        box-shadow: 0 0 4px 0 #2C3E50, 0 0 4px 0px #2C3E50 inset;
    }
    75% {
        box-shadow: 0 0 3px 0 #2C3E50, 0 0 1px 0px #2C3E50 inset;
    }
    100% {
        box-shadow: 0 0 2px 0 #2C3E50;
    }
}

@keyframes m-button-pulse {
    0% {
        box-shadow: 0 0 2px 0 #2C3E50;
    }
    25% {
        box-shadow: 0 0 3px 0 #2C3E50, 0 0 1px 0px #2C3E50 inset;
    }
    50% {
        box-shadow: 0 0 4px 0 #2C3E50, 0 0 4px 0px #2C3E50 inset;
    }
    75% {
        box-shadow: 0 0 3px 0 #2C3E50, 0 0 1px 0px #2C3E50 inset;
    }
    100% {
        box-shadow: 0 0 2px 0 #2C3E50;
    }
}

*.m-button-circle {
    border-radius: 100% !important;
}

/* chat */
.chat-message {
    position: realtive;
    width: 100%;
    height: auto;
}

.chat-message > .chat-message-container {
    max-width: 85%;
    width: auto;
    min-width: 150px;
    margin: 6px;
    padding: 8px;
    position: relative;
    font-weight: 100;
    position: relative;
    display: inline-block;
    text-align: left;
    color: white;
    border-radius: 2px !important;
    box-shadow: 0 1px 5px 0 #b4bbc4;
}

.bg-inverse .chat-message > .chat-message-container,
.light .chat-message > .chat-message-container {
    color: #26445D;
}

.chat-message > .chat-message-container > .chat-message-info {
    font-weight: 200;
    font-size: 0.8em;
    text-transform: uppercase;
    margin-bottom: 3px;
    line-height: 16px;
}

.chat-message > .chat-message-container > .chat-message-info b {
    font-weight: 300;
}

.chat-message > .chat-message-container > .chat-message-info .time {
    float: right;
}

.chat-message.in {
    text-align: left;
}

.chat-message.in > .chat-message-container {
    background-color: #151F28;
    margin-top: 10px;
}

.light .chat-message.in > .chat-message-container {
    background-color: #f2f3f9;
}

.bg-inverse .chat-message.in > .chat-message-container {
    background-color: white;
}

.chat-message.in .chat-message-container:before {
    border-bottom: 6px solid #151F28;
    border-right: 12px solid transparent;
    position: absolute;
    top: -6px;
    left: 6px;
    content: '';
}

.light .chat-message.in .chat-message-container:before {
    border-bottom-color: #f2f3f9;
}

.bg-inverse .chat-message.in .chat-message-container:before {
    border-bottom-color: white;
}

.chat-message.out {
    text-align: right;
}

.chat-message.out > .chat-message-container {
    background-color: #232C37;
    margin-bottom: 10px;
}

.light .chat-message.out > .chat-message-container {
    background-color: #e7e8ef;
}

.bg-inverse .chat-message.out > .chat-message-container {
    background-color: white;
}

.chat-message.out .chat-message-container:after {
    border-top: 6px solid #232C37;
    border-left: 12px solid transparent;
    position: absolute;
    bottom: -6px;
    right: 6px;
    content: '';
}

.light .chat-message.out .chat-message-container:after {
    border-top-color: #e7e8ef;
}

.bg-inverse .chat-message.out .chat-message-container:after {
    border-top-color: white;
}

.chat-message > .chat-message-container > .chat-message-content {
    position: relative;
    width: 100%;
    height: auto;
}

.chat-message-content img.img-thumbnail {
    border-radius: 2px !important;
}

.chat-message.type-image.type-upload .chat-message-content img.img-thumbnail {
    opacity: 0.7;
    position: relative;

    min-width: 64px;
    min-height: 64px;

    transition-property: height, width;
    transition-duration: 0.4s;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 0.4s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 0.4s;
}

.chat-message.type-upload .message-overlay {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-top: -32px;
    margin-left: -32px;
}

.chat-separator {
    background-color: #e3e6e8;
    min-height: 32px;
    line-height: 24px;
    color: #2c2c2c;
    opacity: 0.8;
    text-align: center;
    font-size: 0.8em;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08)
}

.chat-message .album {
    position: relative;
    width: 100%;
    border-radius: 2px !important;
    height: auto;
}

.album > .album-item {
    display: block;
    float: left;
    position: relative;
    background-color: #E5E5E5;
    color: #2c2c2c;
    font-weight: 700;
    font-size: 1.5em;
    text-align: center;
    max-height: 64px;
    max-width: 64px;
    width: 64px !important;
    height: 64px !important;
    line-height: 52px;
    opacity: 0.7;

    transition-duration: 0.3s;
    transition-property: opacity;
}

.album .album-item:hover {
    opacity: 1;
}

.album .album-item.type-video:before {
    font-family: "FontAwesome";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    margin-top: -12px;
    padding-left: 3px;
    color: #111111;
    background: rgba(255, 255, 255, 0.8);
    width: 24px;
    line-height: 24px;
    height: 24px;
    border-radius: 12px !important;
    content: '';
    opacity: 1;
    font-size: 0.8em;
    text-align: center;
}

.album .album-item:hover.type-video:before {
    background: white;
}

/* x-contentbox */

.x-contentbox {
    padding: 24px;
    text-align: center;
    width: 100%;
    height: 256px;
    color: #5A7388;
}

.x-contentbox.x-contentbox-centerpage {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -128px;
}

.x-contentbox .x-contentbox-icon i {
    font-size: 92px;
}

.x-contentbox .x-contentbox-title {
    font-size: 1.3em;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    padding: 24px 0 7px;
}

.x-contentbox .x-contentbox-helper {
    font-weight: 100;
    padding: 6px 0;
}

.webapp-fragment .x-contentbox {
    color: #F7F8FF
}

.light .webapp-fragment .x-contentbox {
    color: #26445D;
}

.webapp-fragment.transparent-background .x-contentbox {
    color: #5A7388;
}

/* webapp-component light custom */
.light > .webapp-component-container {
    background-color: #f7f8ff;
}

.light .webapp-component-header .caption,
.light .webapp-component-header .actions i {
    color: #26445D;
}

.light .webapp-fragment {
    background-color: #f7f8ff;
}

.chat-object.type-image .chat-object-content:not(.loading):before,
.chat-object.type-image .chat-object-content:not(.loading):after {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s linear;
    color: white;
    cursor: pointer;
}

.chat-object.type-image .chat-object-content:not(.loading):before {
    background-color: rgba(0, 0, 0, 0.4);
    top: 0;
    left: 0;
    bottom: -1px;
    right: 0;
    content: '';
    z-index: 100;
}

.chat-object.type-image .chat-object-content:not(.loading):after {
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
    width: 48px;
    height: 48px;
    font-size: 36px;
    line-height: 48px;
    content: '';
    font-family: "FontAwesome";
    text-shadow: 0px 0px 8px rgba(130, 130, 130, 1);
    z-index: 101;
    text-align: center;
}

.chat-object.type-image .chat-object-content {
    min-width: 64px;
    min-height: 64px;
}

.chat-object.type-image .chat-object-content #loading {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    line-height: 32px;
    z-index: 101;
    color: #26445D;
    text-align: center;
}

.chat-object.type-image .chat-object-content.loading img.img-thumbnail {
    min-width: 96px;
    min-height: 96px;
    width: 100%;
}

.chat-object.type-image .chat-object-content:not(.loading):hover:before,
.chat-object.type-image .chat-object-content:not(.loading):hover:after {
    opacity: 1
}

.light .chat-object .chat-object-container {
    color: #26445D;
}

.light .chat-object.in .chat-object-container {
    background-color: #e2e3e9;
}

.light .chat-object.in .chat-object-container:before {
    border-bottom-color: #e2e3e9;
}

.light .chat-object.out .chat-object-container {
    background-color: #d7d8df;
}

.light .chat-object.out .chat-object-container:after {
    border-top-color: #d7d8df;
}

.light .chat-object.divider > .chat-object-container {
    background-color: #e3e6e8;
    color: #26445D;
}

.chat-object.type-audio > .chat-object-container {
    min-width: 240px;
}

.chat-object.type-file > .chat-object-container {
    min-width: 240px;
    max-width: 350px;
}

.chat-object.type-file a {
    color: white !important;
    text-decoration: none;
    text-underline: none;
}

.light .chat-object.type-file a {
    color: #26445D !important;
}

.chat-object.type-file .webapp-file-button {
    width: 100%;
    min-width: 200px;
    border-radius: 4px !important;
    height: auto;
    padding: 4px;
    min-height: 62px;
    height: 100%;
}

.chat-object.type-file .webapp-file-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.chat-object.type-file .webapp-file-button:active,
.chat-object.type-file .webapp-file-button.active {
    background-color: rgba(0, 0, 0, 0.2);
}

.webapp-file-button > a > .webapp-container {
    padding-left: 48px;
    height: 100%;
}

.webapp-file-button .file-icon {
    position: absolute;
    top: 3px;
    left: 2px;
    width: 44px;
    height: 64px;
}

.webapp-file-button .file-info {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 152px;
    padding-bottom: 24px;
    min-height: 57px;
}

.webapp-file-button .file-info-download-button {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    line-height: 14px;
    font-size: 11px;
    padding-top: 6px;
}

.light .webapp-fragment#chat .chat-footer {
    /*background-color: #f2f3f9;
    border-top-color: #cbd0d3;*/
    color: #26445D;
}

.light .webapp-fragment#chat .chat-footer .btn.btn-link {
    color: #26445D !important;
}

.light .message-input-container .message-input {
    /*background-color: #f2f3f9;*/
    color: #26445D;
}

.message-input::-webkit-input-placeholder { /* WebKit browsers */
    color: #B7BDC7;
}

.message-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #B7BDC7;
    opacity: 1;
}

.message-input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #B7BDC7;
    opacity: 1;
}

.message-input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #B7BDC7;
}

/* grouped messages */
.chat-object.first-child.out > .chat-object-container:after,
.chat-object.inner-child.out > .chat-object-container:after {
    display: none;
}

.chat-object.inner-child.in > .chat-object-container:before,
.chat-object.last-child.in > .chat-object-container:before {
    display: none;
}

.chat-object.last-child .chat-object-header,
.chat-object.inner-child .chat-object-header {
    display: none;
}

.chat-object.first-child > .chat-object-container,
.chat-object.inner-child > .chat-object-container {
    margin-bottom: 1px;
}

.chat-object.inner-child > .chat-object-container,
.chat-object.last-child > .chat-object-container {
    margin-top: 1px;
}

.chat-object.first-child.in > .chat-object-container,
.chat-object.inner-child.in > .chat-object-container {
    border-bottom-left-radius: 0px !important;
    margin-bottom: 1px;
}

.chat-object.inner-child.in > .chat-object-container,
.chat-object.last-child.in > .chat-object-container {
    border-top-left-radius: 0px !important;
    margin-top: 1px;
}

.chat-object.first-child.out > .chat-object-container,
.chat-object.inner-child.out > .chat-object-container {
    border-bottom-right-radius: 0px !important;
    margin-top: 1px;
}

.chat-object.inner-child.out > .chat-object-container,
.chat-object.last-child.out > .chat-object-container {
    border-top-right-radius: 0px !important;
    margin-top: 1px;
}

#navigationbar .x-profile-icon .x-profile-icon-acronim,
#navigationbar .x-profile-icon .x-profile-icon-acronim span {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 1.05em;
    padding-top: 0;
}

.webapp-list#callhistory {

}

.webapp-list#callhistory > .webapp-list-item {
    height: 48px;
    text-transform: uppercase;
}

.webapp-list#callhistory > .webapp-list-item .caption {
    position: relative;
    display: inline-block;
}

.webapp-list#callhistory > .webapp-list-item .actions {
    display: inline-block;
    float: right;
    line-height: 36px;
    height: 36px;
    text-align: right;
}

.webapp-list#callhistory > .webapp-list-item .datetime {
    display: block;
    height: 24px;
    padding: 4px 0 0 0;
    line-height: 20px;
    font-size: 14px;
    font-weight: 700;
}

.webapp-list#callhistory > .webapp-list-item .datetime sup {
    font-size: 8px;
}

.webapp-list#callhistory > .webapp-list-item .type {
    display: block;
    height: 12px;
    line-height: 12px;
    font-size: 10px;
    font-weight: 100;
}

.webapp-list#callhistory > .webapp-list-item .time {
    display: block;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 100;
}

.webapp-list#callhistory > .webapp-list-item .duration {
    display: block;
    height: 16px;
    padding-top: 6px;
    line-height: 10px;
    font-size: 10px;
}

.webapp-banner.banner-call-type,
.light .webapp-banner.banner-call-type {
    background-color: #e1e8ed;
}

.webapp-navigation {
    color: #26445D;
}

.webapp-navigation > .webapp-navigation-item:active,
.webapp-navigation > .webapp-navigation-item.active {
    background-color: #26445D;
}

/* input range */
input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;

    /*fix for FF unable to apply focus style bug */
    border: 1px solid white;

    /*required for proper track sizing in FF*/
    width: 300px;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: #D9DEE1;
    border: none;
    border-radius: 2px !important;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50% !important;
    background: #26445D;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #D9DEE1;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #D9DEE1;
    border: none;
    border-radius: 2px !important;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50% !important;
    background: #26445D;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 6px;

    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;

    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;

    /*remove default tick marks*/
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #7F91A0;
    border-radius: 10px !important;
}

input[type=range]::-ms-fill-upper {
    background: #D9DEE1;
    border-radius: 10px !important;
}

input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50% !important;
    background: #26445D;
}

input[type=range]:focus::-ms-fill-lower {
    background: #7F91A0;
}

input[type=range]:focus::-ms-fill-upper {
    background: #D9DEE1;
}

/* x-list */
.x-list-header {
    position: relative;
    height: 48px;
    width: 100%;
    /*border-bottom: 1px solid rgba(33,33,33,0.15);
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.05),
                0 2px 0 0 rgba(0,0,0,0.03),
                0 3px 0 0 rgba(0,0,0,0.01);*/
    padding: 6px;
    line-height: 36px;
}

.x-list-header:after {
    content: '';
    display: block;
    width: 96%;
    margin-left: 2%;
    height: 1px;
    background-color: #BBB;
    position: relative;
    bottom: -8px;
}

.x-list-header.fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.x-list-header .caption {
    position: relative;
    height: 36px;
    padding: 6px;
    line-height: 24px;
    font-weight: 700;
    font-size: 16px;
}

.x-list-header .caption > * {
    display: inline-block;
    text-transform: uppercase;
}

.x-list-header .caption .subtitle {
    position: absolute;
    bottom: -3px;
    left: 6px;
    line-height: 14px;
    font-size: 10px;
    font-weight: 100;
}

.x-list-header .actions {
    position: absolute;
    right: 0;
    top: 4px;
    line-height: 36px;
}

.x-layer {
    width: 100%;
    position: relative;
    background-color: rgba(217, 222, 225, 0.1);
}

.x-layer.fullsize {
    width: 100%;
    height: 100%;
}

.x-layer.fixed {
    position: fixed;
    top: 0;
    left: 0;
}

.x-layer.absolute {
    position: absolute;
    top: 0;
    left: 0;
}

.blurred {
    -webkit-filter: blur(2px);
    filter: blur(2px);
}

#mapcontainer {
    background-color: #f2f3f9 !important;
    color: #333 !important;
    background-image: url('../img/background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-attachment: fixed;
}

.leaflet-popup > .leaflet-popup-content-wrapper {
    border-radius: 4px !important;
}

.leaflet-popup > .leaflet-popup-content-wrapper > .leaflet-popup-content {
    margin: 5px 19px;
    text-align: center;
}

.maps-label, .x-infobox {
    position: relative;
    width: auto;
    height: 24px;
    padding: 4px 8px;
    line-height: 16px;
    font-size: 12px;
    background-color: white;
    color: #26445D;
    border-radius: 4px !important;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.maps-label:before,
.x-infobox:before {
    position: absolute;
    content: '';
    bottom: -7px;
    left: 50%;
    margin-left: -7px;
    border-left: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0);
    border-top: 7px solid rgba(0, 0, 0, 0.15);
}

.maps-label:after,
.x-infobox:after {
    position: absolute;
    content: '';
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    border-top: 6px solid white;
}

body.x-rightcontentbar-opened > *.x-resizable {
    width: -webkit-calc(100% - 375px) !important;
    width: -moz-calc(100% - 375px) !important;
    width: calc(100% - 375px) !important;
    /*-webkit-box-shadow: 2px 0 4px 0 rgba(0,0,0,0.5) !important;
    box-shadow: 2px 0 4px 0 rgba(0,0,0,0.5) !important;*/
}

body > *.x-resizable {
    -webkit-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -moz-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -ms-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -o-transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.x-rightcontentbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 375px;
    bottom: 0;
    height: 100%;
    box-shadow: 1px 0 0 0 rgba(0, 0, 0, 0.2) inset,
    2px 0 0 0 rgba(0, 0, 0, 0.1) inset,
    3px 0 0 0 rgba(0, 0, 0, 0.06) inset,
    4px 0 0 0 rgba(0, 0, 0, 0.04) inset,
    5px 0 0 0 rgba(0, 0, 0, 0.02) inset;
    background-color: #364150;
    color: #F7F8FF;
    overflow: hidden;
}

.x-rightcontentbar .x-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
}

.x-rightcontentbar .x-header:before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 2.5%;
    width: 95%;
    height: 1px;
    background: #ADB8C1;
}

.x-rightcontentbar .x-header:before {
    position: absolute;
    content: '';
    bottom: 1px;
    left: 3.5%;
    width: 93%;
    height: 1px;
    background: rgb(74, 94, 121, 0.7);
}

.x-rightcontentbar .x-body {
    position: absolute;
    top: 56px;
    bottom: 0;
    width: 100%;
    padding: 0;
}

.x-rightcontentbar .x-body > .webapp-container.chat-container > .webapp-container {
    padding-bottom: 56px;
}

.x-rightcontentbar .x-body .chat-content {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.x-rightcontentbar .x-body .chat-content .chat-content-scrollable {
    position: absolute;
    overflow: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    padding-bottom: 2px;
    padding-top: 52px;
}

.x-rightcontentbar .x-body .chat-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height auto;
    padding: 8px;
    margin: 0 auto;
    text-align: center;
    z-index: 1000;
}

.x-rightcontentbar .x-body .chat-top > .x-button-dropdown {
    max-width: 350px;
    display: inline-block;
}

.x-rightcontentbar .x-body .chat-footer {
    position: absolute;
    bottom: 0;
    left: 6px;
    right: 6px;
    height: 56px;
    color: white;
    border-top: 1px solid rgba(0, 0, 0, 0.22);
    line-height: 52px;
}

.x-rightcontentbar .x-header > .webapp-container {
    padding: 6px 0 0 6px;
}

.x-rightcontentbar .x-header .caption .caption-icon {
    margin: 2px;
    width: 40px;
    height: 40px;
}

.x-rightcontentbar .x-header .caption .x-profile-info {
    color: #F7F8FF
}

.x-rightcontentbar .x-header .caption .x-profile-info .x-profile-status {
    bottom: -3px;
}

.x-rightcontentbar .x-header .actions {
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
    padding: 4px;
    height: 100%;
    line-height: 48px;
}

.x-rightcontentbar .x-contentbox {
    color: #F7F8FF;
}

a.btn-circle-transparent {
    border-radius: 100% !important;
    background-color: rgba(0, 0, 0, 0.15);
    display: inline-block;
    width: 44px !important;
    height: 44px !important;
    padding: 0;
    margin: 0;
    text-align: center;
}

a.btn-circle-transparent:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

a.btn-circle-transparent.active,
a.btn-circle-transparent:active {
    background-color: rgba(0, 0, 0, 0.3);
}

a.btn-circle-transparent.btn-circle-sm {
    width: 32px !important;
    height: 32px !important;
}

a.btn-circle-transparent > i.x-icon {
    margin-top: -3px;
    margin-left: -3px;
}

a.btn-circle-transparent.btn-circle-sm > i.x-icon {
    margin-top: 3px;
    margin-left: 0px;
}

a.btn-circle-transparent > i.fa,
a.btn-circle-transparent > i.fa:before {
    font-size: 18px;
    line-height: 42px;
    color: white !important;
}

a.btn-circle-transparent.btn-circle-sm > i.fa,
a.btn-circle-transparent.btn-circle-sm > i.fa:before {
    font-size: 14px;
    line-height: 30px;
}

.x-btn,
.x-btn-transparent {
    background: rgba(0, 0, 0, 0);
    transition-property: background, color;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    width: 32px;
    height: 44px;
    text-align: center;
    position: relative;
    line-height: 44px;
    display: inline-block;
    color: #26445D;
    text-decoration: none !important;
    border-radius: 2px !important;
    margin: 0 1px;
}

.x-btn {
    background: #26445D;
    color: white !important;
}

.x-btn.x-btn-icon,
.x-btn-transparent.x-btn-icon {
    width: 44px;
}

.x-btn.x-btn-icon .fa.fa-2x,
.x-btn-transparent.x-btn-icon .fa.fa-2x {
    line-height: 44px !important;
}

.x-btn.disabled {
    background: #4d6c87;
}

.x-btn:hover {
    background: #294a66;
}

.x-btn.disabled:hover {
    background: #577a96;
}

.x-btn:active,
.x-btn.active,
.x-btn.disabled:active,
.x-btn.disabled.active {
    background: #2b5170;
}

.x-btn.x-btn-2w,
.x-btn-transparent.x-btn-2w {
    width: 56px;
}

.x-btn.x-btn-circle,
.x-btn-transparent.x-btn-circle {
    min-width: 44px;
    border-radius: 50% !important;
}

.x-btn.auto-width,
.x-btn-transparent.auto-width {
    width: auto;
    padding-left: 12px;
    padding-right: 12px;
    text-transform: uppercase;
    font-weight: 700;
}

.x-btn.mini,
.x-btn-transparent.mini {
    height: 32px;
    line-height: 32px;
}

.x-btn.mini.x-btn-2w,
.x-btn-transparent.mini.x-btn-2w {
    width: 36px;
}

.x-btn.mini.x-btn-circle,
.x-btn-transparent.mini.x-btn-circle {
    min-width: 32px;
}

.x-btn-transparent.disabled {
    color: #4d6c87;
}

.x-btn-transparent:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #26445D;
}

.x-btn-transparent:active,
.x-btn-transparent.active {
    background: #26445D;
    color: #F7F8FF !important;
}

.light .x-btn-transparent {
    color: #26445D;
}

.light .x-btn-transparent:hover {
    background: rgba(0, 0, 0, 0.1);
}

.light .x-btn-transparent:active,
.light .x-btn-transparent.active {
    background: #ADB8C1;
}

.light .x-btn-transparent.disabled {
    color: #4A5E79;
}

.x-btn-transparent.x-btn-square {
    width: 44px;
}

.x-btn .x-fa-main,
.x-btn-transparent .x-fa-main {
    font-size: 18px;
    color: inherit !important;
    line-height: 38px;
}

.x-btn.x-btn-block,
.x-btn-transparent.x-btn-block {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
}

.x-fa-mini,
.x-fa-mini:before {
    font-size: 8px;
}

.x-fa-sub.x-fa-sub-yellow {
    background-color: #F6BB42;
}

.x-fa-sub.x-fa-sub-green {
    background-color: #8CC152;
}

.x-fa-sub.x-fa-sub-red {
    background-color: #DA4453;
    color: #F7F8FF !important;
}

.x-fa-sub.x-fa-sub-blue {
    background-color: #2B71B5;
    color: #F7F8FF !important;
}

.x-fa-sub.x-fa-sub-white {
    background-color: #F7F8FF;
}

.x-fa-sub {
    position: absolute;
    right: 3px;
    top: 50%;
    margin-top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 6px !important;
    background-color: white;
    line-height: 12px;
    text-align: center;
    box-shadow: 0 0 0 2px #AFB7C2;
    color: #111111 !important;
}

.x-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 24px;
    height: 18px;
    line-height: 10px;
    padding: 4px 6px;
    font-size: 10px;
    border-radius: 4px !important;
    background-color: #7F91A0;
    color: white;
    z-index: 999;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}

.x-badge.x-badge-red {
    background-color: #DA4453;
}

.x-badge.x-badge-yellow {
    background-color: #F6BB42;
    color: #111111;
}

.x-badge.x-badge-blue {
    background-color: #2B71B5;
}

.x-badge.x-badge-green {
    background-color: #8CC152;
}

.x-badge.x-badge-dark-blue {
    background-color: #26445D;
}

/*
	Webapp infobox card [suspended]
	
	NOT FINAL VERSION
	L'infobox card corrisponde and un infobox visualizzato sulla mappa con i dettagli di un utente
	un modo più immediato per vedere le info di una persona senza cercarla nelle liste
	Abbandonato per il momento perche non utile, le mappe devono rimanere semplici
*/
.webapp-infobox-card {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-top: 96px;
}

.webapp-infobox-card .caption {
    text-align: center;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    height: 96px;
    padding: 8px;
    background-color: #F7F8FF;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}

.webapp-infobox-card .caption .caption-icon {
    display: block;
    width: 40px;
    height: 40px;
    margin: 2px auto;
    float: none;
}

.webapp-infobox-card .caption .x-profile-info {
    display: block;
    margin-left: 0;
}

.webapp-infobox-card .caption .x-profile-info .x-profile-status {
    bottom: 1px;
    width: 100%;
}

.webapp-infobox-card .content {
    height: 70px;
    width: 100%;
    padding: 6px;
    overflow: hidden;
    overflow-y: auto;
}

.webapp-infobox-card .content .row {
    margin-bottom: 6px;
}

.webapp-infobox-card .content .row:last-child {
    margin-bottom: 0;
}

.webapp-infobox-card .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 4px;
    height: 34px;
}

.row-title {
    display: block;
}

.x-c-connection-status {
    width: 100%;
    height: 48px;
    position: relative;
    padding: 4px;
    padding-left: 48px;
}

.x-c-connection-status > .x-c-status-icon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px;
    width: 40px;
    height: 40px;
}

.x-c-connection-status > .x-c-status-icon > i,
.x-c-connection-status > .x-c-status-icon > i:before {
    font-size: 32px;
    line-height: 40px;
    width: inherit;
    height: inherit;
    text-align: center;
}

.x-c-connection-status > .x-c-status-icon > i.x-icon {
    margin-left: -6px;
    margin-top: -5px;
}

.x-c-connection-status > .x-c-status-info > * {
    font-weight: 100;
    display: block;
}

.x-c-connection-status .x-c-status-info-title {
    font-size: 1.7em;
    line-height: 24px;
    text-transform: uppercase;
}

.x-c-connection-status .x-c-status-info-sub {
    font-size: 10px;
    line-height: 16px;
}

.tabbable-line > .nav-tabs > li {
    border-bottom: 4px solid transparent !important;
    transition: border-bottom-color 0.1s ease-in-out;
}

.tabbable-line > .nav-tabs > li.open,
.tabbable-line > .nav-tabs > li:hover {
    border-bottom-color: #ADB8C1 !important;
}

.tabbable-line > .nav-tabs > li.active {
    border-bottom-color: #2B71B5 !important;
}

.datetime#systemtray-datetime {
    width: 190px;
    text-align: center;
    display: inline-block;
    float: right;
}

.webapp-audio {
    position: relative;
    height: 64px;
    width: 100%;
    min-width: 200px;
}

.webapp-audio > .bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
}

.webapp-audio > .bar > .progress {
    height: 6px;
    border-radius: 3px !important;
    position: relative;
    overflow: hidden;
}

.webapp-audio > .bar > .progress > .progress-bar {
    background: none;
    background-color: #2B71B5;
    border-radius: 3px !important;
    border: none !important;
    box-shadow: none;
    position: absolute;
    float: none;
}

.webapp-audio > .bar > .progress > .progress-bar.buffer {
    background-color: #ADB8C1;
}

.webapp-audio > .bar > .progress > .progress-bar.stalled {
    background-color: #F6BB42;
}

.webapp-audio > .bar > .progress > .progress-bar.error,
.webapp-audio > .bar > .progress > .progress-bar.stalled.error {
    background-color: #DA4453;
}

.webapp-audio > .bar > .progress > .progress-bar.buffer.animate {
    animation-name: buffer-undefined;
    animation-duration: 0.5s;
    animation-iteration-count: 3;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

/* The animation code */
@keyframes buffer-undefined {
    from {
        background-color: #ADB8C1;
    }
    to {
        background-color: #D9DEE1;
    }
}

.webapp-audio > .status {
    position: absolute;
    bottom: 8px;
    font-size: 9px;
    line-height: 12px;
    width: 100%;
}

.webapp-audio > .status .start {
    position: absolute;
    left: 0;
    bottom: 0;
}

.webapp-audio > .status .end {
    position: absolute;
    right: 0;
    bottom: 0;
}

.webapp-audio > .controls {
    position: relative;
    line-height: 44px;
}

.table-responsive > div > .row {
    margin-left: 0;
    margin-right: 0;
}

.table a.header_selector {
    display: inline-block;
    width: 100%;
    height: 32px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 20px;
    border-radius: 32px !important;
    background-color: transparent;
    transition: all .1s ease-in-out;
}

.table a.header_selector:hover {
    background-color: #2B71B5;
    color: white;
    text-decoration: none;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px rgba(0, 0, 0, 0.1);
}

.table a.header_selector.active:before {
    font-family: "FontAwesome";
    content: '';
    color: inherit;
    padding-right: 6px;
}

.DTFC_LeftBodyLiner td {
    background-color: #FFFFFF;
}

.DTFC_LeftHeadWrapper .table.table-light > thead > tr > th {
    border-bottom: 2px solid #ddd !important;
}

.DTFC_LeftHeadWrapper .table {
    margin-top: 7px !important;
}

.modal, .modal-content {
    border-radius: 3px !important;
}

.modal .modal-body.with-map {
    position: relative;
    padding-top: 265px;
}

.modal .modal-body.with-map .map-object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 250px;
    background-color: #ccc;
}

.modal .modal-body.with-map .map-object > div {
    width: 100%;
    height: 100%;
}

.modal .modal-body.with-map .map-object .map-button {
    position: absolute;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.298039);
    background-color: #fff;
    color: #000;
    text-align: center;
    min-width: 34px;
    padding: 8px;
    font-size: 11px;
    border: none;
    z-index: 10000;
}

.modal .modal-body.with-map .map-object .map-button:hover,
.modal .modal-body.with-map .map-object .map-button:active {
    background-color: #EBEBEB;
}

.modal .modal-body.with-map .map-object .map-button.top-right {
    top: 8px;
    right: 8px;
}

.modal .well {
    border-radius: 4px !important;
    margin-top: 16px;
    background-color: #D9DEE1
}

.modal .modal-title {
    display: inline-block;
}

.well .well-caption {
    line-height: 24px;
    height: 24px;
    border-bottom: 1px solid #ADB8C1;
    margin-bottom: 12px;
}

.well .well-caption .chat-object-message-status {
    display: inline-block;
    margin-right: 12px;
}

.fancybox-wrap {
    z-index: 10080 !important;
}

.fancybox-overlay-fixed {
    z-index: 10070 !important;
}

.row.chat-background
.row.dark.chat-background {
    background-color: #38516b;
    background-color: rgb(74, 94, 121);
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSIxMDAlIiByPSIxMTEuODAzMzk4ODc0OTg5NDglIj48c3RvcCBzdG9wLWNvbG9yPSIjMjY0NDVkIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0YTVlNzkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSIxMDAlIiByPSIxMTEuODAzMzk4ODc0OTg5NDglIj48c3RvcCBzdG9wLWNvbG9yPSIjMjY0NDVkIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiM0YTVlNzkiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+),
        -webkit-gradient(radial, center bottom, 0, center bottom, 720,color-stop(0, rgb(38, 68, 93)),color-stop(1, rgb(74, 94, 121)));
    background-image: -webkit-repeating-radial-gradient(center bottom, ellipse farthest-corner,rgb(38, 68, 93) 0%,rgb(74, 94, 121) 100%);
    background-image: repeating-radial-gradient(ellipse farthest-corner at center bottom,rgb(38, 68, 93) 0%,rgb(74, 94, 121) 100%);
    background-image: -ms-repeating-radial-gradient(center bottom, ellipse farthest-corner,rgb(38, 68, 93) 0%,rgb(74, 94, 121) 100%);*/
}

.light .row.chat-background:not(.dark),
.row.light.chat-background {
    background-color: #e8ebf0;
    background-color: rgb(247, 248, 255);
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSIxMDAlIiByPSIxMTEuODAzMzk4ODc0OTg5NDglIj48c3RvcCBzdG9wLWNvbG9yPSIjZDlkZWUxIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmN2Y4ZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSIxMDAlIiByPSIxMTEuODAzMzk4ODc0OTg5NDglIj48c3RvcCBzdG9wLWNvbG9yPSIjZDlkZWUxIiBzdG9wLW9wYWNpdHk9IjEiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmN2Y4ZmYiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIxIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+),
        -webkit-gradient(radial, center bottom, 0, center bottom, 720,color-stop(0, rgb(217, 222, 225)),color-stop(1, rgb(247, 248, 255)));
    background-image: -webkit-repeating-radial-gradient(center bottom, ellipse farthest-corner,rgb(217, 222, 225) 0%,rgb(247, 248, 255) 100%);
    background-image: repeating-radial-gradient(ellipse farthest-corner at center bottom,rgb(217, 222, 225) 0%,rgb(247, 248, 255) 100%);
    background-image: -ms-repeating-radial-gradient(center bottom, ellipse farthest-corner,rgb(217, 222, 225) 0%,rgb(247, 248, 255) 100%);*/
}

.webapp-list.webapp-list-grid.grid-2-columns .webapp-list-item {
    width: calc(50% - 2px);
    display: inline-block;
}

.webapp-list.webapp-list-grid.grid-3-columns .webapp-list-item {
    width: calc(33.33% - 2px);
    display: inline-block;
}

.webapp-list > .webapp-list-item.dark {
    background-color: #26445D;
    margin: 2px 1px;
    border-radius: 32px !important;
    padding: 6px;
}

.webapp-list > .webapp-list-item.dark.clickable:hover {
    background-color: #274b68;
}

.webapp-list > .webapp-list-item.dark.clickable:active {
    background-color: #2c5372;
}

.webapp-list > .webapp-list-item.dark.disabled {
    background-color: #4A5E79
}

.webapp-list > .webapp-list-item.item-little {
    height: 48px;
    padding: 4px;
    margin: 2px;
    border-radius: 24px;
    line-height: 40px;
}

.webapp-list > .webapp-list-item.item-little .x-profile-icon {
    margin: 0;
}

.webapp-list > .webapp-list-item.item-little .webapp-list-item-content {
    height: 40px;
    line-height: 40px;
}

.webapp-list > .webapp-list-item.item-little .x-profile-info {
    padding: 0;
    margin: 0;
    padding-left: 12px;
    font-weight: 100;
    height: 20px;
}

.webapp-list-item-actions .btn.btn-link {
    border-radius: 18px !important;
    width: 36px;
    text-align: center;
    height: 36px;
    padding: 0;
    padding-top: 3px;
    margin: -2px 2px 0 2px;
}

.webapp-list-item-actions .btn.btn-link:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.webapp-list-item-actions .btn.btn-link:active,
.webapp-list-item-actions .btn.btn-link.active {
    background-color: rgba(255, 255, 255, 0.4);
}

.chat-content-scrollable .btn-action-wrapper {
    padding: 4px 8px;
}

.chat-content-scrollable .btn-action-wrapper .btn {
    background-color: #4A5E79;
    color: #eeeeee;
}

.chat-content-scrollable .btn-action-wrapper .btn:hover {
    background-color: #526884;
    color: #eeeeee;
}

.chat-content-scrollable .btn-action-wrapper .btn:active,
.chat-content-scrollable .btn-action-wrapper .btn.active {
    background-color: #647993;
    color: #ffffff;
}

#repo .chat-content-scrollable .btn-action-wrapper .btn {
    background-color: transparent !important;
    color: #4A5E79 !important;
}

.light .chat-content-scrollable .btn-action-wrapper .btn {
    background-color: #F7F8FF;
    color: #4A5E79;
}

.light .chat-content-scrollable .btn-action-wrapper .btn:hover {
    background-color: #ededef;
    color: #4A5E79;
}

.light .chat-content-scrollable .btn-action-wrapper .btn:active,
.light .chat-content-scrollable .btn-action-wrapper .btn.active {
    background-color: #dcdce5;
    color: #4A5E79;
}

.select2-search-choice-close {
    top: 6px !important;
    left: 6px !important;
}

.select2-container-multi .select2-choices .select2-search-choice {
    border-radius: 3px !important;
    height: 26px !important;
    line-height: 18px !important;
    padding: 3px 8px 3px 24px !important;
    background: none !important;
    background-color: #D9DEE1 !important;
    background-color: #D9DEE1 !important;
}

.form-control .select2-choice {
    border: 1px solid #e5e5e5 !important;
    background-color: #fff !important;
    background-image: none !important;
    filter: none !important;
    height: 34px !important;
    padding: 3px 0 0px 12px !important;
}

.form-control .select2-choice .select2-arrow {
    background-image: none !important;
    background-color: #fff !important;
    filter: none !important;
    border-left: 1px solid #e5e5e5 !important;
}

.form-control .select2-container-active .select2-choice,
.form-control .select2-container-active .select2-choices {
    border: 1px solid #5897FB !important;
}

.x-pad-cont {
    padding: 0 12px;
}

.x-image-button-group {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 6px;
    height: auto;
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #BBBBBB;
}

.x-image-button-group > .x-image-button {
    width: 100%;
}

.x-image-button-group.x-3-col > .x-image-button {
    width: 30.7%;
}

.x-image-button {
    display: inline-block;
    position: relative;
    margin: 3px;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 6px !important;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 1px 1px 0 #bbb, 0 1px 6px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;

    transition: all 0.2s ease-out;
}

.x-image-button .x-image-cont {
    height: 92px;
}

.x-image-cont {
    text-align: center;
    white-space: nowrap;
}

.x-image-cont .x-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.x-image-button .x-image {
    max-width: 64px;
    max-height: 64px;
    height: 64px;
    vertical-align: middle;
}

.x-image-button .x-label-cont {
    background-color: #2A435D;
    border-top: 1px solid #c3c3c3;
    box-shadow: 0 1px 1px 0 #888;
    padding: 4px;

    transition: all 0.2s ease-out;
}

.x-image-button .x-label-cont.x-label-centered {
    text-align: center;
}

.x-image-button .x-label {
    font-size: 12px;
    line-height: 14px;
    color: white;
}

.x-image-button.label-only {
    height: 32px;
}

.x-image-button.label-only .x-label-cont {
    height: 32px;
    line-height: 24px;
}

.x-image-button:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.x-image-button:hover .x-label-cont {
    background-color: #2B71B5;
}

.x-image-button:active {
    background-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 1px 2px 0 #bbb, 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.x-image-button:active .x-label-cont {
    background-color: #4489c9;
}

.x-image-button.disabled {
    background-color: rgba(255, 255, 255, 0.06);
    cursor: default;
}

.x-image-button.disabled .x-label-cont {
    background-color: #AFB7C2;
}

.x-image-button.disabled .x-image {
    opacity: 0.3;
}

.webapp-list.shape-list > .webapp-list-item {
    height: 36px;
    border-radius: 6px !important;
    line-height: 24px;
    margin-left: 0;
    margin-right: 0;

    transition: all 0.2s ease-out;
}

.webapp-fragment .backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.26);
    z-index: 9;
}

.webapp-fragment .backdrop.background-transparent {
    background-color: rgba(0, 0, 0, 0.0);
}

.webapp-list.shape-list > .webapp-list-item.active {
    background-color: rgba(255, 255, 255, 0.45);
    z-index: 10;
}

.webapp-list.shape-list .x-image-cont,
.webapp-list.shape-list .x-image-cont .x-image {
    height: 24px;
}

.webapp-list.shape-list .x-image-cont .x-image {
    margin-top: -3px;
}

.webapp-list.shape-list .x-shape-name {
    color: #2A435D;
    font-weight: 300;
    font-size: 12px;
    padding-top: 2px;
    /*text-transform: uppercase;*/
    padding-left: 12px;
}

.webapp-list.shape-list .x-shape-info .form-control {
    top: -2px;
    position: relative;
    border-radius: 4px !important;
}

.webapp-list.shape-list .webapp-list-item-content > * {
    display: inline-block;
}

.webapp-list.shape-list .webapp-list-item-actions {
    top: 3px;
    right: 3px;
}

.webapp-list.shape-list .webapp-list-item-actions .btn.btn-link {
    padding-top: 0px !important;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 4px !important;
}

/*
                    attachment">' +
                        '<div class="attachment-icon">' +
                            '<img class="icon hide">' +
                        '</div>' +
                        '<div class="attachment-content">' +
                            '<div class="top">' +
                                '<div class="attachment-filename"><%= attach.filename %></div>' +
                                '<div class="attachment-subinfo">' +
                                    '<small class="attachment-mimetype"><%= attach.mime %></small>' +
                                    '<i><small class="attachment-size"><%= attach.size %></small></i>' +
                                '</div>' +
                            '</div>' +
                            '<div class="bottom">' +
                                '<div class="uploading hide">' +
                                    '<div class="progress hide"><div class="progress-bar" style="width:0px;"></div></div>' +
                                    '<div class="btn btn-sm default btn-circle btn-icon-only" title="' + __s("Abort") + '"><i class="fa fa-times"></i></div>' +
                                '</div>' +
                                '<div class="retry hide">' +
                                    '<div class="btn btn-rounded btn-block default uppercase default">' + __s("Retry") + '</div>' +
                                '</div>' +
                                '<div class="download hide">' +
                                    '<div class="btn btn-rounded btn-block default uppercase download">' + __s("Download") + '</div>' +
                                '</div>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
*/

.chat-object-content .attachment {
    position: relative;
    min-width: 220px;
    max-width: 320px;
    width: 100%;
    height: 82px;
    padding: 8px 8px 16px;
}

#repo .chat-object-content .attachment {
    min-width: initial;
    max-width: initial;
    width: 100%;
}

.webapp-window .chat-object-content .attachment,
.modal .chat-object-content .attachment {
    min-width: 226px;
    max-width: 450px;
    width: 100%;
}

.attachment .attachment-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 64px;
    height: 82px;
    text-align: center;
    overflow: hidden;
}

.attachment .attachment-icon img {
    display: inline-block;
    margin: 8px auto 0;
    height: 64px;
}

#repo .attachment .attachment-icon img {
    margin-top: 1px;
}

.attachment .attachment-content {
    margin-left: 82px;
    position: relative;
}

.attachment .attachment-content .top,
.attachment .attachment-content .bottom {
    width: 100%;
    overflow: hidden;
}

.attachment .attachment-content .top .attachment-filename {
    height: 18px;
    line-height: 18px;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.attachment .attachment-content .top .attachment-subinfo {
    font-size: 10px;
    font-weight: 100;
    height: 12px;
    line-height: 12px;
}

.attachment .attachment-content .top .attachment-subinfo i {
    float: right;
}

.attachment .attachment-content .bottom {
    position: absolute;
    top: 37px;
    left: 0;
    right: 0;
    height: 40px;
}

.attachment .bottom > div {
    position: relative;
    display: block;
    height: inherit;
}

.attachment .bottom .uploading .progress {
    display: inline-block;
    max-height: 8px;
    width: -webkit-calc(100% - 40px);
    width: -moz-calc(100% - 40px);
    width: calc(100% - 40px);
    margin-top: 8px;
}

.attachment .bottom .uploading .btn {
    float: right;
    width: 24px;
    height: 24px;
    line-height: 12px;
}

.attachment .bottom .uploading,
.attachment .bottom .retry,
.attachment .bottom .download {
    margin-top: 0;
}

.attachment .bottom .download .btn.download {
    width: calc(100% - 48px);
    width: -webkit-calc(100% - 48px);
    width: -moz-calc(100% - 48px);
    margin-right: 8px;
}

#chat .attachment .bottom .download .btn.download {
    width: 100%;
    margin-right: 8px;
}

.attachment .bottom .download .btn.delete {
    width: 40px;
}

/*
'<div class="webapp-container alarms">' +
    '<div class="alarms-header text-right">' +
        '<button class="btn btn-rounded uppercase blue">' + __s("Refresh") +'</button>' +
    '</div>' +
    '<div class="alarms-content">' +
        '<div class="webapp-container" id="alarms">' +
            '<div class="alarms-container">' +
                '<div class="alarms-container-header">' +
                    '<h4>Active Alarms</h4>' +
                '</div>' +
                '<div class="alarms-list" id="activeAlarmContainer"></div>' +
            '</div>' +
            '<div class="alarms-container">' +
                '<div class="alarms-container-header">' +
                    '<h4>Closed Alarms</h4>' +
                '</div>' +
                '<div class="alarms-list" id="closedAlarmContainer"></div>' +
            '</div>' +
        '</div>' +
    '</div>' +
'</div>';
*/

.alarms > .alarms-header {
    display: none;
    position: sticky;
    top: 5px;
    height: auto;
    padding: 6px 12px;
}

.alarms > .alarms-content {
    position: relative;
    overflow: auto;
    width: 100%;
    height: auto;
}

.alarms .alarms-container {
    position: relative;
    top: 0;
    margin-bottom: 12px;
    padding: 6px 12px;
}

.alarms .alarms-container .no-elements {
    height: 32px;
    padding: 6px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 11px;
}

.alarms .alarms-container > .alarms-container-header {
    height: 32px;
    line-height: 24px;
    padding: 4px 6px 0;
    border-bottom: 1px solid #ADB8C1;
}

.alarms .alarms-container > .alarms-container-header > .title {
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    color: #26445D;
}

/*
<div class="alarm-item active">' +
        '<div class="title"><%= title =>/div>' +
        '<div class="subtitle <% if (hide_subtitle) { %>hide<% } %>"><%= subtitle =></div>' +
        '<div class="description <% if (hide_description) { %>hide<% } %>"><%= description =></div>' +
        '<div class="top-right">' +
            '<i class="fa <%= alarm_icon %>"></i>' +
        '</div>' +
        '<div class="options text-right">' +
            '<button class="btn btn-link uppercase bold red-flamingo" title="<%= translations.info %>"><i class="fa fa-info"></i></button>' +
            '<button class="btn uppercase bold blue"><%= translations.show %></button>' +
            '<button class="btn uppercase bold red-flamingo"><%= translations.force_close %></button>' +
        '</div>' +
    '</div>';
*/

.alarms .alarm-item {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 8px;
    border-radius: 2px !important;
    margin-bottom: 4px;
    margin-top: 10px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3);
    background-color: #E5E5E5;
}

.alarms .alarm-item.active {
    background-color: #E35B5A;
    color: white;
}

.alarms .alarm-item > .title,
.alarms .alarm-item > .subtitle {
    display: block;
    max-width: 80%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.alarms .alarm-item > .title {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    color: #26445D
}

.alarms .alarm-item.active > .title {
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.alarms .alarm-item > .subtitle {
    font-size: 13px;
    font-weight: 100;
    line-height: 15px;
}

.alarms .alarm-item > .description {
    font-size: 11px;
    font-weight: 100;
}

.alarms .alarm-item > .top-right {
    position: absolute;
    top: 6px;
    right: 6px;
}

.alarms .alarm-item .options {
    padding-top: 12px;
}

.alarms .alarm-item .options > button {
    margin-left: 6px;
}

/*
    AudioLogs
*/
#audiolog .list-content {
    position: relative;
    overflow: hidden;
    height: 100%;
}

#audiolog .list-content .list-content-scrollable {
    position: absolute;
    overflow: auto;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    padding: 8px 0;
}

#audiolog .btn-action-wrapper > .btn {
    color: white;
}

.light #audiolog .btn-action-wrapper > .btn {
    color: #26445D;
}

.item-object.audio-log {
    position: relative;
    height: auto;
}

.item-object.audio-log > .object-container {
    width: 100%;
    min-width: 250px;
    max-width: 70%;
    margin: 10px 6px;
    padding: 8px;
    position: relative;
    font-weight: 100;
    display: inline-block;
    text-align: left;
    color: white;
    border-radius: 2px !important;
    background-color: #6D7D91;
}

.light .item-object.audio-log > .object-container {
    background-color: #D9DEE1;
    color: #26445D;
}

.item-object.audio-log > .object-container > .object-header {
    font-weight: 200;
    font-size: 0.8em;
    text-transform: uppercase;
    margin-bottom: 3px;
    line-height: 16px;
}

.item-object.audio-log > .object-container > .object-header .object-sender {
    font-weight: 300;
    padding-right: 10px;
}

.item-object.audio-log > .object-container > .object-header > .pull-right {
    line-height: 17px;
}

.item-object.audio-log > .object-container > .object-header > .pull-right > * {
    position: relative;
    float: left;
}

.item-object.audio-log > .object-container > .object-header .object-info-button {
    color: #eee;
    margin-left: 8px;
}

.item-object.audio-log > .object-container > .object-header .object-info-button:hover,
.item-object.audio-log > .object-container > .object-header .object-info-button:active {
    color: #fff;
}

.item-object.audio-log.in > .object-container {
    text-align: left;
    margin-bottom: 4px;
    margin-left: 10px;
}

.item-object.audio-log.in .object-container:before {
    border-bottom: 6px solid #6D7D91;
    border-right: 12px solid transparent;
    position: absolute;
    top: -6px;
    left: 6px;
    content: '';
}

.light .item-object.audio-log.in .object-container:before {
    border-bottom-color: #D9DEE1;
}

.item-object.audio-log.out {
    text-align: right;
}

.item-object.audio-log.out > .object-container {
    margin-top: 4px;
    margin-right: 10px;
}

.item-object.audio-log.out .object-container:after {
    border-top: 6px solid #6D7D91;
    border-left: 12px solid transparent;
    position: absolute;
    bottom: -6px;
    right: 6px;
    content: '';
}

.light .item-object.audio-log.out .object-container:after {
    border-top-color: #D9DEE1;
}

/*
    Player
    <div class="player">
        <div class="player-button">
            <i id="icon" class="fa fa-download"></i>
        </div>
        <div class="player-content">
            <div class="left">
                <div class="wa-progress absolute v-middle">
                    <div class="wa-progress-bar"></div>
                </div>
            </div>
            <div class="right">
                <span class="player-progress"></span>
            </div>
        </div>
    </div>
*/

.player {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: white;
}

.light .player {
    color: #26445D;
}

.player > .player-button {
    position: absolute;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    border-radius: 50% !important;;
    border: 2px solid #f2f3f9;
    color: #f2f3f9;
    cursor: pointer;
}

.light .player > .player-button {
    border-color: #4A5E79;
    color: #4A5E79;
}

.player > .player-button:hover,
.player > .player-button:active,
.player > .player-button.active {
    border-color: white;
    color: white;
}

.light .player > .player-button:hover,
.light .player > .player-button:active,
.light .player > .player-button.active {
    border-color: #26445D;
    color: #26445D;
}

.player > .player-content {
    height: inherit;
    line-height: inherit;
    padding-left: 48px;
}

.player > .player-content > * {
    display: inline-block;
    float: left;
    position: relative;
    height: inherit;
}

.player > .player-content .left {
    width: calc(100% - 60px);
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    padding: 0 3px;
}

.player > .player-content .right {
    width: 60px;
    max-width: 60px;
    overflow: hidden;
    font-size: 14px;
    text-align: right;
}

.absolute {
    position: absolute !important;
}

.absolute.v-middle {
    top: 50%;
}

.wa-progress {
    position: relative;
    height: 6px;
    width: 100%;
    background-color: #CCCCCC;
    border-radius: 3px !important;
    overflow: hidden;
}

.wa-progress.absolute.v-middle {
    margin-top: -3px;
}

.wa-progress > .wa-progress-bar {
    background-color: #2B71B5;
    height: inherit;
    margin: 0;
    padding: 0;
    width: 0;
}

.wa-progress.success > .wa-progress-bar {
    background-color: #8CC152;
}

.wa-progress.warning > .wa-progress-bar {
    background-color: #F6BB42;
}

.wa-progress.error > .wa-progress-bar {
    background-color: #DA4453;
}

.wa-progress.wa-progress-unknown .wa-progress-bar {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
    width: 100% !important;
}

/*
 * Badge
 */

.wa-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    padding: 3px 8px;
    font-size: 11px;
    min-height: 12px;
    line-height: 12px;
    border-radius: 5px !important;
    text-align: center;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    z-index: 10;
}

.wa-badge,
.wa-badge.wa-badge-default {
    background-color: #26445D;
    color: white;
}

.wa-badge.wa-badge-red {
    background-color: #DA4453;
}

.wa-badge.wa-badge-green {
    background-color: #8CC152;
}

.wa-badge.wa-badge-yellow {
    background-color: #F6BB42;
    color: #2c2c2c;
}

.wa-badge.wa-badge-blue {
    background-color: #2B71B5;
}

.wa-badge.wa-badge-small {
    font-size: 9px;
    padding: 2px 5px;
    min-height: 10px;
    line-height: 9px;
    border-radius: 4px !important;
}

.wa-badge.wa-badge-large {
    font-size: 12px;
    padding: 4px 12px;
    min-height: 14px;
    line-height: 13px;
    border-radius: 7px !important;
}

ul.sidebar-navigation > li > a > .wa-badge {
    top: 8px;
    right: 8px;
}

.x-profile-icon > .wa-badge {
    top: -3px;
    right: -4px;
}

.channel-list .webapp-list-item-content {
    width: calc(100% - 90px);
    width: -webkit-calc(100% - 90px);
    width: -moz-calc(100% - 90px);
}

.channel-list span.x-profile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 24px;
    white-space: nowrap;
}

.list-compact.channel-list span.x-profile-name {
    line-height: 24px;
    font-size: 0.95em;
}

.user-list .webapp-list-item-content,
.user_list .webapp-list-item-content {
    width: calc(100% - 104px);
    width: -webkit-calc(100% - 104px);
    width: -moz-calc(100% - 104px);
}

.user-list.light .webapp-list-item-content,
.user_list.light .webapp-list-item-content {
    width: calc(100% - 44px);
    width: -webkit-calc(100% - 44px);
    width: -moz-calc(100% - 44px);
}

.user-list span.x-profile-name,
.user_list span.x-profile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 24px;
    white-space: nowrap;
}

.list-compact.user-list span.x-profile-name,
.list-compact.user_list span.x-profile-name {
    line-height: 24px;
    font-size: 0.95em;
}

.list-compact .webapp-list-item-content .x-profile-info {
    max-width: calc(100% - 50px);
    max-width: -webkit-calc(100% - 50px);
    max-width: -moz-calc(100% - 50px);
    margin-left: 8px;
    height: 24px;
}

.x-profile-info .x-profile-name {
    min-width: 76px;
}

.wa-paginated-list {
    height: 100%;
    overflow: hidden;
    position: relative;
    padding: 0 12px;
}

.wa-paginated-list > .wa-list-h {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    padding: 0 12px;
}

.wa-paginated-list > .wa-list-b {
    height: calc(100% - 40px);
    height: -webkit-calc(100% - 40px);
    height: -moz-calc(100% - 40px);
    position: relative;
    top: 40px;
}

.wa-paginated-list > .wa-list-h > .wa-list-h-info {
    display: inline-block;
    width: calc(100% - 80px);
    width: -webkit-calc(100% - 80px);
    width: -moz-calc(100% - 80px);
    padding-top: 10px;
    line-height: 24px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 100;
}

.wa-paginated-list > .wa-list-h > .wa-list-h-pagination {
    width: 79px;
    float: right;
    padding-top: 4px;
    text-align: right;
}

.wa-paginated-list > .wa-list-h > .wa-list-h-pagination .btn {
    color: inherit;
}

.wa-paginated-list > .wa-list-b > .wa-list-b-loading {
    font-weight: bold;
    text-transform: uppercase;
}

.webapp-list .no-items {
    font-size: 13px;
    padding: 12px 8px;
    line-height: 1.42857143;
    color: #4A5E79;
    opacity: 0.65;
    word-break: break-all;
}

.webapp-window .webapp-list .no-items {
    color: white;
}

.wa-paginated-list > .wa-list-b .webapp-list-item {
    margin-left: 0;
    margin-right: 0;
}

.wa-paginated-list .webapp-list-item .webapp-list-item-content {
    width: calc(100% - 100px);
}

.wa-paginated-list.narrow .webapp-list-item .webapp-list-item-content {
    width: calc(100% - 48px);
}

.wa-paginated-list.narrow .webapp-list-item .webapp-list-item-attr {
    display: none;
}

.wa-paginated-list.channels-list {
    padding: 0 12px !important;
}

.list-compact.webapp-list .webapp-list-item-attr,
.list-compact.wa-paginated-list .webapp-list-item-attr {
    height: 28px;
    padding: 2px;
    width: 50px;
    right: 34px;
}

.list-compact.webapp-list .webapp-list-item-attr .attr-title,
.list-compact.wa-paginated-list .webapp-list-item-attr .attr-title {
    display: none;
}

.list-compact.webapp-list .webapp-list-item-attr .x-custom-attr,
.list-compact.wa-paginated-list .webapp-list-item-attr .x-custom-attr {
    height: 20px;
    line-height: 20px;
    margin-top: 2px;
    display: inline-block;
}

.list-compact.webapp-list .webapp-list-item-attr.r2 .x-custom-attr.x-item-attr-top,
.list-compact.wa-paginated-list .webapp-list-item-attr.r2 .x-custom-attr.x-item-attr-top {
    top: auto;
    right: 22px;
    bottom: auto;
}

.webapp-list .webapp-list-item-attr.r2 .x-custom-attr, .wa-paginated-list .webapp-list-item-attr.r2 .x-custom-attr {
    display: none;
}

.list-compact.webapp-list .webapp-list-item-attr.r2 .x-custom-attr.x-item-attr-bottom,
.list-compact.wa-paginated-list .webapp-list-item-attr.r2 .x-custom-attr.x-item-attr-bottom {
    top: auto;
    right: 0;
    bottom: auto;
}

.dropdown-menu.dropdown-menu-right {
    left: auto !important;
}

.dropdown-menu.dropdown-menu-right:before {
    left: auto !important;
    right: 9px;
}

.dropdown-menu.dropdown-menu-right:after {
    left: auto !important;
    right: 10px;
}

.dropdown-submenu .dropdown-menu.dropdown-menu-right {
    right: 100%;
}

.app-header-toolbar {
    display: inline-block;
    float: right;
    margin: 0 4px 0 12px;
}

.app-header-toolbar .btn {
    height: 44px;
    line-height: 22px;
    font-size: 24px;
    width: 44px;
    padding: 4px;
    text-align: center;
    background: transparent !important;
    color: #26445D !important;
    border-radius: 0 !important;
}

.app-header-toolbar .btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

.app-header-toolbar .btn i,
.app-header-toolbar .btn i:before {
    font-size: 24px;
    line-height: 22px;
}

.app-header-toolbar .btn i {
    margin-top: -1px;
}


.btn.btn-link.state-inactive {
    color: #8F9BA6 !important;
}

p.half-pad-left {
    padding-left: 7px;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}

td.no-wrap {
    white-space: nowrap;
}

.text-overflow {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}