@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Dancing+Script&family=Grape+Nuts&family=Great+Vibes&family=Parisienne&family=Sacramento&family=Satisfy&family=Send+Flowers&display=swap');

.signature-pad {
    font-size: 10px;
    width: 100%;
    height: auto;
    max-width: 700px;
    border: 1px solid #e8e8e8;
    background-color: #cecece;
    border-radius: 4px;
    padding: 16px;
}

.signature-pad--body {
    position: relative;
    width: 100%;
    height: 100px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #f4f4f4;
    background-color: #FFF;
}

.signature-pad--body canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 666px;
    height: 100px;
    background-color: #FFF;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
    color: #dc3545;
    text-align: center;
    font-size: 1.2em;
    margin-top: 8px;
}

.signature-pad--actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
    margin-top: 8px;
}

.signature-varations .card-body {
    font-size: 1.5em;
    text-align: center;
}

#sample-signature {
    font-size: 1.8em;
}

.selected-font-card {
    border-color: #F00 !important;
    color: #F00 !important;
}

.signature-varations .card {
    cursor: pointer;
}

.signature-varations .card-body.Courgette,
.card-title.Courgette {
    font-family: 'Courgette', cursive;
}

.signature-varations .card-body.DancingScript,
.card-title.DancingScript {
    font-family: 'Dancing Script', cursive;
}

.signature-varations .card-body.GrapeNuts,
.card-title.GrapeNuts {
    font-family: 'Grape Nuts', cursive;
}

.signature-varations .card-body.GreatVibes,
.card-title.GreatVibes {
    font-family: 'Great Vibes', cursive;
}

.signature-varations .card-body.Parisienne,
.card-title.Parisienne {
    font-family: 'Parisienne', cursive;
}

.signature-varations .card-body.Sacramento,
.card-title.Sacramento {
    font-family: 'Sacramento', cursive;
}

.signature-varations .card-body.Satisfy,
.card-title.Satisfy {
    font-family: 'Satisfy', cursive;
}

.signature-varations .card-body.SendFlowers,
.card-title.SendFlowers {
    font-family: 'Send Flowers', cursive;
}