.page{padding:15px;height:100%!important}.buttons,.page{display:flex;flex-direction:row}.buttons{padding-left:25px}.left{width:100%;height:95%}.button{padding:7px 14px 7px 14px;height:-moz-fit-content;height:fit-content;border-radius:10px 10px 0 0;color:#203e5f;font-weight:600;font-size:16px;cursor:pointer}.active{color:#fff;background-color:#7ac38f}.content{height:100%}.content,.pieChart{background:#fff;border-radius:5px 5px 5px 5px;box-shadow:0 3px 6px rgba(0,0,0,.1607843137254902)}.pieChart{width:30%;height:50%;right:0;bottom:0;margin-left:20px;font-weight:700;font-size:18px}.counters{display:flex;flex-direction:row;padding:20px 50px 35px 50px;width:70%}.section1,.section2{display:flex;flex-direction:row;flex:1}.counter{flex:1}.count{font-size:45px;color:#203e5f;font-weight:700}.type{margin-top:3px;font-size:16px;color:#788695}.countCBN{color:#7ac38f!important}.countPASS{color:#6c95ec!important}.countQR{color:#b74141!important}.seperatorVertical{border-left:1.1px solid grey;margin-top:6px;margin-right:10px;margin-left:30px;opacity:.5}.seperatorHorizontal{border-bottom:1.1px solid grey;align-self:center;width:95%;opacity:.5}.section1 .counter:last-child{flex:0.5}.graphics{display:flex;flex-direction:row;margin-top:20px;height:70%}.attendanceTypes{flex:1.2}.attendanceCounts,.attendanceTypes{font-size:18px;color:#203e5f;font-weight:700;padding:20px 50px 35px 30px}.attendanceCounts{flex:.8;height:100%}.countHead,.typesHead{display:flex;justify-content:space-between}.counterName{margin:30px 0 20px 20px;font-weight:400;font-size:13px;color:#788695}.courseRow{align-items:center;padding-top:20px;padding-bottom:11px;border-bottom:1px solid rgba(0,0,0,.2)}.courseRow,.courseRowLeft{display:flex;justify-content:space-between}.courseRowLeft{padding-left:15px;align-self:center;flex-direction:column;font-weight:400;font-size:14px;color:#203e5f}.courseRowName{font-weight:700}.courseRowDate{font-weight:400}.courseRowRight{display:flex;padding-right:15px;font-size:23px}.studentCount{color:#788695;font-size:23px}.attendedCbnStudent{color:#7ac38f}.attendedPasswordStudentCount{color:#6c95ec}.attendedQrStudentCount{color:#b74141}.section2 .counter:nth-child(2){margin-left:60px}.counterBody{height:85%;overflow-y:auto}.counterBody::-webkit-scrollbar{width:3px}.counterBody::-webkit-scrollbar-thumb{background:#afafaf;width:3px;border-radius:100px}.pieChartHeader{padding:15px}.modalContainer[data-v-43c61a88]{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:999999;display:flex;justify-content:center;align-items:center}.modalBackground[data-v-43c61a88]{position:absolute;top:0;left:0;width:100vw;height:100vh;background-color:rgba(26,38,52,.4)}.modal[data-v-43c61a88]{display:flex;flex-direction:column;border-radius:5px;background-color:#fff;z-index:9999999;min-width:300px;min-height:300px;transition:all .3s;max-height:95vh}.modalHeader[data-v-43c61a88]{display:flex;justify-content:space-between;font-weight:bolder;font-size:17px;padding:17px;border-bottom:.5px solid #ccc}.close[data-v-43c61a88]{cursor:pointer}.modalBody[data-v-43c61a88]{display:block;flex:1;padding:23px;overflow-x:hidden;overflow-y:auto}.modalBody[data-v-43c61a88]::-webkit-scrollbar{width:3px}.modalBody[data-v-43c61a88]::-webkit-scrollbar-thumb{background:#6e6e6e;width:3px;border-radius:100px}.modalBody img[data-v-43c61a88]{width:100%;height:auto;-o-object-fit:cover;object-fit:cover;max-width:500px}.input-absolute[data-v-cf2439a4]{position:relative;width:100%}.input-absolute input[data-v-cf2439a4]{border-radius:32rem;width:100%;font-size:1.3rem;line-height:1.5;font-weight:400;outline:2px solid transparent!important;outline-offset:2px!important;border-width:0;padding:.5rem 3rem}input.opened[data-v-cf2439a4]{border-top-right-radius:0;border-top-left-radius:0}.relative-full-ly[data-v-cf2439a4]{position:relative;background-color:#f8f9fa;border:1px solid #dee2e6;width:100%;height:100%}.flex-between[data-v-cf2439a4]{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #dee2e6}.message-input[data-v-cf2439a4]{position:absolute;width:100%;bottom:-3px;left:0;padding:1rem;background:linear-gradient(180deg,rgba(248,249,250,0) 0,#f8f9fa 50%,#f8f9fa)}.submit-button[data-v-cf2439a4]{position:absolute;right:1rem;top:50%;transform:translateY(-50%);background-color:transparent;border:none;cursor:pointer}.message-inner[data-v-cf2439a4]{position:relative;overflow-y:auto;height:calc(100vh - 400px);padding-bottom:15%}.message-left[data-v-cf2439a4]{padding:1rem}.flex-items-start[data-v-cf2439a4]{display:flex;align-items:flex-start;gap:.75rem}.flex-none[data-v-cf2439a4]{flex:none}.message-text[data-v-cf2439a4]{background-color:rgba(14,23,38,.10196078431372549);padding:.5rem 1rem;border-radius:.375rem .375rem .375rem 0}.images[data-v-cf2439a4]{width:100px;-o-object-fit:cover;object-fit:cover;height:150px}.active[data-v-cf2439a4]{background-color:#cdcdcd!important}.flex-items-end[data-v-cf2439a4]{display:flex;align-items:flex-start;justify-content:flex-end;gap:.75rem}.flex-items-end .message-text[data-v-cf2439a4]{background-color:#007bff;color:#fff;border-radius:.375rem .375rem 0 .375rem}.order-2[data-v-cf2439a4]{order:2}.text-date[data-v-cf2439a4]{font-size:small;font-weight:300}.attach-button[data-v-cf2439a4]{position:absolute;left:1rem;top:50%;transform:translateY(-50%);background-color:transparent;border:none;cursor:pointer}.flex-items-center[data-v-cf2439a4]{display:flex;align-items:center}.flex-shrink[data-v-cf2439a4]{position:relative;flex-shrink:0}.grid[data-v-cf2439a4]{display:grid;place-items:center;width:2.5rem;height:2.5rem;font-size:1.25rem;font-weight:600;color:#fff;background-color:#007bff;border-radius:20px}.gap[data-v-cf2439a4]{gap:1rem}.text-lg[data-v-cf2439a4]{font-size:1.25rem;line-height:1.75}.file-header[data-v-cf2439a4]{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-left:3px solid #007bff;flex-wrap:nowrap;background-color:#fff;width:100%;position:relative}.file-header-title[data-v-cf2439a4]{display:flex;align-items:center;width:100%;padding:.875rem 1.25rem}.close-button-div[data-v-cf2439a4]{display:flex;align-items:center}.close-button[data-v-cf2439a4]{outline:none;border:0;background:transparent;cursor:pointer}.file-image img[data-v-cf2439a4]{-o-object-fit:cover;object-fit:cover;width:5rem;height:5rem}.text-right[data-v-cf2439a4]{text-align:right}.space-y[data-v-cf2439a4]{max-width:50%;min-width:30%}.messageOff[data-v-cf2439a4]{margin-top:3rem}.messageOff>div[data-v-cf2439a4]{display:flex;justify-content:center;align-items:center;font-size:1.5rem;font-weight:600;color:#fff;background-color:#1b1b24;margin:0 3rem;text-align:center;border-radius:.375rem}.close-support[data-v-cf2439a4]{background-color:#dc3545;color:#fff;border:none;padding:.5rem 1rem;border-radius:.375rem;cursor:pointer}.pageContainer[data-v-5df80b8c]{display:flex;flex:6;flex-direction:column;background-color:transparent;border-radius:10px;box-shadow:none!important;margin:15px 40px}.empty[data-v-5df80b8c]{display:flex;justify-content:center;align-items:center;height:100%;width:100%;font-size:20px;font-weight:bolder;color:#f8f9fa}.empty svg[data-v-5df80b8c]{width:50%;height:50%}.switch[data-v-80f90be0]{position:relative;display:flex;width:70px;min-height:24px;border:.5px solid #afafaf;background-color:#fff;border-radius:5px;margin-left:7.5px;margin-right:7.5px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.switchSlider[data-v-80f90be0]{width:40px;display:flex;justify-content:center;align-items:center;text-align:center;font-size:12px;background-color:#afafaf;border-radius:4px;position:absolute;right:100%;transform:translateX(100%);top:0;bottom:0;color:#fff;font-weight:400;transition:all .2s ease-in-out}.switchSlider.active[data-v-80f90be0]{background-color:#278052;right:0;transform:translateX(0)}.input[data-v-4dc2e2f7]{position:relative;border:.5px solid #afafaf;border-radius:5px;margin:20px 0;display:flex;justify-content:center;align-items:center;padding:5px;width:100%}.input.error[data-v-4dc2e2f7]{border-color:#b74141;color:#b74141}small[data-v-4dc2e2f7]{position:absolute;top:100%;left:0;font-size:12px}input[data-v-4dc2e2f7]{padding-right:20px;border:none;background:transparent;outline:none;font-size:16px;width:100%;height:100%}.input>i[data-v-4dc2e2f7]{position:absolute;top:25%;right:15px}label[data-v-4dc2e2f7]{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:10px;top:50%;transform:translateY(-50%);transition:all .3s;font-size:14px}input+label[data-v-4dc2e2f7],input:focus-within+label[data-v-4dc2e2f7]{top:-11px;font-size:13px}input[type=number][data-v-4dc2e2f7]::-webkit-inner-spin-button,input[type=number][data-v-4dc2e2f7]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.body[data-v-53179fd8]{display:flex;flex:1;align-items:flex-start;flex-direction:column;align-items:stretch}.top[data-v-53179fd8]{display:flex;margin-bottom:15px;flex-wrap:wrap;flex-direction:column}.formGroup[data-v-53179fd8]{display:flex}.inputWrapper[data-v-53179fd8]{margin-right:15px;flex:1;margin:20px 0}.input[data-v-53179fd8]{margin:0}.inputWrapper[data-v-53179fd8]:last-of-type{margin-right:0}.middle[data-v-53179fd8]{display:flex;align-items:center}.middleMessage[data-v-53179fd8]{font-size:14px;font-weight:600}.bottom[data-v-53179fd8]{margin-top:20px}.Wrapper[data-v-53179fd8]{margin-bottom:15px}.pageContainer[data-v-33be5b53]{display:flex;flex:6;flex-direction:column;background-color:#fff;border-radius:10px;box-shadow:0 3px 6px rgba(0,0,0,.1607843137254902);margin:15px 40px}@media (max-width:1024px){.pageContainer[data-v-33be5b53]{height:90vh}}.header[data-v-33be5b53]{border-bottom:.5px solid #ddd;border-top-left-radius:10px;border-top-right-radius:10px;width:100%;padding:18px 27px;font-size:20px;font-weight:bolder;display:flex;justify-content:space-between;align-items:center;height:50px}@media (max-width:1024px){.header[data-v-33be5b53]{flex-direction:column;gap:10px;height:auto}}.content[data-v-33be5b53]{position:relative;flex:1;display:flex;padding:20px 20px;flex-wrap:wrap;align-items:flex-start;overflow:hidden;padding-top:10px;height:100%}.chat-users[data-v-33be5b53]{min-height:100px;position:relative;padding-right:.875rem;overflow-anchor:none;touch-action:auto;margin-right:-.875rem;display:flex;flex-direction:column;gap:.2rem;overflow-y:auto}.chat-users .button[data-v-33be5b53]{display:flex;justify-content:space-between;align-items:center;padding:.5rem;border-radius:.375rem;cursor:pointer;transition:background-color .2s ease;width:100%;text-decoration:none;color:#000}.chat-users .button.active[data-v-33be5b53]{background-color:#f8f9fa;border-left:3px solid #007bff;color:#000}.chat-users .button[data-v-33be5b53]:hover{background-color:#f8f9fa}.image-list[data-v-33be5b53]{flex:1 1 0%}.flex-items-center[data-v-33be5b53]{display:flex;align-items:center}.flex-shrink[data-v-33be5b53]{position:relative;flex-shrink:0}.text-left[data-v-33be5b53]{margin-left:.75rem;margin-right:.75rem;text-align:left}.text-left p[data-v-33be5b53]{margin:.5rem;padding:0;font-weight:600}.text-left p[data-v-33be5b53]:last-child{font-size:.875rem;color:#6c757d}.grid[data-v-33be5b53]{display:grid;place-items:center;width:2.5rem;height:2.5rem;font-size:1.25rem;font-weight:600;color:#fff;background-color:#007bff;border-radius:20px}.content-layout[data-v-33be5b53]{flex:1;display:flex;gap:1rem;width:100%;height:100%}@media (max-width:1024px){.content-layout[data-v-33be5b53]{flex-direction:column}}@media (max-width:500px){.pageContainer[data-v-33be5b53]{margin:15px 10px}}.relative-full[data-v-33be5b53]{padding:.5rem;border-radius:.375rem;display:flex;align-items:center;width:100%;justify-content:space-between;background-color:#f8f9fa;border:1px solid #dee2e6}.relative-flex input[data-v-33be5b53]{border-radius:32rem;width:100%;font-size:.875rem;line-height:1.5;font-weight:600;outline:2px solid transparent!important;outline-offset:2px!important;border-width:0;padding:.5rem 3rem}button.header-button[data-v-33be5b53]{background-color:#5267a7;color:#fff;font-size:15px;margin-right:5px;height:40px!important}@media (max-width:1024px){button.header-button[data-v-33be5b53]{padding-right:30px!important;padding-left:22px!important}}.header-button[data-v-33be5b53]:hover{background-color:#5b6eb1}.button-group[data-v-33be5b53]{display:flex;gap:1rem;align-items:center}.button-group .switch[data-v-33be5b53],.button-group button[data-v-33be5b53]{height:43px!important;margin:0!important}.button-group .switch[data-v-33be5b53]{width:100px!important}.new-support[data-v-33be5b53]{background-color:#28a745;color:#fff;border:none;padding:.5rem 1rem;border-radius:.375rem;cursor:pointer}