/** Importacion de Fuentes */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto/Roboto-Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/** Variables */
:root {
  /** Colors Palette */
  --AliceBlue: #cfe3f7;
  --Wild-Blue-Yonder: #96aec7;
  --AzureishWhite: #d2e1f1;
  --Rhythm: #727997;
  --YankeesBlue: #12263f;
  --Water: #d8ecff;
  --White: #ffffff;
  --Back: #000000;
  --Platinum: #e8e8e8;
  --PhilippineYellow: #ffca00;
  --Salem: #468b6b;
  --SilverSand: #bac5c0;

  /** Fonts */
  --Roboto: "Roboto", sans-serif;

  /** Menu */
  --width-menu: 18rem;
}

html,
body {
  box-sizing: border-box;
  font-family: var(--Roboto);

  height: 100vh; /* Set both elements to 100vh */
  margin: 0;
  display: flex; /* Make them a flex container */
  flex-direction: column; /* Stack elements vertically */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins";
}

.backarw {
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc,
    0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999,
    0px 7px 2px rgba(0, 0, 0, 0.5), 0px 7px 2px rgba(0, 0, 0, 0.1),
    0px 7px 2px rgba(0, 0, 0, 0.73), 0px 3px 5px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.37), 0px 10px 10px rgba(0, 0, 0, 0.1),
    0px 20px 20px rgba(0, 0, 0, 0.1);
}
.nextarw {
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc,
    0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999,
    0px 7px 2px rgba(0, 0, 0, 0.5), 0px 7px 2px rgba(0, 0, 0, 0.1),
    0px 7px 2px rgba(0, 0, 0, 0.73), 0px 3px 5px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.37), 0px 10px 10px rgba(0, 0, 0, 0.1),
    0px 20px 20px rgba(0, 0, 0, 0.1);
}

.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-lg,
.navbar > .container-md,
.navbar > .container-sm,
.navbar > .container-xl,
.navbar > .container-xxl {
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc,
    0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999,
    0px 7px 2px rgba(0, 0, 0, 0.5), 0px 7px 2px rgba(0, 0, 0, 0.1),
    0px 7px 2px rgba(0, 0, 0, 0.73), 0px 3px 5px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.37), 0px 10px 10px rgba(0, 0, 0, 0.1),
    0px 20px 20px rgba(0, 0, 0, 0.1);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: white;
  font-weight: 500;
}

#close-sidebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#close-sidebar img {
  margin: 0 88px 0 0;
}

#close-sidebar i {
  margin-right: auto;
}

a {
  text-decoration: none;
  margin: 0;
  font-family: "poppins";
}

.page-wrapper {
  /* Existing styles */
  flex: 1; /* Allow content to grow and fill remaining space */
}

.navbar-left {
  display: flex;
  justify-content: right;
  align-items: center;
  gap: 1.4rem;
  flex-basis: 9rem;
}
@media (min-width: 567px) {
  .navbar-left {
    flex-basis: 7rem;
  }
}

/** Header */
.logo-sena__header {
  --logo-sena: 50px;
  width: var(--logo-sena);
  height: var(--logo-sena);
}

.logo-sena__footer {
  --logo-sena: 100px;
  width: var(--logo-sena);
  height: var(--logo-sena);
}

/** Banner */
.banner {
  height: 30rem;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-height: 30rem;
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* border: 1px solid black; */

  .info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 1rem;

    .info-course {
      padding: 3rem 1rem;
    }

    @media (min-width: 567px) {
      .info-course {
        padding: 2rem 0 0 2rem;
      }
    }
    @media (min-width: 992px) {
      .info-course {
        padding: 4rem 0 0 4rem;
      }
    }

    h3 {
      margin: 0;
      padding: 0;
      line-height: 1.1em;
      font-size: 32px;
    }

    h3::before {
      display: none;
    }
  }

  .banner-image-v2 {
    height: 26rem;
    width: 100%;
    max-height: 30rem;
    transform: translate(-50%, 0);
  }
  .banner-image-v3 {
    height: 26rem;
    object-fit: cover; /* Ensures image covers the container */
    width: 100%; /* Optional: Set width to 100% for full width */
  }

  .banner-woman {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 75%;
  }

  .banner-man {
    position: absolute;
    top: 62%;
    left: 70%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 50%;
  }

  @media (min-width: 992px) {
    .img-mobile {
      position: relative;
      top: 4rem;
      right: 2rem;
    }
    .banner {
      height: 28rem;
    }
    .banner-image {
      transform: none;
    }
    .banner-woman {
      top: 44%;
      left: 38%;
    }
    .banner-man {
      width: 60%;
      left: 68%;
    }
  }
  @media (min-width: 1200px) {
    .banner-man {
      width: 55%;
      top: 59%;
    }
  }
}

