:root {
  --app-widt: 115vw;
}

body {
  /* -moz-transform: scale(0.85);
  -moz-transform-origin: top !important; */
  zoom: 0.8;
  background: #1b1a23;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.app-container {
  -moz-transform: scale(0.85);
  -moz-transform-origin: top !important;
}

.menue {
  background: #fff;
  width: var(--app-widt);
  height: 75px;
  padding: 0;
  position: relative;
  /* border-radius: 30px 30px 2px 2px; */
  border-radius: 30px 30px 0 0;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-left: 40px;
  box-sizing: border-box;

  /* border-bottom: 10px solid #1b1a23; */
  margin-bottom: 10px;
}

ul {
  list-style: none;
  width: inherit;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menue__item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px;
  /* height: 90px; */
  width: 140px;
  padding: 5px 15px 5px 10px;
  /* margin: 0 30px; */
  border-radius: 20px;
  backface-visibility: hidden;
  transition: all 0.5s;
}

.menue__item.home {
  width: 90px;
}
.menue__item.about {
  width: 100px;
}
.menue__item.active {
  background-color: #f5f4f4;
  transform: translateX(-20%);
  border: 2px solid #bbbbbbd5;
}

.menue__item.active a .item__text {
  opacity: 1;
  transform: translate(0, -50%);
}

/* .menue__item.active a ion-icon {
  color: #ffb400;
} */

.menue__item a {
  position: relative;
  /* padding: 20px 20px; */
  /* text-align: center; */
  width: 100%;
  /* border-radius: 50%; */
}

.menue__item ion-icon {
  font-size: 25px;
  color: #1b1a23;
}

