/********************************************
    1.  FONTS
    2.  COMPONENTS / LAYOUT
    3.  BUTTONS
    4.  TEXT-FIELDS
    5.  COLLABORATION
    6.  SCROLL COMPONENT
    7.  ATTACHMENT PANEL
    8.  PAYMENT
    9.  MODAL
    10. RECONNECTING
    11. ERRORS
    12. SHARE-VIEW ICONS
    13. MEDIA (viewport) 
    14. KEY-FRAMES (ANIMATION)
*********************************************/

/******************************************/
/*                  FONTS                 */
/******************************************/

html {
    width: 100%;
    -webkit-text-size-adjust: 100% !important;
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 100;
    src: local('Work Sans Thin'), local('WorkSans-Thin'), url(../fonts/QGYqz_wNahGAdqQ43Rh3H5Drv_s.woff) format('woff');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 200;
    src: local('Work Sans ExtraLight'), local('WorkSans-ExtraLight'), url(../fonts/QGYpz_wNahGAdqQ43Rh3s4H8mNhL.woff) format('woff');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Work Sans Light'), local('WorkSans-Light'), url(../fonts/QGYpz_wNahGAdqQ43Rh314L8mNhL.woff) format('woff');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Work Sans'), local('WorkSans-Regular'), url(../fonts/QGYsz_wNahGAdqQ43Rh_fKDv.woff) format('woff');
}

@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Work Sans Medium'), local('WorkSans-Medium'), url(../fonts/QGYpz_wNahGAdqQ43Rh3j4P8mNhL.woff) format('woff');
}

/* dancing-script-regular - latin */
@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/dancing-script-v10-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Dancing Script Regular'), local('DancingScript-Regular'), url('../fonts/dancing-script-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/dancing-script-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/dancing-script-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/dancing-script-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/dancing-script-v10-latin-regular.svg#DancingScript') format('svg'); /* Legacy iOS */
}
/* dancing-script-700 - latin */
@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/dancing-script-v10-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Dancing Script Bold'), local('DancingScript-Bold'), url('../fonts/dancing-script-v10-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/dancing-script-v10-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/dancing-script-v10-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/dancing-script-v10-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/dancing-script-v10-latin-700.svg#DancingScript') format('svg'); /* Legacy iOS */
}


#lightico {
    font-family: "Open Sans", sans-serif;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 16px;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

    #lightico * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.ellipsis-text {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

    .ellipsis-text label {
        max-width: 90%;
    }

