﻿.login-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: calc(100vh - 85px) !important;
    margin: 0 auto;
    flex-direction: row;
}

.login-wrapper {
    width: 300px;
    padding: 10px;
    box-shadow: 0px 0px 2px 1px #ccc;
    display: flex;
    flex-direction: column;
    align-content: center;
    margin: 0 auto;
    border-radius: 4px;
    animation-name: fadeInDown;
    animation-duration: 2s;
    background-color: #cccccc7a;
}

.fadeoutdown {
    animation-name: fadeOutDown;
    animation-duration: 2s;
}

.btn-orange {
    color: #ffffff;
    background-color: #ff8800;
    border-color: #ff880000;
}

    .btn-orange:hover {
        color: #212529;
        background-color: #ff9900;
        border-color: #ff9900;
    }

    .btn-orange:focus {
        box-shadow: 0 0 0 0.2rem rgba(222,170,12,.5) !important;
    }

    .btn-orange:not(:disabled):not(.disabled).active:focus, .btn-orange:not(:disabled):not(.disabled):active:focus, .show > .btn-orange.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(222,170,12,.5) !important;
    }

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #ff9900;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(222,170,12,.5) !important;
}

.page-container {
    margin-top: 50px !important;
    display: inline-block;
    width: 100%;
}

.form-wrapper {
    width: 28%;
    /* margin: 0 auto; */
    /* vertical-align: middle; */
    /* box-shadow: 0 0 5px 2px #ccc; */
    /* border-radius: 4px; */
    background-color: #e6e6e6;
    float: right;
    /* margin: 20px; */
    /* min-height: 100%; */
    padding: 10px;
    display: inline-block;
    height: 85vh;
    top: 0;
    margin-top: -3px;
}

.form-info {
    width: 70%;
    float: left;
    display: inline-block;
}

.info-pass {
    width: 90%;
    margin: 0 auto;
    float: left;
    margin: 7%;
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(40px);
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(40px);
    }
}
