.table.statistic {
    background: #f7f7f7;
    border: 1px solid #f7f7f7;
    margin-bottom: 20px;
}

.table.statistic.mini {
    font-size: .8em;
}

.table.statistic h2 {
    background: #ffff;
    padding: 5px;
    margin: 0;
}

.table.statistic .separator {
    width: 1px;
    padding: 0;
    margin: 0;
    background: #fff
}

.table span.mini {
    display: block;
    font-size: .6em;
    line-height: .6em;

}
.table-sticky thead {
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    background: white;
    z-index: 10;
}

.table.statistic .sm {
    vertical-align: middle;
}

.table.statistic .sm small {
    font-size: 70%;
    display: block;
    text-align: center;
    line-height: 1em;
}

.table.statistic .smleft {
    vertical-align: middle;
    line-height: .8em;
}

.table.statistic .smleft small {
    font-size: 80%;
    display: block;
    text-align: left;
}

table.statistic td,
.widget-inner .table-mini td,
.widget-inner .table-mini th {
    padding: 0.15rem;
    border-top: none;
    border-bottom: 1px solid #dee2e6;
}

table.statistic.smallHead th {
    text-align: center
}

table.statistic.smallHead th small {
    font-size: .6em;
}

@media (max-width: 979px) {

    table.statistic.smallHead th small {
        display: none
    }
}

.table.statistic tr:first-child th {
    border: none !Important
}

.loading .table.statistic {
    opacity: .7;
    border: 1px dashed #e3cbcb;
}


table.dataTable {
    width: 100% !Important;
}

.dataTables_scroll {
    border: 1px solid #ccc;
    margin: 10px 0;
}

.dataTables_scroll.loading {
    opacity: .5;
    outline: 1px dotted #ddd;
}

.dataTables_scrollFoot {
    display: none;
}

.dataTables_scrollHead table.dataTable {
    margin-top: 0 !important
}



.dataTables_processing {
    transition: all 1s ease-in-out;
    z-index: 9999
}

.dataTables_info {
    text-align: right;
    font-size: .9em;
    margin: 3px 0;
    float: right;
    padding-top: 5px !Important;
}

.dataTables_length {
    float: left;
    font-size: .9em;
    margin: 10px 0;
}

.dataTables_length .form-control {
    padding: 5px 10px;
    font-size: .9em;
    min-width: 110px;
}

.dataTables_scrollHeadInner {
    border: 1px solid #ccc;
    border-width: 0 1px 0 1px;
    min-height: 80px;
    height: auto !Important;
}

.dataTables_scrollHeadInner th {
    background: #eee;
    color: #617da4
}

.dataTables_scrollBody {
    max-height: 58vh !Important;
    min-height: 58vh !Important;
}

.tab-pane .dataTables_scrollBody {
    max-height: 53vh !Important;
    min-height: 53vh !Important;
}

table.dataTable>thead>tr>th,
table.dataTable>thead>tr>td {
    line-height: .9em;
    vertical-align: middle;
    height: 30px;
    border: 1px solid #efefef !important;
}

table.dataTable tr.colgroup th {
    height: auto;
    font-weight: 500;
    text-align: center;
}

table.dataTable tr.colgroup2 th {
    height: auto;
    font-size: .9em;
    text-align: left;
}

.grid th {
    line-height: 1em
}

table .filters {
    background: #efefef;
}

table .filters td {
    padding: 0 !Important;
    border-bottom: 1px solid #CCC
}

table .filters input,
table .filters select {
    width: 98%;
    margin: 1px 1%;
    border: 1px solid #ccc;
    padding: 5px 5px;
}

table .filters select {
    padding: 3px;
    font-size: .9em;
    height: 32px;
}


table.dataTable .DTfilter {
    width: 98%;
    margin: 1px 1%;
    border: 1px solid #ccc;
    padding: 5px 5px;
}

table.dataTable .DTfilter:focus-visible {
    outline: none
}

table.dataTable select.DTfilter {
    padding: 3px;
    font-size: .9em;
    height: 32px;
}

table.dataTable select.DTfilter:has(option:checked:not([value=""])) {
    background: #d7d7d7;
}

