body {
  position: relative;
  overflow-x: hidden;
  background-color: #efefef !important;
  margin: 0 !important;
}
body,
html {
  height: 100%;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^styles Nav form ^^^^^^^^^^^^^^^^^^^^^^^^^^ */
input:focus {
  border-color: transparent;
}
button {
  border: 0px;
  background-color: transparent;
}
.pagination-button {
  display: flex;
  justify-content: space-evenly;
  margin-top: 2rem;
}
.pagination-button button {
  border: 1px solid lightgray;
  padding: 0.5rem;
  margin-bottom: 3rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-top: 0.4rem;
  height: fit-content;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 20px;
  color: #fff;
  border: 0px solid #e83600;
  white-space: nowrap;
  background: linear-gradient(180deg, #ff8a66 0%, #fe4108 100%);
  background: linear-gradient(180deg, #3b4259 0%, #05070a 100%);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  margin-right: 1rem;
}
.action-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin: auto;
  margin-top: 0.4rem;
  height: fit-content;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 14px;
  text-decoration: none;
  color: #fff;
  border: 0px solid #e83600;
  max-width: 5rem;
  white-space: nowrap;
  background: linear-gradient(180deg, #ff8a66 0%, #fe4108 100%);
  background: linear-gradient(180deg, #394156 0%, #05070a 100%);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.form-button {
  border-radius: 12px;
  margin-top: 0.2rem;
  height: fit-content;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 20px;
  color: #fff;
  border: 0px solid #e83600;
  white-space: nowrap;
  background: linear-gradient(180deg, #3b4259 0%, #05070a 100%);
  margin-right: 1rem;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.addbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem;
  /* margin-left: 1.8rem; */
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 8px 20px;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(180deg, #ff8a66 0%, #fe4108 100%);
  background: linear-gradient(180deg, #394055 0%, #05070a 100%);
  max-width: fit-content !important;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.Edit-or-view-button {
  text-align: end;
  cursor: pointer;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: transparent;
}

/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#wrapper.toggled {
  padding-left: 220px;
}
@media (max-width: 786px) {
  #wrapper.toggled {
    padding-left: 0px;
  }
}

#sidebar-wrapper {
  z-index: 1000;
  left: 220px;
  width: 0;
  height: 100%;
  margin-left: -220px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgb(37, 75, 111);
  background-color: #191f2f;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
@media (max-width: 786px) {
  #sidebar-wrapper {
    z-index: 1000;
    left: 220px;

    width: 0;
    height: 100%;
    margin-left: auto;
    overflow-y: auto;
    overflow-x: hidden;
    background: rgb(37, 75, 111);
    background-color: #191f2f;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  }
  /* Your CSS styles for screens less than 786px wide go here */
}
#sidebar-wrapper li {
  margin-bottom: 1rem !important;
}
#sidebar-wrapper a {
  font-size: 0.9rem;
  color: white;
}

#sidebar-wrapper::-webkit-scrollbar {
  display: none;
}

#wrapper.toggled #sidebar-wrapper {
  width: 220px;
}
@media (max-width: 786px) {
  #wrapper.toggled #sidebar-wrapper {
    width: 190px;
  }
}

#page-content-wrapper {
  width: 95%;
  margin: 2rem;
  border-top: 1px solid black;
  border-radius: 0.8rem;
  background-color: white !important;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
#page-content-wrapper form {
  border: 0px !important;
}
#page-content-wrapper form img {
  width: 12rem;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

#wrapper.toggled #page-content-wrapper {
  margin-right: -220px;
}

/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/

