@charset "UTF-8";
/** Mobile-first (min-width). Styles apply AT AND ABOVE breakpoint.
 * @include breakpoint('md') - Applies to medium devices and larger
 * Breakpoint names: sm, md, lg, xl, xxl
 */
/** Desktop-first (max-width). Styles apply BELOW breakpoint
 * @include breakpoint-down('lg') - Styles apply to devices smaller large desktops
 * Breakpoint names: xs, sm, md, lg, xl
 */
/** Hide content at smaller screen sizes
 * Elements will be hidden until the specified breakpoint is reached.
 * 
 * @include hide-on('md') or .hide-md - Element is hidden on screens <768px
 *
 * Breakpoint names: sm, md, lg, xl, xxl
 */
/** Show content only at smaller screen sizes
 * Elements will be visible only below the specified breakpoint
 * 
 * @include show-only-on('md') or .show-md - Element visible only on screens <768px
 *
 * Breakpoint names: sm, md, lg, xl, xxl
 */
/** Show content only between two breakpoints
 * 
 * Elements will be visible only between the specified breakpoints.
 * Example: @include show-between('md', 'xl') 
 * Result: Element is visible only on screens between 768px and 1200px
 *
 * @param {String} $min-bp - Minimum breakpoint name (sm, md, lg, xl)
 * @param {String} $max-bp - Maximum breakpoint name (md, lg, xl, xxl)
 */
/*----------------------------------------------------
// UTILITY CLASSES FOR EACH BREAKPOINT
-----------------------------------------------------*/
@media (max-width: 47.99875em) {
  .hide-sm {
    display: none !important;
  }
}

.show-sm {
  display: none;
}
@media (max-width: 47.99875em) {
  .show-sm {
    display: block !important;
  }
}

.visible-sm-up {
  display: none;
}
@media (min-width: 36em) {
  .visible-sm-up {
    display: block !important;
  }
}

@media (min-width: 36em) {
  .visible-sm-down {
    display: none !important;
  }
}

@media (max-width: 61.99875em) {
  .hide-md {
    display: none !important;
  }
}

.show-md {
  display: none;
}
@media (max-width: 61.99875em) {
  .show-md {
    display: block !important;
  }
}

.visible-md-up {
  display: none;
}
@media (min-width: 48em) {
  .visible-md-up {
    display: block !important;
  }
}

@media (min-width: 48em) {
  .visible-md-down {
    display: none !important;
  }
}

@media (max-width: 74.99875em) {
  .hide-lg {
    display: none !important;
  }
}

.show-lg {
  display: none;
}
@media (max-width: 74.99875em) {
  .show-lg {
    display: block !important;
  }
}

.visible-lg-up {
  display: none;
}
@media (min-width: 62em) {
  .visible-lg-up {
    display: block !important;
  }
}

@media (min-width: 62em) {
  .visible-lg-down {
    display: none !important;
  }
}

@media (max-width: 87.49875em) {
  .hide-xl {
    display: none !important;
  }
}

.show-xl {
  display: none;
}
@media (max-width: 87.49875em) {
  .show-xl {
    display: block !important;
  }
}

.visible-xl-up {
  display: none;
}
@media (min-width: 75em) {
  .visible-xl-up {
    display: block !important;
  }
}

@media (min-width: 75em) {
  .visible-xl-down {
    display: none !important;
  }
}

@media (max-width: ) {
  .hide-xxl {
    display: none !important;
  }
}

.show-xxl {
  display: none;
}
@media (max-width: ) {
  .show-xxl {
    display: block !important;
  }
}

.visible-xxl-up {
  display: none;
}
@media (min-width: 87.5em) {
  .visible-xxl-up {
    display: block !important;
  }
}

@media (min-width: 87.5em) {
  .visible-xxl-down {
    display: none !important;
  }
}

.visible-sm-sm {
  display: none;
}
@media (min-width: 36em) and (max-width: 47.99875em) {
  .visible-sm-sm {
    display: block !important;
  }
}

.visible-sm-md {
  display: none;
}
@media (min-width: 36em) and (max-width: 61.99875em) {
  .visible-sm-md {
    display: block !important;
  }
}

.visible-sm-lg {
  display: none;
}
@media (min-width: 36em) and (max-width: 74.99875em) {
  .visible-sm-lg {
    display: block !important;
  }
}

.visible-sm-xl {
  display: none;
}
@media (min-width: 36em) and (max-width: 87.49875em) {
  .visible-sm-xl {
    display: block !important;
  }
}

.visible-md-md {
  display: none;
}
@media (min-width: 48em) and (max-width: 61.99875em) {
  .visible-md-md {
    display: block !important;
  }
}

.visible-md-lg {
  display: none;
}
@media (min-width: 48em) and (max-width: 74.99875em) {
  .visible-md-lg {
    display: block !important;
  }
}

.visible-md-xl {
  display: none;
}
@media (min-width: 48em) and (max-width: 87.49875em) {
  .visible-md-xl {
    display: block !important;
  }
}

.visible-lg-lg {
  display: none;
}
@media (min-width: 62em) and (max-width: 74.99875em) {
  .visible-lg-lg {
    display: block !important;
  }
}

.visible-lg-xl {
  display: none;
}
@media (min-width: 62em) and (max-width: 87.49875em) {
  .visible-lg-xl {
    display: block !important;
  }
}

.visible-xl-xl {
  display: none;
}
@media (min-width: 75em) and (max-width: 87.49875em) {
  .visible-xl-xl {
    display: block !important;
  }
}

/* Font */
.font-fingerpaint {
  font-family: "Finger Paint";
}

/* ----- Buttons ----- */
/* ----- Images ----- */
/* ------- Width --------- */
html, body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  position: relative;
  min-height: 100%;
  width: 100%;
  background-color: #DEE3E6;
  color: #444;
  margin: 0;
  padding: 0;
}

h1, .h1 {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.3;
}

h2, .h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
}

h3, .h3 {
  font-weight: 500;
}

h4, .h4, h5, .h5 {
  font-weight: 400;
}

h6, .h6 {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0;
}

