body {
  margin: 0;
  padding: 0;
  --bacgroud_1: rgb(30, 49, 54);
  --test: rgb(132, 167, 28);
  --bacgroud_2: rgba(145, 174, 182, 0.205);
  --bacgroud_5: rgba(255, 255, 255, 0.712);
  --bacgroud_3: rgb(211, 236, 241);
  --bacgroud_4: aliceblue;
  --bacgroud_transparent: rgba(145, 174, 182, 0.05);
  --bacgroud_green: rgb(42, 168, 53);
  --bacgroud_red: rgb(158, 50, 50);
  --bacgroud_red_shade: rgba(158, 50, 50, 0.63);
  --bacgroud_orange: rgb(172, 105, 51);
  --bacgroud_orange_shade: rgba(158, 99, 50, 0.63);
  --text_color_gray_trans: rgba(255, 255, 255, 0.24);
  --text_color_gray: rgb(78, 78, 78);
  --text_color_1: rgb(136, 243, 255);
  --text_color_2: rgb(59, 123, 136);
  --text_color_3: rgb(22, 92, 104);
  --text_color_4: rgb(33, 73, 82);
  --shadow: 2px 2px 10px rgba(0, 0, 0, 0.329);
  --shadow_top: -2px -2px 10px rgba(0, 0, 0, 0.288);
  --border: solid 0.5px var(--text_color_3);

  --A: #df1a1a;
  --B: #b4169f;
  --C: #2836d3;
  --D: #813e8b;
  --E: #0e8feb;
  --F: #5ed893;
  --G: #e2d844;
  --H: #16589b;
  --I: #d1a32f;
  --J: #bb4436;
  --K: #ff9900;
  --L: #755ac5;
  --M: #ca7423;
  --N: #148865;
  --O: #c7ca10;
  --P: #0bb8af;
  --Q: #267ab3;
  --R: #8f3c88;
  --S: #238f47;
  --T: #7c140e;
  --U: #20792f;
  --V: #774e99;
  --W: #b93f0f;
  --X: #1f78b4;
  --Y: #727272;
  --Z: #500785;
}
/* --- Light Mode Variables --- */
body.light-mode {
  /* --- Light Mode Variables (Default) --- */
  --background-color-1: rgb(30, 49, 54); /* --bacgroud_1 */
  --background-color-2: rgba(145, 174, 182, 0.205); /* --bacgroud_2 */
  --background-color-3: rgb(211, 236, 241); /* --bacgroud_3 */
  --background-color-4: aliceblue; /* --bacgroud_4 */
  --background-color-5: rgba(255, 255, 255, 0.712); /* --bacgroud_5 */
  --background-color-transparent: rgba(
    145,
    174,
    182,
    0.05
  ); /* --bacgroud_transparent */
  --background-color-green: rgb(42, 168, 53); /* --bacgroud_green */
  --background-color-red: rgb(158, 50, 50); /* --bacgroud_red */
  --background-color-red-shade: rgba(
    158,
    50,
    50,
    0.63
  ); /* --bacgroud_red_shade */
  --background-color-orange: rgb(172, 105, 51); /* --bacgroud_orange */
  --background-color-orange-shade: rgba(
    158,
    99,
    50,
    0.63
  ); /* --bacgroud_orange_shade */
  --text-color-gray-trans: rgba(
    255,
    255,
    255,
    0.24
  ); /* --text_color_gray_trans */
  --text-color-gray: rgb(255, 255, 255); /* --text_color_gray */
  --text-color-1: rgb(136, 243, 255); /* --text_color_1 */
  --text-color-2: rgb(59, 123, 136); /* --text_color_2 */
  --text-color-3: rgb(94, 181, 199); /* --text_color_3 */
  --text-color-4: rgb(33, 73, 82); /* --text_color_4 */
  --shadow: 2px 2px 10px rgba(0, 0, 0, 0.329);
  --shadow-top: -2px -2px 10px rgba(0, 0, 0, 0.288);
  --border: solid 0.5px var(--text-color-3);
  --mode-background: var(--background-color-4);
  --mode-color: var(--text-color-2);

  --bacgroud_1: rgb(255, 255, 255);
  --test: rgb(132, 167, 28);
  --bacgroud_2: rgba(197, 197, 197, 0.219);
  --bacgroud_5: rgba(201, 201, 201, 0.712);
  --bacgroud_3: rgb(233, 233, 233);
  --bacgroud_4: rgb(255, 255, 255);
  --bacgroud_transparent: rgba(173, 173, 173, 0.05);
  --bacgroud_green: rgb(42, 168, 53);
  --bacgroud_red: rgb(158, 50, 50);
  --bacgroud_red_shade: rgba(158, 50, 50, 0.63);
  --bacgroud_orange: rgb(172, 105, 51);
  --bacgroud_orange_shade: rgba(158, 99, 50, 0.63);
  --text_color_gray_trans: rgba(255, 255, 255, 0.24);
  --text_color_gray: rgb(51, 51, 51);
  --text_color_1: rgb(70, 70, 70);
  --text_color_2: rgb(90, 90, 90);
  --text_color_3: rgb(14, 14, 14);
  --text_color_4: rgb(63, 63, 63);
  --shadow: 2px 2px 10px rgba(0, 0, 0, 0.195);
  --shadow_top: -2px -2px 10px rgba(0, 0, 0, 0.115);
  --border: solid 0.5px var(--text_color_3);
}
/* --- Dark Mode Variables --- */
body.dark-mode {
  --background-color-1: rgb(10, 10, 10); /* Dark background */
  --background-color-2: rgba(50, 50, 50, 0.205); /* Dark background */
  --background-color-3: rgb(30, 30, 30); /* Dark background */
  --background-color-4: rgb(50, 50, 50); /* Dark background */
  --background-color-5: rgba(0, 0, 0, 0.712); /* Dark background */
  --background-color-transparent: rgba(50, 50, 50, 0.05); /* Dark background */
  --text-color-gray-trans: rgba(200, 200, 200, 0.24); /* Lighter text */
  --text-color-gray: rgb(180, 180, 180); /* Lighter text */
  --text-color-1: rgb(200, 200, 200); /* Lighter text */
  --text-color-2: rgb(150, 150, 150); /* Lighter text */
  --text-color-3: rgb(180, 180, 180); /* Lighter text */
  --text-color-4: rgb(200, 200, 200); /* Lighter text */
  --shadow: 2px 2px 10px rgba(255, 255, 255, 0.329);
  --shadow-top: -2px -2px 10px rgba(255, 255, 255, 0.288);
  --border: solid 0.5px var(--text-color-3);
  --mode-background: var(--background-color-1);
  --mode-color: var(--text-color-1);

  --bacgroud_1: rgb(31, 31, 31);
  --test: rgb(132, 167, 28);
  --bacgroud_2: rgba(172, 172, 172, 0.205);
  --bacgroud_5: rgba(255, 255, 255, 0.712);
  --bacgroud_3: rgb(26, 26, 26);
  --bacgroud_4: rgb(255, 255, 255);
  --bacgroud_transparent: rgba(173, 173, 173, 0.05);
  --bacgroud_green: rgb(42, 168, 53);
  --bacgroud_red: rgb(158, 50, 50);
  --bacgroud_red_shade: rgba(158, 50, 50, 0.63);
  --bacgroud_orange: rgb(172, 105, 51);
  --bacgroud_orange_shade: rgba(158, 99, 50, 0.63);
  --text_color_gray_trans: rgba(255, 255, 255, 0.24);
  --text_color_gray: rgb(150, 150, 150);
  --text_color_1: rgb(212, 212, 212);
  --text_color_2: rgb(209, 209, 209);
  --text_color_3: rgb(255, 255, 255);
  --text_color_4: rgb(63, 63, 63);
  --shadow: 2px 2px 10px rgba(0, 0, 0, 0.418);
  --shadow_top: -2px -2px 10px rgba(0, 0, 0, 0.466);
  --border: solid 0.5px var(--text_color_3);
}

