html,
body,
.page {
    height: 100%; /* needed for proper layout */
    background-color:rgb(24,24,24);
    color:white;
}

body {
    overflow: hidden;
}

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

.pageHeader {
    flex: 0 0 auto;
    margin: 0;
    padding: 1rem 1rem 0.5rem 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    border-bottom: 0.25rem solid grey;
    font-size: 1.75rem;
}

.headerLeft {
    flex: 0 1 auto;
    display: flex;
}

.headerRight {
    flex: 0 1 auto;
    display: flex;
}

.pageHeader > * > * {
    margin: 0.5rem;
}

.pageContent {
    padding: 1rem;
    flex: 1 1 auto;
    position: relative;/* need this to position inner content */
    overflow-y: auto;
}

.divider {
    height: 0.25rem;
    width: 100%;
    background-color: grey;
    margin: 0.5rem 0;
}

input {
    padding: 0.3rem;
    font-size: 1.5rem;
    border: 0.1rem solid #888;
    background-color: #222;
}

select {
    padding: 0.3rem;
    font-size: 1.5rem;
    border: 0.1rem solid #888;
    background-color: #222;
}

/* width */
::-webkit-scrollbar {
    width: 10px !important;
}

/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3) !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888 !important;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

.pageModal {
    position: fixed;
    left: 50%;
    top: 7rem;
    transform: translateX(-50%);
    z-index: 50;
    background-color: #222;
    padding: 1rem 1.5rem;
    border: 0.1rem solid #888;
    border-radius: 1rem;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.pageModal.success {
    background-color: #141;
    border: 0.1rem solid #4A4;
}

.pageModal.fail {
    background-color: #411;
    border: 0.1rem solid #A44;
}

.pageModal.hidden {
    opacity: 0;
}

.pageModal.visible {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.table-striped {
    border-width: 0.5rem;
    border-style: solid;
    border-color: rgba(24,24,24,20);
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #404040;
}

.tableCellApiKey {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    white-space: nowrap;
    height: 100%;
}

.tableCellApiOther {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}