.sidebaricon {
  filter: invert(1);
  margin-right: 1rem;
  width: 1rem;
}
.navbar {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  border: 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}
.navbar .success-message,
.failure-message {
  position: absolute;
  left: 0;
  right: 0;
  width: fit-content;
  display: none !important;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  height: fit-content;
  font-weight: 600;
  font-size: 1rem;
  padding: 9px 30px;
  color: #fff;
  border: 0px solid #e83600;
  white-space: nowrap;
  background: linear-gradient(180deg, #3b4259 0%, #05070a 100%);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  transform: translateY(-200%);
  transition: transform 0.3s ease-in-out;
  animation: slideBack 8s ease-in-out forwards;
}
.visible {
  transform: translateY(0);
  display: flex !important;
}

@keyframes slideBack {
  0% {
    transform: translateY(-400%);
  }
  10% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(0%);
  }
  70% {
    transform: translateY(0%);
  }
  90% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-400%);
  }
}
.success-message p,
.failure-message p {
  margin: 0;
}
.success-message img,
.failure-message img {
  margin-right: 0.5rem;
}
.navbar h5 {
  color: rgb(10, 10, 10) !important;
  font-weight: 700;
  opacity: 0.7;
  font-size: 1.3rem;
}
.navbar .logout-user {
  display: flex;
  margin-right: 1rem;
  align-content: center;
}
.navbar .logout-user img {
  align-self: self-end;
  width: 2.5rem;
  height: 2.5rem;
}

.sidebar-nav {
  position: absolute;
  top: 0;
  width: 220px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-nav li {
  position: relative;
  line-height: 20px;
  display: inline-block;
  width: 100%;
}

.sidebar-nav li:hover {
  background: #474c59 !important;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before {
  width: 100%;
  -webkit-transition: width 0.2s ease-in;
  -moz-transition: width 0.2s ease-in;
  -ms-transition: width 0.2s ease-in;
  transition: width 0.2s ease-in;
}

.sidebar-nav li a {
  display: block;
  color: #ddd;
  text-decoration: none;
  padding: 10px 15px 10px 30px;
}

.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus {
  color: #fff;
  text-decoration: none;
  background-color: transparent;
}
.sidebar-header {
  margin-bottom: 1rem;
  text-align: center;
  font-size: 20px;
  position: relative;
  width: 100%;
  display: inline-block;
}
.sidebar-brand {
  height: 65px;
  position: relative;
  background-color: #191f2f;
  padding-top: 1em;
}
.sidebar-brand img {
  width: 70%;
  height: auto;
}

.dropdown-header {
  text-align: center;
  font-size: 1em;
  color: #ddd;
  background: #212531;
  background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
}
.sidebar-nav .dropdown-menu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #222;
  box-shadow: none;
}

/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