.item__text {
  /* font-family: 'Vazir'; */
  font-family: 'Cinema';
  font-weight: normal;
  padding-left: 20px;
  position: absolute;
  top: 50%;
  transform: translate(-80%, -50%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;

  font-size: 20px;
  /* color: #1b1a23; */
  color: #414856;

  transition: all 0.5s;
}

/* .item__text.active {
  opacity: 1;
  transform: translate(0, -50%);
} */

.container {
  width: var(--app-widt);
  height: 590.5px;
  /* height: 100%; */
  position: relative;
}

/* PAGE and CONTAINERS */
.page {
  /* put all pages under the active page */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  opacity: 0;

  height: 100%;
  width: 100%;
  background-color: #fff;
  border-radius: 0 0 30px 30px;

  box-sizing: border-box;
  text-align: right;
  padding: 50px 100px;

  /* prevent scroll when page is diactive */
  overflow: hidden;

  transition: opacity 2s;
}

.page.active {
  opacity: 1;
  z-index: 50;
  overflow: visible;

  transform: translate(0, 0);
}

/* HOME */
.home-container {
  height: auto !important;
  position: relative;
  display: none;
  padding: 50px 100px;
  padding-right: 150px;
  /*mmd add*/
  zoom: 1.2;
  /*end mmd add*/
}
.home-container.active {
  display: grid;
  grid-template-columns: repeat(5, 16.4%);
  grid-template-areas:
    'image image image header header'
    'image image image text text'
    'image image image text text'
    'image image image social social';

  gap: 50px;
}
.home__header {
  grid-area: header;
  font-family: 'Cinema';
  font-size: 60px;
  color: #1b1a23;
  font-weight: bold;
  align-self: flex-end;
}

.home__text {
  grid-area: text;
  font-family: 'Cinema';
  direction: rtl;
  font-size: 35px;
}

.home__text .text {
  font-size: 35px;
  color: #28303f;
}

.home__sign-up {
  padding: 10px 25px;
  background-color: #1b1a23;
  color: #fff;
  font-size: 15px;
  display: inline-block;
  border-radius: 3px;
  margin-top: 20px;
  font-family: 'Vazir';
  /* box-shadow: 6px 6px 20px #28303f9c; */

  transition: background-color 500ms;

  font-size: 21px;
}
.home__sign-up:hover {
  background-color: #28303f;
}

.home__image {
  grid-area: image;
  width: 80%;
}

.social {
  grid-area: social;
  direction: rtl;
  font-family: 'Cinema';
  font-size: 18px;
}

.social ul {
  text-align: right;
  margin-top: 20px;
  justify-content: flex-start;
}
.social ul li {
  font-size: 30px;
  margin-left: 25px;
}
.social ul li a {
  color: rgb(85, 26, 139);
  transition: color 300ms;
}
.social ul li a:active,
.social ul li a:hover {
  color: #28303f;
}

/* ACCOUNT */
.account-container {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
/* RIGHT SIDE */
.account--right {
  width: 100%;
  background-color: #ffc8c8;
  border-bottom-right-radius: inherit;

  display: grid;
  grid-template-rows: 65% 1fr;
  align-items: center;
  justify-items: center;
}
.login__image {
  width: 310px;
  align-self: end;
}
.login__text {
  direction: rtl;
  font-family: 'Cinema';
  font-size: 30px;
  color: #1b1a23;
  text-align: center;
  width: 65%;
}
.login__text p {
  margin-bottom: 25px;
}
.btn {
  padding: 5px 15px;
  background-color: #1b1a23;
  color: #ffc8c8;
  font-size: 30px;
  font-family: 'Cinema';
  border-radius: 5px;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);

  transition: all 1s;
}
.login__text .btn:last-child {
  margin-right: 15px;
}
.btn.active {
  background-color: #ffc8c8;
  color: #1b1a23;
  box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
    inset 8px 8px 12px rgba(0, 0, 0, 0.1);
}

/* LEFT SIDE */
.login__container,
.signup__container {
  opacity: 0;
  visibility: hidden;

  position: absolute;
  top: 0;
  left: 0;
  width: 50% !important;

  display: flex;
  flex-direction: column;
  padding: 30px 50px;
  gap: 1rem;

  transition: opacity 500ms;
}
.login__container.active,
.signup__container.active {
  opacity: 1;
  z-index: 1000;
  visibility: visible;
}
.account--left div {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Cinema';
  direction: rtl;
}
.form__signup {
  /* display: grid;
  grid-template-rows: 15% 1fr; */
  /* gap: 20px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 100%;
  box-sizing: border-box;
}
.form__login {
  /* display: grid;
  grid-template-rows: 20% 1fr; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;

  height: 100%;
  box-sizing: border-box;
}
.signup-errors,
.login-errors {
  flex-shrink: 30;
  font-family: 'Vazir', sans-serif !important;
  color: #c20717;
  background-color: #f90c0c4a;
  padding: 8px;
  border: 2px solid;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  row-gap: 5px;
}
.signup-errors.hidden,
.login-errors.hidden {
  display: none;
  visibility: hidden;
}
.signup-errors > span::before,
.login-errors > span::before {
  display: inline-block;
  content: '*';
}
.login__inputs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.login__inputs div {
  height: auto;
}
.signup__inputs {
  display: grid;
  /* grid-template-rows: repeat(5, 16%);
  grid-template-columns: 1fr 1fr; */
  grid-auto-rows: min-content;
  gap: 1rem;
}
/* .signup__inputs .input__password, */
.signup__inputs .input__email,
.signup__inputs .input__checkbox,
.signup__inputs .submit__button,
.signup__inputs .input__captcha,
.signup__inputs .input__major,
.signup__inputs .input__google {
  grid-column: span 2;
}
.signup__inputs .input__password,
.signup__inputs .input__confirm-password {
  grid-column: span 1;
}
.input__google {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 1rem;
  margin: auto;
  /* width: 304px; */
  width: 100%;
  border: 2px solid #d3d3d3;
  transition: all 300ms ease-out;
}
.input__google:hover {
  background-color: #eee;
}
.g-recaptcha > div {
  margin: auto;
}
.input__google span {
  flex-grow: 1;
  font-family: 'Poppins', sans-serif;
  color: #1b1a23;
}
.input__name input,
.input__family input {
  direction: rtl !important;
}
.form__header {
  font-size: 50px;
}
.login__inputs input,
.signup__inputs input {
  width: 100%;
  box-sizing: border-box;
  font-size: 20px;
  padding: 5px 15px;
  margin-top: 10px;
  direction: ltr;
  font-family: 'Cinema';
}
.login__inputs label,
.signup__inputs label {
  font-size: 20px;
}
.input__checkbox input {
  width: auto;
  line-height: 5px;
}
.input__checkbox * {
  cursor: pointer;
}
.input__checkbox label {
  line-height: 1.4;
  color: #28303f;
}
.submit__button {
  background-color: #28303f;
  color: #fff;
  font-family: 'Cinema';
  font-size: 25px;
  height: 45px;
  box-sizing: border-box;
  border-radius: 6px;
  width: 100%;

  cursor: pointer;
}
.forget {
  text-decoration: underline;
  float: left;
  margin-top: 10px;
  font-size: 20px;
  color: #1b1a23;
}

/* ARRANGE */
.arrange-container {
  display: none;

  background-color: #fff;
  padding: 50px;
}
.arrange-container.active {
  display: grid;
  /* grid-template-columns: 260px 1fr; */
  grid-template-columns: 300px 1fr;
  grid-template-areas: 'side chart';
  gap: 50px;
}
.arrange-container.active {
  height: 842.4px;
}
.sidebar {
  grid-area: side;
  /* display: grid;
  grid-template-rows: 8% 5% 5% 1fr; */
  gap: 10px;

  background-color: #414856;
  padding: 20px 15px;
  border-radius: 7px;
  /* height: 480px; */
  height: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}
.sidebar__header {
  font-family: 'Vazir';
  font-size: 17px;
  direction: rtl;
  color: #fff;
}
.department-select {
  width: 100%;
  direction: rtl;
  font-family: 'Vazir';
  border-radius: 7px;
  font-size: 16px;
}
.department-select:focus {
  outline: none;
}
.search-box {
  width: 100%;
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.search-box #search-input {
  width: 96%;
  font-family: 'Vazir';
  border-radius: 7px 7px 0 0;
  border: none;
  padding-right: 10px;
  font-size: 17px;
}
.search-box #search-input:focus {
  outline: none;
}
.radio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #fff;
  font-family: 'Vazir', sans-serif;
  font-size: 15px;
}
.radio__inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 100%;
}
.class-list {
  height: 100%;
  background-color: #fff;
  border-radius: 0 0 7px 7px;
}
.class-list .empty-list {
  font-family: 'Vazir';
  font-size: 1.05rem;
  text-align: center;
  padding: 15px;
}
.class-list ul li {
  cursor: pointer;
}
.class-list ul li:hover {
  border: 2px solid #3a414e;
}
.chart {
  grid-area: chart;
  font-family: 'Cinema';

  display: grid;
  grid-template-columns: 1fr 2%;
  grid-template-areas: 'weekdays hours';
  gap: 10px;
}
.hours {
  grid-area: hours;
  grid-template-rows: repeat(14, 7.14%);
  display: grid;
  align-items: flex-end;

  font-size: 15px;
}
.hours span {
  line-height: 0px;
}
.weekdays {
  grid-area: weekdays;
  display: grid;
  grid-template-columns: repeat(6, 16.4%);
  grid-template-rows: repeat(14, 7.14%);
  grid-template-areas:
    '. . . . . .'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6'
    'col1 col2 col3 col4 col5 col6';
  gap: 0 5px;
  justify-items: center;
  align-items: center;

  direction: rtl;
  /* background-image: url(./image/calendar-bg.png); */
}
.weekdays > span {
  color: #fff;
  background-color: #28303f;
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 15px;
  box-sizing: border-box;
  font-size: 20px;
}
.weekdays > div {
  width: 100%;
  height: 100%;
  background-image: url(../image/calendar-bg.png);
  border-right: 3px solid #c7d0dc;
  border-left: 3px solid #c7d0dc;
  box-sizing: border-box;
  position: relative;
}
.weekdays .col1 {
  grid-area: col1;
}
.weekdays .col2 {
  grid-area: col2;
}
.weekdays .col3 {
  grid-area: col3;
}
.weekdays .col4 {
  grid-area: col4;
}
.weekdays .col5 {
  grid-area: col5;
}
.weekdays .col6 {
  grid-area: col6;
}

