#contact .form #sendmessage { color: #ff8800; border: 1px solid #1dc8cd; display: none; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #contact .form #errormessage { color: red; display: none; border: 1px solid red; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } .contactee select { background-color: #2566f4; color: white; padding: 12px; width: 100%; border: none; font-size: 20px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); -webkit-appearance: button; appearance: button; outline: none; } #passport .form #sendmessage { color: #2566f4; border: 2px solid #008800; display: none; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #passport .form #errormessage { color: #ff0000; display: none; border: 2px solid #880000; text-align: center; padding: 15px; font-weight: 600; margin-bottom: 15px; } #passport .form #sendmessage.show, #passport .form #errormessage.show, #passport .form .show { display: block; } #passport .form .validation { color: #880000; display: none; margin: 0 0 20px; font-weight: 400; font-size: 13px; } #passport .form input, #contact .form textarea { border-radius: 0; box-shadow: none; font-size: 14px; } #passport .form button[type="submit"] { background: #2566f4; border: 0; border-radius: 2rem; padding: 1rem 5rem 1rem 5rem; color: #ffffff; } #passport .form button[type="submit"]:hover { background: #000000; cursor: pointer; } .member-value, .member-list { width: 100%; } .member-value { font-weight: 600; letter-spacing: 4px; height: 4rem; font-size: 1.1rem; padding: 1rem; color: #ffffff; background-color: #2566f4; border: 3px solid transparent; transition: .3s ease-in-out; &::-webkit-input-placeholder { color: #ffffff; } &:hover { background-color: #2566f4; cursor: pointer; &::-webkit-input-placeholder { color: #ffffff; } } &:focus, &.open { box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2); outline: 0; color: #ffffff; background-color: #2566f4; &::-webkit-input-placeholder { color: #ffffff; } } } .member-list { list-style: none; box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2); overflow: hidden; max-height: 0; transition: .3s ease-in-out; &.open { max-height: 320px; overflow: auto; } li { position: relative; height: 4rem; color: #ffffff; background-color: #2566f4; padding: 1rem; font-size: 1.1rem; display: flex; align-items: center; cursor: pointer; transition: background-color .3s; opacity: 1; &:hover { color: #2566f4; background-color: #ffffff; } &.closed { max-height: 0; overflow: hidden; padding: 0; opacity: 0; } } }