* {
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow: auto;
    overflow-y: scroll;
}

body {
    min-height: 100%;
    font-family: 'Sen', sans-serif;
    font-size: 16px;
    font-variant-ligatures: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

button {
    font-family: 'Sen', sans-serif;
    font-variant-ligatures: none;
}

.MuiAccordion-root.Mui-expanded {
    margin: 0;
}

.MuiButton-root {
    border-radius: 3px;
    text-transform: none;
    font-size: 16px;
}

.skeleton {
    position: relative;
    overflow: hidden;
    z-index: 9990;
    box-shadow: none;
    fill: none;
    pointer-events: none;
}

.skeleton::before {
    content: '';
    position: absolute;
    top: 0px;
    right: 0;
    content-visibility: hidden;
    bottom: 0;
    z-index: 5000;
    left: 0;
}

.skeleton::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    animation: shimmer 3s infinite;
    content: '';
    z-index: 5001;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

:root {
    /* FONT SIZE */
    --h1-size: 1.25rem;
    --p-size: 1rem;
    --caption-size: 0.9rem;

    /* PADDING */
    --card-padding: 2rem;
    --card-padding-x: 2rem;
    --card-padding-y: 2rem;
    --card-header-padding: 1rem 2rem;
    --drawer-padding: 1rem 1.5rem;
    --page-padding: 2rem 0;
    --list-header-padding: 1rem;

    /* MARGIN */
    --card-margin-y: 1rem;
    --card-margin-x: 1rem;

    /* COLORS*/
    --success: #3bd86e;
    --danger: #d95e5e;
    --warning: #d67c3d;
    --drawer-link-active: #000;
    --drawer-link-active-bg: #f1f1f1;
    --drawer-link-inactive: #424242;
    --primary: #607d8b;

    /* WIDTHS */
    --drawer-width: 250px;
    --dropdownMenuWidth: 200px;

    /* BOX SHADOWS */
    --chip-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);

    /* BORDERS */
    --default-border: 1px solid #f1f1f1;
}

h1,
h2 {
    padding: 0;
    margin: 0;
    line-height: 24px;
}

p {
    margin: 0;
    padding: 0;
}

a {
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

#app {
    flex-grow: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.MuiCardHeader-title {
    font-size: var(--p-size);
}

[hidden] {
    display: none !important;
}

@media screen and (max-width: 1024px) {
    :root {
        --drawer-padding: 0.75rem 1.25rem;
    }
}

input.hide-clear[type='search']::-webkit-search-decoration,
input.hide-clear[type='search']::-webkit-search-cancel-button,
input.hide-clear[type='search']::-webkit-search-results-button,
input.hide-clear[type='search']::-webkit-search-results-decoration {
    display: none;
}

/*
    This style is to hide the error message block from "vanilla-jsoneditor" package.
    The package has another minmal way to show error inline with the editor. And so we are hiding this block 
    which shows at the bottom of the editor and does not have the best UX - because it shows errors even as user
    is typing in the editor.
*/
.jse-message.jse-error {
    display: none !important;
}