/* Neutral */
/* Accents */
/* Alert */
@import url("//fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Oswald:300,400,600,700");
[v-cloak] {
  display: none;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

.bold {
  font-weight: bold;
}

.italics {
  font-style: italic;
}

.align-center .img-responsive {
  margin: 0 auto;
}

/** If the background color of the top header is different from the default,
/** Uncomment the below to define the color. 
**/
/** Oblique header color **/
/** Navigation bar color, usually is $bu-color in 95% opacity **/
/** NON-DEFAULT COLORS - UNCOMMENT TO ENABLE
#header-main-nav {
    background: $bu-color-translucent !important;
    nav {
      ul.menu {
        > li {
          > ul.dropdown-menu {
            background: $bu-color-translucent !important;
          }
        }  
      }
    }
}

@include breakpoint(xs) {
  .navbar-toggle {
      border: 2px solid $bu-color;
  }
}

@include breakpoint(sm) {

  .navbar-toggle {
      border: 2px solid $bu-color;
  }
}

.mobile-subheader {
  background: $bu-color-translucent;
}

.obg {
  &.obg-site {
    background: $bu-color !important;
  }
}
/** NON-DEFAULT COLORS END **/
/** LAST BUTTON TO ALIGN RIGHT AS CTA - UNCOMMENT TO ENABLE
#header-main-nav {
    nav {
      width:100%;
      #smu-navbar-full-nav {
        width:100%;
      }
      .navbar-nav {
        width: 100%;
      }
      ul.menu {
        > .last {
          float:right;
          padding-left:15px;
          padding-right: 15px;
        }
      }
    }
}
/** LAST BUTTON TO ALIGN RIGHT AS CTA END **/
body.lkcsb {
  background: none;
}
body.lkcsb #header-main-nav {
  background: rgba(0, 92, 150, 0.8) !important;
}
body.lkcsb #header-main-nav nav ul.menu > li > ul.dropdown-menu {
  background: rgba(0, 92, 150, 0.8) !important;
}
body.lkcsb #ms-main-header {
  background: #001d30;
}
@media (max-width: 767px) {
  body.lkcsb .navbar-toggle {
    border: 2px solid #005C96;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  body.lkcsb .navbar-toggle {
    border: 2px solid #005C96;
  }
}
body.lkcsb .mobile-subheader {
  background: rgba(0, 92, 150, 0.8);
}
body.lkcsb .obg.obg-site {
  background: #005C96 !important;
}
body.lkcsb .bootstrap-tabs .nav-tabs li a:hover {
  border-top: 4px solid #005C96;
}
body.lkcsb .bootstrap-tabs .nav-tabs li.active > a {
  border-top: 4px solid #005C96;
}
body.lkcsb .ckeditor-accordion-container > dl dt > a {
  background-color: #005C96;
  border-bottom: 1px solid #005C96;
}

body.sis {
  background: none;
}
body.sis #header-main-nav {
  background: rgba(198, 146, 0, 0.8) !important;
}
body.sis #header-main-nav nav ul.menu > li > ul.dropdown-menu {
  background: rgba(198, 146, 0, 0.8) !important;
}
body.sis #ms-main-header {
  background: #604700;
}
@media (max-width: 767px) {
  body.sis .navbar-toggle {
    border: 2px solid #C69200;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  body.sis .navbar-toggle {
    border: 2px solid #C69200;
  }
}
body.sis .mobile-subheader {
  background: rgba(198, 146, 0, 0.8);
}
body.sis .obg.obg-site {
  background: #C69200 !important;
}
body.sis .bootstrap-tabs .nav-tabs li a:hover {
  border-top: 4px solid #C69200;
}
body.sis .bootstrap-tabs .nav-tabs li.active > a {
  border-top: 4px solid #C69200;
}
body.sis .ckeditor-accordion-container > dl dt > a {
  background-color: #C69200;
  border-bottom: 1px solid #C69200;
}

body.soa {
  background: none;
}
body.soa #header-main-nav {
  background: rgba(158, 0, 64, 0.8) !important;
}
body.soa #header-main-nav nav ul.menu > li > ul.dropdown-menu {
  background: rgba(158, 0, 64, 0.8) !important;
}
body.soa #ms-main-header {
  background: #380017;
}
@media (max-width: 767px) {
  body.soa .navbar-toggle {
    border: 2px solid #9E0040;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  body.soa .navbar-toggle {
    border: 2px solid #9E0040;
  }
}
body.soa .mobile-subheader {
  background: rgba(158, 0, 64, 0.8);
}
body.soa .obg.obg-site {
  background: #9E0040 !important;
}
body.soa .bootstrap-tabs .nav-tabs li a:hover {
  border-top: 4px solid #9E0040;
}
body.soa .bootstrap-tabs .nav-tabs li.active > a {
  border-top: 4px solid #9E0040;
}
body.soa .ckeditor-accordion-container > dl dt > a {
  background-color: #9E0040;
  border-bottom: 1px solid #9E0040;
}

