﻿/* ============== Defaults ============== */

div#main.sign-up-form.border-box div.row div.col-12 div#ctl00_cntBody_caseForm.formBox div#ctl00_cntBody_caseDetails div.field-wrap.field-wrap-relative div.tab-group span.selectPaymentOption input#chkAuth {
   display: block !important;
   height: 25px;
   left: 13em;
   margin: 10px 0 0 10px;
   position: absolute;
   width: 25px;
   z-index: 6;
   -webkit-appearance: checkbox !important;
}
div#ctl00_cntBody_caseDetails div.field-wrap.field-wrap-relative div.tab-group span.selectPaymentOption label span.switchCheckedIcon {
   display: none !important;
}

input[type="submit"] 
{
    -webkit-appearance: none !important;
}
select 
{
    color: #888;
}
.note 
{
    margin-bottom: 1em;
    display: inline-block;
}

.radio-hidden {
    display: none;
}
    
/* ============== End Defaults ========== */
.formBox *, .formBox *:before, .formBox *:after {
    box-sizing: border-box;
    -webkit-appearance: none;
}

.formBox {
    font-family: Lato, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0 auto;
    max-width: 620px;
    border-radius: 0;
    overflow: hidden;
}

.smallFormLeft 
{
    margin: 0;
    max-width: 450px;
}

.formBox .tab-content 
{
    position:relative;
}

.formBox h2
{
    color: #363F48;
}

.formBox p 
{
    font-size: 16px;
}

.formBox p.medium 
{
    font-size: 18px;
}

.formBox .tab-group {
  padding:0;
  margin: 20px auto;
}

.formBox .tab-group:after {
	content: "";
	display: table;
	clear: both;
}

.formBox .tab-group .selectPaymentOption input[type="radio"], .hideCheckbox input[type="checkbox"], #payPalInfo, #stripePayment, .formBox .tab-group .selectPaymentOption input[type="checkbox"]
{
    display: none;
}

.formBox .tab-group .selectPaymentOption label
{
    float:left;
    background: rgba(255,255,255,0.8);
    color: #363F48;
    padding: 10px 0;
    width: 48%;
    text-align: center;
    cursor: pointer;
    pointer-events: all;
    font-size: 18px;
    margin: 0 1%;
}

.formBox .tab-group .selectPaymentOption label:hover
{
    background: ghostwhite;
}

.formBox .tab-group .selectPaymentOption label .fa
{
    min-width: 0;
    padding: 0;
    color: #363F48;
    background: none;
    margin-left: 5px;
    top: 15px;
}

.formBox .tab-group input[type="submit"]#ctl00_cntBody_ctlLoginView_btnRequestPassword {
    font-size:14px !important;
}

.formBox .tab-group input[type="submit"].centered {
    display:block;
    margin: 1em auto;
}

.formBox h1 {
  text-align:center;
  color:#363F48;
  margin:0 0 20px;
}

.formBox  h1.leftTitle
{
    text-align:left;
}

.formBox .field-wrap label {
  position: relative;
  color:#363F48;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:16px;
  margin-bottom: 5px;
  display: block;
}

.formBox .field-wrap .fa {
    position: absolute;
    padding: 8px;
    min-width: 39px;
    text-align: center;
    color: #363F48;
}

#additionalInfringing .field-wrap .fa {
    top: 1px;
}
.formBox label.req {
  	margin:2px;
  	color:#6bc530;
}

.formBox label.active {
  transform:translateY(50px);
  left:2px;
  font-size:12px;
}

.formBox label.active.req {
    opacity:0;
}

.formBox label.highlight {
	color:#363F48;
}

.formBox input[type="text"], .formBox input[type="password"] {
  padding: 5px 10px 5px 35px;
}

.formBox input[type="text"].noEdit {
  margin: 20px 0 0;
  padding: 5px;
  font-size: 14px;
  cursor:text;
}

.formBox input[type="file"] {
    display: block;
    margin: 2em 0;
}

.formBox input[type="text"], .formBox input[type="password"], textarea {
  font-size:16px;
  display:block;
  width:100%;
  font-family: Lato, Helvetica, Arial, sans-serif;
  line-height: 1.3;
  height:100%;
  background:ghostwhite;
  background-image:none;
  border: 1px solid #363F48;
  color:#363F48;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.formBox input.cardInput {
  width: auto;
}

.formBox input:focus, .formBox textarea:focus {
	outline:0;
}

.formBox textarea {
  resize: vertical;
  font-family: Lato, Helvetica, Arial, sans-serif;
  height:200px;
  font-size: 1em;
  padding:10px 10px 5px 35px;
  color: #363F48;
}

.formBox .field-wrap {
  position:relative;
  overflow: hidden;
  margin-bottom: 1em;
}

.field-wrap-date 
{
    width: auto;
    margin-right: 15px;
    float: left;
}
.formBox select {
    display: block;
    margin: 20px 0;
    padding: 5px;
    font-family: Lato, Helvetica, Arial, sans-serif;
    outline: none;
    color: #363F48;
    border: 1px solid #363F48;
    border-radius: 2px;
    clear: both;
}

