@import url('https://fonts.googleapis.com/css?family=Google+Sans:200,400,800');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,300|Material+Icons');
@import '../sass/normalize.scss';
@import '../sass/variables';
@import '../sass/animations.scss';
@import url("../sass/hover.css");

/** custom scroll bar **/
input, select:focus, textarea {
    font-size: 16px !important;
}
// IE
// #scroll-me { 
//     color:black;
//     scrollbar-face-color:#05B7FF;
//     scrollbar-arrow-color:#05B7FF;
//     scrollbar-track-color:#CBD5D7;
//     scrollbar-shadow-color:#05B7FF;
//     scrollbar-highlight-color:#05B7FF;
//     scrollbar-3dlight-color:#808080;
//     scrollbar-darkshadow-Color:#202020;
// }

// All Browser
// ::-webkit-scrollbar {
//     width: 6px;
//     height: 6px;
// }
/* Track */
// ::-webkit-scrollbar-track {
//    background: transparent; 
// }
/* Handle */
// ::-webkit-scrollbar-thumb {
//     background: transparent; 
//     border-radius: 6px;
// }
// /* Handle on hover */
// ::-webkit-scrollbar-thumb:hover {
//     background: #777; 
// }

:root {
    --button-in-msg-background-color:  #{$blue};
    --button-in-msg-font-size: 15px;
}

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

body {
    margin:0px;
}

:focus {outline: none !important;}
::-moz-focus-inner {border:0;}




// .btn-new-conversation:hover{
//     -webkit-animation: jello-horizontal 0.8s 0.1s both;
// 	        animation: jello-horizontal 0.8s 0.1s both;
// }

.slide-in-right {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.895, 0.030, 0.685, 0.220) 0.0s both;
	        animation: slide-in-right 0.5s cubic-bezier(0.895, 0.030, 0.685, 0.220) 0.0s both;
}

.slide-in-left {
	-webkit-animation: slideIn 0.5s cubic-bezier(0.895, 0.030, 0.685, 0.220) 0.0s ;
            animation: slideIn 0.5s cubic-bezier(0.895, 0.030, 0.685, 0.220) 0.0s ;
    // -webkit-animation: slideIn 0.2s forwards;
    //    -moz-animation: slideIn 0.2s forwards;
    //     -ms-animation: slideIn 0.2s forwards;
    //         animation: slideIn 0.2s forwards;
}

.scale-in-center {
    display: block;
    opacity: 1;
	-webkit-animation: scale-in-center 0.5s both;
            animation: scale-in-center 0.5s both;
}

.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s 3s both;
	        animation: jello-horizontal 0.9s 3s both;
}

.swirl-in-bck {
	-webkit-animation: swirl-in-bck 0.65s ease-in 0.5s both;
	        animation: swirl-in-bck 0.65s ease-in 0.5s both;
}
.rotate-scale-up {
	-webkit-animation: rotate-scale-up 0.65s linear both;
	        animation: rotate-scale-up 0.65s linear both;
}

.rotate-center:hover {
	-webkit-animation: rotate-center 0.6s ease-in-out both;
	        animation: rotate-center 0.6s ease-in-out both;
}

