/*
 Theme Name: Axelerance
 Theme URI: https://axelerance.fr
 Author: Sacha GUERIN
 Author URI: https://axelerance.fr
 Description: Un thème pour Axelerance Qweed
 Version: 1.1.4
 Template: generatepress
*/

/*

 █████   █████   █████████   ███████████   █████   █████████   ███████████  █████       ██████████  █████████
░░███   ░░███   ███░░░░░███ ░░███░░░░░███ ░░███   ███░░░░░███ ░░███░░░░░███░░███       ░░███░░░░░█ ███░░░░░███
 ░███    ░███  ░███    ░███  ░███    ░███  ░███  ░███    ░███  ░███    ░███ ░███        ░███  █ ░ ░███    ░░░
 ░███    ░███  ░███████████  ░██████████   ░███  ░███████████  ░██████████  ░███        ░██████   ░░█████████
 ░░███   ███   ░███░░░░░███  ░███░░░░░███  ░███  ░███░░░░░███  ░███░░░░░███ ░███        ░███░░█    ░░░░░░░░███
  ░░░█████░    ░███    ░███  ░███    ░███  ░███  ░███    ░███  ░███    ░███ ░███      █ ░███ ░   █ ███    ░███
    ░░███      █████   █████ █████   █████ █████ █████   █████ ███████████  ███████████ ██████████░░█████████
     ░░░      ░░░░░   ░░░░░ ░░░░░   ░░░░░ ░░░░░ ░░░░░   ░░░░░ ░░░░░░░░░░░  ░░░░░░░░░░░ ░░░░░░░░░░  ░░░░░░░░░

*/
:root {
  --background-sidebar-color: #E7E7E7;
  --background-tile-color: #E7E7E7;
  --green-color: #009E7C;
  --blue-color: #006DAF;
  --orange-color: #FFAA1D;
}

