/*<IssueID:148362>,Date:13-Dec-2019,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:151124>,Date:06-Jan-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:150756>,Date:10-Jan-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:150683,Date:08-Jan-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:154569>,Date:24-Feb-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:163839>,Date:16-June-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:172632>,Date:18-Sep-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:172594>,Date:29-Sep-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:174460>,Date:26-Oct-2020,Done By:Ajay Kushwaha<1464>*/
/*<IssueID:182116>,Date:12-Feb-2021,Done By:durgesh kumar Padha<1506>*/
/*<IssueID:198220>,Date:26-Aug-2021,Done By:<Vaishalee Tyagi><1509>*/
/*<IssueID:198220>,Date:31-Aug-2021,Done By:<Vaishalee Tyagi><1509>*/
body {
    font-family: Open Sans;
    padding: 0px;
}

/*common scrollbar */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    margin-right: 5px;
    padding-right: 5px;
}

::-webkit-scrollbar-track {
    width: 20px;
}


::-webkit-scrollbar-thumb {
    border-radius: 5.5px;
    background: #d6d6d6;
    right: 5px;
}

::-webkit-scrollbar-corner {
    background: transparent;
    margin-bottom: 5px;
}
/*common scrollbar end */

.divCanvas {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 0px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.pad-15 {
    margin-bottom: 15px;
}

.no-pad {
    margin-bottom: 0px !important;
}

button {
    margin: 5px;
}

.upload-btn-wrapper {
    position: relative;
    overflow: initial;
    display: inline-block;
    width: 55px;
    height: 40px;
    margin: auto;
}

    .upload-btn-wrapper:hover svg path {
        stroke: #3CBBC9;
        cursor: pointer;
    }

    .upload-btn-wrapper svg:hover {
        cursor: pointer;
    }


    .upload-btn-wrapper input[type=file] {
        font-size: 12px;
        height: 40px;
        width: 50px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }


.canvas-container {
    background: #FFFFFF;
    margin: 0 auto;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
}

.canvas-wrapper {
    margin-top: 5px;
    margin-left: 17px;
    display: inline-block;
    overflow: auto;
    padding-right: 5px;
    align-items: center;
}

.canvas-wrapper {
    margin-top: 5px;
    margin-left: 17px;
    display: inline-block;
    overflow: auto;
    align-items: center;
}

.canvas-wrapper-width {
    width: 92% !important;
    margin: 0 auto;
}

.canvas-wrapper-width-CMO {
    width: 68.5% !important;
    margin: 0 auto;
}

.canvas-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5.5px;
    background: #d6d6d6;
    right: 5px;
}

.canvas-wrapper::-webkit-scrollbar-corner {
    background: 0 0;
    margin-bottom: 5px;
}

.canvas-wrapper::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    margin-right: 5px;
    padding-right: 5px;
}

.context-menu-item {
    height: 27px;
    padding: 4px 10px 4px 22px;
    line-height: 27px;
    font-size: 13px;
    color: #9b9b9b !important;
}

    .context-menu-item.context-menu-hover {
        background-color: #fbfbfb !important;
        color: #4a4a4a !important;
    }

.context-menu-list {
    box-shadow: 0 2px 2px rgba(0,0,0,.02), 0 4px 4px rgba(0,0,0,.02), 0 8px 8px rgba(0,0,0,.02), 0 16px 16px rgba(0,0,0,.02), 0 32px 32px rgba(0,0,0,.02), 0 64px 64px rgba(0,0,0,.02) !important;
    border-radius: 2px;
    border: 0 solid !important;
}

.context-menu-icon::before {
    color: #9b9b9b !important;
}

.context-menu-icon.context-menu-hover:before {
    color: #4a4a4a !important;
}

/*tools*/
.RecDiv {
    position: relative;
}

.CircleDiv {
    position: relative;
}

.AddTextDiv {
    position: relative;
}

.LineDiv {
    position: relative;
}

.ArrowLineDiv {
    position: relative;
}

.CurveDiv {
    position: relative;
}

.Image-tool {
    position: relative;
}


/*tools end*/

/*start upper toolbar*/

.undo-redo-wrapper {
    width: 75px;
    display: inline-block;
    text-align: center;
    height: 33px;
    vertical-align: top;
    border-right: 1px solid #e9e9e9;
}

.btn-undo {
    background-color: transparent;
    border: 0px;
    width: 35px;
    background-repeat: no-repeat;
    height: 33px;
    padding: 0px !important;
    margin: 0px;
    text-align: center;
}

    .btn-undo:hover {
        background-color: transparent;
    }

        .btn-undo:hover svg path {
            stroke: #4a4a4a;
        }

.btn-redo {
    background-color: transparent;
    border: 0px;
    width: 35px;
    background-repeat: no-repeat;
    height: 33px;
    padding: 0px !important;
    margin: 0px;
    text-align: center;
}

    .btn-redo:hover {
        background-color: transparent;
    }

        .btn-redo:hover svg path {
            stroke: #4a4a4a;
        }

.zoom-wrapper {
    display: inline-block;
    height: 33px;
    padding: 0px 5px;
    border-right: 1px solid #E9E9E9;
}

.zoom-in {
    background-color: transparent;
    border: 0px;
    width: 35px;
    background-repeat: no-repeat;
    height: 33px;
    padding: 0px !important;
    margin: 0px;
    text-align: center;
}

    .zoom-in:hover {
        background-color: transparent;
    }

        .zoom-in:hover svg path {
            stroke: #3CBBC9;
        }