p, ul, ol, pre, table, blockquote {
  margin-top: 0;
  margin-bottom: 0.5625rem;
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

/* Article styling
   Unified article styling for better readability and consistent presentation
   Combines .width-article, .article, article, and .article-text classes */
.width-article {
  max-width: 37.5rem;
  width: 35rem;
}

.article, article, .article-text {
  font-size: 1rem;
  font-family: "Roboto Slab", "Roboto", sans-serif;
  max-width: 70ch;
  padding: 0 1rem;
}
@media (min-width: 768px) {
  .article, article, .article-text {
    font-size: 1.0625rem;
  }
}
@media (min-width: 1200px) {
  .article, article, .article-text {
    font-size: 1.125rem;
  }
}
.article h1, .article .h1, .article h2, .article .h2, .article h3, .article .h3, .article h4, .article .h4, article h1, article .h1, article h2, article .h2, article h3, article .h3, article h4, article .h4, .article-text h1, .article-text .h1, .article-text h2, .article-text .h2, .article-text h3, .article-text .h3, .article-text h4, .article-text .h4 {
  font-family: "Roboto Slab", "Roboto", sans-serif;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0;
  color: #444;
}
.article h1, .article .h1, article h1, article .h1, .article-text h1, .article-text .h1 {
  font-size: 2.125rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
}
.article h1:first-of-type, .article .h1:first-of-type, article h1:first-of-type, article .h1:first-of-type, .article-text h1:first-of-type, .article-text .h1:first-of-type {
  margin-bottom: 1.75rem;
}
.article h2, .article .h2, article h2, article .h2, .article-text h2, .article-text .h2 {
  font-weight: 700;
  margin: 3rem 0 1rem 0;
  padding: 0 0 0.5rem 0;
  border-bottom: 2px solid #999;
}
.article h3, .article .h3, article h3, article .h3, .article-text h3, .article-text .h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}
.article h4, .article .h4, .article h5, .article .h5, article h4, article .h4, article h5, article .h5, .article-text h4, .article-text .h4, .article-text h5, .article-text .h5 {
  margin-top: 1.75rem;
  margin-bottom: 0.625rem;
}
.article h6, .article .h6, article h6, article .h6, .article-text h6, .article-text .h6 {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
}
.article p, .article li, article p, article li, .article-text p, .article-text li {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  margin-top: 0;
  -webkit-hyphens: auto;
          hyphens: auto;
  word-wrap: break-word;
}
.article p, .article ul, .article ol, .article pre, .article table, .article blockquote, article p, article ul, article ol, article pre, article table, article blockquote, .article-text p, .article-text ul, .article-text ol, .article-text pre, .article-text table, .article-text blockquote {
  margin-bottom: 1.5rem;
}
.article ul, .article ol, article ul, article ol, .article-text ul, .article-text ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
}
.article ul ul, .article ul ol, .article ol ul, .article ol ol, article ul ul, article ul ol, article ol ul, article ol ol, .article-text ul ul, .article-text ul ol, .article-text ol ul, .article-text ol ol {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.article p:last-child, .article ul:last-child, .article ol:last-child, .article pre:last-child, .article table:last-child, .article blockquote:last-child, article p:last-child, article ul:last-child, article ol:last-child, article pre:last-child, article table:last-child, article blockquote:last-child, .article-text p:last-child, .article-text ul:last-child, .article-text ol:last-child, .article-text pre:last-child, .article-text table:last-child, .article-text blockquote:last-child {
  margin-bottom: 0;
}
.article b, .article strong, article b, article strong, .article-text b, .article-text strong {
  color: #222;
}
.article hr, .article .hr, article hr, article .hr, .article-text hr, .article-text .hr {
  display: none;
}
.article a, .article b, .article i, .article strong, .article em, .article small, .article code, article a, article b, article i, article strong, article em, article small, article code, .article-text a, .article-text b, .article-text i, .article-text strong, .article-text em, .article-text small, .article-text code {
  line-height: inherit;
}
.article sub, .article sup, article sub, article sup, .article-text sub, .article-text sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
}
.article sup, article sup, .article-text sup {
  top: -0.5em;
}
.article sub, article sub, .article-text sub {
  bottom: -0.25em;
}
.article blockquote, article blockquote, .article-text blockquote {
  padding-left: 1rem;
  border-left: 3px solid #8a9bb9;
  margin-left: 0.5rem;
}
.article pre, article pre, .article-text pre {
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
}
.article table, article table, .article-text table {
  width: 100%;
  border-collapse: collapse;
}
.article table th, .article table td, article table th, article table td, .article-text table th, .article-text table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}
.article table th, article table th, .article-text table th {
  font-weight: 600;
  border-bottom-width: 2px;
  background-color: rgba(138, 155, 185, 0.05);
}
.article table tr:nth-child(even), article table tr:nth-child(even), .article-text table tr:nth-child(even) {
  background-color: rgba(138, 155, 185, 0.02);
}
@media (max-width: 768px) {
  .article table, article table, .article-text table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/*------------------------------
Alginment helpers
-----------------------------*/
.align-baseline {
  vertical-align: baseline !important;
} /* Browser default*/
.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.aleft {
  text-align: left;
}

.acenter {
  text-align: center;
}

.aright {
  text-align: right;
}

.amiddle {
  vertical-align: middle !important;
}

/*--------------------------------------------------------------------------
// Genera 3 tipos de helpers
// "color-troncal" 
// "bg-color-troncal"
// "border-troncal"
//
// Opciones: -active, blue, success, danger, notice, whiteboard, fakeglass, link...
// Más en "abstracts"
//--------------------------------------------------------------------------*/
.color-primary {
  color: rgb(13, 110, 253);
}

.bg-color-primary {
  background-color: rgb(13, 110, 253);
}

.border-primary {
  border-color: rgb(13, 110, 253);
}

.color-active {
  color: #2ba6cb;
}

.bg-color-active {
  background-color: #2ba6cb;
}

.border-active {
  border-color: #2ba6cb;
}

.color-secondary {
  color: #295BA4;
}

.bg-color-secondary {
  background-color: #295BA4;
}

.border-secondary {
  border-color: #295BA4;
}

.color-success {
  color: #64DA8F;
}

.bg-color-success {
  background-color: #64DA8F;
}

.border-success {
  border-color: #64DA8F;
}

.color-danger {
  color: #EA335F;
}

.bg-color-danger {
  background-color: #EA335F;
}

.border-danger {
  border-color: #EA335F;
}

.color-notice {
  color: #FF914D;
}

.bg-color-notice {
  background-color: #FF914D;
}

.border-notice {
  border-color: #FF914D;
}

.color-warning {
  color: #FF914D;
}

.bg-color-warning {
  background-color: #FF914D;
}

.border-warning {
  border-color: #FF914D;
}

.color-whiteboard {
  color: #DEE3E6;
}

.bg-color-whiteboard {
  background-color: #DEE3E6;
}

.border-whiteboard {
  border-color: #DEE3E6;
}

.color-fakeglass {
  color: #F1F2F4;
}

.bg-color-fakeglass {
  background-color: #F1F2F4;
}

.border-fakeglass {
  border-color: #F1F2F4;
}

.color-button {
  color: rgb(13, 110, 253);
}

.bg-color-button {
  background-color: rgb(13, 110, 253);
}

.border-button {
  border-color: rgb(13, 110, 253);
}

.color-button-hover {
  color: #295BA4;
}

.bg-color-button-hover {
  background-color: #295BA4;
}

.border-button-hover {
  border-color: #295BA4;
}

/*--------------------------------------------------------------------------
//Para los tres colores de certificación (troncal, homologada, profesional):
//  * 3 clases de color de texto (.color-troncal, .color-homologada, .color-profesional)
//  * 3 clases de color de fondo (.bg-troncal, etc.)
//  * 3 clases de color de borde (.border-troncal, etc.)
//  * 3 clases de botón (.btn-troncal, etc.) con sus estados hover
//--------------------------------------------------------------------------*/
.color-troncal {
  color: #FE5200;
}

.bg-color-troncal {
  background-color: #FE5200;
}

.border-troncal {
  border-color: #FE5200;
}

.btn-troncal {
  background-color: #FE5200;
  color: #fff;
}
.btn-troncal:hover {
  background-color: #FE5200;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  background-blend-mode: hard-light;
}

.color-homologada {
  color: #333333;
}

.bg-color-homologada {
  background-color: #333333;
}

.border-homologada {
  border-color: #333333;
}

.btn-homologada {
  background-color: #333333;
  color: #fff;
}
.btn-homologada:hover {
  background-color: #333333;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  background-blend-mode: hard-light;
}

.color-profesional {
  color: #007AE1;
}

.bg-color-profesional {
  background-color: #007AE1;
}

.border-profesional {
  border-color: #007AE1;
}

.btn-profesional {
  background-color: #007AE1;
  color: #fff;
}
.btn-profesional:hover {
  background-color: #007AE1;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  background-blend-mode: hard-light;
}

.color-logo-darker {
  color: #526283;
}
.color-logo-brighter {
  color: #8a9bb9;
}

.bg-logo-darker {
  background-color: #526283;
}
.bg-logo-brighter {
  background-color: #8a9bb9;
}

/*Glass effect*/
.background-glass {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0.1rem 0.2rem #dbdbdb;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.bg-fakeglass {
  background-color: #F1F2F4;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.background-transparent {
  background-color: transparent;
}

img.img-shadow {
  box-shadow: 0px 2px rgba(0, 0, 0, 0.1);
}

.animate-underline {
  position: relative;
  text-decoration: none;
}
.animate-underline::after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
.animate-underline:hover::after, .animate-underline:focus::after {
  width: 100%;
}

/* Make full element clickable if it contains a direct link inside it */
.clickable {
  position: relative;
  cursor: pointer;
}
.clickable > a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.italic {
  font-style: italic !important;
}

.bold {
  font-weight: bold;
}

.lowercase {
  text-transform: lowercase !important;
}

.line-through {
  text-decoration: line-through !important;
}

.underline {
  text-decoration: underline !important;
}

.text-shadow { /*x-offset, y-offset, blur-radius- color*/
  text-shadow: 0 0.01em 0.2rem gray;
}

.limit-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-family-numerical {
  font-family: "PT Mono" !important;
}

.font-weight-semibold {
  font-weight: 500 !important;
}

.font-weight-bold {
  font-weight: 600 !important;
}

.font-weight-normal {
  font-weight: normal !important;
}

.font-size-nano {
  font-size: 0.625rem !important;
}

.font-size-tiny {
  font-size: 0.875rem !important;
}

.font-size-small {
  font-size: 1rem !important;
}

.font-size-medium {
  font-size: 1.125rem !important;
}

.font-size-large {
  font-size: 1.75rem !important;
}

.font-size-huge {
  font-size: 2.125rem !important;
}

.font-contrast-highest {
  color: #000 !important;
}

.font-contrast-high {
  color: #222 !important;
}

.font-contrast-medium {
  color: #444 !important;
}

.font-contrast-low {
  color: #999 !important;
}

.font-contrast-lowest {
  color: #bcbcbc !important;
}

.font-color-link {
  color: rgb(13, 110, 253) !important;
}

.font-color-active-link {
  color: #295BA4 !important;
}

.font-color-primary {
  color: rgb(13, 110, 253) !important;
}

.font-color-success {
  color: #64DA8F !important;
}

.font-color-danger {
  color: #EA335F !important;
}

/*------------------------------
Margin helpers
----------------------------*/
.mh4 {
  margin: 0 0.25rem;
}

.mb0 {
  margin-bottom: 0px;
}

.mb8 {
  margin-bottom: 0.5rem;
}

.mb16 {
  margin-bottom: 1rem;
}

.mt4 {
  margin-top: 0.25rem;
}

.mt8 {
  margin-top: 0.5rem;
}

.mt32 {
  margin-top: 2rem;
}

.nomargin {
  margin: 0 !important;
}

/*-----------------
Padding helpers
------------------*/
.p100 {
  width: 100%;
}

.p75 {
  width: 75%;
}

.p50 {
  width: 50%;
}

.p33 {
  width: 33.3333333%;
}

.p25 {
  width: 25%;
}

.p20 {
  width: 20%;
}

.p12 {
  width: 12%;
}

.p10 {
  width: 10%;
}

.pd8 {
  padding: 0.5rem;
}

.pd16 {
  padding: 1rem;
}

.pd32 {
  padding: 2rem;
}

.pdh16 {
  padding: 0 1rem;
}

/*----------------------------------------------
Social Media icons around avatars
-----------------------------------------------*/
.image, .avatar {
  background-color: #fff;
  background: url(../img/bg-scrum.png) center center no-repeat #f0f0f0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  overflow: hidden;
}
.image img, .avatar img {
  width: 100%;
}
.image-lg, .avatar-lg {
  width: 9rem;
  height: 9rem;
}
.image-menu, .avatar-menu {
  background-color: #fff;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  border: solid 1px #526183;
  margin-top: 8px;
  cursor: pointer;
}
.image-menu img, .avatar-menu img {
  width: 100%;
}

img.avatar-icon {
  height: 1.5rem;
  width: 1.5rem;
}

.image-group, .avatar-group, .avatar-container {
  position: relative;
}
.image-group .btn-twitter, .image-group .circle-twitter, .image-group .corner-bl, .avatar-group .btn-twitter, .avatar-group .circle-twitter, .avatar-group .corner-bl, .avatar-container .btn-twitter, .avatar-container .circle-twitter, .avatar-container .corner-bl {
  position: absolute;
  left: 0;
  bottom: 0;
}
.image-group .btn-linkedin, .image-group .circle-linkedin, .image-group .corner-br, .avatar-group .btn-linkedin, .avatar-group .circle-linkedin, .avatar-group .corner-br, .avatar-container .btn-linkedin, .avatar-container .circle-linkedin, .avatar-container .corner-br {
  position: absolute;
  right: 0;
  bottom: 0;
}
.image-group .btn-facebook, .image-group .circle-facebook, .image-group .corner-tl, .avatar-group .btn-facebook, .avatar-group .circle-facebook, .avatar-group .corner-tl, .avatar-container .btn-facebook, .avatar-container .circle-facebook, .avatar-container .corner-tl {
  position: absolute;
  left: 0;
  top: 0;
}
.image-group .btn-instagram, .image-group .circle-instagram, .image-group .corner-tr, .avatar-group .btn-instagram, .avatar-group .circle-instagram, .avatar-group .corner-tr, .avatar-container .btn-instagram, .avatar-container .circle-instagram, .avatar-container .corner-tr {
  position: absolute;
  right: 0;
  top: 0;
}

.badge {
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.35em 0.65em;
  text-transform: uppercase;
  font-size: 0.75em;
  border-radius: 0.25rem;
}
.badge-primary {
  background-color: rgb(13, 110, 253);
  color: #fff;
}
.badge-secondary {
  background-color: #8a9bb9;
  color: #fff;
}
.badge-success {
  background-color: #64DA8F;
  color: #fff;
}
.badge-warning, .badge-notice {
  background-color: #FF914D;
  color: #222;
}
.badge-danger {
  background-color: #EA335F;
  color: #fff;
}
.badge-info {
  background-color: #2ba6cb;
  color: #fff;
}
.badge-light {
  background-color: #fafbfc;
  color: #444;
  border: 1px solid #8C9AB5;
}
.badge-dark {
  background-color: #3c4966;
  color: #fff;
}

.badge-troncal {
  background-color: #FE5200;
  color: #fff;
}

.badge-homologada {
  background-color: #333333;
  color: #fff;
}

.badge-profesional {
  background-color: #007AE1;
  color: #fff;
}

.badge-sm {
  font-size: 0.65em;
  padding: 0.25em 0.5em;
}

.badge-lg {
  font-size: 0.85em;
  padding: 0.4em 0.75em;
}

.badge-outline {
  background-color: transparent;
}
.badge-outline.badge-primary {
  color: rgb(13, 110, 253);
  border: 1px solid rgb(13, 110, 253);
}
.badge-outline.badge-secondary {
  color: #295BA4;
  border: 1px solid #295BA4;
}
.badge-outline.badge-success {
  color: #64DA8F;
  border: 1px solid #64DA8F;
}
.badge-outline.badge-danger {
  color: #EA335F;
  border: 1px solid #EA335F;
}
.badge-outline.badge-notice, .badge-outline.badge-warning {
  color: #FF914D;
  border: 1px solid #FF914D;
}
.badge-outline.badge-info {
  color: #2ba6cb;
  border: 1px solid #2ba6cb;
}
.badge-outline.badge-troncal {
  color: #FE5200;
  border: 1px solid #FE5200;
}
.badge-outline.badge-homologada {
  color: #333333;
  border: 1px solid #333333;
}
.badge-outline.badge-profesional {
  color: #007AE1;
  border: 1px solid #007AE1;
}

.badge-pill {
  border-radius: 50rem;
}

a.badge {
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
a.badge:hover {
  opacity: 0.85;
}

.expandable-badge-container {
  position: relative;
  display: inline-block;
  margin: 0.25rem;
}

.badge-expandable {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 0;
}
.badge-expandable .badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75em;
}
.badge-expandable .badge-text {
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-left: 0;
  padding-right: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.75em;
}
.badge-expandable.badge-sm {
  width: 1.5rem;
  height: 1.5rem;
}
.badge-expandable.badge-sm .badge-icon {
  min-width: 1.5rem;
  height: 1.5rem;
  font-size: 0.65em;
}
.badge-expandable.badge-sm .badge-text {
  font-size: 0.65em;
}
.badge-expandable.badge-lg {
  width: 2rem;
  height: 2rem;
}
.badge-expandable.badge-lg .badge-icon {
  min-width: 2rem;
  height: 2rem;
  font-size: 0.85em;
}
.badge-expandable.badge-lg .badge-text {
  font-size: 0.85em;
}

.expandable-badge-container:hover .badge-expandable {
  width: auto;
  border-radius: 50rem;
}
.expandable-badge-container:hover .badge-expandable .badge-text {
  max-width: 150px;
  opacity: 1;
  margin-left: 0.25rem;
}

.badge-expandable.badge-troncal {
  background-color: #FE5200;
  color: #fff;
}
.badge-expandable.badge-troncal.badge-outline {
  background-color: transparent;
  color: #FE5200;
  border: 1px solid #FE5200;
}

.badge-expandable.badge-homologada {
  background-color: #333333;
  color: #fff;
}
.badge-expandable.badge-homologada.badge-outline {
  background-color: transparent;
  color: #333333;
  border: 1px solid #333333;
}

.badge-expandable.badge-profesional {
  background-color: #007AE1;
  color: #fff;
}
.badge-expandable.badge-profesional.badge-outline {
  background-color: transparent;
  color: #007AE1;
  border: 1px solid #007AE1;
}

/*-----------------------------------------------------------------
    // BOXES AND BLOCKS WITH SPECIAL STYLES
    // Removing to instead use classes with more descriptive names
-------------------------------------------------------------------*/
.box {
  position: relative;
  padding: 1rem;
}

.box-area .inner {
  padding: 32px;
}

.code {
  background-color: #efefef;
  color: #0a0a0a;
  padding: 0.75em 1.75em;
  margin-bottom: 0.5em;
  border: 1px solid #cbcbcb;
  border-radius: 8px;
}

.cookies {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.9);
  max-width: 640px;
}

