@font-face {
  font-family: "B Nazanin";
  src: local("B Nazanin Bold"), local("BNazanin-Bold"),
    url("/fonts/BNazanin/BNaznnBd.woff2") format("woff2"),
    url("/fonts/BNazanin/BNaznnBd.woff") format("woff"),
    url("/fonts/BNazanin/BNaznnBd.ttf") format("truetype");
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "Noto Nastaliq Urdu";
  src: url("/fonts/NotoNastaliqUrdu/NotoNastaliqUrdu[wght].ttf")
    format("truetype");
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url("/fonts/Vazirmatn/Vazirmatn-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-display: swap;

  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-y: visible;
  background-color: #fbcaff;
}

.header-buttons {
  margin-right: 10px;
  font-family: "B Nazanin";
}

.fa {
  font-size: 30px;
}

.help-text {
  font-family: "B Nazanin";
  color: #4d055b;
}

.main-part,
.best-ranks-part,
.conference-part,
.org-chart-main,
.gallery-part,
.pre-reg-part,
.pre-reg-form-part,
.pre-register-track-part,
.login-main-part,
.pre-register-error {
  background: #fff;
  border-top: #77187e solid 2px;
}

.main-part,
.pre-reg-part,
.pre-reg-form-part,
.pre-register-track-part,
.org-chart-main {
  border-top: none;
}

.pre-register-part,
.best-grades-part,
.footer-part,
.connect-us-part {
  background: #fff;
  border-top: #77187e solid 2px;
}

.sliders {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
}

.top-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  margin-top: 0.5vh;

  background-color: rgba(255, 255, 255, 0);

  overflow: hidden;

  width: 65vw;
  max-width: 900px;
  height: 460px;

  margin-top: 1vh;
  margin-bottom: 1vh;
}

.top-slider .slider-container {
  display: flex;
  position: relative;
  overflow: hidden;

  max-width: 900px;
  width: 65vw;
  height: 432px;
}

.poster {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 265px;
  height: 410px;

  border: 1px solid #2a0845;
  border-radius: 16px;
}

.poster img {
  width: 265px;
  height: 410px;

  border-radius: 16px;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 432px;

  transition: transform 0.5s ease, opacity 0.5s ease;
  transform: scale(0.95);
  opacity: 0.8;

  overflow: hidden;
}

.slide-active {
  transform: scale(1);
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 91.5%;

  border-radius: 16px;

  object-fit: contain;
}

.prev,
.next {
  color: #2a0845;
  background-color: #fbcaff;
  border: 1px solid #2a0845;
  border-radius: 8px;
  width: 4vh;
  height: 4vh;

  display: flex;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  font-size: 4vh;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
}

.prev {
  left: 2vh;
}

.next {
  right: 2vh;
}

.prev:after,
.next:after {
  font-size: 1vh;
  color: #fcfcfc;
}

.pagination {
  display: flex;
  justify-content: center;
}

.pagination span {
  display: inline-block;
  width: 16px;
  height: 0.75vh;
  background-color: #b5b5b5;
  border-radius: 9999px;
  margin: 0 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pagination .active {
  background-color: #662072;
  opacity: 1;
}
.header {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: center;

  width: 97vw;

  min-height: 7vh;

  margin-top: 1vh;

  border-top-right-radius: 8px;
  border-top-left-radius: 8px;

  background: #fff;

  border: #77187e solid 3px;
}

.header .logo {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;

  width: 20vw;
}

.header .logo .texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: #7c0680;

  direction: rtl;

  margin-right: 1vh;
}

.header .logo .texts span {
  font-family: "Vazirmatn";
  font-size: 1.3vh;
  font-weight: 700;

  width: 100%;
}

.header .logo img {
  width: 10vh;
  margin-right: 1vh;

  transition: all 0.5s;
}

.header .logo img:hover {
  animation: none;
  transform: translate(0px, 0px);

  transition: all 0.5s;
}

.header .buttons {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 1vh;
}

.header .buttons a {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.6vh;
  font-weight: 500;
  color: #2a0845;

  margin: 0.75vh;

  text-decoration: none;

  transition: all 0.5s;
}

.header .buttons a:hover {
  color: #000;

  transition: all 0.5s;
}

.header .buttons a:hover path {
  fill: #000;

  transition: all 0.5s;
}

.header .buttons a svg {
  margin-left: 0.2vh;
}

.header .buttons a svg path {
  fill: #581b63;
}

.header .login {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  align-items: center;

  width: 20vw;
}

.header .login .student-login {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.6vh;
  font-weight: 500;

  color: #fff;

  background-color: #662072;
  border: #662072 solid 2px;
  border-radius: 8px;

  text-decoration: none;

  min-width: 7vh;
  padding: 0.5vh;

  margin-left: 1vh;

  transition: all 0.5s;
}

.header .login .student-login svg {
  margin-left: 0.7vh;
}

.header .login .student-login-texts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-left: 1vh;
  margin-bottom: 0.5vh;
}

.header .login .student-login-image {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 5vh;
  height: 5vh;

  margin-left: 1vh;
}

.header .login .student-login-img {
  object-fit: cover;
  object-position: center;
  border: #220439 solid 1px;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}

.header .login .student-login-name {
  font-family: "Noto Nastaliq Urdu", serif;
  font-weight: 600;
  font-size: 1.1vh;
  padding-bottom: 0.3vh;
}

.header .login .student-login-enter {
  font-family: "Vazirmatn";
  font-weight: 200;
  font-size: 1vh;
}

.header .login .student-login:hover {
  background-color: #000000;

  color: #fff;

  transition: all 0.5s;
}

.main-part,
.pre-register-part,
.conference-part,
.best-grades-part,
.best-ranks-part,
.connect-us-part,
.footer-part,
.org-chart-part,
.gallery-part,
.pre-reg-part,
.pre-reg-form-part,
.pre-register-track-part,
.login-main-part,
.pre-register-error {
  width: 97vw;

  border-right: 3px #77187e solid;
  border-left: 3px #77187e solid;
}

.btn-info {
  background-color: #feefff;
  border: #feefff solid 1px;
}

.btn-primary {
  background-color: #feefff;
  border: #feefff solid 1px;
}

.btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background-color: #ffffff;
  border: #2290f6 solid 2px;
}

.dark-btn {
  display: none;

  background-color: #343a40;
  border: #271344 solid 0px;

  color: #b3b3b3;
}

.dark-btn:hover {
  background-color: #ffffff;
  border: #ffffff solid 0px;
  color: black;
}

.dark-btn:hover:after {
  font-family: "B Nazanin";
  content: "تم : تاریک";
}

.light-btn {
  display: none;

  background-color: #008f7b;
  border: #fff solid 0px;

  color: #ffeb00;
}

.light-btn:hover {
  background-color: #343a40;
  border: #271344 solid 0px;
  color: white;
}

.light-btn:hover:after {
  font-family: "B Nazanin";
  content: "تم : روشن";
}

.announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  background-color: #ffffff;

  border: #77187e solid 2px;

  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.annoucement-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  position: relative;

  width: 97vw;
  min-height: 5vh;
}

.announcement-text {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;

  padding: 5px;
  width: 85%;

  color: #000;

  border-radius: 15px;

  text-align: center;

  text-decoration: none;

  transition: 0.3s;
}

.announcement-text:hover {
  color: #2a0845;

  transition: 0.3s;
}

.announcement-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  height: 4vh;
  width: 4vh;

  background: #ff9595;

  border: 1px solid #730000;
  border-radius: 100%;

  position: absolute;
  left: 1.5vh;
}

.announcement-pointer {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  height: 4vh;
  width: 4vh;

  background: #95fff6;

  border: 1px solid #004d47;
  border-radius: 100%;

  position: absolute;
  right: 1.5vh;
}

.announcement-textarea {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  width: 89vw;
}

.announcement-svg path {
  fill: #730000;
}

.announcement-psvg path {
  fill: #004d47;
}

.slogan {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;

  padding-top: 1vh;
}

.slogan-text {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  font-family: "Noto Nastaliq Urdu", serifs;
  font-weight: 500;
  font-size: 1.5vh;

  padding: 0.5vh;

  color: #000;

  background-color: #fbcaff;
  border: #985fad solid 2px;

  width: 27.3vw;
  border-radius: 8px;
}

.wave {
  display: flex;
  position: relative;
  height: 13vh;
}

.wave svg {
  position: absolute;
}

.conference-row .base-video {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;

  width: 50vw;

  padding: 3vh;
}

.conference-row .base-video video {
  width: 40vw;
  border-radius: 50%;
  border: 2px solid #b63fe1;
  box-shadow: 0px 0px 4px #000000;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.conference-row .base-video video:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px #000000;
}

.conference-row .card-of-text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  text-align: center;

  padding: 2vh;
}

.card-text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.card-text-school-name {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 2.5vh;

  margin-bottom: 2vh;
}

.card-text-main {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
}

.pre-register-base {
  display: flex;
  flex-direction: row-reverse;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-evenly;

  margin-top: 5vh;
  margin-bottom: 5vh;
}

.pre-register-term {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;

  width: 25vw;

  line-height: 45px;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
  font-feature-settings: "ss01";

  padding: 15px;

  background-color: #fbcaff;

  border: #985fad solid 2px;
  border-radius: 16px;

  box-shadow: 0px 0px 15px #583266;
}

.pre-register-term-circle {
  position: absolute;

  content: "";

  width: 1vh;
  height: 1vh;

  top: 1vh;
  right: 0;

  border: 2px solid #b63fe1;
  border-radius: 5px;

  box-shadow: 0px 0px 4px #000000;

  background-color: #5e0080;
}

.pre-register-term-row {
  position: relative;
  padding-right: 20px;
  display: flex;
}

.pre-register-term-row-text {
  line-height: 30px;
  color: black;
}

.pre-register-term-row-text-stype {
  font-family: "Noto Nastaliq Urdu", serif;
}

.pre-register-qrcode-txtbase {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-bottom: 15px;

  width: fit-content;
}

.pre-register-qrcode-text {
  text-align: center;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.3vh;
  font-weight: 500;

  padding: 1vh;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 8px;
  box-shadow: 0px 0px 15px #583266;

  color: black;
}

.pre-register-img {
  padding: 0.5vh;
  border-radius: 8px;
  border: 3px solid #000;
  background: #fff;
  box-shadow: 0px 0px 15px #000;
  margin-top: 3vh;

  width: 20vh;
}

.pre-regsiter-qrcode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
}

.pre-register-description {
  width: 25vw;

  padding: 2vh;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0 0 15px #583266;
}

.pre-register-title {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 2.7vh;

  padding-bottom: 20px;
  text-align: center;
}

.pre-register-text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.pre-register-text a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding: 1vh;
  margin: 1vh;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 700;

  background-color: #5e0080;
  border: #5e0080 solid 2px;
  border-radius: 8px;
  color: #fff;

  text-decoration: none;

  transition: all 0.5s;
}

.pre-register-text a:hover {
  padding-left: 1.5vh;
  padding-right: 1.5vh;

  background-color: #460060;

  transition: all 0.5s;
}

.pre-register-text a svg {
  margin-left: 5px;
}

.pre-register-text a svg path {
  fill: #fff;
}

.conference-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 3vh;
  padding: 1vh;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;
}

.introduce-title {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: center;

  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-right: 2vh;
}

.introduce-text,
.title-of-best-grades,
.title-of-best-ranks,
.gallery-title,
.connect-us-text {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;

  padding-right: 0.5vh;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 3vh;
  color: #5e0080;

  text-shadow: 0px 0px 4px #f698ff;

  border-bottom: 2px solid #5e0080;
}

.introduce-text svg,
.title-of-best-grades svg,
.title-of-best-ranks svg,
.gallery-title svg,
.connect-us-text svg,
.pre-reg-title-base svg,
.pre-reg-terms-title svg {
  margin-left: 0.5vh;
}

.introduce-text svg path,
.introduce-text svg rect,
.title-of-best-grades svg path,
.title-of-best-ranks svg path,
.title-of-best-grades svg rect,
.title-of-best-ranks svg rect,
.gallery-title path,
.gallery-title rect,
.title-of-best-ranks svg circle,
.connect-us-text path,
.connect-us-text rect,
.pre-reg-title-base svg path,
.pre-reg-title-base svg rect,
.pre-reg-terms-title svg path,
.pre-reg-terms-title svg rect {
  fill: #5e0080;
}

.edu-services {
  padding-bottom: 20px;
}

.edu-services-base {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;

  margin: 1vh;
}

.edu-services-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 1.5vh;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;

  width: fit-content;
  height: 38vh;
}

.edu-services-description {
  display: flex;

  width: 270px;
}

.edu-services-description-text {
  text-align: center;
  margin: 1vh;
}

.edu-services-img {
  width: 130px;
  animation: gentleShake 3s ease-in-out infinite;
}

.edu-services-title {
  padding-top: 2vh;
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 2vh;
}

.edu-services-description {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;

  margin: 1vh;
}

.middle-school {
  padding-top: 30px;
  padding-bottom: 30px;
}

.high-school {
  padding-bottom: 30px;
}

.best-student-img {
  border: black solid 2px;
  width: 15vh;

  border-radius: 100%;
}

.stundet-base {
  display: flex;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;

  padding: 5vh;

  margin-left: 3vh;
  margin-right: 3vh;

  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.student-info {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  width: max-content;
}

.student-name {
  text-align: center;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
  text-shadow: 0 0 1px rgb(0 0 0 / 42%);
  font-size: 20px;
  padding: 5px;
}

.student-grade,
.student-rank {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
  text-align: center;
  padding: 5px;
}

.best-grades-part-title,
.best-ranks-part-title,
.gallery-head,
.connect-us-title {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-items: center;

  margin-top: 2vh;
  margin-bottom: 2vh;
  margin-right: 2vh;
}

.base-ranks-part,
.best-grades-part {
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.marquee-base {
  height: 50vh;
  overflow-x: hidden;
}

.best-grades-row,
.best-ranks-row {
  width: 100%;
  height: auto;
  display: flex;
  padding-top: 50px;
  display: flex;
  flex-wrap: nowrap;

  animation: marquee 100s linear infinite;
}

.base-of-connect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;

  padding-bottom: 2vh;
}

.connect-us-title {
  width: 100%;
}

.conntact-us-base {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: fit-content;

  margin: 3vh;
  padding: 1vh;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;
}

.conntact-us-base .text {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 2vh;

  direction: rtl;

  width: 44vw;
  height: 22vh;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
}

.conntact-us-base .text .buttons {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;
}

.conntact-us-base .text .buttons a {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding: 1vh;
  margin: 1vh;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 700;

  background-color: #5e0080;
  border: #5e0080 solid 2px;
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  transition: all 0.5s;
}

.conntact-us-base .text .buttons a svg,
.conntact-us-base .text .buttons a img {
  margin-bottom: 1vh;
}

.conntact-us-base .text .buttons a img {
  border-radius: 100%;
}

.conntact-us-base .icon {
  margin-right: 10vh;
  margin-left: 10vh;
}

.conntact-us-base .icon img {
  width: 40vh;
}

.footer-part,
.login-main-part {
  border-bottom: 3px #985fad solid;
  margin-bottom: 1vh;
}

.footer-part {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;

  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

  font-family: "Vazirmatn", sans-serif;
}

.footer-part .copyright {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding-top: 1vh;
  padding-left: 1vh;
  padding-right: 1vh;

  border-top-left-radius: 18px;
  border-top-right-radius: 18px;

  direction: rtl;

  text-align: center;
  font-size: 1.5vh;
  font-weight: 700;
  color: #000;

  background-color: #fbcaff;
  border-top: #985fad solid 2px;
  border-left: #985fad solid 2px;
  border-right: #985fad solid 2px;
}

.footer-part .copyright .design-text {
  font-size: 1vh;
}

.footer-part .copyright .design-text a {
  color: #560075;
  text-decoration: none;
  font-weight: 500;
}

.footer-part .info {
  width: 90vw;

  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;

  margin-top: 3vh;
  padding-bottom: 1vh;
  margin-bottom: 3vh;

  border-bottom: #985fad solid 2px;
}

.footer-part .info .introduce {
  width: 45vw;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: center;
}

.footer-part .info .introduce .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

.footer-part .info .introduce .logo img {
  width: 12.5vh;
}

.footer-part .info .introduce .buttons {
  margin-top: 1.5vh;
  margin-bottom: 1.5vh;
}

.footer-part .info .introduce .buttons a {
  font-weight: 700;
  color: #5e0080;
  text-decoration: none;
  margin: 1vh;
}

.footer-part .info .connect {
  width: 45vw;

  font-weight: 500;
  font-feature-settings: "ss01";
  color: #5e0080;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-content: center;
  justify-content: center;
}

.footer-part .info .connect .row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;

  margin-top: 0.7vh;
  margin-bottom: 0.7vh;
}