.zoom-out {
    background-color: transparent;
    border: 0px;
    width: 35px;
    background-repeat: no-repeat;
    height: 33px;
    padding: 0px !important;
    margin: 0px;
    text-align: center;
    line-height: 10px;
}

    .zoom-out:hover {
        background-color: transparent;
    }

        .zoom-out:hover svg path {
            stroke: #3CBBC9;
        }

.zoom-percent {
    position: relative;
    display: inline-block;
    margin-top: 8px;
    vertical-align: top;
}

    .zoom-percent select {
        border: 1px solid #F4F4F4;
        height: 27px;
        border-radius: 5px;
        width: 55px;
        padding: 0px 5px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNiA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIG9wYWNpdHk9IjAuOSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjMwMzMxIDEuMTgxOThDNS40OTg1NyAwLjk4NjcyMSA1LjQ5ODU3IDAuNjcwMTM5IDUuMzAzMzEgMC40NzQ4NzdDNS4xMDgwNCAwLjI3OTYxNSA0Ljc5MTQ2IDAuMjc5NjE1IDQuNTk2MiAwLjQ3NDg3N0wyLjgyODQzIDIuMjQyNjRMMS4wNjA2NyAwLjQ3NDg3N0MwLjg2NTQwNCAwLjI3OTYxNSAwLjU0ODgyMiAwLjI3OTYxNSAwLjM1MzU2IDAuNDc0ODc3QzAuMTU4Mjk3IDAuNjcwMTM5IDAuMTU4Mjk3IDAuOTg2NzIxIDAuMzUzNTYgMS4xODE5OEwyLjQ3NDg4IDMuMzAzM0MyLjY3MDE0IDMuNDk4NTcgMi45ODY3MiAzLjQ5ODU3IDMuMTgxOTkgMy4zMDMzTDUuMzAzMzEgMS4xODE5OFoiIGZpbGw9IiMzQ0JCQzkiLz48L3N2Zz4=);
        background-position: 42px 11px;
        background-repeat: no-repeat;
        cursor: pointer;
    }

.rotate-button-wrapper {
    display: inline-block;
    padding: 0px 5px;
}

    .rotate-button-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        background-repeat: no-repeat;
        height: 33px;
        padding: 0px !important;
        margin: 0px;
        text-align: center;
    }

        .rotate-button-wrapper button:hover {
            background-color: transparent;
        }

            .rotate-button-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }




.flip-wrapper {
    display: inline-block;
    padding: 0px 5px;
}

    .flip-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 33px;
        margin: 0px;
        text-align: center;
    }

        .flip-wrapper button:hover {
            background-color: transparent;
        }

            .flip-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }


.flip-rotate-wrapper {
    display: inline-block;
    padding: 0px 5px;
}

    .flip-rotate-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 33px;
        margin: 0px;
        text-align: center;
    }

        .flip-rotate-wrapper button:hover {
            background-color: transparent;
        }

            .flip-rotate-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }



.pan-wrapper {
    display: inline-block;
    padding: 0px 5px;
}

    .pan-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 40px;
        margin: 0px;
        text-align: center;
    }

        .pan-wrapper button:hover {
            background-color: transparent;
        }

            .pan-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }


.crop-wrapper {
    display: inline-block;
}

    .crop-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 33px;
        margin: 0px;
        text-align: center;
    }

        .crop-wrapper button:hover {
            background-color: transparent;
        }

            .crop-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }

.full-scale-wrapper {
    display: inline-block;
}

    .full-scale-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 33px;
        margin: 0px;
        text-align: center;
    }

        .full-scale-wrapper button:hover {
            background-color: transparent;
        }

            .full-scale-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }


.delete-wrapper {
    display: inline-block;
}

    .delete-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 40px;
        margin: 0px;
        text-align: center;
    }

        .delete-wrapper button:hover {
            background-color: transparent;
        }

            .delete-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }

.right-panel-wrapper {
    width: 23%;
    margin-left: 5px;
}

.right-panel {
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    width: 100%;
    float: right;
    margin-right: 0px;
    height: 600px;
}

    .right-panel button {
        background-color: transparent;
        border: 0px;
        width: 100%;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 50px;
        margin: 0px;
        text-align: center;
        display: block;
    }

        .right-panel button:hover {
            background-color: transparent;
        }

            .right-panel button:hover svg path {
                stroke: #3CBBC9;
            }

.left-panel-wrapper {
    width: 63px;
    margin-right: 5px;
}

.left-panel {
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    width: 56px;
    margin-left: 5px;
}

    .left-panel button {
        background-color: transparent;
        border: 0px;
        width: 100%;
        padding: 0px !important;
        background-repeat: no-repeat;
        height: 33px;
        margin: 0px;
        text-align: center;
        display: block;
    }

        .left-panel button:hover {
            background-color: transparent;
        }

            .left-panel button:hover svg path {
                stroke: #3CBBC9;
            }

.right-div {
    background: #fff;
}
/*drawing pencil tool properties*/
.drawing-tool {
    position: relative;
}

.drawing-tool-panel {
    position: absolute;
    width: 184px;
    left: 58px;
    z-index: 99;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    padding: 20px;
}

.drawing-mode-selector label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
    display: block;
}

