/* 
    Created on : Aug 18, 2016, 1:42:53 PM
    Author     : bgoodrich
*/

#content {
    padding: 20px;
    flex: 1;
}

h1 {
    margin-top: 0px;
    margin-bottom: 0;
    font-size: 1.75em;
    text-align: left;
}

main p:not(.normal) {
    margin: 0px;
}

.headerLinks,
.pageBottom,
#pageBottomScreen,
#navButton {
    display: none;
}

.url-label {
    font-size: .8em;
    font-family: 'Roboto', verdana, sans-serif;
}

button::-moz-focus-inner {
    border:0;
}


.bodyButton.disabled {
    opacity:.5;
    cursor:default;
}


.material-icons {color: #005580; background: none; border: none;font-size: 1em;cursor: pointer;}
.grey, .gray { color: #999999; }

.wixie-button-blue {
    background: #fafafa;
    border: 1px solid grey;
    border-radius: 13px;
    padding: 4px 8px;
    margin-top: 5px;
}

.wixie-button-blue:hover {
    background: #f5f5f5;
}

.flex.container {
    display:flex;
}

.flex.container.flexcolumn {
    flex-direction:column;
}


.formItem > .wixie-button-blue {
    margin-left: 0;
}

.formrow.vertical.code > label {
    color: #2b2b2b;
}


.page-purchase .main-content {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px
}

.page-purchase .main-content  > :first-child {
    flex: 1;
    margin-bottom: 30px;
}

.page-purchase .main-content  > :nth-child(2) {
    flex-direction: column;
    margin: 0 auto;
    width: 100px;
    padding: 60px 10px 30px 10px;
    position: relative;
}

.page-purchase .error {
    border-color:red;
}

.page-purchase .invalid > .error {
    display:block;
}

.page-purchase .flex-container {
    display:flex;
}

.page-purchase .flex-title {
    flex: 1;
    margin-left: 10px;
    align-items: center;
    display: flex;
}

.page-purchase .flex-steps {
    margin-left: 10px;
}


.page-purchase .instruction {
    font-size: 90%;
    font-style: italic;
}


.page-purchase .error.message {
    color:red;
    display:none;
    margin-bottom:20px;
}


.page-purchase .modal-body .error.message {
    font-size:100%;
    display:block;
    margin-bottom:12px;
}


.page-purchase .ui-dialog-content.error.message {
    color:#454545;
    padding: 10px;
    font-weight: normal;
    font-size: 1em;
    border: none;
}

.page-purchase .progress {
    height:34px;
    padding: 0px;
    margin: 0px;
    margin-top: 15px;
}

.page-purchase .progress > li {
    background-color:lightgray;
    border-radius:50%;
    box-shadow: 0 0 0 2px white, 0 0 0 3px lightgray;
    color:white;
    height:18px;
    line-height:16px;
    list-style-type:none;
    font-size: .8em;
    margin-right:12px;
    text-align:center;
    width:18px;
    cursor: pointer;
}

.page-purchase  .progress > li.current {
    background-color:#6691CD;
    box-shadow: 0 0 0 2px white, 0 0 0 3px #6691CD;
    cursor: default;
}

.page-purchase .main-content > :first-child > :nth-child(2) {
    border-top: 1px solid lightgrey;
    padding: 20px;
}


.page-purchase .main-content > :first-child > :nth-child(2) .features {
    margin:10px 0 0 1em;
}

.page-purchase .main-content > :first-child > :nth-child(2) > button {
    display:block;
    margin:30px auto 10px;
    font-size: 1em;
}

.page-purchase .main-content > :first-child > :nth-child(2) > button:not(.disabled):hover {
    background-color:#74B92F;
}

.page-purchase input[type=number] { 
    margin: 0; 
}

.page-purchase label { 
    font-family: 'Roboto',verdana, helvetica, arial, sans-serif;
    color:#2b2b2b;
}

.page-purchase .students > * > .formLabel > .small {
    line-height:.8em;
}

.page-purchase label.month, .page-purchase label.year { 
    text-align: right;
    margin-right: 10px;
}


.page-purchase section:last-child > * > .formLabel > .small {
    line-height: 1.2em;
    position: relative;
    top: -9px;    
}

.page-purchase section.promocode label {
    flex: 0 0 160px;
    position:relative;
    top:-1px;
}

.page-purchase section.promocode input {
    width:162px;
}

/** form **/

.anyFormField { font-size: 1.0em; font-family: verdana, helvetica, arial, sans-serif; background: #FFFFFF; border: 1px solid #0096d7; border-radius: 2px; color: #000000; padding: 4px; margin: 0; }


.page-purchase .form.pay .expire > :not(:last-child),
.page-purchase .form.pay .card > :not(:last-child){
    margin-right: 4px;
}

.page-purchase .form.pay .expire> :last-child,
.page-purchase .form.pay .card> :last-child,
.page-purchase .form.pay .exp> :last-child{
    flex:2 2 auto;
}

.page-purchase .panel h3, .page-purchase .panel h4 {
    font-weight: normal;
    font-family: 'Roboto',verdana, helvetica, arial, sans-serif;
    margin: 0px;
}

.page-purchase section {
    margin-bottom: 20px;
    padding:0;
}

.page-purchase #section-promocode-information > :first-child > :nth-child(2) {
    margin-bottom:20px;
}

.page-purchase section.promocode > div > button.link {
    color:#999;
    font-weight: normal;
    font-size:11px;
}


.ff.page-purchase section.promocode > div > button.link {
    position:relative;
    left:-2px;
}


.page-purchase section.promocode .formrow.vertical.hide {
    display:none;
}


.page-purchase .form.pay > section {
    margin-bottom: 0;
}

.page-purchase .form.pay .small.grey {
    margin-bottom: 10px;
}

.page-purchase .form.pay > section select {
    height:36px;
    padding-left:8px;
    width: 100%;
}

.page-purchase .form.pay > section.holder.login.options > :first-child {
    align-self:flex-start;
}

.page-purchase .form.pay > section.holder.login.options > .rightside {
    min-height:110px;
}


.form .formrow.vertical,
.form .flexrow {
    display: flex;
    flex:1 1 auto;
    margin-bottom:4px;
    width:100%;
}

.page-purchase .form.pay .formrow.vertical {
    flex-direction:column;
}

.page-purchase .form .flexrow > input:first-child {
    margin-right:4px;
}

.page-purchasing .formrow.vertical.expiration > input {
    margin-right: 0;
}

.page-purchase input, .page-purchase select {
    height: 30px;
    min-width: 70px;    
    padding: 2px 8px;
}

.page-purchase input {
    width: 97%;
}

.page-purchase .formrow > select {
    padding:2px 0;
}


.page-purchase .form.pay > *:nth-child(2) > *:nth-child(2) > *:first-child > input {
    width:100%;
}

.page-purchase .form.pay .cc > input.error {
    border-color:red;
}

.page-purchase .form.pay .cc input.error+span.errormessage {
    color: red;
    display: flex;
    flex: 0 0 80px;
    height: 34px;
    line-height: 38px;
    padding: 0 8px;
}

.page-purchase input.students {
    height: 40px; 
    width: 170px;
    padding: 2px 4px;
    font-size: 1.3em;
    text-align: center;
}

.page-purchase input.year {
    width: 67px;
    text-align: center;
}

.page-purchase select.frequency {
    height: 46px; 
    width: 180px;
    padding: 2px 4px;
    font-size: 1.3em;
}

.page-purchase select.month {
    height: 36px; 
    width: 100px;
    padding: 2px 4px;
}

.page-purchase .formLabel {
    width: 150px;
    margin-right: 10px;
}

.page-purchase .formItem {
    flex: 1;
    position:relative;
}

.page-purchase .formItem.username.approved::after,
.page-purchase section.promocode .formItem.holder.input.valid::after,
.page-purchase section.promocode .formItem.holder.input.invalid::after {
    color: green;
    content: "\2713";
    font-size:1.2em;
    font-weight: bold;
    display: block;
    position: absolute;
    right: -2px;
    top: 6px;
}

.page-purchase section.promocode .formItem.holder.input.invalid::after {
    color:red;
    content:"!";
    font-weight:bold;
}

.page-purchase .subtotal {
    font-size: 1.2em;
    line-height:31px;
}

.page-purchase .discount.subtotal {
    position:relative;
    left:-.5em;
}

.google.page-purchase .subtotal,
.ff.page-purchase .subtotal {
    line-height:30px;
}

.page-purchase .form .cc .formrow.vertical > [type=number] {
    width:95%;
}

.page-purchase .form .formrow.vertical > .wrapper {
    width:auto;
    padding-top:0;
}

.page-purchase .form .wrapper.select::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--primary-color);
    content: " ";
    height: 0;
    position: absolute;
    right: 5px;
    top: 16px;
    width: 0;
}