.footer-part .info .connect .row .title {
  display: flex;
  margin-left: 1vh;
  direction: rtl;
}

.footer-part .info .connect .row .title svg {
  color: #5a007b;
}

.footer-part .info .connect .row .value {
  direction: rtl;
}

.footer-part .footer-instagram-btn {
  display: inline-flex;

  margin: 1vh;

  width: 4vh;
  height: 4vh;

  text-decoration: none;

  color: #5e0080;
  border-radius: 50%;
  outline: 2px solid #5e0080;
  transition-property: outline-offset, outline-color, background-color;
  transition-duration: 0.25s;
}

.footer-part .footer-instagram-btn:hover {
  outline-offset: 4px;
}

.footer-part .footer-instagram-btn svg {
  margin: auto;
}

.footer-part .footer-instagram-btn:hover i {
  animation: shake 0.25s;
}

.footer-part .footer-instagram-btn:hover {
  background-image: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  outline-color: #a02d76;
}

.footer-instagram-btn:hover svg {
  color: black;
}

.footer-part .footer-whatsapp-btn {
  display: inline-flex;

  width: 4vh;
  height: 4vh;

  margin: 1vh;

  text-decoration: none;
  color: #5e0080;
  border-radius: 50%;

  outline: 2px solid #5e0080;
  transition-property: outline-offset, outline-color, background-color;
  transition-duration: 0.25s;
}

.footer-part .footer-whatsapp-btn:hover {
  outline-offset: 4px;
}

.footer-part .footer-whatsapp-btn svg {
  margin: auto;
}

.footer-part .footer-whatsapp-btn:hover i {
  animation: shake 0.25s;
}
.footer-part .footer-whatsapp-btn:hover {
  background-image: radial-gradient(
    circle at 30% 107%,
    #25d366 0%,
    #20c659 25%,
    #1da653 50%,
    #178745 75%,
    #0e5f30 100%
  );
  outline-color: #128c7e;
}

.red-base .category {
  display: none;

  position: absolute;
  top: 0.5vh;

  flex-direction: column;
  align-content: flex-end;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: nowrap;

  position: absolute;

  border-radius: 8px;

  width: 98.5vw;
  height: 99.6%;

  background: #00000045;
}

.org-chart-part {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.poems {
  margin: 2vh;
  padding: 3vh;

  margin-top: 5vh;

  text-align: center;
  line-height: 2;
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 2vh;
  width: 52vh;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;

  direction: rtl;
}

.verse-1,
.verse-2 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;

  text-align: center;
}

.high-title,
.deputy-title,
.teachers-title {
  color: white;
}

.verse-2 {
  padding-top: 15px;
}

.poet {
  padding-top: 2vh;
  text-align: left;
  font-size: 1.3vh;
  margin-left: 4vh;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.chart-part {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;

  padding-top: 5vh;
  padding-bottom: 5vh;
}

.teachers-ranks,
.deputy-ranks,
.high-ranks {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: fit-content;
  margin: 30px;
  width: 95%;
}

.teachers-title,
.deputy-title,
.high-title {
  border-top: #77187e solid 3px;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;

  text-align: center;
  color: #000;
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 30px;

  width: 100%;

  text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.3);
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.teacher-base,
.deputy-base,
.high-base {
  display: flex;
  flex-direction: column;
  align-items: center;

  border-radius: 16px;

  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);

  width: 18vw;

  padding: 3vh;

  margin: 2vh;

  max-height: 30vh;
}

.high-base {
  border: #9faa00 solid 3px;
  background-color: #faffb3;
}

.deputy-base {
  border: #34a300 solid 3px;
  background-color: #c5ffab;
}

.teacher-base {
  border: #0099b8 solid 3px;
  background-color: #c4f5ff;
}

.high-part,
.teachers-part,
.deputy-part {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: center;

  width: 100%;
}

.teacher-name,
.deputy-name,
.high-name {
  padding-top: 2vh;
  text-align: center;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.7vh;

  text-shadow: 0 0 8px #9b9b9b;
}

.teacher-lesson {
  padding-top: 1vh;
  text-align: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1.5vh;
}

.deputy-rank,
.high-rank {
  padding-top: 1vh;
  text-align: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1.5vh;
}

.teacher-info,
.deputy-info,
.high-info {
  width: max-content;
  display: flex;
  text-align: center;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.teacher-picture,
.deputy-picture,
.high-picture {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
}

.teacher-img,
.deputy-img,
.high-img {
  border-radius: 100%;

  height: 17.5vh;
}

.gallery-view {
  height: 5vh;
  margin-right: 1vh;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.3vh;
  font-weight: 500;
  text-decoration: none;

  color: #3b3b3b;

  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
}

.gallery-view path {
  fill: #3b3b3b;
}

.gallery-col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  width: 30vh;
  min-height: 25vh;

  margin: 1vh;

  color: black;

  text-decoration: none;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;

  transition: 0.3s;
}

.gallery-col:hover {
  cursor: pointer;

  background-color: #f6d222;

  border: #665810 solid 2px;

  transition: 0.3s;
}

.gallery-subject {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
  font-feature-settings: "ss01";

  margin-top: 4vh;

  width: 19vw;

  text-align: center;
}

.gallery-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row-reverse;
  align-content: center;

  overflow-y: auto;
  overflow-x: hidden;
}

.gallery-tub-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: nowrap;

  border-radius: 16px;

  width: 30vh;
  height: 15vh;
}

.gallery-thumbnail-grid {
  border-radius: 16px;
  display: block;
  height: 11.25rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.gallery-thumbnail {
  object-fit: cover;
  object-position: top;

  filter: blur(1px);

  border-radius: 16px;
  width: 100%;
  height: 100%;
}

.gallery-col:hover .gallery-thumbnail {
  filter: blur(0px);

  transition: all 0.5s;
}
.gallery-base {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  margin: 2vh;
}

.gallery-photos {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 97vw;
}

.gallery-image,
.gallery-video {
  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;

  border-radius: 16px;

  height: 50vh;
  margin: 3vh;
  object-fit: contain;
}

.gallery-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;

  width: 100%;
  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-size: 2vh;

  margin-top: 3vh;
  margin-bottom: 3vh;
}

.gallery-description,
.gallery-information {
  width: 60vw;
  padding: 2vh;
  margin: 1.5vh;
  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;
  text-align: right;
}

.gallery-information {
  width: 18vw;
}

.gallery-info {
  padding: 2vh;
}

.gallery-date,
.gallery-upload {
  font-size: 13px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.gallery-bold {
  font-size: 1.7vh;
  font-weight: bold;
}

.gallery-uploader {
  color: #985fad;
  font-size: 10px;
}

.notfound-avatar {
  width: 300px;
}

.notfound-part {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 30px;
  padding-bottom: 30px;
}

.notfound-text {
  text-align: center;
  padding-top: 50px;
}

.notfound-txt {
  font-family: "B Nazanin";
  font-size: 30px;
}

.carousel-control-next,
.carousel-control-next,
.carousel-control-prev,
.carousel-control-prev {
  color: #6e00ff;
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
  color: #6e00ff;
}

.carousel-indicators [data-bs-target] {
  font-size: 30px;
  background-color: #985fad;
}

.pre-reg-title {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: nowrap;

  margin-top: 1vh;
}

.pre-reg-title-base {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
  align-items: center;

  width: 90vw;

  margin: 2vh;
}

.pre-reg-title-subtitle {
  background-color: #fbcaff;
  border: 2px solid #985fad;
  border-radius: 16px;
  box-shadow: 0 0 15px #583266;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;

  width: 40vw;

  text-align: center;

  padding: 1.5vh;
}

.pre-reg-title-title-text {
  font-family: "Vazirmatn", serif;
  font-size: 2.5vh;
  font-weight: 700;

  padding-bottom: 1vh;

  color: #5e0080;
  text-shadow: 0 0 4px #f698ff;
  border-bottom: 2px solid #5e0080;
}

.pre-reg-register-main-base {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-around;
  align-items: center;

  text-align: center;

  margin-top: 5vh;
  min-height: 33vh;
  margin-bottom: 5vh;
}

.pre-reg-register {
  display: flex;
  justify-content: center;

  margin-top: 2rem;
  margin-bottom: 2rem;
}

.pre-reg-register-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;

  padding: 2vh;

  background-color: #fbcaff;
  border: 2px solid #985fad;
  border-radius: 16px;
  box-shadow: 0 0 15px #583266;

  text-align: center;

  min-height: 22vh;
  width: 40vw;
}

.pre-reg-reigster-title {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 20px;
  text-align: center;
}

.pre-reg-reigster-description {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  padding-top: 30px;
}

.pre-reg-reigster-description-text {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
}

.pre-reg-result {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;

  margin-top: 2rem;
  margin-bottom: 2rem;
}

.pre-reg-result-base {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  padding: 2vh;

  background-color: #fbcaff;
  border: 2px solid #985fad;
  border-radius: 16px;
  box-shadow: 0 0 15px #583266;

  min-height: 22vh;

  width: 40vw;
}

.pre-reg-result-title {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 20px;
  text-align: center;
}

.pre-reg-result-description {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  padding-top: 30px;
}

.pre-reg-result-description-text {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
}

.pre-reg-result-buttons {
  padding-top: 20px;
}

.pre-reg-result-button {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
  color: white;

  position: relative;
  display: inline-block;

  text-decoration: none;

  padding: 5px 15px;

  border-radius: 8px;
  color: #fff;
  background-color: #662072;
  border: 3px solid #662072;
}

.pre-reg-result-button::before,
.pre-reg-result-button::after {
  content: "";
  position: absolute;
  transition: width 0.25s 0.15s, height 0.25s;
  border: inherit;

  width: 40px;
  height: 40px;
}

.pre-reg-result-button::before {
  border-width: 3px 0 0 3px;

  top: -10px;
  left: -10px;
}

.pre-reg-result-button::after {
  border-width: 0 3px 3px 0;

  bottom: -10px;
  right: -10px;
}

.pre-reg-result-button:hover::before,
.pre-reg-result-button:hover::after {
  width: calc(100% + 20px);
  height: calc(100% + 20px);

  background: #c40fca0e;
  border-radius: 10px;
}

.pre-reg-reigster-buttons {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: wrap;

  padding-top: 20px;
}

.pre-reg-reigster-button {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 700;

  color: white;

  margin-top: 10px;
  margin-bottom: 10px;

  position: relative;
  display: inline-block;

  text-decoration: none;

  padding: 5px 15px;

  border: 3px solid #662072;
  border-radius: 8px;
  background: #662072;
}

.pre-reg-reigster-button::before,
.pre-reg-reigster-button::after {
  content: "";
  position: absolute;
  transition: width 0.25s 0.15s, height 0.25s;
  border: inherit;

  width: 40px;
  height: 40px;
}

.pre-reg-reigster-button::before {
  border-width: 3px 0 0 3px;

  top: -10px;
  left: -10px;
}

.pre-reg-reigster-button::after {
  border-width: 0 3px 3px 0;

  bottom: -10px;
  right: -10px;
}

.pre-reg-reigster-button:hover::before,
.pre-reg-reigster-button:hover::after {
  width: calc(100% + 20px);
  height: calc(100% + 20px);

  background: #c40fca0e;
  border-radius: 10px;
}

.pre-reg-terms-title {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
}

.pre-reg-terms-title-text {
  font-family: "Vazirmatn", serif;
  font-size: 2.5vh;
  font-weight: 700;

  padding-bottom: 1vh;

  color: #5e0080;
  text-shadow: 0 0 4px #f698ff;
  border-bottom: 2px solid #5e0080;
}

.pre-reg-terms {
  display: flex;
  flex-direction: row-reverse;
  align-content: center;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;

  margin-left: 4vh;
  margin-right: 4vh;
}

.pre-reg-term-base {
  margin-top: 3vh;
  margin-right: 3vh;

  padding: 3vh;

  direction: rtl;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;
}

.pre-reg-term-title-text {
  font-family: "Vazirmatn";
  font-weight: 700;
  font-size: 2vh;
}

.pre-reg-term-title {
  margin-bottom: 1vh;
}

.pre-reg-term-text {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;
  font-feature-settings: "ss01";
}

.pre-reg-term-baser {
  width: 5px;
}

.pre-reg-term-row {
  position: relative;
}

.pre-reg-term-circle {
  position: absolute;
  content: "";

  width: 1vh;
  height: 1vh;

  top: 0.5vh;
  right: -2vh;

  border: 2px solid #b63fe1;
  border-radius: 5px;
  box-shadow: 0px 0px 4px #000000;
  background-color: #5e0080;
}

.pre-reg-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.pre-reg-form-base {
  padding-top: 30px;
  padding-bottom: 40px;
  width: 95%;
}

.pre-reg-form-god {
  padding-top: 15px;
  padding-bottom: 15px;
}

.pre-reg-form-inthenameofgod {
  color: #000;
  font-family: "Noto Nastaliq Urdu", serif;
  font-weight: 700;
  font-size: 2vh;
}

.pre-reg-main-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;
}

.pre-reg-main-student-form,
.pre-reg-main-family-form,
.pre-reg-main-other-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;

  width: 85vw;
  min-height: fit-content;

  padding: 20px;

  background-color: #220439;
  border: #985fad solid 2px;
  border-radius: 10px;
}

.pre-reg-main-student-form-head {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 100%;
}

.pre-reg-main-student-form-body {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-between;
  justify-content: space-around;

  width: 100%;
}

.pre-reg-main-fild-form {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;

  margin: 1.5vh;
  width: 25vw;
}

.pre-reg-main-submit-zone {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}

.pre-reg-main-submit-zone input {
  width: 120px;
}

.pre-reg-main-student-form-text,
.pre-reg-main-family-form-text,
.pre-reg-main-other-form-text {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 1.7vh;
  color: white;
}

.pre-reg-main-form label {
  font-family: "Vazirmatn";
  font-size: 1.5vh;
  font-weight: 700;

  width: 100%;

  color: white;
}

.pre-reg-main-form select {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-feature-settings: "ss01";

  background-color: #fbcaff;
  border: #220439 solid 3px;
  border-radius: 8px;

  padding: 1vh;

  width: 250px;
}

.pre-reg-main-form input {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-feature-settings: "ss01";

  text-align: center;

  background-color: #fbcaff;
  border: #220439 solid 3px;
  border-radius: 8px;

  padding: 1vh;
}