.drawing-mode-selector select {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    width: 100%;
    padding: 0px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNiA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIG9wYWNpdHk9IjAuOSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjMwMzMxIDEuMTgxOThDNS40OTg1NyAwLjk4NjcyMSA1LjQ5ODU3IDAuNjcwMTM5IDUuMzAzMzEgMC40NzQ4NzdDNS4xMDgwNCAwLjI3OTYxNSA0Ljc5MTQ2IDAuMjc5NjE1IDQuNTk2MiAwLjQ3NDg3N0wyLjgyODQzIDIuMjQyNjRMMS4wNjA2NyAwLjQ3NDg3N0MwLjg2NTQwNCAwLjI3OTYxNSAwLjU0ODgyMiAwLjI3OTYxNSAwLjM1MzU2IDAuNDc0ODc3QzAuMTU4Mjk3IDAuNjcwMTM5IDAuMTU4Mjk3IDAuOTg2NzIxIDAuMzUzNTYgMS4xODE5OEwyLjQ3NDg4IDMuMzAzM0MyLjY3MDE0IDMuNDk4NTcgMi45ODY3MiAzLjQ5ODU3IDMuMTgxOTkgMy4zMDMzTDUuMzAzMzEgMS4xODE5OFoiIGZpbGw9IiMzQ0JCQzkiLz48L3N2Zz4=);
    background-position: right 8px top 11px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.shape-fill select {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    width: 100%;
    padding: 0px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNiA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIG9wYWNpdHk9IjAuOSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjMwMzMxIDEuMTgxOThDNS40OTg1NyAwLjk4NjcyMSA1LjQ5ODU3IDAuNjcwMTM5IDUuMzAzMzEgMC40NzQ4NzdDNS4xMDgwNCAwLjI3OTYxNSA0Ljc5MTQ2IDAuMjc5NjE1IDQuNTk2MiAwLjQ3NDg3N0wyLjgyODQzIDIuMjQyNjRMMS4wNjA2NyAwLjQ3NDg3N0MwLjg2NTQwNCAwLjI3OTYxNSAwLjU0ODgyMiAwLjI3OTYxNSAwLjM1MzU2IDAuNDc0ODc3QzAuMTU4Mjk3IDAuNjcwMTM5IDAuMTU4Mjk3IDAuOTg2NzIxIDAuMzUzNTYgMS4xODE5OEwyLjQ3NDg4IDMuMzAzM0MyLjY3MDE0IDMuNDk4NTcgMi45ODY3MiAzLjQ5ODU3IDMuMTgxOTkgMy4zMDMzTDUuMzAzMzEgMS4xODE5OFoiIGZpbGw9IiMzQ0JCQzkiLz48L3N2Zz4=);
    background-position: right 8px top 11px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.shape-tool-panel select {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    width: 100%;
    padding: 0px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNiA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIG9wYWNpdHk9IjAuOSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01LjMwMzMxIDEuMTgxOThDNS40OTg1NyAwLjk4NjcyMSA1LjQ5ODU3IDAuNjcwMTM5IDUuMzAzMzEgMC40NzQ4NzdDNS4xMDgwNCAwLjI3OTYxNSA0Ljc5MTQ2IDAuMjc5NjE1IDQuNTk2MiAwLjQ3NDg3N0wyLjgyODQzIDIuMjQyNjRMMS4wNjA2NyAwLjQ3NDg3N0MwLjg2NTQwNCAwLjI3OTYxNSAwLjU0ODgyMiAwLjI3OTYxNSAwLjM1MzU2IDAuNDc0ODc3QzAuMTU4Mjk3IDAuNjcwMTM5IDAuMTU4Mjk3IDAuOTg2NzIxIDAuMzUzNTYgMS4xODE5OEwyLjQ3NDg4IDMuMzAzM0MyLjY3MDE0IDMuNDk4NTcgMi45ODY3MiAzLjQ5ODU3IDMuMTgxOTkgMy4zMDMzTDUuMzAzMzEgMS4xODE5OFoiIGZpbGw9IiMzQ0JCQzkiLz48L3N2Zz4=);
    background-position: right 8px top 11px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.line-width {
    margin: 15px 0px;
}

.inline_main {
    margin-bottom: 15px;
}

.line-width label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
}

.color-fill label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
    display: block;
    margin-top: 10px;
}

.color-fill-input {
    border: 1px solid #F4F4F4;
    height: 27px;
    drawing-tool border-radius: 5px;
    display: inline-block;
    width: 56px;
    padding: 0px 5px;
    margin-left: 5px;
    vertical-align: top;
}

input[type="color" i] {
    width: 28px;
    height: 27px;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    border-image: none;
    padding: 0px;
    background-color: transparent;
    display: inline-block;
    border: 1px solid #F5F5F5;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    -webkit-appearance: none;
}

::-webkit-color-swatch {
    border: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}

::-moz-focus-inner {
    padding: 0;
}

.shadow-color label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    display: block;
    line-height: 15px;
    color: #4A4A4A;
    margin-top: 15px;
}

.shadow-color-input {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    display: inline-block;
    width: 56px;
    padding: 0px 5px;
    margin-left: 5px;
    vertical-align: top;
}

.shadow-width label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
}

.shadow-width {
    margin-bottom: 15px;
}

.shadow-offset label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
}

