html, body {
    height: 100%;
}

.page-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    display: flex;
    flex-direction: column;
    max-height: 100vh;
}

.top-row {
    flex-shrink: 0;
}

article.content {
    flex-grow: 1;
    padding-bottom: 1.1rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: auto;
}

div.tab-control-body {
    border-top-width: 0 !important;
    border-width: 1px;
    border-style: solid;
    border-color: var(--bs-border-color);
    padding: 1rem;
}

.nav-tabs .nav-link {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.navbar-version {
    flex-basis: 100%;
    font-size: 10px;
    line-height: 10px;
    margin-top: -10px;
}

.top-row > h1 {
    margin-top: auto;
    margin-bottom: auto;
}

.e-btn.e-icon-btn.e-flat-narrow {
    padding: 0;
    color: var(--bs-link-color);
    background-color: transparent !important;
    border-color: transparent !important;
}

.e-btn.e-flat:disabled {
    background-color: transparent !important;
    border-color: transparent !important;
}

    .e-btn.e-flat:disabled span {
        filter: opacity(0.5);
    }

        .e-btn.e-flat:disabled span.e-btn-icon {
            filter: grayscale(0.8);
        }

.e-btn.e-icon-btn.e-flat-narrow:hover {
    filter: brightness(130%);
}

.info-element > .info-element-content > ul {
    padding: 0;
    list-style-type: none;
}

.info-element,
.info-element *:not(.e-icons) {
    font-size: 12px;
    font-family: 'Roboto'
}

    .info-element > .info-element-title,
    .cloudwatch-element > .cloudwatch-element-title {
        font-weight: bold;
        font-size: 12px;
        color: white;
    }

.cloudwatch-element > .cloudwatch-element-content {
    height: 200px
}

.cloudwatch-element-content svg {
    border-radius: 10px;
}

.e-spinner-pane.inline-spinner {
    position: relative;
}

.sf-grid .e-gridcontent .e-detailrow .row {
    margin: 0 0 0 0;
}

.dialog-danger .e-footer-content .e-btn.e-primary.dialog-danger.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

    .dialog-danger .e-footer-content .e-btn.e-primary.dialog-danger.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):hover {
        filter: brightness(0.95);
    }

.dialog-warning .e-footer-content .e-btn.e-primary.dialog-warning.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #000;
}

    .dialog-warning .e-footer-content .e-btn.e-primary.dialog-warning.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info):hover {
        filter: brightness(0.95);
    }

.input-group-text {
    font-size: 14px;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
}

input + .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-left: 5px;
    border-right-style: none;
    border-top-style: none;
    border-bottom-style: none;
}

.input-group-text:has(+ input) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-left-style: none;
    border-top-style: none;
    border-bottom-style: none;
}

.validation-message {
    color: var(--bs-form-invalid-color);
    margin-top: .25rem;
    font-size: .875em;
}

.e-spinner-pane.e-spinner-blur {
    backdrop-filter: blur(1px);
    background-color: transparent;
    background: repeating-linear-gradient( 135deg, #ffffff02, #ffffff02 10px, #00000002 10px, #00000002 20px );
}

.e-dialog > .e-dlg-content .e-footer-content {
    margin-left: -12px;
    width: calc(100% + 24px);
    margin-bottom: -12px;
}

.e-grid .e-unboundcelldiv > button {
    height: 28px;
    line-height: 1;
    padding: 0;
    width: 28px;
    border-radius: 50%;
    font-size: 12px;
}

.e-grid .e-detailrow > .e-detailcell > div > div.row:first-child {
    margin-top: calc(-1 * var(--bs-gutter-y));
}

.custom-field-label {
    font-weight: 500;
    color: var(--color-sf-content-text-color-alt1);
    font-size: 12px;
    margin-left: 1px;
    margin-bottom: 2px;
}

    .custom-field-label i.icon {
        color: #007bff;
    }