.class {
  position: absolute;
  font-family: 'Vazir';
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;

  padding: 5px 0;
  background-color: #c4edde;
  border: 3.5px solid #7ac7c4;
  border-radius: 5px;

  display: grid;
  align-items: center;
  text-align: center;

  transition: border-color 500ms;
}
.class .type {
  position: absolute;
  top: 4px;
  left: 5px;
  font-weight: bold;
  font-size: 20px;
}
.class span {
  direction: ltr;
}
.class.temp {
  border-color: #000;
}
.class-list {
  position: relative;
}
.class-list ul {
  display: block;
  /* height: 317px; */
  height: 515px;
  overflow: auto;
  padding: 5px;
  direction: rtl;
  /* overflow: visible; */
}
.class-list ul li {
  display: block;
  font-family: 'Vazir';
  font-size: 14px;
  background-color: #e3e9f0;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
  line-height: 20px;
  box-sizing: border-box;
}
.class-list .info {
  font-family: 'Vazir';
  font-size: 13px;
  z-index: 1000000;
  width: 120%;
  position: absolute;
  padding: 20px 15px;
  border-radius: 5px;
  background-color: #000;
  color: #fff;
  /* top: 50%; */
  left: 100%;
  /* transform: translateY(-50%); */
  margin-left: 10px;
  box-sizing: border-box;
  display: none;
  height: fit-content;
  line-height: 20px;
}
.class-list .info::before {
  content: ' ';
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;

  border-right: 15px solid #000;
}
.class-list .info > span {
  display: block;
  /* line-height: 20px; */
}
.class-list .info span > span {
  font-weight: bold;
  /* font-size: 15px; */
}
.class-list ul li a {
  color: #000;
}
.delete-class {
  opacity: 0;
  position: absolute;
  top: 2px;
  right: 2px;
  color: #d72323;
  font-size: 20px;
  --ionicon-stroke-width: 60px;

  transition: opacity 500ms;
}
.class:hover .delete-class {
  opacity: 1;
  cursor: pointer;
}
.class.hovered {
  border-color: #d72323 !important;
  z-index: 10000 !important;
  /* width: 100% !important; */
}
.class p {
  font-weight: bold;
  font-size: 16px;
}
.class a {
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
}
.class span {
  font-size: 13px;
}
.class1 {
  height: 11.53%;
  top: calc(7.692% * 3);
}

