@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@1&display=swap');
@import url("https://use.fontawesome.com/releases/v5.0.8/css/all.css");

/* aangepast 12/01/2026 - OI&S - valerie van der Linden

##eventueel text-decoration weghalen bij de huidige roc template, maar zorgt ook weer voor problemen op gekleurde vlakken, dus uit
.user_content .grid-row a {
    color: var(--ic-brand-primary);
    text-decoration: none !important;
}
*/

/*  instructure styles */

/*  menu-item active de kleur rood of oranje geven */
#section-tabs a.active{
    color: var(--ic-brand-primary);
    border:none;
}

/*  module balken achtergrond en de kleur tekst van de header zwart is beter leesbaar */

.item-group-condensed .ig-header {
    background-color: #eaedf1;  /*var(--ic-brand-global-nav-bgd); var geeft problemen in high-contrast view */ 
    border-bottom: 3px solid var(--ic-brand-button--secondary-bgd-darkened-15);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/*  header admin gedeelte wat beter eruit laten springen */
.ig-header .ig-header-admin {
    background-color: #f7f8f8;
    border-radius: 5px;
}

/*  module balken achtergrond (admin) de + bolder is beter leesbaar */
.ig-header .ig-header-admin i[class*=icon-]:before,
.ig-header .ig-header-admin i[class^=icon-]:before,
.ig-header .ig-header-admin a[class*=icon-]:before,
.ig-header .ig-header-admin a[class^=icon-]:before {
    font-weight: bolder !important;
    color:var(--ic-brand-font-color-dark);
}


/*  tbv oude template (homepage) */

/* rode banner en achterliggende afbeelding */
.roc-banner-img{
 visibility: hidden;
}

.roc-banner-container{
    height: auto;
}

.roc-banner-text{
  width: auto;
  margin: 0;
  height: auto;
}

img[alt^="banner"], .roc-banner-container img
 {
    height: auto;
    width: 100%;
    max-width: 1590px;
    height: 200px;
    object-fit: cover;
}

.roc-shadow {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1) !important;
  -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1) !important;
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1) !important;
  width:100%;
}

/* blokken aan de onderkant */
.roc-blocks{
 height: 100%;
 overflow: hidden;
}

.roc-blocks img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 25%;
}

/* linkjes in blokken */
.roc-arrow-link{
    color: white;
    display: flex;
    flex-direction: row;
    text-align: right;
    justify-content: flex-end;
    padding-top:6px;
}

.roc-arrow-link::before{
     font-family: 'Material Symbols Outlined';
      content: '\e5c8';
}

/* verwijzing naar docent */
.roc-teacher::before{
     font-family: 'Material Symbols Outlined';
     content: '\e7fd'; 
      font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;   
}

/* oude icoontje weghalen */
.fa-user:before {
    display:none
}

.roc-teacher{
    display: flex;
    flex-direction: row;
    align-items: end;
}


/* tiny mce styles
col-xs-12 col-md-4 col-lg-4
col-xs-12 col-md-8 col-lg-8
*/

.mce-content-body .content-box .grid-row, .content-box .grid-row.roc-grid {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.mce-content-body .content-box .grid-row .col-xs-12
.mce-content-body .col-xs-12.roc-shadow {
    flex-basis: 100%;
    max-width: 100%;
}

    .mce-content-body .content-box .grid-row .col-xs-12, 
    .mce-content-body .content-box .grid-row .col-lg-8, 
    .mce-content-body .content-box .grid-row .col-md-8, 
    .mce-content-body .content-box .grid-row .col-md-4, 
    .mce-content-body .content-box .roc-grid .col-lg-4  {
        box-sizing: border-box; 
        display: flex;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        padding-right: 12px;
        padding-left: 12px;
    }

   .mce-content-body .content-box .grid-row .col-lg-8, 
   .mce-content-body .content-box .grid-row .col-md-8 {
        flex-basis: 66.6666666667%;
        max-width: 66.6666666667%;
    }

    .mce-content-body .content-box .grid-row .col-md-4 {
        flex-basis: 33.3333333333%;
        max-width: 33.3333333333%;
    }