.swing-in-bottom-fwd {
	-webkit-animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-bottom-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

.heartbeat:hover {
	-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}

// .fade-in-top {
// 	-webkit-animation: fade-in-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.1s both;
// 	        animation: fade-in-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.1s both;
// }

// .fade-in-bottom {
// 	-webkit-animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;
// 	        animation: fade-in-bottom 0.5s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.0s;
// }
// .fade-in-bottom-footer {
// 	// -webkit-animation: fade-in-dw-up 0.7s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.8s;
// 	//         animation: fade-in-dw-up 0.7s cubic-bezier(0.600, -0.280, 0.735, 0.045) 0.8s;
// }
.avatar-project {
    position: relative;
    padding: 0;
    margin: 0;
    height: 52px;
    width: 100%;
    line-height: 52px;

    .avatar-placeholder {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        max-width: 52px;
        text-align: center;
        font-size: 20px;
        color: #ffffff;
        font-weight: 500;
        border-radius: 50%;
    }
    .avatar-image {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: 0px;
        left: 0;
        width: 90%;
        height: 80%; //100%;
        // max-width: 42px;
        max-height: 100%; //32px;
        text-align: left;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: contain;
        background-attachment: initial;
        background-position: left;
        background-origin: content-box;
    }
}


textarea::placeholder {
    color: $gray;  
    font-weight: 300;
  }

  .msg_container{
    .button-in-msg {
        color: white!important;
        background:  var(--button-in-msg-background-color) !important;

        position: relative;
        max-width: 300px;
        min-width: inherit;
        padding: 8px 16px;
        cursor: auto;
        border: 1px solid rgb(255, 255, 255);
        border-radius: 20px!important;
        margin: 3px;
        overflow: hidden;
        font-family: 'Muli', sans-serif;
        font-size: 15px;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: normal;
        letter-spacing: -0.24px;
        -webkit-font-smoothing: antialiased;
        .message_innerhtml{
            // padding: 0px 14px!important;
        }
        p{
            font-size: var(--button-in-msg-font-size)!important;
            font-family: 'Muli', sans-serif!important;
            font-weight: normal!important;
        }
    }
    
  }

chat-root {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    
    // ========= BEGIN: RESET CSS TAG ========= //
    *:focus {
        outline: none;
    }
    button{
        cursor: pointer;
    }

    textarea,
    textarea:visited,
    textarea:focus,
    textarea:hover,
    textarea:active{
        // all: unset;
        line-height: 15px!important;
        outline: none!important;
        box-shadow:none!important;;
        border: 0px solid $trasp-light-black!important;;
    }

    // ========= BEGIN: CSS APP.COMPONENT ========= //
    .c21-button-clean {
        -webkit-appearance: initial;
        border: none;
        background-color: transparent;
        padding: 0px;
        margin: 0px;
    }
    
    #tiledesk-container {
        position: absolute;
        width: 100%;
        height: 100%;
        font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
        font-size: 10px;
        text-align: left;
        background-color: transparent;
        display: none;
        overflow: hidden;
        &.active{
            display: block;
        }

        // ========= BEGIN: GENERIC CSS ========= //
        a:link {
            color: #ffffff;
        }
        /* visited link */
        a:visited {
            color: #ffffff;
        }
        /* mouse over link */
        a:hover {
            color: #ffffff;
        }
        /* selected link */
        a:active {
            color: #ffffff;
        }
        #c21-app-list-conversations,
        #c21-app-list-all-conversations,
        #chat21-star-rating-widget,
        #chat21-prechat-form {
            a:link {
                color: #3a3c4c;
            }
            /* visited link */
            a:visited {
                color: #3a3c4c;
            }
            /* mouse over link */
            a:hover {
                color: #3a3c4c;
            }
            /* selected link */
            a:active {
                color: #3a3c4c;
            }
        }
        div.clear {
            all: unset;
            clear: both;
        }
        .truncate{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            p {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                margin-block-start: 0em;
                margin-block-end: 0em;
            }
        }
        .v-align-center{
            display: inline-flex;
            align-items: center;
            height: 100%;
            float: left;
        }
        .c21-align-left {
            left: 0px;
        }
        .c21-align-right {
            right: 0px;
        }
        /* TIME */
        .time {
            display: none;
            font-size: 1em;
            color: $gray;
            text-align: left;
            margin: 0px;
            padding: 0px 40px;
            margin-top: -2px;
            background-color: transparent;
        }
        .time.sender{
            text-align: right;
            margin-right: 24px;
            padding: 0;
        }

        // === CSS LINKS === //
        /* .messages.msg_receive a */
        .msg_receive a { 
            color: $bck-msg-sent;
        }

        // === CSS BUTTON === //
        button.c21-button-primary{
            width: auto;
            height: 40px;
            line-height: 40px;
            margin: 8px 0;
            padding: 0 24px;
            opacity: 1;
            text-align: center;
            font-size: 1em;
            border-radius: 40px;
            background-color: $blue;
            color: #ffffff;
            border: 0px;

            cursor: pointer;
            .c21-label-button {
                margin-left: 8px; 
                font-weight: 400;
                font-size: 0.9em;
            }
        }
        button.c21-button-primary:hover,
        button.c21-button-primary:focus,
        button.c21-button-primary:active {
            //outline-width: 0px;
            opacity: 0.8;
        }

        button.c21-button-link {
            font-weight: 400;
            font-size: 14px;
            color: $blue;
            text-decoration: none;
            background-color: transparent;
            border: 1px solid transparent;
            cursor: pointer;
        }
        button.c21-button-link:hover,
        button.c21-button-link:focus,
        button.c21-button-link:active {
            text-decoration: underline;
            outline: none;
        }

        .c21-divBudge {
            position: absolute;
            top: 0;
            width: auto;
            height: 12px;
            min-width: 12px;
            font-size: 1em;
            line-height: 1.2em;
            border-radius: 50%;
            background-color: $red;
            color: white;
            text-align: center;
            margin-top: -10px;
            display: inline-block;
            box-sizing: initial;

            padding: 5px;
            left: 0px;
        }
        .c21-button {
            display: flex;
            cursor: pointer;
        }
        /** header-buttons **/
        .c21-close-button {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 0;
            right: 0;
            margin: 10px;
            z-index: 10;
            .c21-close-button-body {
                cursor: pointer;
                width: 51px;
                height: 51px;
                border-radius: 8px;
                padding: 0px;
                margin: 0px;
                display: flex;
                align-items: center;
                -webkit-appearance: initial;
                border: none;
                background-color: rgba(0, 0, 0, 0.0);
                &:hover {
                    background-color: rgba(0, 0, 0, 0.4);
                }
                svg{
                    margin: 0 auto;
                    fill: #ffffff;
                }
            }
        }
         /* LOADING */
        /*http://tobiasahlin.com/spinkit/*/
        #chat21-spinner {
            display: none;
            width: 70px;
            min-height: 20px;
            margin: 20px auto 0;
            text-align: center;
        }
        #chat21-spinner.active {
            display: block;
        }
        #chat21-spinner > div {
            width: 12px;
            height: 12px;
            background-color: $blue;
            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: $black;
            /* 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);
            }
        }
        // ========= END: GENERIC CSS ========= //
   
        /* CSS BOX CONTAINER */
        #chat21-conversations {
            position: absolute;
            left: 1px;
            right: 1px;
            top: 1px;
            bottom: 1px;
            border-radius: 0px;
            overflow: hidden;
            background-color: transparent;
            // border: 1px solid #cccccc; //NEW GAB
            margin: 0px;
            padding: 0px;
            box-shadow:rgba(0, 18, 46, 0.16) 0px 8px 36px 0px; //NEW GAB

            &.full-screen-mode {
                width: 100%;
                height: 100%;
                right: 0px;
                top: 0px;
                left: 0px;
                bottom: 0px;
                border-radius: 0px;
                max-height: none;
            }
        }

        .chat21-fullscreen {
            width: 100%;
            height: 100%;
            right: 0px;
            left: 0px;
            bottom: 0px;
            border-radius: 0px;
            max-height: none;
        }


        /***************************
        ******** PAGE MODAL ********
        ****************************/

        .modal-page {
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1;
            background-color: transparent;
            opacity: 0;
            display: none;
        
            &.active {
                display: inline-block;
                opacity: 1;
            }

            // .c21-modal-content {
            //     background-color: #ffffff;
            //     border: 0px solid $trasp-light-black;
            //     border-radius: 0.3rem;
            //     padding: 0px;
            //     margin: 20px auto;
            // }

            &.modal-slide-in-right {
                position: absolute;
                left: 0px;
                opacity: 1;
                display: inline-block;
                -webkit-animation-name: modal-active-in; /* Safari 4.0 - 8.0 */
                -webkit-animation-duration: 0.3s; /* Safari 4.0 - 8.0 */
                animation-name: modal-active-in;
                animation-duration: 0.3s;
            }
            &.modal-slide-out-right {
                position: absolute;
                opacity: 1;
                display: inline-block;
                -webkit-animation: slide-out-right 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
                animation: slide-out-right 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            }

        }

    
    }



    // ========= BEGIN: CSS STANDARD PAGE ========= //
    .c21-header {
        overflow: hidden;
        width: 100%;
        height: 52px;
        position: relative;
        margin: 0;
        padding: 0;
        color: #fff;
        z-index: 10;

        button:hover {
            background: rgba(240,240,240,0.2)!important;
            opacity: 1!important;
            transition: all .45s ease-in-out!important;
            -moz-transition: all .45s ease-in-out!important;
            -webkit-transition: all .45s ease-in-out!important;
            padding: 0px;
            margin: 0px;
            border-radius: 10%;
        }

        .c21-header-container{
            position: relative;
            height: 52px;
            width: 100%;
            margin: 0 auto;

            .c21-header-content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;

                .c21-header-button{
                    height: 100%;
                    display: block;
                    align-items: center;
                    text-align: center;
                    // margin: 0 10px 0 10px;
                    width: 40px;
                    height: 40px;
                    margin: 6px;
                    padding: 0px;

                    cursor: pointer;
                    &.c21-right{
                        float: right;
                    }
                    &.c21-left{
                        float: left;
                    }
                    &.c21-close{
                        display: none;
                    }

                    svg {
                        height: 20px;
                        width: 20px;
                        margin: 10px;
                    }

                    
                }

                .c21-title {
                    position: absolute;
                    left: 0;
                    display: inline-block;
                    width: calc(100% - 200px);
                    height: 1.6em;
                    line-height: 1.6em;
                    padding: 0px;
                    margin: 10px 100px;
                    text-align: center;
                    font-size: 1.6em;
                    font-weight: 500;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;             
                }
            }
        }
    }

    // =================== C21-BODY ===============//
    .c21-body::-webkit-scrollbar {
        display: none;
    }
    .c21-body {
        position: absolute;
        top: 52px;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0px;
        margin: 0px auto;
        overflow: auto;
        
        .c21-body-container {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: auto;
            width: auto;

            .c21-body-header {
                position: absolute;
                top: 0;
                left: 30px;
                right: 30px;
                padding: 10px 0px;
                margin: 0px auto;
                width: auto;
                height: auto;
                z-index: 2;
            }

            .c21-body-content  {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 0;
                margin: 0px auto;
                height: auto;
            }

        }
        
        

        //     .c21-message-field {
        //         padding: 0;
        //         margin: 0;
        //         line-height: 1.2em;
        //         color: #616161;
        //         font-size: 1.5em;
        //         text-align: center;
        //         word-wrap: break-word;
        //     }
        // }
       
    }
    // ========= END: CSS STANDARD PAGE ========= //

    /**************
    // nk: .chat21-sheet CUSTOM DIMENSIONS WHEN THE WINDOW WIDTH IS < 451PX 
    ***************/

    @media (width: 376px){
        #chat21-conversations {
            // border-radius: 10px!important;
            border-radius: 16px!important;
        }
    }

    @media (max-width: 451px) {
        #tiledesk-container {
            .header-button.close {
                display: flex;
            }
        }
    }

}
