body, input, select, textarea, body * {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}
body::after, input::after, select::after, textarea::after, body *::after, body::before, input::before, select::before, textarea::before, body *::before {
  box-sizing: border-box;
}
body {
    background-position: 50% 50%;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}


h1 {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 2em;
}
h3{
    font-weight: 300;
    font-size: 24px;
    margin-bottom: 0;
}

h4{
    font-weight: 300;
}

h1 small {
  font-size: 50%;
  color: #666;
  display: block;
}
.md_container {
  /*height:440px;*/
  position: relative;
  max-width: 26rem;
  margin: 8rem auto;
  background: rgba(255,255,255,.83);
  width: 100%;
  padding: 3rem 1.6rem 1px;
  border-radius: 1px;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);

      display: flex;
    flex-direction: column;
}
.md_container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
  transform: scale(0.98);
  transition: transform 0.28s ease-in-out;
  z-index: -1;
}
.md_container:hover::before {
  transform: scale(1);
}
.button-container {
  text-align: right;
}
fieldset {
  margin: 0 0 3rem;
  padding: 0;
  border: none;
}
.form-radio, .md_form-group {
  position: relative;
  margin-top: 2.25rem;
  /*margin-bottom: 2.25rem;*/
}
.form-inline > .md_form-group, .form-inline > .btn {
  display: inline-block;
  margin-bottom: 0;
}
.form-help {
  margin-top: 0.125rem;
  margin-left: 0.125rem;
  color: #b3b3b3;
  font-size: 0.8rem;
}
.checkbox .form-help, .form-radio .form-help, .md_form-group .form-help {
  position: absolute;
  width: 100%;
}
.checkbox .form-help {
  position: relative;
  margin-bottom: 1rem;
}
.form-radio .form-help {
  padding-top: 0.25rem;
  margin-top: -1rem;
}
.md_form-group input {
  height: 1.9rem;
}
.md_form-group textarea {
  resize: none;
}
 
/*lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll*/
.md_form-group select {
  width: 100%;
  font-size: 1rem;
  height: 1.6rem;
  padding: 0.125rem 0.125rem 0.0625rem;
  background: none;
  border: none;
  line-height: 1.6;
  box-shadow: none;
}

.md_form-group .control-label { 
  position: absolute;
  top: 0.6rem;
  pointer-events: none;
  padding-left: 0;
  z-index: 1;
  color: #b3b3b3;
  color: #212121;
  font-size: 14px;
  font-weight: normal;
  transition: all 0.28s ease;
}

.md_form-group .control-label-combo { 
  position: absolute;
  top: 0.6rem;
  pointer-events: none;
  padding-left: 0;
  z-index: 1;
  color: #b3b3b3;
  color: #212121;
  font-size: 14px;
  font-weight: normal;
  transition: all 0.28s ease;
}


.md_form-group .bar {
  position: relative;
  border-bottom: 0.0625rem solid #999;
  display: block;
}

/*CAMBIA EL COLOR DE LA BARRA DEL INPUT*/
.md_form-group .bar::before {
  content: '';
  height: 0.125rem;
  width: 0;
  left: 50%;
  bottom: -0.0625rem;
  position: absolute;
  background: #337ab7;
  transition: left 0.28s ease, width 0.28s ease;
  z-index: 2;
}


.md_form-group input, .md_form-group textarea {
  display: block;
  background: none;
  padding: 0.125rem 0.125rem 0.0625rem;
  font-size: 14px;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: transparent;
  transition: all 0.28s ease;
  box-shadow: none;
}
.md_form-group input[type="file"] {
  line-height: 1;
}
.md_form-group input[type="file"] ~ .bar {
  display: none;
}
.md_form-group select, .md_form-group input:focus, .md_form-group input:valid, .md_form-group input.form-file, .md_form-group input.has-value, .md_form-group textarea:focus, .md_form-group textarea:valid, .md_form-group textarea.form-file, .md_form-group textarea.has-value {
  color: #333;
}
.md_form-group select ~ .control-label, .md_form-group input:focus ~ .control-label, .md_form-group input:valid ~ .control-label, .md_form-group input.form-file ~ .control-label, .md_form-group input.has-value ~ .control-label, .md_form-group textarea:focus ~ .control-label, .md_form-group textarea:valid ~ .control-label, .md_form-group textarea.form-file ~ .control-label, .md_form-group textarea.has-value ~ .control-label {
  font-size: 0.8rem;
  color: #808080;
  /*top: -1rem;*/
  top: 0.6rem;
  left: 0;
}

