@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('site-custom.css');


body:not(.rz-default-scrollbars)::-webkit-scrollbar {
    background-color: var(--structureColor1);
}
body:not(.rz-default-scrollbars)::-webkit-scrollbar-thumb {
    background: var(--structureColor3);
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 8px;
}
body:not(.rz-default-scrollbars)::-webkit-scrollbar-corner {
    background-color: var(--structureColor1);
}
body:not(.rz-default-scrollbars) ::-webkit-scrollbar {
    background-color: var(--structureColor1);
}
body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb {
    background: var(--structureColor3);
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 8px;
}
body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner {
    background-color: #ffffff;
}

body {
    font-family: var(--fontFamily1);
    font-size: var(--defaultFontSize);
    line-height: var(--defaultLineHeight);
    font-weight: var(--defaultFontWeight);
    color: var(--sagaColor1);
    background: var(--structureColor1);
}

.AddMasterProject {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0 0;
}

h1, h2, h3, h4 {
    margin: 0;
}

h1 {
    font-weight: var(--defaultBoldFontWeight);
    font-size: var(--defaultFontSizeH1);
    line-height: var(--defaultLineHeightH1);
}
    h1 .fontWeightLight {
        font-weight: var(--defaultFontWeight);
    }

h2 {
    font-weight: var(--defaultBoldFontWeight);
    font-size: var(--defaultFontSizeH2);
    line-height: var(--defaultLineHeightH2);
}

h3 {
    font-weight: var(--defaultBoldFontWeight);
    font-size: var(--defaultFontSizeH3);
    line-height: var(--defaultLineHeightH3);
}

a,
.btn-link {
    color: var(--sagaColor1);
}
    a:hover {
        color: unset;
    }

label {
    margin: 0;
}

.btn {
    color: var(--sagaColor1);
    background-color: var(--sagaColor3);
    display: inline-block;
    font-size: var(--defaultFontSize);
    line-height: var(--defaultLineHeight);
    font-weight: var(--defaultFontWeight);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.5rem 2rem;
    border-radius: var(--sagaButtonBorderRadius);
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-group .btn {
    color: var(--sagaSecondaryButtonTextColor);
    background-color: var(--sagaSecondaryButtonBgColor);
}
    .btn-group .btn.active {
        color: var(--sagaPrimaryButtonTextColor);
        background-color: var(--sagaPrimaryButtonBgColor);
    }

button.btn.btn-primary {
    background: transparent;
    outline: none;
    border: none;
    box-shadow: none;
    border: 1px solid #8d8d8d;
    font-size: 1rem;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: unset;
}




button.btn.btn-primary:focus, button.btn.btn-primary:hover {
    outline: none;
    border: none;
    box-shadow: none;
}

.UserSearchResult {
    color: inherit;
    display: flex;
    padding: .5rem;
    font-size: 1rem;
    align-items: center;
}

    .UserSearchResult:nth-of-type(odd) {
        background-color: rgba(33,33,33,.035);
    }

    .UserSearchResult:nth-of-type(even) {
        background-color: rgba(33,33,33,.045);
    }


    .UserSearchResult .UserName {
        margin-right: .5rem;
    }

    .UserSearchResult .UserMail {
        opacity: .6;
        font-size: .75rem;
    }

    .UserSearchResult:hover {
        color: var(--sagaColor4);
    }


button.btn-secondary:hover, button.btn-secondary:active, button.btn-secondary {
    outline: none;
    border: none;
    box-shadow: none;
}

app {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: default;
}

.top-row {
    height: 3.5rem;
    display: flex;
    align-items: center;
}

button.navbar-toggler {
    z-index: 5;
}


.rz-menu:not(.rz-profile-menu) {
    background-color: transparent;
    font-size: 1rem;
}
    .rz-menu:not(.rz-profile-menu) .rz-navigation-item-link {
        color: var(--structureColor1);
        padding: 0.5rem 1rem !important;
    }
    .rz-menu:not(.rz-profile-menu) > .rz-navigation-item-wrapper .rz-navigation-item-link {
        padding: 0.5rem !important;
        color: var(--structureColor1);
    }

@media (max-width: 1024px) {
    .rz-menu-toggle-item {
        display: block;
    }

    .rz-menu:not(.rz-profile-menu) {
        display: block;
        position: absolute;
        right: 0;
        top: 0.5rem;
        background: var(--structureColor2);
        min-width: 300px;
    }

    .rz-menu.rz-menu-closed:not(.rz-profile-menu) .rz-navigation-item {
        display: none;
    }

    .rz-menu.rz-menu-open:not(.rz-profile-menu) .rz-navigation-menu {
        position: static;
        box-shadow: none;
    }

}

/*
.rz-menu-toggle-item {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
}

@media (max-width: 768px) {
    .rz-menu:not(.rz-profile-menu) {
        position: absolute;
        right: 0;
        top: 0;
        background: var(--structureColor2);
        min-width: 300px;
    }
}
*/
/* login and logout */
.WelcomeLogout {
    display: flex;
    position: absolute;
    justify-content: space-between;
    width: 100%;
}

.Welcome {
    display: flex;
}

    .Welcome a {
        color: #fff;
        display: flex;
        flex-direction: row;
    }

        .Welcome a div {
            margin-right: .25rem;
        }



.main {
    flex: 1;
    padding-top: 55px;
    min-height: 100vh;
    width: 100%;
}

.main-content {
    flex: 1;
    padding-top: 55px;
    min-height: 100vh;
    width: 100%;
    background: var(--structureColor1) !important;
    max-width: 1124px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: 0;
    margin: 0 auto 4rem;
    padding: 0 15px;
}

.change-task-status .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.main .top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
}

    .main .top-row > a, .main .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .main .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* opened project view */
.project-content {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    margin: 0 auto;
}

.project-header {
    width: 100%;
    padding-top: 53px;
}

    .project-header .level0 .project-card-header,
    .project-header .level0 .card-inner-shadow,
    .project-header .level0 .level0-footer .add-button {
        display: none;
    }

    .project-header .card-body.project-image {
        background: var(--structureColor1) !important;
        max-width: 1398px;
        width: 100%;
        display: flex;
        flex-direction: row;
        height: auto;
        border-radius: 0;
        margin: 0 auto;
    }

    .project-header .projectsmain-link {
        background: var(--structureColor1) !important;
        max-width: 1398px;
        width: 100%;
        display: flex;
        flex-direction: row;
        margin: 0 auto;
        padding: 1rem;
        color: var(--structureColor3);
        font-size: 0.875rem;
    }

    .project-header .level0 .card-content {
        color: var(--sagaColor1);
        text-shadow: 1px 1px 2px black;
        justify-content: center;
        width: 100%;
        text-shadow: none;
    }

    .project-header .level0-name {
        font-size: var(--defaultFontSizeH1);
        line-height: var(--defaultLineHeightH1);
        font-weight: var(--defaultBoldFontWeight);
        color: var(--sagaColor1);
        line-height: 1.2em;
    }

    .project-header .level0 .project-short-description {
        color: var(--sagaColor1);
    }

    .project-header .level0-footer {
        margin: 0 1rem;
        padding: 1rem 0;
        border-top: none;
        align-items: center;
    }

    .project-header .level0 .functional-icon span {
        color: var(--structureColor3);
    }

        .project-header .level0 .functional-icon span svg:hover {
            color: var(--sagaColor3);
        }

.project-hero {
    width: 100%;
    height: 254px;
    background-color: #ddd;
    background-size: cover;
    background-position: center center;
}

/*
.flex-container {
    max-width: 1398px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
*/

.page-title {
    padding: 2rem 0;
}
    .page-title .indicator {
        margin: 0 0 .5rem 1rem;
        padding: 0.5rem;
        border-radius: 8px;
        color: var(--sagaColor1);
        font-size: .9rem;
        line-height: 1em;
        font-weight: var(--defaultFontWeight);
        background: var(--sagaColor3);
        vertical-align: middle;
    }



.opened-view {
    width: 100%;
    padding: 1rem;
    background-color: transparent;
    min-height: 100vh;
    max-width: 1000px;
}

.menu {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    width: unset;
}

    .menu h2 {
        font-weight: var(--defaultBoldFontWeight);
        font-size: 18px;
        line-height: 22px;
        padding: 1rem 0 1.75rem;
    }

.project-content .card.full-level {
    border-radius: 4px;
    margin-top: 1rem;
    position: sticky;
    top: 5.5rem;
}



.sidebar {
    background: var(--structureColor2);
    position: fixed;
    width: 100%;
    z-index: 9;
}

    .sidebar .top-row > div {
        display: flex;
        align-items: center;
    }

    .sidebar .navbar-dark .navbar-toggler {
        color: var(--structureColor1);
        background: var(--structureColor3);
        border: 0;
        padding: 0.25em;
    }

    .sidebar .navbar-dark .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        width: 1em;
        height: 1em;
    }

        .sidebar .navbar-dark .navbar-toggler-icon::background-image {
            opacity: 1 !important;
        }

    .sidebar .navbar-brand {
        color: var(--structureColor1);
        font-size: 1.1rem;
        height: 100%;
        position: relative;
        padding-left: 145px;
        padding-left: 145px;
        z-index: 89;
    }

        .sidebar .navbar-brand img {
            position: absolute;
            top: -0.8125rem;
            left: 0;
            width: 120px;
            max-width: 100%;
            padding: 1.5rem 1rem;
            background: var(--sagaLogoBgColor);
            box-shadow: 0px 4.88056px 9.76111px rgba(0, 0, 0, 0.1);
        }

    .sidebar .oi {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
        max-width: 290px;
        width: 100%;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: var(--structureColor3);
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: var(--sagaPrimaryButtonBgColor);
                color: var(--sagaPrimaryButtonTextColor);
            }

            .sidebar .nav-item a:hover {
                background-color: var(--sagaColor2);
                color: var(--sagaColor1);
            }

    .sidebar .LoginDisplay {
        list-style: none;
        display: flex;
        align-items: center;
        margin: 0 1rem 0 0;
        z-index: 2;
    }

        .sidebar .LoginDisplay .notLoggedin {
        }

        .sidebar .LoginDisplay li a {
            color: var(--structureColor1);
            padding: 0.5rem 2rem;
        }

    .sidebar .functional-icon span {
        color: inherit;
    }

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    background: var(--structureColor1);
    z-index: 88;
    align-items: center;
    position: absolute;
    right: 0;
    height: calc(100vh - 56px);
    min-width: 18rem;
    overflow: auto;
    box-shadow: 0px 4.88056px 9.76111px rgb(0 0 0 / 10%);
}

a.nav-link.functional-icon span {
    margin-right: .5rem;
}

li.logout {
    font-size: .7rem;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    line-height: 1em;
    text-align: right;
    display: flex;
    align-items: center;
    width: 258px;
    padding: 0.5em 1em;
    border-radius: 4px;
    font-size: 0.9rem;
    margin: 1rem;
    border: 1px dashed var(--structureColor4);
}
    li.logout:hover {
        background-color: var(--sagaColor2);
        color: var(--sagaColor1);
    }
    li.logout div {
        margin-left: .25rem;
        margin-bottom: .10rem;
    }
    li.logout form {
        width: 100%;
    }
        li.logout form button {
            width: 100%;
            display: flex;
            justify-content: space-between;
            text-align: left;
            color: var(--sagaColor1);
            background: transparent;
        }


.currentusertask {
    color: var(--structureColor1);
    border: 1px dashed var(--structureColor3);
    border-radius: 8px;
    padding: 0.5rem;
    z-index: 9;
}
    .currentusertask .current-user-task-name {
        font-size: .799rem;
        max-width: 10rem;
        overflow: hidden;
        white-space: nowrap;
    }
    .currentusertask .tasktimeuser {
        font-size: .799rem;
    }


.content {
    padding-top: 1.5rem;
    background: linear-gradient( 120deg, #ececec 0%, #c7c7c7 100%);
    background: #FFF;
}


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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        background: #252525;
    }



/* Search features */
.SearchProjects {
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: rgba(33,33,33,.025);
}

.ProjectSearch {
    display: flex;
    flex-direction: row;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    justify-content: space-evenly;
}

.FindCompany, .FindProject {
    margin: .5rem;
    border-bottom: 1px solid var(--sagaColor4);
    display: flex;
    align-items: center;
    line-height: 1em;
}

.ClearSearch {
    margin: .5rem;
}

.FindCompany .blazored-typeahead__input, .FindProject input {
    border: unset;
    border-radius: unset;
    padding: 0;
    height: unset;
    font-weight: unset;
    font-size: .85rem;
    display: flex;
    color: #000;
    line-height: 1em;
    background-color: transparent;
}

.FindCompany .blazored-typeahead__controls:focus {
    border: 0;
}

.FindCompany .blazored-typeahead:focus-within {
    outline: unset;
    border: 0;
    box-shadow: none;
}

.FindProject .form-control:focus {
    color: inherit;
    background-color: #fff;
    border-bottom-color: var(--sagaColor4);
    outline: 0;
    box-shadow: unset;
    border: 0;
}

.blazored-typeahead {
    border: 0;
    border-radius: 4px;
}

    .blazored-typeahead:focus-within {
        box-shadow: none;
    }

.ClearSearch button {
    /* font-size: .8rem; */
    font-size: .75rem;
    background: var(--sagaColor4);
    border-radius: 4px;
    border: 0;
    padding: .15rem .5rem;
    color: #fff;
    margin: 0;
}

button.add-button {
    background: unset;
    padding: 0;
    border: 0;
    /* border-radius: 100%; */
    /* font-size: .8rem; */
    transition: 0.3s;
}

}

button.add-button span {
}

.level1-header {
    display: flex;
    justify-content: space-between;
}

.user-mini-card .user-name {
    margin: 0 1rem 0 .5rem;
}



button:focus {
    outline: unset;
}

.projects-hero {
    width: 100%;
    /*height: 53px;*/
    background: #FBFBFB;
    border-bottom: 1px solid var(--structureColor4);
    box-sizing: border-box;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.05);
}

.page-header-actions .search {
    padding: 0.5rem;
}

.projectweekly-buttons svg:hover {
    color: var(--taskColor2);
}

.note-content {
    cursor: pointer;
}

    .note-content p:hover {
        text-decoration: underline;
        text-underline-position: under;
    }

.projectweekly-archive span:hover, .note-commands span:hover {
    color: var(--taskColor2);
}

.projects-header {
    justify-content: space-between;
    display: flex;
    margin-bottom: 1rem;
    padding: 1rem 1rem 0 1rem;
}

/* descriptions */
.project-short-description {
    display: flex;
    font-size: .85rem;
    line-height: 1rem;
    color: #000;
    margin-top: 0.75rem;
    width: calc(100% - 1rem);
}

.level0 .add-button, .level0 .project-short-description {
    color: #fff;
}

.level0 .settings {
    display: flex;
    align-items: flex-end;
}
/* modal-2021 */
.modal-2021 {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 750px;
    border-radius: 4px;
    overflow-y: auto;
    /*transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); */
    max-height: 90vh;
    background-color: #fff;
    z-index: 102;
    display: flex;
    flex-direction: column;
    animation: .3s ease-in-out 0s 1 SwapIcon !important;
}

.blazored-modal-close {
    padding: 0.75rem;
    margin: 0;
    font-size: unset;
    display: flex;
    align-items: center;
    background-color: inherit;
}
    .blazored-modal-close span {
        line-height: 1.5rem;
        font-size: 1.5rem;
        color: var(--sagaColor1);
    }

.blazored-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background-color: var(--structureColor1);
    color: var(--sagaColor1);
}

