.bs-example {
    font-family: sans-serif;
    position: relative;
    margin: 50px;
}

.typeahead,
.tt-query,
.tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 18px;
    height: 40px;
    line-height: 30px;
    outline: medium none;
    padding: 8px 12px;
    width: 220px;
    margin-left: 20px;
}

.typeahead {
    background-color: #FFFFFF;
}

.typeahead:focus {
    border: 2px solid #0097CF;
}

.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.tt-hint {
    color: #999999;
}

.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 8px 0;
    width: 422px;
}

.tt-suggestion {
    font-size: 24px;
    line-height: 24px;
    padding: 3px 20px;
}

.tt-suggestion.tt-is-under-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}

.tt-suggestion p {
    margin: 0;
}

/* Estilo para los combo box */
.content-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.content-select select::-ms-expand {
    display: none;
}

.content-select {
    max-width: 250px;
    position: relative;
}

.content-select select {
    display: inline-block;
    width: 100%;
    cursor: pointer;
    padding: 7px 10px;
    height: 42px;
    outline: 0;
    border: 0;
    border-radius: 0;
    background: #95F2FF;
    color: #000000;
    font-size: 1em;
    color: #000000;
    font-family: 'Quicksand', sans-serif;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    position: relative;
    transition: all 0.25s ease;
}

.content-select select:hover {
    background: #00CCFF;
}

/* 
Creamos la fecha que aparece a la izquierda del select.
Realmente este elemento es un cuadrado que sólo tienen
dos bordes con color y que giramos con transform: rotate(-45deg);
*/
.content-select i {
    position: absolute;
    right: 20px;
    top: calc(50% - 13px);
    width: 16px;
    height: 16px;
    display: block;
    border-left: 4px solid #00CCFF;
    border-bottom: 4px solid #00CCFF;
    transform: rotate(-45deg);
    /* Giramos el cuadrado */
    transition: all 0.25s ease;
}

.content-select:hover i {
    margin-top: 3px;
    border-left: 4px solid #003F89;
    border-bottom: 4px solid #003F89;
}

/*Estilo para los check box */
.content-input input,
.content-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.content-input input {
    visibility: hidden;
    position: absolute;
    right: 0;
}

.content-input {
    position: relative;
    margin-bottom: 30px;
    padding: 5px 0 5px 60px;
    /* Damos un padding de 60px para posicionar el elemento <i> en este espacio*/
    display: block;
}

/* Estas reglas se aplicarán a todos las elementos i 
después de cualquier input*/
.content-input input+i {
    background: #f0f0f0;
    border: 2px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    top: 0;
}

/* Estas reglas se aplicarán a todos los i despues 
de un input de tipo checkbox*/
.content-input input[type=checkbox]+i {
    width: 52px;
    height: 25px;
    border-radius: 15px;
    top: 8px;
}

/*
Creamos el círculo que aparece encima de los checkbox
con la etqieta before. Importante aunque no haya contenido
debemos poner definir este valor.
*/
/* CIRCULITO INTERIOR */
.content-input input[type=checkbox]+i:before {
    content: '';
    /* No hay contenido */
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    -webkit-box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.2);
}

/* POSICON DEL CIRCULITO */
.content-input input[type=checkbox]:checked+i:before {
    left: 26px;
    -webkit-box-shadow: -3px 0 3px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 3px 0 -3px 0 rgba(0, 0, 0, 0.2);
}

.content-input input[type=checkbox]:checked+i {
    background: #00CCFF;
}

.content-input input[type=checkbox]+i:after {
    content: 'ON';
    position: absolute;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    top: 4px;
    left: 4px;
    opacity: 0
        /* Ocultamos este elemento */
    ;
    transition: all 0.25s ease 0.25s;
}

/* Cuando esté checkeado cambiamos la opacidad a 1 y lo mostramos */
.content-input input[type=checkbox]:checked+i:after {
    opacity: 1;
}

