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

body {
    font-family: 'Source Sans Pro',Arial,sans-serif;
    background-color: #f8fafc;
    color: #374151;
}

* {
    user-select: none;
    -webkit-user-drag: none;
}

form {
    width: 100%;
    height: 100%;
}

.layout {
    display: flex;
    min-height: 100vh;
}

.left {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: white;
}

.content {
    width: 100%;
    max-width: 400px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 2rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: #374151;
}

.back-link svg {
    stroke: currentColor;
}

.form h1 {
    font-size: 1.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #111827;
}

.form > p {
    color: #6b7280;
    margin-bottom: 2rem;
    font-size: 0.875rem;
}

.social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn:hover {
    background-color: #f3f4f6;
    color: white;
    border-color: #9ca3af;
}

.btn.google {
    border: 2px solid #d1d5db;
}

.btn.github {
    border: 2px solid #d1d5db;
}

.btn.primary {
    background-color: #3b82f6;
    color: white;
    border: none;
    width: 100%;
    padding: 0.875rem;
    font-weight: 500;
}

.btn.primary:hover {
    background-color: #2563eb;
}

.divider-span {
    background-color: #111827; 
    color: #ffffff7e;
    font-size: 0.875rem;
    padding: 0 1rem;   
}


form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
    display: block;
}

.required {
    color: #ef4444;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
    background-color: white;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.password-wrapper {
    position: relative;
}

.eye {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1rem;
}

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.options label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.options input[type="checkbox"] {
    width: auto;
}

.options a {
    color: #3b82f6;
    text-decoration: none;
}

.options a:hover {
    color: #2563eb;
}

.signup {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.signup a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.signup a:hover {
    color: #2563eb;
}

.right {
    flex: 1;
    background-color: #1f2937;
    display: none;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.overlay {
    color: white;
    padding: 2rem;
    max-width: 300px;
}

.overlay p {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
}

body {
    background-color: #111827;
    color: #d1d5db;
}
    
.left {
    background-color: #111827;
}
    
.form h1 {
    color: #f9fafb;
}
    
.form > p {
    color: #9ca3af;
}
    
.btn {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #374151;
    color: #d1d5db;
}
    
.btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
    
input[type="email"],
input[type="password"],
input[type="text"] {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}
 


.toast_container{
    font-family: 'Poppins', sans-serif;
    padding:3rem;
    margin:0 auto;
    width:700px;
    height:500px;
    background-color:#eff2fb;
}

h1{
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:600;
    font-size:2rem;
    margin-top:3rem;
    margin-bottom:2.5rem;
}

.btngp_container{
    margin-top:2rem;
    display:flex;
    justify-content:center;
    align-items:center;
}

#btnSuccess{
    background-color:#1bc5bd;
    border-color:#1bc5bd;
}

#btnInfo{
    background-color:#187de4;
    border-color:#187de4;
}

#btnWarning{
    background-color:#ee9d01;
    border-color:#ee9d01;
}

#btnError{
    background-color:#ee2d41;
    border-color:#ee2d41;
}

#btnSuccess,#btnInfo,#btnWarning,#btnError{
    color:#fff;
    border-radius:0.5rem;
    font-weight:400 !important;
    font-size:0.765rem;
    width:90px;
    height:36px;
    margin:3px;
    cursor:pointer;
}
  
p{
    width:100%;
    line-height:1.5rem;
    text-align:center;
    margin:0 auto;
    font-size:0.825rem;
    margin-bottom:2rem;
}

.toast-success,.toast-info,.toast-warning,.toast-error{
    width:400px !important;
    font-family: 'Poppins', sans-serif;
    font-size:0.75rem;
    border-radius:1rem !important;
    background-color:#edf1fd;
    color:#01081e !important;
    border-color:transparent !important;
}

.closebtn{
    width:25px;
    height:25px;
    border-radius:50%;
    background-color:#ccd7fc !important;
}

.closebtn>i{
    color:#000617;
    font-weight:500;
}