body.soe {
  background: none;
}
body.soe #header-main-nav {
  background: rgba(0, 102, 133, 0.8) !important;
}
body.soe #header-main-nav nav ul.menu > li > ul.dropdown-menu {
  background: rgba(0, 102, 133, 0.8) !important;
}
body.soe #ms-main-header {
  background: #002b39;
}
@media (max-width: 767px) {
  body.soe .navbar-toggle {
    border: 2px solid #006685;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  body.soe .navbar-toggle {
    border: 2px solid #006685;
  }
}
body.soe .mobile-subheader {
  background: rgba(0, 102, 133, 0.8);
}
body.soe .obg.obg-site {
  background: #006685 !important;
}
body.soe .bootstrap-tabs .nav-tabs li a:hover {
  border-top: 4px solid #006685;
}
body.soe .bootstrap-tabs .nav-tabs li.active > a {
  border-top: 4px solid #006685;
}
body.soe .ckeditor-accordion-container > dl dt > a {
  background-color: #006685;
  border-bottom: 1px solid #006685;
}

body.sol {
  background: none;
}
body.sol #header-main-nav {
  background: rgba(51, 0, 102, 0.8) !important;
}
body.sol #header-main-nav nav ul.menu > li > ul.dropdown-menu {
  background: rgba(51, 0, 102, 0.8) !important;
}
body.sol #ms-main-header {
  background: #0d001a;
}
@media (max-width: 767px) {
  body.sol .navbar-toggle {
    border: 2px solid #330066;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  body.sol .navbar-toggle {
    border: 2px solid #330066;
  }
}
body.sol .mobile-subheader {
  background: rgba(51, 0, 102, 0.8);
}
body.sol .obg.obg-site {
  background: #330066 !important;
}
body.sol .bootstrap-tabs .nav-tabs li a:hover {
  border-top: 4px solid #330066;
}
body.sol .bootstrap-tabs .nav-tabs li.active > a {
  border-top: 4px solid #330066;
}
body.sol .ckeditor-accordion-container > dl dt > a {
  background-color: #330066;
  border-bottom: 1px solid #330066;
}

body.soss {
  background: none;
}
body.soss #header-main-nav {
  background: rgba(0, 102, 51, 0.8) !important;
}
body.soss #header-main-nav nav ul.menu > li > ul.dropdown-menu {
  background: rgba(0, 102, 51, 0.8) !important;
}
body.soss #ms-main-header {
  background: #001a0d;
}
@media (max-width: 767px) {
  body.soss .navbar-toggle {
    border: 2px solid #006633;
  }
}
@media (max-width: 991px) and (min-width: 768px) {
  body.soss .navbar-toggle {
    border: 2px solid #006633;
  }
}
body.soss .mobile-subheader {
  background: rgba(0, 102, 51, 0.8);
}
body.soss .obg.obg-site {
  background: #006633 !important;
}
body.soss .bootstrap-tabs .nav-tabs li a:hover {
  border-top: 4px solid #006633;
}
body.soss .bootstrap-tabs .nav-tabs li.active > a {
  border-top: 4px solid #006633;
}
body.soss .ckeditor-accordion-container > dl dt > a {
  background-color: #006633;
  border-bottom: 1px solid #006633;
}

.caret {
  margin-left: 6px;
}

.ms-home .homepage-banner {
  height: 480px;
  width: 100%;
}

#ms-main-header {
  background: none repeat scroll 0 0 #06206e;
  padding-top: 230px;
  color: #fff;
}
#ms-main-header .breadcrumb a {
  color: #fff;
}
#ms-main-header .page-title {
  overflow: auto;
}

#main {
  padding-top: 0;
  padding-bottom: 0;
}
#main .content-body .content-container {
  padding-top: 0;
  padding-bottom: 0;
}

body a {
  color: #8A704C;
}
body a:hover {
  color: #A88A61;
}
body a:active, body a:focus {
  color: #69553A;
}
body .page-container img {
  margin: 5px 0;
  border-radius: 3px;
}
body hr {
  border-top: 1px solid #DDD;
}

