/*------------------------------------------------
background and primary font
------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap');


html {
  height: 100%;
}

body {
  background: var(--stone-300);
  color: var(--stone-600);
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  min-height: 100%;
}

.page-vertical-centered {
  overflow: hidden;
  position: absolute;
  width: 100%;
  align-items: center;
  display: flex;
  height: 80%;
  justify-content: center;

}

.page-horizontal-centered {
	margin: 1rem auto;
  width: 500px;
}


/*------------------------------------------------
 * links
 * ------------------------------------------------*/

a,
a:hover {
  color: var(--matcha-800);
  outline: none;
  text-decoration: none;
}


/*------------------------------------------------
 * add (plus) button links
 * ------------------------------------------------*/

.square-button {
  background: var(--stone-125);
  border: solid 1px var(--stone-200);
  border-radius: 4px;
  color: var(--matcha-800);
  outline: none;
  padding: 3px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card-title a[href*="/add"]:hover,
.card-title a[data-bs-toggle="modal"]:hover {
  background: var(--stone-125);
  color: var(--matcha-800);
}


/*------------------------------------------------
 * cards
 * ------------------------------------------------*/

.card {
  background: var(--stone-100);
  margin-bottom: 2rem;
  padding: 1rem;
  padding-bottom: 1.5rem;
}

.card-close {
  float: right;
}

.card-title {
  margin-bottom: 1rem;
}

.card-text {
  margin-bottom: 1rem;
}

.card > .list-group {
  border: none;
}


/*------------------------------------------------
 * utility classes
 * ------------------------------------------------*/

.strong {
  font-weight: 500;
}


/*------------------------------------------------
 * typography
 * ------------------------------------------------*/

.page-vertical-centered h1 {
  color: var(--matcha-900);
  font-size: 1.5em;
}

.page-vertical-centered h1,
.page-vertical-centered p {
  text-align: center;
}

h1 {
  font-weight: normal;
  font-size: 1.15rem;
  margin-bottom: 0;
}

h2 {
  font-weight: normal;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

strong{
  font-weight: 600;
}

.strong {
	font-weight: 600;
}

.mh-alert {
  color: var(--red-700);
}

.soon {
  color: var(--red-700);
}


/*------------------------------------------------
 * tables
 * ------------------------------------------------*/

.table {
  color: inherit;
}

th {
  font-weight: 500;
}


/*------------------------------------------------
 * lists
 * ------------------------------------------------*/

li {
	list-style-type: none;
}

.list-group {
  border: none;
  border-radius: 0;
}

.list-group-item {
  background: none;
  border-left: none;
  border-right: none;
  color: inherit;
  padding: 0.5rem 0 0.5rem 0.5rem;
}


/*------------------------------------------------
 * buttons
 * ------------------------------------------------*/

.btn {
  font-size: 1em;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background: var(--matcha-900);
  border: none;
  color: var(--stone-50);
}

.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--stone-400);
  border: none;
  color: white;
}

.btn-icon {
  background: none;
  border: none;
  padding: none;
}

.btn-slim {
  font-size: 0.97rem;
  padding: 0.1rem 0.4rem;
}

.btn-outline-danger {
  color: var(--orange-700);
  background-color: var(--stone-100);
  border-color: var(--orange-700);
}

/*------------------------------------------------
 * dropdowns
 * ------------------------------------------------*/

.menu-icon {
  color: var(--stone-350);
  padding: 0;
}

.dropdown-menu {
  background: var(--stone-100);
}

.dropdown-item:focus,
.dropdown-item:hover {
  background: var(--stone-200);
}



/*------------------------------------------------
 * modals
 * ------------------------------------------------*/

.modal-content {
  background: var(--stone-100);
}

.modal-content .form-control {
  background: var(--stone-50);
}

/* Custom alert modal */
.custom-alert-modal {
  background: var(--stone-100);
}

/* Override Bootstrap modal backdrop */
.modal-backdrop.show {
  background-color: var(--stone-300);
  opacity: 0.8;
}

/*------------------------------------------------
 * utilities
 * ------------------------------------------------*/

.mh-ft {
  align-items: start;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mh-ftl {
  align-items: start;
  display: flex;
  flex-direction: row;
}

.mh-fc {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mh-fcl {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.mh-fe {
  align-items: end;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.mh-bottom-right {
  margin-top: 1rem;
  text-align: right;
}