body{margin:0;background-color:#e9e9e9;font-family:Inter,sans-serif}p{margin-block-start:0;margin-block-end:0}.login-page-body-outer{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#d1d8ff}.login-page-body{display:flex;align-items:center;flex-direction:column;gap:20px;background-color:#fff;padding:32px 40px;width:303px;border-radius:4px;z-index:2}.login-page-form{display:flex;align-items:center;flex-direction:column;gap:16px;width:100%}.title-form p{font-size:12px;font-weight:400}.grey-text{font-weight:400;font-size:9px;color:#999;position:absolute;background-color:#fff;padding:6px}.input-body-login{padding:8px;width:calc(100% - 16px);border-radius:6px;border:1px solid #C4C4C4}.fa-input{width:20px;height:20px;text-align:center;border:1px solid black;border-radius:4px}.fa-input-body{display:flex;gap:8px}.exercise-body{background-color:#fff;margin:16px 32px;height:24px;display:flex;font-size:20px;font-weight:700;align-items:center;padding:16px 20px;font-family:Inter,sans-serif}.level-list-body{margin:0 32px}.level-list-title{font-family:Inter,sans-serif;font-size:24px;font-weight:700}.level-list-flex{margin-top:20px;display:flex;flex-wrap:wrap;gap:20px}.level-list-table{padding:20px;border-radius:4px;height:115px;width:25vw;background-color:#fff;display:flex;flex-direction:column;gap:16px}.level-list-table:hover{cursor:pointer}.exercise-number{width:33px;height:33px;border-radius:100%;background-color:#212121;color:#fff;display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:700}.number-icon-image{width:40px;height:40px}.level-list-desc{font-weight:900;font-size:20px}.total-exercises-body{display:flex;justify-content:space-between;font-weight:600;font-size:16px}.navbar-body{height:80px;background-color:#fff;border-bottom:1px solid #616161;display:flex;padding:0 32px;align-items:center;justify-content:space-between;z-index:5;position:relative}.logo-text{width:90px;height:56px}.logo-text:hover{cursor:pointer}.english-flag-img{width:30px;height:22px}.lang-option-body{display:flex;align-items:center;gap:12px}.title-exercise-body{display:flex;margin:32px 16px;background-color:#fff;justify-content:space-between;align-items:center;padding:8px 20px;height:40px;font-weight:700;font-size:20px}.input-search-body{width:calc(25vw - 24px);margin:0 16px;padding:10px 12px;height:28px;display:flex;justify-content:space-between;align-items:center;background-color:#fff}.input-search-body input{width:90%;color:#616161;border:none}.list-item-flex{display:flex}.list-item-title-body{width:calc(25vw + 16px);display:flex;flex-direction:column;gap:16px;margin:16px 16px 0;padding-right:16px;overflow-y:auto;height:calc(100vh - 275px)}.list-item-title{background-color:#fff;border-radius:4px;padding:16px 20px}.list-item-title:hover{cursor:pointer}.list-item-selected{border:3px solid black;padding:13px 17px}.item-title{font-size:20px;font-weight:700}.item-title-main{font-size:32px;font-weight:700}.item-main-body{border-radius:4px;background-color:#fff;margin-top:16px;margin-right:32px;padding:20px;height:calc(100vh - 315px);overflow-y:auto;width:calc(100% - 25vw);display:flex;flex-direction:column;gap:24px}.question-list-body{display:flex;flex-direction:column;gap:4px}.question-list-body ol{margin-block-start:0;margin-block-end:0;padding-inline-start:20px}.question-list-body p{font-size:16px;font-weight:700}.item-togle-body-flex{display:flex;gap:16px}.toggle-flex{display:flex;gap:8px;align-items:center;font-weight:500;font-size:16px}.item-main-body{border-radius:4px;background-color:#fff;margin-top:16px;margin-right:32px;padding:20px;height:calc(100vh - 315px);width:calc(100% - 25vw);display:flex;flex-direction:column;gap:24px}.item-title-body{display:flex;flex-direction:column;gap:8px}.item-main-button-body{display:flex;justify-content:space-between}.item-main-button-body button:hover{cursor:pointer}.item-toggle-body{display:flex;gap:8px;justify-content:center;align-items:center}.item-main-button-body p{font-weight:500;font-size:16px}.item-main-button-flex{display:flex;gap:8px}.horiz-border{border-bottom:1px solid #B2B2B2}.question-type-body{padding:10px 16px;width:fit-content;height:15px;background-color:#e7ebff;border-radius:50px;display:flex;justify-content:center;align-items:center}.answer-title{font-weight:700;font-size:16px}.answer-body{display:flex;flex-direction:column;gap:16px}.margin-top-12{margin-top:12px}.margin-top-8{margin-top:8px}.input-text-answer{padding:16px;width:calc(100% - 32px);height:134px;border-radius:4px;border:1px solid #9E9E9E}.option-answer{display:flex;align-items:center;background-color:#e9e9e9;padding:16px 20px;margin-bottom:8px;border-radius:4px;font-family:Arial,sans-serif;cursor:pointer;transition:background .2s ease}.option-answer input[type=radio]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:26px;height:26px;border:2px solid #616161;border-radius:50%;margin-right:16px;position:relative;background-color:transparent;cursor:pointer}.option-selected input[type=radio]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:26px;height:26px;border:2px solid black;border-radius:50%;margin-right:16px;position:relative;background-color:#000;cursor:pointer}.option-selected input[type=radio]:before{content:"";position:absolute;top:50%;left:50%;width:5px;height:12px;border:solid white;border-width:0 3.5px 3.5px 0;transform:translate(-50%,-60%) rotate(45deg)}.option-answer input[type=radio]:hover{cursor:auto}.option-answer input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:25px;height:25px;border:2px solid black;margin-right:16px;border-radius:8px;background-color:#fff;display:inline-block}.option-selected input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:25px;height:25px;border:2px solid black;position:relative;margin-right:16px;border-radius:8px;background-color:#000;display:inline-block}.option-selected input[type=checkbox]:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:14px;border:solid white;border-width:0 3px 3px 0;transform:translate(-50%,-60%) rotate(45deg)}.option-answer input[type=checkbox]:hover,.option-answer:hover{cursor:auto}.toggle-switch{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:50px;height:28px;background-color:#fff;border:2px solid gray;border-radius:999px;position:relative;cursor:pointer;outline:none;transition:background-color .3s ease}.toggle-switch:before{content:"";position:absolute;width:22px;height:22px;top:2px;left:2px;background-color:gray;border-radius:50%;transition:transform .3s ease,background-color .3s ease}.toggle-switch:checked{background-color:#444}.toggle-switch:checked:before{transform:translate(22px);background-color:#fff}.is-special-exercise{color:#3f51b5;font-size:20px;font-weight:700;padding-bottom:12px}.explanation-body{display:flex;flex-direction:column;gap:16px}.explanation-text{color:#616161;font-weight:400;font-size:16px}.popup-black{position:absolute;padding-top:80px;width:100vw;height:calc(100vh - 80px);background-color:#0006;z-index:2;display:flex;justify-content:center;align-items:center}.popup-body{width:742px;padding:16px;background-color:#fff;display:flex;flex-direction:column;gap:20px;border-radius:4px}.input-body{display:flex;flex-direction:column;gap:8px}.input-body input{border:1px solid #C4C4C4;border-radius:4px;padding:8px}.form-data-body{display:flex;flex-direction:column;gap:12px}.popup-title-body{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:700}.close-img:hover{cursor:pointer}.close-img{width:14px;height:14px}.button-body-grammar{display:flex;justify-content:space-between}.button-body-grammar button{cursor:pointer}.title-head-body{display:flex;margin:32px 16px;background-color:#fff;justify-content:space-between;align-items:center;padding:8px 20px;height:40px;font-weight:700;font-size:20px}.button-add-exercise{display:flex;gap:10px;padding:8px 20px;align-items:center;background-color:#fff;border:1px solid black;font-weight:700;font-size:20px}.button-add-exercise:hover{cursor:pointer}.button-body{display:flex;gap:12px;align-items:center;margin-top:20px}.button-white{align-items:center;border:black 1px solid;background-color:#fff;color:#000;padding:12px 20px;height:48px;border-radius:10px;font-size:20px;font-weight:700;font-family:Inter,sans-serif}.title-head-button-body{display:flex;gap:12px}.question-form-body{margin:16px 32px 32px 16px;background-color:#fff;display:flex;padding:20;width:70vw;padding:20px;gap:23px;flex-direction:column;border-radius:4px}.pick-question-type-body{display:flex;flex-direction:column;gap:12px}.title-form-text{font-size:20px;font-weight:700}.question-input-body{display:flex;flex-direction:column;gap:20px}.answer-other-body{display:flex;flex-direction:column;gap:16px}select{padding:8px 12px;border:1px solid #9E9E9E;border-radius:4px;color:#7a7a7a}.input-text{border:1px solid #C4C4C4;border-radius:4px;padding:16px}.small-input-box{height:63px}.big-input-box{height:169px}textarea{resize:none;font-size:16px}.single-choice-body{display:flex;flex-direction:column;gap:8px}.circle-option{border-radius:100%;width:26px;height:26px;border:2px #616161 solid}.circle-option:hover{cursor:pointer}.circle-body{display:flex;gap:10px;align-items:center}.textarea-input-option{border:1px solid #9E9E9E;border-radius:4px;color:#7a7a7a;width:100%;padding:12.5px 12px;height:19px;font-size:16px}.textxarea-input-option-selected{position:relative;background-color:#000;border:none;width:29.5px;height:29.5px}.textxarea-input-option-selected:before{content:"";position:absolute;top:50%;left:50%;width:50%;height:50%;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}.button-add-option{display:flex;gap:10px;height:40px;padding:8px 20px;align-items:center;background-color:#fff;border:1px solid black;font-weight:700;font-size:20px;width:237px}.button-add-option:hover{cursor:pointer}.square-option{width:25px;height:25px;border:2px solid black;border-radius:5px}.square-input-option-selected{position:relative;width:25px;height:25px;background:#000;border-radius:5px}.square-input-option-selected:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:12px;border:solid white;border-width:0 3.5px 3.5px 0;transform:translate(-50%,-60%) rotate(45deg)}.register-page-body-outer{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#d1d8ff}.login-background{position:absolute;display:flex;justify-content:end;align-items:end;width:100vw}.login-img-left{left:15vw;height:190px;position:absolute}.login-img-right{padding-right:8vw}.horiz-black{position:absolute;border:1px solid black;width:100vw;z-index:0}.img-logo{width:127px;height:75px}.title-form{display:flex;flex-direction:column;align-items:center;gap:4px}.title-form span{font-size:20px;font-weight:600}.register-page-body{display:flex;align-items:center;flex-direction:column;gap:20px;background-color:#fff;padding:32px 40px;width:303px;border-radius:4px;z-index:2}.register-page-form{display:flex;align-items:center;flex-direction:column;gap:16px;width:100%}.button-blue{align-items:center;border:none;background-color:#294199;color:#fff;padding:11px 30px;height:48px;border-radius:38px;font-size:14px;font-weight:600;width:100%;font-family:Inter,sans-serif}.button-white-login{align-items:center;border:1px solid #294199;background-color:#fff;color:#000;padding:11px 30px;height:48px;border-radius:38px;font-size:14px;font-weight:600;width:100%;font-family:Inter,sans-serif}.button-white-login:hover,.button-blue:hover{cursor:pointer}.input-body-register{padding:8px;width:calc(100% - 16px);border-radius:6px;border:1px solid #C4C4C4}.grey-text-body{display:flex;width:100%;justify-content:center;align-items:center}.grey-horizontal{width:100%;border:1px solid #C4C4C4}.account-body{margin:32px 20px;padding:16px;background-color:#fff;border-radius:8px}.input-body-account{border:1px solid #C4C4C4;border-radius:4px;padding:8px}.button-black{align-items:center;border:none;background-color:#000;color:#fff;padding:12px 20px;height:48px;border-radius:10px;font-size:20px;font-weight:700;font-family:Inter,sans-serif}.flex-account{display:flex;flex-direction:column;gap:8px}