.v-center {
    position: relative;
    top: 50%;
    transform: translateY(-80%);
}

.filter-button {
    position: absolute;
    left: -40px;
    background: #f5f5f5;
    width: 40px;
    height: 40px;
    text-align: center;
    top: 23px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 17px;
    border: 1px solid #DDD;
    border-right: 0;
}
.filter-button i {
    line-height:40px;
}

.data-holder {
    overflow: auto;
    overflow-y: auto;
    display: flex;
}


    .data-holder > table {
        -moz-transition: all 0.5s ease-out; /* FF4+ */
        -o-transition: all 0.5s ease-out; /* Opera 10.5+ */
        -webkit-transition: all 0.5s ease-out; /* Saf3.2+, Chrome */
        -ms-transition: all 0.5s ease-out; /* IE10 */
        transition: all 0.5s ease-out;
        float: left;
    }

.spark .c3-line {
    stroke-width: 1px;
}


.dt-panelmenu {
    display: none;
}

/* audio player */
.audiojs audio {
    position: absolute;
    left: -1px;
}

.audiojs {
    width: 370px;
    height: 36px;
    /* background: #404040; */
    overflow: hidden;
    font-size: 12px;
}

    .audiojs .play-pause {
        width: 30px;
        height: 30px;
        padding: 4px 6px;
        margin: 0px;
        float: left;
        overflow: hidden;
        /* border-right: 1px solid #000; */
    }

    .audiojs p {
        text-align: center;
        display: none;
        width: 26px;
        height: 26px;
        margin: 0px -6px;

    background-color: #5d9cec;
    border-color: #5d9cec;
        color: #fff;

        background-repeat: repeat-x;
        padding: 1px 5px;
        line-height: 21px;
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid transparent;
        white-space: nowrap;
        -webkit-appearance: button;
        font: normal normal normal 14px/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0, 0);
    }

    .audiojs .play {
        display: block;
    }

    .audiojs .scrubber {
        position: relative;
        float: left;
        width: 220px;
        /* background: #5a5a5a; */
        height: 14px;
        margin: 10px;
        /* border-top: 1px solid #3f3f3f; */
        border-left: 0px;
        border-bottom: 0px;
        overflow: hidden;
    }

    .audiojs .progress {
        margin-top: 0px !important;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 14px;
        width: 0px;
        background-color: #3b3f4f;
        z-index: 1;
    }

    .audiojs .loaded {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 14px;
        width: 0px;
        background: #DDD;
    }

    .audiojs .time {
        float: left;
        height: 36px;
        line-height: 36px;
        margin: 0px 0px 0px 6px;
        padding: 0px 6px 0px 12px;
    }

        .audiojs .time em {
            padding: 0px 2px 0px 0px;
            font-style: normal !important;
        }

        .audiojs .time strong {
            padding: 0px 0px 0px 2px;
            font-style: normal !important;
        }

    .audiojs .error-message {
        float: left;
        display: none;
        margin: 0px 10px;
        height: 36px;
        width: 400px;
        overflow: hidden;
        line-height: 36px;
        white-space: nowrap;
        color: #fff;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -icab-text-overflow: ellipsis;
        -khtml-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
    }

        .audiojs .error-message a {
            color: #eee;
            text-decoration: none;
            padding-bottom: 1px;
            border-bottom: 1px solid #999;
            white-space: wrap;
        }

    .audiojs .play {
        line-height: 22px;
        /* font-size: 10px; */
    }

        .audiojs .play:before {
            content: "\f04b";
        }

    .audiojs .loading {
        line-height: 22px;
        
    }

        .audiojs .loading:before {
            content: "\f04b";
        }

    .audiojs .error {
    }

    .audiojs .pause {
        line-height: 21px;
    }

        .audiojs .pause:before {
            content: "\f04c";
        }

.playing .play, .playing .loading, .playing .error {
    display: none;
}

.playing .pause {
    display: block;
}

.loading .play, .loading .pause, .loading .error {
    display: none;
}

.loading .loading {
    display: block;
}

.error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
    display: none;
}

.error .error {
    display: block;
}

.error .play-pause p {
    cursor: auto;
}

.error .error-message {
    display: block;
}

.table-hover {
    cursor: pointer;
}

