/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@import "~material-design-icons/iconfont/material-icons.css";
@import "variables.scss";

// http://ionicframework.com/docs/v2/theming/

// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

body {
    user-select: text;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    overflow: auto;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100% !important;
    // -webkit-font-smoothing: subpixel-antialiased !important;
    // text-shadow: 0px 0px 0px !important;
    // -webkit-text-stroke-width: 0.01px !important;
}

// Ionic 'Split Pane' styles need to be tweaked to
// get this 'master-detail' example to work!
// .split-pane-side:not(ion-menu) {
//     display: initial;
// }

// .split-pane-main {
//     display: none;
//     // position: absolute!important;
// }

// .split-pane-visible {
//     .split-pane-main {
//         display: block;
//     }
// }

// ion-content {
//     --overflow: hidden;
// }

#sidebar {
    min-width: 256px;
    width: 33%;
    max-width: 320px;
}

app-conversations-list {
    width: 100%;
    height: 100%;
}
.truncate {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.truncate-conv-msg {
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #999999;
    font-size: 13px;
}

// .popover-md .popover-content{
//     width: auto!important;
// }

// ion-backdrop{
//     display: block;
//     background-color: #000000!important;
//     width: 100%;
//     height: 100%;
//     opacity: 0.0!important;
// }

// ion-app, ion-nav, ion-tab, ion-tabs, .app-root, .ion-page {
//     contain: none!important;
// }

// .avatar-profile {
//     position: absolute;
//     top: 0px;
//     left: 0px;
//     display: inline-block;
//     width: 50px;
//     height: 50px;
//     background-color: transparent;
//     background-size: cover;
//     background-position: top center;
//     border-radius: 50%;
//     border-color: #c3c3c3;
//     border-style: solid;
//     border-width: 0px;
// }
// .chat21-avatar.big{
//     width: 200px;
//     height: 200px;
// }

// /* LOADING */
// /*http://tobiasahlin.com/spinkit/*/
// #chat21-spinner {
//     min-height: 20px;
//     display: none;
//     margin: 20px auto 0;
//     width: 70px;
//     text-align: center;
// }
// #chat21-spinner.active {
//     display: block;
// }
// #chat21-spinner > div {
//     width: 12px;
//     height: 12px;
//     background-color: #2a69c1;
//     border-radius: 100%;
//     display: inline-block;
//     -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
//     animation: sk-bouncedelay 1.4s infinite ease-in-out both;
// }
// #chat21-spinner .chat21-bounce1 {
//     -webkit-animation-delay: -0.32s;
//     animation-delay: -0.32s;
// }
// #chat21-spinner .chat21-bounce2 {
//     -webkit-animation-delay: -0.16s;
//     animation-delay: -0.16s;
// }
// #chat21-spinner span {
//     display: block;
//     margin: 0.5em 0 0 0;
//     color: #2a6ac1;
//     /* text-transform: uppercase; */
//     font-family: 'Roboto', sans-serif;
//     -webkit-animation: pulse 2000ms linear infinite;
//     -moz-animation: pulse 2000ms linear infinite;
//     animation: pulse 2000ms linear infinite;
//     text-align: center;
//   }

// @-webkit-keyframes sk-bouncedelay {
//     0%, 80%, 100% { -webkit-transform: scale(0) }
//     40% { -webkit-transform: scale(1.0) }
// }

// @keyframes sk-bouncedelay {
//     0%, 80%, 100% {
//     -webkit-transform: scale(0);
//     transform: scale(0);
//     } 40% {
//     -webkit-transform: scale(1.0);
//     transform: scale(1.0);
//     }
// }

// .c21-right{
//     float: right;
// }
// .c21-left{
//     float: left;
// }
// .clearfix:after {
//     display: block;
//     clear: both;
//     content: '';
// }
// .clear{
//     clear: both;
// }

// /* END LOADIN */

// .c21-alert {
//     &.c21-alert-notification {
//         display: inline-block;
//         margin: 0 auto;
//         position: fixed;
//         -webkit-transition: all .5s ease-in-out 0s;
//         transition: all .5s ease-in-out 0s;
//         z-index: 1031;
//         top: -100px;
//         left: 0px;
//         right: 0px;
//         max-width: 450px;
//         width: 80%;
//         padding: 10px;
//         cursor: pointer;
//         display: block;
//     }
//     &.alert-danger {
//         background-color: #f55a4e;
//         color: #fff;
//         border-radius: 3px;
//         -webkit-box-shadow: 0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2);
//         box-shadow: 0 12px 20px -10px rgba(244,67,54,.28), 0 4px 20px 0 rgba(0,0,0,.12), 0 7px 8px -5px rgba(244,67,54,.2);
//     }
//     &.animated {
//         top: 10px;
//         -webkit-animation-duration: 1s;
//         animation-duration: 1s;
//         -webkit-animation-fill-mode: both;
//         animation-fill-mode: both;
//     }

// }

// ion-navbar {
//     .toolbar-background{
//         /* height: 55px; */
//         box-shadow: inset 0px -1px 0px #f7f7f7;
//     }

// }

// ion-toolbar {
//     .toolbar-background {
//         background-color: #ffffff;
//     }
//     .transparent{
//         .toolbar-background {
//             background-color: transparent;
//         }
//     }
// }

// .footer:before {
//     height: 1px;
// }
// // .modal-page {
// //     z-index: 1;
// //     background-color: transparent;
// //     opacity: 0;
// //     transition: all 0.2s;
// //     right: -100%;
// //     &.open {
// //         // background-color: $trasp-black;
// //         opacity: 1;
// //         transition: all 0.3s;
// //         right: 0px;
// //     }
// // }

// .split-pane-side {
//     border-right: 1px solid rgba(169, 169, 169, 0.1)!important;
// }

// START GESTIONE SIDEBAR ESTERNA CON IFRAME //
#tld-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 60px;
    background-color: black;
    &.open {
        width: 300px;
        .btn-close {
            display: block;
            width: 100%;
        }
        .btn-open {
            display: none;
        }
    }
}