.pre-reg-main-form textarea {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-feature-settings: "ss01";

  background-color: #fbcaff;
  border: #220439 solid 3px;
  border-radius: 8px;

  overflow: auto;

  padding: 1vh;
}

.pre-reg-date-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: nowrap;

  width: 30vw;
}

.pre-reg-student-dob {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}

textarea::-webkit-scrollbar {
  width: 5px;
}

textarea::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.pre-reg-main-form input#day,
.pre-reg-main-form input#month {
  text-align: center;

  width: 85px;
  padding-left: 10px;
}

.pre-reg-main-form input#year {
  text-align: center;

  width: 85px;
}

.pre-reg-main-family-form,
.pre-reg-main-other-form {
  margin-top: 15px;
  margin-bottom: 15px;
}

.pre-reg-main-submit-zone-main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding: 1vh;

  background-color: #220439;

  border-radius: 15px;
}

.pre-reg-main-submit-zone-main input {
  transition: 0.3s;
  font-size: 2vh;
}

.pre-reg-main-submit-zone-main input:hover {
  cursor: pointer;
  background-color: #220439;

  color: #fff;

  transition: 0.3s;
}

.login-main-part {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;

  height: 97vh;

  margin-top: 1vh;
  margin-bottom: 1vh;
}

.login-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;

  height: 58vh;
  width: 50vw;
}

.login-footer-btns {
  height: 20vh;
  width: 95%;
  margin-top: 25px;
}

.login-footer-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.login-btn-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;

  width: 12vh;
  height: 15vh;

  padding: 15px;
  margin: 10px;

  text-decoration: none;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #583266;
}

.login-btn-icon,
.login-btn-texts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 150px;
}

.login-btn-icon {
  margin-bottom: 20px;
}

.login-card-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 28vw;
  height: 51vh;
  padding: 10px;
}

.login-card-logo {
  margin: 2.5vh;
}

.login-card-logo img {
  width: 15vh;
}

.login-form-username {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding-top: 1vh;
}

.login-form-password {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding-top: 1vh;
}

.login-form-username .form-control,
.login-form-password .form-control {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-feature-settings: "ss01";
  text-align: center;
  background-color: #fbcaff;
  border: #220439 solid 3px;
  border-radius: 8px;
  padding: 1vh;
  width: 23vw;

  font-size: 1.5vh;
}

.login-btn-icon svg {
  color: #000;
}

.login-btn-icon svg:hover {
  width: 40px;
  transition: width 60s;
  color: #4d0454;
}

form.login-main-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 43vw;
  padding: 1vh;

  background-color: #220439;
  border: #985fad solid 2px;
  border-radius: 8px;
}

.login-main-form label {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.6vh;
  font-weight: 700;

  width: 100%;

  color: #fff;
}

.login-form-password-checkbox {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.6vh;
  font-weight: 700;

  color: #fff;

  margin-top: 1vh;
}

.login-form-password-checkbox input {
  margin: 0;
  margin-left: 10px;
}

.login-form-password-checkbox .form-check-input:checked {
  background-color: #f36dff;
  border-color: #f36dff;
}

.login-main-form .submit-btn {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  border-radius: 8px;
  background: #fbcaff;
  margin-top: 2vh;
  margin-bottom: 2vh;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.6vh;
  font-weight: 700;
  color: #000;

  width: 12vh;
  height: 5vh;

  transition: all 0.5s;
}

.login-main-form .submit-btn svg {
  margin-left: 0.5vh;
}

.login-main-form .submit-btn:hover {
  cursor: pointer;

  background: #fff;

  transition: all 0.5s;
}

.form-control {
  font-weight: bolder;
}

.login-alert {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
  text-align: center;

  position: absolute;
  top: 3vh;
  display: none;
  position: absolute;

  padding: 1vh;

  width: 30vw;

  background-color: #feffca;
  border: #adac5f solid 2px;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #666332;
}

.login-main-card {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding-top: 8px;
  padding-bottom: 8px;

  padding-left: 8px;
  padding-right: 8px;

  background-color: #adff87;
  border: #51ff00 solid 2px;
  box-shadow: 0px 0px 20px 0px #adff87;

  border-radius: 20px;
}

.login-main-card-photo {
  border-radius: 50px;
  display: block;
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100px;
  z-index: 1;

  margin-right: 20px;
}

.login-main-card-img {
  object-fit: cover;
  object-position: center;

  height: 100%;
  width: 100%;
}

.login-main-card-texts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-align: center;
}

.login-main-card-name-text,
.login-main-card-rank-text {
  font-family: "B Nazanin";
  font-size: 20px;
}

.login-main-card-welcome-text {
  font-family: "Noto Nastaliq Urdu", serif;
}

.login-main-card-rank {
  padding-top: 15px;
}

.login-btn-title-text {
  font-size: 1.6vh;
  font-family: "Noto Nastaliq Urdu", serif;
  color: #4d0454;
}

.login-btn-mainText {
  margin-top: 7.5px;
}

.login-btn-mainText-text {
  font-family: "B Nazanin";
  font-size: 1.3vh;

  color: rgb(87, 108, 144);
}

.panel-main-part {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #000;

  height: 100%;
  width: 100%;
}

.panel-back-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
}

.panel-main-base {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;

  background: #985fad;

  height: 100vh;
  width: 100vw;
}

.panel-user-bar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 5px;
  background: #2a0845;

  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;

  width: 18%;
}

.panel-user-base {
  margin: 5px;

  background: #2a0845;

  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;

  width: 82%;
}

.panel-user-info {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;

  margin-top: 5%;
}

.panel-user-info-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 90%;
  height: 100%;

  background-color: #fbcaff;

  border-top-left-radius: 60px;
  border-top-right-radius: 60px;

  box-shadow: 0px -20px 20px #583266;
}

.panel-user-avatar {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 1;

  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  padding-top: 10px;

  width: 80px;
  height: 80px;
}

.panel-user-avatar-img {
  object-fit: cover;
  object-position: center;

  border: #220439 solid 1px;
  border-radius: 50px;

  height: 100%;
  width: 100%;
}

.panel-user-footer .btn-outline-danger {
  font-size: 15px;
  padding: 5px;
  color: #220439;
  border: #220439 solid 3px;
}

.panel-user-footer .btn-outline-danger:hover {
  font-size: 15px;
  color: #632f6856;
  border: #632f6856 solid 3px;
  color: black;
  background: #ff606038;
}

.panel-user-information {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: fit-content;
}

.panel-user-information-fullname,
.panel-user-information-rank {
  color: black;
  text-align: center;
}

.panel-user-information-fullname {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 17px;
}

.panel-user-information-rank {
  font-family: "B Nazanin";
  padding-top: 11px;
}

.panel-user-footer,
.panel-user-information {
  padding-bottom: 10px;
}

.panel-user-footer {
  display: flex;
  flex-direction: row;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;

  width: 100%;
}

.panel-user-btn-exit {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-size: 13px;

  font-family: "B Nazanin";
}

.panel-user-welcome-text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;

  font-family: "B Nazanin";
  font-size: 15px;
  text-align: center;
}

.panel-user-bars {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  height: 60%;
  width: 90%;
  padding-top: 5%;

  overflow-y: auto;
  overflow-x: hidden;

  background-color: #fbcaff;

  box-shadow: 0px 20px 20px #583266;
}

.panel-user-bars::-webkit-scrollbar {
  width: 5px;
}

.panel-user-bars::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-user-bars-btns {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  width: 90%;
  height: 100%;
}

.panel-user-logozone {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  height: 10%;
  width: 90%;
  padding-top: 5%;
  margin-bottom: 5%;

  overflow-y: auto;
  overflow-x: hidden;

  background-color: #fbcaff;

  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  overflow: hidden;

  box-shadow: 0px 20px 20px #583266;
}

.panel-user-logo-base {
  height: 80%;
}

.panel-user-logo-base img {
  object-fit: cover;
  object-position: center;

  height: 100%;
  width: 100%;
}

.panel-user-bar-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;

  padding-top: 20px;
}

.panel-user-bar-button {
  font-family: "B Nazanin";
  color: white;

  margin-top: 10px;
  margin-bottom: 10px;

  position: relative;
  display: inline-block;

  text-decoration: none;

  padding: 5px 15px;

  border: 3px solid #2a0845;
  border-radius: 10px;
  background: #2a0845;
}

.panel-user-bar-button::before,
.panel-user-bar-button::after {
  content: "";
  position: absolute;
  transition: width 0.25s 0.15s, height 0.25s;
  border: inherit;

  width: 40px;
  height: 40px;
}

.panel-user-bar-button::before {
  border-width: 3px 0 0 3px;

  top: -10px;
  left: -10px;
}

.panel-user-bar-button::after {
  border-width: 0 3px 3px 0;

  bottom: -10px;
  right: -10px;
}

.panel-user-bar-button:hover::before,
.panel-user-bar-button:hover::after {
  width: calc(100% + 20px);
  height: calc(100% + 20px);

  background: #c40fca0e;
  border-radius: 10px;
}

.panel-user-bar-button svg {
  margin-right: 5px;
}

.panel-active-btn {
  font-family: "B Nazanin";
  color: white;

  margin-top: 10px;
  margin-bottom: 10px;

  position: relative;
  display: inline-block;

  text-align: center;

  text-decoration: none;

  padding: 5px 15px;

  border: 3px solid #082f45;
  border-radius: 10px;
  background: #082f45;
}

.panel-active-btn:hover::before,
.panel-active-btn:hover::after {
  width: calc(100% + 20px);
  height: calc(100% + 20px);

  background: #0f85ca0e;
  border-radius: 10px;
}

.login-main-falid {
  border-radius: 30px;
  border: red solid 3px;
  background: rgb(255, 186, 186);

  padding: 20px;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.login-faild-texts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.login-faild-photo {
  margin-right: 30px;
}

.login-faild-photo svg {
  color: #ff6868;
}

.login-faild-username,
.login-faild-password {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
}

.login-faild-wrong {
  padding-top: 10px;
  text-align: center;
  font-family: "Noto Nastaliq Urdu", serif;
}

.login-faild-btn {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  border: #ff0000 solid 1px;
  border-radius: 16px;
  background: #ff7878;
  box-shadow: 0px 0px 20px #ff7878;

  margin-top: 20px;

  height: 30px;
  width: 100%;

  transition: all 0.5;
}

.login-faild-btn {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
}

.login-faild-btn svg {
  margin-right: 30px;
  color: #000000;
}

.login-faild-btn:hover {
  cursor: pointer;
  border: rgb(43, 43, 0) solid 1px;
  border-radius: 16px;
  background: #fffd78;
  box-shadow: 0px 0px 20px #fffd78;
  transition: all 0.5;
}

.panel-user-footer-ip {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  color: #220439;

  border: #220439 solid 3px;

  border-radius: 15px;

  width: 100px;

  padding-top: 10px;
  padding-bottom: 10px;
}

.panel-user-footer-ip-text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-align: center;
}

.panel-user-footer-ip-text-address {
  width: 100px;
  font-size: 10px;
  font-family: "Courier New", Courier, monospace;
}

.panel-user-footer-ip-text-isp {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 7px;
}

.panel-user-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-zone {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  width: 98%;
  height: 98%;
}

.panel-user-boss-mainpage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;

  width: 100%;
  height: 100%;
}

.panel-user-zone::-webkit-scrollbar {
  width: 5px;
}

.panel-user-zone::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-user-boss-mainpage-header {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: "Noto Nastaliq Urdu", serif;
  text-align: center;
}

.panel-user-boss-mainoage-header-text {
  color: #fff;
}

.panel-user-boss-mainpage-body {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;

  width: 100%;
  height: fit-content;
}

.panel-user-boss-mainpage-statistics {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-boss-mainpage-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;

  padding: 10px;

  width: fit-content;
  height: fit-content;

  margin: 20px;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 20px;
  box-shadow: 0px 0px 20px #583266;
}

.panel-user-boss-mainpage-row-header {
  padding-left: 30px;
  padding-right: 30px;
  font-family: "Noto Nastaliq Urdu", serif;
  text-align: center;
}

.panel-user-boss-mainpage-row-mainText {
  font-family: "B Nazanin";
  font-size: 13.5px;
  color: #505050;
  padding-top: 30px;
}

.panel-user-boss-mainpage-row-countView {
  padding-top: 5px;
  font-family: "B Nazanin";
}

.panel-user-boss-mainpage-row-pre-reg {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;

  border: #220439 solid 1px;
  border-radius: 20px;
  padding: 10px;
  margin: 10px;
}

.panel-user-boss-mainpage-row-pre-reg-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.panel-user-boss-mainpage-row-pre-reg-title {
  font-family: "Noto Nastaliq Urdu", serif;
  padding-bottom: 20px;
}

.panel-user-boss-mainpage-accounts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-boss-mainpage-accounts-header {
  margin-top: 20px;
  margin-bottom: 20px;
  font-family: "Noto Nastaliq Urdu", serif;
  text-align: center;
}

.panel-user-boss-mainpage-accounts-header-mainText {
  color: #fff;
}

.panel-user-boss-mainpage-accounts-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-no-perm {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;

  height: 90%;
}

.panel-user-no-perm-icon {
  padding-top: 50px;
  padding-bottom: 50px;
}

.panel-user-no-perm-icon svg {
  color: #ff5353;
}

.panel-user-no-perm-texts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-no-perm-bold {
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 50px;
  text-align: center;
  color: #fff;
}

.panel-user-no-perm-main {
  font-family: "B Nazanin";
  font-size: 13.5px;
  color: #aaaaaa;
  text-align: center;
  padding-top: 40px;
}

.panel-user-manage-users-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
}

.panel-user-manage-users-table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 45px;
  box-shadow: 0px -20px 20px #583266;

  padding: 20px;

  width: 70%;
  height: 75%;
}

.panel-user-manage-users-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  width: 98.5%;
  height: 98.5%;
}

.panel-user-manage-users-main::-webkit-scrollbar {
  width: 5px;
}

.panel-user-manage-users-main::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-user-manage-users-main-row {
  height: fit-content;

  padding: 10px;
  margin: 10px;

  width: 160px;

  text-decoration: none;

  box-shadow: 0px 0px 20px #583266;
  border: 3px solid #2a0845;
  border-radius: 10px;
  background: #2a0845;

  color: white;

  text-align: center;
}

.panel-user-manage-users-main-row:hover {
  height: fit-content;

  padding: 10px;
  margin: 10px;

  width: 160px;

  text-decoration: none;

  box-shadow: 0px 0px 20px #c62aff;
  border: 3px solid #9a1eff;
  border-radius: 10px;
  background: #9616ff;

  cursor: pointer;

  color: black;

  text-align: center;
}

.panel-user-manage-users-header {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.panel-user-manage-users-header .form-control {
  color: black;
  font-family: "B Nazanin";
  border-radius: 20px;
  width: 35vw;
}

.panel-user-manage-users-add-btn,
.panel-user-manage-users-add-excel-btn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-size: 15px;

  margin-right: 10px;

  width: 45px;
  height: 45px;

  background: #0f4508;

  color: white;

  border: #0f4508 solid 3px;
  border-radius: 20px;

  font-family: "B Nazanin";
}

.panel-user-manage-users-add-btn:hover,
.panel-user-manage-users-add-excel-btn:hover {
  font-size: 15px;

  margin-right: 10px;

  background: #37ff1c;

  cursor: pointer;

  color: black;

  border: #37ff1c solid 3px;
  border-radius: 20px;

  font-family: "B Nazanin";
}

.panel-user-manage-users-add-excel-btn:hover path {
  fill: #000;
}

