/* css reset */
*, *::before, *::after {
    box-sizing: border-box;
    padding:0;
    margin:0;
}

ul, ol {
    list-style-type: none;
}

li {
    margin-bottom: 1rem;
}

li li {
    margin-left: 1rem;
}

ul ul {
    margin-top: 1rem;
}

/* ejerbog */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.3rem;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
}

body {
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    line-height: 1.5;
    font-size: 0.875rem;
    font-weight: 400;
    color: #212529;
}

.app-container {
    /* background: yellow; */
    /* border: 10px solid red; */
    display: grid;
    grid-template-columns: 16.6666666667% 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

.left-bar {
    padding-top: 1rem;
    background: #f8f9fa;
    color: #212529;
    box-shadow: inset -1px 0 0 rgb(0 0 0 / 10%);
}

.nav-link {
    color: #333;
    font-weight: 500;
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.nav-link.active {
    color: #007bff;
}


.header, .footer {
    grid-column-start: 1;
    grid-column-end:   3;
}

.header {
    background: #212529;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    color: white;
    padding: 0.75rem;
    z-index: 1020;
}

.header button.log-out {
    float: right;
}

.header h1 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
}



.footer {
    text-align: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(33, 37, 41, 0.25)

}

hr {
    height: 1px;
    margin-bottom: 1rem;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25;
}

.page {
    margin: 0 1.5rem;
}

.page h3 {
    font-size: 2rem;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem 0;
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
}

.page section {
    margin: 1rem 0;
    background: white;
}

.page section h4 {
    margin-bottom: 1rem;
}

.page .main-point {
    font-weight: bold;
}

.page-out {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.login-box,.select-book-box {
    width: 400px;
    margin: 80px auto;
    padding: 40px;
    text-align: center;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 1rem;
}

.login-box input {
    width: 100%;
    padding: 10px;
    height: 40px;
    border: 1px solid #ccc;
    background: #fafafa;
}

.login-box input[type="text"] {
    border-radius: 5px 5px 0 0;
}

.login-box input[type="password"] {
    border-radius: 0 0 5px 5px;
}

.login-box .login-button,.select-book-box button {
    display: block;
    width: 100%;
    color: #fff;
    background-color: #007bff;
    border-color: #46b8da;
    margin-top: 25px;
    padding: 10px 20px;
    margin-bottom: 0;
    font-weight: 400;
    background-image: none;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
    cursor: pointer;
}

.select-book-box li {
    border: 1px solid black;
    margin: 0;
    border-collapse: collapse;
    text-align: left;
    padding: 0.5rem 1rem;
}

.select-book-box li div.indent {
    margin-left: 1rem;
}

.select-book-box li {
    border: 1px solid #ccc;
    margin: 0;
    border-collapse: collapse;
    transition: background .15s ease-in-out;
    cursor: pointer;
}

.select-book-box li:hover {
    background-color: #fafafa;
    transition: background .15s ease-in-out;
}

.select-book-box .selection-item {
    display: grid;
    grid-template-columns: 1fr 16.6666666667%;
}

.select-book-box button.delete-item {
    margin-top: 0;
    padding: 0.1rem 0.4rem;
    align-self: center;
    justify-self:center;
    width: auto;
    background-color: #dc3545;
    color: #fff;
}

.card {
    margin-bottom: 1.5rem;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card h5 {
    padding: .5rem 1rem;
    margin-bottom: 0;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(0,0,0,.125);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
}

.card h6 {
    padding: .5rem 1rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
}

.card-body {
    padding: 1rem;
}

.card section {
    margin: 1rem 0;
    background: white;
}

.card section h4 {
    margin-bottom: 1rem;
}

.card .main-point {
    font-weight: bold;
}



table {
    border-collapse: collapse;
    max-width: 600px;
    width: 100%;
    font-size: 0.9rem;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.05);
}

th, td {
    padding: 0.6em 0.5em;
    border: 1px solid #ddd;
}

th {
    text-align: left;
}

table.transactions {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;
    caption-side: bottom;
    border-collapse: collapse;
}

table.transactions thead {
    vertical-algin: bottom;
    background-color: #f8f9fa;
}

table.transactions tbody, table.transactions td, table.transactions tfoot, table.transactions th, table.transactions thead, table.transactions tr {
    border-width: 0;
}

table.transactions th, table.transactions td {
    padding: 0.7rem;
}


table.transactions .input-group {
    display: flex;
}

table.transactions input {
    flex: 1 1 auto;
    display: block;
    width: 100%;
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.form-control:disabled {
    background-color: #e9ecef;
}

.right-align {
    text-align: right;
}

.btn {
    margin-right: 0.5rem;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.input-molecule label {
    display: block;
}

.input-molecule input, .input-molecule select {
    display: block;
    width: 80%;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

.form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select {
    font: 400 13.3333px Arial;
}

.form-select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

.vertical-form {
    display:grid;
    grid-template-columns: 16% minmax(440px, 41%);
    grid-gap: 1rem;
}

small {
    font-size: .875em;
    color: #6c757d;
}

address {
    font-style: normal;
}

b, strong {
    font-weight: bolder;
}

button.commit-event {
    padding: 10px 20px;
    margin-top: 1rem;
}

.establishment-container {
    /* background: yellow; */
    /* border: 10px solid red; */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

.wizard-card {
    width: 900px;
    margin: 0 auto;
}

.wizard-card h5 {
    font-size: 1.2rem;
    text-align: center;
}

.wizard-card h6 {
    font-size: 0.8rem;
}

.wizard-card p.info {
    color: #393e53;
    padding: 0.5rem 0;
}

.wizard-card .wizard-input-section {
    margin: 1rem 0;
}

.input-atom {
    margin: 0.5rem 0;
    margin-right: 3rem;
    display: inline-block;
    width: 33%;
}

.input-atom .input {
    margin-left: 0.5rem;
    width: 80%;
}

@keyframes spin {
    100% { transform:rotate(360deg); }
}

@keyframes showup {
    from {opactiy: 0.0;}
    to {opacity: 1.0;}
}

@media only screen and (max-width: 1200px) {
    .page h3 {
        font-size: calc(1.325rem + .9vw);
    }
}

@media only screen and (max-width: 992px) {
    .app-container {
        grid-template-columns: 25% 1fr;
    }
}

@media only screen and (max-width: 768px) {
    .app-container {
        /* background: yellow; */
        /* border: 10px solid red; */
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
    }

    .header, .footer {
        grid-column-end:   2;
    }
}