.IPSButtonLinks{
    display:inline-block;
    font-size: 0.9em;
    border:0px solid gainsboro;
    color:darkblue !important;
    background:white;
    font-weight: 300;
    text-decoration: none !important;
    transition: 0.3s;
    padding:6px;
    margin: 1px 2.5%;
    border-radius: 0px;
    width:90%;
    text-align: center;
}

.IPSButtonLinks:hover{
    background:#F5FAFC;
    }   

    .IPSIconSchedule{
        width:2em;
        height:2em;
        vertical-align:middle;
    }

    .IPSIconTargetGroup{
        width:2em;
        vertical-align:middle;
    }
    
/*************************
 * GRID SCHEDULE LAYOUT
 * https://codepen.io/mrwweb/pen/rgPOOd
 *************************/
@media screen and (min-width:700px) {
	.schedule {
		display: grid;
                background-color:white;
                padding:5px;
		grid-gap: 1em;
		grid-template-rows:
			[tracks] auto
                        [time-0800] auto
                        [time-0815] auto
                        [time-0830] auto
                        [time-0845] auto
                        [time-0900] auto
                        [time-0915] auto
                        [time-0930] auto
                        [time-0945] auto
                        [time-1000] auto
                        [time-1015] auto
                        [time-1030] auto
                        [time-1045] auto
                        [time-1100] auto
                        [time-1115] auto
                        [time-1130] auto
                        [time-1145] auto
                        [time-1200] auto
                        [time-1215] auto
                        [time-1230] auto
                        [time-1245] auto
                        [time-1300] auto
                        [time-1315] auto
                        [time-1330] auto
                        [time-1345] auto
                        [time-1400] auto
                        [time-1415] auto
                        [time-1430] auto
                        [time-1445] auto
                        [time-1500] auto
                        [time-1515] auto
                        [time-1530] auto
                        [time-1545] auto
                        [time-1600] auto
                        [time-1615] auto
                        [time-1630] auto
                        [time-1645] auto
                        [time-1700] auto
                        [time-1715] auto
                        [time-1730] auto
                        [time-1745] auto
                        [time-1800] auto
                        [time-1815] auto
                        [time-1830] auto
                        [time-1845] auto
                        [time-1900] auto
                        [time-1915] auto
                        [time-1930] auto
                        [time-1945] auto;
                /*
                        [time-2000] auto
                        [time-2015] auto
                        [time-2030] auto
                        [time-2045] auto
                        [time-2100] auto
                        [time-2115] auto
                        [time-2130] auto
                        [time-2145] auto
                        [time-2200] auto;
                */
			/* Note 1:
			Use 24hr time for gridline names for simplicity

			Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
			Try 0.5fr for more compact equal rows. I don't quite understand how that works :)
			*/
		
		/*grid-template-columns:
			[times] 4em
			[track-1-start] 1fr
			[track-1-end track-2-start] 1fr
			[track-2-end track-3-start] 1fr
			[track-3-end track-4-start] 1fr
                        [track-4-end track-5-start] 1fr
			[track-5-end];*/
	}
}

.time-slot {
        margin-top:  1em;
	grid-column: times;
        text-align:right;
        /*margin-left:20em !important;*/
        
}

.FiltersArea{
    margin-bottom:25px;
    width:100% !important;
}

.StatusLegendBox{
    display:inline-block;
    transition: transform .2s;
    padding:1em;
    margin: 5px;
    width:8em;
    height:5em;
    vertical-align: middle;
    text-align: center;
}

.StatusBoxTextAlign {
  display: flex;
  justify-content: space-around; /* aligns the items horizontally */
  align-items: center; /* aligns the items vertically */
  height:100%;
  width:100%;
}

.StatusLegendBox:hover {
    transform: scale(1.1);
}

@supports( display:grid ) {
	@media screen and (min-width:700px) {
		.track-slot {
			display: block;
			padding: 5px 5px 5px 5px;
			position: sticky;
			top: 0px;
			z-index: 999;
			background-color: rgba(245,250,252,1);
                        border:1px solid #E1F1F7;
                        margin-bottom:-40px;
		}
	}
}

/* Small-screen & fallback styles */
.session {
	margin-bottom:  1em;
}

@supports( display:grid ) {
	@media screen and (min-width: 700px) {
		.session {
			margin: 0;
		}	
	}
}

/*************************
 * VISUAL STYLES
 * Design-y stuff ot particularly important to the demo
 *************************/

.session {
        margin-top:  0em;
	padding: .5em;
        line-height: 1.5;
	border-radius: 2px;
	font-size: 0.9em;
}

.session-title,
.session-time,
.session-track,
.session-presenter {
	display:block;
}

.time-slot {
	margin-top:  0;
}

.session-time{
    font-style: italic;
    padding:5px 5px;
    text-align: center;
    background:#F5FAFC;
}

.session-track{
    padding:5px 5px;
    text-align: center;
    background:#F5FAFC;
}

.session-title a {
	color: #fff;
	text-decoration-style: dotted;
	
	&:hover {
		font-style: italic;
	}
	
	&:focus {
		outline: 2px dotted rgba(255,255,255,.8);
	}
}

.session-title{
    margin: 0;
    font-weight:normal !important;
    font-size:1em;
    color:#3375B3;
    font-weight: 300;
    padding:7px 15px;
    vertical-align: top;
    text-transform: none !important;
    background:#FFFFFF;    
}

.session-title:hover{
    background-color:#F5FAFC !important;
    color:darkblue !important;
}

.track-slot {
        display:inline-block;
	font-weight: bold;
	font-size:1em;
        padding:1em;
        text-align: center;
        width:100%;
        margin-bottom:0.5em;
}

.time-slot {
	font-weight: bold;
	font-size:.75em;
}

.track-1 {
	background-color: #1259B2;
	color: #fff;
}

.track-2 {
	background-color: #1259B2;
	color: #fff;
}

.track-3 {
	background-color: #1259B2;
	color: #fff;
}

.track-4 {
	background-color: #1259B2;
	color: #fff;
}

.track-5 {
	background-color: #1259B2;
	color: #fff;
}

.track-all {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ccc;
	color: #000;
	box-shadow: none;
}

.text {
	max-width: 750px;
	font-size: 18px;
	margin: 0 auto 50px;
}

.meta {
	color: #555;
	font-style: italic;
}

.meta a {
	color: #555;
}

hr {
	margin: 40px 0;
}

.IPSPrintDivSessionShortDescription{
    font-size:1em;
    padding:0px 0px 0px 0px;
}

.IPSPrintDivSessionTargetGroup{
    font-size:1em;
    padding:0px 0px 0px 0px;
    font-style: italic;
}

@media screen and (max-width:700px) {
    .track-slot {
        font-size:1.5em;
        background-color:#FFFFFF;
    }
 
    .time-slot {
        display:none;
    }
    .IPSButtonLinks{
        font-size: 1.1em;
        border:1px solid gainsboro;
        color:darkblue !important;
        background:white;
        font-weight: 500;
        border-radius: 5px;
        width:50%;
        margin: 5px 20%;
    }
    
 
    .session-title{
        font-size:1.4em;
    }
    
    .session-time{
        font-size:1.2em;
    }
    
    .session-track{
        font-size:1.2em;
    }

    .FiltersArea {
        position: sticky !important;
        top:0px !important;
        Background-color:gainsboro;
        width:100%;
    }
    .Speakersfilters {
        width:90% !important;
        margin-left:5% !important;
    }
    
}