.panel-user-manage-users-search-btn {
  font-size: 15px;

  margin-left: 10px;

  background: #2a0845;

  color: white;

  border: #220439 solid 3px;
  border-radius: 20px;

  font-family: "B Nazanin";
}

.panel-user-manage-users-search-btn:hover {
  font-size: 15px;

  margin-left: 10px;

  background: #c62aff;

  color: black;

  border: #c62aff solid 3px;
  border-radius: 20px;

  font-family: "B Nazanin";
}

.panel-user-manage-users-main {
  height: 80%;
}

.panel-user-manage-users-main-avatar {
  width: fit-content;
}

.panel-user-manage-users-main-avatar img {
  object-fit: cover;
  object-position: center;

  border: white 3px solid;
  border-radius: 100%;

  height: 80%;
  width: 80%;
}

.panel-user-manage-users-main-name {
  padding-top: 17px;
  font-family: "Noto Nastaliq Urdu", serif;
}

.panel-user-manage-users-main-rank {
  padding-top: 7px;
  font-family: "B Nazanin";
}

.panel-user-check {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  margin: 20px;
  width: 90%;
  height: 100%;
}

.panel-user-check-profile {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border-radius: 20px;
  box-shadow: 0px 20px 20px #583266;

  padding: 20px;
}

.panel-user-check-texts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 10px;
  padding: 20px;
}

.panel-user-check-information {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 10px;
  padding: 20px;

  background-color: #fbcaff;
  border-radius: 20px;
  box-shadow: 0px 20px 20px #583266;
}

.panel-user-check-information form {
  background-color: #b693b9;
  padding: 10px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-check-inputs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-check-avatar {
  width: 150px;
  height: 150px;
}

.panel-user-check-avatar img {
  object-fit: cover;
  object-position: center;
  border: #220439 solid 1px;
  border-radius: 50%;
  height: 100%;
  width: 100%;
}

.panel-user-check-fullname {
  font-family: "Noto Nastaliq Urdu", serif;
}

.panel-user-check-rank {
  font-family: "B Nazanin";

  padding-top: 15px;
}

.panel-user-check-national-code {
  font-family: "B Nazanin";

  padding-top: 5px;
}

.panel-user-check-upload-form {
  margin-bottom: 35px;
}

.panel-user-check-upload-text {
  font-family: "Noto Nastaliq Urdu", serif;
  background-color: #2a0845;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0px -5px 10px #2a0845;
  color: white;
  padding: 13px;
}

.panel-user-check-upload-choose {
  padding: 10px;
  font-family: "B Nazanin";
  color: white;
  background-color: #2a0845;
  margin-top: 15px;
  border-radius: 10px;
  box-shadow: 0px 5px 20px #2a0845;
}

.panel-user-check-upload-choose:hover {
  padding: 10px;
  font-family: "B Nazanin";
  color: wheat;
  background-color: #9a1fff;
  margin-top: 15px;
  border-radius: 10px;
  box-shadow: 0px 5px 20px #9a1fff;
  cursor: pointer;
}

.panel-user-check-upload-precent {
  margin-right: 20px;
  font-family: "B Nazanin";
}

.panel-user-check-upload-btn,
.panel-user-check-save-btn {
  width: 30%;
  font-family: "B Nazanin";
  color: black;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #ffffff;

  transition: all 0.3s;
}

.panel-user-check-upload-btn:hover,
.panel-user-check-save-btn:hover {
  padding-left: 12px;
  padding-right: 12px;
  font-family: "B Nazanin";
  color: white;
  border: 3px solid #082f45;
  border-radius: 10px;
  background: #082f45;

  transition: all 0.3s;
}

.panel-user-check-save-btn {
  margin-top: 20px;
}

.panel-user-check-inputs {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #2a0845;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #2a0845;
  padding: 20px;
}

.panel-user-check-inputs-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 10px;
  margin-bottom: 10px;
}

.panel-user-check-inputs-row span {
  font-family: "B Nazanin";
  color: white;
}

.panel-user-check-inputs-row input,
.panel-user-check-inputs-row select {
  font-family: "B Nazanin";
  text-align: center;
  width: 180px;
}

.panel-user-check-alert {
  font-family: "B Nazanin";
  padding-top: 20px;
}

.panel-user-add {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 100%;
}

.panel-user-add-tips {
  width: fit-content;
  padding: 33px;
  margin: 20px;
  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 20px;
  box-shadow: 0px -20px 20px #583266;
}

.panel-user-add-tips-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-add-tips-row {
  position: relative;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-add-tips-row-circle {
  position: absolute;
  content: "";
  width: 9px;
  height: 9px;
  top: 8px;
  right: -16px;
  border: 2px solid #720bff;
  border-radius: 5px;
  box-shadow: 0px 0px 8px 1px #000000;
  background-color: #222;
}

.panel-user-add-tips-row-text {
  padding-right: 7.5px;
  font-family: "B Nazanin";
  text-align: center;
}

.panel-user-add-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 20px;
  box-shadow: 0px -20px 20px #583266;

  margin: 10px;
  padding: 15px;
}

.panel-user-add-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding-top: 10px;
  padding-bottom: 10px;
}

.panel-user-add-row-input-name {
  font-family: "B Nazanin";
  text-align: center;
  direction: rtl;

  width: 90%;
}

.panel-user-add-row-input-userpass {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  width: 90%;
}

.panel-user-add-row-label {
  font-family: "B Nazanin";
  padding: 3px;
}

.panel-user-add-row-btn {
  margin-top: 15px;
  background: #80ff6f;
  font-family: "B Nazanin";
  border: 2px solid #4cad3b;
  border-radius: 20px;
  box-shadow: 0px 1px 10px #4cad3b;
  width: 100px;

  transition: 0.3s;
}

.panel-user-add-row-btn:hover {
  margin-top: 15px;
  background: #b96fff;
  font-family: "B Nazanin";
  border: 2px solid #703bad;
  border-radius: 20px;
  box-shadow: 0px 1px 10px #703bad;
  width: 100px;

  transition: 0.3s;
}

.panel-user-add-alert {
  font-family: "B Nazanin";
  padding-top: 20px;
}

.panel-user-manage-role {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 100%;
  height: 100%;
}

.panel-user-manage-role-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;
  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 45px;
  box-shadow: 0px -20px 20px #583266;
  padding: 20px;
  width: 70%;
  height: 75%;
}

.panel-user-manage-role-base-header {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  border-bottom: 3px solid #2a0845;
  border-radius: 10px;

  width: 100%;
  height: fit-content;

  padding: 10px;
}

.panel-user-manage-role-base-header span {
  font-family: "Noto Nastaliq Urdu", serif;
  margin-right: 30px;
}

.panel-user-manage-role-base-header a {
  font-family: "B Nazanin";
  margin-right: 30px;
}

.panel-user-manage-role-base-main-head,
.panel-user-manage-role-base-main-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding-top: 10px;
  padding-bottom: 10px;

  background: #2a0845;
}

.panel-user-manage-role-base-main-head {
  border-bottom: 2px solid #fbcaff;
}

.panel-user-manage-role-base-main-head span,
.panel-user-manage-role-base-main-row span,
.panel-user-manage-role-base-main-row-function {
  text-align: center;
  font-family: "B Nazanin";
  width: 100%;
  height: fit-content;

  color: white;
}

.panel-user-manage-role-base-main-row {
  border-bottom: 2px solid #fbcaff;
}

.panel-user-manage-role-base-main-row-function {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-user-manage-role-base-main-row-function a {
  margin-top: 5px;
  margin-bottom: 5px;

  font-size: 10px;
}

.panel-user-manage-role-base-main {
  height: 80%;
  width: 98%;

  padding: 10px;

  border-radius: 30px;

  overflow-y: auto;
  overflow-x: hidden;
}

.panel-user-manage-role-base-main::-webkit-scrollbar {
  width: 5px;
}

.panel-user-manage-role-base-main::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-manage-role-alert {
  margin-top: 10px;
  font-family: "B Nazanin";
}

.panel-user-manage-role-edit {
  width: 100%;
  height: 100%;

  overflow-y: auto;
  overflow-x: hidden;
}

.panel-user-manage-role-edit::-webkit-scrollbar {
  width: 5px;
}

.panel-user-manage-role-edit::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-user-manage-role-edit-base {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: nowrap;

  height: 70%;
  width: 100%;
}

.panel-user-manage-role-edit-form {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: fit-content;

  padding: 10px;

  background-color: #fbcaff;
  box-shadow: 0px 20px 20px #583266;
  border-radius: 20px;
}

.panel-user-manage-role-edit-form-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 10px;
  margin-bottom: 10px;
}

.panel-user-manage-role-edit-form-row-label {
  padding-bottom: 10px;
  font-family: "B Nazanin";
}

.panel-user-manage-role-edit-form-row-input,
.panel-user-manage-role-edit-form-row select {
  text-align: center;
  direction: rtl;
  padding: 5px;
  width: 200px;

  font-family: "B Nazanin";

  color: white;
  background-color: #2a0845;
  border: #985fad solid 3px;
  border-radius: 20px;
}

.panel-user-manage-role-edit-form-btn {
  font-family: "B Nazanin";

  color: white;

  text-align: center;

  margin-top: 20px;
  margin-bottom: 20px;

  background-color: #583266;

  border: 2px solid #2a0845;

  width: 100px;

  border-radius: 20px;

  transition: all 0.5s;
}

.panel-user-manage-role-edit-form-btn:hover {
  font-family: "B Nazanin";

  color: #000;

  text-align: center;

  margin-top: 15px;
  margin-bottom: 15px;

  background-color: #dc7cff;

  border: 2px solid #000000;

  width: 100px;

  border-radius: 20px;

  transition: all 0.5s;
}

.panel-user-manage-role-edit-form-alert {
  font-family: "B Nazanin";
  margin-top: 10px;
  margin-bottom: 10px;
}

.panel-user-manage-role-edit-header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
}

.panel-user-manage-role-edit-title {
  font-family: "Noto Nastaliq Urdu", serif;
  color: black;

  padding: 10px;
  margin-bottom: 30px;

  background-color: #fbcaff;
  border-radius: 20px;
}

.panel-user-manage-role-edit-description {
  text-align: right;
  direction: rtl;
  padding: 30px;
  margin: 10px;

  background-color: #fbcaff;
  box-shadow: 0px 20px 20px #583266;
  border-radius: 20px;
}

.panel-user-manage-role-edit-description-text {
  font-family: "B Nazanin";
  color: black;
}

.panel-user-manage-role-edit-description-row {
  position: relative;
}

.panel-user-manage-role-edit-description-circle {
  position: absolute;
  content: "";
  width: 9px;
  height: 9px;
  top: 11px;
  right: -18px;
  border: 2px solid #720bff;
  border-radius: 5px;
  box-shadow: 0px 0px 8px 1px #000000;
  background-color: #222;
}

.panel-user-manage-role-add {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

.panel-user-manage-role-add-base {
  width: 100%;
  height: 100%;

  overflow-y: auto;
  overflow-x: hidden;

  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

.panel-user-manage-role-add-base::-webkit-scrollbar {
  width: 5px;
}

.panel-user-manage-role-add-base::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-user-manage-role-add-header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
}

.panel-user-manage-role-add-main {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;

  width: 100%;
  height: 70%;
}

.panel-user-manage-role-add-title {
  font-family: "Noto Nastaliq Urdu", serif;
  color: black;
  padding: 10px;
  margin-bottom: 30px;
  background-color: #fbcaff;
  border-radius: 20px;
}

.panel-user-manage-role-add-description {
  text-align: right;
  direction: rtl;
  padding: 30px;
  margin: 10px;
  background-color: #fbcaff;
  box-shadow: 0px 20px 20px #583266;
  border-radius: 20px;
}

.panel-user-manage-role-add-row {
  position: relative;
}

.panel-user-manage-role-add-circle {
  position: absolute;
  content: "";
  width: 9px;
  height: 9px;
  top: 11px;
  right: -18px;
  border: 2px solid #720bff;
  border-radius: 5px;
  box-shadow: 0px 0px 8px 1px #000000;
  background-color: #222;
}

.panel-user-manage-role-add-text {
  font-family: "B Nazanin";
  color: black;
}

.panel-user-manage-role-add-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  padding: 15px;

  background-color: #fbcaff;
  box-shadow: 0px 20px 20px #583266;
  border-radius: 20px;
}

.panel-user-manage-role-add-form-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 10px;
  margin-bottom: 10px;
}

.panel-user-manage-role-add-form-label {
  font-family: "B Nazanin";
  color: black;
  margin-bottom: 10px;
}

.panel-user-manage-role-add-form-row-input {
  text-align: center;
  direction: rtl;
  padding: 5px;
  width: 200px;
  font-family: "B Nazanin";
  color: white;
  background-color: #2a0845;
  border: #985fad solid 3px;
  border-radius: 20px;
}

.panel-user-manage-role-add-form-row select {
  text-align: center;
  direction: rtl;
  padding: 5px;
  width: 200px;
  font-family: "B Nazanin";
  color: white;
  background-color: #2a0845;
  border: #985fad solid 3px;
  border-radius: 20px;
}

.panel-user-manage-role-add-form-btn {
  font-family: "B Nazanin";
  color: white;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #583266;
  border: 2px solid #2a0845;
  width: 100px;
  border-radius: 20px;
  transition: all 0.5s;
}
.panel-user-manage-role-add-form-btn:hover {
  font-family: "B Nazanin";
  color: #000;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
  background-color: #dc7cff;
  border: 2px solid #000000;
  width: 100px;
  border-radius: 20px;
  transition: all 0.5s;
}

.panel-user-manage-role-add-form-alert {
  font-family: "B Nazanin";
  margin-top: 10px;
  margin-bottom: 10px;
}

.pre-register-error {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: nowrap;

  height: fit-content;
}

.pre-register-error-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: fit-content;

  margin: 20px;
  padding: 10%;
}

.pre-register-error-avatar {
  color: #fbcaff;
}

.pre-register-error-boldText {
  margin-top: 30px;

  text-align: center;

  color: white;
}

.pre-register-error-boldText span {
  font-family: "Noto Nastaliq Urdu", serif;
}

.pre-register-error-text {
  margin-top: 15px;

  text-align: center;

  color: #6e6e6e;
}

.pre-register-error-text span {
  font-family: "B Nazanin";
}

