/**********************************************************************************************************

 Project Name: IdealUI-Toolkit
 Project Description: Collection of visual tweaks and tools for easy development
 File Name: material-input.js
 Author: Helike Long
 Author Email: pedro.aquino.idealtrends@gmail.com | helikelong@gmail.com

 Plugin Name: Material Input
 Author: Chris Sevilleja
 Repository: https://codepen.io/sevilayha/pen/IdGKH

 *********************************************************************************************************/

* { box-sizing:border-box; }
.cont-form {
  min-height: 56vh;
  padding-top: 10px;
}
.center-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* basic stylings ------------------------------------------ */
.materialize .form-label-group input::-webkit-input-placeholder {
  color: transparent;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.materialize .form-label-group input:-ms-input-placeholder {
  color: transparent;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.materialize .form-label-group input::-ms-input-placeholder {
  color: transparent;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.materialize .form-label-group input::-moz-placeholder {
  color: transparent;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.materialize .form-label-group input::placeholder {
  color: transparent;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

.materialize .form-label-group input:focus::-webkit-input-placeholder {
  color: #AAA;
}
.materialize .form-label-group input:focus:-ms-input-placeholder {
  color: #AAA;
}
.materialize .form-label-group input:focus::-ms-input-placeholder {
  color: #AAA;
}
.materialize .form-label-group input:focus::-moz-placeholder {
  color: #AAA;
}
.materialize .form-label-group input:focus::placeholder {
  color: #AAA;
}

.materialize .form-label-group textarea::-webkit-input-placeholder {
  color: transparent;
  transition:0.3s ease all;
  -moz-transition:0.3s ease all;
  -webkit-transition:0.3s ease all;
}
.materialize .form-label-group textarea:-ms-input-placeholder {
  color: transparent;
  transition:0.3s ease all;
  -moz-transition:0.3s ease all;
  -webkit-transition:0.3s ease all;
}
.materialize .form-label-group textarea::-ms-input-placeholder {
  color: transparent;
  transition:0.3s ease all;
  -moz-transition:0.3s ease all;
  -webkit-transition:0.3s ease all;
}
.materialize .form-label-group textarea::-moz-placeholder {
  color: transparent;
  transition:0.3s ease all;
  -moz-transition:0.3s ease all;
  -webkit-transition:0.3s ease all;
}
.materialize .form-label-group textarea::placeholder {
  color: transparent;
  transition:0.3s ease all;
  -moz-transition:0.3s ease all;
  -webkit-transition:0.3s ease all;
}

.materialize .form-label-group textarea:focus::-webkit-input-placeholder {
  color: #AAA;
}
.materialize .form-label-group textarea:focus:-ms-input-placeholder {
  color: #AAA;
}
.materialize .form-label-group textarea:focus::-ms-input-placeholder {
  color: #AAA;
}
.materialize .form-label-group textarea:focus::-moz-placeholder {
  color: #AAA;
}
.materialize .form-label-group textarea:focus::placeholder {
  color: #AAA;
}

/* form starting stylings ------------------------------- */
.materialize .form-label-group        {
  position:relative;
  margin-bottom: 5px;
  margin-top: 25px;
  min-height: 40px;
}
.materialize .form-label-group input, .materialize .form-label-group textarea, .materialize .form-label-group .select2-container--default .select2-selection--single {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:100%;
  border:none;
  border-bottom: 2px solid #ddd;
  text-align: center;
  box-shadow: none !important;
  background-color: transparent;
  resize: vertical;
}

.materialize .form-label-group select option {
  text-align: center;
}
.materialize .form-label-group select option:first-child { display:none; }

.materialize .form-label-group input:focus, .materialize .form-label-group textarea:focus, .materialize .form-label-group .select2-container *:focus { outline:none; }
.materialize .form-label-group .select2-container .select2-selection--single {
  height: 34px;
  padding: 3px 0px 0px 20px;
}
.materialize .form-label-group .input-error, .materialize .form-label-group .select2-container.input-error .select2-selection--single { border-color: #FF9494;}

/* LABEL ======================================= */
.materialize .form-label-group label          {
  color:#999;
  font-size:18px;
  font-weight:normal;
  position:absolute;
  padding-right: 30px;
  pointer-events:none;
  width: 100%;
  top: 0px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
  text-align: center;
}
.materialize .form-label-group textarea ~ label {
  top:10px;
}
.bootstrap-tagsinput, .tokenfield {
  border: 0;
}
.tokenfield {
  background-color: transparent;
}
.tokenfield.focus {
  border-color: inherit;
  outline: inherit;
  box-shadow: inherit;
}

/* active state */
.materialize .form-label-group input:focus ~ label, .materialize .form-label-group select:focus ~ label {
  top:-25px;
  font-size:14px;
  color:#397cbc;
}
.bootstrap-tagsinput.focus ~ label, .tokenfield.focus ~ label {
  top:-80px;
  font-size:14px;
  color:#397cbc !important;
}
.materialize .form-label-group input:not(:focus):not(:placeholder-shown) ~ label, .materialize .form-label-group select:not(:focus):valid ~ label {
  top:-25px;
  font-size:14px;
  color:#999;
}
.materialize .form-label-group input:not(:first-child):not(:focus):not(:placeholder-shown) ~ label {
  top:-110px;
}
.materialize .form-label-group textarea:focus ~ label, .materialize .form-label-group textarea:not(:focus):not(:placeholder-shown) ~ label {
  top:-15px;
  font-size:14px;
  color:#999;
}

.materialize .form-label-group .input-error ~ label { color: #FF9494 !important;}
.materialize .error-msg {
  display: none;
  width: 100%;
  position: relative;
  text-align: center;
  font-size: 14px;
  right: 0px;
  color: #FF9494;
}
.customCheckbox.input-error span {
  color: #FF9494 !important;
}
.customCheckbox .error-msg {
  text-align: left;
  top: 10px;
}

/* BOTTOM BARS ================================= */
.materialize .form-label-group .bar  { position:relative; display:block; width:100%; }
.materialize .form-label-group .bar:before, .materialize .form-label-group .bar:after   {
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:#397cbc;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.materialize .form-label-group .bar:before {
  left:50%;
}
.materialize .form-label-group .bar:after {
  right:50%;
}

/* active state */
.materialize .form-label-group input:focus ~ .bar:before, .materialize .form-label-group textarea:focus ~ .bar:before, .materialize .form-label-group input:focus ~ .bar:after, .materialize .form-label-group textarea:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.materialize .form-label-group .highlight {
  position:absolute;
  height:60%;
  width:0%;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.materialize .form-label-group input:focus ~ .highlight, .materialize .form-label-group textarea:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from { background:#5264AE; }
  to  { width:0; background:transparent; left:50%; }
}
@-moz-keyframes inputHighlighter {
  from { background:#5264AE; }
  to  { width:0; background:transparent; left:50%; }
}
@keyframes inputHighlighter {
  from { background:#5264AE; }
  to  { width:0; background:transparent; left:50%; }
}

/* Custom Checkbox */
.customCheckbox{width:100%;margin:0 0 15px 15px;position:relative;z-index:2;}
.customCheckbox input[type=checkbox]{visibility:hidden;}
.customCheckbox span {padding: 15px; top: -4px; position: relative; color: #555; font-size: 18px; cursor:pointer;}
.customCheckbox label{cursor:pointer;position:absolute;width:20px;height:20px;top:0;left:0;background:#FFF;border:1px solid #ddd;}
.customCheckbox label:hover{border:1px solid #aaa;}
.customCheckbox label:after{opacity:0;content:'';position:absolute;width:9px;height:5px;background:transparent;top:5px;left:5px;border:3px solid #333;border-top:none;border-right:none;transform:rotate(-45deg);}
.customCheckbox label:hover::after{opacity:0.3;}
.customCheckbox input[type=checkbox]:checked + label:after{opacity:1;}
.customCheckbox input[type=checkbox]:checked + label{border:1px solid #333;}

/* Card Button */
.payment-option {
  background-color: #FDFDFD;
  position: relative;
  margin: 7px 23px;
  padding: 15px;
  width: 130px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  transition: all 0.3s;
  transition: all 0.3s, all 0.3s;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  border-radius: 2px;
  height: 140px;
  cursor: pointer;
}
.payment-option:hover, .payment-option.active {
  -webkit-box-shadow: 0px 5px 8px 0 rgba(0,0,0,0.14), 2px 3px 9px 0 rgba(0,0,0,0.12), 0px 3px 5px -2px rgba(0,0,0,0.2);
  box-shadow: 0px 5px 8px 0 rgba(0,0,0,0.14), 2px 3px 9px 0 rgba(0,0,0,0.12), 0px 3px 5px -2px rgba(0,0,0,0.2);
  width: 145px;
  height: 155px;
  margin: 0 15px;
  color: #FFF;
  background: #397cbc;
}
.payment-option i {
  display: block;
  text-align: center;
  font-size: 50px;
  line-height: 50px;
  padding-bottom: 20px;
}
.payment-option span {
  text-align: center;
  line-height: 20px;
}

/* CreditCard CSS */
.payment-card {
  margin-top: 20px;
}
.payment-card .form-label-group {
  margin-bottom: 0px;
}

/* Label-group Btn */
.form-label-group .btn {
  background-color: transparent;
  position: absolute;
  right: 0;
  top: 0;
}
.form-label-group .btn i {
  font-size: 20px;
  font-weight: 900;
}

@media (max-width: 767px) {
  .materialize .form-label-group input, .materialize .form-label-group textarea, .materialize .form-label-group .select2-container--default .select2-selection--single {
    font-size: 14px;
  }
  .materialize .form-label-group {
    margin-bottom: 5px;
    margin-top: 5px;
  }
}

@media screen and (max-width: 425px) {
  .materialize .form-label-group {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .materialize .form-label-group input:not(:focus):not(:placeholder-shown) ~ label, .materialize .form-label-group select:not(:focus):valid ~ label, .materialize .form-label-group input:focus ~ label, .materialize .form-label-group select:focus ~ label {
    top: -25px;
    z-index: 2;
  }
  .materialize .form-label-group textarea:focus ~ label, .materialize .form-label-group textarea:not(:focus):not(:placeholder-shown) ~ label {
    top: -108px;
    z-index: 2;
  }
  .materialize .form-label-group label {
    font-size: 14px;
  }
  .cont-form {
    min-height: auto;
  }
  .payment-card.center-content {
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
  }
}