/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 01 2022 | 05:29:20 */
body {
    background: #F9F9F9 none repeat scroll 0% 0%;
    margin: 0px;
}

.container {
  padding-left:20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "int-year cat-month int-month cat-day"
    "txt-year cat-month text-month cat-day";
}

.cat-month {

  align-self: center;
  grid-area: cat-month;
}

.cat-day {

  align-self: center;
  grid-area: cat-day;
}

.int-year { grid-area: int-year; }

.txt-year { grid-area: txt-year; }

.int-month { grid-area: int-month;}

.text-month { grid-area: text-month;}



.calendar table{
  margin:0px !important;
}

.calendar header{
  margin-bottom:0.7vw;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

.calendar .day.today{
  /*
  color: black !important;
  */
}

.title{
    text-align: center;
}

.calendar table{
  font-size:initial !important;
}

.calendar .day.has-event:after{
  background:transparent !important;
}

.calendar-container{
    position: absolute;
    /* margin: 50px auto;*/
    /*max-width: 500px;*/
    width:100% !important;
    /*height:100%;*/
}

@media only screen and (max-width: 1024px) and (min-width:770px){
  /*.calendar .btn-prev{
    top:4vw !important;
  }
  .calendar .btn-next{
    top:4vw !important;
  }*/
  
  .calendar header{
	/*margin-left:0.7vw !important;
	margin-right:0.6vw !important;*/
  }
  
  .btn-prev{
      top:2.3vw !important;
  }

  .btn-next{
      top:2.3vw !important;
  }
  
  #container th{
    font-size:1.3vw;
  }
    .calendar header{
      height:6.5vw !important;
    
  }
  .calendar month{
    font-size:3vw !important;
  }
  
  .HI{
    height:3.2vw !important;
  }
  #calendar-image{
    height:39.5vw !important;
  }
  .calendar .day{
    width:90%;
    height:4.9vw;
  }
  
    .rb-container{
    gap:1vw 0.5vw !important;
  }
  .rb-date{
    font-size:7vw !important;
  }
  .rb-chinese-date{
    font-size:2vw !important;
  }
  .rb-chinese-date-2{
    font-size:2vw !important;
  }
  
  .rb-yeegaycontainer {
  	gap:1vw 0.5vw !important;
  }
  
  .red-circle{
    width:4vw !important;
    height:4vw !important;
    line-height:4vw !important;
    font-size:2.5vw !important;
  }
  
    .black-circle{
    width:4vw !important;
    height:4vw !important;
    line-height:4vw !important;
    font-size:2.5vw !important;
  }
  .text-after-circle{
    font-size:2vw !important;
    padding-left:1vw !important;
    word-spacing:1vw !important;
  }
  
  .calendar .header{
    font-size:2.3vw ;
  }
  
    .rb-24weather{
    font-size:2vw !important;
  }
}

@media only screen and (max-width: 769px) and (min-width:601px) {
    /*.calendar .btn-prev{
    top:4vw !important;
  }
  .calendar .btn-next{
    top:4vw !important;
  }*/
    .rb-24weather{
    font-size:2vw !important;
  }
  
  .calendar header{
	/*margin-left:0.7vw !important;
	margin-right:0.6vw !important;*/
  }
  
  .btn-prev{
      top:2.3vw !important;
  }

  .btn-next{
      top:2.3vw !important;
  }
  
  #container th{
    font-size:1.3vw;
  }

  
  .HI{
    height:3.2vw !important;
  }
  
  .calendar .day{
    width:90%;
    height:4.9vw;
  }
  
    .rb-container{
    gap:1vw 0.5vw !important;
  }
  .rb-date{
    font-size:7vw !important;
  }
  .rb-chinese-date{
    font-size:2vw !important;
  }
  .rb-chinese-date-2{
    font-size:2vw !important;
  }
  
  .rb-yeegaycontainer {
  	gap:1vw 0.5vw !important;
  }
  
  .red-circle{
    width:4vw !important;
    height:4vw !important;
    line-height:4vw !important;
    font-size:2.5vw !important;
  }
  
    .black-circle{
    width:4vw !important;
    height:4vw !important;
    line-height:4vw !important;
    font-size:2.5vw !important;
  }
  .text-after-circle{
    font-size:2vw !important;
    padding-left:1vw !important;
    word-spacing:1vw !important;
  }
  
  .calendar .header{
    font-size:2.3vw ;
  }
    #calendar-image{
    height:40vw !important;
  }
  
  .calendar header{
      height:6.5vw !important;
    
  }
  .calendar .month{
    font-size:3vw !important;
  }
}

