@font-face {
    font-family: 'Roboto Flex';
    src: url('../fonts/RobotoFlex-VariableFont_GRAD\,XTRA\,YOPQ\,YTAS\,YTDE\,YTFI\,YTLC\,YTUC\,opsz\,slnt\,wdth\,wght.ttf') format('truetype');
}

/* @font-face {
    font-family: 'RobFlexReg';
    src: url('../fonts/RobotoFlex-Regular.ttf') format('truetype');
} */

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
    flex: 1;
    width: 100vw;
}

:root {
    /* colors */
    --white: #FFFFFF;
    --alwaysWhite: #FFFFFF;
    --background: #FAFAFA;
    --background-lighter: #FCFCFC;
    --lightgrey: #EAEAEA;
    --lightergrey: #f2f2f2;
    --lightestgrey: #f8f8f8;
    --mediumlightgrey: #d9d9d9;
    --mediumgrey: #C0C0C0;
    --darkgrey: #808080;
    --darkergrey: #555555;
    --verydarkgrey: #323232;
    --black: #000000;
    --green: #2E9E5B;
    --green-background: #ebfeeb;
    --yellow: #e38000;
    --red: #da0000;
    --red-background: #feebeb;
    --rowHover: #f4f4f4;
    --boardPrimary: #0096ff;
    --boardPrimaryRGB: 0, 150, 255;
    --sgColor: #0096FF;
    --word-highlight: #ffe58a;
    
    /* doc file colors */
    --doc-file-img: #22a4dd;
    --doc-file-zip: #dd6900;
    --doc-file-word: #1c60bf;
    --doc-file-powerpoint: #c5401e;
    --doc-file-excel: #148248;
    --doc-file-pdf: #eb5757;
    --doc-file-mail: #7e0ed4;
    --doc-file-txt: #4d4d4d;
    --doc-file-unknown: #999999;

    /* shadows */
    --shadow: #00000024;

    /* more */
    --border: 1px solid var(--lightgrey);
    --borderRadius: 4px;
    --mainHeaderHeight: 88px;

    /* text */
    --text-xs: 0.8rem;
    --text-s: 0.875rem;
    --text-m: 1rem;
    --text-l: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
}

.dark-mode{
    --white: #272727;
    --background: #1e1e1e;
    --background-lighter: hsl(0, 0%, 13%);
    --rowHover: #272727;
    --lightgrey: #313131;
    --lightergrey: #333333;
    --lightestgrey: #2d2d2d;
    --mediumlightgrey: #d0d0d0;
    --mediumgrey: #4a4a4a;
    --darkgrey: #808080;
    --verydarkgrey: #999999;
    --black: #c2c2c2;
    --green: #58a963;
    --green-background: #274027;
    --yellow: #986c1b;
    --red: #c14747;
    --red-background: #442727;
    --doc-file-img: #22a4dd;
    --doc-file-word: #3b82e6;
    --doc-file-powerpoint: #c5401e;
    --doc-file-excel: #148248;
    --doc-file-pdf: #eb5757;
    --doc-file-mail: #a03bed;
    --doc-file-txt: #7a7a7a;
    --doc-file-unknown: #999999;
}

* {
    margin: 0px;
    padding: 0px;
}

html {
    font-size: 14px;
    box-sizing: border-box;
}

body {
    background-color: var(--background);
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 300;
    font-size: var(--text-m);
    color: var(--black);
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    line-height: 1.3;
}

body.hidden-overflow {
    overflow: hidden !important;
}

li {
    text-indent: 0;
    list-style-type: none;
    position: relative;
}

a {
    color: var(--black);
    font-weight: inherit;
    text-decoration: none;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
}

h1, h2, h3 {
    letter-spacing: -0.01em;
}

h1 {
    font-size: 1.4em;
}

h3 {
    position:relative;
}

b{
    font-weight: 600;
}

textarea {
    resize: vertical;
}

input, textarea {
    font-size: inherit;
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 300;
    -webkit-user-select: none;
    user-select: none;
    color: var(--black);
}

img{
    -webkit-user-select: none;
    user-select: none;
}

/* Chrome/Edge/Safari */
/* ::-webkit-scrollbar {
    width: 10px;
}
  
::-webkit-scrollbar-track {
    background: var(--lightestgrey);
}
  
::-webkit-scrollbar-thumb {
    background: var(--darkgrey);
    border-radius: 20px;
}
  
::-webkit-scrollbar-thumb:hover {
    background: var(--mediumgrey);
} */

