:root { --primary: #151f2d; --white: #f1f1f1; --second: #775ae2; --hover-color: rgba(130, 130, 130, 0.277); --iti-border-color: rgba(120, 119, 119, 0.247); --value-none: none } body { font-size: medium; background-color: var(--primary); font-family: 'Recursive', sans-serif; color: var(--white) !important; padding: 0 0 30px 0; } .container { width: 900px; /* Adjust maximum width of the container */ } form { max-width: 300px; /* Adjust maximum width of the form */ margin: 0 auto; /* Center the form horizontally */ margin-bottom: 10px; } /* Change background color of input fields */ .form-control { color: var(--white); background-color: var(--primary); /* Change input box background color */ border-color: #27416b; border-radius: 7px; outline: none; } .form-control:focus { background-color: var(--primary); /* Change background color of input boxes when in focus */ color: var(--white); /* Change text color */ border-color: #27416b; outline: none; box-shadow: none; } .btn { margin-top: 0; border-radius: 6px !important; } .margin-top { margin-top: 30px; } /* Decrease input size and space between them */ .form-control-lg { padding: 12px; /* Decrease padding */ font-size: 17px; /* Decrease font size */ margin-bottom: -24px; /* Decrease space between inputs */ } /* Decrease placeholder text size and change color */ .form-control::-webkit-input-placeholder { font-size: smaller; /* Decrease placeholder text size */ color: var(--white); /* Change placeholder text color */ } .form-control:-ms-input-placeholder { font-size: smaller; /* Decrease placeholder text size */ color: var(--white); /* Change placeholder text color */ } .form-control::placeholder { font-size: medium; /* Decrease placeholder text size */ color: var(--white); /* Change placeholder text color */ /* text-indent: 10px; */ } /* Change color of register button */ .btn-outline-primary { color: var(--white); /* Text color */ background-color: var(--second); /* Background color */ border-color: var(--second); /* Border color */ } /* Change color of register button on hover */ .btn-outline-primary:hover { color: var(--white); /* Text color */ background-color: #7b5fdfd6 !important; /* Background color */ border-color: #7b5fdfd6 !important; /* Border color */ } .btn-outline-primary:focus, .btn-outline-primary:active { outline: none; box-shadow: none; background-color: var(--second); /* Reset background color */ } /* For form controls */ .form-control:focus { outline: none; box-shadow: none; } /* For input submit button */ .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:hover, .btn-outline-primary:focus-visible, input[type="submit"].btn-outline-primary:focus, input[type="submit"].btn-outline-primary:active, input[type="submit"].btn-outline-primary:hover, input[type="submit"].btn-outline-primary:focus-visible { outline: none; box-shadow: none; background-color: var(--second); /* Reset background color */ color: var(--white); /* Reset text color */ border-color: var(--second); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: 1px solid #27416b; -webkit-text-fill-color: var(--white); -webkit-box-shadow: 0 0 0px 1000px #151f2d inset; transition: background-color 5000s ease-in-out 0s; } #hed { color: var(--second); font-size: 2.5rem; font-family: Poppins, sans-serif; text-align: center; font-weight: bold; } .txt { color: var(--white); font-family: 'Recursive', sans-serif; font-weight: 500; position: relative; right: 60px; } .lgn { color: var(--second); font-weight: 600; font-family: 'Recursive', sans-serif; text-decoration: none; } .margin-left { position: relative; right: 60px; } .lgn:hover { color: var(--second); text-decoration: underline; } .mb-3 { color: var(--white) !important; } .recaptcha-container { display: flex; align-items: center; margin-top: 30px; margin-bottom: 5px; justify-content: center; transform: scale(0.8); position: relative; } .customborder { border-radius: 2%; border: 1px solid #27416b; } .position-center { position: relative; top: 100px; } input { width: 140% !important; padding: 1px; border: 1px solid var(--white); border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; margin-left: -60px; } input[type=submit] { background-color: var(--second); color: var(--white); } #message { display: none; color: #000; position: relative; padding: 20px; margin-top: 10px; } #message p { padding: 10px 35px; font-size: 18px; } #messageconfirmpassword { display: none; color: #000; position: relative; padding: 20px; margin-top: 10px; } #messageconfirmpassword p { padding: 10px 35px; font-size: 18px; } .valid { color: green; } .valid:before { position: relative; left: -35px; content: "✔"; } .invalid { color: red; } .invalid:before { position: relative; left: -35px; content: "✖"; } .bgrid { padding: 0 20px; } .toggle-password { position: absolute; right: -50px; transform: translateY(-45%); cursor: pointer; } .iti__dropdown-content { border-radius: 6px; background-color: var(--primary) !important; } .iti--inline-dropdown .iti__dropdown-content { position: absolute; z-index: 2; margin-top: 12px; margin-left: -66px; border: 1px solid var(--iti-border-color) !important; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } .margin-bottom { margin-bottom: -20px; } .iti__search-input { width: 100% !important; border-width: 0; border-radius: 3px; padding: 8px; } .iti__search-input:hover, .iti__search-input:active, .iti__search-input:focus-visible, .iti__search-input:focus, .iti__search-input:not(:focus):not(:hover) { outline: none; box-shadow: none; background-color: var(--primary); color: var(--white); border: 1px solid #27416b; border-radius: 7px; margin-left: 0px; } .iti__search-input::placeholder { color: var(--white); } .iti__selected-country-primary { margin-top: 40px !important; position: relative; right: 60px; } .iti__selected-country:hover, .iti__selected-country:active, .iti__selected-country:focus-visible, .iti__selected-country:focus, .iti__selected-country:not(:focus):not(:hover) { outline: none; box-shadow: none; color: var(--white); border-radius: 7px; } .iti input.iti__tel-input, .iti input.iti__tel-input[type=text], .iti input.iti__tel-input[type=tel] { position: relative; z-index: 0; margin: 30px 10px -10px -66px !important; width: 192% !important; } .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country-primary:hover, .iti--allow-dropdown .iti__country-container:not(:has(+ input[disabled])):not(:has(+ input[readonly])) .iti__selected-country:has(+ .iti__dropdown-content:hover) .iti__selected-country-primary { background-color: var(--value-none); } .iti__search-input+.iti__country-list { border-top: 1px solid var(--iti-border-color) !important; } @media only screen and (max-width: 1024px) { .bgrid { padding: 0 18px; } } @media only screen and (max-width: 768px) { .bgrid { padding: 0 15px; } .container { width: 380px; } input { width: 100% !important; margin-left: 0; } .txt { right: 0; } .margin-left { right: 0; } .toggle-password { right: 10px; } .iti input.iti__tel-input, .iti input.iti__tel-input[type=text], .iti input.iti__tel-input[type=tel] { position: relative; z-index: 0; margin: 30px 10px -10px -6px !important; width: 108% !important; } .iti__selected-country-primary { right: 0; } .iti--inline-dropdown .iti__dropdown-content { margin-left: -6px; } } @media only screen and (max-width: 600px) { .bgrid { padding: 0 10px; } #hed { font-size: 2rem; } .txt { font-size: 14.9px; } .container { width: 380px; } } @media only screen and (max-width: 400px) { .bgrid { padding: 0; } .container { width: 325px; } .iti input.iti__tel-input, .iti input.iti__tel-input[type=text], .iti input.iti__tel-input[type=tel] { width: 115.5% !important; margin: 30px 10px -10px -16px !important; } .iti__selected-country-primary { right: 10px; } .customborder{ width: 114%; right: 21px; position: relative; } input{ width: 107% !important; margin-left: -10px; } .toggle-password { right: 0; } } @media (min-width: 992px) { .col-lg-6 { width: 52%; } } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #324767; } ::-webkit-scrollbar-thumb:hover { background: #324767; }