body{margin:0;padding:0;font-family:Open Sans,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#133c55}h1{font-family:Lobster Two,cursive;font-weight:700}button:focus{outline:0}.no-items{width:100%;background:#d2dae2;border-radius:10px;margin:20px 0;height:50px;line-height:50px;color:#111;text-align:center;box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15)}.item-list{padding:0}.item-list li{list-style-type:none;width:100%;background:#d2dae2;border-radius:10px;margin:20px 0;height:50px;line-height:50px;color:#111;display:flex;box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15)}.item-list li.used{background:#808e9b;color:#333}.item-list li>span{flex-grow:4;cursor:pointer;padding:0 20px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.item-list li>button{flex-basis:60px;border:0;border-radius:0 10px 10px 0;background:#485460;color:#eee}.item-list li.sort-menu{height:30px;background:none;box-shadow:none;justify-content:space-between}.item-list li.sort-menu>button{flex-basis:100px;border-radius:10px 10px 10px 10px}.item{width:100%;background:#d2dae2;border-radius:10px;color:#111;margin-top:20px;box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15)}.item.used{background:#808e9b;color:#333}.item h2{margin:0}.item .date{position:relative;display:block;font-size:70%;margin-bottom:20px}.item .date[data-date]:after{content:attr(data-date);background:#485460;color:#eee;position:absolute;top:150%;left:0;width:140px;padding:10px;transition:all .3s ease 0s;opacity:0;z-index:1;border-radius:10px}.item .date[data-date]:hover:after{opacity:1}.item>.buttons2,.item>.buttons3{width:100%;display:flex}.item>.buttons2 button,.item>.buttons3 button{flex-grow:1;height:50px;flex-basis:60px;border:0;border-radius:10px 0 0 0;background:#485460;color:#eee;margin-right:1px}.item>.buttons3 button:nth-child(2){border-radius:0;margin-right:1px;margin-left:1px}.item>.buttons2 button:nth-child(2),.item>.buttons3 button:nth-child(3){border-radius:0 10px 0 0;margin-right:0;margin-left:1px}.item .data{padding:20px;text-align:center}.item .data .item-number,.item .data .item-pin,.item .data img{width:100%;display:block}.item .data img{margin-bottom:20px}.item .auth .header{margin-top:4px;width:100%;font-size:small;font-weight:800;text-transform:uppercase;text-align:center}.item .auth .input{height:50px;display:flex;align-items:center}.item .auth .input .chars{flex:4 1;text-align:center;line-height:50px;display:flex;justify-content:center}.item .auth .input .chars span{margin:3px}.item .auth .input button.submit{background:#485460;color:#eee}.item .auth .input button.submit:active{color:#eee;background:#133c55}.item .auth .row{display:flex}.item .auth button{width:20%;height:40px;margin:2px;border:0;border-radius:10px;transition:all .3s ease 0s}.item .auth button:active{color:#eee;background:#133c55}.item .data .card-number,.item .data .card-pin{display:block}.item .data .value{font-size:70%;font-weight:700}.item .data .code-wrapper{padding:10px;background:#eee}.item .data code{white-space:pre-wrap;word-break:break-word}.item .data ul{list-style-type:none;padding:0}.item .data ul li{text-align:left;border-radius:10px;background:#133c55;color:#eee;padding:15px;box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15);cursor:pointer;margin-bottom:10px}.item .confirm-delete{text-align:center;padding:20px}.item .confirm-delete .buttons{display:flex;margin-top:20px}.item .confirm-delete .buttons *{flex:1 1;margin:10px;height:40px;border:0;border-radius:10px;transition:all .3s ease 0s}.item .confirm-delete .buttons button:active{color:#eee;background:#133c55}.item .operations{padding:0 20px 20px}.item .operations .row{display:flex;align-items:center}.item .operations .row>div{padding-top:10px;padding-bottom:10px}.item .operations .row .name{flex:1 1}.item .operations .row .input{display:flex;flex:2 1}.item .operations .row .input input{flex:2 1;box-sizing:border-box;width:100%;padding:10px;border:0;border-radius:10px 0 0 10px}.item.used .operations .row .input input{background:#9aa9b7}.item .operations .row .input input:focus{outline:0}.item .operations .row .input button{border:0;background:#485460;color:#eee;border-radius:0 10px 10px 0;transition:all .3s ease 0s}.item .operations .row .input button:active{color:#eee;background:#133c55}.item .notes{padding:0 20px 20px}.item .notes>div{border-top:1px solid #333;position:relative}.item .notes>div>p{margin-bottom:0}.item .notes>div>.delete{cursor:pointer;position:absolute;padding:20px;top:-10px;right:0}.setup-form{width:100%;background:#d2dae2;border-radius:10px;margin:20px 0;color:#111;padding:20px;box-sizing:border-box;box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15)}.setup-form h2{margin-top:0}.setup-form .help{font-size:90%;text-align:center}.setup-form .help a{color:#485460}.setup-form .help a:visited{color:#5e4860}.setup-form textarea{width:100%;height:250px;margin-top:20px}.setup-form input{box-sizing:border-box;width:100%;padding:10px;border:0;border-radius:10px}.setup-form input:focus{outline:0}.setup-form .code-wrapper{padding:10px;background:#eee}.setup-form code{white-space:pre-wrap;word-break:break-word}.setup-form button{display:block;margin:20px auto;width:100%;background:#eee;color:#485460;border:0;padding:10px;border-radius:10px;transition:all .3s ease 0s}.setup-form button:active{color:#eee;background:#133c55}.app{width:100%;max-width:500px;margin:0 auto;padding:0 20px 10px}.app,.notification{box-sizing:border-box}.notification{position:fixed;z-index:101;bottom:0;left:0;right:0;background:#fde073;text-align:center;line-height:2.5;box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15);animation:slideDown 5s ease;transform:translateY(50px);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding-left:10px;padding-right:10px}.masthead{display:flex;align-items:flex-end;text-align:center}.masthead>*{flex:1 1}.masthead>.links{display:flex;font-size:14px}.masthead h1{color:#eee;margin:5px}.masthead a{display:inline-block;padding-bottom:10px;text-decoration:none;color:#eee;flex:1 1}.masthead a:after{content:"";top:4px;height:1px;display:block;position:relative}.masthead a.active:after,.masthead a:hover:after{background:#eee}@keyframes slideDown{0%{transform:translateY(50px)}10%{transform:translateY(0)}90%{transform:translateY(0)}to{transform:translateY(50px)}}