body {
            color: #999;
            background: #f5f5f5;
            font-family: "Inter", Helvetica, Arial, sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            padding: 0px;
        }


    .form-control::placeholder {
      color: #ffffff;
      opacity: 0.5;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
      -webkit-text-fill-color: black;
    }

    .register-link {
      color: rgb(128, 212, 250) !important;
      text-decoration: none;
    }

    label{
            font-size: small;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        max-width: 500px;
    }

    .card {
        background-color: transparent;
        border: none;
        max-width: 500px;
    }

    .login-form {
        width: 100%;
        margin: 0;
    }

    .login-form form {
        color: #434343;
        border-radius: 16px;
        background: #fff;
        border: 1px solid #f3f3f3;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 20px;
        position: relative;
    }


    .login-form .btn {
        background: #ff8f2e;
        border: none;
        color: #fff;
        font-weight: 600;
        padding: 9px;
        font-size: 16px;
        border-radius: 8px !important;
        width: 100%;
        transition: background 0.3s ease;
        margin-top: 0.5rem;
    }
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    color:#ffffff;
}
    .login-form .btn:hover, .login-form .btn:focus {
        background: #fc8218;
        }

    .login-form .btn:active {
        background: #fc8218;
    }

    .login-form h4 {
        font-size: 22px;
    }
