/*Start Please Remove This on integration time*/
body {
  font-family: "Roboto-Regular";
}
.navbar-brand{
  padding: 8px 0;
}

.navbar-brand img{ width: 80%;}
.phone-number{
  font-size: 16px;
  font-family: "Roboto-Medium";
}
.phone-number img{
  margin-right: 3px;
}
.checkout-section {
  /*margin-top: 3%;*/
  background-color: #eee;
  padding: 4% 0;
}
.checkout-section .md-whiteframe-3dp {
  box-shadow: 0 1px 8px 0 rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.12);
  border-radius: 12px;
  background-color: #fff;
}
.lock-plan-inner-wrap .custom-radio-container p{
      font-size: 16px;
    color: #444;
    font-family: Roboto-Medium;
    font-weight: 200;
}
.lock-plan-inner-wrap .action-wrap p{  
      font-size: 20px;
    font-family: Roboto-Bold;
    margin: 0 0 2px;
  
}
.t-b-space{
  padding: 24px 0px;
}
.f-s-14{
  font-size: 14px !important;
}
.mem-benefit-inner{
  font-size: 16px;
  color: #fff;
  font-family: Roboto-Regular;
  margin-top: 15px;
}
.mem-benefit-inner p{
  margin: 0 0 15px;
}
.mem-benefit-inner p img{
  margin-right: 15px;
}
.lock-plan-inner-wrap .action-wrap .save-percent{
     color: #fff;
    background-color: #e63a11;
    padding: 5px 10px;
    font-size: 10px;
    font-family: Roboto-Bold;
    border-radius: 16px;
}
.lock-plan-inner-wrap .custom-radio-container .checkmark {
    top: 38%;
}
.checkout-section .head-name{
  text-align: center;
  font-family: "Roboto-Light";
  font-size: 36px;
  color: #000;
  margin: 20px 0;
}
.checkout-section .head-name span{
  font-family: "Roboto-Medium";
}
.checkout-section .Lock_in_Plan a{
  color: #e63a11;
  font-size: 20px;
  font-family: Roboto-Regular;
  text-decoration: underline;
  line-height: 1;
}
.wrap-head h2 span{
  font-family: Roboto-Light;
}
.final-step .secure-server h2{
  margin: 0;
  font-size: 18px;
  font-family: Roboto-Regular;
  color: #444;
  text-align: right;
}
.tandc{
    border-top: 1px solid #ddd;
    margin: 0 30px;
    padding: 30px 0;
}
.tandc p{
  font-family: Roboto-Regular;
    font-size: 12px;
    color: #787878;
}
.tandc .custom-checkbox-container{
  font-size: 14px;
  font-family: Roboto-Regular;
  color: #444;
}
.my-get-unli-acc-btn{
  font-size: 20px;
  font-family: Roboto-Medium;
  color: #fff;
  background-color: #e63a11;
  padding: 16px 36px;
  border: none;
  border-radius: 36px;
  outline: none;
}
.final-step .secure-server{
  background-color: #e3ebee;
  padding: 10px 30px;
}
.form-box{
  margin-top: 20px;
}
.payment-option-section, .payment-plan-section{
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
  border-radius: 12px;
  border: 2px solid #f2f2f2;
  padding: 15px;
  margin: 15px 0;
}
.payment-option-section .inner-wrap, .payment-plan-section .inner-wrap{
  padding-bottom: 15px;
}
.payment-option-active, .payment-plan-active{
  background-color: #fbf1cf;
  border: 2px solid #e8562a;
}
.payment-option-section .custom-radio-container, .payment-plan-section .custom-radio-container{
  margin: 0;
}
.checkout-section .Lock_in_Plan{
  margin-bottom: 28px;
}
.checkout-section .Already_have_an_account__Sign_in{
  color: #444;
  font-family: Roboto-Bold;
  font-size: 18px;
}
.checkout-section .Already_have_an_account__Sign_in a{
  color: #02aae9;
}
.checkout-section .md-whiteframe-3dp .whiteframe-wrap{
 padding: 30px;
}
.wrap-head h2{
  margin: 0;
  padding: 0 0 20px;
  border-bottom: 1px solid #ddd;
  font-family: "Roboto-Medium";
  font-size: 20px;
}
.md-whiteframe-left-dp{
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
  border-radius: 12px;
}
.md-whiteframe-left-dp .left-dp-head{
  padding: 15px 0 20px 0;
  font-family: Roboto-Regular;
  font-size: 20px;
  text-align: center;
}
.whiteframe-left-wrap{
  padding: 15px;
}
.md-whiteframe-left-dp .left-dp-head p{
  margin: 0;
}

