body {
    /*background: #00498E;*/
    /*-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;*/
}

#signature-pad-type {
    cursor: default;
    /*width: 545px;*/
    margin: auto;
    padding: 10px;
}

#signoption.m-signature-pad {
    cursor: default;
    /*width: 545px;*/
    margin: auto;
    padding: 10px;
}

#signoption .m-signature-pad {
    cursor: default;
    width: initial;
    margin: auto;
    padding: 10px;
    height:initial;background:#f1f1f1;
}

.m-signature-pad {
    cursor: default;
    font-size: 10px;
    /*width: 568px;*/
    height: 185px;
    margin: auto;
    padding: 10px;
    /*top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: 230px;*/
    margin-bottom: 40px;
    background-color: #fff;
    border-radius: 4px;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAwMy4wNS4yMDEzUUQ6KQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAK7SURBVFiF7dZvSBNhHAfw73PdJkEdMkHD7qFiBLKNcETRi0BNo15E9CJ2MOiF0IuoVyL0JlRYZCqDregPMWFvomEoBEEwEFRwe9cL680F4pvbDrQRul5p2bcXbUtxYtBtvvEHxz3P737c73Pw3HMHki9IviPpR52DJBQAwuVyXZyfn39F8ny9ESD5EgD/DPmB5Lk69oYC4Fc5oev65srKyjBJo14IpXSe83g8CAaD17xe74nl5eUwyev1AKjlQTgcRkNDA3p6ek5LKTcsy7pN0gPgjRBio+aArq4uDAwMYHp6GgD8UkrkcrlQc3PzcQCPag4AAMMwMDExAcMwAMDf0tLyM5/PnyQ5AmBYCFF0XEDyOYDZqakpmqZJn89H27Zp2zbj8TgbGxs/5/P5BMkkyaMO964sQgCApmkIBALIZrMAgFAohMnJyYDf77+wtLT0BcA9JwEAtgMAoL+/H4lEojL3+XyIxWIBr9d7FYCsOUBKiXQ6jdbW1kpO0zS0tbV9BfCj5oDdQlXVVQDfnAZU3oJi8e8Ct217R6GU8hiABacBCoD1zs7O2d7e3rXx8fG96tdrAYjPzMy4k8lkfGhoqNjX11e9UFEUAJdIvid5xmkISN7KZDJRRVE+GYZR2Qts26ZpmgwGg9lQKDSn63qcZIrkYQd6bpuoJK9kMpmoEGItEonQNE1GIhFKKYnSJxvAqmVZMZKXHQVsSQ6mUqm0pmnUNG1r48rR0dHxjGTccQDJQ5ZlPVFVNVetcelYbWpqGiP51AnAtn1ACLGp67pwuVxWlfqF7u7uh4uLi8OFQmEDwNv/BeymujE6OjqG0tO63e7X0Wj0LskHJAdJBkmqe93nH3tVTR4hOdLe3n7fNM07JB+TvFn6OXE0SELscuEUgLMACgA+CiG+O928DNjX2LEI9yMOAAeAA8Bvl2RrTNW+ltQAAAAASUVORK5CYII=') 0 0, default;
}

    .m-signature-pad:before, .m-signature-pad:after {
        position: absolute;
        z-index: -1;
        content: "";
        width: 40%;
        height: 10px;
        left: 20px;
        bottom: 10px;
        background: transparent;
        -webkit-transform: skew(-3deg) rotate(-3deg);
        -moz-transform: skew(-3deg) rotate(-3deg);
        -ms-transform: skew(-3deg) rotate(-3deg);
        -o-transform: skew(-3deg) rotate(-3deg);
        transform: skew(-3deg) rotate(-3deg);
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
        cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAwMy4wNS4yMDEzUUQ6KQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAK7SURBVFiF7dZvSBNhHAfw73PdJkEdMkHD7qFiBLKNcETRi0BNo15E9CJ2MOiF0IuoVyL0JlRYZCqDregPMWFvomEoBEEwEFRwe9cL680F4pvbDrQRul5p2bcXbUtxYtBtvvEHxz3P737c73Pw3HMHki9IviPpR52DJBQAwuVyXZyfn39F8ny9ESD5EgD/DPmB5Lk69oYC4Fc5oev65srKyjBJo14IpXSe83g8CAaD17xe74nl5eUwyev1AKjlQTgcRkNDA3p6ek5LKTcsy7pN0gPgjRBio+aArq4uDAwMYHp6GgD8UkrkcrlQc3PzcQCPag4AAMMwMDExAcMwAMDf0tLyM5/PnyQ5AmBYCFF0XEDyOYDZqakpmqZJn89H27Zp2zbj8TgbGxs/5/P5BMkkyaMO964sQgCApmkIBALIZrMAgFAohMnJyYDf77+wtLT0BcA9JwEAtgMAoL+/H4lEojL3+XyIxWIBr9d7FYCsOUBKiXQ6jdbW1kpO0zS0tbV9BfCj5oDdQlXVVQDfnAZU3oJi8e8Ct217R6GU8hiABacBCoD1zs7O2d7e3rXx8fG96tdrAYjPzMy4k8lkfGhoqNjX11e9UFEUAJdIvid5xmkISN7KZDJRRVE+GYZR2Qts26ZpmgwGg9lQKDSn63qcZIrkYQd6bpuoJK9kMpmoEGItEonQNE1GIhFKKYnSJxvAqmVZMZKXHQVsSQ6mUqm0pmnUNG1r48rR0dHxjGTccQDJQ5ZlPVFVNVetcelYbWpqGiP51AnAtn1ACLGp67pwuVxWlfqF7u7uh4uLi8OFQmEDwNv/BeymujE6OjqG0tO63e7X0Wj0LskHJAdJBkmqe93nH3tVTR4hOdLe3n7fNM07JB+TvFn6OXE0SELscuEUgLMACgA+CiG+O928DNjX2LEI9yMOAAeAA8Bvl2RrTNW+ltQAAAAASUVORK5CYII=') 0 0, default;
    }

    .m-signature-pad:after {
        left: auto;
        right: 20px;
        -webkit-transform: skew(3deg) rotate(3deg);
        -moz-transform: skew(3deg) rotate(3deg);
        -ms-transform: skew(3deg) rotate(3deg);
        -o-transform: skew(3deg) rotate(3deg);
        transform: skew(3deg) rotate(3deg);
        cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAwMy4wNS4yMDEzUUQ6KQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAK7SURBVFiF7dZvSBNhHAfw73PdJkEdMkHD7qFiBLKNcETRi0BNo15E9CJ2MOiF0IuoVyL0JlRYZCqDregPMWFvomEoBEEwEFRwe9cL680F4pvbDrQRul5p2bcXbUtxYtBtvvEHxz3P737c73Pw3HMHki9IviPpR52DJBQAwuVyXZyfn39F8ny9ESD5EgD/DPmB5Lk69oYC4Fc5oev65srKyjBJo14IpXSe83g8CAaD17xe74nl5eUwyev1AKjlQTgcRkNDA3p6ek5LKTcsy7pN0gPgjRBio+aArq4uDAwMYHp6GgD8UkrkcrlQc3PzcQCPag4AAMMwMDExAcMwAMDf0tLyM5/PnyQ5AmBYCFF0XEDyOYDZqakpmqZJn89H27Zp2zbj8TgbGxs/5/P5BMkkyaMO964sQgCApmkIBALIZrMAgFAohMnJyYDf77+wtLT0BcA9JwEAtgMAoL+/H4lEojL3+XyIxWIBr9d7FYCsOUBKiXQ6jdbW1kpO0zS0tbV9BfCj5oDdQlXVVQDfnAZU3oJi8e8Ct217R6GU8hiABacBCoD1zs7O2d7e3rXx8fG96tdrAYjPzMy4k8lkfGhoqNjX11e9UFEUAJdIvid5xmkISN7KZDJRRVE+GYZR2Qts26ZpmgwGg9lQKDSn63qcZIrkYQd6bpuoJK9kMpmoEGItEonQNE1GIhFKKYnSJxvAqmVZMZKXHQVsSQ6mUqm0pmnUNG1r48rR0dHxjGTccQDJQ5ZlPVFVNVetcelYbWpqGiP51AnAtn1ACLGp67pwuVxWlfqF7u7uh4uLi8OFQmEDwNv/BeymujE6OjqG0tO63e7X0Wj0LskHJAdJBkmqe93nH3tVTR4hOdLe3n7fNM07JB+TvFn6OXE0SELscuEUgLMACgA+CiG+O928DNjX2LEI9yMOAAeAA8Bvl2RrTNW+ltQAAAAASUVORK5CYII=') 0 0, default;
    }


    #signoption .m-signature-pad--body {

    }
    .tour-step-background .m-signature-pad--body
    {
    position: absolute;
    left: 16px;
    right: 20px;
    top: 29px;
    bottom: 60px;
    height: 130px;
    border: 2px solid #ccc;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAwMy4wNS4yMDEzUUQ6KQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAK7SURBVFiF7dZvSBNhHAfw73PdJkEdMkHD7qFiBLKNcETRi0BNo15E9CJ2MOiF0IuoVyL0JlRYZCqDregPMWFvomEoBEEwEFRwe9cL680F4pvbDrQRul5p2bcXbUtxYtBtvvEHxz3P737c73Pw3HMHki9IviPpR52DJBQAwuVyXZyfn39F8ny9ESD5EgD/DPmB5Lk69oYC4Fc5oev65srKyjBJo14IpXSe83g8CAaD17xe74nl5eUwyev1AKjlQTgcRkNDA3p6ek5LKTcsy7pN0gPgjRBio+aArq4uDAwMYHp6GgD8UkrkcrlQc3PzcQCPag4AAMMwMDExAcMwAMDf0tLyM5/PnyQ5AmBYCFF0XEDyOYDZqakpmqZJn89H27Zp2zbj8TgbGxs/5/P5BMkkyaMO964sQgCApmkIBALIZrMAgFAohMnJyYDf77+wtLT0BcA9JwEAtgMAoL+/H4lEojL3+XyIxWIBr9d7FYCsOUBKiXQ6jdbW1kpO0zS0tbV9BfCj5oDdQlXVVQDfnAZU3oJi8e8Ct217R6GU8hiABacBCoD1zs7O2d7e3rXx8fG96tdrAYjPzMy4k8lkfGhoqNjX11e9UFEUAJdIvid5xmkISN7KZDJRRVE+GYZR2Qts26ZpmgwGg9lQKDSn63qcZIrkYQd6bpuoJK9kMpmoEGItEonQNE1GIhFKKYnSJxvAqmVZMZKXHQVsSQ6mUqm0pmnUNG1r48rR0dHxjGTccQDJQ5ZlPVFVNVetcelYbWpqGiP51AnAtn1ACLGp67pwuVxWlfqF7u7uh4uLi8OFQmEDwNv/BeymujE6OjqG0tO63e7X0Wj0LskHJAdJBkmqe93nH3tVTR4hOdLe3n7fNM07JB+TvFn6OXE0SELscuEUgLMACgA+CiG+O928DNjX2LEI9yMOAAeAA8Bvl2RrTNW+ltQAAAAASUVORK5CYII=') 0 0, default;
    }