/******************************************/
/*          COMPONENTS / LAYOUT           */
/******************************************/
.lightico-gradient {
    background: #116fc6;
    background: -moz-linear-gradient(45deg, #116fc6 0%, #0797bc 51%, #00b6b5 100%);
    background: -webkit-linear-gradient(45deg, #116fc6 0%,#0797bc 51%,#00b6b5 100%);
    background: linear-gradient(45deg, #116fc6 0%,#0797bc 51%,#00b6b5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#116fc6', endColorstr='#00b6b5',GradientType=1 );
}

/************** SCROLLBAR ***************/
*::-webkit-scrollbar-thumb,
.files .browser::-webkit-scrollbar-thumb {
    background: #b7bdcb;
    border-radius: 5px;
}

*::-webkit-scrollbar-track,
.files .browser::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px #b7bdcb;
    border-radius: 4px;
}

*::-webkit-scrollbar,
.files .browser::-webkit-scrollbar {
    width: 10px;
}

.unset-line-height {
    line-height: unset !important;
}

.spinner-flex {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 50px;
    height: 50px;
    position: relative;
}

span.spinner-text {
    float: left;
    padding-left: 15px;
}

.loading-indicator {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
    background: rgba(62, 69, 84, 0.1);
    position: fixed;
    z-index: 99999999;
    opacity: 1;
    display: none;
    align-items: center;
    justify-content: center;
}

    .loading-indicator.fade {
        opacity: 0;
    }

    .loading-indicator.hide {
        display: none;
    }

    .loading-indicator.active {
        display: flex !important;
    }

.spinner-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.lightico-white {
    background-color: #fff !important;
    color: #00b4b5 !important;
    border: 1px solid #00b4b5 !important;
    border-radius: 25px !important;
}

    .lightico-white:hover {
        border: 1px solid #00b4b5 !important;
        background-color: #00b4b5 !important;
        color: #fff !important;
    }

img.img-responsive {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/******************************************/
/*                BUTTONS                 */
/******************************************/
.btn-field {
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    color: #fff;
    font-size: 16px;
    background-color: #00b4b5;
    border: none;
    outline: none;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    position: relative;
    border-radius: 20px !important;
    border: 1px solid #00b4b5;
    min-width: 90px;
    text-align: center;
}

    .btn-field:not(.lightico-gradient):hover {
        border: 1px solid #00b4b5;
        background-color: #fff;
        color: #00b4b5;
    }

    .btn-field:disabled,
    .btn-field:disabled:hover {
        cursor: not-allowed !important;
        background-color: #65798b !important;
        color: #adadad;
        border: none;
    }

    .btn-field.shadow {
        -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    }

    .btn-field.uppercase {
        text-transform: uppercase;
    }

    .btn-field.bold {
        font-weight: bold;
    }

    .btn-field.big {
        height: 60px;
        line-height: 55px;
        padding: 0 50px;
    }

    .btn-field.small {
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        border-radius: 2px;
    }

    .btn-field.tiny {
        height: 35px;
        line-height: 35px;
        font-size: 12px;
        padding: 0 10px;
    }

    .btn-field.secondary {
        color: #40c1e5;
        background: #fff;
    }

        .btn-field.secondary:hover {
            color: #fff;
            background: #40c1e5;
        }

    .btn-field.transparent {
        color: inherit;
        border-color: transparent;
        background: transparent;
    }

    .btn-field.wide {
        width: 100%;
    }

    .btn-field.white {
        color: #000;
        background-color: #fff;
        border-color: #fff;
    }

        .btn-field.white:hover {
            background-color: #e6e6e6;
            border-color: #e6e6e6;
        }

        .btn-field.white.disabled {
            cursor: auto;
            background-color: #b3b3b3;
            border-color: #b3b3b3;
        }

            .btn-field.white.disabled:hover {
                background-color: #b3b3b3;
                border-color: #b3b3b3;
            }

.modal-form#modalConfirm .controls {
    max-height: 45vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-form .controls {
    width: 100%;
    display: inline-block;
}

.modal-form .msg {
    padding-bottom: 15px;
}

.vertical-center {
    position: absolute;
    top: 40%;
}

/******************************************/
/*              TEXT-FIELDS               */
/******************************************/
.dir-ltr {
    direction: ltr;
}

.dir-rtl {
    direction: rtl;
}

input.text-field::-ms-clear {
    display: none;
}

.text-field {
    font-family: "Open Sans", sans-serif;
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
    width: 100%;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    outline: none;
    margin-bottom: 10px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    resize: none;
}

    .text-field::-webkit-input-placeholder {
        color: rgba(0, 0, 0, 0.2);
    }

    .text-field:-moz-placeholder {
        color: rgba(0, 0, 0, 0.2);
    }

    .text-field::-moz-placeholder {
        color: rgba(0, 0, 0, 0.2);
    }

    .text-field:-ms-input-placeholder {
        color: rgba(0, 0, 0, 0.2);
    }

    .text-field.error {
        border: 1px solid #DD0318;
        color: #DD0318;
    }

        .text-field.error::-webkit-input-placeholder {
            color: rgba(221, 3, 24, 0.2);
        }

        .text-field.error:-moz-placeholder {
            color: rgba(221, 3, 24, 0.2);
        }

        .text-field.error::-moz-placeholder {
            color: rgba(221, 3, 24, 0.2);
        }

        .text-field.error:-ms-input-placeholder {
            color: rgba(221, 3, 24, 0.2);
        }

.text-field-group {
    margin: 10px 0;
    overflow: hidden;
    border-radius: 3px;
}

    .text-field-group .text-field {
        margin: 0;
        border-radius: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
    }

        .text-field-group .text-field:first-child {
            border: none;
        }

.input-placeholder input {
    max-width: 100% !important;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding-right: 10px !important;
    padding-left: 10px !important;
    height: 40px;
}

/******************************************/
/*              COLLABORATION             */
/******************************************/
.hr {
    display: block;
    height: 14px;
    background: #f5f5f5;
    border: none;
    margin: 40px 0;
}

.icon {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-image: url(../img/sprites.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
}

.view {
    background: #fff;
    position: fixed;
    top: 60px;
    left: 50px;
    right: 0px;
    bottom: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    display: none;
    z-index: 59;
    overflow: hidden;
}

    .view.client-side {
        left: 0 !important;
    }

.rtl .view {
    left: 0;
    right: 50px;
    -webkit-box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.1);
}

    .rtl .view.client-side {
        left: 0 !important;
        right: 0 !important;
        -webkit-box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.1);
    }

.view.active {
    display: block;
}

.view.full {
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.view.full-screen {
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.conversations {
    position: relative;
    height: 100%;
}

    .conversations .compose .clip {
        display: inline-block;
        width: 60px;
        height: 45px;
        background-image: url(../img/attach.png);
        background-repeat: no-repeat;
        background-size: 25px;
        background-position: center center;
    }

    .conversations.client-side .chat {
        top: 0;
        padding-top: 20px;
        width: 100%;
    }

    .conversations.client-side .messages {
        padding-top: 10px;
        bottom: 64px;
    }

        .conversations.client-side .messages.full {
            bottom: 0px;
        }

    .conversations .compose {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        -webkit-box-shadow: 0px -2px 10px 2px rgba(0, 0, 0, 0.05);
        box-shadow: 0px -2px 10px 2px rgba(0, 0, 0, 0.05);
        width: 100%;
        z-index: 200;
    }

        .conversations .compose .clip, .attachment-icon {
            position: absolute;
            right: 25px;
            cursor: pointer;
        }

        .conversations .compose .compose-field,
        .compose.client-side .compose-field {
            position: relative;
            height: 45px;
            border: 1px solid #d4d4d4;
            border-radius: 5px;
        }

            .conversations .compose .compose-field .text-field,
            .compose.client-side .compose-field .text-field {
                margin: 0px;
                padding-right: 80px;
                line-height: 32px;
                padding-top: 0;
                margin-top: 5px !important;
                margin-left: 5px !important;
                padding-right: 0 !important;
                padding: 0 15px;
                width: calc(100% - 70px);
                max-height: 35px;
                overflow-y: auto;
                overflow-x: hidden;
            }

.rtl .compose.client-side .compose-field {
    left: 50px;
    right: auto;
}

    .rtl .conversations .compose .compose-field .text-field,
    .rtl .compose.client-side .compose-field .text-field {
        margin: 0px;
        line-height: 18px;
        padding-top: 0;
        margin-top: 5px !important;
        margin-right: 5px !important;
        padding-left: 0 !important;
        padding: 0 15px;
        width: calc(100% - 70px);
        overflow-y: auto;
        overflow-x: hidden;
    }

.conversations .compose .compose-field .btn-field,
.conversations .compose .compose-field .lightico-gradient,
.compose.client-side .compose-field .btn-field,
.compose.client-side .compose-field .lightico-gradient {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0px;
    padding: 0 20px;
    font-size: 14px;
    margin: 0;
}

.view.active #show-files img {
    transition: transform ease-in-out .4s;
    -moz-transition: transform ease-in-out .4s;
    -o-transition: transform ease-in-out .4s;
    -ms-transition: transform ease-in-out .4s;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.view.active.side-view #show-files img {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}

.rtl .view.active #show-files img {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
}

.rtl .view.active.side-view #show-files img {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
}

.conversations .co-browse {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    width: 400px;
    z-index: 50;
    background: #fff;
    overflow: hidden;
    text-align: center;
}

    .conversations .co-browse iframe {
        position: absolute;
        top: 50px;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(100% - 50px);
        width: 100%;
    }

.conversations .chat {
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    background: #fff;
    overflow: hidden;
}

.conversations .current {
    min-height: 100px;
    height: 100px;
    line-height: 100px;
    overflow: hidden;
    padding: 0 0 0 15px;
    color: #3e4554;
    font-size: 16px;
    margin: 0;
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,.1);
    width: 70%;
}

    .conversations .current .command.btn-field.reposition {
        position: absolute;
        bottom: 0 !important;
        top: 60px;
        left: auto;
        right: 25px;
    }

    .conversations .current .status {
        height: 36px;
        line-height: 36px;
        width: 36px;
        border-radius: 20px;
        color: #cfcfcf;
        font-size: 20px;
        background: #cfcfcf;
        vertical-align: middle;
        text-align: center;
        margin-right: 10px;
        position: relative;
    }

        .conversations .current .status.online {
            color: #fff;
            background: #00b4b5;
        }

    .conversations .current .contact {
        font-weight: normal;
        opacity: 0.8;
    }

        .conversations .current .contact:after {
            content: "/";
            display: inline-block;
            margin: 0 15px;
        }

    .conversations .current .phone {
        font-weight: normal;
        opacity: 0.8;
        position: absolute;
        direction: ltr;
    }

    .conversations .current .command {
        padding: 0 20px;
        font-weight: normal;
        cursor: pointer;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }

.conversations .messages {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    padding: 10px;
    padding-top: 0;
    overflow-y: scroll; /* has to be scroll, not auto */
    -webkit-overflow-scrolling: touch;
    bottom: 95px;
}

    .conversations .messages .message {
        width: 100%;
        display: inline-block;
        clear: both;
        position: relative;
        margin-bottom: 10px;
        margin-top: 10px;
    }

        .conversations .messages .message .message-thumb {
            display: inline-block;
            float: left;
            clear: both;
            width: 30%;
            max-width: 150px;
            margin-right: 15px;
        }

        .conversations .messages .message .message-details {
            float: left;
            max-width: 100%;
            width: calc(70% - 15px);
            /*padding-left: 15px;*/
        }

        .conversations .messages .message.resend .resend {
            opacity: 1;
        }

        .conversations .messages .message .resend {
            position: absolute;
            background: #40c1e5;
            z-index: 15;
            color: #fff;
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            padding: 0 2px 0 10px;
            -webkit-box-shadow: -2px 5px 10px 1px rgba(0, 0, 0, 0.1);
            box-shadow: -2px 5px 10px 1px rgba(0, 0, 0, 0.1);
            opacity: 0;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            cursor: pointer;
        }

        .conversations .messages .message .avatar {
            max-width: 45px;
            float: left;
            position: relative;
        }

            .conversations .messages .message .avatar .pic {
                width: 100%;
                margin: 0 auto;
                display: block;
                border-radius: 100px;
                border: 1px solid rgba(62, 69, 84, 0.1);
            }

            .conversations .messages .message .avatar .name {
                position: absolute;
                display: block;
                margin-top: 10px;
                text-align: center;
                font-size: 11px;
                top: 100%;
                left: -15px;
                right: -15px;
            }

    .conversations .messages:not(.me) .message .content {
        padding: 10px 15px;
        position: relative;
        width: 65%;
        max-width: 500px;
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 40px;
        background: #fff;
        border: 1px solid #0890bb;
        float: left;
        border-radius: 15px;
        box-shadow: -1px 2px 10px 1px rgba(0,0,0,.1);
    }

    .conversations .messages .message:not(.me) .content:before {
        left: -9px;
        right: auto;
        background: #fff;
        border: 1px solid #0890bb;
        z-index: 10;
        border-right: none;
        border-top: none;
    }

    .conversations .messages.me .message .content {
        background: #f4f4f4;
        padding: 10px 15px;
        position: relative;
        width: 80%;
        max-width: 500px;
        float: left;
        margin-left: 20px;
        margin-right: 20px;
        padding-top: 30px;
    }

    .conversations .messages .message .content:before {
        content: "";
        display: block;
        height: 15px;
        width: 15px;
        background: #f4f4f4;
        position: absolute;
        top: 20px;
        left: -8px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border: 1px solid #0890bb;
    }

    .conversations .messages .message .content .text {
        font-size: 14px;
        display: block;
        word-wrap: break-word;
        white-space: pre-line;
        float: none;
        position: relative;
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .conversations .messages .message .content .text span {
            margin-bottom: 10px;
            display: block;
        }

    .conversations .messages .message .content span.attachment-pending {
        height: 20px;
        width: 30px;
        background-repeat: no-repeat;
        background-image: url(../img/action-sign-grey.png);
        background-position: left top;
        background-size: 25px;
        float: left;
    }

    .conversations .messages .message .content span.attachment-photo {
        height: 25px;
        width: 30px;
        background-repeat: no-repeat;
        background-image: url(../img/action-photo-grey.png);
        background-position: left top;
        background-size: 25px;
        float: left;
    }

    .conversations .messages .message .content span.attachment-signed {
        height: 20px;
        width: 30px;
        background-repeat: no-repeat;
        background-image: url(../img/status-complete.png);
        background-position: left top;
        background-size: 20px;
        float: left;
    }

    .conversations .messages .message .content .time {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 13px;
        opacity: 0.5;
    }

    .conversations .messages .message .content .message-details .time i.fa.fa-clock-o {
        margin-right: 5px;
        margin-left: 5px;
    }

    .conversations .messages .message .content .attachement .preview {
        position: relative;
        width: auto;
        max-width: 100%;
        vertical-align: middle;
        display: block;
    }

    .conversations .messages .message .content .payment-message-title {
        display: table;
        width: 100%;
        margin-bottom: 20px;
        width: 100%;
        display: flex;
        flex-direction: row;
        font-size: 14px;
    }

        .conversations .messages .message .content .payment-message-title span.text {
            flex-grow: 0.2;
        }

        .conversations .messages .message .content .payment-message-title::after {
            content: "";
            clear: both;
        }

    .conversations .messages .message .content .attachement.pdf:after {
        width: 47px;
        margin-left: -22px;
        background-position: -55px;
    }

    .conversations .messages .message .content .attachement.photo:before {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        right: -40px;
        height: 60px;
        width: 120px;
        background: #40c1e5;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background-repeat: no-repeat;
        background-image: url(../img/action-photo.png);
        background-position: 45px 20px;
        background-size: 35px;
        z-index: 2;
    }

    .conversations .messages .message .content .attachement.pdf:before {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        right: -40px;
        height: 60px;
        width: 120px;
        background: #40c1e5;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background-repeat: no-repeat;
        background-image: url(../img/action-tick.png);
        background-position: 45px 20px;
        background-size: 35px;
        z-index: 2;
    }

    .conversations .messages .message .content .attachement .message-payment-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .conversations .messages .message .content .attachement.payment:before {
        content: "";
        display: block;
        position: absolute;
        top: -10px;
        right: -40px;
        height: 60px;
        width: 120px;
        background: #40c1e5;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        background-repeat: no-repeat;
        background-image: url(../img/qg-card.png);
        background-position: 45px 20px;
        background-size: 35px;
        z-index: 2;
    }

    .conversations .messages .message .content .attachement.photo {
        height: auto;
    }

        .conversations .messages .message .content .attachement.photo .download .preview {
            display: block;
        }

    .conversations .messages .message .content .upload {
        display: block;
        border-radius: 10px;
        max-width: 150px;
        background: #E6E6E6;
        margin: 0;
        position: relative;
        top: 0;
        z-index: 1;
    }

        .conversations .messages .message .content .upload .progress {
            content: "";
            display: block;
            height: 6px;
            border-radius: 10px;
            position: absolute;
            max-width: 100%;
        }

    .conversations .messages .message .status {
        font-size: 14px;
        text-align: right;
        display: block;
        padding-top: 15px;
        clear: both;
        padding-bottom: 15px;
    }

    .conversations .messages .message .content .workflow-status {
        position: absolute;
        bottom: 0px;
        left: 100px;
        right: 0;
        font-size: 14px;
        text-align: center;
        clear: both;
        padding-bottom: 15px;
        color: #808080;
    }

    .conversations .messages .message.me .avatar {
        float: right;
    }

    .conversations .messages .message.me .content:before {
        left: auto;
        right: -9px;
        background: #fff;
        border: 1px solid #4e38a1;
        z-index: 10;
        border-left: none;
        border-bottom: none;
    }

    .conversations .messages .message.me .content {
        background: #fff;
        border: 1px solid #4e38a1;
        float: right;
        border-radius: 15px;
        box-shadow: -1px 2px 10px 1px rgba(0,0,0,.1);
    }

    .conversations .messages .message .content button.message-payment-button {
        height: 30px;
        font-size: 16px;
        cursor: pointer;
        color: #fff;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        border-radius: 25px !important;
        border: 1px solid #00b4b5;
        min-width: 80px;
        vertical-align: middle;
    }

    .conversations .messages .message .content .payment-await {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 15px;
        align-items: center;
        justify-content: center;
        margin-bottom: 5px;
    }

        .conversations .messages .message .content .payment-await .dot {
            border: 1px solid #00b6b5;
            border-radius: 100%;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            animation-name: toggle-color;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

            .conversations .messages .message .content .payment-await .dot:nth-child(1) {
                animation-delay: .5s;
            }

            .conversations .messages .message .content .payment-await .dot:nth-child(2) {
                animation-delay: 1s;
            }

            .conversations .messages .message .content .payment-await .dot:nth-child(3) {
                animation-delay: 1.5s;
            }

.rtl .conversations .messages .message .message-thumb {
    float: right;
    margin-left: 0;
    margin-right: 0;
}

.rtl .conversations .messages .message .message-details {
    float: right;
}

.rtl .conversations .messages .message:not(.me) .content:before {
    right: -9px;
    left: auto;
    background: #fff;
    z-index: 10;
    border-right: 1px solid #4e38a1;
    border-top: 1px solid #4e38a1;
    border-left: none !important;
    border-bottom: none !important;
}

.rtl .conversations .messages .message .content .text {
    font-size: 14px;
    font-weight: normal;
    display: block;
    word-wrap: break-word;
    white-space: pre-line;
    float: none;
    position: relative;
    margin-top: 2px;
}

.rtl .conversations .messages .message .content span.attachment-pending {
    height: 25px;
    width: 30px;
    background-repeat: no-repeat;
    background-image: url(../img/action-sign-grey.png);
    background-position: right top;
    background-size: 25px;
    float: right;
}

.rtl .conversations .messages .message .content span.attachment-photo {
    height: 25px;
    width: 30px;
    background-repeat: no-repeat;
    background-image: url(../img/action-photo-grey.png);
    background-position: right top;
    background-size: 25px;
    float: right;
}

.rtl .conversations .messages .message .content span.attachment-signed {
    height: 20px;
    width: 30px;
    background-repeat: no-repeat;
    background-image: url(../img/status-complete.png);
    background-position: right top;
    background-size: 20px;
    float: right;
}

.rtl .conversations .messages .message .content span.workflow-status {
    text-align: center;
    right: 100px;
    left: 0;
}

.rtl .conversations .messages .message .avatar {
    float: right;
}

.rtl .conversations .messages .message .content {
    float: right;
}

    .rtl .conversations .messages .message .content:before {
        left: auto;
        right: -8px;
        background: #fff;
        border-left: 1px solid #4e38a1;
        border-bottom: 1px solid #4e38a1;
    }

    .rtl .conversations .messages .message .content .time {
        right: 10px;
        left: auto;
    }

.rtl .conversations .messages .message .status {
    text-align: left;
}

.rtl .conversations .messages .message.me .avatar {
    float: left;
}

.rtl .conversations .messages .message.me .content:before {
    left: -8px;
    right: auto;
    background: #fff;
    z-index: 10;
    border-right: none;
    border-top: none;
}

.rtl .conversations .messages .message.me .content {
    background: #fff;
    float: left;
}

.rtl .conversations .compose {
    padding: 10px 20px 10px 70px;
}

    .rtl .conversations .compose .clip {
        left: 40px;
        right: auto;
        top: 10px;
    }

    .rtl .conversations .compose .compose-field .btn-field,
    .rtl .compose.client-side .compose-field .btn-field {
        right: auto;
        left: 0;
        border-right: 1px solid #00b4b5 !important;
    }

.rtl .conversations .chat {
    left: auto;
    right: 0;
}

.rtl .conversations .current {
    padding: 0 20px 0 0;
}

    .rtl .conversations .current .status {
        margin-right: 0;
        margin-left: 10px;
    }

    .rtl .conversations .current .command {
        float: left;
    }

    .rtl .conversations .current .actions {
        float: left;
    }

        .rtl .conversations .current .actions:before, .rtl .conversations .current .actions:after {
            left: auto;
            right: -7px;
            transform: skew(-30deg);
        }

        .rtl .conversations .current .actions:after {
            transform: skew(30deg);
        }

/******************************************/
/*            ATTACHMENT PANEL            */
/******************************************/
.attachement {
    display: inline-block;
    background: #fafafa;
    border: 1px solid rgba(62, 69, 84, 0.2);
    width: 100%;
    max-width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
    cursor: default;
    border-radius: 10px;
    margin-right: 15px;
    margin-top: 5px;
}

    .attachement .msg-attachment-panel {
        position: absolute;
        bottom: 0;
        height: 30px;
        z-index: 999999;
        width: 100%;
    }

        .attachement .msg-attachment-panel span, .attachement .msg-attachment-panel a {
            bottom: 0;
            z-index: 100;
            cursor: pointer;
            background-color: transparent;
            width: 35px;
            height: 30px;
            justify-content: center;
            display: flex;
            align-items: center;
            color: #fff;
        }

            .attachement .msg-attachment-panel span.file-forward::before {
                content: "";
                position: absolute;
                left: 0;
                width: 1px;
                height: 100%;
                background-color: #4cb4cd;
            }

    .attachement .download-file.inactive {
        opacity: .3;
        pointer-events: none;
    }

    .attachement .preview-file.inactive {
        opacity: .3;
        pointer-events: none;
    }

    .attachement .send-file.inactive {
        opacity: .3;
        pointer-events: none;
    }

    .attachement.action:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: -1px;
        right: 100%;
        width: 200px;
        border-bottom: 1px solid rgba(62, 69, 84, 0.2);
        background: #f4f4f4;
    }

    .attachement .msg-attachment-panel span.download-file {
        position: absolute;
        left: 0px;
    }

    .attachement .msg-attachment-panel span.preview-file {
        position: absolute;
        bottom: 0;
        left: 35px;
    }

    .attachement .msg-attachment-panel span.send-file {
        position: absolute;
        left: 70px;
    }

    .attachement .msg-attachment-panel span.delete-file,
    .attachement .msg-attachment-panel span.file-forward {
        position: absolute;
        right: 0;
    }

    .attachement a.download {
        cursor: default;
        position: relative;
        display: block;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80%;
    }

.inactive span.download-icon,
.inactive span.preview-file,
.inactive span.send-file {
    opacity: 0.3;
    pointer-events: none;
}

span.eye-icon {
    background-repeat: no-repeat;
    background-image: url(../img/panel-eye.png);
    background-position: center;
    background-size: 21px;
}

span.download-icon {
    background-repeat: no-repeat;
    background-image: url(../img/panel-download.png);
    background-position: center;
    background-size: 11px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 40px;
}

span.sign-icon {
    background-repeat: no-repeat;
    background-image: url(../img/panel-sign.png);
    background-position: center;
    background-size: 20px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 40px;
}

span.share-icon {
    background-repeat: no-repeat;
    background-image: url(../img/panel-share.png);
    background-position: center;
    background-size: 16px;
    margin-right: 0 !important;
    margin-left: 5px;
}

.rtl .attachement {
    display: inline-block;
    background: #fafafa;
    border: 1px solid rgba(62, 69, 84, 0.2);
    width: 90%;
    max-width: 150px;
    height: 150px;
    position: relative;
    overflow: hidden;
    cursor: default;
    border-radius: 10px;
    float: right;
    margin-right: 0;
    margin-left: 15px;
}

    .rtl .attachement .msg-attachment-panel span.preview-file {
        position: absolute;
        bottom: 0;
        left: 30px;
    }

    .rtl .attachement .msg-attachment-panel span.send-file {
        left: 60px;
    }

    .rtl .attachement .msg-attachment-panel span.file-forward::before {
        content: "";
        position: absolute;
        top: 0;
        left: 5px;
        width: 1px;
        height: 100%;
        background-color: #4cb4cd;
    }

.client-page.rtl .attachement .msg-attachment-panel span.preview-file {
    left: 30px;
}

div[data-workflow-type="photo"] img.preview {
    width: 100% !important;
    height: auto !important;
}

/******************************************/
/*                PAYMENT                 */
/******************************************/
.payment {
    margin-bottom: 40px;
    clear: both;
}

span.payment-confirmed,
span.green {
    color: green !important;
    font-weight: 600;
}

span.payment-declined,
span.red {
    color: red !important;
    font-weight: 600;
}

span.payment-canceled {
    color: orange !important;
    font-weight: 600;
}

.content .status .green,
.content .status .red,
.content .payment-confirmed,
.content .payment-declined,
.content .payment-pending,
.content .payment-canceled {
    position: absolute;
    bottom: 5px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: 100;
    height: 40px;
    justify-content: center;
    align-items: center;
    color: #808080;
    font-size: 1em;
    width: 100%;
    text-align: center;
}

button.payment-cancel {
    background-color: #fff;
    border: none;
    cursor: pointer;
}

    button.payment-cancel .text-button {
        color: #4e38a1;
        text-decoration: underline;
    }

.rtl button.payment-cancel {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 40px;
    margin-left: 15px;
    margin-right: 3em;
}


/******************************************/
/*                  MODAL                 */
/******************************************/
.modal-form {
    width: 90%;
    margin: 0 auto;
    max-width: 500px;
    background: #fff;
    padding: 20px 30px;
    color: rgba(0, 0, 0, 0.6);
    position: relative;
    display: none;
    border-radius: 5px;
}

    .modal-form.link-iframe {
        max-width: none;
        width: calc(100vw - 20px);
    }

        .modal-form.link-iframe > iframe {
            height: calc(100vh - 60px);
            display: block; /* Because you don't know if the document has altered css rules for iFrames */
            clear: both; /* Because you have no idea what css could be applied to #someDiv - although with position: fixed, this shouldn't be necessary at all... */
            position: relative;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            overflow-x: hidden; /* in case there is a few pixels spillage from padding, you don't want a horizontal scroll bar. */
            overflow-y: auto; /* Only gives the scroll bar if needed.*/
        }

    .modal-form.active {
        display: block;
    }

    .modal-form .description {
        text-align: left;
        font-size: 14px;
        line-height: 20px;
        display: inline-block;
        position: relative;
        width: 100%;
    }

    .modal-form .communication-select {
        display: block;
        height: 40px;
        width: 70px;
        cursor: pointer;
        border-radius: 40px;
        border: 1px solid #00b4b5;
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
        font-size: 0;
        margin-top: 10px;
        float: right;
    }

        .modal-form .communication-select .fa {
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            border-radius: 40px;
            width: 34px;
            float: left;
            color: #00b4b5;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            position: relative;
            z-index: 2;
        }

            .modal-form .communication-select .fa.fa-phone {
                color: #fff;
            }

        .modal-form .communication-select .selector {
            z-index: 1;
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            height: 34px;
            width: 33px;
            border-radius: 40px;
            display: block;
            background: #00b4b5;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            box-shadow: 0px 0px 10px rgba(0,0,0,.5);
        }

        .modal-form .communication-select input[type="checkbox"] {
            display: none;
        }

            .modal-form .communication-select input[type="checkbox"]:checked + .fa-phone {
                color: #00b4b5;
            }

                .modal-form .communication-select input[type="checkbox"]:checked + .fa-phone + .fa-at {
                    color: #fff;
                }

                    .modal-form .communication-select input[type="checkbox"]:checked + .fa-phone + .fa-at + .selector {
                        left: 33px;
                    }

    .modal-form .close,
    .asset-modal .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 18px;
        opacity: 0.6;
        cursor: pointer;
        line-height: 1;
    }

        .modal-form .close:hover {
            opacity: 1;
        }

    .modal-form .title {
        text-align: left;
        font-size: 20px;
        margin-top: 0;
        padding-bottom: 5px;
        float: left;
        margin-top: 15px;
        margin-bottom: 15px;
    }

        .modal-form .title.with-icon {
            display: inline-block;
            padding: 10px;
            margin-top: 10px;
        }

            .modal-form .title.with-icon .fa {
                color: #40c1e5;
                display: block;
                margin: 0 auto;
                text-align: center;
                font-size: 35px;
                margin-bottom: 20px;
            }

    .modal-form .text-field {
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 30px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .modal-form .body {
        margin-bottom: 30px;
        white-space: pre-line;
    }

    .modal-form .submit {
        display: inline-block;
        width: 100%;
    }

        .modal-form .submit .instructions {
            height: 45px;
            line-height: 45px;
            font-weight: normal;
            font-weight: bold;
            text-transform: uppercase;
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

            .modal-form .submit .instructions .fa {
                font-size: 20px;
                vertical-align: middle;
                padding-right: 4px;
                padding-left: 4px;
            }

        .modal-form .submit .btn-field {
            text-transform: uppercase;
            font-size: 14px;
            float: right;
            border-radius: 2px;
            margin-right: 0;
            margin-left: 15px;
        }

            .modal-form .submit .btn-field.center {
                float: none !important;
            }

        .modal-form .submit .start-conversation, .modal-form .submit .pre-plan {
            float: left;
            height: 40px;
            line-height: 40px;
            font-weight: normal;
            color: #00b4b5;
            font-size: 11px;
            font-weight: bold;
            text-transform: uppercase;
            cursor: pointer;
        }

            .modal-form .submit .start-conversation img {
                vertical-align: middle;
                margin-right: 5px;
            }

        .modal-form .submit .start-conversation, .modal-form .submit .pre-plan {
            float: left;
        }

        .modal-form .submit .instructions .btn-field:hover {
            color: #fff;
        }

    .modal-form a.close-confirmation-payment {
        position: absolute;
        right: 10px;
        top: 10px;
        text-decoration: none;
        color: #00b4b5;
        font-weight: bold;
        left: auto;
    }

.rtl .modal-form .title {
    text-align: right;
    float: right;
}

.rtl .modal-form .communication-select {
    float: left;
}

.rtl .modal-form .submit .start-conversation, .rtl .modal-form .submit .pre-plan {
    float: right;
}

.rtl .modal-form .submit .start-conversation, .rtl .modal-form .submit .pre-plan {
    float: right;
}

.rtl .modal-form .submit .instructions {
    height: 45px;
    line-height: 45px;
    font-weight: normal;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.rtl .modal-form a.close-confirmation-payment {
    left: 10px;
    right: auto;
}

button#spanSendMessage.btn-field, button#buttonSendText.btn-field {
    cursor: pointer;
    height: 42px;
    line-height: 42px;
    color: #fff;
    border: none;
    outline: none;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    border-radius: 0 !important;
    background-image: url(../img/send.png);
    background-repeat: no-repeat;
    background-position: 0px 3px;
    background-color: transparent;
    width: 53px;
    padding: 0;
    min-width: 53px;
}

#modalSendPayment button#buttonSendPaymentRequest {
    min-width: 150px;
    padding: 0 5px;
}

.modal-view {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(62, 69, 84, 0.5);
    z-index: 999999;
    display: table;
    text-align: center;
    display: none;
}

    .modal-view.visible {
        display: table;
    }

    .modal-view .modal-view-wrapper {
        display: table-cell;
        vertical-align: middle;
    }

/******************************************/
/*              RECONNECTING              */
/******************************************/

.modal-reconnecting {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(62, 69, 84, 0.5);
    z-index: 9999999;
    display: table;
    text-align: center;
    display: none;
}

    .modal-reconnecting.visible {
        display: table;
    }

    .modal-reconnecting .modal-reconnecting-wrapper {
        display: table-cell;
        vertical-align: middle;
    }

#header.client {
    height: 60px;
    line-height: 60px;
    background: #dee0e2;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.client .upload {
    width: 30px;
    height: 30px;
    background-position: -101px;
    cursor: pointer;
    position: absolute;
    top: 15px;
    left: 15px;
}

.client .profile {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    bottom: 0;
}

    .client .profile .pic {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        max-height: 60px;
        position: absolute;
        right: 0;
        left: 0;
    }

    .client .profile .credits {
        font-size: 12px;
        text-align: center;
        display: block;
        height: 30px;
        line-height: 30px;
        margin: 0 15px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.6);
    }

        .client .profile .credits .credit-logo {
            display: inline-block;
            height: 20px;
            width: 100px;
            vertical-align: middle;
            background-image: url(../img/credits-logo.png);
            background-repeat: no-repeat;
            background-size: auto 100%;
            background-position: center;
        }

    .client .profile .chat-settings {
        position: absolute;
        top: 10px;
        left: 0;
        font-size: 35px;
        transform: rotate(90deg);
        z-index: 99999999;
        display: block;
        width: 50px;
        height: 100%;
        right: auto;
        cursor: pointer;
        display: none;
    }

    .client .profile .chat-settings-container {
        position: absolute;
        top: 60px;
        display: none;
    }

        .client .profile .chat-settings-container.active {
            display: block;
        }

        .client .profile .chat-settings-container span {
            width: 220px;
            height: 40px;
            background-color: #fff;
            color: #00b4b5;
            border: 1px solid #00b4b5;
            cursor: pointer;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .client .profile .chat-settings-container span:hover {
                background-color: #00b4b5;
                color: #fff;
                border: 1px solid #00b4b5;
            }

.rtl .client .profile {
    z-index: 99;
}

    .rtl .client .profile .chat-settings {
        position: absolute;
        top: 10px;
        right: 0;
        font-size: 35px;
        transform: rotate(90deg);
        z-index: 99999999;
        display: block;
        width: 15px;
        height: 100%;
        left: auto;
        cursor: pointer;
        display: none;
    }

.client .status {
    position: absolute;
    right: 25px;
    top: 10px;
    background: #C9C9C9;
    color: #c9c9c9;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    height: 35px;
    line-height: 35px;
    width: 35px;
    border-radius: 100%;
    font-size: 20px;
    text-align: center;
}

    .client .status.online {
        color: #fff;
        background: #00b4b5;
    }

.sign-form[step="start"] .description {
    text-align: center;
}

.sign-form[step="start"] .btn-field {
    float: none;
    border-radius: 0px;
    text-transform: uppercase;
    font-size: 14px;
}

.sign-form {
    text-align: left;
}

    .sign-form[step="review"] .close {
        color: #fff;
        top: -10px;
        right: 0;
    }

    .sign-form[step="review"] [step="review"] {
        position: relative;
        height: 100%;
        width: 100%;
    }

    .sign-form .signatures li {
        z-index: 3;
        position: relative;
        display: inline-block;
        float: left;
        width: 30px;
        height: 30px;
        line-height: 25px;
        border: 2px solid #fff;
        border-radius: 30px;
        color: #fff;
        background: #40c1e5;
        margin: 0 10px;
    }

        .sign-form .signatures li.done {
            position: relative;
            overflow: hidden;
            background: #3e4554;
        }

            .sign-form .signatures li.done:after {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(62, 69, 84, 0.5);
                content: "✔";
            }

    .sign-form .signatures .progress {
        float: right;
        margin-top: 5px;
        color: #fff;
        font-size: 12px;
        text-transform: capitalize;
        text-shadow: 0 0 2px #000;
    }

    .sign-form[step="review"] [step="review"] #document-to-sign {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 101;
    }

