/* ==========================================================================
   @import (Font Awesome + Google Fonts) — altijd bovenaan
   ========================================================================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Cascade layers (SMACSS) */
@layer base, layout, modules, theme, state, utilities, responsive;

/* ==========================================================================
   reset
   ========================================================================== */

#login-cont, #welcome, #welcome img {
  all: unset;
}


/* ==========================================================================
   BASE (fonts, icons, elementaire defaults)
   ========================================================================== */
@layer base {

  /* Variables & root colors */
  :root {
    --yellow: #fdeb99;
    --lightyellow: #fffcf7;
    --gb-zwart: #1F0538;
    --purple: #631d6e;
    --blue: #243470;
    --white: #fff;
  }



/* --- Globaal: Poppins op alles --- */
* {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

/* --- Uitzonderingen: Font Awesome moet z'n eigen font houden --- */
/* v6 "families" + v5 aliassen; plaats DIT ná de *-regel */
.fa,
.fas, .far, .fal, .fat, .fad, .fab,              /* v5/v6 aliassen */
.fa-solid, .fa-regular, .fa-light, .fa-thin,      /* v6 stijlklassen */
.fa-duotone, .fa-brands {
  font-style: normal !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Solid (Free/Pro) */
.fas, .fa-solid, .fa {                            /* .fa als fallback */
  font-family: "Font Awesome 6 Free" !important;  /* of "Font Awesome 6 Pro" */
  font-weight: 900 !important;
}

/* Regular (Free/Pro) */
.far, .fa-regular {
  font-family: "Font Awesome 6 Free" !important;  /* of "Font Awesome 6 Pro" */
  font-weight: 400 !important;
}

/* Brands */
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
}

/* (optioneel) Light/Thin/Duotone alleen als je Pro gebruikt
.fa-light  { font-family:"Font Awesome 6 Pro" !important; font-weight:300 !important; }
.fa-thin   { font-family:"Font Awesome 6 Pro" !important; font-weight:100 !important; }
.fa-duotone{ font-family:"Font Awesome 6 Duotone" !important; font-weight:900 !important; }
*/

/* Zorg dat pseudo-elementen de juiste font-family erven */
.fa::before,
.fas::before, .far::before, .fal::before, .fat::before, .fad::before, .fab::before,
.fa-solid::before, .fa-regular::before, .fa-light::before, .fa-thin::before, .fa-duotone::before, .fa-brands::before {
  font-family: inherit !important;
  font-weight: inherit !important;
}
} /* <-- Close @layer base */


/* ==========================================================================
   LAYOUT (grote pagina-secties/structuur)
   ========================================================================== */
@layer layout {
.sc-fpaRTa.iTmfKK,
[data-testid="dashboard-content-block-511"] {
  width: 100% !important; /* beide vullen de container */
  max-width: none !important;
}
[data-testid="accouncementCard-welcometext-openSidebar"]{
background-color: var(--blue) !important;
}
.diUcur{
display:none !important;
}

  #login-cont {
  width: 50% !important;
  min-height: 450px !important;    /* behoud visuele balans */
  height: auto !important; /* laat meegroeien met inhoud */
  overflow: visible !important;
    color: #FFFFFF;
    display: flex !important;
    flex-direction: column !important;
    align-items: center  !important;
    margin: 2% auto !important;
    padding: 10px;
    background: var(--white) !important;
    background-color: var(--white)!important;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5) !important;
  }


  .container.list-content {
    padding-top: 1px;
  }
.grouped-course-view {
    width: 75%;
}
.grouped-course-view .row {
display: flex !Important;}

  .grouped-course-view .levels-container {
    display: flex;
    flex-wrap: wrap
  }
.grouped-course-view .row .span4 {
    width: 50% !important;
}

.grouped-course-view .row .span8 {
    width: 50% !important;
}

  .banner-list {
    position: relative;
    top: -5vh;
  }

  #Dashboard_Banner,
  #the-stage-cont {
    margin-top: 1%;
  }

.level-group-box .instruction {
  display: none !important;
}
  #Dashboard_Banner {
    background-position: center !important;
    background-size: contain !important;
    position: relative;
    background-repeat: no-repeat;
    padding-bottom: 13% !important;
  }

html, body, .stream-ui-5qg6c   {
    clip-path: inherit !important;

  }

html, body, .stream-ui-5qg6c, .jayLbL > :first-child, .IpanL > :first-child:not(.MuiAlert-root), .ehtKSG > :first-child, .gVazUC, .ioXkJK {
    background-color: var(--white) !important;
background: var(--white) !important;

}

  .stream-ui-1u5t03o > [data-testid="status-bar-container"] {
    display: block; /* of inline/flex afhankelijk van behoefte */
}


/* ==========================================================================
   MODULES (component-specifiek)
   ========================================================================== */
@layer modules {

 
#welcome {
     background: none !important;
    background-color: #243470 !important;
    float: none !important;
    padding: 0 !important;
    text-align: center !important;
    margin: 2rem !important;
    width: 55% !important;
}


  #form-cont #form-inner {
    padding: 5% 10px !important;
    background-color: initial;
    border-radius: unset;
  }

  #gamebar {
    border-top: unset !important;
  }


  [data-testid="statuses-launchButton"]{
    max-height: 10%;
  }

  [data-testid="statuses-courseName"]{
    white-space: normal !important;
    max-width: 90% !important;
  }

  .course-banner-container{
    margin-bottom: 0px !important;
  }

  .dmlhlp > :first-child {
    padding-top: 0px !important;
  }

  .card .section{
    border-bottom: unset !important;
  }

  .heading-large{
    padding: 5px !important;
  }

  .sc-cLNonn.crDmBm  {
    background: none !important;
    background-color: var(--white) !important;
  }

  .img-circle {
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
  }

  .card.card-flat .section[style*="max-height: 300px"] {
    max-height: none !important;
    overflow-y: visible !important;
  }

  .jss39.jss43.jss40.level-card,
  .card,
  .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.sc-hAQmFe.kiwaJv{
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5) !important;
  }

  /* Gevraagde aanvulling voor banner image */
  .banner-list .course-banner-container .course-banner-img {
    padding: 1% !important;
    background-size: contain !important;
  }
}
/* Close @layer responsive */


