@charset "UTF-8";

.ui-ac-title {
    font-weight: bold;
    font-size: 15px;
}

.pac-logo:after {
    display: none;
}

.pac-container {
    z-index: 1050;
    font-family: inherit;
}

.pac-item-query:after {
    content: ' ';
}

.Module.ContactManagement .alert {
    text-align: initial;
}

.Module.ContactManagement .leaflet-container {
    font-family: inherit;
}

html[dir="rtl"] .Module.ContactManagement .leaflet-popup-content-wrapper {
    text-align: right;
}

.Module.ContactManagement .header {
    text-align: center;
}

.Module.ContactManagement .widget .content {
    overflow: initial;
    line-height: inherit;
}

.Module.ContactManagement .widget .navbar-inner {
    text-align: center;
    min-height: inherit;
    font-size: large;
}

.Module.ContactManagement .ui-front {
    z-index: 1001;
}

.Module.ContactManagement .ltr {
    direction: ltr;
}

.Module.ContactManagement .rtl {
    direction: rtl;
}

.Module.ContactManagement .line-through {
    text-decoration-line: line-through;
}

.Module.ContactManagement .spacer,
.Module.ContactManagement table td.spacer {
    width: 100%;
}

html[dir="ltr"] .Module.ContactManagement .fontAwesome {
    font-family: 'FontAwesome', 'Helvetica', sans-serif;
}

html[dir="rtl"] .Module.ContactManagement .fontAwesome {
    font-family: 'FontAwesome', 'IRANSans', 'Helvetica', sans-serif;
}

.Module.ContactManagement select {
    /*padding: 0;*/
    margin: 0;
}

.Module.ContactManagement .leaflet-control-attribution {
    display: none;
}

.Module.ContactManagement .search-box input.input-double-amount {
    width: 28%;
}

.Module.ContactManagement input.jDateTimePicker,
.Module.ContactManagement input.jDatePicker,
.Module.ContactManagement input.positiveNumber,
.Module.ContactManagement input.phoneNumber {
    direction: ltr;
    text-align: left;
}

html[dir="ltr"] .Module.ContactManagement .input.search-placeholder::placeholder {
    text-align: right;
}

html[dir="rtl"] .Module.ContactManagement .input.search-placeholder::placeholder {
    text-align: left;
}

.Module.ContactManagement select.rowLimit {
    width: 60px;
}

.Module.ContactManagement .controls input[type=file] {
    max-width: 280px;
}

.Module.ContactManagement form input[type=color] {
    height: 30px;
    width: 30px;
    padding: 3px;
    border-radius: 2px;
}

.Module.ContactManagement form input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.Module.ContactManagement form input[type=color]::-webkit-color-swatch {
    border: none;
}

.Module.ContactManagement form fieldset {
    display: block;
    margin: 0 2px 20px 2px;
    padding: 0 5px 10px 5px;
    border: 1px solid silver;
    border-radius: 5px;
    position: relative;
}

.Module.ContactManagement form fieldset legend {
    color: grey;
    display: block;
    padding: 0 2px;
    border: none;
    width: auto;
    margin: 0;
    font-size: inherit;
    font-weight: 500;
    line-height: normal;
}

.Module.ContactManagement form fieldset label.control-label {
    width: 133px;
}

html[dir="rtl"].Module.ContactManagement form fieldset .controls {
    margin-right: 153px;
}

html[dir="ltr"].Module.ContactManagement form fieldset .controls {
    margin-left: 153px;
}

.Module.ContactManagement img.upload-image-preview {
    max-width: 64px;
    max-height: 64px;
}

.Module.ContactManagement .form-content .address-container {
    position: relative;
}

.Module.ContactManagement .form-content .address-container button.map-toggle {
    position: absolute;
    outline: none;
    top: 40px;
}

html[dir="rtl"] .Module.ContactManagement .form-content .address-container button.map-toggle {
    left: calc(100% - 140px);
}

html[dir="ltr"] .Module.ContactManagement .form-content .address-container button.map-toggle {
    right: calc(100% - 160px);
}


.Module.ContactManagement .location-wrapper {
    width: 100%;
    height: 30vh;
}

