@font-face {
    font-family: 'NunitoSans';
    src: url('/css/fonts/NunitoSans/NunitoSans.ttf') format('truetype');
}

html, body#sqware_manager {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: Arial, Verdana, Geneva, sans-serif;
    font-size: 14px;
    color: #424666;
    font-synthesis: none;
    line-height: normal;
}

form {
    margin: 0;
}

.form-control {
    font-size: 13px;
}

.svg_icon {
    display: inline-block;
}

/* APP */

.app_layout {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100vh;
    background: #f4f4f4;
}

.app_body {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 0;
}

.app_sidebar {
    min-height: 0;
}

.app_main {
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
    overflow: hidden;
}

.app_main_header {
    transition: box-shadow 0.3s ease;
}

.app_main_header.scrolled {
    box-shadow: 0 0 10px rgba(200, 200, 200, 1);
}

.app_main_content {
    position: relative;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-flow: column nowrap;
    gap: 10px;
    padding: 0 38px 20px 30px;
    scroll-behavior: smooth;
}

.app_footer_scroll {
    position: fixed;
    right: 20px;
    bottom: 45px;
    width: 30px;
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background: var(--color-second);
    border-radius: 50%;
    cursor: pointer;
    transition: opacity 1s ease;
    opacity: 0;
}

.app_footer_scroll.scrolled {
    opacity: 1;
}

/* LEGEND */

.legend_color {
    display: inline-block;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    margin-right: 5px;
}