body{margin:0;font-family:sans-serif;font-size:20px;background:#fcf5ee;color:#000}.input-container{position:relative;width:300px;margin-bottom:30px}.input-container input{width:100%;padding:12px 10px;border:none;border-bottom:2px solid #ccc;font-size:16px;background-color:transparent;outline:0;transition:border-bottom .3s ease;color:#fff}.input-container input:focus{border-bottom:2px solid #fff}.input-container label{position:absolute;top:12px;left:10px;color:#ccc;font-size:16px;pointer-events:none;transition:all .3s ease}.input-container input:focus+label,.input-container input:not(:placeholder-shown)+label{top:-18px;font-size:12px;color:#fff}button{cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin:10px}button:hover:not(.loading){background-color:#303f9f;box-shadow:0 2px 4px rgba(0,0,0,.2)}button:active:not(.loading){background-color:#283593;box-shadow:0 1px 2px rgba(0,0,0,.2)}button.loading{cursor:not-allowed;background-color:#b0b0b0;box-shadow:none;pointer-events:none;color:transparent}button .circular-progress{position:absolute;width:24px;height:24px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;opacity:0;transition:opacity .3s ease;z-index:1}button.loading .circular-progress{opacity:1}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.5);justify-content:center;align-items:center;opacity:0;transition:opacity .3s ease-in-out}.modal.open{opacity:1;display:flex}.modal-content{background-color:#fff;margin:auto;padding:24px;border-radius:8px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);width:90%;max-width:500px;position:relative;transform:scale(.95);transition:transform .3s ease-in-out}.modal.open .modal-content{transform:scale(1)}.modal .title{margin-top:0;margin-bottom:20px;color:#424242;font-size:24px;font-weight:500;border-bottom:1px solid #eee;padding-bottom:15px}.modal .body{margin-bottom:20px;line-height:1.6;color:#555}.modal .footer{display:flex;justify-content:flex-end;padding-top:15px;border-top:1px solid #eee}.modal button{padding:10px 20px;font-size:15px;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.modal button.primary{background-color:#6200ea;color:#fff}.modal button.primary:hover{background-color:#7b1fa2}#snackbar{visibility:hidden;min-width:250px;background-color:#aaa;color:#000;text-align:center;border-radius:8px;padding:16px;position:fixed;z-index:999999;font-size:17px;box-shadow:0 4px 8px rgba(0,0,0,.2);animation-fill-mode:forwards}@keyframes fadeInBottom{from{bottom:-50px;left:50%;opacity:0}to{bottom:30px;left:50%;opacity:1}}@keyframes fadeInLeft{from{left:-300px;bottom:30px;opacity:0}to{left:50%;bottom:30px;opacity:1}}@keyframes fadeInRight{from{right:-300px;bottom:30px;opacity:0}to{right:50%;bottom:30px;opacity:1}}@keyframes fadeOutBottom{from{bottom:30px;left:50%;opacity:1}to{bottom:-50px;left:50%;opacity:0}}@keyframes fadeOutLeft{from{left:50%;bottom:30px;opacity:1}to{left:-300px;bottom:30px;opacity:0}}@keyframes fadeOutRight{from{right:50%;bottom:30px;opacity:1}to{right:-300px;bottom:30px;opacity:0}}#snackbar.show{visibility:visible!important;animation-duration:.5s}#snackbar.hide{animation-duration:.5s}#snackbar.show.from-bottom{animation-name:fadeInBottom}#snackbar.hide.from-bottom{animation-name:fadeOutBottom}#snackbar.show.from-left{animation-name:fadeInLeft}#snackbar.hide.from-left{animation-name:fadeOutLeft}#snackbar.show.from-right{animation-name:fadeInRight}#snackbar.hide.from-right{animation-name:fadeOutRight}