.submit-signatures {
    position: fixed;
    z-index: 102;
    bottom: 70px;
    font-size: 14px;
    color: #fff;
    background: #40c1e5;
    width: 200px;
    height: 60px;
    line-height: 60px;
    left: 50%;
    margin-left: -100px;
    cursor: pointer;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    font-weight: normal;
    text-transform: uppercase;
    text-align: center;
}

.approve-reading:hover {
    background: #1dadd5;
}

.signature-pad > div > .controls {
    text-align: left;
    position: relative;
}

    .signature-pad > div > .controls:before {
        content: "Signature here";
        position: absolute;
        top: 0;
        color: rgba(0, 0, 0, 0.3);
        text-transform: capitalize;
        height: 20px;
        width: 150px;
        font-size: 16px;
        line-height: 20px;
        top: 90px;
        left: 50%;
        margin-left: -75px;
        text-align: center;
    }

    .signature-pad > div > .controls:hover:before {
        display: none;
    }

.signature-pad-form {
    max-width: calc(100vw - 20px) !important;
}

    .signature-pad-form .controls {
        left: -20px;
        position: relative;
        max-width: 100%;
    }

    .signature-pad-form .signature-pad-header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding-right: 25px;
        padding-left: 25px;
    }

        .signature-pad-form .signature-pad-header .signature-control {
            float: right;
        }

            .signature-pad-form .signature-pad-header .signature-control .signature-pen {
                position: relative;
                display: inline-block;
                text-decoration: none;
                background-size: 40px;
                background-position: center;
                background-image: url(../img/icons/hand_writing.png);
                background-repeat: no-repeat;
                width: 64px;
                height: 64px;
            }

            .signature-pad-form .signature-pad-header .signature-control .signature-keyboard {
                position: relative;
                display: inline-block;
                text-decoration: none;
                background-size: 50px;
                background-position: center;
                background-image: url(../img/icons/keyboard.png);
                background-repeat: no-repeat;
                width: 64px;
                height: 64px;
            }

                .signature-pad-form .signature-pad-header .signature-control .signature-keyboard.active:after,
                .signature-pad-form .signature-pad-header .signature-control .signature-pen.active:after {
                    content: "";
                    background-color: #00b4b5;
                    height: 3px;
                    position: absolute;
                    bottom: 0;
                    display: inline-block;
                    width: 50%;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    transition: background-color ease-in-out .4s;
                    -moz-transition: background-color ease-in-out .4s;
                    -webkit-transition: background-color ease-in-out .4s;
                    -o-transition: background-color ease-in-out .4s;
                    -ms-transition: background-color ease-in-out .4s;
                }

    .signature-pad-form .keyboard-signature,
    .signature-pad-form .corporate-stamp {
        padding-right: 25px;
        padding-left: 25px;
    }