table.dataTable td a {
    color: #617da4;
    display: block;
    font-weight: 600;
    width: 100%
}

table.dataTable td {
    vertical-align: middle;
    border-right: 1px solid #ddd;
    padding: 5px 10px 5px 12px;
    line-height: 1.2em;
}

table.dataTable th {
    vertical-align: middle;
    padding: 6px 0px 6px 13px;
}

table.dataTable thead TH {
    vertical-align: middle;
    color: #3a6792;
    background: #fafafa;
    border: none;
    font-weight: normal;
    font-size: 1em;
}

table.dataTable thead TH:focus {
    outline: none;
}

table.dataTable td[class*="sorting"] {
    background: #00000012
}

table.dataTable>thead>tr>th:not(.sorting_disabled) {
    padding-right: 7px;
    min-width: 12px;
}

table.dataTable thead TH.sorting_asc,
table.dataTable thead TH.sorting_desc {
    background: #00000012
}

table.dataTable thead TH.sorting:before,
table.dataTable thead TH.sorting:after,
table.dataTable thead TH.sorting_asc:before,
table.dataTable thead TH.sorting_asc:after,
table.dataTable thead TH.sorting_desc:before,
table.dataTable thead TH.sorting_desc:after {
    font-size: .6em !Important;
    width: 10px;
    color: #3d78b7;
}


table.dataTable thead TH.sorting:before,
table.dataTable thead TH.sorting_asc:before,
table.dataTable thead TH.sorting_desc:before {
    bottom: auto;
    top: calc(50% - 10px);
    left: 1px;
    content: "▲"
}


table.dataTable thead TH.sorting:after,
table.dataTable thead TH.sorting_asc:after,
table.dataTable thead TH.sorting_desc:after {
    bottom: auto;
    top: 52% !Important;
    left: 1px;
    content: "▼"
}

table.dataTable thead TH.sorting_disabled {
    min-width: 24px;
    padding-left: 5px !Important;
}

table.dataTable thead .no-filter {
    padding: 0px !Important
}

/* TBODY */

.dt-body-center {
    text-align: center;
}

.compact tbody td {
    font-size: .9em;
    word-break: keep-all;
}

/* ROUNDED  */
tbody td.fixround {
    position: relative;
}

tbody td.fixround hr {
    height: 1px;
    margin: 3px
}

tbody td.fixround div {
    top: 0px;
    left: 100%;
    visibility: hidden;
    opacity: 0;
    height: 0;


}

tbody td.fixround.left div {
    right: 100%;
    left: unset;
}

tbody td.fixround:hover div {
    position: absolute;
    box-shadow: 1px 1px 5px #8d97a1;
    padding: 5px 12px;
    background: #ebf6f7;
    z-index: 100;
    width: 100%;
    height: auto;
    visibility: visible;
    opacity: 1;
    min-width: 250px;
    transition: all .2s ease-in-out;
}



tbody td.round-35 {
    /* transition: background-color .5s ease-in-out;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10vw;
    font-size: .8em;
     z-index: 100
}
tbody td.round-100 {
    /* transition: background-color .5s ease-in-out;
    background: transparent;
    */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20vw;
    font-size: .9em;
    cursor: pointer;
    color: #405654;
    z-index: 100
}

tbody td.round-35:hover,
tbody td.round-100:hover  {
    white-space: break-spaces;
    overflow: auto;
    text-overflow: unset;
    position: absolute;
    width: inherit;
    background: #fff !important;
    box-shadow: 2px 3px 1px #b1b2b1 !Important;
    color: #000;
    margin: 0;
    width: 100%;

    min-height: 26px;
    padding: 5px !important
}

tbody td.round-100 table {
    display: none
}

tbody td.round-100:empty {
    width: 185px;
}

tbody td.round-100:hover table {
    display: table;
    width: 100%;
}

tbody td.round-100 div {
    display: none
}

tbody td.round-100:hover div {
    display: block
}

/* SENDING  */
tr.sending,
tr.sending td {
    background-color: #ecffe6;
    transition: background-color 1s ease-in-out
}