.container {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  background-color: var(--bacgroud_3);

  scroll-behavior: smooth;
}

.content_section {
  background-color: var(--bacgroud_2);
  flex: 2;
  min-height: 100vh;
  padding-bottom: 100px;
  /* width: 100vw; */
}

.main_menu {
  position: fixed;
  top: 0;
  background-color: var(--bacgroud_1);
  width: 100px;
  height: 100vh;
  color: var(--text_color_1);
  z-index: 1100;
}

.logo {
  width: 25px;
  margin: 20px auto;
}

.logo img {
  width: 100%;
}

.wrap_menu {
  margin: 55px auto;
  padding: 20px 0;
  text-align: center;
}

.wrap_menu div {
  padding: 5px 0;
  margin-top: 30px;
}

.wrap_menu span {
  font-size: xx-large;
}

.wrap_menu a {
  text-decoration: none;
  color: var(--text_color_1);
  font-weight: lighter;
  font-size: small;
  display: block;
  outline: none;
}

.nav {
  display: flex;
  top: 0;
  justify-content: right;
  align-items: center;
  height: 70px;
  /* background-color: var(--bacgroud_4); */
  /* background-color: #d42a2a; */
  color: var(--text_color_2);
  width: 100%;
}

.newreport {
  margin: 0;

  padding: 0 20px;
}

