body {
  background-image: url("../images/HCI/Moocs.png");
  /* ./images/HCI/Main front.png */
  /* background-size: cover; 
  style="
      background-image: url('./images/HCI/Mooc\ white\ bg.png');
      background-size: auto;
    "
  */
  background-size: auto;
}
/* for toogle of dark mode */
/* body {
	background-color: #fafafa;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	transition: background 0.2s linear;
} */

body.dark {
  background-color: #1b222c;
  background-image: url(../images/HCI/backdark.jpg);
}
.top {
  position: relative;
}
.make-right {
  position: fixed;
  right: 15px;
  top: 13px;
}

.checkbox {
  opacity: 0;
  position: absolute;
}

.label {
  background-color: rgb(55, 73, 73);
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  height: 24px;
  width: 50px;
  transform: scale(1.12);
  box-shadow: 1px 1px 2px rgba(224, 206, 174, 0.911);
  box-shadow: -1px -1px -2px rgba(224, 206, 174, 0.911);
}

.label .ball {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 18px;
  width: 18px;
  transform: translateX(0px);
  transition: transform 0.2s linear;
}

.checkbox:checked + .label .ball {
  transform: translateX(24.5px);
}

.fa-moon-o {
  color: #f1c40f;
}

.fa-sun-o {
  color: #f39c12;
}

/* For middle containers */
.container-large-css {
  width: 90%;
  margin: auto;
}
.wrapper-css {
  background-color: rgb(255, 255, 255);
  border-top: 3px solid #108cac;
  margin-top: 36px;
}
/* Dark of wrapper */
.wrapper-css-dark {
  background-color: #16202c;
  border-top: 3px solid #108cac;
  margin-top: 36px;
}
.wrapper-css-light {
  background-color: rgb(255, 255, 255);
  border-top: 3px solid #108cac;
  margin-top: 36px;
}
/* the change in top namebox css can be changed ------------------------------------------------------------*/
/* these are modes */
.bg-box-light-mode {
  /* this is for bob singh only */
  background-color: #f4f4f4;
}
.bg-sidebox-light-mode {
  background-color: #e5e5e5;
}
/* dark modes of above two */
.bg-box-dark-mode {
  /* this is for bob singh only */
  background-color: #233543e1;
  box-shadow: 1px 1px 6px 0.7px rgba(244, 255, 182, 0.26);
}
.bg-sidebox-dark-mode {
  background-color: #233543;
  box-shadow: 1px 1px 6px 0.5px rgba(244, 255, 182, 0.226);
}
/* REPEAT */
.bg-box-light-modes {
  /* this is for bob singh only */
  background-color: #f4f4f4;
}
.bg-sidebox-light-modes {
  background-color: #e5e5e5;
}

.bg-weekbox-light-mode {
  background-color: #eeeeee;
  padding: 5px;
  font-size: 20px;
  font-weight: 700;
  border-left: 3.6px solid #108cac;
  border-radius: 3px;
}
.bg-weekbox-dark-mode {
  background-color: #2f485ae5;
  padding: 5px;
  font-size: 20px;
  font-weight: 700;
  border-left: 3.6px solid #108cac;
  border-radius: 3px;
}

.text-color-box-light {
  color: #8b8b8b;
  font-size: 13.2px;
  font-weight: 500;
}
.text-color-box-dark {
  color: #d4d2d4;
  font-size: 13.2px;
  font-weight: 500;
}
/* Repeat */
.text-color-box-lights {
  color: #8b8b8b;
  font-size: 13.2px;
  font-weight: 500;
}
.text-color-middle-light {
  color: #585858;
  font-size: 14.2px;
  font-weight: 400;
}
.text-color-middle-dark {
  color: #d4d2d4c0;
  font-size: 14.2px;
  font-weight: 400;
}
.text-orange-css {
  color: #9e823a;
}

/* other---------------------------------------------------------------------------------------------------------------- */
.top-namebox-css {
  /* background-color: #f4f4f4; */
  width: 80%;
  margin-left: 14%;
  margin-top: 12px;
  height: 97px;
  border: 1.5px solid rgba(109, 109, 109, 0.055);
  border-radius: 3px;
}
.text-mooc-color-css {
  color: #108cac;
  font-weight: 600;
  font-size: 19px;
  margin-left: 33px;
}
.upper-main-text-css {
  font-size: 30px;
  color: #565656ef;
  font-weight: 700;
  margin: 20px;
  padding-bottom: 19px;
}
.upper-main-text-css-dark {
  font-size: 30px;
  color: #d4d2d4;
  font-weight: 700;
  margin: 20px;
  padding-bottom: 19px;
}
/* repeat */
.upper-main-text-csss {
  font-size: 30px;
  color: #565656ef;
  font-weight: 700;
  margin: 20px;
  padding-bottom: 19px;
}
.navbar-css {
  width: 98%;
  margin: auto;
  background-color: #323a45;
  height: 50px;
  color: #d3d5d7;
  box-shadow: 0 10px 15px -10px rgba(0, 0, 0, 0.75);
}

