/*@supports(scrollbar-width:thin) {
    * {
        scrollbar-width: thin;
        scrollbar-color: green transparent
    }*/
    
  :root
  {
   --numberofcolumns: 20;
   --gap-size: 10px;	
   --date-column-width: 300px;
   --grid-fontsize: 14px;
   --flex-fontsize: 14px; 
      
   --scheduler-header-backgroundcolour: #4B9EE5;
   --scheduler-header-foregroundcolour: #FAEBD7; 
      
   --scheduler-live: #275094      
  }

  .grid
  {
   display: inline-grid;
   gap: var(--gap-size);
   grid-auto-flow: row;
   grid-template-columns: repeat(var(--numberofcolumns), var(--date-column-width));
  }   
     
 /* \/ \/ GRID HEADERS \/ \/ */     
 .grid-scheduling-headers
 {     				
  background-color: var(--primary-body-backgroundcolour);
 }	
     
 .grid-scheduling-headers .header
 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--scheduler-header-backgroundcolour);     
  color: var(--scheduler-header-foregroundcolour);
  padding: 1rem 0.75rem;     
 }
   
 .grid-scheduling-headers .header .weekday
 {
  text-transform: uppercase;
  font-size: calc(0.5vw + 0.5vh + 0.35vmin);
  font-weight: var(--font-weight-medium);
 }
     
 .grid-scheduling-headers .header .date
 {
  text-transform: uppercase;
  font-size: calc(0.35vw + 0.35vh + 0.35vmin);
  font-weight: var(--font-weight-medium);
 }
     
 .grid-scheduling-headers .header .date .nths
 {
  display: inline-block; 
  vertical-align: top; 
  font-size: calc(0.25vw + 0.25vh + 0.20vmin);	
  padding-right: 0.1rem;
  font-weight: var(--font-weight-medium);     
 }
 /* /\ /\ GRID HEADERS /\ /\ */
     
 /* \/ \/ GRID SCHEDULING \/ \/ */
 .grid-scheduling-video
 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;     
  width: 100%        
 }
 
 .grid-scheduling-video a
 {
  width: 100%;     
  max-width: 100%;   
 }
     
 .grid-scheduling-video img
 {
  max-width: 100%;
  border-radius: 10px;     
 }
     
 .grid-scheduling-video .title
 {
  align-self: self-start;     
  margin: 6px 4px 0px;
  font-size: var(--grid-fontsize);
  line-height: calc(var(--grid-fontsize) + 2px);    
  height: calc((var(--grid-fontsize) + 2px) * 2);     
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;         
  color: var(--primary-colour-light);     
 }
     
 .grid-scheduling-video .published
 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  margin-top: 6px;
  width: 100%;     
  height: var(--line-height);
 }
     
 .grid-scheduling-video .published .date
 {
  font-size: 1.1em;     
  color: var(--primary-colour-light);
  margin-right: 4px;    
 }
       
 /* \/ \/ FLEXBOX HEADERS \/ \/ */     
  .flex-scheduling-header
  {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;  
   align-items: center;
   justify-content: center;      
   width: 100%;
   min-width: 100%;   
   padding: 0px 10px;   
   margin-bottom: 10px; 
   color: var(--scheduler-header-foregroundcolour); 
  }
    
  .flex-scheduling-header:not(:first-child)
  {
   margin-top: 20px;
  }
        
  .flex-scheduling-header .date
  {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;  
   align-items: center;
   justify-content: center;
   text-transform: uppercase;
   width: 100%;
   min-width: 100%;       
   padding: 10px;
   background-color: var(--scheduler-header-backgroundcolour);        
  }

  .flex-scheduling-header .date .weekday
  {
   font-size: calc(0.75vw + 0.75vh + 0.65vmin);
   font-weight: var(--font-weight-medium);       
   text-transform: uppercase; 
  }
     
  .flex-scheduling-header .date .day
  {
   text-transform: uppercase;
   font-size: calc(0.5vw + 0.5vh + 0.5vmin);
   font-weight: var(--font-weight-medium);       
  }     
     
  .flex-scheduling-header .date .day .nths
  {
   display: inline-block; 
   vertical-align: top; 
   font-size: calc(0.5vw + 0.5vh + 0.40vmin);	
   padding-right: 0.1rem;
   font-weight: var(--font-weight-medium);       
  }
  /* /\ /\ FLEXBOX HEADERS /\ /\ */   
		
  /* \/ \/ FLEXBOX VIDEO \/ \/ */      
     
  .flex-scheduling-video
  {
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   width: 100%;
   max-width: 100%;       
   padding: 0.625rem;  
  }
  
  .flex-scheduling-video a, .flex-scheduling-video img
  {
   width: inherit;
   max-width: inherit;      
  }
     
  .flex-scheduling-video .title
  {
   color: white;
   font-size: var(--flex-fontsize);      
  }
  
  .flex-scheduling-video .published    
  {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: flex-end;
   width: 100%;
   margin-top: 10px;
  }
     
  .flex-scheduling-video .published .date
  {
   font-size: var(--flex-fontsize);
   color: white;     
  }

  /* /\ /\ FLEXBOX VIDEO /\ /\ */ 

  /* \/ \/ GRID & FLEXBOX VIDEO \/ \/ */    
 span.live
 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: var(--line-height);
  border-radius: 0.1875rem;
  padding: 0 1rem;
  background-color: var(--scheduler-live);
  color: var(--primary-colour-light);
  font-weight: var(--font-weight-medium);       
  text-transform: uppercase;
  user-select: none;     
 }  
  /* /\ /\ GRID & FLEXBOX VIDEO /\ /\ */