.Module.ContactManagement .location-viewer-wrapper {
    width: 100%;
    height: 60vh;
}

.Module.ContactManagement .form-content .location-container {
    margin-bottom: 20px;
    position: relative;
}

.Module.ContactManagement .location-container fieldset {
    margin-bottom: 0;
    margin-top: -10px
}

.Module.ContactManagement .location-current {
    position: absolute;
    z-index: 2;
    right: 100%;
    transform: translateX(150%);
    top: 45px;
}

.Module.ContactManagement .location-text {
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
    width: 100%;
    color: #0e0e0e;
}

.Module.ContactManagement .leaflet-current-location {
    background-color: #fff;
}

.Module.ContactManagement .leaflet-current-location:hover {
    background-color: #f4f4f4;
    cursor: pointer;
}

.Module.ContactManagement .leaflet-current-location:after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='333333' width='20' height='20' viewBox='0 0 123 123'%3E%3Cpath d='M68.23,13.49c10.44,1.49,19.79,6.36,26.91,13.48c7.29,7.29,12.23,16.93,13.58,27.68h14.17v13.58h-14.39 c-1.62,10.13-6.42,19.2-13.36,26.13c-7.11,7.11-16.47,11.99-26.91,13.48v15.04H54.65v-15.04c-10.44-1.49-19.79-6.36-26.9-13.48 c-6.94-6.94-11.74-16-13.36-26.13H0V54.65h14.16c1.35-10.75,6.29-20.39,13.58-27.68c7.11-7.11,16.46-11.99,26.9-13.48V0h13.58 V13.49L68.23,13.49z M61.44,35.41c13.95,0,25.25,11.31,25.25,25.25c0,13.95-11.31,25.25-25.25,25.25 c-13.95,0-25.25-11.31-25.25-25.25C36.19,46.72,47.49,35.41,61.44,35.41L61.44,35.41z M89,33.11c-7.05-7.05-16.8-11.42-27.56-11.42 c-10.76,0-20.51,4.36-27.56,11.42c-7.05,7.05-11.42,16.8-11.42,27.56c0,10.76,4.36,20.51,11.42,27.56 c7.05,7.05,16.8,11.42,27.56,11.42c10.76,0,20.51-4.36,27.56-11.42c7.05-7.05,11.42-16.8,11.42-27.56 C100.41,49.9,96.05,40.16,89,33.11L89,33.11z'/%3E%3C/svg%3E");
    position: absolute;
    top: 5px;
    left: 5px;
    opacity: 0.7;
}

/*region Management */

.Module.ContactManagement table td.no-break {
    white-space: nowrap;
}

.Module.ContactManagement .list-header td {
    padding: 6px 0;
}

.Module.ContactManagement .list-header .first {
    min-width: 260px
}

.Module.ContactManagement .list-header .second {
    width: 100%;
    text-align: center;
}

.Module.ContactManagement .list-header .third {
    min-width: 200px
}

.Module.ContactManagement .list-header .forth {
    min-width: 60px;
}

.Module.ContactManagement .list-header .BarcodeManagement {
    display: block;
    padding: 0 6px;
}

.Module.ContactManagement .list-header .BarcodeManagement .input-append {
    margin-bottom: 0;
}

.Module.ContactManagement .list-footer {
    white-space: nowrap;
}

.Module.ContactManagement table.list {
    margin-bottom: 6px;
    background: white;
}

.Module.ContactManagement .pure-label,
.Module.ContactManagement table.list .control-group,
.Module.ContactManagement table.list .control-group .control-label {
    padding: 0;
    margin: 0;
}

.Module.ContactManagement table.list th {
    vertical-align: middle;
    font-weight: normal;
    text-align: center;
    background: #ededed;
    color: #666;
    padding: 0;
    border-color: #ccc;
}

.Module.ContactManagement table.list th button {
    display: none;
}

.Module.ContactManagement table.list th label {
    padding: 0;
    margin: 0;
    line-height: 40px;
    cursor: pointer;
    background: #ededed;
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 1px inset #fff;
    white-space: nowrap;
}