/** Menu Main */
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(10deg);
  }
  30% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes sonar {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.sidebar-menu {
  li.sidebar-item a,
  li.sidebar-dropdown a {
    justify-content: center;
    align-items: start;
  }
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.sidebar-wrapper ol li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
.sidebar-wrapper .sidebar-menu ol li a,
#show-sidebar,
#close-sidebar {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/*----------------page-wrapper----------------*/
.page-wrapper {
  height: 100vh;
}

.page-wrapper .theme {
  width: 40px;
  height: 40px;
  display: inline-block;
  border-radius: 4px;
  margin: 2px;
}

.page-wrapper .theme.chiller-theme {
  background: #1e2229;
}

/*----------------toggeled sidebar----------------*/
.page-wrapper.toggled .sidebar-wrapper {
  left: 0px;
}

@media screen and (min-width: 768px) {
  .page-wrapper.toggled .page-content {
    padding-left: var(--width-menu); /** Contenido moviendose con el menu */
  }
}
/*----------------show sidebar button----------------*/
#show-sidebar {
  position: fixed;
  left: 0;
  top: 1.2rem;
  border-radius: 0.4rem;
  width: 35px;
  transition-delay: 0.3s;
  z-index: 3;
}
.page-wrapper.toggled #show-sidebar {
  left: -40px;
}
/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
  width: var(--width-menu); /** Ancho del menu */
  height: 100%;
  max-height: 100%;
  position: fixed;
  top: 0;
  left: -300px;
  z-index: 999;
}

.sidebar-wrapper ul,
.sidebar-wrapper ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sidebar-wrapper a {
  text-decoration: none;
}

/*----------------sidebar-content----------------*/
.sidebar-content {
  max-height: calc(100% - 30px);
  height: calc(100% - 30px);
  overflow-y: auto;
  position: relative;
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc,
    0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999,
    0px 7px 2px rgba(0, 0, 0, 0.5), 0px 7px 2px rgba(0, 0, 0, 0.1),
    0px 7px 2px rgba(0, 0, 0, 0.73), 0px 3px 5px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.37), 0px 10px 10px rgba(0, 0, 0, 0.1),
    0px 20px 20px rgba(0, 0, 0, 0.1);
}

.sidebar-content.desktop {
  overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/
.sidebar-brand {
  background-color: #009999;
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc,
    0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999,
    0px 7px 2px rgba(0, 0, 0, 0.5), 0px 7px 2px rgba(0, 0, 0, 0.1),
    0px 7px 2px rgba(0, 0, 0, 0.73), 0px 3px 5px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.37), 0px 10px 10px rgba(0, 0, 0, 0.1),
    0px 20px 20px rgba(0, 0, 0, 0.1);

  h2 {
    font-size: 1rem;
  }
}

.sidebar-wrapper .sidebar-brand {
  padding: 0.5rem 1rem;
  /* border: 1px solid red; */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 4.7rem;
  justify-content: space-between;
  align-content: center;
}

.sidebar-wrapper .sidebar-brand > a {
  text-transform: uppercase;
  font-weight: bold;
  flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
  cursor: pointer;
  font-size: 20px;
}
/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
  padding: 20px;
  overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic {
  float: left;
  width: 60px;
  padding: 2px;
  border-radius: 12px;
  margin-right: 15px;
  overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
  float: left;
}