/* FINAL */
.final-container {
  display: none;
  background-color: #fff;
  padding: 50px;
  height: fit-content;
}
.final-container.active {
  display: block;
  height: auto;
}
.table {
  border-radius: 3px;
  direction: rtl;
  box-sizing: border-box;
  font-family: 'Vazir';
  font-size: 13px;
  border-radius: 4px;
  overflow: hidden;
  /* WHY 0 - I don't know */
  border: 0px solid #676c75 !important;
}
tr.hovered {
  background-color: #f0f5f9;
}
.table,
td,
tr,
th {
  border-collapse: collapse;
  /* border: 2px solid #676c75; */
  border: 2px solid #e3e9f0;
}
td.ltr {
  direction: ltr;
}
.table tbody {
  background-color: #fff;
}
.table thead,
.table tfoot {
  background-color: #e3e9f0;
}
.table th,
.table td {
  padding: 10px 15px;
  text-align: center;
  line-height: 20px;
  vertical-align: middle;
  font-size: 16px;
}
.code {
  width: 8%;
}
.delete,
.unit,
.group {
  width: 1%;
}
.quiz,
.name,
.teacher {
  width: 13%;
}
.table tfoot tr td {
  text-align: left;
}
.print__button {
  padding: 2px 10px;
  background-color: #fff;
  cursor: pointer;
  border: 1px solid #000;

  transition: all 800ms;
}
.print__button:hover {
  background-color: #000;
  color: #fff;
}
.delete-row {
  font-size: 20px;
  --ionicon-stroke-width: 60px;
  cursor: pointer;

  transition: color 500ms;
}
.delete-row:hover {
  color: #d72323;
}
/* ABOUT US */
/*
.about-container {
  background-color: #fff;
  display: none;
  padding-top: 5rem;
}
.about-container.active {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  display: grid;
  grid-template-rows: 40% 1fr;
  gap: 50px;
  grid-template-columns: repeat(4, 21.7%);
  grid-template-areas:
    'text text text text'
    'image image image image'
    'image image image image';
}
.about-container.active {
  height: fit-content;
  height: -moz-fit-content;
}

.about__image {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 50px;
 !* grid-template-columns: repeat(4, 21%); *!
 !* justify-content: space-evenly; *!
 !* grid-area: image; *!
}
.about__image .image {
 width: 100%;
 border-radius: 10px;
 border: 5px solid #28303f;
}
.about__image .name {
 font-family: 'Cinema';
 font-size: 25px;
 color: #28303f;
 display: inline-block;
 margin-top: 20px;
 width: 90%;
 text-align: center;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}
.btn::after {
  content: '';
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all 0.4s;
} */

