@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");

@media (min-width: 768px) {
    html { font-size: 16px; }
}

#account .logo { background-image: url('/images/logo.png'); height: 100%; background-size: cover; }
#account h4 { display: block; margin: 0; }

:root { --header-height: 3rem; --nav-width: 68px; --first-color: #1C9471; --first-color-opa-50: rgb(28, 148, 113,0.5); --first-color-light: #ccc; --white-color: #F7F6FB; --body-font: 'Nunito', sans-serif; --normal-font-size: 1rem; --z-fixed: 100 }
*, ::before, ::after { box-sizing: border-box }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem #1C9471; }
html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; }

.btn.btn-primary { background-color: #1C9471; border: none; }
    .btn.btn-primary:hover,
    .btn.btn-primary:focus,
    .btn.btn-primary:active { background-color: rgb(28,148,113,0.7); }

body { position: relative; margin: var(--header-height) 0 0 0; padding: 0 1rem; font-family: var(--body-font); font-size: var(--normal-font-size); transition: .5s; background-color: #ffffe; }
a { text-decoration: none }
.header { width: 100%; height: var(--header-height); position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1rem; background-color: var(--white-color); z-index: var(--z-fixed); transition: .5s }

.element-right { margin-top: 5px; }
.logout { vertical-align: top; }

    .header_toggle,
    .header_notifications,
    .logout button { color: var(--first-color); font-size: 1.5rem; cursor: pointer; }

    .header_notifications,
    .logout button { display: inline-block; font-size: 2rem; vertical-align: top; }
    .logout button { border: none; background: none; padding: 0px; }

.header_img { width: 35px; height: 35px; display: inline-block; justify-content: center; border-radius: 50%; overflow: hidden; }
    .header_img img { width: 40px }

.identity.circle { padding: 7px; border-radius: 25%; background-color: var(--first-color); color: white; font-weight: bold; }
    .identity.circle span { font-size: 1.5rem; text-align: center; margin-top: -5px; display: block; }

.btn-outline-success { background-color: white; }
    .btn-outline-success:hover,
    .btn-outline-success:active,
    .btn-outline-success:focus { background-color: #e2e2e2 !important; color: #198754 !important; }

.btn { font-size: 0.85rem; }

input[type=number] { text-align: end; }

.l-navbar { position: fixed; top: 0; left: -30%; width: var(--nav-width); height: 100vh; background-color: var(--first-color); padding: .5rem 1rem 0 0; transition: .5s; z-index: var(--z-fixed) }
.nav { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden }
.nav_logo, .nav_link { display: grid; grid-template-columns: max-content max-content; align-items: center; column-gap: 1rem; padding: .5rem 0 .5rem 1.5rem }
.nav_logo { margin-bottom: 2rem }
.nav_logo-icon { background: url('/images/small-logo.png') center no-repeat; background-size: contain; width: 24px; height: 32px; margin-top: -10px; }
.nav_logo-name { color: var(--white-color); font-weight: 700; display: inline-block; margin-top: -5px; }
.nav_link { position: relative; color: var(--first-color-light); margin-bottom: 1.5rem; transition: .3s }
    .nav_link:hover { color: var(--white-color) }
.nav_icon { font-size: 1.25rem }
.l-navbar.show { left: 0 }
.l-navbar .active { }
    .l-navbar .active::before { content: ''; position: absolute; left: 0; width: 2px; height: 32px; background-color: var(--white-color) }
.height-100 { height: 100vh }

.dataTables_length { color: white !important; position: absolute; z-index: 99; margin-top: -61px; padding: 0px 10px; width: 25%; }

.dataTables_filter { display: none; }
.dataTables_length label { display: block; width: 100%; }
    .dataTables_length label span { }
.dataTables_length select { margin: 0px 15px; display: inline-block; width: 150px; }
.dataTables_length .btn.btn-download { float: right; }
.dt-buttons { display: none; }

table.dataTable { width: 100% !important; }
    table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-image: none !important; }
        table.dataTable thead .sorting_asc:after { content: "▲"; color: white; margin-left: 5px; }
        table.dataTable thead .sorting_desc:after { content: "▼"; color: white; margin-left: 5px; }
    table.dataTable .sorting_1 { background-color: var(--first-color-opa-50); color: white; font-weight: bold; }

.table th,
.table td { text-align: center; font-size: 0.85rem; vertical-align: middle; }
.table th { background-color: var(--first-color); color: white; }
.table th { font-size: 0.85rem; }

tr:nth-child(even) td { background-color: rgb(28, 148, 113, 0.12); }

span.unit { margin-top: -30px; text-align: right; display: block; margin-right: 10px; font-weight: bold; font-style: italic; }
input.unit { padding-right: 70px; }

.notification-badge { font-size: 0.7rem; color: white; padding: 2px 6px; border-radius: 50%; margin-left: -15px; position: absolute; }

@media screen and (min-width: 768px) {
    body { margin: calc(var(--header-height) + 1rem) 0 0 0; padding-left: calc(var(--nav-width) + 1rem) }
    .header { height: calc(var(--header-height) + 1rem); padding: 0 2rem 0 calc(var(--nav-width) + 2rem) }
    .header_img { width: 40px; height: 40px }
        .header_img img { width: 45px }
    .l-navbar { left: 0; padding: 1rem 1rem 0 0 }
        .l-navbar.show { width: calc(var(--nav-width) + 156px) }
    .body-pd { padding-left: calc(var(--nav-width) + 188px) }
}

@media (max-width:767px) {
    .nav_logo { display: block; }
    .l-navbar { transition: 0s; }
        .l-navbar.show { width: 50%; position: absolute; }
}