.sidebar-wrapper .sidebar-header .user-info > span {
  display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
  font-size: 12px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status {
  font-size: 11px;
  margin-top: 4px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status i {
  font-size: 8px;
  margin-right: 4px;
  color: #5cb85c;
}
/*-----------------------sidebar-search------------------------*/

.sidebar-wrapper .sidebar-search > div {
  padding: 10px 20px;
}

/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
  padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .header-menu span {
  font-weight: bold;
  font-size: 14px;
  padding: 15px 20px 5px 20px;
  display: inline-block;
}

.sidebar-wrapper .sidebar-menu ul li a,
.sidebar-wrapper .sidebar-menu ol li a {
  display: flex;
  width: 100%;
  text-decoration: none;
  position: relative;
  padding: 0.4rem 1.6rem 0.4rem 0.7rem;
  justify-content: space-between;
}

.sidebar-wrapper .sidebar-menu ul li a span,
.sidebar-wrapper .sidebar-menu ol li a span {
  /* border: 1px solid orange; */
  flex-basis: 100%;
  color: #042659;
}

.sidebar-wrapper .sidebar-menu ul.level-2 li a,
.sidebar-wrapper .sidebar-menu ol.level-2 li a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  position: relative;
  padding: 0.2rem 0.7rem;
  /* background: orange; */
}

.sidebar-wrapper .sidebar-menu ul li a i,
.sidebar-wrapper .sidebar-menu ol li a i {
  margin-right: 10px;
  font-size: 18px;
  font-weight: bolder;
  width: 2rem;
  height: 2rem;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  color: #16c7ff;
}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before,
.sidebar-wrapper .sidebar-menu ol li a:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f105";
  font-style: normal;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background: 0 0;
  position: absolute;
  top: 14px;
  right: 0.6rem;
  color: var(--Salem);
  font-size: 1.4rem;
}
/******/
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  counter-reset: section 0;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul ul {
  counter-reset: item 0;
}
.sidebar-wrapper
  .sidebar-menu
  .sidebar-dropdown
  .sidebar-submenu
  ul.level-1
  li
  a:before {
  content: counter(section) ".";
  counter-increment: section;
}
.sidebar-wrapper
  .sidebar-menu
  .sidebar-dropdown
  .sidebar-submenu
  ul.level-1
  li {
  /* border: 1px solid; */
  padding: 0;
  font-weight: 500;
  /* background: orange; */
}
.sidebar-wrapper
  .sidebar-menu
  .sidebar-dropdown
  .sidebar-submenu
  ul.level-2
  li {
  /* border: 1px solid; */
  padding: 0 0.7rem;
  font-weight: normal;
  /* background: white; */
}
.sidebar-wrapper
  .sidebar-menu
  .sidebar-dropdown
  .sidebar-submenu
  ul.level-2
  li
  a:before {
  content: counter(section) ". " counter(item) ". ";
  counter-increment: item;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 10px;
  font-size: 14px;
}
/*******/
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ol {
  padding: 5px 0;
  /*counter-reset: section 0; */
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
  padding-left: 1rem;
  font-size: 13px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
  /* content: counter(section) ".";
    counter-increment: section;  */
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 10px;
  font-size: 14px;
}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ol li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge,
.sidebar-wrapper .sidebar-menu ol li a span.badge {
  float: right;
  margin-top: 8px;
  margin-right: 0.6rem;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
  float: right;
  margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
  display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  right: 0.6rem;
  color: var(--Salem);
  font-size: 1.4rem;
}

/*--------------------------side-footer------------------------------*/
.sidebar-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  height: 3.4rem;
}

.sidebar-footer > a {
  flex-grow: 1;
  text-align: center;
  height: 2.6rem;
  line-height: 30px;
  position: relative;
  margin: 1rem;
  color: var(--AliceBlue) !important;
}

.sidebar-footer > a .notification {
  position: absolute;
  top: 0;
}

.badge-sonar {
  display: inline-block;
  background: #980303;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  position: absolute;
  top: 0;
}

.badge-sonar:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid #980303;
  opacity: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: sonar 1.5s infinite;
}

/*--------------------------page-content-----------------------------*/
.page-wrapper .page-content {
  display: inline-block;
  width: 100%;
  padding-left: 0px;
  padding-top: 0px;
}

.page-wrapper .page-content > div {
  padding: 20px 40px;
}

.page-wrapper .page-content {
  overflow-x: hidden;
}
/*------scroll bar---------------------*/

::-webkit-scrollbar {
  width: 5px;
  height: 7px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #525965;
  border: 0px none #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #525965;
}
::-webkit-scrollbar-thumb:active {
  background: #525965;
}
::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: transparent;
}
::-webkit-scrollbar-track:active {
  background: transparent;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

.fa.fa-icon,
.fa.fa-arrow-left {
  color: #16c7ff;
}

.fas.fa-times {
  color: #ffffff;
  font-size: 24px;
  font-weight: bolder;
}
/*-----------------------------chiller-theme-------------------------------------------------*/
.chiller-theme .sidebar-wrapper {
  background: #009999; /* Background del menu */
}

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
  border-top: 1px solid #3a3f48;
}

.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
  border-color: transparent;
  box-shadow: none;
}

