body{
	font-size: 10px;
}

table{
	width: 100%;
}
td{
	width: 12.5%;
}
.scrollable {
    height: 400px;
    overflow-y: scroll;
    margin-left: -15px; /* get space for the scroll bar */
    margin-top: -20px;
}
@media only screen and (max-width: 700px) {
    .scrollable {
        height: 200px;
    }
    .bubble-wrapper{
    	display: none;
    }
}
.passed{
	opacity: 0.4;
	color: black;
    font-style: italic;
}
.taken{
	background-color: lightgray;
}
.takenByYou{
	background-color: lightblue;
}
.unavailable{
	background-color:darkgray;
	color:white;
}
.btn-group>.btn {
    float: none;
}
.table>tbody>tr>td.topBorder{
	border-top: 1.3px solid lightblue;
}


.bubble-wrapper {
    z-index: 3;
    position: relative;
    width: 0;
    height: 0;
}
.bubble-wrapper.right{
    right: 27px;
    bottom: 52px;
    float: left;
}
.bubble-wrapper.left{
    left: 200px;
    top: 60px;
    float: right;
}


.bubble 
{
position: relative;
width: 250px;
padding: 10px;
background: #D1D5E1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #7E7F7F solid 1px;
}

.bubble:after 
{
	content: '';
	position: absolute;
	border-style: solid;
	border-color: transparent #D1D5E1;
	display: block;
	width: 0;
	z-index: 1;
	top: 24px;
}
.right .bubble:after{
	right: -15px;
	border-width: 11px 0 11px 15px;
} 
.left .bubble:after{
	border-width: 11px 15px 11px 0;
	left: -15px;
} 

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent #7E7F7F;
display: block;
width: 0;
z-index: 0;
top: 24px;
}

.right .bubble:before{
	border-width: 11px 0 11px 15px;
	right: -16px;
}
.left .bubble:before{
	border-width: 11px 15px 11px 0;
	left: -16px;
}

.bubble h4 {
    margin-top: 0;
}


.comment.bubble-wrapper {
    bottom: 15px;
    right: 15px;
}

.comment.bubble-wrapper.left {
    top: -15px;
    right: -270px;
}

.comment .bubble:before {
    top:10px;
}
.comment .bubble:after {
    top:10px;
}


input{color:black;}


div iframe {
    height: 385px;
    margin-bottom: 17px;
    padding: 0;
    padding-left: 0;
    width: 100%;
}


.panel-heading[data-toggle="collapse"]:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: left;        /* adjust as needed */
    color: grey;         /* adjust as needed */
    transition: .5s transform;
  transform: rotate(90deg)
}

.panel-heading.collapsed:after {
  transform: rotate(0deg)
}