db-avatar-init/api/public/css/style.css

<div align="center"> <a href="https://github.com/Alex2018-avatar/db-viewer"> <img width="200" height="200" src="https://cdn2.vectorstock.com/i/1000x1000/78/46/blue-database-icon-circle-frame-white-background-v-vector-20757846.jpg"> </a> <br>

*{margin:0;padding:0}*,*::before,*::after{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}@media only screen and (max-width: 68.75em){html{font-size:50%}}th{text-align:left}.error{color:red}.input-error{border:1px solid red !important}.hidden{display:none !important}.clearfix{padding:10px}.content-body{font-size:14px}.show{display:block}.rigth{float:right}.error-login{padding:5px;color:white;text-align:center;border:1px solid red;background-color:#ff7d7d52;margin-bottom:5px;display:none}a.btn-log-out{width:85px;height:35px;background:maroon;text-align:center;padding-top:10px;color:white;border:1px solid;border-radius:7px}body{font-family:'Nunito Sans', sans-serif;font-weight:400;line-height:1.6;color:#655A56;background-image:-webkit-gradient(linear, left top, right bottom, from(#FBDB89), to(#fff));background-image:linear-gradient(to right bottom, #FBDB89, #fff);background-size:cover;background-repeat:no-repeat;min-height:calc(100vh - 2 * 4vw)}.item1{grid-area:header}.item2{grid-area:menu}.item3{grid-area:main}.item4{grid-area:right}.item4{grid-area:table}.item5{grid-area:footer}.container{max-width:140rem;margin:4vw auto;position:relative;background-color:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2rem 6rem 0.5rem rgba(101,90,86,0.2);display:grid;grid-template-rows:10rem minmax(100rem, auto);grid-template-columns:1.1fr 2fr 1.1fr;grid-template-areas:'header header header header header header'
 'menu table table table table table'
 'menu main main main right right'
 'menu footer footer footer footer footer'}@media only screen and (max-width: 68.75em){.container{width:100%;margin:0;border-radius:0}}.container-fluid{grid-area:header;width:100%;display:grid}.btn,.btn-small,.btn-small:link,.btn-small:visited{background-image:-webkit-gradient(linear, left top, right bottom, from(#FBDB89), to(#F48982));background-image:linear-gradient(to right bottom, #FBDB89, #F48982);border-radius:10rem;border:none;text-transform:uppercase;color:#fff;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-transition:all .2s;transition:all .2s}.btn:hover,.btn-small:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.btn:focus,.btn-small:focus{outline:none}.btn>*:first-child,.btn-small>*:first-child{margin-right:1rem}.btn{padding:1.3rem 3rem;font-size:1.4rem}.btn svg{height:2.25rem;width:2.25rem;fill:currentColor}.btn-small,.btn-small:link,.btn-small:visited{font-size:1.3rem;padding:1rem 1.75rem;text-decoration:none}.btn-small svg,.btn-small:link svg,.btn-small:visited svg{height:1.5rem;width:1.5rem;fill:currentColor}.btn-inline{color:#F59A83;font-size:1.2rem;border:none;background-color:#F9F5F3;padding:.8rem 1.2rem;border-radius:10rem;cursor:pointer;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-transition:all .2s;transition:all .2s}.btn-inline svg{height:1.5rem;width:1.5rem;fill:currentColor;margin:0 .2rem}.btn-inline span{margin:0 .4rem}.btn-inline:hover{color:#F48982;background-color:#F2EFEE}.btn-inline:focus{outline:none}.btn-tiny{height:1.75rem;width:1.75rem;border:none;background:none;cursor:pointer}.btn-tiny svg{height:100%;width:100%;fill:#F59A83;-webkit-transition:all .3s;transition:all .3s}.btn-tiny:focus{outline:none}.btn-tiny:hover svg{fill:#F48982;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.btn-tiny:active svg{fill:#F48982;-webkit-transform:translateY(0);transform:translateY(0)}.btn-tiny:not(:last-child){margin-right:.3rem}.closed{background-image:-webkit-gradient(linear, left top, right bottom, from(rgba(255,255,255,0.278431)), to(rgba(224,224,224,0)));background-image:linear-gradient(to right bottom, rgba(255,255,255,0.278431), rgba(224,224,224,0));color:#000;border:none;text-transform:uppercase;-webkit-box-align:center;align-items:center;-webkit-transition:all .2s;transition:all .2s}.search-content{grid-area:header;background-color:#F9F5F3;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:justify;justify-content:space-between;box-shadow:0 6px 3px -1px #d0c8c8;margin-bottom:8px}.search{background-color:#fff;border-radius:10rem;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding-left:3rem;-webkit-transition:all .3s;transition:all .3s}.search:focus-within{-webkit-transform:translateY(-2px);transform:translateY(-2px);box-shadow:0 0.7rem 3rem rgba(101,90,86,0.08)}.search__field{border:none;background:none;font-family:inherit;color:inherit;font-size:1.7rem;width:30rem;padding:10px;border-radius:23px;border:1px solid #e0d8d8}.search__field:focus{outline:none}.search__field::-webkit-input-placeholder{color:#DAD0CC}.search__field::-moz-placeholder{color:#DAD0CC}.search__field:-ms-input-placeholder{color:#DAD0CC}.search__field::-ms-input-placeholder{color:#DAD0CC}.search__field::placeholder{color:#DAD0CC}.loader{margin:2rem auto;text-align:center;position:absolute;margin-left:31%}.loader svg{height:5.5rem;width:5.5rem;fill:#F59A83;-webkit-transform-origin:44% 50%;transform-origin:44% 50%;-webkit-animation:rotate 1.5s infinite linear;animation:rotate 1.5s infinite linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.menu-container-aside{grid-area:menu}.menu-container-aside .results__link{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;padding:1.5rem 3rem;-webkit-transition:all .3s;transition:all .3s;border-right:1px solid}.content-body{grid-area:table}.content-body .table{width:100%;border:1px solid #dedede}.content-body .table .thead-dark{width:100%;margin-bottom:1rem;color:#fff;font-weight:bold;background-color:#ff8a67}.content-body .table td,.content-body .table th{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.content-body .table a.btn-show-views{border:1px solid gray;padding:4px;border-radius:3px;background:#ffd8bd;color:black;cursor:pointer;font-size:13px}.content-body .table a.btn-show-views:hover{color:white;background:maroon}.content-body button.open-views-form.rigth.closed.btn-tiny{background:#f59883;width:24px;height:24px;border-radius:12px;color:maroon;font-size:14px;font-weight:bold}.content-body .register-db{background-color:#F9F5F3;border-top:1px solid #fff}.content-body .register-db .register{width:70%;margin:auto}.content-body .register-db .register .form-group{width:80%;margin-bottom:11px}.content-body .register-db .register .form-group label{width:100%;margin-bottom:5px;float:left}.content-body .register-db .register .form-group select{width:80%;padding:10px;border-radius:5px}.content-body .register-db .register .form-group input{width:80%;padding:10px;border-radius:5px;border:1px solid #a9a9a9}.content-body .register-db .register .form-group .open-views-form-cont{width:100%;display:block;float:left}.content-body .register-db .register .form-group .header-views-form{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-flow:row-reverse}.content-body .register-db .register .form-group .views-form{margin-top:53px}.content-body .register-db .register .form-group .form-vw{position:relative;margin-bottom:11px}.content-body .register-db .register .form-group .form-vw .add-item-view{position:absolute;z-index:10;top:19%;right:61px;height:2.75rem;width:3.75rem}.content-body .register-db .register .form-group .form-vw .form-group-view{margin:auto}.content-body .register-db .register .form-group .inserted-items ul{width:100%;list-style:none;display:-webkit-box;display:flex;border-bottom:1px solid #e8dddddb}.content-body .register-db .register .form-group .inserted-items ul li{width:40%}.content-body .register-db .register .form-group .inserted-items .view-result-thead{width:100%;list-style:none;display:-webkit-box;display:flex;border:1px solid #eaeaea;background:#efeeee}.content-body .register-db .register .form-group .inserted-items .view-result-thead li{width:40%}.content-body .register-db .register .title{text-align:left;margin-bottom:10px;border-bottom:1px solid #f2e4be}.container-fluid-modal{position:fixed;z-index:23;width:834px;border:1px solid #ececec;height:auto;border-radius:5px;font-size:13px}.container-fluid-modal .container{background:white;margin:0;width:100%;display:block;padding:4px}.container-fluid-modal .container .header-modal{width:100%;margin-bottom:10px;position:relative}.container-fluid-modal .container .header-modal h1{text-align:center;margin-top:10px;font-weight:bold}.container-fluid-modal .container .header-modal span.close-modal{position:absolute;right:18px;top:0;width:30px;height:30px;font-size:20px;text-align:center;border-radius:3px;color:black;background:#ffae7f;cursor:pointer}.container-fluid-modal .container .header-modal span.close-modal:hover{color:white;background:maroon}.container-fluid-modal .container .content-modal{margin-bottom:27px}.md-show{visibility:visible !important}.md-modal{visibility:hidden;top:138px}.md-show ~ .md-overlay{opacity:1;visibility:visible}.md-overlay{position:fixed;width:100%;height:100%;visibility:visible;top:0;left:0;z-index:18;opacity:1;background:rgba(84,84,84,0.8);-webkit-transition:all 0.3s;transition:all 0.3s}.login-container{position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-image:-webkit-gradient(linear, left top, right bottom, from(#FBDB89), to(#6f3800));background-image:linear-gradient(to right bottom, #FBDB89, #6f3800);background-size:cover;color:#fffefe}.login-container .login{width:24%;margin:auto;-webkit-box-align:center;align-items:center}.login-container .login .login-form h1{text-align:left;margin-bottom:10px;border-bottom:1px solid #f2e4be}.login-container .login .login-form .form-group{margin-bottom:16px}.login-container .login .login-form .form-group label{width:100%;margin-bottom:5px;float:left}.login-container .login .login-form .form-group input{width:80%;padding:10px;border-radius:5px;border:1px solid #a9a9a9}.likes{position:relative;align-self:stretch;padding:0 !important}.likes__field{cursor:pointer;padding:0 4rem;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;height:100%;-webkit-transition:all .3s;transition:all .3s}.likes__field:hover{background-color:#F2EFEE}.likes__panel:hover,.likes__field:hover+.likes__panel{visibility:visible;opacity:1}.likes__icon{fill:#F59A83;height:3.75rem;width:3.75rem}.likes__panel{position:absolute;right:0;top:10rem;z-index:10;padding:2rem 0;width:34rem;background-color:#fff;box-shadow:0 0.8rem 5rem 2rem rgba(101,90,86,0.1);visibility:hidden;opacity:0;-webkit-transition:all .5s .2s;transition:all .5s .2s}