﻿
.wrapper {
    /*min-height: calc(100vh - 65px);*/
    height: calc(100vh - 65px);
    min-height: calc(100vh - 65px);
}

@media (max-width: 991px) {
    .wrapper {
        position: relative;
        padding-left: 0;
    }
}

.container-fluid {
    height: 100%;
    overflow: auto;
    position: relative;
}

.btn-floating {
    width: 40px;
    height: 40px;
    line-height: 40px;
}

form input[type=checkbox]:checked + label:before {
    background-color: #2196f3;
    border-color: #2196f3;
}

form input[type=checkbox] + label:before {
    border: 2px solid #d3d3d3;
}

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

.btn-logout {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    margin-bottom: 0;
}

.btn-primary-public,
.btn-primary-public:focus,
.btn-primary-public:hover {
    color: #fff;
    background-color: #007a99;
    border-color: #007a99;
}

.k-pager-wrap .k-dropdown {
    width: 5.6em;
}

.dashboard-stats__item {
    border: 2px solid transparent;
}

.stats-item-active .dashboard-stats__item {
    border: 2px solid white;
}

.dashboard-stats__item.dashboard-stats__item_cyan {
    background-color: #00BCD4;
}

.dashboard-stats__item.dashboard-stats__item_teal {
    background-color: #009688;
}

@media (min-width: 1200px) {
    .dashboard-stats__title {
        font-size: 2.35vw;
    }
}

.dropdown-menu > li > a {
    cursor: pointer;
}

.modal-dialog .panel-heading {
    padding: 15px 15px;
}

.modal-dialog .panel-title {
    font-size: 15px;
}

.navbar-title {
    font-size: 18px;
    color: white !important;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 19.5px;
    margin-bottom: 19.5px;
}

.round-filter {
    position: absolute;
    top: 35px;
    right: 15px;
    z-index: 8;
}

.round-filter-next {
    position: absolute;
    top: 35px;
    right: 65px;
    z-index: 8;
}

.round-export {
    position: absolute;
    top: 35px;
    right: 15px;
    z-index: 8;
}

.sidebar-user__avatar {
    background-color: #2196f3;
    color: white;
    font-size: 16px;
    padding-top: 6px;
    text-align: center;
    width: 40px;
    height: 40px;
}

.sidebar__nav > li > a > i:first-child {
    min-width: 20px;
    text-align: center;
    margin-right: 10px;
}

.sidebar-user__info {
    line-height: 6px;
}

.icon-group {
    position: absolute;
    bottom: -40px;
    left: -6px;
    font-size: 100px;
    color: hsla(0,0%,100%,.15);
}

    .icon-group .second {
        position: absolute;
        bottom: 70px;
        left: 40px;
        font-size: 40px;
        transform: rotate(45deg);
    }

    .icon-group .no-rotate {
        transform: none;
    }

.k-chart .k-handle:hover,
.k-chart .k-handle.k-handle-active {
    background-color: #ffab00;
    border-color: #ffab00;
}

.k-chart .k-handle {
    background-color: #ffab00;
    border-color: #ffab00;
}

.copy-rights {
    margin-top: 100px;
}

.loader-container {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.2);
    z-index: 1000;
}

.loader {
    position: relative;
    margin: 0 auto;
    width: 200px;
    margin-top: 300px;
}

    .loader:before {
        content: '';
        display: block;
        padding-top: 100%;
    }

.circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #EF5350 /*$red*/;
    }

    40% {
        stroke: #43BEF7 /*$blue*/;
    }

    66% {
        stroke: #66BB6A /*$green*/;
    }

    80%, 90% {
        stroke: #FFA726 /*$yellow*/;
    }
}

.navbar-brand {
    padding: 14.5px 37px;
}

.active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.stats-item {
    cursor: pointer;
}

.k-calendar {
    border: none;
}

    .k-calendar .k-footer {
        display: none;
    }

.k-header {
    background-color: white;
    color: #757575;
}

.k-calendar .k-header .k-state-hover {
    background-color: #eee;
}

.k-calendar .k-header .k-link {
    color: #757575;
}

.k-calendar .k-header .k-nav-prev,
.k-calendar .k-header .k-nav-next {
    background-color: #eee;
}


.margin-right {
    margin-right: 15px;
}