.page-purchase .form .wrapper.select select {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance:none;
    overflow:hidden;
    padding:0;
    width:100%;
}

.page-purchase .form .wrapper.select select::-ms-expand {
    display:none;
}

.page-purchase .form .flex.container.flexrow > label, 
.page-purchase .form .flex.container.flexrow > span {
    height: 34px;
}

.page-purchase .form .flex.container.flexrow > label {
    width: 80px;
}

.page-purchase .form .flex.container.flexrow.Monthly {
    display:none;
}

.page-purchase .form .flex.container.flexrow.Yearly input {
    display:none;
}

.page-purchase .form .section-subscription-intro {
    display:none;
}

/**  name/custom url page **/

.form.purchase.single .customurl {
    display:none;
}

section.name.userinfo > div {
    margin:8px 0;
}
/** end name/custom url page  **/




/** email/google set up **/
.page-purchase .form section.holder.options {
    margin-top:24px;
}

.page-purchase .form section.holder.options .flex.container.flexrow > label {
    width:auto;
}

.page-purchase .form section.holder.options .label {
    margin-right:20px;
}

.page-purchase .form section.holder.options .option {
    flex:1;
    display:flex;
    align-items:center;
}

.page-purchase .form section.holder.options .option input {
    margin: 0 10px 0 0;
}

