@import "variables.less";

#regional-widgets {
  margin: 30px auto 0 auto;
  height: auto;
}
.widgets-placeholder {
  border-top: 1px solid @widgetBorder;
  margin: 0 !important;
  padding: 0 !important;
  li {
    list-style-type: none;
  }
}
.hub-widget, .regional-widget {
  position: absolute;
  left: 0px;
  top: 0px;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: rgb(227, 233, 239);
  background-color: @widgetBackground;
  border-bottom: 1px solid @widgetBorder;
  border-right: 1px solid @widgetBorder;
  border-top: 1px solid @widgetBorder;
  border-left: 1px solid @widgetBorder;
  cursor: pointer;
  height: @widgetHeight;
  padding: 2px;
  &:hover {
    background-color: @widgetHover;
  }
}
.hub-widget {
  .widget-placeholder {
    display: block;
    height: 100%;
    padding: @widgetPadding 0;
    width: 100%;
    &:hover, :focus {
      color: @widgetBackground;
      text-decoration: none;
    }
  }
}
@media (min-width: 1600px) {
  .hub-widget{
    width: 16.6%;
  }
}
@media (max-width: 1599px) {
  .hub-widget{
    width: 19.92%;
  }
}
@media (max-width: 1199px) {
  .hub-widget{
    width: 24.92%;
  }
}
@media (max-width: 991px) {
  .hub-widget {
    width: 33.25%;
  }
}
@media (max-width:767px) {
  .hub-widget {
    width: 49.9%;
  }
}
@media (max-width:479px) {
  .hub-widget {
    width: 100%;
  }
}

.widget-icon-placeholder {
  height: @widgetIconSize;
  margin: 0 53px 15px 53px;
  position: relative;
}
.widget-icon {
  background-repeat: no-repeat;
  background-size: @widgetIconSize;
  height: @widgetIconSize;
  left: 50%;
  margin-left: -(@widgetIconSize / 2);
  position: absolute;
  width: @widgetIconSize;
}
.widget-text-placeholder {
  height: 60px;
  line-height: 60px;
}
.widget-text-placeholder,.widget-links-container>div {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  width: 100%;
}
.widget-text {
  color: @widgetTitle;
  font-size: 17px;
  font-weight: 300;
  line-height: @widgetTextHeight;
  margin: 10px;
  text-align: center;
  vertical-align: middle;
}

.regional-widget, .status-widget {
  border: none !important;
  cursor: default;
  display: block;
  height: auto;
  width: 100%;
  &:hover {
    background: none !important;
  }
  .widget-icon-placeholder {
    margin: 0 53px 35px 53px;
  }
  .widget-text-placeholder {
    height: 70px;
  }
  .widget-info {
    color: @regionalLinkText;
    font-size: @regionalTextHeight;
    font-weight: 400;
    margin: 0;
  }
  .widget-text {
    margin: 0;
  }
}

.widget-links-container {
  height: 105px;
  margin: 0 auto;
  width: 144px;
  .widget-link{
    height: 32px;
    line-height: 32px;
    margin: 8px 0;
  }
}

.hub-widget{
  width: 275px;
}