.formBox .field-wrap #additionalInfringing .field-wrap 
{
    margin: 5px 0 5px;
    opacity: 1 !important;
}

.formBox .top-row {
    margin-top: 1em;
}

.formBox .top-row:after {
    content: "";
    display: table;
    clear: both;
}

.formBox .top-row > div:last-child { 
	margin:0;
}

.formBox .button-block {
  display:block;
  width:100%;
}

/*===== SIGN UP =====*/

#div1  {
    margin-top: 30px;
}
#div1 .button 
{
    font-size: 12px;
}

/* PayPal Box */

#payPalPaymentBox 
{
    background: #fff;
}

/*======== Dynamic Form Boxes ========*/

.tabEditView {
    width: 100%;
    overflow: hidden;
}

.tabEditView tr td.dataLabel, .tabEditView tr td.dataField {
    display: block;
    width: 100% !important;
}

.tabEditView tr td.dataLabel {
    margin:0.5em 0;
}
table.tabForm .tabEditView tr td.dataField input, table.tabForm .tabEditView tr td.dataField textarea, table.tabForm .tabEditView tr td.dataField select {
    padding: 5px;
    margin-bottom: 0.5em;
    font-family: Lato, Helvetica, Arial, sans-serif;
    line-height: 1.3;
    width: 95% !important;
    height:100%;
    background:none;
    background-image:none;
    border:1px solid #363F48;
    color:#363F48;
    border-radius:2px;
    transition:border-color .25s ease, box-shadow .25s ease;
}

/* STEP SIGN-UP FORM */

.sign-up-step {
    display: block;
    margin: 1em 0;
    padding: 1em 0;
    font-size: 1.2em;
}

.sign-up-step .step-number {
    background: #363F48;
    color: #fff;
    padding: 1em;
    margin-right: 0.5em;
}

#restartForm {
    position: absolute;
    right: 0;
    top: 0.7em;
}

#restartForm .fa {
    margin-right: 0.5em;
}

/* ==== TAKEDOWN OPTIONS ==== */

#takedownChoice {
    overflow: hidden;
    clear: both;
    padding: 1em 0;
}

label.takedownLabel {
    display: block;
    text-align: center;
    vertical-align:top;
    width: 96%;
    border: 7px solid #ccc;
    padding: 0.5em 0.5em 1em;
    margin: 2%;
    cursor: pointer;
    position: relative;
}

label.takedownLabel .fa {
    font-size: 3em;
    margin: 0.5em 0;
}

label.takedownLabel label.price {
    font-weight: bold;
}

label.takedownLabel .fa-check-square-o, label.takedownLabel .fa-square-o {
    font-size: 2em;
    position: absolute;
    right:0;
    bottom: 0;
    margin: 10px;
    color: #6bc530;
}

label.takedownLabel .fa-check-square-o {
    display: none;
}

label.takedownLabel.active {
    background: gainsboro;
}

label.takedownLabel.active .fa-check-square-o {
    display: inline-block;
}

label.takedownLabel.active .fa-square-o {
    display: none;
}

label#total-price {
    display: block;
    text-align: center;
    font-size: 1.5em;
    margin: 0.5em auto;
}

/* Sign-Up Form Box */

.sign-up-form {
    max-width: 720px;
    margin: 0 auto 1em;
    padding: 0 0 2em;
    background: #fff;
    box-shadow: 0 1px 3px #363F48;
    overflow: hidden;
}

.form-header {
    text-align: center;
    padding: 1em 0;
    background: #363F48;
}

.form-header h2, .form-header h3 {
    margin: 0;
}

.sign-up-form .form-header h2, .sign-up-form .form-header .form-price {
    color: #fff;
}

/* Payment Options */

.checkout-option {
    width: 48%;
    float: left;
    text-align: center;
    padding: 0 1em 1em;
    margin: 1%;
    border: 7px solid #ccc;
    cursor: pointer;
    background-color:ghostwhite;
}

.checkout-option input[type="image"], .checkout-option img {
    max-width: 90%;
}

/*============================MEDIA============================*/
@media screen and (min-width: 600px) {
.formBox .top-row .field-wrap {
    float:left;
    width:48%;
    margin-right:2%;
}

.formBox .top-row .field-wrap:nth-of-type(2n) {
    width:50%;
    margin-right:0;
}

/* ==== TAKEDOWN OPTIONS ==== */

label.takedownLabel {
    width: 46%;
    float: left;
    height: 315px;
}

label.takedownLabel label.price {
    font-weight: bold;
}

/* COUPON */

#couponButton {
    margin: 0;
}

}

@media screen and (min-width: 720px) {
/*======== Dynamic Form Boxes ========*/

.tabEditView tr td.dataLabel, .tabEditView tr td.dataField {
    width: 50% !important;
    float: left;
}

label#total-price {
    font-size: 2.2em;
}

}

@media screen and (min-width: 1000px) {

.formBox p.medium 
{
    font-size: 18px;
}

.formBox .tab-group {
  margin: 0 auto;
}

.formBox .tab-group:after {
	content: "";
	display: table;
	clear: both;
}

.formBox textarea {
  font-size: 1em;
}



}