html body{
  background-color: #eaeaea;
  margin-bottom: 25px;
}

body {
  overflow-x: hidden;
}

.nav {
  margin-bottom: 20px;
}

#map {
  height: 550px;
  /* width: 100%; */
  margin: 20px 30px 10px 30px;
  border-radius: 3px;
}

.row {
  display: flex;
  margin: 5px 0px 0px 0px !important;
  justify-content: center;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 20%;
  border-radius: 2%;
  margin: 15px;
  position: relative;
  background-color: white;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.info {
  padding: 2px 16px;
  /* padding: 2px 60px 16px 60px; */
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

#card-name {
  padding: 10px 16px;
}

.chart {
  margin-left: auto;
  margin-right: auto;
}

table{
  margin: auto !important;
}

table.table-hover{
  border: 0.5px solid rgb(214, 213, 213);
}

.card-columns{
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
}

.card-header{
	font-size: 20px;
	font-weight:bold;
	background-color: #333;
	color: white;
	text-align: center;
}

.card-body{
	padding-top: 20px;
	text-align: center;
}

.hidden_row {
  display:none;
  background-color: white;
}

.hidden_td {
  vertical-align: middle !important;
}

.table_row:hover {
  cursor: pointer;
}

#back_button{
  margin: 20px 0px 0px 20px;
}

nav.flex.items-center.justify-between {
  justify-content: center;
  margin-top: 20px;
}

.configs {
  margin: 25px 20px 20px 30px;
}

#time {
  width: 250px;
}

#distance {
  width: 250px;
}

#timeInput {
  display: none;
}

#distanceInput {
  display: none;
}

.form-group {
  margin-left: 30px;
}

#submitButton {
  margin-left: 30px;
}

.card-header {
  background-color: #343a40 !important;
}

.login {
  margin-right: 70px;
}

.logout {
  color: red !important;
}

.login_card {
  background-color: white;
  border-radius: 1%;
  margin-top: 20px;
}

.pagination {
  justify-content: center;
  margin-top: 40px;
}

.page-item.active .page-link {
  background-color: #343a40 !important;
  border-color: #343a40 !important;
  color: white !important;
}

.page-link {
  color: #686363 !important;
  border: none !important;
  border: 1px solid #dee2e6 !important;
}

li.page-item {
  width: 3%;
}

.about {
  margin: 50px 80px 0px 80px;
}

.about-table {
  height: 50px;
  line-height: 50px;
}

.mobile {
  display: none !important;
}

.chart-container {
  width: calc(65%);
  margin: auto;
  justify-content: center;
}




@media only screen and (max-width: 900px) and (orientation: portrait){
  .navbar-collapse {
      padding: 0px 20px 0px 20px;
  }

  .card {
    width: 100%;
    /* height: 200px; */
    margin: 10px;
  }

  .row {
    flex-wrap: nowrap !important;
  }

  .btn-primary {
    height: 50px;
    padding: 8px !important;
  }

  li.page-item {
    width: 15%;
  }

  .pc {
    display: none !important;
  }

  .mobile {
    display: block !important;
  }

  .form-group {
    margin-left: 0px;
  }

  #submitButton {
    margin-left: 0px;
  }

  #time {
    width: 200px;
  }
  
  #distance {
    width: 200px;
  }

  .about {
    margin: 50px 20px 0px 20px;
  }
  
  .about-table {
    height: 50px;
    line-height: 30px;
  }

  .row.mb-3{
    flex-wrap: wrap !important;
  }
}