.nav a {
  color: var(--text_color_gray);
  text-decoration: none;
  transition: 0.5s;
  outline: none;
  padding: 0 20px;
}

.nav a:hover {
  color: var(--text_color_3);
}
a {
  color: var(--text_color_gray);
  text-decoration: none;
  transition: 0.5s;
  outline: none;
  padding: 0;
}
a:hover {
  color: var(--text_color_3);
}
h2,
h4 {
  color: var(--text_color_2);
  font-weight: lighter;
  /* margin-bottom: 20px; */
}

.wrap_report {
  position: relative;
  width: 50%;
  margin: 20px auto;
  background-color: var(--bacgroud_3);
  text-align: center;
  padding: 100px 50px;
  min-height: 40vh;
  text-align: center;
}

.wrap_report p {
  font-size: large;
  font-weight: bold;
  color: var(--text_color_2);
}

.wrap_report .live_show {
  margin-bottom: 50px;
}

input,
select {
  width: 90%;
  height: 35px;
  border: none;
  outline: none;
  color: var(--text_color_2);
  height: 15px;
  padding: 10px 20px;
  border-bottom: solid 1px var(--bacgroud_1);
  border-radius: 10px;
  margin-bottom: 20px;
  margin-right: 50px;
  background-color: var(--bacgroud_3);
  text-align: left;
}

select {
  margin-right: 20px;
  width: 90%;
  border: none;
  outline: none;
  color: var(--text_color_2);
  height: 35px;
  padding: 0px 10px;
  border-bottom: solid 1px var(--bacgroud_1);
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: var(--bacgroud_3);
}

textarea {
  min-width: 90%;
  max-width: 90%;
  max-height: 100px;
  border: none;
  outline: none;
  color: var(--text_color_2);
  min-height: 50px;
  padding: 10px 20px;
  border-bottom: solid 1px var(--bacgroud_1);
  border-radius: 5px;
  margin-bottom: 10px;
  margin-left: 0px;
  margin-top: 20px;
  background-color: var(--bacgroud_3);
}

.etvn {
  text-align: left;
  margin-bottom: 50px;
  background-color: var(--bacgroud_2);
  padding: 20px;
  border-radius: 2px;
}

.info_wrpper {
  display: flex;
  justify-content: left;
}

.info_wrpper div {
  margin-left: 20px;
  /* background-color: blue; */
}

.info_wrpper h2 {
  margin: 0;
  text-align: right;
}

.info_wrpper p {
  font-size: x-large;
  font-weight: bold;
}

form button,
.prev_next a {
  margin-top: 20px;
  padding: 10px 50px;
  border: none;
  outline: none;
  background-color: var(--bacgroud_1);
  color: var(--text_color_1);
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
  font-size: small;
}

form button:hover {
  color: var(--bacgroud_3);
  background-color: var(--text_color_4);
}

.prev_next a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  outline: none;
  box-shadow: 2px -5px 10px rgba(0, 0, 0, 0.26);
}