.corporate-stamp ~ .controls {
    left: 0;
    right: 0;
}

.modal-form.signature-pad-form.active > div {
    margin-left: -15px;
    margin-right: -15px;
}

.rtl .signature-pad-form .controls {
    left: 20px !important;
}

canvas.keyboard-signature-pad,
.signature-pad {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

canvas.keyboard-signature-pad {
    display: none;
}

.controls .signature-pad-text, .controls .signature-pad-text-file {
    width: auto;
    height: auto;
    position: absolute;
    top: 10%;
    font-size: 3em;
    background: inherit;
    pointer-events: none;
    z-index: 99999;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.controls .signature-pad-text-file {
    top: 30% !important;
}


@media (max-width: 480px) {
    .controls .signature-pad-text, .controls .signature-pad-text-file {
        font-size: 2em;
        /*left: 25%;*/
    }
}

#save-signature, #clear-signature {
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 0px;
}

#clear-signature {
    color: #00b4b5;
    background: #fff;
    border-color: #fff;
}

/*.quick-group {
    padding: 0px;
    margin-bottom: 30px;
}

    .quick-group .group-name {
        font-size: 14px;
        padding-left: 30px;
    }

    .quick-group .quick-links {
        list-style: none;
        padding: 0 30px;
        margin: 0;
        display: inline-block;
        width: 100%;
    }

        .quick-group .quick-links li {
            float: left;
            display: inline-block;
            width: 50%;
            padding: 5px;
            position: relative;
        }

            .quick-group .quick-links li:after {
                content: "";
                display: block;
                padding-bottom: 100%;
            }

            .quick-group .quick-links li .link-content {
                display: block;
                position: absolute;
                top: 5px;
                left: 5px;
                bottom: 5px;
                right: 5px;
                background: #3e4554;
                color: #fff;
                font-size: 16px;
                cursor: pointer;
                -webkit-transition-duration: 0.3s;
                transition-duration: 0.3s;
                text-align: center;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 40%;
                background-image: url(../img/qg-link.png);
                font-size: 0;
            }

                .quick-group .quick-links li .link-content.photo {
                    background-image: url(../img/qg-photo.png);
                }

                .quick-group .quick-links li .link-content.video {
                    background-image: url(../img/qg-video.png);
                }

                .quick-group .quick-links li .link-content.location {
                    background-image: url(../img/qg-location.png);
                }

                .quick-group .quick-links li .link-content.card {
                    background-image: url(../img/qg-card.png);
                }

                .quick-group .quick-links li .link-content:hover {
                    background-color: #40c1e5;
                }*/