.tld-button {
    width: 100%;
    height: 56px;
    .btn {
        background-color: DodgerBlue;
        border: none;
        color: white;
        padding: 20px 20px;
        font-size: 16px;
        cursor: pointer;
    }
    .btn:hover {
        background-color: RoyalBlue;
    }
    .btn-close {
        display: none;
    }
    .btn-open {
        display: block;
        width: 100%;
        font-size: 28px;
        padding: 14px 14px;
    }
}
.tld-iframe {
    height: 100%;
    width: 100%;
}
app-root {
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    width: 100%;
    float: right;
    z-index: 2;
    &.open {
        left: 300px;
        width: calc(100% - 300px);
    }
    &.close {
        left: 60px;
        width: calc(100% - 60px);
    }
}
// END GESTIONE SIDEBAR ESTERNA CON IFRAME //

app-message-text-area {
    width: 100%;
    z-index: 99999; // nk
    background: #fff; // nk
}
app-bubble-day-message {
    width: 100%;
}
app-bubble-system-message {
    max-width: 80%;
    margin: 0 auto;
}
app-bubble-my-message {
    width: 100%;
}
app-bubble-others-message {
    width: 100%;
}
app-conversation-info {
    height: calc(100% - 60px);
}
app-avatar-profile {
    width: 100%;
    height: 100%;
}