.spark.dash {
    width: 100%;
    margin-top: -80px;
    opacity: 0.3;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
.spark.dash:hover {

    opacity: .8;
}

.sidebar-menu .fa,
.sidebar-menu .sidebar-title {
    font-weight:100 !important;
    font-size:15px;
}


.c3-target-Previous-period {
    stroke-dasharray: 5,5;
}
.c3-circles-Previous-period {
    display:none;
}

#call-data .dropdown-menu, 
#sms-data .dropdown-menu 
{
    top:auto;
    left:auto;
}


/*===============================================
  DataTables
================================================= */
div.dataTables_wrapper {
  background-color: #f8f8f8;
}
div.dataTables_wrapper .dt-buttons {
  float: left;
  padding: 10px 15px;
}
div.dataTables_wrapper .dt-buttons .btn {
  padding: 6px 14px;
  background-color: #FAFAFA;
}
div.dataTables_wrapper .dataTables_length {
  float: left;
  padding: 10px 12px;
}
div.dataTables_wrapper .dataTables_length label {
  margin: 0;
}
div.dataTables_wrapper .dataTables_length select {
  margin: 0 5px;
}
div.dataTables_wrapper .dataTables_filter {
  float: right;
  padding: 10px 15px;
}
div.dataTables_wrapper .dataTables_filter label {
  color: #999;
  margin: 0;
}
div.dataTables_wrapper .dataTables_filter input {
  margin-left: 10px;
}
div.dataTables_wrapper div.dataTables_info {
  color: #888;
  float: left;
  padding: 19px 15px;
}
div.dataTables_wrapper div.dataTables_paginate {
  float: right;
  margin: 0;
  padding: 12px 15px;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 0;
  display: block;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > a,
div.dataTables_wrapper div.dataTables_paginate ul.pagination > li > span {
  padding: 6px 10px;
}
div.dataTables_wrapper .top {
  border-bottom: 1px solid #e2e2e2;
}
div.dataTables_wrapper .bottom {
  border-top: 1px solid #e2e2e2;

  position: absolute;
    width: 100%;
    height: 100px;
    top: 100%;

}
.panel-menu + div.dataTables_wrapper,
.panel-heading + div.dataTables_wrapper {
  border-top: 0;
}
/* DataTable */
table.dataTable {
  margin: 0 !important;
  background-color: #FFF;
}
table.dataTable > thead > th {
  padding: 10px;
  background-color: #FFF;
}
table.dataTable > tfoot > th {
  font-weight: 600;
  padding: 9px 18px 9px 10px;
  border-top: 1px solid #EEE;
  background-color: #FFF;
}
table.dataTable tr.odd {
  background-color: #f8f8f8;
}
table.dataTable tbody > tr.selected,
table.dataTable tbody > tr > .selected {
  color: #555;
  border-color: #EEE;
  background-color: #FFFEF0 !important;
}
table.dataTable tbody > tr.selected:hover,
table.dataTable tbody > tr:hover > .selected {
  color: #555;
  border-color: #EEE;
  background-color: #FAF9DF !important;
}
table.dataTable td.dataTables_empty {
  padding: 50px !important;
  background: #f6f6f6 !important;
}

.gui-input.warning{
    border-color: #e9573f !important;
}

.chat-widget .img-responsive {
    border-radius:100% !important;
}

.loader-parent{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 1031;
}

.loader {
  color: #ffffff;
  font-size: 20px;
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load4 1.3s infinite linear;
  animation: load4 1.3s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);

    right: 50%;
    bottom: 50%;
    transform: translate(50%,120px);
    position: absolute;
}
@-webkit-keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}
@keyframes load4 {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}

.text-trans-highlight {
    color: #37bc9b;
    border-bottom: solid 2px #37bc9b;
    font-weight:900;
}

.chat-widget .media-body {
    width: 100%;
    border-radius: 4px;
}

.search-result {
    outline: solid 3px goldenrod;
    outline-offset: 5px;
    outline-style: dashed;
}

ul.avatars {
    display: flex; /* Causes LI items to display in row. */
    list-style-type: none;
    margin: auto; /* Centers vertically / horizontally in flex container. */
    padding: 0px 7px 0px 0px;
    z-index: 1; /* Sets up new stack-container. */
}

li.avatars__item {
    height: 49px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    position: relative;
    width: 32px; /* Forces flex items to be smaller than their contents. */
}

ul.avatars.large li.avatars__item {
    height: 100px;
    width: 100px;
}

    /*
			These zIndex values will only be relative to the contents of the UL element,
			which sets up its own stack container. As such, these will only be relevant
			to each other, not to the page at large.
			--
			NOTE: We could theoretically get around having to set explicit zIndex values
			by using "flex-direction: row-reverse" and using the natural stacking order
			of the DOM; however, to do that, we'd have to reverse the order of the HTML
			elements, which feels janky and unnatural.
		*/
    li .avatars__item:nth-child( 1 ) {
        z-index: 9;
    }

    li.avatars__item:nth-child( 2 ) {
        z-index: 8;
    }

    li.avatars__item:nth-child( 3 ) {
        z-index: 7;
    }

    li.avatars__item:nth-child( 4 ) {
        z-index: 6;
    }

    li.avatars__item:nth-child( 5 ) {
        z-index: 5;
    }

    li.avatars__item:nth-child( 6 ) {
        z-index: 4;
    }

    li.avatars__item:nth-child( 7 ) {
        z-index: 3;
    }

    li.avatars__item:nth-child( 8 ) {
        z-index: 2;
    }

    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 9 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 18 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 19 ) {
        z-index: 1;
    }
    li.avatars__item:nth-child( 20 ) {
        z-index: 1;
    }

/*
			These items are all 49px wide while the flex-item (in which they live) is
			only 42px wide. As such, there will be several pixels of overflow content,
			which will be displayed in a reverse-stacking order based on above zIndex.
		*/
img.avatars__img,
span.avatars__initials,
span.avatars__others {
    background-color: #30363e;
    border: 2px solid #FAFAFA;
    border-radius: 100px 100px 100px 100px;
    color: #FFFFFF;
    display: block;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 100;
    height: 45px;
    line-height: 45px;
    text-align: center;
    width: 45px;
    background-position: center;
    background-size: cover;
}
ul.avatars.large img.avatars__img,
ul.avatars.large span.avatars__initials {
    height: 100px;
    width: 100px;
    line-height: 100px;
}

span.avatars__others {
    background-color: #4a89dc;
}

a[href="/dash/meetings/"] {
    display:none!important;
}