.box.cookies .inner {
  padding: 24px;
}

.cookies {
  font-size: 80%;
}

.cookies p {
  margin-bottom: 4px;
}

/*------------ Box list -------------*/
.box-list.centre-qa-ok:after,
.box-list.centre-qa-pending:after {
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  right: 0;
  top: 0;
  /*background:url(../img/corner-pro.png);*/
  border-top-right-radius: 4px;
}

.box-list.centre-qa-ok:after {
  background: url(../img/corner-qa-ok.png);
}

.box-list.centre-qa-pending:after {
  background: url(../img/corner-qa-pending.png);
}

/* Box-list for user-profile classes */
.box-list.reference-profile.user-pro:after {
  background: url(../img/corner-level.png);
}

.user-aut .image {
  border: solid 2px #00dca6;
}

.user-exp .image {
  border: solid 2px #0078da;
}

.user-tec .image {
  border: solid 2px #8a9bb9;
}

.user-checked {
  color: #0078da;
  font-size: 60%;
  position: relative;
  bottom: 4px;
}

.box-profile .profile-group {
  position: relative;
  padding-left: 176px;
  min-height: 144px;
}

.box-profile .profile-image {
  position: absolute;
  left: 0;
  top: 0;
}

/*------------ Dark box ----------------*/
.box-dark {
  margin-top: 5rem;
  padding: 2rem 3rem;
  border-radius: 5px;
  background: #295BA4;
}

.box-dark h1 {
  font-size: 1.125rem;
  color: #fff;
  font-weight: 600;
  margin: 5px 0 12px 0;
}

.box-dark * {
  color: #fff;
}

.box-dark label {
  font-size: 1rem;
  margin-left: 0;
  padding-left: 1rem;
}

.box-dark input[type=text],
.box-dark select {
  background-color: #8C9AB5;
  font-size: 1rem;
  padding-left: 1.3rem;
}

.box-dark input,
.box-dark select {
  border: 0;
}

.box-dark select {
  color: #fff;
  /*background-image:url(../img/select.svg); */
}

/* CARDS(BOXES) IN SEARCHERS */
.box-list-search {
  margin-bottom: 32px;
}

.box-list-search h1 {
  margin-bottom: 24px;
}

.center-profile .image,
.reference-profile .image {
  width: 192px;
  height: 82px;
  border-radius: 4px;
  background: none;
}

.box-profile.center-profile .profile-image,
.box-profile.reference-profile .profile-image {
  top: 32px;
}

.box-profile.center-profile .profile-group,
.box-profile.reference-profile .profile-group {
  padding-left: 224px;
}

.box-list { /*List of boxes. Eg.: Centers*/
  text-align: center;
  min-height: 368px;
  position: relative;
  margin-bottom: 32px;
  border-radius: 0.375rem;
  /* background-glass effect by default on these boxes */
  background-color: #F1F2F4;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.box-list .inner {
  padding: 32px 0;
}
.box-list h1 {
  font-size: 1.125rem;
  color: rgb(13, 110, 253);
  font-weight: 500;
  margin-bottom: 4px;
  line-height: 1.2;
  text-decoration: none;
}
.box-list a {
  text-decoration: none;
}
.box-list p {
  color: #999;
}
.box-list .stars-review {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-bottom: 0;
}
.box-list .stars-review a {
  color: #999;
}
.box-list .image-group {
  width: 96px;
  margin: 0 auto;
}