.m-signature-pad--body {
    position: absolute;
    left:0px;
    right: 0px;
    top: 104px;
    bottom: 0px;
    height: 150px;
    border: 1px solid #9e9e9e;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAwMy4wNS4yMDEzUUQ6KQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAK7SURBVFiF7dZvSBNhHAfw73PdJkEdMkHD7qFiBLKNcETRi0BNo15E9CJ2MOiF0IuoVyL0JlRYZCqDregPMWFvomEoBEEwEFRwe9cL680F4pvbDrQRul5p2bcXbUtxYtBtvvEHxz3P737c73Pw3HMHki9IviPpR52DJBQAwuVyXZyfn39F8ny9ESD5EgD/DPmB5Lk69oYC4Fc5oev65srKyjBJo14IpXSe83g8CAaD17xe74nl5eUwyev1AKjlQTgcRkNDA3p6ek5LKTcsy7pN0gPgjRBio+aArq4uDAwMYHp6GgD8UkrkcrlQc3PzcQCPag4AAMMwMDExAcMwAMDf0tLyM5/PnyQ5AmBYCFF0XEDyOYDZqakpmqZJn89H27Zp2zbj8TgbGxs/5/P5BMkkyaMO964sQgCApmkIBALIZrMAgFAohMnJyYDf77+wtLT0BcA9JwEAtgMAoL+/H4lEojL3+XyIxWIBr9d7FYCsOUBKiXQ6jdbW1kpO0zS0tbV9BfCj5oDdQlXVVQDfnAZU3oJi8e8Ct217R6GU8hiABacBCoD1zs7O2d7e3rXx8fG96tdrAYjPzMy4k8lkfGhoqNjX11e9UFEUAJdIvid5xmkISN7KZDJRRVE+GYZR2Qts26ZpmgwGg9lQKDSn63qcZIrkYQd6bpuoJK9kMpmoEGItEonQNE1GIhFKKYnSJxvAqmVZMZKXHQVsSQ6mUqm0pmnUNG1r48rR0dHxjGTccQDJQ5ZlPVFVNVetcelYbWpqGiP51AnAtn1ACLGp67pwuVxWlfqF7u7uh4uLi8OFQmEDwNv/BeymujE6OjqG0tO63e7X0Wj0LskHJAdJBkmqe93nH3tVTR4hOdLe3n7fNM07JB+TvFn6OXE0SELscuEUgLMACgA+CiG+O928DNjX2LEI9yMOAAeAA8Bvl2RrTNW+ltQAAAAASUVORK5CYII=') 0 0, default;
    padding: 6px 5px 4px 42px;
    color: #444;
    line-height: 20px;
    /*border: 1px solid #d2d2d2;*/
    background: #fff;
  /*  background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;*/
    -webkit-background-size: 100% 22px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.m-signature-pad--body:before{
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 30px;
    bottom: 0;
    border: 0px solid;
    border-color: transparent #efe4e4;
}

    .m-signature-pad--body canvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
        cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABh0RVh0Q3JlYXRpb24gVGltZQAwMy4wNS4yMDEzUUQ6KQAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAK7SURBVFiF7dZvSBNhHAfw73PdJkEdMkHD7qFiBLKNcETRi0BNo15E9CJ2MOiF0IuoVyL0JlRYZCqDregPMWFvomEoBEEwEFRwe9cL680F4pvbDrQRul5p2bcXbUtxYtBtvvEHxz3P737c73Pw3HMHki9IviPpR52DJBQAwuVyXZyfn39F8ny9ESD5EgD/DPmB5Lk69oYC4Fc5oev65srKyjBJo14IpXSe83g8CAaD17xe74nl5eUwyev1AKjlQTgcRkNDA3p6ek5LKTcsy7pN0gPgjRBio+aArq4uDAwMYHp6GgD8UkrkcrlQc3PzcQCPag4AAMMwMDExAcMwAMDf0tLyM5/PnyQ5AmBYCFF0XEDyOYDZqakpmqZJn89H27Zp2zbj8TgbGxs/5/P5BMkkyaMO964sQgCApmkIBALIZrMAgFAohMnJyYDf77+wtLT0BcA9JwEAtgMAoL+/H4lEojL3+XyIxWIBr9d7FYCsOUBKiXQ6jdbW1kpO0zS0tbV9BfCj5oDdQlXVVQDfnAZU3oJi8e8Ct217R6GU8hiABacBCoD1zs7O2d7e3rXx8fG96tdrAYjPzMy4k8lkfGhoqNjX11e9UFEUAJdIvid5xmkISN7KZDJRRVE+GYZR2Qts26ZpmgwGg9lQKDSn63qcZIrkYQd6bpuoJK9kMpmoEGItEonQNE1GIhFKKYnSJxvAqmVZMZKXHQVsSQ6mUqm0pmnUNG1r48rR0dHxjGTccQDJQ5ZlPVFVNVetcelYbWpqGiP51AnAtn1ACLGp67pwuVxWlfqF7u7uh4uLi8OFQmEDwNv/BeymujE6OjqG0tO63e7X0Wj0LskHJAdJBkmqe93nH3tVTR4hOdLe3n7fNM07JB+TvFn6OXE0SELscuEUgLMACgA+CiG+O928DNjX2LEI9yMOAAeAA8Bvl2RrTNW+ltQAAAAASUVORK5CYII=') 0 0, default;
    }

.m-signature-pad--footer {
    position: absolute;
    left: 125px;
    right: 20px;
    bottom: 10px;
    height: 40px;
}

    .m-signature-pad--footer .description {
        color: #C3C3C3;
        text-align: center;
        font-size: 1.2em;
        margin-top: 1.8em;
    }

    .m-signature-pad--footer .button {
        position: absolute;
        bottom: 0;
    }

        .m-signature-pad--footer .button.clear {
            left: 0;
        }

        .m-signature-pad--footer .button.save {
            right: 0;
        }

@media screen and (max-width: 1024px) {
    .m-signature-pad {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        min-width: 250px;
        min-height: 140px;
        margin: 5%;
    }

    #github {
        display: none;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .m-signature-pad {
        margin: 10%;
    }
}

@media screen and (max-height: 320px) {
    .m-signature-pad--body {
        left: 0;
        right: 0;
        top: 0;
        bottom: 32px;
    }

    .m-signature-pad--footer {
        left: 20px;
        right: 20px;
        bottom: 4px;
        height: 28px;
    }

        .m-signature-pad--footer .description {
            font-size: 1em;
            margin-top: 1em;
        }
}