/* Root */

*{
    text-decoration: none !important;
    transition: all 0.5s ease !important;
  }

  .bg-gradient-dark{
      background: rgb(0,0,0);
      background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.11668417366946782) 100%);
  }

  #challenge_card {
    transition: transform .2s;
    cursor: pointer;
    border-radius: 20px;
    min-height: 30vh;
    max-height: 30vh;
    max-width: 50vh;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%), #C4C4C4;

  }

  #challenge_card:hover {
    transform: scale(1.03);

    background-position: center;
    -webkit-box-shadow: 1px 1px 10px 6px rgba(171,24,42,0.4);
    -moz-box-shadow: 1px 1px 10px 6px rgba(171,24,42,0.4);
    box-shadow: 1px 1px 10px 6px rgba(171,24,42,0.4);
  }

  h1,h2,h3,h4,h5,h6{
      color: #3F3E43;
  }
  .notifications-dropdown{
      width: 350px;
      height: 50vh;
      overflow-y: scroll;
  }
  .nav-link.active,.nav-link.active>li.icon-nav{
      /* border-radius: 25px !important;
      background-color: #5685cc !important; */
      color: #ffffff !important;
      opacity: 1 !important;

      font-weight: bold !important;
  }

  .nav-link{
      margin: 10px 0px;
      color: #fff !important;
      opacity: 0.7;
  }

  .sidebar {
      background-color: #000E3D ;
      color: #fff ;
      height: 100vh;
      width: 240px;
      transition: all 0.5s ease-in except width !important;
  }
  .icon-nav{
      padding-right: 10px;
      color: #fff;
  }

  .sidebar-response{
      width: 85px;
      transition: all 0.5s ease-in !important;
  }
  .ocultar-texto-sidebar{
      font-size: 0px;
      text-align: center;
  }
  .icon-nav-response{
      text-align: center;
      font-size: 20px;
      padding-right: 0px;
      color: #fff
  }
  .btn-sidenav{
      right: -25px;
      top: 50px;
  }
  ::-webkit-scrollbar {
    width: 8px;
    /* Tamaño del scroll en vertical */
    height: 8px;
    /* Tamaño del scroll en horizontal */
    /* Ocultar scroll */
  }

  ::-webkit-scrollbar-thumb {
    background: #06B6FF;
    border-radius: 4px;

  }

  .navbar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .navbar-toggle:hover {
    background: #ccc;
  }

  .navbar-toggle .navbar-toggler-icon {
    width: 20px;
    height: 20px;
    color: #fff;
  }
  .btn-sidenav {
    position: absolute;
    top: 50px;
    right: -25px;
  }
  .show {
    display: block;
  }