.box-list.reference-profile {
  min-height: 280px;
}

.box-list.center-profile .image-group,
.box-list.reference-profile .image-group {
  width: 142px;
}

.box-list .image {
  width: 96px;
  height: 96px;
}

.box-list.center-profile .image,
.box-list.reference-profile .image {
  width: 142px;
  height: 61px;
}

.btn, .button {
  border-radius: 5px;
  padding: 0.5rem 1rem;
  transform: none;
  scale: 1;
  transition: none;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}
.btn:hover, .button:hover {
  transform: none;
  scale: 1;
  transition: none;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}
.btn[disabled], .button[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}
.btn.btn-primary, .button.btn-primary {
  background-color: rgb(13, 110, 253);
  border: 1px rgb(13, 110, 253);
  color: #f1f0f0;
  padding: 0.5rem 1rem;
}
.btn.btn-primary:hover, .button.btn-primary:hover {
  border: 1px #295BA4;
  background: #295BA4;
  color: #fff;
  padding: 0.5rem 1rem;
  transform: none;
  scale: 1;
  transition: none;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}
.btn.btn-secondary, .button.btn-secondary {
  background-color: #8a9bb9;
  border: 1px #8a9bb9;
  color: #f1f0f0;
  padding: 0.5rem 1rem;
}
.btn.btn-secondary:hover, .button.btn-secondary:hover {
  border: 1px #404f6a;
  background: #53678a;
  color: #fff;
  padding: 0.5rem 1rem;
  transform: none;
  scale: 1;
  transition: none;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
}

.carousel-control-next,
.carousel-control-prev {
  filter: invert(100%);
  opacity: 0.2;
}
.carousel-control-next:hover,
.carousel-control-prev:hover {
  opacity: 0.7;
}

.button.light {
  background: #f0f0f0;
  color: #999;
}
.button.light span {
  color: #999;
}
.button.light.dropdown::after {
  border-color: #999 transparent transparent;
}

.button * {
  color: #fff;
}

.button.hollow * {
  color: #2ba6cb;
}

