{"version":3,"sources":["../../src/css/nfsfu234FormValidation.css"],"names":[],"mappings":"AACA,MACI,iBAAkB,CAClB,iBAAkB,CAClB,iBAAkB,CAClB,YAAgB,CAChB,YACF,CAGA,mBACE,2BACF,CAGA,WACE,mCAAqC,CACrC,4BACF,CAGA,cACE,8BACF,CAGA,MACE,mCAAqC,CACrC,4BACF,CAGA,yBAEE,8BACF,CAGA,SACE,mCAAqC,CACrC,4BACF,CAGA,mBACE,yCAA2C,CAC3C,8BACF,CAGA,qBACE,yCAA2C,CAC3C,8BACF,CAGA,mBACE,oBAAqB,CAGrB,aAAc,CAFd,4BAA8B,CAI9B,YAAa,CAHb,wBAAyB,CAEzB,UAEF,CAKA,0BAIE,uBAAmB,CAAnB,kBAAmB,CAHnB,iBAAkB,CAClB,KAAM,CACN,UAEF,CAGA,yDAGE,cAAe,CAGf,gCAAkC,CADlC,kBAAmB,CADnB,UAAW,CAMX,YAAa,CAFb,kBAAmB,CADnB,eAAgB,CANhB,iBAAkB,CAUlB,iCAAmC,CATnC,4BAUF,CAGA,kEAME,kBAAmB,CADnB,YAAa,CAHb,WAAY,CAKZ,sBAAuB,CACvB,oBAAqB,CAJrB,eAAgB,CADhB,eAAiB,CAOjB,iBAAkB,CADlB,wBAAyB,CARzB,uBAUF,CAGA,+DASE,kBAAmB,CAHnB,eAAgB,CAChB,SAAU,CACV,YAAa,CAJb,WAAY,CAMZ,sBAAuB,CATvB,iBAAkB,CAElB,OAAQ,CADR,KAAM,CAGN,UAMF,CAGA,mEACE,UAAW,CACX,SAAU,CACV,iBACF,CAGA,gEACE,uBACF,CAGA,iEACE,yBAA0B,CAC1B,2CACF,CAGA,uEACE,oBACF,CAGA,gBACE,GACI,uBACJ,CACF,CAGA,eAGE,iCACF,CAEA,qBAIE,WAAY,CADZ,UAEF,CAGA,iBAME,eAAgB,CAJhB,QAAS,CAKT,UAAW,CAHX,WAAY,CAHZ,iBAAkB,CAElB,OAAQ,CAER,UAAW,CAGX,SAAU,CAEV,kBAAmB,CADnB,YAAa,CAEb,sBACF,CAGA,qBAEE,WAAY,CADZ,UAEF","file":"nfsfu234FormValidation.min.css","sourcesContent":["/* Define custom CSS variables */\n:root {\n    --success: #4caf50;           /* Define a custom variable for success color */\n    --failure: #f44336;         /* Define a custom variable for failure color */\n    --warning: #ff9800;      /* Define a custom variable for warning color */\n    --white: #ffffff;         /* Define a custom variable for white color */\n    --black: #000000;      /* Define a custom variable for black color */\n  }\n  \n  /* Utility class for relative positioning */\n  .relative-position {\n    position: relative !important; /* Apply relative positioning to the element */\n  }\n  \n  /* Utility class for background color indicating success */\n  .bgSuccess {\n    background: var(--success) !important; /* Set background color to the defined success color */\n    color: var(--white) !important;        /* Set text color to white */\n  }\n  \n  /* Utility class for text color indicating success */\n  .text-success {\n    color: var(--success) !important; /* Set text color to the defined success color */\n  }\n  \n  /* Utility class for background color indicating failure */\n  .fail {\n    background: var(--failure) !important; /* Set background color to the defined failure color */\n    color: var(--white) !important;        /* Set text color to white */\n  }\n  \n  /* Utility class for text color indicating failure */\n  .text-failure,\n  .text-fail {\n    color: var(--failure) !important; /* Set text color to the defined failure color */\n  }\n  \n  /* Utility class for background color indicating warning */\n  .warning {\n    background: var(--warning) !important; /* Set background color to the defined warning color */\n    color: var(--white) !important;        /* Set text color to white */\n  }\n  \n  /* Utility class for input focus with error */\n  .input-focus-error {\n    border: 1px solid var(--failure) !important; /* Set border color to the defined failure color */\n    color: var(--failure) !important;           /* Set text color to the defined failure color */\n  }\n  \n  /* Utility class for input focus with success */\n  .input-focus-success {\n    border: 1px solid var(--success) !important; /* Set border color to the defined failure color */\n    color: var(--success) !important;           /* Set text color to the defined failure color */\n  }\n  \n  /* Utility class for inline error message */\n  .js-inline-message {\n    color: var(--failure);         /* Set text color to the defined failure color */\n    font-size: calc(100% - 0.3rem); /* Reduce font size slightly compared to parent element */\n    text-transform: uppercase;     /* Convert text to uppercase */\n    display: block; \n    width: 100%;\n    margin: 5px 0;\n  }\n  \n  \n  \n  /* Styling for error container */\n  .js-errorMessageContainer {\n    position: absolute;         /* Absolute positioning to place it correctly */\n    top: 0;                     /* Position at the top of the container */\n    width: 100%;                /* Take the full width of the container */\n    height: max-content;        /* Adjust height based on content inside */\n  }\n  \n  /* Styling for login error message container */\n  .js-errorMessageContainer .login-error-message-container {\n    position: relative;         /* Relative positioning for child elements */\n    width: clamp(100%, 80vw, 300px); /* Width is responsive between 100% and 300px */\n    background: red;            /* Background color for error container */\n    color: #fff;                /* Text color for error message */\n    border-radius: 10px;        /* Rounded corners for the container */\n    border: 1.5px solid red !important;    /* Red border for the container */\n    overflow: hidden;           /* Hide overflowing content */\n    margin-bottom: 10px;       /* Add space at the bottom of the container */\n    /* margin-top: -100px; */   /* (Commented out) Adjust top margin if needed */\n    display: none;              /* Initially hide the container */\n    transition: 0.5s margin ease-in-out; /* Add smooth transition for margin */\n  }\n  \n  /* Styling for the message inside error container */\n  .js-errorMessageContainer .login-error-message-container .message {\n    width: calc(100% - 50px);   /* Calculate width minus icon space */\n    height: 100%;               /* Take full height of the container */\n    padding: 0 0.3rem;          /* Add padding to the message */\n    min-height: 50px;           /* Set minimum height for the container */\n    display: flex;              /* Display as flex for centering content */\n    align-items: center;        /* Center vertically */\n    justify-content: center;    /* Center horizontally */\n    letter-spacing: 1.5px;      /* Add letter spacing for uppercase text */\n    text-transform: uppercase;  /* Convert text to uppercase */\n    text-align: center;         /* Center text within the container */\n  }\n  \n  /* Styling for the icon inside error container */\n  .js-errorMessageContainer .login-error-message-container .icon {\n    position: absolute;         /* Absolute positioning for the icon */\n    top: 0;                     /* Position at the top of the container */\n    right: 0;                   /* Position at the right of the container */\n    height: 100%;               /* Take full height of the container */\n    width: 50px;                /* Set width for the icon space */\n    background: #fff;           /* Background color for the icon space */\n    color: red;                 /* Icon color (red for error) */\n    display: flex;              /* Display as flex for centering content */\n    align-items: center;        /* Center vertically */\n    justify-content: center;    /* Center horizontally */\n  }\n  \n  /* Styling for SVG icon inside error container */\n  .js-errorMessageContainer .login-error-message-container .icon svg {\n    height: 60%;                /* Set height of the SVG icon */\n    width: 60%;                 /* Set width of the SVG icon */\n    fill: currentColor;         /* Set SVG icon fill color to current color (red) */\n  }\n  \n  /* Styling for active state of the error container */\n  .js-errorMessageContainer .login-error-message-container.active {\n    display: block !important; /* Display the container when active */\n  }\n  \n  /* Styling for success state of the error container */\n  .js-errorMessageContainer .login-error-message-container.success {\n    background: var(--success); /* Background color for success state */\n    border: 1.5px solid var(--success) !important; /* Border color for success state */\n  }\n  \n  /* Styling for success icon in the error container */\n  .js-errorMessageContainer .login-error-message-container.success .icon {\n    color: var(--success);      /* Icon color for success state */\n  }\n  \n  /* Keyframes animation for spinning */\n  @keyframes spin {\n    100% {\n        transform: rotate(360deg); /* Rotate the element fully */\n    }\n  }\n  \n  /* Styling for elements with the spin class */\n  .spin, \n  .js-spin\n  {\n    animation: spin 1s infinite linear; /* Apply the spinning animation */\n  }\n\n  svg.spin, \n  svg.js-spin\n  {\n    width: 25px;\n    height: 25px;\n  }\n  \n  /* Styling for show password button */\n  .cssShowPassword {\n    position: absolute;         /* Absolute positioning for the button */\n    bottom: 0;                  /* Position at the bottom of the container */\n    right: 0;                   /* Position at the right of the container */\n    height: 50px;               /* Set height for the button */\n    width: 50px;                /* Set width for the button */\n    background: #000;           /* Background color for the button */\n    color: #fff;                /* Text color for the button */\n    fill: #fff;                 /* Icon fill color for the button */\n    display: flex;              /* Display as flex for centering content */\n    align-items: center;        /* Center vertically */\n    justify-content: center;    /* Center horizontally */\n  }\n  \n  /* Styling for SVG icon inside show password button */\n  .cssShowPassword svg {\n    width: 25px;                /* Set width of the SVG icon */\n    height: 25px;               /* Set height of the SVG icon */\n  }\n  "]}