#block-navigation-mobile .dropdown-menu {
  position: relative;
  float: none;
  clear: both;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
#block-navigation-mobile .dropdown-menu li {
  border-bottom: 0;
}

a.cta {
  transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  text-align: center;
  color: #FFF !important;
  padding: 15px 30px;
  display: inline-block;
  max-width: 280px;
  font-size: 16px;
  line-height: 16px;
  background: #A88A61;
}
a.cta:hover, a.cta:active {
  background: #69553A;
}
a.cta.bordered {
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
}
a.cta.bordered:hover, a.cta.bordered:active {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
  -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
  -ms-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
  color: #FFF;
  background: #a88a61;
}
a.cta.disabled {
  background: #bfbfbf;
  color: gray;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  cursor: not-allowed;
}

.page-container {
  /* overflow: auto; */
  padding-top: 2.5em;
  padding-bottom: 2.5em;
}

.section-header {
  text-align: center;
}

#main-content img {
  max-width: 100%;
  height: auto;
}

.section-content {
  /* overflow: auto; */
}
.section-content .grid-content {
  margin-bottom: 1.5em;
  overflow: auto;
}

.centralise-col {
  text-align: center;
}

.center-block {
  display: inline-block;
  float: none;
}

.dark-bg > * {
  color: #fff;
}

#footer {
  padding-bottom: 1em;
}
#footer .site-footer {
  margin-bottom: 0;
}
#footer #footer-last {
  padding-top: 1em;
}
#footer #footer-last .content-col3-footer-bottom {
  padding-bottom: 1em;
}

.bootstrap-tabs .nav-tabs {
  border: 0;
}
.bootstrap-tabs .nav-tabs li {
  background: transparent;
  padding: 0;
  margin-bottom: 0;
}
.bootstrap-tabs .nav-tabs li > a {
  border-radius: 0;
  width: 100%;
  color: inherit;
}
.bootstrap-tabs .nav-tabs li > a:hover {
  background-color: #f3f3f3;
  color: #555555;
}
.dark-bg .bootstrap-tabs .nav-tabs li > a:hover {
  background-color: rgba(243, 243, 243, 0.6);
}
.bootstrap-tabs .nav-tabs li > a.tab-link {
  font-family: "Open Sans", sans-serif;
  border: 0;
  border-top: 4px solid transparent;
}
.bootstrap-tabs .nav-tabs li.active {
  background: transparent;
}
.bootstrap-tabs .nav-tabs li.active > a {
  color: #555555;
  background-color: #f3f3f3;
}
.dark-bg .bootstrap-tabs .nav-tabs li.active > a {
  background-color: rgba(243, 243, 243, 0.6);
}
.dark-bg .bootstrap-tabs .nav-tabs li.active > a:hover {
  background-color: rgba(243, 243, 243, 0.6);
}
.bootstrap-tabs .tab-content {
  background-color: #f3f3f3;
}
.dark-bg .bootstrap-tabs .tab-content {
  color: #000;
  background-color: rgba(243, 243, 243, 0.6);
}
.bootstrap-tabs .tab-content .tab-pane {
  padding: 15px;
  border: 0;
}

.ckeditor-accordion-container > dl {
  border: 0;
}
.ckeditor-accordion-container > dl > dt {
  margin-top: 0.5em;
}
.ckeditor-accordion-container > dl > dt > a {
  border-radius: 5px;
  color: #fff;
}
.ckeditor-accordion-container > dl > dt > a:hover, .ckeditor-accordion-container > dl > dt > a:active, .ckeditor-accordion-container > dl > dt > a:focus {
  text-decoration: none;
  color: #fff;
}
.ckeditor-accordion-container > dl > dt > a:hover {
  opacity: 0.9;
}
.ckeditor-accordion-container > dl dd {
  padding: 0 15px;
}

.pdpa-copy {
  font-size: 12px;
  line-height: 2;
}

.price-list thead td {
  padding: 5px 15px !important;
  background: #151C55;
  color: #FFF;
}
.dark-bg .price-list thead td {
  background: transparent;
  color: inherit;
}
.price-list thead td h5 {
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: bold;
}
.dark-bg .price-list tbody tr {
  background: transparent !important;
}
.price-list tbody tr td {
  padding: 5px 15px !important;
}

