button {
    background-color: white !important;
    min-width: 100px;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 20px;
}

input {
    /*font-size: 16px !important;*/
}

a {
    color: #333;
    text-decoration: none;
}

a:hover {
    color: #39014a;
}

.teaser {
    background-color: #39014a;
    background-image: url(/public/images/teaser.jpg);
    background-position: center;
    background-size: cover;
}

.teaser * {
    color: white;
}

.main {
    margin-left: 226px;
    padding: 0 5% 64px;
    position: relative;
    flex: 1;
    max-width: 1600px;
    background-color: white;
    min-height: 100vh;
}

.aside {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 226px;
    max-width: 226px;
    background-color: #f6f6f6;
    border-right: 1px solid #ededed;
}

.profile-menu {
    display: flex;
    align-items: center;
    margin-top: auto;
    border-radius: 0;
    padding: 12px 36px;
    margin-bottom: 24px;
    grid-gap: 12px;
}

.menu.main-menu .menu-link {
    border-radius: 0;
    padding: 10px 24px;
    border-left: 6px solid #eee;
}

.menu.main-menu .menu-link.muted {
    color: #777;
}

.menu.main-menu .menu-item.active .menu-link {
    color: #333;
    border-left: 6px solid #536d96;
    background-color: #fafafa;
}

.menu-link:hover, .nav-link:hover {
    text-decoration: none !important;
}

.menu .menu-link:hover {
    /*border-left: 6px solid #fafafa;*/
    /*background-color: #fafafa;*/
}

.menu-stacked {
    background-color: #EEEEEE;
    padding: 48px;
    border-radius: 8px;
}

.doc-content {
    margin-top: 8px;
}

.menu-stacked .menu-item {
    /*border: none;*/
}

.block {
    display: block;
}

.report-project-grid {
    grid-gap: 0;
}

.report-project-grid .name {
    grid-column: 1 / 5;
    font-weight: bold;
}

.th {
    padding: .75em 4rem .75em 0;
    box-shadow: inset 0 -1px 0 0 rgb(232 232 232);
}

.td {
    box-shadow: inset 0 -1px 0 0 rgb(232 232 232);
}

.doc-description {
    padding: 0 28px 0 28px;
    display: none;
    font-size: 14px;
}

.active .doc-description {
    display: block;
}

.description-btn {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' class='ifqe6sa' fill='currentColor' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.434 7.434a.8.8 0 0 1 1.132 0L10 10.87l3.434-3.435a.8.8 0 0 1 1.132 1.132l-4 4a.8.8 0 0 1-1.132 0l-4-4a.8.8 0 0 1 0-1.132Z'/%3E%3C/svg%3E");
    flex-shrink: 0;
}

.active .description-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' class='ifqe6sa' fill='currentColor' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.566 12.566a.8.8 0 0 1-1.132 0L10 9.13l-3.434 3.435a.8.8 0 1 1-1.132-1.132l4-4a.8.8 0 0 1 1.132 0l4 4a.8.8 0 0 1 0 1.132Z'/%3E%3C/svg%3E");
}

.description-btn:hover {
    cursor: pointer;
    background-color: #EEEEEE;
}

.sidebar .menu-item:before {
    margin-right: 12px;
}

/*
color: white;
background-color: #333;
}*/

.card {
    border-radius: 5px;
    padding: 36px;
    border: 1px solid rgba(3, 6, 18, 0.07);
    position: relative;
    /*background-color: #fafafa;*/
}

.card-head {
    display: flex;
    align-items: baseline;
    margin-bottom: 4rem;
    /*background-color: #fafafa;*/
}

.specColor {
    color: #777;
}


.back {
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: #fcfcfc;
    padding: 8px;
    writing-mode: vertical-lr;
    color: #777;
    margin-left: 8px;
    max-width: 48px;
    padding-top: 18px;
    cursor: pointer;
}

.back:hover {
    background-color: #fafafa;
}

.nav-item.nav-section a {
    background-color: #eee;
}

.nav-pills.nav .nav-link {
    padding: 7px 10px;
}

.layout {
    display: flex;
    margin-top: 24px;
    gap: 24px;
}

