@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,800&display=swap&subset=latin-ext");
body {
  overflow-x: hidden;
  background-color: #f4f4f4;
  font-family: Montserrat,serif; }
  body main.confirm-page {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    flex-wrap: wrap;
    position: relative;
    background: #fac695;
    background: -moz-linear-gradient(45deg, #45569c 0%, #485aa3 47%, #29335C 100%);
    background: -webkit-linear-gradient(45deg, #45569c 0%, #485aa3 47%, #29335C 100%);
    background: linear-gradient(45deg, #45569c 0%, #485aa3 47%, #29335C 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten($primary-color,18%)', endColorstr='$primary-color',GradientType=1 );
    /*            &:before{
                    position: absolute;
                    content: '';
                    width:100%;
                    top:0;
                    height:40%;
                    left:0;
                    background-color: $primary-color;
                }*/ }
    body main.confirm-page .header-elment {
      position: absolute;
      bottom: -7px;
      width: 100%;
      z-index: 1; }
    body main.confirm-page section.confirm-box-section {
      border-radius: 5px;
      background: #fff;
      padding: 30px;
      width: 90%;
      min-height: 400px;
      max-width: 600px;
      position: relative;
      padding: 1.5rem;
      box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.23);
      text-align: center;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-direction: column;
      z-index: 1000;
      transition: all 0.5s;
      animation: totop 1s; }
      body main.confirm-page section.confirm-box-section .logo-frame {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        padding: 1rem; }
      body main.confirm-page section.confirm-box-section h1 {
        font-weight: 800;
        font-size: 2em;
        color: #191e2d; }
      body main.confirm-page section.confirm-box-section p {
        font-size: 1.1em;
        margin-bottom: 0; }
      body main.confirm-page section.confirm-box-section .form-wrapper {
        margin-top: 1rem;
        width: 100%;
        text-align: left; }
        body main.confirm-page section.confirm-box-section .form-wrapper .form-group {
          position: relative; }
          body main.confirm-page section.confirm-box-section .form-wrapper .form-group label {
            color: #3c4858;
            font-size: 1.02em;
            margin-bottom: 4px;
            width: 100%;
            font-weight: 600; }
          body main.confirm-page section.confirm-box-section .form-wrapper .form-group .form-control {
            height: 54px;
            color: #e0e6ed;
            border-radius: 10px;
            padding: 1rem 1rem 1rem 2.9rem;
            color: #3c4858;
            outline: none;
            box-shadow: none;
            transition: all 0.5s; }
            body main.confirm-page section.confirm-box-section .form-wrapper .form-group .form-control::placeholder {
              color: #aabacd;
              font-weight: 300; }
            body main.confirm-page section.confirm-box-section .form-wrapper .form-group .form-control:focus {
              border-color: #29335C;
              box-shadow: 0 5px 20px rgba(90, 140, 255, 0.08); }
              body main.confirm-page section.confirm-box-section .form-wrapper .form-group .form-control:focus ~ .login-icon, body main.confirm-page section.confirm-box-section .form-wrapper .form-group .form-control:focus ~ .password-icon {
                background-color: #29335C; }
          body main.confirm-page section.confirm-box-section .form-wrapper .form-group .password-icon {
            -webkit-mask: url("../images/password.svg");
            mask: url("../images/password.svg");
            background: #aabacd no-repeat;
            width: 26px;
            height: 26px;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 26px;
            mask-size: 26px;
            -webkit-mask-position: center;
            mask-position: center;
            display: inline-block;
            position: absolute;
            bottom: 15px;
            left: 12px;
            transition: all 0.5s; }
        body main.confirm-page section.confirm-box-section .form-wrapper button {
          width: 100%;
          height: 54px;
          border-radius: 12px;
          color: #fff;
          background-color: #29335C;
          border: none;
          box-shadow: none;
          outline: none;
          margin-top: 4px;
          font-size: 1.3em;
          font-weight: 500;
          transition: all 0.5s; }
          body main.confirm-page section.confirm-box-section .form-wrapper button:hover {
            opacity: 0.8; }

@keyframes totop {
  from {
    transform: translateY(-200%) perspective(6000px); }
  to {
    transform: translateY(0) perspective(6000px); } }