/* ---------------------------------- Toast --------------------------------- */
.toast-success {
  position        : fixed;
  top             : 50%;
  left            : 50%;
  transform       : translate(-50%, -50%);
  width           : 300px;
  z-index         : 10000;
  animation       : fadeInOut 3s forwards;
  background-color: #D4EDDA;
  border          : 1px solid #C3E6CB;
  color           : #155724;
  padding         : 10px;
  border-radius   : var(--border-radius-global) !important;
  box-shadow      : 0 0 10px rgba(0, 0, 0, 0.1);
}

.toast-error{
  position        : fixed;
  top             : 50%;
  left            : 50%;
  transform       : translate(-50%, -50%);
  width           : 300px;
  z-index         : 10000;
  animation       : fadeInOut 3s forwards;
  background-color: #F8D7DA;
  border: 1px solid #F5C6CB;
  padding         : 10px;
  border-radius   : var(--border-radius-global) !important;
  box-shadow      : 0 0 10px rgba(0, 0, 0, 0.1);
}
/* --------------------------------- Buttons -------------------------------- */
.btn-group {
  display: inline-block;
}
/* --------------------------- Css para el canvas --------------------------- */
/* Fondo semitransparente detrás del canvas */
.canvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  display: none;
  transition: opacity 0.3s ease;
}

.canvas-backdrop.show {
  display: block;
  opacity: 1;
}
.canvas-md{
  width: 50% !important;
}

.canvas-xl{
  width: 80% !important;
}
.canvas {
  position        : fixed;
  top             : 0;
  right           : -100%;
  width           : 500px;
  height          : 100%;
  background-color: #fff;
  box-shadow      : -2px 0 5px rgba(0, 0, 0, 0.1);
  transition      : right 0.3s ease;
  z-index         : 1050;
  overflow-y      : auto;
  border-radius   : var(--border-radius-global) !important;
}

.canvas.show {
  right: 0;
}

.canvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  background-color: #f8f9fa;
}

.canvas-title {
  font-size: 1rem;
  font-weight: bold;
}

.canvas-body {
  padding: 15px;
}

.canvas-section {
  margin-bottom: 20px;
}

.canvas-section h5 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.canvas-section p {
  margin-bottom: 0;
}



/* ------------------------- Estilo para los textos ------------------------- */
.text-link{
  text-decoration: underline !important;
}
/* --------------------------- Estilo para display -------------------------- */
.d-none{
  display: none !important;
}
/* ---------------------------------- Chip ---------------------------------- */
.chip{
  padding         : 5px 10px;
  background-color: #FFF;
  border-radius   : 8px;
}

.float-end{
  float: right;
}

/* estilo para el menu  */
#navbar-sp{
  float: right;
  padding: 0px;
  margin: 0px;
}
#navbar-sp > li, .subnavbar-sp > li{
  list-style: none;
}
#navbar-sp > li{
  display: inline-block;
  margin: 20px 0px 20px 0px;
}
#navbar-sp > li > a, #navbar-sp > li > a:not([href]):not([tabindex]){
  padding: 20px 10px 20px 10px;
  color: #030380;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

#navbar-sp > li > a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
    color: #030380 !important;
}

#navbar-sp > li > a:not([href]):not([tabindex]):hover {
    color: #FFF !important;
}

#navbar-sp > li > a:hover, #navbar-sp > li > span:hover{
  background-color: rgba(3, 3, 128, 0.80);
  color: #FFF;
  -webkit-transition: color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  -moz-transition color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  -o-transition: color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  -ms-transition color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  transition: color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
}

#navbar-sp > li:hover > .sub-navbar-sp{
  display: block;
  -webkit-transition: display 0.3s Ease-in-out;
  -moz-transition: display 0.3s Ease-in-out;
  -o-transition: display 0.3s Ease-in-out;
  -ms-transition: display 0.3s Ease-in-out;
  transition: display 0.3s Ease-in-out;
}


/* subnav */
.sub-navbar-sp{ /* subnav ul */
  display: none;
  position: absolute;
  top: 100%;
  background: #FFF;
  z-index: 9999;
  padding: 0px;
  height: auto;
  width: 250px;
  border-left: 2px solid #e2edeb;
  border-bottom: 2px solid #e2edeb;
  border-right: 2px solid #e2edeb;
}

.sub-navbar-sp > li { /* subnav ul > li */
  list-style: none;
}

.sub-navbar-sp > li > a{ /*subnav ul > li > a */
  display: block;
  padding: 15px 10px 15px 10px;
  font-size: 1.1em;
}

