body{
width:100%;
  height:100%;
} 

form {
  background-color: #0A2876;
  color:white;
  margin:auto;
 
 }

 p{
 margin-bottom: 0px;
}

 body{
  background-color: #0A2876;
  margin:auto;
  font-family: 'Roboto', sans-serif;
 }

.ThankYouMessage{
font-family: 'Roboto', sans-serif;
font-size:36px;
font-weight:600;
line-height:40px;
color:#ffffff;
text-align:center;
margin-top:20px;
}

.RequiredFieldAsterisk{
padding-top:10px;
font-style: italic;
font-size:14px;
}

.pad-20{

padding:20px;

}

.centered{
position: relative;
text-align:center;
    
}

#thankYouLessonPlan-btn{
width:300px !important;
 background-color: #0A2876;
  border: solid white;
  border-width: 2px;
  color: white;
  padding: 5px 28px; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:5px;
  font-size: 16px;
  margin-top: 32px;
  cursor: pointer;
}

#getStartedWithLessonOne-btn{
width:300px  !important;
 background-color: #0A2876;
  border: solid white;
  border-width: 2px;
  color: white;
  padding: 5px 28px; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:5px;
  font-size: 16px;
  margin-top: 32px;
  cursor: pointer;
}

.mobileGreeting{
font-size: 18px;
line-height: 22px;
display:none;
}
 
/*  RADIO BUTTON STYLING  */ 
 /* The container */
.container-RADIO {
  display: block;
  position: relative;
  padding-left: 23px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 16px;
 line-height: 19.2px;
 
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-RADIO input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark-RADIO {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #0A2876;
 border: solid white;
border-width: 1px;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container-RADIO:hover input ~ .checkmark-RADIO {
  background-color: #FFFFFF;
}

/* When the radio button is checked, add a blue background */
.container-RADIO input:checked ~ .checkmark-RADIO {
  background-color: #FFFFFF;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark-RADIO:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-RADIO input:checked ~ .checkmark:after {
  display: block;
}

 
 
/* CHECKBOX STYLING */ 

/* The container for checkbock */
.container {
  display: block;
  position: relative;
  padding-left: 23px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 16px;
 line-height: 19.2px;
 vertical-align: text-top;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 color:white;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: #0A2876;
 border: solid white;
  border-width: 1px;
 
}

/* On mouse-over, add a white background color */
.container:hover input ~ .checkmark {
  background-color: #ffffff;
}

/* When the checkbox is checked, add a whtie background */
.container input:checked ~ .checkmark {
  background-color: #ffffff;
}


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #0A2876;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);

}
 
 
 .form-padding{
  padding:36px 45px 36px 45px;
 }
 
 .pad-bot8{
  padding-bottom:8px;
 }
 
 .pad-top32{
  padding-top:32px;
 }
 
 .pad-bot12{
  padding-bottom:12px;
 }
 
 .pad-top24{
  padding-top:24px;
 }

 .pad-top12{
  padding-top:12px;
 }

 .pad-bot24{
  padding-bottom:24px;
 }
 
 .email-input{
  width:257px;
  height:40px;

 }
 
 .other-input{
  width:257px;
  height:40px;
  margin-left:5%;
margin-top:8px;
 }

#thankYouLessonPlan-btn{
width:200px ;
}

getStartedWithLessonOne-btn{
width:200px ;
}
 
 .btn-primary{
  background-color: #0A2876;
  border: solid white;
  border-width: 2px;
  color: white;
  padding: 5px 28px;
  width:150px;
  
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius:5px;
  font-size: 16px;
  margin-top: 32px;
  cursor: pointer;
}
 
 .btn-primary:hover{
  background-color: #ffffff;
   color: #0A2876;
  border: solid white;
  
 }
 
 
 .btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
  font-weight: 600;
}
 .btn-primary:after{
   background-color: #ffffff;
  }

.lastChildNoPadding{
margin-bottom:0px; }

#alert {
  margin: 10px 0 10px 20px ;
  color: #FFC324;
  font-weight: regular;
  font-size: 16px;

  text-align: left;
}

  
 
/* Mobile styling */
@media screen and (max-width:991.98px){
.mobileGreeting{ 
  display:block;
}
}

 
/* Mobile styling */
@media screen and (max-width:550px){

.mobileGreeting{ 
  display:block;
}

.email-input{
  width:162px;
  height:40px;
 }

.other-input{
width:162px;
  height:40px;
}

 form{
  width:100%;
}

body{
width:100%;
}

 .form-padding{
   padding: 24px 17px 24px 17px;
  }

.pad-top32{
padding-top:28px;
}

 .btn-primary{
  padding: 6px 11px;
  width:106px;
font-size:14px;
  
}


#thankYouLessonPlan-btn{
width:200px;
}

#getStartedWithLessonOne-btn{
width:200px;
 
}


}