.mdl-menu__item.active {
    background-color: #eee;
}

#filterLogsPane .k-group {
    max-height: 250px;
    overflow: auto;
}

.k-tooltip {
    margin-top: -50px;
}

.mobile-row {
    display: flex;
    flex-direction: row;
    padding: 5px 0px;
}

    .mobile-row span {
        text-align: right;
    }

        .mobile-row span:first-child {
            flex: auto 1;
            padding-right: 5px;
            text-align: left;
        }

.flow-details-item {
    border: 1px solid #d3d3d3;
    margin: 15px 0px;
    padding: 0px 15px;
}

.filter-button-group {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin: 0;
}

.top-item--title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.items-container {
    max-height: 255px;
    overflow: auto;
}

.top-item span {
    display: inline-block;
}

.top-item .top-item--percent {
    width: 40px;
    vertical-align: middle;
}

.top-item .top-item--text {
    width: 80px;
    vertical-align: middle;
}

.top-item .top-progress {
    height: 10px;
    width: calc(100% - 148px);
    margin: 0 10px;
    vertical-align: middle;
    display: inline-block;
}

.panel-heading .panel-title a {
    width: calc(100% - 45px);
    display: inline-block;
}

.panel-heading .expand-arrow {
    float: right;
    display: block;
    margin-top: 0;
}

/*grid changes*/
.k-grid {
    /*border-width: 0px;*/
}

    .k-grid .k-loading-mask {
        display: none;
    }

.k-link {
    cursor: pointer;
    outline: 0;
    text-decoration: none;
}

.k-block, .k-content, .k-dropdown .k-input, .k-popup, .k-toolbar, .k-widget {
    color: #212121;
}

.k-grid-footer, .k-grid-footer td, .k-grid-header, .k-grid-header .k-header, .k-pager-numbers .k-state-selected, .k-pager-wrap, .k-scheduler-header, .km-pane-wrapper .k-grid-header .k-header {
    color: #757575;
    background-color: white;
}

    .k-grid-footer:focus {
        color: #757575;
        background-color: white;
    }

    .k-grid-header .k-header, .k-grid-header .k-header .k-link, .k-grid-header .k-link, .k-grid-header .k-link:link, .k-pager-info, .k-scheduler-agendaview .k-scheduler-datecolumn, .k-scheduler-header {
        color: #757575;
    }

    .k-filter-row th, .k-grid-header th.k-header {
        /*border-width: 0px;*/
        position: relative;
    }

        .k-grid-header th.k-header .k-icon {
            position: absolute;
            right: 0;
        }

.k-grid-footer-wrap, .k-grid-header-wrap {
    border-width: 0;
}

div.k-grid-footer {
    border-bottom-width: 0;
}

.k-grid .k-footer-template td {
    border-bottom-width: 0px;
}

.k-grid-content tr td {
    border-right-width: 1px;
}

.k-grid tr:hover {
    background-color: #f9f9f9;
}

.k-grid tr.k-detail-row:hover {
    background-color: #fff;
}

.k-autocomplete, .k-block, .k-button-group .k-tool, .k-calendar th, .k-colorpicker .k-i-arrow-s, .k-content, .k-dropdown-wrap, .k-dropzone-active, .k-editable-area, .k-filter-row > th, .k-footer-template td, .k-grid td, .k-grid td.k-state-selected, .k-grid-content-locked, .k-grid-footer, .k-grid-footer-locked, .k-grid-footer-wrap, .k-grid-header, .k-grid-header-locked, .k-grid-header-wrap, .k-group, .k-group-footer td, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-header, .k-input, .k-pager-refresh, .k-pager-wrap, .k-pager-wrap .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-content, .k-panelbar .k-panel, .k-panelbar > .k-item > .k-link, .k-popup.k-align .k-list .k-item:last-child, .k-separator, .k-slider-track, .k-splitbar, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-textbox, .k-textbox > input, .k-tiles, .k-toolbar, .k-tooltip, .k-treemap-tile, .k-upload-files, .k-widget {
    border-color: #d3d3d3;
}

.k-grid .k-group-col, .k-grid .k-hierarchy-col {
    width: 40px;
}

.k-grid td {
    padding: 10px;
    border-color: #d3d3d3;
}

.call-logs.k-grid td {
    padding: 4px 10px;
}