.navbar-left-css {
  padding: 16px 18px;
  font-size: 13.7px;
  font-weight: 500;
  border-left: 1px solid rgba(128, 128, 128, 0.247);
  border-right: 1px solid #222831;
  margin-left: -4px;
}
.navbar-left-css-first {
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 400;
}
.navbar-left-css:hover {
  background-color: #108cac;
  color: white;
}
.search-nav-css {
  background-color: #323a45;
  height: 50px;
  width: 80%;
  margin-left: 20%;
}
.search-nav-css::placeholder {
  color: #f4f4f4e0;
  font-style: italic;
  font-size: 12.5px;
  padding-left: 11px;
}
.goto-section-css {
  font-size: 11.8px;
  color: #555555;
  font-weight: 500;
  margin-top: 30px;
  margin-bottom: 22px;
  padding: 5px 15px;
}
.goto:hover {
  color: rgb(211, 211, 28);
}
.goto-section-css-dark {
  font-size: 11.8px;
  color: #87a4b1;
  font-weight: 500;
  margin-top: 30px;
  margin-bottom: 22px;
  padding: 5px 15px;
}
/* Repeat */
.goto-section-csss {
  font-size: 11.8px;
  color: #555555;
  font-weight: 500;
  margin-top: 30px;
  margin-bottom: 22px;
  padding: 5px 15px;
}
.side-box {
  width: 92%;
  margin: auto;
  padding-bottom: 29px;
  padding-top: 4px;
  border-radius: 4px;
}
.main-batch-css {
  height: 100px;
  margin: 20px 0;
}
.faded-text-light-mode {
  color: rgba(128, 128, 128, 0.418);
}
.faded-text-dark-mode {
  color: rgba(157, 204, 216, 0.425);
}

.middle-letter {
  margin-left: -22px;
  cursor: pointer;
}

.side-image-css {
  height: 100px;

  margin: 22px 0 5px 11px;
}

/* checked */

input[type="checkbox"] {
  width: 21px;
  height: 21px;

  cursor: pointer;
  font-size: 10.2px;
  visibility: hidden;
}

input[type="checkbox"]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;

  color: #525252;
  width: 17px;
  height: 17px;
  visibility: visible;
  border: 2px solid #727575;
  padding-left: 3px;
  border-radius: 5px;
}

input[type="checkbox"]:checked:after {
  content: "\2714";
}
.hr-line {
  border-top: 2px solid rgba(128, 128, 128, 0.158);
}
.line-below-side-box-heading {
  height: 0.5px;
  background-color: rgba(201, 201, 201, 0.685);
  width: 87%;
  margin: auto;
}
.go-button {
  background-color: #9ac957;
  padding: 5px 16.5px;
  border: none;
  border-radius: 3.5px;
  color: rgb(250, 246, 240);
  font-weight: 500;
  font-size: 14px;
}
.side-box-heading {
  font-size: 16.4px;
  font-weight: bold;
  margin: 10.5px 0 0 -6px;
  color: rgb(105, 105, 105);
}
.side-box-heading-dark {
  font-size: 16.4px;
  font-weight: bold;
  margin: 10.5px 0 0 -6px;
  color: #bebebe;
}
/* repeat */
.side-box-heading-lighter {
  font-size: 16.4px;
  font-weight: bold;
  margin: 10.5px 0 0 -6px;
  color: black;
}
.input-search {
  width: 72%;
  padding: 4px;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 3.2px;
}

.image-batch {
  background-image: url(../images/HCI/all\ batches.png);
  height: 470px;
  background-size: cover;
}
.image-batch-dark {
  background-image: url(../images/HCI/batches\ dark.png);
  height: 470px;
  background-size: cover;
}

/* for new checkbox */
.checkbox-sample {
  opacity: 0;
  position: absolute;
}

.label-page {
  background-color: rgb(55, 73, 73);
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  height: 24px;
  width: 50px;
  transform: scale(1.12);
  box-shadow: 1px 1px 2px rgba(224, 206, 174, 0.911);
  box-shadow: -1px -1px -2px rgba(224, 206, 174, 0.911);
}

.label-page .ball-page {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 18px;
  width: 18px;
  transform: translateX(24.5px);
  transition: transform 0.2s linear;
}

.checkbox-sample:checked + .label-page .ball-page {
  transform: translateX(0px);
}

/* .page-bg-dark {
  background-image: url(../images/HCI/backdark.jpg);
}

.page-bg-light {
  background-color: #c50b0b;
  /* #f9f9f9 */
/* } */

/* text color */

.text-dark-mode {
  color: #d4d2d4;
  font-size: 13.7px;
  font-weight: 500;
  font-weight: 450;
  line-height: 1.65;
  word-spacing: 1.1;
}
.text-light-mode {
  color: #504f4f;
  font-size: 13.7px;
  font-weight: 500;
  font-weight: 450;
  line-height: 1.65;
}