.panel-pre-register-admin {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

.panel-pre-register-admin-base {
  overflow-y: auto;
  overflow-x: hidden;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

.panel-pre-register-admin-base::-webkit-scrollbar {
  width: 5px;
}

.panel-pre-register-admin-base::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-pre-register-title {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  margin-top: 30px;
}

.panel-pre-register-titleText {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  padding-right: 0.5vh;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 3vh;

  color: #fbcaff;

  text-shadow: 0px 0px 4px #f698ff;
  border-bottom: 2px solid #fbcaff;
}

.panel-pre-register-setting {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 20px;
}

.panel-pre-register-setting-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  color: black;
  padding: 10px;
  margin: 10px;
  background-color: #fbcaff;
  border-radius: 20px;
}

.panel-pre-register-setting-about {
  font-family: "B Nazanin";
  font-size: 12px;
}

.form-check-label {
  color: #0f4508;
  font-family: "B Nazanin";
}

.form-check-input {
  background-color: #ffa7a7;
  border-color: #ffa7a7;
}

.form-check-input:checked {
  background-color: #0f4508;
  border-color: #0f4508;
}

.panel-pre-register-setting-main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-pre-register-setting-main-print {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

.panel-pre-register-form-group {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-pre-register-form-group label {
  font-family: "B Nazanin";
  padding-bottom: 3px;
}

.panel-pre-register-form-group input {
  font-family: "Vazirmatn";
  font-feature-settings: "ss01";
}

.panel-pre-register-check {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: row-reverse;

  width: 100%;
  padding: 0;
}

.panel-pre-register-check-print {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 1vh;
}

.panel-pre-register-check-print-infopart {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-pre-register-check-print-label {
  color: #000000;
  font-family: "B Nazanin";
  font-size: 1.5vh;
}

.panel-pre-register-check-print-input {
  display: flex;

  text-align: center;

  color: #000;
  font-family: "B Nazanin";
  font-size: 1.5vh;

  border-radius: 30px;
  border: #2a0845 1px solid;

  padding: 0.5vh;

  margin: 1vh;
}

.panel-pre-register-setting-print-btn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "B Nazanin";
  color: white;
  border-radius: 20px;
  border: 1px soild #008f7b;
  background-color: #2a0845;
  transition: all 0.5s;

  width: 10vh;
}

.form-check-input {
  margin-left: 1vh;
}

.panel-pre-register-base {
  width: 95%;
  height: 60vh;
  padding: 10px;
  margin: 10px;
  margin-bottom: 30px;
  border-radius: 20px;
}

.panel-pre-register-filter {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;

  background: #fbcaff;
  padding: 10px;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.panel-pre-register-academic-year {
  width: 90%;
}

.panel-pre-register-status {
  width: 30%;
}

.panel-pre-register-academic-year .form-select {
  font-family: "Vazirmatn";
  font-weight: 700;
  font-feature-settings: "ss01";
}

.panel-pre-register-header {
  display: flex;
  width: 100%;
  height: 20%;
}

.panel-pre-register-main {
  background: #fbcaff;
  padding: 10px;
  margin: 10px;
  border-radius: 20px;
  height: 78.5%;
  overflow-y: hidden;
  overflow-x: hidden;
}

.panel-pre-register-search-btn {
  font-family: "B Nazanin";
  color: white;
  border-radius: 20px;
  border: 1px soild #008f7b;
  background-color: #2a0845;
  transition: all 0.5s;
}

.panel-pre-register-search-btn:hover {
  font-family: "B Nazanin";
  color: black;
  border-radius: 20px;
  border: 1px soild #008f7b;
  background-color: #fbcaff;
  transition: all 0.5s;
}

.panel-pre-register-search .form-control {
  font-family: "Vazirmatn";

  width: 50vw;
}

.panel-pre-register-content {
  width: 100%;
  height: 75%;

  overflow-y: auto;
  overflow-x: hidden;
}

.panel-pre-register-content::-webkit-scrollbar {
  width: 5px;
}

.panel-pre-register-content::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-pre-register-head {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 1vh;
  margin-bottom: 1vh;

  height: 4vh;
}

.panel-pre-register-head-row {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;

  width: 100%;
  height: 100%;

  margin-top: 6.5px;
  margin-bottom: 20px;
}

.panel-pre-register-head-row {
  height: fit-content;
}

.panel-pre-register-head-row span {
  width: 100%;
  height: 100%;

  font-family: "Vazirmatn", sans-serif;
  text-align: center;
}

.panel-pre-register-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px;
  background: #2a0845;
  border-radius: 20px;
}

.panel-pre-register-row div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  border-radius: 20px;
}

.panel-pre-register-row-trackcode {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.panel-pre-register-row-firstname,
.panel-pre-register-row-lastname,
.panel-pre-register-row-ncode,
.panel-pre-register-row-grade,
.panel-pre-register-row-status {
  font-family: "B Nazanin";
}

.panel-pre-register-row-function {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-pre-register-row-view {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  background: #276f99;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 5px;
  margin: 5px;
  cursor: pointer;

  transition: all 0.3s;
}

.panel-pre-register-row-view:hover {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  background: #3fb9ff;
  text-decoration: none;
  color: black;
  border-radius: 20px;
  border: 1px solid #ffffff;
  padding: 10px;
  margin: 5px;
  cursor: pointer;

  transition: all 0.3s;
}

.panel-pre-register-row-print {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  background: #919927;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 5px;
  margin: 5px;
  cursor: pointer;

  transition: all 0.3s;
}

.panel-pre-register-row-print:hover {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  background: #f2ff3f;
  text-decoration: none;
  color: black;
  border-radius: 20px;
  border: 1px solid #ffffff;
  padding: 10px;
  margin: 5px;
  cursor: pointer;

  transition: all 0.3s;
}

.panel-pre-register-row-view svg,
.panel-pre-register-row-delete svg,
.panel-pre-register-row-print svg {
  margin-right: 0.5vh;
}

.panel-pre-register-row-delete {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  background: #992727;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 5px;
  margin: 5px;
  cursor: pointer;

  transition: all 0.3s;
}

.panel-pre-register-row-delete:hover {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  background: #ff3f3f;
  text-decoration: none;
  color: black;
  border-radius: 20px;
  border: 1px solid #ffffff;
  padding: 10px;
  margin: 5px;
  cursor: pointer;

  transition: all 0.3s;
}

.form-submoit {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "B Nazanin";
  background: #27992d;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  border: 1px solid #ffffff;

  padding-top: 2.5px;
  padding-bottom: 2.5px;
  padding-right: 25px;
  padding-left: 25px;

  margin: 10px;
  cursor: pointer;

  transition: all 0.3s;
}

.form-submoit:hover {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "B Nazanin";
  background: #5fff67;
  text-decoration: none;
  color: black;
  border-radius: 10px;
  border: 1px solid #ffffff;

  padding-top: 2.5px;
  padding-bottom: 2.5px;
  padding-right: 25px;
  padding-left: 25px;

  margin: 10px;
  cursor: pointer;

  transition: all 0.3s;
}

.panel-pre-register-setting-notif {
  font-family: "B Nazanin";
  margin-top: 10px;
  margin-bottom: 10px;
}

.panel-pre-register-result {
  margin-top: 15px;
  text-align: center;
  margin-bottom: 15px;
  font-family: "B Nazanin";
  color: #353535;
}

.panel-pre-reigster-edit,
.panel-pre-register-edit-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100%;
}

.panel-pre-register-info {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;

  background-color: #fbcaff;
  box-shadow: 0px -20px 20px #583266;

  overflow-y: auto;
  overflow-x: hidden;

  margin: 10px;

  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  width: 90%;
  height: 90vh;
}

.panel-pre-register-info::-webkit-scrollbar {
  width: 5px;
}

.panel-pre-register-info::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-pre-register-row-base {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-pre-register-edit-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background: #2a0845;
  border-radius: 20px;
  box-shadow: 0px 0px 20px #583266;

  color: white;

  margin: 10px;
  padding: 20px;
}

.panel-pre-register-edit-row-label {
  font-family: "Noto Nastaliq Urdu", serif;
}

.panel-pre-register-edit-row-content {
  font-family: "B Nazanin";
  color: #c0c0c0;
  padding-top: 10px;
}

.panel-pre-register-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;

  background-color: #fbcaff;

  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;

  width: 90%;
  height: 6vh;
}

.panel-pre-register-btns-base {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-pre-register-btns-base select {
  width: 150px;

  margin-top: 10px;
  margin-bottom: 10px;

  border: 2px solid #985fad;
  background: #2a0845;
  border-radius: 20px;
  font-family: "B Nazanin";

  color: #fff;
  padding: 5px;
}

.panel-pre-register-btns-base input {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-family: "Vazirmatn";
  background: #08450b;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s;

  min-width: 80px;
}

.panel-pre-register-btns-base input:hover {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-family: "Vazirmatn";
  background: #083945;
  text-decoration: none;
  color: white;
  border-radius: 10px;
  border: 1px solid #ffffff;
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  transition: all 0.3s;
}

.panel-pre-register-btns-alert {
  margin: 10px;
  padding: 10px;

  font-family: "B Nazanin";
}

.pre-register-track-part {
  display: flex;
  align-items: flex-end;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-evenly;

  min-height: 56vh;
}

.pre-register-track-base {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 100%;
  height: 100%;
}

.pre-register-track-input {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border: 2px solid #985fad;
  border-radius: 16px;
  box-shadow: 0 0 15px #583266;

  width: 25vw;

  padding: 3vh;
  margin: 3vh;

  margin-top: 5vh;
}

.pre-register-track-mainText {
  font-family: "Vazirmatn", sans-serif;
  font-size: 1.5vh;
  font-weight: 500;

  margin-bottom: 3vh;
}

.pre-register-track-field {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-feature-settings: "ss01";
  text-align: center;
  background-color: #fbcaff;
  border: #220439 solid 3px;
  border-radius: 8px;
  padding: 1vh;
  width: 15vw;
}

.pre-register-track-btn {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-feature-settings: "ss01";
  font-size: 1.5vh;
  text-align: center;
  background-color: #220439;
  border: #fbcaff solid 3px;
  border-radius: 16px;
  padding: 1vh;
  transition: 0.3s;
  color: #fff;

  margin-top: 3vh;
}

.pre-register-track-btn:hover {
  cursor: pointer;
  background-color: #fbcaff;
  border: #220439 solid 3px;
  color: #000;
  transition: 0.3s;
}

.pre-register-track-result {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border: 2px solid #985fad;
  border-radius: 16px;
  box-shadow: 0 0 15px #583266;

  padding: 3vh;
  margin: 3vh;

  width: 25vw;
}

.pre-register-track-result-text {
  font-family: "Vazirmatn", serif;
  font-weight: 900;
  font-size: 3vh;
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}

.pre-register-track-result-help {
  font-family: "Vazirmatn";
  font-family: 500;
  font-size: 1.5vh;
  margin-bottom: 1vh;
  text-align: center;
}

.pre-register-track-result-help-name {
  font-weight: 700;
  font-size: 1.7vh;
}

.panel-mb-btn {
  display: none;
}

.panel-admin-class {
  margin-top: 8vh;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  background: #2a0845;
}

.panel-admin-class-row-tool {
  width: 77vw;
  height: 5vh;

  background-color: #fbcaff;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;

  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;
}

.panel-admin-class-statistics {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  direction: rtl;
  width: 25%;
  height: 100%;

  font-family: "B Nazanin";
}

.panel-admin-class-statistics .text {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;

  width: 100%;
}

.panel-admin-class-statistics .count {
  margin-right: 0.5vh;

  font-family: "B Nazanin", sans-serif;
}

.panel-admin-class-title {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 50%;
  height: 100%;

  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 1.7vh;
}

.panel-admin-create-class {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 25%;
  height: 100%;

  font-family: "B Nazanin";
}

.panel-admin-create-class a {
  color: #006b00;
  text-decoration: none;
}

.panel-admin-class-row-head {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;

  border-top: 1px solid #645166;

  background: #fbcaff;

  width: 77vw;
  height: 4vh;
}

.panel-admin-class-row-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.3vh;
  font-weight: 700;

  border-left: 1px solid #645166;

  width: 100%;
  height: 100%;
}

.panel-admin-class-row-base {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  overflow-x: hidden;
  overflow-y: auto;

  border: 1px solid #645166;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

  background: #fbcaff;

  width: 77vw;
  height: 88%;
}

.panel-admin-class-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  border-bottom: 1px solid #645166;

  width: 77vw;
  height: fit-content;
}

.panel-admin-class-row div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;

  font-family: "B Nazanin";
  font-size: 2vh;

  border-left: 1px solid #645166;

  width: 100%;
  height: 100%;
}

.panel-admin-class-row .actions {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-admin-class-row .actions a,
.panel-admin-class-row .actions button {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-decoration: none;

  text-align: center;

  margin: 0.5vh;
  padding: 0.5vh;

  transition: all 0.5s;
}

.panel-admin-class-row .actions a svg,
.panel-admin-class-row .actions button svg {
  margin-left: 0.5vh;
}

.panel-admin-class-row .actions a:hover,
.panel-admin-class-row .actions button:hover {
  border: 1px solid #000000;

  cursor: pointer;

  background: #ffffff;

  transition: all 0.5s;
}

.panel-admin-class-row .actions .delete {
  border: 1px solid #ff0000;
  border-radius: 30px;

  color: #000;

  background: #ff9393;
}

.panel-admin-class-row .actions .delete path {
  fill: #580000;
}

.panel-admin-class-row .actions .enter {
  border: 1px solid #2b9900;
  border-radius: 30px;

  color: #000;

  background: #a9ff93;
}

.panel-admin-class-row .actions .enter path {
  fill: #0f5800;
}

.panel-admin-class-row .actions .copy {
  border: 1px solid #000000;
  border-radius: 30px;

  color: #000;

  background: #ffffff;
}

.panel-admin-class-row .actions .copy:hover {
  background: #000;
  color: #fff;
  border: 1px solid #fff;
}

.panel-admin-class-row .actions .copy:hover path {
  fill: #fff;
}

.panel-admin-class-row .actions .copy path {
  fill: #000000;
}

.panel-admin-class-row .actions .archive {
  border: 1px solid #009fff;
  border-radius: 30px;

  color: #000;

  background: #70dbff;
}

.panel-admin-class-row .actions .archive path {
  fill: #004b65;
}

.panel-admin-class-row .actions .edit {
  border: 1px solid #ffdb00;
  border-radius: 30px;

  color: #000;

  background: #ffeb70;
}

.panel-admin-class-row .actions .edit path {
  fill: #544800;
}

.panel-admin-class-row .actions .roll-call {
  border: 1px solid #7f004e;
  border-radius: 30px;

  color: #000;

  background: #feb9ff;
}

.panel-admin-class-row .actions .roll-call path {
  fill: #61004e;
}

.panel-admin-class-row .number {
  font-size: 3vh;
  font-family: "B Nazanin", sans-serif;
  font-weight: 700;
}

.panel-admin-class-row .duration {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-admin-class-row .duration .time {
  font-size: 3vh;
  margin-left: 0.5vh;
}

.panel-admin-class-row .status .class-status {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
}

.panel-admin-class-row .status .timer-status {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 0.8vh;

  text-align: center;
  direction: rtl;
}

.panel-admin-class-row .status .timer-status .time {
  color: #cd0000;
  font-size: 0.9vh;
}

.panel-admin-class-row .time {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-align: center;
}

.panel-admin-class-row .time .day {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 2.3vh;
}

.panel-admin-class-row .time .hour {
  font-weight: 700;
  font-size: 2vh;
}

.panel-admin-class-row .time .date {
  position: absolute;
  bottom: 0;

  font-weight: 700;
  font-size: 1.3vh;
}

.panel-admin-manage-class-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  height: 100%;
}

.datepicker-plot-area {
  font-family: "Vazirmatn", sans-serif;
}

.panel-admin-class-information {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-content: space-around;
  justify-content: center;
  align-items: center;

  color: #fff;
  font-family: "Vazirmatn", sans-serif;

  width: 100%;
}

.panel-admin-class-information div {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;

  direction: rtl;

  padding: 2vh;
}

.panel-admin-class-information div label {
  margin-left: 0.5vh;
}

.panel-admin-class-information div input,
.panel-admin-class-information div select {
  font-family: "Vazirmatn", sans-serif;
  text-align: center;
  direction: rtl;

  background: #fde2ff;
  border-radius: 30px;

  padding: 0.5vh;
}

.panel-admin-class-information div #loop-day-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;

  padding: 0;

  width: 30vh;
}

.panel-admin-class-information div #loop-day-container label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;

  width: 13vh;
  margin: 0.3vh;
}

.panel-admin-tables {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;

  width: 100%;
  height: 60%;
}

.panel-admin-students-table,
.panel-admin-instructors-table {
  position: relative;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  height: 100%;
  width: 40%;
}

.panel-admin-students-table::-webkit-scrollbar,
.panel-admin-instructors-table::-webkit-scrollbar {
  width: 5px;
}