.md_form-group select ~ .control-label-combo, .md_form-group input:focus ~ .control-label-combo, .md_form-group input:valid ~ .control-label-combo, .md_form-group input.form-file ~ .control-label-combo, .md_form-group input.has-value ~ .control-label-combo, .md_form-group textarea:focus ~ .control-label-combo, .md_form-group textarea:valid ~ .control-label-combo, .md_form-group textarea.form-file ~ .control-label-combo, .md_form-group textarea.has-value ~ .control-label-combo {
  font-size: 0.8rem;
  color: #808080;
  top: -1rem;
  left: 0;
}


.md_form-group select:focus, .md_form-group input:focus, .md_form-group textarea:focus {
  outline: none;
}

/*CAMBIA EL COLOR DEL TEXTO DEL INPUT*/
.md_form-group select:focus ~ .control-label, .md_form-group input:focus ~ .control-label, .md_form-group textarea:focus ~ .control-label {
  color: #337ab7;
   /*color: red;*/
}
.md_form-group select:focus ~ .bar::before, .md_form-group input:focus ~ .bar::before, .md_form-group textarea:focus ~ .bar::before {
  width: 100%;
  left: 0;
}
.checkbox label, .form-radio label {
  position: relative;
  cursor: pointer;
  padding-left: 2rem;
  text-align: left;
  color: #333;
  display: block;
}
.checkbox input, .form-radio input {
  width: auto;
  opacity: 0;
  position: absolute;
  left: 0;
}
.radio {
  margin-bottom: 1rem;
}
.radio .helper {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  user-select: none;
  color: #999;
}
.radio .helper::before, .radio .helper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0.25rem;
  width: 1rem;
  height: 1rem;
  transition: transform 0.28s ease;
  border-radius: 50%;
  border: 0.125rem solid currentColor;
}
.radio .helper::after {
  transform: scale(0);
  background-color: #337ab7;
  border-color: #337ab7;
}
.radio label:hover .helper {
  color: #337ab7;
}
.radio input:checked ~ .helper::after {
  transform: scale(0.5);
}
.radio input:checked ~ .helper::before {
  color: #337ab7;
}
.checkbox {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.checkbox .helper {
  color: #999;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  z-index: 0;
  border: 0.125rem solid currentColor;
  border-radius: 0.0625rem;
  transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
  position: absolute;
  height: 0;
  width: 0.2rem;
  background-color: #337ab7;
  display: block;
  transform-origin: left top;
  border-radius: 0.25rem;
  content: '';
  transition: opacity 0.28s ease, height 0s linear 0.28s;
  opacity: 0;
}
.checkbox .helper::before {
  top: 0.65rem;
  left: 0.38rem;
  transform: rotate(-135deg);
  box-shadow: 0 0 0 0.0625rem #fff;
}
.checkbox .helper::after {
  top: 0.3rem;
  left: 0;
  transform: rotate(-45deg);
}
.checkbox label:hover .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper {
  color: #337ab7;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
  opacity: 1;
  transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
  height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
  height: 1.2rem;
  transition-delay: 0.28s;
}
.radio + .radio, .checkbox + .checkbox {
  margin-top: 1rem;
}
.has-error .legend.legend, .has-error.md_form-group .control-label.control-label {
  color: #d9534f;
}
.has-error.md_form-group .form-help, .has-error.checkbox .form-help, .has-error.radio .form-help, .has-error.form-radio .form-help, .has-error.md_form-group .helper, .has-error.checkbox .helper, .has-error.radio .helper, .has-error.form-radio .helper {
  color: #d9534f;
}
.has-error .bar::before {
  background: #d9534f;
  left: 0;
  width: 100%;
}
.button {
  position: relative;
  background: #4f93ce;
  border: 1px solid #4f93ce;
  border-radius: 1.5px;
  font-size: 1rem;
  color: #fff;
  margin: 3rem 0;
  padding: 0.50rem 1rem;
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  text-decoration:none!important;
}
.button span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  /*color: #337ab7;*/
  background: #337ab7;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12), 0 3px 5px -1px rgba(0, 0, 0, .2);
}
.button:active::before, .button:focus::before {
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}

/*----------------------------------------------------
    ESTILOS COMBOBOX
----------------------------------------------------*/
.required.-hasvalue,
.required:focus {
  opacity: 1;
}

.required.-hasvalue ~ .control-label,
.required:focus ~ .control-label {

  transform: translateY(-100%) translateY(-0.3rem) translateX(-0.2rem) translateY(-2px) scale(0.9);
  cursor: pointer;
  pointer-events: auto;

}