/*----------------------------------------------
// Anchor 
----------------------------------------------*/
a {
  color: rgb(13, 110, 253);
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
}
a .hover-unerline {
  position: relative;
  text-decoration: none;
}
a .hover-unerline::after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
a .hover-unerline:hover::after, a .hover-unerline:focus::after {
  width: 100%;
}
a:hover {
  color: #295BA4;
}
a[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ==========================================================================
    CALLOUTS AND NOTIFICATIONS
    ========================================================================== */
.callout {
  padding: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
  font-size: 0.875rem;
}
.callout-trigger {
  cursor: pointer;
  color: rgb(13, 110, 253);
  text-decoration: underline;
  display: inline-block;
  margin-left: 5px;
}
.callout-content {
  margin-top: 0.5rem;
}
.callout-info {
  border-left-color: rgb(13, 110, 253);
  background-color: #e7f1ff;
}
.callout-danger {
  border-left-color: #EA335F;
  background-color: #fdebef;
}
.callout-success {
  border-left-color: #64DA8F;
  background-color: #f0fbf4;
}
.callout-notice {
  border-left-color: #FF914D;
  background-color: #fff4ed;
}
.callout.secondary {
  background: #f0f0f0;
  font-size: 85%;
  color: #999;
  padding: 8px;
}

/* Espacio para el formulario 
.form-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1rem;
}
*/
/*     CARDS     */
.card {
  /*-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);*/
  /*height: 100%;*/
  /*--------------------
  Horizontal card variation
  ---------------------*/
}
.card.clickable {
  position: relative;
  cursor: pointer;
}
.card.clickable > a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.card.clickable:hover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  border-radius: inherit;
}
.card img.card-img-top.cover, .card img.card-img-top.contain {
  height: 8rem;
  -o-object-position: center;
     object-position: center;
}
.card img.card-img-top.cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.card img.card-img-top.contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.card .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card.inner, .card .inner {
  padding: 3rem;
}
.card a.pill {
  position: relative;
  z-index: 5;
}
.card.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  filter: grayscale(35%);
  background-color: #f8f8f8;
  border-color: #e9e9e9;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
  /* Prevent hover effects */
  /* Override any clickable behavior 
  a, a.card-link::before {
      display: none; /
  }*/
}
.card.disabled:hover {
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
  filter: grayscale(35%);
}
.card.card-horizontal {
  flex-direction: row;
}
.card.card-horizontal img.card-img-left {
  width: 9rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.card.card-horizontal img.card-img-left.contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.card.card-horizontal img.card-img-right {
  width: 9rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.card.card-horizontal img.card-img-right.contain {
  -o-object-fit: contain;
     object-fit: contain;
}

/*a .card:hover {
    opacity: 0.5;
}*/
.card-title {
  text-align: left;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
}

.card-description {
  text-align: left;
  line-height: 1.5;
}

.card-footer {
  border: 0;
  background: transparent;
  /* Navigation with dots in card's footer */
}
.card-footer .dotstyle {
  width: 100%;
  text-align: center;
}
.card-footer .dotstyle ul {
  position: relative;
  display: flex;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  cursor: default;
  overflow: hidden;
  justify-content: center;
}
.card-footer .dotstyle li {
  position: relative;
  display: block;
  margin: 0 6px;
  width: 12px;
  height: 12px;
  cursor: pointer;
}
.card-footer .dotstyle li a {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border-radius: 50%;
  background-color: var(--background-brightness-high);
  /*text-indent: -999em;*/
  cursor: pointer; /* make the text accessible to screen readers */
  position: absolute;
}
.card-footer .dotstyle-fillup li a {
  overflow: hidden;
  background-color: var(--background-brightness-medium);
  box-shadow: inset 0 0 0 1px rgb(255, 255, 255);
  transition: background-color 0.3s;
  opacity: 0.5;
}
.card-footer .dotstyle-fillup li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  width: 100%;
  background-color: var(--background-brightness-high);
  box-shadow: 0 0 1px #fff;
  transition: height 0.3s;
}
.card-footer .dotstyle-fillup li a:hover, .card-footer .dotstyle-fillup li a:focus {
  background-color: var(--background-color-primary);
  opacity: 1;
}

.card-error {
  background: url(../img/error.jpg) no-repeat bottom center;
  min-height: 600px;
  background-size: cover;
  margin-bottom: 32px;
}

.postit-card {
  padding: 0;
  background-color: #FFF6A9;
  height: auto;
  border: 0;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.postit-card .card-header {
  box-shadow: none;
  border-bottom: 0px;
  border: 0px;
  height: 50px;
  background-color: #F7EEA2;
}
.postit-card-blue {
  background: -moz-linear-gradient(-45deg, #80C4E6 81%, #80C4E6 82%, #80C4E6 82%, #B6E2FB 100%); /* FF3.6+ */
}

.card-resource {
  position: relative;
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  box-shadow: none;
  -mox-box-shadow: none;
  -webkit-box-shadow: none;
}
.card-resource > a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.card-resource:hover::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  border-radius: inherit;
}
.card-resource div.card-img-top {
  width: 160px;
  height: 160px;
  border: 0px solid #f3f3f3;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: 1.5rem;
  /* Center image*/
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-resource div.card-img-top img {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
}
.card-resource .card-body .card-title, .card-resource .card-body .card-subtitle, .card-resource .card-body .card-text {
  text-align: center;
}
.card-resource .card-body .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-resource .card-body .card-subtitle {
  color: #999;
  font-size: 0.875rem;
  margin: 0.2rem 0 0.4rem 0;
  overflow: hidden;
}
.card-resource .card-body .card-text {
  color: #212529;
  text-align: center;
  font-size: 1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-resource .badge {
  vertical-align: top;
  border-radius: 5px 0 5px 0;
  font-size: 0.75rem;
  padding: 8px;
}
.card-resource .card-link {
  font-size: 0.875rem;
}

/*--------------------------------------------------
// CTA OVERLAY 
// Appears on :hover if the card is disabled
----------------------------------------------------*/
.cta-overlay {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 5;
  border-radius: 5px;
}

/* On hover, make overlay visible and clickable */
.card.disabled:hover .cta-overlay, .card-resource.premium:hover .cta-overlay {
  opacity: 1;
  pointer-events: none;
}

/* Style the button inside the overlay */
.cta-overlay .btn {
  transform: scale(1);
  transition: transform 0.3s ease;
  z-index: 10;
  pointer-events: auto;
}

/*--------------------------------------------
// CARD CORNERS AND RIBBONS 
---------------------------------------------*/
.card-corner {
  position: relative;
  overflow: hidden;
}
.card-corner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 80px 80px 0;
  border-color: transparent rgb(13, 110, 253) transparent transparent;
  z-index: 1;
}
.card-corner.corner-tl::before {
  top: 0;
  left: 0;
  border-width: 80px 80px 0 0;
  border-color: rgb(13, 110, 253) transparent transparent transparent;
}
.card-corner.corner-br::before {
  top: auto;
  bottom: 0;
  right: 0;
  border-width: 0 0 80px 80px;
  border-color: transparent transparent rgb(13, 110, 253) transparent;
}
.card-corner.corner-bl::before {
  top: auto;
  left: 0;
  bottom: 0;
  right: auto;
  border-width: 80px 0 0 80px;
  border-color: transparent transparent transparent rgb(13, 110, 253);
}

.ribbon-corner {
  position: absolute;
  top: 15px;
  right: -35px;
  transform: rotate(45deg);
  width: 150px;
  background-color: rgb(13, 110, 253);
  color: white;
  text-align: center;
  padding: 5px;
  font-size: 14px;
  z-index: 2;
}

/* 
 * CKEditor (WYSIWYG) Styles
 * These styles target both the CKEditor UI and content area
*/
.ck-editor {
  margin-bottom: 1.5rem;
  font-family: "Roboto", sans-serif;
}

.ck.ck-editor__main .ck-content {
  min-height: 15.625rem !important;
}

form .radio-group, form .checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}
form .radio-group label, form .checkbox-group label {
  margin-bottom: 0;
}
form input[type=checkbox],
form input[type=radio] {
  margin-right: 0.625rem;
  accent-color: #8a9bb9;
  cursor: pointer;
}

.form-container {
  max-width: 70ch;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

label, .label {
  display: block;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

.required:after {
  content: "*";
  color: #e74c3c;
  margin-left: 0.25rem;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
input[type=search],
input[type=date],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=time],
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
textarea:focus {
  outline: none;
  border-color: #8a9bb9;
  box-shadow: 0 0 0 2px rgba(138, 155, 185, 0.2);
}
input[type=text]:disabled,
input[type=email]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
input[type=url]:disabled,
input[type=search]:disabled,
input[type=date]:disabled,
input[type=datetime-local]:disabled,
input[type=month]:disabled,
input[type=week]:disabled,
input[type=time]:disabled,
textarea:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23555' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}
select:focus {
  outline: none;
  border-color: #8a9bb9;
  box-shadow: 0 0 0 2px rgba(138, 155, 185, 0.2);
}
select:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 0.7;
}

textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 2.5rem;
  width: min(100% - 2.5rem, 75rem);
  margin-inline: auto;
}

.fb-wrapper {
  display: grid;
  grid-template-columns: 1fr min(100% - 2.5rem, 75rem) 1fr;
}
.fb-wrapper.-wide {
  grid-template-columns: 1fr min(100% - 3.75rem, 100rem) 1fr;
}
.fb-wrapper > * {
  grid-column: 2;
}
.fb-wrapper img.img-background {
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#okGamificationsSection {
  position: relative;
  color: #fff;
  background: rgba(230, 236, 239, 0.15) url(https://images.unsplash.com/photo-1553044707-316e5582268d?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: darken;
}
#okGamificationsSection::before {
  content: "";
  position: absolute;
  top: -1.25rem;
  left: -1.25rem;
  right: -1.25rem;
  bottom: -1.25rem;
  width: calc(100% + 2.5rem);
  height: calc(100% + 2.5rem);
  background: rgba(230, 236, 239, 0.15) url(https://images.unsplash.com/photo-1553044707-316e5582268d?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: darken;
  filter: blur(10px);
}
#okGamificationsSection > * {
  color: #fff;
  position: relative;
}
#okGamificationsSection .card-title {
  color: #444;
}

/*------ Logo icons ------*/
.logo-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}
.logo-icon::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url("https://www.scrummanager.com/website/img/logo/scrummanager_logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.logo-icon-white {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}
.logo-icon-white::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url("https://www.scrummanager.com/website/img/logo/scrummanager_logo_white.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

/*----- Custom icon font ------*/
@font-face {
  font-family: "scrum";
  src: url("../font/scrum.eot?28329862");
  src: url("../font/scrum.eot?28329862#iefix") format("embedded-opentype"), url("../font/scrum.woff2?28329862") format("woff2"), url("../font/scrum.woff?28329862") format("woff"), url("../font/scrum.ttf?28329862") format("truetype"), url("../font/scrum.svg?28329862#scrum") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-]:before,
[class*=" icon-"]:before {
  font-family: "scrum";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stars {
  margin: 0;
  padding: 0;
  display: inline-block;
}

.stars li {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.stars li.star {
  background: url(../img/star.svg);
}

.stars li.star-active {
  background: url(../img/star-active.svg);
}

.stars li.star-middle {
  background: url(../img/star-middle.svg);
}

.icon-check:before {
  content: "\e800";
}

.icon-facebook:before {
  content: "\e801";
}

.icon-linkedin:before {
  content: "\e802";
}

.icon-star:before {
  content: "\e803";
}

.icon-twitter:before {
  content: "\e804";
}

.icon-youtube:before {
  content: "\e805";
}

.icon-logout:before {
  content: "\e806";
}

.icon-plus:before {
  content: "\e807";
}

.icon-management:before {
  content: "\e808";
}

.icon-cert-pro:before {
  content: "\e809";
}

.icon-badges:before {
  content: "\e80a";
}

.icon-rating:before {
  content: "\e80b";
}

.icon-quality:before {
  content: "\e80c";
}

.icon-certs:before {
  content: "\e80d";
}

.icon-public:before {
  content: "\e80e";
}

.icon-user:before {
  content: "\e80f";
}

.icon-world:before {
  content: "\e810";
}

.icon-center:before {
  content: "\e811";
}

.icon-instagram:before {
  content: "\f31e";
}

.icon-sm {
  font-size: 0.75em;
}

.icon-lg {
  font-size: 1.33em;
  line-height: 0.75em;
  vertical-align: -0.1em;
}

.icon-2x {
  font-size: 2em;
}

.icon-3x {
  font-size: 3em;
}

.icon-rotate-90 {
  transform: rotate(90deg);
}

.icon-rotate-180 {
  transform: rotate(180deg);
}

.icon-rotate-270 {
  transform: rotate(270deg);
}

ul.pagination li.page-item {
  margin-inline: 0.25rem;
}

/* ==========================================================================
SPECIAL LINK STYLES
========================================================================== */
.discreet-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}
.discreet-link:hover {
  color: rgb(13, 110, 253);
  text-decoration: underline;
}

/*---------------------------------
Animated underlines for links
----------------------------------*/
a.animated-link {
  position: relative;
  text-decoration: none;
}
a.animated-link::after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
a.animated-link:hover::after, a.animated-link:focus::after {
  width: 100%;
}

a.center-animated-link {
  position: relative;
  text-decoration: none;
}
a.center-animated-link::after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}
a.center-animated-link:hover::after, a.center-animated-link:focus::after {
  width: 100%;
  left: 0;
}

a.gradient-animated-link {
  position: relative;
  text-decoration: none;
}
a.gradient-animated-link::after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 0;
  height: 2px;
  background-image: linear-gradient(to right, #6366f1, #8b5cf6, #d946ef);
  transition: width 0.4s ease-out;
}
a.gradient-animated-link:hover::after, a.gradient-animated-link:focus::after {
  width: 100%;
}

a.custom-animated-link {
  position: relative;
  text-decoration: none;
}
a.custom-animated-link::after {
  content: "";
  position: absolute;
  bottom: -0.1em;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #ff5722;
  transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
a.custom-animated-link:hover::after, a.custom-animated-link:focus::after {
  width: 100%;
}

.list-inline {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.pill {
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 95%;
  word-break: keep-all;
  margin-bottom: 4px;
  display: inline-block;
  background: #E5EFFA;
  color: #999;
}

a.pill {
  color: rgb(13, 110, 253);
}
a.pill:hover {
  text-decoration: underline;
}

.skilltag {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  color: #303030;
  border-radius: 1.5rem;
  padding: 0.25rem 0.5rem;
  position: relative;
  background-color: rgb(180, 180, 180);
  /*background-color: rgba(85, 85, 85, 1);*/
  opacity: 0.95;
  font-weight: 500;
  cursor: default;
}

.skilltag .logo-icon {
  /*The icon creates air but it's hidden and replaced by the ::after*/
  opacity: 0;
  margin-right: 0.25rem;
}

.skilltag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(229, 231, 235, 0.8), rgba(229, 231, 235, 0.9)), url("https://scrummanager.com/website/img/logo/scrummanager_logo_white.svg");
  background-size: contain;
  background-repeat: repeat;
  z-index: -1; /* Positioned behind the text content */
}

/*.skilltag:hover::before {
    background-image: linear-gradient(rgba(239, 241, 244, 0.9), rgba(229, 231, 235, 0.8)), url('https://scrummanager.com/website/img/logo/scrummanager_logo_white.svg');
    // make the logo more visible on hover 
}*/
.skilltag::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.7rem;
  height: 1.7rem;
  background: url("https://scrummanager.com/website/img/logo/scrummanager_logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
}

#gamesSection {
  position: relative;
  background: rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.35) url(https://images.unsplash.com/photo-1623652653308-d49d335c92eb?q=80&w=2938&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

/* SOCIAL MEDIA BUTTONS */
.btn-facebook,
.btn-twitter,
.btn-linkedin,
.btn-instagram {
  border-radius: 50%;
  padding: 10px;
  font-size: 0.7rem;
  width: 1rem;
  height: 1rem;
  margin: 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff; /* Sets the color of the icon to white */
}

.btn-twitter {
  background-color: #1da1f2;
}
.btn-linkedin {
  background-color: #0077b5;
}
.btn-facebook {
  background-color: #3b5998;
}
.btn-instagram {
  background-color: #e1306c;
}

.circle.small {
  width: 24px;
  height: 24px;
  padding-top: 0;
  font-size: 0.875em;
}
.circle-twitter {
  background: #000000;
}
.circle-linkedin {
  background: #1c90ba;
}
.circle-facebook {
  background: #4267b2;
}
.circle-instagram {
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

thead, tbody, tfoot {
  border: 0;
}

.table-radio input {
  margin-bottom: 0;
}

td .button {
  margin-bottom: 0;
}

th .button {
  margin-bottom: 0;
}

.table-radio {
  border-top: solid 1px #f0f0f0;
}

.table-radio tr {
  border-bottom: solid 1px #f0f0f0;
  background: none;
}

.table-info {
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}

.table-info tbody tr:nth-child(even),
.table-info tr {
  border-bottom: solid 1px #ddd;
}

.table-info td {
  padding: 16px;
  vertical-align: top;
}

.table-info tbody tr:nth-child(even) {
  background: none;
}

.table-info small {
  font-size: 80%;
}

.table-info .label {
  padding-top: 8px;
}

.table-info .label:first-child {
  padding-top: 0px;
}

/*---------------
        TABLES
---------------*/
/* Default table */
table {
  border: 0px;
}
table thead {
  background-color: var(--background-brightness-high);
}
table thead:hover {
  background-color: inherit;
}
table tr:hover {
  background-color: var(--background-brightness-high);
}
table tr td {
  border-bottom: 0;
}
table.table-fixed {
  table-layout: fixed;
}
table.table-glass {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}
table.table-glass th, table.table-glass td {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0px;
}
table.table-glass tr:hover {
  background-color: var(--background-brightness-high);
}
table.table-transparent {
  background-color: transparent;
  border: 0px;
}
table.table-transparent thead, table.table-transparent th, table.table-transparent td {
  border: 0px;
}
table.table-transparent tr:hover {
  background-color: var(--background-brightness-high);
}
table thead.desktop, table .desktop {
  display: contents;
}

.tooltip {
  border-radius: 8px;
  background-color: #526283;
  color: #fefefe;
}

.tooltip.bottom::before {
  border-color: transparent transparent #526283;
}

.custom-tooltip {
  --bs-tooltip-bg: $background-color-blue;
  --bs-tooltip-color: #fff;
}

/* Quick tooltips */
.tooltip-container { /* Container holding the text */
  position: relative;
  display: inline-block;
}

.tooltip-container .tooltiptext { /* Tooltip text */
  visibility: hidden;
  width: 150px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -75px; /*half of width*/
  /* Fade in */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow - optional 
.tooltip-container .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: grey transparent transparent transparent;
}*/
.tooltip-container:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@font-face {
  font-family: "scrum-elearning";
  src: url("../font/scrum-elearning.eot?17465122");
  src: url("../font/scrum-elearning.eot?17465122#iefix") format("embedded-opentype"), url("../font/scrum-elearning.woff2?17465122") format("woff2"), url("../font/scrum-elearning.woff?17465122") format("woff"), url("../font/scrum-elearning.ttf?17465122") format("truetype"), url("../font/scrum-elearning.svg?17465122#scrum-elearning") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'scrum-elearning';
    src: url('../font/scrum-elearning.svg?17465122#scrum-elearning') format('svg');
  }
}
*/
[class^=icon-]:before, [class*=" icon-"]:before {
  font-family: "scrum-elearning";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-star-solid:before {
  content: "\e800";
} /* '' */
.icon-magnifying-glass-solid:before {
  content: "\e801";
} /* '' */
.icon-circle-info-solid:before {
  content: "\e802";
} /* '' */
.icon-book-open-solid:before {
  content: "\e803";
} /* '' */
.icon-bell-solid:before {
  content: "\e804";
} /* '' */
.icon-facebook:before {
  content: "\e805";
} /* '' */
.icon-linkedin:before {
  content: "\e806";
} /* '' */
.icon-twitter:before {
  content: "\e807";
} /* '' */
.icon-youtube:before {
  content: "\e808";
} /* '' */
.icon-user:before {
  content: "\e809";
} /* '' */
.icon-logout:before {
  content: "\e80a";
} /* '' */
.icon-download:before {
  content: "\e80b";
} /* '' */
.icon-star:before {
  content: "\e80c";
} /* '' */
.icon-balloon:before {
  content: "\e80d";
} /* '' */
.icon-bookmark:before {
  content: "\e80e";
} /* '' */
.icon-reply:before {
  content: "\e811";
} /* '' */
.icon-thumbtack:before {
  content: "\e812";
} /* '' */
.icon-lines:before {
  content: "\e813";
} /* '' */
.icon-caret-down:before {
  content: "\e814";
} /* '' */
.icon-caret-up:before {
  content: "\e815";
} /* '' */
.icon-arrow-up-right-from-square-solid:before {
  content: "\e816";
} /* '' */
.icon-chevron-right:before {
  content: "\e817";
} /* '' */
.icon-quote:before {
  content: "\e818";
} /* '' */
.icon-x:before {
  content: "\e819";
} /* '' */
header {
  padding: 1.5rem 0;
  background-position: center top;
  background-repeat: repeat-y;
  background-size: cover;
  overflow: visible;
  background-color: #DEE3E6;
}
header .logotype {
  width: 18.75rem;
}
header .logo {
  width: 5rem;
}
header .menu {
  color: #444;
}
header .menu li {
  background: transparent;
  border: 0;
}
header .menu li a {
  text-decoration: none;
  color: #444;
}
header .menu .navbar-nav li.nav-item > a:hover, header .menu .navbar-nav li.nav-item > a:active, header .menu .list-group-item > a:hover, header .menu .list-group-item > a:active {
  color: rgb(13, 110, 253);
}
header .menu .dropdown-menu {
  font-size: 0.9rem;
  padding: 0.4rem 0 0.2rem 0;
  /* &.mega-menu { // Edit removing ; DB incompatibility 

      div p:hover { @include clickable; background-color: #e5eaee; }
      div p a {
          padding: 0.2rem;
          //@include animated-underline();
          &.color-troncal { color: $color-cert-troncal; }
      }
  }
  #topic-description:hover {
      background-color: transparent;
  } */
}
header .menu .dropdown-menu li {
  padding: 0.2rem;
  /*&:first-of-type { // Another way to add a little of margin at the beginning of the dropdown
      margin-top: 0.2rem;
  }*/
}
header .menu .dropdown-menu li a:hover {
  background-color: #E5EFFA;
}

.nav a.logout {
  border-bottom: none;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 3.125rem;
  height: 3.125rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
  padding-right: 0;
}
.nav a.logout .bi-exclamation-circle-fill {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  color: #eb551d;
}

/*Nav bar in small screens*/
@media (max-width: 62em) {
  #navbarNavDropdown .menu {
    display: flex;
    flex-direction: column !important;
  }
  .navbar-nav .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
  }
  #navbarNavDropdown .list-group-item {
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
  }
  #navbarNavDropdown .list-group-item.active {
    background-color: white;
  }
  #navbarNavDropdown .accordion-collapse .list-group .list-group-item {
    margin-top: 0.75rem;
    padding-top: 0px;
    margin-bottom: 0px;
  }
  #hero-heading {
    line-height: 1.4;
    margin-top: -3rem;
  }
}
/*Nav bar in large screens*/
@media (min-width: 62em) {
  #navbarNavDropdown .menu {
    display: flex;
    flex-direction: row !important;
  }
}
.breadcrumb {
  margin-top: 12px;
  line-height: 1.6;
}
.breadcrumb li {
  display: inline-block;
}
.breadcrumb::before, .breadcrumb::after {
  display: table;
  content: " ";
  flex-basis: 0;
  order: 1;
}
.breadcrumb::after {
  clear: both;
}
@media screen and (max-width: 40em) {
  .breadcrumb .breadcrumb {
    padding-left: 12px;
  }
}

