.nav{display:flex;justify-content:space-between;align-items:center;height:70px;margin-bottom:30px;background-color:#fff;border-bottom:2px solid black;overflow:hidden;position:fixed;width:100%;top:0;left:0;z-index:2000}.nav-title{padding-left:15px;padding-top:5px;cursor:pointer;width:225px}.nav-controls{display:flex;align-items:center;margin-right:17.5px}.nav-avatar{width:45px;height:45px;border-radius:50%;margin-right:20px;cursor:pointer;object-fit:cover}.login-container{display:flex;flex-direction:column;align-items:center;padding:75px}.image-container img{max-width:100%;max-height:100%;object-fit:cover;margin:auto}.image-container{display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:20px!important}.input-container input{margin-top:10px!important;width:100%;padding:15px 10px;font-size:17px;border:1px solid black;border-radius:5px;color:#000;margin:10px 0}.input-container label,.input-container input{width:100%}.button-container{display:block!important;width:100%!important;margin-top:30px!important;text-align:center}.btn{background-color:#fff!important;color:#000!important;font-weight:700!important;width:100%;padding:5px;margin-left:60px;border-radius:10px;border:.5px solid black!important}.btn-reset{background-color:#fff!important;color:#000!important;font-weight:700!important;width:100%;padding:5px;margin-left:60px;border-radius:10px}.btn:not(:last-child){margin-right:2px}.btn:disabled{background-color:gray!important;columns:#c40f0f!important}.login-btn{text-align:center;margin-right:20px!important}.register-btn{text-align:center;margin-right:0!important}.pageIcon{border-radius:50%}@media (max-width: 768px){input[type=text],input[type=password]{font-size:16px;padding:10px;width:100%;box-sizing:border-box}}.user-container{max-width:100%;width:100%;margin:auto;padding:20px;display:flex;flex-direction:column;align-items:center}.edit-form,.info-display{width:90%;display:flex;max-width:"100px";flex-direction:column;gap:15px}.form-group{margin-bottom:15px}.form-group label{margin-bottom:5px;font-weight:700}.form-group input,.form-group select{padding:8px;font-size:16px;border:1px solid #ccc;border-radius:4px}.save-btn,.edit-btn,.logout-btn{padding:10px;font-size:16px;color:#f7f7f7;background-color:#4caf50;border:none;border-radius:4px;cursor:pointer;margin-top:20px}.save-btn:hover,.edit-btn:hover{background-color:#45a049}.logout-btn{background-color:#f44336}.logout-btn:hover{background-color:#e53935}.user-avi{width:150px;height:150px;border-radius:50%;border:2px solid black;object-fit:cover;margin-bottom:20px}@media (min-width: 768px){.user-container{max-width:800px;width:100%;display:flex;flex-direction:column;align-items:center}.edit-form,.info-display{width:100%;max-width:400px;flex-direction:column;gap:10px;align-items:center}.form-group{width:100%}.user-avi{width:150px;height:150px;margin-bottom:20px}}.grid{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start}.bridge-image{display:block;height:200px;width:300px;margin:25px auto;border-radius:5px;object-fit:cover}@media (min-width: 768px){.bridge-image{height:350px;width:650px}}.grid-col{flex:0 0 auto;padding:0 .5rem .5rem;box-sizing:border-box}.grid-col_1{flex-basis:8.33333333%;max-width:8.33333333%}.grid-col_2{flex-basis:16.66666667%;max-width:16.66666667%}.grid-col_3{flex-basis:25%;max-width:25%}.grid-col_4{flex-basis:33.33333333%;max-width:33.33333333%}.grid-col_5{flex-basis:41.66666667%;max-width:41.66666667%}.grid-col_6{flex-basis:50%;max-width:50%}.grid-col_7{flex-basis:58.33333333%;max-width:58.33333333%}.grid-col_8{flex-basis:66.66666667%;max-width:66.66666667%}.grid-col_9{flex-basis:75%;max-width:75%}.grid-col_10{flex-basis:83.33333333%;max-width:83.33333333%}.grid-col_11{flex-basis:91.66666667%;max-width:91.66666667%}.grid-col_12{flex-basis:100%;max-width:100%}*{margin:0;padding:30;box-sizing:border-box}@media screen and (min-width: 768px){.container{width:650px}}.container{margin:auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:30px}.item-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin:0 auto;width:320px;height:450px;border:1.5px solid black;border-radius:8px;box-shadow:0 2px 4px #0000001a;overflow:hidden}.BackButton{height:40px;width:120px;color:#f0f8ff;font-size:large;background-color:gray;border-top-left-radius:50%;border-bottom-left-radius:50%;border-color:#000;border-width:5px;position:fixed;top:60px;left:17%;transform:translate(-50%)}html,body{margin:0;padding:0;width:100%;height:100%}.basicBackground{position:relative;width:100%;height:100vh;padding-top:85px}.button-container{position:absolute;display:flex;flex-direction:column;align-items:center}.button-label{font-size:16px;margin-bottom:10px;text-align:center;display:block}.button-label-audio{display:block;margin-bottom:10px;text-align:left;margin-left:45px}.cameraButton,.fileButton,.recordButton{width:150px;height:150px;border-radius:50%;background-color:#000;background-size:cover;background-position:center;border:none;cursor:pointer;outline:none}.cameraButton{background-image:url(/CameraIcon.jpg);background-size:300px}.fileButton{background-color:gray;background-image:url(/FileIcon.jpg);background-size:280px}.recordButton{background-color:red;border:10px solid black}.cameraInput,.fileInput,.videoInput{display:none}.file-button-container{top:200px;left:50%;transform:translate(-50%)}.camera-button-container{bottom:20px;left:50%;transform:translate(-50%)}.record-button-container{bottom:50px;right:15%}.audio-recorder-container{bottom:50px;left:50%;transform:translate(-50%)}.back-button{position:absolute;top:20px;left:20px;color:#000}div.audio-recorder{background-color:#000;width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:20px}div.audio-recorder.recording{width:150px}span.audio-recorder-status{background-color:#f0f0f0;position:absolute;bottom:200px;left:40%;transform:translate(-50%)}span.audio-recorder-timer{background-color:#f0f0f0;position:absolute;bottom:200px;left:10px;transform:translate(-50%)}img.audio-recorder-options{background-color:#f0f0f0;position:absolute;bottom:110px;right:-40px;transform:translate(-50%)}.audio-recorder .audio-recorder-mic{border-radius:50%!important}img.audio-recorder-mic{background-color:#fff;border:10px solid #f0f0f0;width:120px;height:120px;border-radius:50%}@media (max-width: 768px){.button-label{font-size:16px}.cameraButton,.fileButton,.recordButton{width:120px;height:120px}.record-button-container{right:10%}}@media (max-width: 480px){.basicBackground{padding-top:60px}.button-label{font-size:16px}.cameraButton,.fileButton,.recordButton{width:100px;height:100px}.file-button-container{top:150px}.camera-button-container{bottom:10px}.record-button-container{bottom:30px;right:5%}}html,body{margin:0;padding:0;overflow-x:hidden}.button-container{position:fixed;bottom:1.5vh;right:-45%;z-index:1000}.button{width:100px;height:100px;border-radius:50%;background-color:#f7f7f7;border-width:5px;border-color:#000;color:#f7f7f7;text-align:center;line-height:100px;font-size:60px;cursor:pointer;box-shadow:0 4px 8px #0000001a}.button:hover{background-color:red}.button:active{background-color:#00f}.additional-buttons{position:absolute;display:flex;justify-content:center;flex-direction:row;transform:rotate(-90deg);transform-origin:bottom right}.additional-button{margin:0;width:80px;height:80px;border-radius:50%;background-color:"#f7f7f7"smoke;border-width:5px;border-color:#000;color:"#f7f7f7";text-align:center;line-height:60px;font-size:30px;cursor:pointer;position:absolute;bottom:100px;transition:transform .3s ease-in-out}#cambutton{right:55%;top:8%}#audiobutton{right:63%;top:8%}#notesbutton{right:71%;top:8%}@media (max-width: 600px){.button-container{right:-36vw}.button{width:80px;height:80px;line-height:80px;font-size:50px}.additional-button{width:75px;height:75px;line-height:60px;font-size:30px}#cambutton{right:62%;top:8%}#audiobutton{right:82%;top:8%}#notesbutton{right:102%;top:8%}}.images{border-radius:50%}*{margin:0;padding:0;box-sizing:border-box}.help-page-container{padding:30px;display:flex;flex-direction:column;align-items:center}@media (min-width: 600px){.help-page-container{padding:75px}}.video-placeholder{background-color:#ddd;width:100%;max-width:300px;height:150px;display:flex;justify-content:center;align-items:center;margin-bottom:30px}.detailsDiv{position:relative;top:100px}.back-button{position:absolute;top:20px;left:20px;color:#000;margin-bottom:20px}