.layout-content {

}

.head {
    display: flex;
    margin: 0 0 8rem;
    grid-gap: 16px;
    align-items: center;
}

.head-tab {
    display: flex;
    grid-gap: 10px;
    font-size: 24px;
    font-weight: bold;
}

.head-tab a {
    opacity: .6;
}

.nav-points, .nav-tabs {
    font-weight: 400;
    font-size: 14px;
    margin-top: -4rem;
    margin-bottom: 8rem;
    /*background-color: #fafafa;*/
    border-radius: 5px;
    font-size: 15px;
    border-bottom: 1px solid #eee;
}

.nav-points .nav-list {
    border-bottom-width: 0;
}

.nav-points .nav-link {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: bold !important;
    line-height: 28px;
    padding: 10px 20px 10px;
}

.nav .nav-item.active .nav-link {
    font-weight: 700;
    color: #536d96;
    /*border-top: 3px solid #536d96;*/
    border-bottom: 5px solid #536d96;
    /*border-bottom-color: #fff;*/
}

.head .eyebrow {
    width: 100%;
    overflow-x: hidden;
}

.head .lead {
    display: block;
    margin-top: 2rem;
    color: #536d96;
    color: #777;
    font-weight: 500;
}

.head .pager {
    flex-shrink: 0;
}

.card + .form-item {
    text-align: right;
    margin-top: 4rem;
}

.layout {
    margin-top: 32px;
}

.content {
    flex-grow: 1;
    min-width: 0;
}

.space:hover {
    background-color: #F1F1F1;
}

.content > * + * {
    margin-top: 24px !important;
}

.none {
    display: none;
}

.sidebar {
    flex: 0 0 300px
}

.bar {
    font-size: 14px;
    display: flex;
    align-items: center;
    grid-gap: 4rem;
    margin-bottom: 20px;
}

.bar .post {
    display: flex;
    cursor: pointer;
}

.bar a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    color: #030612;
    border-radius: 4px;
    padding: 6px 10px;
}

.bar .title {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    font-weight: 500;
    color: #7C7C83;
}

.bar a.active {
    color: #2A2D3C;
    background-color: #EDEDEE;
}

.bar a:hover {
    background-color: #efefef;
}

.bar a.add {
    color: white;
    background-color: #536d96;
}

.card .bar {
    margin-bottom: -6rem;
    justify-content: center;
    margin-top: 4rem;
}

.card-head .bar, .head .bar {
    margin-left: 4rem;
}

.card-head .bar a, .head .bar a {
    grid-gap: 4rem;
}

.card-head .bar a:first-child, .head .bar a:first-child {
    background-color: #f4f4f4;
}

.ml-auto {
    margin-left: auto;
}

.grid-th {
    grid-column-gap: 8rem;
    display: grid;
    color: gray;
    font-size: 12px;
    border-top: 3px rgba(3, 6, 18, .07) solid;
    border-bottom: 3px rgba(3, 6, 18, .07) solid;
    text-transform: uppercase;
    grid-row-gap: 0;
    overflow-x: hidden;
    /*background-color: rgba(3, 6, 18, .07)*/;
}

.grid-th > div {
    padding: 2rem 0;
}

.grid-tr {
    grid-column-gap: 8rem;
    display: grid;
    font-size: 14px;
    align-items: center;
    border-bottom: 1px rgba(3, 6, 18, .07) solid;
    grid-row-gap: 0;
}

.grid-tr:hover {
    background-color: #fafafa;
}

.grid-tr > div {
    padding: 0.75em 0
}

.grid-project {
    grid-template-columns: 3fr repeat(3, 1fr);
}

.scrollable {
    display: block;
    overflow-x: auto;
    /*white-space: nowrap;*/
}

.todo {
    font-size: 15px;
    line-height: 1.3;
    background-color: #EEEEEE;
    padding: 36px;
    border-radius: 8px;
}

.todo button {
    width: 100%;
    border: none;
    background-color: transparent !important;
    cursor: pointer;
}