footer {
  width: 100%;
  padding: 24px;
  background: #295BA4;
  margin-top: auto;
  color: #fff;
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  color: #fff;
}
footer ul.list-inline li {
  display: inline;
}
footer ul.list-inline li a {
  font-size: 1.125rem;
  color: #fff;
}
footer ul.list-inline li a span {
  color: #fff;
}
footer ul li {
  list-style: none;
}
footer ul li ul li {
  list-style: none;
  margin-bottom: 0.375rem;
}
footer ul li ul li a {
  position: relative;
  text-decoration: none;
}
footer ul li ul li a::after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}
footer ul li ul li a:hover::after, footer ul li ul li a:focus::after {
  width: 100%;
}
footer ul li ul li:last-child {
  margin-bottom: 1rem;
}

/* Estilos para los filtros */
#sidebar dt {
  font-weight: bold;
  margin-top: 1rem;
}
#sidebar dd {
  margin-bottom: 0.25rem;
  padding: 0.35rem 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
#sidebar dd.active {
  background-color: #E5EFFA;
}
#sidebar dd:hover {
  background-color: #E5EFFA;
}
#sidebar .filter-group, #sidebar .main-filter-group {
  margin-bottom: 0.5rem;
  cursor: pointer;
}
#sidebar .collapse-toggle {
  display: none;
}
#sidebar .filter-header, #sidebar .main-filter-header {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 5px 0;
}
#sidebar .filter-header .bi-chevron-down, #sidebar .main-filter-header .bi-chevron-down {
  margin-left: 0.3rem;
  float: right;
  transition: transform 0.3s;
}
#sidebar .filter-header:hover, #sidebar .main-filter-header:hover {
  color: rgb(13, 110, 253);
}
#sidebar .main-filter-header {
  display: block;
}
#sidebar .collapse-toggle:not(:checked) + .filter-header .bi-chevron-down,
#sidebar .collapse-toggle:not(:checked) + .main-filter-header .bi-chevron-down {
  transform: rotate(-90deg);
}
#sidebar .collapse-toggle:not(:checked) ~ .collapse-content {
  display: none;
}
#sidebar .collapse-toggle:not(:checked) ~ .main-collapse-content {
  display: none;
}

#homepage {
  background-image: linear-gradient(#DEE3E6, #E1E8EB);
  background-size: cover;
  background-repeat: repeat-y;
  background-attachment: fixed;
  color: #526283;
}