.line-width-range {
    height: 22px;
    -webkit-appearance: none;
    outline: none;
    width: 100%;
    border: 0px; /*for firefox*/
}
    .line-width-range::after {
        content: "";
        position: absolute;
        top: 8px;
        background-color: #e8dfdf;
        left: -6px;
        right: 0px;
        margin: auto;
        width: 1px;
        height: 6px;
    }

    /*chrome and opera */
    .line-width-range::-webkit-slider-runnable-track {
        background: #F5F5F5; /*track color*/
        height: 2px; /*track height*/
        border-radius: 4px;
        transition: .3s;
    }

    .line-width-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        background: #fff;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: -4px;
        cursor: pointer;
        border: 1px solid #3CBBC9;
    }

    .line-width-range::-webkit-progress-value {
        background: cyan;
    }

    /*firefox */

    .line-width-range::-moz-focus-outer {
        border: 0px;
    }

    .line-width-range::-moz-range-track {
        background: #F5F5F5; /*track color*/
        height: 2px; /*track height*/
        border-radius: 4px;
    }



    .line-width-range::-moz-range-thumb {
        background: white;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-top: -4px;
        cursor: pointer;
        border: 1px solid #3CBBC9;
    }

    .line-width-range::-moz-range-progress {
        background: #3CBBC9;
        border-radius: 4px;
        height: 2px;
    }

/*drawing pencil tool properties ends*/


/*shape tool properties*/

.shape-radius label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
    margin-top: 0px;
    display: block;
}

.shape-radius {
    margin-bottom: 15px;
}

.shape-dimensions .width-textbox {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    display: inline-block;
    width: 46%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02LjAyMzQ0IDZINS4wMDc4MUw0LjAzOTA2IDIuNTkzNzVDMy45OTc0IDIuNDQ1MzEgMy45NDUzMSAyLjIzMTc3IDMuODgyODEgMS45NTMxMkMzLjgyMDMxIDEuNjcxODggMy43ODI1NSAxLjQ3NjU2IDMuNzY5NTMgMS4zNjcxOUMzLjc0MzQ5IDEuNTMzODUgMy43MDA1MiAxLjc1IDMuNjQwNjIgMi4wMTU2MkMzLjU4MzMzIDIuMjgxMjUgMy41MzUxNiAyLjQ3OTE3IDMuNDk2MDkgMi42MDkzOEwyLjU1MDc4IDZIMS41MzUxNkwwLjc5Njg3NSAzLjE0MDYyTDAuMDQ2ODc1IDAuMjg5MDYySDFMMS44MTY0MSAzLjYxNzE5QzEuOTQ0MDEgNC4xNTEwNCAyLjAzNTE2IDQuNjIyNCAyLjA4OTg0IDUuMDMxMjVDMi4xMTg0OSA0LjgwOTkgMi4xNjE0NiA0LjU2MjUgMi4yMTg3NSA0LjI4OTA2QzIuMjc2MDQgNC4wMTU2MiAyLjMyODEyIDMuNzk0MjcgMi4zNzUgMy42MjVMMy4zMDQ2OSAwLjI4OTA2Mkg0LjIzMDQ3TDUuMTgzNTkgMy42NDA2MkM1LjI3NDc0IDMuOTUwNTIgNS4zNzEwOSA0LjQxNDA2IDUuNDcyNjYgNS4wMzEyNUM1LjUxMTcyIDQuNjU4ODUgNS42MDU0NyA0LjE4NDkgNS43NTM5MSAzLjYwOTM4TDYuNTY2NDEgMC4yODkwNjJINy41MTE3Mkw2LjAyMzQ0IDZaIiBmaWxsPSIjM0NCQkM5Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: right 8px top 11px;
    padding: 0px 5px;
    vertical-align: top;
}

.shape-dimensions .height-textbox {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    display: inline-block;
    width: 46%;
    background-repeat: no-repeat;
    background-position: right 8px top 11px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgNiA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik01LjI1NzgxIDZINC4zMjAzMVYzLjQyNTc4SDEuNjg3NVY2SDAuNzUzOTA2VjAuMjg5MDYySDEuNjg3NVYyLjYyNUg0LjMyMDMxVjAuMjg5MDYySDUuMjU3ODFWNloiIGZpbGw9IiMzQ0JCQzkiLz48L3N2Zz4=);
    padding: 0px 5px;
    margin-left: 10px;
    vertical-align: top;
}

.shape-radius .line-width-range {
    height: 22px;
    -webkit-appearance: none;
    outline: none;
    display: inline;
    width: 60%;
    border: 0px; /*for firefox*/
}

.shape-radius .radius-input {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    display: inline-block;
    width: 34%;
    padding: 0px 5px;
    margin-left: 5px;
    vertical-align: top;
}

.shape-tool {
    position: relative;
}

.shape-tool-panel {
    position: absolute;
    width: 184px;
    left: 58px;
    z-index: 99;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    padding: 20px;
}

.shape-fill label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
    margin-top: 0px;
    display: block;
}



.shape-border label {
    font-family: Open Sans;
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    color: #4A4A4A;
    margin-top: 15px;
    display: block;
}

.shape-fill .color-fill-input {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    display: inline-block;
    width: 56px;
    padding: 0px 5px;
    margin-left: 5px;
    vertical-align: top;
}