.panel-admin-students-table::-webkit-scrollbar-thumb,
.panel-admin-instructors-table::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-admin-students-table-head,
.panel-admin-instructors-table-head {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;

  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border: 1px solid #fde2ff;

  width: 97.5%;
  height: 4vh;

  background: #fde2ff;
}

.panel-admin-students-table-head .count,
.panel-admin-instructors-table-head .count {
  margin-right: 1.5vh;
  font-family: "B Nazanin", sans-serif;

  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
}

.panel-admin-students-table-head .title,
.panel-admin-instructors-table-head .title {
  font-family: "Noto Nastaliq Urdu", serif;

  margin-top: 0.5vh;
  margin-bottom: 0.5vh;
}

.panel-admin-students-table-head .title {
  text-align: center;
  width: 85vw;
}

.panel-admin-students-table-head button,
.panel-admin-instructors-table-head button {
  padding: 0;
  margin: 0;
  border: unset;
  background: unset;

  margin-top: 0.5vh;
  margin-bottom: 0.5vh;

  margin-left: 1.3vh;
}

.panel-admin-students-table-head-row,
.panel-admin-instructors-table-head-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  text-align: center;
  color: #fff;

  border: 0.5px solid #fde2ff;

  width: 97.5%;
  height: 7%;
}

.panel-admin-students-table-head-row span,
.panel-admin-instructors-table-head-row span {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 0.5vh;
  margin-bottom: 0.5vh;

  width: 100%;
  height: 100%;

  border-left: 0.5px solid #fde2ff;
  border-right: 0.5px solid #fde2ff;
  border-bottom: 0.5px solid #fde2ff;
}

.panel-admin-students-table-row,
.panel-admin-instructors-table-row {
  display: flex;
  flex-direction: row-reverse;
  align-content: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;

  width: 97.5%;
  height: 4vh;
}

.panel-admin-students-table-row div,
.panel-admin-students-table-row span,
.panel-admin-instructors-table-row div,
.panel-admin-instructors-table-row span {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "B Nazanin", sans-serif;
  font-size: 1.3vh;
  text-align: center;
  color: #fff;

  margin-top: 0.5vh;
  margin-bottom: 0.5vh;

  border-left: 0.5px solid #fde2ff;
  border-right: 0.5px solid #fde2ff;
  border-bottom: 0.5px solid #fde2ff;
}

.panel-admin-students-table-row .id,
.panel-admin-instructors-table-row .id {
  font-size: 2vh;
}

.panel-admin-students-table-row button,
.panel-admin-instructors-table-row button {
  border: 1px solid #ff0000;
  border-radius: 30px;
  color: #000;
  background: #ff9393;

  width: 6vh;
  height: 3vh;
}

.panel-admin-manage-class-submit {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;

  background: #fde2ff;
  border-radius: 30px;
  color: #000;

  padding: 1vh;
  padding-left: 2vh;
  padding-right: 3vh;

  transition: all 0.5s;
}

.panel-admin-manage-class-submit:hover {
  background: #4c0052;
  color: #fff;
  transition: all 0.5s;
}

.panel-admin-add-student,
.panel-admin-add-instructor,
.panel-admin-class-tables .add-class {
  width: 35vh;
  height: 15vh;

  background: #fff;
  border-radius: 30px;
  border: 1px solid #000;

  font-family: "Vazirmatn", sans-serif;
  text-align: center;
  color: #000;

  position: absolute;
  top: 1vh;

  direction: rtl;

  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;
}

.panel-admin-add-student input,
.panel-admin-add-instructor input,
.panel-admin-class-tables .add-class input {
  font-family: "B Nazanin", sans-serif;
  text-align: center;
  color: #000;
  text-align: center;
}

.panel-admin-add-student button,
.panel-admin-add-instructor button,
.panel-admin-class-tables .add-class button {
  background: #fff;
  border-radius: 30px;
  border: 1px solid #000;
  font-size: 1.5vh;
  transition: all 0.5s;
}

.panel-admin-add-student button:hover,
.panel-admin-add-instructor button:hover,
.panel-admin-class-tables .add-class button:hover {
  background: #000;
  border-radius: 30px;
  border: 1px solid #fff;
  color: #fff;
  transition: all 0.5s;
}

.panel-admin-archive-add-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  font-family: "Vazirmatn", sans-serif;
  margin-top: 10vh;
  padding: 2vh 3vh;
  width: 75vw;
  background: linear-gradient(135deg, #fbcaff 0%, #ffdee9 100%);
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  direction: rtl;
}

.panel-admin-archive-add-row .title,
.panel-admin-archive-add-row .texts,
.panel-admin-archive-add-row .files,
.panel-admin-archive-add-row .foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 2vh;
}

.panel-admin-archive-add-row .title input,
.panel-admin-archive-add-row .texts textarea {
  background: #2a0845;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  color: #fff;
  border: 1px solid #fbcaff;
  border-radius: 15px;
  padding: 1vh;
  font-size: 1em;
  overflow-y: hidden;
  overflow-x: hidden;
  transition: background 0.3s, border-color 0.3s;
}

.panel-admin-archive-add-row .title input:focus,
.panel-admin-archive-add-row .texts textarea:focus {
  background: #3a0f60;
  border-color: #e6baff;
  outline: none;
}

.panel-admin-archive-add-row .foot button {
  background: #2a0845;
  color: #fff;
  border: none;
  border-radius: 15px;
  padding: 1vh 2vh;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.panel-admin-archive-add-row .foot button:hover {
  background: #3a0f60;
  transform: translateY(-2px);
}

.panel-admin-archive-add-row .foot button:active {
  background: #200634;
  transform: translateY(1px);
}

.panel-user-archive-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 1vh;
  margin-bottom: 1vh;
  padding: 2vh 3vh;
  width: 75vw;

  background: linear-gradient(135deg, #fbcaff 0%, #ffdee9 100%);
  border-radius: 15px;
}

.panel-user-archive-row .title {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 2.5vh;

  border-bottom: 1px solid #2a0845;

  text-align: right;

  width: 100%;
}

.panel-user-archive-row .text {
  padding-top: 1vh;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1.5vh;

  text-align: right;

  width: 100%;
}

.panel-user-archive-row .files {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-bottom: 1vh;
}

.panel-user-archive-row .files a {
  display: flex;
  align-items: center;
  background: #2a084594;
  border: 1px solid #2a0845;
  border-radius: 15px;
  padding: 1vh;
  margin: 0.5vh;
  width: 20vh;
  text-decoration: none;
  color: #000;
  transition: background 0.3s, transform 0.3s;
}

.panel-user-archive-row .files a:hover {
  background: #2a0845;
  color: #fff;
  transform: scale(1.05);
}

.panel-user-archive-row .files a svg {
  margin-right: 1vh;
  color: #fff;
}

.panel-user-archive-row .files a div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panel-user-archive-row .files a div .name {
  font-weight: 700;
  font-size: 1.5vh;
}

.panel-user-archive-row .files a div .size {
  font-weight: 300;
  font-size: 1vh;
}

.panel-user-archive-row .foot {
  width: 100%;

  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  border-top: 1px solid #2a0845;
}

.panel-user-archive-row .foot span,
.panel-user-archive-row .foot a {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1vh;

  margin-right: 1vh;
}

.panel-user-archive-row .foot .author {
  font-weight: 700;

  font-size: 1.3vh;
}

.panel-user-archive-row .foot .date {
  font-weight: 500;

  font-size: 1.15vh;
}

.panel-exams-table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border-radius: 30px;

  margin-top: 8vh;

  height: 88%;
  width: 98%;
}

.panel-exams-head {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  height: 8vh;
}

.panel-exams-head .count {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  direction: rtl;

  width: 13vh;
  height: 100%;

  margin-right: 0.5vh;
}

.panel-exams-head .count .title {
  font-family: "El Messiri", sans-serif;
  font-weight: 700;

  height: 100%;
  width: 100%;

  font-size: 1.5vh;
}

.panel-exams-head .count .number {
  font-family: "B Nazanin", sans-serif;
  margin-right: 0.5vh;
}

.panel-exams-head .title {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  height: 100%;
  width: 50%;
  text-align: center;
  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 1.7vh;
}

.panel-exams-head .buttons {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;

  width: 13vh;
  height: 100%;

  margin-left: 1.5vh;
}

.panel-exams-head .buttons a {
  display: flex;
  font-family: "B Nazanin", serif;
  font-size: 2vh;

  text-decoration: none;
  color: #006b00;

  transition: all 0.5s;
}

.panel-exams-head .buttons a:hover path,
.panel-exams-head .buttons a:hover circle {
  color: #000000;
  fill: #000000;

  transition: all 0.5s;
}

.panel-exams-head .buttons a:hover {
  color: #000000;

  font-size: 2vh;

  transition: all 0.5s;
}

.panel-exams-head .buttons svg {
  margin-right: 0.5vh;
}

.panel-exams-row-head {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 98%;
  height: 5vh;

  margin: 0.25vh;
  border-top: 1px solid #645166;
  border-bottom: 1px solid #645166;
  border-right: 1px solid #645166;
}

.panel-exams-row-head span {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-align: center;
  font-family: "Vazirmatn", system-ui;
  font-size: 1.5vh;
  font-weight: 700;

  width: 100%;
  height: 100%;

  border-left: 1px solid #645166;
}

.panel-exams-row-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  width: 100%;
  height: 72vh;

  margin-right: 1%;
  margin-left: 1%;
}
.panel-exams-row-base::-webkit-scrollbar {
  width: 0.5vh;
}

.panel-exams-row-base::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-exams-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 98%;
  height: 15vh;

  margin-left: 1%;
  margin-right: 1%;

  border-top: 1px solid #645166;
  border-bottom: 1px solid #645166;
  border-right: 1px solid #645166;
}

.panel-exams-row .column {
  width: 100%;
  height: 100%;

  font-size: 1.5vh;
  font-family: "B Nazanin", sans-serif;
  text-align: center;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  border-left: 1px solid #645166;
}

.panel-exams-row .number {
  font-size: 3vh;
  font-family: "B Nazanin", sans-serif;
  font-weight: 700;
}

.panel-exams-row .time {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
}

.panel-exams-row .time {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-exams-row .time-count {
  font-family: "B Nazanin", sans-serif;
  font-size: 2vh;
  margin-left: 0.5vh;
}

.panel-exams-row .date div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 0.5vh;

  direction: rtl;
}

.panel-exams-row .date div .text {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1vh;
}

.panel-exams-row .name,
.panel-exams-row .status {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
}
.panel-exams-row .actions {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;
}

.panel-exams-row .actions::-webkit-scrollbar {
  width: 0.5vh;
}

.panel-exams-row .actions::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-exams-row .actions a {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.2vh;
  color: #000;

  text-decoration: none;
  transition: all 0.5s;

  border-radius: 20px;
  border: 1px solid #000;

  margin: 0.34vh;
  padding: 0.4vh;
}

.panel-exams-row .actions a svg {
  margin-right: 0.5vh;
}

.panel-exams-row .actions .static {
  background: #e0ffb9;
  border: 1px solid #475b2e;
}

.panel-exams-row .actions .enter-text,
.panel-exams-row .actions .enter {
  background: #92ffbf;
  border: 1px solid #00712f;
}

.panel-exams-row .actions .edit {
  background: #deff92;
  border: 1px solid #707100;
}

.panel-exams-row .actions .delete {
  background: #ff9292;
  border: 1px solid #710000;
}

.panel-exams-row .actions a:hover {
  background: #fff;
  transition: all 0.5;
}

.panel-questions-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  height: 98%;

  margin-top: 1vh;

  border: 3px solid #985fad;
  border-radius: 30px;

  font-family: "Vazirmatn", sans-serif;
}

.panel-questions-head {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;

  background-color: #fbcaff;

  margin-top: 2vh;

  width: 98%;
  height: 10%;

  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  padding: 1vh 2vh;
}

.panel-questions-head .title {
  font-family: "Noto Nastaliq Urdu", serif;
  font-weight: 600;
  font-size: 1.5vh;
}

.panel-questions-head .controls {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;

  width: 100%;
}

.panel-questions-head .search-filter {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;

  margin-right: 2vh;
}

.panel-questions-head .search-filter input {
  min-width: 20vh;

  padding: 0.5vh;

  border-radius: 10px;

  margin-right: 1vh;

  border: 1px solid #ccc;

  font-family: "B Nazanin", sans-serif;
  direction: rtl;
}

.panel-questions-head .search-filter button {
  padding: 0.5vh 1vh;
  border: none;
  background-color: #2a0845;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}

.panel-questions-head .add-question a {
  padding: 0.5vh 1vh;
  background-color: #2a0845;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

.panel-questions-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  width: 98%;
  height: 90%;

  margin-right: 1%;
  margin-left: 1%;

  background-color: #fff;
}

.panel-questions-row::-webkit-scrollbar {
  width: 5px;
}

.panel-questions-row::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-questions-column {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;

  width: 85%;

  border-bottom: 1px solid #000;
  padding: 1vh 0;
}

.questions-number {
  direction: rtl;
  font-family: "B Nazanin", sans-serif;
  font-size: 2.5vh;
  width: 10%;
}

.questions-number span {
  font-weight: bold;
  margin-right: 1vh;
}

.questions-details {
  direction: rtl;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: flex-start;

  width: 100%;
}

.questions-details img {
  max-width: 90vw;
}

.question span {
  font-family: "B Nazanin", sans-serif;
  font-size: 2.51vh;
  margin-bottom: 1vh;
}

.options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  width: 100%;

  margin-top: 1vh;
  margin-bottom: 1vh;
}

.options button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;

  font-family: "B Nazanin", sans-serif;
  font-size: 2vh;
  color: #000;

  background-color: #ffffff;

  border: none;
  border-radius: 5px;

  padding: 0.5vh 1vh;
  margin: 0.5vh 0;

  width: 50%;

  transition: all 0.5s;
}

.options button:hover {
  background-color: #e9e9e9;

  cursor: pointer;
}

.details {
  position: relative;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;

  width: fit-content;

  padding-top: 1vh;
  border-top: 1px solid #000;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.2vh;

  text-align: center;
  direction: ltr;
}

.details span {
  margin: 0 1vh;
}

.details a,
.details button {
  padding: 0.5vh 1vh;

  background-color: #2a0845;

  font-weight: 700;
  color: #fff;

  border-radius: 5px;

  text-decoration: none;
  text-align: center;

  margin: 0 0.5vh;

  transition: all 0.5s;
}

.details a path,
.details button path {
  fill: #000;
}

.details .add {
  border: none;
  color: #000;
  background: #b9ff6f;
}

.details .add path {
  fill: #fff;
}

.details .delete {
  color: #000;
  background: #ff9191;
}

.details .edit {
  color: #000;
  background: #fffb6f;
}

.details a:hover path,
.details button:hover path {
  fill: #fff;
}

.details a:hover,
.details button:hover {
  transition: all 0.5s;
  color: #fff;
  background-color: #000;
}

.details .add:hover circle {
  fill: #fff;
}

.details .add:hover path {
  fill: #000;
}

.details .listOfExams {
  position: absolute;

  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  left: 0%;
  bottom: 5%;

  width: 15vh;
  height: 17.5vh;

  background-color: #fbcaff;
  border-radius: 30px;
}

.details .listOfExams .head-text {
  border-bottom: 1px solid #000;
}

.details .listOfExams button {
  margin-top: 1.5vh;

  width: 85%;

  font-family: "Vazirmatn", sans-serif;
}

.details .listOfExams::-webkit-scrollbar {
  width: 5px;
}