#toast-container>.toast-success {
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKLSURBVHgBzZZNbtpAFMffjMFRQY28hFKpzg1gGZFKWGkqdZX2BHVOUHIC4AQ0J6g5QZVVpDTUqC10V3GDelGqSF3UG1cqgZm+GYIVbPAHoCp/CWY89sxP78289wbgP4tAShW+XugwyeiiP6Xc/VV9PkwzPxao2e+1fHbXBEqOgfEyztDCq5AecN4ZVQ+tuPUigY8H9hvOWHMpZLkc/LWiwEuBwqqcqrUJMBPWk+WN6alrGG4sULpQfWjjqzJsJDL0xsQIQmnws7y6294cJsTLeZW1g6MLwFK/a2JjwvZkFgfd+kogqgFbFuXQ0GxbCwFvrdNhHXHew3+Lz05pUNqD7MQMAYGT17AebTg6eGZMx+PWqhijVDme9zP+KOE1SItCixhVXom+oqp4sld4iHP/EEoLS/3LcsSqrnQVtsFXaFHret9wHvXtBkRvh1b81n3iA6eMrM4kBNw/Y1qZKrSyuEf8TGSUwucPNUwQTYiR4rE9HxgjPb/DGsISytiJRCHYyynNgn2hK5S+gxSaATMZJ/IrDvXip6uXP54e9QjjZ4xSw60YLu5bnCt9/cXKIlr/YGFY/MYmKkm7eBIr18YLRzzIxM7ZW0godL9k3Q2LuLqmKTs70n3ClbKKJBWRcQqLQJiex07kvFYafLRlCCQvWcKYjs+ed3RMPzcq+w6QYqEkLDxgP6uHe/Nn30JHlBEOLdiyRKwGnhdV+nJl4ZVhzTQXkoWH5eTuQCgOszdKXRRP2Fh86OXoaXA0BBSuzWKlFpciWJvFO5gYZKwGX0VeokTJwk1vkKRlS+Zb1hodHK2Mz0T3UlkrRflaVlEkhOMWkHMvT61lVqUGLsIvy+Q22WcyE8fZn2Wee6t/lXrvcWjggekAAAAASUVORK5CYII=')!important;
}

