@import"https://fonts.googleapis.com/css?family=Open+Sans";html,body{background-color:#1d1d1d;margin:0;font-family:Roboto,sans-serif}.main{display:flex}header{width:calc(100vw - 300px);height:50px;background:#100136;display:flex;justify-content:right;align-items:center;text-transform:uppercase;text-decoration:none;color:#fff;padding-right:10px}.header-user-name{cursor:pointer}header button{background:transparent;border:none;outline:none;font-size:large;display:flex;justify-content:center;gap:15px;cursor:pointer}IoIosLogOut{color:#fff}.sidebar{width:300px;height:100vh;background:#312450}.nav{position:relative;margin:0 15%;text-align:right;top:25%;transform:translateY(-50%);font-weight:700;font-size:.85em}.nav ul{list-style:none}.nav ul li{position:relative;margin:3.2em 0}.nav ul li a{line-height:5em;text-transform:uppercase;text-decoration:none;letter-spacing:.4em;color:#ffffff59;display:block;transition:all ease-out .3s}.nav ul li.active a{color:#fff}.nav ul li:not(.active):after{opacity:.2}.nav ul li:not(.active):hover a{color:#ffffffbf}.nav ul li:after{content:"";position:absolute;width:100%;height:.2em;background:#000;left:0;bottom:0;background-image:linear-gradient(to right,#5e42a6,#b74e91)}.card{background-color:#f1f1f1;border-radius:10px;padding:50px 35px}.card h2{color:#8a2be2;text-align:center}.role-list{display:flex;gap:10px;flex-direction:column;overflow:auto;height:350px}.role-item{text-transform:uppercase;letter-spacing:.4em}.role-item button{background:transparent;border:none;outline:none;font-size:large;display:flex;justify-content:center;gap:15px;cursor:pointer}.inner-item{display:flex;align-items:center;justify-content:space-between;margin-left:10px;margin-right:10px}.form{display:flex;flex-direction:column;align-items:center;gap:15px}.form h1{color:#3e3d3d}.submit-button{width:100%;height:40px;border:none;background:linear-gradient(to right,#3f8dd4,#884ab3);color:#f1f1f1;border-radius:5px;margin-top:20px;margin-bottom:10px}.input-error{font-size:smaller;color:#884ab3;width:100%}.submit-button:hover{cursor:pointer}.input{border:none;outline:none;background-color:#f1f1f1;border-bottom:1px solid #bcbcbc;width:100%;height:40px;font-size:medium;padding:0}.error{border-radius:5px;background-color:#fabebe;border:1px solid rgb(255,113,113);color:red;text-align:center;padding:5px}.main-alert{display:flex;justify-content:space-between;align-items:center}.main-alert button,.delete-button{background:transparent;border:none;outline:none;font-size:large;display:flex;justify-content:center;gap:15px;cursor:pointer}.test{background-color:#b6abe5}.users-form{width:100%;display:flex;align-items:center;justify-content:space-between;gap:50px}.container{display:flex;flex-wrap:wrap;gap:15px;padding:15px;align-items:center;justify-content:center}.auth-card{background-color:#f1f1f1;width:270px;border-radius:10px;padding:50px 35px}.auth-card p{text-align:center}.auth-container{display:flex;justify-content:center;align-items:center;width:100vw;height:100vh}