/*
    Index (main less entry point)
    
    1. General Styles
    2. General Structure (ep-dashboard-container)
    3. Imports
*/
/* 
    1. General styles
*/
/* TEST */
[v-cloak] {
  display: none;
}
.sa-confirm-button-container {
  margin-top: 20px !important;
}
.test-outline-red {
  outline: 1px dashed red;
}
.test-outline-green {
  outline: 1px dashed green;
}
.test-outline-blue {
  outline: 1px dashed blue;
}
.test-outline-yellow {
  outline: 1px dashed yellow;
}
.test-outline-purple {
  outline: 1px dashed purple;
}
.test-outline-white {
  outline: 1px dashed white;
}
.test-bg-red {
  background-color: rgba(255, 25, 25, 0.5);
}
.test-bg-green {
  background-color: rgba(25, 255, 25, 0.5);
}
.test-bg-blue {
  background-color: rgba(25, 25, 255, 0.5);
}
.btn-pink {
  background-color: #8c00ff;
  color:#fff; 
}
.btn-morado {
  background-color: #231f56;
  color:#fff; 
}
.btn-fucsia {
  background-color: #f0047f;
  color:#fff; 
}
.btn-outline-pink {
  background-color: #fff;
  border: 1px solid #8c00ff;
  color:#8c00ff;
}
.img_noticia_edit {
  border-radius: 15px;
  width: 200px;
  height: 200px;
  margin-bottom: 5px
}
.capa-img {
  border-radius: 15px;
  width: 200px;
  height: 200px;
  margin-bottom: 40px
}
.alert-eyplease {
  background-color: #f0047f;
  color:#fff;
  font-size: 16px;
  text-align: center;
}
.box-eyplease {
  width: 100%;
  height: 150px;
  border-radius: 10px;
  text-align: center;
  padding-top: 10%;
  color: #fff;
  margin-bottom: 10%
}
.box-fucsia {
  background-color: #f0047f;
}
.box-azul {
  background-color: #231f56;
  color: #fff;
}
.box-morado {
  background-color: #8c00ff
}
.color-primary {
  color: #231f56;
}
.color-gray {
  color: #ccc;
}
.bold {
  font-weight: bold;
}

.btn-outline-purple {
  border: 1px solid #8C00FF;
  color: #8C00FF
}
.pricing {
  margin-top: 20px;
}

.pricing .fa-li {
  color: #68c670;
}

.pricing .card-body {
  padding: 20px;
}

.pricing .card-header {
  width: 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: .75rem 1.25rem;
}

.pricing .fa-star {
  color: white;
}

.pricing .card {
    border: none;
    border-radius: 1rem;
    transition: all 0.2s;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing .card-title {
    margin: 0.5rem 0;
    letter-spacing: .1rem;
    font-weight: bold;
    color: #FFF;
}

.pricing .card-price {
    font-size: 2rem;
    margin: 0;
    font-weight: bold;
    color: #F0047F
}

.pricing ul li {
    margin-bottom: 1rem;
}

.pricing .text-muted {
    opacity: 0.7;
}

.pricing .btn {
    font-size: 80%;
    border-radius: 5rem;
    font-weight: bold;
    transition: all 0.2s;
}

.pricing .card:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
}

.pricing .card:hover .card-header {
    background-color: #F0047F;
}

.pricing .card:hover .btn {
    opacity: 1;
    background-color: #F0047F;
    color:#fff;
    border: none;
}
/*
    Variables used throughout web
    
    1. General Dimensions
    2. Colors (by name)
*/
/*
    1. General Dimensions
*/
/*
    3. Colors (by name)
*/
/*
    2. General Structure
*/
html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Ubuntu', sans-serif;
  position: relative;
  margin: 0;
}

.login-container {
    margin-top: 7%;
}

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

.logo-login {
    width: 150px;
}

.login-div-1 {
    background-image: url('../img/bgtestimonios.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position:relative;
    z-index:1;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}

.login-div-1::after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(74, 5, 131, 0.89);
    z-index:-1;
}

.login-div-1 h1,h6{
    text-align: left;
    margin-bottom:8%;
    color:#fff;
}

.login-div-2{
    padding: 4%;
    background: #FFFFFF;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.login-div-2 h3 {
    text-align: left;
    margin-bottom:12%;
    color: #231F56;
    font-weight: bold
}
.btnSubmit{
    font-weight: 500;
    width: 50%;
    color: #FFF;
    background-color: #F0047F;
    border: none;
    border-radius: 10px;
    padding:3%;
}

.btnSubmit:hover {
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.5);
}

.btnForgetPwd{
    color: #ccc;
    font-weight: bold;
    text-decoration: underline;
    float:right;
    margin-bottom: 30px
}

.btnForgetPwd:hover{
    color:#8C00FF;
}

.wrap {
  margin: 0 auto;
}

.mat-label {
  display: block;
  font-size: 15px;
  transform: translateY(40px);
  color: #ccc;
  transition: all 0.5s;
}

.mat-input {
  position: relative;
  background: transparent;
  width: 100%;
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 15px;
}

.mat-div {
  position: relative;
}

.mat-div:after, .mat-div:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc; 
  bottom: 0;
  left: 0;
  transition: all 0.5s;
}

.mat-div::after {
  background-color: #8C00FF;
  transform: scaleX(0);
}

.is-active::after {
  transform: scaleX(1);
}

.is-active .mat-label {
  color: #8C00FF;
}

.is-completed .mat-label {
  font-size: 12px;
  transform: translateY(0);
}

