/*
=======================================================================
	 ui.css
=======================================================================
*/
/**
 * =======================================================================
	 Pagination (M|T|D)
 * =======================================================================
 */
.pager {
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}
ul.pager li {
  display: inline;
}
.pager li {
  margin-left: 0;
}
ul.pager li a,
ul.pager li span {
  display: block;
  float: left;
  padding: 0.3em;
  min-width: 20px;
  border-bottom: none !important;
  text-decoration: none;
}
.pager-info {
  clear: both;
}
li.pager,
ul.pager li a {
  display: block;
  margin-right: 4px;
  background: #5e8f9e;
  color: #fff;
  text-align: center;
}
ul.pager li a:hover {
  border-bottom: none !important;
  background: #7ab9cd;
}
.pager.right li:last-child a {
  margin-right: 0;
}
.pager abbr {
  /* shame */
  vertical-align: middle;
  font-size: 2em;
  line-height: 11px  !important;
}
ul.pager li span {
  margin-right: 4px;
}
li.pager a {
  text-decoration: none;
}
li.pager a:hover {
  text-decoration: underline;
}
li.pager.inactive.current,
ul.pager .current,
ul.pager .disabled {
  background: #ccc;
  color: #999;
  text-align: center;
}
ul.pager .current {
  color: #444;
  font-weight: bold;
}
li.pager.inactive {
  border-color: #ccc;
  color: #c1c0c0;
}
.a-to-z li.pager,
.a-to-z ul.pager li a,
.a-to-z ul.pager .current {
  margin-right: 3px;
  padding: 0.3em 0.1em !important;
}
/**
 * =======================================================================
	 Tabs (M|T|D)
 * =======================================================================
 */
