/*=== Header area start ===*/

/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");  */

@font-face {
   font-family: "Monoton";
   src: local("Monoton"),
      url(./fonts/Monoton-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Audiowide";
   src: local("Audiowide"),
      url(./fonts/Audiowide-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Honk";
   src: local("Honk"),
      url(../fonts/Honk-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Inter";
   src: local("Inter"),
      url(./fonts/Inter_18pt-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Italianno";
   src: local("Italianno"),
      url(./fonts/Italianno-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Pacifico";
   src: local("Pacifico"),
      url(./fonts/Pacifico-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Righteous";
   src: local("Righteous"),
      url(./fonts/Righteous-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Roboto";
   src: local("Roboto"),
      url(./fonts/Roboto-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Sevillana";
   src: local("Sevillana"),
      url(./fonts/Sevillana-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Tangerine";
   src: local("Tangerine"),
      url(./fonts/Tangerine-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Ubuntu";
   src: local("Ubuntu"),
      url(./fonts/Ubuntu-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Ultra";
   src: local("Ultra"),
      url(./fonts/Ultra-Regular.ttf) format("truetype");
}

@font-face {
   font-family: "Michroma";
   src: local("Michroma"),
      url(./fonts/Michroma-Regular.ttf) format("truetype");
}




body {
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: 400;
   background: #fff;
   color: #333333;
}

a:hover {
   text-decoration: none;
}

ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
}

img {
   max-width: 100%;
}

input:focus,
textarea:focus,
button:focus {
   outline: none;
}

::selection {
   color: white;
   background: #ff7675;
}

::-webkit-selection {
   color: white;
   background: #ff7675;
}

::-moz-selection {
   color: white;
   background: #ff7675;
}

.scrolltotop {
   width: 40px;
   height: 40px;
   border-radius: 20px 20px 0 0;
   background: rgba(0, 0, 0, 0.5);
   text-align: center;
   padding-top: 8px;
   font-size: 22px;
   color: #ffffff;
   position: fixed;
   right: 5px;
   bottom: 5px;
   display: none;
   transition: 0.2s all ease;
   -webkit-transition: 0.2s all ease;
   -moz-transition: 0.2s all ease;
}

.scrolltotop:hover {
   background: #000;
   color: #fff;
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

.new_menu_area {
   position: fixed;
   top: 0;
   left: 0;
   background: #f9fbfc;
   z-index: 1000;
   transition: 0.8s all ease;
   -webkit-transition: 0.8s all ease;
   -moz-transition: 0.8s all ease;
}

.menu-area {
   position: fixed;
   top: 0;
   left: 0;
   background: #f9fbfc;
   z-index: 1000;
   /* transition: 0.8s all ease;
   -webkit-transition: 0.8s all ease;
   -moz-transition: 0.8s all ease; */
}

.menu-icon-small {
   display: none;
}

.menu-area2 {
   position: fixed;
   top: 0;
   left: -100%;
   background: #f9fbfc;
   z-index: 1000;
   transition: 0.5s all ease;
   -webkit-transition: 0.5s all ease;
   -moz-transition: 0.5s all ease;
}

/* .menu-area:hover {
   transition: 0.2s all ease;
   -webkit-transition: 0.2s all ease;
   -moz-transition: 0.2s all ease;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
} */

.menu-item {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

.menu-item-inner {
   padding-left: 37px;
   padding-top: 25px;
   padding-bottom: 20px;
}

.menu-item-inner a img {
   max-width: 100%;
   display: block;
}

.menu-item-inner a:nth-of-type(1) {
   display: none;
}

.menu-item-inner2 {
   max-height: calc(100vh - 150px);
   overflow-y: auto;
}

.menu-item-inner2 ul li a {
   font-size: 15px;
   font-weight: 400;
   color: #000000;
   padding: 21px 20px;
   /* padding-right: 2rem !important; */
   display: flex;
   align-items: center;
   border-right: 3px solid transparent;
}

.menu-item-inner2 ul li a span {
   margin-left: 25px;
   display: none;
}

.menu-item-inner2 ul li a.active,
.menu-item-inner2 ul li a:hover {
   /* font-size: 16px; */
   border-color: #2ab3bd;
   background: #f4fbfc;
}

.menu-item-inner3 {
   margin-top: auto;
   padding: 15px 40px 36px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.menu-item-inner3-logout {
   display: none;
   margin-top: auto;
   padding: 15px 40px 36px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.menu-item-inner3 img {
   max-width: 100%;
}

.menu-item-inner3 p {
   font-size: 15px;
   font-weight: 400;
   color: #000000;
   display: flex;
   align-items: center;
   margin: 0;
}

.menu-item-inner3 p span {
   margin-left: 15px;
   margin-right: 80px;
   display: none;
}

.menu-item-inner3 .logout {
   display: none;
}

.menu-item:hover .menu-item-inner3 p span {
   display: block;
}

.menu-item:hover .menu-item-inner3 .logout {
   cursor: pointer;
   color: rgba(29, 6, 174, 0.904);
   font-size: medium;
   font-weight: normal;
   display: block;
}

.menu-item:hover .menu-item-inner a:nth-of-type(1) {
   display: block;
}

.menu-item:hover .menu-item-inner a:nth-of-type(2) {
   display: none;
}

.menu-item:hover .menu-item-inner2 span {
   display: block;
}

.fa-times {
   font-size: 22px;
   color: #000;
   position: absolute;
   top: 15px;
   right: 15px;
   cursor: pointer;
}

.for-menu-scroll {
   left: 0;
   transition: 0.5s all ease;
   -webkit-transition: 0.5s all ease;
   -moz-transition: 0.5s all ease;
}

/*=== main area start ===*/

.main-wrapper {
   /* display: inline-flex; */
   display: flex;
   flex-wrap: wrap;
}

.main-wrapper2 {
   /* display: inline-flex; */
   /* display: flex; */
   flex-wrap: wrap;
}

/* .main-wrapper>* :nth-child(1) {
   flex: 0 0 75%;
   min-width: 50ch;
}

.main-wrapper>* :nth-child(2) {
   flex: 0 0 25%;
   min-width: 25ch;
} */

.dashboard-area {
   /* flex: 0 0 75%; */
   flex: 1 1 75%;
   /* width: 75%; */
   padding-left: 90px;
   padding-top: 5px;
   /* padding-right: 10px; */
   border-right: 1px solid #e2e1e6;
   /* min-height: 100vh; */
   background: #f2f2f2;
}

.dashboard-area-all {
   flex: 1 1 100%;
   padding-left: 90px;
   padding-top: 5px;
   padding-right: 10px;
   border-right: 1px solid #e2e1e6;
   min-height: 100vh;
   width: 100%;
   background: #f2f2f2;
   border: 1px;
}

.dashboard-area-full {
   flex: 1 1 100%;
   padding: 7px;
   border-right: 1px solid #e2e1e6;
   background: #FFF;
   height: 100vh;
   /* calc(100vh - 30px); */
   background: #f2f2f2;
}

.dashboard-area-full-modal {
   flex: 1 1 100%;
   padding: 7px;
   border-right: 1px solid #e2e1e6;
   background: #FFF;
   height: calc(100vh - 220px);
   /* calc(100vh - 30px); */
}

.dashboard-item-inner {
   position: relative;
}

.dashboard-item-inner>i {
   font-size: 22px;
   color: #000;
   position: absolute;
   top: 5px;
   right: 0;
   cursor: pointer;
   display: none;
}

.dashboard-item-inner ul li {
   display: inline-block;
}

.dashboard-item-inner ul li a {
   font-size: 16px;
   /* font-weight: 500; */
   /* color: #a3a3ac; */
   display: block;
}

.dashboard-item-inner ul li span {
   font-size: 19px;
   font-weight: 500;
   color: #a3a3ac;
   display: block;
   margin: 0 13px;
}

.dashboard-item-inner ul li.active {
   font-size: 16px;
   color: #000000;
}

.dashboard-item-inner form {
   position: relative;
   margin-top: 15px;
}

.dashboard-item-inner form input {
   font-size: 16px;
   font-weight: 400;
   color: #a3a3ac;
   padding-left: 24px;
   padding-right: 60px;
   display: flex;
   align-items: center;
   width: 100%;
   height: 54px;
   border: 1px solid #e2e1e6;
   border-radius: 15px;
}

.dashboard-item-inner form img {
   position: absolute;
   top: 50%;
   right: 21px;
   transform: translateY(-50%);
   cursor: pointer;
}

.dashboard-item-inner2 {
   padding: 35px 24px 45px;
   /* background: #D5F4F9; */
   /* background: #f8f8f8; */
   border-radius: 7px;
   position: relative;
   margin-top: 5px;
}

.dashboard-item-inner2 h2 {
   font-size: 28px;
   font-weight: 400;
   color: #000000;
   margin: 0 0 20px;
}

.dashboard-item-inner2 p {
   font-size: 16px;
   font-weight: 400;
   color: #4d4d5a;
   margin: 0;
   max-width: 696px;
}

.dashboard-item-inner2 img:nth-of-type(1) {
   display: none;
}

.dashboard-item-inner2 img:nth-of-type(2) {
   max-width: 100%;
   position: absolute;
   top: -35px;
   right: 55px;
}

.dashboard-item-inner3 {
   margin-top: 10px;
}

.dashboard-item-inner3>h2 {
   font-size: 28px;
   font-weight: 400;
   color: #000000;
   /* margin: 0 0 35px; */
}

.dashboard-item-inner3 .row {
   margin: 0 -7.5px;
}

.dashboard-item-inner3 .col-md-6 {
   padding: 0 7.5px;
}

.dashboard-item-inner4 {
   border-radius: 8px;
   margin-bottom: 20px;
}

.dashboard-item-inner5 {
   padding: 20px;
   /* background: #f8f8f8; */
   background: #D5F4F9;
}

.dashboard-item-inner5 img {
   max-width: 60%;
   display: block;
   margin: 0 auto;
}

.dashboard-item-inner6 {
   border: 1px solid #e2e1e6;
   border-top: none;
   padding: 10px 10px 20px;
}

.dashboard-item-inner6 h3 {
   font-size: 12px;
   font-weight: 500;
   color: #4d4d5a;
   margin: 0 0 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.dashboard-item-inner6 p {
   font-size: 10px;
   font-weight: 400;
   color: #a3a3ac;
   margin: 0;
}

.notice-area {
   position: relative;
   /* flex: 0 0 25%; */
   flex: 1 1 25%;
   /* width: 25%; */
   border-left: 1px solid #e2e1e6;
   padding-top: 20px;
}

.notice-item {
   text-align: center;
   min-width: 380px !important;
}

.notice-item-inner {
   padding: 0px 15px 35px;
}

.notice-item-inner2 {
   max-width: 600px;
   margin: 0 auto;
}

.notice-item-inner2 h2 {
   font-size: 19px;
   font-weight: 500;
   color: #000000;
   margin: 0 0 30px;
   text-align: center;
}

.notice-item-inner2 ul {
   display: flex;
   flex-wrap: wrap;
}

.notice-item-inner2 ul li {
   flex: 0 0 14.28571%;
   max-width: 14.28571%;
}

.notice-item-inner2 ul li span {
   font-size: 16px;
   font-weight: 400;
   color: #000000;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: block;
   margin: 0 auto 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.notice-item-inner2 ul li:nth-of-type(1) span,
.notice-item-inner2 ul li:nth-of-type(2) span,
.notice-item-inner2 ul li:nth-of-type(3) span,
.notice-item-inner2 ul li:nth-of-type(4) span,
.notice-item-inner2 ul li:nth-of-type(5) span,
.notice-item-inner2 ul li:nth-of-type(6) span,
.notice-item-inner2 ul li:nth-of-type(7) span {
   color: #a3a3ac;
}

.notice-item-inner2 ul li:nth-of-type(8) span,
.notice-item-inner2 ul li:nth-of-type(9) span,
.notice-item-inner2 ul li:nth-of-type(10) span,
.notice-item-inner2 ul li:last-of-type span {
   color: #e2e1e6;
}

.notice-item-inner2 ul li:nth-of-type(35) span {
   color: #fff;
   background: #10828a;
}

.notice-item-inner3 {
   /* width: 200px; */
   padding-bottom: 15px;
   overflow-wrap: break-word;
}

.notice-item-inner4 {
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 15px;
}

.notice-item-inner4 h3 {
   font-size: 23px;
   font-weight: 400;
   color: #000000;
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.notice-item-inner4 h3 a {
   font-size: 16px;
   font-weight: 400;
   color: #2ab3bd;
   transition: 0.2s all ease;
   -webkit-transition: 0.2s all ease;
   -moz-transition: 0.2s all ease;
}

.notice-item-inner4 h3 a:hover {
   opacity: 0.8;
}

.notice-item-inner5 {
   display: flex;
   padding: 12px;
   padding-left: 10px;
}

.notice-item-inner5 img {
   max-width: 100%;
   margin-right: 12px;
}

.notice-item-inner5 h4 {
   font-size: 16px;
   font-weight: 500;
   color: #000000;
   margin: 0 0 10px;
}

.notice-item-inner5 p {
   font-size: 14px;
   font-weight: 400;
   color: #828282;
   margin: 0;
}

.notice-item-inner6 {
   background: #f4fbfc;
}

.loader {
   width: 60px;
}

.loader-wheel {
   animation: spin 1s infinite linear;
   border: 2px solid rgba(30, 30, 30, 0.5);
   border-left: 4px solid #fff;
   border-radius: 50%;
   height: 50px;
   margin-bottom: 10px;
   width: 50px;
}

.loader-text {
   color: #fff;
   font-family: arial, sans-serif;
}

.loader-text:after {
   content: 'Loading';
   animation: load 2s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

@keyframes load {
   0% {
      content: 'Loading';
   }

   33% {
      content: 'Loading.';
   }

   67% {
      content: 'Loading..';
   }

   100% {
      content: 'Loading...';
   }
}

.pdf-height {
   position: relative;
   height: calc(100vh - 280px);
}

.chart-container {
   width: 100%;
   height: 250px;
}

.button-shadow {
   box-shadow: 0 4px 4px -1px #ccc;
   -webkit-box-shadow: 0 4px 4px -1px #ccc;
   -moz-box-shadow: 0 4px 4px -1px #ccc;
}

.card-shadow {
   box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.answer-sheet-content {
   margin-left: 5px;
   margin-right: 5px;
   margin-top: 10px;
   height: calc(100vh -15px);
}

.answer-sheet-content .simplebar-wrapper {
   height: calc(100vh - 30px) !important;
}

.modal-document-viewer {
   margin: 5px;
   height: calc(100vh - 220px);
   text-align: center;
   justify-content: center;
   align-items: center;
   display: flex;
   opacity: 100%;
}

.homework_container {
   height: calc(100vh - 155px);
   /* width: 70%; */
   overflow: auto;
   background-color: #FFF;
   /* padding: 10px; */
   display: block;
}

.document-viewer {
   margin: 5px;
   height: calc(100vh - 54px);
   text-align: center;
   justify-content: center;
   align-items: center;
   display: flex;
   opacity: 100%;
}

.essay_list_container {
   height: calc(100vh - 185px);
   /* width: 70%; */
   overflow: auto;
   background-color: #FFF;
   /* padding: 10px; */
   display: block;
}

.essay_list_container_two {
   width: 100%;
   padding: 10px;
   background-color: #FFF;
   position: absolute;
   z-index: 10;
}

.survey_modal_container {
   /* height: calc(100vh - 185px); */
   /* width: 30%; */
   width: 100%;
   padding: '0 16px';
   border: '1px solid rgba(140, 140, 140, 0.35)';
   overflow: auto;
}

.notice-board-floating-button {
   position: fixed;
   bottom: 1px;
   right: 1px;
   background-color: #5997D1;
   /* width: 35px;
   height: 125px; */
   width: 125px;
   height: 35px;
   float: right;
   margin: 0 auto;
   cursor: pointer;
   display: block;
   /* writing-mode: vertical-rl; */
   /* text-orientation: sideways-right; */
   padding: 5px 4px 10px 12px;
   font-size: medium;
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   border-radius: 7px;
   color: #fff;
   opacity: 45%;
   z-index: 1000;
}

.notice-board-floating-button:hover {
   opacity: 100%;
}

.notice-board-floating-button:not(hover) {
   opacity: 45%;
}

.chat-gpt-floating-button {
   position: fixed;
   bottom: 1%;
   right: 13px;
   text-align: center;
   color: #5997D2;
   width: 60px;
   height: 90px;
   background: url(./images/brainee_bot.png);
   background-repeat: no-repeat;
   background-size: 60px;
   background-position: center;
   float: right;
   margin: 0 auto;
   cursor: pointer;
   display: block;
   /*    opacity: 30%; */
   z-index: 1000;
}

.chat-gpt-floating-button:hover {
   opacity: 100%;
   width: 90px;
   height: 130px;
   background-size: 90px;
   transition: 0.2s all ease;
}

.chat-gpt-floating-button:not(hover) {
   opacity: 100%;
   width: 60px;
   height: 90px;
   background-size: 60px;
   transition: 0.2s all ease;
   /*    opacity: 30%; */
}

.wrapword {
   white-space: pre-wrap !important;
   white-space: normal;
}

.student_list_container {
   max-height: calc(100vh - 183px);
   /* width: 30%; */
   padding: '0 16px';
   border: '1px solid rgba(140, 140, 140, 0.35)';
   overflow: auto;
}

.ant-drawer-content-wrapper {
   width: 800px !important;
}

.center-empty-space {
   margin-left: 5px;
   margin-right: 5px;
   margin-top: 10px;
   height: calc(100vh - 175px);
   /* height: calc(100vh - 275px); */
   /* height: 100%; */
   justify-content: center;
   align-items: center;
   display: flex;
   /* background-color: #F4FBFC; */
   opacity: 100%;
}

.card_answer_key {
   height: 121px;
   width: 185px;
   background-color: #D5F4F9;
}

.pdf_container {
   width: 100%;
   /* height: calc(100vh - 65px); */
   /* height: 100%; */
   position: absolute;
   top: 0;
   left: 0;
   /* padding-left: 25px; */
   /* padding-right: 25px; */
   background-color: #f2f2f2;
}

.pdf_overlay {
   z-index: 9;
   margin: 10px;
   opacity: 0.7;
   background: #ccc;
}

.container_loading {
   margin-left: 5px;
   margin-right: 13px;
   margin-top: 10px;
   /* height: calc(100vh - 185px); */
   justify-content: center;
   align-items: center;
   display: flex;
   background-color: #F2F2F2;
   opacity: 100%;
}

.container_loading_modal {
   margin-left: 5px;
   margin-right: 13px;
   margin-top: 10px;
   height: calc(100vh - 205px);
   justify-content: center;
   align-items: center;
   display: flex;
   background-color: #F2F2F2;
   opacity: 100%;
}

.assessment-pagination:hover {
   opacity: 100%;
}

.assessment-pagination:not(hover) {
   opacity: 50%;
}

/*  */

/* .ql-container ql-snow {} */

.ql-snow .ql-tooltip {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   left: 25% !important;
   top: 28px !important;
   transform: translate(-25%, -25%);
   position: absolute !important;
   width: 40% !important;
}

.ql-snow .ql-tooltip input[type=text] {
   width: 100% !important;
}

.ql-snow .ql-tooltip::before {
   margin-right: 0px !important;
}

.ql-snow .ql-tooltip[data-mode=formula]::before {
   content: "Enter Math Formula/Equation" !important;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
   content: "Submit" !important;
}

.ql-snow .ql-tooltip a.ql-action::after {
   margin-left: 0px !important;
}