input[type="color" i] {
    width: 28px;
    height: 27px;
    border-width: 0px;
    border-style: solid;
    border-color: transparent;
    border-image: none;
    padding: 0px;
    background-color: transparent;
    display: inline-block;
    border: 1px solid #F5F5F5;
    box-sizing: border-box;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    -webkit-appearance: none;
}

::-webkit-color-swatch {
    border: none;
}

::-webkit-color-swatch-wrapper {
    padding: 0;
}

::-moz-color-swatch,
::-moz-focus-inner {
    border: none;
}

::-moz-focus-inner {
    padding: 0;
}

.shape-border .border-percent-input {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    display: inline-block;
    width: 38%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgNyA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xLjA4OTg0IDJDMS4wODk4NCAyLjM4ODAyIDEuMTI3NiAyLjY3NzA4IDEuMjAzMTIgMi44NjcxOUMxLjI3ODY1IDMuMDU3MjkgMS40MDIzNCAzLjE1MjM0IDEuNTc0MjIgMy4xNTIzNEMxLjkxNzk3IDMuMTUyMzQgMi4wODk4NCAyLjc2ODIzIDIuMDg5ODQgMkMyLjA4OTg0IDEuMjMxNzcgMS45MTc5NyAwLjg0NzY1NiAxLjU3NDIyIDAuODQ3NjU2QzEuNDAyMzQgMC44NDc2NTYgMS4yNzg2NSAwLjk0MjcwOCAxLjIwMzEyIDEuMTMyODFDMS4xMjc2IDEuMzIyOTIgMS4wODk4NCAxLjYxMTk4IDEuMDg5ODQgMlpNMi44NDc2NiAxLjk5MjE5QzIuODQ3NjYgMi41OTExNSAyLjczOTU4IDMuMDQxNjcgMi41MjM0NCAzLjM0Mzc1QzIuMzA5OSAzLjY0MzIzIDEuOTkzNDkgMy43OTI5NyAxLjU3NDIyIDMuNzkyOTdDMS4xNzgzOSAzLjc5Mjk3IDAuODcxMDk0IDMuNjM4MDIgMC42NTIzNDQgMy4zMjgxMkMwLjQzNjE5OCAzLjAxNTYyIDAuMzI4MTI1IDIuNTcwMzEgMC4zMjgxMjUgMS45OTIxOUMwLjMyODEyNSAwLjgwMjA4MyAwLjc0MzQ5IDAuMjA3MDMxIDEuNTc0MjIgMC4yMDcwMzFDMS45ODMwNyAwLjIwNzAzMSAyLjI5Njg4IDAuMzYxOTc5IDIuNTE1NjIgMC42NzE4NzVDMi43MzY5OCAwLjk3OTE2NyAyLjg0NzY2IDEuNDE5MjcgMi44NDc2NiAxLjk5MjE5Wk00LjgwODU5IDQuMjgxMjVDNC44MDg1OSA0LjY2OTI3IDQuODQ2MzUgNC45NTk2NCA0LjkyMTg4IDUuMTUyMzRDNSA1LjM0NTA1IDUuMTI1IDUuNDQxNDEgNS4yOTY4OCA1LjQ0MTQxQzUuNjM4MDIgNS40NDE0MSA1LjgwODU5IDUuMDU0NjkgNS44MDg1OSA0LjI4MTI1QzUuODA4NTkgMy41MTgyMyA1LjYzODAyIDMuMTM2NzIgNS4yOTY4OCAzLjEzNjcyQzUuMTI1IDMuMTM2NzIgNSAzLjIzMDQ3IDQuOTIxODggMy40MTc5N0M0Ljg0NjM1IDMuNjA1NDcgNC44MDg1OSAzLjg5MzIzIDQuODA4NTkgNC4yODEyNVpNNi41NjY0MSA0LjI4MTI1QzYuNTY2NDEgNC44ODAyMSA2LjQ1ODMzIDUuMzI5NDMgNi4yNDIxOSA1LjYyODkxQzYuMDI2MDQgNS45MjgzOSA1LjcxMDk0IDYuMDc4MTIgNS4yOTY4OCA2LjA3ODEyQzQuOTAxMDQgNi4wNzgxMiA0LjU5Mzc1IDUuOTI0NDggNC4zNzUgNS42MTcxOUM0LjE1NjI1IDUuMzA3MjkgNC4wNDY4OCA0Ljg2MTk4IDQuMDQ2ODggNC4yODEyNUM0LjA0Njg4IDMuMDkxMTUgNC40NjM1NCAyLjQ5NjA5IDUuMjk2ODggMi40OTYwOUM1LjY5NzkyIDIuNDk2MDkgNi4wMDkxMSAyLjY0OTc0IDYuMjMwNDcgMi45NTcwM0M2LjQ1NDQzIDMuMjY0MzIgNi41NjY0MSAzLjcwNTczIDYuNTY2NDEgNC4yODEyNVpNNS40MDYyNSAwLjI4OTA2MkwyLjIzODI4IDZIMS40ODA0N0w0LjY0ODQ0IDAuMjg5MDYySDUuNDA2MjVaIiBmaWxsPSIjM0NCQkM5Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: right 8px top 11px;
    padding: 0px 5px;
    vertical-align: top;
}

