﻿body {
    margin: 0;
    padding: 0;
}

#container {
    background-image: url(/Content/img/cross-border-shipping-platform.jpg);
    background-size: cover;
    padding: 5px;
    height: 100vh;
    opacity: 0.8;
}

#login {
    background: #ffffff;
    border-radius: 20px;
    max-width: 390px;
    min-width: 300px;
    padding: 20px 2%;
    margin: 15vh auto;
    border-radius: 20px;
    box-shadow: 5px 5px 5px -2px rgba(0, 0, 0, 0.33);
}

    #login .brand-logo {
        width: 240px;
        margin: auto;
        margin-bottom: 40px;
    }

        #login .brand-logo img {
            width: 100%;
        }

    #login .form-group {
        width: 100%;
        margin-bottom: 1rem;
    }

        #login .form-group label {
            font-size: .9375rem;
            font-weight: bold;
            font-family: 'Roboto', sans-serif;
            margin: 2px 0;
            display: block;
            color: #000;
        }

    #login .form-control {
        border-radius: 20px !important;
        font-size: .9375rem !important;
        background: #FFF;
        width: 100%;
        padding-left: 10px;
        height: 40px;
    }

    #login form .btn-login {
        background: #f4ae00;
        color: #000;
        border: none;
        border-radius: 20px;
        font: bold 15px 'Poppins', sans-serif;
        padding: 10px;
        width: 100%;
        cursor: pointer;
    }

        #login form .btn-login:hover {
            background: #000;
            color: #FFF;
        }

.version {
    font-size: 0.9rem;
    color: #000;
}

.alert-danger {
    text-align: center;
}

/* ANIMACIONES*/
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fast {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}
