.btn {
  background: var(--dark-color);
  padding: 12px 30px;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
  color: var(--light-hover-color) !important;
  position: relative;
  display: inline-block;
  min-width: 130px;
}

.btn:hover {
  background: var(--medium-dark-color);
}

.btn:active {
  top: 1px;
}

.btn:last-child {
  margin-right: 0;
}

.btn-primary:focus, .btn-primary:hover, .btn-primary {
    background-color: var(--dark-color) !important;
}

.btn-smoll {
    padding: 2px !important;
    min-width: 60px !important;
    margin: 2px !important;
    margin-left: 4px !important;
}

.btn-inverse
{
    border-radius: 3px;
    border: 1px solid var(--medium-dark-color);
    padding: 5px 10px 5px 10px !important;
    min-width: 60px;
    width: fit-content;
    background-color: var(--very-light-gray);
    color: var(--dark-color) !important;
}

.btn-close {
    padding: 0px 6px;
    border-radius: 3px;
    margin-right: 10px;
    margin-left: 10px;
}

.btn-add, .btn-remove, .btn-teaching, .btn-drop, .btn-unsched {
    padding: 12px 30px;
    border-radius: 3px;
    position: relative;
    display: inline-block;
}

.btn-add, .btn-close {
    background: var(--dark-color);
    color: var(--light-hover-color);
}

.btn-remove {
    background-color: var(--grayed-medium-color);
    color: var(--dark-color);
}

.btn-teaching {
    background: var(--alert-background);
    border: 1px solid var(--alert-color);
    color: var(--alert-color) !important;
}

.btn-drop, .btn-unsched {
    background-color: var(--light-color);
    color: var(--dark-color);
}