:root
{
    --colorPrimario:#0078bb;
    --colorHover: #0890dc;
    --colorSecundario: #9fb932;
    --colorSemiSecundario: #EBB72A;
    --colorTer: #249f96;
}

.swal2-styled.swal2-confirm
{
    background-color: var(--colorPrimario)!important;
}

.swal2-styled.swal2-deny
{
    background-color: var(--colorTer)!important;
}

.dev_container_caritas > img
{
    width: 75px;
    margin: 3px;
}

.btn-primary
{
    background-color: var(--colorPrimario)!important;
    border-color: var(--colorPrimario)!important;
}


.btn1542:hover
{
    background: var(--colorHover);
}

body{
    background-image: linear-gradient(
    rgba(255, 255, 255, 0.76),
    rgba(255, 255, 255, 0.76)
    ),
    url(../../images/bg-white.jpg) !important;
    background-size: cover;
    min-height: 100vh;
}

/* QBOLETIN IMAGEN */
.wrapper-bg
{
    /* height: 100vh; */
    /*background-image: linear-gradient(
    rgba(255, 255, 255, 0.76),
    rgba(255, 255, 255, 0.76)
    ),
    url(../../images/fondoSQ.png);
    background-size: cover;
    min-height: 100vh;*/
    /* min-height: 600px; */
}

.WButtons
{
    width: 190px;
}

.card
{
    border-radius: 1.25rem!important;
    min-height: 430px;
}

.contenedorQboletin img
{
    width: 117px;
    margin-right: 50px;
}

.notification-number {
    position: absolute;
    right: 12%;
    top: 5px;
    z-index: 1;
    background: #95c14e;
    border: 3px solid #FFF;
    border-radius: 50%;
    padding-top: 5px;
    height: 25px;
    width: 25px;
    font-family: sans-serif;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 10px;
    color: #FFF;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: bounce-rr;
    animation-timing-function: ease;
}
@keyframes bounce-rr  {
    0%   { transform: translateY(0); }
    10%  { transform: translateY(-5px); }
    40%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}
/* FIN - QBOLETIN IMAGEN */

.color-span{
    cursor: pointer;
}

.upload__input .custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + .75rem + 2px);
    padding: 1.3rem 2rem;
    font-weight: 400;
    line-height: 0;
    color: #686f7a;
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: 10rem;
	margin-bottom: 0;
	box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.1) !important;
}
.upload__input .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + .75rem);
    padding: 1.3rem 2rem;
    line-height: 0;
    color: #fff;
    content: "Subir archivo" !important;
    background-color: #0078bb;
    border-left: inherit;
    border-radius: 0 10rem 10rem 0;
}

.view__img {
    /* width: 100%;
    float: left; */
    width: 376px;
    height: 212px;
}

.view__img img {
    width: 100%;
    height: 100%;
	border-radius: 10px;
}

.color-theme{
    display: flex;
    justify-content: space-evenly;
}

.logo-qboletin{
    display: flex;
    justify-content: center;
    padding: 20px;
}
.logo-qboletin a > img{
    width: 320px;
}

.main_logo {
    float: left;
    width: 165px;
    margin-left: 16px;
}
.main_logo img{
    width: 100%;
    position: relative;
}
.main_logo25 {
    float: none;
    /* width: 255px; */
    width: auto;
    text-align: center;
    margin: auto !important;
    padding: 10px 0;
}
.main_logo25 img{
    width: 6vw;
}

.sign_footer img{
    width: 32px;
}

.sign_in_up_bg{
    height: 100vh;
    background-image: linear-gradient(rgb(0 120 187 / 30%) 0%, rgb(148 186 22 / 22%) 50%, rgb(36 159 150 / 67%) 100%), url(../../images/configuracion/background.jpg) !important;
    background-size: cover!important;
    background-position: 50%!important;
    position: fixed;
}


/* INDEX */
.hidden
{
    display: none!important;
}

.sign_form h2
{
    font-size: 18px;
    color: var(--colorPrimario);
}

/* ANIMACIÓN BOTONES */
.animationHover
{
    background-color: var(--colorPrimario)!important;
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1)!important;
    color: #fff!important;
}

.animationHover:hover,
.animationHover:active
{
    background-color: var(--colorHover)!important;
    color: #fff!important;
}

/* FIN - ANIMACIÓN BOTONES */

/* ANIMACIÓN TEXTOS */
.animationTextsHover a
{
    color: var(--colorPrimario)!important;
    transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1)!important;
}

