﻿

.card-login .navbar-brand {
    /*color: #fff;*/
    transition: transform 0.2s ease-in-out
}

@media (prefers-reduced-motion: reduce) {
    .card-login .navbar-brand {
        transition: none
    }
}

.card-login .navbar-brand:hover {
    transform: rotate(-5deg) scale(1.1)
}

section {
    /*background: rgb(25,64,167);
    background: linear-gradient(90deg, rgba(25,64,167,1) 0%, rgba(78,122,238,1) 30%, rgba(78,122,238,1) 66%, rgba(25,64,167,1) 100%);*/
    /*background-image: url(Img/Login.png); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--bs-body-bg);*/
}

/*@media (min-width: 1200px) {
    section {
        background-image: url(Img/Login.png);
        background-size: auto;
        background-position: left;
        background-repeat: no-repeat;
        background-color: var(--bs-body-bg);
    }
}*/
/*
header{
    opacity:0.99;
}

header:hover{
    opacity:1;
}*/

@media (min-width: 576px) {
    .position-sm-absolute {
        position: absolute !important;
    }
}

@media (min-width: 768px) {
    .position-md-unset {
        position:unset !important;
    }
    .opacity-md-100 {
        opacity: 1 !important;
    }
}

.card-login {
    border-radius: 1rem;
    opacity: 0.94;
    position: relative;
    color: var(--bs-secondary-text-emphasis);
}

.card-login:not(.loaded) {
    animation-name: example;
    animation-duration: 2s;
}

    .card-login img {
        opacity: 0.4;
    }

    .card-login:hover {
        opacity: 1;
    }


        .card-login:hover img, .card-login:hover .col-login-left {
            opacity: 1;
        }

@keyframes example {
    0% {
        left: -1500px;
    }

    100% {
        left: 0px;
    }
}

.footer-login {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

[data-bs-theme="dark"] .logo-principal {
    filter: brightness(0) invert(1);
}

.logo-principal {
    max-width: 250px;
}

.col-login-left {
    background-image: url(../Imagenes/Servers.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*opacity: 0.4;*/
}

.logo-crm {
    animation: Bounce .8s ease-in-out 3 alternate;
    animation-delay: 1s;
    position: relative;
}


@-webkit-keyframes Bounce {
    0% {
        bottom: 100%;
    }

    70% {
        transform: scale(0.95, 1.05);
    }

    100% {
        bottom: 0;
        transform: scale(1.15, 0.8);
    }
}

@keyframes Bounce {
    0% {
        bottom: 100%;
    }

    70% {
        transform: scale(0.95, 1.05);
    }

    100% {
        bottom: 0;
        transform: scale(1.15, 0.8);
    }
}

@-webkit-keyframes Shrink {
    0% {
        transform: scale(1.1);
        opacity: 0.15;
    }

    100% {
        transform: scale(0.6);
        opacity: 0.45;
    }
}

@keyframes Shrink {
    0% {
        transform: scale(1.1);
        opacity: 0.15;
    }

    100% {
        transform: scale(0.6);
        opacity: 0.45;
    }
}


body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /*font-family: "proxima-nova-soft", sans-serif;*/
    -webkit-user-select: none;
    overflow: hidden;
}

.vertical-centered-box {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}

    .vertical-centered-box:after {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em;
    }

    .vertical-centered-box .content {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        text-align: left;
        font-size: 0;
    }

.loader-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    margin-left: -60px;
    margin-top: -60px;
}

.loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 120px;
    margin-left: -60px;
    margin-top: -60px;
    overflow: hidden;
    transform-origin: 60px 60px;
    -webkit-mask-image: -webkit-linear-gradient(top, #000000, rgba(0, 0, 0, 0));
    animation: rotate 1.2s infinite linear;
}

    .loader-line-mask .loader-line {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    }

#particles-background,
#particles-foreground {
    left: -51%;
    top: -51%;
    width: 202%;
    height: 202%;
    transform: scale3d(0.5, 0.5, 1);
}

/*[data-bs-theme="light"] #particles-background {
    background: #2c2d44;
    background-image: -moz-linear-gradient(45deg, #3f3251 2%, #002025 100%);
    background-image: -webkit-linear-gradient(45deg, #3f3251 2%, #002025 100%);
    background-image: linear-gradient(45deg, #3f3251 2%, #002025 100%);
}*/

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
