BODY {
  background-color: #f8fbfc;
  margin: 0;
  padding: 0;
}


.right {
  float: right;
}

.header.mobile {
  display: block;
}

.header {
  background-color: #588fa3;
  color: #ffffff;
  height: 72px;
  border-bottom: 2px solid #000000;
  box-shadow: 0px 5px 10px #909090;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

.header.desktop .logo {
  background-image: url('../images/home/headerLogo.png');
  background-repeat: no-repeat;
  height: 72px;
  margin: 0;
  padding: 0;
}

.header.desktop .logo .title {
  position: relative;
  top: 10px;
  left: 106px;
  font-family: 'gentium_book_basicbold';
  font-weight: bold;
  font-size: 32px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select:none;
  user-select:none;
  -o-user-select:none;
}

.header.desktop .logo .title:hover {
  cursor: pointer;
}

.header.desktop .quickLinks {
    float: right;
    margin-left: 30px;
    height: 70px;
    font-family: 'latolight';
}

.header .quickLinks .btnQuickLink  {
  cursor: pointer;
  height: 100%;
  margin-right: 10px;
}

.header .quickLinks .btnQuickLink:hover .lblTitle {
  color: #dde9ed;
}

.header .quickLinks .tblQuickLink {
  height: 100%;
}

.header .quickLinks .btnQuickLink svg {
  width: 28px;
  height: 28px;
  margin-top: 5px;
}

.header .quickLinks .btnQuickLink  #btnScanQR {
  fill: #ffffff;
}

.header .quickLinks .btnQuickLink:hover  #btnScanQR {
  fill: #dde9ed;
}


.header .quickLinks .lblTitle {
  width: 80px;
  margin: 0 5px;

}



.header.desktop .menu {
  position: relative;
  top: 8px;
  float: right;
  color: #dde9ed;
  font-weight: bold;
  max-width: 700px;
  border-radius: 15px;
  height: 56px;

  background: -moz-linear-gradient(left, rgba(255,255,255,0) 50%, rgba(255,255,255,0.15) 100%);
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 50%,rgba(255,255,255,0.15) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 50%,rgba(255,255,255,0.15) 100%);
}

.header .menu ul {
  list-style: none;
  height: 100%;
  margin: 0;
}

.header .menu li {
  display: inline-block;
  margin-right: 15px;
  height: 100%;
}

.header .menu li a {
  color: #dde9ed;
  font-family: 'source_sans_probold';
  letter-spacing: 1px;
  font-size: 16px;
  height: 56px;
  line-height: 56px;
  outline: none;
}

.header .menu li a:hover {
  text-decoration: none;
  color: #ffffff;
}

.header .menu li a.btnLogin {
  border: 1px solid #ffffff;
  padding: 0 15px;
  height: 30px;
  border-radius: 30px;
  background-color: #acc7d1;
  color: #ffffff;
}

.header .menu li a.btnLogin:hover {
  background-color: #ffffff;
  color: #588fa3;
  text-decoration: none;
}

.header .menu li a.btnHeaderLanguage {
  font-weight: normal;
  font-size: 11px;
}

.footer .btnLanguage {
  text-decoration: none;
  text-transform: capitalize;
  margin-left: 10px;
}

.footer .btnLanguage:hover {
  text-decoration: underline;
}

.changePasswordSection   .has-error .control-label, .changePasswordSection .has-error .form-control {
  color: #f888af !important;
  text-shadow: 0px 2px 6px #840723;
}

.changePasswordSection .validationMessagesContainer {
  border: 1px solid #d0a7a7ff;
  border-radius: 8px;
  background-color: #63504cff;
  padding: 5px;
  margin: 15px 0 30px !important;
  color: #d0a7a7ff;

}

.changePasswordSection .validationMessagesContainer .validationTitle {
  color: #f888af;
  text-shadow: 0px 2px 6px #840723;
  font-weight: bold;
  margin: 5px 0;
}
.instructions {
  margin: 15px 0 30px 10px;
}

#frmLogin .left {
  float:left;
}

#frmLogin input.disabled {
  color: #808080;
}