.hamburger {
  filter: invert(1);
  z-index: 999;
  display: block;
  width: 32px;
  height: 32px;
  margin-left: 15px;
  background: transparent;
  border: none;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^Main page ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^styles for login form ^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.card {
  border: none;
  height: 320px;
  position: absolute;
  top: 25%;
  margin: 2rem;
  border-top: 1px solid black;
  border-radius: 1rem !important;
  background-color: white !important;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
.form-data .error {
  margin: 1rem;
  margin-top: 0;
  color: red;
  font-weight: 600;
}
.forms-inputs {
  position: relative;
}
.forms-inputs span {
  position: absolute;
  top: -18px;
  left: 10px;
  background-color: #fff;
  padding: 5px 10px;
  font-size: 15px;
}
.forms-inputs input {
  height: 50px;
  padding-left: 1rem;
  border-radius: 0.3rem;
  border: 2px solid #eee;
}
.forms-inputs input:focus {
  box-shadow: none;
  outline: none;
  border: 2px solid #afafaf;
}
.btn {
  height: 50px;
}

.bxs-badge-check {
  font-size: 90px;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^Tables^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.table-container .dropdown {
  position: relative;
  display: inline-block;
}

.table-container .dropbtn {
  padding: 10px 20px;
  /* background-color: #007bff; Button color */
  background-color: #191f2f;
  color: #fff; /* Text color */
  cursor: pointer;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

.table-container .dropdown-content {
  display: none;
  position: absolute;
  left: -50px;
  z-index: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.table-container .dropdown-content button {
  width: 100%;
  text-align: left;
  padding: 10px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.table-container .dropdown-content a {
  width: 100%;
  text-align: left !important;
  padding: 10px;
  display: block;
  color: black;
  font-weight: 400;
  text-decoration: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.table-container .dropdown-content button:hover,
.table-container .dropdown-content a:hover {
  background-color: #ddd;
}

.table-container .dropdown:hover .dropdown-content {
  display: block;
}

.table-container .dropdown:hover .dropbtn {
  background-color: #242424;
}

#table-page-content-wrapper .navbar {
  background-color: transparent !important;
  box-shadow: none !important;
}

#table-page-content-wrapper .navbar form {
  position: relative;
}
#table-page-content-wrapper .navbar form .clear {
  position: absolute;
  opacity: 0.5;
  left: 60%;
  top: 20%;
}
#table-page-content-wrapper .navbar form .clear img {
  width: 25%;
}
.table-container {
  overflow-x: visible !important;
  padding: 0 !important;
  min-width: 95% !important;
  max-width: max-content;
  margin: auto;
  border: 1px solid lightgray;
  border-radius: 10px !important;
  text-align: center;
  /* overflow: hidden; */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

.content-table {
  margin: auto;
  width: 100%;
}
.content-table thead {
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.content-table thead tr {
  background-color: #191f2f;
  background: linear-gradient(180deg, #394055 0%, #05070a 100%);

  font-weight: 500;
  font-size: 0.8rem;
  color: white;
}
.content-table th,
.content-table td {
  padding: 12px 15px;
}
.content-table th,
td {
  text-align: center !important;
}
.content-table th {
  font-weight: 600;
}
.content-table td {
  font-weight: 700;
  font-size: 0.8rem;
  color: gray;
}
.content-table tbody tr {
  border-bottom: 1px solid lightgrey;
}
.content-table tbody tr:last-of-type {
  border-bottom: 2px solid #191f2f;
}
.table_button {
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  padding: 5px 20px;
  color: #fff;
  border: 1px solid #e83600;
  white-space: nowrap;
  margin-right: 1rem;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: linear-gradient(180deg, #ff6d41, #e83600);
}

.icon_button:hover {
  background-color: white;
}
.green {
  margin: auto;
  width: 16px;
  height: 16px;
  background-color: #00c30d;
  border-radius: 2rem;
}
.red {
  width: 16px;
  height: 16px;
  background-color: #ff0000;
  border-radius: 2rem;
  margin: auto;
}
.remove-icon {
  width: 2.3rem;
  cursor: pointer;
}

/* ^^^^^^^^^dashboard-content^^^^^^^^^^^^^^^^^^^  */
.dashboard .col-md-4 {
  margin-top: 0 !important;
}
.dashboard .analytics {
  font-size: 2rem;
  font-weight: 700;
  opacity: 0.7;
  margin-left: 1rem;
}
/* ^^^^^^^^^^^^^^^^^^top box start here */
.top-box-container {
  position: relative;
  margin-top: 1.8rem;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.25);
  background-color: white;
  padding: 0;
  padding-top: 1rem;
  border-radius: 0.2rem;
}
.top-box-container .last-hour {
  position: absolute;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.25);

  top: -18px;
  right: 0px;
  color: white;
  border-radius: 2px;
  font-weight: 700;
  font-size: 12px;
  padding: 5px;
  background-color: #15ba20d1;
}

.top-box {
  display: flex;
  justify-content: space-around;
  text-align: end;
  color: rgb(58, 58, 58);
}
.top-box-container hr {
  margin: 0 !important;
}
.top-box-container .date-info {
  display: flex;
  justify-content: space-between;
  padding-left: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.top-box-container .date-info p {
  margin: 0.3rem;
  font-size: 12px;
  opacity: 0.8 !important;
}
.top-box-container .date-info img {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
}
.top-box .inner-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.25);
  background-color: #f3797e;
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  margin-top: -3rem;
}
#first-top-box .inner-box {
  background-color: #39d2bc;
}
#second-top-box .inner-box {
  background-color: #7dabfa;
}
#third-top-box .inner-box {
  background-color: #f3797e;
}
#fourth-top-box .inner-box {
  background-color: #51a8ed;
}
.top-box .inner-box img {
  width: 2.2rem;
  height: 2.2rem;
  filter: invert(1);
}
.top-box .datacontent {
  display: flex;
  flex-direction: column;
}
.top-box .datacontent h5 {
  font-weight: 700;
  font-size: 1rem;
  opacity: 0.5;
}
.top-box .datacontent h1 {
  font-weight: 400 !important;
  opacity: 0.8;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^top box end here^^^^^^^^^^^^^^^^^^^^^^^^^^^ */

/* .data-box {
  /* border-radius: 0.5rem;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.25);
  border-top: 0;
  display: flex;
  height: 10rem;
  padding: 0;
  padding-top: 2rem;

  padding-left: 3rem !important;
  color: white;
  padding-bottom: 2rem; 
  margin-top: 2rem;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.25);
  background-color: white;
  padding: 0;
  padding-top: 1rem;
  border-radius: 0.2rem;
} */

/* new box style start here  */
.data-box {
  display: flex;
  justify-content: space-around;
  text-align: start;
  color: rgb(58, 58, 58);
}
.box-container {
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.25);
  border-radius: 0.6rem;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}