.cube1, .cube2 {
    background-color: #00b4b5;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
    animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
    background: #1170c6;
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

/* RTL */
.rtl {
    direction: rtl;
    text-align: right;
}

    .rtl .mCSB_inside > .mCSB_container {
        margin-right: 0;
        margin-left: 20px;
    }

    .rtl .mCSB_scrollTools {
        right: auto;
        left: 0;
    }

    .rtl .modal-form .description {
        text-align: right;
    }

    .rtl .modal-form .close,
    .rtl .asset-modal .close {
        right: auto;
        left: 15px;
    }

    .rtl .modal-form .title {
        text-align: center;
    }

    .rtl .modal-form .submit .instructions {
        float: right;
    }

    .rtl #modalSendPayment.modal-form .submit .instructions {
        float: left;
    }

    .rtl .modal-form .submit .btn-field {
        float: left;
        margin-left: 0;
        margin-right: 15px;
    }

        .rtl .modal-form .submit .btn-field.center {
            float: none !important;
        }

    .rtl .sign-form[step="start"] .btn-field {
        float: none;
    }

    .rtl .sign-form[step="confirm"] .controls {
        text-align: right;
    }

    .rtl .sign-form[step="review"] .close {
        right: auto;
        left: 0;
    }

    .rtl .sign-form[step="review"] [step="review"] .signatures:before {
        left: auto;
        right: 50px;
    }

    .rtl .sign-form[step="review"] [step="review"] .signatures li {
        float: right;
    }

    .rtl .sign-form[step="review"] [step="review"] .signatures .progress {
        float: left;
    }

    .rtl .client .upload {
        left: auto;
        right: 15px;
    }

    .rtl .client .status {
        right: auto;
        left: 25px;
    }

    .rtl .recent-conversations .recent-message .contact .status {
        left: auto;
        right: 5px;
    }

    .rtl .recent-conversations .recent-message .contact .number {
        left: 5px;
        margin-top: 3px;
        right: auto;
    }

    .rtl .recent-conversations .recent-message .activity {
        padding: 0 10px 20px 50px;
    }

        .rtl .recent-conversations .recent-message .activity .msg .msg-type {
            float: right;
            margin-right: 0;
            margin-left: 10px;
        }

        .rtl .recent-conversations .recent-message .activity .count {
            right: auto;
            left: 0;
        }

    .rtl .files {
        left: -50%;
        right: auto;
        margin-left: 0;
        margin-right: 20px;
    }

        .rtl .files .browser ul {
            padding-right: 0;
            padding-left: 0;
        }
            /*.rtl .files .browser ul .fa {
            float: right;
            margin-top: 10px;
            margin-right: 22px;
        }*/
            .rtl .files .browser ul .name:after {
                transform-origin: 0% 50%;
            }

        .rtl .files .browser .file:after {
            right: auto;
            left: 100%;
        }

        .rtl .files .browser .file .file-action {
            right: -10px;
            left: auto;
            margin-top: 2px;
            float: right;
        }

    .rtl li.file {
        padding-right: 30px !important;
    }

    .rtl .search-messages .search-field {
        float: right;
        margin-right: 0;
        margin-left: 8px;
    }

    .rtl .search-messages .search-field, .rtl .search-files .search-field {
    }

    .rtl .search-field .fa-search {
        right: auto;
        left: 10px;
    }

    .rtl .header .account {
        float: left;
        margin-left: 40px;
        margin-right: auto;
    }

        .rtl .header .account .options {
            right: auto;
            left: 0;
        }

            .rtl .header .account .options .option {
                padding: 0 40px 0 20px;
                text-align: right;
                min-width: 180px;
            }

                .rtl .header .account .options .option .fa {
                    left: auto;
                    right: 15px;
                }

    .rtl #confirm_payment {
        display: flex;
        justify-content: center;
        align-items: center;
    }

/*Justin*/
.hidden {
    display: none !important;
}

