.event-bg{position:absolute; z-index:1; top:0; left:0; width:100%; height:233px; border-radius:0 0 var(--size-5) var(--size-5);
  background:linear-gradient(to right,var(--color-text-3) 0%,var(--color-text-5) 100%);}
  .event-bg .svgicon{position:absolute; right:var(--size-3); bottom:var(--size-3); width:auto; height:89%;}
  
  
  
  .event-highlight{position:relative; z-index:1000;}
  .event-highlight .section-title{margin-bottom:var(--size-4); color:var(--bg-2); text-shadow:5px 5px 13px rgb(var(--color-border-dark) / 34%);}
  .event-highlight-split, .event-notif-split{--poster-size:300px; display:grid; grid-gap:var(--size-3);}
  .event-highlight-poster .event-frame{width:100%; max-width:var(--poster-size); box-shadow:var(--shadow-default);}
  .event-highlight-calendar{padding:var(--size-3); border-radius:var(--rounded-2); background-color:var(--bg-2); box-shadow:var(--shadow-default);}
  .event-highlight-calendar .table-condensed{width:100%;}
  
  .event-highlight-calendar tr > *{text-align:center; padding:var(--size-2) 0; line-height:100%;}
  .event-highlight-calendar tr > *:hover{cursor:pointer;}
  .event-highlight-calendar tr td[colspan="7"] span{padding:var(--size-2);}
  .event-highlight-calendar tr > th,
  .event-highlight-calendar .today.day, 
  .event-highlight-calendar .active.day{font-weight:bold;}
  .event-highlight-calendar .prev,
  .event-highlight-calendar .datepicker-switch,
  .event-highlight-calendar .next{font-size:20px; color:var(--color-text-3);} 
  .event-highlight-calendar .today.day{color:var(--color-text-3);}
  /* .event-highlight-calendar .active.day{background: var(--color-text-5); color: var(--bg-2);} */
  .event-highlight-calendar .active.day{color: var(--color-text-5); position: relative;}
  .event-highlight-calendar .active.day::before{content: ''; position: absolute; height: 30px; width: 30px; bottom: 0; left: 50%; transform: translate(-50%, 0);  border-radius: 50%; border: 1px solid var(--color-text-5);}
  .event-highlight-calendar .isEvent.day{position: relative;}
  .event-highlight-calendar .isEvent.day::after{content: ''; position: absolute; height: var(--size-2); width: var(--size-2); bottom: 0; left: 50%; transform: translate(-50%, 0);  border-radius: 50%; background-color: var(--color-text-3);}
  /* .event-highlight-calendar .active.day.isEvent{background:var(--color-text-3); color:var(--color-text-5);}
  .event-highlight-calendar .today.day.isEvent{background:var(--color-text-3); color: #fff;} */
  .event-highlight-calendar .old.day, .event-highlight-calendar .new.day{color:var(--bg-3);}
  td.newClass> { background: red !important; }
  .event-notif-split{width: 100%;}
  .event-notif-box{width:100%; max-width:480px; padding:var(--size-4); display:grid; align-items: center; grid-gap:var(--size-3); grid-template-columns:1fr auto; line-height:140%;
  border-radius:var(--rounded-2); background-color:var(--bg-2); box-shadow:var(--shadow-default);}
  .event-notif-box b{color:var(--color-text-2);}
  
  
  .event-highlight-calendar .ui-datepicker-header, .event-highlight-calendar .ui-datepicker-calendar{width:100%;}
  .event-highlight-calendar .ui-datepicker-header{position: relative; display: grid; grid-template-columns: repeat(3, 1fr);}
  
  
  
  @media screen and (min-width:0px) and (max-width:1023px){
    .event-bg .svgicon{opacity:0.55;}
    .event-notif-split{justify-content: center; justify-items: center;}
    .event-end-container{display: grid; justify-content: center; grid-template-columns: 1fr;}
  }
  
  
  
  
  
  @media screen and (min-width:1024px){
    .event-highlight-split, .event-notif-split{grid-template-columns:1fr var(--poster-size);}
    .event-highlight-split > *, .event-notif-split > *{grid-row:1/2;}
    .event-highlight-poster, .event-notif-box{grid-column:2/3;}
  }