/*----------------------------------------------------
    FIN ESTILOS COMBOBOX
----------------------------------------------------


/*-----styles logo------*/

section.logo{
    margin-bottom:1rem;
    cursor:pointer;
}

div.logo_petrovendor {
    max-width: 448px;
    text-align: center;
}
div.logo_petrovendor img{
    max-width:270px;
}

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

.div_hidden{
    display:none;
}

.button.comeback{
   background-color: #ccc!important;
   border-color: #ccc!important;
}

.button.comeback span{
    color:#000;
}

.button.comeback:before {
  content: '';
  position: absolute;
  background: #ADADAD;
  border: 50vh solid #DDE1E3;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  transform: translate(-50%, -50%) scale(0);
}

/*-----FOOTER PETROVENDOR------*/

footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgba(000,000,000,.6);
    color: white;
    text-align: center;
    height: 30px;

    display: flex;
    /*align-items: center;*/
    justify-content: flex-end;
}

footer #texto_petrovendor, footer #aviso_privacidad, footer #politica_seguridad {
    padding: 10px;
    font-size: 14px;
    outline: none;
}

footer #aviso_privacidad{
    padding-right:40px;
    text-decoration:none;
    color:#fff;
}

footer #politica_seguridad {
    padding-right: 40px;
    text-decoration: none;
    color: #fff;
}

/*-----BANNER PROVEEDORES------*/

section#bannerProveedores div.owl-carousel {
    /*background: rgba(255, 252, 252, 0.6);*/
    background: #fff;
    padding: 10px;
}

section#bannerProveedores div.owl-carousel img {
    width: 90px;
    height: 40px;
}

section#bannerProveedores {
    margin-top: 20px;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
}

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

div.first_email_foot{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /*margin:2rem 0;*/
}

#update_button a{
    text-decoration:none!important;
}

div.first_email_foot div#crear_cuenta{
    font-size: 13px;
}

div.first_email_foot div#crear_cuenta a{
    text-decoration: none;
    color: #4f93ce;
}

div.first_email_foot div#crear_cuenta p{
        padding: 0;
    margin: 0;
}

/*STYLES ERROR INPPUTS*/

.email__error{
    color:#d9534f;
    font-size:14px;
}

.error{
    color:#d9534f;
    font-size:14px;
}

/*IMAGEN PERFIL*/

.container_perfil{
    display: flex;
    /*justify-content: space-around;*/
    align-items: flex-start;
}

div.container_perfil h4{
    font-size: 17px;
    order: 1;
    margin: 0;
}

div.container_perfil div{
    display: flex;
    flex-direction: column;
    align-self: center;
}

div.container_perfil span#estatus_cuenta{
    order: 2;
}

.image_perfil{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: .5rem;
    border: 1px solid #999999;
}

a{
    text-decoration:none;
    color: #4f93ce;
}

span#estatus_cuenta a{
    text-decoration:none;
    color:#d9534f;
}

.popover{
    /*background: #f2dede;
    border-color: #ebccd1;*/
    max-width:400px;
    font-size:14px;
}

/*.popover-body{
    color:#a94442;
}

.bs-popover-auto[x-placement^=right] .arrow::before, .bs-popover-right .arrow::before{
    border-right-color: #ebccd1;
}

.bs-popover-auto[x-placement^=right] .arrow::after, .bs-popover-right .arrow::after{
     border-right-color: #f2dede;
}*/


.second_password_foot{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    height:100px;
}

div.second_password_foot a{
    font-size:13px;
    text-decoration:none;
}

.update_button_pass{
    display: flex;
}

div.second_password_foot div.button-container div.update_button_pass button{
    margin-right:10px;
}

#update_button button#btn_siguiente{
    margin:1.5rem 0;
}

/*----------------------------/
     STYLES LOADINGS
------------------------------*/
.spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  margin: 3px;
  width: 12px;
  height: 12px;
  background-color: #DFB209;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/*----------------------------/
     END LOADINGS
------------------------------*/

/*----------------------------/
     STYLES LOADINGS LITTLE
------------------------------*/
.spinner_little {
  /*margin: 100px auto 0;*/
  width: 70px;
  text-align: center;
  display: flex;
    flex-direction: row;
}

.spinner_little > div {
  margin: 3px;
  width: 6px;
  height: 6px;
  background-color: #787878;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner_little .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner_little .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

/*----------------------------/
     END LOADINGS
------------------------------*/


/*STYLES FORM REGISTER*/

.margin{
    /*margin-top:1.5rem!important;*/
}

.progress{
    height:10px;
}
.progress-bar-success{
    background-color: #5cb85c!important;
}

.progress-bar-warning{
    background-color: #f0ad4e!important;
}
.progress-bar-danger{
     background-color: #d9534f!important;
}

label#lbl_regimen{
    padding-left:0;
}