.flip-vertical {
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.hidden {
    display: none;
}

.visibility {
    visibility: hidden;
}

.opacity {
    opacity: 0.5;
}

/* img icons */
.icon {
    width: 18px;
}

.icon.small {
    width: 14px;
    opacity: 0.5;
}

/*new icon component - nao toca*/
.icon-component {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
    transition: transform 160ms ease;
}

.icon-component svg{
    display: block;
}

.icon-component.icon--s{
    width: 14px;
    height: 14px;
}

.icon-component.icon--s .stroke:not([stroke]),
.icon-component.icon--xs .stroke:not([stroke]),
.icon-component.icon--xxs .stroke:not([stroke]) {
    stroke: var(--darkgrey);
}

.icon-component.icon--xs{
    width: 12px;
    height: 12px;
}

.icon-component.icon--xxs{
    width: 8px;
    height: 8px;
}

.icon-component.icon--s .fill:not([fill]),
.icon-component.icon--xs .fill:not([fill]),
.icon-component.icon--xxs .fill:not([fill]) {
    fill: var(--darkgrey);
}

.icon-component.icon--green .stroke:not([stroke]){
    stroke: var(--green);
}

.icon-component.icon--green .fill:not([fill]){
    fill: var(--green);
}

.icon-component.icon--yellow .stroke:not([stroke]){
    stroke: var(--yellow);
}

.icon-component.icon--yellow .fill:not([fill]){
    fill: var(--yellow);
}

.icon-component.icon--red .stroke:not([stroke]){
    stroke: var(--red);
}

.icon-component.icon--red .fill:not([fill]){
    fill: var(--red);
}

.icon-component.icon--white .stroke:not([stroke]){
    stroke: var(--white);
}

.icon-component.icon--white .fill:not([fill]){
    fill: var(--white);
}

.icon-component.icon--always-white .stroke:not([stroke]){
    stroke: var(--alwaysWhite);
}

.icon-component.icon--always-white .fill:not([fill]){
    fill: var(--alwaysWhite);
}

.icon-component.icon--grey .stroke:not([stroke]){
    stroke: var(--darkgrey);
}

.icon-component.icon--grey .fill:not([fill]){
    fill: var(--darkgrey);
}

.icon-component.icon--black .stroke:not([stroke]){
    stroke: var(--black);
}

.icon-component.icon--black .fill:not([fill]){
    fill: var(--black);
}

.icon-component.icon--board .stroke:not([stroke]){
    stroke: var(--boardPrimary);
}

/* svg icons - nao toca*/
svg.icon {
    width: 18px;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
}

svg .stroke {
    fill: none;
    stroke-miterlimit: 10;
    stroke-linecap: round;
}

svg .stroke:not([stroke-width]) {
  stroke-width: 1.9px;
}

svg .stroke:not([stroke]) {
  stroke: var(--black);
}

svg .fill:not([fill]) {
    fill: var(--black);
}

svg .bevel {
    stroke-linejoin: bevel;
}

svg .round {
    stroke-linejoin: round;
}

svg .evenodd {
    fill-rule: evenodd;
}

svg.icon--s{
    width: 14px;
}

svg.icon--s .stroke:not([stroke]),
svg.icon--xs .stroke:not([stroke]),
svg.icon--xxs .stroke:not([stroke]) {
    stroke: var(--darkgrey);
}

svg.icon--xs{
    width: 12px;
}

svg.icon--xxs{
    width: 8px;
}

svg.icon--s .fill:not([fill]),
svg.icon--xs .fill:not([fill]),
svg.icon--xxs .fill:not([fill]) {
    fill: var(--darkgrey);
}

svg.icon--green .stroke:not([stroke]){
    stroke: var(--green);
}

svg.icon--green .fill:not([fill]){
    fill: var(--green);
}

svg.icon--yellow .stroke:not([stroke]){
    stroke: var(--yellow);
}

svg.icon--yellow .fill:not([fill]){
    fill: var(--yellow);
}

svg.icon--red .stroke:not([stroke]){
    stroke: var(--red);
}

svg.icon--red .fill:not([fill]){
    fill: var(--red);
}

svg.icon--white .stroke:not([stroke]){
    stroke: var(--white);
}

svg.icon--white .fill:not([fill]){
    fill: var(--white);
}

svg.icon--always-white .stroke:not([stroke]){
    stroke: var(--alwaysWhite);
}

svg.icon--always-white .fill:not([fill]){
    fill: var(--alwaysWhite);
}

svg.icon--grey .stroke:not([stroke]){
    stroke: var(--mediumgrey);
}

svg.icon--grey .fill:not([fill]){
    fill: var(--mediumgrey);
}

svg.icon--board .stroke:not([stroke]){
    stroke: var(--boardPrimary);
}

svg.icon--board .fill:not([fill]),
.icon-component.icon--board .fill:not([fill]){
    fill: var(--boardPrimary);
}

/*SVG colors for file extentions*/
svg.icon--file-img > .stroke,
.icon-component.icon--file-img .stroke{
    stroke: var(--doc-file-img);
}

svg.icon--file-img > .fill,
.icon-component.icon--file-img .fill{
    fill: var(--doc-file-img);
}

svg.icon--file-zip > .stroke,
.icon-component.icon--file-zip .stroke{
    stroke: var(--doc-file-zip);
}

svg.icon--file-zip > .fill,
.icon-component.icon--file-zip .fill{
    fill: var(--doc-file-zip);
}

svg.icon--file-word > .stroke,
.icon-component.icon--file-word .stroke{
    stroke: var(--doc-file-word);
}

svg.icon--file-word > .fill,
.icon-component.icon--file-word .fill{
    fill: var(--doc-file-word);
}

svg.icon--file-powerpoint > .stroke,
.icon-component.icon--file-powerpoint .stroke{
    stroke: var(--doc-file-powerpoint);
}

svg.icon--file-powerpoint > .fill,
.icon-component.icon--file-powerpoint .fill{
    fill: var(--doc-file-powerpoint);
}

svg.icon--file-excel > .stroke,
.icon-component.icon--file-excel .stroke{
    stroke: var(--doc-file-excel);
}

svg.icon--file-excel > .fill,
.icon-component.icon--file-excel .fill{
    fill: var(--doc-file-excel);
}

svg.icon--file-pdf > .stroke,
.icon-component.icon--file-pdf .stroke{
    stroke: var(--doc-file-pdf);
}

svg.icon--file-pdf > .fill,
.icon-component.icon--file-pdf .fill{
    fill: var(--doc-file-pdf);
}

svg.icon--file-mail > .stroke,
.icon-component.icon--file-mail .stroke{
    stroke: var(--doc-file-mail);
}

svg.icon--file-mail > .fill,
.icon-component.icon--file-mail .fill{
    fill: var(--doc-file-mail);
}

svg.icon--file-txt > .stroke,
.icon-component.icon--file-txt .stroke{
    stroke: var(--doc-file-txt);
}

svg.icon--file-txt > .fill,
.icon-component.icon--file-txt .fill{
    fill: var(--doc-file-txt);
}

svg.icon--file-unknown > .stroke,
.icon-component.icon--file-unknown .stroke{
    stroke: var(--doc-file-unknown);
}

svg.icon--file-unknown > .fill,
.icon-component.icon--file-unknown -fill{
    fill: var(--doc-file-unknown);
}

svg.transition {
    transition: 0.4s ease;
}
/**************************/

.link,
.hover{
    cursor: pointer;
}

.link:hover,
.hover:hover{
    opacity: 0.6;
}

.link:active,
.hover:active{
    opacity: 0.5;
}

.icon.small.link:hover{
    opacity: 0.3!important;
}

.cont {
    width: 92%;
    margin-inline: auto;
    max-width: 2000px;
}

.clientLogo {
    max-height: 55px;
    max-width: 280px;
    padding-right: 20px;
    min-height: calc(var(--mainHeaderHeight) / 2)
}

nav {
    background: var(--white);
    border-bottom: var(--border);
    height: 80px;
    position: relative;
    top: 0px;
    width: 100%;
    z-index: 8;
    margin-bottom: 8px;
    -webkit-user-select: none;
    user-select: none;
}

nav.under-slider{
    z-index: 2;
}

nav .cont {
    display: flex;
    justify-content: space-between;
    height: 100%;
    position: relative;
}

nav ul,
.menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.menu .menu-hover {
    position: absolute;
    height: 2px;
    bottom: 0;
    z-index: 0;
    background-color: var(--border);
    width: 24px;
}

.menu .menu-slider {
    position: absolute;
    height: 2px;
    bottom: 0;
    z-index: 0;
    background-color: var(--boardPrimary);
    width: 52px;
}

.utilities .utilities-slider {
    position: absolute;
    height: 2px;
    bottom: 0;
    z-index: 0;
    background-color: var(--boardPrimary);
    width: 54px;
    display: none;
    transition: 0.5s ease;
}

li.my-tasks-utilities.disabled,
.mobile-utilities li.disabled {
    opacity: 1;
    /* cursor: default; */
}

nav .cont ul {
    align-items: center;
    height: 100%;
    position: relative;
}

nav li.user {
    gap: 8px;
    margin-right: -20px;
}

nav .utilities.hidden-mobile {
    position: absolute;
    right: 0;
    /* transform: translateX(100%); */
    visibility: hidden;
    z-index: -100;
}

nav .menu > ul.hidden-mobile {
    position: absolute;
    left: 0;
    transform: translateX(-100%);
    visibility: hidden;
}

nav .menu > ul > li > a {
    height: 100%;
    box-sizing: border-box;
    padding: 8px 20px;
    display: flex;
    align-items: center;
}

.menu > ul > li,
.utilities > li {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
}

.utilities > li, 
.utilities > div {
    padding: 8px 20px;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.main-header-container {
    height: 100%;
}

li.board-selector {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

nav .cont ul > li.active {
    border-bottom: 2px solid var(--boardPrimary);
} 

nav .cont ul > li:hover,
.user-board-select:hover,
.utilities > div:hover {
    background-color: var(--background);
}

.help-center-button.active {
    background-color: var(--lightestgrey);
}

/** Tasks **/
.task-counter {
    font-weight: 600;
    margin-right: 0px;
}

/** User Details**/
img.user {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    object-fit: cover;
    padding: 0;
    /* border: var(--border); */
    display: block;
    flex-shrink: 0;
}

img.user.small {
    width: 24px;
    height: 24px;
}

img.user.level {
    outline: 2px solid var(--black);
}

img.has-quick-view {
    cursor: pointer;
}

img.has-quick-view:hover {
    outline: 2px solid var(--lightgrey);
}

.user-details {
    flex-direction: column;
    display: flex;
    align-items: end;
    position: relative;
    max-width: 250px;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
}

.user-details > p {
    font-weight: 600;
    /* min-width: 80px; */
    letter-spacing: -0.2px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

.group-img {
    width: 40px;
    height: 40px;
    background-color: var(--background);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: var(--border);
}
.arrow {
    width: 8px;
    padding: 0;
}

.arrow.open,
.icon.arrow-up,
.icon-component.arrow-up {
    transform: rotate(180deg);
}

.icon.arrow-down,
.icon-component.arrow-down {
    transform: rotate(0deg)!important;
}

.icon.arrow-right,
.icon-component.arrow-right {
    transform: rotate(-90deg);
}

.icon.arrow-left,
.icon-component.arrow-left {
    transform: rotate(90deg);
}

.user-details .arrow {
    margin-left: 8px;
}

.user-profile-action-menu,
.user-profile-menu-trigger {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 8px;
}

/** Menu Bar Dropdowns **/
.dropdown-parent {
    gap: 8px;
    position: relative;
    cursor: pointer;
}

.dropdown-icon-text {
    display: flex; 
    gap: 10px; 
    align-items: flex-start;
}

.dropdown-icon-text .icon-component{
    margin-top: 1px;
}

.dropdown {
    top: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);
    position: absolute;
    padding: 0;
    z-index: 2;
    cursor: auto;
    width: max-content;
    min-width: 100%;
    display: none;
    background-color: var(--white);
    border: var(--border);
    border-radius: var(--borderRadius);
}

.dropdown p {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.dropdown p:hover {
    background-color: var(--background);
    border-color: var(--border);
}

.dropdown a,
.dropdown .option{
    padding: 16px 20px;
    display: flex;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    text-align: left;
}

.dropdown a.disabled .icon{
    filter: none;
}

.user-board-select {
    cursor: pointer;
    padding: 0px 4px;
    border: 1px solid transparent;
    position: relative;
    right: -4px;
    display: flex;
}

.user-board-select>p:hover {
    opacity: 0.6;
}

/** menu for user in header. any changes for other elements should test user menu as well **/
.user-board-dropdown,
.user-photo-dropdown {
    display: block;
    height: unset !important;
    top: 100%;
    right: 0px;
    position: absolute !important;
    border-radius: 0 0 4px 4px;
    background-color: var(--white);
    border: var(--border);
    min-width: 160px;
    min-width: max-content;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);
    z-index: 1;
}

.user-board-dropdown>li,
.user-photo-dropdown>li {
    padding: 12px 16px;
}

.user-board-dropdown li:hover,
.user-photo-dropdown li:hover {
    background-color: var(--background);
}

.user-photo-dropdown {
    min-width: 160px;
    margin-top: 2px;
    width: 100%;
}

.hidden {
    display: none !important;
}

/** Footer **/
footer {
    color: var(--mediumgrey);
    background-color: var(--background);
    padding: 32px 0 32px 0;
    width: 100%;
    /* z-index: -1; */
    box-sizing: border-box;
    margin-top: 40px;
    font-size: var(--text-m);
    -webkit-user-select: none;
    user-select: none;
}

footer>.cont {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    align-items: baseline;
}

footer>.cont>div:last-child {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 32px;
    flex-shrink: 0;
}

footer #smart-governance-logo {
    width: 140px;
}

footer #smart-governance-logo *{
    fill: var(--mediumgrey);
}

footer a {
    color: var(--mediumgrey);
}

.footer-cont-mobile {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 16px !important;
}

.footer-terms-mobile {
    flex-direction: column !important;
    gap: 16px !important;
}

footer.agenda-has-meeting-guests {
    padding-bottom: 64px;
}

.admin-mode {
    background-color: #0096ff;
    background: linear-gradient(300deg, rgba(0, 150, 255, 1) 0%, rgba(77, 182, 255, 1) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.8em;
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.admin-mode:hover {
    filter: brightness(1.05);
}

.viewing-as-admin{
    padding-top: 20px;
}

nav li .user-photo,
.sidebar-button .user-photo,
.mobile-menu .user-photo {
    position: relative;
}

/** Menu Mobile **/
.mobile-menu-cont {
    background-color: rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 101;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity .5s ease;
}

.mobile-menu {
    background-color: var(--white);
    position: absolute;
    height: 100%;
    top: 0px;
    right: -300px;
    bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    width: 300px;
    transition: .5s ease;
    transition-delay: 0.1s;
    flex-direction: column;
    display: flex;
    box-sizing: border-box;
}

.mobile-menu-show {
    right: 0px;
    display: flex;
    opacity: 1;
}

ul.mobile-utilities {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

ul.mobile-user-menu {
    flex-direction: column;
}

.mobile-menu li,
.mobile-board-selector {
    border-left: 2px solid transparent;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 20px min(5vw, 32px);;
    gap: 8px;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
}

.mobile-menu li.mobile-search-li {
    cursor: default;
}

.mobile-menu li.active {
    border-color: var(--boardPrimary);
    background-color: var(--background);
}

.mobile-menu li:hover,
.mobile-board-selector:hover {
    background-color: var(--background);
}

.mobile-menu-nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    position: relative;
    padding: 0;
    display: none;
}


.mobile-menu-nav>.divider {
    margin: 24px 0 0 24px;
    width: calc(100% - 48px);
    box-sizing: border-box;
    border-bottom: var(--border);
}

.mobile-menu div.user {
    padding: min(4.5vw, 24px) min(4.5vw, 24px) !important;
    justify-content: flex-start;
    height: unset;
    align-items: center;
    display: flex;
    gap: 8px;
}

.mobile-menu>div.user>div {
    margin-top: 3px;
}

.mobile-menu .user p {
    font-weight: 600;
}

.mobile-menu .user .user-details {
    align-items: start;
}

.mobile-menu-slider,
.mobile-utilities-slider {
    position: absolute;
    width: 2px;
    left: 0;
    top: 24px;
    z-index: 0;
    background-color: var(--boardPrimary);
    height: 54px;
}

.mobile-utilities-slider {
    height: 62px;
}

.mobile-menu .icon.close{
    cursor: pointer;
}

.sidebar-button {
    display: flex;
    gap: 16px;
    align-items: center;
    position: absolute;
    right: 0;
    height: 100%;
    transform: translateX(100%);
    visibility: hidden;
}

.hamburger-wrapper {
    position: relative;
}

.notification-mark {
    background-color: var(--red);
    width: 8px;
    position: absolute;
    height: 8px;
    border-radius: 100%;
    border: 1px solid var(--white);
    top: -2px;
    right: -5px;
}

.sidebar-button.visible {
    position: static;
    transform: translateX(0%);
    visibility: visible;
}

.mobile-board-select {
    margin: 32px 24px 0px 24px;
    padding: 12px;
    border: var(--border);
    border-radius: var(--borderRadius);
    cursor: pointer;
    position: relative;
}

.mobile-board-select>div {
    display: flex;
    justify-content: space-between;
}

.mobile-board-select ul {
    display: none;
    background-color: var(--white);
    position: absolute;
    z-index: 1;
    border: var(--border);
    left: -1px;
    top: 100%;
    flex-direction: column;
    width: 100%;
    gap: 0px;
}

.mobile-board-select ul li {
    padding: 12px 16px;
    border: none;
}

.mobile-utilities > li > input.mobile-search {
    border: none;
    padding: 0;
    min-height: unset;
    background-color: transparent;
}

.mobile-utilities > li > input.mobile-search::placeholder {
    opacity: 1;
}

/** Page Content **/
section {
    flex: 1;
}

section.section-lists{
    display: flex;
    flex-direction: column;
}

/** Titles Bar **/
.titles-bar, .title, .titles-bar > .buttons, button, a.button, span.info, .select{
    display: flex;
}

.titles-bar {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.titles-bar .title {
    align-items: flex-start;
    gap: 8px;
    -webkit-user-select: none;
    user-select: none;
}

.titles-bar .title h1 > span:first-child {
    font-weight: 600;
}

.title h1 span:not(:first-child) {
    font-weight: 400;
    white-space: break-spaces;
    display: inline-flex;
}

.title h1 > .icon-component {
    margin: 0 8px;
}

.title > .icon-component {
    margin-top: 4px;
}

.title-dropdown-selector .custom-select__trigger {
    background: transparent;
    border: none !important;
    width: auto !important;
    padding: 2px 4px 1px 4px !important;
    margin: 0 -4px;
    height: unset !important;
    font-size: 1.4em;
    line-height: 1.2;
    -webkit-user-select: none;
    user-select: none;
    gap: 8px !important;
    font-weight: 400;
}

.title-dropdown-selector .custom-select__trigger:hover {
    background-color: var(--lightgrey);
}

.titles-bar .return-button {
    background-color: var(--white);
    border: var(--border);
    height: 24px;
    width: 24px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 10px;
    margin-top: -1px;
    margin-right: 2px;
    box-sizing: border-box;
}

.title h1 .dropdown-parent {
    border-radius: var(--borderRadius);
    padding: 2px 6px;
    margin-left: -4px;
}

.title h1 .dropdown-parent:hover {
    background-color: var(--lightgrey);
}

.title .dropdown-parent > .icon.arrow {
    margin-left: 2px;
    position: relative;
    top: -2px;
}

.icon.info {
    cursor: pointer;
}

/* .icon.msteams {
    transform: scale(1.15);
} */

.icon.cross {
    transform: rotate(45deg);
}

span.info:hover .icon.info {
    filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(338deg) brightness(91%) contrast(109%);
}

span.info {
    position: relative;
}

span.info:hover p {
    display: block;
}

span.info>p {
    display: none;
    font-size: 14px;
    position: absolute;
    background-color: var(--white);
    border: var(--border);
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 248px;
    padding: 8px 16px;
    border-radius: var(--borderRadius);
    z-index: 2;
}

/** Buttons **/
.buttons {
    gap: 8px;
    flex-shrink: 0;
}

button.disabled:not(.secondary-btn) {
    cursor: default;
    background-color: transparent;
    color: var(--mediumgrey);
}

button.secondary-btn.disabled {
    opacity: 0.3;
    cursor: default;
    filter: saturate(0.6);
}

button.disabled:not(.secondary-btn):hover,
button.secondary-btn.disabled:hover {
    filter: none;
    border-color: var(--border) !important;
}

button,
a.button,
.select {
    background-color: var(--white);
    border: var(--border);
    color: var(--black);
    border-radius: var(--borderRadius);
    padding: 16px 24px;
    text-decoration: none;
    font-size: inherit;
    cursor: pointer;
    gap: 8px;
    align-items: center;
    justify-content: center;
    position: relative;
    /* transition: .1s ease; */
    -webkit-user-select: none;
    user-select: none;
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 300;
    max-height: 45px;
    box-sizing: border-box;
}

button p {
    position: relative;
    /* top: 1px; */
}

button:hover,
a.button:hover {
    border: 1px solid var(--mediumgrey) !important;
}

button:active,
a.button:active {
    background-color: var(--background);
}

button.primary--s {
    height: 36px;
    padding: 8px 12px;
}

/** Seconday Button **/
button.secondary-btn,
a.button.secondary-btn{
    background-color:var(--boardPrimary);
    color: var(--alwaysWhite);
}

button.secondary-btn > .icon,
a.button.secondary-btn > .icon,
.button-circle img,
.sub-menu-btn img{
    /* filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(124deg) brightness(102%) contrast(102%)!important; */
    transition: .3s ease;
}

button.secondary-btn:hover,
a.button.secondary-btn:hover{
    filter: brightness(1.1);
}

button.secondary-btn:active,
a.button.secondary-btn:active{
    filter: brightness(1);
}

/** Tertiary button **/
button.tertiary {
    padding: 0;
    border: none;
    background: none;
    flex-shrink: 0;
    gap: 6px;
}

button.tertiary.accent {
    color: var(--boardPrimary);
}

button.tertiary:hover {
    border: none!important;
    opacity: 0.6;
}

button.tertiary:active {
    background-color: none;
}

button.small-button-icon {
    padding: 8px;
}

/** Icon button **/
button.icon-button {
    padding: 0;
    height: 32px;
    width: 32px;
}

button.icon-button-simple {
    padding: 0;
    height: 32px;
    width: 32px;
    background: transparent;
    border: none!important;
}

button.icon-button-simple:hover {
    opacity: 0.6;
}

.button-hide {
    display: none !important;
}

.mobile-menu .user>div:last-of-type {
    flex: 1;
    min-height: 100%;
    display: flex;
    align-items: center;
}

.xp-mobile {
    color: var(--boardPrimary);
    font-size: 14px;
    display: flex;
    gap: 4px;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--borderRadius);
    margin-top: 4px;
}

.xp-mobile.xp-disabled {
    display: none;
}

.xp-mobile svg {
    width: 12px;
    fill: var(--boardPrimary);
    stroke-width: 0;
    margin-top: -1px;
}

.xp-mobile p {
    flex-grow: 0 !important;
    font-weight: 600;
}

.xp-mobile .icon.small {
    width: 12px;
    position: relative;
    top: -1px;
    filter: invert(35%) sepia(87%) saturate(1980%) hue-rotate(179deg) brightness(99%) contrast(90%);
}

/*Menus kebab*/
.kebab-menu {
    position: relative;
    display: flex;
}

.kebab-dropdown {
    position: absolute;
    width: max-content;
    min-width: 100px;
    top: 30px;
    right: 0;
    background-color: var(--white);
    border: var(--border);
    z-index: 2;
    word-break: normal;
    border-radius: var(--borderRadius);
    box-shadow: 0 8px 12px -3px #0000001a;
}

.kebab-item {
    padding: 12px 16px;
    cursor: pointer;
    border: 1px solid transparent;
}

.kebab-icon {
    cursor: pointer;
}

.kebab-item:hover {
    background-color: var(--background);
}

.kebab-menu>.icon {
    background-color: transparent;
    border-radius: var(--borderRadius);
    padding: 8px;
    cursor: pointer;
}

.kebab-menu>.icon:hover {
    background-color: #00000024;
}

.float-tooltip-wrapper {
  padding: 8px 12px;
  border-radius: var(--borderRadius);
  background-color: var(--white);
  border: var(--border);
  box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 8%);
  pointer-events: none;
  z-index: 1000;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 30vw;
}

.mobile-board-selector .mark {
    position: static;
    transform: none;
    margin-left: auto;
}



/* banners */
.settings-info-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--background);
  border-left: 3px solid var(--boardPrimary);
  padding: 12px 16px;
  border-radius: var(--borderRadius);
  margin-bottom: 16px;
}