#toast-container>.toast-info {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJaSURBVHgBvVZNbtNQEJ55idd4hSphKnOCkhM0PQHpCUhuADsWLTgkQuwQJyCcoOEEpSfAnKBW6cK0m6wb+U1nXu04bdLkTRT1kxLnOR5/b/7eNwge2Dn61ybEN4agbRFiBAjlPgFM+HfK1xSJfuXDl7/XvQtXEh1fdvnyiT8xeAEzgKKfD3ZHjz6xlOjDeYzN4IQQXsNGYOLpzUH+9VX28B+zQPbx8i0FwZ/NyQQUI7/j+dFFZ2Er8wt5wKA5gW0CoZt/jn7WyxISRvGsKojt8cGEptNWFd46pEFw6kfG+SE6KBrQ4kW27mmu4FDqoVo7wrIaY/AB2Z6U/3USpZbsey8Troed44vujBDuSt8LSDgrJs63IvwNx4HS1IB46msmObEAfUR8RkTvVDnnVDTZoEPgD5cTgG9svPrUWG7babLZntJowl8Ze5hKv/Gttr817htdg+MIucT/D6NWPnjR4/PzLyhg+Bw2ur6jLrfPj9lKH53QgBI07xVqwnkH43KiACKlcnXVrYRUuOHvTGNUFMYRsj6qD3fRTWMsnfkayA6vv0RpudoHJSQdEtKxtwHvsGZ3LaECb3hsyrEg8zGoCiZMzkMkrV5iJlxVlfa9TCym9W5xLB/wRuE4HGE+iEZ8AKRrbRpl3ibirf1OQJ5esnflnFMLcMICXGxfgN1k12ABTh4IsNxA8NM3FaHoZ1IPU/dOGnGbRfVQexgsJXLvsL2r4e69PC8fEzm8UASikTFsAK7glJrTw3nPVhLOiJ9qEF4gllGfxZPbYE/kbH7UF23kX2fS1D6j/i3BTfaqkKQ1ngAAAABJRU5ErkJggg==')!important;
}
#toast-container>.toast-warning {
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHbSURBVHgBxZZPTsJAFMa/NxDEjYJE1/UGcgOP4BEwARNXeAP0BMSVCzWNJxBPIDfQG8COhSSwJBH7fFNbaKV/ZsA/vwVppzPz5Zt58zHAH0OwZOCisjNHgxWmBYVe9RRTm/FWgiMXzpZHz/LoBE1DUly3EVWwoOSpTkRM43hzXMACY4eBu0HCp6m4PDR1aeywzOSmfKrYuDQSHN9LkTCOFw3Mr/I7DF9JUXt0E1vqzQQVqBN5ne41UdfFop+DtkqppDpmc+Wg3SFeKL5IsGeLfSNw4+02sgrrCn5zl0mhkN83U3DiqjZgtjc+ss95LlMF9TFgj63OmCbPZapgGZbuQsRlsO/mguu6W05KnYlkbvK3BIII24TUyFsR1O50iWNDdBgkuVwR/AF3IYmRFwtvXdIF5f/9ZOGH9UwmlDB/0RPn9Y0Ge8yhiLnIp8IiZCDm9/U81Y02LBzqUpbqMhG0Zv7B9YMz6MBfOrSJMDkyV8z8YNq/WKTuUgeJAZ2hxk+1Fi5rTTSIuWc2Zhl5Sh8DG3dQtLuYh+jIdFgYeTS+w4kieoQdQ3wVTF7RxNhmdopSNlaDAhyswexd8kDfLRG5LvwWUmTX1XO5VoYNemmJYbwnNnhAf7+FPv6DT2e/n0VFnPgUAAAAAElFTkSuQmCC')!important;
}
#toast-container>.toast-error {
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIlSURBVHgB3VbBbtNAEH2zTugFFIPgwAlzA4mK8AdrvgC+APiSKl/S9AvoH8SfEEQP3PCNAwjcA6IQeYcdYxtvbK/jNr30SVG86519npk3swvcdNCuC7880dF0Ck1QzxVMKHMGKmOYD5sNkoefknSXfQYJvz7TekJ0xIAe2CjJwSf3PybLgXXd+BzpcHZHHQP8CiPAoOWfjVn0edxJKOE7mNLKPka4HNLfG467SOkayGpSCvjF3XWSNSfV9qpbU3W0BzJBxLmkxIXj4bdD/VaBjrFH5Mzxg7MkqcaOhwHwBuOR+V4GVuHNcU0oubMK032GNh+P5Wdjsq4nGet6vh/619OXj1qEUtQeI/EiswJISXFckArZhGMRxcUFvPhJJm4REmPusQnZ0OrHXIdCIKQVmdTrwYTee2xBStV7T/7PIvQZWY/mJWlcSb1oDrdtCZH3Y6HIzOpnjIFxh2E4eofGcvarrZkz8awZXkdIXd/J6rxFyH6jzJK9rsgkjNs5hac8mMy6RRgESDyEECU6OStzKuVk30lwezXQ3NvpNN8Pte2h/bVYeuEX1zYYyb2zVbssBDljMWA+jszCEJ80xw7hv57Hp9gTCLzcPpBboqYA7+xfiqsjtc25FbEWYaG6oFBdiiuQyR7SCgcJS9LCgOHGfxfYMJ6WB2/a/X4AxRnJ9tgir3oLNdpL1KJ59l2KsIIt8ijP7TWRixqcldbn0jDGXBNvPv4C3QjuTqveJGAAAAAASUVORK5CYII=')!important;
}

.references{
    margin-top:2rem;
    font-size:0.75rem;
    display:flex;
    justify-content:flex-start;
    flex-direction:column;
    align-items:center;
}
.references a{
    text-decoration:none;
    text-align:left;
}

@media (min-width: 1024px) {
    .right {
        display: flex;
    }
}

@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    
    .left {
        padding: 1.5rem;
    }
    
    .social-buttons {
        grid-template-columns: 1fr;
    }
    
    .options {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

}