/********* LEGACY CSS *********/
#ts-events-listing-container{
    padding:25px;
}
#ts-events-listing-container .pull-right{
    float:right;
}
#ts-events-listing-container .pull-left{
    float:left;
}
#ts-events-listing-container .getTicketsButton{
    background-color: #0A8CBC;
    -webkit-border-radius: 10rem;
    -moz-border-radius: 10rem;
    border-radius: 10rem;
    padding: .5rem .5rem;
    line-height: 1.5;
    border: 0;
    color: #fff;
    font-size:0.8em;
    text-decoration: none;
    margin-top:10px;
}
#ts-events-listing-container .event-details-button{
    color:#0A8CBC;
    font-size:0.75em;
    font-weight:300;
    float:left;
    cursor:pointer;
    margin-top:8px;
}
#ts-events-listing-container .event-details-button:hover{
    text-decoration: underline;
}
#ts-events-listing-container .event-details p,
#ts-events-listing-container .event-details a,
#ts-events-listing-container .event-details span,
#ts-events-listing-container .event-details div,
#ts-events-listing-container .event-details td,
#ts-events-listing-container .event-details th,
#ts-events-listing-container .event-details li{
    font-size: 12px !important;
    margin-left: 0 !important;
}
#ts-events-listing-container .event-details div {
    text-indent: 0 !important;
    overflow:hidden;
}
#ts-events-listing-container #ts-dateFieldButton{
    background-color: #0e6c0e;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    padding:9px 10px;
    border: 0;
    color: #fff;
    font-size:14px;
    text-decoration: none;
}
#ts-events-listing-container #ts-dateFieldLink{
    color:#0A8CBC;
    font-size:0.75em;
    font-weight:300;
    cursor:pointer;
    margin-top:8px;
}
#ts-events-listing-container #ts-clearfilter{
    background-color: gray;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    border-radius: 2rem;
    padding:9px 10px;
    border: 0;
    color: #fff;
    font-size:14px;
    text-decoration: none;
}
#ts-events-listing-container .ts-selectedDates{
    font-size:0.75em;
    font-weight: 300;
}
#ts-events-listing-container #ts-clearfilter:disabled {
  background-color:lightgray!important;
}
#ts-events-listing-container .imageContainer{
    width:80px;
    height:80px;
    overflow:hidden;
    float:left;
    margin-right:15px;
}
#ts-events-listing-container .imageContainer img{
    width:100%;
    overflow:hidden;
}
#ts-events-listing-container h1{
    color: #0A8CBC;
    font-size:18px;
    margin-bottom:5px;
    margin-top:0px;
    overflow:hidden;
}
#ts-events-listing-container h1 a:link{
    text-decoration: none;
    font-size:18px;
    color: #0A8CBC;
}
#ts-events-listing-container h1 a:hover{
    text-decoration: underline;
    font-size:18px;
    color: #0A8CBC;
}
#ts-events-listing-container h1 a:visited{
    font-size:18px;
    color: #0A8CBC;
}
#ts-events-listing-container p{
    font-size:14px;
}
#ts-events-listing-container .dateTimeSummary{
    font-size:14px;
    margin-top:-5px;
    font-weight:bold;
    line-height: 1.5em;
    vertical-align: center;
}
#ts-events-listing-container .locationSummary{
    font-size:12px;
    margin-top:0px;
    font-weight:normal;
}
#ts-events-listing-container input, select{
    display: block;
    width: 100%;
    height: 36px;
    padding: 7px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
#ts-events-listing-container #searchBarContainer {
    clear:both;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid #ccc;
}
#ts-events-listing-container #searchBarContainer .inputContainer{
    width:35%;
    margin:8px 16px 8px 0px;
    min-width:200px;
}
#ts-events-listing-container #searchBarContainer .buttonContainer{
    width:100px;
}
#ts-events-listing-container .event-type{
    padding-bottom:15px;
    margin: auto;
}
#ts-events-listing-container .date-box{
    float: left;
    background-color: #232A30;
    margin-right: 1rem;
    height: inherit;
    color: white;
    font-weight: 900;
    min-width:52px;
}
#ts-events-listing-container .date-box .month{
    background-color: #0A8CBC;
    padding: 8px 10px;
    text-align: center;
}
#ts-events-listing-container .date-box .day{
    padding: 8px 10px;
    width:21px;
    margin:auto;
    text-align: center;
}
#ts-events-listing-container .event-type .far-right{
    float:right;
    width:150px;
    margin:5px;
}
#ts-events-listing-container #ts-calendar{
    display:block;
    max-width:850px;
    margin:15px auto;
}
#ts-events-listing-container #ts-none-block{
    font-weight:400;
    text-align: center;
    margin: 20px auto;
}