.footer {
  border-top: 2px solid #588fa3;
  padding: 0 15%;
  background: -moz-linear-gradient(top, rgba(214,214,214,1) 0%, rgba(122,122,122,0) 43%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(top, rgba(214,214,214,1) 0%,rgba(122,122,122,0) 43%,rgba(0,0,0,0) 100%);
  background: linear-gradient(to bottom, rgba(214,214,214,1) 0%,rgba(122,122,122,0) 43%,rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#00000000',GradientType=0 );
}

.footer h1 {
  border-bottom: 1px solid #588fa3;
  font-family: 'source_sans_probold';
  width: 100%;
  color: #588fa3;
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 1px;
}

.footer ul {
  list-style: none;
  margin: 0 0 0 15px;
  padding: 0;
}

.footer li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #588fa3; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.footer li {
  margin-bottom: 10px;
}

.footer li a {
  color: #2a444e;

}

.footer li a:hover {
  color: #000000;
  text-decoration: underline;
}

.languageSection {
  border: none;
  margin-top: 15px;
  border-top: 1px solid #588fa3;
  border-bottom: 1px solid #588fa3;
  padding: 10px 15%;
}

.languageSection .language {
      line-height: 30px;
}


ul.social {
  list-style: none;
  text-align: left;
  font-size: 20px;
  margin: 15px 0 0;
  padding: 0;
}

ul.social li {
  padding: 0 5px;
  margin: 0;
  display: inline-block;
}

.copyright {
  padding: 15px 15%;
  text-align: center;
  color: #bbb;
}

.copyright a {
  color: #999;
  text-decoration: none;
  margin: 0 5px;
}

.copyright a:hover {
  color: #666;
}

.clear {
  width: 1px;
  height: 1px;
  clear: both;
}

.capital {
   text-transform: capitalize;
}

.menuPopup.mobile {
  z-index: 900;
  position: fixed;
  top: 48px;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #dde9ed;
  transform: translateY(-500px);
  opacity: 0;
  box-shadow: 0px 4px 60px #000000;
}

.menuPopup.mobile.isShow {
  transform: translateY(0px);
  opacity: 1;
  transition: all 0.5s ease;
}

.menuPopup.mobile.isHide {
  transform: translateY(-500px);
  opacity: 0;
  transition: all 0.5s ease;
}

.menuPopup.mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menuPopup.mobile ul li {
  padding: 10px 0 10px 15px;
  font-size: 18px;
  color: #588fa3;
  position: relative;
  border-bottom: 1px dashed #c3d8df;
}

.menuPopup.mobile .btnHome {
  background-image: url('../images/home/headerLogo.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.menuPopup.mobile ul li:first-child {
  padding-top: 20px;
}

.menuPopup.mobile ul li:last-child {
  border-bottom: none;
}



@media only screen
and (max-width : 480px) {
  /* phone */
  .mobile {
      display:block !important;
  }

  .desktop {
    display:none !important;
  }

  .header.mobile {
    display:block;
    background-image: none;
    height: 48px;
}


.header.mobile .headerContainer {
  position:relative;
  width: 100%;
  height: 100%;
  padding: 0 ;
}

.header.mobile .headerContainer .item {
  cursor: pointer;
  transition: all .3s ease;
}

.header.mobile .headerContainer .item:hover {
  opacity: 0.7;
}

.header.mobile .headerContainer .rightItems {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.header.mobile .headerContainer .rightItems .item {
  display: inline-block;
  height: 32px;
  width: 32px;
  text-align: center;
}

.header.mobile .headerContainer .rightItems .item img {
  position: relative;
  vertical-align: top;
  top: 50%;
  transform: translateY(-50%);
}

.header.mobile .headerContainer .leftItems {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

.header.mobile .logo {
  position: absolute;

  width: 100%;
  height: 100%;
}



.header.mobile .logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  transition: all 0.3s ease;
  cursor: pointer;
}

.header.mobile .logo img:hover {
  opacity: 0.7;
}

.header.mobile .hamburger {
  padding: 0;
  position: relative;;

}

  .header.mobile .tblHeaderMobile {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }

  .header.mobile button {
    outline: 0;
  }

  .header.mobile .hamburger-inner {
    background-color: #dde9ed;
    width: 32px;
  }

  .header.mobile .hamburger-inner::after {
    background-color: #dde9ed;
    width: 32px;
  }

  .header.mobile .hamburger-inner::before {
    background-color: #dde9ed;
    width: 32px;
  }

  .header .quickLinks .btnQuickLink {
    margin: 0;
    padding: 0;
  }

  .header .quickLinks
   .lblTitle {
    width: 102px;
    display: flex;
    align-items: center;
  }

.header .lblTitle div {
  text-align: left;
      padding-left: 5px;
}
  .firstSection {
    height: 480px;
  }

.content {
  margin-top: 48px;
  padding: 20px 0;
}

.pageTitle {
  color: #588fa3;
  margin-top: 0;
}

}

@media only screen
and (min-width: 481px)
and (max-width: 1023px) {
  /* tablet portrait */
  .mobile {
    display:none !important;
  }

  .desktop {
    display:block !important;
  }

  .header.desktop .logo .title {
    font-size: 16px;
    top: 25px;
    left: 100px;
  }
  .header.desktop .menu li {
    margin-right: 10px;
  }

  .header.desktop .menu li a {
    font-size: 11px;
  }

  .header.desktop .quickLinks {
    font-size: 11px;
    margin-left: 10px;
  }

  .header.desktop .quickLinks .btnQuickLink {
    margin-right: 10px;
    width: auto;
  }

  .firstSection .tagline .lblSubTitle  {
    font-size: 20px;
  }

  .footer h1 {
    border: none;
    text-decoration: underline;
    width: auto;
  }

  ul.social {
    text-align: left;
    margin: 15px 0 0;
  }
}


@media only screen
and (min-width: 1023px) {
  /* tablet portrait */
  .mobile {
    display:none !important;
  }
  .desktop {
    display:block !important;
  }

  .firstSection .tagline .lblSubTitle  {
    font-size: 20px;
  }

  .menuPopup.mobile ul li:hover {
    background-color: #c3d8df;
    cursor: pointer;
    transition: all 0.5s ease;
    color: #395d6a;
  }

  .menuPopup.mobile ul li:hover::after {
    content: "\f18e";
    font-family: FontAwesome;
    position: absolute;
    height: 16px;
    width: 16px;
    right: 5px;
    top: calc(50% - 8px);
  }

  .footer h1 {
    border: none;
    text-decoration: underline;
    width: auto;
  }

  ul.social {
    text-align: right;
    margin: 0;
  }
}





[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}