html {
    margin: 0;
    height: 100%;
}

body {
    margin: 0;
    height: 100%;
    overflow-y: auto;
}

.navbar {
    min-height: 56px;
    flex: 0 0 auto;
}

.notify {
    position: fixed;
    bottom: 1%;
    right: 1%;
    text-align: right;
}

.page-hide {
    opacity: 0;
    transition: opacity 0.25s;
}

.page-show {
    opacity: 1;
    transition: opacity 0.25s;
}

.page-container {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.page-menu {
    flex: 0 0 auto;
}

.page-content {
    flex: 1 1 auto;
    overflow-y: auto;
}

.font-size-sm {
    font-size: small;
}

#dbtable {
    border-spacing: 0;
}

.dataTables_filter {
    text-align: left !important;
}

.dataTables_length {
    text-align: right !important;
}

.input-multival {
    position: relative !important;
}

.input-multival div.form-control {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

#permissions-table thead tr th {
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#permissions-table tbody tr th {
    text-align: right;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#permissions-table tbody tr td {
    text-align: center;
}

#permissions-table tbody tr td:hover {
    background-color: #f8f9fa;
}

.stage3 .card:hover .card-footer {
    background-color: #343a40 !important;
    color: #ffffff;
}

.dropfile {
    border: 2px dashed rgba(0,0,0,0.125);
    cursor: pointer;
    height: 132px;
}

@media (min-width: 992px) {
    .dropfile {
        max-width: 219px;
    }
}

.dropfile.dragenter {
    border: 2px dashed #007bff;
    color: #007bff;
}

.dropfile.loadend {
    border: 2px dashed #28a745;
    color: #28a745;
}

.dropfile.fail {
    border: 2px dashed red;
    color: red;
}

.dropfile div {
    pointer-events: none;
}

.number-keypad {
    display: grid;
    gap: 15px;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: row;
    grid-auto-rows: 90px;
    justify-content: center;
    align-items: stretch;
    padding: 0 5px;
}

.number-keypad > div {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #495057;
    font-size: 1.25rem;
    font-weight: bold;
    border: 2px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: border 1s, color 1s;
}

.number-keypad > div.action {
    background-color: #eee;
}

.number-keypad > div.pressed {
    border: 2px solid #007bff;
    color:#007bff;
    transition: none;
}