.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-wrapper .sidebar-menu ol li a,
.chiller-theme .sidebar-footer > a {
  color: white;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul.level-2 li a,
.chiller-theme .sidebar-wrapper .sidebar-menu ol.level-2 li a,
.chiller-theme .sidebar-footer > a {
  color: var(--Salem);
}

/* .chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ol li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand > a:hover,
.chiller-theme .sidebar-footer > a:hover i {
  color: rgb(255, 55, 0);
  font-weight: 700;
} */

.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ol li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand > a:hover,
.chiller-theme .sidebar-footer > a:hover i,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li.selected > a {
  color: rgb(4, 255, 0);
  font-weight: 700;
}

.page-wrapper.chiller-theme.toggled #close-sidebar {
  color: var(--Salem);
}

.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
  color: var(--SilverSand);
}

.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme
  .sidebar-wrapper
  .sidebar-dropdown
  .sidebar-submenu
  li
  a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus + span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
  color: #16c7ff;
  text-shadow: 0px 0px 10px rgba(22, 199, 255, 0.5);
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu ol li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
  background: #000000;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu ol li a i {
  background: white;
}
.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
  color: #6c7b88;
}

.chiller-theme .sidebar-footer {
  background: #009999;
  /* box-shadow: 0px -1px 5px #282c33; */
  border-top: 1px solid transparent;
}

.chiller-theme .sidebar-footer > a:first-child {
  border-left: none;
}

.chiller-theme .sidebar-footer > a:last-child {
  border-right: none;
}

li.sidebar-dropdown {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 50px 0 0 0;
  /* border: 0.1px solid white; */
  box-shadow: 0px 1px 2px #eee, 0px 2px 2px #e9e9e9, 0px 3px 2px #ccc,
    0px 4px 2px #c9c9c9, 0px 5px 2px #bbb, 0px 6px 2px #b9b9b9, 0px 7px 2px #999,
    0px 7px 2px rgba(0, 0, 0, 0.5), 0px 7px 2px rgba(0, 0, 0, 0.1),
    0px 7px 2px rgba(0, 0, 0, 0.73), 0px 3px 5px rgba(0, 0, 0, 0.3),
    0px 5px 10px rgba(0, 0, 0, 0.37), 0px 10px 10px rgba(0, 0, 0, 0.1),
    0px 20px 20px rgba(0, 0, 0, 0.1);
}

.sidebar-menu {
  ul {
    a {
      font-size: 1rem;
    }
  }

  .sidebar-submenu {
    width: 100%;

    ul.level-1 {
      margin: 0 0 0 1rem;
      padding: 0.3rem 0.7rem 0.3rem 0.7rem !important;

      a {
        /* border: 1px solid blue; */
        padding: 0.4rem 0.3rem 0.4rem 0.3rem !important;
        font-size: 0.9rem;
        justify-content: start;
      }
    }
  }
}

/** Contenido de la pagina */
.banner-top-content {
  height: 10rem;
  object-fit: cover;
}
.page-content {
  .banner-top-content {
    height: 10rem;
    object-fit: cover;
    width: 100vw;
    position: relative;
    z-index: 0;
  }

  .banner-image {
    /* border: 1px solid blue; */
    position: relative;
    /* width: 100%; */
    z-index: 0;
  }

  .main {
    position: relative;
    z-index: 2;
    margin-top: -6rem;
  }
}

/* @media (min-width: 768px) {
    .page-content {
        width: calc( 100% - var( --width-menu ) );

        .banner-image {
            width: calc( 100% - var( --width-menu ) );
        }
    }
} */

/** Menu Main */

a#show-sidebar {
  background: var(--Salem);
  max-width: 2.4rem;
  width: 2.4rem;
  max-height: 2.4rem;
  height: 2.4rem;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  margin-left: 1rem;
}
.sidebar-menu h2 {
  font-size: 1.1rem;
  text-align: center;
  height: 2.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.sidebar-menu a {
  display: flex;
  justify-content: start;
  align-items: center;

  .fa-icon {
    min-width: 2rem;
    width: 2rem;
    display: flex;
    min-height: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
  }
}

/** Main */

.heading-level-2 {
  display: block;
  position: relative;
  margin-bottom: 2rem;

  & h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0f2a45;
    margin: 1rem 0;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 10%;
    background-color: #ff4500;
    margin: -0.5rem 0;
  }

  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 25%;
    background-color: #e8e8e8;
    margin: -0.5rem 0;
  }
}