.page-purchase .form section.holder.options .options-second{
    margin: 10px 0 0 20px;
}

.page-purchase .form section.holder.options .options-second input.email{
    margin: 0 0 10px;
}

.page-purchase section[data-selection="google"] .options-second div.email,
.page-purchase section[data-selection="email"] .options-second div.google {
    display:none;
}

/** end email/google set up **/

.page-purchase .form .flex.container.flexrow > span {
    font-style: italic;
    margin-left: 10px;
    text-align: right;
    font-size: .8em;
}

.page-purchase input[type=radio] {
    height: 18px;
    position: relative;
    min-width:20px;
    max-width:20px;
}

.page-purchase .form .card > * {
    flex-wrap:wrap;
}

.page-purchase .formrow.setting-up.hidden,
.page-purchase #btn-set-up-account.hidden{
    display:none;
}

.page-purchase .formrow.setting-up {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: #d3d3d38c;
    height: 100%;
    width: 100%;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-purchase .formrow.setting-up div {
    padding: 10px 20px;
    background: #ffffff;
    border: 1px solid #3c3c3c;
    display: flex;
    align-items: center;
}

.page-purchase .formrow.setting-up img {
    margin-left:10px;
}

/** payment page  **/

.page-purchase .form .flexrow > .formrow.vertical.number > input {
    width:90%;
}

.page-purchase .form .flexrow > .formrow.vertical > input {
    width: 90%;
}

.page-purchase .payment-types {
    margin-left: auto;
    height: 25px;
}

/**  confirm **/
.confirmation dl {
    display: block;
    height: auto;
    margin-bottom: 20px;
    min-height: 80px;
}

.confirmation dl.discount {
    min-height:160px;
}

.confirmation dl.discount > dd.total.discount {
    position:relative;
    left:-4px;
}


section.confirmation dl span {
    display: inline-block;
    text-align: right;
    width: 65px;
}

section.confirmation dl > * {
    display: inline-block;
    float: left;
    height: 24px;
    line-height: 24px;
    margin: 0;
    width: 70%;
    margin-bottom:4px;
}    

section.confirmation dl > dd {
    width: 20%;
}


section.confirmation dl > .total {
    font-weight: bold;
}

section.confirmation dl > dd.total {
    border-top:1px solid #b7b7b7;
}

/**  account setup  **/
.page-purchase .prompt > span {
    line-height: 35px;
    margin-right:10px;
}

.google.page-purchase .prompt > span,
.ie11.page-purchase .prompt > span {
    line-height:36px;
}

.page-purchase .prompt > input {
    width:75%;
}

.page-purchase .form .flex.container.flexrow.password {
    position:relative;
}

.page-purchase .form .flex.container.flexrow.password.notvalid::after {
    bottom: -3px;
    color: red;
    content: "Password and Confirm Password must match.";
    font-size: 92%;
    left: 0;
    position: absolute;
}

.page-purchase .form .password .formrow.vertical .anyFormField {
    display:flex;
    padding:0;
}

.page-purchase .form .password .formrow.vertical input {
    border:none;
    clear: none;
    flex: 1 1 auto;
    margin-right: 0;
    max-width: 90%;
}

.page-purchase .form .password .formrow.vertical input::-ms-clear,
.page-purchase .form .password .formrow.vertical input::-ms-reveal {
    display:none;
}

.page-purchase .form .password .formrow.vertical .anyFormField button {
    border-radius:0;
    width:60px;
}

.page-purchase .form .password .formrow.vertical {
    position:relative;
}

.page-purchase .form .password .formrow.vertical::after {    
    display: inline-block;
    font-size: 200%;
    height: 34px;
    position: absolute;
    right: 0;
    top: 26px;
    width: 34px;
}

.page-purchase .form .password .formrow.vertical.success::after {
    color: green;
    content: "\2714";
}

.page-purchase .form .password .formrow.vertical.notvalid::after {
    color: red;
    content: "!";
    font-weight:bold;
}


.page-purchase .form .prompt.flex.container.flexrow {
    flex-direction:row;
    margin-bottom:0;
    position:relative;
}

.page-purchase .form .prompt.flex.container.flexrow:after {
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.page-purchase .form .prompt.flex.container.flexrow.success:after {
    color: green;
    content: "\2714";
}

.page-purchase .form .prompt.flex.container.flexrow.notvalid:after {
    color: red;
    content: "!";
    position: relative;
    top: 5px;
    right: 15px;
}

.page-purchase .form .prompt.flex.container.flexrow > * {
    display: flex;
    flex: 1 1 auto;
}

.page-purchase .form .prompt.flex.container.flexrow > :first-child {
    line-height:38px;
    margin-right: 14px;
    min-width: 110px;
}

.page-purchase .form section.url {
    position:relative;
}

ul#ul-suggestions {
    background: white none repeat scroll 0 0;
    border: 1px solid #0096d7;
    cursor:pointer;
    padding: 0;
    width: 190px;
}

ul#ul-suggestions > li {
    border-bottom: 1px solid #0096d7;
    height: 34px;
    line-height: 34px;
    list-style: outside none none;
    padding: 2px 10px;
    text-align:left;
}

