@import "variables.css";

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
}

.card {
    background-color: var(--card-background);
    color: var(--card-background-contrast);
}

.card-header, .modal-header {
    background-color: var(--card-background-shade);
}

.card-body, .modal-body {
    background-color: var(--card-background);
}

.card-footer, .modal-footer {
    background-color: var(--card-background-shade);
}

.close {
    color: var(--text-color);
}

input[type="text"], input[type="password"] {
    background-color: var(--background-shade-light);
    border: 1px solid var(--background-shade);
    color: var(--text-color);
}

input[type="text"]::placeholder, input[type="password"]::placeholder {
    color: var(--background-shade);
}

button[type="button"] i {
    color: var(--text-color);
}

.search-input {
    width: 100%;
}

.control-icons {
    min-width: 90px;
}

footer {
    text-align: center;
}

.table {
    color: var(--text-color);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--background-shade);
    color: var(--text-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    color: var(--text-color);
}

.marietjequeue {
    color: #777777;
}

.table-striped > tbody > tr.marietjequeue:nth-of-type(odd) > * {
    color: #777777;
}

.marietjequeue-pre-start td {
    border-bottom: 3px double var(--text-color);
}

.marietjequeue-post-start td {
    border-top: 3px double var(--text-color);
}

.ownsong {
    border-left: 1px solid var(--text-color);
}

.currentsong {
    border-bottom: 1px solid var(--text-color);
    font-weight: bold;
}

.underline_cell {
    border-bottom: 1px solid var(--text-color);
}

.block-button {
    border-color: #cccccc;
    color: #337ab7;
    transition: 1s transform ease-in-out;
}

.btn-link {
    text-decoration: none;
}

.navbar-text {
    color: var(--text-color);
}

.danger {
    color: red !important;
}

/* Bootstrap 3 doesn't support equal height columns, hack via <https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27#892f> */
.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}