.box-title-login {
  text-align: center;
  font-size: 22px;
  border-bottom: 1px solid #808080;
  margin-bottom: 5px;
  font-weight: bolder;
}

.swal2-popup.swal2-modal.swal2-show {
  font-size: 14px;
}

article.card-body.mx-auto.main-san .title-create-1,
article.card-body.mx-auto.main-san .title-create-2{
  color: #734c23;
}

article.card-body.mx-auto.main-san .title-create-1{
  font-size: 24px;
  font-weight: bold;
}

article.card-body.mx-auto.main-san .title-create-2{
  font-size: 16px;
  border-bottom: 1px solid #734c23;
  padding-bottom: 5px;
}


article.card-body.mx-auto .title-create-1,
article.card-body.mx-auto .title-create-2{
  color: #055176;
}

article.card-body.mx-auto .title-create-1{
  font-size: 24px;
  font-weight: bold;
}

article.card-body.mx-auto .title-create-2{
  font-size: 16px;
  border-bottom: 1px solid #055176;
  padding-bottom: 5px;
}

form.sing-in.form-box-login {
  margin: 15px 0px 15px 0px;
}

.box-text-or {
  overflow: hidden;
  text-align: center;
  font-size: 18px;
  color: #808080;
  padding-bottom: 10px;
}

.from-login-social {
  display: inline-block;
  width: 100%;
}

.button_line,
.button_facebook,
.button_google {
  width: 32.6%;
  float: left;
  margin: 0px 1px 0px 1px;
}

.from-login-social .but-in{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
}

.from-login-social .but-in:hover:before, 
.from-login-social .but-in:focus:before, 
.from-login-social .but-in:active:before, 
.from-login-social .but-in:hover:after, 
.from-login-social .but-in:focus:after, 
.from-login-social .but-in:active:after {
  opacity: 1;
}

