/* open-sans-300 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'),
      url('/fonts/open-sans-v15-latin-300.woff2') format('woff2'),
      /* Super Modern Browsers */
      url('/fonts/open-sans-v15-latin-300.woff') format('woff'),
      /* Modern Browsers */
  }

  /* open-sans-regular - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
      url('/fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
      /* Super Modern Browsers */
      url('/fonts/open-sans-v15-latin-regular.woff') format('woff'),
      /* Modern Browsers */
  }

  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
      url('/fonts/open-sans-v15-latin-600.woff2') format('woff2'),
      /* Super Modern Browsers */
      url('/fonts/open-sans-v15-latin-600.woff') format('woff'),
      /* Modern Browsers */
  }

  ::placeholder {
    color: #9b9b9b;
    opacity: 1;
    font-family: 'Open Sans';
  }

  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    margin-right: 5px;
    padding-right: 5px;
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
    margin-bottom: 5px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 5.5px;
    background: #d6d6d6;
  }

  *:focus {
    outline: none;
  }

  .main-body {
    padding: 0;
    margin: 0;
    background: linear-gradient(148.15deg, #43CECD 14.73%, #1F6DB7 151.29%);
    height: 100vh;
    font-family: Open Sans;
  }

  .wfx-fit-image {
    object-fit: contain;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    max-height: 100%;
  }

  .loginpopUpBox {
    margin: auto;
    width: 355px;
    height: fit-content;
    position: absolute;
    left: 0px;
    top: 70px;
    right: 0px;
    bottom: 10%;
    overflow: hidden;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    padding: 24px;
  }

  .loginpopUpBox .logoBox {
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
  }

  .loginpopUpBox input[type="text"],
  .loginpopUpBox input[type="password"] {
    font-size: 13px;
    BORDER: 0PX;
    padding: 0px 0px !important;
    color: #4A4A4A !important;
    border-bottom: 1px solid #e9e9e9;
    background-color: #fff !important;
    width: 100%;
    height: 28px;
    margin-bottom: 15px !important;
  }

  .loginpopUpBox input[type="submit"],
  .loginpopUpBox input[type="button"] {
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    border: 0px;
    width: 100%;
    color: #fff;
    background: linear-gradient(168.1deg, #43CECD 14.73%, #1F6DB7 151.29%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.02), 0px 4px 4px rgba(0, 0, 0, 0.02), 0px 8px 8px rgba(0, 0, 0, 0.02), 0px 16px 16px rgba(0, 0, 0, 0.02), 0px 32px 32px rgba(0, 0, 0, 0.02), 0px 64px 64px rgba(0, 0, 0, 0.02);
    border-radius: 3px;
    height: 43px;
    font-size: 13px;
    margin-top: 20px;
  }

  .loginpopUpBox input[type="submit"]:hover,
  .loginpopUpBox input[type="button"]:hover {
    background: linear-gradient(167.5deg, #43CECD 14.73%, #1F6DB7 151.29%);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.05), 0px 4px 14px rgba(66, 204, 204, 0.38853);
  }

  .loginpopUpBox #divWFXLogo {
    display: none;
  }

  .loginpopUpBox #divClientLogo {
    width: 160px;
    height: 160px;
    position: relative;
    display: none;
  }

  .loginpopUpBox .powered-by {
    margin-top: 16px;
    display: flex;
    justify-content: right;
    align-items: center;
  }

  .loginpopUpBox .powered-by p {
    color: #4a4a4a;
    margin: 0;
    margin-right: 5px;
    font-family: 'Open Sans';
    font-size: 13px;
  }

  .loginpopUpBox .powered-by img {
    width: 61px;
    height: 17px;
  }

  .loginpopUpBox #lblLoginAs {
    font-size: 13px;
    color: #4a4a4a;
    display: block;
    margin-bottom: 15px;
    text-align: left;
  }

  .loginpopUpBox .lbl-keep-signed-in {
    display: flex;
    column-gap: 5px;
    align-items: center;
    color: #4a4a4a;
    margin-top: 5px;
    font-size: 13px;
  }

  .loginpopUpBox input[type=checkbox] {
    position: relative;
    border: 1px solid #9b9b9b;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 0.3em 0 0;
    padding: 0 !important;
    height: 14px;
    width: 14px;
    -webkit-appearance: none;
  }

  .loginpopUpBox input[type=checkbox]:hover {
    opacity: 1;
  }

  .loginpopUpBox input[type=checkbox]:checked {
    background-color: #3cbbc9;
    border: 1px solid #3cbbc9;
    opacity: 1;
  }

  .loginpopUpBox input[type=checkbox]:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 3px;
    height: 7px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
  }

  .loginpopUpBox #divForgetPassword a,
  .loginpopUpBox #divbackToLogin a {
    text-decoration: none;
    font-size: 13px;
    text-align: center;
    color: #3CBBC9;
  }

  .loginpopUpBox #pCaptchaContainer {
    position: relative;
  }

  .loginpopUpBox #btnRefreshCaptcha {
    position: absolute;
    top: 24px;
    right: 50px;
    border: 0;
    background: #fff;
    color: #00a455;
  }

  .footerBox {
    padding: 0px 3% 20px 3%;
    display: block;
    width: 94%;
    position: absolute;
    bottom: 0;
    min-height: 44px;
  }

  .footerboxinner {
    border-top: 1px solid #fff;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    width: 100%;
  }

  .footerBox .Box p {
    font-size: 12px;
    line-height: 14px;
    color: #FFFFFF;
    padding: 0;
    margin: 0;
  }

  .footerBox .Box p.contact a {
    cursor: pointer;
    text-decoration: underline;
    color: #fff;
    font-weight: bold;
  }

  .center-box {
    font-size: 12px;
    padding-top: 10px;
    line-height: 14px;
    text-align: center;
    color: #FFFFFF;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
  }

  /* Added and then commented intentionally as for password fields proper handling is not done aleady*/
  /* .MandatoryRed { 
    border-bottom: 1px solid red !important;
  } */

  input:focus {
    border-bottom: 1px solid #3cbbc9 !important;
  }

  @media screen and (max-width:360px) {
    .loginpopUpBox {
      width: 280px;
    }

    .footerBox .Box {
      width: 100%;
      text-align: center
    }
  }