/****************************************
  General
******************************************/
.columns_wrap {
    display: flex; gap: 20px;
}
.columns_wrap .column-50 { width: 50%; }
.columns_wrap .column-25 { width: 25%; }
.columns_wrap .column-75 { width: 75%; }
.alert-danger { color: #FF0000; font-weight: bold; }


/****************************************
  Menu
******************************************/  
ul.menu__login {
  list-style: none; display: flex; padding: 0; margin: 0;
}
ul.menu__login li a{
  padding-left: 10px;
  padding-right: 10px;
  line-height: 1em;
  display: block;
  color: #222;
  font-size: 15px;
  text-decoration: none;
}
.header-widget aside p { margin: 0; }


/****************************************
  Login Form
******************************************/
.mkt_login_form input[type="text"],
.mkt_login_form input[type="password"] {
    padding: 10px 15px; width: 100%;
}
.mkt_login_form p label {
    display: block;
}
.mini { font-size: 15px; }
button.btn,
.login-submit input.button,
input[type="submit"].btn,
.login__recover button.button-primary { 
  background-color: #0AB146; color: #FFF; border-radius: 30px; font-weight: bold; border: none; padding: 0.6rem 3rem; line-height: 30px; font-size: 20px; cursor: pointer;
}
button.btn:hover,
.login-submit input.button:hover,
input[type="submit"].btn:hover,
.login__recover button.button-primary:hover { 
  background-color: #ED4650;
}
.mkt_login_form label,
.mkt_registro_form label,
.mkt_registro_wrap label { margin-bottom: 5px; }

/*****************************************
  Perfil
******************************************/
main.perfil { padding-top: 50px; padding-bottom: 50px; }
main.perfil .container { max-width: 80%; margin: auto; }
.perfil__opciones { display: flex; flex-wrap: wrap; justify-content: space-between; }
.perfil__opciones .item { width: 30%; padding: 1%; border: 1px solid #666; text-align: center; margin-bottom: 15px; }
img.avatar_img { display: block; max-width: 200px; max-height: 200px; width: auto; height: auto; }
input[type="password"].error,
input[type="text"].error { border: 1px solid #FF0000; }


/****************************************
  Register Form
******************************************/
ul.mkt_registro_wrap, 
ul.mkt_form_wrap {  list-style: none; padding: 0; margin: 0; }
ul.mkt_registro_wrap li, 
ul.mkt_form_wrap li { margin-bottom: 10px; }
ul.mkt_registro_wrap label,
ul.mkt_form_wrap label{ display: block; }
ul.mkt_registro_wrap input[type="text"],
ul.mkt_registro_wrap input[type="email"],
ul.mkt_registro_wrap input[type="password"],
ul.mkt_form_wrap input[type="text"],
ul.mkt_form_wrap input[type="email"],
ul.mkt_form_wrap input[type="password"] {
    padding: 10px 15px; min-width: 300px;
}


/****************************************
  Tabs
***************************************/
.tabs{
  position: relative;
  width: 100%;
}
.tabs .tab-header,
.tabs .tab-indicator,
.tabs .tab-body{
    margin: 0 auto;
    /* max-width: 650px; */
    width: 100%
}
.tabs .tab-header{
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    height: 250px;    
    z-index: 2;
}
.tabs .tab-header > div{
    width: 25%;
    text-align: center;    
    color: #000;    
    cursor: pointer;
    transition: color 300ms ease-in-out;
    background-color: #b5e8c3;
    border-radius: 0;
    padding: 25px 10px;
    margin: 4px;
    color: #000;    
    height: 250px;
    text-transform: uppercase;   
}
.tabs .tab-header > div:hover{
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,.3));
    transition: all 0.5s linear;
}
.tabs .tab-header > div.active{
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,.3));
}
.tabs .tab-header > div h3{ font-size: 24px; font-weight: bold; line-height: 1.1em; }
.tabs .tab-header > div h4{ font-size: 35px; font-weight: bold; }
.tabs .tab-indicator{
    position: relative;
    height: 60px;
    margin-top: -60px;
}
.tabs .tab-indicator > div{
    position: absolute;
    left: 0%;
    width: 25%;
    height: 100%;
    background: #fff;
    border-radius: 10px 10px 0px 0px;
    transition:  all 300ms ease-in-out;
}
.tabs .tab-body{
    position: relative;
}
.tabs .tab-body > div{    
    padding: 20px 0;
    opacity: 0; 
    display: none;   
}
.tabs .tab-body > div > * {
    margin:10px 0px;
}