/* ==========================================================================
   THEME (kleuren/achtergronden)
   ========================================================================== */
@layer theme {

  /* Pagina-achtergrond (niet breed op alle children) */
  html, body {
    background-color: var(--white) !important;
  }

  /* Gerichte achtergrondtint zoals origineel */
  body,
  #stream-container,
  .sc-fpaRTa,
  .sc-cfQIsQ,
  .sc-jneFjB,
  .sc-cBBlDJ,
  .banner-list .course-banner-container .course-banner-img,
  .dmlhlp > :first-child,
.FytiU> :first-child,
.UmFLF > :first-child ,
.iBgeaJ > :first-child:not(.MuiAlert-root),
  .flGLJw,
  #form-inner .text-center {
    background-color: var(--white) !important;
  }

  .back-link{
    color: var( --gb-zwart) !important;
  }
}


/* ==========================================================================
   STATE (zichtbaarheid/toestanden)
   ========================================================================== */
@layer state {

  /* Alles wat je niet wil laten zien komt hier */
  .MuiContainer-root.MuiContainer-maxWidthLg.stream-ui-1k27770-font {
    display: none;
  }

  .grouped-course-view .section-header {
    display: none !important;
  }

  .fuRExX,
  .kuEzUY,
  #actions-menu,
  #NavBar_SearchButtonMobile,
  #NavBar_AddFocusAreaButton,
  #NavBar_UserMenuContainer_ListItem_my-team,
  #NavBar_UserMenuContainer_ListItem_my-reports,
  #NavBar_UserMenuContainer_ListItem_archive,
  .stream-ui-1gj8hnm,
  #nudge-region,
  #welcome-text,
  span#obj-nudge, .kwjdhw {
    display: none !important;
  }

  .stream-ui-fete8q {
    display: none !important;
  }

  #course-leaderboards-button,
  #course-back-button {
    display: none !important;
  }

  .level-progress-container,
  .status {
    display: none !important;
  }

  .object-item .item-progress, #object-viewer-description {
    display: none !important;
  }
.object-item .item-description .contents, .grouped-course-view .level-group-box .levels-container .level-item .img-full-width { 
    -webkit-border-radius: 0px !important; 
    -moz-border-radius: 0px !important; 
    -ms-border-radius: 0px !important; 
    border-radius: 0px !important; 
    background: var(--white) !important; 
}

  .object-item .card.complete .xp {
    display: none !important;
  }

  #course-completion-panel {
    display: none !important;
  }

  .admin-wrapper .btn.btn-primary:nth-of-type(2) {
    display: none !important;
  }

  ul.MuiList-root.MuiList-padding.stream-ui-1ontqvh li:first-child {
    display: none;
  }

  [aria-label="Dashboard"],
  [aria-label="Support"]{
    visibility: hidden;
  }

  [data-testid="info-lx"]{
    display: none !important;
  }

  /* Deze stond in je originele "Styling & Layout", maar is semantisch staat */
  .class-info-panel .card.card-flat .section:nth-of-type(3) {
    display: none !important;
  }
}


/* ==========================================================================
   UTILITIES (kleine helpers)
   ========================================================================== */
@layer utilities {
  .ieyrg{
    font-size: 1rem !important;
  }
}


/* ==========================================================================
   RESPONSIVE (media queries onderaan)
   ========================================================================== */
@layer responsive {
  @media (max-width: 767px) {

  #login-cont {
    width: 90% !important;
    min-height: 60vh;      /* prettige hoogte op mobiel */
    height: auto !important;
  }

    #form-cont{
      overflow: inherit !important;
    }
.grouped-course-view {
    width: 100% !important;
}
  }
}


/* Laptop (bijvoorbeeld 1024px tot 1440px breed) */
@media screen and (min-width: 1024px) and (max-width: 1440px) {
.grouped-course-view {
    width: 100% !important;
}
  .grouped-course-view .levels-container {
    display: flex;
    flex-wrap: no-wrap;
  }
.grouped-course-view .row .span4 {
    width: 35% !important;
}

.grouped-course-view .row .span8 {
    width: 65% !important;
}


body .sc-kTxHUi.gjRoSl, body .sc-hbqYmb.faSVOw, body .sc-hxOqGs.cnsWFY.slider-wrapper {
  max-width: 100% !important;
}

    .fMacjw {
    max-width: 100% !important;
      margin-left: inherit;
        margin-right: inherit; 
        padding-left: 20px;
        padding-right: 20px;
    }

}

/* iPhone (bijvoorbeeld tot 480px breed) */
@media screen and (max-width: 480px) {

}

/* Desktop (groter dan 1440px breed) */
@media screen and (min-width: 1441px) {

}

/* Tablet (bijvoorbeeld tussen 481px en 1023px breed) */
@media screen and (min-width: 481px) and (max-width: 1023px) {
}

@media (min-width: 600px) {


  
}
}