h3.blazored-modal-title {
    color: var(--sagaThemeColor1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: AxiformaBold;
    font-size: 1.5em;
    margin: 1.5rem 0 0;
}



.form-image img {
    max-width: 100%;
}
.blazored-modal-container .remove {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border: 2px dashed var(--structureColor4);
    border-radius: 8px;
    color: var(--structureColor3);
    cursor: pointer;
    margin: 0 1rem 1rem;
    padding: 1rem;
}
    .blazored-modal-container .remove span {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

.blazored-modal-content .card-body {
    padding: 1rem; 
}

/* form components */
.modal-2021 form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.modal-settings-header {
    padding: 1rem;
    margin: 0;
}

.form-element {
    padding: 0rem 1rem 1rem 1rem;
    margin: 0;
}

.form-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*    height: 100%;
    height: inherit;*/
}



.form-instructions {
    width: 30%;
    display: flex;
    flex-direction: column;
    background-color: whitesmoke;
    justify-content: space-between;
    display: none;
}

.instruction-content {
    height: 100%;
    padding: 1rem;
    border-left: .025rem solid #0000001f;
}



@media (max-width: 700px) {
    .form-instructions {
        width: 100%;
        border-top: 1px solid #e4e4e4;
        border-left: 0;
    }

    .form-container {
        width: 100%;
    }
}

.form-instructions h4 {
    font-size: .8rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.form-instructions p {
    font-size: .8rem;
    font-weight: 400;
}

.form-element label {
    margin: 0;
}

.blazored-modal-content {
    display: flex;
    flex-wrap: wrap;
}
    .blazored-modal-content .form-contentainer-row {
        width: 100%;
        display: flex;
        padding: 1rem;
    }

    .blazored-modal-content .card {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .blazored-modal-content form {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

/* form inputs */
textarea, input {
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--structureColor1);
    border: 1.2px solid var(--structureColor4);
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 1em;
}
    input[type=file] {
        border-radius: 0;
    }


.form-control-sm {
    font-size: var(--defaultFontSize);
}

textarea {
    width: 100%;
}

select {
    background: transparent;
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--structureColor1);
    border: 1.2px solid var(--structureColor4);
    box-sizing: border-box;
    border-radius: 8px;
}


.form-row {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}
.form-row .col input {
    width: 100%;
}

.rz-colorpicker,
.rz-lookup-search input,
.rz-spinner,
.rz-calendar .rz-inputtext,
.rz-multiselect,
.rz-dropdown,
.mask,
.rz-textarea,
.rz-textbox {
    border: 1px solid var(--structureColor5);
    border-radius: 8px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: var(--structureColor1);
    /*margin-left: 0.5rem;*/
}


.SubmitForm {
    margin-top: 1rem;
}

textarea:focus, input:focus {
    outline: unset;
    border-color: var(--sagaColor4);
}

.form-element label {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 1em;
    text-transform: uppercase;
}

.form-element:first-of-type {
    padding-top: 1rem;
}

.form-footer, .create-new-footer {
    width: 100%;
    vertical-align: bottom;
    justify-content: space-between;
    display: flex;
    align-items: flex-end;
    margin-top: auto;
    position: sticky;
    z-index: 1;
    bottom: 0;
    background-color: var(--structureColor2);
    background-color: var(--structureColor1);
    border-top: 1px solid var(--structureColor4);
    padding: 1rem;
}
/* When the cancel button cannot be inside a form - fix until better ideas occur */
.form-footer-second-row {
    position: static;
    padding: 0 1rem 1rem;
}

.form-instructions .cancel-footer {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: black;
    padding: 1rem;
    text-align: right;
}

.form-instructions .cancel-footer, .form-container .form-submit-footer {
    padding: 1rem;
    font-size: .85rem;
}

.AddUsersHeader {
    display: flex;
    flex-direction: row;
}

.InviteUsers {
    display: flex;
    flex-direction: row;
}

    .InviteUsers .blazored-typeahead {
        width: 100%;
        margin-right: .25rem;
    }

    .InviteUsers button {
        font-size: .75rem;
        background: var(--sagaColor4);
        border-radius: 4px;
        border: 0;
        padding: .15rem .5rem;
        color: #fff;
        margin: 0;
    }


.roles-list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 1rem;
}
    .roles-list .role {
        width: 14rem;
        max-width: 100%;
        margin: 0 .25rem .5rem;
        padding: 0.5rem;
        border-radius: 8px;
        cursor: pointer;
        color: inherit;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        font-size: .7rem;
        border: 1px solid var(--structureColor4);
        align-items: center;
    }
        .roles-list .role .role_name {
            font-size: 0.8rem;
            font-weight: 600;
        }
        .roles-list .role p {
            margin-bottom: 0.5rem;
        }
        .roles-list .role .role_description {
            width: 100%;
            text-align: center;
        }

/* open settings / modals */

span.remove-object:hover {
    color: var(--sagaColor4);
    cursor: pointer;
}

span.remove-object svg {
    width: 16px;
    height: auto;
}

.form-element.create-new-footer span {
    float: right;
}

.add-long-description textarea {
    width: 100%;
    margin: 0;
}

.form-submit-footer {
    display: flex;
    width: 100%;
}

/* card */
.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: unset;
    /*    border-radius: 4px;*/
}

    .card-body.level1:last-of-type {
        /*    border-bottom: 0;*/
    }

.card {
    border: 0;
}

.project-page {
    display: flex;
    flex-direction: column;
    background-color: var(--structureColor1);
    position: relative;
    border: 1px solid var(--structureColor4);
    border-radius: 8px;
    transition: all .3s;
    margin: 0.5rem 0 4rem;
    padding: 0.5rem 0.5rem 2rem;
    text-align: center;
}
    .project-page > * {
        width: 100%;
    }
    .project-page-content {
        display: flex;
        flex-direction: column;
    }
        .project-page-content > * {
            width: 100%;
        }
        .project-page-content h3 {
            margin-bottom: 1rem;
        }
        .project-page-content p {
            font-size: .9rem;
            width: 100%;
        }


.project-long-description {
    font-size: .9rem;
    text-align: left;
    padding: 1.5rem 1rem 1rem;
}

.project-page-notes {
    text-align: left;
    padding: 1rem;
}

.project-page .brandeaccordion-header {
    top: -1rem;
    padding: 0 1rem;
    background: var(--structureColor1);
    position: absolute;
}
.project-page-notes .brandeaccordion {
    border: 1px solid var(--structureColor3);
    border-radius: 5px;
    padding: 2rem;
    margin: 1rem 5px 2rem;
    position: relative;
    background-color: var(--structureColor1);
}

.project-task-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
    .project-task-stats p {
        width: 100%;
    }
    .project-task-stats span {
        display: inline-block;
        line-height: 1.5rem;
        text-align: center;
        font-size: 0.75rem;
        font-weight: var(--defaultBoldFontWeight);
        width: 1.5rem;
        height: 1.5rem;
        margin-left: 1rem;
        border-radius: 50%;
        background-color: var(--structureColor4);
        color: var(--structureColor2);
    }

    .project-task-stats div {
        margin: 0 .5rem .5rem 0;
        padding: 0.5rem;
        border-radius: 8px;
        color: inherit;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        font-size: .9rem;
        font-weight: var(--defaultFontWeight);
        border: 1px solid var(--structureColor4);
        align-items: center;
    }
    .project-task-stats .finished span {
        background: var(--taskColor2);
        color: var(--structureColor1);
    }
    .project-task-stats .not-started span {
        background: var(--taskColor3);
        color: var(--structureColor1);
    }
    .project-task-stats .ongoing span {
        background: var(--taskColor4);
        color: var(--structureColor1);
    }
    .project-task-stats .creator span {
        background: var(--taskColor4);
        color: var(--structureColor1);
    }
/*.project-task-stats .finished span,
        .project-task-stats .not-started span,
        .project-task-stats .ongoing span {
            background-color: var(--structureColor1);
        }*/

.project-expense-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
    .project-expense-stats > * {
        width: 100%;
    }

.budjet-percent {
    width: 175px;
    margin: 0 auto 3rem;
}
    .budjet-percent .points {
        font-size: 0.18rem;
    }

/* user mini card */
.project-users {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1.5rem 0 0 0;
    width: 100%;
    margin: 0;
}
.userlist-mini-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: .5rem 0 0 0;
    width: 100%;
}
    .project-users p {
        width: 100%;
    }
    .project-users ul.rz-profile-menu,
    .userlist-mini-cards ul.rz-profile-menu {
        padding: 0;
        border-left: none;
    }
        .project-users ul.rz-profile-menu .rz-navigation-item-icon-children,
        .userlist-mini-cards ul.rz-profile-menu .rz-navigation-item-icon-children {
            display: none;
        }
        .project-users ul.rz-profile-menu .rz-navigation-menu,
        .userlist-mini-cards ul.rz-profile-menu .rz-navigation-menu {
            left: 50%;
            right: auto;
            transform: translate(-50%, 0);
        }

.task-card .userlist-mini-cards {
    padding: 0;
}

.user-mini-card {
    width: fit-content;
    margin: 0 .5rem .5rem 0;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    font-size: .7rem;
    font-weight: 600;
    border: 1px solid var(--structureColor4);
    align-items: center;
    -webkit-transition: padding .2s ease-in, margin .2s ease-in;
    -moz-transition: padding .2s ease-in, margin .2s ease-in;
    -o-transition: padding .2s ease-in, margin .2s ease-in;
    transition: padding .2s ease-in, margin .2s ease-in;
}

.user-mini-card-sm {
    width: fit-content;
    margin: .25rem .5rem .75rem 0;
    padding: 0.25rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid var(--structureColor4);
    align-items: center;
    -webkit-transition: padding .2s ease-in, margin .2s ease-in;
    -moz-transition: padding .2s ease-in, margin .2s ease-in;
    -o-transition: padding .2s ease-in, margin .2s ease-in;
    transition: padding .2s ease-in, margin .2s ease-in;
}

    .user-mini-card.highlight,
    .user-mini-card-sm.highlight {
        background: var(--taskColor1);
    }

.userlist-mini-cards .user-name {
    margin: 0 1rem 0 .5rem;
}

.user-mini-card.selected,
.user-mini-card-sm.selected {
    border: 1px solid var(--sagaColor4);
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
    color: inherit;
}

.user-mini-card .user-img {
    width: 32px;
    height: 32px;
}

.user-mini-card-sm .user-img {
    width: 32px;
    height: 32px;
}

    .user-mini-card .user-img img,
    .user-mini-card-sm .user-img img {
        width: 100%;
        height: auto;
        border-radius: 100%;
    }

.task-creator {
    display: flex;
    flex-direction: column;
    margin: 0 1rem 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--structureColor4);
    text-align: center;
}
    .task-creator .user-mini-card-sm,
    .task-creator .user-mini-card {
        margin: 0 auto;
        padding: 0;
        border: none;
        flex-direction: column;
    }
        .task-creator .user-mini-card .user-name {
            margin: 0 .5rem;
        }
    .task-creator .user-img {
        width: 25px;
        height: 25px;
    }
    .task-creator .created-time {
        font-size: 0.65rem;
        line-height: 0.75rem;
        display: inline-block;
    }


.resource-user-row {
    border: 1px solid var(--structureColor4);
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0 0 .5rem 0;
}
    .resource-user-row .user-mini-card {
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
    }

.resource-stats div {
    width: calc(50% - 1rem);
    margin: 0 .5rem .5rem 0;
    padding: 0.5rem;
    border-radius: 8px;
    color: inherit;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    font-size: .9rem;
    font-weight: var(--defaultFontWeight);
    border: 1px solid var(--structureColor4);
    align-items: center;
    justify-content: center;
}
    .resource-stats div.overresourced {
        border: 1px solid #e00;
        color: #e00;
        background: #ffe3e3;
    }
    .resource-stats div .circular-chart {
        max-width: 200px;
        padding: 1rem;
        height: auto;
    }

.current-customer > a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 2rem 0.5rem 0.5rem !important;
    position: relative;
}
    .current-customer > a .customer-img {
        width: 20px;
        height: 20px;
    }
        .current-customer > a .customer-img img {
            width: 100%;
            height: auto;
            background: #fff;
            border-radius: 100%;
        }
    .current-customer > a span {
        padding-left: 0.5rem;
    }
        .current-customer > a span svg {
            fill: var(--structureColor1);
        }



/* link colours */
a.level1-link {
    cursor: pointer;
    /*text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: var(--sagaColor4);
    transition: .3s;*/
    /*new gradient - check with multiple browsers */
    /*    background: -webkit-linear-gradient( 0deg, #ff0000,var(--sagaColor4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    */
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
}

    a.level1-link:hover {
        /*background: -webkit-linear-gradient( 0deg, #ff0000,var(--sagaColor4));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-transition: background 1s ease-out;
        -moz-transition: background 1s ease-out;
        -o-transition: background 1s ease-out;
        transition: background 1s ease-out;*/
    }

a.level0-link {
    /*cursor: pointer;
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: var(--sagaColor4);*/
    /*new gradient - check with multiple browsers */
    /*background: -webkit-linear-gradient( 0deg, #ff0000,var(--sagaColor4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    -webkit-transition: background 1s ease-out;
    -moz-transition: background 1s ease-out;
    -o-transition: background 1s ease-out;
    transition: background 1s ease-out;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    z-index: 3;
}


a.level-1_link.active:before {
    content: '';
}

a.level-1_link:hover {
}

a.level-1_link:hover {
    /*color: var(--sagaColor4);*/
}

.change-project-status {
    display: flex;
    flex-wrap: wrap;
    margin: unset;
}

.SubProjectHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.sub-project-title {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    word-wrap: normal;
}



.sub-project-name {
    width: calc(100% - 1rem);
    line-height: 1.2rem;
}

.card-body.project-image {
    background-size: cover !important;
    background-position-x: 50% !important;
    background-position-y: 20% !important;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-top-left-radius: 4px;
    z-index: 2;
    height: 300px;
    position: relative;
    border-top-right-radius: 4px;
    border-radius: 4px;
}

/* InviteUsersToProject/Task */
.InternalUsers {
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: .5rem;
    padding-bottom: .5rem;
}


/* register */

.RegistryHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem .5rem .5rem .5rem;
}

.AddToRegistry {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    margin: 1rem 1rem .5rem 1rem;
    max-width: 500px;
}

.AddNewBusinessContent {
    width: 100%;
}

.FindNewBusiness {
    display: flex;
    padding: 1rem;
    /*box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);*/
    border-bottom: 1px solid #e4e4e4;
    background-color: rgba(33,33,33,.025);
}

    .FindNewBusiness button {
        margin-left: .5rem;
    }

.ChooseNewBusiness {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    flex-direction: row;
    /*padding: 0rem .75rem .75rem .75rem;*/
}

