/* Select Box */
input {width:100%; border:1px solid #ccc; padding:13px 10px; color:#000; font-weight:500; font-family:Roboto;outline:none;}
textarea {border:1px solid #ccc;color:#000; font-weight:500; font-family:Roboto;outline:none;}
input[type="text"]:hover,input[type="password"]:hover,input[type="email"]:hover,input[type="tel"]:hover,select:hover,textarea:hover { border:1px solid #999999; }
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,input[type="tel"]:focus,select:focus,textarea:focus { border:1px solid #b500cb; filter:drop-shadow(2px 3px 3px #e3e3e3);background:transparent;}
.select {position: relative;}
select {font-family: 'Roboto', sans-serif;position: relative; display: inline-block; margin-bottom: 15px; width: 100%; border:1px solid #ccc;background:url(../images/down-arrow.svg) no-repeat center right+10px; background-size: 10px auto;}
.select select {display: inline-block; width: 100%; cursor: pointer; padding: 13px 10px; outline: 0; border-radius: 0; color: #000; appearance: none; -webkit-appearance: none;-moz-appearance: none; background:url(../images/down-arrow.svg) no-repeat center right+10px; background-size: 10px auto;}
.select select.sm {padding: 4px 7px !important; font-size:13px!important;}
.select select::-ms-expand {display: none;}
.select select:hover,.select select:focus {color: #000;}
.select select:disabled {opacity: 0.5;pointer-events: none;}
.select__arrow1 {position: absolute;top: 16px;right: 15px;width: 0;height: 0;pointer-events: none;border-style: solid;border-width: 8px 5px 0 5px;border-color: red transparent transparent transparent;}
.select__arrow2 {position: absolute;top: 8px;right: 8px;border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg);
  -webkit-transform: rotate(45deg);}

.select.sm > .select__arrow {top: 8px!important;}
.select select:hover ~ .select__arrow,.select select:focus ~ .select__arrow {border-top-color: #000;}
.select select:disabled ~ .select__arrow {border-top-color: #ccc;}

/* BUTTONS */
.btn,.btn-sm {display: inline-block; text-align: center; vertical-align: middle; font-family:Roboto; letter-spacing:0px; cursor:_pointer; cursor:pointer;text-transform: uppercase; }
/*
.button {
    font-family: Roboto;
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    padding: 12px 25px;
    outline: 0;
    border: 0px solid #ddd;
    border-radius: 3px;
    text-transform: uppercase;
    cursor: pointer;
    _cursor: pointer;
}*/
.btn {padding: 12px 30px; font-size:14px; border:2px solid; font-weight:500; border-radius:0px; transition: background-color 0.0s;}
.btn {border-color:#000000; background-color:#000000; color: #ffffff;}
.btn:hover {background-color: #fff; color: #000000;}
.bnt a {text-decoration:none;}
.btn-sm {padding: 4px 10px!important;font-size:11px;}
.btn-large {padding: 10px 10px!important;width: 35px;height: 35px;line-height: 35px;}
.btn-default {color: #333!important;background-color: #fff!important;border-color: red!important;}
/*
.btn-blue {background-color:#2874f0; color: #fff;} .btn-blue:hover {background-color: #1767dd; color: #fff;}
.btn-indigo {background-color: #6610f2;color: #fff;}
.btn-purple {background-color: #6f42c1;color: #fff;}
.btn-pink {background-color: #e83e8c;color: #fff;}
.btn-red {background-color: #dc3545;color: #fff;}
.btn-orange {background-color: #fd7e14;color: #fff;}
.btn-yellow {background-color: #ffc107;color: #fff;}
.btn-green { background-color:#009900;color: #fff;}
.btn-teal {background-color: #20c997;color: #fff;}
.btn-cyan {background-color: #17a2b8;color: #fff;}
.btn-white {background-color: #FFF;color: #000;}
.btn-gray {background-color: #6c757d;color: #fff;}
.btn-gray-dark {background-color: #343a40;color: #fff;}
.btn-green {background-color: #28a745;color: #fff;}
.btn-primary {background-color: #007bff;color: #fff;}
.btn-secondary {background-color: #6c757d;color: #fff;}
.btn-info {background-color: #17a2b8;color: #fff;}
.btn-warning {background-color: #ffc107;color: #fff;}
.btn-danger {background-color: #dc3545;color: #fff;}
.btn-light {background-color: #f8f9fa;color: #000;}
.btn-dark {background-color: #343a40;color: #fff;}
*/
.btn-none {background-color:transparent; border-color:none; color: none; padding:11px 8px; } .btn-success:hover {background-color: transparent; color: none;}
.btn-success {background-color:#009900; border-color:#009900; color: #fff;} .btn-success:hover {background-color: transparent; color: #009900;}
.btn-blue {background-color:#2874f0; border-color:#2874f0; color: #fff;} .btn-blue:hover {background-color: transparent; color: #2874f0;}
.btn-pink {background-color:#dc3545; border-color:#dc3545; color: #fff;} .btn-pink:hover {background-color: transparent; color: #dc3545;}
.btn.icon-24 { padding-left: 30px; height: 35px; display:block; width:auto;}
/*.btn.ic-rinse { height: 35px; display:block; width:auto; padding:10px 15px 10px 35px!important;}
*/

/* CUSTOM FILE UPLOAD */
.custom-button {font-family: 'Roboto', sans-serif;padding:6px 10px;color: #333;background-color: #f4f4f4;border: 1px solid #333;border-radius: 5px;cursor: pointer; font-size:10px;}
.custom-button:hover {background-color: #333; color:#fff;}
.custom-text {margin-left: 10px;font-family: sans-serif;color: #aaa;}


/* FORM */
.form_wrapper {}
.form_wrapper h2 {font-size:1.5em;line-height:1.5em;margin:0;color:#000;}
.form_wrapper .title_container {}
.form_wrapper h3 {font-size:1.1em;font-weight:normal;line-height:1.5em;margin:0;color:#000;}
.form_wrapper .row {margin:10px -15px;}
.form_wrapper .row > div {padding:0 15px;box-sizing:border-box;}
.form_wrapper label {display:block;margin:0 0 5px; color:#000;}
.form_wrapper .input_field, .form_wrapper .textarea_field {position:relative;}
.form_wrapper .input_field > span, .form_wrapper .textarea_field > span {position:absolute;left:0;top:0;color:#000;height:100%;text-align:center;width:30px;}/*border-right:1px solid #ccc;*/
.form_wrapper .textarea_field > span {border-bottom:1px solid #ccc;max-height:35px;}
.form_wrapper .input_field > span > i, .form_wrapper .textarea_field > span > i {padding-top:12px;}
.form_wrapper input[type="text"],.form_wrapper input[type="password"], .form_wrapper input[type="email"], .form_wrapper input[type="tel"], textarea {font-family: 'Roboto', sans-serif;width:100%;padding:10px; box-sizing:border-box;outline:none;-webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out;transition: all 0.30s ease-in-out; font-size:13px;}
.form_wrapper input[type="text"].ic,.form_wrapper input[type="password"].ic, .form_wrapper input[type="email"].ic, .form_wrapper input[type="tel"].ic, textarea.ic { padding-left:35px;}
.form_wrapper textarea {height:8em;}
.form_wrapper input[type="text"]:focus,.form_wrapper input[type="password"]:focus, .form_wrapper input[type="email"]:focus, .form_wrapper input[type="tel"]:focus {border:1px solid green;background:transparent;}
.input_field .icon-16{ margin:10px 0 0 0}

.field label {color: #a2aabd;font-size: 12px;font-weight: 500;left: .5em;position: absolute;top: .25em;transition: all 0.1s linear;}
.field input {font-family: 'Roboto', sans-serif;background-color: transparent;border: none;border-bottom: 1px solid #b5bdce;color: #666;font-size: 12px;padding: .75em .5em .5em;width: 100%;}
.field input:focus + label,.field input + label.show {border-radius: 4px;color: #2088cd;font-size: 1em;left: .5em;padding: 0 .15em;text-transform: uppercase;top: -1em;}
.field {margin-bottom: 1.75em;position: relative;}
.field input:focus {border-color: #2088cd;outline: 0;}


.form-field {float: left;height: 2.1em;background-color: white;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;position: relative;width: 100%;}
.form-field.centerted input, .form-field.centerted select {text-align: center;}
.form-field.centerted label {transform: translate(-50%, 0%);left: 50%;}
.form-field:not(:last-child) {border-right: 0.07em solid #CAD0D2;}
.form-field label {font-size: 12px;position: absolute;left: 15px;top: 3px;color: gray;opacity: 1;transition: opacity 200ms, top 200ms, color 200ms;}
.form-field input:required, .form-field input:invalid {outline: none; box-shadow: none;}
:-moz-submit-invalid {box-shadow: none;}
:-moz-ui-invalid {box-shadow:none;}
.form-field input, .form-field select {font-family: 'Roboto', sans-serif;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;border: none;display: block;width: 100%;padding:16px 15px 3px 15px;background-color: transparent;font-size: 0.9em;border: 1px solid #ccc; font-size:13px;}
.form-field select {padding-right: 0.07em;}
.form-field input:invalid ~ label {top: 0.71em;opacity: 0;}
.form-field input:focus ~ label, .form-field select:focus ~ label {color: #666;}


.form-group {position: relative;padding: 20px 0;max-width: 100%;}
.form-group input {font-family: 'Roboto', sans-serif; background-color: transparent; border: none; border-bottom: 1px solid #9e9e9e;color:#333;font-size: 14px;padding: 0 0 5px 0;display: block;width: 100%;}
.form-group label {color:#9e9e9e;font-size: 13px;font-weight: 100;position: absolute;pointer-events: none;top: -4px;transform: translateY(30px);transition: all 0.2s ease-in-out;left: 0px;}
.form-group input:valid,.form-group input:focus {border-bottom-color: #666;outline: none;}
.form-group input:valid + label,.form-group input:focus + label {color: #666;font-size: 13px;transform: translateY(0);}
input[type="button"] {font-family: Roboto; box-sizing: border-box;color: #fff; cursor: pointer; font-size: 13px; padding: 14px 25px; margin-top: 15px; width: 100%; outline:none;}

/*
.button {
    font-family: Roboto;
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    padding: 12px 25px;
    outline: 0;
    border: 0px solid #ddd;
    border-radius: 3px;
    text-transform: uppercase;
    cursor: pointer;
    _cursor: pointer;
}*/

.one-field {position: relative;margin-top: 0px;margin-bottom: 20px;}
.one-field input,.one-field textarea {font-family: 'Roboto', sans-serif;width: 100%;padding: 13px 10px; outline:0;}
.one-field input:focus + label, .one-field input:valid + label,.one-field textarea:focus + label,.one-field textarea:valid + label {color: #666;font-size: .8rem;font-weight: bold;top: -7px;}
/*empty input*/
/*.one-field input[value='']:valid + label{ border: 1px solid green;top: 12px;}
.one-field input:focus:required:invalid + label{ color: red; border-color: red; box-shadow: 0 0 6px red;}
.one-field input:focus:required:valid + label,
.one-field input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
*/
.one-field input:focus + label:after,.one-field input:valid + label:after,.one-field textarea:focus + label:after,.one-field textarea:valid + label:after {content: '';}
.one-field label {position: absolute;top: 14px;left: 10px;color: #888;font-size: .8rem;background: #fff;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}

.form-group-input {position: relative;}
.form-group-input label,.form-group-input input {width: 100%; padding: 5px 6px; font-size: 13px; line-height: 1;}
.form-group-input label {position: absolute;top: 3px;left: 0;display: block;transition: all .1s ease-in-out;}
.form-group-input input::placeholder {color: transparent;}
.form-group-input input:not(:placeholder-shown) {padding-top: 15px; padding-bottom: 1px; font-weight:500;}
.form-group-input input:not(:placeholder-shown) ~ label {padding: 0 6px;font-size: 11px; color:#666;}


.tags {list-style: none;margin: 0;overflow: hidden; padding: 0;}
.tags li {float: left; }
.tag {background: #eee;border-radius: 3px 0 0 3px;color: #999;display: inline-block;height: 26px;line-height: 26px;padding: 0 20px 0 23px;position: relative;margin: 0 10px 10px 0;text-decoration: none;-webkit-transition: color 0.2s;}
.tag::before {background: #fff;border-radius: 10px;box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);content: '';height: 6px;left: 10px;position: absolute;width: 6px;top: 10px;}
.tag::after {background: #fff;border-bottom: 13px solid transparent;border-left: 10px solid #eee;border-top: 13px solid transparent;content: '';position: absolute;right: 0;top: 0;}
.tag:hover {background-color: crimson;color: white;}
.tag:hover::after {border-left-color: crimson; }

/* Checkbox Style + radio button  */
.i-checks {padding-left: 20px;cursor: pointer;display:block;}
.i-checks input {opacity: 0;position: absolute;margin-left: -20px;padding:0;}
.i-checks input:checked + i {border-color: #388e3c;}
.i-checks input:checked + i:before {left: 2px;top: 2px;width: 8px;height:8px;background-color: #388e3c;}
.i-checks input:checked + span .active {display: inherit;}
.i-checks input[type="radio"] + i, .i-checks input[type="radio"] + i:before {border-radius: 50%;}
.i-checks input[disabled] + i, fieldset[disabled] .i-checks input + i {border-color: #388e3c;}
.i-checks input[disabled] + i:before, fieldset[disabled] .i-checks input + i:before {background-color: #388e3c;}
.i-checks > i {width: 14px;height: 14px;line-height: 1;border: 1px solid #388e3c;background-color: #fff;margin-left: -20px;margin-top: -2px;display: inline-block;vertical-align: middle;margin-right: 4px;position: relative; z-index:0;}
.i-checks > i:before {content: "";position: absolute;left: 10px;top: 10px;width: 0px;height: 0px;background-color: transparent;-webkit-transition: all 0.2s;transition: all 0.2s;}
.i-checks > span {margin-left: -20px;}
.i-checks > span .active {display: none;}

.styled-checkbox {position: absolute;opacity: 0;}
.styled-checkbox + label {position: relative;cursor: pointer;padding: 0; display:inline-block}
.styled-checkbox + label:before {content: '';margin-right: 10px;display: inline-block;vertical-align: text-top;width: 18px;height: 18px;background: white; border:1px solid #ccc;}
.styled-checkbox:hover + label:before {background: #f35429;}
.styled-checkbox:focus + label:before {box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);}
.styled-checkbox:checked + label:before {background: #f35429;}
.styled-checkbox:disabled + label {color: #b8b8b8;cursor: auto;}
.styled-checkbox:disabled + label:before {box-shadow: none;background: #ddd;}
.styled-checkbox:checked + label:after {content: '';position: absolute;left: 4px;top: 15px;background: white;width: 2px;height: 2px;box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;-webkit-transform: rotate(45deg);transform: rotate(45deg);}