/* Para los Select Option v2 */
.inputstl {
    padding: 4px !important;
    border: solid 1px #0077B0;
    outline: 0;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #C6ECFF), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #C6ECFF 1px, #FFFFFF 25px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

.inputstl:focus,
.inputstl:hover {
    box-shadow: rgba(133, 240, 213, 0.5) 0px 0px 8px;
    -moz-box-shadow: rgba(133, 240, 213, 0.5) 0px 0px 8px;
    -webkit-box-shadow: rgba(133, 240, 213, 0.5) 0px 0px 8px;

    background-image: linear-gradient(to top, #9c27b0 2px, rgba(156, 39, 176, 0) 2px), linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px);

}

.table-condensed {
    font-size: 14px;
}




/*LAS TABLAS< DEJA LOS ULTIMOS ICONOS PARA PODERLE HACER CLICK*/
td {
    cursor: pointer;
}

td.eliminar a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    z-index: 1;
}

table.c1 {
    width: 50%;
    margin: 0 auto;
}

/*]]>*/

.ui-front {
    z-index: 1000 !important;
}

/*Saca flechita en campo INPUT DATE */
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/*Lo uso para hacer la carga de la pagina y mostrar shadow mientras se carga */

.inner-loader-img {
    position: fixed;
    left: 260px;
    top: 0px;
    width: 90%;
    height: 100%;
    z-index: 9999;
    background: url('../images/ico_loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
    /*   opacity: .75; */
    background-position: 48% 45%;



}

.inner-loader-img-complete {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/ico_loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
    opacity: .75;
    background-position: 48% 45%;



}

.outer-loader {
    width: auto;
    height: 100vh;
    border: dotted hsl(0, 0%, 67%) 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.p-loader {


    bottom: 10px;
    background: #59b4ffb9;


    overflow: hidden;
    padding: 20px;



    font-weight: bold;
    font-size: 20px;
    opacity: .85;
    text-align: center;
    position: absolute;
    bottom: -15px;
    width: 100%;

}

/*   --------------------- */



.custom-label {
    position: relative;
    margin-bottom: 0;
    font-size: 24px;
    color: #dee2e6;
}

.custom-label-2 {
    position: relative;
    margin-bottom: 0;
    font-size: 24px;
    color: #dee2e6;
}

.custom-control .custom-control-input:checked~.custom-label {
    color: #32cd32;
}

.custom-control .custom-control-input:indeterminate~.custom-label {
    color: #32cd32;
    box-shadow: none;
}

.custom-control.icono1,
.custom-control.icono2,
.custom-control.icono3 {
    padding-left: 0 !important;
}

/*  .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% 50%; }
*/

/* para que los autocomplete de los jquery esten arriba de los modals*/
.ui-autocomplete {
    z-index: 215000000 !important;
}



/*Para que las tablas se puedar SORT desde el encabezado */

.table-sortableO th {
    cursor: pointer;
}

.table-sortableO .th-sort-asc::after {
    content: "\25b4";
}

.table-sortableO .th-sort-desc::after {
    content: "\25be";
}

.table-sortableO .th-sort-asc::after,
.table-sortableO .th-sort-desc::after {
    margin-left: 5px;
}

.table-sortableO .th-sort-asc,
.table-sortableO .th-sort-desc {
    background: rgba(0, 0, 0, 0.1);
}

.table-sortableB th {
    cursor: pointer;
}

.table-sortableB .th-sort-asc::after {
    content: "\25b4";
}

.table-sortableB .th-sort-desc::after {
    content: "\25be";
}

.table-sortableB .th-sort-asc::after,
.table-sortableB .th-sort-desc::after {
    margin-left: 5px;
}

.table-sortableB .th-sort-asc,
.table-sortableB .th-sort-desc {
    background: rgba(0, 0, 0, 0.1);
}

/* retoque para que los input dentro de los table se vean a mi gusto */
.form-control-paul {
    border: 0;
    font-size: 15px !important;
    color: black;
}


/* BOTONES FLOTANTES */
.Btn-Flotante-1 {
    width: 50px;
    height: 50px;
    background: #009879;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 50px;
    bottom: 20px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-1:active {
    background: #007D63;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Btn-Flotante-1:active,
.button:active,
button:focus,
.button:focus,
button:hover,
.button:hover {
    border: none !important;
    outline: none !important;
}

.Btn-Flotante-3 {
    width: 50px;
    height: 50px;
    background: #009879;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 400px;
    bottom: 20px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-3:active {
    background: #007D63;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.Btn-Flotante-3:active,
.button:active,
button:focus,
.button:focus,
button:hover,
.button:hover {
    border: none !important;
    outline: none !important;
}

.Btn-Flotante-3b {
    width: 50px;
    height: 50px;
    background: #b51bb6;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 400px;
    bottom: 20px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-3b:active {
    background: #b51bb6;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.Btn-Flotante-3b:active,
.button:active,
button:focus,
.button:focus,
button:hover,
.button:hover {
    border: none !important;
    outline: none !important;
}

.Btn-Flotante-4 {
    width: 50px;
    height: 50px;
    background: #009879;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 120px;
    bottom: 20px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Button */
    border: none;
    cursor: pointer;
}


.Btn-Flotante-4:active {
    background: #007D63;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.Btn-Flotante-4:active,
.button:active,
button:focus,
.button:focus,
button:hover,
.button:hover {
    border: none !important;
    outline: none !important;
}

.Btn-Flotante-4-minialert1 {
    width: 11px;
    height: 11px;
    background: #f4be2a;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 155px;
    bottom: 58px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-4-minialert2 {
    width: 11px;
    height: 11px;
    background: #2af1f4;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 139px;
    bottom: 64px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-4-minialert3 {
    width: 11px;
    height: 11px;
    background: #2af4bb;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 123px;
    bottom: 58px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-5 {
    width: 50px;
    height: 50px;
    background: #009879;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 260px;
    bottom: 20px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-5:active {
    background: #007D63;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.Btn-Flotante-5:active,
.button:active,
button:focus,
.button:focus,
button:hover,
.button:hover {
    border: none !important;
    outline: none !important;
}

.Btn-Flotante-6 {
    width: 50px;
    height: 50px;
    background: #009879;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 190px;
    bottom: 20px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-6:active {
    background: #007D63;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.Btn-Flotante-6:active,
.button:active,
button:focus,
.button:focus,
button:hover,
.button:hover {
    border: none !important;
    outline: none !important;
}


.Btn-Flotante-7 {
    width: 50px;
    height: 50px;
    background: #009879;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 470px;
    bottom: 20px;
    transition: background 0.25s;
    z-index: -1 !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    /* Button */
    border: none;
    cursor: pointer;
}

.Btn-Flotante-7:active {
    background: #007D63;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.Btn-Flotante-7:active,
.button:active,
button:focus,
.button:focus,
button:hover,
.button:hover {
    border: none !important;
    outline: none !important;
}

/* Boton Flotante Contacto */
.activeBotonContactos {
    position: fixed;
    bottom: 20px;
    right: 330px;
    width: 50px;
    height: 50px;
    background: #009879;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.25s;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: -1 !important;

}

.activeBotonContactos span {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1.7em;
    transition: 0.3s ease-in-out;
}

.activeBotonContactos ul {
    position: absolute;
    bottom: 55px;
    background: #fff;
    min-width: 450px;
    padding: 20px;
    border-radius: 20px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;

}



.activeBotonContactos.active ul {
    bottom: 65px;
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
}



.activeBotonContactos ul li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    transition: 0.3s;
}

.activeBotonContactos ul li:hover {
    font-weight: 600;
}

.activeBotonContactos ul li:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.activeBotonContactos ul li img {
    margin-right: 10px;
    opacity: 0.2;
    transform: scale (0.8);
}

.activeBotonContactos ul li:hover img {
    opacity: 0.8;
}




/* TOOTIPS */
.tooltip2 {
    position: relative;
    display: inline-block;
    border-bottom: 1px black;
    color: #13c0ff;
    top: 1px;
    left: 5px;
}

.tooltip2 .tooltiptext2 {
    visibility: hidden;
    width: 250px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 50px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip2 .tooltiptext2::after {
    content: "";
    position: absolute;
    top: 10px;
    left: -3px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip2:hover .tooltiptext2 {
    visibility: visible;
    opacity: 1;
}

/*Otro tooltips */
.tooltipUp {
    position: relative;
    display: inline-block;
    border-bottom: 1px black;
}

.tooltipUp .tooltiptextUp {
    visibility: hidden;
    width: auto;
    white-space: nowrap;
    background-color: #555;
    font-size: 16px;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 2px 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

/*Era la flechita de abajo
  .tooltipUp .tooltiptextUp::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }*/

.tooltipUp:hover .tooltiptextUp {
    visibility: visible;
    opacity: 1;
}

/* CheckBox simple */
.myCheckbox input {
    position: relative;
    z-index: -9999;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
}

/***************************** LOGIN PRINCIPAL ********************/
.loginbox {
    width: 320px;
    height: 390px;
    background: #000;
    color: #fff;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 70px 30px;
}

.avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -50px;
    left: calc(50% - 50px);
}

.hh1 {
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
}

.loginbox p {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.loginbox input {
    width: 100%;
    margin-bottom: 20px;
}

.loginbox input[type="text"],
input[type="password"] {
    border: none;
    border-bottom: 1px solid #fff;
    /*background: transparent;  este  molestaba para el underline de la password en setup.php */
    outline: none;
    height: 40px;
    color: #000;
    font-size: 16px;
}

.loginbox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #fb2525;
    color: #fff;
    font-size: 18px;
    border-radius: 20px;
}

.loginbox input[type="submit"]:hover {
    cursor: pointer;
    background: #ffc107;
    color: #000;
}

.loginbox a {
    text-decoration: none;
    font-size: 12px;
    line-height: 20px;
    color: darkgrey;
}

.loginbox a:hover {
    color: #ffc107;
}

/* Para que en los items de las propuestas el fontawesome este dentro del input */
.globitoitemA {
    float: left;
    margin-right: -600px;
    margin-top: -30px;
    position: relative;
    z-index: 2;
    background: rgb(51, 218, 0);
    border-radius: 100%;
    width: 17px;
    height: 17px;
    padding-top: 1px;
    color: rgb(66, 66, 66);
}

.globitoitemN {
    float: right;
    margin-right: 0px;
    margin-top: 7px;
    position: relative;
    z-index: 10001 !important;
    background: rgb(154, 178, 245);
    border-radius: 100%;
    width: 18px;
    height: 18px;
    padding-top: 1px;
    color: rgb(66, 66, 66);

}

.globitoitemNP {
    float: right;
    margin-right: 0px;
    margin-top: 7px;
    position: relative;
    z-index: 10001 !important;
    background: #FFC107;
    border-radius: 100%;
    width: 18px;
    height: 18px;
    padding-top: 1px;
    color: rgb(66, 66, 66);

}

/* Al mover el mouse por el INPUT aparece el globito de comentario */
.display_close:hover+.show_close_div {
    display: block !important;
}

.show_close_div {
    display: none !important;
}

.show_close2_div {
    display: block !important;
}

/* .display_close:hover{
    /* pointer-events: none; */
/* } */


/* Para el icono de PULSE de Sarapura por equipo */
.circle {
    width: 70px;
    height: 70px;
    background: green;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
}

.circle::before,
.circle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border: 10px solid gray;
    border-radius: 100%;
    animation: latido linear 3s infinite;
}

.circle::after {
    animation-delay: -1.5s;
}



.icono {
    width: 42px;
    height: 42px;
    margin-top: 12px;
    margin-left: 14.5px;
}

#button-0 {
    top: 50px;
    left: 100px;
}

/*********************************************** PARA MI NO SE USAN */



.innerloaderimg {
    position: fixed;
    left: 260px;
    top: 0px;
    width: 90%;
    height: 100%;
    z-index: 9999;
    /* background: url('../images/ico_loader.gif') 50% 50% no-repeat rgb(249,249,249); */

    background: url('http://sarapuradjs.com.ar/beta/images/logoSEquipoBlack.png') 50% 50% no-repeat rgb(249, 249, 249);

    /*   opacity: .75; */
    background-position: 48% 45%;
    background-size: 100px 90px;

}

.innerloaderimg::before,
.circle::after {
    content: "";
    position: absolute;
    top: 45.5%;
    left: 48.1%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 8px solid gray;
    border-radius: 100%;
    animation: latido linear 2s infinite;
    transition-delay: 3s
}

.innerloaderimg::after {
    animation-delay: -1.5s;
}

@keyframes latido {
    0% {
        width: 100px;
        height: 100px;
        border: 10px solid gray;
    }

    100% {
        width: 140px;
        height: 140px;
        border: 10px solid transparent;
    }
}


/* Para el signo + en los acordiones */
.accordion .card-header:after {
    font-family: 'FontAwesome';
    content: "\f068";
    float: right;
}

.accordion .card-header.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f067";
}


/*# sourceMappingURL=material-dashboard.css.map */
.preview {
    position: relative;
    display: inline-block;
    width: 200px;
    height: auto;
    min-height: 150px;
    text-align: center;
}

.preview img {
    display: block;
    width: 100%;
    height: auto;
    margin: 5px auto;
}

.preview .trasher {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #fff;
    width: 24px;
    height: 24px
}

#TBasico tr td:nth-child(1) {
    width: 15%;
}

#TBasico tr td:nth-child(2) {
    width: 4%
}

#TBasico tr td:nth-child(3) {
    width: 35%;
}

#TBasico tr td:nth-child(4) {
    width: 15%;
}

#TBasico tr td:nth-child(5) {
    width: 8%;
}

#TBasico tr td:nth-child(6) {
    width: 8%;
}

#TBasico tr td:nth-child(7) {
    width: 15%
}

#TBasico tr td:nth-child(8) {
    width: 10%
}


#TOpcionales tr td:nth-child(1) {
    width: 15%;
}

#TOpcionales tr td:nth-child(2) {
    width: 4%
}

#TOpcionales tr td:nth-child(3) {
    width: 35%;
}

#TOpcionales tr td:nth-child(4) {
    width: 15%;
}

#TOpcionales tr td:nth-child(5) {
    width: 8%;
}

#TOpcionales tr td:nth-child(6) {
    width: 8%;
}

#TOpcionales tr td:nth-child(7) {
    width: 15%
}

#TOpcionales tr td:nth-child(8) {
    width: 10%
}