.shape-border .border-width-input {
    border: 1px solid #F4F4F4;
    height: 27px;
    border-radius: 5px;
    display: inline-block;
    width: 38%;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOCA2IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02LjAyMzQ0IDZINS4wMDc4MUw0LjAzOTA2IDIuNTkzNzVDMy45OTc0IDIuNDQ1MzEgMy45NDUzMSAyLjIzMTc3IDMuODgyODEgMS45NTMxMkMzLjgyMDMxIDEuNjcxODggMy43ODI1NSAxLjQ3NjU2IDMuNzY5NTMgMS4zNjcxOUMzLjc0MzQ5IDEuNTMzODUgMy43MDA1MiAxLjc1IDMuNjQwNjIgMi4wMTU2MkMzLjU4MzMzIDIuMjgxMjUgMy41MzUxNiAyLjQ3OTE3IDMuNDk2MDkgMi42MDkzOEwyLjU1MDc4IDZIMS41MzUxNkwwLjc5Njg3NSAzLjE0MDYyTDAuMDQ2ODc1IDAuMjg5MDYySDFMMS44MTY0MSAzLjYxNzE5QzEuOTQ0MDEgNC4xNTEwNCAyLjAzNTE2IDQuNjIyNCAyLjA4OTg0IDUuMDMxMjVDMi4xMTg0OSA0LjgwOTkgMi4xNjE0NiA0LjU2MjUgMi4yMTg3NSA0LjI4OTA2QzIuMjc2MDQgNC4wMTU2MiAyLjMyODEyIDMuNzk0MjcgMi4zNzUgMy42MjVMMy4zMDQ2OSAwLjI4OTA2Mkg0LjIzMDQ3TDUuMTgzNTkgMy42NDA2MkM1LjI3NDc0IDMuOTUwNTIgNS4zNzEwOSA0LjQxNDA2IDUuNDcyNjYgNS4wMzEyNUM1LjUxMTcyIDQuNjU4ODUgNS42MDU0NyA0LjE4NDkgNS43NTM5MSAzLjYwOTM4TDYuNTY2NDEgMC4yODkwNjJINy41MTE3Mkw2LjAyMzQ0IDZaIiBmaWxsPSIjM0NCQkM5Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: right 8px top 11px;
    padding: 0px 5px;
    vertical-align: top;
}

/*shape tool properties ends*/



/*image upload button*/


.upload-btn-wrapper {
    position: relative;
    overflow: initial;
    display: inline-block;
}

/*image upload button ends*/


#items {
    list-style: none;
    margin: 0px;
    margin-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 3px;
    font-size: 17px;
    color: #333333;
}

hr {
    width: 85%;
    background-color: #E4E4E4;
    border-color: #E4E4E4;
    color: #E4E4E4;
}

#cntnr {
    display: none;
    position: fixed;
    border: 1px solid #B2B2B2;
    width: 150px;
    background: #F9F9F9;
    box-shadow: 3px 3px 2px #E9E9E9;
    border-radius: 4px;
}

li {
    padding: 3px;
    padding-left: 10px;
}


#items :hover {
    color: white;
    background: #284570;
    border-radius: 2px;
}

.InlineControls4 {
    width: 20% !important;
    display: initial !important;
    height: 30px !important;
    margin-right: 5px !important;
    border-radius: 3px;
}

.font-style:hover svg path {
    fill: #3CBBC9;
}

.font-style svg {
    vertical-align: middle;
}

.block-margin {
    margin-top: 15px;
}

.font-style:hover svg path {
    stroke: transparent !important;
}

.InlineControls4:hover {
    border-radius: 3px;
}

.InlineControls5 {
    height: 15px !important;
    width: 16% !important;
    display: initial !important;
}

.Single-Select-wrapper {
    display: inline-block;
    padding: 0px 5px;
}

    .Single-Select-wrapper button {
        background-color: transparent;
        border: 0px;
        width: 35px;
        background-repeat: no-repeat;
        height: 40px;
        padding: 0px !important;
        margin: 0px;
        text-align: center;
    }

        .Single-Select-wrapper button:hover {
            background-color: transparent;
        }

            .Single-Select-wrapper button:hover svg path {
                stroke: #3CBBC9;
            }

.color-picker {
    display: flex;
    align-items: center;
}

#Line-options .shape-radius {
    margin-bottom: 0px !important;
}

#ArrowLine-options .shape-radius {
    margin-bottom: 0px !important;
}

.color-picker input {
    margin-left: 5px;
}

.isActive svg path {
    stroke: #3CBBC9;
}

.inline_main {
    display: inline-flex;
    width: 100%
}

.filled-shape, .bordered-shape {
    width: 50%
}

    .filled-shape button, .bordered-shape button {
        height: 25px;
        width: 35px;
        border-radius: 0;
        border: 1px solid #4a4a4a !important;
        position: relative;
    }

        .filled-shape button:focus, .bordered-shape button {
            outline: none;
            box-shadow: none !important;
        }

.full-width {
    width: 100% !important;
}

.iconActive {
    color: white;
    background: black;
    padding: 3px;
    border-radius: 5px;
}

.display {
    display: block !important;
}

/*disable Ctrl+A (select all)*/
body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -user-select: none;
}