.from-login-social .but-in:before {
  bottom: 100%;
  background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.from-login-social .but-in:after {
  top: 100%;
  background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.from-login-social .but-in:before, 
.from-login-social .but-in:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.footer-text-create {
  text-align: center;
  font-size: 18px;
  margin-top: 10px;
  color: #8a8a8a;
}

article.card-body.mx-auto.main-san button.btn.btn-block.btn-login{
  background-image: linear-gradient(to right, #674019, #704821, #785028, #815830, #8a6038);
  color: white;
  font-weight: bold;
  font-size: 16px;
  border-radius: 15px;
}

article.card-body.mx-auto.main-san button.btn.btn-block.btn-login:hover{
  background-image: linear-gradient(to right, #8a6038, #815830, #785028, #704821, #674019);
  color: white;
  font-weight: bold;
}

article.card-body.mx-auto.main-san .box-title-login{
  color: #734c23;
}

article.card-body.mx-auto.main-san a.a-create{
  color: #8c6238;
}

a.a-create {
  font-weight: bold;
}

.from-login-social a:hover{
  color: white;
}

article.card-body.mx-auto button.btn.btn-block.btn-login{
  background-image: linear-gradient(to right top, #055176, #045a83, #036290, #036b9d, #0474ab);
  color: white;
  font-weight: bold;
  font-size: 16px;
  border-radius: 15px;
}

article.card-body.mx-auto button.btn.btn-block.btn-login:hover{
  background-image: linear-gradient(to right, #0474ab, #036b9d, #036290, #045a83, #055176);
  color: white;
  font-weight: bold;
}

article.card-body.mx-auto .box-title-login{
  color: #055176;
}

.footer-text-create a.a-create{
  color: #055176;
}

input.email-login,
input.password-login {
  border-left: 0px solid transparent;
}

article.card-body.mx-auto.main-san input.email-login:-webkit-autofill,
article.card-body.mx-auto.main-san input.password-login:-webkit-autofill {
  -webkit-text-fill-color: #734c23 !important;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}

article.card-body.mx-auto.main-san input:focus,
article.card-body.mx-auto.main-san input:focus {
  border-color: #734c23 !important;
  border-left: 1px solid;
}

article.card-body.mx-auto input:focus,
article.card-body.mx-auto input:focus {
  border-color: #055176 !important;
  border-left: 1px solid;
}

article.card-body.mx-auto input.email-login:-webkit-autofill,
article.card-body.mx-auto input.password-login:-webkit-autofill {
  -webkit-text-fill-color: #055176 !important;
}

article.card-body.mx-auto.main-san span.img-mail-l,
article.card-body.mx-auto.main-san span.img-pass-l {
  background-color: white;
  border-right: 0px solid !important;
  color: #734c23;
}

article.card-body.mx-auto span.img-mail-l,
article.card-body.mx-auto span.img-pass-l {
  background-color: white;
  border-right: 0px solid !important;
  color: #055176;
}

article.card-body.mx-auto.main-san .input-group-addon{
  background-color: #734c23;
  color: white;
}

article.card-body.mx-auto .input-group-addon{
  background-color: #055176;
  color: white;
}

.box-text-or .text-or:before,
.box-text-or .text-or:after {
  background-color: #808080;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.box-text-or .text-or:before {
  right: 0.5em;
  margin-left: -50%;
}

.box-text-or .text-or:after {
  left: 0.5em;
  margin-right: -50%;
}

.divider-text{
  position: relative;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.home-sing-in{
  /*margin-top: 3em;*/
}

.divider-text span{
  padding: 7px;
  font-size: 12px;
  position: relative;
  z-index: 2;
}

.divider-text:after{
  content: "";
  position: absolute;
  width: 100%;
  border-bottom: 1px solid #ddd;
  top: 55%;
  left: 0;
  z-index: 1;
}
.btn-google {
  color: #fff;
  background-color: #dd4b39;
  border-color: rgba(0,0,0,0.2);
}
.btn-facebook{
  background-color: #405D9D;
  color: #fff;
}
.btn-twitter{
  background-color: #42AEEC;
  color: #fff;
}
.title-sing-out {
  margin-top: 4em;
}
.btn-line {
  background-color: #00b900;
  color: #fff;
}
a:hover {
  color: #000000;
  text-decoration: underline;
}
.card.bg-light {
  margin: 5rem 30rem;
}
.box-c-login {
  background: #ffffff73;
  margin: 10rem -1rem 0rem 1rem;
  padding: 2rem 0rem;
}

/*.button_facebook {
    padding: 6px 0;
}*/

.input-group.pass {
  width: 100%;
  margin: 1rem 0rem 1rem 0rem;
}

span.input-group-addon.lock {
  /*width: 13.5%;*/
}

.width-full-regi {
    margin: 0rem -10rem;
}

span.bg-light {
    border: solid 1px #dddddd;
    background: #dddddd;
    color: #4485c4;
    padding: 0rem 10.2rem;
}

@media (min-width:320px) {
  .card.bg-light {
    margin: 5rem 5rem;
  }
  .box-c-login {
    background: #ffffff73;
    /*margin: 0rem 0rem 0rem 0rem;*/
    padding: 2rem 0rem;
  }
  span.bg-light {
    border: solid 1px #dddddd;
    background: #dddddd;
    color: #4485c4;
    padding: 0rem 88%;
  }
  .divider-text {
    width: 53%;
  }
  .width-full-regi {
    margin: 0rem -4rem;
  }
}

@media (min-width:480px) {
  span.bg-light {
    padding: 0rem 90%;
  }
  .divider-text {
    width: 53%;
  }

}

@media (min-width:560px) {
  .width-full-regi {
    margin: 0rem 0rem;
  }
  
}

@media (min-width:768px) {
  span.bg-light {
    padding: 0rem 91%;
  }
  .divider-text {
    width: 53%;
  }

  .card.bg-light {
    margin: 5rem 15rem;
  }
}

@media (min-width:992px) {
  .card.bg-light {
    margin: 5rem 23rem;
  }
}

@media (min-width:1200px) {
  .card.bg-light {
    margin: 5rem 30rem;
  }
}

@media (max-width:425px) {
  .button_line, 
  .button_facebook, 
  .button_google {
    width: 100%;
    padding: 5px;
  }
}

@media (max-width:620px) {
  .from-login-social a,
  .from-login-social span{
    font-size: 2vw;
  }
}