.list-dotted {
  --color-list: #ff4500;

  list-style: none;
  padding: 0;
  margin: 0;

  p {
    margin: 0;
  }

  & li {
    position: relative;
    padding: 0.3rem 2rem;
    margin: 0.3rem 0.6rem;
    font-size: 1rem;
    color: #0f2a45;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dashed var(--color-list);
  }

  & li i {
    color: var(--color-list);
    font-size: 1.2rem;
    margin-right: 0.5em;
    position: absolute;
    left: 0;
    top: 0.1em;
  }
}

.content {
  background-color: var(--AliceBlue);
}

.header {
  background-color: var(--White);
}

.page {
  background-color: var(--White);
  .header {
    background-color: #009999;
  }
}

.page-content,
.footer {
  background-color: rgb(31 93 154);
  .content {
    background-color: var(--White);
    box-shadow: 0px -1px 2px #eee, 0px 1px 2px #eee, 0px -2px 2px #e9e9e9,
      0px 2px 2px #e9e9e9, 0px -3px 2px #ccc, 0px 3px 2px #ccc,
      0px -4px 2px #c9c9c9, 0px 4px 2px #c9c9c9, 0px -5px 2px #bbb,
      0px 5px 2px #bbb, 0px -6px 2px #b9b9b9, 0px 6px 2px #b9b9b9,
      0px -7px 2px #999, 0px 7px 2px #999, 0px -7px 2px rgba(0, 0, 0, 0.5),
      0px 7px 2px rgba(0, 0, 0, 0.5), 0px -7px 2px rgba(0, 0, 0, 0.1),
      0px 7px 2px rgba(0, 0, 0, 0.1), 0px -7px 2px rgba(0, 0, 0, 0.73),
      0px 7px 2px rgba(0, 0, 0, 0.73), 0px -3px 5px rgba(0, 0, 0, 0.3),
      0px 3px 5px rgba(0, 0, 0, 0.3), 0px -5px 10px rgba(0, 0, 0, 0.37),
      0px 5px 10px rgba(0, 0, 0, 0.37), 0px -10px 10px rgba(0, 0, 0, 0.1),
      0px 10px 10px rgba(0, 0, 0, 0.1), 0px -20px 20px rgba(0, 0, 0, 0.1),
      0px 20px 20px rgba(0, 0, 0, 0.1);
  }
}

/** Titulo Principal: Uno por pagina */
.title-main {
  border-bottom: 3px solid var(--Platinum);
  font-size: 32px;
  padding-bottom: 0.8rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 0.9rem;
  .bi-info-square-fill::before {
    border-radius: 0.4rem;
    background-color: var(--Back);
    color: var(--PhilippineYellow);
  }
  .number-square {
    max-width: 2rem;
    width: 2rem;
    max-height: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.4rem;
    background-color: var(--PhilippineYellow);
    color: var(--Back);
    font-size: 1.4rem;
    font-style: normal;
  }
}

/** Sub-titulos: Secciones (varios por pagina) */

/** Lista punteada */
.list-dotted {
  --color-list: #ff4500;
  list-style: none;
  padding: 0;
  margin: 0;
  & li {
    position: relative;
    padding: 0.3rem 2rem;
    margin: 0.3rem 0.6rem;
    font-size: 1rem;
    color: #0f2a45;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px dashed var(--color-list);
  }

  & li i {
    color: var(--color-list);
    font-size: 1.2rem;
    margin-right: 0.5em;
    position: absolute;
    left: 0;
    top: 0.4rem;
  }
}

h3 {
  display: flex;
  font-size: 1.25em;
  line-height: 1.2;
  flex-direction: column;
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 1.4rem;

  span {
    white-space: nowrap;
  }

  &::before {
    content: "";
    display: block;
    width: 4px;
    background-color: #ffca00;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 2px;
  }
}

/** Encabezado de la imagen */
.figure {
  .figure-title {
    display: flex;
    font-size: 1rem;
    line-height: 1.2;
    flex-direction: column;
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 1.4rem;

    p {
      margin: 0;
    }

    &::before {
      content: "";
      display: block;
      width: 4px;
      background-color: #ffca00;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      border-radius: 2px;
    }
  }

  .figure-footer {
    background-color: var(--Platinum);
    padding: 0.6rem 1.2rem;
  }
}

