* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font);
}

:root {
  --primary: #042954;
  --icnblue1: #042954;
  --secondary: #051f3e;
  --bgprime: #f0f1f3;
  --golden: #ffa601;
  --white: #ffffff;
  --txtwhite: white;
  --txtwhite: #ffffffba;
  --red: #ff0000;
  --lightred: #FFEAEA;
  --lightred2: #FFEAEA;
  --black: black;
  --grey: grey;
  --green: #3CB878;
  --darkgreen: darkgreen;
  --limegreen: #D1F3E0;
  --limegreen2: #D1F3E0;
  --yellow: rgb(163, 169, 42);
  --lightblu: #E1F1FF;
  --icnblue2: #3F7AFC;
  --orange: #FFA001;
  --lightorng: #FFF2D8;
  --pink: rgb(205, 87, 106);
  --navyblu: #485C8F;
  --font: "Roboto";
}

ul li {
  list-style: none;
}

a {
  color: var(--limegreen2);
  text-decoration: none;
}

.bg-golden {
  background-color: var(--golden);
}

/* utility */
.w-1 {
  width: 8.33%;
}

.w-2 {
  width: 16.66%;
}

.w-3 {
  width: 25%;
}

.w-4 {
  width: 33.33%;
}

.w-5 {
  width: 41.66%;
}

.w-6 {
  width: 50%;
}

.w-7 {
  width: 58.33%;
}

.w-8 {
  width: 66.66%;
}

.w-9 {
  width: 75%;
}

.w-10 {
  width: 83.33%;
}

.w-11 {
  width: 91.66%;
}

.w-12 {
  width: 100%;
}

.d-flex {
  display: flex;
}

.d-flex-col {
  display: flex;
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-end {
  justify-content: end;
}

.f-wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
}

.w-80px {
  width: 80px;
}

.ml-80px {
  margin-left: 80px;
}

.d-none {
  display: none;
}

.d-block {
  display: block;
}

.mt-1 {
  margin-top: 10px;
}



/* header starts  */
header {
  margin-left: 230px;
  background-color: var(--white);
  color: var(--black);
  position: sticky;
  top: 0;
  transition: all linear 0.1s;
  box-shadow: 0px 0px 5px black;
  z-index: 999;
}

.logo-img {
  height: 50px;
  width: 150px;
  padding: 6px;
}

.logo-img-main {
  height: 60px;
  width: 130px;
  padding: 6px;
}

header .search input {
  border: none;
  outline: none;
  padding: 5px;
  width: 150px;
  font-size: 18px;
  background: transparent;
}

header .search input::placeholder {
  font-size: 0.9rem;
}

.profile {
  gap: 24px;
  text-align: end;
  cursor: pointer;
  position: relative;
}

.gap-1 {
  gap: 1rem;
}

.profile img {
  border-radius: 50px;
}

.user {
  position: relative;
}

.user::after {
  content: "\f0d7";
  font-family: fontAwesome;
  position: absolute;
  top: 0;
  right: -20%;
}

.admin-list {
  z-index: 1;
  box-shadow: 4px 4px 10px 0px black;
  position: absolute;
  top: 125%;
  right: 0%;
  display: none;

}

.admin-list h2 {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
  color: var(--txtwhite);
  background-color: var(--golden);
}

.admin-list ul {
  background-color: var(--white);
  color: var(--grey);
  width: 150px;
}

.admin-list ul li {
  padding: 9px;
  text-align: start;
}

.admin-list i {
  margin-right: 10px;
}

.language {
  position: relative;
  cursor: pointer;
  font-size: 1.1rem;
}

.lang-list {
  box-shadow: 4px 4px 15px 0px black;
  position: absolute;
  top: 176%;
  right: 0%;
  display: none;
  background-color: var(--white);
  width: 120px;
}

.lang-list ul li {
  padding: 9px;
  color: var(--grey);
  text-align: center;
}

.btn {
  padding: 6px 10px;
  background-color: var(--secondary);
  color: var(--txtwhite);
  font-weight: bold;
  border-radius: 10px;
}

/* aside starts  */
aside {
  height: 100vh;
  width: 230px;
  color: var(--txtwhite);
  position: fixed;
  top: 0;
  transition: all linear 0.1s;
  z-index: 99;
  border: 0.1px solid rgb(88, 88, 88);
}

.logo {
  background-color: var(--golden);
  min-height: 60px;
  border-bottom: 1px solid rgba(88, 88, 88, 0.448);
}

.fa-bars-staggered,
.fa-xmark,
.fa-bars,
.fa-id-card,
.fa-cloud-moon,
.fa-language,
.fa-sun-plant-wilt {
  font-size: 25px;
  cursor: pointer;
  color: var(--icnblue1);
}

.sidebar {
  height: 100vh;
  background-color: var(--primary);
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 3px;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: orange;
  border-radius: 25px;
}

.sidebar::-webkit-scrollbar-track {
  background-color: #d8bcab;
}