/*

██████████   ██████████  █████████  █████   ████ ███████████    ███████    ███████████
░███░░░░███ ░░███░░░░░█ ███░░░░░███░░███   ███░ ░█░░░███░░░█  ███░░░░░███ ░░███░░░░░███
░███   ░░███ ░███  █ ░ ░███    ░░░  ░███  ███   ░   ░███  ░  ███     ░░███ ░███    ░███
░███    ░███ ░██████   ░░█████████  ░███████        ░███    ░███      ░███ ░██████████
░███    ░███ ░███░░█    ░░░░░░░░███ ░███░░███       ░███    ░███      ░███ ░███░░░░░░
░███    ███  ░███ ░   █ ███    ░███ ░███ ░░███      ░███    ░░███     ███  ░███
██████████   ██████████░░█████████  █████ ░░████    █████    ░░░███████░   █████
░░░░░░░░░░   ░░░░░░░░░░  ░░░░░░░░░  ░░░░░   ░░░░    ░░░░░       ░░░░░░░    ░░░░░


*/
@media screen and (min-width: 769px) {

  .mobile {
    display: none;
  }

  .desktop {
    display: block;
  }

  /*
    #     #
    #     # ######   ##   #####  ###### #####
    #     # #       #  #  #    # #      #    #
    ####### #####  #    # #    # #####  #    #
    #     # #      ###### #    # #      #####
    #     # #      #    # #    # #      #   #
    #     # ###### #    # #####  ###### #    #
   */
  .custom-header .desk-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 20px;
    padding-inline: 50px;
  }

  .custom-header .desk-navbar .logo {
    width: 200px;
    height: auto;
  }

  .custom-header .desk-navbar .menu-desktop {
    display: flex;
    gap: 20px;
    list-style: none;
  }

  .custom-header .desk-navbar .menu-desktop li {
    color: white;
    background-color: var(--blue-color);
    padding: 10px 20px;
    border-radius: 5px;
    transition: 0.1s all ease-in-out;
  }

  .custom-header .desk-navbar .menu-desktop li:hover {
    background: #00A4E7;
    transition: 0.1s all ease-in-out;
  }

  .custom-header .desk-navbar .menu-desktop li:has(.badge) {
    position: relative;
  }

  .badge {
    padding-inline: 5px;
    padding-block: 5px;
    border-radius: 5px;
  }

  .badge-danger {
    background: red;
  }

  .custom-header .desk-navbar .menu-desktop li a {
    color: white;
    text-decoration: none;
  }

  .custom-header .mobile-navbar {
    display: none;
  }

  /*
  ######
  #     #   ##    ####  #    # #####   ####    ##   #####  #####
  #     #  #  #  #      #    # #    # #    #  #  #  #    # #    #
  #     # #    #  ####  ###### #####  #    # #    # #    # #    #
  #     # ######      # #    # #    # #    # ###### #####  #    #
  #     # #    # #    # #    # #    # #    # #    # #   #  #    #
  ######  #    #  ####  #    # #####   ####  #    # #    # #####

  */
  .axelerance-dashboard *,
  .axelerance-group * {
    padding: 0;
    margin: 0;
  }

  .axelerance-dashboard a,
  .axelerance-group a,
  .custom-sidebar a {
    text-decoration: none;
  }

  .axelerance-dashboard {
    width: 1200px;
    margin: 0 auto;
    padding-inline: 20px;
    padding-bottom: 20px;
  }

  .axelerance-dashboard h1 {
    margin-bottom: 20px;
  }

  .axelerance-dashboard h2 {
    margin-bottom: 10px;
  }

  .axelerance-dashboard .groups {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .axelerance-dashboard .groups .group {
    padding: 20px 20px;
    background-color: var(--background-tile-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-radius: 10px;
    box-shadow: 2px 2px 10px 0 #F5F5F5;
    color: black;
  }

  .axelerance-dashboard .groups .group .group-title {
    width: 40%;
  }

  .axelerance-dashboard .groups .group .progress {
    width: 90px;
  }

  .axelerance-dashboard .groups .group .progress:has(p.completed) {
    background-color: var(--green-color);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .axelerance-dashboard .groups .group .progress:has(p.not-started) {
    background-color: #A5A5A5;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .axelerance-dashboard .groups .group .progress:has(p.progressing) {
    background-color: var(--orange-color);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .axelerance-dashboard .groups .group .progress p {
    text-align: center;
  }

  /*
   #####
  #     # #####   ####  #    # #####   ####
  #       #    # #    # #    # #    # #
  #  #### #    # #    # #    # #    #  ####
  #     # #####  #    # #    # #####       #
  #     # #   #  #    # #    # #      #    #
   #####  #    #  ####   ####  #       ####
  */
  .axelerance-group {
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 20px;
    padding-bottom: 20px;
  }

  .axelerance-group .modules {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 1200px;
  }

  .axelerance-group .modules .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
  }

  .axelerance-group .modules .content ul {
    margin-left: 20px;
  }
  
  .axelerance-group .modules .module {
    border-radius: 10px;
    padding: 20px;
    /*width: 100%;*/
    background-color: #FFF;
    box-shadow: 2px 2px 10px 0 #F5F5F5;
    border: solid 3px #EFEFEF;
    overflow: visible;
  }

  .axelerance-group .modules .module .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0px;
  }

  .axelerance-group .modules .module.close .header {
    padding: 0;
  }

  .axelerance-group .modules .module .header .header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 50%;
  }

  .axelerance-group .modules .module .header .header-control {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
  }

  .axelerance-group .modules .module .header .percentage {
    background: #00A4E7;
    padding-inline: 6px;
    padding-block: 2px;
    border-radius: 5px;
    color: white;
  }

  .axelerance-group .modules .module .header .percentage.completed {
    background: var(--green-color);
  }

  .axelerance-group .modules .module .header .time-spent {
    color: #A5A5A5;
    font-size: 14px;
  }

  .axelerance-group .modules .module .toggle-wrapper {
    height: 24px;
    width: 24px;
    background-color: #00A4E7;
    border-radius: 12px;
    transform: rotate(90deg);
  }

  .axelerance-group .modules .module .lessons, .axelerance-group .modules .module .quizzes {
    height: 0;
  }

  .axelerance-group .modules .module.close .lessons {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .axelerance-group .modules .module.open .lessons {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .axelerance-group .modules .module .lessons .lesson, .axelerance-group .modules .module .quizzes .quiz {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-tile-color);
    border-radius: 10px;
    border: 2px solid #DCDCDC;
    box-shadow: 2px 2px 4px 0 #F5F5F5;
    color: black;
    opacity: 0;
    scale: 0;
    filter: blur(0.1);
    padding: 0;
  }

  .axelerance-group .modules .module.close .lessons .lesson {
    animation: close;
    animation-delay: 1s;
  }

  .axelerance-group .modules .module .lessons .lesson .left, .axelerance-group .modules .module .quizzes .quiz .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .axelerance-group .modules .module .lessons .lesson .progress {
    padding-inline: 7px;
    padding-block: 3px;
    border-radius: 100px;
  }

  .axelerance-group .modules .module .lessons .lesson .progress.completed {
    background-color: var(--green-color);
    color: white;
  }

  .axelerance-group .modules .module .lessons .lesson .progress.progressing {
    background-color: #A5A5A5;
    color: white;
  }

  .axelerance-group .modules .module .quizzes {
    margin-top: 10px;
  }

  .axelerance-group .modules .module .quizzes .quiz {
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--background-tile-color);
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #DCDCDC;
    box-shadow: 2px 2px 4px 0 #F5F5F5;
    color: black;
  }

  .axelerance-group .modules .module .quizzes .attempts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .axelerance-group .modules .module .quizzes .attempts .attempt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 10px;
    padding-inline: 20px;
    margin-left: 20px;
    background-color: var(--background-tile-color);
    border-radius: 10px;
    border: 2px solid #DCDCDC;
    box-shadow: 2px 2px 4px 0 #F5F5F5;
    color: black;
    overflow: visible;
    opacity: 0;
    transform: scale(0);
    filter: blur(0.1);
    padding: 0;
  }

  .axelerance-group .modules .module .quizzes .attempts .attempt .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .axelerance-group .modules .module .quizzes .attempts .attempt .dl-btn, .dl-btn {
    background-color: var(--green-color);
    width: fit-content;
    padding-inline: 10px;
    padding-block: 5px;
    border-radius: 8px;
    color: white;
    position: relative;
    overflow: visible;
  }

  .axelerance-group .modules .certificates {
    padding-inline: 20px;
  }

  .axelerance-group .modules .certificates .certificate {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .axelerance-group .modules .certificates .certificate .dl-btn {
    position: relative;
    padding-block: 5px;
    padding-inline: 10px;
    background-color: var(--green-color);
    color: white;
    border-radius: 5px;
    cursor: pointer;
  }

  .axelerance-group .modules .certificates .certificate .dl-btn:hover {
    background-color: #00cea1;
  }

  .dl-btn .confetti {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    pointer-events: none!important;
  }

  .screen-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
  }

  /*
   #####  #
  #     # # #####  ###### #####    ##   #####
  #       # #    # #      #    #  #  #  #    #
   #####  # #    # #####  #####  #    # #    #
        # # #    # #      #    # ###### #####
  #     # # #    # #      #    # #    # #   #
   #####  # #####  ###### #####  #    # #    #
  */
  .custom-sidebar p {
    padding: 0;
    margin: 0;
  }

  #cst-sidebar-open {
    position: fixed;
    top: 50%;
    left: -10px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 10px;

    width: 64px;
    height: 64px;

    background-color: #FFF;

    border: 3px solid #F5F5F5;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 #F5F5F5;
  }

  #cst-sidebar-open img {
    width: 100%;
    aspect-ratio: 1;

    padding: 0
  }

  .custom-sidebar .commands {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25%;
  }

  .custom-sidebar .open-sidebar {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 60px;
    aspect-ratio: 1;

    background-color: #FFF;

    border-radius: 10px;
    border: 2px solid #D5D5D5;
  }

  .custom-sidebar .open-sidebar img {
    width: 30px;
    aspect-ratio: 1;
  }

  .custom-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-1000px);
    z-index: 10000;

    width: 350px;
    height: 100vh;

    background-color: var(--background-sidebar-color);

    overflow: visible;

    padding-top: 50px;
    padding-inline: 20px;

    box-shadow: 2px 2px 4px 0 #F5F5F5;
  }

  .custom-sidebar .top {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 50%;
    height: 60px;

    background: var(--blue-color);
    color: white;

    border-radius: 10px;
  }

  .custom-sidebar .top p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .custom-sidebar .courses {
    max-height: 80vh;
    padding-bottom: 50px;
    overflow: scroll;
  }

  .custom-sidebar .courses::-webkit-scrollbar {
    display: none;
  }

  .custom-sidebar .courses .course {
    margin-top: 20px;
  }

  .custom-sidebar .courses .course:first-child {
    margin-top: 0;
  }

  .custom-sidebar .course .course-pill {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    margin-bottom: 10px;
    padding-block: 5px;
    padding-inline: 10px;

    background-color: #FFF;

    cursor: pointer;
  }

  .custom-sidebar .courses .course .course-pill p {
    text-align: center;
  }

  .custom-sidebar .course .lessons {
    display: flex;
    flex-direction: column;
    align-items: end;
    border-left: solid 3px #D5D5D5;
  }

  .custom-sidebar .course .lessons .lesson {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 90%;
    height: 0;
    margin: 0;
    padding: 0;

    transform: scale(0);

    background-color: #FFF;
    color: black;

    border-radius: 10px;

    cursor: pointer;
  }

  .custom-sidebar .course .lessons .lesson.completed {
    background: var(--green-color);
    color: white
  }

  .custom-sidebar .course .lessons .lesson > p {
    text-align: start;
    width: 100%;
  }

  .custom-sidebar .course .lessons .lesson.current > p {
    color: var(--blue-color);
  }

  .custom-sidebar .quiz {
    gap: 10px;
  }

  .custom-sidebar .quiz img {
    width: 36px;
    height: auto;
  }

  /*
   #     #                         ###
   #     #  ####  ###### #####      #  #    # ######  ####
   #     # #      #      #    #     #  ##   # #      #    #
   #     #  ####  #####  #    #     #  # #  # #####  #    #
   #     #      # #      #####      #  #  # # #      #    #
   #     # #    # #      #   #      #  #   ## #      #    #
    #####   ####  ###### #    #    ### #    # #       ####

  */
  .user-profile-info {
    padding-inline: 50px;
  }

  .user-profile-info .input-form, .user-profile-info .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .user-profile-info .input-form input {
    height: 50px;
    border-radius: 5px;
  }

  .user-profile-info .input-form input[type = "date"] {
    padding-inline: 10px;
  }

  .user-profile-info button[type = "submit"] {
    background: var(--blue-color);
    border-radius: 10px;
  }

  .user-profile-info .row {
    display: flex;
    justify-content: space-between;
  }

  .user-profile-info .row .col {
    width: 20%;
  }

  .alert.alert-info {
    margin-inline: 50px;
    margin-bottom: 20px !important;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 109, 175, 0.3);
    border: 2px solid rgba(0, 109, 175, 0.5)
  }

  .alert.alert-warning {
    background: rgba(255, 170, 29, 0.3);
    border: 2px solid rgba(255, 170, 29, 0.5);
    margin-inline: 50px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;
  }

  /*
   ####### ####### ####### ####### ####### ######
   #       #     # #     #    #    #       #     #
   #       #     # #     #    #    #       #     #
   #####   #     # #     #    #    #####   ######
   #       #     # #     #    #    #       #   #
   #       #     # #     #    #    #       #    #
   #       ####### #######    #    ####### #     #
  */
  body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    margin: 0;
  }

  main {
    flex: 1;
  }

  .site-footer {
    /*transform: translateY(-50%);*/
  }
}