/**/
.ba-alt {
    background-color: #00E2F9 !important;
}

.ba-altO {
    background-color: #DDDDDD !important;
}

/* Boton XS para bootstrap 4 */

.btn-group-xs>.btn,
.btn-xs {
    padding: .50rem .6rem;
    font-size: .675rem;
    line-height: .5;
    border-radius: .2rem;
}

/* Para que en eventos_edit se expanda la primer tabla al achicar menu */

.page-wrapper .page-content .tope {
    padding-left: 5px;
    width: 100%;
    transition: all 300ms ease;
}

.page-wrapper .page-content .tope>div.relative {
    width: 100%;
    transition: all 300ms ease;
}

.page-wrapper.toggled .page-content .tope {
    padding-left: 265px;
    width: 100%;
}

.page-wrapper.toggled .page-content .tope>div.relative {
    width: 100%;
}

/* Poder rotar 45 grados los fontawesome */
.fa-rotate-45 {
    -ms-transform: rotate(45deg);
    /* Internet Explorer 9 */
    -webkit-transform: rotate(45deg);
    /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    /* Standard syntax */
}

tr .autoshowovermouse {
    margin-right: .5rem;
    opacity: 0;
    transition: opacity .2s ease-out;
    cursor: pointer;
    transition-delay: .05s;
}

