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

 html,
 body {

     align-items: center;
     justify-content: center;
     padding: 12px 12px 12px 12px !important;
     font-size: 13px;
 }

 a {
     text-decoration: none !important;
     font-weight: 500;
 }

 a:hover {
     text-decoration: underline;
 }



 /* Input Type text cutsom Style */

 .input-text {
     display: block;
     width: 100%;
     line-height: 1.5;
     background-clip: padding-box;
     appearance: none;
     transition:
         border-color .15s ease-in-out,
         box-shadow .15s ease-in-out;

     border-radius: 12px;
     padding: 11px 12px;
     background-color: var(--input-bg-color);
     color: var(--input-text-color);
     border: 1px solid var(--input-border-color);
 }

 .input-text:focus {
     border-color: var(--color-primary);
     box-shadow: none;
     outline: none;
 }

 .input-text:-webkit-autofill,
 .input-text:-webkit-autofill:hover,
 .input-text:-webkit-autofill:focus,
 .input-text:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 30px var(--input-bg-color) inset !important;
     -webkit-text-fill-color: var(--input-text-color) !important;
 }

 /* End of Input Type text custom Style */

 /* --------------------------------------------------------------------------------- */

 /* Input Type select custom Style */

 .input-select {
     display: inline-block;
     width: auto;
     padding: 11px 0.75rem;
     -moz-padding-start: calc(var(--bs-form-select-padding-x) - 3px);
     color: var(--bs-body-color);
     appearance: none;
     line-height: 1.4;
     background-clip: padding-box;
     appearance: none;
     transition:
         border-color .15s ease-in-out,
         box-shadow .15s ease-in-out;

     border-radius: 12px;
     background-color: var(--input-bg-color);
     color: var(--input-text-color);
     border: 1px solid var(--input-border-color);

     background-image:
         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' viewBox='0 0 16 16'><path d='M2 5l6 6 6-6'/></svg>");
     background-repeat: no-repeat;
     background-position: right .75rem center;
     background-size: 12px;
     padding-right: 30px;
 }

 .input-select:focus {
     border-color: var(--color-primary);
     box-shadow: none;
     outline: none;
 }

 .input-select:-webkit-autofill,
 .input-select:-webkit-autofill:hover,
 .input-select:-webkit-autofill:focus,
 .input-select:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 30px var(--input-bg-color) inset !important;
     -webkit-text-fill-color: var(--input-text-color) !important;
 }


 /* End of Input Type select custom Style */

 /* --------------------------------------------------- */


 /* Button Custom Style Start */

 .input-button {
     display: inline-block;
     font-weight: 600;
     text-align: center;
     vertical-align: middle;
     user-select: none;
     border: 1px solid transparent;
     padding: 9px 20px;
     line-height: 1;
     border-radius: 12px;
     transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
         border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     cursor: pointer;
     background-color: var(--color-primary);
     color: var(--button-text-color);
     box-shadow: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
 }

 .input-button:hover {
     color: var(--light-theme-text);
     background: var(--light-theme-hover);
 }

 .input-button.no-icon {
     padding: 12px 30px;
 }

 .input-button.secondary {
     background-color: var(--color-secondary);
     color: var(--button-text-color);
     box-shadow: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
 }


 /* Button Custom Style End */

 /* --------------------------------------- */

 /* Input Type date custom Style */

 .input-date {
     display: block;
     width: 100%;
     padding: 11px 0.75rem;
     -moz-padding-start: calc(var(--bs-form-select-padding-x) - 3px);
     color: var(--bs-body-color);
     appearance: none;
     line-height: 1.4;
     background-clip: padding-box;
     appearance: none;
     transition:
         border-color .15s ease-in-out,
         box-shadow .15s ease-in-out;

     border-radius: 12px;
     background-color: var(--input-bg-color);
     color: var(--input-text-color);
     border: 1px solid var(--input-border-color);

     background-repeat: no-repeat;
     background-position: right .75rem center;
     background-size: 12px;
 }

 .input-date:focus {
     border-color: var(--color-primary);
     box-shadow: none;
     outline: none;
 }

 .input-date:-webkit-autofill,
 .input-date:-webkit-autofill:hover,
 .input-date:-webkit-autofill:focus,
 .input-date:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 30px var(--input-bg-color) inset !important;
     -webkit-text-fill-color: var(--input-text-color) !important;
 }

 /* End of Input Type date custom Style */

 /* --------------------------------------- for number */
 .input-number {
     display: block;
     width: 100%;
     line-height: 1.5;
     background-clip: padding-box;
     appearance: none;
     transition:
         border-color .15s ease-in-out,
         box-shadow .15s ease-in-out;

     border-radius: 12px;
     padding: 11px 0.75rem;
     background-color: var(--input-bg-color);
     color: var(--input-text-color);
     border: 1px solid var(--input-border-color);
 }

 .input-number:focus {
     border-color: var(--color-primary);
     box-shadow: none;
     outline: none;
 }

 .input-number:-webkit-autofill,
 .input-number:-webkit-autofill:hover,
 .input-number:-webkit-autofill:focus,
 .input-number:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 30px var(--input-bg-color) inset !important;
     -webkit-text-fill-color: var(--input-text-color) !important;
 }

 /* End of Input Type number custom Style */

 .form-control.error,
 .form-select.error {
     border-color: var(--color-danger);
 }

 .form-check-input:focus {
     box-shadow: none !important;
 }


 .error-message {
     display: flex;
     align-items: center;
     gap: 4px;
     color: var(--color-danger);
     font-size: 12px;
     font-weight: 500;
     margin-top: 4px;
 }

 .error-icon {
     font-size: 14px;
     color: var(--color-danger);
 }

 .input-error {
     border: 1px solid var(--color-danger);
 }


 .form-subtitle {
     color: rgba(0, 0, 0, 0.6);
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 32px;
     margin-top: -5px;
 }

 .form-group {
     margin-bottom: 24px;
 }

 .form-label {
     display: flex;
     align-items: center;
     gap: 4px;
     color: black;
     margin-bottom: 8px;
     font-weight: 500 !important;
 }

 .label-icon {
     font-size: 18px;
     color: #000000;
 }

 input[type="text"]:read-only,
 input[type="email"]:read-only,
 input[type="password"]:read-only {
     background-color: #f9f9f9 !important;
 }

 /* Responsive design */
 @media (max-width: 576px) {

     .row>* {
         padding-left: 0px !important;
         padding-right: 0px !important;
     }
 }