.todo a, .todo button {
    display: flex;
    align-items: center;
    counter-increment: numbers;
    border-bottom: 1px solid rgba(3, 6, 18, 0.07);
    flex: 1;
    text-decoration: none;
    padding: 8px 0;
    color: #030612;
}



.todo a:hover {
    color: #777;
}

.todo a:before,.todo button:before {
    width: 30px;
    font-size: 13px;
    content: counter(numbers, decimal-leading-zero);
    color: #777;
    argin-right: 12px;
    flex-shrink: 0;
}

.todo a.active:before, .todo button.active:before {
    color: #536d96;
    font-weight: bold;
}

.menu-link {
    text-decoration: none !important;
    font-size: 16px;
}

.spec {
    font-size: 15px;
}

.spec > div:first-child > div {
    font-size: 13px;
    grid-column-end: span 12;
}

.spec > div:first-child > div + div {
    text-align: left;
    grid-column-end: span 12;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 2rem;
}

* + p {
    margin-top: 4rem;
}

* + ul {
    margin-top: 4rem;
}

* + .card {
    margin-top: 4rem;
}

.card * + h3, .card * + h2 {
    margin-top: 6rem;
}

.card ul, .card h2 {
    margin-bottom: 6rem;
}

.label-error {
    display: block;
    margin-bottom: 4rem;
    background-color: rgba(229, 72, 77, 0.2);
    font-size: 14px;
    font-weight: normal;
    color: #E6000A;
}

.grade {
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: white;
    border-radius: 18px;
    flex-shrink: 0;
}

.grade.score0 {
    background-color: white;
}

.grade.score1, .grade.score2, .grade.score3 {
    background-color: lightpink;
}

.grade.score4, .grade.score5 {
    background-color: darkseagreen;
}

.grade.grade0 {
    background-color: #eee;
}

.grade.grade1 {
    background-color: lightpink;
}

.grade.grade2 {
    background-color: yellow;
}

.grade.grade3 {
    background-color: darkseagreen;
}

.grade.grade4 {
    color: white;
    background-color: #536d96;
}

.grade.grade5 {
    background-color: white;
}

.grade.grade6 {
    background-color: lightgreen;
}

.form-item {
    margin-bottom: 5rem;
}

/* Dialog */

#dialog {
    max-width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    overflow: hidden;
    height: 100%;
    width: 100%;
    /* Flexbox centers the .modal-content vertically and horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;

    /* Animate when opening */
    animation-name: fadeIn;
    animation-duration: 150ms;
    animation-timing-function: ease;
}

.document-utility {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.dialog-underlay {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, .5);
    cursor: pointer;
}

.dialog-overflow {
    height: 100vh;
    overflow-y: auto;
}

.dialog-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    background-color: white;
    z-index: 100;
    padding: 24px 36px;
}

.dialog-header-fixed {
    top: 0;
    height: 60px;
    position: sticky;
    padding: 12rem;
}

.dialog-body {
    font-size: 16px;
    padding: 0 36px 96px;
}

.dialog-footer {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    left: 0;
    border-top: 1px #eee solid;
    padding: 4rem 8rem;
    display: flex;
    justify-content: flex-end;
    grid-gap: 10px;
    background-color: white;
}

.dialog-content {
    height: 100%;
    max-width: 100%;
    background-color: white;
    animation-name: zoomIn;
    animation-duration: 150ms;
    animation-timing-function: ease;
    position: relative;
}

.dialog-content.dialog-sm {
    height: 100%;
    max-width: 100%;
    background-color: white;
    animation-name: slideIn;
    animation-duration: 150ms;
    animation-timing-function: ease;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 440px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.dialog-content.dialog-lg {
    height: 100%;
    max-width: 100%;
    background-color: white;
    animation-name: slideIn;
    animation-duration: 150ms;
    animation-timing-function: ease;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 640px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.dialog-content.dialog-xl {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 800px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}

.dialog-content.dialog-sm.dialog-medium {
    width: 880px;
}

#dialog.closing > .dialog-content.dialog-sm {
    animation-name: slideOut;
    animation-duration: 150ms;
    animation-timing-function: ease;
}

.dialog-enlarge {
    padding: 0 1rem;
    overflow-x: auto;
}

#dialog.closing {
    animation-name: fadeOut;
    animation-duration: 250ms;
    animation-timing-function: ease;
}

