:root {
    --primary-color: #0076c6;
    --black: #000;
    --green-success: #4CAF50;
    --info: #17a2b8;

    --blue-bs: #007bff;
    --indigo-bs: #6610f2;
    --purple-bs: #6f42c1;
    --pink-bs: #e83e8c;
    --red-bs: #dc3545;
    --orange-bs: #fd7e14;
    --yellow-bs: #ffc107;
    --green-bs: #28a745;
    --teal-bs: #20c997;
    --cyan-bs: #17a2b8;
    --white-bs: #fff;
    --gray-bs: #6c757d;
    --gray-dark-bs: #343a40;
    --primary-bs: #007bff;
    --secondary-bs: #6c757d;
    --success-bs: #28a745;
    --info-bs: #17a2b8;
    --warning-bs: #ffc107;
    --danger-bs: #dc3545;
    --light-bs: #f8f9fa;
    --dark-bs: #343a40;
}

.sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
    margin-top: 10px !important;
    margin-left: 0.3em !important;
}

.subMenuOption { padding-left: 1em !important; }

#navbarDropdownMenuLink { cursor: pointer; }

/** Modal and Ballons */

.modalContainerBallons {
    background: transparent;
    border: none;
}

.modalContainerBallons > .modal-header { border: none; }

.modalContainerBallons > .modal-footer { border: none; }

.balloon {
    display: table-cell;
    width:120px;
    height: 175px;
    background:hsl(215,50%,65%);
    border-radius:80%;
    position:relative;
    box-shadow:inset -10px -10px 0 rgba(0,0,0,0.07);
    margin:20px 30px;
    transition:transform 0.5s ease;
    z-index:10;
    animation:balloons 4s ease-in-out infinite;
    transform-origin:bottom center;
    text-align: center;
    margin: 0 auto;
}

@keyframes balloons {
    0%,100%{ transform:translateY(0) rotate(-4deg); }
    50%{ transform:translateY(-25px) rotate(4deg); }
}

.balloon:before {
    content:"▲";
    font-size:20px;
    color:hsl(215,30%,50%);
    display:block;
    text-align:center;
    width:100%;
    position:absolute;
    bottom:-12px;
    z-index:-100;
}

.balloon:after {
    left: 50%;
    display:inline-block;
    top: 182px;
    position:absolute;
    height: 180px;
    width:1px;
    margin:0 auto;
    content:"";
    background:rgba(0,0,0,0.2);
}
  
.balloon:nth-child(2){ background:rgba(190, 61, 244, 0.9); animation-duration:3.5s; }
.balloon:nth-child(2):before { color:rgba(190, 61, 244, 0.9);  }

.balloon:nth-child(3){ background:rgba(180, 224, 67, 0.9); animation-duration:3s; }
.balloon:nth-child(3):before { color:rgba(180, 224, 67, 0.9);  }

.balloon:nth-child(4){ background:rgba(242, 194, 58, 0.9); animation-duration:4.5s; }
.balloon:nth-child(4):before { color:rgba(242, 194, 58, 0.9);  }

.balloon:nth-child(5){ background:rgba(242, 112, 45, 0.9); animation-duration:5s; }
.balloon:nth-child(5):before { color:rgba(242, 112, 45, 0.9);  }

.balloon:nth-child(6){ background:transparent; animation-duration:5s; box-shadow: none; }
.balloon:nth-child(6):before { color:transparent;  }
.balloon:nth-child(6):after { height: 0; }

.balloon:nth-child(7){ background:rgba(242, 194, 58, 0.9); animation-duration:5s; }
.balloon:nth-child(7):before { color:rgba(242, 194, 58, 0.9);  }

.balloon:nth-child(8){ background:rgba(180, 224, 67, 0.9); animation-duration:5s; }
.balloon:nth-child(8):before { color:rgba(180, 224, 67, 0.9);  }

.balloon:nth-child(9){ background:rgba(190, 61, 244, 0.9); animation-duration:5s; }
.balloon:nth-child(9):before { color:rgba(190, 61, 244, 0.9);  }

.modal-xl { max-width: 90% !important; }
  
.span-ballon {
    font-size: 4.8em;
    color: white;
    position: relative;
    top: 70px;
    left: 60%;
    margin-left: -2.2em; 
}

.modalContainerBallons > .modal-header > button {
    color: white !important;
    font-size: 3.8em;
}


@media(max-width: 500px) {
    .balloon {
        display:inline-block;
        width: 50px;
        height: 75px;
    }

    .span-ballon {
        font-size: 2.5em;
        top: 25px;
        left: 60%;
        margin-left: -60px;
    }

    .balloon:after {
        top:83px;
    }

    .imgLogoFloatRight {
        width: 200px;
        float: none;
        margin: 2px;
    }
}

