.playa input[type=range] {
    -webkit-appearance: none;
    -moz-apperance: none;
    background-color: #ddd;
    border: 1px solid #bbb;
    height: .5em;
    border-radius: .5em;
    width: 100%;
    margin: -2px;
    padding: 0 !important;
    line-height: 0;
}

.playa input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-apperance: none;
    z-index: 3;
    height: 1em;
    width: 1em;
    border-radius: 1em;
    border: 1px solid #aaa;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1));
}

.Toastify__toast--success{
    background: #dff0d8 !important;
    border-color: #d6e9c6;
    color: #3c763d;
}
.Toastify__toast--success h3{
    color: #3c763d;
}
.Toastify__toast--success .Toastify__progress-bar{
    background-color: #3c763d;
}

.Toastify__close-button.Toastify__close-button--success{
    color: #3c763d;
}

.Toastify__toast--error{
    background: #f2dede !important;
    border-color: #ebccd1;
    color: #a94442;
}

.Toastify__toast--error h3{
    color: #a94442;
}
.Toastify__toast--error .Toastify__progress-bar{
    background-color: #a94442;
}

.Toastify__close-button.Toastify__close-button--error{
    color: #a94442;
}
.playa {
  /*margin:0;*/;
}

.playa  .thumbnail {
    width: 96%;
    padding: 1.5%;
}

.playa  .btn-group {
    text-align: center;
}

@media (max-width: 979px) and (min-width: 768px) {
    .span4 .playa, .playa.span4 {
        padding: 0;
    };
}

@media (min-width: 768px) {
    .playa .btn-group .btn {
        padding: 4px 3px;
        margin: auto;
        display: inline-block;
        float: none;
    }

    .playa .btn-group .span1 {
        width: 8%;
    }

    .playa .btn-group .span2 {
        width: 16%;
    }

    .playa .btn-group .span3 {
        width: 25%;
    }

    .playa .btn-group .span4 {
        width: 33%;
    }

    .playa.span2 .btn-group .btn, .playa.span1 .btn-group .btn, .span2 .playa .btn-group .btn, .span1 .playa .btn-group .btn {
        width: 100%;
        display: block;
    }

    .span4.playa, .span3 .playa, .span2 .playa, .span1 .playa, .playa.span4, .playa.span3, .playa.span2, .playa.span1 {
        padding: 0;
        overflow: hidden;
    };
}

.popover {
    min-width: 300px;
    font-size: 14px;
}

#statInsertContainer > textarea {
    background-color: #c0c0c0;
    width: 200px;
    font-size: 13px;
}

#cdrInsertContainer > textarea {
    background-color: #c0c0c0;
    width: 200px;
}

.reportsAu > audio {
}

.leftBarWrapper > .col-md-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    display: block;
}

.cdrInsert {
    width: 100%;
    padding: 6px;
    font-size: 13px;
}

.cdrBld {
    font-size: 14px;
    font-weight: 300;
    color: #3855c2 !important;
}

.cdrTtl {
    vertical-align: middle;
}

.highcharts-background {
    display: none;
}

.qtInsert {
    border-right: dashed 1px #888888;
    border-left: dashed 1px #888888;
    border-bottom: solid 1px #888888;
    border-top: solid 1px #888888;
    padding: 4px;
    font-size: .75em;
}

#closeRightBar {
    float: right;
    position: relative;
    background: transparent url(../img/xButton.png) no-repeat center top;
    border: 0px;
    width: 30px;
    height: 30px;
    z-index: 1010 !important;
    bottom: 36.5px;
}

.StatsBar {
    color: #000;
    border: 1px solid #c0c0c0;
    border-radius: .55em;
    height: auto;
    padding: 10px;
    font-size: 12px;
    clear: none !important;
    float: right;
    position: relative;
    left: -10px;
}

.right {
    width: auto;
    display: block;
    float: right;
    /*height: 350px;*/
    /*background: #000;*/
    color: #fff;
    float: right;
    clear: none;
}

.clear {
    clear: both;
}

.reportsWrapper {
    overflow: hidden;
    width: 100%;
}

.LbButton {
    width: 40px;
    font-size: 9px;
    position: absolute;
    right: 200px;
}

.hidden {
    visibility: hidden;
}

.StatsSearch > input {
    width: 90%;
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
    color: #222222;
}

.ReportsRndDiv {
    border: 8px solid #c0c0c0;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
 /* future proofing */
    -khtml-border-radius: 100px;
 /* for old Konqueror browsers */
    width: 80px;
    height: 80px;
    padding-top: 10px;
    padding-left: 7px;
}

.ReportsRndDivGrn {
    border: 8px solid #5cb85c;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
 /* future proofing */
    -khtml-border-radius: 100px;
 /* for old Konqueror browsers */
    width: 80px;
    height: 80px;
    padding-top: 10px;
    padding-left: 7px;
}

.ReportsBgTxt {
    font-size: 30px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #999;
}

.ReportsSmTxt {
    font-size: 11px;
    text-shadow: 1px 1px 2px #999;
    position: relative;
    top: -20px;
    left: -5px;
    background: rgba(244, 244, 244, 0.3);
    text-wrap: none;
    white-space: nowrap;
    display: block;
}

.ReportsSubTxt {
    font-size: 9px;
    text-wrap: none;
    position: relative;
    top: -30px;
    left: 3px;
}

.StatsPanel {
    margin-top: 20px;
    margin-left: 25px;
    padding-bottom: 3px;
    text-indent: 4px;
    text-align: left;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.StatsPanel > h1 {
    font-size: 10px;
    text-wrap: none;
    text-shadow: 1px 1px 2px #999;
    position: relative;
    background: rgba(244, 244, 244, 0.3);
    display: inline;
    width: 30px;
}

.StatsPanel > h2 {
    font-size: 17px;
    vertical-align: middle;
    text-wrap: none;
    position: relative;
    display: inline;
    margin-bottom: 12px;
    font-weight: bold;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    color: #999;
}

.StatsSearch {
    background-color: rgba(128, 179, 236, 0.298039);
    padding: 5px;
}

.StatsDials {
    width: 100%;
}

.StatsDials > td {
    vertical-align: top !important;
    padding: 10px !important;
    width: 50% !important;
}

.statisticsInsert {
    width: 99%;
}

::-ms-reveal,
::-ms-clear {
  display: none !important;
}

/* backgrid max-width sets this as 250px, too short for audio/download userportal call history */
td.recording-cell.sortable.renderable{
    max-width: none;
}

/* overflow-x: auto; needs set for the div containing the backgrid table */
.backgrid-container-overflow-x{
    overflow-x: auto;
}