.details .listOfExams::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-questions-foot {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  background-color: #fbcaff;

  margin-bottom: 1.5vh;

  width: 98%;
  height: 10%;

  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

  padding: 1vh 2vh;
}

.pagination a {
  padding: 0.5vh 1vh;
  margin: 0 0.5vh;

  font-family: "B Nazanin", sans-serif;
  text-decoration: none;

  color: #2a0845;

  transition: all 0.2s;

  border: 1px solid #2a0845;
  border-radius: 5px;
}

.pagination a.active {
  background-color: #2a0845;
  color: white;

  transition: all 0.2s;
}

.pagination a:hover {
  background-color: #4b0c63;
  color: white;

  transition: all 0.2s;
}

.panel-filter-base {
  position: absolute;

  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  background: #2a0845;

  width: 40vw;
  height: 80%;

  margin: 0 auto;
  padding: 20px;

  border: 1px solid #ccc;
  border-radius: 5px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.filter-head {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  width: 100%;
}

.filter-head button {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  border: 1px solid #ff0000;
  border-radius: 30px;

  width: 4vh;
  height: 4vh;

  background: #ffc9c9;

  transition: all 0.5s;
}

.filter-head button:hover {
  background: #ffffff;
  border: 1px solid #000;

  transition: all 0.5s;
}

.filter-group {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;

  direction: rtl;

  width: 100%;

  margin-top: 2vh;
}

.filter-group label {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-bottom: 1vh;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
  color: #fff;
}

.filter-group select,
.filter-group input {
  background: #fdeaff;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1.5vh;

  width: 100%;
  padding: 1vh;

  border: 1px solid #000;
  border-radius: 15px;
}

.filter-group button {
  background-color: #28a745;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
  color: #fff;

  border: none;

  padding: 1.5vh;
  border-radius: 20px;

  cursor: pointer;
}
.filter-group button:hover {
  background-color: #218838;
}
.chapter-navigation {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-evenly;

  font-family: "B Nazanin", sans-serif;
  font-size: 2vh;
  text-align: center;

  color: #fff;

  margin-top: 4.5vh;
}
.chapter-navigation button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.chapter-navigation button:hover {
  background-color: #0056b3;
}

#panel-question-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 75vw;

  margin-top: 8vh;
  padding: 1vh;

  border: 1px solid #ccc;
  border-radius: 10px;

  background-color: #fbcaff;
  box-shadow: 0px 20px 20px #583266;
}

#panel-question-form button {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  font-size: 1.5vh;
  color: #fff;

  border: 3px solid #2a0845;
  border-radius: 10px;

  background: #2a0845;

  margin: 0.7vh;
  padding: 0.5vh;

  transition: all 0.5s;
}

#panel-question-form button:hover {
  transition: all 0.5s;

  background: #000000;
}

.panel-question-form {
  width: 95%;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin: 2vh;
}

.panel-question-form label {
  font-family: "B Nazanin";
  direction: rtl;

  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
}
.panel-question-form-selections {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  flex-basis: 100%;
  flex-grow: 1;
  margin: 5px;

  box-sizing: border-box;
}

.panel-question-form-selections .panel-question-form {
  width: fit-content;
}

.panel-question-form textarea,
.panel-question-form select,
.panel-question-form input[type="file"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;

  font-family: Vazirmatn, sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 2vh;
  margin-bottom: 10px;
  transition: border-color 0.3s ease;
}

.panel-question-form input[type="file"] {
  margin-bottom: 20px;
}

.panel-question-form textarea:focus,
.panel-question-form select:focus,
.panel-question-form input[type="file"]:focus {
  border-color: #4caf50;
}

.panel-question-form select {
  margin: 1.7vh;
  padding-left: 1vh;
  padding-right: 1vh;

  font-family: "B Nazanin";
  text-align: center;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath fill='%23000000' d='M5 5L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px auto;
}

.panel-question-form button[type="button"] {
  background-color: #4caf50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.panel-question-form button[type="button"]:hover {
  background-color: #45a049;
}

.panel-question-math-toolbar {
  width: 80%;
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 1.5vh;
}

.panel-question-toolbar-buttons {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-question-toolbar-preview {
  position: relative;

  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 5vh;

  width: 41vh;
  height: 21vh;

  background-color: #fbcaff;

  border: none;
  border-radius: 15px;
}

.panel-question-toolbar-preview .title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  font-weight: bold;
  font-size: 1.5vh;

  width: 100%;
  height: 3vh;
}

.panel-question-toolbar-preview .title button {
  right: 1vh;

  border: none;
  background: none;

  position: absolute;
}

.panel-question-toolbar-preview .title button g {
  fill: red;
}

.panel-question-toolbar-preview .preview {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 100%;
  height: 12vh;
}

.panel-question-toolbar-preview .preview textarea {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  text-align: center;

  width: 98%;
  height: 80%;
}

.panel-question-toolbar-preview .preview #mathjax-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  font-family: "B Nazanin";

  text-align: center;

  margin-top: 1vh;

  width: 100%;
}

.panel-question-toolbar-preview .actions {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;

  width: 100%;
  height: 5vh;
}

.panel-question-toolbar-preview .actions button {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn";
  font-size: 1.5vh;

  color: #fff;

  border: 3px solid #2a0845;
  border-radius: 10px;
  background: #2a0845;

  margin: 0.7vh;
  padding: 0.5vh;

  transition: all 0.5s;
}

.panel-question-toolbar-preview .actions button svg {
  margin-right: 0.5vh;
}

.panel-question-toolbar-preview .actions button path {
  fill: #fff;
}

.panel-question-toolbar-preview .actions button:hover {
  transition: all 0.5s;

  background-color: #4a2a65;
  color: #ffc107;
  border-color: #ffc107;
}

.panel-question-toolbar-preview .actions button:hover path {
  transition: all 0.5s;

  fill: #ffc107;
}

.panel-question-toolbar-buttons button:hover {
  background-color: #005f6b;
}

.panel-question-toolbar-buttons button {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border: none;

  font-family: "Vazirmatn";
  font-size: 1vh;
  color: #000;

  padding: 1vh;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  margin: 1vh;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.panel-question-toolbar-buttons button:hover {
  background-color: #005f6b;
}

.panel-admin-exam-settings {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 80%;
}

.panel-admin-exam-settings div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-size: 1.7vh;
  color: #fff;
  direction: rtl;

  width: max-content;

  margin: 2vh;
}

.panel-admin-exam-settings div input,
.panel-admin-exam-settings div select {
  font-family: "Vazirmatn", sans-serif;
  text-align: center;
  direction: rtl;
  background: #fde2ff;
  border-radius: 30px;
  padding: 0.5vh;
}

.panel-admin-exam-tables {
  position: relative;

  margin-top: 3.5vh;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
}

.panel-admin-class-tables {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  width: 40vh;
  height: 55vh;
}

.panel-admin-class-tables .title {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 97.5%;
  height: 8.5%;

  border-top-left-radius: 30px;
  border-top-right-radius: 30px;

  border: 1px solid #fde2ff;

  background: #fde2ff;
}

.panel-admin-class-tables .title .count {
  margin-right: 1vh;

  font-family: "B Nazanin";
  font-size: 1.5vh;
}

.panel-admin-class-tables .title .title-name {
  text-align: center;

  font-family: "Noto Nastaliq Urdu", serif;
  font-size: 1.5vh;

  width: 100%;
}

.panel-admin-class-tables .title button {
  padding: 0;
  margin: 0;
  border: unset;
  background: unset;

  margin-left: 1vh;
}

.panel-admin-class-tables .row-head {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 97.5%;
  height: 7%;
}

.panel-admin-class-tables .row-head span {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-family: "Vazirmatn", sans-serif;
  text-align: center;
  color: #fff;
  border: 0.5px solid #fde2ff;
  width: 97.5%;
  height: 100%;
}

.panel-admin-class-tables .rows {
  display: flex;
  flex-direction: column;
  align-content: center;
  flex-wrap: nowrap;

  overflow-y: auto;
  overflow-x: hidden;

  width: 97.5%;
  height: 100%;
}

.panel-admin-class-tables .rows::-webkit-scrollbar {
  width: 5px;
}

.panel-admin-class-tables .rows::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.panel-admin-class-tables .rows .table-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 5vh;
}

.panel-admin-class-tables .rows .table-row span,
.panel-admin-class-tables .rows .table-row div {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "B Nazanin", sans-serif;
  font-size: 1.5vh;
  text-align: center;
  color: #fff;

  margin-top: 0.5vh;
  margin-bottom: 0.5vh;

  border-left: 0.5px solid #fde2ff;
  border-right: 0.5px solid #fde2ff;
  border-bottom: 0.5px solid #fde2ff;
}

.panel-admin-class-tables .rows .table-row button {
  border: 1px solid #ff0000;
  border-radius: 30px;

  color: #000;

  background: #ff9393;

  width: 6vh;
  height: 3vh;
}

.panel-admin-exam-subtn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;
  color: #000;

  background: #fde2ff;

  border-radius: 30px;

  margin-top: 2vh;

  padding: 1vh;
  padding-left: 2vh;
  padding-right: 3vh;

  transition: all 0.5s;
}

.panel-admin-exam-subtn:hover {
  background: #4c0052;
  color: #fff;
  transition: all 0.5s;
}

.panel-exams-zone-base {
  background: #fff;

  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 93%;
}

.information-zone,
.website-zone {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  direction: rtl;

  background: #efdbff;

  width: fit-content;
  height: 100%;
}

.information-zone {
  border-left: 1.5px solid #2a0845;
}

.information-zone div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-align: center;

  margin-top: 1vh;
}

.information-zone div label {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 300;
  font-size: 1.5vh;

  width: 100%;
}

.information-zone div span {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";

  font-weight: 700;
  font-size: 1.5vh;

  width: 15vh;
}

.exams-zone {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  direction: rtl;

  width: 100%;
  height: 100%;
}

.exams-zone::-webkit-scrollbar {
  width: 5px;
}

.exams-zone::-webkit-scrollbar-thumb {
  background: #c40fca;
  border-radius: 50px;
}

.website-zone {
  border-right: 1.5px solid #2a0845;
}

.website-zone a {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 100%;
}

.website-zone a img {
  margin: 1vh;
  width: 12.5vh;
}

.website-zone #version {
  margin-top: 1vh;

  color: #979797;

  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";

  font-weight: 700;
  font-size: 0.8vh;
}

.website-zone #copyright {
  color: #979797;

  direction: ltr;

  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";

  font-weight: 700;
  font-size: 0.9vh;
}

.website-zone .logo-base,
.website-zone .texts-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-exams-buttons-base {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: row;
  flex-wrap: nowrap;

  border-top: 1.5px solid #2a0845;

  background: #efdbff;

  width: 100%;
  height: 7%;
}

.panel-exams-buttons-base button {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-weight: 700;
  font-size: 1.5vh;

  background-color: #fff;
  border: #000 solid 1px;
  border-radius: 30px;

  margin: 1vh;
  padding: 1vh;

  transition: all 0.5s;
}

.panel-exams-buttons-base button:hover {
  background-color: #2a0845;

  border: #fff solid 1px;
  color: #fff;

  transition: all 0.5s;
}

.exams-zone .exam-title {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: flex-start;

  margin-top: 0.5vh;

  width: 90%;
  height: 3.5vh;
}

.exams-zone .exam-title span {
  font-family: "B Nazanin", serif;

  width: fit-content;
  height: 100%;
  border-bottom: 1.5px solid #000;
}

.exams-zone .exam-row {
  margin-top: 4vh;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;

  width: 100%;
  height: fit-content;
}

.panel-admin-roll-call-base {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  border-radius: 30px;
  margin-top: 8vh;

  height: 88%;
  width: 98%;
}

.panel-admin-roll-call-base .head {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  background-color: #fbcaff;

  border-top-left-radius: 30px;
  border-top-right-radius: 30px;

  padding: 1vh;

  width: 96%;
  height: fit-content;
}

.panel-admin-roll-call-base .head .title {
  font-family: "Noto Nastaliq Urdu", serif;
}

.panel-admin-roll-call-base .head .class-details {
  direction: rtl;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: flex-start;
  justify-content: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;

  width: 100%;
}

.panel-admin-roll-call-base .head .class-details-base {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;

  font-feature-settings: "ss01";

  font-weight: 500;

  width: 100%;
}

.panel-admin-roll-call-base .rollcall-dates {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: center;

  border: 1px solid #fbcaff;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

  overflow-x: hidden;
  overflow-y: auto;

  padding: 1vh;

  width: 96%;
  height: 70vh;
}

.panel-admin-roll-call-base .rollcall-dates .row-button {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background-color: #fbcaff;
  border-radius: 1vh;

  color: #000;
  text-decoration: none;

  padding: 1vh;
  margin: 1vh;

  transition: all 0.5s;
}

.panel-admin-roll-call-base .rollcall-dates .row-button span {
  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";

  font-weight: 700;
  font-size: 1.7vh;
}

.panel-admin-roll-call-base .rollcall-dates .row-button:hover {
  cursor: pointer;

  background-color: #ffffff;
  border-radius: 1vh;

  transition: all 0.5s;
}

.panel-admin-roll-call-base .rollcall-dates .row-button .date {
  font-weight: 500;
  font-size: 1.4vh;
}

.panel-print-rollcall {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

  background: #fff;

  width: 100vw;
  height: 100vh;
}

.panel-print-rollcall .information {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";

  border: 2px solid #000;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;

  margin: 1vh;
  height: 10vh;
  width: 95vw;
}

.panel-print-rollcall .information .title {
  font-weight: 700;
  font-size: 2vh;
}

.panel-print-rollcall .information .all-info {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;

  font-size: 1.4vh;

  width: 100vw;
}

.panel-print-rollcall .information .all-info .name {
  font-weight: 700;
}

.panel-print-rollcall .information .all-info .value {
  margin-right: 0.5vh;
}

.panel-print-rollcall .general-data {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;

  width: 95vw;
}