#toolbar-administration .toolbar-menu .account, #toolbar-administration .toolbar-menu .account-edit, #toolbar-administration .toolbar-menu .toolbar-icon-smu-sso-login-default {
  display: none !important;
}

.powered {
  font-size: 12px !important;
}
.powered a {
  font-size: 12px !important;
}

.mobile-subheader {
  padding: 1rem 0;
}

@media (max-width: 767px) {
  table td {
    word-break: break-word;
  }
}
.card.panel {
  border: 0 !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.card.panel .panel-heading, .card.panel .panel-body {
  border: 0;
}
.card.panel .panel-heading {
  background: transparent;
  padding: 0;
}
.card.panel .panel-heading img {
  margin-bottom: 0;
  border-radius: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 2em;
}
.card.panel .panel-heading a:hover img, .card.panel .panel-heading a:active img {
  filter: brightness(115%);
  -o-filter: brightness(115%);
  -ms-filter: brightness(115%);
  -moz-filter: brightness(115%);
  -webkit-filter: brightness(115%);
}
.card.panel .panel-body {
  background: hsla(0deg, 0%, 100%, 0.5);
  height: 180px;
  overflow: hidden;
  border-radius: 4px;
}
.dark-bg .card.panel .panel-body {
  background: hsla(255deg, 100%, 0%, 0.3);
  color: inherit;
}
.card .label, .card .card-title, .card .card-subtitle-1, .card .card-subtitle-2 {
  display: block;
  padding: 0;
  margin: 0;
}
.card .card-title {
  color: #151C55;
  font: 700 20px/36px "Oswald", sans-serif;
}
.dark-bg .card .card-title {
  color: inherit;
}
.card .card-subtitle-1, .card .card-subtitle-2 {
  font: 16px/24px "Open Sans", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card .card-subtitle-2 {
  margin-bottom: 15px;
}
.card.centralised .panel-heading img {
  margin: 0 auto;
}
.card.centralised .panel-body .card-title, .card.centralised .panel-body .card-subtitle-1, .card.centralised .panel-body .card-subtitle-2 {
  text-align: center;
}
.card.profile-card .card-subtitle-1 {
  font-style: italic;
}
.card.others-card .panel-body {
  background: transparent !important;
  color: inherit;
}

.logo-group-container {
  margin-bottom: 1.5em;
}
.logo-group-container .logo-grouping {
  font-weight: bold;
}
.logo-group-container .logos-container {
  text-align: center;
}
.logo-group-container .logos-container .logo-item {
  display: inline-block;
  margin: 5px 10px;
}

h3.agenda-title {
  font-size: 20px;
}

h5.agenda-time-col-title {
  font-weight: bold;
}

.agenda {
  font-size: 16px;
}
.dark-bg .agenda tr {
  background: transparent !important;
}
.dark-bg .agenda tr td {
  color: inherit !important;
}
.agenda h5 {
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 700;
  font-family: "Open Sans", sans-serif;
  margin-top: 0;
}
.agenda td .agenda-time-col {
  width: 16%;
  text-align: right;
  padding: 15px 30px 15px 0 !important;
  color: #151C55;
}
.agenda td .agenda-details-col {
  width: 84%;
  padding: 15px 30px 15px 0 !important;
}

#clockdiv {
  width: 100%;
  text-align: center;
  overflow: auto;
  margin: 1em 0;
  position: relative;
  display: block;
  float: none;
}
#clockdiv .unit-container {
  width: 100px;
  display: inline-block;
  float: none;
  background: rgba(255, 255, 255, 0.4);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(190, 190, 190, 0.4) 49%, rgba(135, 135, 135, 0.4) 100%);
  margin: 0 1em;
  padding: 1em;
  border-radius: 30px;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}
@media (max-width: 767px) {
  #clockdiv .unit-container {
    margin: 0 0.5em;
    padding: 0.5em;
  }
}
#clockdiv .unit-container .unit-count {
  font-size: 42px;
  font-weight: bold;
  display: block;
  margin: 10px 0;
}
@media (max-width: 767px) {
  #clockdiv .unit-container .unit-count {
    font-size: 32px;
    margin: 8px 0;
  }
}
#clockdiv .unit-container .unit-type {
  display: block;
}

.slick-dots {
  bottom: 20px;
  z-index: 2;
}
.slick-dots li button::before {
  width: 28px;
  height: 28px;
  font-size: 12px;
  opacity: 0.5;
  color: #ffffff;
}
.slick-dots li.slick-active button::before {
  opacity: 0.95;
  color: #ffffff;
}