html{
    --input-disabled: rgba(239, 242, 243, 0.3);

    --border-r-input: 3px;
    --border-input: 1px solid #E1E8EA;

    --input-height:35px;
}

.js--label-input label{
    width: auto;
}
.js--label__label{
    top: -11px;
    position: absolute;
    left: -8px;
    color: rgba(49, 67, 83, 0.7);
    z-index: 9;
    font-weight: 300;
    pointer-events: none;
    transition: All 0.3s ease;
    transform: translate(12px, -10px);
    font-size: 11px;
    opacity: 1;
    padding: 0 4px;
    background: #fff;
}

.js--label__label._left{
    left: 3px;
}



.js--label__label._login{
    background: transparent;
    color: #fff;
    top: -4px;
}
.js--label-input textarea:placeholder-shown ~label{
    opacity: 0;
   transform: translate(12px, 0);
}

.js--label-input input:placeholder-shown ~label{
   opacity: 0;
   transform: translate(12px, 0);
}

.js--label-twitter input:placeholder-shown ~label{
    opacity: 0;
    transform: translate(12px, 0);
 }

.js--label-input input:placeholder-shown ~label._login{
    opacity: 1;
    transform: translate(12px, 12px);
    font-size: 14px;
 }
.js--label-input input:-moz-placeholder-shown ~label{
    opacity: 0;
    transform: translate(12px, 0);
 }
 .js--label-input input:-ms-placeholder-shown ~label{
    opacity: 0;
    transform: translate(12px, 0);
 }


.js--label-input input::placeholder{
    color: rgba(49, 67, 83, 0.7);
    font-weight: 300;
}

.js--label-input{
    position: relative;
}

.js--label-input input:placeholder-shown ~ span{
    opacity: 0;
    pointer-events: none;
}
.js--label-input input:-moz-placeholder-shown ~ span{
    opacity: 0;
    pointer-events: none;
}
.js--label-input input:-ms-placeholder-shown ~ span{
    opacity: 0;
    pointer-events: none;
}

.js--label-input input[disabled]{
    background: var(--input-disabled);
}


.js--label-select{
    position: relative;
}

.js--label-select .js--label__label{
    opacity: 0;
    transform: translate(12px, 0);
}
.select2-selection__rendered[title] + .js--label__label{
    opacity: 1;
    transform: translate(12px, -12px);
}

.label-active{
    position: absolute;
    opacity: 1 !important;
    top: -9px;
    color: rgba(49, 67, 83, 0.7);
    left: 5px;
    background: #fff;
    font-size: 11px;
    padding: 0 4px;
    font-weight: 300;
    margin: 0;
    z-index: 8;
}
.js--label-input .select2-container--disabled *{
    background: none !important;
}
.js--label-input .select2-container--disabled{
    background-color: var(--input-disabled);
}
.js--label-input .select2-container--disabled .select2-selection__arrow{
    display: none;
}

.js--label-input .select2-container--krajee .select2-selection--single{
    border: var(--border-input);
    border-radius: var(--border-r-input) !important;
    height: var(--input-height);
    padding: 6px 15px 6px 8px;
}

/* новые инпуты */


.js--label-input input[type="text"]{
    border-radius: var(--border-r-input) !important;
    border: var(--border-input);
}

.input-box{
    height: var(--input-height);
    border-radius: var(--border-r-input);
    border: var(--border-input);
}

.input-box input[type="checkbox"][disabled] + span::before{
    background: var(--input-disabled);
}

.input-box.disabled{
    background: var(--input-disabled);
}

.input-box label{
    margin: 0;
    padding: 6px 15px 6px 8px;

}
.input-box label span {
    width: 100%;
}
.input-box label span::before{
    right: 0;
    top: 0;
}
.input-box label span::after{
    right: 3px;
    top: 4px;
}
.js--label-input .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
    background: var(--input-disabled);
}


/* Стили лейбла для виджета select2 и мультиселекта*/
[data-label-select]{
    position: relative;
}

[data-multi-select]{
    position: relative;
}
[data-datepicker]{
    position: relative;
}
.label-select{
    top: 0;
    position: absolute;
    left: -8px;
    color: rgba(49, 67, 83, 0.7);
    z-index: 9;
    font-weight: 300;
    pointer-events: none;
    transition: All 0.3s ease;
    transform: translate(12px, 10px);
    font-size: 11px;
    opacity: 0;
    padding: 0 4px;
    background: #fff;
}

.label-select.active{
    transform: translate(12px, -10px);
    opacity:1;
}