@media (max-width: 768px) {
    .sidebar {
        display: none;

        width: 100%;
      }
      .navbar-toggle {
        display: block;
      }
  }
  @media (min-width: 768px) {
    .navbar-toggle {
      display: none;
    }
    .sidebar {
        display: block;

      }
  }


  body {
    font-family: Poppins, system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  }
  /* Configuracion Botonoes */

  .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #06B6FF;
    --bs-btn-border-color: #06B6FF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #06B6FF;
    --bs-btn-hover-border-color: #06B6FF;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #06B6FF;
    --bs-btn-active-border-color: #06B6FF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #06B6FF;
    --bs-btn-disabled-border-color: #06B6FF;
  }
  .btn-primary:focus,.btn-primary:active,.btn-outline-primary:focus,.btn-outline-primary:active{
    -webkit-box-shadow: 0px 0px 2px 2px rgba(69, 94, 236) !important;
    -moz-box-shadow: 0px 0px 2px 2px rgba(69, 94, 236) !important;
    box-shadow: 0px 0px 2px 2px rgba(69, 94, 236) !important;
  }

  .btn-outline-primary {
    --bs-btn-color: #06B6FF;
    --bs-btn-border-color: #06B6FF;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #06B6FF;
    --bs-btn-hover-border-color: #06B6FF;
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #06B6FF;
    --bs-btn-active-border-color: #06B6FF;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #06B6FF;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #06B6FF;
    --bs-gradient: none;
  }
  .btn{
    margin-top: 10px;
    border-radius: 101.313px !important;
  }

  .btn-link{
    text-decoration: none !important;

  }

  .btn-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #06B6FF;
    transition: width .3s;
  }

  .btn-link:hover::after {
    width: 100%;
  }
  /* Configuarion textos */


  /* Configuracion Formularios */

  .input-group>.form-control{
    border-right: none !important;
  }
  .input-group-text{
    background-color: #fff;
    border-left: none !important;
  }

  .form-control:focus,.form-control:active, .form-select:focus, .form-select:active{
    border: #06B6FF  1px solid !important;
    -webkit-box-shadow: 0px 0px 2px 2px rgb(69, 94, 236) !important;
    -moz-box-shadow: 0px 0px 2px 2px rgba(69, 94, 236) !important;
    box-shadow: 0px 0px 2px 2px rgba(69, 94, 236) !important;
  }



  /* Globales */

  .form-login{
    background-color: #fff;
    /* max-width: 50% !important; */
    width: 65% !important;
    padding: 0px 3%;
    margin-top: 12%;

  }

  .scroll{
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .gradient_red {
    background: linear-gradient(1.13deg, #06B6FF 0.81%, rgba(196, 196, 196, 0) 58.89%, rgba(255, 255, 255, 0) 48.89%),  url('/assets/img/gallery.png');
    background-size: cover
  }

  .pagination {
    display: flex;
    padding-left: 0;
    list-style: none;

    }

   .pagination-lg .page-link {
    padding: 0.75rem 0;
    font-size: 1.25rem;
    line-height: 1.5;
   }

  .pagination-lg .page-item:first-child .page-link {
    border: none;  }

  .pagination-lg .page-item:last-child .page-link {
    border: none;  }

  .pagination-sm .page-link {
    padding: 0.7rem 0.4rem;
    font-size: 0.875rem;
    line-height: 1.5; }

  .pagination-sm .page-item:first-child .page-link {


    border: none; }

  .pagination-sm .page-item:last-child .page-link {

    border: none; }

  .pagination > .page-item > .page-link,
  .pagination > .page-item > span {
    border: none;
    border-radius: none;
    transition: all .3s;
    padding: 0px 11px;
    margin: 0 3px;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    color: #06B6FF;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    background: transparent;
    text-align: center; }
    .pagination > .page-item > .page-link:hover, .pagination > .page-item > .page-link:focus,
    .pagination > .page-item > span:hover,
    .pagination > .page-item > span:focus {
      color: #06B6FF ;
      -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75) !important;
      -moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75) !important;
      box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75) !important;}

  .pagination > .page-item.active > a,
  .pagination > .page-item.active > span {
    color: #06B6FF ; }
    .pagination > .page-item.active > a, .pagination > .page-item.active > a:focus, .pagination > .page-item.active > a:hover,
    .pagination > .page-item.active > span,
    .pagination > .page-item.active > span:focus,
    .pagination > .page-item.active > span:hover {
      background-color: none !important;
      border-color: none !important;
      color: #06B6FF !important;
      font-weight: bold !important;

      }

      .hover-none:focus {
       box-shadow: none !important;
        border: none !important;
      }
      #input-comment-lesson-form::placeholder {
        color : #fff;
      }

      .card{
        position: relative;
      }


      .bg-gradient-blue::before{
        position: absolute;
        bottom: 0;
        height: 50%;
        width: 100%;
        background-color: #000E3D;
      }

      /* Contenedor para las imágenes */
      .container-f {
        position: relative;
        display: inline-block;
        margin: 0 auto;

        }

        /* quitar position de un container-f */
        .container-f.carouse {
            display: block;
            position: static;
        }
        /* Estilo para la imagen de fondo */
        .background-image.carouse {
        display: block;

        max-width: 100%;
            height: auto;
            max-height:30vh;
            object-fit: cover;
            min-height: 200px;
            border-radius: 20px;

        }
        .background-image {
            display: block;

            width: 100% ;
            height: auto;

        }
        /* Estilo para la imagen superior */
        .overlay-image {
        position: absolute;
        top: 19vh;
        left: -28vh;

        }

        .overlay-image-home {
            position: absolute;
            top: 0vh;
            left: 0vh;

            max-width: 100%;
            height: auto;
            max-height:30vh;
            object-fit: cover;
            min-height: 200px;
            border-radius: 20px;
        }
        .overlay-image-categ {
            position: absolute;
            top: 70%;
            left: 10%;
        }

        .carousel-indicators .carousel-indicator-item {
            background-color: #fff;
            /* opacity: 0.5; */
            border-radius: 50%;
            height: 10px;
            width: 10px;
            margin: 0 2px;
          }
            /* Ajustar ancho del carousel-caption */
.carousel-caption {
    width: 70%;
  }
          .img-h{
            width: 90%;

          }
          .img-h:hover{
            width: 93%;
          }

          .bg-personal{
            background: #000E3D;
          }


          .btn-light{
            --bs-btn-hover-bg: #d4fff6;
          }

          .padre{
            position:relative !important;
            width: 100% !important;
            height: 3.2rem !important;
            border-radius: 5rem 2rem 2rem 5rem !important;
            }

            .hijo {
            position: absolute !important;
            background-color: #C4BEB6 !important;
            top: -3px !important;
            left: 0 !important;

            margin: 0 auto !important;
            width: 3.8rem !important;
            height: 3.8rem !important;
            }


            .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback)
            {
                margin-left: 0;
            }