tr:hover .autoshowovermouse {
    opacity: 1;
    transition-delay: 0s;
}

.awNotices {
    /* display: flex; */
    flex-wrap: wrap;
    width: 100%;

    position: relative;
    color: white;
    font: 300 16px Arial;
    margin: 1px auto;
    padding: 8px 25px 8px 10px;
    /* position: absolute; */
    /* left: 0;
    right: 0; */
    /* color: inherit; */
    /* text-decoration: none; */
    border-radius: 3px;
    text-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
    line-height: 150%;

}

.orange {
    background-color: #ff9800;
}

.red {
    background-color: #e51c23;
}

.blue {
    background-color: #3f51b5;
}

.green {
    background-color: #8bc34a;
}

.dark {
    background-color: #414141;
}

#TOpcionales tbody tr,
#TBasico tbody tr {
    position: relative;
    counter-increment: step-counter;
}

#TOpcionales tbody tr:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 100%;
    line-height: 50px;
    content: "";
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    /* Ajusta la duración y el timing function según tus preferencias */
}

#TBasico tbody tr:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 100%;
    line-height: 60px;
    content: "";
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    /* Ajusta la duración y el timing function según tus preferencias */
}


#TOpcionales tbody tr:hover::before,
#TBasico tbody tr:hover::before {
    content: "#" counter(step-counter);
    font-weight: 400;
    opacity: 1;
}

#TOpcionales tbody tr>td:nth-child(1) {
    padding-left: 15px;
}

#TBasico tbody tr>td:nth-child(1) {
    padding-left: 35px;
}



/* #TBasico tr:before {
    position: relative;
    content: "";
    line-height: 32px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;


} */