@charset "utf-8";
/* funcionamiento básico del sistema de pestañas */
.clear {clear:both; padding: 15px 0;}
.tab-content {display: none;}
.tab:target .tab-content, .tab:last-of-type .tab-content {display: block;}
.tab:target ~ .tab:last-of-type .tab-content {display: none;}
/* CSS Document */

/* parámetros para configurar las pestañas */
:root {
  --tabs-border-color: #cccccc;
  --tabs-border-size: 1px;
  --tabs-text-color: #000;
  --tabs-dark-color: #01bbd0;
  --tabs-lite-color: #FFF;
  --tabs-width: 345px;
  --tabs-height: 35px;
}

/* aspecto básico */
body { font-family: 'Poppins', sans-serif; line-height: normal;}
h2, p { margin: 0;} 
a { color: inherit;text-decoration: none;} 
.tabs * { box-sizing: border-box;}
/* esto es para posicionar las pestañas correctamente */
.tab-container { position: relative; padding-top: var(--tabs-height);}
/* en esta zona colocaremos las pestañas */
#tab1>a { --tabs-position: 0; }
#tab2>a { --tabs-position: 1; }
#tab3>a { --tabs-position: 2; }
#tab4>a { --tabs-position: 3; }
#tab5>a { --tabs-position: 4; }
#tab6>a { --tabs-position: 5; }
#tab7>a { --tabs-position: 6; }
#tab8>a { --tabs-position: 7; }
#tab9>a { --tabs-position: 8; }
.tab>a { text-align: center; position: absolute; width: calc(var(--tabs-width)); height: calc(var(--tabs-height) + var(--tabs-border-size)); top: 0; left: calc(var(--tabs-width) * var(--tabs-position)); /* posición de cada pestaña */}

/* más aspecto */
.tabs { padding: 10px; color: var(--tabs-text-color);}
.tab-content { background-color: var(--tabs-lite-color); padding: 20px; border: var(--tabs-border-size) solid var(--tabs-border-color); /*border-radius: 0 0 10px 10px;*/ position: relative; z-index: 100;}
.tab>a { background-color: var(--tabs-dark-color); padding: 10px; border: var(--tabs-border-size) solid var(--tabs-border-color); /*border-radius: 10px 10px 0 0;*/ border-bottom: 0;}
.tab:target>a, .tab:last-of-type>a { background-color: var(--tabs-lite-color); z-index: 200; }
.tab:target ~ .tab:last-of-type>a { background-color: var(--tabs-dark-color); z-index: 0; }

input {border: 1px solid #e2e4e8!important; border-radius:0 !important; padding: 10px 0; margin: 10px 0; width: 100%; }
input:focus {border: 1px solid #01bbd0; border-radius:0 !important;}

.boton { padding: 15px; color: #FFF; border: none !important; border-radius: 25px !important; background-color: #022056; cursor: pointer; font-size: 14px; margin-left:50%; display:block !important; float:right; width:auto !important;}
.boton:hover, .boton:focus {background: #01bbd0; color: #FFF;}

.recup {float:left; display:block !important; }
.recup a:hover { color: #01bbd0; }

.xoo-ml-has-cc { float: left; width:25%; margin-right: 5%; }
.xoo-ml-phone-cc { border: 1px solid #e2e4e8!important; border-radius:0 !important; padding: 10px 0; margin: 10px 0; width: 100%; }
.xoo-ml-phone-input { float: left !important; width:70% !important; }