.cntNamesBirthDay {
    margin-top: 5em;
    background: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%) !important;
    color: white;
    border-radius: 12px;
    padding: 10px 0;
}
.cntNamesBirthDay > p {
    margin-top: 1em;
    font-size: 2em;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.shakeNotification {
    animation: shake 2s;
    animation-iteration-count: infinite;
    /* nelson */
    /* color: #4CAF50 !important; */
}

.shakeNotification > i, .notificationMessageGlobalContent > i, #navbarDropdownProfile > i { font-size: 1.8rem !important; }

.shakeNotification > span.notification, .notificationMessageGlobalContent > span.notification { font-size: .8rem !important; }
  
@keyframes shake {
    0% { transform: rotate(0); }
    15% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    45% { transform: rotate(4deg); }
    60% { transform: rotate(-4deg); }
    75% { transform: rotate(2deg); }
    85% { transform: rotate(-2deg); }
    92% { transform: rotate(1deg); }
    100% { transform: rotate(0); }
}

.notification-system { background: var(--green-success) !important; }

.notification-message { background: var(--info) !important; }

.wrapper{
    width:200px;
    height:60px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}
.circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    left:15%;
    transform-origin: 50%;
    /* animation: circle .5s alternate infinite ease; */
}
.contentLoadingGlobal {
    background: transparent;
    height: 80vh;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    /* animation-delay: .2s; */
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    /* animation-delay: .3s; */
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes heartbeat {
    20% { transform: scale( 1 ); }
    40% { transform: scale( .75 ); }
    60% { transform: scale( 1 ); }
    80% { transform: scale( .75 ); }
    100% { transform: scale( .75 ); }
    0% { transform: scale( .75 ); }
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.wrapper span{
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #fff;
    left:15%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }
/*input[type="date"]:in-range::-webkit-datetime-edit-year-field, input[type="date"]:in-range::-webkit-datetime-edit-month-field, input[type="date"]:in-range::-webkit-datetime-edit-day-field, input[type="date"]:in-range::-webkit-datetime-edit-text { 	color: transparent; }*/

div.col-11.col-md-4.alert.alert-danger.alert-with-icon.animated.fadeInDown { z-index: 9999 !important; }

div.col-11.col-md-4.alert.alert-success.alert-with-icon.animated.fadeInDown { z-index: 9999 !important; }

.progress-bar-global{
    height: 3px;
    background: #af71af;
    display: inline-table;
}

.str-progress-bar-global {
    text-align: center;
    font-size: 2em;
    color: #af71af;
}

.progress-count-global {
    width: 100%;
    text-align: center;
    font-weight: 100;
    font-size: 3em;
    display: inline-table;
    color: #af71af;
}




.table-london > thead > tr {
    background: #1A4F77;
    color: #F2E32E;
    text-align:center;
}
.table-london > thead > tr > th {
    font-weight: bold;
    border: 1px solid white;
    font-size: 13px !important;
}
.table-london > tbody > tr > td:first-child {
    background: #1A4F77;
    color: #F2E32E;
    text-align:center;
    font-weight: bold;
    font-size: 13px !important;
    padding: 4px 0;
}
.table-london > tbody > tr > td {
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.table-london > tbody > tr:first-child {
    background: #d9d9d9;
    font-weight: bold;
}

li::marker {
    content: none;
}

.img-sidebar {
    width: 30px;
}

.img-footer {
    width: 25px;
}

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

.imgLogoFloatRight {
    width: 200px;
    height: auto;
    float: right;
}






#div-saving-by-parts {
    z-index: 99999999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.element-percentage-loading-global {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #aaaa;
}
.element-percentage-loading-global .element-num-percentage-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.element-percentage-loading-global .element-num-percentage-loading h2 {
    font-weight:700;
    font-size:40px;
    transition:0.5s;
}
.element-percentage-loading-global .element-num-percentage-loading h2 span {
    font-size:24px;
    transition:0.5s;
}
.element-text-percentage-loading {
    stroke: var(--secondary-bs);
    margin-top:20px;
    font-weight:700;
    font-size:18px;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:0.5s;
    position: absolute;
    margin-top: 190px;
    animation: heartbeat 4s infinite ease;
}
.svg-percentage-loading-global {
    width:150px;
    height:150px;
    z-index:1000;
}
.svg-percentage-loading-global circle {
    width:100%;
    height:100%;
    fill:none;
    stroke: var(--secondary-bs);
    stroke-width:10;
    stroke-linecap:round;
    transform:translate(5px,5px);
}
.svg-percentage-loading-global circle:nth-child(2) {
    stroke-dasharray:440;
    stroke-dashoffset:440;
}

input[type='checkbox'].form-control {
    height: 20px !important;
}

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
}
.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}
.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}
.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}
.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}
.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}
.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}
.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}
.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}
.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}
@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#div-buscador {
    display: table;
}

#div-buscador input {
    width: 250px;
}

#listado_buscador {
    position: absolute;
    max-height: 300px;
    background: white;
    overflow-y: scroll;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .14);
    border-radius: 6px;
}

#listado_buscador ul {
    padding: 10px 8px;
    list-style: none;
    cursor: pointer;
    margin: 5px;
}

.activeBuscador {
    background: #9c27b0;
    border-radius: 3px;
    color: white !important;
}

#listado_buscador ul:hover {
    background: #9c27b0;
    border-radius: 3px;
    color: white !important;
}

#buscador_principal {
    background: white;
    padding: 15px;
    border-radius: 15px;
}

.dropdown-item {
    cursor: pointer;
}

.dropdown-notification-text {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
}