.bcu-tabgroup {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.article .bcu-tabs {
  margin-bottom: 0;
}
.bcu-tabs-panel {
  border: 1px solid #B4BBBF;
}
.bcu-tabs li {
  background-color: #6E6464;
}
.bcu-tabs li:hover {
  background-color: #8d7f7f;
}
.bcu-tabs li.bg-yellow-accent {
  background-color: #F8F7D4;
}
.bcu-tabs > li > a,
.bcu-tabs > li > a:hover {
  display: block;
  padding: 0.5em;
  border-bottom: none;
  color: #FFF;
  text-decoration: none;
}
.bcu-tabs > li > a:hover {
  border-bottom: 0 none;
  text-decoration: none;
}
.bcu-tabs > li.bg-yellow-accent > a {
  color: #111;
}
.article .bcu-tabs > li {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  margin-top: -2px !important;
  border: none;
  border-top: 1px solid #fff;
  list-style-type: none;
  line-height: 1.4;
}
.bcu-tabs li.bcu-tab-active,
.bcu-tabs li.ui-tabs-active {
  border-top: 1px solid #E4E4E4;
  border-right: 1px solid #B4BBBF;
  border-left: 2px solid #B4BBBF;
  background-color: #fff;
}
.bcu-tabs li.bcu-tab-active a,
.bcu-tabs li.ui-tabs-active a {
  color: #444;
}
.bcu-tabs li a:focus {
  outline: none;
}
.bcu-tabgroup-vertical .bcu-tabs {
  margin-right: -1px;
}
.bcu-tabgroup-vertical .bcu-tabs > li {
  margin: 0;
  border-right: 0 none;
}
.bcu-tabgroup-vertical .bcu-tabs .ui-tabs-active {
  top: 0;
  margin-top: 0!important;
  margin-left: 0;
  border: 1px solid #B4BBBF;
  border-right: 1px solid #B4BBBF;
}
.bcu-tabgroup-vertical .bcu-tabs-panel {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #B4BBBF;
}
/**
 * =======================================================================
	 Tabs (D)
 * =======================================================================
 */
@media only screen and (min-width: 900px) {
  .article .bcu-tabgroup-vertical .bcu-tabs > li {
    display: block;
    float: none;
  }
  .article .bcu-tabs > li {
    top: 1px;
    float: left;
    border-right: 1px solid #fff;
  }
  .bcu-tabgroup-vertical .bcu-tabs .ui-tabs-active {
    margin-top: 0!important;
    margin-left: -1px;
    border-right: 0 none;
  }
  .bcu-tabs-deep .bcu-tabs li:last-child {
    border-right: none;
  }
  .bcu-tabs li.bcu-tab-active,
  .bcu-tabs li.ui-tabs-active {
    top: 2px;
    border-top: 1px solid #B4BBBF;
    border-right: 1px solid #B4BBBF;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #B4BBBF;
    background-color: #fff;
  }
}
/**
 * =======================================================================
	 Tabs (M)
 * =======================================================================
 */
@media only screen and (max-width: 900px) {
  .bcu-tabs > .size1of4 .bcu-tabs > .size1of5,
  .bcu-tabs > .size1of6,
  .bcu-tabs > .size1of7 {
    width: 100%;
  }
  .bcu-tabs--deep li {
    width: 100% !important;
  }
}
/**
 * =======================================================================
	 Accordians + Collapsible sections (M|T|D)
 * =======================================================================
 */
.collapsible {
  background-color: #DEE2E4;
  /* secondary-bg-grey-light-2 */
  cursor: pointer;
}
.collapsible.open {
  background-color: #fff;
}
.accordion {
  display: block;
  overflow: hidden;
  margin: 5px 0;
  padding: 5px 0;
  /* secondary-bg-grey-light-2 */
  height: 22px;
  background: #DEE2E4;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  -ms-transition: height 0.4s;
  -o-transition: height 0.4s;
  transition: height 0.4s;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.accordion header {
  display: block;
  width: 100%;
  height: 25px;
  text-align: left;
  cursor: pointer;
}
.accordion header h4 {
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}
.accordion .content {
  padding: 20px;
}
.opened {
  background: #fff;
}
/**
 * =======================================================================
	 Accordians + Collapsible sections (D)
 * =======================================================================
 */
@media only screen and (min-width: 900px) {
  .open-view .accordion {
    overflow: visible;
    height: auto!important;
    background: none;
  }
  .open-view .accordion header {
    cursor: default;
  }
  .open-view .accordion header span {
    display: none;
  }
  .open-view .accordion .content {
    padding: 0;
  }
}
/**
 * =======================================================================
	 Buttons (M|T|D)
 * =======================================================================
 */
.bcu-button,
.button,
.article .bcu-button,
button.bcu-button,
.article button.bcu-button,
.article .button {
  display: inline-block;
  box-sizing: border-box;
  padding: 8px;
  border: 0 none !important;
  border-radius: 2px;
  background-color: #00aeef;
  box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.5);
  color: #fff !important;
  vertical-align: middle;
  text-decoration: none;
  font-size: 100%;
  line-height: inherit;
}
/*.bcu-button.primary-font,
button.bcu-button.primary-font {
    padding-top:5px;
}*/
button.bcu-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.ie button.bcu-button {
  overflow: visible;
  width: auto;
}
.lt-ie8 .bcu-button [class*='icon-'] {
  display: none;
}
/* fix panel search buttont */
.lt-ie8 .hero-slider-overlay .bcu-button abbr.icon-search {
  display: inline-block !important;
}
.bcu-button:hover,
.button:hover,
.article .bcu-button:hover {
  border-bottom: 0 none!important;
  background-color: #0084c2;
}
.bcu-button.bcu-button-red,
.article .bcu-button.bcu-button-red {
  background-color: #be1e2d;
}
.bcu-button.bcu-button-red:hover,
.article .bcu-button.bcu-button-red:hover {
  background-color: #860005;
}
.bcu-button.bcu-button-green,
.article .bcu-button.bcu-button-green {
  background-color: #7d9434;
}
.bcu-button.bcu-button-green:hover,
.article .bcu-button.bcu-button-green:hover {
  background-color: #5e7512;
}
.bcu-button.bcu-button-grey,
.article .bcu-button.bcu-button-grey {
  background-color: #DEE2E4;
  color: #444 !important;
}
.bcu-button.bcu-button-grey:hover,
.article .bcu-button.bcu-button-grey:hover {
  background-color: #ccc;
}
.bcu-button.bcu-button-dark,
.article .bcu-button.bcu-button-dark {
  background-color: #444;
}
.bcu-button.bcu-button-dark:hover,
.article .bcu-button.bcu-button-dark:hover {
  background-color: #000;
}
.bcu-button.bcu-button-disabled,
.bcu-button.bcu-button-disabled:hover {
  background-color: #DEE2E4;
  color: #ccc !important;
}
a.bcu-button {
  text-decoration: none;
}
/**
 * =======================================================================
	 Buttons (D)
 * =======================================================================
 */
@media only screen and (min-width: 900px) {
  .full-view-buttons {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
/**
 * =======================================================================
	 Hover Reveals (M|T|D)
 * =======================================================================
 */
.dropdown-menu {
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}
/**
 * =======================================================================
	 Hypertext Links (M|T|D)
 * =======================================================================
 */
.article a,
.content-block a {
  padding-bottom: 0.07em;
  border-bottom: 1px solid #dddddd;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #2560b9;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.article a:hover,
.content-block a:hover {
  border-bottom: 2px solid #2560b9;
}
.article a.white,
.content-block a.white {
  border-bottom: 1px solid #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.article a.white:hover,
.content-block a.white:hover {
  border-bottom: 2px solid #FFF;
}
a.default-link {
  padding-bottom: 0.07em;
  border-bottom: 1px solid #dddddd;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #2560b9!important;
  text-decoration: none;
}
a.default-link:hover {
  border-bottom: 2px solid #2560b9!important;
}
a.basic-link {
  padding-bottom: 0.07em;
  border-bottom: 1px solid #dddddd;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #2560b9;
  text-decoration: none;
}
/**
 * =======================================================================
	 Hypertext Links with Icons (M|T|D)
 * =======================================================================
 */
.link-has-icon:after {
  position: absolute;
  margin: 0 1em 0 0.3em;
  color: #ccc;
  text-align: center;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: 'bcu_icon_font';
  line-height: 1;

  speak: none;
  -webkit-font-smoothing: antialiased;
}
.link-has-icon[target="_blank"]:after {
  content: "\e004";
}
.link-has-icon[href^="mailto:"]:after {
  content: "\e006";
}
.link-has-icon[href^="https://icity"]:after {
  content: "\f023";
}
.link-has-icon[href$=".pdf"]:after,
.link-has-icon[href$=".doc"]:after,
.link-has-icon[href$=".docx"]:after,
.link-has-icon[href$=".ppt"]:after,
.link-has-icon[href$=".pptx"]:after,
.link-has-icon[href$=".xls"]:after,
.link-has-icon[href$=".xlsx"]:after,
.link-has-icon[href$=".zip"]:after,
.link-has-icon[href$=".tar"]:after,
.link-has-icon[href*="/Download/Asset/"]:after {
  content: "\e051";
}
p > .link-has-icon {
  margin-right: 1.25em;
}
/**
 * =======================================================================
	 Hyperlink Resets (M|T|D)
 * =======================================================================
 */
/*  Remove text decoration and underline */
.article .no-link,
.article .no-link:hover,
.content-block .no-link,
.content-block .no-link:hover {
  border: none!important;
  text-decoration: none!important;
}
/*  Remove icons */
/*.article .no-icon,
.content-block .no-icon,
.bcu-button.no-icon,
.bcu-button[target="_blank"].no-icon {
	margin-right: 0!important; 
	padding-right: 0;
}
.article .no-icon:after,
.content-block .no-icon:after,
.bcu-button.no-icon:after,
.bcu-button[target="_blank"].no-icon:after {
	display: none!important;
}*/
/*  Remove icons and padding */
/*a.reset-link {
	margin-right:0!important;
	padding-right: 0;
}
a.reset-link:after {
	content:normal!important;
}*/
/* Reset bottom padding for headers */
.article h1 a,
.content-block h1 a,
.article h2 a,
.content-block h2 a,
.article h3 a,
.content-block h3 a,
.article h4 a,
.content-block h4 a,
.article h5 a,
.content-block h5 a,
.article h6 a,
.content-block h6 a,
.tera a,
a.tera,
.giga a,
a.giga,
.mega a,
a.mega,
.alpha a,
a.alpha,
.beta a,
a.beta,
.gamma a,
a.gamma,
.delta a,
a.delta,
.cappa a,
a.cappa,
.epsilon a,
a.epsilon,
.zeta a,
a.zeta,
.eta a,
a.eta,
.lead a,
a.lead {
  padding-bottom: 0;
}
/**
 * =======================================================================
	 Alerts (M|T|D)
 * =======================================================================
 */
.panel-critical {
  padding: 0.5em;
  border-left: 3px solid #ED1C24;
  background-color: #fcdcde;
}
.panel-critical p,
.panel-warning p,
.panel-success p,
.panel-info p {
  margin: 0;
}
.panel-warning {
  padding: 0.5em;
  border-left: 3px solid #F7931D;
  background-color: #fde9d2;
}
.panel-success {
  padding: 0.5em;
  border-left: 3px solid #8CC63E;
  background-color: #dfefca;
}
.panel-info {
  padding: 0.5em;
  border-left: 3px solid #00ADEF;
  background-color: #ecf9fe;
}
.panel-critical a,
.panel-warning a,
.panel-success a,
.panel-info a {
  color: #333;
}
.panel-success span[class*="icon-"] {
  color: #8CC63E;
}
/*------------------------------------*\
    #FLAG
\*------------------------------------*/
/**
 * The flag object is a variation of Nicole Sullivan's media object. It is used
 * to lay out image-like and text-like content side-by-side.
 */
.flag {
  display: table;
  width: 100%;
}
.flag__image,
.flag__body {
  display: table-cell;
  vertical-align: top;
}
.flag--middle .flag__image,
.flag--middle .flag__body {
  vertical-align: middle;
}
.flag--bottom .flag__image,
.flag--bottom .flag__body {
  vertical-align: bottom;
}
.flag__image {
  padding-right: 24px;
}
.flag__image > img {
  display: block;
  max-width: none;
}
.flag--rev .flag__image {
  padding-right: 0;
  padding-left: 24px;
}
.flag__body {
  width: 100%;
}
.flag--rev > .flag__image {
  padding-right: 0;
  padding-left: 10px;
}
/**
 * Size variations.
 */
.flag--small > .flag__image {
  padding-right: 12px;
}
.flag--small.flag--rev > .flag__image {
  padding-right: 0;
  padding-left: 12px;
}
.flag--large > .flag__image {
  padding-right: 48px;
}
.flag--large.flag--rev > .flag__image {
  padding-right: 0;
  padding-left: 48px;
}
/**
 * Gutterless flags. Extends `.flag`.
 */
.flag--gutterless > .flag__image {
  padding-right: 0;
  padding-left: 0;
}
.has-badge {
  position: relative;
}
.badge {
  position: absolute;
  top: -5px;
  right: -2px;
  display: inline-block;
  padding: 2px;
  min-width: 10px;
  border-radius: 0;
  background-color: #00AEEF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  color: #fff;
  vertical-align: top;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  font-weight: bold;
  font-size: 10px;
  line-height: 12px;
}
.overlay {
  position: absolute;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  vertical-align: middle;
  text-align: center;
  line-height: 1;
  -webkit-transition: background-color 0.5s linear;
  -moz-transition: background-color 0.5s linear;
  -o-transition: background-color 0.5s linear;
  transition: background-color 0.5s linear;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;

  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  will-change: opacity;
}
.overlay--light {
  background-color: rgba(255, 255, 255, 0.9);
}
.spinner,
.load-error {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1000;
  display: block;
  margin: 0;
  padding-top: 3.07142857rem;
  min-width: 2.28571429rem;
  width: auto !important;
  height: auto !important;
  text-align: center;
  font-style: normal;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
@-webkit-keyframes loader {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes loader {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes loader {
  from {
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loader {
  from {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.spinner:before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 0.2em solid rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 500rem;
  -moz-border-radius: 500rem;
  border-radius: 500rem;
  content: '';
}
.load-error:before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  color: #999;
  content: "";
  font-size: 3em;
  font-family: 'bcu_icon_font';
}
.spinner:after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  border-width: .2em;
  border-style: solid;
  border-color: #767676 transparent transparent;
  -webkit-border-radius: 500rem;
  -moz-border-radius: 500rem;
  border-radius: 500rem;
  -webkit-box-shadow: 0 0 0 1px transparent;
  -moz-box-shadow: 0 0 0 1px transparent;
  box-shadow: 0 0 0 1px transparent;
  content: '';
  -webkit-animation: loader .6s linear;
  -moz-animation: loader .6s linear;
  -o-animation: loader .6s linear;
  animation: loader .6s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.spinner:after,
.spinner:before,
.load-error:before {
  margin: 0 0 0 -1.5rem;
  width: 2.28571429rem;
  height: 2.28571429rem;
}
.overlay .spinner:before {
  border-color: rgba(255, 255, 255, 0.15);
}
.overlay--light .spinner:before {
  border-color: rgba(0, 0, 0, 0.1);
}
/*------------------------------------*\
    Cover Page Component - Used for login screens
\*------------------------------------*/
.cover-page .aside-item {
  padding: 50px;
}
.cover-page .bcu-logo-new {
  margin-top: 50px;
  margin-bottom: 100px;
  width: 250px;
  height: 100px;
  background-size: 100%;
  transition: margin .6s;
}
@media only screen and (max-height: 820px), (max-device-height: 820px) {
  .cover-page .bcu-logo-new {
    margin-top: 30px;
    margin-bottom: 80px;
    transition: margin .6s;
  }
}
@media only screen and (max-height: 600px), (max-device-height: 600px) {
  .cover-page .bcu-logo-new {
    margin-top: 0;
    margin-bottom: 20px;
    transition: margin .6s;
  }
}
@media only screen and (min-width: 900px) {
  .cover-page .bcu-logo-new {
    width: 330px;
    height: 70px;
    background-size: cover;
  }
  .cover-page__middle {
    position: fixed;
    right: 500px;
    left: 0;
  }
  .cover-page__aside {
    position: static;
    right: 0;
    overflow: auto;
    width: 500px;
  }
  .cover-page__image {
    background-image: url('../imgs/city-centre-campus.jpg');
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .cover-page__message {
    top: 50%;
    left: 15%;
  }
}