ul#ul-suggestions > li:last-child {
    border-bottom:0;
}


.page-purchase .ui-dialog {
    clear:both;
}

.page-purchase .ui-dialog .suggestions {
    text-align:left;
    font-size: .8em;
}


.page-purchase .ui-dialog.loading .ui-dialog-titlebar {
    height:4px;
}

.page-purchase .ui-dialog.loading .dialog.content {
    margin: 10px;
    text-align: center;
    font-family: 'Roboto', verdana, helvetica, arial, sans-serif;
}

.page-purchase .ui-dialog.loading .dialog.content span {
    margin-left: 10px;
}

.page-purchase .ui-dialog-titlebar.ui-widget-header {
    display: none;
}

.page-purchase .ui-dialog-buttonpane.ui-widget-content {
    border: none;
    padding: 0 10px 10px;
    text-align: right;
}

.page-purchase .ui-dialog-buttonset button.page.primary {
    color: #ffffff;
    background: var(--primary-color);
    border: none;
    border-radius: 2px;
    margin-left: 20px;
    padding: 6px 10px;
}

/**  auto renew  **/
.page-purchase .autorenew > div,
.page-purchase .autorenew > :last-child > * {
    display: flex;
    flex:1;
    align-items: center;
}


.page-purchase .autorenew > :last-child {
    flex:4;
    margin-left: auto;
    max-width: 384px;
}

