@font-face { font-family: Montserrat; src: url(./fonts/Montserrat-VariableFont_wght.ttf) format('truetype'); } /* Global styles */ body { font-family: 'Montserrat', sans-serif; background: #d0e0e3; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } /* Container for the change password form */ .changepwd-container { background: #f4f4f4; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; width: 100%; max-width: 400px; } /* Title */ .changepwd-container h3 { margin-bottom: 30px; font-size: 1.5em; color: #b51e49; } .changepwd-container h5, h6 { text-align: left; margin-bottom: 5px; color: #000; } /* Input fields */ .changepwd-container input[type="password"] { width: 100%; padding: 15px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; font-size: 1em; box-sizing: border-box; } /* Button */ .changepwd-container button { width: 100%; padding: 15px; border: none; border-radius: 5px; background: #3d85c6; color: #fff; font-size: 1.2em; cursor: pointer; transition: background 0.3s ease; } .changepwd-container button:hover { background: #45818e; } /* Focus states for inputs */ .changepwd-container input[type="password"]:focus { border-color: #007bff; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); outline: none; } .divsty { border-radius: 10px; background : #f7e6ee; padding: 1px 0; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: white; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } .logo_bg { background:#b51e49; border-radius: 10px; }