.BusinessSearchCard {
    display: flex;
    flex-direction: column;
    width: calc(50% - .5rem);
    margin: .25rem;
    padding: .5rem;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.CompanyID {
    width: 100%;
    display: flex;
    align-items: baseline;
    padding-bottom: 0;
    margin-bottom: .2rem;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    padding-top: .2rem;
}

    .CompanyID.functional-icon span {
        width: 1rem;
        height: 1rem;
        display: flex;
        color: #c7c7c7;
    }

.CompanyNameHeader {
    padding: 1rem 0rem 0rem 1rem;
    font-weight: 600;
}

.BusinessSearchCard .CompanyName {
    display: flex;
    align-items: normal;
}

.CompanyName {
    font-weight: 700;
}

.AddBusinessFull .CompanyName {
}

.BusinessBasicInformation {
    display: flex;
    flex-direction: column;
    width: calc(100% - 2rem);
    margin: 1rem;
    padding: .5rem;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.CompanyAddress {
    display: flex;
    align-items: center;
}

.AlreadyAdded p {
    background-color: #00801f;
    color: #fff;
    font-size: .6rem;
    text-transform: uppercase;
    padding: .2rem .2rem 0rem .2rem;
    margin-right: .25rem;
    border-radius: 4px;
    margin-bottom: 0;
    font-weight: 400;
}

.RegisterTag p {
    background-color: #00801f;
    color: #fff;
    font-size: .6rem;
    text-transform: uppercase;
    padding: .25rem .25rem .10rem .25rem;
    margin-right: .25rem;
    border-radius: 4px;
    margin-bottom: 0;
    font-weight: 400;
}

.PostAddress p {
    background-color: #e16f00;
}

.VisitAddress p {
    background-color: dodgerblue;
}





.AddBusinessFooter {
    width: 100%;
    vertical-align: bottom;
    justify-content: space-between;
    display: flex;
    align-items: flex-end;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background-color: transparent;
    padding: 1rem;
}

.AddBusinessExtraDetail {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0 1rem 1rem 1rem;
    padding: .5rem;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.AdditionalBusinessInfo {
    display: flex;
    flex-direction: row;
}

.CompanyContent {
    display: flex;
    flex-direction: column;
}




.BusinessRegister {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.RegistryBusinessCard {
    background-size: cover !important;
    background-position-x: 50% !important;
    background-position-y: 20% !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    z-index: 2;
    height: 300px;
    width: 100%;
    position: relative;
    box-shadow: 0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
    margin: 20px;
    background-color: #818181;
}

.BusinessCardContent {
    padding: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    cursor: pointer;
    transition: all .3s ease-in-out;
    color: var(--sagaColor4);
}

.RegistryBusinessCard:hover .level0-footer {
    opacity: 1;
}

.CardGradientColour {
    background: linear-gradient( 360deg, rgba(20, 12, 51, .7) 30%, rgb(0 0 0 / 6%) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
}

.BusinessName {
    display: flex;
    padding: 1rem;
}


@media screen and (min-width: 768px) {
    .RegistryBusinessCard {
        width: 300px;
    }
}

@media screen and (min-width: 991px) {
    .RegistryBusinessCard {
    }
}


@media screen and (min-width: 1200px) {
    .RegistryBusinessCard {
    }
}


.card-inner-shadow {
    background: linear-gradient( 360deg, rgba(0,0,0,.81) 24%, rgba(0,0,0,.3) 50%,rgba(0,0,0,.02) 60%,rgba(0,0,0,.01) 70%, rgba(0,0,0,0) 100%);
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
}





.level1.status {
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
    width: 100%;
}



.open-modal-icon {
    cursor: pointer;
}

.add {
    display: flex;
}

.add-button span:before {
    font-size: .75rem;
}

button.add-button {
    opacity: 1;
    font-size: 1rem;
    display: flex;
    align-items: center;
    line-height: 1em;
    color: #000;
}

.blazored-toast-container {
    z-index: 100;
}

.blazored-toast-info {
    background-color: #000000;
}

button.add-button span {
    margin-left: .25rem;
}

button.add-button span svg {
    width: 100%;
    height: 100%;
}

button.add-button:hover {
    opacity: 1;
}

.functional-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .functional-icon p {
        margin: 0 0 0 .5rem;
        font-size: 0.75rem;
        font-weight: var(--defaultBoldFontWeight);
        background-color: var(--sagaColor2);
        color: var(--structureColor2);
        border-radius: 8px;
        padding: 0.25rem 0.5rem;
    }

    .functional-icon span {
        width: 1.25rem;
        height: 1.25rem;
        display: flex;
        color: var(--structureColor5);
        cursor: pointer;
        margin-left: .5rem;
        transition: all .3s;
    }

.card-body.level1.active .functional-icon p {
    color: var(--sagaColor2);
    background: var(--sagaColor1);
}

.card-body.level1.active .functional-icon span {
    color: var(--sagaColor1);
}
    .card-body.level1.active .functional-icon span svg {
        fill: var(--sagaColor1);
    }

.card-body.level1.active:hover .functional-icon span {
    opacity: 1;
}

.functional-icon span.notificationEnabled {
    color: var(--sagaColor3);
}
.functional-icon span.notificationEnabled.new {
    transform-origin: 50% 4px;
    animation: bell-ringing 4s .7s ease-in-out infinite;
}

@keyframes bell-ringing {
    /*0% {transform: rotate(0);}
    1% { transform: rotate(30deg);}
    3% { transform: rotate(-28deg);}
    5% { transform: rotate(34deg);}
    7% { transform: rotate(-32deg);}
    9% {transform: rotate(30deg);}
    11% {transform: rotate(-28deg);}
    13% {transform: rotate(26deg);}
    15% {transform: rotate(-24deg);}
    17% {transform: rotate(22deg);}
    19% {transform: rotate(-20deg);}
    21% {transform: rotate(18deg);}
    23% {transform: rotate(-16deg);}
    25% {transform: rotate(14deg);}
    27% {transform: rotate(-12deg);}
    29% {transform: rotate(10deg);}
    31% {transform: rotate(-8deg);}
    33% {transform: rotate(6deg);}
    35% {transform: rotate(-4deg);}
    37% { transform: rotate(2deg);}
    39% {transform: rotate(-1deg);}
    41% {transform: rotate(1deg);}
    43% { transform: rotate(0);}
    100% {transform: rotate(0);}*/
    0% {transform: rotate(0);}
    2% { transform: rotate(30deg);}
    4% {transform: rotate(-28deg);}
    6% {transform: rotate(32deg);}
    8% {transform: rotate(-30deg);}
    10% {transform: rotate(28deg);}
    12% {transform: rotate(-26deg);}
    14% {transform: rotate(24deg);}
    16% {transform: rotate(-22deg);}
    18% {transform: rotate(20deg);}
    20% {transform: rotate(-18deg);}
    22% {transform: rotate(16deg);}
    24% {transform: rotate(-14deg);}
    26% {transform: rotate(12deg);}
    28% {transform: rotate(-10deg);}
    30% {transform: rotate(10deg);}
    32% {transform: rotate(-8deg);}
    32% {transform: rotate(-6deg);}
    35% {transform: rotate(4deg);}
    38% {transform: rotate(-2deg);}
    41% {transform: rotate(2deg);}
    43% {transform: rotate(0);}
    100% {transform: rotate(0);}
}

.functional-icon span svg {
    width: 100%;
    height: 100%;
}

.level0 .functional-icon span {
    opacity: 1;
    color: var(--structureColor1);
}

    .level0 .functional-icon span svg,
    .functional-icon.sub-project-settings span svg {
        cursor: pointer;
        transition: .3s;
    }

        .level0 .functional-icon span svg:hover,
        .functional-icon.sub-project-settings span svg:hover {
            color: var(--sagaColor3);
        }


/* add level1 */
.add-level1 {
    display: flex;
    justify-content: space-between;
    /*padding: 0 1rem .5rem 1rem;*/
    /*border-top: 1px dashed #dddddd;*/
    /*    background-color: #ffffff;*/
    align-items: center;
}

.level1-header h4.header {
    font-size: 1.3rem;
}

.level0-header {
    display: flex;
    /*    padding: 1rem 1rem 0.25rem 1rem;*/
    justify-content: space-between;
}

.level0 {
}

.level0-name {
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.2em;
}

.card-content {
    padding: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    cursor: pointer;
    transition: all .3s ease-in-out;
    color: var(--sagaColor4);
    text-shadow: 1px 1px 2px black;
}

    .card-content:hover {
        color: var(--sagaColor4);
    }


.level0-footer {
    opacity: .5;
    transition: all .3s ease-in-out;
}

.card-body.level0:hover .level0-footer {
    opacity: 1;
}

.cardGrid .card-body.level0 .level0-footer .switch-label-left {
    color: #FFFFFF;
}

/* progress bar */

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width .6s ease;
}

.FakeBar {
    position: absolute;
    height: 100%;
    z-index: 5;
    background: lightgray;
    right: 0;
    box-shadow: 10px 10px 74px black;
}

.CompletedTasks {
    width: auto;
    display: flex;
    margin-left: .5rem;
    font-weight: 600;
    position: relative;
    z-index: 6;
}

.progress-bar {
    background-color: #1f830c;
    transition: width .9s ease;
    background-image: unset;
    position: relative;
    width: 100%;
}

.progress-bar-striped {
    background-size: 1rem 1rem;
    background: var(--taskColor2);
    /*
    background-image: -webkit-linear-gradient(to right, darkgreen 0%, darkgreen 30%, green 70%, green);
    background-image: linear-gradient( 90deg,darkgreen 0%, darkgreen 30%, green 70%, green);
        */
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 1.5rem;
    overflow: hidden;
    font-size: .75rem;
    background: #7b7b7b;
    /* fallback for old browsers */
    /* background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7); 
    background: linear-gradient(to right, #2c3e50, #bdc3c7); */
    border-radius: 1rem;
    /*margin-right: 1rem;*/
    width: calc(100% - 1rem);
}

.level0 .progress {
    /*temp */ display: none;
}

/* switch */
.switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.5rem;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    align-items: center;
    display: flex;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 1.15rem;
        width: 1.15rem;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
        display: flex;
        left: .25rem;
    }

input:checked + .slider {
    background-color: var(--sagaColor4);
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(.85rem);
    -ms-transform: translateX(.85rem);
    transform: translateX(.85rem);
}
.change-task-status input:checked + .slider:before {
    -webkit-transform: translateX(.6rem);
    -ms-transform: translateX(.6rem);
    transform: translateX(.6rem);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }


/*project completed */


.project-details span.icon.finished {
    margin-right: .5rem;
}

.full-level {
    margin-bottom: 20px;
    width: 100%;
    border-radius: 4px;
    background-color: transparent;
    overflow: hidden;
    max-width: 367px;
}

@media (max-width: 991px) {
    .full-level {
        margin-bottom: 20px;
        width: 100%;
        border-radius: 4px;
        background-color: #fff;
        overflow: hidden;
        max-width: 500px;
    }
}

/*.level-2 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1800px) {
    .level-2 {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}
    */


/* project tasks and chat structure  */
.level2.task-card, .level2.card {
    display: flex;
    flex-direction: column;
    background-color: var(--structureColor1);
    position: relative;
    border: 1px solid var(--structureColor4);
    border-radius: 8px;
    transition: all .3s;
    margin: 0.5rem 0;
    cursor: pointer;
    padding: 0;
}

.level2.task-card {
    border-top-left-radius: 0;
    margin: 3.75rem 0 1rem;
}

    .level2.task-card .level2.card {
        display: flex;
        flex-direction: column;
        background-color: transparent;
        position: relative;
        border: none;
        border-radius: 8px;
        transition: all .3s;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

        .level2.task-card .level2.card .TaskTopicContent {
            display: none;
        }
            .level2.task-card .level2.card .TaskTopicContent .TurnOn {
                padding: 0 1rem .5rem 1rem;
            }

.TaskHeader,
.TopicHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 1rem 1rem 0;
}

.TaskTitle,
.TopicTitle {
    width: 100%;
}

/*
.task-card .level2.opened.card {
    border: 0;
}
.level2.task-card .level2.opened.card {
    margin-bottom: 0;
}
*/

/* topic header */
.projects-hero .page-header-actions {
    max-width: 1398px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.page-header-actions button {
    padding: 1rem;
    background: unset;
    border: 0;
    font-size: 1rem;
    font-weight: var(--defaultBoldFontWeight);
    color: var(--sagaColor1);
}

    .page-header-actions button.add-task svg {
        color: var(--taskColor1);
    }

.project-feed-header-actions {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    padding: 1rem 0 1.75rem;
}

    .project-feed-header-actions button {
        padding: 0 0 0 1rem;
        background: unset;
        border: 0;
        font-size: 1rem;
        font-weight: var(--defaultBoldFontWeight);
        color: var(--sagaColor1);
    }

        .project-feed-header-actions button.add-task svg {
            color: var(--taskColor1);
        }

        .project-feed-header-actions button.add-chat svg {
            color: var(--chatColor1);
        }

.project-feed-header-tabs {
    width: 100%;
    display: flex;
    align-items: flex-end;
    border-bottom: 1px solid var(--structureColor4);
}

    .project-feed-header-tabs button {
        color: var(--structureColor3);
        line-height: 1.5rem;
        padding: 1rem 3rem;
        margin-right: 0.5rem;
        border-radius: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        position: relative;
    }

        .project-feed-header-tabs button.active {
            color: var(--structureColor1);
            background-color: var(--sagaColor4);
        }

            .project-feed-header-tabs button.active::after {
                content: "";
                border-bottom: solid 4px var(--sagaColor1);
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
            }
            .project-feed-header-tabs button span {
                display: flex;
                margin-left: 0;
            }
                .project-feed-header-tabs button span svg {
                    display: inline-block;
                    width: 1.25rem;
                    margin-right: 0.5rem;
                }

            .project-feed-header-tabs button.filters {
                padding: 1rem 1rem;
                margin-left: auto;
                margin-right: 0;
            }

                .project-feed-header-tabs button.filters span {
                    opacity: 1;
                    margin: 0;
                }

                .project-feed-header-tabs button.filters.active {
                    color: var(--structureColor1);
                    background-color: var(--structureColor3);
                }

                .project-feed-header-tabs button.filters svg {
                    fill: var(--structureColor3);
                    display: inline-block;
                    margin: 0;
                }

                .project-feed-header-tabs button.filters.active svg {
                    fill: var(--structureColor1);
                }

.project-task-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background: #FBFBFB;
    border: 1px solid var(--structureColor4);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: 0;
}

    .project-task-filters .form-group {
        margin: 0;
        padding: .5rem 1rem;
        font-size: .85rem;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

        .project-task-filters .form-group label {
            margin: 0 0.5rem 0 0;
            white-space: nowrap;
        }

    .project-task-filters label.status {
        margin: .25rem .5rem .25rem 0;
        padding: 0rem 0rem 0rem 1.2rem;
        color: inherit;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        font-size: .9rem;
        font-weight: var(--defaultFontWeight);
        align-items: center;
        position: relative;
    }
    .project-task-filters label.status input {
        display: none;
    }
    /* Create a custom checkbox */
        .project-task-filters label.status .checkmark {
            position: absolute;
            top: 0.2rem;
            left: 0rem;
            height: 1rem;
            width: 1rem;
            background-color: var(--structureColor1);
            border: 1px solid var(--structureColor4);
            border-radius: 4px;
        }

        .project-task-filters label.status:hover input ~ .checkmark {
            background-color: var(--structureColor5);
        }

        .project-task-filters label.status .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }

        .project-task-filters label.status input:checked ~ .checkmark:after {
            display: block;
        }

        .project-task-filters label.status .checkmark:after {
            left: 0.25rem;
            top: 0rem;
            width: 0.45rem;
            height: 0.7rem;
            border: solid white;
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .project-task-filters label.status.ongoing input:checked ~ .checkmark {
            background-color: var(--taskColor4);
            border: 1px solid var(--taskColor4);
        }

        .project-task-filters label.status.finished input:checked ~ .checkmark {
            background-color: var(--taskColor2);
            border: 1px solid var(--taskColor2);
        }

        .project-task-filters label.status.not-started input:checked ~ .checkmark {
            background-color: var(--taskColor3);
            border: 1px solid var(--taskColor3);
        }




.all-projects {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
    .all-projects .rz-data-grid {
        border: none;
    }
    .all-projects .rz-data-grid-data {
        border-collapse: separate;
        border-spacing: 0 0.5rem;
    }
    .all-projects .rz-data-grid-data > table {
        border-collapse: separate;
        border-spacing: 0 0.5rem;
    }
        .all-projects .rz-data-grid-data > table tr td {
            border: none;
            border-top: solid 1px var(--structureColor4);
            border-bottom: solid 1px var(--structureColor4);
            background-color: var(--structureColor1);
        }
            .all-projects .rz-data-grid-data > table tr td:first-child {
                border-left: solid 1px var(--structureColor4);
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
            }
            .all-projects .rz-data-grid-data > table tr td:last-child {
                border-right: solid 1px var(--structureColor4);
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            }
            .all-projects .rz-data-grid-data > table tr th:first-child {
                border-top-left-radius: 8px;
                border-bottom-left-radius: 8px;
            }

            .all-projects .rz-data-grid-data > table tr th:last-child {
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
            }


.form-contentainer-row .form-group select {
    margin: 0 0.5rem;
}

.collapse-topic {
    display: flex;
    flex-direction: column;
}

.task-header {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
}

.expenses {
    padding: 0 1rem .5rem 1rem;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}
.expenses h2 {
    width: 100%;
}
.expenseSummary {
    padding: 0 0 3rem;
    width: 100%;
}
.expenseChart, .expenseLineChart {
    width: 100%;
    position: relative;
    padding: 0 0 1rem;
}
.expenseSummaryItem,
.expenseSummaryFooter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 0.779rem;
}
    .expenseSummaryItem > div, .expenseSummaryFooter > div {
        width: 50%;
    }
.expenses > form {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--structureColor4);
    border: 1px solid var(--structureColor4);
    border-radius: 8px;
    margin: 3rem 0 0.5rem;
    padding: 0.5rem 0.5rem 0;
}
.add-expense {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.779rem;
}
    .add-expense .form-group {
        margin: 0 1rem 0.5rem 0;
        display: flex;
        align-items: center;
    }

    .add-expense button {
        margin: 0 0 0.5rem 0;
    }

    .add-expense input,
    .add-expense select {
        border-radius: 8px;
        padding: .3rem .5rem;
        margin-left: 0.5rem;
        height: auto;
        font-size: 0.779rem;
        line-height: var(--defaultLineHeight);
    }

.rz-paginator-page {
    background-color: var(--structureColor4);
    border: 1px solid var(--structureColor4);
    color: var(--structureColor2);
    padding: 0.35rem 0.5rem;
}
    .rz-paginator-page.rz-state-active {
        background-color: var(--sagaSecondaryButtonBgColor);
        border: 1px solid var(--sagaSecondaryButtonBgColor);
        color: var(--sagaSecondaryButtonTextColor);
        padding: 0.35rem 0.5rem;
    }
.rz-paginator-last, .rz-paginator-next {
    background-color: var(--sagaSecondaryButtonBgColor);
    border: 1px solid var(--sagaSecondaryButtonBgColor);
    color: var(--sagaSecondaryButtonTextColor);
}
.rz-data-grid {
    margin: 0 0 3rem 0;
    max-width: 100%;
}
.rz-data-grid-data {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
    .rz-data-grid-data > table {
        width: 100%;
        min-width: 750px;
    }

.rz-lookup-panel .rz-data-grid-data > table {
    width: 100%;
    min-width: 100px;
}
.rz-lookup-panel .rz-data-grid-data > table span {
    cursor: pointer;
}

.invoicing .rz-data-grid-data > table {
    width: 100%;
    min-width: 1880px;
}
.rz-datatable-thead th, 
.rz-grid-table thead th {
    background-color: var(--structureColor4);
    color: var(--structureColor2);
    word-break: break-word;
    white-space: normal;
    text-align: center;
}
    .rz-datatable-thead th .rz-column-title,
    .rz-grid-table thead th .rz-column-title {
        color: var(--structureColor2);
        text-align: center;
    }
    .rz-datatable-thead .rzi, .rz-datatable-thead .rz-column-drag, .rz-datatable-thead .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-loading-content .rz-datatable-thead .rzi-circle-o-notch, .rz-datatable-thead .rz-datatable-header .rzi-plus, .rz-datatable-header .rz-datatable-thead .rzi-plus, .rz-datatable-thead .rz-sortable-column .rzi-grid-sort, .rz-sortable-column .rz-datatable-thead .rzi-grid-sort, .rz-datatable-thead .rz-menuitem .rz-menuitem-icon, .rz-menuitem .rz-datatable-thead .rz-menuitem-icon, .rz-datatable-thead .rz-fileupload-row .rz-button .rzi-close, .rz-datatable-thead .rz-fileupload-row .rz-paginator-element .rzi-close, .rz-fileupload-row .rz-button .rz-datatable-thead .rzi-close, .rz-fileupload-row .rz-paginator-element .rz-datatable-thead .rzi-close, .rz-datatable-thead .rz-fileupload-row .rz-button .rzi-times, .rz-datatable-thead .rz-fileupload-row .rz-paginator-element .rzi-times, .rz-fileupload-row .rz-button .rz-datatable-thead .rzi-times, .rz-fileupload-row .rz-paginator-element .rz-datatable-thead .rzi-times, .rz-datatable-thead .rz-fileupload-row .rz-button .rz-icon-trash, .rz-datatable-thead .rz-fileupload-row .rz-paginator-element .rz-icon-trash, .rz-fileupload-row .rz-button .rz-datatable-thead .rz-icon-trash, .rz-fileupload-row .rz-paginator-element .rz-datatable-thead .rz-icon-trash, .rz-datatable-thead .rz-datatable .rzi-chevron-circle-right, .rz-datatable .rz-datatable-thead .rzi-chevron-circle-right, .rz-datatable-thead .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rz-datatable-thead .rzi-chevron-circle-down, .rz-grid-table thead .rzi, .rz-grid-table thead .rz-column-drag, .rz-grid-table thead .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-loading-content .rz-grid-table thead .rzi-circle-o-notch, .rz-grid-table thead .rz-datatable-header .rzi-plus, .rz-datatable-header .rz-grid-table thead .rzi-plus, .rz-grid-table thead .rz-sortable-column .rzi-grid-sort, .rz-sortable-column .rz-grid-table thead .rzi-grid-sort, .rz-grid-table thead .rz-menuitem .rz-menuitem-icon, .rz-menuitem .rz-grid-table thead .rz-menuitem-icon, .rz-grid-table thead .rz-fileupload-row .rz-button .rzi-close, .rz-grid-table thead .rz-fileupload-row .rz-paginator-element .rzi-close, .rz-fileupload-row .rz-button .rz-grid-table thead .rzi-close, .rz-fileupload-row .rz-paginator-element .rz-grid-table thead .rzi-close, .rz-grid-table thead .rz-fileupload-row .rz-button .rzi-times, .rz-grid-table thead .rz-fileupload-row .rz-paginator-element .rzi-times, .rz-fileupload-row .rz-button .rz-grid-table thead .rzi-times, .rz-fileupload-row .rz-paginator-element .rz-grid-table thead .rzi-times, .rz-grid-table thead .rz-fileupload-row .rz-button .rz-icon-trash, .rz-grid-table thead .rz-fileupload-row .rz-paginator-element .rz-icon-trash, .rz-fileupload-row .rz-button .rz-grid-table thead .rz-icon-trash, .rz-fileupload-row .rz-paginator-element .rz-grid-table thead .rz-icon-trash, .rz-grid-table thead .rz-datatable .rzi-chevron-circle-right, .rz-datatable .rz-grid-table thead .rzi-chevron-circle-right, .rz-grid-table thead .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rz-grid-table thead .rzi-chevron-circle-down {
        color: var(--structureColor2);
    }
.rz-datatable-tfoot td, .rz-grid-table tfoot td {
    background-color: var(--structureColor4);
    color: var(--structureColor2);
}
    .rz-datatable-thead th:not(:last-child), .rz-grid-table thead th:not(:last-child) {
        border-right: solid 1px var(--structureColor4);
    }
    .rz-datatable-tfoot td:not(:last-child), .rz-grid-table tfoot td:not(:last-child) {
        border-right: solid 1px var(--structureColor4);
    }
.rz-datatable-odd > td {
    background-color: var(--structureColor6);
}
    .rz-datatable-data td:not(:last-child), .rz-grid-table td:not(:last-child) {
        border-right: solid 1px var(--structureColor4);
    }
    .rz-datatable-data td, 
    .rz-grid-table td {
        border-bottom: solid 1px var(--structureColor4);
        text-align: center;
    }
        .rz-datatable-data td .rz-cell-data,
        .rz-grid-table td .rz-cell-data {
            overflow: visible;
            color: var(--structureColor2);
        }

.rz-grid-table div {
    position: relative;
}
    .rz-grid-table div.roles-count {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: var(--defaultBoldFontWeight);
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background-color: var(--structureColor4);
        color: var(--structureColor2);
        margin: 0 auto;
    }
    .rz-grid-table div .settings {
        position: absolute;
        top: -0.5rem;
        right: -0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: var(--defaulFontWeight);
        min-width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background-color: var(--sagaColor2);
        color: var(--structureColor2);
        cursor: pointer;
    }

.rz-scheduler-nav {
    background: var(--structureColor4);
}
.rz-scheduler {
    color: var(--structureColor2);
}
.rz-button.rz-prev,
.rz-button.rz-next,
.rz-button.rz-today,
.rz-button.rz-state-active {
    background-color: var(--sagaSecondaryButtonBgColor);
    border: 1px solid var(--sagaSecondaryButtonBgColor);
    color: var(--sagaSecondaryButtonTextColor);
}
    .rz-button.rz-prev:hover,
    .rz-button.rz-next:hover,
    .rz-button.rz-today:hover,
    .rz-button.rz-state-active:hover {
        background-color: var(--sagaSecondaryButtonBgColorHover);
        border: 1px solid var(--sagaSecondaryButtonBgColorHover);
        color: var(--sagaSecondaryButtonTextColorHover);
    }

.rz-event-content {
    background: var(--taskColor1);
}

.invoicing {
    display: flex;
    flex-direction: column;
    background-color: var(--structureColor1);
    position: relative;
    border: 1px solid var(--structureColor4);
    border-radius: 8px;
    transition: all .3s;
    margin: 4rem auto 4rem;
    padding: 0.5rem;
    max-width: 1920px;
}

.topic-header {
    margin-bottom: 0;
    display: flex;
    padding: 0 .5rem;
    flex-direction: column;
}

.task-name, .topic-name {
    display: flex;
    cursor: pointer;
    width: 100%;
    margin-bottom: .25rem;
}

    .task-name h4, .topic-name h4 {
        font-size: 1.25rem;
    }

.task-header-level3 {
    display: flex;
    width: 100%;
    flex-direction: column;
    margin-top: .5rem;
}

.task-assigned-to {
    width: 100%;
    display: flex;
    flex-direction: column;
}

    .task-assigned-to .user-mini-card,
    .task-assigned-to .user-mini-card -sm {
        cursor: unset;
    }

.UserTaskMeasuring {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: .7rem;
    margin-left: 1rem;
    flex: 1;
}
    .UserTaskMeasuring .TurnOn.ongoing-task {
        cursor: pointer;
    }



.tasktimeuser {
    margin-left: .5rem;
    display: flex;
    align-items: center;
    font-size: .7rem;
    line-height: unset;
    align-self: center;
    margin-top: .2rem;
    line-height: 1em;
    white-space: nowrap;
}

.change-task-status {
    display: flex;
    align-items: center;
}

    .change-task-status .switch {
        width: 2.1rem;
        height: 1.5rem;
        margin-left: .25rem;
    }

    .change-task-status input:checked + .slider {
        background-color: var(--taskColor2);
    }

span.TurnOn {
    width: 1.25rem;
    height: 1.25rem;
}

button {
    font-size: .75rem;
    line-height: 150%;
    color: var(--sagaSecondaryButtonTextColor);
    background: var(--sagaSecondaryButtonBgColor);
    border-radius: var(--sagaButtonBorderRadius);
    border: 0;
    padding: .15rem .5rem;
    margin: 0;
}

.rz-button.btn-primary,
.btn-primary.rz-paginator-element {
    color: var(--sagaSecondaryButtonTextColor);
    background: var(--sagaSecondaryButtonBgColor);
    border-radius: var(--sagaButtonBorderRadius);
    border: 0;
}

.TaskState .TurnOn svg path {
    fill: var(--sagaColor3);
}

.topic-name-and-stats {
    display: flex;
}

.topic-message-count {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--defaultBoldFontWeight);
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: 1rem;
    border-radius: 50%;
    background-color: var(--sagaColor2);
    color: var(--structureColor2);
}

.info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: var(--defaultBoldFontWeight);
    min-width: 1.5rem;
    height: 1.5rem;
    margin-left: 1rem;
    border-radius: 50%;
    background-color: var(--sagaColor2);
    color: var(--structureColor2);
}
.info svg {
    width: .85rem;
    height: .85rem;
}





.task-description, .topic-description {
    font-size: 1rem;
    line-height: 1rem;
    color: #000;
    align-self: flex-start;
}

.task-long-description {
    display: flex;
    font-size: .85rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--structureColor4);
    margin: 0 1rem 2rem;
}
.topic-long-description {
    display: flex;
    font-size: .85rem;
    margin: .25rem 0 0 0;
}

.task-description p, .topic-description p {
    margin: 0 0 0.5rem;
    width: 100%;
}

.task-long-description p {
    margin: 0;
}

.read-more {
    text-decoration: none;
    text-underline-position: under;
    color: inherit;
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.read-more:hover {
    text-decoration: underline;
}

.settings {
    display: flex;
    flex-flow: row;
    transition: all .3s ease-in-out;
}

    .settings span svg {
        transition: all .3s;
        cursor: pointer;
        fill: var(--structureColor5);
    }

        .settings span svg:hover {
            color: var(--sagaColor3);
            fill: var(--sagaColor3);
        }

    .settings span svg {
        /*    vertical-align: top;*/
    }

    .settings span.active svg {
        color: var(--sagaColor3);
    }

.card-body.level1.active .settings span.active svg {
    color: var(--sagaColor1);
}

.sub-project-settings {
    flex-direction: row;
    padding: 0;
}

    .sub-project-settings span {
        margin-bottom: .5rem;
    }


.task-settings {
    align-self: flex-start;
}

    .task-settings span {
    }

.topic-settings span:hover {
    color: var(--sagaColor4);
}

.topic-header .topic-settings,
.task-header .task-settings {
    width: 30%;
    display: flex;
    justify-content: flex-end;
}

.task-settings span {
    margin-left: .5rem;
}

.topic-header .topic-name,
.task-header .task-name {
    flex-direction: row;
}

.task-status {
    display: flex;
    align-items: flex-start;
    margin-right: .5rem;
}

    .task-status svg {
        color: #e4e4e4;
    }

.ongoing-task svg {
    color: var(--sagaColor3);
    width: 100%;
    height: 100%;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.message-container {
    display: flex;
    padding: 1rem 1rem .7rem 1rem;
    transition: all .3s;
    background: #fff;
}

    .card-body.level1:hover, .message-container:hover {
        transition: .3s;
    }

/* experimental scale transform, required to remove overflow hidden from full level */

.card-body.level1 {
    -webkit-animation: fadeInFromNone 0.75s ease-out;
    -moz-animation: fadeInFromNone 0.75s ease-out;
    -o-animation: fadeInFromNone 0.75s ease-out;
    animation: fadeInFromNone 0.75s ease-out;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--structureColor4);
    background: var(--structureColor1);
    box-shadow: 1px 2px 2px rgb(0 0 0 / 1%), 1px 2px 5px rgb(0 0 0 / 4%);
}
    .card-body.level1.new {
        border: 1px solid var(--sagaColor2);
    }

    .card-body.level1.active {
        background: var(--sagaColor2);
        box-shadow: inset 0px 2px 8px rgba(0, 70, 132, 0.3);
    }

    .card-body.level1.card-add-new {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border: 2px dashed var(--structureColor4);
        color: var(--structureColor3);
        box-shadow: none;
        cursor: pointer;
    }

        .card-body.level1.card-add-new svg {
            color: var(--sagaColor3);
            cursor: pointer;
        }

.project-card-header {
    display: flex;
    width: 100%;
    flex-direction: column;
}

/* end of experiment */


.user-discussion-img {
    display: flex;
    border: 1px solid #e4e4e4;
    align-items: center;
    border-radius: 100%;
    width: 40px;
    height: 40px;
}

    .user-discussion-img img {
        border-radius: 100%;
        width: 100%;
        height: 100%;
    }

.message-user-and-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0rem 0 1rem 1rem;
    width: calc(100% - 50px);
}

.message-content {
    padding-top: .25rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.message-file-component {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
    .message-file-component > div {
        padding-top: .25rem;
        font-size: 0.7rem;
        width: fit-content;
        margin: 0 .5rem .5rem 0;
        padding: 0.15rem 0.5rem;
        border-radius: 8px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        border: 1px solid var(--structureColor4);
        align-items: center;
    }
        .message-file-component div span {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--defaultBoldFontWeight);
            min-width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.5rem;
            border-radius: 50%;
            background-color: var(--sagaColor2);
            color: var(--structureColor2);
        }

.author-and-timestamp {
    display: flex;
    flex-direction: row;
    width: 70%;
    min-height: 40px;
}

    .author-and-timestamp .dt {
        margin-left: .5rem;
        color: var(--structureColor3);
    }

    .author-and-timestamp .dt, .author-and-timestamp .user {
        display: flex;
        top: unset;
        left: unset;
        position: unset;
        align-self: center;
        font-size: .778rem;
    }

.message-settings {
    width: 30%;
    min-height: 40px;
    display: flex;
    justify-content: flex-end;
    display: none;
}

    .message-settings span {
        cursor: pointer;
        color: var(--structureColor3);
        transition: all .15s;
    }


.card-body .level0-footer {
    flex-direction: column;
    gap: 5px;
}

.cardGrid .card-body .level0-footer {
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.level0-deadline-txt {
    font-weight: 600;
}

.card-body .level0:hover span {
    color: #fff;
}

.card-body .level0 span {
    color: #bcbcbc;
}

.card-body .active-status-wrapper {
    align-items: center;
    display: flex;
}

.card-body .active-status-wrapper label {
    margin-right: 6px;
}

.sub-project-settings-container {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.projectweekly-users-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.projectweekly-deadline {
    white-space: nowrap;
}
/* improved for speech bubbles */
.received, .sent {
    /*    position: relative;
    font-family: arial;
    font-size: 1.1em;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;*/
    display: flex;
    flex-wrap: wrap;
}

/*    .received:after, .sent:after {
        content: '';
        border: 20px solid transparent;
        position: absolute;
        margin-top: -30px;
    }
    */
.sent {
    /*    background: #03a9f4;
    color: #fff;
    margin-left: 10%;
    top: 50%;
    text-align: right;*/
}

.received {
    background: transparent;
    color: var(--sagaTextDark);
    /*margin-left: 10px;
    margin-right: 10%;*/
}

.sent:after {
    /*    border-left-color: #03a9f4;
    border-right: 0;
    right: -20px;*/
}

.received:after {
    /*    border-right-color: #4CAF50;
    border-left: 0;
    left: -20px;*/
}

/* div within bubble for name */
.user {
    font-size: 0.8em;
    font-weight: bold;
    color: #000;
}

.message-content .msg {
    width: 100%;
    max-width: 800px;
    font-size: var(--defaultFontSize);
    line-height: var(--defaultLineHeight);
}

.newMessageDiv {
    position: fixed;
    bottom: 0;
}

.card-footer {
    background: transparent;
    /* padding: 1rem; */
    border-top: 0;
}

.inputMessageArea {
    display: flex;
}

@media screen and (max-width: 768px) {
    .inputMessageArea {
        flex-direction: column;
    }

    .reply-to-message {
        margin-top: .5rem;
    }
}

.new-message-on-topic {
    overflow: hidden;
}

textarea.new-message-on-topic:focus {
    outline: unset;
    border-color: var(--sagaColor4);
}


/* reply to specific message */
.reply-to-message {
    display: flex;
    flex-direction: row;
    padding: .5rem;
    align-items: flex-end;
    cursor: pointer;
}

    .reply-to-message span {
        width: 30px;
        display: flex;
    }

        .reply-to-message span:hover {
            border-color: var(--sagaColor4);
        }

    .reply-to-message svg {
        width: 100%;
        height: auto;
        color: inherit;
        transition: .3s;
        padding: .25rem;
        border-radius: 4px;
        border: 1px solid #e4e4e4;
    }

        .reply-to-message svg:hover {
            border-color: var(--sagaColor4);
        }

.add-to-message {
    display: flex;
}

    .add-to-message span {
        width: 30px;
        cursor: pointer;
        margin-right: .5rem;
    }

        .add-to-message span svg {
            width: 100%;
            height: auto;
            color: var(--sagaTextDark);
        }

            .add-to-message span svg path:first-of-type {
                transition: .3s;
            }

            .add-to-message span svg:hover path:first-of-type {
                color: var(--sagaColor4);
            }

        .add-to-message span .add-to-plus svg {
            color: var(--sagaColor4);
        }

        .add-to-message span svg:hover {
        }





/* add image or file to a message */
.message-file-preview-component, .message-image-preview-component {
    padding: .5rem 1rem;
}

    .message-image-preview-component img {
        height: auto;
        max-width: 300px;
        border-radius: 4px;
        /*    border: 1px solid #8d8d8d;*/
    }

    .message-file-preview-component file {
        /* color: var(--sagaColor4); */
        transition: all .2s ease-in;
        text-decoration: underline;
        text-underline-position: under;
        text-decoration-color: var(--sagaColor4);
        cursor: pointer;
    }

        .message-file-preview-component file:hover {
            color: var(--sagaColor4);
        }

/* remove components from preview */
.message-image-preview-component {
    width: 300px;
    display: flex;
    flex-direction: row;
}

    .message-image-preview-component span.add-remove-icon {
        /* width: 15px; */
        /* height: 15px; */
        /* cursor: pointer; */
        display: flex;
        margin-left: -10px;
        margin-top: -5px;
    }

.add-remove-icon {
    width: 15px;
    height: 15px;
    cursor: pointer;
    /* display: flex; */
    /* margin-left: -10px; */
    /* margin-top: -5px; */
}

.remove-message-component {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 0;
}

    .remove-message-component svg {
        top: -5px;
        right: -5px;
        display: flex;
        position: relative;
        background-color: #fff;
        border-radius: 100%;
        transition: .3s;
    }

        .remove-message-component svg:hover {
            color: var(--sagaColor4);
            cursor: pointer;
        }
/*  .message-image-preview-component span .remove-message-component {
            right: -5px;
            position: absolute;
            height: 0;
            top: -10px;
        }

            .message-image-preview-component span .remove-message-component svg {
                background-color: #fff;
                border-radius: 100%;
                cursor: pointer;
                transition: .3s;
                width: 15px;
                height: 15px;
            }

            .message-image-preview-component span .remove-message-component svg:hover {
                color: var(--sagaColor4);                
            }*/
.add-to-plus {
    display: block;
    position: relative;
    width: 0;
    height: 0;
    border-radius: 100%;
    right: 0;
}

    .add-to-plus svg {
        width: 15px !important;
        height: 15px !important;
        border: 0;
        padding: 0;
        position: absolute;
        background: #fff;
        right: -5px;
        top: -5px;
    }


/* images and files in messages */
.message-image-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

/* height media queries */
.message-image-component {
    display: flex;
    width: 33%;
    padding: 1rem 1rem 0 0rem;
    flex-direction: column;
}

@media (max-width: 768px) {
    .message-image-component {
        width: 50%;
    }
}

.message-image-component img {
    width: 100%;
    display: block;
    height: auto;
    filter: brightness(0.8);
    overflow: hidden;
    border-radius: 4px;
    transition: all .3s;
    cursor: pointer;
}

    .message-image-component img:hover {
        filter: brightness(1);
    }
/* general add-remove-svg-icon styles */
.add-remove-icon svg {
    width: 15px !important;
    height: 15px !important;
    background-color: #fff;
    margin: -2px;
    border-radius: 100%;
    transition: .3s;
}

    .add-remove-icon svg:hover {
        color: var(--sagaColor4);
    }




/* upload image */

.add-image input[type="file"] {
    width: 100%;
    border: 0;
    padding: 0;
}

.image-upload {
    padding: 1rem 0rem;
    display: flex;
    flex-direction: column;
}

    .image-upload span {
        font-weight: 600;
        font-size: .75rem;
    }

.image-upload-preview {
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #dedede;
}

    .image-upload-preview img {
        width: 100%;
        padding: .5rem;
    }

    .image-upload-preview span {
        position: absolute;
        padding: .15rem .5rem;
        background: var(--sagaColor4);
        color: #fff;
        text-transform: uppercase;
        font-size: .75rem;
        vertical-align: sub;
    }

.upload-specs {
    display: flex;
    flex-direction: column;
}

    .upload-specs span {
        display: flex;
        padding: .25rem 0;
        border-bottom: 1px solid #e4e4e4;
        font-size: .75rem;
    }

        .upload-specs span label {
            width: auto;
            font-weight: 600;
            margin-right: .25rem;
        }

.TaskTopicContent {
    /*overflow: hidden;*/
}

    .TaskTopicContent table {
        width: 100%;
        margin: 0 0 1rem;
        font-size: 0.779rem;
    }


/* tasks */
.task-header-level1 {
    width: 100%;
    flex-direction: column;
    display: flex;
    overflow: hidden;
    background-color: #fff;
}

.task-play span {
    display: flex;
}

.task-header-level2 {
    display: flex;
    width: 100%;
}

.task-name span {
    color: #838383;
    transition: all .3s ease-in-out;
}

    .task-name span:hover {
        color: var(--sagaColor4);
    }

.task-play {
}

    .task-play svg {
        width: 1.4rem;
        height: 1.3rem;
        cursor: pointer;
    }

.TaskState {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.opened.task-card .level2.opened.card .TaskState {
    padding: 0;
}

@media screen and (min-width: 600px) {
    .task-header {
        padding: 0 1rem .5rem 1rem;
    }
}

.task-finish {
    align-items: center;
    display: flex;
    padding: 1rem 1rem .7rem 1rem;
}

.TaskTabs {
    position: absolute;
    top: -2.4rem;
    left: -1px;
    display: flex;
    flex-flow: row;
    flex-wrap: nowrap;
}

    .TaskTabs label {
        font-size: .9rem;
        color: var(--structureColor3);
        background: transparent;
        padding: 0.5rem 1.5rem;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        margin-right: 0.5rem;
        position: relative;
        cursor: pointer;
        display: flex;
        flex-flow: row;
        flex-wrap: nowrap;
        align-items: center;
    }

        .TaskTabs label.active {
            color: var(--sagaColor1);
            background: var(--sagaColor2);
        }

            .TaskTabs label.active::after {
                content: "";
                border-bottom: solid 4px var(--sagaColor1);
                width: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
            }

        .TaskTabs label.finished {
            background: var(--taskColor2);
            color: var(--structureColor1);
        }

        .TaskTabs label.not-started {
            background: var(--taskColor3);
            color: var(--structureColor1);
        }

        .TaskTabs label.ongoing {
            background: var(--taskColor4);
            color: var(--structureColor1);
        }

        .TaskTabs label.topic {
        }
            .TaskTabs label.topic .topic-message-count {
                background-color: var(--structureColor1);
                color: var(--structureColor2);
                border: 1px solid var(--structureColor4);
                margin-left: 0.5rem;
            }
            .TaskTabs label.topic .indicator {
                background-color: var(--sagaColor3);
                min-width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
                margin-left: 0.5rem;
            }

@media screen and (max-width: 600px) {
    .task-header-level1 {
        flex-direction: column;
    }
}


.task-content p {
    font-size: .85rem;
    margin-bottom: .5rem;
    line-height: 1rem;
    color: #616161;
}


/* all projects */

.all-projects {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.card .full-level {
}

.level0-footer {
    flex-direction: row;
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    margin: 0 1rem;
    padding: 1rem 0;
    border-top: 1px solid #888888;
    z-index: 3;
}

.all-projects .card.full-level {
    width: 100%;
    margin: 20px;
    height: 300px;
}

.all-projects .card.full-level {
    width: 300px;
}



.card-body {
    justify-content: flex-end;
}

    .card-body span.client-name {
        color: #fff;
        /*text-shadow: 0.05rem 0.05rem 0.5rem #949494;*/
        padding: 1rem;
        padding-top: .9rem;
        position: relative;
        background: linear-gradient( 180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.3) 30%, rgba(0,0,0,0) 100%);
        text-shadow: 1px 1px 2px black;
    }

    .card-body span.project-client-name {
        color: #fff;
        /*text-shadow: 0.05rem 0.05rem 0.5rem #949494;*/
       
        padding: 1rem 0rem 0rem 0rem;
        padding-top: .5rem;
        position: relative;
        text-shadow: 1px 1px 2px black;
    }

@media (max-width: 991px) {
    .modal-2021 {
        max-width: 90vw;
    }
}

@media (max-width: 767.98px) {
    .main .top-row:not(.auth) {
        display: none;
    }

    .main .top-row.auth {
        justify-content: space-between;
    }

    .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
    }
}

.main .top-row {
    position: fixed;
    bottom: 0;
    z-index: 5;
    width: 100%;
}


@media (min-width: 991px) {
    app {
        flex-direction: column;
    }
}

@media (min-width: 1400px) {
    .menu {
        align-items: flex-end;
    }
}

@media (min-width: 55768px) {


    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        margin-right: 5%;
    }




    .navbar-toggler {
        display: none;
    }

    .sidebar .collapse {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
}

/* UI modifactions */

/* animations */
@keyframes SwapIcon {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.TurnOn {
    animation: .3s ease-in-out 0s 1 SwapIcon;
}



/* animation */
@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

.AnimateOnLoad {
    -webkit-animation: fadeInFromNone 0.45s ease-out;
    -moz-animation: fadeInFromNone 0.45s ease-out;
    -o-animation: fadeInFromNone 0.45s ease-out;
    animation: fadeInFromNone 0.45s ease-out;
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: flex;
        opacity: 0;
    }

    100% {
        display: flex;
        opacity: 1;
    }
}

/* infinite rotation */
@keyframes InfRotation {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* active border color */
.abc {
    border: 1px solid var(--sagaColor4) !important;
    border-radius: 4px !important;
}

/*automation lists*/

.ListStat {
    /*padding: .1rem .4rem;*/
    border-radius: 4px;
    display: flex;
    align-items: end;
}

.level-3.title {
    padding-left: 2.5rem;
    position: relative;
}
    .level-3.title i {
        position: absolute;
        left: 0;
    }

.Level3.stats {
    display: flex;
    flex-direction: row;
    width: 100%;
    /*background-color: lightgray;*/
    padding: .25rem 1rem .25rem 1rem;
}

.SingleStat span {
    margin-right: .5rem;
}

.SingleStat {
    width: fit-content;
    margin: .25rem;
    display: flex;
    align-items: end;
    margin-left: 2rem;
}

    .SingleStat svg {
        color: dimgrey;
    }

    .SingleStat:first-of-type {
        margin-left: 0;
    }

.rz-datatable {
    display: flex;
    flex-direction: column;
    background-color: var(--structureColor1);
    position: relative;
    border: 1px solid var(--structureColor4);
    border-radius: 3px;
    transition: all .3s;
    margin: 0;
    padding: 0.5rem 0.5rem;
    text-align: center;
}

.rz-accordion {
    /*padding-bottom: 1rem;*/
    border: 1px solid var(--sagaThemeColor1);
    border-radius: 5px;
    padding: 2rem;
    margin: 1rem 0 2rem;
    position: relative;
    background-color: var(--structureColor1);
}

.rz-accordion-header {
    /*border-bottom: 1px solid var(--structureColor4);
    padding: 1rem 0;
    */
    position: absolute;
    top: -1rem;
    left: 1rem;
    padding: 0 0.5rem;
    background: var(--structureColor1);

}
    .rz-accordion-header a[role="tab"] {
        font-size: 0.8571428571428571em;
        text-transform: uppercase;
    }
.rz-accordion-content {
    /* background: var(--structureColor6);
border-bottom: 1px solid var(--structureColor4);
padding: 1rem;*/
    padding: 0rem;
}

    .rz-accordion-content .form-element {
        padding: 0rem 0rem 1rem;
    }

.rz-card p {
    font-size: .85rem;
}
.rz-card .settings {
    justify-content: space-between;
}

.rz-dialog-content {
    padding: 1rem 1rem 0;
}
.rz-dialog-content .remove {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    border: 2px dashed var(--structureColor4);
    border-radius: 8px;
    color: var(--structureColor3);
    cursor: pointer;
    margin: 0 0 1rem;
    padding: 1rem;
}
    .rz-dialog-content .remove span {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

.products,
.productcategories {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    text-align: center;
    padding: 2rem;
    background-color: #fff;
    width: 100%;
}

.usertask {
    max-width: 1398px;
    margin: 4rem auto 2rem;
    padding: 0 1rem;
}
.usertask-content .card {
    max-width: 16rem;
    margin: 0.5rem 1rem 0.5rem 0;
    padding: 0.5rem;
    font-size: .799rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
    .usertask-content .card .usertaskcard-name {
        display: flex;
        align-items: center;
        justify-content: center;
    }
        .usertask-content .card .usertaskcard-name .user-mini-card,
        .usertask-content .card .usertaskcard-name .user-mini-card-sm {
            border: none;
        }

.UserProfile {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 2rem;
    width: 100%;
    flex-direction: row;
    padding: 1rem;
    background-color: #fff;
    border-radius: 4px;
    border: .015rem solid #e4e4e4;
}

.ProfileImage .user-img img {
    width: 100%;
    border-radius: 100%;
}

.ProfileImage .user-img {
    display: flex;
    width: fit-content;
    max-width: 200px;
}


.UserCard {
    display: flex;
    width: 100%; /*50%*/
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.ProfileNotificationSubscriptions {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    width: inherit;

}

.ProfileNotificationSubscriptionsHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.ProfileNotificationSubscription {  
    padding: 13px;
    border-color: black;
    border-width: 1px;
    border-style: solid;
    margin: 2px 0px;
    border-radius: 6px;
}

.ProfileNotificationSubscriptionContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.ThisDevice {
    display: block;
    position: relative;
    top: -7px;
}


.UserFields {
    display: flex;
    width: 70%;
}

    .UserFields form {
        width: 100%;
    }

    .UserFields input {
        width: 100%;
        margin-top: .5rem;
    }

@media screen and (max-width: 820px) {
    .UserProfile {
        flex-direction: column;
        margin: 2rem 0;
        width: -webkit-fill-available;
    }

        .UserProfile .SubmitForm {
            text-align: center;
        }

    .UserCard {
        width: 100%;
        margin-top: 2rem;
        align-items: center;
    }

    .UserFields {
        width: 100%;
    }
}

.ChangeUpdateImg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.UserCard .user-mini-card,
.UserCard .user-mini-card-sm {
    margin-top: 1rem;
}

.UserImage {
    display: flex;
    width: fit-content;
    max-width: 200px;
}

    .UserImage img {
        width: 100%;
        border-radius: 100%;
    }

.EmailList.Details {
    padding-bottom: 0 !important;
}

.user-info {
    width: 100%;
    font-size: 0.799rem;
    padding: 1rem 0.5rem;
}
    .user-info .form-control {
        font-size: 0.799rem;
    }
    .user-info .form-control:disabled,
    .user-info .form-control[readonly] {
        background: transparent;
        border: none;
    }

/* MyFeed */
div#MyFeed {
    max-width: 1000px;
    display: flex;
    width: 100%;
    position: relative;
    margin: 0 auto;
    flex-direction: column;
    padding: 4rem 1rem 1rem;
}

/*welcome*/
.WelcomeYou a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .WelcomeYou a span {
        margin-left: 0.5rem;
    }

.WelcomeContent, .Welcome {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    padding: 2rem;
}

.frontpage-info {
    color: firebrick;
    border: crimson;
    border-style: outset;
    padding: 8px;
    border-radius: 5px;
}

.Welcome {
    background-color: var(--sagaWelcomeBgColor);
}

.WelcomeContent {
    background-color: var(--structureColor1);
}

.Greeting {
    max-width: 800px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

    .Greeting h1 {
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: .35rem;
        color: var(--sagaWelcomeTextColor);
        margin: 0;
        margin-top: .5rem;
    }

    .Greeting img {
        max-width: 120px;
        margin-bottom: 1rem;
    }

.ShortCuts {
    max-width: 1200px;
    text-align: center;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    align-items: center;
    justify-content: center;
}
    .ShortCuts a {
        margin: 2rem;
        display: flex;
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        justify-content: center;
        align-items: center;
    }

span.HomeScreen {
    display: flex;
    width: fit-content;
    justify-content: center;
    align-items: end;
}

    span.HomeScreen svg {
        margin-right: .5rem;
        fill: var(--sagaColor3);
        width: 1.25rem;
        height: 1.25rem;
    }


.AdminLanding {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    /*max-width: 800px;*/
    margin: 0 auto;
    text-align: center;
    align-items: center;
    width: 100vw;
}

.ListUsers {
    display: flex;
    /* align-items: stretch; */
    flex-direction: column;
    text-align: center;
    margin-top: 2rem;
    padding: 2rem;
    background-color: #fff;
    border: .015rem solid #e4e4e4ab;
    border-radius: 4px;
    width: 100%;
}

td span.functional-icon {
    justify-content: center;
}

.CenterTxt {
    text-align: center;
}

.connectedUsers {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 2rem;
    padding: 2rem;
    background-color: #fff;
    border: .015rem solid #e4e4e4ab;
    border-radius: 4px;
    width: 100%;
}

th.ContainsIcon {
    text-align: center;
}

.ListUsers table {
    text-align: left;
    margin: 0;
}

.UserTable {
    display: flex;
    overflow-x: auto;
}

.table td, .table th {
    padding: .25rem .5rem;
    vertical-align: middle;
    border-bottom: .015rem solid #e4e4e4ab;
    font-weight: 400;
}

.table .thead-dark th {
    font-weight: 400;
}

td.functional-icon {
    justify-content: center;
    padding-top: .5rem;
}

    td.functional-icon svg {
        width: 1.25rem;
        height: 1.25rem;
        color: green;
    }
    span.functional-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

thead.thead-dark {
    background-color: #000;
}

.table .thead-dark th {
    color: #fff;
    background-color: transparent;
    border: 0;
    padding: .5rem;
    line-height: 1em;
    vertical-align: middle;
    font-size: .86rem;
}

th.functional-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.AdminButtons .nav-link {
    font-size: .75rem;
    background: var(--sagaColor4);
    border-radius: 4px;
    border: 0;
    padding: .15rem .5rem;
    color: #fff;
    margin: 0;
    display: inline-block;
}

.functional-icon.blocked svg {
    color: darkred;
}

.RoleCount {
    text-align: center;
}

td.RoleCount div {
    width: 1.25rem;
    height: 1.25rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    border-radius: 100%;
    font-size: .57rem;
    color: #616161;
    border: .015rem solid #e4e4e4ab;
    font-weight: bold;
    line-height: 1.25rem;
}

.Loader {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    animation: all .3s;
}

    .Loader.BringForth {
        opacity: 1;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 2;
        animation: fadeInFromNone 0.25s ease-in;
        pointer-events: none;
    }

    .Loader div {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        display: flex;
        background-color: rgba(255,255,255,1);
        border: .015rem solid #e4e4e4;
        box-shadow: 0px 4.88056px 9.76111px rgba(0, 0, 0, 0.1);
        border-radius: 50%;
    }

        .Loader div svg {
            width: 50px;
            height: 50px;
        }

    .Loader svg circle {
        fill: var(--structureColor3);
    }


.FeedProjectName {
    padding: .75rem 1rem .5rem 1rem;
    line-height: 1em;
    margin: 0;
    background-color: #1b698b;
}

.MyFeedContent .TaskTopicContent h4 {
    font-size: 1.2rem;
}

.mobile-toolbar {
    display: none;
}

/**************************************************
* Marketing Automation
**************************************************/

.automation-hero {
    width: 100%;
    height: 53px;
    background: #FBFBFB;
    border-bottom: 1px solid var(--structureColor4);
    box-sizing: border-box;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.05);
}

.select-campaign {
    width: 100%;
    margin-bottom: 1rem;
}
.select-campaign select {
    width: 100%;
}

.Level2ResultsHeader {
    margin: 1rem 0.5rem;
    text-align: center;
    font-size : 2vw;
}


/* rewritet */
.Level2Header, .Level2Details {
    display: flex;
    flex-direction: row;
    padding: 1rem 1rem .25rem 1rem;
    justify-content: space-between;
    align-items: center;
}

.Level3Header, .Level2Header {
    padding: 1rem 1rem 1rem 1rem;
    background-color: var(--sagaColor2);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .Level3Header span svg {
        color: var(--sagaColor1);
    }
    .Level3Header:hover span svg {
        color: var(--sagaColor3);
    }


.marketing-automation .active {
    cursor: pointer;
}
    .marketing-automation .active:after {
        /*content: '\F0DA';
        font-family: 'fontawesome';
        position: relative;
        font-size: 1em;
        margin-left: 3px;*/
    }

/* campaign user settings */
.campaign-user-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0 0 0.5rem;
}

    .campaign-user-settings span {
        padding: 0;
    }
        .campaign-user-settings span input {
            margin: 0;
        }

    .campaign-user-settings .icon {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        border: 1px solid var(--structureColor4);
        border-radius: 8px;
        box-shadow: none;
        cursor: pointer;
    }

        .campaign-user-settings .icon:after {
            font-family: 'fontawesome';
            position: relative;
            font-size: .9rem;
            margin-right: 1px;
            margin-left: 1rem;
            vertical-align: unset;
        }

.icon.set-end-time:after, .icon.set-time:after {
    content: '\F073';
}

span.saved-time {
    color: var(--structureColor3);
}

.settings-container {
    background-color: transparent;
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
}

.settings-content {
    background-color: var(--structureColor1);
    width: 100%;
    /*max-width: 1000px;*/
    padding: 0.5rem 1rem;
    display: block;
    position: relative;
}
    .settings-content .rz-card {
        box-shadow: none;
        border: solid 1px var(--structureColor4);
    }

.step-settings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--structureColor1);
    width: 100%;
    max-width: 1000px;
    padding: 0.5rem 1rem;
}
.step-setting {
    font-size: 0.799rem;
    width: fit-content;
    margin: 0 .5rem .5rem 0;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid var(--structureColor4);
    align-items: center;
    cursor: pointer;
}
    .step-setting span {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: var(--defaultBoldFontWeight);
        min-width: 1.5rem;
        height: 1.5rem;
        margin-left: 1rem;
        border-radius: 50%;
        background-color: var(--sagaColor2);
        color: var(--structureColor2);
    }

.target-list-header {
    display: flex;
    flex-wrap: wrap;
    color: var(--sagaColor4);
}

/**************************************************
* Newsletter
**************************************************/
.newslettermain-header-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}
.newsletter-filters {
    margin: 0;
    padding: .5rem 1rem;
    font-size: .85rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

    .newsletter-filters label.status {
        margin: .25rem .5rem .25rem 0;
        padding: 0.3rem 0rem 0.3rem 1.5rem;
        color: inherit;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        font-size: .9rem;
        font-weight: var(--defaultFontWeight);
        align-items: center;
        position: relative;
    }

    .newsletter-filters label.status input {
        display: none;
    }
    /* Create a custom checkbox */
    .newsletter-filters label.status .checkmark {
        position: absolute;
        top: 0.2rem;
        left: 0rem;
        height: 1rem;
        width: 1rem;
        background-color: var(--structureColor1);
        border: 2px solid var(--sagaTextDark);
        border-radius: 3px;
    }

    .newsletter-filters label.status:hover input ~ .checkmark {
        background-color: var(--structureColor5);
    }

    .newsletter-filters label.status .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .newsletter-filters label.status input:checked ~ .checkmark:after {
        display: block;
    }

    .newsletter-filters label.status .checkmark:after {
        left: 0.25rem;
        top: 0.05rem;
        width: 0.45rem;
        height: 0.7rem;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .newsletter-filters label.status input:checked ~ .checkmark {
        background: linear-gradient(90deg, #40C0E9 0%, #6BE1BE 100%);
        border: none;
    }


.newsletter-hero {
    width: 100%;
    height: 53px;
    background: #FBFBFB;
    border-bottom: 1px solid var(--structureColor4);
    box-sizing: border-box;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.05);
}
.newsletter {
    background: var(--structureColor1) !important;
    max-width: 1398px;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: 0;
    margin: 0 auto 4rem;
    padding: 0 15px;
}
    .newsletter button span svg {
        max-width: 1rem;
        max-height: 1rem;
        height: auto;
        fill: var(--sagaPrimaryButtonTextColor);
    }
.newsletter-content {
    position: relative;
}
.newsletter-header {
    width: 100%;
}
.newsletter-header-actions {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.5rem 0 2rem;
}
    .newsletter-header-actions button {
        font-size: 1rem;
        margin: 0 0.5rem 0.5rem 0;
        padding: 0.5rem 1rem;
        border-radius: var(--sagaButtonBorderRadius);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
    }

        .newsletter-header-actions button span {
            margin-left: 0.5rem;
        }
            .newsletter-header-actions button span svg {
                fill: var(--sagaPrimaryButtonTextColor);
                max-width: 1rem;
            }
.newsletter-set-title {
    display: flex;
    width: 100%;
    align-content: center;
    margin: 0 0 1rem;
}
    .newsletter-set-title input {
        width: 100%;
    }


.select-newsletter-header,
.select-newsletter-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border: 2px dashed var(--structureColor4);
    border-radius: 8px;
    color: var(--structureColor3);
    cursor: pointer;
    margin: 1rem 0;
    padding: 1rem;
}

.select-newsletter-header svg,
.select-newsletter-footer svg {
    color: var(--sagaColor3);
}

.newsletter-editor {
    position: relative;
}
    .newsletter-editor .switch-view {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

.newsletter-editor-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #FBFBFB;
    border: 1px solid var(--structureColor4);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: 0;
    padding: 0.5rem;
}
    .newsletter-editor-tools button {
        margin: 0.25rem;
        padding: 0.25rem 0.75rem;
        border-radius: var(--sagaButtonBorderRadius);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        font-size: .9rem;
        align-items: center;
    }
        .newsletter-editor-tools button svg {
            margin-left: 0.5rem;
        }

.newsletter-block {
    width: 100%;
}
.newsletter-block:hover {
    outline: 4px solid var(--sagaColor3);
    outline-offset: 0;
}
    .newsletter-block tr.tools td {
        background: var(--sagaColor1);
        padding: 0.5rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
    }
        .newsletter-block tr.tools td > div {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: stretch;
            position: relative;
        }
    .newsletter-block tr.tools td > div > button {
        margin-right: 0.5rem;
    }
        .newsletter-block tr.tools td > div:last-child > button {
            margin-right: 0;
            margin-left: 0.5rem;
        }

.newsletter-block input {
    width: 100%;
}

.newsletter-block tr.tools .rz-card {
    padding: 0.5rem;
    margin: 0 !important;
    position: absolute;
    left: 0;
    top: 2.5rem;
    z-index: 2;
    min-width: 17rem;
}
.newsletter-block tr.tools .rz-card p,
.newsletter-block tr.tools .rz-card input {
    font-size: .75rem;
    margin-bottom: 0.25rem;
}

.rz-html-editor-content {
    background-color: transparent;
    text-transform: none !important;
}

.color-picker {
    font-size: .75rem;
    line-height: 150%;
    color: var(--sagaPrimaryButtonTextColor);
    background: var(--sagaPrimaryButtonBgColor);
    border-radius: var(--sagaButtonBorderRadius);
    border: 0;
    padding: .15rem .15rem .15rem .5rem;
    margin-left: 0.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
    .color-picker .rz-colorpicker {
        background-color: transparent;
        border: none !important;
        padding: 0 !important;
        height: 1.75rem;
    }


.settings-card {
    display: flex;
    flex-direction: column;
    background-color: var(--structureColor1);
    position: relative;
    border: 1px solid var(--structureColor4);
    border-radius: 8px;
    transition: all .3s;
    margin: 0.5rem 0 4rem;
    padding: 0.5rem;
    font-size: .9rem;
    text-align: center;
}

.settings-card-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0.25rem;
    border-bottom: 1px solid var(--structureColor4);
}
.settings-card-group:last-child {
    border-bottom: none;
}

.settings-card-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0.25rem 0;
}
    .settings-card-row .btn-group .btn {
        font-size: .9rem;
        padding: 0.5rem 1rem;
    }
    .settings-card-row input {
        font-size: .9rem;
        margin: 0 1rem 0 0.5rem;
    }
    .settings-card-row b {
        margin: 0 1rem 0 0;
    }

/**************************************************
* MasterAdmin Settings
**************************************************/
.masteradminsettings {
    margin: 4rem 1rem 1rem;
}

.newsletter-masteradmin-settings {
    margin: 4rem 0rem 0rem;
}
    .newsletter-masteradmin-settings input {
        width: 100%;
    }
    .newsletter-masteradmin-settings .csseditor {
        height: calc(50vh - 425px);
        min-height: 20rem;
    }

.csseditor {
    height: calc(80vh - 425px);
    min-height: 20rem;
    background-color: var(--structureColor1);
    border: 1px solid var(--structureColor4);
    margin: 1rem 0;
}

/**************************************************
* FLEX / GRID / TAITTO
**************************************************/

.frame {
    max-width: 1124px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.small-frame {
    max-width: 1000px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
}

.flex-container {
    display: flex;
    flex-flow: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-column {
    display: flex;
    flex-flow: column;
}

.valign-start {
    align-items: flex-start;
}

.valign-center {
    align-items: center;
}

.align-center {
    justify-content: center;
}

.align-end {
    justify-content: flex-end;
}

.align-space-around {
    justify-content: space-around;
}

.align-space-between {
    justify-content: space-between;
}

.col-w-20,
.col-w-25,
.col-w-30,
.col-w-33,
.col-w-50,
.col-w-66,
.col-w-75,
.col-w-100 {
    width: 100%;
    position: relative;
}

@media screen and (min-width:991px) {
    .col-w-25 {
        width: 50%;
    }

    .col-w-50 {
        width: 50%;
    }
}

@media screen and (min-width:1199px) {
    .col-w-20 {
        width: 20%;
    }

    .col-w-25 {
        width: 25%;
    }

    .col-w-30 {
        width: 30%;
    }

    .col-w-33 {
        width: 33%;
    }

    .col-w-50 {
        width: 50%;
    }

    .col-w-66 {
        width: 66%;
    }

    .col-w-75 {
        width: 75%;
    }
}

.divider-bottom {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--structureColor4);
}

/*
.t-pad-small {
    padding-top: 1.5rem;
}

.lr-pad-minimal {
    padding-left: 1rem;
    padding-right: 1rem;
}

.b-pad-minimal {
    padding-bottom: 1rem;
}
*/

/* Paddings */
.pad-large {
    padding: var(--pad-large);
}

.pad {
    padding: var(--pad);
}

.pad-small {
    padding: var(--pad-small);
}

.pad-minimal {
    padding: var(--pad-minimal);
}

.lr-pad-large {
    padding-left: var(--pad-large);
    padding-right: var(--pad-large);
}

.lr-pad {
    padding-left: var(--pad);
    padding-right: var(--pad);
}

.lr-pad-small {
    padding-left: var(--pad-small);
    padding-right: var(--pad-small);
}

.lr-pad-minimal {
    padding-left: var(--pad-minimal);
    padding-right: var(--pad-minimal);
}

.t-pad-large {
    padding-top: var(--pad-large);
}

.t-pad {
    padding-top: var(--pad);
}

.t-pad-small {
    padding-top: var(--pad-small);
}

.t-pad-minimal {
    padding-top: var(--pad-minimal);
}

.tb-pad-large {
    padding-top: var(--pad-large);
    padding-bottom: var(--pad-large);
}

.tb-pad {
    padding-top: var(--pad);
    padding-bottom: var(--pad);
}

.tb-pad-small {
    padding-top: var(--pad-small);
    padding-bottom: var(--pad-small);
}

.tb-pad-minimal {
    padding-top: var(--pad-minimal);
    padding-bottom: var(--pad-minimal);
}

.r-pad-large {
    padding-right: var(--pad-large);
}

.r-pad {
    padding-right: var(--pad);
}

.r-pad-small {
    padding-right: var(--pad-small);
}

.r-pad-minimal {
    padding-right: var(--pad-minimal);
}

.b-pad-large {
    padding-bottom: var(--pad);
}

.b-pad {
    padding-bottom: var(--pad);
}

.b-pad-small {
    padding-bottom: var(--pad-small);
}

.b-pad-minimal {
    padding-bottom: var(--pad-minimal);
}

.l-pad-large {
    padding-left: var(--pad-large);
}

.l-pad {
    padding-left: var(--pad);
}

.l-pad-small {
    padding-left: var(--pad-small);
}

.l-pad-minimal {
    padding-left: var(--pad-minimal);
}
/* Margins */
.marg {
    margin: var(--pad)
}

.marg-small {
    margin: var(--pad-small);
}

.marg-minimal {
    margin: var(--pad-minimal);
}

.lr-marg {
    margin-left: var(--pad);
    margin-right: var(--pad);
}

.lr-marg-small {
    margin-left: var(--pad-small);
    margin-right: var(--pad-small);
}

.lr-marg-minimal {
    margin-left: var(--pad-minimal);
    margin-right: var(--pad-minimal);
}

.tb-marg {
    margin-top: var(--pad);
    padding-bottom: var(--pad);
}

.tb-marg-small {
    margin-top: var(--pad-small);
    margin-bottom: var(--pad-small);
}

.tb-marg-minimal {
    margin-top: var(--pad-minimal);
    margin-bottom: var(--pad-minimal);
}

.b-marg {
    margin-bottom: var(--pad);
}

.b-marg-small {
    margin-bottom: var(--pad-small);
}

.b-marg-minimal {
    margin-bottom: var(--pad-minimal);
}

.l-marg {
    margin-left: var(--pad);
}

.l-marg-small {
    margin-left: var(--pad-small);
}

.l-marg-minimal {
    margin-left: var(--pad-minimal);
}

.r-marg {
    margin-right: var(--pad);
}

.r-marg-small {
    margin-right: var(--pad-small);
}

.r-marg-minimal {
    margin-right: var(--pad-minimal);
}

.t-marg {
    margin-top: var(--pad);
}

.t-marg-small {
    margin-top: var(--pad-small);
}

.t-marg-minimal {
    margin-top: var(--pad-minimal);
}

.no-marg {
    margin: 0;
}

/**************************************************
* COMMON TYPO
**************************************************/

.small-txt {
    font-size: 0.75rem !important;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/**************************************************
* AUTOMATION
* Visual changes 01/2024
**************************************************/

body {
    font-family: AxiformaRegular;
    font-size: 14px;
    line-height: 100%;
    font-weight: normal;
    color: var(--sagaTextDark);
    background: #fff;
    letter-spacing: 0.1em;
}

.page-header {
    max-width: 1124px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.page-header-breadcrumb {
    width: 100%;
    padding: 0 15px;
}
    .page-header-breadcrumb ul {
        display: flex;
        padding: 1rem 0 0;
        margin-bottom: 20px;
        list-style: none;
        font-size: 1em;
        text-transform: uppercase;
        background-color: transparent;
        color: var(--sagaTextGrey);
    }
        .page-header-breadcrumb ul a {
            color: var(--sagaTextGrey);
        }
    .page-header-breadcrumb ul > li {
        padding: 0.25rem 0 0.25rem 0.25rem;
        display: inline-block;
    }
        .page-header-breadcrumb ul > li:not(:last-of-type)::after {
            content: "/";
            padding: 0.25rem;
        }
        .page-header-breadcrumb ul > li.current {
            font-family: AxiformaBold;
        }


.page-header-content {
    padding: 4rem 1rem 1rem;
    position: relative;
}

.page-actions {
    display: flex;
    justify-content: center;
    padding: 0 1rem 1.5rem;
}


button.icon-btn {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    margin: 0.25rem 0.75rem;
    background: transparent;
    color: var(--sagaTextDark);
    font-size: 1.2857142857142858em;
}
    button.icon-btn svg {
        margin: 0 0.5rem 0 0;
    }

    button.icon-btn:first-of-type {
        margin: 0.25rem 0.75rem 0.25rem 0;
    }
    button.icon-btn:last-of-type {
        margin: 0.25rem 0 0.25rem 0.75rem;
    }
button.icon-btn:disabled {
    opacity: 0.3;
}

    button.icon-btn.small {
        font-size: 1em;
        margin: 0.25rem 0;
    }

fieldset {
    border: solid var(--sagaThemeColor1) 1px;
    border-radius: 5px;
    padding: 0 1rem 1rem;
}
legend {
    width: auto;
    padding: 0 0.5rem;
    font-size: 0.8571428571428571em;
    text-transform: uppercase;
}

.page-header h1 {
    font-weight: normal;
    font-size: 2.857142857142857em;
    font-family: Axiformabold;
    line-height: 1em;
    color: var(--sagaThemeColor1);
    letter-spacing: 0.1em;
    margin: 0 0 0.5em;
}
p.page-subheader {
    margin: 1.5em 0 2em;
    font-size: 1.7142857142857142em;
    text-transform: uppercase;
}

.rz-tabview-top > .rz-tabview-nav {
    flex-direction: row;
    border-bottom: 1px solid var(--sagaThemeColor1);
    padding: 0 1.5rem;
}
    .rz-tabview-top > .rz-tabview-nav li {
        border: 1px solid transparent !important;
        border-bottom: none !important;
        background: transparent;
        margin-bottom: -1px;
    }
        .rz-tabview-top > .rz-tabview-nav li:hover,
        .rz-tabview-top > .rz-tabview-nav li:hover {
            border: 1px solid transparent !important;
            border-bottom: none !important;
            background: transparent !important;
            color: #48ADCD !important;
        }
        .rz-tabview-nav li a {
            color: #cccccc;
            text-decoration: none;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 1em 2em;
        }
        .rz-tabview-top > .rz-tabview-nav .rz-tabview-selected,
        .rz-tabview-top > .rz-tabview-nav .rz-tabview-selected:hover {
            border: 1px solid var(--sagaThemeColor1) !important;
            border-bottom: none !important;
            border-radius: 15px 15px 0 0;
            background: var(--structureColor1) !important;
        }
        .rz-tabview-nav li.rz-tabview-selected a {
            color: var(--sagaTextDark);
        }



.rz-tabview-panels {
    overflow: auto;
    background: transparent;
    border: none;
    box-shadow: none;
}

.tab-actions {
    display: flex;
}

    .tab-actions > * {
        margin: 0.25rem 0.75rem;
    }
        .tab-actions > *:first-of-type {
            margin: 0.25rem 0.75rem 0.25rem 0;
        }
        .tab-actions > *:last-of-type {
            margin: 0.25rem 0 0.25rem 0.75rem;
        }

.label-block {
    color: var(--sagaTextDark);
    font-weight: 400;
    letter-spacing: 0.1em;
    border-radius: 3px;
    padding: 0.75em 1.5em;
    font-size: 0.8571428571428571em;
    text-transform: uppercase;
    background-color: #A4D7E6;
}
    .label-block.label-blue {
        color: var(--sagaTextDark);
        background-color: #A4D7E6;
    }
    .label-block.label-red {
        color: var(--sagaTextDark);
        background-color: #FFD4D4;
    }
    .label-block.label-green {
        color: var(--sagaTextDark);
        background-color: #E7F4C9;
    }
    .label-block.label-yellow {
        color: var(--sagaTextDark);
        background-color: #FFF1CC;
    }
    .label-block.label-turquoise {
        color: var(--sagaTextDark);
        background-color: #B9ECDD;
    }

.page-header-content .label-block {
    position: absolute;
    margin-top: -2rem;
    left: 50%;
    transform: translate(-50%,-50%);
}

.rz-cell-filter {
    background-color: transparent;
    border-top: none;
}
    .rz-cell-filter .rz-spinner-button {
        background-color: transparent;
    }


.rz-selectbutton .rz-button.rz-button-md, .rz-selectbutton .rz-scheduler-nav-views .rz-button.rz-primary, .rz-scheduler-nav-views .rz-selectbutton .rz-button.rz-primary, .rz-selectbutton .rz-button.rz-paginator-element, .rz-selectbutton .rz-button-md.rz-paginator-element, .rz-selectbutton .rz-scheduler-nav-views .rz-paginator-element.rz-primary, .rz-scheduler-nav-views .rz-selectbutton .rz-paginator-element.rz-primary, .rz-selectbutton .rz-paginator-element, .rz-selectbutton .rz-date-filter-buttons .rz-button, .rz-selectbutton .rz-date-filter-buttons .rz-paginator-element, .rz-date-filter-buttons .rz-selectbutton .rz-button, .rz-date-filter-buttons .rz-selectbutton .rz-paginator-element, .rz-selectbutton .rz-button.rz-fileupload-choose, .rz-selectbutton .rz-fileupload-choose.rz-paginator-element {
    background: var(--structureColor1);
    color: var(--sagaTextDark);
    font-size: 0.8571428571428571em;
    text-transform: uppercase;
    font-weight: normal;
}
    .rz-selectbutton .rz-button.rz-button-md.rz-state-active, .rz-selectbutton .rz-scheduler-nav-views .rz-button.rz-state-active.rz-primary, .rz-scheduler-nav-views .rz-selectbutton .rz-button.rz-state-active.rz-primary, .rz-selectbutton .rz-state-active.rz-paginator-element, .rz-selectbutton .rz-date-filter-buttons .rz-button.rz-state-active, .rz-date-filter-buttons .rz-selectbutton .rz-button.rz-state-active, .rz-selectbutton .rz-button.rz-state-active.rz-fileupload-choose {
        background: var(--sagaGradient1);
        color: var(--sagaTextLight);
        border: var(--rz-selectbar-border);
        font-family: AxiformaBold;
    }

.rz-button-icon-left {
    background: var(--sagaGradient1);
    background-clip: border-box;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/**************************************************
* NEWSLETTER
* Visual changes 02/2024
**************************************************/
.current-foldername {
    width: 100%;
    max-width: 1124px;
    margin: 0 auto 20px;
    padding: 1rem 0 0;
    list-style: none;
    font-size: 1em;
    text-transform: uppercase;
    background-color: transparent;
    color: var(--sagaThemeColor1);
}

/**************************************************
* UUDET NAPIT
**************************************************/
button.SaveButton, /* vanha */
button.CancelButton, /* vanha */
button.CloseButton,
.primary-button,
.action-button-1,
.action-button-2,
.cancel-button {
    font-size: 0.8571428571428571em;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 150%;
    color: #fff;
    background: var(--sagaGradient1);
    border-radius: 50px;
    border: 0;
    padding: 1em 2em;
    margin: 0.25rem 0.75rem;
    letter-spacing: 0.1em;
}
    button.SaveButton:hover, /* vanha */
    .primary-button:hover,
    .action-button-1:hover,
    .action-button-2:hover,
    .cancel-button:hover {
        color: var(--sagaTextDark);
        transition: all .3s;
    }
    button.SaveButton.disabled, /* vanha */
    button.CancelButton.disabled, /* vanha */
    .primary-button.disabled,
    .action-button-1.disabled,
    .action-button-2.disabled,
    .cancel-button.disabled {
        opacity: 0.5;
    }

.primary-button {
    color: #fff;
    background: var(--sagaGradient1);
}
.action-button-1 {
    color: #fff;
    background: var(--sagaGradient2);
}
.action-button-2 {
    color: #fff;
    background: var(--sagaGradient3);
}
.cancel-button {
    color: #fff;
    background: var(--sagaTextDark);
}
    button.CloseButton:hover,
    button.CancelButton:hover, /* vanha */
    .cancel-button:hover {
        color: var(--sagaTextLight);
        transition: all .3s;
    }



button.SaveButton /* vanha */ {
    color: #fff;
    background: var(--sagaGradient1);
}
.SaveButton svg {
    color: var(--sagaColor1);
}
button.SaveButton:hover svg {
    transform: scale(1.5);
    transition: all .3s;
}

button.CancelButton, /* vanha */
button.CloseButton {
    color: #fff;
    background: var(--sagaTextDark);
}

/**************************************************
* KAMPANJAPOLKU
**************************************************/

.custom-node.selected {
    border: 1px solid #6e9fd4;
}

.node.selected {
    border: 1px solid #6e9fd4;
}

.custom-node.selected, .custom-node.selected .port {
    border: 1px solid #6e9fd4;
}

.custom-node:hover .port {
    visibility: visible;
}

.custom-node .port {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f5f5f5;
    cursor: pointer;
    /*visibility: hidden;*/
}

    .custom-node .port:hover, .node > .card .port.has-links {
        /*visibility: visible;*/
        background-color: black;
    }

    .custom-node .port.bottom {
        position: absolute;
        bottom: -1.75em;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: var(--stepColor2);
        background-color: #E7F4C9;
    }

    .custom-node .port.bottomleft {
        position: absolute;
        bottom: -1.75em;
        left: -0.75em;
        background-color: var(--stepColor2);
        background-color: #A4D7E6;
    }

    .custom-node .port.bottomright {
        position: absolute;
        bottom: -1.75em;
        right: -0.75em;
        background-color: var(--stepColor2);
        background-color: #FFF1CC;
    }

    .custom-node .port.top {
        position: absolute;
        top: -2em;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: var(--stepColor1);
    }


.custom-node {
    background: #fff;
    border: 1px solid var(--sagaThemeColor1);
    padding: 1em 1.5em;
    border-radius: 10px;
    min-width: 20em;
}
    .custom-node h5 {
        position: absolute;
        margin-top: -1.5rem;
        background: #fff;
        padding: 0 0.5em;
        font-size: 1.1428571428571428em;
        width: auto;
        display: inline-block;
        white-space: nowrap;
    }
    .custom-node .rz-card {
        border: none;
    }
        .custom-node .rz-card .settings {
            display: flex;
            flex-flow: column;
            align-items: flex-start;
            margin-bottom: 0.5em;
        }

        .custom-node .rz-card p.step-not-ready {
            font-weight: 400;
            letter-spacing: 0.1em;
            border-radius: 3px;
            padding: 0.75em 1.5em;
            font-size: 0.8571428571428571em;
            text-transform: uppercase;
            color: var(--sagaTextDark);
            background-color: #FFD4D4;
        }
        .custom-node .rz-card p.step-not-ready:empty {
            display:none;
        }

/* Link label */
.link foreignObject {
    overflow: visible;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.link .link-label {
    color: var(--sagaTextDark) !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 1em !important;
}
.link .link-label span {
    color: var(--sagaTextDark);
    background-color: #A4D7E6;
    border-radius: 3px;
    padding: 0.75em 1em;
    font-size: 0.8571428571428571em;
    text-transform: uppercase;
    opacity: 0.8;
}
    .link .link-label span.delivered {
        color: var(--sagaTextDark);
        background-color: rgba(72, 173, 205, 0.5);
        background-color: #A4D7E6;
    }
    .link .link-label span.opened {
        color: var(--sagaTextDark);
        background-color: rgba(194, 228, 121, 0.4);
        background-color: #E7F4C9;
    }
    .link .link-label span.clicked {
        color: var(--sagaTextDark);
        background-color: rgba(255, 220, 129, 0.4);
        background-color: #FFF1CC;
    }

.diagram-container {
    min-height: 35em;
    height: 60vh;
    width: 100%;
    position: relative;
    margin: 4rem 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: var(--rz-grid-shadow);
}
.diagram-top-actions {
    position: relative;
    margin-top: -3rem;
}
.diagram-bottom-actions {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    bottom: -4rem;
    width: 100%;
    z-index: 2;
}

    .diagram-bottom-actions > * {
        margin: 0.25rem 0.75rem;
    }

        .diagram-bottom-actions > *:first-of-type {
            margin: 0.25rem 0.75rem 0.25rem 0;
        }

        .diagram-bottom-actions > *:last-of-type {
            margin: 0.25rem 0 0.25rem 0.75rem;
        }

/**************************************************
* DIALOG / POPUP
**************************************************/

.rz-dialog-titlebar {
    background-color: transparent;
    padding: var(--pad) var(--pad) 0;
    border-bottom: none;
}
.rz-dialog-title {
    /*font-size: 1.7142857142857142em;
    line-height: 1.25em;*/
    color: var(--sagaThemeColor1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: AxiformaBold;
    font-weight: normal;
}
.form-label {
    font-size: 1em;
    text-transform: uppercase;
    margin: 0.5rem 0;
}

/**************************************************
* VIIKKONÄKYMÄ
**************************************************/
.projectsweekly-main {
    background-color: var(--structureColor1);
    min-height: calc(100vh - 56px);
}

.projectweekly-person > .brandeaccordion-header {
    color: var(--sagaColor4);
    font-size: 1.25rem;
    line-height: 1.25em;
    padding: 1rem 0;
}

.projectweekly-project {
    border: 1px solid var(--structureColor3);
    border-radius: 5px;
    padding: 2rem;
    margin: 1rem 5px 2rem;
    position: relative;
    background-color: var(--structureColor1);
}

    .projectweekly-project .brandeaccordion-header {
        position: absolute;
        top: -1rem;
        padding: 0 1rem;
        background: var(--structureColor1);
    }

.brandeaccordion-header img {
    margin-right: 1rem;
}

.brandeaccordion-header-caret {
    padding: 0 1rem;
}

.projectweekly-archive {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: var(--structureColor5);
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
}


.projectweekly {
    padding-bottom: 2rem;
    border-bottom: 1px solid #AAAAAA;
    padding-top: 1rem;
}

    .projectweekly:last-child {
        padding-bottom: 0;
    }

.projectweekly-masterproject-title {
    font-weight: 700;
}

.projectweekly .userlist-mini-cards {
    align-items: center;
}

    .projectweekly .userlist-mini-cards .user-mini-card-sm {
        margin: 0.25rem 0 0.75rem 0.5rem;
    }

        .projectweekly .userlist-mini-cards .user-mini-card-sm:first-child {
            margin: 0.25rem 0 0.75rem 1.5rem;
        }

.projectweekly-notes {
    padding-bottom: 1rem;
}
.projectweekly-tags {
    padding-bottom: 1rem;
}

.note {
    padding: 1rem 0;
    border-bottom: 1px dotted var(--structureColor5);
}

    .note:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.note-content {
    width: 100%;
    font-size: .9rem;
}

    .note-content p:last-child {
        margin-bottom: 0;
    }

.note-commands {
    color: var(--structureColor5);
}
.note-commands span {
    margin-left: 0.5rem;
}

.projectweekly-users {
}

.projectweekly-buttons svg {
    color: var(--structureColor5);
}

.notesarchive {
    padding-bottom: 1rem;
}

.notesarchive .note {
    flex-wrap: wrap;
}

.note-info {
    width: 100%;
    font-size: .9rem;
    font-weight: 700;
    display: flex;
    padding-bottom: 1rem;
}

.textinputdialog input {
    margin-left: 0rem;
    margin-top: 0.5rem;
}

.brandeaccordion-img-bg {
    background-size: cover;
    background-position-x: 50%;
    background-position-y: 50%;
    border-radius: 50%;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 0.75em 0 0;
    vertical-align: middle;
}


.weeklyCheckControls  {
    flex-direction: row !important;
    justify-content: start;
    padding: 0;
}

.weeklyCheckControls label:first-of-type  {
    margin-right: 0.5rem;
}

.weeklyCheckControls label:last-of-type  {
    margin-left: 0.5rem;
}

/**************************************************
* RESPONSIVE - MIN-WIDTH
**************************************************/
@media (min-width: 1100px) {
    .expenseChart, .expenseLineChart {
        width: 50%;
        position: relative;
        padding: 0 0 1rem;
    }
}

@media (min-width: 991px) {
    .menu {
        display: flex;
        flex-direction: column;
        margin: 0 1rem;
    }

    .opened-view {
        width: calc(100% - 300px - 3rem);
    }

}

@media (min-width: 769px) {
    .visible-xs {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .current-customer .rz-dropdown {
        position: absolute;
        right: 0;
        min-width: 300px;
    }
}


/**************************************************
* RESPONSIVE - MAX-WIDTH
**************************************************/
    @media (max-width: 1280px) {
        .project-feed-header button {
            padding: 1rem;
        }

        .resource-user-row {
            text-align: center;
        }

    }

    @media (max-width: 991px) {

        .project-content {
            flex-direction: column;
            align-items: center;
        }

        .project-feed-header button {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem;
            width: 100%;
        }

        .project-feed-header-tabs {
            justify-content: space-between;
        }

            .project-feed-header-tabs button span {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 0;
                line-height: 0;
                margin: 0;
            }

                .project-feed-header-tabs button span svg {
                    display: inline-block;
                    width: 1.5rem;
                    max-height: 1.5rem;
                }

            .project-feed-header-tabs button.filters {
                margin-left: 0;
            }

        .menu {
            position: fixed;
            top: 54px;
            left: -100%;
            z-index: 3;
            max-width: 100%;
            height: calc(100vh - 54px);
            overflow: auto;
            padding: 0 0 3.25rem;
            background: var(--structureColor1);
            box-shadow: 0px 4.88056px 9.76111px rgba(0, 0, 0, 0.1);
            -webkit-transition: left .4s ease-in-out;
            -moz-transition: left .4s ease-in-out;
            -o-transition: left .4s ease-in-out;
            transition: left .4s ease-in-out;
        }

            .menu.open {
                left: 0;
            }

        .project-content .card.full-level {
            margin: 0;
            padding: 3rem 1rem 1rem;
            position: static;
            top: 0;
            overflow-y: auto;
        }

        .opened-view {
            padding-bottom: 4rem;
        }

        .mobile-toolbar {
            background: var(--sagaColor2);
            display: flex;
            justify-content: space-around;
            padding: 0.5rem;
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 3;
        }

            .mobile-toolbar button {
                padding: 0 0.5rem;
                background: unset;
                border: 0;
                font-size: 1rem;
                font-weight: var(--defaultBoldFontWeight);
                color: var(--sagaColor1);
                display: flex;
                flex-direction: column;
                align-items: center;
            }

                .mobile-toolbar button .guide {
                    font-size: 0.75rem;
                    font-weight: var(--defaultBoldFontWeight);
                    color: var(--structureColor2);
                }

        .project-feed-header-actions {
            display: none;
        }
    }

    @media (max-width: 768px) {

        .hidden-xs {
            display: none !important;
        }

        .project-feed-header button {
            padding: 0.75rem;
            font-size: 0.779rem;
        }

        .project-feed-header-tabs button.filters {
            padding: 0.5rem;
        }

            .project-feed-header-tabs button.filters span {
                width: 1rem;
            }

        .sidebar .visible-xs {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }


        .sidebar .notLoggedin,
        li.WelcomeYou,
        li.current-customer {
            border-radius: 4px;
            font-size: 0.9rem;
        }
            .current-customer > a {
                justify-content: left;
                padding: 0 0.75rem;
            }
                .current-customer > a span svg {
                    fill: var(--sagaColor1);
                }
            li.WelcomeYou .functional-icon {
                margin: 0 0 0 0.75rem;
                color: var(--sagaColor1);
            }

        .task-description {
            margin: 0 1rem 1rem;
        }

        .task-assigned-to {
            width: calc(100% - 2rem);
            padding: 0 0 2rem;
            border-bottom: 1px solid var(--structureColor4);
            margin: 0 1rem 2rem;
        }

        .currentusertask .current-user-task-name {
            max-width: 6rem;
        }
    }

    @media screen and (max-width: 600px) {
        .blazored-modal-content {
            flex-direction: column;
        }

        .menu,
        .opened-view {
            padding: 0.5rem 0.5rem 4rem;
        }

        div#MyFeed {
            padding: 4rem 0.5rem 0.5rem;
        }

        .sidebar .navbar-brand {
            padding-left: 64px;
        }

            .sidebar .navbar-brand img {
                width: 64px;
                padding: 1rem 0.5rem;
                top: -0.55rem;
            }

            .sidebar .navbar-brand span {
                display: none;
            }

        .page-title {
            width: 100%;
            text-align: center;
        }

        .newslettermain-header-actions,
        .page-header-actions {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
        }

            .page-header-actions button {
                font-size: 0.857rem;
                padding: 0.857rem 0.5rem;
            }

        .project-header .level0 .settings {
            flex-flow: column;
        }

            .project-header .level0 .settings.functional-icon span {
                margin-left: 0;
                margin-bottom: .5rem;
            }

        .blazored-modal-content .form-contentainer-row {
            flex-direction: column;
        }

        .TaskTabs label{
            padding: 0.5rem 1rem;
        }
        .TaskTabs label.topic {
            padding: 0.5rem 0.5rem 0.5rem 2rem;
        }


    }


    @media (max-width: 400px) {


        .message-container {
            padding: 1rem 0.5rem 0.5rem 0.5rem;
        }

        .user-discussion-img {
            width: 35px;
            height: 35px;
            margin-top: 0.25rem;
        }

        .message-user-and-content {
            padding: 0rem 0 0.5rem 0.5rem;
        }
    }