/*SIGN IN PAGE*/
body {
  box-sizing: border-box;
  font-size: 12px;
  /*height: 100vh;
    width: 100vw;*/ }

.grid {
  display: grid;
  grid-template-rows: 8vh 92vh;
  grid-gap: 0; }

.header {
  background: #c21b17;
  background: transparent linear-gradient(180deg, #d33533 0%, #c21b17 100%) 0% 0% no-repeat padding-box;
  color: #fff;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .header_logo img {
    max-width: 100%; }
  .header_title {
    margin: 0; }
  .header_top-right h6 {
    font-size: 1.2rem; }

.landing > .row:first-child {
  background-color: white;
  background: url(../../../Assets/image/prod-illus-mas.png) no-repeat center center;
  background-size: cover; }

.landing_logo img {
  max-width: 100%; }

.landing_container {
  background-color: white;
  padding: 4em 4em 1em;
  position: relative;
  /*&:before {
            content: '';
            position: absolute;
            width: 100%;
            background-color: white;
            height: 100vh;
            top: 0;
            z-index: -90;
        }*/ }
  .landing_container::before {
    content: '';
    display: block;
    background: url(../../../Assets/image/prod-signin-form-backdrop.png) no-repeat left bottom;
    background-size: 95%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.landing_header {
  font-weight: 900;
  font-size: 3.6em;
  margin-left: -0.1em;
  color: #7a8182; }
  .landing_header span {
    padding-left: 2px;
    border-right: .08em solid;
    animation: caret 1s steps(1) infinite; }

@keyframes caret {
  50% {
    border-color: transparent; } }

.landing_subheader {
  font-size: 1.27em; }

.landing_form {
  padding: 2em 0 0; }
  .landing_form input:-webkit-autofill,
  .landing_form input:-webkit-autofill:hover,
  .landing_form input:-webkit-autofill:focus,
  .landing_form textarea:-webkit-autofill,
  .landing_form textarea:-webkit-autofill:hover,
  .landing_form textarea:-webkit-autofill:focus,
  .landing_form select:-webkit-autofill,
  .landing_form select:-webkit-autofill:hover,
  .landing_form select:-webkit-autofill:focus {
    border: 1px solid #e8e8e8;
    -webkit-text-fill-color: #000 !important;
    -webkit-box-shadow: 0 0 0px 1000px #f2f2f2 inset, 0 0 5px 2px rgba(0, 0, 0, 0.05) !important;
    transition: background-color 5000s ease-in-out 0s; }
  .landing_form label {
    font-size: 1.13em;
    font-weight: 400;
    margin-bottom: 4px; }
  .landing_form .form-control {
    padding: 1.65rem 1rem;
    font-size: 1.3rem;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.05) !important; }

.page-loader {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  z-index: 99999; }
  .page-loader .loader-animated {
    max-width: 50%; }

.center-page {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%); }

/*.grid * {
    border: 1px solid #000;
}*/
@media (min-width: 768px) {
  .landing_image {
    background: url(../../../Assets/image/prod-illus-mas.png) no-repeat center center;
    background-size: cover; }
  .landing_wrapper {
    transform: translateY(35%); }
  .btn.btn-brand.btn-elevate.btn-sign-in {
    position: relative;
    border: none;
    padding: calc(60px / 2);
    width: 60px;
    height: 60px;
    border-radius: calc(60px / 2);
    background: white;
    background: radial-gradient(at top left, white 0%, #fffaf7 18%, #cc4949 70%, #c23c44 85%);
    box-shadow: 0px 1px 20px rgba(255, 123, 143, 0.3), 10px 20px 21px rgba(194, 60, 68, 0.25) !important;
    transition: all 0.5s ease-in-out; }
    .btn.btn-brand.btn-elevate.btn-sign-in i {
      font-size: 3.0em;
      position: absolute;
      left: 49%;
      top: 50%;
      transform: translate(-41%, -50%);
      color: #fff5e6;
      font-weight: 900;
      text-shadow: -1px -1px 0px #c42a2b; }
  .btn.btn-brand.btn-elevate.btn-sign-in:hover,
  .btn.btn-brand.btn-elevate.btn-sign-in:active {
    transform: scale(1.15);
    box-shadow: -2px 1px 24px rgba(255, 123, 143, 0.3), 10px 29px -16px rgba(194, 60, 68, 0.25) !important; } }

@media (min-width: 1024px) {
  .landing > .row:first-child {
    background-size: 20vw; }
  .landing_wrapper {
    transform: translateY(26%); } }

@media (min-width: 1400px) {
  .landing_container {
    padding: 6em 6em 1em;
    /*box-shadow: 2px 0 23px rgba(210, 210, 210, 0.25);*/ }
  .landing_wrapper {
    /*transform: translateY(25%);*/ } }

.otp-input {
  font-size: 1.8em;
  letter-spacing: 5px; }