app-info-support-group {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

ion-conversation-detail {
    img {
        border-style: none;
        max-width: 100% !important;
    }
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    // border: 0px solid green;
    // -webkit-text-fill-color: green;
    -webkit-box-shadow: 0 0 0px 0px #000 inset;
    transition: background-color 1000s ease-in-out 0s;
}

.chat-tooltip {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-style: normal;
    letter-spacing: normal;
    font-stretch: normal;
    font-variant: normal;
    font-weight: 300;
}

// da rivedere
// :host ::ng-deep tiledeskwidget-bubble-message > div > div > tiledeskwidget-image > div > img {
//     display: none !important;
// }

/*
 * Canned responses
 * -------------------------------------------- */

#canned {
    z-index: 99999;
    width: 100%;
    // background: rgba(237,240,244,.9);
    // position: fixed;
    // top: 0;
    // bottom: 0;
    // left: 0;
    // right: 0;
    // overflow: hidden;
}

.canned-list {
    // position: absolute;
    // bottom: 0;
    background-color: white !important;
    width: 100%;
    max-height: 310px;
    overflow-y: auto;
    // padding: 10px 0;
    // margin: 0;
    margin-bottom: 1px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #080f1a;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    // list-style: none;
    z-index: 999999;
}

.canned-item {
    -webkit-tap-highlight-color: transparent;
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    list-style: none;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    // margin: 0 10px;
    position: relative;
    outline: none;
    color: #434a54;
    // padding: 10px;
    padding: 5px;
    width: auto;
    cursor: pointer;
    // .item-inner{
    //     border: none!important;
    // }
}

// .canned-item:hover {
//     background-color: #eaf1fd!important;
//     border-radius: 4px;

//   }

#canned > ion-list > ion-item {
    --background-hover: #1877f2 !important;
}

//   div.item-native > div:hover {
//     background-color: #eaf1fd!important;
// }

//   div.item-native > div

// .canned-item {
//     // background-color: #eaf1fd!important;
//     border-radius: 4px;
//     --background-hover: #eaf1fd!important;
//   }

//   #canned > ion-list > ion-item {
//     --background-hover: #eaf1fd!important;
//   }

//   :host {
//     #canned > ion-list > ion-item {
//       &:hover {
//         --background-hover: #eaf1fd
//       }
//     }
//   }

// .cannedContent {
//     width: 100%;
// }

#canned > ion-list > ion-item > div > div.cannedTitle {
    padding-top: 5px;
}

#canned > ion-list > ion-item > div > div.cannedText {
    text-align: left;
    font-size: 12px;
    display: block;
    padding-bottom: 5px;
    // white-space: nowrap;
    // width: 100%;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // border: 0px solid #000000;
}

#canned > ion-list > ion-item > div > div.nocannedTitle {
    color: #f44336;
}

#canned > ion-list > ion-item > div > div.no-canned-available-text {
    color: #1877f2 !important;
}

#canned > ion-list > ion-item > div > div.no-canned-available-text:hover {
    text-decoration: underline;
}

.highlight-search-string {
    color: #1877f2 !important;
}

.base_info > p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.toast-custom-class {
    text-align: center;
}

// #chatArea > ion-row.row_chat_area > ion-content > ion-conversation-detail > div > div > tiledeskwidget-bubble-message.slide-in-right > div > div > div > tiledeskwidget-text > p > p > a{
//     display: none;
// }

// #chatArea > ion-row.row_chat_area > ion-content > ion-conversation-detail > div > div > tiledeskwidget-bubble-message.slide-in-right > div > div > tiledeskwidget-image > div > img {
//     // display: none !important;
//     border-radius: unset !important;
//     border-top-right-radius: 6px !important;
//     border-top-left-radius: 16px !important;
// }

/* Start rules for the member list refactoring in the "info-group.component.html" (replacement of ion-grid with ion-list) */
#members-list > ion-item > ion-avatar > app-avatar-profile > div > div.avatar.avatar-image {
    margin-top: -110% !important;
    width: 44px !important;
    height: 44px !important;
}

#members-list > ion-item > ion-avatar > .user-online {
    top: 37px !important;
    left: 45px !important;
}

