.tab-container #sessioncalendar .month {
padding-top:0px;
margin-top:0px;
}

@media screen and (max-width: 800px) {
.tab-container #sessioncalendar .cal_footer,
{
    display:flex;
    flex-direction:column;
}

}

.tab-container #sessioncalendar .cal_footer {
    display:flex;
    flex-direction:row;
}

            .container1 {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                width: 100%; 
                border: solid 1px black;
            }

                .container1 .item {
                    margin: 5px;
                    border: solid 1px red;
                    text-align: center;
                }

            .container2 {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }

                .container2 .item {
                    flex-grow: 1;
                }

            .column1, .column2 {
                text-align: left;
            }

            .container3 {
                display: flex;
                flex-direction: column;
                align-items: stretch;
            }

                .container3 > div {
                    border: blue solid 1px;
                    margin: 3px;
                }

            .item.heading1 {
            font-size:18px;
            }

.fa-off {color:lightgray;} /*for Calendar and List switch icons*/

        .rwd-line { display: block; }               
       .rwd-hide { display: none; }
       .rwd-show {display:inline;}

       @media screen and (min-width: 800px){
           .rwd-line{display: inline;}
           .rwd-hide{display: inline;}
           .rwd-show{display:none;}
       }

#sessioncalendar {
background-color:#f6f6f6;
font-family:"Segoe UI",Arial,sans-serif;
padding:0px 0px 0px 0px;
}

#sessioncalendar .cal_created, .created{
    background-color:#fff;
    color:#fff;
}

#sessioncalendar .weekdays{
            display:flex;
            flex-direction:row;
            flex-wrap:nowrap;
            align-items:center;
            justify-content:space-between;
        }
            #sessioncalendar .weekdays > div {
              flex:1; margin:1px; text-align:center;
            }
        /* Month header */
#sessioncalendar .month {
      text-align: center;
      border-bottom:solid 1px #ddd;
}

/* Previous button inside month header */
#sessioncalendar .month .prev {
  padding-left:10px;
  color: #ddd9d9;
}

/* Next button */
#sessioncalendar .month .next {
  padding-right:10px;
    color: #ddd9d9;
}

.weekdays {
border-bottom:solid 1px #ddd;
height:30px;
color: #629a97;
font-size:11px;
font-weight:bold;
text-transform:uppercase;
}

/* Days (1-31) */
#sessioncalendar .day {
    border-left:solid 1px #ddd;
  /*position: relative;*/
  vertical-align:top; 
  flex:1; margin:0px;
  min-height:40px;
  min-width:35px;
  padding:5px;
  display:flex;
  flex-direction:row;
  line-height:16px;
}

    #sessioncalendar .day:hover {
    background-color:#ccc;
    }

.week > div:last-child{
    border-right:solid 1px #ddd;
}

.weekdays, .week {
margin:0px 10px 0px 10px;
}
.week{
border-bottom:solid 1px #ddd;
display:flex;
flex-direction: row;
flex-wrap:nowrap;
justify-content:space-between;
align-content:stretch;
}

.currmonth {
background-color:#fff;
}
        #sessioncalendar .month {
        width:100%;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        justify-content:space-between;
        font-weight:300;
        font-size:17px;
        margin-top:4px;
        letter-spacing:1px;
        color:#495468;        
        background-color:#fff;
        padding:15px;
        }

        #sessioncalendar .sitting {
        
        } 

        #sessioncalendar .sittinginfo {
            flex-grow:1;
            display:flex;
            align-items:flex-start;
            line-height:16px;
        }
            #sessioncalendar .sittinginfo span > div {          
                        margin:0px 0px 2px 2px;
                        padding:0px 0px 0px 2px;
            }

            #sessioncalendar .sittinginfo > div {
            margin-left:3px;
            }

            #sessioncalendar .sittinginfo > div i{
            font-size:.8rem;
            }

    .yes.am a:hover {color: red !important;}
    .yes.pm a:hover {color: red !important;}
    .yes.eve a:hover {color: red !important;}
    .yes.cm a:hover {color: red !important;}

    .yes.am a {color: #666;}/*rgba(0, 131, 86, 1)*/
    .yes.pm a {color: #666;}
    .yes.eve a {color: #666;}
    .yes.cm a {color:#005D55;}

    .yes.am {color: #666;}
    .yes.pm {color: #666;}
    .yes.eve {color: #666;}
    .yes.cm {color:#005D55;}

    .yes.amx a:hover {color:red !important;}
    .yes.pmx a:hover {color: red !important;}
    .yes.evex a:hover {color: red !important;}
    .yes.cmx a:hover {color: red !important;}

    .yes.amx a {color: #666;}
    .yes.pmx a {color: #666;}
    .yes.evex a {color: #666;}
    .yes.cmx a {color:#005D55;}

    .yes.amx {color: #666;}
    .yes.pmx {color: #666;}
    .yes.evex {color: #666;}
    .yes.cm {color:#005D55;}

    .no.am {visibility: hidden;}
    .no.pm {visibility: hidden;}
    .no.eve {visibility: hidden;}
    .no.cm {visibility: hidden;}

    .yes > span {
        color: #666;
    }

        .yes.pm i, .yes.pmx i{
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.cal_footer {
width:100%;background-color:#fff;padding:10px 0px 0px 10px;margin:10px 0px 0px 0px;
}
    .cal_footer .yes {
width:100%;}

.num { width:15px;flex-grow:0;text-align: center;
}
#sessioncalendar .lastmonth,#sessioncalendar  .nextmonth,#sessioncalendar  .num{ }

#sessioncalendar .weekend .fulldate{

    }

#sessioncalendar .today {
    box-shadow:inset 0px 0px 0px 3px #629a97;
    /*border:solid 3px #629a97;*/ 
    }

/*    #sessioncalendar .today .num {
    color:#fff;}*/

/* Highlight the "current" day */
        #sessioncalendar .day div.active {
            background: #1abc9c;
            color: white !important;
            width: 100%;
        }

 @media (max-width: 575.98px) {

     #sessioncalendar .day {
        flex-direction:column;
        padding:1px
    }
                 #sessioncalendar .sittinginfo > div {
            margin-left:1px;
            }

            #sessioncalendar .sittinginfo > div i{
            font-size:1rem;
            padding:2px;
            }

                    #sessioncalendar .sittinginfo {          
            justify-content:space-between;
            vertical-align: middle;
            display:flex ;
            flex-flow:wrap;

        }
    
}