.data-box .content-box {
  display: flex;
}
.data-box .inner-box img {
  width: 2.2rem;
  height: 2.2rem;
  filter: invert(1);
}
.data-box .inner-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.25);
  background-color: #f3797e;
  width: 4rem;
  height: 4rem;
  border-radius: 0.8rem;
}
.data-box .datacontent {
  display: flex;
  flex-direction: column;
}
.data-box .datacontent h5 {
  font-weight: 700;
  font-size: 1rem;
  opacity: 0.5;
}
.data-box .datacontent h1 {
  font-weight: 400 !important;
  opacity: 0.8;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.box-container hr {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
}
.data-box .vertical_line {
  width: 0.6rem;
  margin-right: 1rem;
  height: 130%;
  background-color: white;
  border-radius: 2rem;
}

/* new box end here */

.dashboard .box-container {
  /* background-color: #39d2bc;
  background: linear-gradient(180deg, #54eed7 0%, #22b6a0 100%); */
  background-color: white;
  height: 11rem;
}
.dashboard #first-box .vertical_line,
#first-box .inner-box {
  background-color: #39d2bc;
  border-top: 2px solid #39d2bc;

  /* background: linear-gradient(180deg, #54eed7 0%, #22b6a0 100%); */
}
.dashboard #first-box {
  border-top: 2px solid #39d2bc;
}
.dashboard #second-box .vertical_line,
#second-box .inner-box {
  background-color: #7dabfa;
  /* background: linear-gradient(180deg, #fe9397 0%, #d45c60 100%); */

  /* height: 12rem; */
}
.dashboard #second-box {
  border-top: 2px solid #7dabfa;
  /* background: linear-gradient(180deg, #fe9397 0%, #d45c60 100%); */

  /* height: 12rem; */
}

.dashboard #third-box .vertical_line,
#third-box .inner-box {
  background-color: #00ecb9;
  /* background: linear-gradient(180deg, #1affcd 0%, #03bb93 100%); */
}
.dashboard #third-box {
  border-top: 2px solid #00ecb9;
  /* background: linear-gradient(180deg, #1affcd 0%, #03bb93 100%); */
}
.dashboard #fourth-box .vertical_line,
#fourth-box .inner-box {
  background-color: #f3797e;
  /* background: linear-gradient(180deg, #8eb7fc 0%, #517cc7 100%); */
}
.dashboard #fourth-box {
  border-top: 2px solid #f3797e;
  /* background: linear-gradient(180deg, #8eb7fc 0%, #517cc7 100%); */
}