.switch {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 7px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch-right {
    width: 84%;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    top: -4px;
    left: 1px;
    bottom: 2px;
    background: linear-gradient(135deg,#00d1cd 0,#0096c4 100%) !important;
    box-shadow: 0 16px 16px rgba(9,58,87,.05),0 32px 32px rgba(9,58,87,.05),0 16px 16px rgba(20,249,255,.1) !important;
    transition: .4s;
}

input:checked + .slider {
    background-color: rgba(0,209,205,.54);
}

    input:checked + .slider:before {
        -webkit-transform: translateX(8px);
        -ms-transform: translateX(8px);
        transform: translateX(8px);
    }

input[type=range] {
    display: block;
    width: 100%;
    background: transparent;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.pull-right {
    padding-right: 5px !important;
}

.clsSectionDivContent {
    margin: 0px !important;
    background-color: transparent;
    padding: 0px;
    box-shadow: none;
}

#headerMenu {
    background: #FFF !important;
    padding: 5px 0px;
    box-shadow: 0 1px 3px rgba(43,59,93,.29);
    border-radius: 2px;
}

.disply-Content {
    margin-top: 10px;
}

.with-Refresh input {
    width: 85% !important;
}

.with-Refresh button {
    width: 10% !important;
    float: right;
    height: 15px;
    margin-top: 3px;
    outline: none;
}

.border-size input {
    width: 68% !important;
}

.border-size button {
    float: right;
}

.clsPageTitleBarTitle {
    margin: 10px 0px 10px 10px;
}

.clsToolButtons {
    margin-right: 10px;
}


:focus {
    outline: none !important;
}

.active-style svg path {
    fill: #3CBBC9;
}

.activebutton svg path {
    stroke: #3CBBC9;
}

.activebutton {
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
}

.Crop-Active button svg path {
    stroke: #3CBBC9;
}

.text-Background {
    display: flex;
    align-items: center;
}

.text-width-left {
    width: 35% !important;
}

.text-width-right {
    width: 65% !important;
}

/*Below css for Comment marker tool*/
.comment textarea {
    overflow: auto;
    width: 100%;
    display: block;
    padding: 5px;
    cursor: text;
    box-sizing: border-box;
    border-radius: 3px;
    border: 0px solid #e9e9e9;
    resize: none;
    background: #f9f9f9;
}

.comment input {
}

.button-div {
    float: right !important;
    padding: 5px 0px 3px 0px !important;
    font-size: x-small;
}

.model-div {
    position: absolute;
    top: 290.889px;
    left: 361.889px;
    padding: 5px;
    box-shadow: 0 64px 64px 0 rgba(0,0,0,.02), 0 32px 32px 0 rgba(0,0,0,.02), 0 16px 16px 0 rgba(0,0,0,.02), 0 8px 8px 0 rgba(0,0,0,.02), 0 4px 4px 0 rgba(0,0,0,.02), 0 2px 2px 0 rgba(0,0,0,.02);
    border-radius: 3px;
    background: white;
    display: block;
    background: #f9f9f9;
}

    .model-div::after {
        content: "";
        width: 14px;
        height: 14px;
        background: #fff;
        position: absolute;
        bottom: 0;
        left: 0px;
        top: 14px;
        margin: 0 0 -7px -7px;
        background: #f9f9f9;
        /*box-shadow: 1px 1px 0 0 rgba(76,86,103,.2);*/
        -webkit-transform: rotate(45deg);
        transform: rotate(132deg);
    }

.link-button {
    background: none !important;
    border: none;
    padding: 0 !important;
    font-family: Open sans;
    color: #9b9b9b;
    cursor: pointer;
    font-size: 11px;
    margin: 5px 0px 5px 10px;
}

    .link-button:hover {
        color: #3cbcc9;
        cursor: pointer;
    }

.CMO-hover svg > circle {
    fill: #a61414;
    stroke: #007bff;
    stroke-width: 1;
}

.CMO button svg > circle:hover {
    fill: #a61414;
    stroke: #007bff;
    stroke-width: 1;
}

.right-comment-div {
    padding: 0px 10px;
    overflow-y: auto;
    /*max-height: 85%;*/
}

    .right-comment-div li:first-child {
        /*border-top:1px solid #e9e9e9;*/
        margin-top: 0px;
        padding-top: 0px;
    }

    .right-comment-div li:hover {
        border-bottom: 1px solid #3cbbc9;
        cursor: grab;
        opacity: .7;
    }

    .right-comment-div li {
        list-style-type: none;
        background-color: #fff;
        padding: 10px 0px;
        border-bottom: 1px solid #e9e9e9;
    }

.comment-title-div {
    font-family: Open Sans;
    font-weight: 300;
    font-size: 27px;
    text-align: left;
    padding: 10px 10px 0px;
    padding-bottom: 0px;
    margin: 0;
    color: #4a4a4a;
    line-height: 24px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-bottom: 20px;
}

.comment-sub-title-div {
    font-family: Open Sans;
    font-size: 13px;
    padding: 0px 10px 10px 10px;
    text-align: left;
    line-height: 13px;
    color: #4a4a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.comment-div {
    background-color: #fff;
}

    .comment-div .createdBy {
        margin-left: 5px;
        font-size: 13px;
        font-family: Open sans;
        color: #4a4a4a;
        display: inline-block;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comment-div .createdOn {
        display: inline-block;
        float: right;
        text-align: right;
        max-width: 90px;
        padding-left: 5px;
        line-height: 14px;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comment-div .li-main {
        padding: 6px 0px;
    }

    .comment-div .comment-profle {
        padding-bottom: 5px
    }

    .comment-div .comment-text {
        margin-left: 36px;
        width: 87%;
        font-style: italic !important;
        font-weight: 400;
        line-height: normal;
        font-size: 11px;
        max-height: 250px;
        padding-right: 5px;
        margin-top: 5px;
        overflow: hidden !important;
        overflow-y: auto !important;
    }

        .comment-div .comment-text span {
            font-style: italic;
        }

    .comment-div .cmt-read {
        text-align: left;
        height: 20px;
        background: none !important;
        border: none;
        padding: 0 !important;
        color: #007bff;
        cursor: pointer;
        font-style: italic;
    }

.Initial-lg {
    border-radius: 50%;
    text-transform: uppercase;
    background: #d8d8d8;
    box-shadow: 0 2px 2px rgba(0,0,0,.05), 0 4px 4px rgba(0,0,0,.05), 0 8px 8px rgba(0,0,0,.05), 0 16px 16px rgba(0,0,0,.05);
    position: relative;
    overflow: hidden;
    font-size: 0.9vw;
    line-height: 30px;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-top: -5px;
    top: 0px;
    width: 30px;
    height: 30px;
    float: left
}

    .Initial-lg img {
        height: auto;
        width: auto;
        max-width: 100%;
        min-width: 100%;
        min-height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        top: -100%;
        left: -100%;
        right: -100%;
        bottom: -100%;
        margin: auto;
        display: block;
    }

.Initial-sm {
    border-radius: 50%;
    text-transform: uppercase;
    background: #d61818;
    position: relative;
    overflow: hidden;
    font-size: 8px;
    line-height: 14px;
    font-family: Open Sans;
    font-style: normal;
    font-weight: 600;
    color: #fff;
    text-align: center;
    top: 14px;
    width: 15px;
    height: 15px;
    margin: 0px 0px 0px -15px;
    float: left;
}

.cmtUsername {
    display: inline-block;
    margin-left: 5px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.text-wrap {
    background-color: transparent;
    border: 0px;
    width: 100%;
    padding: 0px !important;
    background-repeat: no-repeat;
    height: 20px;
    margin: 0px;
    text-align: left;
    display: block;
    color: #3cbcc9;
    font-style: normal
}

    .text-wrap:hover {
        text-decoration: underline;
    }

.cross-button {
    background: #fff;
    position: absolute;
    right: -15px;
    width: 20px;
    height: 20px;
    top: -16px;
    padding: 3px;
    border-radius: 50%;
    border: 1px solid #9b9b9b;
}

    .cross-button:hover {
        cursor: pointer;
        border: 1px solid #3cbbc9;
    }

        .cross-button:hover svg path {
            stroke: #3cbbc9;
        }

.canvas-wrapper-ro {
    margin-top: 5px;
    margin-left: 0px;
    display: inline-block;
    align-items: center;
    overflow: auto;
}


.canvas-wrapper-ro-width {
    width: 100% !important;
    margin: 0 auto;
}

.canvas-wrapper-ro-width-CMO {
    width: 76% !important;
    margin: 0 auto;
}

.right-panel-wrapper-ro {
    float: right;
    width: 23%;
    margin-left: 5px;
}

.cmtText {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    white-space: pre-wrap !important;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.cmt-read-more {
    -webkit-line-clamp: unset ;
}

.cmt-read-less {
    -webkit-line-clamp: 2 ;
}

#divImageSelection.dam{
            background-color:white;
            box-shadow: 0px 2px 2px rgb(0 0 0 / 2%), 0px 4px 4px rgb(0 0 0 / 2%), 0px 8px 8px rgb(0 0 0 / 2%), 0px 16px 16px rgb(0 0 0 / 2%), 0px 32px 32px rgb(0 0 0 / 2%), 0px 64px 64px rgb(0 0 0 / 2%);
            width: 271px;
			overflow: hidden;
            display: none;
        }
#divImageSelection.dam .Image-upload-container{
	padding-left : 10px;
	padding-right : 10px;
}	
		#divImageSelection #divImageDropArea {
			border: 1px dashed #e9e9e9;
			width: 100%;
			margin: 15px auto;
			padding: 15px;
			cursor: pointer;
		}
		#divImageSelection #divImageDropArea.highlight {
			border: 1px dashed lightblue;
			cursor: move;
		}
		#divImageSelection #divImageDropArea:hover {
			border: 1px dashed lightblue;
		}
		#divImageDrag{
			margin-top:50px;
		}
		#divImageSelection #divImageDropArea h6{
			margin: 0px;
			font-size:9px;
			font-family:Open sans;
			color:#9b9b9b;
		}
		#divImageSelection .annotationImageUpload h3{
			font-size:30px;
			font-weight: 300;
			font-family: Open sans;
			color: #4a4a4a;
		}
		#divImageSelection .annotationImageUpload p{
			font-size:9px;
			font-family: Open sans;
			color: #9b9b9b;
		}
		#divImageSelection .imageContainerHeading{
			font-size:9px;
			font-family: Open sans;
			color: #9b9b9b;
		}
		#divImageSelection .remove-icon {
			position: absolute!important;
			right: 9px!important;
			top: 20px!important;
			padding: 0 6px!important;
			cursor: pointer!important;		   
		}
		#divImageSelection .remove-icon svg path {
			fill:#9b9b9b;		   
		}
		#divImageSelection .remove-icon:hover svg path {
			fill:#4a4a4a;		   
		}