html, body {
    margin: 0;
    display: block;
    height: 100%;
}

body {
    /*Prevent pul to refresh on mobile browsers*/
    overscroll-behavior: contain;
}

#app {
    height: 100%;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.content {
    padding-top: 1.1rem;
}

.label-top {
    font-weight: 500;
    user-select: text;
    padding-right: 0;
    margin-top: 3px;
    font-size: 12px;
    font-family: inherit;
    font-style: normal;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

.grids-tab {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.grids-tab .mud-tabs-panels {
    flex: 1;
}

.grids-tab .cutter-data-grid {
    height: 100%;
}


.mud-main-content {
    height: 100%;
}

/*notifications*/

.notifications-panel {
    --mud-drawer-width: 375px !important;
}

@media (max-width: 600px) {
    .notifications-panel {
        --mud-drawer-width: 100% !important;
    }
}

.notifications-badge .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 25px) calc(100% - 25px);
}

.notification-user-comment-cell {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}