.panel-print-rollcall .general-data .present,
.panel-print-rollcall .general-data .absent {
  width: 48vw;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.panel-print-rollcall .general-data .present .head,
.panel-print-rollcall .general-data .absent .head {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 95%;
}

.panel-print-rollcall .general-data .present .head {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;

  border: 2px solid #005700;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.panel-print-rollcall .general-data .absent .head {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;

  border: 2px solid #970000;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.panel-print-rollcall .general-data .present .body,
.panel-print-rollcall .general-data .absent .body {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: column;

  width: 95%;
}

.panel-print-rollcall .general-data .present .body {
  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-weight: 500;
  font-size: 1.2vh;

  border-right: 2px solid #005700;
  border-left: 2px solid #005700;
  border-bottom: 2px solid #005700;

  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.panel-print-rollcall .general-data .absent .body {
  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-weight: 500;
  font-size: 1.2vh;

  border-right: 2px solid #970000;
  border-left: 2px solid #970000;
  border-bottom: 2px solid #970000;

  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.panel-print-rollcall .general-data .present .body .row-head,
.panel-print-rollcall .general-data .absent .body .row-head {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;

  border-bottom: 1px solid #000;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  font-weight: 700;

  width: 100%;
}

.panel-print-rollcall .general-data .present .body .row-head span,
.panel-print-rollcall .general-data .absent .body .row-head span,
.panel-print-rollcall .general-data .present .body .main-row span,
.panel-print-rollcall .general-data .absent .body .main-row span,
.panel-print-rollcall .report .row-head span,
.panel-print-rollcall .report .row-report span {
  text-align: center;
  width: 100%;
}

.panel-print-rollcall .general-data .present .body .main-row,
.panel-print-rollcall .general-data .absent .body .main-row {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: center;

  border-bottom: 1px solid #000;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;

  font-weight: 500;

  margin-top: 0.5vh;
  margin-bottom: 0.5vh;

  width: 100%;
}

.panel-print-rollcall .report {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-evenly;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";

  border: 2px solid #000;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;

  margin: 1vh;
  width: 95vw;
}

.panel-print-rollcall .report .row-head,
.panel-print-rollcall .report .row-report {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100%;
}

.panel-print-rollcall .report .row-head span,
.panel-print-rollcall .report .row-report span {
  font-size: 1.2vh;
}

.panel-print-rollcall .report .row-head {
  font-weight: 700;
  border-bottom: #000 1px solid;
}

.panel-user-page {
  margin-top: 6vh;
}

.panel-user-add-excel {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
}

.panel-user-add-excel .add-file-excel {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.5vh;

  background-color: #fbcaff;
  border: #985fad solid 2px;
  border-radius: 15px;
  color: #000;

  padding: 1vh;

  display: flex;

  transition: all 0.5s;
}

.panel-user-add-excel .add-file-excel:hover {
  cursor: pointer;

  background-color: #fff;
  border: #000 solid 2px;
  border-radius: 15px;

  color: #000;

  transition: all 0.5s;
}

.panel-user-add-excel .upload-excel-file-btn {
  margin-top: 1vh;

  display: flex;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1.5vh;

  background: #beffbe;
  border: #77ad5f solid 2px;
  border-radius: 10px;

  padding: 0.5vh;
}

.panel-user-add-excel table {
  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1.3vh;

  border: #985fad solid 2px;

  text-align: center;
}

.panel-user-add-excel .table > :not(caption) > * > * {
  background-color: #fbcaff;
}

.panel-user-add-excel .excle-submit-btn {
  margin-top: 1vh;
  display: flex;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 1.5vh;
  background: #beffbe;
  border: #77ad5f solid 2px;
  border-radius: 10px;
  padding: 0.5vh;
}

.pre-reg-result-zone {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  width: 100vw;
  height: 40vh;
}

.pre-reg-result-area {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  text-align: center;

  padding: 1vh;
}

.pre-reg-result-area .pre-reg-result-text {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  margin-top: 2vh;
  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
}

.pre-reg-result-area .pre-reg-result-text .result {
  margin-top: 1vh;
  color: #0056b3;
}

.pre-reg-result-area .pre-reg-result-btn a {
  margin-top: 1vh;
  display: flex;

  text-decoration: none;
  color: #fff;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 300;
  font-size: 1.5vh;

  background: #334530;
  border: #000000 solid 2px;
  border-radius: 10px;

  padding: 0.5vh;
}

.panel-educational-videos {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  flex-wrap: nowrap;

  width: 100%;
  height: 100%;
}

.panel-educational-videos .grades,
.panel-educational-videos .lessons {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: center;

  text-align: center;

  background: #fbcaff;
  border-radius: 30px;

  width: 50vw;
  height: 75vh;
}

.panel-educational-videos .grades .title,
.panel-educational-videos .lessons .title {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  font-family: "Vazirmatn", sans-serif;
  font-weight: 500;
  font-size: 2vh;

  width: 100%;
  height: 20%;

  direction: rtl;
}

.panel-educational-videos .grades .buttons,
.panel-educational-videos .lessons .buttons {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: space-evenly;
  align-items: center;

  overflow-x: hidden;
  overflow-y: auto;

  width: 100%;
  height: 80%;
}

.panel-educational-videos .grades button,
.panel-educational-videos .lessons button {
  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-weight: 500;
  font-size: 2vh;

  color: #fff;

  border: 3px solid #2a0845;
  border-radius: 10px;
  background: #2a0845;

  width: 9vw;
  height: 12vh;

  margin: 1vh;

  transition: all 0.5s;
}

.panel-educational-videos .grades button:hover,
.panel-educational-videos .lessons button:hover {
  color: #000;
  background: #fbcaff;

  transition: all 0.5s;
}

.panel-educational-videos .grades {
  height: 30vh;
}

.panel-educational-videos .video-lists {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
}

.panel-educational-videos .video-lists #uploadForm {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: center;
  align-items: center;

  background: #fbcaff;
  border-radius: 30px;

  width: 100%;
  height: 15vh;

  margin: 1vh;
}

.panel-educational-videos .video-lists #uploadForm button {
  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-weight: 500;
  font-size: 1.5vh;
  color: #fff;
  border: 3px solid #2a0845;
  border-radius: 10px;
  background: #2a0845;
  width: 14vw;
  height: 4vh;
  margin: 1vh;
  transition: all 0.5s;
}

.panel-educational-videos .video-lists #uploadForm input {
  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-weight: 500;
  font-size: 1.5vh;

  color: #fff;
  border: 3px solid #2a0845;
  border-radius: 10px;
  background: #2a0845;

  text-align: center;
  direction: rtl;

  width: 20vw;
  height: 4vh;
  margin: 1vh;
}

.panel-educational-videos .video-lists .list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;

  overflow-y: auto;
  overflow-x: hidden;

  height: 100%;
  width: 100%;
}

.panel-educational-videos .video-lists .video-row {
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  text-decoration: none;

  font-family: "Vazirmatn", sans-serif;
  font-feature-settings: "ss01";
  font-weight: 500;
  font-size: 1.5vh;

  color: #000;

  border: 3px solid #fbcaff;
  border-radius: 10px;
  background: #fbcaff;

  width: fit-content;
  height: 4vh;
  margin: 1vh;

  transition: all 0.5s;
}

.panel-educational-videos .video-lists .video-row:hover {
  color: #004b65;

  transition: all 0.5s;
}

@media only screen and (max-width: 980px) {
  .header .logo .texts {
    display: none;
  }
  .header .login .student-login {
    flex-direction: column;
  }
  .header .login .student-login-image,
  .header .login .student-login-texts {
    margin: 0;
  }
  .dark-btn:hover:after {
    content: "";
  }
  .light-btn:hover:after {
    content: "";
  }
  .base-carousel {
    padding: 0;
  }
  .notifications-base {
    margin-top: 50px;
  }
  .slogan-text {
    width: 60vw;
  }
  .sliders {
    flex-direction: column;
  }
  .slide img {
    height: 99%;
  }
  .top-slider {
    height: unset;
    width: 97vw;
  }
  .slide {
    height: unset;
  }
  .top-slider .slider-container {
    height: fit-content;
    width: 97vw;
  }
  .poster {
    width: fit-content;
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
  .notifications-zone {
    width: 100%;
  }
  .pre-register-base {
    flex-direction: column;
  }
  .pre-register-term {
    width: 65vw;
    margin-left: 0;
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
  .pre-regsiter-qrcode {
    width: 65vw;
    margin-left: 0;
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
  .pre-register-description {
    margin-right: 0;
    margin-top: 2vh;
    margin-bottom: 2vh;
    width: 65vw;
  }
  .conference-base {
    border-radius: 70px;
  }
  .conference-row {
    flex-direction: column;
  }
  .conference-row .base-video video {
    width: 70vw;
  }
  .card-text-school-name {
    font-size: 2vh;
  }
  .base-video {
    padding: 10px;
  }
  .card-body {
    width: 100%;
    height: 100%;
  }
  .gallery-base {
    flex-direction: column;
    align-items: center;
  }
  .gallery-information {
    width: 60vw;
  }
  .gallery-image {
    height: 12rem;
  }
  .gallery-description {
    width: 80vw;
  }
  .gallery-photos {
    width: 100%;
  }
  .gallery-details {
    width: 100%;
  }
  .gallery-details {
    margin-top: 30px;
    display: flex;
    align-items: center;
  }
  .gallery-subject {
    width: 58vw;
  }
  .conntact-us-base {
    flex-direction: column-reverse;
    width: 75vw;

    text-align: center;
  }
  .conntact-us-base .icon img {
    width: 25vh;
  }
  .conntact-us-base .text {
    height: unset;
    width: 70vw;
  }
  .conntact-us-base .text span {
    margin-top: 2vh;
    margin-bottom: 2vh;
  }
  .notfound-avatar {
    width: 200px;
  }
  .notfound-txt {
    font-size: 20px;
  }
  .edu-services-base {
    flex-direction: column;
  }
  .edu-services-row {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .pre-reg-register-main-base {
    min-height: 60vh;
  }
  .pre-reg-title-subtitle {
    width: 85vw;
  }
  .pre-reg-register-base {
    width: 85vw;
  }
  .pre-reg-result {
    width: 85vw;
  }
  .pre-reg-student-dob {
    justify-content: center;
  }
  .pre-reg-main-form label {
    text-align: center;
    width: max-content;
  }
  .pre-reg-main-student-form,
  .pre-reg-main-family-form,
  .pre-reg-main-other-form {
    align-items: center;
    width: 75vw;
  }
  .pre-reg-result-area {
    width: 75%;
  }
  .pre-reg-main-student-form-body {
    flex-direction: column;
    align-content: center;
  }
  .pre-reg-main-fild-form {
    flex-direction: column;
  }
  .pre-reg-main-form input#day,
  .pre-reg-main-form input#month,
  .pre-reg-main-form input#year {
    text-align: center;
    width: 100px;
    margin-left: 0px;
  }
  .pre-register-track-input,
  .pre-register-track-result {
    width: 55vw;
  }
  .pre-register-track-field {
    width: 35vw;
  }
  .teacher-base,
  .deputy-base,
  .high-base {
    width: 55vw;
  }
  .login-card {
    width: 85vw;
  }
  .login-footer-btns {
    height: unset;
  }
  .login-main-part {
    height: 100vh;
  }
  .login-card-base {
    width: 78vw;
  }
  .login-faild-photo {
    margin: 0;
  }
  .login-main-falid {
    flex-direction: column;
  }
  form.login-main-form {
    width: 72vw;
  }
  .login-form-username .form-control,
  .login-form-password .form-control {
    width: 52vw;
  }
  .panel-pre-register-row,
  .panel-pre-register-head-row,
  .panel-pre-register-filter {
    flex-direction: column;
  }
  .panel-pre-register-status {
    width: 80%;
  }
  .panel-main-base {
    align-items: center;
    flex-direction: column;
    height: 100%;
  }
  .panel-user-bar {
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: absolute;
    margin: 0;
  }
  .panel-mb-btn {
    display: block;
    position: absolute;
    left: 3%;
    top: 3%;
  }
  .panel-user-zone {
    width: 100%;
    height: 100%;
  }
  .panel-user-base {
    border-radius: 20px;
    display: flex;
    width: 98%;
    height: 98.5%;
  }
  .panel-user-boss-mainpage {
    justify-content: space-between;
  }
  .panel-user-boss-mainpage-row {
    max-width: 50%;
  }
  .panel-mb-btn button {
    background-color: #fbcaff;
    border: #985fad solid 2px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px #583266;
  }
  .panel-user-manage-role-base,
  .panel-user-manage-users-table {
    width: 100%;
  }
  .panel-user-check {
    flex-direction: column;
    justify-content: space-between;
  }
  .panel-user-manage-role-edit-description {
    display: none;
  }
  .input-group {
    position: static;
  }
  .input-group > .form-control,
  .input-group > .form-floating,
  .input-group > .form-select {
    position: static;
  }
  .teachers-ranks,
  .deputy-ranks,
  .high-ranks {
    width: fit-content;
    margin: 0;
  }
  .teachers-ranks,
  .deputy-ranks,
  .high-ranks {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
  }
  .high-part,
  .teachers-part,
  .deputy-part {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: center;
  }
  .verse-1,
  .verse-2 {
    flex-direction: column;
    margin-top: 1vh;
    margin-bottom: 1vh;
  }
  .poems {
    width: 55vw;
  }
  .panel-admin-class-row-base,
  .panel-admin-class-row-head,
  .panel-admin-class-row-tool,
  .panel-admin-class-row {
    width: 95vw;
    text-align: center;
  }
  .panel-admin-class-row-head span {
    font-size: 1.3vh;
    text-align: center;
  }
  .panel-admin-create-class a span {
    display: none;
  }
  .panel-admin-class-statistics .text {
    font-size: 1.3vh;
  }
  .panel-admin-class-row .actions a {
    font-weight: 700;
    font-size: 1.3vh;
  }
  .panel-admin-class-row .actions a span,
  .panel-admin-class-row .actions button span {
    display: none;
  }
  .panel-admin-class-row .actions a svg,
  .panel-admin-class-row .actions button svg {
    margin: 0;
    padding: 0;
  }

  .panel-admin-class-row .duration {
    flex-direction: column;
  }
  .panel-admin-manage-class-base {
    height: unset;
  }
  .panel-admin-class-information {
    height: unset;
  }
  .panel-admin-tables {
    flex-direction: column;
    height: unset;
  }
  .panel-admin-students-table,
  .panel-admin-instructors-table {
    height: fit-content;
    width: 95%;

    margin-top: 1vh;
    margin-bottom: 1vh;
  }
  .panel-admin-students-table-head,
  .panel-admin-instructors-table-head,
  .panel-admin-students-table-head-row,
  .panel-admin-instructors-table-head-row,
  .panel-admin-students-table-row,
  .panel-admin-instructors-table-row,
  .panel-admin-add-student {
    height: unset;
  }
  .panel-exams-row-head span {
    font-size: 1.5vh;
  }
  .panel-exams-row .time {
    flex-direction: column;
  }
  .panel-exams-row .actions a span {
    display: none;
  }
  .panel-exams-row .actions a svg {
    margin: 0;
  }
  .panel-exams-head .buttons a {
    font-size: 1.7vh;
  }
  .panel-exams-head .buttons svg {
    width: 1.7vh;
  }
  .panel-exams-head .count .title {
    display: none;
  }
  .panel-filter-base {
    margin-top: 10vh;
    width: 90vw;

    border-radius: 30px;
  }
  .panel-exams-zone-base {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
  .information-zone {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: unset;
    width: 100%;

    border: unset;
    border-bottom: 1.5px solid #2a0845;
  }
  .website-zone {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    height: unset;
    width: 100%;

    border: unset;
    border-top: 1.5px solid #2a0845;
  }
  .website-zone a img {
    width: 6vh;
  }
  .website-zone {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .website-zone .logo-base {
    margin-left: 1vh;
  }
  .website-zone .texts-base {
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;

    height: 100%;
    margin-right: 1vh;
  }
  .panel-exams-buttons-base {
    border: none;
  }
  .panel-educational-videos .grades,
  .panel-educational-videos .lessons {
    width: 86vw;
  }
  .panel-educational-videos .grades button,
  .panel-educational-videos .lessons button {
    width: 20vw;
  }
  .panel-educational-videos .video-lists #uploadForm button {
    width: fit-content;
  }
  .panel-educational-videos .video-lists #uploadForm input {
    width: 60vw;
  }
  .panel-educational-videos .video-lists #uploadForm {
    width: 70%;
  }
  .pre-reg-terms {
    margin-top: 4vh;
    flex-direction: column;
  }
  .footer-part .info {
    flex-direction: column;
  }
  .footer-part .info .introduce {
    align-items: center;
    width: 85vw;
  }
  .footer-part .info .connect {
    margin-top: 4vh;
    text-align: right;
    width: 85vw;
  }
  .footer-part .copyright {
    border: unset;
    background: unset;
  }
}

@keyframes shake {
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-15deg);
  }
  30% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-15deg);
  }
}

@keyframes gradient {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 19em 32em;
  }
  100% {
    background-position: 0.1em 0.1em;
  }
}

@keyframes gentleShake {
  0%,
  100% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(25deg);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-175%);
  }
  100% {
    transform: translateX(0);
  }
}