@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    --bs-link-color: #455560;
    --bs-link-color-rgb: 69, 85, 96;
    --bs-link-hover-color: #2f3941;
    --bs-link-hover-color-rgb: 47, 57, 65;
}

@view-transition {
  navigation: auto;
}

.btn-primary {
    --bs-btn-bg: #455560;
    --bs-btn-border-color: #455560;
    --bs-btn-hover-bg: #2f3941;
    --bs-btn-hover-border-color: #2f3941;
    --bs-btn-active-bg: #2f3941;
    --bs-btn-active-border-color: #2f3941;
    --bs-btn-disabled-bg: #455560;
    --bs-btn-disabled-border-color: #455560;
}

.btn-outline-primary {
    --bs-btn-color: #455560;
    --bs-btn-border-color: #455560;
    --bs-btn-hover-bg: #455560;
    --bs-btn-hover-border-color: #455560;
    --bs-btn-active-bg: #455560;
    --bs-btn-active-border-color: #455560;
}

.page-link {
    --bs-pagination-color: #455560;
    --bs-pagination-hover-color: #2f3941;
    --bs-pagination-focus-color: #455560;
    --bs-pagination-active-bg: #455560;
    --bs-pagination-active-border-color: #455560;
}

body {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    padding-top: 100px;
}

header {
    background-color: #455560;
    padding: 1.5rem;
}

header img {
    height: 40px;
}

.rename-icon {
    font-size: .8em;
    cursor: pointer;
}

.inline-edit-input {
    min-width: 200px;
    max-width: 70%;
}

.datetime-input {
    width: auto;
}

@media (max-width: 767.98px) {
    .table thead { display: none; }
    .table tbody tr {
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-rows: auto auto auto auto;
        border-bottom: 1px solid #dee2e6;
        padding: 1rem 0;
    }
    .table tbody td {
        border: 0 !important;
        padding: 0.15rem 0.5rem;
    }
    .table tbody td:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 5;
        align-self: start;
        padding-right: 0.75rem;
    }
    .table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; }
    .table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; }
    .table tbody td:nth-child(4) { grid-column: 2; grid-row: 3; }
    .table tbody td:nth-child(5) { grid-column: 2; grid-row: 4; }
}