tr.sending .status {
    background-image: url(../images/loading.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

tr.sending .status small {
    display: none
}

tr.sending.table-danger,
tr.sending.table-danger td {
    background-color: #eb7676;
    transition: background-color 2s ease-in-out;
    color: #fff
}

tr.sending.table-danger .status {
    background-image: url(../images/loading_white.svg)
}

tr.sending.table-danger small.date::first-line {
    color: #eee
}

.table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f4f4f47a;
}

.dataTables_wrapper tr[class*="table-"] td:first-child {
    position: relative;
    padding-left: 15px;
    text-align: center
}

.dataTables_wrapper tr[class*="table-"] td:first-child::after {
    content: "";
    width: 8px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}


tr.table-success td:first-child::after {
    background: #67c77d !important
}

tr.table-warning td:first-child::after {
    background: #f5ce56 !important
}

tr.table-info td:first-child::after {
    background: #bee5eb !important
}

tr.table-danger td:first-child::after {
    background: #ed969e !important
}

tr.table-muted td:first-child::after {
    background: #aaa !important
}
.table-striped tr:hover {
    background-color: #c3c3c381 !important;
}

.table-success,
.table-success>td,
.table-success>th {
    background-color: #c3e6cb24;
    border-color: #c3e6cb84
}

.table-warning,
.table-warning>td,
.table-warning>th {
    background-color: #ffeeba24;
    border-color: #ffeeba84
}

.table-info,
.table-info>td,
.table-info>th {
    background-color: #bee5eb24;
    border-color: #bee5eb84
}

.table-danger,
.table-danger>td,
.table-danger>th {
    background-color: #ed969e24;
    border-color: #ed969e84
}

.table-muted,
.table-muted>td,
.table-muted>th {
    background-color: #fff;
    border-color: #aaaaaa84
}

/* BUTTONS */

.dataTables_wrapper .btn-secondary {
    color: #617da4;
    background-color: #ffffff;
    border: 1px solid #eee;
    margin-right: 2px;
    position: relative
}

div.dt-button-collection {
    margin-top: 4px !Important;
}

div.dt-buttons div.btn-group {
    position: relative;

}

.dt-buttons button:hover,
.dt-buttons button:active,
.dt-buttons button:focus {
    background: #617da4 !Important;
    color: #fff !Important
}

.dt-button-collection .dropdown-menu {
    padding: 5px !Important;
    color: #555;
    display: block;
}

.dt-button-collection .dropdown-item {
    color: #ccc
}

.dt-button-collection .dropdown-item.active,
.dt-button-collection .dropdown-item.dt-button-active,
.dt-button-collection .dropdown-item:active {
    background-color: #fff !Important;
    color: #555;
}

div.dt-button-collection .dt-button.active:after {
    color: #2b9354;
    content: "✓";
    left: 4px;
    position: absolute;
}


.dt-buttons .btn-secondary {
    background: transparent;
    border: none
}

td .dtx {
    display: block;
}

small.date {
    max-width: 85px;
    min-width: 75px;
    display: block;
    margin: 0px 0px -4px auto;
    text-align: center;
}

small.date::first-line {
    font-size: 1.1em;
    color: #000;
    line-height: 1em;
    color: #4f8986;
    padding-top: 1px;
}

tbody td.hourMin,
tbody td.vmiddle {
    font-size: .8em;
    padding: 1px !Important;
    text-align: center;
    vertical-align: middle
}

tbody .hourMin span {
    font-size: .8em;
    display: block;
    line-height: 1.2em
}

tbody .hourMin b {
    font-weight: 700
}

tbody td.datum {
    font-size: .7em;
    max-width: 85px;
    min-width: 75px;
    display: table-cell;
    margin: 0 0 -4px auto;
    text-align: center
}

tbody td.datum:first-line {
    font-size: 1.1em;
    line-height: 1em;
    color: #1e5096;
    padding-top: 1px
}

#refresh-control {
    color: #3a6792;
    display: block;
    margin: -20px 0 20px 0;
    background: #eee;
    padding: 5px 7px;
    font-size: 10px;
    height: 30px
}

#refresh-control span {
    opacity: 0;
    margin: 0px 3px;
    font-size: 1.2em
}