/* NEW ABOUT PAGE STYLES */

.about-container {
  background-color: #fff;
  min-height: 100vh;
  display: none;
  padding-top: 5rem;
  /*mmd add*/
  zoom: 1.2;
  /*end mmd add*/
}
.about-container.active {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.about-container.active {
  height: fit-content;
  height: -moz-fit-content;
}
.about--header {
  font-family: 'Cinema', sans-serif;
  color: #28303f;
  align-self: center;
  font-size: 3rem;
}
.about__team {
  display: grid;
  gap: 50px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  /* justify-items: end; */
  justify-items: center;
}
.about__team--member {
  display: flex;
  gap: 20px;
}
.member--image {
  width: max-content;
}
.member--image img {
  width: 120px;
}
.member--info {
  font-family: 'Vazir', sans-serif;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-end;
  font-size: 110%;
}
.member--info a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #101f74;
  font-weight: bold;
}
.member--name {
  font-weight: bold;
  font-size: 1.35rem;
  color: #28303f;
  margin-bottom: 5px;
}
.instagram-disable {
  color: #3e3d44 !important;
}
.about__donate {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.donate--header {
  font-family: 'Cinema', sans-serif;
  color: #28303f;
  align-self: center;
  font-size: 1.8rem;
  margin-top: 1rem;
}
.donate__addresses {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  justify-items: center;
  font-size: 1.2rem;
}
.donate__addresses--item {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: 'Poppins', sans-serif;
}
.donate__addresses--item ion-icon {
  font-size: 1.8rem;
}
.donate__addresses--item ion-icon[name='logo-bitcoin'] {
  color: #f2a900;
}
.crypto-logo__container {
  width: 30px;
}
.crypto-logo {
  width: 100%;
  margin: auto;
  display: block;
}
.eth-logo {
  width: 20px;
}
.copy-button {
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  padding: 4px 8px;
  border-radius: 10px;
  border: 2px solid #333946;
  background-color: #333946;
  color: #fff;
}
.copy-button.copied {
  border: 2px solid #333946;
  background-color: #fff;
  color: #333946;
}
.copy-button:hover {
  transform: scale(1.1);
  transition: transform 300ms ease-out;
}
.payments-form-conteiner {
  display: flex;
  justify-content: center;
}
.payments-form {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.payments-input {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 1.2rem;
}

.payments-submit {
  cursor: pointer;
  font-family: 'Vazir', sans-serif;
  padding: 4px 8px;
  font-size: 1.2rem;
  border-radius: 10px;
  border: 2px solid #333946;
  background-color: #333946;
  color: #fff;
}
/* OTHER */

.popup {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: auto;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  box-sizing: border-box;
}
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
  .popup {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.3);
  }
}

.popup.open {
  opacity: 1;
  visibility: visible;
}
.popup.open .popup__content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.85);
  zoom: 1.25;
}

.popup__content {
  direction: rtl;
  max-height: 60vh;
  overflow-y: scroll;

  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  background-color: #fff;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  transition: all 0.5s 0.2s;
}

.popup__content .table {
  margin: 15px 40px 30px 40px;
}

.capacity {
  width: 1%;
}
.reserved {
  width: 15%;
}

.close-popup {
  position: sticky;
  right: -10px;
  top: 10px;
  border-radius: 50%;
  color: #fff;
  border: 2px solid #000;
  background-color: #000;

  font-size: 20px;
  --ionicon-stroke-width: 60px;
  cursor: pointer;
}