.nav-list {
  position: relative;
  border-bottom: 1px solid black;
  text-align: justify;
  padding: 12px 0px;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.nav-list a {
  padding: 0 24px;
}

.nav-title {
  color: var(--txtwhite);
}

.nav-list a i {
  color: var(--golden);
  font-size: 22px;
}

.nav-list .drop {
  font-size: 15px;
  color: var(--grey);
  position: absolute;
  top: 20px;
  right: 12px;
}

.dropdown {
  background-color: var(--secondary);
  min-width: 100%;
  margin: 5px 0 0 0;
}

.dropdown li {
  padding: 8px 20px 8px 40px;
  cursor: pointer;
  color: #f0f1f3;
}

.dropdown li::before {
  content: "\f054";
  font-family: fontAwesome;
  color: var(--grey);
  font-size: 12px;
  margin: 5px;
}

/* main starts */
main {
  margin-left: 230px;
  padding: 5px;
  background-color: var(--bgprime);
  color: var(--black);
}

.main-title {
  padding: 10px 0 0 22px;
}

.main-title h3 {
  font-size: 1.5rem;
}

.main-title p {
  padding: 10px 0;
}

.main-title span a {
  color: var(--golden);
}

.main-content h4 {
  font-size: 20px;
  font-weight: 400;
  margin: 6px 0;
  color: var(--grey);
}

.main-content span {
  font-size: 18px;
  font-weight: 500;
}

.dashboard-students i,
.dashboard-teachers i,
.dashboard-parents i,
.dashboard-earnings i {
  font-size: 40px;
  padding: 18px;
  border-radius: 24%;
}

.dashboard-students i {
  color: var(--green);
  background-color: var(--limegreen);
}

.dashboard-teachers i {
  color: var(--icnblue2);
  background-color: var(--lightblu);
}

.dashboard-parents i {
  color: var(--orange);
  background-color: var(--lightorng);
}

.dashboard-earnings i {
  color: var(--red);
  background-color: var(--lightred);
}

/* gridsystem */
.main-content {
  margin: 10px 20px;
  display: grid;
  grid-column-gap: 22px;
  grid-row-gap: 22px;
}

.dashboard-students,
.dashboard-teachers,
.dashboard-parents,
.dashboard-earnings,
.earnings-graph,
.expenses-graph,
.students-graph,
.event-calender {
  box-shadow: 0px 0px 23px 14px rgba(0, 0, 0, 0.1);
  background-color: var(--white);
  border-radius: 14px;
}

.dashboard-students,
.dashboard-teachers,
.dashboard-parents,
.dashboard-earnings {
  text-align: center;
  padding: 24px 0;
}

.facebook-handle,
.twitter-handle,
.gplus-handle,
.linkedin-handle {
  text-align: center;
  padding: 20px;
  background-color: var(--primary);
  border-radius: 14px;
}

.branches {
  position: relative;
  background-color: #000000;
  background-image:
    radial-gradient(at 47% 33%, hsl(271.91, 99%, 54%) 0, transparent 59%),
    radial-gradient(at 82% 65%, hsl(88.65, 73%, 48%) 0, transparent 55%);
  border-radius: 14px;
}

#bchart {
  width: 100%;
  height: 100%;
}

.overlay p {
  color: var(--lightred2);
  padding: 4px;
  font-weight: bold;
  font-size: 22px;
  position: absolute;
  left: 0%;
}

.notice-board {
  padding: 0 14px;
  background-color: var(--secondary);
  border-radius: 14px;
}

.notice {
  padding: 10px 0;
  height: 85%;
  overflow-y: scroll;
}

.notice-board h3 {
  font-size: 22px;
  font-weight: bold;
  margin: 10px 0;
  color: var(--lightred2);
}

.notice-board p {
  font-size: 0.9rem;
  margin: 16px 0;
  color: var(--limegreen2);
}

.notice-board span {
  font-size: 0.8rem;
}

.border-btm {
  border-bottom: 1px solid white;
  margin-bottom: 20px;
}

.clr-green {
  background-color: var(--darkgreen);
}

.clr-red {
  background-color: var(--red);
}

.clr-yellow {
  background-color: var(--yellow);
}

.clr-pink {
  background-color: var(--pink);
}

.count {
  font-size: 18px;
  font-weight: 500;
}

.capsule {
  padding: 3px 5px;
  border-radius: 9px;
  color: var(--txtblack);
  font-weight: bold;
}

.notice::-webkit-scrollbar {
  width: 3px;
}

.notice::-webkit-scrollbar-thumb {
  background-color: orange;
  border-radius: 1px;
}

.notice::-webkit-scrollbar-track {
  background-color: #ffe83d;
}

.fa-brands {
  color: var(--golden);
  display: block;
  font-size: 2rem;
  margin: 10px 0;
}

/* calender js  */
.cal-container {
  width: 100%;
  height: 100%;
}

.calendar {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background-color: hwb(216 2% 78%);
  box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
}

.month {
  width: 100%;
  height: 25%;
  background-color: var(--golden);
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
  border-radius: 14px;
}

.month i {
  font-size: 30px;
  cursor: pointer;
  padding: 20px;
  color: var(--lightblu);
}

.month h1 {
  font-size: 2rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  color: var(--black);
}

.month p {
  font-size: 1.2rem;
  color: var(--lightorng);
}

.weekdays {
  width: 100%;
  height: 12%;
  color: var(--limegreen2);
  display: flex;
  align-items: center;
}

.weekdays div {
  font-size: 1.2rem;
  font-family: var(--font);
  width: calc(100% / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.days {
  font-family: var(--font);
  display: flex;
  flex-wrap: wrap;
  color: var(--orange);
}

.days div {
  font-size: 1.2rem;
  padding: 8px;
  width: calc(100% / 7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.days div:hover:not(.today) {
  cursor: pointer;
}

.prev-date,
.next-date {
  opacity: 0.3;
  color: var(--lightblu);
}

.today {
  background-color: var(--golden);
  color: var(--black);
  border-radius: 50px;
  font-weight: bolder;
}