.animationTextsHover a:hover
{
    text-decoration: none!important;
    color: var(--colorSecundario)!important;
}
/* FIN - ANIMACIÓN TEXTOS */

/* LOADING EXPERTOS */
.loading::before,
.loading::after {
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.loading::before {
    content: '';
    background-color: #fff;
}

.loading::after {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    content: url('../../images/configuracion/logo_west.svg');
    text-align: center;
    white-space: pre;
    font-weight: normal;
    font-size: 44px;
    letter-spacing: 0.04rem;
    color: #000;
    opacity: 0.8;
    zoom: 3;
    animation: animation 1s alternate infinite;
}

.btn-danger
{
    background-color: #249f96!important;
    border-color: #249f96!important;
}

@keyframes animation
{
    to { opacity: 0.2; }
}
/* FIN - LOADING EXPERTOS */

/*CALENDARIO (FULL CALENDAR)*/
#calendar
{
    max-width: 1100px;
    margin: 40px auto;
}

/*CALENDARIO (FULL CALENDAR)*/


/*PLAN FORMATIVO*/

.pd_content h6
{
    text-align: right;
}

.pd_content {
    width: 100%;
}
/*FIN - PLAN FORMATIVO*/




/* FOOTER FIJO */

.footer-fijo{
    position: fixed;
    bottom: 0px;
}

/* espacio de busqueda en lista de cursos y oferta de cursos */
.espacio-busqueda{
    padding: 10px;
}

/*
.contenedor-botones{
    width: 94%;
    position: absolute;
    bottom: 0px;
}
.hs_content__alto-fijo{
    height: 210px;
} */


.test_submit_btn{
    margin-top: 0px !important;
}

.test_submit_close{
    background: gray;
    padding: 0 20px;
    height: 40px;
    border-radius: 18px;
    color: white;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.test_submit_close:hover{
    color: #fff !important;
    background: #333;
}


/* modificacion tamaño de fuente oferta de cursos y cursos */
.mhs_title--tamano{
    font-size: 20px;
}

/* modificacion de background imagen overlay*/

.overlay-modifi{
    background-image: linear-gradient(transparent, rgba(51,51,51,.1) 64%);

}


/*modificaicon badge seller*/
.badge_seller {
    font-size: 18px;
    top: 18px;
    padding: 2px 14px;
}
.badge_seller:after {
    top: 7px;
    width: 18px;
    height: 18px;
    left: -8px;
}

.crse_reviews {

    padding: 2px 14px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    top: 16px;
    position: absolute;
}

.mayus{
    text-transform: uppercase;
}


.crse_reviews__detalle {
    color: #fff;
    background: #95c14e;
    display: inline-block;
    padding: 3px 15px 3px 10px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

label {
    margin-bottom: 0rem!important;
}

.cursus-btn {
    font-size: 14px;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    background: var(--colorPrimario);
    border-radius: 20px;
    text-align: center;
    border: 0;
    width: 100%;
    height: 40px;
}

.hidden
{
    display: none!important;
}


/* CARGANDO */
.loading_bouncer
{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2000;
    background: #ffffff85;
}
.bouncer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .bouncer div {
    width: 20px;
    height: 20px;
    background-color: var(--colorPrimario);
    border-radius: 50%;
    animation: bouncer 0.5s cubic-bezier(0.19, 0.57, 0.3, 0.98) infinite alternate;
    /* use https://cubic-bezier.com/ to customize the curve */
  }

  .bouncer div:nth-child(2) {
    animation-delay: 0.1s;
    opacity: 0.8;
  }

  .bouncer div:nth-child(3) {
    animation-delay: 0.2s;
    opacity: 0.6;
  }

  .bouncer div:nth-child(4) {
    animation-delay: 0.3s;
    opacity: 0.4;
  }

  @keyframes bouncer {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-100px);
    }
  }

.obligatorio
{
    color: var(--colorPrimario)
}

.menu--label
{
    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
}

@font-face {
    font-family: 'icon-KL';
    src: url('../../font/fontello.eot?58952577');
    src: url('../../font/fontello.eot?58952577#iefix') format('embedded-opentype'),
         url('../../font/fontello.woff2?58952577') format('woff2'),
         url('../../font/fontello.woff?58952577') format('woff'),
         url('../../font/fontello.ttf?58952577') format('truetype'),
         url('../../font/fontello.svg?58952577#fontello') format('svg');
    font-weight: normal;
    font-style: normal;
  }

   [class^="ico-"]:before, [class*=" ico-"]:before {
    font-family: "icon-KL";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .ico-audeed_icon:before { content: '\e800'; } /* '' */


  label.uploader
{
    color: var(--colorPrimario);
    background-color: white;
    cursor: pointer;
    border: 1px solid var(--colorPrimario);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px;
    border-radius: 0.3rem;
    font-weight: bold;
    box-shadow: 0 2px 4px 2px #e6f1faee;
    transition: background-color 0.3s;
}

label.uploader .icon {
    fill: currentcolor;
    display: inline-block;
    margin-right: 1rem;
    font-size: 10px;
}
label.uploader input[type=file] {
    display: none;
}
label.uploader:hover {
    background-color: #f8f8f8;
}
  /* // HORIZONTAL NAV */
  @media (min-width: 992px)
  {
      .dev_horizontal_nav
      {
        /* box-shadow: 0px 2px 5px rgb(0 0 0 / 10%); */
        display: block;
        width: 100%;
        position: fixed;
        height: auto;
        top: 60px;
        z-index: 100;
      }
  }

  @media (min-width: 992px) {
      .dev-wrapper
      {
          margin-left: 0px;
          margin-top: 10px;
      }
  }

  .dev-container
  {
      margin-left: 0!important;
      margin-right: 0!important;
  }

  .container
  {
      margin-right: none;
      margin-left: none;
  }
  .dev_horizontal_nav
  {
      display: block;
      width: 100%;
      position: fixed;
      height: auto;
      top: 60px;
      z-index: 100;
      bottom: auto;
      background: transparent;
  }

  .dev_top_section > ul
  {
    display: flex;
  }

  .dev_top_section > ul > li
  {
      width: 100%;
  }

  .dev-wrapper
  {

  }

  .dev-menu-active
  {
      background: #cfeeff;
      color: #0078bb !important;
  }

  .dev_desktop
  {
      display: none;
  }

  .menu--label
  {
      background-color: #f4f4f4;
  }

@media(max-width: 768px)
{
    .dev_mobile
    {
        position: fixed;
        left: -240px;
        top: 60px;
        bottom: 0;
        background: #fff;
        overflow: hidden;
        width: 240px;
        z-index: 995;
    }

    /* .dev_mobile > ul
    {
        display: block;
    } */

    .dev_top_section > ul
    {
        display: block;
    }

    .wrapper
    {
        padding: 80px 0 0;
    }
}

.profile_link img
{
    width: 25px;
    height: 25px;
}

.crop-text
{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Limita a 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3em; /* Ajusta según el tamaño de la fuente */
}

.crop-text:hover
{
  -webkit-line-clamp: initial;
  -webkit-box-orient: initial;
  overflow: initial;
  text-overflow: initial;
  max-height: initial;
}

.dev-cursor-pointer
{
    cursor: pointer;
}

.dev_badge_seller_green
{
    background: green;
}

.dev_badge_seller_red
{
    background: red;
}

.sidebar {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: white;
    border-left: 2px solid #ccc;
    transition: right 0.3s ease-in-out;
    box-shadow: -3px 0 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 1050;
}

/* Botón de la flecha */
.toggle-btn {
    position: fixed;
    top: 50%;
    right: 0;
    background-color: #0078bb;
    color: white;
    border: none;
    padding: 0;
    font-size: 35px;
    border-radius: 50px 0 0 50px;
    cursor: pointer;
    z-index: 1051;
    transition: right 0.3s ease-in-out;
}

.toggle-btn .uil:before {
    margin-right: 0 !important;
    margin-left: 0 !important;
}


/* Cuando la barra está activa */
.sidebar.active {
    right: 0;
}

.sidebar.active .toggle-btn {
    right: 300px;
}

.sidebar-certificados {
    color: white;
    border-radius: 10px;
    background-image: url('/assets/images/elearningFondo.jpg');
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.5); /* Capa oscura encima (0.5 = 50% de opacidad) */
    background-blend-mode: darken; /* Mezcla la imagen con el color */
    position: relative; /* Para que los elementos absolutos se posicionen en relación a este */
    text-align: center;
    padding-top: 11px;
    margin-top: 18px;
}


.sidebar-certificados>p{
    color: white;
}

.sidebar-certificados img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* La mueve hacia arriba y la centra horizontalmente */
    width: 70px; /* Ajusta el tamaño según necesites */
    height: 70px;
    border-radius: 50%; /* Si es un avatar, redondearlo */
    object-fit: cover; /* Evita deformaciones */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Sombras para resaltar */
}

@media (max-width: 768px) {
    .thead-s{
      display: none !important;
    }
  }