.ep-dashboard-container {
  outline: 1px dashed blue;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  min-height: 100%;
}
.ep-dashboard-container .ep-dashboard-column {
  min-height: 100%;
}
.mi-abs-center-x {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mi-abs-center-y {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.mi-abs-center-xy {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
/* 
    3. Imports
    
    3.1. content-styles - fonts and colors for content and structure
    3.2. components     - reusable components 
    3.3. sidebar        - sidebar with logo, navigation menu and info box
    3.4. view           - view
    3.5. view details   - detailed styles for views
    3.6. mensajes       - ep-mensajes messages interface
*/
/*
    Basic Content Styles
    
    1. Reusable font and color styles
    2. Gradients and Backgrounds
    3. Fonts
    4. Text and links
    5. Images
    6. Borders and Shadows
    ...define further
*/
/*
    1. Reusable font and color styles
*/
/*
    2. Gradients and Backgrounds
*/
.gmi-purple-pink {
  background: linear-gradient(120deg, #8c00ff 0%, #8d00fe 19%, #b703c7 76%, #ed0484 100%);
}
/*
    3. Fonts
*/
.fmi-roboto {
  font-family: 'Roboto', sans-serif;
}
/*
    4.Text and Links
*/
a {
  color: white;
  text-decoration: none;
}
.ep-text-em {
  font-weight: bold;
}
.ep-text-em.em-pink {
  color: #f0047f;
}
.ep-text-em.em-li-green {
  color: #68c670;
}
/*
    5. Images
*/
.ep-img-rounded {
  border-radius: 10px;
}
.ep-img-circle {
  border-radius: 50%;
}
/*
    6. Borders and shadows
*/
.mi-soft-border {
  border: 1px solid rgba(0, 0, 0, 0.12);
}
/*
    Components - Reusable components used throughout the dashboard
    
    1. General Styles
    2. Imports
*/
/* 
    1. General Styles
*/
/* 
    2. Imports
    
    2.1.  ep-btn             - styles change according to type of button
    2.2.  ep-calendar        - styled calendar
    2.3,  ep-content-box     - content boxes used throughout web (includes scrollable content)
    2.4.  ep-dropdown        - dropdown
    2.5.  ep-event-info      - styled event information box (in AGENDA section on Home)
    2.6.  ep-form            - styled forms
    2.7.  ep-icon            - icons (styles change according to use)
    2.8.  ep-modal           - styled modals
    2.9.  ep-profile         - profile stuff
    2.10. ep-progress-bar    - styled progress bars
    2.11. ep-ranking         - Rows with user info in leaderboard (ranking) tables
    2.12. ep-rating          - (show ratings in dashboard)
    2.13. ep-searchbar       - styled searchbar
    2.14. ep-table           - data tables
*/
/* 
    Button styles 
    
    *Comments
    
    1. ep-btn      - general button
    2...define further
*/
/*
    1. ep-btn
*/
.ep-btn {
  display: inline-block;
  padding: 5px 20px;
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #fefefe;
}
.ep-btn span.lnr {
  margin: 0 5px;
}
.ep-btn:hover {
  text-decoration: none;
}
.ep-btn.ep-btn-block {
  display: block;
  padding: 10px 0;
}
.ep-btn.ep-btn-small {
  padding: 2px 10px;
  font-size: 12px;
}
.ep-btn.ep-btn-pink {
  border-color: #f0047f;
  background-color: #f0047f;
}
.ep-btn.ep-btn-pink:hover {
  background-color: #be0364;
  color: #fefefe;
}
.ep-btn.ep-btn-gray {
  border-color: #8e8f93;
  background-color: #8e8f93;
}
.ep-btn.ep-btn-gray:hover {
  background-color: #74757a;
  color: #fefefe;
}
.ep-btn.ep-btn-purple {
  border-color: #8c00ff;
  background-color: #8c00ff;
}
.ep-btn.ep-btn-purple:hover {
  background-color: #7000cc;
  color: #fefefe;
}
.ep-btn.ep-btn-light-green {
  border-color: #68c670;
  background-color: #68c670;
}
.ep-btn.ep-btn-light-green:hover {
  background-color: #45b64e;
  color: #fefefe;
}
.ep-btn.ep-btn-o-pink {
  background-color: transparent;
  border-color: #f0047f;
  color: #f0047f;
}
.ep-btn.ep-btn-o-pink:hover {
  background-color: #f0047f;
  color: #fefefe;
}
.ep-btn.ep-btn-o-gray {
  background-color: transparent;
  border-color: #8e8f93;
  color: #8e8f93;
}
.ep-btn.ep-btn-o-gray:hover {
  background-color: #8e8f93;
  color: #fefefe;
}
.ep-btn.ep-btn-clear {
  background-color: transparent;
  border-color: transparent;
  color: #8e8f93;
}
.ep-btn.ep-btn-clear .lnr {
  vertical-align: middle;
}
.ep-btn.ep-btn-clear:hover {
  color: #333;
}
.ep-btn.ep-btn-dashboard {
  padding: 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  font-size: 12px;
  color: #333;
}
.ep-btn.ep-btn-dashboard .lnr {
  font-size: 14px;
  color: #68c670;
}
.ep-btn.ep-btn-dashboard:hover {
  background-color: #f3f3f3;
}
/*
    2...define further
*/
/* 
    Calendar
    
    Styled calendar used in "Agenda" section. General calendar follows style from
    home page. If need of different versions they can be added here as separate
    classes.
    
    1. ep-calendar-header - header for calendar (left and right nav buttons and 
                            title showing month and year)
    2. ep-calendar-body   - body of calendar (table with weekdays for the header,
                            rows as weeks and cells as days)
*/
.ep-calendar {
  position: relative;
  width: 100%;
  height: 100%;
  color: white;
  /*
        1. ep-calendar-header 
    */
  /*
        2. ep-calendar-body  (table)
    */
}
.ep-calendar .ep-calendar-header {
  position: relative;
  width: 100%;
  height: 7%;
  margin-bottom: 3%;
}
.ep-calendar .ep-calendar-header .ep-calendar-left,
.ep-calendar .ep-calendar-header .ep-calendar-right,
.ep-calendar .ep-calendar-header .ep-calendar-title {
  display: block;
  color: white;
}
.ep-calendar .ep-calendar-header .ep-calendar-left,
.ep-calendar .ep-calendar-header .ep-calendar-right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
.ep-calendar .ep-calendar-header .ep-calendar-left span,
.ep-calendar .ep-calendar-header .ep-calendar-right span {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
.ep-calendar .ep-calendar-header .ep-calendar-left {
  left: 0;
}
.ep-calendar .ep-calendar-header .ep-calendar-right {
  right: 0;
}
.ep-calendar .ep-calendar-header .ep-calendar-title {
  height: 100%;
  margin: 0;
  line-height: 1.6;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 6px;
  text-align: center;
}
.ep-calendar .ep-calendar-header .ep-calendar-title .ep-month {
  margin-right: 10px;
}
.ep-calendar .ep-calendar-body {
  width: 100%;
  height: 90%;
}
.ep-calendar .ep-calendar-body .ep-weekdays th {
  text-align: center;
  color: #231f56;
}
.ep-calendar .ep-calendar-body .ep-week td {
  text-align: center;
}
.ep-calendar .ep-calendar-body .ep-week .ep-day {
  display: inline-block;
  line-height: 30px;
  width: 30px;
  height: 30px;
}
.ep-calendar .ep-calendar-body .ep-week .ep-event {
  background-color: rgba(35, 31, 86, 0.6);
  border-radius: 50%;
}
/*
    Content Boxes
    
    1. ep-content-box         - general content box style
      1.1. ep-content-header  - optional header for content box
      1.2. ep-content-body    - content body 
      1.3. ep-scrollable      - content box with scrollable content (using plugin)
    2. ep-aspect-ratio-box    - box that maintains aspect ratio (based on width change)

*/
/*
    1. ep-content-box
*/
.ep-content-box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  max-height: 500px;
  background-color: white;
  border-radius: 10px;
  /*
        1.1. ep-content-header
    */
  /*
        1.2. ep-content-body
    */
  /*
        1.3. ep-scrollable
    */
}
.ep-content-box .ep-content-header {
  padding: 20px 25px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-weight: 600;
  color: #2f2c79;
  letter-spacing: 1px;
}
.ep-content-box .ep-content-body {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  box-sizing: border-box;
  position: relative;
  margin: 20px 15px 15px;
}
.ep-content-box.ep-scrollable .ep-content-body {
  overflow: auto;
  margin-right: 10px;
}
.ep-content-box.ep-scrollable .jspVerticalBar {
  width: 10px;
  background-color: transparent;
}
.ep-content-box.ep-scrollable .jspTrack {
  background-color: transparent;
}
.ep-content-box.ep-scrollable .jspDrag {
  background-color: rgba(142, 143, 147, 0.4);
  border-radius: 10px;
}
.ep-content-box.ep-plain-box {
  border-radius: 0;
}
.ep-content-box.ep-plain-box .ep-content-body {
  width: 100%;
  margin: 0;
}
/*
    2. ep-aspect-ratio-box 
*/
.ep-aspect-ratio-box {
  padding: 0;
}
.ep-aspect-ratio-box:before {
  content: "";
  display: block;
}
.ep-aspect-ratio-box.ep-ratio-1-1:before {
  padding-bottom: 100%;
}
.ep-aspect-ratio-box.ep-ratio-5-4:before {
  padding-bottom: 80%;
}
.ep-aspect-ratio-box.ep-ratio-4-3:before {
  padding-bottom: 75%;
}
.ep-aspect-ratio-box .ep-aspect-ratio-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}
/* 
    Generic dropdown component
    
    *Comments
    
    1. ep-dropdown           - container for drop down
    1.1. ep-dropdown-toggle  - button to toggle dropdown
    1.2. ep-dropdown-content - box containing dropdown content
*/
/*
    1. ep-dropdown
*/
.ep-dropdown {
  position: relative;
  /*
        1.1. dropdown-toggle
    */
  /*
        1.2. dropdown-content
    */
}
.ep-dropdown .ep-dropdown-toggle {
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  background-color: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.ep-dropdown .ep-dropdown-toggle .ep-icon-open,
.ep-dropdown .ep-dropdown-toggle .ep-icon-closed {
  position: relative;
  font-weight: 900;
  font-size: 10px;
}
.ep-dropdown .ep-dropdown-toggle .ep-icon-open {
  display: none;
}
.ep-dropdown .ep-dropdown-toggle .ep-icon-closed {
  display: inline-block;
}
.ep-dropdown .ep-dropdown-toggle.ep-dropdown-open .ep-icon-open {
  display: inline-block;
}
.ep-dropdown .ep-dropdown-toggle.ep-dropdown-open .ep-icon-closed {
  display: none;
}
.ep-dropdown .ep-dropdown-toggle:focus {
  outline: none;
}
.ep-dropdown .ep-dropdown-content {
  display: none;
  position: relative;
}
.ep-dropdown .ep-dropdown-content.ep-dropdown-open {
  display: block;
}
.ep-dropdown .ep-dropdown-content.ep-ap-dropdown {
  position: absolute;
  top: 100%;
  background-color: #fefefe;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.ep-dropdown .ep-dropdown-content.ep-ap-dropdown.ep-ap-dropdown-notif {
  position: absolute;
  top: 100%;
  height: 450px;
  background-color: #fefefe;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.ep-box-notificaciones {
  width: 300px;
  padding: 15px 20px;
  overflow-x: scroll;
  font-size: 15px
}
.text-notification-view {
  color: #231f56;
}
.text-notification-no-view {
  color: #f0047f;
}
.ep-box-profile {
  width: 200px;
  padding: 15px 20px;
}
.ep-dropdown .ep-dropdown-content.ep-dropdown-right {
  right: 0;
}
.ep-dropdown .ep-dropdown-content.ep-dropdown-left {
  left: 0;
}
/* 
    Event Information
    
    Styled event information box (shown on home page in AGENDA section)
    
    1. ep-event-info - event information box
*/
/*
    1. ep-event-info
*/
.ep-event-info {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  overflow: hidden;
  background-color: #f2f2f2;
  margin: 0 0 15px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 15px;
}
.ep-event-info .ep-event-date {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  width: 100px;
  background-color: #8c00ff;
  color: white;
  text-align: center;
}
.ep-event-info .ep-event-date .ep-day,
.ep-event-info .ep-event-date .ep-month-year {
  text-align: left;
}
.ep-event-info .ep-event-date .ep-day {
  width: 100%;
  margin: auto 0 5px;
  padding-left: 30px;
  line-height: 1em;
  font-size: 36px;
}
.ep-event-info .ep-event-date .ep-month-year {
  margin: 0 0 auto;
  padding-left: 15px;
  display: inline-block;
  font-size: 12px;
}
.ep-event-info .ep-event-details {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  box-sizing: border-box;
  position: relative;
  padding: 0 15px;
  color: #424346;
}
.ep-event-info .ep-event-details .ep-title {
  padding-top: 8px;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  color: #231f56;
}
.ep-event-info .ep-event-details .ep-description {
  margin: 5px 0;
  font-size: 13px;
  line-height: 1.2em;
}
.ep-event-info .ep-event-details .ep-location {
  position: relative;
  margin-top: 10px;
  font-size: 11px;
}
.ep-event-info .ep-event-details .ep-location span {
  position: relative;
  top: 2px;
  margin-right: 4px;
  color: #f0047f;
}
/* 
    Form styles 
    
    *Comments
    
    1. ep-form        - general form
    2. ep-checkbox    - styled checkboxes
    2. ep-radiobutton - styled radio buttons
*/
/*
    1. ep-form
*/
.ep-form {
  margin: 5px;
}
.ep-form input[type=text],
.ep-form input[type=password],
.ep-form textarea,
.ep-form select {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #cfd0d1;
}
.ep-form .ep-form-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
.ep-form .ep-form-col {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  padding: 4px 15px;
}
.ep-form .ep-form-col:first-child {
  padding-left: 0;
}
.ep-form .ep-form-col:last-child {
  padding-right: 0;
}
.ep-form .ep-form-col label,
.ep-form .ep-form-col input {
  width: 100%;
}
.ep-form .ep-btn-submit {
  display: inline-block;
  padding: 15px 40px;
  border-radius: 10px;
  margin: 0 auto;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;
}
.ep-form .ep-btn-submit .ep-check-mark {
  line-height: 0;
  font-size: 20px;
  margin-right: 10px;
}
/*
    2. ep-checkbox
*/
.ep-checkbox {
  position: relative;
  width: 24px;
  height: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.ep-checkbox:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #cfd0d1;
  border-radius: 8px;
}
.ep-checkbox:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "";
  left: 4px;
  right: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
}
.ep-checkbox:checked:before {
  background-color: #f0047f;
}
.ep-checkbox:checked:after {
  left: auto;
  right: 4px;
}
/*
    3. ep-radiobutton
*/
.ep-radiobutton {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  vertical-align: middle;
  cursor: pointer;
}
.ep-radiobutton:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border: 2px solid #cfd0d1;
  border-radius: 8px;
}
.ep-radiobutton:checked:before {
  background-color: #f0047f;
}
/* 
    Icon styles 
    
    *Comments
    
    1. ep-icon      - general icon
    2...define further
*/
/*
    1. ep-icon
*/
/*
    2...define further
*/
/* 
    Modal styles 
    
    *Comments
    
    1. ep-modal      - general modal
    2...define further
*/
/*
    1. ep-modal
*/
/*
    2...define further
*/
/* 
    Profile stuff
    
    1. ep-profile-avatar  - Rounded profile avatar (picture) used throughout web
    2. ep-profile-card    - profile card in editar perfil and profile modal
    3. user-profile-modal - user profile modal
*/
/*
    1. ep-profile-avatar
*/
.ep-profile-avatar {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  padding: 2px;
  background-color: #fefefe;
  border-radius: 50%;
}
.ep-profile-avatar img {
  display: inline-block;
  width: 100%;
  max-height:60px;
  height: auto;
  border-radius: 50%;
}
.ep-profile-avatar2 img {
  display: inline-block;
  width: 100%;
  height: auto;
  border-radius: 50%;
}
.ep-profile-avatar.ep-pending:after {
  content: "";
  display: block;
  position: absolute;
  top: 70%;
  left: 70%;
  width: 10px;
  height: 10px;
  background-color: #68c670;
  border-radius: 50%;
}
/*
    2. ep-profile-card
*/
.ep-data-card {
  overflow: hidden;
  position: relative;
  border-radius: 15px;
  padding: 15px 15px 40px;
  background: linear-gradient(#8c00ff, #8c00ff 100px, #fefefe 100px, #fefefe);
}
.ep-data-card .ep-card-content {
  width: 100%;
  height: 100%;
  text-align: center;
}
.ep-data-card .ep-card-content .cambiar-foto {
  position: relative;
  width: 140px;
  margin: 20px auto 20px;
  cursor: pointer;
}
.ep-data-card .ep-card-content .cambiar-foto .ep-profile-avatar2 {
  width: 100%;
}
.ep-data-card .ep-card-content .cambiar-foto a {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(150, 150, 150, 0.4);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  color: #fefefe;
}
.ep-data-card .ep-card-content .cambiar-foto a span {
  font-size: 14px;
  margin: auto;
}
.ep-data-card .ep-card-content .cambiar-foto:hover a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.ep-data-card .ep-card-content .profile-name,
.ep-data-card .ep-card-content .profile-cargo {
  padding: 0;
  margin: 0;
}
.ep-data-card .ep-card-content .profile-name {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0;
}
.ep-data-card .ep-card-content .profile-cargo {
  margin-bottom: 40px;
  font-size: 14px;
}
.ep-data-card .ep-card-content .profile-insignias {
  position: relative;
  margin-bottom: 50px;
}
.ep-data-card .ep-card-content .profile-insignias h4 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
}
.ep-data-card .ep-card-content .profile-insignias .ep-profile-insignia {
  display: inline-block;
  width: 50px;
  height: auto;
  margin: 0 5px;
  vertical-align: middle;
}
.ep-data-card .ep-card-content .consultoras {
  font-size: 14px;
}
.ep-data-card .ep-card-content .consultoras p {
  padding: 0;
  margin: 0;
  line-height: 100%;
}
.ep-data-card .ep-card-content .consultoras .num-consultoras {
  font-size: 42px;
  margin-bottom: 5px;
}
/*
    3. user-profile-modal 
*/
#userProfileModal .modal-dialog.user-profile-modal .modal-content {
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  border: none;
}
#userProfileModal .modal-dialog.user-profile-modal .modal-header {
  padding: 5px 10px 5px 0;
  border-bottom: none;
}
#userProfileModal .modal-dialog.user-profile-modal .modal-header button.close {
  color: #fefefe;
  font-weight: 400;
  text-shadow: none;
}
#userProfileModal .modal-dialog.user-profile-modal .ep-data-card {
  padding-bottom: 10px;
}
#userProfileModal .modal-dialog.user-profile-modal .ep-profile-avatar {
  display: block;
  width: 150px;
  margin: -30px auto 10px;
}
#userProfileModal .modal-dialog.user-profile-modal .profile-name {
  margin-bottom: 0;
  color: #f0047f;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