/*--- HOMEPAGE HERO ---*/
#hero {
  width: 100%;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
  position: relative;
}
#hero #hero-heading {
  text-align: center;
  font-size: 3rem;
  color: #526283;
  max-width: 80%;
  margin: 0 auto;
}
#hero #hero-subtitle {
  text-align: center;
  font-size: 1.5rem;
  padding-top: 1rem;
  max-width: 65%;
  margin: 0 auto;
  color: #526283;
  /*a {
      color: #54617F;
      text-decoration: none;
      &:hover {
          color: #3375D4;
          text-decoration: underline;
      }
  }*/
}

.bg-image {
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#homeLicenseSection {
  background: rgba(0, 0, 0, 0.15) url(../img/homepage/matt-hoffman-Q0AM87PsYkE-unsplash.jpg);
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#homeReferSection {
  background: rgba(0, 0, 0, 0.35) url(../img/homepage/referBG.jpg);
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#homeCommunitySection {
  position: relative;
  background: rgba(0, 0, 0, 0.35) url(../img/homepage/tabea-schimpf-9-xfYKAI6ZI-unsplash.jpg);
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

/*Home section for the certification carousels*/
#homeCertsSection .carousel-indicators button {
  width: 10px;
  height: 10px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 50%;
  background-color: #526283;
}

#homeCertsSection .carousel-indicators button:hover {
  background-color: rgb(13, 110, 253);
  opacity: 1;
}

#homeCertsSection button.carousel-control-next,
#homeCertsSection button.carousel-control-prev {
  padding: 0 11px;
}

#homeCertsSection button.carousel-control-next:hover,
#homeCertsSection button.carousel-control-prev:hover {
  background-color: rgba(0, 0, 0, 0);
}

#licensesQuickstartSection {
  position: relative;
  background: rgba(0, 0, 0, 0.35) url(../img/photo/bench-accounting-MGaFENpDCsw-unsplash.jpg);
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

#licenseContactSection {
  color: #fff;
  position: relative;
  background: rgba(0, 0, 0, 0.55) url(../img/photo/petr-machacek-BeVGrXEktIk-unsplash.jpg);
  background-blend-mode: darken;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

#AboutCareersSection {
  color: #fff;
  position: relative;
  background: rgba(0, 0, 0, 0.55) url(../img/photo/petr-machacek-BeVGrXEktIk-unsplash.jpg);
}

#student-search {
  border-radius: 4px;
}

#student-list, #student-list-aux {
  margin-top: -5px;
  margin-left: 0;
  display: none;
  border: 1px solid #cacaca;
  border-radius: 4px;
  background-color: #fefefe;
  font-size: 1rem;
}

#student-list li,
#student-list-aux li {
  list-style-type: none;
  width: 100%;
}

#student-list li a,
#student-list-aux li a {
  font-size: 14.6px !important;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  color: #526183;
  padding: 0.15rem 1rem;
  display: block;
}

#student-list li a:focus,
#student-list li a:hover,
#student-list-aux li a:focus,
#student-list-aux li a:hover {
  background: #c8d5e2;
}

.members-area {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  margin-bottom: 5rem;
  font-size: 16px;
  line-height: 1.5;
  /*.btn {
    font-size: 14px;
    padding: 4px 8px;
  }*/
}
.members-area .inner {
  background-color: #fff;
  overflow-x: auto;
  border-radius: 5px;
}
.members-area h1 {
  color: #000;
  font-size: 1.75rem;
  font-weight: 600;
  margin: 5px 0 12px 0;
}
.members-area h2 {
  margin-top: 12px;
  font-size: 1.125rem;
  color: #222;
  font-weight: 600;
}

/* Vertical and horizontal menus */
.menu-v-icon,
.menu-h-icon {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.menu-v-icon li a,
.menu-v-icon li span.pdas,
.menu-h-icon li a,
.menu-h-icon li span.pdas {
  color: #444;
  text-align: center;
  font-size: 0.875rem;
  border-radius: 4px;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  font-weight: 450;
}
.menu-v-icon li a.current,
.menu-v-icon li a.current span,
.menu-h-icon li a.current,
.menu-h-icon li a.current span {
  background: #fff;
  color: rgb(13, 110, 253);
}

/* Vertical menu */
.menu-v-icon li {
  list-style: none;
  font-size: 0.625rem;
}
.menu-v-icon li a {
  width: 100%;
  display: block;
  padding: 16px 4px;
  font-size: 0.625rem;
}
.menu-v-icon li span {
  display: block;
  font-size: 1.75rem !important;
  margin-bottom: 8px;
}

/* Horizontal menu */
.menu-h-icon {
  margin-bottom: 32px;
}
.menu-h-icon li {
  list-style: none;
  font-size: 0.875rem;
  display: inline;
}
.menu-h-icon li a {
  text-align: left;
  margin-right: 12px;
  padding: 0 4px 16px 0;
  font-size: 0.875rem;
}
.menu-h-icon li a span {
  margin-right: 8px;
  font-size: 1.75rem !important;
}
.menu-h-icon li span.pdas {
  font-size: 1.125rem;
  line-height: 50px;
  text-transform: none;
}
.menu-h-icon a.current {
  border-bottom: 2px solid rgb(13, 110, 253);
}
.menu-h-icon a[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Swiper */
.swiper {
  overflow-y: hidden;
  overflow-x: hidden;
  margin-top: 12px;
}
.swiper-wrapper {
  padding-bottom: 1.5em;
}
.swiper-scrollbar-drag {
  background-color: rgb(13, 110, 253);
  height: 8px;
  border-radius: 0;
  top: -4px;
}
.swiper-scrollbar-horizontal {
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  overflow: visible;
  background-color: #CCCFCF;
  margin-bottom: 2px;
}

.member-profile-background {
  background: rgb(41, 91, 164);
  background: linear-gradient(337deg, rgb(41, 91, 164) 0%, rgb(46, 108, 196) 30%, rgb(31, 68, 122) 100%);
}
.member-profile-filter {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#295ba4",endColorstr="#1f447a",GradientType=1);
}

/*-------------------------------------
 Classes that affect only the intranet 
--------------------------------------*/
#intranet {
  padding-top: 50px;
  background: #eee;
}
#intranet .wrapper {
  background: #ffffff;
  padding-bottom: 3.125rem;
  padding-top: 1.25rem;
  border-radius: 5px;
}
#intranet .wrapper.operator {
  margin-top: 20px;
}
#intranet .navbar-brand {
  padding: 9px 15px;
}
#intranet .navbar-fixed-bottom .navbar-collapse, #intranet .navbar-fixed-top .navbar-collapse {
  max-height: 400px;
}
#intranet .navbar ul li.operator > a {
  line-height: 4rem;
}
#intranet .operator .navbar-default .navbar-brand {
  height: 70px;
}
#intranet .operator .navbar-default .navbar-brand img {
  margin-top: 10px;
}
#intranet .nav li a i.upgrade,
#intranet .nav li a i.evaluation,
#intranet label i.testimonial {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  background: url("../img/level/icon-improv-light.png") no-repeat 0 0;
}
#intranet .nav li.active a i.upgrade {
  background: url("../img/level/icon-improv-dark.png") no-repeat 0 0;
}
#intranet .nav li a i.evaluation {
  background: url("../img/level/icon-scrum-level-glass-light.png") no-repeat 0 0;
}
#intranet .nav li.active a i.evaluation {
  background: url("../img/level/icon-scrum-level-glass-dark.png") no-repeat 0 0;
}
#intranet label i.testimonial {
  background: url("../img/level/icon-testimonial-dark.png") no-repeat 0 0;
}
#intranet .footer-links {
  text-align: center;
  padding: 12px 0px 16px 0px;
}

.info {
  margin: 8px 0;
}

.btn.info {
  margin: 0;
}

.mobile {
  display: none;
}

.jumbotron {
  border: solid 1px #888;
}

.borderb {
  border-bottom: 1px solid #eee;
}

.jumbotron h2 {
  margin-top: 0;
}

.testimony {
  margin-bottom: 16px;
}

.lead {
  margin-bottom: 10px;
}

.row {
  margin-bottom: 8px;
}

.radio {
  margin-top: 0;
}

.testimony small {
  font-size: 95%;
}

.note-field {
  width: 50px;
}

.dropdown-menu {
  min-width: 100%;
}

.quality-icon {
  width: 16px;
  height: 16px;
}

.alert-labs {
  padding: 8px 35px 8px 16px;
}

.error {
  color: #a94442;
}

.red {
  color: #d9534f !important;
  font-weight: bold;
}

.success {
  color: #5cb85c;
}

.quality-1, .quality-2, .quality-3 {
  text-transform: uppercase;
  font-weight: bold;
}

.quality-1 {
  color: green;
}

.quality-2 {
  color: grey;
}

.quality-3 {
  color: red;
}

.info-color {
  color: #337ab7;
}

.warning-color {
  color: #f0ad4e;
}