#dialog.closing > .dialog-content {
    animation-name: zoomOut;
    animation-duration: 150ms;
    animation-timing-function: ease;
}

.dialog-close {
    cursor: pointer;
    margin-left: auto;
}


body.sticky, body.open, body.open-sb {
    overflow: hidden;
    /* height: 100vh; */
}

/* dialog ends */

.button.push {
    color: 536 d96;
}

*:focus {
    outline-color: #ccc !important;
}

p + * {
    margin-top: 6rem;
}

.icon-box {
    display: flex;
    background-color: #eee;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
}

.doc-list-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e3e3e3;
}

.doc-list-item-title {
    align-items: center;
    display: inline-flex;
    font-weight: 500;
    flex: 1;
    width: 50%;
    white-space: nowrap;
    padding: 0 15px;
}

.overflow {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-list-item-icon {
    display: inline-block;
    padding: 12px 0 12px 0;
}

tfoot th {
    font-weight: 700;
}

.card-row {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 3rem 0;
    grid-gap: 3rem;
}

.link-underline {
    color: inherit;
}

.main-menu .menu-item:first-child a {
    font-weight: 600 !important;
}

.nav-points .nav-link:hover {
    border-color: transparent;
}

.nav-points .nav-link:hover {
    background-color: transparent;
}

.pager {
    display: flex;
    font-size: 13px;
}

.pager a, .pager .prev, .pager .next, .pager .disabled {
    display: inline-flex;
    cursor: pointer;
    vertical-align: middle;
    padding: 0 15px;
    min-height: 36px;
    min-width: 28px;
    justify-content: center;
    align-items: center;
    margin: 0;
    border: 1px solid rgba(42, 56, 68, 0.15);
    margin-right: -1px;
}

.pager .prev {
    border-radius: 6px 0 0 6px;
}

.pager .next {
    border-radius: 0 6px 6px 0;
}

.filter {
    grid-gap: 5px;
    display: flex;
    margin-bottom: 6rem;
}

.flex-grow {
    flex-grow: 1;
}

th {
    position: relative;
}

th:after {
    position: absolute;
    display: inline-block;
    font-weight: bold;
    margin-left: 2px;
    top: 13px;
}

th[hx-post] {
    cursor: pointer !important;
}

th.asc:after {
    content: '↑';
}

th.desc:after {
    content: '↓';
}

.button.active {
    background-color: rgba(83, 109, 150, 0.22);
}

.filter input {
    padding-left: 48px;
    background: #f8f8f8 url(/public/images/q.svg) no-repeat 14px;
    background-size: 20px 20px;
    width: 400px;
    max-width: 400px;
}

.count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(53, 63, 82, .1);
    font-size: 14px;
    border-radius: 20px;
    padding: 0 16px;
    height: 28px;
    font-weight: 400;
    min-width: 50px;
    text-align: center;
    line-height: 1.4;
    font-family: Roboto, sans-serif;
}

.table.middle td {
    vertical-align: middle;
}

.badge-green {
    background-color: rgba(0, 128, 0, 0.5) !important;
}

button.button-strong {
    border-color: black !important;
}

