﻿

/* Inputs with icon */
.inputWithIcon {
    position: relative;
    padding: 5px;
    color: white;    
}

.inputWithIcon i {
    position: absolute;
    left: 0;
    top: 2px;
    padding: 9px 8px;
    color: #000;
    transition: 0.3s;
}

.inputWithIcon.inputIconBg i {
    background-color: #aaa;
    color: #fff;
    padding: 9px 4px;
    border-radius: 4px 0 0 4px;
}

/* Text Field */
    .inputWithIcon input[type="text"] {
        padding-left: 35px;
        border-bottom-color: white;
        border-width: 0px;
        border-bottom-width: 1px;
        height: 40px;
        width:90%;
    }

.inputWithIcon input[type="text"]:focus + i {
    color: orange;
}

.inputWithIcon.inputIconBg input[type="text"]:focus + i {
    color: white;
    background-color: orange;
}

/* Password */
    .inputWithIcon input[type="password"] {
        padding-left: 35px;
        border-bottom-color: white;
        border-width: 0px;
        border-bottom-width: 1px;
        height: 40px;
        width: 90%;
    }

.inputWithIcon input[type="password"]:focus + i {
    color: orange;
}

.inputWithIcon.inputIconBg input[type="password"]:focus + i {
    color: white;
    background-color: orange;
}

/* Button */
.inputWithIcon input[type="button"] {
    padding-left: 35px;
    border-bottom-color: white;
}

.inputWithIcon input[type="button"]:focus + i {
    color: orange;
}

.inputWithIcon.inputIconBg input[type="button"]:focus + i {
    color: white;
    background-color: orange;
}

/* Select */
    .inputWithIcon select {
        padding-left: 35px;
        border-bottom-color: white;
        width: 98%;
    }

.inputWithIcon select:focus + i {
    color: orange;
}

.inputWithIcon.inputIconBg select:focus + i {
    color: white;
    background-color: orange;
}

.button {
    border: 0;
    outline: none;
    border-radius: 5px;
    padding: 5px 5px 5px 5px;
    font-size: 24px;
    text-transform: uppercase;
    /*letter-spacing: .1em;*/
    background: #5c5b5b;
    color: #ffffff;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-appearance: none;
    height: 60px;
    box-shadow: inset 0 0 10px #ffffff;
}

.button:hover, .button:focus {
    background: orange;
}

.button-block {
    display: block;
    width: 50%;
}