.forum-layout {
  display: grid;
  grid-template-columns: 4fr 1fr;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  color: #444;
}
@media (max-width: 1000px) {
  .forum-layout {
    grid-template-columns: 1fr;
  }
}
.forum-layout .post-list .post-pin {
  background: #EAF3FF;
}
.forum-layout .post-list .post-pin > a .icon-thumbtack {
  display: block;
}
.forum-layout .hide {
  display: none;
}
.forum-layout .limited-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.forum-layout .post {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  background: #F9F9F9;
  position: relative;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 8px;
}
.forum-layout .post a {
  color: #444;
  text-decoration: none;
}
.forum-layout .post a:hover {
  color: rgb(13, 110, 253);
  text-decoration: underline;
}
.forum-layout .post .post-box {
  flex: 1;
  padding: 0 1rem;
}
.forum-layout .post .post-box h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.forum-layout .post .post-box .post-info {
  margin-bottom: 8px;
  color: #777;
}
.forum-layout .post .post-box .post-actions {
  margin-top: 8px;
}
.forum-layout .post .icon-thumbtack, .forum-layout .post .bi-envelope-check-fill, .forum-layout .post .bi-star-fill, .forum-layout .post .bi-link-45deg, .forum-layout .post .bi-trash-fill {
  color: #4080ff;
  cursor: pointer;
}
.forum-layout .post:hover {
  background: #f0f0f0;
}
.forum-layout a.post {
  display: block;
  text-decoration: none;
  background: #F9F9F9;
  position: relative;
  padding: 32px;
  padding-left: 132px;
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.forum-layout a.post .icon-thumbtack, .forum-layout a.post .bi-link-45deg, .forum-layout a.post .bi-star-fill, .forum-layout a.post .bi-trash-fill {
  display: none;
}
.forum-layout a.post:hover > a .icon-thumbtack, .forum-layout a.post:hover > a .bi-star-fill, .forum-layout a.post:hover > a .bi-link-45deg, .forum-layout a.post:hover > a .bi-trash-fill {
  display: block;
}
.forum-layout .answers {
  margin-left: 3.5rem;
  border-radius: 5px;
  padding: 0.5rem;
}
.forum-layout .search-box {
  border: solid 3px #e6e6e6;
  font-size: 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
  background: #fff;
  position: relative;
  padding-left: 1.5rem;
}
.forum-layout .search-box span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 140%;
}
.forum-layout .search-box input {
  border: 0;
  width: 100%;
  padding: 12px;
  padding-left: 36px;
  outline: 0;
}
.forum-layout textarea.box-style,
.forum-layout input.box-style {
  width: 100%;
  border: solid 3px #e6e6e6;
  border-radius: 5px;
  padding: 12px;
  margin-bottom: 16px;
  resize: vertical;
  outline: 0;
}
.forum-layout textarea.box-style.error,
.forum-layout input.box-style.error {
  border-color: #ff4040;
}
.forum-layout .avatar-container {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}
.forum-layout .avatar-container .avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  align-content: center;
}
.forum-layout .avatar-container .avatar-icon {
  height: 1.5rem;
  width: 1.5rem;
  position: absolute;
  bottom: 0;
  right: 0;
}
.forum-layout .ck-editor.error .ck-editor__editable {
  border-color: #ff4040 !important;
}
.forum-layout .float-end {
  float: right;
}

/*---------------------------------------------
Styles for courses
They consist of 
* Aside for chapters
* Tabs for exercises per chapter
* Main for content
----------------------------------------------*/
.course-layout .d-flex-stretch {
  display: flex;
  align-items: stretch;
}
.course-layout .content {
  background-color: #fff;
  width: calc(100% - 350px);
  padding: 30px;
  border-radius: 0 5px 5px 0;
}

.tab-bar { /* Tabs on top of course content */
  padding-left: 350px;
  display: flex;
}
.tab-bar button {
  border: 0;
  margin: 0;
  padding: 15px 30px;
  border-radius: 5px 5px 0 0;
  background-color: #C5CFE2;
}
.tab-bar button.active {
  background: #fff;
  color: #444;
}

.course-content {
  /*ocultar saltos de línea en torno a imágenes flotantes*/
}
.course-content img[alt$="<"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt$="<"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[alt*=float-left] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt*=float-left] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-left.jpg"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-left.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_left.jpg"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_left.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src*=floatleft] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src*=floatleft] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-left.png"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-left.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_left.png"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_left.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[alt$=">"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt$=">"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[alt*=float-right] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt*=float-right] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-right.jpg"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-right.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_right.jpg"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_right.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src*=floatright] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src*=floatright] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-right.png"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-right.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_right.png"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_right.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content .text-divider, .course-content hr {
  width: 100%;
  height: 30px;
  background-image: url("../img/text-divider-01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  margin-top: 55px;
  border: 0;
  color: #777;
  opacity: 1;
}
.course-content span img, .course-content img {
  max-width: 100%;
  height: auto;
}
.course-content span img.full-width, .course-content img.full-width {
  max-width: 100%;
  height: auto;
}
.course-content span img.float-left, .course-content img.float-left {
  max-width: 50%;
  float: left;
  margin: 1rem 1rem 1rem 0;
}
.course-content span img.float-right, .course-content img.float-right {
  max-width: 50%;
  float: right;
  margin: 1rem 0 1rem 1rem;
}
.course-content span img.center, .course-content img.center {
  max-width: 75%;
  margin: 1rem 10%;
}
.course-content img[alt$="<"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt$="<"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[alt*=float-left] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt*=float-left] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-left.jpg"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-left.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_left.jpg"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_left.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src*=floatleft] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src*=floatleft] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-left.png"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-left.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_left.png"] {
  float: left;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_left.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[alt$=">"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt$=">"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[alt*=float-right] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[alt*=float-right] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-right.jpg"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-right.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_right.jpg"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_right.jpg"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src*=floatright] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src*=floatright] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="-right.png"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="-right.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[src$="_right.png"] {
  float: right;
  max-width: 50%;
  margin: 1rem 1rem 1rem 0;
}
@media (max-width: 900px) {
  .course-content img[src$="_right.png"] {
    float: none;
    max-width: 100%;
    margin: 1rem 0;
  }
}
.course-content img[alt*=img-center] {
  max-width: 75%;
  margin: 1rem 10%;
}
.course-content .text-divider, .course-content hr {
  width: 100%;
  height: 30px;
  background-image: url("../img/text-divider-01.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
  margin-top: 55px;
  border: 0;
  color: #777;
  opacity: 1;
}
.course-content blockquote {
  /*font-size:90%;*/
  margin: 2rem 0;
  line-height: 1.3;
  border-left: 5px solid #999;
  padding-left: 1rem;
}
.course-content p a .image-link + br, .course-content a .image-link + p br, .course-content p a .image-link ~ br {
  display: none;
}
.course-content p:empty {
  display: none;
}
.course-content p:has(> br:only-child) {
  display: none;
}
.course-content p:has([alt$=">"], [alt*=float-right], [src$="-right.jpg"], [src$="_right.jpg"], [src*=floatright], [src$="-right.png"], [src$="_right.png"], [alt$="<"], [alt*=float-left], [src$="-left.jpg"], [src$="_left.jpg"], [src*=floatleft], [src$="-left.png"], [src$="_left.png"]) {
  margin: 0;
  height: 0;
}
@media (max-width: 900px) {
  .course-content p:has([alt$=">"], [alt*=float-right], [src$="-right.jpg"], [src$="_right.jpg"], [src*=floatright], [src$="-right.png"], [src$="_right.png"], [alt$="<"], [alt*=float-left], [src$="-left.jpg"], [src$="_left.jpg"], [src*=floatleft], [src$="-left.png"], [src$="_left.png"]) {
    height: auto;
  }
}

.course-index {
  background-color: #C5CFE2;
  width: 350px;
  padding: 30px 0;
  border-radius: 5px 0 0 5px;
}
.course-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.course-index ul li a {
  color: #414650;
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 10px 30px;
  padding-right: 32px;
  position: relative;
  line-height: 1.5;
}
.course-index ul li.index-chapter a:hover {
  background: #f9f9f9;
  cursor: pointer;
}
.course-index ul li.current a, .course-index ul li.current a:hover {
  background: #fff;
}
.course-index ul li.complete a:before { /* Completion marks for chapters */
  font-family: "bootstrap-icons";
  font-size: 140%;
  content: "\f269";
  position: absolute;
  top: 4px;
  left: 8px;
  color: #526183;
}
.course-index ul li.in-progress a:before {
  font-family: "bootstrap-icons";
  font-size: 140%;
  content: "\f26e";
  position: absolute;
  top: 4px;
  left: 8px;
  color: #526183;
}
.course-index .index-section {
  font-weight: 400;
}
.course-index .index-section:first-of-type {
  margin-top: -6px;
}
.course-index .index-section > ul {
  margin-bottom: 20px;
  padding-left: 16px;
}
.course-index .index-section a:hover { /*Sections don't go anywhere so they don't light up*/
  background: #C5CFE2;
  cursor: default;
}
.course-index .index-section a.clickable:hover { /* Exception */
  cursor: pointer;
  text-decoration: underline;
}
.course-index p {
  font-size: 16px;
  padding: 10px 30px;
  padding-right: 32px;
  position: relative;
  line-height: 1.5;
}

/*-- course-index --*/
.course-brand-info .three-columns {
  margin: 1.25rem auto;
  padding: 1.25rem;
  background-color: #fff;
  border-radius: 5px;
  align-items: center;
  text-align: center;
}
.course-brand-info h2 {
  font-size: 28px;
  font-weight: 200;
  line-height: 1.8;
  margin-top: 30px;
}
.course-brand-info p, .course-brand-info span {
  font-size: 18px;
  font-weight: 300;
  color: #444;
}
.course-brand-info .course-brand-logo {
  max-height: 96px;
}
.course-brand-info .swiper .list-circle-item .circle-image {
  max-height: 200px;
}

/*-- course-brand-info --*/
/* ----- Fancybox for images ----- */
.fancybox__slide.has-image > .fancybox__content {
  background-color: #fff;
  padding: 1rem;
  border-radius: 5px;
}/*# sourceMappingURL=style.css.map */