#members-list > ion-item > ion-avatar > app-avatar-profile > div > div.avatar.avatar-placeholder {
    line-height: 42px;
}
/* End rules for the member list refactoring in the "info-group.component.html" (replacement of ion-grid with ion-list) */
.missing-connection-toast {
    --background: #fdd764;
    --color: #2e3939;
    font-weight: 500;
    font-size: 16px;
}

.missing-connection-toast::part(message) {
    // display: none;
    display: flex;
    align-items: center;
}

// User details Sidebar
.user-details-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

// Sidebar
.sidebar {
    transition-property: top, bottom, width;
    transition-duration: 0.2s, 0.2s, 0.35s;
    transition-timing-function: linear, linear, ease;
    -webkit-overflow-scrolling: touch;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.sidebar .logo {
    position: relative;
    padding: 13px 15px;
    z-index: 4;
}

.sidebar .sidebar-wrapper {
    position: relative;
    height: calc(100vh - 35px);
    overflow: auto;
    width: 60px;
    z-index: 4;
}
.sidebar-wrapper {
    transition-property: top, bottom, width;
    transition-duration: 0.2s, 0.2s, 0.35s;
    transition-timing-function: linear, linear, ease;
    background-color: #2d323e !important;
}

.small-sidebar__logo {
    left: 19px;
    top: 12px !important;
    width: 25px !important;
    margin-left: 3px;
    margin-top: 5px;
}

.small-sidebar-tiledesk-nav-user {
    height: 35px;
    min-height: 35px;
    max-height: 35px;
}

.user {
    position: relative;
    // display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    // height: 130px;
    // min-height: 130px;
    // max-height: 130px;
}
.tiledesk-nav-user {
    background-color: #1e2129 !important;
    color: #fff !important;
}

.small-sidebar-userfullname {
    display: none;
}



.tiledesk-nav-avatar {
    background-color: #2d323e !important;
    color: #fff !important;
}

.sidebar-avatar-container {
    text-align: center;
    cursor: pointer;
    position: absolute;
    // top: 80px;
    border-radius: 50%;
    // padding: 4px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;
    width: 35px;
    height: 35px;
}

.sidebar-avatar-container .sidebar-avatar {
    width: 35px;
    height: 35px;
    margin: 0;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    min-width: 35px;
    max-width: 35px;
}

.small-sidebar-status-icon {
    left: 26px !important;
    bottom: -1px !important;
    width: 12px !important;
    height: 12px !important;
}

.status-icon {
    position: absolute;
    // width: 14px;
    // height: 14px;
    // bottom: 8px;
    // left: 61px;
    border: 2px solid #2d323e;
    border-radius: 50%;
    // background-color: #4caf50;
}

.small-sidebar-camera-icon {
    top: 19px !important;
}

.is-over-camera {
    z-index: 5;
    position: relative;
    // top: 20px;
    background-color: rgba(45, 50, 62, 0.7);
    // padding: 15px;
    padding: 6px;
    border-radius: 50%;
    opacity: 0;
}

.sidebar--isBusy-icon-wpr {
    width: 12px;
    height: 12px;
    position: absolute;
    top: -5px;
    right: 25px;
}

@media (max-width: 991px) {
    .nav-container {
        position: relative;
    }
}

.sidebar .nav {
    margin-top: 0px;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav:before {
    display: table;
    content: " ";
}

.nav > li {
    position: relative;
    display: block;
    height: 40px;
    cursor: pointer;
    margin-top: 5px;
    margin-bottom: 5px;
}

.nav > li:hover > a > i {
    // background-color: #eee;
    color: #a9afbb
}

.sidebar .nav li > a {
    // margin: 10px 15px;
    // border-radius: 3px;
    transition: all 300ms linear;
    color: #3c4858;
}

.sidebar .nav li.item-active > a > i {
    color: #ffffff;
}

.item-active {
    height: 40px;
    // background-color: #3ea9f5;
    color: #fff !important;
    pointer-events: none;
}
.is-user-online {
    background-color: #4caf50;
}

.is-desktop-menu {
    margin-top: 40px;
}
.is-mobile-menu {
    margin-top: 0px;
}

.logo {
    background-color: #2d323e !important;
    padding-bottom: 5px;
    min-height: 60px;
    width: 60px; // for SMALL SIDEBAR
}

.sidebar .logo:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 10%;
    height: 1px;
    width: 80%;
    background-color: rgba(180, 180, 180, 0.3);
}

.logo-img-wpr {
    text-transform: none;

    min-height: 40px;
    padding-left: 0px !important;
}

/* *** SMALL SIDEBAR STYLE ***  */
.small-sidebar-tiledesk-nav-user {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

.small-sidebar-email {
    display: none;
}


/* OVERWRITE THE DEFAULT STYLE */
.nav-mobile-menu {
    margin-top: 45px !important;
}


/* CUSTOM SCROLL BAR FOR LEFT SIDEBAR */
.sidebar-wrapper::-webkit-scrollbar {
    width: 3px;
}
.sidebar-wrapper::-webkit-scrollbar-track {
    background-color: #1c2b45;
}
.sidebar-wrapper::-webkit-scrollbar-thumb {
    background-color: #3c485b;
    border-radius: 3px;
}

/* CUSTOM SCROLL BAR FOR USER DETAILS DRAWER */
#user-details::-webkit-scrollbar {
    width: 3px;
}

#user-details::-webkit-scrollbar-track {
    background-color: #1c2b45;
}
#user-details::-webkit-scrollbar-thumb {
    background-color: #3c485b;
    border-radius: 3px;
}

