/* INPUT */
.inputbox-container {
/*    border: 1px solid #eeeeee;
*/    position: relative;
    height: auto;
    /* border-radius: 3px; */
    background: transparent;
}

.inputbox-container.focus {
/*    box-shadow: 0 0 2px #1122ee;
*/}


.inputbox-container:hover .show, .inputbox-container:hover .empty {
    display: block;
}

.inputbox-container.error:hover .required-msg {
    opacity: 0.5;
}

.inputbox-container input,
.inputbox-container textarea {
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    z-index: 1;
    border: 1px solid #555;
    /* border-radius: 3px; */
    transition: border .5s, opacity 0.5s;
    /*opacity: 0.6;*/
    background: #f4f1f1;
    padding-right: 17px;
    resize: none;
}

.inputbox-container input:hover,
.inputbox-container textarea:hover {
    border: 1px solid #303b41;
    opacity: 1;
}

.inputbox-container input:focus,
.inputbox-container textarea:focus {
    border: 1px solid #303b41;
}

.inputbox-container input.secondary,
.inputbox-container textarea.secondary {
    border: 1px solid white;
    background: white;
}

.inputbox-container input.secondary:hover,
.inputbox-container textarea.secondary:hover {
    border: 1px solid white;
}

.inputbox-container input.secondary:focus,
.inputbox-container textarea.secondary:focus {
    border: 1px solid white;
}

.inputbox-container.error input, .inputbox-container.error input.secondary, 
.inputbox-container.error textarea, .inputbox-container.error textarea.secondary {
    border: 1px solid #A70000;
    opacity: 1;
}

.inputbox-container .empty, .inputbox-container .show {
    z-index: 10;
    position: absolute;
    width: 16px;
    right: 5px;
    color: black;
    top: 5px;
    cursor: pointer;
    display: none;
    opacity: 0.5;
    background: transparent url(../images/green-remove.png) no-repeat center;
    background-size: 10px 10px; 
    transition: all 0.5s;
}

.inputbox-container .show {
    right: 25px;
    background: transparent url(../images/eye.png) no-repeat center;
    background-size: 16px 16px; 
}

.inputbox-container .show:hover, .inputbox-container .empty:hover { opacity: 1; }

.inputbox-container .error-msg {
    background: #e7c3c3;
    z-index: 5;
    color: #A70000;
    box-sizing: border-box;
    font-family: Arial;
    padding: 0;
    transition: max-width 0.2s, max-height 0.2s, opacity 0.1s, font-size 0.2s;
    opacity: 0;
    text-align: right;
    width: 100%;
    font-size: 0;
    max-height: 39px;
    display: block;
    text-align: left;
}

.inputbox-container.error .error-msg {
/*    max-width: 50%;
    max-height: 100%;
*/
    padding: 2px;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1;
    font-size: 0.7em;
}

.center {
    text-align: center;
}

.inline {
    display: inline-block;
}


.remove {
    cursor: pointer;
    background: url('../images/remove.png') no-repeat;
    background-size: 16px 16px;
    opacity: 0.5;
}

.remove:hover {
    opacity: 1;
}