#ts-events-listing-container .material-icons{
    font-size:13px;
    color:#dd1140;
}
#ts-events-listing-container .button-bottom{
    clear:both;
    margin-top:15px;
}
#ts-events-listing-container .pagination-links{
    margin:auto;
    text-align: center;
}
#ts-events-listing-container .pagination-links .page-selections{
    display:block;
    padding:7px 20px;
    cursor:pointer;
    -webkit-border-radius: 10rem;
    -moz-border-radius: 10rem;
    border-radius: 10rem;
    font-weight:600;
    display: inline-block;
}
#ts-events-listing-container .pagination-links .nav-selections{
    display:block;
    padding: 8px 20px;
    cursor:pointer;
    -webkit-border-radius: 10rem;
    -moz-border-radius: 10rem;
    border-radius: 10rem;
    font-weight:600;
    display: inline-block;
}
#ts-events-listing-container .pagination-links .page-selections:hover, .nav-selections:hover{
    background-color:lightgray;
}
#ts-events-listing-container .pagination-links .selected{
    background-color:#0A8CBC;
    color:white;
}
#ts-events-listing-container .pagination-links .material-icons{
    color:#333;
}
#ts-events-listing-container .pagination-links .disabled .material-icons{
    color:lightgray;
}
#ts-events-listing-container .image-box{
    float:left;
    margin-right: 1rem;
    height:70px;
}
#ts-events-listing-container .image-box img{
    height:70px;
}
#ts-events-listing-container .event-paging{
    border-bottom: 1px solid #ccc;
        margin-bottom:20px;
}
@media screen and (min-width: 0px) and (max-width: 650px) { /* small screens */
    #ts-events-listing-container .event-type .far-right { display: none; }
    #ts-events-listing-container .button-bottom { display: block; }
    #ts-events-listing-container .date-box { display: none!important; }
    #ts-events-listing-container #ts-resetSearch {}
    .fc-toolbar-title{ font-size:13px!important; }
    .fc-button { padding: 3px!important; }
    #ts-events-listing-container #searchBarContainer .inputContainer { width:100%; }
    #ts-events-listing-container .ts-type-topic{ display:none; }
    #ts-events-listing-container .pagination-links .page-selections{ display:none; }
    #ts-events-listing-container #searchBarContainer .buttonContainer { margin-bottom:6px; }
    #ts-events-listing-container .imageContainer{ display: none; }
}
@media screen and (min-width: 651px) and (max-width: 4000px) { /* large screens */
    #ts-events-listing-container .event-type .far-right { display: block; }
    #ts-events-listing-container .button-bottom { display: none; }
    #ts-events-listing-container #searchBarContainer .buttonContainer { float:left; margin:8px; }
    #ts-events-listing-container #searchBarContainer .inputContainer  {
        float:left;
    }
    #ts-events-listing-container .ts-type-topic{
        display:block;
        font-size:0.65em;
        color:#ccc;
        font-weight:bold;
    }
    #ts-events-listing-container .imageContainer{ display: block; }
}

/********* NEW CSS BASED ON LAYOUT *********/