@media only screen and (max-width: 600px) {
  .calendar td{
    font-size:3.5vw !important;
    padding:1vw 0.1vw !important;
    
  }
  
  #container th{
    font-size:2.6vw !important;
  }
  
    #calendar-image{
    height:auto !important;
      margin-bottom:0px !important;
      max-width:84vw !important;
  }
  
  .calendar .month{
  	font-size:8vw !important;
  }
  
    .calendar header{
      height:20.5vw !important;
        	margin-left:1vw !important;
    margin-right:0.9vw !important;
  }
  
    .calendar .day{
    width:10.5vw;
    height:10.5vw;
  }
  
  .rb-container{
    gap:3vw 0.5vw !important;
  }
  .rb-date{
    font-size:13vw !important;
  }
  .rb-chinese-date{
    font-size:5vw !important;
  }
  .rb-chinese-date-2{
    font-size:5vw !important;
  }
  .rb-24weather{
    font-size:5vw !important;
  }
  .rb-yeegaycontainer {
  	gap:2vw 0px !important;
  }
  
  .red-circle{
    width:8vw !important;
    height:8vw !important;
    line-height:8vw !important;
    font-size:5vw !important;
  }
  
    .black-circle{
    width:8vw !important;
    height:8vw !important;
    line-height:8vw !important;
    font-size:5vw !important;
  }
  .text-after-circle{
    font-size:4vw !important;
    padding-left:2vw !important;
    word-spacing:2vw !important;
  }
  
   .calendar .btn-prev{
    top:8vw !important;
  }
  .calendar .btn-next{
    top:8vw !important;
  }
  
  .HI{
    height:7.2vw !important;
    margin-top:6px !important;
  }
  
  .HI th{
    line-height:4.5vw !important;
  }
  .calendar-container{
    position:initial !important;
  }
}

.calendar header{
    height:4.5vw;
    background-color: rgb(150,35,35);
  margin-left: 4px;
  margin-right: 4px;
}

.calendar thead{
    font-size: 0.8em !important;
}

.calendar tbody{
  border-color:transparent !important;
}

.calendar td{
  font-size:1.5vw;
  padding: .4vw .1vw;
  border-color:transparent !important;
}

@media (min-width: 1025px) {
  .calendar .day{
      width:3.6vw !important;
    height: calc(3.6vw - 1px) !important;
  }
  
  .calendar td{
    font-size:1vw !important;
  }
  
  .calendar .month{
      font-size:2.3vw !important;
  }
  
.btn-prev{
    top:1.6vw !important;
}

.btn-next{
    top:1.6vw !important;
}


}

.calendar .day{
	/*font-size:14px;*/
    text-align:left !important;
    background-color:white !important;
    border-radius:initial !important;
    border:2px black !important;
    line-height:normal !important;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7) !important;
}

.calendar .month{
    height:100%;
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    color:white;
  font-size:3vw;
    /*vertical-align: middle;*/
}

.calendar thead{
    background-color: white;
    border: 1px solid;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
    height:3.5em;
} 

.event-wrapper{
    overflow-y:visible !important;
}

.event-container{
    background:rgb(150,35,35) !important;
    padding:20px !important;
    padding-top:20px !important;
}

.filler{
    background:rgb(150,35,35) !important;
}

.btn-prev{
    top:1.6vw;
}

.btn-next{
    top:1.6vw;
}

.rb-container {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 3fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.5vw 0.5vw;
  grid-auto-flow: row;
  grid-template-areas:
    "rb-date rb-chinese-date rb-24weather ."
    "rb-date rb-chinese-date-2 . .";
}

.rb-date { grid-area: rb-date; }

.rb-chinese-date { grid-area: rb-chinese-date; }

.rb-chinese-date-2 { grid-area: rb-chinese-date-2; }

.rb-24weather { grid-area: rb-24weather; }


.rb-yeegaycontainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2vh 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "rb-yee rb-yee rb-yee"
    "rb-gay rb-gay rb-chiu";
}

.rb-yee { grid-area: rb-yee; 
}

.rb-gay { grid-area: rb-gay; }

.rb-chiu { grid-area: rb-chiu; }

.red-circle{
  width: 2.6vw;
  height: 2.6vw;
  line-height: 2.6vw;
  border-radius: 50%;
  font-size: 1.4vw;
  color: #fff;
  text-align: center;
  background: red;
  display:inline-block;
}

.black-circle{
  width: 2.6vw;
  height: 2.6vw;
  line-height: 2.6vw;
  border-radius: 50%;
  font-size: 1.4vw;
  color: #fff;
  text-align: center;
  background: black;
  display:inline-block;
}

.text-after-circle{
  display:inline-block;
  padding-left:1vw;
  font-size: 1.5vw;
  word-spacing:1vw;
}




.HI{
  background-color:white;
  font-size: 1.3em !important;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
  height:3.1vw;
  margin-bottom: 1px !important;
  margin-left: 4px;
  margin-right: 4px
}

.HI th{
  	border:0;
	width:1%;
	padding:.4em .26em;
  	height: 3.1vw;
  	vertical-align:middle;
  	font-size: 1vw;
}