.content-list {
  .link-item {
    font-size: 1em;
    font-weight: 400;
    text-decoration: none;
    color: var(--YankeesBlue);
    transition: all 0.15s ease-in-out;
    -webkit-text-decoration-skip: objects;
  }
  .link-item:hover {
    background-color: var(--AliceBlue);
    font-weight: 600;
    transition: all 0.15s ease-in-out;
    -webkit-text-decoration-skip: objects;
    border-radius: 0.25rem;
  }
  .btn-numeration {
    background: var(--AliceBlue);
  }
}

/** Separador (sombra):
 *  Agrega la etiqueta <div class="separador"></div> al final de cada etiqueta <section> que contenga la seccion de contenido
 */
.separador {
  height: 20px;
  overflow: hidden;
  position: relative;
  margin: 5rem 0 1.5rem 0;

  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    background-color: #ccc;
    width: 40%;
    height: 15px;
    filter: blur(5px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}

/** Footer */
footer {
  /* Existing styles */
  flex-shrink: 0; /* Prevent footer from shrinking */

  /* Existing styles */
  position: fixed;
  bottom: 0;
  width: -webkit-fill-available;
  z-index: 2;
}
.footer-navbar {
  background: #009999;
  box-shadow: 0px -1px 2px #eee, 0px -2px 2px #e9e9e9, 0px -3px 2px #ccc,
    0px -4px 2px #c9c9c9, 0px -5px 2px #bbb, 0px -6px 2px #b9b9b9,
    0px -7px 2px #999, 0px -7px 2px rgba(0, 0, 0, 0.5),
    0px -7px 2px rgba(0, 0, 0, 0.1), 0px -7px 2px rgba(0, 0, 0, 0.73),
    0px -3px 5px rgba(0, 0, 0, 0.3), 0px -5px 10px rgba(0, 0, 0, 0.37),
    0px -10px 10px rgba(0, 0, 0, 0.1), 0px -20px 20px rgba(0, 0, 0, 0.1);
}

.footer-pre {
  background-color: var(--AliceBlue);

  h5 {
    color: var(--YankeesBlue);
    font-size: 1em;
  }
}
.footer-main {
  background-color: var(--AzureishWhite);
  color: var(--Rhythm);
  font-size: 12.8px;
}

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

/* Ocultar el menú estático en pantallas grandes */
.site-menu {
  display: none;
}

/* imagen listado */
.lista-ul-icono li {
  position: relative;
  padding-left: 20px;
  /* Espacio para el icono */
}

.lista-ul-icono li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  /* Ajuste vertical */
  width: 8px;
  height: 8px;
  background-image: url("../images/svg/decorador-ul.a1e14f58.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/* copiar codigo */

.code-block {
  background: #282c34;
  color: #ffffff;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;
  position: relative;
}

pre[class*="language-"] {
  border-radius: 5px;
}

/* bordes tablas */

.table-bordered {
  border: 2px solid rgb(255, 123, 0);
  /* Cambia 'red' por el color que desees */
}

.table-bordered th,
.table-bordered td {
  border: 2px solid rgb(255, 106, 0);
  /* Cambia 'red' por el color que desees */
}

table thead .bgh {
  border-color: #d8ecff;
  background: #ffca00;
}

/* Cards circulo */

.container__card-type-1 {
  .card-type-1 {
    position: relative;
    width: 100%;
    border-radius: 5px;
    border: none;

    .card-type-1__title {
      font-size: 20px;
      margin-bottom: 6px;
      padding-top: 90px;
    }
    .card-type-1__sub-title {
      color: #d3a34b;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .card-type-1__info {
      padding: 1rem 0.5rem 0.5rem 0.5rem;
      background: #f1f1f1;
      border-radius: 0.6rem;
    }

    .card-type-1__paragraph {
      line-height: 1.6rem;
      padding: 0.8rem;
    }

    .card-type-1__image {
      height: 150px;
      width: 150px;
      border: 8px solid transparent;
      position: relative;
      left: 50%;
      top: 56px;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }

    .card-type-1__border {
      height: 160px;
      width: 160px;
      border: 8px solid #198754;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      object-fit: cover;
      border-radius: 50%;
      padding: 1rem;
      background: white;
    }

    &:hover .card-type-1__info {
      background-color: #198754;
      color: white;
      border-radius: 0.4rem;
    }

    &:hover .card-type-1__info {
      background-color: #198754;
      color: white;
      border-radius: 0.4rem;
    }
  }

  .mt-80 {
    margin-top: 8rem;
  }
}

/** Cards: listing */
.card-listing {
  .card {
    border: none;
    border-radius: 10px;
  }

  .c-details span {
    font-weight: 300;
    font-size: 13px;
  }

  .icon {
    width: 50px;
    height: 50px;
    background-color: #eee;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 39px;
  }

  .badge span {
    background-color: #fffbec;
    width: 60px;
    height: 25px;
    padding-bottom: 3px;
    border-radius: 5px;
    display: flex;
    color: #fed85d;
    justify-content: center;
    align-items: center;
  }

  .progress {
    height: 10px;
    border-radius: 10px;
  }

  .progress div {
    background-color: red;
  }

  .text1 {
    font-size: 14px;
    font-weight: 600;
  }

  .text2 {
    color: #a5aec0;
  }
}

/** Hoja de estilos exclusiva para las carts 'card-type-2' */
.container__card-type-2 {
  .card-type-2 {
    position: relative;
    width: 100%;
    border-radius: 5px;
    border: none;

    .card-type-2__title {
      font-size: 20px;
      margin-bottom: 6px;
      padding-top: 90px;
    }
    .card-type-2__sub-title {
      color: #d3a34b;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .card-type-2__info {
      padding: 1rem 0.5rem 0.5rem 0.5rem;
      background: #f1f1f1;
      border-radius: 0.6rem;
    }

    .card-type-2__paragraph {
      line-height: 1.6rem;
      padding: 0.8rem;
    }

    .card-type-2__image {
      height: 150px;
      width: 150px;
      border: 8px solid transparent;
      position: relative;
      left: 50%;
      top: 56px;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }

    .card-type-2__border {
      height: 160px;
      width: 160px;
      border: 8px solid #198754;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      object-fit: cover;
      border-radius: 50%;
      padding: 1rem;
      background: white;
    }

    &:hover .card-type-2__info {
      background-color: #198754;
      color: white;
      border-radius: 0.4rem;
    }

    &:hover .card-type-2__info {
      background-color: #198754;
      color: white;
      border-radius: 0.4rem;
    }
  }

  .mt-80 {
    margin-top: 8rem;
  }
}

/** Tabs: Carousel */
#carousel-tab {
  p {
    color: #999999;
    font-weight: 300;
  }

  .content {
    padding: 7rem 0;
  }

  h2 {
    font-size: 20px;
  }

  .carousel-nav {
    width: 100%;
    border-bottom: 0.1rem solid var(--Salem);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
  }

  .carousel-nav a {
    color: #999;
    padding: 10px 20px;
    text-align: center;
    display: inline-block;
    position: relative;
    font-size: 16px;
    font-weight: 500;
  }
  .carousel-nav a:hover {
    color: #000;
  }
  .carousel-nav a.active {
    color: #000;
  }
  .carousel-nav a.active:before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    border-bottom: 0.2rem solid var(--Salem);
  }

  .owl-1 .owl-nav {
    width: 100%;
    position: absolute;
    top: 50%;
    /* display: flex; */
    display: none;
    justify-content: space-between;
  }
  .owl-1 .owl-nav .owl-next,
  .owl-1 .owl-nav .owl-prev {
    z-index: 92;
    top: 50%;
  }
  .owl-1 .owl-nav .owl-next:active,
  .owl-1 .owl-nav .owl-next:focus,
  .owl-1 .owl-nav .owl-prev:active,
  .owl-1 .owl-nav .owl-prev:focus {
    outline: none;
  }
  .owl-1 .owl-nav .owl-next span,
  .owl-1 .owl-nav .owl-prev span {
    color: var(--Salem);
    font-size: 2rem;
    border: 1px solid var(--Salem);
    border-radius: 0.5rem;
    display: flex;
    width: 3rem;
    height: 3rem;
    justify-content: center;
    align-items: center;
    background-color: var(--SilverSand);
  }
  .owl-1 .owl-nav .owl-next span:before,
  .owl-1 .owl-nav .owl-prev span:before {
    font-size: 40px !important;
  }
  .owl-1 .owl-nav .owl-next {
    right: 20px;
  }
  .owl-1 .owl-nav .owl-prev {
    left: 20px;
  }

  .owl-1 .owl-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
  }
  .owl-1 .owl-dots .owl-dot {
    background: none;
    /* display: inline-block; */
    display: none;
  }
  .owl-1 .owl-dots .owl-dot > span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--SilverSand);
    margin: 4px;
    border: 0.125rem solid var(--Salem);
  }
  .owl-1 .owl-dots .owl-dot.active > span {
    background: white;
  }
  .owl-1 .owl-dots .owl-dot:active,
  .owl-1 .owl-dots .owl-dot:focus {
    outline: none;
  }

  .media-29101 {
    display: flex;
    align-items: center;
  }

  .media-29101 .img {
    flex: 0 0 50%;
    overflow: hidden;
  }
  .media-29101 .img img {
    width: 100%;
    height: auto;
  }

  .media-29101 .text {
    padding: 50px;
    flex: 0 0 50%;
  }
  @media (max-width: 991.98px) {
    .media-29101 .text {
      padding: 20px;
      width: 100%;
    }
  }
  .media-29101 .text .category {
    color: #adb5bd;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.2rem;
  }
  .media-29101 .text h2 {
    font-family: "Playfair Display", times, serif;
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 30px;
  }
  .media-29101 .text h2 a {
    color: #000;
  }
}