.checkbox {
    top: -3px;
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-label {
    margin-left: 28px;
}

.checkbox input[type=checkbox] {
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
    z-index: -10;
}

.checkbox-icon {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid #aaa;
    background-color: #fff;
    left: 0;
}

input[type=checkbox]:checked + .checkbox-icon {
    border: none;
    background: #536d96 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e") no-repeat 50%;
}

.avatar, .ava {
    display: flex;
    flex-shrink: 0;
    background-color: #536d96;
    opacity: .6;
    font-size: 12px;
    color: white;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 18px;
}

.ava {
    font-size: 18px;
    font-weight: bold;
    width: 48px;
    height: 48px;
    border-radius: 48px;
}

.msg {
    flex: 1;
    margin-left: 8px;
    padding: 8px;
    min-height: 80px;
    border-top: 1px solid #E6E6E9;
}

.msg .from {
    display: flex;
    flex: 1;
    font-weight: 500;
}

.msg .text {
    font-size: 14px;
    color: #333;
}

.msg .text.text-short {
    display: -webkit-box;
    height: 40px;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.menu-header {
    display: flex;
    padding: 24px;
    align-items: center;
    flex-wrap: nowrap;
    grid-gap: 12px;
}

.workspace {
    display: flex;
    flex: 1;
    align-items: center;
    flex-wrap: nowrap;
    grid-gap: 12px;
}

/* autocomplete */

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
    border-radius: 6px;
}

.autocomplete-suggestion {
    padding: 14px 18px;
    color: #253142;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: bold;
    color: #000;
}

.autocomplete-group {
    padding: 2px 5px;
}

.autocomplete-group strong {
    display: block;
    border-bottom: 1px solid #000;
}

/* autocomplete end */

.check {
    padding-left: 2rem;
    color: grey;
}

/*

calendar

*/

.calendar-container {
    width: 100%;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #fff;
    /*max-width: 1200px;*/
}

.calendar-header {

}

.calendar {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    grid-template-rows: 50px;
    grid-auto-rows: 90px;
    overflow: auto;
}

.day {
    border-bottom: 1px solid rgba(166, 168, 179, 0.22);
    border-right: 1px solid rgba(166, 168, 179, 0.22);
    text-align: right;
    padding: 14px 20px;
    letter-spacing: 1px;
    font-size: 12px;
    box-sizing: border-box;
    color: #98a0a6;
    position: relative;
    /*pointer-events: none;*/
    z-index: 1;
}

.day-name {
    font-size: 12px;
    text-transform: uppercase;
    color: #99a1a7;
    text-align: right;
    padding-right: 20px;
    border-bottom: 1px solid rgba(166, 168, 179, 0.12);
    line-height: 50px;
    font-weight: 500;
}

.task {
    border-left-width: 3px;
    padding: 8px 12px;
    margin: 10px;
    border-left-style: solid;
    font-size: 14px;
    position: relative;
    z-index: 4;
    cursor: default;
}

.task.task--warning {
    border-left-color: #fdb44d;
    background: rgba(254, 240, 219, 0.68);
    align-self: end;
    /*margin-bottom: 13px !important;*/
}

.task.task--danger {
    border-left-color: #fa607e;
    /*margin-bottom: 7px !important;*/
    background: rgba(253, 197, 208, 0.68);
    align-self: end;
}

.task.requested {
    border-left-color: #3c96bc;
    /*margin-bottom: 7px !important;*/
    background: rgb(119, 183, 183);
    align-self: end;
}

.day.active {
    color: black;
}

.day.holiday {
    background-color: rgba(224, 224, 224, 0.3);
}

.day.dayoff {
    background-color: rgba(224, 100, 100, 0.3);
}

.day:nth-of-type(n + 1):nth-of-type(-n + 7) {
    grid-row: 2;
}

.day:nth-of-type(n + 8):nth-of-type(-n + 14) {
    grid-row: 3;
}

.day:nth-of-type(n + 15):nth-of-type(-n + 21) {
    grid-row: 4;
}

.day:nth-of-type(n + 22):nth-of-type(-n + 28) {
    grid-row: 5;
}

.day:nth-of-type(n + 29):nth-of-type(-n + 35) {
    grid-row: 6;
}

.day:nth-of-type(7n + 1) {
    grid-column: 1/1;
}

.day:nth-of-type(7n + 2) {
    grid-column: 2/2;
}

.day:nth-of-type(7n + 3) {
    grid-column: 3/3;
}

.day:nth-of-type(7n + 4) {
    grid-column: 4/4;
}

.day:nth-of-type(7n + 5) {
    grid-column: 5/5;
}

.day:nth-of-type(7n + 6) {
    grid-column: 6/6;
}

.day:nth-of-type(7n + 7) {
    grid-column: 7/7;
}

.trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.trigger:hover {
    background-color: #e1e1e1;
}

.button-block {
    width: 100%;
}

.pointer {
    cursor: pointer;
}

.sticky {
    position: sticky;
    top: 0;
    z-index: 2;
}

section {
    display: table;
    width: 100%;
}

section > * {
    display: table-row;
}

section .col {
    display: table-cell;
}

.download {
    border: none;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath fill='%23aaa' d='M280-280h400v-80H280v80Zm200-120 160-160-56-56-64 62v-166h-80v166l-64-62-56 56 160 160Zm0 320q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
}

.stack .download {
    padding-right: 36px;
    background-position: center right;
    cursor: pointer;
    color: #333;
}

.htmx-indicator {
    flex-shrink: 0;
    opacity: 0;
    display: none;
    transition: opacity 500ms ease-in;
}

.htmx-request.htmx-indicator {
    display: inline-block;
    opacity: 1
}

.htmx-request + .htmx-indicator {
    display: inline-block;
    opacity: 1
}

.items {
    font-size: 14px;
}

.nowrap {
    white-space: nowrap;
}

.aside a.back {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    width: 78px;
    height: 78px;
    background-size: 200%;
    background: white center center no-repeat url('/public/images/chevron-left.svg');
}

.feature {
    font-size: 16px;
    display: grid;
    grid-template-columns: auto auto;
    color: #333;
}

.feature div:last-child {
    text-align: right;
}

.status-item {
    font-size: 16px;
    padding-left: 1rem;
}

.status-item + .status-item {
    margin-top: .5rem;
}

.status-item:before {
    width: 20px;
    display: inline-block;
    content: '·';
}

.status-item.on:before {
    content: '✓';
}

.box-block {
    font-size: 16px;
    padding: 24px;
}

.question {
    display: flex;
}

.question-prompt {
    padding: 28px 28px 28px 0;
}

.question-num {
    padding: 28px 0 28px 28px;
    display: flex;
    width: 116px;
    flex-shrink: 0;
    flex-grow: 0;
    font-weight: bold;
    font-size: 18px;
}

.num-label {
    display: flex;
    flex-grow: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background-color: #626d88;
    color: white;
}

.box + .box {
    margin-top: 2rem;
}

.box-table td {
    padding: 5px 10px;

}

.label {
    border-radius: 4px;
    font-size: 12px;
    padding: 6px 10px;
    color: #2a2d3c;
    background-color: #ededee;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    vertical-align: baseline;
    text-decoration: none;
    line-height: 1;
}

.danger {
    color: indianred;
}

table.statuses {
    position: relative;
    font-size: 14px;
}

table.statuses th {
    box-shadow: 0 0 0 1px red;
    box-sizing: border-box;
}

table.statuses td, table.statuses th {
    padding: 5px 10px;
    background: white;
    text-align: center;
    box-shadow: inset 0 0 0 0.5px rgb(222 222 222) !important;
}

table.statuses th div {
    font-size: 10px;
    padding: 5px 10px;
    /*word-break: break-all;*/
    letter-spacing: 1px;
    min-width: 70px;
}

table.statuses, table.statuses thead {
    position: relative;
}

table.statuses thead tr:nth-child(1) th {
    position: sticky;
    tpo: 0;
}


table.statuses tr > :first-child {
    position: -webkit-sticky;
    position: sticky;
    background: white;
    left: 0;
    text-align: left;
}

table.statuses tr:hover td {
    background-color: rgba(115, 250, 195) !important;
}

table.statuses th {
    background: white;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

table.statuses thead th,
table.statuses tfoot th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    background: white;
}

table.statuses thead th:first-child,
table.statuses tfoot th:first-child {
    left: 0;
    z-index: 3;
    box-shadow: 1px 0 0 0 #eee;
}

table.statuses tfoot {
    position: -webkit-sticky;
    bottom: 0;
    z-index: 2;
}

table.statuses tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: white;
    font-weight: 400;
    color: #555;
    font-size: 11px;
}