/* end CUSTOM SCROLL BAR */

/* SIDEBAR NAV ITEMS  */

/* SIDEBAR NAV ITEMS  */

.is-user-online {
    background-color: #4caf50;
}
.is-user-offline {
    background-color: #f44336;
}

.is-desktop-menu {
    margin-top: 40px;
}
.is-mobile-menu {
    margin-top: 0px;
}



/* *** SMALL SIDEBAR STYLE ***  */
.small-sidebar-tiledesk-nav-user {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}
.small-sidebar-avatar {
    top: 13px;
}
.small-sidebar-avatar-with-avatar {
    top: 13px;
}

.small-sidebar-status-text {
    display: none;
}


/* OVERWRITE THE DEFAULT STYLE */
.nav-mobile-menu {
    margin-top: 45px !important;
}
/* // NK end NEW: AVATAR ON THE SIDEBAR  */

/* SIDEBAR NAV ITEMS  */

.item-active a {
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* SIDEBAR NAV ITEMS  */

p.hidden-lg.hidden-md {
    color: rgba(255, 255, 255, 0.6);
}
li.item-active p.hidden-lg.hidden-md {
    color: rgba(25, 25, 25, 1) !important;
}
.nav .open > a > p.hidden-lg.hidden-md {
    color: rgba(25, 25, 25, 1) !important;
}
ul.dropdown-menu > li > a {
    color: rgba(255, 255, 255, 0.6);
}
/* end - mobile sidebar USED WITH SIDWBAR WITH BLACK BACKGROUND */
/* END - USED WITH SIDWBAR WITH BLACK BACKGROUND */

/* CUSTOM MARGIN BETWEEN THE MENU ITEM*/
.nav li > a.customAncor {
    /* margin: 5px 15px !important; */

    margin-top: 5px !important;
    margin-right: 15px !important;
    margin-bottom: 5px !important;
    margin-left: 0px !important;
    width: 60px;
    border-radius: 0px;
}

.sidebar-icons {
    font-size: 20px !important;
    // color: #a9afbb !important;
}

.sidebar .nav i {
    // font-size: 20px;
    float: left;
    // margin-right: 15px;
    // line-height: 30px;
    width: 60px;
    text-align: center;
    // color: #a9afbb;
    color: #647491;
    padding-top: 10px;
}

// ng-select custom class in Create ticket modal
.ng-select.create-ticket-custom-select {
    margin-top: 5px !important;
}