.sub-navbar-sp > li > a:hover, .sub-navbar-sp > li > span:hover{
  background-color: rgba(3, 3, 128, 0.80);
  color: #FFF;
  -webkit-transition: color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  -moz-transition color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  -o-transition: color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  -ms-transition color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
  transition: color 0.3s Ease-in-out, background-color 0.3s Ease-in-out;
}

.rel-sm{
  display: none;
}

.rel-lg{
  display: block;
}

#btn-navbar-sp{
  display: none;
}



/* Fin de estilo para el munu */

@media screen and (max-width: 892px) {
    .rel-lg{
      display: none;
    }
    .rel-sm{
      display: inline-block;
    }

    /* Estilo para el munu */
    #btn-navbar-sp{
      display: inline-block;
      width: 60%;
      text-align: right;
    }
    #btn-navbar-sp > i{
      color: #000;
      font-size: 3em;
    }

    /*#navbar-sp > li:active > .sub-navbar-sp{
      display: block;
      -webkit-transition: display 0.3s Ease-in-out;
      -moz-transition: display 0.3s Ease-in-out;
      -o-transition: display 0.3s Ease-in-out;
      -ms-transition: display 0.3s Ease-in-out;
      transition: display 0.3s Ease-in-out;
    }

    #navbar-sp > li:hover > .sub-navbar-sp{
      display: none;
    }*/


    #navbar-sp{
      display: none;
    }
    /* Fin de estilo para el munu */
}

@media screen and (max-width: 702px) {
    /* Estilo para el munu */
    #btn-navbar-sp{
      display: inline-block;
      width: 50%;
      text-align: right;
    }
}

@media screen and (max-width: 558px) {
    /* Estilo para el munu */
    #btn-navbar-sp{
      display: inline-block;
      width: 40%;
      text-align: right;
    }
}

/* estilos para iphone 6*/
@media screen and (max-width: 540px) {
  header{
    top: 8.9% !important;
  }
  
  /* estilo de menu */
  #navbar-sp{
    /*display: block;*/
    width: 100%;
  }

  #navbar-sp >li{
    display: block;
    height: auto;
    padding: 15px;
    margin: 5px;
  }

  #navbar-sp >li>a{
    width: 100%;
  }
  /* submenu */
  .sub-navbar-sp {
    background: transparent;
    position: relative;
    margin-top: 2%;
    left: 5%;
    border-left: none;
    border-bottom: none;
    border-right: none;
  }
}

@media screen and (max-width: 472px) {
    /* Estilo para el munu */
    #btn-navbar-sp{
      display: inline-block;
      width: 30%;
      text-align: right;
    }
}

@media screen and (max-width: 414px) {
  header{
    top: 7.7% !important;
  }
}

@media screen and (max-width: 403px) {
  /* Estilo para el munu */
  #btn-navbar-sp{
    display: inline-block;
    width: 20%;
    text-align: right;
  }

  header{
    top: 11%;
  }
}

/* estilos para iphone 6*/
@media screen and (max-width: 375px) {
  header{
    top: 7% !important;
  }
}


/* estilos para iphone 6*/
@media screen and (max-width: 360px) {
  header{
    top: 8.3% !important;
  }
}


/* estilos para iphone 5 5se*/
@media screen and (max-width: 320px) {
  /* Estilo para el munu */
  #btn-navbar-sp{
    display: inline-block;
    width: 100%;
    text-align: center;
  }

  
  header{
    top: 15% !important;
  }


  /* clase para el logo de login */
  .logo_login{
    max-width: 180px;
    height: auto;
  }
}



@media (min-width: 768px) {

    body.sidebar-left-hidden #menu > li:not(.active):hover > a {
      background: #030380 !important;
      border-left: 4px solid #4fb7fe !important;
      padding: 15px 8px 15px 11px !important;
      box-shadow: 0 0 11px #ccc !important;
    }
    body.sidebar-left-hidden #menu > li:hover ul.collapse:not(.sub-submenu) {
      display: block;
      height: auto;
      z-index: 1000;
      background-color: #030380;
      border-left: 2px solid #ccc;
      box-shadow: 3px 0 12px -1px #525252; 
    }
    .header_input_search {
      width: 100%;
      height: 30px;
      position: relative;
      padding: 0 35px 0 0;
      border: 1px solid #9bd6fe;
      border-radius: 25rem;
      background: #030380;
      overflow: hidden;
      transition: all .5s ease-in-out; 
    }
}