/*paginate*/

.width-input-100 {
    width: 100px;
}
 .cursor-not-allowed{
     cursor: not-allowed;
 }
.right-paginate {
    width: 100%;
    display: flex;
    float: right!important;
    justify-content: flex-end;
}

/* === CSS FILTER EFFECTS === */
.firstBlur.modalBlur > *:not(.modal) {
    -webkit-filter: blur(8px)!important;
}
.firstBlur.modalDesaturate > *:not(.modal) {
    -webkit-filter: saturate(0%)!important;
}


.control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 5px;
    padding-top: 3px;
    cursor: pointer;
}
.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.btn-align-rigth {
    display: flex;
    justify-content: flex-end;
}
.control_indicator {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border: 1px hidden #EE7203;
    border-radius: 20px;
}
.control:hover input ~ .control_indicator,
.control input:focus ~ .control_indicator {
    background: #cccccc;
}

.control input:checked ~ .control_indicator {
    background: #EE7203;
}
.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:checked:focus ~ .control_indicator {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator {
    background: #e6e6e6;
    opacity: 9;
    pointer-events: none;
}
.control_indicator:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #EE7203;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #7b7b7b;
}
.control-checkbox .control_indicator::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    margin-left: -1.3rem;
    margin-top: -1.3rem;
    background: #EE7203;
    border-radius: 3rem;
    opacity: 0.6;
    z-index: 99999;
    transform: scale(0);
}
@keyframes s-ripple {
    0% {
        transform: scale(0);
    }
    20% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
@keyframes s-ripple-dup {
    0% {
        transform: scale(0);
    }
    30% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
.control-checkbox input + .control_indicator::before {
    animation: s-ripple 250ms ease-out;
}
.control-checkbox input:checked + .control_indicator::before {
    animation-name: s-ripple-dup;
}

.align-svg-right{
    text-align: right!important;
}
.svg-border-null{
    border: 0;
    background-color: #FBFBFA!important;
}
.ui-slider .ui-slider-range {
    position: absolute;
    background: #F1C40F;
    font-size: 3em;
    display: block;
    border: 0;
    margin-top: -4px;
    background-position: 0 0;
    height: 8px!important;
}
.circle-filter-ranges{
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #000000;
    border: 1px hidden #000000;
    border-radius: 20px;
    margin-top: -4px!important;
}

.input-wrapper {
    position: relative;
    width: 100%;
}

.calendar-top {
    margin-top: -6px!important;
}
.input {
    box-sizing: border-box;
    color: #191919;
    width: 100%;
}

.input.password {
    padding: 15px 35px 15px 15px;
}

.input-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 12px;
    top: 45%;
    transform: translateY(-50%);
    cursor: pointer;
}

.input-icon.password {
    left: unset;
    right: 12px;
}

.padding_bottom_5_pointer {
    cursor: pointer;
    padding-bottom: 5px
}
.span-background-color-customer {
    background-color: #30f371!important;
    opacity: 0.5!important;
    color: black!important;
}

.span-background-color-prospect {
    background-color: #50c0f3!important;
    opacity: 0.5!important;
    color: black!important;
}

.span-background-color-not-interested {
    background-color: #f3bc37!important;
    opacity: 0.5!important;
    color: black!important;
}

.span-background-color-interested {
    background-color: #caf33a!important;
    opacity: 0.5!important;
    color: black!important;
}

.span-background-color-interested-later {
    background-color: #ad9df3 !important;
    opacity: 0.5!important;
    color: black!important;
}
.span-background-color-file-full {
    background-color: #a39000!important;
    opacity: 0.5!important;
    color: #ffffff!important;
}
.span-background-color-housing-assignment{
    background-color: #00c0cf !important;
    opacity: 0.5!important;
    color: #000000 !important;
}
.span-background-color-bank-account-validation{
    background-color: #abff00 !important;
    opacity: 0.5!important;
    color: black!important;
}
.span-background-color-obtaining-appointment{
    background-color: #7e7580!important;
    opacity: 0.5!important;
    color: #ecf0f3!important;
}
.span-background-color-generating-documents{
    background-color: #ffd80070 !important;
    opacity: 0.5!important;
    color: black!important;

}

.span-background-color-schedule-signature-purchase{
    background-color: #ff8300 !important;
    opacity: 0.5!important;
    color: black!important;
}
.span-background-color-identity-card-application{
    background-color: #ff0000!important;
    opacity: 0.5!important;
    color: #ffffff!important;
}

.span-background-color-photo-capture{
    background-color: #f84aff !important;
    opacity: 0.5!important;
    color: #000000 !important;
}


.span-background-color-not {
    background-color: #f3626b !important;
    opacity: 0.5!important;
    color: white!important;
}

.img-w30 {
    width: 30px!important;
    border-radius: 5px!important;
    cursor: pointer;
    height: 30px!important;
    max-width: 30px!important;
}


/*red*/
.control_indicator_red {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
    border: 0px solid red;
    border-radius: 20px;
}
.control:hover input ~ .control_indicator_red,
.control input:focus ~ .control_indicator_red {
    background: #cccccc;
}

.control input:checked ~ .control_indicator_red {
    background: red;
}
.control:hover input:not([disabled]):checked ~ .control_indicator_red,
.control input:checked:focus ~ .control_indicator_red {
    background: #0e6647d;
}
.control input:disabled ~ .control_indicator_red {
    background: #e6e6e6;
    opacity: 0.6;
    pointer-events: none;
}
.control_indicator_red:after {
    box-sizing: unset;
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator_red:after {
    display: block;
}
.control-checkbox .control_indicator_red:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator_red:after {
    border-color: #7b7b7b;
}
.control-checkbox .control_indicator_red::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 4.5rem;
    height: 4.5rem;
    margin-left: -1.3rem;
    margin-top: -1.3rem;
    background: #2aa1c0;
    border-radius: 3rem;
    opacity: 0.6;
    z-index: 99999;
    transform: scale(0);
}
.control-checkbox input + .control_indicator_red::before {
    animation: s-ripple 250ms ease-out;
}
.control-checkbox input:checked + .control_indicator_red::before {
    animation-name: s-ripple-dup;
}


/*Animaciones*/

/*shake top*/

.shake-top {
    animation: myAnimShakeTop 3s ease 0s infinite normal forwards;
}

@keyframes myAnimShakeTop {
    0%,
    100% {
        transform: rotate(0deg);
        transform-origin: 50% 0;
    }

    10% {
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(4deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    90% {
        transform: rotate(2deg);
    }
}

.pulse-heart {
    animation: animPulseHeart 3s ease 0s infinite normal forwards;
}

@keyframes animPulseHeart {
    0% {
        animation-timing-function: ease-out;
        transform: scale(1);
        transform-origin: center center;
    }

    10% {
        animation-timing-function: ease-in;
        transform: scale(0.91);
    }

    17% {
        animation-timing-function: ease-out;
        transform: scale(0.98);
    }

    33% {
        animation-timing-function: ease-in;
        transform: scale(0.87);
    }

    45% {
        animation-timing-function: ease-out;
        transform: scale(1);
    }
}

.blink-2 {
    animation: animBlink2 2s ease 0s infinite normal forwards;
}

@keyframes animBlink2 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.2;
    }

    100% {
        opacity: 1;
    }
}

.shake-top {
    animation: animShakeTop 5s ease 0s infinite normal forwards;
}

@keyframes animShakeTop {
    0%,
    100% {
        transform: rotate(0deg);
        transform-origin: 50% 0;
    }

    10% {
        transform: rotate(2deg);
    }

    20%,
    40%,
    60% {
        transform: rotate(-4deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(4deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    90% {
        transform: rotate(2deg);
    }
}

.shake-rotate {
    animation: animShakeRotate 5s ease 0s infinite normal forwards;
}

@keyframes animShakeRotate {
    0%,
    100% {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
    }

    10% {
        transform: rotate(8deg);
    }

    20%,
    40%,
    60% {
        transform: rotate(-10deg);
    }

    30%,
    50%,
    70% {
        transform: rotate(10deg);
    }

    80% {
        transform: rotate(-8deg);
    }

    90% {
        transform: rotate(8deg);
    }
}

.color-orange {
    color: #EE7203!important;
}

.color-black {
    color: #000000!important;
}