﻿body {
    margin: 0;
    padding: 0;
}

.my-bg-body {
    background: #e3e3e3;
    background: linear-gradient(0deg,rgba(227, 227, 227, 1) 0%, rgba(235, 235, 235, 1) 48%, rgba(240, 240, 240, 1) 100%);
}

/*Color de la barra*/
.navbar {
    background: rgb(208,208,208);
    background: linear-gradient(0deg, rgba(208,208,208,1) 3%, rgba(203,203,203,1) 26%, rgba(172,172,172,1) 79%, rgba(173,173,173,1) 94%);
    /*background: rgb(221,221,221);
    background: linear-gradient(0deg, rgba(221,221,221,1) 3%, rgba(194,194,194,1) 26%, rgba(159,159,159,1) 73%, rgba(143,143,143,1) 94%);*/
    /*background-color: #80f6f6;*/ /*rgba(30, 144, 255, 0.50) */
    padding: 10px 10px; /* Large padding which will shrink on scroll (using JS) */
    transition: 0.4s; /* Adds a transition effect when the padding is decreased */
    position: fixed; /* Sticky/fixed navbar */
    width: 100%;
    top: 0; /* At the top */
    z-index: 99;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
    
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        margin-top: -5px;
        left: 100%;
        
    }

.dropdown-menu > li > a:hover::after {
    text-decoration: underline;
    transform: rotate(-90deg);
}
/*Color del menú*/
.dropdown-menu {
    background-color: #f7f7f7; /*#77c5fe*/
}

.menuletter{
    font-weight:500;
    color:red; /*color de letra, pero hay que sacar la clase navbar-ligth para que funcione*/
}

/*Color del submenú*/
.dropdown-menu > li > ul {
    background-color: #c3def8;
}
/*Color de fondo de los items principales con submenu*/
.navbar-nav li:hover {
    background-color: #7abda2;
    border-bottom: hidden;
    border-radius: 5px;
}
/*color de fondo de los items 0 (principales sin submenu)*/
.navbar-nav a:hover {
    background-color: #7abda2; /*#ff7e7e*/ /*#79b9fF*/
    /*border-bottom-right-radius: 10px;*/
    border-radius: 5px;
}

.acces {
    float:right;
}

.fondoTitulo {
    background: #00693E;
    /*background: rgb(50,210,0);
    background: linear-gradient(0deg, rgba(50,210,0,1) 8%, rgba(35,191,0,1) 31%, rgba(35,171,0,1) 72%, rgba(35,163,0,1) 90%);*/
}

.fondoBody {
    background: rgb(241,241,241);
    background: linear-gradient(0deg, rgba(241,241,241,1) 3%, rgba(242,242,242,1) 26%, rgba(241,241,241,1) 73%, rgba(240,240,240,1) 94%);
}

/*footer que reemplaza dialog defs tema1.css*/
/*.footer {
    background: rgb(42,42,42);
    background: linear-gradient(0deg, rgba(42,42,42,1) 4%, rgba(58,58,62,1) 36%, rgba(47,47,60,1) 84%);
    color: #FFFFFF;
}

    .footer a {
        color: #FFFFFF;
    }

        .footer a:hover {
            color: #7dff91;
            text-decoration: none;
        }*/

#alert_container {
    position: fixed;
    top: 50px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    max-width: 400px;
    width: calc(100vw - 40px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

    #alert_container .alert {
        margin-bottom: .75rem;
        box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
        position: relative;
        white-space: normal;
    }


        #alert_container .alert.alert-detailed {
            align-items: flex-start;
            padding-right: 2.8rem;
            max-width: 520px;
        }

        #alert_container .alert.alert-compact {
            align-items: center;
        }

    #alert_container .alert-message {
        line-height: 1.35;
    }

@keyframes alertBounceIn {
    0% {
        transform: scale(.92);
        opacity: 0;
    }

    60% {
        transform: scale(1.02);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

#alert_container .alert.alert-animated {
    animation: alertBounceIn .35s ease both;
}

/*Para agrandar o achicar el btn close*/
#alert_container .alert.alert-dismissible .btn-close {
}

#alert_container .progress {
    height: 4px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    background: rgba(0,0,0,.07);
}

#alert_container .progress-bar {
    width: 100%;
    transition: width 10s linear;
    background: rgba(0,0,0,.15);
}
