input[type=submit],
input[type=button] {
   -webkit-appearance: none;
}


#EventContainer {
   max-width: 648px;
   margin: 0px auto;
   font-family: Arial, Sans-Serif;
}


/* Page Titles */
#lblTitle {
   font-size: 28px;
   font-weight: bold;
   font-style: italic;
   display: block;
   text-align: center;
}
#lblIntro {
   font-size: 16px;
}
#EventContainer h1 {
   font-size: 24px;
   font-family: Arial, sans-serif;
   margin-top: 0px;
   text-align: center;
}



/* Donor Sign In */
.DonorBar {
   text-align: center;
   font-size: 12px;
   margin-bottom: 10px;
   font-weight: bold;
}
.DonorBar a {
   display: inline-block;
   margin: 3px 10px;
}



/* Gray Content Box */
.Box {
   padding: 30px 30px;
   width: 100%;
   background-color: #F0F0F0;
   border-radius: 10px;
   color: #404040;
   font-size: 14px;
   box-sizing: border-box;
}
.Box h2 {
   font-size: 18px;
   margin-top: 0px;
   margin-bottom: 15px;
   text-align: center;
}



/* Form Row to contain inputs */
.Row {
   font-size: 0px;
   margin-left: 10px;
   padding: 3px;
   clear: both;
}

.Row label {
   font-size: 14px;
   display: inline-block;
   vertical-align: middle;
}
.Row > label {
   padding-right: 10px;
   width: 170px;
   text-align: right;
}
.Row > label.AlignTop {
   vertical-align: top;
   margin-top: 2px;
}
.Row > label::before {
   content: "* ";
}
.Row > label.NotRequired::before {
   content: "";
}

.Row select,
.Row input[type=text],
.Row input[type=email],
.Row input[type=number],
.Row textarea,
.Row .PseudoInput {
   width: 300px;
   font-size: 14px;
   vertical-align: middle;
   display: inline-block;
   border: 0px;
   outline: 0 none;
   padding: 8px 10px;
   border-radius: 5px;
   box-sizing: border-box;
   text-align: left;
   position: relative;
}
.Row select {
   -webkit-appearance: none;
   -moz-appearance: none;
   -o-appearance: none;
   appearance: none;
   background-image: url(/Media/Images/Icon_Small/SelectBlack.png);
   background-repeat: no-repeat;
   background-position: right 10px top 50%;
   padding-right: 20px;
   background-color: white;
}
.Row select::-ms-expand {
    display: none;
}

.Row input[type=checkbox],
.Row input[type=radio] {
   transform: scale(1.6);
}

.Row .RowMobile {
   display: inline-block;
   float: right;
}

.Row.CheckboxRow input {
   vertical-align: middle;
}



.CheckboxContainer {
   display: inline-block;
   position: relative;
   padding-left: 30px;
   margin-right: 10px;
   cursor: pointer;
   line-height: 21px;
}
.CheckboxContainer input {
   position: absolute;
   opacity: 0;
   display: none;
   height: 0;
   width: 0;
}

.CheckboxContainer .Checkmark {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 19px;
   width: 19px;
   background-color: white;
   border: 1px solid #444;
}
.CheckboxContainer input[type=radio] ~ label .Checkmark {
   border-radius: 50%; 
}
.CheckboxContainer:hover input ~ label .Checkmark {
   background-color: #EEEEEE;
}
.CheckboxContainer input:checked ~ label .Checkmark {
   background-color: #2196F3;
}

.CheckboxContainer .Checkmark:after {
   content: "";
   position: absolute;
   display: none;
}
.CheckboxContainer input:checked ~ label .Checkmark:after {
   display: block;
}
input[type=radio] ~ label .Checkmark:after {
   top: 6px;
   left: 6px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: white;
} 
input[type=checkbox] ~ label .Checkmark:after {
   left: 6px;
   top: 2px;
   width: 5px;
   height: 10px;
   border: solid white;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}


/* Extra Form Styles */
.Tooltip {
   font-size: 13px;
   color: blue;
}

.Button {
   font-size: 16px;
   text-transform: uppercase;
   padding: 15px 30px;
   /*background-color: #0a3870;*/
   border-radius: 5px;
   cursor: pointer;
   color: White;
   text-align: center;
   border: 0px;
   margin-bottom: 5px;
}
.Button:hover {
   /* Initialized at the top of Donate.aspx */
}

.rowTribute {
   display: none;
}

#CardTypeOptions {
   text-align: center;
}
#CardTypeOptions > div {
   display: inline-block;
}
#CardTypeOptions > div * {
   vertical-align: middle;
   display: inline-block;
}
#CardTypeOptions img {
   margin: 0px 6px;
   cursor: pointer
}

.Error {
   font-weight: bold;
   color: red;
   font-size: 16px;
   font-family: Tahoma, Sans-Serif;
}

.Row.rowCheckbox > input {
   vertical-align: middle;
   margin-right: 10px;
}
.Row.rowCheckbox > label {
   display: inline !important;
   width: auto !important;
   vertical-align: middle;
}

#CAPTCHA table  {
   margin: 15px auto 0px auto;
}



/* Mobile Version */
@media (max-width: 680px) {
   /* Force this to block so the banner image will resize properly */
   #DP_Form > table,
   #DP_Form > table > tbody,
   #DP_Form > table > tbody > tr,
   #DP_Form > table > tbody > tr > td {
      display: block;
      width: 100%;
   }
   #imgForm {
      width: 100%;
   }

   .Box {
      padding: 20px 20px;
      width: 100%;
   }


   .Row {
      padding: 5px 0px;
   }

   .Row label {
      font-size: 16px;
   }
   .Row > label {
      width: 100% !important;
      text-align: left;
      margin-top: 0px;
   }
   .Row.CheckboxRow > label {
      width: auto !important;
   }

   .Row input[type=text],
   .Row input[type=email],
   .Row input[type=url],
   .Row input[type=tel],
   .Row input[type=password],
   .Row input[type=number],
   .Row input[type=date],
   .Row textarea,
   .Row select,
   .Row .PseudoInput {
      font-size: 16px;
      width: 100% !important;
      margin: 3px 0px 0px 0px !important;
   }
   
   .Row span {
      max-width: 100% !important;
   }

   .CardNumber {
      width: 100%;
   }
   .CardNumber img {
      right: 2px;
      top: 6px;
   }

   .Row .RowMobile {
      display: block;
      float: none;
      padding-top: 10px;
   }

   .Tooltip {
      display: none;
   }
}