/* @import '../fonts/iconfont/material-icons.css'; */

/* html {
  font-family: 'Roboto', sans-serif;
  height: 100%;
} */

html, body {
    height: 100%;
}

#mtm-app-container {
    height: 100%;
}

/* .mtm-modal-active {
    filter: blur(2px);
} */

.mtm-background {
    /* Placeholder for accessing backgrounds in DOM */
}

.mtm-windowscroll-disable {
    overflow: hidden;
    position: fixed;
    width: calc(100vw - var(--mtm-scrollbar-width));
}

.mtm-dnd-active {
    cursor: move;
    user-select: none;
}

.mtm-dragscroll-container {
    overflow: auto;
}

.mtm-dragscroll-container--dragging {
    scroll-behavior: auto !important;
}

.mtm-dragscroll-container--dragging-content > * {
    pointer-events: none;
    cursor: grab;
}

.mtm-dragscroll-container--disabled {
    overflow: visible;
}

.mtm-dragscroll-container--native-scroll {
    overflow: auto;
}

.mtm-dragscroll-dragging {
    cursor: grab;
}

.mtm-thin-scrollbar::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

:root {
    --mtm-scrollbar-thumb-color: #888;
    --mtm-scrollbar-track-color: #ccc;
    
    -webkit-font-smoothing: auto; /* For OSX non-retina screens */

    @supports selector(::-webkit-scrollbar) {
        --mtm-scrollbar-width: 6px;
    }

    /* For Firefox scrollbars */
    @supports (not selector(::-webkit-scrollbar)) {
        --mtm-scrollbar-width: 8px;
        
        scrollbar-width: thin;
        scrollbar-color: var(--mtm-scrollbar-thumb-color) var(--mtm-scrollbar-track-color);

        div {
            scrollbar-width: thin;
            scrollbar-color: var(--mtm-scrollbar-thumb-color) var(--mtm-scrollbar-track-color);
        }
    }
}

@media (min-width:1024px) {

    /* We prefer control over the scrollbar width */
    @supports selector(::-webkit-scrollbar) {
        :root { --mtm-scrollbar-width: 6px; }
        ::-webkit-scrollbar {
            width: var(--mtm-scrollbar-width);
            height: var(--mtm-scrollbar-width);
        }

        ::-webkit-scrollbar-button {
            background: var(--mtm-scrollbar-track-color);
            width: 0px;
            height: 0px;
        }

        ::-webkit-scrollbar-track-piece {
            background: var(--mtm-scrollbar-track-color);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--mtm-scrollbar-thumb-color);
        }​
    }

    /* @supports (not selector(::-webkit-scrollbar)) {
        div {
            scrollbar-width: thin;
            scrollbar-color: var(--mtm-scrollbar-thumb-color) var(--mtm-scrollbar-track-color);
        }
    } */

}

@media (max-width:1023px) {

    @supports selector(::-webkit-scrollbar) {
        :root { --mtm-scrollbar-width: 3px; }
        ::-webkit-scrollbar {
            width: var(--mtm-scrollbar-width);
            height: var(--mtm-scrollbar-width);
        }

        ::-webkit-scrollbar-button {
            background: var(--mtm-scrollbar-track-color);
            width: 0px;
            height: 0px;
        }

        ::-webkit-scrollbar-track-piece {
            background: var(--mtm-scrollbar-track-color);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--mtm-scrollbar-thumb-color);
        }​
    }

    /* @supports (not selector(::-webkit-scrollbar)) {
        div {
            scrollbar-width: thin;
            scrollbar-color: var(--mtm-scrollbar-thumb-color) var(--mtm-scrollbar-track-color);
        }
    } */

}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}
  
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.null {
    display: block;
}