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

 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 0 0 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: 0;
    pointer-events:none;
    width: 100%;
    top: 0;
    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;
    }
}