/**
* *********************************************
* EYE-CATCHER CARD & EYE-CATCHER CARD CLOSE BTN
* *********************************************  
*/ 

@import '../../../sass/variables';




.eye-catcher_column {
    float: left;
    /* padding: 10px; */
    /* height: 300px;  */
    /* Should be removed. Only for demonstration */
}
    
.ec_right::-webkit-scrollbar {
    display: none;
}

/* Clear floats after the columns */
.eye-catcher_row:after {
    content: "";
    display: table;
    clear: both;
}

/* CLOSE BTN - BTN WRAPPER */
.eye-catcher-card-emoticons-wrapper{
    text-align: center;
}
.eye-catcher-card-close-btn-wrapper{
    z-index: 1;
    height: 40px;
    width: 40px;
    position: absolute;
    top: -14px;
    display: none;
}
/* CLOSE BTN */
.eye-catcher-card-close-btn {
    z-index: 2;
    background-color: #5d6c80;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position:relative;
    left: 0px;
    right: 0px;
    cursor: pointer;
    float: right;
    margin: 4px;
    box-shadow: 0 2px 8px 0 rgba(35,47,53,0.1);
}

/* CLOSE BTN - CLOSE IMG */
.eye-catcher-card-close-btn-img {
    // width: 24px;
    // position: relative;
    // bottom: 0px;
    // right: 0px;
    // max-width: none;
    fill: #ffffff;
    width: 18px;
    height: 18px;
    margin: calc(50% - 9px);
}
/* CLOSE BTN IS MOBILE - CLOSE IMG WRAPPER */
.eye-catcher-card-close-btn-img-is-mobile-wrapper {
    /* background-color: #5d6c80; */
    z-index: 1;
    position: absolute;
    right: -1px;
    top: -39px;
    right: -14px;
    cursor: pointer;
}

/* CLOSE BTN IS MOBILE - CLOSE IMG */
.eye-catcher-card-close-btn-img-is-mobile {
    width: 40px;
    position:relative;
    max-width: none;
}

/**
* ********* CARD ********* */
.eye-catcher-card{
    position: absolute;
    z-index: 1;
    bottom: 0px;
    cursor: pointer;
    background-color: #ffffff;  /* added for new style */
    border: 0px solid #dedfde;
    box-shadow: rgba(35, 47, 53, 0.09) 0px 2px 8px 0px;
    width: 300px; /* added for new style */
    height: 70px;
    border-radius: 35px;

    .eye-catcher_row {
        width: 100%;
        height: 100%;
        position: absolute;
    }
    

    &.c21-align-left{
        margin: 16px 14px 15px 16px;
        padding-left: 70px;
        .eye-catcher-card-close-btn-wrapper{
            right: 0px;
        }
        .ec_left {
            width: 40px;
            height: auto;
            margin: 20px 4px 16px 0px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }
        .ec_right {
            overflow: hidden;
            width: calc(100% - 40px);
            height: 100%;
            padding: 0px;
            vertical-align: middle;
            display: inline-table;
            position: absolute;
            top: 0;
            left: 0;
            // max-height: 60px;
            overflow: hidden;
            // line-height: 60px;
        }

        .eye-catcher_row {
            width: calc(100% - 70px);
        }
        
    }

    &.c21-align-right{
        margin: 16px 14px 15px 16px;
        padding-right: 70px;
        .eye-catcher-card-close-btn-wrapper{
            left: -14px;
        }
        .ec_left {
            width: 40px;
            height: auto;
            margin: 18px 3px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
        .ec_right {
            overflow: hidden;
            width: calc(100% - 115px);
            height: 100%;
            padding: 0px;
            vertical-align: middle;
            display: inline-table;
            position: absolute;
            top: 0;
            left: 46px;
            // max-height: 60px;
            overflow: hidden;
            // line-height: 60px;
        }
    }
}

.eye-catcher-card:hover {
    .eye-catcher-card-close-btn-wrapper{
        display: block;
    }
}


.eye-catcher-card-text-wrapper {
    width: 100%;
    height: auto;
    vertical-align: middle;
    font-family: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
    font-weight: normal;
    word-wrap: break-word;
    margin: 0px;
    // max-height: 60px;
    position: absolute;
    line-height: normal;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.eye-catcher-card-title {
    font-size: 15px;
    color: #3b3c40;
    display: block;
    margin: 0px;
    padding: 0 0 4px 0;
}

.eye-catcher-card-msg {
    letter-spacing: 1px;
    font-size: 13px;
    color: #7b7b7b;
    display: block;
    padding: 0px;
    margin: 0px;
    line-height: normal;
    width: 100%;
}


.eye-catcher-card-img-wrapper {
    /* background-color: #286abf;  */ /* commented for new style */
    border: 1px solid #dedfde; /* added for new style */
    border-radius: 100px;
    height: 65px;
    width: 65px;
    /* position: fixed; */
    /* bottom: 152px; */
    /* right: 252px; */
}

.eye-catcher-card .chat21-card-img {
    position: relative;
    bottom: 14px;
    right: 15px;
    width: 95px;
    max-width: none;
}

.chat21-card-emoticons {
    font-size: 26px;
}
/* ./ end EYE-CATCHER CARD & EYE-CATCHER CARD  */


/* ==================== MOBILE VERSION ==================== */ 

    .eye-catcher-card {
        &.mobile {
            max-width: calc(100% - 100px);
            .eye-catcher-card-img-wrapper {
                border: 1px solid #dedfde; /* added for new style */
                border-radius: 100px;
                height: 65px;
                width: 65px;
            }
            .eye-catcher-card-close-btn {
                background-color: #fcfcfc;
                width: 30px;
                height: 30px;
                margin: 4px -4px;
                box-shadow: 0 2px 8px 0 rgba(35,47,53,0.2);
            }

            .eye-catcher-card-close-btn-wrapper{
                display: block;
            }
            .eye-catcher-card-close-btn-img{
                fill: #5d6c80;
            }
        }
    }
    