body {
    background-color: #25252B;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.formcontainer {
    display: flex;
    width: 960px;
    height: 570px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    overflow: hidden;
    border-radius: 8px;
}

    .formcontainer .formcontainer_left,
    .formcontainer .formcontainer_right {
        width: 50%;
        position: relative;
    }

        .formcontainer .formcontainer_left img {
            width: 100%;
            height: 100%;
        }

        .formcontainer .formcontainer_left .formcontainer_left_icon {
            width: 28%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

form {
    background-color: #FFFFFF;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

    form h2, form p {
        color: #3C3938;
    }

    form p {
        font-weight: 500;
        font-size: 10px;
    }

.idtxtbox {
    margin: 20px auto 20px;
}

.idtxtbox, .passtxtbox {
    position: relative;
    border-bottom: 2px solid #F0F8FF;
    width: 350px;
}

    .idtxtbox .idtxtbox_usericon,
    .passtxtbox .passtxtbox_pwicon,
    .passtxtbox .passtxtbox_eyeicon {
        width: 28px;
        height: 28px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .idtxtbox .idtxtbox_usericon,
    .passtxtbox .passtxtbox_pwicon {
        left: 0%;
    }

    .passtxtbox .passtxtbox_eyeicon {
        right: 0%;
        opacity: 0.2;
        transition: all 0.5s ease 0s;
    }

        .passtxtbox .passtxtbox_eyeicon:hover {
            cursor: pointer;
            opacity: 1.0;
        }

form input[type = "text"] {
    margin: 0 0 0 25px;
}

form input[type = "password"] {
    margin: 0 25px;
}

    form input[type = "password"]::-ms-reveal {
        display: none;
    }

form input[type = "text"],
form input[type = "password"] {
    border: none;
    background-color: transparent;
    width: 300px;
    display: block;
    padding: 15px 10px 12px;
    outline: none;
    transition: 0.25s;
    text-align: left;
    color: #3C3938;
    font-size: 15px;
}

    form input[type = "text"]::placeholder,
    form input[type = "password"]::placeholder {
        text-align: left;
        opacity: .6;
        font-size: 15px;
    }

#loginButton {
    border: none;
    background-color: #42AFC1;
    display: block;
    margin: 40px auto 20px;
    height: 50px;
    width: 350px;
    color: #FFFFFF;
    border-radius: 5px;
    transition: 0.25s;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
}

    #loginButton:hover {
        opacity: .5;
        transition: all .5s ease-out;
    }

.error_message {
    color: #FF0800;
    font-size: 14px;
    height: 1.2em;
    visibility: visible;
    font-weight: bold;
}