.your-selected-essay .left-dp-head{
  background-color:#fbf1cf;
  border-radius: 12px 12px 0 0;
  padding: 15px;
  text-align: left;
}
.your-selected-essay{
  border-width: 1px;
  border-color: #e8562a;
  border-style: solid;
  background-color: #fbf1cf;
}
.your-selected-essay .whiteframe-left-wrap p{
  font-family: Roboto-Regular;
  font-size: 14px;
  color: #000;
}
.your-selected-essay .whiteframe-left-wrap p .light-text{
  color: #787878;
}
.order-summary .left-dp-head{
/*  background-color:#89ba00;
*/  border-radius: 12px 12px 0 0;
    background-color: #f5f5f5;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #ddd;
}
.order-summary{
  border-width: 1px;
  border-color: rgb(214, 214, 214);
  border-style: solid;
  background-color: rgb(255, 255, 255);
}
.order-summary .whiteframe-left-wrap p{
  font-family: Roboto-Regular;
  font-size: 16px;
  color: #444;
}
.total-box{
  border-top: 1px solid #aaa;
  padding-top: 10px;
}
.order-summary .total-box .text-price{
  font-family: Roboto-Bold;
  font-size: 18px;
}
.total-box p{
  margin: 0;
  color: #000 !important;
}
.dashed-line{
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
}
.billing-faq .left-dp-head, .student-testi .left-dp-head{
  background-color:#f5f5f5;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #ddd;
}
.billing-faq, .student-testi{
  border-width: 1px;
  border-color: rgb(214, 214, 214);
  border-style: solid;
  background-color: #f5f5f5;
}
.student-testi .info, .billing-faq .panel-body, .cancel-anytime p{
  font-family: "Roboto-Light";
  font-size: 13px;
  color: #444;
}
.billing-faq .panel-title{
  font-family: "Roboto-Bold";
  font-size: 14px;
  color: #444;
}
.cancel-anytime h3{
  font-family: Roboto-Regular;
  font-size: 20px;
  color: #444;
}
#mem-benefit-bg{
  background-color: #d6c2bc;
}
#mem-benefit-bg .wrap-head h2{
  border-bottom: 1px solid #868686;
}
.sec-gap{
  margin: 20px 0;
}
.whiteframe-student-testi-wrap{
  padding: 0 20px;
}
.whiteframe-student-testi-wrap .testimonial-authors span{
color: #000;
}
.text-black{
  color: #000;
}

.text-light-blue{
  color: #e8562a;
}
.text-price{
  color: #89ba00;
}

.text-white{
 color: #fff;
}
.text-red{
 color: #e63a11;
}
.checkout-section .error{
  font-family: "Roboto-Light";
  font-size: 12px;
  color: #e63a11;
}

/*Radio*/
/* The container */
.custom-radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom radio button */
.custom-radio-container .checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #b5b5b5;
  border-radius: 50%;
}

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

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

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

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

/* Style the indicator (dot/circle) */
.custom-radio-container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

/* The container */
.custom-checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

.custom-checkbox-container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ccc;
  border-radius: 4px;
}

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