.Module.ContactManagement table.list th label.inactive {
    cursor: default;
}

.Module.ContactManagement table.list.pad th label {
    padding: 0 10px;
}

.Module.ContactManagement table.list th[rowspan="2"] label {
    line-height: 60px;
}

.Module.ContactManagement table.list th label:hover {
    background: #e4e4e4;
    box-shadow: none;
}

.Module.ContactManagement table.list th label.inactive:hover {
    background: #ededed;
    box-shadow: 0 0 1px inset #fff;
}

.Module.ContactManagement table.list th label.selected,
.Module.ContactManagement table.list th label.order-selected {
    background-image: linear-gradient(to bottom, #cecece, #e8e8e8);
    box-shadow: 0 2px 5px inset rgba(0, 0, 0, 0.2), 0 1px 2px inset rgba(0, 0, 0, 0.1);
}

.Module.ContactManagement table.list.pad th label.selected {
    padding: 0 4px;
}

.Module.ContactManagement table.list th.action {
    padding: 0;
    font-size: 12px;
    line-height: 15px;
}

.Module.ContactManagement table.list td {
    padding: 1px; /* 5px */
    vertical-align: middle;
    text-align: center;
}

.Module.ContactManagement .call-center table.list td {
    padding: 5px;
}

.Module.ContactManagement td.phone {
    direction: ltr;
}

.Module.ContactManagement table.list td.center-align {
    text-align: center;
}

.Module.ContactManagement table.list td.left-align,
html[dir="ltr"] .Module.ContactManagement table.list td.auto-align {
    text-align: left;
}

.Module.ContactManagement table.list td.right-align,
html[dir="rtl"] .Module.ContactManagement table.list td.auto-align {
    text-align: right;
}

.Module.ContactManagement table.list tr td.no-pad {
    padding: 0;
}

.Module.ContactManagement table.list tr td.no-border {
    border-left: none;
    border-right: none;
}

.Module.ContactManagement table.list tr.active td {
    font-weight: bold;
}

.Module.ContactManagement table.list tr.linked td {
    background: rgba(252, 248, 227, 0.51);
    font-style: italic;
    color: #787878;
}

.Module.ContactManagement table.list tr.closed td {
    background: rgb(235, 235, 235);
}

.Module.ContactManagement table.list tr td.inactive {
    color: grey;
    font-style: italic;
    text-decoration: line-through;
}

.Module.ContactManagement table.list tr:not(.inactive):hover td {
    background: #cdf3fd;
}

.Module.ContactManagement table.list tr.warning:not(.inactive):hover td {
    background: #ffe8bf;
}

.Module.ContactManagement table.list tr.error:not(.inactive):hover td {
    background: #f7c3c2;
}

.Module.ContactManagement table.list td.double {
    line-height: 14px;
    vertical-align: bottom;
}

.Module.ContactManagement table.list td.text div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 25vw;
}

.Module.ContactManagement table.list td div.color {
    height: 32px;
    width: 32px;
    margin: 0 auto;
    border: 1px solid black;
    border-radius: 4px;
}

.Module.ContactManagement table.list td .gender-male {
    color: #4E9FFB;
}

.Module.ContactManagement table.list td .gender-female {
    color: #DC57A4;
}

.Module.ContactManagement table.list th.action {
    padding: 0;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
}

.Module.ContactManagement table.list.horizontal th {
    font-weight: normal;
    padding: 4px 0;
}

.Module.ContactManagement .button-box {
    position: absolute;
    text-align: center;
    bottom: -37px;
    left: 50%;
    transform: translateX(-50%);
    background-color: inherit;
    border: 1px solid #e3e3e3;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    display: inline-block;
    padding: 2px 5px 5px 5px;
    border-top: 0;
    /*min-width: 220px;*/
}

.Module.ContactManagement .search-box .add-on {
    width: 32%;
}

.Module.ContactManagement .search-box input {
    width: 58%;
}

.Module.ContactManagement .search-box select {
    width: 62.7%;
}

.Module.ContactManagement .search-box .input-prepend {
    margin-bottom: 0;
}

