/* declaramos la variables usar en el documento */
:root {
  --color-blue: #3FA9F5;
  --color-blue-dark: #3281b9;
  --color-grey: #646464;
  --color-grey-dark: #000000;
}



body{ background-color: #fff; }

.text-link-primary{ color: var(--color-blue);  }
.text-link-primary:hover{ color: var(--color-blue-dark); }

.text-link-secundary{ color: var(--color-grey);  }
.text-link-secundary:hover{ color: var(--color-grey-dark); }

.background-primary{ background-color: var(--color-blue) !important;  }
.background-primary-dark{ background-color: var(--color-blue-dark) !important; }

.button{ -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); padding: 0.84rem 2.14rem; font-size: .81rem; -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; margin: 0.375rem; border: 0; -webkit-border-radius: 0.125rem; border-radius: 0.125rem; cursor: pointer; text-transform: uppercase; white-space: normal; color: #fff; }

/* estilos para tener el 100vh de la pantalla */
.h-100{ min-height: 100vh; }
/* estilos para la imagen del logo */
.logo-login{ max-height: 70px; }

input{ padding: auto 20px !important; height: 55px !important; }


.card-plan{ background: #D3D3D3; border-radius: 5px; border: 2px solid transparent; cursor: pointer; display: block; padding: 10px; text-align: center; width: 100%; }
.card-plan .offer{ background: var(--color-blue); border-radius: 5px; color: #fff; font-size: 10px; left: 50%; padding: 5px; position: absolute; top: -15px; transform: translateX(-50%); }
.card-plan h6{ font-size: 9px; }
.card-plan.selected{ background: #ffffff; border-color: var(--color-blue); }
.card-plan.selected h6{ color: var(--color-blue); }

/* estilos para la card cuando se ejecute un formulario */
.content-loader{ -ms-align-items: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 5px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; height: 100%; justify-content: center; position: absolute; top: 0; width: 100%; z-index: 9; }



/* estilos para el icono del preload de opciones con precarga */
.fa-spinner{ -webkit-animation:spin 1.8s linear infinite; -moz-animation:spin 1.8s linear infinite; animation:spin 1.8s linear infinite; }
/* estilos para las animaciones */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }