* {
  font-family: arial;
}

body {
  margin: 0;
  padding: 0;
}

/*///////////     Page Details   /////////////// */

.pageDetails {
  padding-top: 1%;
  padding-bottom: 1%;
  border-bottom: 1px solid #ccccb3;
}
.pageDetails #pageName a {
  color: #ccccb3;
}

.pageDetails #subPageName a {
  color: black;
}

/*/////////////     Box   ///////////////////// */

.box {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin: 3% 2% 3% 2%;
}

/*/////////////     Left Upper Box   ///////////////////// */

.leftUpperBox {
  padding: 30px;
  border-bottom: 1px solid #ccccb3;
  border-right: 1px solid #ccccb3;
}

/*/////////////     RIght Upper Box   ///////////////////// */

.rightUpperBox {
  padding: 20px 20px 10px 0px;
  border-bottom: 1px solid #ccccb3;
}

/*/////////////     left Table  ///////////////////// */

.leftTable {
  font-size: 12px;
  border-right: 1px solid #ccccb3;
}

.leftTable td {
  vertical-align: middle;
}

.check {
  font-size: 30px;
  color: #f5f5f0;
}

.CA {
  border-radius: 100%;
  padding: 8px;
  font-size: 12px;
}

.totalLate {
  text-align: center;
  font-size: 12px;
}

/*/////////////     Right Table  ///////////////////// */

.rightTable {
  font-size: 12px;
}

.rightTable td {
  border: none;
}

.nameHeading {
  margin-top: 3%;
}

.rightTable select {
  font-size: 12px;
  border: none;
}

/*/////////////     Bottom Table  ///////////////////// */

.bottomTable {
  font-size: 12px;
}

.bottomTable td {
  border: none;
  vertical-align: middle;
}

.roundImage {
  width: 30px;
  border-radius: 100%;
}

.greyText {
  color: #ccccb3;
}

/*/////////////     Bottom Box  ///////////////////// */

.bottomBox {
  margin: 2%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bottomBox table {
  border: none;
}

.bottomBox table td {
  vertical-align: middle;
}

.question {
  width: 100%;
  border: none;
}

/*/////    Responsive Table   ///////////*/
.responsiveTable {
  font-size: 12px;
}

.responsiveTable td {
  vertical-align: middle;
}

.tableSelect {
  border: none;
  color: blue;
}

.dropdown {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  text-align: center;
  transform-origin: top;
  z-index: 9;
}
.dropdown button,
.dropdown a {
  padding: 12px;

  font-size: 1.2em;

  font-family: futura Md BT;

  border: none;

  outline: none;

  width: 325px;

  color: #fff;

  transition: 0.3s;
}
.dropdown .dropdown-toggle {
  background-color: #088ff6;
}
.dropdown .dropdown-toggle:hover {
  background-color: #b71c1c;
}
.dropdown a {
  display: block;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  padding: 12px;
  font-family: futura Md BT;
  border: none;
  outline: none;
  color: #fff;
  transition: 0.3s;
  width: 100%;
  background-color: #283c63;
}
.dropdown a:hover {
  background-color: #01579b;

  transform: scale(1.1);
}
.dropdown .dropdown-toggle {
  width: 100%;
  cursor: pointer;
}
.dropdown.active .dropdown-content {
  display: block;
  animation: scaleYUp 0.5s ease-in-out 1 forwards;
}

@keyframes scaleYUp {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}