*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}a{color:inherit;text-decoration:none}.homepage{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topBar{margin:16px 0;display:flex;align-items:center;gap:16px;padding-left:20%;padding-right:20%}.search{flex:1;background-color:#fff;border-radius:16px;padding:16px;display:flex;align-items:center;gap:16px}.search input{flex:1;border:none;outline:none;background-color:transparent;font-size:18px}.filterBar{display:flex;align-items:center;gap:16px;color:#fff;justify-content:center;padding-bottom:20px}.sortList,.resetFilte{display:flex;align-items:center;gap:8px}.sortList img,.resetFilter img{width:36px;height:36px;cursor:pointer}.sortList img:hover,.resetFilter img:hover{width:38px;height:38px;background-color:#1f1f30;border-radius:16px}select,::picker(select){appearance:base-select}select{padding:4px;font-size:18px}.resetFilter img{width:36px;height:36px;cursor:pointer}.titleBar{color:#fff;font-size:26px;font-weight:700;display:flex;align-items:center;gap:32px;padding-left:25px;padding-right:25px;border-bottom:3px solid white}.titleBar .columnTitle{min-width:30%;text-align:center}.titleBar .columnDirector{min-width:15%;text-align:center}.titleBar .columnYear{min-width:10%;text-align:center;display:flex;justify-content:center;gap:10px}.columnYearSort,.columnRuntimeSort,.columnScoreSort,.columnNoteSort{cursor:pointer;font-size:24px;color:gray}.columnYearSort:hover,.columnRuntimeSort:hover,.columnScoreSort:hover,.columnNoteSort:hover{color:#fff}.titleBar .columnRuntime{min-width:10%;text-align:center;display:flex;justify-content:center;gap:10px}.titleBar .columnScore{width:15%;text-align:center;display:flex;justify-content:center;align-items:center;gap:10px}.columnScore img{width:50px;height:25px}.titleBar .columnNote{width:15%;text-align:center;display:flex;justify-content:center;gap:10px}.movieBar{display:flex;align-items:center;gap:32px;padding-bottom:8px;padding-top:8px}.movieBar .movieTitle{width:30%;text-align:left;text-indent:10px}.movieBar .movieDirector{width:15%;text-align:left}.movieBar .movieYear,.movieBar .movieRuntime,.movieBar .movieScore{width:10%;text-align:center}.movieBar .movieNote{min-width:15%;padding-left:70px}.movieBar:hover,.movieBar.active{background-color:#252531;border-radius:16px}.movieBar .rateMovie{display:flex;align-items:center;gap:6px;cursor:pointer}.movieBar .movieNote img{height:21px;padding-left:5px}.movieDetails{position:relative}.movieDetails{background-color:#0b0a20;display:flex;border-radius:16px;padding-left:25px;padding-right:25px}.movieInfo{min-width:30%;max-width:50%}h4{text-align:center}.movieGenresList{display:flex;justify-content:center;gap:10px;padding-bottom:10px;padding-top:10px}.movieGenre{display:inline;border:1px solid white;border-radius:10px;padding:2px;font-size:14px}.movieCast{text-align:center;font-size:16px;padding-top:10px;padding-bottom:10px}.movieActor{padding-right:10px}.moviePlot{text-align:justify;font-size:16px;padding-top:10px;padding-bottom:10px}.moviePoster{display:flex;padding-left:5%;gap:20px;padding-top:10px;padding-bottom:10px}.moviePoster img{border-radius:36px;width:400px;height:600px}.movieRating span{margin:0}.movieRating input{display:none}.submitRating button{background-color:#121218;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:16px;cursor:pointer}.submitRating button:hover{background-color:#252531}.moviePoster p{color:green}.movieSupport{position:absolute;top:0;right:0;font-size:12px;padding:.2em .6em}.movieSupport img{width:60px;height:60px}.movieTrailer{display:flex;flex-direction:column;align-items:center}.movieTrailer .playIcon{display:flex;align-items:center}.movieTrailer img{width:40px;height:40px;cursor:pointer}.movieList{color:#fff;font-size:21px;padding-left:25px;padding-right:25px;flex:1 1 auto;overflow-y:auto;min-height:0;display:flex;flex-direction:column;scrollbar-width:none;-ms-overflow-style:none}.movieList::-webkit-scrollbar{display:none}.authPage{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background-color:#121218;color:#fff}.authContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:32px;border-radius:32px;box-shadow:0 0 10px #fff6}.authContainer img{width:80px;height:80px}.authContainer h1{font-weight:400}.authContainer form{width:100%;display:flex;flex-direction:column;gap:16px}.authForm{display:flex;flex-direction:column;gap:16px}.authForm label{font-size:14px}.authForm input{padding:8px;border:2px solid white;border-radius:16px}.authContainer button{background-color:#303046;padding:8px;border:none;border-radius:16px;color:#fff;cursor:pointer;font-weight:700}.authContainer p{font-size:14px;text-align:center;cursor:pointer}.error{color:red}.adminPage{color:#fff;display:flex;flex-direction:column;overflow:auto;padding-left:30%;gap:16px}.addMovie,.importMovie,.exportMovie,.createUser,.deleteDB{border-bottom:3px solid white}.addMovieHeader,.createUserHeader,.importMovieHeader,.exportMovieHeader,.deleteDBHeader{display:flex;align-items:center;gap:16px}.arrow{cursor:pointer;width:16px;height:16px}h3{color:#d85057}.addFormFields{display:flex;flex-direction:column;max-width:fit-content}.movieId,.support,.starRating,.submitForm,.exportForm,.createUser,.addMovie,.importMovie,.exportMovie,.deleteDB{padding-bottom:10px}.movieId input{font-size:15px;border:2px solid #e9e9e9;padding:6px;border-radius:6px}.createUser{display:flex;flex-direction:column;gap:8px}.createUser form{display:flex;flex-direction:column;gap:8px;max-width:fit-content}.userForm{display:flex;flex-direction:column;gap:8px}.userForm label{font-size:14px;padding-top:8px}.userForm input{padding:8px;border:2px solid white;border-radius:16px}.userForm label{font-size:16px}.userForm input{padding:6px;border:2px solid white;border-radius:8px}.validation{color:green}.support label{padding-left:10px;padding-right:8px}.starRating{max-width:fit-content}.rating{display:flex;font-size:32px}.rating input{display:none}.star{cursor:pointer;font-size:2rem;margin:5px}.importForm input{display:flex;flex-direction:column;padding-bottom:10px}.submitForm input{padding:0}.return{color:gray;max-width:fit-content}.submitForm input,.createUser button,.exportForm button,.deleteDB button{background-color:#303046;color:#fff;font-weight:500;border:none;outline:none;padding:6px;border-radius:16px;cursor:pointer;font-size:15px;margin-top:10px}.submitForm input:hover,.createUser button:hover,.exportForm button:hover,.deleteDB button:hover{background-color:#252531}.importProgress{color:#7272e9}.importCompleted{color:green}.profilePage{display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.profilePage::-webkit-scrollbar{display:none}.profileAvatar{display:flex;flex-direction:column;align-items:center}.profileImg{width:100px;height:100px;border-radius:50%;object-fit:cover}.editImg{width:30px;height:30px;cursor:pointer}.editImg:hover{width:40px;height:40px;background-color:#252531;border-radius:16px}.profileName{font-size:36px;font-weight:500;display:flex;flex-direction:column;align-items:center}.email{font-size:16px;font-weight:300;color:#18ced4}.editProfile,.changePassword{cursor:pointer;font-size:18px}.editProfile:hover,.changePassword:hover{text-decoration:underline}.editForm,.editPassword{display:flex;flex-direction:column;align-items:center;gap:12px}.currentPassword,.newPassword,.editUserName,.editEmail{align-self:flex-end}.currentPassword,.newPassword{display:flex;gap:10px;align-items:center}.editPassword img{width:20px;height:20px}.editPassword img:hover{cursor:pointer}.editForm input{background-color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;width:200px}.passwordInput{flex:1;background-color:#fff;border-radius:8px;padding:6px;display:flex;align-items:center;gap:8px}.passwordInput input{flex:1;border:none;outline:none;background-color:transparent;font-size:14px}.editUserName,.editEmail{display:flex;align-items:center;gap:10px}.editForm button,.editPassword button{background-color:#252531;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer}.editForm button:hover,.editPassword button:hover{background-color:#2b2b53}.updateMessage{display:flex;flex-direction:column;align-items:center;gap:16px;font-size:21px;color:green}.relog,.error{color:red}.relog:hover{text-decoration:underline}.return{margin-top:20%;color:gray}.return:hover{background-color:#252531;color:#fff;border-radius:8px;padding-left:8px;padding-right:8px}.app{width:100%;height:100dvh;display:flex;gap:16px;background-color:#121218;overflow:hidden}.content{flex:1;margin-right:16px;margin-left:16px;display:flex;flex-direction:column;height:100vh;overflow:hidden}.banner{display:flex;align-items:center;justify-content:center;flex-shrink:0}.userButton{display:flex;align-items:center;gap:16px;position:relative}.userButton img{width:50px;height:50px;border:100%;border-radius:50%;object-fit:cover}.userButton .arrow{cursor:pointer;width:16px;height:16px}.userOptions{position:absolute;right:0;top:120%;padding:16px;border-radius:8px;background-color:#fff;z-index:999;display:flex;flex-direction:column;font-size:14px;box-shadow:0 0 4px 1px #fff}.userOption{cursor:pointer;padding:8px;border-radius:8px}.userOption:hover{background-color:#f1f1f1;color:gray}.loginLink{font-size:18px;padding:16x;border-radius:32px;color:#fff}.loginLink:hover{background-color:#f1f1f1;color:#000}.rightBar{padding-top:20px;padding-bottom:20px}