/* animation  M-B */

.firstCont {
  opacity: 0;
  animation: slideIn 0.6s ease forwards;
}

.contions {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.container-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Clase para la animación */
.animate-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.animate-btn.clicked {
  transform: translateY(4px);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

/* Carrousel multiple */
#carouselExampleControls {
  .carousel-inner {
    padding: 1em;
  }
  .card {
    margin: 0 0.5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
  }
  .carousel-control-prev,
  .carousel-control-next {
    background-color: #e1e1e1;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
  }
  @media (min-width: 768px) {
    .carousel-item {
      margin-right: 0;
      flex: 0 0 50%;
      display: block;
    }
    .carousel-inner {
      display: flex;
    }
  }
  @media (min-width: 992px) {
    .carousel-item {
      flex: 0 0 33.333333%;
    }
  }

  .card .img-wrapper {
    max-width: 100%;
    height: 13em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card img {
    max-height: 100%;
  }
  @media (max-width: 767px) {
    .card .img-wrapper {
      height: 17em;
    }
  }
}

/* Carousel testimonials */
.carousel-type-2 {
  .heading-level-4 {
    color: var(--Salem);
    font-size: 1.8rem;
  }

  .border-primary {
    --bs-border-opacity: 1;
    border-left: 2px solid var(--Salem) !important;
  }

  button.text-primary {
    color: var(--Salem) !important;
    font-weight: bold;
    border: 1px solid var(--Salem) !important;
  }

  em,
  .text-primary {
    color: var(--Salem);
  }

  .avatar {
    object-fit: cover;
  }

  /* Controls */
  .carousel-control-next {
    margin: 0 3em;
  }

  i.bi.bi-chevron-right,
  i.bi.bi-chevron-left {
    background: none;
    border: 2px solid var(--Salem);
    color: var(--Salem);
    padding: 10px;
    border-radius: 100%;
    transition: background 0.6s ease;
    width: 3rem !important;
    display: flex;
  }

  i.bi.bi-chevron-right:hover,
  i.bi.bi-chevron-left:hover {
    background: var(--Salem);
    color: white;
  }

  .bi-quote::before {
    font-size: 3.6rem;
    color: var(--Salem);
  }

  /* Indicators */
  .carousel-indicators {
    justify-content: flex-start;
    transform: translate(-40px, 50px);
  }

  .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: 2px solid var(--Salem);
  }

  .carousel-indicators .active {
    opacity: 1;
    background-color: var(--Salem);
  }

  /* Control buttons */
  .control-btn {
    position: absolute;
    top: 8px;
    right: 10em;
  }

  .carousel-control-next,
  .carousel-control-prev {
    top: 1em;
    left: 3em;
  }

  .testimonial-text {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 20px;
  }

  .wow {
    position: relative;
    grid-column: span 2;
  }

  .carousel-landmark {
    grid-column: span 3;
  }

  @media screen and (max-width: 992px) {
    .testimonial-text {
      margin-top: 50px;
      row-gap: 50px;
    }

    .wow {
      grid-column: span 5;
    }

    .carousel-landmark {
      grid-column: span 5;
    }
  }
}

/* =======tabla responsive */

.table-responsive-stack tr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.table-responsive-stack td,
.table-responsive-stack th {
  display: block;
  /*      
   flex-grow | flex-shrink | flex-basis   */
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.table-responsive-stack .table-responsive-stack-thead {
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .table-responsive-stack tr {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    border-bottom: 3px solid #ccc;
    display: block;
  }
  /*  IE9 FIX   */
  .table-responsive-stack td {
    float: left\9;
    width: 100%;
  }
}