/*****************/
/*** LIST VIEW ***/
/*****************/
#ts-events-listing-container.list{
    max-width: 640px;
    margin: auto;
    box-shadow: 0 1px 8px 0 rgb(28 35 43 / 15%);
    border-radius: 4px;
    border: 1px solid #ebebeb ;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    background-color: white;
}
#ts-events-listing-container.list .event-paging{
    padding: 15px;
    border-bottom: 1px solid;
    border-color: inherit;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
}
#ts-events-listing-container.list .event-paging:hover{
    background-color: #f7f7f7;
}
#ts-events-listing-container.list .event-paging .event-details-container{
    width: 80%;
}
#ts-events-listing-container.list .event-paging .event-details-container a{
    text-decoration: none;
    color: black;
}
#ts-events-listing-container.list .event-paging .event-details-container .eventName{
    font-size: 1.5rem;
    margin-bottom: 0.8em;
    font-weight: 700;
    color: black;
}
#ts-events-listing-container.list .event-paging .event-details-container .dateTimeSummary{
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
}
#ts-events-listing-container.list .event-paging .event-details-container .locationSummary{
    font-size: 0.8rem;
    font-weight: 400;
}
#ts-events-listing-container.list .event-paging .event-details-container .event-cta-button{
    /* margin-top: 10px; */
    margin: 20px 0 15px;
}
#ts-events-listing-container.list .imgContainer{
    float: none;   
    margin: 0;
}
#ts-events-listing-container.list .imgContainer img{
    border-radius: 4px;
    width: 90px;
    max-height: 140px;
}

#ts-events-listing-container.list .getTicketsButton{
    border-radius: 4px;
    padding: 8px 14px;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    line-height: 1.5;
    font-size: 0.9em;
    margin-top: 0;
}

@media screen and (max-width: 768px){
    #ts-events-listing-container.list{
        box-shadow: none;
        border: none;
        border-bottom: 1px solid #ebebeb;
        margin: 10px;
    }
    #ts-events-listing-container.list .event-paging{
        padding: 10px;
    }
    #ts-events-listing-container.list .event-paging .event-details-container{
        padding-right: 10px;
    }
    
    #ts-events-listing-container.list .event-paging .event-details-container .eventName{
        font-size: 1.2rem;
    }
}
/*****************/
/*** GRID VIEW ***/
/*****************/
#ts-events-listing-container.grid{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: auto;
    background-color: white;
}
#ts-events-listing-container.grid .event-paging{
    width: 24.333%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    padding: 20px;
    margin-bottom: 0;
    border-bottom: 0;
}
#ts-events-listing-container.grid .imgContainer img {
    width: 100%;
    /* vertical-align: top; */
}
#ts-events-listing-container.grid .event-paging .event-details-container{
    padding: 1em 0.25em;
}
#ts-events-listing-container.grid .event-paging .event-details-container a{
    display: block;
    text-decoration: none;
    color: black;
    cursor: pointer;
}
#ts-events-listing-container.grid .event-paging .event-details-container a:hover{
    cursor: pointer;
}
#ts-events-listing-container.grid .event-paging .event-details-container .eventName{
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}
#ts-events-listing-container.grid .event-paging .event-details-container .eventName:hover{
    color: #ccc;
}
#ts-events-listing-container.grid .event-paging .event-details-container .dateTimeSummary{
    font-size: 0.8rem;
    font-weight: 400;
    margin-top: 0.5rem;
}
#ts-events-listing-container.grid .event-paging .event-details-container .locationSummary{
    font-size: 0.7rem;
    font-weight: 400;
    margin-top: 0.5rem;
}
#ts-events-listing-container.grid .event-paging .event-details-container .event-cta-button{
    /* margin: 20px 0 15px; */
    display: none;
}
#ts-events-listing-container.grid .getTicketsButton{
    border-radius: 4px;
    padding: 8px 14px;
    box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    line-height: 1.5;
    font-size: 0.9em;
    margin-top: 0;
    width: 100%
}
@media screen and (max-width: 796px){
    #ts-events-listing-container.grid .event-paging{
        width: 33.33%;
    }
}
@media screen and (max-width: 695px){
    #ts-events-listing-container.grid .event-paging{
        width: 49.9%;
    }
}
@media screen and (max-width: 576px){
    #ts-events-listing-container.grid .event-paging{
        width: 100%;
    }
}

