.btn-form-login{
    cursor:pointer;
}

.tabpanel-title{
    margin:0 20px 0 20px;
    font-weight: bold;
    font-size: 1.5rem;
}

#spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:9999;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
    background: url('../images/icon/spinner.gif') 50% 50% no-repeat;
    background-size: 50px 50px;
}

/* Mini-menu */
.truncate {
    white-space: nowrap;
    width: 151px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-menu-group .dropdown-menu{
    background-color: rgba(46, 51, 58, 0.8);
}

.mini-dropdown .dropdown-item {
    color: 
    #ffffff;
    font-size: 16px;
    font-family: 'Oxygen';
    font-weight: 700;
}
.mini-dropdown .dropdown-item:hover {
    color: 
    #ffffff;
    background:
    #30353b;
}
.caret{
    position: relative;
    margin: 0px 20px 0px -25px;
}

/*escritorio*/
.container {
   min-height: 0vh;
}

.banner {
    background:#007dba;
    /*padding-bottom: -5em;*/
    /*height:875px;*/
    float:right;
    max-width:220px;
    margin-right:-1em;
    margin-top: -6.3em;
  /*background-image: url('/assets/aspelcom/images/banner.jpg'); */
} 


/* 7 de Junio Abraham */




.card-new {
font: 18px oxygen;    
color: 1a1a1a;
    
}


.black-title-md-a11 {
    color: #000;
    font-weight: 800;
    font-size: 18px;
}



    .item-menu-divider-ss {
    content: "";
    position: relative;
    background-color: #cacdd2;
    height: 2px;
    width: 80%;
    top: 0;
    display: flex;
    max-width: 142px;
    
}
    
    
   

.title-left-menu .st {
   
}

.title-left-menu-ss {
    
    font-size: 16px;
    font-family: Oxygen;
    color:#1a1a1a;
    padding-bottom: 0.7em;
    
}


.item-left-menu, .topser {
    
    margin-bottom:-15px;

}

.title-left-menu, .mgs  {
margin-top:-0.8em;    
}



 .tp {
    font-size: 22px;
    font-weight: 700;
    color: #435363;
   margin-top:-0.8em;
   line-height:0.9;
   
}

.inter {
   margin-top:-2em; 
    
}

.inter2 {
   margin-top:-1.5em; 
    
}

.icon-jun {
max-width:22%; margin-left: -1.2em;
}
.content-body-j {
    padding: 10px 0;
}


.bkgd-prueba-ts {
    background-image: url(../images/bg/banner_tutoriales.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 163px;
}

.bkgd-prueba-ts2 {
    background-image: url(../images/bg/header_cfdi4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 163px;
}

.card-beneficios .card-title-md {
    font-size: 18px;
   
 
}

.box-carousel-3 {
    border-radius: 25px;
    border: 5px solid #B1D34A;
    padding: 45px 45px;
    width: 340px;
}

.box-carousel-3 .box-carousel-title {
    font-size: 24px;
    font-weight: 700;
    color: #B1D34A;
    line-height: 1.3;
    margin-bottom: 10px;
}

.box-carousel-3 .box-carousel-text {
    padding: 10px 0;
    font-size: 14px;
    font-weight: 400;
    color: #435363;
}

.box-carousel-3 .box-carousel-btn {
    width: 100%;
    text-align: center;
    padding: 15px 0;
}

.box-carousel-3 .box-carousel-btn a {
    color: #435363;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    padding: 5px 55px;
    background-color: #ECEDEF;
    border-radius: 25px;
    transition: 0.3s;
}

.box-carousel-3 .box-carousel-btn a:hover {
    color: #ffffff;
    background-color: #435363;
    transition: 0.3s;
}


/* 15 de Mayo*/
.uno {
    color: #435363;
    font-size:14px;
    text-align:center;
    font-weight:700;
}

.boton-comprar-ahora a {
position: relative;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    font-weight: 700;
    border: 3px solid #B1D34A;
    border-radius: 50px;
    transition: 0.3s;
    margin: 5px;
    background-color: #B1D34A;



    
    -webkit-box-shadow: 5px 5px 10px -4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 5px 5px 10px -4px rgba(0, 0, 0, 0.3);
    box-shadow: 5px 5px 10px -4px rgba(0, 0, 0, 0.3);
    
   display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 180px;
    height: 30px;


}
    
.boton-comprar-ahora a:hover {
color: #B1D34A;
    background-color: #ffffff;
    transition: 0.3s;
    border: 3px solid #fff;
}

.boton-comprar-ahora, .right {

    
    margin-top:-4em;
    padding-bottom:1em;
    margin-right:-0.4em;
     align-items:center;
    justify-content:flex-end;
    text-align:right;
}


/* Abraham:, Cards*/

/* 26 de Mayo*/
.pad-left-55 {
    
    padding-left: 55px;
}

.margin-left-30 {
    
    margin-left: -30px;
}
.change-image {
    background-image: url(../images/precios/change-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 163px;
}

.buttom-blue-banner .botonchat {
    position: relative;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    font-weight: 700;
    border: 3px solid #007CBA;
    border-radius: 50px;
    transition: 0.3s;
    margin: 5px;
    background-color: #007CBA;
    -webkit-box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px -4px rgba(0, 0, 0, 0.5);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 180px;
    height: 30px;
}


.buttom-blue-banner .botonchat:hover {
    background-color: #fff;
    border-color: #fff;
    color: #00AAFF;
    transition: 0.3s;
}



.thumbnail-cards {
    
box-shadow:2px 2px 6px #bab9b9;    
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.4285;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border .2s ease-in-out;
    
}

/* ESombra en las cards */
.thumbnail-cards, .shadow {
    
box-shadow:2px 2px 6px #bab9b9;    
    display: block;
    padding: 0px;
    margin-bottom: 20px;
    line-height: 1.4285;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border .2s ease-in-out;
    
}

.espacio-cards {
padding-top: 1em;  
    
}
/* ajusta el tamaño de la imagen en toda la card */
.thumbnail-cards, .shadow, .size-card  {
    width: 100%;

    
}

/* Estilo Precio, total */
.after-amount-new {

      font-family: 'Oxygen';
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #435363;
}

/* Estilos en gris para formulaio */
.input-metodo-gris {
    
    border: 1px solid #666762;
    
    -webkit-appearance: none;
    border-radius: 25px;
    font-size: 13pt;
    font-weight: 400;
    color: #435363;
    width: 100%;
    background-color: #ffffff;
    padding-left: 10px;
    height: 34px;
    
   } 
    
/* Estilos de Carrusel */
 .TamanioPorcentajeFacture {
    min-width: 55%;
}

 .TamanioPorcentajeBanco {
    min-width: 44%;
}

 .TamanioPorcentajeSae {
    min-width: 31%;
}

 .TamanioPorcentajeCaja {
    min-width: 37%;
}


 .TamanioPorcentajeProd {
    min-width: 39%;
}

 .TamanioPorcentajeAdm {
    min-width: 34%;
}

.TamanioPorcentajeNoi {
    max-width: 30%;
}

.TamanioPorcentajeCoi {
    max-width: 29%;
}

.xx1 {


}

.header-btn-simple, .center {
    /* height: 90px; */
    
    align-items: center;
    justify-content: center;


}




.bkgd-precios, .consulta-righ {
 padding-left:65px;   
 padding-top:1.5em;
}

.login-btn-14px {
      font-family: 'Oxygen';
    text-decoration: underline;
    color: #007CBA;
    font-size: 14px;
    transition: 0.3s;
}

.pad-bottom-14 {
 padding: 20px 0px;
    padding-bottom: 14px;
    text-align: justify;   
}

.pad-bottom-0 {
   padding: 20px 0px;
    padding-bottom: 20px;
    text-align: justify; 
    
}

.border-bottom-gen-soporte-sinMargen{
    padding-left:  0px;
    border-bottom: 1px solid #b4b9bc !important;
    padding-bottom: 20px;
        
}

.border-bottom-gen-soporte-sinMargen-sinLinea {
     padding-left:  0px;
    padding-bottom: 20px;
    
}


/* Estilos para validaciones */
.invalid-feedback{
    display:none;
    margin-left: 2em;
    text-align: left;
    color: red;
    font-weight: bold;
}

.form-user .invalid{
    border-color: red;
}

.invalid:active, .invalid:focus{
    box-shadow: 0 0 0.5rem 0.1rem rgba(255, 0, 0, 0.5);
}

.form-user .item-profile-select .invalid{
    border-color: red;
}

.item-profile-select .invalid{
    border-color: red;
}

.invalid{
    border-color: red;
}

.input-control-disabled{
    background: rgb(100,100,100,0.1);
}

/* Estilo para flechas de selectores */
.form-user .item-profile-select .select-selected.select-arrow-active:after{
    top: 5%;
    border-top-color: white;
}

.item-profile-select .select-selected.select-arrow-active:after{
    border-bottom-color: #a9b1ba;
    top: 18%;
}

.red-text{
    color:red;
}

/*Estilos Actualizados Modals */
.popup-modal, .actualizado {
    transition: 0.5s ease;
    background-color: #fff;
    margin: 3px;
    position: relative;
    width: 500px;
    top: -60px;
    z-index: 999;
    border: 1px solid #A9B1BA;
    box-shadow: 6px 6px 8px 0px #bab9bb;
}

.blue-button-modal {
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    padding: 7px 30px;
    background-color: #007CBA;
    border-radius: 25px;
    -webkit-box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 2px 8px 0px rgba(0, 0, 0, 0.5);
    transition: 0.3s;
}

.blue-button-modal:hover {
    color: #007CBA;
    background-color: #ffffff;
    transition: 0.3s;
}

/* Estilos de plantillas Manuales */

@media (max-width: 481px) {
.btn-slider-2 {
 /*margin-left: 9em;*/
 margin-bottom:2em;
}
}

992media (max-width: 481px) {
.manu {
 margin-left: -2.5em;
 
}
}

@media (max-width: 992px) {
	.probando1{


   margin-left:12em;

	}
}

@media (max-width: 992px) {
	.pad-query{

    margin:-27px;
  

	}
}

@media (max-width: 767px) {
.item-menu-divider-ss {
    content: "";
    position: relative;
    background-color: #cacdd2;
    height: 2px;
    width: 80%;
    top: 10px;
    display: flex;
    max-width: 142px;


	}
}

@media (min-width: 992px) {
.modal-lg-modificated {
    width: 100%;
    margin-top:-0.1em;
}
}
/*Junio 24 */
.res-compra .btn-purchase-22 a {
    position: relative;
    font-size: 20pt;
    line-height: 20px;
    color: #ffffff;
    padding: 11px 35px;
    font-weight: 600;
    border: 3px solid #B1D34A;
    border-radius: 50px;
    transition: 0.3s;
    background-color: #B1D34A;
    margin-top: 40px;
    margin-bottom: 20px;
    display: inline-block;
    -webkit-box-shadow: 11px 11px 14px -4px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 11px 11px 14px -4px rgba(0, 0, 0, 0.5);
    box-shadow: 11px 11px 14px -4px rgba(0, 0, 0, 0.5);
}



 /*Junio 16 */
 .margin-left-15 {
    margin-left: 15px;
}
 
 
 
 .content-subscription-cambio {
    position: relative;
    display: inline-flex;
    width: 100%;
    padding: 0px 0;
    flex-wrap: wrap;
    margin-top: -1em;

}

.user-text-m {
 font-family:oxygen;
 font-size: 16px;
 color: #ffffff;
    
}

/* Estilos de pagin
acion */.paginacion p.active
{
    background: rgba(51, 62, 72, 1);
    color: white;

}

.paginacion p
{
	border-radius: 25px;
    background: white;
    color: rgba(51, 62, 72, 1);
    height: 22px;
    width: 23px;
    margin: 13px;
	font-weight: bold;
    box-shadow: 0px 0px 8px 0px #dbdada;
}

.btn-left,
.btn-right
{
	background: transparent;
	border:none;
}

.btn-left img,
.btn-right img
{
	width:12px;
}

.justify-center-p
{
	display: flex;
    align-items: center;
    justify-content: center;
}

/**/

.data-tooltip:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: fixed;
    opacity: 0;
    
    /* customizable */
    transition: all 0.15s ease;
    padding: 1px;
    /*color: #333;*/
    color:white;
    /*border-radius: 10px;*/
    border-radius: 25px;
    /*box-shadow: 2px 2px 1px silver;*/
}

.data-tooltip:hover:before {
    /* needed - do not touch */
    opacity: 1;
    
    /* customizable */
    background: black;
    margin-top: 1px;
    /*margin-left: -205px;*/
    /*padding: 5px 10px 5px 10px;*/
    
    padding: 5px 25px;
    /*background-color: rgba(67, 83, 99, 0.2);
    color: #435363;*/
    font-size: 14px;
    font-weight: 400;
}

 /*Estilos para Menu Nuevo*/

 .subra:hover   { 
 

    
}

.md{
    max-width:118px;
}

.pad-left-15 {
 margin-left:15px;   
    
}

.margin-top {

   margin-top:-1em; 
    
}

.pad-bottom-90 {
    padding-bottom: 60px;
}

 /*Estilos 9 Junio*/
 .content-purchase {
    padding: 30px 0 0 22px;
}

.btn-slider-ban {
    min-width: 180px;
    display: inline-flex;
    justify-content: center;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    color: #007CBA;
    padding: 5px 15px;
    font-weight: 700;
    border: 3px solid #febf32;
    border-radius: 50px;
    background-color: #febf32;
    margin-right: 15px;
    margin-left: 65%;
    margin-top: 20px;
    transition: 0.3s;
    -webkit-box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 10%);
    -moz-box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 5px 5px 10px 5px rgb(0 0 0 / 10%);
}

.btn-slider-ban .btn-title{
    position: relative;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-slider-ban:hover {
    color: #007CBA;
    border: 3px solid #ffffff;
    border-radius: 50px;
    background-color: #ffffff;
}

/* Flip cards */
    /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
    .flip-card {
        background-color: transparent;
        height: 200px;
        perspective: 1000px;
    }

    /* This container is needed to position the front and back side */
    .flip-card-inner {
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .flip-card-front,
    .flip-card-back {
        -webkit-backface-visibility: hidden;
        /* Safari */
        backface-visibility: hidden;
    }
    
    /* Style the back side */
    .flip-card-back {
        transform: rotateY(180deg);
    }
    
    .pasos-buen-fin .img-pasos {
        max-width: 100px;
    }
    
    @media screen and (min-width: 768px) {
        .pasos-buen-fin .img-pasos {
            max-width: 140px;
        }
    }