.tabs .tab-body > div > p {
    color:#555;
    font-size: 15px;
}

.tabs .tab-body > div.active{    
    opacity: 1;
    display: block;
    transition: top 0ms ease-in-out 0ms,
                opacity 500ms ease-in-out 0ms;
}  


/************************************************
  Tab Acordeon
*************************************************/
.tab-body h3 { color: #f05a96; font-weight: 700; font-size: 25px; text-transform: uppercase; }
ul.tab_acordeon_wrap { margin: 0; margin-bottom: 20px; padding: 0; list-style: none; }
li.tab_acordeon {  padding-top: 20px; padding-bottom:20px; border-bottom: 1px solid #f05a96;  }
.tab_acordeon__title { display: flex; }
.tab_acordeon__title h4 { margin-bottom: 0; font-size: 16px; font-weight: 700; cursor: pointer; transition: all .3s ease-in-out; flex: 0 0 90%; }
.tab_acordeon__title.active h4 { margin-bottom: 15px; transition: all .3s ease-in-out; }
.tab_acordeon__title h4:after { content: ""; width: 12px; height: 12px; display: block; float: right; border-bottom: 3px solid #f05a96; border-right: 3px solid #f05a96; transform: rotate(45deg); transition: all .3s ease-in-out; margin-top: 5px; }
.tab_acordeon__title.active h4:after {
  transform: rotate(-135deg); transition: all .3s ease-in-out;
}

.tab_acordeon__title input.vote__check { width: 35px; height: 25px; margin-right: 5px; }
.tab_acordeon__content { overflow: hidden; max-height: 0px; transition: all .3s ease-in-out; }
.tab_acordeon__title.active + .tab_acordeon__content { overflow: hidden; max-height: 250px; transition: all .3s ease-in-out; }
.tab_acordeon__content p { margin: 0; font-size: 14px; }


/**********************************************
   Acciones Total
**********************************************/   
.acciones__total { text-align: center; }
.acciones__total h3 { color: #423f40; font-size: 30px; margin-bottom: 5px; }
.acciones__total h4 { color: #423f40; font-size: 70px; line-height: 1em; margin-bottom: 5px; }
.acciones__total a.btn-recalcular { color: #FFF; background-color: #423f40; padding: 10px; text-decoration: none; display: inline-block; margin: auto; text-transform: uppercase; margin-top: 10px; }


/*********************************************
  Listado Usuarios
*********************************************/
ul.usuarios__listado  { list-style: none; padding: 0; margin: 0;  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  overflow: hidden;}

ul.usuarios__listado  li {
  width: 140px;
  height: 140px;
  background-color: #cebd21;
  margin: 1px;
  position: relative;
  overflow: hidden;
}
ul.usuarios__listado .avatardiv {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
ul.usuarios__listado .avatardiv img{
  max-width: 100%; border: 0; height: auto; display: block;
}

ul.usuarios__listado .perfil {
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  background-color: #cebd21;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  bottom: -200px;
  transition: all 0.5s linear;
  font-size: 16px;
}
ul.usuarios__listado li:hover .perfil {
  bottom: 0;
  transition: all 0.5s linear;
}


/*********************************************
  Responsive
*********************************************/
@media only screen and (max-width: 780px) {
  .columns_wrap {
    display: flex; gap: 0px; flex-wrap: wrap;
  }
  .columns_wrap .column-50 { width: 100%; }  
}