/*********************/
/*** CALENDAR VIEW ***/
/*********************/
#ts-events-listing-container.calendar #ts-calendar{
    display: block;
    max-width: 1080px;
    margin: 15px auto;
    font-family: Inter, 'Open Sans', sans-serif;
    box-shadow: 0 1px 8px 0 rgb(28 35 43 / 15%);
    border-radius: 4px;
    background-color: white;
}
#ts-events-listing-container.calendar #ts-calendar a{
    color: black;
    text-decoration: none;
}
#ts-events-listing-container.calendar #ts-calendar .fc-toolbar-title{
    font-size: 1.5rem;
    font-weight: 700;
}
#ts-events-listing-container.calendar #ts-calendar .fc-daygrid-event-harness {
    margin: 5px 0; 
}
#ts-events-listing-container.calendar #ts-calendar .fc-event-title{
  white-space: normal;
}
#ts-events-listing-container.calendar #ts-calendar .fc-daygrid-day.fc-day-today{
    background-color: #00000015;
}
#ts-events-listing-container.calendar #ts-calendar .fc-toolbar.fc-header-toolbar{
    padding: 10px;
    padding-bottom: 1rem;
    background-color: rgba(0,0,0,.02);
    margin: 0;
}

#ts-events-listing-container.calendar #ts-calendar .fc-prev-button,
#ts-events-listing-container.calendar #ts-calendar .fc-next-button,
#ts-events-listing-container.calendar #ts-calendar .fc-today-button{
    background-color: transparent;
    color: black;
    border: none;
}
#ts-events-listing-container.calendar #ts-calendar tbody, 
#ts-events-listing-container.calendar #ts-calendar td, 
#ts-events-listing-container.calendar #ts-calendar tfoot, 
#ts-events-listing-container.calendar #ts-calendar th, 
#ts-events-listing-container.calendar #ts-calendar tr{
    border: none!important;
}

#ts-events-listing-container.calendar #ts-calendar .fc-scrollgrid{
    border-top: 1px solid #eee!important;
    border-left-width: 0!important;
}
#ts-events-listing-container.calendar #ts-calendar table .fc-col-header{
    border-bottom: 1px solid #eee!important;
    font-size: 14px;
}

#ts-events-listing-container.calendar #ts-calendar .fc-daygrid-day-top{
    flex-direction: row;
    font-weight: 600;
}
#ts-events-listing-container.calendar #ts-calendar .fc-col-header-cell-cushion{
    padding: 5px;
}
#ts-events-listing-container.calendar #ts-calendar .fc-day-past{
    background-color: rgba(0,0,0,.05);
}

#ts-events-listing-container.calendar #ts-calendar .fc-h-event .fc-event-main{
    display: flex;
    flex-direction: column-reverse;
}

#ts-events-listing-container.calendar #ts-calendar .fc-list-day-cushion {
    font-size: 0.8rem;
}
#ts-events-listing-container.calendar #ts-calendar .fc-h-event .fc-event-main .fc-event-time,
#ts-events-listing-container.calendar #ts-calendar .fc-h-event .fc-event-main .fc-event-get-tickets-button,
#ts-events-listing-container.calendar #ts-calendar .fc-list-event-graphic{
    display: none;
}
@media screen and (max-width: 765px){
    #ts-events-listing-container.calendar #ts-calendar .fc-list-table td.fc-list-event-title{
        padding: 20px 10px!important;
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-list-event-title{
        display: flex;
        flex-wrap: wrap;
        font-size: 1.2rem;
        font-weight: 700;
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-event-title {
        width: 65%;
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-list-event-title .fc-event-img{
        width: 30%;
        margin-left: 5%
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-list-event-title .fc-event-time{
        margin-top: 25px;
        font-weight: 400;
        font-size: 0.8rem;
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-list-event-title .fc-event-get-tickets-button{
        display: block;
        width: 100%;
        background-color: pink;
        text-align: center;
        margin-top: 25px;
        font-size: 0.9rem;
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-list-event-title .fc-event-get-tickets-button:hover{
        cursor: pointer;
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-list.fc-list-sticky.fc-listMonth-view.fc-view{
        border: none;
    }
    #ts-events-listing-container.calendar #ts-calendar .fc-list .fc-list-empty{
        height: auto;
    }
}