.Module.ContactManagement .search-box .input-prepend.has-value label {
    background-color: #ffe9be;
    border-color: #b39d73;
    color: #6f4d0c;
}

.Module.ContactManagement .search-box .input-prepend.has-value input,
.Module.ContactManagement .search-box .input-prepend.has-value select {
    border-color: #b39d73;
}

.Module.ContactManagement .search-box.well {
    position: relative;
    padding: 19px 19px 13px 19px;
    /*margin-bottom: 40px;*/
    background-color: #fff;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

html[dir="ltr"] .Module.ContactManagement .search-box label.add-on svg,
html[dir="ltr"] .Module.ContactManagement .search-box label.add-on i {
    float: left;
}

html[dir="rtl"] .Module.ContactManagement .search-box label.add-on svg,
html[dir="rtl"] .Module.ContactManagement .search-box label.add-on i {
    float: right;
}

.Module.ContactManagement .search-box label.add-on i {
    line-height: 20px;
}


.Module.ContactManagement .pagination {
    margin: 0 auto;
}

/*endregion*/

/*region Sticky*/
.Module.ContactManagement .sticky-box {
    width: 100%;
    height: 100%;
}

.Module.ContactManagement .sticky-box .sticky,
.Module.ContactManagement table.sticky-header th {
    position: sticky;
    z-index: 2;
}

.Module.ContactManagement .sticky-box .sticky.front,
.Module.ContactManagement table.sticky-header.front th {
    background: #f9f9f9;
    z-index: 4;
}

.Module.ContactManagement .sticky-box .sticky.front.white,
.Module.ContactManagement table.sticky-header.front.white th {
    background: white;
}

.Module.ContactManagement .sticky-box .sticky.max,
.Module.ContactManagement table.sticky-header.max th {
    z-index: 7;
}

.Module.ContactManagement .sticky-box .sticky.top,
.Module.ContactManagement table.sticky-header.top th {
    top: 0;
}

.Module.ContactManagement.modal table.sticky-header.top th {
    top: -15px;
}

.Module.ContactManagement table.sticky-header.top.m2 tr:nth-child(2) th {
    top: 20px;
}

.Module.ContactManagement .sticky-box .sticky.bottom,
.Module.ContactManagement table.sticky-header.bottom th {
    bottom: 0;
}

.Module.ContactManagement .sticky-box .sticky.left,
.Module.ContactManagement table.sticky-header.left th {
    left: 0;
}

.Module.ContactManagement .sticky-box .sticky.right,
.Module.ContactManagement table.sticky-header.right th {
    right: 0;
}

/*endregion*/

/*region Summary Section*/
.Module.ContactManagement .info-box {
    color: #34495e;
    background-color: #fcfcfc;
    display: block;
    position: relative;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    padding: 20px;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.Module.ContactManagement .info-box:before {
    position: absolute;
    top: -15px;
    right: 20px;
    display: inline-block;
    border-top: 0 solid #ccc;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #ccc;
    content: " ";
}

.Module.ContactManagement .info-box:after {
    position: absolute;
    top: -14px;
    right: 21px;
    display: inline-block;
    border-top: 0 solid #fcfcfc;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 14px solid #fcfcfc;
    content: " ";
    z-index: 100;
}

.Module.ContactManagement .info-box .add-on.name {
    background-color: #1abc9c;
    color: #fcfcfc;
    border: 1px solid #1abc9c;
    text-shadow: none;
    width: 29%;
}

.Module.ContactManagement .info-box .add-on.value {
    color: #696969;
    width: 58%;
    /*border: 1px solid #eee;*/
}

.Module.ContactManagement .info-box .add-on.icon {
    background-color: #1abc9c;
    color: #fcfcfc;
    border: 1px solid #1abc9c;
    text-shadow: none;
    width: 3%;
}

.Module.ContactManagement .info-box .text-large {
    background-color: #eee;
    min-height: 51px;
    border-radius: 5px;
    padding: 6px;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    text-align: initial;
}

.Module.ContactManagement .compact-box {
    color: #34495e;
    background-color: #fcfcfc;
    display: block;
    position: relative;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.Module.ContactManagement .compact-box table {
    width: 100%;
}

.Module.ContactManagement .compact-box table td {
    vertical-align: middle;
}

.Module.ContactManagement .compact-box table td:not(.attached) {
    white-space: nowrap;
    padding: 0 2px;
}

.Module.ContactManagement .compact-box table td.field {
    text-align: left;
}

.Module.ContactManagement .compact-box table td.divider {
    padding: 0 10px;
}

.Module.ContactManagement .compact-box table td.memo-container {
    width: 100%;
    white-space: normal;
}

.Module.ContactManagement .compact-box table td.memo-container .memo {
    font-size: 12px;
}

.Module.ContactManagement .compact-box .contact-title {
    margin: 0 5px 5px 5px;
}

.Module.ContactManagement .compact-box .text-small {
    margin-top: 4px;
    min-height: 28px;
    text-align: initial;
    padding: 0 5px 0 5px;
}

.Module.ContactManagement .compact-box .text-large {
    min-height: 62px;
    margin: 5px;
    padding: 0 5px 0 5px;
    border-radius: 5px;
    text-align: initial;
}

.Module.ContactManagement .compact-box .text-large {
    min-height: 62px;
    margin: 5px;
    padding: 0 5px 0 5px;
    border-radius: 5px;
    text-align: initial;
}

/*endregion*/

/*region Contact Group Section*/

.Module.ContactManagement .contact-group-list {
    /*max-width: 1200px;*/
    margin: 0 auto;
}

.Module.ContactManagement .contact-group-list table.list td {
    min-width: 40px;
    height: 40px;
    padding: 0 4px;
}

.Module.ContactManagement .contact-group-list table.list th {
    height: 40px;
}

.Module.ContactManagement .contact-group-list table.list td.group-info {
    width: 100%;
    white-space: normal;
    padding: 0 6px;
}

.Module.ContactManagement .contact-group-list table.list td.group-name {
    min-width: 150px;
}

.Module.ContactManagement .contact-group-list .btn.new-group {
    margin-bottom: 5px;
}

.Module.ContactManagement .control-group select.small {
    font-size: 11px;
    max-width: 120px;
}

.Module.ContactManagement .control-group-compact {
    margin: 0 2px 5px 2px;
    white-space: nowrap;
}

.Module.ContactManagement .control-group-compact label {
    margin: 0;
}

.Module.ContactManagement .control-group-compact.address .input-append,
.Module.ContactManagement .control-group-compact.address input {
    width: 100%;
    max-width: 461px;
}

.Module.ContactManagement .control-group.register-date,
.Module.ContactManagement .control-group.birthday {
    margin-bottom: 5px;
}

/*endregion*/

.Module.ContactManagement:not(.modal) .form-footer,
.Module.ContactManagement:not(.modal) .form-content {
    margin: 0 auto;
    text-align: justify;
    display: table;
}

.Module.ContactManagement .modal-body {
    background: url("../img/bg.png") repeat;
}

.Module.ContactManagement span.required {
    color: red;
}

.Module.ContactManagement .liner-white {
    background: linear-gradient(45deg, #f8f8f8 25%, #f2f2f2 25%, #f2f2f2 50%, #f8f8f8 50%, #f8f8f8 75%, #f2f2f2 75%, #f2f2f2);
    background-size: 10px 10px;
    border-color: #e3e3e3;
}

.Module.ContactManagement table tr.highlight td {
    background: #eed97b;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-name: highlight_record;
}

/*region Modal*/
.Module.ContactManagement.modal {
    top: 50%;
    margin-top: calc(-50vh + 70px); /* 250 can be set*/
    /*transform: translateY(50%);*/
}

.Module.ContactManagement.modal .modal-header {
    white-space: nowrap;
}

.Module.ContactManagement.modal .modal-body {
    max-height: calc(100vh - 280px); /* 250 can be set*/
    overflow-y: auto;
}

@media (max-width: 480px) {
    .modal {
        right: 5px;
        left: 5px;
    }

    .Module.ContactManagement .input-append {
        display: flex;
    }

    .Module.ContactManagement .input-append input {
        width: 100%;
    }

    .Module.ContactManagement .upload-image {
        max-width: 210px;
    }
}

@media (min-width: 979px) {
    .ContactManagement.modal.wide {
        width: 960px;
        margin-left: -480px;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .ContactManagement.modal.wide {
        width: 760px;
        margin-left: -380px;
    }
}

.Module.ContactManagement.modal.wide .modal-body .info-box {
    max-width: 908px;
}

html[dir="ltr"] .Module.ContactManagement.modal .side-footer {
    float: right;
}

html[dir="rtl"] .Module.ContactManagement.modal .side-footer {
    float: left;
}

html[dir="ltr"] .Module.ContactManagement .input.search-placeholder::placeholder {
    text-align: right;
    vertical-align: bottom;
}

html[dir="rtl"] .Module.ContactManagement .input.search-placeholder::placeholder {
    text-align: left;
}

.Module.ContactManagement .selection-cell input[data-auto-complete].selected,
.Module.ContactManagement .selection-cell input[data-force-select].selected {
    background: #e3f4ff;
}

.Module.ContactManagement .selection-cell span.checked {
    display: none;
}

.Module.ContactManagement .selection-cell input[data-auto-complete].selected ~ span.checked {
    display: inline;
    position: relative;
    font-size: 0;
}

.Module.ContactManagement .selection-cell input[data-auto-complete].selected ~ span.checked:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 -4 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
    position: absolute;
    width: 20px;
    height: 20px;
    top: -10px;
    right: 3px;
    z-index: 2;
    display: inline-block;
    opacity: 0.5;
}

html[dir="rtl"] .Module.ContactManagement .selection-cell input[data-auto-complete].selected ~ span.checked:before {
    right: unset;
    left: 3px;
}

.Module.ContactManagement .selection-cell label input[data-auto-complete].selected ~ span.checked:before {
    top: -20px;
}

.Module.ContactManagement .selection-cell input.add-on.auto-complete-pk {
    width: 90px;
    opacity: 0;
    visibility: hidden;
}

.Module.ContactManagement .selection-cell input[data-force-select].selected ~ input.add-on.auto-complete-pk {
    visibility: visible;
    opacity: 1;
    animation: 0.3s blink_in 0s 2 ease-in;
}

/*endregion*/

@media (max-width: 767px) {
    .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] {
        display: inline-block;
        width: auto;
    }
}

@keyframes highlight_record {
    0% {
        background-color: rgba(255, 255, 255, 0);
    }
    5% {
        background-color: rgb(193, 237, 226);
    }
    15% {
        background-color: rgba(255, 255, 255, 0);
    }
    25% {
        background-color: rgb(193, 237, 226);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

@keyframes blink_in {
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/*****************/

.Module.ContactManagement .call-center .table-actions {
    margin-bottom: 10px;
}

.Module.ContactManagement .call-center .side-panel {
    position: fixed;
    bottom: 80px;
    z-index: 500;
}

.Module.ContactManagement .call-center .side-panel.left {
    left: 0;
}

.Module.ContactManagement .call-center .side-panel.right {
    right: 0;
}

.Module.ContactManagement .call-center .side-panel form.inline {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.Module.ContactManagement .call-center .side-panel .line {
    display: flex;
    position: relative;
    min-height: 110px;
}

.Module.ContactManagement .call-center .side-panel .line .tab {
    flex: 1;
    text-align: center;
    width: 20px;
    line-height: 20px;
    background: #efefef;
    outline: 1px solid #d5d5d5;
    padding: 5px 0;
    white-space: nowrap;
    user-select: none;
}

.Module.ContactManagement .call-center .side-panel.left .line .tab {
    writing-mode: vertical-lr;
    transform: scale(-1, -1);
    direction: rtl;
}

.Module.ContactManagement .call-center .side-panel.right .line .tab {
    writing-mode: vertical-lr;
    direction: ltr;
}

.Module.ContactManagement .call-center .side-panel .line .tab .notification {
    writing-mode: initial;
}

.Module.ContactManagement .call-center .side-panel.left .line .tab .notification {
    transform: scale(-1, -1);
}

.Module.ContactManagement .call-center .side-panel .line.ringing .tab {
    animation: phone_flash 1s infinite;
    cursor: pointer;
}

.Module.ContactManagement .call-center .side-panel .line.ringing .tab .notification i {
    animation: phone_ringing 2s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

.Module.ContactManagement .call-center .side-panel .line.busy .tab {
    background: #f1b877;
    cursor: pointer;
}

.Module.ContactManagement .call-center .side-panel .line.open .tab {
    background: #ade076;
    cursor: pointer;
}

.Module.ContactManagement .call-center .side-panel .line .tab .inner {
    font-weight: bold;
    padding: 4px 0;
}

.Module.ContactManagement .call-center .side-panel .line .dialog {
    position: absolute;
    min-width: 180px;
    background: #efefef;
    border: 1px solid #d5d5d5;
    padding: 2px;
    opacity: 0.9;
    transition: opacity 0.2s ease-in-out;
}

.Module.ContactManagement .call-center .side-panel:hover .line .dialog {
    opacity: 1;
}

.Module.ContactManagement .call-center .side-panel.closed .line .dialog {
    display: none;
}

.Module.ContactManagement .call-center .side-panel.left .line .dialog {
    left: 21px;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.2);
}

.Module.ContactManagement .call-center .side-panel.right .line .dialog {
    right: 21px;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    box-shadow: -8px 8px 10px rgba(0, 0, 0, 0.2);
}

.Module.ContactManagement .call-center .side-panel .line .dialog table {
    margin: 0;
}

.Module.ContactManagement .call-center .side-panel .line .dialog table tr td {
    white-space: nowrap;
    vertical-align: middle;
}

.Module.ContactManagement .call-center .side-panel .line .dialog table tr:first-child td {
    border: none;
}

.Module.ContactManagement .call-center .side-panel .line .dialog table tr td.phone-number,
.Module.ContactManagement .call-center .side-panel .line .dialog table tr td.timer {
    direction: ltr;
}

@-webkit-keyframes phone_flash {
    0%, 49% {
        background: #e8b2b2;
    }
    50%, 100% {
        background: #f17575;
    }
}

@keyframes phone_ringing {
    0% {
        transform: rotate(0);
    }
    5% {
        transform: rotate(30deg);
    }
    10% {
        transform: rotate(-28deg);
    }
    15% {
        transform: rotate(34deg);
    }
    20% {
        transform: rotate(-32deg);
    }
    25% {
        transform: rotate(30deg);
    }
    30% {
        transform: rotate(-28deg);
    }
    35% {
        transform: rotate(26deg);
    }
    40% {
        transform: rotate(-24deg);
    }
    45% {
        transform: rotate(22deg);
    }
    50% {
        transform: rotate(-20deg);
    }
    55% {
        transform: rotate(18deg);
    }
    60% {
        transform: rotate(-16deg);
    }
    65% {
        transform: rotate(14deg);
    }
    70% {
        transform: rotate(-12deg);
    }
    75% {
        transform: rotate(10deg);
    }
    80% {
        transform: rotate(-8deg);
    }
    85% {
        transform: rotate(6deg);
    }
    90% {
        transform: rotate(-4deg);
    }
    95% {
        transform: rotate(2deg);
    }
    100% {
        transform: rotate(-1deg);
    }
}

.Module.ContactManagement .call-center .side-panel .toolbox {
    margin: 5px 0;
    padding: 0;
}

.Module.ContactManagement .call-center .side-panel.left .toolbox {
    padding-left: 2px;
}

.Module.ContactManagement .call-center .side-panel.right .toolbox {
    padding-right: 2px;
}

.Module.ContactManagement .call-center .side-panel .toolbox button {
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: normal;
    text-align: center;
    padding: 0;
    margin: 0;
}

.Module.ContactManagement .call-center .side-panel button.socket-status[data-status="close"] {
    animation: socket_connecting 1s infinite;
}

@-webkit-keyframes socket_connecting {
    50% {
        color: #ffffff;
        background-color: #faa732;
        background-image: linear-gradient(to bottom, #fbb450, #f89406);
    }
}