* {box-sizing: border-box}

/* style the container */


/* style inputs and link buttons */
input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 4px;
  margin: 5px 0;
  opacity: 0.9;
  display: inline-block;
  font-size: 17px;
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
  background: #fff;
}

.btn {
  width: 100%;
  /* padding: 12px; */
  border: none;
  /* border-radius: 4px;
  margin: 5px 0; */
  opacity: 0.85;
  display: inline-block;
  /* font-size: 8px; */
  line-height: 20px;
  text-decoration: none; /* remove underline from anchors */
}

input:hover,
.btn:hover {
  opacity: 1;
}

/* add appropriate colors to fb, twitter and google buttons */
.fb {
  background-color: #3B5998;
  color: white;
}

.twitter {
  background-color: #55ACEE;
  color: white;
}

.google {
  background-color: #dd4b39;
  color: white;
}

/* style the submit button */
input[type=submit] {
  background-color: #868686;
  color: white;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #868686;
}

/* Two-column layout */
.col {
  float: left;
  width: 50%;
  margin: auto;
  padding: 0 50px;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* vertical line */
.vl {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  height: 175px;
  padding-top: 90px;
  color:#fff;
}

/* text inside the vertical line */
.inner {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 8px 10px;
}

/* hide some text on medium and large screens */
.hide-md-lg {
  display: none;
}

/* bottom container */
.bottom-container {  text-align: center;  background:#007aff;       box-shadow: 0 5px #1e5a9c;    border-radius: 5px;  border-radius: 0px 0px 4px 4px;}

.modal .container{ width: 100%;    position: relative;  border-radius: 5px; padding: 20px 0 30px 0;}
.modal-header {border-bottom: none;}
.modal-body {padding: 8px;}
.modal-body button.close {     top: -18px;    left: -3px;    position: relative; color:#fff;    opacity: .75; }
.modal-body .vip_title{ color:#fff; width: 100%; text-align: center; font-size: 18px; font-weight: bold;     max-width: 450px;    position: relative;    margin: 0 auto;     margin-bottom: 50px;}

.content_container{ margin: 25px 0px 15px; min-height: 200px;}

.modal-content {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#465a7d+0,465a7d+64,414e6c+100 */
background: #465a7d; /* Old browsers */
background: -moz-linear-gradient(top, #465a7d 0%, #465a7d 64%, #414e6c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #465a7d 0%,#465a7d 64%,#414e6c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #465a7d 0%,#465a7d 64%,#414e6c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#465a7d', endColorstr='#414e6c',GradientType=0 ); /* IE6-9 */}
/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */


.modal-lg .modal-content{ border:none;  }


.vip_login_logo{ display:inline-block; width: 42px;    height: 42px;    margin-bottom: 5px !important;    background: url(../images/login_vip_icon.png);    position: relative;    top: -12px; left: -10px;}
.modal-body .col .col_title{ color:#fff; font-size: 18px; }
.modal-footer {    padding: 15px;    text-align: right;    border-top:none; color:#fff;}


.rcorners_btn {    border-radius: 5px;    background: #868686;    padding: 12px 25px 12px 25px;    width: 100%;    color: #fff;    text-align: left;    font-size: 18px;    margin: 0 auto;    margin-bottom: 19px !important;    border: 0px;    position: relative;    font-weight: bold;    max-width: 350px;    display: block; box-shadow: 0 1px 2px rgba(0,0,0,0.6); cursor: pointer;}
.rcorners_btn:hover{     box-shadow: 0px 1px 4px rgba(0,0,0,0.75); }

#phase_2a, #phase_2b{ display: none; }

.glyphicon-position {
    position: absolute !important;
    right: 5%;
    top: 20px;
    width: 8px;
    height: 8px;
    background: url(../images/arrow_wht_8.png);
}

.form-group input {
    max-width: 350px;
}

.form-control {
    border-radius: 5px;
    padding: 12px 25px 12px 25px;
    width: 100%;
    color: #333;
    text-align: left;
    font-size: 18px;
    margin: 0 auto;
    margin-bottom: 19px !important;
    border: 0px;
    position: relative;
    font-weight: bold;
    max-width: 350px;
    display: block;
    box-shadow: 0 1px 2px rgba(0,0,0,0.6);
    height: 40px;
}

.back_and_next {
    max-width: 350px;
    margin: auto; 
    margin-bottom: 55px !important;
    margin-top: 5px!important;
}

.rcorners_btn2 {
    border-radius: 5px;
    background: #868686;
    padding: 8px 20px;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 15px;
    margin: 0 auto;
    border: 0px;
    position: relative;
    font-weight: bold;
    display: block;
    box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.rcorners_btn2:hover{     box-shadow: 0px 1px 4px rgba(0,0,0,0.75); }

.login_btn {
    text-align: right;
    float: right;
}

.cancel_btn {
    text-align: left;
    float: left;
}
.cancel_btn, .login_btn {
    width: 47%;
}



.apply_btn {
    background: #007aff;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 15px;
    margin: 0 auto;
    box-shadow: 0 5px #1e5a9c;
    border-radius: 5px;
    border: 0;
    max-width: 350px;
    padding: 15px 0px;
    margin-top: 120px;
}

.apply_btn a{ text-decoration: none; }


.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  width:85%;
  position: relative;
  top: -50px;
}

.modal-open{ overflow:hidden; }

@media screen and (max-width: 650px) {
  .col {
    width: 100%;
    margin-top: 0;
  }
  /* hide the vertical line */
  .vl {
    display: none;
  }
  /* show the hidden text on small screens */
  .hide-md-lg {
    diplay: block;
    text-align: center;
  }
}

@media (min-width: 992px){
.modal-lg {
    width: 850px; 
}
.modal-lg .modal-content{  }
}

@media (max-width: 650px){
.form-group input {    width: 85%;     max-width: 350px;}
.rcorners_btn { width: 85%;     max-width: 350px; }
.modal-body .vip_title{ max-width: 90%; }
.back_and_next {    width: 85%;     max-width: 350px;}
.apply_btn { width: 85%;     max-width: 350px;}
}


@media (max-width: 400px){
.form-control {    font-size: 17px;}
.content_container {    margin-top: 5px; }
.modal-body .vip_title {    margin-bottom: 15px;}

.apply_btn {margin-top:105px;}
.modal .container { padding-bottom: 0px;}
.modal-footer {padding-top:0px;}
}