#txtHint,
#myClass {
  display: none;
}
/*
.logout__container {
  position: absolute;
  left: 50px;
}
.logout__container a {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  background: #333946;
  border-radius: 24px;

  text-decoration: none;
  color: #fff;
  font-family: 'Cinema';
  font-size: 20px;
}
*/
.actions__container {
  position: absolute;
  left: 50px;

  display: flex;
  gap: 1rem;
}
.actions__container a {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  background: #333946;
  border-radius: 24px;

  text-decoration: none;
  color: #fff;
  font-family: 'Cinema';
  font-size: 20px;

  transition: transform 400ms ease-out;
}
.actions__container a:hover {
  transform: scale(1.1);
}


.donate__container {
  position: absolute;
  right: 50px;
  display: flex;
  gap: 1rem;
}
.donate__container a {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  /*background: #333946;*/
  border-radius: 24px;
  /*background: linear-gradient(-45deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(35, 166, 213), rgb(35, 213, 171)) 0% 0% / 400% 400%;*/
  /*animation: 0.15s ease 0s infinite normal running gradient;*/
  /*transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s,border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;*/
  /*background: linear-gradient(130deg, #541a8b, #ffff, #0853b7);*/
  background: linear-gradient(130deg, #7e00ff, #000000, #7e00ff);
  background-size: 200% 200%;
  -webkit-animation: Animation 2s ease infinite;
  -moz-animation: Animation 2s ease infinite;
  animation: Animation 2s ease infinite;
  text-decoration: none;
  color: white;
  font-family: 'Cinema';
  font-size: 20px;

  transition: transform 400ms ease-out;
}

@-webkit-keyframes Animation {
  0%{background-position:10% 0%}
  50%{background-position:91% 100%}
  100%{background-position:10% 0%}
}
@-moz-keyframes Animation {
  0%{background-position:10% 0%}
  50%{background-position:91% 100%}
  100%{background-position:10% 0%}
}
@keyframes Animation {
  0%{background-position:10% 0%}
  50%{background-position:91% 100%}
  100%{background-position:10% 0%}
}


.donate__container a:hover {
  transform: scale(1.1);
}

.logout__container a ion-icon {
  /* padding-top: 10px; */
  /* --ionicon-stroke-width: 60px; */
  font-size: 28px;
}

/*start mmd*/

.edit__container a ion-icon {
  /* padding-top: 10px; */
  /* --ionicon-stroke-width: 60px; */
  font-size: 28px;
}

.edit__container a {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px 20px;
  /* background: #eee; */
  background: #333946;
  border-radius: 24px;

  text-decoration: none;
  /* color: #333946; */
  color: #fff;
  font-family: 'Cinema';
  font-size: 20px;
}

.edit__container {
  position: absolute;
  /* top: 25px; */
  left: 200px;
}

/*end mmd*/

.alert {
  position: sticky;
  top: 50px;
  opacity: 0;
  /* display: none; */
  font-size: 21px;
  padding: 20px 45px;
  padding-right: 55px;
  z-index: 10000;
  font-family: 'Cinema';
  direction: rtl;
  /*background-color: #d4edda;*/
  /* border: 5px solid #065446; */
  /* border: 3.5px solid #04250e; */
  border-radius: 7px;
  transition: opacity 500ms;
  margin: auto;
  /*color: #155724;*/
  margin-top: -50px;
}

.alert.active {
  /* display: inline-block; */
  opacity: 1;
  width: 250px;
}

.alert--close {
  position: absolute;
  top: 5px;
  right: 5px;
  --ionicon-stroke-width: 50px;
  font-size: 21px;
  cursor: pointer;
}

/* redio for filter search */
/* Customize the label (the container) */
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: #eee;
  /* border-radius: 50%; */
  border-radius: 2px;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
  /* background-color: #2196f3; */
  background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
  /* top: 5px;
  left: 5px;
  width: 8px;
  height: 8px; */
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  /* border-radius: 50%; */
  border-radius: 1px;
  /* background: white; */
  background: #28303f;
}

.social__text {
  font-size: 22px;
}

/* spinner */
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin-top: 50px;
}
.spinner-container img {
  width: 50px;
  height: 50px;
}
.spinner-container p {
  direction: ltr;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: #28303f;
}