/* When the checkbox is checked, add a blue background */
.custom-checkbox-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Show the checkmark when checked */
.custom-checkbox-container .checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */
.custom-checkbox-container .checkmark:after {
  left: 10px;
  top: 3px;
  width: 6px;
  height: 16px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* form starting stylings ------------------------------- */
.checkout-page-input .group        { 
  position:relative; 
  margin-bottom:10px; 
}
.checkout-page-input input         {
    font-size: 18px;
    padding: 24px 15px 10px;
    border-radius: 10px;
    border: none;
    border: 1px solid #757575;
    width: 100%;
}
.checkout-page-input input:focus{ 
  outline:none; 
  border: 1px solid #02aae9;
}

.checkout-page-input label          {
  color:#787878; 
  font-size:18px;
  font-family: Roboto-Regular;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left: 16px;
  top: 18px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
/*.checkout-page-input input:focus ~ label, .checkout-page-input input:valid ~ label    {
    top: 6px;
    font-size: 14px;
    font-family: Roboto-Medium;
    color: #444;
}*/
.checkout-page-input input:focus ~ label {
    top: 6px;
    font-size: 14px;
    font-family: Roboto-Medium;
    color: #444;
}
.checkout-page-input input.present ~ label{
  top: 6px;
  font-size: 12px;
  color: #5e70ad;
}
.checkout-page-input select{
  font-size: 18px !important;
    /*font-family: Roboto-Medium;*/
    color: #333333 !important;
    height: 60px !important;
    border-radius: 10px!important;
    border: 1px solid #757575;
}

/* Testimonial CSS Code Start */

.carousel-caption {
    position: initial;
}
.testimonial-style .testimonial-caption-style {
  font-weight: 400;
  font-size: 24px;
  color: #354052;
  text-shadow: none;
}
.testimonial-style .testimonial-authors {
  font-family: "Roboto-Bold";
  font-weight: 700;
  font-size: 14px;
  color: #e63a11;
  line-height: 30px;
  text-shadow: none;
}
/* carousel-left-right-control */
.testimonial-style .carousel-control.left {
  background: none;
  box-shadow: none;
  text-shadow: none;
}
.carousel-indicators{
    bottom: 4px;
}
.testimonial-style .carousel-control.right {
  background: none;
  box-shadow: none;
  text-shadow: none;
}

.testimonial-style .carousel-control {
  color: #354052;
}

.testimonial-style .carousel-control:hover {
  color: #354052;
  text-decoration: none;
  transition: background-color 1s ease;
}
/* indicators */
.testimonial-style .carousel-indicators .active {
  background-color: #3b444b;
  width: 14px;
  height: 14px;
  transition: background 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.testimonial-style .carousel-indicators li {
  border: 2px solid #ddd;
  background-color: #ffffff;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.testimonial-section{
    padding: 40px 0;
}
.my-footer {
  background-color: #3d464d;
  color: #fff;
  padding: 24px;
}

.my-footer p {
  margin: 0;
}
.cvv-inline{
  display: inline-block!important;
}

.payment-option-section.payment-option-active .card-box{
  display: block;
}
.payment-option-section .card-box{
  display: none;
}
/* Large desktops and laptops */
@media (min-width: 1200px) {
	.cvv-inline img{
	  margin-bottom: 15px !important;
	}
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
	.cvv-inline img{
	  margin-bottom: 15px !important;
	}
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
	.cvv-inline img{
	  margin-bottom: 15px !important;
	}
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
  
  .final-step .secure-server {
    padding: 10px 14px;
  }
  .my-get-unli-acc-btn {
    padding: 11px 27px;
    font-size: 12px;
  }

  .tandc {
    margin: 0 10px;
  }

  .checkout-section {
    /*margin-top: 14%;*/
  }
  .checkout-section .head-name {
    font-size: 24px;
  }
  .checkout-section .Already_have_an_account__Sign_in {
    font-size: 14px;
  }
  .t-b-space{
    padding: 15px 0px;
  }
}