/* Contenedor del Login */
 
 .card-login {
    border: 0;
    border-radius: var(--font-sm);
    box-shadow: 0 var(--font-xxs) var(--font-sm) 0 rgba(0, 0, 0, 0.1);
}

.card-login .card-logo {
    padding: var(--spacer-sm) 20%;
    text-align: center;
}
  
.card-login .card-logo svg {
    width: 50%;
    height: 50%;
}

.card-login .card-title {
    margin-bottom: var(--font-lg);
    font-weight: 400;
    font-size: var(--font-lg);
}

.card-login .card-body {
    padding: var(--font-lg);
}

/* Formulario del Login */

.form-login {
    width: 100%;
}

.form-error {
    color: #ff5252;
    text-align: center;
    font-weight: bold;
}

.form-login .btn {
    padding: var(--font-sm);
    border-radius: var(--font-xl);
    font-size: 80%;
    letter-spacing: .1rem;
    font-weight: bold;
    transition: all 0.2s;
}
  
.form-label-group {
    position: relative;
    margin-bottom: var(--font-sm);
}
  
.form-label-group input {
    height: auto;
    border-radius: var(--font-lg);
}
  
.form-label-group>input,
.form-label-group>label {
    padding: var(--font-xs) 1.5rem;
}
  
.form-label-group>label {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0;
    color: #495057;
    border: 1px solid transparent;
    border-radius: .25rem;
    line-height: 1.5;
    transition: all .1s ease-in-out;
}
  
.form-label-group input::-webkit-input-placeholder {
    color: transparent;
}

.form-label-group input:-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-ms-input-placeholder {
    color: transparent;
}

.form-label-group input::-moz-placeholder {
    color: transparent;
}

.form-label-group input::placeholder {
    color: transparent;
}
  
.form-label-group input:not(:placeholder-shown) {
    padding-top: calc(var(--font-xs) + var(--font-xs) * (2 / 3));
    padding-bottom: calc(var(--font-xs) / 3);
}
  
.form-label-group input:not(:placeholder-shown)~label {
    padding-top: calc(var(--font-xs) / 3);
    padding-bottom: calc(var(--font-xs) / 3);
    font-size: var(--font-sm);
    color: #777;
}
  
/* Soporte Edge
-------------------------------------------------- */
  
@supports (-ms-ime-align: auto) {
    .form-label-group>label {
        display: none;
    }
    .form-label-group input::-ms-input-placeholder {
        color: #777;
    }
}
  
/* Sporte IE
-------------------------------------------------- */
  
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .form-label-group>label {
        display: none;
    }
    .form-label-group input:-ms-input-placeholder {
        color: #777;
    }
}