.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.container-gray {
	border: 1px solid;
	border-radius: 4px;
	padding: 15px;
	background-color: #e7e7e7;
	border-color: #666666;
}

.clickable {
	cursor: pointer;
}


/* The ribbons */

.corner-ribbon{
  width: 150px;
  background: #e43;
  position: absolute;
  top: 35px;
  left: -35px;
  text-align: center;
  line-height: 20px;
  letter-spacing: 2px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  font-size: 10px;
}

/* Custom styles */

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

/* Different positions */

.corner-ribbon.top-left{
  top: 25px;
  left: -50px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.top-right{
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-left{
  top: auto;
  bottom: 35px;
  left: -35px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.corner-ribbon.bottom-right{
  top: auto;
  right: -35px;
  bottom: 20px;
  left: auto;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Colors */

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}



tr.group,
tr.group:hover {
    background-color: #ddd !important;
}

tr.group-break
{
  background-color: transparent !important;
  height: 30px;
}


.badge-danger {
  background-color: #d43f3a;
}

.badge-warning {
background-color: #d58512;
}

.badge-success {
background-color: #398439;
}

.badge-info {
background-color: #269abc;
}

.badge-inverse {
background-color: #333333;
}

.fullheight
{
	height: 100%;
}

.fullwidth
{
	height: 100%;
}

.nopadding
{
	padding: 0px;
}


.nomargin
{
  margin: 0px;
}


#map-canvas
{
  height: 478px;
  /* margin-left: 10px;
  margin-right: 10px; */
  padding: 0;
}

#weather_hourly_chart
{
	height: 150px;
	width: 100%;
}



/* responsive tabs CSS taken from https://stackoverflow.com/questions/23555978/bootstrap-responsive-layout-in-mobile-convert-to-tabs */

/* small device */
@media (max-width: 767px) {
  .device-big {
      display: none;
  }
  .device-small {
      display: block;
  }
  
  .nopadding-xs
  {
    padding: 0px;
  }

  #weatherdata table.dataTable tbody td
  {
    padding: 8px;
    text-align: center;
  }

}
/* big device */
@media only screen and (min-width : 768px) {
  .device-big, .tab-content > .tab-pane {
      /* display: block; */
  }
  .device-small {
      display: none !important;
  }
  .tab-content > .tab-pane {
      display: block;
  }

  .wi
  {
    font-size: 150%;
  }
}


.input-group-no-width {
  width: 1%;
  display: table-cell;
  padding-left: 3px;
  vertical-align: middle;
}

.input-group-no-width a:hover { text-decoration: none; }

/* Firefox has some awkward fieldset styling involving width that 
interferes with the responsive table. 
This cannot be overridden without a Firefox-specific hack that is not provided in Bootstrap: */
@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}