body {
  background-color: #eaeaea;
}

.form-control,
#dateSelectedInput {
  border-radius: 5px;
}

.btn {
  border-radius: 3px;
}

.header-schedule {
  width: 100%;
  height: 70px;
  background-color: #2c4579;
}

.appointment-box {
  padding: 10px;
  border: solid 2px #cecece;
  border-radius: 8px;
  -webkit-box-shadow: 21px 16px 14px -8px rgba(0, 0, 0, 0.23);
  box-shadow: 21px 16px 14px -8px rgba(0, 0, 0, 0.23);
  background-color: white;
  border-top: 6px solid #344679;
}

.appointment {
  padding: 10px 10px;
  background-color: #f1f1f1;
  margin: 3px 5px;
  border-radius: 5px;
}

.appointment:hover {
  cursor: pointer;
  background-color: #eceaea;
}

.availability-selected {
  padding: 10px 10px;
  margin: 3px 5px;
  background-color: #98c200;
  color: white;
}

.swal-button--confirm{
  background-color: #98c200;
}

.image{
  width: 200px;
  padding: 5px;
}

#html_element div {
  margin: auto;
}

.badge-info{
  background-color: rgb(216, 22, 48);
}

.badge-primary{
  background-color: rgb(0, 110, 255);
}

@media (max-width: 600px) {
  .content {
      width: 280px;
      margin: auto;
  }

  #container{
      padding-left: 0px;
      padding-right: 0px;
  }
}

@media (min-width: 601px) {
  .content {
      width: 680px;
      margin: auto;
  }
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}