/* ==========================================================
   MWD Email Signature Generator
========================================================== */

.mwd-generator{

    max-width:550px;

    margin:40px auto;

    padding:30px;

    background:#ffffff;

    border:1px solid #dddddd;

    border-radius:10px;

    box-shadow:0 6px 18px rgba(0,0,0,.08);

    font-family:Arial, Helvetica, sans-serif;

}

/* ==========================================================
   Headings
========================================================== */

.mwd-generator h2{

    margin:0;

    color:#D2232A;

    font-size:28px;

}

.mwd-generator h3{

    margin-top:8px;

    margin-bottom:30px;

    color:#666666;

    font-size:18px;

    font-weight:400;

}

/* ==========================================================
   Form Fields
========================================================== */

.mwd-field{

    margin-bottom:22px;

}

.mwd-generator label{

    display:block;

    margin-bottom:6px;

    font-weight:600;

    color:#333333;

}

.mwd-generator input{

    width:100%;

    padding:10px 12px;

    border:1px solid #cccccc;

    border-radius:6px;

    font-size:14px;

    box-sizing:border-box;

    transition:.2s;

}

.mwd-generator input:focus{

    outline:none;

    border-color:#D2232A;

    box-shadow:0 0 0 3px rgba(210,35,42,.15);

}

.mwd-generator small{

    display:block;

    margin-top:6px;

    color:#888888;

    font-size:12px;

    line-height:1.5;

}

/* ==========================================================
   Email Address
========================================================== */

.mwd-email-group{

    display:flex;

    align-items:center;

    width:100%;

    border:1px solid #cccccc;

    border-radius:6px;

    overflow:hidden;

    background:#ffffff;

}

.mwd-email-group input{

    flex:1 1 auto;

    width:0;

    min-width:0;

    border:none;

    border-radius:0;

    margin:0;

    padding:10px 12px;

    box-shadow:none;

}

.mwd-email-group input:focus{

    outline:none;

    box-shadow:none;

}

.mwd-email-group span{

    flex-shrink:0;

    display:flex;

    align-items:center;

    padding:10px 14px;

    background:#f5f5f5;

    border-left:1px solid #dddddd;

    color:#666666;

    white-space:nowrap;

    user-select:none;

    font-size:14px;

}

/* ==========================================================
   Button
========================================================== */

.mwd-button{

    width:100%;

    padding:13px;

    background:#D2232A;

    color:#ffffff;

    border:none;

    border-radius:6px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.2s;

}

.mwd-button:hover{

    background:#B91E24;

}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width:600px){

    .mwd-generator{

        margin:20px;

        padding:20px;

    }

    .mwd-email-group{

        flex-direction:column;

        align-items:stretch;

    }

    .mwd-email-group span{

        border-left:none;

        border-top:1px solid #dddddd;

        justify-content:center;

    }

}