.header-wrapper{display:flex;margin-top:0;margin-bottom:0;justify-content:space-between}.header-layout{display:flex}.waffle-logo{width:60px;height:60px}.web-title{margin-left:20px}.logout-button{width:100px;height:50px}.dash-board{background-color:#ececec;width:100%;height:20%;display:flex;justify-content:center;align-items:center;font-size:24px}.searcher{width:175px;height:25px}.add-button{text-align:center;width:90px;height:30px;line-height:25px;border:1px solid #000;background-color:#fff;font-size:16px;cursor:pointer}.modal-wrapper.show{display:block;background-color:rgba(0,0,0,.6);opacity:1;transition:opacity .5s}.modal-wrapper.hide,.modal-wrapper.show{width:100%;position:fixed;top:0;left:0;bottom:0;right:0;align-items:center;z-index:999}.modal-wrapper.hide{opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}.modal-dialog-centered{max-width:40vw;margin:1.75rem auto;display:flex;align-items:center;min-height:calc(100% - 3.5rem)}.modal-content{width:100%;position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #000}.modal-body{margin-top:50px;margin-left:50px;margin-right:50px}.modal-name{display:flex;margin-top:20px;margin-bottom:20px;justify-content:space-between}.name-input{width:700px}.modal-grade{display:flex;margin-top:20px;margin-bottom:20px;justify-content:space-between}.grade-input{width:700px}.profile-input{width:700px;background-color:#f4f4f4;border:1px solid #c2c2c2;height:25px}.modal-footer{margin:30px 50px 50px;display:flex;float:right}.modal-closer{margin-right:10px;background-color:#c2c2c2}.modal-adder,.modal-closer{margin-left:10px;width:70px;height:35px;border:0;font-size:16px}.modal-adder{background-color:#c5f8c3}.list-name{width:99%;height:50%;list-style:none}.title-list{width:100%;border:1px solid grey;margin-left:-40px;height:50px;line-height:50px;background-color:#c4c4c4;font-weight:700;display:flex}.title-content{width:150px;text-align:center}.empty-list{height:100%;justify-content:center;font-size:24px}.empty-list,.student-info{width:100%;display:flex;align-items:center}.student-info{border:1px solid grey;margin-left:-40px;height:50px;line-height:50px;background-color:#f8f8f8}.student-info:hover{background-color:#dedede}.student-info-layout{width:100%;display:flex;align-items:center;justify-content:space-between}.name-and-grade{display:flex}.student-info.show{width:100%;border:1px solid grey;height:50px;line-height:50px;background-color:#acacac;display:flex;align-items:center}.student-info.show:hover{background-color:#bbb}.student-info:hover .button-select.unfixed{margin-right:20px;width:40px;height:30px;background-color:#c4c4c4;border:1px solid #000;display:block;transform:rotate(180deg)}.list-content{width:150px;text-align:center}.button-select.unfixed{display:none}.button-select.fixed{margin-right:20px;width:40px;height:30px;background-color:#c4c4c4;border:1px solid #000;display:block}.arrow-svg{fill:currentColor;width:1em;height:1em;display:inline-block;font-size:1.5rem}.detail-view{text-align:center;font-size:28px;width:100%;height:90%;display:inline-block;overflow-y:auto;border:2px solid #f0f0f0}.detail-view-txt.hide{display:none}.detail-view-header.show{display:flex;margin-top:10px;margin-bottom:50px;justify-content:space-between}.detail-view-header.hide{display:none}.detail-view-img.show{display:block;align-items:center;margin-left:40%;width:180px;height:180px;border-radius:50%;overflow:hidden;border:1px solid #c2c2c2}.detail-view-img.hide{display:none}.detail-view-footer.show{margin-left:30px;margin-right:30px;margin-top:50px}.detail-view-footer.hide{display:none}.detail-view-grade{display:flex;margin-top:20px;margin-bottom:20px;justify-content:space-between}.grade-input{width:80%;background-color:#f4f4f4;border:1px solid #c2c2c2;height:25px}.detail-view-name{display:flex;margin-top:20px;margin-bottom:20px;justify-content:space-between}.name-input{width:80%;background-color:#f4f4f4;border:1px solid #c2c2c2;height:25px}.txt{font-weight:700;font-size:16px}.detail-view-extender{width:37.5px;height:37.5px;margin-left:93%;background-color:#fff}.img-extend{width:100%;height:100%;object-fit:contain}.app{width:95vw;background-color:#fff;margin:0 50px;height:90vh;position:fixed}.header{margin-top:30px;margin-bottom:30px}.bottom-layout{margin-top:50px;width:100%;display:flex}.bottom-left-layout{width:47%;margin-right:40px;height:700px;overflow-y:auto;overflow-x:hidden}.bottom-lefttop-layout{display:flex;justify-content:space-between;width:99%;margin-bottom:10px}.vertical-line{width:.1px;border:.1px solid #f0f0f0;height:700px}.bottom-right-layout{margin-left:40px;width:48%;height:700px}.pop-modal-wrapper.show{display:block}.pop-modal-wrapper.hide{display:none}.pop-context{text-align:center;margin-top:100px}.pop-modal-footer{display:flex;justify-content:space-between;margin-top:100px}.pop-button{width:125px;height:30px;font-size:12px}.button-layout{display:flex;float:right}.button-lock{background-color:#c4c4c4}.button-delete,.button-lock{display:flex;width:100px;height:50px;border-radius:10px;margin-left:20px;margin-right:20px;align-items:center}.button-delete{background-color:#f9d8d8}.button-save{display:flex;width:100px;height:50px;border-radius:10px;margin-left:20px;margin-right:20px;background-color:#d7ffdc;align-items:center}.button-img{width:60%;height:60%;object-fit:contain}.comment-input-wrapper{display:flex}.comment-input{width:87%;height:40px;margin-right:1%;border-radius:5px;background-color:#f3f3f3}.comment-button{margin-left:1%;width:13%;height:40px;border:0;border-radius:10px;background-color:#afafaf;font-weight:700}.comment-list-wrapper{width:100%;height:90%;margin-top:10px;list-style:none}.comment-list-item{margin-right:10px;width:90%;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;border-radius:10px;margin-top:20px;margin-bottom:20px}.comment-list-item:hover{background-color:#eee}.comment-list-item-layout{width:100%;display:flex;justify-content:space-between}.comment-list-item-text{display:block;margin-left:5px;width:60%;color:#000;font-size:14px;word-break:break-all;white-space:pre-line}.comment-list-item-time{color:#888;font-size:12px;margin-right:5px}.comment-view{width:100%;height:80%}.comment-title{width:104px;height:40px;background-color:#c4c4c4;line-height:40px;text-align:center}.comment-box-wrapper{width:100%;height:100%;border:1px solid #000;overflow-y:auto;overflow-x:hidden}.confirm-wrapper.show{display:block;background-color:rgba(0,0,0,.6);opacity:1;transition:opacity .5s}.confirm-wrapper.hide,.confirm-wrapper.show{width:100%;position:fixed;top:0;left:0;bottom:0;right:0;align-items:center;z-index:999}.confirm-wrapper.hide{opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}.confirm-centered{max-width:45vw;margin:1.75rem auto;display:flex;align-items:center;min-height:calc(100% - 3.5rem)}.confirm-content{width:100%;position:relative;background-color:#fff;background-clip:padding-box;border:1px solid #000}.confirm-header{margin:40px;display:flex;align-items:center}.warning-img{width:55px;height:55px}.warning-txt{font-size:18px;font-weight:700;margin-left:30px}.confirm-body{display:flex;justify-content:center;margin:50px 50px 20px}.confirm-footer{margin:50px;display:flex;float:right}.confirm-closer{margin-right:10px;background-color:#d6eaff}.confirm-closer,.confirm-deleter{display:flex;align-items:center;margin-left:20px;width:100px;height:50px;border:0;border-radius:10px;font-size:16px}.confirm-deleter{background-color:#f9d8d8}.arrow-svg{transform:rotate(180deg)}.header-lyaout{align-items:center}.guide-txt{margin-left:5px}.go-back-btn{background-color:#fff;border:0}.info-title{width:104px;height:40px;background-color:#c4c4c4;line-height:40px;text-align:center}.information-view{margin-top:80px;width:45vw;height:100%}.info-box-wrapper{border:1px solid #000;width:100%;height:90%}.info-box{margin-top:40px;display:block;left:calc(50% - 150px);right:calc(50% - 150px)}.info-box-email,.info-box-major,.info-box-phone,.info-box-profileImg{display:flex;align-items:center;margin-top:20px;margin-bottom:20px}.phone-input{margin-left:10%;margin-right:calc(50% - 150px);width:300px;height:30px}.email-input-wrapper{position:relative;display:inline-block;margin-left:10%}.email-input-wrapper:after{content:"@waffle.hs.kr";font-family:sans-serif;color:grey;width:1em;height:1em;position:absolute;top:50%;right:85px;transform:translateY(-50%)}.email-input{width:300px;height:30px}.major-input{width:309px;height:38px;margin-left:10%;border:1px solid grey;cursor:pointer}.profileImg-input{width:300px;height:30px;margin-left:10%}.info-box-txt-layout{width:180px}.info-box-txt{float:right}.locked-modal-wrapper{width:45vw;position:fixed;height:40.5%;background-color:rgba(0,0,0,.2);align-items:center;z-index:500}.locked-modal-layout{display:flex;justify-content:center;max-width:40vw;margin:1.75rem auto;align-items:flex-end;min-height:calc(100% - 3.5rem)}.lock-img{margin-bottom:30px;width:100px;height:130px}.locked-modal-footer{display:inline-block;text-align:center}.locked-modal-guidetxt{margin-bottom:30px}.profile-view{display:flex;width:100%;height:100%;align-items:center;margin-left:calc(50% - 300px);margin-right:calc(50% - 300px)}.profile-img{display:block;align-items:center;width:250px;height:250px;border-radius:50%;overflow:hidden;border:1px solid #c2c2c2}.profile-view-name-and-grade{margin-left:70px;display:inline-block}.profile{width:100%;height:100%;object-fit:contain}.grade,.name{display:flex;margin-top:20px;margin-bottom:20px}.student-grade,.student-name{margin-left:50px;color:grey}.detail{background-color:#fff;margin:0 50px;width:95vw;height:90vh;display:flex;position:fixed;justify-content:space-between}.detail-left,.detail-right{width:48%;height:100%}.detail-header{margin-top:30px;height:3%;width:100%}.detail-profile-view{width:100%;height:30%;margin-top:10%}.detail-buttons{margin-top:5%;width:100%;height:10%}.detail-comment-view{margin-top:5%;width:100%;height:90%}.detail-information-view{width:100%;height:50%}.detail-comment-input{margin-top:-8%;width:100%;height:10%}.footer-layout{width:25vw;height:50px;display:flex;justify-content:space-around;align-items:center}.login-header-layout{display:inline-block;text-align:center}.login-header-txt{font-size:24px;font-weight:700;margin-top:40px}.login-header-img{width:50px;height:50px}.loginbox-layout{display:inline-block;border:1px solid #000;border-radius:10px;background-color:#f7f8fa;width:25vw;height:300px}.loginbox-wrapper{width:100%;height:100%;margin:20px}.password-txt{display:flex;width:90%;justify-content:space-between}.password-input,.username-input{width:90%;height:30px}.login-btn,.password-input,.username-input{border-radius:5px;margin-top:20px;margin-bottom:20px}.login-btn{color:#fff;background-color:#5ea153;width:91%;height:40px}.loginbox-footer{display:flex;align-items:center;justify-content:space-around;margin-top:20px;width:25vw;height:70px;border-radius:10px;border:1px solid grey}.login{width:100%;height:90vh}.login-wrapper{margin-top:50px;margin-left:calc(50% - 400px);margin-right:calc(50% - 400px)}.login-header{display:flex;width:100%;justify-content:center}.login-footer,.login-loginbox{margin-top:50px;display:flex;width:100%;justify-content:center}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}