/* Textbox Template */
:root {
    --default-text-color: #3e4041;
    --alternate-text-color: #9da0a1;
}


.clcontrol.clcontrol-textbox.plug-1-textbox.plug-1-textbox, .clcontainer .clcontrol textarea.textbox_style.plug-1-textbox {
    outline: none;
    background-color: transparent;
    -webkit-transition: border 700ms ease-out;
    -moz-transition: border 700ms ease-out;
    -o-transition: border 700ms ease-out;
}

.clcontainer .clcontrol textarea.textbox_style.plug-1-textbox {
    padding-top: 10px;
}

.clcontrol.clcontrol-textbox.plug-1-textbox.plug-1-textbox, .clcontainer textarea.plug-1-textbox {
    outline: none;
    border-radius: unset;
}

.clcontainer textarea.plug-1-textbox {
    resize: vertical;
}

.plug-1-placeholder {
    margin-bottom: 0px;
    color: var(--default-text-color);
    visibility: hidden;
    position: absolute;
    top: -8px;
    left: 10px;
    padding: 0 5px 0px 5px;
    z-index: 1;
}

.plug-1-helperText {
    margin-top: 4px;
    color: var(--alternate-text-color);
}

.plug-1-input-wrapper {
    margin-top: 5px;
}

.plug-1-preicon {
    color: var(--default-text-color);
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translate(-0%, -50%);
}

    .plug-1-preicon.txtarea-preicon {
        top: 18px;
    }

.plug-1-posticon {
    color: var(--default-text-color);
    font-size: 18px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(-0%, -50%);
}

    .plug-1-posticon.txtarea-posticon {
        top: 18px;
    }

.plug-1-charCount {
    color: var(--alternate-text-color);
    margin-top: 4px;
}

.plug-1-active {
    visibility: visible;
}

.helper-text-container {
    display: flex;
    justify-content: space-between;
}

.plug-1-wrapper.error p.plug-1-helperText {
    color: red;
}

/*Border animation starts here*/

.plug-1-border {
    position: relative;
}

    .plug-1-border:before {
        content: '';
        position: absolute;
        left: 0;
        top: -2px;
        width: 0;
        border-top: solid 2px;
        animation: border_anim 0.3s linear forwards;
    }

@keyframes border_anim {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}
/*For Border Filled */
.md-filled.plug-1-textbox {
    border: unset;
    border-bottom: 1px solid;
}

.md-filled-placeholder {
    top: -5px;
    left: 32px;
}