.controls .corporate-name {
    position: absolute;
    left: 25%;
    top: 35%;
    font-size: 40px;
    width: 50%;
    line-height: 0.9;
    word-break: break-word;
    color: rgba(0, 0, 0, 0.3);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.controls .corporate-file-number {
    position: absolute;
    left: 0;
    top: 60%;
    font-size: 40px;
    width: 100%;
    color: rgba(0, 0, 0, 0.3);
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.blueimp-gallery > .imageCaption {
    position: absolute;
    top: 10px;
    display: none;
    right: 170px;
    width: 200px;
}

.blueimp-gallery > .editor {
    position: fixed;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    background: #000;
    line-height: 60px;
    font-size: 14px;
    color: #fff;
}

    .blueimp-gallery > .editor .editor-container {
        width: 100%;
        margin: 0 20px;
        position: relative;
    }

    .blueimp-gallery > .editor .controls {
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
    }

        .blueimp-gallery > .editor .controls .control {
            display: inline-block;
            height: 50px;
            line-height: 50px;
            cursor: pointer;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            opacity: 0.9;
        }

            .blueimp-gallery > .editor .controls .control.active {
                color: #116fc6;
            }

            .blueimp-gallery > .editor .controls .control:hover {
                opacity: 1;
            }

            .blueimp-gallery > .editor .controls .control:first-of-type {
                padding-right: 20px;
                position: relative;
            }

                .blueimp-gallery > .editor .controls .control:first-of-type:after {
                    position: absolute;
                    content: "";
                    display: block;
                    width: 1px;
                    top: 10px;
                    bottom: 10px;
                    right: 0;
                    background: #fff;
                    opacity: 0.5;
                }

            .blueimp-gallery > .editor .controls .control .control-ico {
                display: inline-block;
                height: 50px;
                width: 50px;
                vertical-align: middle;
                background-image: url(../img/ico-pen.png);
                background-repeat: no-repeat;
                background-size: 70%;
                background-position: center;
            }

                .blueimp-gallery > .editor .controls .control .control-ico.ico-text {
                    background-image: url(../img/ico-text.png);
                }

                .blueimp-gallery > .editor .controls .control .control-ico.ico-list {
                    background-image: url(../img/ico-list.png);
                }

                .blueimp-gallery > .editor .controls .control .control-ico.ico-tick {
                    background-image: url(../img/ico-tick.png);
                }

                .blueimp-gallery > .editor .controls .control .control-ico.ico-close {
                    background-size: 50%;
                    background-image: url(../img/ico-close.png);
                }

    .blueimp-gallery > .editor .btn-field {
        position: fixed;
        top: 15px;
        right: 80px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        /* text-transform: uppercase; */
        border-radius: 0px;
    }

        .blueimp-gallery > .editor .btn-field.btn-field2 {
            right: 250px;
        }

    .blueimp-gallery > .editor .close-btn {
        display: inline-block;
        height: 60px;
        line-height: 60px;
        width: 60px;
        text-align: center;
        position: fixed;
        top: 0;
        right: 0;
        font-size: 30px;
        cursor: pointer;
        opacity: 0.6;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }

        .blueimp-gallery > .editor .close-btn:hover {
            opacity: 1;
        }

#buttonPan,
#buttonDraw,
#buttonDeleteDraw,
#buttonDeleteAllDraws {
    display: none;
}

.share-view #buttonPan,
.share-view #buttonDraw,
.share-view #buttonDeleteDraw,
.share-view #buttonDeleteAllDraws {
    display: inline-block;
}

.rtl .blueimp-gallery.share-view .header-container {
    direction: rtl;
}

.blueimp-gallery > .navigation {
    position: absolute;
    z-index: 103;
    bottom: 74px;
    background: #000;
    color: #fff;
    width: 300px;
    height: 50px;
    border-radius: 50px;
    font-size: 0;
    left: 50%;
    margin-left: -150px;
}

    .blueimp-gallery > .navigation.zoomed-in {
        bottom: 80px;
        width: auto;
        height: 150px;
        left: 10%;
    }

    .blueimp-gallery > .navigation .pages {
        font-size: 16px;
        display: inline-block;
        width: 150px;
        height: 50px;
        line-height: 50px;
        float: left;
        text-align: right;
        border-right: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0 15px;
    }

    .blueimp-gallery > .navigation.zoomed-in .pages {
        display: none;
    }

    .blueimp-gallery > .navigation .pages .count {
        margin: 0 10px;
        letter-spacing: 12px;
    }

    .blueimp-gallery > .navigation .controls {
        display: inline-block;
        height: 50px;
        line-height: 50px;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 150px;
        float: left;
    }

    .blueimp-gallery > .navigation.zoomed-in .controls {
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;
        width: auto;
        height: auto;
    }

    .blueimp-gallery > .navigation .controls .control {
        vertical-align: middle;
        text-align: center;
        display: inline-block;
        height: 50px;
        width: 50px;
        font-size: 25px;
        cursor: pointer;
        line-height: 50px;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        opacity: 0.8;
    }

        .blueimp-gallery > .navigation .controls .control.zoom {
            background-image: url(../img/action-zoom.png);
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: center;
        }

        .blueimp-gallery > .navigation .controls .control:hover {
            opacity: 1;
        }


.rtl .blueimp-gallery > .close {
    right: auto;
    left: 10px;
}

.rtl .sign-form .signatures li {
    float: right;
}

.rtl .sign-form .signatures .progress {
    float: left;
    margin-top: 5px;
    color: #fff;
    font-size: 12px;
    text-transform: capitalize;
    direction: ltr;
}

.signature-pad-form .input-placeholder {
    position: relative;
    width: 100%;
}

.signature-pad-form .keyboard-signature-name {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}

.signature-pad-form .corporate-stamp {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

    .signature-pad-form .corporate-stamp .text-field {
        float: left;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

        .signature-pad-form .corporate-stamp .text-field:last-of-type {
            float: right;
        }

    .signature-pad-form .corporate-stamp .input-placeholder {
        position: relative;
        width: 48% !important;
    }

.signature-pad-form .input-placeholder.focused label {
    top: -1px !important;
}

.signature-pad-form .input-placeholder label {
    position: absolute;
    z-index: 1;
    top: 0.45rem;
    margin-left: 0;
    pointer-events: none;
    -webkit-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    font-weight: 300;
    color: #333 !important;
    width: auto !important;
}

.rtl .fa-forward:before {
    content: "\f112" !important;
}

.fa-share:before {
    content: "\f112" !important;
}

.rtl .fa-share:before {
    content: "\f064" !important;
}

.fa-forward:before {
    content: "\f064" !important;
}

.input-placeholder {
    position: relative;
    margin: 0px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

    .input-placeholder input, .input-placeholder select {
        padding: 2px;
    }
        .input-placeholder select:disabled {
            color: darkgrey !important;
        }

        .input-placeholder input:valid + .placeholder, .input-placeholder select:valid + .placeholder {
            display: none;
        }

    .input-placeholder label {
        position: absolute;
        z-index: 1;
        top: 10px;
        margin-left: 0.8rem !important;
        pointer-events: none;
        -webkit-transition: all 250ms ease;
        -o-transition: all 250ms ease;
        transition: all 250ms ease;
        font-weight: 300;
        color: #333 !important;
    }

    .input-placeholder.focused label {
        font-size: 0.5rem !important;
        top: 0.15rem;
    }

        .input-placeholder.focused label.mandatory {
            color: #000;
        }

.rtl .input-placeholder label {
    position: absolute;
    z-index: 1;
    top: 0.5rem;
    margin-right: 0.9rem !important;
    pointer-events: none;
    -webkit-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    font-weight: 300;
    color: #333 !important;
    margin-left: 0 !important;
    text-align: right;
}

.modal-view .modal-view-wrapper .modal-form #buttonStartNewPlanConversation, .modal-view .modal-view-wrapper .modal-form #buttonStartNewConversation {
    background: #00b4b5;
    border-radius: 25px;
}

    .modal-view .modal-view-wrapper .modal-form #buttonStartNewPlanConversation:hover, .modal-view .modal-view-wrapper .modal-form #buttonStartNewConversation:hover {
        background: #fff;
        color: #00b4b5;
        border: 1px solid #00b4b5;
    }

header.header button#buttonAdd.btn-field {
    float: right;
    margin-right: 25px;
    margin-top: 10px;
    font-size: 16px;
    display: none;
}

.rtl header.header button#buttonAdd.btn-field {
    float: left;
    margin-left: 25px;
}

/*.expander-btn {
    border: 2px solid #0890bb;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4px;
}

    .expander-btn span.vertical {
        background-color: #0890bb;
        width: 100%;
        height: 3px;
    }

    .expander-btn span.horizontal {
        height: calc(100% - 7px);
        width: 3px;
        background: #0890bb;
        margin: 0 auto;
        position: absolute;
        transition: all ease-in-out .5s;
        -webkit-transition: all ease-in-out .5s;
        -moz-transition: all ease-in-out .5s;
        -o-transition: all ease-in-out .5s;
        -ms-transition: all ease-in-out .5s;
    }

    .expander-btn.active .expander-btn span.horizontal {
        height: 0px;
    }*/

.view .conversations .chat-loader,
.client-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-in-out .4s;
    -webkit-transition: all ease-in-out .4s;
    -moz-transition: all ease-in-out .4s;
    -o-transition: all ease-in-out .4s;
    -ms-transition: all ease-in-out .4s;
    opacity: 1;
}

    .view .conversations .chat-loader .spinner .cube1,
    .client-loader .spinner .cube1 {
        background-color: #00b4b5 !important;
    }

    .view .conversations .chat-loader.disable,
    .client-loader.disable {
        opacity: 0;
        z-index: -1 !important;
        transition-delay: 2s;
        -webkit-transition-delay: 2s;
        -moz-transition-delay: 2s;
        -o-transition-delay: 2s;
        -ms-transition-delay: 2s;
    }

.client-loader {
    background-color: transparent !important;
}

.resize-side-view {
    width: 10px;
    height: 100%;
    position: absolute;
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: #dee0e2;
}

    .resize-side-view span {
        cursor: col-resize;
        width: 20px;
        height: 32px;
        background-image: url(../img/slide.png);
        background-size: 30px;
        background-position: center;
        position: absolute;
        top: 50%;
        margin-top: -50px;
        left: -5px;
        right: auto;
    }