.settings-info-banner p {
  margin: 0;
  font-size: var(--text-s);
}

.insecure-connection-banner {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--alwaysWhite);
  padding: 6px 16px;
  font-size: var(--text-s);
  text-align: center;
  position: relative;
  z-index: 9;
}

.insecure-connection-banner p {
  margin: 0;
}

.app-snackbar {
  position: fixed;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110001;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  max-width: 480px;
  padding: 16px 24px;
  border-radius: var(--borderRadius);
  font-family: 'Roboto Flex', sans-serif;
  font-size: 14px;
}

@media only screen and (min-width: 600px) {
  .app-snackbar {
    top: 4em;
  }
}

.app-snackbar--success {
  background-color: #dbeedb;
  color: #008212;
}

.app-snackbar--error {
  background-color: #ffe2e2;
  color: #ea0000;
}

.app-snackbar--warning {
  background-color: #ffecc7;
  color: #ce6d00;
}

.app-snackbar--info {
  background-color: #e0f0ff;
  color: #0059b3;
}

.app-snackbar--notification {
    background-color: var(--white);
    border: var(--border);
    padding: min(4vw, 20px) min(6vw, 24px);
    color: var(--black);
    min-height: 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

@media only screen and (max-width: 599px) {
  .app-snackbar--notification {
    top: 2em;
    width: 80%;
    box-sizing: border-box;
  }
}

.app-snackbar__icon {
    flex-shrink: 0;
}

.app-snackbar__message {
  flex: 1;
  margin: 0;
  line-height: normal;
  white-space: pre-line;
}

.app-snackbar__close {
  display: flex;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.2;
  cursor: pointer;
  padding: 0;
}

.app-snackbar__close:hover {
  opacity: 0.1;
}

.app-snackbar__close :deep(.stroke) {
  stroke: currentColor;
}

.app-snackbar-enter-active,
.app-snackbar-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-snackbar-enter-from,
.app-snackbar-leave-to {
  opacity: 0;
  transform: translate(-50%, -8px);
}













/* Notifications */
.mark {
    background-color: var(--red);
    width: 10px;
    position: absolute;
    height: 10px;
    border-radius: 100%;
    border: 1px solid var(--white);
    top: 27px;
    right: 16px;
    box-sizing: border-box;
}

.mark.has-number {
    height: auto;
    width: auto;
    min-width: 20px;
    min-height: 20px;
    padding: 0px 4px;
    border-radius: 20px;
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: 500;
    transform: translateX(50%);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mark.secondary {
    background-color: var(--boardPrimary);
}

.mobile-utilities li .mark {
    position: static;
    margin-left: auto;
    transform: none;
}

li.notification.has-unread .icon-component {
    -webkit-animation: bell 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    animation: bell 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

/* KPI Strip */
.kpi-strip {
    background: var(--white);
    border-top: var(--border);
    border-bottom: var(--border);
    border-radius: var(--borderRadius);
    margin-bottom: 8px;
    margin-top: -9px;
}

.kpi-strip-inner {
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 24px;
    box-sizing: border-box;
    justify-content: center;
}

.kpi-strip-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.kpi-strip-loading :deep(.loader) {
  padding: 0;
}

.kpi-strip-loading :deep(.loader-svg) {
  width: 32px;
  margin-bottom: 0;
}

.kpi-strip-divider {
  align-self: stretch;
  width: 1px;
  background: var(--lightgrey);
  flex-shrink: 0;
}

.kpi-strip-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-strip-label {
  font-size: var(--text-s);
    color: var(--darkgrey);
    white-space: nowrap;
}

.kpi-strip-total {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
}

.kpi-strip-total-value {
  font-size: var(--text-3xl);
    font-weight: 600;
    color: var(--verydarkgrey);
}

.kpi-strip-distribution {
  flex: 1 1 auto;
  min-width: 0;
}

.kpi-strip-durations {
  flex-shrink: 0;
  gap: 20px;
}

.kpi-strip-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-strip-fraction-percent {
  margin-left: 4px;
}

.kpi-strip-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--darkgrey);
  cursor: pointer;
  padding: 4px;
}

.kpi-strip-dismiss:hover {
  color: var(--verydarkgrey);
}

.kpi-strip-value-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kpi-strip-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.kpi-strip-value {
  font-size: var(--text-2xl);
    font-weight: 600;
    white-space: nowrap;
}

.kpi-strip-value-row.is-empty .kpi-strip-value {
  color: var(--darkgrey);
  font-weight: 400;
}

.kpi-strip-unit {
  font-size: var(--text-xs);
  color: var(--darkgrey);
  white-space: nowrap;
}

.kpi-strip-empty-caption {
  font-size: 11px;
  color: var(--darkgrey);
}

.kpi-distribution {
  --kpi-series-1: #2a78d6;
  --kpi-series-2: #eb6834;
  --kpi-series-3: #1baf7a;
  --kpi-series-4: #eda100;
  --kpi-series-5: #e87ba4;
  --kpi-series-6: #008300;
  --kpi-series-7: #4a3aa7;
  --kpi-series-8: #e34948;

  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .kpi-distribution {
    --kpi-series-1: #3987e5;
    --kpi-series-2: #d95926;
    --kpi-series-3: #199e70;
    --kpi-series-4: #c98500;
    --kpi-series-5: #d55181;
    --kpi-series-7: #9085e9;
    --kpi-series-8: #e66767;
  }
}

:root[data-theme="dark"] .kpi-distribution {
  --kpi-series-1: #3987e5;
  --kpi-series-2: #d95926;
  --kpi-series-3: #199e70;
  --kpi-series-4: #c98500;
  --kpi-series-5: #d55181;
  --kpi-series-7: #9085e9;
  --kpi-series-8: #e66767;
}

.kpi-distribution-bar {
  display: flex;
    height: 8px;
    border-radius: var(--borderRadius);
    overflow: hidden;
    background: var(--lightergrey);
}

.kpi-distribution-segment {
  height: 100%;
  min-width: 2px;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.kpi-distribution-segment.is-dimmed {
  opacity: 0.35;
}

.kpi-distribution-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
}

.kpi-distribution-chip {
  display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 2px 6px;
    border-radius: var(--borderRadius);
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--darkgrey);
    white-space: nowrap;
}

