#vsdf_form #errors {
padding: 10px 20px;
color: #c72411;
background: #ffd6d6;
border: 3px solid #ffbfbf;
font-size: 1em;
font-family: 'Geometria-Bold', helvetica;
font-weight: 500;
border-radius: .3em;
margin-bottom: 20px;
}
#vsdf_form {
width: 100%;
margin: 15px auto;
}
#vsdf_form #one-or-monthly {
text-align: center;
}
#vsdf_form #types {
display: inline-block;
margin-top: 10px;
}
#vsdf_form .type_text {
float: left;
display: inline-block;
text-align: right;
padding-top: 23px;
font-size: 1em;
}
#vsdf_form .type_dropdown {
float: right;
display: inline-block;
}
@media (max-width: 630px) {
#vsdf_form .type_text {
float: none;
width: 100%;
text-align: center;
}
#vsdf_form .type_dropdown {
float: none;
width: 100%;
}
#vsdf_form .dropdown-el {
min-width: 12em;
width: 100%;
margin-right: 1em;
min-height: 2.9em;
max-height: 2.9em;
}
}
#vsdf_form #amount-typed {
display: inline-block;
padding: 1em 1.2em;
margin: 0.5em;
border-radius: 0.25em;
background: #efefef;
font-size: 1em;
font-family: 'Geometria-Bold', helvetica;
font-weight: 900;
margin: 0;
width: 100px;
height: 49px;
}
#vsdf_form .pre_dollar {
position: relative;
display: none;
}
#vsdf_form .pre_dollar:before {
content: '$';
position: absolute;
color: #909090;
font-family: 'Geometria-Bold', helvetica;
font-size: 1em;
font-weight: 900;
top: -2px;
left: 9px;
z-index: 1;
}
#vsdf_form #submit-row {
clear: both;
padding-top: 10px;
text-align: center;
}
#vsdf_form #submit-row #go {
display: inline-block;
padding: .9em 1.8em;
margin: 0.5em;
cursor: pointer;
color: #fff;
font-size: 1em;
font-family: Geometria-Bold, helvetica;
font-weight: 900;
border-radius: 0.25em;
background: #ea922e;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.22);
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#vsdf_form #submit-row #go:hover {
background: #da811c;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 0px 0 rgba(0, 0, 0, 0.22);
} #vsdf_form .button-wrap {
text-align: center;
}
#vsdf_form .button-label {
display: inline-block;
cursor: pointer;
color: #292929;
border-radius: 0.25em;
background: #efefef;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.22);
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 10%;
min-width: 60px;
padding: 1em 0;
text-align: center;
margin: 5px 1%;
}
#vsdf_form .button-label h1 {
font-size: 1em;
font-family: Geometria-Bold, helvetica;
font-weight: 900;
margin: 0;
color: inherit;
}
#vsdf_form .button-label:hover {
background: #d6d6d6;
color: #101010;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.32);
}
#vsdf_form .button-label:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2), inset 0px -1px 0 rgba(0, 0, 0, 0.22);
}
@media (max-width: 630px) {
#vsdf_form {
width: 100% !important;
}
}
#vsdf_form #amount-other:checked + .button-label {
background: #0bd451;
color: #efefef;
}
#vsdf_form #amount-other:checked + .button-label:hover {
background: #05ae40;
color: #e2e2e2;
}
#vsdf_form #amount-other:checked + .button-label + .pre_dollar {
display: inline;
}
#vsdf_form .hidden {
display: none;
} #vsdf_form .dropdown-el {
margin-top: 10px;
min-width: 12em;
position: relative;
display: inline-block;
margin-right: 1em;
min-height: 2em;
max-height: 2em;
overflow: hidden;
top: .5em;
cursor: pointer;
text-align: left;
white-space: nowrap;
color: #9056a8;
outline: none;
border: .06em solid #9056a8;
border-radius: .2em;
background-color: #fff;
transition: 0.3s all ease-in-out;
}
#vsdf_form .dropdown-el input {
display: none;
}
#vsdf_form .dropdown-el label {
border-top: .06em solid #d9d9d9;
display: block;
height: 2em;
line-height: 2em;
padding-left: .5em;
padding-right: 2em;
cursor: pointer;
position: relative;
transition: 0.3s color ease-in-out;
color: #9056a8;
font-size: 1em;
letter-spacing: -0.01em;
}
#vsdf_form .dropdown-el label:nth-child(2) {
margin-top: 2em;
border-top: .06em solid #d9d9d9;
}
#vsdf_form .dropdown-el input:checked + label {
display: block;
border-top: none;
position: absolute;
top: 0;
}
#vsdf_form .dropdown-el input:checked + label:nth-child(2) {
margin-top: 0;
position: relative;
}
#vsdf_form .dropdown-el::after {
content: "";
position: absolute;
right: 0.6em;
top: 0.8em;
border: 0.4em solid #9056a8;
border-color: #9056a8 transparent transparent transparent;
transition: .4s all ease-in-out;
}
#vsdf_form .dropdown-el.expanded {
border: 0.06em solid #9056a8;
background: #fff;
border-radius: .25em;
padding: 0;
box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
max-height: 15em;
}
#vsdf_form .dropdown-el.expanded label {
border-top: .06em solid #d9d9d9;
}
#vsdf_form .dropdown-el.expanded label:hover {
color: #b358da;
}
#vsdf_form .dropdown-el.expanded input:checked + label {
color: #b358da;
}
#vsdf_form .dropdown-el.expanded::after {
transform: rotate(-180deg);
top: .55em;
}