TIF_E41200744/resources/views/auth/layout/custom_style.blade.php

<style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

    .content-4-1 .btn:focus,
    .content-4-1 .btn:active {
      outline: none !important;
    }

    .content-4-1 .width-left {
      width: 0%;
    }

    .content-4-1 .width-right {
      width: 100%;
      height: 100%;
      padding: 8rem 2rem;
      background-color: #fcfdff;
    }

    .content-4-1 .centered {
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .content-4-1 .right {
      width: 100%;
    }

    .content-4-1 .title-text {
      font: 600 1.875rem/2.25rem Poppins, sans-serif;
      margin-bottom: 0.75rem;
    }

    .content-4-1 .caption-text {
      font: 400 0.875rem/1.75rem Poppins, sans-serif;
      color: #a8adb7;
    }

    .content-4-1 .input-label {
      font: 500 1rem/1.75rem Poppins, sans-serif;
      color: #39465b;
    }

    .content-4-1 .div-input {
      font: 300 1rem/1.5rem Poppins, sans-serif;
      padding: 1rem 1.25rem;
      margin-top: 0.75rem;
      border-radius: 0.75rem;
      border: 1px solid #cacbce;
      color: #2a3240;
      transition: 0.3s;
    }

    .content-4-1 .div-input:focus-within {
      border: 1px solid #2ec49c;
      color: #2a3240;
      transition: 0.3s;
    }

    .content-4-1 .div-input input::placeholder {
      color: #cacbce;
      transition: 0.3s;
    }

    .content-4-1 .div-input:focus-within input::placeholder {
      color: #2a3240;
      outline: none;
      transition: 0.3s;
    }

    .content-4-1 .div-input .icon-toggle-empty-4-1 path,
    .content-4-1 .div-input:focus-within .icon path {
      transition: 0.3;
      fill: #2ec49c;
      transition: 0.3s;
    }

    .content-4-1 .input-field {
      font: 300 1rem/1.5rem Poppins, sans-serif;
      width: 100%;
      background-color: #fcfdff;
      transition: 0.3s;
    }

    .content-4-1 .input-field:focus {
      outline: none;
      transition: 0.3s;
    }

    .content-4-1 .forgot-password {
      font: 400 0.875rem/1.25rem Poppins, sans-serif;
      color: #cacbce;
      transition: 0.3s;
      text-decoration: none;
    }

    .content-4-1 .forgot-password:hover {
      color: #2a3240;
    }

    .content-4-1 .btn-fill {
      font: 500 1.25rem/1.75rem Poppins, sans-serif;
      background-image: linear-gradient(rgba(91, 203, 173, 1),
          rgba(39, 194, 153, 1));
      padding: 0.75rem 1rem;
      margin-top: 2.25rem;
      border-radius: 0.75rem;
      transition: 0.5s;
    }

    .content-4-1 .btn-fill:hover {
      background-image: linear-gradient(#2ec49c, #2ec49c);
      transition: 0.5s;
    }

    .content-4-1 .bottom-caption {
      font: 400 0.875rem/1.25rem Poppins, sans-serif;
      margin-top: 2rem;
      color: #2a3240;
    }

    .content-4-1 .green-bottom-caption {
      color: #2ec49c;
      font-weight: 500;
    }

    .content-4-1 .green-bottom-caption:hover {
      color: #2ec49c;
      cursor: pointer;
      text-decoration: underline;
    }

    @media (min-width: 576px) {
      .content-4-1 .width-right {
        padding: 8rem 4rem;
      }

      .content-4-1 .right {
        width: 58.333333%;
      }
    }

    @media (min-width: 768px) {
      .content-4-1 .right {
        width: 66.666667%;
      }
    }

    @media (min-width: 992px) {
      .content-4-1 .width-left {
        width: 48%;
      }

      .content-4-1 .width-right {
        width: 52%;
      }

      .content-4-1 .right {
        width: 75%;
      }
    }

    @media (min-width: 1200px) {
      .content-4-1 .right {
        width: 58.333333%;
      }
    }
  </style>