#refresh-control .svg-button {
    margin-top: -2px;
    width: 23px;
    text-align: center;
    padding: 3px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px
}

#refresh-control .svg-button:hover+span {
    opacity: 1
}

#refresh-control .svg-button:hover {
    border: 1px solid #3a6792
}

#refresh-control .s_all {
    color: #e9767e
}

#refresh-control .s_all .svg-button:hover,
#refresh-control .s_all.active .svg-button {
    background: #e9767e;
    color: #fff
}

#refresh-control #sync-control.active .svg-button {
    background: #3a6792;
    color: #fff
}

#refresh-control #sync-control.active .fa-sync {
    animation: rotation 1s infinite linear;
}




.fa-fan {
    opacity: .46
}

.fa-fan.rotate {
    opacity: .8;
    -webkit-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
}

.fa-sync.rotate,
.rotate .fa-sync {
    opacity: .8;
    -webkit-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
}

@media screen and (max-width: 767px) {

    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        float: none
    }
}

tr.hasvalue {
    display: table-row;
    filter: contrast(0.7);
    outline: 2px solid #40669f;
    border-radius: 10px;
}

table.editable td.edit {
    position: relative;
    width: 75%
}

table.editable td.data {
    position: relative;
    width: 75%;
    padding: 5px 10px;
    font-size: .8em
}

table.editable td.edit::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    top: 10px;
    right: 9px;
    background: url('../images/edit.svg') no-repeat top left;
    background-size: cover;
}

table.editable input {
    width: calc(100% - 5px);
    border: none;
    outline: none !important;
    border-radius: 0;
    padding: 0px;
    font-size: .9em;
    BACKGROUND: transparent
}

table.editable input:focus {
    background: #fff;
}

tr.showDetail {
    cursor: pointer;
    align-content: center;
}

tr.showDetail td {
    vertical-align: middle;
}

tr.showDetail.active {
    background: #617da6 !Important;
    color: #fff !important;
}
tr.showTicketDetail td.round {
    background: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20vw;
    font-size: .9em;
    cursor: pointer;
    color: #84a6a4;

}

tr.showTicketDetail.active {
    background: #3a6793 !important;
    color: #ffffff !important;

}

tr.showTicketDetail.active td.datum:first-line {
    color: #c4c7ca;
}

tr.showTicketDetail.active td.round-100 {
    color: #ffffff !important;
}
tr.showTicketDetail.active td.round-100:hover {
    color: #000 !important;
}


.thumbsbox {
    height: 20vh;
    margin: 10px 0 20px 0;
    overflow: hidden;
    text-align: center;
    align-content: center;
    line-height: 1em;
    background: #eee;
    padding: 5px;
    position: relative;

}

.img-fixheight {
    max-height: 89%;
    width: auto;
    transition: all .3s ease-in-out;
    cursor: pointer
}

.img-fixheight.active {
    position: fixed;
    bottom: 50%;
    right: 20px;
    height: 86vh;
    max-height: 100%;
    box-shadow: 2px 2px 15px #333;
    transform: translateY(50%);
}

.editAction i {
    display: none;
    display: block;
}

.editable .editAction i {
    display: block;
    color: #aaa;
}

.editable .editAction {
    cursor: pointer;
    word-break: break-all;
}

.editable .editAction:hover {
    background: #cbdfca
}

#descriptionBox {
     height: auto;
    min-height: 32px;
    margin: 0px -5px;

}

#descriptionBox p,
#descriptionBox li {
    margin: .3em;
    line-height: 1em;
}

.editable #descriptionBox:hover {
    background: #cbdfca;
    cursor: pointer
}

#mediaInfoContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(66, 66, 66, .6);
    display: none;
}

#mediaInfo {
    display: block;
    width: 70%;
    margin: auto;
    height: 150px;
    padding: 20px;
    background: #ebebeb;
    margin-top: 100px;
}

td.roleblock {
    cursor: pointer
}

.fa-lock.text-secondary {
    color: #ccc !important
}

.swal2-radio {
    flex-direction: column;
    align-items: flex-start !Important;
    margin: 10px 40px;
    border: 2px solid #eee;
    padding: 10px;
}