/* login */
div#riot-login-container
  { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
div#riot-login-container a
  { display: block; width: 100%; }
div#riot-login-container a img
  { display: block; width: 100%; height: auto; }
div#riot-login-container a:hover img
  { opacity: .7; }

/* calendar */
div#calendar-container
  { display: block; position: relative; width: 100%; max-width: 900px; margin: 2em auto; z-index: 0; }
div#calendar-container div.calendar-item
  { display: block; position: relative; z-index: 2; background-color: #ffffff; padding: .5em; }
div#calendar-container div.calendar-item + div.calendar-item
  { margin-top: 3em; }
div#calendar-container div.calendar-item div.calendar-item-label
  { color: #000000 !important; line-height: 1em; font-size: 1.4em; font-family: 'esp-title', sans-serif; text-align: center; text-transform: uppercase; }
div#calendar-container div.calendar-item div.calendar-item-details
  { background-color: #000000; color: #ffffff; width: 100%; margin: .5em 0; }
div#calendar-container div.calendar-item div.calendar-item-details div.calendar-item-details-line
  { padding: .5em 0; }
div#calendar-container div.calendar-item div.calendar-item-details div.calendar-item-details-line + div.calendar-item-details-line
  { padding-top: 0; }
div#calendar-container div.calendar-item div.calendar-item-details div.calendar-item-details-item span
  { display: block; font-size: .7em; text-align: center; }
div#calendar-container div.calendar-item div.calendar-item-dates
  { color: #000000 !important; line-height: 1em; font-size: 1.2em; font-family: 'esp-title', sans-serif; text-align: center; text-transform: uppercase;  }
  
div#calendar-container div#calendar-item-open-qualifier
  { background-color: #00ffc4; }
div#calendar-container div#calendar-item-blender-spotlight
  {  background: var(--color-main); background: linear-gradient(435deg, rgba(0, 255, 196, 1) 5%, rgba(255, 234, 0, 1) 33.33%, rgba(255, 119, 39, 1) 66.666%, rgba(255, 51, 51, 1) 95%); }
div#calendar-container div#calendar-item-round-robin
  { background-color: #ffea00; }
div#calendar-container div#calendar-item-swiss-system
  { background-color: #ff7727; }
div#calendar-container div#calendar-item-final-bracket
  { background-color: #ff3333; }
  
div#calendar-container div.calendar-item::before
  { display: block; position: absolute; content : "";
  height : 0; width : 0; top: 70%; left: -30px; z-index: -1; transform: rotate(-50deg);
  border-top : 20px solid #ffffff; border-left : 60px solid transparent; }
div#calendar-container div.calendar-item::after
  { display: block; position: absolute; content : "";
  height : 0; width : 0; top: 20%; right: -30px; z-index: -1; transform: rotate(140deg);
  border-top : 20px solid #ffffff; border-left : 60px solid transparent; }

div#calendar-container div#calendar-item-open-qualifier::before,
div#calendar-container div#calendar-item-open-qualifier::after,
div#calendar-container div#calendar-item-blender-spotlight::before
  { border-top-color: #00ffc4; }  
div#calendar-container div#calendar-item-round-robin::before,
div#calendar-container div#calendar-item-round-robin::after
  { border-top-color: #ffea00; }  
div#calendar-container div#calendar-item-swiss-system::before,
div#calendar-container div#calendar-item-swiss-system::after
  { border-top-color: #ff7727; }
div#calendar-container div#calendar-item-blender-spotlight::after,
div#calendar-container div#calendar-item-final-bracket::before,
div#calendar-container div#calendar-item-final-bracket::after
  { border-top-color: #ff3333; }  
  
div#calendar-container div.calendar-item.ended
  { background-color: #141414 !important;  background: #141414 !important; }
div#calendar-container div.calendar-item.ended div.calendar-item-label,
div#calendar-container div.calendar-item.ended div.calendar-item-details div.calendar-item-details-item span,
div#calendar-container div.calendar-item.ended div.calendar-item-dates
  { color: #AAAAAA !important }
div#calendar-container div.calendar-item.ended::before,
div#calendar-container div.calendar-item.ended::after
  { border-top-color: #141414 !important; }