.center-loading {
    /*position: absolute;
    display:block;*/
    height: 85vh;
    width: 100%;
    background:  rgba(255,255,255,0.7);		
    overflow: auto;
    z-index: 888;	
    opacity:1;	
    -webkit-transition: opacity 200ms ease-in;	
    -moz-transition: opacity 200ms ease-in;		
    transition: opacity 200ms ease-in;		
    pointer-events: auto;
    border-radius: 10px;
  }

  .center-loading img{   
     width: 30px;
    height: 30px;
    top: 20vh;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 60px 45% 0px 45%;

  }


  
#loading { background:  rgba(255,255,255,0.8);		display:none;position: fixed;overflow: auto;
  top: 0px;	right: 0;bottom: 0;	left: 0;z-index: 888;	opacity:1;	-webkit-transition: opacity 200ms ease-in;	-moz-transition: opacity 200ms ease-in;		transition: opacity 200ms ease-in;		pointer-events: auto;}

#loading img{ /*background:#FFFCF0;  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;*/ position: fixed;
top: 50%;
left: 50%; margin-top:-50px;  margin-left:-50px}
  


  .float-right{float: right;}

  .h-\[100dvh\]{
    height: 100dvh;
  }
  
  .h-\[80dvh\]{
    height: 80dvh;
  }

  .h-\[75dvh\]{
    height: 75dvh;
  }

  .h-\[50dvh\]{
    height: 50dvh;
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }


  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }



  .bg-custom-purple{
    background-color: #9E00F4;
  }

  .mediaitem {
    transition: border 0.3s ease-in-out; /* Smooth transition */
  }
  
  .mediaitem:active   {
    border: 4px solid green;  /* Green glow effect */
  }  
  
  .mediaitem:focus  {
    border: 4px solid green;  /* Green glow effect */
  }

  .mediaitem_clicked { border: 4px solid #5bca85;}

  .articlelike{cursor:default; }
  .articlelike:hover{cursor:default; color:#9E00F4 ;}

   .canvas-active{ border-left: 1px solid #a32a2a; color:#a32a2a}
    .canvas-active span{ color:#a32a2a}