body {
    min-height: 100vh;
}

body.dragging {
    background-color: #cfe2ff;
}

body.dragging #new_text,
body.dragging #new_url,
body.dragging #new_file {
    background-color: #cfe2ff;
}





.header {
    background-color: #4dd4ac;
}

.header h1 {
    font-family: var(--bs-font-monospace);
    text-align: center;
    margin: 0;
    font-weight: bold;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 2.5rem;
    padding-top: 2.5rem;
    padding-bottom: 4.75rem;
    /*text-shadow: 1px 1px 1px white;*/
}

.header h1 .logo {
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 1.25rem;
}





.navigation {
    margin-top: -2.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navigation .form {
    display: flex;
    justify-content: center;
}

.navigation .form .id {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    padding: 0rem;
    border-radius: 1rem;
    width: 100%;
}

.navigation .form .id input {
    font-family: var(--bs-font-monospace);
    text-align: center;
    line-height: 1;
    padding: 1rem;
    background-color: #ffffff;
    border: 0;
    text-transform: uppercase;
    border-radius: 0.75rem;
    height: 4.5rem;
    font-size: 2rem;
    letter-spacing: 0.5rem;
}

.navigation .form .navbtn {
    background-color: #ffffff;
    border-radius: 0.75rem;
}
.navigation .form .navbtn div {
    cursor: pointer;
    border-radius: 0.75rem;
}
.navigation .form .navbtn div img {
    transition: all 0.3s;
    width: 4.5rem;
    height: 4.5rem;
    padding: 0.75rem;
}

.navigation .buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.navigation .buttons .navbtn {
    background-color: #ffffff;
    border-radius: 0.75rem;
}
.navigation .buttons .navbtn div {
    cursor: pointer;
    border-radius: 0.75rem;
}
.navigation .buttons .navbtn div img {
    /*transition: all 0.3s;*/
    width: 4.5rem;
    height: 4.5rem;
    padding: 1.25rem;
}
.navigation .buttons .navbtn div:hover img {
    /*transform: scale(1.375);*/
}

.navigation-tooltip {
    --bs-tooltip-max-width: 12.5rem;
    font-size: 1.25rem;
}

@media (min-width: 768px) {

    .navigation .buttons {
        justify-content: flex-end;
        margin-top: 0;
    }

}





.items {
    background-color: #ffffff;
    border-radius: 0.75rem;
    margin-top: 3rem;
}

#items_table {
    margin: 0;
}

#items_table * {
    font-family: var(--bs-font-monospace);
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.8rem;
}

#items_table tbody tr td {
    padding: 1rem;
}

#items_table tbody tr:first-child td:first-child {
    border-top-left-radius: 0.75rem;
}
#items_table tbody tr:first-child td:last-child {
    border-top-right-radius: 0.75rem;
}

#items_table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 0.75rem;
}
#items_table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0.75rem;
}
#items_table tbody tr:last-child td {
    border-bottom: 0;
}

#items_table tbody .name {
    padding: 8px 0 8px 40px;
    text-decoration: none;
}

#items_table tbody .name:hover {
    text-decoration: underline;
}

#items_table tbody .type-text .name { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23000000' d='M14 17H4v2h10v-2zm6-8H4v2h16V9zM4 15h16v-2H4v2zM4 5v2h16V5H4z'/%3E%3C/svg%3E") no-repeat scroll 0px 4px; }
#items_table tbody .type-url  .name { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%230d6efd' d='M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'/%3E%3C/svg%3E") no-repeat scroll 0px 4px; }
#items_table tbody .type-file .name { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='%23aaaaaa' d='M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3C/svg%3E") no-repeat scroll 0px 4px; }

#items_table tbody .delete {
    display: inline-block;
    min-width: 70px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border: 0;
    margin: 0;
    border-radius: 50rem;
    padding: 0.25rem 0.375rem;
    color: #ffffff;
    background-color: var(--bs-danger);
}

#items_table tbody .item-placeholder {
    text-align: center;
    color: var(--bs-primary);
    font-weight: bold;
    padding: 0;
}
#items_table tbody .item-placeholder span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
}





#new_text {
    height: 110px;
    background-color: #eeeeee;
    font-family: var(--bs-font-monospace);
}

#new_url {
    background-color: #eeeeee;
    font-family: var(--bs-font-monospace);
}

#new_file {
    background-color: #eeeeee;
    font-family: var(--bs-font-monospace);
}





#view_text {
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
    background-color: #eeeeee;
    height: 50vh;
    scrollbar-width: thin;
}





#modal_qrcode .modal-dialog {
    max-width: 300px !important;
    margin-right: auto;
    margin-left: auto;
}

#modal_qrcode .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}

#modal_qrcode .id {
    font-family: var(--bs-font-monospace);
    text-align: center;
    line-height: 1;
    text-transform: uppercase;
    font-size: 2rem;
    letter-spacing: 0.5rem;
    margin-top: 2rem;
    line-break: anywhere;
}