@keyframes bounce {
    0% { transform: translate(-50%, -350%);}
    70% {transform: translate(-50%, -45%); }
    90% {transform: translate(-50%, -53%); }
    100% { transform: translate(-50%, -50%); }
}
  
@keyframes shake {
    0% { transform: translateX(0) }
    5% { transform: translateX(10px) }
    10% { transform: translateX(-10px) }
    15% { transform: translateX(10px) }
    20% { transform: translateX(-10px) }
    25% { transform: translateX(10px) }
    30% { transform: translateX(-10px) }
    35% { transform: translateX(10px) }
    40% { transform: translateX(-10px) }
    45% { transform: translateX(10px) }
    50% { transform: translateX(-10px) }
    65% { transform: translateX(10px) }
    70% { transform: translateX(-10px) }
    75% { transform: translateX(10px) }
    80% { transform: translateX(-10px) }
    85% { transform: translateX(10px) }
    90% { transform: translateX(-10px) }
    95% { transform: translateX(10px) }
    100% { transform: translateX(0) }
}

.container-login {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.bg-gradient-custom {
    background: linear-gradient(0deg, #7a7a7a, #b3b3b300);
}

.ft-custom {
    margin-top: 2rem;
}

.ft-text-custom {
    color: white !important;
}

.container-mapa-alertas {
    margin-bottom: 2.5rem;
}

.nav.nav-pills {
    background: #9f9f9f;
}

.container-new-notifications {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
}

.new-notifications {
    width: auto;
    height: auto;
    background: #e72626;
    border-radius: 1rem;
    margin-left: 5px;
}

.notifications {
    color: white;
    font-weight: 600;
    padding-inline: 5px;
}

hr.horizontal.dark {
    background-color: #7b809a85;
}

.active-menu {
    font-weight: 800 !important;
    color: white !important;
}

.active {
    font-weight: 800 !important;
}

#map {
    border-radius: 20px; 
    height: 100%; 
    position: relative; 
    outline: none;
}

#map_cerradas {
    border-radius: 20px; 
    height: 100%; 
    position: relative; 
    outline: none;
}

.text-gradient.text-primary {
    background-image: linear-gradient(195deg, #3e3e3e, #818181);
}

.btn.bg-gradient-primary {
    box-shadow: 3px 3px 0 #4caf5052, 0 3px 1px -2px #4caf5052, 0 1px 5px 0 #4caf5052;
}

.shadow-primary {
    box-shadow:  0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px #4caf50 !important;
}

.input-group.input-group-outline.is-focused .form-label + .form-control, .input-group.input-group-outline.is-filled .form-label + .form-control {
    border-color: #4caf50 !important;
    border-top-color: transparent !important;
    box-shadow: inset 1px 0 #4caf50, inset -1px 0 #4caf50, inset 0 -1px #4caf50;
}

.input-group.input-group-outline.is-focused .form-label, .input-group.input-group-outline.is-filled .form-label {
    color: #4caf50;
}

.input-group.input-group-outline.is-focused .form-label:before, .input-group.input-group-outline.is-focused .form-label:after, .input-group.input-group-outline.is-filled .form-label:before, .input-group.input-group-outline.is-filled .form-label:after {
    border-top-color: #4caf50;
    box-shadow: inset 0 1px #4caf50;
}

.btn-primary:hover, .btn.bg-gradient-primary:hover {
    background-color: #4caf50;
    border-color: #4caf50;
    box-shadow: 0 14px 26px -12px #4caf50db, 0 4px 23px 0 #4caf502e, 0 8px 10px -5px #4caf50;
}

.img-logo {
    width: 50%;
    height: auto;
}

.menu-top {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.item-menu-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 0.5rem;
}

.nav-link-text {
    color:#ffffff;
}

.text-white {
    color: white;
}

.text-secondary {
    color: #7b809a;
}

.text-gradient.text-secondary {
    background-image: linear-gradient(195deg, #6c757d, #adb5bd);
}
.logo-footer {
    width: 8rem;
}

.container-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.modal-dialog-alert {
    max-width: 50%;
}
.modal-content-alert {
    background: radial-gradient(#cb3535, #730606);
    /* animation: bounce 0.6s; */
    animation: shake 0.6s;
}

.btn-link {
    width: 7rem;
}

.toast-success {
    background-color: #4caf50e0;
}

.toast-danger {
    background-color: #F44335;
}

.toast-body {
    color: white;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    align-items: center;
}

.toast-text {
    font-weight: 500;
}

.toast-container {
    z-index: 1000;
}

.modal-content-alert-close {
    background: linear-gradient(333deg, #07520a, #4caf50);
    border: none;
}

.text-area-alert-close {
    width: 100%;
    border-radius: 1rem;
    resize: none;
    padding: 0.8rem;
}

.btn-alert-close {
    font-size: larger;
    border-style: solid !important;
    border-color: white !important;
    border-width: 2px !important;
}

.modal-content-alert-close .modal-footer {
    flex-direction: row;
    display: flex;
    flex-wrap: nowrap;
}

.modal-content-show-alert-close {
    background: linear-gradient(334deg, #255290, #344767);
    border: none;
}

.card-body-show-alert {
    display: flex;
    flex-direction: row;
}

.card-body-alert-details {
    display: flex;
    flex-direction: column;
}

.btn-modal-custom {
    display: flex;
    flex-direction: row;
    background: linear-gradient(45deg, #515151, #e1e1e1e3);
}

.btn-show-alert-close {
    background: linear-gradient(334deg, #255290, #344767);;
}

.td-alerts {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}