.prev_next a:hover {
  background-color: var(--text_color_2);
}

.report_header {
  margin-bottom: 0px;
  color: var(--text_color_2);
}

.report_header h2 {
  color: red;
}

.prev_next {
  position: fixed;
  right: 50%;
  transform: translateX(50%);
  bottom: 0px;
  text-align: right;
  width: 11%;
  padding: 10px 0;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit_button {
  position: fixed;
  bottom: 100px;
  box-shadow: 2px -5px 10px rgba(0, 0, 0, 0.26);
  right: 50%;
  transform: translateX(50%);
  padding: 15px 50px;
}

#altoedscr {
  width: fit-content;
  margin-right: 50px;
}

#upsreadings {
  width: 8%;
  margin: 2px;
  padding: 7px;
  text-align: center;
}

.addreport {
  text-align: center;
}

.addreport a {
  display: flex;
  align-items: center;
  text-align: center;
}

#missinginstances {
  width: 20%;
}

#ingestfreespacenote,
#newsfreespacenote,
#mgridfreespacenote,
#serbfreespacenote,
#serafreespacenote {
  width: 90%;
  height: 30px;
  margin-top: 30px;
}

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--text_color_2);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background-color: rgb(145, 156, 165);
  margin: -10px 20px;
  padding: 15px 40px;
}

/* Hide the default checkbox */
/* .custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
} */

/* Style the custom checkbox */
input[type="checkbox"]:checked {
  background-color: #d42a2a;
  border-color: #f57878;
}

.loggedin_user {
  /* background-color: #007bff;
  position: absolute;
  right: 400px;
  top: 35px; */
  display: flex;
  justify-content: center;
  /* font-weight: bold; */
}
.firstletter {
  display: flex;
  align-items: center;
  padding: 3px;
  /* background-color: var(--bacgroud_red); */
  /* justify-content: right; */
  border-radius: 50%; /* Make it a circle */
}

.circle {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  width: 40px; /* Set the width and height of the circle */
  height: 40px;
  border-radius: 50%; /* Make it a circle */
  background-color: var(--bacgroud_green); /* Set the background color */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Text color */
  /* font-weight: bold; */
  font-size: large;
  font-weight: lighter;
  transition: transform 0.5s ease;
  border: #ffffff solid 3px;
}
.circle:hover {
  transform: scale(1.05);
}
/* ================================================== */
.date {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  margin-right: 10%;
  /* background-color: brown; */

  position: relative;
}

.date a {
  padding: 0px;
}
.lg_out_wrapper {
  position: absolute;
  overflow: hidden;
  top: 50px;
  right: 50px;
  width: 300px;
  height: fit-content;
  box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  padding-bottom: 20px;

  border-radius: 10px;
  /* text-align: center; */
  /* font-weight: bolder; */
  z-index: 1000;
  background-color: var(--bacgroud_3);
}

.lg_out_wrapper li {
  color: var(--text_color_2);
  /* box-shadow: var(--shadow); */
  padding: 5px 10px;
  width: 100%;
  margin: 2px;
  list-style: none;
}
.eng_name {
  box-shadow: var(--shadow);
  padding: 10px 20px 5px 20px;
}

.lg_out_wrapper li:hover {
  background-color: var(--bacgroud_2);
}
.lg_out_wrapper a {
  display: block;
}

.eng_logout {
  /* box-shadow: var(--shadow_top); */
  padding-bottom: 5px;
  font-weight: bold;
}
.eng_logout:hover {
  background-color: var(--bacgroud_2);
}
.eng_logout a {
  color: var(--text_color_2);
  /* display: block; */
}
.missing_media {
  display: none;
}

label {
  text-align: left;
  margin-left: 10px;
  padding-top: 20px;
}
/* OLD===================================================== */
.old {
  display: none;
}