/*
 ██████   ██████    ███████    ███████████  █████ █████       ██████████
░░██████ ██████   ███░░░░░███ ░░███░░░░░███░░███ ░░███       ░░███░░░░░█
 ░███░█████░███  ███     ░░███ ░███    ░███ ░███  ░███        ░███  █ ░
 ░███░░███ ░███ ░███      ░███ ░██████████  ░███  ░███        ░██████
 ░███ ░░░  ░███ ░███      ░███ ░███░░░░░███ ░███  ░███        ░███░░█
 ░███      ░███ ░░███     ███  ░███    ░███ ░███  ░███      █ ░███ ░   █
 █████     █████ ░░░███████░   ███████████  █████ ███████████ ██████████
░░░░░     ░░░░░    ░░░░░░░    ░░░░░░░░░░░  ░░░░░ ░░░░░░░░░░░ ░░░░░░░░░░
*/
@media screen and (max-width: 768px) {

  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  /*
    #     #
    #     # ######   ##   #####  ###### #####
    #     # #       #  #  #    # #      #    #
    ####### #####  #    # #    # #####  #    #
    #     # #      ###### #    # #      #####
    #     # #      #    # #    # #      #   #
    #     # ###### #    # #####  ###### #    #
  */
  .custom-header .mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 20px;
    padding-inline: 20px;
  }

  .custom-header .mobile-navbar .logo {
    width: 48px;
    height: auto;
  }

  .custom-header .mobile-navbar .drop-down-toggle .drop-down {
    width: 48px;
    height: 48px;
  }

  .custom-header .mobile-navbar .drop-down-menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 9999
  }

  .custom-header .mobile-navbar .drop-down-menu .head {
    margin-top: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }

  .custom-header .mobile-navbar .drop-down-menu .menu-mobile {
    width: 100%;
    height: calc(100vh - 185px);
    padding: 20px;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 10px;
  }

  .custom-header .mobile-navbar .drop-down-menu .menu-mobile li {
    padding-block: 20px;
    background-color: var(--blue-color);
    color: white;
    width: 100%;
    padding-inline: 10px;
    border-radius: 5px;
  }

  .custom-header .mobile-navbar .drop-down-menu .menu-mobile li a {
    color: white;
    text-decoration: none;
  }

  .custom-header .desk-navbar {
    display: none;
  }

  /*
  ######
  #     #   ##    ####  #    # #####   ####    ##   #####  #####
  #     #  #  #  #      #    # #    # #    #  #  #  #    # #    #
  #     # #    #  ####  ###### #####  #    # #    # #    # #    #
  #     # ######      # #    # #    # #    # ###### #####  #    #
  #     # #    # #    # #    # #    # #    # #    # #   #  #    #
  ######  #    #  ####  #    # #####   ####  #    # #    # #####

  */
  .axelerance-dashboard *,
  .axelerance-group * {
    padding: 0;
    margin: 0;
  }

  .axelerance-dashboard {
    max-width: 100%;
    padding-inline: 20px;
    padding-bottom: 20px;
  }

  .axelerance-dashboard h1 {
    margin-bottom: 20px;
    font-size: 36px;
  }

  .axelerance-dashboard h2 {
    margin-bottom: 10px;
    font-size: 28px;
  }

  .axelerance-dashboard .groups {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
  }

  .axelerance-dashboard .groups .group {
    position: relative;
    padding: 20px 20px;
    background-color: var(--background-tile-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 2px 2px 10px 0 #F5F5F5;
    color: black;
    text-decoration: none;
  }

  .axelerance-dashboard .groups .group a {

  }

  .axelerance-dashboard .groups .group .progress {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
  }

  .axelerance-dashboard .groups .group .progress:has(p.completed) {
    position: absolute;
    background-color: var(--green-color);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    top: 0;
    right: 0;
  }

  .axelerance-dashboard .groups .group .progress:has(p.not-started) {
    background-color: #A5A5A5;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
  }

  .axelerance-dashboard .groups .group .progress:has(p.progressing) {
    background-color: #FFBF00;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
  }

  /*
   #####
  #     # #####   ####  #    # #####   ####
  #       #    # #    # #    # #    # #
  #  #### #    # #    # #    # #    #  ####
  #     # #####  #    # #    # #####       #
  #     # #   #  #    # #    # #      #    #
   #####  #    #  ####   ####  #       ####
  */
  .axelerance-group {
    max-width: 100%;
    padding-inline: 20px;
    padding-bottom: 20px;
  }

  .axelerance-group .modules {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
  }

  .axelerance-group .screen-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }

  .axelerance-group .modules .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .axelerance-group .modules .content ul {
    margin-left: 25px;
  }

  .axelerance-group .modules .module {
    border-radius: 10px;
    padding: 20px;
    background-color: #FFF;
    box-shadow: 2px 2px 10px 0 #F5F5F5;
    border: solid 1px #EFEFEF;
    overflow: visible;
  }

  .axelerance-group .modules .module .header {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 0px;
    overflow: visible;
  }

  .axelerance-group .modules .module.close .header {
    padding: 0;
  }

  .axelerance-group .modules .module .header .header-title {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .axelerance-group .modules .module .header .time-spent {
    margin-top: 10px;
    font-size: 14px;
  }

  .axelerance-group .modules .module .header .percentage {
    position: absolute;
    top: -20px;
    right: -20px;
    background: #00A4E7;
    color: white;
    padding-inline: 3px;
    padding-block: 2px;
    border-radius: 5px;
    transform: translate(25%, -50%);

  }

  .axelerance-group .modules .module .toggle-wrapper {
    height: 24px;
    width: 24px;
    background-color: #00A4E7;
    border-radius: 12px;
    transform: rotate(90deg);
    position: absolute;
    bottom: 0;
    right: 0;
    transition: all 0.5s;
  }

  .axelerance-group .modules .module.open .toggle-wrapper {
    bottom: 20px;
    transition: all 0.5s;
  }

  .axelerance-group .modules .module .lessons, .axelerance-group .modules .module .quizzes {
    height: 0;
  }

  .axelerance-group .modules .module.close .lessons {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .axelerance-group .modules .module.open .lessons {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
  }

  .axelerance-group .modules .module .lessons .lesson, .axelerance-group .modules .module .quizzes .quiz {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-tile-color);
    border-radius: 10px;
    border: 2px solid #DCDCDC;
    box-shadow: 2px 2px 4px 0 #F5F5F5;
    color: black;
    text-decoration: none;

    opacity: 0;
    padding: 0;
    scale: 0;
    filter: blur(0.1);
  }

  .axelerance-group .modules .module.close .lessons .lesson {
    animation: close;
    animation-delay: 1s;
  }

  .axelerance-group .modules .module .lessons .lesson .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .axelerance-group .modules .module .lessons .lesson .progress {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    padding-inline: 7px;
    padding-block: 3px;
    border-radius: 100px;
  }

  .axelerance-group .modules .module .lessons .lesson .progress.completed {
    background-color: var(--green-color);
    color: white;
  }

  .axelerance-group .modules .module .lessons .lesson .progress.progressing {
    background-color: #A5A5A5;
    color: white;
  }

  .axelerance-group .modules .module .quizzes {
    margin-top: 10px
  }

  .axelerance-group .modules .module .quizzes .attempts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }

  .axelerance-group .modules .module .quizzes .attempts .attempt {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    background-color: var(--background-tile-color);
    border-radius: 10px;
    border: 2px solid #DCDCDC;
    box-shadow: 2px 2px 4px 0 #F5F5F5;
    color: black;
    opacity: 0;
    filter: blur(0.1);
    scale: 0;
    padding: 0;
  }

  .axelerance-group .modules .module .quizzes .quiz .left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }

  .axelerance-group .modules .module .quizzes .attempts .attempt .left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .axelerance-group .modules .certificates {
    padding-inline: 10px;
  }

  .axelerance-group .modules .certificates .certificate {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .axelerance-group .modules .certificates .certificate .dl-btn, .axelerance-group .dl-btn {
    position: relative;
    padding-block: 5px;
    padding-inline: 10px;
    background-color: var(--green-color);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
  }

  .axelerance-group .modules .certificates .certificate .dl-btn:hover {
    background-color: #00cea1;
  }

  .axelerance-group .modules .certificates .certificate .dl-btn .confetti {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 500px;
    pointer-events: none!important;
  }

  /*
   #####
  #     # # #####  ###### #####    ##   #####
  #       # #    # #      #    #  #  #  #    #
   #####  # #    # #####  #####  #    # #    #
        # # #    # #      #    # ###### #####
  #     # # #    # #      #    # #    # #   #
   #####  # #####  ###### #####  #    # #    #
  */
  .custom-sidebar p {
    padding: 0;
    margin: 0;
  }

  #cst-sidebar-open {
    position: fixed;
    top: 15%;
    left: -10px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 10px;

    width: 64px;
    height: 64px;

    background-color: #FFF;

    border: 3px solid #F5F5F5;
    border-radius: 5px;
    box-shadow: 2px 2px 4px 0 #F5F5F5;
  }

  #cst-sidebar-open img {
    width: 100%;
    aspect-ratio: 1;

    padding: 0
  }

  .custom-sidebar .commands {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25%;
  }

  .custom-sidebar .open-sidebar {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 60px;
    aspect-ratio: 1;

    background-color: #FFF;

    border-radius: 10px;
    border: 2px solid #D5D5D5;
  }

  .custom-sidebar .open-sidebar img {
    width: 30px;
    aspect-ratio: 1;
  }

  .custom-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-1000px);
    z-index: 10000;

    width: 350px;
    height: 100vh;

    background-color: var(--background-sidebar-color);

    overflow: visible;

    padding-top: 50px;
    padding-inline: 20px;

    box-shadow: 2px 2px 4px 0 #F5F5F5;
  }

  .custom-sidebar .top {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 50%;
    height: 60px;

    background-color: var(--blue-color);
    color: white;

    border-radius: 10px;
  }

  .custom-sidebar .top p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .custom-sidebar .courses {
    max-height: 80vh;
    padding-bottom: 20px;
    overflow: scroll;
  }

  .custom-sidebar .courses::-webkit-scrollbar {
    display: none;
  }

  .custom-sidebar .courses .course {
    margin-top: 20px;
  }

  .custom-sidebar .courses .course:first-child {
    margin-top: 0;
  }

  .custom-sidebar .course .course-pill {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;

    padding: 10px;
    margin-bottom: 10px;

    background-color: #FFF;

    cursor: pointer;
  }

  .custom-sidebar .course .lessons {
    display: flex;
    flex-direction: column;
    align-items: end;
    border-left: solid 3px #D5D5D5;
  }

  .custom-sidebar .course .lessons .lesson {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 90%;
    height: 0;
    margin: 0;
    padding: 0;

    transform: scale(0);

    background-color: #FFF;
    color: black;

    border-radius: 10px;

    cursor: pointer;
  }

  .custom-sidebar .course .lessons .lesson.current {
    color: var(--blue-color);
  }

  .custom-sidebar .course .lessons .lesson > p {
    text-align: start;
    width: 100%;
  }

  .custom-sidebar .courses .course .lessons .lesson .tooltip {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(50%) translateX(-50%);

    width: 350px;

    background-color: #FFF;
  }

  /*
 #     #                         ###
 #     #  ####  ###### #####      #  #    # ######  ####
 #     # #      #      #    #     #  ##   # #      #    #
 #     #  ####  #####  #    #     #  # #  # #####  #    #
 #     #      # #      #####      #  #  # # #      #    #
 #     # #    # #      #   #      #  #   ## #      #    #
  #####   ####  ###### #    #    ### #    # #       ####

*/
  .user-profile-info {
    padding-inline: 50px;
  }

  .user-profile-info .input-form, .user-profile-info .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
  }

  .user-profile-info .input-form input {
    height: 50px;
    border-radius: 5px;
  }

  .user-profile-info .input-form input[type = "date"] {
    padding-inline: 10px;
  }

  .user-profile-info button[type = "submit"] {
    background: var(--blue-color);
    border-radius: 10px;
  }

  .user-profile-info .row {
    display: block;
  }

  .user-profile-info .row .col {
    width: 50%;
  }

  .alert.alert-info {
    margin-inline: 50px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(0, 109, 175, 0.3);
    border: 2px solid rgba(0, 109, 175, 0.5)
  }

  .alert.alert-warning {
    background: rgba(255, 170, 29, 0.3);
    border: 2px solid rgba(255, 170, 29, 0.5);
    margin-inline: 50px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;
  }

}