.page-purchase .form.single .autorenew > :first-child {
    max-width:0px;
}

.page-purchase .form.single .autorenew > :last-child {
    margin-left:0;
}

.page-purchase .autorenew label {
    cursor:pointer;
}

.page-purchase .form .autorenew > .flexrow > input {
    display:flex;
    width:20px;
    height:20px;
    min-width: 20px;
    max-width: 20px;
    margin-right: 12px;
}

.page-purchase .form.single .autorenew .flexrow input[type="checkbox"] {
    margin-left:0;
}
/** end auto renew  **/




/** begin phone view **/

@media (max-width: 500px){
    
    #page {
    padding: 10px;
    }
    
    #content {padding: 10px;}
    
    .page-purchase .flex-steps {
    display: none;
    }    
    
    .page-purchase .flex-container {
    display: block;
    }
    
    .page-purchase .main-content > :first-child > :nth-child(2) {
    padding: 10px;
    height: auto;
    }
    
    .page-purchase .formLabel {
    width: 120px;
}
    
    .page-purchase .form .flex.container.flexrow > label {
    width: 60px;
}

.page-purchase .form .flex.container.flexrow > span {
    font-size: .7em;
}

.page-purchase input,
.page-purchase .form .flexrow > .formrow.vertical.number > input,
.page-purchase .form .flexrow > .formrow.vertical > input {
    width: 93%;
}

.page-purchase .flex.container.flexrow.card,
.page-purchase .flex.container.flexrow.exp,
.page-purchase .account .formrow.vertical,
.page-purchase .url .formrow.vertical{
    display: block;
}

.page-purchase .form.pay > section select {
    width: 97%;
}

section.confirmation dt {
    width: 60%;
}

section.confirmation dl > dd{
    width: 30%;
}

.page-purchase input > .wixie-button-blue {
    margin-top: 10px;
}

.page-purchase url-label {
    margin-bottom: 5px;
}

.page-purchase .formItem.username.approved::after,
.page-purchase section.promocode .formItem.holder.input.valid::after,
.page-purchase section.promocode .formItem.holder.input.invalid::after {
    right: 20px;
}


}



@media (max-width: 650px){
    
    .page-purchase .main-content {
    display: block;
    }
    
    .page-purchase .main-content > :first-child {
    margin: 0 auto;
    width: inherit;
    padding-bottom: 10px;
    }
    
    .page-purchase .main-content > :nth-child(2) {
    margin: 10px;
    width: 100px;
    padding: 0;
    position: relative;
    }
}

.page-purchase .form .formrow.vertical.wriddle-pricing {
    display:none;
}