div#email_success{
    margin-top:2rem;
}

div#email_success a i{
    color: #000;
    font-size: 19px;
}

div#email_success p {
    text-align: center;
    margin-top: 1.5rem;
}

div#span_aviso_privacidad{
    padding: 2rem;
    text-align: justify;
    font-size: 14px;

    overflow-y:scroll;
    max-height:800px;
}

.btn-cons{
    margin-right: 5px;
    min-width: 50px;
    margin-bottom: 8px;
    height: 35px;
}

.button-set{
    text-align:right;
}

.fade_alert{
    opacity:0!important;
}
.fade_alert.in_alert{
    opacity: 1!important;
}

/*-----------------*/
.alert-danger{
    color: #e76e70;
    background-color: #fff6f4;
    border-color: #f8cdcd;
}

.loadingoverlay{
    z-index:99994!important;
}

/*button circle large*/
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}

#que_petrovendor.button{
     margin:0;
    padding:0px;
        padding: 5px 20px;
    margin:0px 0 10px 70px;
    background:#1f3853;
    border: 1px solid #1f3853;
}

/*#first_email div#button_petro {
    margin: 1rem 0;

}*/
#first_email div#button_petro a
{
    margin-left: 77px;

}
#first_email div#button_petro span
{
        background:#1f3853;
    border: 1px solid #1f3853;
}

#petrovendor_content{
        padding: 15px 20px;
    text-align:justify;
}

#petrovendor_content h4{
    font-size:20px!important;
    font-family: 'Roboto'!important;
}

#petrovendor_content p{
    font-size:14px!important;
}

#petrovendor_content ul{
    font-size:14px!important;
}

.banner-cnd{
    width:0px!important;
    /*height: 300px;*/
    background: #fff;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -200px;
    border-radius:3px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.banner-cnd{  
    -webkit-transition: 0.3s !important;
    -moz-transition: 0.3s !important;
    -o-transition: 0.3s !important;
    -ms-transition: 0.3s !important;
    box-shadow:0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
}

/*.banner-cnd:hover{
    width:500px!important;
    -webkit-transition: 0.3s !important;
}*/

.show-banner{
    width:500px!important;
    -webkit-transition: 0.3s !important;
}

.hide-banner{
    width:0px!important;
    -webkit-transition: 0.3s !important;
}

.close-banner{
    text-align: right;
    padding:5px 10px;
    color: #808080;
    font-weight: 100;
}

.close-banner span{
    cursor:pointer;
}

/*.close-banner::after{
    font-family: FontAwesome;
     font-weight: 400;
     content: "\f00d";
}*/

.item-banner{
    /*height: 10rem;*/
    background: #4DC7A0;
    /*padding: 1rem;*/
    /*width:100px;*/
    border-radius:3px;
}

.owl-stage-outer{
    border-radius:3px;
        border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.show-banner-cnd{
    height: 50px;
    order: 1;
    background: #fff;
    position: absolute;
    top: 15%;
    right: 0px;
    width: 75px;
    margin-top: -25px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow:0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
    -webkit-transition: 0.3s !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"!important;
}

.show-banner-cnd .posti{
    width:30px;
    height:50px;
    background-color:#f44b1d;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    margin-right: 10px;
}

.css-posti{
    right:500px;
    -webkit-transition: 0.3s !important;
    width: 90px;
}

.show-banner-cnd:hover{
    width: 90px;
    -webkit-transition: 0.3s !important;
}

.btn-flotante {
    font-size: 16px; /* Cambiar el tamaño de la tipografia */
    /* text-transform: uppercase;  Texto en mayusculas */
    font-weight: bold; /* Fuente en negrita o bold */
    color: #212529; /* Color del texto */
    border-radius: 5px; /* Borde del boton */
    /*letter-spacing: 2px;  Espacio entre letras */
    background-color: #caff9a; /* Color de fondo */
    padding: 5px 5px; /* Relleno del boton */
    position: fixed;
    bottom: 40px;
    right: 40px;
    transition: all 300ms ease 0ms;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

    .btn-flotante:hover {
        background-color: #abff5e; /* Color de fondo al pasar el cursor */
        box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
        transform: translateY(-7px);
    }

@media only screen and (max-width: 600px) {
    .btn-flotante {
        font-size: 14px;
        padding: 12px 20px;
        bottom: 20px;
        right: 20px;
    }
}