.rtl .resize-side-view {
    width: 10px;
    height: 100%;
    position: absolute;
    right: 0;
    left: auto;
    top: 0;
    bottom: 0;
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: #dee0e2;
}

.view.active:not(.side-view) .current,
.view.active:not(.side-view) .chat {
    width: 100% !important;
}

iframe#webWidget.show {
    top: 70px !important;
    border: none !important;
    background: transparent !important;
    z-index: 9999999 !important;
    transform: translateZ(0px) !important;
    position: fixed !important;
    opacity: 1 !important;
    width: 357px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    height: 565px !important;
    right: 0px !important;
    bottom: 0px !important;
    transition-property: opacity, width, height, bottom !important;
    transition-timing-function: ease-out !important;
    transition-duration: 300ms !important;
    left: auto !important;
}

.header .support-container {
    float: right;
    display: block;
    margin-right: 25px;
    margin-left: 0;
    position: relative;
    top: 2px;
}

    .header .support-container a {
        display: inline-block;
        width: 30px;
        height: 100%;
        vertical-align: middle;
    }

.rtl .header .support-container {
    float: right;
    display: block;
    margin-left: 0;
    margin-right: 25px;
    position: relative;
    top: 2px;
}

.rtl iframe#webWidget.show {
    left: 0px !important;
    right: auto !important;
}

.rtl .header .support-container {
    float: left;
    margin-left: 25px;
    margin-right: 0;
}

.message-top-menu {
    float: left;
    z-index: 999999;
    position: absolute;
    left: 17px;
    top: 10px;
    display: none;
    width: 20px;
}

.rtl .message-top-menu {
    left: 17px;
    right: auto;
}

#dialogsWindow .message .content.document-locked .message-top-menu {
    display: none !important;
}

#dialogsWindow .message .content:hover .message-top-menu {
    display: block;
}

    #dialogsWindow .message .content:hover .message-top-menu button.btn {
        background: none;
        border: none;
        cursor: pointer;
    }


    #dialogsWindow .message .content:hover .message-top-menu .delete-arrow i.fa.fa-chevron-down {
        color: #00b4b5;
        cursor: pointer;
    }

#dialogsWindow .message .content .message-top-menu:hover .delete-panel,
.delete-panel:hover .delete-panel {
    display: block;
}

#dialogsWindow .message .content .message-top-menu .delete-panel {
    width: 155px;
    background-color: #fff;
    overflow: hidden;
    margin-top: 5px;
    display: none;
    transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
    -o-transition: all ease-in-out .1s;
    -ms-transition: all ease-in-out .1s;
}

    #dialogsWindow .message .content .message-top-menu .delete-panel button.delete-message {
        width: 100%;
        text-align: left;
        padding: 10px 10px;
        border: 1px solid #00b4b5;
        color: #00b4b5;
    }

        #dialogsWindow .message .content .message-top-menu .delete-panel button.delete-message:hover {
            background-color: #00b4b5;
            border: 1px solid #00b4b5;
            color: #fff !important;
        }

.rtl #dialogsWindow .message .content .message-top-menu .delete-panel button.delete-message {
    width: 100%;
    text-align: right;
    padding: 10px 10px;
    border: 1px solid #00b4b5;
    color: #00b4b5;
}

.card-column {
    width: 33.333%;
    float: left;
    padding-right: 15px;
    padding-left: 0;
}

.rtl .card-column {
    padding-right: 0;
    padding-left: 15px;
}

.payment-stage h5 {
    margin-bottom: 0;
}

h2.summary-title {
    position: relative;
}

    h2.summary-title span {
        background-color: white;
        padding-right: 10px;
    }

    h2.summary-title:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0.5em;
        border-top: 1px solid #dedede;
        z-index: -1;
    }

input#exportSummaryEmail {
    width: 100%;
    height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    outline: none;
}

.editor-container ul li i.fa {
    height: 50px;
    width: 50px;
    font-size: 35px;
    vertical-align: middle;
    display: inline-block;
    line-height: 50px;
}

/******************************************/
/*                ERRORS                  */
/******************************************/
.error-page {
    position: fixed;
    z-index: 999999999999999999;
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    text-align: center;
    top: 0;
    color: #808080;
}

    .error-page.visible {
        display: table;
    }

    .error-page .msg {
        display: table-cell;
        vertical-align: middle;
    }

    .error-page .expired-ico {
        display: block;
        margin: 0 auto;
        height: 80px;
        width: 80px;
        background-image: url(../img/expired.svg);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    .error-page .title {
        border-top: 2px solid #40c1e5;
        border-bottom: 2px solid #40c1e5;
        padding: 0;
        display: inline-block;
        font-size: 2rem;
        color: #808080;
        min-width: 80px;
    }

    .error-page .txt {
        margin-top: 30px;
        font-size: 18px;
        line-height: 30px;
        color: #999999;
    }

span#exSubTitle {
    display: block;
}

#exMessage {
    margin-top: 10px;
    display: block;
    font-size: 20px;
}

.support-container {
    float: right;
    display: block;
    margin-right: 25px;
    margin-left: 0;
    position: relative;
    top: 2px;
}

.reconnect {
    display: inline-block;
}

.reconnect-title {
    font-weight: bold;
    font-size: 18px;
}

div.reconnect > div {
    width: 6px;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 0;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.reconnect .dot1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.reconnect .dot2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.browser-not-supported,
.expired {
    position: fixed;
    z-index: 999999999999999999;
    background: #fff;
    display: none;
    height: 100%;
    width: 100%;
    text-align: center;
    top: 0;
}

    .browser-not-supported.visible,
    .expired.visible {
        display: table;
    }

    .browser-not-supported .msg,
    .expired .msg {
        display: table-cell;
        vertical-align: middle;
    }

    .browser-not-supported .expired-ico,
    .expired .expired-ico {
        display: block;
        margin: 0 auto;
        height: 80px;
        width: 80px;
        background-image: url(../img/expired.svg);
        background-size: 100%;
    }

    .browser-not-supported .title,
    .expired .title {
        border-top: 2px solid #40c1e5;
        border-bottom: 2px solid #40c1e5;
        padding: 5px;
        display: inline-block;
        font-size: 14px;
        color: #808080;
    }

    .browser-not-supported .txt,
    .expired .txt {
        margin-top: 30px;
        font-size: 18px;
        line-height: 30px;
        color: #999999;
    }

span.attachment-icon {
    background-image: url(../img/attach.png);
    background-position: center center;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-size: 25px;
    right: 15px;
    bottom: 7px;
    position: absolute;
    z-index: 300;
}

.rtl span.attachment-icon {
    left: 15px;
    right: auto;
}

.prevent-click {
    pointer-events: none !important;
    -ms-touch-action: none !important;
}

span#newPlanConversationError,
span#newConversationError {
    float: left;
    margin-top: -20px;
    font-size: 12px;
    color: red;
    display: none;
}

.middle-panel {
    transition: all ease-in-out .1s;
    -webkit-transition: all ease-in-out .1s;
    -moz-transition: all ease-in-out .1s;
    -o-transition: all ease-in-out .1s;
    -ms-transition: all ease-in-out .1s;
}

.welcome-container .btn-field {
    min-width: 200px;
}

.unset-weight {
    font-weight: unset !important;
    white-space: inherit !important;
}

.message-info span.text,
.message-details span.text {
    font-weight: 500;
}

.message-details .document-list {
    padding-bottom: 30px;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    max-width: 100%;
    margin-left: 30px;
    margin-top: 10px;
}

    .message-details .document-list .sub-title {
        display: inline-block;
        font-size: 13px;
        margin: 0;
        color: unset;
        white-space: normal;
        vertical-align: top;
    }

    .message-details .document-list .document-item {
        overflow-wrap: break-word;
        word-wrap: break-word;
        margin-left: 1.4em;
        text-indent: -1.4em;
        margin-bottom: 0.2em;
        overflow: initial;
        font-size: 13px;
    }

        .message-details .document-list .document-item.commands {
            text-indent: 0em !important;
        }


.rtl .message-details .document-list .document-item {
    margin-left: 1.4em;
    text-indent: -1.4em;
    margin-bottom: 0.2em;
    overflow: initial;
    font-size: 13px;
}

.message-details .document-list .document-item img {
    padding-right: 10px;
}


.rtl .message-details .document-list {
    direction: rtl;
    margin-left: 0;
    margin-right: 30px;
}

    .rtl .message-details .document-list .document-item img {
        padding-left: 0;
        transform: rotate(180deg);
    }

.desktop {
    display: block;
}

.mobile {
    display: none;
}


.time i.fa.fa-clock-o {
    margin-right: 5px;
    margin-left: 5px;
}


span#spinner {
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    pointer-events: none;
}



.spinner-loader {
    display: none;
}

    .spinner-loader.active {
        position: absolute;
        display: block;
        font-size: 1px;
        top: 0;
        left: 0;
        border-top: 1.1em solid #585858;
        border-right: 1.1em solid #585858;
        border-bottom: 1.1em solid #585858;
        border-left: 1.1em solid transparent;
        -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-animation: spinner 1.1s infinite linear;
        animation: spinner 1.1s infinite linear;
    }

        .spinner-loader.active, .spinner-loader.active:after {
            border-radius: 50%;
            width: 36px;
            height: 36px;
        }

    .spinner-loader.freeze {
        border-left: 1.1em solid #585858;
        animation: none;
        -webkit-animation: none;
        background-color: #cfcfcf;
    }

.spinner-svg {
    animation: rotate-spinner 1s linear infinite;
    z-index: 2;
    position: relative;
    display: flex;
    margin: 0 auto;
}

.freeze .spinner-svg .path {
    stroke: #585858;
    stroke-linecap: round;
    stroke-dasharray: 0,0 !important;
}

.active .spinner-svg .path {
    stroke: #585858;
    stroke-linecap: round;
    stroke-dasharray: 50,40;
}


.engage-loader {
    display: none;
}

    .engage-loader.active {
        position: absolute;
        display: block;
        font-size: 1px;
        top: 0;
        left: 0;
        width: 36px;
        height: 36px;
    }

        .engage-loader.active, .engage-loader.active:after {
            width: 36px;
            height: 36px;
        }

            .engage-loader.active .spinner-svg {
                top: -4px;
                left: -4px;
                width: 44px;
                height: 44px;
            }

.rtl .engage-loader.active .spinner-svg {
    right: -4px;
    left: auto;
}

.cc-number.input-placeholder {
    padding-left: 110px;
    max-width: 100%;
    overflow: hidden;
}

.cc-cvv.input-placeholder {
    padding-left: 50px;
    max-width: 100%;
    overflow: hidden;
}

canvas.error {
    border: 1px solid red !important;
}

/******************************************/
/*          SHARE-VIEW ICONS              */
/******************************************/
span.share-view-icon {
    width: 50px;
    height: 50px;
    background-size: 40px;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}

    span.share-view-icon.pan-icon {
        background-image: url(../img/icons/pan.png);
    }

    span.share-view-icon.draw-icon {
        background-image: url(../img/icons/draw.png);
    }

    span.share-view-icon.delete-icon {
        background-image: url(../img/icons/delete.png);
    }

    span.share-view-icon.delete-all-icon {
        background-image: url(../img/icons/delete-all.png);
    }

.control.active span.share-view-icon.pan-icon {
    background-image: url(../img/icons/pan-active.png);
}

#buttonDraw:hover span.share-view-icon.draw-icon {
    background-image: url(../img/icons/draw-active.png);
}

#buttonPan:hover span.share-view-icon.pan-icon {
    background-image: url(../img/icons/pan-active.png);
    color: #116fc6;
}


#buttonDeleteDraw:hover span.share-view-icon.delete-icon {
    background-image: url(../img/icons/delete-active.png);
    color: #116fc6;
}

#buttonDeleteAllDraws:hover span.share-view-icon.delete-all-icon {
    background-image: url(../img/icons/delete-all-active.png);
    color: #116fc6;
}

#buttonPan:hover,
#buttonDraw:hover,
#buttonDeleteDraw:hover,
#buttonDeleteAllDraws:hover {
    color: #116fc6;
}


.control.active span.share-view-icon.draw-icon {
    background-image: url(../img/icons/draw-active.png);
}

/* DRAW RECTANGLE */
/*.draw-rect {
    border: 2px solid #FF0000;
    position: absolute;
    z-index: 100;
}*/

/******************************************/
/*            MEDIA (viewport)            */
/******************************************/
@media (max-device-width: 360px) {
    .modal-form {
        padding: 20px 30px 10px 30px;
    }

    .signature-pad {
        margin-bottom: 5px !important;
    }
}

@media (max-width: 480px) {
    .signature-pad-form .signature-pad-header .signature-control {
        float: right;
    }

        .signature-pad-form .signature-pad-header .signature-control .signature-keyboard {
            display: inline-block;
            text-decoration: none;
            background-size: 35px;
            background-position: center;
            background-image: url(../img/icons/keyboard.png);
            background-repeat: no-repeat;
            width: 50px;
            height: 50px;
        }

        .signature-pad-form .signature-pad-header .signature-control .signature-pen {
            display: inline-block;
            text-decoration: none;
            background-size: 25px;
            background-position: center;
            background-image: url(../img/icons/hand_writing.png);
            background-repeat: no-repeat;
            width: 50px;
            height: 50px;
        }

    .modal-form .title {
        text-align: left;
        font-size: 20px;
        margin-top: 0;
        padding-bottom: 5px;
        float: left;
        margin-bottom: 0;
    }

    .modal-form .text-field {
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 10px;
    }

    canvas.keyboard-signature-pad,
    .signature-pad {
        display: block;
        width: 100%;
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 15px;
    }

    canvas.keyboard-signature-pad {
        display: none;
    }
}

@media (max-width: 550px) {
    .login-page {
        padding: 100px 20px;
    }

        .login-page .login-form {
            text-align: center;
            margin: 0 auto;
        }

            .login-page .login-form .login-field {
                margin: 0 auto 20px;
            }

    .header {
        text-align: center;
    }

        .header .logo {
            margin-right: -40px;
        }

        .header .account {
            font-size: 0px;
        }

    .conversations .messages .message .avatar {
        margin: 5px 0px 0px 0px;
    }

        .conversations .messages .message .avatar .pic {
            width: 90%;
        }

        .conversations .messages .message .avatar .name {
            font-size: 9px;
            left: -10px;
            right: -10px;
        }

    .conversations .messages .message:not(.me) .avatar {
        margin: 5px 0px 0px 0px;
    }

    .conversations .messages .message .content .workflow-status {
        position: relative !important;
        bottom: unset !important;
        left: unset !important;
        right: unset !important;
        font-size: 14px !important;
        text-align: center !important;
        padding-bottom: 10px !important;
        color: #808080 !important;
        display: inline-block;
        width: 100%;
        height: auto;
        padding-top: 10px;
    }

    .conversations .current .contact:after {
        display: none;
    }

    .conversations .messages .message .content .text {
        float: left;
        max-width: 80%;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .rtl .conversations .messages .message .content .text {
        float: right;
        max-width: 80%;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .conversations .current .phone {
        display: none;
    }

    .intro .welcome {
        font-size: 26px;
    }

    .intro .pre-plan {
        font-size: 14px;
    }

    .intro .intro-action {
        margin: 40px 0px 0;
    }

    .modal-form .title {
        font-size: 16px;
    }

    /*.client .profile {
        width: 200px;
    }*/

    .client .profile .credits {
        font-size: 10px;
    }

        .client .profile .credits .credit-logo {
            width: 80px;
        }
}

@media(max-width: 680px) {
    .btn-field:not(.lightico-gradient):hover {
        border: 1px solid #00b4b5;
        background-color: #00b4b5;
        color: #ffffff;
    }

    .blueimp-gallery > .editor .editor-container {
        width: 100%;
        margin: 0;
        position: relative;
    }

    span.share-view-icon {
        width: 35px !important;
        height: 30px !important;
        background-size: 30px !important;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .message-thumb,
    .message-info {
        width: 100%;
        max-width: 100% !important;
    }

    .conversations .messages .message .content span.attachment-pending {
        margin-top: 3px;
    }

    .conversations .messages .message .content span.attachment-signed {
        margin-top: 5px;
    }

    .middle-panel {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
    }

        .middle-panel .cicrcle-icon {
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
        }

    .view .intro .welcome-container {
        flex-direction: column;
    }

    button#spanNewConversation,
    button#spanNewPlanConversation {
        font-size: 16px;
    }

    .view .intro .welcome-container .left-panel {
        padding-top: 25px;
        margin-bottom: -50px;
    }

    .view .intro .welcome-container .right-panel {
        padding-bottom: 25px;
        margin-top: -50px;
    }

    .conversations .messages .message .message-thumb, .conversations .messages .message .message-details {
        display: block !important;
        clear: both !important;
        width: 100% !important;
        padding: 0 !important;
        margin-top: 5px;
    }

        .conversations .messages .message .message-thumb, .conversations .messages .message .message-details .document-list {
            margin-left: 0;
        }

    #buttonDeleteDraw:hover span.share-view-icon.delete-icon {
        background-image: url(../img/icons/delete.png);
        color: #fff;
    }

    #buttonDeleteAllDraws:hover span.share-view-icon.delete-all-icon {
        background-image: url(../img/icons/delete-all.png);
        color: #fff;
    }

    #buttonDeleteDraw:hover,
    #buttonDeleteAllDraws:hover {
        color: #fff;
    }

    .btn-field.lightico-white,
    .btn-field.lightico-white:hover {
        background-color: #fff !important;
        color: #00b4b5 !important;
    }
}

@media (max-width: 900px) {
    div#cookie-confirmation div#cookie-confirmation-inner p {
        float: none !important;
    }

    div#cookie-confirmation div#cookie-confirmation-inner div#cookie-confirmation-buttons-area {
        float: right !important;
        padding-left: 0 !important;
    }

    .rtl div#cookie-confirmation div#cookie-confirmation-inner div#cookie-confirmation-buttons-area {
        float: left !important;
        padding-right: 0 !important;
    }

    .sidebar {
        left: -350px;
    }

        .sidebar:after {
            content: "";
            position: absolute;
            display: block;
            top: 20px;
            height: 50px;
            right: -30px;
            width: 37px;
            background-image: url(../img/sprites.png);
            background-size: auto 100%;
            background-position: -323px;
            background-repeat: no-repeat;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            opacity: 1;
        }

    .conversations .current .infos {
        display: none;
    }

    .rtl .view {
        right: 0;
    }

    .rtl .conversations .current {
        padding: 0 30px 0 0;
    }

    .rtl #divChat.side-view .side-view {
        right: 10%;
        left: auto;
        width: 90%;
        box-shadow: -2px 0px 10px 1px rgba(0, 0, 0, 0.1);
    }

    .rtl .sidebar {
        right: -350px;
    }

        .rtl .sidebar:after {
            right: auto;
            left: -25px;
        }
}

@media (max-width: 1100px) {
    .conversations .chat {
        width: 100%;
    }
}

/******************************************/
/*          KEY-FRAMES (ANIMATION)        */
/******************************************/

@keyframes toggle-color {
    0% {
        background-color: transparent;
    }

    100% {
        background-color: #116fc6;
    }
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-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);
    }
}

@-webkit-keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

    100% {
        -webkit-transform: rotate(-360deg);
    }
}

@keyframes sk-cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }

    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }

    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }

    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }

    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}

@-webkit-keyframes rotate-spinner {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-spinner {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.client-side.compose {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-box-shadow: 0px -2px 10px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0px -2px 10px 2px rgba(0, 0, 0, 0.05);
    width: 100%;
    z-index: 200;
}