.form-control:focus{
        box-shadow: 0 0 0 .25rem rgb(201 201 201 / 25%) !important;
}
    .login-form .form-group {
        margin-bottom: 8px;
    }

    .login-form .form-control, .login-form .btn {

        border-radius: 2px;
        transition: all 0.5s;
    }

    .login-form .close {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    .login-form .checkbox-inline {
        float: left;
    }

    .login-form input[type="checkbox"] {
        margin-top: 2px;
    }

    .login-form .forgot-password {
        text-align: left;
        display: block;
        font-size: 14px;
        color: ##ff8f2e;
        text-decoration: none;
    }

    .login-form .forgot-password:hover {
        text-decoration: underline;
    }

    .login-form .small {
        font-size: 13px;
    }

    .login-form a {
        color: #ff8f2e;
    }

    /* OR Divider */
    .or-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .or-divider {
        margin: 0 10px;
        padding: 0 10px;
        background: #fff;
        color: #888;
        font-weight: bold;
        text-transform: uppercase;
    }

    /* Horizontal Rules */
    .left-hr, .right-hr {
        flex-grow: 1;
        border: none;
        border-top: 3px solid #ccc;
        margin: 0;
    }

    .icon-box {
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 8px;
        background-color: #f9f9f9;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 43px;
    }

    .icon-box i {
        color: #555;
    }

    /* Get Started Link */
    .get-started-link {
        color: #007bff;
        font-weight: bold;
        text-decoration: none;
    }

    .get-started-link:hover {
        text-decoration: underline;
    }

    /* Footer Links inside the form */
    .footer-links {
        position: absolute;
        bottom: 10px;
        left: 0;
        font-size: 12px;
        color: #888;
        padding-left: 30px;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .footer-links a {
        color: #888;
        margin-right: 10px;
        text-decoration: none;
        margin: 0 10px; /* Adds some spacing between the links */
    }

    .footer-links a:hover {
        text-decoration: underline;
    }
    .login-form .form-control {
        border-radius: 8px;
        border: 1px solid #ccc;
        box-shadow: antiquewhite;
        transition: border-color 0.3s ease;
    }

    .login-form .form-control:focus {
        border-color: ##e3e3e3;
    }

    /* Gradient Background Styles */
    .gradient-background__wrapper {
      background: #141414;
      position: fixed;
      width: 100%;
      height: 200%;
      overflow: hidden;
    }

    .gradient-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-filter: blur(250px);
      filter: blur(250px);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    .gradient-background__shape {
      mix-blend-mode: lighten;
      -webkit-animation-duration: 20s;
      animation-duration: 20s;
      position: absolute;
      border-radius: 100%;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
      animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1);
    }

    .gradient-background__shape--1 {
      bottom: 0;
      left: 0;
      width: 700px;
      height: 700px;
      background: #8e7bff;
      mix-blend-mode: lighten;
      -webkit-transform: translate(-30%, 40%);
      transform: translate(-30%, 40%);
      -webkit-animation-name: gradientShapeAnimation1;
      animation-name: gradientShapeAnimation1;
    }

    .gradient-background__shape--2 {
      top: 0;
      right: 0;
      width: 600px;
      height: 600px;
      background: #44f2eb;
      -webkit-transform: translate(20%, -40%);
      transform: translate(20%, -40%);
      -webkit-animation-name: gradientShapeAnimation2;
      animation-name: gradientShapeAnimation2;
    }

    .gradient-background__noise {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: 100px;
    }

    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    @media (min-width: 1025px) {
      .page-main {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
      }
    }

    @media (min-width: 500px) {
      .page-main {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
      }
    }

    @-webkit-keyframes gradientShapeAnimation1 {
      0% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg)
      }

      25% {
        -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg)
      }

      50% {
        -webkit-transform: translate(30%, -10%) rotate(180deg);
        transform: translate(30%, -10%) rotate(180deg)
      }

      75% {
        -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
        transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg)
      }

      100% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg)
      }
    }

    @keyframes gradientShapeAnimation1 {
      0% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg)
      }

      25% {
        -webkit-transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 20%) skew(-15deg, -15deg) rotate(80deg)
      }

      50% {
        -webkit-transform: translate(30%, -10%) rotate(180deg);
        transform: translate(30%, -10%) rotate(180deg)
      }

      75% {
        -webkit-transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg);
        transform: translate(-30%, 40%) skew(15deg, 15deg) rotate(240deg)
      }

      100% {
        -webkit-transform: translate(-30%, 40%) rotate(-20deg);
        transform: translate(-30%, 40%) rotate(-20deg)
      }
    }

    @-webkit-keyframes gradientShapeAnimation2 {
      0% {
        -webkit-transform: translate(20%, -40%) rotate(-20deg);
        transform: translate(20%, -40%) rotate(-20deg)
      }

      20% {
        -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg)
      }

      40% {
        -webkit-transform: translate(-40%, 50%) rotate(180deg);
        transform: translate(-40%, 50%) rotate(180deg)
      }

      60% {
        -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
        transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg)
      }

      80% {
        -webkit-transform: translate(10%, -30%) rotate(180deg);
        transform: translate(10%, -30%) rotate(180deg)
      }

      100% {
        -webkit-transform: translate(20%, -40%) rotate(340deg);
        transform: translate(20%, -40%) rotate(340deg)
      }
    }

    @keyframes gradientShapeAnimation2 {
      0% {
        -webkit-transform: translate(20%, -40%) rotate(-20deg);
        transform: translate(20%, -40%) rotate(-20deg)
      }

      20% {
        -webkit-transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg);
        transform: translate(0%, 0%) skew(-15deg, -15deg) rotate(80deg)
      }

      40% {
        -webkit-transform: translate(-40%, 50%) rotate(180deg);
        transform: translate(-40%, 50%) rotate(180deg)
      }

      60% {
        -webkit-transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg);
        transform: translate(-20%, -20%) skew(15deg, 15deg) rotate(80deg)
      }

      80% {
        -webkit-transform: translate(10%, -30%) rotate(180deg);
        transform: translate(10%, -30%) rotate(180deg)
      }

      100% {
        -webkit-transform: translate(20%, -40%) rotate(340deg);
        transform: translate(20%, -40%) rotate(340deg)
      }
    }

    @media only screen and (min-width:320px) and (max-width: 428px) {
    .container {
        max-width: 100%;
    }

    .card {
        padding: 20px;
        border-radius: 12px;
    }

    .card-header {
        font-size: 24px;
        padding: 10px;
    }

    .card-body {
        font-size: 16px;
        padding: 15px;
    }

    .card-body i {
        font-size: 15px;
    }
    .get-started-link {
        font-size: 14px;
    }

    .btn-primary {
        padding: 12px;
        font-size: 18px;
    }

    .list-unstyled li {
        font-size: 16px;
    }

    .list-unstyled li i {
        font-size: 20px;
    }
}
.card_header{
    margin-left:10px !important;
}
.logo{
    height: 30px;
    width: auto;
    border-radius:90px;
}
.material-icons{
    font-size: 24px;
}
.alert_error_message{
    z-index: 1050;
}

#plan-description p{
   margin-bottom: 0;
   padding-top: .25rem !important;
}