table.statuses tfoot th:first-child {
    z-index: 3;
}

.statuses tr th {
    font-weight: 400;
    font-size: 10px;
}

.statuses tr:nth-child(odd) td {
    background-color: #eee !important;
}

.emptybox {
    margin-top: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.settelments {
    color: #555 !important;
    background-color: #fff !important;
}

.application {
    color: #444 !important;
    background-color: #fafafa !important;
}

.session {
    color: #444 !important;
    background-color: #f5f5f5 !important;
}

.card-content {
    padding: 3rem;
    border-radius: 5px;
    background-color: #fafafa;
}

.card-content h3 {
    margin: 0 0 2rem;
}

* + .card-content {
    margin-top: 2rem;
}

.status-item {
    font-size: 16px;
    padding-left: 1rem;
}

.status-item + .status-item {
    margin-top: .5rem;
}

.status-item:before {
    width: 20px;
    display: inline-block;
    content: '·';
}

.status-item.on:before {
    content: '✓';
}

.card-content .custom-control {
    padding-left: 0;
}

.grade {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    min-width: 48px;
    height: 48px;
    background-color: white;
    border-radius: 18px;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 16px;
}

.grade.grade0 {
    background-color: #eee;
}

.grade.grade1 {
    background-color: lightpink;
}

.grade.grade2 {
    background-color: yellow;
}

.grade.grade3 {
    background-color: darkseagreen;
}

.grade.grade4 {
    color: white;
    background-color: #536d96;
}

.grade.grade5 {
    background-color: white;
}

.grade.grade6 {
    background-color: lightgreen;
}

.grade.grade7 {
    background-color: lightgrey;
}

.grade.grade8 {
    border: 1px solid lightgrey;
    background-color: transparent !important;
}

.answer {
    background-color: #eee;
    border-radius: 10px;
    padding: 2rem;
    margin-top: 2rem;
}

.answer-hint {
    font-size: 14px;
    border-radius: 10px;
    padding: 1rem 2rem;
    margin-top: 2rem;
    background-color: white;
}

.answer div + div {
    margin-top: 1rem;
}

.menu-header {
    display: flex;
    padding: 24px;
    align-items: center;
    flex-wrap: nowrap;
    grid-gap: 12px;
    text-transform: uppercase;
    font-weight: 500;
    color: #33435d;
}

.workspace {
    display: flex;
    flex: 1;
    align-items: center;
    flex-wrap: nowrap;
    grid-gap: 12px;
}

.push-right {
    margin-left: auto;
}

.profile-menu {
    display: flex;
    align-items: center;
    margin-top: auto;
    border-radius: 0;
    padding: 12px 36px;
    margin-bottom: 24px;
    grid-gap: 12px;
}

.avatar, .ava {
    display: flex;
    flex-shrink: 0;
    background-color: #536d96;
    opacity: .6;
    font-size: 12px;
    color: white;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 18px;
}

.overflow {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-upload {
    display: block;
    min-height: 250px;
    cursor: pointer;
    background-color: rgb(238, 238, 238);
    border-radius: 8px;
}

.image-upload .photo {
    min-height: 250px;
    text-align: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23aaa' d='M12.5 40q-4.3 0-7.4-3.1Q2 33.8 2 29.5q0-3.9 2.475-6.875t6.375-3.575q1-4.85 4.7-7.925T24.1 8.05q5.65 0 9.475 4.075Q37.4 16.2 37.4 21.9v1.2q3.6-.1 6.1 2.325Q46 27.85 46 31.55q0 3.45-2.5 5.95T37.55 40H25.5q-1.2 0-2.1-.9-.9-.9-.9-2.1V24.1l-4.15 4.15-2.15-2.15 7.8-7.8 7.8 7.8-2.15 2.15-4.15-4.15V37h12.05q2.25 0 3.85-1.6t1.6-3.85q0-2.25-1.6-3.85t-3.85-1.6H34.4v-4.2q0-4.45-3.025-7.65t-7.475-3.2q-4.45 0-7.5 3.2t-3.05 7.65h-.95q-3.1 0-5.25 2.175T5 29.45q0 3.1 2.2 5.325T12.5 37h7v3ZM24 25.5Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.image-upload .photo img {
    border-radius: 8px;
    max-height: 400px;
}

.image-upload.uploaded {
    background-position: 75% center;
}

.container-small, .container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.flex-list {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}