.calender-outer {
  margin: auto;
  width: fit-content;
}
.calender-datelist {
  /* height: 510px; */
  height: 548px;
  background-color: #e66b6b;
  float: left;
  max-width: 320px;
  border-radius: 10px;
  position: relative;
  overflow-y: scroll;
}
.calendar-container table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.calendar-container td {
  padding: 0;
}

.calendar-container {
  position: relative;
  width: 320px;
  margin-right: 10px;
}

.calendar-container header {
  border-radius: 1em 1em 0 0;
  background: #EAB000;
  color: #fff;
  padding: 3em 2em;
}

.datelist-programs {
  padding: 2em;
}

.datelist-programs ul li {
    list-style: none;
    font-size: 1.2em;
    margin: 1em;
}

.datelist-programs ul li a {
  color: #fff;
}
.calendar td a{
  color: #fff;
}
.day {
  font-size: 8em;
  font-weight: 900;
  line-height: 1em;
}

.month {
  font-size: 4em;
  line-height: 1em;
  text-transform: lowercase;
}

.previous-calender-month {
  display: none;
}

.calendar {
  background: #fff;
  border-radius: 0 0 1em 1em;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .2), 0 3px 1px #fff;
  color: #555;
  display: inline-block;
  padding: 2em 2em 2em 1.7em;
}

.calender-outer h3 {
    color: #EAB000;
}

.sermon-days {
    background-color: #EAB000;
    color: #fff;
    cursor: pointer;
}

.calendar thead {
  color: #e66b6b;
  font-weight: 700;
  text-transform: uppercase;
}

.calendar td {
  padding: 0.3em 0.3em;  
  text-align: center;
}

.calendar tbody td:hover {
  background: #cacaca;
  color: #fff;
}

.current-day {
  background-color: #e66b6b;
  color: #fff;
}

.prev-month,
.next-month {
  color: #cacaca;
}

.ring-left,
.ring-right {
  position: absolute;
  top: 230px;
}

.ring-left { left: 2em; }
.ring-right { right: 2em; }

.ring-left:before,
.ring-left:after,
.ring-right:before,
.ring-right:after {
  background: #fff;
  border-radius: 4px;
  -webkit-box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 3px 1px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .2);
  content: "";
  display: inline-block;
  margin: 8px;
  height: 32px;
  width: 8px;
}
.ring-left.up {
  top: 65px;
  left: -28px;
  display: none;
}
.ring-left.down {
  top: 400px;
  left: -28px;
  display: none;
}

.prev-month-pointer {
  position: absolute;
  right: 50px;
  font-size: 2em;
  color: #fff;
  cursor: pointer;
  text-decoration: underline;
}

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

@media(min-width:420px) {
   
    .calendar td {
        padding: .5em 1em;
    }
    .calender-datelist {
        width: 450px;
        max-width: 450px;
    }
    .calendar-container {
        width: 450px;        
        float: left;
    }
}
@media(min-width:890px) {
  .ring-left.up, .ring-left.down {
    display: block;
  }
 }

 
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
  left bottom,
  left top,
  color-stop(0.44, #e66b6bc7),
  color-stop(0.72, #eab000),
  color-stop(0.86, #eab000))
}