/* --------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
  .main_menu {
    height: 50px;
    width: 50px;
    font-size: xx-small;
    font-style: italic;

    background-color: transparent;
    padding-top: 0px;
  }

  .wrap_menu {
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    top: auto;
    width: 100%;
    height: 60px;
    background-color: var(--bacgroud_1);
    margin-bottom: 0;
    padding: 0;
    z-index: 1005;
    border-top: var(--text_color_1) solid 0.5px;
  }

  .wrap_menu div {
    margin-top: 0px;
  }

  .wrap_menu div a {
    font-weight: lighter;
    font-size: xx-small;
    outline: none;
  }

  .nav {
    justify-content: right;
    /* background-color: aqua; */
  }

  .nav div {
    font-size: x-small;
    margin: 0px;
    text-align: center;
  }

  .logo {
    margin: 10px 5px;
  }

  .logo img {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.225);
  }

  .date {
    justify-content: right;
    /* background-color: #d42a2a; */
    width: fit-content;
    right: 5px;
  }

  .addreport {
    opacity: 1;
    padding: 2px;
    width: fit-content;
    /* background-color: #d42a2a; */
    text-align: center;
    margin-left: 0px;
  }

  .addreport a {
    width: 100%;
    align-items: center;
    font-size: x-small;
    /* background-color: #d42a2a; */
  }

  .wrap_report {
    width: 99%;
    padding: 0px;
    padding-top: 10px;
    margin-left: 2px;
    padding-bottom: 100px;
    /* background-color: blueviolet; */
    font-size: small;
  }
  .firstletter {
    border-radius: 50%; /* Make it a circle */
    /* background-color: aqua; */
  }
  .content_section {
    width: 89vw;
    overflow: hidden;
  }

  .prev_next {
    justify-content: space-between;
    bottom: 0px;

    width: 100%;
    padding: 0px 0 0px 0;
    background-color: var(--bacgroud_1);
    z-index: 1300;
  }

  .submit_button {
    bottom: 100px;
    padding: 20px 65px;
    right: 50%;
    transform: translateX(50%);
    z-index: 100;
  }

  .prev_next a {
    text-align: center;
    display: block;
    font-size: x-small;
    margin: 10px 10px 5px 10px;
    padding: 10px 5px;
    box-shadow: none;
    outline: none;
  }

  #menu_form_f {
    /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.299); */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: -30px 0 0 0;
    padding: 0;
    font-size: xx-large;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    color: var(--bacgroud_1);
    background-color: var(--text_color_1);
    border: 10px solid var(--bacgroud_1);
  }

  #menu_header_h {
    /* box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.299); */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: -19px 0 0 0;
    padding: 0;
    font-size: xx-large;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    color: var(--bacgroud_1);
    background-color: var(--text_color_1);
    border: 10px solid var(--bacgroud_1);
  }

  #menu_header_h span {
    color: var(--bacgroud_1);
    margin: 22px 0 10px 0;
  }

  .mhh_over {
    background-color: #d42a2a;
    width: 50px;
    height: 50px;
    position: absolute;
  }

  .live_show {
    width: 88%;
    margin: 2px;
    padding: 0;
  }

  .live_show_top {
    width: 88%;
    margin: 2px;
    padding: 0;
  }

  .etvn {
    width: 100%;
  }

  .etvn p {
    font-size: small;
  }

  /*============================ float add button */

  .newreport {
    position: fixed;
    right: 10px;
    bottom: 50px;
    z-index: 1500;
    background-color: var(--bacgroud_3);
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.281);
    margin: 0;
    padding: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

  .newreport a {
    font-size: large;
    margin: -2px;
    padding: 0;
  }

  /* =============================float add button */

  .deshboard {
    outline: none;
    text-align: center;
  }

  .desh {
    font-size: xx-small;
    /* background-color: #d42a2a; */
    width: 60px;
    outline: none;
    overflow: hidden;
  }

  .desh span {
    outline: none;
  }

  a:focus {
    outline: none !important;
  }

  .info_wrpper {
    display: flex;
    justify-content: left;
  }

  .info_wrpper div {
    margin-left: 5px;
    /* background-color: blue; */
  }

  .info_wrpper h2 {
    margin: 0;
    text-align: right;
    font-size: small;
  }

  .info_wrpper p {
    margin-left: 5px;
    font-size: small;
  }

  .live_show {
    margin: 0 5px;
  }
}