* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        font-size: 52.5%;
    }


    .container {
        max-width: 100%;
        display: grid;
        grid-template-rows: minmax(min-content, 100vh);
        grid-template-columns: repeat(2, 28vw);
    }

    .heading-secondary {
        font-size: 3rem;
    }

    .heading-primary {
        color: var(--dark-green);
        font-size: 4rem !important;
        font-weight: 600 !important;
    }

    .span-green {
        color: var(green);
    }

    .signup-container,
    .signup-form {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .signup-container {
        width: 100vw;
        padding: 10rem 10rem;
        align-items: flex-start;
        justify-content: flex-start;

        grid-column: 2/3;
        grid-row: 1;
        margin: auto;
    }

    .signup-form {
        max-width: 45rem;
        width: 100%;
    }

    .text-mute {
        color: #aaa;
    }

    .input-text {
        font-family: inherit;
        font-size: 1.8rem;
        padding: 4rem 5rem 2rem 2rem;
        border: none;
        border-radius: 2rem;
        background: #eee;
        width: 100%;
    }

    .input-text:focus {
        outline-color: var(--green);
    }

    .btn {
        padding: 1.6rem 3rem;
        border: none;
        background: var(--green) !important;
        color: #fff;
        border-radius: 1rem;
        cursor: pointer;
        font-family: inherit;
        font-weight: 500;
        font-size: inherit;
        border: 2px solid var(--green);
    }
    .btn-login {
        align-self: flex-end;
        width: 100%;
        margin-top: 2rem;
        box-shadow: 0 5px 5px #00000020;
    }

    .btn-login:active {
        box-shadow: none;
    }

    .inp {
        position: relative;
    }

    .label {
        pointer-events: none;

        position: absolute;
        top: 2rem;
        left: 2rem;
        color: var(--green);
        font-weight: 500;
        font-size: 1.8rem;

        transition: all 0.2s;
        transform-origin: left;
    }

    .input-text:not(:placeholder-shown)+.label,
    .input-text:focus+.label {
        top: 0.7rem;
        transform: scale(0.75);
    }

    .input-text:focus+.label {
        color: var(--dark-green);
    }

    .input-icon {
        position: absolute;
        top: 2rem;
        right: 2rem;
        font-size: 2rem;
        color: var(--green);
      
    }

    .input-icon-password {
        cursor: pointer;
    }

    .login-wrapper {
        max-width: 45rem;
        width: 100%;
    }

    .line-breaker .line {
        width: 50%;
        height: 1px;
        background: #eee;
    }

    .line-breaker {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ccc;

        margin: 3rem 0;
    }

    .line-breaker span:nth-child(2) {
        margin: 0 2rem;
    }

    .welcome-container {
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        background-size: auto;
        grid-column: 0 / 3;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 10rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        box-shadow:rgb(2 74 80 / 15%) 0px 7px 29px 0px;
        background-image: url('../images/oat-rx-doctor-login-image.png');
    }

    .lg {
        font-size: 6rem;
    }

    .welcome-container img {
        width: 100%;
    }
    
    .btn:hover{
        border: 2px solid var(--green);
        background-color: #fff !important;
        color: var(--green) !important;
        transition: 0.3s;
    }

    @media only screen and (max-width: 700px) {
        html {
            font-size: 54.5%;
        }
    }

    @media only screen and (max-width: 600px) {
        .signup-container {
            padding: 5rem;
        }
    }

    @media only screen and (max-width: 400px) {
        html {
            font-size: 48.5%;
        }

        .input-text:not(:placeholder-shown)+.label,
        .input-text:focus+.label {
            top: 0.6rem;
            transform: scale(0.75);
        }

        .label {
            font-size: 1.9rem;
        }
    }

    @media only screen and (max-width: 1200px) {
        .welcome-container {
            display: block;
        }

        .container {
            grid-template-columns: repeat(2, 45vw);
        }

    }

    @media only screen and (max-width: 954px) {

        .container {
            grid-template-columns: repeat(2, 35vw);
            padding:0px;
        }

    }

    @media only screen and (max-width: 767px) {
        .signup-container {
            padding: 15px;
            padding-right: 20px;
        }

        .container {
            grid-template-columns: repeat(2, 28vw);
        }

    }

    @media only screen and (max-width: 602px) {
        .welcome-container {
            display: none;
        }

        .container {
            grid-template-columns: repeat(2, 0vw);
        }

        .signup-container {
           
        }

    }

    p {
        line-height: 20px !important;
    }

    h1 {
        padding: 0px;
        margin: 0px;
    }