#userProfileModal .modal-dialog.user-profile-modal .profile-cargo {
  font-size: 14px;
  text-align: center;
}
#userProfileModal .modal-dialog.user-profile-modal h4 {
  font-weight: bold;
  font-size: 14px;
}
#userProfileModal .modal-dialog.user-profile-modal .profile-description,
#userProfileModal .modal-dialog.user-profile-modal .profile-contacts {
  font-size: 14px;
}
#userProfileModal .modal-dialog.user-profile-modal .profile-contacts .lnr {
  font-size: 16px;
  color: #2f2c79;
}
#userProfileModal .modal-dialog.user-profile-modal .profile-contacts span {
  margin-right: 15px;
  vertical-align: middle;
}
#userProfileModal .modal-dialog.user-profile-modal .profile-insignias {
  text-align: center;
}
#userProfileModal .modal-dialog.user-profile-modal .profile-insignias .ep-profile-insignia {
  width: 50px;
  margin: 0 5px;
}
/* 
    Progress Bars
    
    Styled progress bar used throughout web
    
    1. ep-progress-bar: ;      - general progress bar
    2...define further
*/
/*
    1. ep-progress-bar
*/
.ep-progress-bar {
  display: inline-block;
  position: relative;
  height: 16px;
  background-color: #dcddde;
  border-radius: 15px;
  color: white;
}
.ep-progress-bar .ep-progress {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 15px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}
.ep-progress-bar .ep-progress.ep-progress-green {
  background-color: #68c670;
}
.ep-progress-bar .ep-progress.ep-progress-purple {
  background-color: #2f2c79;
}
.ep-progress-bar.ep-thin-bar {
  height: 10px;
}
/*
    2...define further
*/
/* 
    Rows with user info in leaderboard (ranking) tables
    
    1. ep-ranking            - general styles and mixins
    1.1. ep-hl-text          - highlighted text (in pill shape)
    1.2. ep-ranking-number   - number position of user in ranking
    1.3. ep-profile-avatar   - special styles for profile avatar in ranking
    1.4. ep-ranking-name     - name of user in ranking
    1.5. ep-progress-bar     - special styles for progress bar in ranking
    1.6. ep-ranking-insignia - ranking insignia icon in tables
*/
/*
    1. ep-ranking
*/
.ep-ranking {
  font-size: 12px;
  /*
        1.1. ep-hl-text
    */
  /*
        1.2. ep-ranking-number
    */
  /*
        1.3. ep-profile-avatar
    */
  /*
        1.4. ep-ranking-name
    */
  /*
        1.5. ep-progress-bar
    */
  /*
        1.6. ep-ranking-insignia
    */
}
.ep-ranking .ep-hl-text {
  padding: 6px 16px;
  border-radius: 15px;
  margin: 0 8px;
  color: white;
  font-size: 12px;
  font-weight: 600;
}
.ep-ranking .ep-hl-text.hl-dark-purple {
  background-color: #2f2c79;
}
.ep-ranking .ep-hl-text.hl-light-green {
  background-color: #68c670;
}
.ep-ranking .ep-hl-text.hl-gray {
  background-color: #cfd0d1;
}
.ep-ranking .ep-hl-text.hl-li-gray {
  background-color: #e4e4e5;
}
.ep-ranking .ep-hl-text.hl-white {
  background-color: #fefefe;
}
.ep-ranking .ep-hl-text.hl-pink {
  background-color: #f0047f;
}
.ep-ranking .ep-hl-text.hl-txt-pink {
  color: #f0047f;
}
.ep-ranking .ep-hl-text.hl-txt-black {
  color: #333;
}
.ep-ranking .ep-ranking-number {
  margin: 0 5px;
  font-weight: 600;
  color: #f0047f;
}
.ep-ranking .ep-profile-avatar {
  margin-right: 20px;
}
.ep-ranking .ep-ranking-name {
  font-weight: bold;
  color: #2f2c79;
  font-size:15px;
}
.ep-ranking .ep-progress-bar {
  width: 250px;
}
.ep-ranking .ep-progress-bar .ep-progress {
  width: 60%;
}
.ep-ranking .ep-ranking-insignia {
  display: inline-block;
  width: 150px;
  text-align: center;
}
.ep-ranking .ep-ranking-insignia img {
  width: 40px;
  height: auto;
}
/* 
    Rating (with stars)
    
    *Comments
    
    1. ep-rating         - rating container
    1.1 ep-rating-star   - star inside of rating 
*/
/*
    1. ep-rating
*/
.ep-rating {
  display: inline-block;
  position: relative;
  height: 20px;
  /*
        1.1. ep-rating-star
    */
}
.ep-rating .ep-rating-star {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  background-image: url("../img/star.png");
  background-repeat: no-repeat;
  background-size: 200% 100%;
}
.ep-rating .ep-rating-star.star-filled {
  background-position: 0 0;
}
.ep-rating .ep-rating-star.star-empty {
  background-position: 100% 0;
}
/* 
    Styled searchbar
    
    1. ep-searchbar  - styled searchbar
    
*/
.ep-searchbar {
  display: inline-block;
  position: relative;
  width: 100%;
  transition: width 0.3s ease-in-out;
}
.ep-searchbar input {
  width: 100%;
  padding: 4px 10px 4px 30px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  color: #666;
  font-size: 14px;
}
.ep-searchbar .lnr {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 10px;
  color: rgba(0, 0, 0, 0.4);
}
.ep-searchbar.ep-anchor-right {
  margin-left: auto;
}
.ep-searchbar.ep-collapsed {
  width: 50px;
}
/* 
    Table styles
    
    *Comments
    
    1. ep-table        - general table styles
    2. table.ep-table  - table styles (semantic table)
    3. div.ep-table    - table styles (css designed table)
*/
/*
    1. ep-table
*/
/*
    2. table.ep-table
*/
table.ep-table {
  position: relative;
  width: 100%;
}
table.ep-table tr.ep-table-header {
  border-bottom: 1px inset rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
}
table.ep-table th {
  color: #2f2c79;
  font-size: 14px;
  font-weight: 600;
}
table.ep-table td {
  padding-top: 15px;
  vertical-align: middle;
  font-size: 14px;
}
table.ep-table td.ep-compact-cell {
  width: 1%;
  white-space: nowrap;
}
/*
    3. div.ep-table (may not be necessary)
*/
/*
    Structure of dashboard sidebar
    
    1. General styles     - ep-sidebar, ep-sidebar-logo
    2. Imports
*/
/*
    1. General styles
*/
.ep-sidebar {
  -webkit-flex: 0 0 280px;
      -ms-flex: 0 0 280px;
          flex: 0 0 280px;
  background-color: #231f56;
}
.ep-sidebar-logo {
  display: block;
  width: 50%;
  height: auto;
}
/*
    2. Imports
    
    2.1 ep-sidebar-menu - sidebar menu
    2.2 ep-sidebar-plan - info on the active plan (at bottom of sidebar)
*/
/*
    Sidebar menu
    
    1. ep-sidebar-menu   - container for sidebar menu
    1.1. ep-menu-item    - individual item on menu
    1.2. ep-sub-menu     - sub-menu containing header and multiple sub-menu items
                            (dropdown with css modifications)
*/
/*
    1. ep-sidebar-menu
*/
.ep-sidebar-menu {
  position: relative;
  padding-left: 0;
  list-style-type: none;
  /*
        1.1. menu-item
    */
  /*
        1.2. sub-menu
    */
}
.ep-sidebar-menu .mi-menu-icon {
  position: relative;
  top: 2px;
  margin-right: 15px;
  font-size: 16px;
  color: #f0047f;
}
.ep-sidebar-menu .mi-menu-row {
  padding: 15px 10px 15px 15px;
  border-left: 8px solid transparent;
}
.ep-sidebar-menu .mi-menu-row:hover {
  border-left-color: #f0047f;
  background-color: #2f2c79;
}
.ep-sidebar-menu .mi-menu-text {
  font-size: 14px;
  letter-spacing: 2px;
  color: white;
}
.ep-sidebar-menu .ep-menu-item a {
  font-size: 14px;
  letter-spacing: 2px;
  color: white;
  padding: 15px 10px 15px 15px;
  border-left: 8px solid transparent;
  display: inline-block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.ep-sidebar-menu .ep-menu-item a:hover {
  border-left-color: #f0047f;
  background-color: #2f2c79;
}
.ep-sidebar-menu .ep-menu-item span.lnr {
  position: relative;
  top: 2px;
  margin-right: 15px;
  font-size: 16px;
  color: #f0047f;
}
.ep-sidebar-menu .ep-sub-menu .ep-dropdown.ep-fixed-sub-menu > .ep-dropdown-content {
  display: block;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-header {
  padding: 15px 10px 15px 15px;
  border-left: 8px solid transparent;
  font-size: 14px;
  letter-spacing: 2px;
  color: white;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-header:hover {
  border-left-color: #f0047f;
  background-color: #2f2c79;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-header.ep-dropdown-toggle .ep-icon-open,
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-header.ep-dropdown-toggle .ep-icon-closed {
  float: right;
  top: 5px;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-header .glyph-icon:first-child {
  position: relative;
  top: 2px;
  margin-right: 15px;
  font-size: 16px;
  color: #f0047f;
}
.ep-menu-item a .glyph-icon:first-child {
  margin-right: 15px;
  color: #f0047f;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-items {
  list-style-type: none;
  padding-left: 0;
  margin-left: 62px;
  margin-top: 10px;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-item {
  margin: 10px 0;
  font-size: 13px;
  letter-spacing: 1px;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-item a {
  display: inline-block;
  padding: 2px 4px;
}
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-item a:hover,
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-item a:active,
.ep-sidebar-menu .ep-sub-menu .ep-sub-menu-item a.ep-active-menu {
  color: #f0047f;
  text-decoration: none;
}
/*
    Small box on side with information on active plan
    
    1. ep-sidebar-plan  - container for sidebar plan
*/
/*
    1. ep-sidebar-plan
*/
.ep-sidebar-plan {
  width: 90%;
  background-color: #282868;
  margin: 40px auto 20px;
  color: #605fa5;
}
.ep-sidebar-plan label {
  font-size: 12px;
}
.ep-sidebar-plan .ep-plan-contratado {
  color: #68c670;
}
.ep-sidebar-plan .ep-progress-bar {
  width: 100%;
  margin: 5px 0;
}
.ep-sidebar-plan .ep-progress-bar .ep-progress {
  width: 60%;
}
.ep-sidebar-plan .ep-btn {
  margin: 20px auto 0;
  border: 1px solid #605fa5;
  color: #605fa5;
}
/*
    Structure of dashboard view
    
    1. General styles  - ep-view
    2. Imports
*/
/* 
    1. General styles
*/
.ep-view {
  position: relative;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-bottom: 30px;
  background-color: #dee5ed;
}
/* 
    2. Imports
    
    2.1 ep-profile-bar  - profile bar with notifications, avatar...
    2.2 ep-view-content - content of the current view  
*/
/* 
    Profile bar 
    
    Persists across all views to show profile info of logged in user
    
    1. ep-profile-bar              - container for profile bar
      1.1. ep-profile-bar-contents  - wrap contents of profile bar to position properly
      1.2. ep-profile-notifications - dropdown for show profile notifications 
                                        (dropdown with additional styles)
      1.3. ep-profile-avatar        - profile avatar
      1.4. ep-profile-message       - profile message
      1.5. ep-profile-options       - profile options 
                                       (dropdown with additional styles)
*/
/*
    1. ep-profile-bar 
*/
.ep-profile-bar {
  position: relative;
  height: 70px;
  background-color: white;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  color: #231f56;
  font-weight: bold;
  z-index: 2;
  /*
        1.1. ep-profile-bar-contents
    */
  /* 
        1.2. ep-profile-notifications
    */
  /* 
        1.3. ep-profile-avatar
    */
  /* 
        1.4. ep-profile-message
    */
  /* 
        1.5. ep-profile-options
    */
}
.ep-profile-bar .mi-profile-bar-section {
  display: inline-block;
  vertical-align: middle;
}
.ep-profile-bar .ep-profile-bar-contents {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 30px;
  width: auto;
}
.ep-profile-bar .ep-profile-notifications {
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
}
.ep-profile-bar .ep-profile-notifications .ep-notification-bell {
  position: relative;
  font-weight: bold;
  height: 20px;
}
.ep-profile-bar .ep-profile-notifications .ep-notification-bell.ep-dropdown-toggle {
  top: 4px;
  font-size: 20px;
}
.ep-profile-bar .ep-profile-notifications .ep-notification-bell .ep-pending-notifications {
  position: absolute;
  top: -4px;
  right: -5px;
  width: 14px;
  height: 14px;
  background-color: red;
  border-radius: 50%;
  line-height: 14px;
  font-size: 10px;
  text-align: center;
  color: white;
  font-weight: normal;
}
.ep-profile-bar .ep-profile-avatar {
  display: inline-block;
  vertical-align: middle;
}
.ep-profile-bar .ep-profile-message {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  margin: 0 10px;
}
.ep-profile-bar .ep-profile-message a {
  color: #231f56;
}
.ep-profile-bar .ep-profile-options {
  display: inline-block;
  vertical-align: middle;
}
.ep-profile-bar .ep-profile-options .ep-dropdown-toggle {
  width: 20px;
  text-align: center;
}
/* 
    View content
    
    *Comments
    
    1. ep-view-content              - container for view content
      1.1. main titles              - titles for view content and sections
          1.1.1. ep-dashboard-title - title for dashboard views
          1.1.2. ep-content-title   - title for view content
      1.2. ep-content-wrapper       - wrapper for content
          1.2.1 ep-section-title    - title for sections in content
      1.3. ep-tabbed-content        - tabbed content 
        1.3.1. ep-tab-headers       - list of headers for tabbed navigation
        1.3.2. ep-tab-header        - individual tab header
        1.3.3. ep-tabs              - tab list
        1.3.4. ep-tab               - individual tab (each tab is also a content box)

*/
/*
    1. ep-view-content
*/
.ep-view-content {
  position: relative;
  max-width: 1600px;
  /*
        1.1. titles
    */
  /*
        1.2. ep-content-wrapper 
    */
  /*
        1.3. ep-content-title
    */
  /*
        1.24
    
    
    /*
        1.4. ep-tabbed-content
    */
}
.ep-view-content .ep-content-row {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.ep-view-content .ep-dashboard-title {
  padding: 15px 0;
  padding-left: 2%;
  background-color: #d8dde3;
  color: rgba(79, 80, 83, 0.8);
  font-size: 14px;
  font-weight: 600;
}
.ep-view-content h1.ep-content-title,
.ep-view-content h2.ep-content-tille {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #8e8f93;
}
.ep-view-content .ep-content-wrapper {
  position: relative;
  padding-bottom: 20px;
  margin: 30px  2% 0;
}
.ep-view-content .ep-content-wrapper .ep-section-title {
  font-size: 16px;
  color: #8e8f93;
}
@media (min-width: 1440px) {
  .ep-view-content .ep-content-wrapper {
    margin: 40px 5% 0;
  }
}
.ep-view-content .ep-content-title {
  color: #8e8f93;
  font-size: 20px;
  margin-bottom: 20px;
}
.ep-view-content .ep-tabbed-content {
  /* 
            1.4.1. ep-tab-headers
        */
  /* 
            1.4.2. ep-tab-header
        */
  /* 
            1.4.3. ep-tabs
        */
  /* 
            1.4.4. ep-tab
        */
}
.ep-view-content .ep-tabbed-content .ep-tab-headers {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-left: 0;
  list-style-type: none;
}
.ep-view-content .ep-tabbed-content .ep-tab-header {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.ep-view-content .ep-tabbed-content .ep-tab-header h2 {
  font-size: 14px;
  color: #5b5c60;
}
.ep-view-content .ep-tabbed-content .ep-tab-header.ep-active-header {
  border-bottom: 2px solid #f0047f;
}
.ep-view-content .ep-tabbed-content .ep-tab-header:hover {
  border-bottom: 1px solid #f0047f;
}
.ep-view-content .ep-tabbed-content .ep-tabs.ep-active-tab {
  display: block;
}
/* 
    Views
    
    Specific CSS for different views
    
    1. General Styles
    2. Imports
*/
/*
    1. General Styles
*/
/* 
    2. Imports
    
    2.1. home      - view details for home view
    2.2. evento    - view details for events related (detalles-evento and editar-evento modal)
    2.3. boletin   - view details for boletin nacional and boletin de unidad views
    2.4. dashbaord - view details for dashboard views
    
*/
/* 
    Home
    
    View details for home view
*/
.ep-agenda-eventos {
  max-height: 420px
}
.home-agenda {
  position: relative;
  width: 100%;
  margin-bottom: 25px;
}
.home-agenda .agenda-calendar,
.home-agenda .agenda-events {
  width: 100%;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.home-agenda .agenda-calendar .ep-aspect-ratio-wrapper,
.home-agenda .agenda-events .ep-aspect-ratio-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  top: 3%;
  left: 2%;
  width: 96%;
  height: 94%;
}
.home-agenda .agenda-calendar .ep-content-body,
.home-agenda .agenda-events .ep-content-body {
  margin: 0;
}
.home-agenda .agenda-calendar {
  background: linear-gradient(120deg, #8c00ff 0%, #8d00fe 19%, #b703c7 76%, #ed0484 100%);
  margin-bottom: 10px;
}
.home-agenda .agenda-events .ep-aspect-ratio-wrapper {
  width: 97%;
  left: 2%;
}
@media (min-width: 1200px) {
  .home-agenda {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .home-agenda .agenda-calendar,
  .home-agenda .agenda-events {
    -webkit-flex: 1 1 360px;
        -ms-flex: 1 1 360px;
            flex: 1 1 360px;
    max-width: none;
  }
  .home-agenda .agenda-calendar {
    margin-right: 20px;
    margin-bottom: 0;
  }
}
.eventos-publicados .ep-table img {
  margin-right: 20px;
  vertical-align: text-top;
}
.eventos-publicados .ep-table .ep-btn {
  margin-left: 10px;
}
/* 
    Evento
    
    View details for eventos related views (detalles-evento and editar-evento modal)
*/
.detalles-evento {
  height: 500px;
}
.detalles-evento .ep-content-header {
  text-align: right;
}
.detalles-evento .ep-content-header p {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  margin: 0;
  padding: 0;
}
.detalles-evento .ep-table img {
  margin-left: 10px;
  margin-right: 20px;
}
#editarEventoModal .modal-dialog {
  max-width: 800px;
}
#editarEventoModal .ep-form .col-nombre-evento {
  -webkit-flex-basis: 30%;
      -ms-flex-preferred-size: 30%;
          flex-basis: 30%;
}
#editarEventoModal .ep-form .col-costo-evento {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
}
#editarEventoModal .ep-form .col-fecha-evento {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
}
#editarEventoModal .ep-form .col-hora-evento {
  -webkit-flex-basis: 15%;
      -ms-flex-preferred-size: 15%;
          flex-basis: 15%;
}
#editarEventoModal .ep-form .publicar-para {
  max-width: 300px;
  padding-left: 20px;
}
#editarEventoModal .ep-form .publicar-para input {
  position: relative;
  margin-top: 5px;
}
#editarEventoModal .subir-imagen {
  position: relative;
  padding: 20px;
  margin: 20px 0;
}
#editarEventoModal .subir-imagen input {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 150px;
  height: 150px;
  border-radius: 8px;
}
#editarEventoModal .subir-imagen input:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fefefe;
}
/* 
    Home
    
    View details for boletin nacional and boletin de unidad views
    
    1. General Styles
    2. Boletin Nacional
        2.1. Directora en Calificacion
        2.2. Target Unit Club
        2.3. Corte de Venta Personales
        2.4. Corte de Iniciación
        2.5. Bonos
        2.6. Estrellas
        2.7. Ranking Producción Unidad
        2.8. Hacia la Cumbre
        2.9. TSR
        
    3. Boletin de Unidad
        3.1. Cuadro de Honor
        3.2. Club de Puntos
        3.3. Camino al Exito
        3.4. Nuevos Inicios
        3.5. Producción de Grupos
        3.6. Estrellas
        3.7. Circulos Rosa
        3.8. Importar Boletin
*/
/*
    1. General Styles
*/
.descargar-boletin {
  display: inline-block;
  padding: 5px 10px 5px 5px;
  margin-bottom: 20px;
}
.img-content {
  width: 30%;
  margin-right: 4%;
}
.img-content img {
  position: -webkit-sticky;
  position: sticky;
  top: 25%;
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.img-content.img-medium img {
  width: 60%;
}
/*
    2. Boletin Nacional
*/
/* 
    2.1. Directora en Calificacion
*/
/* 
    2.2. Target Unit Club
*/
.target-unit-club-top {
  margin-bottom: 20px;
}
/* 
    2.3. Corte de Venta Personales
*/
/* 
    2.4. Corte de Iniciación
*/
/* 
    2.5. Bonos
*/
.ep-content-header .ep-text-em {
  font-size: 16px;
}
.ep-content-header .ep-text-normal {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.bonos-top {
  margin-bottom: 30px;
}
/* 
    2.6. Estrellas
*/
.ganadoras-estrella-perla {
  margin-bottom: 20px;
}
/* 
    2.7. Ranking Producción Unidad
*/
.ranking-produccion-top {
  background: linear-gradient(120deg, #8c00ff 0%, #8d00fe 19%, #b703c7 76%, #ed0484 100%);
  margin-bottom: 8px;
  color: #fefefe;
}
.ranking-produccion-top .ep-content-header {
  color: #fefefe;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.ranking-produccion-top .ep-ranking-number,
.ranking-produccion-top .ep-ranking-name {
  color: #fefefe;
}
.ranking-produccion-top .ep-ranking-insignia img {
  width: 60px;
}
/* 
    2.8. Hacia la Cumbre
*/
.ep-content-header .ep-rating {
  margin-left: 10px;
  top: 4px;
}
.directora-ejecutiva-elite {
  margin-bottom: 15px;
}
/* 
    2.9. TSR
*/
.ganadora-1er-nivel,
.ganadora-2do-nivel {
  margin-bottom: 20px;
}
.ep-ranking .ep-text-em {
  margin-left: 5px;
}
.target .ep-table-header .ep-content-header {
  padding: 10px 0;
}
/*
    3. Boletin de Unidad
*/
/*
    3.1. Cuadro de Honor
*/
.cuadro-reina,
.cuadro-primera-princesa {
  margin-bottom: 15px;
}
/*
    3.2. Club de Puntos
*/
.club-1200-puntos {
  margin-bottom: 20px;
}
/*
    3.3. Camino al Exito
*/
.futura-directora,
.lider-de-grupo {
  margin-bottom: 20px;
}
/*
    3.4. Nuevos Inicios
*/
/*
    3.5. Producción de Grupos
*/
/*
    3.6. Estrellas
*/
.ganadoras-perla {
  margin-bottom: 20px;
}
/*
    3.7. Circulos Rosa
*/
.circulo-rosa-premier {
  margin-bottom: 20px;
}
/*
    3.8. Importar Boletin
*/
.importar-boletin .ep-content-body {
  padding: 50px 20px 10px;
}
.importar-boletin input,
.importar-boletin select {
  font-size: 14px;
  padding: 2px 5px;
}
.importar-boletin select {
  padding: 3px 5px;
}
.importar-boletin .importar-archivo {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 40px;
}
.importar-boletin .importar-archivo button {
  padding: 8px 24px;
  background-color: #dee5ed;
  border: 0;
  border-radius: 10px;
}
.importar-boletin .importar-archivo input {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-left: 20px;
}
.importar-boletin .tipo-de-dato {
  margin-top: 60px;
}
.importar-boletin .tipo-de-dato h4 {
  font-size: 15px;
  font-weight: bold;
}
.importar-boletin .tipo-de-dato label {
  margin-left: 20px;
}
.importar-boletin .tipo-de-dato input {
  margin-right: 10px;
}
.importar-boletin .enviar {
  margin-top: 50px;
  text-align: right;
}
.importar-boletin .enviar .ep-btn {
  padding: 8px 30px;
  background-color: #55bf5e;
  font-weight: 300;
  font-size: 14px;
}
.importar-boletin .enviar .ep-btn:hover {
  background-color: #3ea446;
}
/* 
    Home
    
    View details for dashboard views
    
    1. General Styles
    2. Editar Perfil
    3. Mensajes (chat)
    4. Entrenamientos
    5. Herramientas
    6. Cambiar Plan
*/
/*
    1. General Styles
*/
.ep-content-row.editar-perfil .ep-content-row.cambiar-plan {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}
.ep-content-row .ep-data-card {
  width: 360px;
  margin-right: 30px;
}
.ep-content-row .ep-data-forms {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 400px;
}
.ep-content-row .ep-data-section {
  padding: 10px;
  margin-bottom: 10px;
}
.ep-content-row .ep-data-section:last-child {
  margin-bottom: 0;
}
.ep-content-row .ep-data-section .ep-dropdown-toggle {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-center;
      -ms-flex-align: flex-center;
          align-items: flex-center;
}
.ep-content-row .ep-data-section .ep-dropdown-toggle h3 {
  display: inline-block;
  font-size: 18px;
  margin: 0;
}
.ep-content-row .ep-data-section .ep-dropdown-toggle .ep-icon-open,
.ep-content-row .ep-data-section .ep-dropdown-toggle .ep-icon-closed {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  font-size: 14px;
  color: #8e8f93;
  vertical-align: middle;
}
.ep-content-row .ep-data-section .ep-dropdown-content {
  padding: 40px 0 20px;
}
.ep-content-row .ep-data-section .ep-dropdown-content .ep-form label {
  color: #8e8f93;
}
.ep-content-row .ep-data-section .ep-dropdown-content .ep-form input {
  margin-top: 0;
}
/*
    2. Editar Perfil
*/
.ep-content-title {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.guardar-cambios {
  display: inline-block;
  padding: 5px 10px 5px 5px;
  margin-bottom: 20px;
}
/*
    3. Mensajes (chat)
*/
/*
    4. Entrenamientos
*/
.entrenamientos .ep-entrenamiento {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 10px;
}
.entrenamientos .ep-entrenamiento img {
  width: 60px;
  height: auto;
  margin-right: 20px;
}
.entrenamientos .ep-entrenamiento .ep-entrenamiento-details {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-right: 40px;
}
.entrenamientos .ep-entrenamiento .ep-entrenamiento-details h4 {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
}
.entrenamientos .ep-entrenamiento .ep-entrenamiento-details p {
  margin-bottom: 0;
  font-size: 12px;
}
.entrenamientos .ep-entrenamiento .ep-btn-dashboard {
  margin: 0 5px;
}
/*
    5. Herramientas
*/
.herramientas {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  width: 100%;
}
.herramientas .ep-herramienta {
  position: relative;
  -webkit-flex: 1 1 300px;
      -ms-flex: 1 1 300px;
          flex: 1 1 300px;
  background-color: #fefefe;
  border-radius: 10px;
  margin: 10px;
}
.herramientas .ep-herramienta .ep-aspect-ratio-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  top: 5%;
  left: 4%;
  width: 92%;
  height: 90%;
}
.herramientas .ep-herramienta .herramienta-img {
  overflow: hidden;
  position: relative;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.herramientas .ep-herramienta .herramienta-img img {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: auto;
}
.herramientas .ep-herramienta .herramienta-title {
  font-size: 12px;
  margin: 10px 0 20px;
}
.herramientas .ep-herramienta .herramienta-options {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.herramientas .ep-herramienta .herramienta-options .ep-btn:first-child {
  margin-right: auto;
}
@media (min-width: 1700px) {
  .herramientas .ep-herramienta {
    -webkit-flex: 0 0 400px;
        -ms-flex: 0 0 400px;
            flex: 0 0 400px;
  }
}
@media (max-width: 640px) {
  .herramientas .ep-herramienta .herramienta-options {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .herramientas .ep-herramienta .herramienta-options .ep-btn:first-child {
    margin: 0 0 10px;
  }
}
/*
    6. Cambiar Plan
*/
.cambiar-plan.ep-content-row {
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.cambiar-plan .ep-data-card {
  width: 300px;
  padding-bottom: 20px;
  background: linear-gradient(#8c00ff, #8c00ff 150px, #fefefe 150px, #fefefe);
}
.cambiar-plan .ep-data-card .ep-card-content {
  padding-top: 10px;
}
.cambiar-plan .ep-data-card h3 {
  color: #fefefe;
  font-size: 16px;
}
.cambiar-plan .ep-data-card img {
  display: inline-block;
  width: 80px;
  height: auto;
}
.cambiar-plan .ep-data-card .plan-details {
  margin-top: 40px;
  font-size: 14px;
  color: #666;
}
.cambiar-plan .ep-data-card .plan-details .ep-content-row {
  margin: 5px 0;
}
.cambiar-plan .ep-data-card .plan-details label {
  margin-right: auto;
  font-weight: bold;
}
.cambiar-plan .ep-data-card .renovar-plan {
  margin-top: 20px;
}
.cambiar-plan .ep-data-card .renovar-plan .ep-btn {
  padding: 5px 40px;
  background-color: transparent;
  border: 1px solid #6360c5;
  border-radius: 10px;
  color: #6360c5;
}
.cambiar-plan .ep-data-forms .ep-data-section {
  height: 100%;
}
.cambiar-plan .ep-data-forms .ep-data-section h3 {
  font-size: 16px;
}
.cambiar-plan .ep-data-forms .ep-form {
  margin-top: 30px;
}
.cambiar-plan .ep-data-forms .ep-form label {
  color: #8e8f93;
  font-size: 14px;
}
.cambiar-plan .ep-data-forms .ep-form select {
  font-size: 14px;
  color: #4f5053;
}
.cambiar-plan .ep-data-forms .active-plan {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 20px 15px;
  background-color: #dee5ed;
  border-radius: 10px;
  margin: 40px 0;
}
.cambiar-plan .ep-data-forms .active-plan .plan-type {
  margin-right: auto;
}
.cambiar-plan .ep-data-forms .active-plan .plan-payment {
  font-weight: bold;
}
.cambiar-plan .ep-data-forms .payment-method label {
  margin-right: 10px;
}
.cambiar-plan .ep-data-forms .payment-method input {
  margin-right: 5px;
}
.cambiar-plan .ep-data-forms .processar-pago {
  margin-top: 50px;
  text-align: center;
}
.cambiar-plan .ep-data-forms .processar-pago .ep-btn {
  padding: 8px 30px;
  background-color: #55bf5e;
  font-weight: 300;
  font-size: 12px;
}
.cambiar-plan .ep-data-forms .processar-pago .ep-btn img {
  width: 20px;
  height: auto;
  margin-right: 10px;
}
.cambiar-plan .ep-data-forms .processar-pago .ep-btn:hover {
  background-color: #3ea446;
}
/*
    Mensajes interface components
    
    1. General styles 
    2. Imports
*/
/*
    1. General styles 
*/
.ep-messages {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  background-color: #fefefe;
}
.ep-messages .ep-message-details {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.ep-messages .ep-message-details .ep-profile-avatar {
  margin-right: 5px;
}
.ep-messages .ep-message-details .ep-contact-name {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
  color: #000;
}
.ep-messages .ep-message-details .ep-message-text {
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: #8e8f93;
}
/*
    2. Imports
    
    2.1 ep-messages-sidebar  - sidebar for messages (recent messages and search)
    2.2 ep-messages-content  - content for each message
*/
/* 
    Sidebar for messages
    
    1. ep-messages-sidebar   - container for messages sidebar
    1.1. ep-sidebar-title    - title of sidebar
    1.2. ep-sidebar-search   - search box on sidebar
    1.3. ep-recent-messages  - recent messages list on sidebar
*/
/*
    1. ep-messages-sidebar
*/
.ep-messages-sidebar {
  -webkit-flex: 0 0 30%;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  /*
        1.1. ep-sidebar-title
    */
  /*
        1.2. ep-sidebar-search
    */
  /*
        1.3. ep-recent-messages
    */
}
.ep-messages-sidebar .ep-sidebar-title {
  margin: 15px 0 10px;
  padding: 0 20px;
  font-size: 20px;
  color: #333;
}
.ep-messages-sidebar .ep-sidebar-search {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  padding: 0 15px;
  margin-bottom: 10px;
}
.ep-messages-sidebar .ep-recent-messages {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.ep-messages-sidebar .ep-recent-messages .ep-message-details {
  padding: 5px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
}
.ep-messages-sidebar .ep-recent-messages .ep-message-details:hover {
  background-color: #f5f5f5;
}
/*
    Content of messages
    
    1. ep-messages-content  - container for messages content
    1.1. ep-messages-header - header bar for messages
    1.2. ep-messages-body   - body of messages 
    1.3. ep-messages-input  - input box for writing messages
*/
/*
    1. ep-messages-content
*/
.ep-messages-content {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /*
        1.1. ep-messages-header
    */
  /*
        1.2. ep-messages-body
    */
  /*
        1.3. ep-messages-input
    */
}
.ep-messages-content .ep-messages-header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.ep-messages-content .ep-messages-header .ep-message-details {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.ep-messages-content .ep-messages-header .ep-messages-options .ep-btn {
  padding: 0;
}
.ep-messages-content .ep-messages-body {
  height: 450px;
  padding-left: 10px;
  background-color: #f4f4f4;
}
.ep-messages-content .ep-messages-body .ep-content-body {
  height: 100%;
  width: 99%;
  overflow: auto;
}
.ep-messages-content .ep-messages-body .ep-date-mark {
  padding: 20px 0 30px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: #cfd0d1;
}
.ep-messages-content .ep-messages-body .ep-message-block {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 99%;
  padding: 0 10px;
  margin: 0 0 10px;
}
.ep-messages-content .ep-messages-body .ep-message-block .ep-message-details {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  padding-top: 5px;
  padding-left: 10px;
}
.ep-messages-content .ep-messages-body .ep-message-block .ep-message-details .ep-message-list {
  display: block;
  width: 94%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.ep-messages-content .ep-messages-body .ep-message-block .ep-message-details .ep-message-item {
  display: inline-block;
  width: auto;
  padding: 10px 15px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  margin-bottom: 5px;
  font-size: 14px;
}
.ep-messages-content .ep-messages-body .ep-message-block .ep-message-details .ep-time-mark {
  padding-left: 10px;
  margin: 0 0 10px;
  font-size: 12px;
  color: #8e8f93;
}
.ep-messages-content .ep-messages-body .ep-message-block.ep-message-sender .ep-message-details .ep-message-item {
  background-color: #dee5ed;
}
.ep-messages-content .ep-messages-body .ep-message-block.ep-message-receiver .ep-profile-avatar {
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.ep-messages-content .ep-messages-body .ep-message-block.ep-message-receiver .ep-message-details {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  padding-left: 0;
  padding-right: 10px;
}
.ep-messages-content .ep-messages-body .ep-message-block.ep-message-receiver .ep-message-details .ep-message-list {
  margin-left: auto;
  text-align: right;
}
.ep-messages-content .ep-messages-body .ep-message-block.ep-message-receiver .ep-message-details .ep-message-item {
  background-color: #c17afa;
}
.ep-messages-content .ep-messages-body .ep-message-block.ep-message-receiver .ep-message-details .ep-time-mark {
  text-align: right;
  padding-right: 10px;
}
.ep-messages-content .ep-messages-input {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 10px 8px 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.ep-messages-content .ep-messages-input .ep-message-input {
  position: relative;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.ep-messages-content .ep-messages-input .ep-message-input input {
  width: 100%;
  padding: 10px 5px 10px 35px;
  background-color: #f4f4f4;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #666;
  font-size: 14px;
}
.ep-messages-content .ep-messages-input .ep-attach-btn {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 5px;
  padding: 0;
  font-size: 16px;
}
.ep-messages-content .ep-messages-input .ep-send-btn {
  padding: 5px 15px;
  margin-left: 5px;
  border: 0;
  border-radius: 0;
  background-color: #45b64e;
  color: #fff;
}
.ep-messages-content .ep-messages-input .ep-send-btn img {
  display: inline-block;
  width: 24px;
  height: auto;
  margin-right: 8px;
}
.ep-messages-content .ep-messages-input .ep-send-btn:hover {
  background-color: #37913f;
}
.mt-2 {
  margin-top: 2px
}

/*tienda*/
.moneda-silver {
    width: 100%;
    height: 70px;
    background-image: url('../img/tienda/saldo_silver.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 70px;
    color: #fff;
}
.moneda-gold {
    width: 100%;
    height: 100%;
    background-image: url('../img/tienda/saldo_gold.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
}
.moneda-silver strong {
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: relative;
    top: 15%;
    font-size: 18px;
    left: 25%
}
.moneda-gold strong {
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: relative;
    top: 15%;
    font-size: 18px;
    left: 25%
}
.content-shop {
    margin-top: 5%
}
.item-menu-tienda {
    width: 60%;
    height: 90px;
    transition: all 0.2s;
}
.zoom-item-menu-tienda {
    transform: scale(1.2);
}
.item-menu-tienda:hover {
    transform: scale(1.2);
}

.col-buy-item {
  margin-bottom: 5%;
}
.ep-buy-item {
    width: 80%;
    height: 200px;
    max-height: 200px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
    border: 3px solid #fff;
}
.ep-buy-item-cart {
    width: 100%;
    height: 150px;
    max-height: 150px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    border-radius: 10px;
    border: 3px solid #fff;
}
.ep-buy-item-cart h3 {
    position: absolute;
    top: 75%;
    left: 20%
}
.ep-buy-item h3 {
    position: absolute;
    top: 70%;
    left: 15%
}
.ep-buy-item-background-blue {
    background-image: url('../img/tienda/fondo_azul.png');
    background-size: cover;
}
.ep-buy-item-background-pink {
    background-image: url('../img/tienda/fondo_rosa.png');
    background-size: cover;
}
.ep-item-price {
    position: absolute;
    width: 50%;
    top: 90%;
    left: 15%;
    font-size: 20px;
    padding: 5px;
    height: 45px;
    z-index: 2
}
.ep-item-price-background-color {
    background-color: #231f56;
    color: #fff;
    border-radius: 8px;
    text-align: center;
}
.ep-item-price-background-image {
    background-image: url('../img/tienda/fondo_precio.png');
    background-size: cover;
    object-fit: cover;
}
.add-to-cart {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
    display: none;
}
.btn-rounded-cart {
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    background-color: #231f56;
    font-size: 20px;
}
.btn-rounded-cart:hover {
    background-color: #8c00ff;
    color: #fff;
}
.ep-recompensa {
    width: 100%;
    height: auto;
    border-radius: 30px;
    background-color: #fff 
}
.panel-cart-eyplease .panel-heading {
    background-color: #ccc;
    font-size: 20px;
    color: #000;
}
.panel-cart-eyplease .panel-body {
    background-color: #D7DBDD;
    color: #000;
}
.input-pay {
    margin-top: 2%;
    padding: 20px;
    font-size: 20px;
}

/*recompensas*/
.ep-recompensa {
    text-align: center;
    width: 100%;
    height: 350px;
    max-height: 200px;
    border-radius: 50px;
    background-color: #fff 
}
.ep-recompensa-insignia {
    text-align: center;
    width: 100%;
    height: auto;
    max-height: 200px;
    border-radius: 50px;
    background-color: #fff 
}
.ep-recompensa .img {
  width: 100px; 
  height: 100px; 
  cursor: pointer;
}
.ep-recompensa-insignia .img {
  width: 100px; 
  height: 100px; 
  cursor: pointer;
}
.ep-item-price-recompensa {
    color: #fff;
    position: absolute;
    width: 40%;
    top: 90%;
    left: 30%;
    font-size: 20px;
    height: 50px;
    z-index: 2;
    border-radius: 10px
}
.ep-item-price-recompensa p {
  text-align: center;
  margin-top: 10px
}
.ep-buy-plantilla {
    width: 100%;
    height: 500px;
    max-height: 500px;
    border-radius: 50px;
    background-color: #fff
}
.btn-buy-plantilla {
    border-radius: 10px;
    position: absolute;
    top: 75%;
    left: 10%
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%, 100%;
    color: #8c00ff;
}
.carousel-control-prev-icon {
    margin-right: 30px
}
.carousel-control-next-icon {
    margin-left: 30px
}
.ep-item-boletin {
    width: 100%;
    height: 200px;
    max-height: 200px;
    border-radius: 50px;
    background-color: #fff 
}
.ep-item-boletin p {
    color: #fff;
    margin: auto;
    margin-left: 25px
}
.ep-item-price-image-currency-gold {
    background-image: url('../img/tienda/fondo_moneda_gold.png');
    background-size: cover;
    border-radius: 10px;
    object-fit: cover;
}

.panel {
  box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 9px 26px 0 rgba(0, 0, 0, 0.19);
}
.ep-btn-susc {
  background-color: transparent;
  border: 1px solid #6360c5;
  border-radius: 10px;
  color: #6360c5;
}

/*estilos estructura 2*/
.progress-bar-eyplease {
  background-color: #2f2c79
}
.btn-estructura {
  background-color: transparent;
  color: #85929E;
  border: none;
  font-size: 18px
}
.btn-estructura-active {
  color: #373672;
}
.score {
  margin-top: 15px;
  margin-bottom: 15px;
  text-align: center;
}
.diq-calif {
  margin: auto;
  width: 80%;
  text-align: left
}
div.card-main{
  width: 100%;
}
a.link{
  text-decoration: none; 
  color: #373672;
  font-weight: bold;
}
a.link:hover{
  border-bottom: 3px solid #E40586;
}
ol.breadcrumb{
  background-color: transparent;
}
li.active-breadcrumb{
  border-bottom: 3px solid #E40586;
}
div.card-person{
  width: 100%;
}
div.card-person  div.card-header{
  height: 90px;
  background-color: #F2F3F4;
  border-style: none;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
} 
div.panel div.panel-heading img.icon-heading{ 
  width: 50px;
}
div.panel div.panel-heading span.heading{
  color: #373672;
  font-weight: bold;
  font-size: 18px;
}
div.panel div.panel-heading span.score-heading{
  color: #D33A7B;
  font-weight: bold;

}
div.card-small{
  width: 100%;
  position: relative;
  height: auto;  
  border-radius: 17px;
  background-color: #F2F3F4;
  border-style: none;
}
div.circle{
  position: absolute;
  width: 110px;
  height: 110px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #FFFFFF;
  top: -40px;
  padding: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 10px solid #FFFFFF;
}
img.icon{
  position: absolute;
  width: 70px;
  right: 20px;
  top: -30px;
}
img.icon-inicios{
  width: 70px;
}
.nuevos-inicios {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}

div.card-person div.card-small div.card-header img.icon-carousel{
  position: absolute;
  width: 50px;
  right: 20px;
  top: 20px;
}
div.panel-ranking{
  border: none;
  background: linear-gradient(120deg, #8c00ff 0%, #8d00fe 19%, #b703c7 76%, #ed0484 100%);
  margin-bottom: 0px;
  color: #fefefe;
  height: 100%;
  border-radius: 15px;
  padding-bottom: 0px;
}
div.ranking-heading{
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  border-bottom: 1px solid #ccc;
  padding: 15px;
  background: linear-gradient(120deg, #8c00ff 0%, #8d00fe 19%, #b703c7 76%, #ed0484 100%);
}
div.ranking{
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
div.foto{
  display: flex;
  align-items: center;
  justify-content: center;
}
div.podio{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
div.trapecio{
  position: absolute;
  width: 220px;
  height: 0px;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-bottom: 100px solid;
  border-color:rgb(255,252,253), linear-gradient(0deg, rgba(255,252,253,1) 0%, rgba(222,210,217,1) 100%);
  transform: rotateX(80deg);
  padding-bottom: 0px;
  margin-bottom: 0px;
  top: -58px;
}
div.cuadrado1{
  position: relative;
  background: rgb(255,252,253);
  background: linear-gradient(0deg, rgba(255,252,253,1) 0%, rgba(199,187,194,1) 100%);
  width: 220px; 
  height: 230px; 
  padding: 10px;
  margin-top: 0px; 
}
div.cuadrado2{ 
  position: relative;
  background: rgb(255,252,253);
  background: linear-gradient(0deg, rgba(255,252,253,1) 0%, rgba(199,187,194,1) 100%);
  width: 220px; 
  height: 190px; 
  padding: 10px;
  margin-top: 0px;
}
div.cuadrado3{
  position: relative;
  background: rgb(255,252,253);
  background: linear-gradient(0deg, rgba(255,252,253,1) 0%, rgba(199,187,194,1) 100%);
  width: 220px; 
  height: auto; 
  padding: 10px;
  margin-top: 0px; 
}
p.ranking{
  color: #373672;
  font-weight: bold;
  font-size: 35px; 
}
div.circle-ranking{ 
  width: 130px;
  height: 130px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #FFFFFF;
  padding: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 10px solid #FFFFFF;
}
img.icon-ranking{
  position: absolute;
  width: 40px;
  right: 55px;
  top: 12px;
}
.card-text {
  font-weight: bold
}
p.person-name{
  color: #373672;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
}
.points {
  border-radius: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  padding: 2px 10px 2px 10px;
}
span.blue{
  background-color: #3A3975;
}
span.green{
  background-color: #60CA6B;
}
span.dark-purple{
  background-color: #2f2c79;
}
span.gray{
  background-color: #CACCCD;
}
span.white{
  background-color: #FFFFFF;
  border-radius: 15px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #E80683;
  padding: 8px 10px 8px 10px;
}
span.pink{
  background-color: #F24CA2;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #fff;
  padding: 2px 10px 2px 10px; 
}
.text-pink{
  color: #E80683 !important; 
}
p.stars{
  color:#FCAD31;  
}
i.stars{
  color:#FCAD31;
}
p.subtitle{
  color: #E40586;
  font-weight: bold;
}
div.overflow{
  overflow-y: scroll;
  overflow-x: hidden;
  height: 600px;
}
.simplebar-scrollbar.simplebar-visible::before{
  opacity: 1 !important;
}
.simplebar-scrollbar::before{
  background: #F24CA2 !important;
}
/*Carousel Controls*/
span.controls{
  color: #F0047F; 
  font-size: 22px;
}