form * {
    background: transparent;
}

input[type=text], input[type=password], input[type=submit],
input[type=email], input[type=url], input[type=tel],
input[type=number], input[type=datetime], textarea, button, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: white;
    border-radius: 0;
    padding: 5px;
    margin: 0 0 10px 0;
}

.group:before, .group:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}

body {
    background: #f0f4f8;
    background: url(noisetexture.png), 
                -webkit-linear-gradient(#dbeafe, #f0f4f8) no-repeat, #f0f4f8;
    background: url(noisetexture.png), 
                -moz-linear-gradient(#dbeafe, #f0f4f8) no-repeat, #f0f4f8;
    background: url(noisetexture.png), 
                -o-linear-gradient(#dbeafe, #f0f4f8) no-repeat, #f0f4f8;
    background: url(noisetexture.png), 
                -ms-linear-gradient(#dbeafe, #f0f4f8) no-repeat, #f0f4f8;
    background: url(noisetexture.png), 
                linear-gradient(#dbeafe, #f0f4f8) no-repeat, #f0f4f8;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dbeafe', endColorstr='#f0f4f8', GradientType=0);
    color: #1f2937;
}

#myform {
    font: normal .8em/1em Arial, Helvetica, sans-serif;
    width: 80%;
    margin: 0 auto;
    max-width: 500px;
    background: url(greytexture.jpg) #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 10px 10px 20px #1e3a8a;
    -moz-box-shadow: 10px 10px 20px #1e3a8a;
    box-shadow: 10px 10px 20px #1e3a8a;
}

#myform fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

#myform fieldset:before {
    content: attr(title);
    display: block;
    padding: 20px 10px 3px 10px;
    font-weight: bold;
    font-size: 1.25em;
    color: #1e3a8a;
    margin: 0 auto;
    text-shadow: 1px 1px 1px #fff;
}

#myform legend {
    display: none;
}

#myform ol {
    margin: 0;
    padding: 0;
}

#myform ol li {
    position: relative;
    list-style: none;
    padding: 8px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #94a3b8;
}

#myform ol li:first-child {
    border-top: none;
}

#myform ol li:last-child {
    border-bottom: none;
}

#myform ol li ol li {
    padding-bottom: 0;
    display: inline;
    padding: 0;
    border-top: none;
    border-bottom: none;
}

#myform ol li ol li label,
#myform ol li.singleline label {
    font-weight: normal;
    display: inline;
    cursor: pointer;
}

#myform ol li label,
.grouphead {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    color: #1f2937;
    text-shadow: 1px 1px 1px #fff;
    padding-left: 5px;
}

#myform ol li input,
#myform textarea {
    display: block;
    width: 96%;
    padding: 5px;
    margin: 0 auto;
    outline: none;
    border: 1px solid #cbd5e1;
    background: #e5ecf3;
    background: -webkit-linear-gradient(#ffffff, #e5ecf3) no-repeat;
    background: -moz-linear-gradient(#ffffff, #e5ecf3) no-repeat;
    background: -o-linear-gradient(#ffffff, #e5ecf3) no-repeat;
    background: -ms-linear-gradient(#ffffff, #e5ecf3) no-repeat;
    background: linear-gradient(#ffffff, #e5ecf3) no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5ecf3', GradientType=0);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#myform ol li input[type="checkbox"],
#myform ol li ol li input {
    width: auto;
    display: inline;
}

#myform textarea {
    height: 75px;
}

#myform ol li select {
    width: 50%;
    min-width: 100px;
    color: #1f2937;
    font-weight: bold;
    border: 0;
    background: #3b82f6;
    background: -webkit-linear-gradient(#3b82f6, #1e40af);
    background: -moz-linear-gradient(#3b82f6, #1e40af);
    background: -o-linear-gradient(#3b82f6, #1e40af);
    background: -ms-linear-gradient(#3b82f6, #1e40af);
    background: linear-gradient(#3b82f6, #1e40af);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b82f6', endColorstr='#1e40af', GradientType=0);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

#myform button,
#myform .buttonnav {
    width: 100px;
    height: 30px;
    float: right;
    margin: 5px 10px 10px 0;
    padding: 0;
    background: #1e3a8a;
    background: -webkit-linear-gradient(#1e3a8a, #0f172a);
    background: -moz-linear-gradient(#1e3a8a, #0f172a);
    background: -o-linear-gradient(#1e3a8a, #0f172a);
    background: -ms-linear-gradient(#1e3a8a, #0f172a);
    background: linear-gradient(#1e3a8a, #0f172a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e3a8a', endColorstr='#0f172a', GradientType=0);
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
}

#myform button:hover,
#myform .buttonnav:hover {
    background: #3b82f6;
    background: -webkit-linear-gradient(#3b82f6, #1e40af);
    background: -moz-linear-gradient(#3b82f6, #1e40af);
    background: -o-linear-gradient(#3b82f6, #1e40af);
    background: -ms-linear-gradient(#3b82f6, #1e40af);
    background: linear-gradient(#3b82f6, #1e40af);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3b82f6', endColorstr='#1e40af', GradientType=0);
}

#myform .buttonnav.prev {
    float: left;
    margin-left: 10px;
}

/* Hide sections */
.hidden {
    display: none;
}

/* Navigation Steps */
.nav ul {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 80%;
    max-width: 500px;
    margin: 50px auto 0;
    padding: 0;
}

.nav li {
    list-style: none;
    display: inline-block;
    padding: 5px 10px;
    margin: 0;
    color: #fff;
    font-size: .9em;
    background: #3b82f6;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    -webkit-box-shadow: inset 0 -3px 4px #1e40af;
    -moz-box-shadow: inset 0 -3px 4px #1e40af;
    box-shadow: inset 0 -3px 4px #1e40af;
    cursor: pointer;
    zoom: 1;
    display: inline;
}

.nav li#activetab {
    background: #1e3a8a;
    font-weight: bold;
    box-shadow: none;
}

/* Responsive Steps */
@media only screen and (max-device-width: 480px) {
    .nav ul {
        margin-top: 5px;
    }
}