:root {
    --mud-palette-table-lines: #E5E5E5 !important;
}

html,
body, 
div#app {
    height: 100%;
}

html, body {
    background-color: rgb(245 247 250 / 1)
}

/* Layouts */
.page_root.page_root_no_layout {
    justify-content: center;
    height: 100%;
}

.mud-main-content:has(.page_root.page_root_no_layout) {
    height: 100%;
}

.mud-main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

div.page_root {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Custom classes */
.info-wrapper {
    gap: 0px !important;
}

.info-wrapper>p:first-child {
    color: #75787b
}

/* Code Element */
code {
    padding: 0.25rem;
    background-color: rgb(243 244 246 / 1);
}

p:has(code) {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

p:has(code)::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opzera */
}

/* Expand Divs */
.mud-expand-panel {
    border-radius: var(--mud-default-borderradius, 4px);
}

.mud-expand-panel {
    border-radius: 8px !important;
}

.mud-expand-panel.mud-panel-expanded {
    margin: 0;
}

/* Inputs */
.mud-input.mud-input-outlined {
    position: relative;
    border-width: 1px;
    border-color: rgb(114, 114, 114, 0.5);
    border-radius: 14px;
}

/* No Auth - Login Pages */
.background-pattern {
    background-color: #F5F7FA;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Tables */
.mud-table-head {
    background-color: rgb(0 0 0 / 0.05);
}

.mud-table-head .mud-table-row th:first-child {
    border-start-start-radius: 12px
}

.mud-table-head .mud-table-row th:last-child {
    border-start-end-radius: 12px
}

th {
    font-size: 16px;
    color: hsl(240 3.8% 46.1%) !important;
    font-weight: 600 !important;
}

/* Timeline */
.mud-timeline-horizontal .mud-timeline-item {
    padding-left: 8px;
    padding-right: 8px;
}