.kpi-distribution-chip.is-static {
  cursor: default;
  color: var(--mediumgrey);
}

.kpi-distribution-chip:not(.is-static):hover,
.kpi-distribution-chip.is-hovered {
  background: var(--lightgrey);
    border: none !important;
}

.kpi-distribution-chip.is-selected {
  background: var(--lightergrey);
  outline: 1px solid var(--mediumgrey);
}

.kpi-distribution-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kpi-distribution-chip-label {
  white-space: nowrap;
}

.kpi-distribution-chip-value {
  font-weight: 600;
  color: var(--verydarkgrey);
}

@-webkit-keyframes bell {
    0% {
        -webkit-transform: rotateZ(0);
    }

    4% {
        -webkit-transform: rotateZ(20deg);
    }

    8% {
        -webkit-transform: rotateZ(-18deg);
    }

    12% {
        -webkit-transform: rotateZ(24deg);
    }

    16% {
        -webkit-transform: rotateZ(-12deg);
    }

    20% {
        -webkit-transform: rotateZ(4deg);
    }

    24% {
        -webkit-transform: rotateZ(-1deg);
    }

    28% {
        -webkit-transform: rotateZ(1deg);
    }

    32% {
        -webkit-transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(0);
    }
}

@keyframes bell {
    0% {
        -webkit-transform: rotateZ(0);
    }

    4% {
        -webkit-transform: rotateZ(20deg);
    }

    8% {
        -webkit-transform: rotateZ(-18deg);
    }

    12% {
        -webkit-transform: rotateZ(24deg);
    }

    16% {
        -webkit-transform: rotateZ(-12deg);
    }

    20% {
        -webkit-transform: rotateZ(4deg);
    }

    24% {
        -webkit-transform: rotateZ(-1deg);
    }

    28% {
        -webkit-transform: rotateZ(1deg);
    }

    32% {
        -webkit-transform: rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(0);
    }
}

@media (max-width:1000px) {
    .kpi-strip-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px;
        gap: 16px;
    }

    .kpi-strip-total {
        align-items: flex-start;
    }

    .kpi-strip-inner > .icon-button-simple {
        align-self: center;
        padding: 4px 0 !important;
        height: auto;
        width: 100%;
    }

    .kpi-strip-durations {
        flex-wrap: wrap;
        gap: 16px 24px;
    }

    .kpi-strip-divider {
        width: 100%;
        height: 1px;
    }
}

@media (max-width:961px) {
    footer .terms {
        flex-direction: column !important;
        gap: 16px !important;
    }
}

@media (max-width:800px) {
    .titles-bar {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        margin-top: 12px;
    }

    .titles-bar > .buttons {
        width: 100%;
        flex-wrap: wrap;
    }

    .titles-bar > .buttons > * {
        flex: 1;
        min-width: 200px;
    }
}

@media (max-width:500px) {
    footer .cont {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
        gap: 16px !important;
    }
}

@media (max-width:480px) {
    .clientLogo {
        max-width: 150px;
        min-height: unset;
        max-height: 40px;
    }

    nav {
        height: 72px;
    }
}