.k-i-expand {
    background-position: -14px -222px;
}

.k-i-collapse {
    background-position: -14px -222px;
}

.k-grid .k-icon {
    opacity: 1;
}

.k-grid .k-alt {
    background-color: #f9f9f9;
}

.k-grid .k-hierarchy-cell .k-icon {
    background-color: #d3d3d3; /*#ffab00;*/
    border-radius: 50%;
    color: white;
    padding: 2px;
}

.k-grid .k-grid-header th.k-header {
    font-weight: bold;
}

.k-grid .k-grid-header .group-title {
    text-transform: uppercase;
    font-weight: bold;
}

.k-grid .k-grid-header th.outgoing-call {
    /*background-color: #c6ebfc;*/
}

.k-grid .k-grid-header th.incoming-call {
    /*background-color: #c1e3c3;*/
}

.k-grid .k-grid-header th.group-call {
    /*background-color: #ffe4bd;*/
}

.k-grid .k-grid-header th.internal-call {
    /*background-color: #fbdcdc;*/
}

.k-grid-header th.multiline-column {
    white-space: normal;
}

.k-grid td.name-column {
    white-space: nowrap;
    padding-bottom: 0;
    padding-top: 0;
}

.name-column > .label {
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    display: inline-block;
    padding: 0;
    margin-right: 10px;
    border-radius: 50%;
}

.name-column > .label-details {
    margin-left: 5px;
    margin-right: 0;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    display: inline-block;
    padding: 0;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
}

.k-grid .chart-column {
    padding: 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.2), not all {
    /*.k-grid .k-hierarchy-cell .k-icon {
        padding: 10px;
    }*/
}

.k-grid .k-hierarchy-cell .k-icon.k-i-collapse {
    background-color: #ffab00;
}

.k-pager-wrap .k-pager-numbers .k-state-selected {
    margin-top: 0;
    padding: 0;
    min-width: 2.429em;
}

.k-grid-pager .k-link, .k-grid-pager .k-link:link,
.k-grid-pager .k-dropdown .k-input {
    color: #757575;
}

.k-dropdown-wrap.k-state-hover,
.k-dropdown .k-state-default,
.k-dropdown-wrap.k-state-focused,
.k-dropdown-wrap.k-state-active {
    box-shadow: none;
    border-color: #d3d3d3;
    background-color: transparent;
}

.k-pager-numbers .k-link, .k-pager-numbers .k-state-selected {
    border-width: 1px;
    padding-top: 0;
}

.k-pager-numbers .k-state-selected {
    border-color: transparent;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: white;
    background-color: #2196f3;
}

.k-pager-wrap .k-link:hover {
    background-color: transparent;
    border-color: #d3d3d3;
}

.k-gantt-toolbar .k-state-default, .k-grid .k-grouping-header, .k-grid-footer td, .k-grid-header, .k-grid-header-wrap, .k-group-footer td, .k-grouping-row td, .k-header, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-wrap .k-textbox {
    border-color: #d3d3d3;
}

    .k-filter-row th, .k-grid-header th.k-header {
        border-width: 0 1px 1px 0;
    }

        .k-grid-header th.k-header.k-first {
            border-left-width: 0;
        }

/*.k-grid-header-wrap table {
    border-right-width: 1px;
    border-color: #d3d3d3;
    border-style: solid;
}*/

.k-footer-template td {
    border-left-width: 0;
    border-right-width: 1px;
}

/*bootstrap 5 columns*/
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

.k-grid-content .no-border td{
    border: none;
}

.k-grid-content .no-border tr:hover {
    background-color: transparent;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}


/*---------------print styles---------------*/
@media print {

    .wrapper {
        padding-left: 10px;
    }

        .wrapper .sidebar {
            display: none;
        }

    .print-button,
    .btn-group {
        display: none;
    }

    .container-fluid {
        height: auto;
    }

    .items-container {
        max-height: inherit;
    }

    .col-xs-12 {
        float: none;
    }

    .total-rubic .col-xs-12 {
        float: left;
        width: 25%;
    }

    .panel {
        page-break-inside: avoid;
    }

    .dashboard-stats__item {
        position: relative;
        overflow: hidden;
        padding: 10px 5px;
        /* margin-bottom: 30px; */
        border-radius: 2px;
        box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    }
}
